/* ══════════════════════════════════════════════════════════
   PsychoLier v5 — VERITAS Engine
   Design: Interrogation-room console / polygraph chart-paper
   Palette: void black + arterial red (dark theme, red accent)
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --void:#0a0607;--panel:#150c0d;--raised:#1d1215;--raised2:#241618;
  --red:#ff2740;--red-hi:#ff5468;--red-deep:#7f1120;--red-ink:#c81e30;
  --amber:#f5a623;--green:#22c55e;--blue:#3b82f6;
  --ink:#f2e9e8;--ink-mid:#a8888a;--ink-low:#5c4245;--ink-faint:#3a2729;
  --border:rgba(255,39,64,.14);--border-hi:rgba(255,39,64,.35);
  --glow:0 0 24px rgba(255,39,64,.28);--glow-soft:0 0 14px rgba(255,39,64,.16);
  --r:7px;--r2:11px;--r3:15px;
  --tr:all .22s cubic-bezier(.4,0,.2,1);
  --font-display:'Bebas Neue',sans-serif;--font-body:'Inter',sans-serif;--font-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html[dir="rtl"] body{direction:rtl}
body{font-family:var(--font-body);background:var(--void);color:var(--ink);min-height:100vh;overflow-x:hidden;font-size:14px;line-height:1.6}
::selection{background:rgba(255,39,64,.3);color:#fff}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:var(--red-deep);border-radius:4px}

/* ── ICONS (base) ──
   Every inline <svg class="icon"> in the app relies on this block.
   Missing this rule is what causes an icon to render at native/huge
   SVG size — always keep icon sizing centralized here. */
.icon{width:18px;height:18px;display:inline-block;vertical-align:-4px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-sm{width:14px;height:14px;vertical-align:-2.5px}
.icon-lg{width:22px;height:22px;vertical-align:-5px}
.icon-xl{width:30px;height:30px;vertical-align:-7px}

/* ── BACKDROP ── */
#bgCanvas{position:fixed;inset:0;z-index:0;opacity:.5;pointer-events:none}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}

/* ── SIGNATURE ELEMENT: POLYGRAPH INK TRACE ── */
.trace-strip{height:46px;background:
  repeating-linear-gradient(180deg,rgba(255,39,64,.05) 0,rgba(255,39,64,.05) 1px,transparent 1px,transparent 9px),
  var(--panel);border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.trace-strip canvas{width:100%;height:100%;display:block}
.trace-label{position:absolute;top:4px;left:12px;font-family:var(--font-mono);font-size:8px;letter-spacing:2px;color:var(--red);opacity:.6;text-transform:uppercase;z-index:2;pointer-events:none}

/* ── HEADER ── */
.header{background:rgba(10,6,7,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:0 22px;height:60px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:100}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;cursor:pointer;background:none;border:none}
.logo-mark{width:34px;height:34px;background:var(--void);border:2px solid var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}
.logo-mark::before{content:'';position:absolute;inset:5px;border:1px solid var(--red-deep);border-radius:50%}
.logo-mark svg{width:16px;height:16px;stroke:var(--red)}
.logo-text{font-family:var(--font-display);font-size:21px;letter-spacing:1px;color:var(--ink);line-height:1}
.logo-text b{color:var(--red)}
.logo-ver{font-family:var(--font-mono);font-size:9px;color:var(--ink-low);border:1px solid var(--border);border-radius:3px;padding:2px 6px;margin-left:2px}
.header-spacer{flex:1;min-width:8px}
.header-stats{display:flex;gap:14px;align-items:center;flex-shrink:0}
.hstat{text-align:center;line-height:1.1}
.hstat b{font-family:var(--font-mono);font-size:14px;color:var(--red);display:block}
.hstat span{font-size:8px;color:var(--ink-low);letter-spacing:1.5px;text-transform:uppercase;font-family:var(--font-mono)}
.lang-select{background:var(--raised);border:1px solid var(--border);color:var(--ink-mid);font-family:var(--font-mono);font-size:11px;padding:6px 9px;border-radius:var(--r);cursor:pointer;outline:none;flex-shrink:0;transition:var(--tr)}
.lang-select:hover{border-color:var(--border-hi);color:var(--ink)}
.mode-badge{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;padding:5px 10px;border-radius:20px;text-transform:uppercase;flex-shrink:0;transition:var(--tr)}
.mode-badge.online{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.3);color:var(--green)}
.mode-badge.offline{background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.3);color:var(--amber)}
.mode-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── PHASE NAV ──
   flex:0 0 auto (natural content width) + horizontal scroll is the
   robust pattern here: pills can never overlap regardless of viewport,
   they just scroll. (flex:1 + min-width previously fought each other
   at narrow widths and caused label text to overlap between tabs.) */
.phase-nav{background:var(--panel);border-bottom:1px solid var(--border);padding:6px 14px;display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;position:relative;scrollbar-width:none}
.phase-nav::-webkit-scrollbar{display:none}
.pstep{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:8px 13px;cursor:pointer;border-radius:20px;transition:var(--tr);white-space:nowrap;scroll-snap-align:start;border:1px solid transparent}
.pstep:hover{background:rgba(255,39,64,.06)}
.pstep:active{transform:scale(.96)}
.pstep .pn{width:21px;height:21px;border-radius:50%;border:1.5px solid var(--ink-low);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:9px;color:var(--ink-low);flex-shrink:0;transition:var(--tr)}
.pstep .pt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-low);transition:var(--tr)}
.pstep.active{background:rgba(255,39,64,.09);border-color:var(--border-hi)}
.pstep.active .pn{border-color:var(--red);background:var(--red);color:#fff;box-shadow:var(--glow-soft)}
.pstep.active .pt{color:var(--red-hi);font-weight:600}
.pstep.done .pn{border-color:var(--green);color:var(--green);background:rgba(34,197,94,.1)}
.pstep.done .pt{color:var(--green)}
.phase-nav-fade{position:absolute;top:0;bottom:0;width:26px;pointer-events:none;z-index:2}
.phase-nav-fade.l{left:0;background:linear-gradient(90deg,var(--panel),transparent)}
.phase-nav-fade.r{right:0;background:linear-gradient(270deg,var(--panel),transparent)}

/* ── MAIN LAYOUT ── */
.main{flex:1;display:grid;grid-template-columns:1fr 300px;gap:18px;max-width:1360px;width:100%;margin:0 auto;padding:20px}
.content{min-width:0}
.sidebar{display:flex;flex-direction:column;gap:12px}
.phase-view{display:flex;flex-direction:column;gap:14px}

/* ── CARDS ── */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r2);padding:20px;transition:var(--tr);position:relative}
.card:hover{border-color:var(--border-hi)}
.card.accent{border-left:3px solid var(--red)}
.chead{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.cicon{width:36px;height:36px;border-radius:9px;background:rgba(255,39,64,.08);color:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--border)}
.cicon svg{width:18px;height:18px}
.ctitle{font-size:13.5px;font-weight:600;color:var(--ink)}
.csub{font-size:10.5px;color:var(--ink-low);font-family:var(--font-mono);letter-spacing:.4px;margin-top:2px}
.cbadge{margin-left:auto;font-family:var(--font-mono);font-size:8.5px;letter-spacing:1px;padding:3px 8px;border-radius:3px;text-transform:uppercase;flex-shrink:0;border:1px solid var(--border-hi);color:var(--red);background:rgba(255,39,64,.06)}
.cbadge.dim{color:var(--ink-low);border-color:var(--border)}
.cbadge.new{color:var(--amber);border-color:rgba(245,166,35,.3);background:rgba(245,166,35,.06)}
.cbadge.exp{color:var(--blue);border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.06)}

/* ── SECTION HEAD ── */
.shead{display:flex;align-items:baseline;gap:10px;margin-bottom:2px}
.snum{font-family:var(--font-display);font-size:34px;color:var(--red);opacity:.22;line-height:.8}
.stitle{font-family:var(--font-display);font-size:20px;letter-spacing:.5px;color:var(--ink);line-height:1}
.ssub{font-size:10.5px;color:var(--ink-low);font-family:var(--font-mono);letter-spacing:1px;margin-top:3px;text-transform:uppercase}

/* ── TAGS/PILLS ── */
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-family:var(--font-mono);font-size:8.5px;padding:3px 7px;border-radius:3px;letter-spacing:.4px;border:1px solid var(--border);color:var(--ink-mid);background:rgba(255,255,255,.02)}
.tag.r{border-color:rgba(255,39,64,.25);color:var(--red-hi)}

