/* Vybe Check: one dark theme everywhere, matching the TV view. */
:root {
  --bg: #07070b;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.1);
  --surface-solid: #16151f; /* for things that must stay opaque, like select menus */
  --border: rgba(255, 255, 255, 0.12);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.64);
  --accent: #b9a4ff;
  --accent-text: #140f24;
  --ok: #4fd69c;
  --warn: #f5bd57;
  --danger: #ff7a85;
  --danger-text: #24070b;
  --radius: 18px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* layout classes must never un-hide things */
html, body { margin: 0; }
body { min-height: 100vh; background: var(--bg); color: var(--text); line-height: 1.45; -webkit-font-smoothing: antialiased; }

/* Backdrop: the now-playing art, blurred, under a vignette, like the TV. */
.page-backdrop {
  position: fixed; inset: -15%; z-index: -2; pointer-events: none;
  background: center / cover no-repeat; filter: blur(90px) saturate(1.5) brightness(0.45);
  transition: background-image 1.5s ease;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(185, 164, 255, 0.12), transparent 60%),
    radial-gradient(130% 100% at 50% 40%, transparent 45%, rgba(0, 0, 0, 0.6) 100%);
}

a { color: var(--accent); }
h1, h2, h3 { margin: 0; line-height: 1.1; }
h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
p { margin: 0; }
code { background: var(--surface-2); padding: 0.1em 0.4em; border-radius: 6px; word-break: break-all; }
.kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 8px; }

main { padding: 16px; margin: 0 auto; }
.narrow { max-width: 420px; padding-top: 10vh; display: grid; gap: 20px; }
.wide { max-width: 1100px; display: grid; gap: 18px; }
.guest { max-width: 560px; padding-bottom: 96px; }
.stack { display: grid; gap: 12px; align-content: start; grid-template-columns: minmax(0, 1fr); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row input, .row select { flex: 1 1 200px; width: auto; min-width: 0; max-width: 100%; }
.row.spread { justify-content: space-between; flex-wrap: nowrap; }
.row.spread > * { min-width: 0; }
.row.spread.wrap { flex-wrap: wrap; }
.row.centered { justify-content: center; }
.center { text-align: center; justify-items: center; }
.grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px;
  -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); text-decoration: none; }
.brand.big { font-size: 2.2rem; }
.brand-mark { display: inline-flex; align-items: flex-end; gap: 3px; height: 0.8em; }
.brand-mark i { width: 0.16em; border-radius: 2px; background: var(--accent); }
.brand-mark i:nth-child(1) { height: 45%; }
.brand-mark i:nth-child(2) { height: 100%; }
.brand-mark i:nth-child(3) { height: 65%; }
.brand-mark i:nth-child(4) { height: 85%; }

/* Admin navigation */
.nav { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding-top: 6px; }
.nav .brand { margin-right: auto; }
.nav-links { display: flex; gap: 2px; order: 3; flex-basis: 100%; overflow-x: auto; }
.nav-links a { color: var(--muted); text-decoration: none; font-weight: 600; padding: 9px 14px; border-radius: 10px; white-space: nowrap; }
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current=page] { color: var(--text); background: var(--surface-2); }
.nav-user { display: flex; align-items: center; gap: 10px; margin: 0; }
@media (min-width: 720px) {
  .nav-links { order: 0; flex-basis: auto; margin-right: auto; }
  .nav .brand { margin-right: 12px; }
}
@media (max-width: 480px) { .nav-user .who { display: none; } }

