/*
 * Fortis Music — "Night glass" tactile / glass visual layer (fm-tactile.css)
 *
 * Shared .fx-* components are opt-in. The "JUKEBOX ROOM" section at the
 * bottom is the first consumer: it maps #now-sub-jukebox #jbRoom to these
 * looks. Dashboard (#jbDash) and other Now Live rooms are untouched.
 *
 * Rules for .fx-* components:
 * - Only selectors that start with .fx- (plus their ::before/::after,
 *   :active, :focus-visible, :disabled, ::placeholder, and state classes
 *   such as .is-down / .is-on / .is-live / .is-red / .is-disabled).
 * - Sole exception in the component layer: a :root block that defines ONLY
 *   new --fx-* custom properties. Do not redefine existing tokens
 *   (--bg, --text, --muted, --green, --grad, etc.).
 * - No bare element selectors (nav, button, input, body, *, …).
 * - No z-index, no position:fixed, no !important.
 *
 * Exception — JUKEBOX ROOM section (end of file):
 * - Selectors may start with #now-sub-jukebox (and #jbRoom) so they can
 *   override styles.css without !important. Visual properties only, with
 *   a few named layout exceptions documented in that section.
 */

:root {
  --fx-glass-a: rgba(30, 20, 54, 0.62);
  --fx-glass-b: rgba(13, 8, 28, 0.74);
  --fx-plate-a: rgba(46, 32, 82, 0.68);
  --fx-plate-b: rgba(19, 12, 40, 0.78);
  --fx-key-a: rgba(88, 70, 146, 0.58);
  --fx-key-b: rgba(40, 30, 76, 0.68);
  --fx-well-a: rgba(5, 3, 14, 0.58);
  --fx-well-b: rgba(12, 8, 26, 0.46);
  --fx-seat: rgba(4, 2, 12, 0.62);
  --fx-rim: rgba(255, 255, 255, 0.17);
  --fx-edge: rgba(255, 255, 255, 0.10);
  --fx-drop: rgba(4, 1, 12, 0.6);
  --fx-blur: 22px;
  --fx-live: var(--green);
  --fx-live-hi: #8cffd6;
  --fx-live-glow: rgba(0, 230, 118, 0.6);
  --fx-live-ghost: rgba(0, 230, 118, 0.075);
  --fx-grad: linear-gradient(90deg,#E91E8C 0%,#9B27AF 30%,#5B2FD9 60%,#4B26FF 100%);
  --fx-play: linear-gradient(135deg, #E91E8C 0%, #7B2FFF 55%, #4B26FF 100%);
  --fx-grad-glow: rgba(123, 47, 255, 0.55);
  --fx-lcd-a: #071a1d;
  --fx-lcd-b: #030c0f;
  --fx-metal-a: #7c72ac;
  --fx-metal-b: #282244;
  --fx-red: #ff3b5c;
  --fx-status-live: var(--fx-red);
  --fx-status-replay: #4B8CFF;
  --fx-status-sched: #FFD54A;
  --fx-status-paused: #FFD54A;
  --fx-billboard-metal-a: #9a92c4;
  --fx-billboard-metal-b: #2a2448;
  --fx-billboard-beam: rgba(255, 214, 160, 0.38);
  --fx-billboard-stage-gap: 8px;
  --fx-pass-w: 384px;
  --fx-billboard-ratio: 4 / 1;
  --fx-page-chat-pad: 88px;

  /* Design scale — extracted from Jukebox room (Night glass). */
  --fx-fs-title: 26px;
  --fx-fw-title: 600;
  --fx-fw-heading: 600;
  --fx-fw-ui: 500;
  --fx-fw-body: 400;
  --fx-lh-title: 1.1;
  --fx-track-title: -0.02em;
  --fx-fs-panel: 14px;
  --fx-fw-panel: var(--fx-fw-heading);
  --fx-fs-meta: 11.5px;
  --fx-fs-meta-sm: 11px;
  --fx-key-h: 28px;
  --fx-key-fs: 12px;
  --fx-key-fw: var(--fx-fw-ui);
  --fx-key-pad-x: 8px;
  --fx-key-radius: 10px;
  --fx-key-radius-sm: 8px;
  --fx-key-min-w: 64px;
  --fx-share-h: 28px;
  --fx-share-fs: 12px;
  --fx-row-h: 40px;
  --fx-row-gap: 4px;
  --fx-row-pad-x: 8px;
  --fx-row-art: 32px;
  --fx-row-art-wrap-w: 40px;
  --fx-row-radius: 16px;
  --fx-row-title-fs: 14px;
  --fx-row-title-fw: var(--fx-fw-ui);
  --fx-row-title-lh: 1.15;
  --fx-row-meta-fs: 11.5px;
  --fx-row-meta-lh: 1.15;
  --fx-rkey-size: 28px;
  --fx-field-h: 36px;
  --fx-field-fs: 13px;
  --fx-field-pad-x: 12px;
  --fx-field-radius: 14px;
  --fx-switch-w: 44px;
  --fx-switch-h: 24px;
  --fx-switch-knob: 18px;
  --fx-chip-h: 28px;
  --fx-chip-fs: 11px;
  --fx-chip-fw: var(--fx-fw-ui);
  --fx-chip-pad-x: 10px;
  --fx-panel-radius: 18px;
  --fx-panel-pad: 12px;
  --fx-panel-pad-y-sm: 8px;
  --fx-gap: 12px;
  --fx-lcd-h: 40px;
  --fx-lcd-pad-x: 10px;
  --fx-lcd-digit-w: 14px;
  --fx-lcd-digit-h: 24px;
  --fx-clock-digit-w: 18px;
  --fx-clock-digit-h: 30px;
  --fx-clock-dot: 4px;
  --fx-clock-colon-gap: 4px;
  --fx-clock-colon-pad-x: 2px;
  --fx-chrome-pad: 14px;
  --fx-contact-pad: 28px;
  --fx-contact-mark: 48px;
  --fx-contact-mark-icon: 22px;
  --fx-lv-room-head: 76px;
  --fx-lv-room-info: 236px;
  --fx-lv-room-chat: 440px;
  --fx-lv-room-host-av: 46px;

  /* Directory template (Discover Artists + future directories) */
  --fx-dr-aside-max: 380px;
  --fx-dr-card-av: 46px;
  --fx-dr-av-sm: 32px;
  --fx-dr-grid-min: 160px;
  --fx-dr-cover-h: 74px;
  --fx-card-min: 260px;
  --fx-card-max: 320px;
  --fx-card-av-sm: 24px;
  --fx-lv-list-thumb-w: 64px;
  --fx-lv-list-thumb-h: 36px;
  --fx-lv-cover-ratio: 16 / 9;
  --fx-lv-cover-out-w: 1280;
  --fx-lv-cover-out-h: 720;
  --fx-lv-upnext-cover-w: 56px;
  --fx-lv-upnext-cover-h: 31.5px;
  --fx-lvn-crop-z: 220;
  --fx-lvn-crop-frame-max: 560px;
  --fx-lvn-crop-overlay: rgba(4, 1, 12, 0.72);
  --fx-warn: #f0b429;
  --fx-lv-list-status-w: 78px;
  --fx-lv-list-cols: var(--fx-lv-list-thumb-w) var(--fx-lv-list-status-w) minmax(0, 1fr) 92px 120px 110px 92px 96px 96px;
  --fx-lv-list-cols-md: var(--fx-lv-list-thumb-w) var(--fx-lv-list-status-w) minmax(0, 1fr) 92px 92px 96px 96px;
  --fx-lv-list-cols-sm: var(--fx-lv-list-thumb-w) var(--fx-lv-list-status-w) minmax(0, 1fr) 92px;
  --fx-menu-bg: rgba(18, 12, 36, 0.96);
  --fx-menu-blur: 18px;
  --fx-menu-z: 200;
  --fx-menu-radius: 14px;
  --fx-menu-w: 280px;
  --fx-menu-max-h: 60vh;
  --fx-menu-item-h: 30px;
  --fx-menu-pad: 6px;
  --fx-lv-up-av: 30px;
  --fx-lv-up-row-h: 52px;
  --fx-lv-pill-fs: 10.5px;
  --fx-lv-search-max: 380px;
  --fx-lvn-type-h: 66px;
  --fx-lvn-preview-max: 500px;
  --fx-blue: #4ea1ff;

  /* Floating glass top nav */
  --fx-nav-top: 8px;
  --fx-nav-h: 52px;
  --fx-nav-inset-x: 14px;
  --fx-nav-pad-x: 22px;
  --fx-nav-radius: 16px;
  --fx-nav-fs: 12.5px;
  --fx-nav-fw: 500;
  --fx-nav-bg: rgba(10, 4, 24, 0.50);
  --fx-nav-blur: 18px;
  --fx-nav-sat: 140%;
  --fx-nav-rim: rgba(255, 255, 255, 0.14);
  --fx-nav-edge: rgba(255, 255, 255, 0.08);
  --fx-nav-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.7);
  --fx-nav-chrome: calc(var(--fx-nav-top) + var(--fx-nav-h));
  --fx-nav-avatar: 34px;
  --fx-nav-notif-size: 34px;
  --fx-nav-notif-gap: 18px;
  --fx-chip-sm-h: 20px;
  --fx-chip-sm-fs: 10px;
  --fx-chip-sm-pad-x: 7px;
  --fx-seg-sm-w: 10px;
  --fx-seg-sm-h: 16px;
  --fx-nav-notif-z: 110;
  --fx-admin-h: 26px;

  /* Ambient glow — platform-wide (body::after in styles.css + opaque shells) */
  --fx-ambient-color: #7B2FFF;
  --fx-ambient-color-2: #E91E8C;
  --fx-ambient-opacity: 0.18;
  --fx-ambient-opacity-2: 0.06;
  --fx-ambient-fade: 280px;
  --fx-ambient-height: min(72vh, 720px);
  --fx-ambient-bg:
    radial-gradient(
      ellipse 70% 55% at 50% 0%,
      color-mix(in srgb, var(--fx-ambient-color) calc(var(--fx-ambient-opacity) * 100%), transparent) 0%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 45% 40% at 82% 42%,
      color-mix(in srgb, var(--fx-ambient-color-2) calc(var(--fx-ambient-opacity-2) * 100%), transparent) 0%,
      transparent 68%
    );
  --fx-ambient-mask: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(100% - var(--fx-ambient-fade)),
    transparent 100%
  );
}

/*
 * Ambient on opaque full-bleed shells (solid bg covers body::after).
 * ::before = above shell background, below content (no z-index).
 * pointer-events:none — never captures clicks. Fixed to viewport top
 * so scroll / page change do not create a hard glow edge.
 */
.now-sub::before,
.lr-player-page::before,
#now-sub-jukebox::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--fx-ambient-height);
  pointer-events: none;
  background: var(--fx-ambient-bg);
  -webkit-mask-image: var(--fx-ambient-mask);
  mask-image: var(--fx-ambient-mask);
}

/* Shared immersive app shell — Live / Go live / Now Live / Jukebox layer.
   top = measured chrome (--cs-chrome-top); pad/gap from --fx-chrome-pad / --fx-gap.
   `.page > .fx-app-shell` beats `.page > div { padding: 48px 32px }` (styles.css). */
.fx-app-shell,
.page > .fx-app-shell {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--cs-chrome-top, 60px);
  z-index: 50;
  box-sizing: border-box;
  padding: var(--fx-chrome-pad);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--fx-gap);
  font-family: 'Epilogue', sans-serif;
}

/* Floating admin strip under glass nav — label + button only */
.fm-admin-toolbar {
  position: fixed;
  top: var(--fx-nav-chrome, 60px);
  left: var(--fx-nav-inset-x, 14px);
  right: var(--fx-nav-inset-x, 14px);
  z-index: 99;
  height: var(--fx-admin-h, 26px);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Epilogue', sans-serif;
  background: transparent;
  border: 0;
  border-bottom: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: hidden;
  pointer-events: none;
}
.fm-admin-toolbar-label {
  color: rgba(255, 107, 107, 0.9);
  font-weight: var(--fx-fw-ui);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex-shrink: 0;
  pointer-events: none;
}
.fm-admin-toolbar-btn {
  padding: 2px 8px;
  background: transparent;
  border: 1px solid rgba(255, 107, 107, 0.28);
  color: #FF6B6B;
  border-radius: 999px;
  font-size: 0.62rem;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  pointer-events: auto;
}

/* HTML hidden — always wins over author display:* rules */
[hidden] {
  display: none !important;
}

.fx-panel {
  position: relative;
  border-radius: var(--fx-panel-radius);
  color: var(--text);
  background: linear-gradient(165deg, var(--fx-glass-a), var(--fx-glass-b));
  -webkit-backdrop-filter: blur(var(--fx-blur)) saturate(160%);
  backdrop-filter: blur(var(--fx-blur)) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--fx-rim),
    inset 0 0 0 1px var(--fx-edge),
    0 26px 50px -18px var(--fx-drop),
    0 4px 12px -4px var(--fx-drop);
}

.fx-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  max-height: 22px;
  flex: none;
}

.fx-panel-title {
  font-size: var(--fx-fs-panel);
  font-weight: var(--fx-fw-panel);
  color: var(--text);
  flex: none;
  white-space: nowrap;
}

.fx-panel-link {
  flex: none;
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
}
.fx-panel-link:hover {
  color: var(--text);
}

.fx-panel-meta {
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--fx-chip-h);
  padding: 0 var(--fx-chip-pad-x);
  border-radius: 999px;
  font-size: var(--fx-chip-fs);
  font-weight: var(--fx-chip-fw);
  color: var(--text);
  background: linear-gradient(180deg, var(--fx-well-a), var(--fx-well-b));
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    0 1px 0 var(--fx-edge);
  border: 0;
  box-sizing: border-box;
}
.fx-chip.fx-chip--sm {
  height: var(--fx-chip-sm-h);
  padding: 0 var(--fx-chip-sm-pad-x);
  font-size: var(--fx-chip-sm-fs);
  gap: 4px;
  line-height: 1;
  vertical-align: middle;
}
.fx-chip.fx-chip--grad {
  background: var(--fx-grad);
  color: var(--t1, #fff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 0 var(--fx-edge);
}
.fx-chip.fx-chip--live {
  background: transparent;
  color: var(--fx-live);
  box-shadow: none;
  border: 1px solid var(--fx-live);
}

.fx-panel.fx-plate {
  background: linear-gradient(165deg, var(--fx-plate-a), var(--fx-plate-b));
}

.fx-row {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.36),
    0 8px 16px -8px rgba(0, 0, 0, 0.55);
}

.fx-row.is-now {
  background: linear-gradient(180deg, var(--fx-well-a), var(--fx-well-b));
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Profile pages with .fx-page-scroll scroll as a whole (Artist first).
   Document scrolls (html/body); shell is in normal flow (not fixed). */
.fx-page-scroll.page {
  overflow-x: hidden;
  overflow-y: visible;
  height: auto;
  min-height: 100vh;
  box-sizing: border-box;
}
.fx-page-scroll.page > .fx-app-shell,
.page.fx-page-scroll > .fx-app-shell {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  height: auto;
  min-height: 0;
  overflow: visible;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-bottom: calc(var(--fx-chrome-pad) + var(--fx-page-chat-pad));
}

.fx-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--fx-chip-h);
  padding: 0 var(--fx-chip-pad-x);
  border-radius: 999px;
  font-size: var(--fx-chip-fs);
  font-weight: var(--fx-chip-fw);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-sizing: border-box;
  white-space: nowrap;
  border: 1px solid transparent;
  background: transparent;
}
/* LED + label only (Now Live style) — no pill border/fill. */
.fx-status--live {
  color: var(--fx-status-live);
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}
.fx-status--replay {
  color: var(--fx-status-replay);
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}
.fx-status--sched,
.fx-status--paused {
  color: var(--fx-status-sched);
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.fx-pass {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: var(--fx-pass-w);
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--fx-panel-pad);
  flex-shrink: 0;
  align-self: start;
}
.fx-pass .pf-pass-sections > * + * {
  margin-top: var(--fx-gap);
  padding-top: var(--fx-gap);
  border-top: 1px solid var(--fx-edge);
}
.fx-pass .pf-pass-sections .fx-panel,
.fx-pass .pf-pass-sections .pf-panel {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.fx-billboard {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  padding: 0;
}
.fx-billboard.fx-panel {
  padding: 0;
}
.fx-billboard-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--fx-billboard-ratio);
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(165deg, var(--fx-plate-a), var(--fx-plate-b));
  box-shadow: none;
  cursor: pointer;
}
.fx-billboard-stage::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 32%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 210, 140, 0.42) 0%,
    rgba(255, 180, 90, 0.18) 45%,
    transparent 100%
  );
  mix-blend-mode: screen;
  opacity: 0.2;
  transition: opacity 0.55s ease;
}
.fx-billboard.is-lit .fx-billboard-stage::before {
  opacity: 0.7;
}
.fx-billboard.is-lit:hover .fx-billboard-stage::before {
  opacity: 0.85;
}
.fx-billboard-stage .fm-profile-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}
.fx-billboard-empty {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: var(--fx-field-fs);
  background: linear-gradient(165deg, var(--fx-plate-a), var(--fx-plate-b));
}
.fx-billboard-empty p {
  margin: 0;
  max-width: 28em;
  line-height: 1.45;
}
.fx-billboard-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 36px;
  padding: var(--fx-billboard-stage-gap) 12px 10px;
  box-sizing: border-box;
}
.fx-billboard-bar-left,
.fx-billboard-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fx-billboard-dots.fm-banner-dots,
.fx-billboard-bar .fm-banner-dots {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  display: flex;
  justify-content: flex-start;
  gap: 7px;
  pointer-events: auto;
}
.fx-billboard-count {
  font-size: var(--fx-fs-meta);
  color: var(--muted);
  font-weight: var(--fx-fw-ui);
}
.fx-billboard-hint {
  font-size: var(--fx-fs-meta-sm);
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .fx-billboard-stage::before {
    transition: none;
  }
}

.fx-well {
  border-radius: 14px;
  background: linear-gradient(180deg, var(--fx-well-a), var(--fx-well-b));
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.12);
}

.fx-label {
  font-size: 13px;
  font-weight: var(--fx-fw-ui);
  color: var(--muted);
}

.fx-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  font: inherit;
  font-weight: var(--fx-key-fw);
  color: var(--text);
  border-radius: var(--fx-key-radius);
  cursor: pointer;
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -2px 1px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.42),
    0 7px 13px -3px rgba(0, 0, 0, 0.55);
  transition: transform 0.07s ease, box-shadow 0.07s ease;
}
a.fx-key,
a.fx-key:hover,
a.fx-key:focus,
a.fx-key:focus-visible {
  text-decoration: none;
}

/* Tip / Vote / Share / Live filter keys — Jukebox room scale. */
.fx-key.fx-key--sm {
  height: var(--fx-key-h);
  min-width: var(--fx-key-min-w);
  padding: 0 var(--fx-key-pad-x);
  font-size: var(--fx-key-fs);
  font-weight: var(--fx-key-fw);
  box-sizing: border-box;
}

.fx-key:active,
.fx-key.is-down {
  transform: translateY(1px);
  background: linear-gradient(180deg, var(--fx-key-b), var(--fx-key-a));
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.12);
}

.fx-key.is-down {
  color: var(--fx-live);
}

.fx-key.fx-primary {
  color: var(--t1, #fff);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.28),
      rgba(255, 255, 255, 0) 48%,
      rgba(0, 0, 0, 0.18)
    ),
    var(--fx-grad);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 2px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 10px 22px -6px var(--fx-grad-glow);
}

.fx-key.fx-primary:active {
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.45);
}

.fx-key:disabled,
.fx-key.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

.fx-rkey {
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  background: radial-gradient(circle at 36% 26%, var(--fx-key-a), var(--fx-key-b) 80%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -3px 5px rgba(0, 0, 0, 0.32),
    0 0 0 3px var(--fx-seat),
    0 0 0 4px var(--fx-edge),
    0 10px 16px -2px rgba(0, 0, 0, 0.5);
}

.fx-rkey:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.55),
    0 0 0 3px var(--fx-seat),
    0 0 0 4px var(--fx-edge);
}

.fx-play {
  position: relative;
  width: 88px;
  height: 88px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--t1, #fff);
  cursor: pointer;
  background:
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.05) 0 1px,
      transparent 1px 4px
    ),
    radial-gradient(circle at 40% 22%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 50% 110%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 60%),
    var(--fx-play);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.5),
    inset 0 -8px 12px rgba(0, 0, 0, 0.3),
    0 0 0 5px var(--fx-seat),
    0 0 0 6px var(--fx-edge),
    0 16px 28px -6px rgba(0, 0, 0, 0.6),
    0 0 40px -8px var(--fx-grad-glow);
}

.fx-play::before {
  content: '';
  position: absolute;
  left: 19%;
  top: 7%;
  width: 62%;
  height: 36%;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

.fx-play > * {
  position: relative;
}

.fx-play:active {
  transform: translateY(1px) scale(0.985);
  box-shadow:
    inset 0 4px 10px rgba(0, 0, 0, 0.4),
    0 0 0 5px var(--fx-seat),
    0 0 0 6px var(--fx-edge),
    0 6px 12px -4px rgba(0, 0, 0, 0.6);
}

.fx-lcd {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  color: var(--fx-live);
  background: linear-gradient(180deg, var(--fx-lcd-a), var(--fx-lcd-b));
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 3px var(--fx-seat),
    0 0 0 4px rgba(255, 255, 255, 0.12);
}

.fx-lcd::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    172deg,
    rgba(255, 255, 255, 0.08) 0,
    rgba(255, 255, 255, 0.025) 38%,
    transparent 39%
  );
}

.fx-lcd-text {
  color: var(--fx-live);
  text-shadow: 0 0 7px var(--fx-live-glow);
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

.fx-seg {
  display: block;
  flex: none;
  overflow: visible;
  transform: skewX(-6deg);
}

.fx-seg-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  white-space: nowrap;
  flex: none;
}

.fx-seg polygon,
.fx-seg rect {
  fill: var(--fx-live-ghost);
}

.fx-seg .on {
  fill: var(--fx-live);
  filter: drop-shadow(0 0 3px var(--fx-live-glow));
}

.fx-seg-colon {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: var(--fx-colon-gap, 14px);
  padding: 0 4px;
}

.fx-seg-colon i {
  display: block;
  width: 7px;
  height: 7px;
  background: var(--fx-live);
  transform: skewX(-6deg);
  box-shadow: 0 0 6px var(--fx-live);
}

/* Shared segment clock — colon dots scale with digit height (room ratio). */
.fx-seg-clock {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.fx-seg-clock .fx-seg-colon {
  gap: var(--fx-colon-gap, var(--fx-clock-colon-gap));
  padding: 0 var(--fx-colon-pad-x, var(--fx-clock-colon-pad-x));
  align-self: center;
  justify-content: center;
}
.fx-seg-clock .fx-seg-colon i {
  width: var(--fx-colon-dot, var(--fx-clock-dot));
  height: var(--fx-colon-dot, var(--fx-clock-dot));
  box-shadow: 0 0 4px var(--fx-live);
}

.fx-seg-sym {
  font-size: 26px;
  line-height: 1;
  margin-right: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .fx-seg-colon.is-blink i {
    animation: fx-blink 1s steps(1) infinite;
  }
}

@keyframes fx-blink {
  50% { opacity: 0.18; }
}

.fx-led {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  --fx-led-c: #3a4d46;
  background: radial-gradient(
    circle at 35% 30%,
    rgba(255, 255, 255, 0.7) 0 14%,
    var(--fx-led-c) 48%,
    color-mix(in srgb, var(--fx-led-c) 45%, #000) 100%
  );
  box-shadow:
    0 0 0 2px var(--fx-seat),
    0 1px 0 2px var(--fx-edge);
}

.fx-led.is-live {
  --fx-led-c: var(--fx-live);
  box-shadow:
    0 0 0 2px var(--fx-seat),
    0 0 12px 2px var(--fx-live-glow);
}

.fx-led.is-red {
  --fx-led-c: var(--fx-red);
  box-shadow:
    0 0 0 2px var(--fx-seat),
    0 0 12px 2px rgba(255, 59, 92, 0.7);
}

.fx-led.is-amber {
  --fx-led-c: #FFB93D;
  box-shadow:
    0 0 0 2px var(--fx-seat),
    0 0 12px 2px rgba(255, 185, 61, 0.65);
}

.fx-led.is-blue {
  background: var(--fx-blue, #4ea1ff);
  box-shadow: 0 0 6px var(--fx-blue, #4ea1ff);
}

.fx-switch {
  position: relative;
  width: 52px;
  height: 28px;
  border: 0;
  padding: 0;
  border-radius: 14px;
  cursor: pointer;
  background: var(--fx-seat);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Autoplay-sized switch (Jukebox room / Live Following). */
.fx-switch.fx-switch--sm,
.fx-switch--sm {
  width: var(--fx-switch-w);
  height: var(--fx-switch-h);
  border-radius: 12px;
}
.fx-switch.fx-switch--sm::after,
.fx-switch--sm::after {
  top: 3px;
  left: 3px;
  width: var(--fx-switch-knob);
  height: var(--fx-switch-knob);
}
.fx-switch.fx-switch--sm.is-on::after,
.fx-switch--sm.is-on::after {
  left: 23px;
}

.fx-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: left 0.15s ease;
  background: radial-gradient(circle at 38% 28%, var(--fx-metal-a), var(--fx-metal-b) 85%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    0 3px 5px rgba(0, 0, 0, 0.55);
}

.fx-switch.is-on::after {
  left: 27px;
}

.fx-field {
  height: 48px;
  padding: 0 16px;
  border: 0;
  outline: 0;
  font: inherit;
  color: var(--text);
  border-radius: var(--fx-field-radius);
  background: linear-gradient(180deg, var(--fx-well-a), var(--fx-well-b));
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.12);
}

.fx-field::placeholder {
  color: var(--muted);
}

.fx-field:focus-visible {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    0 0 0 2px var(--fx-live);
}

.fx-knob-seat {
  position: relative;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.fx-knob-scale {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0.7;
  background: repeating-conic-gradient(from -1deg, var(--muted) 0 2deg, transparent 2deg 13.5deg);
  -webkit-mask:
    radial-gradient(circle, transparent 52px, #000 53px, #000 58px, transparent 59px),
    conic-gradient(from 135deg, transparent 0 90deg, #000 90deg);
  mask:
    radial-gradient(circle, transparent 52px, #000 53px, #000 58px, transparent 59px),
    conic-gradient(from 135deg, transparent 0 90deg, #000 90deg);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.fx-knob-well {
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: var(--fx-seat);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.12);
}

.fx-knob {
  position: relative;
  width: 86px;
  height: 86px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  cursor: ns-resize;
  touch-action: none;
  background:
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.035) 0 1px,
      rgba(0, 0, 0, 0.04) 1px 2px
    ),
    conic-gradient(
      from 18deg,
      var(--fx-metal-a),
      var(--fx-metal-b) 12%,
      var(--fx-metal-a) 25%,
      var(--fx-metal-b) 38%,
      var(--fx-metal-a) 50%,
      var(--fx-metal-b) 63%,
      var(--fx-metal-a) 75%,
      var(--fx-metal-b) 88%,
      var(--fx-metal-a)
    );
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.35),
    inset 0 -5px 7px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 12px 18px -2px rgba(0, 0, 0, 0.6),
    0 3px 4px rgba(0, 0, 0, 0.45);
}

.fx-knob::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.3), transparent 56%);
}

.fx-knob-rot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.fx-knob-dot {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--fx-live-hi), var(--fx-live) 65%);
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.35),
    0 0 9px var(--fx-live);
}

