/* ===== Specimen Lab — CRT TERMINAL retheme (v8, 2026-07-10) =====
 * v8: saved skins reachable again (regular drawer pane un-hidden as sections,
 *     skin cycler back bottom-centre, CRT dress for preset rows); popover
 *     deglyphed — screen-eyedropper button + border node dot removed (Ishaq).
 * v5: deck docked at the very top — top:12px embedded (#/skin shell, no
 *     topbar) / top:84px direct (clears the 76px fixed topbar) — and SMALLER
 *     (scale .74 open / .71 closed, width max 640px; was .88/720). Pairs with
 *     lab.js v21's boot-revealed + deck-open-at-boot (no more clean-boot).
 * v3: every top-right instrument boxed (readout + sliders join the chip);
 *     deck is SUMMONED by clicking the specimen (body.deck-open), higher at
 *     top:118; center stack retired — spawn state lives in the status chip
 *     (<SPECIES>: ONLINE/OFFLINE, accent-adaptive color via --status-col);
 *     drawer = glitch library only (title = live species); motion pass
 *     (deck rise, drawer glide + content stagger, popover/toast entrances).
 * v2: readout+auto-rotate to top-right; deck docked top-center smaller and
 * glassier; skins rail removed; species rail gains MODO section + collapse. */
/* ===== v1 base notes =====
 * Loads AFTER lab.css and overrides only the THEME layer: font, palette,
 * geometry (square corners), scanlines/phosphor, plus the two new side
 * panels (#species-rail / #skins-rail). Layout mechanics stay in lab.css /
 * _components.css. Everything is scoped under body.crt-lab so the shared
 * Arkadia topbar keeps its own brand chrome.
 * Reference language: jurassic-logs.app mutation viewer (VT323, cyan #0cf on
 * #08141a, 1px rgba borders, phosphor text-shadow, connector line + node dot).
 * The runtime accent still comes from lab.js applyScopedAccent (bg presets);
 * the values below are the boot defaults for the new "holo" preset. */

/* ---- palette + font remap at the lab scope roots ---- */
body.crt-lab #workspace, body.crt-lab #lab-dock-panel, body.crt-lab #lab-rail,
body.crt-lab #panel, body.crt-lab #region-pop, body.crt-lab #species-rail,
body.crt-lab .toast-host, body.crt-lab #lab-drawer-scrim{
  --accent:#a06cff; --accent-rgb:160,108,255;
  --accent-glow:rgba(160,108,255,.62); --accent-hot:#c6a6ff;
  --bone:#efe9ff; --bone-80:rgba(224,214,255,.88); --bone-62:#b1a0dd;
  --bone-34:rgba(160,108,255,.45); --bone-18:rgba(160,108,255,.22);
  --glass:rgba(10,7,18,.88); --glass-2:rgba(var(--accent-rgb),.05);
  --glass-border:rgba(var(--accent-rgb),.4); --glass-border-lit:rgba(var(--accent-rgb),.7);
  --bg-1:rgba(7,5,14,.62);
  /* German Eiland: extra tokens the deck CSS references (purple; danger stays red). */
  --amber:#c88bff; --amber-hot:#dcb3ff;
  --crimson:#e0655e; --crimson-glow:rgba(224,101,94,.5);
  --card-glow:0 0 22px rgba(160,108,255,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
  --display-f:'VT323','Courier New',monospace;
  --mono:'VT323','Courier New',monospace;
  --crt-phosphor:0 0 5px rgba(var(--accent-rgb),.7),0 0 12px rgba(var(--accent-rgb),.25);
  --crt-glow:0 0 5px rgba(var(--accent-rgb),.8),0 0 15px rgba(var(--accent-rgb),.35),0 0 30px rgba(var(--accent-rgb),.1);
  --crt-panel-bg:linear-gradient(180deg,rgba(var(--accent-rgb),.09) 0%,rgba(4,11,16,.93) 32%,rgba(2,6,10,.97) 100%);
  --crt-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- stage backdrop: phosphor void + scanlines ---- */
body.crt-lab #viewport-wrap{background:#050b10}
body.crt-lab #lab-bg{background:
  radial-gradient(ellipse 60% 44% at 50% 32%,rgba(var(--accent-rgb),.055),transparent 55%),
  radial-gradient(ellipse 58% 42% at 48% 62%,rgba(var(--accent-rgb),.075),transparent 66%),
  radial-gradient(ellipse 130% 105% at 50% 44%,#071018 26%,#03070c 80%)}
body.crt-lab #lab-halo{background:radial-gradient(circle,rgba(var(--accent-rgb),.11),rgba(var(--accent-rgb),.03) 46%,transparent 62%)}
body.crt-lab #lab-cloud .contact{background:radial-gradient(ellipse,rgba(var(--accent-rgb),.16),transparent 72%)}
body.crt-lab #lab-parts .part{background:#c6a6ff;box-shadow:0 0 10px 2px rgba(var(--accent-rgb),.55)}
body.crt-lab #lab-parts .partb{background:rgba(var(--accent-rgb),.16)}
/* scanlines: the reference's 2px/4px raster, slow-scrolling */
body.crt-lab #lab-grain{opacity:1;z-index:4;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px,rgba(0,0,0,.10) 2px 4px);
  background-size:100% 4px;animation:crt-scan 60s linear infinite}
@keyframes crt-scan{from{background-position:0 0}to{background-position:0 400px}}
body.crt-lab #lab-vig{box-shadow:inset 0 0 240px 70px rgba(1,4,7,.85),inset 0 0 90px 12px rgba(0,0,0,.4)}

/* ---- global type + control geometry inside the lab scope ---- */
body.crt-lab #workspace, body.crt-lab #lab-dock-panel, body.crt-lab #lab-rail,
body.crt-lab #panel, body.crt-lab #region-pop, body.crt-lab #species-rail{
  font-family:var(--mono);letter-spacing:.05em}
