/*
 * Vectura Studio — skin/components.css
 *
 * Skin-agnostic component structure: layout, geometry, typography, transitions.
 * Palette tokens (--ui-*) come from per-skin files (./meridian-dark.css, etc.).
 *
 * Sourced verbatim from docs/design/themes-mockup.html (lines 87–842), with two edits:
 *   1. Motion @keyframes blocks moved to ./motion.css.
 *   2. Per-mode palette blocks ([data-mode="dark"|"light"]) moved to per-skin files;
 *      mockup [data-mode="..."] selectors are not used here — palette tokens are
 *      written to :root via the active <link rel="stylesheet" id="active-skin">.
 *
 * NOTE: the mockup defined html/body background, font-family etc. on the document.
 * The current Vectura body uses Tailwind utility classes that bind to the same
 * variables (`bg-vectura-bg`, `text-vectura-text`); these declarations re-establish
 * the variable-driven base in case Tailwind classes are absent on a node.
 */

/* ── BASE ────────────────────────────────────────────────────── */
[data-ui-skin] body {
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
  color: var(--ui-text);
  -webkit-font-smoothing: antialiased;
}

/* ── CHEVRON (unified disclosure indicator) ──────────────────────
 * Single Lucide chevron-down (path "m6 9 6 6 6-6" in 24x24).
 * Use --chevron-svg as a mask source; color via background-color.
 * Rotation conveys direction: 0deg=down, -90deg=right, 180deg=up, 90deg=left. */
:root {
  --chevron-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}
.chev {
  display: inline-block;
  width: 12px; height: 12px;
  background-color: currentColor;
  -webkit-mask: var(--chevron-svg) center / contain no-repeat;
  mask: var(--chevron-svg) center / contain no-repeat;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.vectura-skin-app-wrapper { display: flex; flex-direction: column; height: 100vh; overflow: hidden; position: relative; }

/* ── HEADER ──────────────────────────────────────────────────── */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 38px; padding: 0 14px;
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-border);
  flex-shrink: 0; z-index: 200; position: relative; gap: 10px;
  transition: background 0.2s, border-color 0.2s;
}
.brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.brand-sq {
  width: 11px; height: 11px;
  background: var(--ui-accent);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--ui-accent-2);
  transition: background 0.2s, box-shadow 0.2s;
}
.brand-name {
  font-weight: 700; letter-spacing: 0.05em; font-size: 12px;
  color: var(--ui-accent); white-space: nowrap;
  font-family: var(--font-mono);
  transition: color 0.2s;
}
.brand-sub { font-weight: 300; color: var(--ui-muted); letter-spacing: 0; }

/* ── MENUS ───────────────────────────────────────────────────── */
.menubar { display: flex; align-items: stretch; position: relative; gap: 1px; }
.menu-item { position: relative; display: flex; align-items: stretch; }
.menu-trigger {
  background: none; border: none; color: var(--ui-text-2);
  font-family: var(--font-ui); font-size: var(--font-size-sm); font-weight: 500;
  padding: 0 10px; cursor: pointer; letter-spacing: 0;
  transition: background 0.1s, color 0.1s; white-space: nowrap;
  display: flex; align-items: center; border-radius: var(--radius-sm);
}
.menu-trigger:hover { background: var(--ui-ctrl-hov); color: var(--ui-text); }
.menu-trigger.open { background: var(--ui-ctrl-hov); color: var(--ui-accent); }

.menu-dropdown {
  position: absolute; top: calc(100% + 5px); left: 0;
  min-width: 244px;
  background: var(--ui-panel);
  border: 1px solid var(--ui-border-hi);
  border-top: 3px solid var(--ui-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 9999; display: none; overflow: hidden;
}
.menu-dropdown.open { display: block; }

.menu-entry {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  min-height: var(--row-height);
  cursor: pointer; gap: 20px;
  font-size: var(--font-size-sm); font-weight: 500;
  font-family: var(--font-ui);
  color: var(--ui-text);
  transition: background 0.07s, color 0.07s; white-space: nowrap;
}
.menu-entry:hover { background: var(--ui-accent-2); color: var(--ui-accent); }
.menu-entry.dim { opacity: 0.35; cursor: default; pointer-events: none; }
.msc {
  font-size: var(--font-size-xs); color: var(--ui-muted);
  font-family: var(--font-mono); letter-spacing: 0.04em; flex-shrink: 0;
}
.menu-sep { height: 1px; background: var(--ui-border); margin: 3px 0; }
.menu-cat {
  padding: 5px 14px 2px;
  font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ui-muted);
  font-family: var(--font-mono);
}
.menu-check {
  width: 14px; height: 14px; display: flex; align-items: center;
  justify-content: center; font-size: 10px; color: var(--ui-accent); flex-shrink: 0;
  margin-right: 2px;
}

.header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hdr-status {
  font-size: var(--font-size-xs); letter-spacing: 0.08em;
  color: var(--ui-muted); text-transform: uppercase; font-family: var(--font-mono);
}
.hdr-btn {
  height: 26px; padding: 0 10px;
  background: var(--ui-ctrl); border: 1px solid var(--ui-border);
  border-radius: var(--radius-md); color: var(--ui-text-2);
  font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 500;
  cursor: pointer; display: flex; align-items: center; gap: 4px;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.hdr-btn:hover { background: var(--ui-ctrl-hov); border-color: var(--ui-border-hi); color: var(--ui-accent); }
.hdr-btn.is-danger { background: var(--ui-danger); border-color: var(--ui-danger); color: #fff; }
.hdr-btn.is-danger:hover { opacity: 0.88; color: #fff; }

/* ── MAIN LAYOUT ─────────────────────────────────────────────── */
.app-main { display: flex; flex: 1; overflow: hidden; }

/* ── LEFT PANE ───────────────────────────────────────────────── */
.pane-left {
  width: var(--pane-left-width); flex-shrink: 0;
  background: var(--ui-panel);
  border-right: none;
  box-shadow: var(--shadow-pane);
  display: flex; flex-direction: column; overflow: hidden;
  transition: background 0.2s, box-shadow 0.2s;
  z-index: 10; position: relative;
}
.pane-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--spacing-md);
  height: 36px;
  border-bottom: 1px solid var(--ui-border); flex-shrink: 0;
  background: var(--ui-panel-alt);
}
.pane-title {
  font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--ui-accent); font-family: var(--font-ui); transition: color 0.2s;
}
.pane-meta {
  font-size: var(--font-size-xs); color: var(--ui-muted);
  letter-spacing: 0.04em; font-family: var(--font-mono);
}
.pane-toggle {
  background: none; border: none; color: var(--ui-muted);
  cursor: pointer; font-size: 10px; padding: 3px; border-radius: var(--radius-sm);
  transition: color 0.1s;
}
.pane-toggle:hover { color: var(--ui-text); }
.pane-body { flex: 1; overflow-y: auto; overflow-x: hidden; }
.pane-body::-webkit-scrollbar { width: 3px; }
.pane-body::-webkit-scrollbar-thumb { background: var(--ui-border-hi); border-radius: 2px; }

/* Pre-Tailwind color fallbacks: [data-ui-skin] specificity (0,2,0) beats Tailwind's
   (0,1,0), so these fire from the first paint before the CDN MutationObserver runs.
   Colors match each skin's palette exactly — no visual difference once Tailwind loads. */
[data-ui-skin] .text-vectura-accent { color: var(--ui-accent); }
[data-ui-skin] .text-vectura-muted  { color: var(--ui-muted); }
[data-ui-skin] .text-vectura-text   { color: var(--ui-text); }

/* ── SECTIONS ────────────────────────────────────────────────── */
.sect { border-bottom: 1px solid var(--ui-border); }
.sect-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--spacing-md);
  min-height: var(--row-height);
  background: var(--ui-panel-alt); border: none; width: 100%;
  cursor: pointer; color: var(--ui-text-2);
  font-family: var(--font-ui); font-size: var(--font-size-sm); font-weight: 600;
  letter-spacing: 0; text-transform: none; text-align: left;
  transition: background 0.1s, color 0.1s; position: relative;
}
.sect-hdr:hover { background: var(--ui-ctrl-hov); color: var(--ui-text); }
/* Meridian left-accent bar — required parity detail (mockup line 247–256). */
.sect-hdr::before {
  content: ''; display: block;
  width: 3px; height: 14px;
  background: var(--ui-accent);
  border-radius: 2px; flex-shrink: 0;
  margin-right: var(--spacing-sm);
  opacity: 0.45; transition: opacity 0.15s;
}
.sect-hdr:hover::before { opacity: 1; }
.sect-arrow {
  width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sect-arrow::before {
  content: ''; display: block;
  width: 12px; height: 12px;
  background-color: var(--ui-muted);
  -webkit-mask: var(--chevron-svg) center / contain no-repeat;
  mask: var(--chevron-svg) center / contain no-repeat;
  transform: rotate(0deg);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.12s;
}
.sect-arrow.down::before {
  transform: rotate(180deg);
}
.sect-hdr:hover .sect-arrow::before,
.right-sect-hdr:hover .sect-arrow::before {
  background-color: var(--ui-text-2);
}
.sect-body {
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex; flex-direction: column; gap: var(--spacing-sm);
}

/* ── FORM CONTROLS ───────────────────────────────────────────── */
.ctrl-grp { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.ctrl-lbl {
  font-size: var(--font-size-sm); font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--ui-text-2); font-family: var(--font-ui);
}
.ctrl-sel, .ctrl-inp {
  background: var(--ui-ctrl); border: 1px solid var(--ui-border);
  color: var(--ui-text); font-family: var(--font-ui);
  font-size: var(--font-size-sm); font-weight: 400;
  padding: 0 var(--spacing-sm);
  height: var(--row-height);
  border-radius: var(--radius-sm);
  width: 100%; outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.ctrl-sel:hover, .ctrl-inp:hover { border-color: var(--ui-border-hi); }
.ctrl-sel { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 28px; }
.ctrl-sel:focus, .ctrl-inp:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-2); }
.ctrl-sel-wrap { position: relative; width: 100%; }
.ctrl-sel-wrap .ctrl-sel { width: 100%; }
.ctrl-sel-wrap::after {
  content: ''; position: absolute; right: 8px; top: 50%;
  width: 12px; height: 12px;
  background-color: var(--ui-muted);
  -webkit-mask: var(--chevron-svg) center / contain no-repeat;
  mask: var(--chevron-svg) center / contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
  transition: background-color 0.12s;
}
.ctrl-sel-wrap:hover::after, .ctrl-sel-wrap:focus-within::after {
  background-color: var(--ui-accent);
}
.ctrl-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); }
.ctrl-sub-lbl {
  font-size: var(--font-size-xs); color: var(--ui-muted);
  letter-spacing: 0; margin-bottom: var(--spacing-xs);
  font-family: var(--font-ui); font-weight: 500;
}
.ctrl-row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); }
.info-badge {
  font-size: 9px; color: var(--ui-muted);
  border: 1px solid var(--ui-border); border-radius: 50%;
  width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center;
  cursor: default; flex-shrink: 0; line-height: 1; font-family: var(--font-mono);
  transition: color 0.1s, border-color 0.1s;
}
.sect-hdr:hover .info-badge { color: var(--ui-accent); border-color: var(--ui-accent); }

