:root {
  --bg: #0e0b16;
  --bg2: #16111f;
  --card: #1c1626;
  --card2: #241b31;
  --line: #322840;
  --txt: #ece8f5;
  --mut: #9b8fb3;
  --accent: #ff4d8d;
  --accent2: #8b5cf6;
  --good: #36d399;
  --warn: #fbbf24;
  --grad: linear-gradient(135deg, #8b5cf6 0%, #ff4d8d 100%);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 600px at 80% -10%, #271a3a 0%, var(--bg) 55%) fixed;
  color: var(--txt);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
}
main { max-width: 1080px; margin: 0 auto; padding: 0 20px 60px; }

.topbar { padding: 28px 20px 8px; max-width: 1080px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 16px; }
.logo { display: inline-flex; line-height: 0; filter: drop-shadow(0 4px 12px rgba(255,77,141,.4)); }
h1 { margin: 0; font-size: 30px; letter-spacing: -.5px; }
h1 .nn { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag { margin: 2px 0 0; color: var(--mut); font-size: 14px; }

.card {
  background: linear-gradient(180deg, var(--card) 0%, var(--bg2) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  margin-top: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
h2 { margin: 0 0 14px; font-size: 19px; }
h2 .sub { color: var(--mut); font-weight: 400; font-size: 14px; }
h3 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--mut); }
.section-title { margin: 30px 0 0; font-size: 19px; }

/* pickers */
.pickers { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.picker { flex: 1 1 240px; min-width: 0; }
.picker label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--mut); margin-bottom: 6px; }
select {
  width: 100%; min-width: 0; max-width: 100%; padding: 11px 12px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--card2); color: var(--txt); font-size: 15px; appearance: none; cursor: pointer;
  text-overflow: ellipsis;
}
/* flexbox/grid items that hold wide content must be allowed to shrink */
.hero-text, .dim, .bar, .upload, #linkIn { min-width: 0; }
.vs { font-size: 22px; color: var(--accent2); padding-bottom: 8px; font-weight: 700; }
.upload { flex: 1 1 100%; display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
#linkIn { flex: 1 1 320px; min-width: 220px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: var(--txt); font-size: 14px; }
#linkIn::placeholder { color: var(--mut); }
.btn.busy { opacity: .6; pointer-events: none; }
.btn.sso { border-style: solid; border-color: #fc3f1d; color: #fc3f1d; }
.btn.sso:hover { background: rgba(252,63,29,.12); }
.ssobox { flex: 1 1 100%; margin-top: 4px; background: var(--card2); border: 1px solid var(--accent2); border-radius: 12px; padding: 16px 18px; }
.ssobox .step { font-size: 14px; color: var(--txt); margin: 2px 0; }
.ssobox a { color: var(--accent); font-weight: 700; }
.ssobox .ssocode { font: 800 30px/1.1 ui-monospace, Menlo, monospace; letter-spacing: 4px; color: #fff; background: #0e0b16; border: 1px dashed var(--line); border-radius: 10px; padding: 12px 16px; margin: 10px 0; display: inline-block; text-transform: uppercase; }
.ssobox .ssowait { font-size: 13px; color: var(--mut); }
.btn {
  display: inline-block; padding: 9px 14px; border-radius: 10px; cursor: pointer;
  background: var(--card2); border: 1px dashed var(--line); color: var(--txt); font-size: 14px;
}
.btn:hover { border-color: var(--accent2); }
.hint { color: var(--mut); font-size: 13px; }

/* hero */
.hero { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.gauge-wrap { position: relative; width: 200px; height: 200px; flex: 0 0 auto; }
#gauge { display: block; width: 100%; height: 100%; }
.gauge-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.scorebox { display: flex; align-items: flex-start; }
.score { font-size: 56px; font-weight: 800; letter-spacing: -2px; line-height: 1; }
.score-pct { font-size: 20px; color: var(--mut); margin-top: 6px; margin-left: 2px; }
.hero-text { flex: 1 1 360px; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--mut); margin-bottom: 2px; }
.verdict { font-size: 26px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { color: var(--mut); margin: 4px 0 6px; }
.hero-note { color: var(--mut); font-size: 12.5px; margin: 0 0 14px; opacity: .85; }
.hero-note.flag { color: var(--warn); opacity: 1; }

.dims { display: flex; flex-direction: column; gap: 10px; }
.dim { display: grid; grid-template-columns: 130px 1fr 42px; gap: 10px; align-items: center; }
.dim-label { font-size: 13px; color: var(--txt); }
.dim-label .q { color: var(--mut); cursor: help; position: relative; }
/* instant CSS tooltip (native title has a ~1s browser delay) */
.q[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: 0; top: 150%; z-index: 20;
  width: max-content; max-width: 250px; white-space: normal;
  background: #322a44; color: var(--txt); border: 1px solid var(--line);
  padding: 7px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); pointer-events: none;
}
.bar { height: 9px; border-radius: 6px; background: #2a2138; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 6px; background: var(--grad); }
.dim-val { font-size: 13px; color: var(--mut); text-align: right; font-variant-numeric: tabular-nums; }
.dim-na .bar > span { background: #3a3148; }

/* two column */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .three-col { grid-template-columns: 1fr; } }
.songcol h3 { margin-top: 0; }
.colhint { color: var(--mut); font-size: 12px; margin: -4px 0 10px; }
.ct { color: var(--mut); font-weight: 400; }
.side { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--mut); margin-left: 6px; }
.side.you { color: var(--accent2); border-color: var(--accent2); }
.side.them { color: var(--accent); border-color: var(--accent); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.chip.shared { border-color: var(--accent2); }
.chip.muted { color: var(--mut); }
.empty { color: var(--mut); font-size: 14px; font-style: italic; }

.tracklist { list-style: none; padding: 0; margin: 0; }
.tracklist li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.tracklist li:last-child { border: 0; }
.tracklist .a { color: var(--mut); }

/* contrast */
.contrast { display: flex; flex-direction: column; gap: 8px; }
.crow { display: grid; grid-template-columns: 1fr 110px; gap: 10px; align-items: center; font-size: 13px; }
.cbar { height: 8px; background: #2a2138; border-radius: 5px; position: relative; overflow: hidden; }
.cbar .a { position: absolute; left: 50%; top: 0; bottom: 0; background: var(--accent2); }
.cbar .b { position: absolute; right: 50%; top: 0; bottom: 0; background: var(--accent); }
.cside { color: var(--mut); text-align: right; align-self: center; }
.mb { height: 6px; background: #2a2138; border-radius: 4px; overflow: hidden; margin: 2px 0; }
.mb i { display: block; height: 100%; border-radius: 4px; }

/* facts */
.facts { display: flex; flex-direction: column; gap: 12px; }
.fact { display: flex; gap: 12px; align-items: flex-start; background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.fact .ic { font-size: 22px; flex: 0 0 auto; }
.fact .ft { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.fact .fx { color: var(--mut); font-size: 13px; }

/* x-ray */
.xray h3.name { text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--txt); margin: 0 0 2px; }
.xray .owner { color: var(--mut); font-size: 13px; margin-bottom: 14px; }
.statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 6px 0 16px; }
.stat { background: var(--card2); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; }
.stat .v { font-size: 20px; font-weight: 800; }
.stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--mut); }
.donut-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.legend { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.legend .li { display: flex; align-items: center; gap: 7px; }
.legend .sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.decades { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: 6px; }
.decades .dcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.decades .dbar { width: 100%; background: var(--grad); border-radius: 4px 4px 0 0; min-height: 2px; }
.decades .dlab { font-size: 10.5px; color: var(--mut); }
.langbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin-top: 4px; }
.langbar > span { display: block; height: 100%; }
.xfacts { margin-top: 8px; }

.disclaimer { margin-top: 34px; color: var(--mut); font-size: 13px; border-top: 1px solid var(--line); padding-top: 18px; }
.disclaimer strong { color: var(--txt); }
.disclaimer .meta { font-size: 12px; opacity: .8; margin-top: 8px; }

/* mobile */
@media (max-width: 560px) {
  html, body { overflow-x: hidden; }
  main { padding: 0 14px 50px; }
  .hero { gap: 16px; justify-content: center; }
  .gauge-wrap { width: 168px; height: 168px; }
  .score { font-size: 46px; }
  .score-pct { font-size: 17px; margin-top: 5px; }
  .hero-text { flex: 1 1 100%; min-width: 0; }
  .dim { grid-template-columns: 108px 1fr 38px; gap: 8px; }
}