body.crt-lab .micro-label{font-size:12px;letter-spacing:.2em;text-shadow:0 0 3px rgba(var(--accent-rgb),.25)}
body.crt-lab #panel h2{font-size:12px;letter-spacing:.2em;text-shadow:var(--crt-phosphor)}
body.crt-lab .drawer-head strong{font-size:24px;letter-spacing:.24em;color:var(--accent);text-shadow:var(--crt-glow)}
body.crt-lab button, body.crt-lab input, body.crt-lab select, body.crt-lab textarea{font-family:var(--mono)}

/* square the chrome (reference uses hard corners everywhere) */
body.crt-lab .deck, body.crt-lab .lab-rail-stack, body.crt-lab #panel,
body.crt-lab #region-pop, body.crt-lab .deck-tabs button, body.crt-lab .rail-action,
body.crt-lab .btn, body.crt-lab .deck-name input, body.crt-lab .deck-sex-seg,
body.crt-lab .deck-sex-seg button, body.crt-lab .deck-pattern-chips button,
body.crt-lab select.species-select, body.crt-lab input[type=text], body.crt-lab input[type=number],
body.crt-lab input[type=search], body.crt-lab textarea, body.crt-lab .toggle,
body.crt-lab .rp-hex, body.crt-lab .rp-lock, body.crt-lab .rp-big, body.crt-lab .rp-dropper,
body.crt-lab .rp-sw, body.crt-lab .slot, body.crt-lab .slot .slot-sw,
body.crt-lab .ss-tabs, body.crt-lab .ss-tab, body.crt-lab .gcard, body.crt-lab .gframe,
body.crt-lab .dock-glitch-strip, body.crt-lab .vp-mesh-status, body.crt-lab .vp-loading,
body.crt-lab #drawer-close, body.crt-lab .ss-filter-tab, body.crt-lab .ss-seg-btn,
body.crt-lab .ss-chip-row button{border-radius:0}
body.crt-lab .skin-cycler, body.crt-lab .showcase-hint, body.crt-lab #region-hint{border-radius:0}
body.crt-lab .vp-specnav .nav-arrow, body.crt-lab .skin-cycler button{border-radius:0}

/* panel surfaces: dark gradient + 1px cyan border + glow-box */
body.crt-lab .deck, body.crt-lab .lab-rail-stack, body.crt-lab #panel, body.crt-lab #region-pop,
body.crt-lab .dock-glitch-strip{
  background:var(--crt-panel-bg);border:1px solid rgba(var(--accent-rgb),.5);
  box-shadow:0 8px 28px rgba(0,0,0,.45),0 0 14px rgba(var(--accent-rgb),.28),
    inset 0 1px 0 rgba(var(--accent-rgb),.16),inset 0 0 22px rgba(var(--accent-rgb),.06)}
body.crt-lab #panel{border-right:0;border-top:0;border-bottom:0}
body.crt-lab .deck::before{left:0;right:0;background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent-hot) 50%,var(--accent) 70%,transparent)}
body.crt-lab .deck::after{display:none}

/* buttons: bordered, inverted fill on hover (terminal style) */
body.crt-lab .btn, body.crt-lab .rail-action, body.crt-lab .deck-tabs button{
  background:rgba(0,0,0,.4);border:1px solid rgba(var(--accent-rgb),.4);color:var(--bone-62);
  text-shadow:0 0 3px rgba(var(--accent-rgb),.2)}
body.crt-lab .btn:hover, body.crt-lab .rail-action:hover, body.crt-lab .deck-tabs button:hover{
  background:rgba(var(--accent-rgb),.16);border-color:rgba(var(--accent-rgb),.7);color:var(--bone);
  box-shadow:0 0 8px rgba(var(--accent-rgb),.35)}
body.crt-lab .btn.primary{
  background:rgba(var(--accent-rgb),.16);border:1px solid var(--accent);color:var(--bone);
  text-shadow:var(--crt-phosphor);box-shadow:0 0 12px rgba(var(--accent-rgb),.35),inset 0 0 10px rgba(var(--accent-rgb),.12)}
body.crt-lab .btn.primary:hover{background:rgba(var(--accent-rgb),.28);box-shadow:0 0 18px rgba(var(--accent-rgb),.55),inset 0 0 12px rgba(var(--accent-rgb),.2)}
body.crt-lab .deck-actions .btn.primary.deck-apply{letter-spacing:.2em;font-size:14px}
body.crt-lab .rail-action[aria-pressed=true], body.crt-lab .rail-action[aria-expanded=true],
body.crt-lab .deck-tabs button.active{
  color:var(--accent);border-color:var(--accent);background:rgba(var(--accent-rgb),.2);
  text-shadow:var(--crt-glow);box-shadow:0 0 10px rgba(var(--accent-rgb),.5),inset 0 0 6px rgba(var(--accent-rgb),.3)}
body.crt-lab .rail-action{font-size:12px}
body.crt-lab .deck-tabs button{font-size:12px}

