/* ── DESIGN TOKENS ── */
:root {
  --bg:         #0e0d0b;
  --bg2:        #141310;
  --bg3:        #1c1a17;
  --bg4:        #242018;
  --border:     rgba(255,255,255,0.07);
  --border2:    rgba(255,255,255,0.13);
  --text:       #f0ead8;
  --text2:      #9e9580;
  --text3:      #5c5748;
  --accent:     #c8a96e;
  --accent2:    #8a6f3e;
  --accent-dim: rgba(200,169,110,0.12);
  --danger:     #d4614a;
  --danger-dim: rgba(212,97,74,0.12);
  --success:    #5a9e6f;
  --skin-glow-a: rgba(200,169,110,.16);
  --skin-glow-b: rgba(77,54,25,.18);
  --skin-vignette: rgba(0,0,0,.58);
  --skin-panel: rgba(20,19,16,.92);
  --skin-card: rgba(28,26,23,.82);
  --skin-line: rgba(200,169,110,.12);
  --skin-noise-opacity: .5;
  --radius:     6px;
  --radius-lg:  10px;
  --font-d:     Georgia, 'Times New Roman', serif;
  --font-m:     ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;
  --sidebar-w:  210px;
  --right-w:    256px;
  --hdr-h:      46px;
}
[data-theme="light"] {
  --bg:         #f5f0e8;
  --bg2:        #ede8de;
  --bg3:        #e4ddd0;
  --bg4:        #d8d0c0;
  --border:     rgba(0,0,0,0.08);
  --border2:    rgba(0,0,0,0.16);
  --text:       #1a1712;
  --text2:      #5a5040;
  --text3:      #9a8e78;
  --accent:     #8a5e20;
  --accent2:    #6a4010;
  --accent-dim: rgba(138,94,32,0.1);
  --danger:     #b03020;
  --danger-dim: rgba(176,48,32,0.1);
  --success:    #2a7040;
  --skin-glow-a: rgba(138,94,32,.12);
  --skin-glow-b: rgba(255,255,255,.38);
  --skin-vignette: rgba(255,255,255,.22);
  --skin-panel: rgba(237,232,222,.9);
  --skin-card: rgba(255,252,246,.72);
  --skin-line: rgba(138,94,32,.16);
}

