/* =========================================================================
   /skin/ - THE SKIN STUDIO IN THE CARD GRAMMAR (studio-gc.css, 2026-10-05)

   RESKIN ONLY. Loaded LAST on /skin/ (after _components.css, lab.css,
   crt.css, advanced-v2.css, skinrequest.css and ge-cards.css). It changes
   surfaces, corners, type and spacing - never a position the scripts
   measure, never display/visibility state the scripts toggle, never an id,
   a class the scripts add, a canvas, a worker or a route.

   What it does:
   1. THE TOKEN LAYER. crt.css themes the studio through custom properties at
      its scope roots (--mono, --display-f, --crt-glow, --crt-panel-bg ...).
      They are re-pointed here at German Eiland's brand faces (Oswald /
      Sora / Chakra Petch / Space Grotesk) and the card grammar's glass, so
      every rule crt.css already has inherits the new look. The RUNTIME
      accent (lab.js applyScopedAccent: --accent / --accent-rgb per stage
      colour) is left alone and still drives every highlight.
   2. THE REGISTER. The CRT layer squares everything (border-radius:0); the
      grammar gives each role its corner: surface 14, control 10, plate 6,
      pill 999. Phosphor text-glow is dropped; light comes from the faces.
   3. THE DIALOGS (publish, suggest, Tier-4 request) take the framework's
      buy-dialog shape and fixed light ink, so they read in BOTH themes - the
      studio is a dark stage in either theme (before this sheet the light
      theme painted dark ink on the dark dialog).
   ========================================================================= */

/* ---- 1. the token layer (same scope roots as crt.css) ----------------- */
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{
  --display-f:'Oswald','Arial Narrow',system-ui,sans-serif;
  --mono:'Chakra Petch',ui-monospace,'Consolas',monospace;
  --st-ui:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --st-num:'Space Grotesk','Chakra Petch',system-ui,sans-serif;
  --crt-phosphor:none;
  --crt-glow:none;
  --st-face:linear-gradient(180deg,rgba(var(--accent-rgb),.10) 0%,rgba(19,14,31,.90) 34%,rgba(12,9,21,.94) 100%);
  --st-face-flat:rgba(15,11,25,.92);
  --st-sunk:rgba(255,255,255,.035);
  --st-edge:rgba(var(--accent-rgb),.28);
  --st-edge-hi:rgba(var(--accent-rgb),.55);
  --st-chisel:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.55),transparent);
  --st-shadow:0 24px 60px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.25);
  --crt-panel-bg:var(--st-face);
  --glass:var(--st-face-flat);
  --glass-2:rgba(var(--accent-rgb),.06);
  --glass-border:var(--st-edge);
  --glass-border-lit:var(--st-edge-hi);
  --bone:#f1ecff; --bone-80:rgba(236,229,255,.86); --bone-62:#b9acdc;
  --bone-34:rgba(196,180,240,.55); --bone-18:rgba(196,180,240,.22);
  --st-r:14px; --st-r-s:10px; --st-r-xs:6px; --st-r-pill:999px;
}
/* the dialogs and pins live outside those roots: same tokens there */
body.crt-lab #fi-publish-wrap, body.crt-lab .sg-wrap, body.crt-lab #skinreq-fab, body.crt-lab #fi-publish-fab{
  --display-f:'Oswald','Arial Narrow',system-ui,sans-serif;
  --mono:'Chakra Petch',ui-monospace,'Consolas',monospace;
  --st-ui:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --st-face:linear-gradient(180deg,rgba(160,108,255,.12) 0%,rgba(20,15,33,.97) 30%,rgba(12,9,21,.98) 100%);
  --st-edge:rgba(160,108,255,.30);
  --st-edge-hi:rgba(160,108,255,.62);
  --st-chisel:linear-gradient(90deg,transparent,rgba(160,108,255,.6),transparent);
  --glass:rgba(15,11,25,.92);
  --glass-border:rgba(160,108,255,.30);
  --glass-border-lit:rgba(160,108,255,.62);
  --bone:#f1ecff; --bone-80:rgba(236,229,255,.86); --bone-62:#b9acdc;
  --bone-34:rgba(196,180,240,.55); --bone-18:rgba(196,180,240,.22);
  --st-r:14px; --st-r-s:10px; --st-r-xs:6px; --st-r-pill:999px;
  color:#f1ecff;
}

