/* ============================================================================
   lab-ui — shared interface kit for the hubmerto tools
   Skin: classic pro app on a Leopard-era Mac (FontLab 5). Light pinstriped
   chrome, dense icon toolbars in bevelled groups, a second row of tool
   dropdowns, a vertical tool rail, the properties column as a dock of palettes
   with glossy title bars, the viewport as a document window with its own title
   bar, ruler and preview field, a status bar with a hint left and cells right.
   Only the document is dark: deep navy. One file, no dependencies.
   ============================================================================ */

/* skin: dark charcoal chrome with glossy gradients and real shadows; the document is deep navy */
:root {
  --lab-chrome-hi: #474b58;
  --lab-chrome-lo: #22252e;
  --lab-chrome-line: #000;
  --lab-outline: rgba(255,255,255,.34);   /* the white hairline on widgets and groups */
  --lab-outline-soft: rgba(255,255,255,.18);
  --lab-gloss: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.07) 48%, rgba(0,0,0,.18) 52%, rgba(0,0,0,.05));
  --lab-chrome-text: #ececf0;
  --lab-chrome-dim: #a6a6ae;
  --lab-chrome-faint: #6f6f78;
  --lab-bevel-hi: rgba(255,255,255,.22);
  --lab-bevel-lo: rgba(0,0,0,.75);

  --lab-pal-bg: #1f2128;
  --lab-pal-title-hi: #565b68;
  --lab-pal-title-lo: #2b2e37;
  --lab-pal-line: #000;

  --lab-doc-bg: #070914;
  --lab-doc-title-hi: #66708a;
  --lab-doc-title-lo: #2f3545;
  --lab-marker: #e8321f;

  --lab-field: #0e1016;
  --lab-field-line: rgba(255,255,255,.3);
  --lab-accent: #3d7ddc;
  --lab-accent-hover: #4f8ce6;
  --lab-accent-dark: #1f4f9c;
  --lab-ok: #5ec46b;
  --lab-warn: #e0b34a;
  --lab-danger: #e04a4a;
  --lab-record: #e23b3b;

  --lab-bg-0: #07080c;
  --lab-bg-1: var(--lab-doc-bg);
  --lab-bg-2: #15161b;
  --lab-bg-3: var(--lab-pal-bg);
  --lab-bg-4: var(--lab-pal-title-lo);
  --lab-bg-5: #3a3e4a;
  --lab-bg-6: #4a4e5a;
  --lab-bg-7: #585c69;
  --lab-line-0: #000;
  --lab-line-1: #141416;
  --lab-line-2: #4a4e5a;
  --lab-fg: var(--lab-chrome-text);
  --lab-fg-dim: var(--lab-chrome-dim);
  --lab-fg-faint: var(--lab-chrome-faint);
  --lab-fg-on-accent: #fff;
  --lab-accent-soft: #24406a;

  --lab-font: "Lucida Grande", "Lucida Sans Unicode", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --lab-mono: "Monaco", "Menlo", ui-monospace, "SF Mono", Consolas, monospace;
  --lab-fs: 11px;
  --lab-fs-sm: 10.5px;
  --lab-fs-xs: 9.5px;

  --lab-radius: 3px;
  --lab-row: 19px;
  --lab-gap: 3px;
  --lab-top: 22px;
  --lab-tools: 28px;
  --lab-tools2: 24px;
  --lab-rail: 28px;
  --lab-status: 20px;
  --lab-side: 290px;
  --lab-label: 44%;
}

/* ---------------------------------------------------------------- reset */
.lab, .lab * { box-sizing: border-box; }
.lab { margin: 0; height: 100%; }
html.lab-root, html.lab-root body { height: 100%; }

