/* lilies-universe.com/charts — fan charts per platform (design from the Wix trackers).
   Theme per platform via body[data-platform]: black + platform colour. */
:root{--accent:#a855f7;--accent2:#ec4899;--glow:rgba(168,85,247,.28);--ink:#fff;
  --bg:#000;--bg2:#0c0c0e;--bg3:#18181b;--card:#121214;--hover:#1f1f23;--line:#26262b;
  --text:#fff;--muted:#a1a1aa;--faint:#71717a;--pos:#22c55e;--neg:#ef4444}
body[data-platform="spotify"]{--accent:#1DB954;--accent2:#1ed760;--glow:rgba(29,185,84,.3);--ink:#000}
body[data-platform="youtube"]{--accent:#ff0033;--accent2:#ff4d6d;--glow:rgba(255,0,51,.3);--ink:#fff}
body[data-platform="apple-music"]{--accent:#fa2d55;--accent2:#ff6b9a;--glow:rgba(250,45,85,.3);--ink:#fff}
body[data-platform="tidal"]{--accent:#ffffff;--accent2:#d4d4d8;--glow:rgba(255,255,255,.22);--ink:#000}
body[data-platform="deezer"]{--accent:#a238ff;--accent2:#c77dff;--glow:rgba(162,56,255,.32);--ink:#fff}
body[data-platform="amazon-music"]{--accent:#25d1da;--accent2:#7ee8ee;--glow:rgba(37,209,218,.3);--ink:#000}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:"Urbanist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
body{background:radial-gradient(900px 380px at 50% -140px,var(--glow),transparent 70%),var(--bg);min-height:100vh}
a{color:var(--accent)}
.top{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(0,0,0,.72);border-bottom:1px solid var(--line)}
.top-in{max-width:1240px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800;letter-spacing:.04em;font-size:15px}
.brand img{width:30px;height:30px;border-radius:8px}
.top nav{margin-left:auto;display:flex;gap:16px;font-size:14px;align-items:center}
.top nav a{color:var(--muted);text-decoration:none}
.top nav a:hover{color:var(--text)}
.top nav a.cta{background:linear-gradient(90deg,#a855f7,#ec4899);color:#fff;padding:7px 14px;border-radius:999px;font-weight:700}
main{max-width:1240px;margin:0 auto;padding:26px 20px 70px}
.crumbs{font-size:13px;color:var(--faint);margin-bottom:10px}.crumbs a{color:var(--faint)}
h1{font-size:clamp(26px,4.4vw,40px);margin:0 0 8px;letter-spacing:-.01em}
.lead{color:var(--muted);font-size:16px;line-height:1.6;max-width:760px;margin:0 0 18px}
/* platform switcher */
.plats{display:flex;gap:8px;overflow-x:auto;padding:4px 0 14px;margin-bottom:6px;scrollbar-width:none}
.plats::-webkit-scrollbar{display:none}
.plats a{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:var(--bg3);color:var(--text);text-decoration:none;font-size:13px;font-weight:700;border:1px solid var(--line)}
.plats a i{width:9px;height:9px;border-radius:50%;display:inline-block}
.plats a[aria-current="page"]{background:var(--accent);color:var(--ink);border-color:transparent;box-shadow:0 4px 16px var(--glow)}
/* glow stat cards (from the Wix stats cards) */
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:8px 0 26px}
.scard{position:relative;border-radius:28px;padding:26px 22px;text-align:center;border:5px solid transparent;
  background:radial-gradient(ellipse at right top,var(--glow) 0%,#141416 50%,#141416 100%) padding-box,
             linear-gradient(45deg,#232228,#232228,#232228,var(--accent)) border-box;box-shadow:0 12px 25px rgba(0,0,0,.5)}
.scard::after{content:"";position:absolute;inset:-5px;border-radius:28px;padding:5px;opacity:0;transition:opacity .3s;pointer-events:none;
  background:repeating-conic-gradient(from var(--a),transparent 0% 70%,var(--accent) 70% 100%) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.scard:hover::after{opacity:1;animation:spinA 2s linear infinite}
@keyframes spinA{to{--a:1turn}}
.scard .lb{color:#ddd;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.scard b{display:block;font-size:30px;margin:8px 0 4px;font-variant-numeric:tabular-nums}
.scard .ch{font-weight:700;font-size:15px}
.pos{color:var(--pos)}.neg{color:var(--neg)}
/* toolbar */
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:6px 0 14px}
.tabs,.sorts,.views{display:flex;gap:6px;flex-wrap:wrap}
.pill{font:inherit;padding:7px 14px;background:var(--bg3);border:none;border-radius:18px;font-size:12px;font-weight:700;cursor:pointer;color:var(--text)}
.pill:hover{background:var(--hover)}
.pill[aria-pressed="true"]{background:var(--accent);color:var(--ink);box-shadow:0 4px 12px var(--glow)}
.search{position:relative;flex:1 1 220px;max-width:320px}
.search input{width:100%;font:inherit;padding:9px 14px 9px 34px;border:1.5px solid var(--line);border-radius:20px;font-size:13px;background:var(--bg2);color:var(--text);outline:none}
.search input:focus{border-color:var(--accent);box-shadow:0 4px 16px var(--glow)}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint)}
.updated{font-size:12px;color:var(--faint);margin:0 0 12px}
/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.rc{background:none;border:none;padding:0;text-align:left;cursor:pointer;color:var(--text);font:inherit;transition:transform .3s}
.rc:hover{transform:translateY(-4px)}
.rc .cv{width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;position:relative;background:linear-gradient(135deg,var(--accent),#111);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.rc .cv img{width:100%;height:100%;object-fit:cover;display:block}
.rc .rk{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.72);color:#fff;font-size:11px;font-weight:800;padding:3px 8px;border-radius:6px}
.rc .nm{font-weight:700;font-size:14px;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc .st{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
/* list */
.tw{background:var(--card);border-radius:14px;overflow:auto}
table.lst{width:100%;border-collapse:collapse;min-width:560px}
.lst th{padding:13px 16px;text-align:left;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--line);background:var(--bg3);position:sticky;top:0}
.lst th.r,.lst td.r{text-align:right}
.lst td{padding:12px 16px;font-size:14px;border-bottom:1px solid var(--line)}
.lst tbody tr{cursor:pointer}.lst tbody tr:hover{background:var(--hover)}
.tc{display:flex;align-items:center;gap:12px;min-width:0}
.tc img,.tc .ph{width:44px;height:44px;border-radius:6px;object-fit:cover;flex:0 0 44px;background:linear-gradient(135deg,var(--accent),#111)}
.tc b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.tc small{color:var(--muted)}
.num{font-weight:800;font-variant-numeric:tabular-nums}
.empty{padding:30px;text-align:center;color:var(--faint);border:1px dashed var(--line);border-radius:14px}
/* detail */
#detail{display:none;background:var(--bg2);border-radius:20px;padding:18px 22px 26px;border:1px solid var(--line)}
#detail.on{display:block}
.dh{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:22px}
.back{font:inherit;background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:6px 8px;border-radius:8px}
.back:hover{background:var(--hover);color:var(--text)}
.shr{font:inherit;padding:7px 14px;border:1px solid var(--line);background:none;color:var(--muted);border-radius:8px;cursor:pointer;font-size:13px}
.dtop{display:flex;gap:110px;align-items:flex-start;margin-bottom:30px}
.vinyl{position:relative;width:180px;height:180px;flex:0 0 180px}
.vinyl .sleeve{position:absolute;inset:0;z-index:2;border-radius:6px;background:#222 center/cover;box-shadow:5px 0 18px rgba(0,0,0,.45);animation:slide 1.2s cubic-bezier(.4,0,.2,1) .5s forwards}
.vinyl .rec{position:absolute;top:2.5%;left:2.5%;width:95%;height:95%;border-radius:50%;z-index:1;animation:spin 6s linear infinite;
  background:radial-gradient(circle,#111 0 17%,transparent 17.5%),repeating-radial-gradient(circle,#0b0b0b 0 2px,#1c1c1c 2px 3px);box-shadow:0 0 18px rgba(0,0,0,.6)}
.vinyl .rec::after{content:"";position:absolute;inset:33%;border-radius:50%;background:var(--lbl,var(--accent)) center/cover;box-shadow:inset 0 0 0 3px rgba(160,160,160,.35)}
.vinyl .rec::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent,rgba(255,255,255,.08),transparent 25%,transparent 50%,rgba(255,255,255,.06),transparent 75%)}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes slide{to{left:50%}}
.dt{min-width:0;flex:1}
.dt h2{font-size:28px;margin:0 0 4px;line-height:1.2}
.dt .ar{color:var(--muted);margin-bottom:20px}
.srow{display:flex;gap:40px;flex-wrap:wrap}
.si .l{font-size:12px;color:var(--faint);margin-bottom:4px}
.si .v{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.dtabs{display:flex;gap:4px;background:var(--accent);padding:4px;border-radius:12px;margin-bottom:22px;overflow-x:auto}
.dtabs button{flex:1;font:inherit;padding:10px 14px;border:none;border-radius:8px;background:transparent;color:var(--ink);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;white-space:nowrap}
.dtabs button[aria-selected="true"]{background:#0a0a0a;color:var(--accent)}
.panel{display:none}.panel.on{display:block}
.trk{display:flex;align-items:center;gap:14px;padding:13px 14px;background:var(--card);border-radius:10px;margin-bottom:10px;cursor:pointer}
.trk:hover{background:var(--hover)}
.trk img,.trk .ph{width:52px;height:52px;border-radius:6px;object-fit:cover;background:linear-gradient(135deg,var(--accent),#111)}
.trk .i{flex:1;min-width:0}.trk b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trk small{color:var(--muted)}
.cw{display:flex;gap:26px}
.chart{flex:2;background:var(--card);border-radius:12px;padding:20px;min-width:0}
.chart .cs{display:flex;gap:28px;margin-bottom:16px}
.chart .cs .l{font-size:11px;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px}
.chart .cs .v{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.live{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4;transform:scale(1.25)}}
.chart canvas{width:100%!important;height:280px!important}
.days{flex:1;background:var(--card);border-radius:12px;padding:20px;max-height:430px;overflow-y:auto;min-width:0}
.days h3{margin:0 0 12px;font-size:15px}
.day{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:10px 12px;background:var(--bg2);border-radius:6px;margin-bottom:2px;font-size:13px}
.day span:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
.ms{display:flex;gap:40px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.ring{width:190px;height:190px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--p)*1%),#2a2a2e 0);box-shadow:0 0 30px var(--glow)}
.ring b{width:150px;height:150px;border-radius:50%;background:var(--bg2);display:grid;place-items:center;font-size:34px}
.mt{flex:1;min-width:240px}
.mt .l{font-size:12px;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.mt .n{font-size:26px;font-weight:800;margin:8px 0}
.mt .n span{color:var(--accent)}
table.pred{width:100%;border-collapse:collapse}
.pred th{padding:12px 14px;text-align:left;font-size:11px;color:var(--muted);text-transform:uppercase;border-bottom:2px solid var(--line)}
.pred td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px}
.pred tr.done{opacity:.5}
.about{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1.7;max-width:880px}
.about h2{color:var(--text);font-size:20px}
footer{border-top:1px solid var(--line);color:var(--faint);font-size:13px}
footer .in{max-width:1240px;margin:0 auto;padding:22px 20px 40px;display:flex;flex-wrap:wrap;gap:16px}
footer a{color:var(--faint)}
@media (max-width:968px){.dtop{flex-direction:column;align-items:center;text-align:center;gap:22px}.srow{justify-content:center}.cw{flex-direction:column}}
@media (max-width:700px){.cards{grid-template-columns:1fr;gap:12px}.scard{padding:18px}.top nav a:not(.cta){display:none}}
@media (prefers-reduced-motion:reduce){.vinyl .rec,.live,.scard:hover::after{animation:none}.vinyl .sleeve{animation:none;left:50%}}

/* platform logos + data source */
.ph1{display:flex;align-items:center;gap:16px;margin:0 0 8px}
.ph1 h1{margin:0}
.plogo{width:56px;height:56px;border-radius:14px;object-fit:contain;flex:0 0 56px;background:#111;padding:6px;box-shadow:0 0 0 1px var(--line),0 6px 24px var(--glow)}
.plats a img{width:18px;height:18px;object-fit:contain;border-radius:4px;flex:0 0 18px}
.plats a[aria-current="page"]{padding-left:6px}
.plats a[aria-current="page"] img{width:26px;height:26px;flex-basis:26px;padding:3px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.powered{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;padding:7px 14px 7px 8px;border-radius:999px;text-decoration:none;color:var(--muted);font-size:13px;background:linear-gradient(90deg,rgba(168,85,247,.16),rgba(236,72,153,.12));border:1px solid rgba(168,85,247,.35)}
.powered img{border-radius:6px}
.powered b{color:#fff}
@media (max-width:700px){.ph1{gap:12px}.plogo{width:44px;height:44px;flex-basis:44px;border-radius:12px}}
/* official chart positions (/charts/official/) */
body[data-platform="itunes"]{--accent:#d14bf0;--accent2:#ff5ec4;--glow:rgba(209,75,240,.3);--ink:#fff}
.oc-switch{color:var(--muted);font-size:14px;margin:-4px 0 18px}
.oc-legend{color:var(--faint);font-size:12.5px;margin:-4px 0 14px;line-height:1.7}
.oc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}
.oc-song{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}
.oc-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.oc-cover{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:0 0 64px;background:var(--bg3)}
.oc-meta{min-width:0}
.oc-meta h3{margin:0;font-size:18px;line-height:1.25}
.oc-meta small{color:var(--muted);font-size:13px}
.oc-sum{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:6px;font-size:13px;color:var(--muted)}
.oc-sum b{color:var(--text)}
.oc-no1{background:linear-gradient(90deg,#facc15,#f59e0b);color:#000;font-weight:800;border-radius:999px;padding:0 8px}
.oc-chips{display:flex;flex-wrap:wrap;gap:6px}
.oc-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:var(--bg3);border:1px solid var(--line);color:var(--text);text-decoration:none;font-size:12.5px;white-space:nowrap}
a.oc-chip:hover{border-color:var(--accent)}
.oc-chip b{font-variant-numeric:tabular-nums}
.oc-chip.t10{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--bg3))}
.oc-chip.t1{border-color:#facc15;background:rgba(250,204,21,.16)}
.oc-chip.t1 b{color:#facc15}
.oc-cc{color:var(--muted);font-weight:700;font-size:11.5px}
.oc-t{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.oc-flag{width:18px;height:13px;border-radius:2px;object-fit:cover}
.oc-globe{font-size:14px;line-height:1}
.oc-src{width:14px;height:14px;border-radius:3px}
.oc-chip i,.oc-legend i{font-style:normal;font-weight:800;font-size:11px}
.oc-up{color:var(--pos)}.oc-down{color:var(--neg)}.oc-same{color:var(--faint)}
.oc-new{color:#000;background:#22d3ee;border-radius:4px;padding:0 4px}
.oc-re{color:#000;background:#fbbf24;border-radius:4px;padding:0 4px}
.oc-ctry{display:flex;align-items:center;gap:8px;white-space:nowrap}
.oc-tbl td{vertical-align:top}
.about ul{color:var(--muted);line-height:1.7;padding-left:20px}
@media (max-width:700px){.oc-list{grid-template-columns:1fr}.oc-tbl .oc-ctry b{font-size:13px}}