.fx-key:focus-visible,
.fx-rkey:focus-visible,
.fx-play:focus-visible,
.fx-switch:focus-visible,
.fx-knob:focus-visible {
  outline: 2px solid var(--fx-live);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .fx-key,
  .fx-rkey,
  .fx-play,
  .fx-switch::after {
    transition: none;
  }
}

/* ==========================================================================
 * SHARED CHAT — .fx-chat-* (Jukebox first; collab/drop later)
 * ========================================================================== */

.fx-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.fx-chat-head {
  flex: none;
  font-family: 'Epilogue', sans-serif;
  font-size: 13px;
  font-weight: var(--fx-fw-heading);
  color: var(--text);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}

.fx-chat-list-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.fx-chat-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px 14px;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--fx-well-a), var(--fx-well-b));
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.12);
}

.fx-chat-empty {
  margin: auto;
  padding: 24px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.fx-chat-day {
  align-self: center;
  margin: 10px 0 8px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* Compact (YouTube-live) chat variant — opt-in via .fx-chat--compact */
.fx-chat--compact .fx-chat-day {
  margin: 6px 0 4px;
  font-size: 11px;
}

.fx-chat--compact .fx-chat-row,
.fx-chat--compact .fx-chat-row.is-mine {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
  max-width: 100%;
  padding: 2px 4px;
  border-radius: 6px;
  box-sizing: border-box;
}

.fx-chat--compact .fx-chat-row.is-group-cont {
  margin-top: 4px;
}

.fx-chat--compact .fx-chat-row.is-mine {
  background: rgba(123, 47, 255, 0.12);
}

.fx-chat--compact .fx-chat-av,
.fx-chat--compact .fx-chat-av--spacer {
  width: 22px;
  height: 22px;
  font-size: 0.58rem;
  margin-top: 1px;
}

.fx-chat--compact .fx-chat-body {
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.35;
}

.fx-chat--compact .fx-chat-role {
  margin-right: 4px;
  vertical-align: middle;
}
.fx-chat--compact .fx-chat-name {
  display: inline;
  font-size: 13px;
  font-weight: var(--fx-fw-ui);
  margin: 0;
}

.fx-chat--compact .fx-chat-text {
  display: inline;
  font-size: 13px;
  font-weight: var(--fx-fw-body);
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.fx-chat--compact .fx-chat-bubble {
  display: none;
}

.fx-chat--compact .fx-chat-compose,
.fx-chat--compact .fm-chat-compose-zone {
  margin-top: 8px;
}

.fx-chat--compact .fx-chat-input,
.fx-chat--compact .fx-chat-compose #jbInput,
.fx-chat--compact .fx-chat textarea.fx-chat-input {
  min-height: 36px;
  height: 36px;
  max-height: 36px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.3;
  resize: none;
}

.fx-chat-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
  margin-top: 10px;
}

.fx-chat-row.is-group-cont {
  margin-top: 2px;
}

.fx-chat-row.is-mine {
  flex-direction: row-reverse;
}

.fx-chat-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: var(--fx-fw-heading);
  color: var(--t1, #fff);
  background: linear-gradient(135deg, #E91E8C, #4B26FF);
  overflow: hidden;
}

.fx-chat-av--img {
  padding: 0;
  background: var(--card2);
}

.fx-chat-av--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fx-chat-av--spacer {
  visibility: hidden;
  background: transparent;
}

.fx-chat-bubble {
  position: relative;
  max-width: 78%;
  padding: 8px 12px 18px;
  border-radius: 14px;
  box-sizing: border-box;
}

.fx-chat-bubble.is-theirs {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  border-bottom-left-radius: 14px;
}

.fx-chat-row.is-group-start .fx-chat-bubble.is-theirs {
  border-bottom-left-radius: 4px;
}

.fx-chat-bubble.is-mine {
  background: linear-gradient(135deg, #7B2FFF, #4B26FF);
  color: var(--t1, #fff);
  border-bottom-right-radius: 14px;
}

.fx-chat-row.is-group-start .fx-chat-bubble.is-mine {
  border-bottom-right-radius: 4px;
}

.fx-chat-name {
  font-size: 12px;
  font-weight: var(--fx-fw-ui);
  margin: 0 0 2px;
  line-height: 1.3;
}

.fx-chat-text {
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.fx-chat-time {
  position: absolute;
  right: 10px;
  bottom: 4px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1;
}

.fx-chat-bubble.is-mine .fx-chat-time {
  color: var(--t2, rgba(255, 255, 255, 0.7));
}

.fx-chat-typing {
  flex: none;
  height: 18px;
  margin: 4px 2px 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-chat-compose {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 0;
}

.fx-chat-compose.fm-chat-compose-zone {
  align-items: flex-end;
}

.fx-chat-compose .fm-chat-compose-input-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.fx-chat-compose .fm-chat-emoji-btn {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 10px;
}

.fx-chat-input,
.fx-chat-compose #jbInput,
.fx-chat textarea.fx-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  resize: none;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: 'Epilogue', sans-serif;
  font-size: 14px;
  line-height: 20px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  color: var(--text);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--fx-well-a), var(--fx-well-b));
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.12);
}

.fx-chat-send {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  flex: none;
  border-radius: 50%;
}

.fx-chat-count {
  flex: none;
  align-self: flex-end;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.2;
}

.fx-chat-count.is-max {
  color: #ff3b5c;
}

.fx-chat-jump {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: var(--text);
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 0 1px rgba(0, 0, 0, 0.42),
    0 8px 16px -4px rgba(0, 0, 0, 0.55);
  z-index: 2;
}

.fx-chat-jump-arrow {
  font-size: 14px;
  line-height: 1;
}

.fx-chat-jump-count {
  font-size: 9px;
  font-weight: var(--fx-fw-ui);
  line-height: 1;
  color: var(--fx-live);
}

/* ==========================================================================
 * JUKEBOX ROOM — Night glass mapping for #now-sub-jukebox #jbRoom
 * Exception to the ".fx- only" rule: selectors start with #now-sub-jukebox.
 * Visual properties only (plus named exceptions below). No !important.
 * ========================================================================== */

/* 2.1 Room backdrop — retarget --jb-bg (used by styles.css L5981 / L5993 only) */
#now-sub-jukebox {
  --jb-bg:
    linear-gradient(rgba(8, 6, 18, 0.72), rgba(8, 6, 18, 0.72)),
    url('../assets/bg.jpg') center top / cover no-repeat fixed #080612;
}
/* Dashboard may scroll; room-open rules below set overflow:hidden. */
#now-sub-jukebox.fx-app-shell {
  overflow-x: hidden;
  overflow-y: auto;
  gap: 0;
}

#now-sub-jukebox .now-sub-inner {
  --jbx-zoom: 1;
  background: transparent;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* Do NOT divide width or height by --jbx-zoom: under CSS zoom, %
     already resolves against an inflated CB — calc(100%/zoom)
     double-divides (measured width: 1290/0.8/0.8 ≈ 2016 CSS px;
     height: 816/zoom/zoom layout, visual 816/zoom). Width/height
     auto/100% + zoom alone yields visual size = parent. */
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 100%;
}

/* Room open: fill the jukebox layer (visual height = viewport under zoom). */
#now-sub-jukebox:has(#jbRoom.open) {
  display: flex !important;
  flex-direction: column;
  overflow: hidden !important;
}

#now-sub-jukebox:has(#jbRoom.open) .now-sub-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Proportional shrink for ~1536 CSS-px viewports (e.g. 1920@125%).
   Applied on .now-sub-inner only — keeps #now-sub-jukebox top from --cs-chrome-top. */
@media (max-width: 1800px) {
  #now-sub-jukebox .now-sub-inner {
    --jbx-zoom: 0.92;
    zoom: 0.92;
  }
}
@media (max-width: 1600px) {
  #now-sub-jukebox .now-sub-inner {
    --jbx-zoom: 0.85;
    zoom: 0.85;
  }
}
@media (max-width: 1440px) {
  #now-sub-jukebox .now-sub-inner {
    --jbx-zoom: 0.8;
    zoom: 0.8;
  }
}
@media (max-width: 1280px) {
  #now-sub-jukebox .now-sub-inner {
    --jbx-zoom: 0.75;
    zoom: 0.75;
  }
}

/* Kill 3D-card rim pseudo on mapped cards (styles.css L621–638) */
#now-sub-jukebox #jbRoom .jb-player-card::before,
#now-sub-jukebox #jbRoom .jb-vote-card::before,
#now-sub-jukebox #jbRoom .jb-chat-card::before,
#now-sub-jukebox #jbRoom .jb-donate-card::before {
  content: none;
}

/* 2.2 Cards — look of .fx-panel / .fx-plate / .fx-well */
#now-sub-jukebox #jbRoom .jb-room-hero-bar {
  border-radius: var(--fx-panel-radius);
  color: var(--text);
  background: linear-gradient(165deg, var(--fx-glass-a), var(--fx-glass-b));
  -webkit-backdrop-filter: blur(var(--fx-blur)) saturate(160%);
  backdrop-filter: blur(var(--fx-blur)) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--fx-rim),
    inset 0 0 0 1px var(--fx-edge),
    0 26px 50px -18px var(--fx-drop),
    0 4px 12px -4px var(--fx-drop);
  border: 0;
}

#now-sub-jukebox #jbRoom .jb-player-card,
#now-sub-jukebox #jbRoom .jb-donate-card {
  border-radius: var(--fx-panel-radius);
  color: var(--text);
  background: linear-gradient(165deg, var(--fx-plate-a), var(--fx-plate-b));
  -webkit-backdrop-filter: blur(var(--fx-blur)) saturate(160%);
  backdrop-filter: blur(var(--fx-blur)) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--fx-rim),
    inset 0 0 0 1px var(--fx-edge),
    0 26px 50px -18px var(--fx-drop),
    0 4px 12px -4px var(--fx-drop);
  border: 0;
}

#now-sub-jukebox #jbRoom .jb-vote-card,
#now-sub-jukebox #jbRoom .jb-chat-card {
  border-radius: var(--fx-panel-radius);
  color: var(--text);
  background: linear-gradient(165deg, var(--fx-glass-a), var(--fx-glass-b));
  -webkit-backdrop-filter: blur(var(--fx-blur)) saturate(160%);
  backdrop-filter: blur(var(--fx-blur)) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--fx-rim),
    inset 0 0 0 1px var(--fx-edge),
    0 26px 50px -18px var(--fx-drop),
    0 4px 12px -4px var(--fx-drop);
  border: 0;
}

#now-sub-jukebox #jbRoom #jbMsgs {
  border-radius: 14px;
  background: linear-gradient(180deg, var(--fx-well-a), var(--fx-well-b));
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.12);
}

#now-sub-jukebox #jbRoom #jbRoomLiveBadge {
  border-radius: 999px;
  color: var(--text);
  background: linear-gradient(180deg, var(--fx-well-a), var(--fx-well-b));
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    0 1px 0 var(--fx-edge);
  border: 0;
}

/* 2.3 Track list — .fx-row / .fx-key */
#now-sub-jukebox #jbRoom .jb-vote-item {
  border: 0;
  border-radius: var(--fx-row-radius);
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.36),
    0 8px 16px -8px rgba(0, 0, 0, 0.55);
  outline: none;
}

#now-sub-jukebox #jbRoom .jb-vote-item.playing,
#now-sub-jukebox #jbRoom .jb-vote-item.jb-current {
  background: linear-gradient(180deg, var(--fx-well-a), var(--fx-well-b));
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.12);
  outline: none;
}

#now-sub-jukebox #jbRoom .jb-vote-item.playing .jb-vote-track,
#now-sub-jukebox #jbRoom .jb-vote-item.jb-current .jb-vote-track {
  color: var(--fx-live);
}

#now-sub-jukebox #jbRoom .jb-vote-btn {
  border: 0;
  font: inherit;
  font-weight: var(--fx-fw-ui);
  color: var(--text);
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -2px 1px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.42),
    0 7px 13px -3px rgba(0, 0, 0, 0.55);
  transition: transform 0.07s ease, box-shadow 0.07s ease;
}

#now-sub-jukebox #jbRoom .jb-vote-btn:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, var(--fx-key-b), var(--fx-key-a));
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.42),
    0 1px 0 var(--fx-edge);
}

#now-sub-jukebox #jbRoom .jb-vote-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

#now-sub-jukebox #jbRoom .jb-vote-item.voted .jb-vote-btn {
  color: var(--fx-live);
  transform: translateY(1px);
  background: linear-gradient(180deg, var(--fx-key-b), var(--fx-key-a));
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.42),
    0 1px 0 var(--fx-edge);
  opacity: 1;
  cursor: default;
}

/* 2.4 Tip — .fx-key / .fx-primary / .fx-field */
#now-sub-jukebox #jbRoom .jb-donate-amt {
  border: 0;
  font: inherit;
  font-weight: var(--fx-fw-ui);
  color: var(--text);
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -2px 1px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.42),
    0 7px 13px -3px rgba(0, 0, 0, 0.55);
  transition: transform 0.07s ease, box-shadow 0.07s ease;
}

#now-sub-jukebox #jbRoom .jb-donate-amt:active,
#now-sub-jukebox #jbRoom .jb-donate-amt.active {
  color: var(--fx-live);
  transform: translateY(1px);
  background: linear-gradient(180deg, var(--fx-key-b), var(--fx-key-a));
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.42),
    0 1px 0 var(--fx-edge);
}

#now-sub-jukebox #jbRoom #jbSendTipBtn {
  border: 0;
  font: inherit;
  font-weight: var(--fx-fw-ui);
  color: var(--t1, #fff);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  cursor: pointer;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.28),
      rgba(255, 255, 255, 0) 48%,
      rgba(0, 0, 0, 0.18)
    ),
    var(--fx-grad);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 2px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 10px 22px -6px var(--fx-grad-glow);
  transition: transform 0.07s ease, box-shadow 0.07s ease;
}

#now-sub-jukebox #jbRoom #jbSendTipBtn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.45);
}

#now-sub-jukebox #jbRoom #jbSendTipBtn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

#now-sub-jukebox #jbRoom #jbTipCustom {
  border: 0;
  outline: 0;
  font: inherit;
  color: var(--text);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--fx-well-a), var(--fx-well-b));
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    0 1px 0 var(--fx-edge);
}

#now-sub-jukebox #jbRoom #jbTipCustom::placeholder {
  color: var(--muted);
}

#now-sub-jukebox #jbRoom #jbTipCustom:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    0 0 0 2px var(--fx-live);
}

/* 2.5 Chat */
#now-sub-jukebox #jbRoom #jbInput {
  border: 0;
  outline: 0;
  font: inherit;
  color: var(--text);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--fx-well-a), var(--fx-well-b));
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    0 1px 0 var(--fx-edge);
}

#now-sub-jukebox #jbRoom #jbInput::placeholder {
  color: var(--muted);
}

#now-sub-jukebox #jbRoom #jbInput:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    0 0 0 2px var(--fx-live);
}

#now-sub-jukebox #jbRoom .jb-chat-row > button {
  border: 0;
  font: inherit;
  font-weight: var(--fx-fw-ui);
  color: var(--t1, #fff);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  cursor: pointer;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.28),
      rgba(255, 255, 255, 0) 48%,
      rgba(0, 0, 0, 0.18)
    ),
    var(--fx-grad);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 2px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 10px 22px -6px var(--fx-grad-glow);
  transition: transform 0.07s ease, box-shadow 0.07s ease;
}

#now-sub-jukebox #jbRoom .jb-chat-row > button:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.45);
}

#now-sub-jukebox #jbRoom .fm-chat-emoji-btn {
  border: 0;
  font: inherit;
  font-weight: var(--fx-fw-ui);
  color: var(--text);
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -2px 1px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.42),
    0 7px 13px -3px rgba(0, 0, 0, 0.55);
  transition: transform 0.07s ease, box-shadow 0.07s ease;
}

#now-sub-jukebox #jbRoom .fm-chat-emoji-btn:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, var(--fx-key-b), var(--fx-key-a));
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.42),
    0 1px 0 var(--fx-edge);
}

/* 2.6 Player — play / wave / volume (named layout exceptions) */
#now-sub-jukebox #jbRoom #jbPlayBtn {
  position: relative;
  border: 0;
  border-radius: 50%;
  color: var(--t1, #fff);
  cursor: pointer;
  background:
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.05) 0 1px,
      transparent 1px 4px
    ),
    radial-gradient(circle at 40% 22%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 50% 110%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 60%),
    var(--fx-play);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.5),
    inset 0 -8px 12px rgba(0, 0, 0, 0.3),
    0 0 0 5px var(--fx-seat),
    0 0 0 6px var(--fx-edge),
    0 16px 28px -6px rgba(0, 0, 0, 0.6),
    0 0 40px -8px var(--fx-grad-glow);
}

#now-sub-jukebox #jbRoom #jbPlayBtn::before {
  content: '';
  position: absolute;
  left: 19%;
  top: 7%;
  width: 62%;
  height: 36%;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

#now-sub-jukebox #jbRoom #jbPlayIcon {
  position: relative;
}

#now-sub-jukebox #jbRoom #jbPlayBtn:active {
  transform: translateY(1px) scale(0.985);
  box-shadow:
    inset 0 4px 10px rgba(0, 0, 0, 0.4),
    0 0 0 5px var(--fx-seat),
    0 0 0 6px var(--fx-edge),
    0 6px 12px -4px rgba(0, 0, 0, 0.6);
}

#now-sub-jukebox #jbRoom #jbWave {
  border: 0;
  border-radius: 10px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--fx-lcd-a), var(--fx-lcd-b));
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 0 3px var(--fx-seat),
    0 0 0 4px var(--fx-edge);
}

#now-sub-jukebox #jbRoom .jb-wave-col {
  flex: 1 1 0;
  min-width: 1px;
  position: relative;
  height: 100%;
}

#now-sub-jukebox #jbRoom .jb-wave-bar {
  position: absolute;
  left: 0;
  right: 0;
  min-width: 1px;
  width: auto;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 1px;
}

#now-sub-jukebox #jbRoom .jb-wave-bar--top {
  bottom: 36%;
}

#now-sub-jukebox #jbRoom .jb-wave-bar--bot {
  top: calc(64% + 2px);
  opacity: 0.28;
}

#now-sub-jukebox #jbRoom .jb-wave-col.played .jb-wave-bar--top {
  box-shadow: 0 0 6px -1px rgba(123, 47, 255, 0.6);
}

#now-sub-jukebox #jbRoom .jb-wave-col.head .jb-wave-bar {
  left: 50%;
  right: auto;
  width: 1.5px;
  margin-left: -0.75px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  opacity: 1;
}

#now-sub-jukebox #jbRoom .jb-vol-range {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

#now-sub-jukebox #jbRoom .jb-vol-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: var(--fx-seat);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.6),
    0 1px 0 var(--fx-edge);
}

#now-sub-jukebox #jbRoom .jb-vol-range::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: var(--fx-seat);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.6),
    0 1px 0 var(--fx-edge);
}

#now-sub-jukebox #jbRoom .jb-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 28%, var(--fx-metal-a), var(--fx-metal-b) 85%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    0 3px 5px rgba(0, 0, 0, 0.55);
}

#now-sub-jukebox #jbRoom .jb-vol-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 28%, var(--fx-metal-a), var(--fx-metal-b) 85%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    0 3px 5px rgba(0, 0, 0, 0.55);
}

/* Room chrome spacing + fill viewport when open (desktop) */
/* styles.css L4131: .jb-room-wrap { max-width:100%; margin:0 auto; … }
   With an oversized zoomed parent that centered the wrap (~197px gutters). */
#now-sub-jukebox #jbRoom .jb-room-wrap {
  width: auto;
  max-width: none;
  margin: 0;
  /* Shell .fx-app-shell already applies --fx-chrome-pad; avoid double pad. */
  padding: 0;
  box-sizing: border-box;
  gap: 0;
}

#now-sub-jukebox #jbRoom.open {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

#now-sub-jukebox #jbRoom.open .jb-room-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#now-sub-jukebox #jbRoom .jb-room-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex: none;
  height: 36px;
  max-height: 36px;
  padding-left: 0;
  padding-right: 28px;
  margin: 0 0 8px;
  min-width: 0;
  box-sizing: border-box;
}

#now-sub-jukebox #jbRoom .jb-room-title {
  flex: 0 1 auto;
  max-width: min(42vw, 360px);
}

#now-sub-jukebox #jbRoom .jb-room-prizes {
  /* Content-sized strip; shrink if needed — do not stretch toward Share */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  height: 28px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

#now-sub-jukebox #jbRoom .jbx-prize-rail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: auto;
  max-width: 100%;
  height: 28px;
  opacity: 1;
  transition: opacity 0.35s ease;
}

#now-sub-jukebox #jbRoom .jbx-prize-rail.is-fading {
  opacity: 0;
}

#now-sub-jukebox #jbRoom .jbx-prize-ico {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#now-sub-jukebox #jbRoom .jbx-prize-level {
  flex: none;
  font-size: 11px;
  font-weight: var(--fx-fw-ui);
  color: var(--muted);
  white-space: nowrap;
}

/* Title + sponsor scroll as one unit when the strip must shrink */
#now-sub-jukebox #jbRoom .jbx-prize-mq {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: block;
}

#now-sub-jukebox #jbRoom .jbx-prize-mq .fx-mq-inner,
#now-sub-jukebox #jbRoom .jbx-prize-mq-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

#now-sub-jukebox #jbRoom .jbx-prize-title {
  flex: none;
  font-size: 12px;
  font-weight: var(--fx-fw-heading);
  color: var(--text);
  white-space: nowrap;
}

#now-sub-jukebox #jbRoom .jbx-prize-by {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

#now-sub-jukebox #jbRoom .jbx-prize-by:hover {
  color: var(--text);
}

#now-sub-jukebox #jbRoom .jbx-prize-by img {
  height: 18px;
  width: auto;
  max-width: 72px;
  object-fit: contain;
  flex: none;
  border-radius: 3px;
}

#now-sub-jukebox #jbRoom .jbx-prize-by-name {
  white-space: nowrap;
}

#now-sub-jukebox #jbRoom .jb-room-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: none;
  margin-left: auto;
}

#now-sub-jukebox #jbRoom .jbx-share-btn {
  height: var(--fx-share-h);
  min-width: 0;
  padding: 0 10px;
  font-size: var(--fx-share-fs);
  flex: none;
}

#now-sub-jukebox #jbRoom.is-archive .jbx-share-btn,
#now-sub-jukebox #jbRoom.is-archive .jb-room-prizes {
  display: none !important;
}

#now-sub-jukebox #jbRoom .jbx-tiebreak-banner,
#now-sub-jukebox #jbRoom .jbx-archive-banner {
  margin: 0 0 8px;
  padding: 10px 14px;
  flex: none;
}

#now-sub-jukebox #jbRoom .jbx-tiebreak-banner-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Epilogue', sans-serif;
  font-size: 13px;
  font-weight: var(--fx-fw-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}

#now-sub-jukebox #jbRoom .jbx-tiebreak-banner-body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

#now-sub-jukebox #jbRoom .jb-vote-item .fx-key {
  flex-shrink: 0;
}

#now-sub-jukebox #jbDash .jb-live-card--tiebreak .jb-live-pill {
  color: #FFB93D;
}

#now-sub-jukebox #jbDash .jb-live-card--tiebreak .jb-live-tie-note {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 8px 0 12px;
}

/* 2.7 Hero LCD strip (layout allowed for jbx- + these ids) */
#now-sub-jukebox #jbRoom #jbRoomTitle {
  font-size: var(--fx-fs-title);
  font-weight: var(--fx-fw-title);
  letter-spacing: var(--fx-track-title);
  line-height: var(--fx-lh-title);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#now-sub-jukebox #jbRoom #jbRoomLiveBadge {
  display: inline-flex;
  height: var(--fx-chip-h);
  padding: 0 var(--fx-chip-pad-x);
  gap: 8px;
  align-items: center;
  font-size: var(--fx-chip-fs);
  font-weight: var(--fx-chip-fw);
  flex: none;
}

#now-sub-jukebox #jbRoom .jb-room-hero-bar {
  min-height: 0;
  max-height: 100px;
  padding: 8px 28px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  flex: none;
  margin: 0 0 12px;
  box-sizing: border-box;
  overflow: hidden;
}

#now-sub-jukebox #jbRoom .jbx-hero-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

#now-sub-jukebox #jbRoom .jbx-hero-prize {
  flex: none;
  min-width: 0;
  justify-self: start;
}

#now-sub-jukebox #jbRoom .jbx-hero-prize-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

#now-sub-jukebox #jbRoom .jbx-hero-prize-sub {
  font-size: 11px;
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}

#now-sub-jukebox #jbRoom .jbx-hero-prize-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

#now-sub-jukebox #jbRoom .jbx-hero-tip {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

#now-sub-jukebox #jbRoom .jbx-hero-tip.jb-disabled {
  opacity: 0.55;
  pointer-events: none;
}

#now-sub-jukebox #jbRoom .jbx-hero-tip-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

#now-sub-jukebox #jbRoom.is-tiebreak .jbx-hero-tip-controls {
  display: none;
}

#now-sub-jukebox #jbRoom .jbx-hero-tip .jb-donate-amounts {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
}

#now-sub-jukebox #jbRoom .jbx-hero-tip .jb-donate-amt {
  height: var(--fx-key-h);
  min-width: 40px;
  padding: 0 var(--fx-key-pad-x);
  font-size: var(--fx-key-fs);
  border-radius: var(--fx-key-radius-sm);
}

#now-sub-jukebox #jbRoom .jbx-hero-tip #jbTipCustom {
  height: 28px;
  width: 80px;
  margin: 0;
  padding: 0 8px;
  box-sizing: border-box;
  font-size: 12px;
}

#now-sub-jukebox #jbRoom .jbx-hero-tip #jbSendTipBtn {
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  margin: 0;
  width: auto;
  flex: none;
}

#now-sub-jukebox #jbRoom .jbx-hero-tip .jb-tip-note {
  font-size: 11px;
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  align-self: stretch;
}

#now-sub-jukebox #jbRoom .jbx-hero-tip #jbTipGate {
  flex: none;
  margin: 0;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  align-self: center;
}

#now-sub-jukebox #jbRoom .jbx-hero-archive {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: 12.5px;
  line-height: 1.35;
  min-width: 0;
  flex: 1 1 auto;
}

#now-sub-jukebox #jbRoom .jbx-hero-archive .fx-label {
  font-size: 12.5px;
}

#now-sub-jukebox #jbRoom .jbx-hero-archive #jbArchiveYourVote {
  grid-column: 1;
  grid-row: 1;
}

#now-sub-jukebox #jbRoom .jbx-hero-archive #jbArchivePickWon {
  grid-column: 2;
  grid-row: 1;
}

#now-sub-jukebox #jbRoom .jbx-hero-archive #jbArchiveYourTip {
  grid-column: 1;
  grid-row: 2;
}

#now-sub-jukebox #jbRoom .jbx-hero-archive #jbArchiveTotals {
  grid-column: 2;
  grid-row: 2;
}

