/* styles.css — Phish Radio UI (Dark, Minimal, Mobile-First) */
:root{
  color-scheme: dark;
  --bg:#0f172a;
  --panel:#0f172a;
  --panel-2:#0f172a;
  --border:#1f2b44;
  --border-2:#213154;
  --text:#dbe7ff;
  --muted:#9fb2c9;
  --accent:#52a8ff;
  --accent-2:#7fc0ff;
  --accent-3:#1a2b53;
  --chip-bliss-bg:#1e3a8a; --chip-bliss-fg:#c7d2fe;
  --chip-funk-bg:#14532d;  --chip-funk-fg:#bbf7d0;
  --btn-bg:#15203a; --btn-border:#233353;
  --overlay:#040610b8;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
}

.liveBroadcastBanner{
  position:relative;
  z-index:9;
  flex:0 0 auto;
  width:100%;
}

.liveBroadcastBannerBtn{
  width:100%;
  min-height:34px;
  border:1px solid rgba(82,168,255,.32);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(22,38,69,.96), rgba(12,22,42,.96));
  color:var(--text);
  display:grid;
  grid-template-columns:max-content auto minmax(0,1fr) auto max-content;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  font:inherit;
  text-align:left;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.liveBroadcastBannerBtn:hover,
.liveBroadcastBannerBtn:focus-visible{
  border-color:rgba(127,192,255,.72);
  background:linear-gradient(180deg, rgba(27,51,90,.98), rgba(13,28,55,.98));
}

.liveBroadcastBannerBtn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.liveBroadcastStation{
  min-width:0;
  color:var(--accent-2);
  font-size:12px;
  font-weight:800;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.liveBroadcastDivider{
  color:#6984a9;
  font-size:12px;
  font-weight:700;
}

.liveBroadcastTrack{
  min-width:0;
  color:var(--text);
  font-size:12px;
  font-weight:650;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.liveBroadcastDate{
  color:var(--text);
  font-size:11.5px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  line-height:1.15;
  white-space:nowrap;
}

@media (max-width:520px){
  .liveBroadcastBannerBtn{
    min-height:46px;
    grid-template-columns:minmax(0,1fr) max-content;
    grid-template-areas:
      "station date"
      "track track";
    row-gap:3px;
    column-gap:8px;
    padding:7px 10px;
  }

  .liveBroadcastStation{grid-area:station;}
  .liveBroadcastTrack{grid-area:track;}
  .liveBroadcastDate{grid-area:date;}
  .liveBroadcastDivider{display:none;}
}

body[data-theme="midnight"]{
  --bg:#0f172a;
  --panel:#0f172a;
  --panel-2:#0f172a;
  --border:#1f2b44;
  --border-2:#213154;
  --text:#dbe7ff;
  --muted:#9fb2c9;
  --accent:#52a8ff;
  --accent-2:#7fc0ff;
  --accent-3:#1a2b53;
  --btn-bg:#15203a;
  --btn-border:#233353;
}

body[data-theme="aurora"]{
  --bg:#071a22;
  --panel:#0a202b;
  --panel-2:#102a36;
  --border:#1d495b;
  --border-2:#2a5e74;
  --text:#dbf5ff;
  --muted:#92bdca;
  --accent:#34d399;
  --accent-2:#6ee7b7;
  --accent-3:#1f4f58;
  --btn-bg:#0f2a35;
  --btn-border:#2d5f70;
}

body[data-theme="ember"]{
  --bg:#21110c;
  --panel:#281611;
  --panel-2:#351f17;
  --border:#5a3325;
  --border-2:#6e4331;
  --text:#ffe9df;
  --muted:#d7b5a8;
  --accent:#f97316;
  --accent-2:#fb923c;
  --accent-3:#5c2e1d;
  --btn-bg:#3b2117;
  --btn-border:#6d3f2d;
}

body[data-theme="slate"]{
  --bg:#14191f;
  --panel:#1a2028;
  --panel-2:#222a33;
  --border:#354150;
  --border-2:#435264;
  --text:#e2e8f0;
  --muted:#a4afbf;
  --accent:#60a5fa;
  --accent-2:#93c5fd;
  --accent-3:#2c3849;
  --btn-bg:#222b37;
  --btn-border:#435164;
}

[hidden]{display:none !important;}

#faderBtn,
#faderBtnMin,
#faderWarningOverlay,
.faderActionBtn,
.crossfadeActionBtn,
#crossfadeBtn,
#crossfadeBtnMin,
.faderWarningModal{
  display:none !important;
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- LAYOUT ---------- */
.viewport{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:calc(16px + env(safe-area-inset-top))
          calc(16px + env(safe-area-inset-right))
          calc(16px + env(safe-area-inset-bottom))
          calc(16px + env(safe-area-inset-left));
}

.card{
  width:100%;
  max-width:min(420px, 92vw);
  height:100%;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:6px;
  overflow:hidden;min-height:0;
}
.cardHeader{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  min-height:22px;
}
.jamRatingTop{
  display:none;
  border:0;
  background:transparent;
  margin:0;
  padding:0 2px;
  color:#88a2c8;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.05em;
  line-height:1.15;
  text-align:left;
  white-space:nowrap;
  cursor:pointer;
  opacity:.92;
}
.jamRatingTop:hover{color:#9eb8dc;}
.jamRatingTop:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}
.playerHeaderActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  width:auto;
  justify-self:end;
  flex-wrap:wrap;
}
.playbackSourceToggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:1px solid #27416f;
  border-radius:999px;
  padding:2px;
  background:#0d1830;
}
.playbackSourceBtn{
  min-width:58px;
  height:28px;
  border-radius:999px;
  border:1px solid #29406d;
  background:transparent;
  color:#d7e6ff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.03em;
  padding:0 10px;
  cursor:pointer;
}
.playbackSourceBtn:hover{
  border-color:#4b79c3;
}
.playbackSourceBtn.isActive{
  background:#1f3b69;
  border-color:#69a1f0;
}
.playbackSourceBtn:disabled{
  opacity:.7;
  cursor:default;
}
.liveRadioHeaderBtn{
  display:none !important;
  min-width:108px;
  justify-content:center;
  border-color:#315487;
  background:linear-gradient(180deg,#153562,#102444);
  color:#ecf4ff;
  font-weight:800;
  letter-spacing:.03em;
}
.liveRadioHeaderBtn:hover{
  border-color:#5d8fd6;
}
.liveRadioHeaderBtn.isActive{
  background:linear-gradient(180deg,#2b5ea4,#21477c);
  border-color:#89b8ff;
  color:#ffffff;
}
body.player-mode-min .liveRadioHeaderBtn{
  display:inline-flex !important;
  align-items:center;
}
.playbackSourceStatus{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:20px;
  margin-top:2px;
  color:#cfe0ff;
}
.playbackSourceBadge{
  display:inline-flex;
  align-items:center;
  height:20px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid #3562a8;
  background:linear-gradient(180deg,#1d3d6d,#142a49);
  color:#eef5ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.playbackSourceMeta{
  font-size:11px;
  font-weight:700;
  color:#9fbbdf;
}
.liveActivityBanner{
  width:100%;
  border:1px solid #29406d;
  background:linear-gradient(180deg,#112244,#0d1932);
  border-radius:10px;
  color:#dce8ff;
  display:grid;
  gap:1px;
  padding:7px 10px;
  text-align:left;
  cursor:pointer;
  justify-self:stretch;
}
.liveActivityBanner:hover{
  border-color:#5d8fd7;
  background:linear-gradient(180deg,#16305f,#10203f);
}
.liveActivityTitle{
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#91b3e7;
}
.liveActivityMeta{
  font-size:10px;
  font-weight:700;
  color:#eef5ff;
  opacity:.86;
}
.playerModeToggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:1px solid #2a3f6f;
  border-radius:999px;
  padding:2px;
  background:#0e1a35;
}
.playerModeBtn{
  min-width:46px;
  height:28px;
  border-radius:999px;
  border:1px solid #2a3f6f;
  background:transparent;
  color:#d2e1ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.3px;
  cursor:pointer;
  padding:0 10px;
}
.playerModeBtn:hover{
  border-color:#3b5997;
}
.playerModeBtn.isActive{
  background:#223a68;
  border-color:#5b8fdc;
}
.authTrigger{
  min-width:74px;
  padding:0 10px;
}
.authTrigger.authReady{
  min-width:40px;
  width:40px;
  padding:0;
  border-radius:999px;
  gap:8px;
}
.authAvatar{
  width:20px;
  height:20px;
  border-radius:999px;
  display:inline-grid;
  place-items:center;
  font-size:12px;
  font-weight:800;
  background:#1f3767;
  color:#dce8ff;
  border:1px solid #3a5f9b;
}
.authAvatarImg{
  width:24px;
  height:24px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid #3a5f9b;
  display:block;
}
.authTriggerLabel{
  display:none;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
}

/* ---------- ARTWORK ---------- */
.artwrap{
  width:100%;
  height:auto;
  min-height:clamp(180px,28svh,260px);
  border-radius:14px;overflow:hidden;
  background:#0b0f18;position:relative;
  flex:1 1 0;
  transition:background 300ms ease;
}
.artwrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.04);
  display:block;
  transition:transform .42s cubic-bezier(.2,.72,.2,1),filter .42s ease,opacity .42s ease;
}
.artwrap.isSwapping img{
  transform:scale(1.09);
  filter:saturate(1.17) brightness(.85);
  opacity:.88;
}

/* ---------- TITLES ---------- */
.titleRow{display:flex;align-items:center;gap:8px;padding-top:2px;}
.titleRow h2{
  margin:0;font-size:clamp(17px,2.05svh,21px);
  font-weight:800;flex:1;letter-spacing:.2px;
  line-height:1.12;
  text-wrap:balance;
  transition:transform .28s ease,opacity .28s ease,filter .28s ease;
}
.titleRow h2.titleFit-tight{font-size:clamp(15px,1.85svh,19px);}
.titleRow h2.titleFit-very-tight{font-size:clamp(13.8px,1.65svh,17px);}
.titleRow h2.titleFit-ultra{font-size:clamp(12.8px,1.5svh,15.5px);line-height:1.16;}
.titleRow.isSwapping h2{
  transform:translateY(4px);
  opacity:.7;
  filter:blur(.4px);
}

/* ---------- METADATA ---------- */
.metaHeaderRow{
  display:block;
}
.metaActionRow{
  display:none;
  align-items:center;
  gap:6px;
}
.metaStack{
  display:grid;
  gap:2px;
}
#favoriteBtnMin,
#shareBtnMin{
  display:none;
}
.meta{font-size:12px;color:var(--muted);line-height:1.2;}
.meta.recap{font-size:12.5px;}
.meta.isSwapping{
  transform:translateY(3px);
  opacity:.72;
  transition:transform .26s ease,opacity .26s ease;
}
.upNextTrigger{
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:0;
  cursor:pointer;
  display:block;
}
.upNextTrigger:hover{color:#bdd3f8;}
.upNextTrigger:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}
.chips{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap;}
.chip{
  padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.2px;
  background:#142036;color:#cfe1ff;border:1px solid #1e2d4b;
}
.chip.bliss{background:var(--chip-bliss-bg);color:var(--chip-bliss-fg);}
.chip.funk{background:var(--chip-funk-bg);color:var(--chip-funk-fg);}

/* ---------- PROGRESS ---------- */
.middle{display:grid;gap:9px;}
.progressWrap{display:grid;gap:4px;padding-inline:2px;}
.progressBarContainer{
  position:relative;height:10px;border-radius:999px;
  background:#12213e;cursor:pointer;border:1px solid #1a2b4d;overflow:hidden;
}
.progressBar{
  position:absolute;inset:0 auto 0 0;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:999px;
}
.timeRow{
  display:flex;justify-content:space-between;
  font-size:11px;color:var(--muted);
  margin-top:4px;padding-inline:2px;
}

/* ---------- CONTROLS ---------- */
.progressWrap+.controls{margin-top:8px;}
.controls{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  grid-template-areas:
    "jam share"
    "play skip";
  gap:8px;
  padding-inline:2px;
}

#openJamChart{ grid-area: jam; }
#playPause   { grid-area: play; }
#skip        { grid-area: skip; }
.shareActionGroup{
  grid-area:share;
  display:flex;
  align-items:center;
  gap:6px;
}
.shareActionGroup #shareBtn{
  flex:1 1 auto;
}
.tvModeBtn{
  grid-column:1 / -1;
  width:100%;
}
.tvModeBtn svg{
  width:17px;
  height:17px;
}
.tvModeBtn.isActive,
.tvModeBtn[aria-pressed="true"]{
  border-color:#7ed8ff;
  box-shadow:0 0 0 1px rgba(126,216,255,.32) inset,0 8px 20px rgba(11,59,88,.3);
  color:#dff6ff;
}
.tvModeBtn[hidden]{
  display:none !important;
}

.btn{
  min-width:0;
  display:flex;align-items:center;justify-content:center;gap:.55ch;
  height:clamp(34px,4.8svh,40px);
  font-size:13px;
  border-radius:12px;font-weight:700;letter-spacing:.2px;
  background:linear-gradient(180deg,var(--btn-bg),#111a30);
  border:1px solid var(--btn-border);
  color:var(--text);cursor:pointer;user-select:none;
  padding:0 10px;
  transition:transform .05s ease,border-color .2s ease,box-shadow .2s ease;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.btn.small{
  height:34px;
  font-size:12px;
  padding:0 9px;
}
.btn.tiny{
  height:30px;
  font-size:11px;
  padding:0 8px;
}
.btn svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto;}
.btn.iconOnly{
  width:clamp(34px,4.8svh,40px);
  padding:0;
  flex:0 0 auto;
}
.btn.iconOnly.btn.tiny{
  width:30px;
}
.btn:hover{border-color:#2d4270;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 6px 18px rgba(0,0,0,.25);}
.btn:active{transform:translateY(1px) scale(.995);}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn.active,.btn[aria-pressed="true"]{
  border-color:#5ca3ff;
  box-shadow:0 0 0 1px rgba(92,163,255,.35) inset,0 6px 18px rgba(13,44,94,.35);
}
.btn.danger{
  border-color:#7c2f3c;
  background:linear-gradient(180deg,#5e2230,#331521);
}
.favoriteActionBtn{
  color:#b6c8e7;
}
.favoriteActionBtn.isFavorited,
.favoriteActionBtn[aria-pressed="true"]{
  color:#ff8daa;
  border-color:#ff8daa;
  box-shadow:0 0 0 1px rgba(255,141,170,.22) inset,0 8px 18px rgba(72,11,33,.3);
}
.favoriteActionBtn.isFavorited svg,
.favoriteActionBtn[aria-pressed="true"] svg{
  fill:currentColor;
}
.favoriteActionBtn[hidden]{
  display:none !important;
}
.crossfadeActionBtn{
  color:#b6c8e7;
}
.crossfadeActionBtn.isActive,
.crossfadeActionBtn[aria-pressed="true"]{
  color:#7ed8ff;
  border-color:#7ed8ff;
  box-shadow:0 0 0 1px rgba(126,216,255,.22) inset,0 8px 18px rgba(11,59,88,.3);
}
/* ---------- UP NEXT / RATING ---------- */
.queueMetaRow{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.06);
  padding-inline:2px;
  display:grid;
  gap:5px;
}
#upNext,#jamRating{line-height:1.3;}
#jamTogetherBtn{
  justify-content:flex-start;
}
#jamTogetherBtn[hidden]{
  display:none !important;
}
#jamTogetherBtn:disabled{
  opacity:.46;
  border-color:#223250;
  color:#7f93b4;
  box-shadow:none;
  cursor:not-allowed;
}
#skip:disabled,
#skipMin:disabled{
  opacity:.46;
  border-color:#223250;
  color:#7f93b4;
  background:linear-gradient(180deg,#17233a,#10192b);
  box-shadow:none;
  cursor:not-allowed;
}

