/* Mobile guest page — "Event Jukebox" visual system:
   dark plum surfaces, yellow = current/owned, orange-red = actions,
   Noto Serif for headings and Noto Sans for everything else. */

:root {
  --bg-a: oklch(17% 0.03 325);
  --bg-b: oklch(13% 0.026 325);
  --card: oklch(22% 0.035 325);
  --thumb: oklch(28% 0.03 325);
  --line: oklch(100% 0 0 / 0.09);
  --line-soft: oklch(100% 0 0 / 0.08);
  --fill: oklch(100% 0 0 / 0.06);
  --fill-hover: oklch(100% 0 0 / 0.1);
  --gold: oklch(80% 0.14 85);
  --gold-ink: oklch(20% 0.04 85);
  --red: oklch(68% 0.18 32);
  --red-hover: oklch(60% 0.19 28);
  --red-ink: oklch(98% 0.01 40);
  --text-hi: oklch(97% 0.012 85);
  --text: oklch(94% 0.012 85);
  --warm: oklch(72% 0.03 55);
  --warm-soft: oklch(78% 0.02 60);
  --muted: oklch(56% 0.025 320);
  --faint: oklch(48% 0.02 320);
  --ok-bg: oklch(26% 0.045 150);
  --ok-border: oklch(70% 0.14 150 / 0.4);
  --ok-icon: oklch(70% 0.14 150);
  --ok-ink: oklch(20% 0.05 150);
  --ok-text: oklch(96% 0.02 150);
  --ok-sub: oklch(80% 0.05 150);
  --serif: "Noto Serif", Georgia, serif;
  --sans: "Noto Sans", "Segoe UI", Arial, sans-serif;
}

html { color-scheme: dark; }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

.hidden { display: none !important; }

@keyframes eqBounce {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid oklch(80% 0.14 85 / 0.85);
  outline-offset: 3px;
}

body {
  background: linear-gradient(180deg, var(--bg-a) 0%, var(--bg-b) 100%) fixed;
  color: var(--text);
  font-family: var(--sans);
  max-width: 600px;
  margin: 0 auto;
  padding: 2.2rem 1.4rem 4rem;
  min-height: 100vh;
}

/* ---- Header ---- */
header .brand-heading { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 54px; height: 54px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 6px 14px oklch(10% 0.03 325 / 0.35)); }
header h1 { font: 700 34px/1.25 var(--serif); color: var(--text-hi); }
header .h-sub { font: 600 15px/1.3 var(--sans); color: var(--warm); margin-top: 2px; }
header p { font: 400 13.5px/1.6 var(--sans); color: var(--muted); margin-top: 10px; }
header .desktop-intro { display: none; }
.leaderboard-link {
  width: max-content;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  padding: 0 11px;
  border: 1px solid oklch(80% 0.14 85 / 0.3);
  border-radius: 999px;
  background: oklch(80% 0.14 85 / 0.07);
  color: var(--gold);
  font: 700 11.5px/1 var(--sans);
  text-decoration: none;
}
.leaderboard-link:hover { background: oklch(80% 0.14 85 / 0.14); border-color: oklch(80% 0.14 85 / 0.58); }
.leaderboard-link-icon { font-size: 15px; line-height: 1; }

/* ---- Name field ---- */
.name-wrap {
  margin-top: 22px;
  height: 50px;
  border-radius: 14px;
  background: var(--fill);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
  color: oklch(55% 0.025 320);
}
.name-wrap:focus-within { border-color: oklch(100% 0 0 / 0.22); }
.name-wrap:has(input:required) { border-color: oklch(80% 0.14 85 / 0.35); }
.name-wrap input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font: 500 15px/1 var(--sans);
  color: oklch(90% 0.01 85);
  outline: none;
}
.name-wrap input::placeholder { color: var(--faint); font-weight: 400; }
.name-hint { font: 400 11.5px/1.3 var(--sans); color: var(--faint); margin-top: 6px; }

/* ---- Search ---- */
#search-form { margin-top: 18px; display: flex; gap: 10px; }
#q {
  flex: 1;
  min-width: 0;
  height: 50px;
  border-radius: 14px;
  background: var(--fill);
  border: 1px solid var(--line);
  padding: 0 16px;
  font: 400 14.5px/1 var(--sans);
  color: var(--text);
}
#q::placeholder { color: var(--faint); }
#q:focus { outline: none; border-color: oklch(100% 0 0 / 0.22); }
#search-btn {
  width: 64px;
  height: 50px;
  border-radius: 14px;
  background: var(--red);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--red-ink);
  cursor: pointer;
}
#search-btn:active { background: var(--red-hover); }

/* ---- Discovery ---- */
#suggestions-section { margin-top: 34px; }
.sug-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sec-title { font: 700 20px/1 var(--sans); color: var(--text-hi); }
.sec-title small {
  font: 500 12px/1 var(--sans);
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 4px;
}
.sug-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.shuffle,
.favorites-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--fill);
  border: 1px solid var(--line);
  color: var(--warm-soft);
  font: 600 13px/1 var(--sans);
  cursor: pointer;
}
.shuffle:active,
.favorites-toggle:active { background: var(--fill-hover); }
.favorites-toggle {
  color: oklch(84% 0.11 35);
  border-color: oklch(68% 0.18 32 / 0.38);
  background: oklch(68% 0.18 32 / 0.1);
}
.favorites-toggle svg { flex: 0 0 auto; }
.favorites-toggle.active {
  color: var(--red-ink);
  border-color: var(--red);
  background: var(--red);
}
.favorites-toggle.active svg { fill: currentColor; }
.favorites-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: oklch(100% 0 0 / 0.12);
  font: 700 10px/18px var(--sans);
  text-align: center;
}
@media (max-width: 520px) {
  .sug-head { align-items: flex-start; flex-wrap: wrap; }
  .sug-actions { width: 100%; margin-left: 0; }
  .sug-actions > button { flex: 1; justify-content: center; padding-inline: 10px; }
}

/* Singer row — genre-colored avatars with a yellow selected outline. */
.singers {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.singers::-webkit-scrollbar { display: none; }
.singer-chip {
  flex-shrink: 0;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 3px;
}
.singer-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(155deg, oklch(72% 0.15 45), oklch(60% 0.19 25));
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 20px/1 var(--sans);
  color: var(--red-ink);
}
.singer-chip.active .singer-avatar { box-shadow: 0 0 0 3px var(--gold); }
.singer-name { font: 500 12.5px/1 var(--sans); color: var(--warm); max-width: 64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.singer-chip.active .singer-name { color: var(--text); font-weight: 600; }

/* Genre tabs — icon and label chips with a yellow selected state. */
.genre-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.genre-tabs::-webkit-scrollbar { display: none; }
.genre-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--fill);
  border: 1px solid oklch(100% 0 0 / 0.1);
  color: var(--warm);
  font: 600 13.5px/1 var(--sans);
  white-space: nowrap;
  flex-shrink: 0;
}
.genre-tab.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--gold-ink);
  font-weight: 700;
}

/* ---- Results ---- */
.status { text-align: center; color: var(--muted); padding: 1rem; font: 400 13.5px/1.5 var(--sans); }
.loading-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.skeleton-results { list-style: none; margin-top: 20px; }
.skeleton-results li { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
.skeleton-thumb, .skeleton-line, .skeleton-action { display: block; background: linear-gradient(100deg, oklch(100% 0 0 / 0.06) 25%, oklch(100% 0 0 / 0.14) 50%, oklch(100% 0 0 / 0.06) 75%); background-size: 220% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.skeleton-thumb { width: 64px; height: 64px; border-radius: 10px; flex-shrink: 0; }
.skeleton-meta { flex: 1; min-width: 0; }
.skeleton-line { height: 12px; border-radius: 999px; }
.skeleton-title { width: 78%; }
.skeleton-sub { width: 46%; height: 9px; margin-top: 10px; }
.skeleton-action { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -20% 0; } }

.back-to-explore {
  display: block;
  width: 100%;
  margin: 16px 0 0;
  height: 46px;
  border-radius: 14px;
  background: var(--fill);
  border: 1px solid var(--line-soft);
  color: var(--warm-soft);
  font: 600 14px/1 var(--sans);
}

#results, #queue { list-style: none; }
#results { margin-top: 20px; }
#results:empty { display: none; }
#results li { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
#results img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--thumb);
}
.r-meta { flex: 1; min-width: 0; }
.r-title {
  font: 600 15px/1.35 var(--sans);
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.r-title.marquee-title { display: block; -webkit-line-clamp: unset; -webkit-box-orient: initial; white-space: nowrap; text-overflow: clip; }
.marquee-title { overflow: hidden; text-overflow: clip; }
.marquee-track { display: inline-block; min-width: 100%; padding-right: 3rem; white-space: nowrap; will-change: transform; }
.marquee-title.is-overflowing:hover .marquee-track,
.marquee-title.is-overflowing:focus-within .marquee-track { animation: title-marquee 16s linear infinite; }
@keyframes title-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(var(--marquee-distance)); }
}
.r-sub { font: 400 12.5px/1.3 var(--sans); color: var(--muted); margin-top: 4px; }
.r-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }
.add-btn {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  background: var(--red);
  border: none;
  color: var(--red-ink);
  font: 400 19px/1 var(--sans);
  flex-shrink: 0;
  cursor: pointer;
}
.add-btn:active { background: var(--red-hover); }
.add-btn:disabled {
  background: var(--fill);
  border: 1px solid oklch(100% 0 0 / 0.1);
  color: oklch(60% 0.02 320);
  font-size: 15px;
}
.favorite-btn {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid oklch(68% 0.18 32 / 0.36);
  border-radius: 50%;
  background: oklch(68% 0.18 32 / 0.08);
  color: oklch(84% 0.11 35);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.favorite-btn:hover { transform: translateY(-1px); border-color: var(--red); color: var(--red); }
.favorite-btn.is-favorite { border-color: var(--red); background: var(--red); color: var(--red-ink); }
.favorite-btn.is-favorite svg { fill: currentColor; }
.favorite-btn.is-pending svg { animation: vote-heart-pulse 650ms ease-in-out infinite; }
.favorite-btn:disabled { cursor: wait; opacity: .62; }

/* ---- Add by YouTube link -------------------------------------------------- */
.youtube-link-tool {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: oklch(100% 0 0 / 0.035);
  overflow: hidden;
}
.youtube-link-head {
  min-height: 70px;
  padding: 12px 12px 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.youtube-link-copy { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.youtube-link-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: oklch(65% 0.18 30 / 0.18);
  color: var(--red);
  display: grid;
  place-items: center;
  font-size: 12px;
  flex-shrink: 0;
}
.youtube-link-icon svg { display: block; }
.youtube-link-copy > div strong,
.youtube-link-copy > div span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.youtube-link-copy > div strong { font: 600 13.5px/1.3 var(--sans); color: var(--text); }
.youtube-link-copy > div span { margin-top: 3px; font: 400 12px/1.3 var(--sans); color: var(--muted); }
.link-toggle {
  height: 36px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid oklch(100% 0 0 / 0.13);
  background: var(--fill);
  color: var(--warm-soft);
  font: 600 12.5px/1 var(--sans);
  flex-shrink: 0;
}
.link-toggle:active { background: var(--fill-hover); }
.youtube-link-panel { padding: 0 14px 14px; }
.youtube-link-form { display: flex; gap: 8px; }
#youtube-link-input {
  min-width: 0;
  flex: 1;
  height: 44px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--fill);
  color: var(--text);
  padding: 0 12px;
  font: 400 13px/1 var(--sans);
  outline: none;
}
#youtube-link-input:focus { border-color: oklch(100% 0 0 / 0.25); }
#youtube-link-input::placeholder { color: var(--faint); }
#youtube-link-submit {
  height: 44px;
  padding: 0 13px;
  border: 0;
  border-radius: 11px;
  background: var(--red);
  color: var(--red-ink);
  font: 600 12.5px/1 var(--sans);
  white-space: nowrap;
}
#youtube-link-submit:disabled { opacity: 0.6; }
.youtube-link-status { min-height: 0; margin-top: 8px; font: 400 12px/1.35 var(--sans); color: var(--muted); }
.youtube-link-status.bad { color: oklch(76% 0.13 30); }
.youtube-link-status.ok { color: var(--ok-sub); }
.youtube-link-preview { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.youtube-link-preview img { width: 58px; height: 58px; border-radius: 9px; object-fit: cover; background: var(--thumb); flex-shrink: 0; }
.youtube-link-preview .r-title { font-size: 13.5px; }
.youtube-link-preview .r-sub { margin-top: 3px; }

.more {
  margin: 16px 0 0;
  width: 100%;
  height: 46px;
  border-radius: 14px;
  background: oklch(100% 0 0 / 0.05);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--warm-soft);
  font: 600 14px/1 var(--sans);
}
.more:disabled { opacity: 0.5; }
.more.hidden { display: none; }