/* ---- 2. type: one register ---------------------------------------------- */
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(--st-ui); letter-spacing:.01em;
}
body.crt-lab .micro-label{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-62); text-shadow:none;
}
body.crt-lab button, body.crt-lab input, body.crt-lab select, body.crt-lab textarea{ font-family:var(--st-ui); }

/* ---- 2b. the register's corners (the CRT layer squared all of these) ---- */
body.crt-lab .deck, body.crt-lab .lab-rail-stack, body.crt-lab #region-pop,
body.crt-lab .ctx-rail, body.crt-lab .gcard, body.crt-lab .gframe{ border-radius:var(--st-r); }
body.crt-lab .btn, body.crt-lab .rail-action, body.crt-lab .deck-tabs button,
body.crt-lab .deck-name input, 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-sw,
body.crt-lab .ss-tabs, body.crt-lab .ss-tab, body.crt-lab .ss-filter-tab, body.crt-lab .ss-seg-btn,
body.crt-lab .vp-mesh-status, body.crt-lab .vp-loading, body.crt-lab .vp-readout,
body.crt-lab .vp-rotate, body.crt-lab .vp-exposure, body.crt-lab .vp-autorotate,
body.crt-lab #drawer-close, body.crt-lab .ctx-collapse, body.crt-lab .preset-row,
body.crt-lab .preset-row .pact button, body.crt-lab #region-hint, body.crt-lab #region-tip,
body.crt-lab .showcase-hint{ border-radius:var(--st-r-s); }
body.crt-lab .deck-sex-seg{ border-radius:var(--st-r-s); }
body.crt-lab .deck-sex-seg button{ border-radius:calc(var(--st-r-s) - 3px); }
body.crt-lab .deck-pattern-chips button, body.crt-lab .ss-chip-row button{ border-radius:var(--st-r-pill); }
body.crt-lab .skin-cycler, body.crt-lab .vp-specnav .nav-arrow, body.crt-lab .skin-cycler button{ border-radius:var(--st-r-pill); }
body.crt-lab .slot{ border-radius:var(--st-r-s); }
body.crt-lab .slot .slot-sw{ border-radius:var(--st-r-s); }
body.crt-lab .slot.eye .slot-sw{ border-radius:50%; }
body.crt-lab .slot .slot-badge{ border-radius:var(--st-r-pill); }
body.crt-lab .toggle .switch{ border-radius:var(--st-r-pill); }
body.crt-lab .toggle .switch::after{ border-radius:50%; }
body.crt-lab .rail-colors button, body.crt-lab .rail-custom{ border-radius:50%; }
body.crt-lab .ctx-species-list::-webkit-scrollbar-thumb{ border-radius:var(--st-r-pill); }
body.crt-lab .vp-specnav .spec-name .dot{ border-radius:50%; }

/* ---- 3. panel surfaces: the card face, a hairline edge, the chisel ------ */
body.crt-lab .deck, body.crt-lab .lab-rail-stack, body.crt-lab #region-pop, body.crt-lab .ctx-rail{
  background:var(--st-face);
  border:1px solid var(--st-edge);
  box-shadow:var(--st-shadow);
  -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1);
}
@media (min-width:901px){
  body.crt-lab .deck{ background:var(--st-face); padding:14px 18px 15px; }
  body.crt-lab .deck-wells{ border-top:1px solid var(--st-edge); }
  body.crt-lab .deck-actions{ border-top:1px solid var(--st-edge); }
}
body.crt-lab .deck::before{ left:16px; right:16px; top:0; height:1px; background:var(--st-chisel); }
body.crt-lab #panel{
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.08) 0%,rgba(16,12,27,.96) 22%,rgba(11,8,19,.98) 100%);
  border-left:1px solid var(--st-edge); box-shadow:-30px 0 80px -40px rgba(0,0,0,.9);
}
body.crt-lab #region-pop{ background:rgba(15,11,25,.86); }

