/* ═══════════════════════════════════════════════════════════════════════════
   UI KIT — TIGHT DARK — SHARED CSS
   Cross-browser: Chrome 78+, Firefox 70+, Safari 13+, Edge 79+

   ── FORBIDDEN CSS ────────────────────────────────────────────────────────
   gap on FLEX        — flex gap not in Chrome 78; use > * + * margins
   gap on GRID        — allowed (CSS Grid gap supported Chrome 66+)
   inset              — not in Chrome 78; use top/right/bottom/left
   accent-color       — not in Chrome 78; style inputs manually
   fit-content        — not reliable cross-browser at Chrome 78
   grid auto-fit      — avoid; use explicit flex-wrap layouts
   clamp()            — not in Chrome 78; use explicit min/max values
   min() / max() CSS  — not in Chrome 78; use JS or explicit values
   :is() / :where()   — not in Chrome 78; write selectors individually
   scrollbar-width    — Firefox-only at Chrome 78 era; avoid
   backdrop-filter    — requires -webkit- prefix; avoid entirely
   overflow: clip     — not in Chrome 78; use overflow: hidden

   ── REQUIRED CSS PATTERNS ────────────────────────────────────────────────
   Flex declarations  — use full triplet:
                        display:-webkit-box; display:-ms-flexbox; display:flex;
   Sticky positioning — use: position:-webkit-sticky; position:sticky;
   Transforms         — use: -webkit-transform:...; -ms-transform:...; transform:...;
   user-select        — use full triplet:
                        -webkit-user-select:none; -moz-user-select:none;
                        -ms-user-select:none; user-select:none;
   Spacing            — use > * + * adjacent-sibling margins, not gap

   ── JAVASCRIPT RULES ─────────────────────────────────────────────────────
   COMPATIBILITY (genuinely unsupported in Chrome 78 / Edge 79 — hard ban):
     ?.   optional chaining    — introduced Chrome 80, Edge 80
     ??   nullish coalescing   — introduced Chrome 80, Edge 80

   STYLISTIC (supported by all targets but kept for codebase consistency):
     var           instead of const / let
     function(){}  instead of arrow functions () =>
     .filter()[0]  instead of .find()
     no template literals — use string concatenation

   EVENT HANDLING:
     Always addEventListener() — never inline onclick="..." attributes
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:#2d2d2d; --bg-panel:#3a3a3a; --bg-input:#4a4a4a;
  --bg-hover:#525252; --border:#555555; --border-light:#444444;
  --text:#e8e8e8; --text-muted:#999999;
  --accent:#4a9eff; --success:#4ade80; --warning:#fbbf24; --danger:#f87171;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body {
  min-height:100vh; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:11px; padding:8px;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.hdr {
  font-size:12px; font-weight:600; padding:4px 0;
  border-bottom:1px solid var(--border); margin-bottom:8px;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}

/* ── Grid (flex-based, no CSS Grid auto-fit) ─────────────────────────────── */
.grid { display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start; }
.panel { background:var(--bg-panel); border-radius:2px; padding:6px; min-width:200px; margin:0 6px 6px 0; }
/* Flex column layout (combine with .c* spacing utilities) */
.col {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;
}