/* ---- Feedback ------------------------------------------------------------- */
.feedback-section {
  margin-top: 34px;
  padding: 18px;
  border: 1px solid oklch(80% 0.14 85 / 0.28);
  border-radius: 16px;
  background: oklch(80% 0.14 85 / 0.07);
}
.feedback-head { display: flex; align-items: flex-start; gap: 12px; }
.feedback-head h2 { font: 700 20px/1.2 var(--sans); color: var(--text-hi); }
.feedback-head h2 small { font: 500 11px/1 var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.feedback-head p { margin-top: 5px; font: 400 12.5px/1.4 var(--sans); color: var(--muted); }
.feedback-mark { margin-left: auto; color: var(--gold); font-size: 22px; line-height: 1; }
.feedback-form { margin-top: 14px; }
.feedback-form input, .feedback-form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 11px; background: var(--fill);
  color: var(--text); font: 400 13.5px/1.4 var(--sans); outline: none;
}
.feedback-form input { height: 42px; padding: 0 12px; }
.feedback-form textarea { margin-top: 8px; padding: 10px 12px; resize: vertical; min-height: 76px; }
.feedback-form input:focus, .feedback-form textarea:focus { border-color: oklch(80% 0.14 85 / 0.6); }
.feedback-form input::placeholder, .feedback-form textarea::placeholder { color: var(--faint); }
.feedback-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.feedback-status { flex: 1; min-width: 0; font: 400 11.5px/1.35 var(--sans); color: var(--muted); }
.feedback-status.ok { color: var(--ok-sub); }
.feedback-status.bad { color: oklch(76% 0.13 30); }
#feedback-submit {
  height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--gold);
  color: var(--gold-ink); font: 700 12.5px/1 var(--sans); white-space: nowrap;
}
#feedback-submit:disabled { opacity: .55; }

/* ---- Up next & Playback history tabs ------------------------------------ */
.queue-section { margin-top: 38px; }
.queue-nav-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 14px;
  background: oklch(100% 0 0 / 0.04);
  border: 1px solid var(--line);
}
.queue-nav-tab {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 180ms ease;
}

.queue-nav-tab .tab-title {
  font: 700 16px/1.2 var(--sans);
  color: inherit;
}
.queue-nav-tab .tab-sub {
  font: 600 10.5px/1 var(--sans);
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.queue-nav-tab:hover {
  background: oklch(100% 0 0 / 0.04);
  color: var(--text);
}
.queue-nav-tab.active {
  background: oklch(100% 0 0 / 0.085);
  border-color: oklch(100% 0 0 / 0.1);
  color: var(--text-hi);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.queue-nav-tab.active .tab-title { color: var(--text-hi); }
.queue-nav-tab.active .tab-sub { color: var(--warm); }
.queue-nav-tab .count {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font: 700 11px/20px var(--sans);
  text-align: center;
  white-space: nowrap;
}
.queue-nav-tab-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.queue-nav-tab-item .tab-sub {
  margin-left: 0;
}
.count.history-badge {
  background: oklch(100% 0 0 / 0.12);
  color: var(--text);
}
.queue-tab-pane {
  min-height: 80px;
}
.queue-tab-pane.hidden {
  display: none !important;
}
.queue-section h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font: 700 20px/1 var(--sans);
  color: var(--text-hi);
}
.queue-section h2 small {
  font: 500 12px/1 var(--sans);
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.queue-limit-notice {
  margin: -2px 0 10px;
  padding: 10px 12px;
  border: 1px solid oklch(80% 0.14 85 / 0.35);
  border-radius: 11px;
  background: oklch(80% 0.14 85 / 0.1);
  color: var(--warm-soft);
  font: 500 12.5px/1.4 var(--sans);
}
.count {
  margin-left: auto;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px;
  background: var(--red);
  color: var(--red-ink);
  font: 700 12px/24px var(--sans);
  text-align: center;
}

.now-playing {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: oklch(28% 0.045 85 / 0.18);
  border: 1px solid oklch(80% 0.14 85 / 0.35);
  margin-top: 20px;
}
.now-playing img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--thumb);
}
.np-body { flex: 1; min-width: 0; }
.np-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.np-skip-own { min-height: 34px; padding: 0 10px; border: 1px solid oklch(80% 0.14 85 / .42); border-radius: 9px; background: oklch(80% 0.14 85 / .1); color: var(--gold); font: 700 11px/1 var(--sans); cursor: pointer; }
.np-skip-own:hover { background: oklch(80% 0.14 85 / .18); }
.np-skip-own:disabled { opacity: .55; cursor: wait; }
.np-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 10.5px/1 var(--sans);
  color: var(--gold);
  letter-spacing: 0.06em;
}
.np-title { font: 600 15px/1.3 var(--sans); color: oklch(95% 0.012 85); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.np-sub { font: 400 12px/1.3 var(--sans); color: oklch(60% 0.025 320); }

.eq { display: flex; align-items: flex-end; gap: 1.5px; height: 9px; }
.eq span { width: 2.2px; background: var(--gold); border-radius: 1px; display: inline-block; }
.eq span:nth-child(1) { height: 60%; animation: eqBounce 0.9s ease-in-out infinite; }
.eq span:nth-child(2) { height: 100%; animation: eqBounce 1.1s ease-in-out infinite 0.15s; }
.eq span:nth-child(3) { height: 45%; animation: eqBounce 0.8s ease-in-out infinite 0.3s; }

#queue li {
  display: grid;
  grid-template-columns: 18px 40px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  row-gap: 8px;
  padding: 12px 4px;
  border-bottom: 1px solid oklch(100% 0 0 / 0.07);
}
#queue li:last-child { border-bottom: 0; }
.q-num { width: 18px; text-align: center; font: 600 13px/1 var(--sans); color: oklch(50% 0.02 320); flex-shrink: 0; }
#queue > li > img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--thumb); }
.q-text { min-width: 0; flex: 1; }
.q-text .t-row { display: flex; align-items: center; gap: 7px; }
.q-text .t { min-width: 0; font: 600 15px/1.3 var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-byline {
  min-width: 0;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  color: var(--muted);
  font: 400 11px/1.35 var(--sans);
}
.q-byline .s {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.q-requester {
  display: block;
  width: 100%;
  margin-top: 1px;
  overflow-wrap: anywhere;
}
.q-requester-row { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.q-requester-avatar, .chat-message-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: oklch(80% .14 85 / .14); color: var(--gold); font-weight: 800; }
.q-requester-avatar { width: 18px; height: 18px; font-size: 8px; }
.q-requester-avatar img, .chat-message-avatar img, .user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.q-eta { font: 500 11px/1.3 var(--sans); color: var(--warm); margin-top: 3px; }
.q-you {
  flex-shrink: 0;
  background: var(--gold);
  color: var(--gold-ink);
  font: 700 10px/1 var(--sans);
  border-radius: 999px;
  padding: 2.5px 7px;
}
.q-favorite-btn { width: 28px; height: 28px; margin-left: auto; }
#queue li.q-empty {
  grid-column: 1 / -1;
  display: flex;
  min-height: 160px;
  padding: 26px 18px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px dashed oklch(100% 0 0 / 0.12);
  border-radius: 16px;
  background: linear-gradient(145deg, oklch(100% 0 0 / 0.04), transparent);
  color: var(--muted);
  text-align: center;
  font: 400 13px/1.45 var(--sans);
}
.q-empty-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 5px;
  border: 1px solid oklch(80% 0.14 85 / 0.3);
  border-radius: 50%;
  background: oklch(80% 0.14 85 / 0.1);
  color: var(--gold);
}
.q-empty strong { color: var(--text-hi); font: 700 15px/1.3 var(--sans); }
.q-remove-own {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--warm);
  font: 500 20px/1 var(--sans);
  flex-shrink: 0;
}
.q-remove-own:active { background: var(--fill-hover); color: var(--red); }
.q-remove-own:disabled { opacity: 0.45; }
.q-actions {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- Playback history ---------------------------------------------------- */
.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.history-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  padding: 11px 4px;
  border-bottom: 1px solid oklch(100% 0 0 / 0.07);
  transition: background 150ms ease;
}
.history-item:last-child {
  border-bottom: 0;
}
.history-item img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--thumb);
  flex-shrink: 0;
}
.history-text {
  min-width: 0;
}
.history-title {
  font: 600 14px/1.3 var(--sans);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-byline {
  display: block;
  font: 400 11px/1.3 var(--sans);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.history-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font: 500 10.5px/1.3 var(--sans);
}
.history-time {
  color: var(--warm-soft);
}
.history-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 600;
}
.history-tag.played {
  background: oklch(70% 0.15 145 / 0.15);
  color: oklch(85% 0.16 145);
  border: 1px solid oklch(70% 0.15 145 / 0.3);
}
.history-tag.skipped {
  background: oklch(70% 0.15 45 / 0.15);
  color: oklch(85% 0.16 45);
  border: 1px solid oklch(70% 0.15 45 / 0.3);
}
.history-readd-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid oklch(100% 0 0 / 0.12);
  background: oklch(100% 0 0 / 0.06);
  color: var(--text);
  font: 600 11.5px/1 var(--sans);
  cursor: pointer;
  transition: all 180ms ease;
  flex-shrink: 0;
}
.history-readd-btn:hover {
  background: var(--gold);
  color: var(--gold-ink);
  border-color: var(--gold);
  transform: translateY(-1px);
}
.history-readd-btn:active {
  transform: translateY(0);
}
.history-readd-btn:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}
.history-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  color: var(--muted);
  font: 500 12.5px/1 var(--sans);
}
.history-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid oklch(100% 0 0 / 0.15);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: historySpin 0.75s linear infinite;
  display: inline-block;
}
@keyframes historySpin {
  to { transform: rotate(360deg); }
}
.history-end {
  text-align: center;
  padding: 14px 8px;
  color: var(--muted);
  font: 400 12px/1.4 var(--sans);
  opacity: 0.75;
}
.history-sentinel {
  height: 1px;
  pointer-events: none;
  opacity: 0;
}