/* ---- 4. buttons: the grammar's control - mono caps, 10px corner -------- */
body.crt-lab .btn, body.crt-lab .rail-action, body.crt-lab .deck-tabs button{
  font-family:var(--mono); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(255,255,255,.035); border:1px solid var(--st-edge); color:var(--bone-80);
  text-shadow:none; box-shadow:none;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .16s ease,box-shadow .2s ease;
}
body.crt-lab .btn:hover, body.crt-lab .rail-action:hover, body.crt-lab .deck-tabs button:hover{
  background:rgba(var(--accent-rgb),.12); border-color:var(--st-edge-hi); color:var(--bone); box-shadow:none;
}
body.crt-lab .btn.primary{
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.95),rgba(var(--accent-rgb),.72));
  border:1px solid rgba(var(--accent-rgb),.95); color:#fff; text-shadow:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 26px -14px rgba(var(--accent-rgb),.9);
}
body.crt-lab .btn.primary:hover{
  background:linear-gradient(180deg,rgba(var(--accent-rgb),1),rgba(var(--accent-rgb),.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 12px 30px -14px rgba(var(--accent-rgb),1);
  transform:translateY(-1px);
}
body.crt-lab .btn.save{ border-color:rgba(var(--accent-rgb),.6); color:var(--bone); }
body.crt-lab .btn:disabled, body.crt-lab .btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
body.crt-lab .deck-actions .btn.dock-secondary{ font-size:11px; min-height:38px; }
/* the deck's commit button (lab.css styles it at 0,4,0 - matched + 1 here) */
body.crt-lab .deck-actions .btn.primary.deck-apply{
  letter-spacing:.14em; font-size:12.5px; border-radius:var(--st-r-s); color:#fff; text-shadow:none;
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.95),rgba(var(--accent-rgb),.72));
  border:1px solid rgba(var(--accent-rgb),.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 26px -14px rgba(var(--accent-rgb),.9);
}
body.crt-lab .deck-actions .btn.primary.deck-apply:hover{
  background:linear-gradient(180deg,rgba(var(--accent-rgb),1),rgba(var(--accent-rgb),.82));
}
@media (min-width:901px){
  body.crt-lab .deck-actions .btn.primary.deck-apply{ letter-spacing:.14em; font-size:13px; padding:10px 30px; }
}
body.crt-lab .rail-action{ font-size:10.5px; min-height:36px; }
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(--bone); border-color:rgba(var(--accent-rgb),.85);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.30),rgba(var(--accent-rgb),.10));
  text-shadow:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---- 5. the deck's own controls ---------------------------------------- */
body.crt-lab .deck-name input{
  background:rgba(0,0,0,.28); border:1px solid var(--st-edge); color:var(--bone);
  font-family:var(--st-ui); font-size:15px; font-weight:600;
}
body.crt-lab .deck-name input:focus{ border-color:rgba(var(--accent-rgb),.9); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22); }
body.crt-lab .deck-pattern-chips button{
  font-family:var(--mono); font-size:13px; font-weight:700; min-width:40px;
  background:rgba(255,255,255,.035); border:1px solid var(--st-edge); color:var(--bone-80);
}
body.crt-lab .deck-pattern-chips button.active{
  color:#fff; border-color:rgba(var(--accent-rgb),.95);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.9),rgba(var(--accent-rgb),.65));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
body.crt-lab .deck-sex-seg{ background:rgba(0,0,0,.28); border:1px solid var(--st-edge); }
body.crt-lab .deck-sex-seg button{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--bone-62); }
body.crt-lab .deck-sex-seg button[aria-pressed=true]{
  color:#fff; text-shadow:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.9),rgba(var(--accent-rgb),.65));
}
body.crt-lab .slot .slot-sw{ border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 2px 6px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.35); }
body.crt-lab .slot:hover .slot-sw{ box-shadow:inset 0 2px 6px rgba(0,0,0,.4),0 0 0 2px rgba(var(--accent-rgb),.85),0 8px 18px -8px rgba(var(--accent-rgb),.8); }
body.crt-lab .slot .slot-meta label{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.12em; }
body.crt-lab .slot .slot-badge{ font-family:var(--mono); letter-spacing:.1em; text-shadow:none; background:rgba(0,0,0,.3); border:1px solid var(--st-edge); }
body.crt-lab .dock-admin-banner{ border-radius:var(--st-r-s); }

