:root {
  --bg: #0b0b10;
  --bg2: #14141c;
  --card: #181823;
  --card2: #1f1f2c;
  --fg: #ececf4;
  --muted: #9a9ab0;
  --line: #2a2a3a;
  --accent: #ff4fa3;
  --accent2: #47e0ff;
  --up: #3ddc84;
  --down: #ff5d5d;
  --gold: #ffd166;
  --radius: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }
kbd { background: var(--card2); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-size: 12px; }
code { background: var(--card2); padding: 1px 5px; border-radius: 4px; }
.muted { color: var(--muted); }
.grow { flex: 1; }

[hidden] { display: none !important; }   /* class display rules must never resurrect an element marked hidden */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 18px; padding: 10px 18px; background: linear-gradient(180deg, rgba(11,11,16,.98), rgba(11,11,16,.92)); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.ball { font-size: 30px; filter: drop-shadow(0 0 10px var(--accent)); }
.brand h1 { margin: 0; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; }
.sub { color: var(--muted); font-size: 12px; }
.tabs { display: flex; gap: 6px; }
.tab { background: transparent; color: var(--muted); border: 1px solid transparent; padding: 7px 12px; border-radius: 999px; cursor: pointer; font-size: 14px; }
.tab.active { color: var(--fg); background: var(--card2); border-color: var(--line); }
.pill { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--line); font-size: 12px; text-align: center; }
.actions { margin-left: auto; display: flex; gap: 8px; }

.btn { background: var(--card2); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; cursor: pointer; font-size: 14px; }
.btn:hover { border-color: var(--muted); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #140812; font-weight: 600; }
.btn.ghost { background: transparent; }
.btn.up { border-color: rgba(61,220,132,.5); }
.btn.down { border-color: rgba(255,93,93,.5); }
.btn.up:hover { background: rgba(61,220,132,.15); }
.btn.down:hover { background: rgba(255,93,93,.15); }

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--bg2); }
.filters input[type=search], .filters select, .settings-form input, .settings-form select { background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font-size: 14px; }
.filters input[type=search] { min-width: 240px; flex: 1; max-width: 420px; }
.chk { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; cursor: pointer; }
.hint { color: var(--muted); font-size: 12px; margin-left: auto; }

