/* Strategzilla Payroll. Based on design_reference_home_payroll.html (self-contained: no web fonts). */
:root{
  --canvas:#F3F5FB; --surface:#FFFFFF; --side:#FFFFFF;
  --ink:#14163A; --ink-2:#4B4F72; --ink-3:#6D7194; --line:#E4E7F2; --line-2:#D3D8EA;
  --hero:#232C8C; --hero-ink:#FFFFFF; --hero-ink-2:#CDD2FF; --hero-track:#3A44A6; --hero-fill:#8E97FF;
  --action:#232C8C; --action-hover:#1A2170; --on-action:#FFFFFF;
  --sun:#FFC83D; --sun-ink:#14163A;
  /* category colours: tile background / ink */
  --hmrc-bg:#EEE8FF; --hmrc:#5B3CC4;
  --ch-bg:#DDF5EF; --ch:#0B7A63;
  --tpr-bg:#FFE6DF; --tpr:#C2410C;
  --pay-bg:#E0ECFF; --pay:#1D5BD8;
  --money-bg:#FFF3C4; --money:#8A6100;
  --ye-bg:#FDE4F1; --ye:#B0306F;
  --ok-bg:#DDF5EF; --ok:#0B7A63;
  --grey-bg:#EEF0F6; --grey:#62667F;
  --shadow:0 1px 2px rgba(20,22,58,.06),0 8px 24px rgba(20,22,58,.08);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --canvas:#0E1024; --surface:#161935; --side:#12142D;
    --ink:#ECEDFA; --ink-2:#B6B9D9; --ink-3:#9296BA; --line:#262A4F; --line-2:#323768;
    --hero:#1B2170; --hero-ink:#FFFFFF; --hero-ink-2:#C3C8FF; --hero-track:#2C3388; --hero-fill:#8E97FF;
    --action:#8E97FF; --action-hover:#A9B0FF; --on-action:#0E1024;
    --sun:#FFC83D; --sun-ink:#14163A;
    --hmrc-bg:#2A2150; --hmrc:#C4B2FF; --ch-bg:#123A33; --ch:#7EE0C6; --tpr-bg:#3D2219; --tpr:#FFAE93;
    --pay-bg:#18294F; --pay:#9DC0FF; --money-bg:#3A300F; --money:#FFD96B; --ye-bg:#3D1B2E; --ye:#FF9ACB;
    --ok-bg:#123A33; --ok:#7EE0C6; --grey-bg:#22264A; --grey:#A7AACB;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#0E1024; --surface:#161935; --side:#12142D;
  --ink:#ECEDFA; --ink-2:#B6B9D9; --ink-3:#9296BA; --line:#262A4F; --line-2:#323768;
  --hero:#1B2170; --hero-ink:#FFFFFF; --hero-ink-2:#C3C8FF; --hero-track:#2C3388; --hero-fill:#8E97FF;
  --action:#8E97FF; --action-hover:#A9B0FF; --on-action:#0E1024;
  --sun:#FFC83D; --sun-ink:#14163A;
  --hmrc-bg:#2A2150; --hmrc:#C4B2FF; --ch-bg:#123A33; --ch:#7EE0C6; --tpr-bg:#3D2219; --tpr:#FFAE93;
  --pay-bg:#18294F; --pay:#9DC0FF; --money-bg:#3A300F; --money:#FFD96B; --ye-bg:#3D1B2E; --ye:#FF9ACB;
  --ok-bg:#123A33; --ok:#7EE0C6; --grey-bg:#22264A; --grey:#A7AACB;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;font-variant-numeric:tabular-nums}
::selection{background:var(--sun);color:var(--sun-ink)}
h1,h2,h3,p{margin:0}
h1,h2{text-wrap:balance}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--action);outline-offset:2px;border-radius:6px}
.hero :focus-visible{outline-color:var(--sun)}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* category tile */
.tile{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.tile svg.i{width:18px;height:18px}
.c-hmrc{background:var(--hmrc-bg);color:var(--hmrc)}
.c-ch{background:var(--ch-bg);color:var(--ch)}
.c-tpr{background:var(--tpr-bg);color:var(--tpr)}
.c-pay{background:var(--pay-bg);color:var(--pay)}
.c-money{background:var(--money-bg);color:var(--money)}
.c-ye{background:var(--ye-bg);color:var(--ye)}
.c-home{background:var(--grey-bg);color:var(--hero)}

/* shell */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100%}
.side{background:var(--side);border-right:1px solid var(--line);padding-block:20px;padding-inline:14px;display:flex;flex-direction:column;gap:24px;position:sticky;top:env(safe-area-inset-top,0px);height:100vh}
.co{display:flex;gap:10px;align-items:center;padding-inline:6px}
.co .mark{width:36px;height:36px;border-radius:10px;background:var(--hero);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.co b{display:block;font-size:14px;font-weight:700;line-height:1.3}
.co span{font-size:12px;color:var(--ink-3)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a,.nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;padding:6px 8px;border-radius:10px;color:var(--ink-2);font-weight:600}
.nav a .tile{width:30px;height:30px;border-radius:8px}
.nav a:hover{background:var(--canvas);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--canvas);color:var(--ink)}
.nav .badge{margin-left:auto;background:var(--sun);color:var(--sun-ink);font-size:12px;font-weight:800;border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;padding-inline:6px}
.side-foot{margin-top:auto;padding-inline:8px;font-size:12px;color:var(--ink-3)}