/* ── SEGMENTED CONTROL ───────────────────────────────────────── */
.seg-ctrl {
  display: flex; background: var(--ui-ctrl);
  border: 1px solid var(--ui-border); border-radius: var(--radius-sm);
  overflow: hidden;
}
.seg-opt {
  flex: 1; padding: 0 var(--spacing-xs); height: var(--row-height);
  background: none; border: none; border-left: 1px solid var(--ui-border);
  color: var(--ui-text-2); font-family: var(--font-ui);
  font-size: var(--font-size-xs); font-weight: 500;
  cursor: pointer; transition: background 0.1s, color 0.1s; white-space: nowrap;
}
.seg-opt:first-child { border-left: none; }
.seg-opt.active { background: var(--ui-accent); color: #fff; border-color: var(--ui-accent); }
.seg-opt:not(.active):hover { background: var(--ui-ctrl-hov); color: var(--ui-text); }
/* Classic accents are near-white (#fafafa) — use a dark label so text is legible. */
:root[data-ui-skin^="classic"] .seg-opt.active { color: var(--ui-bg); }

/* ── TOGGLE BUTTON GROUP ─────────────────────────────────────── */
.tog-grp { display: flex; gap: var(--spacing-xs); }
.tog-btn {
  height: var(--row-height); padding: 0 var(--spacing-sm);
  background: var(--ui-ctrl); border: 1px solid var(--ui-border);
  color: var(--ui-text-2); font-family: var(--font-ui);
  font-size: var(--font-size-xs); font-weight: 500;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s; white-space: nowrap;
}
.tog-btn.active { background: var(--ui-accent-2); border-color: var(--ui-accent); color: var(--ui-accent); }
.tog-btn:not(.active):hover { border-color: var(--ui-border-hi); color: var(--ui-text); }

/* ── PILL TOGGLE SWITCH ──────────────────────────────────────── */
.sw-toggle {
  position: relative; display: inline-flex; width: 30px; height: 16px; flex-shrink: 0; cursor: pointer;
}
.sw-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.sw-track {
  position: absolute; inset: 0;
  background: var(--ui-border); border-radius: 9999px;
  transition: background 0.15s;
}
.sw-toggle input:checked ~ .sw-track { background: var(--ui-accent); }
.sw-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.sw-toggle input:checked ~ .sw-thumb { transform: translateX(14px); }

/* sw-toggle: on Classic-family themes restore native checkbox, hide visual spans.
   Meridian-family skin ids are `dark`/`lark`/`light` (unprefixed) and
   `meridian-*` aliases — the pill renders for all of them. */
:root[data-ui-skin^="classic"] .sw-track,
:root[data-ui-skin^="classic"] .sw-thumb { display: none; }
:root[data-ui-skin^="classic"] .sw-toggle { display: inline; width: auto; height: auto; }
:root[data-ui-skin^="classic"] .sw-toggle > input[type="checkbox"] {
  opacity: 1; width: auto; height: auto; position: static;
}

/* ── ANGLE CONTROL ───────────────────────────────────────────── */
.angle-ctrl { display: flex; align-items: center; gap: var(--spacing-sm); }
.angle-dial { width: 38px; height: 38px; flex-shrink: 0; cursor: grab; }
/* Scope SVG dial size to beat legacy styles.css which also sets width: 56px. */
[data-ui-skin] .angle-ctrl .angle-dial { width: 38px; height: 38px; background: none; border: none; }
.dial-ring { fill: none; stroke: var(--ui-border); stroke-width: 1.5; }
.dial-ring-inner { fill: none; stroke: var(--ui-border); stroke-width: 1; opacity: 0.4; }
.dial-tick { stroke: var(--ui-border); stroke-width: 1; }
.dial-needle { stroke: var(--ui-accent); stroke-width: 1.5; stroke-linecap: round; }
.dial-center { fill: var(--ui-ctrl); stroke: var(--ui-accent); stroke-width: 1.5; }
.dial-handle { fill: var(--ui-accent); }
.angle-inp-wrap {
  display: flex; align-items: center; gap: 3px;
  background: var(--ui-ctrl); border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--spacing-sm); height: var(--row-height);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.angle-inp-wrap:focus-within { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-2); }
.angle-inp {
  background: none; border: none; outline: none;
  color: var(--ui-text); font-family: var(--font-mono);
  font-size: var(--font-size-sm); width: 34px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.angle-unit { color: var(--ui-muted); font-size: var(--font-size-xs); font-family: var(--font-mono); }

/* ── NUMBER STEPPER ──────────────────────────────────────────── */
.num-step {
  display: flex; align-items: stretch;
  background: var(--ui-ctrl); border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm); overflow: hidden;
  height: var(--row-height);
  transition: border-color 0.12s;
}
.num-step:focus-within { border-color: var(--ui-accent); }
.num-step-inp {
  flex: 1; background: none; border: none; outline: none;
  text-align: center; color: var(--ui-text);
  font-family: var(--font-mono); font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums; min-width: 0;
}
.num-step-btn {
  width: 22px; background: none; border: none;
  border-left: 1px solid var(--ui-border);
  color: var(--ui-muted); cursor: pointer; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.08s, color 0.08s;
}
.num-step-btn:first-child { border-left: none; border-right: 1px solid var(--ui-border); }
.num-step-btn:hover { background: var(--ui-ctrl-hov); color: var(--ui-accent); }

/* ── SLIDERS ─────────────────────────────────────────────────── */
.slider-row { display: flex; align-items: center; gap: var(--spacing-sm); }

/*
 * Scoped to [data-ui-skin] so specificity (0,0,2,0) beats the legacy
 * input[type='range'] reset in styles.css (0,0,1,1) which loads after us.
 */
[data-ui-skin] .ctrl-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 2px;
  cursor: pointer;
  outline: none;
  background: linear-gradient(to right,
    var(--slider-start) 0%,
    var(--ui-accent) var(--fill, 0%),
    var(--ui-border) var(--fill, 0%) 100%
  );
}
/* Clear the legacy runnable-track so our input background shows through.
 * height: 4px (not 0) keeps the track height matching the gradient fill so
 * the 14px thumb centers correctly on the visible 4px track. */
[data-ui-skin] .ctrl-slider::-webkit-slider-runnable-track {
  background: transparent;
  height: 4px;
}
[data-ui-skin] .ctrl-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ui-accent);
  border: 2.5px solid var(--ui-panel);
  box-shadow: 0 0 0 1.5px var(--ui-accent);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
[data-ui-skin] .ctrl-slider:hover::-webkit-slider-thumb {
  transform: scale(1.18);
  box-shadow: 0 0 0 4px var(--ui-accent-2);
}
[data-ui-skin] .ctrl-slider:active::-webkit-slider-thumb {
  transform: scale(1.02);
  box-shadow: 0 0 0 2px var(--ui-accent-2);
}
[data-ui-skin] .ctrl-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ui-accent);
  border: 2.5px solid var(--ui-panel);
  box-shadow: 0 0 0 1.5px var(--ui-accent);
  cursor: pointer;
}
[data-ui-skin] .ctrl-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--ui-border); }
[data-ui-skin] .ctrl-slider::-moz-range-progress {
  height: 4px; border-radius: 2px 0 0 2px;
  background: linear-gradient(to right, var(--slider-start), var(--ui-accent));
}
[data-ui-skin] .ctrl-slider.just-released::-webkit-slider-thumb {
  animation: thumb-release var(--motion-thumb-release-dur) var(--motion-thumb-release-ease) forwards;
}

.sld-fx-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.sld-fx-wrap .ctrl-slider,
.sld-fx-wrap .pen-sld {
  flex: 1;
  width: 100%;
}
.sld-fx-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: var(--fill, 0%);
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: linear-gradient(to right, var(--ui-accent) 0%, #fff 100%);
}
.sld-fx-wrap:has(.pen-sld)::after { height: 3px; }
.sld-fx-wrap.fx-active::after {
  animation: fx-pulse-fill var(--motion-slider-pulse-dur) var(--motion-slider-pulse-ease) forwards;
}

.btn-pulse {
  animation: btn-press var(--motion-btn-fade-dur) var(--motion-btn-fade-ease) forwards !important;
}

.angle-dial.is-dragging .dial-handle {
  filter: drop-shadow(0 0 4px var(--ui-accent));
}
.angle-dial.is-dragging .dial-needle {
  stroke: var(--ui-accent);
  stroke-width: 2;
}

.slider-val {
  font-size: var(--font-size-xs); color: var(--ui-accent);
  min-width: 30px; max-width: 46px; text-align: right;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  background: none; border: 1px solid transparent; outline: none;
  padding: 1px 3px; border-radius: var(--radius-sm);
  cursor: default;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.slider-val:hover {
  background: var(--ui-ctrl); border-color: var(--ui-border); cursor: text;
}
.slider-val:focus {
  background: var(--ui-ctrl);
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-2);
  cursor: text;
}

/* Value chip inside a slider row — matches .slider-val appearance. */
[data-ui-skin] .slider-row .value-chip {
  font-size: var(--font-size-xs); color: var(--ui-accent);
  min-width: 30px; max-width: 46px; text-align: right;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  background: none; border: 1px solid transparent; outline: none;
  padding: 1px 3px; border-radius: var(--radius-sm);
  cursor: default;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}
[data-ui-skin] .slider-row .value-chip:hover {
  background: var(--ui-ctrl); border-color: var(--ui-border); cursor: pointer;
}

/* ── WORKSPACE ───────────────────────────────────────────────── */
.workspace-shell {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  background: var(--ui-workspace); position: relative;
  transition: background 0.2s;
}
.workspace-area {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}

/* ── TOOLBAR ─────────────────────────────────────────────────── */
[data-ui-skin] .tool-bar {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); z-index: 5;
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--spacing-sm);
  background: var(--ui-panel); border: 1px solid var(--ui-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  transition: background 0.2s, border-color 0.2s;
  max-height: calc(100% - 20px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
[data-ui-skin] .tool-bar::-webkit-scrollbar { width: 4px; }
[data-ui-skin] .tool-bar::-webkit-scrollbar-thumb { background: var(--ui-border); border-radius: 2px; }

/* ── TOOLBAR DOCK ─────────────────────────────────────────────── */
.toolbar-drag-handle {
  cursor: grab;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 14px;
  color: var(--ui-muted); opacity: 0.45;
  user-select: none; flex-shrink: 0; margin-bottom: 1px;
  overflow: hidden;
  transform-origin: center top;
  transition:
    height 0.34s cubic-bezier(0.34, 1.56, 0.64, 1),
    margin 0.34s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.16s ease-out;
}
.toolbar-drag-handle:hover { opacity: 0.8; }
.toolbar-drag-handle:active { cursor: grabbing; }
.toolbar-drag-handle .handle-vert { display: none; }

/* Pinned + floating: collapse the drag handle so the toolbar's top edge
   sits closer to the first tool icon. Snappy-elastic via back-ease bezier. */
.tool-bar.toolbar-locked:not([class*="toolbar-docked"]) .toolbar-drag-handle {
  height: 0;
  margin-top: -2px;
  margin-bottom: 0;
  transform: scaleY(0.4);
  opacity: 0;
  pointer-events: none;
}

/* Footer: pin/pop-out section, bleeds to toolbar edges with own bg.
   Sized to fit three small buttons within the tool-btn column width. */
.toolbar-footer {
  display: flex; justify-content: center; align-items: center;
  gap: 0; flex-shrink: 0;
  margin-top: 4px;
  margin-left: calc(-1 * var(--spacing-sm));
  margin-right: calc(-1 * var(--spacing-sm));
  margin-bottom: calc(-1 * var(--spacing-sm));
  padding: 4px 2px;
  border-top: 1px solid var(--ui-border);
  background: var(--ui-ctrl-hov);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* Inter-button spacing via margin (not flex gap) so collapsed buttons
   contribute zero space when locked and the pin centers cleanly. */
.toolbar-footer > button + button { margin-left: 2px; }

/* Footer buttons: tight outline icons, sized so 3 fit inside the 30px column */
.toolbar-pin-btn,
.toolbar-home-btn,
.toolbar-rotate-btn,
.toolbar-popout-btn {
  box-sizing: border-box;
  width: 13px; height: 13px; min-width: 13px; min-height: 13px;
  padding: 0; background: none;
  border: 1px solid var(--ui-border);
  border-radius: 3px; cursor: pointer;
  color: var(--ui-muted);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition:
    width 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    min-width 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    min-height 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    margin-left 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    margin-top 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-width 0.24s ease,
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.22s ease,
    border-color 0.12s, color 0.12s;
}

/* Pinned: hide home + rotate, center the pin. Buttons collapse on both
   axes so the pin centers cleanly in either footer orientation. */
.tool-bar.toolbar-locked:not([class*="toolbar-docked"]) .toolbar-home-btn,
.tool-bar.toolbar-locked:not([class*="toolbar-docked"]) .toolbar-rotate-btn {
  width: 0; min-width: 0;
  height: 0; min-height: 0;
  margin-left: 0; margin-top: 0;
  border-width: 0;
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}
.toolbar-pin-btn svg,
.toolbar-home-btn svg,
.toolbar-rotate-btn svg,
.toolbar-popout-btn svg { width: 8px; height: 8px; }
.toolbar-pin-btn:hover,
.toolbar-home-btn:hover,
.toolbar-rotate-btn:hover,
.toolbar-popout-btn:hover { border-color: var(--ui-text); color: var(--ui-text); }
.toolbar-pin-btn.active,
.toolbar-rotate-btn.active { border-color: var(--ui-accent); color: var(--ui-accent); }

/* Visibility: pin/home/rotate show when floating; pop-out shows when docked */
.toolbar-footer .toolbar-popout-btn { display: none; }
[class*="toolbar-docked"] .toolbar-footer .toolbar-pin-btn,
[class*="toolbar-docked"] .toolbar-footer .toolbar-home-btn,
[class*="toolbar-docked"] .toolbar-footer .toolbar-rotate-btn { display: none; }
[class*="toolbar-docked"] .toolbar-footer .toolbar-popout-btn { display: flex; }

/* Docked footer: drop decorative treatment, center the button */
[class*="toolbar-docked"] .toolbar-footer {
  margin: 4px 0 0;
  padding: 5px 0;
  border-radius: 0;
  background: transparent;
  justify-content: center;
}

/* Footer flows inline at end of horizontal docked bars */
.toolbar-docked-top .toolbar-footer,
.toolbar-docked-bottom .toolbar-footer {
  flex-direction: row; align-self: stretch; align-items: center;
  margin: 0 calc(-1 * var(--spacing-sm)) 0 4px;
  padding: 0 var(--spacing-sm) 0 8px;
  border-top: none; border-left: 1px solid var(--ui-border);
  border-radius: 0; background: transparent;
}

/* Docked vertical (left / right) */
[data-ui-skin] .toolbar-docked-left,
[data-ui-skin] .toolbar-docked-right {
  position: absolute !important;
  top: 0 !important; transform: none !important;
  height: 100% !important; max-height: 100%;
  flex-direction: column; align-items: center; justify-content: center;
  border-radius: 0; padding: var(--spacing-sm);
  overflow-y: auto; overflow-x: hidden;
}
[data-ui-skin] .toolbar-docked-left  { left: 0 !important; right: unset !important; border-right: 1px solid var(--ui-border); }
[data-ui-skin] .toolbar-docked-right { right: 0 !important; left: unset !important; border-left: 1px solid var(--ui-border); }

/* Docked horizontal (top / bottom) */
[data-ui-skin] .toolbar-docked-top,
[data-ui-skin] .toolbar-docked-bottom {
  position: absolute !important;
  left: 0 !important; transform: none !important;
  width: 100% !important; max-height: none !important;
  min-height: calc(var(--row-height) + var(--spacing-sm) * 2);
  flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center;
  border-radius: 0; padding: 4px var(--spacing-sm);
  overflow-x: auto; overflow-y: hidden;
}
[data-ui-skin] .toolbar-docked-top    { top: 0 !important; bottom: unset !important; border-bottom: 1px solid var(--ui-border); }
[data-ui-skin] .toolbar-docked-bottom { bottom: 0 !important; top: unset !important; border-top: 1px solid var(--ui-border); }

/* Dividers flip to vertical in horizontal bars */
[data-ui-skin] .toolbar-docked-top .tool-divider,
[data-ui-skin] .toolbar-docked-bottom .tool-divider {
  width: 1px; height: 22px;
  border: none; background: var(--ui-border);
  margin: 0 2px; align-self: center; flex-shrink: 0;
}

/* Horizontal dock: handle becomes a compact left-edge grip; swap to 2-col × 3-row portrait dots */
[data-ui-skin] .toolbar-docked-top .toolbar-drag-handle,
[data-ui-skin] .toolbar-docked-bottom .toolbar-drag-handle {
  width: 14px; height: auto;
  margin: 0 4px 0 0;
  align-self: stretch;
  flex-shrink: 0;
}
[data-ui-skin] .toolbar-docked-top .toolbar-drag-handle .handle-horiz,
[data-ui-skin] .toolbar-docked-bottom .toolbar-drag-handle .handle-horiz { display: none; }
[data-ui-skin] .toolbar-docked-top .toolbar-drag-handle .handle-vert,
[data-ui-skin] .toolbar-docked-bottom .toolbar-drag-handle .handle-vert { display: block; }

/* ── Floating horizontal: rotate the floating toolbar to a horizontal bar ── */
[data-ui-skin] .tool-bar.toolbar-floating-horizontal:not([class*="toolbar-docked"]) {
  flex-direction: row; align-items: center;
  max-height: none; max-width: calc(100% - 20px);
  overflow-x: auto; overflow-y: hidden;
}
[data-ui-skin] .tool-bar.toolbar-floating-horizontal:not([class*="toolbar-docked"]) .tool-divider {
  width: 1px; height: 22px;
  margin: 0 2px; align-self: center; flex-shrink: 0;
}
[data-ui-skin] .tool-bar.toolbar-floating-horizontal:not([class*="toolbar-docked"]) .toolbar-drag-handle {
  width: 14px; height: auto;
  margin: 0 4px 0 0;
  align-self: stretch; flex-shrink: 0;
}
[data-ui-skin] .tool-bar.toolbar-floating-horizontal:not([class*="toolbar-docked"]) .toolbar-drag-handle .handle-horiz { display: none; }
[data-ui-skin] .tool-bar.toolbar-floating-horizontal:not([class*="toolbar-docked"]) .toolbar-drag-handle .handle-vert  { display: block; }
[data-ui-skin] .tool-bar.toolbar-floating-horizontal:not([class*="toolbar-docked"]) .toolbar-footer {
  flex-direction: column; align-self: stretch;
  align-items: center; justify-content: center;
  margin: calc(-1 * var(--spacing-sm)) calc(-1 * var(--spacing-sm)) calc(-1 * var(--spacing-sm)) 4px;
  padding: 2px 4px;
  border-top: none; border-left: 1px solid var(--ui-border);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
/* Vertical-stacked footer: spacing rotates from horizontal to vertical so the
   pin centers cleanly when home/rotate collapse out in the locked state. */
[data-ui-skin] .tool-bar.toolbar-floating-horizontal:not([class*="toolbar-docked"]) .toolbar-footer > button + button {
  margin-left: 0; margin-top: 2px;
}

/* Snap zone overlays — injected by JS into #viewport-container */
.toolbar-snap-zone {
  position: absolute; pointer-events: none; z-index: 4;
  background: var(--ui-accent); opacity: 0;
  transition: opacity 0.15s;
}
.toolbar-snap-zone.snap-active { opacity: 0.12; }
.toolbar-snap-zone-left   { left: 0;    top: 0;   width: 48px; height: 100%; }
.toolbar-snap-zone-right  { right: 0;   top: 0;   width: 48px; height: 100%; }
.toolbar-snap-zone-top    { top: 0;     left: 0;  width: 100%; height: 48px; }
.toolbar-snap-zone-bottom { bottom: 0;  left: 0;  width: 100%; height: 48px; }

#viewport-container { transition: padding 0.15s; }

.tool-btn {
  width: var(--row-height); height: var(--row-height);
  min-width: 30px; min-height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer; color: var(--ui-muted); transition: all 0.12s;
}
.tool-btn:hover { background: var(--ui-ctrl-hov); color: var(--ui-text); }
.tool-btn.active {
  background: var(--ui-accent-2); border-color: var(--ui-accent);
  color: var(--ui-accent);
  box-shadow: 0 0 0 1px var(--ui-accent-2);
}
.tool-divider { height: 1px; background: var(--ui-border); margin: 1px 0; }

/* ── PAPER ───────────────────────────────────────────────────── */
.paper-doc {
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.14);
  width: 300px; height: 420px;
  display: flex; align-items: center; justify-content: center;
  color: #1a1a1a; position: relative; z-index: 2; border-radius: 2px;
}
.paper-doc svg { width: 88%; height: 88%; }

/* ── BOTTOM PANE ─────────────────────────────────────────────── */
.bottom-pane {
  height: var(--bottom-pane-height); border-top: 1px solid var(--ui-border);
  background: var(--ui-panel); display: flex; flex-direction: column; flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.bottom-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--spacing-md);
  height: 30px;
  border-bottom: 1px solid var(--ui-border); background: var(--ui-panel-alt); flex-shrink: 0;
}
.bottom-body {
  flex: 1; padding: var(--spacing-sm) var(--spacing-md);
  display: flex; gap: var(--spacing-sm); overflow: hidden;
}
.formula-block { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-xs); }
.formula-eq {
  background: var(--ui-panel-alt); border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  padding: 6px var(--spacing-sm);
  font-family: var(--font-mono); font-size: 11px; color: var(--ui-formula);
  display: flex; flex-direction: column; gap: 2px;
}
.formula-accent { color: var(--ui-accent); font-weight: 500; }
.formula-params { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--spacing-xs); }
.formula-param {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ui-panel-alt); border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  padding: 3px var(--spacing-sm);
  font-family: var(--font-mono); font-size: 10px;
}
.f-key { color: var(--ui-muted); }
.f-val { color: var(--ui-accent); font-variant-numeric: tabular-nums; }

/* ── RIGHT PANE ──────────────────────────────────────────────── */
.pane-right {
  width: var(--pane-right-width); flex-shrink: 0;
  background: var(--ui-panel); border-left: 1px solid var(--ui-border);
  display: flex; flex-direction: column; overflow: hidden;
  transition: background 0.2s, border-color 0.2s;
}
.right-sect-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--spacing-md);
  min-height: var(--row-height);
  background: var(--ui-panel-alt); border: none; width: 100%; cursor: pointer;
  color: var(--ui-text-2); font-family: var(--font-ui);
  font-size: var(--font-size-sm); font-weight: 600; letter-spacing: 0;
  text-transform: none; text-align: left;
  border-bottom: 1px solid var(--ui-border);
  transition: background 0.1s;
}
.right-sect-hdr:hover { background: var(--ui-ctrl-hov); }

/* ── TABS ────────────────────────────────────────────────────── */
.tab-bar {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-panel-alt); flex-shrink: 0;
}
.tab-btn {
  flex: 1; height: 34px; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--ui-text-2); font-family: var(--font-ui);
  font-size: var(--font-size-sm); font-weight: 600;
  cursor: pointer; position: relative; margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s, background 0.1s;
}
.tab-btn:hover { color: var(--ui-text); background: var(--ui-ctrl-hov); }
.tab-btn.active { color: var(--ui-accent); border-bottom-color: var(--ui-accent); }
.tab-panel { display: none; flex: 1; flex-direction: column; overflow: hidden; min-height: 0; }
.tab-panel.active { display: flex; }
.tab-panel-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--spacing-sm) 0 var(--spacing-md);
  height: 30px; flex-shrink: 0;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-panel);
}
.tab-panel-meta { font-size: var(--font-size-xs); color: var(--ui-muted); font-family: var(--font-mono); }

/* Layers */
.layer-list {
  display: flex; flex-direction: column; gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
}
.layer-item {
  display: flex; align-items: center; gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  min-height: var(--row-height);
  border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; transition: background 0.1s;
}
.layer-item:hover { background: var(--ui-ctrl-hov); }
.layer-item.active { background: var(--ui-ctrl); border-color: var(--ui-border); }
.layer-item.dim { opacity: 0.4; }
.layer-bar { width: 3px; height: 22px; border-radius: 2px; flex-shrink: 0; }
.layer-name {
  flex: 1; font-size: var(--font-size-sm);
  color: var(--ui-text); font-family: var(--font-ui); font-weight: 500;
}
.layer-tag {
  font-size: 9px; letter-spacing: 0.06em;
  color: var(--ui-accent); text-transform: uppercase;
  background: var(--ui-accent-2);
  border-radius: 9999px; padding: 2px 8px; font-family: var(--font-mono);
}
.layer-acts { display: flex; gap: 2px; }
.layer-act {
  background: none; border: none; color: var(--ui-muted); cursor: pointer;
  font-size: 11px; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); transition: color 0.1s, background 0.1s;
}
.layer-act:hover { color: var(--ui-accent); background: var(--ui-accent-2); }

/* Pens */
.pens-bar {
  display: flex; align-items: center; gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--ui-border);
}
.palette-btn {
  flex: 1; background: var(--ui-ctrl); border: 1px solid var(--ui-border);
  color: var(--ui-text-2); font-family: var(--font-ui); font-weight: 500;
  font-size: var(--font-size-xs);
  padding: 0 var(--spacing-sm); height: var(--row-height);
  border-radius: var(--radius-sm); cursor: pointer; text-align: left;
  transition: border-color 0.1s;
}
.palette-btn:hover { border-color: var(--ui-border-hi); }
.add-btn {
  background: var(--ui-accent); color: #fff; border: none;
  font-family: var(--font-ui); font-weight: 600;
  font-size: var(--font-size-xs);
  padding: 0 var(--spacing-sm); height: 24px;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: opacity 0.1s; white-space: nowrap;
}
.add-btn:hover { opacity: 0.88; }

.pen-list {
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--spacing-xs) var(--spacing-md);
}
.pen-item {
  display: flex; align-items: center; gap: var(--spacing-sm);
  padding: 2px 0; min-height: var(--row-height);
}
.pen-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.2); flex-shrink: 0; }
.pen-nm {
  font-size: var(--font-size-xs); color: var(--ui-text-2);
  width: 32px; flex-shrink: 0; font-family: var(--font-mono);
}

[data-ui-skin] .pen-sld {
  flex: 1;
  -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 2px; cursor: pointer; outline: none;
  background: linear-gradient(to right,
    var(--slider-start) 0%,
    var(--ui-accent) var(--fill, 0%),
    var(--ui-border) var(--fill, 0%) 100%
  );
}
[data-ui-skin] .pen-sld::-webkit-slider-runnable-track { background: transparent; height: 0; }
[data-ui-skin] .pen-sld::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ui-accent); border: 2px solid var(--ui-panel);
  box-shadow: 0 0 0 1px var(--ui-accent);
  cursor: pointer; transition: transform 0.1s;
}
[data-ui-skin] .pen-sld:hover::-webkit-slider-thumb { transform: scale(1.18); }
[data-ui-skin] .pen-sld::-moz-range-thumb {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ui-accent); border: 2px solid var(--ui-panel);
}
[data-ui-skin] .pen-sld::-moz-range-track { height: 3px; background: var(--ui-border); border-radius: 2px; }
[data-ui-skin] .pen-sld::-moz-range-progress {
  height: 3px; border-radius: 2px 0 0 2px;
  background: linear-gradient(to right, var(--slider-start), var(--ui-accent));
}
.pen-w {
  font-size: var(--font-size-xs); color: var(--ui-muted);
  width: 26px; text-align: right; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Stats */
.stats-box { padding: var(--spacing-sm) var(--spacing-md); }
.stats-ttl {
  font-size: var(--font-size-xs); letter-spacing: 0;
  text-transform: none; color: var(--ui-muted);
  margin-bottom: var(--spacing-sm); font-family: var(--font-ui); font-weight: 600;
}
.stats-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px var(--spacing-sm); align-items: center; }
.s-key { font-size: var(--font-size-xs); color: var(--ui-muted); }
.s-val {
  font-size: var(--font-size-xs); color: var(--ui-accent);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.bg-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--ui-border); min-height: var(--row-height);
}
.bg-lbl {
  font-size: var(--font-size-xs); color: var(--ui-muted);
  letter-spacing: 0; text-transform: none; font-weight: 500;
}
.bg-sw {
  width: 16px; height: 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--ui-border); background: #fff;
}

/* ─── Phase 4: Petal Designer chrome re-skin ───────────────────────────────
 * Scoped to [data-ui-skin] so classic skins keep today's styles.
 * Pure additive — no JS changes; the petal-designer chrome class names
 * (.petal-designer-header, .petal-designer-title, .petal-tool-btn, etc.)
 * are unchanged in src/ui/ui-petal-designer.js.
 */
[data-ui-skin] .petal-designer-window {
  background: var(--ui-panel);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
  font-family: var(--font-ui);
}
[data-ui-skin] .petal-designer-inline {
  background: var(--ui-panel);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
}
[data-ui-skin] .petal-designer-header {
  background: var(--ui-panel-alt);
  border-bottom: 1px solid var(--ui-border);
  padding: 8px 12px;
  font-family: var(--font-ui);
}
[data-ui-skin] .petal-designer-title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ui-accent);
  font-weight: 600;
}
[data-ui-skin] .petal-tool-btn,
[data-ui-skin] .petal-close,
[data-ui-skin] .petal-popout,
[data-ui-skin] .petal-popin,
[data-ui-skin] .petal-copy-btn {
  border: 1px solid var(--ui-border);
  background: var(--ui-ctrl);
  color: var(--ui-text);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  height: 26px;
  min-width: 26px;
  padding: 0 8px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
[data-ui-skin] .petal-tool-btn:hover,
[data-ui-skin] .petal-close:hover,
[data-ui-skin] .petal-popout:hover,
[data-ui-skin] .petal-popin:hover,
[data-ui-skin] .petal-copy-btn:hover {
  background: var(--ui-ctrl-hov);
  border-color: var(--ui-border-hi);
  color: var(--ui-accent);
}
[data-ui-skin] .petal-tool-btn.active {
  background: var(--ui-accent-2);
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}
[data-ui-skin] .petal-designer-controls,
[data-ui-skin] .petal-designer-structure,
[data-ui-skin] .petal-designer-transition {
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-border);
}
[data-ui-skin] .petal-designer-controls label,
[data-ui-skin] .petal-designer-structure label,
[data-ui-skin] .petal-slider-label > span:first-child {
  color: var(--ui-muted);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 500;
}
[data-ui-skin] .petal-slider-value {
  color: var(--ui-accent);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
[data-ui-skin] .petal-designer-controls select,
[data-ui-skin] .petal-designer-structure select,
[data-ui-skin] .petal-slider-label > select {
  background: var(--ui-ctrl);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  border-radius: var(--radius-sm);
}
[data-ui-skin] .petal-designer-shading-title {
  color: var(--ui-text);
  font-family: var(--font-ui);
  letter-spacing: 0.16em;
  font-weight: 600;
}
[data-ui-skin] .petal-profile-editor-card {
  background: var(--ui-panel-alt);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
}
[data-ui-skin] .petal-profile-editor-card.is-active {
  border-color: var(--ui-accent);
}
[data-ui-skin] .petal-profile-editor-card-title {
  color: var(--ui-accent);
  font-family: var(--font-ui);
  font-weight: 600;
}
[data-ui-skin] .petal-shade-toggle input {
  accent-color: var(--ui-accent);
}

/* ─── Phase 4: Pattern Designer chrome re-skin ─────────────────────────── */
[data-ui-skin] .pattern-designer-modal,
[data-ui-skin] .pattern-designer-inline {
  background: var(--ui-panel);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
}
[data-ui-skin] .pattern-designer-header,
[data-ui-skin] .pd-header {
  background: var(--ui-panel-alt);
  border-bottom: 1px solid var(--ui-border);
  padding: 8px 12px;
}
[data-ui-skin] .pattern-designer-title,
[data-ui-skin] .pd-title {
  color: var(--ui-accent);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
[data-ui-skin] .pd-tool-btn,
[data-ui-skin] .pd-action-btn,
[data-ui-skin] .pd-fill-btn {
  border: 1px solid var(--ui-border);
  background: var(--ui-ctrl);
  color: var(--ui-text);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  height: 26px;
  min-width: 26px;
  padding: 0 8px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
[data-ui-skin] .pd-tool-btn:hover,
[data-ui-skin] .pd-action-btn:hover,
[data-ui-skin] .pd-fill-btn:hover {
  background: var(--ui-ctrl-hov);
  border-color: var(--ui-border-hi);
  color: var(--ui-accent);
}
[data-ui-skin] .pd-tool-btn.active,
[data-ui-skin] .pd-fill-btn.active {
  background: var(--ui-accent-2);
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}
[data-ui-skin] .pd-status,
[data-ui-skin] .pattern-designer-status {
  background: var(--ui-panel-alt);
  color: var(--ui-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  border-top: 1px solid var(--ui-border);
}
[data-ui-skin] .pd-validation-header,
[data-ui-skin] .pattern-designer-validation-header {
  color: var(--ui-text);
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* ─── Phase 4: Touch modifier bar chrome re-skin ──────────────────────── */
[data-ui-skin] #touch-modifier-bar,
[data-ui-skin] .touch-modifier-bar {
  background: var(--ui-panel-alt);
  border-top: 1px solid var(--ui-border);
  font-family: var(--font-ui);
}
[data-ui-skin] .touch-modifier-bar button,
[data-ui-skin] #touch-modifier-bar button {
  border: 1px solid var(--ui-border);
  background: var(--ui-ctrl);
  color: var(--ui-text);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
[data-ui-skin] .touch-modifier-bar button:hover,
[data-ui-skin] #touch-modifier-bar button:hover {
  background: var(--ui-ctrl-hov);
  border-color: var(--ui-border-hi);
  color: var(--ui-accent);
}
[data-ui-skin] .touch-modifier-bar button.active,
[data-ui-skin] #touch-modifier-bar button.active {
  background: var(--ui-accent-2);
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}

/* ──────────────────────────────────────────────────────────────────────
 * UNIVERSAL SHELL RE-SKIN — applies to every active skin via [data-ui-skin]
 *
 * The mockup at docs/design/themes-mockup.html defines the canonical chrome
 * for Vectura Studio: section headers with a left accent bar, Space Grotesk
 * UI / JetBrains Mono numerics, sentence-case section titles, 30px row
 * height, 4/8/12 radius scale, slim panel shadows. This block maps that
 * styling onto the live DOM classes (top-menu-*, pane-*,
 * left-panel-section-*, lvl-*, pen-*, bottom-pane-*, etc.) and applies it
 * to ALL skins so classic-dark, classic-light, lark, and the meridian-*
 * variants share one chrome vocabulary — only the palette tokens differ.
 *
 * Specificity note: the [data-ui-skin] attribute selector beats the bare
 * class selectors in styles.css that come later in load order, so these
 * rules win without !important.
 * ────────────────────────────────────────────────────────────────────── */

/* ─── Typography: Space Grotesk for UI, JetBrains Mono for numerics ──── */
[data-ui-skin] body,
[data-ui-skin] button,
[data-ui-skin] input,
[data-ui-skin] select,
[data-ui-skin] textarea {
  font-family: var(--font-ui);
}
/* Surfaces that must stay mono per the mockup. */
[data-ui-skin] .top-menu-shortcut,
[data-ui-skin] .pane-meta,
[data-ui-skin] #status-bar,
[data-ui-skin] #formula-display,
[data-ui-skin] .formula-text,
[data-ui-skin] #formula-seed-display,
[data-ui-skin] #stat-dist,
[data-ui-skin] #stat-lines,
[data-ui-skin] #stat-time,
[data-ui-skin] .palette-toggle,
[data-ui-skin] .pen-nm,
[data-ui-skin] .pen-w,
[data-ui-skin] .lvl-status-bar {
  font-family: var(--font-mono);
}

/* ─── Header & brand ─────────────────────────────────────────────────── */
[data-ui-skin] #app-header {
  height: 38px;
  padding: 0 14px;
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-border);
}
[data-ui-skin] #app-header .header-main {
  height: 38px;
  min-height: 38px;
  gap: 10px;
}
[data-ui-skin] #app-header .header-brand-menu > div:first-child {
  /* Brand square */
  width: 11px;
  height: 11px;
  background: var(--ui-accent);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 8px var(--ui-accent-2);
}
[data-ui-skin] #app-header h1 {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: var(--ui-accent);
}
[data-ui-skin] #app-header h1 span {
  font-weight: 300;
  color: var(--ui-muted);
  letter-spacing: 0;
}
[data-ui-skin] .header-menu-divider {
  width: 1px;
  height: 16px;
  background: var(--ui-border);
  margin: 0 4px;
}
[data-ui-skin] #status-bar {
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  color: var(--ui-muted);
  text-transform: uppercase;
}

/* ─── Top menubar — flat triggers, accent-topped panels ──────────────── */
[data-ui-skin] .top-menubar {
  gap: 1px;
  margin-left: 0;
}
[data-ui-skin] .top-menu-trigger {
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--ui-text-2);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0;
  padding: 4px 10px;
  height: 26px;
  transition: background 0.1s, color 0.1s;
}
[data-ui-skin] .top-menu-trigger:hover {
  background: var(--ui-ctrl-hov);
  border-color: transparent;
  color: var(--ui-text);
}
[data-ui-skin] .top-menu-trigger[aria-expanded="true"],
[data-ui-skin] .top-menu-trigger.open {
  background: var(--ui-ctrl-hov);
  border-color: transparent;
  color: var(--ui-accent);
}
[data-ui-skin] .top-menu-panel {
  top: calc(100% + 5px);
  min-width: 244px;
  padding: 0;
  background: var(--ui-panel);
  border: 1px solid var(--ui-border-hi);
  border-top: 3px solid var(--ui-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
}
[data-ui-skin] .top-menu-item {
  border: none;
  padding: 0 14px;
  min-height: var(--row-height);
  font-size: var(--font-size-sm);
  font-weight: 500;
  font-family: var(--font-ui);
  color: var(--ui-text);
  gap: 20px;
  transition: background 0.07s, color 0.07s;
}
[data-ui-skin] .top-menu-item:hover:not(:disabled) {
  background: var(--ui-accent-2);
  border-color: transparent;
  color: var(--ui-accent);
}
[data-ui-skin] .top-menu-shortcut {
  font-size: var(--font-size-xs);
  color: var(--ui-muted);
  letter-spacing: 0.04em;
}
[data-ui-skin] .top-menu-sep {
  border-top: 1px solid var(--ui-border);
  margin: 3px 0;
}

/* ─── Pane chrome ────────────────────────────────────────────────────── */
[data-ui-skin] .pane-left,
[data-ui-skin] .pane-right {
  background: var(--ui-panel);
  box-shadow: var(--shadow-pane);
}
[data-ui-skin] .pane-right {
  border-left: 1px solid var(--ui-border);
  box-shadow: none;
}
[data-ui-skin] .pane-left {
  border-right: none;
}
[data-ui-skin] .pane-header {
  height: 36px;
  padding: 0 var(--spacing-md);
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-panel);
}
[data-ui-skin] #right-pane .pane-header {
  background: var(--ui-panel);
  padding-left: 44px;
}
[data-ui-skin] .pane-title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ui-accent);
}
[data-ui-skin] .pane-meta {
  font-size: var(--font-size-xs);
  color: var(--ui-muted);
  letter-spacing: 0.04em;
}
[data-ui-skin] .pane-toggle {
  width: 28px;
  height: 28px;
  padding: 5px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--ui-muted);
  font-size: 10px;
}
[data-ui-skin] .pane-toggle:hover {
  border: none;
  color: var(--ui-text);
  background: transparent;
}

/* ─── Left panel collapsible sections ────────────────────────────────── */
[data-ui-skin] .left-panel-sections {
  gap: 0;
  padding: 0;
}
[data-ui-skin] #left-panel-content > .left-panel-sections,
[data-ui-skin] .pane-body > .left-panel-sections,
[data-ui-skin] .pane-body .p-4.left-panel-sections {
  padding: 0;
}
[data-ui-skin] .left-panel-section {
  border: none;
  border-bottom: 1px solid var(--ui-border);
  background: transparent;
}
[data-ui-skin] .left-panel-section-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ui-panel-alt);
  border: none;
  padding: 0 var(--spacing-md);
  min-height: var(--row-height);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ui-text-2);
  transition: background 0.1s, color 0.1s;
}
[data-ui-skin] .left-panel-section-header:hover {
  background: var(--ui-ctrl-hov);
  color: var(--ui-text);
}
[data-ui-skin] .left-panel-section-header::before {
  content: '';
  display: block;
  width: 3px;
  height: 14px;
  background: var(--ui-accent);
  border-radius: 2px;
  flex-shrink: 0;
  margin-right: var(--spacing-sm);
  opacity: 0.45;
  transition: opacity 0.15s;
}
[data-ui-skin] .left-panel-section-header:hover::before {
  opacity: 1;
}
[data-ui-skin] .left-panel-section-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}
[data-ui-skin] .left-panel-section-toggle {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none;
  flex-shrink: 0;
}
[data-ui-skin] .left-panel-section-toggle::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  background-color: var(--ui-muted);
  -webkit-mask: var(--chevron-svg) center / contain no-repeat;
  mask: var(--chevron-svg) center / contain no-repeat;
  transform: rotate(0deg);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.12s;
}
[data-ui-skin] .left-panel-section[aria-expanded="true"] .left-panel-section-toggle::before,
[data-ui-skin] .left-panel-section:not(.collapsed) .left-panel-section-toggle::before {
  transform: rotate(180deg);
}
[data-ui-skin] .left-panel-section-header:hover .left-panel-section-toggle::before {
  background-color: var(--ui-text-2);
}
[data-ui-skin] .left-panel-section-body {
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Nested global-section headers (inside sections) — same accent-bar style */
[data-ui-skin] .global-section {
  margin: 0;
  padding-top: 0;
  border-top: none;
}
[data-ui-skin] .global-section-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ui-panel-alt);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0 var(--spacing-sm);
  min-height: var(--row-height);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ui-text-2);
}
[data-ui-skin] .global-section-header:hover {
  background: var(--ui-ctrl-hov);
  color: var(--ui-text);
}
[data-ui-skin] .global-section-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}
[data-ui-skin] .global-section-toggle {
  width: 20px;
  height: 20px;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-ui-skin] .global-section-toggle::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  background-color: var(--ui-muted);
  -webkit-mask: var(--chevron-svg) center / contain no-repeat;
  mask: var(--chevron-svg) center / contain no-repeat;
  transform: rotate(0deg);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.12s;
}
[data-ui-skin] .global-section:not(.collapsed) .global-section-toggle::before {
  transform: rotate(180deg);
}
[data-ui-skin] .global-section-body {
  padding: var(--spacing-sm) 0 0;
}

/* ─── Form controls (inputs, selects, labels) ────────────────────────── */
[data-ui-skin] .control-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ui-text-2);
  margin-bottom: var(--spacing-xs);
}
[data-ui-skin] .control-group {
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--ui-border);
}
[data-ui-skin] .control-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

[data-ui-skin] .theme-family-toggle {
  border-radius: var(--radius-sm);
  overflow: hidden;
}
[data-ui-skin] .theme-family-option {
  background: transparent;
  cursor: pointer;
  font-family: var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.12s, color 0.12s;
}
[data-ui-skin] .theme-family-option:hover {
  background: var(--ui-ctrl-hov);
}
[data-ui-skin] .theme-family-option.is-active {
  background: var(--ui-accent);
  color: var(--ui-bg);
}
[data-ui-skin] .theme-family-option.is-active:hover {
  background: var(--ui-accent);
}

/* Tailwind-styled inputs in left panel: bg-vectura-bg + border-vectura-border + p-1/p-2 + text-xs */
[data-ui-skin] .pane-left input[type="text"],
[data-ui-skin] .pane-left input[type="number"],
[data-ui-skin] .pane-left input[type="email"],
[data-ui-skin] .pane-left select,
[data-ui-skin] #left-panel-content input[type="text"],
[data-ui-skin] #left-panel-content input[type="number"],
[data-ui-skin] #left-panel-content select,
[data-ui-skin] #left-panel-content textarea {
  background: var(--ui-ctrl);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 400;
  padding: 0 var(--spacing-sm);
  height: var(--row-height);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
[data-ui-skin] .pane-left input[type="text"]:hover,
[data-ui-skin] .pane-left input[type="number"]:hover,
[data-ui-skin] .pane-left select:hover,
[data-ui-skin] #left-panel-content input[type="text"]:hover,
[data-ui-skin] #left-panel-content input[type="number"]:hover,
[data-ui-skin] #left-panel-content select:hover {
  border-color: var(--ui-border-hi);
}
[data-ui-skin] .pane-left input[type="text"]:focus,
[data-ui-skin] .pane-left input[type="number"]:focus,
[data-ui-skin] .pane-left select:focus,
[data-ui-skin] #left-panel-content input[type="text"]:focus,
[data-ui-skin] #left-panel-content input[type="number"]:focus,
[data-ui-skin] #left-panel-content select:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-2);
}

/* Numeric inputs: tabular-nums + mono in mockup */
[data-ui-skin] .pane-left input[type="number"],
[data-ui-skin] #left-panel-content input[type="number"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Algorithm trigger button — round, ctrl bg, accent on hover */
[data-ui-skin] .gm-trigger {
  background: var(--ui-ctrl);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  height: var(--row-height);
  padding: 0 var(--spacing-sm);
  color: var(--ui-text);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  transition: border-color 0.12s, background 0.12s;
}
[data-ui-skin] .gm-trigger:hover:not(.disabled) {
  border-color: var(--ui-border-hi);
  background: var(--ui-ctrl-hov);
}
[data-ui-skin] #algo-about {
  background: var(--ui-panel-alt);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
}

/* Info badge (i circle) */
[data-ui-skin] .info-btn {
  width: 14px;
  height: 14px;
  font-size: 9px;
  border: 1px solid var(--ui-border);
  border-radius: 50%;
  background: transparent;
  color: var(--ui-muted);
  font-family: var(--font-mono);
  padding: 0;
  margin-left: 6px;
  line-height: 1;
}
[data-ui-skin] .left-panel-section-header:hover .info-btn,
[data-ui-skin] .global-section-header:hover .info-btn {
  color: var(--ui-accent);
  border-color: var(--ui-accent);
}

/* ─── Right pane tabs ────────────────────────────────────────────────── */
[data-ui-skin] .right-pane-tabs {
  background: transparent;
  border-bottom: 1px solid var(--ui-border);
}
[data-ui-skin] .right-pane-tab {
  height: 34px;
  background: var(--ui-panel-alt);
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ui-text-2);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s, background 0.1s;
}
[data-ui-skin] .right-pane-tab:hover {
  color: var(--ui-text);
  background: var(--ui-ctrl-hov);
}
[data-ui-skin] .right-pane-tab.active {
  color: var(--ui-accent);
  border-bottom-color: var(--ui-accent);
  background: var(--ui-panel);
}

