:root {
  color-scheme: dark;
  --bg: #070a0f;
  --panel: #10161f;
  --panel-strong: #151e29;
  --well: #090d13;
  --line: rgb(255 255 255 / 10%);
  --text: #f7f8fb;
  --muted: #94a0b0;
  --orange: #ff6534;
  --orange-soft: #ff8c55;
  --cyan: #37d6fb;
  --green: #45e690;
  --red: #ff4f64;
  --yellow: #ffc857;

  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 4%, rgb(255 101 52 / 13%), transparent 26rem),
    radial-gradient(circle at 92% 40%, rgb(55 214 251 / 8%), transparent 32rem),
    linear-gradient(rgb(255 255 255 / 1.6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 1.6%) 1px, transparent 1px),
    var(--bg);
  background-size:
    auto,
    auto,
    42px 42px,
    42px 42px,
    auto;
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

select,
input[type="text"],
input[type="password"],
input[type="file"],
input[type="number"] {
  width: 100%;
  min-height: 43px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: #0c1118;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid rgb(55 214 251 / 65%);
  outline-offset: 3px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

[hidden] {
  display: none !important;
}

.auth-locked {
  overflow: hidden;
}

.auth-locked .studio-ui {
  visibility: hidden;
  pointer-events: none;
}

.login-gate {
  position: fixed;
  z-index: 100;
  display: grid;
  width: 100%;
  min-height: 100dvh;
  padding: 24px;
  place-items: center;
  background:
    radial-gradient(circle at 20% 10%, rgb(255 101 52 / 18%), transparent 28rem),
    radial-gradient(circle at 90% 80%, rgb(55 214 251 / 12%), transparent 32rem),
    var(--bg);
}

.login-card {
  display: grid;
  width: min(430px, 100%);
  gap: 15px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgb(16 22 31 / 96%);
  box-shadow: 0 30px 90px rgb(0 0 0 / 48%);
}

.login-card h1,
.login-card p {
  margin: 0;
}

.login-card > p:not(.eyebrow),
.login-card label,
#operatorLoginStatus {
  color: var(--muted);
}

.login-card label {
  margin-top: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.login-mark {
  width: max-content;
  margin-bottom: 4px;
}

#operatorLoginStatus {
  min-height: 1.2em;
  font-size: 0.78rem;
}

#operatorLoginStatus[data-state="error"] {
  color: var(--red);
}

.logout-button {
  min-height: 36px;
  padding-inline: 13px;
}

.topbar,
.console-shell,
.app-footer {
  width: min(1540px, calc(100% - 42px));
  margin-inline: auto;
}