#now-sub-jukebox #jbRoom.is-archive .jbx-hero-prize-sub {
  display: none;
}

#now-sub-jukebox #jbRoom .jbx-hero-clock {
  align-items: center;
  flex: none;
  justify-self: center;
}

#now-sub-jukebox #jbRoom .jbx-clock-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  text-align: center;
  max-width: 100%;
  min-width: 0;
}

#now-sub-jukebox #jbRoom .jbx-clock-title-main {
  font-size: inherit;
  color: inherit;
}

#now-sub-jukebox #jbRoom .jbx-clock-title-when {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

#now-sub-jukebox #jbRoom .jbx-clock-title-when:empty {
  display: none;
}

#now-sub-jukebox #jbRoom .jbx-hero-stats {
  flex-direction: row;
  align-items: flex-end;
  gap: 12px;
  flex: none;
  justify-self: end;
}

#now-sub-jukebox #jbRoom .jbx-listening-lcd {
  height: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#now-sub-jukebox #jbRoom .jbx-listening-avs {
  display: flex;
  align-items: center;
  flex: none;
}

#now-sub-jukebox #jbRoom .jbx-listening-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  margin-left: -6px;
  border: 1.5px solid var(--fx-lcd-a, #1a1428);
  background: linear-gradient(135deg, #E91E8C, #4B26FF);
  box-sizing: border-box;
}

#now-sub-jukebox #jbRoom .jbx-listening-avs .jbx-listening-av:first-child {
  margin-left: 0;
}

#now-sub-jukebox #jbRoom .jbx-listening-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#now-sub-jukebox #jbRoom .jbx-listening-seg {
  display: inline-flex;
  align-items: center;
}

#now-sub-jukebox #jbRoom.is-archive .jbx-listening-col {
  display: none;
}

@media (max-width: 1280px) {
  #now-sub-jukebox #jbRoom .jbx-listening-avs {
    display: none;
  }
}

#now-sub-jukebox #jbRoom .jbx-stat-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

#now-sub-jukebox #jbRoom .jb-room-hero-bar .fx-label {
  text-transform: none;
}

#now-sub-jukebox #jbRoom #jbPrizeDisplay {
  /* € + 5×14px digits + 5×4px gaps + pad 8/10 ≈ fixed slot; tip row stays put */
  width: 126px;
  min-width: 126px;
  max-width: 126px;
  height: 40px;
  padding: 0 10px 0 8px;
  gap: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  box-sizing: border-box;
  overflow: hidden;
}

#now-sub-jukebox #jbRoom #jbPrizeDisplay .fx-seg-sym {
  font-size: 18px;
  margin-right: 0;
  flex: none;
}

#now-sub-jukebox #jbRoom #jbRoomFlipMount {
  height: 48px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 2px;
  --fx-colon-gap: var(--fx-clock-colon-gap);
  --fx-colon-dot: var(--fx-clock-dot);
  --fx-colon-pad-x: var(--fx-clock-colon-pad-x);
}

/* Room clock colon dots — same as shared .fx-seg-clock (pre: 4px / gap 4). */
#now-sub-jukebox #jbRoom #jbRoomFlipMount .fx-seg-colon {
  gap: var(--fx-colon-gap, var(--fx-clock-colon-gap));
  padding: 0 var(--fx-colon-pad-x, var(--fx-clock-colon-pad-x));
  align-self: center;
  justify-content: center;
}

#now-sub-jukebox #jbRoom #jbRoomFlipMount .fx-seg-colon i {
  width: var(--fx-colon-dot, var(--fx-clock-dot));
  height: var(--fx-colon-dot, var(--fx-clock-dot));
  box-shadow: 0 0 4px var(--fx-live);
}

#now-sub-jukebox #jbRoom #jbTrackCount {
  height: var(--fx-lcd-h);
  padding: 0 var(--fx-lcd-pad-x);
  display: flex;
  align-items: center;
  gap: 4px;
}

#now-sub-jukebox #jbRoom #jbYourVote {
  height: var(--fx-lcd-h);
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  padding: 0 var(--fx-lcd-pad-x);
  display: block;
  box-sizing: border-box;
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: var(--fx-lcd-h);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#now-sub-jukebox #jbRoom .jbx-your-vote-col {
  min-width: 0;
  flex: none;
}

@media (max-width: 768px) {
  #now-sub-jukebox #jbRoom .jb-room-hero-bar {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  #now-sub-jukebox #jbRoom .jbx-hero-group {
    align-items: center;
  }

  #now-sub-jukebox #jbRoom .jbx-hero-prize {
    align-items: center;
    justify-self: center;
  }

  #now-sub-jukebox #jbRoom .jbx-hero-prize-head {
    justify-content: center;
  }

  #now-sub-jukebox #jbRoom .jbx-hero-stats {
    justify-self: center;
  }

  #now-sub-jukebox #jbRoom #jbPrizeDisplay {
    align-self: center;
  }
}

/* Legacy flip-card paint (unused in room clock; kept harmless if mount empty) */
#now-sub-jukebox #jbRoom .fm-flip-card {
  display: block;
  background: linear-gradient(180deg, var(--fx-lcd-a), var(--fx-lcd-b));
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 0 3px var(--fx-seat),
    0 0 0 4px var(--fx-edge);
  border: 0;
  border-radius: 8px;
}

#now-sub-jukebox #jbRoom .fm-flip-top,
#now-sub-jukebox #jbRoom .fm-flip-top-flip {
  background: var(--fx-lcd-a);
}

#now-sub-jukebox #jbRoom .fm-flip-bottom,
#now-sub-jukebox #jbRoom .fm-flip-bottom-flip {
  background: var(--fx-lcd-b);
}

#now-sub-jukebox #jbRoom .fm-flip-ink,
#now-sub-jukebox #jbRoom .fm-flip-top .fm-flip-ink,
#now-sub-jukebox #jbRoom .fm-flip-bottom .fm-flip-ink,
#now-sub-jukebox #jbRoom .fm-flip-top-flip .fm-flip-ink,
#now-sub-jukebox #jbRoom .fm-flip-bottom-flip .fm-flip-ink,
#now-sub-jukebox #jbRoom .fm-flip-zero .fm-flip-ink {
  color: var(--fx-live);
  text-shadow: 0 0 8px var(--fx-live-glow);
}

#now-sub-jukebox #jbRoom .fm-flip-digit {
  color: var(--fx-live);
}

#now-sub-jukebox #jbRoom .fm-flip-sep {
  color: var(--fx-live);
}

/* ── JUKEBOX ROOM — Night glass player / rows / tip / chat ── */

#now-sub-jukebox #jbRoom .jb-room-layout {
  display: grid;
  grid-template-columns: 540px minmax(0, 1fr) 420px;
  gap: var(--fx-gap);
  align-items: stretch;
  width: auto;
  max-width: none;
  margin: 0;
}

#now-sub-jukebox #jbRoom.open .jb-room-layout {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

@media (min-width: 1101px) {
  #now-sub-jukebox #jbRoom .jb-now-col {
    min-width: 540px;
  }

  #now-sub-jukebox #jbRoom .jb-vote-col {
    min-width: 0;
  }

  #now-sub-jukebox #jbRoom .jb-side-col {
    min-width: 420px;
  }
}

@media (max-width: 1100px) {
  /* Below 1100: normal page scroll — no fit-to-screen lock */
  #now-sub-jukebox:has(#jbRoom.open) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #now-sub-jukebox:has(#jbRoom.open) .now-sub-inner {
    height: auto;
    max-height: none;
    overflow: visible;
    min-height: 0;
  }

  #now-sub-jukebox #jbRoom.open {
    height: auto;
    overflow: visible;
    flex: none;
  }

  #now-sub-jukebox #jbRoom.open .jb-room-wrap {
    overflow: visible;
    flex: none;
  }

  #now-sub-jukebox #jbRoom.open .jb-room-layout {
    flex: none;
    overflow: visible;
    min-height: 0;
  }

  #now-sub-jukebox #jbRoom .jb-room-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #now-sub-jukebox #jbRoom .jb-side-col .jb-chat-card {
    min-height: 420px;
    height: 420px;
  }
}

#now-sub-jukebox #jbRoom .jb-now-col,
#now-sub-jukebox #jbRoom .jb-vote-col,
#now-sub-jukebox #jbRoom .jb-side-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: none;
  height: 100%;
  overflow: hidden;
}

#now-sub-jukebox #jbRoom .jb-vote-col .jb-vote-card,
#now-sub-jukebox #jbRoom .jb-side-col .jb-chat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#now-sub-jukebox #jbRoom .jb-track-passport {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  max-height: 56px;
  padding: 0 12px;
  margin: 0 0 8px;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(165deg, var(--fx-glass-a), var(--fx-glass-b));
  box-shadow:
    inset 0 1px 0 var(--fx-rim),
    inset 0 0 0 1px var(--fx-edge),
    0 12px 28px -14px var(--fx-drop);
}

#now-sub-jukebox #jbRoom .jbx-pass-left,
#now-sub-jukebox #jbRoom .jbx-pass-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#now-sub-jukebox #jbRoom .jbx-pass-left {
  flex: 1 1 auto;
}

#now-sub-jukebox #jbRoom .jbx-pass-right {
  flex: 0 1 auto;
  justify-content: flex-end;
}

#now-sub-jukebox #jbRoom .jbx-pass-shield {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
}

#now-sub-jukebox #jbRoom .jbx-pass-protect {
  min-width: 0;
  overflow: hidden;
}

#now-sub-jukebox #jbRoom .jbx-pass-title {
  font-size: 13px;
  font-weight: var(--fx-fw-heading);
  line-height: 1.15;
  color: var(--text);
  white-space: nowrap;
}

#now-sub-jukebox #jbRoom .jbx-pass-sub {
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

#now-sub-jukebox #jbRoom .jbx-pass-verify {
  flex: none;
  min-width: 0;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

#now-sub-jukebox #jbRoom .jbx-pass-av {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0;
  border: 1.5px solid var(--card-border);
  overflow: hidden;
  background: linear-gradient(135deg, #E91E8C, #4B26FF);
  cursor: pointer;
}

#now-sub-jukebox #jbRoom .jbx-pass-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#now-sub-jukebox #jbRoom .jbx-pass-artist-meta {
  min-width: 0;
  overflow: hidden;
  max-width: 160px;
}

#now-sub-jukebox #jbRoom .jbx-pass-name {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: 'Epilogue', sans-serif;
  font-size: 13px;
  font-weight: var(--fx-fw-heading);
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

#now-sub-jukebox #jbRoom .jbx-pass-role {
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

#now-sub-jukebox #jbRoom .jbx-pass-follow {
  flex: none;
  height: 28px;
  min-width: 72px;
  padding: 0 10px;
  font-size: 12px;
}

#now-sub-jukebox #jbRoom .jb-vote-card {
  padding: var(--fx-panel-pad-y-sm) var(--fx-panel-pad) var(--fx-panel-pad);
}

#now-sub-jukebox #jbRoom .jb-vote-col-header {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 8px;
  flex: none;
  margin: 0 0 6px;
  min-height: 0;
  max-height: 22px;
  overflow: hidden;
}

#now-sub-jukebox #jbRoom .jb-vote-col-title {
  font-size: var(--fx-fs-panel);
  font-weight: var(--fx-fw-panel);
  color: var(--text);
  flex: none;
  white-space: nowrap;
}

#now-sub-jukebox #jbRoom .jb-vote-col-sub {
  font-size: var(--fx-fs-meta);
  color: var(--muted);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#now-sub-jukebox #jbRoom .jb-chat-card.fx-chat,
#now-sub-jukebox #jbRoom .fx-chat {
  padding: var(--fx-panel-pad);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#now-sub-jukebox #jbRoom .fx-chat-head {
  font-size: var(--fx-fs-panel);
  font-weight: var(--fx-fw-panel);
  margin: 0 0 8px;
  flex: none;
}

#now-sub-jukebox #jbRoom .fx-chat-list-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

#now-sub-jukebox #jbRoom #jbMsgs.fx-chat-list,
#now-sub-jukebox #jbRoom .fx-chat-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  gap: 0;
}

#now-sub-jukebox #jbRoom .fx-chat-compose,
#now-sub-jukebox #jbRoom #jbChatRow {
  flex: none;
  margin-top: 8px;
  margin-bottom: 0;
}

#now-sub-jukebox #jbRoom .fx-chat--compact #jbInput {
  min-height: var(--fx-field-h);
  height: var(--fx-field-h);
  font-size: var(--fx-field-fs);
}

#now-sub-jukebox #jbRoom #jbChatClosed,
#now-sub-jukebox #jbRoom #jbChatGate {
  flex: none;
  margin-top: 10px;
  margin-bottom: 0;
}

#now-sub-jukebox #jbRoom #jbChatLoginBtn {
  flex: none;
  align-self: flex-start;
  margin-top: 8px;
  margin-bottom: 0;
}

#now-sub-jukebox #jbRoom .fx-chat-count {
  flex: none;
}

#now-sub-jukebox #jbRoom #jbInput {
  height: auto;
  min-height: 0;
  font-size: 14px;
}

#now-sub-jukebox #jbRoom #jbVoteList,
#now-sub-jukebox #jbRoom .jb-vote-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  max-height: none;
}

#now-sub-jukebox #jbRoom .jb-player-card {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 24px;
  gap: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  height: 100%;
}

#now-sub-jukebox #jbRoom #jbPlayGate {
  flex: none;
}

#now-sub-jukebox #jbRoom .jbx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#now-sub-jukebox #jbRoom .jbx-player-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex: none;
}

#now-sub-jukebox #jbRoom .jbx-cw {
  position: relative;
  flex: 0 1 280px;
  max-height: 280px;
  min-height: 0;
  width: auto;
  max-width: 100%;
  aspect-ratio: 380 / 300;
  height: auto;
  align-self: center;
}

#now-sub-jukebox #jbRoom .jbx-cw--sm {
  width: var(--fx-row-art-wrap-w);
  height: var(--fx-row-art);
  flex: none;
  max-height: none;
  aspect-ratio: auto;
}

#now-sub-jukebox #jbRoom .jbx-disc {
  position: absolute;
  top: 0;
  left: 0;
  width: 78.947%;
  height: 100%;
}

#now-sub-jukebox #jbRoom .jbx-cw--sm .jbx-disc {
  width: var(--fx-row-art);
  height: var(--fx-row-art);
}

#now-sub-jukebox #jbRoom .jbx-vinyl {
  position: absolute;
  top: 4%;
  left: 12%;
  width: 92%;
  height: 92%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #0b0b0d 0 3%, #E91E8C 3.6% 9%, #7B2FFF 9.5% 15%, #0e0e10 15.6% 17%, transparent 17.5%),
    repeating-radial-gradient(circle, #141416 0 1.4px, #1d1d20 1.4px 2.8px);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.5),
    inset 0 0 0 2px rgba(255, 255, 255, 0.05);
  transition: left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 0;
}

#now-sub-jukebox #jbRoom .jbx-vinyl::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    from 25deg,
    transparent 0 8%,
    rgba(255, 255, 255, 0.14) 13%,
    transparent 20% 52%,
    rgba(255, 255, 255, 0.1) 60%,
    transparent 68%
  );
}

#now-sub-jukebox #jbRoom .jbx-cw.is-out .jbx-vinyl {
  left: 34%;
}

@media (prefers-reduced-motion: no-preference) {
  #now-sub-jukebox #jbRoom .jbx-cw.is-spin .jbx-vinyl {
    animation: jbx-spin 3.2s linear infinite;
  }
}

@keyframes jbx-spin {
  to { transform: rotate(360deg); }
}

#now-sub-jukebox #jbRoom .jbx-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  box-shadow:
    0 10px 20px -4px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

#now-sub-jukebox #jbRoom .jbx-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 38%);
}

#now-sub-jukebox #jbRoom .jbx-cover #jbNowCover,
#now-sub-jukebox #jbRoom .jbx-cover img,
#now-sub-jukebox #jbRoom .jbx-cover .jb-cover-neutral {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

#now-sub-jukebox #jbRoom .jbx-vol-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  width: 72px;
  flex: none;
  padding: 0 2px;
}

#now-sub-jukebox #jbRoom .jbx-vol-lbl {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  max-width: 100%;
  line-height: 1.2;
}

#now-sub-jukebox #jbRoom .jbx-vol-n {
  display: inline-block;
  min-width: 3ch;
  width: 3ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

#now-sub-jukebox #jbRoom .jbx-vol-wrap .fx-knob-seat {
  width: 64px;
  height: 64px;
}

#now-sub-jukebox #jbRoom .jbx-vol-wrap .fx-knob-scale,
#now-sub-jukebox #jbRoom .jbx-vol-wrap .jbx-knob-arc {
  background: none;
  -webkit-mask: none;
  mask: none;
  opacity: 1;
}

#now-sub-jukebox #jbRoom .jbx-knob-arc .jbx-kt {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5px;
  height: 5px;
  margin: -2.5px 0 0 -0.75px;
  border-radius: 1px;
  background: var(--muted);
  opacity: 0.75;
  transform: rotate(var(--a)) translateY(-29px);
  transform-origin: 50% 50%;
  pointer-events: none;
}

#now-sub-jukebox #jbRoom .jbx-knob-arc .jbx-kt--maj {
  height: 8px;
  margin-top: -4px;
  width: 2px;
  margin-left: -1px;
  opacity: 0.95;
  transform: rotate(var(--a)) translateY(-28px);
}

#now-sub-jukebox #jbRoom .jbx-vol-wrap .fx-knob-well {
  inset: 6px;
}

#now-sub-jukebox #jbRoom .jbx-vol-wrap .fx-knob {
  width: 48px;
  height: 48px;
}

#now-sub-jukebox #jbRoom .jbx-vol-wrap .fx-knob-dot {
  top: 6px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
}

#now-sub-jukebox #jbRoom .jbx-now-lcd {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
}

#now-sub-jukebox #jbRoom .jbx-now-lcd-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

#now-sub-jukebox #jbRoom .jbx-now-lcd-lbl,
#now-sub-jukebox #jbRoom .jbx-now-lcd-idx {
  font-size: 11px;
  letter-spacing: 0.14em;
  opacity: 0.75;
}

#now-sub-jukebox #jbRoom .jbx-now-lcd-idx {
  margin-left: auto;
}

#now-sub-jukebox #jbRoom #jbNowTitle {
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#now-sub-jukebox #jbRoom #jbNowArtist {
  font-size: 12px;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#now-sub-jukebox #jbRoom #jbWave {
  flex: 1 1 80px;
  min-height: 80px;
  height: auto;
  width: 100%;
  box-sizing: border-box;
}

#now-sub-jukebox #jbRoom .jb-prog-times {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 0 2px;
}

#now-sub-jukebox #jbRoom .jbx-transport {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 2px;
}

#now-sub-jukebox #jbRoom .jbx-transport-main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

#now-sub-jukebox #jbRoom .jbx-transport-side {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: none;
  min-width: 0;
}

#now-sub-jukebox #jbRoom #jbPrevBtn,
#now-sub-jukebox #jbRoom #jbNextBtn {
  width: 42px;
  height: 42px;
}

#now-sub-jukebox #jbRoom #jbPlayBtn {
  width: 70px;
  height: 70px;
}

#now-sub-jukebox #jbRoom .jbx-auto-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: none;
}

#now-sub-jukebox #jbRoom .jbx-auto-col .fx-switch {
  width: var(--fx-switch-w);
  height: var(--fx-switch-h);
  border-radius: 12px;
}

#now-sub-jukebox #jbRoom .jbx-auto-col .fx-switch::after {
  top: 3px;
  left: 3px;
  width: var(--fx-switch-knob);
  height: var(--fx-switch-knob);
}

#now-sub-jukebox #jbRoom .jbx-auto-col .fx-switch.is-on::after {
  left: 23px;
}

#now-sub-jukebox #jbRoom .jbx-auto-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

#now-sub-jukebox #jbRoom .jbx-auto-meta .fx-label {
  font-size: 11px;
}

#now-sub-jukebox #jbRoom .jb-vote-item {
  display: grid;
  grid-template-columns: var(--fx-row-art) minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  height: var(--fx-row-h);
  padding: 0 var(--fx-row-pad-x);
  box-sizing: border-box;
  margin: 0 0 var(--fx-row-gap);
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
}

#now-sub-jukebox #jbRoom .jb-vote-item.is-now {
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.12);
}

#now-sub-jukebox #jbRoom .jb-vote-info {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
}

#now-sub-jukebox #jbRoom .jb-vote-track {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: var(--fx-row-title-fs);
  font-weight: var(--fx-row-title-fw);
  line-height: var(--fx-row-title-lh);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#now-sub-jukebox #jbRoom .jb-vote-meta {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: var(--fx-row-meta-fs);
  line-height: var(--fx-row-meta-lh);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#now-sub-jukebox #jbRoom .jb-vote-item .fx-key {
  width: auto;
  min-width: var(--fx-key-min-w);
  height: var(--fx-key-h);
  padding: 0 var(--fx-key-pad-x);
  font-size: var(--fx-key-fs);
  gap: 4px;
  flex-shrink: 0;
}

#now-sub-jukebox #jbRoom .jb-vote-item .fx-rkey {
  width: var(--fx-rkey-size);
  height: var(--fx-rkey-size);
}

#now-sub-jukebox #jbRoom .jbx-vote-spacer {
  width: var(--fx-key-min-w);
  height: var(--fx-key-h);
}

#now-sub-jukebox #jbRoom .jb-donate-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 14px;
}

#now-sub-jukebox #jbRoom .jb-donate-head-title {
  font-size: 16px;
  font-weight: var(--fx-fw-heading);
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

#now-sub-jukebox #jbRoom .jb-donate-head-sub {
  font-size: 11px;
  color: var(--muted);
  flex: none;
}

/* Legacy donate-card amount grid (unused in room layout; hero tip overrides) */
#now-sub-jukebox #jbRoom .jb-donate-amounts {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}

#now-sub-jukebox #jbRoom .jb-donate-amt {
  height: 34px;
}

#now-sub-jukebox #jbRoom #jbSendTipBtn {
  height: 36px;
  font-size: 14px;
  width: auto;
  margin-top: 0;
}

#now-sub-jukebox #jbRoom .jb-tip-note {
  font-size: 11px;
  line-height: 1.3;
  text-align: left;
}

#now-sub-jukebox #jbRoom #jbMsgs {
  /* list chrome lives on .fx-chat-list */
  margin: 0;
}

#now-sub-jukebox #jbRoom .jb-chat-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#now-sub-jukebox #jbRoom .jbx-chat-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: var(--fx-fw-heading);
  color: var(--t1, #fff);
  background: linear-gradient(135deg, #E91E8C, #4B26FF);
  overflow: hidden;
}

#now-sub-jukebox #jbRoom .jbx-chat-av--img {
  padding: 0;
  background: var(--card2);
}

#now-sub-jukebox #jbRoom .jbx-chat-av--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

#now-sub-jukebox #jbRoom .jbx-chat-body {
  min-width: 0;
  flex: 1;
}

#now-sub-jukebox #jbRoom .jbx-chat-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

#now-sub-jukebox #jbRoom .jb-chat-msg .jbn {
  font-size: 13px;
  font-weight: var(--fx-fw-heading);
  color: var(--text);
}

#now-sub-jukebox #jbRoom .jbx-chat-time {
  font-size: 11px;
  color: var(--muted);
}

#now-sub-jukebox #jbRoom .jbx-chat-text {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
}

#now-sub-jukebox #jbRoom .jb-chat-row.fx-chat-compose,
#now-sub-jukebox #jbRoom .fx-chat-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: none;
  margin-top: 10px;
  margin-bottom: 0;
}

#now-sub-jukebox #jbRoom #jbInput {
  height: auto;
  min-height: 40px;
  font-size: 14px;
  line-height: 20px;
  flex: 1;
  min-width: 0;
  resize: none;
  overflow-x: hidden;
}

#now-sub-jukebox #jbRoom #jbChatSendBtn.fx-chat-send {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 50%;
  flex: none;
}

#now-sub-jukebox #jbRoom .fx-chat-compose.fm-chat-compose-zone,
#now-sub-jukebox #jbRoom .fm-chat-compose-zone {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: none;
  min-width: 0;
  width: 100%;
}

#now-sub-jukebox #jbRoom .fm-chat-compose-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

#now-sub-jukebox #jbRoom .fm-chat-emoji-btn {
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -2px 1px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.42),
    0 7px 13px -3px rgba(0, 0, 0, 0.55);
}

#now-sub-jukebox #jbRoom .jbx-archive-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  margin-bottom: 12px;
}

#now-sub-jukebox #jbRoom #jbArchiveGoToday.fx-key,
#now-sub-jukebox #jbRoom .jbx-archive-banner .fx-key.fx-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 44px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: var(--fx-fw-ui);
  box-sizing: border-box;
  text-decoration: none;
  white-space: nowrap;
}

#now-sub-jukebox #jbRoom .jbx-archive-banner-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#now-sub-jukebox #jbRoom .jbx-archive-banner-title {
  font-size: 15px;
  font-weight: var(--fx-fw-heading);
  color: var(--text);
}

#now-sub-jukebox #jbRoom .jbx-archive-banner-winner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}

#now-sub-jukebox #jbRoom .jbx-archive-win-cover {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
  background: var(--card2);
}

#now-sub-jukebox #jbRoom .jbx-archive-win-meta {
  min-width: 0;
  overflow: hidden;
  flex: 1;
}

#now-sub-jukebox #jbRoom .jbx-archive-win-title {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#now-sub-jukebox #jbRoom .jbx-archive-win-cover--empty {
  background: linear-gradient(145deg, var(--card2), #2a1f45);
}

#now-sub-jukebox #jbRoom .jbx-archive-banner-tie {
  display: flex;
  align-items: center;
  gap: 8px;
}

#now-sub-jukebox #jbRoom .jbx-chat-closed {
  padding: 12px 4px 4px;
}

#now-sub-jukebox #jbRoom .jb-vote-item.jbx-archive-row {
  grid-template-columns: 28px 32px minmax(0, 1fr) auto auto auto;
}

#now-sub-jukebox #jbRoom .jbx-archive-place {
  font-size: 14px;
  font-weight: var(--fx-fw-heading);
  color: var(--muted);
  text-align: center;
}

#now-sub-jukebox #jbRoom .jbx-archive-votes {
  min-width: 52px;
  height: 36px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

#now-sub-jukebox .jb-dash-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 16px;
  width: fit-content;
  max-width: 100%;
}

#now-sub-jukebox .jb-past-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  width: 100%;
  max-width: none;
  height: 100%;
  box-sizing: border-box;
}

#now-sub-jukebox #jbLiveGrid.jb-live-grid--past {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  justify-items: stretch;
  align-items: stretch;
}

#now-sub-jukebox .jb-past-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

#now-sub-jukebox .jb-past-kind {
  font-size: 15px;
  font-weight: var(--fx-fw-heading);
}

#now-sub-jukebox .jb-past-winner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#now-sub-jukebox .jb-past-cover {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  flex: none;
  background: var(--card2);
}

#now-sub-jukebox .jb-past-cover--empty {
  background: linear-gradient(145deg, var(--card2), #2a1f45);
}

#now-sub-jukebox .jb-past-winner-meta {
  min-width: 0;
  overflow: hidden;
  flex: 1;
}