/* ── INPUTS ── */
label.field{display:block;margin-bottom:14px}
label.field:last-child{margin-bottom:0}
.flabel{font-size:10.5px;font-weight:600;color:var(--ink-mid);letter-spacing:.5px;text-transform:uppercase;font-family:var(--font-mono);margin-bottom:7px;display:flex;align-items:center;gap:7px}
.flabel .hint{font-weight:400;text-transform:none;color:var(--ink-low);letter-spacing:0}
input[type=text],input[type=password],input[type=number],textarea,select{width:100%;background:var(--void);border:1px solid var(--border);border-radius:var(--r);color:var(--ink);padding:10px 13px;font-size:13px;font-family:var(--font-body);line-height:1.6;outline:none;transition:var(--tr);resize:vertical}
textarea{min-height:110px;font-family:var(--font-body)}
input:focus,textarea:focus,select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,39,64,.08)}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
.row{display:flex;gap:8px}
.row>*{flex:1}
input[type=range]{width:100%;height:4px;background:var(--raised);border-radius:2px;outline:none;-webkit-appearance:none;appearance:none;margin-top:8px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--red);border:2px solid var(--void);box-shadow:0 0 8px rgba(255,39,64,.5);transition:var(--tr)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--red);border:2px solid var(--void);box-shadow:0 0 8px rgba(255,39,64,.5);cursor:pointer}
input[type=range]::-moz-range-track{height:4px;background:var(--raised);border-radius:2px}

/* ── TOGGLE ── */
.trow{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;padding:13px;border:1px solid var(--border);border-radius:var(--r);background:var(--void);transition:var(--tr);user-select:none}
.trow:hover{border-color:var(--border-hi)}
.tinfo{flex:1}
.ttitle{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px}
.tdesc{font-size:10.5px;color:var(--ink-low);margin-top:3px;line-height:1.5}
.sw{position:relative;width:42px;height:23px;flex-shrink:0}
.sw input{opacity:0;width:100%;height:100%;position:absolute;cursor:pointer;margin:0}
.sw-track{position:absolute;inset:0;border-radius:12px;background:var(--raised);border:1px solid var(--border);transition:var(--tr);pointer-events:none}
.sw-track::before{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;background:var(--ink-low);border-radius:50%;transition:var(--tr)}
.sw input:checked~.sw-track{border-color:var(--red);background:rgba(255,39,64,.12)}
.sw input:checked~.sw-track::before{transform:translateX(19px);background:var(--red);box-shadow:0 0 8px var(--red)}
.collapse{display:none;margin-top:13px;padding-top:13px;border-top:1px dashed var(--border)}
.collapse.open{display:block}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 20px;border-radius:var(--r);font-size:12.5px;font-weight:600;cursor:pointer;border:none;transition:var(--tr);white-space:nowrap;font-family:var(--font-body);letter-spacing:.2px}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn-main{background:linear-gradient(135deg,var(--red),var(--red-ink));color:#fff;box-shadow:0 4px 20px rgba(255,39,64,.3)}
.btn-main:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(255,39,64,.4)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--ink-mid)}
.btn-ghost:hover{border-color:var(--border-hi);color:var(--ink)}
.btn-dim{background:var(--raised);border:1px solid var(--border);color:var(--ink-mid)}
.btn-dim:hover{color:var(--ink)}
.btn-sm{padding:7px 13px;font-size:11px}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none!important}
.btn-full{width:100%}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ── STATUS ── */
.status{padding:9px 13px;border-radius:var(--r);font-size:11.5px;display:flex;align-items:center;gap:8px;margin-top:11px;font-family:var(--font-mono)}
.status.ok{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);color:var(--green)}
.status.err{background:rgba(255,39,64,.08);border:1px solid rgba(255,39,64,.3);color:var(--red-hi)}
.status.load{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.25);color:#60a5fa}

/* ── DIVIDER ── */
.hr{display:flex;align-items:center;gap:10px;margin:20px 0}
.hr::before,.hr::after{content:'';flex:1;height:1px;background:var(--border)}
.hr span{font-family:var(--font-mono);font-size:8.5px;color:var(--ink-low);letter-spacing:2px;text-transform:uppercase;white-space:nowrap}

