/* ═══════════════════════════════════════════════════════════════════════════
   SCAN STATION — operator UI (ported from scratchpad/scan-station.html mockup).
   EVERY rule is scoped under `.ssx` (the pane root) so nothing leaks into the rest
   of the admin panel. The only global rules are `body.ss-booth …` — the chrome-strip
   for Booth (kiosk) mode — which do nothing unless that class is present.
   Theme is LOCAL to `.ssx` (data-theme on the root element), independent of the app.
   Fonts fall back to system stacks (CSP blocks Google Fonts on file://).
   ═══════════════════════════════════════════════════════════════════════════ */

.ssx{
  /* DARK-ONLY: the Scan Station is dark-only now (theme toggle removed). These base tokens are the
     dark palette so it renders dark regardless of data-theme / system. The original LIGHT tokens are
     kept commented below so light mode can be restored later. */
  --bg:#0a0d14; --bg-2:#0d111b; --grain:0.05;
  --panel:#171826; --panel-2:#1f2133; --panel-3:#12131f;
  --hair:rgba(255,255,255,.08); --hair-2:rgba(255,255,255,.15);
  --ink:#ffffff; --ink-2:rgba(255,255,255,.62); --ink-3:rgba(255,255,255,.40);
  --accent:#d14af2; --accent-ink:#26082f; --accent-soft:rgba(209,74,242,.15);
  --fire:#FF6A3C; --fire-soft:rgba(255,106,60,.18);
  --online:#3FD07A; --warn:#F5B640; --offline:#F0504A;
  --feed-0:#080b12; --feed-1:#141636; --feed-warm:#e0a066;
  --shadow:0 1px 0 rgba(255,255,255,.03),0 12px 36px rgba(0,0,0,.6);
  --glow-accent:0 0 30px rgba(209,74,242,.16);
  --track:#0d111b; --thumb:#ffffff;
  /* LIGHT theme tokens (commented — dark-only for now):
  --bg:#EEF0F5; --bg-2:#E3E6EE; --grain:0.02;
  --panel:#FFFFFF; --panel-2:#F4F5F9; --panel-3:#ECEEF4;
  --hair:rgba(20,20,40,.10); --hair-2:rgba(20,20,40,.18);
  --ink:#171826; --ink-2:rgba(23,24,38,.66); --ink-3:rgba(23,24,38,.44);
  --accent:#B02FD0; --accent-ink:#ffffff; --accent-soft:rgba(176,47,208,.12);
  --fire:#DE4A22; --fire-soft:rgba(222,74,34,.14);
  --online:#12965A; --warn:#B67C0A; --offline:#CE382F;
  --feed-0:#0c1620; --feed-1:#12212e; --feed-warm:#c98a52;
  --shadow:0 1px 2px rgba(20,40,60,.08),0 8px 26px rgba(20,40,60,.10);
  --glow-accent:0 0 0 rgba(0,0,0,0);
  --track:#DCE3EA; --thumb:#FFFFFF; */
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,"SF Mono","IBM Plex Mono",monospace;
  --font-hud:"Saira Semi Condensed","Arial Narrow",system-ui,sans-serif;

  position:relative; flex:1; min-width:0; height:100%;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme:dark){
  .ssx:not([data-theme="light"]){
    --bg:#0a0d14; --bg-2:#0d111b; --grain:0.05;
    --panel:#171826; --panel-2:#1f2133; --panel-3:#12131f;
    --hair:rgba(255,255,255,.08); --hair-2:rgba(255,255,255,.15);
    --ink:#ffffff; --ink-2:rgba(255,255,255,.62); --ink-3:rgba(255,255,255,.40);
    --accent:#d14af2; --accent-ink:#26082f; --accent-soft:rgba(209,74,242,.15);
    --fire:#FF6A3C; --fire-soft:rgba(255,106,60,.18);
    --online:#3FD07A; --warn:#F5B640; --offline:#F0504A;
    --feed-0:#080b12; --feed-1:#141636; --feed-warm:#e0a066;
    --shadow:0 1px 0 rgba(255,255,255,.03),0 12px 36px rgba(0,0,0,.6);
    --glow-accent:0 0 30px rgba(209,74,242,.16);
    --track:#0d111b; --thumb:#ffffff;
  }
}
.ssx[data-theme="dark"]{
  --bg:#0a0d14; --bg-2:#0d111b; --grain:0.05;
  --panel:#171826; --panel-2:#1f2133; --panel-3:#12131f;
  --hair:rgba(255,255,255,.08); --hair-2:rgba(255,255,255,.15);
  --ink:#ffffff; --ink-2:rgba(255,255,255,.62); --ink-3:rgba(255,255,255,.40);
  --accent:#d14af2; --accent-ink:#26082f; --accent-soft:rgba(209,74,242,.15);
  --fire:#FF6A3C; --fire-soft:rgba(255,106,60,.18);
  --online:#3FD07A; --warn:#F5B640; --offline:#F0504A;
  --feed-0:#080b12; --feed-1:#141636; --feed-warm:#e0a066;
  --shadow:0 1px 0 rgba(255,255,255,.03),0 12px 36px rgba(0,0,0,.6);
  --glow-accent:0 0 30px rgba(209,74,242,.16);
  --track:#0d111b; --thumb:#ffffff;
}

.ssx *{box-sizing:border-box}
.ssx .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.ssx .hud{font-family:var(--font-hud)}
.ssx h1,.ssx h2,.ssx h3{margin:0;font-weight:600}
.ssx button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
.ssx ::selection{background:var(--accent-soft)}
.ssx :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* grain overlay — scoped to the pane */
.ssx::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:9999;
  opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- APP SHELL ---- */
.ssx .app{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:
  radial-gradient(1200px 600px at 15% -10%,var(--accent-soft),transparent 60%),
  radial-gradient(900px 500px at 100% 120%,var(--fire-soft),transparent 55%),
  var(--bg);
}

/* ---- TOP STATUS BAR ---- (single row, never wraps; telemetry scrolls / sheds on narrow) */
.ssx .topbar{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;flex-wrap:nowrap;overflow:hidden;
  padding:0 14px;height:56px;border-bottom:1px solid var(--hair);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));z-index:80;
}
.ssx .brand{display:flex;align-items:center;gap:11px;padding-right:14px;border-right:1px solid var(--hair);flex:0 0 auto;white-space:nowrap}
.ssx .brand .mark{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  background:radial-gradient(circle at 30% 25%,var(--accent),var(--accent-ink));
  box-shadow:var(--glow-accent),inset 0 0 0 1px rgba(255,255,255,.14);position:relative;
}
.ssx .brand .mark::before{content:"";position:absolute;width:11px;height:11px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);box-shadow:0 0 0 3px rgba(0,0,0,.25) inset}
.ssx .brand .mark::after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff}
.ssx .brand h1{font-family:var(--font-hud);font-weight:600;font-size:17px;letter-spacing:.5px;line-height:1;white-space:nowrap}
.ssx .brand .sub{font-size:10px;letter-spacing:2px;color:var(--ink-3);text-transform:uppercase;font-family:var(--font-mono);margin-top:2px;white-space:nowrap}
.ssx .viewtabs{flex:0 0 auto}

.ssx .telemetry{display:flex;align-items:stretch;gap:0;margin-left:auto;height:100%;min-width:0;flex:0 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.ssx .telemetry::-webkit-scrollbar{height:0;display:none}
.ssx .tel{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 13px;border-left:1px solid var(--hair);flex:0 0 auto;white-space:nowrap}
.ssx .tel .k{font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-3);font-family:var(--font-mono);white-space:nowrap}
.ssx .tel .v{font-family:var(--font-mono);font-size:14px;font-weight:500;letter-spacing:.3px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.ssx .tel .v b{font-weight:600}
.ssx .dotlead{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--online);box-shadow:0 0 8px var(--online)}
.ssx .dotlead.warn{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.ssx .dotlead.off{background:var(--offline);box-shadow:0 0 8px var(--offline)}
/* shed lower-priority telemetry tiles before the bar ever crowds */
@media (max-width:1480px){ .ssx .tel[data-opt="1"]{display:none} }
@media (max-width:1240px){ .ssx .tel[data-opt="2"]{display:none} }
@media (max-width:1080px){ .ssx .brand .sub{display:none} }
/* the kiosk pop-out is full-screen wide → always show everything */
body.ss-booth .ssx .tel[data-opt]{display:flex}

.ssx .tbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--hair);display:grid;place-items:center;
  color:var(--ink-2);background:var(--panel-3);transition:.15s;flex:0 0 auto}
