/* Master Cue — Grupo Master visual standard (DiGiCo Quantum-style keys & meters) */
:root {
  --bg: #07090c;
  --bg2: #0a0c10;
  --panel: #12161b;
  --panel2: #0f1317;
  --line: #1d232b;
  --line2: #2a323c;
  --text: #eef2f6;
  --muted: #9aa5b1;
  --dim: #66717d;
  --lime: #C6FF33;
  --pink: #FF4FA3;
  --blue: #4FC3FF;
  --amber: #FFB020;
  --red: #FF3D3D;
  --r: 12px;
  --f-head: "Space Grotesk", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  background-image: radial-gradient(1200px 600px at 50% -200px, #10151b 0%, transparent 70%);
  color: var(--text);
  font: 16px/1.4 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .45; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
svg { width: 22px; height: 22px; flex: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
kbd, code { font-family: var(--f-mono); font-size: .9em; background: #0a0c10; border: 1px solid var(--line2); border-radius: 6px; padding: 1px 7px; }

/* ------------------------------------------------------------------ layout */
.app {
  height: 100vh; height: 100dvh;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr) 212px;
  grid-template-rows: 68px minmax(0, 1fr);
  grid-template-areas: "top top top" "run main out";
  gap: 12px;
  padding: 12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.topbar { grid-area: top; }
.col-run { grid-area: run; }
.col-main { grid-area: main; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-width: 0; min-height: 0; }
.col-out { grid-area: out; }

.panel {
  background: linear-gradient(180deg, #141920 0%, var(--panel) 120px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-height: 0;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 10px; }
.panel-head h2 { margin: 0; font: 700 15px/1 var(--f-head); letter-spacing: .16em; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.count { font: 700 14px var(--f-mono); color: var(--lime); letter-spacing: 0; }
.head-actions { display: flex; gap: 6px; }

/* ------------------------------------------------------------------ top bar */
.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 0 8px 0 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  min-width: 0;
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-mark { width: 34px; height: 34px; }
.wordmark { font: 700 22px/1 var(--f-head); letter-spacing: .16em; white-space: nowrap; }
.wordmark b { color: var(--lime); font-weight: 700; }
.showname { flex: 1; min-width: 0; display: flex; align-items: center; border-left: 1px solid var(--line2); padding-left: 18px; }
.showname input {
  width: 100%; min-width: 0; height: 44px; background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: var(--text); font: 600 21px var(--f-head); padding: 0 10px; text-overflow: ellipsis;
}
.showname input:hover { border-color: var(--line2); }
.showname input:focus { outline: none; border-color: var(--lime); background: var(--bg2); }
.top-right { display: flex; align-items: center; gap: 8px; flex: none; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px;
  font: 700 13px var(--f-head); letter-spacing: .1em; color: var(--muted); border: 1px solid var(--line2); background: var(--bg2); white-space: nowrap;
}
.badge i { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.badge.ok { color: var(--lime); border-color: color-mix(in srgb, var(--lime) 35%, transparent); }
.badge.ok i { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.badge.warn { color: var(--amber); }
.badge.warn i { background: var(--amber); animation: blink 1s infinite; }
.tbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 10px;
  background: transparent; border: 1px solid var(--line2); font: 700 14px var(--f-head); letter-spacing: .1em; color: var(--text);
}
.tbtn:hover { border-color: var(--lime); color: var(--lime); }
.clock { font: 700 26px var(--f-mono); color: var(--text); padding: 0 10px 0 8px; min-width: 150px; text-align: right; letter-spacing: .02em; }

/* ------------------------------------------------------------------ keys (DiGiCo-style) */
.key {
  --g: var(--lime);
  position: relative; min-height: 44px; min-width: 44px; padding: 0 14px 6px;
  border-radius: 8px; border: 1px solid #28303a;
  background: linear-gradient(180deg, #1a2027 0%, #12171c 100%);
  color: #d5dce3; font: 700 15px var(--f-head); letter-spacing: .08em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 0 #040507;
  transition: background .08s, box-shadow .08s, color .08s, transform .06s;
}
.key::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 5px; height: 3px; border-radius: 2px;
  background: var(--g); opacity: .75;
}
.key:hover { border-color: #3a4552; }
.key:active { transform: translateY(1px); }
.key.lit {
  background: var(--g); color: #07090c; border-color: var(--g);
  box-shadow: 0 0 0 1px var(--g), 0 0 22px color-mix(in srgb, var(--g) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -10px 18px rgba(0,0,0,.12);
}
.key.lit::after { background: rgba(7,9,12,.35); opacity: 1; }
.key-small { min-height: 44px; font-size: 14px; }

/* ------------------------------------------------------------------ run list */
.col-run { display: flex; flex-direction: column; overflow: hidden; }
.runlist { list-style: none; margin: 0; padding: 2px 10px 10px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; scrollbar-color: #2a323c transparent; }
.run-empty { color: var(--muted); font-size: 16px; padding: 24px 12px; text-align: center; line-height: 1.6; border: 1px dashed var(--line2); border-radius: 10px; margin-top: 6px; }
.ri {
  position: relative; display: grid; grid-template-columns: 6px 18px 76px minmax(0, 1fr) auto; align-items: center; gap: 0 8px;
  min-height: 74px; padding: 8px 6px 8px 0;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  transition: background .15s, border-color .15s, opacity .15s;
}
.ri-bar { align-self: stretch; width: 6px; border-radius: 10px 0 0 10px; margin: -8px 0; background: transparent; }
.ri-grip { color: #3a4552; cursor: grab; display: flex; justify-content: center; }
.ri-grip svg { width: 18px; height: 18px; }
.ri-left { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.ri-time { font: 700 17px var(--f-mono); color: var(--muted); }
.ri-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ri-title { font: 700 18px/1.2 var(--f-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-sub { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-audio { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: #c5ced7; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ri-audio svg { width: 15px; height: 15px; color: var(--g, var(--blue)); }
.ri-audio b { font: 700 13px var(--f-mono); color: var(--g, var(--blue)); }
.ri-audio.warn { color: var(--amber); }
.ri-remain { font: 700 16px var(--f-mono); color: var(--lime); margin-top: 2px; }
.ri-actions { display: flex; gap: 2px; }
.ri-actions .ibtn { width: 44px; height: 44px; border-color: transparent; background: transparent; color: var(--dim); }
.ri-actions .ibtn:hover { color: var(--text); border-color: var(--line2); }
.ri-actions .ibtn svg { width: 19px; height: 19px; }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 5px; font: 700 11.5px var(--f-head); letter-spacing: .08em; }
.chip svg { width: 15px; height: 15px; }
.chip-lime { background: var(--lime); color: #07090c; }
.chip-pink { background: var(--pink); color: #07090c; }
.chip-done { color: var(--dim); padding: 0; }
.ri.is-done { opacity: .5; }
.ri.is-done .ri-title { color: var(--muted); }
.ri.is-onair { background: color-mix(in srgb, var(--lime) 8%, var(--panel2)); border-color: color-mix(in srgb, var(--lime) 45%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--lime) 10%, transparent); }
.ri.is-onair .ri-bar { background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.ri.is-onair .ri-time { color: var(--lime); }
.ri.is-next { border-color: color-mix(in srgb, var(--pink) 40%, transparent); }
.ri.is-next .ri-bar { background: var(--pink); }
.ri.is-next .ri-time { color: var(--pink); }
.ri.dragging { opacity: .35; }
.ri.drop-before { box-shadow: 0 -3px 0 var(--lime); }
.ri.drop-after { box-shadow: 0 3px 0 var(--lime); }
.ri.drop { outline: 2px dashed var(--lime); outline-offset: -2px; }

.run-foot { display: grid; grid-template-columns: 1fr 116px; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.btn-next {
  min-height: 84px; border-radius: 12px; border: 0; background: var(--lime); color: #07090c;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 10px 18px; text-align: left;
  box-shadow: 0 0 0 1px var(--lime), 0 0 28px color-mix(in srgb, var(--lime) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.6), 0 3px 0 #5f7d10;
}
.btn-next:active { transform: translateY(2px); box-shadow: 0 0 0 1px var(--lime), 0 0 18px color-mix(in srgb, var(--lime) 35%, transparent), 0 1px 0 #5f7d10; }
.bn-top { display: flex; align-items: center; gap: 10px; font: 700 26px/1 var(--f-head); letter-spacing: .1em; }
.bn-top svg { width: 24px; height: 24px; }
.bn-sub { font: 600 15px var(--f-body); opacity: .75; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-stop {
  min-height: 84px; border-radius: 12px; border: 2px solid var(--red); background: #1a0d0f; color: #ff6b6b;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font: 700 20px var(--f-head); letter-spacing: .12em;
  box-shadow: inset 0 0 20px rgba(255,61,61,.12), 0 3px 0 #3a0b10;
}
.btn-stop svg { width: 26px; height: 26px; }
.btn-stop:active { background: var(--red); color: #07090c; transform: translateY(2px); }

/* ------------------------------------------------------------------ icon buttons & buttons */
.ibtn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 9px; color: var(--muted);
}
.ibtn:hover { color: var(--text); border-color: #3a4552; }
.ibtn svg { width: 21px; height: 21px; }
.ibtn-lime { background: var(--lime); color: #07090c; border-color: var(--lime); }
.ibtn-lime:hover { color: #07090c; box-shadow: 0 0 14px color-mix(in srgb, var(--lime) 45%, transparent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  background: #171c22; border: 1px solid var(--line2); border-radius: 10px; color: var(--text); font: 600 16px var(--f-body);
}
.btn:hover { border-color: #3d4856; }
.btn svg { width: 19px; height: 19px; }
.btn-lime { background: var(--lime); border-color: var(--lime); color: #07090c; font-weight: 700; }
.btn-lime:hover { border-color: var(--lime); box-shadow: 0 0 16px color-mix(in srgb, var(--lime) 40%, transparent); }
.btn-pink { background: var(--pink); border-color: var(--pink); color: #07090c; font-weight: 700; }
.btn-ghost { background: transparent; }
.btn-danger { background: transparent; border-color: color-mix(in srgb, var(--red) 55%, transparent); color: #ff7a7a; }
.btn-danger:hover { border-color: var(--red); background: #1a0d0f; }

/* ------------------------------------------------------------------ on air */
.onair {
  --g: var(--lime);
  position: relative; padding: 14px 18px 16px; overflow: hidden;
  border-left: 4px solid var(--line2);
}
.onair.live { border-left-color: var(--g); box-shadow: inset 4px 0 24px -12px var(--g); }
.oa-head { display: flex; align-items: center; gap: 14px; min-height: 26px; flex-wrap: wrap; }
.oa-tag { display: inline-flex; align-items: center; gap: 8px; font: 700 15px var(--f-head); letter-spacing: .18em; color: var(--muted); }
.oa-led { width: 11px; height: 11px; border-radius: 50%; background: #3a1418; border: 1px solid #5a1d24; }
.onair.live .oa-tag { color: var(--text); }
.onair.live .oa-led, .r-onair.live .oa-led { background: var(--red); border-color: var(--red); box-shadow: 0 0 10px var(--red); animation: blink 1.4s infinite; }
.oa-source { font: 700 14px var(--f-mono); color: var(--g); letter-spacing: .04em; }
.oa-fade { margin-left: auto; font: 600 14px var(--f-mono); color: var(--muted); letter-spacing: .02em; }
.oa-fade .fo { color: var(--pink); animation: blink .7s infinite; }
.oa-fade .more { color: var(--blue); margin-left: 8px; }
.oa-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 8px 0 12px; }
.oa-titles { min-width: 0; }
.oa-title { font: 700 38px/1.1 var(--f-head); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oa-sub { font-size: 18px; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oa-time { text-align: right; flex: none; }
.oa-time-label { font: 700 13px var(--f-head); letter-spacing: .18em; color: var(--dim); }
.oa-remain { font: 700 60px/1 var(--f-mono); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.oa-remain small { font-size: .5em; color: var(--muted); }
.onair.live .oa-remain { color: var(--g); text-shadow: 0 0 24px color-mix(in srgb, var(--g) 35%, transparent); }
.onair.fading .oa-remain { color: var(--pink); }
.oa-total { font: 600 15px var(--f-mono); color: var(--dim); margin-top: 4px; min-height: 1.2em; }
.wave-wrap { position: relative; height: 92px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.wave { position: absolute; inset: 6px 8px; width: calc(100% - 16px); height: calc(100% - 12px); }
.wave-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dim); font: 600 15px var(--f-head); letter-spacing: .12em; text-transform: uppercase;
  background: repeating-linear-gradient(90deg, transparent 0 3px, #12171d 3px 4px) center / 100% 2px no-repeat; }

/* ------------------------------------------------------------------ banks & pads */
.pads-area { position: relative; display: flex; flex-direction: column; padding: 12px; gap: 12px; min-height: 0; }
.bank-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.banks { display: flex; gap: 8px; }
.bank-key { width: 64px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0 0 6px; }
.bank-key b { font: 700 24px/1 var(--f-head); }
.bank-key small { font: 600 11.5px var(--f-mono); opacity: .6; margin-top: 2px; }
.bank-live { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.bank-key.live .bank-live { background: var(--red); box-shadow: 0 0 8px var(--red); animation: blink 1.2s infinite; }
.bank-key.lit.live .bank-live { background: #07090c; box-shadow: none; }
.bank-tools { display: flex; align-items: center; gap: 16px; }
.legend { display: flex; gap: 14px; font: 600 14px var(--f-head); color: var(--muted); letter-spacing: .04em; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 11px; height: 11px; border-radius: 3px; background: var(--g); box-shadow: 0 0 8px color-mix(in srgb, var(--g) 50%, transparent); }

.pads { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(110px, 1fr)); gap: 10px; }
.pad {
  --g: var(--lime);
  position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; text-align: left;
  padding: 10px 12px 16px; min-height: 104px; overflow: hidden;
  border-radius: 10px; border: 1px solid #28303a;
  background: linear-gradient(180deg, #1a2027 0%, #12171c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 0 #040507;
  color: var(--text);
  transition: background .08s, box-shadow .08s, transform .06s, color .08s;
}
.pad::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 7px; height: 4px; border-radius: 2px; background: var(--g); opacity: .85; box-shadow: 0 0 8px color-mix(in srgb, var(--g) 45%, transparent); }
.pad:hover { border-color: #3a4552; }
.pad:active, .pad.press { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 #040507; }
.pad-top { display: flex; justify-content: space-between; align-items: center; }
.pad-code { font: 700 14px var(--f-mono); color: var(--g); letter-spacing: .02em; }
.pad-hk { font: 600 12.5px var(--f-mono); color: var(--dim); border: 1px solid var(--line2); border-radius: 5px; min-width: 22px; text-align: center; padding: 0 4px; }
.pad-label { font: 700 19px/1.15 var(--f-head); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; word-break: normal; margin: 4px 0; }
.pad-foot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pad-dot { display: none; }
.pad-time { font: 600 15px var(--f-mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pad-flags { margin-left: auto; display: flex; color: var(--muted); }
.pad-flags svg { width: 16px; height: 16px; }
.pad-prog { position: absolute; left: 10px; right: 10px; bottom: 7px; height: 4px; border-radius: 2px; overflow: hidden; z-index: 1; pointer-events: none; }
.pad-prog i { display: block; height: 100%; background: #07090c; transform-origin: left; transform: scaleX(0); }

.pad.noaudio .pad-label { color: #aeb7c1; }
.pad.noaudio .pad-time { color: var(--amber); font-size: 13px; font-family: var(--f-head); letter-spacing: .03em; font-weight: 700; }
.pad.noaudio .pad-flags { display: none; }
.pad.noaudio::after { opacity: .35; box-shadow: none; }
.pad.empty { background: var(--bg2); border-style: dashed; box-shadow: none; }
.pad.empty .pad-label { color: var(--dim); font-weight: 600; }
.pad.empty .pad-time { color: var(--dim); font-family: var(--f-body); letter-spacing: 0; font-weight: 500; text-transform: none; }
.pad.empty .pad-dot { opacity: .3; }
.pad.empty::after { opacity: .2; }

.pad.lit {
  background: var(--g); border-color: var(--g); color: #07090c;
  box-shadow: 0 0 0 1px var(--g), 0 0 28px color-mix(in srgb, var(--g) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -16px 28px rgba(0,0,0,.14);
}
.pad.lit .pad-code, .pad.lit .pad-time, .pad.lit .pad-flags, .pad.lit .pad-label { color: #07090c; }
.pad.lit .pad-hk { color: #07090c; border-color: rgba(7,9,12,.35); }
.pad.lit .pad-dot { background: #07090c; animation: blink 1s infinite; }
.pad.lit::after { background: rgba(7,9,12,.25); box-shadow: none; opacity: 1; }
.pad.lit.fading { animation: padfade .5s ease-in-out infinite alternate; }
.pad.drop { outline: 3px dashed var(--lime); outline-offset: -3px; }
.pads.editing .pad { border-color: color-mix(in srgb, var(--pink) 55%, transparent); border-style: dashed; }
.pads.editing .pad-hk::before { content: ""; }

/* empty state */
.empty { position: absolute; inset: 72px 12px 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(3px); border-radius: 10px; z-index: 2; }
.empty-card { max-width: 560px; padding: 26px 30px; background: var(--panel); border: 1px solid var(--line2); border-top: 3px solid var(--lime); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.empty-title { font: 700 24px var(--f-head); margin-bottom: 14px; }
.empty-title b { color: var(--lime); letter-spacing: .08em; }
.empty-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.empty-steps li { display: flex; align-items: center; gap: 14px; font-size: 18px; line-height: 1.35; }
.empty-steps span { flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--bg2); border: 1px solid var(--line2); color: var(--lime); font: 700 17px var(--f-mono); }
.empty-steps li:nth-child(2) span { color: var(--pink); }
.empty-steps li:nth-child(3) span { color: var(--blue); }
.empty-steps b { color: var(--lime); }
.empty-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ output column */
.col-out { display: flex; flex-direction: column; overflow: hidden; }
.out-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 0 14px 14px; }
.meters { flex: 1; min-height: 180px; display: grid; grid-template-columns: 30px 1fr 1fr; gap: 8px; }
.scale { position: relative; font: 600 12px var(--f-mono); color: var(--dim); }
.scale span { position: absolute; right: 0; line-height: 1.2em; }
.meter { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; }
.leds { flex: 1; width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 4px; background: #05070a; border: 1px solid var(--line); border-radius: 6px; min-height: 0; }
.led { flex: 1; border-radius: 2px; background: #11180a; min-height: 2px; }
.led.amber { background: #1d1607; }
.led.red { background: #1f0a0b; }
.led.on.lime, .led.pk.lime { background: var(--lime); box-shadow: 0 0 6px color-mix(in srgb, var(--lime) 60%, transparent); }
.led.on.amber, .led.pk.amber { background: var(--amber); box-shadow: 0 0 6px color-mix(in srgb, var(--amber) 60%, transparent); }
.led.on.red, .led.pk.red { background: var(--red); box-shadow: 0 0 8px var(--red); }
.ch { font: 700 14px var(--f-head); color: var(--muted); }
.peak-read { display: flex; align-items: baseline; justify-content: center; gap: 6px; font: 700 22px var(--f-mono); padding: 6px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; }
.peak-read small { font: 600 12px var(--f-head); color: var(--dim); letter-spacing: .1em; }
.peak-read.hot { color: var(--red); border-color: var(--red); }
.gr { display: flex; flex-direction: column; gap: 5px; font: 700 12px var(--f-head); letter-spacing: .14em; color: var(--dim); }
.gr-bar { height: 8px; background: #05070a; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.gr-bar i { display: block; height: 100%; width: 0; background: var(--amber); }
.master { display: flex; align-items: stretch; gap: 12px; height: 236px; flex: none; }
.fader { position: relative; width: 64px; touch-action: none; cursor: ns-resize; border-radius: 8px; }
.fader-track { position: absolute; left: 50%; top: 22px; bottom: 22px; width: 10px; transform: translateX(-50%); background: #05070a; border: 1px solid var(--line2); border-radius: 5px; }
.fader-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, #4e6614, var(--lime)); border-radius: 5px; opacity: .55; }
.fader-mark { position: absolute; left: 18px; transform: translateY(50%); font: 600 11.5px var(--f-mono); color: var(--dim); white-space: nowrap; }
.fader-mark::before { content: ""; position: absolute; left: -14px; top: 50%; width: 9px; height: 1px; background: var(--line2); }
.fader-cap {
  position: absolute; left: 4px; right: 4px; height: 44px;
  background: linear-gradient(180deg, #3b4450 0%, #232a33 48%, #1a2027 52%, #2b333d 100%);
  border: 1px solid #4a5563; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.6);
}
.fader-cap::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; transform: translateY(-50%); background: var(--lime); box-shadow: 0 0 6px var(--lime); }
.fader:focus-visible .fader-cap { outline: 2px solid var(--lime); outline-offset: 2px; }
.master-read { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.master-read span { font: 700 13px var(--f-head); letter-spacing: .16em; color: var(--dim); }
.master-read b { font: 700 18px var(--f-mono); color: var(--lime); white-space: nowrap; }

/* ------------------------------------------------------------------ modal */
.modal {
  --accent: var(--lime);
  width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0;
  background: var(--panel); color: var(--text); border: 1px solid var(--line2); border-top: 3px solid var(--accent); border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.modal-small { width: min(460px, calc(100vw - 24px)); }
.modal::backdrop { background: rgba(3,4,6,.72); backdrop-filter: blur(4px); }
.modal-inner { display: flex; flex-direction: column; max-height: calc(100dvh - 30px); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 6px 22px; }
.modal-title { margin: 0; font: 700 18px var(--f-head); letter-spacing: .14em; color: var(--accent); }
.modal-body { padding: 8px 22px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 22px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.modal-foot .left { margin-right: auto; }
.f { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.f > span { font: 700 13.5px var(--f-head); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; display: flex; justify-content: space-between; }
.f-val { font: 700 15px var(--f-mono); color: var(--accent); letter-spacing: 0; text-transform: none; }
.f-row { display: flex; gap: 12px; flex-wrap: wrap; }
.f-row > .f { flex: 1; min-width: 140px; }
.f-row .f-time { flex: 0 0 110px; min-width: 110px; }
.f-row .f-grow { flex: 1; }
.f-row.toggles .key { flex: 1; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.f-row.toggles .key svg { width: 18px; height: 18px; }
.f-row.move .btn { flex: 1; }
input[type=text], input[type=number], select, textarea {
  width: 100%; min-height: 50px; padding: 0 14px; background: var(--bg2); border: 1px solid var(--line2); border-radius: 10px;
  color: var(--text); font: 500 17px var(--f-body);
}
textarea { padding: 12px 14px; font: 500 16px/1.5 var(--f-mono); resize: vertical; min-height: 180px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; background: #05070a; border: 1px solid var(--line2); border-radius: 4px; }
input[type=range]::-moz-range-track { height: 8px; background: #05070a; border: 1px solid var(--line2); border-radius: 4px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 6px; background: linear-gradient(180deg, #3b4450, #1a2027); border: 1px solid #56616f; box-shadow: inset 0 0 0 9px transparent, 0 0 0 0 var(--accent); }
input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 6px; background: linear-gradient(180deg, #3b4450, #1a2027); border: 1px solid #56616f; }
input[type=range]:focus-visible::-webkit-slider-thumb { border-color: var(--accent); }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-key { flex: 1; min-height: 52px; min-width: 110px; }
.f-audio { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--bg2); border: 1px dashed var(--line2); border-radius: 12px; flex-wrap: wrap; }
.f-audio.drop { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 6%, var(--bg2)); }
.fa-info { min-width: 0; flex: 1; }
.fa-name { display: flex; align-items: center; gap: 8px; font: 600 17px var(--f-body); min-width: 0; }
.fa-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-name svg { color: var(--accent); }
.fa-name.dim { color: var(--muted); }
.fa-meta { font: 600 14px var(--f-mono); color: var(--muted); margin: 2px 0 0 30px; }
.fa-btns { display: flex; gap: 8px; }
.m-help { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.m-help.big { font-size: 17px; color: #c9d1d9; }
.m-sec { margin: 8px 0 -4px; font: 700 14px var(--f-head); letter-spacing: .14em; color: var(--text); text-transform: uppercase; border-top: 1px solid var(--line); padding-top: 16px; }
.io-count { font: 600 15px var(--f-mono); color: var(--lime); margin-top: -8px; }
.escala { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 12px; flex-wrap: wrap; }
.escala div { display: flex; flex-direction: column; gap: 2px; }
.escala b { font: 700 16px var(--f-head); }
.escala span { font-size: 14.5px; color: var(--muted); }
.escala.off { opacity: .7; }
.keys-help { margin: 0; display: grid; gap: 8px; }
.keys-help div { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 15.5px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.keys-help dt { color: var(--text); }
.keys-help dd { margin: 0; color: var(--muted); text-align: right; }

/* ------------------------------------------------------------------ toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  margin: 0; inset: auto auto 24px 50%;
  max-width: min(560px, calc(100vw - 32px)); padding: 14px 20px; border-radius: 12px;
  background: #1a2027; border: 1px solid var(--line2); border-left: 4px solid var(--lime); color: var(--text);
  font: 600 16px var(--f-body); box-shadow: 0 16px 40px rgba(0,0,0,.5); transition: opacity .2s, transform .2s; z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { border-left-color: var(--pink); }

@keyframes blink { 50% { opacity: .35; } }
@keyframes padfade { from { filter: brightness(1); } to { filter: brightness(.6); } }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1320px) {
  .app { grid-template-columns: 318px minmax(0, 1fr) 176px; }
  .tbtn span { display: none; }
  .tbtn { width: 48px; padding: 0; justify-content: center; }
  .legend { display: none; }
  .oa-title { font-size: 32px; }
  .oa-remain { font-size: 52px; }
  .pad-label { font-size: 17px; }
}
@media (max-width: 1100px) {
  body { overflow: auto; }
  .app {
    height: auto; min-height: 100dvh;
    grid-template-columns: minmax(0, 1fr) 160px;
    grid-template-rows: auto auto auto;
    grid-template-areas: "top top" "main out" "run run";
  }
  .col-main { grid-template-rows: auto auto; }
  .pads { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(108px, auto); }
  .col-run { max-height: none; }
  .runlist { overflow: visible; }
  .run-foot { position: sticky; bottom: 0; background: var(--panel); border-radius: 0 0 var(--r) var(--r); z-index: 3; }
  .clock { min-width: 0; font-size: 22px; }
  .showname input { font-size: 18px; }
}
@media (max-width: 720px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main" "run" "out"; gap: 10px; padding: 10px; }
  .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 10px 10px 10px 12px; }
  .showname { order: 3; flex-basis: 100%; border-left: 0; padding-left: 0; }
  .showname input { padding: 0 8px; }
  .top-right { margin-left: auto; gap: 6px; }
  .badge { height: 32px; padding: 0 10px; font-size: 11.5px; }
  .clock { display: none; }
  .wordmark { font-size: 19px; }
  .oa-body { flex-direction: column; align-items: flex-start; gap: 8px; }
  .oa-time { text-align: left; }
  .oa-title { font-size: 28px; white-space: normal; }
  .oa-remain { font-size: 46px; }
  .oa-fade { margin-left: 0; flex-basis: 100%; }
  .bank-row { flex-direction: column; align-items: stretch; }
  .banks { justify-content: space-between; }
  .bank-key { width: auto; flex: 1; }
  .bank-tools { justify-content: flex-end; }
  .pads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pad-label { font-size: 16px; }
  .out-body { flex-direction: row; flex-wrap: wrap; }
  .meters { flex: 1 1 160px; height: 220px; min-height: 0; }
  .master { height: 220px; }
  .peak-read, .gr { flex-basis: 100%; }
  .empty { inset: 130px 8px 8px; align-items: flex-start; }
  .empty-card { padding: 18px; }
  .empty-steps li { font-size: 16px; }
  .run-foot { grid-template-columns: 1fr 96px; }
}

/* ------------------------------------------------------------------ remote (#remote) */
body.is-remote { overflow: auto; }
.remote {
  min-height: 100dvh; display: flex; flex-direction: column; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto;
}
.r-top { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.r-conn { display: inline-flex; align-items: center; gap: 8px; font: 700 13px var(--f-head); letter-spacing: .12em; color: var(--muted); }
.r-conn::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dim); }
.r-conn.ok { color: var(--lime); } .r-conn.ok::before { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.r-conn.warn { color: var(--amber); } .r-conn.warn::before { background: var(--amber); }
.r-conn.off::before { animation: blink 1s infinite; }
.r-onair { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--line2); border-radius: var(--r); padding: 14px 16px; }
.r-onair.live { border-left-color: var(--lime); }
.r-title { font: 700 28px/1.15 var(--f-head); margin: 8px 0 4px; overflow-wrap: anywhere; }
.r-remain { font: 700 52px/1 var(--f-mono); color: var(--lime); }
.r-prog { height: 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: 4px; margin-top: 12px; overflow: hidden; }
.r-prog i { display: block; height: 100%; background: var(--lime); transform-origin: left; transform: scaleX(0); transition: transform .2s linear; }
.r-next { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--pink) 40%, transparent); border-left: 4px solid var(--pink); border-radius: var(--r); }
.r-next span { font: 700 13px var(--f-head); letter-spacing: .14em; color: var(--pink); flex: none; }
.r-next b { font: 700 19px var(--f-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-next .mono { font-family: var(--f-mono); color: var(--muted); }
.r-pads { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.r-bankbar { display: flex; gap: 8px; }
.r-banks { display: flex; gap: 6px; flex: 1; }
.r-banks .bank-key { flex: 1; width: auto; height: 48px; min-width: 0; }
.r-banks .bank-key b { font-size: 19px; }
.r-padgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.r-padgrid .pad { min-height: 92px; padding-bottom: 16px; }
.r-padgrid .pad-label { font-size: 16px; }
.r-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: auto; }
.r-actions .btn-stop, .r-actions .btn-next { min-height: 104px; }
.r-actions .btn-next { align-items: center; }
body.r-offline .r-pads, body.r-offline .r-actions { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* template picker (empty state) */
.tpl-label { font: 600 15px var(--f-body); color: var(--muted); margin: 4px 0 10px; }
.templates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.templates .tpl { min-height: 56px; font-size: 15px; letter-spacing: .04em; padding: 0 10px 6px; }
@media (max-width: 720px) { .templates { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ access gate (login) */
.gate {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: var(--bg); background-image: radial-gradient(900px 500px at 50% -10%, #141b10 0%, transparent 70%);
  overflow-y: auto;
}
.gate-card {
  --accent: var(--lime);
  width: min(460px, 100%); padding: 28px 28px 24px; margin: auto;
  background: var(--panel); border: 1px solid var(--line2); border-top: 3px solid var(--lime); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 16px;
}
.gate-brand { display: flex; align-items: center; gap: 12px; }
.gate-brand .brand-mark { width: 40px; height: 40px; }
.gate-brand .wordmark { font-size: 24px; }
.gate-title { margin: 6px 0 0; font: 700 28px/1.15 var(--f-head); }
.gate-sub { margin: -6px 0 0; color: var(--muted); font-size: 17px; line-height: 1.5; }
.gate-sub b { color: var(--text); }
.gate-note { margin: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); background: #1a1508; color: #ffd27a; font-size: 15.5px; line-height: 1.5; }
.gate-form { display: flex; flex-direction: column; gap: 14px; }
.gate-form .f label { display: block; }
.gate-form .f label span, .gate-form .f > span { font: 700 13.5px var(--f-head); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.gate-form input[type=email], .gate-form input[type=password], .gate-form input[type=text] { width: 100%; min-height: 54px; padding: 0 14px; background: var(--bg2); border: 1px solid var(--line2); border-radius: 10px; color: var(--text); font: 500 18px var(--f-body); }
.pw { position: relative; }
.pw input { padding-right: 58px !important; }
.pw-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 8px; color: var(--muted); }
.pw-eye:hover, .pw-eye[aria-pressed=true] { color: var(--lime); }
.gate-submit { min-height: 56px; font-size: 18px; margin-top: 4px; }
.gate-submit:disabled { opacity: .7; }
.gate-link { align-self: center; min-height: 44px; padding: 0 12px; background: transparent; border: 0; color: var(--lime); font: 600 16px var(--f-body); text-decoration: underline; text-underline-offset: 3px; }
.gate-msg { min-height: 0; font-size: 15.5px; line-height: 1.45; border-radius: 10px; }
.gate-msg.err, .gate-msg.ok { padding: 12px 14px; }
.gate-msg.err { background: #1f0d12; border: 1px solid color-mix(in srgb, var(--pink) 50%, transparent); color: #ffb3d4; }
.gate-msg.ok { background: #131a08; border: 1px solid color-mix(in srgb, var(--lime) 45%, transparent); color: #e4ffa8; }
.gate-foot { margin: 0; text-align: center; color: var(--muted); font-size: 15px; }
.gate-foot a { color: var(--text); font-weight: 600; }
.gate-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gate-actions .btn { flex: 1; text-decoration: none; min-height: 52px; }
.gate-wait { display: flex; align-items: center; gap: 14px; font: 600 18px var(--f-head); color: var(--muted); padding: 10px 0 6px; }
.gate-spin { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--line2); border-top-color: var(--lime); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }