:root{
  --bg:#0a0e16; --bg2:#0f1521; --panel:#131a28; --panel2:#182133; --border:#232e44;
  --text:#e6ebf5; --muted:#8b97ad; --dim:#5d6a82;
  --cyan:#22d3ee; --violet:#a78bfa; --green:#34d399; --amber:#fbbf24; --rose:#fb7185; --blue:#60a5fa;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(1200px 600px at 10% -10%,#16213a 0%,var(--bg) 55%) fixed;color:var(--text);
  font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--cyan);text-decoration:none}
header.top{position:sticky;top:0;z-index:10;background:rgba(10,14,22,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.top .inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:28px;padding:12px 24px}
.brand{font-weight:800;letter-spacing:.3px;font-size:17px;display:flex;align-items:center;gap:10px;color:var(--text)}
.brand .logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--cyan),var(--violet));display:grid;place-items:center;color:#0a0e16;font-weight:900}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{color:var(--muted);padding:7px 13px;border-radius:9px;font-weight:600;font-size:13px}
nav a:hover{color:var(--text);background:var(--panel)}
nav a.active{color:var(--text);background:var(--panel2);box-shadow:inset 0 0 0 1px var(--border)}
nav a.cta{color:#0a0e16;background:var(--cyan)}
nav a.cta.active{background:var(--cyan);color:#0a0e16}
.top .meta{margin-left:auto;color:var(--dim);font-size:12px;white-space:nowrap}
main{max-width:1400px;margin:0 auto;padding:24px}
h1{font-size:24px;margin:4px 0 4px;letter-spacing:-.3px}
h2{font-size:15px;margin:0 0 12px;color:var(--text);font-weight:700;letter-spacing:.2px}
.sub{color:var(--muted);margin:0 0 22px}
.grid{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(auto-fill,minmax(225px,1fr));margin-bottom:16px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.span-2{grid-column:span 2}
@media (max-width:1000px){.cols-2,.cols-3{grid-template-columns:1fr}.span-2{grid-column:auto}}
.card{background:linear-gradient(180deg,var(--panel) 0%,var(--bg2) 100%);border:1px solid var(--border);border-radius:var(--radius);padding:18px 18px 16px;min-width:0}
.kpi .label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.8px;font-weight:600;display:flex;gap:6px;align-items:center}
.kpi .value{font-size:30px;font-weight:800;letter-spacing:-.5px;margin:6px 0 2px;line-height:1.1}
.kpi .value small{font-size:15px;color:var(--muted);font-weight:600;margin-left:3px}
.kpi .value.sm{font-size:25px}
.kpi .foot{color:var(--dim);font-size:12px}
.kpi.accent-cyan{border-top:2px solid var(--cyan)} .kpi.accent-violet{border-top:2px solid var(--violet)}
.kpi.accent-green{border-top:2px solid var(--green)} .kpi.accent-amber{border-top:2px solid var(--amber)}
.kpi.accent-rose{border-top:2px solid var(--rose)} .kpi.accent-blue{border-top:2px solid var(--blue)}
.est{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--amber);
  border:1px solid rgba(251,191,36,.45);background:rgba(251,191,36,.08);padding:1px 6px;border-radius:999px;vertical-align:middle}
.tag{display:inline-block;font-size:11px;color:var(--muted);background:var(--panel2);border:1px solid var(--border);padding:1px 8px;border-radius:999px}
.good{color:var(--green)} .bad{color:var(--rose)} .warn{color:var(--amber)} .muted{color:var(--muted)} .dim{color:var(--dim)}
.bar{height:8px;border-radius:99px;background:var(--panel2);overflow:hidden;margin-top:8px}
.bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet));border-radius:99px}
.chart{position:relative;height:280px}
.chart.tall{height:360px} .chart.short{height:220px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{color:var(--muted);text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.6px;padding:8px 10px;border-bottom:1px solid var(--border)}
td{padding:8px 10px;border-bottom:1px solid rgba(35,46,68,.55)}
tr:hover td{background:rgba(34,211,238,.03)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap{max-height:420px;overflow:auto}
.note{color:var(--dim);font-size:12px;margin-top:10px}
.callout{border:1px dashed var(--border);border-radius:10px;padding:10px 12px;color:var(--muted);font-size:12.5px;background:rgba(19,26,40,.5)}
select,input,textarea{background:var(--bg2);color:var(--text);border:1px solid var(--border);border-radius:9px;padding:9px 11px;font:inherit;width:100%}
select:focus,input:focus,textarea:focus{outline:2px solid rgba(34,211,238,.4);border-color:var(--cyan)}
label{display:block;color:var(--muted);font-size:12px;font-weight:600;margin:0 0 5px;text-transform:uppercase;letter-spacing:.6px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .full{grid-column:1/-1}
button{background:linear-gradient(135deg,var(--cyan),var(--violet));color:#0a0e16;border:0;border-radius:10px;padding:11px 18px;font-weight:800;cursor:pointer;font-size:14px}
.flash{padding:10px 14px;border-radius:10px;margin-bottom:16px;font-weight:600}
.flash.ok{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.4);color:var(--green)}
.flash.err{background:rgba(251,113,133,.1);border:1px solid rgba(251,113,133,.4);color:var(--rose)}
.picker{display:flex;gap:12px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.picker select{max-width:360px}
.statrow{display:flex;gap:22px;flex-wrap:wrap;margin:4px 0 12px}
.statrow div{min-width:90px} .statrow b{display:block;font-size:20px} .statrow span{color:var(--muted);font-size:12px}
/* heatmap */
.heat{overflow-x:auto;padding-bottom:6px}
.heat svg text{fill:var(--dim);font-size:10px}
.heat rect{rx:2.5;ry:2.5}
.legend{display:flex;gap:4px;align-items:center;color:var(--dim);font-size:11px;margin-top:6px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.tip{position:fixed;pointer-events:none;background:#0b1220;border:1px solid var(--border);padding:8px 10px;border-radius:8px;font-size:12px;z-index:50;display:none;max-width:260px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
footer{max-width:1400px;margin:10px auto 30px;padding:0 24px;color:var(--dim);font-size:12px}
.pill-row{display:flex;gap:8px;flex-wrap:wrap}
.ring{display:flex;align-items:center;gap:14px}
/* ---- Insights / Muscles additions ---- */
.pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;letter-spacing:.3px;white-space:nowrap}
.pill.climbing,.pill.good{color:var(--green);background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.35)}
.pill.flat,.pill.warn{color:var(--amber);background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.35)}
.pill.dropping,.pill.bad{color:var(--rose);background:rgba(251,113,133,.1);border:1px solid rgba(251,113,133,.4)}
.pill.insufficient,.pill.muted{color:var(--muted);background:var(--panel2);border:1px solid var(--border)}
.grade{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;font-weight:900;font-size:14px}
.grade.A{background:rgba(52,211,153,.18);color:var(--green)} .grade.B{background:rgba(34,211,238,.15);color:var(--cyan)}
.grade.C{background:rgba(251,191,36,.14);color:var(--amber)} .grade.D{background:rgba(251,146,60,.15);color:#fb923c}
.grade.F{background:rgba(251,113,133,.16);color:var(--rose)} .grade.na{background:var(--panel2);color:var(--dim)}
.heatt td{padding:5px 6px;text-align:center;font-variant-numeric:tabular-nums;font-size:12px;border-bottom:1px solid rgba(10,14,22,.6)}
.heatt th{padding:5px 6px;text-align:center}
.heatt td.lbl{text-align:left;color:var(--muted);font-weight:600}
.h-zero{color:var(--dim)} .h-under{background:rgba(251,191,36,.13);color:var(--amber)}
.h-in{background:rgba(52,211,153,.2);color:var(--green)} .h-over{background:rgba(167,139,250,.22);color:var(--violet)}
.section-h{margin:26px 0 10px;font-size:18px;display:flex;gap:10px;align-items:center}
.section-h .n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--panel2);border:1px solid var(--border);font-size:13px;color:var(--cyan)}
.big{font-size:44px;font-weight:900;letter-spacing:-1px;line-height:1}
.big small{font-size:16px;color:var(--muted);font-weight:600}
.tabs{display:flex;gap:6px} .tabs button{background:var(--panel2);color:var(--muted);border:1px solid var(--border);padding:5px 12px;font-size:12px;font-weight:700;border-radius:8px}
.tabs button.on{background:var(--cyan);color:#0a0e16}
.callout.warnbox{border-color:rgba(251,191,36,.5);color:var(--amber);background:rgba(251,191,36,.06)}
.callout b{color:var(--text)}
.mini{font-size:11.5px;color:var(--dim)}
.flagrow td.flag{color:var(--rose);font-weight:700}
.inline-form{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr auto;gap:10px;align-items:end}
.inline-form button{padding:9px 14px}

/* =================================================================== v2: body dashboard, lab, log, mobile */
.top .inner{gap:18px}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.top .meta{margin-left:0}
.refresh-btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);color:var(--text);border:1px solid var(--border);padding:7px 12px;font-size:13px;border-radius:9px;font-weight:700}
.refresh-btn:hover{border-color:var(--cyan)}
.refresh-btn:disabled{opacity:.7;cursor:progress}
.refresh-btn.spin svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:absolute;right:16px;top:calc(100% + 8px);max-width:min(460px,calc(100vw - 32px));background:#0b1220;border:1px solid var(--border);border-radius:12px;padding:10px 14px;font-size:13px;box-shadow:0 12px 40px rgba(0,0,0,.55);opacity:0;transform:translateY(-6px);pointer-events:none;transition:.2s}
.toast.show{opacity:1;transform:none;pointer-events:auto}
.toast.ok{border-color:rgba(52,211,153,.5)} .toast.err{border-color:rgba(251,113,133,.6)} .toast.warn{border-color:rgba(251,191,36,.55)}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.page-head .sub{margin-bottom:14px;max-width:880px}
.btn{display:inline-block;background:linear-gradient(135deg,var(--cyan),var(--violet));color:#0a0e16;font-weight:800;padding:10px 16px;border-radius:10px;white-space:nowrap}
button.ghost{background:transparent;border:1px dashed var(--border);color:var(--muted);font-weight:700}
.label-sm{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.8px;font-weight:700}
.section-title{font-size:18px;margin:26px 0 10px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.card-head h2{margin:0}
.empty{color:var(--muted);font-size:13px;padding:14px;border:1px dashed var(--border);border-radius:10px;background:rgba(19,26,40,.4)}
.h3{font-size:13px;margin:14px 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--panel2),#1f2a40,var(--panel2));background-size:200% 100%;animation:sk 1.2s infinite;margin:8px 0;width:80%}
.skeleton-line.short{width:50%} .skeleton-line.big{height:26px;width:60%}
@keyframes sk{to{background-position:-200% 0}}
.engine-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--dim);border:1px solid var(--border);border-radius:999px;padding:4px 10px;margin-top:12px;max-width:100%}
.engine-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--slate,#64748b);flex:none}
.engine-pill[data-state=loading]::before{background:var(--amber);animation:pulse 1s infinite}
.engine-pill[data-state=ready]::before{background:var(--green)}
.engine-pill[data-state=error]::before{background:var(--rose)}
@keyframes pulse{50%{opacity:.3}}
.seg{display:inline-flex;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px;margin:6px 0 10px}
.seg button{background:transparent;color:var(--muted);padding:6px 12px;font-size:12.5px;border-radius:8px;font-weight:700}
.seg button.on{background:var(--panel2);color:var(--text);box-shadow:inset 0 0 0 1px var(--border)}
.seg.small button{padding:4px 10px;font-size:12px}
/* hero */
.hero-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);margin-bottom:16px}
.hero-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.hero .big{font-size:52px}
.hero-stats{flex:1;min-width:240px;max-width:520px}
.statrow.tight{gap:16px;margin:0 0 6px} .statrow.tight b{font-size:17px}
.marks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px}
.mark{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.mark span{display:block;color:var(--muted);font-size:11.5px} .mark b{display:block;font-size:20px} .mark i{color:var(--dim);font-style:normal;font-size:11.5px}
.marks.small .mark b{font-size:16px}
details.method{margin-top:10px} details.method summary{cursor:pointer;color:var(--muted);font-size:12.5px}
.comp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.comp-grid div{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.comp-grid span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.comp-grid b{display:block;font-size:18px;margin:2px 0} .comp-grid i{color:var(--dim);font-style:normal;font-size:11px}
/* diagram */
.diagram-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.diagram-svg svg{width:100%;max-width:520px;height:auto;display:block;margin:0 auto;touch-action:manipulation}
.fig-outline{fill:#2c3a57;stroke:#2c3a57;stroke-width:3} .fig-outline .limbs line{stroke:#2c3a57} .fig-outline .limbs{stroke-linecap:round}
.fig-outline line{stroke-width:inherit}
.fig-fill{fill:url(#figg)} .fig-fill .limbs line{stroke:#1d2840} .fig-fill .limbs{stroke-linecap:round}
.fig-outline .limbs line{stroke-linecap:round} .fig-fill .limbs line{stroke-linecap:round}
.fig-line{fill:none;stroke:#33425f;stroke-width:1.4;stroke-linecap:round}
.zone{cursor:pointer;outline:none}
.zone ellipse,.zone circle{fill:rgba(34,211,238,.18);stroke:var(--cyan);stroke-width:1.4;transition:.15s}
.zone.unmeasured ellipse,.zone.unmeasured circle{fill:rgba(100,116,139,.08);stroke:#5d6a82;stroke-dasharray:3 3}
.zone.up-good ellipse,.zone.up-good circle,.zone.down-good ellipse,.zone.down-good circle{stroke:var(--green);fill:rgba(52,211,153,.2)}
.zone.up-bad ellipse,.zone.up-bad circle,.zone.down-bad ellipse,.zone.down-bad circle{stroke:var(--rose);fill:rgba(251,113,133,.2)}
.zone:hover ellipse,.zone:hover circle,.zone.sel ellipse,.zone.sel circle,.zone:focus ellipse,.zone:focus circle{fill:rgba(34,211,238,.45);stroke-width:2.4}
.lbl{cursor:pointer;outline:none}
.lbl rect{fill:#0f1626;stroke:var(--border);stroke-width:1;transition:.15s}
.lbl:hover rect,.lbl.sel rect,.lbl:focus rect{stroke:var(--cyan);fill:#13203a}
.lbl .leader{stroke:#3a4a6b;stroke-width:1;stroke-dasharray:2 2}
.lbl.sel .leader{stroke:var(--cyan)}
.lbl text{fill:var(--text)} .lbl .t1{font-size:10.5px;fill:var(--muted);font-weight:700;letter-spacing:.3px}
.lbl .t2{font-size:15px;font-weight:800} .lbl .t2 .u{font-size:10px;fill:var(--muted);font-weight:600}
.lbl .t3{font-size:9.5px;fill:var(--dim);font-weight:600}
.lbl.up-good .t3,.lbl.down-good .t3{fill:var(--green)} .lbl.up-bad .t3,.lbl.down-bad .t3{fill:var(--rose)} .lbl.up .t3,.lbl.down .t3{fill:var(--blue)}
.lbl.unmeasured rect{stroke-dasharray:3 3;fill:transparent} .lbl.unmeasured .t2{font-size:11px;fill:var(--dim);font-weight:600}
.vlabel{fill:var(--dim);font-size:10px;letter-spacing:1px}
.metric-detail{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px;scroll-margin-top:80px}
.md-head{display:flex;justify-content:space-between;gap:10px}
.md-head h3{margin:2px 0;font-size:18px} .md-val{font-size:26px;font-weight:800} .md-val small{font-size:13px;color:var(--muted);margin-left:3px}
.md-head .x{background:var(--panel2);color:var(--muted);border:1px solid var(--border);padding:4px 10px;height:32px}
.chg{font-size:13px;font-weight:700;margin-left:6px}
.chg.up-good,.chg.down-good{color:var(--green)} .chg.up-bad,.chg.down-bad{color:var(--rose)} .chg.up,.chg.down{color:var(--blue)} .chg.flat{color:var(--muted)}
/* tiles */
.tile-group h3{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin:14px 0 8px}
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--border);border-radius:12px;padding:10px 12px;color:var(--text);font-weight:400;cursor:pointer}
.tile:hover{border-color:var(--cyan)}
.tile.fresh{box-shadow:0 0 0 2px var(--green)}
.tile .tl{font-size:11.5px;color:var(--muted);font-weight:700;line-height:1.25}
.tile .tv{font-size:20px;font-weight:800} .tile .tv small{font-size:11px;color:var(--muted);font-weight:600}
.tile .tc{font-size:11.5px;font-weight:700;color:var(--muted)}
.tile.up-good .tc,.tile.down-good .tc{color:var(--green)} .tile.up-bad .tc,.tile.down-bad .tc{color:var(--rose)} .tile.up .tc,.tile.down .tc{color:var(--blue)}
.tile .td{font-size:10.5px;color:var(--dim)}
.spark{display:block;margin:4px 0;max-width:100%}
.nrow{display:grid;grid-template-columns:1fr auto;grid-template-areas:"a b" "c d";gap:0 10px;padding:8px 0;border-bottom:1px solid rgba(35,46,68,.55)}
.nrow span{grid-area:a;color:var(--muted);font-weight:700;font-size:12.5px} .nrow b{grid-area:b;text-align:right} .nrow i{grid-area:c;color:var(--dim);font-style:normal;font-size:11.5px} .nrow svg{grid-area:d;justify-self:end}
.corr{margin:8px 0;font-size:12.5px} .corr ul{margin:4px 0 0 18px;padding:0}
/* log form */
.logform .card{margin-bottom:12px}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.log-group summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;gap:10px}
.log-group summary::-webkit-details-marker{display:none}
.log-group summary h2{margin:0} .log-group summary::after{content:"▾";color:var(--muted)} .log-group[open] summary::after{content:"▴"}
.log-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px 16px;margin-top:14px}
.log-row label{text-transform:none;letter-spacing:0;font-size:13px;color:var(--text)}
.log-row .inp{display:flex;gap:6px}
.log-row input{font-size:16px;padding:10px 12px}
.log-row input::placeholder{color:#4a5873}
.log-row .reuse{background:var(--panel2);color:var(--muted);border:1px solid var(--border);padding:0 12px;font-size:16px;border-radius:9px}
.log-row .hint{font-size:11px;color:var(--dim);margin-top:3px}
.log-row.never label{color:var(--muted)}
.newrow{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:10px}
.savebar{position:sticky;bottom:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:rgba(10,14,22,.92);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:12px;margin-top:8px}
.savebar span{color:var(--muted);font-weight:700}
/* lab */
.filterbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;position:sticky;top:58px;z-index:6;padding:10px 14px;margin-bottom:14px;background:rgba(15,21,33,.94);backdrop-filter:blur(8px)}
.filterbar .seg{margin:0}
.filterbar .dates{display:flex;gap:6px;align-items:center;color:var(--dim)}
.filterbar .dates input{width:150px;padding:7px 9px}
.filterbar select{width:auto;padding:7px 9px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--bg2);color:var(--muted);border:1px solid var(--border);padding:4px 10px;font-size:12px;border-radius:999px;font-weight:700}
.chip.on{color:#0a0e16;background:var(--c);border-color:var(--c)}
.lab-kpis{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.insights{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-bottom:6px}
.insight{display:flex;gap:10px;align-items:flex-start;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;font-size:13px}
.insight .ic{font-size:18px;line-height:1.2}
.slider{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--muted);margin:0}
.slider b{color:var(--text);min-width:38px}
.slider input{width:140px;padding:0;accent-color:var(--cyan)}
.whatif-head{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.whatif-head b.big2{display:block;font-size:30px;font-weight:900} .whatif-head i{color:var(--dim);font-style:normal;font-size:12px}
table.compact td,table.compact th{padding:5px 8px}
tr.best td{color:var(--green)}
.cal{overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.cal-grid{display:flex;gap:3px}
.cal-dow{display:flex;flex-direction:column;gap:3px;margin-top:16px;margin-right:2px}
.cal-dow span{height:13px;font-size:9px;color:var(--dim);line-height:13px}
.cal-col{display:flex;flex-direction:column;gap:3px}
.cal-col i{height:13px;font-size:9px;color:var(--dim);font-style:normal;white-space:nowrap;width:13px;overflow:visible}
.cal-d{width:13px;height:13px;border-radius:3px;background:#161f31;display:inline-block}
.cal-d.off{background:transparent} .cal-d.l1{background:#134e4a} .cal-d.l2{background:#0f766e} .cal-d.l3{background:#14b8a6} .cal-d.l4{background:#5eead4}
.legend .cal-d{width:11px;height:11px}
/* nav on small screens: one horizontal scroll row */
@media (max-width:900px){
  .top .inner{flex-wrap:wrap;gap:8px 12px;padding:10px 14px}
  nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -14px;padding:0 14px 2px}
  nav::-webkit-scrollbar{display:none}
  nav a{white-space:nowrap;padding:7px 11px}
  .hero-grid,.diagram-wrap{grid-template-columns:1fr}
  .filterbar{top:96px}
}
@media (max-width:640px){
  main{padding:14px 12px}
  footer{padding:0 12px}
  h1{font-size:21px}
  .top .meta{display:none}
  .hero .big{font-size:42px}
  .card{padding:14px 12px}
  .chart{height:240px} .chart.tall{height:290px} .chart.short{height:190px}
  .comp-grid b{font-size:16px}
  .form-grid,.form-grid.three,.newrow{grid-template-columns:1fr 1fr}
  .form-grid.three>div:last-child{grid-column:1/-1}
  .log-rows{grid-template-columns:1fr 1fr;gap:12px}
  .tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi .value{font-size:24px} .kpi .value.sm{font-size:21px}
  .insights{grid-template-columns:1fr}
  .filterbar{position:static}
  .filterbar .dates input{width:132px}
  .slider input{width:110px}
  .statrow{gap:14px}
  .tablewrap{max-height:360px}
  .page-head .btn{width:100%;text-align:center}
  .marks{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .mark{padding:6px 8px} .mark b{font-size:15px} .mark span,.mark i{font-size:10px}
}
@media (max-width:380px){ .log-rows{grid-template-columns:1fr} }
@media (max-width:640px){
  .hero-stats .statrow.tight{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .hero-stats .statrow.tight div{min-width:0} .hero-stats .statrow.tight b{font-size:15px} .hero-stats .statrow.tight span{font-size:11px}
}
/* overflow guards: nothing may make the page wider than the viewport */
.xscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
main,.card,.grid>*{min-width:0}
canvas,svg,img,video{max-width:100%}
.chart{width:100%;max-width:100%}
footer .build-line{margin-top:8px;font-size:11.5px;color:var(--dim)} footer .build-line a,footer .build-line code{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* face check-in */
.face-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);margin-bottom:16px}
.face-tips{margin:0 0 12px 18px;padding:0;color:var(--muted);font-size:13px;line-height:1.5}
.face-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.face-actions .btn{cursor:pointer}
.ghost-btn{background:var(--panel2)!important;color:var(--text)!important;border:1px solid var(--border)}
.face-queue{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.fq-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:8px}
.fq-item img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.fq-item .x{background:transparent;color:var(--muted);border:1px solid var(--border);padding:4px 9px}
.fq-q{margin:4px 0 0 16px;padding:0;font-size:11.5px} .fq-q .bad,.bad{color:var(--rose)} .fq-q .warn{color:var(--amber)} b.good{color:var(--green)}
.spinner{display:inline-block;width:10px;height:10px;border:2px solid var(--muted);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-1px}
.face-headline{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:10px}
.face-headline div{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;min-width:0}
.face-headline b.big2{display:block;font-size:26px;font-weight:900} .face-headline i{color:var(--dim);font-style:normal;font-size:11.5px}
.fh-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid rgba(35,46,68,.55)}
.fh-meta{display:flex;flex-direction:column;gap:2px;font-size:13px} .fh-meta i{color:var(--dim);font-style:normal}
.fh-photos{display:flex;gap:8px;flex-wrap:wrap}
.fh-photos figure{margin:0;width:84px} .fh-photos img{width:84px;height:84px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent}
.fh-photos figure.off img{opacity:.35;border-color:var(--rose)} .fh-photos figcaption{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.fh-photos .del{background:transparent;border:0;padding:0 2px;font-size:12px;cursor:pointer}
@media (max-width:900px){ .face-grid{grid-template-columns:1fr} }
@media (max-width:640px){ .fh-row{grid-template-columns:1fr} .face-headline b.big2{font-size:21px} .face-actions .btn,.face-actions label{flex:1;text-align:center} }
[hidden]{display:none!important}
.face-actions label{text-transform:none;letter-spacing:0;font-size:14px;margin:0}

/* guided face camera */
.cam-wrap{margin-bottom:12px}
.cam-stage{position:relative;margin:0 auto;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:var(--cam-aspect,3/4);width:min(100%,calc(72vh * var(--ar,.75)))}
.cam-stage video,.cam-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cam-wrap.mirrored video,.cam-wrap.mirrored canvas{transform:scaleX(-1)}
.cam-guide{position:absolute;left:8px;right:8px;top:10px;text-align:center;font-weight:700;font-size:clamp(18px,4.6vw,30px);line-height:1.2;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.9);padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.35)}
.cam-guide:empty{display:none}
.cam-guide[data-state=ok]{color:#34d399}
.cam-hold{position:absolute;left:0;bottom:0;height:6px;width:calc(var(--p,0) * 100%);background:#34d399;transition:width .1s linear}
.cam-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.gchip{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:4px 8px;border-radius:999px;background:var(--panel-2,#1b2233);border:1px solid rgba(255,255,255,.08)}
.gchip i{width:9px;height:9px;border-radius:50%;background:#f87171;flex:none}
.gchip.ok i{background:#34d399}
.gchip b{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.cam-bar{display:flex;justify-content:center;gap:10px;padding:6px 0}
.face-setup{margin:0 0 10px}.face-setup summary{cursor:pointer;font-weight:600;margin-bottom:6px}
.face-baseline{margin:0 0 10px;line-height:1.6}
.face-precal{display:flex!important;justify-content:flex-start!important;width:auto;align-items:center;gap:8px;margin:0 0 10px;text-transform:none;letter-spacing:0}
.face-precal input{margin:0}
.fh-flags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.pill.good{background:rgba(52,211,153,.15);color:#34d399}.pill.warn{background:rgba(251,191,36,.15);color:#fbbf24}.pill.bad{background:rgba(248,113,113,.15);color:#f87171}
.ghost.sm{font-size:12px;padding:3px 8px;margin-left:6px}