:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1a2940;background:#f5f7fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.container{width:min(1120px,calc(100% - 36px));margin:auto}a{color:#2562c9}.topbar{height:78px;background:#fff;border-bottom:1px solid #e8edf5}.nav{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:7px;text-decoration:none;color:#132440;font-weight:850;font-size:21px;letter-spacing:-.8px}.brand-mark{display:grid;place-items:center;background:#2365e5;color:white;width:34px;height:34px;border-radius:10px;font-size:22px}.brand-light{color:#316ce7;margin-left:-6px}.year-pill{background:#edf4ff;border:1px solid #d8e8ff;color:#3161a5;border-radius:50px;padding:9px 13px;font-size:12px;font-weight:750}.hero{text-align:center;max-width:760px;margin:66px auto 38px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:#396ded}.hero h1{font-size:clamp(34px,5.3vw,60px);line-height:1.12;letter-spacing:-2.5px;margin:14px 0}.hero em{font-style:normal;color:#2869e8}.hero p{color:#68788e;font-size:17px;line-height:1.7;max-width:625px;margin:auto}.layout{display:grid;grid-template-columns:1fr 1fr;gap:22px}.panel{border:1px solid #e3e9f3;background:white;border-radius:21px;padding:30px;box-shadow:0 10px 32px #20345508}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px}.panel h2{font-size:22px;letter-spacing:-.6px;margin:0 0 6px}.panel p{margin:0;color:#7e8a9c;font-size:13px;line-height:1.6}.sparkle{color:#5785ed;font-size:27px}label{display:block;font-weight:750;font-size:12px;color:#33435c;margin-bottom:10px}.currency-input,.suffix-input{display:flex;align-items:center;background:#f8faff;border:1px solid #dfe7f3;border-radius:12px;overflow:hidden}.currency-input span{font-size:22px;font-weight:700;color:#8c9eb8;padding-left:17px}.currency-input input{font-size:27px;font-weight:800;min-width:0;padding:14px 13px;border:0;background:transparent;width:100%;color:#1a2b46;outline:none}.suffix-input input{width:100%;min-width:0;padding:14px;font-size:15px;border:0;outline:none;background:transparent}.suffix-input span{padding:10px 14px;color:#778ba7;font-weight:800}.hint{color:#8995a5!important;font-size:11px!important;margin-top:7px!important}.range{accent-color:#2869e8;width:100%;margin:20px 0 4px;cursor:pointer}.range-labels{display:flex;justify-content:space-between;color:#9daabc;font-size:11px;margin-bottom:30px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}select{width:100%;background:#f8faff;border:1px solid #dfe7f3;border-radius:12px;padding:15px 11px;color:#273a59;font-size:14px;min-width:0}.check-field{display:flex;align-items:center;padding-top:20px}.checkbox-label{display:flex;align-items:center;gap:8px;margin:0;cursor:pointer;font-size:13px}.checkbox-label input{accent-color:#2869e8;width:17px;height:17px}.fine-print{border-top:1px solid #edf0f5;padding-top:22px;margin-top:28px!important;font-size:11px!important}.live-dot{color:#249f7d;background:#ebf9f3;padding:6px 10px;border-radius:20px;font-size:10px;font-weight:850;letter-spacing:1px}.primary-result{background:linear-gradient(135deg,#142d5d,#234ba4);border-radius:18px;padding:28px;text-align:center;color:white;display:grid;gap:11px}.primary-result span:first-child{font-size:11px;letter-spacing:2px;color:#b4ceff;font-weight:750}.primary-result strong{font-size:clamp(33px,4.3vw,48px);letter-spacing:-1.5px}.primary-result span:last-child{font-size:13px;color:#d3e0ff}.period-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.period-grid>div{background:#f5f8fd;border-radius:12px;padding:15px 9px;text-align:center;display:grid;gap:9px}.period-grid span{font-size:10px;color:#8998ac}.period-grid strong{font-size:15px}.results-panel h3{font-size:15px;margin:31px 0 16px}.splitbar{display:flex;width:100%;height:13px;overflow:hidden;border-radius:20px;background:#edf2f8}.take-home{background:#25b58b}.tax{background:#f4b15b}.ni{background:#668be5}.pension{background:#9174de}.loan{background:#ed7892}.breakdown{margin-top:17px}.breakdown-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:13px}.item-label{display:flex;align-items:center;gap:9px;color:#64738a}.dot{display:inline-block;width:9px;height:9px;border-radius:50%}.breakdown-row strong{font-size:13px}.secondary-button{background:white;border:1px solid #dbe5f1;border-radius:11px;color:#315eaf;padding:13px 19px;width:100%;margin-top:16px;font-weight:750;cursor:pointer}.secondary-button:hover{background:#edf4ff}.comparison{margin-top:24px}.compare-intro{display:flex;justify-content:space-between;align-items:center;gap:30px}.compare-intro h2{margin:8px 0}.compare-intro p{max-width:620px}.compare-field{width:230px;flex-shrink:0}.compare-field .currency-input input{font-size:22px;padding:12px}.compare-output{margin-top:25px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.compare-output>div{background:#f4f8ff;border:1px solid #e7eefc;border-radius:13px;padding:19px;display:grid;gap:10px}.compare-output span{font-size:12px;color:#7c8ba0}.compare-output strong{color:#206bce;font-size:25px}.info{max-width:900px;margin:55px auto 65px}.info h2{font-size:23px}.info p{color:#66758a;font-size:14px;line-height:1.9}.source-links{font-size:12px!important}footer{border-top:1px solid #e1e8f2;background:white;padding:26px 0}.footer-inner{display:flex;justify-content:space-between;gap:20px;color:#97a2b2;font-size:12px}@media(max-width:780px){.hero{margin:47px auto 32px}.hero h1{letter-spacing:-1.4px}.layout{grid-template-columns:1fr}.panel{padding:23px}.compare-intro{align-items:stretch;flex-direction:column;gap:20px}.compare-field{width:100%}.compare-output{grid-template-columns:1fr}.footer-inner{flex-direction:column}.hero p{font-size:15px}}@media(max-width:400px){.container{width:min(100% - 24px,1120px)}.year-pill{font-size:10px}.fields{gap:9px}.period-grid{gap:5px}.period-grid strong{font-size:12px}.period-grid span{font-size:9px}}