/* ── VISUAL SKINS ───────────────────────────────────────────────────────── */
[data-skin="nocturne"] {
  --bg:#0e0d0b; --bg2:#141310; --bg3:#1c1a17; --bg4:#242018;
  --text:#f0ead8; --text2:#a49a82; --text3:#635d4f;
  --accent:#c8a96e; --accent2:#8a6f3e; --accent-dim:rgba(200,169,110,.13);
  --skin-glow-a:rgba(200,169,110,.16); --skin-glow-b:rgba(76,54,24,.2); --skin-line:rgba(200,169,110,.13);
  --skin-panel:rgba(20,19,16,.92); --skin-card:rgba(31,28,22,.84); --skin-vignette:rgba(0,0,0,.62);
}
[data-skin="vhs"] {
  --bg:#09070b; --bg2:#120d16; --bg3:#1f1425; --bg4:#2d1b36;
  --text:#fff2e5; --text2:#b89fb5; --text3:#76677c;
  --accent:#ff4d7d; --accent2:#2be7ff; --accent-dim:rgba(255,77,125,.14);
  --danger:#ff4d4d; --skin-glow-a:rgba(255,77,125,.22); --skin-glow-b:rgba(43,231,255,.16); --skin-line:rgba(43,231,255,.14);
  --skin-panel:rgba(18,13,22,.9); --skin-card:rgba(31,20,37,.82); --skin-vignette:rgba(0,0,0,.66);
}
[data-skin="rlyeh"] {
  --bg:#061012; --bg2:#091719; --bg3:#102529; --bg4:#17343a;
  --text:#e7fff3; --text2:#8eb8aa; --text3:#55756d;
  --accent:#48d597; --accent2:#1d7f78; --accent-dim:rgba(72,213,151,.12);
  --danger:#d4617f; --skin-glow-a:rgba(72,213,151,.16); --skin-glow-b:rgba(20,96,126,.26); --skin-line:rgba(72,213,151,.12);
  --skin-panel:rgba(9,23,25,.92); --skin-card:rgba(13,35,38,.82); --skin-vignette:rgba(0,0,0,.6);
}
[data-skin="giallo"] {
  --bg:#13080a; --bg2:#1d0d0e; --bg3:#2b1414; --bg4:#3b1b16;
  --text:#fff0d9; --text2:#c9957f; --text3:#7e5b55;
  --accent:#ffb000; --accent2:#c0182d; --accent-dim:rgba(255,176,0,.13);
  --danger:#ff3152; --skin-glow-a:rgba(255,176,0,.18); --skin-glow-b:rgba(192,24,45,.22); --skin-line:rgba(255,176,0,.14);
  --skin-panel:rgba(29,13,14,.92); --skin-card:rgba(43,20,20,.82); --skin-vignette:rgba(0,0,0,.64);
}
[data-skin="biblioteca"] {
  --bg:#0b0a12; --bg2:#12101c; --bg3:#1b1828; --bg4:#27223a;
  --text:#f2edff; --text2:#aaa0ca; --text3:#676077;
  --accent:#bca7ff; --accent2:#725dcc; --accent-dim:rgba(188,167,255,.13);
  --skin-glow-a:rgba(188,167,255,.18); --skin-glow-b:rgba(57,38,115,.24); --skin-line:rgba(188,167,255,.13);
  --skin-panel:rgba(18,16,28,.92); --skin-card:rgba(27,24,40,.83); --skin-vignette:rgba(0,0,0,.62);
}
[data-skin="lluvia"] {
  --bg:#071019; --bg2:#0d1722; --bg3:#162536; --bg4:#21364d;
  --text:#e9f5ff; --text2:#91aeca; --text3:#5f7487;
  --accent:#7dc7ff; --accent2:#386b9b; --accent-dim:rgba(125,199,255,.13);
  --skin-glow-a:rgba(125,199,255,.17); --skin-glow-b:rgba(30,76,123,.24); --skin-line:rgba(125,199,255,.12);
  --skin-panel:rgba(13,23,34,.92); --skin-card:rgba(22,37,54,.82); --skin-vignette:rgba(0,0,0,.58);
}
[data-skin="inferno"] {
  --bg:#120705; --bg2:#1d0b07; --bg3:#2d120b; --bg4:#441b0e;
  --text:#fff0df; --text2:#d1a282; --text3:#835f4f;
  --accent:#ff7a2f; --accent2:#9e2c16; --accent-dim:rgba(255,122,47,.14);
  --danger:#ff4b2f; --skin-glow-a:rgba(255,122,47,.21); --skin-glow-b:rgba(158,44,22,.24); --skin-line:rgba(255,122,47,.12);
  --skin-panel:rgba(29,11,7,.92); --skin-card:rgba(45,18,11,.83); --skin-vignette:rgba(0,0,0,.66);
}
[data-skin="abismo"] {
  --bg:#020404; --bg2:#050908; --bg3:#0a1210; --bg4:#0f1c18;
  --border:rgba(53,201,143,.09); --border2:rgba(53,201,143,.18);
  --text:#dcefe6; --text2:#6f958a; --text3:#38504a;
  --accent:#35c98f; --accent2:#177052; --accent-dim:rgba(53,201,143,.12);
  --danger:#c23350; --danger-dim:rgba(194,51,80,.14); --success:#35c98f;
  --skin-glow-a:rgba(53,201,143,.14); --skin-glow-b:rgba(138,35,50,.14); --skin-line:rgba(53,201,143,.1);
  --skin-panel:rgba(5,9,8,.94); --skin-card:rgba(10,18,16,.85); --skin-vignette:rgba(0,0,0,.7);
  --skin-noise-opacity: .6;
}
[data-skin="papel"] {
  --bg:#f4ead8; --bg2:#efe1c9; --bg3:#e7d4b4; --bg4:#d9bd90;
  --border:rgba(78,48,20,.12); --border2:rgba(78,48,20,.24);
  --text:#24170d; --text2:#64472d; --text3:#9a7650;
  --accent:#8a4f19; --accent2:#5f3310; --accent-dim:rgba(138,79,25,.12);
  --danger:#9b2b1a; --danger-dim:rgba(155,43,26,.1); --success:#2e7040;
  --skin-glow-a:rgba(138,79,25,.16); --skin-glow-b:rgba(255,255,255,.5); --skin-line:rgba(138,79,25,.14);
  --skin-panel:rgba(239,225,201,.92); --skin-card:rgba(255,248,235,.76); --skin-vignette:rgba(112,72,28,.08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; width: 100%; overflow: hidden; overscroll-behavior: none; }

body {
  background:
    radial-gradient(circle at 18% 12%, var(--skin-glow-a), transparent 34%),
    radial-gradient(circle at 82% 8%, var(--skin-glow-b), transparent 30%),
    radial-gradient(circle at 50% 112%, var(--skin-vignette), transparent 40%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-m);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
}

/* Grain */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0; opacity: var(--skin-noise-opacity);
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background:
    linear-gradient(115deg, transparent 0 42%, var(--skin-line) 42.2% 42.5%, transparent 42.8% 100%),
    radial-gradient(circle at 50% 40%, transparent 0 48%, rgba(0,0,0,.18) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}
[data-skin="vhs"] body::after {
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(255,77,125,.06), transparent 30%, rgba(43,231,255,.05));
  opacity: .45;
  mix-blend-mode: screen;
}

