/* OnAirCore UI — dark theme of the earlier project (06 §8): primary #F2954A, page #4D4A48, app bar #232327, DM Sans. */

@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url("../fonts/dm-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 800; font-display: swap; src: url("../fonts/dm-sans-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url("../fonts/dm-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url("../fonts/dm-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url("../fonts/dm-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "DM Sans"; font-weight: 800; font-display: swap; src: url("../fonts/dm-sans-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }

html, body { margin: 0; background: #4D4A48; font-family: "DM Sans", sans-serif; }

/* Loading screen before WASM starts. */
.boot { position: fixed; inset: 0; display: grid; place-items: center; color: #F2954A; font: 800 28px "DM Sans", sans-serif; background: #232327; }

/* K41 / K64: bands across the top. */
.band { padding: 8px 16px; font-weight: 700; text-align: center; }
.band-disconnected { background: #8a5a00; color: #fff; }
.band-error { background: #b3261e; color: #fff; }
.band-warning { background: #6b4e16; color: #fff; }

/* Virtual Stream Deck faceplate (06 §3). */
.deck-panel {
  background: #222226;
  border: 1px solid #36363a;
  border-radius: 28px;
  padding: 18px 22px 22px;
  max-width: 980px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.deck-name { color: #8a8a90; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; margin: 0 0 12px 4px; }
.deck-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.deck-key {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18%;
  background: #0c0c0d;
  border: 1px solid #2a2a2e;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
  touch-action: none;
  user-select: none;
}
.deck-key.active { cursor: pointer; border-color: #3d3d42; }
.deck-key.active:hover { filter: brightness(1.15); }
@media (max-width: 700px) {
  .deck-panel { padding: 10px; border-radius: 18px; }
  .deck-grid { gap: 6px; }
}

/* Player status: remaining time turns red in the last 10 s (K114). */
.remaining { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 34px; color: #fff; }
.remaining.warn { color: #ff5a4a; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-all; }
.thumb { width: 96px; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 4px; display: block; }

/* K56: hold-to-confirm button fill. */
.hold-button { position: relative; overflow: hidden; }
.hold-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(224,90,74,.55); pointer-events: none; }

/* K58: browser preview of the multiview. */
.preview-frame { background: #000; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.preview-image { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .3s; }
.preview-image.stale { opacity: .35; }

/* Switcher rows (K20): Program red, Preview green, like a hardware panel. */
.bus-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bus-label { width: 44px; font-weight: 800; font-size: 12px; letter-spacing: .06em; }
.bus-label.pgm { color: #ff5a4a; }
.bus-label.pvw { color: #3ccf6a; }
.bus-key {
  min-width: 72px; height: 44px; padding: 0 10px; border-radius: 6px; border: 1px solid #45454b;
  background: #2b2b30; color: #fff; font: 700 14px "DM Sans", sans-serif; cursor: pointer;
}
.bus-key:hover:not(:disabled) { filter: brightness(1.2); }
.bus-key:disabled { cursor: default; opacity: .75; }
.bus-key.pgm-on { background: #c4231f; border-color: #ff5a4a; opacity: 1; }
.bus-key.pvw-on { background: #1d8a3e; border-color: #3ccf6a; }
.bus-key.lost { box-shadow: inset 0 -4px 0 #ff3b30; }
.bus-key.unset { color: #8a8a90; }

/* K48: ON AIR / REC lights — app bar pills and the Live page switches. */
.light-pill { font-weight: 800; font-size: 12px; letter-spacing: .08em; padding: 3px 9px; border-radius: 4px; margin-right: 8px; color: #6d6d72; border: 1px solid #45454b; }
.light-pill.on { color: #fff; background: #d11a1a; border-color: #ff4a4a; box-shadow: 0 0 10px rgba(255, 40, 40, .6); }
.light-button { min-width: 110px; height: 46px; border-radius: 8px; border: 1px solid #45454b; background: #2b2b30; color: #8a8a90;
  font: 800 16px "DM Sans", sans-serif; letter-spacing: .08em; cursor: pointer; }
.light-button.on { color: #fff; background: #d11a1a; border-color: #ff4a4a; box-shadow: 0 0 14px rgba(255, 40, 40, .55); }
.light-button:disabled { cursor: default; opacity: .7; }

/* K114 / K169: level meters and mixer strips. */
.meter { position: relative; width: 12px; height: 100%; min-height: 160px; background: #141416; border-radius: 3px; overflow: hidden; }
.meter.horizontal { width: 100%; height: 8px; min-height: 0; }
.meter-fill { position: absolute; left: 0; bottom: 0; width: 100%; transition: height 50ms linear, width 50ms linear; }
.meter.horizontal .meter-fill { top: 0; bottom: 0; height: 100%; }
.meter-fill.green { background: #3ccf6a; }
.meter-fill.yellow { background: #e5c22b; }
.meter-fill.red { background: #ff4a3d; }
.meter-clip { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #ff2020; }
.meter.horizontal .meter-clip { left: auto; right: 0; top: 0; bottom: 0; width: 4px; height: auto; }
.program-meter { display: flex; flex-direction: column; gap: 3px; width: 180px; }
.program-audio { width: 100%; height: 32px; }

.strips { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
/* Remote guests: the six slots. */
.guest-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.guest-slot { min-height: 120px; }
.guest-devices { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.strip { background: #2b2b30; border: 1px solid #3d3d42; border-radius: 8px; padding: 10px 8px; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.strip.master { width: 128px; border-color: #F2954A; }
.strip.muted { background: #331c1c; }
.strip-label { font-weight: 800; font-size: 13px; text-align: center; min-height: 34px; display: flex; align-items: center; color: #fff; word-break: break-word; }
.strip-body { display: flex; gap: 6px; height: 220px; align-items: stretch; }
.fader { writing-mode: vertical-lr; direction: rtl; height: 220px; width: 30px; margin: 0; accent-color: #F2954A; cursor: ns-resize; }
.fader:disabled { cursor: default; opacity: .6; }
.strip-db { font-variant-numeric: tabular-nums; font-size: 12px; color: #c8c8cc; }
.strip-info { font-size: 11px; color: #8a8a90; display: flex; gap: 6px; min-height: 14px; }
.mute-button { width: 80px; height: 36px; border-radius: 6px; border: 1px solid #45454b; background: #3a3a40; color: #fff; font: 800 13px "DM Sans", sans-serif; cursor: pointer; }
.mute-button.on { background: #c0201f; border-color: #ff4a4a; }
.mute-button.auto { background: #F2954A; color: #000; border-color: #F2954A; }
/* K180: listening to a guest in the browser before its sound goes to air. */
.listen-button { width: 80px; height: 28px; margin-top: 4px; border-radius: 6px; border: 1px solid #45454b; background: #2a2a30; color: #ddd; font: 700 11px "DM Sans", sans-serif; cursor: pointer; }
.listen-button.on { background: #1f6fc0; border-color: #4aa0ff; color: #fff; }
.mute-button:disabled { opacity: .6; cursor: default; }