/* ---- 6. the stage instruments ------------------------------------------ */
/* the page title over the stage: the grammar's eyebrow + display title */
body.crt-lab .crt-title{
  font-family:var(--display-f); font-size:30px; font-weight:700; line-height:1; letter-spacing:.02em;
  text-transform:uppercase; color:var(--bone); text-shadow:0 2px 18px rgba(0,0,0,.55);
}
body.crt-lab .crt-title .crt-prompt, body.crt-lab .crt-title .crt-cursor{ display:none; }
body.crt-lab .crt-sub{
  top:52px; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.2em;
  color:rgba(var(--accent-rgb),1); text-shadow:none;
}
@media (max-width:1100px){ body.crt-lab .crt-title{ font-size:22px; } }
body.crt-lab .vp-corner{ border-color:rgba(var(--accent-rgb),.35); }
body.crt-lab .vp-corner.tl{ border-top-left-radius:var(--st-r); }
body.crt-lab .vp-corner.tr{ border-top-right-radius:var(--st-r); }
body.crt-lab .vp-corner.bl{ border-bottom-left-radius:var(--st-r); }
body.crt-lab .vp-corner.br{ border-bottom-right-radius:var(--st-r); }
body.crt-lab .vp-corner::after{ display:none; }
/* the scanline raster goes: depth comes from light, not a ruled ground */
body.crt-lab #lab-grain{ opacity:.35; animation:none; }
body.crt-lab #viewport-wrap::before{ opacity:.4; }

body.crt-lab .vp-readout, body.crt-lab .vp-mesh-status, body.crt-lab .vp-rotate, body.crt-lab .vp-exposure,
body.crt-lab .vp-autorotate, body.crt-lab .vp-loading, body.crt-lab .showcase-hint, body.crt-lab #region-hint{
  background:rgba(14,10,24,.78); border:1px solid var(--st-edge);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.9); text-shadow:none;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
body.crt-lab .vp-readout{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--bone-80); }
body.crt-lab .vp-readout .k{ color:rgba(var(--accent-rgb),.85); }
body.crt-lab .vp-mesh-status{ font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.14em; }
body.crt-lab .vp-mesh-status.online, body.crt-lab .vp-mesh-status.offline{ text-shadow:none; }
body.crt-lab .vp-mesh-status::before{ border-radius:50%; }
body.crt-lab .vp-autorotate{ font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; color:var(--bone-80); }
body.crt-lab .vp-autorotate:hover{ color:var(--bone); border-color:var(--st-edge-hi); }
body.crt-lab .vp-autorotate[aria-pressed=true]{
  color:#fff; border-color:rgba(var(--accent-rgb),.9);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.45),rgba(var(--accent-rgb),.2));
}
body.crt-lab .vp-loading{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; }
body.crt-lab .showcase-hint{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--bone-80); }
body.crt-lab .vp-rotate input[type=range], body.crt-lab .vp-exposure input[type=range]{ border-radius:var(--st-r-pill); }
body.crt-lab .vp-rotate input[type=range]::-webkit-slider-thumb, body.crt-lab .vp-exposure input[type=range]::-webkit-slider-thumb{ box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25); }
body.crt-lab .vp-rotate input[type=range]::-moz-range-thumb, body.crt-lab .vp-exposure input[type=range]::-moz-range-thumb{ box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25); }
body.crt-lab .vp-rotate .rot-ico, body.crt-lab .vp-exposure .exp-ico{ text-shadow:none; }
body.crt-lab #skin-cycler-name{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--bone-80); }
body.crt-lab .vp-specnav .spec-name{ font-family:var(--display-f); font-size:26px; letter-spacing:.02em; color:var(--bone); text-transform:uppercase; }
body.crt-lab .vp-specnav .nav-arrow:hover, body.crt-lab .skin-cycler button:hover{ text-shadow:none; }
body.crt-lab .vp-rot{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; }