/* ── CURSOR TRAIL (tentacular, skin abismo) ── */
#cursor-trail {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 9998; pointer-events: none;
  opacity: 0; transition: opacity .3s;
}
[data-skin="abismo"] #cursor-trail { opacity: 1; }
@media (hover: hover) {
  [data-skin="abismo"], [data-skin="abismo"] * { cursor: none !important; }
}

/* ── BACKGROUND VISUALIZER ── */
#bg-viz {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 0; opacity: 0;
  transition: opacity .8s;
  pointer-events: none;
}
body.cinema #bg-viz { opacity: 1; }

/* ── APP SHELL ── */
.app {
  position: relative; z-index: 1;
  display: grid;
  grid-template-rows: var(--hdr-h) 1fr;
  height: 100vh;
}

/* ── HEADER ── */
header {
  grid-column: 1/-1;
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--skin-panel), var(--bg2));
  box-shadow: 0 1px 0 var(--skin-line), 0 12px 32px rgba(0,0,0,.18);
  height: var(--hdr-h);
  flex-shrink: 0;
}
.logo {
  font-family: var(--font-d);
  font-size: 19px;
  color: var(--accent);
  letter-spacing: -.01em;
  line-height: 1;
  flex-shrink: 0;
}
.logo em { font-style: italic; color: var(--text3); font-size: 13px; margin-left: 3px; }
.hdr-sep { width: 1px; height: 16px; background: var(--border); flex-shrink: 0; }
.hdr-scene-name {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  font-family: var(--font-m); font-size: 12px;
  color: var(--text2); cursor: text;
}
.hdr-scene-name:focus { color: var(--text); }
.hdr-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text2);
  font-family: var(--font-m); font-size: 11px; font-weight: 400;
  letter-spacing: .04em;
  cursor: pointer; transition: all .12s; white-space: nowrap;
}
.btn:hover { background: var(--bg3); color: var(--text); border-color: var(--border2); }
.btn.active { border-color: var(--accent2); background: var(--accent-dim); color: var(--accent); }
.btn.danger { border-color: transparent; }
.btn.danger.active { border-color: var(--danger); background: var(--danger-dim); color: var(--danger); }
.btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.btn-icon {
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: transparent; color: var(--text3); cursor: pointer; transition: all .12s;
}
.btn-icon:hover { background: var(--bg3); color: var(--text); border-color: var(--border2); }
.btn-icon svg { width: 13px; height: 13px; }

/* ── MAIN LAYOUT ── */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--right-w);
  overflow: hidden;
  height: 100%;
}

/* ── SCROLLBARS ── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--bg4) transparent; }

/* ═══════════════════════════════════════════════
   SIDEBAR LEFT — CATALOG
═══════════════════════════════════════════════ */
.sidebar-left {
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, var(--skin-panel), var(--bg2));
  display: flex; flex-direction: column;
  overflow: hidden;
}

.cat-filter-bar {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 3px;
  background: var(--bg2);
}
.cat-chip {
  font-size: 10px; padding: 2px 7px;
  border: 1px solid var(--border); border-radius: 12px;
  background: transparent; color: var(--text3);
  cursor: pointer; transition: all .1s; white-space: nowrap;
  font-family: var(--font-m);
}
.cat-chip:hover { color: var(--text2); border-color: var(--border2); }
.cat-chip.on { color: var(--accent); border-color: var(--accent2); background: var(--accent-dim); }

.catalog-search {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.catalog-search input {
  width: 100%; background: var(--bg3);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-family: var(--font-m); font-size: 11px;
  padding: 5px 8px; outline: none; transition: border-color .12s;
}
.catalog-search input:focus { border-color: var(--accent2); }
.catalog-search input::placeholder { color: var(--text3); }

.catalog-scroll { flex: 1; overflow-y: auto; }

.cat-section { border-bottom: 1px solid var(--border); }
.cat-section.collapsed .cat-sounds { display: none; }
.cat-header {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 8px 4px;
  cursor: pointer; user-select: none;
}
.cat-header-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.cat-header-name { font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; flex: 1; }
.cat-header-chevron { font-size: 9px; color: var(--text3); transition: transform .15s; }
.cat-section.collapsed .cat-header-chevron { transform: rotate(-90deg); }
.cat-count { font-size: 9px; color: var(--text3); }

.sound-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  cursor: pointer; color: var(--text2);
  transition: background .08s, color .08s;
  user-select: none; position: relative;
}
.sound-item:hover { background: var(--bg3); color: var(--text); }
.sound-item.active { color: var(--accent); background: var(--accent-dim); }
.sound-item.active .s-dot { background: var(--accent) !important; }
.s-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: var(--border2); }
.s-name { font-size: 11px; flex: 1; }
.s-tag { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; }

