*{margin:0;padding:0;box-sizing:border-box}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;background:#0a0a0a;color:#fff}button,input{font-family:inherit}.top-nav{height:64px;background:var(--bg-secondary);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;gap:1.5rem;position:relative;z-index:10}.top-nav-left{display:flex;align-items:center;gap:1rem;flex:0 0 auto}.top-nav-logo{background:none;border:none;display:flex;align-items:center;gap:.75rem;color:var(--accent);cursor:pointer;padding:.5rem;border-radius:4px;transition:all .2s;font-size:1.25rem;font-weight:700}.top-nav-logo span{color:var(--accent)}.top-nav-logo:hover{background:var(--bg-hover);transform:scale(1.05)}.top-nav-center{flex:1;display:flex;align-items:center;justify-content:center;gap:1rem;max-width:600px;margin:0 auto}.top-nav-home-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0}.top-nav-home-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.top-nav-search-form{width:100%;position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:1rem;color:var(--text-secondary);pointer-events:none}.top-nav-search-input{width:100%;padding:.75rem 1rem .75rem 3rem;background:var(--bg-tertiary);border:1px solid transparent;border-radius:500px;color:var(--text-primary);font-size:.9375rem;font-family:inherit;transition:all .2s}.top-nav-search-input:focus{outline:none;border-color:var(--text-secondary);background:var(--bg-primary)}.top-nav-search-input::placeholder{color:var(--text-secondary)}.top-nav-right{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}.top-nav-action-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem 1rem;border-radius:500px;font-size:.875rem;font-weight:600;font-family:inherit;display:flex;align-items:center;gap:.5rem;transition:all .2s;white-space:nowrap}.top-nav-action-btn.icon-only{padding:.5rem;border-radius:50%}.top-nav-action-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.top-nav-action-text{display:inline-block}.top-nav-user-menu-wrapper{position:relative;margin-left:.5rem}.top-nav-user-btn{background:var(--bg-hover);border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;padding:0}.top-nav-user-btn:hover{background:var(--bg-tertiary);transform:scale(1.05)}.top-nav-user-avatar{width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:var(--bg-primary);display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:700;text-transform:uppercase}.user-menu-backdrop{position:fixed;inset:0;z-index:998;background:transparent}.user-menu-dropdown{position:absolute;top:calc(100% + .5rem);right:0;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 32px #00000080;min-width:200px;z-index:999;overflow:hidden}.user-menu-header{padding:1rem;display:flex;align-items:center;gap:.75rem}.user-menu-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:var(--bg-primary);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;text-transform:uppercase;flex-shrink:0}.user-menu-info{flex:1;min-width:0}.user-menu-email{font-size:.875rem;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-menu-divider{height:1px;background:var(--border);margin:.5rem 0}.user-menu-item{width:100%;padding:.75rem 1rem;background:none;border:none;color:var(--text-primary);font-size:.875rem;font-family:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;gap:.75rem;transition:background .2s}.user-menu-item:hover{background:var(--bg-hover)}.user-menu-item svg{color:var(--text-secondary);flex-shrink:0}@media(max-width:900px){.top-nav-action-text{display:none}.top-nav{padding:0 1rem;gap:1rem}.top-nav-center{max-width:none;margin:0}}@media(max-width:600px){.top-nav-home-btn{display:none}.top-nav-center{flex:1}}.context-menu{position:fixed;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;min-width:200px;z-index:10000;box-shadow:0 8px 24px #00000080;padding:.25rem 0;animation:contextMenuFadeIn .15s ease-out}@keyframes contextMenuFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.625rem 1rem;background:none;border:none;color:var(--text-primary);font-size:.875rem;cursor:pointer;text-align:left;transition:background .15s;font-family:inherit}.context-menu-item:hover:not(.disabled){background:var(--bg-hover)}.context-menu-item.disabled{opacity:.5;cursor:not-allowed}.context-menu-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.context-menu-icon svg{width:16px;height:16px}.context-menu-arrow{margin-left:auto;font-size:.75rem;color:var(--text-secondary)}.context-menu-separator{height:1px;background:var(--border);margin:.25rem 0}.sidebar{width:var(--sidebar-width, 240px);background:var(--bg-secondary);display:flex;flex-direction:column;padding:1rem 0;overflow:hidden;height:100%;position:relative}.sidebar-resize-handle{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;z-index:10;transition:background .2s}.sidebar-resize-handle:hover,.sidebar-resize-handle:active{background:var(--accent)}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem 1rem;gap:.5rem}.sidebar-title{font-size:1rem;font-weight:700;color:var(--text-primary);margin:0;flex:1}.sidebar-header-actions{display:flex;align-items:center;gap:.5rem}.sidebar-create-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s}.sidebar-create-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.sidebar-filters{display:flex;gap:.5rem;padding:0 1rem 1rem;border-bottom:1px solid var(--border);margin-bottom:.5rem;overflow-x:auto;overflow-y:hidden}.sidebar-filters::-webkit-scrollbar{height:6px}.sidebar-filters::-webkit-scrollbar-track{background:transparent}.sidebar-filters::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}.sidebar-filters::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.sidebar-filter-tab{background:none;border:none;color:var(--text-secondary);font-size:.875rem;font-weight:600;padding:.5rem .75rem;border-radius:4px;cursor:pointer;white-space:nowrap;transition:all .2s;font-family:inherit}.sidebar-filter-tab:hover,.sidebar-filter-tab.active{color:var(--text-primary);background:var(--bg-hover)}.sidebar-content{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:0 .5rem}.sidebar-empty{color:var(--text-secondary);font-size:.875rem;text-align:center;padding:2rem 1rem}.sidebar-library-list{flex:1;overflow-y:auto;padding-right:.5rem}.sidebar-library-list::-webkit-scrollbar{width:8px}.sidebar-library-list::-webkit-scrollbar-track{background:transparent}.sidebar-library-list::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:4px}.sidebar-library-list::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.sidebar-library-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:4px;text-decoration:none;color:var(--text-primary);transition:background .2s;min-height:56px}.sidebar-library-item:hover,.sidebar-library-item.active{background:var(--bg-hover)}.sidebar-item-thumbnail{width:40px;height:40px;flex-shrink:0;border-radius:4px;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;overflow:hidden}.sidebar-item-image{width:100%;height:100%;object-fit:cover}.sidebar-item-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.sidebar-item-icon.liked-icon{background:linear-gradient(135deg,#450af5,#c4efd9);color:#fff}.sidebar-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.sidebar-item-title{font-size:.9375rem;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.sidebar-item-subtitle{font-size:.8125rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.dialog-cancel,.dialog-submit{padding:.75rem 1.5rem;border-radius:500px;font-weight:600;font-size:.9375rem;cursor:pointer;transition:all .2s;border:none;font-family:inherit}@media(max-width:900px){.sidebar{width:80px}.sidebar-title,.sidebar-filter-tab,.sidebar-item-info{display:none}.sidebar-header-actions{flex-direction:column}.sidebar-library-item{justify-content:center;padding:.75rem}.sidebar-item-thumbnail{width:48px;height:48px}}@media(max-width:600px){.sidebar{display:none}}.playlist-picker{position:fixed;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;width:300px;max-height:400px;z-index:10001;box-shadow:0 8px 24px #00000080;display:flex;flex-direction:column;animation:playlistPickerFadeIn .15s ease-out;overflow:hidden}@keyframes playlistPickerFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.playlist-picker-search{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:var(--bg-secondary);border-bottom:1px solid var(--border)}.playlist-picker-search-icon{color:var(--text-secondary);flex-shrink:0}.playlist-picker-search-input{flex:1;background:transparent;border:none;color:var(--text-primary);font-size:.875rem;font-family:inherit;outline:none}.playlist-picker-search-input::placeholder{color:var(--text-secondary)}.playlist-picker-new{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem;background:none;border:none;color:var(--text-primary);font-size:.875rem;cursor:pointer;text-align:left;transition:background .15s;font-family:inherit}.playlist-picker-new:hover:not(:disabled){background:var(--bg-hover)}.playlist-picker-new:disabled{opacity:.5;cursor:not-allowed}.playlist-picker-new-input-container{padding:.75rem;border-bottom:1px solid var(--border)}.playlist-picker-new-input{width:100%;padding:.5rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:4px;color:var(--text-primary);font-size:.875rem;font-family:inherit;outline:none}.playlist-picker-new-input:focus{border-color:var(--accent)}.playlist-picker-list{flex:1;overflow-y:auto;max-height:300px}.playlist-picker-list::-webkit-scrollbar{width:8px}.playlist-picker-list::-webkit-scrollbar-track{background:transparent}.playlist-picker-list::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:4px}.playlist-picker-list::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.playlist-picker-item{display:block;width:100%;padding:.75rem;background:none;border:none;color:var(--text-primary);font-size:.875rem;cursor:pointer;text-align:left;transition:background .15s;font-family:inherit}.playlist-picker-item:hover{background:var(--bg-hover)}.playlist-picker-empty{padding:1.5rem;text-align:center;color:var(--text-secondary);font-size:.875rem}.right-sidebar{width:var(--right-sidebar-width, 320px);background:var(--bg-secondary);border-left:1px solid var(--border);display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative}.right-sidebar-resize-handle{position:absolute;top:0;left:0;width:4px;height:100%;cursor:col-resize;background:transparent;z-index:10;transition:background .2s}.right-sidebar-resize-handle:hover,.right-sidebar-resize-handle:active{background:var(--accent)}.right-sidebar-top{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--border)}.right-sidebar-tabs{display:flex;gap:.5rem}.tab-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);cursor:pointer;font-size:.875rem;transition:all .2s}.tab-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.tab-btn.active{background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}.close-sidebar-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:4px;transition:color .2s}.close-sidebar-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.right-sidebar-content{display:flex;flex-direction:column;height:100%;overflow:hidden}.right-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--border)}.right-sidebar-header h3{margin:0;font-size:1rem;font-weight:600;color:var(--text-primary)}.header-actions{display:flex;align-items:center;gap:.5rem}.view-toggle-btn{background:none;border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;padding:.375rem;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s}.view-toggle-btn:hover{color:var(--text-primary);border-color:var(--text-secondary);background:var(--bg-hover)}.clear-queue-btn{background:none;border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;padding:.375rem .75rem;border-radius:4px;font-size:.875rem;transition:all .2s}.clear-queue-btn:hover:not(:disabled){color:var(--text-primary);border-color:var(--text-secondary)}.clear-queue-btn:disabled{opacity:.5;cursor:not-allowed}.lyrics-content,.queue-content{flex:1;overflow-y:auto;padding:1rem}.lyrics-content::-webkit-scrollbar,.queue-content::-webkit-scrollbar{width:8px}.lyrics-content::-webkit-scrollbar-track,.queue-content::-webkit-scrollbar-track{background:transparent}.lyrics-content::-webkit-scrollbar-thumb,.queue-content::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:4px}.lyrics-content::-webkit-scrollbar-thumb:hover,.queue-content::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.lyrics-text{white-space:pre-wrap;font-size:.875rem;line-height:1.6;color:var(--text-primary);margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.lyrics-lines{display:flex;flex-direction:column;gap:.25rem}.lyrics-line{padding:.35rem .5rem;border-radius:6px;color:var(--text-secondary);transition:background .2s,color .2s;cursor:pointer}.lyrics-line:hover{background:var(--bg-hover);color:var(--text-primary)}.lyrics-line.active{background:#ff6b3526;color:var(--text-primary)}.lyrics-line-text{display:block;font-size:.9rem}.loading-state,.error-state,.no-content{color:var(--text-secondary);font-size:.875rem;text-align:center;padding:2rem 1rem}.queue-list{display:flex;flex-direction:column;gap:.125rem}.queue-item{width:100%;display:flex;align-items:center;gap:.75rem;padding:.75rem;background:none;border:none;border-radius:6px;color:var(--text-primary);cursor:pointer;text-align:left;transition:background .2s}.queue-item:hover{background:var(--bg-hover)}.queue-item.active{background:#ff6b3526}.queue-number{width:1.5rem;flex-shrink:0;font-size:.8125rem;color:var(--text-secondary);text-align:center;font-weight:500}.queue-item.active .queue-number{color:var(--accent)}.queue-track-info{display:flex;flex-direction:column;min-width:0;flex:1}.queue-track-title{font-size:.875rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.125rem}.queue-track-artist{font-size:.8125rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1200px){.right-sidebar{width:var(--right-sidebar-width, 280px)}}@media(max-width:900px){.right-sidebar{position:fixed;top:0;right:0;bottom:90px;width:var(--right-sidebar-width, 320px);max-width:90vw;z-index:100;box-shadow:-4px 0 20px #0000004d}.right-sidebar-resize-handle{display:none}}@media(max-width:600px){.right-sidebar{width:100vw;max-width:100vw;bottom:70px}.right-sidebar-tabs{flex:1}.tab-btn{flex:1;justify-content:center}}.player{height:90px;background:var(--bg-tertiary);border-top:1px solid var(--border);display:grid;grid-template-columns:minmax(160px,1fr) minmax(640px,2fr) minmax(160px,1fr);align-items:center;padding:0 1rem;gap:1rem;box-shadow:0 -2px 10px #0000004d;grid-column:1 / -1}.player-track{display:flex;align-items:center;gap:1rem;min-width:0}.player-cover{width:56px;height:56px;border-radius:4px;object-fit:cover;background:var(--bg-secondary)}.player-info{display:flex;flex-direction:column;min-width:0;overflow:hidden}.player-title{font-size:.875rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-artist{font-size:.75rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-like{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;transition:color .2s}.player-like:hover{color:var(--text-primary)}.player-like.liked{color:var(--accent)}.player-empty{color:var(--text-secondary);font-size:.875rem}.player-controls{display:flex;flex-direction:column;align-items:center;gap:.5rem;justify-self:center}.player-buttons{display:flex;align-items:center;gap:1rem}.control-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;transition:all .12s ease-in-out;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;line-height:0}.control-btn:hover:not(:disabled){color:var(--text-primary);transform:scale(1.05)}.control-btn:disabled{opacity:.5;cursor:not-allowed}.control-btn.active{color:var(--accent)}.play-btn{width:44px;height:44px;background:var(--accent);color:var(--bg-primary);display:inline-flex;align-items:center;justify-content:center;border-radius:50%}.play-btn:hover:not(:disabled){transform:scale(1.05);background:var(--text-primary)}.player-progress{display:flex;align-items:center;gap:.75rem;width:100%;max-width:none}.progress-time{font-size:.75rem;color:var(--text-secondary);min-width:40px;text-align:center}.progress-bar{flex:1;height:6px;background:var(--bg-hover);border-radius:999px;cursor:pointer;position:relative;overflow:visible;min-width:600px}.progress-fill{height:100%;background:var(--text-primary);border-radius:999px;position:relative;transition:width .12s linear;min-width:2px}.progress-bar:hover .progress-fill{background:var(--accent)}.progress-bar:hover .progress-fill:after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;background:var(--accent);border-radius:50%;box-shadow:0 0 6px #ff6b352e}.player-extras{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}.extra-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;transition:color .2s}.extra-btn:hover:not(:disabled){color:var(--text-primary)}.extra-btn:disabled{opacity:.5;cursor:not-allowed}.extra-btn.active{color:var(--accent)}.volume-control{display:flex;align-items:center;gap:.5rem}.volume-bar{width:100px;height:4px;background:var(--bg-hover);border-radius:2px;cursor:pointer}.volume-fill{height:100%;background:var(--text-primary);border-radius:2px;min-width:2px}.volume-bar:hover .volume-fill{background:var(--accent)}@media(max-width:768px){.player{padding:0 .5rem;gap:.5rem}.player-track{gap:.5rem}.player-cover{width:48px;height:48px}.player-title{font-size:.8rem}.player-artist{font-size:.7rem}.player-buttons{gap:.5rem}.control-btn{padding:.25rem}.player-progress{gap:.5rem;max-width:none}.progress-time{font-size:.7rem;min-width:35px}.player-extras{gap:.25rem}.extra-btn{padding:.25rem}.volume-bar{width:80px}}@media(max-width:600px){.player{height:70px;grid-template-columns:1fr;grid-template-rows:auto auto;padding:.5rem;gap:.5rem}.player-track{justify-content:center}.player-controls{flex-direction:row;justify-content:space-between;align-items:center}.player-buttons{order:1;flex:0 0 auto}.player-progress{order:2;flex:1;max-width:none;margin:0 1rem}.player-extras{order:3;flex:0 0 auto}.volume-control{display:none}}.home{padding-bottom:2rem}.home-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:50vh;color:var(--text-secondary)}.hero{position:relative;padding:4rem 2rem;background:linear-gradient(135deg,var(--accent) 0%,#191414 70%);border-radius:8px;margin:1rem 2rem 2rem;overflow:hidden}.hero-content{position:relative;z-index:1;max-width:600px}.hero h1{font-size:3rem;font-weight:800;margin:0 0 1rem;line-height:1.1}.hero p{font-size:1.125rem;color:#fffc;margin:0 0 2rem}.hero-cta{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 2rem;background:var(--text-primary);color:var(--bg-primary);text-decoration:none;font-weight:700;border-radius:500px;transition:transform .2s,background .2s}.hero-cta:hover{transform:scale(1.05);background:#f0f0f0}.hero-gradient{position:absolute;top:0;right:0;width:50%;height:100%;background:radial-gradient(circle at center,rgba(0,0,0,.3),transparent)}.home-section{padding:0 2rem;margin-bottom:2rem}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.section-header h2{font-size:1.5rem;font-weight:700;margin:0}.see-all{color:var(--text-secondary);text-decoration:none;font-size:.875rem;font-weight:600;transition:color .2s}.see-all:hover{color:var(--text-primary)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.5rem}.music-card{background:var(--bg-secondary);padding:1rem;border-radius:8px;transition:background .2s;cursor:pointer;text-decoration:none;color:inherit}.music-card:hover{background:var(--bg-hover)}.card-image-container{position:relative;margin-bottom:1rem}.card-image{width:100%;aspect-ratio:1;border-radius:4px;object-fit:cover;background:var(--bg-tertiary)}.artist-image-container{border-radius:50%;overflow:hidden}.artist-image{border-radius:50%}.card-play-btn{position:absolute;bottom:8px;right:8px;width:48px;height:48px;background:var(--accent);border:none;border-radius:50%;color:#000;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;box-shadow:0 8px 16px #0000004d}.music-card:hover .card-play-btn{opacity:1;transform:translateY(0)}.card-play-btn:hover{transform:scale(1.05);background:var(--accent-hover)}.card-title{font-size:.9375rem;font-weight:600;margin:0 0 .25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-subtitle{font-size:.8125rem;color:var(--text-secondary);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.hero{margin:.5rem 1rem 1.5rem;padding:2rem 1.5rem}.hero h1{font-size:2rem}.home-section{padding:0 1rem}.card-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}}.search-page{padding:1rem 2rem 2rem}.search-filters{display:flex;gap:.5rem;margin-bottom:2rem;flex-wrap:wrap;align-items:center}.search-filter-btn{padding:.5rem 1rem;background:#ffffff1a;border:none;border-radius:500px;color:var(--text-primary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.search-filter-btn:hover{background:#ffffff26}.search-filter-btn.active{background:var(--text-primary);color:var(--bg-primary);font-weight:600}.search-top-section{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:3rem}.search-top-result{text-decoration:none;color:inherit}.top-result-card{background:var(--bg-secondary);border-radius:8px;padding:1rem;cursor:pointer;transition:background .2s;display:flex;flex-direction:column;height:100%;min-height:0}.top-result-card:hover{background:var(--bg-hover)}.top-result-image-container{margin-bottom:1rem;flex-shrink:0}.top-result-image{width:100%;aspect-ratio:1;max-width:180px;border-radius:50%;object-fit:cover;background:var(--bg-tertiary)}.top-result-placeholder{width:100%;aspect-ratio:1;max-width:180px;border-radius:50%;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.top-result-name{font-size:1.5rem;font-weight:700;margin:0 0 .5rem;color:var(--text-primary);line-height:1.2}.top-result-type{font-size:.875rem;color:var(--text-secondary);margin:0;text-transform:capitalize}.search-songs-section{display:flex;flex-direction:column;height:100%}.search-songs-list{display:flex;flex-direction:column;gap:.5rem}.search-song-item{display:flex;align-items:center;gap:1rem;padding:.5rem;border-radius:4px;cursor:pointer;transition:background .2s}.search-song-item:hover{background:var(--bg-hover)}.search-song-image{width:56px;height:56px;flex-shrink:0;border-radius:4px;overflow:hidden;background:var(--bg-tertiary)}.search-song-image img{width:100%;height:100%;object-fit:cover}.search-song-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);background:var(--bg-tertiary)}.search-song-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.search-song-title{font-size:1rem;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-song-artist{font-size:.875rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-song-actions{display:flex;align-items:center;gap:.75rem;flex-shrink:0}.search-song-heart-btn{background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:color .2s,transform .2s;flex-shrink:0}.search-song-heart-btn:hover{color:var(--accent);transform:scale(1.1)}.search-song-heart{color:currentColor;flex-shrink:0}.search-song-heart-btn .search-song-heart[fill=currentColor]{color:var(--accent)}.search-song-duration{font-size:.875rem;color:var(--text-secondary);min-width:40px;text-align:right}.search-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.search-section-title{font-size:1.5rem;font-weight:700;margin:0;color:var(--text-primary)}.search-show-more{background:none;border:none;color:var(--text-secondary);font-size:.875rem;font-weight:600;cursor:pointer;padding:.5rem;transition:color .2s;text-transform:uppercase;letter-spacing:.05em}.search-show-more:hover{color:var(--text-primary);text-decoration:underline}.search-section{margin-bottom:3rem}.search-artists-scroll{display:flex;gap:1.5rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.search-artists-scroll::-webkit-scrollbar{height:8px}.search-artists-scroll::-webkit-scrollbar-track{background:transparent}.search-artists-scroll::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.search-artists-scroll::-webkit-scrollbar-thumb:hover{background:#ffffff80}.search-artist-card{flex-shrink:0;width:180px;text-decoration:none;color:inherit;text-align:center;transition:transform .2s}.search-artist-card:hover{transform:scale(1.05)}.search-artist-image-container{margin-bottom:1rem}.search-artist-image{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;background:var(--bg-tertiary)}.search-artist-placeholder{width:100%;aspect-ratio:1;border-radius:50%;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.search-artist-name{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-artist-type{font-size:.875rem;color:var(--text-secondary);text-transform:capitalize}.search-albums-scroll{display:flex;gap:1.5rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.search-albums-scroll::-webkit-scrollbar{height:8px}.search-albums-scroll::-webkit-scrollbar-track{background:transparent}.search-albums-scroll::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.search-albums-scroll::-webkit-scrollbar-thumb:hover{background:#ffffff80}.search-album-card{flex-shrink:0;width:180px;text-decoration:none;color:inherit;transition:transform .2s}.search-album-card:hover{transform:scale(1.05)}.search-album-image-container{margin-bottom:.75rem}.search-album-image{width:100%;aspect-ratio:1;border-radius:4px;object-fit:cover;background:var(--bg-tertiary)}.search-album-placeholder{width:100%;aspect-ratio:1;border-radius:4px;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.search-album-title{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-album-meta{font-size:.875rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-full-width{width:100%}.search-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 0;color:var(--text-secondary)}.search-error{background:#e74c3c1a;border:1px solid var(--error);color:var(--error);padding:1rem;border-radius:8px}.search-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 0;color:var(--text-secondary);text-align:center}.search-empty h2{margin:1rem 0 .5rem;color:var(--text-primary)}.search-empty p{margin:0}.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.3);border-top-color:var(--text-primary);border-radius:50%;animation:spin .8s linear infinite}@media(max-width:768px){.search-page{padding:1rem}.search-top-section{grid-template-columns:1fr;gap:2rem}.search-artist-card,.search-album-card{width:150px}}.track-list{width:100%}.track-list-header{display:grid;grid-template-columns:50px 1fr 1fr 100px 120px;gap:1rem;padding:.5rem 1rem;border-bottom:1px solid var(--border);color:var(--text-secondary);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em}.track-row{display:grid;grid-template-columns:50px 1fr 1fr 100px 120px;gap:1rem;padding:.5rem 1rem;border-radius:4px;cursor:pointer;transition:background .2s;align-items:center}.track-row:hover{background:var(--bg-hover)}.track-row.playing{background:#ff6b351a}.track-col-num{text-align:center;color:var(--text-secondary);font-size:.875rem;position:relative}.track-number{display:block}.track-play-icon,.track-playing-icon,.track-row:hover .track-number{display:none}.track-row:hover .track-play-icon{display:block;margin:0 auto}.track-row.playing .track-number{display:none}.track-row.playing .track-playing-icon{display:block;margin:0 auto;color:var(--accent)}.track-col-title{display:flex;align-items:center;gap:.75rem;min-width:0}.track-cover{width:40px;height:40px;border-radius:4px;object-fit:cover;background:var(--bg-tertiary);flex-shrink:0}.track-info{display:flex;flex-direction:column;min-width:0}.track-name{font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-name.active{color:var(--accent)}.track-artist{font-size:.8125rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-col-album{font-size:.875rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-col-duration{font-size:.875rem;color:var(--text-secondary);text-align:right}.track-col-actions{display:flex;align-items:center;gap:.25rem;opacity:0;transition:opacity .2s}.track-row:hover .track-col-actions{opacity:1}.track-action-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;transition:color .2s;border-radius:4px}.track-action-btn:hover{color:var(--text-primary)}.track-action-btn.liked{color:var(--accent)}.track-action-btn:disabled{opacity:.6;cursor:not-allowed}.track-menu-container{position:relative}.track-menu{position:absolute;top:100%;right:0;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;min-width:200px;z-index:100;box-shadow:0 8px 24px #00000080}.track-menu-header{padding:.75rem 1rem;font-size:.75rem;color:var(--text-secondary);border-bottom:1px solid var(--border)}.track-menu-empty{padding:.75rem 1rem;font-size:.875rem;color:var(--text-secondary)}.track-menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.75rem 1rem;background:none;border:none;color:var(--text-primary);font-size:.875rem;cursor:pointer;text-align:left;transition:background .2s}.track-menu-item:hover{background:var(--bg-hover)}@media(max-width:900px){.track-list-header,.track-row{grid-template-columns:40px 1fr 100px 100px}.track-col-album{display:none}}@media(max-width:600px){.track-list-header,.track-row{grid-template-columns:1fr 80px}.track-col-num,.track-col-album,.track-col-actions{display:none}}.liked-page{padding:1rem 2rem 2rem}.liked-header{display:flex;gap:2rem;align-items:flex-end;margin-bottom:2rem;background:linear-gradient(135deg,#450af5,#8e8ee5 50%,var(--bg-primary));padding:3rem 2rem;margin:-1rem -2rem 2rem;border-radius:0 0 8px 8px}.liked-header-icon{width:232px;height:232px;background:linear-gradient(135deg,#450af5,#c4efd9);border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 24px #00000080;flex-shrink:0}.liked-header-info{flex:1;min-width:0}.liked-type{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.liked-header-info h1{font-size:3rem;font-weight:800;margin:.5rem 0;line-height:1.1}.liked-header-info p{color:#fffc;margin:0 0 1.5rem}.liked-tracks{background:var(--bg-secondary);border-radius:8px;padding:1rem 0}.liked-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;color:var(--text-secondary);text-align:center}.liked-empty h2{margin:1rem 0 .5rem;color:var(--text-primary)}.liked-empty p{margin:0}@media(max-width:768px){.liked-page{padding:1rem}.liked-header{flex-direction:column;align-items:center;text-align:center;padding:2rem 1rem;margin:-1rem -1rem 2rem}.liked-header-icon{width:180px;height:180px}.liked-header-info h1{font-size:2rem}}.playlist-page{padding:1rem 2rem 2rem}.playlist-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:50vh;color:var(--text-secondary);text-align:center}.playlist-header{display:flex;gap:2rem;margin-bottom:2rem;align-items:flex-end}.playlist-cover{flex-shrink:0}.playlist-cover-image{width:232px;height:232px;border-radius:4px;object-fit:cover;box-shadow:0 8px 24px #00000080}.playlist-cover-placeholder{width:232px;height:232px;background:var(--bg-tertiary);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);box-shadow:0 8px 24px #00000080}.playlist-info{flex:1;min-width:0}.playlist-type{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.playlist-title{font-size:3rem;font-weight:800;margin:.5rem 0;line-height:1.1}.playlist-meta{color:var(--text-secondary);font-size:.875rem;margin:0 0 1.5rem}.playlist-actions{display:flex;align-items:center;gap:1rem}.action-btn.delete:hover{color:var(--error);border-color:var(--error)}.playlist-tracks{background:var(--bg-secondary);border-radius:8px;padding:1rem 0}.playlist-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;color:var(--text-secondary);text-align:center;background:var(--bg-secondary);border-radius:8px}.playlist-empty h2{margin:1rem 0 .5rem;color:var(--text-primary)}.playlist-empty p{margin:0 0 1.5rem}.search-link{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:var(--accent);color:#000;text-decoration:none;font-weight:600;border-radius:500px;transition:transform .2s,background .2s}.search-link:hover{transform:scale(1.05);background:var(--accent-hover)}@media(max-width:768px){.playlist-page{padding:1rem}.playlist-header{flex-direction:column;align-items:center;text-align:center}.playlist-cover-image,.playlist-cover-placeholder{width:180px;height:180px}.playlist-title{font-size:2rem}.playlist-actions{justify-content:center}}.album-page{padding:1rem 2rem 2rem}.album-loading,.album-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:50vh;color:var(--text-secondary);text-align:center}.back-link{display:inline-flex;align-items:center;gap:.25rem;color:var(--text-secondary);text-decoration:none;font-size:.875rem;margin-bottom:1.5rem;transition:color .2s}.album-header{display:flex;gap:2rem;margin-bottom:2rem;align-items:flex-end}.album-cover-container{flex-shrink:0}.album-cover{width:240px;height:240px;border-radius:8px;object-fit:cover;background:var(--bg-secondary);box-shadow:0 8px 24px #00000080}.album-info{flex:1;min-width:0}.album-type{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.album-title{font-size:3rem;font-weight:800;margin:.5rem 0;line-height:1.1;overflow:hidden;text-overflow:ellipsis}.album-meta{color:var(--text-secondary);font-size:.875rem;margin-bottom:1.5rem}.artist-link{color:var(--text-primary);text-decoration:none;font-weight:600}.artist-link:hover{text-decoration:underline}.meta-separator{margin:0 .5rem}.album-actions{display:flex;align-items:center;gap:1rem}.action-btn:disabled{opacity:.6;cursor:not-allowed}.action-btn:disabled:hover{transform:none}.action-btn.saved{color:var(--accent);border-color:var(--accent)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.album-tracks{background:var(--bg-secondary);border-radius:8px;padding:1rem 0}@media(max-width:768px){.album-page{padding:1rem}.album-header{flex-direction:column;align-items:center;text-align:center}.album-cover{width:200px;height:200px}.album-title{font-size:2rem}.album-actions{justify-content:center}}.artist-page{padding:1rem 2rem 2rem}.artist-loading,.artist-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:50vh;color:var(--text-secondary);text-align:center}.artist-hero{position:relative;height:400px;background-size:cover;background-position:center top;border-radius:8px;overflow:hidden;margin-bottom:2rem}.artist-header{display:flex;align-items:flex-end;gap:2rem;margin-bottom:2rem;padding:2rem 0;border-bottom:1px solid var(--bg-tertiary)}.artist-header-content{display:flex;flex-direction:column;justify-content:flex-end;flex:1;gap:1.5rem}.artist-header-image{width:200px;height:200px;border-radius:8px;object-fit:cover;background:var(--bg-secondary);box-shadow:0 8px 24px #00000080}.artist-header-placeholder{width:200px;height:200px;border-radius:8px;background:var(--bg-secondary);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);box-shadow:0 8px 24px #00000080}.artist-hero-overlay{position:absolute;inset:0;background:linear-gradient(transparent,#000c);display:flex;flex-direction:column;justify-content:flex-end;padding:2rem}.artist-header .artist-name{font-size:4rem;font-weight:800;margin:0;line-height:1}.artist-hero-overlay .artist-name{font-size:4rem;font-weight:800;margin:0 0 1rem;line-height:1}.artist-hero-actions,.artist-header-actions{display:flex;align-items:center;gap:1rem}.artist-hero-overlay .play-btn{display:flex;align-items:center;justify-content:center;text-align:center;gap:.5rem}.artist-follow-btn{width:40px;height:40px;background:none;border:1px solid var(--text-secondary);border-radius:50%;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.artist-follow-btn:hover{color:var(--text-primary);border-color:var(--text-primary);transform:scale(1.05)}.artist-follow-btn.followed{color:var(--accent);border-color:var(--accent);background:#1db9541a}.artist-section{margin-bottom:2rem}.artist-section h2{font-size:1.5rem;font-weight:700;margin:0 0 1rem}.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.5rem}.album-card{background:var(--bg-secondary);padding:1rem;border-radius:8px;text-decoration:none;color:inherit;transition:background .2s}.album-card:hover{background:var(--bg-hover)}.album-card-cover{position:relative;margin-bottom:1rem}.album-card-image{width:100%;aspect-ratio:1;border-radius:4px;object-fit:cover;background:var(--bg-tertiary)}.album-card-placeholder{width:100%;aspect-ratio:1;border-radius:4px;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.album-play-btn{position:absolute;bottom:8px;right:8px;width:48px;height:48px;background:var(--accent);border:none;border-radius:50%;color:#000;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;box-shadow:0 8px 16px #0000004d}.album-card:hover .album-play-btn{opacity:1;transform:translateY(0)}.album-play-btn:hover{transform:scale(1.05);background:var(--accent-hover)}.album-card-title{font-size:.9375rem;font-weight:600;margin:0 0 .25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.album-card-year{font-size:.8125rem;color:var(--text-secondary);margin:0}@media(max-width:768px){.artist-page{padding:1rem}.artist-hero{height:300px}.artist-header{flex-direction:column;align-items:flex-start;gap:1.5rem;padding:1.5rem 0}.artist-header-content{width:100%}.artist-header-image,.artist-header-placeholder{width:150px;height:150px}.artist-header-placeholder svg{width:60px;height:60px}.artist-header .artist-name,.artist-hero-overlay .artist-name{font-size:2.5rem}.album-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}}.settings-page{padding:1rem 2rem 2rem;max-width:1400px;width:100%;margin:0 auto}.settings-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}.settings-header h1{font-size:2rem;font-weight:800;margin:0}.settings-section{background:var(--bg-secondary);border-radius:8px;padding:1.5rem;margin-bottom:1.5rem}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}@media(max-width:1200px){.settings-grid{grid-template-columns:1fr}}.section-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.section-header h2{font-size:1.25rem;font-weight:700;margin:0}.section-description{color:var(--text-secondary);font-size:.875rem;margin:0 0 1.5rem;line-height:1.6}.auto-select-toggle{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}.toggle-label{display:flex;align-items:center;gap:.75rem;cursor:pointer;font-weight:500}.toggle-label input{display:none}.toggle-switch{width:44px;height:24px;background:var(--bg-hover);border-radius:12px;position:relative;transition:background .2s}.toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .2s}.toggle-label input:checked+.toggle-switch{background:var(--accent)}.toggle-label input:checked+.toggle-switch:after{transform:translate(20px)}.toggle-description{color:var(--text-secondary);font-size:.8125rem;margin:.5rem 0 0 52px}.speed-test-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.speed-test-header h3{font-size:1rem;font-weight:600;margin:0}.test-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--bg-hover);border:1px solid var(--border);border-radius:500px;color:var(--text-primary);font-weight:500;cursor:pointer;transition:all .2s}.test-btn:hover:not(:disabled){background:var(--bg-tertiary);border-color:var(--text-secondary)}.test-btn:disabled{opacity:.6;cursor:not-allowed}.spin{animation:spin 1s linear infinite}.server-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:.75rem}@media(max-width:900px){.server-list{grid-template-columns:1fr}}.server-item{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:var(--bg-tertiary);border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s;text-align:left;width:100%}.server-item:hover{background:var(--bg-hover)}.server-item.selected{border-color:var(--accent);background:#ff6b351a}.server-info{flex:1;min-width:0}.server-name{font-weight:600;display:flex;align-items:center;gap:.75rem}.server-url{font-size:.8125rem;color:var(--text-secondary);margin-top:.25rem;overflow:hidden;text-overflow:ellipsis}.fastest-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background:var(--accent);color:#000;font-size:.6875rem;font-weight:700;border-radius:500px;text-transform:uppercase}.server-status{display:flex;align-items:center;gap:1rem}.latency{font-weight:700;font-size:.9375rem;min-width:60px;text-align:right}.error-status{display:flex;align-items:center;gap:.25rem;color:var(--error);font-size:.875rem}.no-result{color:var(--text-secondary);font-size:.875rem}.testing-indicator{color:var(--text-secondary)}.selected-indicator{width:24px;height:24px;background:var(--accent);color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center}@media(max-width:768px){.settings-page{padding:1rem}.speed-test-header{flex-direction:column;align-items:flex-start;gap:1rem}.server-item{flex-direction:column;align-items:flex-start;gap:.75rem}.server-status{width:100%;justify-content:space-between}}.quality-options{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}@media(max-width:768px){.quality-options{grid-template-columns:1fr}}.quality-option{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all .2s ease}.quality-option:hover{border-color:var(--accent);background:var(--bg-hover)}.quality-option input[type=radio]{margin-top:.125rem;accent-color:var(--accent)}.quality-info{flex:1}.quality-label{font-weight:600;margin-bottom:.25rem}.quality-desc{font-size:.875rem;color:var(--text-secondary)}.data-actions{display:flex;gap:1rem;flex-wrap:wrap}.data-action-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:1px solid var(--border);border-radius:500px;background:var(--bg-tertiary);color:var(--text-primary);font-weight:500;cursor:pointer;transition:all .2s;font-size:.9375rem}.data-action-btn:hover{background:var(--bg-hover);border-color:var(--accent)}.data-action-btn.export-btn{background:var(--accent);color:#000;border-color:var(--accent)}.data-action-btn.export-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.data-action-btn.import-btn{cursor:pointer}.import-message{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:6px;margin-bottom:1rem;font-size:.875rem;font-weight:500}.import-message.success{background:#ff6b351a;color:var(--accent);border:1px solid rgba(255,107,53,.2)}.import-message.error{background:#ef44441a;color:var(--error);border:1px solid rgba(239,68,68,.2)}.import-success-content{display:flex;flex-direction:column;gap:.5rem}.reload-prompt{display:flex;align-items:center;gap:.75rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid rgba(255,107,53,.2);font-size:.8125rem}.reload-btn{padding:.375rem .75rem;background:var(--accent);color:#000;border:none;border-radius:500px;font-weight:600;font-size:.8125rem;cursor:pointer;transition:background .2s}.reload-btn:hover{background:var(--accent-hover)}@media(max-width:768px){.data-actions{flex-direction:column}.data-action-btn{width:100%;justify-content:center}}.account-actions{display:flex;gap:1rem;flex-wrap:wrap}.login-btn,.signup-btn,.logout-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:1px solid var(--border);border-radius:500px;font-weight:500;cursor:pointer;transition:all .2s;font-size:.9375rem}.login-btn{background:var(--accent);color:#000;border-color:var(--accent)}.login-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.signup-btn{background:var(--bg-tertiary);color:var(--text-primary)}.signup-btn:hover{background:var(--bg-hover);border-color:var(--accent)}.logout-btn{background:var(--bg-tertiary);color:var(--text-primary)}.logout-btn:hover{background:var(--bg-hover);border-color:var(--error);color:var(--error)}.sync-status-container{display:flex;flex-direction:column;gap:1.5rem}.sync-status{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--bg-tertiary);border-radius:8px}.sync-status-indicator{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.sync-status-text{flex:1}.sync-status-label{font-weight:600;margin-bottom:.25rem}.sync-status-time{font-size:.8125rem;color:var(--text-secondary)}.cloud-actions{display:flex;gap:1rem;flex-wrap:wrap}.sync-btn,.delete-cloud-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:1px solid var(--border);border-radius:500px;font-weight:500;cursor:pointer;transition:all .2s;font-size:.9375rem}.sync-btn{background:var(--accent);color:#000;border-color:var(--accent)}.sync-btn:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.sync-btn:disabled{opacity:.6;cursor:not-allowed}.delete-cloud-btn{background:var(--bg-tertiary);color:var(--text-primary)}.delete-cloud-btn:hover{background:var(--bg-hover);border-color:var(--error);color:var(--error)}.delete-dialog-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.delete-dialog{background:var(--bg-secondary);border-radius:12px;padding:2rem;max-width:500px;width:100%;box-shadow:0 20px 25px -5px #00000080}.delete-dialog h3{font-size:1.5rem;margin:0 0 1rem}.delete-dialog p{color:var(--text-secondary);margin:.75rem 0;line-height:1.6}.delete-dialog ul{margin:1rem 0;padding-left:1.5rem;color:var(--text-secondary)}.delete-dialog ul li{margin:.5rem 0}.delete-dialog-actions{display:flex;gap:1rem;margin-top:1.5rem}.cancel-btn,.confirm-delete-btn{flex:1;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s}.cancel-btn{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border)}.cancel-btn:hover:not(:disabled){background:var(--bg-hover)}.cancel-btn:disabled{opacity:.6;cursor:not-allowed}.confirm-delete-btn{background:var(--error);color:#fff;border:1px solid var(--error)}.confirm-delete-btn:hover:not(:disabled){background:#dc2626}.confirm-delete-btn:disabled{opacity:.6;cursor:not-allowed}@media(max-width:768px){.account-actions,.cloud-actions{flex-direction:column}.login-btn,.signup-btn,.logout-btn,.sync-btn,.delete-cloud-btn{width:100%;justify-content:center}.delete-dialog-actions{flex-direction:column}}.auth-form{width:100%;max-width:400px;display:flex;flex-direction:column;gap:1.5rem}.auth-form-group{display:flex;flex-direction:column;gap:.5rem}.auth-form-group label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:500;color:var(--text-primary)}.auth-form-group input{padding:.75rem 1rem;font-size:1rem;border:1px solid var(--border);border-radius:8px;background:var(--background-secondary);color:var(--text-primary);transition:border-color .2s}.auth-form-group input:focus{outline:none;border-color:var(--accent)}.auth-form-group input:disabled{opacity:.5;cursor:not-allowed}.auth-error{padding:.75rem 1rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:8px;color:#ef4444;font-size:.9rem}.auth-submit-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.5rem;font-size:1rem;font-weight:600;color:#fff;background:var(--accent);border:none;border-radius:8px;cursor:pointer;transition:all .2s}.auth-submit-btn:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px)}.auth-submit-btn:active:not(:disabled){transform:translateY(0)}.auth-submit-btn:disabled{opacity:.6;cursor:not-allowed}.auth-footer{text-align:center;color:var(--text-secondary);font-size:.9rem}.auth-footer a{color:var(--accent);text-decoration:none;font-weight:500}.auth-footer a:hover{text-decoration:underline}.oauth-divider{display:flex;align-items:center;gap:1rem;margin:1rem 0;color:var(--text-secondary);font-size:.9rem}.oauth-divider:before,.oauth-divider:after{content:"";flex:1;height:1px;background:var(--border)}.oauth-buttons{display:flex;flex-direction:column;gap:.75rem}.oauth-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.75rem 1rem;font-size:.95rem;font-weight:500;color:var(--text-primary);background:var(--background-secondary);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s}.oauth-btn:hover:not(:disabled){background:var(--background-hover);border-color:var(--accent)}.oauth-btn:disabled{opacity:.5;cursor:not-allowed}.auth-page{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:2rem;background:var(--background-primary)}.auth-container{width:100%;max-width:450px;display:flex;flex-direction:column;gap:2rem}.auth-header{text-align:center}.auth-header h1{font-size:2rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}.auth-header p{font-size:1rem;color:var(--text-secondary)}:root{--bg-primary: #0a0a0a;--bg-secondary: #141414;--bg-tertiary: #1e1e1e;--bg-hover: #282828;--text-primary: #ffffff;--text-secondary: #a0a0a0;--accent: #FF6B35;--accent-hover: #FF8C42;--border: #282828;--error: #e74c3c;--sidebar-width: 240px;--right-sidebar-width: 320px}.app{display:grid;grid-template-columns:var(--sidebar-width, 240px) 1fr;grid-template-rows:64px 1fr 90px;height:100vh;background:var(--bg-primary);color:var(--text-primary)}.app.with-right-sidebar{grid-template-columns:var(--sidebar-width, 240px) 1fr var(--right-sidebar-width, 320px)}.top-nav{grid-column:1 / -1;grid-row:1}.main-content{overflow-y:auto;background:linear-gradient(180deg,var(--bg-tertiary) 0%,var(--bg-primary) 300px)}.main-content::-webkit-scrollbar{width:12px}.main-content::-webkit-scrollbar-track{background:transparent}.main-content::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:6px;border:3px solid transparent;background-clip:content-box}.main-content::-webkit-scrollbar-thumb:hover{background:var(--text-secondary);background-clip:content-box}.back-link{display:inline-flex;align-items:center;gap:.25rem;color:var(--text-secondary);text-decoration:none;font-size:.875rem;margin-bottom:1.5rem;transition:color .2s;background:none;border:none;cursor:pointer;padding:0;font-family:inherit}.back-link:hover{color:var(--text-primary)}.play-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 2rem;background:var(--accent);border:none;border-radius:500px;color:#000;font-weight:700;font-size:.9375rem;cursor:pointer;transition:transform .2s,background .2s}.play-btn:hover{transform:scale(1.05);background:var(--accent-hover)}.action-btn{width:40px;height:40px;background:none;border:1px solid var(--text-secondary);border-radius:50%;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.action-btn:hover{color:var(--text-primary);border-color:var(--text-primary);transform:scale(1.05)}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.create-playlist-dialog{border:none;border-radius:8px;padding:0;background:var(--bg-secondary);color:var(--text-primary);max-width:400px;width:90vw;box-shadow:0 8px 32px #00000080;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}.create-playlist-dialog::backdrop{background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog-content{padding:1.5rem}.dialog-content form{display:flex;flex-direction:column}.dialog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.dialog-header h2{font-size:1.5rem;font-weight:700;margin:0}.dialog-close{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.dialog-close:hover{background:var(--bg-hover);color:var(--text-primary)}.dialog-field{margin-bottom:1rem}.dialog-field label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.5rem;color:var(--text-primary)}.dialog-field input{width:100%;padding:.75rem;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;color:var(--text-primary);font-size:.9375rem;font-family:inherit;transition:border-color .2s}.dialog-field input:focus{outline:none;border-color:var(--accent)}.dialog-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:2rem}.dialog-cancel,.dialog-submit{padding:.75rem 1.5rem;border-radius:500px;font-weight:600;font-size:.9375rem;cursor:pointer;transition:all .2s;border:none}.dialog-cancel{background:transparent;color:var(--text-secondary)}.dialog-cancel:hover{color:var(--text-primary);background:var(--bg-hover)}.dialog-submit{background:var(--accent);color:#000}.dialog-submit:hover{background:var(--accent-hover);transform:scale(1.05)}.dialog-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}@media(max-width:1200px){.app.with-right-sidebar{grid-template-columns:var(--sidebar-width, 240px) 1fr var(--right-sidebar-width, 280px)}}@media(max-width:900px){.app,.app.with-right-sidebar{grid-template-columns:80px 1fr;grid-template-rows:64px 1fr 90px}.sidebar-resize-handle{display:none}}@media(max-width:600px){.app,.app.with-right-sidebar{grid-template-columns:1fr;grid-template-rows:64px 1fr 70px}.sidebar{display:none}}