:root{
  --max:1180px;
  --radius:24px;
  --radius-lg:34px;
  --bg:#070A12;
  --bg-soft:#0B1020;
  --surface:rgba(255,255,255,.08);
  --surface-strong:rgba(255,255,255,.13);
  --text:#F8FAFC;
  --muted:rgba(248,250,252,.68);
  --line:rgba(255,255,255,.13);
  --brand:#8B5CF6;
  --brand-two:#06B6D4;
  --brand-three:#F472B6;
  --success:#22C55E;
  --danger:#FB7185;
  --shadow:0 30px 90px rgba(0,0,0,.38);
}

[data-theme="light"]{
  --bg:#F5F7FB;
  --bg-soft:#EAF0FF;
  --surface:rgba(255,255,255,.78);
  --surface-strong:#FFFFFF;
  --text:#101828;
  --muted:rgba(16,24,40,.66);
  --line:rgba(16,24,40,.12);
  --shadow:0 24px 70px rgba(15,23,42,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-height:100%;
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(139,92,246,.42), transparent 60%),
    radial-gradient(800px 480px at 85% 0%, rgba(6,182,212,.32), transparent 56%),
    radial-gradient(700px 520px at 50% 110%, rgba(244,114,182,.22), transparent 62%),
    linear-gradient(180deg,var(--bg),var(--bg-soft));
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 80%);
}
button,input,select{font:inherit}
a{color:inherit;text-decoration:none}
.container{width:min(var(--max),calc(100% - 32px));margin-inline:auto}
.aurora{position:fixed;border-radius:999px;filter:blur(20px);opacity:.4;pointer-events:none;z-index:-1}
.aurora-one{width:260px;height:260px;background:var(--brand);top:14%;left:-90px}
.aurora-two{width:320px;height:320px;background:var(--brand-two);right:-120px;bottom:18%}