/* Forms */
label { display: grid; gap: 6px; font-size: 0.9rem; color: var(--muted); }
label.check { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input:not([type]), select {
  width: 100%; font: inherit; color: var(--text); background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; padding: 12px 14px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
input:hover, select:hover { border-color: rgba(255, 255, 255, 0.28); }
input:focus, select:focus { outline: none; border-color: var(--accent); background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
select option { background: var(--surface-solid); }
input::placeholder { color: rgba(255, 255, 255, 0.45); }
button:focus-visible, .button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type=search] { font-size: 1.05rem; }

/* Inputs with a leading icon (guest name and song search). */
.field-label { color: var(--text); font-size: 0.95rem; font-weight: 700; }
.input-icon { position: relative; }
.input-icon svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--muted); pointer-events: none; transition: color 0.15s; }
.input-icon input { padding-left: 46px; }
.input-icon:focus-within svg { color: var(--accent); }
.input-icon.search input { padding-top: 14px; padding-bottom: 14px; font-size: 1.1rem; }
.name-chip { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--border); }
.name-chip .chip-icon { width: 18px; height: 18px; color: var(--accent); flex: none; }
.name-chip span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
button.link-button { background: none; border: 0; padding: 4px 2px; color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.request-card { gap: 16px; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0; }
.details dt { color: var(--muted); }
.details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.person { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.person-info { min-width: 0; line-height: 1.7; }
.person-info .pill { margin-left: 4px; }

/* A rule with a tap-to-reveal explanation (works without hover, for phones). */
.field { display: grid; gap: 8px; }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field-head > label, .field-head > .label { color: var(--text); font-size: 0.92rem; font-weight: 600; }
button.info {
  position: relative; flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font: italic 700 0.85rem/1 Georgia, "Times New Roman", serif;
}
button.info::after { content: ""; position: absolute; inset: -8px; } /* 46px touch target */
button.info[aria-expanded=true] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.help { font-size: 0.88rem; line-height: 1.5; color: var(--muted); background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.form-section { display: grid; gap: 18px; }

/* TV background picker: a grid of live previews. */
.vibe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.vibe-option {
  display: grid; gap: 6px; padding: 6px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); font-size: 0.85rem; font-weight: 600; color: var(--muted);
}
.vibe-option input { position: absolute; opacity: 0; pointer-events: none; }
.vibe-option:has(input:checked) { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 1px var(--accent); }
.vibe-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.vibe-preview { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #07070b; }
.vibe-albumart { background: radial-gradient(60% 80% at 30% 40%, #8a4fd0 0%, transparent 70%), radial-gradient(60% 80% at 75% 65%, #d0466f 0%, transparent 70%), #1a1022; filter: saturate(1.2); }

button, .button {
  font: inherit; font-weight: 700; cursor: pointer; border: 1px solid transparent; border-radius: 12px;
  padding: 10px 18px; background: var(--accent); color: var(--accent-text); text-decoration: none; display: inline-block; text-align: center;
}
button:disabled { opacity: 0.45; cursor: default; }
button.ghost, .button.ghost { background: transparent; color: var(--text); border-color: var(--border); }
button.danger, .button.danger { background: var(--danger); color: var(--danger-text); }
button.small, .button.small { padding: 6px 12px; font-size: 0.85rem; border-radius: 10px; }
.button.block, button.block { display: block; width: 100%; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.85rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.notice { padding: 11px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.notice.ok { border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.notice.warn { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.notice.error { border-color: color-mix(in srgb, var(--danger) 60%, transparent); }

.pill { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); vertical-align: middle; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.pill.live { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.pill.pin { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }

.list { list-style: none; margin: 0; padding: 0; display: grid; }
.list li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.list li:last-child { border-bottom: 0; }

/* Tracks */
.queue, .results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.track { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; }
.queue .track:nth-child(odd), .results .track:nth-child(odd) { background: rgba(255, 255, 255, 0.04); }
.track .meta { display: grid; min-width: 0; flex: 1; }
.track .meta > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track .meta .pill { justify-self: start; margin-top: 3px; }
.art { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; background: var(--surface-2); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.track.big .art { width: 76px; height: 76px; }
.track.big strong { font-size: 1.15rem; font-weight: 800; }
.empty { padding: 8px; }

.now { display: grid; gap: 10px; }
.bar { height: 5px; background: rgba(255, 255, 255, 0.16); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #fff); transition: width 1s linear; }

.qr { width: 220px; height: 220px; border-radius: 14px; background: #fff; padding: 8px; }
.guest-head { padding: 8px 4px 0; display: grid; gap: 6px; }

/* Guest votes */
.votes { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.vote { background: transparent; color: var(--muted); border: 1px solid var(--border); padding: 3px 11px; font-size: 0.8rem; line-height: 1.4; border-radius: 8px; }
.vote.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.score { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 2ch; text-align: center; }

/* Admin queue controls */
.admin-queue .admin-item { flex-wrap: wrap; }
.admin-item.pinned { box-shadow: inset 3px 0 0 var(--accent); }
.admin-item[draggable=true] { cursor: grab; }
.admin-item.dragging { opacity: 0.4; }
.admin-item.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.admin-actions { display: flex; gap: 4px; flex: none; }
button.icon { padding: 7px 11px; font-size: 0.85rem; line-height: 1; }
button.icon.on { background: var(--surface-2); }
.admin-menu { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 4px 60px; }
.pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); max-width: calc(100% - 32px);
  background: #fff; color: #111; padding: 12px 18px; border-radius: 14px; font-weight: 700;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 10;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--danger); color: var(--danger-text); }

/* TV view: one screen, always dark, sized in vmin so it scales with any display. */
.tv {
  position: fixed; inset: 0; max-width: none; margin: 0; padding: 7vmin 6vmin; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 6vmin; align-items: center;
  background: #07070b; color: #fff; font-size: 2.2vmin; --tv-accent: #b9a4ff;
}
.tv.idle { cursor: none; }
.tv p { margin: 0; }
.tv-backdrop {
  position: absolute; inset: -15%; z-index: 0; background: center / cover no-repeat;
  filter: blur(90px) saturate(1.5) brightness(0.5); transition: background-image 1.5s ease;
}
/* Vignette keeps text readable over bright artwork. */
.tv::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 30% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.75) 100%);
}
.tv-now, .tv-side { position: relative; z-index: 1; min-width: 0; }

.tv-kicker { text-transform: uppercase; letter-spacing: 0.22em; font-weight: 700; font-size: 1.8vmin; color: var(--tv-accent); }
.tv-now { display: grid; gap: 5vmin; align-content: center; }
.tv-track { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5vmin; align-items: center; }
.tv-art {
  width: 48vmin; height: 48vmin; border-radius: 2.4vmin; object-fit: cover; background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4vmin 10vmin rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.tv-meta { display: grid; gap: 1.6vmin; min-width: 0; }
.tv-label { display: flex; align-items: center; gap: 1.4vmin; font-size: 1.9vmin; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; }
.tv-title {
  font-size: 6.4vmin; font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tv-artist { font-size: 3.4vmin; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-progress { display: grid; gap: 1.2vmin; margin-top: 2.5vmin; }
.tv-bar { height: 0.9vmin; border-radius: 1vmin; overflow: hidden; background: rgba(255, 255, 255, 0.16); }
.tv-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--tv-accent), #fff); transition: width 1s linear; }
.tv-time { display: flex; justify-content: space-between; font-size: 1.9vmin; opacity: 0.6; font-variant-numeric: tabular-nums; }
.tv-idle-title { font-size: 7vmin; font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; }
.tv-idle-sub { font-size: 3.2vmin; opacity: 0.7; }

/* Equalizer bars next to "Now playing". */
.tv-eq { display: inline-flex; align-items: flex-end; gap: 0.35vmin; height: 2.2vmin; }
.tv-eq i { width: 0.5vmin; height: 100%; border-radius: 0.3vmin; background: var(--tv-accent); transform-origin: bottom; animation: tv-eq 1.1s ease-in-out infinite; }
.tv-eq i:nth-child(2) { animation-delay: -0.45s; }
.tv-eq i:nth-child(3) { animation-delay: -0.8s; }
.tv-eq i:nth-child(4) { animation-delay: -0.2s; }
.tv-eq.paused i { animation-play-state: paused; opacity: 0.5; }
@keyframes tv-eq { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }

.tv-side { display: grid; gap: 4vmin; align-content: center; }
.tv-card {
  display: grid; gap: 2.2vmin; padding: 3.6vmin; border-radius: 3vmin; min-width: 0;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 2vmin 6vmin rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2);
}
.tv-card[hidden] { display: none; }
.tv-next { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2.6vmin; align-items: center; }
.tv-next-art { width: 13vmin; height: 13vmin; border-radius: 1.6vmin; object-fit: cover; background: rgba(255, 255, 255, 0.08); box-shadow: 0 1vmin 3vmin rgba(0, 0, 0, 0.4); }
.tv-next-title { font-size: 3.2vmin; font-weight: 700; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv-next-artist { font-size: 2.4vmin; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-small { font-size: 1.9vmin; opacity: 0.6; }
.tv-more { justify-self: start; font-size: 1.7vmin; font-weight: 600; padding: 0.6vmin 1.6vmin; border-radius: 99px; background: rgba(255, 255, 255, 0.1); opacity: 0.85; }
.tv-qr { justify-items: center; text-align: center; }
.tv-qr img { width: 30vmin; height: 30vmin; padding: 1.6vmin; border-radius: 2.2vmin; background: #fff; box-shadow: 0 1.5vmin 4vmin rgba(0, 0, 0, 0.4); }
.tv-url { font-size: 2.3vmin; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.tv-hint {
  position: absolute; bottom: 2.5vmin; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: 1.7vmin; opacity: 0.45; transition: opacity 1s;
}
.tv-hint.gone, :fullscreen .tv-hint { opacity: 0; }

/* Vibes: an animated canvas replaces the blurred cover. Blurring over a moving
   canvas every frame is too slow for TV browsers, so cards go solid instead. */
.tv-vibe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: none; }
.tv.vibe-on .tv-vibe { display: block; }
.tv.vibe-on .tv-backdrop { display: none; }
.tv.vibe-on .tv-card {
  background: rgba(14, 12, 22, 0.72); border-color: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.tv.vibe-on .tv-title, .tv.vibe-on .tv-artist, .tv.vibe-on .tv-idle-title, .tv.vibe-on .tv-lyrics { text-shadow: 0 0.3vmin 2vmin rgba(0, 0, 0, 0.7); }

/* Fade content in when the track changes. */
.tv-enter { animation: tv-enter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes tv-enter { from { opacity: 0; transform: translateY(2vmin) scale(0.985); } }
@media (prefers-reduced-motion: reduce) {
  .tv-eq i, .tv-enter { animation: none; }
}

/* 16:10 and similar: same layout as 16:9, slightly tighter. */
@media (orientation: landscape) and (max-aspect-ratio: 17/10) {
  .tv { padding: 5vmin; gap: 5vmin; }
  .tv-art { width: 42vmin; height: 42vmin; }
  .tv-title { font-size: 5.8vmin; }
  .tv-side { gap: 3vmin; }
  .tv-card { padding: 3vmin; gap: 1.8vmin; }
  .tv-next-art { width: 11vmin; height: 11vmin; }
  .tv-next-title { font-size: 2.9vmin; }
  .tv-qr img { width: 25vmin; height: 25vmin; }
}

/* Squarer landscape screens (4:3, 5:4): stack art over the title and shrink things. */
@media (orientation: landscape) and (max-aspect-ratio: 3/2) {
  .tv { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 5vmin; padding: 6vmin 5vmin; }
  .tv-now { gap: 3vmin; }
  .tv-track { grid-template-columns: minmax(0, 1fr); gap: 3vmin; }
  .tv-art { width: 38vmin; height: 38vmin; }
  .tv-title { font-size: 5.4vmin; -webkit-line-clamp: 2; }
  .tv-artist { font-size: 3vmin; }
  .tv-side { gap: 3vmin; }
  .tv-card { padding: 3vmin; gap: 1.8vmin; }
  .tv-next-art { width: 10vmin; height: 10vmin; }
  .tv-next-title { font-size: 2.8vmin; }
  .tv-qr img { width: 24vmin; height: 24vmin; }
}

/* Portrait screens still fit on one screen: now playing on top, cards below. */
@media (orientation: portrait) {
  .tv { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 5vmin; font-size: 2.6vmin; }
  .tv-track { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .tv-art { width: 55vmin; height: 55vmin; }
  .tv-side { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); align-items: start; }
  .tv-qr img { width: 32vmin; height: 32vmin; }
}

/* TV left column: now playing, plus lyrics when shown. */
.tv-left { position: relative; z-index: 1; min-width: 0; display: grid; gap: 4vmin; align-content: center; }

/* lyrics (optional): synced lyrics on the TV. Remove with internal/lyrics. */
/* lyrics.js sets --lyric-size so the chosen number of lines fits the space below the song info. */
.tv-lyrics { display: grid; align-content: center; gap: calc(var(--lyric-size, 4.8vmin) * 0.22); min-width: 0; min-height: 0; overflow: hidden; }
.tv-lyric { margin: 0; font-weight: 700; line-height: 1.2; min-height: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity 0.4s; }
.tv-lyric.near { font-size: calc(var(--lyric-size, 4.8vmin) * 0.58); }
.tv-lyric.d1 { opacity: 0.5; }
.tv-lyric.d2 { opacity: 0.32; }
.tv-lyric.d3 { opacity: 0.18; }
.tv-lyric.current {
  font-size: var(--lyric-size, 4.8vmin); color: #fff; white-space: normal; min-height: 2.4em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  text-shadow: 0 0 3vmin color-mix(in srgb, var(--tv-accent) 45%, transparent);
  animation: tv-enter 0.45s ease both;
}
.tv-lyrics-credit { margin: 0.6vmin 0 0; font-size: 1.5vmin; opacity: 0.4; }

/* With lyrics, the left column fills the screen height: song info on top
   (auto), lyrics in the rest (1fr). More lines means a smaller song header. */
.tv.has-lyrics { align-items: stretch; }
.tv.has-lyrics .tv-left { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; gap: 3vmin; }
.tv.has-lyrics .tv-side { align-content: center; }
.tv.has-lyrics .tv-now { gap: 2.5vmin; }
.tv.has-lyrics .tv-track { grid-template-columns: auto minmax(0, 1fr); gap: 3vmin; } /* art beside the title, never stacked: height goes to lyrics */
.tv.has-lyrics .tv-art { width: 32vmin; height: 32vmin; }
.tv.has-lyrics .tv-title { font-size: 5vmin; -webkit-line-clamp: 2; }
.tv.has-lyrics[data-lyric-lines="1"] .tv-art { width: 38vmin; height: 38vmin; }
.tv.has-lyrics[data-lyric-lines="5"] .tv-art { width: 20vmin; height: 20vmin; }
.tv.has-lyrics[data-lyric-lines="5"] .tv-title { font-size: 4vmin; -webkit-line-clamp: 1; }
.tv.has-lyrics[data-lyric-lines="7"] .tv-art { width: 14vmin; height: 14vmin; border-radius: 1.4vmin; }
.tv.has-lyrics[data-lyric-lines="7"] .tv-title { font-size: 3.4vmin; -webkit-line-clamp: 1; }
.tv.has-lyrics[data-lyric-lines="7"] .tv-artist { font-size: 2.4vmin; }
.tv.has-lyrics[data-lyric-lines="7"] .tv-label { display: none; }
.tv.has-lyrics[data-lyric-lines="7"] .tv-progress { margin-top: 1vmin; }
@media (orientation: portrait) {
  .tv.has-lyrics { grid-template-rows: minmax(0, 1fr) auto; }
  .tv.has-lyrics .tv-track { grid-template-columns: auto minmax(0, 1fr); }
  .tv.has-lyrics .tv-art { width: 24vmin; height: 24vmin; }
}

/* TV pairing screen */
.tv-pair .tv-kicker { display: flex; align-items: center; gap: 1vmin; }
.tv-steps { margin: 0; padding-left: 1.4em; font-size: 3vmin; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
.pair-code {
  font-size: 15vmin; font-weight: 800; letter-spacing: 0.08em; line-height: 1;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; color: #fff;
}
.tv-pair .tv-idle-sub strong { color: #fff; }
.tv-pair .tv-small { font-size: 2.4vmin; }
.mono { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; letter-spacing: 0.06em; }

/* Printable poster: always light, big QR. */
.poster { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; background: #fff; color: #111; max-width: none; }
.poster h1 { font-size: clamp(2rem, 6vw, 3.5rem); }
.poster-kicker { text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; color: #6a4cf0; }
.poster-qr { width: min(420px, 80vw); height: auto; }
.poster-url { font-family: ui-monospace, monospace; font-size: 1.1rem; word-break: break-all; }
.poster-hint { color: #555; }
.poster-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.2rem; color: #111; margin-top: 12px; }
.poster-brand .brand-mark i { background: #6a4cf0; }
/* Onboarding: the welcome page, the getting-started checklist and the tour. */
.row.end { justify-content: flex-end; }
button.big { font-size: 1.1rem; padding: 14px 28px; border-radius: 14px; }
.welcome { max-width: 900px; display: grid; gap: 24px; padding-top: 6vh; padding-bottom: 48px; }
.welcome h1 { font-size: clamp(2rem, 6vw, 3rem); text-wrap: balance; }
.welcome header .muted { max-width: 34em; }
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.how li { display: grid; gap: 8px; align-content: start; }
.how h3 { font-size: 1.15rem; }
.how p { margin: 0; }
.how-num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text); font-weight: 800; font-size: 1.1rem;
}
.needs { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }

.guide { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.guide-bar { width: 100%; height: 8px; appearance: none; border: 0; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.guide-bar::-webkit-progress-bar { background: var(--surface-2); }
.guide-bar::-webkit-progress-value { background: var(--accent); border-radius: 8px; }
.guide-bar::-moz-progress-bar { background: var(--accent); border-radius: 8px; }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.guide-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--border); }
.guide-step:first-child { border-top: 0; }
.guide-body { display: grid; gap: 2px; }
.guide-body p { margin: 0; }
.guide-check { width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; }
.guide-step.next .guide-check { border-color: var(--accent); }
.guide-step.done .guide-check { background: var(--ok); border-color: var(--ok); }
.guide-step.done .guide-check::after { content: ""; width: 6px; height: 11px; border: solid #062014; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.guide-step.done strong { color: var(--muted); font-weight: 600; }
@media (max-width: 560px) {
  .guide-step { grid-template-columns: auto minmax(0, 1fr); }
  .guide-step > .button { grid-column: 2; justify-self: start; }
}

.tour-spot {
  position: fixed; z-index: 50; pointer-events: none; border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 200vmax rgba(0, 0, 0, 0.6);
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.tour-pop {
  position: fixed; z-index: 51; display: grid; gap: 8px; padding: 16px 18px; border-radius: 16px;
  background: var(--surface-solid); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6); transition: top 0.25s ease, left 0.25s ease;
}
.tour-pop p { margin: 0; }
.tour-count { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.tour-title { font-size: 1.15rem; }
.tour-text { color: var(--muted); font-size: 0.95rem; }
.tour-pop .row.spread { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-pop { transition: none; } }

@media print { body { background: #fff; } }