/* labels / readouts pick up phosphor */
body.crt-lab .vp-readout{font-size:12px;letter-spacing:.14em;text-shadow:0 0 3px rgba(var(--accent-rgb),.3)}
body.crt-lab .vp-rot{font-size:12px;color:var(--bone-34)}
body.crt-lab .vp-mesh-status{font-size:12px;letter-spacing:.16em;background:rgba(2,7,11,.72);
  border:1px solid rgba(var(--accent-rgb),.4);right:260px;top:16px;left:auto;padding:7px 12px;
  transition:color .5s ease,border-color .5s ease,box-shadow .5s ease,text-shadow .5s ease}
body.crt-lab .vp-loading{font-size:14px;letter-spacing:.22em;background:rgba(2,6,10,.8);border:1px solid rgba(var(--accent-rgb),.45);text-shadow:var(--crt-phosphor)}

/* terminal page title, top-left over the stage */
body.crt-lab .crt-title{position:absolute;left:18px;top:14px;z-index:6;pointer-events:none;
  font-family:var(--mono);font-size:22px;line-height:1;letter-spacing:.14em;color:var(--accent);text-shadow:var(--crt-glow)}
body.crt-lab .crt-title .crt-prompt{color:var(--bone-62);margin-right:8px}
body.crt-lab .crt-title .crt-cursor{margin-left:6px;animation:crt-blink .9s steps(1) infinite}
@keyframes crt-blink{0%,100%{opacity:1}50%{opacity:0}}
body.crt-lab .crt-sub{position:absolute;left:18px;top:40px;z-index:6;pointer-events:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--bone-62);text-shadow:0 0 3px rgba(var(--accent-rgb),.2)}

/* species navigator + skin cycler: floating text, no glass pill */
body.crt-lab .vp-specnav{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body.crt-lab .vp-specnav .spec-name{font-family:var(--mono);font-size:22px;letter-spacing:.16em;color:var(--accent);text-shadow:var(--crt-glow)}
body.crt-lab .vp-specnav .spec-name .dot{border-radius:0;width:5px;height:5px}
body.crt-lab .vp-specnav .spec-status{font-size:11.5px;letter-spacing:.24em;color:var(--bone-62)}
body.crt-lab .vp-specnav .nav-arrow{color:var(--bone-62);opacity:.5;background:transparent;border-color:transparent}
body.crt-lab .vp-specnav .nav-arrow:hover{opacity:1;color:var(--accent);background:transparent;text-shadow:var(--crt-glow)}
body.crt-lab .skin-cycler{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body.crt-lab #skin-cycler-name{font-size:12px;letter-spacing:.26em;color:var(--bone-62)}
body.crt-lab .skin-cycler button{color:var(--bone-62);opacity:.5}
body.crt-lab .skin-cycler button:hover{opacity:1;color:var(--accent);background:transparent;text-shadow:var(--crt-glow)}

/* sliders: boxed instruments (v3) — thin bordered track, glowing round thumb */
body.crt-lab .vp-rotate, body.crt-lab .vp-exposure{background:rgba(2,7,11,.72);
  border:1px solid rgba(var(--accent-rgb),.4);border-radius:0;padding:7px 10px;
  box-shadow:0 4px 14px rgba(0,0,0,.3),inset 0 0 10px rgba(var(--accent-rgb),.04);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
body.crt-lab .vp-rotate .rot-ico, body.crt-lab .vp-exposure .exp-ico{color:var(--bone-62);text-shadow:var(--crt-phosphor)}
body.crt-lab .vp-rotate input[type=range], body.crt-lab .vp-exposure input[type=range]{
  height:4px;border-radius:0;background:rgba(var(--accent-rgb),.2);border:1px solid rgba(var(--accent-rgb),.4)}
body.crt-lab .vp-rotate input[type=range]::-webkit-slider-thumb, body.crt-lab .vp-exposure input[type=range]::-webkit-slider-thumb{
  background:var(--accent);border:1px solid rgba(var(--accent-rgb),.7);
  box-shadow:0 0 6px rgba(var(--accent-rgb),.7),0 0 12px rgba(var(--accent-rgb),.35)}
body.crt-lab .vp-rotate input[type=range]::-moz-range-thumb, body.crt-lab .vp-exposure input[type=range]::-moz-range-thumb{
  background:var(--accent);border:1px solid rgba(var(--accent-rgb),.7);
  box-shadow:0 0 6px rgba(var(--accent-rgb),.7),0 0 12px rgba(var(--accent-rgb),.35)}

/* auto-rotate pill: bottom-left, bordered, spinning icon when active */
body.crt-lab .vp-autorotate{border-radius:0;background:rgba(0,0,0,.45);border:1px solid rgba(var(--accent-rgb),.4);
  color:var(--bone-62);font-size:12px;letter-spacing:.14em;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
body.crt-lab .vp-autorotate:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.7)}
body.crt-lab .vp-autorotate[aria-pressed=true]{color:var(--accent);border-color:var(--accent);
  background:rgba(var(--accent-rgb),.1);text-shadow:var(--crt-phosphor);box-shadow:none}

/* registration corners: cyan */
body.crt-lab .vp-corner{border-color:rgba(var(--accent-rgb),.45)}

/* loading spinner (sibling of #vp-loading; hidden when the module hides the text) */
body.crt-lab .crt-spinner{position:absolute;left:50%;top:calc(50% + 52px);transform:translate(-50%,-50%);z-index:4;width:48px;height:48px;pointer-events:none}
body.crt-lab .vp-loading.hide + .crt-spinner{display:none}
body.crt-lab .crt-spinner .ring{position:absolute;inset:0;border:2px solid transparent;border-top-color:var(--accent);
  border-right-color:rgba(var(--accent-rgb),.5);border-radius:50%;
  box-shadow:0 0 10px rgba(var(--accent-rgb),.45),inset 0 0 6px rgba(var(--accent-rgb),.18);
  animation:crt-spin 1.1s cubic-bezier(.55,.15,.45,.85) infinite}
body.crt-lab .crt-spinner .ring.r2{inset:8px;border-top-color:rgba(var(--accent-rgb),.7);border-right-color:transparent;
  box-shadow:0 0 6px rgba(var(--accent-rgb),.3);animation:crt-spin-rev 1.6s linear infinite}
body.crt-lab .crt-spinner .core{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.9),0 0 18px rgba(var(--accent-rgb),.45);
  animation:crt-pulse 1.1s ease-in-out infinite}
@keyframes crt-spin{to{transform:rotate(360deg)}}
@keyframes crt-spin-rev{to{transform:rotate(-360deg)}}
@keyframes crt-pulse{0%,100%{opacity:.55;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}

/* ---- NEW: ctx side panels (species right, saved skins left) ---- */
body.crt-lab .ctx-rail{position:absolute;z-index:22;display:flex;flex-direction:column;width:230px;
  padding:8px 8px 6px;font-family:var(--mono);color:var(--bone);
  background:var(--crt-panel-bg);border:1px solid rgba(var(--accent-rgb),.6);
  box-shadow:0 8px 28px rgba(0,0,0,.45),0 0 14px rgba(var(--accent-rgb),.3),
    inset 0 1px 0 rgba(var(--accent-rgb),.18),inset 0 0 22px rgba(var(--accent-rgb),.08);
  backdrop-filter:blur(4px) saturate(110%);-webkit-backdrop-filter:blur(4px) saturate(110%)}
/* Rails are body children: offsets are viewport-relative (100px topbar above).
   Species rail sits BELOW the top-right cluster (sliders + mesh/readout/auto-
   rotate column) and ABOVE the lab rail stack. */
body.crt-lab #species-rail{right:16px;top:200px;bottom:344px;max-height:none}
/* connector: glowing leader line + node dot pointing at the specimen */
body.crt-lab .ctx-rail::before{content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:18px;height:1px;box-shadow:0 0 8px rgba(var(--accent-rgb),.85)}
body.crt-lab .ctx-rail::after{content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 4px var(--accent),0 0 10px rgba(var(--accent-rgb),.7)}
body.crt-lab #species-rail::before{left:-18px;background:linear-gradient(90deg,transparent,var(--accent) 35%,var(--accent))}
body.crt-lab #species-rail::after{left:-22px}
/* collapse arrow: top corner while open, the whole (slim) rail when collapsed */
body.crt-lab .ctx-collapse{position:absolute;top:7px;right:7px;z-index:2;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:inherit;font-size:17px;line-height:1;padding:0 0 2px;
  color:var(--bone-62);background:rgba(0,0,0,.4);border:1px solid rgba(var(--accent-rgb),.35);
  transition:color .14s,border-color .14s,background .14s}
body.crt-lab .ctx-collapse:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.8);
  background:rgba(var(--accent-rgb),.14);text-shadow:var(--crt-phosphor)}