/* ---- Toasts ---------------------------------------------------------------- */
.toasts {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: min(90%, 400px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 20;
  pointer-events: none; /* feedback only; do not block touches on content below */
}
.toast {
  position: relative;
  overflow: hidden; /* clip the checking bar to the rounded corners */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(2rem);
  transition: all 0.25s ease;
}
.toast.show { opacity: 1; transform: none; }
.toast-ico {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fill);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}
.toast > div { min-width: 0; } /* allow the secondary line to ellipsize in flex */
.toast-main { font: 700 14.5px/1.3 var(--sans); color: var(--text-hi); }
.toast-sub {
  font: 400 12px/1.3 var(--sans);
  color: var(--muted);
  margin-top: 1px;
  /* keep long YouTube titles on one line */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast.ok { background: var(--ok-bg); border-color: var(--ok-border); }
.toast.ok .toast-ico { background: var(--ok-icon); color: var(--ok-ink); }
.toast.ok .toast-main { color: var(--ok-text); }
.toast.ok .toast-sub { color: var(--ok-sub); }
.toast.bad { border-color: oklch(68% 0.18 32 / 0.5); }
.toast.bad .toast-ico { background: oklch(68% 0.18 32 / 0.2); }
.toast.info { border-color: oklch(80% 0.14 85 / 0.4); }
.toast.info .toast-ico { background: oklch(80% 0.14 85 / 0.15); }

/* While the filter checks a song (web search can take 5–20 seconds), scan a
   light bar along the bottom and pulse the icon so the wait looks active rather
   than like a stuck card. */
.toast.checking::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, oklch(80% 0.14 85), transparent);
  animation: toast-scan 1.4s ease-in-out infinite;
}
@keyframes toast-scan {
  from { transform: translateX(-100%); } /* its width starts beyond the left edge */
  to { transform: translateX(250%); }    /* 250% of 40% carries it past the right edge */
}
.toast.checking .toast-ico { animation: toast-pulse 1.4s ease-in-out infinite; }
@keyframes toast-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