/* ─── Layer search bar & add button ─────────────────────────────────── */
[data-ui-skin] .lvl-search-bar {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-border);
  gap: var(--spacing-sm);
}
[data-ui-skin] .lvl-search-wrap {
  background: var(--ui-ctrl);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--spacing-sm);
  height: var(--row-height);
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s;
}
[data-ui-skin] .lvl-search-wrap:focus-within {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-2);
}
[data-ui-skin] .lvl-search-bar .lvl-search-input {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  color: var(--ui-text);
  background: var(--ui-ctrl);
  min-width: 0;
  width: 0;
}
[data-ui-skin] .lvl-search-bar .lvl-search-input::placeholder {
  color: var(--ui-muted);
}
[data-ui-skin] .lvl-filter-btn {
  background: var(--ui-ctrl);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  color: var(--ui-muted);
  height: var(--row-height);
  padding: 0 var(--spacing-sm);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: border-color 0.12s, color 0.12s;
}
[data-ui-skin] .lvl-filter-btn:hover {
  border-color: var(--ui-border-hi);
  color: var(--ui-accent);
}
[data-ui-skin] .lvl-add-btn {
  height: 24px;
  padding: 0 var(--spacing-sm);
  background: var(--ui-accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: 600;
  gap: 4px;
  transition: opacity 0.1s, filter 0.1s;
}
[data-ui-skin] .lvl-add-btn:hover {
  background: var(--ui-accent);
  border: none;
  color: #fff;
  filter: brightness(1.05);
  opacity: 0.92;
}
[data-ui-skin] .lvl-add-wrap {
  flex-shrink: 0;
  position: relative;
}
[data-ui-skin] .lvl-add-menu,
[data-ui-skin] .lvl-filter-menu,
[data-ui-skin] .lvl-algo-submenu,
[data-ui-skin] .algo-draw-picker,
[data-ui-skin] .gm-module-menu {
  background: var(--ui-panel);
  border: 1px solid var(--ui-border-hi);
  border-top: 3px solid var(--ui-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
}
[data-ui-skin] .lvl-add-item {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 500;
  padding: 0 14px;
  min-height: var(--row-height);
  color: var(--ui-text);
  display: flex;
  align-items: center;
  transition: background 0.07s, color 0.07s;
}
[data-ui-skin] .lvl-add-item:hover {
  background: var(--ui-accent-2);
  color: var(--ui-accent);
}
[data-ui-skin] .algo-pick-item,
[data-ui-skin] .lvl-algo-sub-item {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--ui-text);
}
[data-ui-skin] .algo-pick-item:hover,
[data-ui-skin] .lvl-algo-sub-item:hover {
  background: var(--ui-accent-2);
  color: var(--ui-accent);
  border-color: var(--ui-accent);
}
[data-ui-skin] .lvl-algo-sub-item.gm-item-active {
  background: var(--ui-accent-2);
  color: var(--ui-accent);
}
[data-ui-skin] .lvl-status-bar {
  font-size: var(--font-size-xs);
  color: var(--ui-muted);
  letter-spacing: 0.04em;
}

/* ─── Pens panel ─────────────────────────────────────────────────────── */
[data-ui-skin] .palette-toggle {
  background: var(--ui-ctrl);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  height: var(--row-height);
  padding: 0 var(--spacing-sm);
  color: var(--ui-text-2);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 0.1s;
}
[data-ui-skin] .palette-toggle:hover {
  border-color: var(--ui-border-hi);
}
[data-ui-skin] .palette-menu {
  background: var(--ui-panel);
  border: 1px solid var(--ui-border-hi);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  box-shadow: var(--shadow-lg);
}
[data-ui-skin] .palette-search {
  background: var(--ui-ctrl);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--spacing-sm);
  height: var(--row-height);
  color: var(--ui-text);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
}
[data-ui-skin] .palette-search:focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-accent-2);
  outline: none;
}
[data-ui-skin] #btn-add-pen {
  background: var(--ui-accent);
  border: none;
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--font-size-xs);
  padding: 0 var(--spacing-sm);
  height: 24px;
  border-radius: var(--radius-sm);
  letter-spacing: 0;
  text-transform: none;
  transition: opacity 0.1s;
}
[data-ui-skin] #btn-add-pen:hover {
  background: var(--ui-accent);
  color: #fff;
  opacity: 0.88;
}

/* ─── Bottom pane (formula display + stats) ──────────────────────────── */
[data-ui-skin] #bottom-pane,
[data-ui-skin] .bottom-pane {
  background: var(--ui-panel);
  border-top: 1px solid var(--ui-border);
}
[data-ui-skin] .bottom-pane-header {
  height: 30px;
  padding: 0 var(--spacing-md);
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-panel-alt);
  display: flex;
  align-items: center;
}
[data-ui-skin] .bottom-pane-header > span {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  color: var(--ui-muted);
}
[data-ui-skin] .bottom-pane-body {
  padding: var(--spacing-sm) var(--spacing-md);
}
[data-ui-skin] #formula-display,
[data-ui-skin] .formula-text {
  background: var(--ui-panel-alt);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  padding: 6px var(--spacing-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ui-formula);
}
[data-ui-skin] #formula-seed-display {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--ui-accent);
}
[data-ui-skin] #stat-dist,
[data-ui-skin] #stat-lines,
[data-ui-skin] #stat-time {
  color: var(--ui-accent);
  font-variant-numeric: tabular-nums;
}

/* ─── Theme toggle button — round, panel bg ──────────────────────────── */
[data-ui-skin] .theme-toggle {
  height: 26px;
  width: 26px;
  background: var(--ui-ctrl);
  border: 1px solid var(--ui-border);
  border-radius: 9999px;
  color: var(--ui-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
[data-ui-skin] .theme-toggle:hover {
  background: var(--ui-ctrl-hov);
  border-color: var(--ui-border-hi);
  color: var(--ui-accent);
}

/* ─── Noise Rack & Parameter Controls ────────────────────────────────────
 * Overrides legacy styles.css rules that use hard-coded colors (#ef4444 red,
 * --color-* variables) for noise cards, angle dials, and control rows.
 * All selectors are scoped to [data-ui-skin] for skin-only activation.
 * ────────────────────────────────────────────────────────────────────── */

/* ── Div-based angle dial (noise-rack-panel, algo-config-panel) ──────── */
/* Different from SVG angle-ctrl; uses .angle-control > .angle-dial > .angle-indicator */
[data-ui-skin] .angle-control {
  display: flex; align-items: center; gap: var(--spacing-sm);
}
[data-ui-skin] .angle-control .angle-dial {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--ui-border);
  background: var(--ui-ctrl);
  cursor: pointer; flex-shrink: 0;
  transition: border-color 0.12s;
}
[data-ui-skin] .angle-control .angle-dial:hover { border-color: var(--ui-border-hi); }
[data-ui-skin] .angle-control .angle-indicator {
  position: absolute; left: 50%; top: 50%;
  transform: rotate(var(--angle, 0deg));
  transform-origin: center center;
}
/* Needle — was hardcoded #ef4444 (red) in styles.css */
[data-ui-skin] .angle-control .angle-indicator::before {
  content: ''; position: absolute;
  width: 2px; height: 20px;
  background: var(--ui-accent);
  border-radius: 999px;
  transform: translate(-1px, -20px);
}
/* Handle dot — was hardcoded #ef4444 (red) in styles.css */
[data-ui-skin] .angle-control .angle-indicator::after {
  content: ''; position: absolute;
  width: 6px; height: 6px;
  background: var(--ui-accent);
  border-radius: 50%;
  transform: translate(-3px, -28px);
}

/* ── Noise list container & header ───────────────────────────────────── */
[data-ui-skin] .noise-list {
  display: flex; flex-direction: column; gap: var(--spacing-sm);
  border: none; border-radius: 0; padding: 0; background: none;
}
[data-ui-skin] .noise-list-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-sm); margin-bottom: var(--spacing-xs);
}
[data-ui-skin] .noise-list-header > span {
  font-size: var(--font-size-xs); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ui-muted);
  font-family: var(--font-mono); font-weight: 500;
}
[data-ui-skin] .noise-add {
  height: 26px; padding: 0 var(--spacing-sm);
  background: none; border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  color: var(--ui-accent); font-family: var(--font-ui);
  font-size: var(--font-size-xs); font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background 0.1s, border-color 0.1s;
}
[data-ui-skin] .noise-add:hover { background: var(--ui-ctrl); border-color: var(--ui-accent); }

/* ── Noise card ──────────────────────────────────────────────────────── */
[data-ui-skin] .noise-card {
  border: 1px solid var(--ui-border); border-radius: var(--radius-md);
  padding: var(--spacing-sm); background: var(--ui-ctrl);
  container-type: inline-size;
  container-name: noise-card;
}
[data-ui-skin] .noise-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-sm); margin-bottom: var(--spacing-sm);
}
[data-ui-skin] .noise-title {
  font-size: var(--font-size-xs); letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--ui-text-2);
  font-family: var(--font-mono); font-weight: 500;
}
[data-ui-skin] .noise-actions { display: flex; align-items: center; gap: var(--spacing-xs); }
[data-ui-skin] .noise-grip {
  display: grid; grid-template-columns: repeat(2, 4px);
  grid-template-rows: repeat(3, 4px); gap: 2px; padding: 2px;
  cursor: grab; flex-shrink: 0;
}
[data-ui-skin] .noise-grip .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ui-muted); }
[data-ui-skin] .noise-grip:active { cursor: grabbing; }
[data-ui-skin] .noise-card.dragging { opacity: 0.6; transform: translateY(-2px); }
[data-ui-skin] .noise-drop-indicator { height: 2px; border-radius: 999px; background: var(--ui-accent); margin: 4px 0; }
[data-ui-skin] .noise-disabled { opacity: 0.5; }

/* ── Noise toggle — pill switch (CSS-only, no JS needed) ─────────────── */
/* The noise-rack uses <label class="noise-toggle"><input type="checkbox">.
 * ::after = pill track, ::before = thumb. pointer-events:none on both so
 * clicks pass through to the label → checkbox, preserving native toggle. */
[data-ui-skin] .noise-toggle {
  position: relative; display: inline-flex;
  width: 30px; height: 16px; flex-shrink: 0; cursor: pointer;
  align-items: center; gap: 0;
}
[data-ui-skin] .noise-toggle input {
  opacity: 0; width: 0; height: 0; position: absolute;
  accent-color: initial; /* reset the legacy #ef4444 accent */
}
/* Track */
[data-ui-skin] .noise-toggle::after {
  content: ''; position: absolute; inset: 0;
  background: var(--ui-border); border-radius: 9999px;
  transition: background 0.15s; pointer-events: none;
}
[data-ui-skin] .noise-toggle:has(input:checked)::after { background: var(--ui-accent); }
/* Thumb */
[data-ui-skin] .noise-toggle::before {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none; z-index: 1;
}
[data-ui-skin] .noise-toggle:has(input:checked)::before { transform: translateX(14px); }

/* ── Opt-toggle — pill + label row ──────────────────────────────────── */
[data-ui-skin] .opt-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--ui-muted); cursor: pointer;
}

/* ── Noise delete button ─────────────────────────────────────────────── */
/* Legacy color: #ef4444 (red text). Override to muted with danger on hover. */
[data-ui-skin] .noise-delete {
  border: 1px solid var(--ui-border); border-radius: var(--radius-sm);
  padding: 1px 5px; font-size: 11px;
  color: var(--ui-muted); background: transparent; cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
[data-ui-skin] .noise-delete:hover { background: var(--ui-danger); color: #fff; border-color: var(--ui-danger); }

/* ── Noise reset / randomize buttons ─────────────────────────────────── */
[data-ui-skin] .noise-reset,
[data-ui-skin] .noise-rand {
  height: 22px; padding: 0 var(--spacing-sm);
  background: none; border: 1px solid var(--ui-border); border-radius: var(--radius-sm);
  color: var(--ui-muted); font-family: var(--font-ui);
  font-size: var(--font-size-xs); font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
[data-ui-skin] .noise-reset:hover:not(:disabled),
[data-ui-skin] .noise-rand:hover:not(:disabled) { background: var(--ui-ctrl); border-color: var(--ui-border-hi); color: var(--ui-text); }
[data-ui-skin] .noise-reset:disabled,
[data-ui-skin] .noise-rand:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Randomize Params magic button ───────────────────────────────────── */
[data-ui-skin] #btn-randomize-params {
  border-color: rgba(217, 70, 239, 1);
  color: #c4a8e0;
  background: transparent;
  position: relative;
  overflow: visible;
  transition: box-shadow 0.25s, color 0.25s, background 0.15s;
  box-shadow: none;
}
[data-ui-skin] #btn-randomize-params::before {
  content: '✦';
  margin-right: 5px;
  font-size: 10px;
  display: inline;
}
[data-ui-skin] #btn-randomize-params:hover {
  border-color: rgba(217, 70, 239, 1);
  animation: rand-glow-pulse 2s ease-in-out infinite;
  color: #d8b4fe;
  background: rgba(217, 70, 239, 0.05) !important;
}
[data-ui-skin] #btn-randomize-params:active { transform: scale(0.97); }
[data-ui-skin] #btn-randomize-params:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
  border-color: var(--ui-border);
  color: var(--ui-muted);
}

/* Spark overlay particles — fixed-position spans appended to <body> on click. */
.rand-spark-overlay {
  position: fixed;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--spark-color, rgba(217, 70, 239, 0.9));
  pointer-events: none;
  z-index: 9999;
  animation: rand-spark-fly 0.5s ease-out forwards;
}

/* ── Noise control rows (individual parameter rows inside a card) ─────── */
[data-ui-skin] .noise-control { display: flex; flex-direction: column; gap: var(--spacing-xs); }

/* Range inputs inside noise-control use class="w-full" (not ctrl-slider).
 * Apply full Meridian slider treatment via the type selector. */