/* Tooltip */
.s-tooltip {
  position: absolute; left: calc(100% + 4px); top: 50%;
  transform: translateY(-50%);
  background: var(--bg4); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 5px 8px;
  font-size: 10px; color: var(--text2); white-space: nowrap;
  pointer-events: none; z-index: 100;
  opacity: 0; transition: opacity .15s;
  max-width: 180px; white-space: normal;
}
.sound-item:hover .s-tooltip { opacity: 1; }

/* ═══════════════════════════════════════════════
   STAGE — MAIN AREA
═══════════════════════════════════════════════ */
.stage {
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.015), transparent 35%), var(--bg);
}

.presets-bar {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  overflow-x: auto; flex-shrink: 0;
  scrollbar-width: none;
}
.presets-bar::-webkit-scrollbar { display: none; }
.presets-bar-label { font-size: 10px; color: var(--text3); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }

.preset-chip {
  padding: 3px 9px;
  border: 1px solid var(--border); border-radius: 14px;
  background: transparent; color: var(--text3);
  font-family: var(--font-m); font-size: 10px;
  cursor: pointer; white-space: nowrap; transition: all .12s;
}
.preset-chip:hover { border-color: var(--border2); color: var(--text2); background: var(--bg3); }
.preset-chip.on { border-color: var(--accent2); color: var(--accent); background: var(--accent-dim); }

/* ── LAYERS AREA ── */
.layers-scroll {
  flex: 1; overflow-y: auto;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
}

.empty-stage {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; color: var(--text3); padding: 2rem; text-align: center;
}
.empty-stage .big-char { font-family: var(--font-d); font-size: 44px; color: var(--border2); line-height: 1; }
.empty-stage p { font-size: 11px; line-height: 1.7; max-width: 200px; }

/* ── LAYER CARD ── */
.layer-card {
  background: linear-gradient(135deg, var(--skin-card), var(--bg2));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 7px 9px;
  transition: border-color .15s, opacity .15s;
  position: relative; overflow: hidden;
}
.layer-card::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--layer-color, var(--accent));
  border-radius: 3px 0 0 3px;
}
.layer-card:hover { border-color: var(--border2); }
.layer-card.muted { opacity: .32; }
.layer-card.corrupted { border-color: rgba(212,97,74,.35); }
.layer-card.corrupted::before { background: var(--danger); }

.layer-head {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 7px; padding-left: 5px;
}
.layer-title { font-size: 11px; font-weight: 500; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-tag { font-size: 9px; padding: 1px 5px; border-radius: 9px; background: var(--bg3); color: var(--text3); flex-shrink: 0; }
.layer-btns { display: flex; gap: 3px; flex-shrink: 0; }
.lb {
  width: 22px; height: 22px;
  border: 1px solid var(--border); border-radius: 4px;
  background: transparent; color: var(--text3);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .1s;
}
.lb:hover { background: var(--bg3); color: var(--text); border-color: var(--border2); }
.lb.on { color: var(--accent); border-color: var(--accent2); background: var(--accent-dim); }
.lb.on-danger { color: var(--danger); border-color: rgba(212,97,74,.4); background: var(--danger-dim); }
.lb svg { width: 11px; height: 11px; }

.layer-sliders { display: flex; flex-direction: column; gap: 4px; padding-left: 5px; }
.sl { display: flex; align-items: center; gap: 5px; }
.sl-lbl { font-size: 9px; color: var(--text3); width: 26px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .05em; }
.sl input[type=range] {
  flex: 1; -webkit-appearance: none;
  height: 2px; border-radius: 1px;
  background: var(--bg4); outline: none; cursor: pointer;
}
.sl input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent); cursor: pointer;
  transition: transform .1s;
}
.sl input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.3); }
.sl input[type=range]::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); border: none; cursor: pointer;
}
.sl-val { font-size: 9px; color: var(--text3); width: 18px; text-align: right; font-variant-numeric: tabular-nums; }

/* Corruption row */
.sl.corrupt input[type=range]::-webkit-slider-thumb { background: var(--danger); }
.sl.corrupt input[type=range]::-moz-range-thumb { background: var(--danger); }
.sl.corrupt .sl-lbl { color: rgba(212,97,74,.6); }
.sl.corrupt .sl-val { color: var(--danger); }

/* Waveform */
.waveform {
  height: 16px; display: flex; align-items: flex-end;
  gap: 1.5px; overflow: hidden; margin-top: 5px; padding-left: 5px;
}
.wv-bar { flex: 1; border-radius: 1px 1px 0 0; min-height: 2px; transition: height .07s; }