.minDiscoverRow{
  display:none;
}

body:not(.player-mode-min) .timeRow{
  display:none;
}
body:not(.player-mode-min) .middle{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  grid-template-areas:
    "meta meta"
    "progress progress"
    "jam skip"
    "preset play"
    "queue queue";
  gap:9px 8px;
  flex:0 0 auto;
  min-height:0;
}
body:not(.player-mode-min) .artwrap{
  flex:1 1 auto;
  min-height:clamp(190px,30svh,280px);
}
body:not(.player-mode-min) .cardHeader{
  display:grid;
  grid-template-columns:minmax(0,max-content) auto;
  align-items:center;
  justify-content:space-between;
}
body:not(.player-mode-min) .playerHeaderActions{
  width:auto;
  flex-shrink:0;
}
body:not(.player-mode-min) .jamRatingTop{
  display:inline-flex !important;
  width:auto;
  max-width:100%;
  justify-self:start;
  white-space:nowrap;
}
body:not(.player-mode-min) .metaHeaderRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:end;
  padding-inline:2px;
  grid-area:meta;
}
body:not(.player-mode-min) .metaActionRow{
  display:flex;
  justify-content:end;
  align-items:center;
  gap:6px;
}
body:not(.player-mode-min) .progressWrap{
  grid-area:progress;
}
body:not(.player-mode-min) #tvModeBtnMin{
  display:flex !important;
  min-width:0;
  width:100%;
  height:30px;
  border-radius:10px;
}
body:not(.player-mode-min) #favoriteBtnMin,
body:not(.player-mode-min) #crossfadeBtnMin,
body:not(.player-mode-min) #shareBtnMin{
  display:flex !important;
  width:32px;
  height:32px;
  padding:0;
  border-radius:10px;
}
body:not(.player-mode-min) #favoriteBtnMin{
  order:1;
}
body:not(.player-mode-min) #shareBtnMin{
  order:2;
  margin-left:0;
}
body:not(.player-mode-min) #favoriteBtnMin[hidden],
body:not(.player-mode-min) #shareBtnMin[hidden],
body:not(.player-mode-min) #tvModeBtnMin[hidden]{
  display:none !important;
}
body:not(.player-mode-min) #favoriteBtnMin svg,
body:not(.player-mode-min) #crossfadeBtnMin svg,
body:not(.player-mode-min) #shareBtnMin svg,
body:not(.player-mode-min) #tvModeBtnMin svg{
  width:16px;
  height:16px;
}
body:not(.player-mode-min) #shareBtn,
body:not(.player-mode-min) #favoriteBtn,
body:not(.player-mode-min) .shareActionGroup{
  display:none !important;
}
body:not(.player-mode-min) .minDiscoverRow{
  display:none !important;
}
body:not(.player-mode-min) #skipMin{
  display:none !important;
}
body:not(.player-mode-min) .controls{
  display:contents;
}
body:not(.player-mode-min) #openJamChart{
  grid-area:jam;
}
body:not(.player-mode-min) #skip{
  display:flex !important;
  grid-area:skip;
}
body:not(.player-mode-min) #playPause{
  grid-area:play;
}
body:not(.player-mode-min) .experienceSection{
  grid-area:preset;
}
body:not(.player-mode-min) .queueMetaRow{
  grid-area:queue;
  margin-top:auto;
  padding-top:8px;
  border-top:1px solid rgba(104,130,175,.24);
  display:grid;
  gap:6px;
  padding-inline:2px;
}

.tvModeCanvas,
.tvModeVideo{
  position:fixed;
  inset:auto auto -200vh -200vw;
  width:1px;
  height:1px;
  opacity:.001;
  pointer-events:none;
  overflow:hidden;
}
.tvModeOverlay{
  background:rgba(4,9,19,.92);
}
.tvModeStage{
  width:min(100vw, 1420px);
  height:min(100vh, 920px);
  margin:auto;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:14px;
  padding:22px;
}
.tvModeStageHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.tvModeStageTitleWrap{
  display:grid;
  gap:4px;
}
.tvModeStageKicker{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#88a7d6;
  font-weight:700;
}
.tvModeStageTitle{
  font-size:18px;
  font-weight:700;
  color:#eff6ff;
}
.tvModeOverlay[aria-hidden="true"] .tvModeStage{
  display:none;
}
.tvModeOverlay .tvModeCanvas{
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  max-height:calc(100vh - 180px);
  opacity:1;
  pointer-events:auto;
  border-radius:24px;
  border:1px solid rgba(118,164,230,.22);
  box-shadow:0 30px 80px rgba(0,0,0,.42);
  overflow:hidden;
}
.tvModeStageHint{
  font-size:12px;
  color:#9fb4d6;
  line-height:1.45;
}
body:not(.player-mode-min) #jamRating{
  display:none !important;
}
body:not(.player-mode-min) #upNext{
  display:flex !important;
  align-items:baseline;
  gap:8px;
  width:100%;
  border:0;
  border-radius:0;
  background:transparent;
  color:#90abcf;
  line-height:1.15;
  padding:0;
}
body:not(.player-mode-min) #upNext:hover{
  border:0;
  color:#bad3f4;
}
body:not(.player-mode-min) #upNext .minMetaKicker{
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#7f9bc2;
  font-weight:600;
}
body:not(.player-mode-min) #upNext .minMetaValue{
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:11.5px;
  font-weight:600;
  color:#c0d4f3;
}
body:not(.player-mode-min) #jamTogetherBtn{
  margin-top:0;
  margin-bottom:0;
  width:100%;
  justify-content:center;
}

body.player-mode-min .jamRatingTop{
  display:none;
}
body.player-mode-min .authTrigger.authReady{
  min-width:0;
  width:auto;
  max-width:160px;
  padding:0 10px 0 8px;
  justify-content:flex-start;
}
body.player-mode-min .authTriggerLabel{
  display:block;
}
body.player-mode-min .artwrap{
  min-height:clamp(170px,26svh,240px);
}
body.player-mode-min .titleRow{
  padding-top:4px;
}
body.player-mode-min .titleRow h2{
  font-size:clamp(18px,2.5svh,24px);
}
body.player-mode-min .middle{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:
    "meta"
    "controls"
    "queue";
  gap:12px;
}
body.player-mode-min .metaHeaderRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:start;
  grid-area:meta;
  padding-inline:2px;
}
body.player-mode-min .metaActionRow{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}
body.player-mode-min #favoriteBtnMin,
body.player-mode-min #crossfadeBtnMin,
body.player-mode-min #tvModeBtnMin,
body.player-mode-min #favoriteBtn,
body.player-mode-min #shareBtn,
body.player-mode-min #openJamChart,
body.player-mode-min #jamRating,
body.player-mode-min #upNext,
body.player-mode-min #skipMin,
body.player-mode-min #presetSelectMinWrap,
body.player-mode-min .experienceSection,
body.player-mode-min .progressWrap{
  display:none !important;
}
body.player-mode-min #shareBtnMin{
  display:flex !important;
  width:34px;
  height:34px;
  padding:0;
  border-radius:10px;
}
body.player-mode-min #shareBtnMin[hidden]{
  display:none !important;
}
body.player-mode-min .controls{
  grid-area:controls;
  grid-template-columns:repeat(2, minmax(0,1fr));
  grid-template-areas:"skip play";
  gap:8px;
  padding-inline:2px;
}
body.player-mode-min #skip{
  display:flex !important;
  grid-area:skip;
}
body.player-mode-min .shareActionGroup{
  display:none !important;
}
body.player-mode-min #playPause{
  grid-area:play;
}
body.player-mode-min .minDiscoverRow{
  display:none !important;
}
body.player-mode-min .queueMetaRow{
  grid-area:queue;
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid rgba(104,130,175,.18);
  display:grid;
  gap:0;
  padding-inline:2px;
}
body.player-mode-min #jamTogetherBtn{
  width:100%;
  justify-content:center;
}

.experienceSection{
  display:grid;
  gap:8px;
  padding-inline:2px;
}
.playerUtilityPanel{
  border:1px solid #213154;
  border-radius:14px;
  background:linear-gradient(180deg,#101a33,#0d162c);
  overflow:hidden;
}
.playerUtilitySummary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  padding:10px 12px;
  user-select:none;
}
.playerUtilitySummary::-webkit-details-marker{
  display:none;
}
.playerUtilitySummary::after{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid #93b4e6;
  border-bottom:2px solid #93b4e6;
  transform:rotate(45deg);
  margin-left:auto;
  transition:transform .18s ease;
}
.playerUtilityPanel[open] .playerUtilitySummary::after{
  transform:rotate(225deg);
}
.playerUtilityTitle{
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.02em;
  color:#e2edff;
}
.playerUtilityMeta{
  font-size:10.5px;
  color:#8fa6ca;
  white-space:nowrap;
  margin-right:6px;
}
.playerUtilityBody{
  display:grid;
  gap:8px;
  padding:0 10px 10px;
}
.sectionTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.experienceLaneHeader .profileSummary{
  color:#c5d8fb;
  font-weight:700;
}
.presetRow{
  display:grid;
  gap:6px;
}
.selectBtnWrap{
  position:relative;
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  height:clamp(34px,4.8svh,40px);
  border-radius:12px;
  font-weight:700;
  letter-spacing:.2px;
  background:linear-gradient(180deg,var(--btn-bg),#111a30);
  border:1px solid var(--btn-border);
  color:var(--text);
  transition:transform .05s ease,border-color .2s ease,box-shadow .2s ease;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.selectBtnWrap:hover{
  border-color:#2d4270;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 6px 18px rgba(0,0,0,.25);
}
.selectBtnWrap:focus-within{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.liveRadioEntryBtn{
  justify-content:flex-start;
  padding:0 12px;
  cursor:pointer;
}
.liveRadioEntryBtn .selectBtnContent{
  width:100%;
  justify-content:flex-start;
  gap:10px;
  margin:0;
}
.liveRadioEntryBtn .selectBtnIcon{
  color:#8db7ff;
}
.liveRadioEntryText{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.04;
  gap:2px;
}
.liveRadioEntryLabel{
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  color:#e9f2ff;
}
.liveRadioEntryMeta{
  max-width:100%;
  font-size:10px;
  font-weight:700;
  color:#95afd4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.liveRadioEntryBtn.isActive{
  border-color:#6fa7f7;
  background:linear-gradient(180deg,#173a6c,#132b4d);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 12px 24px rgba(8,18,38,.22);
}
.liveRadioEntryBtn.isLocked,
.liveRadioEntryBtn:disabled{
  cursor:default;
  opacity:.68;
  filter:saturate(.72);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 20px rgba(0,0,0,.18);
}
.liveRadioEntryBtn.isLocked:hover,
.liveRadioEntryBtn:disabled:hover{
  border-color:inherit;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 20px rgba(0,0,0,.18);
}
.liveRadioEntryBtn.isActive .liveRadioEntryMeta{
  color:#d6e6ff;
}
.selectBtnContent{
  max-width:100%;
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55ch;
  margin:0 auto;
}
.selectBtnIcon{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  flex:0 0 auto;
  pointer-events:none;
}
.selectBtnIcon svg{
  width:18px;
  height:18px;
  fill:currentColor;
  flex:0 0 auto;
}
.presetSelect{
  width:auto;
  min-width:0;
  max-width:100%;
  height:100%;
  border:0;
  border-radius:12px;
  background:transparent;
  color:inherit;
  font-size:13px;
  font-weight:700;
  letter-spacing:.2px;
  padding:0 0 0 0;
  text-align:left;
  text-align-last:left;
  appearance:none;
  cursor:pointer;
  outline:none;
  flex:0 1 auto;
}
.presetSelect option{
  color:#0f172a;
}
body.player-mode-min .selectBtnWrap{
  height:32px;
  border-radius:10px;
}
body.player-mode-min .selectBtnContent{
  gap:.45ch;
}
body.player-mode-min .selectBtnIcon{
  width:16px;
  height:16px;
}
body.player-mode-min .selectBtnIcon svg{
  width:16px;
  height:16px;
}
body.player-mode-min .presetSelect{
  border-radius:10px;
  font-size:11px;
}
.memoryRow{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.discoveryLaneRow{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.playerCategorySection{
  display:grid;
  gap:6px;
}
.discoveryLaneChip{
  min-height:28px;
  border-radius:999px;
  border:1px solid #29406d;
  background:#101b34;
  color:#d7e6ff;
  padding:0 10px;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
}
.discoveryLaneChip:hover{
  border-color:#4d76bc;
}
.discoveryLaneChip.isActive{
  background:linear-gradient(180deg,#21427e,#1a315d);
  border-color:#7db4ff;
  color:#f5f9ff;
  box-shadow:0 0 0 1px rgba(125,180,255,.18) inset;
}
.discoveryLaneChip.personalCategoryChip{
  background:linear-gradient(180deg,#1b2b4f,#142340);
  border-color:#4d76bc;
}
.discoveryLaneChip:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.personalCategoryCount{
  opacity:.78;
  font-weight:700;
}
.memoryChip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  border-radius:999px;
  border:1px solid #233353;
  background:#121f39;
  color:#cfe1ff;
  padding:0 8px;
  font-size:11px;
}
.memoryChip input{
  width:13px;
  height:13px;
  accent-color:#5ca3ff;
}
.smartStartHint{
  min-height:15px;
  color:#b7cbeb;
}
.quickFeedbackRow{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}
.quickCollectionSelect{
  height:30px;
  min-width:0;
  font-size:12px;
  padding:0 8px;
}

/* ---------- MODAL OVERLAY ---------- */
.overlay{
  position:fixed;inset:0;
  background:var(--overlay);
  display:none;align-items:center;justify-content:center;
  padding:calc(12px + env(safe-area-inset-top))
          calc(12px + env(safe-area-inset-right))
          calc(12px + env(safe-area-inset-bottom))
          calc(12px + env(safe-area-inset-left));
  z-index:9999;
  backdrop-filter:blur(6px);
}
.overlay[aria-hidden="false"]{display:flex;}

/* ---------- MODAL ---------- */
.modal{
  width:100%;
  max-width:min(700px, 94vw);
  max-height:86svh;
  overflow:auto;
  background:var(--panel);
  border:1px solid var(--border-2);
  border-radius:16px;
  padding:0;
  box-shadow:var(--shadow);
}
.profileModal{
  max-width:min(1180px, calc(100vw - 24px));
}
.modalHeader{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;
  background:var(--panel);
  border-bottom:1px solid var(--border-2);
}
.modalHeader h3{margin:0;font-weight:800;letter-spacing:.2px;}
.profileHeaderActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.modalBody{padding:16px;display:grid;gap:16px;}
.authModeRow{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
.authForm{
  display:grid;
  gap:10px;
}
.fieldLabel{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.2px;
}
.fieldInput{
  height:40px;
  border-radius:10px;
  border:1px solid var(--border-2);
  background:var(--panel);
  color:var(--text);
  padding:0 10px;
  font-size:16px;
  -webkit-text-size-adjust:100%;
}
.fieldInput:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.profileBody{
  gap:14px;
}
#profileOverlay[data-admin-tab="playlist"] .profileModal{
  width:min(1180px, calc(100vw - 16px));
  height:calc(100svh - 16px);
  max-height:calc(100svh - 16px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#profileOverlay[data-admin-tab="playlist"] .modalHeader{
  flex:0 0 auto;
  align-items:flex-start;
  gap:12px;
  padding:10px 14px;
}
#profileOverlay[data-admin-tab="playlist"] .modalHeader h3{
  flex:0 0 auto;
  margin-top:6px;
  font-size:16px;
  line-height:1.15;
}
#profileOverlay[data-admin-tab="playlist"] .profileHeaderActions{
  flex:1 1 auto;
  min-width:0;
}
#profileOverlay[data-admin-tab="playlist"] .adminHeaderTabs{
  flex:1 1 720px;
  min-width:0;
  gap:6px;
}
#profileOverlay[data-admin-tab="playlist"] .adminHeaderTabs .adminTabBtn{
  min-width:64px;
  height:32px;
  padding:0 8px;
  font-size:11px;
}
#profileOverlay[data-admin-tab="playlist"] .profileBody{
  flex:1 1 auto;
  min-height:0;
  padding:12px;
  gap:0;
  overflow:hidden;
}
#profileOverlay[data-admin-tab="playlist"] #adminJamSection,
#profileOverlay[data-admin-tab="playlist"] #adminTabPlaylistPanel{
  height:100%;
  min-height:0;
  overflow:hidden;
}
#profileOverlay[data-admin-tab="metadata"] .profileBody > *,
#profileOverlay[data-admin-tab="tags"] .profileBody > *,
#profileOverlay[data-admin-tab="ratings"] .profileBody > *,
#profileOverlay[data-admin-tab="playlist"] .profileBody > *,
#profileOverlay[data-admin-tab="programming"] .profileBody > *,
#profileOverlay[data-admin-tab="backups"] .profileBody > *{
  display:none !important;
}
#profileOverlay[data-admin-tab="metadata"] .profileBody > #adminJamSection,
#profileOverlay[data-admin-tab="tags"] .profileBody > #adminJamSection,
#profileOverlay[data-admin-tab="ratings"] .profileBody > #adminJamSection,
#profileOverlay[data-admin-tab="playlist"] .profileBody > #adminJamSection,
#profileOverlay[data-admin-tab="programming"] .profileBody > #adminJamSection,
#profileOverlay[data-admin-tab="backups"] .profileBody > #adminJamSection{
  display:block !important;
}
#profileOverlay[data-admin-tab="metadata"] #adminJamSection > .sectionTitle,
#profileOverlay[data-admin-tab="tags"] #adminJamSection > .sectionTitle,
#profileOverlay[data-admin-tab="ratings"] #adminJamSection > .sectionTitle,
#profileOverlay[data-admin-tab="playlist"] #adminJamSection > .sectionTitle,
#profileOverlay[data-admin-tab="programming"] #adminJamSection > .sectionTitle,
#profileOverlay[data-admin-tab="backups"] #adminJamSection > .sectionTitle{
  display:none;
}
.profileAvatarRow{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:center;
}
.profileAvatarBox{
  width:58px;
  height:58px;
  border-radius:999px;
  border:1px solid var(--border-2);
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--panel);
}
.profileAvatarImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}
.profileAvatarFallback{
  font-size:21px;
  font-weight:800;
  color:#dce8ff;
}
.profileAvatarActions{
  display:grid;
  gap:6px;
}
#avatarFileInput{
  display:none;
}
.profileSummary{
  font-size:13px;
  color:var(--muted);
}
.profileKpis{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
}
.kpiCard{
  border:1px solid var(--border-2);
  border-radius:10px;
  background:var(--panel);
  padding:8px 10px;
}
.kpiLabel{
  font-size:11.5px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.2px;
}
.kpiValue{
  margin-top:3px;
  font-size:18px;
  font-weight:800;
  color:#dbe7ff;
}
.profileSection{
  display:grid;
  gap:8px;
}