body.crt-lab .ctx-rail.collapsed, body.crt-lab #species-rail.collapsed{width:38px;bottom:auto;padding:6px;align-items:center}
body.crt-lab .ctx-rail.collapsed .ctx-title, body.crt-lab .ctx-rail.collapsed .ctx-species-list,
body.crt-lab .ctx-rail.collapsed .ctx-mode{display:none}
body.crt-lab .ctx-rail.collapsed .ctx-collapse{position:static;width:26px;height:26px}
body.crt-lab .ctx-rail.collapsed::before, body.crt-lab .ctx-rail.collapsed::after{display:none}
body.crt-lab .ctx-title{flex:none;position:relative;margin-bottom:4px;padding:0 4px 8px;
  font-size:12px;letter-spacing:.24em;color:var(--accent);text-shadow:var(--crt-phosphor)}
body.crt-lab .ctx-title::after{content:"";position:absolute;left:4px;right:4px;bottom:2px;height:1px;
  background:linear-gradient(90deg,var(--accent) 0%,rgba(var(--accent-rgb),.4) 60%,transparent 100%);
  box-shadow:0 0 4px rgba(var(--accent-rgb),.55)}
body.crt-lab .ctx-title .ctx-count{float:right;color:var(--bone-34);letter-spacing:.1em}
body.crt-lab .ctx-species-list{display:flex;flex-direction:column;gap:1px;padding:2px;overflow-y:auto;overscroll-behavior:contain}
body.crt-lab .ctx-species-list::-webkit-scrollbar{width:6px}
body.crt-lab .ctx-species-list::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),.25);border-radius:0}
body.crt-lab .ctx-species-list::-webkit-scrollbar-track{background:transparent}
body.crt-lab .ctx-species{text-align:left;border:1px solid transparent;border-left:2px solid rgba(var(--accent-rgb),.18);
  color:var(--bone-62);letter-spacing:.08em;cursor:pointer;background:transparent;
  padding:5px 10px;font-family:inherit;font-size:14px;line-height:1.2;
  transition:background .14s,color .14s,border-color .14s,padding-left .14s,text-shadow .14s}