main { padding: 14px 18px 140px; max-width: 1200px; margin: 0 auto; }
.list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.card { position: relative; display: grid; grid-template-columns: 96px 1fr 150px; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; outline: none; transition: border-color .15s, transform .15s; }
.card:focus, .card.current { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,79,163,.25); }
.card.new::before { content: "new"; position: absolute; top: 6px; right: 10px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.card.rated-up { border-color: rgba(61,220,132,.6); }
.card.rated-down { opacity: .55; border-color: rgba(255,93,93,.5); }
.card.filed { border-color: rgba(61,220,132,.35); }
.art { position: relative; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--card2); cursor: pointer; }
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art .play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; color: #fff; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .15s; }
.art:hover .play, .card.current .art .play { opacity: 1; }
.art.unplayable { cursor: default; }
.art.unplayable .play { display: none; }
.body { min-width: 0; }
.line1 { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.artist { font-weight: 700; font-size: 16px; }
.match { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--card2); color: var(--muted); }
.match.direct { color: var(--up); background: rgba(61,220,132,.12); }
.match.similar { color: var(--accent2); background: rgba(71,224,255,.12); }
.title { font-size: 15px; margin-top: 2px; }
.line3 { color: var(--muted); font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.reasons { color: var(--muted); font-size: 12px; margin-top: 4px; }
.tags, .sources, .links { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.tag { font-size: 11px; background: var(--card2); border-radius: 6px; padding: 1px 6px; color: var(--muted); }
.src { font-size: 11px; border-radius: 6px; padding: 1px 6px; border: 1px solid var(--line); color: var(--muted); }
.src.listenbrainz { border-color: #eb743b66; } .src.bandcamp { border-color: #1da0c366; } .src.musicbrainz { border-color: #ba478f66; }
.src.deezer, .src.deezer-editorial, .src.deezer-related { border-color: #a238ff66; } .src.rss { border-color: #ffd16666; } .src.spotify { border-color: #1db95466; }
.src.ytmusic, .src.youtube { border-color: #ff000066; } .src.radio { border-color: #47e0ff66; } .src.musicbrainz-label { border-color: #ff4fa366; }
.links a { font-size: 12px; }
.side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.score { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.year { background: var(--card2); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; font-size: 13px; }
.thumbs { display: flex; gap: 6px; }
.thumbs .btn { font-size: 18px; padding: 6px 12px; }
.status { font-size: 11px; color: var(--muted); }

.empty { text-align: center; color: var(--muted); padding: 60px 20px; }

.player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: 220px 1fr; gap: 14px; padding: 10px 18px; background: rgba(20,20,28,.97); border-top: 1px solid var(--line); backdrop-filter: blur(8px); }
.player-frame { width: 220px; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000; }
.player-frame iframe { width: 100%; height: 100%; }
.player-meta { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.now { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

dialog { background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); max-width: 560px; width: calc(100% - 32px); padding: 0; }
dialog::backdrop { background: rgba(0,0,0,.6); }
.settings-form { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.settings-form h2 { margin: 0 0 4px; font-size: 18px; }
.settings-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.settings-form label.chk { flex-direction: row; }
.row { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.confirm-list { max-height: 40vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.confirm-list h4 { margin: 8px 0 4px; color: var(--accent2); }
.confirm-list div { display: flex; gap: 8px; }
.toast { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); background: var(--card2); border: 1px solid var(--line); color: var(--fg); padding: 10px 16px; border-radius: 10px; z-index: 30; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.toast.err { border-color: var(--down); }

footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px 140px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .card { grid-template-columns: 72px 1fr; }
  .art { width: 72px; height: 72px; }
  .side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .player { grid-template-columns: 128px 1fr; gap: 10px; padding: 8px 12px; }
  .player-frame { width: 128px; }
  .player-controls .btn { padding: 5px 9px; }
  .hint { display: none; }
  main, footer { padding-bottom: 150px; }
}

/* curator mode: rating tools only show once a GitHub token is saved in this browser */
body:not(.curator) .curator { display: none !important; }
.mode { display: none; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--up); border: 1px solid rgba(61,220,132,.4); border-radius: 999px; padding: 3px 9px; align-self: center; }
body.curator .mode { display: inline-block; }
.sources-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sources-filter label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px 3px 6px; cursor: pointer; user-select: none; }
.sources-filter label.on { color: var(--fg); background: var(--card2); }
.sources-filter input { margin: 0; accent-color: var(--accent); }
.sources-filter .all { font-size: 11px; color: var(--accent2); background: none; border: none; cursor: pointer; padding: 0 4px; }
.who { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.who img { width: 22px; height: 22px; border-radius: 50%; }
.toast .btn { margin-left: 12px; padding: 3px 10px; font-size: 13px; color: var(--accent2); border-color: var(--accent2); }
.filters.picks > *:not(#q) { display: none; }

/* legal pages */
body.doc .top { position: static; }
body.doc .brand h1 a { color: var(--fg); text-decoration: none; }
body.doc .tab { text-decoration: none; }
.prose { max-width: 820px; margin: 0 auto; padding: 24px 18px 60px; line-height: 1.6; }
.prose h2 { font-size: 18px; margin: 28px 0 8px; color: var(--accent2); }
.prose h3 { font-size: 15px; margin: 18px 0 6px; }
.prose ul { padding-left: 22px; }
.prose li { margin: 6px 0; }
body.doc footer { padding-bottom: 40px; }
.yearbadge { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); cursor: help; }
.yearbadge.high { color: var(--up); border-color: rgba(61,220,132,.4); }
.yearbadge.medium { color: var(--fg); }
.yearbadge.low { color: var(--gold); border-color: rgba(255,209,102,.5); }
.card.new .side { padding-top: 14px; }
.feeds { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.feeds span { font-size: 11px; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--muted); }
.feeds span.ok { color: var(--fg); } .feeds span.dead { color: var(--down); border-color: rgba(255,93,93,.4); }
details summary { cursor: pointer; font-size: 13px; }
.blog-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; max-height: 50vh; overflow: auto; }
.sources-filter .pick { border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; color: var(--accent2); }
body.guest .mode { color: var(--accent2); border-color: rgba(71,224,255,.4); }

/* audition progress + swipe */
.audition-bar { flex: 1 1 120px; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; min-width: 80px; }
.audition-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s linear; }
.card { touch-action: pan-y; will-change: transform; }
.card.swiping { transition: none; }
.card.swipe-up { border-color: var(--up); background: rgba(61,220,132,.08); }
.card.swipe-down { border-color: var(--down); background: rgba(255,93,93,.08); }
@media (display-mode: standalone) { .top { padding-top: max(10px, env(safe-area-inset-top)); } .player { padding-bottom: max(10px, env(safe-area-inset-bottom)); } }

/* ---------- deck mode (one card at a time; default on phones) ---------- */
.mobile-only { display: none; }
.deck { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.deck-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; }
.deck-count { font-variant-numeric: tabular-nums; }
.dcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; outline: none; touch-action: pan-y; will-change: transform; }
.dcard.current { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,79,163,.25); }
.dcard.swipe-up { border-color: var(--up); background: rgba(61,220,132,.08); }
.dcard.swipe-down { border-color: var(--down); background: rgba(255,93,93,.08); }
.dart { position: relative; aspect-ratio: 1 / 1; max-height: 46vh; background: var(--card2); display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.dart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dart .dplay { position: absolute; inset: 0; display: grid; place-items: center; font-size: 64px; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.7); opacity: .85; }
.dcard.current .dart .dplay { opacity: 0; }
.dart .yearbadge { position: absolute; left: 10px; bottom: 10px; background: rgba(11,11,16,.75); backdrop-filter: blur(4px); font-size: 12px; }
.dbody { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.dartist { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.dtitle { font-size: 17px; }
.dmeta { color: var(--muted); font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; }
.dwhy { font-size: 13px; color: var(--accent2); }
.dtags, .dsources { display: flex; gap: 5px; flex-wrap: wrap; }
.drow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.dlinks { font-size: 12px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.deck-actions { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 4px 0; }
.btn.big { font-size: 30px; padding: 14px 26px; border-radius: 999px; border-width: 2px; }
.btn.big.play { font-size: 22px; padding: 14px 22px; }
.btn.big.up { background: rgba(61,220,132,.12); border-color: var(--up); }
.btn.big.down { background: rgba(255,93,93,.12); border-color: var(--down); }
@media (max-width: 760px) {
  .mobile-only { display: inline-block; }
  body.deck-mode .filters { gap: 6px; }
  body.deck-mode main { padding-top: 8px; padding-bottom: 170px; }
}

/* phone layout for deck mode: compact header, pinned thumbs, filters behind a button */
@media (max-width: 760px) {
  body.deck-mode .top { gap: 6px 10px; padding: 8px 12px; }
  body.deck-mode .brand { min-width: 0; flex: 1 1 100%; gap: 8px; }
  body.deck-mode .ball { font-size: 22px; }
  body.deck-mode .brand h1 { font-size: 14px; }
  body.deck-mode .sub { display: none; }
  body.deck-mode .tabs .tab { padding: 5px 10px; font-size: 13px; }
  body.deck-mode .actions { margin-left: auto; gap: 6px; }
  body.deck-mode .actions .btn { padding: 5px 10px; font-size: 13px; }
  body.deck-mode .who span:not(.muted) { display: none; }
  body.deck-mode .filters { display: none; }
  body.deck-mode.filters-open .filters { display: flex; }
  body.deck-mode main { padding: 8px 12px 0; }
  .dart { max-height: 36vh; }
  .dbody { padding: 12px 14px 10px; gap: 5px; }
  .dartist { font-size: 20px; }
  .dtitle { font-size: 16px; }
  .deck-actions { position: fixed; left: 0; right: 0; bottom: calc(var(--player-h, 0px)); z-index: 25; padding: 10px 0 max(12px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(11,11,16,0), rgba(11,11,16,.95) 30%); }
  .deck { padding-bottom: calc(var(--player-h, 0px) + 110px); }
  .player { padding: 8px 12px; }
}
.deck-top .btn { padding: 5px 10px; font-size: 13px; }
@media (max-width: 760px) {
  .dart { aspect-ratio: auto; height: min(38vh, 92vw); width: 100%; }
  body.deck-mode .toast { bottom: calc(var(--player-h, 0px) + 130px); max-width: 92vw; }
}

/* ---- phone polish: two-row header, one-row player, card never hides under the pinned thumbs ---- */
@media (max-width: 760px) {
  body.deck-mode .top { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand brand" "tabs actions"; align-items: center; row-gap: 8px; }
  /* the brand owns the whole first row (the ⚙ floats over its right end), so the title never wraps */
  body.deck-mode .brand { grid-area: brand; padding-right: 48px; min-width: 0; }
  body.deck-mode .brand h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .03em; font-size: clamp(12px, 3.9vw, 15px); }
  body.deck-mode footer { display: none; }   /* Privacy/Terms stay reachable from ⚙ and on desktop */
  body.deck-mode .tabs { grid-area: tabs; }
  body.deck-mode .actions { grid-area: actions; margin-left: 0; justify-content: flex-end; }
  body.deck-mode .actions #settings-btn { grid-area: settings; position: absolute; right: 12px; top: 8px; }
  body.deck-mode .who img { width: 20px; height: 20px; }
  body.deck-mode .mode { padding: 2px 7px; font-size: 10px; }
  body.deck-mode #signin { padding: 5px 10px; font-size: 13px; }

  body.deck-mode .player { grid-template-columns: 64px 1fr; gap: 10px; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); }
  body.deck-mode .player-frame { width: 64px; align-self: center; }
  body.deck-mode .now { font-size: 13px; }
  body.deck-mode .player-controls { gap: 6px; }
  body.deck-mode .player-controls .btn { padding: 4px 9px; font-size: 13px; }
  body.deck-mode .player-controls .curator { display: none !important; }   /* the big thumbs already cover this */
  body.deck-mode .player-controls .chk { font-size: 12px; gap: 4px; }
  body.deck-mode .audition-bar { flex-basis: 100%; height: 3px; }

  .dart { height: min(32vh, 92vw); }
  .dbody { padding: 12px 14px 12px; gap: 5px; }
  .dartist { font-size: 19px; }
  .dtitle { font-size: 15px; }
  .dmeta, .dwhy { font-size: 12px; }
  .deck { padding-bottom: calc(var(--player-h, 0px) + 118px); }
  .deck-actions { padding: 8px 0 max(10px, env(safe-area-inset-bottom)); gap: 16px; }
  .btn.big { font-size: 26px; padding: 12px 24px; }
  .btn.big.play { font-size: 20px; padding: 12px 20px; }
}

/* duplicate report (settings) */
.dupes { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.dupe { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.dupe-song { margin-bottom: 4px; }
.dupe-entries { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dupe .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; font-size: 12px; color: var(--muted); }
.dupe .chip a { color: var(--fg); text-decoration: none; }
.dupe .x { background: none; border: 0; color: var(--down); cursor: pointer; font-size: 13px; padding: 0 2px; }
.dupe .x:disabled { opacity: .4; }
.btn.small { padding: 3px 9px; font-size: 12px; }

/* unknown release year: the select shows a "year?" placeholder until you pick */
select.year.unknown { border-color: var(--warn, #e0b341); color: var(--warn, #e0b341); }
select.year.attention { animation: attention .5s ease 2; }
@keyframes attention { 50% { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(224,179,65,.45); } }