:root { color-scheme: dark; --bg:#080808; --surface:#151515; --soft:#232323; --text:#fff; --muted:#a8a8a8; --accent:#ff792d; --line:#2c2c2c; }
* { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; }
body { margin:0; min-height:100vh; padding-bottom:112px; background:radial-gradient(circle at 75% 7%, rgba(255,121,45,.24), transparent 28rem), var(--bg); color:var(--text); font-family:Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", Arial, sans-serif; }
button, input { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
.topbar { position:sticky; z-index:20; top:0; display:grid; grid-template-columns:auto auto minmax(220px,520px); align-items:center; gap:18px; min-height:72px; padding:10px clamp(18px,4vw,62px); border-bottom:1px solid rgba(255,255,255,.08); background:rgba(8,8,8,.82); backdrop-filter:blur(20px); }
.back { color:#fff; font-size:25px; text-decoration:none; }
.brand { display:flex; align-items:baseline; gap:9px; color:#fff; text-decoration:none; font-weight:900; letter-spacing:-.04em; }
.brand b { color:var(--accent); font-size:11px; letter-spacing:.14em; }
.search { justify-self:end; display:flex; align-items:center; gap:10px; width:100%; padding:10px 16px; border-radius:999px; background:#fff; color:#111; }
.search input { width:100%; border:0; outline:0; background:transparent; color:#111; font-size:14px; }
main { max-width:1440px; margin:auto; padding:0 clamp(18px,4vw,62px) 80px; }
.hero { min-height:440px; display:flex; flex-direction:column; justify-content:flex-end; padding:70px 0 54px; }
.kicker { margin:0 0 13px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.16em; }
.hero h1 { max-width:900px; margin:0; font:700 clamp(48px,8vw,106px)/.86 Georgia, "Songti SC", serif; letter-spacing:-.07em; }
.hero > p:not(.kicker) { color:var(--muted); margin:24px 0; }
.hero-play { align-self:flex-start; border:0; border-radius:999px; padding:14px 22px; background:var(--accent); color:#080808; font-weight:800; cursor:pointer; }
.section-title { display:flex; justify-content:space-between; align-items:end; margin:0 0 20px; }
.section-title h2 { margin:0; font-size:26px; letter-spacing:-.04em; }
.section-title > span { color:var(--muted); font-size:13px; }
.shelf, .library { margin-bottom:64px; }
.card-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; }
.card { min-width:0; padding:12px; border:0; border-radius:9px; background:var(--surface); color:#fff; text-align:left; cursor:pointer; transition:background .2s, transform .2s; }
.card:hover { background:#252525; transform:translateY(-3px); }
.card-media { position:relative; aspect-ratio:1; margin-bottom:13px; overflow:hidden; border-radius:6px; background:linear-gradient(135deg,#3b2b23,#141414); box-shadow:0 12px 28px rgba(0,0,0,.3); }
.card img { display:block; width:100%; height:100%; object-fit:cover; }
.card i { position:absolute; right:10px; bottom:10px; display:grid; width:45px; height:45px; place-items:center; border-radius:50%; background:var(--accent); color:#111; font-style:normal; opacity:0; transform:translateY(6px); transition:.2s; }
.card:hover i, .card.is-active i { opacity:1; transform:none; }
.card strong, .card span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card strong { font-size:14px; }
.card span { margin-top:6px; color:var(--muted); font-size:12px; }
.track-list { border-top:1px solid var(--line); }
.track { display:grid; grid-template-columns:34px 48px minmax(0,1fr) minmax(100px,.7fr) 48px; align-items:center; gap:13px; width:100%; min-height:68px; padding:8px 10px; border:0; border-bottom:1px solid rgba(255,255,255,.06); background:transparent; color:#fff; text-align:left; cursor:pointer; }
.track:hover, .track.is-active { background:rgba(255,255,255,.07); }
.track .number { color:var(--muted); text-align:center; }
.track img { width:48px; height:48px; border-radius:3px; object-fit:cover; background:var(--soft); }
.track-title, .track-artist { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-title strong, .track-title span { display:block; }
.track-title span, .track-artist, .track-time { color:var(--muted); font-size:12px; }
.track.is-active .track-title strong { color:var(--accent); }
.empty { color:var(--muted); text-align:center; padding:80px 0; }
.player { position:fixed; z-index:40; right:0; bottom:0; left:0; display:grid; grid-template-columns:minmax(190px,1fr) minmax(280px,1.2fr) minmax(120px,1fr); align-items:center; gap:20px; min-height:92px; padding:10px clamp(14px,2vw,28px) max(10px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(16,16,16,.96); backdrop-filter:blur(24px); }
.current { display:flex; align-items:center; gap:12px; min-width:0; padding:0; border:0; background:transparent; color:#fff; text-align:left; cursor:pointer; }
.current img { width:58px; height:58px; border-radius:5px; object-fit:cover; background:var(--soft); }
.current span { min-width:0; }
.current strong, .current small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.current small { margin-top:4px; color:var(--muted); }
.transport-buttons { display:flex; justify-content:center; align-items:center; gap:20px; }
.transport-buttons button { border:0; background:transparent; color:#bdbdbd; cursor:pointer; }
.transport-buttons button.is-active { color:var(--accent); }
.transport-buttons .play { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; background:#fff; color:#111; }
.timeline { display:grid; grid-template-columns:38px 1fr 38px; align-items:center; gap:8px; margin-top:5px; color:var(--muted); font-size:10px; }
input[type="range"] { accent-color:#fff; width:100%; }
.volume { justify-self:end; display:flex; width:min(170px,100%); gap:8px; color:var(--muted); }
.now-panel { display:none; }
@media (max-width:900px) {
  .card-grid { grid-template-columns:repeat(6,160px); margin-right:-18px; }
  .player { grid-template-columns:minmax(0,1fr) auto; min-height:76px; }
  .transport { display:contents; }
  .transport-buttons button:not(.play) { display:none; }
  .timeline, .volume { display:none; }
  .current img { width:50px; height:50px; }
}
@media (max-width:640px) {
  body { padding-bottom:86px; }
  .topbar { grid-template-columns:auto 1fr; min-height:64px; gap:12px; padding:8px 16px; }
  .search { grid-column:1 / -1; grid-row:2; }
  .hero { min-height:380px; padding:70px 0 42px; }
  .hero h1 { font-size:52px; }
  .card-grid { grid-template-columns:repeat(6,145px); }
  .track { grid-template-columns:30px 46px minmax(0,1fr); padding-left:2px; padding-right:2px; }
  .track-artist, .track-time { display:none; }
  .player { padding:8px 14px max(8px,env(safe-area-inset-bottom)); }
  .now-panel { position:fixed; z-index:35; inset:0; display:flex; flex-direction:column; justify-content:center; gap:24px; padding:54px 28px 120px; background:linear-gradient(180deg,#38241a,#080808 58%); transform:translateY(105%); transition:transform .32s ease; }
  .now-panel.is-open { transform:none; }
  .now-panel img { width:min(82vw,390px); aspect-ratio:1; align-self:center; object-fit:cover; border-radius:8px; box-shadow:0 24px 70px rgba(0,0,0,.45); }
  .now-panel strong, .now-panel span { display:block; }
  .now-panel strong { font-size:26px; }
  .now-panel span { color:var(--muted); margin-top:8px; }
  .panel-close { position:absolute; top:max(20px,env(safe-area-inset-top)); left:50%; border:0; background:transparent; color:#fff; font-size:28px; transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }