/* 작곡실 퍼포먼스 화면: a track's sounds as a stage keyboard shows them — a dark panel with an LCD line,
   the parts and their keys on the left, category search / part / effects / mix pages in the middle and
   the control panel (super knob, eight knobs, scenes) along the bottom. The same dark plate in both themes,
   so this file is kept out of the generated dark twins (scripts/build-dark-theme.mjs); its selectors
   name [data-theme] to stay above those twins' plain button and select rules. */
:root[data-theme] .perf-dialog{--pd-bg:#0b0d10;--pd-panel:#11151a;--pd-raised:#161b21;--pd-line:#232a33;--pd-line2:#2f3742;--pd-ink:#e8edf2;--pd-muted:#9aa3ad;--pd-faint:#6f7985;--pd-mint:#36e2b4;--pd-amber:#ffb547;--pd-violet:#b77dff;
 width:min(1180px,calc(100vw - 16px));height:min(92dvh,860px);max-width:none;max-height:none;padding:0;border:1px solid var(--pd-line);border-radius:18px;background:var(--pd-bg);color:var(--pd-ink);box-shadow:0 30px 80px #000a;overflow:hidden}
:root[data-theme] .perf-dialog::backdrop{background:#05070acc;backdrop-filter:blur(3px)}
:root[data-theme] .perf-screen{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;font-variant-numeric:tabular-nums}
:root[data-theme] .perf-dialog button{font:inherit;color:inherit;cursor:pointer}
:root[data-theme] .perf-dialog :focus-visible{outline:2px solid var(--pd-mint);outline-offset:2px}

/* Head: the track's colour as a lamp, its name, and the LCD line with the part in view */
:root[data-theme] .perf-head{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--pd-line);background:linear-gradient(#151a20,#0d1014)}
:root[data-theme] .perf-led{width:10px;height:10px;flex:none;border-radius:50%;background:var(--track,var(--pd-mint));box-shadow:0 0 10px var(--track,var(--pd-mint))}
:root[data-theme] .perf-name{display:grid;min-width:0}
:root[data-theme] .perf-name small{font-size:10px;font-weight:700;letter-spacing:.24em;color:var(--pd-faint)}
:root[data-theme] .perf-name h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] .perf-lcd{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;border:1px solid #1b2b29;border-radius:9px;background:#04090a;box-shadow:inset 0 0 18px #36e2b412;font:600 13px/1.3 ui-monospace,'SF Mono',Consolas,monospace;color:#7ef5d0;text-shadow:0 0 8px #36e2b455}
:root[data-theme] .perf-now{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] .perf-load{flex:none;color:var(--pd-amber);text-shadow:0 0 8px #ffb54766}
:root[data-theme] .perf-close{flex:none;width:38px;height:38px;border:1px solid var(--pd-line2);border-radius:10px;background:var(--pd-panel);font-size:16px}
:root[data-theme] .perf-close:hover{background:var(--pd-raised)}

/* Body: parts on the left, pages in the middle */
:root[data-theme] .perf-main{display:grid;grid-template-columns:276px minmax(0,1fr);min-height:0}
:root[data-theme] .perf-side{display:flex;flex-direction:column;gap:12px;min-height:0;padding:12px;border-right:1px solid var(--pd-line);overflow:auto}
:root[data-theme] .perf-parts{display:grid;gap:6px}
:root[data-theme] .perf-parts button{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:6px;row-gap:1px;align-items:center;min-height:48px;padding:7px 10px 7px 12px;border:1px solid var(--pd-line);border-radius:10px;background:var(--pd-panel);text-align:left;line-height:1.3}
:root[data-theme] .perf-parts button::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--part,var(--pd-mint))}
:root[data-theme] .perf-parts button b{grid-row:span 2;font:800 13px ui-monospace,Consolas,monospace;color:var(--part,var(--pd-mint))}
:root[data-theme] .perf-parts button span{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] .perf-parts button small{font-size:11px;color:var(--pd-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] .perf-parts button:hover{background:var(--pd-raised)}
:root[data-theme] .perf-parts button[aria-selected=true]{border-color:var(--part);background:#182029;box-shadow:inset 0 0 0 1px var(--part),0 0 22px -10px var(--part)}
:root[data-theme] .perf-parts button.muted{opacity:.45}
:root[data-theme] .perf-parts .perf-add{display:flex;justify-content:center;min-height:40px;border-style:dashed;color:var(--pd-mint);font-weight:700}
:root[data-theme] .perf-parts .perf-add::before{display:none}
:root[data-theme] .perf-keys{padding:8px 8px 10px;border:1px solid var(--pd-line);border-radius:10px;background:repeating-linear-gradient(90deg,#0f1317 0 1.8%,#0b0e12 1.8% 3.6%)}
:root[data-theme] .km-scale{position:relative;height:14px;margin-bottom:2px}
:root[data-theme] .km-scale span{position:absolute;top:0;transform:translateX(-50%);font:600 9px ui-monospace,Consolas,monospace;color:var(--pd-faint)}
:root[data-theme] .km-row{position:relative;height:8px;margin-top:4px;border-radius:4px;background:#1a2028}
:root[data-theme] .km-row i{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--part);opacity:.45}
:root[data-theme] .km-row.on i{opacity:1;box-shadow:0 0 10px -1px var(--part)}
:root[data-theme] .km-row.muted i{opacity:.18}

:root[data-theme] .perf-center{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0}
:root[data-theme] .perf-tabs{display:flex;gap:4px;padding:10px 14px 0;border-bottom:1px solid var(--pd-line);overflow-x:auto;scrollbar-width:none}
:root[data-theme] .perf-tabs button{flex:none;min-height:40px;padding:8px 16px;border:0;border-radius:10px 10px 0 0;background:transparent;font-size:14px;font-weight:700;color:var(--pd-muted)}
:root[data-theme] .perf-tabs button:hover{color:var(--pd-ink)}
:root[data-theme] .perf-tabs button[aria-selected=true]{background:var(--pd-panel);color:#fff;box-shadow:inset 0 -2px 0 var(--pd-mint)}
:root[data-theme] .perf-pane{min-height:0;padding:14px;overflow:auto}

/* 소리 고르기: search, category tiles, sub-categories and the sounds */
:root[data-theme] .sound-search{width:100%;height:42px;margin-bottom:10px;padding:0 14px;border:1px solid var(--pd-line2);border-radius:10px;background:var(--pd-panel);color:var(--pd-ink);font:inherit;font-size:14px}
:root[data-theme] .sound-search::placeholder{color:var(--pd-faint)}
:root[data-theme] .cat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:6px}
:root[data-theme] .cat-tiles button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-height:50px;padding:6px 10px;border:1px solid var(--pd-line);border-top:3px solid var(--cat);border-radius:10px;background:var(--pd-panel);text-align:left}
:root[data-theme] .cat-tiles button span{font-size:13px;font-weight:800;line-height:1.25;word-break:keep-all}
:root[data-theme] .cat-tiles button small{font-size:11px;color:var(--pd-faint)}
:root[data-theme] .cat-tiles button:hover{background:var(--pd-raised)}
:root[data-theme] .cat-tiles button[aria-pressed=true]{border-color:var(--cat);background:color-mix(in srgb,var(--cat) 20%,var(--pd-panel));box-shadow:0 0 18px -8px var(--cat)}
:root[data-theme] .cat-tiles button[aria-pressed=true] small{color:var(--pd-ink)}
:root[data-theme] .cat-subs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 0}
:root[data-theme] .cat-subs:empty{display:none}
:root[data-theme] .cat-subs button{min-height:30px;padding:3px 12px;border:1px solid var(--pd-line2);border-radius:999px;background:transparent;font-size:12.5px;color:var(--pd-muted)}
:root[data-theme] .cat-subs button[aria-pressed=true]{border-color:var(--pd-mint);background:var(--pd-mint);color:#04120d;font-weight:700}
:root[data-theme] .sound-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;margin-top:12px}
:root[data-theme] .sound-list button{display:grid;gap:3px;min-height:52px;padding:8px 12px;border:1px solid var(--pd-line);border-left:3px solid var(--sound);border-radius:10px;background:var(--pd-panel);text-align:left}
:root[data-theme] .sound-list button:hover{background:var(--pd-raised)}
:root[data-theme] .sound-list button[aria-selected=true]{border-color:var(--pd-mint);border-left-color:var(--sound);background:#12201c;box-shadow:inset 0 0 0 1px var(--pd-mint)}
:root[data-theme] .sl-name{font-size:13.5px;font-weight:700;line-height:1.3;word-break:keep-all}
:root[data-theme] .sl-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--pd-muted);white-space:nowrap;overflow:hidden}
:root[data-theme] .sl-badge{flex:none;padding:1px 7px;border-radius:999px;font-size:10px;font-style:normal;font-weight:800;letter-spacing:.02em}
:root[data-theme] .sl-badge.rec{background:#36e2b424;color:#7ef5d0}
:root[data-theme] .sl-badge.orch{background:#ffb5472a;color:#ffd08a}
:root[data-theme] .sl-badge.gm{background:#8fa8ff26;color:#c0cdff}
:root[data-theme] .sl-badge.synth{background:#b77dff26;color:#d8bcff}
:root[data-theme] .sound-list .dialog-note,:root[data-theme] .perf-pane .dialog-note{margin:6px 0;font-size:13px;line-height:1.7;color:var(--pd-muted)}
:root[data-theme] .sound-about{min-height:1.4em;margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--pd-muted)}

/* 파트 설정 */
:root[data-theme] .part-settings{display:grid;gap:10px;max-width:640px}
:root[data-theme] .part-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px}
:root[data-theme] .part-row>span:first-child{min-width:72px;color:var(--pd-muted)}
:root[data-theme] .perf-dialog select{min-height:34px;padding:4px 8px;border:1px solid var(--pd-line2);border-radius:8px;background:var(--pd-panel);color:var(--pd-ink);font:inherit;font-size:13px}
:root[data-theme] .perf-dialog select option,:root[data-theme] .perf-dialog select optgroup{color:#111;background:#fff}
:root[data-theme] .part-row input[type=range]{flex:1;min-width:140px;accent-color:var(--pd-mint)}
:root[data-theme] .part-row output{min-width:4ch;text-align:right;color:var(--pd-muted)}
:root[data-theme] .perf-dialog .button{min-height:34px;padding:5px 14px;border:1px solid var(--pd-line2);border-radius:999px;background:var(--pd-raised);color:var(--pd-ink);font-size:13px;font-weight:600}
:root[data-theme] .perf-dialog .button:hover{border-color:var(--pd-mint)}
:root[data-theme] .perf-dialog .button[aria-pressed=false]{color:var(--pd-faint)}
:root[data-theme] .perf-dialog .quiet{min-height:32px;padding:4px 8px;border:0;background:none;color:var(--pd-muted);font-size:12.5px}
:root[data-theme] .perf-dialog .danger{color:#ff8a95}

/* 이펙트: two slots with their knobs */
:root[data-theme] .fx-slots{display:grid;gap:12px;max-width:760px}
:root[data-theme] .fx-slot{padding:12px 14px;border:1px solid var(--pd-line);border-radius:14px;background:var(--pd-panel)}
:root[data-theme] .fx-slot-head{display:flex;align-items:center;gap:10px}
:root[data-theme] .fx-slot-head b{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:8px;background:var(--pd-mint);color:#04120d;font-weight:900}
:root[data-theme] .fx-slot+.fx-slot .fx-slot-head b{background:var(--pd-amber);color:#1a1205}
:root[data-theme] .fx-slot-head select{flex:1;min-width:0}
:root[data-theme] .fx-knobs{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:14px}
:root[data-theme] .fx-hint{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--pd-muted)}

/* 믹스 */
:root[data-theme] #perf-tab-mix{max-width:640px}
:root[data-theme] #perf-tab-mix .slider-field{color:var(--pd-ink)}
:root[data-theme] #perf-tab-mix .slider-field input{accent-color:var(--pd-mint)}
:root[data-theme] #perf-tab-mix .slider-field output{color:var(--pd-muted)}
:root[data-theme] #perf-tab-mix .dialog-section{border-top:1px solid var(--pd-line)}
:root[data-theme] #perf-tab-mix .dialog-section h3{color:#fff}

/* Knobs: a dark cap in a lit ring, turned by dragging up and down */
:root[data-theme] .knob-cell{display:grid;justify-items:center;gap:3px;width:70px;min-width:0}
:root[data-theme] .knob{--turn:0;--knob:var(--pd-mint);position:relative;width:46px;height:46px;border-radius:50%;cursor:ns-resize;touch-action:none;background:conic-gradient(from 225deg,var(--knob) 0deg calc(var(--turn)*270deg),#2a313b calc(var(--turn)*270deg) 270deg,#0000 270deg)}
:root[data-theme] .knob::before{content:'';position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#434b56 0,#1b1f25 62%,#0b0d10 100%);box-shadow:0 2px 6px #000a,inset 0 1px 0 #ffffff24}
:root[data-theme] .knob i{position:absolute;left:50%;top:7px;width:2px;height:12px;margin-left:-1px;border-radius:2px;background:#fff;transform-origin:50% 16px;transform:rotate(calc(var(--turn)*270deg - 135deg))}
:root[data-theme] .knob.turning::before,:root[data-theme] .knob:hover::before{box-shadow:0 0 0 2px color-mix(in srgb,var(--knob) 55%,transparent),0 2px 6px #000a}
:root[data-theme] .knob-cell span{max-width:100%;font-size:11.5px;font-weight:600;color:#c4ccd5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme] .knob-cell output{font:600 11px ui-monospace,Consolas,monospace;color:#7ef5d0}
:root[data-theme] .knob-cell.mix .knob{--knob:var(--pd-amber)}
:root[data-theme] .knob-cell.mix output{color:#ffd08a}
:root[data-theme] .knob-cell.depth .knob{--knob:var(--pd-violet)}
:root[data-theme] .knob-cell.depth output{color:#d8bcff}

/* Control panel: super knob, the eight knobs, scenes */
:root[data-theme] .perf-panel{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr) auto;align-items:center;gap:18px;padding:12px 18px 14px;border-top:1px solid var(--pd-line);background:linear-gradient(#0f1216,#08090c)}
:root[data-theme] .perf-dialog .perf-knob{display:flex;align-items:center;gap:12px;min-width:0}
:root[data-theme] .perf-dialog .perf-knob[hidden]{display:none}
:root[data-theme] .perf-dialog .perf-knob strong{display:flex;align-items:baseline;gap:6px;font-size:13px;font-weight:800;color:var(--pd-amber)}
:root[data-theme] .perf-dialog .perf-knob output{font:600 12px ui-monospace,Consolas,monospace;color:var(--pd-ink)}
:root[data-theme] .perf-dialog .perf-knob-about{margin:3px 0 0;font-size:11.5px;line-height:1.45;color:var(--pd-muted)}
:root[data-theme] .perf-dialog .super-dial.big{width:72px;height:72px;background:conic-gradient(from 225deg,var(--pd-amber) 0deg calc(var(--turn)*270deg),#2a313b calc(var(--turn)*270deg) 270deg,#0000 270deg);filter:drop-shadow(0 0 calc(var(--turn)*14px) #ffb54766)}
:root[data-theme] .perf-dialog .super-dial.big i{background:#fff}
:root[data-theme] .perf-bank-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--pd-faint)}
:root[data-theme] .perf-chip{min-height:26px;padding:2px 10px;border:1px solid var(--pd-line2);border-radius:999px;background:transparent;font-size:11px;font-weight:700;letter-spacing:0;color:var(--pd-muted)}
:root[data-theme] #sk-edit[aria-pressed=true]{border-color:var(--pd-violet);background:var(--pd-violet);color:#14081f}
:root[data-theme] #scene-store[aria-pressed=true]{border-color:var(--pd-amber);background:var(--pd-amber);color:#1a1205}
:root[data-theme] .perf-knobs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
:root[data-theme] .perf-knobs .knob-cell{width:auto}
:root[data-theme] .perf-scenes{display:grid;grid-template-columns:repeat(4,40px);gap:6px}
:root[data-theme] .perf-scenes button{height:32px;border:1px solid var(--pd-line2);border-radius:8px;background:#141920;font:800 13px ui-monospace,Consolas,monospace;color:var(--pd-faint)}
:root[data-theme] .perf-scenes button.stored{color:var(--pd-ink);box-shadow:inset 0 -2px 0 var(--pd-amber)}
:root[data-theme] .perf-scenes button.on{border-color:var(--pd-amber);background:var(--pd-amber);color:#1a1205;box-shadow:0 0 14px -2px var(--pd-amber)}

@media (max-width:900px){
 :root[data-theme] .perf-panel{grid-template-columns:1fr auto;row-gap:12px}
 :root[data-theme] .perf-knob-bank{grid-column:1/-1;grid-row:2}
}
@media (max-width:760px){
 :root[data-theme] .perf-dialog{width:100vw;height:100dvh;margin:0;border:0;border-radius:0}
 :root[data-theme] .perf-head{padding:10px 12px;gap:10px}
 :root[data-theme] .perf-name h2{font-size:16px}
 :root[data-theme] .perf-lcd{padding:6px 10px;font-size:12px}
 :root[data-theme] .perf-main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
 :root[data-theme] .perf-side{padding:10px 12px;border-right:0;border-bottom:1px solid var(--pd-line);overflow:visible}
 :root[data-theme] .perf-parts{display:flex;overflow-x:auto;gap:6px;scrollbar-width:none;padding-bottom:2px}
 :root[data-theme] .perf-parts button{flex:none;width:158px}
 :root[data-theme] .perf-keys{display:none}
 :root[data-theme] .perf-tabs{padding:8px 12px 0}
 :root[data-theme] .perf-tabs button{padding:8px 12px;font-size:13.5px}
 :root[data-theme] .perf-pane{padding:12px}
 :root[data-theme] .cat-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
 :root[data-theme] .sound-list{grid-template-columns:minmax(0,1fr)}
 /* A compact panel on phones: the super knob beside the scenes, the eight knobs in one row below. */
 :root[data-theme] .perf-panel{grid-template-columns:auto minmax(0,1fr);padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:8px 12px}
 :root[data-theme] .perf-knob-bank{grid-column:1/-1;grid-row:2}
 :root[data-theme] .perf-dialog .perf-knob-about,:root[data-theme] .perf-dialog .perf-knob strong{display:none}
 :root[data-theme] .perf-dialog .super-dial.big{width:50px;height:50px}
 :root[data-theme] .perf-scenes{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 :root[data-theme] .perf-scenes button{height:28px}
 :root[data-theme] .perf-bank-head{margin-bottom:4px}
 :root[data-theme] .perf-knobs{grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}
 :root[data-theme] .perf-knobs .knob{width:34px;height:34px}
 :root[data-theme] .perf-knobs .knob::before{inset:3px}
 :root[data-theme] .perf-knobs .knob i{top:5px;height:8px;transform-origin:50% 12px}
 :root[data-theme] .perf-knobs .knob-cell span{font-size:10px}
 :root[data-theme] .perf-knobs .knob-cell output{font-size:9.5px;letter-spacing:-.02em}
 :root[data-theme] .fx-knobs{gap:10px}
}
@media (prefers-reduced-motion:reduce){.perf-dialog .super-dial.big{filter:none}}