:root{
  --bg:#EEF3F1; --surface:#FFFFFF; --surface-2:#F6F9F8; --ink:#0F2426; --ink-2:#3A5255; --muted:#687D7F; --line:#DAE3E0; --line-2:#C9D6D2;
  --accent:#0E6B61; --accent-ink:#FFFFFF; --accent-soft:#DDEFEA;
  --side:#0C2729; --side-ink:#CFE1DD; --side-muted:#7FA09B; --side-hi:#16393B;
  --l0:#E3EAE8; --l1:#C8E5DD; --l2:#8DCCBD; --l3:#3A9C8B; --l4:#0D5A50;
  --l0-ink:#5E7173; --l1-ink:#1D4A43; --l2-ink:#0F3A34; --l3-ink:#FFFFFF; --l4-ink:#FFFFFF;
  --bad:#C0432B; --bad-soft:#FBE5DF; --warn:#B37A0C; --warn-soft:#FBF0D6; --good:#2A8453; --good-soft:#DDF1E4;
  --fa-AC:#2F66B0; --fa-GC:#B0406A; --fa-TC:#7555A8; --fa-UC:#C27A1B; --fa-HNO:#4F8631; --fa-UR:#3F6878;
  --shadow:0 1px 2px rgba(12,39,41,.05),0 6px 20px -12px rgba(12,39,41,.18);
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Instrument Sans","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#091516; --surface:#0F2022; --surface-2:#132729; --ink:#E2EEEB; --ink-2:#B2C6C2; --muted:#809896; --line:#1F3638; --line-2:#2A4749;
    --accent:#4CC0AC; --accent-ink:#06201D; --accent-soft:#12383A;
    --side:#061011; --side-ink:#CFE1DD; --side-muted:#6E8E89; --side-hi:#12292A;
    --l0:#182D2F; --l1:#1B4541; --l2:#23705F; --l3:#35A28B; --l4:#86DEC9;
    --l0-ink:#7C9593; --l1-ink:#A9D9CE; --l2-ink:#E3F5F0; --l3-ink:#04201B; --l4-ink:#04201B;
    --bad:#F07C62; --bad-soft:#3A1E18; --warn:#E8B64A; --warn-soft:#33290F; --good:#5FCB8C; --good-soft:#143322;
    --fa-AC:#7BA7EA; --fa-GC:#EB86AB; --fa-TC:#B39AE6; --fa-UC:#EDAE5C; --fa-HNO:#96C874; --fa-UR:#8FB6C6;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#091516; --surface:#0F2022; --surface-2:#132729; --ink:#E2EEEB; --ink-2:#B2C6C2; --muted:#809896; --line:#1F3638; --line-2:#2A4749;
  --accent:#4CC0AC; --accent-ink:#06201D; --accent-soft:#12383A;
  --side:#061011; --side-ink:#CFE1DD; --side-muted:#6E8E89; --side-hi:#12292A;
  --l0:#182D2F; --l1:#1B4541; --l2:#23705F; --l3:#35A28B; --l4:#86DEC9;
  --l0-ink:#7C9593; --l1-ink:#A9D9CE; --l2-ink:#E3F5F0; --l3-ink:#04201B; --l4-ink:#04201B;
  --bad:#F07C62; --bad-soft:#3A1E18; --warn:#E8B64A; --warn-soft:#33290F; --good:#5FCB8C; --good-soft:#143322;
  --fa-AC:#7BA7EA; --fa-GC:#EB86AB; --fa-TC:#B39AE6; --fa-UC:#EDAE5C; --fa-HNO:#96C874; --fa-UR:#8FB6C6;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -14px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}

/* Shell */
.app{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}
.side{background:var(--side);color:var(--side-ink);padding:22px 16px;display:flex;flex-direction:column;gap:28px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:12px;padding:0 6px}
.brand svg{flex:none}
.brand b{font-family:var(--display);font-weight:750;font-size:18px;letter-spacing:-.01em;display:block;line-height:1.1;color:#fff}
.brand span{font-size:11px;color:var(--side-muted);letter-spacing:.06em;text-transform:uppercase}
.nav{display:flex;flex-direction:column;gap:2px}
.nav .grp{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--side-muted);padding:14px 10px 6px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;text-decoration:none;color:var(--side-ink);font-weight:500}
.nav a svg{opacity:.7;flex:none}
.nav a:hover{background:var(--side-hi)}
.nav a.on{background:var(--side-hi);color:#fff;box-shadow:inset 3px 0 0 #4CC0AC}
.nav a.on svg{opacity:1}
.nav a .cnt{margin-left:auto;font-size:11px;background:rgba(255,255,255,.08);padding:1px 7px;border-radius:99px;color:var(--side-muted)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;font-size:12px;color:var(--side-muted);padding:0 6px}
.demo{display:inline-flex;align-items:center;gap:6px;color:#E8B64A;font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.demo::before{content:"";width:7px;height:7px;border-radius:50%;background:#E8B64A}
.side-foot button{background:transparent;border:1px solid rgba(255,255,255,.14);color:var(--side-ink);padding:7px 10px;border-radius:8px;font-size:12px;text-align:left}
.side-foot button:hover{background:var(--side-hi)}
.side-foot button.arm{border-color:#F07C62;color:#F07C62}

.main{padding-inline:32px;padding-block:22px 60px;min-width:0}
.top{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.top .ttl{flex:1 1 320px;min-width:0}
.crumb{font-size:12px;color:var(--muted);letter-spacing:.04em;display:flex;gap:6px;align-items:center}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--accent)}
h1{font-family:var(--display);font-weight:750;font-size:30px;letter-spacing:-.02em;line-height:1.1;margin:4px 0 0;text-wrap:balance}
.sub{color:var(--muted);margin-top:4px;max-width:70ch}
.tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:0 12px;height:38px;min-width:0;width:260px;max-width:100%}
.search input{border:0;background:transparent;outline:none;font:inherit;color:var(--ink);width:100%}
.search svg{color:var(--muted);flex:none}
.who{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.who .av{width:34px;height:34px}

/* Common */
.grid{display:grid;gap:18px}
.g-kpi{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-2{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.g-2b{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);min-width:0}
.card h2{font-family:var(--display);font-weight:650;font-size:16.5px;letter-spacing:-.005em;margin:0;text-wrap:balance}
.card .hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.card .hd p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.stack{display:flex;flex-direction:column;gap:18px}
.eyebrow{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kpi .v{font-family:var(--display);font-weight:650;font-size:32px;letter-spacing:-.02em;line-height:1.1;margin-top:8px}
.kpi .v small{font-size:15px;color:var(--muted);font-weight:500;margin-left:3px}
.kpi .m{font-size:12.5px;color:var(--muted);margin-top:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kpi .meter{height:6px;border-radius:99px;background:var(--l0);margin-top:12px;overflow:hidden}
.kpi .meter i{display:block;height:100%;background:var(--accent);border-radius:99px}
.up{color:var(--good);font-weight:600}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:99px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-low{background:var(--bad-soft);color:var(--bad)}
.b-mid{background:var(--warn-soft);color:var(--warn)}
.b-high{background:var(--good-soft);color:var(--good)}
.b-neu{background:var(--accent-soft);color:var(--accent)}

.fa{--c:var(--fa-AC);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:6px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,transparent);white-space:nowrap}
.fa-AC{--c:var(--fa-AC)} .fa-GC{--c:var(--fa-GC)} .fa-TC{--c:var(--fa-TC)} .fa-UC{--c:var(--fa-UC)} .fa-HNO{--c:var(--fa-HNO)} .fa-UR{--c:var(--fa-UR)}
.av{--c:var(--fa-AC);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12.5px;color:var(--c);background:color-mix(in srgb,var(--c) 16%,var(--surface));flex:none;letter-spacing:.02em}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--surface);padding:8px 13px;border-radius:9px;font-weight:600;font-size:13px;text-decoration:none}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.pri:hover{filter:brightness(1.08);color:var(--accent-ink)}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:6px 11px;border-radius:7px;font-weight:600;font-size:12.5px;color:var(--ink-2);display:inline-flex;gap:7px;align-items:center}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.seg button .sm{font-weight:500;color:var(--muted);font-size:11.5px}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%}
th{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
td.c,th.c{text-align:center}
.rowlink{cursor:pointer}
.rowlink:hover td{background:var(--surface-2)}
.nm{display:flex;align-items:center;gap:11px;min-width:0}
.nm b{display:block;font-weight:600;white-space:nowrap}
.nm small{display:block;color:var(--muted);font-size:12px;white-space:nowrap}
.muted{color:var(--muted)}

/* Level legend & swatches */
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.L0{background:var(--l0);color:var(--l0-ink)} .L1{background:var(--l1);color:var(--l1-ink)} .L2{background:var(--l2);color:var(--l2-ink)} .L3{background:var(--l3);color:var(--l3-ink)} .L4{background:var(--l4);color:var(--l4-ink)}

/* Distribution bars */
.dist{display:flex;flex-direction:column;gap:13px}
.dist .row{display:grid;grid-template-columns:150px minmax(0,1fr) 58px;gap:12px;align-items:center}
.dist .lab{display:flex;gap:8px;align-items:center;min-width:0;font-weight:500}
.dist .lab em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dist .bar{display:flex;height:16px;border-radius:5px;overflow:hidden;gap:2px}
.dist .bar i{display:block;height:100%}
.dist .pct{text-align:right;font-weight:650;font-family:var(--display)}

/* Charts */
svg text{font-family:var(--body)}
.ax{stroke:var(--line);stroke-width:1}
.axl{fill:var(--muted);font-size:11px}
.q-lab{fill:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.dot{cursor:pointer}
.dot circle{stroke:var(--surface);stroke-width:2}
.dot text{font-size:9.5px;font-weight:700;pointer-events:none}
.dot:hover circle{stroke:var(--ink)}
.chart-tip{font-size:12px;color:var(--muted);min-height:18px;margin-top:6px}

/* Lists */
.list{display:flex;flex-direction:column}
.li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.li:first-child{border-top:0;padding-top:2px}
.li .t{font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.li .d{font-size:12px;color:var(--muted);margin-top:2px}
.cov{display:flex;gap:3px}
.cov i{width:9px;height:18px;border-radius:3px;background:var(--l0)}
.cov i.on{background:var(--l3)}
.cov.crit i.on{background:var(--bad)}

/* Staff table */
.mini{display:flex;gap:4px;align-items:flex-end;height:34px}
.mini div{display:flex;flex-direction:column;align-items:center;gap:3px;width:26px}
.mini .col{width:12px;height:22px;background:var(--l0);border-radius:3px;position:relative;overflow:hidden}
.mini .col i{position:absolute;left:0;right:0;bottom:0;background:var(--c);border-radius:3px}
.mini span{font-size:9.5px;color:var(--muted);font-weight:600}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:7px 10px}

/* Profile */
.phead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center}
.phead .av{width:68px;height:68px;font-size:21px}
.phead h2{font-size:24px;font-weight:750;letter-spacing:-.02em}
.facts{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:8px;font-size:13px;color:var(--ink-2)}
.facts span b{color:var(--muted);font-weight:500;margin-right:5px}
.ring{position:relative;width:118px;height:118px}
.ring svg{display:block}
.ring .rv{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .rv b{font-family:var(--display);font-size:25px;font-weight:750;line-height:1;display:block}
.ring .rv small{font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.qtab td,.qtab th{padding:8px 8px}
.qtab tfoot td{font-weight:700;border-top:2px solid var(--line-2);border-bottom:0}
.qtab .cnt{display:inline-grid;place-items:center;min-width:26px;height:22px;border-radius:5px;font-size:12px;font-weight:600;padding:0 5px}
.qtab .cnt.z{background:transparent;color:var(--line-2)}
.oplist{display:flex;flex-direction:column}
.op{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:9px 4px;border-top:1px solid var(--line)}
.op:first-child{border-top:0}
.op .on{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-weight:500}
.op .idx{font-family:var(--mono);font-size:11px;color:var(--muted);width:22px}
.bd{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--good);background:var(--good-soft);padding:1px 6px;border-radius:5px}
.lv{display:inline-flex;gap:3px;background:var(--surface-2);padding:3px;border-radius:9px;border:1px solid var(--line)}
.lv button{width:34px;height:28px;border-radius:6px;border:0;background:transparent;font-weight:700;font-size:12.5px;color:var(--muted);font-family:var(--mono);transition:background .15s,color .15s}
.lv button:hover{background:var(--line)}
.lv button.sel.L0{background:var(--l0-ink);color:var(--surface)}
.lv button.sel.L1{background:var(--l1);color:var(--l1-ink)}
.lv button.sel.L2{background:var(--l2);color:var(--l2-ink)}
.lv button.sel.L3{background:var(--l3);color:var(--l3-ink)}
.lv button.sel.L4{background:var(--l4);color:var(--l4-ink)}
.lv button:not(.sel){background:transparent!important;color:var(--muted)!important}
.lvname{font-size:12px;color:var(--muted);width:170px;text-align:right}
.goal{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.goal:first-child{border-top:0;padding-top:0}
.goal .step{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12px;font-weight:600}
.goal .step span{width:24px;height:24px;border-radius:6px;display:grid;place-items:center}
.goal b{font-weight:600;display:block}
.goal small{color:var(--muted);font-size:12px}
.chk{display:inline-flex;gap:7px;align-items:center;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.chk input{accent-color:var(--accent)}

/* Matrix */
.mx{border-collapse:separate;border-spacing:3px;width:auto}
.mx th,.mx td{border:0;padding:0}
.mx thead th{vertical-align:bottom;height:170px;padding-bottom:6px}
.mx thead th.op-h{width:32px}
.mx thead th.op-h div{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--ink-2);font-weight:500;margin:0 auto;display:flex;align-items:center;gap:6px}
.mx thead th.op-h div i{width:6px;height:6px;border-radius:50%;background:var(--good);display:inline-block}
.mx .nmc{position:sticky;left:0;background:var(--surface);z-index:1;padding-right:14px;min-width:190px}
.mx .nmc a{text-decoration:none;display:flex;gap:9px;align-items:center}
.mx .nmc a:hover b{color:var(--accent)}
.mx .nmc b{font-weight:600;font-size:13px;white-space:nowrap}
.mx .nmc small{color:var(--muted);font-size:11px;display:block}
.cell{width:32px;height:32px;border-radius:6px;border:0;font-family:var(--mono);font-weight:600;font-size:12.5px;display:grid;place-items:center;transition:transform .12s}
.cell:hover{transform:scale(1.12);box-shadow:0 0 0 2px var(--ink)}
.mx .pc{padding-left:12px;font-weight:650;font-family:var(--display);white-space:nowrap;text-align:right}
.mx tfoot td{padding-top:8px}
.covc{width:32px;height:26px;border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--surface-2);color:var(--ink-2)}
.covc.crit{background:var(--bad-soft);color:var(--bad)}

/* Rotation */
.rot td,.rot th{padding:7px 6px}
.rot th.m{text-align:center;min-width:70px}
.mcell{width:100%;min-width:66px;border:0;background:transparent;padding:0}
.mcell .fa{width:100%;padding:6px 0;font-size:11.5px}
.mcell:hover .fa{box-shadow:inset 0 0 0 2px var(--c)}
.stab{display:flex;height:10px;border-radius:99px;overflow:hidden;width:130px;background:var(--l0)}
.stab i{display:block;height:100%}
.stab-l{font-size:11.5px;color:var(--muted);margin-top:4px;white-space:nowrap}

/* Model */
.stairs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:end}
.stair{border-radius:14px;padding:18px 16px;display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.stair .n{font-family:var(--display);font-size:44px;font-weight:750;line-height:1;letter-spacing:-.03em}
.stair .k{font-weight:700;font-size:14.5px}
.stair .b{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600}
.stair p{margin:0;font-size:13px;color:var(--ink-2)}
.stair .top-band{height:8px;border-radius:99px}
.bands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.band{border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:6px}
.band b{font-family:var(--display);font-size:22px;font-weight:700}
.band.b-low{background:var(--bad-soft)} .band.b-mid{background:var(--warn-soft)} .band.b-high{background:var(--good-soft)}
.band p{margin:0;color:var(--ink-2);font-size:13px}
.band::before{display:none}
.pros{columns:2;column-gap:34px;margin:0;padding:0;list-style:none}
.pros li{break-inside:avoid;padding:8px 0 8px 26px;position:relative;color:var(--ink-2)}
.pros li::before{content:"";position:absolute;left:0;top:12px;width:14px;height:14px;border-radius:4px;background:var(--accent-soft);box-shadow:inset 0 0 0 4px var(--accent-soft),inset 0 0 0 10px var(--accent)}
.cite{font-size:12px;color:var(--muted)}

/* Toast */
#toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;display:flex;gap:8px;align-items:center;max-width:calc(100% - 32px)}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}

.fade{animation:fade .28s ease both}
@keyframes fade{from{transform:translateY(4px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.fade{animation:none}.cell,.lv button{transition:none}}

@media (max-width:1180px){
  .g-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-2,.g-2b{grid-template-columns:minmax(0,1fr)}
  .stairs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:sticky;top:env(safe-area-inset-top,0px);height:auto;padding:12px 16px;gap:10px;z-index:20;flex-direction:column}
  .nav{flex-direction:row;overflow-x:auto;gap:4px}
  .nav .grp{display:none}
  .nav a{white-space:nowrap;padding:7px 10px}
  .nav a .cnt{display:none}
  .side-foot{display:none}
  .main{padding-inline:16px}
  .phead{grid-template-columns:auto minmax(0,1fr)}
  .phead .ring{grid-column:1/-1}
  .lvname{display:none}
  .pros{columns:1}
}
@media (max-width:560px){
  .g-kpi{grid-template-columns:minmax(0,1fr)}
  .stairs,.bands{grid-template-columns:minmax(0,1fr)}
  .dist .row{grid-template-columns:92px minmax(0,1fr) 48px}
  .dist .lab em{display:none}
  h1{font-size:25px}
  .op{grid-template-columns:minmax(0,1fr)}
  .search{width:100%}
}

/* ---------- Ergänzungen: Formulare, Dialoge, Konto ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.field input,.field select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:9px;padding:9px 11px;width:100%}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.field small{color:var(--muted);font-size:12px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .full{grid-column:1/-1}
.form-err{background:var(--bad-soft);color:var(--bad);border-radius:9px;padding:9px 12px;font-size:13px;font-weight:500}
.form-ok{background:var(--good-soft);color:var(--good);border-radius:9px;padding:9px 12px;font-size:13px;font-weight:500}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.btn.danger:hover{background:var(--bad-soft);color:var(--bad);border-color:var(--bad)}
.btn.danger.arm{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.modal-bg{position:fixed;inset:0;background:rgba(6,20,21,.55);display:grid;place-items:center;padding:16px;z-index:40;backdrop-filter:blur(2px)}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);width:min(620px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:24px}
.modal h2{font-family:var(--display);font-size:20px;font-weight:700;margin:0 0 4px}
.modal .sub{margin:0 0 18px}
.ro .lv button,.ro .cell,.ro .mcell{cursor:default}
.ro .cell:hover{transform:none;box-shadow:none}
.role{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent)}
.role.admin{background:var(--warn-soft);color:var(--warn)}
.role.viewer{background:var(--surface-2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.me-box{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:var(--side-hi)}
.me-box b{color:#fff;display:block;font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-box small{color:var(--side-muted);font-size:11.5px}
.me-box .av{width:32px;height:32px;font-size:11.5px;--c:#4CC0AC}
.side-foot .row2{display:flex;gap:6px}
.side-foot .row2 button{flex:1;text-align:center}
.empty{text-align:center;padding:48px 16px;color:var(--muted)}
.empty h2{color:var(--ink);margin-bottom:6px}
.log{display:flex;flex-direction:column}
.log div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px}
.log div:first-child{border-top:0}
.log small{color:var(--muted);display:block}
.hint{font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:center}
@media (max-width:560px){.form-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Anmeldeseite ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.auth-art{background:var(--side);color:var(--side-ink);padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;position:relative;overflow:hidden}
.auth-art h1{color:#fff;font-size:40px;max-width:15ch;margin-top:24px}
.auth-art p{color:var(--side-muted);max-width:44ch;font-size:15px}
.auth-steps{display:flex;gap:10px;align-items:flex-end;height:150px}
.auth-steps div{flex:1;border-radius:10px 10px 4px 4px;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;color:#06201D;font-weight:700;font-family:var(--mono);font-size:13px}
.auth-steps span{font-family:var(--body);font-weight:600;font-size:10.5px;line-height:1.2;opacity:.8}
.auth-form{display:grid;place-items:center;padding-block:40px;padding-inline:24px;background:var(--bg)}
.auth-card{width:min(420px,100%);display:flex;flex-direction:column;gap:18px}
.auth-card h2{font-family:var(--display);font-size:26px;font-weight:750;letter-spacing:-.02em;margin:0}
.auth-card form{display:flex;flex-direction:column;gap:14px}
.auth-card .btn.pri{justify-content:center;padding:11px}
.rules{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.rules li{display:flex;gap:7px;align-items:center}
.rules li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.rules li.ok{color:var(--good)}
.rules li.ok::before{background:var(--good)}
.pw-wrap{position:relative}
.pw-wrap button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:600;padding:4px 8px}
@media (max-width:860px){.auth{grid-template-columns:minmax(0,1fr)}.auth-art{padding:28px 20px;gap:18px}.auth-art h1{font-size:28px}.auth-steps{display:none}}
.actions .btn{white-space:nowrap}