@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{color:#f6f8fc;background:radial-gradient(circle at 0 0,#1dbb7d2e,#0000 30%),radial-gradient(circle at 100% 10%,#3278ff2e,#0000 30%),#07090d;min-height:100vh;font-family:Manrope,sans-serif}#root{min-height:100vh}:root{--bg-main:#07090d;--bg-shell:#0e121a;--bg-panel:#111825;--bg-card:#141d2c;--ink-strong:#f6f8fc;--ink-soft:#97a5bc;--ink-muted:#73839d;--brand:#1dbb7d;--brand-deep:#129864;--border:#ffffff14;--shadow:0 24px 70px #0006}.app-shell{max-width:1280px;margin:0 auto;padding:1.5rem}.app-grid{grid-template-columns:280px minmax(0,1fr);gap:1rem;display:grid}.app-sidebar{border:1px solid var(--border);min-height:calc(100vh - 3rem);box-shadow:var(--shadow);background:linear-gradient(160deg,#ffffff0a,#ffffff03);border-radius:16px;flex-direction:column;justify-content:space-between;padding:1.5rem;display:flex;position:sticky;top:1.5rem}.brand-mark{border:1px solid #ffffff1f;border-radius:12px;width:100%;max-width:188px;margin-bottom:.9rem;display:block;box-shadow:0 12px 28px #0000005c}.brand-overline{text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted);margin-bottom:.4rem;font-size:.75rem}.brand-heading{color:var(--ink-strong);margin-bottom:.6rem;font-family:Space Grotesk,sans-serif;font-size:1.5rem;line-height:1.1}.brand-copy{color:var(--ink-soft);font-size:.92rem;line-height:1.6}.sidebar-nav{flex-direction:column;gap:.5rem;margin-top:2rem;display:flex}.nav-item{color:var(--ink-soft);text-align:left;background:0 0;border:1px solid #0000;border-radius:10px;padding:.7rem .8rem;font-size:.94rem;transition:all .24s}.nav-item.is-active{color:var(--ink-strong);background:#1dbb7d1a;border-color:#1dbb7d47}.sidebar-meta{border-top:1px solid var(--border);color:var(--ink-muted);gap:.4rem;margin-top:1.2rem;padding-top:1rem;font-size:.84rem;display:grid}.content-stage{gap:1rem;display:grid}.hero-header{box-shadow:var(--shadow);background:linear-gradient(145deg,#ffffff0d,#ffffff03);border:1px solid #ffffff17;border-radius:16px;grid-template-columns:minmax(0,1fr) 320px;align-items:center;gap:1rem;padding:1.8rem;animation:.55s ease-out rise-in;display:grid}.hero-content{min-width:0}.hero-visual{border:1px solid #ffffff1f;border-radius:14px;margin:0;overflow:hidden;box-shadow:0 16px 34px #0000005c}.hero-visual img{object-fit:cover;width:100%;height:100%;display:block}.eyebrow{text-transform:uppercase;letter-spacing:.1em;color:var(--brand);margin-bottom:.5rem;font-size:.75rem}.hero-header h1{color:var(--ink-strong);max-width:18ch;margin-bottom:.75rem;font-family:Space Grotesk,sans-serif;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.08}.hero-copy{color:var(--ink-soft);max-width:62ch;font-size:1rem;line-height:1.6}.active-track{color:var(--ink-muted);margin-top:.8rem;font-size:.9rem}.active-track span{color:var(--ink-strong)}.hero-stats{flex-wrap:wrap;gap:.7rem;margin-top:1rem;display:flex}.stat-chip{background:#ffffff0a;border:1px solid #ffffff1a;border-radius:12px;flex-direction:column;min-width:124px;padding:.7rem .9rem;display:flex}.stat-value{color:var(--ink-strong);font-size:1.25rem;font-weight:700}.stat-label{color:var(--ink-muted);font-size:.84rem}.player-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;animation:.65s ease-out rise-in;display:grid}.now-playing,.volume-control{background:var(--bg-panel);border:1px solid #ffffff14;border-radius:16px;padding:1rem 1rem 1.1rem;box-shadow:0 14px 40px #00000047}.now-playing-top{grid-template-columns:76px minmax(0,1fr);align-items:center;gap:.9rem;margin-bottom:.9rem;display:grid}.now-cover{object-fit:cover;border-radius:14px;width:76px;height:76px}.chip{letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:.25rem;font-size:.72rem;display:inline-block}.now-playing h2{color:var(--ink-strong);margin-bottom:.32rem;font-size:1.15rem}.now-playing p{color:var(--ink-soft);font-size:.94rem}.playback-row{align-items:center;gap:.7rem;display:flex}.icon-btn{width:42px;height:42px;color:var(--ink-soft);background:#ffffff05;border:1px solid #ffffff26;border-radius:999px}.volume-control{flex-direction:column;gap:.75rem;display:flex}.volume-head{color:var(--ink-soft);justify-content:space-between;align-items:center;font-size:.9rem;display:flex}.volume-title{color:var(--ink-strong);font-family:Space Grotesk,sans-serif}.volume-control label{color:var(--ink-soft);font-size:.9rem;font-weight:500}.volume-control input[type=range]{width:100%;accent-color:var(--brand)}.volume-note{color:var(--ink-soft);background:#ffffff05;border:1px dashed #ffffff2e;border-radius:10px;padding:.7rem .75rem;font-size:.86rem;line-height:1.5}.library-section{background:#0a0f17d6;border:1px solid #ffffff14;border-radius:16px;padding:1rem}.library-head{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.section-title{color:var(--ink-strong);font-size:1.2rem}.view-switch{background:#ffffff08;border:1px solid #ffffff14;border-radius:12px;gap:.5rem;padding:.3rem;display:flex}.switch-btn{color:var(--ink-soft);background:0 0;border:none;border-radius:8px;padding:.5rem .75rem;font-size:.86rem;transition:all .24s}.switch-btn.is-selected{color:var(--ink-strong);background:#1dbb7d24}.state-message{color:var(--ink-soft);padding:1rem 0}.state-message.is-error{color:#ff9c9c}.song-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;display:grid}.song-card{background:var(--bg-card);border:1px solid #ffffff14;border-radius:14px;padding:.8rem;transition:transform .22s,box-shadow .22s;animation:.75s ease-out rise-in;box-shadow:0 10px 24px #00000040}.song-card:hover{transform:translateY(-3px);box-shadow:0 14px 26px #00000059}.song-card.is-active{border-color:#1dbb7da6;box-shadow:0 0 0 1px #1dbb7d4d,0 16px 32px #0006}.song-image{aspect-ratio:1;object-fit:cover;cursor:pointer;border-radius:12px;width:100%;margin-bottom:.7rem;transition:transform .2s,filter .2s}.song-image:hover{filter:saturate(1.08);transform:scale(1.01)}.song-image:focus-visible{outline:3px solid var(--brand);outline-offset:3px}.song-card h3{color:var(--ink-strong);margin-bottom:.3rem;font-size:1.06rem}.song-head{justify-content:space-between;align-items:flex-start;gap:.75rem;display:flex}.song-artist,.song-card li{color:var(--ink-soft);font-size:.9rem}.favorite-toggle{cursor:pointer;background:#ffffff05;border:1px solid #ffffff2e;border-radius:999px;justify-content:center;align-items:center;width:40px;height:40px;padding:0;transition:all .22s;display:inline-flex}.favorite-toggle:hover{border-color:#fff6;transform:translateY(-1px)}.favorite-toggle:focus-visible{border-color:#45d89fd9}.favorite-toggle.is-favorite{background:#1dbb7d2e;border-color:#1dbb7d9e}.favorite-icon{object-fit:contain;width:18px;height:18px;transition:transform .24s;display:block;transform:scale(2.5)}.favorite-toggle:hover .favorite-icon,.favorite-toggle:focus-visible .favorite-icon,.favorite-toggle.is-favorite .favorite-icon{transform:scale(2.5)}.song-badge{color:#b8f4df;background:#1dbb7d26;border-radius:999px;margin-top:.45rem;padding:.22rem .55rem;font-size:.74rem;display:inline-block}.song-meta-list{gap:.26rem;margin-top:.6rem;padding-left:0;list-style:none;display:grid}.song-card li:before{content:"-";color:var(--brand);margin-right:.4rem}.play-btn{background:linear-gradient(120deg, var(--brand) 0%, #45d89f 100%);color:#072014;cursor:pointer;border:none;border-radius:999px;min-width:124px;padding:.65rem 1rem;font-size:.93rem;font-weight:700;transition:all .24s}.play-btn:disabled{cursor:not-allowed;filter:grayscale(.2);opacity:.7}.play-btn:hover:not(:disabled){filter:brightness(.96);transform:translateY(-1px)}button:focus-visible,input:focus-visible{outline-offset:2px;outline:2px solid #45d89fd9}@keyframes rise-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (width<=760px){.app-shell{padding:.75rem}.app-grid{grid-template-columns:1fr}.app-sidebar{min-height:auto;position:static}.sidebar-nav,.sidebar-meta{display:none}.player-panel{grid-template-columns:1fr}.library-head{flex-direction:column;align-items:flex-start}.hero-header{grid-template-columns:1fr;padding:1rem}.hero-visual{max-height:250px}}