.page{display:flex;flex-direction:column;min-width:0}

/* hero band */
.hero{background:var(--hero);color:var(--hero-ink);padding-block:36px 96px;padding-inline:48px}
.hero-in{max-width:1144px;display:flex;flex-direction:column;gap:22px}
.hero h1{font-size:32px;line-height:1.15;font-weight:800;letter-spacing:-.02em}
.hero p.sub{font-size:16px;color:var(--hero-ink-2);margin-top:6px}
.year{display:flex;flex-direction:column;gap:8px;max-width:760px}
.year-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;color:var(--hero-ink-2)}
.year-top b{color:var(--hero-ink);font-size:15px}
.track{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
.seg{height:12px;border-radius:4px;background:var(--hero-track);position:relative;overflow:hidden}
.seg.done{background:var(--hero-fill)}
.seg.now::after{content:"";position:absolute;inset:0;width:var(--p,0%);background:var(--hero-fill)}
.months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;font-size:11px;color:var(--hero-ink-2);text-align:center}
.months .cur{color:var(--sun);font-weight:800}
.pins{position:relative;height:22px}
.pin{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:700;white-space:nowrap}
.pin i{width:10px;height:10px;border-radius:50%;border:2px solid var(--hero);display:block}

/* content */
.main{margin-top:-64px;padding-inline:48px;padding-block:0 64px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start;align-content:start;max-width:1240px}
.col{display:flex;flex-direction:column;gap:24px;min-width:0}
.panel{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:22px 24px}

/* next up */
.next{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;border:2px solid var(--sun)}
.leaf{width:66px;border-radius:12px;overflow:hidden;text-align:center;background:var(--surface);border:1px solid var(--line-2)}
.leaf .mo{display:block;background:var(--sun);color:var(--sun-ink);font-size:12px;font-weight:800;letter-spacing:.04em;padding:3px 0}
.leaf .d{display:block;font-size:28px;font-weight:800;line-height:1.35;padding-bottom:2px}
.next .kicker{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--hmrc)}
.next h2{font-size:21px;font-weight:800;line-height:1.3;margin-top:2px}
.next .meta{color:var(--ink-2);margin-top:4px}
.next .acts{display:flex;align-items:center;gap:14px}
.btn{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:700;font-size:14px;white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--action);border-color:var(--action);color:var(--on-action)}
.btn.primary:hover{background:var(--action-hover);border-color:var(--action-hover)}
.btn:disabled{opacity:.5;cursor:default}
.link{background:none;border:0;padding:0;color:var(--action);font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.resolve{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:14px}
.resolve .opts{display:flex;flex-wrap:wrap;gap:10px}
.why{grid-column:1/-1;background:var(--hmrc-bg);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink);max-width:70ch}
.why .src{font-size:12px;color:var(--ink-2)}
.toast{font-size:14px;color:var(--ok);font-weight:700}