/* ---- Live chat ------------------------------------------------------------
   Progressive disclosure: show one floating button until needed, cap the
   panel height so it does not cover song selection, and close it with Escape. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.chat-widget { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 80; }
.chat-launcher {
  min-width: 76px;
  height: 48px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid oklch(80% 0.14 85 / 0.55);
  border-radius: 999px;
  background: linear-gradient(145deg, var(--gold), oklch(74% 0.15 62));
  color: var(--gold-ink);
  font: 700 13px/1 var(--sans);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, .4); filter: saturate(1.06); }
.chat-launcher:active { transform: translateY(1px); }
.chat-unread {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  color: var(--red-ink);
  font-size: 10px;
  line-height: 19px;
  text-align: center;
}
.chat-panel {
  position: absolute;
  right: 0;
  bottom: 60px;
  width: min(420px, calc(100vw - 28px));
  max-height: min(600px, calc(100dvh - 112px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid oklch(100% 0 0 / .13);
  border-radius: 18px;
  background: linear-gradient(180deg, oklch(24% .04 325 / .98), oklch(17% .03 325 / .98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .42);
  transform-origin: bottom right;
  animation: chat-panel-in 180ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes chat-panel-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.chat-panel-head { display: flex; align-items: flex-start; gap: 12px; padding: 15px 15px 12px; border-bottom: 1px solid var(--line); }
.chat-panel-head h2 { color: var(--text-hi); font: 700 16px/1.2 var(--sans); }
.chat-panel-head p { margin-top: 4px; color: var(--muted); font: 400 11.5px/1.35 var(--sans); }
.chat-close {
  width: 40px;
  height: 40px;
  margin: -5px -5px 0 auto;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--fill);
  color: var(--warm);
  cursor: pointer;
}
.chat-close:hover { background: var(--fill-hover); color: var(--text-hi); }
.chat-messages { min-height: 112px; max-height: 320px; padding: 12px 13px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: oklch(100% 0 0 / .2) transparent; }
.chat-empty { padding: 18px 8px; color: var(--muted); font: 400 12.5px/1.45 var(--sans); text-align: center; }
.chat-message { max-width: 88%; margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; background: oklch(100% 0 0 / .055); animation: chat-message-in 180ms ease both; }
.chat-message:last-child { margin-bottom: 0; }
.chat-message.is-own { margin-left: auto; border-color: oklch(80% .14 85 / .35); border-radius: 12px 12px 4px 12px; background: oklch(80% .14 85 / .13); }
.chat-message.is-own .chat-message-name { text-align: right; }
.chat-message.is-admin { border-color: oklch(68% .18 32 / .42); background: oklch(68% .18 32 / .12); }
.chat-message.is-admin .chat-message-name { color: oklch(82% .12 42); }
.chat-message.is-ai { border-color: oklch(72% .15 250 / .44); background: oklch(62% .15 250 / .13); }
.chat-message.is-ai .chat-message-name { color: oklch(86% .09 245); }
.chat-message.is-ai .chat-message-badge { background: oklch(62% .15 250); color: oklch(98% .01 250); }
.chat-message.is-system { border-color: oklch(80% .14 85 / .48); background: oklch(80% .14 85 / .14); }
.chat-message.is-system .chat-message-name { color: var(--gold); }
.chat-message.is-system .chat-message-badge { background: var(--gold); color: var(--gold-ink); }
.chat-message-badge { display: inline-block; margin-left: 4px; padding: 2px 5px; border-radius: 999px; background: var(--red); color: var(--red-ink); font: 700 8px/1 var(--sans); letter-spacing: .05em; vertical-align: 1px; }
.chat-message-rank { display: inline-block; margin-left: 4px; padding: 2px 6px; border: 1px solid oklch(80% .14 85 / .28); border-radius: 999px; color: var(--gold); background: oklch(80% .14 85 / .08); font: 700 8px/1 var(--sans); vertical-align: 1px; }
@keyframes chat-message-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.chat-message-name { display: block; margin-bottom: 3px; color: var(--gold); font: 700 11px/1.2 var(--sans); }
.chat-message-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.chat-message-head .chat-message-name { margin-bottom: 0; }
.chat-message-avatar { width: 20px; height: 20px; font-size: 9px; }
.chat-message-text { color: var(--text); font: 400 13px/1.42 var(--sans); overflow-wrap: anywhere; }
.chat-message-time { display: block; margin-top: 6px; color: var(--faint); font: 400 10px/1 var(--sans); }
.chat-message.is-own .chat-message-time { text-align: right; }
.chat-off-state { padding: 20px 14px; color: var(--muted); font: 400 13px/1.4 var(--sans); text-align: center; }
.chat-form { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.chat-form input, .chat-form textarea { min-width: 0; flex: 1; min-height: 42px; max-height: 112px; padding: 10px 11px; resize: none; border: 1px solid var(--line); border-radius: 11px; outline: none; background: var(--fill); color: var(--text); font: 400 13px/1.35 var(--sans); }
.chat-form input::placeholder, .chat-form textarea::placeholder { color: var(--faint); }
.chat-form input:focus, .chat-form textarea:focus { border-color: oklch(80% 0.14 85 / .62); }
.chat-form button { width: 42px; height: 42px; display: grid; place-items: center; flex-shrink: 0; border: 0; border-radius: 11px; background: var(--gold); color: var(--gold-ink); cursor: pointer; }
.chat-form button:disabled { opacity: .55; cursor: wait; }
.chat-status { min-height: 0; padding: 0 13px 10px; color: var(--muted); font: 400 11.5px/1.35 var(--sans); }
.chat-status.bad { color: oklch(76% .13 30); }
.chat-status.ok { color: var(--ok-sub); }
.q-rank-badge { display: inline-flex; align-items: center; max-width: 100%; margin: 3px 0 0; padding: 3px 6px; border: 1px solid oklch(80% .14 85 / .24); border-radius: 999px; color: var(--gold); background: oklch(80% .14 85 / .06); font-size: 9px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 699px) {
  .chat-widget { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .chat-launcher { min-width: 52px; width: 52px; height: 52px; padding: 0; border-radius: 16px; }
  .chat-launcher > span:not(.chat-unread) { display: none; }
  .chat-panel { position: fixed; inset: auto 0 0; width: 100%; height: min(84dvh, 720px); max-height: 84dvh; border-radius: 22px 22px 0 0; transform-origin: bottom center; padding-bottom: env(safe-area-inset-bottom); }
  .chat-panel-head { padding: 16px 18px 13px; }
  .chat-panel-head h2 { font-size: 18px; }
  .chat-panel-head p { font-size: 12px; }
  .chat-messages { flex: 1; min-height: 0; max-height: none; padding: 16px 18px; }
  .chat-message { max-width: 94%; margin-bottom: 12px; padding: 10px 12px; border-radius: 14px 14px 14px 5px; }
  .chat-message-text { font-size: 14px; line-height: 1.52; }
  .chat-message-name { font-size: 12px; }
  .chat-message-time { margin-top: 7px; font-size: 10.5px; }
  .chat-form { align-items: flex-end; padding: 12px 16px 14px; }
  .chat-form textarea { min-height: 46px; max-height: 128px; padding: 12px 13px; font-size: 14px; }
  .chat-form button { width: 46px; height: 46px; border-radius: 13px; }
}

/* ---- Desktop web layout ------------------------------------------------
   Mobile remains the default above. Larger screens get a three-part rhythm:
   discovery and search on the left, a sticky live queue on the right, and a
   compact identity/search row at wide desktop widths. */
