:root{
  --ground:#EDEFF4; --surface:#FFFFFF; --raised:#F6F7FA; --line:#DBDFE8; --line-soft:#E7EAF1;
  --ink:#161B27; --muted:#5A6376; --faint:#8791A4;
  --accent:#3A50DA; --accent-ink:#2B3CAE; --accent-weak:#E9ECFB; --accent-line:#C9D0F4;
  --good:#2E9E6B; --good-bg:#E4F2EB; --warn:#B9821A; --warn-bg:#F6EDD8; --crit:#D14259; --crit-bg:#F9E5EA;
  --shadow:0 1px 2px rgba(20,26,40,.05), 0 6px 20px rgba(20,26,40,.05);
  --shadow-lift:0 2px 6px rgba(20,26,40,.08), 0 16px 40px rgba(20,26,40,.10);
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:12px; --r-sm:8px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0C1019; --surface:#141A27; --raised:#1A2130; --line:#28303F; --line-soft:#212836;
    --ink:#E7EBF3; --muted:#98A2B6; --faint:#697187;
    --accent:#8296FF; --accent-ink:#A9B8FF; --accent-weak:#1A2340; --accent-line:#2C3766;
    --good:#43C08A; --good-bg:#123026; --warn:#DDA23A; --warn-bg:#2C230F; --crit:#F0728A; --crit-bg:#31151E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 22px rgba(0,0,0,.35);
    --shadow-lift:0 2px 8px rgba(0,0,0,.5), 0 20px 46px rgba(0,0,0,.5);
  }
}
:root[data-theme="light"]{
  --ground:#EDEFF4; --surface:#FFFFFF; --raised:#F6F7FA; --line:#DBDFE8; --line-soft:#E7EAF1;
  --ink:#161B27; --muted:#5A6376; --faint:#8791A4;
  --accent:#3A50DA; --accent-ink:#2B3CAE; --accent-weak:#E9ECFB; --accent-line:#C9D0F4;
  --good:#2E9E6B; --good-bg:#E4F2EB; --warn:#B9821A; --warn-bg:#F6EDD8; --crit:#D14259; --crit-bg:#F9E5EA;
  --shadow:0 1px 2px rgba(20,26,40,.05), 0 6px 20px rgba(20,26,40,.05);
  --shadow-lift:0 2px 6px rgba(20,26,40,.08), 0 16px 40px rgba(20,26,40,.10);
}
:root[data-theme="dark"]{
  --ground:#0C1019; --surface:#141A27; --raised:#1A2130; --line:#28303F; --line-soft:#212836;
  --ink:#E7EBF3; --muted:#98A2B6; --faint:#697187;
  --accent:#8296FF; --accent-ink:#A9B8FF; --accent-weak:#1A2340; --accent-line:#2C3766;
  --good:#43C08A; --good-bg:#123026; --warn:#DDA23A; --warn-bg:#2C230F; --crit:#F0728A; --crit-bg:#31151E;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 22px rgba(0,0,0,.35);
  --shadow-lift:0 2px 8px rgba(0,0,0,.5), 0 20px 46px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans); background:var(--ground); color:var(--ink); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ---- login ---- */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%, var(--accent-weak), transparent 60%), var(--ground)}
.login{width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line-soft); border-radius:16px;
  box-shadow:var(--shadow-lift); padding:30px 30px 26px}
.login .brand{display:flex; align-items:center; gap:11px; margin-bottom:22px}
.login .mark{width:34px; height:34px; border-radius:10px; background:linear-gradient(150deg,var(--accent),var(--accent-ink)); position:relative; flex:none}
.login .mark::after{content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; transform:translate(-50%,-50%); border-radius:50%; background:#fff}
.login .brand b{font-size:16px; display:block; line-height:1.1}
.login .brand span{font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--faint); text-transform:uppercase}
.login h1{font-size:15px; margin:0 0 4px}
.login p.sub{color:var(--muted); font-size:12.5px; margin:0 0 20px}
.field{display:block; margin-bottom:13px}
.field span{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:6px}
.field input,.field select,.field textarea{width:100%; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 12px; color:var(--ink); font-family:var(--sans); font-size:14px}
.field input:focus{border-color:var(--accent-line); outline:none; background:var(--surface)}
.login .err{background:var(--crit-bg); color:var(--crit); font-size:12.5px; padding:9px 12px; border-radius:var(--r-sm); margin-bottom:14px}
.login button{width:100%; margin-top:6px; background:var(--accent); color:#fff; border:0; border-radius:var(--r-sm); padding:11px; font-size:14px; font-weight:600; cursor:pointer}
.login button:hover{background:var(--accent-ink)}
.login .hint{margin-top:16px; font-size:11px; color:var(--faint); text-align:center}
.gbtn{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:11px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font-size:14px; font-weight:600; cursor:pointer; text-decoration:none}
.gbtn:hover{border-color:var(--accent-line); background:var(--raised); text-decoration:none}
.gbtn .g{display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; font-size:11px; font-family:var(--mono)}
.ordiv{display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--faint); font-size:11px}
.ordiv::before,.ordiv::after{content:""; flex:1; height:1px; background:var(--line-soft)}