/* ── PROVIDER GRID ── */
.prov-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.prov-btn{background:var(--void);border:1px solid var(--border);border-radius:var(--r);padding:9px 4px;cursor:pointer;transition:var(--tr);text-align:center}
.prov-btn:hover{border-color:var(--border-hi)}
.prov-btn.active{border-color:var(--red);box-shadow:var(--glow-soft);background:rgba(255,39,64,.06)}
.prov-btn .pn{font-family:var(--font-mono);font-weight:700;font-size:10px;display:block;color:var(--ink-mid)}
.prov-btn.active .pn{color:var(--red-hi)}
.prov-btn .pl{font-size:8px;color:var(--ink-low);font-family:var(--font-mono);margin-top:1px;display:block}

/* ── CUE GRID (checklist) ── */
.cue-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.cue{background:var(--void);border:1px solid var(--border);border-radius:var(--r);padding:11px;cursor:pointer;transition:var(--tr);user-select:none;position:relative}
.cue:hover{border-color:var(--border-hi)}
.cue.on{border-color:var(--red);background:rgba(255,39,64,.06)}
.cue input{position:absolute;opacity:0;pointer-events:none}
.ctop{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;margin-bottom:5px}
.cue-name{font-size:10.5px;font-weight:600;color:var(--ink);line-height:1.3;flex:1}
.cue-chk{width:15px;height:15px;border:1.5px solid var(--ink-low);border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cue-chk svg{width:9px;height:9px;opacity:0}
.cue.on .cue-chk{background:var(--red);border-color:var(--red);color:#fff}
.cue.on .cue-chk svg{opacity:1}
.cue-desc{font-size:10px;color:var(--ink-low);line-height:1.45;margin-bottom:4px}
.cue-fw{font-size:8.5px;color:var(--red-hi);font-family:var(--font-mono);opacity:.75}

/* ── METERS ── */
.meter{padding:11px 13px;background:var(--void);border-radius:var(--r);border:1px solid var(--border)}
.mhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.mlabel{font-family:var(--font-mono);font-size:9px;color:var(--ink-low);letter-spacing:1px;text-transform:uppercase}
.mval{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--red)}
.mtrack{height:4px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden}
.mfill{height:100%;border-radius:2px;transition:width .7s cubic-bezier(.4,0,.2,1);background:linear-gradient(90deg,var(--red-deep),var(--red))}
.meter-group{display:flex;flex-direction:column;gap:9px}

/* ── STEP ITEMS (interrogation) ── */
.step{background:var(--void);border:1px solid var(--border);border-radius:var(--r2);padding:14px;animation:rise .35s ease forwards;opacity:0;transform:translateY(10px)}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
.step-head{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.step-badge{padding:3px 9px;background:rgba(255,39,64,.08);border:1px solid var(--border-hi);border-radius:20px;font-family:var(--font-mono);font-size:8.5px;color:var(--red-hi);letter-spacing:1px;text-transform:uppercase}
.step-orig{font-size:10px;color:var(--ink-low);font-family:var(--font-mono);background:rgba(245,166,35,.05);border:1px solid rgba(245,166,35,.15);border-radius:4px;padding:4px 8px}
.step-q{font-size:13px;color:var(--ink);line-height:1.6;margin-bottom:10px}
.timer-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.timer-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;background:var(--raised);border:1px solid var(--border);border-radius:18px;font-family:var(--font-mono);font-size:9.5px;color:var(--ink-mid);cursor:pointer;transition:var(--tr);text-transform:uppercase}
.timer-btn:hover{border-color:var(--border-hi)}
.timer-btn.run{border-color:var(--red);color:var(--red-hi);animation:pulse 1.1s infinite}
.timer-disp{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--red);min-width:44px}
.timer-disp.flag{color:var(--amber)}
.timer-hint{font-size:9.5px;color:var(--ink-faint);font-family:var(--font-mono)}
.step-note{width:100%;margin-top:8px;min-height:42px;font-size:12px;padding:8px 10px;background:rgba(255,255,255,.015);border:1px dashed var(--border)}