[data-ui-skin] .noise-control input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px;
  cursor: pointer; outline: none;
  background: linear-gradient(to right,
    var(--slider-start) 0%,
    var(--ui-accent)    var(--fill, 0%),
    var(--ui-border)    var(--fill, 0%) 100%
  );
}
[data-ui-skin] .noise-control input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 4px; }
[data-ui-skin] .noise-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ui-accent); border: 2.5px solid var(--ui-panel);
  box-shadow: 0 0 0 1.5px var(--ui-accent); cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
[data-ui-skin] .noise-control input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.18); box-shadow: 0 0 0 4px var(--ui-accent-2);
}
[data-ui-skin] .noise-control input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.02); box-shadow: 0 0 0 2px var(--ui-accent-2);
}
[data-ui-skin] .noise-control input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ui-accent); border: 2.5px solid var(--ui-panel);
  box-shadow: 0 0 0 1.5px var(--ui-accent); cursor: pointer;
}
[data-ui-skin] .noise-control input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--ui-border); }
[data-ui-skin] .noise-control input[type="range"]::-moz-range-progress {
  height: 4px; border-radius: 2px 0 0 2px;
  background: linear-gradient(to right, var(--slider-start), var(--ui-accent));
}

/* Select inside noise-control — appearance reset + pseudo-element chevron.
 * :has(select) scopes the chevron only to controls that contain a select,
 * so angle-dial controls (no <select> inside) are not affected. */
[data-ui-skin] .noise-control select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 28px; }
[data-ui-skin] .noise-control:has(select) { position: relative; }
[data-ui-skin] .noise-control:has(select)::after {
  content: ''; position: absolute; right: 10px; bottom: 12px;
  width: 6px; height: 6px;
  border-right: 2px solid var(--ui-muted); border-bottom: 2px solid var(--ui-muted);
  border-radius: 1px; transform: rotate(45deg); pointer-events: none;
  transition: border-color 0.12s;
}
[data-ui-skin] .noise-control:has(select):hover::after { border-color: var(--ui-accent); }

/* ─── Welcome panel typography ───────────────────────────────────────── */
[data-ui-skin] #left-welcome-intro p,
[data-ui-skin] #left-welcome-intro li,
[data-ui-skin] #left-welcome-select p {
  font-family: var(--font-ui);
}
[data-ui-skin] #left-welcome-intro p:first-child {
  /* "Welcome" eyebrow — keep mono for the all-caps label */
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
}

/* ─── Welcome pane "Take the tour" CTA ───────────────────────────────── */
[data-ui-skin] .welcome-tour-cta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ui-border);
}

[data-ui-skin] .welcome-tour-btn-wrap {
  display: inline-block;
  background: linear-gradient(90deg, var(--ui-accent) 0%, #22d3ee 100%);
  border-radius: 999px;
  padding: 1px;
  cursor: pointer;
  transition: box-shadow 0.35s ease;
}

[data-ui-skin] .welcome-tour-btn-wrap:hover {
  box-shadow: 0 0 0 3px rgba(78, 158, 225, 0.16), 0 0 20px rgba(78, 158, 225, 0.32);
}

[data-ui-skin] .welcome-tour-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--ui-panel);
  border-radius: 999px;
  padding: 5px 15px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ui-text-2);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: background 0.38s ease, color 0.28s ease;
}

[data-ui-skin] .welcome-tour-btn-wrap:hover .welcome-tour-btn {
  background: transparent;
  color: #fff;
}

/* ── VECTURA MODAL (modern overlay primitive) ─────────────────── */
.vectura-modal {
  background: var(--ui-panel);
  border: 1px solid var(--ui-border-hi);
  border-radius: var(--radius-lg, 8px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.vectura-modal-hdr {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--ui-border);
  flex-shrink: 0;
}
.vectura-modal-hdr h2 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ui-accent);
}
.vectura-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}

/* ── VECTURA DIALOG (confirm/cancel wrapper) ──────────────────── */
.vectura-dialog-msg {
  margin: 0 0 16px;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  color: var(--ui-text-2);
  line-height: 1.5;
}
.vectura-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

/* ============================================================
 * Mirror panel (v2). Self-scoped under .mp-root.
 * All hues are tokenized + tinted off --mp-type-color which
 * the JS sets to the active mirror type hue (line/radial/arc/wall).
 * ============================================================ */
.mp-root {
  --mp-type-color: var(--ui-accent);
  --mirror-line-hue: #4e9ee1;
  --mirror-radial-hue: #c084fc;
  --mirror-arc-hue: #f0a85f;
  --mirror-wall-hue: #5cd99a;
  display: flex; flex-direction: column;
  gap: 10px;
}

/* ── Stack section ── */
.mp-root .mp-stack { display: flex; flex-direction: column; }
.mp-root .mp-stack-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0 8px;
}
.mp-root .mp-stack-lbl {
  font-size: var(--font-size-xs);
  color: var(--ui-text-2);
  font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui);
}
.mp-root .mp-stack-count {
  font-family: var(--font-mono); color: var(--mp-type-color);
  font-weight: 700;
  padding: 1px 6px;
  background: color-mix(in srgb, var(--mp-type-color) 18%, transparent);
  border-radius: 9999px;
  font-size: 10px;
}
.mp-root .mp-stack-list {
  display: flex; flex-direction: column;
  gap: 4px;
}

/* ── Stack row ── */
.mp-root .mp-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--ui-panel-alt, var(--ui-ctrl));
  border: 1px solid var(--ui-border);
  border-left: 3px solid var(--mp-row-color, var(--ui-accent));
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.mp-root .mp-row:hover { background: var(--ui-ctrl-hov, var(--ui-ctrl)); }
.mp-root .mp-row.is-selected {
  background: var(--ui-ctrl-hov, var(--ui-ctrl));
  box-shadow: 0 0 0 1px var(--mp-row-color, var(--ui-accent));
}
.mp-root .mp-row.is-disabled .mp-row-thumb,
.mp-root .mp-row.is-disabled .mp-row-meta { opacity: 0.45; }
.mp-root .mp-row-thumb {
  width: 36px; aspect-ratio: 1.4;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0; cursor: pointer;
}
.mp-root .mp-row-thumb svg { width: 80%; height: 80%; }
.mp-root .mp-row-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mp-root .mp-row-name {
  font-size: 12px; font-weight: 600; color: var(--ui-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 6px;
}
.mp-root .mp-row-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mp-row-color, var(--ui-accent));
  box-shadow: 0 0 4px var(--mp-row-color, var(--ui-accent));
  flex-shrink: 0;
}
.mp-root .mp-row-summary {
  font-size: 9.5px; color: var(--ui-muted);
  font-family: var(--font-mono); letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-transform: uppercase;
}
.mp-root .mp-row-actions { display: flex; gap: 1px; }
.mp-root .mp-icon-btn {
  width: 22px; height: 22px;
  background: none; border: none; padding: 0;
  color: var(--ui-muted); cursor: pointer;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.1s, color 0.1s;
}
.mp-root .mp-icon-btn:hover { background: var(--ui-ctrl-hov, var(--ui-ctrl)); color: var(--ui-text); }
.mp-root .mp-icon-btn.active { color: var(--ui-accent); }
.mp-root .mp-icon-btn.mp-icon-danger:hover { color: var(--ui-danger); }
.mp-root .mp-icon-btn svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Add-mirror button ── */
.mp-root .mp-stack-add {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px;
  background: transparent;
  border: 1px dashed var(--ui-border);
  border-radius: var(--radius-sm);
  color: var(--ui-text-2);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm); font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.mp-root .mp-stack-add:hover {
  border-color: var(--mp-type-color); color: var(--mp-type-color);
  background: color-mix(in srgb, var(--mp-type-color) 12%, transparent);
}
.mp-root .mp-stack-add.is-active {
  border-style: solid;
  border-color: var(--mp-type-color);
  color: var(--mp-type-color);
  background: color-mix(in srgb, var(--mp-type-color) 12%, transparent);
}
.mp-root .mp-stack-add svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round;
}

/* ── Editor ── */
.mp-root .mp-editor {
  background: var(--ui-panel-alt, var(--ui-ctrl));
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.mp-root .mp-editor-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-sm);
  padding: 8px var(--spacing-md);
  min-height: 52px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--mp-type-color) 14%, transparent) 0%,
    color-mix(in srgb, var(--mp-type-color) 6%, transparent) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--mp-type-color) 35%, var(--ui-border));
  position: relative;
  transition: background 0.14s;
}
.mp-root .mp-editor-hdr.is-clickable { cursor: pointer; }
.mp-root .mp-editor-hdr.is-clickable:hover {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--mp-type-color) 22%, transparent) 0%,
    color-mix(in srgb, var(--mp-type-color) 12%, transparent) 100%);
}
.mp-root .mp-editor-hdr.is-picker {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ui-accent) 22%, transparent) 0%,
    color-mix(in srgb, var(--ui-accent) 12%, transparent) 100%);
  border-bottom-color: var(--ui-accent);
}
.mp-root .mp-editor-hdr-left {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.mp-root .mp-step-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  color: color-mix(in srgb, var(--mp-type-color) 70%, var(--ui-text-2));
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
}
.mp-root .mp-editor-hdr.is-picker .mp-step-tag { color: var(--ui-accent); }
.mp-root .mp-type-chip {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700;
  color: var(--mp-type-color);
  letter-spacing: -0.01em;
}
.mp-root .mp-editor-hdr.is-picker .mp-type-chip { color: var(--ui-accent); }
.mp-root .mp-chip-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.mp-root .mp-change-cta {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border: 0;
  border-radius: 9999px;
  background: var(--mp-type-color);
  color: #141417;
  font-family: var(--font-ui);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--mp-type-color) 50%, transparent),
    0 4px 14px color-mix(in srgb, var(--mp-type-color) 30%, transparent);
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
  flex-shrink: 0;
}
.mp-root .mp-change-cta:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, white 12%, var(--mp-type-color));
}
.mp-root .mp-change-cta:active { transform: translateY(0); }
.mp-root .mp-change-cta svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.mp-root .mp-change-cta.is-cancel {
  background: var(--ui-danger); color: #fff;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ui-danger) 50%, transparent),
    0 4px 14px color-mix(in srgb, var(--ui-danger) 30%, transparent);
}
.mp-root .mp-editor-body {
  padding: var(--spacing-md, 12px);
  display: flex; flex-direction: column;
  gap: var(--spacing-md, 12px);
  position: relative;
}
.mp-root .mp-editor-body.is-locked {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}
.mp-root .mp-editor-hdr.is-locked .mp-change-cta {
  opacity: 0.45;
  pointer-events: none;
}

/* ── 4-up type picker ── */
.mp-root .mp-picker-wrap { display: flex; flex-direction: column; gap: var(--spacing-md, 12px); }
.mp-root .mp-picker-prompt {
  color: var(--ui-text-2);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}
.mp-root .mp-picker-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.mp-root .mp-type-card {
  position: relative; text-align: left;
  background: var(--ui-panel-alt, var(--ui-ctrl));
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  padding: 10px 8px 8px;
  cursor: pointer;
  transition: all 0.14s;
  overflow: hidden;
  color: inherit;
}
.mp-root .mp-type-card:hover {
  transform: translateY(-1px);
  border-color: var(--mp-card-color, var(--ui-accent));
}
.mp-root .mp-type-card.is-current {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mp-card-color, var(--ui-accent)) 14%, transparent) 0%,
    transparent 80%);
  box-shadow: 0 0 0 1px var(--mp-card-color, var(--ui-accent)) inset;
}
.mp-root .mp-type-preview {
  width: 100%; aspect-ratio: 1.6;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  display: flex; align-items: center; justify-content: center;
}
.mp-root .mp-type-preview svg { width: 80%; height: 80%; }
.mp-root .mp-type-name {
  font-size: 12px; font-weight: 700;
  color: var(--ui-text);
  display: flex; align-items: center; gap: 6px;
}
.mp-root .mp-type-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mp-card-color, var(--ui-accent));
  box-shadow: 0 0 6px var(--mp-card-color, var(--ui-accent));
}
.mp-root .mp-type-tag {
  font-size: var(--font-size-xs);
  color: var(--ui-muted);
  margin-top: 2px;
  line-height: 1.35;
}
.mp-root .mp-current-marker {
  position: absolute; top: 6px; right: 6px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  background: var(--mp-card-color, var(--ui-accent));
  color: #1a1a1a;
  font-weight: 700;
  border-radius: 9999px;
  display: none;
}
.mp-root .mp-type-card.is-current .mp-current-marker { display: inline-flex; }