#now-sub-jukebox .jb-past-track {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: var(--fx-fw-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#now-sub-jukebox .jb-past-artist {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#now-sub-jukebox .jb-past-prize-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#now-sub-jukebox .jb-past-prize {
  min-height: 40px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}

#now-sub-jukebox .jb-past-tie {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 768px) {
  #now-sub-jukebox #jbRoom .jb-room-layout {
    grid-template-columns: 1fr;
  }

  #now-sub-jukebox #jbRoom .jbx-player-top,
  #now-sub-jukebox #jbRoom .jbx-transport-side {
    flex-wrap: wrap;
  }

  #now-sub-jukebox #jbRoom .jbx-transport-main {
    gap: 14px;
  }

  #now-sub-jukebox #jbRoom #jbPlayBtn {
    width: 70px;
    height: 70px;
  }

  #now-sub-jukebox #jbRoom .jb-vote-item {
    grid-template-columns: 32px minmax(0, 1fr);
    height: auto;
    min-height: 40px;
    padding: 6px 8px;
    gap: 8px;
  }

  #now-sub-jukebox #jbRoom .jb-vote-item.jbx-archive-row {
    grid-template-columns: 28px 32px minmax(0, 1fr);
  }

  #now-sub-jukebox #jbRoom .jb-vote-item .fx-key,
  #now-sub-jukebox #jbRoom .jb-vote-item .fx-rkey,
  #now-sub-jukebox #jbRoom .jbx-vote-spacer,
  #now-sub-jukebox #jbRoom .jbx-archive-votes {
    grid-column: 2;
  }

  #now-sub-jukebox #jbRoom .jb-vote-item.jbx-archive-row .fx-rkey,
  #now-sub-jukebox #jbRoom .jb-vote-item.jbx-archive-row .jbx-archive-votes,
  #now-sub-jukebox #jbRoom .jb-vote-item.jbx-archive-row .fx-led {
    grid-column: 3;
  }

  #now-sub-jukebox #jbRoom .jbx-archive-banner {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── JUKEBOX RESULTS ───────────────────────────────────────── */

#now-sub-jukebox #jbResults {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px;
  box-sizing: border-box;
}

#now-sub-jukebox #jbResults .jb-room-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#now-sub-jukebox #jbResults .jbr-wait,
#now-sub-jukebox #jbResults .jbr-nowin {
  margin-top: 20px;
  padding: 22px 28px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

#now-sub-jukebox #jbResults .jbr-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 28px;
}

#now-sub-jukebox #jbResults .jbr-head-left {
  min-width: 0;
  flex: 1;
}

#now-sub-jukebox #jbResults .jbr-title {
  font-family: 'Epilogue', sans-serif;
  font-size: 24px;
  font-weight: var(--fx-fw-heading);
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.25;
}

#now-sub-jukebox #jbResults .jbr-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

#now-sub-jukebox #jbResults .jbr-head-prize {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
}

#now-sub-jukebox #jbResults .jbr-prize {
  height: 56px;
  padding: 0 16px;
  box-sizing: border-box;
}

#now-sub-jukebox #jbResults .jbr-winner {
  margin-top: 20px;
  padding: 22px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
}

#now-sub-jukebox #jbResults .jbr-cover {
  object-fit: cover;
  flex-shrink: 0;
  background: var(--card2);
}

#now-sub-jukebox #jbResults .jbr-cover--win {
  width: 96px;
  height: 96px;
  border-radius: 12px;
}

#now-sub-jukebox #jbResults .jbr-rank-row .jbr-cover {
  width: 48px;
  height: 48px;
  border-radius: 8px;
}

#now-sub-jukebox #jbResults .jbr-cover--empty {
  box-shadow: inset 0 0 0 1px var(--border);
}

#now-sub-jukebox #jbResults .jbr-winner-meta,
#now-sub-jukebox #jbResults .jbr-rank-meta {
  min-width: 0;
}

#now-sub-jukebox #jbResults .jbr-winner-lbl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: var(--fx-fw-heading);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

#now-sub-jukebox #jbResults .jbr-winner-meta .jbr-track {
  font-size: 22px;
  font-weight: var(--fx-fw-heading);
}

#now-sub-jukebox #jbResults .jbr-winner-meta .jbr-artist {
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
}

#now-sub-jukebox #jbResults .jbr-track {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: 'Epilogue', sans-serif;
  font-weight: var(--fx-fw-heading);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#now-sub-jukebox #jbResults .jbr-artist {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#now-sub-jukebox #jbResults .jbr-winner-votes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: none;
}

#now-sub-jukebox #jbResults .jbr-votes--win {
  height: 56px;
  padding: 0 14px;
  box-sizing: border-box;
}

#now-sub-jukebox #jbResults .jbr-votes-lbl {
  font-size: 11px;
  color: var(--muted);
  text-transform: lowercase;
}

#now-sub-jukebox #jbResults .jbr-rank-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#now-sub-jukebox #jbResults .jbr-rank-row {
  display: grid;
  grid-template-columns: 40px 48px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  height: 72px;
  padding: 0 18px;
  box-sizing: border-box;
}

#now-sub-jukebox #jbResults .jbr-place {
  font-family: 'Epilogue', sans-serif;
  font-size: 18px;
  font-weight: var(--fx-fw-heading);
  color: var(--muted);
  text-align: center;
}

#now-sub-jukebox #jbResults .jbr-rank-row.is-winner .jbr-place {
  color: var(--fx-live);
}

#now-sub-jukebox #jbResults .jbr-rank-meta .jbr-track {
  font-size: 15px;
  font-weight: var(--fx-fw-heading);
}

#now-sub-jukebox #jbResults .jbr-rank-meta .jbr-artist {
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}

#now-sub-jukebox #jbResults .jbr-rank-side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

#now-sub-jukebox #jbResults .jbr-votes--rank {
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
}

#now-sub-jukebox #jbResults .jbr-personal {
  margin-top: 20px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#now-sub-jukebox #jbResults .jbr-personal-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text);
  min-width: 0;
}

#now-sub-jukebox #jbResults .jbr-personal-vote {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#now-sub-jukebox #jbResults .jbr-totals {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}

#now-sub-jukebox #jbResults .jbr-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 26px;
  font-size: 16px;
  margin-top: 16px;
  align-self: flex-start;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  #now-sub-jukebox #jbResults {
    padding: 20px 14px 48px;
  }

  #now-sub-jukebox #jbResults .jbr-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  #now-sub-jukebox #jbResults .jbr-head-prize {
    align-items: flex-start;
  }

  #now-sub-jukebox #jbResults .jbr-title {
    font-size: 20px;
  }

  #now-sub-jukebox #jbResults .jbr-winner {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  #now-sub-jukebox #jbResults .jbr-cover--win {
    width: 64px;
    height: 64px;
  }

  #now-sub-jukebox #jbResults .jbr-winner-votes {
    grid-column: 1 / -1;
    align-items: flex-start;
  }

  #now-sub-jukebox #jbResults .jbr-winner-meta .jbr-track {
    font-size: 18px;
  }

  #now-sub-jukebox #jbResults .jbr-rank-row {
    grid-template-columns: 28px 40px minmax(0, 1fr) auto;
    height: auto;
    padding: 12px;
    gap: 12px;
  }

  #now-sub-jukebox #jbResults .jbr-rank-row .jbr-cover {
    width: 40px;
    height: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JUKEBOX DASHBOARD — Night glass (#jbDash)
   Selectors: #now-sub-jukebox #jbDash … (layout allowed)
   ═══════════════════════════════════════════════════════════════════════════ */

.fx-led.is-violet {
  background: #8B5CFF;
  box-shadow: 0 0 8px rgba(139, 92, 255, 0.55);
}

#now-sub-jukebox #jbDash.jb-dash {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) 344px;
  gap: var(--fx-gap);
  align-items: start;
  /* Shell already applies --fx-chrome-pad (14px); do not double-pad. */
  padding: 0;
  box-sizing: border-box;
  width: auto;
  max-width: none;
  margin: 0;
}

/* Must beat #now-sub-jukebox #jbDash.jb-dash { display:grid } (styles.css .jb-dash.hidden alone loses). */
#now-sub-jukebox #jbDash.hidden,
#now-sub-jukebox #jbDash.jb-dash.hidden {
  display: none;
}

#now-sub-jukebox #jbDash .jb-col-left {
  padding: 20px 14px;
  width: 264px;
  max-width: 264px;
  top: 16px;
}

#now-sub-jukebox #jbDash .jb-col-right {
  width: 344px;
  max-width: 344px;
  top: 16px;
}

#now-sub-jukebox #jbDash .jb-col-left,
#now-sub-jukebox #jbDash .jb-col-right {
  position: sticky;
  align-self: start;
}

#now-sub-jukebox #jbDash .jb-col-left {
  background: var(--fx-glass-a);
  border: 1px solid var(--fx-edge);
  border-radius: 18px;
  box-shadow: var(--fx-up);
  backdrop-filter: blur(12px);
}

#now-sub-jukebox #jbDash .jb-col-left-head,
#now-sub-jukebox #jbDash .jb-genre-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  /* Beat styles.css .jb-col-left-head uppercase / muted. */
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  font-size: inherit;
  font-weight: inherit;
}

#now-sub-jukebox #jbDash .jb-genre-head-title {
  font-family: var(--font-head);
  font-size: var(--fx-fs-panel);
  font-weight: var(--fx-fw-panel);
  color: var(--text);
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.2;
}

#now-sub-jukebox #jbDash .jb-genre-head-live {
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
  text-transform: none;
  letter-spacing: normal;
}

#now-sub-jukebox #jbDash .jb-genre-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

#now-sub-jukebox #jbDash .jb-genre-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 40px;
  padding: 0 10px 0 14px;
  border-radius: 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  transition: background 0.15s ease;
}

#now-sub-jukebox #jbDash .jb-genre-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

#now-sub-jukebox #jbDash .jb-genre-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

#now-sub-jukebox #jbDash .jb-genre-row-name {
  font-size: var(--fx-fs-panel);
  font-weight: var(--fx-row-title-fw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

#now-sub-jukebox #jbDash .jb-genre-row:not(.active):not(.has-live) .jb-genre-row-name {
  color: var(--muted);
}

#now-sub-jukebox #jbDash .jb-genre-row.active .jb-genre-row-name {
  color: var(--fx-live);
}

#now-sub-jukebox #jbDash .jb-genre-row.active {
  background: linear-gradient(180deg, var(--fx-well-a), var(--fx-well-b));
  box-shadow: var(--fx-in);
}

#now-sub-jukebox #jbDash .jb-genre-row-lcd {
  flex-shrink: 0;
  height: 26px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 36px;
}

#now-sub-jukebox #jbDash .jb-center-titles h1,
#now-sub-jukebox #jbDash #jbCenterTitle {
  font-family: var(--font-head);
  font-size: var(--fx-fs-title);
  font-weight: var(--fx-fw-title);
  letter-spacing: var(--fx-track-title);
  margin: 0 0 4px;
  line-height: var(--fx-lh-title);
  color: var(--text);
}

#now-sub-jukebox #jbDash .jb-center-sub,
#now-sub-jukebox #jbDash #jbCenterSub {
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
  margin: 0;
}

#now-sub-jukebox #jbDash #jbSubSearch {
  width: 280px;
  max-width: 100%;
  height: var(--fx-field-h);
  font-size: var(--fx-field-fs);
  box-sizing: border-box;
}

#now-sub-jukebox #jbDash .jb-sub-live-only-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#now-sub-jukebox #jbDash .jb-sub-live-only {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

#now-sub-jukebox #jbDash .jb-sub-live-only-label {
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
}

#now-sub-jukebox #jbDash #jbLiveGrid.jb-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
  justify-items: stretch;
}

#now-sub-jukebox #jbDash .jb-dash-live-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 18px;
}

#now-sub-jukebox #jbDash .jb-dash-live-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
}

#now-sub-jukebox #jbDash .jb-dash-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fx-chip-fs);
  font-weight: var(--fx-chip-fw);
  letter-spacing: 0.04em;
  flex: none;
}

#now-sub-jukebox #jbDash .jb-dash-live-close {
  flex: none;
  white-space: nowrap;
  color: var(--muted);
}

#now-sub-jukebox #jbDash .jb-dash-whole-pill {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: var(--fx-fw-ui);
  color: var(--muted);
  flex-shrink: 0;
}

#now-sub-jukebox #jbDash .jb-dash-live-name {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: var(--fx-fw-title);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#now-sub-jukebox #jbDash .jb-dash-clock-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

#now-sub-jukebox #jbDash .jb-dash-clock-lcd {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  padding: 0 12px;
  box-sizing: border-box;
}

#now-sub-jukebox #jbDash .jb-dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

#now-sub-jukebox #jbDash .jb-dash-stat-lcd {
  height: 40px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}

#now-sub-jukebox #jbDash .jb-dash-stat-lcd.is-dim {
  opacity: 0.45;
}

#now-sub-jukebox #jbDash .jb-dash-stats .jb-dash-stat {
  min-width: 0;
  overflow: hidden;
}

#now-sub-jukebox #jbDash .jb-dash-prize-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex-wrap: nowrap;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
}

#now-sub-jukebox #jbDash .jb-dash-prize-euro {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: var(--fx-fw-heading);
  color: var(--fx-live);
  flex-shrink: 0;
  line-height: 1;
}

#now-sub-jukebox #jbDash .jb-dash-prize-seg {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 3px;
  white-space: nowrap;
  min-width: 0;
  flex: none;
}

#now-sub-jukebox #jbDash .jb-dash-covers-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#now-sub-jukebox #jbDash .jb-dash-covers {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

#now-sub-jukebox #jbDash .jb-dash-cover {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: linear-gradient(145deg, var(--card2), #2a1f45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

#now-sub-jukebox #jbDash .jb-dash-cover + .jb-dash-cover {
  margin-left: -12px;
}

#now-sub-jukebox #jbDash .jb-dash-covers-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  min-width: 0;
}

#now-sub-jukebox #jbDash .jb-dash-enter {
  width: 100%;
  height: 44px;
  font-size: 15px;
  font-weight: var(--fx-fw-ui);
  margin-top: auto;
}

#now-sub-jukebox #jbDash .jb-dash-tie-note {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}

#now-sub-jukebox #jbDash .jb-dash-tie-date {
  font-size: 12px;
  color: var(--muted);
}

#now-sub-jukebox #jbDash .jb-dash-more-card {
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-height: 200px;
  box-sizing: border-box;
}

#now-sub-jukebox #jbDash .jb-dash-more-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: var(--fx-fw-heading);
  color: var(--text);
  margin: 0;
  line-height: 1.25;
}

#now-sub-jukebox #jbDash .jb-dash-more-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

#now-sub-jukebox #jbDash .jb-waiting-block {
  padding: 20px 22px;
  margin-top: 8px;
}

#now-sub-jukebox #jbDash .jb-waiting-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

#now-sub-jukebox #jbDash .jb-waiting-head {
  font-family: var(--font-head);
  font-size: var(--fx-fs-panel);
  font-weight: var(--fx-fw-panel);
  color: var(--text);
  margin: 0;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.2;
}

#now-sub-jukebox #jbDash .jb-waiting-head-hint {
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}

#now-sub-jukebox #jbDash .jb-waiting-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#now-sub-jukebox #jbDash .jb-wait-chip {
  /* Base .fx-chip; keep clickable waiting state colors. */
  cursor: pointer;
  color: var(--muted);
  border: none;
}

#now-sub-jukebox #jbDash .jb-wait-chip.has-tracks {
  color: var(--text);
}

#now-sub-jukebox #jbDash .jb-waiting-more {
  margin-top: 10px;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fx-live);
  border: none;
  background: linear-gradient(180deg, var(--fx-well-a), var(--fx-well-b));
  box-shadow: var(--fx-up-sm);
  cursor: pointer;
  font-family: var(--font-body);
}

#now-sub-jukebox #jbDash .jb-rail-card {
  padding: 16px;
  margin-bottom: 14px;
  background: var(--fx-glass-a);
  border: 1px solid var(--fx-edge);
  border-radius: 18px;
  box-shadow: var(--fx-up);
}

#now-sub-jukebox #jbDash .jb-rail-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

#now-sub-jukebox #jbDash .jb-rail-title {
  font-family: var(--font-head);
  font-size: var(--fx-fs-panel);
  font-weight: var(--fx-fw-panel);
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.2;
}

#now-sub-jukebox #jbDash .jb-rail-head-row .jb-rail-title {
  margin-bottom: 0;
}

#now-sub-jukebox #jbDash .jb-rail-card--activity {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#now-sub-jukebox #jbDash .jb-activity {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#now-sub-jukebox #jbDash .jb-activity-well {
  padding: 8px 14px;
  flex: 1;
  min-height: 120px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#now-sub-jukebox #jbDash .jb-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#now-sub-jukebox #jbDash .jb-activity-item:last-child {
  border-bottom: none;
}

#now-sub-jukebox #jbDash .jb-activity-item-body {
  flex: 1;
  min-width: 0;
}

#now-sub-jukebox #jbDash .jb-activity-item-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

#now-sub-jukebox #jbDash .jb-activity-item-time {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

#now-sub-jukebox #jbDash .jb-winner-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

#now-sub-jukebox #jbDash .jb-winner-period-lbl {
  font-size: 12px;
  color: var(--muted);
  text-transform: lowercase;
}

#now-sub-jukebox #jbDash .jb-winner-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  min-width: 0;
  overflow: hidden;
}

#now-sub-jukebox #jbDash .jb-winner-item:last-child {
  border-bottom: none;
}

#now-sub-jukebox #jbDash .jb-winner-cover {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(145deg, var(--card2), #2a1f45);
}

#now-sub-jukebox #jbDash .jb-winner-cover--empty {
  display: block;
}

#now-sub-jukebox #jbDash .jb-winner-item-meta {
  min-width: 0;
  overflow: hidden;
  flex: 1;
}

#now-sub-jukebox #jbDash .jb-winner-item-title {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: var(--fx-fw-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  min-width: 0;
}

#now-sub-jukebox #jbDash .jb-winner-item-sub {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#now-sub-jukebox #jbDash .jb-my-vote-lcd {
  height: 52px;
  min-width: 220px;
  width: 100%;
  max-width: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#now-sub-jukebox #jbDash .jb-my-vote-lcd .fx-lcd-text {
  font-size: 18px;
  letter-spacing: 0.06em;
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

#now-sub-jukebox #jbRoom #jbArchiveYourVote {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- Marquee (.fx-mq) --- */
/* Measured node must be width-bounded or scrollWidth == clientWidth */
#now-sub-jukebox [data-mq] {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}
.fx-mq {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}
.fx-mq:not(.is-running) {
  text-overflow: ellipsis;
}
.fx-mq-inner {
  display: inline-block;
  max-width: none;
}
.fx-mq.is-running .fx-mq-inner {
  animation: fx-mq var(--fx-mq-dur) ease-in-out var(--fx-mq-delay, 0s) infinite alternate;
}
@keyframes fx-mq {
  0%, 25% { transform: translateX(0); }
  75%, 100% { transform: translateX(calc(-1 * var(--fx-mq-dist))); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-mq.is-running .fx-mq-inner {
    animation: none;
  }
  .fx-mq {
    text-overflow: ellipsis;
  }
}

/* Override ID-scoped ellipsis when marquee is active */
#now-sub-jukebox .fx-mq {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}
#now-sub-jukebox .fx-mq:not(.is-running) {
  text-overflow: ellipsis;
}

@media (max-width: 1100px) {
  #now-sub-jukebox #jbDash.jb-dash {
    grid-template-columns: 1fr;
    padding: 0;
  }

  #now-sub-jukebox #jbDash .jb-col-left,
  #now-sub-jukebox #jbDash .jb-col-right {
    position: static;
    width: auto;
    max-width: none;
  }

  #now-sub-jukebox #jbDash .jb-col-left {
    order: -1;
  }

  #now-sub-jukebox #jbDash .jb-genre-nav {
    max-height: none;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
  }

  #now-sub-jukebox #jbDash .jb-genre-row {
    width: auto;
    flex: none;
    white-space: nowrap;
  }

  #now-sub-jukebox #jbDash .jb-col-right {
    order: 2;
  }

  #now-sub-jukebox #jbDash .jb-col-center {
    order: 1;
  }

  #now-sub-jukebox #jbDash #jbLiveGrid.jb-live-grid {
    grid-template-columns: 1fr;
  }
}


/* Jukebox as standalone page — keep former .now-sub fixed geometry (no fadeIn).
   z-index:50 on the page matches old .now-sub so footer (z-index:1) stays under.
   Top comes from --cs-chrome-top / _lrSyncCollabOverlayTop (nav + admin chrome). */
#page-jukebox {
  padding-top: 0;
  min-height: 0;
  height: 0;
  margin: 0;
  overflow: visible;
  animation: none;
  background: transparent;
}
#page-jukebox.active {
  animation: none;
  z-index: 50;
}
#page-jukebox #now-sub-jukebox {
  /* Frame geometry from .fx-app-shell; keep dashboard scroll. */
  overflow-x: hidden;
  overflow-y: auto;
  display: block;
  gap: 0;
  padding: var(--fx-chrome-pad);
  box-sizing: border-box;
}

#page-jukebox #now-sub-jukebox .now-sub-inner {
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* Site chrome that used to sit under the fixed jukebox layer — hide only on this page. */
html:has(#page-jukebox.active) footer,
html:has(#page-jukebox.active) #chatMinimizedTab,
html:has(#page-jukebox.active) #artistChatPanel,
html:has(#page-jukebox.active) #floatPanel,
html:has(#page-jukebox.active) #floatTab,
html:has(#page-live.active) footer,
html:has(#page-live.active) #chatMinimizedTab,
html:has(#page-live.active) #artistChatPanel,
html:has(#page-live.active) #floatPanel,
html:has(#page-live.active) #floatTab,
html:has(#page-live-room.active) footer,
html:has(#page-live-room.active) #chatMinimizedTab,
html:has(#page-live-room.active) #artistChatPanel,
html:has(#page-live-room.active) #floatPanel,
html:has(#page-live-room.active) #floatTab,
html:has(#page-live-new.active) footer,
html:has(#page-live-new.active) #chatMinimizedTab,
html:has(#page-live-new.active) #artistChatPanel,
html:has(#page-live-new.active) #floatPanel,
html:has(#page-now.active) footer,
html:has(#page-now.active) #chatMinimizedTab,
html:has(#page-now.active) #artistChatPanel,
html:has(#page-now.active) #floatPanel,
html:has(#page-now.active) #floatTab,
html:has(#page-live-new.active) #floatTab {
  display: none !important;
}

/* ── Live list / room / Go live shell (Night glass via shared .fx-* ) ──────── */
#page-live,
#page-live-room,
#page-live-new,
#page-now {
  padding-top: 0;
  min-height: 0;
  height: 0;
  margin: 0;
  overflow: visible;
  animation: none;
  background: transparent;
}
#page-live.active,
#page-live-room.active,
#page-live-new.active,
#page-now.active {
  animation: none;
  z-index: 50;
}

/* Room title row stays room-scoped (list title row is defined below). */
#page-live-room .lv-title-row {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fx-gap);
  min-height: 36px;
  max-height: 36px;
  min-width: 0;
  padding-left: 0;
  box-sizing: border-box;
}
#page-live-room .lv-page-title {
  margin: 0;
  font-size: var(--fx-fs-title);
  font-weight: var(--fx-fw-title);
  letter-spacing: var(--fx-track-title);
  line-height: var(--fx-lh-title);
  color: var(--text);
  flex: none;
}

/* ── Live list (#page-live): title row + tabs ─────────────────────── */
:is(#page-live,#lrBrowse) .lv-title-row {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fx-gap);
  min-height: 36px;
  min-width: 0;
  box-sizing: border-box;
}
:is(#page-live,#lrBrowse) .lv-title-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1 1 auto;
}
:is(#page-live,#lrBrowse) .lv-page-title {
  margin: 0;
  font-size: var(--fx-fs-title);
  font-weight: var(--fx-fw-title);
  letter-spacing: var(--fx-track-title);
  line-height: var(--fx-lh-title);
  color: var(--text);
  flex: none;
}
:is(#page-live,#lrBrowse) .lv-tab-well,
#now-sub-jukebox #jbDash .lv-tab-well,
#page-discover .lv-tab-well,
.dr-shell .lv-tab-well {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  scrollbar-width: none;
}
:is(#page-live,#lrBrowse) .lv-tab-well::-webkit-scrollbar,
#now-sub-jukebox #jbDash .lv-tab-well::-webkit-scrollbar,
#page-discover .lv-tab-well::-webkit-scrollbar,
.dr-shell .lv-tab-well::-webkit-scrollbar {
  display: none;
}
:is(#page-live,#lrBrowse) .lv-tab-key,
#now-sub-jukebox #jbDash .lv-tab-key,
#page-discover .lv-tab-key,
.dr-shell .lv-tab-key,
:is(#page-artist,.pf-app) .lv-tab-key {
  height: var(--fx-key-h);
  min-width: 0;
  flex: none;
  padding: 0 var(--fx-key-pad-x);
  font-size: var(--fx-key-fs);
  font-weight: var(--fx-fw-ui);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--fx-key-radius);
  font-family: inherit;
}
:is(#page-live,#lrBrowse) .lv-tab-key.is-down,
#now-sub-jukebox #jbDash .lv-tab-key.is-down,
#page-discover .lv-tab-key.is-down,
.dr-shell .lv-tab-key.is-down,
:is(#page-artist,.pf-app) .lv-tab-key.is-down {
  color: var(--fx-live);
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(0, 0, 0, 0.28),
    0 1px 0 var(--fx-edge);
  font-weight: var(--fx-fw-ui);
}
:is(#page-live,#lrBrowse) .lv-tab-n {
  font-size: var(--fx-key-fs);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
}
:is(#page-live,#lrBrowse) .lv-tab-key.is-down .lv-tab-n {
  color: color-mix(in srgb, var(--fx-live) 55%, var(--muted));
}
:is(#page-live,#lrBrowse) .lv-title-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
:is(#page-live,#lrBrowse) .lv-go-live-slot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 120px;
  min-height: var(--fx-key-h);
  flex: none;
}
:is(#page-live,#lrBrowse) .lv-go-live-slot .fx-key.fx-primary {
  min-width: var(--fx-key-min-w);
}

/* ── Filter bar: one panel, one row (search | menus | view | sort) ── */
:is(#page-live,#lrBrowse) .lv-filters {
  position: relative;
  z-index: 60;
  flex: none;
  padding: var(--fx-panel-pad-y-sm) var(--fx-panel-pad);
  min-width: 0;
  box-sizing: border-box;
}
:is(#page-live,#lrBrowse) .lv-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
}
:is(#page-live,#lrBrowse) .lv-fg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
:is(#page-live,#lrBrowse) .lv-fg-search {
  position: relative;
  flex: 1 1 180px;
  min-width: 140px;
  max-width: var(--fx-lv-search-max);
}
:is(#page-live,#lrBrowse) .lv-search-icon {
  position: absolute;
  left: var(--fx-field-pad-x);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--muted);
  pointer-events: none;
}
:is(#page-live,#lrBrowse) .lv-search {
  width: 100%;
  height: var(--fx-field-h);
  padding: 0 var(--fx-field-pad-x) 0 calc(var(--fx-field-pad-x) + 22px);
  box-sizing: border-box;
  color: var(--text);
  font: inherit;
  font-size: var(--fx-field-fs);
  font-weight: var(--fx-fw-body);
}
:is(#page-live,#lrBrowse) .lv-bar-end, #page-discover .lv-bar-end, .dr-shell .lv-bar-end {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}
:is(#page-live,#lrBrowse) .lv-mobile-filters-btn {
  display: none;
  flex: none;
  height: var(--fx-key-h);
}
:is(#page-live,#lrBrowse) .lv-filter-panel {
  display: contents;
}
@media (max-width: 768px) {
  :is(#page-live,#lrBrowse) .lv-mobile-filters-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--fx-key-min-w);
  }
  :is(#page-live,#lrBrowse) .lv-filter-panel {
    display: none;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
  }
  :is(#page-live,#lrBrowse) .lv-filters.is-mobile-filters-open .lv-filter-panel {
    display: flex;
  }
  :is(#page-live,#lrBrowse) .lv-fg-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
  :is(#page-live,#lrBrowse) .lv-bar-end, #page-discover .lv-bar-end, .dr-shell .lv-bar-end {
    margin-left: 0;
    flex: 1 1 100%;
    justify-content: flex-end;
  }
  :is(#page-live,#lrBrowse) .lv-dd-btn, #page-discover .lv-dd-btn, .dr-shell .lv-dd-btn, .ftp-host .lv-dd-btn{
    max-width: none;
  }
}

/* ── Drop-down buttons + menus ───────────────────────────────────── */
:is(#page-live,#lrBrowse) .lv-dd, #page-discover .lv-dd, .dr-shell .lv-dd, .ftp-host .lv-dd{
  position: relative;
  flex: none;
  min-width: 0;
}
:is(#page-live,#lrBrowse) .lv-dd-btn, #page-discover .lv-dd-btn, .dr-shell .lv-dd-btn, .ftp-host .lv-dd-btn{
  height: var(--fx-key-h);
  max-width: 220px;
  padding: 0 var(--fx-key-pad-x);
  box-sizing: border-box;
  gap: 6px;
  font-size: var(--fx-key-fs);
  font-weight: var(--fx-key-fw);
  white-space: nowrap;
}
:is(#page-live,#lrBrowse) .lv-dd-btn.has-value, #page-discover .lv-dd-btn.has-value, .dr-shell .lv-dd-btn.has-value, .ftp-host .lv-dd-btn.has-value{
  color: var(--fx-live);
}
:is(#page-live,#lrBrowse) .lv-dd-btn.is-open, #page-discover .lv-dd-btn.is-open, .dr-shell .lv-dd-btn.is-open, .ftp-host .lv-dd-btn.is-open{
  transform: translateY(1px);
  background: linear-gradient(180deg, var(--fx-key-b), var(--fx-key-a));
}
:is(#page-live,#lrBrowse) .lv-dd-label, #page-discover .lv-dd-label, .dr-shell .lv-dd-label, .ftp-host .lv-dd-label{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(#page-live,#lrBrowse) .lv-dd-chev, #page-discover .lv-dd-chev, .dr-shell .lv-dd-chev, .ftp-host .lv-dd-chev{
  flex: none;
  transition: transform 0.12s ease;
}
:is(#page-live,#lrBrowse) .lv-dd-btn.is-open .lv-dd-chev, #page-discover .lv-dd-btn.is-open .lv-dd-chev, .dr-shell .lv-dd-btn.is-open .lv-dd-chev, .ftp-host .lv-dd-btn.is-open .lv-dd-chev{
  transform: rotate(180deg);
}
:is(#page-live,#lrBrowse) .lv-dd-count, #page-discover .lv-dd-count, .dr-shell .lv-dd-count, .ftp-host .lv-dd-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: var(--fx-lv-pill-fs);
  font-weight: var(--fx-fw-ui);
  color: var(--bg);
  background: var(--fx-live);
}
:is(#page-live,#lrBrowse) .lv-dd-menu, #page-discover .lv-dd-menu, .dr-shell .lv-dd-menu, .ftp-host .lv-dd-menu{
  position: absolute;
  z-index: var(--fx-menu-z);
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-direction: column;
  width: var(--fx-menu-w);
  max-width: calc(100vw - 2 * var(--fx-chrome-pad));
  max-height: min(var(--fx-menu-max-h), calc(100vh - var(--cs-chrome-top, 60px) - 120px));
  overflow-y: auto;
  padding: var(--fx-menu-pad);
  box-sizing: border-box;
  border-radius: var(--fx-menu-radius);
  color: var(--text);
  background: var(--fx-menu-bg);
  -webkit-backdrop-filter: blur(var(--fx-menu-blur)) saturate(160%);
  backdrop-filter: blur(var(--fx-menu-blur)) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--fx-rim),
    inset 0 0 0 1px var(--fx-edge),
    0 26px 50px -18px var(--fx-drop),
    0 4px 12px -4px var(--fx-drop);
}
:is(#page-live,#lrBrowse) .lv-dd-menu.is-end, #page-discover .lv-dd-menu.is-end, .dr-shell .lv-dd-menu.is-end, .ftp-host .lv-dd-menu.is-end{
  left: auto;
  right: 0;
}
:is(#page-live,#lrBrowse) .lv-dd-menu.is-up, #page-discover .lv-dd-menu.is-up, .dr-shell .lv-dd-menu.is-up, .ftp-host .lv-dd-menu.is-up{
  top: auto;
  bottom: calc(100% + 6px);
}
/* Open menu sits above sibling cards (backdrop-filter panels create stacking contexts) */
.fx-panel:has(.lv-dd-btn.is-open),
:is(#page-live,#lrBrowse) .lv-dd:has(.lv-dd-btn.is-open),
#page-discover .lv-dd:has(.lv-dd-btn.is-open),
.dr-shell .lv-dd:has(.lv-dd-btn.is-open),
.ftp-host:has(.lv-dd-btn.is-open) {
  position: relative;
  z-index: calc(var(--fx-menu-z) + 1);
}
:is(#page-live,#lrBrowse) .lv-dd-menu > *, #page-discover .lv-dd-menu > *, .dr-shell .lv-dd-menu > *, .ftp-host .lv-dd-menu > *{
  flex: none;
}
:is(#page-live,#lrBrowse) .lv-dd-menu > .lv-dd-list, #page-discover .lv-dd-menu > .lv-dd-list, .dr-shell .lv-dd-menu > .lv-dd-list, .ftp-host .lv-dd-menu > .lv-dd-list{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
:is(#page-live,#lrBrowse) .lv-dd-search, #page-discover .lv-dd-search, .dr-shell .lv-dd-search, .ftp-host .lv-dd-search{
  padding-bottom: var(--fx-menu-pad);
}
:is(#page-live,#lrBrowse) .lv-dd-input, #page-discover .lv-dd-input, .dr-shell .lv-dd-input, .ftp-host .lv-dd-input{
  width: 100%;
  height: var(--fx-field-h);
  padding: 0 var(--fx-field-pad-x);
  box-sizing: border-box;
  color: var(--text);
  font: inherit;
  font-size: var(--fx-field-fs);
  font-weight: var(--fx-fw-body);
  color-scheme: dark;
}
:is(#page-live,#lrBrowse) .lv-dd-item, #page-discover .lv-dd-item, .dr-shell .lv-dd-item, .ftp-host .lv-dd-item{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--fx-menu-item-h);
  padding: 0 10px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--fx-key-radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fx-key-fs);
  font-weight: var(--fx-fw-body);
  text-align: left;
  cursor: pointer;
}
:is(#page-live,#lrBrowse) .lv-dd-item:hover, #page-discover .lv-dd-item:hover, .dr-shell .lv-dd-item:hover, .ftp-host .lv-dd-item:hover,
:is(#page-live,#lrBrowse) .lv-dd-item:focus-visible, #page-discover .lv-dd-item:focus-visible, .dr-shell .lv-dd-item:focus-visible, .ftp-host .lv-dd-item:focus-visible{
  background: var(--fx-key-a);
  color: var(--text);
  outline: none;
}
:is(#page-live,#lrBrowse) .lv-dd-item.is-sel, #page-discover .lv-dd-item.is-sel, .dr-shell .lv-dd-item.is-sel, .ftp-host .lv-dd-item.is-sel{
  color: var(--fx-live);
}
:is(#page-live,#lrBrowse) .lv-dd-item.is-hit .lv-dd-item-label, #page-discover .lv-dd-item.is-hit .lv-dd-item-label, .dr-shell .lv-dd-item.is-hit .lv-dd-item-label, .ftp-host .lv-dd-item.is-hit .lv-dd-item-label{
  color: var(--text);
}
:is(#page-live,#lrBrowse) .lv-dd-item--sub.is-hit .lv-dd-item-label, #page-discover .lv-dd-item--sub.is-hit .lv-dd-item-label, .dr-shell .lv-dd-item--sub.is-hit .lv-dd-item-label, .ftp-host .lv-dd-item--sub.is-hit .lv-dd-item-label{
  color: var(--text);
}
:is(#page-live,#lrBrowse) .lv-dd-item--sub, #page-discover .lv-dd-item--sub, .dr-shell .lv-dd-item--sub, .ftp-host .lv-dd-item--sub{
  padding-left: 24px;
  color: var(--muted);
}
:is(#page-live,#lrBrowse) .lv-dd-item--sub.is-sel, #page-discover .lv-dd-item--sub.is-sel, .dr-shell .lv-dd-item--sub.is-sel, .ftp-host .lv-dd-item--sub.is-sel{
  color: var(--fx-live);
}
:is(#page-live,#lrBrowse) .lv-dd-item-label, #page-discover .lv-dd-item-label, .dr-shell .lv-dd-item-label, .ftp-host .lv-dd-item-label{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(#page-live,#lrBrowse) .lv-dd-item-hint, #page-discover .lv-dd-item-hint, .dr-shell .lv-dd-item-hint, .ftp-host .lv-dd-item-hint,
:is(#page-live,#lrBrowse) .lv-dd-item-n, #page-discover .lv-dd-item-n, .dr-shell .lv-dd-item-n, .ftp-host .lv-dd-item-n{
  flex: none;
  font-size: var(--fx-fs-meta-sm);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
:is(#page-live,#lrBrowse) .lv-dd-check, #page-discover .lv-dd-check, .dr-shell .lv-dd-check, .ftp-host .lv-dd-check{
  flex: none;
}
:is(#page-live,#lrBrowse) .lv-dd-row, #page-discover .lv-dd-row, .dr-shell .lv-dd-row, .ftp-host .lv-dd-row{
  display: flex;
  align-items: center;
  gap: 2px;
}
:is(#page-live,#lrBrowse) .lv-dd-row > .lv-dd-item, #page-discover .lv-dd-row > .lv-dd-item, .dr-shell .lv-dd-row > .lv-dd-item, .ftp-host .lv-dd-row > .lv-dd-item{
  flex: 1 1 auto;
  min-width: 0;
}
:is(#page-live,#lrBrowse) .lv-dd-expand, #page-discover .lv-dd-expand, .dr-shell .lv-dd-expand, .ftp-host .lv-dd-expand{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fx-menu-item-h);
  height: var(--fx-menu-item-h);
  border: 0;
  border-radius: var(--fx-key-radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
:is(#page-live,#lrBrowse) .lv-dd-expand:hover, #page-discover .lv-dd-expand:hover, .dr-shell .lv-dd-expand:hover, .ftp-host .lv-dd-expand:hover,
:is(#page-live,#lrBrowse) .lv-dd-expand:focus-visible, #page-discover .lv-dd-expand:focus-visible, .dr-shell .lv-dd-expand:focus-visible, .ftp-host .lv-dd-expand:focus-visible{
  background: var(--fx-key-a);
  color: var(--text);
  outline: none;
}
:is(#page-live,#lrBrowse) .lv-dd-expand svg, #page-discover .lv-dd-expand svg, .dr-shell .lv-dd-expand svg, .ftp-host .lv-dd-expand svg{
  transition: transform 0.12s ease;
}
:is(#page-live,#lrBrowse) .lv-dd-expand.is-open svg, #page-discover .lv-dd-expand.is-open svg, .dr-shell .lv-dd-expand.is-open svg, .ftp-host .lv-dd-expand.is-open svg{
  transform: rotate(180deg);
}
:is(#page-live,#lrBrowse) .lv-dd-empty, #page-discover .lv-dd-empty, .dr-shell .lv-dd-empty, .ftp-host .lv-dd-empty{
  padding: 8px 10px;
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
}
:is(#page-live,#lrBrowse) .lv-dd-empty--sub, #page-discover .lv-dd-empty--sub, .dr-shell .lv-dd-empty--sub, .ftp-host .lv-dd-empty--sub{
  padding-left: 24px;
}
:is(#page-live,#lrBrowse) .lv-dd-sep, #page-discover .lv-dd-sep, .dr-shell .lv-dd-sep, .ftp-host .lv-dd-sep{
  height: 1px;
  margin: var(--fx-menu-pad) 4px;
  background: var(--fx-edge);
}
:is(#page-live,#lrBrowse) .lv-dd-group-title, #page-discover .lv-dd-group-title, .dr-shell .lv-dd-group-title, .ftp-host .lv-dd-group-title{
  padding: 4px 10px;
  font-size: var(--fx-fs-meta-sm);
  font-weight: var(--fx-fw-ui);
  color: var(--muted);
}
:is(#page-live,#lrBrowse) .lv-dd-switch-row, #page-discover .lv-dd-switch-row, .dr-shell .lv-dd-switch-row, .ftp-host .lv-dd-switch-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 10px;
}
:is(#page-live,#lrBrowse) .lv-dd-switch-label, #page-discover .lv-dd-switch-label, .dr-shell .lv-dd-switch-label, .ftp-host .lv-dd-switch-label{
  font-size: var(--fx-key-fs);
  font-weight: var(--fx-fw-body);
}
/* Following = Autoplay switch tokens. */
:is(#page-live,#lrBrowse) .lv-dd-switch-row .fx-switch, #page-discover .lv-dd-switch-row .fx-switch, .dr-shell .lv-dd-switch-row .fx-switch, .ftp-host .lv-dd-switch-row .fx-switch{
  width: var(--fx-switch-w);
  height: var(--fx-switch-h);
  border-radius: 12px;
}
:is(#page-live,#lrBrowse) .lv-dd-switch-row .fx-switch::after, #page-discover .lv-dd-switch-row .fx-switch::after, .dr-shell .lv-dd-switch-row .fx-switch::after, .ftp-host .lv-dd-switch-row .fx-switch::after{
  top: 3px;
  left: 3px;
  width: var(--fx-switch-knob);
  height: var(--fx-switch-knob);
}
:is(#page-live,#lrBrowse) .lv-dd-switch-row .fx-switch.is-on::after, #page-discover .lv-dd-switch-row .fx-switch.is-on::after, .dr-shell .lv-dd-switch-row .fx-switch.is-on::after, .ftp-host .lv-dd-switch-row .fx-switch.is-on::after{
  left: 23px;
}
:is(#page-live,#lrBrowse) .lv-dd-date, #page-discover .lv-dd-date, .dr-shell .lv-dd-date, .ftp-host .lv-dd-date{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 4px 2px;
}
:is(#page-live,#lrBrowse) .lv-dd-date-title, #page-discover .lv-dd-date-title, .dr-shell .lv-dd-date-title, .ftp-host .lv-dd-date-title{
  font-size: var(--fx-fs-meta-sm);
  font-weight: var(--fx-fw-ui);
  color: var(--muted);
}
:is(#page-live,#lrBrowse) .lv-dd-date-fields, #page-discover .lv-dd-date-fields, .dr-shell .lv-dd-date-fields, .ftp-host .lv-dd-date-fields{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
:is(#page-live,#lrBrowse) .lv-dd-date-f, #page-discover .lv-dd-date-f, .dr-shell .lv-dd-date-f, .ftp-host .lv-dd-date-f{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
:is(#page-live,#lrBrowse) .lv-dd-apply, #page-discover .lv-dd-apply, .dr-shell .lv-dd-apply, .ftp-host .lv-dd-apply{
  align-self: flex-end;
}

/* ── View toggle (grid / list) ───────────────────────────────────── */
:is(#page-live,#lrBrowse) .lv-view-well, #page-discover .lv-view-well, .dr-shell .lv-view-well {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  box-sizing: border-box;
}
:is(#page-live,#lrBrowse) .lv-view-key, #page-discover .lv-view-key, .dr-shell .lv-view-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fx-key-h);
  height: calc(var(--fx-key-h) - 4px);
  padding: 0;
  border: 0;
  border-radius: var(--fx-key-radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
:is(#page-live,#lrBrowse) .lv-view-key.is-down, #page-discover .lv-view-key.is-down, .dr-shell .lv-view-key.is-down {
  color: var(--fx-live);
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(0, 0, 0, 0.28),
    0 1px 0 var(--fx-edge);
}

/* ── Active chips row (below the bar) ────────────────────────────── */
:is(#page-live,#lrBrowse) .lv-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 8px;
}
:is(#page-live,#lrBrowse) .lv-clear-all {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 4px;
  margin: 0;
  height: auto;
  font-family: inherit;
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
:is(#page-live,#lrBrowse) .lv-clear-all:hover {
  color: var(--text);
}
:is(#page-live,#lrBrowse) .lv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
:is(#page-live,#lrBrowse) .lv-chip {
  height: 24px;
  padding: 0 8px;
  font-size: var(--fx-fs-meta-sm);
}

/* ── Main: single scrollable pane ────────────────────────────────── */
:is(#page-live,#lrBrowse) .lv-main {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  container-type: inline-size;
  container-name: lv-main;
}
:is(#page-live,#lrBrowse) .lv-pane {
  display: flex;
  flex-direction: column;
  gap: var(--fx-gap);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--fx-panel-pad);
}

/* ── Items: grid (cards, 260–320px) or list (52px rows) ──────────── */
:is(#page-live,#lrBrowse) .lv-items {
  min-width: 0;
}
:is(#page-live,#lrBrowse) .lv-items[data-view="grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--fx-card-min), var(--fx-card-max)));
  justify-content: start;
  gap: 10px;
  align-content: start;
}
@container lv-main (max-width: 600px) {
  :is(#page-live,#lrBrowse) .lv-items[data-view="grid"] {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--fx-card-min), 100%), 1fr));
  }
}
:is(#page-live,#lrBrowse) .lv-items[data-view="list"] {
  display: flex;
  flex-direction: column;
  gap: var(--fx-row-gap);
}
.lv-card {
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.36),
    0 8px 16px -8px rgba(0, 0, 0, 0.55);
}
.lv-card:focus-visible {
  outline: 2px solid var(--fx-live);
  outline-offset: 2px;
}
.lv-card-cover {
  position: relative;
  flex: none;
  aspect-ratio: var(--fx-lv-cover-ratio);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.lv-card-cover::before,
.lv-card-cover::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.lv-card-cover::before {
  top: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent);
}
.lv-card-cover::after {
  bottom: 0;
  height: 36%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.45), transparent);
}
.lv-card-pills {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.lv-pill-group {
  display: flex;
  gap: 5px;
  min-width: 0;
}
.lv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: var(--fx-lv-pill-fs);
  font-weight: var(--fx-chip-fw);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  background: rgba(8, 5, 18, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.lv-watch-pill {
  margin-left: auto;
  flex: none;
}
.lv-watch-avs {
  display: inline-flex;
  align-items: center;
}
.lv-watch-av {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: -5px;
  border: 1.5px solid rgba(8, 5, 18, 0.9);
  background: linear-gradient(135deg, #E91E8C, #4B26FF);
  box-sizing: border-box;
}
.lv-watch-avs .lv-watch-av:first-child {
  margin-left: 0;
}
.lv-watch-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lv-card-body {
  display: grid;
  grid-template-columns: var(--fx-card-av-sm) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 6px var(--fx-chip-pad-x);
  min-width: 0;
}
.lv-host-av {
  width: var(--fx-card-av-sm);
  height: var(--fx-card-av-sm);
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card2);
  font-size: var(--fx-fs-meta-sm);
  font-weight: var(--fx-fw-ui);
}
.lv-host-av--sm {
  width: var(--fx-lv-up-av);
  height: var(--fx-lv-up-av);
}
.lv-host-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lv-card-mid {
  min-width: 0;
}
.lv-card-title {
  font-size: var(--fx-row-title-fs);
  font-weight: var(--fx-fw-heading);
  line-height: var(--fx-row-title-lh);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
.lv-card-sub {
  margin-top: 2px;
  font-size: var(--fx-row-meta-fs);
  font-weight: var(--fx-fw-body);
  line-height: var(--fx-row-meta-lh);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lv-access-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 var(--fx-chip-pad-x);
  box-sizing: border-box;
  border-radius: 999px;
  font-size: var(--fx-lv-pill-fs);
  font-weight: var(--fx-chip-fw);
  white-space: nowrap;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.lv-access-pill.is-ticket {
  color: var(--t2, #d7c4ff);
  border-color: rgba(123, 47, 255, 0.45);
  background: rgba(123, 47, 255, 0.18);
}
.lv-access-pill.is-tips {
  color: var(--t2, #ffb3d7);
  border-color: rgba(233, 30, 140, 0.45);
  background: rgba(233, 30, 140, 0.16);
}

/* ── Upcoming list ───────────────────────────────────────────────── */
:is(#page-live,#lrBrowse) .lv-group-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin-top: 8px;
}
:is(#page-live,#lrBrowse) .lv-group-head:first-child {
  margin-top: 0;
}
:is(#page-live,#lrBrowse) .lv-group-name {
  font-size: var(--fx-fs-panel);
  font-weight: var(--fx-fw-heading);
  color: var(--text);
}
:is(#page-live,#lrBrowse) .lv-group-meta {
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
}
.lv-up-row {
  display: grid;
  grid-template-columns:
    96px
    minmax(0, 1fr)
    92px
    110px
    110px
    auto
    84px
    108px;
  align-items: center;
  gap: 12px;
  height: var(--fx-lv-up-row-h);
  padding: 0 var(--fx-panel-pad);
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--fx-row-radius);
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.36),
    0 8px 16px -8px rgba(0, 0, 0, 0.55);
}
.lv-up-time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.lv-up-lcd {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--fx-lcd-pad-x);
  box-sizing: border-box;
}
.lv-up-day {
  font-size: var(--fx-fs-meta-sm);
  font-weight: var(--fx-fw-body);
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
}
.lv-up-main {
  display: grid;
  grid-template-columns: var(--fx-lv-up-av) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  text-align: left;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
}
.lv-up-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.lv-up-title {
  display: block;
  font-size: var(--fx-row-title-fs);
  font-weight: var(--fx-fw-heading);
  line-height: var(--fx-row-title-lh);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
.lv-up-host {
  display: block;
  font-size: var(--fx-row-meta-fs);
  font-weight: var(--fx-fw-body);
  line-height: var(--fx-row-meta-lh);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lv-up-type,
.lv-up-genre,
.lv-up-city {
  min-width: 0;
  font-size: var(--fx-row-meta-fs);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lv-up-rel {
  font-size: var(--fx-row-meta-fs);
  font-weight: var(--fx-fw-ui);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lv-remind-btn {
  width: 108px;
  min-width: 108px;
  height: var(--fx-key-h);
  flex: none;
  justify-self: end;
  align-self: center;
  padding: 0 var(--fx-key-pad-x);
  box-sizing: border-box;
  font-size: var(--fx-key-fs);
  font-weight: var(--fx-key-fw);
}

/* ── Live + Past list rows (52px) ────────────────────────────────── */
:is(#page-live,#lrBrowse) .lv-ls-row {
  display: grid;
  grid-template-columns: var(--fx-lv-list-cols);
  align-items: center;
  gap: 12px;
  height: var(--fx-lv-up-row-h);
  padding: 0 var(--fx-panel-pad);
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  border-radius: var(--fx-row-radius);
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.36),
    0 8px 16px -8px rgba(0, 0, 0, 0.55);
}
:is(#page-live,#lrBrowse) .lv-ls-row:focus-visible {
  outline: 2px solid var(--fx-live);
  outline-offset: 2px;
}
:is(#page-live,#lrBrowse) .lv-ls-thumb {
  position: relative;
  width: var(--fx-lv-list-thumb-w);
  height: var(--fx-lv-list-thumb-h);
  aspect-ratio: var(--fx-lv-cover-ratio);
  border-radius: var(--fx-key-radius-sm);
  overflow: hidden;
  background-color: var(--card2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
:is(#page-live,#lrBrowse) .lv-ls-led {
  position: absolute;
  top: 4px;
  left: 4px;
}
:is(#page-live,#lrBrowse) .lv-ls-row > .lv-status-pill {
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(#page-live,#lrBrowse) .lv-ls-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
:is(#page-live,#lrBrowse) .lv-ls-title {
  display: block;
  font-size: var(--fx-row-title-fs);
  font-weight: var(--fx-fw-heading);
  line-height: var(--fx-row-title-lh);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
:is(#page-live,#lrBrowse) .lv-ls-host,
:is(#page-live,#lrBrowse) .lv-ls-type,
:is(#page-live,#lrBrowse) .lv-ls-genre,
:is(#page-live,#lrBrowse) .lv-ls-city,
:is(#page-live,#lrBrowse) .lv-ls-metric,
:is(#page-live,#lrBrowse) .lv-ls-time {
  display: block;
  min-width: 0;
  font-size: var(--fx-row-meta-fs);
  font-weight: var(--fx-fw-body);
  line-height: var(--fx-row-meta-lh);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(#page-live,#lrBrowse) .lv-ls-row > .lv-access-pill {
  justify-self: start;
}
:is(#page-live,#lrBrowse) .lv-ls-time {
  font-weight: var(--fx-fw-ui);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
@container lv-main (max-width: 900px) {
  :is(#page-live,#lrBrowse) .lv-ls-row {
    grid-template-columns: var(--fx-lv-list-cols-md);
  }
  :is(#page-live,#lrBrowse) .lv-ls-genre,
  :is(#page-live,#lrBrowse) .lv-ls-city {
    display: none;
  }
}
@container lv-main (max-width: 640px) {
  :is(#page-live,#lrBrowse) .lv-ls-row {
    grid-template-columns: var(--fx-lv-list-cols-sm);
  }
  :is(#page-live,#lrBrowse) .lv-ls-type,
  :is(#page-live,#lrBrowse) .lv-ls-metric,
  :is(#page-live,#lrBrowse) .lv-ls-time {
    display: none;
  }
}

.lv-pill-rel {
  color: var(--fx-live);
}
.lv-remind-btn--sm {
  width: auto;
  min-width: 0;
  height: 22px;
  justify-self: auto;
  padding: 0 var(--fx-chip-pad-x);
  border-radius: 999px;
  font-size: var(--fx-lv-pill-fs);
}

/* ── Showing footer + infinite-scroll sentinel ───────────────────── */
:is(#page-live,#lrBrowse) .lv-showing {
  flex: none;
  padding: 4px 0 0;
  text-align: left;
  font-size: var(--fx-fs-meta-sm);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
}
:is(#page-live,#lrBrowse) .lv-sentinel {
  flex: none;
  height: 1px;
  width: 100%;
  pointer-events: none;
}

/* ── Empty states ────────────────────────────────────────────────── */
:is(#page-live,#lrBrowse) .lv-empty {
  padding: 18px 6px;
  color: var(--muted);
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
:is(#page-live,#lrBrowse) .lv-empty-title {
  font-size: var(--fx-fs-panel);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
  margin: 0;
}
:is(#page-live,#lrBrowse) .lv-empty-link:not(.fx-key) {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--fx-live);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lv-up-genre,
  .lv-up-city {
    display: none;
  }
  .lv-up-row {
    grid-template-columns:
      96px
      minmax(0, 1fr)
      92px
      auto
      84px
      108px;
  }
}
@media (max-width: 768px) {
  :is(#page-live,#lrBrowse) .lv-title-row {
    flex-wrap: wrap;
  }
  :is(#page-live,#lrBrowse) .lv-title-left {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  :is(#page-live,#lrBrowse) .lv-go-live-slot {
    display: none;
  }
  /* Phone: search on its own row, menus open full-width under the panel. */
  :is(#page-live,#lrBrowse) .lv-fg-search {
    flex-basis: 100%;
    max-width: none;
  }
  :is(#page-live,#lrBrowse) .lv-bar-end, #page-discover .lv-bar-end, .dr-shell .lv-bar-end {
    margin-left: 0;
    flex: 1 1 100%;
    justify-content: space-between;
  }
  :is(#page-live,#lrBrowse) .lv-dd, #page-discover .lv-dd, .dr-shell .lv-dd, .ftp-host .lv-dd{
    position: static;
  }
  :is(#page-live,#lrBrowse) .lv-dd-menu, #page-discover .lv-dd-menu, .dr-shell .lv-dd-menu, .ftp-host .lv-dd-menu,
  :is(#page-live,#lrBrowse) .lv-dd-menu.is-end, #page-discover .lv-dd-menu.is-end, .dr-shell .lv-dd-menu.is-end, .ftp-host .lv-dd-menu.is-end{
    left: var(--fx-panel-pad);
    right: var(--fx-panel-pad);
    width: auto;
    max-width: none;
  }
  :is(#page-live,#lrBrowse) .lv-dd-btn, #page-discover .lv-dd-btn, .dr-shell .lv-dd-btn, .ftp-host .lv-dd-btn{
    max-width: 150px;
  }
  .lv-up-row {
    grid-template-columns: 64px minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    height: auto;
    min-height: var(--fx-lv-up-row-h);
    padding: 8px var(--fx-panel-pad);
    gap: 4px 10px;
  }
  .lv-up-time {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .lv-up-main {
    grid-column: 2 / 5;
    grid-row: 1;
  }
  .lv-up-type {
    display: none;
  }
  .lv-up-rel {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }
  .lv-up-row > .lv-access-pill {
    grid-column: 3;
    grid-row: 2;
  }
  .lv-up-row > .lv-remind-btn {
    grid-column: 4;
    grid-row: 2;
    width: auto;
    min-width: 0;
  }
}

/* Respect the hidden attribute over the display rules above. */
:is(#page-live,#lrBrowse) [hidden] {
  display: none;
}

/* ── Live room page (#page-live-room) ─────────────────────────────── */
#page-live-room #lvRoomShell {
  gap: var(--fx-gap);
}
#page-live-room .lv-room-gate {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-live-room .lv-room-gate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fx-gap);
  padding: var(--fx-contact-pad);
  text-align: center;
  max-width: min(420px, 100%);
}
#page-live-room .lv-room-gate-title {
  margin: 0;
  font-size: var(--fx-fs-panel);
  font-weight: var(--fx-fw-panel);
  color: var(--text);
}
#page-live-room .lv-room-gate-note {
  margin: 0;
  font-size: var(--fx-fs-meta);
  color: var(--muted);
}
#page-live-room .lv-room-main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--fx-lv-room-chat));
  gap: var(--fx-gap);
}
#page-live-room .lv-room-left {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fx-gap);
  overflow: hidden;
}
#page-live-room .lv-room-head {
  flex: none;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--fx-gap);
  padding: var(--fx-panel-pad-y-sm) var(--fx-panel-pad);
  max-height: var(--fx-lv-room-head);
  min-height: 0;
  overflow: hidden;
}
#page-live-room .lv-room-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--fx-gap);
  padding-right: 2px;
}
#page-live-room .lv-room-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
#page-live-room .lv-room-host-av {
  width: var(--fx-lv-room-host-av);
  height: var(--fx-lv-room-host-av);
  border-radius: 50%;
  flex: none;
  overflow: hidden;
  background: var(--fx-well-a);
  border: 1px solid var(--fx-edge);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-heading);
  color: var(--muted);
}
#page-live-room .lv-room-host-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#page-live-room .lv-room-head-titles {
  min-width: 0;
  flex: 1 1 auto;
}
#page-live-room .lv-room-title {
  font-size: var(--fx-fs-title);
  font-weight: var(--fx-fw-title);
  letter-spacing: var(--fx-track-title);
  line-height: var(--fx-lh-title);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
}
#page-live-room .lv-room-head-meta {
  font-size: var(--fx-fs-meta);
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#page-live-room .lv-room-head-mid {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
#page-live-room .lv-room-watch-well {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--fx-chip-h);
  padding: 0 var(--fx-chip-pad-x);
}
#page-live-room .lv-room-live-for {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#page-live-room .lv-room-live-clock {
  height: var(--fx-lcd-h);
  padding: 0 var(--fx-lcd-pad-x);
}
#page-live-room .lv-room-head-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-left: auto;
}
#page-live-room .lv-room-watch-avs {
  display: inline-flex;
  align-items: center;
}
#page-live-room .lv-room-watch-avs img,
#page-live-room .lv-room-watch-avs span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-left: -6px;
  border: 1px solid var(--fx-seat);
  object-fit: cover;
  background: var(--fx-well-b);
  font-size: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
#page-live-room .lv-room-watch-avs img:first-child,
#page-live-room .lv-room-watch-avs span:first-child {
  margin-left: 0;
}
#page-live-room .lv-room-watch-count {
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-heading);
  color: var(--text);
  min-width: 1ch;
}
#page-live-room .lv-room-video {
  flex: none;
  min-height: 0;
  padding: var(--fx-panel-pad);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#page-live-room .lv-room-video-frame {
  width: min(
    100%,
    calc(
      (
        100dvh - var(--cs-chrome-top, 60px) - var(--fx-lv-room-head) -
          var(--fx-chrome-pad) * 2 - var(--fx-gap) * 3 - 160px
      ) * 16 / 9
    )
  );
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fx-seat);
  border-radius: calc(var(--fx-panel-radius) - 4px);
  overflow: hidden;
}
#page-live-room .lv-room-video-stage {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--fx-seat);
  overflow: hidden;
}
#page-live-room .lv-room-status-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--fx-key-radius-sm);
  background: var(--fx-glass-a);
  backdrop-filter: blur(12px);
  border: 1px solid var(--fx-edge);
  font-size: var(--fx-fs-meta-sm);
  font-weight: var(--fx-fw-ui);
  color: var(--text);
  letter-spacing: 0.04em;
}
#page-live-room .lv-room-recorded {
  margin: 0;
  align-self: stretch;
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
}
#page-live-room .lv-room-video-embed {
  position: absolute;
  inset: 0;
}
#page-live-room .lv-room-video-embed iframe,
#page-live-room .lv-room-video-embed .cv-stream-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
#page-live-room .lv-room-video-stage.is-blur .lv-room-video-embed {
  filter: blur(10px);
  transform: scale(1.04);
}
#page-live-room .lv-room-platform-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: var(--fx-key-radius-sm);
  background: var(--fx-glass-a);
  backdrop-filter: blur(12px);
  border: 1px solid var(--fx-edge);
  font-size: var(--fx-fs-meta-sm);
  font-weight: var(--fx-fw-ui);
  color: var(--text);
}
#page-live-room .lv-room-preview-bar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--fx-key-radius);
  background: var(--fx-glass-a);
  backdrop-filter: blur(14px);
  border: 1px solid var(--fx-edge);
}
#page-live-room .lv-room-preview-clock {
  display: inline-flex;
  align-items: center;
  height: var(--fx-seg-sm-h);
  min-height: var(--fx-seg-sm-h);
  padding: 0 6px;
}
#page-live-room .lv-room-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fx-gap);
  background: color-mix(in srgb, var(--fx-seat) 55%, transparent);
}
#page-live-room .lv-room-overlay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  max-width: min(420px, 100%);
  padding: 18px 20px;
  border-radius: var(--fx-panel-radius);
  background: var(--fx-glass-a);
  backdrop-filter: blur(var(--fx-blur));
  border: 1px solid var(--fx-edge);
  box-shadow: 0 12px 28px -16px var(--fx-drop);
}
#page-live-room .lv-room-overlay-title {
  margin: 0;
  font-size: var(--fx-fs-panel);
  font-weight: var(--fx-fw-panel);
  color: var(--text);
}
#page-live-room .lv-room-overlay-meta {
  margin: 0;
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
  line-height: 1.4;
}
#page-live-room .lv-room-join-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#page-live-room .lv-room-join-clock {
  display: inline-flex;
  align-items: center;
  height: var(--fx-seg-sm-h);
}
#page-live-room .lv-room-overlay-cd {
  height: clamp(40px, 8vh, 56px);
}
#page-live-room .lv-room-upnext {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px;
  border-radius: var(--fx-row-radius);
  background: var(--fx-well-a);
  border: 1px solid var(--fx-edge);
}
#page-live-room .lv-room-upnext-cover {
  width: var(--fx-lv-upnext-cover-w);
  height: var(--fx-lv-upnext-cover-h);
  aspect-ratio: var(--fx-lv-cover-ratio);
  border-radius: var(--fx-key-radius-sm);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex: none;
}
#page-live-room .lv-room-react-layer {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 72px;
  height: 55%;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
#page-live-room .lv-room-react-fly {
  position: absolute;
  right: 8px;
  bottom: 0;
  color: var(--fx-live-hi);
  opacity: 0;
  animation: lv-react-fly 3s ease-out forwards;
}
@keyframes lv-react-fly {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(-180px) scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #page-live-room .lv-room-react-fly {
    animation: none;
    opacity: 1;
  }
}
#page-live-room .lv-room-info-row {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fx-gap);
  min-height: 0;
}
#page-live-room .lv-room-info-panel {
  min-height: 0;
  overflow: auto;
  padding: var(--fx-panel-pad);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#page-live-room .lv-room-onstage-list {
  display: flex;
  flex-direction: column;
  gap: var(--fx-row-gap);
}
#page-live-room .lv-room-onstage-row {
  display: grid;
  grid-template-columns: auto 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: var(--fx-row-h);
  padding: 0 var(--fx-row-pad-x);
  border-radius: var(--fx-row-radius);
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  border: 1px solid var(--fx-edge);
}
#page-live-room .lv-room-onstage-time {
  font-size: var(--fx-fs-meta-sm);
  font-variant-numeric: tabular-nums;
  color: var(--fx-live);
  text-shadow: 0 0 6px var(--fx-live-glow);
  min-width: 3.2em;
}
#page-live-room .lv-room-onstage-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--fx-well-a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--fx-fw-heading);
  color: var(--muted);
}
#page-live-room .lv-room-onstage-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#page-live-room .lv-room-onstage-name {
  font-size: var(--fx-row-title-fs);
  font-weight: var(--fx-row-title-fw);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#page-live-room .lv-room-onstage-role {
  font-size: var(--fx-fs-meta-sm);
  color: var(--muted);
}
#page-live-room .lv-room-about-body,
#page-live-room .lv-room-host-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--fx-fs-meta);
  color: var(--muted);
  line-height: 1.45;
}
#page-live-room .lv-room-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#page-live-room .lv-room-host-card {
  display: flex;
  align-items: center;
  gap: 10px;
}
#page-live-room .lv-room-host-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#page-live-room .lv-room-chat-col {
  min-width: 0;
  min-height: 0;
  max-width: var(--fx-lv-room-chat);
  display: flex;
}
#page-live-room .lv-room-chat {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--fx-panel-pad);
  gap: 8px;
  width: 100%;
}
#page-live-room .lv-room-chat .fx-chat-list-wrap {
  flex: 1 1 auto;
  min-height: 0;
}
#page-live-room .lv-room-slow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--fx-chip-h);
  padding: 0 var(--fx-chip-pad-x);
  align-self: flex-start;
}
#page-live-room .lv-room-react-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
#page-live-room .lv-room-react-btn {
  width: var(--fx-rkey-size);
  height: var(--fx-rkey-size);
  border-radius: 50%;
  border: 1px solid var(--fx-edge);
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
#page-live-room .lv-room-react-btn:active {
  background: linear-gradient(180deg, var(--fx-key-b), var(--fx-key-a));
}
#page-live-room .lv-room-chat-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--fx-field-h);
  font-size: var(--fx-fs-meta);
  color: var(--muted);
  border-radius: var(--fx-field-radius);
  background: var(--fx-well-a);
  border: 1px solid var(--fx-edge);
  cursor: pointer;
}
#page-live-room .lv-room-mob-tabs {
  display: none;
}
#page-live-room .lv-title-row { display: none; }

@media (max-width: 768px) {
  #page-live-room .lv-room-main {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  #page-live-room .lv-room-left {
    grid-template-rows: auto minmax(180px, 36vh) auto;
  }
  #page-live-room .lv-room-info-row {
    max-height: none;
    grid-template-columns: 1fr;
  }
  #page-live-room .lv-room-chat-col {
    max-width: none;
    min-height: 240px;
  }
  #page-live-room .lv-room-head {
    flex-wrap: wrap;
    max-height: none;
  }
  #page-live-room .lv-room-head-mid,
  #page-live-room .lv-room-head-right {
    margin-left: 0;
  }
  #page-live-room .lv-room-mob-tabs {
    display: flex;
    gap: 6px;
    flex: none;
  }
  #page-live-room.is-mob-chat .lv-room-info-row { display: none; }
  #page-live-room.is-mob-info .lv-room-chat-col { display: none; }
  #page-live-room.is-mob-info .lv-room-left {
    grid-template-rows: auto minmax(160px, 30vh) minmax(0, 1fr);
  }
  #page-live-room .lv-room-react-row {
    order: 3;
  }
  #page-live-room .lv-room-chat .fx-chat-compose,
  #page-live-room .lv-room-chat-gate {
    order: 4;
  }
}

