:root{--bg-base: #121212;--bg-elevated: #181818;--bg-highlight: #282828;--bg-card: #181818;--text-primary: #fff;--text-secondary: #b3b3b3;--text-subdued: #6a6a6a;--accent: #1db954;--accent-hover: #1ed760;--sidebar-w: 280px;--player-h: 90px;color-scheme:dark;font-family:Circular,Helvetica Neue,Helvetica,Arial,sans-serif,Segoe UI,Roboto;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg-base);color:var(--text-primary);overflow:hidden}button{font:inherit;border:none;background:none;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:1fr var(--player-h);height:100vh;overflow:hidden}.sidebar{background:#000;grid-row:1 / 2;display:flex;flex-direction:column;padding:0;overflow:hidden}.sidebar-logo{padding:24px 24px 18px;display:flex;align-items:center;gap:6px}.sidebar-logo svg{width:32px;height:32px;fill:var(--text-primary)}.sidebar-logo span{font-size:22px;font-weight:700;letter-spacing:-.04em}.sidebar-nav{padding:0 8px;margin-bottom:12px}.sidebar-nav-item{display:flex;align-items:center;gap:16px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:600;color:var(--text-secondary);transition:color .15s,background .15s}.sidebar-nav-item:hover{color:var(--text-primary)}.sidebar-nav-item.active{color:var(--text-primary);background:var(--bg-highlight)}.sidebar-nav-item svg{width:24px;height:24px;flex-shrink:0}.sidebar-library{flex:1;display:flex;flex-direction:column;background:var(--bg-base);margin:0 8px;border-radius:8px;overflow:hidden}.library-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}.library-header-left{display:flex;align-items:center;gap:12px;color:var(--text-secondary);font-size:14px;font-weight:600;cursor:pointer;transition:color .15s}.library-header-left:hover{color:var(--text-primary)}.library-header-left svg{width:24px;height:24px}.library-add-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--text-secondary);transition:color .15s,background .15s}.library-add-btn:hover{color:var(--text-primary);background:var(--bg-highlight)}.library-add-btn svg{width:16px;height:16px}.library-filters{display:flex;gap:8px;padding:0 16px 12px;overflow-x:auto}.filter-chip{padding:6px 14px;border-radius:9999px;font-size:12px;font-weight:600;background:var(--bg-highlight);color:var(--text-primary);white-space:nowrap;transition:background .15s}.filter-chip:hover{background:#333}.library-list{flex:1;overflow-y:auto;padding:0 8px 8px}.library-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:6px;cursor:pointer;transition:background .15s}.library-item:hover{background:#ffffff14}.library-item-img{width:48px;height:48px;border-radius:4px;object-fit:cover;flex-shrink:0}.library-item-img.rounded{border-radius:50%}.library-item-info{min-width:0}.library-item-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-item-name.playing{color:var(--accent)}.library-item-meta{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.main-content{grid-row:1 / 2;overflow-y:auto;background:linear-gradient(180deg,#1a3a2a 0%,var(--bg-base) 400px);position:relative}.main-topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:16px 32px;background:transparent;transition:background .3s}.main-topbar.scrolled{background:#121212d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.topbar-left{display:flex;align-items:center;gap:16px}.topbar-nav-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#00000080;color:var(--text-primary);transition:transform .1s}.topbar-nav-btn:hover{transform:scale(1.06)}.topbar-nav-btn svg{width:16px;height:16px}.topbar-right{display:flex;align-items:center;gap:8px}.topbar-pill{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:9999px;background:#00000080;font-size:13px;font-weight:600;transition:background .15s}.topbar-pill:hover{background:#000000b3}.topbar-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-size:12px;font-weight:700}.main-body{padding:0 32px 120px}.section{margin-bottom:40px}.section-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}.section-title{font-size:24px;font-weight:700;letter-spacing:-.02em}.section-link{font-size:13px;font-weight:600;color:var(--text-secondary);transition:color .15s}.section-link:hover{color:var(--text-primary);text-decoration:underline}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px}.card{background:var(--bg-card);border-radius:8px;padding:16px;cursor:pointer;transition:background .3s;position:relative}.card:hover{background:var(--bg-highlight)}.card-img-wrap{position:relative;margin-bottom:16px}.card-img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block}.card-img.rounded{border-radius:50%}.card-play-btn{position:absolute;bottom:8px;right:8px;width:48px;height:48px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#000;box-shadow:0 8px 24px #00000080;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s,background .15s}.card:hover .card-play-btn{opacity:1;transform:translateY(0)}.card-play-btn:hover{background:var(--accent-hover);transform:scale(1.06)!important}.card-play-btn svg{width:20px;height:20px;margin-left:2px}.card-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}.card-desc{font-size:13px;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:40px}.quick-card{display:flex;align-items:center;background:#ffffff12;border-radius:4px;overflow:hidden;cursor:pointer;transition:background .3s;position:relative;height:64px}.quick-card:hover{background:#ffffff26}.quick-card-img{width:64px;height:64px;object-fit:cover;flex-shrink:0}.quick-card-name{flex:1;padding:0 16px;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quick-card-play{width:32px;height:32px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#000;margin-right:16px;opacity:0;box-shadow:0 4px 12px #0006;transition:opacity .3s,transform .15s}.quick-card:hover .quick-card-play{opacity:1}.quick-card-play:hover{transform:scale(1.06)}.quick-card-play svg{width:14px;height:14px;margin-left:1px}.track-list{width:100%}.track-row{display:grid;grid-template-columns:32px 1fr 1fr auto;align-items:center;gap:16px;padding:8px 16px;border-radius:4px;font-size:14px;color:var(--text-secondary);transition:background .15s}.track-row:hover{background:#ffffff14}.track-row:hover .track-num{display:none}.track-row:hover .track-play-icon{display:flex}.track-row.playing{color:var(--accent)}.track-col-num{display:flex;align-items:center;justify-content:center;position:relative}.track-num{font-size:14px;font-variant-numeric:tabular-nums}.track-play-icon{display:none;align-items:center;justify-content:center}.track-play-icon svg{width:14px;height:14px;fill:currentColor}.track-col-title{display:flex;align-items:center;gap:12px;min-width:0}.track-thumb{width:40px;height:40px;border-radius:4px;object-fit:cover;flex-shrink:0}.track-title-artist{min-width:0}.track-song{font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-row.playing .track-song{color:var(--accent)}.track-artist{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-album{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-duration{font-variant-numeric:tabular-nums;font-size:13px}.player-bar{grid-column:1 / -1;grid-row:2 / 3;background:#181818;border-top:1px solid rgba(255,255,255,.06);display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;padding:0 16px;z-index:50}.player-left{display:flex;align-items:center;gap:14px;min-width:0}.player-track-img{width:56px;height:56px;border-radius:4px;object-fit:cover;flex-shrink:0}.player-track-info{min-width:0}.player-track-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-track-artist{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-like-btn{color:var(--text-secondary);transition:color .15s;flex-shrink:0}.player-like-btn:hover{color:var(--text-primary)}.player-like-btn.liked{color:var(--accent)}.player-like-btn svg{width:16px;height:16px}.player-center{display:flex;flex-direction:column;align-items:center;gap:4px}.player-controls{display:flex;align-items:center;gap:16px}.ctrl-btn{color:var(--text-secondary);transition:color .15s;display:flex;align-items:center;justify-content:center}.ctrl-btn:hover{color:var(--text-primary)}.ctrl-btn svg{width:16px;height:16px}.ctrl-btn.active{color:var(--accent)}.play-pause-btn{width:32px;height:32px;border-radius:50%;background:var(--text-primary);color:#000;display:grid;place-items:center;transition:transform .1s}.play-pause-btn:hover{transform:scale(1.08)}.play-pause-btn svg{width:16px;height:16px}.player-progress{display:flex;align-items:center;gap:8px;width:100%;max-width:600px}.progress-time{font-size:11px;color:var(--text-secondary);font-variant-numeric:tabular-nums;min-width:36px;text-align:center}.progress-bar-wrap{flex:1;height:4px;background:#ffffff26;border-radius:2px;cursor:pointer;position:relative;transition:height .15s}.progress-bar-wrap:hover{height:6px}.progress-bar-wrap:hover .progress-bar-knob{opacity:1}.progress-bar-fill{height:100%;background:var(--text-primary);border-radius:2px;position:relative;transition:background .15s}.progress-bar-wrap:hover .progress-bar-fill{background:var(--accent)}.progress-bar-knob{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:var(--text-primary);opacity:0;transition:opacity .15s}.player-right{display:flex;align-items:center;justify-content:flex-end;gap:8px}.right-btn{color:var(--text-secondary);transition:color .15s;display:flex;align-items:center;justify-content:center}.right-btn:hover{color:var(--text-primary)}.right-btn svg{width:16px;height:16px}.right-btn.active{color:var(--accent)}.volume-wrap{display:flex;align-items:center;gap:4px}.volume-bar-wrap{width:93px;height:4px;background:#ffffff26;border-radius:2px;cursor:pointer;position:relative}.volume-bar-wrap:hover{height:6px}.volume-bar-fill{height:100%;background:var(--text-primary);border-radius:2px}.volume-bar-wrap:hover .volume-bar-fill{background:var(--accent)}@media(max-width:900px){:root{--sidebar-w: 72px}.sidebar-logo span,.sidebar-nav-item span{display:none}.sidebar-nav-item{justify-content:center;padding:12px}.library-header-left span,.library-filters,.library-item-info{display:none}.library-item{justify-content:center}.quick-grid{grid-template-columns:1fr}.card-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.player-bar{grid-template-columns:1fr 1fr}.player-right{display:none}}