.ssx .tbtn:hover{color:var(--ink);border-color:var(--hair-2);background:var(--panel-2)}
.ssx .tbtn svg{width:16px;height:16px}
/* text+icon toolbar buttons (Booth / Exit Booth) — match the theme button's height & the
   segmented controls' weight, with the icon and label cleanly centered on one row. */
.ssx .ss-booth-btn,.ssx .ss-exit-btn{width:auto;height:34px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--font-hud);font-weight:600;font-size:12px;letter-spacing:.6px;line-height:1}
.ssx .ss-booth-btn svg,.ssx .ss-exit-btn svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7}

/* view tabs */
.ssx .viewtabs{display:flex;gap:4px;padding:4px;border-radius:11px;background:var(--panel-3);border:1px solid var(--hair)}
.ssx .viewtabs button{display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:8px;
  font-family:var(--font-hud);font-weight:600;font-size:13px;letter-spacing:.6px;color:var(--ink-3);transition:.14s}
.ssx .viewtabs button svg{width:15px;height:15px}
.ssx .viewtabs button:hover{color:var(--ink-2)}
.ssx .viewtabs button.on{background:var(--accent);color:#fff;box-shadow:0 2px 12px var(--accent-soft)}

/* ---- STAGE ---- */
.ssx .stage{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 392px}

/* ---- CAMERA WALL ---- */
.ssx .wall-region{position:relative;height:100%;min-height:0;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--hair)}
.ssx .wall-head{flex:0 0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:12px 16px;
  border-bottom:1px solid var(--hair);background:linear-gradient(180deg,var(--panel),transparent)}
.ssx .wall-title{display:flex;align-items:baseline;gap:12px}
.ssx .wall-title h2{font-family:var(--font-hud);font-size:17px;letter-spacing:.4px}
.ssx .wall-title .eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:var(--ink-3);text-transform:uppercase}
.ssx .health{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:20px;
  background:var(--panel-3);border:1px solid var(--hair);font-family:var(--font-mono);font-size:12px}
.ssx .health .barmini{width:54px;height:5px;border-radius:3px;background:var(--track);overflow:hidden}
.ssx .health .barmini i{display:block;height:100%;background:var(--online);box-shadow:0 0 8px var(--online)}
.ssx .wall-tools{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ssx .seg{display:flex;border:1px solid var(--hair);border-radius:9px;overflow:hidden;background:var(--panel-3)}
.ssx .seg button{padding:7px 11px;font-size:11px;letter-spacing:1px;font-family:var(--font-mono);color:var(--ink-3);text-transform:uppercase;border-right:1px solid var(--hair)}
.ssx .seg button:last-child{border-right:0}
.ssx .seg button.on{background:var(--accent-soft);color:var(--accent)}
.ssx .seg.engineseg{width:100%}
.ssx .seg.engineseg button{flex:1;padding:8px 4px;letter-spacing:.3px;font-size:9.5px;white-space:nowrap}

.ssx .wall-scroll{flex:1;overflow:auto;padding:16px 16px 40px;position:relative;background:
  repeating-linear-gradient(90deg,transparent 0 39px,color-mix(in srgb,var(--hair) 30%,transparent) 39px 40px);
  background-attachment:local}
.ssx .wall{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}

/* camera tile */
.ssx .cam{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;border:1px solid var(--hair);
  background:#000;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);transition:transform .12s,border-color .12s,box-shadow .12s}
.ssx .cam:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 22px rgba(0,0,0,.5);transform:translateY(-1px);z-index:2}
.ssx .cam .feed{position:absolute;inset:0;background:
  radial-gradient(70% 90% at var(--fx) var(--fy),color-mix(in srgb,var(--feed-warm) 60%,transparent) 0%,color-mix(in srgb,var(--feed-warm) 12%,transparent) 22%,transparent 46%),
  radial-gradient(140% 120% at 50% -20%,var(--feed-1),var(--feed-0) 70%),var(--feed-0);
  background-size:cover;background-position:center;filter:saturate(1) brightness(calc(.55 + var(--lightlevel,0)*.006))}
.ssx .cam .feed.has-img{filter:none}
/* Cameras are mounted 90° sideways on the poles, so the live preview comes in rotated.
   Rotate the shown image -90° (counter-clockwise) so the subject sits upright. DISPLAY only —
   the scan/reconstruction frames are uprighted separately by the pipeline's frames_upright step.
   The tile/bigfeed containers are a fixed 4/3, so scaling the rotated (now-portrait) layer by
   4/3 refills the box with no gaps or letterboxing. Applies to grid tiles + single + popup. */
.ssx .bigfeed .feed{transform:rotate(-90deg) scale(1.3334);transform-origin:center}
/* Grid tiles now use a real <img> (object-fit:cover) so each frame FILLS the 4/3 box like the single
   view — mounted-portrait cameras get the same -90° upright rotation + 4/3 refill (no narrow strip). */
.ssx .cam .feed img.tileimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transform:rotate(-90deg) scale(1.3334);transform-origin:center;z-index:1}
/* Unused slots (110/113) — intentionally empty, not a failure */
.ssx .cam.unused{opacity:.5;border-style:dashed}
.ssx .cam.unused .feed{filter:brightness(.4) grayscale(1)}
.ssx .cam.unused .subj{display:none}
.ssx .res.unused{color:var(--ink-3);font-style:italic;letter-spacing:.3px}
.ssx .cam .feed::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.16) 2px 3px);mix-blend-mode:multiply;opacity:.5}
.ssx .cam .feed.has-img::before{display:none}
.ssx .cam .feed::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 26px rgba(0,0,0,.7)}
.ssx .cam .subj{position:absolute;left:50%;bottom:-6%;width:34%;height:74%;transform:translateX(-50%);
  background:radial-gradient(50% 40% at 50% 16%,color-mix(in srgb,var(--feed-warm) 55%,#000) 0%,transparent 62%),
   linear-gradient(180deg,color-mix(in srgb,var(--feed-warm) 30%,#000),color-mix(in srgb,var(--feed-warm) 6%,#000));
  border-radius:44% 44% 20% 20%/60% 60% 14% 14%;filter:blur(.4px);opacity:.9}
.ssx .cam .feed.has-img + .subj{display:none}
.ssx .cam .overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:5px 6px;pointer-events:none}
.ssx .cam .row1{display:flex;justify-content:space-between;align-items:flex-start}
.ssx .cam .cid{font-family:var(--font-mono);font-size:9px;letter-spacing:.5px;color:rgba(255,255,255,.82);background:rgba(0,0,0,.42);padding:1px 4px;border-radius:3px}
.ssx .cam .st{width:8px;height:8px;border-radius:50%;background:var(--online);box-shadow:0 0 0 2px rgba(0,0,0,.45),0 0 7px var(--online);animation:ssxpulse 2.4s infinite ease-in-out}
.ssx .cam.unused .st{display:none}   /* empty slots (110/113) are NOT live cameras — never show the green "online" dot */
.ssx .cam .row2{display:flex;justify-content:space-between;align-items:flex-end}
.ssx .cam .res{font-family:var(--font-mono);font-size:8px;color:rgba(255,255,255,.5)}
.ssx .cam .exp{width:22px;height:22px;border-radius:6px;background:rgba(0,0,0,.5);display:grid;place-items:center;opacity:0;transform:scale(.8);transition:.14s;pointer-events:none}
.ssx .cam:hover .exp{opacity:1;transform:scale(1)}
.ssx .cam .exp svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:1.6}
.ssx .cam.off{filter:grayscale(1);cursor:not-allowed}
.ssx .cam.off .feed{filter:brightness(.28) grayscale(1)}
.ssx .cam.off .subj{display:none}
.ssx .cam.off .st{background:var(--offline);box-shadow:0 0 0 2px rgba(0,0,0,.45),0 0 7px var(--offline);animation:none}
.ssx .cam.off::after{content:"SIGNAL LOST";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);font-size:8.5px;letter-spacing:1.5px;color:var(--offline);text-shadow:0 0 8px rgba(0,0,0,.9)}
/* lazy-still spinner + error states */
.ssx .cam.loading::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:ssxspin .7s linear infinite;z-index:4}
.ssx .cam.err{border-color:color-mix(in srgb,var(--offline) 60%,var(--hair))}
.ssx .cam.err .feed{filter:brightness(.4)}
.ssx .cam.err::after{content:"⟳ retry";position:absolute;left:50%;top:56%;transform:translateX(-50%);font-family:var(--font-mono);font-size:8px;letter-spacing:1px;color:var(--offline);background:rgba(0,0,0,.5);padding:1px 5px;border-radius:3px;z-index:4}
.ssx .cam.err::before{content:"!";position:absolute;left:50%;top:34%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--offline);color:#fff;display:grid;place-items:center;font-family:var(--font-hud);font-weight:700;font-size:11px;z-index:4}

