/* THE BOOTH — synced YouTube radio (Extras). Magenta/rose accent to match the Extras panels. Lives
   inside a site panel's .site-body. */

.chat-panel[data-room="booth"] { --panel-cap: #c383b3; }
.chat-panel[data-room="booth"] .panel-icon { color: #c383b3; }
.chat-panel[data-room="booth"] .panel-inner { background: #0d0a15; }
.chat-panel[data-room="booth"] .chat-head { background: #141220; border-bottom-color: #241f36; }

.site-body.booth-body { position: relative; display: flex; flex-direction: column; min-height: 0; background: #0d0a15; overflow: hidden; }
.booth-body, .booth-player, .booth-stations { min-height: 0; }

/* ---- station list ---- */
.booth-stations { display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a2e4a transparent; }
.booth-list { display: flex; flex-direction: column; gap: 10px; }
.booth-sec { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; color: #5c6f84; }
.bs-ico-img { background-size: cover; background-position: center; color: transparent; }
/* "Create a Station" — dashed accent button under the list. */
.booth-create { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; padding: 12px; border-radius: 9px;
  border: 1px dashed #4a3a55; background: transparent; color: #c383b3; font-family: var(--font-cond, var(--font-ui)); font-size: 14px; font-weight: 700; letter-spacing: .03em; transition: border-color .12s, background .12s, color .12s; }
.booth-create:hover { border-color: #c383b3; background: rgba(195,131,179,.08); color: #f2cfe2; }
.booth-create:disabled { opacity: .5; cursor: not-allowed; }
.booth-station { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; padding: 13px 14px; border-radius: 9px;
  border: 1px solid #2e2440; background: linear-gradient(180deg, #16121f, #120e1a); transition: border-color .12s, transform .1s; }
.bs-live { position: absolute; top: 8px; right: 12px; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #7bdca0; }
.bs-live[hidden] { display: none; }
.bs-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #3ad07a; box-shadow: 0 0 6px #3ad07a; animation: bsLivePulse 1.6s ease-in-out infinite; }
/* On air but nothing playing = amber "dead air". */
.bs-live.idle { color: #e0b25a; }
.bs-live.idle .bs-live-dot { background: #e0a63c; box-shadow: 0 0 6px #e0a63c; }
@keyframes bsLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.booth-station:hover { border-color: #4a3a55; transform: translateY(-1px); }
/* Off-air station → grayed out. */
.booth-station.booth-station-off { background: linear-gradient(180deg, #14141a, #101015); border-color: #26262e; }
.booth-station.booth-station-off .bs-name { color: #82828c; }
.booth-station.booth-station-off .bs-tag, .booth-station.booth-station-off .bs-sub { color: #64646c; }
.booth-station.booth-station-off .bs-ico { background: rgba(255,255,255,.05); color: #82828c; }
.booth-station.booth-station-off .bs-ico-img { filter: grayscale(1) brightness(.62); }
.booth-station.booth-station-off .bs-play { color: #55555c; }
.booth-station.booth-station-off:hover { border-color: #3a3a44; }
.bs-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: rgba(195,131,179,.14); color: #e8b0d0; font-size: 17px; }
.bs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bs-name { font-family: var(--font-cond, var(--font-ui)); font-size: 16px; font-weight: 700; color: #f0dcea; letter-spacing: .02em; }
.bs-tag { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; color: #8a7d90; letter-spacing: .04em; margin-left: 6px; vertical-align: middle; }
.bs-sub { font-family: var(--font-mono); font-size: 10.5px; color: #8a7d90; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-now { color: #c9a9bf; }
.bs-here { flex: none; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; color: #c9a9bf; }
.bs-here i { font-size: 9px; opacity: .8; }
.bs-play { flex: none; width: 20px; display: grid; place-items: center; color: #c383b3; font-size: 24px; }
.booth-hint { font-family: var(--font-mono); font-size: 10.5px; color: #6a5c72; padding: 2px 2px; }

/* ---- player view ---- */
.booth-player { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.booth-topbar { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #1c1830; }
.booth-back { flex: none; width: 22px; height: 28px; display: grid; place-items: center; cursor: pointer; border: none; border-radius: 6px; background: transparent; color: #9a8ba4; font-size: 14px; transition: color .12s; margin-right: -2px; }
.booth-back:hover { color: #f2cfe2; }
.booth-stationimg { flex: none; width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; background: rgba(195,131,179,.14); color: #e8b0d0; font-size: 14px; }
.booth-stationimg.has-img { background-size: cover; background-position: center; color: transparent; }
.booth-title { flex: 1; min-width: 0; font-family: var(--font-cond, var(--font-ui)); font-size: 15px; font-weight: 700; letter-spacing: .01em; color: #f2f2f6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booth-here { flex: none; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; color: #c9a9bf; }
.booth-here i { font-size: 9px; opacity: .8; }
/* ON AIR / OFF AIR toggle (owner of a member station). Grey = off, green = broadcasting. */
.booth-air { flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 3px 9px; border-radius: 999px; border: 1px solid #3a2e4a; background: transparent; color: #8a8594; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .12em; transition: color .12s, border-color .12s, background .12s; }
.booth-air[hidden] { display: none; }
.booth-air:hover { border-color: #6a5c72; color: #c9a9bf; }
.booth-air-dot { width: 7px; height: 7px; border-radius: 50%; background: #6a5c72; transition: background .12s, box-shadow .12s; }
.booth-air.on { color: #7bdca0; border-color: rgba(58,208,122,.5); background: rgba(58,208,122,.08); }
.booth-air.on:hover { border-color: #3ad07a; }
.booth-air.on .booth-air-dot { background: #3ad07a; box-shadow: 0 0 6px #3ad07a; animation: bsLivePulse 1.6s ease-in-out infinite; }
.panel-air { margin: 0 8px 0 4px; }   /* in the panel header, sits before the window buttons */
.panel-here { margin: 0 6px 0 4px; }   /* listener count in the panel header */
/* Right-hand action buttons (mute · volume · save): borderless icon buttons, snug together. */
.booth-actions { display: flex; align-items: center; gap: 1px; }
.booth-mute, .booth-volbtn, .booth-save, .booth-gear { width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; border: none; border-radius: 6px; background: transparent; color: #8a8594; font-size: 13px; transition: color .12s, background .12s; }
.booth-mute:hover, .booth-volbtn:hover, .booth-save:hover, .booth-gear:hover { color: #f2cfe2; background: rgba(195,131,179,.12); }
.booth-mute.is-muted { color: #b5665c; }
.booth-mute.is-muted:hover { color: #c9776b; background: rgba(181,102,92,.14); }
.booth-gear[hidden] { display: none; }
/* Volume: hover the button to reveal a vertical slider popover BELOW it. */
.booth-vol { position: relative; flex: none; }
.booth-volpop { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: none; margin-top: 6px; padding: 12px 10px; z-index: 40;
  background: #16121f; border: 1px solid #3a2e4a; border-radius: 8px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.8); }
/* Transparent bridge over the gap so moving from the button to the slider doesn't drop the hover. */
.booth-volpop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.booth-vol:hover .booth-volpop, .booth-volpop:hover { display: block; }
.booth-volrange { width: 20px; height: 96px; writing-mode: vertical-lr; direction: rtl; -webkit-appearance: slider-vertical; appearance: slider-vertical; accent-color: #c383b3; cursor: pointer; }

.booth-stage { flex: none; position: relative; background: #05070c; border-bottom: 1px solid #17121f; }
.booth-yt { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.booth-yt iframe, .booth-yt > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Cover the player while it seeks to the live position on a mid-song join (hides the 0:00 flash). */
.booth-cloak { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: #05070c; color: #6a5c72; }
.booth-cloak[hidden] { display: none; }
.booth-cloak i { font-size: 30px; color: #8f5f7b; animation: boothSpin 1.6s linear infinite; }
.booth-idle { aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #6a5c72; text-align: center; padding: 0 24px; }
.booth-idle i { font-size: 30px; color: #4a3a55; animation: boothSpin 3.4s linear infinite; }
.booth-idle span { font-family: var(--font-mono); font-size: 11.5px; max-width: 300px; }
@keyframes boothSpin { to { transform: rotate(360deg); } }
.booth-err { aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #c89aae; text-align: center; padding: 0 26px; }
.booth-err i { font-size: 26px; color: #8f5f7b; }
.booth-err span { font-family: var(--font-mono); font-size: 11.5px; max-width: 320px; line-height: 1.5; }

.booth-now { flex: none; padding: 10px 12px 6px; }
.booth-nowlbl { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .2em; color: #8f5f7b; }
.booth-remain { letter-spacing: .06em; color: #c9a9bf; }
.booth-nowttl { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: #f0dcea; margin-top: 3px; line-height: 1.25; }
.booth-nowby { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-family: var(--font-mono); font-size: 10.5px; color: #8a7d90; }

/* Station info (member stations): a simple STATION DESCRIPTION header, the text, then the owner. No boxes. */
.booth-about { flex: none; margin: 6px 14px 14px; margin-top: auto; }   /* margin-top:auto pins it to the bottom */
.booth-about[hidden] { display: none; }
.booth-about-hd { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .2em; color: #8f5f7b; margin-bottom: 4px; }
.booth-about-desc { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.25; color: #c9bcd0; }
.booth-about-owner { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.booth-about-av { flex: none; width: 26px; height: 26px; border-radius: 6px; background: #1c1730 center/cover no-repeat; }
.booth-about-av-t { display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; font-weight: 700; border: 1px solid #2e2440; }
.booth-about-oname { flex: none; font-family: var(--font-cond, var(--font-ui)); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.booth-about-tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ui); font-size: 11.5px; font-style: italic; color: #8a7d90; }

/* Owner bar (ON AIR toggle + mic) above the queue input. */
.booth-ownerbar { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px 4px; }
.booth-ownerbar[hidden] { display: none; }
.booth-mic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; border: none; border-radius: 6px; background: transparent; color: #c383b3; font-size: 15px; transition: color .12s; }
.booth-mic:hover { color: #e8b0d0; }
/* While recording, hide the mic and show the recording bar (to the right of ON AIR) in its slot. */
.booth-ownerbar.recording .booth-mic { display: none; }
.booth-pause { flex: none; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; border: none; border-radius: 6px; background: transparent; color: #c383b3; font-size: 14px; transition: color .12s; }
.booth-pause:hover { color: #e8b0d0; }
.booth-pause.on { color: #e0b054; }   /* queue paused = amber */
.booth-ownerbar.recording .booth-pause { display: none; }
/* Snug cluster of record / go-live / pause buttons. */
.booth-otools { flex: none; display: inline-flex; align-items: center; gap: 2px; }
.booth-mic .fa-circle { font-size: 11px; }   /* record dot a touch smaller than the mic glyph was */
.booth-live { flex: none; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; border: none; border-radius: 6px; background: transparent; color: #c383b3; font-size: 15px; transition: color .12s; }
.booth-live[hidden] { display: none; }
.booth-live:hover { color: #e8b0d0; }
.booth-live.on { color: #ff5a5a; animation: bsLivePulse 1.1s ease-in-out infinite; }   /* streaming = pulsing red */
.booth-ownerbar.recording .booth-otools { display: none; }
/* Live voice stage — owner avatar + pulsing LIVE badge (mirrors the voice/intermission stages). */
.booth-livestage { aspect-ratio: 16 / 9; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #05070c; }
.booth-livestage[hidden] { display: none; }
.booth-live-av { width: 68px; height: 68px; border-radius: 12px; background: #1c1730 center/cover no-repeat; display: grid; place-items: center; font-family: var(--font-cond, var(--font-ui)); font-size: 30px; font-weight: 700; color: #e8b0d0; border: 1px solid #3a2e4a; }
.booth-live-lbl { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #ff6a6a; }
.booth-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 7px #ff5a5a; animation: bsLivePulse 1.1s ease-in-out infinite; }
.booth-recslot { flex: 1; min-width: 0; }
.booth-recslot .cmp-rec { border-bottom: 1px solid #33285e; border-radius: 6px; background: #171130; border-color: #33285e; }

/* Voice-message stage: broadcaster's avatar + "A message from the broadcaster". */
.booth-voice { aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #05070c; }
.booth-voice[hidden] { display: none; }
.booth-voice-av { width: 68px; height: 68px; border-radius: 12px; background: #1c1730 center/cover no-repeat; display: grid; place-items: center; font-family: var(--font-cond, var(--font-ui)); font-size: 30px; font-weight: 700; color: #e8b0d0; border: 1px solid #3a2e4a; }
.booth-voice-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: #9a8ba4; }
/* Paused "intermission" stage — owner avatar on a dark canvas, no label. */
.booth-paused { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: #05070c; }
.booth-paused[hidden] { display: none; }
.booth-paused-av { width: 68px; height: 68px; border-radius: 12px; background: #1c1730 center/cover no-repeat; display: grid; place-items: center; font-family: var(--font-cond, var(--font-ui)); font-size: 30px; font-weight: 700; color: #e8b0d0; border: 1px solid #3a2e4a; }
/* Voice queue row: mic tile + inline voice card. */
.booth-qthumb-v { display: grid; place-items: center; background: rgba(195,131,179,.14); color: #e8b0d0; font-size: 14px; }
.booth-qvoice { display: block; min-width: 0; }
.booth-qvoice .vc-card { background: transparent; padding: 0; border: none; box-shadow: none; }
.booth-qvoice .vc-card:hover { border: none; box-shadow: none; }
/* Reorder is initiated ONLY from the grip handle, so the voice card's waveform seek stays interactive. */
.booth-qgrip { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; align-self: stretch; cursor: grab; color: #4e4459; opacity: 0; transition: opacity .12s, color .12s; font-size: 12px; }
.booth-qrow:hover .booth-qgrip { opacity: 1; }
.booth-qgrip:hover { color: #c383b3; }
.booth-qgrip:active { cursor: grabbing; }

/* Broadcaster's "now message" under Now Playing — chat-style row, fades in/out. */
.booth-msg { flex: none; display: flex; align-items: flex-start; gap: 9px; margin: 0 12px 8px; padding: 8px 11px; border-radius: 0; border-left: 3px solid #c383b3; background: rgba(195,131,179,.09); opacity: 0; transform: translateY(-4px); transition: opacity .28s ease, transform .28s ease; }
.booth-msg[hidden] { display: none; }
.booth-msg.in { opacity: 1; transform: translateY(0); }
.booth-msg-av { flex: none; width: 26px; height: 26px; border-radius: 6px; background: #1c1730 center/cover no-repeat; }
.booth-msg-av-t { display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; font-weight: 700; border: 1px solid #2e2440; }
.booth-msg-body { flex: 1; min-width: 0; }
.booth-msg-hd { display: flex; align-items: baseline; gap: 7px; }
.booth-msg-by { font-family: var(--font-cond, var(--font-ui)); font-size: 13px; font-weight: 700; }
.booth-msg-time { font-family: var(--font-mono); font-size: 9.5px; color: #6a5c72; }
.booth-msg-text { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.35; color: #dbcbe0; margin-top: 2px; word-break: break-word; }
.booth-msg-x { flex: none; width: 20px; height: 20px; display: grid; place-items: center; cursor: pointer; border: none; border-radius: 5px; background: transparent; color: #7a6d80; font-size: 12px; transition: color .12s, background .12s; }
.booth-msg-x:hover { background: #a8455f; color: #fff; }

/* Owner message composer under the queue input. */
.booth-saybar { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 12px 10px; }
.booth-saybar[hidden] { display: none; }
.booth-sayin { flex: 1; min-width: 0; height: 30px; padding: 0 11px; background: #0a0812; border: 1px solid #322944; border-radius: 6px; color: #dbe6f2; font-family: var(--font-ui); font-size: 12.5px; outline: none; }
.booth-sayin:focus { border-color: #c383b3; }
.booth-saysend { flex: none; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; border: 1px dashed #8f5f7b; border-radius: 6px; background: transparent; color: #c383b3; font-size: 12px; transition: background .12s, color .12s, border-color .12s; }
.booth-saysend:hover { background: #8f5f7b; border-color: #8f5f7b; color: #0d0a15; }

.booth-queuewrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.booth-queuewrap[hidden] { display: none; }
.booth-queuebar { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 12px 10px; }
.booth-qin { flex: 1; min-width: 0; height: 30px; padding: 0 11px; background: #0a0812; border: 1px solid #322944; border-radius: 6px; color: #dbe6f2; font-family: var(--font-mono); font-size: 12px; outline: none; }
.booth-qin:focus { border-color: #c383b3; }
.booth-qin:disabled { color: #6a5c72; }
/* Add / send buttons: dashed outline at rest, filled on hover. */
.booth-qadd { flex: none; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; border: 1px dashed #8f5f7b; border-radius: 6px; background: transparent; color: #c383b3; font-size: 13px; transition: background .12s, color .12s, border-color .12s; }
.booth-qadd:hover { background: #8f5f7b; border-color: #8f5f7b; color: #0d0a15; }
.booth-qadd:disabled { background: transparent; border-color: #3a2e44; color: #5a4a62; cursor: not-allowed; }

.booth-queuelist { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 12px; scrollbar-width: thin; scrollbar-color: #3a2e4a transparent; }
.booth-queuelist::-webkit-scrollbar { width: 8px; }
.booth-queuelist::-webkit-scrollbar-thumb { background: #3a2e4a; border-radius: 4px; }
.booth-qhead { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .2em; color: #8f5f7b; padding: 4px 0 8px; }
.booth-qtotal { letter-spacing: .06em; color: #8f5f7b; }
.booth-qempty { font-family: var(--font-mono); font-size: 11px; color: #6a5c72; padding: 8px 0; }
.booth-qrow { position: relative; display: flex; align-items: center; gap: 7px; padding: 7px 6px 7px 2px; border-radius: 6px; border-bottom: 1px solid rgba(255,255,255,.04); transition: opacity .34s ease, transform .34s ease, background .12s ease; }
.booth-qrow.booth-qown:hover { background: rgba(195,131,179,.10); }
/* Remove (×) button — hidden until the owner hovers the row. */
/* Owner per-track tools, top-right: repeat (↻) + remove (×). Revealed on hover; an ACTIVE repeat stays shown. */
.booth-qtools { position: absolute; top: 4px; right: 4px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.booth-qrepeat, .booth-qx { width: 20px; height: 20px; display: grid; place-items: center; cursor: pointer; border: none; border-radius: 5px; background: rgba(6,4,12,.72); color: #c89aae; font-size: 11px; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.booth-qrow.booth-qown:hover .booth-qrepeat, .booth-qrow.booth-qown:hover .booth-qx { opacity: 1; }
.booth-qx:hover { background: #a8455f; color: #fff; }
.booth-qrepeat:hover { background: rgba(195,131,179,.3); color: #f2cfe2; }
.booth-qrepeat.on { opacity: 1; color: #7bdca0; }   /* on repeat = green, always visible */
.booth-qrepeat.on:hover { color: #9ff0bd; }
.booth-qfx-in { animation: boothQIn .42s ease; }        /* newly queued track fades in */
@keyframes boothQIn { from { opacity: 0; transform: translateY(-8px); } }
.booth-qfx-out { opacity: 0; transform: translateX(-20px); }   /* front track fades out as it goes to NOW PLAYING */
/* Owner drag-reorder affordances. */
.booth-qrow.booth-qdrag-on { cursor: grab; }
.booth-qrow.booth-qdragging { opacity: .4; }
.booth-qrow.booth-qover { box-shadow: inset 0 2px 0 #c383b3; }
.booth-qn { flex: none; width: 16px; text-align: right; font-family: var(--font-mono); font-size: 11px; color: #6a5c72; }
.booth-av { flex: none; width: 24px; height: 24px; border-radius: 6px; background-size: cover; background-position: center; background-color: #1c1730; }
.booth-av-t { display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; border: 1px solid #2e2440; }
.booth-qthumb { flex: none; width: 44px; height: 26px; border-radius: 4px; background: #000 center/cover no-repeat; }
.booth-qmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.booth-qttl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ui); font-size: 12.5px; color: #d8c6d2; }
.booth-qdur { font-family: var(--font-mono); font-size: 9.5px; color: #7a6d80; letter-spacing: .02em; }
.booth-qdur[hidden] { display: none; }
.booth-qby { flex: none; font-family: var(--font-mono); font-size: 10px; color: #7a6d80; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Drag a YouTube link over the panel → highlight. */
.booth-body.booth-drop::after { content: "DROP TO QUEUE"; position: absolute; inset: 6px; z-index: 20; pointer-events: none;
  border: 2px dashed #c383b3; border-radius: 8px; background: color-mix(in srgb, #c383b3 12%, rgba(9,7,14,.6)); display: grid; place-content: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: #e8b0d0; }

/* ---- create / station-settings form ---- */
.booth-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.booth-form[hidden] { display: none; }
.booth-formcard { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bf-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #1c1830; }
.bf-back { width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; border: 1px solid #3a2e4a; border-radius: 6px; background: transparent; color: #c9a9bf; font-size: 12px; transition: color .12s, border-color .12s; }
.bf-back:hover { color: #f2cfe2; border-color: #c383b3; }
.bf-title { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #e8b0d0; }
.bf-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: #3a2e4a transparent; }
.bf-imgrow { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.bf-img { flex: none; width: 64px; height: 64px; border-radius: 10px; background: #1c1730 center/cover no-repeat; border: 1px solid #2e2440; }
.bf-img.bf-img-empty { display: grid; place-items: center; }
.bf-imgcol { display: flex; flex-direction: column; gap: 4px; }
.bf-upload { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 11px; border-radius: 6px; border: 1px solid #3a2e4a; background: transparent; color: #d8c6d2; font-family: var(--font-mono); font-size: 11px; transition: border-color .12s, color .12s; }
.bf-upload:hover { border-color: #c383b3; color: #f2cfe2; }
.bf-imghint { font-family: var(--font-mono); font-size: 9.5px; color: #6a5c72; }
.bf-label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .2em; color: #8f5f7b; margin-top: 4px; }
.bf-name, .bf-desc { width: 100%; padding: 9px 11px; background: #0a0812; border: 1px solid #322944; border-radius: 6px; color: #dbe6f2; font-family: var(--font-ui); font-size: 13px; outline: none; box-sizing: border-box; resize: none; }
.bf-name:focus, .bf-desc:focus { border-color: #c383b3; }
.bf-err { font-family: var(--font-mono); font-size: 11px; color: #e58aae; }
.bf-err[hidden] { display: none; }
.bf-actions { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid #1c1830; }
.bf-spacer { flex: 1; }
.bf-cancel, .bf-delete { cursor: pointer; padding: 8px 14px; border-radius: 6px; border: 1px solid #3a2e4a; background: transparent; font-family: var(--font-cond, var(--font-ui)); font-size: 13px; font-weight: 600; transition: border-color .12s, color .12s; }
.bf-cancel { color: #c9a9bf; }
.bf-cancel:hover { border-color: #c383b3; color: #f2cfe2; }
.bf-delete { color: #e58aae; border-color: #5a2a3e; }
.bf-delete:hover { background: rgba(210,59,59,.14); color: #fff; }
.bf-submit { cursor: pointer; padding: 8px 18px; border-radius: 6px; border: none; background: #8f5f7b; color: #0d0a15; font-family: var(--font-cond, var(--font-ui)); font-size: 13px; font-weight: 700; transition: background .12s; }
.bf-submit:hover { background: #a8708e; }