/* ---- shell ---- */
.shell{display:grid; grid-template-columns:236px 1fr; min-height:100vh}
.rail{position:sticky; top:0; align-self:start; height:100vh; overflow:auto; background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:4px; padding:20px 14px}
.brand{display:flex; align-items:center; gap:10px; padding:6px 8px 18px}
.brand .mark{width:30px; height:30px; border-radius:9px; flex:none; position:relative; background:linear-gradient(150deg,var(--accent),var(--accent-ink)); box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 45%, transparent)}
.brand .mark::before{content:""; position:absolute; inset:0; border-radius:9px; background:radial-gradient(circle at 30% 28%, rgba(255,255,255,.55), transparent 45%)}
.brand .mark::after{content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; transform:translate(-50%,-50%); border-radius:50%; background:#fff; box-shadow:0 0 0 3px color-mix(in srgb,#fff 25%, transparent)}
.brand b{font-size:15px; letter-spacing:.02em; display:block; line-height:1.1}
.brand span{font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--faint); text-transform:uppercase}
.nav{display:flex; flex-direction:column; gap:2px}
.nav button{display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:0; color:var(--muted); font-family:var(--sans); font-size:13.5px; padding:9px 11px; border-radius:var(--r-sm); cursor:pointer; transition:.14s}
.nav button:hover{background:var(--raised); color:var(--ink)}
.nav button.on{background:var(--accent-weak); color:var(--accent-ink); font-weight:600}
.nav button .ic{width:16px; height:16px; flex:none; opacity:.85}
.nav button .cnt{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--faint)}
.nav button.on .cnt{color:var(--accent-ink)}
.nav-sep{height:1px; background:var(--line-soft); margin:12px 8px}
.rail-foot{margin-top:auto; padding:12px 6px 4px; display:flex; flex-direction:column; gap:10px}
.who{display:flex; align-items:center; gap:10px; padding:6px 6px}
.who .av{width:28px; height:28px}
.who b{font-size:12.5px; display:block; line-height:1.15}
.who span{font-size:11px; color:var(--faint)}
.who a{margin-left:auto; font-size:11px; color:var(--faint)}
.themebtn{display:flex; align-items:center; gap:8px; justify-content:center; background:none; border:1px solid var(--line); color:var(--muted); border-radius:var(--r-sm); padding:7px 10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer}
.themebtn:hover{border-color:var(--accent-line); color:var(--ink)}

/* ---- main ---- */
.main{min-width:0; display:flex; flex-direction:column}
.topbar{position:sticky; top:0; z-index:5; background:color-mix(in srgb,var(--ground) 82%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; padding:15px 26px}
.topbar h1{font-size:17px; margin:0; letter-spacing:-.01em; font-weight:640}
.topbar .sub{color:var(--muted); font-size:12.5px}
.topbar .right{margin-left:auto; display:flex; align-items:center; gap:14px}
.live{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:var(--good); background:var(--good-bg); padding:5px 10px; border-radius:20px}
.live .dot{width:7px; height:7px; border-radius:50%; background:var(--good); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%, transparent)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.stamp{font-family:var(--mono); font-size:11px; color:var(--faint)}
.view{padding:24px 26px 70px; display:none; animation:fade .2s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
.loading{color:var(--faint); font-family:var(--mono); font-size:12px; padding:40px 0; text-align:center}
.eyebrow{margin:0 0 14px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.eyebrow .hint{color:var(--faint); font-size:12px}

/* ---- kpi ---- */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px}
.kpi{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r); padding:16px 17px; box-shadow:var(--shadow)}
.kpi .k-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
.kpi .fig{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:26px; font-weight:600; letter-spacing:-.02em; margin:8px 0 3px}
.kpi .cap{color:var(--muted); font-size:12.5px}

/* ---- panels ---- */
.grid2{display:grid; grid-template-columns:1.1fr .9fr; gap:18px; margin-bottom:18px}
.panel{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.panel .head{display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--line-soft)}
.panel .head b{font-size:13.5px}
.panel .head .tag{margin-left:auto}
.panel .head .hint{color:var(--faint); font-size:12px}
.panel .body{padding:16px 18px}

.funnel{display:flex; flex-direction:column; gap:9px}
.fstep{display:grid; grid-template-columns:130px 1fr auto; align-items:center; gap:12px}
.fstep .fname{color:var(--muted); font-size:12.5px}
.fstep .fbar{height:26px; border-radius:6px; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%, var(--surface))); min-width:30px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%, transparent)}
.fstep .fbar.dim{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 42%, var(--surface)),color-mix(in srgb,var(--accent) 20%, var(--surface)))}
.fstep .fval{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:14px; font-weight:600; text-align:right}