/* ── NLP PANEL ── */
.nlp-panel{background:rgba(255,39,64,.03);border:1px solid var(--border);border-radius:var(--r2);padding:16px;margin-top:14px}
.nlp-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.nlp-title{font-size:10.5px;font-weight:600;color:var(--red-hi);font-family:var(--font-mono);letter-spacing:1px;text-transform:uppercase}
.nlp-live{font-size:8px;padding:2px 6px;background:rgba(255,39,64,.1);border:1px solid var(--border-hi);border-radius:10px;color:var(--red);font-family:var(--font-mono);animation:pulse 2s infinite;margin-left:auto}
.nlp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:12px}
.nstat{background:var(--void);border:1px solid var(--border);border-radius:var(--r);padding:9px;text-align:center}
.nstat b{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--red-hi);display:block;line-height:1}
.nstat span{font-family:var(--font-mono);font-size:7.5px;color:var(--ink-low);letter-spacing:1px;margin-top:3px;display:block}
.nbars{display:flex;flex-direction:column;gap:7px}
.nbar-head{display:flex;justify-content:space-between;font-size:9.5px;font-family:var(--font-mono);color:var(--ink-low)}
.nbar-track{height:3px;background:rgba(255,39,64,.06);border-radius:2px;overflow:hidden;margin-top:3px}
.nbar-fill{height:100%;border-radius:2px;transition:width .6s;background:var(--red)}
.nlp-interp{margin-top:11px;font-size:10.5px;color:var(--ink-low);font-family:var(--font-mono);line-height:1.6;padding:8px 11px;background:rgba(255,255,255,.015);border-radius:var(--r);border:1px solid var(--border)}
.nlp-lang-note{font-size:9px;color:var(--ink-faint);margin-top:6px;font-family:var(--font-mono)}