@media (max-width: 768px) {
  #page-live-room #lvRoomShell {
    padding: 14px;
  }
  #page-live-room .lv-title-row {
    padding-left: 0;
    max-height: none;
    flex-wrap: wrap;
  }
}

/* ── Go live / Edit room (#page-live-new) ─────────────────────────── */
#page-live-new .lvn-shell {
  min-height: 0;
}
#page-live-new .lvn-denied {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fx-gap);
  max-width: var(--fx-lvn-preview-max);
  padding: var(--fx-panel-pad);
}
#page-live-new .lvn-denied[hidden],
#page-live-new .lvn-form-wrap[hidden] {
  display: none !important;
}
#page-live-new .lvn-denied-msg {
  margin: 0;
  font-size: var(--fx-fs-panel);
  font-weight: var(--fx-fw-body);
  color: var(--text);
  line-height: 1.45;
}
#page-live-new .lvn-form-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--fx-gap);
  flex: 1;
  min-height: 0;
  min-width: 0;
}
#page-live-new .lvn-title-row {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fx-gap);
  min-width: 0;
}
#page-live-new .lvn-title-row .lv-title-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
#page-live-new .lvn-title-row .lv-page-title {
  margin: 0;
  font-size: var(--fx-fs-title);
  font-weight: var(--fx-fw-title);
  letter-spacing: var(--fx-track-title);
  line-height: var(--fx-lh-title);
  color: var(--text);
  flex: none;
}
#page-live-new .lvn-hosting {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
#page-live-new .lvn-title-row .lv-title-right {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
#page-live-new .lvn-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, var(--fx-lvn-preview-max));
  gap: var(--fx-gap);
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
#page-live-new .lvn-col {
  min-height: 0;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--fx-gap);
  padding: var(--fx-panel-pad);
  box-sizing: border-box;
}
#page-live-new .lvn-col--right {
  max-width: var(--fx-lvn-preview-max);
}
#page-live-new .lvn-sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
#page-live-new .lvn-sec-title {
  margin: 0;
  font-size: var(--fx-fs-panel);
  font-weight: var(--fx-fw-panel);
  color: var(--text);
}
#page-live-new .lvn-sec-title.lvn-sec-title--spaced {
  margin-top: var(--fx-gap);
}
#page-live-new .lvn-type-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
#page-live-new .lvn-type-key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  height: var(--fx-lvn-type-h);
  min-height: var(--fx-lvn-type-h);
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  box-sizing: border-box;
}
#page-live-new .lvn-type-name {
  font-size: var(--fx-key-fs);
  font-weight: var(--fx-fw-ui);
  color: var(--text);
}
#page-live-new .lvn-type-key.is-down .lvn-type-name,
#page-live-new .lvn-choice.is-down .lvn-choice-name {
  color: var(--fx-live);
}
#page-live-new .lvn-type-key:disabled .lvn-type-name,
#page-live-new .lvn-type-key:disabled .lvn-type-blurb {
  color: var(--muted);
}
#page-live-new .lvn-type-blurb,
#page-live-new .lvn-type-detail,
#page-live-new .lvn-fine,
#page-live-new .lvn-choice-detail {
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
  line-height: 1.35;
}
#page-live-new .lvn-type-detail,
#page-live-new .lvn-fine {
  margin: 0;
}
#page-live-new .lvn-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#page-live-new .lvn-textarea {
  min-height: 72px;
  resize: vertical;
}
#page-live-new .lvn-stream-hint {
  font-size: var(--fx-fs-meta);
  color: var(--muted);
}
#page-live-new .lvn-stream-hint.is-ok {
  color: var(--fx-live);
}
#page-live-new .lvn-stream-hint.is-err {
  color: var(--fx-red);
}
#page-live-new .lvn-dd {
  position: relative;
  width: 100%;
}
#page-live-new .lvn-dd .lv-dd-btn {
  width: 100%;
  justify-content: space-between;
  height: var(--fx-key-h);
  padding: 0 var(--fx-key-pad-x);
  box-sizing: border-box;
  gap: 6px;
  font-size: var(--fx-key-fs);
  font-weight: var(--fx-key-fw);
  white-space: nowrap;
}
#page-live-new .lvn-dd .lv-dd-btn.has-value {
  color: var(--fx-live);
}
#page-live-new .lvn-dd .lv-dd-btn.is-open {
  transform: translateY(1px);
  background: linear-gradient(180deg, var(--fx-key-b), var(--fx-key-a));
}
#page-live-new .lvn-dd .lv-dd-chev {
  flex: none;
  transition: transform 0.12s ease;
}
#page-live-new .lvn-dd .lv-dd-btn.is-open .lv-dd-chev {
  transform: rotate(180deg);
}
#page-live-new .fx-field {
  height: var(--fx-field-h);
  padding: 0 var(--fx-field-pad-x);
  font-size: var(--fx-field-fs);
  box-sizing: border-box;
}
#page-live-new textarea.fx-field,
#page-live-new .lvn-textarea {
  height: auto;
  min-height: 72px;
  padding: 8px var(--fx-field-pad-x);
  line-height: 1.35;
}
#page-live-new select.fx-field {
  height: var(--fx-field-h);
}
#page-live-new .lvn-submit {
  height: var(--fx-key-h);
  min-width: 96px;
  padding: 0 14px;
  font-size: var(--fx-key-fs);
  font-weight: var(--fx-key-fw);
  box-sizing: border-box;
  text-decoration: none;
}
#page-live-new .lvn-choice-row .fx-key {
  height: var(--fx-key-h);
  min-width: var(--fx-key-min-w);
  padding: 0 var(--fx-key-pad-x);
  font-size: var(--fx-key-fs);
  box-sizing: border-box;
}
#page-live-new .lvn-draft-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  height: var(--fx-field-h);
  padding: 0 8px 0 4px;
  box-sizing: border-box;
  border-radius: var(--fx-field-radius);
  background: linear-gradient(180deg, var(--fx-well-a), var(--fx-well-b));
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.12);
}
#page-live-new .lvn-line-x {
  min-width: var(--fx-key-h);
  width: var(--fx-key-h);
  padding: 0;
}
#page-live-new .lvn-dd .lv-dd-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: var(--fx-menu-z);
  max-height: var(--fx-menu-max-h);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--fx-menu-bg);
  backdrop-filter: blur(var(--fx-menu-blur));
  border: 1px solid var(--fx-edge);
  border-radius: var(--fx-menu-radius);
  padding: var(--fx-menu-pad);
  box-shadow: 0 16px 36px -16px var(--fx-drop);
}
#page-live-new .lvn-dd .lv-dd-menu.is-up {
  top: auto;
  bottom: calc(100% + 4px);
}
#page-live-new .lvn-dd:has(.lv-dd-btn.is-open) {
  position: relative;
  z-index: calc(var(--fx-menu-z) + 1);
}
#page-live-new .lvn-dd .lv-dd-menu > .lv-dd-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
#page-live-new .lvn-dd .lv-dd-input {
  width: 100%;
  height: var(--fx-field-h);
  padding: 0 var(--fx-field-pad-x);
  box-sizing: border-box;
  color: var(--text);
  font: inherit;
  font-size: var(--fx-field-fs);
}
#page-live-new .lvn-dd .lv-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--fx-menu-item-h);
  padding: 0 10px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--fx-key-radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fx-key-fs);
  text-align: left;
  cursor: pointer;
}
#page-live-new .lvn-dd .lv-dd-item:hover,
#page-live-new .lvn-dd .lv-dd-item:focus-visible {
  background: var(--fx-key-a);
  outline: none;
}
#page-live-new .lvn-dd .lv-dd-item.is-sel {
  background: color-mix(in srgb, var(--fx-live) 18%, transparent);
}
#page-live-new .lvn-dd .lv-dd-item--sub {
  padding-left: 22px;
}
#page-live-new .lvn-dd .lv-dd-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
#page-live-new .lvn-dd .lv-dd-row > .lv-dd-item {
  flex: 1;
  min-width: 0;
}
#page-live-new .lvn-dd .lv-dd-expand {
  flex: none;
  width: 28px;
  height: var(--fx-menu-item-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--fx-key-radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
#page-live-new .lvn-dd .lv-dd-expand.is-open svg {
  transform: rotate(180deg);
}
#page-live-new .lvn-dd .lv-dd-empty {
  padding: 8px 10px;
  font-size: var(--fx-fs-meta);
  color: var(--muted);
}
#page-live-new .lvn-dd .lv-dd-empty--sub {
  padding-left: 22px;
}
#page-live-new .lvn-choice-col,
#page-live-new .lvn-choice-row {
  display: flex;
  gap: 8px;
  min-width: 0;
}
#page-live-new .lvn-choice-col {
  flex-direction: column;
}
#page-live-new .lvn-choice-row {
  flex-wrap: wrap;
}
#page-live-new .lvn-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  height: auto;
  min-height: var(--fx-key-h);
  padding: 8px 12px;
}
#page-live-new .lvn-choice-name {
  font-size: var(--fx-key-fs);
  font-weight: var(--fx-fw-ui);
  color: var(--text);
}
#page-live-new .lvn-cover-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 320px;
  width: 100%;
}
#page-live-new .lvn-cover {
  position: relative;
  width: 100%;
  aspect-ratio: var(--fx-lv-cover-ratio);
  border-radius: var(--fx-field-radius);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  background-color: var(--fx-well-a);
  background-image: linear-gradient(180deg, var(--fx-well-a), var(--fx-well-b));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.12);
}
#page-live-new .lvn-cover.has-cover {
  cursor: default;
  padding: 0;
}
/* Visually hidden — never [hidden] / display:none (browsers block .click() then). */
#page-live-new .lvn-cover-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  border: 0;
  z-index: 2;
}
#page-live-new .lvn-cover-input--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  pointer-events: none;
}
#page-live-new .lvn-cover.is-busy .lvn-cover-input {
  pointer-events: none;
}
#page-live-new .lvn-cover-hint {
  position: relative;
  z-index: 1;
  font-size: var(--fx-fs-meta);
  color: var(--muted);
  line-height: 1.35;
  pointer-events: none;
}
#page-live-new .lvn-cover.is-busy {
  opacity: 0.7;
  cursor: wait;
}
#page-live-new .lvn-cover.is-busy .lvn-cover-hint {
  opacity: 1;
  color: var(--text);
}
#page-live-new .lvn-cover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#page-live-new .lvn-cover-info {
  margin: 0;
  font-size: var(--fx-fs-meta);
  color: var(--muted);
  line-height: 1.4;
}
#page-live-new .lvn-cover-info--warn {
  color: var(--fx-warn);
}
#page-live-new .lvn-crop-modal {
  position: fixed;
  inset: 0;
  z-index: var(--fx-lvn-crop-z);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fx-chrome-pad);
  box-sizing: border-box;
}
#page-live-new .lvn-crop-modal[hidden] {
  display: none !important;
}
#page-live-new .lvn-crop-backdrop {
  position: absolute;
  inset: 0;
  background: var(--fx-lvn-crop-overlay);
  -webkit-backdrop-filter: blur(var(--fx-blur));
  backdrop-filter: blur(var(--fx-blur));
}
#page-live-new .lvn-crop-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, calc(var(--fx-lvn-crop-frame-max) + 48px));
  max-height: min(92dvh, 720px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--fx-panel-pad);
}
#page-live-new .lvn-crop-frame {
  position: relative;
  width: 100%;
  max-width: var(--fx-lvn-crop-frame-max);
  aspect-ratio: var(--fx-lv-cover-ratio);
  margin: 0 auto;
  border-radius: var(--fx-field-radius);
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background: var(--fx-seat);
  box-shadow:
    inset 0 0 0 1px var(--fx-edge),
    0 8px 24px -12px var(--fx-drop);
}
#page-live-new .lvn-crop-frame.is-drag {
  cursor: grabbing;
}
#page-live-new .lvn-crop-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#page-live-new .lvn-crop-zoom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--fx-lvn-crop-frame-max);
  width: 100%;
  margin: 0 auto;
}
#page-live-new .lvn-crop-zoom-row input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--fx-live);
}
#page-live-new .lvn-crop-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: var(--fx-lvn-crop-frame-max);
  width: 100%;
  margin: 0 auto;
  font-size: var(--fx-fs-meta);
  color: var(--muted);
  line-height: 1.4;
}
#page-live-new .lvn-crop-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
#page-live-new .lvn-profile-hit.is-sel {
  background: color-mix(in srgb, var(--fx-live) 18%, transparent);
  color: var(--fx-live);
}
#page-live-new .lvn-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
#page-live-new .lvn-price-lcd {
  min-width: 64px;
  justify-content: center;
}
#page-live-new .lvn-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#page-live-new .lvn-switch-label {
  font-size: var(--fx-fs-meta);
  color: var(--text);
}
#page-live-new .lvn-when-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#page-live-new .lvn-lineup {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#page-live-new .lvn-line-row,
#page-live-new .lvn-add-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
#page-live-new .lvn-line-time {
  width: 110px;
  flex: none;
}
#page-live-new .lvn-line-av {
  width: var(--fx-card-av-sm);
  height: var(--fx-card-av-sm);
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fx-well-a);
  color: var(--muted);
  font-size: var(--fx-fs-meta-sm);
}
#page-live-new .lvn-line-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#page-live-new .lvn-line-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
#page-live-new .lvn-line-name {
  font-size: var(--fx-row-title-fs);
  font-weight: var(--fx-fw-heading);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#page-live-new .lvn-profile-hits {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#page-live-new .lvn-profile-hit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border-radius: var(--fx-key-radius-sm);
  border: 1px solid var(--fx-edge);
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  color: var(--text);
  font-family: 'Epilogue', sans-serif;
  font-size: var(--fx-key-fs);
  cursor: pointer;
}
#page-live-new .lvn-preview-card {
  pointer-events: none;
  max-width: 100%;
  width: min(100%, var(--fx-card-max));
}
#page-live-new .lvn-preview-cover {
  background-image: var(--fx-grad);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#page-live-new .lvn-next {
  margin: 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fx-fs-meta);
  color: var(--muted);
  line-height: 1.4;
}
#page-live-new .lvn-next li {
  padding-left: 2px;
}
#page-live-new .lvn-mobile-submit {
  display: none;
  flex: none;
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  background: linear-gradient(180deg, transparent, var(--fx-glass-b) 28%);
}
#page-live-new .lvn-mobile-submit .lvn-submit {
  width: 100%;
}