body.crt-lab .ctx-species:hover{background:rgba(var(--accent-rgb),.1);border-left-color:rgba(var(--accent-rgb),.7);padding-left:12px;color:var(--bone)}
body.crt-lab .ctx-species.active{background:rgba(var(--accent-rgb),.2);color:var(--accent);border-left-color:var(--accent);text-shadow:var(--crt-glow)}
body.crt-lab .ctx-species:focus-visible{outline:1px solid rgba(var(--accent-rgb),.7);outline-offset:1px}

/* (v3: the MODO DE PIEL rail section is gone — the deck is summoned by clicking
   the specimen and the drawer is the glitch library, so there is no mode UI.) */

/* saved-skin rows in CRT dress (rendered by the module as .preset-row) */
body.crt-lab .preset-row{display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid rgba(var(--accent-rgb),.25);border-left:2px solid rgba(var(--accent-rgb),.35);
  background:rgba(0,0,0,.3);padding:6px 8px;margin-bottom:4px;transition:border-color .14s,background .14s}
body.crt-lab .preset-row:hover{background:rgba(var(--accent-rgb),.08);border-color:rgba(var(--accent-rgb),.55)}
body.crt-lab .preset-row .pn{font-size:14px;color:var(--bone);letter-spacing:.06em}
body.crt-lab .preset-row .pm{font-size:11.5px;color:var(--bone-34);letter-spacing:.08em}
body.crt-lab .preset-row .pm.mismatch{color:#ffb000}
body.crt-lab .preset-row .pact{display:flex;gap:4px}
body.crt-lab .preset-row .btn{padding:4px 8px;font-size:11.5px;min-height:0}
body.crt-lab .preset-empty{font-size:12px;color:var(--bone-34);letter-spacing:.1em;padding:8px 4px}

/* toggles (switch) in cyan */
body.crt-lab .toggle{background:rgba(0,0,0,.3);border:1px solid rgba(var(--accent-rgb),.3)}
body.crt-lab .toggle .switch{border-radius:0;background:rgba(0,0,0,.5);border-color:rgba(var(--accent-rgb),.4)}
body.crt-lab .toggle .switch::after{border-radius:0;background:var(--bone-62)}
body.crt-lab .toggle input:checked+.switch{background:rgba(var(--accent-rgb),.35);border-color:var(--accent)}
body.crt-lab .toggle input:checked+.switch::after{background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.7)}

/* deck details */
body.crt-lab .deck-name input{background:rgba(0,0,0,.45);border:1px solid rgba(var(--accent-rgb),.4);color:var(--bone);font-size:15px}
body.crt-lab .deck-name input:focus{border-color:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.35)}
body.crt-lab .deck-sex-seg{background:rgba(0,0,0,.35);border-color:rgba(var(--accent-rgb),.35)}
body.crt-lab .deck-sex-seg button{font-size:12px}
body.crt-lab .deck-sex-seg button[aria-pressed=true]{color:var(--accent);background:rgba(var(--accent-rgb),.18);box-shadow:inset 0 0 0 1px var(--accent);text-shadow:var(--crt-phosphor)}
body.crt-lab .deck-pattern-chips button{font-family:var(--mono);font-size:14px}
body.crt-lab .slot .slot-sw{border:1px solid rgba(var(--accent-rgb),.35);border-radius:0;
  box-shadow:inset 0 0 6px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.4)}
body.crt-lab .slot:hover .slot-sw{box-shadow:inset 0 0 6px rgba(0,0,0,.5),0 0 0 1px var(--accent),0 0 10px rgba(var(--accent-rgb),.45)}
body.crt-lab .slot.eye .slot-sw{border-radius:50%}
body.crt-lab .slot .slot-meta label{font-size:11.5px;letter-spacing:.16em}
body.crt-lab .dock-connector{background:linear-gradient(180deg,transparent,rgba(var(--accent-rgb),.45) 55%,var(--accent))}
body.crt-lab .dock-connector span{border-radius:50%}

/* rail chamber-color swatches keep their preset colors; holo gets a cyan orb */
body.crt-lab .rail-colors button, body.crt-lab .rail-custom{border-radius:0;border-color:rgba(var(--accent-rgb),.35)}
body.crt-lab .rail-colors button.active{box-shadow:0 0 0 2px rgba(2,6,10,.9),0 0 0 3px var(--accent),0 0 10px rgba(var(--accent-rgb),.6)}
.rail-colors button[data-bg="holo"]{background:radial-gradient(circle at 34% 30%,#c6a6ff,#a06cff 60%,#3a1f6b)}

/* drawer inputs / tabs / gallery in CRT dress */
body.crt-lab select.species-select, body.crt-lab input[type=text], body.crt-lab input[type=number],
body.crt-lab input[type=search], body.crt-lab textarea{background:rgba(0,0,0,.45);border-color:rgba(var(--accent-rgb),.4);color:var(--bone);font-size:14px}
body.crt-lab select.species-select:focus, body.crt-lab input:focus, body.crt-lab textarea:focus{border-color:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.3)}
body.crt-lab .gcard{background:rgba(0,0,0,.35);border:1px solid rgba(var(--accent-rgb),.3);backdrop-filter:none;-webkit-backdrop-filter:none}
body.crt-lab .gcard:hover{border-color:rgba(var(--accent-rgb),.7);box-shadow:0 0 12px rgba(var(--accent-rgb),.3);transform:translateY(-1px)}
body.crt-lab .gcard.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 14px rgba(var(--accent-rgb),.45)}
body.crt-lab .gname{font-family:var(--mono);font-size:15px;letter-spacing:.1em}

