:root{--bg-base:#121212;--bg-black:#000;--bg-surface:#181818;--bg-surface-hover:#282828;--bg-surface-active:#333;--bg-glass:#181818bf;--bg-glass-card:#ffffff0d;--spotify-green:#1db954;--spotify-green-hover:#1ed760;--spotify-green-active:#169c46;--text-base:#fff;--text-subdued:#b3b3b3;--text-muted:#727272;--border-subtle:#ffffff1a;--shadow-lg:0 8px 24px #00000080;--shadow-xl:0 16px 36px #000000b3;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:20px;--radius-full:9999px;--player-height:90px;--sidebar-width:240px;--font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body,#root{background-color:var(--bg-black);width:100%;height:100%;color:var(--text-base);font-family:var(--font-family);-webkit-user-select:none;user-select:none;font-size:14px;overflow:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#fff6}.app-container{grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:1fr var(--player-height);background-color:var(--bg-black);gap:8px;width:100vw;height:100vh;padding:8px 8px 0;display:grid}.main-view-container{background:linear-gradient(to bottom, #202020 0%, var(--bg-base) 300px);border-radius:var(--radius-md);flex-direction:column;grid-area:1/2/2/3;display:flex;position:relative;overflow:hidden}.content-scrollable{flex:1;padding:20px 32px 40px;overflow-y:auto}.app-header{-webkit-backdrop-filter:blur(20px);z-index:20;background:#121212b3;justify-content:space-between;align-items:center;height:64px;padding:0 32px;transition:background-color .3s;display:flex;position:sticky;top:0}.section-title{letter-spacing:-.02em;margin-bottom:16px;font-size:1.5rem;font-weight:700}.card-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px;margin-bottom:36px;display:grid}.spotify-card{background-color:var(--bg-surface);border-radius:var(--radius-md);cursor:pointer;flex-direction:column;padding:16px;transition:background-color .3s,transform .2s;display:flex;position:relative}.spotify-card:hover{background-color:var(--bg-surface-hover)}.card-image-wrapper{aspect-ratio:1;border-radius:var(--radius-sm);width:100%;margin-bottom:12px;position:relative;overflow:hidden;box-shadow:0 8px 16px #0006}.card-image{object-fit:cover;width:100%;height:100%;transition:transform .3s}.spotify-card:hover .card-image{transform:scale(1.03)}.play-button-overlay{background-color:var(--spotify-green);opacity:0;color:#000;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:opacity .3s,transform .3s,background-color .2s;display:flex;position:absolute;bottom:8px;right:8px;transform:translateY(8px);box-shadow:0 8px 16px #00000080}.spotify-card:hover .play-button-overlay{opacity:1;transform:translateY(0)}.play-button-overlay:hover{background-color:var(--spotify-green-hover);transform:scale(1.06)!important}.card-title{white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-size:.95rem;font-weight:700;overflow:hidden}.card-subtitle{color:var(--text-subdued);white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;overflow:hidden}.song-table{border-collapse:collapse;width:100%;margin-top:16px}.song-table th{color:var(--text-subdued);text-transform:uppercase;letter-spacing:1px;text-align:left;border-bottom:1px solid var(--border-subtle);padding:8px 16px;font-size:.8rem;font-weight:500}.song-row{border-radius:var(--radius-sm);cursor:pointer;height:56px;transition:background-color .2s}.song-row:hover{background-color:#ffffff1a}.song-row.active{background-color:#1db95426}.song-row td{vertical-align:middle;padding:8px 16px}.song-row .track-title{color:var(--text-base);font-weight:500}.song-row.active .track-title{color:var(--spotify-green);font-weight:700}.player-bar{background-color:var(--bg-black);border-top:1px solid var(--border-subtle);z-index:30;grid-area:2/1/3/3;grid-template-columns:30% 40% 30%;align-items:center;padding:0 16px;display:grid}.player-left{align-items:center;gap:14px;display:flex}.now-playing-thumb{border-radius:var(--radius-sm);object-fit:cover;width:56px;height:56px;box-shadow:0 4px 12px #00000080}.player-center{flex-direction:column;justify-self:center;align-items:center;gap:6px;width:100%;max-width:720px;display:flex}.player-controls{align-items:center;gap:16px;display:flex}.control-btn{color:var(--text-subdued);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:color .2s,transform .15s;display:flex}.control-btn:hover{color:var(--text-base);transform:scale(1.08)}.control-btn.active{color:var(--spotify-green);position:relative}.control-btn.active:after{content:"";background-color:var(--spotify-green);border-radius:50%;width:4px;height:4px;position:absolute;bottom:-2px}.btn-play-pause{background-color:var(--text-base);width:38px;height:38px;color:var(--bg-black);border-radius:50%;transition:transform .2s,background-color .2s}.btn-play-pause:hover{background-color:var(--text-base);transform:scale(1.08)}.progress-container{width:100%;color:var(--text-subdued);align-items:center;gap:8px;font-size:.75rem;display:flex}.range-slider{appearance:none;cursor:pointer;background:#fff3;border-radius:2px;outline:none;width:100%;height:4px}.range-slider::-webkit-slider-thumb{appearance:none;background:var(--text-base);cursor:pointer;opacity:0;border-radius:50%;width:12px;height:12px;transition:opacity .2s}.progress-container:hover .range-slider::-webkit-slider-thumb{opacity:1}.player-right:hover .range-slider::-webkit-slider-thumb{opacity:1}.player-right{color:var(--text-subdued);justify-content:flex-end;align-items:center;gap:14px;display:flex}.modal-backdrop{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:100;background-color:#000c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);width:100%;max-width:540px;box-shadow:var(--shadow-xl);flex-direction:column;gap:20px;padding:24px;display:flex}@media (width<=768px){.app-container{grid-template-columns:1fr;grid-template-rows:1fr var(--player-height) 60px;padding:0}.sidebar-container{display:none}.main-view-container{border-radius:0;grid-area:1/1/2/2}.player-bar{grid-area:2/1/3/2;grid-template-columns:1fr auto;padding:0 12px}.player-center .progress-container,.player-right{display:none}.mobile-nav-bar{border-top:1px solid var(--border-subtle);background-color:#121212f2;grid-area:3/1/4/2;justify-content:space-around;align-items:center;display:flex}}