@keyframes ssxpulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes ssxsweep{0%{transform:translateY(-100%)}100%{transform:translateY(1000%)}}

.ssx .wall-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:20;mix-blend-mode:screen}
.ssx .wall-flash.fire{animation:ssxflash .5s ease-out}
@keyframes ssxflash{0%{opacity:0}8%{opacity:.9}100%{opacity:0}}

.ssx .capture-band{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);z-index:19;opacity:0;box-shadow:0 0 16px var(--accent)}
.ssx .capturing .capture-band{opacity:1;animation:ssxsweep 1.1s linear infinite}
.ssx .capturing .wall-scroll{filter:brightness(1.08)}

/* ---- big SCAN button ---- */
.ssx .scan-dock{position:absolute;inset:0;z-index:25;pointer-events:none}
.ssx .scan-hero{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:auto;touch-action:none}
.ssx .scan-hero.moved{transform:none}
.ssx .scan-btn{cursor:grab}
.ssx .scan-hero.dragging .scan-btn{cursor:grabbing}
.ssx .scan-reset{display:none;align-items:center;gap:6px;padding:5px 11px;border-radius:9px;border:1px solid var(--hair-2);
  background:color-mix(in srgb,var(--panel) 90%,transparent);box-shadow:var(--shadow);font-family:var(--font-mono);font-size:10px;letter-spacing:.6px;color:var(--ink-2);transition:.13s}