/* ── Section header / body ───────────────────────────────────────────────── */
.sh {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  padding:4px 0; cursor:pointer;
  font-size:11px; font-weight:500; border-bottom:1px solid var(--border-light);
  margin-bottom:6px;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.sh svg { -ms-flex-negative:0; flex-shrink:0; transition:transform .15s; margin-right:4px; }
.sh.collapsed svg { -webkit-transform:rotate(-90deg); -ms-transform:rotate(-90deg); transform:rotate(-90deg); }
.sb.hidden { display:none; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn { padding:3px 8px; font-size:10px; border-radius:2px; border:none; cursor:pointer; font-family:inherit; line-height:1.4; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-p  { background:var(--accent);  color:#fff; }
.btn-s  { background:var(--bg-input); color:var(--text); border:1px solid var(--border); }
.btn-ok { background:var(--success); color:#000; }
.btn-x  { background:var(--danger);  color:#fff; }
/* Wrapping button row — use instead of bare flex div when buttons may wrap */
.btn-wrap { display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.btn-wrap > * + * { margin-left:4px; }
.btn-wrap > * { margin-bottom:4px; }

/* ── Label ───────────────────────────────────────────────────────────────── */
.lbl { font-size:10px; color:var(--text-muted); margin-bottom:2px; display:block; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }

/* ── Input ───────────────────────────────────────────────────────────────── */
.inp {
  width:100%; padding:3px 6px; font-size:11px; background:var(--bg-input);
  border:1px solid var(--border); border-radius:2px; color:var(--text);
  outline:none; font-family:inherit;
}
.inp:focus { border-color:var(--accent); }

/* ── Custom dropdown ─────────────────────────────────────────────────────── */
.dd { position:relative; }
.dd-btn {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;
  width:100%; padding:3px 6px; font-size:11px; background:var(--bg-input);
  border:1px solid var(--border); border-radius:2px; color:var(--text);
  cursor:pointer; font-family:inherit; text-align:left;
}
.dd-btn > span { -webkit-box-flex:1; -ms-flex:1; flex:1; }
.dd-btn > svg { -ms-flex-negative:0; flex-shrink:0; transition:transform .15s; color:var(--text-muted); margin-left:4px; }
.dd-btn.open { border-color:var(--accent); }
.dd-btn.open > svg { -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); }
.dd-menu {
  display:none; position:absolute; top:calc(100% + 2px); left:0; right:0;
  background:var(--bg); border:1px solid var(--border); border-radius:2px;
  z-index:200; box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.dd-menu.open { display:block; }
.dd-opt {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;
  padding:4px 6px; font-size:11px; cursor:pointer; color:var(--text);
}
.dd-opt:hover, .dd-opt.sel { background:var(--bg-hover); }

/* ── Toggle switch ───────────────────────────────────────────────────────── */
/* Track is a fixed light groove — never changes color.
 * State is conveyed by the knob: white + grey border when OFF, accent when ON.
 * Same tactile language as the slider thumb and dial knob. */
.tog {
  width:24px; height:12px; border-radius:6px; border:none;
  background:#f0f0f0; box-shadow:inset 0 1px 3px rgba(0,0,0,0.45);
  position:relative; cursor:pointer;
  -ms-flex-negative:0; flex-shrink:0; padding:0;
}
.tog-knob {
  position:absolute; top:1px; left:1px; width:10px; height:10px;
  border-radius:50%; background:#ffffff; border:1px solid #888888;
  transition:left .2s, background .2s, border-color .2s; pointer-events:none;
}
.tog.on .tog-knob { left:13px; background:var(--accent); border-color:var(--accent); }
.tog-row { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; }
.tog-row > .tog { margin-right:6px; }
.tog-lbl { cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }

/* ── Range inputs (custom styled, no accent-color) ───────────────────────── */
/* Slider row: label + value display side-by-side above the track */
.slider-hdr {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;
  margin-bottom:2px;
}
.slider-hdr .lbl { margin-bottom:0; }
.slider-val { font-size:10px; color:var(--accent); -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
input[type=range] {
  width:100%; cursor:pointer; height:4px; display:block;
  -webkit-appearance:none; appearance:none;
  background:var(--border); border-radius:2px; outline:none; border:none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:12px; height:12px; border-radius:50%;
  background:var(--accent); cursor:pointer; border:none;
  margin-top:-4px;
}
input[type=range]::-moz-range-thumb {
  width:12px; height:12px; border-radius:50%;
  background:var(--accent); cursor:pointer; border:none;
}
input[type=range]::-webkit-slider-runnable-track {
  height:4px; border-radius:2px;
  background:linear-gradient(to right, #4a9eff 0%, #4a9eff var(--fill-pct,0%), #555555 var(--fill-pct,0%), #555555 100%);
}
input[type=range]::-moz-range-track {
  height:4px; border-radius:2px;
  background:linear-gradient(to right, #4a9eff 0%, #4a9eff var(--fill-pct,0%), #555555 var(--fill-pct,0%), #555555 100%);
}

/* ── Custom value-in-handle slider ───────────────────────────────────────── */
/* Outer container — vertical padding expands tap area around the 6px track  */
.range-wrap { position:relative; padding:6px 0; cursor:pointer; }
/* Recessed groove track */
.range-track {
  position:relative; height:6px; border-radius:2px; background:#222222;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.04);
}
/* Accent fill — updated to thumb centre by JS */
.range-fill {
  position:absolute; top:0; left:0; bottom:0;
  border-radius:2px; background:var(--accent); pointer-events:none;
}
/* Pill-shaped, value-displaying drag handle */
.range-thumb {
  position:absolute; top:50%;
  -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%);
  width:26px; height:16px; border-radius:2px;
  background:#f0f0f0; border:1px solid #000000;
  box-shadow:inset 0 2px 3px rgba(0,0,0,0.45);
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  font-size:8px; font-weight:600; color:var(--bg);
  cursor:pointer;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  outline:none; z-index:1;
}
.range-thumb:focus {
  box-shadow:inset 0 2px 3px rgba(0,0,0,0.45), 0 0 0 2px rgba(74,158,255,0.55);
}
.range-thumb:active {
  box-shadow:inset 0 3px 4px rgba(0,0,0,0.22);
}

/* ── Rotary dial knob ────────────────────────────────────────────────────── */
/* Row container — centres dials horizontally with consistent spacing */
.dial-row {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
}
.dial-row > * + * { margin-left:16px; }
/* Outer wrapper — vertical flex, centres stage and label */
.dial-wrap {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
/* Fixed-size square that contains the SVG arc ring + the knob body */
.dial-stage { position:relative; width:64px; height:64px; }
/* SVG arc ring — fills the stage, drawn behind the knob body */
.dial-svg { position:absolute; top:0; left:0; width:64px; height:64px; }
/* Background track arc */
.dial-arc-track { fill:none; stroke:#444444; stroke-width:4; stroke-linecap:round; }
/* Accent fill arc — width and endpoint updated by JS */
.dial-arc-fill  { fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; }
/* Circular knob body — centred over the SVG stage */
.dial-body {
  position:absolute; top:50%; left:50%;
  -webkit-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:#f0f0f0; border:1px solid #000000;
  box-shadow:inset 0 2px 3px rgba(0,0,0,0.45);
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  cursor:pointer; outline:none;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.dial-body:focus {
  box-shadow:inset 0 2px 3px rgba(0,0,0,0.45), 0 0 0 2px rgba(74,158,255,0.55);
}
/* Rotating tick mark — transforms driven by JS; default at min position (225deg) */
.dial-tick {
  position:absolute; top:5px; left:21px; width:2px; height:8px;
  background:var(--bg); border-radius:1px; pointer-events:none;
  -webkit-transform-origin:1px 17px;
  -ms-transform-origin:1px 17px;
  transform-origin:1px 17px;
  -webkit-transform:rotate(225deg);
  -ms-transform:rotate(225deg);
  transform:rotate(225deg);
}
/* Value text centred inside the knob body */
.dial-val {
  font-size:8px; font-weight:600; color:var(--bg);
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  pointer-events:none;
}
/* Label beneath the stage */
.dial-lbl { margin-top:4px; text-align:center; }

/* ── Small-dial variant ──────────────────────────────────────────────────────
 * All .dial-row, .dial-wrap, .dial-val, .dial-lbl classes are reused.
 * Only the stage, SVG, knob body, and tick mark change size.
 * Signal with data-variant="small" on .dial-wrap; JS branches on that attr.
 * ────────────────────────────────────────────────────────────────────────── */
/* 48×48 px stage (vs 64×64 for regular) */
.small-dial-stage { position:relative; width:48px; height:48px; }
/* SVG arc ring — fills the stage */
.small-dial-svg { position:absolute; top:0; left:0; width:48px; height:48px; }
/* Background track arc — stroke-width 3 (vs 4 for regular) */
.small-dial-arc-track { fill:none; stroke:#444444; stroke-width:3; stroke-linecap:round; }
/* Accent fill arc */
.small-dial-arc-fill  { fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; }
/* 32×32 px knob body — same materials as regular dial */
.small-dial-body {
  position:absolute; top:50%; left:50%;
  -webkit-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  width:32px; height:32px; border-radius:50%;
  background:#f0f0f0; border:1px solid #000000;
  box-shadow:inset 0 2px 3px rgba(0,0,0,0.45);
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  cursor:pointer; outline:none;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.small-dial-body:focus {
  box-shadow:inset 0 2px 3px rgba(0,0,0,0.45), 0 0 0 2px rgba(74,158,255,0.55);
}
/* 2×5 px tick — shorter than regular (2×8) so it stays above the value text.
 * Knob centre is at y=16; tick top at y=3; ends at y=8 — 4 px above text. */
.small-dial-tick {
  position:absolute; top:3px; left:15px; width:2px; height:5px;
  background:var(--bg); border-radius:1px; pointer-events:none;
  -webkit-transform-origin:1px 13px;
  -ms-transform-origin:1px 13px;
  transform-origin:1px 13px;
  -webkit-transform:rotate(225deg);
  -ms-transform:rotate(225deg);
  transform:rotate(225deg);
}

/* ── Native checkbox / radio (no accent-color) ────────────────────────────── */
input[type=checkbox], input[type=radio] { width:12px; height:12px; cursor:pointer; vertical-align:middle; }

/* ── Tab bar ──────────────────────────────────────────────────────────────── */
.tab-bar { display:-webkit-box; display:-ms-flexbox; display:flex; border-bottom:1px solid var(--border); margin-bottom:6px; }
.tab-btn {
  padding:4px 10px; font-size:11px; background:transparent;
  color:var(--text-muted); border:none; border-radius:2px 2px 0 0;
  cursor:pointer; font-family:inherit; transition:background .1s,color .1s;
}
.tab-btn.on { background:var(--accent); color:#fff; }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  padding:3px 6px; border-radius:2px; font-size:10px;
}
.alert > svg { -ms-flex-negative:0; flex-shrink:0; margin-right:4px; }
.alert > span { -webkit-box-flex:1; -ms-flex:1; flex:1; }
.alert > .alert-x { margin-left:4px; }
.alert-ok  { background:rgba(74,222,128,.15); }
.alert-err { background:rgba(248,113,113,.15); }
.alert-wrn { background:rgba(251,191,36,.15); }
.alert-inf { background:rgba(74,158,255,.15); }
.alert-x {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  background:none; border:none; cursor:pointer; padding:0; color:var(--text-muted);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge { padding:1px 4px; font-size:9px; border-radius:2px; }
.badge-p   { background:var(--accent);   color:#fff; }
.badge-ok  { background:var(--success);  color:#000; }
.badge-wrn { background:var(--warning);  color:#000; }
.badge-x   { background:var(--danger);   color:#fff; }
.badge-def { background:var(--bg-input); color:var(--text); }

/* ── Modal overlay ───────────────────────────────────────────────────────── */
.overlay {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.6); -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; z-index:1000;
}
.overlay.open { display:-webkit-box; display:-ms-flexbox; display:flex; }
.modal { background:var(--bg-panel); border:1px solid var(--border); border-radius:4px; width:240px; box-shadow:0 4px 16px rgba(0,0,0,.5); }
.modal-hd {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  padding:6px 8px; border-bottom:1px solid var(--border); font-size:11px; font-weight:500;
}
.modal-hd button {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  background:none; border:none; cursor:pointer; color:var(--text-muted);
}
.modal-body {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;
  padding:8px;
}
.modal-body > * + * { margin-top:6px; }
.modal-ft {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end;
  padding:6px 8px; border-top:1px solid var(--border);
}
.modal-ft > * + * { margin-left:4px; }

/* ── Color swatch ────────────────────────────────────────────────────────── */
.swatch {
  width:24px; height:24px; border-radius:2px; border:1px solid var(--border);
  cursor:pointer; -ms-flex-negative:0; flex-shrink:0; position:relative; overflow:hidden;
}
.swatch input[type=color] {
  position:absolute; top:-4px; left:-4px;
  width:calc(100% + 8px); height:calc(100% + 8px);
  opacity:0; cursor:pointer; border:none; padding:0;
}

/* ── Icon dropdown ───────────────────────────────────────────────────────── */
.icon-dd { position:relative; }
.icon-dd-btn {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  width:100%;
  padding:3px 6px; font-size:11px; background:var(--bg-input);
  border:1px solid var(--border); border-radius:2px; color:var(--text); cursor:pointer; font-family:inherit;
}
.icon-dd-btn > span + span { margin-left:4px; }
.icon-dd-btn > svg { transition:transform .15s; color:var(--text-muted); margin-left:auto; }
.icon-dd-btn.open { border-color:var(--accent); }
.icon-dd-btn.open > svg { -webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); }
.icon-dd-menu {
  display:none; position:absolute; top:calc(100% + 2px); left:0; right:0;
  background:var(--bg); border:1px solid var(--border); border-radius:2px;
  padding:4px; z-index:200; box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.icon-dd-menu.open { display:block; }
.icon-grid { display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.icon-opt {
  width:22px; height:22px;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:2px;
  cursor:pointer; font-size:13px; color:var(--text); margin:1px;
}
.icon-opt.sel, .icon-opt:hover { background:var(--bg-hover); border-color:var(--accent); }

/* ── Alignment bar ───────────────────────────────────────────────────────── */
.align-bar { display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; background:var(--bg); border-radius:2px; padding:2px; }
.align-bar > * + * { margin-left:2px; }
.align-btn {
  width:24px; height:22px;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:2px; cursor:pointer; color:var(--text); opacity:0.65;
}
.align-btn.sel { background:var(--bg-hover); border-color:var(--accent); opacity:1; }
.align-btn:hover { background:var(--bg-hover); opacity:1; }
.align-sep { width:1px; height:14px; background:var(--border); -ms-flex-negative:0; flex-shrink:0; }
.align-global {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  margin-top:7px; padding-top:7px; border-top:1px solid var(--border); cursor:pointer;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.align-global > * + * { margin-left:6px; }
.align-global-cb {
  width:10px; height:10px; border-radius:1px; border:1px solid var(--border);
  -ms-flex-negative:0; flex-shrink:0;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  background:transparent;
}
.align-global-cb.on { background:var(--accent); border-color:var(--accent); }

/* ── Drop zone ───────────────────────────────────────────────────────────── */
.dz { border:1px dashed var(--border); border-radius:2px; padding:8px; text-align:center; background:var(--bg); cursor:pointer; transition:border-color .2s; }
.dz:hover { border-color:var(--accent); }

/* ── Advanced dropdown ───────────────────────────────────────────────────── */
.adv-wrap { position:relative; }
.adv-trigger {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  width:100%;
  padding:3px 6px; background:var(--bg-input); border:1px solid var(--border);
  border-radius:2px; color:var(--text); font-size:11px; font-weight:500; cursor:pointer; font-family:inherit;
}
.adv-trigger > svg { -ms-flex-negative:0; flex-shrink:0; }
.adv-trigger > svg:first-child { margin-right:4px; }
.adv-trigger > span { -webkit-box-flex:1; -ms-flex:1; flex:1; text-align:left; margin-right:4px; }
.adv-trigger.open { border-color:var(--accent); }
.adv-panel {
  display:none; position:absolute; top:calc(100% + 2px); left:0; right:0;
  background:var(--bg-panel); border:1px solid var(--border); border-radius:2px;
  box-shadow:0 4px 12px rgba(0,0,0,.4); z-index:200; overflow:hidden;
}
.adv-panel.open { display:block; }
.adv-search-wrap { padding:3px 6px; border-bottom:1px solid var(--border); }
.adv-search {
  width:100%; padding:3px 6px; background:var(--bg); border:1px solid var(--border);
  border-radius:2px; color:var(--text); font-size:11px; outline:none; font-family:inherit;
}
.adv-search:focus { border-color:var(--accent); }
.adv-list { max-height:150px; overflow-y:auto; }
.adv-item {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  padding:3px 6px; font-size:11px; cursor:pointer; border-bottom:1px solid var(--border-light);
}
.adv-item > * + * { margin-left:4px; }
.adv-item:hover, .adv-item.sel { background:var(--bg-hover); }
.adv-item span.nm { -webkit-box-flex:1; -ms-flex:1; flex:1; }
.adv-act {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  background:none; border:none; padding:1px; cursor:pointer; color:var(--text-muted); opacity:.7;
}
.adv-act:hover { opacity:1; }
.adv-act.pinned { color:var(--accent); opacity:1; }
.adv-empty { padding:4px 6px; color:var(--text-muted); font-style:italic; }
.drag-h { cursor:grab; color:var(--text-muted); opacity:.7; display:-webkit-box; display:-ms-flexbox; display:flex; }
/* Pin SVG rotated 45deg */
.pin-icon { -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); }

/* ── Time input ──────────────────────────────────────────────────────────── */
.time-wrap {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:stretch; -ms-flex-align:stretch; align-items:stretch;
  background:var(--bg-input);
  border:1px solid var(--border); border-radius:2px; overflow:hidden;
}
.time-wrap:focus-within { border-color:var(--accent); }
.time-num {
  width:28px; padding:3px 2px; font-size:11px; background:transparent;
  border:none; color:var(--text); outline:none; text-align:center; font-family:inherit;
  -moz-appearance:textfield; appearance:textfield;
}
.time-num::-webkit-inner-spin-button,
.time-num::-webkit-outer-spin-button { -webkit-appearance:none; }
.time-num:focus { background:var(--bg-hover); }
.time-sep {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  padding:0 1px; font-size:11px; color:var(--text-muted);
}
.time-ampm {
  padding:0 5px; font-size:9px; background:var(--bg-hover); border:none;
  border-left:1px solid var(--border); color:var(--text); cursor:pointer; font-family:inherit;
}
.time-ampm:hover { color:var(--accent); }

/* ── Timezone dropdown ───────────────────────────────────────────────────── */
.tz-wrap { position:relative; }
.tz-panel {
  display:none; position:absolute; top:calc(100% + 2px); left:0; right:0;
  background:var(--bg); border:1px solid var(--border); border-radius:2px;
  z-index:200; box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.tz-panel.open { display:block; }
.tz-search {
  width:100%; padding:3px 6px; background:var(--bg-input);
  border:none; border-bottom:1px solid var(--border); color:var(--text);
  font-size:11px; outline:none; font-family:inherit;
}
.tz-search:focus { border-bottom-color:var(--accent); }
.tz-list { max-height:120px; overflow-y:auto; }
.tz-opt { padding:3px 6px; font-size:11px; cursor:pointer; color:var(--text); }
.tz-opt:hover, .tz-opt.sel { background:var(--bg-hover); }

/* ── Date picker ─────────────────────────────────────────────────────────── */
.dp-wrap { position:relative; }
.dp-btn {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;
  width:100%; padding:3px 6px; font-size:11px; background:var(--bg-input);
  border:1px solid var(--border); border-radius:2px; color:var(--text);
  cursor:pointer; font-family:inherit; text-align:left;
}
.dp-btn > span { -webkit-box-flex:1; -ms-flex:1; flex:1; }
.dp-btn > svg { -ms-flex-negative:0; flex-shrink:0; color:var(--text-muted); margin-left:4px; }
.dp-btn.open { border-color:var(--accent); }
.dp-popup {
  display:none; position:absolute; top:calc(100% + 2px); left:0;
  background:var(--bg); border:1px solid var(--border); border-radius:2px;
  box-shadow:0 2px 8px rgba(0,0,0,.4); z-index:200; padding:4px; width:162px;
}
.dp-popup.open { display:block; }
.dp-hdr {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;
  margin-bottom:4px; padding:0 2px;
}
.dp-hdr-lbl { font-size:11px; font-weight:500; -webkit-box-flex:1; -ms-flex:1; flex:1; text-align:center; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.dp-nav { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:1px 5px; border-radius:2px; font-size:13px; font-family:inherit; line-height:1; }
.dp-nav:hover { background:var(--bg-hover); color:var(--text); }
/* Date grid: flex-based instead of CSS Grid (no gap) */
.dp-grid { display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.dp-dow, .dp-day { width:14.285%; }
.dp-dow { font-size:9px; color:var(--text-muted); text-align:center; padding:2px 0; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.dp-day {
  font-size:10px; text-align:center; padding:2px 1px; border-radius:2px; cursor:pointer; border:none;
  background:transparent; color:var(--text); font-family:inherit; line-height:1.5;
}
.dp-day:hover:not(:disabled) { background:var(--bg-hover); }
.dp-day.sel { background:var(--accent); color:#fff; }
.dp-day.today { outline:1px solid var(--border); }
.dp-day.other-m { color:var(--text-muted); }
.dp-day:disabled { opacity:.25; cursor:default; }

/* ── Date-range picker ───────────────────────────────────────────────────── */
.dr-wrap { position:relative; }
.dr-btn {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  width:100%; padding:3px 6px; font-size:11px; background:var(--bg-input);
  border:1px solid var(--border); border-radius:2px; color:var(--text);
  cursor:pointer; font-family:inherit; text-align:left;
}
.dr-btn > svg { -ms-flex-negative:0; flex-shrink:0; color:var(--text-muted); margin-right:5px; }
.dr-btn.open { border-color:var(--accent); }
.dr-dates {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-flex:1; -ms-flex:1; flex:1; min-width:0;
}
.dr-start, .dr-end {
  -webkit-box-flex:1; -ms-flex:1; flex:1; min-width:0;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.dr-sep {
  -ms-flex-negative:0; flex-shrink:0; padding:0 4px; font-size:9px; color:var(--text-muted);
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.dr-popup {
  display:none; position:absolute; top:calc(100% + 2px); left:0;
  background:var(--bg); border:1px solid var(--border); border-radius:2px;
  box-shadow:0 2px 8px rgba(0,0,0,.4); z-index:200; padding:4px; width:162px;
}
.dr-popup.open { display:block; }
/* Phase hint text (Select start / Now pick end) */
.dp-hint {
  font-size:9px; color:var(--accent); text-align:center; padding-bottom:3px;
  margin-bottom:3px; border-bottom:1px solid var(--border);
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
/* Range highlight states on .dp-day */
.dp-day.range-start {
  background:var(--accent); color:#fff;
  border-top-right-radius:0; border-bottom-right-radius:0;
  border-top-left-radius:2px; border-bottom-left-radius:2px;
}
.dp-day.range-end {
  background:var(--accent); color:#fff;
  border-top-left-radius:0; border-bottom-left-radius:0;
  border-top-right-radius:2px; border-bottom-right-radius:2px;
}
.dp-day.range-start.range-end { border-radius:2px; }
.dp-day.in-range { background:rgba(74,158,255,0.15); border-radius:0; }
.dp-day.range-start:hover:not(:disabled), .dp-day.range-end:hover:not(:disabled) { background:var(--accent); }
.dp-day.in-range:hover:not(:disabled) { background:rgba(74,158,255,0.25); }

/* ── Custom color picker ─────────────────────────────────────────────────── */
.cp-swatch { width:24px; height:24px; border-radius:2px; border:1px solid var(--border); -ms-flex-negative:0; flex-shrink:0; cursor:pointer; transition:border-color .1s; }
.cp-swatch.sel { border-color:var(--accent); }
.cp-panel { margin-top:6px; }
.cp-canvas-wrap { position:relative; border-radius:2px; overflow:hidden; cursor:crosshair; line-height:0; height:100px; }
#cp-canvas { display:block; width:100%; height:100%; }
.cp-thumb {
  position:absolute; width:9px; height:9px; border-radius:50%;
  border:1.5px solid #fff; box-shadow:0 0 0 1.5px rgba(0,0,0,.55);
  pointer-events:none;
  -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%);
  z-index:2;
}
.cp-hue-wrap { position:relative; margin-top:5px; height:9px; }
.cp-hue {
  width:100%; height:9px; border-radius:4px; cursor:pointer;
  background:linear-gradient(to right,
    hsl(0,100%,50%),hsl(30,100%,50%),hsl(60,100%,50%),hsl(90,100%,50%),
    hsl(120,100%,50%),hsl(150,100%,50%),hsl(180,100%,50%),hsl(210,100%,50%),
    hsl(240,100%,50%),hsl(270,100%,50%),hsl(300,100%,50%),hsl(330,100%,50%),hsl(360,100%,50%));
}
.cp-hue-thumb {
  position:absolute; top:50%; width:9px; height:9px; border-radius:50%;
  border:1.5px solid #fff; box-shadow:0 0 0 1.5px rgba(0,0,0,.55);
  -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%);
  pointer-events:none;
}
.cp-alpha-row {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  margin-top:5px;
}
.cp-alpha-row > * + * { margin-left:4px; }
.cp-alpha-inp {
  -webkit-box-flex:1; -ms-flex:1; flex:1; cursor:pointer; height:9px;
  -webkit-appearance:none; appearance:none; background:transparent; border:none; outline:none; padding:0;
}
input.cp-alpha-inp::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:9px; height:9px;
  border-radius:50%; background:#fff; border:1.5px solid #fff; box-shadow:0 0 0 1.5px rgba(0,0,0,.55); cursor:pointer;
  margin-top:0;
}
input.cp-alpha-inp::-webkit-slider-runnable-track { height:9px; border-radius:4px; }
.cp-alpha-inp::-moz-range-thumb {
  width:9px; height:9px; border-radius:50%; background:#fff;
  border:1.5px solid #fff; box-shadow:0 0 0 1.5px rgba(0,0,0,.55); cursor:pointer;
}
.cp-alpha-inp::-moz-range-track { height:9px; border-radius:4px; }

/* ── Copy CSS button ─────────────────────────────────────────────────────── */
.btn-copy-css {
  display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  padding:2px 7px; font-size:10px;
  background:var(--bg-input); border:1px solid var(--border); border-radius:2px;
  color:var(--text-muted); cursor:pointer; font-family:inherit; transition:border-color .15s,color .15s,background .15s;
}
.btn-copy-css > * + * { margin-left:3px; }
.btn-copy-css:hover { border-color:var(--accent); color:var(--text); }
.btn-copy-css.copied { border-color:#4ade80; color:#4ade80; background:rgba(74,222,128,.08); }

/* ── Gradient ────────────────────────────────────────────────────────────── */
.grad-type-bar { display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; margin-bottom:5px; background:var(--bg); border-radius:2px; padding:1px; }
.grad-type-bar > * + * { margin-left:1px; }
.grad-type-btn { padding:2px 8px; font-size:10px; background:transparent; border:none; color:var(--text-muted); cursor:pointer; border-radius:2px; font-family:inherit; }
.grad-type-btn.sel { background:var(--bg-input); color:var(--text); }
.grad-bar-wrap { position:relative; padding-bottom:18px; margin:4px 0; overflow:visible; }
.grad-bar { height:12px; border-radius:2px; width:100%; cursor:crosshair; }
.grad-stop {
  position:absolute; bottom:0;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  cursor:grab;
  -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%);
}
.grad-stop.dragging { cursor:grabbing; }
.grad-stop-tip { width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom-style:solid; border-bottom-width:7px; }
.grad-stop-body { width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.45); }
.grad-stop.sel .grad-stop-body { box-shadow:0 0 0 2px var(--accent),0 0 0 3.5px rgba(74,158,255,.25); }
.grad-swatches {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  margin-bottom:5px; -ms-flex-wrap:wrap; flex-wrap:wrap;
}
.grad-swatches > * + * { margin-left:4px; }
/* Gradient origin grid: flex-based 3 cols */
.grad-pos-grid { display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; width:36px; }
.grad-pos-dot { width:10px; height:10px; border-radius:50%; background:var(--bg-input); border:1px solid var(--border); cursor:pointer; padding:0; margin:1px; }
.grad-pos-dot.sel { background:var(--accent); border-color:var(--accent); }
.grad-pos-dot:hover:not(.sel) { background:var(--bg-hover); }
/* Gradient control row — shared by linear, conic, origin control rows */
.grad-ctrl {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  margin-bottom:4px;
}
/* Gradient copy-CSS button right-align wrapper */
.grad-copy-row {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end;
  margin-top:5px;
}
/* Grad section wrapper margin */
.cp-grad-section { margin-bottom:6px; }
/* Hash # label in hex input row */
.hash-lbl { font-size:10px; color:var(--text-muted); -ms-flex-negative:0; flex-shrink:0; }
/* Monospace input (hex values) */
.inp-mono { font-family:monospace; }
/* Narrow number inputs (angle fields) */
.inp-num { width:44px; text-align:center; }
/* Hex string input */
.inp-hex { width:68px; -ms-flex-negative:0; flex-shrink:0; }

/* ── SVG inline default ──────────────────────────────────────────────────── */
svg { display:inline-block; vertical-align:middle; }

/* ── Align icon gap helpers (replace flex gap in JS-built icons) ──────────── */
.ai-r  > * + * { margin-left:1px; }
.ai-r2 > * + * { margin-left:2px; }
.ai-c  > * + * { margin-top:1px; }
.ai-c2 > * + * { margin-top:2px; }

/* ── Row / column gap utilities (replace inline gap) ─────────────────────── */
.r2  > * + * { margin-left:2px; }
.r3  > * + * { margin-left:3px; }
.r4  > * + * { margin-left:4px; }
.r6  > * + * { margin-left:6px; }
.r8  > * + * { margin-left:8px; }
.r12 > * + * { margin-left:12px; }
.c2  > * + * { margin-top:2px; }
.c3  > * + * { margin-top:3px; }
.c4  > * + * { margin-top:4px; }
.c6  > * + * { margin-top:6px; }

/* ── Layout utility classes ──────────────────────────────────────────────── */
/* Bare flex row — no alignment defaults */
.row { display:-webkit-box; display:-ms-flexbox; display:flex; }
/* Flex row + vertically centred children */
.row-c {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
/* Flex row + wrap */
.fwrap { display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; }
/* flex:1 grow shorthand */
.f1 { -webkit-box-flex:1; -ms-flex:1; flex:1; }
/* flex-shrink:0 shorthand */
.fs0 { -ms-flex-negative:0; flex-shrink:0; }
/* Checkbox / radio label row */
.chk-lbl {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  cursor:pointer;
}
/* Visibility */
.hidden { display:none; }
/* Margin overrides */
.m0  { margin:0; }
.mb3 { margin-bottom:3px; }
.mb4 { margin-bottom:4px; }
.mb6 { margin-bottom:6px; }
.mt5 { margin-top:5px; }

/* ── Output panel ────────────────────────────────────────────────────────── */
/*
 * A fixed-height panel with 3 zones: header (tab bar), scrollable log body,
 * footer action strip. Compose with .tab-bar, .tab-btn, .btn variants.
 *
 * Structure:
 *   .op                      — outer container (set a fixed height via inline style)
 *     .op-hdr                — header zone; wraps a .tab-bar
 *     .op-body               — scrollable log list
 *       .op-row.op-inf/wrn/err  — one log entry per row
 *         .op-row-ts         — timestamp
 *         .op-row-bd         — level badge (INFO / WARN / ERR)
 *         .op-row-txt        — message text
 *     .op-empty              — empty-state placeholder (inside .op-body)
 *     .op-ft                 — footer strip
 *       .op-err-ct           — error counter label
 *       .op-ft-run           — run button (use margin-left:auto or .op-ft-run)
 */
.op {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;
  background:var(--bg-panel); border-radius:2px;
}
/* Standalone demo sizing for output-panel.html showcase */
.op-demo { width:300px; height:240px; border:1px solid var(--border); }
.op-hdr { -webkit-box-flex:0; -ms-flex-negative:0; flex-shrink:0; background:var(--bg-panel); }
.op-hdr .tab-bar { margin-bottom:0; border-bottom:none; padding:0 4px; }
.op-body {
  -webkit-box-flex:1; -ms-flex:1; flex:1; overflow-y:auto; overflow-x:auto;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;
  -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start;
}
.op-ft {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  padding:4px 8px; -webkit-box-flex:0; -ms-flex-negative:0; flex-shrink:0;
  background:var(--bg-panel); border-top:1px solid var(--border-light);
}
.op-ft > * + * { margin-left:4px; }
.op-ft-run { margin-left:auto; }
.op-err-ct { font-size:10px; color:var(--danger); -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.op-row {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:flex-start; -ms-flex-align:flex-start; align-items:flex-start;
  padding:3px 8px; border-bottom:1px solid var(--border-light);
  font-family:monospace; font-size:10px; min-width:100%;
}
.op-row > * + * { margin-left:6px; }
.op-row.op-inf { background:rgba(74,158,255,.08); }
.op-row.op-wrn { background:rgba(251,191,36,.08); }
.op-row.op-err { background:rgba(248,113,113,.1); }
.op-row-ts { color:var(--text-muted); -webkit-box-flex:0; -ms-flex-negative:0; flex-shrink:0; white-space:nowrap; }
.op-row-bd { -webkit-box-flex:0; -ms-flex-negative:0; flex-shrink:0; text-transform:uppercase; font-size:9px; opacity:.7; white-space:nowrap; }
.op-row-txt { -webkit-box-flex:0; -ms-flex:0 0 auto; flex:0 0 auto; white-space:nowrap; word-break:normal; }
.op-empty { padding:16px 10px; color:var(--text-muted); font-size:11px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; min-width:100%; }

/* ── Showcase grid (index.html iframe layout) ─────────────────────────────
 * .sc-wrap     — flex-wrap row container for all component cards
 * .sc-cell     — 235px card: header + iframe
 * .sc-cell-full — full-width override (used for Timeline, placed last)
 * .sc-hdr      — card header: name left, link right
 * .sc-hdr-name — component name text
 * .sc-hdr-link — "open standalone" link
 * .sc-frame    — the iframe itself (auto-height set by JS)
 * ──────────────────────────────────────────────────────────────────────── */
.sc-wrap {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start;
  -webkit-box-pack:distribute; -ms-flex-pack:distribute; justify-content:space-evenly;
  width:100%; padding:0;
}
.sc-cell {
  width:235px; background:var(--bg-panel);
  border:1px solid var(--border-light); border-radius:2px;
  overflow:hidden; margin:0 0 12px 0;
}
.sc-cell-full {
  width:100%; margin-right:0;
}
.sc-hdr {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;
  padding:5px 8px; background:var(--bg-input); border-bottom:1px solid var(--border);
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.sc-hdr-name { font-size:11px; font-weight:500; color:var(--text); }
.sc-hdr-link {
  font-size:10px; color:var(--accent); text-decoration:none;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  opacity:.7;
}
.sc-hdr-link:hover { opacity:1; text-decoration:none; }
.sc-hdr-actions {
  display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
.sc-hdr-refresh {
  display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  color:#888888; padding:2px 4px; border-radius:3px;
  line-height:1; margin-left:4px;
}
.sc-hdr-refresh:hover { color:#cccccc; background:var(--border); }
.sc-frame { display:block; width:100%; border:none; background:var(--bg); }

/* ── Scrollbar (webkit only; degrades gracefully on Firefox) ─────────────── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   TIMELINE PANEL — moved from timeline.html <style> block
   All colors via design tokens. All CSS rules comply with kit standards.
   ═══════════════════════════════════════════════════════════════════════════ */

.tl-wrap {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal;
  -ms-flex-direction:column; flex-direction:column;
  border:1px solid var(--border); border-radius:2px;
  font-size:11px; background:var(--bg);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.tl-hdr {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  background:var(--bg-input); border-bottom:1px solid var(--border);
  height:28px; padding:0 4px; -ms-flex-negative:0; flex-shrink:0;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.tl-hgrp {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
.tl-hgrp > * + * { margin-left:2px; }
.tl-hsep { width:1px; height:14px; background:var(--border); margin:0 5px; -ms-flex-negative:0; flex-shrink:0; }
.tl-hsp  { -webkit-box-flex:1; -ms-flex:1; flex:1; }

.tl-tbtn {
  display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  width:20px; height:20px; background:none; border:none; border-radius:2px;
  color:var(--text-muted); cursor:pointer; padding:0;
}
.tl-tbtn:hover { background:var(--bg-hover); color:var(--text); }
.tl-tbtn.on    { color:var(--accent); }

.tl-ninp {
  padding:1px 3px; font-size:10px; font-family:inherit;
  background:var(--bg); border:1px solid var(--border); border-radius:2px;
  color:var(--text); outline:none; text-align:center;
  -moz-appearance:textfield;
}
.tl-ninp::-webkit-inner-spin-button,
.tl-ninp::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.tl-ninp:focus { border-color:var(--accent); }
.tl-fi { width:34px; }
.tl-pi { width:30px; }
.tl-lbl { font-size:10px; color:var(--text-muted); margin-left:2px; margin-right:1px; }
.tl-zlbl { font-size:10px; color:var(--text-muted); margin-left:2px; min-width:32px; text-align:center; }

/* ── Scroll container ─────────────────────────────────────────────────────── */
.tl-scroll {
  overflow:auto; -webkit-box-flex:1; -ms-flex:1; flex:1; height:300px;
}
.tl-inner { position:relative; min-width:100%; }

/* ── Ruler row (sticky top) ───────────────────────────────────────────────── */
.tl-ruler-row {
  position:-webkit-sticky; position:sticky; top:0;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  height:20px; z-index:40; background:var(--bg-input);
  border-bottom:1px solid var(--border);
}
.tl-corner {
  position:-webkit-sticky; position:sticky; left:0; z-index:30;
  width:160px; -ms-flex-negative:0; flex-shrink:0;
  background:var(--bg-input); border-right:1px solid var(--border);
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;
  padding:0 4px 0 6px; font-size:9px; color:var(--text-muted);
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  overflow:visible;
}
.tl-add-btn {
  background:none; border:none; color:var(--text-muted); opacity:0.5;
  cursor:pointer; padding:1px 2px; line-height:1; font-size:13px;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
.tl-add-btn:hover { opacity:1; color:var(--accent); }

/* Add-layer dropdown */
.tl-add-menu {
  display:none; position:absolute; top:20px; left:0;
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:3px; z-index:100; min-width:120px;
  -webkit-box-shadow:0 4px 12px rgba(0,0,0,0.4); box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.tl-add-menu.open { display:block; }
.tl-add-menu-item {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  padding:4px 8px; cursor:pointer; font-size:10px; color:var(--text);
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.tl-add-menu-item:hover { background:var(--bg-hover); }
.tl-add-menu-item > * + * { margin-left:6px; }
.tl-add-menu-item svg { opacity:0.7; }
.tl-ruler { position:relative; height:20px; cursor:col-resize; }
.tl-tick  { position:absolute; top:0; width:1px; background:var(--border); }
.tl-tmaj  { height:8px; }
.tl-tmin  { height:4px; }
.tl-tlbl  {
  position:absolute; top:9px; font-size:9px; color:var(--text-muted);
  -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%);
  pointer-events:none;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
/* ── Frame cells ──────────────────────────────────────────────────────────── */
.tl-cell {
  position:absolute; top:0; bottom:0;
  border-right:1px solid rgba(255,255,255,0.045);
  cursor:pointer; z-index:0;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.tl-cell:hover  { background:rgba(255,255,255,0.04); }
.tl-cell.sel    { background:rgba(74,158,255,0.14);  border-right-color:rgba(74,158,255,0.25); }
.tl-cell.sel-r  { background:rgba(74,158,255,0.08);  border-right-color:rgba(74,158,255,0.18); }

/* ── Layer rows ───────────────────────────────────────────────────────────── */
.tl-row {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  height:22px; border-bottom:1px solid var(--border-light);
}
.tl-row.tl-alt    { background:rgba(255,255,255,0.018); }
.tl-row.tl-folder .tl-label { background:var(--bg); }
.tl-row.tl-folder .tl-track { background:rgba(0,0,0,0.12); }
.tl-row.tl-drop   { border-top:2px solid var(--accent); }

/* ── Layer label column (sticky left) ────────────────────────────────────── */
.tl-label {
  position:-webkit-sticky; position:sticky; left:0;
  width:160px; -ms-flex-negative:0; flex-shrink:0;
  background:var(--bg-panel); border-right:1px solid var(--border);
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  z-index:25; padding:0 2px; overflow:hidden;
}
.tl-label > * + * { margin-left:2px; }
.tl-row:hover .tl-label { background:var(--bg-hover); }

/* Delete-row confirmation overlay */
.tl-del-overlay {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.55); z-index:999;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
}
.tl-del-overlay.visible { display:-webkit-box; display:-ms-flexbox; display:flex; }
.tl-del-box {
  background:var(--bg-panel); border:1px solid var(--border); border-radius:4px;
  padding:16px 18px; min-width:240px; max-width:320px;
}
.tl-del-box-title { font-size:11px; font-weight:600; color:var(--text); margin-bottom:6px;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.tl-del-box-msg   { font-size:10px; color:var(--text-muted); margin-bottom:14px; line-height:1.5;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.tl-del-box-row   { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end; }
.tl-del-box-row > * + * { margin-left:6px; }

.tl-grip {
  color:var(--text-muted); opacity:0.35; cursor:ns-resize;
  -ms-flex-negative:0; flex-shrink:0;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center; line-height:1;
}
.tl-grip:hover { opacity:1; }

.tl-fbtn {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  padding:0; -ms-flex-negative:0; flex-shrink:0; line-height:1;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
.tl-tic {
  opacity:0.6; -ms-flex-negative:0; flex-shrink:0; line-height:1;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
.tl-row.tl-labels .tl-tic { color:var(--success);  opacity:0.9; }
.tl-row.tl-script .tl-tic { color:var(--warning);  opacity:0.9; }
.tl-row.tl-comp   .tl-tic { color:#818cf8; opacity:0.9; }

.tl-nm {
  -webkit-box-flex:1; -ms-flex:1; flex:1; font-size:10px; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
  cursor:default;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.tl-nm[contenteditable="true"] {
  background:var(--bg); border:1px solid var(--accent); border-radius:1px;
  padding:0 2px; outline:none; cursor:text;
  -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;
}
.tl-ibtn {
  background:none; border:none; color:var(--text-muted); opacity:0.4;
  cursor:pointer; padding:0; -ms-flex-negative:0; flex-shrink:0; line-height:1;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
.tl-ibtn:hover      { opacity:1; }
.tl-ibtn.hid        { color:var(--border); }
.tl-ibtn.lkd        { color:var(--warning); opacity:0.9; }
.tl-ibtn.tl-ibtn-del:hover { color:var(--danger); opacity:1; }
.tl-indent      { width:10px; -ms-flex-negative:0; flex-shrink:0; }

/* ── Track area ───────────────────────────────────────────────────────────── */
.tl-track { position:relative; -webkit-box-flex:1; -ms-flex:1; flex:1; height:22px; overflow:visible; }

/* Diamond keyframe  — tween / property animation */
.tl-kfd {
  position:absolute; width:8px; height:8px;
  background:var(--accent); border-radius:1px;
  -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);
  top:7px; margin-left:-4px; cursor:pointer; z-index:3;
}
.tl-kfd:hover { background:#fff; }

/* Dot keyframe — triggered transition */
.tl-kfdt {
  position:absolute; width:8px; height:8px; border-radius:50%;
  background:var(--warning); top:7px; margin-left:-4px; cursor:pointer; z-index:3;
}
.tl-kfdt:hover { background:#fff; }

/* Tween bar between diamonds */
.tl-tw {
  position:absolute; height:2px; top:10px;
  background:var(--accent); opacity:0.35; z-index:1; border-radius:1px;
}
/* Transition span after dot */
.tl-ts {
  position:absolute; height:5px; top:8px;
  background:var(--warning); opacity:0.22; z-index:1; border-radius:1px;
}

/* Clip block — video / audio edit */
.tl-clip {
  position:absolute; height:16px; top:3px; border-radius:2px;
  overflow:hidden; cursor:grab; z-index:2;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  padding:0 4px;
}
.tl-cv { background:rgba(74,158,255,0.28);  border-left:2px solid var(--accent); border-right:2px solid var(--accent); }
.tl-ca { background:rgba(74,222,128,0.28);  border-left:2px solid var(--success); border-right:2px solid var(--success); }
.tl-cnm {
  font-size:9px; color:var(--text-muted); white-space:nowrap;
  overflow:hidden; pointer-events:none;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}

/* Label marker — frame-width fill block with a left accent border */
.tl-lm  {
  position:absolute; top:0; bottom:0;
  background:rgba(74,222,128,0.18); border-left:2px solid var(--success);
  cursor:ew-resize; z-index:2; overflow:visible;
}
.tl-lmf {
  position:absolute; top:3px; left:3px; font-size:9px; color:var(--success);
  white-space:nowrap; pointer-events:none;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}

/* Script trigger */
.tl-stg {
  position:absolute; top:4px; width:10px; height:14px; margin-left:-5px;
  z-index:2; cursor:pointer; color:var(--warning);
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
}

/* Folder bar */
.tl-fbar { position:absolute; height:3px; top:9px; background:var(--border); border-radius:1px; opacity:0.5; }

/* Component range block + comp-coloured tween/keyframe overrides */
.tl-cblk {
  position:absolute; height:16px; top:3px; border-radius:2px; z-index:1;
  background:rgba(129,140,248,0.14); border:1px solid rgba(129,140,248,0.38);
}
.tl-tw-c  { background:#818cf8; }
.tl-kfd-c { background:#818cf8; }

/* ── Playhead ─────────────────────────────────────────────────────────────── */
.tl-ph     { position:absolute; top:0; bottom:0; z-index:20; pointer-events:none; }
.tl-ph-hd  {
  position:absolute; top:0; left:-5px; width:0; height:0;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:10px solid var(--danger); cursor:ew-resize; pointer-events:all;
}
.tl-ph-ln  { position:absolute; top:0; bottom:0; left:0; width:1px; background:var(--danger); opacity:0.7; }

/* ── Two-column body: [track scroll] [inspector] ──────────────────────────── */
.tl-body {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:horizontal; -webkit-box-direction:normal;
  -ms-flex-direction:row; flex-direction:row;
  -webkit-box-flex:1; -ms-flex:1; flex:1; -ms-flex-negative:0; flex-shrink:0;
}

/* ── Inspector sidebar ────────────────────────────────────────────────────── */
.tl-inspector {
  width:200px; -ms-flex-negative:0; flex-shrink:0;
  background:var(--bg-panel); border-left:1px solid var(--border);
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal;
  -ms-flex-direction:column; flex-direction:column;
}
.tl-isp-hd {
  padding:6px 8px 5px; border-bottom:1px solid var(--border);
  -ms-flex-negative:0; flex-shrink:0;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.tl-isp-title {
  font-size:10px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tl-isp-sub { font-size:9px; color:var(--text-muted); margin-top:1px; }
.tl-isp-body {
  -webkit-box-flex:1; -ms-flex:1; flex:1; overflow-y:auto; padding:6px 8px;
}
.tl-isp-body > * + * { margin-top:5px; }
.tl-isp-empty {
  padding:20px 4px; font-size:10px; color:var(--text-muted); text-align:center;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.tl-isp-sec {
  font-size:9px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.tl-isp-chip {
  display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  font-size:10px; padding:2px 6px; border-radius:2px;
  background:var(--bg-input); color:var(--text);
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.tl-isp-note {
  font-size:9px; color:var(--text-muted); font-style:italic;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.tl-isp-row {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
.tl-isp-row > * + * { margin-left:4px; }
.tl-isp-mt { margin-top:4px; }
.tl-isp-inp {
  -webkit-box-flex:1; -ms-flex:1; flex:1;
  padding:2px 5px; font-size:10px; font-family:inherit;
  background:var(--bg); border:1px solid var(--border); border-radius:2px;
  color:var(--text); outline:none; min-width:0;
}
.tl-isp-inp:focus { border-color:var(--accent); }
.tl-isp-btn {
  padding:2px 7px; font-size:10px; font-family:inherit;
  border:1px solid var(--border); border-radius:2px;
  background:var(--bg-input); color:var(--text); cursor:pointer;
  white-space:nowrap; -ms-flex-negative:0; flex-shrink:0; line-height:1.4;
}
.tl-isp-btn:hover { background:var(--bg-hover); border-color:var(--text-muted); }
.tl-isp-btn.add  { background:var(--accent); border-color:var(--accent); color:#fff; }
.tl-isp-btn.add:hover { border-color:#6aadff; background:#6aadff; }
.tl-isp-btn.rm   { border-color:var(--danger); color:var(--danger); background:none; }
.tl-isp-btn.rm:hover { background:rgba(248,113,113,0.12); }

/* ── Element drag ghost — outline at original position while dragging ──── */
.tl-edrag-ghost {
  position:absolute; pointer-events:none; z-index:4;
  opacity:0.25; outline:1px dashed rgba(255,255,255,0.5);
}

/* ── Additional margin-top utilities ────────────────────────────────────── */
.mt3 { margin-top:3px; }
.mt6 { margin-top:6px; }

/* ── Drag-drop zone text elements ───────────────────────────────────────── */
.dz-icon { font-size:12px; margin-bottom:2px; }
.dz-hint { font-size:9px; color:var(--text-muted); }

/* ── Dropdown scroll list + footer ─────────────────────────────────────── */
.dd-scroll { max-height:120px; overflow-y:auto; }
.dd-foot {
  padding:4px; border-top:1px solid var(--border);
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
.dd-foot > * + * { margin-left:4px; }

/* ── Extra-small button (icon/action buttons inside panels) ─────────────── */
.btn-xs {
  padding:2px 5px;
  display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}

/* ── Narrow number input (e.g. 24h time hour field) ─────────────────────── */
.inp-sm { width:32px; }

/* ── Timezone "no results" message ─────────────────────────────────────── */
.tz-empty { padding:4px 6px; color:var(--text-muted); font-style:italic; }

/* ── Icon toolbar — preview glyph + name label ──────────────────────────── */
.icon-prev { font-size:13px; }
.icon-nm {
  -webkit-box-flex:1; -ms-flex:1; flex:1; margin-left:4px;
}

/* ── Tab content label ──────────────────────────────────────────────────── */
.tab-cnt { font-size:10px; color:var(--text-muted); }

/* ── Stepper (+/- flanking a number input) ──────────────────────────────── */
.step-wrap {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  border:1px solid var(--border); border-radius:2px;
  background:var(--bg-input); overflow:hidden;
}
.step-wrap:focus-within { border-color:var(--accent); }
.step-btn {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  border:none; background:none; color:var(--text-muted);
  padding:2px 6px; cursor:pointer; font-size:13px; line-height:1;
  -ms-flex-negative:0; flex-shrink:0;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.step-btn:hover { background:var(--bg-hover); color:var(--text); }
.step-inp {
  border:none; background:none; color:var(--text);
  text-align:center; font-size:10px; font-family:inherit;
  -webkit-box-flex:1; -ms-flex:1; flex:1; min-width:0;
  outline:none; padding:2px 0;
}
.step-inp::-webkit-outer-spin-button,
.step-inp::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.step-inp[type=number] { -moz-appearance:textfield; }

/* ── Search input ────────────────────────────────────────────────────────── */
.srch-wrap {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  border:1px solid var(--border); border-radius:2px;
  background:var(--bg-input); padding-left:6px; overflow:hidden;
}
.srch-wrap:focus-within { border-color:var(--accent); }
.srch-ico {
  -ms-flex-negative:0; flex-shrink:0; color:var(--text-muted);
  pointer-events:none;
}
.srch-inp {
  border:none; background:none; color:var(--text);
  font-size:10px; font-family:inherit;
  -webkit-box-flex:1; -ms-flex:1; flex:1; min-width:0;
  outline:none; padding:3px 6px;
}
.srch-inp::-webkit-input-placeholder { color:var(--text-muted); }
.srch-inp::-moz-placeholder          { color:var(--text-muted); }
.srch-inp:-ms-input-placeholder      { color:var(--text-muted); }
.srch-inp::placeholder               { color:var(--text-muted); }

/* ── Tooltip ─────────────────────────────────────────────────────────────── */
/* Usage: wrap any element in .tip-wrap, place a .tip + position modifier     */
/* inside it. Tooltip appears on hover — pure CSS, no JS needed.              */
/* ::before = border triangle (black, 6px); ::after = fill triangle (#f0f0f0, */
/* 5px), offset 1px toward the body, creating a seamless 1px bordered arrow.  */
.tip-wrap { position:relative; display:inline-block; }

.tip {
  position:absolute;
  background:#f0f0f0; border:1px solid #000000; border-radius:5px;
  box-shadow:0 2px 6px rgba(0,0,0,0.5);
  color:var(--bg); font-size:9px; line-height:1.4;
  padding:3px 7px; white-space:nowrap; z-index:200;
  opacity:0; pointer-events:none;
  -webkit-transition:opacity 0s; transition:opacity 0s;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.tip:before, .tip:after { content:''; position:absolute; width:0; height:0; }
.tip-wrap:hover .tip { opacity:1; -webkit-transition:opacity 0.15s 0.7s; transition:opacity 0.15s 0.7s; }
.tip-ml { white-space:normal; width:120px; text-align:center; }
/* Drag suppression — add .tip-drag to any .tip-wrap ancestor while dragging  */
.tip-drag .tip { opacity:0 !important; pointer-events:none !important; -webkit-transition:none !important; transition:none !important; }

/* ── Top, centred (default) ── */
.tip-t {
  bottom:calc(100% + 6px); left:50%;
  -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%);
}
.tip-t:before {
  top:100%; left:50%; margin-left:-6px;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:6px solid #000000;
}
.tip-t:after {
  top:100%; left:50%; margin-left:-5px; margin-top:-1px;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:5px solid #f0f0f0;
}

/* ── Bottom, centred ── */
.tip-b {
  top:calc(100% + 6px); left:50%;
  -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%);
}
.tip-b:before {
  bottom:100%; left:50%; margin-left:-6px;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-bottom:6px solid #000000;
}
.tip-b:after {
  bottom:100%; left:50%; margin-left:-5px; margin-bottom:-1px;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-bottom:5px solid #f0f0f0;
}

/* ── Left, centred ── */
.tip-l {
  right:calc(100% + 6px); top:50%;
  -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%);
}
.tip-l:before {
  left:100%; top:50%; margin-top:-6px;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
  border-left:6px solid #000000;
}
.tip-l:after {
  left:100%; top:50%; margin-top:-5px; margin-left:-1px;
  border-top:5px solid transparent; border-bottom:5px solid transparent;
  border-left:5px solid #f0f0f0;
}

/* ── Right, centred ── */
.tip-r {
  left:calc(100% + 6px); top:50%;
  -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%);
}
.tip-r:before {
  right:100%; top:50%; margin-top:-6px;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
  border-right:6px solid #000000;
}
.tip-r:after {
  right:100%; top:50%; margin-top:-5px; margin-right:-1px;
  border-top:5px solid transparent; border-bottom:5px solid transparent;
  border-right:5px solid #f0f0f0;
}

/* ── Top-left corner ── */
.tip-tl { bottom:calc(100% + 6px); right:0; }
.tip-tl:before {
  top:100%; right:8px;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:6px solid #000000;
}
.tip-tl:after {
  top:100%; right:8px; margin-top:-1px;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:5px solid #f0f0f0;
}

/* ── Top-right corner ── */
.tip-tr { bottom:calc(100% + 6px); left:0; }
.tip-tr:before {
  top:100%; left:8px;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:6px solid #000000;
}
.tip-tr:after {
  top:100%; left:8px; margin-top:-1px;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:5px solid #f0f0f0;
}

/* ── Bottom-left corner ── */
.tip-bl { top:calc(100% + 6px); right:0; }
.tip-bl:before {
  bottom:100%; right:8px;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-bottom:6px solid #000000;
}
.tip-bl:after {
  bottom:100%; right:8px; margin-bottom:-1px;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-bottom:5px solid #f0f0f0;
}

/* ── Bottom-right corner ── */
.tip-br { top:calc(100% + 6px); left:0; }
.tip-br:before {
  bottom:100%; left:8px;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-bottom:6px solid #000000;
}
.tip-br:after {
  bottom:100%; left:8px; margin-bottom:-1px;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-bottom:5px solid #f0f0f0;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Progress Bar                                                                */
/* ─────────────────────────────────────────────────────────────────────────── */
.pbar-wrap {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
.pbar-track {
  -webkit-box-flex:1; -ms-flex:1; flex:1;
  height:6px; background:var(--bg-input); border-radius:2px; overflow:hidden;
}
.pbar-fill {
  height:100%; background:var(--accent); border-radius:2px; width:0;
  -webkit-transition:width .4s ease; transition:width .4s ease;
}
.pbar-lbl {
  font-size:9px; color:var(--text-muted); white-space:nowrap; min-width:28px; text-align:right;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.pbar-wrap > .pbar-lbl { margin-left:8px; }
.pbar-list > * + * { margin-top:6px; }
.pbar-done .pbar-fill { background:var(--success); }
.pbar-done .pbar-lbl  { color:var(--success); }
.pbar-err  .pbar-fill { background:var(--danger); }
.pbar-err  .pbar-lbl  { color:var(--danger); }
/* Named bar row: category label + bar + value */
.pbar-row {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
.pbar-cat {
  font-size:9px; color:var(--text-muted); white-space:nowrap; min-width:44px;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.pbar-done .pbar-cat { color:var(--success); }
.pbar-err  .pbar-cat { color:var(--danger); }
.pbar-row > .pbar-wrap { -webkit-box-flex:1; -ms-flex:1; flex:1; margin-left:6px; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* Progress Circle                                                             */
/* ─────────────────────────────────────────────────────────────────────────── */
.pcir-wrap { position:relative; display:inline-block; }
.pcir-svg  { display:block; width:56px; height:56px; }
.pcir-sm .pcir-svg { width:40px; height:40px; }
.pcir-track { fill:none; stroke:var(--bg-input); stroke-width:2.5; }
.pcir-fill  { fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; }
.pcir-lbl {
  position:absolute; top:0; right:0; bottom:0; left:0;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  font-size:10px; color:var(--text); font-weight:600; line-height:1.2; text-align:center;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  pointer-events:none;
}
.pcir-sm .pcir-lbl { font-size:8px; }
.pcir-done .pcir-fill { stroke:var(--success); }
.pcir-done .pcir-lbl  { color:var(--success); }
.pcir-err  .pcir-fill { stroke:var(--danger); }
.pcir-err  .pcir-lbl  { color:var(--danger); }
.pcir-row { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; }
.pcir-row > * + * { margin-left:12px; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* Spinner / Loading indicator                                                 */
/* ─────────────────────────────────────────────────────────────────────────── */
@-webkit-keyframes spin-r {
  to { -webkit-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); }
}
@keyframes spin-r {
  to { -webkit-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); }
}
.spin {
  display:inline-block;
  width:20px; height:20px;
  border:2px solid var(--bg-input);
  border-top-color:var(--accent);
  border-radius:50%;
  -webkit-box-sizing:border-box; box-sizing:border-box;
  -ms-flex-negative:0; flex-shrink:0;
  -webkit-animation:spin-r .8s linear infinite;
  animation:spin-r .8s linear infinite;
}
.spin-sm { width:12px; height:12px; }
.spin-lg { width:32px; height:32px; border-width:3px; }
.spin-ok  { border-top-color:var(--success); }
.spin-err { border-top-color:var(--danger); }
/* Inline row: spinner + label side by side, vertically centred */
.spin-row {
  display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
}
.spin-row > * + * { margin-left:5px; }
/* Overlay */
.spin-overlay {
  position:fixed; top:0; right:0; bottom:0; left:0;
  background:rgba(0,0,0,0.65);
  z-index:9000;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;
  opacity:0; pointer-events:none;
  -webkit-transition:opacity .2s; transition:opacity .2s;
}
.spin-overlay.active { opacity:1; pointer-events:auto; }
/* Scoped variant: absolute-positioned over a position:relative parent */
.spin-overlay.spin-local { position:absolute; border-radius:2px; }
/* Host element for a scoped overlay — add this class to the parent */
.spin-host { position:relative; }
/* Optional message text beneath the overlay spinner */
.spin-msg {
  margin-top:10px;
  font-size:10px; color:var(--text-muted); text-align:center;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Toast Notifications                                                          */
/* ─────────────────────────────────────────────────────────────────────────── */
@-webkit-keyframes toast-in {
  from { opacity:0; -webkit-transform:translateX(110%); -ms-transform:translateX(110%); transform:translateX(110%); }
  to   { opacity:1; -webkit-transform:translateX(0);    -ms-transform:translateX(0);    transform:translateX(0); }
}
@keyframes toast-in {
  from { opacity:0; -webkit-transform:translateX(110%); -ms-transform:translateX(110%); transform:translateX(110%); }
  to   { opacity:1; -webkit-transform:translateX(0);    -ms-transform:translateX(0);    transform:translateX(0); }
}
@-webkit-keyframes toast-out {
  from { opacity:1; -webkit-transform:translateX(0);    -ms-transform:translateX(0);    transform:translateX(0); }
  to   { opacity:0; -webkit-transform:translateX(110%); -ms-transform:translateX(110%); transform:translateX(110%); }
}
@keyframes toast-out {
  from { opacity:1; -webkit-transform:translateX(0);    -ms-transform:translateX(0);    transform:translateX(0); }
  to   { opacity:0; -webkit-transform:translateX(110%); -ms-transform:translateX(110%); transform:translateX(110%); }
}
/* Shelf: fixed top-right container that stacks toasts vertically */
.toast-shelf {
  position:fixed; top:16px; right:16px; z-index:9100;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;
  width:270px;
  max-width:calc(100% - 32px);
  max-height:calc(100vh - 32px); overflow:hidden;
  pointer-events:none;
}
.toast-shelf > * + * { margin-top:8px; }
/* Individual toast card */
.toast {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column;
  background:var(--bg-panel); border:1px solid var(--border); border-left-width:4px;
  border-radius:7px; padding:10px 10px 10px 12px;
  -webkit-box-shadow:0 4px 14px rgba(0,0,0,0.45); box-shadow:0 4px 14px rgba(0,0,0,0.45);
  pointer-events:auto;
  -webkit-animation:toast-in .25s ease both; animation:toast-in .25s ease both;
}
.toast.toast-out { -webkit-animation:toast-out .2s ease both; animation:toast-out .2s ease both; }
/* State: border-left colour */
.toast-info { border-left-color:var(--accent); }
.toast-ok   { border-left-color:var(--success); }
.toast-warn { border-left-color:var(--warning); }
.toast-err  { border-left-color:var(--danger); }
/* State: icon colour */
.toast-info .toast-icon { color:var(--accent); }
.toast-ok   .toast-icon { color:var(--success); }
.toast-warn .toast-icon { color:var(--warning); }
.toast-err  .toast-icon { color:var(--danger); }
/* Top row: icon+text flex:1, close button flex-shrink:0 */
.toast-top {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:flex-start; -ms-flex-align:flex-start; align-items:flex-start;
}
.toast-body {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:flex-start; -ms-flex-align:flex-start; align-items:flex-start;
  -webkit-box-flex:1; -ms-flex:1; flex:1; min-width:0;
}
.toast-icon { -ms-flex-negative:0; flex-shrink:0; margin-right:8px; margin-top:1px; }
.toast-content { -webkit-box-flex:1; -ms-flex:1; flex:1; min-width:0; }
.toast-title {
  font-size:11px; font-weight:600; color:var(--text); margin-bottom:2px;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.toast-msg {
  font-size:10px; color:var(--text-muted); line-height:1.5; word-break:break-word;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
/* Dismiss (×) button */
.toast-close {
  -ms-flex-negative:0; flex-shrink:0; margin-left:8px;
  background:none; border:none; padding:0; cursor:pointer; font-family:inherit;
  color:var(--text-muted);
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
}
.toast-close:hover { color:var(--text); }
/* Optional footer: action button */
.toast-foot { margin-top:8px; padding-top:6px; border-top:1px solid var(--border-light); }
.toast-action {
  background:none; border:none; padding:0; cursor:pointer; font-family:inherit;
  font-size:10px; font-weight:600; color:var(--accent);
}
.toast-action:hover { text-decoration:underline; }

/* ── Textarea ──────────────────────────────────────────────────────── */
.ta {
  display:block;
  width:100%;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  min-height:56px;
  padding:4px 6px;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:2px;
  color:var(--text);
  font-family:inherit;
  font-size:11px;
  line-height:1.5;
  resize:none;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.ta:focus { border-color:var(--accent); }
.ta[disabled],.ta:disabled { opacity:0.45; cursor:not-allowed; }
.ta.ta-err { border-color:var(--danger); }
.ta.ta-resize { resize:vertical; min-height:56px; }
.ta-foot {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end;
  margin-top:2px;
}
.ta-count {
  font-size:10px; color:var(--text-muted);
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.ta-count-warn { color:var(--warning); }
.ta-count-over { color:var(--danger); }

/* ── Easing Panel ─────────────────────────────────────────────────────────── */
.ez-wrap {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:horizontal; -webkit-box-direction:normal;
  -ms-flex-direction:row; flex-direction:row;
}
.ez-col {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal;
  -ms-flex-direction:column; flex-direction:column;
}
.ez-col-type { width:120px; -ms-flex-negative:0; flex-shrink:0; border-right:1px solid var(--border); }
.ez-col-fn   { width:108px; -ms-flex-negative:0; flex-shrink:0; border-right:1px solid var(--border); }
.ez-col-fn.ez-hidden { display:none; }
.ez-col-canvas {
  -webkit-box-flex:1; -ms-flex:1; flex:1;
  padding:8px 10px; min-width:0;
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-orient:vertical; -webkit-box-direction:normal;
  -ms-flex-direction:column; flex-direction:column;
}
.ez-col-hdr {
  padding:5px 8px 4px; font-size:10px; font-weight:600; color:var(--text-muted);
  border-bottom:1px solid var(--border);
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.ez-list { list-style:none; margin:0; padding:3px 0; overflow-y:auto; }
.ez-item {
  padding:4px 10px; font-size:11px; color:var(--text-muted); cursor:pointer;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.ez-item:hover { background:rgba(255,255,255,0.05); color:var(--text); }
.ez-item.ez-active { background:rgba(74,158,255,0.18); color:var(--accent); }
.ez-intensity-row {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  margin-bottom:6px;
}
.ez-intensity-row .lbl { margin-bottom:0; width:52px; -ms-flex-negative:0; flex-shrink:0; }
.ez-intensity-row .range-wrap { -webkit-box-flex:1; -ms-flex:1; flex:1; padding:4px 0; }
.ez-intensity-row .slider-val { width:22px; text-align:right; margin-left:6px; -ms-flex-negative:0; flex-shrink:0; }
.ez-intensity-row.ez-hidden { display:none; }
.ez-canvas-wrap { line-height:0; display:block; }
.ez-out .tip-wrap { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; }
.ez-canvas { display:block; cursor:crosshair; }
.ez-status {
  height:16px; margin-top:3px; font-size:10px; color:var(--text-muted);
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.ez-out { margin-top:6px; }
.ez-out-row {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  margin-top:4px;
}
.ez-out-lbl {
  width:68px; -ms-flex-negative:0; flex-shrink:0;
  font-size:10px; color:var(--text-muted);
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.ez-out-field {
  -webkit-box-flex:1; -ms-flex:1; flex:1; min-width:0;
  font-size:10px; font-family:monospace;
  background:var(--bg-input); border:1px solid var(--border); border-radius:2px;
  color:var(--text); padding:3px 5px; outline:none;
}
.ez-out-field.ez-na { color:var(--text-muted); font-style:italic; }
.ez-out-copy { margin-left:4px; -ms-flex-negative:0; flex-shrink:0; }

/* Easing panel — header layout (replaces column layout) */
.ez-wrap-v { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; }
.ez-hdr {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  padding:0 8px;
  height:36px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  -ms-flex-negative:0; flex-shrink:0;
  overflow:visible;
}
.ez-hdr-title { font-size:11px; font-weight:600; color:var(--text); -ms-flex-negative:0; flex-shrink:0; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.ez-hdr-sep { width:1px; height:18px; background:var(--border); margin:0 8px; -ms-flex-negative:0; flex-shrink:0; }
.ez-hdr-sep.ez-hidden { display:none; }
.ez-dd-wrap {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -ms-flex-negative:0; flex-shrink:0;
}
.ez-dd-wrap.ez-hidden { display:none; }
.ez-dd-lbl { font-size:10px; color:var(--text-muted); margin-right:5px; -ms-flex-negative:0; flex-shrink:0; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.ez-type-btn { min-width:108px; }
.ez-fn-btn   { min-width:84px; }
.ez-intensity-wrap {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  -webkit-box-flex:1; -ms-flex:1; flex:1;
  min-width:0;
}
.ez-intensity-wrap.ez-hidden { display:none; }
.ez-int-lbl { margin-bottom:0; margin-right:6px; -ms-flex-negative:0; flex-shrink:0; }
.ez-intensity-wrap .range-wrap { -webkit-box-flex:1; -ms-flex:1; flex:1; min-width:80px; padding:4px 0; }
.ez-intensity-wrap .slider-val { width:22px; text-align:right; margin-left:6px; -ms-flex-negative:0; flex-shrink:0; }
.ez-body { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; padding:8px; -webkit-box-flex:1; -ms-flex:1; flex:1; }

/* Easing panel — form-style header (label-above-field, two-column row) */
.ez-hdr-form { padding:6px 8px 8px; border-bottom:1px solid var(--border); -ms-flex-negative:0; flex-shrink:0; }
.ez-hdr-row { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:flex-end; -ms-flex-align:end; align-items:flex-end; }
.ez-hdr-row > * + * { margin-left:6px; }
.ez-hdr-col { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-flex:1; -ms-flex:1; flex:1; min-width:0; }
.ez-hdr-col.ez-hidden { display:none; }
.ez-hdr-col .dd { width:100%; }
.ez-hdr-col .dd-btn { width:100%; -webkit-box-sizing:border-box; box-sizing:border-box; }
.ez-hdr-int { padding-top:6px; }
.ez-hdr-int .lbl { margin-bottom:2px; }
.ez-hdr-int .range-wrap { padding:4px 0; }
.ez-hdr-int.ez-hidden { display:none; }


/* ═══════════════════════════════════════════════════════════════════════════
   CHARTS — .ch- prefix
   Include charts.js alongside shared.css to render chart components.
   All selectors prefixed .ch- ; series colour tokens --ch-s1 through --ch-s8.
   ── CROSS-BROWSER NOTES ───────────────────────────────────────────────────
   SVG fill/stroke attrs use hex values from PALETTE (JS); --ch-s* tokens are
   available for external consumer CSS but not used in SVG attrs directly.
   Runtime-computed positions (tooltip left/top) are set by JS — same category
   as timeline.html pixel positions and easing.html canvas.style.cursor.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Series colour tokens ─────────────────────────────────────────────────── */
:root {
  --ch-s1:#4a9eff; /* blue (accent) */
  --ch-s2:#2dd4bf; /* teal          */
  --ch-s3:#4ade80; /* green         */
  --ch-s4:#fbbf24; /* yellow        */
  --ch-s5:#fb923c; /* orange        */
  --ch-s6:#f87171; /* red           */
  --ch-s7:#a78bfa; /* purple        */
  --ch-s8:#f472b6; /* pink          */
}

/* ── Chart container ──────────────────────────────────────────────────────── */
.ch-wrap { position:relative; display:block; width:100%; }
.ch-wrap svg { display:block; overflow:visible; }

/* ── Title & caption ──────────────────────────────────────────────────────── */
.ch-title {
  font-size:11px; font-weight:600; color:var(--text); margin-bottom:6px;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.ch-caption {
  font-size:10px; color:var(--text-muted); margin-top:6px;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}

/* ── Legend ───────────────────────────────────────────────────────────────── */
.ch-legend {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -ms-flex-wrap:wrap; flex-wrap:wrap;
  margin-top:8px;
}
.ch-legend > * + * { margin-left:10px; }
.ch-leg-item {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  margin-bottom:4px;
}
.ch-leg-dot {
  width:8px; height:8px; border-radius:2px;
  -ms-flex-negative:0; flex-shrink:0;
}
.ch-leg-dot + .ch-leg-lbl { margin-left:4px; }
.ch-leg-lbl {
  font-size:10px; color:var(--text-muted);
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}

/* ── Hover tooltip ────────────────────────────────────────────────────────── */
.ch-tip {
  position:absolute; display:none; opacity:0;
  background:rgba(28,28,28,0.5); border:1px solid rgba(255,255,255,0.12); border-radius:7px;
  padding:5px 8px; z-index:10; pointer-events:none;
  min-width:80px; max-width:180px; white-space:nowrap;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  -webkit-transition:opacity 0.3s ease;
  transition:opacity 0.3s ease;
}
.ch-tip-cat {
  display:block; font-size:10px; color:#999999; margin-bottom:3px;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.ch-tip-val {
  display:block; font-size:11px; font-weight:600; color:#e8e8e8;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
/* Multi-series tooltip row */
.ch-tip-row {
  display:-webkit-box; display:-ms-flexbox; display:flex;
  -webkit-box-align:center; -ms-flex-align:center; align-items:center;
  margin-top:3px;
}
.ch-tip-dot {
  width:6px; height:6px; border-radius:1px;
  -ms-flex-negative:0; flex-shrink:0;
}
.ch-tip-dot + .ch-tip-name { margin-left:5px; }
.ch-tip-name {
  font-size:10px; color:#999999;
  -webkit-box-flex:1; -ms-flex:1; flex:1;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.ch-tip-name + .ch-tip-sv { margin-left:8px; }
.ch-tip-sv {
  font-size:10px; font-weight:600; color:#e8e8e8;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}