/* task groups */
.group-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.group-head h2{font-size:18px;font-weight:800}
.group-head .sub{font-size:14px;color:var(--ink-3)}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) 120px 136px;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}
.row .name{display:flex;flex-direction:column;gap:1px;min-width:0}
.row .name button{background:none;border:0;padding:0;text-align:left;font-weight:700;color:var(--ink)}
.row .name button:hover{color:var(--action);text-decoration:underline;text-underline-offset:3px}
.row .name b{font-weight:700}
.row .hint{font-size:13px;color:var(--ink-3)}
.row .when{font-size:14px;color:var(--ink-2);text-align:right}
.row .tagcell{text-align:right}
.row .why{margin-top:8px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.t-needs{background:var(--sun);color:var(--sun-ink)}
.t-todo{background:var(--pay-bg);color:var(--pay)}
.t-cant{background:var(--grey-bg);color:var(--grey)}
.t-done{background:var(--ok-bg);color:var(--ok)}
.t-done svg.i{width:14px;height:14px}
.bodies .row{grid-template-columns:auto minmax(0,1fr) auto 110px}

/* rail */
.rail{display:flex;flex-direction:column;gap:24px}
.rail h2{font-size:16px;font-weight:800;margin-bottom:12px}
.ev{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.ev:first-of-type{border-top:0;padding-top:0}
.dleaf{border-radius:10px;text-align:center;line-height:1.1;padding:6px 0}
.dleaf b{display:block;font-size:18px;font-weight:800}
.dleaf span{display:block;font-size:11px;font-weight:800;letter-spacing:.04em}
.ev p{font-size:14px;font-weight:600}
.ev .amt{color:var(--ink-3);font-size:13px}
.receipt{display:flex;flex-direction:column;gap:6px;font-size:14px;background:var(--ch-bg);color:var(--ink)}
.receipt .ok{display:inline-flex;gap:6px;align-items:center;color:var(--ch);font-weight:800}
.receipt .ref{font-size:13px;color:var(--ink-2)}
.legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:block}

.soon{display:flex;flex-direction:column;gap:10px;max-width:52ch}
.soon h1{font-size:26px;font-weight:800}
.soon p{color:var(--ink-2)}

/* payroll */
.months-rt{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;max-width:760px}
.mrt{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--hero-ink-2)}
.mrt i{display:grid;place-items:center;width:100%;height:30px;border-radius:7px;background:var(--hero-track);font-style:normal;font-size:12px;font-weight:800;color:var(--hero-ink)}
.mrt.ok i{background:#39B58F}
.mrt.assumed i{background:#2C8F72;opacity:.75}
.mrt.late i{background:var(--sun);color:var(--sun-ink)}
.mrt.fine i{background:#FF7A59;color:#1B0F0A}
.mrt.now i{background:transparent;border:2px dashed var(--sun);color:var(--sun)}
.mrt.now{color:var(--sun);font-weight:800}
.hkey{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--hero-ink-2)}
.hkey span{display:inline-flex;align-items:center;gap:6px}
.hkey i{width:10px;height:10px;border-radius:3px;display:block}
.stepper{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0}
.st{display:flex;flex-direction:column;gap:8px;padding:0 10px 0 0;position:relative}
.st .dotn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--grey-bg);color:var(--grey);position:relative;z-index:1}
.st::before{content:"";position:absolute;top:15px;left:30px;right:0;height:2px;background:var(--line-2)}
.st:last-child::before{display:none}
.st.done .dotn{background:var(--ok-bg);color:var(--ok)}
.st.cur .dotn{background:var(--sun);color:var(--sun-ink)}
.st b{font-size:14px}
.st span{font-size:13px;color:var(--ink-3)}
.ex{display:inline-block;font-size:12px;font-weight:700;color:var(--money);background:var(--money-bg);border-radius:999px;padding:3px 10px}
.person{display:grid;grid-template-columns:auto minmax(0,1fr) 110px 110px 28px;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.person:first-of-type{border-top:0}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px}
.person .nm b{display:block}
.person .nm span{font-size:13px;color:var(--ink-3)}
.person .amt{text-align:right}
.person .amt small{display:block;font-size:12px;color:var(--ink-3)}
.person .amt b{font-size:15px}
.person .more{background:none;border:0;color:var(--ink-3);font-size:18px;line-height:1;padding:4px;border-radius:6px}
.person .more:hover{color:var(--ink);background:var(--canvas)}
.breakdown{grid-column:2/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;background:var(--canvas);border-radius:12px;padding:12px 14px;font-size:13px}
.breakdown div{display:flex;flex-direction:column}
.breakdown span{color:var(--ink-3)}
.totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.tot{border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.tot span{font-size:13px;font-weight:600}
.tot b{font-size:20px;font-weight:800}
.checks{display:flex;flex-direction:column;gap:10px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.chk .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none}
.chk .ic svg.i{width:13px;height:13px;stroke-width:2.6}
.chk.good .ic{background:var(--ok-bg);color:var(--ok)}
.chk.warn .ic{background:var(--sun);color:var(--sun-ink);font-weight:800;font-size:13px}
.approve{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border:2px solid var(--pay)}
.approve p{color:var(--ink-2);max-width:52ch}
.meter{height:12px;border-radius:999px;background:var(--pay-bg);overflow:hidden}
.meter i{display:block;height:100%;background:var(--pay);border-radius:999px}
.meter-lab{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2);margin-top:6px}
.bignum{font-size:28px;font-weight:800;color:var(--ok)}
@media (max-width:760px){
  .stepper{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .st::before{display:none}
  .months-rt{grid-template-columns:repeat(6,minmax(0,1fr))}
  .person{grid-template-columns:auto minmax(0,1fr) auto 28px}
  .person .amt.g{display:none}
  .breakdown{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
  .totals{grid-template-columns:1fr}
}

.topbar{display:none}

@media (max-width:1180px){
  .main{grid-template-columns:minmax(0,1fr)}
  .rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .topbar{display:flex;flex-direction:column;gap:8px;padding-block:14px 0;padding-inline:16px;background:var(--hero);color:var(--hero-ink);position:sticky;top:env(safe-area-inset-top,0px);z-index:3}
  .topbar b{font-size:15px}
  .topbar nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
  .topbar nav button{background:none;border:0;border-bottom:3px solid transparent;padding:8px 10px 10px;color:var(--hero-ink-2);font-weight:700;font-size:14px;white-space:nowrap}
  .topbar nav button[aria-current="page"]{color:var(--hero-ink);border-bottom-color:var(--sun)}
  .hero{padding-inline:16px;padding-block:24px 84px}
  .hero h1{font-size:25px}
  .months span:nth-child(even){visibility:hidden}
  .main{padding-inline:16px;padding-block:0 48px;gap:20px}
  .panel{padding:18px}
  .next{grid-template-columns:auto minmax(0,1fr)}
  .next .acts{grid-column:1/-1}
  .row,.bodies .row{grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px}
  .row .when{grid-column:2;grid-row:2;text-align:left;font-size:13px}
  .row .tagcell{grid-column:3;grid-row:1/3}
  .row .tile{grid-row:1/3}
  .rail{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ---------- app additions ---------- */
a{color:var(--action)}
.nav a{text-decoration:none}
body{margin:0}
.flash{margin:0 0 16px;padding:12px 16px;border-radius:12px;font-weight:600;font-size:14px}
.flash.ok{background:var(--ok-bg);color:var(--ok)}
.flash.error{background:var(--sun);color:var(--sun-ink)}
.flash.info{background:var(--pay-bg);color:var(--pay)}
.flashes{padding-inline:48px;margin-top:16px;max-width:1240px}
.hero .flash{margin-top:0}
details.why-d{grid-column:1/-1}
details.why-d summary{cursor:pointer;color:var(--action);font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:3px;list-style:none;display:inline}
details.why-d summary::-webkit-details-marker{display:none}
details.why-d[open] .why{margin-top:10px}
.why ol,.why ul{margin:0;padding-left:20px}
.plain-main{max-width:980px;margin:0 auto;padding:40px 24px 64px;display:flex;flex-direction:column;gap:24px}
.auth{max-width:460px;margin:8vh auto;padding:0 16px;display:flex;flex-direction:column;gap:18px}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;font-size:18px}
.brand .mark{width:36px;height:36px;border-radius:10px;background:var(--hero);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
form.stack{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:14px}
label .hint,.hint{font-weight:400;font-size:13px;color:var(--ink-3)}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{font:inherit;padding:9px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink);min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--action);outline-offset:1px}
label.check{flex-direction:row;align-items:center;gap:8px;font-weight:600}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
fieldset{border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
legend{font-weight:800;padding:0 6px}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
a.btn{text-decoration:none;display:inline-block}
.btn.warn{border-color:var(--tpr);color:var(--tpr)}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;font-size:12px;color:var(--ink-3);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line-2)}
table.t td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.t td.n,table.t th.n{text-align:right}
table.t tr.fail td{background:var(--money-bg)}
.muted{color:var(--ink-3)}
.small{font-size:13px}
.pill{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:2px 10px}
.steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:12px}
.steps li{padding-left:4px}
.expect{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.expect span{background:var(--pay-bg);color:var(--pay);border-radius:8px;padding:3px 10px;font-size:13px;font-weight:700}
.key{font-family:ui-monospace,Consolas,monospace;font-size:20px;font-weight:800;letter-spacing:.06em;background:var(--canvas);padding:10px 14px;border-radius:10px;word-break:break-all}
.co-list a{display:flex;justify-content:space-between;padding:14px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700}
.co-list a:first-child{border-top:0}
.trace{font-size:13px;font-family:ui-monospace,Consolas,monospace;white-space:pre-wrap;background:var(--canvas);border-radius:10px;padding:10px 12px;max-height:320px;overflow:auto}
.person .why-d{grid-column:2/-1}
.person{grid-template-columns:auto minmax(0,1fr) 110px 110px 60px}
.linkbtn{background:none;border:0;padding:0;color:var(--action);font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.side form{margin:0}
.danger{border:2px solid var(--tpr)}
.hero a{color:var(--hero-ink)}
.hero .btn{color:var(--ink)}
.hero .btn.primary{background:var(--sun);border-color:var(--sun);color:var(--sun-ink)}
@media (max-width:760px){.flashes{padding-inline:16px}.grid2,.grid3{grid-template-columns:1fr}}

/* payslip (print) */
.slip{max-width:760px;margin:24px auto;background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:28px 32px;display:flex;flex-direction:column;gap:18px}
.slip h1{font-size:22px;font-weight:800}
.slip .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.slip .net{font-size:26px;font-weight:800;color:var(--ok)}
@media print{
  body{background:#fff}
  .noprint{display:none!important}
  .slip{box-shadow:none;margin:0;max-width:none;padding:0}
}
.topbar nav a{border-bottom:3px solid transparent;padding:8px 10px 10px;color:var(--hero-ink-2);font-weight:700;font-size:14px;white-space:nowrap;text-decoration:none}