/* region popover + hint + tooltip */
/* v8 (Ishaq 07-10 screenshot): the border node dot is gone — the leader line
   plus the pulsing on-model zone dot carry the connection on their own. */
body.crt-lab #region-pop::before{display:none}
body.crt-lab .rp-title{font-family:var(--mono);font-size:14px;letter-spacing:.22em;color:var(--accent);text-shadow:var(--crt-phosphor)}
body.crt-lab .rp-hex{font-size:14px}
body.crt-lab .rp-lock{font-size:11.5px}
body.crt-lab #region-hint{font-size:12px;background:rgba(2,6,10,.7);border:1px solid rgba(var(--accent-rgb),.4)}
body.crt-lab #region-tip{font-size:12px;background:rgba(2,6,10,.85);border-color:rgba(var(--accent-rgb),.6);color:var(--accent)}
body.crt-lab .showcase-hint{font-size:12px;letter-spacing:.22em;background:rgba(2,6,10,.7);border:1px solid rgba(var(--accent-rgb),.45);color:var(--bone-62);text-shadow:0 0 4px rgba(var(--accent-rgb),.25)}

/* dim scrim slightly bluer */
body.crt-lab #lab-drawer-scrim{background:rgba(1,4,8,.6)}

/* ---- showcase mode hides the new chrome too ---- */
body.crt-lab #species-rail, body.crt-lab .crt-title, body.crt-lab .crt-sub{
  transition:opacity .38s ease,visibility 0s linear 0s}
body.crt-lab.showcase #species-rail,
body.crt-lab.showcase .crt-title, body.crt-lab.showcase .crt-sub{
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .38s ease,visibility 0s linear .38s}

/* ---- responsive: the side rail is desktop chrome ---- */
@media (max-width:1100px){
  body.crt-lab #species-rail{display:none}
  body.crt-lab .crt-title{font-size:16px}
  body.crt-lab .crt-sub{display:none}
}

/* ---- v3 LAYOUT: boxed top-right instrument column + summoned deck ---- */
@media (min-width:901px){
  /* Every instrument in the top-right column sits in its own black box: the
     status chip, the SPECIES/SEX/RENDER readout and the AUTO-ROTATE key share
     one 206px column at right:260px (clears the boxed sliders at right:16px;
     the species rail below starts at top:200px). */
  body.crt-lab .vp-mesh-status{width:206px;box-sizing:border-box;
    display:inline-flex;align-items:center;justify-content:center;gap:9px}
  body.crt-lab .vp-readout{left:auto;right:260px;top:52px;bottom:auto;z-index:6;
    width:206px;box-sizing:border-box;gap:7px;padding:9px 12px;
    background:rgba(2,7,11,.72);border:1px solid rgba(var(--accent-rgb),.4);
    box-shadow:0 4px 18px rgba(0,0,0,.35),inset 0 0 14px rgba(var(--accent-rgb),.05);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
  body.crt-lab .vp-readout>span{display:flex;justify-content:space-between;gap:10px}
  body.crt-lab .vp-autorotate{left:auto;right:260px;top:138px;bottom:auto;
    width:206px;box-sizing:border-box;justify-content:center}
  /* The command deck is SUMMONED (v3): hidden until the specimen is clicked
     (lab.js toggles body.deck-open), docked top-center behind the specimen's
     headroom, scaled down and glassy so the dinosaur reads in front of it.
     v5: hugs the very top — 104px only exists to clear the 97px fixed topbar
     on DIRECT /skin/ visits; the embedded module shell hides the topbar, so
     there the deck rides at 12px and the specimen gets the whole stage. */
  body.crt-lab #lab-dock-panel{bottom:auto;top:104px;width:clamp(460px,calc(100vw - 620px),640px);
    transform-origin:top center;opacity:0;visibility:hidden;
    transform:translateX(-50%) translateY(-16px) scale(.71);
    transition:opacity .42s var(--crt-ease),transform .42s var(--crt-ease),visibility 0s linear .42s}
  body.crt-lab.deck-open #lab-dock-panel{opacity:1;visibility:visible;
    transform:translateX(-50%) translateY(0) scale(.74);
    transition:opacity .42s var(--crt-ease),transform .42s var(--crt-ease),visibility 0s linear 0s}
  body.crt-lab.showcase #lab-dock-panel{opacity:0;visibility:hidden}
  /* embedded module shell (#/skin) hides the topbar — dock at the very top;
     doubled selector matches whichever element topbar.js stamped first */
  html[data-embedded="true"] body.crt-lab #lab-dock-panel,
  body[data-embedded="true"].crt-lab #lab-dock-panel{top:12px}
  body.crt-lab .deck{padding:12px 16px 13px;
    background:linear-gradient(180deg,rgba(var(--accent-rgb),.08) 0%,rgba(4,11,16,.74) 30%,rgba(2,6,10,.84) 100%)}
  body.crt-lab .deck-head{margin-bottom:0;padding-bottom:10px}
  body.crt-lab .deck-wells{border-top:1px solid rgba(var(--accent-rgb),.16);padding-top:8px}
  body.crt-lab .deck-actions{margin-top:0;padding-top:10px;border-top:1px solid rgba(var(--accent-rgb),.16)}
  body.crt-lab .deck-actions .btn.primary.deck-apply{letter-spacing:.22em;font-size:14px;padding:10px 30px}
  body.crt-lab .slot .slot-meta label{font-size:11.5px;letter-spacing:.16em}
  /* wells WRAP instead of clipping behind a scrollbar (preview wells row 2) */
  body.crt-lab #slot-list{flex-wrap:wrap;overflow-x:visible;justify-content:center;row-gap:2px;padding:2px 4px 4px}
  body.crt-lab .slot{width:76px}
  /* the module's paint hint only tells the truth while Zonas is on */
  body.crt-lab:not(.zones-on) #region-hint{display:none}
  /* connector points DOWN from the deck to the specimen */
  body.crt-lab .dock-connector{bottom:auto;top:100%;
    background:linear-gradient(180deg,var(--accent),rgba(var(--accent-rgb),.45) 45%,transparent)}
  body.crt-lab .dock-connector span{top:auto;bottom:-3px}
  /* bottom strip is free (center stack retired in v3) — floaters at natural edges */
  body.crt-lab #region-hint{bottom:14px}
  body.crt-lab .toast-host{bottom:22px}
  body.crt-lab .vp-rot{bottom:18px}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  body.crt-lab #lab-grain{animation:none}
  body.crt-lab .crt-title .crt-cursor{animation:none}
  body.crt-lab .crt-spinner .ring, body.crt-lab .crt-spinner .ring.r2, body.crt-lab .crt-spinner .core{animation:none}
}

