/* Base theme */
:root { --bg:#fff; --fg:#0f1115; --muted:#6b7280; --line:#e5e7eb; --shadow:rgba(0,0,0,0.08); --accent:#2563eb; --accent-2:#111827; --sidebar-w:260px; --chrome-h:0px; }
body.theme-dark { --bg:#0b0c0f; --fg:#e5e7eb; --muted:#9aa0aa; --line:#1f2430; --shadow:rgba(0,0,0,0.45); --accent:#38bdf8; --accent-2:#e5e7eb; }
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; background:var(--bg); color:var(--fg); font-family:"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }

/* Header */
.titlebar{ text-align:center; padding:8px 8px 6px; border-bottom:1px solid var(--line); background:
  radial-gradient(1000px 80px at 10% 0%, rgba(37,99,235,0.10), transparent 60%),
  repeating-linear-gradient(90deg, rgba(37,99,235,0.08) 0 8px, transparent 8px 24px),
  repeating-linear-gradient(45deg, rgba(17,24,39,0.06) 0 16px, transparent 16px 32px),
  var(--bg);
}
.titlebar h1{ margin:0 0 2px; font-size:18px; font-weight:700; letter-spacing:0.2px; color: var(--accent-2); text-shadow: 0 1px 0 rgba(255,255,255,0.7); }
.titlebar .subtitle{ margin:2px 0 4px; color:color-mix(in oklab, var(--muted) 88%, #000 12%); font-size:12px; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
.titlebar p{ margin:0; color:var(--muted); font-size:11px; }
/* keep titlebar always visible */
.titlebar{ position: sticky; top: 0; z-index: 20; }
/* inline quick action buttons */
.titlebar .quickActions{ display:inline-flex; gap:6px; margin-left:8px; }
.titlebar .quickActions button{ padding:3px 6px; font-size:11px; border-radius:6px; background:#f7f7f8; }

/* Top menubar */
.menubar{ position:sticky; top:48px; z-index:15; display:flex; flex-direction: column; align-items: stretch; padding:4px 6px; border-bottom:1px solid var(--line); background:var(--bg); gap:0; }
.menus{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; width:100%; }
/* Transport bar: always visible under the menus */
.transportBar{
  display:flex;
  gap:8px;
  align-items:center;
  padding:6px 6px 8px;
  border-top:1px solid var(--line);
  background:var(--bg);
}
.transportBar{ width:100%; }
.transportBar #startStop{ background:var(--accent); color:#fff; border-color:var(--accent); }
.transportBar #startStop:hover{ background:#1e4fd6; color:#fff; }

/* Menubar dropdowns (no pane styling) */
details.menu { position:relative; display:inline-block; padding:0; border:none; background:transparent; }
details.menu > summary { cursor:pointer; font-weight:600; color:var(--fg); list-style:none; font-size:12px; padding:6px 10px; border-radius:6px; }
details.menu > summary::-webkit-details-marker{ display:none; }
details.menu > summary::after { content:"▾"; margin-left:6px; color:var(--muted); }
details.menu[open] > summary { background:#f7f7f8; }
details.menu .groupBody {
  position:absolute; top:100%; left:0;
  display:flex; flex-wrap:wrap; gap:6px 8px; padding:8px;
  min-width: 240px; max-width: min(80vw, 840px);
  background:var(--bg); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px var(--shadow);
  z-index:100;
}
/* Prevent collapsing for locked groups */
details.group.locked > summary { pointer-events: none; }
details.group.locked > summary::after { content: ""; }

/* Buttons */
button{ border:1px solid transparent; background:#f7f7f8; color:var(--fg); border-radius:6px; padding:4px 6px; transition:transform .08s ease, background .15s ease; font-size:12px; }
button:hover{ background:#eef2ff; transform: translateY(-1px); }
#startStop{ background:var(--accent); color:#fff; border-color:var(--accent); }
#startStop:hover{ background:#1e4fd6; color:#fff; }
button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.inline{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--fg); }

/* Layout */
.layout{ display:grid; grid-template-columns: var(--sidebar-w) 6px 1fr; height: calc(100vh - var(--chrome-h, 0px)); }
.compact-play .layout{ grid-template-columns: var(--sidebar-w) 6px 1fr; } /* keep three columns during playback */
.sidebar{ background:#fbfbfc; padding:4px; overflow:auto; border-right:1px solid var(--line); }
.stage{ position:relative; overflow:auto; background:#fff; min-height: 36vh; border-left:1px solid var(--line); }
#timeline{ width:100%; height:100%; display:block; background:var(--bg); }
/* Track list */
.trackList{ padding:8px 10px; border-top:1px solid var(--line); background:#fff; }
.trackItem{ display:flex; align-items:center; justify-content:space-between; padding:5px 6px; border:1px solid var(--line); border-radius:8px; margin-bottom:5px; background:#fdfdfd; cursor:pointer; }
.trackItem:hover{ background:#eef2ff; }
.trackItem .name{ display:flex; align-items:center; gap:6px; font-weight:600; font-size:12px; }
.trackItem .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
/* Modal */
.modal{ position:fixed; inset:0; z-index:2000; display:grid; place-items:center; }
.modal[hidden]{ display:none; }
.modalBackdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.22); }
.modalCard{ position:relative; width:min(700px, calc(100vw - 32px)); max-height:min(78vh, calc(100vh - 96px)); background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 36px var(--shadow); overflow:auto; }
.modalHeader{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-bottom:1px solid var(--line); }
.modalContent{ padding:8px 10px; }
body.theme-dark .modalCard{ background:#0d1117; border-color:#1f2430; }

/* Legend */
.legend{ position:absolute; bottom:6px; right:6px; color:var(--muted); font-size:10px; padding:3px 5px; background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:6px; box-shadow:0 4px 12px var(--shadow); }

/* Footer */
.foot{ border-top:1px solid var(--line); padding:8px 10px; color:var(--muted); font-size:10px; background:#fff; }

/* Lane controls */
.laneRow{ border-left:4px solid var(--laneColor, rgba(17,17,17,0.14)); background:
  linear-gradient(90deg, color-mix(in oklab, var(--laneColor, #000) 14%, transparent), transparent 26%); border-radius:8px; margin-bottom:6px; }
.laneRow .title::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--laneColor, #bbb); margin-right:6px; display:inline-block; }
.laneRow .title{ display:flex; align-items:center; justify-content:space-between; font-weight:600; margin-bottom:4px; font-size:12px; }
.laneRow label{ display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11px; padding:2px 0; }
.small{ color:var(--muted); font-size:10px; }

/* Compact lane dropdowns */
details.subgroup { border:1px solid var(--line); border-radius:8px; padding:4px 6px; background:#fff; margin:5px 5px 5px; }
details.subgroup > summary { cursor:pointer; font-weight:600; font-size:12px; color:var(--fg); list-style:none; }
details.subgroup > summary::-webkit-details-marker{ display:none; }
details.subgroup > summary::after { content:"▾"; float:right; color:var(--muted); }
details.subgroup:not([open]) > summary::after { content:"▸"; }
details.subgroup .subBody { display:flex; flex-wrap:wrap; gap:6px 8px; padding-top:4px; }
/* tighten selects inside subgroups */
details.subgroup select.fxTypes { width:100%; }

/* Help dropdown */
.help { position:relative; }
.helpPanel { position: fixed; right: 10px; top: 56px; width: min(640px, calc(100vw - 20px)); max-height: min(64vh, calc(100vh - 88px)); overflow: auto; z-index: 1000; background:#fff; }
.helpContent { padding:10px; }
.helpContent h2 { font-size:14px; margin:6px 0; }
.helpContent p { font-size:12px; line-height:1.45; color:#333; margin:4px 0 8px; }

/* Help subcategory dropdowns */
.helpContent details.helpSection {
  border:1px solid var(--line);
  border-radius:8px;
  padding:4px 6px;
  background:#fff;
  margin:6px 0;
}
.helpContent details.helpSection > summary {
  cursor:pointer;
  font-weight:600;
  font-size:12px;
  color:var(--fg);
  list-style:none;
}
.helpContent details.helpSection > summary::-webkit-details-marker{ display:none; }
.helpContent details.helpSection > summary::after { content:"▾"; float:right; color:var(--muted); }
.helpContent details.helpSection:not([open]) > summary::after { content:"▸"; }
.helpContent .helpSectionBody { padding:6px 2px; font-size:12px; color:#333; }

/* Range inputs */
input[type="range"]{ height: 14px; appearance: none; width:100%; background:transparent; }
input[type="range"]::-webkit-slider-runnable-track{
  height:4px;
  background:linear-gradient(90deg, var(--accent) 0 var(--val, 50%), #e5e7eb 0);
  border-radius:999px;
}
input[type="range"]::-moz-range-track{ height:4px; background:#e5e7eb; border-radius:999px; }
input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--accent); margin-top:-4px; }
input[type="range"]::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--accent); }

select.fxTypes { width:100%; border:1px solid var(--line); border-radius:6px; padding:5px; background:#fff; font-size:12px; }
.fxParams { padding:6px 8px; background:#f9f9f9; border:1px dashed var(--line); border-radius:8px; margin:6px 0; }

/* Canvas lanes subtle banding */
.stage #timeline { background: linear-gradient(#fff, #fff); }

/* Checkbox alignment */
.title .small { display:flex; align-items:center; gap:6px; }

/* Hover */
.laneRow:hover { background:#fcfcfc; }

/* Dark theme tweaks */
body.theme-dark .titlebar{
  background:
    radial-gradient(1000px 80px at 10% 0%, rgba(56,189,248,0.12), transparent 60%),
    repeating-linear-gradient(90deg, rgba(56,189,248,0.10) 0 8px, transparent 8px 24px),
    repeating-linear-gradient(45deg, rgba(229,231,235,0.05) 0 16px, transparent 16px 32px),
    var(--bg);
}
body.theme-dark .titlebar h1, body.theme-dark .titlebar .subtitle{ text-shadow: 0 1px 0 rgba(0,0,0,0.55); }
body.theme-dark .menubar, body.theme-dark .titlebar, body.theme-dark .foot, body.theme-dark .helpPanel { background:#0d1117; border-color:#1f2430; }
body.theme-dark .sidebar { background:#0f131a; }
body.theme-dark button{ background:#141923; color:var(--fg); border-color:#223; }
body.theme-dark #timeline{ background:#0b0c0f; }

/* Status bar */
.statusBar{ position:fixed; bottom:10px; left:10px; display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,0.9); color:#111; box-shadow:0 6px 18px var(--shadow); z-index:1000; font-size:11px; }
.statusBar .dot{ width:9px; height:9px; border-radius:50%; border:2px solid var(--accent); border-top-color:transparent; animation:spin 0.8s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
body.theme-dark .statusBar{ background:rgba(13,17,23,0.9); color:var(--fg); }

/* Responsive */
@media (max-width: 900px){
  .layout{ grid-template-columns: 1fr; height:auto; }
  .sidebar{ order:2; }
  .stage{ order:1; height: auto; }
  details.menu .groupBody { max-width: calc(100vw - 24px); }
}

#instrumentSelect{ min-width:180px; max-width:240px; }

.colResizer{ cursor:col-resize; background: var(--line); }
.colResizer:hover, .colResizer:focus{ background:#cbd5e1; outline:none; }
body.dragging .colResizer{ background:#94a3b8; }