/* ---- 7. the species rail ------------------------------------------------ */
body.crt-lab .ctx-rail{ padding:12px 10px 10px; }
body.crt-lab .ctx-rail::before{ box-shadow:none; }
body.crt-lab .ctx-rail::after{ box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25); }
body.crt-lab .ctx-title{ font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.2em; color:var(--bone-62); text-shadow:none; }
body.crt-lab .ctx-title::after{ box-shadow:none; background:linear-gradient(90deg,rgba(var(--accent-rgb),.8),rgba(var(--accent-rgb),.2) 60%,transparent); }
body.crt-lab .ctx-species{
  font-family:var(--st-ui); font-size:13px; font-weight:600; letter-spacing:.01em;
  border:1px solid transparent; border-radius:var(--st-r-s); padding:7px 10px; color:var(--bone-80);
}
body.crt-lab .ctx-species:hover{ background:rgba(var(--accent-rgb),.10); border-color:var(--st-edge); padding-left:12px; color:var(--bone); }
body.crt-lab .ctx-species.active{
  color:#fff; text-shadow:none; border-color:rgba(var(--accent-rgb),.8);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.34),rgba(var(--accent-rgb),.12));
}
body.crt-lab .ctx-collapse{ background:rgba(255,255,255,.04); border:1px solid var(--st-edge); }
body.crt-lab .ctx-collapse:hover{ text-shadow:none; }

/* ---- 8. the lab rail (stage colours + quick actions) -------------------- */
body.crt-lab .lab-rail-stack{ padding:12px 11px; gap:9px; }
body.crt-lab .rail-colors button, body.crt-lab .rail-custom{ border-color:rgba(255,255,255,.25); }
body.crt-lab .rail-colors button.active{ box-shadow:0 0 0 2px rgba(12,9,21,.95),0 0 0 4px rgba(var(--accent-rgb),1); }
body.crt-lab .rail-fab{ border-radius:50%; }

/* ---- 9. the drawer (library + settings) -------------------------------- */
body.crt-lab .drawer-head{ border-bottom:1px solid var(--st-edge); }
body.crt-lab .drawer-head strong{
  font-family:var(--display-f); font-size:26px; font-weight:700; line-height:1.05; letter-spacing:.02em;
  color:var(--bone); text-shadow:none; text-transform:uppercase;
}
body.crt-lab #drawer-close{ background:rgba(255,255,255,.04); border:1px solid var(--st-edge); color:var(--bone-80); }
body.crt-lab #drawer-close:hover{ border-color:var(--st-edge-hi); color:var(--bone); }
/* ge-signature.css sets every h2 to the display face with !important; a
   drawer section head is a micro-label in the register */