.sources{display:grid; grid-template-columns:1fr 1fr; gap:8px; max-height:280px; overflow:auto}
.src{display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--raised)}
.src .sd{width:8px; height:8px; border-radius:50%; flex:none}
.src .sd.good{background:var(--good)} .src .sd.warn{background:var(--warn)} .src .sd.crit{background:var(--crit)}
.src .sn{font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.src .ss{margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}

/* ---- tables ---- */
.twrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:640px}
th{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); text-align:left; font-weight:500; padding:11px 14px; border-bottom:1px solid var(--line)}
th.r,td.r{text-align:right}
td{padding:11px 14px; border-bottom:1px solid var(--line-soft); font-size:13px; vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{transition:.12s}
tbody tr:hover{background:var(--raised)}
tbody tr.clickable{cursor:pointer}
.co{font-weight:600}
.role{color:var(--muted); font-size:12px}
.chip{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:11px; padding:2px 8px; border-radius:20px; background:var(--raised); color:var(--muted); border:1px solid var(--line-soft)}
.pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; padding:3px 9px; border-radius:20px; white-space:nowrap}
.pill.good{background:var(--good-bg); color:var(--good)} .pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.crit{background:var(--crit-bg); color:var(--crit)}
.pill.accent{background:var(--accent-weak); color:var(--accent-ink)} .pill.mut{background:var(--raised); color:var(--faint)}
.pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.meter{display:flex; align-items:center; gap:9px}
.meter .track{width:56px; height:6px; border-radius:4px; background:var(--line); overflow:hidden; flex:none}
.meter .fill{height:100%; border-radius:4px; background:linear-gradient(90deg,var(--accent),var(--accent-ink))}
.meter .mv{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:600; width:38px}
.opp{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; color:var(--accent-ink)}
.cand{display:flex; align-items:center; gap:9px}
.av{width:26px; height:26px; border-radius:7px; flex:none; display:grid; place-items:center; font-family:var(--mono); font-size:10px; font-weight:600; color:#fff}

/* ---- toolbar (search/filters) ---- */
.toolbar{display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap}
.search{flex:1; min-width:200px; max-width:340px; position:relative}
.search input{width:100%; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:9px 14px 9px 34px; font-size:13px; color:var(--ink)}
.search input:focus{border-color:var(--accent-line); outline:none}
.search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--faint)}
.fchip{font-family:var(--mono); font-size:11px; padding:6px 12px; border-radius:20px; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer; transition:.12s}
.fchip:hover{border-color:var(--accent-line); color:var(--ink)}
.fchip.on{background:var(--accent-weak); color:var(--accent-ink); border-color:var(--accent-line)}
.count-tag{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--faint)}

/* ---- queue ---- */
.queue{display:flex; flex-direction:column; gap:16px}
.qcard{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; transition:.18s}
.qcard.done{opacity:.55} .qcard.skip{opacity:.4}
.qbody{padding:18px 20px; display:flex; flex-direction:column; gap:13px}
.qhead{display:flex; align-items:flex-start; gap:12px}
.qhead .co{font-size:15px; font-weight:640}
.qhead .role{font-size:12.5px; margin-top:1px}
.qhead .opp{margin-left:auto; text-align:right}
.qmeta{display:flex; flex-wrap:wrap; gap:8px}
.qmatch{background:var(--raised); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:12px 13px}
.qmatch .mrow{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.qwhy{font-size:12.5px; color:var(--muted); line-height:1.5}
.qactions{display:flex; gap:9px; padding-top:2px}
.btn{font-family:var(--sans); font-size:12.5px; font-weight:600; border-radius:var(--r-sm); padding:9px 15px; cursor:pointer; border:1px solid transparent; transition:.14s}
.btn.primary{background:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-ink)}
.btn.ghost{background:var(--surface); border-color:var(--line); color:var(--muted)}
.btn.ghost:hover{border-color:var(--accent-line); color:var(--ink)}
.btn.mut{background:none; color:var(--faint); margin-left:auto}
.btn.mut:hover{color:var(--crit)}
.btn.sm{padding:6px 11px; font-size:12px}
.btn:disabled{cursor:default; opacity:.7}