/* ── Common control bits ── */
.mp-root .mp-ctrl-grp { display: flex; flex-direction: column; gap: 4px; }
.mp-root .mp-ctrl-lbl {
  font-size: var(--font-size-sm); font-weight: 500;
  color: var(--ui-text-2);
  display: flex; align-items: center; gap: 6px;
}
.mp-root .mp-val-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--mp-type-color);
  font-variant-numeric: tabular-nums;
}
.mp-root .mp-ctrl-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Locked control (e.g. tile-height/angle on square/hex wallpaper groups) */
.mp-root .mp-ctrl-grp.is-locked { opacity: 0.45; }
.mp-root .mp-ctrl-grp.is-locked .mp-slider { cursor: not-allowed; pointer-events: none; }
.mp-root .mp-lock-hint {
  margin-left: 6px;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ui-text-3, var(--ui-text-2));
  font-weight: 500;
}

/* sliders */
.mp-root .mp-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px;
  cursor: pointer; outline: none;
  background: linear-gradient(to right,
    var(--mp-type-color) 0%,
    var(--mp-type-color) var(--fill, 50%),
    var(--ui-border) var(--fill, 50%) 100%);
}
.mp-root .mp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--mp-type-color);
  border: 2.5px solid var(--ui-panel, var(--ui-bg));
  box-shadow: 0 0 0 1.5px var(--mp-type-color);
  cursor: pointer;
}
.mp-root .mp-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--mp-type-color);
  border: 2.5px solid var(--ui-panel, var(--ui-bg));
  box-shadow: 0 0 0 1.5px var(--mp-type-color);
  cursor: pointer;
}

/* mode tile 3-up */
.mp-root .mp-mode-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mp-root .mp-mode-tile {
  background: var(--ui-ctrl);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  padding: 6px 4px 4px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: all 0.12s;
  color: var(--ui-text-2);
}
.mp-root .mp-mode-tile:hover { border-color: var(--ui-border-hi, var(--ui-border)); }
.mp-root .mp-mode-tile.active {
  border-color: var(--mp-type-color);
  background: color-mix(in srgb, var(--mp-type-color) 14%, var(--ui-ctrl));
  color: var(--mp-type-color);
}
.mp-root .mp-mode-tile svg {
  width: 32px; height: 32px;
  stroke-width: 1.4; fill: none;
}
.mp-root .mp-mode-tile .mp-mt-name {
  font-size: var(--font-size-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* angle dial */
.mp-root .mp-dial-row {
  display: grid; grid-template-columns: 56px 1fr; gap: 10px;
  align-items: center;
}
.mp-root .mp-dial {
  position: relative;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--ui-panel, var(--ui-ctrl)) 0%, var(--ui-bg) 75%);
  border: 1px solid var(--ui-border);
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.mp-root .mp-dial.is-dragging { cursor: grabbing; }
.mp-root .mp-dial-row.is-locked .mp-dial {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.mp-root .mp-dial::after {
  content: ''; position: absolute; inset: 5px;
  border-radius: 50%;
  border: 1px dashed var(--ui-border-hi, var(--ui-border));
  pointer-events: none;
}
.mp-root .mp-dial-pin {
  position: absolute;
  width: 2px; height: 20px;
  background: var(--mp-type-color);
  top: 50%; left: 50%;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(var(--angle, 0deg));
  border-radius: 2px;
  box-shadow: 0 0 6px var(--mp-type-color);
  pointer-events: none;
}
.mp-root .mp-dial-knob {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ui-text);
  z-index: 2; pointer-events: none;
}
.mp-root .mp-dial-tick {
  position: absolute;
  width: 1px; height: 4px;
  background: var(--ui-border-hi, var(--ui-border));
  top: 50%; left: 50%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotate(0deg) translateY(-21px);
  pointer-events: none;
}
.mp-root .mp-dial-tick.mp-tick-90  { transform: translate(-50%, -50%) rotate(90deg)  translateY(-21px); }
.mp-root .mp-dial-tick.mp-tick-180 { transform: translate(-50%, -50%) rotate(180deg) translateY(-21px); }
.mp-root .mp-dial-tick.mp-tick-270 { transform: translate(-50%, -50%) rotate(270deg) translateY(-21px); }

/* side tiles (binary pair) */
.mp-root .mp-side-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mp-root .mp-side-tile {
  background: var(--ui-ctrl);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  padding: 6px;
  cursor: pointer;
  display: grid; grid-template-columns: 28px 1fr; gap: 8px;
  align-items: center;
  transition: all 0.12s;
  color: var(--ui-text-2);
}
.mp-root .mp-side-tile:hover { border-color: var(--ui-border-hi, var(--ui-border)); }
.mp-root .mp-side-tile.active {
  border-color: var(--mp-type-color);
  background: color-mix(in srgb, var(--mp-type-color) 14%, var(--ui-ctrl));
  color: var(--mp-type-color);
}
.mp-root .mp-side-tile svg { width: 24px; height: 24px; stroke-width: 1.4; fill: none; }
.mp-root .mp-side-tile .mp-st-name {
  font-size: 11px; font-weight: 600;
}
.mp-root .mp-side-tile--text { grid-template-columns: 1fr; padding: 8px 6px; }
.mp-root .mp-side-tile--text .mp-st-name { text-align: center; }

/* wallpaper atlas */
.mp-root .mp-atlas-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0 4px;
  margin-top: 4px;
  border-top: 1px solid var(--ui-border);
}
.mp-root .mp-atlas-head:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.mp-root .mp-ash-title {
  font-size: var(--font-size-xs); font-weight: 700;
  color: var(--ui-text-2);
  letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
.mp-root .mp-ash-count {
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  color: var(--ui-muted);
}
.mp-root .mp-atlas-head.is-active-family .mp-ash-title,
.mp-root .mp-atlas-head.is-active-family .mp-ash-count { color: var(--mirror-wall-hue); }
.mp-root .mp-atlas-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.mp-root .mp-atlas-cell {
  aspect-ratio: 1;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: all 0.12s;
  color: var(--ui-text-2);
  padding: 0;
}
.mp-root .mp-atlas-cell:hover {
  border-color: var(--ui-border-hi, var(--ui-border));
  transform: scale(1.04);
  z-index: 1;
}
.mp-root .mp-atlas-cell.active {
  border-color: var(--mirror-wall-hue);
  box-shadow: 0 0 0 1px var(--mirror-wall-hue) inset, 0 0 14px rgba(92, 217, 154, 0.18);
  color: var(--mirror-wall-hue);
}
.mp-root .mp-atlas-cell svg {
  width: 100%; height: 100%;
  stroke: currentColor; stroke-width: 1; fill: currentColor;
  fill-opacity: 0.85;
}
.mp-root .mp-atlas-cell .mp-ac-code {
  position: absolute; bottom: 1px; right: 3px;
  font-family: var(--font-mono); font-size: 8px;
  color: var(--ui-muted);
}
.mp-root .mp-atlas-cell.active .mp-ac-code { color: var(--mirror-wall-hue); }

/* info trigger + popover */
.mp-root .mp-info-trigger {
  width: 14px; height: 14px;
  border: 1px solid color-mix(in srgb, var(--mp-type-color) 40%, var(--ui-border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--mp-type-color) 14%, var(--ui-ctrl));
  color: var(--mp-type-color);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.14s;
  flex-shrink: 0;
}
.mp-root .mp-info-trigger:hover {
  background: var(--mp-type-color);
  color: #141417;
  border-color: var(--mp-type-color);
}
.mp-root .mp-info-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 8, 10, 0.65);
  backdrop-filter: blur(2px);
  z-index: 40;
  display: none;
  cursor: pointer;
}
.mp-root .mp-info-backdrop.is-open { display: block; }
.mp-root .mp-info-popover {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  z-index: 50;
  background: var(--ui-panel, var(--ui-ctrl));
  border: 1px solid color-mix(in srgb, var(--mp-type-color) 35%, var(--ui-border));
  border-left: 3px solid var(--mp-type-color);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
  padding: 12px 14px 14px;
  font-size: var(--font-size-sm);
  color: var(--ui-text-2);
  line-height: 1.55;
  display: none;
  max-height: calc(100% - 24px);
  overflow-y: auto;
}
.mp-root .mp-info-popover.is-open { display: block; }
.mp-root .mp-ip-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ui-border);
}
.mp-root .mp-ip-title-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--mp-type-color);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.mp-root .mp-ip-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ui-text);
}
.mp-root .mp-ip-close {
  width: 22px; height: 22px;
  background: var(--ui-ctrl);
  border: 1px solid var(--ui-border);
  border-radius: 50%;
  color: var(--ui-text-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.12s;
}
.mp-root .mp-ip-close:hover {
  background: var(--ui-danger); border-color: var(--ui-danger); color: #fff;
}
.mp-root .mp-ip-close svg {
  width: 10px; height: 10px;
  stroke: currentColor; fill: none;
  stroke-width: 2.4; stroke-linecap: round;
}
.mp-root .mp-ip-body p { margin: 0; }
.mp-root .mp-ip-body p + p { margin-top: 6px; }
.mp-root .mp-ip-body strong { color: var(--ui-text); font-weight: 600; }
.mp-root .mp-ip-body em { color: var(--ui-text-2); font-style: italic; }
.mp-root .mp-ip-body code {
  font-family: var(--font-mono); font-size: 10.5px;
  background: color-mix(in srgb, var(--mp-type-color) 14%, var(--ui-ctrl));
  border: 1px solid color-mix(in srgb, var(--mp-type-color) 35%, var(--ui-border));
  border-radius: 3px;
  padding: 0 4px;
  color: var(--mp-type-color);
  margin: 0 1px;
}
.mp-root .mp-ip-note {
  margin-top: 10px;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--mp-type-color) 8%, var(--ui-panel-alt, var(--ui-ctrl)));
  border-left: 2px solid color-mix(in srgb, var(--mp-type-color) 60%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--font-size-xs);
  color: var(--ui-text-2);
  line-height: 1.45;
}
.mp-root .mp-ip-key {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ui-border);
  display: flex; flex-direction: column;
  gap: 6px;
}
.mp-root .mp-ip-key h5 {
  margin: 0 0 4px;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ui-muted);
  font-weight: 700;
}
.mp-root .mp-ip-key-row {
  display: grid;
  grid-template-columns: 22px 36px 1fr;
  gap: 8px;
  align-items: center;
  font-size: var(--font-size-xs);
  color: var(--ui-text-2);
  line-height: 1.4;
}
.mp-root .mp-ip-key-code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: color-mix(in srgb, var(--mp-type-color) 14%, var(--ui-ctrl));
  border: 1px solid color-mix(in srgb, var(--mp-type-color) 35%, var(--ui-border));
  border-radius: 3px;
  padding: 1px 0;
  color: var(--mp-type-color);
  text-align: center;
  font-weight: 700;
}
.mp-root .mp-ip-key-svg {
  width: 36px; height: 24px;
  stroke: var(--mp-type-color);
  stroke-width: 1.4;
  fill: none;
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  background: var(--ui-bg);
  padding: 2px;
}

/* Mirror panel — reorder drag + multiplier warning */
.mp-root .mp-stack-warn {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ui-danger);
  border: 1px solid color-mix(in srgb, var(--ui-danger) 40%, transparent);
  background: color-mix(in srgb, var(--ui-danger) 14%, transparent);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
  text-transform: uppercase;
  font-weight: 700;
}
.mp-root .mp-row { cursor: grab; }
.mp-root .mp-row[draggable="true"]:active { cursor: grabbing; }
.mp-root .mp-row--dragging {
  opacity: 0.5;
  outline: 1px dashed var(--mp-row-color, var(--ui-accent));
}
.mp-root .mp-drop-indicator {
  height: 2px;
  border-radius: 999px;
  background: var(--ui-accent);
  margin: 2px 0;
  box-shadow: 0 0 4px var(--ui-accent);
  pointer-events: none;
}