/* v2: preview wells */
/* badge: square 1px border language, VT323 small caps, cyan-dim (matches the rest of
   the terminal chrome's bordered-pill style) */
body.crt-lab .slot .slot-badge{border-radius:0;background:rgba(0,0,0,.35);
  border:1px solid rgba(var(--accent-rgb),.35);color:var(--bone-62);
  font-family:var(--mono);letter-spacing:.14em;text-shadow:0 0 3px rgba(var(--accent-rgb),.2)}
body.crt-lab .slot:not(.preview) + .slot.preview::before{background:rgba(var(--accent-rgb),.6);box-shadow:0 0 6px rgba(var(--accent-rgb),.4)}
/* nomask keeps the CRT scanline/phosphor look — only the well border dims, nothing
   goes opaque over the global #lab-grain scanline layer */
body.crt-lab .slot.nomask{border-color:transparent}
body.crt-lab .slot.nomask .slot-sw{border-color:rgba(var(--accent-rgb),.15);box-shadow:inset 0 0 6px rgba(0,0,0,.5)}

/* ===== v3 — retired chrome, status instrument, drawer glide, motion pass ===== */

/* Retired: the center specnav (its #vp-species-label stays in the DOM as the
   module's spawn-state wire — lab.js observes it for the status chip; the
   species rail owns switching) and the glitch dock strip (mode machine is
   pinned to regular now that the mode tabs are gone).
   v8 un-retires two things (Ishaq 07-10: players couldn't reach their saved
   skins or export/import): the SKIN CYCLER — the stack now sits bottom-centre,
   desktop only (the mobile deck docks to the bottom edge) — and the regular
   drawer pane (saved-skins list + skin-code import); the pane never receives
   .active from anyone (setMode's callers are gone), so force it visible. */
body.crt-lab .vp-center-stack{top:auto;bottom:58px}
body.crt-lab .vp-center-stack .vp-specnav{display:none}
@media (max-width:900px){ body.crt-lab .vp-center-stack{display:none!important} }
body.crt-lab .dock-glitch-strip{display:none!important}
body.crt-lab #mode-pane-regular{display:block}

/* v4: the custom glitch builder is a SECTION at the drawer's bottom (Ishaq) —
   below the gallery, same divider language as the other drawer sections. The
   old Gallery/Custom tab classes stay on the div but nothing toggles them. */
body.crt-lab #ss-pane-builder{display:block;margin-top:26px;padding-top:20px;
  border-top:1px solid rgba(var(--accent-rgb),.35)}
body.crt-lab #ss-pane-builder>h2:first-child{margin-bottom:14px}

/* Status chip: "<SPECIES>: ONLINE / OFFLINE". lab.js sets --status-col, picked
   per state (green family online, red family offline) to stay hue-distant from
   the current chamber accent so the state never dissolves into the background. */
body.crt-lab .vp-mesh-status::before{content:"";width:7px;height:7px;flex:none;
  background:currentColor;box-shadow:0 0 9px currentColor}