@media (min-width: 700px) and (max-width: 899px) {
  body { max-width: 760px; padding: 32px 28px 72px; }
  header h1 { font-size: 40px; }
  .desktop-intro { display: block; max-width: 58ch; margin-top: 10px; color: var(--muted); font: 400 14px/1.6 var(--sans); }
  .genre-tabs { flex-wrap: wrap; overflow: visible; }
  #results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #results-skeleton { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #results li { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: oklch(100% 0 0 / 0.045); }
  #results-skeleton li { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: oklch(100% 0 0 / 0.045); }
  #results img { width: 72px; height: 72px; border-radius: 11px; }
  .queue-section { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: oklch(100% 0 0 / 0.035); }
}

@media (min-width: 900px) {
  html {
    min-height: 100%;
    background: oklch(10% 0.025 325);
  }
  body {
    position: relative;
    isolation: isolate;
    max-width: 1180px;
    padding: 32px 28px 80px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas:
      "header queue"
      "drop queue"
      "now queue"
      "name queue"
      "hint queue"
      "search queue"
      "explore queue"
      "back queue"
      "status queue"
      "results queue"
      "youtube queue"
      "more queue"
      "feedback queue";
    column-gap: 28px;
    align-items: start;
  }
  body::before {
    content: "";
    position: fixed;
    z-index: -1;
    width: 48vw;
    height: 48vw;
    max-width: 720px;
    max-height: 720px;
    top: -20vw;
    left: -14vw;
    border-radius: 50%;
    background: oklch(42% 0.12 320 / 0.16);
    filter: blur(80px);
    pointer-events: none;
  }
  body::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 32vw;
    height: 32vw;
    max-width: 500px;
    max-height: 500px;
    right: -8vw;
    bottom: -12vw;
    border-radius: 50%;
    background: oklch(62% 0.13 55 / 0.09);
    filter: blur(80px);
    pointer-events: none;
  }
  body > header { grid-area: header; padding: 4px 0 2px; }
  .brand-logo { width: 72px; height: 72px; }
  header h1 { font-size: clamp(38px, 4vw, 54px); letter-spacing: -0.025em; }
  header .h-sub { font-size: 16px; }
  .desktop-intro { display: block; max-width: 58ch; margin-top: 12px; color: var(--muted); font: 400 14px/1.6 var(--sans); }
  #now-playing { grid-area: now; margin-top: 24px; padding: 18px; border-radius: 18px; }
  .now-playing img { width: 72px; height: 72px; border-radius: 12px; }
  .np-title { font-size: 18px; }
  .np-sub { font-size: 13px; }
  .name-wrap { grid-area: name; margin-top: 24px; height: 54px; border-radius: 16px; background: oklch(100% 0 0 / 0.07); }
  .name-wrap input { font-size: 15px; }
  .name-hint { grid-area: hint; margin-top: 7px; padding-left: 3px; }
  #search-form { grid-area: search; margin-top: 18px; }
  #q, #search-btn { height: 56px; }
  #q { border-radius: 16px; font-size: 15px; }
  #search-btn { width: 68px; border-radius: 16px; }
  #suggestions-section { grid-area: explore; margin-top: 34px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: oklch(100% 0 0 / 0.035); }
  .sug-head { margin-bottom: 16px; }
  .sec-title { font-size: 21px; }
  .singers { gap: 14px; margin-bottom: 16px; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: oklch(100% 0 0 / 0.2) transparent; }
  .singer-chip { transition: transform 180ms ease, opacity 180ms ease; }
  .singer-chip:hover { transform: translateY(-3px); }
  .genre-tabs { overflow: visible; flex-wrap: wrap; }
  .genre-tab { transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; }
  .genre-tab:hover { transform: translateY(-1px); background: var(--fill-hover); }
  .genre-tab.active:hover { background: var(--gold); }
  #back-to-explore { grid-area: back; }
  #status { grid-area: status; text-align: left; padding: 14px 2px 4px; }
  #results-area { grid-area: results; }
  #results { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; margin-top: 16px; }
  #results-skeleton { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; margin-top: 16px; }
  #results-skeleton li { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: oklch(100% 0 0 / 0.045); }
  #results li { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: oklch(100% 0 0 / 0.045); transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease; }
  #results li:hover { transform: translateY(-2px); border-color: oklch(80% 0.14 85 / 0.35); background: oklch(100% 0 0 / 0.075); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }
  #results img { width: 72px; height: 72px; border-radius: 11px; }
  .r-title { font-size: 14.5px; }
  .r-actions .add-btn,
  .r-actions .favorite-btn { width: 42px; height: 42px; }
  #youtube-link-tool { grid-area: youtube; margin-top: 22px; }
  #more { grid-area: more; }
  #feedback-section { grid-area: feedback; margin-top: 28px; }
  .queue-section { grid-area: queue; position: sticky; top: 24px; max-height: calc(100dvh - 48px); overflow-y: auto; margin-top: 0; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, oklch(24% 0.04 325 / 0.96), oklch(18% 0.03 325 / 0.96)); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22); scrollbar-width: thin; scrollbar-color: oklch(100% 0 0 / 0.18) transparent; }
  .queue-section h2 { margin-bottom: 16px; }
  #queue li.q-empty { min-height: 220px; }
  #queue li { grid-template-columns: 18px 48px minmax(0, 1fr); padding: 14px 4px; border-radius: 11px; transition: background 180ms ease, transform 180ms ease; }
  #queue li:not(.q-empty):hover { background: oklch(100% 0 0 / 0.055); transform: translateX(2px); }
  #queue > li > img { width: 48px; height: 48px; }
  .q-text .t { font-size: 14px; }
  .q-remove-own { width: 34px; height: 34px; }
}