.roomSection{
  margin-top:6px;
}
.profileActionsRow{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.profileCollectionCreateRow{
  gap:8px;
  flex-wrap:wrap;
}
.profileCollectionCreateRow .fieldInput{
  height:34px;
  max-width:280px;
  min-width:170px;
}
.profileList{
  border:1px solid var(--border-2);
  border-radius:10px;
  background:var(--panel);
  max-height:220px;
  overflow:auto;
}
.profileListRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-bottom:1px solid #1a2a49;
  font-size:12.5px;
}
.profileListRow:last-child{border-bottom:0;}
.profileListTitle{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:600;
}
.profileListMeta{
  font-size:11.5px;
  color:var(--muted);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profileListCount{
  font-weight:800;
  color:#dbe7ff;
}
.profileListEmpty{
  padding:10px;
  color:var(--muted);
  font-size:12px;
}
.collectionListRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-bottom:1px solid #1a2a49;
}
.collectionListRow:last-child{border-bottom:0;}
.collectionListMeta{
  font-size:11.5px;
  color:var(--muted);
}
.collectionActionBtn{
  height:26px;
  padding:0 8px;
  font-size:11px;
}
.collectionActionBtn.isDanger{
  border-color:#5e3750;
  color:#ffd8e0;
}
.collectionReason{
  font-size:11px;
  color:#9db3d8;
  margin-top:3px;
}
.socialRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-bottom:1px solid #1a2a49;
}
.socialRow:last-child{border-bottom:0;}
.socialMetaStack{
  min-width:0;
  display:grid;
  gap:3px;
}
.socialMetrics{
  font-size:11px;
  color:var(--muted);
  white-space:normal;
}
.socialActionBtn{
  height:28px;
  padding:0 10px;
  font-size:11px;
}
.socialBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid #284370;
  background:#101c35;
  color:#dce9ff;
  font-size:11px;
  font-weight:800;
}
.notesEditorGrid{
  display:grid;
  gap:8px;
}
.noteTextarea{
  min-height:72px;
  height:auto;
  resize:vertical;
  padding:10px 12px;
  line-height:1.35;
}
.recentNoteRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-bottom:1px solid #1a2a49;
}
.recentNoteRow:last-child{border-bottom:0;}
.recentNoteText{
  font-size:11px;
  color:#9db3d8;
  white-space:normal;
}
.bookmarkRow{
  align-items:start;
}
.layoutPresetGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
}
.layoutPresetCard{
  border:1px solid var(--border-2);
  border-radius:12px;
  background:#0f1a31;
  padding:10px;
  display:grid;
  gap:8px;
}
.layoutToggle{
  justify-content:flex-start;
  min-height:32px;
  padding:0 10px;
}
.yearPieWrap{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:12px;
  align-items:start;
}
.yearPieChart{
  width:120px;
  height:120px;
  border-radius:999px;
  border:1px solid var(--border-2);
  background:conic-gradient(#1f355f 0% 100%);
}
.yearPieLegend{
  display:grid;
  gap:6px;
}
.yearPieLegendRow{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  font-size:12px;
}
.yearDot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
}
.yearLegendYear{font-weight:700;}
.yearLegendCount{color:var(--muted);}