/* ── SENSOR PANELS ── */
.sensor-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:720px){.sensor-grid{grid-template-columns:1fr}}
.sensor-box{background:var(--void);border:1px solid var(--border);border-radius:var(--r2);padding:14px}
.sensor-box video{width:100%;border-radius:var(--r);background:#000;display:block;transform:scaleX(-1)}
.sensor-canvas-wrap{position:relative;margin-top:8px}
.sensor-live-badge{position:absolute;top:8px;right:8px;background:rgba(255,39,64,.85);color:#fff;font-family:var(--font-mono);font-size:8px;padding:2px 7px;border-radius:10px;letter-spacing:1px;display:flex;align-items:center;gap:4px;z-index:2}
.sensor-live-badge .dot{width:5px;height:5px;background:#fff;border-radius:50%;animation:pulse 1s infinite}
.readout-row{display:flex;gap:8px;margin-top:9px}
.readout{flex:1;background:var(--raised);border:1px solid var(--border);border-radius:var(--r);padding:9px;text-align:center}
.readout b{font-family:var(--font-mono);font-size:18px;color:var(--red-hi);display:block}
.readout span{font-family:var(--font-mono);font-size:8px;color:var(--ink-low);letter-spacing:1px;text-transform:uppercase}
.mini-wave{width:100%;height:44px;background:var(--void);border:1px solid var(--border);border-radius:var(--r);margin-top:8px}
.permission-gate{text-align:center;padding:24px 14px}
.permission-gate svg{width:32px;height:32px;color:var(--ink-low);margin-bottom:10px}
.permission-gate p{font-size:11px;color:var(--ink-low);margin-bottom:12px;line-height:1.6}

/* ── HARDWARE / USB PANEL ── */
.hw-status-strip{display:flex;align-items:center;gap:10px;padding:10px 13px;background:var(--void);border:1px solid var(--border);border-radius:var(--r);margin-bottom:12px}
.hw-dot{width:9px;height:9px;border-radius:50%;background:var(--ink-low);flex-shrink:0}
.hw-dot.connected{background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2s infinite}
.hw-status-text{font-family:var(--font-mono);font-size:11px;color:var(--ink-mid)}
.gsr-graph{width:100%;height:90px;background:var(--void);border:1px solid var(--border);border-radius:var(--r);margin-top:10px}
.code-block{background:#050303;border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-mid);overflow-x:auto;line-height:1.7;white-space:pre}
.code-block .kw{color:var(--red-hi)}
.code-block .cm{color:var(--ink-low)}

/* ── SUE / TECHNIQUE BOX ── */
.tech-box{background:rgba(255,39,64,.04);border:1px solid var(--border);border-radius:var(--r2);padding:15px;margin-bottom:14px}
.tech-title{font-family:var(--font-mono);font-size:10px;color:var(--red-hi);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:11px;display:flex;align-items:center;gap:7px}
.tech-steps{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.tech-step{display:flex;gap:9px;font-size:11.5px;color:var(--ink-mid);line-height:1.5;padding:9px;background:rgba(255,39,64,.03);border-radius:var(--r);border:1px solid var(--border)}
.tech-n{width:19px;height:19px;border:1px solid var(--border-hi);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:9px;color:var(--red-hi);flex-shrink:0}
.tech-step b{color:var(--ink)}

/* ── VERDICT ── */
.verdict{border-radius:var(--r3);padding:26px;text-align:center;margin-bottom:14px;position:relative;overflow:hidden;animation:rise .5s ease forwards}
.verdict::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%,rgba(255,39,64,.14),transparent 70%)}
.verdict.safe{background:rgba(34,197,94,.05);border:1px solid rgba(34,197,94,.25)}
.verdict.warn{background:rgba(245,166,35,.05);border:1px solid rgba(245,166,35,.25)}
.verdict.danger{background:rgba(255,39,64,.06);border:1px solid var(--border-hi)}
.v-mark{font-family:var(--font-display);font-size:52px;line-height:1;margin-bottom:8px;display:block}
.safe .v-mark{color:var(--green)}
.warn .v-mark{color:var(--amber)}
.danger .v-mark{color:var(--red)}
.v-code{font-family:var(--font-mono);font-size:9.5px;letter-spacing:3.5px;text-transform:uppercase;margin-bottom:7px;opacity:.75}
.safe .v-code{color:var(--green)}
.warn .v-code{color:var(--amber)}
.danger .v-code{color:var(--red-hi)}
.v-title{font-family:var(--font-display);font-size:26px;letter-spacing:.5px;margin-bottom:11px}
.safe .v-title{color:var(--green)}
.warn .v-title{color:var(--amber)}
.danger .v-title{color:var(--red-hi);text-shadow:var(--glow-soft)}
.v-body{font-size:12.5px;color:var(--ink-mid);line-height:1.8;max-width:520px;margin:0 auto 16px}
.v-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-width:560px;margin:14px auto;text-align:left}
.v-item{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--r);padding:10px}
.v-item span{font-family:var(--font-mono);font-size:8.5px;color:var(--ink-low);letter-spacing:.6px;text-transform:uppercase;display:block;margin-bottom:5px}
.v-item b{font-family:var(--font-mono);font-size:16px;display:block}
.v-bar{height:2px;border-radius:1px;margin-top:6px}
.v-kpi{display:flex;justify-content:center;gap:22px;padding-top:15px;border-top:1px solid var(--border);margin-top:6px;flex-wrap:wrap}
.vk{text-align:center}
.vk b{font-family:var(--font-display);font-size:24px;display:block;line-height:1}
.vk span{font-family:var(--font-mono);font-size:8px;color:var(--ink-low);letter-spacing:1.5px;text-transform:uppercase;margin-top:4px;display:block}

/* ── RADAR / GAUGE ── */
.radar-wrap{display:flex;flex-direction:column;align-items:center;padding:16px;background:var(--void);border:1px solid var(--border);border-radius:var(--r2)}
.radar-title{font-family:var(--font-mono);font-size:9px;color:var(--ink-low);letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}
.radar-legend{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px;justify-content:center}
.rl{display:flex;align-items:center;gap:5px;font-size:8.5px;color:var(--ink-low);font-family:var(--font-mono)}
.rl-dot{width:6px;height:6px;border-radius:50%}

/* ── AI RESULT ── */
.ai-card{background:rgba(255,39,64,.04);border:1px solid var(--border);border-radius:var(--r2);padding:17px;margin-top:13px}
.ai-head{display:flex;align-items:center;gap:9px;margin-bottom:13px;padding-bottom:11px;border-bottom:1px solid var(--border)}
.ai-title{font-family:var(--font-mono);font-size:10px;color:var(--red-hi);letter-spacing:1.5px;text-transform:uppercase}
.ai-unv{margin-left:auto;font-family:var(--font-mono);font-size:8.5px;color:var(--amber);background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.25);border-radius:10px;padding:2px 8px}
.ai-sec{margin-bottom:13px}
.ai-sec h4{font-family:var(--font-mono);font-size:9px;color:var(--ink-low);letter-spacing:1.3px;text-transform:uppercase;margin-bottom:7px;font-weight:400}
.ai-contra{background:rgba(255,39,64,.06);border-left:2px solid var(--red);padding:8px 11px;margin-bottom:6px;font-size:11.5px;border-radius:0 var(--r) var(--r) 0}
.ai-rich-row{display:flex;gap:8px;padding:5px 0;font-size:11.5px;border-bottom:1px solid rgba(255,255,255,.03)}
.ai-fup{padding:6px 0;font-size:12px;border-bottom:1px dashed rgba(255,255,255,.05);display:flex;gap:7px}
.ai-body{font-size:12.5px;color:var(--ink);line-height:1.7}
.caveat{background:rgba(245,166,35,.04);border:1px solid rgba(245,166,35,.16);border-radius:var(--r);padding:9px 12px;font-size:10.5px;color:var(--ink-low);line-height:1.6;margin-top:11px;display:flex;gap:8px}