.ssx .scan-reset:hover{color:var(--accent);border-color:var(--accent)}
.ssx .scan-reset svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
.ssx .scan-hero.moved .scan-reset{display:inline-flex}
.ssx .scan-warn{max-width:220px;text-align:center;font-family:var(--font-mono);font-size:11px;line-height:1.4;letter-spacing:.3px;color:var(--offline);background:color-mix(in srgb,var(--offline) 14%,transparent);border:1px solid color-mix(in srgb,var(--offline) 45%,transparent);border-radius:10px;padding:7px 11px}
.ssx .scan-btn.disabled{opacity:.4;pointer-events:none;filter:grayscale(.6)}
.ssx .scan-btn{position:relative;width:100px;height:100px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 84%,#fff 16%),var(--accent) 54%,color-mix(in srgb,var(--accent) 84%,#000 16%));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.38),0 0 0 1px color-mix(in srgb,var(--accent) 50%,#000),0 10px 24px color-mix(in srgb,var(--accent) 26%,transparent),0 12px 28px rgba(0,0,0,.30);
  color:#fff;transition:transform .14s cubic-bezier(.2,.8,.3,1),box-shadow .2s}
.ssx .scan-btn:hover{transform:translateY(-1px) scale(1.03)}
.ssx .scan-btn:active{transform:scale(.975)}
.ssx .scan-btn .lbl{font-family:var(--font-hud);font-weight:700;font-size:22px;letter-spacing:2.5px;line-height:.9;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.ssx .scan-btn .ph{display:none;font-family:var(--font-hud);font-weight:600;font-size:15px;letter-spacing:1px;text-align:center;padding:0 10px}
.ssx .scan-btn .pct{display:none;font-family:var(--font-mono);font-size:20px;font-weight:600;margin-top:2px}
.ssx .scanning .scan-btn{background:radial-gradient(circle at 50% 40%,#1a2430,#0c131b);box-shadow:0 0 0 1px var(--hair-2) inset,0 18px 48px rgba(0,0,0,.6)}
.ssx .scanning .scan-btn .lbl{display:none}
.ssx .scanning .scan-btn .ph,.ssx .scanning .scan-btn .pct{display:block;color:var(--accent)}
.ssx .ring{position:absolute;inset:-10px;transform:rotate(-90deg);pointer-events:none}
.ssx .ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.ssx .ring .bg{stroke:var(--hair)}
.ssx .ring .fg{stroke:var(--accent);stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px var(--accent));transition:stroke-dashoffset .25s}

.ssx .corner{position:absolute;bottom:20px;width:40px;height:40px;border-radius:12px;z-index:26;pointer-events:auto;
  border:1px solid var(--hair);background:color-mix(in srgb,var(--panel) 80%,transparent);display:grid;place-items:center;color:var(--ink-2);transition:.15s}
.ssx .corner:hover{color:var(--ink);border-color:var(--hair-2)}
.ssx .corner svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.ssx .corner.left{left:20px}.ssx .corner.right{right:20px}
.ssx .corner.on{color:var(--accent);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

/* self-timer control */
.ssx .timerctl{display:flex;align-items:center;gap:7px}
.ssx .timerctl .tc-ico{width:15px;height:15px;fill:none;stroke:var(--ink-3);stroke-width:1.7;flex:0 0 auto}
.ssx .timerctl .tc-lbl{font-family:var(--font-mono);font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-3)}

/* countdown overlay */
.ssx .countdown{position:absolute;inset:0;z-index:120;display:none;place-items:center;
  background:radial-gradient(circle at 50% 44%,rgba(6,9,15,.5),rgba(3,5,10,.88))}
.ssx .countdown.show{display:grid;animation:ssxcdin .2s ease}
@keyframes ssxcdin{from{opacity:0}to{opacity:1}}
.ssx .countdown .cd-inner{display:flex;flex-direction:column;align-items:center;gap:14px}
.ssx .countdown .cd-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--accent);text-shadow:0 0 18px var(--accent-soft)}
.ssx .countdown .cd-stack{position:relative;display:grid;place-items:center;width:280px;height:280px}
.ssx .countdown .cd-num{font-family:var(--font-hud);font-weight:700;font-size:168px;line-height:.85;color:#fff;text-shadow:0 0 60px var(--accent),0 8px 40px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
.ssx .countdown .cd-num.pop{animation:ssxcdpop .92s cubic-bezier(.2,.7,.3,1)}
@keyframes ssxcdpop{0%{transform:scale(.55);opacity:0}18%{transform:scale(1.09);opacity:1}72%{transform:scale(1)}100%{transform:scale(.9);opacity:.82}}
.ssx .countdown .cd-ring{position:absolute;inset:0;width:280px;height:280px;transform:rotate(-90deg);pointer-events:none}
.ssx .countdown .cd-ring circle{fill:none;stroke-width:3}
.ssx .countdown .cd-ring .bg{stroke:rgba(255,255,255,.12)}
.ssx .countdown .cd-ring .fg{stroke:var(--accent);stroke-linecap:round;filter:drop-shadow(0 0 8px var(--accent));transition:stroke-dashoffset 1s linear}
.ssx .countdown .cd-hint{font-family:var(--font-mono);font-size:10.5px;letter-spacing:1px;color:rgba(255,255,255,.5)}
.ssx .countdown .cd-cancel{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:11px;border:1px solid var(--hair-2);background:rgba(0,0,0,.4);color:#fff;font-family:var(--font-hud);font-weight:600;font-size:13px;letter-spacing:.6px;transition:.13s}
.ssx .countdown .cd-cancel:hover{border-color:var(--offline);color:var(--offline)}
.ssx .countdown .cd-cancel svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

/* ---- CONTROL DOCK ---- */
.ssx .dock{min-width:0;height:100%;overflow-y:auto;overflow-x:hidden;padding:14px 14px 48px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,var(--panel-3),var(--bg))}
.ssx #paneScan,.ssx #paneDiag{display:flex;flex-direction:column;gap:12px}
.ssx [hidden]{display:none!important}
.ssx .card{border:1px solid var(--hair);border-radius:13px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.ssx .card-h{display:flex;align-items:center;gap:9px;padding:11px 14px 9px;border-bottom:1px solid var(--hair)}
.ssx .card-h .tag{font-family:var(--font-hud);font-weight:600;font-size:13px;letter-spacing:1.5px;text-transform:uppercase}
.ssx .card-h .idx{font-family:var(--font-mono);font-size:10px;color:var(--accent);letter-spacing:1px}
.ssx .card-h .r{margin-left:auto;display:flex;gap:6px;align-items:center}
.ssx .card-b{padding:13px 14px}
.ssx .hint{font-size:11px;color:var(--ink-3);font-family:var(--font-mono);letter-spacing:.3px}

.ssx .field{display:flex;flex-direction:column;gap:5px;flex:1}
.ssx .field label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-3)}
.ssx .sel{position:relative}
.ssx .sel select{width:100%;appearance:none;padding:9px 30px 9px 11px;border-radius:9px;border:1px solid var(--hair);background:var(--panel-2);color:var(--ink);font-family:var(--font-sans);font-size:13px;font-weight:500;transition:.15s}
.ssx .sel select:hover{border-color:var(--hair-2)}
.ssx .sel::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.ssx .iconbtn{width:37px;height:37px;flex:0 0 auto;border-radius:9px;border:1px solid var(--hair);background:var(--panel-2);display:grid;place-items:center;color:var(--ink-2);transition:.15s}
.ssx .iconbtn:hover{color:var(--accent);border-color:var(--accent)}
.ssx .iconbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.ssx .iconbtn.spin svg{animation:ssxspin .7s linear}
@keyframes ssxspin{to{transform:rotate(360deg)}}

/* scan-type matrix */
.ssx .grouphelp{margin:0 0 7px}
.ssx .matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.ssx .matrix.acc{margin-top:7px}
.ssx .ptype{position:relative;border:1px solid var(--hair);border-radius:10px;background:var(--panel-2);padding:10px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:5px;transition:.13s;min-height:80px;justify-content:flex-start}
.ssx .ptype:hover{border-color:var(--hair-2);background:var(--panel-3)}
.ssx .ptype.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
.ssx .ptype svg{width:20px;height:20px;fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ssx .ptype.on svg{stroke:var(--accent)}
.ssx .ptype .name{font-family:var(--font-hud);font-weight:600;font-size:11.5px;line-height:1.06;letter-spacing:.2px;text-align:center;color:var(--ink)}
.ssx .ptype .code{font-family:var(--font-mono);font-size:8px;font-weight:500;letter-spacing:1.5px;color:var(--ink-3);margin-top:auto}
.ssx .ptype.on .code{color:var(--accent)}
.ssx .ptype .cnt{position:absolute;top:-6px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--panel);border:1px solid var(--hair);font-family:var(--font-mono);font-size:9px;font-weight:600;display:grid;place-items:center;color:var(--ink-2)}
.ssx .ptype.on .cnt{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* subject color chips */
.ssx .chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ssx .chip{border:1px solid var(--hair);border-radius:11px;background:var(--panel-2);padding:11px 8px 9px;display:flex;flex-direction:column;align-items:center;gap:7px;transition:.13s}
.ssx .chip:hover{border-color:var(--hair-2)}
.ssx .chip.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:var(--accent-soft)}
.ssx .chip .fig{width:30px;height:38px;display:grid;place-items:end center}
.ssx .chip .fig svg{width:24px;height:34px}
.ssx .chip .nm{font-family:var(--font-hud);font-weight:600;font-size:12px;letter-spacing:.6px}
.ssx .chip .ev{font-family:var(--font-mono);font-size:9px;color:var(--ink-3)}
.ssx .chip.on .ev{color:var(--accent)}

/* projection toggle row */
.ssx .togrow{display:flex;align-items:center;gap:12px}
.ssx .togrow .txt{flex:1}
.ssx .togrow .txt .t{font-family:var(--font-hud);font-weight:600;font-size:13px;letter-spacing:.5px}
.ssx .togrow .txt .d{font-size:11px;color:var(--ink-3);font-family:var(--font-mono);margin-top:2px}
.ssx .toggle{width:50px;height:28px;border-radius:16px;background:var(--track);border:1px solid var(--hair);position:relative;transition:.18s;flex:0 0 auto}
.ssx .toggle i{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--thumb);transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.ssx .toggle.on{background:var(--accent);border-color:var(--accent)}
.ssx .toggle.on i{left:24px;background:#fff}

/* levers */
.ssx .lightbank{display:flex;gap:14px}
.ssx .vlever{flex:0 0 auto;width:74px;display:flex;flex-direction:column;align-items:center;gap:8px}
.ssx .vlever .lv-vtrack{position:relative;width:44px;height:168px;border-radius:12px;background:var(--track);border:1px solid var(--hair);overflow:hidden;cursor:ns-resize;touch-action:none}
.ssx .vlever .lv-vtrack .grad{position:absolute;inset:0;background:linear-gradient(0deg,transparent,var(--fire-soft));opacity:.6}
.ssx .vlever .lv-vfill{position:absolute;left:0;right:0;bottom:0;height:0%;background:linear-gradient(0deg,color-mix(in srgb,var(--fire) 70%,#000),var(--fire));box-shadow:0 0 18px var(--fire-soft)}
.ssx .vlever .lv-vtrack .ticks{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 15px,color-mix(in srgb,var(--ink-3) 22%,transparent) 15px 16px)}
.ssx .vlever .lv-vthumb{position:absolute;left:-4px;right:-4px;height:14px;border-radius:5px;background:var(--thumb);box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.2);bottom:0;transform:translateY(50%);display:flex;align-items:center;justify-content:center}
.ssx .vlever .lv-vthumb::before{content:"";width:20px;height:2px;border-radius:2px;background:var(--ink-3)}
.ssx .vlever .vval{font-family:var(--font-mono);font-size:19px;font-weight:600;letter-spacing:.5px}
.ssx .vlever .vlbl{font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;color:var(--ink-3);text-transform:uppercase}
.ssx .lightside{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;justify-content:center}
.ssx .lightside .qbtn{width:100%}
.ssx .qbtn{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 12px;border-radius:9px;border:1px solid var(--hair);background:var(--panel-2);font-family:var(--font-hud);font-weight:600;font-size:12px;letter-spacing:1px;color:var(--ink);transition:.13s;white-space:nowrap;min-width:0}
.ssx .qbtn:hover{border-color:var(--hair-2);background:var(--panel-3)}
.ssx .qbtn.fire{border-color:color-mix(in srgb,var(--fire) 40%,var(--hair));color:var(--fire)}
.ssx .qbtn.fire:hover{background:var(--fire-soft)}
.ssx .qbtn svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7}
.ssx .qbtn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
/* Live "Feed On/Off" switch — ON = green dot + accent border; OFF = muted with a dim dot. */
.ssx .ss-feed-sw{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:9px;border:1px solid color-mix(in srgb,#39d98a 45%,var(--hair));background:var(--panel-2);font-family:var(--font-hud);font-weight:600;font-size:11px;letter-spacing:1px;color:var(--ink);cursor:pointer;transition:.13s;white-space:nowrap;flex:0 0 auto}
.ssx .ss-feed-sw:hover{background:var(--panel-3)}
.ssx .ss-feed-sw .dot{width:9px;height:9px;border-radius:50%;background:#39d98a;box-shadow:0 0 8px #39d98a;flex:0 0 auto;transition:.13s}
.ssx .ss-feed-sw.off{border-color:var(--hair);color:var(--muted)}
.ssx .ss-feed-sw.off .dot{background:var(--muted);box-shadow:none}
/* Single-cam "Grab" button — brand accent (magenta), never the off-brand red/orange fire style.
   Force every state so no inherited/fire rule can tint it red.
   LAYOUT: `.qbtn` sets `min-width:0`, which lets this button collapse to just its padding
   inside the toolbar's grid/flex track (the fr/auto sibling eats the space) — the icon + "Grab"
   label then spill past the button box and off the right edge ("b" cut off). `min-width:max-content`
   pins the button to its natural content width so it can NEVER be squeezed; the toolbar's select
   column absorbs any shortfall instead. Robust in both normal and booth/kiosk mode, at all widths. */
.ssx .qbtn.ss-grab-brand{min-width:max-content;flex:0 0 auto}
.ssx .qbtn.ss-grab-brand,
.ssx .qbtn.ss-grab-brand:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.ssx .qbtn.ss-grab-brand:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.ssx .qbtn.ss-grab-brand svg{stroke:var(--accent)}

.ssx .hlever{display:flex;flex-direction:column;gap:7px;padding:2px 0}
.ssx .hlever+.hlever{margin-top:11px}
.ssx .lv-head{display:flex;justify-content:space-between;align-items:baseline}
.ssx .lv-head .l{font-family:var(--font-mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-2)}
.ssx .lv-head .v{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--ink)}
.ssx .lv-track{position:relative;height:26px;display:flex;align-items:center;cursor:ew-resize;touch-action:none}
.ssx .lv-track .rail{position:absolute;left:0;right:0;height:6px;border-radius:4px;background:var(--track);border:1px solid var(--hair);overflow:hidden}
.ssx .lv-track .rail .fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,#000),var(--accent));box-shadow:0 0 12px var(--accent-soft)}
.ssx .lv-track .lv-thumb{position:absolute;left:0%;width:16px;height:16px;border-radius:50%;background:var(--thumb);transform:translateX(-50%);box-shadow:0 2px 6px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.2),0 0 0 4px var(--accent-soft)}
.ssx .lv-track .lv-thumb::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--accent)}
.ssx .lv-help{font-family:var(--font-mono);font-size:9.5px;line-height:1.45;color:var(--ink-3);letter-spacing:.1px;margin-top:1px}

/* histogram */
.ssx .histo{margin-top:12px;border:1px solid var(--hair);border-radius:9px;background:var(--panel-3);padding:9px 10px 7px}
.ssx .histo .hh{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.ssx .histo .hh .t{font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-3)}
.ssx .histo .hh .leg{display:flex;gap:8px;font-family:var(--font-mono);font-size:9px}
.ssx .histo .hh .leg span{display:flex;align-items:center;gap:3px;color:var(--ink-3)}
.ssx .histo .hh .leg i{width:7px;height:7px;border-radius:2px}
.ssx .hcanvas{display:flex;align-items:flex-end;gap:1px;height:52px}
.ssx .hcanvas .b{flex:1;background:var(--accent);border-radius:1px 1px 0 0;opacity:.85;transition:height .4s ease}

.ssx .btnrow{display:flex;gap:8px}
.ssx .btnrow .qbtn{flex:1}

/* pills */
.ssx .pill{font-family:var(--font-mono);font-size:10px;letter-spacing:.5px;padding:3px 9px;border-radius:20px;background:var(--panel-3);border:1px solid var(--hair);color:var(--ink-2)}
.ssx .pill.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);border-color:color-mix(in srgb,var(--warn) 45%,transparent);color:var(--warn)}
.ssx .pill.ok{background:color-mix(in srgb,var(--online) 16%,transparent);border-color:color-mix(in srgb,var(--online) 45%,transparent);color:var(--online)}