.jamTools{
  display:grid;
  grid-template-columns:minmax(240px,1fr) auto;
  gap:10px;
  align-items:start;
}
.jamTools input[type="search"],
.jamTools select{
  height:38px;
  border-radius:10px;
  border:1px solid var(--border-2);
  background:var(--panel);
  color:var(--text);
  padding:0 10px;
  font-size:16px;
  -webkit-text-size-adjust:100%;
}
.jamFiltersDisclosure{
  display:grid;
  gap:8px;
}
.jamFiltersSummary{
  list-style:none;
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55ch;
  width:max-content;
  max-width:100%;
  height:38px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid var(--btn-border);
  background:linear-gradient(180deg,var(--btn-bg),#111a30);
  color:var(--text);
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  user-select:none;
  transition:transform .05s ease,border-color .2s ease,box-shadow .2s ease;
}
.jamFiltersSummary::-webkit-details-marker{
  display:none;
}
.jamFiltersSummary::after{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-left:4px;
  margin-top:-3px;
  transition:transform .18s ease, margin-top .18s ease;
}
.jamFiltersDisclosure[open] .jamFiltersSummary::after{
  transform:rotate(225deg);
  margin-top:3px;
}
.jamFiltersSummary:hover{
  border-color:#2d4270;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 6px 18px rgba(0,0,0,.25);
}
.jamFiltersSummary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.jamFiltersBody{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
  align-items:end;
}
.jamFilterField{
  display:grid;
  gap:6px;
  min-width:0;
}
.jamFilterField label{
  font-size:12px;
  color:var(--muted);
}
.jamFilterField select{
  width:100%;
}
.jamRangeField{
  min-width:0;
}
.jamSearchSummary{
  font-size:12px;
  color:var(--muted);
  margin:0 0 6px;
}
.jamRange{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
}
.jamRange label{
  font-size:12px;
  color:var(--muted);
}
.jamRange input[type="range"]{width:100%;}
.jamRange span{
  font-size:12px;
  color:var(--text);
  min-width:30px;
  text-align:right;
}
.jamToggle{
  min-height:38px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--border-2);
  background:var(--panel);
  color:var(--text);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.jamToggle input{
  margin:0;
  accent-color:var(--accent);
}
.jamToggle input:disabled + span{
  opacity:.65;
}
.adminTabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:0;
}
.profileTabs{
  margin-top:2px;
}
.profileTabs .adminTabBtn{
  min-width:88px;
}
.adminHeaderTabs{
  align-items:center;
}
.adminHeaderTabs .adminTabBtn{
  min-width:72px;
}
.transitionModeTabs .adminTabBtn{
  min-width:150px;
}
.adminTabBtn{
  min-width:72px;
}
.adminTabBtn.isActive{
  border-color:#3f64a1;
  background:linear-gradient(180deg,#1a3d6a,#16365f);
  color:#e8f1ff;
}
.adminTabPanel[hidden]{
  display:none !important;
}
.adminMetaTools{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.adminMetaList{
  display:grid;
  gap:10px;
}
.adminMetaTrack{
  border:1px solid #24365a;
  border-radius:12px;
  padding:10px;
  background:#0e172c;
}
.adminMetaHeading{
  display:grid;
  gap:2px;
  margin-bottom:8px;
}
.adminMetaTitle{
  font-size:14px;
  font-weight:700;
  color:var(--text);
}
.adminMetaPath{
  font-size:11.5px;
  color:var(--muted);
  word-break:break-word;
}
.adminMetaUnsupported{
  font-size:12px;
  color:#f0c79b;
}
.adminMetaActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.adminMetaUploadInput{
  display:none;
}
.adminMetaDirState{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}
.adminMetaImageGrid{
  margin-top:8px;
  display:grid;
  gap:6px;
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.adminMetaImageCard{
  border:1px solid #273a62;
  border-radius:10px;
  padding:4px;
  background:#0f1b34;
  display:grid;
  gap:4px;
}
.adminMetaImageThumb{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:6px;
  border:1px solid #2b4675;
  background:#0a1222;
}
.adminMetaImageName{
  font-size:10px;
  color:#c6d9ff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.adminMetaImageCard .rowBtn{
  height:22px;
  font-size:10px;
  padding:0 5px;
}
.adminTagsBulkTools{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:8px 0 6px;
}
.adminTagsCreateTools{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  margin:8px 0 6px;
}
.adminTagsBulkTools .profileSummary{
  margin:0;
}
.adminPlaylistGrid{
  display:grid;
  grid-template-columns:minmax(240px, 360px) minmax(0, 1fr);
  gap:12px;
  align-items:start;
}
.adminStationsGrid{
  display:grid;
  grid-template-columns:minmax(150px, .72fr) minmax(210px, 1fr) minmax(260px, 1.18fr);
  gap:10px;
  align-items:stretch;
  height:100%;
  min-height:0;
  overflow:hidden;
}
.adminProgrammingGrid{
  display:grid;
  grid-template-columns:minmax(260px, 420px) minmax(0, 1fr);
  gap:12px;
  align-items:start;
}
.adminBackupGrid{
  display:grid;
  grid-template-columns:minmax(260px, 420px) minmax(0, 1fr);
  gap:12px;
  align-items:start;
}
.adminPlaylistCard{
  border:1px solid #24365a;
  border-radius:12px;
  padding:10px;
  background:#0e172c;
  min-width:0;
}
.adminStationsPane,
.adminStationLibraryPane,
.adminStationEditorPane{
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:8px;
}
.adminStationsList{
  display:grid;
  gap:6px;
  margin-top:8px;
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow:auto;
  align-content:start;
}
.adminStationListRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:6px;
  align-items:center;
  border:1px solid #24365a;
  border-radius:10px;
  background:#101b32;
  padding:6px;
}
.adminStationListRow.isActive{
  border-color:#4f85ff;
  background:linear-gradient(180deg,#17345f,#11213d);
}
.adminStationSelectBtn{
  min-width:0;
  border:0;
  padding:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  display:grid;
  gap:2px;
}
.adminStationName{
  font-size:12px;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.adminStationMeta{
  font-size:10px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.adminStationSettings{
  display:grid;
  grid-template-columns:92px minmax(0, 1fr);
  gap:6px 8px;
  align-items:center;
  margin:6px 0 8px;
}
.adminStationSettings .profileSummary{
  grid-column:1 / -1;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.adminStationPlaylistHeading{
  margin-top:8px;
}
.adminPlaylistSearchRow,
.adminPlaylistActions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin:6px 0;
}
.adminPlaylistSearchRow .fieldInput{
  flex:1 1 180px;
  min-width:0;
}
.adminPlaylistResults,
.adminPlaylistRows,
.adminBackupsList{
  display:grid;
  gap:6px;
  max-height:52vh;
  overflow:auto;
  align-content:start;
}
.adminStationLibraryPane > .adminPlaylistResults{
  flex:0 1 118px;
  min-height:46px;
  max-height:118px;
}
.adminStationEditorPane .adminPlaylistRows{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
}
.adminPlaylistBrowse{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
  overflow:hidden;
}
.adminPlaylistBrowseButtons{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
#adminPlaylistBrowseResults{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
}
.adminPlaylistBrowseBtn{
  border:1px solid var(--btn-border);
  border-radius:999px;
  background:#111d34;
  color:var(--text);
  min-height:28px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.adminPlaylistBrowseBtn span{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}
.adminPlaylistBrowseBtn.isActive{
  border-color:#4f85ff;
  background:#17345f;
}
.adminPlaylistResult,
.adminPlaylistRow,
.adminBackupRow{
  border:1px solid #24365a;
  border-radius:10px;
  background:#101b32;
  padding:7px;
  min-width:0;
}
.adminBackupRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
  align-items:start;
}
.adminBackupMeta{
  display:grid;
  gap:4px;
  min-width:0;
}
.adminBackupPhrase{
  display:inline-block;
  max-width:100%;
  overflow-wrap:anywhere;
  color:#ffd166;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
}
.adminBackupActions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.adminPlaylistResult{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
  align-items:center;
}
.adminPlaylistRow{
  display:grid;
  grid-template-columns:88px minmax(0, 1fr);
  gap:8px;
  align-items:start;
}
.adminPlaylistRow.isAutoMode{
  grid-template-columns:minmax(0, 1fr);
}
.adminPlaylistModeBadge{
  display:none;
}
.adminPlaylistRow.isDragOver{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}
.adminPlaylistTitle{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.adminPlaylistMeta{
  font-size:11px;
  color:var(--muted);
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.adminPlaylistTrackInfo,
.adminPlaylistDetails{
  min-width:0;
  display:grid;
  gap:4px;
}
.adminPlaylistTrackHeader{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 30px;
  gap:8px;
  align-items:start;
}
.adminPlaylistDetailLine{
  min-width:0;
  display:block;
  font-size:11.5px;
  line-height:1.45;
}
.adminPlaylistDetailLabel{
  color:#7f95b7;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-right:6px;
}
.adminPlaylistDetailValue{
  color:var(--muted);
  min-width:0;
  overflow-wrap:break-word;
  word-break:normal;
}
.adminPlaylistControls{
  display:grid;
  grid-template-columns:28px 52px;
  gap:6px;
  align-items:center;
}
.adminPlaylistPositionInput{
  width:52px;
  height:30px;
  border-radius:7px;
  border:1px solid var(--border-2);
  background:#0f1a31;
  color:var(--text);
  text-align:right;
  padding:0 7px;
}
.adminPlaylistDragBtn{
  width:28px;
  height:28px;
  padding:0;
  cursor:grab;
}
.adminPlaylistRemoveBtn{
  width:28px;
  height:28px;
  min-width:28px;
  border-radius:999px;
  border:1px solid #7c2f3c;
  background:linear-gradient(180deg,#5e2230,#331521);
  color:var(--text);
  font-size:13px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}
.adminPlaylistEmpty{
  border:1px dashed #29436e;
  border-radius:10px;
  color:var(--muted);
  padding:10px;
  text-align:center;
}
.adminPlaylistDirty{
  color:#ffd166;
}
.adminProgrammingTextarea{
  width:100%;
  min-height:54vh;
  height:54vh;
  padding:10px;
  line-height:1.35;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px;
  resize:vertical;
  white-space:pre;
  overflow:auto;
}
@media (max-width:760px){
  .adminPlaylistGrid,
  .adminStationsGrid,
  .adminProgrammingGrid,
  .adminBackupGrid{
    grid-template-columns:1fr;
  }
  .adminPlaylistRow{
    grid-template-columns:1fr;
  }
  .adminBackupRow{
    grid-template-columns:1fr;
  }
  .adminPlaylistControls{
    grid-template-columns:30px 58px;
  }
}
.adminTagHeaders,
.adminTagRow{
  grid-template-columns:minmax(28px,40px) minmax(0,1fr) minmax(92px,10ch) minmax(220px,1.25fr);
}
.adminTagRow{
  cursor:default;
}
.adminTagRow:hover{
  background:#0e1629;
}
.adminTagRow.isDirty{
  background:linear-gradient(90deg, rgba(79,133,255,.12), rgba(79,133,255,0));
}
.adminTagRow > :nth-child(4){
  overflow:visible;
  white-space:normal;
}
.adminTagFlags{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.adminTagOption{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#cfe2ff;
  white-space:nowrap;
}
.adminTagOption input{
  width:14px;
  height:14px;
  accent-color:#5ca3ff;
}

/* ---------- JAM CHART ---------- */
.top5{
  border:1px solid var(--border-2);
  border-radius:12px;
  padding:10px;
  background:var(--panel-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
#jamChartOverlay .modalBody{
  gap:10px;
}
#jamChartOverlay .sectionTitle{
  margin:2px 0 4px;
}
.sectionTitle{font-weight:800;margin:6px 0 8px;letter-spacing:.3px;}
.headers,.songRow{
  display:grid;
  grid-template-columns:minmax(28px,40px) minmax(0,1fr) minmax(92px,10ch) minmax(64px,7ch);
  gap:10px;align-items:center;
}
.headers.headers-actions,
.songRow.songRow-actions{
  grid-template-columns:minmax(28px,40px) minmax(0,1fr) minmax(92px,10ch) minmax(64px,7ch) minmax(196px,auto);
}
.headers{
  font-size:11.5px;color:var(--muted);
  padding:6px 0;border-bottom:1px solid var(--border);
  text-transform:uppercase;letter-spacing:.15px;
}
.headers.headers-actions > :nth-child(5){justify-self:end;}
.songRow{
  padding:9px 0;border-bottom:1px solid #15233f;
  cursor:pointer;font-size:13.2px;
  transition:background .15s ease;
}
.songRow .rowActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  white-space:nowrap;
}
.headers.headers-actions-inlineMetric{
  grid-template-columns:minmax(28px,40px) minmax(0,1fr) minmax(92px,10ch) minmax(148px,auto);
}
.headers.headers-actions-inlineMetric > :nth-child(4){
  display:none;
}
.songRow.songRow-actions-inlineMetric{
  grid-template-columns:minmax(28px,40px) minmax(0,1fr) minmax(92px,10ch) minmax(148px,auto);
}
.songRow.songRow-actions-inlineMetric > :nth-child(4){
  display:none;
}
.songRow.songRow-actions-inlineMetric > :nth-child(5){
  grid-column:4;
  justify-self:end;
  overflow:visible;
}
.songRow .rowActionsStacked{
  display:grid;
  grid-template-columns:repeat(2, minmax(58px, auto));
  gap:6px;
  justify-items:end;
}
.songRow .rowActionsStacked .rowBtn{
  width:100%;
}
.songRow .rowActionsStacked .rowBtnSecondary{
  grid-column:1;
}
.songRow .rowMetricInline{
  min-width:58px;
  min-height:26px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0 6px;
  border-radius:6px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}
.songRow .rowActionsRoom{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}
.songRow .rowBtn{
  height:26px;
  font-size:11px;
  border:1px solid var(--btn-border);
  background:linear-gradient(180deg,#173055,#142847);
  color:var(--text);
  border-radius:6px;
  padding:0 8px;
  font-weight:700;
  min-width:56px;
  text-align:center;
}
.songRow:hover{background:#0e1831;}
.songRow>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.songRow > :nth-child(2){font-weight:600;}
.songRow > :nth-child(3){color:var(--muted);justify-self:end;}
.songRow > :nth-child(4){justify-self:end;}
.songRow.songRow-actions > :nth-child(5){justify-self:end;overflow:visible;}
.adminJamRow{
  cursor:default;
}
.adminJamRow:hover{
  background:#0e1629;
}
.adminJamRatingWrap{
  display:flex;
  justify-content:flex-end;
}
.adminJamRatingInput{
  width:74px;
  height:32px;
  border-radius:7px;
  border:1px solid var(--border-2);
  background:#0f1a31;
  color:var(--text);
  font-size:16px;
  -webkit-text-size-adjust:100%;
  text-align:right;
  padding:0 8px;
}
.adminJamRatingInput:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.adminJamRow.isDirty{
  background:linear-gradient(90deg, rgba(79,133,255,.12), rgba(79,133,255,0));
}
.adminJamSaveBtn[disabled]{
  opacity:.55;
  cursor:not-allowed;
}
.rankBadge{
  display:inline-grid;place-items:center;
  width:28px;height:28px;border-radius:999px;
  background:var(--accent-3);color:#cfe1ff;
  font-weight:800;font-size:12px;
}

/* ---------- YEAR ACCORDIONS ---------- */
.yearBlock{
  border:1px solid var(--border);
  border-radius:12px;
  background:#0f172a;
  margin:6px 0;overflow:hidden;
}
.yearBlock>summary{
  list-style:none;cursor:pointer;
  padding:10px 12px;display:flex;align-items:center;
  border-bottom:1px solid #172342;
  background:linear-gradient(180deg,#0f1a34,#0e172d);
}
.yearBlock>summary::-webkit-details-marker{display:none;}
.yearBlock>summary strong{font-size:15px;}
.yearBlock .yearMeta{color:var(--muted);font-size:12.5px;margin-left:10px;}
.yearBlock .accordionBody{padding:10px 12px;background:#0e1629;}
.yearBlock[open]>summary{background:linear-gradient(180deg,#0f203f,#0e1b34);border-bottom-color:#1b2d55;}
.top5Block{
  margin:4px 0;
}
.top5Block>summary{
  justify-content:space-between;
  gap:10px;
}
.top5Block>summary::after{
  content:"";
  width:10px;
  height:10px;
  flex:0 0 auto;
  margin-left:auto;
  border-right:2px solid #92b4ea;
  border-bottom:2px solid #92b4ea;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .16s ease,border-color .16s ease;
  opacity:.9;
}
.top5Block[open]>summary::after{
  transform:rotate(225deg) translateY(-1px);
}
.top5Block>summary:hover::after{
  border-color:#c4dbff;
}
.top5Block .accordionBody{
  padding:8px 12px 10px;
}
.top5Block .top5{
  margin:0;
}

/* ---------- COMPACT MODE ---------- */
.compact .titleRow h2{font-size:clamp(16px,2svh,18px);}
.compact .btn{height:32px;}

/* ---------- QUEUE DRAWER ---------- */
.queueModal{
  max-width:min(560px, 94vw);
}
.queueBody{
  gap:10px;
}
.queueList{
  border:1px solid var(--border-2);
  border-radius:12px;
  background:#0d162c;
  overflow:auto;
  max-height:62svh;
  overscroll-behavior:contain;
}
.queueRow{
  width:100%;
  border:0;
  border-bottom:1px solid #1a2a4a;
  background:transparent;
  color:var(--text);
  padding:8px 10px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  cursor:pointer;
}
.queueList,
.queueRow,
.queueText,
.queueActionBtn,
.queueDragHandle{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.queueRow:last-child{border-bottom:0;}
.queueRow:hover{background:#122040;}
.queueRow:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}
.queueThumb{
  width:42px;
  height:42px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid #2a3d63;
  background:#0b1324;
}
.queueText{min-width:0;text-align:left;}
.queueTitle{
  font-size:12.8px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.queueSub{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.queueAction{
  font-size:11px;
  color:#c8dcff;
}
.queueEditableRow{
  cursor:default;
  align-items:start;
  grid-template-columns:42px minmax(0,1fr) auto;
  grid-template-areas:
    "thumb text handle"
    "thumb actions handle";
  row-gap:6px;
}
.queueEditableRow .queueThumb{grid-area:thumb;}
.queueEditableRow .queueText{
  cursor:pointer;
  grid-area:text;
}
.queueText.queueTextStatic{
  cursor:default;
}
.queueDragHandle{
  grid-area:handle;
  align-self:center;
  justify-self:end;
  width:28px;
  min-width:28px;
  height:44px;
  border:0;
  background:transparent;
  color:#90a8cd;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:grab;
  touch-action:none;
}
.queueDragHandle:active{
  cursor:grabbing;
}
.queueDragHandle svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.queueDragSpacer{
  grid-area:handle;
  width:28px;
  min-width:28px;
}
.queueActionGroup{
  grid-area:actions;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-self:start;
}
.queueActionGroupStatic{
  justify-content:flex-end;
}
.queueMetaPill{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid #335f9e;
  background:#12274a;
  color:#dce8ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.queueMetaPillPrimary{
  border-color:#4b7ac0;
  background:#18355c;
  color:#eef5ff;
}
.queueActionBtn{
  min-width:52px;
  height:26px;
  border-radius:999px;
  border:1px solid #29406d;
  background:#11213d;
  color:#d8e6ff;
  font-size:10px;
  font-weight:800;
  padding:0 10px;
  cursor:pointer;
}
.queueActionBtn:disabled{
  opacity:.55;
  cursor:default;
}
.queueActionBtnPrimary{
  border-color:#4e7fce;
  background:#17305a;
}
.queueActionBtn:hover{
  border-color:#5c8ed8;
}
.queueActionBtn.isDanger{
  border-color:#5e3750;
  color:#ffd8e0;
}
.queueDragPlaceholder{
  border:1px dashed #4e7fce;
  border-radius:12px;
  background:rgba(23,48,90,.18);
  min-height:64px;
}
.queueRow.isDragging{
  border:1px solid #4e7fce;
  border-radius:12px;
  background:#0f1d37;
  box-shadow:0 18px 44px rgba(0,0,0,.38), 0 0 0 1px rgba(112,156,228,.24);
  opacity:.98;
}
body.queueDragActive .queueOverlay,
body.queueDragActive .queueList{
  cursor:grabbing;
}
body.queueDragActive{
  overflow:hidden;
  overscroll-behavior:none;
}
body.queueDragActive .queueOverlay,
body.queueDragActive .queueList,
body.queueDragActive .queueDragHandle{
  touch-action:none;
}
.jamTogetherRow{
  grid-template-columns:minmax(0,1fr) auto;
}
.jamTogetherRow .queueSub{
  white-space:normal;
}
.roomRow{
  grid-template-columns:minmax(0,1fr) auto;
}
.roomRow .queueText{
  display:grid;
  gap:3px;
}
.roomMeta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  font-size:11px;
  color:var(--muted);
}
.roomStatusDot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#445a86;
  display:inline-block;
}
.roomStatusDot.live{
  background:#57d68d;
  box-shadow:0 0 0 4px rgba(87,214,141,.14);
}
.roomActions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.roomActionBtn{
  min-width:72px;
}
.roomQueueActionBtn{
  min-width:84px;
}
.roomQueuePicker{
  display:grid;
  gap:10px;
  margin-top:8px;
}
.roomRowCard{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
}
.roomDetailStack{
  grid-column:1 / -1;
  display:grid;
  gap:8px;
  padding-top:4px;
}
.roomControlRow{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.roomMiniActionBtn{
  min-width:0;
  height:26px;
  padding:0 8px;
  font-size:10.5px;
}
.roomMiniActionBtn.isActive{
  border-color:#5ea0ff;
  color:#eef5ff;
  background:rgba(50,110,210,.28);
}
.roomQueueActionStack{
  align-items:flex-start;
  justify-content:flex-end;
  gap:4px;
  flex-wrap:wrap;
}
.roomChipList{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.roomChip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid #284370;
  background:#0f1d36;
  color:#dce9ff;
  font-size:11px;
  font-weight:700;
}
.roomChip.isHost{
  border-color:#476ca4;
}
.roomChipBadge{
  color:#9cc0ff;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.roomChipKick{
  border:0;
  background:transparent;
  color:#ffcad5;
  font-size:14px;
  line-height:1;
  padding:0;
  cursor:pointer;
}
.roomReactionFeed{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.roomQueueFeed{
  display:grid;
  gap:8px;
}
.roomQueueFeedMuted{
  font-size:11px;
  color:var(--muted);
}
.roomQueueItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(61, 98, 158, 0.34);
  border-radius:14px;
  background:rgba(10, 22, 48, 0.68);
}
.roomQueueMetaStack{
  min-width:0;
  display:grid;
  gap:2px;
}
.roomQueueTitle{
  color:#eef5ff;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
}
.roomQueueMeta{
  color:#91a8cb;
  font-size:10.5px;
  font-weight:600;
  line-height:1.2;
}
.roomReactionFeedMuted{
  font-size:11px;
  color:var(--muted);
}
.roomReactionChip{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid #21375f;
  background:#0c1730;
  color:#cfe1ff;
  font-size:10.5px;
  font-weight:700;
}

/* ---------- SHARE PREVIEW ---------- */
.sharePreviewModal{
  max-width:min(520px, 94vw);
}
.sharePreviewBody{
  gap:12px;
}
.sharePreviewCard{
  border:1px solid var(--border-2);
  border-radius:14px;
  background:linear-gradient(160deg,#0f1c35,#0f1a30);
  padding:10px;
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:10px;
}
.sharePreviewArtwork{
  width:96px;
  height:96px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid #2d436d;
  background:#0a1324;
}
.sharePreviewMeta{
  min-width:0;
  display:grid;
  gap:4px;
  align-content:start;
}
.sharePreviewTitle{
  font-size:15px;
  font-weight:800;
  line-height:1.14;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sharePreviewTitle.titleFit-tight{font-size:14px;}
.sharePreviewTitle.titleFit-very-tight{font-size:13px;}
.sharePreviewTitle.titleFit-ultra{font-size:12px;line-height:1.2;}
.sharePreviewArtist{
  font-size:12.5px;
  color:#c5d8fc;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sharePreviewProgressWrap{display:grid;gap:6px;margin-top:6px;}
.sharePreviewProgressTrack{
  height:8px;
  border-radius:999px;
  border:1px solid #27406a;
  background:#122547;
  overflow:hidden;
}
.sharePreviewProgress{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.sharePreviewTimes{
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:11px;
}
.shareModeRow,
.shareActionsRow{
  display:grid;
  gap:8px;
}
.shareModeRow{grid-template-columns:repeat(2, minmax(0,1fr));}
.shareActionsRow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}

/* ---------- LISTEN RATING PROMPT ---------- */
.trackRatingPrompt{
  position:fixed;
  left:50%;
  bottom:calc(14px + env(safe-area-inset-bottom));
  width:min(560px, calc(100vw - 24px));
  transform:translate(-50%, 10px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:11950;
}
.trackRatingPrompt.show{
  opacity:1;
  transform:translate(-50%, 0);
  pointer-events:auto;
}
.trackRatingPromptCard{
  border:1px solid #2c4470;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(14,28,54,.98), rgba(10,19,39,.98));
  box-shadow:0 12px 30px rgba(0,0,0,.38);
  padding:10px 12px;
  display:grid;
  gap:8px;
  backdrop-filter:blur(5px);
}
.trackRatingPromptTitle{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#90abd0;
  font-weight:700;
}
.trackRatingPromptTrack{
  font-size:14px;
  line-height:1.2;
  color:#e4eeff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:700;
}
.trackRatingPromptActions{
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
}
.trackRatingPromptCurrent{
  font-size:12px;
  color:#b9cdea;
}
.trackRatingPromptCurrent strong{
  color:#f0f6ff;
  font-weight:800;
}
.trackRatingPromptInput{
  flex:1;
  min-width:0;
  height:30px;
  border-radius:9px;
  border:1px solid #35548a;
  background:#0f1f3a;
  color:#e6efff;
  font-size:12px;
  font-weight:700;
  padding:0 10px;
}
.trackRatingPromptInput:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.trackRatingPromptSave,
.trackRatingPromptLater{
  appearance:none;
  border:1px solid #35548a;
  border-radius:9px;
  background:linear-gradient(180deg, #15284b, #101e37);
  color:#e6efff;
  font-weight:700;
  height:30px;
  min-width:66px;
  padding:0 11px;
  font-size:12px;
  line-height:1;
  cursor:pointer;
}
.trackRatingPromptSave:hover,
.trackRatingPromptLater:hover{
  border-color:#5a84c5;
}
.trackRatingPromptSave:focus-visible,
.trackRatingPromptLater:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.trackRatingPromptLater{
  color:#b8cae7;
  min-width:58px;
}
.trackRatingPromptHint{
  font-size:11px;
  color:#8ea8cd;
}
.trackRatingPromptSave:disabled{
  opacity:.5;
  pointer-events:none;
}
.trackRatingPrompt.isBusy .trackRatingPromptSave,
.trackRatingPrompt.isBusy .trackRatingPromptLater{
  opacity:.5;
  pointer-events:none;
}

/* ---------- TOASTS ---------- */
.toastStack{
  position:fixed;
  right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:12000;
  display:grid;
  gap:8px;
  width:min(340px, calc(100vw - 28px));
  pointer-events:none;
}
.toast{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease;
  border-radius:10px;
  padding:10px 12px;
  border:1px solid #2f4e81;
  background:#0e1a33;
  color:#dbe7ff;
  box-shadow:0 8px 20px rgba(0,0,0,.32);
  font-size:13px;
  line-height:1.3;
}
.toast.show{opacity:1;transform:translateY(0);}
.toast-info{border-color:#2f4e81;background:#0e1a33;color:#dbe7ff;}
.toast-error{border-color:#7a2f44;background:#281117;color:#ffdce2;}

/* ---------- SCROLLBARS ---------- */
.modal ::-webkit-scrollbar{width:10px;height:10px;}
.modal ::-webkit-scrollbar-thumb{background:#1e2d50;border-radius:999px;border:2px solid #0f172a;}
.modal ::-webkit-scrollbar-track{background:transparent;}

/* ---------- SMALL DEVICES ---------- */
@media (max-width:380px){
  .card{max-width:94vw;padding:14px;}
  .controls{gap:8px;}
  .btn{font-size:14px;padding:0 8px;}
  .btn svg{width:16px;height:16px;}
  .headers,.songRow{gap:8px;}
  .toastStack{
    left:12px;
    right:12px;
    width:auto;
    bottom:calc(12px + env(safe-area-inset-bottom));
  }
}

@media (max-width:720px){
  .viewport{
    align-items:flex-start;
  }
  .playerHeaderActions{
    gap:6px;
  }
  .playerModeBtn{
    min-width:40px;
    height:26px;
    font-size:11px;
    padding:0 8px;
  }
  .jamTools{
    grid-template-columns:1fr;
  }
  .jamFiltersSummary{
    width:100%;
    justify-content:center;
  }
  .jamFiltersBody{
    grid-template-columns:1fr;
  }
  .adminTagsCreateTools{
    grid-template-columns:1fr;
  }
  .yearPieWrap{
    grid-template-columns:1fr;
    justify-items:center;
  }
  .yearPieLegend{
    width:100%;
  }
  .profileListRow{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "title count"
      "meta meta";
    row-gap:2px;
  }
  .profileListTitle{grid-area:title;}
  .profileListCount{grid-area:count;}
  .profileListMeta{grid-area:meta;}
  .jamRange{
    grid-template-columns:auto 1fr auto;
  }
  .jamToggle{
    min-height:36px;
    padding:0 10px;
  }
  .headers.headers-actions{
    display:none;
  }
  .adminTagHeaders{
    display:none;
  }
  .songRow.songRow-actions{
    grid-template-columns:minmax(24px,32px) minmax(0,1fr) auto;
    grid-template-areas:
      "rank title actions"
      "rank date rating";
    row-gap:4px;
    align-items:start;
  }
  .songRow.songRow-actions > :nth-child(1){grid-area:rank;}
  .songRow.songRow-actions > :nth-child(2){grid-area:title;}
  .songRow.songRow-actions > :nth-child(3){grid-area:date;justify-self:start;}
  .songRow.songRow-actions > :nth-child(4){grid-area:rating;justify-self:end;}
  .songRow.songRow-actions > :nth-child(5){grid-area:actions;justify-self:end;}
  .songRow.songRow-actions .rowBtn{
    height:24px;
    padding:0 7px;
    font-size:10.5px;
  }
  .songRow.songRow-actions .rowActions{
    flex-wrap:wrap;
    justify-content:flex-end;
    max-width:210px;
  }
  .songRow.songRow-actions-inlineMetric{
    grid-template-columns:minmax(24px,32px) minmax(0,1fr) auto;
    grid-template-areas:
      "rank title actions"
      "rank date actions";
  }
  .songRow.songRow-actions-inlineMetric > :nth-child(1){grid-area:rank;}
  .songRow.songRow-actions-inlineMetric > :nth-child(2){grid-area:title;}
  .songRow.songRow-actions-inlineMetric > :nth-child(3){grid-area:date;justify-self:start;}
  .songRow.songRow-actions-inlineMetric > :nth-child(5){grid-area:actions;justify-self:end;}
  .songRow.songRow-actions .rowActionsStacked{
    justify-items:end;
    max-width:210px;
  }
  .queueRow.queueEditableRow .queueActionGroup{
    justify-content:flex-start;
  }
  .queueRow.queueEditableRow .queueActionGroupStatic{
    justify-content:flex-end;
  }
  .queueRow.queueEditableRow .queueActionBtn{
    min-width:60px;
    height:28px;
    padding:0 12px;
  }
  .queueDragHandle{
    align-self:start;
    height:52px;
  }
  .roomRowCard{
    grid-template-columns:1fr;
  }
  .roomActions{
    justify-content:flex-start;
  }
  .roomQueueItem{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .songRow.adminTagRow{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "title"
      "date date"
      "rating rating";
    row-gap:6px;
    align-items:center;
  }
  .songRow.adminTagRow > :nth-child(1){
    display:none;
  }
  .songRow.adminTagRow > :nth-child(2){
    grid-area:title;
    justify-self:start;
  }
  .songRow.adminTagRow > :nth-child(3){
    grid-area:date;
    justify-self:start;
  }
  .songRow.adminTagRow > :nth-child(4){
    grid-area:rating;
    justify-self:start;
  }
  .adminJamRatingInput{
    width:68px;
    height:30px;
    font-size:16px;
    padding:0 6px;
  }
  .adminMetaActions{
    gap:6px;
  }
  .adminMetaImageGrid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:4px;
  }
  .quickFeedbackRow{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:520px){
  body:not(.player-mode-min) .viewport{
    justify-content:center;
    overflow:hidden;
    padding:calc(10px + env(safe-area-inset-top))
            calc(10px + env(safe-area-inset-right))
            calc(12px + env(safe-area-inset-bottom))
            calc(10px + env(safe-area-inset-left));
  }
  body:not(.player-mode-min) .card{
    max-width:none;
    height:100%;
    min-height:0;
    overflow:hidden;
    gap:6px;
  }
  body:not(.player-mode-min) .artwrap{
    min-height:clamp(150px,24svh,210px);
  }
  body:not(.player-mode-min) .controls{
    gap:6px;
  }
  body:not(.player-mode-min) .playerUtilitySummary{
    padding:9px 10px;
  }
  body:not(.player-mode-min) .playerUtilityTitle{
    font-size:12px;
  }
  body:not(.player-mode-min) .playerUtilityMeta{
    font-size:10px;
  }
  body:not(.player-mode-min) .playerUtilityBody{
    padding:0 8px 8px;
    gap:7px;
  }
  body:not(.player-mode-min) .discoveryLaneChip{
    min-height:26px;
    padding:0 9px;
    font-size:11px;
  }
  body:not(.player-mode-min) .memoryChip{
    min-height:28px;
    font-size:11px;
    padding:0 9px;
  }
}

@media (hover:none) and (pointer:coarse){
  input[type="text"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  input[type="email"],
  textarea,
  select{
    font-size:16px !important;
    -webkit-text-size-adjust:100%;
  }
}

/* ---------- Glass Redesign ---------- */
:root{
  --player-glass-top:rgba(255,255,255,.08);
  --player-glass-border:rgba(255,255,255,.11);
  --player-glass-shadow:0 26px 54px rgba(0,0,0,.42);
  --player-pill-dark:linear-gradient(180deg,rgba(43,48,58,.96),rgba(20,24,34,.98));
  --player-pill-light:linear-gradient(180deg,#ffffff,#dce3f0);
}

body{
  background:
    radial-gradient(circle at 50% -12%, rgba(180,193,219,.22), transparent 28%),
    linear-gradient(180deg,#2f2f31 0%, #1d1f28 9%, #090a10 19%, #03040a 100%);
  font-family:"Avenir Next","SF Pro Display","Helvetica Neue",sans-serif;
  overflow:auto;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(180deg, rgba(180,193,219,.08), transparent 18%);
  opacity:.8;
  z-index:-1;
}

.viewport{
  min-height:100svh;
  align-items:flex-start;
  padding:calc(16px + env(safe-area-inset-top))
          calc(16px + env(safe-area-inset-right))
          calc(20px + env(safe-area-inset-bottom))
          calc(16px + env(safe-area-inset-left));
}

.card{
  position:relative;
  width:min(100%, 492px);
  max-width:492px;
  min-height:calc(100svh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  height:auto;
  padding:22px;
  gap:0;
  background:
    linear-gradient(180deg, rgba(116,129,151,.18) 0%, rgba(35,39,49,.44) 14%, rgba(5,7,14,.88) 52%, rgba(2,3,8,.98) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:44px;
  box-shadow:
    0 28px 72px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.05);
  overflow:visible;
}

.card::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:42px;
  border:1px solid rgba(255,255,255,.05);
  pointer-events:none;
}

.card::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:42%;
  border-radius:inherit;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.18), transparent 42%),
    linear-gradient(180deg, rgba(180,193,219,.1), transparent 26%);
  opacity:.78;
  pointer-events:none;
}

.cardHeader{
  position:absolute;
  top:-6px;
  left:24px;
  right:24px;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:56px;
}

.jamRatingTop{
  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start;
  width:auto;
  min-width:0;
  min-height:44px;
  max-width:100%;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(79,88,105,.94), rgba(35,40,52,.92));
  color:#f9fbff;
  font-size:clamp(13px,3.4vw,16px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 14px 30px rgba(0,0,0,.24);
  backdrop-filter:blur(18px);
  overflow:hidden;
  text-overflow:ellipsis;
}

.jamRatingTop:hover{
  color:#ffffff;
  border-color:rgba(255,255,255,.16);
}

.playerHeaderActions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  min-width:0;
  flex-shrink:0;
  flex-wrap:nowrap;
}

.srOnly{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.liveStationSelectWrap{
  position:relative;
  display:flex;
  align-items:center;
  min-width:244px;
  min-height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(43,48,59,.96), rgba(23,26,37,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 26px rgba(0,0,0,.28);
  backdrop-filter:blur(18px);
  overflow:hidden;
}

.liveStationSelectWrap::before{
  content:attr(data-label);
  position:absolute;
  left:18px;
  right:44px;
  top:0;
  bottom:0;
  display:flex;
  align-items:center;
  color:#eef2fa;
  font-size:14px;
  font-weight:800;
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}

.liveStationSelectWrap::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:9px;
  height:9px;
  margin-top:-6px;
  border-right:1.5px solid rgba(238,242,250,.88);
  border-bottom:1.5px solid rgba(238,242,250,.88);
  transform:rotate(45deg);
  pointer-events:none;
}

.liveStationSelect{
  appearance:none;
  -webkit-appearance:none;
  position:absolute;
  inset:0;
  width:100%;
  min-width:0;
  height:100%;
  padding:0;
  border-radius:999px;
  border:0;
  background:transparent;
  color:transparent;
  font-size:14px;
  font-weight:800;
  letter-spacing:-.02em;
  box-shadow:none;
  backdrop-filter:blur(18px);
  opacity:0;
  cursor:pointer;
}

.liveStationSelect:focus{
  outline:none;
}

.liveStationSelectWrap:focus-within{
  border-color:rgba(173,196,255,.44);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 3px rgba(115,157,255,.18),
    0 12px 26px rgba(0,0,0,.28);
}

.liveStationSelectTrigger,
.liveStationSelectMenu{
  display:none;
}

.authTrigger{
  min-width:108px;
  height:44px;
  border-radius:999px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(43,48,59,.96), rgba(23,26,37,.96));
  font-size:14px;
  font-weight:800;
  letter-spacing:-.02em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 26px rgba(0,0,0,.28);
}

.authTrigger.authReady{
  min-width:44px;
  width:44px;
  height:44px;
}

.authAvatar{
  width:24px;
  height:24px;
  font-size:14px;
}

.authAvatarImg{
  width:30px;
  height:30px;
}

.liveRadioHeaderBtn{
  display:none !important;
}

.heroShell{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  padding-top:8px;
}

.artwrap{
  position:relative;
  flex:1 1 auto;
  min-height:clamp(420px, 59svh, 700px);
  border-radius:40px;
  overflow:hidden;
  background:#1a2333;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 28px 52px rgba(0,0,0,.34);
}

.artwrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.42), transparent 29%),
    linear-gradient(180deg, rgba(160,177,204,.28), rgba(66,79,105,.14) 44%, rgba(8,10,18,.76) 76%, rgba(4,5,10,.94) 100%);
}

.artwrap::after{
  content:none;
}

.artwrap img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.08);
  filter:saturate(.8) contrast(1.04) brightness(.84);
}

.playerChrome{
  position:relative;
  z-index:4;
  margin-top:clamp(-164px, -17svh, -120px);
  padding:28px 16px 18px;
  border-radius:34px;
  background:linear-gradient(180deg, rgba(11,14,23,.82), rgba(4,6,13,.96) 20%, rgba(2,3,9,.99) 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 30px 64px rgba(0,0,0,.56),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(22px);
}

.playerChrome::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.05);
  pointer-events:none;
}

.titleRow{
  position:relative;
  padding-top:0;
  margin:0 0 18px;
  align-items:flex-start;
}

.titleRow h2{
  margin:0;
  font-size:clamp(38px, 11vw, 64px);
  line-height:.92;
  font-weight:800;
  letter-spacing:-.07em;
  color:#f7f8fb;
  text-shadow:0 12px 34px rgba(0,0,0,.36);
}

.metaHeaderRow{
  grid-area:meta;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
  padding-inline:0;
}

.metaStack{
  display:grid;
  gap:8px;
}

#artist{
  font-size:clamp(18px, 5vw, 28px);
  font-weight:700;
  color:#f4f6fb;
  line-height:1.04;
}

#album{
  font-size:clamp(14px, 4vw, 20px);
  color:rgba(233,237,246,.64);
  line-height:1.08;
}

.metaActionRow{
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

body:not(.player-mode-min) #favoriteBtnMin,
body:not(.player-mode-min) #shareBtnMin,
body.player-mode-min #favoriteBtnMin,
body.player-mode-min #shareBtnMin{
  display:flex !important;
  width:46px;
  height:46px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:var(--player-pill-dark);
  color:#eff3fb;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

#favoriteBtnMin svg,
#shareBtnMin svg{
  width:19px;
  height:19px;
}

.middle{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  grid-template-areas:
    "meta meta meta"
    "progress progress progress"
    "queue queue queue"
    "play play play"
    "jam live skip";
  gap:14px 12px;
  flex:0 0 auto;
  min-height:0;
}

.progressWrap{
  grid-area:progress;
  display:grid !important;
  gap:8px;
  padding:8px 12px 8px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(33,39,51,.98), rgba(17,21,30,.98));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.progressBarContainer{
  height:9px;
  border-radius:999px;
  background:rgba(250,252,255,.08);
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}

.progressBar{
  background:linear-gradient(90deg, #f6f8fd 0%, #bfd4ff 58%, #8eb8ff 100%);
  box-shadow:0 0 18px rgba(173,201,255,.3);
}

.timeRow{
  display:flex !important;
  justify-content:space-between;
  margin-top:0;
  padding-inline:0;
  font-size:10px;
  font-weight:700;
  color:rgba(227,233,242,.72);
}

.controls{
  display:contents;
  padding-inline:0;
}

#playPause,
#openJamChart,
#skip{
  min-height:42px;
  border-radius:999px;
  font-size:clamp(11px, 3.1vw, 14px);
  font-weight:800;
  letter-spacing:-.02em;
  border:1px solid rgba(255,255,255,.08);
  background:var(--player-pill-dark);
  color:#f4f6fb;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 36px rgba(0,0,0,.22);
}

#playPause{
  grid-area:play;
}

#openJamChart{
  grid-area:jam;
}

#skip{
  grid-area:skip;
}

#playPause svg,
#openJamChart svg,
#skip svg{
  width:14px;
  height:14px;
}

.shareActionGroup{
  display:none !important;
}

.experienceSection{
  grid-area:live;
  display:block !important;
  padding-inline:0;
}

.presetRow{
  display:block;
}

.selectBtnWrap{
  width:100%;
  min-height:42px;
  border-radius:999px;
}

.liveRadioEntryBtn{
  justify-content:center;
  padding:0 14px;
}

.liveRadioEntryBtn .selectBtnContent{
  justify-content:center;
  gap:8px;
}

.liveRadioEntryText{
  align-items:center;
}

.liveRadioEntryLabel{
  font-size:clamp(11px, 3.1vw, 14px);
  letter-spacing:-.02em;
}

.experienceSection .liveRadioEntryBtn{
  background:var(--player-pill-light);
  border:1px solid rgba(255,255,255,.92);
  color:#111827;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 18px 36px rgba(0,0,0,.24);
}

.experienceSection .liveRadioEntryBtn .liveRadioEntryLabel,
.experienceSection .liveRadioEntryBtn .selectBtnIcon{
  color:#121a2c;
}

.experienceSection .liveRadioEntryBtn.isActive{
  background:linear-gradient(180deg, rgba(58,82,123,.96), rgba(20,30,48,.98));
  border-color:rgba(193,214,247,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 18px 36px rgba(0,0,0,.34);
}

.experienceSection .liveRadioEntryBtn.isActive.isLocked,
.experienceSection .liveRadioEntryBtn.isActive:disabled{
  background:linear-gradient(180deg, rgba(71,79,96,.94), rgba(33,39,51,.96));
  border-color:rgba(193,214,247,.18);
  color:#d6deeb;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 28px rgba(0,0,0,.24);
}

.experienceSection .liveRadioEntryBtn.isActive .liveRadioEntryLabel,
.experienceSection .liveRadioEntryBtn.isActive .selectBtnIcon{
  color:#f4f7ff;
}

.experienceSection .liveRadioEntryBtn.isActive.isLocked .liveRadioEntryLabel,
.experienceSection .liveRadioEntryBtn.isActive.isLocked .selectBtnIcon,
.experienceSection .liveRadioEntryBtn.isActive:disabled .liveRadioEntryLabel,
.experienceSection .liveRadioEntryBtn.isActive:disabled .selectBtnIcon{
  color:#dfe6f2;
}

.queueMetaRow{
  grid-area:queue;
  margin-top:0;
  padding-top:0;
  padding-inline:0;
  border-top:0;
  display:grid;
  gap:0;
}

#jamTogetherBtn{
  width:100%;
  min-height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(29,38,55,.96), rgba(12,18,28,.98));
  color:#dfe7f8;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  justify-content:center;
}

body:not(.player-mode-min) #upNext,
body.player-mode-min #upNext{
  display:flex !important;
  align-items:center;
  width:100%;
  min-height:32px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(36,41,52,.98), rgba(18,21,30,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 28px rgba(0,0,0,.2);
  color:#f1f4fb;
  font-size:clamp(10px, 2.7vw, 11.5px);
  font-weight:800;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

body:not(.player-mode-min) #upNext:hover,
body.player-mode-min #upNext:hover{
  color:#ffffff;
  border-color:rgba(255,255,255,.14);
}

body:not(.player-mode-min) #jamRating,
body.player-mode-min #jamRating{
  display:block !important;
  padding-left:6px;
  font-size:clamp(10px, 2.7vw, 11.5px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(211,219,231,.54);
}

.minDiscoverRow{
  display:none !important;
}

body.player-mode-min .card{
  padding:18px;
  border-radius:36px;
}

body.player-mode-min .card::before{
  border-radius:34px;
}

body.player-mode-min .cardHeader{
  top:-5px;
  left:18px;
  right:18px;
}

body.player-mode-min .jamRatingTop{
  display:inline-flex !important;
  min-height:40px;
  max-width:min(56%, 190px);
  padding:0 14px;
  font-size:12.5px;
}

body.player-mode-min .playerModeBtn{
  min-width:44px;
  height:32px;
  font-size:12px;
}

body.player-mode-min .authTrigger,
body.player-mode-min .authTrigger.authReady{
  min-width:40px;
  width:40px;
  height:40px;
}

body.player-mode-min .authTrigger:not(.authReady){
  min-width:62px;
  width:auto;
  padding:0 14px;
}

body.player-mode-min .heroShell{
  padding-top:6px;
}

body.player-mode-min .artwrap{
  min-height:clamp(370px, 53svh, 560px);
}

body.player-mode-min .playerChrome{
  margin-top:-112px;
  padding:24px 14px 16px;
  border-radius:30px;
}

body.player-mode-min .titleRow h2{
  font-size:clamp(32px, 10vw, 50px);
}

body.player-mode-min .middle{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr));
  grid-template-areas:
    "meta meta meta"
    "progress progress progress"
    "jam live skip"
    "play play play"
    "queue queue queue";
  gap:12px 10px;
}

body.player-mode-min .metaHeaderRow,
body.player-mode-min .progressWrap,
body.player-mode-min .experienceSection,
body.player-mode-min .queueMetaRow{
  display:grid !important;
}

body.player-mode-min .progressWrap{
  gap:0;
  padding:8px 12px;
}

body.player-mode-min .timeRow{
  display:none !important;
}

body.player-mode-min #openJamChart,
body.player-mode-min #upNext,
body.player-mode-min #jamRating,
body.player-mode-min #skip,
body.player-mode-min #playPause{
  display:flex !important;
}

body.player-mode-min #shareBtnMin[hidden],
body.player-mode-min #favoriteBtnMin[hidden]{
  display:none !important;
}

body.player-mode-min #skipMin,
body.player-mode-min #presetSelectMinWrap,
body.player-mode-min .shareActionGroup,
body.player-mode-min .liveRadioHeaderBtn{
  display:none !important;
}

body.player-mode-min .controls{
  display:contents !important;
}

body.player-mode-min .queueMetaRow{
  margin-top:0;
  padding-top:0;
  border-top:0;
  gap:8px;
}

@media (max-width:520px){
  body:not(.player-mode-min) .cardHeader{
    grid-template-columns:minmax(0, .96fr) minmax(0, 1.08fr);
    align-items:center;
  }

  body:not(.player-mode-min) .playerHeaderActions{
    width:100%;
    min-width:0;
    gap:6px;
  }

  body:not(.player-mode-min) .jamRatingTop{
    width:100%;
    max-width:none;
  }

  .viewport{
    padding:calc(10px + env(safe-area-inset-top))
            calc(10px + env(safe-area-inset-right))
            calc(14px + env(safe-area-inset-bottom))
            calc(10px + env(safe-area-inset-left));
  }

  .card{
    min-height:calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding:16px;
    border-radius:34px;
  }

  .card::before{
    border-radius:32px;
  }

  .cardHeader{
    top:-4px;
    left:16px;
    right:16px;
    gap:8px;
  }

  .jamRatingTop{
    min-height:40px;
    max-width:none;
    padding:0 12px;
    font-size:11.5px;
  }

  .liveStationSelectWrap{
    width:100%;
    min-width:0;
    min-height:40px;
    flex:1 1 0;
  }

  .liveStationSelectWrap::before{
    left:12px;
    right:28px;
    font-size:11.5px;
  }

  .liveStationSelectWrap::after{
    right:12px;
    width:8px;
    height:8px;
    margin-top:-5px;
    border-right:1.5px solid rgba(238,242,250,.86);
    border-bottom:1.5px solid rgba(238,242,250,.86);
  }

  .liveStationSelect{
    min-width:0;
    height:38px;
    padding:0;
    font-size:12px;
  }

  .authTrigger,
  .authTrigger.authReady{
    min-width:40px;
    width:40px;
    height:40px;
  }

  .authTrigger:not(.authReady){
    min-width:64px;
    width:auto;
    padding:0 12px;
    font-size:11.5px;
  }

  .heroShell{
    padding-top:6px;
  }

  .artwrap{
    min-height:clamp(340px, 47svh, 480px);
    border-radius:30px;
  }

  .playerChrome{
    margin-top:-132px;
    padding:20px 13px 14px;
    border-radius:30px;
  }

  body.player-mode-min .playerChrome{
    margin-top:-96px;
  }

  .titleRow{
    margin-bottom:14px;
  }

  .titleRow h2{
    font-size:clamp(30px, 10.4vw, 44px);
  }

  #artist{
    font-size:18px;
  }

  #album{
    font-size:13px;
  }

  .middle{
    gap:12px 10px;
  }

  .progressWrap{
    padding:12px 14px 10px;
  }

  #playPause,
  #openJamChart,
  #skip,
  .experienceSection .liveRadioEntryBtn{
    min-height:40px;
    font-size:11px;
  }

  #playPause svg,
  #openJamChart svg,
  #skip svg{
    width:13px;
    height:13px;
  }

  body:not(.player-mode-min) #favoriteBtnMin,
  body:not(.player-mode-min) #shareBtnMin,
  body.player-mode-min #favoriteBtnMin,
  body.player-mode-min #shareBtnMin{
    width:46px;
    height:46px;
  }

  #upNext{
    min-height:30px;
    padding:0 10px;
    font-size:10px;
  }
}

@media (min-width:960px){
  .viewport{
    align-items:center;
    overflow:auto;
    padding:calc(32px + env(safe-area-inset-top))
            calc(32px + env(safe-area-inset-right))
            calc(32px + env(safe-area-inset-bottom))
            calc(32px + env(safe-area-inset-left));
  }

  .card{
    display:grid;
    grid-template-rows:auto auto;
    width:min(1140px, 100%);
    max-width:none;
    min-height:0;
    height:auto;
    padding:28px;
    gap:24px;
    border-radius:38px;
    overflow:hidden;
  }

  .card::before{
    border-radius:36px;
  }

  .card::after{
    height:100%;
    opacity:.52;
    background:
      radial-gradient(circle at 12% 16%, rgba(255,255,255,.1), transparent 30%),
      linear-gradient(135deg, rgba(173,187,212,.08), rgba(4,6,12,0) 42%);
  }

  .cardHeader{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    z-index:8;
    min-height:48px;
    gap:16px;
  }

  .jamRatingTop{
    min-height:46px;
    max-width:min(38%, 320px);
    padding:0 18px;
    font-size:14px;
  }

  .playerHeaderActions{
    gap:12px;
  }

  .liveStationSelectWrap{
    min-width:260px;
    overflow:visible;
  }

  .liveStationSelectWrap::before,
  .liveStationSelectWrap::after{
    content:none;
  }

  .liveStationSelectWrap.isOpen{
    border-color:rgba(173,196,255,.52);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 0 0 3px rgba(115,157,255,.18),
      0 18px 38px rgba(0,0,0,.34);
  }

  .liveStationSelect{
    display:none;
  }

  .liveStationSelectTrigger{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:44px;
    padding:0 18px;
    border:0;
    border-radius:999px;
    background:transparent;
    color:#eef2fa;
    font-size:14px;
    font-weight:800;
    letter-spacing:-.02em;
    cursor:pointer;
    text-align:left;
  }

  .liveStationSelectTrigger::after{
    content:"";
    flex:0 0 auto;
    width:9px;
    height:9px;
    margin-left:12px;
    border-right:1.5px solid rgba(238,242,250,.88);
    border-bottom:1.5px solid rgba(238,242,250,.88);
    transform:rotate(45deg);
    transition:transform 160ms ease, margin-top 160ms ease;
  }

  .liveStationSelectWrap.isOpen .liveStationSelectTrigger::after{
    transform:rotate(225deg);
    margin-top:4px;
  }

  .liveStationSelectTrigger:focus-visible{
    outline:none;
  }

  .liveStationSelectMenu{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    z-index:30;
    display:grid;
    gap:6px;
    padding:10px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(20,25,35,.98), rgba(8,11,19,.98));
    box-shadow:
      0 22px 44px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.05);
  }

  .liveStationSelectMenu[hidden]{
    display:none;
  }

  .liveStationSelectOption{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    min-height:46px;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    background:linear-gradient(180deg, rgba(43,48,59,.96), rgba(23,26,37,.96));
    color:#eef2fa;
    font-size:14px;
    font-weight:800;
    letter-spacing:-.02em;
    text-align:left;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 10px 22px rgba(0,0,0,.18);
    cursor:pointer;
  }

  .liveStationSelectOption:hover{
    border-color:rgba(188,212,255,.2);
    color:#ffffff;
  }

  .liveStationSelectOption.isActive{
    border-color:rgba(173,196,255,.48);
    background:linear-gradient(180deg, rgba(64,84,118,.98), rgba(26,35,52,.98));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 14px 28px rgba(0,0,0,.24);
  }

  .liveStationSelectOption::after{
    content:"";
    flex:0 0 auto;
    width:8px;
    height:14px;
    border-right:2px solid transparent;
    border-bottom:2px solid transparent;
    transform:rotate(45deg);
  }

  .liveStationSelectOption.isActive::after{
    border-color:#dbe8ff;
  }

  .authTrigger,
  .authTrigger.authReady{
    height:46px;
  }

  .heroShell{
    display:grid;
    grid-template-columns:minmax(320px, 392px) minmax(0, 1fr);
    align-items:start;
    gap:26px;
    padding-top:0;
  }

  .artwrap{
    min-height:0;
    height:auto;
    aspect-ratio:1 / 1;
    border-radius:30px;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.08),
      0 22px 44px rgba(0,0,0,.28);
  }

  .artwrap::before{
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.26), transparent 28%),
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(8,11,20,.08) 56%, rgba(3,5,11,.18) 100%);
  }

  .artwrap img{
    transform:none;
    filter:saturate(.96) contrast(1.02) brightness(.94);
  }

  .playerChrome{
    margin-top:0;
    min-height:100%;
    padding:30px 28px 24px;
    border-radius:30px;
  }

  .playerChrome::before{
    border-radius:28px;
  }

  .titleRow{
    margin-bottom:18px;
  }

  .titleRow h2{
    font-size:clamp(34px, 4.1vw, 58px);
  }

  #artist{
    font-size:clamp(20px, 1.9vw, 28px);
  }

  #album{
    font-size:clamp(15px, 1.3vw, 18px);
  }

  .middle{
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-template-areas:
      "meta meta"
      "progress progress"
      "actions actions"
      "live live"
      "queue queue";
    gap:16px;
  }

  .controls{
    display:grid;
    grid-area:actions;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:16px;
  }

  #playPause,
  #openJamChart,
  #skip{
    grid-area:auto;
  }

  #playPause{
    grid-column:1 / -1;
  }

  .metaHeaderRow{
    gap:16px;
  }

  body:not(.player-mode-min) #favoriteBtnMin,
  body:not(.player-mode-min) #shareBtnMin{
    width:48px;
    height:48px;
  }

  .progressWrap{
    gap:10px;
    padding:14px 16px 12px;
    border-radius:24px;
  }

  .timeRow{
    font-size:11px;
  }

  #playPause,
  #openJamChart,
  #skip,
  .experienceSection .liveRadioEntryBtn,
  #jamTogetherBtn{
    min-height:48px;
    font-size:14px;
  }

  #playPause svg,
  #openJamChart svg,
  #skip svg{
    width:15px;
    height:15px;
  }

  .queueMetaRow{
    gap:10px;
  }

  body:not(.player-mode-min) #upNext{
    min-height:44px;
    padding:0 16px;
    font-size:12px;
  }
}