/* ---- bench grid ---- */
.bench{display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:14px}
.bcard{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r); padding:16px 17px; box-shadow:var(--shadow); transition:.16s; cursor:pointer}
.bcard:hover{box-shadow:var(--shadow-lift); transform:translateY(-2px)}
.bcard .bh{display:flex; align-items:center; gap:11px; margin-bottom:12px}
.bcard .bh b{font-size:14px}
.bcard .bh .bmeta{font-size:11.5px; color:var(--faint)}
.bcard .rf{display:flex; align-items:center; gap:8px; margin-bottom:12px}
.bcard .rfname{font-family:var(--mono); font-size:11px; color:var(--accent-ink); background:var(--accent-weak); padding:2px 8px; border-radius:5px}
.skills{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:13px}
.sk{font-size:11px; padding:3px 8px; border-radius:6px; background:var(--raised); border:1px solid var(--line-soft); color:var(--muted)}
.sk .skn{font-family:var(--mono); color:var(--ink); font-weight:600; margin-left:4px}
.bfoot{display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--line-soft)}
.llmbar{flex:1}
.llmbar .lt{display:flex; justify-content:space-between; font-size:10px; color:var(--faint); font-family:var(--mono); letter-spacing:.05em; text-transform:uppercase; margin-bottom:4px}
.llmbar .track{height:5px; border-radius:3px; background:var(--line); overflow:hidden}
.llmbar .fill{height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-ink)); border-radius:3px}

/* ---- drawer (candidate detail) ---- */
.scrim{position:fixed; inset:0; background:rgba(10,14,22,.45); opacity:0; pointer-events:none; transition:.2s; z-index:30}
.scrim.on{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; height:100vh; width:min(460px,94vw); background:var(--surface); border-left:1px solid var(--line);
  box-shadow:var(--shadow-lift); transform:translateX(100%); transition:transform .24s ease; z-index:31; display:flex; flex-direction:column}
.drawer.on{transform:none}
.drawer .dhead{padding:20px 22px; border-bottom:1px solid var(--line-soft); display:flex; align-items:flex-start; gap:12px}
.drawer .dhead .av{width:40px; height:40px; font-size:13px}
.drawer .dhead b{font-size:16px; display:block}
.drawer .dhead .dm{font-size:12px; color:var(--muted)}
.drawer .dclose{margin-left:auto; background:none; border:0; color:var(--faint); font-size:20px; cursor:pointer; line-height:1}
.dbody{padding:18px 22px; overflow:auto; flex:1; display:flex; flex-direction:column; gap:20px}
.dsec .dt{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:10px}
.riskbtns{display:flex; gap:8px}
.riskbtn{flex:1; padding:10px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; transition:.12s}
.riskbtn:hover{border-color:var(--accent-line)}
.riskbtn.low.on{background:var(--good-bg); color:var(--good); border-color:var(--good)}
.riskbtn.high.on{background:var(--crit-bg); color:var(--crit); border-color:var(--crit)}
.riskmeta{font-size:11px; color:var(--faint); margin-top:8px; font-family:var(--mono)}
.fb{display:flex; flex-direction:column; gap:10px}
.fb-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.stars{display:flex; gap:4px}
.star{font-size:20px; color:var(--line); cursor:pointer; line-height:1}
.star.on{color:var(--warn)}
.fb textarea{min-height:70px; resize:vertical}
.fbitem{background:var(--raised); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:11px 13px}
.fbitem .fbtop{display:flex; align-items:center; gap:8px; margin-bottom:5px; font-size:12px}
.fbitem .fbtop b{font-weight:600}
.fbitem .fbtop .when{margin-left:auto; color:var(--faint); font-family:var(--mono); font-size:10.5px}
.fbitem .fbnote{font-size:12.5px; color:var(--muted); white-space:pre-wrap}

/* ---- toast ---- */
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; background:var(--ink); color:var(--ground); font-size:13px; padding:11px 18px; border-radius:10px; box-shadow:var(--shadow-lift); pointer-events:none; transition:.22s; z-index:40; display:flex; align-items:center; gap:9px}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast .tk{font-family:var(--mono); color:var(--good); font-size:14px}
.toast.err .tk{color:var(--crit)}

.banner{padding:12px 16px; border-radius:var(--r-sm); background:var(--warn-bg); color:var(--warn); font-size:12.5px; margin-bottom:16px; display:flex; gap:8px; align-items:center}

@media (max-width:1080px){ .kpis{grid-template-columns:repeat(2,1fr)} .grid2{grid-template-columns:1fr} }
@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .rail{position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; overflow:visible}
  .brand{padding:2px 6px 2px 2px}
  .nav{flex-direction:row; flex-wrap:wrap; margin-left:auto} .nav-sep,.rail-foot{display:none}
  .kpis{grid-template-columns:1fr 1fr}
}