@media (min-width: 1180px) {
  body {
    max-width: 1440px;
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) 380px;
    grid-template-areas:
      "header header queue"
      "drop drop queue"
      "now now queue"
      "name search queue"
      "hint search queue"
      "explore explore queue"
      "back back queue"
      "status status queue"
      "results results queue"
      "youtube youtube queue"
      "more more queue"
      "feedback feedback queue";
  }
  #search-form { margin-top: 24px; }
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  @keyframes guestDesktopEnter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  body > header, #now-playing:not(.hidden), #search-form, #suggestions-section, .queue-section { animation: guestDesktopEnter 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  #now-playing:not(.hidden) { animation-delay: 60ms; }
  #search-form { animation-delay: 100ms; }
  #suggestions-section { animation-delay: 140ms; }
  .queue-section { animation-delay: 100ms; }
  #results li { animation: guestDesktopEnter 360ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  #results li:nth-child(2) { animation-delay: 35ms; }
  #results li:nth-child(3) { animation-delay: 70ms; }
  #results li:nth-child(4) { animation-delay: 105ms; }
  #results li:nth-child(5) { animation-delay: 140ms; }
  #results li:nth-child(6) { animation-delay: 175ms; }
}

/* ---- User Auth Bar & Point Drop Banner ---- */
.user-auth-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
}
.auth-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--fill);
  color: var(--text);
  font: 600 13px/1 var(--sans);
  cursor: pointer;
  transition: all 180ms ease;
}
.auth-pill-btn:hover {
  background: var(--fill-hover);
  border-color: var(--gold);
}

.user-profile-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
}
.user-account-link {
  min-width: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  text-decoration: none;
}
.user-account-link:hover { color: var(--text-hi); }
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: oklch(80% 0.14 85 / 0.14);
  border: 1px solid oklch(80% 0.14 85 / 0.35);
  color: var(--gold);
  font-weight: 800;
  overflow: hidden;
}
.user-name { min-width: 0; overflow-wrap: anywhere; }
.user-points-pill {
  color: var(--gold);
  font-weight: 700;
  cursor: pointer;
}
.user-streak-pill {
  color: var(--red);
  font-weight: 700;
  cursor: pointer;
}
.notification-bell {
  position: relative;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--fill);
  color: var(--gold);
  cursor: pointer;
}
.notification-bell:hover { background: var(--fill-hover); border-color: oklch(80% .14 85 / .5); }
.notification-bell:disabled { cursor: default; opacity: .55; }
.notification-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border: 2px solid var(--card);
  border-radius: 999px;
  background: var(--red);
  color: var(--red-ink);
  font: 800 9px/13px var(--sans);
  text-align: center;
}
.user-logout-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}
.user-logout-btn:hover { color: var(--text-hi); }

/* Point Drop Banner */
.point-drop-banner {
  grid-area: drop;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 14px 0 4px;
  padding: 16px;
  border: 1px solid oklch(80% 0.14 85 / 0.5);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, oklch(80% 0.14 85 / 0.14), transparent 42%),
    linear-gradient(135deg, oklch(28% 0.08 325), oklch(20% 0.05 325));
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  animation: drop-pop 0.3s ease;
}
@keyframes drop-pop {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.drop-banner-content {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}
.drop-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid oklch(80% 0.14 85 / 0.28);
  border-radius: 50%;
  background: oklch(80% 0.14 85 / 0.1);
  font-size: 22px;
}
.drop-text { min-width: 0; }
.drop-text strong { display: block; color: var(--text-hi); font: 700 14px/1.4 var(--sans); overflow-wrap: anywhere; }
.drop-text span { display: block; margin-top: 3px; color: var(--gold); font: 600 12px/1.4 var(--sans); overflow-wrap: anywhere; }
.drop-claim-btn {
  width: 100%;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 12px;
  border: 0;
  background: var(--gold);
  color: var(--gold-ink);
  font: 800 13px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 150ms ease;
}
.drop-claim-btn:hover { transform: translateY(-1px); }
@media (min-width: 600px) {
  .point-drop-banner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .drop-claim-btn { width: auto; min-width: 112px; }
}

/* Queue Voting & Badges */
.q-vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 112px;
  min-height: 44px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--fill);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}
.q-vote-btn svg { flex-shrink: 0; }
.q-vote-btn:disabled { cursor: default; opacity: 1; }
.q-vote-btn.is-pending { cursor: wait; }
.q-vote-btn.is-pending svg { animation: vote-heart-pulse 650ms ease-in-out infinite; }
@keyframes vote-heart-pulse {
  50% { opacity: .5; transform: scale(.72); }
}
.q-vote-btn:hover {
  background: oklch(68% 0.18 32 / 0.2);
  border-color: var(--red);
  color: var(--red);
}
.q-vote-btn.has-voted {
  background: oklch(68% 0.18 32 / 0.14);
  color: oklch(84% 0.11 35);
  border-color: oklch(68% 0.18 32 / 0.48);
}
.q-vote-btn.has-voted:hover { background: oklch(68% 0.18 32 / 0.24); color: var(--red); }
@media (min-width: 900px) {
  .q-vote-btn { min-height: 36px; }
}
.q-pinned-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: oklch(80% 0.14 85 / 0.2);
  color: var(--gold);
  border: 1px solid oklch(80% 0.14 85 / 0.4);
}