/* customer */
.ssx .customer{display:flex;align-items:center;gap:11px}
.ssx .cust-avatar{width:42px;height:42px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;font-family:var(--font-hud);font-weight:600;font-size:17px;color:var(--ink-3);background:var(--panel-3);border:1px solid var(--hair)}
.ssx .cust-avatar.set{background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000));color:#fff;border-color:transparent;box-shadow:var(--glow-accent)}
.ssx .cust-info{min-width:0}
.ssx .cust-name{font-family:var(--font-hud);font-weight:600;font-size:14.5px;letter-spacing:.3px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssx .cust-sub{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssx .accentbtn{border-color:var(--accent)!important;color:var(--accent)!important}
.ssx .accentbtn:hover{background:var(--accent-soft)!important}

/* unassigned tray */
.ssx .tray{border-color:color-mix(in srgb,var(--warn) 35%,var(--hair))}
.ssx .uitem{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;border:1px solid var(--hair);background:var(--panel-2)}
.ssx .uitem+.uitem{margin-top:7px}
.ssx .uitem .uinfo{flex:1;min-width:0}
.ssx .uitem .uinfo .un{font-family:var(--font-hud);font-weight:600;font-size:12.5px;color:var(--ink)}
.ssx .uitem .uinfo .us{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-3)}
.ssx .uitem .uassign{flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:7px 10px;border-radius:8px;background:var(--accent);color:#fff;font-family:var(--font-hud);font-weight:600;font-size:11px;letter-spacing:.4px;transition:.13s}
.ssx .uitem .uassign:hover{filter:brightness(1.1)}
.ssx .uitem .uassign svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.ssx .uitem .uthumb{flex:0 0 auto;width:44px;height:44px;border-radius:9px;overflow:hidden;background:var(--panel-3);border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;color:var(--ink-3)}
.ssx .uitem .uthumb img{width:100%;height:100%;object-fit:cover;display:block}
.ssx .uitem .uthumb svg{width:20px;height:20px}
.ssx .uitem .udel{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--panel-3);border:1px solid var(--hair);color:var(--ink-3);transition:.13s}
.ssx .uitem .udel:hover{background:color-mix(in srgb,var(--fire,#e5484d) 16%,var(--panel-3));border-color:color-mix(in srgb,var(--fire,#e5484d) 45%,var(--hair));color:var(--fire,#e5484d)}
.ssx .uitem .udel svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ssx .uclear{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3);padding:4px 8px;border-radius:7px;border:1px solid var(--hair);background:var(--panel-3);transition:.13s}
.ssx .uclear:hover{color:var(--fire,#e5484d);border-color:color-mix(in srgb,var(--fire,#e5484d) 45%,var(--hair))}
.ssx .qualrow{margin-top:9px}
.ssx .qualrow[hidden]{display:none}

/* contact sheet */
.ssx .sheet{position:absolute;left:16px;right:16px;bottom:16px;z-index:30;border:1px solid var(--accent);border-radius:14px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:0 30px 80px rgba(0,0,0,.6);transform:translateY(140%);transition:transform .35s cubic-bezier(.2,.9,.25,1);overflow:hidden}
.ssx .sheet.up{transform:translateY(0)}
.ssx .sheet-h{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--hair)}
.ssx .sheet-h .t{font-family:var(--font-hud);font-weight:600;font-size:15px;letter-spacing:.5px}
.ssx .sheet-h .meta2{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);display:flex;gap:14px}
.ssx .sheet-h .meta2 b{color:var(--online);font-weight:500}
.ssx .sheet-body{padding:14px 16px;max-height:200px;overflow:auto}
.ssx .sheet-foot{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--hair);background:var(--panel-2)}
.ssx .sf-status{flex:1;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.ssx .sf-status b{color:var(--ink)}
.ssx .sf-status .di{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.ssx .sf-status .di.spin{width:11px;height:11px;border:2px solid var(--warn);border-top-color:transparent;background:none;animation:ssxspin .7s linear infinite}
.ssx .sf-assign.busy{opacity:.72;pointer-events:none}
.ssx .sf-assign{display:flex;align-items:center;gap:7px;padding:9px 15px;border-radius:9px;background:var(--accent);color:#fff;font-family:var(--font-hud);font-weight:600;font-size:12.5px;letter-spacing:.5px;transition:.13s}
.ssx .sf-assign:hover{filter:brightness(1.12)}
.ssx .sf-assign.done{background:var(--panel-3);color:var(--online);border:1px solid color-mix(in srgb,var(--online) 40%,transparent)}
.ssx .sf-assign svg{width:15px;height:15px}

/* first-run hint */
.ssx .firstrun{position:absolute;left:50%;bottom:176px;transform:translateX(-50%);z-index:40;max-width:320px;text-align:center;padding:13px 16px;border-radius:13px;background:var(--panel);border:1px solid var(--accent);box-shadow:0 20px 54px rgba(0,0,0,.5),var(--glow-accent);font-size:12.5px;color:var(--ink-2);line-height:1.55}
.ssx .firstrun b{color:var(--ink);font-family:var(--font-hud);font-weight:600;letter-spacing:.3px;font-size:14px}
.ssx .firstrun .kbd2{font-family:var(--font-mono);font-size:10px;padding:1px 6px;border-radius:5px;background:var(--panel-3);border:1px solid var(--hair);color:var(--ink)}
.ssx .firstrun::after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%) rotate(45deg);width:14px;height:14px;background:var(--panel);border-right:1px solid var(--accent);border-bottom:1px solid var(--accent)}
.ssx .firstrun button{display:block;margin:11px auto 0;padding:6px 18px;border-radius:8px;background:var(--accent);color:#fff;font-family:var(--font-hud);font-weight:600;font-size:12px;letter-spacing:.5px}
.ssx .firstrun.hide{opacity:0;pointer-events:none;transition:.4s;transform:translateX(-50%) translateY(6px)}

/* help popover */
.ssx .help-pop{position:absolute;right:20px;bottom:70px;width:270px;z-index:60;border:1px solid var(--hair-2);border-radius:13px;background:var(--panel);box-shadow:0 24px 60px rgba(0,0,0,.5);padding:14px;opacity:0;pointer-events:none;transform:translateY(8px);transition:.18s}
.ssx .help-pop.open{opacity:1;pointer-events:auto;transform:none}
.ssx .help-pop h3{font-family:var(--font-hud);font-size:14px;letter-spacing:.5px;margin-bottom:10px}
.ssx .help-pop .li{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:12px;color:var(--ink-2);font-family:var(--font-mono)}
.ssx .help-pop .li i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.ssx .help-pop .kbd{margin-left:auto;font-size:10px;padding:2px 6px;border-radius:5px;background:var(--panel-3);border:1px solid var(--hair);color:var(--ink-3)}
.ssx .divide{height:1px;background:var(--hair)}

/* DIAGNOSTICS */
.ssx .diagbanner{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--panel)),var(--panel));border-color:color-mix(in srgb,var(--accent) 30%,var(--hair))}
.ssx .diag-intro{font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.ssx .diag-intro b{color:var(--accent);font-family:var(--font-hud);letter-spacing:.5px}
.ssx .testbtn{width:100%;display:flex;align-items:center;gap:13px;padding:15px;border-radius:12px;text-align:left;background:linear-gradient(135deg,color-mix(in srgb,var(--online) 20%,var(--panel-2)),var(--panel-2));border:1px solid color-mix(in srgb,var(--online) 40%,var(--hair));transition:.14s}
.ssx .testbtn:hover{border-color:var(--online);box-shadow:0 0 0 1px var(--online),0 10px 30px rgba(0,0,0,.35)}
.ssx .testbtn .tb-ico{width:40px;height:40px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;background:var(--online);color:#04120a}
.ssx .testbtn .tb-ico svg{width:22px;height:22px}
.ssx .testbtn .tb-txt{display:flex;flex-direction:column;gap:2px}
.ssx .testbtn .tb-txt b{font-family:var(--font-hud);font-weight:600;font-size:16px;letter-spacing:.5px;color:var(--ink)}
.ssx .testbtn .tb-txt i{font-style:normal;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3)}
.ssx .testbtn.running{pointer-events:none;opacity:.85}
.ssx .testsheet{margin-top:12px;border:1px solid var(--hair);border-radius:11px;overflow:hidden;background:var(--panel-3)}
.ssx .ts-head{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--hair)}
.ssx .verdict{font-family:var(--font-hud);font-weight:700;font-size:13px;letter-spacing:1.5px;padding:3px 11px;border-radius:6px}
.ssx .verdict.ok{background:color-mix(in srgb,var(--online) 20%,transparent);color:var(--online)}
.ssx .verdict.fail{background:color-mix(in srgb,var(--offline) 20%,transparent);color:var(--offline)}
/* Self-test result: per-camera got/missing map + captured-frame thumbnail gallery */
.ssx .ts-body:empty{display:none}
.ssx .ts-sec{padding:11px 12px;border-top:1px solid var(--hair)}
.ssx .ts-sec:first-child{border-top:0}
.ssx .ts-lbl{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.ssx .ts-count{display:flex;align-items:center;gap:6px;letter-spacing:.5px;text-transform:none;color:var(--ink-2)}
.ssx .ts-count .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.ssx .ts-count .dot.got{background:var(--online);box-shadow:0 0 6px var(--online)}
.ssx .ts-count .dot.miss{background:var(--offline);box-shadow:0 0 6px var(--offline);margin-left:6px}
.ssx .ts-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:3px}
.ssx .ts-cell{font-family:var(--font-mono);font-size:9px;line-height:1;padding:5px 2px;border-radius:4px;text-align:center;border:1px solid transparent;cursor:default;user-select:none}
.ssx .ts-cell.got{background:color-mix(in srgb,var(--online) 22%,var(--panel-2));color:var(--online);border-color:color-mix(in srgb,var(--online) 40%,transparent)}
.ssx .ts-cell.miss{background:color-mix(in srgb,var(--offline) 16%,var(--panel-2));color:color-mix(in srgb,var(--offline) 80%,var(--ink-3));border-color:color-mix(in srgb,var(--offline) 34%,transparent)}
.ssx .ts-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:7px}
.ssx .ts-thumb{margin:0;border:1px solid var(--hair);border-radius:8px;overflow:hidden;background:var(--panel-2);cursor:pointer;transition:.12s}
.ssx .ts-thumb:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.ssx .ts-thumb img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#000}
.ssx .ts-thumb figcaption{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.5px;text-align:center;color:var(--ink-3);padding:3px 2px}
.ssx .ts-empty{font-size:12px;color:var(--ink-3);padding:6px 2px}
.ssx .healthgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
/* Roster tab — per-camera health cards */
.ssx .ss-rostergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:7px}
.ssx .rcam{border:1px solid var(--hair);border-radius:10px;background:var(--panel-2);padding:8px 9px;display:flex;flex-direction:column;gap:6px}
.ssx .rcam.low{border-color:color-mix(in srgb,var(--offline) 55%,var(--hair));background:color-mix(in srgb,var(--offline) 9%,var(--panel-2))}
.ssx .rc-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ssx .rc-id{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.5px;color:var(--ink)}
.ssx .rc-pp{font-family:var(--font-mono);font-size:9px;color:var(--ink-3)}
.ssx .rc-scans{font-size:19px;font-weight:600;line-height:1;color:var(--online);display:flex;align-items:baseline;gap:5px}
.ssx .rc-scans.warn{color:var(--offline)}
.ssx .rc-scans span{font-family:var(--font-mono);font-size:8px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3);font-weight:400}
.ssx .rc-stats{display:flex;gap:8px;font-family:var(--font-mono);font-size:10px;color:var(--ink-2)}
.ssx .rc-stats .warn{color:var(--offline);font-weight:600}
.ssx .hstat{border:1px solid var(--hair);border-radius:10px;background:var(--panel-2);padding:11px 6px;text-align:center}
.ssx .hstat .hv{font-size:22px;font-weight:600;line-height:1}
.ssx .hstat .hk{font-family:var(--font-mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-3);margin-top:5px}
.ssx .offrow{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;border:1px solid color-mix(in srgb,var(--offline) 30%,var(--hair));background:color-mix(in srgb,var(--offline) 8%,var(--panel-2))}
.ssx .offrow+.offrow{margin-top:6px}
.ssx .offrow .od{width:8px;height:8px;border-radius:50%;background:var(--offline);box-shadow:0 0 8px var(--offline)}
.ssx .offrow .oid{font-family:var(--font-mono);font-size:12px;color:var(--ink)}
.ssx .offrow .ol{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);margin-left:auto}
.ssx .console{height:180px;overflow:auto;border-radius:9px;background:#05070c;border:1px solid var(--hair);padding:10px 11px;font-family:var(--font-mono);font-size:11px;line-height:1.7;display:flex;flex-direction:column;gap:1px}
.ssx .console .ln{display:flex;gap:9px;white-space:nowrap}
.ssx .console .ln .ts{color:rgba(255,255,255,.35);flex:0 0 auto}
.ssx .console .ln .mg{color:rgba(255,255,255,.82)}
.ssx .console .ln.ok .mg{color:var(--online)}
.ssx .console .ln.warn .mg{color:var(--warn)}
.ssx .console .ln.err .mg{color:var(--offline)}
.ssx .console .ln.acc .mg{color:var(--accent)}
.ssx .wall.diag .cam.off{outline:2px solid var(--offline);outline-offset:-2px}

/* ---- CAMERA MODAL / USER PICKER (rendered inside .ssx) ---- */
.ssx .scrim{position:absolute;inset:0;z-index:200;background:rgba(3,6,10,.72);display:grid;place-items:center;opacity:0;pointer-events:none;transition:.2s}
.ssx .scrim.open{opacity:1;pointer-events:auto}
.ssx .dialog{width:min(940px,94%);max-height:92%;border:1px solid var(--hair-2);border-radius:16px;overflow:hidden;background:var(--panel);box-shadow:0 40px 120px rgba(0,0,0,.7);transform:scale(.97);transition:.2s;display:flex;flex-direction:column}
.ssx .scrim.open .dialog{transform:scale(1)}
.ssx .dlg-head{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--hair);background:var(--panel-2)}
.ssx .dlg-head .cid2{font-family:var(--font-hud);font-weight:600;font-size:18px;letter-spacing:.5px}
.ssx .dlg-head .badge{font-family:var(--font-mono);font-size:10px;letter-spacing:1px;padding:3px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent)}
.ssx .dlg-head .nav{margin-left:auto;display:flex;gap:6px}
.ssx .dlg-body{display:grid;grid-template-columns:1.4fr 1fr;min-height:0;overflow:auto}
.ssx .bigfeed{position:relative;aspect-ratio:4/3;background:#000;border-right:1px solid var(--hair);overflow:hidden}
.ssx .bigfeed .feed{position:absolute;inset:0;background-size:cover;background-position:center}
.ssx .bigfeed .recdot{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:#fff;background:rgba(0,0,0,.4);padding:4px 9px;border-radius:20px}
.ssx .bigfeed .recdot i{width:8px;height:8px;border-radius:50%;background:var(--online);box-shadow:0 0 8px var(--online);animation:ssxpulse 2s infinite}
.ssx .focusbox{position:absolute;left:50%;top:50%;width:34%;height:44%;transform:translate(-50%,-50%);border:1.5px solid var(--accent);border-radius:6px;opacity:0;transition:.2s}
.ssx .focusbox.show{opacity:.9;animation:ssxfocuspulse 1s ease}
@keyframes ssxfocuspulse{0%{transform:translate(-50%,-50%) scale(1.15)}100%{transform:translate(-50%,-50%) scale(1)}}
.ssx .dlg-side{padding:15px;display:flex;flex-direction:column;gap:13px;overflow:auto}
.ssx .meta{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px}
.ssx .meta .m .k{font-family:var(--font-mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-3)}
.ssx .meta .m .v{font-family:var(--font-mono);font-size:13px;font-weight:500;margin-top:2px}

.ssx .udialog{width:min(520px,94%)}
.ssx .udialog-body{padding:15px;display:flex;flex-direction:column;gap:12px}
.ssx .usearch{display:flex;align-items:center;gap:9px;padding:0 12px;border-radius:10px;border:1px solid var(--hair);background:var(--panel-2)}
.ssx .usearch svg{width:16px;height:16px;color:var(--ink-3);flex:0 0 auto}
.ssx .usearch input{flex:1;background:none;border:0;outline:none;color:var(--ink);font-family:var(--font-sans);font-size:14px;padding:11px 0}
.ssx .ulist{display:flex;flex-direction:column;gap:5px;max-height:230px;overflow:auto}
.ssx .urow{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;border:1px solid transparent;transition:.12s;cursor:pointer}
.ssx .urow:hover{background:var(--panel-2);border-color:var(--hair)}
.ssx .urow .ua{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;font-family:var(--font-hud);font-weight:600;font-size:14px;color:#fff}
.ssx .urow .un{font-family:var(--font-hud);font-weight:600;font-size:14px;color:var(--ink)}
.ssx .urow .ue{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);margin-top:1px}
.ssx .uadd{border-top:1px solid var(--hair);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.ssx .uadd-h{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-3)}
.ssx .uadd-row input{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--hair);background:var(--panel-2);color:var(--ink);font-family:var(--font-sans);font-size:13.5px;outline:none;transition:.13s}
.ssx .uadd-row input:focus{border-color:var(--accent)}

/* toasts (scoped) */
.ssx .toasts{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.ssx .toast{display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:11px;border:1px solid var(--hair-2);background:var(--panel);box-shadow:0 14px 40px rgba(0,0,0,.5);font-size:13px;font-family:var(--font-sans);animation:ssxtin .25s ease;max-width:80%}
.ssx .toast .di{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);flex:0 0 auto}
.ssx .toast .di.ok{background:var(--online);box-shadow:0 0 8px var(--online)}
.ssx .toast .di.fire{background:var(--fire);box-shadow:0 0 8px var(--fire)}
@keyframes ssxtin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* scrollbars */
.ssx .wall-scroll::-webkit-scrollbar,.ssx .dock::-webkit-scrollbar,.ssx .dlg-side::-webkit-scrollbar{width:9px;height:9px}
.ssx .wall-scroll::-webkit-scrollbar-thumb,.ssx .dock::-webkit-scrollbar-thumb,.ssx .dlg-side::-webkit-scrollbar-thumb{background:var(--hair-2);border-radius:6px;border:2px solid transparent;background-clip:padding-box}

/* ---- dual-path transport indicator + concurrency banner ---- */
.ssx .ss-transport{margin-left:0}
.ssx .ss-transport.direct{background:color-mix(in srgb,var(--online) 16%,transparent);border-color:color-mix(in srgb,var(--online) 45%,transparent);color:var(--online)}
.ssx .ss-transport.cloud{background:var(--panel-3);color:var(--ink-2)}
.ssx .ss-busy{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:35;display:flex;align-items:center;gap:9px;padding:9px 16px;border-radius:11px;border:1px solid color-mix(in srgb,var(--warn) 50%,transparent);background:color-mix(in srgb,var(--warn) 14%,var(--panel));color:var(--warn);font-family:var(--font-hud);font-weight:600;font-size:13px;box-shadow:var(--shadow)}
.ssx .ss-busy i{width:9px;height:9px;border-radius:50%;background:var(--warn);box-shadow:0 0 8px var(--warn);animation:ssxpulse 1.6s infinite}
.ssx.busy .scan-btn{opacity:.45;pointer-events:none;filter:grayscale(.3)}
/* connection-unreachable banner */
.ssx .ss-conn{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:36;display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:11px;border:1px solid color-mix(in srgb,var(--offline) 55%,transparent);background:color-mix(in srgb,var(--offline) 15%,var(--panel));color:var(--offline);font-family:var(--font-hud);font-weight:600;font-size:13px;box-shadow:var(--shadow)}
.ssx .ss-conn i{width:9px;height:9px;border-radius:50%;background:var(--offline);box-shadow:0 0 8px var(--offline);animation:ssxpulse 1.6s infinite}
.ssx .ss-conn-retry{padding:4px 10px;border-radius:7px;border:1px solid var(--offline);color:var(--offline);font-family:var(--font-mono);font-size:11px;letter-spacing:.5px}
.ssx .ss-conn-retry:hover{background:color-mix(in srgb,var(--offline) 18%,transparent)}

/* ---- Exit-Booth button — lives IN the topbar (never floats over the toolbar) ---- */
.ssx .ss-exit-btn{display:none;width:auto;padding:0 12px;gap:7px;font-family:var(--font-hud);font-weight:600;font-size:12px;letter-spacing:.6px;
  border-color:color-mix(in srgb,var(--offline) 45%,var(--hair));color:var(--offline)}
.ssx .ss-exit-btn:hover{border-color:var(--offline);background:color-mix(in srgb,var(--offline) 12%,transparent)}
.ssx .ss-exit-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}