.lab {
  background: var(--lab-bg-0);
  color: var(--lab-fg);
  font: var(--lab-fs)/1.35 var(--lab-font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.lab ::selection { background: var(--lab-accent); color: #fff; }
.lab ::-webkit-scrollbar { width: 11px; height: 11px; }
.lab ::-webkit-scrollbar-track { background: #1a1a1e; border-left: 1px solid #000; }
.lab ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #7f7f86, #565b68); border: 1px solid #111; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.lab kbd {
  font: var(--lab-fs-xs)/1 var(--lab-mono);
  background: #3a3e4a; color: #eee;
  border: 1px solid #111; border-bottom-width: 2px;
  border-radius: 2px; padding: 1px 4px;
}
.lab code { font: inherit; font-family: var(--lab-mono); }
.lab a { color: var(--lab-accent-hover); text-decoration: none; }
.lab a:hover { text-decoration: underline; }

/* chrome surfaces */
.lab-chrome {
  background: linear-gradient(var(--lab-chrome-hi), var(--lab-chrome-lo));
  box-shadow: inset 0 1px 0 var(--lab-bevel-hi), 0 1px 0 var(--lab-chrome-line);
}
.lab-pinstripe {
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px), linear-gradient(var(--lab-chrome-hi), var(--lab-chrome-lo));
}

/* ---------------------------------------------------------------- shell */
.lab-shell {
  display: grid;
  height: 100%;
  grid-template-rows: var(--lab-top) var(--lab-tools) var(--lab-tools2) 1fr var(--lab-status);
  grid-template-columns: var(--lab-rail) 1fr var(--lab-side);
  grid-template-areas:
    "top top top"
    "tools tools tools"
    "tools2 tools2 tools2"
    "rail view side"
    "status status status";
  background: var(--lab-bg-0);
}
.lab-shell.lab-side-left {
  grid-template-columns: var(--lab-rail) var(--lab-side) 1fr;
  grid-template-areas:
    "top top top"
    "tools tools tools"
    "tools2 tools2 tools2"
    "rail side view"
    "status status status";
}
.lab-shell.lab-no-rail { --lab-rail: 0px; }
.lab-shell.lab-no-tools2 { --lab-tools2: 0px; }
.lab-shell.lab-side-wide { --lab-side: 330px; }

/* ---------------------------------------------------------------- menu bar */
.lab-top {
  grid-area: top;
  display: flex; align-items: stretch;
  background: linear-gradient(#3e424d 0%, #2c2f38 48%, #1c1e25 52%, #15161b 100%);
  color: var(--lab-chrome-text);
  border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 var(--lab-bevel-hi), 0 2px 6px rgba(0,0,0,.7);
  padding: 0 6px 0 0;
  overflow: visible; position: relative; z-index: 70;
}
.lab-brand {
  display: flex; align-items: center; gap: 7px;
  padding: 0 12px 0 10px; white-space: nowrap;
}
.lab-brand .lab-mark {
  width: 13px; height: 13px; border-radius: 3px; flex: none;
  background: linear-gradient(#7fb0f8 0%, #4a86e2 48%, #2b62c4 52%, #2358b8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.25);
}
.lab-brand b { font-weight: 700; font-size: 12px; }
.lab-brand span { color: var(--lab-chrome-dim); font-size: var(--lab-fs-sm); }
.lab-menu { display: flex; align-items: stretch; }
.lab-menu > *, .lab-menu .lab-menu-item > button {
  display: flex; align-items: center; padding: 0 10px; color: var(--lab-chrome-text);
  font: 12px/1 var(--lab-font); cursor: default; background: none; border: 0; height: 100%;
}
.lab-menu > button:hover, .lab-menu .lab-menu-item > button:hover, .lab-menu .lab-menu-item > button.open { background: var(--lab-accent); color: #fff; }
.lab-menu .lab-menu-item { position: relative; display: flex; align-items: stretch; }
.lab-dropdown {
  position: absolute; top: 100%; left: 0; min-width: 220px; z-index: 80;
  background: linear-gradient(rgba(44,44,50,.98), rgba(26,26,30,.98)); color: var(--lab-chrome-text);
  border: 1px solid var(--lab-outline); border-top: 0;
  box-shadow: 0 14px 34px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08); padding: 4px 0; border-radius: 0 0 5px 5px;
}
.lab-dropdown[hidden] { display: none; }
.lab-dropdown button {
  display: flex; width: 100%; align-items: center; gap: 10px; height: 21px; padding: 0 22px 0 20px;
  background: none; border: 0; color: var(--lab-chrome-text); font: 12px/1 var(--lab-font);
  text-align: left; cursor: default; white-space: nowrap;
}
.lab-dropdown button:hover { background: var(--lab-accent); color: #fff; }
.lab-dropdown button:disabled { opacity: .4; pointer-events: none; }
.lab-dropdown button svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lab-dropdown button .lab-kbd { margin-left: auto; padding-left: 24px; color: var(--lab-chrome-dim); font: 11px/1 var(--lab-font); }
.lab-dropdown button:hover .lab-kbd { color: rgba(255,255,255,.85); }
.lab-dropdown hr { border: 0; border-top: 1px solid #000; box-shadow: 0 1px 0 var(--lab-bevel-hi); margin: 4px 0; }
.lab-dropdown .lab-dd-head { font-size: var(--lab-fs-xs); color: var(--lab-chrome-faint); text-transform: uppercase; letter-spacing: .1em; padding: 4px 20px 2px; }
.lab-top .lab-spacer { flex: 1; }
.lab-top .lab-toolbar { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-size: 12px; }

/* ---------------------------------------------------------------- icon toolbar (row 1) */
.lab-tools {
  grid-area: tools;
  display: flex; align-items: center;
  padding: 0 5px;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), linear-gradient(var(--lab-chrome-hi) 0%, #33363f 50%, var(--lab-chrome-lo) 100%);
  box-shadow: inset 0 1px 0 var(--lab-bevel-hi), 0 3px 8px rgba(0,0,0,.65);
  border-bottom: 1px solid var(--lab-chrome-line);
  overflow: hidden; white-space: nowrap; position: relative; z-index: 6;
}
.lab-tgroup {
  display: flex; align-items: center;
  height: 21px; margin: 0 3px;
  border: 1px solid var(--lab-outline); border-radius: 3px;
  background: linear-gradient(#4a4e5b 0%, #383c47 48%, #2a2d36 52%, #262932 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.8), 0 0 0 1px #000;
  overflow: hidden;
}
.lab-tsep { width: 1px; height: 18px; background: #000; box-shadow: 1px 0 0 var(--lab-outline-soft); margin: 0 5px; flex: none; }
.lab-tools .lab-spacer, .lab-tools2 .lab-spacer { flex: 1; }
.lab-tlabel { font-size: var(--lab-fs-xs); color: var(--lab-chrome-dim); margin: 0 5px 0 6px; white-space: nowrap; }
.lab-tool {
  height: 19px; min-width: 23px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: transparent; border: 0; border-right: 1px solid rgba(0,0,0,.7); box-shadow: 1px 0 0 rgba(255,255,255,.07);
  color: var(--lab-chrome-text); font: var(--lab-fs-sm)/1 var(--lab-font); cursor: default; white-space: nowrap;
}
.lab-tgroup > .lab-tool:last-child { border-right: 0; }
.lab-tool svg, .lab-btn svg, .lab-rail svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lab-tool:hover { background: linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.06)); }
.lab-tool:active { background: rgba(0,0,0,.4); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.lab-tool:focus-visible { outline: 1px solid var(--lab-accent); outline-offset: -1px; }
.lab-tool.on, .lab-tool[aria-pressed="true"] { background: linear-gradient(#2358b8 0%, #2b62c4 48%, #4a86e2 52%, #5f97ea 100%); color: #fff; box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.lab-tool.lab-primary { background: linear-gradient(#7fb0f8 0%, #4a86e2 48%, #2b62c4 52%, #2358b8 100%); color: #fff; padding: 0 9px; text-shadow: 0 1px 0 rgba(0,0,0,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.lab-tool.lab-primary:hover { background: linear-gradient(#6ea6f5, #3a74d0); }
.lab-tool.lab-rec svg circle.lab-rec-dot { fill: var(--lab-record); stroke: none; }
.lab-tool.lab-rec.on, .lab-tool.lab-rec.rec { background: linear-gradient(#ef5a5a, #bf2f2f); color: #fff; }
.lab-tool.lab-rec.on svg circle.lab-rec-dot, .lab-tool.lab-rec.rec svg circle.lab-rec-dot { fill: #fff; animation: lab-blink 1s steps(2) infinite; }
.lab-tool:disabled { opacity: .4; pointer-events: none; }
.lab-tool .lab-tool-text { font-size: var(--lab-fs-sm); }
.lab-tool-tip {
  position: fixed; z-index: 100; pointer-events: none;
  background: linear-gradient(#fffdd9, #f1ebb0); color: #111; border: 1px solid #8a8a60;
  padding: 3px 7px; border-radius: 2px; font: 11px/1.3 var(--lab-font);
  box-shadow: 0 4px 12px rgba(0,0,0,.35); white-space: nowrap;
}
.lab-tool-tip .lab-kbd { margin-left: 8px; color: #666; font: 10px/1 var(--lab-font); }

/* icon colour families, like FontLab's coloured toolbar glyphs */
.lab-c-amber svg { color: #f2b14e; } .lab-c-green svg { color: #6fd36f; } .lab-c-cyan svg { color: #62c6ec; }
.lab-c-violet svg { color: #b58cf4; } .lab-c-pink svg { color: #f07ab8; } .lab-c-sky svg { color: #8fb6ff; } .lab-c-red svg { color: #ff6b6b; }
.lab-tool svg { filter: drop-shadow(0 1px 0 rgba(0,0,0,.8)); }
.lab-tool.lab-primary svg, .lab-tool.on svg, .lab-tool.rec svg { color: #fff; }
.lab-rail .lab-tool.on svg { color: #fff; }

/* ---------------------------------------------------------------- tool dropdown row (row 2) */
.lab-tools2 {
  grid-area: tools2;
  display: flex; align-items: center;
  padding: 0 8px;
  background: linear-gradient(#2f323b, #20222a);
  box-shadow: inset 0 1px 0 var(--lab-bevel-hi), 0 2px 6px rgba(0,0,0,.6);
  border-bottom: 1px solid var(--lab-chrome-line);
  overflow: hidden; white-space: nowrap; position: relative; z-index: 5;
}
.lab-tools2 .lab-widget { height: 18px; min-width: 118px; margin-right: 6px; }
.lab-tools2 .lab-widget.lab-num { min-width: 84px; }
.lab-tools2 .lab-tool { height: 18px; }
.lab-tools2 .lab-tgroup { height: 20px; }
.lab-shell.lab-no-tools2 .lab-tools2 { display: none; }

/* ---------------------------------------------------------------- vertical tool rail */
.lab-rail {
  grid-area: rail;
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 0;
  background: linear-gradient(90deg, #2c2f38, #1c1e25);
  border-right: 1px solid var(--lab-chrome-line);
  box-shadow: inset -1px 0 0 var(--lab-bevel-hi), 2px 0 8px rgba(0,0,0,.5);
  box-shadow: inset -1px 0 0 var(--lab-bevel-hi);
  overflow: hidden;
}
.lab-shell.lab-no-rail .lab-rail { display: none; }
.lab-rail .lab-tool { width: 22px; min-width: 22px; height: 21px; border: 0; border-bottom: 1px solid rgba(0,0,0,.5); border-radius: 0; }
.lab-rail .lab-tsep { width: 18px; height: 1px; margin: 4px 0; box-shadow: 0 1px 0 var(--lab-bevel-hi); }

/* ---------------------------------------------------------------- viewport as a document window */
.lab-view {
  grid-area: view;
  position: relative;
  background: var(--lab-doc-bg);
  min-width: 0; min-height: 0;
  overflow: hidden;
  border-left: 1px solid #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.lab-view > canvas { display: block; width: 100%; height: 100%; }
.lab-doc {
  position: absolute; left: 0; right: 0; top: 0; height: 20px; z-index: 4;
  display: flex; align-items: center; gap: 8px; padding: 0 8px;
  background: linear-gradient(var(--lab-doc-title-hi) 0%, #515a72 48%, #3a4152 52%, var(--lab-doc-title-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 #000, 0 3px 10px rgba(0,0,0,.7);
  color: #f2f2f5; font-size: 11px;
}
.lab-doc .lab-lights { display: flex; gap: 6px; margin-right: 4px; }
.lab-doc .lab-lights i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.lab-doc .lab-lights i:nth-child(1) { background: radial-gradient(circle at 40% 35%, #ff9a90, #d53a2f); }
.lab-doc .lab-lights i:nth-child(2) { background: radial-gradient(circle at 40% 35%, #ffe98a, #d1a020); }
.lab-doc .lab-lights i:nth-child(3) { background: radial-gradient(circle at 40% 35%, #9df596, #2fa534); }
.lab-doc .lab-doc-title { flex: 1; text-align: center; text-shadow: 0 1px 0 rgba(0,0,0,.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-doc .lab-doc-right { font: var(--lab-fs-xs)/1 var(--lab-mono); color: #c7cbd4; }
.lab-docbar {
  position: absolute; left: 0; right: 0; top: 20px; height: 22px; z-index: 4;
  display: flex; align-items: center; gap: 4px; padding: 0 6px;
  background: linear-gradient(#45454b, #35353a);
  border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 var(--lab-bevel-hi);
}
.lab-docbar .lab-widget { height: 17px; }
.lab-docbar .lab-widget.lab-text { flex: 1; }
.lab-docbar .lab-tool { height: 17px; min-width: 20px; }
.lab-ruler {
  position: absolute; left: 0; right: 0; top: 42px; height: 13px; z-index: 4;
  background: linear-gradient(#141828, #0d1020); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); pointer-events: none;
}
.lab-ruler canvas { width: 100%; height: 100%; display: block; }
.lab-view.lab-has-doc { padding-top: 33px; }
.lab-view.lab-has-doc.lab-has-docbar { padding-top: 55px; }
.lab-view.lab-has-doc > canvas { height: calc(100% - 33px); }
.lab-view.lab-has-doc.lab-has-docbar > canvas { height: calc(100% - 55px); }
.lab-hud {
  position: absolute; left: 10px; top: 8px;
  font: var(--lab-fs-xs)/1.5 var(--lab-mono);
  color: #9aa0b4;
  pointer-events: none; white-space: pre; z-index: 3;
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
}
.lab-view.lab-has-doc .lab-hud { top: 40px; }
.lab-view.lab-has-doc.lab-has-docbar .lab-hud { top: 62px; }
.lab-hud b { color: #fff; font-weight: 500; }
.lab-hint {
  position: absolute; left: 10px; bottom: 8px; right: 10px;
  font: var(--lab-fs-xs)/1.5 var(--lab-mono);
  color: #5b6179;
  pointer-events: none; z-index: 3;
}
.lab-drop {
  position: absolute; inset: 8px;
  border: 1px dashed var(--lab-accent);
  background: rgba(7,9,20,.8);
  color: #fff;
  display: none; align-items: center; justify-content: center;
  font-size: var(--lab-fs); letter-spacing: .2em; text-transform: uppercase;
  z-index: 5; pointer-events: none; border-radius: var(--lab-radius);
}
.lab-view.lab-has-doc .lab-drop { top: 40px; }
.lab-view.lab-has-doc.lab-has-docbar .lab-drop { top: 62px; }
.lab-view.lab-dragging .lab-drop, .lab-drop.on { display: flex; }

/* ---------------------------------------------------------------- palette dock */
.lab-side {
  grid-area: side;
  background: linear-gradient(90deg, #12131a, #171920);
  overflow-y: auto; overflow-x: hidden;
  min-height: 0;
  display: flex; flex-direction: column; gap: 7px;
  padding: 6px 6px 40px;
  border-left: 1px solid #000;
  scrollbar-gutter: stable;
}
.lab-shell.lab-side-left .lab-side { border-left: 0; border-right: 1px solid #000; }
.lab-side-head {
  position: sticky; top: -5px; z-index: 2;
  background: #15161b;
  padding: 3px 0 6px;
  margin: -6px 0 0;
}
.lab-side-head:empty { display: none; }

/* a palette: glossy title bar, round button at left, centred title, dense body */
.lab-panel {
  border: 1px solid #000;
  border-radius: 4px;
  background: var(--lab-pal-bg);
  box-shadow: 0 0 0 1px var(--lab-outline-soft), 0 6px 18px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
}
.lab-panel-head {
  display: flex; align-items: center; gap: 6px;
  height: 17px; padding: 0 6px;
  background: linear-gradient(var(--lab-pal-title-hi) 0%, #434754 48%, #303440 52%, var(--lab-pal-title-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 var(--lab-pal-line), 0 2px 4px rgba(0,0,0,.5);
  color: var(--lab-chrome-text);
  font-size: var(--lab-fs-sm); letter-spacing: .01em;
  cursor: default; user-select: none;
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
}
.lab-panel-head:hover { background: linear-gradient(#646978 0%, #4c505d 48%, #383c48 52%, #333742 100%); }
.lab-panel-head .lab-chev {
  width: 10px; height: 10px; flex: none; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.8);
  background: radial-gradient(circle at 40% 35%, #d8d8de, #6a6a72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(255,255,255,.2);
  transition: none;
}
.lab-panel-head:hover .lab-chev { background: radial-gradient(circle at 40% 35%, #ffe98a, #d1a020); }
.lab-panel.collapsed .lab-panel-head .lab-chev { background: radial-gradient(circle at 40% 35%, #9df596, #2fa534); transform: none; }
.lab-panel-head .lab-title { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-panel-head .lab-head-right { display: flex; gap: 4px; align-items: center; color: var(--lab-chrome-dim); }
.lab-panel-head .lab-badge {
  font: var(--lab-fs-xs)/1 var(--lab-mono);
  background: rgba(0,0,0,.4); color: var(--lab-chrome-dim);
  padding: 2px 4px; border-radius: 2px;
}
.lab-panel-body { padding: 5px 6px 6px; background: var(--lab-pal-bg); display: grid; gap: 2px; }
.lab-panel.collapsed .lab-panel-body { display: none; }
.lab-panel .lab-sub { font-size: var(--lab-fs-xs); color: var(--lab-chrome-faint); text-transform: uppercase; letter-spacing: .12em; margin: 5px 0 1px; }
.lab-panel.lab-floating { position: absolute; z-index: 30; width: var(--lab-side); box-shadow: 0 14px 36px rgba(0,0,0,.75); }

/* console palette: black, mono, like Output */
.lab-console {
  background: #000; color: #e8e8e8; border: 1px solid #000;
  font: var(--lab-fs-xs)/1.4 var(--lab-mono);
  padding: 4px 6px; min-height: 48px; max-height: 160px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}

/* ---------------------------------------------------------------- status bar */
.lab-status {
  grid-area: status;
  display: flex; align-items: center;
  background: linear-gradient(#3a3e4a 0%, #2c2f38 48%, #1e2027 52%, #17191e 100%);
  color: var(--lab-chrome-text);
  border-top: 1px solid #000;
  box-shadow: inset 0 1px 0 var(--lab-bevel-hi), 0 -3px 8px rgba(0,0,0,.5);
  padding: 0;
  font: 11px/1 var(--lab-font);
  white-space: nowrap; overflow: hidden;
}
.lab-status > span { display: inline-flex; align-items: center; height: 100%; padding: 0 10px; }
.lab-status > span.lab-cell { border-left: 1px solid #000; box-shadow: inset 1px 0 0 var(--lab-outline-soft); min-width: 96px; justify-content: center; font-family: var(--lab-mono); font-size: 10.5px; }
.lab-status b { color: #fff; font-weight: 700; }
.lab-status .lab-spacer { flex: 1; padding: 0; }
.lab-status .lab-dot { width: 7px; height: 7px; border-radius: 50%; background: #777; display: inline-block; margin-right: 6px; border: 1px solid rgba(0,0,0,.35); }
.lab-status .lab-dot.ok { background: var(--lab-ok); }
.lab-status .lab-dot.rec { background: var(--lab-record); animation: lab-blink 1s steps(2) infinite; }
.lab-status .lab-dot.warn { background: var(--lab-warn); }
@keyframes lab-blink { to { opacity: .25; } }

/* ---------------------------------------------------------------- rows */
.lab-row {
  display: grid;
  grid-template-columns: var(--lab-label) 1fr;
  align-items: center;
  min-height: var(--lab-row);
  gap: 5px;
}
.lab-row > label, .lab-row .lab-label {
  color: var(--lab-chrome-dim);
  font-size: var(--lab-fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: right; padding-right: 2px;
}
.lab-row.lab-full { grid-template-columns: 1fr; }
.lab-row.lab-disabled { opacity: .4; pointer-events: none; }
.lab-row[hidden] { display: none; }

/* ---------------------------------------------------------------- widgets: shared (recessed white fields) */
.lab-widget {
  height: 17px;
  border-radius: 2px;
  background: var(--lab-field);
  border: 1px solid var(--lab-field-line);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.9), 0 0 0 1px #000;
  color: var(--lab-chrome-text);
  font: var(--lab-fs-sm)/1 var(--lab-font);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center;
  min-width: 0;
}
.lab-widget:focus-within { outline: 0; box-shadow: inset 0 1px 3px rgba(0,0,0,.8), 0 0 0 2px rgba(61,125,220,.6); border-color: var(--lab-accent); }

/* number field: white, mono value, stepper tab at right, thin fill line; drag to scrub, click to type */
.lab-num { position: relative; overflow: hidden; cursor: ew-resize; padding: 0; }
.lab-num .lab-fill {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #2b62c4, #7fb0f8);
  box-shadow: 0 0 6px rgba(79,140,230,.8);
  width: 0; pointer-events: none;
}
.lab-num .lab-val {
  position: relative; z-index: 1;
  width: 100%; text-align: right;
  padding: 0 17px 0 5px; pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--lab-mono); font-size: 10px;
}
.lab-num::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 12px;
  background: linear-gradient(#565b68 0%, #434754 48%, #333742 52%, #2d303a 100%); border-left: 1px solid var(--lab-field-line); box-shadow: inset 0 1px 0 var(--lab-bevel-hi);
}
.lab-num::before {
  content: ""; position: absolute; right: 3px; top: 50%; margin-top: -4px; z-index: 2;
  width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-bottom: 3px solid #ddd;
}
.lab-num input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: #0d0f15; color: #fff;
  border: 0; outline: 1px solid var(--lab-accent); outline-offset: -1px;
  font: 10px/1 var(--lab-mono); text-align: right; padding: 0 17px 0 5px;
  display: none; z-index: 3; border-radius: 2px;
}
.lab-num.editing input { display: block; }
.lab-num.editing .lab-val, .lab-num.editing .lab-fill { visibility: hidden; }

/* select: Aqua popup */
.lab-select { padding: 0; position: relative; background: linear-gradient(#565b68 0%, #434754 48%, #333742 52%, #2d303a 100%); border-color: var(--lab-outline); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.8), 0 0 0 1px #000; }
.lab-select:hover { background: linear-gradient(#62677a 0%, #4e5361 48%, #3c404b 52%, #353944 100%); }
.lab-select select {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 100%;
  background: transparent; color: var(--lab-chrome-text);
  border: 0; outline: 0;
  font: inherit; padding: 0 20px 0 7px;
  cursor: default; text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.lab-select select option { background: #2a2d36; color: var(--lab-chrome-text); }
.lab-select::before {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 15px;
  background: linear-gradient(#6ea6f5, #2f68c6); border-left: 1px solid #1f4f9c; border-radius: 0 2px 2px 0;
}
.lab-select::after {
  content: ""; position: absolute; right: 4px; top: 50%; margin-top: -4px;
  width: 7px; height: 8px; pointer-events: none;
  background:
    linear-gradient(to top, transparent 50%, #fff 50%) no-repeat,
    linear-gradient(to bottom, transparent 50%, #fff 50%) no-repeat;
  background-size: 100% 100%;
  clip-path: polygon(50% 0, 100% 40%, 0 40%, 50% 0, 0 60%, 100% 60%, 50% 100%, 0 60%);
}

/* text */
.lab-text { padding: 0; }
.lab-text input, .lab-text textarea {
  width: 100%; height: 100%; background: transparent; color: var(--lab-chrome-text);
  border: 0; outline: 0; font: inherit; padding: 0 6px;
}
.lab-text textarea { height: auto; min-height: 17px; padding: 3px 6px; resize: vertical; line-height: 1.35; font-family: var(--lab-font); }
.lab-text.lab-multi { height: auto; }
.lab-text input::placeholder, .lab-text textarea::placeholder { color: var(--lab-chrome-faint); }
.lab-text input[type=number] { -moz-appearance: textfield; }
.lab-text input[type=number]::-webkit-inner-spin-button { opacity: .7; }

/* checkbox: Aqua */
.lab-check {
  display: flex; align-items: center; gap: 6px; height: var(--lab-row);
  cursor: default; color: var(--lab-chrome-text); font-size: var(--lab-fs-sm);
}
.lab-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.lab-check .lab-box {
  width: 12px; height: 12px; flex: none;
  border-radius: 3px; background: linear-gradient(#565b68, #2d303a); border: 1px solid var(--lab-outline);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px #000;
  position: relative;
}
.lab-check input:checked + .lab-box { background: linear-gradient(#7fb0f8 0%, #4a86e2 48%, #2b62c4 52%, #2358b8 100%); border-color: #9cc0ff; }
.lab-check input:checked + .lab-box::after {
  content: ""; position: absolute; left: 3.5px; top: 0.5px; width: 3px; height: 7px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.lab-check input:focus-visible + .lab-box { outline: 2px solid rgba(59,125,221,.55); outline-offset: 0; }
.lab-row > .lab-check { grid-column: 2; }

/* color */
.lab-color { padding: 0; gap: 0; overflow: hidden; }
.lab-color input[type=color] {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 100%; border: 0; padding: 2px; background: transparent; cursor: pointer;
}
.lab-color input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.lab-color input[type=color]::-webkit-color-swatch { border: 1px solid rgba(0,0,0,.35); border-radius: 1px; }
.lab-color .lab-hex {
  flex: none; padding: 0 6px; font-family: var(--lab-mono); font-size: var(--lab-fs-xs);
  color: var(--lab-chrome-dim); height: 100%; display: flex; align-items: center;
  border-left: 1px solid var(--lab-field-line); background: #1e2027;
}

/* native range, for hand-written pages */
.lab-range { -webkit-appearance: none; appearance: none; width: 100%; height: 17px; background: transparent; margin: 0; }
.lab-range::-webkit-slider-runnable-track { height: 4px; background: var(--lab-field); border-radius: 2px; border: 1px solid var(--lab-field-line); box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.lab-range::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -4.5px; border-radius: 50%; background: linear-gradient(#e8e8ec, #a0a0a8); border: 1px solid #111; }
.lab-range::-moz-range-track { height: 4px; background: var(--lab-field); border-radius: 2px; }
.lab-range::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: linear-gradient(#e8e8ec, #a0a0a8); border: 1px solid #111; }

/* buttons: Aqua bevelled */
.lab-btn {
  height: 17px; padding: 0 9px;
  border-radius: 3px;
  background: linear-gradient(#565b68 0%, #434754 48%, #333742 52%, #2d303a 100%); border: 1px solid var(--lab-outline);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.8), 0 0 0 1px #000;
  color: var(--lab-chrome-text); font: var(--lab-fs-sm)/1 var(--lab-font); text-shadow: 0 1px 0 rgba(0,0,0,.7);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  cursor: default; white-space: nowrap; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.lab-btn:hover { background: linear-gradient(#646978 0%, #4f5462 48%, #3d414d 52%, #373b46 100%); }
.lab-btn:active { background: linear-gradient(#262932, #333742); box-shadow: inset 0 2px 4px rgba(0,0,0,.8), 0 0 0 1px #000; }
.lab-btn:focus-visible { outline: 2px solid rgba(59,125,221,.55); outline-offset: 0; }
.lab-btn.on, .lab-btn[aria-pressed="true"], .lab-btn.lab-accent { background: linear-gradient(#7fb0f8 0%, #4a86e2 48%, #2b62c4 52%, #2358b8 100%); border-color: #a9c9ff; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 3px rgba(0,0,0,.8), 0 0 0 1px #000; }
.lab-btn.lab-accent:hover { background: linear-gradient(#8fbcfb 0%, #5a93ea 48%, #366ecf 52%, #2c62c2 100%); }
.lab-btn.lab-danger { color: #ff8a8a; }
.lab-btn.lab-danger.on { background: linear-gradient(#ef5a5a, #bf2f2f); border-color: #7a1a1a; color: #fff; }
.lab-btn.lab-rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lab-record); border: 1px solid rgba(0,0,0,.35); }
.lab-btn.lab-rec.on, .lab-btn.rec { background: linear-gradient(#ef5a5a, #bf2f2f); border-color: #7a1a1a; color: #fff; }
.lab-btn.lab-rec.on::before, .lab-btn.rec::before { background: #fff; animation: lab-blink 1s steps(2) infinite; }
.lab-btn:disabled { opacity: .4; pointer-events: none; }
.lab-btn.lab-tall { height: 21px; }
.lab-btn.lab-icon { padding: 0; width: 20px; flex: none; }
.lab-btns { display: flex; gap: var(--lab-gap); flex-wrap: wrap; }
.lab-btns > .lab-btn { flex: 1 1 auto; }
.lab-btns.lab-nowrap { flex-wrap: nowrap; }
.lab-btns.lab-grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.lab-btns.lab-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.lab-row > .lab-btns { grid-column: 2; }
.lab-row.lab-full > .lab-btns { grid-column: 1; }

/* preset grid (segmented, bevelled) */
.lab-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.lab-presets.lab-cols-2 { grid-template-columns: repeat(2, 1fr); }
.lab-presets.lab-cols-4 { grid-template-columns: repeat(4, 1fr); }
.lab-presets .lab-btn { height: 17px; padding: 0 5px; font-size: var(--lab-fs-xs); }

/* progress + status lines */
.lab-progress { height: 6px; background: var(--lab-field); border: 1px solid var(--lab-field-line); border-radius: 3px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.lab-progress i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(-45deg, #7fb0f8 0 6px, #2b62c4 6px 12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); transition: width .15s linear; }
.lab-status-line {
  font: var(--lab-fs-xs)/1.4 var(--lab-mono); color: var(--lab-chrome-dim);
  padding: 2px 0; white-space: pre-wrap; word-break: break-word;
}
.lab-status-line.ok { color: var(--lab-ok); }
.lab-status-line.warn { color: var(--lab-warn); }
.lab-status-line.err { color: var(--lab-danger); }
.lab-note { font-size: var(--lab-fs-xs); color: var(--lab-chrome-faint); line-height: 1.45; padding: 2px 0; }
.lab-sep { height: 1px; background: #000; box-shadow: 0 1px 0 var(--lab-bevel-hi); margin: 4px 0; }

/* monitor graph */
.lab-graph { padding: 0; height: 26px; overflow: hidden; background: var(--lab-field); }
.lab-graph canvas { width: 100%; height: 100%; display: block; }

/* thumbs */
.lab-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lab-gap); }
.lab-thumbs canvas, .lab-thumbs img { width: 100%; aspect-ratio: 16/9; background: #000; border: 1px solid #000; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); display: block; }

/* asset grid (library) */
.lab-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 3px; }
.lab-asset {
  position: relative; aspect-ratio: 1; border-radius: 2px;
  border: 1px solid #0a0a0c; background-color: var(--lab-bg-5);
  background-repeat: no-repeat, repeat; background-position: center, 0 0; background-size: contain, 12px 12px;
  cursor: default;
}
.lab-asset:hover { border-color: var(--lab-chrome-dim); }
.lab-asset.sel { border-color: var(--lab-accent); box-shadow: 0 0 0 1px var(--lab-accent) inset; }
.lab-dropzone {
  border: 1px dashed #5a5a60; border-radius: 2px; background: var(--lab-field);
  padding: 9px 8px; text-align: center; color: var(--lab-chrome-faint); font-size: var(--lab-fs-xs);
}
.lab-dropzone.over { border-color: var(--lab-accent); color: var(--lab-accent); }

/* tabs */
.lab-tabs { display: flex; background: var(--lab-field); padding: 2px; border-radius: 3px; border: 1px solid var(--lab-field-line); }
.lab-tabs .lab-btn { flex: 1; border: 0; background: transparent; box-shadow: none; }
.lab-tabs .lab-btn.on { background: linear-gradient(#6ea6f5, #2f68c6); color: #fff; }

/* editable regions must allow selection */
.lab input, .lab textarea, .lab [contenteditable] { user-select: text; -webkit-user-select: text; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 760px) {
  .lab-shell, .lab-shell.lab-side-left {
    grid-template-columns: 1fr;
    grid-template-rows: var(--lab-top) var(--lab-tools) var(--lab-tools2) minmax(42vh, 1fr) auto var(--lab-status);
    grid-template-areas: "top" "tools" "tools2" "view" "side" "status";
  }
  .lab-rail { display: none; }
  .lab-side { max-height: 48vh; }
  .lab-tools, .lab-tools2 { overflow-x: auto; }
  .lab-tool .lab-tool-text { display: none; }
  :root { --lab-side: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lab * { transition: none !important; animation: none !important; }
}

/* ============================================================================
   pass 4 — the close-ups: black bodies and fields with light gray hairline
   outlines, outlined stepper pills, black outlined buttons, glossy gray menu
   bar over black toolbars, black document title with cyan/blue/purple lights.
   Appended so it overrides the base rules above.
   ============================================================================ */
:root {
  --lab-outline: #8f8f96;
  --lab-outline-soft: rgba(255,255,255,.3);
  --lab-pal-bg: #0b0b0d;
  --lab-field: #000;
  --lab-field-line: #8f8f96;
  --lab-bg-2: #050507;
  --lab-bg-3: #0b0b0d;
  --lab-bg-5: #1a1a1e;
  --lab-chrome-text: #ececf0;
  --lab-chrome-dim: #b6b6bf;
  --lab-chrome-faint: #7a7a84;
  --lab-fg-dim: #b6b6bf;
  --lab-fg-faint: #7a7a84;
}
.lab { background: #000; }
.lab-shell { background: #000; }

/* menu bar: glossy gray, white type */
.lab-top { background: linear-gradient(#7b7b82 0%, #5c5c63 46%, #3b3b42 54%, #222227 100%); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.8); }
.lab-brand span { color: #d2d2d8; }
.lab-dropdown { background: linear-gradient(rgba(22,22,26,.98), rgba(8,8,10,.98)); border: 1px solid var(--lab-outline); box-shadow: 0 0 0 1px #000, 0 14px 34px rgba(0,0,0,.85); }
.lab-dropdown hr { border-top-color: #3a3a40; box-shadow: none; }

/* toolbars: black with outlined groups */
.lab-tools { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), linear-gradient(#1f1f24, #0a0a0c); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 8px rgba(0,0,0,.8); }
.lab-tgroup { background: linear-gradient(#141417, #060607); border: 1px solid var(--lab-outline); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.08); }
.lab-tool { border-right: 1px solid #2c2c32; box-shadow: none; }
.lab-tool:hover { background: linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.04)); }
.lab-tool.on, .lab-tool[aria-pressed="true"] { background: #1b1b20; box-shadow: inset 0 0 0 1px var(--lab-outline), inset 0 0 0 2px #000; color: #fff; }
.lab-tool.on svg { color: #fff; }
.lab-tsep { background: var(--lab-outline); opacity: .55; box-shadow: none; margin: 0 6px; }
.lab-tools2 { background: linear-gradient(#141417, #08080a); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.7); }
.lab-tools2 .lab-tlabel, .lab-tlabel { color: #c4c4cc; }
.lab-rail { background: linear-gradient(90deg, #0e0e11, #060608); box-shadow: inset -1px 0 0 rgba(255,255,255,.08), 2px 0 8px rgba(0,0,0,.6); }
.lab-rail .lab-tool { border: 1px solid transparent; border-radius: 3px; margin: 1px 0; height: 22px; }
.lab-rail .lab-tool:hover { border-color: #3a3a40; }
.lab-rail .lab-tool.on { background: #1b1b20; border-color: var(--lab-outline); box-shadow: 0 0 0 1px #000; }

/* document window: black glossy title, cyan / blue / purple lights, black field bar */
.lab-view { border-left: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.lab-doc { background: linear-gradient(#2c2c31 0%, #1d1d22 48%, #0f0f12 52%, #0a0a0c 100%); color: #d0d0d8; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 0 #3a3a40, 0 3px 10px rgba(0,0,0,.85); }
.lab-doc .lab-doc-title { color: #d0d0d8; text-shadow: 0 1px 0 #000; }
.lab-doc .lab-doc-right { color: #9a9aa6; }
.lab-doc .lab-lights i { border-color: #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(255,255,255,.12); }
.lab-doc .lab-lights i:nth-child(1) { background: radial-gradient(circle at 40% 35%, #9df3ff, #15a0bd); }
.lab-doc .lab-lights i:nth-child(2) { background: radial-gradient(circle at 40% 35%, #a6bdff, #2a52e2); }
.lab-doc .lab-lights i:nth-child(3) { background: radial-gradient(circle at 40% 35%, #e8a8ff, #8a2cd3); }
.lab-docbar { background: linear-gradient(#111114, #08080a); border-bottom: 1px solid #3a3a40; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.lab-ruler { background: linear-gradient(#111420, #090b14); }

/* dock + palettes: black bodies, light outlines, glossy black title */
.lab-side { background: #040406; }
.lab-side-head { background: #040406; }
.lab-panel { background: var(--lab-pal-bg); border: 1px solid var(--lab-outline); border-radius: 5px; box-shadow: 0 0 0 1px #000, 0 8px 24px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.03); }
.lab-panel-head { height: 19px; background: linear-gradient(#303035 0%, #212125 48%, #121214 52%, #0d0d0f 100%); color: #d8d8de; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 0 #3f3f46; text-shadow: 0 1px 0 #000; }
.lab-panel-head:hover { background: linear-gradient(#3a3a40 0%, #292930 48%, #19191c 52%, #121214 100%); }
.lab-panel-head .lab-chev { width: 11px; height: 11px; background: radial-gradient(circle at 40% 35%, #b4b4bb, #4b4b52); border-color: #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(255,255,255,.28); }
.lab-panel-head:hover .lab-chev { background: radial-gradient(circle at 40% 35%, #ffe98a, #d1a020); }
.lab-panel.collapsed .lab-panel-head .lab-chev { background: radial-gradient(circle at 40% 35%, #9df596, #2fa534); }
.lab-panel-head .lab-badge { background: #000; color: #b6b6bf; border: 1px solid #3a3a40; }
.lab-panel-body { background: var(--lab-pal-bg); padding: 6px 7px 7px; gap: 3px; }
.lab-row > label, .lab-row .lab-label { color: #c8c8d0; }
.lab-note { color: #8a8a94; }
.lab-status-line { color: #b6b6bf; }
.lab-sep { background: #3a3a40; box-shadow: none; }

/* fields: black, outlined */
.lab-widget { background: #000; border: 1px solid var(--lab-outline); box-shadow: 0 0 0 1px #000, inset 0 1px 2px rgba(0,0,0,.9); color: #fff; }
.lab-widget:hover { background: #050507; }
.lab-widget:focus-within { border-color: #c8c8d0; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(61,125,220,.55); }
.lab-num .lab-val { color: #fff; font-size: 10.5px; padding-right: 19px; }
.lab-num::after { width: 14px; background: linear-gradient(#1a1a1e, #000); border-left: 1px solid var(--lab-outline); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.lab-num::before {
  right: 3px; top: 50%; margin-top: -5px; width: 8px; height: 10px; border: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'><path d='M1 4 L4 1 L7 4 Z M1 6 L4 9 L7 6 Z' fill='%23ffffff'/></svg>") center/contain no-repeat;
}
.lab-num input { background: #000; color: #fff; }
.lab-select { background: linear-gradient(#141417, #000); border-color: var(--lab-outline); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.08); }
.lab-select:hover { background: linear-gradient(#1c1c20, #050506); }
.lab-select select { color: #fff; text-shadow: none; }
.lab-select::before { background: linear-gradient(#1a1a1e, #000); border-left: 1px solid var(--lab-outline); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.lab-text input, .lab-text textarea { color: #fff; }
.lab-color .lab-hex { background: #000; border-left-color: var(--lab-outline); color: #b6b6bf; }
.lab-check .lab-box { background: #000; border: 1px solid var(--lab-outline); box-shadow: 0 0 0 1px #000; }
.lab-check input:checked + .lab-box { background: linear-gradient(#7fb0f8 0%, #4a86e2 48%, #2b62c4 52%, #2358b8 100%); border-color: #c8d8ff; }
.lab-check { color: #e6e6ea; }
.lab-range::-webkit-slider-runnable-track { background: #000; border-color: var(--lab-outline); }

/* buttons: black with outlines; blue only for the primary / on state */
.lab-btn { background: linear-gradient(#1e1e23, #050506); border: 1px solid var(--lab-outline); color: #f2f2f6; box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.1); text-shadow: 0 1px 0 #000; }
.lab-btn:hover { background: linear-gradient(#2a2a30, #0d0d10); }
.lab-btn:active { background: #000; box-shadow: 0 0 0 1px #000, inset 0 2px 4px rgba(0,0,0,.9); }
.lab-btn.on, .lab-btn[aria-pressed="true"], .lab-btn.lab-accent { background: linear-gradient(#7fb0f8 0%, #4a86e2 48%, #2b62c4 52%, #2358b8 100%); border-color: #c8d8ff; box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.45); }
.lab-btn.lab-rec.on, .lab-btn.rec { border-color: #ffb3b3; }
.lab-presets .lab-btn { background: linear-gradient(#161619, #030304); }
.lab-tool.lab-primary { border-radius: 2px; }
.lab-progress { background: #000; border-color: var(--lab-outline); box-shadow: 0 0 0 1px #000; }
.lab-graph { background: #000; }
.lab-thumbs canvas, .lab-thumbs img { border: 1px solid var(--lab-outline); box-shadow: 0 0 0 1px #000; }
.lab-dropzone { background: #000; border: 1px dashed var(--lab-outline); color: #9a9aa6; }
.lab-asset { background-color: #0e0e11; border: 1px solid #3a3a40; }
.lab-console { border: 1px solid var(--lab-outline); box-shadow: 0 0 0 1px #000; }
.lab-tabs { background: #000; border-color: var(--lab-outline); }

/* icon accents: yellow folders, magenta gems */
.lab-c-amber svg { color: #ffd94a; }
.lab-c-violet svg { color: #d66bf3; }
.lab-c-pink svg { color: #ff6fc0; }
.lab-c-sky svg { color: #9cc0ff; }

/* status bar: black glossy, outlined cells */
.lab-status { background: linear-gradient(#232328 0%, #161619 48%, #0b0b0d 52%, #070708 100%); color: #d8d8de; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 -3px 8px rgba(0,0,0,.6); }
.lab-status > span.lab-cell { border-left: 1px solid #3f3f46; box-shadow: inset 1px 0 0 rgba(255,255,255,.06); color: #e6e6ea; }
.lab-status .lab-dot { border-color: #000; }
.lab-widget input[type=number]::-webkit-inner-spin-button, .lab-widget input[type=number]::-webkit-outer-spin-button { opacity: 1; filter: invert(1) brightness(1.2); cursor: ns-resize; }