.topbar {
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  gap: 13px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.brand-copy,
.topbar-copy {
  display: grid;
  gap: 3px;
}

.brand strong {
  font-size: 0.87rem;
  letter-spacing: 0.17em;
}

.brand small,
.topbar-status small {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.brand-mark {
  display: flex;
  width: 43px;
  height: 43px;
  gap: 3px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--orange);
  box-shadow: 0 10px 35px rgb(255 101 52 / 28%);
}

.brand-mark i {
  display: block;
  width: 3px;
  border-radius: 9px;
  background: white;
}

.brand-mark i:nth-child(1),
.brand-mark i:nth-child(4) {
  height: 12px;
}

.brand-mark i:nth-child(2) {
  height: 25px;
}

.brand-mark i:nth-child(3) {
  height: 18px;
}

.topbar-status {
  display: flex;
  gap: 11px;
  align-items: center;
  text-align: right;
}

.topbar-status strong {
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

.status-light,
.channel-light {
  display: block;
  border-radius: 50%;
  background: #59616c;
  box-shadow: 0 0 0 4px rgb(255 255 255 / 4%);
}

.status-light {
  width: 11px;
  height: 11px;
}

.status-light[data-state="live"],
.channel-light[data-state="live"] {
  background: var(--green);
  box-shadow:
    0 0 0 4px rgb(69 230 144 / 10%),
    0 0 18px rgb(69 230 144 / 55%);
}

.status-light[data-state="error"] {
  background: var(--red);
  box-shadow: 0 0 18px rgb(255 79 100 / 55%);
}

.channel-light[data-state="waiting"] {
  background: var(--yellow);
}

.console-shell {
  display: grid;
  gap: 28px;
  padding: 42px 0 26px;
}

.console-panel {
  position: relative;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(145deg, rgb(18 25 35 / 97%), rgb(10 14 21 / 98%));
  box-shadow: 0 30px 90px rgb(0 0 0 / 31%);
  overflow: hidden;
}

.console-panel::before {
  position: absolute;
  width: 270px;
  height: 270px;
  top: -150px;
  right: -100px;
  border-radius: 50%;
  background: rgb(255 101 52 / 10%);
  filter: blur(45px);
  content: "";
  pointer-events: none;
}

.prepare-panel::before {
  background: rgb(55 214 251 / 8%);
}

.panel-heading {
  position: relative;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}

.panel-heading.compact {
  align-items: end;
}

.eyebrow {
  margin: 0 0 9px;
  color: var(--orange-soft);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 12px;
  font-size: clamp(2.5rem, 6vw, 5.3rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

h2 {
  margin-bottom: 8px;
  font-size: clamp(1.6rem, 3vw, 2.7rem);
  letter-spacing: -0.035em;
}

h3 {
  margin-bottom: 7px;
}

.panel-description {
  max-width: 700px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.live-summary {
  display: grid;
  min-width: min(350px, 100%);
  gap: 7px;
  justify-items: end;
  text-align: right;
}

.live-summary strong {
  max-width: 430px;
  font-size: 1.08rem;
}

.live-summary small {
  color: var(--muted);
}

.on-air-badge {
  padding: 7px 11px;
  border-radius: 999px;
  color: white;
  background: var(--red);
  box-shadow: 0 0 25px rgb(255 79 100 / 35%);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.audience-override {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 14px 17px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgb(0 0 0 / 20%);
  font-size: 0.78rem;
  color: var(--muted);
}

.audience-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  width: 100%;
}

.audience-override strong {
  color: var(--cyan);
}

.audience-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.audience-buttons .button {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 0.74rem;
}

.audience-buttons .button.is-accent {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgb(55 214 251 / 12%);
}

.audience-custom-form {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 260px;
}

.audience-custom-form input {
  min-height: 36px;
  width: auto;
  flex: 1;
}

.audience-custom-form .button {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 0.74rem;
  white-space: nowrap;
}

.audience-formula {
  width: 100%;
  line-height: 1.45;
}

.special-message-editor {
  margin-bottom: 24px;
  padding: 20px;
  border: 1px solid rgb(55 214 251 / 22%);
  border-radius: 18px;
  background:
    linear-gradient(130deg, rgb(55 214 251 / 8%), transparent 42%),
    rgb(0 0 0 / 22%);
  box-shadow: inset 4px 0 0 rgb(55 214 251 / 70%);
}

.special-message-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.special-message-heading h2,
.special-message-heading .eyebrow {
  margin: 0;
}

.special-message-heading h2 {
  margin-top: 5px;
}

.special-message-heading > span {
  color: var(--muted);
  font-size: 0.78rem;
  text-align: right;
}

.special-message-heading > span[data-state="published"] {
  color: var(--cyan);
}

.special-message-editor form,
.special-message-editor label {
  display: grid;
  gap: 9px;
}

.special-message-editor label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.special-message-editor textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--text);
  background: rgb(5 9 15 / 82%);
  font: inherit;
  line-height: 1.55;
}

.special-message-editor textarea:focus-visible {
  outline: 3px solid rgb(55 214 251 / 35%);
  border-color: var(--cyan);
}

.special-message-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
}

.special-message-actions > span {
  margin-right: auto;
  color: var(--muted);
  font-size: 0.75rem;
}

.monitor-bar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgb(0 0 0 / 20%);
}

.monitor-bar > div {
  display: grid;
  gap: 3px;
}

.monitor-bar small {
  color: var(--muted);
}

.button {
  min-height: 42px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.025em;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

.button:not(:disabled):hover {
  transform: translateY(-1px);
}

.button.primary,
.button.mic-action {
  background: var(--orange);
}

.button.secondary {
  border-color: rgb(55 214 251 / 35%);
  background: rgb(55 214 251 / 10%);
}

.button.ghost {
  border-color: var(--line);
  background: rgb(255 255 255 / 3%);
}

.mixer-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(145px, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #080c12;
  overflow-x: auto;
}

.channel-strip {
  display: grid;
  grid-template-rows: auto auto minmax(36px, auto) auto 244px repeat(3, auto);
  gap: 9px;
  min-width: 140px;
  padding: 15px 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #19222e, #101720);
  text-align: center;
}

.channel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--orange-soft);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.channel-light {
  width: 8px;
  height: 8px;
}

.channel-strip h3 {
  margin: 0;
  font-size: 0.92rem;
}

.channel-source {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.channel-value {
  color: var(--cyan);
  font-size: 0.8rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.fader-well {
  display: grid;
  place-items: center;
  width: 56px;
  height: 244px;
  justify-self: center;
  border: 1px solid rgb(255 255 255 / 7%);
  border-radius: 10px;
  background:
    linear-gradient(
      90deg,
      transparent 48%,
      rgb(255 255 255 / 12%) 49%,
      rgb(255 255 255 / 12%) 51%,
      transparent 52%
    ),
    #080c11;
}

.vertical-fader {
  width: 210px;
  height: 28px;
  margin: 0;
  accent-color: var(--orange);
  cursor: ns-resize;
  transform: rotate(-90deg);
}

.channel-mute,
.channel-loop,
.channel-play,
.channel-stop {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgb(255 255 255 / 4%);
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.channel-mute[aria-pressed="true"] {
  border-color: rgb(255 79 100 / 58%);
  color: #ffbcc4;
  background: rgb(255 79 100 / 16%);
}

.channel-loop {
  color: var(--muted);
}

.channel-loop[aria-pressed="true"] {
  border-color: rgb(55 214 251 / 55%);
  color: var(--cyan);
  background: rgb(55 214 251 / 14%);
}

.channel-play {
  border-color: rgb(69 230 144 / 25%);
  color: var(--green);
}

.channel-stop {
  color: var(--muted);
}

.live-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 22px 0 28px;
  flex-wrap: wrap;
}

.mic-action {
  min-width: 230px;
}

.record-action {
  border-color: rgb(255 79 100 / 35%);
  color: var(--red);
}

.record-action[aria-pressed="true"] {
  background: rgb(255 79 100 / 16%);
}

.mic-state {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.mic-state[data-state="live"] {
  color: var(--green);
}

.record-state {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.record-state[data-state="live"] {
  color: var(--red);
}

.mic-state[data-state="ready"] {
  color: var(--yellow);
}

.effects-live {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* Deliberately loud -- this is the one thing on the whole board that must
   never be missed: whether a pad tap right now reaches real listeners. */
.effects-armed-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 11px 16px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.effects-armed-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.effects-armed-banner[data-state="locked"] {
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 3%);
  color: var(--muted);
}

.effects-armed-banner[data-state="locked"] .effects-armed-dot {
  background: var(--muted);
}

.effects-armed-banner[data-state="armed"] {
  border: 1px solid rgb(255 79 100 / 55%);
  background: rgb(255 79 100 / 14%);
  color: #ffbcc4;
  animation: effects-armed-pulse 1.6s ease-in-out infinite;
}

.effects-armed-banner[data-state="armed"] .effects-armed-dot {
  background: var(--red);
  box-shadow: 0 0 10px 2px rgb(255 79 100 / 70%);
}

/* Armed but the channel's own MUTE/fader (in the mixer board) silences it
   anyway -- a real, easy-to-hit state that reads as "not working" from the
   operator's side exactly like being locked, so it gets its own distinct
   (amber, not red or gray) warning rather than being lumped into "armed". */
.effects-armed-banner[data-state="silenced"] {
  border: 1px solid rgb(255 200 87 / 55%);
  background: rgb(255 200 87 / 14%);
  color: var(--yellow);
}

.effects-armed-banner[data-state="silenced"] .effects-armed-dot {
  background: var(--yellow);
  box-shadow: 0 0 10px 2px rgb(255 200 87 / 60%);
}

@keyframes effects-armed-pulse {
  0%, 100% { background: rgb(255 79 100 / 14%); }
  50% { background: rgb(255 79 100 / 26%); }
}

.effect-pads.is-armed .effect-pad:not(.effect-pad-empty) {
  border-color: rgb(255 79 100 / 45%);
  box-shadow: 0 0 0 1px rgb(255 79 100 / 20%);
}

.subheading {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.subheading h2,
.subheading h3,
.subheading p {
  margin-bottom: 0;
}

.subheading > span {
  color: var(--muted);
  font-size: 0.75rem;
}

.effect-pads {
  display: grid;
  grid-template-columns: repeat(8, minmax(95px, 1fr));
  gap: 9px;
}

.effect-pad-shell {
  position: relative;
  min-width: 0;
}

.effect-pad {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 78px;
  gap: 8px;
  align-content: space-between;
  padding: 11px 36px 11px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #18212d;
  cursor: pointer;
  text-align: left;
}

.effect-pad:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.effect-pad-edit {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgb(0 0 0 / 35%);
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}

.effect-pad-edit:hover,
.effect-pad-edit:focus-visible {
  color: var(--cyan);
  border-color: var(--cyan);
}

.effect-pad-empty {
  align-items: center;
  justify-items: center;
  border-style: dashed;
  background: transparent;
  cursor: default;
}

.effect-pad-empty span,
.effect-pad-empty strong,
.effect-pad-empty small {
  color: var(--muted);
}

.effect-library-add {
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 96px;
  border-style: dashed;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.82rem;
}

.effect-library-add:hover,
.effect-library-add:focus-visible {
  color: var(--cyan);
  border-color: var(--cyan);
}

.effect-editor-dialog {
  width: min(420px, calc(100% - 40px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
}

.effect-editor-dialog::backdrop {
  background: rgb(0 0 0 / 60%);
}

.effect-editor-dialog form {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.effect-editor-dialog label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.effect-editor-dialog small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.effect-editor-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

#effectEditorDelete {
  margin-right: auto;
}

#effectEditorStatus {
  color: var(--muted);
  font-size: 0.75rem;
}

.effect-pad span {
  color: var(--cyan);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.effect-pad strong {
  font-size: 0.72rem;
  line-height: 1.25;
}

.effect-pad small {
  color: var(--orange);
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.effect-pad.is-playing {
  border-color: var(--orange);
  background: rgb(255 101 52 / 22%);
  transform: translateY(2px);
}

.target-picker {
  display: grid;
  min-width: 210px;
  gap: 7px;
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.prepare-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #090d13;
}

.prepare-tab {
  min-height: 46px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-weight: 850;
}

.prepare-tab.is-active {
  color: white;
  background: var(--orange);
  box-shadow: 0 8px 22px rgb(255 101 52 / 18%);
}

.prepare-content {
  min-height: 260px;
  padding: 22px 0 12px;
}

.prepare-view.is-active {
  animation: reveal 0.18s ease-out;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.source-card,
.prep-card {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, #18212c, #101720);
}

.source-card > span {
  color: var(--cyan);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.source-card h3 {
  margin: 8px 0 5px;
  font-size: 0.98rem;
}

.source-card p,
.prep-card p {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.source-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.library-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.library-columns .source-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.empty-state {
  color: var(--muted);
}

.live-program-prep {
  display: grid;
  grid-template-columns: minmax(240px, 0.5fr) minmax(0, 1.5fr);
  gap: 16px;
}

.agenda-content {
  max-height: 480px;
  padding-right: 8px;
  color: var(--muted);
  overflow: auto;
  line-height: 1.55;
}

.agenda-content h4 {
  color: var(--text);
  font-size: 1.2rem;
}

.agenda-content ol {
  display: grid;
  gap: 12px;
  padding-left: 22px;
}

.agenda-content li strong {
  color: var(--orange-soft);
}

.agenda-content li p {
  margin: 4px 0 0;
}

.agenda-closing {
  padding-top: 13px;
  border-top: 1px solid var(--line);
  color: var(--text) !important;
}

.pfl-dock {
  position: sticky;
  z-index: 5;
  bottom: 12px;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(260px, 2fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgb(55 214 251 / 30%);
  border-radius: 14px;
  background: rgb(9 14 21 / 96%);
  box-shadow: 0 18px 50px rgb(0 0 0 / 45%);
  backdrop-filter: blur(15px);
}

.pfl-dock > div {
  display: grid;
  gap: 3px;
}

.pfl-dock small {
  color: var(--cyan);
  font-size: 0.67rem;
}

.pfl-dock audio {
  width: 100%;
  height: 38px;
}

.upload-drawer {
  margin-top: 22px;
  border-top: 1px solid var(--line);
}

.upload-drawer summary {
  padding: 20px 0 12px;
  cursor: pointer;
  color: var(--orange-soft);
  font-weight: 850;
}

.upload-drawer form {
  display: grid;
  grid-template-columns: 180px minmax(180px, 1fr) minmax(220px, 1.4fr);
  gap: 13px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgb(0 0 0 / 18%);
}

.upload-drawer label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.upload-drawer .check-row {
  display: flex;
  align-items: center;
  grid-column: span 2;
  font-size: 0.76rem;
  letter-spacing: 0;
}

.check-row input {
  accent-color: var(--orange);
}

.legal-note {
  grid-column: span 2;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

#library-upload-status {
  color: var(--muted);
  font-size: 0.75rem;
}

.app-footer {
  min-height: 70px;
  padding: 17px 4px 34px;
  color: var(--muted);
  font-size: 0.78rem;
}

.app-footer [data-state="success"] {
  color: var(--green);
}

.app-footer [data-state="warning"] {
  color: var(--yellow);
}

.app-footer [data-state="error"] {
  color: var(--red);
}

.is-readonly .channel-strip,
.is-readonly .effects-live {
  --orange: #59616c;
}

@media (width <= 1120px) {
  .mixer-board {
    grid-template-columns: repeat(6, 145px);
  }

  .effect-pads {
    grid-template-columns: repeat(4, minmax(90px, 1fr));
  }

  .source-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .upload-drawer form {
    grid-template-columns: 1fr 1fr;
  }

  .upload-drawer .check-row,
  .legal-note {
    grid-column: span 2;
  }
}

@media (width <= 760px) {
  .topbar,
  .console-shell,
  .app-footer {
    width: min(100% - 22px, 1540px);
  }

  .topbar {
    min-height: 72px;
  }

  .brand small {
    display: none;
  }

  .panel-heading,
  .panel-heading.compact {
    display: grid;
  }

  .live-summary {
    min-width: 0;
    justify-items: start;
    text-align: left;
  }

  .monitor-bar {
    grid-template-columns: 1fr 1fr;
  }

  .monitor-bar > div {
    grid-column: 1 / -1;
  }

  .console-panel {
    padding: 19px 14px;
    border-radius: 19px;
  }

  .mixer-board {
    margin-inline: -4px;
  }

  .effect-pads {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mic-state {
    width: 100%;
    margin-left: 0;
  }

  .prepare-tabs {
    grid-template-columns: 1fr 1fr;
  }

  .source-grid,
  .library-columns,
  .library-columns .source-grid,
  .live-program-prep {
    grid-template-columns: 1fr;
  }

  .pfl-dock {
    grid-template-columns: 1fr;
  }

  .upload-drawer form {
    grid-template-columns: 1fr;
  }

  .upload-drawer .check-row,
  .legal-note {
    grid-column: 1;
  }
}