/* ---------- Jam Chart Redesign ---------- */
#jamChartOverlay{
  background:
    radial-gradient(circle at top, rgba(188, 200, 220, .16), transparent 28%),
    rgba(2, 4, 10, .78);
  backdrop-filter:blur(16px);
}

#jamChartOverlay .modal{
  width:min(860px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-width:min(860px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height:88svh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  background:
    linear-gradient(180deg, rgba(106, 118, 141, .16) 0%, rgba(28, 32, 44, .58) 14%, rgba(5, 7, 14, .94) 46%, rgba(3, 4, 10, .98) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:30px;
  box-shadow:
    0 34px 80px rgba(0,0,0,.56),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  position:relative;
}

#jamChartOverlay .modal,
#jamChartOverlay .modalBody,
#jamChartOverlay .modalBody > *,
#jamChartOverlay .jamTools,
#jamChartOverlay .jamFiltersDisclosure,
#jamChartOverlay .jamFiltersBody,
#jamChartOverlay .jamActionBlock,
#jamChartOverlay .jamDirectoryBackRow,
#jamChartOverlay .jamDirectoryList,
#jamChartOverlay .jamDirectoryYears,
#jamChartOverlay .yearBlock,
#jamChartOverlay .top5Block,
#jamChartOverlay .top5,
#jamChartOverlay #jamYears{
  box-sizing:border-box;
  max-width:100%;
  min-width:0;
}

#jamChartOverlay .modal::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:29px;
  border:1px solid rgba(255,255,255,.05);
  pointer-events:none;
}

