/* <!-- built-under: full-frontend SKILL.md sha256=7efe4ef4 --> */
/* ================================================================
   Time Champ Proctoring - app components (the kit gaps)
   Webcam stage, checks, environment scan, readiness gate, live
   session bar, capture timeline/grid, integrity flags + provenance,
   supervisor monitoring wall, system states. Kit idiom, both themes.
   ================================================================ */

/* ---------- icon sizing per context (icons default to 18px) ---------- */
.tc .sys-ic svg{width:26px;height:26px}
.tc .sum-ring svg{width:28px;height:28px}
.tc .check-badge svg{width:13px;height:13px}
.tc .cap-pill svg,.tc .sbar .nextcap svg,.tc .sbar-btn svg,.tc .stile-flag svg,.tc .snap-tag svg{width:13px;height:13px}
.tc .rule-ic svg,.tc .flag-sev svg,.tc .disc-ic svg,.tc .step-dot svg{width:16px;height:16px}
.tc .brand-badge svg{width:16px;height:16px}
.tc .lede-strip svg,.tc .worknote svg,.tc .watchonly svg,.tc .consent-bar svg{width:17px;height:17px;flex:none}
.tc .gate-checks svg{width:14px;height:14px}
.tc .u-gear svg,.tc .sb-toggle svg,.tc .crumbs svg,.tc .see-all svg{width:16px;height:16px}
.tc .btn svg{width:15px;height:15px}
.tc .btn-xl svg{width:17px;height:17px}

/* ---------- shell: persona + phase context ---------- */
.brand-badge{width:26px;height:26px;border-radius:7px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 1px 2px rgba(var(--shadow-c),.18)}
.brand-badge svg{width:16px;height:16px}
.seat-switch{display:flex;align-items:center;gap:8px}
.demo-tag{font-size:10px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--hairline);border-radius:99px;padding:2px 9px}

/* ---------- candidate setup canvas (phases 1-2) ---------- */
.stage{min-height:100vh;display:flex;flex-direction:column;background:
  radial-gradient(1200px 500px at 50% -10%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 70%),var(--page)}
.stage-top{height:60px;flex:none;display:flex;align-items:center;gap:12px;padding:0 26px;border-bottom:1px solid var(--hairline);background:color-mix(in srgb,var(--page) 82%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}
.stage-top .who{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2)}
.stage-body{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:34px 22px 60px}
.setup{width:100%;max-width:940px}
.setup.narrow{max-width:620px}

/* phase stepper */
.stepper{display:flex;align-items:center;gap:0;margin:2px 0 26px}
.stepper .step{display:flex;align-items:center;gap:10px;flex:1}
.stepper .step:last-child{flex:none}
.step-dot{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11.5px;font-weight:650;font-variant-numeric:tabular-nums;background:var(--surface);border:1.5px solid var(--hairline);color:var(--ink-3);transition:all var(--t-med) var(--ease-spring)}
.step.done .step-dot{background:var(--st-live);border-color:var(--st-live);color:#fff}
.step.on .step-dot{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--accent-bg)}
.step-lbl{font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.step.on .step-lbl{color:var(--ink)}
.step.done .step-lbl{color:var(--ink-2)}
.step-line{flex:1;height:1.5px;background:var(--hairline);margin:0 12px;border-radius:2px;position:relative;overflow:hidden}
.step-line::after{content:"";position:absolute;inset:0;background:var(--st-live);transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--ease-out)}
.step.done .step-line::after{transform:scaleX(1)}
@media(max-width:640px){.step-lbl{display:none}}

.setup-head{margin-bottom:18px}
.setup-head h1{font-size:23px;font-weight:600;letter-spacing:-.02em}
.setup-head .k{font-size:10.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:7px}
.setup-head p{margin-top:6px;font-size:13.5px;color:var(--ink-2);max-width:64ch;line-height:1.5}
.setup-foot{display:flex;align-items:center;gap:12px;margin-top:22px}
.setup-foot .spacer{flex:1}
.setup-foot .note{font-size:11.5px;color:var(--ink-3)}

