.sidebar{background:var(--background-secondary);border-right:1px solid var(--border);bottom:0;display:flex;flex-direction:column;left:0;position:fixed;top:0;width:var(--sidebar-width);z-index:100}.sidebar-header{border-bottom:1px solid var(--border);padding:var(--spacing-lg)}.logo{gap:var(--spacing-sm)}.logo,.logo-icon{align-items:center;display:flex}.logo-icon{background:linear-gradient(135deg,var(--primary),#ff6b6b);border-radius:var(--radius-md);color:#fff;font-size:20px;height:36px;justify-content:center;width:36px}.logo-text{color:var(--text-primary);font-size:20px;font-weight:700}.sidebar-nav{flex:1 1;overflow-y:auto;padding:var(--spacing-md)}.nav-list{display:flex;flex-direction:column;gap:var(--spacing-xs)}.nav-link{align-items:center;border-radius:var(--radius-md);color:var(--text-secondary);display:flex;font-size:15px;font-weight:500;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-fast)}.nav-link:hover{background:var(--surface-hover);color:var(--text-primary)}.nav-link.active{background:var(--primary);color:#fff}.nav-link svg{font-size:22px}.nav-divider{background:var(--border);height:1px;margin:var(--spacing-md) 0}.nav-section-title{color:var(--text-tertiary);font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:var(--spacing-sm);padding:0 var(--spacing-md);text-transform:uppercase}.playlists-header{align-items:center;display:flex;justify-content:space-between;padding-right:var(--spacing-md)}.add-playlist-btn{align-items:center;background:var(--surface-hover);border-radius:var(--radius-full);color:var(--text-secondary);display:flex;height:24px;justify-content:center;transition:all var(--transition-fast);width:24px}.add-playlist-btn:hover{background:var(--primary);color:#fff}.playlists-list{max-height:200px;overflow-y:auto}.playlist-empty{color:var(--text-tertiary);font-size:13px;padding:var(--spacing-md)}.sidebar-footer{border-top:1px solid var(--border);padding:var(--spacing-md)}.user-info{align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-sm)}.user-avatar{align-items:center;background:var(--primary);border-radius:var(--radius-full);color:#fff;display:flex;font-weight:600;height:40px;justify-content:center;overflow:hidden;width:40px}.user-avatar img{height:100%;object-fit:cover;width:100%}.user-details{flex:1 1;min-width:0}.user-name{color:var(--text-primary);display:block;font-weight:600}.user-subscription{color:var(--text-tertiary);font-size:12px;text-transform:capitalize}.sidebar-actions{display:flex;gap:var(--spacing-sm)}.action-btn{align-items:center;background:var(--surface-hover);border-radius:var(--radius-md);color:var(--text-secondary);display:flex;height:36px;justify-content:center;transition:all var(--transition-fast);width:36px}.action-btn:hover{background:var(--primary);color:#fff}.action-btn svg{font-size:18px}.auth-buttons{display:flex;flex-direction:column;gap:var(--spacing-sm)}.btn{border-radius:var(--radius-md);font-size:14px;font-weight:600;padding:var(--spacing-sm) var(--spacing-md);text-align:center;transition:all var(--transition-fast)}.btn-outline{border:1px solid var(--border);color:var(--text-primary)}.btn-outline:hover{background:var(--surface-hover)}@media (max-width:768px){.sidebar{display:none}}.header{align-items:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:var(--background);display:flex;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);position:-webkit-sticky;position:sticky;top:0;z-index:50}.header-left,.header-right{flex:1 1}.header-center{display:flex;flex:2 1;justify-content:center}.nav-buttons{display:flex;gap:var(--spacing-sm)}.nav-btn{align-items:center;background:var(--surface);border-radius:var(--radius-full);color:var(--text-secondary);display:flex;height:32px;justify-content:center;transition:all var(--transition-fast);width:32px}.nav-btn:hover{background:var(--surface-hover);color:var(--text-primary)}.nav-btn svg{font-size:18px}.search-form{max-width:400px;position:relative;width:100%}.search-icon{color:var(--text-tertiary);font-size:18px;left:var(--spacing-md);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.search-input{background:var(--surface);border-radius:var(--radius-full);color:var(--text-primary);font-size:14px;padding:var(--spacing-sm) var(--spacing-md);padding-left:44px;transition:all var(--transition-fast);width:100%}.search-input::placeholder{color:var(--text-tertiary)}.search-input:focus{background:var(--surface-hover);box-shadow:0 0 0 2px var(--primary)}@media (max-width:768px){.header{padding:var(--spacing-sm) var(--spacing-md)}.nav-buttons{display:none}.header-center{flex:1 1}.search-form{max-width:none}}.header-right{display:flex;justify-content:flex-end}.login-btn{background:var(--primary);border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:8px 20px;transition:all .2s ease}.login-btn:hover{box-shadow:0 4px 15px #ff2d5566;transform:scale(1.05)}.user-menu-container{position:relative}.user-btn{align-items:center;background:var(--surface);border:none;border-radius:20px;color:var(--text-primary);cursor:pointer;display:flex;gap:8px;padding:6px 12px;transition:all .2s ease}.user-btn:hover{background:var(--surface-hover)}.user-name{font-size:14px;font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-dropdown{animation:dropdownFade .2s ease;background:var(--surface);border-radius:12px;box-shadow:0 10px 40px #0000004d;overflow:hidden;position:absolute;right:0;top:calc(100% + 8px);width:220px;z-index:100}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.user-info{display:flex;flex-direction:column;gap:4px;padding:16px}.user-info strong{color:var(--text-primary);font-size:15px}.user-info span{color:var(--text-secondary);font-size:13px;overflow:hidden;text-overflow:ellipsis}.dropdown-divider{background:var(--border);height:1px}.dropdown-item{align-items:center;background:#0000;border:none;color:var(--text-primary);cursor:pointer;display:flex;font-size:14px;gap:12px;padding:12px 16px;text-decoration:none;transition:background .2s ease;width:100%}.dropdown-item:hover{background:var(--surface-hover)}.dropdown-item.logout{color:#ff3b30}.dropdown-item.logout:hover{background:#ff3b301a}@media (max-width:768px){.user-name{display:none}.user-btn{background:#0000;padding:6px}}.player{background:var(--background-secondary);border-top:1px solid var(--border);bottom:0;display:flex;flex-direction:column;height:var(--player-height);left:var(--sidebar-width);position:fixed;right:0;z-index:200}.player-empty{align-items:center;display:flex;justify-content:center}.player-empty-text{color:var(--text-tertiary);font-size:14px}.player-progress-bar{cursor:pointer;height:4px;position:relative}.progress-track{background:var(--border);height:100%;position:relative}.progress-fill{background:var(--primary);left:0;position:absolute;top:0}.player-progress-bar:hover .progress-track{height:6px}.player-progress-bar:hover .progress-fill:after{background:var(--text-primary);border-radius:var(--radius-full);content:"";height:12px;position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px}.player-content{gap:var(--spacing-lg);justify-content:space-between;padding:0 var(--spacing-lg)}.player-content,.player-track-info{align-items:center;display:flex;flex:1 1}.player-track-info{gap:var(--spacing-md);min-width:0}.track-cover{border-radius:var(--radius-md);cursor:pointer;flex-shrink:0;height:56px;overflow:hidden;position:relative;width:56px}.track-cover img{height:100%;object-fit:cover;width:100%}.expand-icon{align-items:center;background:#00000080;display:flex;inset:0;justify-content:center;opacity:0;position:absolute;transition:opacity var(--transition-fast)}.track-cover:hover .expand-icon{opacity:1}.expand-icon svg{color:#fff;font-size:24px}.track-details{flex:1 1;min-width:0}.track-title{color:var(--text-primary);display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;transition:color var(--transition-fast);white-space:nowrap}.track-title:hover{color:var(--primary)}.track-artist{color:var(--text-secondary);display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;transition:color var(--transition-fast);white-space:nowrap}.track-artist:hover{color:var(--text-primary)}.like-btn{align-items:center;color:var(--text-secondary);display:flex;font-size:20px;height:32px;justify-content:center;transition:all var(--transition-fast);width:32px}.like-btn:hover{transform:scale(1.1)}.like-btn.liked,.like-btn:hover{color:var(--primary)}.player-controls{align-items:center;display:flex;gap:var(--spacing-sm)}.control-btn{color:var(--text-secondary);font-size:24px;height:40px;transition:all var(--transition-fast);width:40px}.control-btn:hover{color:var(--text-primary);transform:scale(1.05)}.control-btn.play-btn{color:var(--text-primary);font-size:48px}.control-btn.play-btn:hover{color:var(--primary)}.repeat-one{bottom:6px;right:6px}.player-extras{align-items:center;display:flex;flex:1 1;gap:var(--spacing-md);justify-content:flex-end}.time-display{font-feature-settings:"tnum";color:var(--text-tertiary);display:flex;font-size:12px;font-variant-numeric:tabular-nums;gap:var(--spacing-xs)}.volume-control{gap:var(--spacing-sm)}.volume-btn{align-items:center;color:var(--text-secondary);display:flex;font-size:20px;justify-content:center}.volume-btn:hover{color:var(--text-primary)}.volume-slider{background:var(--border);border-radius:var(--radius-full);cursor:pointer;width:80px}.volume-slider::-webkit-slider-thumb{border-radius:var(--radius-full)}.queue-btn{align-items:center;color:var(--text-secondary);display:flex;font-size:20px;height:32px;justify-content:center;position:relative;width:32px}.queue-btn.active,.queue-btn:hover{color:var(--primary)}.queue-count{align-items:center;background:var(--primary);border-radius:var(--radius-full);color:#fff;display:flex;font-size:9px;font-weight:700;height:14px;justify-content:center;min-width:14px;padding:0 3px;position:absolute;right:2px;top:2px}.queue-panel{background:var(--background-secondary);border-left:1px solid var(--border);bottom:var(--player-height);display:flex;flex-direction:column;position:fixed;right:0;top:0;width:350px;z-index:150}.queue-header{border-bottom:1px solid var(--border);justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg)}.queue-header h3{font-size:18px}.queue-header button{color:var(--text-secondary);font-size:24px;height:32px;width:32px}.queue-list{flex:1 1;overflow-y:auto;padding:var(--spacing-md)}.queue-empty{color:var(--text-tertiary);padding:var(--spacing-xl);text-align:center}.queue-item{border-radius:var(--radius-md);gap:var(--spacing-md);padding:var(--spacing-sm);transition:background var(--transition-fast)}.queue-item.playing{background:var(--surface-hover)}.queue-item.playing .queue-item-title{color:var(--primary)}.queue-item img{border-radius:var(--radius-sm)}.queue-item-title{color:var(--text-primary)}.queue-item-artist{display:block}.queue-item-duration{font-feature-settings:"tnum";color:var(--text-tertiary);font-variant-numeric:tabular-nums}@media (max-width:768px){.player{height:70px;left:0}.player-content{gap:var(--spacing-md);padding:0 var(--spacing-md)}.track-cover{height:48px;width:48px}.player-controls{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.control-btn.repeat,.control-btn.shuffle{display:none}.control-btn{font-size:20px;height:32px;width:32px}.control-btn.play-btn{font-size:40px}.player-extras{display:none}.queue-panel{width:100%}}.layout{height:100vh}.layout,.main-content{display:flex;overflow:hidden}.main-content{flex:1 1;flex-direction:column;margin-left:var(--sidebar-width);padding-bottom:var(--player-height)}.content-area{flex:1 1;overflow-x:hidden;overflow-y:auto;padding:var(--spacing-lg);padding-top:0}@media (max-width:768px){.main-content{margin-left:0}.content-area{padding:var(--spacing-md);padding-bottom:calc(var(--player-height) + 60px)}}.album-card,.artist-card,.playlist-card{display:block;transition:transform var(--transition-fast)}.album-card:hover,.artist-card:hover,.playlist-card:hover{transform:scale(1.02)}.card-image{aspect-ratio:1;background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;position:relative}.artist-image{border-radius:50%}.card-image img{height:100%;object-fit:cover;transition:transform var(--transition-normal);width:100%}.album-card:hover .card-image img,.artist-card:hover .card-image img,.playlist-card:hover .card-image img{transform:scale(1.05)}.card-overlay{align-items:center;background:#0006;display:flex;inset:0;justify-content:center;opacity:0;position:absolute;transition:opacity var(--transition-fast)}.card-image:hover .card-overlay{opacity:1}.play-overlay-btn{color:#fff;font-size:56px;transition:transform var(--transition-fast)}.play-overlay-btn:hover{transform:scale(1.1)}.card-info{padding:var(--spacing-md) 0}.card-title{color:var(--text-primary);font-size:15px;font-weight:600;margin-bottom:2px}.card-subtitle,.card-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-subtitle{color:var(--text-secondary);font-size:13px}.card-small .card-image{height:120px;width:120px}.card-medium .card-image{height:180px;width:180px}.card-large .card-image{height:220px;width:220px}.song-card{align-items:center;border-radius:var(--radius-md);cursor:pointer;display:flex;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);transition:background var(--transition-fast)}.song-card.playing,.song-card:hover{background:var(--surface-hover)}.song-card.playing .song-title{color:var(--primary)}.song-number{font-feature-settings:"tnum";color:var(--text-tertiary);font-size:14px;font-variant-numeric:tabular-nums;text-align:center;width:24px}.playing-animation{align-items:flex-end;display:flex;gap:2px;height:16px;justify-content:center}.playing-animation span{animation:soundWave .5s ease-in-out infinite alternate;background:var(--primary);border-radius:2px;width:3px}.playing-animation span:first-child{animation-delay:0s;height:8px}.playing-animation span:nth-child(2){animation-delay:.2s;height:16px}.playing-animation span:nth-child(3){animation-delay:.4s;height:12px}@keyframes soundWave{0%{height:4px}to{height:16px}}.song-cover{border-radius:var(--radius-sm);flex-shrink:0;height:48px;overflow:hidden;width:48px}.song-cover img{height:100%;object-fit:cover;width:100%}.song-info{flex:1 1;min-width:0}.song-title{color:var(--text-primary);display:block;font-size:15px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-artist{align-items:center;color:var(--text-secondary);display:flex;font-size:13px;gap:var(--spacing-xs)}.explicit-badge{background:var(--text-tertiary);border-radius:2px;color:var(--background);display:inline-flex;font-size:10px;font-weight:700;height:16px;width:16px}.explicit-badge,.song-like-btn{align-items:center;justify-content:center}.song-like-btn{color:var(--text-secondary);display:flex;font-size:18px;height:32px;opacity:0;transition:all var(--transition-fast);width:32px}.song-card:hover .song-like-btn{opacity:1}.song-like-btn:hover{color:var(--primary)}.song-duration{font-feature-settings:"tnum";color:var(--text-tertiary);font-size:13px;font-variant-numeric:tabular-nums;min-width:40px;text-align:right}.genre-card{align-items:flex-end;border-radius:var(--radius-lg);color:#fff;display:flex;font-size:18px;font-weight:700;justify-content:flex-start;min-height:120px;overflow:hidden;padding:var(--spacing-md);position:relative;transition:transform var(--transition-fast)}.genre-card:hover{transform:scale(1.02)}.genre-image{border-radius:var(--radius-md);bottom:-10px;height:80px;object-fit:cover;position:absolute;right:-10px;transform:rotate(25deg);width:80px}.genre-name{position:relative;text-shadow:0 2px 4px #0003;z-index:1}@media (max-width:768px){.card-small .card-image{height:100px;width:100px}.card-medium .card-image{height:140px;width:140px}.card-large .card-image{height:160px;width:160px}.song-cover{height:40px;width:40px}.song-like-btn{display:none}}.home-page{margin:0 auto;max-width:1400px}.home-loading{align-items:center;display:flex;justify-content:center;min-height:400px}.loading-spinner{animation:spin 1s linear infinite;border:3px solid var(--border);border-radius:50%;border-top-color:var(--primary);height:40px;width:40px}.hero-section{margin-bottom:var(--spacing-lg);padding:var(--spacing-xl) 0}.hero-title{color:var(--text-primary);font-size:32px;font-weight:700;margin-bottom:var(--spacing-xs)}.hero-subtitle{color:var(--text-secondary);font-size:16px}.content-section{margin-bottom:var(--spacing-2xl)}.section-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--spacing-md)}.section-title{color:var(--text-primary)}.see-all-link{color:var(--primary);font-size:14px;font-weight:600;transition:opacity var(--transition-fast)}.see-all-link:hover{opacity:.8}.cards-scroll{-webkit-overflow-scrolling:touch;display:flex;gap:var(--spacing-md);overflow-x:auto;padding-bottom:var(--spacing-md);scroll-snap-type:x mandatory}.cards-scroll::-webkit-scrollbar{height:0}.cards-scroll>*{flex-shrink:0;scroll-snap-align:start}.cards-grid{grid-gap:var(--spacing-lg);display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.empty-state{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:400px;padding:var(--spacing-2xl);text-align:center}.empty-icon{opacity:.3}.empty-state h2{color:var(--text-primary);font-size:24px;font-weight:600;margin-bottom:var(--spacing-sm)}.empty-state p{color:var(--text-secondary)}@media (max-width:768px){.hero-title{font-size:26px}.section-title{font-size:18px}.cards-grid{gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}.browse-page{margin:0 auto;max-width:1400px}.browse-loading{align-items:center;display:flex;justify-content:center;min-height:400px}.browse-header{margin-bottom:var(--spacing-xl)}.browse-header h1{font-size:32px;font-weight:700;margin-bottom:var(--spacing-lg)}.browse-tabs{display:flex;gap:var(--spacing-sm);overflow-x:auto;padding-bottom:var(--spacing-sm)}.browse-tab{background:var(--surface);border-radius:var(--radius-full);color:var(--text-secondary);font-size:14px;font-weight:500;padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-fast);white-space:nowrap}.browse-tab:hover{background:var(--surface-hover);color:var(--text-primary)}.browse-tab.active{background:var(--primary);color:#fff}.browse-section{margin-bottom:var(--spacing-2xl)}.browse-section-title{font-size:22px;font-weight:700;margin-bottom:var(--spacing-lg)}.genres-grid{grid-gap:var(--spacing-md);display:grid;gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.browse-cards-grid{grid-gap:var(--spacing-lg);display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.browse-empty{color:var(--text-secondary);padding:var(--spacing-2xl);text-align:center}.browse-empty h2{font-size:20px;margin-bottom:var(--spacing-sm)}@media (max-width:768px){.browse-header h1{font-size:26px}.browse-cards-grid,.genres-grid{grid-template-columns:repeat(2,1fr)}.browse-cards-grid{gap:var(--spacing-md)}}.radio-page{margin:0 auto;max-width:1200px}.radio-loading{justify-content:center;min-height:400px}.radio-header,.radio-loading{align-items:center;display:flex}.radio-header{gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.radio-icon{color:var(--primary);font-size:36px}.radio-header h1{font-size:32px;font-weight:700}.radio-section{margin-bottom:var(--spacing-2xl)}.section-title{font-size:22px;font-weight:700;margin-bottom:var(--spacing-lg)}.featured-station{align-items:center;background:var(--surface);border-radius:var(--radius-lg);display:flex;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg);padding:var(--spacing-lg)}.featured-station-image{background:linear-gradient(135deg,var(--primary),#ff6b6b);border-radius:var(--radius-lg);height:120px;overflow:hidden;position:relative;width:120px}.featured-station-image img{height:100%;object-fit:cover;width:100%}.live-badge{background:var(--error);border-radius:var(--radius-sm);color:#fff;font-size:10px;font-weight:700;left:var(--spacing-sm);letter-spacing:.5px;padding:2px 8px;position:absolute;text-transform:uppercase;top:var(--spacing-sm)}.featured-station-info{flex:1 1}.featured-station-info h3{font-size:24px;font-weight:700;margin-bottom:var(--spacing-xs)}.featured-station-info p{color:var(--text-secondary);font-size:14px}.station-show{color:var(--text-tertiary)!important;margin-top:var(--spacing-sm)}.play-station-btn{color:var(--primary);font-size:56px;transition:transform var(--transition-fast)}.play-station-btn:hover{transform:scale(1.1)}.station-grid{grid-gap:var(--spacing-md);display:grid;gap:var(--spacing-md);grid-template-columns:repeat(3,1fr)}.station-card{border-radius:var(--radius-lg);color:#fff;min-height:140px;padding:var(--spacing-lg);position:relative}.station-card h4{font-size:18px;font-weight:700;margin-bottom:var(--spacing-xs)}.station-card p{font-size:14px;opacity:.8}.station-play-btn{bottom:var(--spacing-md);font-size:40px;opacity:.9;position:absolute;right:var(--spacing-md);transition:all var(--transition-fast)}.station-play-btn:hover{opacity:1;transform:scale(1.1)}.genre-stations{grid-gap:var(--spacing-md);display:grid;gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.genre-station{align-items:center;border-radius:var(--radius-lg);color:#fff;display:flex;font-weight:600;justify-content:space-between;padding:var(--spacing-lg);transition:transform var(--transition-fast)}.genre-station:hover{transform:scale(1.02)}.genre-play-icon{font-size:32px;opacity:.8}.personal-stations{grid-gap:var(--spacing-md);display:grid;gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.personal-station-card{align-items:center;background:var(--surface);border-radius:var(--radius-lg);cursor:pointer;display:flex;gap:var(--spacing-md);padding:var(--spacing-md);transition:background var(--transition-fast)}.personal-station-card:hover{background:var(--surface-hover)}.personal-station-art{align-items:center;background:linear-gradient(135deg,var(--primary),#ff6b6b);border-radius:var(--radius-md);color:#fff;display:flex;font-size:24px;height:60px;justify-content:center;width:60px}.personal-station-art.discovery{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.personal-station-info{flex:1 1}.personal-station-info h4{font-size:16px;font-weight:600;margin-bottom:2px}.personal-station-info p{color:var(--text-secondary);font-size:13px}.station-play-btn-small{color:var(--text-secondary);font-size:36px;transition:all var(--transition-fast)}.station-play-btn-small:hover{color:var(--primary)}.stations-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.station-list-item{align-items:center;background:var(--surface);border-radius:var(--radius-md);cursor:pointer;display:flex;gap:var(--spacing-md);padding:var(--spacing-md);transition:background var(--transition-fast)}.station-list-item:hover{background:var(--surface-hover)}.station-list-image{align-items:center;background:var(--primary);border-radius:var(--radius-md);color:#fff;display:flex;font-size:24px;height:48px;justify-content:center;overflow:hidden;width:48px}.station-list-image img{height:100%;object-fit:cover;width:100%}.station-list-info{flex:1 1}.station-list-info h4{font-size:15px;font-weight:600}.station-list-info p{color:var(--text-secondary);font-size:13px}@media (max-width:768px){.station-grid{grid-template-columns:1fr}.genre-stations{grid-template-columns:repeat(2,1fr)}.personal-stations{grid-template-columns:1fr}}.library-page{margin:0 auto;max-width:1200px}.library-loading{align-items:center;display:flex;justify-content:center;min-height:400px}.library-header{align-items:center;display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.library-icon{color:var(--primary);font-size:36px}.library-header h1{font-size:32px;font-weight:700}.library-tabs{border-bottom:1px solid var(--border);margin-bottom:var(--spacing-xl);overflow-x:auto;padding-bottom:var(--spacing-md)}.library-tab,.library-tabs{display:flex;gap:var(--spacing-sm)}.library-tab{align-items:center;border-radius:var(--radius-md);color:var(--text-secondary);font-size:15px;font-weight:500;padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-fast);white-space:nowrap}.library-tab:hover{background:var(--surface-hover);color:var(--text-primary)}.library-tab.active{color:var(--primary)}.library-tab svg{font-size:20px}.tab-count{background:var(--surface);border-radius:var(--radius-full);color:var(--text-tertiary);font-size:12px;padding:2px 8px}.library-grid{grid-gap:var(--spacing-lg);display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.songs-list-library{background:var(--surface);border-radius:var(--radius-lg);padding:var(--spacing-sm)}.empty-section{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:300px;padding:var(--spacing-2xl);text-align:center}.empty-icon{color:var(--text-tertiary);font-size:64px;margin-bottom:var(--spacing-lg)}.empty-section h3{color:var(--text-primary);font-size:20px;font-weight:600;margin-bottom:var(--spacing-sm)}.empty-section p{color:var(--text-secondary)}@media (max-width:768px){.library-header h1{font-size:26px}.library-grid{gap:var(--spacing-md);grid-template-columns:repeat(2,1fr)}}.search-page{margin:0 auto;max-width:1200px}.search-container{margin-bottom:var(--spacing-xl)}.search-form-large{max-width:600px;position:relative}.search-icon-large{color:var(--text-tertiary);font-size:24px;left:var(--spacing-lg);position:absolute;top:50%;transform:translateY(-50%)}.search-input-large{background:var(--surface);border-radius:var(--radius-full);color:var(--text-primary);font-size:18px;padding:var(--spacing-md) var(--spacing-lg);padding-left:56px;transition:all var(--transition-fast);width:100%}.search-input-large::placeholder{color:var(--text-tertiary)}.search-input-large:focus{box-shadow:0 0 0 2px var(--primary)}.clear-btn{align-items:center;background:var(--text-tertiary);border-radius:var(--radius-full);color:var(--surface);display:flex;font-size:16px;height:28px;justify-content:center;position:absolute;right:var(--spacing-md);top:50%;transform:translateY(-50%);width:28px}.clear-btn:hover{background:var(--text-secondary)}.search-filters{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-xl);overflow-x:auto;padding-bottom:var(--spacing-sm)}.filter-btn{background:var(--surface);border-radius:var(--radius-full);color:var(--text-secondary);font-size:14px;font-weight:500;padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-fast);white-space:nowrap}.filter-btn:hover{background:var(--surface-hover);color:var(--text-primary)}.filter-btn.active{background:var(--primary);color:#fff}.search-loading{display:flex;justify-content:center;padding:var(--spacing-2xl)}.search-results{grid-gap:var(--spacing-2xl);display:grid;gap:var(--spacing-2xl)}.results-section h2{font-size:22px;font-weight:700;margin-bottom:var(--spacing-lg)}.top-result-section{max-width:400px}.songs-results{background:var(--surface);border-radius:var(--radius-lg);padding:var(--spacing-sm)}.results-grid{grid-gap:var(--spacing-lg);display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.no-results,.search-initial{color:var(--text-secondary);padding:var(--spacing-2xl);text-align:center}.no-results h2,.search-initial h2{color:var(--text-primary);font-size:24px;font-weight:600;margin-bottom:var(--spacing-sm)}@media (max-width:768px){.search-input-large{font-size:16px;padding:var(--spacing-sm) var(--spacing-md);padding-left:48px}.search-icon-large{font-size:20px;left:var(--spacing-md)}.results-grid{gap:var(--spacing-md);grid-template-columns:repeat(2,1fr)}}.album-page{margin:0 auto;max-width:1200px}.album-loading,.album-not-found{align-items:center;display:flex;flex-direction:column;gap:var(--spacing-md);justify-content:center;min-height:400px}.album-not-found a{color:var(--primary)}.album-hero{margin-bottom:var(--spacing-lg);padding:var(--spacing-xl) 0;position:relative}.album-hero:before{background:linear-gradient(180deg,#fa2d48,#0000);background:linear-gradient(180deg,var(--album-color,#fa2d48) 0,#0000 100%);content:"";height:400px;left:-100px;opacity:.15;position:absolute;right:-100px;top:-200px;z-index:-1}.album-hero-content{align-items:flex-end;display:flex;gap:var(--spacing-xl)}.album-cover{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);flex-shrink:0;height:230px;overflow:hidden;width:230px}.album-cover img{height:100%;object-fit:cover;width:100%}.album-info{flex:1 1;min-width:0}.album-type{color:var(--text-secondary);display:block;font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:var(--spacing-xs);text-transform:uppercase}.album-title{font-size:48px;font-weight:700;line-height:1.1;margin-bottom:var(--spacing-md)}.album-meta{color:var(--text-secondary);flex-wrap:wrap;font-size:14px}.album-artist,.album-meta{align-items:center;display:flex;gap:var(--spacing-sm)}.album-artist{color:var(--text-primary);font-weight:600}.album-artist img{border-radius:50%;height:24px;width:24px}.album-artist:hover{color:var(--primary)}.album-description{color:var(--text-secondary);font-size:14px;line-height:1.6;margin-top:var(--spacing-md)}.album-actions{align-items:center;display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.album-actions .action-btn{align-items:center;background:var(--surface);border-radius:var(--radius-full);color:var(--text-secondary);display:flex;font-size:22px;height:44px;justify-content:center;transition:all var(--transition-fast);width:44px}.album-actions .action-btn:hover{background:var(--surface-hover);color:var(--text-primary)}.album-actions .action-btn.liked{color:var(--primary)}.album-tracks{background:var(--surface);border-radius:var(--radius-lg);overflow:hidden}.tracks-header{grid-gap:var(--spacing-md);border-bottom:1px solid var(--border);color:var(--text-tertiary);display:grid;font-size:12px;font-weight:600;gap:var(--spacing-md);grid-template-columns:40px 1fr 60px;letter-spacing:.5px;padding:var(--spacing-md) var(--spacing-lg);text-transform:uppercase}.tracks-list{padding:var(--spacing-sm)}.album-footer{border-top:1px solid var(--border);color:var(--text-tertiary);font-size:12px;margin-top:var(--spacing-xl);padding-top:var(--spacing-lg)}.album-footer p{margin-bottom:var(--spacing-xs)}@media (max-width:768px){.album-hero-content{align-items:center;flex-direction:column;text-align:center}.album-cover{height:200px;width:200px}.album-title{font-size:28px}.album-actions,.album-meta{justify-content:center}.tracks-header{display:none}}.artist-page{margin:0 auto;max-width:1200px}.artist-loading,.artist-not-found{align-items:center;display:flex;flex-direction:column;gap:var(--spacing-md);justify-content:center;min-height:400px}.artist-hero{align-items:flex-end;background-color:var(--surface);background-position:top;background-size:cover;display:flex;height:340px;margin:calc(var(--spacing-lg)*-1);margin-bottom:var(--spacing-lg);padding:var(--spacing-xl);position:relative}.artist-hero-overlay{background:linear-gradient(#0000,#000000b3);inset:0;position:absolute}.artist-hero-content{position:relative;z-index:1}.verified-badge{align-items:center;color:#fff;display:inline-flex;font-size:14px;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm)}.verified-badge svg{background:#3b82f6;border-radius:50%;padding:2px}.artist-name{color:#fff;font-size:64px;font-weight:800;margin-bottom:var(--spacing-sm);text-shadow:0 2px 10px #0000004d}.artist-listeners{color:#fffc;font-size:16px}.artist-actions{align-items:center;display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-xl);padding:0 var(--spacing-xl)}.artist-actions .action-btn{align-items:center;background:var(--surface);border-radius:var(--radius-full);color:var(--text-secondary);display:flex;font-size:22px;height:44px;justify-content:center;transition:all var(--transition-fast);width:44px}.artist-actions .action-btn:hover{background:var(--surface-hover);color:var(--text-primary)}.follow-btn{align-items:center;border:1px solid var(--border);border-radius:var(--radius-full);color:var(--text-primary);display:flex;font-size:14px;font-weight:600;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);transition:all var(--transition-fast)}.follow-btn:hover{background:var(--surface-hover)}.follow-btn.following{background:var(--surface);color:var(--primary)}.follow-btn svg{font-size:18px}.artist-section{margin-bottom:var(--spacing-2xl);padding:0 var(--spacing-xl)}.artist-section .section-title{font-size:22px;font-weight:700;margin-bottom:var(--spacing-lg)}.songs-list{background:var(--surface);border-radius:var(--radius-lg);padding:var(--spacing-sm)}.see-more-btn{color:var(--text-secondary);display:block;font-size:14px;font-weight:600;margin-top:var(--spacing-md)}.see-more-btn:hover{color:var(--text-primary)}.albums-grid{grid-gap:var(--spacing-lg);display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.about-content{background:var(--surface);display:flex;gap:var(--spacing-xl);padding:var(--spacing-lg)}.about-content,.about-image{border-radius:var(--radius-lg)}.about-image{height:200px;object-fit:cover;width:200px}.about-text{flex:1 1}.followers-count{color:var(--text-primary);font-size:16px;font-weight:700}.bio,.followers-count{margin-bottom:var(--spacing-md)}.bio{color:var(--text-secondary);line-height:1.6}.origin{color:var(--text-tertiary);font-size:14px}.similar-artists{display:flex;gap:var(--spacing-lg);overflow-x:auto;padding-bottom:var(--spacing-md)}.similar-artist{align-items:center;display:flex;flex-direction:column;flex-shrink:0;text-align:center}.similar-artist-image{border-radius:50%;height:140px;margin-bottom:var(--spacing-sm);overflow:hidden;width:140px}.similar-artist-image img{height:100%;object-fit:cover;width:100%}.similar-artist-name{color:var(--text-primary);font-size:14px;font-weight:500}.similar-artist:hover .similar-artist-name{color:var(--primary)}@media (max-width:768px){.artist-hero{height:280px;margin:calc(var(--spacing-md)*-1);margin-bottom:var(--spacing-md);padding:var(--spacing-md)}.artist-name{font-size:36px}.artist-actions,.artist-section{padding:0}.about-content{flex-direction:column}.about-image{aspect-ratio:1;height:auto;width:100%}.albums-grid{gap:var(--spacing-md);grid-template-columns:repeat(2,1fr)}}.playlist-page{margin:0 auto;max-width:1200px}.playlist-loading,.playlist-not-found{align-items:center;display:flex;flex-direction:column;gap:var(--spacing-md);justify-content:center;min-height:400px}.playlist-hero{margin-bottom:var(--spacing-lg);padding:var(--spacing-xl) 0}.playlist-hero-content{align-items:flex-end;display:flex;gap:var(--spacing-xl)}.playlist-cover{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);flex-shrink:0;height:230px;overflow:hidden;width:230px}.playlist-cover img{height:100%;object-fit:cover;width:100%}.playlist-info{flex:1 1;min-width:0}.playlist-type{color:var(--text-secondary);display:block;font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:var(--spacing-xs);text-transform:uppercase}.playlist-title{font-size:48px;font-weight:700;line-height:1.1;margin-bottom:var(--spacing-sm)}.playlist-description{line-height:1.5;margin-bottom:var(--spacing-md)}.playlist-description,.playlist-meta{color:var(--text-secondary);font-size:14px}.playlist-meta{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.playlist-owner{color:var(--text-primary);font-weight:600}.playlist-owner:hover{color:var(--primary)}.meta-separator{color:var(--text-tertiary)}.playlist-actions{gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.play-btn,.playlist-actions{align-items:center;display:flex}.play-btn{border-radius:var(--radius-full);font-size:16px;font-weight:600;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);transition:all var(--transition-fast)}.play-btn.primary{background:var(--primary);color:#fff}.play-btn.primary:hover{background:var(--primary-hover);transform:scale(1.02)}.play-btn svg{font-size:24px}.playlist-actions .action-btn{align-items:center;background:var(--surface);border-radius:var(--radius-full);color:var(--text-secondary);display:flex;font-size:22px;height:44px;justify-content:center;transition:all var(--transition-fast);width:44px}.playlist-actions .action-btn:hover{background:var(--surface-hover);color:var(--text-primary)}.playlist-tracks{background:var(--surface);border-radius:var(--radius-lg);padding:var(--spacing-sm)}.playlist-empty{color:var(--text-secondary);padding:var(--spacing-2xl);text-align:center}.playlist-empty h3{font-size:18px;margin-bottom:var(--spacing-sm)}@media (max-width:768px){.playlist-hero-content{align-items:center;flex-direction:column;text-align:center}.playlist-cover{height:200px;width:200px}.playlist-title{font-size:28px}.playlist-actions,.playlist-meta{justify-content:center}}.genre-page{padding-bottom:120px}.genre-loading,.genre-not-found{align-items:center;display:flex;flex-direction:column;gap:20px;justify-content:center;min-height:60vh}.genre-not-found a{color:var(--primary)}.genre-hero{background:linear-gradient(135deg,var(--primary) 0,#ff2d5599 100%);margin:-40px -40px 40px;padding:80px 40px 40px;text-align:center}.genre-hero h1{font-size:64px;font-weight:700;margin-bottom:16px}.genre-hero p{font-size:18px;margin:0 auto;max-width:600px;opacity:.9}.genre-section{margin-bottom:48px}.genre-section h2{font-size:24px;font-weight:700;margin-bottom:24px}.subgenres{display:flex;flex-wrap:wrap;gap:12px}.subgenre-pill{background:var(--surface);border:2px solid var(--border);border-radius:20px;color:var(--text-primary);font-size:14px;font-weight:500;padding:10px 20px;transition:all .2s ease}.subgenre-pill:hover{background:var(--surface-hover);transform:translateY(-2px)}.genre-songs{display:flex;flex-direction:column}.genre-grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}@media (max-width:768px){.genre-hero{margin:-20px -20px 30px;padding:60px 20px 30px}.genre-hero h1{font-size:40px}.genre-hero p{font-size:16px}.genre-section h2{font-size:20px}.genre-grid{gap:16px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}.now-playing-page{align-items:flex-start;display:flex;gap:60px;min-height:calc(100vh - 200px);padding:40px}.now-playing-empty{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:60vh;text-align:center}.empty-icon{font-size:80px;margin-bottom:24px}.now-playing-empty h2{font-size:28px;margin-bottom:8px}.now-playing-empty p{color:var(--text-secondary)}.now-playing-content{align-items:center;display:flex;flex:1 1;flex-direction:column;max-width:500px}.now-playing-artwork{aspect-ratio:1;border-radius:16px;box-shadow:0 20px 60px #00000080;margin-bottom:40px;max-width:400px;overflow:hidden;width:100%}.now-playing-artwork img{height:100%;object-fit:cover;width:100%}.now-playing-info{margin-bottom:32px;text-align:center;width:100%}.now-playing-info h1{font-size:28px;font-weight:700;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now-playing-artist{color:var(--primary);font-size:18px}.now-playing-progress{margin-bottom:24px;width:100%}.progress-bar{background:var(--surface);border-radius:3px;cursor:pointer;height:6px;position:relative;width:100%}.progress-fill{background:var(--text-primary);border-radius:3px;height:100%;transition:width .1s linear}.progress-thumb{background:var(--text-primary);border-radius:50%;height:16px;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .2s ease;width:16px}.now-playing-progress:hover .progress-thumb{opacity:1}.progress-times{color:var(--text-secondary);display:flex;font-size:12px;justify-content:space-between;margin-top:8px}.now-playing-controls{align-items:center;display:flex;gap:24px;margin-bottom:32px}.control-btn{align-items:center;background:#0000;border:none;color:var(--text-primary);cursor:pointer;display:flex;justify-content:center;padding:8px;position:relative;transition:all .2s ease}.control-btn:hover{transform:scale(1.1)}.control-btn.active{color:var(--primary)}.control-btn.play-btn{background:var(--text-primary);border-radius:50%;color:var(--background);height:72px;width:72px}.control-btn.play-btn:hover{transform:scale(1.05)}.repeat-one{bottom:4px;font-size:10px;font-weight:700;position:absolute;right:4px}.now-playing-extras{gap:24px;justify-content:center;width:100%}.extra-btn,.now-playing-extras{align-items:center;display:flex}.extra-btn{background:#0000;border:none;color:var(--text-secondary);cursor:pointer;padding:8px;transition:color .2s ease}.extra-btn:hover{color:var(--text-primary)}.extra-btn .liked{color:var(--primary)}.volume-control{align-items:center;display:flex;gap:8px}.volume-slider{appearance:none;-webkit-appearance:none;background:var(--surface);border-radius:2px;height:4px;outline:none;width:100px}.volume-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;background:var(--text-primary);border-radius:50%;cursor:pointer;height:12px;width:12px}.now-playing-queue{background:var(--surface);border-radius:16px;flex-shrink:0;max-height:600px;overflow-y:auto;padding:20px;width:350px}.queue-header{align-items:center;color:var(--text-secondary);display:flex;gap:12px;margin-bottom:16px}.queue-header h3{color:var(--text-primary);font-size:16px;font-weight:600}.queue-list{display:flex;flex-direction:column}.queue-item{align-items:center;border-radius:8px;cursor:pointer;display:flex;gap:12px;padding:10px;transition:background .2s ease}.queue-item:hover{background:var(--surface-hover)}.queue-item img{border-radius:6px;height:40px;object-fit:cover;width:40px}.queue-item-info{flex:1 1;min-width:0}.queue-item-title{display:block;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-item-artist,.queue-item-duration{color:var(--text-secondary);font-size:12px}@media (max-width:1024px){.now-playing-page{align-items:center;flex-direction:column}.now-playing-queue{max-width:500px;width:100%}}@media (max-width:600px){.now-playing-page{padding:20px}.now-playing-artwork{max-width:300px}.now-playing-info h1{font-size:24px}.now-playing-artist{font-size:16px}.now-playing-controls{gap:16px}.control-btn.play-btn{height:60px;width:60px}}.auth-page{align-items:center;background:linear-gradient(135deg,#1a1a2e,#16213e 50%,#0f3460);display:flex;justify-content:center;min-height:100vh;padding:20px}.auth-container{background:var(--surface);border-radius:24px;box-shadow:0 20px 60px #00000080;max-width:400px;padding:48px 40px;text-align:center;width:100%}.auth-logo{align-items:center;display:flex;gap:12px;justify-content:center;margin-bottom:32px}.logo-icon{font-size:48px}.auth-logo h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,var(--primary),#af52de);-webkit-background-clip:text;background-clip:text;font-size:32px;font-weight:700}.auth-container h2{color:var(--text-primary);font-size:28px;font-weight:700;margin-bottom:8px}.auth-subtitle{color:var(--text-secondary);font-size:15px;margin-bottom:32px}.auth-sso-btn{align-items:center;background:linear-gradient(135deg,var(--primary) 0,#af52de 100%);border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:600;gap:12px;justify-content:center;margin-bottom:24px;padding:16px 24px;transition:all .3s ease;width:100%}.auth-sso-btn:hover{box-shadow:0 10px 30px #ff2d5566;transform:translateY(-2px)}.auth-sso-btn:active{transform:translateY(0)}.sso-icon{font-size:20px}.auth-footer{color:var(--text-secondary);font-size:14px}.auth-link{color:var(--primary);font-weight:500;text-decoration:none}.auth-link:hover{text-decoration:underline}.auth-container .loading-spinner{animation:spin 1s linear infinite;border:3px solid var(--surface-hover);border-radius:50%;border-top-color:var(--primary);height:40px;margin:0 auto 16px;width:40px}.auth-container p{color:var(--text-secondary)}@media (max-width:480px){.auth-container{border-radius:16px;padding:32px 24px}.auth-logo h1{font-size:28px}.auth-container h2{font-size:24px}}.settings-page{display:flex;gap:40px;min-height:calc(100vh - 200px)}.settings-sidebar{flex-shrink:0;width:280px}.settings-sidebar h1{font-size:32px;font-weight:700;margin-bottom:24px}.settings-nav{display:flex;flex-direction:column;gap:4px}.settings-nav-item{align-items:center;background:#0000;border:none;border-radius:10px;color:var(--text-secondary);cursor:pointer;display:flex;font-size:15px;gap:12px;padding:12px 16px;text-align:left;transition:all .2s ease}.settings-nav-item:hover{background:var(--surface-hover);color:var(--text-primary)}.settings-nav-item.active{background:var(--surface-hover);color:var(--primary)}.settings-nav-divider{background:var(--border);height:1px;margin:16px 0}.settings-nav-item.logout{color:#ff3b30}.settings-nav-item.logout:hover{background:#ff3b301a}.settings-main{flex:1 1;max-width:600px}.settings-content h2{font-size:24px;font-weight:700;margin-bottom:24px}.settings-content h3{font-size:18px;font-weight:600;margin-bottom:16px}.profile-avatar-section{align-items:center;display:flex;gap:24px;margin-bottom:32px}.avatar-preview{align-items:center;background:var(--surface);border-radius:50%;color:var(--text-secondary);display:flex;height:100px;justify-content:center;overflow:hidden;width:100px}.avatar-preview img{height:100%;object-fit:cover;width:100%}.settings-form{gap:20px}.form-group,.settings-form{display:flex;flex-direction:column}.form-group{gap:8px}.form-group label{color:var(--text-secondary);font-size:14px;font-weight:500}.form-group input{background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);font-size:16px;padding:12px 16px;transition:border-color .2s ease}.form-group input:focus{border-color:var(--primary);outline:none}.settings-divider{background:var(--border);height:1px;margin:32px 0}.btn-primary{align-self:flex-start;background:var(--primary);border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;padding:12px 24px;transition:all .2s ease}.btn-primary:hover{transform:scale(1.02)}.btn-secondary{background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);cursor:pointer;font-size:16px;font-weight:500;padding:12px 24px;transition:all .2s ease}.btn-secondary:hover{background:var(--surface-hover)}.btn-danger{background:#ff3b301a;border:none;border-radius:10px;color:#ff3b30;cursor:pointer;font-size:16px;font-weight:500;padding:12px 24px;transition:all .2s ease}.btn-danger:hover{background:#ff3b3033}.settings-option{align-items:center;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;padding:16px 0}.settings-option:last-child{border-bottom:none}.option-info{display:flex;flex-direction:column;gap:4px}.option-label{color:var(--text-primary);font-size:16px;font-weight:500}.option-description{color:var(--text-secondary);font-size:13px}.toggle{height:31px;position:relative;width:51px}.toggle input{height:0;opacity:0;width:0}.toggle-slider{background:var(--text-secondary);border-radius:31px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.3s}.toggle-slider:before{background:#fff;border-radius:50%;bottom:2px;content:"";height:27px;left:2px;position:absolute;transition:.3s;width:27px}.toggle input:checked+.toggle-slider{background:var(--primary)}.toggle input:checked+.toggle-slider:before{transform:translateX(20px)}.settings-select{background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);cursor:pointer;font-size:14px;min-width:180px;padding:10px 16px}.settings-select:focus{border-color:var(--primary);outline:none}.range-slider{appearance:none;-webkit-appearance:none;background:var(--surface);border-radius:2px;height:4px;outline:none;width:150px}.range-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;background:var(--primary);border-radius:50%;cursor:pointer;height:16px;width:16px}.theme-options{display:flex;gap:20px}.theme-option{align-items:center;background:#0000;border:2px solid var(--border);border-radius:16px;cursor:pointer;display:flex;flex-direction:column;gap:12px;padding:16px;transition:all .2s ease}.theme-option:hover{border-color:var(--text-secondary)}.theme-option.active{border-color:var(--primary)}.theme-preview{border-radius:8px;height:60px;width:80px}.light-preview{background:linear-gradient(135deg,#fff,#f5f5f7);border:1px solid #e0e0e0}.dark-preview{background:linear-gradient(135deg,#1c1c1e,#000);border:1px solid #3a3a3c}.theme-option span{color:var(--text-primary);font-size:14px;font-weight:500}.about-info{margin-bottom:40px;text-align:center}.app-logo{align-items:center;background:linear-gradient(135deg,var(--primary) 0,#af52de 100%);border-radius:24px;color:#fff;display:flex;height:100px;justify-content:center;margin:0 auto 16px;width:100px}.about-info h3{font-size:24px;margin-bottom:8px}.about-info .version{color:var(--text-secondary);margin-bottom:4px}.about-info .copyright{color:var(--text-tertiary);font-size:13px}.about-links{display:flex;flex-direction:column}.about-link{align-items:center;border-bottom:1px solid var(--border);color:var(--primary);display:flex;justify-content:space-between;padding:16px 0;text-decoration:none}.about-link:hover{opacity:.8}@media (max-width:768px){.settings-page{flex-direction:column;gap:24px}.settings-sidebar{width:100%}.settings-nav{flex-direction:row;flex-wrap:wrap;gap:8px}.settings-nav-item{font-size:14px;padding:10px 14px}.settings-nav-item span{display:none}.settings-main{max-width:100%}.theme-options{flex-direction:column}}.liked-songs-page{padding-bottom:120px}.liked-songs-loading{align-items:center;display:flex;justify-content:center;min-height:60vh}.liked-songs-header{align-items:flex-end;background:linear-gradient(135deg,#5b21b6,#ec4899 50%,#f43f5e);display:flex;gap:32px;margin:-40px -40px 32px;padding:40px}.liked-songs-cover{flex-shrink:0;height:232px;width:232px}.liked-cover-gradient{align-items:center;background:linear-gradient(135deg,#4c1d95,#be185d);border-radius:8px;box-shadow:0 8px 32px #0000004d;color:#fff;display:flex;height:100%;justify-content:center;width:100%}.liked-songs-info{padding-bottom:8px}.liked-songs-label{display:block;font-size:12px;font-weight:500;letter-spacing:.1em;margin-bottom:8px;text-transform:uppercase}.liked-songs-info h1{font-size:72px;font-weight:900;line-height:1;margin-bottom:24px}.liked-songs-meta{align-items:center;color:#fffc;display:flex;font-size:14px;gap:8px}.liked-songs-meta svg{margin-right:4px}.meta-dot{font-size:8px}.liked-songs-actions{display:flex;gap:16px;margin-bottom:24px}.liked-songs-actions .play-btn{align-items:center;background:var(--primary);border:none;border-radius:30px;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:600;gap:8px;padding:14px 32px;transition:all .2s ease}.liked-songs-actions .play-btn:hover:not(:disabled){transform:scale(1.04)}.liked-songs-actions .play-btn:disabled{cursor:not-allowed;opacity:.5}.liked-songs-actions .shuffle-btn{align-items:center;background:#0000;border:1px solid var(--border);border-radius:30px;color:var(--text-primary);cursor:pointer;display:flex;font-size:15px;font-weight:500;gap:8px;padding:14px 24px;transition:all .2s ease}.liked-songs-actions .shuffle-btn:hover:not(:disabled){background:var(--surface-hover);border-color:var(--text-secondary)}.liked-songs-actions .shuffle-btn:disabled{cursor:not-allowed;opacity:.5}.songs-list-header{grid-gap:16px;border-bottom:1px solid var(--border);color:var(--text-secondary);display:grid;font-size:12px;font-weight:500;gap:16px;grid-template-columns:40px 1fr 1fr 150px 60px;letter-spacing:.1em;margin-bottom:8px;padding:8px 16px;text-transform:uppercase}.songs-list-header .col-duration{text-align:right}.liked-songs-list{margin-top:16px}.liked-songs-empty{align-items:center;color:var(--text-secondary);display:flex;flex-direction:column;justify-content:center;min-height:40vh;text-align:center}.liked-songs-empty svg{margin-bottom:24px;opacity:.3}.liked-songs-empty h2{color:var(--text-primary);font-size:24px;margin-bottom:8px}.liked-songs-empty p{font-size:14px}@media (max-width:1024px){.songs-list-header{grid-template-columns:40px 1fr 60px}.songs-list-header .col-added,.songs-list-header .col-album{display:none}}@media (max-width:768px){.liked-songs-header{align-items:center;flex-direction:column;margin:-20px -20px 24px;padding:32px 20px;text-align:center}.liked-songs-cover{height:180px;width:180px}.liked-songs-info h1{font-size:40px}.liked-songs-actions{justify-content:center}.songs-list-header{display:none}}:root{--primary:#fa2d48;--primary-hover:#e01f3d;--background:#000;--background-secondary:#1c1c1e;--background-tertiary:#2c2c2e;--surface:#1c1c1e;--surface-hover:#2c2c2e;--text-primary:#fff;--text-secondary:#8e8e93;--text-tertiary:#636366;--border:#38383a;--success:#30d158;--warning:#ffd60a;--error:#ff453a;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--transition-fast:150ms ease;--transition-normal:250ms ease;--transition-slow:350ms ease;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 6px #0006;--shadow-lg:0 10px 25px #00000080;--player-height:90px;--sidebar-width:280px;--header-height:60px}[data-theme=light]{--background:#fff;--background-secondary:#f2f2f7;--background-tertiary:#e5e5ea;--surface:#f2f2f7;--surface-hover:#e5e5ea;--text-primary:#000;--text-secondary:#6c6c70;--text-tertiary:#aeaeb2;--border:#d1d1d6}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{background-color:#000;background-color:var(--background);color:#fff;color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif;line-height:1.5;overflow-x:hidden}a{color:inherit;text-decoration:none}button{background:none;cursor:pointer}button,input,textarea{border:none;font-family:inherit}input,textarea{outline:none}ol,ul{list-style:none}img{display:block;height:auto;max-width:100%}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:#0000}::-webkit-scrollbar-thumb{background:#636366;background:var(--text-tertiary);border-radius:9999px;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:#8e8e93;background:var(--text-secondary)}::selection{background:#fa2d48;background:var(--primary);color:#fff}:focus-visible{outline:2px solid #fa2d48;outline:2px solid var(--primary);outline-offset:2px}.container{margin:0 auto;max-width:1400px;padding:0 24px;padding:0 var(--spacing-lg)}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.animate-fade-in{animation:fadeIn .25s ease forwards;animation:fadeIn var(--transition-normal) forwards}.animate-slide-up{animation:slideUp .25s ease forwards;animation:slideUp var(--transition-normal) forwards}.animate-pulse{animation:pulse 2s infinite}.animate-spin{animation:spin 1s linear infinite}
/*# sourceMappingURL=main.d81a8cc2.css.map*/