#jamChartOverlay .modal::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:34%;
  border-radius:inherit;
  background:
    radial-gradient(circle at 50% -6%, rgba(255,255,255,.16), transparent 40%),
    linear-gradient(180deg, rgba(162,177,205,.10), transparent 30%);
  pointer-events:none;
}

#jamChartOverlay .modalHeader{
  position:sticky;
  top:0;
  z-index:3;
  padding:14px 16px 11px;
  background:linear-gradient(180deg, rgba(12,16,25,.94), rgba(7,9,16,.82));
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
}

#jamChartOverlay .modalHeader h3{
  font-size:clamp(20px, 3vw, 28px);
  letter-spacing:-.05em;
  font-weight:800;
  color:#f7f9fd;
}

#jamChartOverlay .modalHeader .btn{
  min-width:70px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(48,54,66,.96), rgba(22,26,36,.98));
  color:#eef3fb;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 28px rgba(0,0,0,.24);
}

#jamChartOverlay .modalBody{
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  gap:12px;
  padding:14px 16px 16px;
}

#jamChartOverlay .jamTools{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:start;
  padding:11px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(30,36,47,.94), rgba(14,18,27,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 20px 36px rgba(0,0,0,.2);
}

#jamChartOverlay .jamTools input[type="search"],
#jamChartOverlay .jamTools select{
  height:38px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(18,23,34,.98), rgba(9,12,20,.98));
  color:#edf2fb;
  padding:0 12px;
  font-size:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