.topbar{position:sticky;top:0;z-index:20;backdrop-filter:blur(22px);background:rgba(7,10,18,.72);border-bottom:1px solid var(--line)}
[data-theme="light"] .topbar{background:rgba(245,247,251,.78)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.02em}
.brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:18px;background:linear-gradient(135deg,var(--brand),var(--brand-two));box-shadow:0 18px 45px rgba(139,92,246,.32)}
.brand-copy{display:grid;line-height:1}.brand-copy small{color:var(--muted);font-weight:800;letter-spacing:.24em;text-transform:uppercase;font-size:11px}
.nav-links{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.nav-links a{padding:10px 14px;border-radius:999px;color:var(--muted);font-weight:800;font-size:14px}.nav-links a:hover{background:var(--surface-strong);color:var(--text)}

.page-shell{padding:52px 0 120px}.hero{display:grid;grid-template-columns:minmax(0,1.12fr) 420px;gap:28px;align-items:stretch}.hero-copy,.now-card,.panel,.stats-grid article,.status-card{border:1px solid var(--line);background:linear-gradient(180deg,var(--surface-strong),var(--surface));box-shadow:var(--shadow);backdrop-filter:blur(22px)}
.hero-copy{padding:44px;border-radius:var(--radius-lg);position:relative;overflow:hidden}.hero-copy::after{content:"";position:absolute;inset:auto -12% -38% 34%;height:260px;background:radial-gradient(circle,rgba(6,182,212,.25),transparent 64%)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#A78BFA;font-size:12px;text-transform:uppercase;letter-spacing:.18em;font-weight:900}.hero h1{max-width:820px;margin:18px 0 18px;font-size:clamp(42px,7vw,78px);line-height:.92;letter-spacing:-.075em}.hero p{max-width:720px;margin:0;color:var(--muted);font-size:18px;line-height:1.7}
.search-card{position:relative;z-index:1;margin-top:34px;padding:18px;border:1px solid var(--line);background:rgba(255,255,255,.075);border-radius:24px}.search-card label{display:block;margin:0 0 10px;font-weight:900}.search-row{display:flex;gap:10px}.search-row input{width:100%;border:1px solid var(--line);outline:0;border-radius:18px;background:rgba(0,0,0,.18);color:var(--text);padding:16px 18px}.search-row input:focus{border-color:rgba(6,182,212,.75);box-shadow:0 0 0 4px rgba(6,182,212,.15)}.search-card small{display:block;margin-top:10px;color:var(--muted)}
.primary-btn,.ghost-btn,.mini-btn{border:0;cursor:pointer;font-weight:900;transition:transform .18s ease,filter .18s ease,background .18s ease}.primary-btn{border-radius:18px;padding:0 22px;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-two));box-shadow:0 18px 44px rgba(6,182,212,.22)}.primary-btn:hover,.ghost-btn:hover,.mini-btn:hover{transform:translateY(-1px);filter:saturate(1.12)}.ghost-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:11px 14px}.ghost-btn.danger{color:var(--danger)}
.now-card{border-radius:var(--radius-lg);padding:24px;display:grid;align-content:space-between;min-height:560px;overflow:hidden}.vinyl-wrap{position:relative;display:grid;place-items:center;min-height:330px}.vinyl-wrap img{width:min(100%,300px);aspect-ratio:1;border-radius:34px;object-fit:cover;box-shadow:0 30px 80px rgba(0,0,0,.38);z-index:2}.vinyl{position:absolute;width:260px;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#121826 0 7px,#0A0F1D 8px 12px);right:18px;opacity:.72}.vinyl::after{content:"";position:absolute;inset:42%;border-radius:50%;background:linear-gradient(135deg,var(--brand-three),var(--brand-two))}.now-meta span{color:var(--muted);font-weight:800}.now-meta h2{font-size:34px;letter-spacing:-.04em;margin:8px 0}.now-meta p{color:var(--muted);margin:0}.sound-bars{height:52px;display:flex;align-items:end;gap:8px}.sound-bars span{width:12px;border-radius:999px;background:linear-gradient(var(--brand-two),var(--brand));animation:bars 1s ease-in-out infinite alternate}.sound-bars span:nth-child(2){animation-delay:.12s}.sound-bars span:nth-child(3){animation-delay:.24s}.sound-bars span:nth-child(4){animation-delay:.36s}.sound-bars span:nth-child(5){animation-delay:.48s}@keyframes bars{from{height:16px}to{height:52px}}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0 42px}.stats-grid article{border-radius:22px;padding:20px}.stats-grid strong{display:block;font-size:34px;letter-spacing:-.05em}.stats-grid span{color:var(--muted);font-weight:800}.section-grid{margin-top:20px}.section-head,.panel-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px}.section-head h2,.panel h2{margin:5px 0 0;font-size:34px;letter-spacing:-.05em}.section-head select{border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);padding:12px 16px;outline:0}.status-card{border-radius:22px;padding:18px;color:var(--muted);margin-bottom:18px}.tracks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.track-card{border:1px solid var(--line);border-radius:28px;background:var(--surface);padding:12px;overflow:hidden;transition:transform .18s ease,border-color .18s ease,background .18s ease}.track-card:hover{transform:translateY(-4px);border-color:rgba(6,182,212,.55);background:var(--surface-strong)}.cover-button{position:relative;display:block;width:100%;border:0;padding:0;background:transparent;cursor:pointer}.cover-button img{width:100%;aspect-ratio:1;border-radius:22px;object-fit:cover;display:block}.cover-button span{position:absolute;right:12px;bottom:12px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-two));color:#fff;box-shadow:0 18px 34px rgba(0,0,0,.28)}.track-info{padding:14px 4px 10px}.track-info h3{margin:0 0 6px;font-size:17px;line-height:1.25;letter-spacing:-.02em}.track-info p{margin:0;color:var(--muted);font-size:14px}.track-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mini-btn{border-radius:14px;padding:11px 10px;background:rgba(255,255,255,.1);border:1px solid var(--line);color:var(--text)}.save-track.is-saved{background:rgba(34,197,94,.16);color:var(--success);border-color:rgba(34,197,94,.32)}
.library-layout{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:46px}.panel{border-radius:var(--radius-lg);padding:24px}.list-stack{display:grid;gap:10px}.empty-list{color:var(--muted);font-weight:700}.list-item{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:12px;border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:18px;padding:10px}.list-item img{width:56px;height:56px;border-radius:14px;object-fit:cover}.list-item strong{display:block}.list-item span{display:block;color:var(--muted);font-size:13px}.list-item button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:9px 11px;cursor:pointer;font-weight:900}
.player{position:fixed;left:50%;bottom:18px;transform:translate(-50%,0);z-index:40;width:min(980px,calc(100% - 24px));display:grid;grid-template-columns:260px auto 1fr;align-items:center;gap:18px;border:1px solid var(--line);border-radius:28px;background:rgba(7,10,18,.82);backdrop-filter:blur(26px);box-shadow:var(--shadow);padding:12px 16px;opacity:1;visibility:visible;transition:opacity .25s ease,transform .25s ease,visibility .25s ease}[data-theme="light"] .player{background:rgba(255,255,255,.82)}.player.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,16px)}.player-track{display:flex;align-items:center;gap:12px;min-width:0}.player-track img{width:54px;height:54px;border-radius:16px;object-fit:cover;background:var(--surface)}.player-track strong,.player-track span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-track span{color:var(--muted);font-size:13px}.player-controls{display:flex;align-items:center;gap:8px;justify-content:center}.player-controls button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer}.player-controls .play-btn{width:54px;height:54px;border:0;background:linear-gradient(135deg,var(--brand),var(--brand-two));color:#fff}.progress-wrap{display:grid;grid-template-columns:46px 1fr 46px;align-items:center;gap:10px;color:var(--muted);font-size:12px;font-weight:800}.progress-wrap input{width:100%;accent-color:var(--brand-two)}.footer{padding:12px 0 120px;color:var(--muted);display:flex;justify-content:space-between;gap:16px}.legal{max-width:520px;text-align:right}
@media (max-width:980px){.hero{grid-template-columns:1fr}.now-card{min-height:auto}.tracks-grid{grid-template-columns:repeat(2,1fr)}.library-layout{grid-template-columns:1fr}.player{grid-template-columns:1fr;gap:10px}.progress-wrap{grid-template-columns:42px 1fr 42px}.footer{display:block}.legal{text-align:left}.nav-links{display:none}}
@media (max-width:620px){.container{width:min(100% - 22px,var(--max))}.page-shell{padding-top:24px}.hero-copy{padding:26px}.hero h1{font-size:42px}.hero p{font-size:16px}.search-row{display:grid}.primary-btn{padding:15px}.stats-grid{grid-template-columns:1fr}.tracks-grid{grid-template-columns:1fr}.section-head,.panel-head{align-items:start;flex-direction:column}.nav{height:70px}.brand-copy small{display:none}.ghost-btn{padding:10px 12px}.player{bottom:10px;border-radius:22px}.player-track{min-width:0}}