:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #111318;
  color: #f4f4f0;
  --panel: #191c22;
  --panel2: #20242c;
  --line: #303642;
  --muted: #a7adba;
  --accent: #d8ff5f;
  --accent2: #a6cf32;
  --danger: #ff8f87;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(#111318,#15171d); }
button,input { font: inherit; }
button { cursor: pointer; }
.topbar { position: sticky; top: 0; z-index: 10; display:flex; justify-content:space-between; align-items:center; padding: .8rem 1rem; padding-top: max(.8rem, env(safe-area-inset-top)); background: rgba(17,19,24,.94); border-bottom:1px solid var(--line); backdrop-filter: blur(12px); }
.brand { background:none; border:0; color:var(--accent); padding:0; font-weight:800; font-size:1rem; letter-spacing:.02em; }
.brand span { color:#fff; font-weight:600; }
.badge { font-size:.72rem; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:.2rem .5rem; }
main { width:min(900px,100%); margin:0 auto; padding:1rem; padding-bottom:4rem; }
.hero { padding: 1.2rem 0 .8rem; }
h1 { font-size:clamp(1.8rem,6vw,3rem); line-height:1.05; margin:.4rem 0 .5rem; }
h2 { margin:.3rem 0 1rem; }
p { line-height:1.45; }
.hero p { color:var(--muted); max-width:40rem; margin:.4rem 0 1.2rem; }
.searchbox { display:flex; align-items:center; gap:.6rem; background:#fff; color:#111; border-radius:14px; padding:0 .9rem; box-shadow:0 8px 30px rgba(0,0,0,.25); }
.searchbox span { font-size:1.6rem; }
.searchbox input { width:100%; border:0; outline:0; padding:1rem .2rem; background:transparent; color:#111; font-size:1.12rem; }
.muted { color:var(--muted); }.small{font-size:.82rem;}
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; margin:.65rem 0; overflow:hidden; }
.result { display:grid; grid-template-columns:1fr auto; gap:.7rem; width:100%; text-align:left; background:none; border:0; color:inherit; padding:.9rem 1rem; }
.result:hover,.result:focus-visible { background:var(--panel2); }
.result .title { font-weight:700; }
.result .artist { color:var(--accent); font-size:.9rem; margin-bottom:.15rem; }
.result .meta { color:var(--muted); font-size:.8rem; margin-top:.18rem; }
.score { text-align:right; min-width:4.6rem; }
.score strong { display:block; font-size:1.25rem; color:var(--accent); }
.score span { color:var(--muted); font-size:.72rem; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.3rem; }
.section-title h2 { margin:0; font-size:1rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.pills { display:flex; gap:.4rem; flex-wrap:wrap; }
.pill,.secondary { border:1px solid var(--line); background:var(--panel); color:#fff; border-radius:999px; padding:.45rem .7rem; }
.pill.active { border-color:var(--accent2); color:var(--accent); }
.back { background:none; color:var(--accent); border:0; padding:.4rem 0 .7rem; }
.album-head { margin:.4rem 0 1rem; }
.album-head .artist-link { color:var(--accent); background:none; border:0; padding:0; font-size:1rem; }
.album-head h1 { font-size:clamp(1.6rem,6vw,2.7rem); margin:.3rem 0; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin:1rem 0; }
.metric { padding:.75rem; background:var(--panel); border:1px solid var(--line); border-radius:12px; text-align:center; }
.metric strong { display:block; font-size:1.25rem; }.metric span{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.ratings { width:100%; border-collapse:collapse; }
.ratings th,.ratings td { padding:.62rem .7rem; border-bottom:1px solid var(--line); }
.ratings th { text-align:left; color:var(--muted); font-size:.75rem; text-transform:uppercase; }
.ratings td:last-child,.ratings th:last-child { text-align:right; }
.ratings tr.mine { background:rgba(216,255,95,.08); }.ratings tr.mine td:first-child::after{content:"  you";color:var(--accent);font-size:.7rem;text-transform:uppercase;}
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin:.7rem 0; }
.toolbar select { background:var(--panel); color:#fff; border:1px solid var(--line); border-radius:9px; padding:.5rem; }
.empty { text-align:center; color:var(--muted); padding:2rem 1rem; border:1px dashed var(--line); border-radius:14px; margin-top:1rem; }
button.primary, dialog button:not(.secondary) { background:var(--accent); color:#111; font-weight:800; border:0; border-radius:10px; padding:.65rem .9rem; }
dialog { color:#fff; background:var(--panel); border:1px solid var(--line); border-radius:16px; width:min(480px,calc(100% - 2rem)); }
dialog::backdrop { background:rgba(0,0,0,.7); } dialog progress{width:100%;}.dialog-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem;}
@media(max-width:560px){ .metrics{grid-template-columns:repeat(2,1fr)} main{padding:.75rem}.hero{padding-top:.7rem} }
.header-actions{display:flex;align-items:center;gap:.45rem}.info{width:1.6rem;height:1.6rem;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-weight:800}.modebar{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-top:.75rem;flex-wrap:wrap}.segmented{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:.18rem;background:var(--panel)}.segmented button{border:0;background:transparent;color:var(--muted);border-radius:999px;padding:.42rem .82rem;font-weight:700}.segmented button.active{background:var(--accent);color:#111}.score.actual strong{color:#fff}.score .confidence{display:block;margin-top:.15rem;font-size:.62rem;color:var(--muted)}.metric.featured{border-color:var(--accent2)}.metric.featured strong{color:var(--accent)}.submetrics{display:flex;flex-wrap:wrap;gap:.4rem .9rem;color:var(--muted);font-size:.76rem;margin:-.35rem 0 1rem}.warning{border-left:3px solid var(--accent2);padding-left:.75rem}.ratings th:nth-child(n+2),.ratings td:nth-child(n+2){text-align:right}.ratings td:last-child,.ratings th:last-child{text-align:right}