@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-dark:#121212;--bg-sidebar:#18181b;--bg-card:#1e1e23b3;--bg-elevated:#28282dcc;--bg-hover:#ffffff0f;--text-primary:#fff;--text-secondary:#9ca3af;--accent:#d32f2f;--accent-hover:#ef5350;--accent-soft:#d32f2f26;--danger:#ef4444;--success:#10b981;--warning:#f59e0b;--border-subtle:#ffffff14;--border-active:#d32f2f66;--glass-shadow:0 8px 32px 0 #0000005e;--blur-amount:blur(16px);--sidebar-width:240px;--player-height:80px;--header-height:56px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,sans-serif;overflow:hidden}h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;font-weight:600}.app-shell{width:100vw;height:100vh;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-width);background:var(--bg-sidebar);border-right:1px solid var(--border-subtle);height:calc(100vh - var(--player-height));flex-direction:column;flex-shrink:0;display:flex;overflow-y:auto}.sidebar-logo{border-bottom:1px solid var(--border-subtle);align-items:center;gap:10px;padding:16px 20px;display:flex}.sidebar-logo h2{background:linear-gradient(135deg, var(--accent), #ff8a80);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.1rem}.sidebar-section{padding:12px 0}.sidebar-section-title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);padding:4px 20px 8px;font-size:.7rem;font-weight:600}.sidebar-item{color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;border-left:3px solid #0000;align-items:center;gap:10px;padding:8px 20px;font-size:.88rem;transition:all .15s;display:flex}.sidebar-item:hover{background:var(--bg-hover);color:var(--text-primary)}.sidebar-item.active{color:var(--accent);background:var(--accent-soft);border-left-color:var(--accent);font-weight:500}.sidebar-item .item-count{color:var(--text-secondary);opacity:.6;margin-left:auto;font-size:.75rem}.sidebar-jam-section{border-top:1px solid var(--border-subtle);margin-top:auto;padding:16px}.jam-badge{background:var(--accent-soft);border:1px solid var(--border-active);color:var(--accent-hover);cursor:pointer;border-radius:10px;align-items:center;gap:8px;padding:8px 12px;font-size:.82rem;transition:all .2s;display:flex}.jam-badge:hover{background:#d32f2f40}.jam-badge .jam-dot{background:var(--success);border-radius:50%;width:8px;height:8px;animation:2s infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}.main-content{height:calc(100vh - var(--player-height));flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.content-header{height:var(--header-height);border-bottom:1px solid var(--border-subtle);flex-shrink:0;justify-content:space-between;align-items:center;gap:16px;padding:0 24px;display:flex}.content-header h1{white-space:nowrap;font-size:1.2rem}.header-search{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:8px;flex:1;align-items:center;gap:8px;max-width:320px;padding:6px 12px;display:flex}.header-search input{color:var(--text-primary);background:0 0;border:none;outline:none;width:100%;font-family:inherit;font-size:.88rem}.header-actions{align-items:center;gap:8px;display:flex}.content-scroll{flex:1;padding:24px;overflow-y:auto}.album-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px;display:grid}.album-card{cursor:pointer;border-radius:8px;transition:transform .2s,box-shadow .2s;overflow:hidden}.album-card:hover{transform:translateY(-4px)}.album-card:hover .album-cover-wrap{box-shadow:0 8px 24px #00000080}.album-cover-wrap{background:var(--bg-elevated);border-radius:8px;width:100%;padding-bottom:100%;transition:box-shadow .2s;position:relative;overflow:hidden}.album-cover-wrap img{object-fit:cover;width:100%;height:100%;position:absolute;top:0;left:0}.album-cover-overlay{opacity:0;background:#0006;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;inset:0}.album-card:hover .album-cover-overlay{opacity:1}.album-meta{padding:8px 2px}.album-meta .album-title{white-space:nowrap;text-overflow:ellipsis;font-size:.88rem;font-weight:500;overflow:hidden}.album-meta .album-artist{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.78rem;overflow:hidden}.song-table{width:100%}.song-row{cursor:pointer;border-radius:6px;align-items:center;gap:12px;padding:8px 12px;font-size:.9rem;transition:background .15s;display:flex}.song-row:hover{background:var(--bg-hover)}.song-row.active{background:var(--accent-soft)}.song-row .song-num{text-align:center;width:28px;color:var(--text-secondary);flex-shrink:0;font-size:.82rem}.song-row .song-cover{object-fit:cover;border-radius:4px;flex-shrink:0;width:40px;height:40px}.song-row .song-info{flex:1;min-width:0;overflow:hidden}.song-row .song-title{white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:500;overflow:hidden}.song-row .song-artist{white-space:nowrap;text-overflow:ellipsis;color:var(--text-secondary);font-size:.78rem;overflow:hidden}.song-row .song-album{white-space:nowrap;text-overflow:ellipsis;width:180px;color:var(--text-secondary);flex-shrink:0;font-size:.82rem;overflow:hidden}.song-row .song-duration{text-align:right;width:50px;color:var(--text-secondary);flex-shrink:0;font-size:.82rem}.song-row .song-actions{opacity:0;flex-shrink:0;align-items:center;gap:4px;transition:opacity .15s;display:flex}.song-row:hover .song-actions{opacity:1}.song-action-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;align-items:center;padding:4px;transition:color .15s,background .15s;display:flex}.song-action-btn:hover{color:var(--accent);background:var(--accent-soft)}.song-action-btn.danger:hover{color:var(--danger);background:#ef444426}.queue-panel{background:var(--bg-sidebar);border-left:1px solid var(--border-subtle);width:320px;height:calc(100vh - var(--player-height));flex-direction:column;flex-shrink:0;transition:width .3s,margin .3s;display:flex}.queue-panel.collapsed{border-left:none;width:0;overflow:hidden}.queue-header{border-bottom:1px solid var(--border-subtle);flex-shrink:0;justify-content:space-between;align-items:center;padding:16px;display:flex}.queue-header h3{align-items:center;gap:8px;font-size:.95rem;display:flex}.queue-count{background:var(--accent);color:#fff;border-radius:10px;padding:1px 7px;font-size:.7rem;font-weight:600}.queue-scroll{flex:1;padding:8px;overflow-y:auto}.queue-empty{color:var(--text-secondary);text-align:center;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:40px 20px;display:flex}.queue-empty p{margin-top:8px;font-size:.85rem}.player-bar{height:var(--player-height);background:var(--bg-sidebar);border-top:1px solid var(--border-subtle);z-index:200;align-items:center;gap:16px;padding:0 16px;display:flex;position:fixed;bottom:0;left:0;right:0}.player-bar-info{flex-shrink:0;align-items:center;gap:12px;width:240px;display:flex;overflow:hidden}.player-bar-info img{object-fit:cover;border-radius:6px;width:48px;height:48px}.player-bar-info .player-song-title{white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:500;overflow:hidden}.player-bar-info .player-song-artist{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.78rem;overflow:hidden}.player-bar-controls{flex-direction:column;flex:1;align-items:center;gap:4px;min-width:0;display:flex}.player-buttons{align-items:center;gap:16px;display:flex}.player-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;padding:4px;transition:color .15s,transform .1s;display:flex}.player-btn:hover{color:var(--text-primary)}.player-btn:active{transform:scale(.92)}.player-btn.active{color:var(--accent)}.player-btn-main{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:background .15s,transform .1s;display:flex}.player-btn-main:hover{background:var(--accent-hover)}.player-btn-main:active{transform:scale(.92)}.player-progress-bar{align-items:center;gap:8px;width:100%;max-width:600px;display:flex}.player-progress-bar span{color:var(--text-secondary);text-align:center;min-width:36px;font-size:.72rem}.player-progress-bar input[type=range]{appearance:none;background:var(--bg-elevated);cursor:pointer;border-radius:2px;outline:none;flex:1;height:4px}.player-progress-bar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:12px;height:12px}.player-bar-extra{flex-shrink:0;justify-content:flex-end;align-items:center;gap:8px;width:200px;display:flex}.volume-slider{appearance:none;background:var(--bg-elevated);cursor:pointer;border-radius:2px;outline:none;width:80px;height:4px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:10px;height:10px}.btn{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-subtle);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:8px 16px;font-family:inherit;font-size:.85rem;font-weight:500;transition:all .15s;display:inline-flex}.btn:hover{background:#3c3c41cc}.btn-primary{background:var(--accent);border-color:var(--accent)}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-sm{padding:4px 10px;font-size:.78rem}.btn-ghost{background:0 0;border-color:#0000}.btn-ghost:hover{background:var(--bg-hover)}.btn-danger{color:var(--danger);border-color:var(--danger)}.album-detail-header{align-items:flex-end;gap:24px;margin-bottom:24px;display:flex}.album-detail-cover{object-fit:cover;border-radius:8px;flex-shrink:0;width:200px;height:200px;box-shadow:0 8px 24px #00000080}.album-detail-info h1{margin-bottom:4px;font-size:1.8rem}.album-detail-info .album-detail-artist{color:var(--text-secondary);margin-bottom:8px;font-size:1rem}.album-detail-info .album-detail-meta{color:var(--text-secondary);gap:12px;font-size:.82rem;display:flex}.listeners-badge{background:var(--bg-elevated);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:16px;align-items:center;gap:6px;padding:4px 10px;font-size:.82rem;transition:background .15s;display:flex}.listeners-badge:hover{background:#3c3c41cc}.listeners-dropdown{background:var(--bg-sidebar);border:1px solid var(--border-subtle);z-index:150;border-radius:10px;min-width:180px;margin-top:6px;padding:12px;position:absolute;top:100%;right:0;box-shadow:0 8px 24px #00000080}.loading-screen{background:var(--bg-dark);height:100vh;color:var(--text-secondary);justify-content:center;align-items:center;gap:12px;display:flex}.empty-state{color:var(--text-secondary);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:60px 20px;display:flex}.empty-state svg{opacity:.3;margin-bottom:12px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:.3s ease-out forwards fadeIn}.artist-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:20px;display:grid}.artist-card{cursor:pointer;text-align:center;transition:transform .2s}.artist-card:hover{transform:translateY(-4px)}.artist-avatar{aspect-ratio:1;object-fit:cover;background:var(--bg-elevated);border-radius:50%;width:100%;margin-bottom:8px}.artist-name{white-space:nowrap;text-overflow:ellipsis;font-size:.88rem;font-weight:500;overflow:hidden}.artist-album-count{color:var(--text-secondary);font-size:.75rem}@media (width<=900px){.sidebar,.queue-panel,.song-row .song-album{display:none}.player-bar-info{flex:1;width:auto}.player-bar-extra{display:none}.album-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}.album-detail-header{flex-direction:column;align-items:flex-start}.album-detail-cover{width:150px;height:150px}}@media (width<=600px){.player-bar{gap:8px;padding:0 8px}.player-progress-bar{display:none}.album-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}.content-scroll{padding:16px}}.flex-center{justify-content:center;align-items:center;display:flex}.min-h-screen{min-height:100vh}.text-truncate{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sidebar-playlist-item{padding-left:36px;font-size:.82rem}.glass-panel{background:var(--bg-elevated);border:1px solid var(--border-subtle);-webkit-backdrop-filter:var(--blur-amount);backdrop-filter:var(--blur-amount);border-radius:16px;box-shadow:0 8px 32px #0006}.glass-panel input,.glass-panel select{background:var(--bg-sidebar);border:1px solid var(--border-subtle);color:var(--text-primary);box-sizing:border-box;border-radius:8px;outline:none;padding:12px 16px;font-family:inherit;font-size:.95rem;transition:border-color .2s,box-shadow .2s}.glass-panel input:focus,.glass-panel select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.glass-panel input::placeholder{color:var(--text-secondary)}.glass-panel select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;padding-right:40px}