*{box-sizing:border-box;margin:0;padding:0}:root{--color-primary: #3b82f6;--color-primary-dark: #2563eb;--color-success: #22c55e;--color-warning: #f59e0b;--color-danger: #ef4444;--color-purple: #8b5cf6;--color-teal: #10b981;--color-bg: #0f172a;--color-bg-secondary: #1e293b;--color-bg-tertiary: #334155;--color-text: #f1f5f9;--color-text-secondary: #94a3b8;--color-border: #475569;--radius: 8px;--radius-lg: 12px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh}.app{max-width:1200px;margin:0 auto;padding:2rem 1rem}.header{text-align:center;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--color-border)}.header h1{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-teal) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.subtitle{color:var(--color-text-secondary);font-size:1.1rem}.main{display:grid;grid-template-columns:1fr 1.5fr;gap:2rem}@media (max-width: 900px){.main{grid-template-columns:1fr}}.input-section{background:var(--color-bg-secondary);padding:1.5rem;border-radius:var(--radius-lg);border:1px solid var(--color-border)}.input-section h2{font-size:1.25rem;margin-bottom:1.5rem;color:var(--color-text)}.input-grid{display:grid;gap:1rem}.input-group{display:flex;flex-direction:column;gap:.375rem}.input-group label{font-size:.875rem;font-weight:500;color:var(--color-text)}.input-group.highlight-ltcg{background:#10b9811a;padding:.75rem;border-radius:var(--radius);border-left:3px solid var(--color-teal)}.input-group.highlight-stcg{background:#f59e0b1a;padding:.75rem;border-radius:var(--radius);border-left:3px solid var(--color-warning)}.input-with-prefix{display:flex;align-items:center;background:var(--color-bg-tertiary);border-radius:var(--radius);border:1px solid var(--color-border);overflow:hidden;transition:border-color .2s}.input-with-prefix:focus-within{border-color:var(--color-primary)}.input-with-prefix .prefix{padding:.625rem .75rem;background:var(--color-bg);color:var(--color-text-secondary);font-weight:500}.input-with-prefix input{flex:1;padding:.625rem .75rem;border:none;background:transparent;color:var(--color-text);font-size:1rem;outline:none}.input-with-prefix input::placeholder{color:var(--color-text-secondary)}select{padding:.625rem .75rem;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg-tertiary);color:var(--color-text);font-size:1rem;cursor:pointer;outline:none}select:focus{border-color:var(--color-primary)}.input-help{font-size:.75rem;color:var(--color-text-secondary)}.deduction-section{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--color-border)}.deduction-section h3{font-size:1rem;margin-bottom:1rem}.deduction-toggle{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.toggle-option{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9rem}.toggle-option input{accent-color:var(--color-primary)}.results-section{display:flex;flex-direction:column;gap:1.5rem}.results-section h2{font-size:1.25rem}.summary-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}@media (max-width: 600px){.summary-cards{grid-template-columns:1fr}}.summary-card{background:var(--color-bg-secondary);padding:1.25rem;border-radius:var(--radius-lg);border:1px solid var(--color-border);text-align:center}.summary-card h3{font-size:.875rem;font-weight:500;color:var(--color-text-secondary);margin-bottom:.5rem}.summary-card .amount{font-size:1.5rem;font-weight:700;display:block}.summary-card .rate{font-size:.875rem;color:var(--color-text-secondary)}.summary-card.gross .amount{color:var(--color-text)}.summary-card.taxes .amount{color:var(--color-danger)}.summary-card.take-home .amount{color:var(--color-success)}.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media (max-width: 700px){.charts-grid{grid-template-columns:1fr}}.chart-container{background:var(--color-bg-secondary);padding:1.25rem;border-radius:var(--radius-lg);border:1px solid var(--color-border)}.chart-container h3{font-size:1rem;margin-bottom:1rem;text-align:center}.detailed-breakdown{background:var(--color-bg-secondary);padding:1.5rem;border-radius:var(--radius-lg);border:1px solid var(--color-border)}.detailed-breakdown h3{font-size:1.125rem;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--color-border)}.breakdown-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--color-border)}.breakdown-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.breakdown-section h4{font-size:1rem;font-weight:600;display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.breakdown-section.ltcg h4{color:var(--color-teal)}.breakdown-section.niit h4{color:var(--color-warning)}.breakdown-section.fica h4{color:var(--color-purple)}.section-total{font-weight:700}.breakdown-info{font-size:.875rem;color:var(--color-text-secondary);margin-bottom:.75rem}.bracket-table,.fica-table{width:100%;border-collapse:collapse;font-size:.875rem;margin-bottom:.75rem}.bracket-table th{text-align:left;padding:.5rem;background:var(--color-bg-tertiary);border-radius:var(--radius);font-weight:500;color:var(--color-text-secondary)}.bracket-table td,.fica-table td{padding:.5rem;border-bottom:1px solid var(--color-border)}.bracket-table tr:last-child td,.fica-table tr:last-child td{border-bottom:none}.fica-table td:last-child{text-align:right;font-weight:500}.marginal-rate{font-size:.875rem;color:var(--color-primary);font-weight:500}.niit-calculation{font-size:.875rem;color:var(--color-text-secondary);margin-bottom:.25rem}.niit-calculation.highlight{color:var(--color-warning);font-weight:500;margin-top:.5rem}.no-tax{font-size:.875rem;color:var(--color-success);font-style:italic}.footer{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--color-border);text-align:center;color:var(--color-text-secondary);font-size:.875rem}.footer .sources{margin-top:.5rem}.footer a{color:var(--color-primary);text-decoration:none}.footer a:hover{text-decoration:underline}.recharts-default-tooltip{background:var(--color-bg-secondary)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important}.recharts-tooltip-label{color:var(--color-text)!important}.recharts-tooltip-item{color:var(--color-text-secondary)!important}.recharts-cartesian-axis-tick-value{fill:var(--color-text-secondary);font-size:.75rem}.recharts-pie-label-text{fill:var(--color-text);font-size:.7rem}