/* Modals */
.guest-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.guest-modal-card {
  width: min(440px, calc(100% - 32px));
  padding: 24px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
}
.guest-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.guest-modal-head h3 { font: 700 18px/1.2 var(--serif); color: var(--text-hi); }
.modal-x-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 24px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
}
.notification-eyebrow { margin-bottom: 4px; color: var(--gold); font: 700 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.notification-modal-card { width: min(460px, calc(100% - 32px)); max-height: min(78dvh, 640px); display: flex; flex-direction: column; }
.notification-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.notification-toolbar > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.notification-toolbar button, .notification-retry { min-height: 34px; padding: 0 10px; border: 1px solid oklch(80% .14 85 / .35); border-radius: 9px; background: oklch(80% .14 85 / .08); color: var(--gold); font: 700 11px/1 var(--sans); cursor: pointer; }
.notification-toolbar button:hover, .notification-retry:hover { background: oklch(80% .14 85 / .16); }
.notification-toolbar button:disabled { cursor: default; opacity: .45; }
.notification-list { min-height: 100px; max-height: min(58dvh, 470px); display: grid; gap: 8px; overflow-y: auto; padding: 2px 3px 2px 0; overscroll-behavior: contain; }
.notification-item { width: 100%; display: block; padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--fill); color: var(--text); text-align: left; cursor: pointer; }
.notification-item:hover { background: var(--fill-hover); border-color: oklch(80% .14 85 / .4); }
.notification-item.is-unread { border-color: oklch(80% .14 85 / .42); background: oklch(80% .14 85 / .08); }
.notification-item.is-pending { cursor: wait; opacity: .65; }
.notification-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.notification-item-meta time { color: var(--faint); font-size: 10px; }
.notification-kind { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: var(--fill); color: var(--muted); font: 800 10px/1 var(--sans); }
.notification-kind.kind-maintenance { background: oklch(68% .18 32 / .13); color: var(--red); }
.notification-kind.kind-feature { background: oklch(70% .14 150 / .13); color: var(--ok-icon); }
.notification-item strong, .notification-item > span:last-child { display: block; overflow-wrap: anywhere; }
.notification-item strong { color: var(--text-hi); font: 700 13px/1.35 var(--sans); }
.notification-item > span:last-child { margin-top: 4px; color: var(--muted); font: 400 12px/1.45 var(--sans); white-space: pre-wrap; }
.notification-state { display: grid; place-items: center; gap: 5px; min-height: 120px; padding: 20px 12px; color: var(--muted); font-size: 13px; text-align: center; }
.notification-state strong { color: var(--text-hi); font-size: 14px; }
.notification-state p { max-width: 34ch; margin: 0; }
.notification-state .notification-retry { margin-top: 5px; }
.notification-error { display: grid; gap: 5px; padding: 10px 11px; border: 1px solid oklch(68% .18 32 / .35); border-radius: 11px; background: oklch(68% .18 32 / .1); color: var(--muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.notification-error strong { color: var(--red); font-size: 12px; }
.notification-error .notification-retry { justify-self: start; }
.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.auth-tab-btn {
  flex: 1;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--fill);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.auth-tab-btn.active {
  background: var(--gold);
  color: var(--gold-ink);
  border-color: var(--gold);
  font-weight: 800;
}
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 13px; color: var(--warm); margin-bottom: 6px; font-weight: 600; }
.auth-field input {
  width: 100%;
  height: 46px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--fill);
  color: var(--text);
  padding: 0 12px;
  font-size: 16px;
}
.auth-field input:focus { border-color: var(--gold); outline: none; }
.password-input-wrap { position: relative; }
.password-input-wrap input { padding-right: 52px; }
.password-toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--warm-soft);
  cursor: pointer;
}
.password-toggle:hover { background: var(--fill-hover); color: var(--text-hi); }
.password-toggle:disabled { display: none; }
.auth-field-error {
  min-height: 18px;
  margin-top: 5px;
  color: oklch(82% 0.13 30);
  font-size: 12px;
  line-height: 1.4;
}
.auth-field input[aria-invalid="true"] { border-color: var(--red); }
.auth-error-msg {
  padding: 8px 12px;
  border-radius: 8px;
  background: oklch(68% 0.18 32 / 0.18);
  color: var(--red);
  font-size: 12px;
  margin-bottom: 14px;
  border: 1px solid oklch(68% 0.18 32 / 0.4);
}
.auth-submit-btn {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 0;
  background: var(--gold);
  color: var(--gold-ink);
  font: 800 14px/1 var(--sans);
  cursor: pointer;
  transition: transform 150ms ease;
}
.auth-submit-btn:hover { transform: translateY(-1px); }
.auth-submit-btn:disabled { cursor: wait; opacity: .72; transform: none; }

@media (max-width: 430px) {
  .user-profile-badge { width: 100%; border-radius: 18px; flex-wrap: wrap; }
  .user-account-link { flex: 1 1 130px; }
}

/* Checkin Modal Styles */
.checkin-streak-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--fill);
  margin-bottom: 20px;
}
.streak-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), oklch(60% 0.19 28));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.streak-num { font: 800 22px/1 var(--sans); }
.streak-lbl { font: 600 9px/1 var(--sans); text-transform: uppercase; margin-top: 2px; }
.streak-desc h4 { font-size: 15px; color: var(--text-hi); margin-bottom: 4px; }
.streak-desc p { font-size: 12px; color: var(--muted); line-height: 1.4; }

.checkin-rank-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid oklch(80% 0.14 85 / 0.3);
  border-radius: 14px;
  background: oklch(80% 0.14 85 / 0.08);
}
.checkin-rank-badge { font-size: 27px; line-height: 1; }
.checkin-rank-summary > div { min-width: 0; }
.checkin-rank-summary strong, .checkin-rank-summary span { display: block; overflow-wrap: anywhere; }
.checkin-rank-summary strong { color: var(--text-hi); font-size: 13px; }
.checkin-rank-summary span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.rank-benefits { margin-bottom: 18px; }
.rank-benefits-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rank-benefits-head strong { color: var(--text-hi); font-size: 12px; }
.rank-benefits-head span { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.rank-benefits-list { max-height: 218px; display: grid; gap: 5px; overflow-y: auto; padding-right: 3px; overscroll-behavior: contain; }
.rank-benefit-row { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--fill); }
.rank-benefit-row.current { border-color: var(--gold); background: oklch(80% 0.14 85 / 0.12); }
.rank-benefit-icon { font-size: 17px; line-height: 1; text-align: center; }
.rank-benefit-copy { min-width: 0; }
.rank-benefit-copy strong, .rank-benefit-copy small { display: block; overflow-wrap: anywhere; }
.rank-benefit-copy strong { color: var(--text-hi); font-size: 11px; }
.rank-benefit-copy small { margin-top: 1px; color: var(--muted); font-size: 10px; }
.rank-benefit-reward { color: var(--green); font-size: 11px; font-weight: 800; white-space: nowrap; }
.rank-benefits-state { display: block; padding: 12px; border-radius: 10px; background: var(--fill); color: var(--muted); font-size: 12px; text-align: center; }

.checkin-milestones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.milestone-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--fill);
}
.milestone-step.achieved {
  border-color: var(--gold);
  background: oklch(80% 0.14 85 / 0.1);
}
.ms-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  color: var(--gold);
  border: 1px solid var(--line);
}
.ms-info strong { display: block; font-size: 12px; color: var(--text-hi); }
.ms-info span { font-size: 11px; color: var(--green); font-weight: 700; }

.do-checkin-btn {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 0;
  background: linear-gradient(135deg, var(--gold), oklch(74% 0.15 62));
  color: var(--gold-ink);
  font: 800 15px/1 var(--sans);
  cursor: pointer;
  transition: transform 150ms ease;
}
.do-checkin-btn:hover { transform: translateY(-1px); }
.do-checkin-btn:disabled { opacity: 0.6; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .marquee-title.is-overflowing:hover .marquee-track,
  .marquee-title.is-overflowing:focus-within .marquee-track { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}