:root{--bg-base: #121212;--bg-highlight: #1a1a1a;--bg-elevated: #242424;--bg-tinted: rgba(255, 255, 255, .07);--text-primary: #fff;--text-secondary: #b3b3b3;--text-subdued: #6a6a6a;--accent: #1db954;--sidebar-width: 300px;--sidebar-collapsed: 72px;--player-height: 90px;color-scheme:dark;font-family:Circular,Helvetica Neue,Helvetica,Arial,sans-serif,ui-sans-serif,system-ui;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{background:none;border:none;color:inherit;font:inherit;cursor:pointer;outline:none}.app{display:flex;flex-direction:column;height:100vh}.main-area{display:flex;flex:1;overflow:hidden;gap:8px;padding:8px 8px 0}.sidebar{width:var(--sidebar-collapsed);flex-shrink:0;display:flex;flex-direction:column;gap:8px;transition:width .2s ease;overflow:hidden}.sidebar.expanded{width:var(--sidebar-width)}.sidebar-nav{background:var(--bg-elevated);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:4px}.sidebar-link{display:flex;align-items:center;gap:16px;padding:8px 12px;border-radius:6px;font-weight:700;font-size:.95rem;color:var(--text-secondary);transition:color .15s;white-space:nowrap;overflow:hidden}.sidebar-link:hover{color:var(--text-primary)}.library-section{background:var(--bg-elevated);border-radius:8px;flex:1;display:flex;flex-direction:column;overflow:hidden}.library-header{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}.library-btn{flex:1;padding:8px 12px}.icon-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;color:var(--text-secondary);transition:color .15s,background .15s}.icon-btn:hover{color:var(--text-primary);background:var(--bg-tinted)}.library-filters{display:flex;gap:8px;padding:12px 12px 8px;overflow:hidden}.filter-chip{padding:6px 14px;border-radius:20px;font-size:.8rem;font-weight:600;background:var(--bg-tinted);color:var(--text-primary);white-space:nowrap;transition:background .15s}.filter-chip:hover{background:#ffffff26}.filter-chip.active{background:var(--text-primary);color:var(--bg-base)}.playlist-list{flex:1;overflow-y:auto;padding:4px 8px 8px;display:flex;flex-direction:column;gap:2px}.playlist-list::-webkit-scrollbar{width:8px}.playlist-list::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}.playlist-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:6px;transition:background .15s;text-align:left}.playlist-item:hover{background:var(--bg-tinted)}.playlist-item.active{background:#ffffff1a}.playlist-item-cover{width:48px;height:48px;border-radius:4px;flex-shrink:0}.playlist-item-cover.liked-sites{background:linear-gradient(135deg,#450af5,#c4efd9)}.liked-songs{background:linear-gradient(135deg,#450af5,#c4efd9);display:flex;align-items:center;justify-content:center}.playlist-item-info{display:flex;flex-direction:column;overflow:hidden}.playlist-item-name{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-item-meta{font-size:.78rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content{flex:1;background:var(--bg-elevated);border-radius:8px;overflow-y:auto;overflow-x:hidden}.content::-webkit-scrollbar{width:12px}.content::-webkit-scrollbar-thumb{background:#fff3;border-radius:6px;border:3px solid transparent;background-clip:content-box}.home-view{padding:24px 32px 32px}.greeting{font-size:2rem;font-weight:700;margin-bottom:24px;letter-spacing:-.02em}.section{margin-bottom:36px}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.section-header h2{font-size:1.4rem;font-weight:700;letter-spacing:-.01em}.show-all-btn{display:flex;align-items:center;gap:4px;font-size:.85rem;font-weight:700;color:var(--text-secondary);transition:color .15s}.show-all-btn:hover{color:var(--text-primary)}.card-grid.compact{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}.recent-card{display:flex;align-items:center;gap:12px;background:#ffffff12;border-radius:4px;overflow:hidden;transition:background .2s;position:relative;text-align:left;height:64px}.recent-card:hover{background:#ffffff26}.recent-card-cover{width:64px;height:64px;flex-shrink:0}.recent-card-name{font-size:.9rem;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}.card-play-btn{position:absolute;right:12px;bottom:8px;width:40px;height:40px;border-radius:50%;background:var(--accent);color:#000;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;box-shadow:0 8px 16px #00000080}.recent-card:hover .card-play-btn{opacity:1;transform:translateY(0)}.card-play-btn:hover{transform:scale(1.05)!important;background:#1ed760}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px}.card-item{padding:16px;border-radius:8px;background:#ffffff08;transition:background .3s}.card-item:hover{background:#ffffff14}.card-item:hover .card-play-btn{opacity:1;transform:translateY(0)}.card-cover-wrapper{position:relative;margin-bottom:12px}.card-cover{width:100%;aspect-ratio:1;border-radius:6px}.card-cover-wrapper .card-play-btn{right:8px;bottom:8px;width:48px;height:48px}.card-name{display:block;font-size:.95rem;font-weight:700;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-desc{display:block;font-size:.82rem;color:var(--text-secondary);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.playlist-view{min-height:100%}.playlist-hero{padding:40px 32px 24px}.playlist-hero-content{display:flex;align-items:flex-end;gap:24px}.playlist-hero-cover{width:232px;height:232px;border-radius:4px;flex-shrink:0;box-shadow:0 4px 60px #00000080}.playlist-hero-info{display:flex;flex-direction:column;gap:4px}.playlist-hero-type{font-size:.8rem;font-weight:700;text-transform:uppercase}.playlist-hero-title{font-size:3rem;font-weight:900;letter-spacing:-.04em;line-height:1.1;margin:8px 0}.playlist-hero-desc{font-size:.9rem;color:var(--text-secondary)}.playlist-hero-meta{font-size:.85rem;color:var(--text-secondary);margin-top:4px}.playlist-actions{padding:24px 32px}.play-btn-large{width:56px;height:56px;border-radius:50%;background:var(--accent);color:#000;display:flex;align-items:center;justify-content:center;transition:transform .1s,background .1s}.play-btn-large:hover{transform:scale(1.05);background:#1ed760}.track-list{padding:0 16px 32px}.track-list-header{display:grid;grid-template-columns:40px 1fr 1fr 80px;gap:16px;padding:0 16px 8px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:8px;color:var(--text-subdued);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;font-weight:500}.track-row{display:grid;grid-template-columns:40px 1fr 1fr 80px;gap:16px;padding:8px 16px;border-radius:4px;align-items:center;transition:background .15s;text-align:left;width:100%}.track-row:hover{background:#ffffff1a}.track-row.active{background:#ffffff0d}.track-col-num{font-size:.9rem;color:var(--text-secondary);text-align:center}.track-col-title{display:flex;align-items:center;gap:12px;overflow:hidden}.track-cover-small{width:40px;height:40px;border-radius:4px;flex-shrink:0}.track-title-info{display:flex;flex-direction:column;overflow:hidden}.track-title{font-size:.95rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}.track-title.green{color:var(--accent)}.track-artist{font-size:.8rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-col-album{font-size:.85rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-col-duration{font-size:.85rem;color:var(--text-secondary);display:flex;align-items:center;justify-content:flex-end}.playing-indicator{display:flex;align-items:flex-end;gap:2px;height:16px}.playing-indicator span{width:3px;background:var(--accent);border-radius:1px;animation:eq .8s ease-in-out infinite alternate}.playing-indicator span:nth-child(1){height:8px;animation-delay:0s}.playing-indicator span:nth-child(2){height:14px;animation-delay:.2s}.playing-indicator span:nth-child(3){height:10px;animation-delay:.4s}@keyframes eq{0%{height:4px}to{height:16px}}.player{height:var(--player-height);background:#181818;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.player-empty{width:100%;text-align:center;color:var(--text-subdued);font-size:.85rem}.player-left{display:flex;align-items:center;gap:12px;width:30%;min-width:180px}.player-track-cover{width:56px;height:56px;border-radius:4px;flex-shrink:0}.player-track-info{display:flex;flex-direction:column;overflow:hidden}.player-track-title{font-size:.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-track-artist{font-size:.75rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.like-btn{color:var(--text-secondary)}.like-btn.liked{color:var(--accent)}.player-center{display:flex;flex-direction:column;align-items:center;gap:4px;width:40%;max-width:722px}.player-controls{display:flex;align-items:center;gap:16px}.player-controls .icon-btn{color:var(--text-secondary)}.player-controls .icon-btn:hover{color:var(--text-primary)}.active-green{color:var(--accent)!important}.repeat-dot{font-size:.55rem;font-weight:700;position:absolute;bottom:0}.play-btn{width:36px;height:36px;border-radius:50%;background:var(--text-primary);color:#000;display:flex;align-items:center;justify-content:center;transition:transform .1s}.play-btn:hover{transform:scale(1.06)}.player-progress{display:flex;align-items:center;gap:8px;width:100%}.time-label{font-size:.7rem;color:var(--text-subdued);min-width:40px;text-align:center;font-variant-numeric:tabular-nums}.progress-bar{flex:1;height:4px;background:#ffffff26;border-radius:2px;cursor:pointer;position:relative}.progress-bar:hover{height:6px}.progress-fill{height:100%;background:var(--text-primary);border-radius:2px;position:relative;transition:width .1s linear}.progress-bar:hover .progress-fill{background:var(--accent)}.player-right{display:flex;align-items:center;gap:8px;width:30%;justify-content:flex-end}.volume-bar{width:100px;height:4px;background:#ffffff26;border-radius:2px;cursor:pointer}.volume-bar:hover{height:6px}.volume-fill{height:100%;background:var(--text-primary);border-radius:2px;transition:width .1s}.volume-bar:hover .volume-fill{background:var(--accent)}@media(max-width:900px){.sidebar{width:var(--sidebar-collapsed)!important}.sidebar .library-filters,.sidebar .playlist-list,.sidebar .library-btn span,.sidebar .sidebar-link span{display:none}.playlist-hero-title{font-size:2rem}.playlist-hero-cover{width:150px;height:150px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}.card-grid.compact{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}@media(max-width:600px){.player-left{min-width:120px}.player-right{display:none}.player-center{width:60%}.home-view{padding:16px}.greeting{font-size:1.5rem}.track-list-header,.track-row{grid-template-columns:30px 1fr 60px}.track-col-album{display:none}}