@font-face{font-family:"Commissioner";src:url("/fonts/commissioner.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

:root{
  --paper:#F5F7FA; --surface:#FFFFFF; --ink:#1D2D50; --ink-soft:#4F5D7A; --line:#DCE2EC;
  --net:#1E7A57; --net-soft:#E3F2EB; --efka:#C29A1F; --tax:#7B3F6E; --focus:#2F6FEB;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0F1626; --surface:#17213A; --ink:#E8ECF5; --ink-soft:#A3AEC6; --line:#2A3655;
    --net:#4CC394; --net-soft:#16352B; --efka:#E2BD4A; --tax:#C987BA; --focus:#7DA6FF;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0F1626; --surface:#17213A; --ink:#E8ECF5; --ink-soft:#A3AEC6; --line:#2A3655;
  --net:#4CC394; --net-soft:#16352B; --efka:#E2BD4A; --tax:#C987BA; --focus:#7DA6FF;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Commissioner",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header.site{display:flex;align-items:center;justify-content:space-between;padding:22px 0 8px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand svg{width:30px;height:30px}
.rules-badge{font-size:.85rem;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
h1{font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.05;letter-spacing:-.035em;font-weight:800;margin:28px 0 10px}
.lead{color:var(--ink-soft);font-size:1.08rem;max-width:58ch;margin:0 0 28px}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:24px;overflow-x:auto}
.tab{text-decoration:none;display:inline-block;appearance:none;background:none;border:0;border-bottom:3px solid transparent;color:var(--ink-soft);
  font:inherit;font-weight:600;padding:10px 14px 12px;cursor:pointer;white-space:nowrap}
.tab[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:start}
@media (max-width:820px){.grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;border-bottom:0}.tab{border:1.5px solid var(--line);border-radius:10px;padding:10px 8px;white-space:normal;text-align:center;line-height:1.25}.tab[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.field{margin-bottom:20px}
.field:last-child{margin-bottom:0}
label.lbl,.lbl{display:block;font-weight:600;font-size:.95rem;margin-bottom:8px}
.hint{color:var(--ink-soft);font-size:.86rem;margin-top:6px}
.money{position:relative}
.money input{width:100%;font:inherit;font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums;
  padding:12px 44px 12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
.money span{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:1.3rem;font-weight:600;color:var(--ink-soft)}
input[type=date],input[type=number],select{width:100%;font:inherit;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
.seg{display:flex;background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:3px}
.seg label{flex:1;text-align:center;position:relative}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:block;padding:8px 6px;border-radius:7px;font-weight:600;font-size:.92rem;color:var(--ink-soft)}
.seg input:checked + span{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(20,30,60,.12)}
.seg input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}
.stepper{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:10px;width:max-content;background:var(--paper)}
.stepper button{appearance:none;border:0;background:none;color:var(--ink);font:inherit;font-size:1.3rem;width:44px;height:44px;cursor:pointer}
.stepper output{min-width:36px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
input,select{min-width:0;max-width:100%}
details.adv summary{cursor:pointer;color:var(--ink-soft);font-size:.92rem}
details.adv[open] summary{margin-bottom:10px}
hr.sep{border:0;border-top:1px solid var(--line);margin:22px 0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.result{position:sticky;top:16px}
@media (max-width:820px){.result{position:static}}
.big{font-size:clamp(2.6rem,7vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--net);font-variant-numeric:tabular-nums}
.big-sub{color:var(--ink-soft);margin:8px 0 22px}
.bar{display:flex;height:22px;border-radius:6px;overflow:hidden;background:var(--line);margin-bottom:10px}
.bar i{display:block;height:100%;transition:width .35s ease}
.bar .b-net{background:var(--net)} .bar .b-efka{background:var(--efka)} .bar .b-tax{background:var(--tax)}
.per100{font-size:.92rem;color:var(--ink-soft);margin:0 0 18px}
table.break{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.break td{padding:9px 0;border-bottom:1px solid var(--line)}
table.break td:last-child{text-align:right;font-weight:600;white-space:nowrap}
table.break tr:last-child td{border-bottom:0}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:0}
.d-net{background:var(--net)} .d-efka{background:var(--efka)} .d-tax{background:var(--tax)}
.row-net td{font-weight:700;color:var(--net)}
.annual{margin-top:18px;padding:14px 16px;background:var(--net-soft);border-radius:10px;font-size:.95rem}
.annual b{font-variant-numeric:tabular-nums}
.employer{margin-top:12px;font-size:.92rem;color:var(--ink-soft)}
.note{font-size:.88rem;color:var(--ink-soft);margin-top:14px}
[hidden]{display:none!important}
article.explain{max-width:68ch;margin:56px 0 0}
article.explain h2{font-size:1.6rem;letter-spacing:-.02em;margin:40px 0 10px}
article.explain h3{font-size:1.1rem;margin:24px 0 6px}
article.explain p{margin:0 0 12px}
.faq details{border-top:1px solid var(--line);padding:14px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600}
.faq details p{margin:10px 0 0;color:var(--ink-soft)}
footer.site{margin:60px 0 30px;padding-top:20px;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-soft)}
footer.site p{margin:0 0 8px;max-width:80ch}
.peek{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -4px 16px rgba(20,30,60,.08);font-weight:600;color:var(--ink);text-decoration:none}
.peek b{color:var(--net);font-size:1.35rem;font-variant-numeric:tabular-nums}
@media (max-width:820px){.peek.on{display:flex} body{padding-bottom:64px}}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}}

.more{margin:48px 0 0;max-width:68ch}.more h2{font-size:1.3rem;margin:0 0 10px}.more ul{margin:0;padding-left:20px}.more li{margin:6px 0}
a{color:var(--ink)} article.explain a,.more a{color:var(--net);font-weight:600}
nav.crumbs{font-size:.88rem;color:var(--ink-soft);margin-top:18px}nav.crumbs a{color:var(--ink-soft)}