/* ===================== STEP 2 — Audio, Pedaliera, Loop Station, Sala Prove ===================== */
#int-canvas { width: auto; max-width: 100%; max-height: 34vh; margin: 0 auto; background: transparent; }
.interior-side { max-height: 34vh; overflow: auto; }
.room-tools { margin-top: 12px; }
.tool-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.tool-tabs .tab { flex: none; padding: 8px 14px; font-weight: 600; }
.row-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.row-inline input:not([type=checkbox]), .row-inline select { width: auto; flex: 1; min-width: 120px; }
.row-inline input[type=number] { flex: none; width: 64px; min-width: 0; }
#lp-qopts { gap: 4px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.spacer { flex: 1; }
.btn.voice.on { background: rgba(57,217,138,.2); border-color: rgba(57,217,138,.6); }
.btn.shared { background: rgba(57,217,138,.18); border-color: rgba(57,217,138,.5); }

/* manopole */
.knob { display: inline-flex; flex-direction: column; align-items: center; user-select: none; min-width: 56px; }
.knob svg { cursor: ns-resize; touch-action: none; }
.knob-value { font-size: 10.5px; color: #fff; font-variant-numeric: tabular-nums; margin-top: -2px; }
.pedal .knob-label { color: rgba(255,255,255,.85); text-shadow: 0 1px 2px #000; }
.knob-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.knob-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }

/* meter */
.meter { display: inline-flex; align-items: center; gap: 4px; }
.meter canvas { border-radius: 3px; display: block; }
.meter-label { font-size: 10px; color: var(--muted); font-weight: 700; min-width: 22px; }

/* setup */
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-box:has(.setup-grid) { width: min(980px, 96vw); }
.flags { list-style: none; padding: 0; margin: 4px 0; font-size: 12.5px; }
.flags li { margin: 3px 0; }
#as-meters { display: flex; flex-direction: column; gap: 4px; }

/* rig */
.rig-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #14151f; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.rig-bar select, .rig-bar .rig-name { width: auto; min-width: 150px; }
.tuner { display: flex; gap: 12px; align-items: center; margin: 10px 0; background: #0b0c14; border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; }
.tuner-info { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.tuner canvas { border-radius: 6px; max-width: 100%; }
.pedalboard {
  display: flex; gap: 10px; overflow-x: auto; padding: 14px; border-radius: 12px;
  background: repeating-linear-gradient(90deg, #2a2b33 0 6px, #24252c 6px 12px); border: 3px solid #111; box-shadow: inset 0 0 30px rgba(0,0,0,.6);
}
.pedal {
  --pc: #444; position: relative; flex: none; width: 150px; padding: 10px 8px 12px; border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 85%, #fff 15%), var(--pc)); border: 2px solid rgba(0,0,0,.6);
  box-shadow: 0 6px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25); display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: filter .15s;
}
.pedal.wide { width: 300px; background: linear-gradient(180deg, #4a3622, #2b1d10); border-color: #c8a24a; }
.pedal.eq { width: 230px; }
.pedal.off { filter: saturate(.35) brightness(.75); }
.pedal-name { font-weight: 900; letter-spacing: 1.5px; font-size: 12px; color: #fff; text-shadow: 0 1px 2px #000; background: rgba(0,0,0,.35); padding: 2px 8px; border-radius: 4px; }
.pedal-knobs { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
.pedal-select { width: 100%; font-size: 12px; padding: 4px 6px; }
.pedal .check { color: #fff; margin: 0; }
.footswitch { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 3px solid #888; background: radial-gradient(circle at 40% 35%, #f0f0f0, #8a8a8a); cursor: pointer; margin-top: 4px; }
.footswitch .led { --led: #ff3b3b; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: #300; border: 1px solid #000; }
.footswitch.on .led { background: var(--led); box-shadow: 0 0 10px var(--led), 0 0 20px var(--led); }
.footswitch:active { transform: translateY(2px); }

/* scratchpad + looper */
.scratch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scratch-grid > .box:last-child { grid-column: 1 / -1; }
.rec-row { gap: 14px; }
.rec-btn { width: 54px; height: 54px; border-radius: 50%; border: 3px solid #555; background: #2a0d0d; color: #ff3b3b; font-size: 26px; cursor: pointer; }
.rec-btn.on { background: #ff3b3b; color: #fff; animation: recpulse 1s infinite; }
@keyframes recpulse { 50% { box-shadow: 0 0 0 8px rgba(255,59,59,.25); } }
.rec-time { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 90px; }
.loop-main { display: flex; gap: 14px; align-items: center; }
.loop-main canvas { cursor: pointer; flex: none; }
.loop-side { flex: 1; }
.layer { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.layer span { flex: 1; }
.mini-tabs { display: flex; gap: 6px; margin-bottom: 6px; }
.mini-tabs .tab { flex: none; padding: 5px 10px; font-size: 12.5px; }
.riff { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.riff-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.riff-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* jam */
.jam-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; }
.jam-grid > .setlist-box { grid-column: 1 / -1; }
.peers { display: flex; flex-direction: column; gap: 4px; }
.peer { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.peer-name { font-weight: 700; min-width: 120px; }
.peer-state { flex: 1; color: var(--muted); }
.beats { display: flex; gap: 10px; justify-content: center; margin: 8px 0 12px; }
.beat { width: 34px; height: 34px; border-radius: 50%; background: #1c1e36; border: 2px solid #3a3d5c; transition: background .05s; }
.beat.accent { border-color: #ffd23f; }
.beat.on { background: #39d98a; box-shadow: 0 0 16px #39d98a; }
.beat.accent.on { background: #ffd23f; box-shadow: 0 0 18px #ffd23f; }
.clock-ctrl input[type=number] { width: 80px; font-size: 20px; font-weight: 800; text-align: center; }
.song-now { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.song-card { flex: 1; text-align: center; background: #0d0e1c; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.song-title { font-size: 22px; font-weight: 800; }
.song-meta { color: #ffe9a8; font-weight: 600; }
.song-list { margin: 6px 0; padding-left: 22px; font-size: 13px; columns: 2; }
.song-list li { cursor: pointer; padding: 2px 0; }
.song-list li.cur { color: #39d98a; font-weight: 700; }
.qtable.se input, .qtable.se select { padding: 4px 6px; font-size: 12.5px; }

@media (max-width: 900px) {
  .setup-grid, .scratch-grid, .jam-grid { grid-template-columns: 1fr; }
}
.interior-side { overflow-x: hidden; }
@media (max-width: 1150px) { .topbar .brand { display: none; } }

/* ===================== STEP 3 — Drum Hub, Session Bot, Lyrics Lounge, Teleprompter ===================== */
.pad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 10px 0; }
.pad {
  --padc: #888; --vel: 1; height: 74px; border-radius: 10px; border: 2px solid rgba(0,0,0,.6); cursor: pointer; color: #fff; touch-action: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--padc) 55%, #1a1b26), #15161f); box-shadow: inset 0 -4px 0 rgba(0,0,0,.35);
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 8px; font-size: 12px; text-align: left;
}
.pad span { align-self: flex-end; font-weight: 800; opacity: .6; font-size: 13px; }
.pad.hit { animation: padhit .18s ease-out; }
@keyframes padhit { from { background: var(--padc); box-shadow: 0 0 calc(24px * var(--vel)) var(--padc); transform: scale(.97); } }
.sampler summary { cursor: pointer; font-weight: 600; }
.sampler-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 4px 16px; margin-top: 8px; }
.sampler-row, .map-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 3px 0; }
.sr-name { min-width: 110px; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.sr-name i, .seq-label i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.midi-map { columns: 2; margin: 10px 0; }
.midi-map .map-row { break-inside: avoid; }
.map-row .muted { flex: 1; }
.bpm-badge { background: #0d0e1c; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-weight: 700; color: #ffe9a8; }
.seq-grid { --steps: 16; display: grid; grid-template-columns: 110px repeat(var(--steps), minmax(14px, 1fr)); gap: 3px; margin-top: 8px; overflow-x: auto; }
.seq-label { font-size: 11.5px; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.seq-cell { --padc: #888; height: 24px; min-width: 14px; border-radius: 4px; border: 1px solid #2c2e45; background: #171828; cursor: pointer; padding: 0; }
.seq-cell.beat { background: #20223a; }
.seq-cell.v1 { background: color-mix(in srgb, var(--padc) 60%, #171828); }
.seq-cell.v2 { background: var(--padc); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.seq-cell.play { outline: 2px solid #fff; outline-offset: -1px; }
.mic-list { margin-top: 8px; }

.bot-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; }
.prog-input { font-size: 18px; font-weight: 700; letter-spacing: .5px; }
.chord-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip { background: #14152a; border: 1px solid #3a3d5c; border-radius: 99px; padding: 4px 11px; cursor: pointer; font-size: 12.5px; color: var(--text); }
.chip:hover { border-color: #fff; }
.chord-now { margin-top: 10px; font-size: 22px; min-height: 30px; }
.chord-now b { color: #39d98a; font-size: 30px; }
.bot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 8px; }
.bot-card { background: #10111f; border: 1px solid #3a3d5c; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.bot-card.off { opacity: .55; }
.bot-name { display: flex; flex-direction: column; font-size: 15px; }

.lyrics-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 12px; align-items: start; }
.lyrics-side { position: sticky; top: 0; }
.song-pick { list-style: none; padding: 0; margin: 8px 0 0; max-height: 50vh; overflow: auto; }
.song-pick li { padding: 7px 8px; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; border: 1px solid transparent; }
.song-pick li:hover { background: rgba(255,255,255,.04); }
.song-pick li.cur { border-color: var(--accent); background: rgba(255,77,141,.08); }
.song-title-in { font-size: 20px; font-weight: 800; }
.lyrics-head input[type=number] { width: 70px; }
.sec-card { --secc: #888; border: 1px solid var(--line); border-left: 5px solid var(--secc); border-radius: 10px; padding: 10px; margin: 10px 0; background: rgba(255,255,255,.025); transition: box-shadow .3s; }
.sec-card.remote-edit { box-shadow: 0 0 0 2px rgba(63,208,255,.45); }
.sec-card.locked textarea, .sec-card.locked input { opacity: .8; }
.sec-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.sec-head select, .sec-head input { width: auto; padding: 5px 7px; }
.sec-type { font-weight: 700; color: var(--secc); }
.sec-head .sec-bpm, .sec-head .sec-bpl { width: 62px; }
.sec-lock { color: #9fe8ff; }
.sec-chords { margin-bottom: 6px; font-family: Consolas, monospace; color: #ffe9a8; }
.sec-body { display: grid; grid-template-columns: 1fr 64px; gap: 6px; }
.sec-text { font-size: 15px; line-height: 1.6; font-family: inherit; resize: vertical; }
.sec-meter { font-size: 12px; line-height: 1.6; padding: 9px 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.sec-meter div { height: 24px; line-height: 24px; }
.rhyme { display: inline-block; min-width: 16px; text-align: center; border-radius: 4px; font-weight: 800; }
.rhyme.rA { background: #ff4d8d33; color: #ff9cc0; } .rhyme.rB { background: #3fd0ff33; color: #9fe8ff; } .rhyme.rC { background: #39d98a33; color: #a8ffd0; }
.rhyme.rD { background: #ffd23f33; color: #ffe9a8; } .rhyme.rE { background: #9b5de533; color: #d0b3ff; }

.teleprompter { position: relative; height: 46vh; overflow: hidden; background: #000; border-radius: 12px; margin-top: 8px; border: 1px solid #222;
  mask-image: linear-gradient(transparent, #000 18%, #000 80%, transparent); }
.teleprompter:fullscreen { height: 100vh; border-radius: 0; }
.teleprompter::after { content: ''; position: absolute; left: 0; right: 0; top: 35%; height: 2px; background: rgba(255,210,63,.35); }
.tp-inner { position: absolute; left: 0; right: 0; top: 0; padding: 0 6%; will-change: transform; }
.tp-sec { font-size: 14px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin: 26px 0 6px; }
.tp-secch { color: #ffe9a8; letter-spacing: 0; font-weight: 600; text-transform: none; margin-left: 8px; }
.tp-line { font-size: clamp(22px, 3.2vw, 44px); font-weight: 700; color: #6b6e88; margin: 4px 0 14px; transition: color .2s, transform .2s; transform-origin: left center; }
.tp-line.now { color: #fff; transform: scale(1.04); }
.tp-line.past { color: #34364a; }
.tp-text { line-height: 1.15; }
.tp-seg { display: inline-flex; flex-direction: column; white-space: pre; }
.tp-ch { font-size: .5em; color: #ffd23f; font-weight: 800; min-height: 1em; }
.tp-empty { color: #888; padding: 40px; text-align: center; }

@media (max-width: 900px) { .bot-grid, .lyrics-wrap { grid-template-columns: 1fr; } .midi-map { columns: 1; } }

/* ===================== STEP 4 — Studio di Registrazione multitraccia ===================== */
.btn.tiny { padding: 2px 7px; font-size: 11.5px; border-radius: 6px; }
.btn.on { background: rgba(255,210,63,.16); border-color: rgba(255,210,63,.55); }
.warn { color: var(--warn); }
.chip.warn { border-color: rgba(255,210,63,.6); color: #ffe9a8; }
.studio { display: flex; flex-direction: column; gap: 8px; }
.st-head { background: #12131f; border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; }
.st-head .st-proj { min-width: 260px; }
.st-rec { background: rgba(255,59,59,.14); border-color: rgba(255,59,59,.5); color: #ffc2c2; }
.st-queued { background: rgba(63,208,255,.15); border-color: rgba(63,208,255,.5); color: #bdefff; }
.st-mixing { background: rgba(167,139,250,.18); border-color: rgba(167,139,250,.6); color: #ddd3ff; animation: st-pulse 1.4s infinite; }
.st-mixed { background: rgba(57,217,138,.15); border-color: rgba(57,217,138,.5); color: #a8ffd0; }
.st-failed { background: rgba(255,107,107,.15); border-color: rgba(255,107,107,.5); color: #ffc2c2; }
@keyframes st-pulse { 50% { opacity: .55; } }

.st-transport { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: linear-gradient(#1a1b29, #11121b); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.tbtn { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #3a3d55; background: #1d1f2e; color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center; }
.tbtn:disabled { opacity: .4; cursor: default; }
.tbtn.rec { color: #ff3b3b; }
.tbtn.rec.active { background: #ff3b3b; color: #fff; border-color: #ff9b9b; box-shadow: 0 0 18px rgba(255,59,59,.7); animation: st-pulse 1s infinite; opacity: 1; }
.tbtn.play { color: #39d98a; }
.tbtn.play.active { background: #1e6b45; border-color: #39d98a; opacity: 1; }
.lcd { font-family: ui-monospace, Consolas, monospace; background: #050a06; color: #7dffb0; border: 1px solid #1d3b28; border-radius: 8px; padding: 4px 12px; min-width: 170px; text-shadow: 0 0 6px rgba(57,217,138,.6); }
.lcd.rec { color: #ff8a8a; border-color: #5a1d1d; text-shadow: 0 0 6px rgba(255,59,59,.6); }
.lcd.pre .lcd-pos { color: #ffd23f; }
.lcd-mode { font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.lcd-pos { font-size: 18px; font-weight: 800; }
.lcd-time { font-size: 12px; opacity: .8; }
.st-tcol { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.st-tcol label { margin: 0; display: flex; gap: 6px; align-items: center; }
.st-tcol input[type=number] { width: 60px; }
.st-tcol select { width: auto; }

.st-lanes-wrap { overflow-x: auto; overflow-y: visible; border: 1px solid var(--line); border-radius: 12px; background: #0d0e16; max-height: 52vh; overflow-y: auto; }
.st-lanes { position: relative; min-width: 100%; width: max-content; }
.st-row { display: flex; align-items: stretch; border-bottom: 1px solid rgba(255,255,255,.05); }
.st-th { --tc: #888; position: sticky; left: 0; z-index: 2; width: 236px; flex: none; box-sizing: border-box; background: #171826; border-right: 1px solid var(--line); border-left: 4px solid var(--tc); padding: 4px 6px; display: flex; flex-direction: column; gap: 3px; }
.st-ruler-head { justify-content: center; border-left-color: transparent; }
.st-th1 { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.st-name { cursor: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.st-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tc); flex: none; }
.st-th2 { display: flex; align-items: center; gap: 4px; }
.st-th2 select { width: 92px; padding: 2px 4px; font-size: 11.5px; }
.st-vol { width: 52px; flex: 1; accent-color: var(--tc); }
.armbtn { border: 1px solid #5a2a2a; background: #1d1012; color: #ff6b6b; border-radius: 6px; padding: 1px 7px; cursor: pointer; font-size: 13px; white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.armbtn.on { background: #ff3b3b; color: #fff; border-color: #ff9b9b; box-shadow: 0 0 10px rgba(255,59,59,.6); }
.armbtn.other { background: #2a1a1a; color: #ffb3b3; border-style: dashed; font-size: 11px; }
.msbtn { width: 22px; height: 22px; border-radius: 5px; border: 1px solid #3a3d55; background: #1d1f2e; color: #aaa; font-size: 11px; font-weight: 800; cursor: pointer; padding: 0; }
.msbtn.m { background: #3a6df0; color: #fff; }
.msbtn.s { background: #ffd23f; color: #222; }
.st-th3 { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; min-height: 20px; }
.takechip { border: 1px solid #3a3d55; background: #1d1f2e; color: #ccc; border-radius: 5px; font-size: 10.5px; padding: 1px 5px; cursor: pointer; }
.takechip.on { background: var(--tc); color: #111; border-color: #fff; font-weight: 800; }
.takechip.clip { box-shadow: inset 0 -2px 0 #ff3b3b; }
.st-ruler { display: block; cursor: pointer; }
.st-lane { display: block; }
.st-empty { padding: 30px; color: var(--muted); text-align: center; }
.st-add { margin: 6px 8px; position: sticky; left: 8px; }
.st-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #fff; box-shadow: 0 0 6px #fff; pointer-events: none; z-index: 1; }
.st-frommark { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-left: 2px dashed rgba(255,210,63,.75); pointer-events: none; z-index: 1; }
.st-foot { display: flex; flex-direction: column; gap: 4px; }
.st-foot label { margin: 0; color: var(--text); }
.st-uploads { display: flex; flex-direction: column; gap: 4px; }
.st-up { display: flex; align-items: center; gap: 8px; font-size: 12.5px; background: #12131f; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.st-up.error { border-color: rgba(255,107,107,.5); }
.st-bar { flex: 1; height: 6px; background: #22243a; border-radius: 3px; overflow: hidden; min-width: 80px; }
.st-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3fd0ff, #39d98a); transition: width .2s; }

.takes-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.take-row { display: grid; grid-template-columns: 54px 1.3fr 1.2fr auto auto; gap: 10px; align-items: center; background: #12131f; border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; }
.take-row.on { border-color: rgba(255,210,63,.6); background: rgba(255,210,63,.06); }
.take-row .nudge { display: flex; gap: 2px; align-items: center; white-space: nowrap; }
.take-row .nudge b { min-width: 54px; text-align: center; }
.take-actions { display: flex; gap: 3px; }
.modal-box:has(.takes-list) { width: min(980px, 96vw); }

.tp-float { position: fixed; right: 18px; bottom: 18px; width: min(620px, 46vw); z-index: 8; background: #07070c; border: 1px solid #ff3b3b; border-radius: 14px; padding: 8px 10px; box-shadow: 0 10px 50px rgba(0,0,0,.7), 0 0 24px rgba(255,59,59,.25); }
.tp-float-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.tp-float .teleprompter.compact { height: 34vh; }
.tp-float .row-inline select { max-width: 260px; }
.st-foot input[type=checkbox] { width: auto; display: inline-block; margin: 0 6px 0 0; vertical-align: middle; }
.st-th2 .armbtn { flex: none; max-width: 76px; font-size: 11.5px; padding: 1px 6px; }
.st-th2 select { width: 84px; }
.st-th2 .st-vol { min-width: 30px; }

/* ===================== STEP 5 — Control Room ===================== */
.mixer { display: flex; flex-direction: column; gap: 8px; }
.mx-top { background: linear-gradient(#1a1b29, #11121b); border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; }
.mx-top .mx-proj { min-width: 240px; max-width: 360px; }
.mx-top .mx-from { width: 60px; }
.mx-top label { margin: 0; display: flex; gap: 6px; align-items: center; }
.mx-tools { margin: 2px 0; }
.mx-summary { color: #ddd3ff; }
.mx-summary:empty { display: none; }
.ab { display: inline-flex; border: 1px solid #3a3d55; border-radius: 10px; overflow: hidden; }
.ab button { background: #1d1f2e; color: #bbb; border: 0; padding: 8px 14px; font-weight: 700; cursor: pointer; }
.ab button + button { border-left: 1px solid #3a3d55; }
.ab button.on[data-ab=ai] { background: #5b3df0; color: #fff; }
.ab button.on[data-ab=human] { background: #1e6b45; color: #fff; }
.ab button:disabled { opacity: .45; cursor: default; }

.mx-console { display: flex; gap: 6px; overflow-x: auto; padding: 8px; background: #0d0e16; border: 1px solid var(--line); border-radius: 12px; }
.mx-console.readonly .mx-strip > *:not(.mx-sname), .mx-detail.readonly .mx-panel { pointer-events: none; opacity: .82; }
.mx-console.readonly { box-shadow: inset 0 0 0 2px rgba(91,61,240,.6); }
.mx-strip { --tc: #888; flex: none; width: 100px; background: linear-gradient(#1b1c2b, #13141f); border: 1px solid #2a2c40; border-top: 4px solid var(--tc); border-radius: 9px; padding: 5px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.mx-strip.sel { border-color: var(--tc); box-shadow: 0 0 0 1px var(--tc), 0 0 16px rgba(255,255,255,.08); }
.mx-strip.empty { opacity: .55; }
.mx-strip.master { --tc: #ff4d8d; width: 112px; background: linear-gradient(#24182a, #150f1a); margin-left: auto; position: sticky; right: 0; }
.mx-sname { font-size: 11.5px; font-weight: 700; width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-row { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.mx-tg { border: 1px solid #3a3d55; background: #1d1f2e; color: #888; border-radius: 5px; font-size: 9.5px; font-weight: 800; padding: 2px 4px; cursor: pointer; letter-spacing: .3px; }
.mx-tg.on { background: #ffd23f; color: #222; border-color: #ffe9a8; }
.mx-tg.m.on { background: #3a6df0; color: #fff; }
.mx-tg.s.on { background: #ffd23f; color: #222; }
.mx-tg.m, .mx-tg.s { width: 26px; font-size: 11px; }
.mx-mini { border-radius: 5px; border: 1px solid #2a2c40; cursor: pointer; }
.mx-gr { width: 88px; height: 5px; background: #22243a; border-radius: 3px; overflow: hidden; display: flex; justify-content: flex-end; position: relative; }
.mx-gr i { display: block; height: 100%; background: #ff8a3d; width: 0; }
.mx-gr.lim i { background: #ff3b3b; }
.mx-gr.big { width: 100%; height: 14px; margin: 4px 0 8px; }
.mx-gr.big span { position: absolute; left: 6px; top: -1px; font-size: 10.5px; color: #fff; }
.mx-strip .knob-label { font-size: 9px; }
.mx-strip .knob-value { font-size: 9.5px; }
.mx-fadwrap { display: flex; gap: 3px; align-items: stretch; height: 150px; }
.mx-fader { writing-mode: vertical-lr; direction: rtl; width: 26px !important; min-width: 0 !important; height: 150px; padding: 0; accent-color: var(--tc); background: transparent; border: 0; }
.mx-vu { border-radius: 2px; }
.mx-fdb { font-size: 11px; font-variant-numeric: tabular-nums; color: #ddd; }

.mx-detail { background: #11121c; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.mx-detail:empty { display: none; }
.mx-dhead { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.mx-ainote { font-size: 12.5px; color: #ddd3ff; background: rgba(91,61,240,.14); border: 1px solid rgba(91,61,240,.45); border-radius: 8px; padding: 4px 10px; flex: 1; min-width: 240px; }
.mx-dgrid { display: grid; grid-template-columns: minmax(0, 640px) 1fr; gap: 12px; }
.mx-panel { background: #0d0e16; border: 1px solid #23253a; border-radius: 10px; padding: 8px; }
.mx-phead { display: flex; gap: 8px; align-items: center; margin: 6px 0 2px; }
.mx-phead select { width: auto; }
.mx-eq { width: 100%; height: auto; border-radius: 8px; cursor: crosshair; touch-action: none; display: block; }
.mx-bands { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 6px; }
.mx-band { --bc: #fff; display: flex; gap: 4px; align-items: center; font-size: 12px; }
.mx-band b { color: var(--bc); width: 12px; }
.mx-band select { width: 98px; padding: 3px; font-size: 11.5px; }
.mx-num { width: 62px !important; padding: 3px 4px !important; font-size: 11.5px; }
.mx-comprow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mx-tc { border-radius: 8px; border: 1px solid #23253a; }

.mx-analysis { display: grid; grid-template-columns: 1fr 220px; gap: 10px; }
.mx-fft { width: 100%; height: 170px; border-radius: 10px; border: 1px solid var(--line); display: block; }
.mx-lufs { background: #07080f; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: 3px; }
.lufs-big { font-size: 34px; font-weight: 800; color: #7dffb0; line-height: 1; display: flex; flex-direction: column; }
.lufs-big small { font-size: 11px; color: var(--muted); font-weight: 600; }
.lufs-big.hot { color: #ff6b6b; }
.lufs-big.low { color: #ffd23f; }
.lufs-big.ok { color: #39d98a; }
.lufs-row { display: flex; justify-content: space-between; font-size: 12.5px; }
.lufs-target { color: var(--muted); }
.mx-masters h4 { margin: 4px 0; }
.mx-masters { display: flex; flex-direction: column; gap: 4px; }
label.chk { display: flex; gap: 8px; align-items: center; color: var(--text); }
label.chk input { width: auto; }
.ex-bar { margin: 8px 0 4px; height: 8px; }
@media (max-width: 1000px) { .mx-dgrid, .mx-analysis { grid-template-columns: 1fr; } }
.mx-strip .knob { min-width: 42px; }
.mx-strip .mx-row:has(.knob) { gap: 0; }
.mx-bands { grid-template-columns: 1fr; }
.mx-band .mx-num { width: 70px !important; }
.mx-dgrid.master { grid-template-columns: 1fr; }
.mx-mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px; }
.mx-mod .knob-row { gap: 6px; }
.mx-mod select { width: auto; }
.mx-detail.readonly .mx-mods { pointer-events: none; opacity: .82; }

/* ===================== STEP 6 — Band HQ ===================== */
.hq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.hq .box { background: #12131f; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.hq h4 { margin: 2px 0 8px; }
.hq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.hq label { margin: 5px 0; }
.hq-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.hq-kinds .chip.on { background: #3fd0ff; color: #0b1020; border-color: #bdefff; font-weight: 700; }
.hq-hint { margin: 6px 0 2px; min-height: 1.2em; }
.hq-item { border-bottom: 1px solid var(--line); padding: 8px 0; }
.hq-ititle { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hq-isum { margin: 4px 0; color: #d9dbea; }
.hq-view { max-height: 76vh; overflow: auto; }
.modal-box:has(.hq-view) { width: min(860px, 96vw); }
.hq-view h4 { color: #ffb3d1; margin: 14px 0 6px; }
.hq-summary { background: rgba(255,77,141,.1); border-left: 3px solid var(--accent); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.hq-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0; }
.hq-table th { text-align: left; background: #2b1846; padding: 5px 7px; }
.hq-table td { border-bottom: 1px solid var(--line); padding: 5px 7px; vertical-align: top; }
.hq-chart { margin: 6px 0; }
.hq-bar { display: grid; grid-template-columns: 140px 1fr 90px; gap: 8px; align-items: center; font-size: 12.5px; margin: 3px 0; }
.hq-bar i { display: block; height: 10px; border-radius: 4px; background: linear-gradient(90deg, #3fd0ff, #ff4d8d); }
.hq-bar b { text-align: right; }
.hq-draft { border: 1.5px dashed var(--accent); border-radius: 10px; padding: 8px 12px; margin: 8px 0; background: rgba(255,77,141,.05); }
.hq-dtag { font-size: 11px; font-weight: 800; color: #ff8ab3; letter-spacing: .4px; }
.hq-draft pre { white-space: pre-wrap; font-family: inherit; margin: 6px 0; }
@media (max-width: 900px) { .hq { grid-template-columns: 1fr; } }
.hq-view > .row-inline:first-child { padding-right: 34px; }