/* ── TRANSPORT ── */
.transport {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--skin-panel), var(--bg2)); flex-shrink: 0;
}
.play-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--accent2); background: var(--accent-dim);
  color: var(--accent); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s; flex-shrink: 0;
}
.play-btn:hover { background: rgba(200,169,110,.22); }
.play-btn svg { width: 14px; height: 14px; }
.live-indicator { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text3); flex-shrink: 0; }
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text3); flex-shrink: 0; transition: background .2s; }
.live-dot.on { background: var(--success); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }
.master-group { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.master-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.layer-count { font-size: 10px; color: var(--text3); white-space: nowrap; flex-shrink: 0; }

/* ═══════════════════════════════════════════════
   SIDEBAR RIGHT — TABBED TOOLS
═══════════════════════════════════════════════ */
.sidebar-right {
  border-left: 1px solid var(--border);
  background: linear-gradient(180deg, var(--skin-panel), var(--bg2));
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* Tab bar */
.tab-bar {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  flex: 1; padding: 8px 4px;
  font-size: 10px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--text3); background: transparent; border: none;
  cursor: pointer; transition: all .12s;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: var(--font-m);
}
.tab-btn:hover { color: var(--text2); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-panel { display: none; flex: 1; overflow-y: auto; flex-direction: column; }
.tab-panel.active { display: flex; }

.panel-section { border-bottom: 1px solid var(--border); padding: 11px 12px; flex-shrink: 0; }
.panel-title { font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); margin-bottom: 9px; }
.panel-hint { font-size: 9px; color: var(--text3); line-height: 1.45; margin-top: 7px; }
.master-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.master-profile-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.master-profile-btn {
  font-family: var(--font-m); font-size: 10px; color: var(--text3); background: var(--bg3);
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 7px; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s, transform .12s;
}
.master-profile-btn:hover { color: var(--text2); border-color: var(--border2); transform: translateY(-1px); }
.master-profile-btn.active { color: var(--accent); border-color: var(--accent2); background: var(--accent-dim); }

/* Sliders in panel */
.panel-section .sl-lbl { width: 52px; }

/* Timer */
.timer-display { font-family: var(--font-d); font-size: 32px; color: var(--text); text-align: center; letter-spacing: -.02em; margin: 4px 0 9px; }
.timer-display.running { color: var(--accent); }
.timer-controls { display: flex; gap: 5px; }
.timer-controls .btn { flex: 1; justify-content: center; }

/* Intensity bars */
.intensity-bars { display: flex; align-items: flex-end; gap: 2px; height: 36px; margin-top: 4px; }
.int-bar { flex: 1; border-radius: 2px 2px 0 0; background: var(--bg4); transition: height .3s, background .3s; min-height: 3px; }

/* Mood grid */
.mood-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.mood-tag {
  font-size: 10px; padding: 2px 7px;
  border: 1px solid var(--border); border-radius: 11px;
  color: var(--text3); cursor: pointer; transition: all .12s;
  background: transparent; font-family: var(--font-m);
}
.mood-tag:hover { color: var(--text2); border-color: var(--border2); }
.mood-tag.on { color: var(--accent); border-color: var(--accent2); background: var(--accent-dim); }

/* Notes */
.notes-area {
  width: 100%; background: var(--bg3);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text2); font-family: var(--font-m); font-size: 11px; font-weight: 300;
  line-height: 1.7; padding: 7px 9px; resize: none; outline: none;
  transition: border-color .12s; min-height: 80px;
}
.notes-area:focus { border-color: var(--border2); color: var(--text); }
.notes-area::placeholder { color: var(--text3); }

/* Saved scenes */
.saved-scene-item {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 7px; border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: all .12s; margin-bottom: 4px;
}
.saved-scene-item:hover { background: var(--bg3); border-color: var(--border2); }
.saved-scene-name { flex: 1; font-size: 11px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-scene-count { font-size: 10px; color: var(--text3); flex-shrink: 0; }

/* Emotional axis */
.emo-axis-wrap { position: relative; width: 100%; padding-bottom: 100%; margin: 4px 0 8px; }
.emo-axis-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--radius); border: 1px solid var(--border); cursor: crosshair; }
.emo-axis-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 4px; }
.emo-lbl { font-size: 9px; color: var(--text3); text-align: center; }

/* Director */
.director-section select {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-family: var(--font-m);
  font-size: 11px; padding: 5px 8px; outline: none; margin-bottom: 7px;
}