/* ---------- webcam stage ---------- */
.camstage{position:relative;width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#0d0f14;border:1px solid var(--hairline);box-shadow:0 1px 2px rgba(var(--shadow-c),.06),inset 0 0 0 1px rgba(255,255,255,.02)}
.camstage.wide{aspect-ratio:16/10}
.camstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:#0d0f14}
.camstage.no-mirror video{transform:none}
.cam-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;color:#c9cdd6;padding:24px;background:radial-gradient(circle at 50% 40%,#161a22,#0d0f14)}
.cam-veil .ic{width:44px;height:44px;color:#7f8797}
.cam-veil b{color:#eef1f6;font-size:14px;font-weight:600}
.cam-veil p{font-size:12.5px;max-width:320px;line-height:1.5}
.cam-veil.hidden{display:none}
/* face guide oval for identity capture */
.face-guide{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:46%;aspect-ratio:3/4;border-radius:50%;border:2px dashed rgba(255,255,255,.55);box-shadow:0 0 0 2000px rgba(8,10,14,.34);transition:border-color var(--t-med) ease,box-shadow var(--t-med) ease}
.face-guide.locked{border-color:var(--st-live);border-style:solid;box-shadow:0 0 0 2000px rgba(8,10,14,.28),0 0 0 4px rgba(12,163,12,.35)}
/* scanning sweep for environment scan (a response to scanning, not idle) */
.scan-sweep{position:absolute;left:0;right:0;height:32%;top:0;background:linear-gradient(180deg,transparent,rgba(0,48,219,.22),transparent);opacity:0}
.scanning .scan-sweep{opacity:1;animation:sweep 2.1s var(--ease-out) infinite}
@keyframes sweep{0%{top:-32%}100%{top:100%}}
@media (prefers-reduced-motion:reduce){.scanning .scan-sweep{animation:none;opacity:.5;top:34%}}
/* the live self-view corner tag */
.cam-tag{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#eef1f6;background:rgba(8,10,14,.5);border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:3px 9px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cam-tag i{width:6px;height:6px;border-radius:50%;background:var(--st-live);box-shadow:0 0 0 2.5px rgba(12,163,12,.3)}
.cam-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.cam-flash.go{animation:flash .5s var(--ease-out)}
@keyframes flash{0%{opacity:0}12%{opacity:.85}100%{opacity:0}}

/* ---------- check list (system check) ---------- */
.checks{display:flex;flex-direction:column;gap:2px}
.check{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:10px;border:1px solid var(--hairline);background:var(--surface);transition:border-color var(--t-med) ease,background var(--t-med) ease}
.check+.check{margin-top:8px}
.check-ic{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2);transition:all var(--t-med) ease}
.check-main{min-width:0;flex:1}
.check-name{font-size:13px;font-weight:600}
.check-sub{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.check-st{flex:none;display:flex;align-items:center;gap:8px}
.check-badge{font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px}
.check.pass .check-ic{background:var(--st-live-bg);color:var(--st-live-ink)}
.check.pass{border-color:color-mix(in srgb,var(--st-live) 30%,var(--hairline))}
.check.pass .check-badge{color:var(--st-live-ink);background:var(--st-live-bg)}
.check.fail .check-ic{background:var(--st-crit-bg);color:var(--st-crit-ink)}
.check.fail{border-color:color-mix(in srgb,var(--st-crit) 32%,var(--hairline))}
.check.fail .check-badge{color:var(--st-crit-ink);background:var(--st-crit-bg)}
.check.run .check-ic{background:var(--st-check-bg);color:var(--st-check-ink)}
.check.run .check-badge{color:var(--st-check-ink);background:var(--st-check-bg)}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:1.4s}}
.meter{height:5px;border-radius:3px;background:var(--viz-track);overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;border-radius:3px;background:var(--st-live);width:0;transition:width .8s var(--ease-out)}

/* ---------- consent / capture disclosure ---------- */
.disclose{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
@media(max-width:640px){.disclose{grid-template-columns:1fr}}
.disc{display:flex;gap:11px;padding:12px 13px;border-radius:10px;border:1px solid var(--hairline);background:var(--surface)}
.disc-ic{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent-ink)}
.disc b{font-size:12.5px;font-weight:600;display:block}
.disc p{font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.45}
.disc.off .disc-ic{background:var(--st-idle-bg);color:var(--st-idle-ink)}
.consent-bar{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border-radius:10px;border:1px solid var(--hairline);background:var(--surface-2);margin-top:16px}
.consent-bar .cb{margin-top:1px}
.consent-bar label{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.consent-bar a{color:var(--accent-ink);font-weight:600;border-bottom:1px solid var(--accent-bg)}

/* checkbox (kit lacks a standalone one) */
.cb{width:18px;height:18px;border-radius:5px;flex:none;border:1.5px solid var(--hairline);background:var(--surface);display:grid;place-items:center;cursor:pointer;transition:all var(--t-fast) ease;position:relative}
.cb:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--hairline))}
.cb svg{width:11px;height:11px;color:#fff;opacity:0;transform:scale(.4);transition:opacity 120ms ease,transform 200ms var(--ease-spring)}
.cb.on{background:var(--accent);border-color:var(--accent)}
.cb.on svg{opacity:1;transform:none}

/* ---------- rules + readiness gate ---------- */
.rules{display:flex;flex-direction:column;gap:8px}
.rule{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border-radius:10px;border:1px solid var(--hairline);background:var(--surface)}
.rule-ic{width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center}
.rule.do .rule-ic{background:var(--st-live-bg);color:var(--st-live-ink)}
.rule.dont .rule-ic{background:var(--st-crit-bg);color:var(--st-crit-ink)}
.rule b{font-size:12.5px;font-weight:600}
.rule p{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.gate{margin-top:22px;padding:20px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 26%,var(--hairline));background:linear-gradient(180deg,var(--accent-bg),transparent)}
.gate-head{display:flex;align-items:center;gap:10px}
.gate-head b{font-size:14px;font-weight:600}
.gate-sub{font-size:12px;color:var(--ink-2);margin-top:4px}
.btn-xl{height:44px;padding:0 24px;font-size:14px;font-weight:600;border-radius:11px}
.btn.accent.btn-xl:hover{transform:translateY(-1px)}
.gate-row{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.gate-checks{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-2)}
.gate-checks span{display:inline-flex;align-items:center;gap:6px}

/* ---------- live session (phase 3) ---------- */
.session{min-height:100vh;display:flex;flex-direction:column;background:var(--page)}
.sbar{height:52px;flex:none;display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--ink);color:#eceef2;position:sticky;top:0;z-index:30}
.sbar .rec{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600}
.sbar .rec i{width:8px;height:8px;border-radius:50%;background:#ff5a5a;box-shadow:0 0 0 3px rgba(255,90,90,.25)}
.sbar .selfthumb{width:38px;height:29px;border-radius:6px;object-fit:cover;transform:scaleX(-1);border:1px solid rgba(255,255,255,.16);background:#0d0f14}
.sbar .caps{display:flex;align-items:center;gap:6px;margin-left:6px}
.sbar-mid{margin-left:auto;display:flex;align-items:center;gap:16px}
.sbar .timer{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.sbar .nextcap{font-size:11px;color:#a6adba;display:flex;align-items:center;gap:6px}
.sbar-btn{height:30px;padding:0 12px;border-radius:8px;font-size:12px;font-weight:600;color:#eceef2;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);transition:background var(--t-fast) ease}
.sbar-btn:hover{background:rgba(255,255,255,.13)}
.sbar-btn.end:hover{background:#d03b3b;border-color:#d03b3b;color:#fff}
/* capture-type pill in the session bar */
.cap-pill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:#cfd4dd;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:2px 8px}
.cap-pill .d{width:6px;height:6px;border-radius:50%}
.cap-pill .d.cam{background:var(--cap-cam)}
.cap-pill .d.screen{background:var(--cap-screen)}
.cap-pill .d.act{background:var(--cap-act)}
.cap-pill.armed .d{box-shadow:0 0 0 2.5px color-mix(in srgb,currentColor 22%,transparent)}
.session-body{flex:1;padding:26px;max-width:1080px;margin:0 auto;width:100%}
.worknote{display:flex;align-items:flex-start;gap:10px;padding:12px 15px;border-radius:10px;border:1px dashed var(--hairline);background:var(--surface-2);color:var(--ink-2);font-size:12.5px;margin-bottom:18px}
.selfwatch{position:fixed;right:20px;bottom:20px;width:190px;border-radius:12px;overflow:hidden;border:1px solid var(--hairline);box-shadow:0 10px 30px -10px rgba(var(--shadow-c),.3);background:#0d0f14;z-index:25}
.selfwatch .camstage{aspect-ratio:4/3;border:0;border-radius:0}
.selfwatch .sw-foot{display:flex;align-items:center;gap:7px;padding:6px 9px;background:var(--surface);font-size:10.5px;color:var(--ink-3)}
.selfwatch .sw-foot .nextcap{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600}

/* ---------- capture timeline + snapshot grid (supervisor + summary) ---------- */
.snapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.snap{border-radius:10px;overflow:hidden;border:1px solid var(--hairline);background:var(--surface);cursor:pointer;transition:border-color var(--t-med) ease,box-shadow var(--t-med) ease,transform var(--t-med) var(--ease-spring)}
.snap:hover{border-color:color-mix(in srgb,var(--ink) 16%,var(--hairline));box-shadow:0 6px 20px -8px rgba(var(--shadow-c),.16);transform:translateY(-1px)}
.snap .shot{aspect-ratio:4/3;width:100%;object-fit:cover;display:block;background:linear-gradient(135deg,#20242e,#12151c)}
.snap.flagged{border-color:color-mix(in srgb,var(--st-crit) 40%,var(--hairline))}
.snap-foot{display:flex;align-items:center;gap:6px;padding:6px 8px}
.snap-t{font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.snap-tag{margin-left:auto;font-size:9.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase}
.snap-tag.cam{color:var(--cap-cam)}
.snap-tag.screen{color:var(--cap-screen)}

/* ---------- supervisor monitoring wall ---------- */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.stile{border-radius:13px;overflow:hidden;border:1px solid var(--hairline);background:var(--surface);box-shadow:0 1px 2px rgba(var(--shadow-c),.03);transition:border-color var(--t-med) ease,box-shadow var(--t-med) ease,transform var(--t-med) var(--ease-spring);cursor:pointer}
.stile:hover{border-color:color-mix(in srgb,var(--ink) 15%,var(--hairline));box-shadow:0 8px 26px -12px rgba(var(--shadow-c),.2);transform:translateY(-2px)}
.stile.flagged{border-color:color-mix(in srgb,var(--st-crit) 38%,var(--hairline))}
.stile-cam{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,#20242e,#12151c);overflow:hidden}
.stile-cam img,.stile-cam video{width:100%;height:100%;object-fit:cover}
.stile-cam video{transform:scaleX(-1)}
.stile-live{position:absolute;left:9px;top:9px;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:650;color:#fff;background:rgba(8,10,14,.55);border-radius:99px;padding:2px 8px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.stile-live i{width:6px;height:6px;border-radius:50%;background:var(--st-live)}
.stile-live.paused i{background:var(--st-idle)}
.stile-flag{position:absolute;right:9px;top:9px;font-size:10px;font-weight:700;color:#fff;background:var(--st-crit);border-radius:99px;padding:2px 8px;display:inline-flex;align-items:center;gap:4px}
.stile-nextcam{position:absolute;right:9px;bottom:9px;font-family:var(--mono);font-size:9.5px;color:#cfd4dd;background:rgba(8,10,14,.5);border-radius:5px;padding:1px 6px}
.stile-foot{display:flex;align-items:center;gap:9px;padding:10px 12px}
.stile-foot .p-av{width:26px;height:26px}
.stile-name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stile-meta{font-size:10.5px;color:var(--ink-3)}
.stile-you{margin-left:auto;font-size:9.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-bg);border-radius:99px;padding:2px 8px}

/* ---------- integrity flag + provenance (engine output; disbelievable) ---------- */
.flag{border-radius:12px;border:1px solid var(--hairline);background:var(--surface);overflow:hidden}
.flag+.flag{margin-top:10px}
.flag.crit{border-color:color-mix(in srgb,var(--st-crit) 34%,var(--hairline))}
.flag.warn{border-color:color-mix(in srgb,var(--st-warn) 34%,var(--hairline))}
.flag-head{display:flex;align-items:center;gap:11px;padding:12px 14px}
.flag-sev{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center}
.flag.crit .flag-sev{background:var(--st-crit-bg);color:var(--st-crit-ink)}
.flag.warn .flag-sev{background:var(--st-warn-bg);color:var(--st-warn-ink)}
.flag-title{font-size:13px;font-weight:600}
.flag-sub{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.flag-time{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);text-align:right}
.flag-body{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:0 14px 14px}
@media(max-width:560px){.flag-body{grid-template-columns:1fr}}
.flag-evi{border-radius:9px;overflow:hidden;border:1px solid var(--hairline);position:relative}
.flag-evi img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#1a1d25}
.flag-evi .mark{position:absolute;border:2px solid var(--st-crit);border-radius:6px;box-shadow:0 0 0 2000px rgba(208,59,59,.10)}
.prov{font-size:11.5px}
.prov-row{display:flex;gap:8px;padding:4px 0;border-bottom:1px solid var(--hairline-2)}
.prov-row:last-child{border-bottom:0}
.prov-k{color:var(--ink-3);width:92px;flex:none}
.prov-v{color:var(--ink);font-weight:500}
.prov-v.mono{font-family:var(--mono);font-size:10.5px}
.conf{display:inline-flex;align-items:center;gap:7px}
.conf-bar{width:60px;height:5px;border-radius:3px;background:var(--viz-track);overflow:hidden}
.conf-bar i{display:block;height:100%;border-radius:3px;background:var(--st-warn)}
.flag-act{display:flex;align-items:center;gap:8px;padding:11px 14px;border-top:1px solid var(--hairline);background:var(--surface-2)}
.flag-act .disbelieve{margin-right:auto;font-size:11.5px;color:var(--ink-3)}
.flag.resolved{opacity:.62}
.flag.resolved .flag-act{background:var(--st-live-bg)}
.ovr{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--st-live-ink)}

/* stale conclusion (a verdict may not outlive its inputs) */
.stale{position:relative}
.stale .verdict{text-decoration:line-through;color:var(--ink-3);opacity:.7}
.stale-tag{font-size:10px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--st-warn-ink);background:var(--st-warn-bg);border-radius:99px;padding:2px 8px}

/* ---------- review layout ---------- */
.review{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
@media(max-width:1000px){.review{grid-template-columns:1fr}}

/* ---------- summary ---------- */
.sumhero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 20px 20px}
.sum-ring{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--st-live-bg);color:var(--st-live-ink);margin-bottom:14px}
.sum-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
@media(max-width:640px){.sum-stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- system states ---------- */
.sysstate{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px}
.sys-ic{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--hairline);color:var(--ink-3);margin-bottom:16px}
.sysstate h2{font-size:20px;font-weight:600;letter-spacing:-.02em}
.sysstate p{font-size:13px;color:var(--ink-2);margin-top:8px;max-width:400px;line-height:1.55}
.sysstate .code{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:14px}
.sysstate .btn{margin-top:18px}

/* ---------- misc ---------- */
.hr{height:1px;background:var(--hairline);border:0;margin:18px 0}
.lede-strip{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-2);padding:9px 13px;border-radius:9px;background:var(--st-check-bg);border:1px solid color-mix(in srgb,var(--accent) 20%,var(--hairline))}
.watchonly{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-3)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.stat-mini .kpi-value{font-size:22px}
.msg-tmpl{border:1px solid var(--hairline);border-radius:12px;overflow:hidden}
.msg-tmpl .mt-head{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--hairline)}
.msg-tmpl .mt-body{padding:16px 18px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.msg-tmpl .mt-body h4{font-size:15px;color:var(--ink);margin-bottom:8px}
.mono-note{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}

/* ---- capture tabs (session review) ---- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--hairline);margin:0 0 2px}
.tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;padding:9px 13px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-3);cursor:pointer;margin-bottom:-1px;transition:color .15s,border-color .15s}
.tab:hover{color:var(--ink-2)}
.tab.on{color:var(--cap-cam);border-bottom-color:var(--cap-cam)}

/* ---- KPI stat block ---- */
.kpi{display:inline-flex;flex-direction:column;gap:3px}
.kpi-label{font-size:10.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.kpi-value{display:flex;align-items:baseline;gap:2px;font-size:30px;font-weight:680;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi-value .unit{font-size:15px;font-weight:600;color:var(--ink-3)}

/* ---- continuous recording ---- */
.rec-player{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--hairline);background:#000;aspect-ratio:16/9;max-width:520px}
.rec-player img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}
.rec-badge{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:10.5px;font-weight:650;letter-spacing:.03em}
.rec-badge svg{width:12px;height:12px;color:#ff5a5a}
.rec-dur{position:absolute;top:10px;right:10px;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-variant-numeric:tabular-nums}
.rec-play{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--cap-cam);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.35);transition:transform .15s}
.rec-play svg{width:24px;height:24px;margin-left:3px}
.rec-play:hover{transform:scale(1.06)}
.rec-scrub{max-width:520px;margin-top:12px}
.rec-track{position:relative;height:8px;border-radius:4px;background:var(--viz-track)}
.rec-track .rec-head{position:absolute;top:-3px;width:3px;height:14px;border-radius:2px;background:var(--cap-cam);transform:translateX(-50%)}
.rec-track .tick{position:absolute;top:-2px;width:6px;height:12px;border-radius:2px;background:var(--st-crit);transform:translateX(-50%);cursor:pointer}
.rec-times{display:flex;justify-content:space-between;margin-top:6px;font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---- active-time timeline ---- */
.actbar{display:flex;gap:2px;height:26px;border-radius:6px;overflow:hidden}
.actbar i{flex:1}
.actbar .b-p{background:var(--st-live)}
.actbar .b-n{background:var(--st-idle)}
.actbar .b-u{background:var(--st-crit)}
.actbar .b-i{background:var(--viz-track)}
.legend{display:flex;flex-wrap:wrap;gap:12px}
.legend .lg{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--ink-3)}
.legend .sw{width:9px;height:9px;border-radius:2px;display:inline-block}

/* ---- app/website activity rows ---- */
.rows{display:flex;flex-direction:column;gap:2px}
.row{display:flex;align-items:center;gap:12px;padding:9px 6px;border-radius:8px}
.row:hover{background:var(--surface-2)}
.app-ic{flex:none;width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:var(--ink-3)}
.app-ic svg{width:16px;height:16px}
.row-name{font-size:13px;font-weight:550;color:var(--ink);display:block}
.app-bar{display:block;height:5px;border-radius:3px;background:var(--viz-track);overflow:hidden;max-width:280px}
.app-fill{display:block;height:100%;border-radius:3px}
.row-right{flex:none;text-align:right}
.row-val{font-size:12.5px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:650;letter-spacing:.02em}
.chip.bad{background:var(--st-crit-bg);color:var(--st-crit-ink)}

/* ---- capability coverage table ---- */
.captable{width:100%;border-collapse:collapse;font-size:13px}
.captable thead th{text-align:left;padding:12px 16px;font-size:10.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2);border-bottom:1px solid var(--hairline)}
.captable th.c,.captable td.c{text-align:center}
.captable tbody td{padding:13px 16px;border-bottom:1px solid var(--hairline);vertical-align:middle}
.captable tbody tr:last-child td{border-bottom:0}
.captable tbody tr:hover{background:color-mix(in srgb,var(--cap-cam) 3%,transparent)}
.cap-name{display:block;font-weight:600;color:var(--ink);margin-bottom:2px}
.cap-note{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.4;max-width:340px}
.cap-at{font-size:12px;color:var(--ink-2);font-weight:550}
.capmark{display:inline-flex;align-items:center;justify-content:center}
.capmark.yes{width:24px;height:24px;border-radius:50%;background:var(--st-live-bg);color:var(--st-live-ink)}
.capmark.yes svg{width:15px;height:15px}
.capmark.no{font-size:11px;color:var(--ink-3);font-style:italic}
.capnote{font-size:11.5px;color:var(--ink-2);line-height:1.35}
@media(max-width:760px){.captable .cap-note{display:none}.captable thead th,.captable tbody td{padding:10px 10px}}

/* ---- identity verification (ID + face) ---- */
.face-guide.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.idv-steps{display:flex;flex-direction:column;gap:8px}
.idv-step{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--hairline);border-radius:11px;background:var(--surface)}
.idv-step.done{border-color:color-mix(in srgb,var(--st-live) 40%,var(--hairline));background:var(--st-live-bg)}
.idv-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:650;background:var(--surface-2);color:var(--ink-3)}
.idv-step.done .idv-n{background:var(--st-live);color:#fff}
.idv-step.done .idv-n svg{width:13px;height:13px}
.idv-ic{flex:none;color:var(--ink-3)}.idv-ic svg{width:19px;height:19px}
.idv-step.done .idv-ic{color:var(--st-live-ink)}
.idv-main{flex:1;min-width:0}
.idv-name{font-size:13px;font-weight:600;color:var(--ink)}
.idv-sub{font-size:11px;color:var(--ink-3);margin-top:1px}
.idv-thumb{flex:none;width:52px;height:40px}
.idv-thumb img{width:52px;height:40px;object-fit:cover;border-radius:7px;border:1px solid var(--hairline)}
.idv-verdict{display:flex;gap:11px;align-items:flex-start;margin-top:12px;padding:13px 14px;border-radius:11px;background:var(--st-live-bg);border:1px solid color-mix(in srgb,var(--st-live) 35%,var(--hairline))}
.idv-verdict b{font-size:13.5px;color:var(--st-live-ink)}
.idv-verdict p{font-size:11.5px;color:var(--ink-2);line-height:1.45;margin-top:2px}
.idv-ok{flex:none;color:var(--st-live)}.idv-ok svg{width:22px;height:22px}
.idv-dim{display:block;font-size:10.5px;color:var(--ink-3);margin-top:4px}

/* ---- secure browser / lockdown ---- */
.secbrowser{margin-top:18px;border:1px solid var(--hairline);border-radius:14px;padding:16px 18px;background:var(--surface)}
.secbrowser .sb-head{display:flex;align-items:center;gap:12px}
.secbrowser .sb-head b{font-size:14px}
.secbrowser .gate-sub{font-size:12px;color:var(--ink-3);margin-top:1px}
.sb-state{margin-left:auto;flex:none;font-size:11px;font-weight:650;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-3)}
.sb-state.on{background:var(--st-live-bg);color:var(--st-live-ink)}
.sb-state.warn{background:var(--st-crit-bg);color:var(--st-crit-ink)}
.sb-restrict{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:14px 0 4px}
.sb-restrict span{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)}
.sb-restrict svg{width:15px;height:15px;color:var(--ink-3);flex:none}
.sb-row{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline)}
.sb-tabs{font-size:12px;color:var(--ink-3)}.sb-tabs b{color:var(--ink);font-variant-numeric:tabular-nums}
@media(max-width:640px){.sb-restrict{grid-template-columns:1fr}}

/* ---- live: continuous rec + tab-switch nudge ---- */
.rec-cont{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:650;letter-spacing:.03em;color:#fff;background:var(--st-crit);padding:3px 9px;border-radius:999px}
.rec-cont svg{width:12px;height:12px;animation:recpulse 1.6s ease-in-out infinite}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.rec-cont svg{animation:none}}
.live-nudge{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;display:flex;align-items:flex-start;gap:11px;max-width:440px;padding:13px 15px;border-radius:13px;background:var(--ink);color:#fff;box-shadow:0 10px 40px -8px rgba(0,0,0,.5)}
.live-nudge svg{width:19px;height:19px;flex:none;color:#ffb020;margin-top:1px}
.live-nudge b{font-size:13px}.live-nudge p{font-size:11.5px;opacity:.82;line-height:1.4;margin-top:2px}
.live-nudge-x{flex:none;background:none;border:0;color:#fff;opacity:.6;cursor:pointer;padding:2px}
.live-nudge-x svg{width:15px;height:15px;color:#fff}