@media (prefers-reduced-motion:reduce){
  .ssx *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.05ms!important}
}

/* ═══════════════════════ BOOTH (KIOSK) MODE ═══════════════════════
   ONE shared render. Booth strips only the APP chrome (left nav + global header) and fills the
   screen — but KEEPS the FULL Scan Station: its own topbar (tabs/telemetry/theme), the camera
   wall + SCAN button + timer, AND the right control dock (Customer / Scan Type / Colour /
   Lighting / Focus / Exposure / Projection). It's the operator's working screen. */
body.ss-booth #appnav,
body.ss-booth .content-header{display:none!important}
body.ss-booth #scanstation-view{position:fixed;inset:0;z-index:9000}
/* swap the topbar Booth↔Exit buttons */
body.ss-booth .ssx .ss-booth-btn{display:none}
body.ss-booth .ssx .ss-exit-btn{display:flex}
/* slightly larger touch targets on the big screen (wall + dock both stay) */
body.ss-booth .ssx .scan-btn{width:120px;height:120px}
body.ss-booth .ssx .scan-btn .lbl{font-size:24px}
body.ss-booth .ssx .seg button{padding:9px 14px}
/* Engine card: keep the 3 flex:1 buttons compact-horizontal so "RealityScan/OpenMVS/Apple OC"
   don't clip (booth's generic .seg padding is too wide for nowrap engine labels); taller for touch. */