/* ── SIDEBAR ── */
.scard{background:var(--panel);border:1px solid var(--border);border-radius:var(--r2);padding:15px}
.scard-title{font-family:var(--font-mono);font-size:9px;color:var(--ink-low);letter-spacing:2px;text-transform:uppercase;margin-bottom:13px;display:flex;align-items:center;gap:7px}
.ring-wrap{position:relative;width:96px;height:96px;margin:0 auto 15px}
.ring-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.ring-val{font-family:var(--font-display);font-size:24px;color:var(--red);line-height:1;display:block}
.ring-label{font-family:var(--font-mono);font-size:7px;color:var(--ink-low);letter-spacing:1px;display:block}
.mini-m{padding:8px 10px;background:var(--void);border-radius:var(--r);border:1px solid var(--border);margin-bottom:7px}
.mini-m:last-child{margin-bottom:0}
.mini-head{display:flex;justify-content:space-between;font-size:9px;font-family:var(--font-mono);color:var(--ink-low);margin-bottom:5px}
.mini-track{height:3px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden}
.mini-fill{height:100%;border-radius:2px;transition:width .7s;background:var(--red)}
.hist-item{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--void);border:1px solid var(--border);border-radius:var(--r);font-size:10.5px;margin-bottom:6px}
.hist-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.hist-label{flex:1;color:var(--ink-mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-meta{font-family:var(--font-mono);font-size:9px;color:var(--ink-low)}

/* ── REFS ── */
.refs-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--font-mono);font-size:9px;color:var(--ink-low);letter-spacing:1.5px;text-transform:uppercase;user-select:none;padding:9px 0}
.refs-body{display:none;margin-top:7px;padding-top:7px;border-top:1px solid var(--border)}
.refs-body.open{display:block}
.ref{font-size:10.5px;color:var(--ink-low);line-height:1.7;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.03)}
.ref b{color:var(--ink-mid)}
.ref i{color:var(--red-hi);font-style:normal}

/* ── ETHICS ── */
.ethics{background:rgba(245,166,35,.03);border:1px solid rgba(245,166,35,.14);border-radius:var(--r2);padding:13px 15px;display:flex;gap:11px;font-size:11px;color:var(--ink-low);line-height:1.65;margin-bottom:14px}
.ethics b{color:var(--ink)}
.theory{background:rgba(255,39,64,.03);border-left:3px solid var(--red);padding:11px 14px;border-radius:0 var(--r) var(--r) 0;margin:11px 0;font-size:11px;color:var(--ink-low);line-height:1.65;display:flex;gap:9px}
.theory b{color:var(--ink)}

.hidden{display:none!important}
.spin{animation:spin 1s linear infinite}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════════════════════
   MOTION LAYER — entrance choreography + tactile feedback.
   Kept centralized here so the "does it feel animated /
   professional" pass lives in one place.
═══════════════════════════════════════════════════════════ */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a,button,select,input,.cue,.pstep,.prov-btn,.timer-btn{-webkit-tap-highlight-color:transparent}

.phase-view{animation:phaseIn .5s cubic-bezier(.16,1,.3,1)}
@keyframes phaseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.phase-view>.card,.phase-view>.ethics,.phase-view>.tech-box{animation:cardIn .55s cubic-bezier(.16,1,.3,1) backwards}
.phase-view>*:nth-child(1){animation-delay:.02s}
.phase-view>*:nth-child(2){animation-delay:.08s}
.phase-view>*:nth-child(3){animation-delay:.14s}
.phase-view>*:nth-child(4){animation-delay:.20s}
.phase-view>*:nth-child(5){animation-delay:.26s}
.phase-view>*:nth-child(6){animation-delay:.32s}
.phase-view>*:nth-child(n+7){animation-delay:.36s}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}