body.crt-lab .vp-mesh-status.online,body.crt-lab .vp-mesh-status.offline{
  color:var(--status-col,#3dff8f);
  border-color:color-mix(in srgb,var(--status-col,#3dff8f) 60%,transparent);
  text-shadow:0 0 7px color-mix(in srgb,var(--status-col,#3dff8f) 55%,transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--status-col,#3dff8f) 20%,transparent),
    inset 0 0 12px color-mix(in srgb,var(--status-col,#3dff8f) 9%,transparent)}
body.crt-lab .vp-mesh-status.online::before{animation:crt-status-pulse 2.2s ease-in-out infinite}
@keyframes crt-status-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Drawer: slower CRT glide + staggered content rise on open */
body.crt-lab #panel{transition:transform .5s var(--crt-ease),visibility 0s linear .5s}
body.crt-lab #panel.open{transition:transform .5s var(--crt-ease)}
body.crt-lab #lab-drawer-scrim{transition:opacity .45s ease}
body.crt-lab #panel.open>*{animation:crt-rise .5s var(--crt-ease) both}
body.crt-lab #panel.open>*:nth-child(2){animation-delay:.06s}
body.crt-lab #panel.open>*:nth-child(3){animation-delay:.12s}
body.crt-lab #panel.open>*:nth-child(n+4){animation-delay:.18s}
@keyframes crt-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Popover + toast entrances */
body.crt-lab #region-pop:not([hidden]){animation:crt-pop-in .28s var(--crt-ease) both}
@keyframes crt-pop-in{from{opacity:0;transform:translateY(7px) scale(.965)}to{opacity:1;transform:none}}
body.crt-lab .toast{animation:crt-toast-in .32s var(--crt-ease) both}
@keyframes crt-toast-in{from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:none}}

/* Species rail: smooth collapse slide */
body.crt-lab .ctx-rail{transition:width .34s var(--crt-ease),padding .34s var(--crt-ease)}

/* Readout hierarchy: dim keys, bright values */
body.crt-lab .vp-readout .k{color:rgba(var(--accent-rgb),.55)}

/* Reduced motion: strip the v3 theatrics */
@media (prefers-reduced-motion:reduce){
  body.crt-lab #panel.open>*,body.crt-lab #region-pop:not([hidden]),body.crt-lab .toast,
  body.crt-lab .vp-mesh-status.online::before{animation:none}
  body.crt-lab #lab-dock-panel,body.crt-lab #panel,body.crt-lab .ctx-rail{transition-duration:.01s}
}

/* ---- v6: zone-popover ergonomics — never block the specimen ---- */
/* translucent panel: a brief overlap can't fully hide the model behind it */
body.crt-lab #region-pop{
  background:rgba(4,10,14,.80);
  -webkit-backdrop-filter:blur(7px) saturate(1.1);
  backdrop-filter:blur(7px) saturate(1.1);
  transition:opacity .2s var(--crt-ease),left .22s var(--crt-ease),top .22s var(--crt-ease)}
/* ghost while the user drags to orbit; animation:none is REQUIRED — crt-pop-in's
   'both' fill retains opacity:1 over any plain declaration. Killing it while
   ghosted also replays the pop-in on release: the panel visibly returns. */
body.lab-orbiting #region-pop:not([hidden]){animation:none;opacity:.07;pointer-events:none}
/* the module drives the leader's INLINE opacity per frame — !important wins */
body.lab-orbiting #region-leader{opacity:.07!important}
@media (prefers-reduced-motion:reduce){
  body.crt-lab #region-pop{transition:none}
}
/* the command deck (top-centre) is the other specimen-blocker while orbiting;
   ghost it too. .crt-lab.lab-orbiting ties the (0,2,1) specificity of
   .crt-lab.deck-open and wins by order; visibility stays as deck-open set it. */
body.crt-lab.lab-orbiting #lab-dock-panel{opacity:.07;pointer-events:none}
/* v7: panel pinned to the far screen edge — the zone dot must carry the "what
   am I changing" story on its own, so make it unmissable: bigger, white-ringed,
   pulsing. (SVG geometry r is CSS-settable in Chromium/SVG2.) */
body.crt-lab #region-leader .rl-dot{r:6px;stroke:rgba(255,255,255,.85);stroke-width:1.4;
  filter:drop-shadow(0 0 6px var(--accent-glow)) drop-shadow(0 0 14px var(--accent-glow));
  animation:crt-zone-dot 1.6s ease-in-out infinite}
body.crt-lab #region-leader .rl-line{stroke-width:1.4;opacity:.75}
@keyframes crt-zone-dot{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){
  body.crt-lab #region-leader .rl-dot{animation:none}
}

/* ---- v8: saved skins reachable + popover deglyph ---- */
/* CRT dress for the restored saved-skins rows (shared by the regular list and
   the glitch list): square geometry, terminal borders. Base look lives in
   _components.css (glass theme) — only the theme layer changes here. */
body.crt-lab .preset-row{border-radius:0;background:rgba(0,0,0,.35);
  border:1px solid rgba(var(--accent-rgb),.3)}
body.crt-lab .preset-row:hover{border-color:rgba(var(--accent-rgb),.7);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.18)}
body.crt-lab .preset-row .pact button{border-radius:0}
body.crt-lab .preset-row .pm{color:var(--bone-62)}
/* Ishaq 07-10 screenshot: the popover's screen-eyedropper button goes away
   (module unhides it on Chromium — CSS wins either way). The big picker,
   hex field and per-zone swatches stay. */
body.crt-lab #rp-dropper{display:none!important}

/* 2026-08-26 THE DECK ACTION ROW WRAPS. `.deck-row{display:flex}` carries no
   `flex-wrap` above 900px, so every button added to `#lab-dock-actions` since the
   row was sized simply ran OUT of the deck: measured in real Chromium at 1474x900
   the row needed 739 CSS px inside 605 (signed-out) and 1104 inside 605 with the
   admin publish/suggest buttons unhidden, so `Live anwenden` was painted OUTSIDE
   the deck's own border, on top of the specimen readout. The last button to push
   it over the visible edge was `#preset-export-json`, which `skincard.mjs` injects
   into this row at runtime - a row this page cannot see in its own markup, which is
   exactly why it must wrap rather than be counted.
   The primary action fills its wrapped line so the deck still reads as one control
   surface; this is the same shape the <=900px block already used. INERT while the
   row fits: with `flex-wrap:wrap` a row under its container width lays out
   identically. */
@media(min-width:901px){
  body.crt-lab .deck-actions{flex-wrap:wrap;row-gap:9px}
  body.crt-lab .deck-actions .btn.primary.deck-apply{flex:1 1 auto}
}