#jamChartOverlay .jamTools input[type="search"]::placeholder{
  color:#8fa0bb;
}

#jamChartOverlay .jamTools input[type="search"]:focus-visible,
#jamChartOverlay .jamTools select:focus-visible,
#jamChartOverlay .jamRange input[type="range"]:focus-visible,
#jamChartOverlay .jamFiltersSummary:focus-visible,
#jamChartOverlay .jamToggle:focus-visible{
  outline:2px solid rgba(170, 198, 255, .62);
  outline-offset:2px;
}

#jamChartOverlay .jamFiltersDisclosure{
  gap:10px;
  justify-items:end;
}

#jamChartOverlay .jamFiltersSummary{
  min-width:96px;
  height:38px;
  padding:0 15px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(49,55,67,.96), rgba(22,26,36,.98));
  color:#f4f7fd;
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 12px 26px rgba(0,0,0,.2);
}

#jamChartOverlay .jamFiltersSummary:hover{
  border-color:rgba(188,212,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 28px rgba(0,0,0,.24);
}

#jamChartOverlay .jamFiltersBody{
  width:min(100%, 760px);
  padding:11px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(13,17,26,.98), rgba(5,7,13,.98));
  grid-template-columns:repeat(auto-fit,minmax(156px,1fr));
  gap:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

#jamChartOverlay .jamFilterField{
  gap:5px;
}

#jamChartOverlay .jamFilterField label,
#jamChartOverlay .jamRange label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#97abc9;
}

#jamChartOverlay .jamRange{
  grid-template-columns:auto 1fr auto;
  gap:8px;
  min-height:38px;
  padding:0 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(18,23,34,.98), rgba(9,12,20,.98));
}

#jamChartOverlay .jamRange span{
  min-width:34px;
  color:#e7edf8;
  font-size:11px;
  font-weight:700;
}

#jamChartOverlay .jamToggle{
  min-height:38px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(18,23,34,.98), rgba(9,12,20,.98));
  color:#eef3fb;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

#jamChartOverlay #jamResetFilters{
  min-width:84px;
  height:38px !important;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(235,239,246,.98), rgba(205,214,228,.98));
  color:#151c2c;
  font-weight:800;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 12px 28px rgba(0,0,0,.18);
}

#jamChartOverlay .sectionTitle{
  margin:4px 2px 2px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#97abc9;
}

#jamChartOverlay .jamDirectoryBackRow{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:44px;
  margin:0 0 8px;
  position:sticky;
  top:0;
  z-index:4;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(18,23,34,.98), rgba(7,9,16,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 26px rgba(0,0,0,.16);
}

#jamChartOverlay .jamDirectoryBack{
  appearance:none;
  min-width:62px;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(49,55,67,.96), rgba(22,26,36,.98));
  color:#f4f7fd;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 12px 24px rgba(0,0,0,.18);
}

#jamChartOverlay .jamDirectoryPath{
  display:none;
}

#jamChartOverlay .jamActionBlock{
  margin:0;
}

#jamChartOverlay .jamActionBody{
  padding:0;
}