@media (max-width: 1100px) {
  #page-live-new .lvn-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #page-live-new .lvn-col--right {
    grid-column: 1 / -1;
    max-width: none;
  }
}

@media (max-width: 768px) {
  #page-live-new #lvnShell {
    padding: 14px;
  }
  #page-live-new .lvn-title-row .lv-title-right {
    display: none;
  }
  #page-live-new .lvn-cols {
    grid-template-columns: 1fr;
    overflow: auto;
  }
  #page-live-new .lvn-col {
    overflow: visible;
  }
  #page-live-new .lvn-col--right {
    max-width: none;
  }
  #page-live-new .lvn-mobile-submit {
    display: block;
  }
  #page-live-new .lvn-when-fields {
    grid-template-columns: 1fr;
  }
}

/* ── Now Live dashboard (#page-now) ─────────────────────────────── */
/* Immersive shell: #ndShell uses .fx-app-shell (do not zero padding). */
#page-now .nd-title-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--fx-gap);
  flex: none;
  min-width: 0;
  min-height: var(--fx-key-h);
  box-sizing: border-box;
}
#page-now .nd-page-title {
  margin: 0;
  font-size: var(--fx-fs-title);
  font-weight: var(--fx-fw-title);
  letter-spacing: var(--fx-track-title);
  line-height: var(--fx-lh-title);
  color: var(--text);
  flex: none;
}
#page-now .nd-stat-wells {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  padding: 0;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 10px;
}
#page-now .nd-stat-well {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
  white-space: nowrap;
  flex: none;
}
#page-now .nd-stat-lcd {
  display: inline-flex;
  align-items: center;
}
#page-now .nd-go-live-slot {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: stretch;
  align-self: stretch;
}
#page-now .nd-go-live-slot .fx-key.fx-primary {
  min-width: var(--fx-key-min-w);
  height: auto;
  align-self: stretch;
  box-sizing: border-box;
}
#page-now .nd-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--fx-gap);
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
#page-now .nd-col {
  display: flex;
  flex-direction: column;
  gap: var(--fx-gap);
  min-height: 0;
  overflow: hidden;
}
#page-now .nd-col--main,
#page-now .nd-col--side {
  min-width: 0;
  overflow: hidden;
}
#page-now .nd-section {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: var(--fx-panel-pad-y-sm) var(--fx-panel-pad);
  box-sizing: border-box;
}
#page-now .nd-section--live {
  flex: none;
  max-height: 300px;
  overflow: hidden;
}
#page-now .nd-section--live .nd-live-cards {
  max-height: min(240px, 42vh);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
#page-now .nd-live-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
}
#page-now .nd-live-empty .nd-empty {
  margin: 0;
}
#page-now .nd-live-upcoming-btn {
  text-decoration: none;
}
#page-now .nd-mid-slot {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  container-type: size;
  container-name: nd-mid;
}
#page-now .nd-section--soon {
  flex: none;
  max-height: 230px;
  overflow: hidden;
}
#page-now .nd-section--soon .nd-scroll {
  flex: none;
  max-height: min(180px, 28vh);
  overflow-y: auto;
}
#page-now .nd-section--activity {
  flex: 1 1 auto;
  min-height: 120px;
}
#page-now .nd-section--foryou {
  flex: 0 0 auto;
  max-height: 38%;
}
#page-now .nd-section-head {
  margin-bottom: 8px;
  max-height: none;
  align-items: center;
}
#page-now .nd-section-head .fx-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
#page-now .nd-section-head .fx-panel-title .fx-panel-meta {
  font-weight: var(--fx-fw-body);
}
#page-now .nd-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
#page-now .nd-live-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
#page-now .nd-live-cards .lv-card {
  min-width: 0;
}
#page-now .nd-mid-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--fx-gap);
  min-height: 0;
  flex: 0 1 auto;
  max-height: 100%;
  width: 100%;
  align-items: start;
  align-content: start;
  overflow: hidden;
}
#page-now .nd-section--jb,
#page-now .nd-section--collab {
  min-height: 0;
  max-height: 100cqh;
  overflow: hidden;
  align-self: start;
  width: 100%;
  box-sizing: border-box;
}
#page-now .nd-section--jb .nd-scroll,
#page-now .nd-section--collab .nd-scroll {
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(100cqh, 50vh);
  overflow-y: auto;
}
#page-now .nd-empty {
  margin: 8px 0 0;
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
}
#page-now .nd-jb-row,
#page-now .nd-collab-row {
  display: grid;
  width: 100%;
  text-align: left;
  margin: 0 0 var(--fx-row-gap);
  align-items: center;
  gap: 10px;
  padding: 0 var(--fx-row-pad-x);
  box-sizing: border-box;
  cursor: pointer;
}
#page-now .nd-jb-row .fx-key.fx-key--sm,
#page-now .nd-collab-row .fx-key.fx-key--sm,
#page-now .lv-up-row .lv-remind-btn.fx-key--sm {
  flex: none;
  justify-self: end;
}
#page-now .nd-jb-row {
  grid-template-columns: minmax(0, 1.4fr) auto auto auto auto;
  min-height: var(--fx-row-h);
}
#page-now .nd-collab-row {
  grid-template-columns: 30px minmax(0, 1fr) auto auto auto;
  min-height: var(--fx-row-h);
}
#page-now .nd-jb-row-main,
#page-now .nd-collab-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
#page-now .nd-jb-genre,
#page-now .nd-collab-title,
#page-now .nd-for-title {
  font-size: var(--fx-row-title-fs);
  font-weight: var(--fx-fw-heading);
  line-height: var(--fx-row-title-lh);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#page-now .nd-jb-subs {
  display: block;
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#page-now .nd-jb-sub + .nd-jb-sub::before {
  content: ' · ';
}
#page-now .nd-jb-meta,
#page-now .nd-collab-inroom {
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--muted);
  white-space: nowrap;
}
#page-now .nd-jb-enter.is-voted,
#page-now .nd-jb-row .fx-key.is-down {
  color: var(--fx-live);
}
#page-now .nd-jb-ext {
  font-size: var(--fx-fs-meta-sm);
  color: var(--fx-warn);
}
#page-now .nd-collab-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--fx-grad);
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--t1, #fff);
  flex: none;
}
#page-now .nd-collab-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#page-now .nd-act-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: default;
}
#page-now .nd-act-row[data-nd-act-room] {
  cursor: pointer;
}
#page-now .nd-act-text {
  flex: 1;
  min-width: 0;
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-body);
  color: var(--text);
}
#page-now .nd-act-time {
  flex: none;
  font-size: var(--fx-fs-meta-sm);
  color: var(--muted);
}
#page-now .nd-for-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--fx-edge);
}
#page-now .nd-for-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#page-now .nd-soon-list {
  display: flex;
  flex-direction: column;
  gap: var(--fx-row-gap);
}
@media (min-width: 1100px) {
  #page-now .nd-col--main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  #page-now .nd-section--activity .nd-scroll {
    flex: 1 1 auto;
    min-height: 0;
  }
  #page-now .nd-section--foryou {
    flex: none;
    max-height: none;
  }
  #page-now .nd-section--foryou .nd-scroll {
    flex: none;
    overflow: visible;
  }
}
@media (max-width: 1100px) {
  #page-now .nd-live-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #page-now .nd-section--live,
  #page-now .nd-section--soon {
    max-height: none;
  }
  #page-now .nd-section--live .nd-live-cards,
  #page-now .nd-section--soon .nd-scroll,
  #page-now .nd-section--jb .nd-scroll,
  #page-now .nd-section--collab .nd-scroll {
    max-height: none;
  }
}
@media (max-width: 768px) {
  #page-now #ndShell {
    overflow: auto;
  }
  #page-now .nd-main {
    grid-template-columns: 1fr;
    overflow: visible;
  }
  #page-now .nd-col--main,
  #page-now .nd-col--side {
    overflow: visible;
  }
  #page-now .nd-mid-panels {
    grid-template-columns: 1fr;
  }
  #page-now .nd-live-cards {
    display: flex;
    overflow-x: auto;
    grid-template-columns: none;
  }
  #page-now .nd-live-cards .lv-card {
    flex: 0 0 min(220px, 72vw);
  }
  #page-now .nd-section--activity,
  #page-now .nd-section--foryou {
    max-height: none;
    flex: none;
  }
  #page-now .nd-go-live-slot {
    display: none;
  }
}

/* Hide Now Live dashboard while any room/layer is open so fadeIn on the
   layer cannot reveal #page-now underneath. Layers are siblings of
   #page-now (not children); visibility:visible keeps them safe if nested. */
html:has(.now-sub.open, .lr-player-page.open) #page-now {
  visibility: hidden;
}
.now-sub.open,
.lr-player-page.open {
  visibility: visible;
}

/* Nested layers: hide the level underneath while a deeper overlay fades in.
   Specificity uses IDs so these beat class-only visibility:visible above. */
html:has(#now-sub-lrstream.open) #now-sub-lrevents,
html:has(#now-sub-lrstream.open) #now-sub-lrclubs {
  visibility: hidden;
}
#now-sub-lrstream.open {
  visibility: visible;
}

html:has(#now-sub-dropstage.open) #now-sub-droproom {
  visibility: hidden;
}
#now-sub-dropstage.open {
  visibility: visible;
}

#now-sub-jukebox:has(#jbRoom.open) #jbDash,
#now-sub-jukebox:has(#jbResults.open) #jbDash {
  visibility: hidden;
}
#now-sub-jukebox #jbRoom.open,
#now-sub-jukebox #jbResults.open {
  visibility: visible;
}

/* Collab: browse list under in-page room view on #page-liveroom */
#page-liveroom:has(#lrRoom.open) #lrBrowse {
  visibility: hidden;
}
#page-liveroom #lrRoom.open {
  visibility: visible;
}

/* ================================================================
   CONTACT PAGE — form ↔ success swap inside one card (no page jump)
   ================================================================ */
.fm-contact-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--fx-panel-radius);
  padding: var(--fx-contact-pad);
  box-shadow: var(--card-shadow);
  box-sizing: border-box;
}

.fm-contact-role-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.fm-contact-hint {
  margin-bottom: 22px;
  padding: 12px 16px;
  background: rgba(200, 169, 126, 0.06);
  border: 1px solid rgba(200, 169, 126, 0.18);
  border-radius: var(--fx-key-radius-sm);
  font-size: var(--fx-fs-meta);
  color: var(--muted);
  line-height: 1.6;
}

.fm-contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fx-gap);
  margin-bottom: var(--fx-gap);
}

.fm-contact-extra,
.fm-contact-message-wrap {
  margin-bottom: var(--fx-gap);
}

.fm-contact-message-wrap {
  margin-bottom: 22px;
}

.fm-contact-label {
  display: block;
  font-size: 0.68rem;
  font-weight: var(--fx-fw-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.fm-contact-input {
  width: 100%;
  height: var(--fx-field-h);
  padding: 0 var(--fx-field-pad-x);
  background: var(--fx-well-a);
  border: 1px solid var(--fx-edge);
  color: var(--text);
  border-radius: var(--fx-field-radius);
  font-size: var(--fx-field-fs);
  font-family: 'Epilogue', sans-serif;
  outline: none;
  box-sizing: border-box;
}

.fm-contact-textarea {
  height: auto;
  min-height: 120px;
  padding: 11px var(--fx-field-pad-x);
  resize: vertical;
}

.fm-contact-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: var(--fx-fs-meta);
  font-weight: 600;
  color: var(--fx-red);
  line-height: 1.4;
}


.fm-contact-success {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--fx-gap);
  padding: var(--fx-gap) 0;
  box-sizing: border-box;
}


.fm-contact-success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fx-contact-mark);
  height: var(--fx-contact-mark);
  border-radius: 50%;
  background: var(--fx-live-ghost);
  border: 1px solid color-mix(in srgb, var(--fx-live) 35%, transparent);
  color: var(--fx-live);
  box-shadow: 0 0 18px var(--fx-live-glow);
}

.fm-contact-success-mark svg {
  width: var(--fx-contact-mark-icon);
  height: var(--fx-contact-mark-icon);
  display: block;
}

.fm-contact-success-title {
  margin: 0;
  font-family: 'Epilogue', sans-serif;
  font-size: var(--fx-fs-panel);
  font-weight: var(--fx-fw-panel);
  color: var(--text);
  letter-spacing: -0.01em;
}

.fm-contact-success-meta {
  margin: 0;
  font-size: var(--fx-fs-meta);
  color: var(--muted);
  line-height: 1.5;
  max-width: 36ch;
}

.fm-contact-success-meta strong {
  color: var(--text);
  font-weight: var(--fx-fw-ui);
}

.fm-contact-success .fx-key {
  margin-top: 4px;
}

@media (max-width: 768px) {
  .fm-contact-row {
    grid-template-columns: 1fr;
  }
}