body.crt-lab #panel h2{
  font-family:var(--mono) !important; font-weight:700 !important; font-size:10.5px; letter-spacing:.18em;
  color:var(--bone-80); text-shadow:none;
}
body.crt-lab #panel h2::before{ box-shadow:none; }
body.crt-lab #panel .section+.section{ border-top-color:var(--st-edge); }
body.crt-lab #panel .ss-import-note, body.crt-lab #panel .ss-lede, body.crt-lab #panel .ss-num-help{
  font-family:var(--st-ui); font-size:12px; line-height:1.6; letter-spacing:.005em; color:var(--bone-62);
}
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,.28); border-color:var(--st-edge); color:var(--bone); font-family:var(--st-ui); font-size:13.5px;
}
body.crt-lab textarea{ font-family:var(--mono); font-size:12px; }
body.crt-lab select.species-select:focus, body.crt-lab input:focus, body.crt-lab textarea:focus{
  border-color:rgba(var(--accent-rgb),.9); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2);
}
body.crt-lab .toggle{ background:rgba(255,255,255,.03); border:1px solid var(--st-edge); }
body.crt-lab .toggle input:checked+.switch::after{ box-shadow:none; background:#fff; }
body.crt-lab .preset-row{ background:rgba(255,255,255,.03); border:1px solid var(--st-edge); }
body.crt-lab .preset-row:hover{ border-color:var(--st-edge-hi); box-shadow:none; background:rgba(var(--accent-rgb),.08); }
body.crt-lab .preset-row .pn{ font-family:var(--st-ui); font-size:13.5px; font-weight:600; letter-spacing:0; }
body.crt-lab .preset-row .pm{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; }
body.crt-lab .preset-empty{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; }
body.crt-lab .gcard{ background:rgba(255,255,255,.03); border:1px solid var(--st-edge); }
body.crt-lab .gcard:hover{ border-color:var(--st-edge-hi); box-shadow:0 14px 30px -18px rgba(0,0,0,.9); }
body.crt-lab .gcard.selected{ border-color:rgba(var(--accent-rgb),1); box-shadow:0 0 0 1px rgba(var(--accent-rgb),1); }
body.crt-lab .gname{ font-family:var(--display-f); font-size:15px; letter-spacing:.02em; text-transform:uppercase; }
body.crt-lab .ss-chip-row button, body.crt-lab .ss-seg-btn, body.crt-lab .ss-filter-tab{ font-family:var(--mono); letter-spacing:.08em; }
body.crt-lab .ss-preview-bar{ border-radius:var(--st-r-s); }
body.crt-lab .ss-mix-row{ border-radius:var(--st-r-s); }

/* region popover (zone colour picker) */
body.crt-lab .rp-title{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.18em; color:var(--bone); text-shadow:none; }
body.crt-lab #region-tip{ font-family:var(--mono); }

/* toasts */
body.crt-lab .toast{
  border-radius:var(--st-r-s); font-family:var(--st-ui); font-size:13px; letter-spacing:0;
  background:rgba(15,11,25,.94); border:1px solid var(--st-edge); box-shadow:0 18px 40px -20px rgba(0,0,0,.9);
}

/* ---- 10. the two pins over the stage (SKIN ANFRAGEN, publish) ----------- */
body.crt-lab #skinreq-fab, body.crt-lab #fi-publish-fab{
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:11px 18px; border-radius:var(--st-r-pill); color:#fff;
  background:linear-gradient(180deg,#b184ff,#8a4df0); border:1px solid rgba(198,166,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 30px -14px rgba(138,77,240,.95);
}
body.crt-lab #skinreq-fab:hover, body.crt-lab #fi-publish-fab:hover{
  background:linear-gradient(180deg,#bc95ff,#9459f5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 34px -14px rgba(138,77,240,1);
}
body.crt-lab #fi-publish-fab{ background:rgba(15,11,25,.88); border-color:rgba(198,166,255,.6); color:#e8dcff; box-shadow:0 14px 30px -18px rgba(0,0,0,.9); }
body.crt-lab #skinreq-fab:focus-visible{ outline:2px solid #e8dcff; outline-offset:3px; }
@media (max-width:760px),(max-width:920px) and (max-height:650px){
  body.crt-lab #skinreq-fab, body.crt-lab #fi-publish-fab{ font-size:11px; padding:9px 14px; }
}

/* ---- 11. the dialogs: the framework's buy-dialog shape ----------------- */
body.crt-lab #fi-publish-scrim, body.crt-lab .sg-scrim{
  background:rgba(7,5,14,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
body.crt-lab #fi-publish, body.crt-lab .sg-dialog{
  border-radius:var(--st-r); border:1px solid var(--st-edge-hi);
  background:var(--st-face); color:var(--bone);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95); padding:24px 24px 20px;
  font-family:var(--st-ui);
}
body.crt-lab #fi-publish::before, body.crt-lab .sg-dialog::before{
  content:""; position:absolute; left:18px; right:18px; top:0; height:1px; background:var(--st-chisel); pointer-events:none;
}
body.crt-lab #fi-publish .fp-head strong, body.crt-lab .sg-dialog .fp-head strong{
  font-family:var(--display-f); font-size:24px; font-weight:700; line-height:1.1; letter-spacing:.01em;
  text-transform:uppercase; color:var(--bone);
}
body.crt-lab #fi-publish .micro-label, body.crt-lab .sg-dialog .micro-label{ color:var(--bone-62); }
body.crt-lab #fi-publish .fp-head .micro-label, body.crt-lab .sg-dialog .fp-head .micro-label{ color:#c6a6ff; }
body.crt-lab #fi-publish-close, body.crt-lab .sg-close{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0;
  border:1px solid var(--st-edge); border-radius:var(--st-r-s); background:transparent; color:var(--bone-80); opacity:1;
}
body.crt-lab #fi-publish-close:hover, body.crt-lab .sg-close:hover{ border-color:var(--st-edge-hi); color:var(--bone); }
body.crt-lab #fi-publish input[type=text], body.crt-lab #fi-publish input[type=number],
body.crt-lab .sg-dialog input[type=text], body.crt-lab .sg-dialog textarea{
  border-radius:var(--st-r-s); border:1px solid var(--st-edge); background:rgba(0,0,0,.3); color:var(--bone);
  font-family:var(--st-ui); font-size:13.5px;
}
body.crt-lab #fi-publish input:focus, body.crt-lab .sg-dialog input:focus, body.crt-lab .sg-dialog textarea:focus{
  outline:none; border-color:rgba(160,108,255,.9); box-shadow:0 0 0 3px rgba(160,108,255,.22);
}
body.crt-lab #fi-publish .fp-static, body.crt-lab .sg-dialog .fp-static{
  border-radius:var(--st-r-s); background:rgba(160,108,255,.10); border:1px solid var(--st-edge); color:var(--bone);
  font-family:var(--st-ui); font-weight:600;
}
body.crt-lab #fi-publish .fp-note, body.crt-lab .sg-dialog .fp-note{ color:var(--bone-62); opacity:1; font-size:12px; }
body.crt-lab #fi-publish .fp-actions, body.crt-lab .sg-dialog .fp-actions{ padding-top:14px; border-top:1px solid var(--st-edge); }
body.crt-lab #fi-publish .btn, body.crt-lab .sg-dialog .btn{
  font-family:var(--mono); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:11px;
  min-height:40px; padding:0 16px; border-radius:var(--st-r-s);
  background:rgba(255,255,255,.04); border:1px solid var(--st-edge); color:var(--bone-80); box-shadow:none; text-shadow:none;
}
body.crt-lab #fi-publish .btn:hover, body.crt-lab .sg-dialog .btn:hover{ border-color:var(--st-edge-hi); color:var(--bone); background:rgba(160,108,255,.12); }
body.crt-lab #fi-publish .btn.primary, body.crt-lab .sg-dialog .btn.primary{
  color:#fff; border-color:rgba(198,166,255,.8); background:linear-gradient(180deg,#b184ff,#8a4df0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 28px -14px rgba(138,77,240,.95);
}
body.crt-lab #fi-publish .btn.primary:hover, body.crt-lab .sg-dialog .btn.primary:hover{ background:linear-gradient(180deg,#bc95ff,#9459f5); }
body.crt-lab #fi-publish .btn:disabled, body.crt-lab .sg-dialog .btn:disabled{ opacity:.45; }
body.crt-lab .fp-tier{ border-radius:var(--st-r-s); background:rgba(255,255,255,.03); border:1px solid var(--st-edge); }
body.crt-lab .fp-tier b{ font-family:var(--mono); color:var(--bone); }
body.crt-lab .fp-tier i{ color:var(--bone-62); }
body.crt-lab .fp-tier.is-active{ border-color:rgba(160,108,255,.85); background:rgba(160,108,255,.14); }
body.crt-lab #fi-publish .fp-shot{ border-radius:var(--st-r-s); }
body.crt-lab #fi-publish .fp-status, body.crt-lab #skinreq-wrap .skinreq-status{ border-radius:var(--st-r-s); }

/* ---- 12. light theme: the studio stays a dark stage, its glass keeps
   light ink (the dialogs used to inherit the light theme's dark ink) ---- */
:root[data-theme="light"] body.crt-lab #fi-publish, :root[data-theme="light"] body.crt-lab .sg-dialog{ color:#f1ecff; }
:root[data-theme="light"] body.crt-lab #fi-publish strong, :root[data-theme="light"] body.crt-lab .sg-dialog strong{ color:#f1ecff; }
:root[data-theme="light"] body.crt-lab .sg-dialog .fp-static, :root[data-theme="light"] body.crt-lab #fi-publish .fp-static{ color:#f1ecff; }
:root[data-theme="light"] body.crt-lab #panel{ color:#f1ecff; }

/* ---- 13. reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  body.crt-lab .btn, body.crt-lab .rail-action{ transition:none; }
  body.crt-lab .btn.primary:hover{ transform:none; }
}