body.ss-booth .ssx .seg.engineseg button{padding:11px 4px}

/* ═══════════════════════════════════════════════════════════════════════════
   WEB PANEL host integration (added for the web Scan Station port). The desktop
   pane fills its own window; in the web admin console the pane lives inside
   `.admin-body`, so `.ss-host` gives `.ssx` an explicit height to fill. Nothing
   here leaks: every rule is under `.ss-host` / `.ssx`. Booth (full-screen) mode
   uses the browser Fullscreen API on `.ssx` (class `ss-fs`) instead of the
   desktop's kiosk pop-out.
   ═══════════════════════════════════════════════════════════════════════════ */
.ss-host{ display:flex; width:100%; height:calc(100dvh - 132px); min-height:600px;
  border:1px solid var(--hair, rgba(20,20,40,.10)); border-radius:16px; overflow:hidden;
  box-shadow:0 1px 2px rgba(20,40,60,.06),0 10px 30px rgba(20,40,60,.08); }
.ss-host .ssx{ height:100%; border-radius:16px; }

/* Booth / full-screen mode via the Fullscreen API (no global body class needed). */
.ssx.ss-fs, .ssx:fullscreen, .ssx:-webkit-full-screen{ position:fixed; inset:0; z-index:9000;
  width:100vw; height:100vh; border-radius:0; }