#jamChartOverlay .jamExploreRunsBtn{
  appearance:none;
  display:block;
  width:100%;
  min-height:44px;
  padding:10px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(28,33,44,.96), rgba(10,13,21,.98));
  color:#f5f8fe;
  font-size:14px;
  font-weight:800;
  letter-spacing:-.03em;
  text-align:left;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 16px 28px rgba(0,0,0,.18);
}

#jamChartOverlay .jamExploreRunsBtn.isActive{
  background:linear-gradient(180deg, rgba(90,107,145,.96), rgba(38,47,71,.98));
  color:#f2f6ff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 20px rgba(0,0,0,.18);
}

#jamChartOverlay .jamDirectoryList{
  display:grid;
  gap:8px;
}

#jamChartOverlay .jamDirectoryYears{
  display:grid;
  gap:8px;
}

#jamChartOverlay[data-jam-browser-level="years"] .jamTools{
  display:none;
}

#jamChartOverlay[data-jam-browser-level="years"] #jamResultsTitle{
  display:none;
}

#jamChartOverlay[data-jam-browser-level="years"] .modalBody{
  padding-top:0;
}

#jamChartOverlay .jamDirectoryRow{
  appearance:none;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(28,33,44,.96), rgba(10,13,21,.98));
  color:#eef3fb;
  text-align:left;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 16px 28px rgba(0,0,0,.18);
}

#jamChartOverlay .jamDirectoryRow:hover{
  border-color:rgba(171,198,242,.16);
  background:linear-gradient(180deg, rgba(34,40,53,.98), rgba(13,17,26,.98));
}

#jamChartOverlay .jamDirectoryMain{
  min-width:0;
  display:grid;
  gap:2px;
}

#jamChartOverlay .jamDirectoryMain strong,
#jamChartOverlay .jamDirectoryPanelHeader strong{
  font-size:13px;
  font-weight:800;
  letter-spacing:-.03em;
  color:#f4f7fd;
}

#jamChartOverlay .jamDirectoryMeta{
  color:#a9bad4;
  font-size:10px;
  font-weight:700;
}

#jamChartOverlay .jamDirectoryChevron{
  color:#8ea4c6;
  font-size:14px;
  font-weight:900;
}

#jamChartOverlay .jamDirectorySongs{
  overflow:hidden;
}

#jamChartOverlay .jamDirectoryPanelHeader{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  min-height:44px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(48,54,67,.7), rgba(18,22,31,.88));
  color:#f5f8fe;
}

#jamChartOverlay .yearBlock,
#jamChartOverlay .top5Block{
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(28,33,44,.96), rgba(10,13,21,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 34px rgba(0,0,0,.22);
  margin:0;
  overflow:hidden;
}

#jamChartOverlay .yearBlock > summary{
  padding:9px 12px;
  min-height:44px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(48,54,67,.7), rgba(18,22,31,.88));
  color:#f5f8fe;
}

#jamChartOverlay .jamActiveYearCard{
  position:sticky;
  top:52px;
  z-index:3;
  display:grid;
  gap:2px;
  margin:0 0 8px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(48,54,67,.92), rgba(18,22,31,.96));
  color:#f5f8fe;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 18px rgba(0,0,0,.18);
}

#jamChartOverlay .jamActiveYearTitle{
  font-size:13px;
  font-weight:800;
  letter-spacing:-.03em;
  color:#f5f8fe;
}

#jamChartOverlay .jamActiveYearMeta{
  color:#b2c4de;
  font-size:10px;
  font-weight:700;
}

#jamChartOverlay .top5Block .top5BlockHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 12px;
  min-height:44px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(48,54,67,.7), rgba(18,22,31,.88));
  color:#f5f8fe;
}

#jamChartOverlay .yearBlock > summary strong{
  font-size:14px;
  font-weight:800;
  letter-spacing:-.03em;
}

#jamChartOverlay .top5Block .top5BlockHeader strong{
  font-size:14px;
  font-weight:800;
  letter-spacing:-.03em;
}

#jamChartOverlay .yearBlock .yearMeta{
  color:#b2c4de;
  font-size:10px;
}

#jamChartOverlay .yearBlock .accordionBody,
#jamChartOverlay .top5Block .accordionBody{
  padding:11px 14px 14px;
  background:linear-gradient(180deg, rgba(11,14,22,.98), rgba(5,7,13,.98));
}

#jamChartOverlay .decadeBody{
  padding:10px 12px 12px;
}

#jamChartOverlay .decadeYearList{
  display:grid;
  gap:8px;
}

#jamChartOverlay .decadeBlock .yearBlock{
  border-radius:16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 22px rgba(0,0,0,.14);
}

#jamChartOverlay .decadeBlock .yearBlock > summary{
  min-height:40px;
  padding:8px 10px;
}

#jamChartOverlay .decadeBlock .yearBlock > summary strong{
  font-size:13px;
}

#jamChartOverlay .decadeBlock .yearBlock .yearMeta{
  font-size:9px;
}

#jamChartOverlay .decadeBlock .yearBlock .accordionBody{
  padding:10px 10px 10px;
}

#jamChartOverlay .top5{
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:10px;
  background:linear-gradient(180deg, rgba(18,23,34,.96), rgba(7,9,16,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

#jamChartOverlay .headers,
#jamChartOverlay .songRow{
  column-gap:12px;
}

#jamChartOverlay .headers{
  padding:0 4px 8px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#8ea4c6;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

#jamChartOverlay .songRow{
  margin-top:6px;
  padding:10px 8px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(22,28,39,.98), rgba(10,13,21,.98));
  border-bottom-color:rgba(255,255,255,.06);
  font-size:12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 24px rgba(0,0,0,.14);
}

#jamChartOverlay .songRow:hover{
  background:linear-gradient(180deg, rgba(32,39,52,.98), rgba(13,17,26,.98));
  border-color:rgba(171,198,242,.16);
}

#jamChartOverlay .songRow > :nth-child(2){
  font-size:13px;
  font-weight:800;
  color:#f4f7fd;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.14;
  word-break:break-word;
}

#jamChartOverlay .songRow > :nth-child(3),
#jamChartOverlay .songRow > :nth-child(4),
#jamChartOverlay .songRow .rowMetricInline{
  color:#a9bad4;
  font-weight:700;
}

#jamChartOverlay .songRow .rowActions,
#jamChartOverlay .songRow .rowActionsRoom{
  gap:6px;
}

#jamChartOverlay .songRow .rowBtn{
  min-width:56px;
  height:26px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(44,50,62,.96), rgba(18,22,31,.98));
  color:#eef3fb;
  font-size:10px;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 20px rgba(0,0,0,.18);
}

#jamChartOverlay .songRow .rowBtn:hover{
  border-color:rgba(182,207,247,.18);
}

#jamChartOverlay .songRow .rowBtnPrimary,
#jamChartOverlay .songRow .rowBtn[data-action="play"]{
  background:linear-gradient(180deg, rgba(237,241,247,.99), rgba(212,220,232,.98));
  color:#162034;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 10px 20px rgba(0,0,0,.16);
}

#jamChartOverlay .rankBadge{
  width:26px;
  height:26px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(73,88,121,.96), rgba(32,40,62,.98));
  color:#f2f6ff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 18px rgba(0,0,0,.16);
}

#jamChartOverlay .jamSearchSummary{
  margin:0 0 10px;
  color:#a9bad4;
  font-size:11px;
}

#jamChartOverlay .profileListEmpty{
  padding:14px 10px;
  color:#a9bad4;
  font-size:11px;
}

@media (max-width:700px){
  #jamChartOverlay .modal{
    max-width:100%;
    border-radius:26px;
  }

  #jamChartOverlay .modal::before{
    border-radius:25px;
  }

  #jamChartOverlay .modalHeader{
    padding:12px 14px 10px;
  }

  #jamChartOverlay .modalHeader h3{
    font-size:18px;
  }

  #jamChartOverlay .modalBody{
    padding:11px 13px 14px;
    gap:10px;
  }

  #jamChartOverlay .jamTools{
    grid-template-columns:minmax(0,1fr);
    padding:10px;
    border-radius:18px;
  }

  #jamChartOverlay .jamFiltersDisclosure{
    justify-items:start;
  }

  #jamChartOverlay .jamFiltersBody{
    width:100%;
    grid-template-columns:1fr;
    padding:10px;
    border-radius:18px;
  }

  #jamChartOverlay .jamTools input[type="search"],
  #jamChartOverlay .jamTools select,
  #jamChartOverlay .jamFiltersSummary,
  #jamChartOverlay .jamRange,
  #jamChartOverlay .jamToggle,
  #jamChartOverlay #jamResetFilters{
    height:36px;
    min-height:36px;
  }

  #jamChartOverlay .sectionTitle{
    margin-top:0;
  }

  #jamChartOverlay .jamDirectoryBackRow{
    min-height:40px;
    margin:0 0 7px;
    padding:6px 8px;
    border-radius:14px;
  }

  #jamChartOverlay[data-jam-browser-level="years"] .modalBody{
    padding-top:0;
  }

  #jamChartOverlay .jamDirectoryBack{
    min-width:56px;
    height:28px;
    padding:0 10px;
    font-size:9px;
  }

  #jamChartOverlay .jamDirectoryPath,
  #jamChartOverlay .jamDirectoryMeta{
    font-size:9px;
  }

  #jamChartOverlay .jamExploreRunsBtn{
    min-height:40px;
    padding:8px 12px;
    border-radius:14px;
    font-size:13px;
  }

  #jamChartOverlay .jamDirectoryRow{
    padding:8px 10px;
    border-radius:16px;
  }

  #jamChartOverlay .jamDirectoryYears{
    gap:6px;
  }

  #jamChartOverlay .jamDirectoryMain strong,
  #jamChartOverlay .jamDirectoryPanelHeader strong{
    font-size:12px;
  }

  #jamChartOverlay .jamDirectoryPanelHeader{
    min-height:40px;
    padding:8px 10px;
  }

  #jamChartOverlay .yearBlock > summary,
  #jamChartOverlay .top5Block .top5BlockHeader{
    min-height:40px;
    padding:8px 10px;
  }

  #jamChartOverlay .jamActiveYearCard{
    top:47px;
    margin:0 0 7px;
    padding:7px 10px;
    border-radius:14px;
  }

  #jamChartOverlay .jamActiveYearTitle{
    font-size:12px;
  }

  #jamChartOverlay .jamActiveYearMeta{
    font-size:9px;
  }

  #jamChartOverlay .yearBlock > summary strong,
  #jamChartOverlay .top5Block .top5BlockHeader strong{
    font-size:13px;
  }

  #jamChartOverlay .yearBlock .yearMeta{
    font-size:9px;
  }

  #jamChartOverlay .yearBlock .accordionBody,
  #jamChartOverlay .top5Block .accordionBody{
    padding:10px 12px 12px;
  }

  #jamChartOverlay .decadeBody{
    padding:8px 10px 10px;
  }

  #jamChartOverlay .decadeYearList{
    gap:6px;
  }

  #jamChartOverlay .decadeBlock .yearBlock > summary{
    min-height:36px;
    padding:7px 9px;
  }

  #jamChartOverlay .decadeBlock .yearBlock > summary strong{
    font-size:12px;
  }

  #jamChartOverlay .decadeBlock .yearBlock .yearMeta{
    font-size:8.5px;
  }

  #jamChartOverlay .decadeBlock .yearBlock .accordionBody{
    padding:8px 9px 9px;
  }

  #jamChartOverlay .headers.headers-actions,
  #jamChartOverlay .headers.headers-actions-inlineMetric{
    display:none;
  }

  #jamChartOverlay .songRow.songRow-actions{
    grid-template-columns:minmax(24px,32px) minmax(0,1fr) auto;
    grid-template-areas:
      "rank title actions"
      "rank date rating";
    row-gap:4px;
    align-items:start;
  }

  #jamChartOverlay .songRow.songRow-actions > :nth-child(1){grid-area:rank;}
  #jamChartOverlay .songRow.songRow-actions > :nth-child(2){grid-area:title;}
  #jamChartOverlay .songRow.songRow-actions > :nth-child(3){
    grid-area:date;
    justify-self:start;
    display:block;
  }
  #jamChartOverlay .songRow.songRow-actions > :nth-child(4){
    grid-area:rating;
    justify-self:end;
    display:block;
  }
  #jamChartOverlay .songRow.songRow-actions > :nth-child(5){
    grid-area:actions;
    justify-self:end;
  }

  #jamChartOverlay .songRow.songRow-actions-inlineMetric{
    grid-template-columns:minmax(24px,32px) minmax(0,1fr) auto;
    grid-template-areas:
      "rank title actions"
      "rank date actions";
    row-gap:4px;
    align-items:start;
  }

  #jamChartOverlay .songRow.songRow-actions-inlineMetric > :nth-child(1){grid-area:rank;}
  #jamChartOverlay .songRow.songRow-actions-inlineMetric > :nth-child(2){grid-area:title;}
  #jamChartOverlay .songRow.songRow-actions-inlineMetric > :nth-child(3){
    grid-area:date;
    justify-self:start;
    display:block;
  }
  #jamChartOverlay .songRow.songRow-actions-inlineMetric > :nth-child(4){
    display:none;
  }
  #jamChartOverlay .songRow.songRow-actions-inlineMetric > :nth-child(5){
    grid-area:actions;
    justify-self:end;
  }

  #jamChartOverlay .songRow.songRow-actions .rowBtn{
    height:22px;
    padding:0 6px;
    font-size:9.5px;
  }

  #jamChartOverlay .songRow.songRow-actions .rowActions{
    flex-wrap:wrap;
    justify-content:flex-end;
    max-width:210px;
  }

  #jamChartOverlay .songRow.songRow-actions .rowActionsStacked{
    justify-items:end;
    max-width:210px;
  }
}

@media (max-width:700px){
  .liveBroadcastBanner{
    z-index:8;
    margin-bottom:3px;
  }

  .liveBroadcastBannerBtn{
    min-height:32px;
    grid-template-columns:minmax(0,max-content) auto minmax(0,1fr) auto max-content;
    grid-template-areas:none;
    gap:4px;
    padding:4px 8px;
  }

  .liveBroadcastStation,
  .liveBroadcastTrack,
  .liveBroadcastDate{
    grid-area:auto;
    font-size:11px;
  }

  .liveBroadcastStation{
    max-width:31vw;
  }

  .liveBroadcastDivider{
    display:inline;
    font-size:11px;
  }

  .cardHeader,
  body.player-mode-min .cardHeader,
  body:not(.player-mode-min) .cardHeader{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    z-index:9;
    margin:0 0 4px;
  }

  .heroShell,
  body.player-mode-min .heroShell{
    padding-top:0;
  }
}