.currency-input input::placeholder{color:#a0abc0;opacity:1;font-weight:500}
.secondary-button:disabled{opacity:.5;cursor:not-allowed}

/* V1.2 — Salary frequency, mobile-first */
.salary-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:10px}
.salary-heading>label{margin-bottom:6px}
.frequency-field{min-width:130px}
.frequency-field label{font-size:11px;color:#697b92;margin-bottom:5px}
.frequency-field select{padding:8px 10px;font-size:13px;font-weight:650}
.hours-field{margin-top:16px}
.hours-field[hidden]{display:none}
.hours-field>input{width:100%;background:#f8faff;border:1px solid #dfe7f3;border-radius:12px;padding:13px;font-size:15px;color:#273a59}
.annual-equivalent{color:#315eaf!important;font-size:12px!important;margin-top:8px!important;min-height:0}
@media(max-width:400px){.salary-heading{align-items:center}.frequency-field{min-width:112px}.salary-heading>label{max-width:150px}.frequency-field select{width:100%}}

/* V1.3 — visible frequency selector, accessible on narrow phones */
.frequency-field{border:0;margin:0 0 20px;padding:0;min-width:0}
.frequency-field legend{font-size:12px;font-weight:750;color:#33435c;margin-bottom:10px;padding:0}
.frequency-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:5px;border:1px solid #dfe7f3;background:#f2f5fc;border-radius:13px}
.frequency-tabs label{position:relative;margin:0;min-width:0;cursor:pointer}
.frequency-tabs input{position:absolute;width:100%;height:100%;opacity:0;inset:0;cursor:pointer}
.frequency-tabs span{display:block;text-align:center;padding:11px 3px;border-radius:9px;font-size:12px;font-weight:750;color:#62738e;transition:background .12s,color .12s}
.frequency-tabs input:checked+span{background:#2869e8;color:white;box-shadow:0 2px 6px #173d8640}
.frequency-tabs input:focus-visible+span{outline:3px solid #77b7fb;outline-offset:2px}
.frequency-tabs input:not(:checked):hover+span{background:#e4ecfa}
#salary-label{margin-bottom:10px}
@media(max-width:400px){.frequency-tabs{gap:2px;padding:3px}.frequency-tabs span{font-size:11px;padding:10px 1px}}


/* Version 1.5 bonus forecast */
.bonus-panel{margin-top:24px}
.bonus-panel .panel-head{align-items:center}
.bonus-panel .panel-head h2{margin:8px 0}
.bonus-panel .panel-head p{max-width:710px}
.bonus-tag{background:#eef6ff;border-radius:25px;padding:9px 11px;font-weight:800;color:#3267bb;font-size:11px;white-space:nowrap}
.bonus-fields{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:20px;align-items:end}
.bonus-fields .currency-input input{font-size:22px}
.bonus-method{padding:0;margin:0;border:0;min-width:0}
.bonus-method legend{font-size:12px;font-weight:750;color:#33435c;margin-bottom:10px}
.bonus-method label{display:flex;align-items:center;gap:8px;margin:0 0 9px;cursor:pointer;font-size:13px}
.bonus-method input,.bonus-pension input{accent-color:#2869e8}
.bonus-pension{grid-column:1/-1}
.bonus-pension label{font-weight:600;line-height:1.5}
.bonus-explain{font-size:12px!important;color:#68788e!important;margin:18px 0!important}
.bonus-empty{border:1px dashed #cbd9ed;background:#f8fbff;border-radius:13px;padding:22px;color:#61718b;text-align:center;margin-top:18px}
.bonus-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:23px}
.bonus-kpis>div{background:#f4f8ff;border:1px solid #e1eafa;border-radius:14px;padding:17px;display:grid;gap:12px;min-width:0}
.bonus-kpis span{color:#7686a0;font-size:12px}
.bonus-kpis strong{color:#206bce;font-size:clamp(19px,2vw,26px);overflow-wrap:anywhere}
.bonus-qualifier{margin:16px 0!important;font-size:12px!important}
.table-scroll{overflow-x:auto;margin-top:18px;border:1px solid #e2e9f3;border-radius:13px}
.forecast-table{border-collapse:collapse;width:100%;min-width:810px;text-align:right;font-variant-numeric:tabular-nums}
.forecast-table th,.forecast-table td{border-bottom:1px solid #e8edf4;padding:11px 10px;font-size:12px;white-space:nowrap}
.forecast-table th{background:#f1f5fc;color:#536682;font-size:11px}
.forecast-table th:first-child,.forecast-table td:first-child{text-align:left;font-weight:750}
.forecast-table tbody tr:nth-child(even){background:#fbfcff}
.forecast-table tbody tr.bonus-month{background:#edf5ff}
.forecast-table td:last-child{font-weight:800;color:#174da1}
.forecast-table tfoot td{font-weight:800;background:#f1f5fc;border-bottom:0}
@media(max-width:780px){.bonus-fields{grid-template-columns:1fr 1fr}.bonus-method{grid-column:2}.bonus-kpis{grid-template-columns:1fr}.bonus-panel .panel-head{gap:14px}}
@media(max-width:520px){.bonus-fields{grid-template-columns:1fr}.bonus-method{grid-column:1}.bonus-tag{font-size:9px}}

/* V1.6 additions */
.year-picker{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:#52637f}
.year-picker select{width:auto;max-width:220px;padding:10px 12px;border-radius:14px;background:#eef3ff;color:#2b519e;border:1px solid #d6e2ff;font:inherit}
.tax-code-group{margin:20px 0 12px}.tax-code-group>label{display:block;font-weight:750;margin-bottom:8px}.tax-code-group>input{width:100%;max-width:260px;border:1px solid #dce5f7;background:#f6f8fd;color:#1c2b4c;border-radius:12px;padding:15px;font:inherit;text-transform:uppercase}
.optional{font-weight:500;color:#7e8ba4}.bonus-kind{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px;padding:0;border:0}.bonus-kind legend{font-weight:750;margin-bottom:8px}.bonus-kind label{display:block;cursor:pointer;font-size:14px;font-weight:650}.bonus-input-block .hint{margin-top:8px}.year-warning{padding:14px;border:1px solid #c8dcff;border-radius:12px;background:#f3f7ff;color:#465b7a}
@media(max-width:600px){.year-picker{gap:5px;flex-wrap:wrap;justify-content:flex-end}.year-picker select{max-width:165px;font-size:12px;padding:8px}}