/* ═══════════════════════════════════════════════
   SKIN PICKER
═══════════════════════════════════════════════ */
.skin-help {
  font-size: 10px;
  color: var(--text3);
  line-height: 1.6;
  margin-bottom: 10px;
}
.skin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.skin-card {
  min-height: 82px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 24% 12%, var(--skin-preview-a), transparent 44%),
    linear-gradient(145deg, var(--skin-preview-bg1), var(--skin-preview-bg2));
  color: var(--skin-preview-text);
  padding: 9px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-m);
  transition: transform .14s, border-color .14s, box-shadow .14s;
  position: relative;
  overflow: hidden;
}
.skin-card::after {
  content: '';
  position: absolute; inset: auto 8px 8px 8px;
  height: 2px;
  background: linear-gradient(90deg, var(--skin-preview-accent), transparent);
  opacity: .85;
}
.skin-card:hover {
  transform: translateY(-1px);
  border-color: var(--border2);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.skin-card.on {
  border-color: var(--accent2);
  box-shadow: 0 0 0 1px var(--accent-dim), 0 12px 28px rgba(0,0,0,.25);
}
.skin-icon { font-size: 18px; line-height: 1; margin-bottom: 7px; }
.skin-name { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.skin-desc { font-size: 9px; opacity: .78; line-height: 1.45; }
.skin-actions { display: flex; gap: 6px; margin-top: 10px; }
.skin-panel-hero { background: linear-gradient(180deg, var(--skin-card), transparent); }

/* ═══════════════════════════════════════════════
   CINEMA MODE
═══════════════════════════════════════════════ */
body.cinema .sidebar-left,
body.cinema .sidebar-right,
body.cinema header,
body.cinema .presets-bar { display: none !important; }
body.cinema .layout { grid-template-columns: 1fr; }
body.cinema .stage { background: transparent; }
body.cinema .layers-scroll { max-width: 600px; margin: 0 auto; width: 100%; }
body.cinema .transport { background: rgba(14,13,11,0.75); backdrop-filter: blur(10px); }

.cinema-exit {
  position: fixed; top: 14px; right: 14px;
  z-index: 200; display: none;
}
body.cinema .cinema-exit { display: flex; }

/* ═══════════════════════════════════════════════
   ONBOARDING MODAL
═══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.72); z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--radius-lg); padding: 28px 24px;
  max-width: 440px; width: 100%;
  position: relative;
}
.modal-title { font-family: var(--font-d); font-size: 24px; color: var(--accent); margin-bottom: 6px; }
.modal-sub { font-size: 12px; color: var(--text3); margin-bottom: 20px; }
.onboard-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.onboard-step { display: flex; gap: 12px; align-items: flex-start; }
.onboard-num {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--accent2); color: var(--accent);
  font-size: 11px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.onboard-text strong { display: block; font-size: 12px; color: var(--text); font-weight: 500; margin-bottom: 2px; }
.onboard-text span { font-size: 11px; color: var(--text3); }
.modal-footer { display: flex; justify-content: space-between; align-items: center; }
.modal-never { font-size: 10px; color: var(--text3); cursor: pointer; background: none; border: none; font-family: var(--font-m); }
.modal-never:hover { color: var(--text2); }

/* ── CHAPTER MODE ── */
.chapter-step {
  display: flex; align-items: center; gap: 5px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px 8px;
  font-size: 11px;
}
.chapter-step.active-step {
  border-color: var(--accent2);
  background: var(--accent-dim);
}
.chapter-step-num {
  font-size: 9px; color: var(--text3); width: 12px;
  flex-shrink: 0; text-align: center;
}
.chapter-step select {
  flex: 1; background: transparent; border: none;
  color: var(--text); font-family: var(--font-m);
  font-size: 11px; outline: none; cursor: pointer;
  min-width: 0;
}
.chapter-step select option { background: var(--bg2); }
.chapter-step-dur {
  width: 32px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 3px;
  color: var(--text2); font-family: var(--font-m);
  font-size: 10px; padding: 2px 4px; text-align: center;
  outline: none;
}
.chapter-step-unit {
  font-size: 9px; color: var(--text3); flex-shrink: 0;
}
.chapter-step .lb {
  width: 20px; height: 20px; flex-shrink: 0; padding: 0;
  opacity: .5;
}
.chapter-step .lb:hover { opacity: 1; }

/* ── ONBOARDING DEMO CARDS ── */
.onboard-demo-opt {
  cursor: pointer;
  display: block;
}
.onboard-demo-inner {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .12s, background .12s;
}
.onboard-demo-opt:hover .onboard-demo-inner {
  border-color: var(--border2);
  background: var(--bg3);
}
.onboard-demo-opt input:checked ~ .onboard-demo-inner {
  border-color: var(--accent2);
  background: var(--accent-dim);
}
.onboard-demo-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.onboard-demo-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 3px;
}
.onboard-demo-desc {
  font-size: 10px;
  color: var(--text3);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 18px; left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 7px 16px;
  font-size: 11px; color: var(--text2);
  opacity: 0; transition: all .22s;
  pointer-events: none; z-index: 400;
  max-width: min(480px, 90vw);
  white-space: normal;
  text-align: center;
  line-height: 1.5;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════
   KEYBOARD SHORTCUT PILL
═══════════════════════════════════════════════ */
.kbd {
  display: inline-block; font-size: 9px; padding: 1px 5px;
  border: 1px solid var(--border2); border-radius: 4px;
  color: var(--text3); background: var(--bg3);
  font-family: var(--font-m);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — PHONE + TABLET APP SHELL
═══════════════════════════════════════════════ */
@media (max-width: 860px) {
  :root { --right-w: 220px; }
}

/* ── PREVIEW BUTTON ── */
.s-preview {
  width: 18px; height: 18px;
  border: none; border-radius: 3px;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: color .1s, background .1s;
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
  font-family: var(--font-m);
  padding: 0;
}
.sound-item:hover .s-preview {
  opacity: 1;
  pointer-events: auto;
}
.s-preview:hover {
  color: var(--accent);
  background: var(--accent-dim);
}
.s-preview.previewing {
  color: var(--accent);
  opacity: 1;
  pointer-events: auto;
  animation: previewPulse 1s infinite;
}
@keyframes previewPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ── MOBILE NAV BAR ── */
.mobile-nav {
  display: none;
}

@media (max-width: 1024px) {
  :root { --sidebar-w: 0px; --right-w: 0px; }

  .layout { grid-template-columns: 1fr; }
  .sidebar-left, .sidebar-right { display: none !important; }

  /* bottom nav bar */
  .mobile-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    min-height: 54px; height: calc(54px + env(safe-area-inset-bottom, 0px)); z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg2);
    border-top: 1px solid var(--border);
  }
  .mobile-nav-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
    font-size: 9px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text3); background: transparent; border: none;
    cursor: pointer; transition: color .12s; font-family: var(--font-m);
    min-height: 44px; /* iOS minimum touch target */
    padding: 0 4px;
  }
  .mobile-nav-btn.active { color: var(--accent); }
  .mobile-nav-btn svg { width: 22px; height: 22px; }

  /* mobile slide-up panels */
  .mobile-panel {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(54px + env(safe-area-inset-bottom, 0px)); top: var(--hdr-h);
    background: var(--bg);
    overflow-y: auto; z-index: 90;
    transform: translateY(100%);
    transition: transform .22s ease;
    display: block;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .mobile-panel.open { transform: translateY(0); }
  .mobile-panel-head {
    position: sticky; top: 0; z-index: 2;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--skin-panel), var(--bg2));
    backdrop-filter: blur(10px);
  }
  .mobile-panel-sub {
    font-size: 10px;
    color: var(--text3);
    line-height: 1.55;
  }
  .mobile-panel .tab-bar {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mobile-panel .tab-bar::-webkit-scrollbar { display: none; }
  .mobile-panel .tab-btn {
    min-width: 92px;
    flex: 0 0 auto;
  }
  .mobile-preset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
  }
  .mobile-preset-chip {
    min-height: 56px;
    border-radius: var(--radius-lg);
    white-space: normal;
    line-height: 1.35;
    text-align: left;
    justify-content: flex-start;
    padding: 10px 11px;
  }
  .mobile-preset-chip small {
    display: block;
    width: 100%;
    margin-top: 4px;
    color: var(--text3);
    font-size: 9px;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.4;
  }

  /* stage bottom padding to clear nav */
  .stage { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .app { height: 100dvh; }

  /* make sliders finger-friendly — 44px touch target minimum */
  .sl { padding: 6px 0; }
  .sl input[type=range] { height: 6px; }
  .sl input[type=range]::-webkit-slider-thumb {
    width: 24px; height: 24px;
    box-shadow: 0 0 0 8px transparent; /* extend touch area */
  }
  .sl input[type=range]::-moz-range-thumb { width: 24px; height: 24px; }
  .sl-lbl { font-size: 10px; width: 32px; }
  .sl-val { font-size: 10px; width: 22px; }
  .lb { width: 38px; height: 38px; }
  .lb svg { width: 15px; height: 15px; }

  /* transport compact */
  .transport { gap: 7px; padding: 6px 10px; flex-wrap: wrap; }
  .master-group { min-width: 120px; }
  .layer-count { display: none; }

  /* header compact on mobile — hide text labels, keep icons */
  header { padding: 0 8px; gap: 7px; }
  .hdr-actions { gap: 3px; }
  .hdr-actions .btn .btn-label { display: none; }
  .hdr-actions .btn { padding: 4px 7px; min-width: 30px; justify-content: center; font-size: 0; gap: 0; }
  .hdr-actions .btn svg { width: 14px; height: 14px; }
  .hdr-sep { display: none; }
  .hdr-scene-name { font-size: 11px; max-width: 32vw; }
  .logo { font-size: 16px; }
  .logo em { display: none; }

  /* layer cards slightly larger touch targets */
  .play-btn { width: 40px; height: 40px; }

  /* presets bar hidden on mobile (accessible via tabs) */
  .presets-bar { display: none; }

  /* modal mobile/tablet */
  .modal {
    margin: 10px;
    padding: 20px 16px;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}


@media (max-width: 1024px) {
  .mobile-skin-grid, .skin-grid { grid-template-columns: 1fr 1fr; }
  .skin-card { min-height: 92px; padding: 10px; }
  .skin-actions .btn { min-height: 40px; }
}

@media (max-width: 520px) {
  .mobile-preset-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .skin-grid { grid-template-columns: 1fr; }
  .hdr-actions .btn:nth-of-type(1),
  .hdr-actions .btn:nth-of-type(2),
  .hdr-actions .btn:nth-of-type(n+5),
  .hdr-actions a.btn { display: none; }
}

/* ═══════════════════════════════════════════════
   ABISMO — COSMIC HORROR ATMOSPHERE
═══════════════════════════════════════════════ */
[data-skin="abismo"] body::after {
  background:
    radial-gradient(circle at 50% 45%, transparent 0 55%, rgba(0,0,0,.3) 100%),
    linear-gradient(115deg, transparent 0 46%, rgba(53,201,143,.06) 46.2% 46.6%, transparent 47% 100%);
  opacity: .7;
}
@keyframes abismoFlicker {
  0%, 91%, 100% { text-shadow: 0 0 0 transparent; }
  92% { text-shadow: -1px 0 rgba(255,46,90,.7), 1px 0 rgba(43,231,255,.6); }
  93% { text-shadow: 0 0 0 transparent; }
  96% { text-shadow: 1px 0 rgba(255,46,90,.6), -1px 0 rgba(43,231,255,.5); }
  97% { text-shadow: 0 0 0 transparent; }
}
[data-skin="abismo"] .logo {
  position: relative;
  animation: abismoFlicker 6s infinite;
}
[data-skin="abismo"] .play-btn {
  box-shadow: 0 0 0 1px var(--accent-dim), 0 0 18px rgba(53,201,143,.25);
}
[data-skin="abismo"] .live-dot.on { box-shadow: 0 0 6px var(--accent); }
[data-skin="abismo"] .stage::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 50% 40%, transparent 0 30%, transparent 100%);
}
[data-skin="abismo"] .layers-scroll {
  position: relative;
}
[data-skin="abismo"] .layers-scroll::before {
  content: '';
  position: absolute; top: -20px; left: 50%; width: 480px; height: 480px;
  transform: translateX(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='180' fill='none' stroke='%2335c98f' stroke-width='0.6'/%3E%3Ccircle cx='200' cy='200' r='140' fill='none' stroke='%2335c98f' stroke-width='0.4' stroke-dasharray='1 11'/%3E%3Cpath d='M200 20 L360 290 L40 290 Z' fill='none' stroke='%2335c98f' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
  opacity: .05; pointer-events: none; z-index: 0;
  animation: sigilSpinSlow 120s linear infinite;
}
@keyframes sigilSpinSlow { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }
[data-skin="abismo"] .layer-card { position: relative; z-index: 1; }
[data-skin="abismo"] .modal-title { animation: abismoFlicker 6s infinite; }
[data-skin="abismo"] .skin-card.on { box-shadow: 0 0 0 1px var(--accent-dim), 0 0 20px rgba(53,201,143,.28); }
[data-skin="abismo"] .toast { border-color: var(--accent2); box-shadow: 0 0 16px rgba(53,201,143,.22); color: var(--accent); }
[data-skin="abismo"] .s-tooltip { border-color: var(--accent2); box-shadow: 0 0 10px rgba(53,201,143,.18); }
[data-skin="abismo"] .cinema-title {
  position: fixed; top: 34px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-d); font-size: 22px; color: var(--accent);
  text-align: center; z-index: 150; opacity: .85; letter-spacing: .01em;
  animation: abismoFlicker 6s infinite; pointer-events: none;
}
.cinema-title { display: none; }
body.cinema .cinema-title { display: block; }
@keyframes grimoireOpen {
  0% { opacity: 0; transform: perspective(900px) rotateX(35deg) scaleY(.6); filter: blur(3px); }
  60% { opacity: 1; transform: perspective(900px) rotateX(-4deg) scaleY(1.02); filter: blur(0); }
  100% { transform: perspective(900px) rotateX(0deg) scaleY(1); }
}
[data-skin="abismo"] .modal { animation: grimoireOpen .6s cubic-bezier(.2,.8,.2,1); transform-origin: top center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}