:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --lane: #f0f2f5;
    --line: #dde1e7;
    --text: #1d2330;
    --muted: #677084;
    --accent: #e0457b;
    --accent-ink: #ffffff;
    --wave: #4a7bd0;
    --playhead: #f2a20c;
    --good: #1f8a4c;
    --ok: #a86a00;
    --bad: #c23b3b;
    --radius: 10px;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #12151c;
        --surface: #1a1e27;
        --lane: #212632;
        --line: #2e3442;
        --text: #e7eaf0;
        --muted: #9099ad;
        --accent: #ff5c93;
        --wave: #6f9cf0;
        --playhead: #ffbe3b;
        --good: #4cc47e;
        --ok: #e5a93a;
        --bad: #ef6b6b;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg: #12151c; --surface: #1a1e27; --lane: #212632; --line: #2e3442;
    --text: #e7eaf0; --muted: #9099ad; --accent: #ff5c93; --wave: #6f9cf0;
    --playhead: #ffbe3b; --good: #4cc47e; --ok: #e5a93a; --bad: #ef6b6b;
    color-scheme: dark;
}

* { box-sizing: border-box; }
/* the hidden attribute must win over any display rule below (rows, banner, panels) */
[hidden] { display: none !important; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
main { max-width: 1280px; margin: 0 auto; padding: 16px; }
.topbar { padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.topbar h1 { margin: 0; font-size: 18px; font-weight: 650; max-width: 1248px; margin: 0 auto; }
.topbar .sub { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 8px; }

.drop {
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 28px 16px;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.drop.over { border-color: var(--accent); }
.drop-title { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.drop-hint { margin: 0; color: var(--muted); }
.status { margin: 10px 0 0; min-height: 1.4em; font-variant-numeric: tabular-nums; }
.status.error { color: var(--bad); }

button.link {
    background: none; border: 0; padding: 0; color: var(--accent);
    font: inherit; cursor: pointer; text-decoration: underline;
}
.btn {
    font: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--text);
    padding: 6px 12px; border-radius: 7px; cursor: pointer;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

#results { margin-top: 16px; }
.songbar {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
    background: var(--surface); border-radius: var(--radius); padding: 12px 16px; border: 1px solid var(--line);
}
.song-name { font-size: 17px; font-weight: 650; overflow-wrap: anywhere; }
.song-meta { color: var(--muted); font-size: 13px; }
.transport { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.chk { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.clock { font-variant-numeric: tabular-nums; font-family: ui-monospace, Consolas, monospace; min-width: 9ch; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.stat .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.stat .v { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat .s { color: var(--muted); font-size: 12px; }

.timeline-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.zoom { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.zoom input { width: 220px; max-width: 60vw; }
.timeline { width: 100%; overflow: hidden; cursor: crosshair; outline: none; border-radius: 6px; }
.timeline canvas { display: block; }
.hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; }

.cols { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; margin-top: 12px; }
@media (max-width: 820px) { .cols { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-top: 0; }
.cols + .panel { margin-top: 12px; }
.panel h2 { margin: 0 0 2px; font-size: 15px; }
.panel-note { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.form { display: flex; flex-wrap: wrap; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.form input, .form select, .sections input {
    font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line);
    border-radius: 6px; padding: 5px 8px; width: 120px;
}
.fit { margin: 12px 0 0; font-size: 13px; padding: 8px 10px; border-radius: 7px; background: var(--lane); }
.fit:empty { display: none; }
.fit.good { border-left: 3px solid var(--good); }
.fit.ok { border-left: 3px solid var(--ok); }
.fit.bad { border-left: 3px solid var(--bad); }

.sections { width: 100%; border-collapse: collapse; }
.sections th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 500; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.sections td { padding: 4px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sections td.num { font-variant-numeric: tabular-nums; }
.sections input { width: 100%; min-width: 120px; }
.sections td:nth-child(3) { display: flex; align-items: center; gap: 6px; width: 100%; }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.meter { display: inline-block; width: 70px; height: 7px; background: var(--lane); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.meter span { display: block; height: 100%; background: var(--accent); }

.tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; margin-bottom: 12px; }
.track { display: flex; gap: 6px; align-items: baseline; cursor: pointer; }
.track span { color: var(--muted); font-size: 12px; }
.drop.compact .status { margin: 0; }

#vocalPanel { margin-top: 12px; }
.panel + .panel { margin-top: 12px; }
.lyrics-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.lyrics-label span { font-weight: 400; color: var(--muted); }
#lyricsText {
    width: 100%; font: 13px/1.5 ui-monospace, Consolas, monospace; color: var(--text);
    background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; resize: vertical;
}
.vocal-status { display: flex; align-items: center; gap: 10px; margin-top: 10px; min-height: 1.4em; font-size: 13px; }
.vocal-status .error, #vocalStatus.error { color: var(--bad); }
#vocalProg { width: 220px; max-width: 45vw; accent-color: var(--accent); }
.warn { margin-top: 6px; color: var(--bad); }
.lyric-scroll { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 7px; }
.lyric-lines td:last-child { white-space: normal; }
.lyric-lines th { position: sticky; top: 0; background: var(--surface); }
.track.off { opacity: .55; cursor: default; }

/* ---------- tabs + sticky transport ---------- */
.songbar { position: sticky; top: 0; z-index: 5; }
.tabs { display: flex; gap: 6px; width: 100%; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px; }
.tab {
    font: inherit; font-weight: 600; background: none; border: 1px solid transparent; color: var(--muted);
    padding: 6px 14px; border-radius: 7px; cursor: pointer;
}
.tab[aria-selected="true"] { color: var(--text); background: var(--lane); border-color: var(--line); }
.tabpane { margin-top: 12px; }
.tabpane > .panel + .panel, .tabpane > .panel + .cols, .tabpane > .cols + .panel { margin-top: 12px; }
.tabpane > .timeline-wrap + .cols { margin-top: 12px; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; background: var(--lane); padding: 1px 4px; border-radius: 4px; }
.small { font-size: 12px; }
.muted { color: var(--muted); }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.btnrow.tight { margin-top: 0; }
.btn.small { padding: 3px 10px; font-size: 13px; }
.btn.tiny { padding: 0 7px; font-size: 13px; line-height: 22px; }
.btn:disabled { opacity: .45; cursor: default; }
.form label.wide { flex: 1 1 420px; }
.form label.wide input { width: 100%; }

/* ---------- preview ---------- */
.viewer-wrap { width: 100%; background: #05070b; border-radius: 8px; overflow: hidden; }
#viewer { display: block; }
.preview-opts { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.pv-zoom { display: inline-flex; align-items: center; gap: 4px; }
.pv-zoom .btn.small { padding: 3px 9px; line-height: 1; font-weight: 600; }
.pv-zoom-label { font-size: 12px; color: var(--muted); min-width: 3.4em; text-align: center; cursor: pointer; user-select: none; }
.pv-zoom-label:hover { color: var(--text); }
.scrub { position: relative; height: 26px; margin-top: 8px; background: var(--lane); border-radius: 6px; cursor: pointer; overflow: hidden; }
#scrubFill { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in srgb, var(--accent) 30%, transparent); pointer-events: none; }
.scrub-parts span {
    position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); font-size: 11px; color: var(--muted);
    padding: 5px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}

/* ---------- plan ---------- */
.plan-sub { font-size: 13px; margin: 16px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.plan-part { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; padding: 8px 10px; }
.plan-part.disabled { opacity: .55; }
.plan-part-head { display: flex; align-items: center; gap: 8px; }
.plan-part-head span { color: var(--muted); font-size: 12px; flex: 1; }
.plan-row { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.pr-targets { font-size: 13px; overflow-wrap: anywhere; }
.pr-targets .tlist { color: var(--text); }
.pr-fx { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.pr-fx label, .opts label { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); gap: 2px; }
.pr-fx select, .opts input, .opts select {
    font: inherit; font-size: 13px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px;
}
.opts { display: contents; }
.opts input { width: 78px; }
.pr-fx .lvl, .pr-fx .efade, .pr-fx .bfrom, .pr-fx .bto { font: inherit; font-size: 13px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; width: 70px; }
.pr-fx .bfrom, .pr-fx .bto { width: 52px; }
.bars-in { display: flex; align-items: center; gap: 4px; }
.swatches { display: flex; gap: 4px; align-items: center; }
.swatches input[type=color] { width: 30px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: none; cursor: pointer; }
.pr-during { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; align-items: center; }
.pr-during > span:first-child { color: var(--muted); }

/* ---------- picker ---------- */
.picker { border: 1px solid var(--line); border-radius: 12px; padding: 0; background: var(--surface); color: var(--text); width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.picker::backdrop { background: rgba(0, 0, 0, .45); }
.picker-inner { display: flex; flex-direction: column; max-height: calc(100vh - 50px); }
.picker-head { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.picker-head h2 { margin: 0; font-size: 16px; }
.picker-head input { flex: 1; min-width: 160px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; }
.picker-cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; padding: 10px 16px; overflow: auto; min-height: 0; }
@media (max-width: 700px) { .picker-cols { grid-template-columns: 1fr; } }
.picker-cols h3 { font-size: 13px; margin: 0 0 6px; }
.picker-cols h3 span { font-weight: 400; color: var(--muted); }
.pick-list { display: flex; flex-direction: column; gap: 1px; }
.pick-item { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 5px; cursor: pointer; font-size: 13px; }
.pick-item:hover { background: var(--lane); }
.pick-item span { flex: 1; overflow-wrap: anywhere; }
.pick-item em { font-style: normal; color: var(--muted); font-size: 11px; white-space: nowrap; }
.pick-model { display: grid; grid-template-columns: 20px 1fr; align-items: start; }
.pick-model .tw { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px 0; font-size: 12px; }
.pick-subs { grid-column: 2; padding-left: 8px; border-left: 1px solid var(--line); margin-bottom: 4px; }
.pick-item.sub { font-size: 12px; }
.picker-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.permodel { align-self: center; font-size: 13px; color: var(--text) !important; flex-direction: row !important; }

/* ---------- sections, ideas, project ---------- */
.project { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sec-scroll { max-height: 420px; overflow: auto; }
.sec-actions { display: flex; gap: 4px; }
.scrub-parts span { pointer-events: auto !important; cursor: pointer; }
.scrub-parts span:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); }
.scrub-parts span.now { color: var(--text); font-weight: 600; }
.idea-bar, .plan-nav { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 10px; }
.idea-bar label:not(.chk) { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.idea-bar select, .plan-nav select { font: inherit; font-size: 13px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.sec-card { border: 1px solid var(--line); border-radius: 9px; margin-bottom: 8px; background: var(--surface); scroll-margin-top: calc(var(--stick-top) + var(--pv-h, 0px) + 8px); }
.sec-card.now { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.sec-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
.sec-head .tw { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; width: 18px; padding: 0; }
.sec-title { flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; min-width: 180px; }
.sec-title .muted { font-size: 12px; }
.sec-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.sec-sum { padding: 0 10px 8px 36px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px; }
.sec-card.open .sec-sum { display: none; }
.chip { background: var(--lane); border-radius: 12px; padding: 1px 8px; color: var(--muted); }
.chip b { color: var(--text); font-weight: 600; }
.sec-body { padding: 0 10px 10px 36px; }
.pool { font-size: 13px; padding: 6px 0; overflow-wrap: anywhere; }
.row-btns { display: flex; gap: 6px; }
.copy-dlg { width: min(560px, calc(100vw - 32px)); }
.copy-body { padding: 10px 16px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.copy-mode { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.bg-adjust { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 8px; }
.bg-adjust .form input { width: 96px; }
#viewer.adjusting { cursor: grab; outline: 2px dashed var(--accent); outline-offset: -2px; }
#viewer.adjusting.dragging { cursor: grabbing; }
#viewer.panning { cursor: grabbing; }
.idea-for { position: relative; font-size: 13px; }
.idea-for summary { cursor: pointer; list-style: none; border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; background: var(--surface); }
.idea-for summary::-webkit-details-marker { display: none; }
.idea-for summary::after { content: ' ▾'; color: var(--muted); }
.idea-for-pop {
    position: absolute; z-index: 6; top: calc(100% + 4px); left: 0; width: min(360px, calc(100vw - 48px));
    background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
    max-height: 360px; overflow: auto; display: flex; flex-direction: column; gap: 8px;
}

/* ---------- side-by-side editing ---------- */
:root { --stick-top: 150px; }
.seq-split { margin-top: 12px; }
.seq-left .panel { margin-bottom: 12px; }
/* the whole left column sticks: a sticky element needs a taller parent, and the split is tall */
.seq-left { position: sticky; top: var(--stick-top); z-index: 3; align-self: start; }
@media (min-width: 1100px) {
    main { max-width: 1680px; }
    .seq-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr); gap: 12px; align-items: start; }
    .seq-left .panel { margin-bottom: 0; }
}
@media (max-width: 1099px) {
    /* stacked: keep the preview pinned but small */
    #previewPanel { padding: 8px 10px; }
    #previewPanel .pv-tip, #previewPanel .panel-head h2 { display: none; }
    #previewPanel .viewer-wrap { max-width: min(100%, 34vh * 16 / 9); margin: 0 auto; }
    #previewPanel .preview-opts { font-size: 12px; }
}
.viewer-wrap { position: relative; }
#viewer { cursor: crosshair; }
.pv-tip { margin-top: 2px; }
.pv-pop {
    position: absolute; z-index: 4; background: var(--surface); color: var(--text); border: 1px solid var(--line);
    border-radius: 9px; padding: 10px 12px; box-shadow: 0 10px 28px rgba(0,0,0,.35); font-size: 13px; max-height: 70%; overflow: auto;
}
.pv-pop h4 { margin: 0 24px 2px 0; font-size: 14px; }
.pv-pop p { margin: 4px 0; }
.pv-pop .pop-x { position: absolute; top: 4px; right: 6px; background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; }
.pv-pop ul { margin: 4px 0; padding-left: 18px; }
.pop-btns { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- compact rows, solo / mute, loop ---------- */
.plan-row { gap: 4px; }
.row-line { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.row-line .rtw { background: none; border: 0; color: var(--muted); cursor: pointer; width: 16px; padding: 0; }
.rl-text { flex: 1; cursor: pointer; overflow-wrap: anywhere; }
.rl-sw { display: flex; gap: 2px; }
.rl-sw i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line); }
.row-detail { padding: 6px 0 2px 22px; display: flex; flex-direction: column; gap: 6px; }
.plan-row.dim .row-line { opacity: .45; }
.plan-row:hover { background: color-mix(in srgb, rgb(80,220,255) 7%, transparent); border-radius: 6px; }
.btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sec-card .loop.on { animation: pulse-ring 1.6s ease-in-out infinite; }
@keyframes pulse-ring { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } }

/* ---------- colour scheme editor ---------- */
.scheme-dlg { width: min(720px, calc(100vw - 32px)); }
.scheme-list { padding: 10px 16px; overflow: auto; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.scheme-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.scheme-row .sname { font: inherit; font-size: 13px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; width: 150px; }
.idea-bar select { max-width: 170px; }

/* ---------- project banner ---------- */
.proj-banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
    margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--line);
    background: var(--surface); border-left: 4px solid var(--wave); font-size: 14px;
    /* stays in view under the song bar, so a question about a project being opened
       is seen even when the page is scrolled down to the plan */
    position: sticky; top: calc(var(--stick-top, 0px) - 4px); z-index: 6;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    animation: banner-in .35s ease-out;
}
@keyframes banner-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.proj-banner.ask { border-left-color: var(--accent); }
.rand-all { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0 10px; padding: 8px 12px; border: 1px dashed var(--accent); border-radius: var(--radius); }
.own-cols { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.own-cols .clr-cols { padding: 0 2px; }
.proj-banner.ok { border-left-color: var(--good); }
.proj-banner.error { border-left-color: var(--bad); }
.proj-banner code { word-break: break-all; }
/* show panel, once a show is loaded: one line plus "choose a different folder" */
#showPanel.loaded { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 14px; }
#showPanel.loaded h2, #showPanel.loaded .panel-note, #showPanel.loaded #reuseShow { display: none; }
#showPanel.loaded .btnrow { margin: 0; order: 2; }
#showPanel.loaded .btnrow .btn { padding: 3px 10px; font-size: 13px; }
#showPanel.loaded #showStatus { margin: 0; order: 1; flex: 1; font-size: 13px; }
#toStart { padding: 6px 10px; }
/* ---------- change colours ---------- */
.recolour-dlg { width: min(640px, calc(100vw - 32px)); }
.recolour-body { padding: 8px 16px; overflow: auto; display: flex; flex-direction: column; gap: 6px; min-height: 0; font-size: 13px; }
.recolour-body h3 { margin: 6px 0 0; font-size: 13px; }
.recolour-schemes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px; }
.rc-scheme { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.rc-scheme.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.rc-scheme span:first-of-type { flex: 1; }
.rc-list { max-height: 180px; overflow: auto; }
/* ---------- prop mix ---------- */
.mix-dlg { width: min(1100px, calc(100vw - 32px)); }
.mix-wrap { overflow: auto; padding: 8px 16px; min-height: 0; }
.mix-table { border-collapse: collapse; font-size: 13px; }
.mix-table th, .mix-table td { padding: 3px 5px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.mix-table thead th { position: sticky; top: 0; background: var(--surface); font-weight: 600; }
.mix-prop { font-weight: 600; }
.mix-prop .muted { display: block; font-weight: 400; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.mix-sel { font: inherit; font-size: 12px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 2px 4px; }
.mix-sel.inherit { color: var(--muted); }
.mix-sel.lv-never { background: color-mix(in srgb, var(--bad) 22%, var(--bg)); }
.mix-sel.lv-less { background: color-mix(in srgb, var(--ok) 18%, var(--bg)); }
.mix-sel.lv-more { background: color-mix(in srgb, var(--good) 20%, var(--bg)); }
.mix-sel.lv-always { background: color-mix(in srgb, var(--good) 42%, var(--bg)); font-weight: 600; }
.mix-sel.inherit.lv-never, .mix-sel.inherit.lv-less, .mix-sel.inherit.lv-more, .mix-sel.inherit.lv-always { opacity: .6; }

/* ---------- transport strip ---------- */
.transport-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font-size: 13px; }
.t-speed { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.t-speed select { font: inherit; font-size: 13px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; }
.t-beat { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; min-width: 120px; }
.t-beat i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); transition: background .08s; }
.t-beat i.on { background: var(--wave); }
.t-beat i.down { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.t-sec { font-weight: 600; margin-left: auto; }

/* ---------- effect grid ---------- */
/* a fixed height, so moving into a part with more or fewer rows never shifts the preview */
.grid-wrap { position: relative; width: 100%; height: clamp(160px, 42vh, 460px); overflow-y: auto; overflow-x: hidden; border-radius: 6px; background: var(--surface); }
#gridPanel .panel-head { flex-wrap: nowrap; }
#gridPanel .panel-head h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#gridPanel .panel-head .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#pvInfo, .t-sec { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#fxGrid { display: block; }
.grid-tip { position: absolute; z-index: 2; pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.25); width: 180px; }
.plan-row.flash { animation: flash-row 1.2s ease-out; }
@keyframes flash-row { 0%, 30% { background: color-mix(in srgb, var(--playhead) 35%, transparent); } 100% { background: transparent; } }
@media (min-width: 1100px) {
    /* the pinned column can scroll on its own if preview + grid are taller than the window */
    .seq-left { max-height: calc(100vh - var(--stick-top) - 8px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
}
@media (max-width: 1099px) { #gridPanel { display: none !important; } }

/* fit with the music */
.fit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 6px 0 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.fit .fit-score { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.fit .fit-part { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.fit .meter { width: 54px; }
.fit .meter.low span { background: var(--bad); }
.fit details { flex-basis: 100%; }
.fit details summary { cursor: pointer; color: var(--muted); }
.fit table { border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
.fit td, .fit th { padding: 2px 10px 2px 0; text-align: left; font-weight: normal; }
.fit th { color: var(--muted); }

/* randomizing: which parts the next idea changes, which rows it keeps */
.idea-pick { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; cursor: pointer; opacity: .55; }
.sec-card.idea-on { border-left: 4px solid var(--wave); }
.sec-card.idea-on .idea-pick { opacity: 1; }
.row-line .rkeep { margin: 0; cursor: pointer; }
.plan-row.kept .rl-text::before { content: '🔒 '; }
.plan-row.kept .rl-text b { color: var(--wave); }

/* site footer */
.site-foot { max-width: 1100px; margin: 24px auto 32px; padding: 0 16px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.site-foot p { margin: 0 0 6px; }
.site-foot a { color: inherit; }

/* help: header links, welcome strip, guided tour */
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; max-width: 1248px; margin: 0 auto; }
.topbar-row h1 { margin: 0; }
.help-links { display: flex; gap: 6px; }
.help-links a.btn { text-decoration: none; }
.tour-welcome { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--wave); border-radius: 10px; background: color-mix(in srgb, var(--wave) 8%, var(--surface)); font-size: 14px; }
.tour-welcome a.btn { text-decoration: none; }
.tour-box { position: fixed; z-index: 1000; border-radius: 10px; box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgba(0, 0, 0, .45); pointer-events: none; transition: all .18s ease; }
.tour-tip { position: fixed; z-index: 1001; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-size: 14px; line-height: 1.5; }
.tour-tip.centre { box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45), 0 10px 30px rgba(0, 0, 0, .35); }
.tour-tip h3 { margin: 2px 0 6px; font-size: 16px; }
.tour-tip p { margin: 0 0 8px; }
.tour-step { font-size: 12px; color: var(--muted); }
.tour-need { color: var(--muted); font-style: italic; }
.tour-btns { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.tour-btns span { display: flex; gap: 6px; }

/* theme switch */
.theme-sel select { font: inherit; font-size: 12.5px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* projects: switcher, recent list on the start screen, save-first dialog */
.proj-menu-wrap { position: relative; display: inline-block; }
.proj-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 6px; }
.pm-head { font-size: 11.5px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 8px 8px 4px; }
.pm-empty { padding: 0 8px 6px; margin: 0; }
.pm-row { display: flex; align-items: stretch; border-radius: 7px; }
.pm-row:hover { background: var(--lane); }
.pm-row.current { box-shadow: inset 3px 0 0 var(--accent); }
.pm-open { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; background: none; border: 0; color: var(--text); font: inherit; padding: 6px 8px; cursor: pointer; min-width: 0; }
.pm-open b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pm-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 16px; padding: 0 10px; }
.pm-x:hover { color: var(--bad); }
.pm-foot { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 6px 4px; border-top: 1px solid var(--line); margin-top: 6px; }
.recent-start { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.leave-dlg { max-width: 440px; }

/* the plan's controls, in labelled groups */
.ctl-group { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 0 0 10px; background: color-mix(in srgb, var(--lane) 40%, transparent); }
.ctl-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ctl-head h3 { margin: 0; font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ctl-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ctl-group select { font: inherit; font-size: 13px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; max-width: 200px; }
.ctl-group label:not(.chk) { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ctl-more { margin-top: 8px; }
.ctl-more > summary { cursor: pointer; font-size: 13px; color: var(--muted); user-select: none; }
.ctl-more[open] > summary { margin-bottom: 6px; }
.ctl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 16px; }
.ctl-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ctl-col h4 { margin: 2px 0 2px; font-size: 12.5px; font-weight: 650; }
.ctl-col label:not(.chk) { justify-content: space-between; width: 100%; }
.hint { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; margin-top: 1px; }
.ctl-col > .hint { margin: -4px 0 2px; }
.chk.opt { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; }
.chk.opt input { margin-top: 3px; }
.ctl-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 10px; }
.only-now-note { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--muted); margin: 0 0 8px; }

/* Discord link */
.btn.discord { background: #5865F2; border-color: #5865F2; color: #fff; text-decoration: none; }
.btn.discord:hover { filter: brightness(1.08); }

/* ---------- start screen ---------- */
.drop { position: relative; overflow: hidden; text-align: center; border: 1px solid var(--line); border-radius: 16px; padding: 64px 24px 26px;
    background: radial-gradient(ellipse 70% 90% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
                radial-gradient(ellipse 50% 70% at 85% 100%, color-mix(in srgb, var(--wave) 10%, transparent), transparent 70%), var(--surface);
    box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.08); transition: border-color .15s, box-shadow .15s; }
.drop-lights { position: absolute; left: 0; right: 0; top: 0; height: 44px; pointer-events: none; }
.drop-lights .wire { position: absolute; inset: 0 0 auto 0; width: 100%; height: 30px; }
.drop-lights .wire path { fill: none; stroke: color-mix(in srgb, var(--text) 35%, transparent); stroke-width: 1.5; }
.bulb { position: absolute; width: 9px; height: 13px; margin-left: -4.5px; border-radius: 45% 45% 50% 50% / 40% 40% 60% 60%; background: var(--c); box-shadow: 0 0 10px 2px var(--c), 0 0 22px 4px color-mix(in srgb, var(--c) 45%, transparent); animation: twinkle 2.6s ease-in-out infinite; }
.bulb::before { content: ''; position: absolute; left: 2px; top: -4px; width: 5px; height: 5px; border-radius: 1px; background: color-mix(in srgb, var(--text) 45%, #000); }
.bulb.r { --c: #ff3b3b; } .bulb.g { --c: #2bdc5a; } .bulb.y { --c: #ffc93c; } .bulb.b { --c: #4a8dff; } .bulb.w { --c: #fff3d6; }
@keyframes twinkle { 0%, 100% { opacity: 1; filter: brightness(1.1); } 50% { opacity: .35; filter: brightness(.7); } }
@media (prefers-reduced-motion: reduce) { .bulb { animation: none; } }
.drop-title { font-size: clamp(22px, 3vw, 30px); font-weight: 750; letter-spacing: -.01em; margin: 0 0 6px; }
.drop-sub { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.drop-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.btn.big { font-size: 15px; padding: 10px 20px; border-radius: 10px; }
.drop .recent-start { justify-content: center; margin: 0 0 14px; }
.drop-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; gap: 12px; padding: 0; margin: 8px auto 14px; text-align: left; }
.drop-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--surface) 70%, transparent); font-size: 13px; color: var(--muted); }
.drop-steps li span { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; background: var(--accent); }
.drop-steps li:nth-child(2) span { background: #2bb35a; } .drop-steps li:nth-child(3) span { background: var(--wave); }
.drop-steps b { display: block; color: var(--text); font-size: 13.5px; }
.drop .drop-hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.drop-over-msg { display: none; }
.drop.over { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 8px 30px color-mix(in srgb, var(--accent) 25%, transparent); }
.drop.over .drop-main { opacity: .25; }
.drop.over .drop-over-msg { display: grid; place-items: center; position: absolute; inset: 0; font-size: 22px; font-weight: 700; color: var(--accent); }
@media (max-width: 720px) { .drop-steps { grid-template-columns: 1fr; max-width: 320px; } .drop { padding-top: 56px; } }
/* once a song is open, the start area shrinks to one line */
.drop.compact { padding: 8px 16px; border-radius: 10px; box-shadow: none; background: var(--surface); }
.drop.compact .drop-lights, .drop.compact .drop-sub, .drop.compact .drop-steps, .drop.compact .drop-hint, .drop.compact .recent-start { display: none !important; }
.drop.compact .drop-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; }
.drop.compact .drop-title { font-size: 14px; font-weight: 600; margin: 0; }
.drop.compact .drop-actions { margin: 0; gap: 6px; }
.drop.compact .btn.big { font-size: 12.5px; padding: 4px 10px; border-radius: 7px; }

/* the save bar, near the top of Make a sequence */
.save-bar { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 60%); padding-top: 12px; padding-bottom: 12px; }
.save-bar-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; }
.save-bar-title { flex: 1 1 300px; min-width: 0; }
.save-bar-title h2 { margin: 0 0 2px; font-size: 16px; }
.save-path { flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.save-path input { font: inherit; font-size: 13px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; width: 100%; }
.save-bar #xsqStatus:empty { display: none; }
.drop-title .t-short { display: none; }
.drop.compact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; }
.drop.compact .t-full { display: none; }
.drop.compact .t-short { display: inline; }
.drop.compact .status { margin: 0; font-size: 12.5px; }

/* the plan's control boxes: fold, and (unlocked) move */
.ctl-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; align-items: start; }
.ctl-stack > .ctl-group.wide { grid-column: 1 / -1; }
@media (max-width: 1100px) { .ctl-stack { grid-template-columns: 1fr; } }
.ctl-group .ctl-head { flex-wrap: nowrap; align-items: center; }
.ctl-group .ctl-head > .muted { flex: 1; min-width: 0; }
.ctl-fold { background: none; border: 0; color: var(--muted); cursor: pointer; width: 18px; padding: 0; font-size: 13px; flex: none; }
.ctl-group.min { padding-bottom: 8px; }
.ctl-group.min > .ctl-head { margin-bottom: 0; }
.ctl-group.min > .ctl-body, .ctl-group.min > .ctl-head > .muted { display: none; }
.ctl-group .panel-note { margin: 0; }
.ctl-move { display: none; margin-left: auto; gap: 2px; align-items: center; flex: none; }
.ctl-move button { background: var(--surface); border: 1px solid var(--line); color: var(--text); border-radius: 5px; width: 24px; height: 22px; padding: 0; cursor: pointer; font-size: 12px; }
.ctl-grip { cursor: grab; color: var(--muted); font-size: 18px; line-height: 1; padding: 0 2px 0 6px; user-select: none; touch-action: none; }
.ctl-stack.unlocked .ctl-move { display: inline-flex; }
.ctl-stack.unlocked > .ctl-group { outline: 2px dashed color-mix(in srgb, var(--wave) 55%, transparent); outline-offset: -2px; }
.ctl-group.dragging { opacity: .45; }
.ctl-group.drop-before { box-shadow: inset 0 3px 0 var(--accent); }
.ctl-group.drop-after { box-shadow: inset 0 -3px 0 var(--accent); }
.ctl-stack:not(.wide-rows) .ctl-group:not(.wide).drop-before { box-shadow: inset 3px 0 0 var(--accent), inset 0 3px 0 var(--accent); }
#layoutLock.on { border-color: var(--wave); color: var(--wave); }

/* how a part comes in */
.tr-chip { font-size: 11px; color: var(--wave); border: 1px solid color-mix(in srgb, var(--wave) 45%, transparent); border-radius: 999px; padding: 0 7px; white-space: nowrap; }
.tr-pick { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.tr-pick select { font: inherit; font-size: 12.5px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }

/* props the plan names but the show doesn't have */
.missing-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--ok) 60%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--ok) 10%, transparent); font-size: 13px; }
#missingTable select { max-width: 320px; }

/* the steps from song to xLights */
.steps-bar { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; padding: 0; counter-reset: none; }
.steps-bar li { display: flex; align-items: center; }
.steps-bar li + li::before { content: '›'; color: var(--muted); margin: 0 4px 0 2px; }
.steps-bar button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; color: var(--muted); background: none; border: 1px solid transparent; border-radius: 999px; padding: 3px 10px 3px 4px; cursor: pointer; }
.steps-bar button:hover { border-color: var(--line); color: var(--text); }
.steps-bar .n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; background: var(--lane); color: var(--muted); }
.steps-bar em { font-style: normal; font-size: 10.5px; opacity: .8; }
.steps-bar li.done .n { background: var(--good); color: #fff; }
.steps-bar li.done button { color: var(--text); }
.steps-bar li.next button { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 600; }
.steps-bar li.next .n { background: var(--accent); color: #fff; }

/* File menu and project title */
.file-menu { width: min(340px, calc(100vw - 32px)); padding: 6px; }
.fm-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: none; border: 0; border-radius: 7px; color: var(--text); font: inherit; font-size: 13.5px; padding: 7px 10px; cursor: pointer; text-align: left; }
.fm-item:hover, .fm-item:focus-visible { background: var(--lane); outline: none; }
.fm-item kbd { font: 11px ui-monospace, monospace; color: var(--muted); }
.fm-check { cursor: pointer; }
.file-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.file-menu #projMenuList .pm-foot { border-top: 0; margin-top: 0; padding-top: 2px; }
.proj-title { font-weight: 600; font-size: 13px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-title.dirty { color: var(--accent); }
.export-dlg { max-width: 560px; }

/* the preview in its own window */
.popout-body { margin: 0; padding: 10px; background: var(--bg); }
.popout-body #previewPanel { margin: 0; }
.popped-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; }

.file-menu #pmOther { display: none; }

.popout-body #previewPanel .viewer-wrap { max-width: none; display: flex; justify-content: center; background: none; }
.popout-body #previewPanel .pv-tip, .popout-body #previewPanel .panel-head h2 { display: revert; }

/* moving heads box */
.heads-parts { max-height: 180px; overflow: auto; width: 100%; }
#headsBox input[type=range] { width: 130px; }

/* what's new */
#whatsNewBtn { position: relative; }
#whatsNewBtn.unseen::after { content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.whatsnew-dlg { max-width: 720px; }
.wn-list { overflow: auto; padding: 4px 18px 12px; }
.wn-release { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.wn-release:first-child { border-top: 0; }
.wn-release h3 { margin: 0 0 6px; font-size: 15px; }
.wn-release ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.wn-release li { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; line-height: 1.45; }
.wn-tag { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 1px 7px; color: #fff; background: var(--wave); min-width: 52px; text-align: center; }
.wn-tag.new { background: var(--accent); }
.wn-tag.better { background: var(--wave); }
.wn-tag.fixed { background: var(--good); }
.wn-release:not(.latest) { opacity: .92; }

/* ---------- Effects for props ---------- */
.fxp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0; }
.fxp-bar input[type=search] { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); min-width: 200px; }
.fxp-dirty { color: var(--ok); font-weight: 600; font-size: 13px; }
.seg { display: inline-flex; }
.seg .btn { border-radius: 0; }
.seg .btn:first-child { border-radius: 7px 0 0 7px; }
.seg .btn:last-child { border-radius: 0 7px 7px 0; margin-left: -1px; }
.seg .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.fxp-wrap { overflow: auto; max-height: 72vh; border: 1px solid var(--line); border-radius: 8px; }
.fxp-table { border-collapse: separate; border-spacing: 0; font-size: 13px; }
.fxp-table th, .fxp-table td { border-bottom: 1px solid var(--line); padding: 2px 3px; white-space: nowrap; }
.fxp-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); vertical-align: bottom; }
.fxp-table th.fxp-eff { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; font-weight: 500; min-width: 210px; }
.fxp-table thead th.fxp-eff { z-index: 3; }
.fxp-col { text-align: center; font-weight: 600; min-width: 64px; }
.fxp-col > span:first-child { display: block; white-space: normal; line-height: 1.15; max-width: 84px; margin: 0 auto 3px; }
.fxp-col.notmine { color: var(--muted); font-weight: 400; }
.fxp-colbtns, .fxp-rowbtns { display: inline-flex; gap: 2px; }
.fxp-colbtns .btn, .fxp-rowbtns .btn { font-size: 11px; line-height: 17px; padding: 0 4px; opacity: .65; }
.fxp-colbtns .btn:hover, .fxp-rowbtns .btn:hover { opacity: 1; }
.fxp-rowbtns { float: right; margin-left: 8px; visibility: hidden; }
.fxp-table tr:hover .fxp-rowbtns, .fxp-rowbtns:focus-within { visibility: visible; }
.fxp-cat th { text-align: left; background: var(--lane); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 5px 6px; position: sticky; left: 0; }
.fxp-table td { text-align: center; background: color-mix(in srgb, var(--accent) var(--share, 0%), transparent); }
.fxp-table td:not(.on) { background: none; }
.fxw { width: 46px; font: inherit; font-size: 12px; text-align: center; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text); padding: 2px 1px; -moz-appearance: textfield; }
.fxw::-webkit-inner-spin-button, .fxw::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fxw:hover, .fxw:focus { border-color: var(--line); background: var(--bg); }
td.on .fxw { font-weight: 600; }
td.chg .fxw { box-shadow: inset 0 -2px 0 var(--ok); }
.fxp-hand ul { columns: 2 320px; padding-left: 18px; margin: 6px 0; }
.fxp-hand li { margin: 2px 0; }

.file-dlg .file-list { max-height: 60vh; overflow: auto; display: flex; flex-direction: column; }
.file-item { font: inherit; font-size: 13px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text); padding: 5px 8px; cursor: pointer; }
.file-item:hover, .file-item:focus { background: var(--lane); }
.opts .wide-opt input[type=text] { min-width: 220px; }

.fxp-build { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0 12px; background: var(--lane); }
.fxp-build > summary { cursor: pointer; }
.fxp-pickcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 8px; }
.fxp-pickcols h4 { margin: 4px 0; }
.fxp-picklist { max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.fxp-pickcols input[type=search] { font: inherit; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); width: 100%; box-sizing: border-box; }
#fxpProfName { font: inherit; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); min-width: 220px; }
.fxp-propcol { background: color-mix(in srgb, var(--accent) 10%, var(--surface)) !important; }

.fxp-picklist label.off { opacity: .55; }
.fxp-pickcols input[type=search] { margin-bottom: 4px; }

/* one row: palette box, its own randomize / back, and the rows filter */
.row-line .rl-sw.pal { background: none; border: 1px solid transparent; border-radius: 5px; padding: 3px; cursor: pointer; }
.row-line .rl-sw.pal:hover, .row-line .rl-sw.pal:focus-visible { border-color: var(--line); background: var(--lane); }
.row-line .rrnd, .row-line .rback { padding-left: 6px; padding-right: 6px; }
.row-find { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; }
.row-find input { flex: 1; max-width: 320px; min-width: 0; }
.pal-pop { position: absolute; z-index: 60; width: 272px; max-width: calc(100vw - 16px); background: var(--surface); color: var(--text);
    border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px 10px; box-shadow: 0 8px 24px rgba(0,0,0,.22); font-size: 13px;
    display: flex; flex-direction: column; gap: 6px; }
.pal-head { display: flex; justify-content: space-between; align-items: center; }
.pal-slots { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pal-slot { width: 24px; height: 24px; border-radius: 5px; border: 1px solid var(--line); cursor: pointer; padding: 0; color: var(--muted); background: var(--lane); }
.pal-slot.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.pal-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.pal-c { aspect-ratio: 1; border-radius: 4px; border: 1px solid var(--line); cursor: pointer; padding: 0; }
.pal-c:hover, .pal-c:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.pal-schemes { display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow: auto; }
.pal-scheme { display: flex; align-items: center; gap: 8px; text-align: left; background: none; border: 1px solid transparent; border-radius: 6px; padding: 3px 5px; cursor: pointer; color: var(--text); font: inherit; }
.pal-scheme:hover, .pal-scheme:focus-visible { background: var(--lane); }
.pal-scheme.on { border-color: var(--accent); }

/* a part's brightness and loudness */
.part-levels { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; margin: 6px 0 2px; }
.part-levels label { display: inline-flex; align-items: center; gap: 6px; }
.part-levels input[type=range] { width: 130px; }
.part-levels .pv { min-width: 4ch; color: var(--muted); font-variant-numeric: tabular-nums; }
.meter.own > span { background: var(--playhead); }

/* typing words over the timeline */
.word-box { position: absolute; z-index: 60; display: flex; flex-direction: column; gap: 3px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.word-box input { width: 260px; max-width: calc(100vw - 40px); font: inherit; }