/* ── Directory template (#page-discover + role dirs / .dr-shell) ───── */
html:has(#page-discover.active) footer,
html:has(#page-discover.active) #chatMinimizedTab,
html:has(#page-discover.active) #artistChatPanel,
html:has(#page-discover.active) #floatPanel,
html:has(#page-discover.active) #floatTab,
html:has(#page-dance.active) footer,
html:has(#page-dance.active) #chatMinimizedTab,
html:has(#page-dance.active) #artistChatPanel,
html:has(#page-dance.active) #floatPanel,
html:has(#page-dance.active) #floatTab,
html:has(#page-studio.active) footer,
html:has(#page-studio.active) #chatMinimizedTab,
html:has(#page-studio.active) #artistChatPanel,
html:has(#page-studio.active) #floatPanel,
html:has(#page-studio.active) #floatTab,
html:has(#page-clubs.active) footer,
html:has(#page-clubs.active) #chatMinimizedTab,
html:has(#page-clubs.active) #artistChatPanel,
html:has(#page-clubs.active) #floatPanel,
html:has(#page-clubs.active) #floatTab,
html:has(#page-gear.active) footer,
html:has(#page-gear.active) #chatMinimizedTab,
html:has(#page-gear.active) #artistChatPanel,
html:has(#page-gear.active) #floatPanel,
html:has(#page-gear.active) #floatTab {
  display: none !important;
}

#page-discover.page,
#page-dance.page,
#page-studio.page,
#page-clubs.page,
#page-gear.page {
  padding: 0 !important;
  padding-top: 0;
  min-height: 0;
  height: 0;
  margin: 0;
  overflow: visible;
  animation: none;
  background: transparent;
}
#page-discover.page.active,
#page-dance.page.active,
#page-studio.page.active,
#page-clubs.page.active,
#page-gear.page.active {
  animation: none;
  z-index: 50;
}

#page-discover .dr-shell,
#page-dance .dr-shell,
#page-studio .dr-shell,
#page-clubs .dr-shell,
#page-gear .dr-shell {
  display: flex;
  flex-direction: column;
  gap: var(--fx-gap);
  min-height: 0;
  overflow: hidden;
  container-type: inline-size;
  container-name: dr;
}

.dr-title-row {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--fx-gap);
  min-width: 0;
  box-sizing: border-box;
}
.dr-title-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1 1 auto;
}
.dr-title-copy {
  flex: none;
  min-width: 0;
}
.dr-page-title {
  margin: 0;
  font-size: var(--fx-fs-title);
  font-weight: var(--fx-fw-title);
  letter-spacing: var(--fx-track-title);
  line-height: var(--fx-lh-title);
  color: var(--text);
}
.dr-page-desc {
  margin: 4px 0 0;
  font-size: var(--fx-fs-meta);
  color: var(--muted);
  font-weight: var(--fx-fw-body);
  line-height: 1.35;
}

.dr-filters {
  position: relative;
  z-index: 70;
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: var(--fx-panel-pad);
  box-sizing: border-box;
}
.dr-fg-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 180px;
  min-width: 140px;
  max-width: 280px;
  height: var(--fx-key-h);
  padding: 0 12px;
  border-radius: var(--fx-key-radius);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--fx-edge);
  color: var(--muted);
  box-sizing: border-box;
}
.dr-fg-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fx-key-fs);
  outline: none;
}
.dr-fg-search input::placeholder { color: var(--muted); opacity: 0.7; }

#page-discover .lv-dd--end .lv-dd-menu, .dr-shell .lv-dd--end .lv-dd-menu,
#page-discover .lv-dd-menu.is-end, .dr-shell .lv-dd-menu.is-end{ left: auto; right: 0; }

.dr-more-block { padding: 6px 4px 10px; }
.dr-more-block .fx-label { margin: 4px 8px 6px; }

.dr-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, var(--fx-dr-aside-max));
  gap: var(--fx-gap);
  min-height: 0;
  align-items: stretch;
}

.dr-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--fx-panel-pad);
  box-sizing: border-box;
}
.dr-showing {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  font-size: var(--fx-fs-meta-sm);
  color: var(--muted);
  font-weight: var(--fx-fw-body);
}
.dr-showing-hint {
  color: var(--muted);
  font-weight: var(--fx-fw-body);
}
.dr-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.dr-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}
@container dr (max-width: 1200px) {
  .dr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container dr (max-width: 900px) {
  .dr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container dr (max-width: 640px) {
  .dr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .dr-title-left { flex-wrap: wrap; align-items: flex-start; }
  .dr-body { grid-template-columns: 1fr; }
  .dr-grid { grid-template-columns: 1fr; }
  .dr-aside { order: 2; max-height: 42vh; }
}

.dr-list { display: flex; flex-direction: column; gap: 8px; }

.dr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--fx-panel-radius);
  overflow: hidden;
  background: linear-gradient(180deg, var(--fx-glass-a), var(--fx-glass-b));
  border: 1px solid var(--fx-edge);
  box-shadow: 0 10px 28px -18px var(--fx-drop);
  cursor: pointer;
  min-width: 0;
}
.dr-card:hover { border-color: var(--card-border-hover); transform: translateY(-1px); }
.dr-card-cover {
  height: var(--fx-dr-cover-h);
  flex: none;
  background-size: cover;
  background-position: center;
  background-color: rgba(0,0,0,0.35);
}
.dr-card-body {
  position: relative;
  flex: 1 1 auto;
  padding: 28px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 0;
}
.dr-av {
  width: var(--fx-dr-card-av);
  height: var(--fx-dr-card-av);
  border-radius: 50%;
  border: 2px solid #fff;
  background-size: cover;
  background-position: center;
  flex: none;
  position: relative;
  margin-top: calc(var(--fx-dr-card-av) / -2 - 4px);
  margin-left: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.dr-av--letter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: var(--t1, #fff);
  font-size: 14px;
  font-weight: 700;
}
.dr-av--sm {
  width: var(--fx-dr-av-sm);
  height: var(--fx-dr-av-sm);
  margin-top: 0;
  margin-left: 0;
  border-width: 1px;
  font-size: 10px;
}
.dr-av--row { margin-top: 0; }
.dr-live-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fx-live);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px rgba(0,230,118,0.35);
}
.dr-card-name {
  font-size: var(--fx-fs-panel);
  font-weight: var(--fx-fw-title);
  color: var(--text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dr-card-meta,
.dr-row-meta {
  font-size: var(--fx-fs-meta);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dr-genres {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.dr-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--fx-edge);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dr-chip--more { color: var(--text); }
.dr-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: var(--fx-fs-meta);
  color: var(--muted);
}
.dr-lcd { color: var(--fx-live); font-variant-numeric: tabular-nums; font-weight: 600; }
.dr-stat-n { color: var(--text); font-variant-numeric: tabular-nums; }
.dr-shield { vertical-align: -1px; opacity: 0.85; }
.dr-follow-btn {
  width: 100%;
  margin-top: auto;
  justify-content: center;
}
.dr-follow-btn.is-following {
  color: var(--fx-live);
  transform: translateY(1px);
  background: linear-gradient(180deg, var(--fx-key-b), var(--fx-key-a));
}

.dr-skel { pointer-events: none; cursor: default; }
.dr-skel .dr-card-cover,
.dr-skel-line,
.dr-skel-chip,
.dr-skel-btn {
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: drSkel 1.2s ease-in-out infinite;
}
.dr-skel .dr-av { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.dr-skel-line { height: 12px; border-radius: 6px; }
.dr-skel-line--sm { width: 70%; height: 10px; }
.dr-skel-chip { width: 52px; height: 18px; border-radius: 999px; }
.dr-skel-btn { height: var(--fx-key-h-sm, 28px); border-radius: var(--fx-key-radius-sm); margin-top: 4px; }
@keyframes drSkel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.dr-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
}
.dr-empty-title { color: var(--text); font-weight: var(--fx-fw-ui); font-size: var(--fx-fs-panel); }
.dr-empty-sub { max-width: 32ch; font-size: var(--fx-fs-meta); line-height: 1.45; }

.dr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--fx-panel-radius);
  border: 1px solid var(--fx-edge);
  background: linear-gradient(180deg, var(--fx-glass-a), var(--fx-glass-b));
  cursor: pointer;
  min-width: 0;
}
.dr-row:hover { border-color: var(--card-border-hover); }
.dr-row-main { flex: 1; min-width: 0; }
.dr-row-name {
  font-weight: var(--fx-fw-title);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.dr-row-live { flex: none; }

.dr-aside {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fx-gap);
  overflow: hidden;
}
.dr-side-panel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--fx-panel-pad);
  box-sizing: border-box;
}
.dr-side-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.dr-side-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.dr-side-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  box-sizing: border-box;
}
.dr-side-row:hover { background: rgba(255,255,255,0.04); }
.dr-side-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dr-side-name {
  color: var(--text);
  font-weight: var(--fx-fw-ui);
  font-size: var(--fx-fs-meta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dr-side-sub {
  color: var(--muted);
  font-size: var(--fx-fs-meta-sm, 11px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dr-side-time {
  flex: none;
  color: var(--muted);
  font-size: var(--fx-fs-meta-sm, 11px);
}
.dr-side-empty {
  padding: 16px 4px;
  color: var(--muted);
  font-size: var(--fx-fs-meta);
}
.dr-scroll-sentinel { height: 1px; }

/* Directory facet tabs: single row + marquee labels */
.dr-tab-well {
  flex-wrap: nowrap;
  overflow: hidden;
  max-width: 100%;
}
.dr-tab-well .lv-tab-key {
  flex: none;
  max-width: 160px;
}
.dr-tab-label {
  display: inline-block;
  max-width: 110px;
  overflow: hidden;
  vertical-align: bottom;
}
.dr-tab-more { flex: none; }
.dr-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: var(--fx-fs-meta-sm);
}
.dr-extra-price { color: var(--fx-live); font-weight: var(--fx-fw-ui); }
.dr-extra-muted { color: var(--muted); }
.dr-card-actions { margin-top: 4px; }
.dr-maps-btn { width: auto; }
.dr-live-dot--card {
  position: absolute;
  top: 8px;
  right: 8px;
}
.dr-card-cover { position: relative; }
/* Taxonomy picker (shared with .lv-dd Genre chrome) */
.ftp-host { width: 100%; min-width: 0; }
.ftp-dd { width: 100%; max-width: 100%; }
.ftp-host .lv-dd-btn,
.ftp-dd .lv-dd-btn {
  max-width: none;
  width: 100%;
  justify-content: space-between;
}
.ftp-host .lv-dd-menu {
  width: 100%;
  max-width: 100%;
}
.ftp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ftp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-ui);
  color: var(--text);
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  box-shadow: inset 0 0 0 1px var(--fx-edge);
}
.ftp-chip-x {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.ftp-chip-x:hover { color: var(--text); }
.ftp-svc-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 88px 120px auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
@media (max-width: 768px) {
  .ftp-svc-row { grid-template-columns: 1fr 1fr; }
}

/* ── Profile shell (shared; Artist uses full layout first) ── */
:root {
  --fx-pf-head-h: 260px;
  --fx-pf-avatar: 116px;
  --fx-pf-aside: min(340px, 34vw);
  --fx-pf-tab-h: 36px;
  --fx-pf-scrim: linear-gradient(to bottom, transparent 0%, rgba(13, 8, 24, 0.35) 35%, rgba(13, 8, 24, 0.82) 68%, rgba(13, 8, 24, 0.96) 100%);
  --fx-social-size: 36px;
  /* Artist passport / keys (profile-reference.html @ 1920×1080) */
  --fx-pf-pass-pad-x: 20px;
  --fx-pf-key-h: 40px;
  --fx-pf-key-fs: 14.5px;
  --fx-pf-key-fw: 600;
  --fx-pf-key-radius: 11px;
  --fx-pf-panel-title-fs: 17px;
  --fx-pf-tab-fs: 14.5px;
  --fx-pf-chip-fs: 13px;
  --fx-pf-chip-rows: 2;
  --fx-pf-meta-fs: 14px;
  --fx-pf-row-title-fs: 15px;
  --fx-pf-panel-radius: 16px;
  --fx-pf-shell-pad-y: 12px;
  --fx-pf-shell-pad-x: 14px;
  --fx-pf-lcd-bezel-pad: 4px;
  --fx-pf-lcd-bezel-radius: 13px;
  --fx-pf-lcd-scr-radius: 9px;
}
/* Artist profile: page scrolls (.fx-page-scroll); shell is not fixed. */
:is(#page-artist,.pf-app).pf-app {
  overflow-x: hidden;
  overflow-y: visible;
}
:is(#page-artist,.pf-app).pf-app > .fx-app-shell {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: var(--fx-pf-shell-pad-y) var(--fx-pf-shell-pad-x)
    calc(var(--fx-pf-shell-pad-y) + var(--fx-page-chat-pad));
  gap: 0;
}
:is(#page-artist,.pf-app) .pf-layout {
  display: grid;
  grid-template-columns: var(--fx-pass-w) minmax(0, 1fr);
  gap: var(--fx-gap);
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .pf-main {
  display: flex;
  flex-direction: column;
  gap: var(--fx-gap);
  min-width: 0;
  max-width: 100%;
}
/* Empty hosts must not invent flex gaps; .pf-main gap = --fx-gap (12px). */
:is(#page-artist,.pf-app) .pf-main > .fx-billboard,
:is(#page-artist,.pf-app) .pf-main > #artist-edit-banner:not([hidden]),
:is(#page-artist,.pf-app) .pf-main > #artist-banner-strip,
:is(#page-artist,.pf-app) .pf-main > .fm-profile-members-gate-host:not(:empty) {
  margin-bottom: 0;
}
:is(#page-artist,.pf-app) .pf-main > #artist-banner-strip[style*="display: none"],
:is(#page-artist,.pf-app) .pf-main > #artist-banner-strip:not([style*="display: flex"]) {
  display: none !important;
  margin: 0 !important;
  min-height: 0;
  padding: 0;
}
:is(#page-artist,.pf-app) .pf-main > .fm-profile-members-gate-host:empty,
:is(#page-artist,.pf-app) .pf-main > #artist-donate-section {
  display: none !important;
  margin: 0 !important;
  min-height: 0;
  padding: 0;
}
:is(#page-artist,.pf-app) .pf-main > .fm-profile-members-gate-host:not(:empty) {
  display: block;
}
:is(#page-artist,.pf-app) .fx-billboard,
:is(#page-artist,.pf-app) .fx-pass {
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--fx-pf-panel-radius);
}
/* Billboard geometry — lamps/halo from hardware theme; stage + bar chrome. */
:is(#page-artist,.pf-app) .fx-billboard {
  position: relative;
  padding: 58px 10px 0;
  gap: 0;
  overflow: visible;
}
:is(#page-artist,.pf-app) .fx-billboard-stage.fm-profile-banner {
  margin-bottom: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 4px #120a20, inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  /* Reference stage reads ~373px at 1476px wide (not exact 4:1). */
  min-height: 373px;
}
:is(#page-artist,.pf-app) .fx-billboard-stage::before {
  background:
    radial-gradient(ellipse 11% 85% at 13.5% -5%, rgba(255, 232, 200, 0.2), transparent 72%),
    radial-gradient(ellipse 11% 85% at 37.5% -5%, rgba(255, 232, 200, 0.2), transparent 72%),
    radial-gradient(ellipse 11% 85% at 62.5% -5%, rgba(255, 232, 200, 0.2), transparent 72%),
    radial-gradient(ellipse 11% 85% at 86.5% -5%, rgba(255, 232, 200, 0.2), transparent 72%),
    linear-gradient(rgba(255, 232, 200, 0.06), transparent 30%);
  height: 100%;
  mix-blend-mode: screen;
  opacity: 0.85;
}
:is(#page-artist,.pf-app) .fx-billboard-bar {
  padding: 10px 6px 11px;
  min-height: 53px;
  gap: 12px;
  flex-wrap: nowrap;
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .fx-pass {
  /* Sticky CB is :is(#page-artist,.pf-app) (overflow-x:hidden). Content already starts
     below nav/admin via page padding -- top:0 keeps pass aligned with
     billboard at rest and sticks to the content top while scrolling. */
  position: sticky;
  top: 0;
  z-index: 2;
  align-items: stretch;
  text-align: left;
  gap: 0;
  padding: 0 0 4px;
  overflow: hidden;
}
:is(#page-artist,.pf-app) .fx-pass .pf-avatar-wrap {
  width: var(--fx-pf-avatar);
  height: var(--fx-pf-avatar);
  margin: 22px 0 0 var(--fx-pf-pass-pad-x);
}
:is(#page-artist,.pf-app) .fx-pass .fm-profile-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
:is(#page-artist,.pf-app) .pf-pass-name-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
  min-width: 0;
  padding: 14px var(--fx-pf-pass-pad-x) 0;
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .fx-pass .pf-head-name {
  margin: 0;
  max-width: 100%;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(#page-artist,.pf-app) .pf-pass-meta {
  font-size: var(--fx-pf-meta-fs);
  color: var(--muted);
  text-align: left;
  line-height: 1.55;
  margin-top: 11px;
  padding: 0 var(--fx-pf-pass-pad-x);
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) #artistPageRoleTypes.pf-pass-meta {
  margin-top: 11px;
}
:is(#page-artist,.pf-app) #artistPageMeta.pf-pass-meta {
  margin-top: 0;
}
:is(#page-artist,.pf-app) .fx-pass .pf-tag-row {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
  padding: 0 var(--fx-pf-pass-pad-x);
  max-width: 100%;
  max-height: calc(var(--fx-chip-h) * var(--fx-pf-chip-rows) + 6px);
  overflow: hidden;
  white-space: normal;
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .fx-pass .pf-tag-row .fx-chip {
  flex: none;
  height: var(--fx-chip-h);
  padding: 0 11px;
  font-size: var(--fx-pf-chip-fs);
  font-weight: var(--fx-fw-ui);
  max-width: none;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
}
:is(#page-artist,.pf-app) .fx-pass .pf-head-stats {
  justify-content: stretch;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  padding: 18px var(--fx-pf-pass-pad-x) 0;
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .fx-pass .pf-head-actions {
  display: grid;
  gap: 7px;
  width: 100%;
  justify-content: stretch;
  padding: 14px var(--fx-pf-pass-pad-x) 0;
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .fx-pass .pf-head-actions.is-visitor {
  grid-template-columns: 1fr 1fr;
}
:is(#page-artist,.pf-app) .fx-pass .pf-head-actions.is-visitor .pf-head-actions-row2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 40px;
  gap: 7px;
  min-width: 0;
}
:is(#page-artist,.pf-app) .fx-pass .pf-head-actions.is-visitor .pf-head-actions-row2[style*="display: none"] {
  display: none;
}
:is(#page-artist,.pf-app) .fx-pass .pf-head-actions.is-owner {
  grid-template-columns: 1fr 1fr;
}
:is(#page-artist,.pf-app) .fx-pass .pf-head-actions.is-owner #fmArtistGoLiveBtn {
  grid-column: 1 / -1;
}
:is(#page-artist,.pf-app) .fx-pass .pf-head-actions.is-owner .pf-head-actions-row2 {
  display: none !important;
}
:is(#page-artist,.pf-app) .fx-pass .pf-head-actions .fx-key,
:is(#page-artist,.pf-app) .fx-pass .pf-head-actions .fm-profile-more-menu-btn {
  width: 100%;
  min-width: 0;
  height: var(--fx-pf-key-h);
  padding: 0 8px;
  font-size: var(--fx-pf-key-fs);
  font-weight: var(--fx-pf-key-fw);
  border-radius: var(--fx-pf-key-radius);
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(#page-artist,.pf-app) .fx-pass .pf-head-actions .fm-profile-more-menu-wrap {
  display: flex;
  width: 100%;
  min-width: 0;
}
:is(#page-artist,.pf-app) .pf-pass-since {
  margin-top: 18px;
  padding: 14px var(--fx-pf-pass-pad-x);
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  font-size: 12px;
  color: var(--muted);
  text-align: left;
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .pf-pass-sections {
  margin-top: 0;
}
:is(#page-artist,.pf-app) .pf-pass-sections > * {
  border-top: 1px solid var(--fx-edge);
  margin-top: 18px;
  padding-top: 0;
}
:is(#page-artist,.pf-app) .fx-pass .pf-pass-sections > * + * {
  margin-top: 18px;
  padding-top: 0;
  border-top: 1px solid var(--fx-edge);
}
:is(#page-artist,.pf-app) #artist-edit-banner[hidden],
:is(#page-artist,.pf-app) #artist-dispute-banner[hidden] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
}
:is(#page-artist,.pf-app) #artist-edit-banner:not([hidden]) {
  display: flex;
  flex-shrink: 0;
  margin-bottom: 0;
}
:is(#page-artist,.pf-app) .pf-dispute-banner:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: var(--fx-gap);
  padding: var(--fx-panel-pad-y-sm) var(--fx-panel-pad);
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.22);
  color: var(--t2, #FFD700);
  font-size: var(--fx-fs-meta);
  line-height: 1.65;
}
:is(#page-artist,.pf-app) .pf-dispute-view {
  color: var(--t2, #FFD700);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  flex-shrink: 0;
}
:is(#page-artist,.pf-app) .pf-dispute-view::before {
  content: '· ';
  text-decoration: none;
  font-weight: 600;
}
:is(#page-artist,.pf-app) .pf-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
:is(#page-artist,.pf-app) .pf-avatar-wrap .fm-profile-avatar {
  width: var(--fx-pf-avatar);
  height: var(--fx-pf-avatar);
  font-size: 2rem;
}
:is(#page-artist,.pf-app) .pf-avatar-wrap--live::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fx-red);
  box-shadow: 0 0 0 3px var(--bg);
  z-index: 2;
}
:is(#page-artist,.pf-app) .pf-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fx-live);
  background: rgba(47, 240, 127, 0.09);
  border: 1px solid rgba(47, 240, 127, 0.45);
}
:is(#page-artist,.pf-app) .pf-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  max-width: 100%;
  overflow: hidden;
}
:is(#page-artist,.pf-app) .pf-tag-row .fx-chip {
  background: linear-gradient(#2a2042, #211936);
  border-color: rgba(255, 255, 255, 0.09);
  flex: none;
  max-width: none;
  overflow: visible;
  text-overflow: unset;
  color: var(--t1, #ece5f9);
}
:is(#page-artist,.pf-app) .pf-tag-row .fx-chip--type {
  background: linear-gradient(rgba(236, 45, 143, 0.2), rgba(236, 45, 143, 0.1));
  border-color: rgba(236, 45, 143, 0.6);
  color: var(--t1, #ffe1f1);
}
:is(#page-artist,.pf-app) .pf-tag-row .fx-chip--more {
  color: var(--text);
  cursor: default;
}
:is(#page-artist,.pf-app) .pf-head-stats {
  align-items: stretch;
}
:is(#page-artist,.pf-app) .pf-stat,
:is(#page-artist,.pf-app) .pf-stat-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}
/* LCD: outer bezel + screen (profile-reference .lcdb / .scr). */
:is(#page-artist,.pf-app) .pf-stat-bezel {
  padding: var(--fx-pf-lcd-bezel-pad);
  border-radius: var(--fx-pf-lcd-bezel-radius);
  background: linear-gradient(#1d1432, #140d24);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  min-height: 77px;
}
:is(#page-artist,.pf-app) .pf-stat-lcd.fx-lcd {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  min-height: 67px;
  padding: 0;
  gap: 0;
  border-radius: var(--fx-pf-lcd-scr-radius);
  overflow: hidden;
  background: linear-gradient(180deg, #05221a, #03130d 70%);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(47, 240, 127, 0.08);
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .pf-stat-lcd.fx-lcd::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.07), transparent 40%);
  pointer-events: none;
  z-index: 1;
}
:is(#page-artist,.pf-app) .pf-stat-lcd-digits {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  gap: 4px;
  min-height: var(--fx-lcd-digit-h);
  padding: 10px 12px 6px;
  box-sizing: border-box;
  flex: 1;
}
:is(#page-artist,.pf-app) .pf-stat-lcd .fx-seg-sym {
  font-size: 16px;
  margin-right: 0;
  flex: none;
}
:is(#page-artist,.pf-app) .pf-stat-label {
  position: relative;
  z-index: 2;
  font-size: 11.5px;
  font-weight: var(--fx-fw-ui);
  color: var(--t2, #8fc4a5);
  text-transform: lowercase;
  text-align: right;
  line-height: 1.15;
  opacity: 1;
  padding: 0 12px 9px;
  white-space: nowrap;
}
:is(#page-artist,.pf-app) .pf-head-actions {
  align-items: stretch;
}
:is(#page-artist,.pf-app) .pf-pass-section {
  min-width: 0;
}
:is(#page-artist,.pf-app) .pf-pass-section-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 15px var(--fx-pf-pass-pad-x) 12px;
  font-size: var(--fx-pf-panel-title-fs);
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--text);
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .pf-pass-sections .fx-row,
:is(#page-artist,.pf-app) .pf-pass-sections .pf-onair-row,
:is(#page-artist,.pf-app) .pf-pass-sections .plate {
  margin-left: 14px;
  margin-right: 14px;
}
:is(#page-artist,.pf-app) .pf-jb-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 14px 2px;
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .pf-jb-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 11px 12px;
  border-radius: 13px;
  background: var(--chan, linear-gradient(#35265d, #2b1e4d));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  min-width: 0;
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .pf-jb-card--badges {
  padding: 11px 12px;
  background: var(--chan, linear-gradient(#35265d, #2b1e4d));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
:is(#page-artist,.pf-app) .pf-jb-card-lcd {
  align-self: stretch;
  width: 100%;
}
:is(#page-artist,.pf-app) .pf-jb-card-lcd .pf-jb-card-label {
  color: var(--fx-live-hi);
  opacity: 0.85;
  text-align: center;
}
:is(#page-artist,.pf-app) .pf-jb-card-label {
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-ui);
  color: var(--text);
}
:is(#page-artist,.pf-app) .pf-jb-card-empty {
  font-size: var(--fx-fs-meta-sm);
  color: var(--muted);
  line-height: 1.35;
}
:is(#page-artist,.pf-app) .pf-jb-card:has(.pf-jb-badges:not([hidden])) .pf-jb-card-empty,
:is(#page-artist,.pf-app) .pf-jb-card:has(.pf-jb-badges-host .pf-jb-badge-rows) .pf-jb-card-empty {
  display: none;
}
:is(#page-artist,.pf-app) .pf-tab-has-led {
  position: relative;
}
:is(#page-artist,.pf-app) .pf-tab-led {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  padding: 0;
  min-width: 0;
  background: var(--fx-red);
  box-shadow: 0 0 0 2px var(--fx-live-ghost);
  pointer-events: none;
}
:is(#page-artist,.pf-app) .pf-tab-led[hidden] {
  display: none !important;
}
:is(#page-artist,.pf-app) .pf-chrome {
  display: flex;
  flex-direction: column;
  gap: var(--fx-gap);
  min-width: 0;
  margin-top: 0;
}
:is(#page-artist,.pf-app) .pf-tab-scroll {
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
:is(#page-artist,.pf-app) .pf-tab-well {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 5px;
  min-width: min-content;
  border-radius: 15px;
  background: rgba(14, 7, 24, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
:is(#page-artist,.pf-app) .lv-tab-key {
  flex: none;
  white-space: nowrap;
  height: var(--fx-pf-tab-h);
  padding: 0 15px;
  font-size: var(--fx-pf-tab-fs);
  font-weight: 600;
  border-radius: 11px;
  gap: 8px;
  color: var(--t2, #e3dbf2);
}
:is(#page-artist,.pf-app) .lv-tab-key.is-down {
  font-weight: 600;
}
:is(#page-artist,.pf-app) .pf-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
:is(#page-artist,.pf-app) .pf-panel-scroll {
  overflow: visible;
  padding-right: 0;
}
:is(#page-artist,.pf-app) .pf-overview {
  display: block;
}
:is(#page-artist,.pf-app) .pf-overview-main {
  display: flex;
  flex-direction: column;
  gap: var(--fx-gap);
  min-width: 0;
}
:is(#page-artist,.pf-app) .pf-overview-aside {
  display: none;
}
:is(#page-artist,.pf-app) .fm-profile-banner-edit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: static;
}
:is(#page-artist,.pf-app) .pf-panel,
:is(#page-artist,.pf-app) .pf-spotlight.fx-panel,
:is(#page-artist,.pf-app) .fx-panel.fx-plate.pf-panel {
  padding: 0;
  box-sizing: border-box;
  border-radius: var(--fx-pf-panel-radius);
}
:is(#page-artist,.pf-app) .pf-panel .fx-panel-head,
:is(#page-artist,.pf-app) .pf-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  max-height: none;
  /* 12+30+9 = 51px with All key — matches reference .ph before plates */
  padding: 12px 18px 9px;
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .pf-section-head .fx-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  font-size: var(--fx-pf-panel-title-fs);
  font-weight: 600;
  letter-spacing: -0.1px;
}
:is(#page-artist,.pf-app) .pf-section-head .fx-panel-title .fx-panel-meta {
  font-weight: var(--fx-fw-body);
  font-size: 13.5px;
  color: var(--muted);
}
:is(#page-artist,.pf-app) .pf-section-head .fx-panel-title .fx-panel-meta::before {
  content: none;
}
:is(#page-artist,.pf-app) .pf-section-head .fx-key,
:is(#page-artist,.pf-app) .pf-spotlight-head-actions .fx-key {
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: var(--fx-pf-key-fw);
  border-radius: 9px;
}
:is(#page-artist,.pf-app) .pf-spotlight-grid,
:is(#page-artist,.pf-app) #artist-overview-tracks-list,
:is(#page-artist,.pf-app) #artist-overview-live-list {
  padding: 0 14px 16px;
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .pf-track-row.fx-row {
  min-height: var(--fx-row-h);
  margin-bottom: var(--fx-row-gap);
}
:is(#page-artist,.pf-app) .pf-onair-empty {
  color: var(--muted);
  font-size: var(--fx-fs-meta);
  margin: 0 0 10px;
}
:is(#page-artist,.pf-app) .pf-about-bio {
  font-size: var(--fx-field-fs);
  line-height: 1.6;
  margin: 0 0 12px;
  padding: 0 var(--fx-pf-pass-pad-x);
  color: var(--t1, #ebe4f7);
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .pf-about-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  align-items: baseline;
  margin: 0 0 12px;
}
:is(#page-artist,.pf-app) .pf-about-rows .fx-label {
  margin: 0;
}
:is(#page-artist,.pf-app) .pf-about-val {
  font-size: var(--fx-fs-meta);
  color: var(--text);
  min-width: 0;
}
:is(#page-artist,.pf-app) .pf-about-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.fx-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fx-social-size);
  height: var(--fx-social-size);
  border-radius: 50%;
  border: 0;
  padding: 0;
  text-decoration: none;
  color: var(--t1, #fff);
  background: linear-gradient(180deg, var(--fx-key-a), var(--fx-key-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(0, 0, 0, 0.36);
  cursor: pointer;
  flex-shrink: 0;
}
.fx-social:hover,
.fx-social:focus-visible {
  filter: brightness(1.08);
  transform: none;
}
.fx-social svg {
  display: block;
}
:is(#page-artist,.pf-app) .pf-onair-row .fx-chip--live {
  color: var(--fx-red);
  border-color: rgba(255, 59, 92, 0.55);
  background: rgba(255, 59, 92, 0.12);
}
:is(#page-artist,.pf-app) .pf-onair-when {
  color: var(--fx-live-hi);
  border-color: rgba(0, 230, 118, 0.4);
  background: var(--fx-live-ghost);
}
:is(#page-artist,.pf-app) .pf-onair-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: var(--fx-row-gap);
}
:is(#page-artist,.pf-app) .pf-onair-mid {
  min-width: 0;
}
:is(#page-artist,.pf-app) .pf-onair-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(#page-artist,.pf-app) .pf-pass-sections .pf-onair-row,
:is(#page-artist,.pf-app) .pf-pass-sections .fx-row {
  padding: 9px 10px;
  border-radius: 13px;
  background: var(--chan, linear-gradient(#35265d, #2b1e4d));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .pf-about-rows {
  padding: 13px var(--fx-pf-pass-pad-x) 0;
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .pf-about-social {
  padding: 14px var(--fx-pf-pass-pad-x) 2px;
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .pf-jb-empty {
  margin: 0;
  font-size: var(--fx-fs-meta);
  color: var(--muted);
}
:is(#page-artist,.pf-app) .pf-jb-badge-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
:is(#page-artist,.pf-app) .pf-jb-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  font-size: var(--fx-fs-meta);
}
:is(#page-artist,.pf-app) .pf-jb-wins {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
:is(#page-artist,.pf-app) .pf-jb-win-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fx-fs-meta);
}
:is(#page-artist,.pf-app) .pf-jb-win-label {
  color: var(--text);
  font-size: var(--fx-fs-meta);
  font-weight: var(--fx-fw-ui);
}
:is(#page-artist,.pf-app) .pf-live-section {
  margin-bottom: 14px;
}
:is(#page-artist,.pf-app) .pf-room-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: inherit;
  min-height: 61px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 13px;
  background: var(--chan, linear-gradient(#35265d, #2b1e4d));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .pf-room-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
:is(#page-artist,.pf-app) .pf-room-row .pf-room-title {
  display: block;
  font-size: var(--fx-row-title-fs);
  font-weight: var(--fx-row-title-fw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(#page-artist,.pf-app) .pf-room-row .fx-panel-meta {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(#page-artist,.pf-app) .fm-media-spotlight-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
:is(#page-artist,.pf-app) .fm-media-spotlight-grid .fm-media-spotlight-item {
  aspect-ratio: 16 / 9;
}
:is(#page-artist,.pf-app) .pf-spotlight.fx-panel {
  margin: 0;
}
:is(#page-artist,.pf-app) .pf-spotlight-head,
:is(#page-artist,.pf-app) .pf-spotlight .pf-section-head,
:is(#page-artist,.pf-app) .pf-spotlight .fx-panel-head {
  align-items: center;
  /* Reference Spotlight .ph → first card at y≈58 */
  padding: 15px 18px 13px;
}
:is(#page-artist,.pf-app) .pf-spotlight-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
:is(#page-artist,.pf-app) .pf-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fx-gap);
}
:is(#page-artist,.pf-app) .pf-spotlight-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  border-radius: var(--fx-panel-radius);
  overflow: hidden;
}
:is(#page-artist,.pf-app) .pf-spotlight-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--fx-plate-a), var(--fx-plate-b));
  overflow: hidden;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--fx-edge);
  isolation: isolate;
}
:is(#page-artist,.pf-app) .pf-spotlight-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
}
:is(#page-artist,.pf-app) .pf-spotlight-iframe {
  z-index: 1;
  background: transparent;
}
:is(#page-artist,.pf-app) .pf-spotlight-frame > img.pf-spotlight-media {
  z-index: 2;
}
:is(#page-artist,.pf-app) .pf-spotlight-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: var(--fx-chip-fs);
  font-weight: var(--fx-fw-ui);
  letter-spacing: 0.08em;
}
:is(#page-artist,.pf-app) .pf-spotlight-kind {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  background: rgba(4, 1, 12, 0.82);
  color: var(--t1, #fff);
  border-color: transparent;
  pointer-events: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
:is(#page-artist,.pf-app) .pf-spotlight-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 28px 12px 12px;
  background: linear-gradient(to top, rgba(4, 1, 12, 0.88), transparent);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}
:is(#page-artist,.pf-app) .pf-head-actions .fx-key {
  min-width: 0;
  height: var(--fx-pf-key-h);
  padding: 0 8px;
  font-size: var(--fx-pf-key-fs);
  font-weight: var(--fx-pf-key-fw);
}
:is(#page-artist,.pf-app) .pf-track-verify.fx-key {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 15px;
  font-size: 13.5px;
  font-weight: var(--fx-pf-key-fw);
  border-radius: 10px;
}
:is(#page-artist,.pf-app) .pf-spotlight-caption {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
:is(#page-artist,.pf-app) .pf-spotlight-frame {
  border-radius: 13px;
}
:is(#page-artist,.pf-app) .pf-spotlight-card {
  border-radius: 13px;
}
:is(#page-artist,.pf-app) .pf-spotlight-cta {
  pointer-events: auto;
}
:is(#page-artist,.pf-app) .pf-spotlight-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 14px 12px;
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .pf-spotlight-dots:empty {
  display: none;
  padding: 0;
}
:is(#page-artist,.pf-app) .pf-spotlight-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(200, 180, 255, 0.28);
  cursor: pointer;
}
:is(#page-artist,.pf-app) .pf-spotlight-dot.is-active {
  background: var(--fx-live);
  box-shadow: 0 0 0 3px var(--fx-live-ghost);
}
:is(#page-artist,.pf-app) .pf-tab-n {
  margin-left: 0;
  color: var(--t2, #bfb5d6);
  font-size: inherit;
  font-weight: 600;
}
:is(#page-artist,.pf-app) .lv-tab-key.is-down .pf-tab-n {
  color: var(--fx-live);
}
:is(#page-artist,.pf-app) .pf-track-row {
  display: grid;
  grid-template-columns: 34px 46px minmax(0, 1fr) auto 92px auto;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 13px;
  background: var(--chan, linear-gradient(#35265d, #2b1e4d));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
}
:is(#page-artist,.pf-app) .pf-track-main {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
:is(#page-artist,.pf-app) .pf-track-main-text {
  min-width: 0;
  flex: 1;
}
:is(#page-artist,.pf-app) .pf-track-cover {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
}
:is(#page-artist,.pf-app) .pf-track-cover .fm-track-cover-tile,
:is(#page-artist,.pf-app) .pf-track-cover .fm-track-cover-tile--sm {
  width: 46px !important;
  height: 46px !important;
  border-radius: 9px;
}
:is(#page-artist,.pf-app) .pf-track-main { min-width: 0; }
:is(#page-artist,.pf-app) .pf-track-title {
  font-size: var(--fx-pf-row-title-fs);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(#page-artist,.pf-app) .pf-track-protected {
  color: var(--fx-live);
  border-color: rgba(47, 240, 127, 0.42);
  background: rgba(47, 240, 127, 0.08);
  height: 28px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
}
:is(#page-artist,.pf-app) .pf-track-plays {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}
:is(#page-artist,.pf-app) #artist-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fx-gap);
  align-items: start;
}
:is(#page-artist,.pf-app) #artist-edit-grid .artist-edit-section {
  margin: 0;
}
@media (max-width: 1100px) {
  :is(#page-artist,.pf-app) .pf-spotlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  :is(#page-artist,.pf-app) .pf-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(#page-artist,.pf-app) .fx-pass {
    width: 100%;
    min-width: 0;
  }
  :is(#page-artist,.pf-app) .pf-main {
    min-width: 0;
  }
  :is(#page-artist,.pf-app) .fx-pass .pf-head-name,
  :is(#page-artist,.pf-app) .pf-pass-name-row {
    max-width: 100%;
    min-width: 0;
  }
  :is(#page-artist,.pf-app) .pf-spotlight-grid {
    grid-template-columns: 1fr;
  }
  :is(#page-artist,.pf-app) .pf-track-row {
    grid-template-columns: 28px 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  :is(#page-artist,.pf-app) .pf-track-protected,
  :is(#page-artist,.pf-app) .pf-track-plays,
  :is(#page-artist,.pf-app) .pf-track-verify {
    grid-column: 3;
  }
  :is(#page-artist,.pf-app) #artist-edit-grid {
    grid-template-columns: 1fr;
  }
  :is(#page-artist,.pf-app) .fx-pass {
    position: static;
  }
  :is(#page-artist,.pf-app) .fx-pass .pf-head-actions.is-visitor {
    grid-template-columns: 1fr 1fr;
  }
  :is(#page-artist,.pf-app) .fx-pass .pf-head-actions.is-owner {
    grid-template-columns: 1fr 1fr;
  }
  :is(#page-artist,.pf-app) .fx-pass .pf-head-actions.is-owner #fmArtistGoLiveBtn {
    grid-column: 1 / -1;
  }
  :is(#page-artist,.pf-app) .fx-pass .pf-head-actions .fx-key {
    width: 100%;
    justify-content: center;
  }
}

/* Artist document scroll: opaque band from viewport top through nav (+ admin strip). */
html.fm-artist-nav-solid::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--cs-chrome-top, var(--fx-nav-chrome, 60px));
  background: var(--bg);
  z-index: 98;
}
html.fm-artist-nav-solid nav {
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.fm-artist-nav-solid #fmAdminToolbar {
  background: var(--bg);
}
.fm-banner-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(4, 1, 12, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fx-chrome-pad);
  box-sizing: border-box;
}
.fm-banner-preview-overlay img,
.fm-banner-preview-overlay .fm-banner-preview-bg {
  max-width: min(1400px, 96vw);
  max-height: 90vh;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--fx-panel-radius);
}