.card{transition:var(--tr),transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.32),var(--glow-soft)}

.btn{transition:var(--tr),transform .15s cubic-bezier(.4,0,.2,1)}
.btn:active{transform:scale(.96)}
.btn-main:active{transform:scale(.96) translateY(0)}
.cue:active{transform:scale(.97)}
.prov-btn:active{transform:scale(.95)}
.pstep:active{transform:scale(.95)}
.sw:active .sw-track::before{transform:scale(.9) translateX(var(--tx,0))}

.v-mark{animation:markPop .65s cubic-bezier(.34,1.56,.64,1) .15s backwards}
@keyframes markPop{0%{transform:scale(0) rotate(-20deg);opacity:0}70%{transform:scale(1.12) rotate(3deg)}100%{transform:scale(1) rotate(0);opacity:1}}
.v-item{animation:cardIn .4s cubic-bezier(.16,1,.3,1) backwards}
.v-item:nth-child(1){animation-delay:.3s}.v-item:nth-child(2){animation-delay:.36s}
.v-item:nth-child(3){animation-delay:.42s}.v-item:nth-child(4){animation-delay:.48s}
.v-item:nth-child(5){animation-delay:.54s}.v-item:nth-child(6){animation-delay:.6s}
.vk{animation:cardIn .4s cubic-bezier(.16,1,.3,1) .6s backwards}

.step,.cue{animation:rise .4s cubic-bezier(.16,1,.3,1) backwards}
.hist-item{animation:cardIn .35s cubic-bezier(.16,1,.3,1) backwards}

.mfill,.mini-fill,.nbar-fill,.lbar-fill{transition:width .8s cubic-bezier(.22,1,.36,1)}

.logo-mark{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.logo:hover .logo-mark{transform:rotate(-12deg) scale(1.06)}

/* ── FOOTER ── */
.footer{background:rgba(10,6,7,.96);border-top:1px solid var(--border);padding:18px 22px;text-align:center}
.footer-text{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-low);line-height:2;letter-spacing:.4px}
.footer-text b{color:var(--red)}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — tuned at 940 / 720 / 600 / 420px. Interactive
   controls keep >=40px touch targets throughout.
═══════════════════════════════════════════════════════════ */
@media(max-width:940px){
  .main{grid-template-columns:1fr}
  .sidebar{display:none}
  .cue-grid{grid-template-columns:1fr}
  .tech-steps{grid-template-columns:1fr}
  .v-grid{grid-template-columns:repeat(2,1fr)}
  .nlp-stats{grid-template-columns:repeat(2,1fr)}
  .prov-grid{grid-template-columns:repeat(3,1fr)}
  .header-stats{display:none}
}
@media(max-width:600px){
  .header{padding:0 14px;gap:10px}
  .main{padding:12px}
  .card{padding:15px}
  .v-kpi{gap:12px}
  .phase-nav{padding:6px 10px}
  .readout-row{flex-direction:column}
}
@media(max-width:420px){
  .header{padding:0 10px;gap:6px;height:56px}
  .logo-mark{width:28px;height:28px}
  .logo-mark svg{width:14px;height:14px}
  .logo-text{font-size:16px}
  .lang-select{font-size:9px;padding:5px 5px;max-width:78px;letter-spacing:0}
  .mode-badge{font-size:7.5px;padding:4px 7px;gap:4px;letter-spacing:.6px}
  .mode-dot{width:5px;height:5px}
  .phase-nav{padding:5px 8px;gap:2px}
  .pstep{padding:7px 10px;gap:5px}
  .pstep .pn{width:19px;height:19px;font-size:8.5px}
  .pstep .pt{font-size:8.5px;letter-spacing:.8px}
  .shead{gap:8px}
  .snum{font-size:26px}
  .stitle{font-size:16px}
  .card{padding:13px}
  .chead{gap:8px}
  .cicon{width:32px;height:32px}
  .v-title{font-size:20px}
  .v-mark{font-size:40px}
  .verdict{padding:18px}
  .v-grid{grid-template-columns:1fr 1fr;gap:7px}
  .btn{padding:9px 15px;font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}