.ssx.ss-fs .ss-booth-btn{ display:none; }
.ssx.ss-fs .ss-exit-btn{ display:flex; }
.ssx.ss-fs .scan-btn{ width:120px; height:120px; }
.ssx.ss-fs .scan-btn .lbl{ font-size:24px; }
.ssx.ss-fs .seg button{ padding:9px 14px; }
/* Engine card parity in full-screen booth: keep engine buttons compact-horizontal (see body.ss-booth). */
.ssx.ss-fs .seg.engineseg button{ padding:11px 4px; }

/* SCAN STATION NOT CONNECTED — full offline scrim (driven by booth/status.studioOnline,
   not by image loads). Dim + block the controls; the wall shows the banner. */
.ssx.ss-offline .dock, .ssx.ss-offline .wall-tools, .ssx.ss-offline .scan-dock,
.ssx.ss-offline .viewtabs{ opacity:.4; pointer-events:none; filter:saturate(.5); }
.ssx .ss-conn.big{ position:absolute; inset:auto 0 0 0; top:0; display:flex; align-items:center;
  justify-content:center; gap:12px; background:linear-gradient(180deg,rgba(206,56,47,.16),transparent);
  color:var(--offline); font-weight:800; letter-spacing:.02em; font-size:15px; z-index:40;
  padding:14px 18px; pointer-events:auto; }
.ssx .ss-conn.big i{ width:9px; height:9px; border-radius:50%; background:var(--offline);
  box-shadow:0 0 0 4px rgba(206,56,47,.18); animation:ss-blink 1.1s ease-in-out infinite; }
@keyframes ss-blink{ 50%{ opacity:.35; } }
.ssx .ss-conn-retry{ border:1px solid var(--offline); color:var(--offline); background:transparent;
  border-radius:8px; padding:6px 12px; font-weight:700; cursor:pointer; }

/* Connection pill in the topbar telemetry (accurate CONNECTION indicator). */
.ssx .ss-connpill{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:12.5px;
  padding:5px 11px; border-radius:999px; white-space:nowrap; border:1px solid transparent; }
.ssx .ss-connpill i{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.ssx .ss-connpill.ok{ color:var(--online); background:rgba(18,150,90,.12); border-color:rgba(18,150,90,.28); }
.ssx .ss-connpill.warn{ color:var(--warn); background:rgba(182,124,10,.12); border-color:rgba(182,124,10,.28); }
.ssx .ss-connpill.down{ color:var(--offline); background:rgba(206,56,47,.12); border-color:rgba(206,56,47,.30); }

/* Single-camera modal: jump-to-any-camera selector + offline LIVE dot (web port). */
.ssx .dlg-head .camjump{ display:inline-flex; align-items:center; gap:6px; margin-left:10px;
  padding:0 4px 0 9px; height:32px; border:1px solid var(--hair-2); border-radius:9px;
  background:var(--panel-2); color:var(--ink-2); }
.ssx .dlg-head .camjump svg{ width:15px; height:15px; flex:0 0 auto; }
.ssx .dlg-head .camjump select{ appearance:none; -webkit-appearance:none; border:0; background:transparent;
  color:var(--ink); font:inherit; font-size:12.5px; font-weight:600; padding:0 6px; height:30px;
  max-width:190px; cursor:pointer; outline:none; }
.ssx .dlg-head .camjump select option{ color:#111; }
.ssx .recdot.off i{ background:var(--offline); animation:none; }

/* ── Over-hammer (DDoS) live indicator: "Rig traffic" tel + prominent alarm banner ─────────────── */
.ssx .tel.ss-hammer .v b{color:var(--offline)}
.ssx .tel.ss-hammer .dotlead{background:var(--offline);box-shadow:0 0 8px var(--offline);animation:ssHammerPulse 1s ease-in-out infinite}
@keyframes ssHammerPulse{0%,100%{opacity:1}50%{opacity:.3}}
.ssx .ss-ddos-banner{margin:0;padding:10px 16px;background:linear-gradient(90deg,rgba(240,80,74,.18),rgba(240,80,74,.06));border-top:2px solid var(--offline);border-bottom:1px solid var(--offline);color:var(--ink-1,#111);font-size:13px;font-family:var(--font-mono);letter-spacing:.2px;line-height:1.5}
.ssx .ss-ddos-banner b{color:var(--offline)}
.ssx .ss-ddos-banner.crit{background:var(--offline);color:#fff;animation:ssBannerFlash 1.1s steps(2,end) infinite}
.ssx .ss-ddos-banner.crit b{color:#fff;text-decoration:underline}
@keyframes ssBannerFlash{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
.ssx .ss-ddos-banner[hidden]{display:none}