:root{--bg-primary: #121212;--bg-secondary: #181818;--bg-tertiary: #282828;--bg-elevated: #333;--bg-hover: #3e3e3e;--bg-highlight: #333;--border-subtle: #404040;--text-primary: #fff;--text-secondary: #b3b3b3;--text-muted: #6a6a6a;--accent: #1db954;--accent-hover: #1ed760;--error: #e91429;--border-radius: 8px;--border-radius-lg: 16px;--transition: 0.2s ease;--color-primary: #1db954;--color-primary-text: #ffffff;--color-background: #121212;--color-background-elevated: #282828;--theme-transition-duration: 600ms;--theme-transition-easing: ease}@media(prefers-reduced-motion: reduce){:root{--theme-transition-duration: 100ms}}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.5}#app{display:flex;flex-direction:column;min-height:100vh}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.skip-link{position:absolute;left:8px;top:-100px;z-index:10000;background:var(--accent, #1db954);color:#000;padding:10px 16px;border-radius:6px;font-weight:600;text-decoration:none;transition:top .15s ease}.skip-link:focus,.skip-link:focus-visible{top:8px;outline:2px solid var(--accent, #1db954);outline-offset:2px}:focus-visible{outline:2px solid var(--accent, #1db954);outline-offset:2px;border-radius:4px}.player-btn:focus-visible,.mobile-player-mini-btn:focus-visible,.mobile-player-full-btn:focus-visible,.modal-close:focus-visible,.modal-back:focus-visible{outline:2px solid var(--accent, #1db954);outline-offset:2px}.progress-bar:focus-visible,.mobile-player-full-progress-bar:focus-visible{outline:2px solid var(--accent, #1db954);outline-offset:4px}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}}.sidebar,.main-content,.player-bar,.card,.track-item{transition:background-color var(--theme-transition-duration) var(--theme-transition-easing),color var(--theme-transition-duration) var(--theme-transition-easing),border-color var(--theme-transition-duration) var(--theme-transition-easing)}.profile-card,.search-results,.detail-header,.queue-panel{transition:background-color var(--theme-transition-duration) var(--theme-transition-easing),color var(--theme-transition-duration) var(--theme-transition-easing),border-color var(--theme-transition-duration) var(--theme-transition-easing)}.layout{display:flex;flex:1;overflow:hidden}.sidebar{width:240px;background:var(--bg-secondary);padding:24px 12px;padding-bottom:110px;display:flex;flex-direction:column;gap:24px;border-right:1px solid var(--bg-tertiary)}.main-content{flex:1;overflow-y:auto;padding:24px;padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:120px}.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--bg-secondary);border-top:1px solid var(--bg-tertiary);padding:8px 0;padding-bottom:calc(8px + env(safe-area-inset-bottom));z-index:100}.mobile-nav-items{display:flex;justify-content:space-around;align-items:center}.mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 16px;color:var(--text-secondary);text-decoration:none;font-size:10px;cursor:pointer;transition:var(--transition)}.mobile-nav-item.active{color:var(--accent)}.mobile-nav-item svg{width:24px;height:24px}@media(max-width: 768px){.sidebar{display:none}.mobile-nav{display:block}.player{display:none}.main-content{padding:16px;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(140px + env(safe-area-inset-bottom))}.top-header{flex-direction:row;gap:12px;align-items:center}.search-container{flex:1;max-width:none}.header-user{background:rgba(0,0,0,0);padding:0}.header-user .user-info,.header-user .logout-btn{display:none}.mobile-user-menu{display:block}.track-album{display:none}.track-item{padding:8px}.track-info{min-width:0}.detail-header{flex-direction:column;align-items:center;text-align:center}.detail-image{width:200px;height:200px}.detail-title{font-size:24px}.grid-cards{display:flex;overflow-x:auto;gap:12px;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.grid-cards::-webkit-scrollbar{display:none}.grid-cards .card{flex:0 0 170px;scroll-snap-align:start;padding:10px}.grid-cards .card-image{width:150px;height:150px}.grid-cards .card-title{font-size:13px}.grid-cards .card-subtitle{font-size:11px}.artist-page .grid-cards{display:flex;flex-wrap:wrap;overflow-x:visible;justify-content:space-between}.artist-page .grid-cards .card{flex:0 0 calc(50% - 6px);max-width:calc(50% - 6px)}.artist-page .grid-cards .card-image{width:150px;height:150px}.player{padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}.player-track{width:auto;flex:0 0 auto}.player-track-info{display:none}.player-queue-indicator{display:none}.player-volume{display:none}.player-right{display:none}.player-progress{display:none}.queue-panel{width:100%;left:0;top:0;right:0;bottom:0;height:100%;max-height:none;border-left:none;border-radius:0;z-index:250}body.queue-open,body.mobile-player-open{overflow:hidden}.login-box{padding:32px 24px;margin:16px}.page-title{font-size:24px}.section-title{font-size:18px}}.logo{font-size:17px;font-weight:700;color:var(--accent);padding:0 10px;display:flex;align-items:center;gap:6px;letter-spacing:.01em}.logo svg{width:22px;height:22px}.nav{display:flex;flex-direction:column;gap:4px}.nav-item{display:flex;align-items:center;gap:16px;padding:12px;border-radius:var(--border-radius);color:var(--text-secondary);text-decoration:none;font-weight:500;cursor:pointer;transition:var(--transition)}.nav-item:hover{color:var(--text-primary);background:var(--bg-tertiary)}.nav-item.active{color:var(--text-primary);background:var(--bg-tertiary)}.nav-item svg{width:24px;height:24px}.sidebar-footer{margin-top:auto;padding:12px 16px 4px;text-align:center}.sidebar-version{display:inline-block;font-size:11px;color:var(--text-secondary);opacity:.5;letter-spacing:.05em;font-variant-numeric:tabular-nums;text-decoration:none;cursor:pointer;transition:var(--transition)}.sidebar-version:hover{opacity:1;color:var(--accent)}.sidebar-user{margin-top:auto;padding:12px;background:var(--bg-tertiary);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:space-between;gap:12px}.user-info{display:flex;align-items:center;gap:10px;min-width:0;flex:1}.user-info svg{width:20px;height:20px;color:var(--text-secondary);flex-shrink:0}.user-info span{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-badge{font-size:10px;font-weight:600;text-transform:uppercase;background:var(--accent);color:#000;padding:2px 6px;border-radius:4px;flex-shrink:0}.logout-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0}.logout-btn:hover{color:var(--text-primary);background:var(--bg-highlight)}.logout-btn svg{width:18px;height:18px}.categories-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:16px}.category-card{position:relative;aspect-ratio:1.5;border-radius:var(--border-radius);background:linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%);background-size:cover;background-position:center;cursor:pointer;overflow:hidden;display:flex;align-items:flex-end;padding:12px;transition:var(--transition)}.category-card::before{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%)}.category-card:hover{transform:scale(1.03);box-shadow:0 8px 24px rgba(0,0,0,.4)}.category-card.active{outline:2px solid var(--accent);outline-offset:2px}.category-name{position:relative;font-size:14px;font-weight:700;color:var(--text-primary);text-shadow:0 1px 3px rgba(0,0,0,.5)}.empty-message{color:var(--text-secondary);font-size:14px;padding:24px 0}.card{background:var(--bg-secondary);border-radius:var(--border-radius);padding:16px;cursor:pointer;transition:var(--transition)}.card:hover{background:var(--bg-tertiary)}.card-image{width:100%;aspect-ratio:1;border-radius:4px;object-fit:cover;margin-bottom:16px;background:var(--bg-tertiary)}.card-image.rounded{border-radius:50%}.card-title{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}.card-subtitle{font-size:14px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-play{position:absolute;bottom:8px;right:8px;width:48px;height:48px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:var(--transition);box-shadow:0 8px 16px rgba(0,0,0,.3)}.card:hover .card-play{opacity:1;transform:translateY(0)}.card-play:hover{background:var(--accent-hover);transform:scale(1.05)}.card-play svg{width:24px;height:24px;color:#000;margin-left:2px}.card-favorite{position:absolute;top:8px;right:8px;opacity:0;transform:translateY(-8px);transition:var(--transition);background:rgba(0,0,0,.6);backdrop-filter:blur(10px);border-radius:50%;display:flex;align-items:center;justify-content:center}.card:hover .card-favorite{opacity:1;transform:translateY(0)}.card-favorite:hover{background:rgba(0,0,0,.8)}.card-wrapper{position:relative}.track-item{display:flex;align-items:center;gap:16px;padding:8px 16px;border-radius:var(--border-radius);cursor:pointer;transition:var(--transition)}.track-item:hover{background:var(--bg-tertiary)}.track-item.playing{background:var(--bg-tertiary)}.track-number{width:24px;text-align:center;color:var(--text-secondary);font-size:14px}.track-position{width:32px;text-align:center;color:var(--text-secondary);font-size:16px;font-weight:600;flex-shrink:0}.track-item:hover .track-number,.track-item.playing .track-number,.track-item:hover .track-position{color:var(--accent)}.track-image{width:48px;height:48px;border-radius:4px;object-fit:cover;background:var(--bg-tertiary);flex-shrink:0}.track-image-placeholder{display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.track-image-placeholder svg{width:24px;height:24px}.track-info{flex:1;min-width:0}.track-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-item.playing .track-name{color:var(--accent)}.track-artists,.track-artist{font-size:14px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.artist-link{cursor:pointer;transition:color var(--transition)}.artist-link:hover{color:var(--text-primary);text-decoration:underline}.track-album{flex:0 0 200px;font-size:14px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-duration{width:48px;text-align:right;color:var(--text-secondary);font-size:14px}.track-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.track-btn{width:32px;height:32px;background:rgba(0,0,0,0);border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.track-btn:hover{color:var(--accent);background:var(--bg-highlight)}.track-btn svg{width:18px;height:18px}.track-item[data-context=queue],.track-item[data-context=now-playing-queue]{display:flex;flex-direction:row;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--border-radius);cursor:pointer;transition:var(--transition)}.track-item[data-context=queue] .track-image,.track-item[data-context=now-playing-queue] .track-image{width:48px;height:48px}.track-item[data-context=queue] .track-info,.track-item[data-context=now-playing-queue] .track-info{flex:1;min-width:0}.track-item[data-context=queue] .track-name,.track-item[data-context=now-playing-queue] .track-name{font-size:14px;font-weight:500}.track-item[data-context=queue] .track-artists,.track-item[data-context=now-playing-queue] .track-artists{font-size:13px}.track-item[data-context=queue]:hover,.track-item[data-context=now-playing-queue]:hover{background:var(--bg-tertiary)}.track-item[data-context=queue].current,.track-item[data-context=now-playing-queue].current{background:var(--bg-highlight)}.track-item[data-context=queue] .track-image-wrapper{position:relative;flex-shrink:0}.track-item[data-context=queue] .track-status{position:absolute;bottom:2px;right:2px;width:20px;height:20px;background:rgba(0,0,0,.7);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent)}.track-item[data-context=queue] .track-status svg{width:14px;height:14px}.track-item[data-context=queue].preloaded .track-image-wrapper{opacity:.9}.track-item[data-context=queue].cached .track-image-wrapper{opacity:1}.track-item[data-context=now-playing-queue] .track-index{width:32px;text-align:center;color:var(--text-secondary);font-size:14px;font-weight:600;flex-shrink:0}.track-item[data-context=now-playing-queue] .track-duration{width:48px;text-align:right;color:var(--text-secondary);font-size:13px;flex-shrink:0}.track-item[data-context=now-playing-queue].current .track-name{color:var(--accent)}.track-item[data-context=now-playing-queue].current .track-index{color:var(--accent)}.track-item[data-context=queue] .track-remove-btn,.track-item[data-context=now-playing-queue] .track-remove-btn{width:32px;height:32px;background:rgba(0,0,0,0);border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0}.track-item[data-context=queue] .track-remove-btn:hover,.track-item[data-context=now-playing-queue] .track-remove-btn:hover{color:var(--error);background:rgba(233,20,41,.1)}.track-item[data-context=queue] .track-remove-btn svg,.track-item[data-context=now-playing-queue] .track-remove-btn svg{width:16px;height:16px}.player{position:fixed;bottom:0;left:0;right:0;height:90px;background:var(--bg-secondary);border-top:1px solid var(--bg-tertiary);display:flex;align-items:center;padding:0 16px;z-index:100}.player-track{display:flex;align-items:center;gap:12px;width:280px;transition:var(--transition);padding:8px;margin:-8px;border-radius:var(--border-radius)}.player-track:hover{background:var(--bg-tertiary)}.player-queue-indicator{display:flex;align-items:center;gap:4px;color:var(--text-secondary);font-size:12px;padding:4px 8px;background:var(--bg-tertiary);border-radius:12px}.player-queue-indicator svg{width:14px;height:14px}.player-track-image{width:56px;height:56px;border-radius:4px;object-fit:cover;background:var(--bg-tertiary)}.player-track-info{min-width:0}.player-track-name{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-track-artists{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-controls{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}.player-buttons{display:flex;align-items:center;gap:16px}.player-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.player-btn:hover{color:var(--text-primary)}.player-btn svg{width:20px;height:20px}.player-btn-play{width:40px;height:40px;background:var(--text-primary);color:var(--bg-primary)}.player-btn-play:hover{transform:scale(1.05);color:var(--bg-primary)}.player-btn-play svg{width:20px;height:20px}.player-btn-shuffle.active{color:var(--accent)}.player-btn-shuffle.active::after{content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:4px;height:4px;background:var(--accent);border-radius:50%}.player-btn-shuffle{position:relative}.progress-bar-container{display:flex;align-items:center;gap:8px;width:100%}.progress-time{font-size:11px;color:var(--text-secondary);min-width:40px;text-align:center}.progress-bar{flex:1;height:4px;background:var(--bg-highlight);border-radius:2px;cursor:pointer;position:relative;transition:height .1s ease}.progress-bar:hover{height:6px}.progress-fill{height:100%;background:var(--text-primary);border-radius:2px;position:relative;transition:none}.progress-bar:hover .progress-fill{background:var(--accent)}.progress-thumb{position:absolute;top:50%;width:12px;height:12px;background:var(--text-primary);border-radius:50%;transform:translate(-50%, -50%);box-shadow:0 2px 6px rgba(0,0,0,.3);opacity:0;transition:opacity .2s ease;pointer-events:none}.progress-bar:hover .progress-thumb,.progress-bar.with-thumb:hover .progress-thumb{opacity:1}.player-progress{max-width:600px}.now-playing-progress{margin-bottom:16px}.now-playing-progress .progress-bar{height:4px}.now-playing-progress .progress-fill{background:var(--accent)}.now-playing-progress .progress-thumb{opacity:0}.now-playing-progress .progress-bar:hover .progress-thumb{opacity:1}.now-playing-progress .progress-time{color:var(--text-muted)}.player-time{font-size:11px;color:var(--text-secondary);width:40px;text-align:center}.progress-fill::after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;background:var(--text-primary);border-radius:50%;opacity:0;transition:var(--transition)}.progress-bar:hover .progress-fill::after{opacity:1}.player-volume{width:180px;display:flex;align-items:center;justify-content:flex-end;gap:8px}.volume-slider{display:flex;align-items:center;gap:8px}.volume-btn{width:32px;height:32px;background:rgba(0,0,0,0);border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0}.volume-btn:hover{color:var(--text-primary);background:var(--bg-tertiary)}.volume-btn svg{width:20px;height:20px}.volume-bar{width:100px;height:4px;background:var(--bg-highlight);border-radius:2px;cursor:pointer;position:relative}.volume-fill{height:100%;background:var(--text-primary);border-radius:2px}.volume-thumb{position:absolute;top:50%;width:10px;height:10px;background:var(--text-primary);border-radius:50%;transform:translate(-50%, -50%);opacity:0;transition:opacity .2s ease;pointer-events:none}.volume-bar:hover .volume-thumb{opacity:1}.volume-bar:hover .volume-fill{background:var(--accent)}.player-right{display:flex;align-items:center;gap:8px}.player-btn.active{color:var(--accent)}.player-btn.has-items{position:relative}.queue-count{position:absolute;top:0;right:0;font-size:10px;font-weight:600;background:var(--accent);color:#000;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}.queue-panel{position:fixed;top:0;right:0;bottom:90px;width:350px;background:var(--bg-secondary);border-left:1px solid var(--bg-tertiary);z-index:99;display:flex;flex-direction:column;animation:slideInRight .2s ease}@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}.queue-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--bg-tertiary)}.queue-header h3{font-size:18px;font-weight:600}.queue-header-actions{display:flex;align-items:center;gap:4px}.icon-btn{width:32px;height:32px;background:rgba(0,0,0,0);border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.icon-btn:hover{color:var(--text-primary);background:var(--bg-tertiary)}.icon-btn.active{color:var(--accent)}.icon-btn svg{width:18px;height:18px}.queue-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:14px}.queue-list{flex:1;overflow-y:auto;padding:8px 0}.queue-separator{display:flex;align-items:center;gap:12px;padding:16px 16px 12px;margin:8px 0}.queue-separator-line{flex:1;height:1px;background:var(--bg-tertiary)}.queue-separator-text{font-size:12px;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.queue-item{display:flex;align-items:center;gap:8px;padding:8px 16px;transition:var(--transition)}.queue-item:hover{background:var(--bg-tertiary)}.queue-item.current{background:var(--bg-tertiary)}.queue-item.current .queue-item-name{color:var(--accent)}.queue-item-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0;cursor:pointer}.queue-item-image{width:40px;height:40px;border-radius:4px;object-fit:cover;background:var(--bg-tertiary);flex-shrink:0}.queue-item-image-wrapper{position:relative;flex-shrink:0}.queue-item-status{position:absolute;bottom:-4px;right:-4px;width:18px;height:18px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}.queue-item.cached .queue-item-status{background:#4caf50}.queue-item.preloaded .queue-item-status{background:#2196f3}.queue-item-details{min-width:0}.queue-item-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-item-artist{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-item-remove{width:28px;height:28px;background:rgba(0,0,0,0);border:none;border-radius:50%;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition);flex-shrink:0}.queue-item:hover .queue-item-remove{opacity:1}.queue-item-remove:hover{color:var(--error);background:var(--bg-highlight)}.queue-item-remove svg{width:16px;height:16px}.mobile-player-mini{display:none;position:fixed;bottom:56px;left:0;right:0;background:var(--bg-tertiary);z-index:101;cursor:pointer}.mobile-player-mini-progress{height:2px;background:var(--bg-highlight)}.mobile-player-mini-progress-fill{height:100%;background:var(--accent);transition:width .1s linear}.mobile-player-mini-content{display:flex;align-items:center;padding:8px 12px;gap:12px}.mobile-player-mini-cover{width:48px;height:48px;border-radius:4px;object-fit:cover}.mobile-player-mini-info{flex:1;min-width:0}.mobile-player-mini-title{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-player-mini-artist{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-player-mini-actions{display:flex;align-items:center;gap:8px}.mobile-player-mini-btn{width:40px;height:40px;border-radius:50%;background:var(--accent);border:none;color:#000;display:flex;align-items:center;justify-content:center;cursor:pointer}.mobile-player-mini-btn svg{width:20px;height:20px}@media(max-width: 768px){.mobile-player-mini{display:block;bottom:calc(76px + env(safe-area-inset-bottom))}}.mobile-player-full{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-primary) 100%);z-index:200;display:flex;flex-direction:column;padding:16px;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(32px + env(safe-area-inset-bottom))}.mobile-player-full-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.mobile-player-full-close,.mobile-player-full-queue{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,0);border:none;color:var(--text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer}.mobile-player-full-close svg,.mobile-player-full-queue svg{width:24px;height:24px}.mobile-player-full-title{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary)}.mobile-player-full-cover{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-y}.mobile-player-full-cover img{width:100%;max-width:320px;aspect-ratio:1;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.5);object-fit:cover;pointer-events:none}.mobile-player-cover-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;max-width:320px;aspect-ratio:1;border-radius:8px;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.mobile-player-cover-overlay svg{width:64px;height:64px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3))}.mobile-player-full-cover:active .mobile-player-cover-overlay,.mobile-player-cover-overlay.loading{opacity:1}.mobile-player-full-info{text-align:center;margin-bottom:24px}.mobile-player-full-name{font-size:20px;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-player-full-artist{font-size:16px;color:var(--text-secondary)}.mobile-player-full-progress{margin-bottom:24px}.mobile-player-full-progress-bar{height:4px;background:var(--bg-highlight);border-radius:2px;cursor:pointer;margin-bottom:8px}.mobile-player-full-progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .1s linear}.mobile-player-full-times{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary)}.mobile-player-full-controls{display:flex;align-items:center;justify-content:center;gap:24px}.mobile-player-full-btn{width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,0);border:none;color:var(--text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer}.mobile-player-full-btn svg{width:28px;height:28px}.mobile-player-full-btn.active{color:var(--accent)}.mobile-player-full-btn-play{width:64px;height:64px;background:var(--accent);color:#000}.mobile-player-full-btn-play svg{width:32px;height:32px}.now-playing-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.now-playing-popup{background:var(--bg-secondary);border-radius:16px;width:800px;max-width:95vw;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:popupScale .15s ease-out;overflow:hidden}@keyframes popupScale{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}.now-playing-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--bg-tertiary)}.now-playing-title{font-size:14px;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:1px}.now-playing-header-btn{width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,0);border:none;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition)}.now-playing-header-btn:hover{color:var(--text-primary);background:var(--bg-highlight)}.now-playing-header-btn svg{width:18px;height:18px}.now-playing-content{display:flex;flex:1;overflow:hidden}.now-playing-left{width:320px;flex-shrink:0;padding:24px;display:flex;flex-direction:column;background:linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%)}.now-playing-cover{width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;margin-bottom:20px;box-shadow:0 8px 32px rgba(0,0,0,.4);position:relative;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-y}.now-playing-cover img{width:100%;height:100%;object-fit:cover;pointer-events:none}.now-playing-cover-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.now-playing-cover-overlay svg{width:64px;height:64px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3))}.now-playing-cover:hover .now-playing-cover-overlay,.now-playing-cover:active .now-playing-cover-overlay,.now-playing-cover-overlay.loading{opacity:1}.now-playing-cover-placeholder{width:100%;height:100%;background:var(--bg-highlight);display:flex;align-items:center;justify-content:center}.now-playing-cover-placeholder svg{width:64px;height:64px;color:var(--text-muted)}.now-playing-info{text-align:center;margin-bottom:16px}.now-playing-name{font-size:18px;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing-artist{font-size:14px;color:var(--text-secondary)}.now-playing-artist .artist-link{color:var(--text-secondary);cursor:pointer;transition:var(--transition)}.now-playing-artist .artist-link:hover{color:var(--accent);text-decoration:underline}.now-playing-album{font-size:12px;color:var(--text-muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}.now-playing-btn{width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0);border:none;color:var(--text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition)}.now-playing-btn:hover{transform:scale(1.1)}.now-playing-btn svg{width:20px;height:20px}.now-playing-btn.active{color:var(--accent)}.now-playing-btn-play{width:48px;height:48px;background:var(--accent);color:#000}.now-playing-btn-play:hover{background:var(--accent-hover)}.now-playing-btn-play svg{width:24px;height:24px}.now-playing-volume{width:160px;margin:0 auto 12px;justify-content:center}.now-playing-actions{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:auto;padding-top:12px}.now-playing-source{font-size:11px;color:var(--text-muted)}.now-playing-source-name{color:var(--text-secondary);text-transform:capitalize}.now-playing-right-panel{flex:1;display:flex;flex-direction:column;border-left:1px solid var(--bg-tertiary);min-width:0;overflow:hidden}.now-playing-right-tabs{display:flex;border-bottom:1px solid var(--bg-tertiary);padding:0;flex-shrink:0}.now-playing-right-tab{flex:1;padding:12px 16px;background:rgba(0,0,0,0);border:none;color:var(--text-muted);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;border-bottom:2px solid rgba(0,0,0,0)}.now-playing-right-tab:hover{color:var(--text-primary);background:hsla(0,0%,100%,.05)}.now-playing-right-tab.active{color:var(--accent);border-bottom-color:var(--accent)}.now-playing-right-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.now-playing-right-content.hidden{display:none}.now-playing-right-content.visible{display:flex}.now-playing-mobile-panel{flex:1;display:flex;flex-direction:column;overflow:hidden}.now-playing-mobile-panel.mobile-hidden{display:none}.now-playing-right{flex:1;display:flex;flex-direction:column;border-left:1px solid var(--bg-tertiary);min-width:0}.now-playing-queue-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--bg-tertiary);font-size:13px;font-weight:600}.now-playing-queue-count{color:var(--text-muted);font-weight:400}.now-playing-queue-list{flex:1;overflow-y:auto;padding:8px 0}.now-playing-queue-item{display:flex;align-items:center;gap:12px;padding:8px 16px;cursor:pointer;transition:background .15s ease}.now-playing-queue-item:hover{background:var(--bg-tertiary)}.now-playing-queue-item.active{background:var(--bg-highlight)}.now-playing-queue-item.active .now-playing-queue-name{color:var(--accent)}.now-playing-queue-index{width:24px;font-size:12px;color:var(--text-muted);text-align:center;flex-shrink:0}.now-playing-queue-image{width:40px;height:40px;border-radius:4px;object-fit:cover;flex-shrink:0}.now-playing-queue-info{flex:1;min-width:0}.now-playing-queue-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing-queue-artist{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing-queue-duration{font-size:12px;color:var(--text-muted);flex-shrink:0}.now-playing-queue-remove{width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,0);border:none;color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:var(--transition);flex-shrink:0}.now-playing-queue-item:hover .now-playing-queue-remove{opacity:1}.now-playing-queue-remove:hover{color:var(--error);background:rgba(233,20,41,.1)}.now-playing-queue-remove svg{width:14px;height:14px}.now-playing-queue-empty{padding:40px 16px;text-align:center;color:var(--text-muted);font-size:14px}.now-playing-tabs{display:none}@media(max-width: 768px){.now-playing-popup{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0}.now-playing-header{padding:12px 16px}.now-playing-title-desktop{display:none}.now-playing-tabs{display:flex;flex:1;gap:4px;background:var(--bg-tertiary);padding:0;border-radius:8px;margin-right:12px}.now-playing-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 8px;background:rgba(0,0,0,0);border:none;color:var(--text-secondary);font-size:11px;font-weight:500;border-radius:6px;cursor:pointer;transition:var(--transition);position:relative}.now-playing-tab svg{width:20px;height:20px}.now-playing-tab .tab-badge{position:absolute;top:4px;right:8px;background:var(--accent);color:#000;font-size:9px;font-weight:600;min-width:14px;height:14px;line-height:14px;text-align:center;border-radius:7px;padding:0 3px}.now-playing-tab.active{background:var(--bg-highlight);color:var(--text-primary)}.now-playing-tab.active svg{color:var(--accent)}.now-playing-content{flex-direction:column}.now-playing-left{width:100%;padding:20px;flex:1;overflow-y:auto}.now-playing-left.mobile-hidden{display:none}.now-playing-right-panel{display:none}.now-playing-mobile-panel{width:100%;flex:1;border-left:none;overflow:hidden}.now-playing-mobile-panel.mobile-hidden{display:none}.now-playing-mobile-panel.mobile-visible{display:flex}.now-playing-right{width:100%;flex:1;border-left:none;border-top:1px solid var(--bg-tertiary)}.now-playing-right.mobile-hidden{display:none}.now-playing-cover{max-width:280px;margin-left:auto;margin-right:auto}.now-playing-volume{display:none}.now-playing-queue-header{display:none}.now-playing-queue-list{padding-top:0}}.sleep-timer-wrap{position:relative;display:inline-flex}.sleep-timer-menu{position:absolute;bottom:calc(100% + 8px);right:0;min-width:200px;background:var(--bg-secondary, #1a1a1a);color:var(--text-primary, #fff);border:1px solid var(--bg-tertiary, #2a2a2a);border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.4);padding:6px;z-index:1000;display:flex;flex-direction:column;gap:2px}.sleep-timer-menu-item{appearance:none;background:rgba(0,0,0,0);border:0;color:inherit;text-align:left;font-size:14px;padding:8px 12px;border-radius:6px;cursor:pointer;transition:background-color .12s ease}.sleep-timer-menu-item:hover,.sleep-timer-menu-item:focus-visible{background:var(--bg-tertiary, #2a2a2a);outline:none}.sleep-timer-menu-cancel{color:var(--accent, #1db954);border-top:1px solid var(--bg-tertiary, #2a2a2a);margin-top:4px;padding-top:10px}.mobile-player-full-actions .sleep-timer-menu{bottom:calc(100% + 12px);right:auto;left:50%;transform:translateX(-50%)}.mobile-player-full-actions .sleep-timer-wrap>button{background:rgba(0,0,0,0)}.lyrics-container{width:100%;height:100%;overflow-y:auto;padding:20px;background:var(--bg-primary);color:var(--text-primary);position:relative}.lyrics-header{text-align:center;margin-bottom:40px;padding-bottom:20px;border-bottom:1px solid var(--border-color, rgba(255, 255, 255, 0.1))}.lyrics-title{font-size:24px;font-weight:700;margin-bottom:8px;color:var(--text-primary)}.lyrics-artist{font-size:16px;color:var(--text-secondary);margin-bottom:8px}.lyrics-source{font-size:12px;color:var(--text-secondary);opacity:.6}.lyrics-loading,.lyrics-empty{text-align:center;padding:60px 20px;color:var(--text-secondary);font-size:16px}.lyrics-empty{display:flex;flex-direction:column;align-items:center;gap:16px}.lyrics-empty-message{color:var(--text-secondary)}.lyrics-retry-btn{padding:10px 24px;background:var(--primary);color:#fff;border:none;border-radius:20px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s,transform .1s}.lyrics-retry-btn:hover{background:var(--primary-hover, #1ed760);transform:scale(1.02)}.lyrics-retry-btn:active{transform:scale(0.98)}.lyrics-lines{max-width:800px;margin:0 auto;padding-bottom:100px}.lyrics-line{padding:12px 20px;margin:4px 0;font-size:18px;line-height:1.6;color:var(--text-secondary);opacity:.4;cursor:pointer;transition:opacity .6s ease-out,color .6s ease-out,font-weight .4s ease-out,background .4s ease-out;border-radius:8px;text-align:center}.lyrics-line:hover{background:hsla(0,0%,100%,.05);opacity:.6}.lyrics-line.current{color:var(--text-primary);opacity:1;font-weight:600;background:hsla(0,0%,100%,.05)}.lyrics-line.unsynced{color:var(--text-primary);opacity:.9;font-size:16px;font-weight:400;padding:6px 0;margin:0;cursor:default;background:rgba(0,0,0,0);transform:none;text-align:left;line-height:1.8}.lyrics-line.unsynced:hover{background:rgba(0,0,0,0);opacity:.9}.lyrics-line.rich-sync{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.lyrics-word{color:var(--text-secondary);opacity:.5;transition:color .2s ease,opacity .2s ease}.lyrics-line.current .lyrics-word.active{color:var(--accent, #1db954);opacity:1}.lyrics-line.current .lyrics-word.past{color:var(--text-primary);opacity:.7}.lyrics-container::-webkit-scrollbar{width:8px}.lyrics-container::-webkit-scrollbar-track{background:rgba(0,0,0,0)}.lyrics-container::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.2);border-radius:4px}.lyrics-container::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.3)}@media(max-width: 768px){.lyrics-container{padding:15px}.lyrics-title{font-size:20px}.lyrics-artist{font-size:14px}.lyrics-line{font-size:16px;padding:10px 15px}}.lyrics-sync-badge{display:inline-block;margin-left:6px;padding:2px 8px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:10px;vertical-align:middle;line-height:1.4}.lyrics-sync-badge.rich{background:linear-gradient(135deg, #f5c451, #e0a72b);color:#1a1100;box-shadow:0 1px 4px rgba(245,196,81,.25)}.lyrics-sync-badge.line{background:rgba(29,185,84,.18);color:var(--accent, #1db954);border:1px solid rgba(29,185,84,.4)}.lyrics-sync-badge.text{background:hsla(0,0%,100%,.08);color:var(--text-secondary);border:1px solid hsla(0,0%,100%,.1)}.lyrics-header{position:relative}.lyrics-header-actions{position:absolute;top:0;right:0;display:flex;gap:8px}.lyrics-fullscreen-btn{background:hsla(0,0%,100%,.06);color:var(--text-secondary);border:1px solid hsla(0,0%,100%,.1);border-radius:50%;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s ease,color .18s ease,transform .1s ease}.lyrics-fullscreen-btn:hover{background:hsla(0,0%,100%,.12);color:var(--text-primary)}.lyrics-fullscreen-btn:active{transform:scale(0.96)}.lyrics-recenter-btn{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);padding:8px 16px;background:var(--accent, #1db954);color:#fff;border:none;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4);z-index:5;transition:transform .15s ease,background .18s ease}.lyrics-recenter-btn:hover{transform:translateX(-50%) scale(1.04);background:var(--primary-hover, #1ed760)}.lyrics-recenter-btn.fullscreen{position:fixed;bottom:32px;z-index:1000}.lyrics-fullscreen{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;background:#000;color:#fff;overflow:hidden}.lyrics-fullscreen-bg{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(40px) saturate(1.2);opacity:.55;z-index:0}.lyrics-fullscreen-overlay{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.85) 100%);z-index:1}.lyrics-fullscreen-close{position:absolute;top:18px;right:18px;z-index:10;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.15);color:#fff;cursor:pointer;backdrop-filter:blur(10px);transition:background .18s ease,transform .1s ease}.lyrics-fullscreen-close:hover{background:hsla(0,0%,100%,.18)}.lyrics-fullscreen-close:active{transform:scale(0.94)}.lyrics-fullscreen-header{position:relative;z-index:2;padding:24px 64px 16px;text-align:center;flex-shrink:0}.lyrics-fullscreen-title{font-size:22px;font-weight:700;margin-bottom:4px;color:#fff}.lyrics-fullscreen-artist{font-size:15px;color:hsla(0,0%,100%,.7);margin-bottom:6px}.lyrics-fullscreen-source{font-size:12px;color:hsla(0,0%,100%,.5);letter-spacing:.4px}.lyrics-fullscreen-scroll{position:relative;z-index:2;flex:1;overflow-y:auto;padding:40px 24px 100px;scroll-behavior:smooth}.lyrics-fullscreen-scroll .lyrics-lines{max-width:900px;margin:0 auto}.lyrics-fullscreen-scroll .lyrics-line{font-size:30px;line-height:1.6;padding:14px 16px;margin:6px 0;color:hsla(0,0%,100%,.4);opacity:1;font-weight:600;text-align:center;transition:color .4s ease,transform .3s ease,opacity .4s ease}.lyrics-fullscreen-scroll .lyrics-line:hover{background:hsla(0,0%,100%,.06)}.lyrics-fullscreen-scroll .lyrics-line.current{color:#fff;opacity:1;background:rgba(0,0,0,0);transform:scale(1.04);text-shadow:0 2px 12px rgba(0,0,0,.6)}.lyrics-fullscreen-scroll .lyrics-line.unsynced{font-size:20px;text-align:left;font-weight:500;color:hsla(0,0%,100%,.85)}.lyrics-fullscreen-scroll .lyrics-word{color:hsla(0,0%,100%,.4)}.lyrics-fullscreen-scroll .lyrics-line.current .lyrics-word.active{color:var(--accent, #1db954);opacity:1}.lyrics-fullscreen-scroll .lyrics-line.current .lyrics-word.past{color:#fff;opacity:.85}.lyrics-fullscreen-scroll::-webkit-scrollbar{width:6px}.lyrics-fullscreen-scroll::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.18);border-radius:3px}@media(max-width: 768px){.lyrics-fullscreen-header{padding:18px 56px 12px}.lyrics-fullscreen-title{font-size:18px}.lyrics-fullscreen-scroll{padding:24px 16px 80px}.lyrics-fullscreen-scroll .lyrics-line{font-size:22px;padding:10px 12px}}.toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);background:var(--bg-tertiary);padding:12px 24px;border-radius:var(--border-radius);color:var(--text-primary);font-size:14px;z-index:200;animation:slideUp .3s ease}@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.add-to-playlist-wrapper{position:relative;flex-shrink:0}.add-to-playlist-btn{width:32px;height:32px;opacity:0}.track-item:hover .add-to-playlist-btn{opacity:1}.add-to-playlist-dropdown{position:absolute;top:100%;right:0;margin-top:4px;background:var(--bg-tertiary);border-radius:var(--border-radius);box-shadow:0 8px 24px rgba(0,0,0,.5);min-width:200px;z-index:100;overflow:hidden}.dropdown-header{padding:12px 16px;font-size:12px;font-weight:600;text-transform:uppercase;color:var(--text-secondary);border-bottom:1px solid var(--bg-highlight)}.dropdown-item{padding:12px 16px;cursor:pointer;transition:var(--transition);font-size:14px}.dropdown-item:hover{background:var(--bg-highlight)}.dropdown-loading,.dropdown-empty,.dropdown-success{padding:16px;text-align:center;font-size:14px;color:var(--text-secondary)}.dropdown-success{color:var(--accent)}.playlist-search-section{background:var(--bg-secondary);border-radius:var(--border-radius);padding:20px;margin-bottom:24px}.playlist-search-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.playlist-search-header h3{font-size:18px;font-weight:600}.playlist-search-input-wrapper{display:flex;align-items:center;gap:12px;background:var(--bg-tertiary);border-radius:var(--border-radius);padding:12px 16px}.playlist-search-input-wrapper svg{width:20px;height:20px;color:var(--text-secondary);flex-shrink:0}.playlist-search-input{flex:1;background:rgba(0,0,0,0);border:none;outline:none;font-size:16px;color:var(--text-primary)}.playlist-search-input::placeholder{color:var(--text-muted)}.playlist-search-loading{display:flex;justify-content:center;padding:24px}.playlist-search-results{margin-top:16px;display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto}.playlist-search-result-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--border-radius);transition:var(--transition)}.playlist-search-result-item:hover{background:var(--bg-tertiary)}.playlist-search-result-image{width:48px;height:48px;border-radius:4px;object-fit:cover;flex-shrink:0}.playlist-search-result-info{flex:1;min-width:0}.playlist-search-result-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-search-result-artist{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-add-track{display:flex;align-items:center;gap:6px;padding:8px 16px;background:rgba(0,0,0,0);border:1px solid var(--text-secondary);border-radius:20px;color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:var(--transition);flex-shrink:0}.btn-add-track:hover:not(:disabled){background:var(--text-primary);color:var(--bg-primary);border-color:var(--text-primary)}.btn-add-track:disabled{cursor:default;opacity:.7}.btn-add-track.added{color:var(--accent);border-color:var(--accent)}.btn-add-track svg{width:16px;height:16px}.spinner-small{width:14px;height:14px;border:2px solid var(--text-muted);border-top-color:var(--text-primary);border-radius:50%;animation:spin .8s linear infinite}.playlist-search-empty{text-align:center;padding:24px;color:var(--text-secondary);font-size:14px}.btn-icon-active{color:var(--accent) !important;background:var(--bg-tertiary) !important}.empty-state-sub{font-size:14px;margin-top:8px;color:var(--text-muted)}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.skeleton{display:inline-block;background:linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 75%);background-color:var(--bg-tertiary, #2a2a2a);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite linear;border-radius:4px;vertical-align:middle;color:rgba(0,0,0,0);user-select:none;pointer-events:none}@media(prefers-reduced-motion: reduce){.skeleton{animation:none}}.skeleton-table td{background:rgba(0,0,0,0) !important}.skeleton-cell-user{display:flex;align-items:center;gap:12px}.skeleton-cell-lines{display:flex;flex-direction:column;gap:6px}.skeleton-card{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--bg-secondary, #1c1c1c);border-radius:8px}.skeleton-card .skeleton-card-image{aspect-ratio:1/1;width:100%;height:auto !important;display:block}@media(max-width: 768px){.responsive-table-stack{overflow-x:visible}.responsive-table-stack table{min-width:0 !important;width:100%;display:block}.responsive-table-stack thead{display:none}.responsive-table-stack tbody,.responsive-table-stack tr{display:block;width:100%}.responsive-table-stack tr{padding:12px;margin-bottom:12px;background:var(--bg-secondary);border:1px solid var(--bg-tertiary);border-radius:var(--border-radius)}.responsive-table-stack tr:hover td{background:rgba(0,0,0,0)}.responsive-table-stack td{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--bg-tertiary);text-align:right;min-height:32px}.responsive-table-stack td:last-child{border-bottom:none}.responsive-table-stack td::before{content:attr(data-label);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);opacity:.85;text-align:left;flex-shrink:0;margin-right:auto}.responsive-table-stack td[data-label=""]::before,.responsive-table-stack td:not([data-label])::before{content:none}.responsive-table-stack .user-cell-content{flex:1;justify-content:flex-end;text-align:left;min-width:0}.responsive-table-stack .user-info{flex:1;min-width:0;align-items:flex-end;text-align:right}.responsive-table-stack .user-info .username,.responsive-table-stack .user-info .email{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.responsive-table-stack .actions-cell{flex-wrap:wrap;justify-content:flex-end;gap:8px}.responsive-table-stack .date-cell{font-size:.8rem}}.sidebar{overflow-y:auto}.sidebar .nav{overflow-y:auto;flex:1 1 auto;min-height:0}@media(max-width: 768px){.admin-tabs{flex-wrap:wrap;gap:8px}.admin-tab{padding:10px 16px;font-size:14px;flex:1 1 auto;min-width:0;text-align:center}.admin-section .section-header{flex-direction:column;align-items:stretch;gap:12px}.admin-section .section-header .btn{align-self:flex-start}.setting-item{flex-direction:column;align-items:stretch;gap:12px}.modal{max-height:90vh}.modal-body{max-height:calc(90vh - 140px);overflow-y:auto}.modal-body .users-table{background:rgba(0,0,0,0)}.users-table.responsive-table-stack{overflow-x:visible}.users-table.responsive-table-stack table{min-width:0}}@media(prefers-reduced-motion: reduce){.admin-tab,.modal{transition:none;animation:none}}.health-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:8px}.health-summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.health-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:16px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.health-pill-ok{background:rgba(34,197,94,.15);color:#22c55e}.health-pill-warn{background:rgba(245,158,11,.18);color:#f59e0b}.health-pill-error{background:rgba(239,68,68,.18);color:#ef4444}.health-pill-info{background:rgba(96,165,250,.15);color:#60a5fa}.health-group{margin-bottom:24px}.health-group-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin:0 0 8px 0}.health-checks{display:flex;flex-direction:column;gap:6px}.health-check{background:var(--bg-tertiary);border-radius:8px;padding:10px 14px;border-left:3px solid rgba(0,0,0,0)}.health-check.health-ok{border-left-color:#22c55e}.health-check.health-warn{border-left-color:#f59e0b}.health-check.health-error{border-left-color:#ef4444}.health-check.health-info{border-left-color:#60a5fa}.health-check-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.health-check-label{font-weight:500;flex:1;min-width:0}.health-check-value{color:var(--text-secondary);font-size:13px;font-variant-numeric:tabular-nums;word-break:break-all;text-align:right}.health-check-hint{margin-top:6px;padding-left:18px;font-size:12px;color:var(--text-secondary);line-height:1.5;border-left:2px solid var(--bg-elevated)}.health-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.health-dot-ok{background:#22c55e}.health-dot-warn{background:#f59e0b}.health-dot-error{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.18)}.health-dot-info{background:#60a5fa}.mixes-section{margin-bottom:32px}.mixes-carousel{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.mixes-carousel::-webkit-scrollbar{display:none}.mixes-empty{padding:32px;text-align:center;color:var(--text-secondary);background:var(--bg-secondary);border-radius:var(--border-radius)}.mix-card{flex:0 0 200px;min-width:200px;scroll-snap-align:start}.mix-mosaic{display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 1fr);width:100%;aspect-ratio:1;border-radius:4px;overflow:hidden;margin-bottom:16px}.mix-mosaic-image{width:100%;height:100%;object-fit:cover}.mix-single-cover{position:relative;width:100%;aspect-ratio:1;border-radius:4px;overflow:hidden;margin-bottom:16px}.mix-single-image{width:100%;height:100%;object-fit:cover}.mix-gradient-overlay{position:absolute;inset:0;opacity:.6}.mix-gradient-cover{width:100%;aspect-ratio:1;border-radius:4px;margin-bottom:16px}.mix-detail-mosaic{display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 1fr);overflow:hidden}.mix-detail-single{position:relative;overflow:hidden}.mix-detail-single .mix-single-image{width:100%;height:100%;object-fit:cover}@media(max-width: 768px){.mixes-carousel{gap:12px;padding-left:0;margin:0 -16px;padding:0 16px 8px}.mix-card{flex:0 0 150px;min-width:150px;padding:10px}.mixes-section .section-title{font-size:18px}}.horizontal-row{margin-bottom:32px;width:100%}.horizontal-row__header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px;padding-right:4px}.horizontal-row__title{font-size:1.5rem;font-weight:700;margin:0;color:var(--text-primary)}.horizontal-row__see-all{background:none;border:none;color:var(--text-secondary);font-size:.85rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;padding:6px 8px;border-radius:var(--border-radius);transition:var(--transition)}.horizontal-row__see-all:hover,.horizontal-row__see-all:focus-visible{color:var(--text-primary);background:var(--bg-tertiary);outline:none}.horizontal-row__container{position:relative}.horizontal-row__viewport{--row-item-min-width: 180px;--row-gap: 16px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(var(--row-item-min-width), var(--row-item-min-width));gap:var(--row-gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px 12px;margin:0 -2px}.horizontal-row__viewport::-webkit-scrollbar{display:none}.horizontal-row__viewport>*{scroll-snap-align:start;min-width:0}@media(prefers-reduced-motion: reduce){.horizontal-row__viewport{scroll-behavior:auto}}.row-fade--start,.row-fade--end{position:absolute;top:0;bottom:12px;width:36px;pointer-events:none;opacity:0;transition:opacity .2s ease;z-index:1}.row-fade--start{left:0;background:linear-gradient(to right, var(--bg-primary), transparent)}.row-fade--end{right:0;background:linear-gradient(to left, var(--bg-primary), transparent)}.row-fade--start.is-visible,.row-fade--end.is-visible{opacity:1}.row-scroll-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:rgba(0,0,0,.7);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;opacity:0;transition:opacity .2s ease,background .2s ease,transform .2s ease;box-shadow:0 4px 12px rgba(0,0,0,.4)}.row-scroll-btn svg{width:22px;height:22px}.row-scroll-btn:hover{background:rgba(0,0,0,.9);transform:translateY(-50%) scale(1.06)}.row-scroll-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;opacity:1}.row-scroll-btn--prev{left:4px}.row-scroll-btn--next{right:4px}.horizontal-row__container:hover .row-scroll-btn{opacity:1}@media(max-width: 768px){.row-scroll-btn{display:none}.horizontal-row__viewport{--row-item-min-width: 150px;--row-gap: 12px}}.artist-hero{display:flex;align-items:flex-end;gap:32px;padding:24px 0 32px;margin-bottom:16px}.artist-hero__image{position:relative;width:280px;height:280px;flex-shrink:0;border-radius:50%;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.5);background:var(--bg-tertiary)}.artist-hero__image img{width:100%;height:100%;object-fit:cover;display:block}.artist-hero__image-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.artist-hero__initials{font-size:6rem;font-weight:700;color:hsla(0,0%,100%,.85);letter-spacing:.04em;text-shadow:0 2px 8px rgba(0,0,0,.4)}.artist-hero__meta{display:flex;flex-direction:column;gap:12px;flex:1;min-width:0}.artist-hero__type{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-secondary)}.artist-hero__title{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:800;line-height:1.05;margin:0;color:var(--text-primary);word-break:break-word}.artist-hero__stats{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--text-secondary);font-size:.95rem}.artist-hero__stats>span+span::before{content:"· ";margin-right:4px}.artist-hero__actions{display:flex;align-items:center;gap:16px;margin-top:8px}.artist-hero__play{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;background:var(--accent);color:#000;font-weight:700;font-size:1rem;letter-spacing:.4px;border:none;border-radius:999px;cursor:pointer;transition:var(--transition);box-shadow:0 6px 20px rgba(29,185,84,.25)}.artist-hero__play svg{width:22px;height:22px}.artist-hero__play:hover{background:var(--accent-hover);transform:scale(1.04)}.artist-hero__play:focus-visible{outline:2px solid var(--accent-hover);outline-offset:2px}@media(max-width: 768px){.artist-hero{flex-direction:column;align-items:center;text-align:center;gap:20px;padding:16px 0 24px}.artist-hero__image{width:200px;height:200px}.artist-hero__initials{font-size:4rem}.artist-hero__title{font-size:clamp(2rem,9vw,3rem)}.artist-hero__stats{justify-content:center}.artist-hero__actions{justify-content:center;width:100%}}.discography-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.discography-chip{background:var(--bg-tertiary);border:1px solid rgba(0,0,0,0);color:var(--text-secondary);padding:8px 16px;border-radius:999px;font-size:.85rem;font-weight:600;cursor:pointer;transition:var(--transition);white-space:nowrap}.discography-chip:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary)}.discography-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.discography-chip:disabled{opacity:.4;cursor:not-allowed}.discography-chip--active{background:var(--text-primary);color:var(--bg-primary);border-color:var(--text-primary)}.discography-chip--active:hover{background:var(--text-primary);color:var(--bg-primary)}.discography-chip__count{font-weight:500;opacity:.75;margin-left:2px}.search-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;padding:12px 0;background:var(--bg-primary);border-bottom:1px solid var(--bg-tertiary)}.search-tabs--sticky{position:sticky;top:0;z-index:10;background:var(--bg-primary)}.search-tabs__tab{background:rgba(0,0,0,0);border:1px solid rgba(0,0,0,0);color:var(--text-secondary);padding:8px 16px;border-radius:999px;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition);white-space:nowrap}.search-tabs__tab:hover{color:var(--text-primary);background:var(--bg-tertiary)}.search-tabs__tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.search-tabs__tab--active{background:var(--text-primary);color:var(--bg-primary);border-color:var(--text-primary)}.search-tabs__tab--active:hover{background:var(--text-primary);color:var(--bg-primary)}.search-tabs__count{font-weight:500;opacity:.75;margin-left:2px}.top-tracks-compact{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}.top-tracks-compact__row{display:grid;grid-template-columns:28px 48px 1fr auto auto;align-items:center;gap:14px;padding:8px 12px;border-radius:var(--border-radius);cursor:pointer;transition:background .15s ease}.top-tracks-compact__row:hover,.top-tracks-compact__row:focus-within{background:var(--bg-tertiary)}.top-tracks-compact__rank{text-align:center;font-size:1rem;font-weight:600;color:var(--text-secondary);font-variant-numeric:tabular-nums}.top-tracks-compact__image{width:48px;height:48px;border-radius:4px;object-fit:cover;background:var(--bg-tertiary);flex-shrink:0}.top-tracks-compact__meta{min-width:0;display:flex;flex-direction:column;gap:2px}.top-tracks-compact__name{color:var(--text-primary);font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-tracks-compact__artists{color:var(--text-secondary);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-tracks-compact__duration{color:var(--text-secondary);font-size:.85rem;font-variant-numeric:tabular-nums;min-width:40px;text-align:right}.top-tracks-compact__more{background:rgba(0,0,0,0);border:none;color:var(--text-secondary);cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.top-tracks-compact__more:hover{color:var(--text-primary);background:var(--bg-hover)}.top-tracks-compact__more svg{width:18px;height:18px}@media(max-width: 768px){.top-tracks-compact__row{grid-template-columns:24px 44px 1fr auto;gap:10px;padding:6px 8px}.top-tracks-compact__more{display:none}.top-tracks-compact__image{width:44px;height:44px}}.eq-modal{display:flex;flex-direction:column;gap:20px}.eq-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.eq-toggle-label{display:inline-flex;align-items:center;gap:12px;cursor:pointer;user-select:none;font-weight:600;color:var(--text-primary)}.eq-toggle-text{font-size:.95rem}.eq-presets{display:flex;flex-wrap:wrap;gap:8px}.eq-preset-chip{background:var(--bg-tertiary);border:1px solid var(--border-subtle, transparent);color:var(--text-primary);padding:6px 14px;border-radius:999px;font-size:.85rem;font-weight:600;cursor:pointer;transition:background 120ms ease,color 120ms ease,border-color 120ms ease}.eq-preset-chip:hover:not(:disabled){background:var(--bg-hover)}.eq-preset-chip.is-active{background:var(--accent);color:#000;border-color:var(--accent)}.eq-preset-chip.is-custom{cursor:default;background:var(--bg-hover);color:var(--text-secondary);border-color:var(--border-subtle, transparent)}.eq-preset-chip:disabled{opacity:.5;cursor:not-allowed}.eq-bands{display:grid;grid-template-columns:repeat(10, minmax(0, 1fr));gap:8px;padding:16px 0;background:var(--bg-tertiary);border-radius:var(--border-radius)}.eq-bands--disabled{opacity:.55}.eq-band{display:flex;flex-direction:column;align-items:center;gap:8px}.eq-band-value{font-size:.7rem;font-weight:600;color:var(--text-secondary);font-variant-numeric:tabular-nums;min-height:1em}.eq-band-freq{font-size:.65rem;color:var(--text-muted, var(--text-secondary));text-align:center;letter-spacing:.02em}.eq-slider-wrap{height:160px;display:flex;align-items:center;justify-content:center;width:100%}.eq-slider{-webkit-appearance:none;appearance:none;width:160px;height:4px;background:rgba(0,0,0,0);transform:rotate(-90deg);cursor:pointer;margin:0;padding:0}.eq-slider:disabled{cursor:not-allowed}@-moz-document url-prefix(){.eq-slider{transform:none;width:24px;height:160px;writing-mode:vertical-lr;direction:rtl}}.eq-slider::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right, var(--accent) 0%, var(--accent) 50%, var(--bg-highlight, #444) 50%, var(--bg-highlight, #444) 100%)}.eq-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-secondary);margin-top:-5px;cursor:pointer;transition:transform 100ms ease}.eq-slider:hover::-webkit-slider-thumb{transform:scale(1.15)}.eq-slider::-moz-range-track{height:4px;border-radius:2px;background:var(--bg-highlight, #444)}.eq-slider::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}.eq-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-secondary);cursor:pointer}.eq-slider:focus{outline:none}.eq-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(29,185,84,.35)}.eq-slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(29,185,84,.35)}.eq-help-text{font-size:.8rem;color:var(--text-secondary);margin:0;line-height:1.4}.btn-sm{padding:6px 14px;font-size:.8rem}@media(max-width: 600px){.eq-bands{gap:4px;padding:12px 4px}.eq-slider-wrap{height:130px}.eq-slider{width:130px}@-moz-document url-prefix(){.eq-slider{width:20px;height:130px}}.eq-band-freq{font-size:.55rem}.eq-band-value{font-size:.65rem}}.top-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.search-container{position:relative;flex:1;max-width:500px}.search-input{width:100%;padding:7px 16px 7px 40px;background:var(--bg-tertiary);border:2px solid rgba(0,0,0,0);border-radius:20px;color:var(--text-primary);font-size:13px;outline:none;transition:var(--transition)}.search-input:focus{border-color:var(--accent);background:var(--bg-highlight)}.search-input::placeholder{color:var(--text-muted)}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-secondary);width:16px;height:16px}.search-icon svg{width:100%;height:100%}.search-history-dropdown{position:absolute;top:100%;left:0;right:0;margin-top:8px;background:var(--bg-tertiary);border-radius:var(--border-radius);box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:150;overflow:hidden}.search-history-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--bg-highlight);font-size:12px;font-weight:600;text-transform:uppercase;color:var(--text-secondary)}.search-history-clear{background:none;border:none;color:var(--text-secondary);font-size:12px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:var(--transition)}.search-history-clear:hover{color:var(--text-primary);background:var(--bg-highlight)}.search-history-list{max-height:300px;overflow-y:auto}.search-history-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:var(--transition)}.search-history-item:hover{background:var(--bg-highlight)}.search-history-item svg{width:18px;height:18px;color:var(--text-secondary);flex-shrink:0}.search-history-item span{flex:1;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-history-remove{width:28px;height:28px;background:rgba(0,0,0,0);border:none;border-radius:50%;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition);flex-shrink:0}.search-history-item:hover .search-history-remove{opacity:1}.search-history-remove:hover{color:var(--error);background:var(--bg-tertiary)}.search-history-remove svg{width:14px;height:14px}.section{margin-bottom:32px}.page-title{font-size:32px;font-weight:700;margin-bottom:24px;color:var(--text-primary)}.page-subtitle{font-size:16px;color:var(--text-secondary);margin-bottom:24px;margin-top:-16px}.page-header-with-action{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px;gap:24px}.page-header-with-action>div{flex:1}.btn-play-all{display:flex;align-items:center;gap:12px;padding:14px 28px;background:var(--accent);color:#000;border:none;border-radius:24px;font-size:16px;font-weight:700;cursor:pointer;transition:var(--transition);white-space:nowrap}.btn-play-all:hover{background:var(--accent-hover);transform:scale(1.05)}.btn-play-all svg{width:20px;height:20px}@media(max-width: 768px){.page-header-with-action{flex-direction:column;align-items:stretch}.btn-play-all{width:100%;justify-content:center}}.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:32px}@media(max-width: 900px){.home-grid{grid-template-columns:1fr}}.section-title{font-size:24px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}.section-title a{font-size:12px;color:var(--text-secondary);text-decoration:none;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.section-title a:hover{color:var(--text-primary);text-decoration:underline}.section-title .category-icon{width:28px;height:28px;border-radius:4px;object-fit:cover;margin-right:8px;vertical-align:middle}.section-subsection{margin-bottom:24px}.subsection-title{font-size:18px;font-weight:600;margin-bottom:12px;color:var(--text-primary)}.search-filters{display:flex;gap:8px;margin-bottom:24px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}.search-filters::-webkit-scrollbar{display:none}.filter-btn{padding:8px 16px;border-radius:20px;border:none;background:var(--bg-tertiary);color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;transition:var(--transition)}.filter-btn:hover{background:var(--bg-highlight)}.filter-btn.active{background:var(--accent);color:#000}.grid{display:grid;gap:24px}.grid-tracks{grid-template-columns:1fr}.grid-cards{grid-template-columns:repeat(auto-fill, minmax(180px, 1fr))}.loading{display:flex;align-items:center;justify-content:center;padding:48px}.spinner{width:32px;height:32px;border:3px solid var(--bg-tertiary);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:48px;color:var(--text-secondary)}.empty-state-icon{width:64px;height:64px;margin:0 auto 16px;opacity:.5}.empty-state-icon svg{width:100%;height:100%}.tabs{display:flex;gap:8px;margin-bottom:24px;border-bottom:1px solid var(--bg-tertiary);padding-bottom:8px}.tab{padding:8px 16px;background:none;border:none;color:var(--text-secondary);font-weight:500;cursor:pointer;border-radius:var(--border-radius);transition:var(--transition)}.tab:hover{color:var(--text-primary);background:var(--bg-tertiary)}.tab.active{color:var(--text-primary);background:var(--bg-tertiary)}.detail-header{display:flex;gap:24px;margin-bottom:32px;padding:24px;background:linear-gradient(transparent, var(--bg-primary));border-radius:var(--border-radius)}.detail-image{width:232px;height:232px;border-radius:4px;object-fit:cover;box-shadow:0 4px 60px rgba(0,0,0,.5)}.detail-image.rounded{border-radius:50%}.detail-info{display:flex;flex-direction:column;justify-content:flex-end}.detail-type{font-size:12px;font-weight:700;text-transform:uppercase}.detail-title{font-size:48px;font-weight:900;margin:8px 0;line-height:1.1}.detail-meta{font-size:14px;color:var(--text-secondary);display:flex;align-items:center;gap:8px}.detail-actions{display:flex;gap:16px;margin-top:24px}.btn-play-large{width:56px;height:56px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.btn-play-large:hover{transform:scale(1.05);background:var(--accent-hover)}.btn-play-large svg{width:24px;height:24px;color:#000;margin-left:2px}.service-selector{display:flex;gap:8px;margin-bottom:16px}.service-btn{padding:8px 16px;background:var(--bg-tertiary);border:1px solid rgba(0,0,0,0);border-radius:20px;color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;transition:var(--transition)}.service-btn:hover{color:var(--text-primary);border-color:var(--text-secondary)}.service-btn.active{background:var(--accent);color:#000}.auth-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);gap:16px;color:var(--text-secondary)}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg-primary);padding:24px;padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom))}.login-box{width:100%;max-width:400px;background:var(--bg-secondary);border-radius:16px;padding:48px}.login-header{text-align:center;margin-bottom:32px}.login-logo{width:64px;height:64px;margin:0 auto 16px;color:var(--accent)}.login-logo svg{width:100%;height:100%}.login-header h1{font-size:28px;font-weight:700;margin-bottom:8px}.login-header p{color:var(--text-secondary);font-size:14px}.login-form{display:flex;flex-direction:column;gap:20px}.login-error{background:rgba(233,20,41,.1);border:1px solid var(--error);color:var(--error);padding:12px 16px;border-radius:var(--border-radius);font-size:14px;text-align:center}.login-success{background:rgba(29,185,84,.1);border:1px solid var(--accent);color:var(--accent);padding:12px 16px;border-radius:var(--border-radius);font-size:14px;text-align:center}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:14px;font-weight:500;color:var(--text-secondary)}.form-group label .optional{font-weight:400;color:var(--text-muted);font-size:12px}.form-group input{padding:14px 16px;background:var(--bg-tertiary);border:2px solid rgba(0,0,0,0);border-radius:var(--border-radius);color:var(--text-primary);font-size:16px;outline:none;transition:var(--transition)}.form-group input:focus{border-color:var(--accent);background:var(--bg-highlight)}.form-group input::placeholder{color:var(--text-muted)}.form-group input:disabled{opacity:.6;cursor:not-allowed}.login-button{width:100%;padding:14px;background:var(--accent);color:#000;border:none;border-radius:24px;font-size:16px;font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}.login-button:hover{background:var(--accent-hover);transform:scale(1.02)}.login-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.login-spinner{width:20px;height:20px;border:2px solid rgba(0,0,0,.2);border-top-color:#000;border-radius:50%;animation:spin 1s linear infinite}.login-footer{text-align:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--bg-tertiary)}.login-footer p{font-size:14px;color:var(--text-secondary);margin:8px 0}.link-button{background:none;border:none;color:var(--accent);font-size:14px;font-weight:600;cursor:pointer;padding:0;text-decoration:underline}.link-button:hover{color:var(--accent-hover)}.login-hint{font-size:12px;color:var(--text-muted);margin-top:12px}.setup-hint{font-size:13px;color:var(--accent);margin-top:8px;padding:8px 12px;background:rgba(29,185,84,.1);border-radius:var(--border-radius);text-align:center}.sidebar-user{margin-top:auto;padding:12px;background:var(--bg-tertiary);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:space-between;gap:12px}.user-info{display:flex !important;flex-direction:row !important;align-items:center;gap:10px;min-width:0;flex:1;flex-wrap:nowrap}.user-info svg{width:20px;height:20px;color:var(--text-secondary);flex-shrink:0}.user-info span{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-badge{font-size:10px;font-weight:600;text-transform:uppercase;background:var(--accent);color:#000;padding:2px 6px;border-radius:4px;flex-shrink:0}.logout-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0}.logout-btn:hover{color:var(--text-primary);background:var(--bg-highlight)}.logout-btn svg{width:18px;height:18px}.header-user{position:relative;display:flex;align-items:center;gap:8px}.header-icon-btn{width:32px;height:32px;border-radius:50%;border:none;background:rgba(0,0,0,0);color:var(--text-secondary, var(--text-primary));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease,transform .15s ease}.header-icon-btn svg{width:18px;height:18px}.header-icon-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.header-icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.user-avatar-btn{position:relative;width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));color:#000;display:flex;align-items:center;justify-content:center;transition:transform .15s ease,box-shadow .15s ease}.user-avatar-btn:hover{transform:scale(1.05);box-shadow:0 0 0 2px hsla(0,0%,100%,.15)}.user-avatar-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.user-avatar-initials{font-size:13px;font-weight:700;letter-spacing:.02em;user-select:none}.user-avatar-badge{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:#ffb600;color:#1a1a1a;font-size:9px;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-secondary)}.user-menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:199}.user-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:var(--bg-tertiary);border:1px solid var(--bg-highlight);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.5);padding:6px;z-index:200;display:flex;flex-direction:column;gap:2px}.user-menu-header{padding:8px 12px 4px;display:flex;flex-direction:column;gap:2px}.user-menu-name{font-size:13px;font-weight:600;color:var(--text-primary);word-break:break-word}.user-menu-role{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}.user-menu-divider{height:1px;background:var(--bg-highlight);margin:4px 0}.user-menu-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;background:rgba(0,0,0,0);border:none;color:var(--text-primary);font-size:13px;font-weight:500;text-align:left;text-decoration:none;cursor:pointer;width:100%;transition:var(--transition)}.user-menu-item:hover{background:var(--bg-highlight)}.user-menu-item svg{width:18px;height:18px;flex-shrink:0;color:var(--text-secondary)}.user-menu-item span{flex:1}.user-menu-item--danger{color:#ff6b6b}.user-menu-item--danger svg{color:#ff6b6b}.user-menu-item--danger:hover{background:rgba(255,107,107,.1)}.nav-divider{height:1px;background:var(--bg-tertiary);margin:12px 0}.profile-page{max-width:900px}.profile-error{background:rgba(233,20,41,.1);border:1px solid var(--error);color:var(--error);padding:12px 16px;border-radius:var(--border-radius);font-size:14px;margin-bottom:16px}.profile-success{background:rgba(29,185,84,.1);border:1px solid var(--accent);color:var(--accent);padding:12px 16px;border-radius:var(--border-radius);font-size:14px;margin-bottom:16px}.profile-header-card{background:linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);border-radius:var(--border-radius-lg);padding:32px;margin-bottom:24px;display:flex;align-items:center;gap:24px;position:relative}.profile-header-card .profile-avatar{width:100px;height:100px;background:var(--bg-elevated);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:0;border:3px solid var(--accent)}.profile-header-card .profile-avatar svg{width:48px;height:48px;color:var(--accent)}.profile-header-info{flex:1;min-width:0}.profile-username{font-size:28px;font-weight:700;margin:0 0 8px 0;display:flex;align-items:center;gap:12px}.profile-role-badge{display:inline-block;background:var(--accent);color:#000;font-size:11px;font-weight:600;text-transform:uppercase;padding:4px 10px;border-radius:20px;letter-spacing:.5px}.profile-meta{color:var(--text-secondary);font-size:14px;margin:8px 0 0 0}.profile-header-actions{position:absolute;top:16px;right:16px}.btn-icon{width:40px;height:40px;border-radius:50%;background:var(--bg-elevated);border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.btn-icon:hover{background:var(--bg-hover);color:var(--text-primary)}.btn-icon svg{width:18px;height:18px}.profile-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:20px;margin-bottom:24px}@media(max-width: 768px){.profile-grid{grid-template-columns:1fr}.profile-header-card{flex-direction:column;text-align:center;padding:24px}.profile-header-actions{position:static;margin-top:16px}.profile-username{justify-content:center;flex-wrap:wrap}}.profile-card{background:var(--bg-secondary);border-radius:var(--border-radius);padding:24px;display:flex;flex-direction:column}.profile-card-full{grid-column:1/-1;margin-bottom:24px}.profile-card-icon{width:48px;height:48px;background:var(--bg-tertiary);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--accent)}.profile-card-title{font-size:16px;font-weight:600;margin-bottom:8px}.profile-card h3.profile-card-title{margin-bottom:8px}.profile-card-desc{color:var(--text-muted);font-size:13px;margin-bottom:16px;line-height:1.5;flex:1}.profile-card-buttons{display:flex;flex-direction:column;gap:8px}.profile-card-buttons a.btn-primary,.profile-card-buttons a.btn-secondary{text-decoration:none;text-align:center}.cache-faq h3{font-size:15px;font-weight:600;margin:16px 0 8px 0;color:var(--text-primary)}.cache-faq h3:first-child{margin-top:0}.cache-faq ol{margin:0;padding-left:20px;color:var(--text-secondary)}.cache-faq ol li{margin-bottom:6px;font-size:14px;line-height:1.5}.cache-faq-tip{margin-top:20px;padding:12px;background:var(--accent-light);border-radius:8px;font-size:13px;color:var(--accent)}.profile-avatar{width:80px;height:80px;background:var(--bg-tertiary);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:24px}.profile-avatar svg{width:40px;height:40px;color:var(--text-secondary)}.profile-actions{display:flex;gap:12px;margin-top:8px}.profile-edit-form{display:flex;flex-direction:column;gap:16px}.form-row{display:grid;grid-template-columns:repeat(2, 1fr);gap:16px}@media(max-width: 600px){.form-row{grid-template-columns:1fr}}.btn-block{width:100%;justify-content:center}.language-selector{display:flex;gap:10px;flex-wrap:wrap}.language-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--bg-tertiary);border:2px solid rgba(0,0,0,0);border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease;color:var(--text-primary);font-size:14px;flex:1;min-width:100px}.language-btn:hover{background:var(--bg-hover);border-color:var(--border-subtle)}.language-btn.active{background:rgba(29,185,84,.15);border-color:var(--accent)}.language-flag{font-size:20px;line-height:1}.language-name{font-weight:500;font-size:13px}.setting-toggle{display:flex;flex-direction:column;gap:8px}.toggle-label{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}.toggle-text{font-size:14px;font-weight:500;color:var(--text-primary)}.setting-description{color:var(--text-muted);font-size:12px;line-height:1.4;margin:0}.settings-select{appearance:none;background:var(--bg-tertiary, #2a2a2a);color:var(--text-primary);border:1px solid var(--bg-tertiary, #2a2a2a);border-radius:6px;padding:6px 10px;font-size:13px;cursor:pointer;min-width:120px}.settings-select:focus{outline:2px solid var(--accent);outline-offset:1px}.profile-version{text-align:center;color:var(--text-muted);font-size:12px;padding:16px 0}.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;background:var(--accent);color:#000;border:none;border-radius:var(--border-radius);font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition)}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-primary svg{width:16px;height:16px}.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;background:var(--bg-tertiary);color:var(--text-primary);border:none;border-radius:var(--border-radius);font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition)}.btn-secondary:hover{background:var(--bg-highlight)}.btn-secondary svg{width:16px;height:16px}.btn-secondary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary.saved{background:var(--accent);color:#000}.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(0,0,0,0);color:var(--text-secondary);border:none;border-radius:50%;cursor:pointer;transition:var(--transition)}.btn-icon:hover{color:var(--text-primary);background:var(--bg-tertiary)}.btn-icon svg{width:20px;height:20px}.btn-icon-danger:hover{color:var(--error);background:rgba(233,20,41,.1)}.my-playlists-page .section-title{display:flex;align-items:center;gap:12px}.my-playlists-page .section-title svg{width:28px;height:28px}.my-playlists-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}.my-playlists-actions{display:flex;gap:8px;flex-shrink:0}.my-playlists-actions .btn-secondary,.my-playlists-actions .btn-primary{display:flex;align-items:center;gap:6px;white-space:nowrap}.my-playlists-actions svg{width:18px;height:18px}@media(max-width: 480px){.my-playlists-header{flex-direction:column;align-items:flex-start}.my-playlists-actions{width:100%}.my-playlists-actions .btn-secondary,.my-playlists-actions .btn-primary{flex:1;justify-content:center}}.playlist-create-form{background:var(--bg-secondary);border-radius:var(--border-radius);padding:24px;margin-bottom:24px}.form-actions{display:flex;gap:12px;margin-top:8px}.playlists-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:16px}.playlist-card{background:var(--bg-secondary);border-radius:var(--border-radius);padding:16px;cursor:pointer;transition:var(--transition);position:relative}.playlist-card:hover{background:var(--bg-tertiary)}.playlist-card-image{width:100%;aspect-ratio:1;border-radius:4px;overflow:hidden;margin-bottom:12px;background:var(--bg-tertiary)}.playlist-card-image img{width:100%;height:100%;object-fit:cover}.playlist-card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.playlist-card-placeholder svg{width:48px;height:48px}.playlist-card-name{font-weight:600;font-size:16px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-card-meta{font-size:13px;color:var(--text-secondary)}.playlist-delete-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;background:rgba(0,0,0,.7);border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition)}.playlist-card:hover .playlist-delete-btn{opacity:1}.playlist-delete-btn:hover{color:var(--error);background:rgba(0,0,0,.9)}.playlist-delete-btn svg{width:16px;height:16px}.playlist-detail-image{width:232px;height:232px;background:var(--bg-tertiary);border-radius:4px;display:flex;align-items:center;justify-content:center}.playlist-detail-image img{width:100%;height:100%;object-fit:cover;border-radius:4px}.playlist-image-placeholder{color:var(--text-muted)}.playlist-image-placeholder svg{width:64px;height:64px}.detail-description{font-size:14px;color:var(--text-secondary);margin-top:8px}.playlist-edit-inline{display:flex;flex-direction:column;gap:12px;margin-top:8px}.edit-title-input{font-size:24px;font-weight:700;background:var(--bg-tertiary);border:2px solid var(--accent);border-radius:var(--border-radius);padding:8px 12px;color:var(--text-primary);outline:none}.edit-description-input{font-size:14px;background:var(--bg-tertiary);border:2px solid rgba(0,0,0,0);border-radius:var(--border-radius);padding:8px 12px;color:var(--text-primary);outline:none}.edit-description-input:focus{border-color:var(--accent)}.edit-image-input{font-size:13px;background:var(--bg-tertiary);border:2px solid rgba(0,0,0,0);border-radius:var(--border-radius);padding:8px 12px;color:var(--text-secondary);outline:none}.edit-image-input:focus{border-color:var(--accent);color:var(--text-primary)}.edit-actions{display:flex;gap:12px}.track-remove-btn{width:32px;height:32px;background:rgba(0,0,0,0);border:none;border-radius:50%;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition);flex-shrink:0}.track-item:hover .track-remove-btn{opacity:1}.track-remove-btn:hover{color:var(--error);background:var(--bg-tertiary)}.track-remove-btn svg{width:16px;height:16px}.history-page .page-title{display:flex;align-items:center;gap:12px}.history-page .page-title svg{width:28px;height:28px;color:var(--accent)}.history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:16px}.history-header .btn-secondary{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-tertiary);border:none;border-radius:var(--border-radius);color:var(--text-primary);cursor:pointer;transition:var(--transition)}.history-header .btn-secondary:hover{background:var(--bg-highlight)}.history-header .btn-secondary svg{width:16px;height:16px}.favorites-page .section-title{display:flex;align-items:center;gap:12px}.favorites-page .section-title svg{width:28px;height:28px;color:var(--error)}.favorites-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:16px}.favorites-filters{display:flex;gap:8px}.filter-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-tertiary);border:1px solid rgba(0,0,0,0);border-radius:20px;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:var(--transition)}.filter-btn:hover{color:var(--text-primary);border-color:var(--text-secondary)}.filter-btn.active{background:var(--accent);color:#000}.filter-btn svg{width:16px;height:16px}.search-source-selector{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px;font-size:12px}.search-source-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;font-weight:600;margin-right:4px}.source-btn{display:inline-flex;align-items:center;padding:4px 10px;background:rgba(0,0,0,0);border:1px solid var(--bg-tertiary);border-radius:16px;color:var(--text-secondary);font-size:12px;font-weight:500;cursor:pointer;transition:var(--transition)}.source-btn:hover{color:var(--text-primary);border-color:var(--text-secondary)}.source-btn.active{background:var(--accent);color:#000;border-color:var(--accent)}.track-source-badge{display:inline-block;margin-left:8px;padding:1px 6px;font-size:9px;font-weight:700;letter-spacing:.05em;border-radius:3px;vertical-align:middle;line-height:1.4}.track-source-youtube{background:red;color:#fff}.track-source-spotify{background:#1db954;color:#000}.favorite-card{position:relative}.favorite-remove-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;background:rgba(0,0,0,.7);border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition)}.favorite-card:hover .favorite-remove-btn{opacity:1}.favorite-remove-btn:hover{color:var(--error);background:rgba(0,0,0,.9)}.favorite-remove-btn svg{width:16px;height:16px}.favorite-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:rgba(0,0,0,0);color:var(--text-secondary);border:none;border-radius:50%;cursor:pointer;transition:var(--transition)}.favorite-btn:hover{color:var(--text-primary);transform:scale(1.1)}.favorite-btn.active{color:var(--error)}.favorite-btn.active:hover{color:var(--error)}.favorite-btn svg{width:20px;height:20px}.favorite-btn.large{width:40px;height:40px}.favorite-btn.large svg{width:24px;height:24px}.install-prompt{position:fixed;bottom:calc(100px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:1000;width:calc(100% - 32px);max-width:400px;animation:slideUp .3s ease-out}@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.install-prompt-content{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.4)}.install-icon{flex-shrink:0;color:var(--accent)}.install-text{flex:1;display:flex;flex-direction:column;gap:2px}.install-text strong{font-size:14px;color:var(--text-primary)}.install-text span{font-size:12px;color:var(--text-muted)}.install-actions{display:flex;align-items:center;gap:8px}.install-btn{padding:8px 16px;background:var(--accent);color:#000;border:none;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.install-btn:hover{background:var(--accent-hover);transform:scale(1.05)}.install-dismiss{padding:8px;background:rgba(0,0,0,0);border:none;color:var(--text-muted);cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s}.install-dismiss:hover{background:var(--bg-hover);color:var(--text-primary)}.install-prompt-ios{bottom:0;left:0;right:0;top:0;width:100%;max-width:none;transform:none;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;padding:24px}.install-prompt-ios .install-prompt-content{flex-direction:column;max-width:320px;padding:24px;position:relative;text-align:center}.install-prompt-ios h3{font-size:20px;margin-bottom:20px;color:var(--text-primary)}.install-close{position:absolute;top:12px;right:12px;padding:8px;background:rgba(0,0,0,0);border:none;color:var(--text-muted);cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center}.install-close:hover{background:var(--bg-hover);color:var(--text-primary)}.ios-steps{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.ios-step{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-secondary);flex-wrap:wrap;justify-content:center}.step-number{width:24px;height:24px;background:var(--accent);color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}.share-icon{color:var(--accent);margin:0 4px}.ios-step strong{color:var(--text-primary)}.install-dismiss-btn{width:100%;padding:12px 24px;background:var(--accent);color:#000;border:none;border-radius:24px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.install-dismiss-btn:hover{background:var(--accent-hover)}@media(max-width: 768px){.install-prompt{bottom:calc(80px + env(safe-area-inset-bottom))}}.import-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .2s ease}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.import-modal{background:var(--bg-secondary);border-radius:16px;width:100%;max-width:500px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:scaleIn .2s ease}@keyframes scaleIn{from{transform:scale(0.95);opacity:0}to{transform:scale(1);opacity:1}}.import-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border-color)}.import-header h2{font-size:20px;font-weight:600}.import-close{width:36px;height:36px;background:rgba(0,0,0,0);border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.import-close:hover{background:var(--bg-hover);color:var(--text-primary)}.import-content{padding:24px;overflow-y:auto}.import-steps{display:flex;align-items:center;justify-content:center;margin-bottom:32px}.import-step{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.4;transition:all .3s}.import-step.active{opacity:1}.import-step.done .step-num{background:var(--accent);color:#000}.step-num{width:32px;height:32px;border-radius:50%;background:var(--bg-tertiary);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;transition:all .3s}.import-step.active .step-num{background:var(--accent);color:#000}.step-label{font-size:12px;color:var(--text-secondary)}.step-line{width:40px;height:2px;background:var(--bg-tertiary);margin:0 8px;margin-bottom:24px}.import-step-content{text-align:center}.step-icon{width:80px;height:80px;margin:0 auto 20px;background:rgba(29,185,84,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent)}.step-icon.green{background:rgba(29,185,84,.15);color:var(--accent)}.step-icon.blue{background:rgba(59,130,246,.15);color:#3b82f6}.step-icon.purple{background:rgba(139,92,246,.15);color:#8b5cf6}.import-step-content h3{font-size:18px;font-weight:600;margin-bottom:12px}.step-desc{color:var(--text-secondary);margin-bottom:20px;line-height:1.5}.step-list{text-align:left;margin:0 auto 24px;padding-left:24px;max-width:350px}.step-list li{color:var(--text-secondary);margin-bottom:12px;line-height:1.5}.step-list code{background:var(--bg-tertiary);padding:2px 6px;border-radius:4px;font-size:13px}.step-tip{display:flex;align-items:flex-start;gap:10px;background:var(--bg-tertiary);padding:12px 16px;border-radius:8px;margin-bottom:24px;text-align:left}.step-tip svg{flex-shrink:0;color:var(--accent);margin-top:2px}.step-tip span{font-size:13px;color:var(--text-secondary);line-height:1.4}.step-tip.warning svg{color:#f59e0b}.source-options{display:flex;flex-direction:column;gap:12px;margin-top:24px}.source-option{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--bg-tertiary);border:2px solid rgba(0,0,0,0);border-radius:12px;cursor:pointer;transition:all .2s;text-align:left}.source-option:hover{background:var(--bg-hover);border-color:var(--accent)}.source-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.source-icon svg{width:28px;height:28px}.source-icon.spotify{background:#1db954;color:#000}.source-icon.deezer{background:linear-gradient(135deg, #ff0092, #a238ff);color:#fff}.source-icon.youtube{background:red;color:#fff}.source-info{display:flex;flex-direction:column;gap:2px}.source-name{font-size:16px;font-weight:600;color:var(--text-primary)}.source-method{font-size:13px;color:var(--text-muted)}.step-icon.spotify-color{color:#1db954}.step-icon.youtube-color{color:red}.step-icon.deezer-color{color:#a238ff}.import-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:24px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;border:none;text-decoration:none}.import-btn.primary{background:var(--accent);color:#000}.import-btn.primary:hover{background:var(--accent-hover);transform:scale(1.02)}.import-btn.primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.import-btn.secondary{background:var(--bg-tertiary);color:var(--text-primary)}.import-btn.secondary:hover{background:var(--bg-hover)}.import-btn.text{background:rgba(0,0,0,0);color:var(--text-secondary)}.import-btn.text:hover{color:var(--text-primary)}.step-buttons{display:flex;gap:12px;justify-content:center}.drop-zone{border:2px dashed var(--border-color);border-radius:12px;padding:40px 20px;margin-bottom:20px;cursor:pointer;transition:all .2s}.drop-zone:hover{border-color:var(--accent);background:rgba(29,185,84,.05)}.drop-zone svg{color:var(--text-muted);margin-bottom:12px}.drop-zone p{font-size:16px;color:var(--text-primary);margin-bottom:4px}.drop-zone span{font-size:13px;color:var(--text-muted)}.files-list{background:var(--bg-tertiary);border-radius:8px;padding:8px;margin-bottom:24px;max-height:200px;overflow-y:auto}.file-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:6px}.file-item:hover{background:var(--bg-hover)}.file-item svg{color:var(--accent);flex-shrink:0}.file-item span{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.file-remove-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition)}.file-item:hover .file-remove-btn{opacity:1}.file-remove-btn:hover{color:var(--error);background:rgba(233,20,41,.1)}.results-list{background:var(--bg-tertiary);border-radius:8px;padding:8px;margin-bottom:24px;max-height:250px;overflow-y:auto}.result-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:6px}.result-item.success svg{color:var(--accent)}.result-item.error svg{color:#ef4444}.result-name{flex:1;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-count{font-size:12px;color:var(--text-muted)}.result-error{font-size:12px;color:#ef4444}.import-error{display:flex;align-items:center;gap:10px;background:rgba(239,68,68,.15);color:#ef4444;padding:12px 16px;border-radius:8px;margin-bottom:20px;font-size:14px}.spinner-small{width:16px;height:16px;border:2px solid rgba(0,0,0,.2);border-top-color:#000;border-radius:50%;animation:spin .8s linear infinite}.spinner-medium{width:40px;height:40px;border:3px solid var(--bg-tertiary);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.drop-zone.extracting{pointer-events:none;opacity:.8}@media(max-width: 768px){.import-modal{max-height:100vh;border-radius:0;height:100%}.import-steps{transform:scale(0.9)}.step-list{padding-left:20px}}@media(max-width: 768px){.admin-page .page-title{font-size:1.5rem;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.admin-page .page-title svg{width:24px;height:24px;flex-shrink:0}.users-table.responsive-table-stack td:first-child{flex-direction:column;align-items:stretch;text-align:left}.users-table.responsive-table-stack td:first-child::before{content:none}.users-table.responsive-table-stack td:first-child .user-cell-content{justify-content:flex-start;gap:12px}.users-table.responsive-table-stack td:first-child .user-info{align-items:flex-start;text-align:left}.users-table.responsive-table-stack td:nth-child(4){flex-wrap:wrap;align-items:flex-end}.users-table.responsive-table-stack td:nth-child(4) .status-badge+span{flex-basis:100%;text-align:right;margin-left:0 !important}.users-table.responsive-table-stack .actions-cell .btn-icon{min-width:40px;min-height:40px}}.dl-progress-wrap{display:flex;align-items:center;gap:8px;margin-top:4px;min-width:140px}.dl-progress-bar{position:relative;flex:1;height:6px;background:var(--bg-tertiary);border-radius:3px;overflow:hidden}.dl-progress-fill{position:absolute;inset:0;background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff));transition:width .25s ease;width:0%;border-radius:3px}.dl-progress-pct{font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-secondary);min-width:32px;text-align:right}.stats-page{padding:24px;max-width:1100px;margin:0 auto}.stats-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:24px}.stats-header .page-title{display:flex;align-items:center;gap:12px;font-size:1.75rem;font-weight:700;margin:0}.stats-header .page-title svg{width:28px;height:28px;color:var(--accent)}.stats-period-tabs{display:inline-flex;background:var(--bg-secondary);border-radius:999px;padding:4px;gap:4px}.stats-period-tab{background:rgba(0,0,0,0);border:none;color:var(--text-secondary);padding:8px 18px;border-radius:999px;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition)}.stats-period-tab:hover{color:var(--text-primary)}.stats-period-tab.active{background:var(--accent);color:#000}.stats-hero{background:linear-gradient(135deg, rgba(29, 185, 84, 0.18), rgba(29, 185, 84, 0.04));border-radius:18px;padding:32px;margin-bottom:24px;position:relative}.stats-hero-title{font-size:2rem;font-weight:800;line-height:1.2;margin:0 0 8px 0}.stats-hero-sub{color:var(--text-secondary);font-size:1rem;margin:0}.stats-streak-badge{display:inline-block;margin-top:16px;padding:6px 14px;background:rgba(255,165,0,.18);color:#ffb73d;border-radius:999px;font-weight:700;font-size:.9rem}.stats-section{margin-bottom:32px}.stats-section-title{font-size:1.2rem;font-weight:700;margin:0 0 16px 0}.stats-track-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}.stats-track-row{display:grid;grid-template-columns:32px 48px 1fr auto;align-items:center;gap:14px;padding:8px 12px;border-radius:8px;background:var(--bg-secondary);transition:background var(--transition)}.stats-track-row:hover{background:var(--bg-tertiary)}.stats-rank{font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums;text-align:right}.stats-track-img,.stats-album-img{border-radius:6px;object-fit:cover}.stats-track-img{width:48px;height:48px}.stats-track-meta{display:flex;flex-direction:column;min-width:0}.stats-track-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stats-track-artist{color:var(--text-secondary);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stats-track-count,.stats-artist-count,.stats-album-count{color:var(--text-secondary);font-size:.85rem;white-space:nowrap}.stats-artist-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));gap:16px}.stats-artist-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}.stats-artist-img{width:100%;aspect-ratio:1/1;border-radius:50%;object-fit:cover;background:var(--bg-secondary)}.stats-artist-name{font-weight:600;font-size:.95rem;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stats-album-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));gap:16px}.stats-album-card{display:flex;flex-direction:column;gap:8px}.stats-album-img{width:100%;aspect-ratio:1/1;border-radius:8px;background:var(--bg-secondary)}.stats-album-meta{display:flex;flex-direction:column;min-width:0}.stats-album-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stats-album-artist{color:var(--text-secondary);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stats-heatmap{display:flex;align-items:stretch;gap:6px;height:160px;padding:12px;background:var(--bg-secondary);border-radius:12px}.stats-heatmap-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}.stats-heatmap-bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}.stats-heatmap-bar{width:100%;min-height:2px;background:linear-gradient(180deg, var(--accent), rgba(29, 185, 84, 0.4));border-radius:4px 4px 0 0;transition:height var(--transition)}.stats-heatmap-label{font-size:.7rem;color:var(--text-secondary);white-space:nowrap}.stats-img-placeholder{background:var(--bg-tertiary)}.sync-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);z-index:1500;background:var(--bg-secondary);border:1px solid var(--accent);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:16px;box-shadow:0 8px 24px rgba(0,0,0,.4);max-width:calc(100vw - 32px)}.sync-toast .sync-toast-message{font-size:.9rem;color:var(--text-primary)}.sync-toast .sync-toast-actions{display:flex;gap:8px}.sync-toast button{padding:6px 14px;border-radius:999px;border:none;font-weight:600;cursor:pointer;font-size:.85rem;transition:var(--transition)}.sync-toast .sync-yes{background:var(--accent);color:#000}.sync-toast .sync-yes:hover{background:var(--accent-hover)}.sync-toast .sync-no{background:var(--bg-tertiary);color:var(--text-primary)}.sync-toast .sync-no:hover{background:var(--bg-highlight)}@media(max-width: 768px){.stats-page{padding:16px}.stats-hero{padding:24px}.stats-hero-title{font-size:1.4rem}.stats-heatmap{height:120px}.stats-heatmap-label{font-size:.6rem}}.admin-page{padding:24px;max-width:1000px;margin:0 auto}.admin-tabs{display:flex;gap:12px;margin-bottom:24px}.admin-tab{background:var(--bg-tertiary);border:1px solid var(--border-subtle);color:var(--text-primary);padding:12px 28px;font-size:15px;font-weight:600;cursor:pointer;border-radius:6px;transition:all var(--transition)}.admin-tab:hover{background:var(--bg-hover);border-color:var(--text-muted)}.admin-tab.active{background:var(--accent);border-color:var(--accent);color:#000}.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.admin-header h1{font-size:2rem;font-weight:700}.help-btn,.admin-btn{background:rgba(0,0,0,0);border:none;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.help-btn:hover,.admin-btn:hover{color:var(--text-primary);background:var(--bg-tertiary)}.help-btn svg,.admin-btn svg{width:20px;height:20px}.users-table{background:var(--bg-secondary);border-radius:var(--border-radius);overflow:hidden}.users-table table{width:100%;border-collapse:collapse}.users-table th,.users-table td{padding:16px;text-align:left;border-bottom:1px solid var(--bg-tertiary)}.users-table th{background:var(--bg-tertiary);color:var(--text-secondary);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}.users-table tr:last-child td{border-bottom:none}.users-table tr:hover td{background:var(--bg-tertiary)}.user-cell-content{display:flex;align-items:center;gap:12px}.user-avatar{width:40px;height:40px;background:var(--bg-tertiary);border-radius:50%;display:flex;align-items:center;justify-content:center}.user-avatar svg{width:20px;height:20px;color:var(--text-secondary)}.user-info{display:flex;flex-direction:column}.user-info .username{font-weight:500}.user-info .email{font-size:.85rem;color:var(--text-secondary)}.role-badge{display:inline-block;padding:4px 8px;border-radius:4px;font-size:.75rem;font-weight:600;text-transform:uppercase}.role-badge.admin{background:var(--accent);color:#000}.role-badge.user{background:var(--bg-tertiary);color:var(--text-secondary)}.date-cell{color:var(--text-secondary);font-size:.9rem}.actions-cell{display:inline flex;gap:.5rem;justify-content:flex-end}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal{background:var(--bg-secondary);border-radius:var(--border-radius);width:100%;max-width:400px;max-height:90vh;display:flex;flex-direction:column;animation:modalScale .2s ease-out}@keyframes modalScale{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}.modal-small{max-width:350px}.modal-medium{max-width:450px}.modal-large{max-width:1000px}.modal-fullscreen{max-width:100%;max-height:100%;height:100%;border-radius:0}.modal-header{display:flex;align-items:center;padding:20px 24px;border-bottom:1px solid var(--bg-tertiary);flex-shrink:0}.modal-header h2{font-size:1.25rem;font-weight:600;flex:1;margin:0}.modal-back,.modal-close{background:rgba(0,0,0,0);border:none;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.modal-back{margin-right:12px;margin-left:-8px}.modal-close{margin-left:12px;margin-right:-8px}.modal-back:hover,.modal-close:hover{color:var(--text-primary);background:var(--bg-tertiary)}.modal-body{padding:24px;overflow-y:auto;flex:1}.modal-body p{color:var(--text-secondary);margin-bottom:16px}.modal-footer{padding:16px 24px;border-top:1px solid var(--bg-tertiary);flex-shrink:0}.modal-actions{display:flex;gap:12px;justify-content:flex-end}.warning-text{color:var(--error) !important;font-size:.9rem}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-size:.9rem;color:var(--text-secondary)}.form-group input,.form-group select{width:100%;padding:12px;background:var(--bg-tertiary);border:1px solid var(--bg-highlight);border-radius:var(--border-radius);color:var(--text-primary);font-size:1rem}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--accent)}.form-group select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}.select-small{appearance:none;padding:8px 32px 8px 12px;background:var(--bg-primary);border:2px solid var(--text-secondary);border-radius:var(--border-radius);color:var(--text-primary);font-size:.85rem;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;min-width:80px;transition:var(--transition)}.select-small:hover{border-color:var(--text-primary)}.select-small:focus{outline:none;border-color:var(--accent)}.select-small option{background:var(--bg-secondary);color:var(--text-primary);padding:8px}.btn{padding:10px 20px;border-radius:var(--border-radius);font-size:.9rem;font-weight:600;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:8px;transition:var(--transition)}.btn svg{width:16px;height:16px}.btn-primary{background:var(--accent);color:#000}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary)}.btn-secondary:hover{background:var(--bg-highlight)}.btn-danger{background:var(--error);color:#fff}.btn-danger:hover{background:#ff2442}.btn-icon{background:rgba(0,0,0,0);border:none;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.btn-icon:hover{color:var(--text-primary);background:var(--bg-tertiary)}.btn-icon.btn-danger{background:rgba(0,0,0,0)}.btn-icon.btn-danger:hover{color:var(--error);background:rgba(233,20,41,.1)}.btn-icon svg{width:18px;height:18px}.error-message{background:rgba(233,20,41,.1);border:1px solid var(--error);color:var(--error);padding:12px 16px;border-radius:var(--border-radius);margin-bottom:16px}.loading{text-align:center;padding:40px;color:var(--text-secondary)}.success-message{background:rgba(29,185,84,.1);border:1px solid var(--accent);color:var(--accent);padding:12px 16px;border-radius:var(--border-radius);margin-bottom:16px}.warning-text{color:var(--text-secondary);font-size:13px;margin-top:8px}.admin-section{background:var(--bg-secondary);border-radius:var(--border-radius);padding:24px;margin-bottom:24px}.admin-section .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.admin-section .section-title{display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:600;margin:0 0 12px 0}.admin-section .section-title svg{width:22px;height:22px;color:var(--accent)}.settings-list{display:flex;flex-direction:column;gap:16px}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--bg-tertiary);border-radius:var(--border-radius)}.setting-info{display:flex;flex-direction:column;gap:4px}.setting-label{font-weight:600;color:var(--text-primary)}.setting-description{font-size:13px;color:var(--text-secondary)}.switch{--color-on: var(--accent);--color-off: #b0b0b0;--color-circle: white;--height: 1.5em;--width: 2.6em;--gap: 0.2em;--circle-size: calc(var(--height) - var(--gap) * 2);--position: 0;appearance:none;-webkit-appearance:none;display:inline-block;width:var(--width);height:var(--height);border-radius:calc(var(--height)*2);background-color:var(--color-off);transition:background-color .3s ease-in-out;cursor:pointer;padding:var(--gap);vertical-align:middle;flex-shrink:0}.switch::after{display:block;content:"";width:var(--circle-size);height:var(--circle-size);border-radius:50%;background-color:var(--color-circle);transition:transform .3s;transform:translateX(var(--position));box-shadow:0 0 .2em rgba(0,0,0,.2)}.switch:checked{background-color:var(--color-on);--position: calc(var(--width) - var(--height))}.switch--small{font-size:.7em}.status-badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;text-transform:uppercase}.status-badge.active{background:rgba(29,185,84,.15);color:var(--accent)}.status-badge.inactive{background:hsla(0,0%,100%,.1);color:var(--text-secondary)}.password-display{background:var(--bg-tertiary);padding:16px;border-radius:var(--border-radius);margin:16px 0;text-align:center}.password-display code{font-size:1.25rem;font-family:"SF Mono",Monaco,"Consolas",monospace;color:var(--accent);letter-spacing:2px}@media(max-width: 768px){.admin-page{padding:16px}.admin-header{flex-direction:column;align-items:flex-start;gap:16px}.users-table{overflow-x:auto}.users-table table{min-width:500px}.user-cell-content{min-width:150px}}.onboarding-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(10px);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .3s ease}.onboarding-modal{background:var(--bg-secondary);border-radius:16px;max-width:500px;width:100%;position:relative;animation:slideUp .3s ease}.onboarding-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:8px;border-radius:50%;transition:var(--transition)}.onboarding-close:hover{background:var(--bg-hover);color:var(--text-primary)}.onboarding-header{text-align:center;padding:40px 32px 24px}.onboarding-icon{width:80px;height:80px;background:linear-gradient(135deg, var(--accent), #1ed760);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:#000}.onboarding-header h2{font-size:1.5rem;margin-bottom:8px;color:var(--text-primary)}.onboarding-header p{color:var(--text-muted);font-size:.95rem}.onboarding-options{padding:0 24px}.onboarding-option{width:100%;display:flex;align-items:center;gap:16px;padding:16px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;margin-bottom:12px;cursor:pointer;transition:var(--transition);text-align:left}.onboarding-option:hover{background:var(--bg-hover);border-color:var(--accent)}.option-icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.option-icon.import{background:linear-gradient(135deg, #667eea, #764ba2);color:#fff}.option-icon.mobile{background:linear-gradient(135deg, #11998e, #38ef7d);color:#fff}.option-content{flex:1}.option-content h3{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:4px}.option-content p{font-size:.85rem;color:var(--text-muted);line-height:1.4}.option-arrow{color:var(--text-muted);flex-shrink:0}.onboarding-skip{width:100%;padding:16px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.9rem;transition:var(--transition)}.onboarding-skip:hover{color:var(--text-primary)}.mobile-apps-overlay{position:fixed;inset:0;background:var(--bg-primary);z-index:2001;overflow-y:auto;animation:fadeIn .3s ease}.mobile-apps-modal{min-height:100%;display:flex;flex-direction:column}.mobile-apps-header{position:sticky;top:0;background:var(--bg-primary);border-bottom:1px solid var(--border);padding:16px 24px;display:flex;align-items:center;gap:16px;z-index:10}.mobile-apps-back{background:none;border:none;color:var(--text-primary);cursor:pointer;padding:8px;margin:-8px;border-radius:50%;transition:var(--transition)}.mobile-apps-back:hover{background:var(--bg-hover)}.mobile-apps-header h2{font-size:1.25rem;font-weight:600}.mobile-apps-content{flex:1;padding:24px;max-width:600px;margin:0 auto;width:100%}.mobile-apps-content section{margin-bottom:32px}.mobile-apps-content h3{font-size:1.1rem;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}.mobile-apps-content h3 svg{color:#3ddc84}.config-section{background:var(--bg-secondary);border-radius:12px;padding:20px}.config-section>p{color:var(--text-muted);margin-bottom:16px;font-size:.9rem}.config-fields{display:flex;flex-direction:column;gap:12px}.config-field{display:flex;flex-direction:column;gap:6px}.config-field label{font-size:.85rem;color:var(--text-muted)}.config-value-wrapper{display:flex;gap:8px}.config-value{flex:1;background:var(--bg-elevated);padding:12px;border-radius:8px;font-family:"SF Mono",Monaco,monospace;font-size:.9rem;color:var(--accent);word-break:break-all}.config-value.config-placeholder{color:var(--text-muted);font-style:italic}.copy-btn{background:var(--bg-elevated);border:none;padding:12px;border-radius:8px;cursor:pointer;color:var(--text-muted);transition:var(--transition)}.copy-btn:hover{background:var(--bg-hover);color:var(--accent)}.config-tip{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:12px;background:rgba(29,185,84,.1);border-radius:8px;font-size:.85rem;color:var(--text-secondary)}.config-tip svg{color:var(--accent);flex-shrink:0;margin-top:2px}.apps-section h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:12px}.apps-category{margin-bottom:20px}.apps-list{display:flex;flex-direction:column;gap:8px}.app-card{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;text-decoration:none;transition:var(--transition)}.app-card:hover{background:var(--bg-hover);border-color:var(--accent)}.app-card.premium{border-color:gold}.app-card.premium:hover{border-color:gold;box-shadow:0 0 20px rgba(255,215,0,.2)}.app-icon{font-size:1.5rem;width:40px;text-align:center}.app-info{flex:1}.app-name{display:block;font-weight:600;color:var(--text-primary);margin-bottom:2px}.app-desc{font-size:.85rem;color:var(--text-muted)}.app-link{color:var(--text-muted)}.setup-section{background:var(--bg-secondary);border-radius:12px;padding:20px}.setup-steps{list-style:none;padding:0;margin:0}.setup-steps li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.setup-steps li:last-child{border-bottom:none}.step-number{width:28px;height:28px;background:var(--accent);color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem;flex-shrink:0}.setup-steps li span:last-child{color:var(--text-secondary);line-height:1.5;padding-top:3px}.setup-steps code{background:var(--bg-elevated);padding:2px 6px;border-radius:4px;font-family:"SF Mono",Monaco,monospace;font-size:.85rem;color:var(--accent)}.mobile-apps-footer{position:sticky;bottom:0;background:var(--bg-primary);border-top:1px solid var(--border);padding:16px 24px}.btn-done{width:100%;max-width:600px;margin:0 auto;display:block;padding:14px 24px;background:var(--accent);color:#000;font-weight:600;font-size:1rem;border:none;border-radius:24px;cursor:pointer;transition:var(--transition)}.btn-done:hover{background:var(--accent-hover)}@media(max-width: 768px){.onboarding-modal{margin:0;max-width:none;border-radius:0;min-height:100vh}.onboarding-header{padding:60px 24px 24px}.mobile-apps-content{padding:16px}}.mobile-menu-btn{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--text-primary);transition:var(--transition)}.mobile-menu-btn:hover{color:var(--accent)}.mobile-menu-btn svg{width:24px;height:24px}.sidebar-close-btn{display:none;position:absolute;top:24px;right:12px;background:none;border:none;padding:8px;cursor:pointer;color:var(--text-secondary);transition:var(--transition);z-index:10}.sidebar-close-btn:hover{color:var(--text-primary)}.sidebar-close-btn svg{width:20px;height:20px}@media(max-width: 768px){.mobile-menu-btn{display:flex;align-items:center;justify-content:center}.sidebar{position:fixed;top:0;left:-240px;height:100vh;z-index:1000;transition:left .3s ease}.sidebar.sidebar-open{left:0}.sidebar.sidebar-open::before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:-1}.sidebar-close-btn{display:block}}.mobile-menu-btn{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--text-primary);transition:var(--transition)}.mobile-menu-btn:hover{color:var(--accent)}.mobile-menu-btn svg{width:24px;height:24px}.sidebar-close-btn{display:none;position:absolute;top:24px;right:12px;background:none;border:none;padding:8px;cursor:pointer;color:var(--text-secondary);transition:var(--transition);z-index:10}.sidebar-close-btn:hover{color:var(--text-primary)}.sidebar-close-btn svg{width:20px;height:20px}.sidebar-backdrop{display:none}@media(max-width: 768px){.mobile-menu-btn{display:flex;align-items:center;justify-content:center}.sidebar{position:fixed;top:0;left:-240px;height:100vh;z-index:1001;transition:left .3s ease;box-shadow:2px 0 8px rgba(0,0,0,.3)}.sidebar.sidebar-open{display:flex;left:0}.sidebar-backdrop{display:block;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1000;animation:fadeIn .3s ease}.sidebar-close-btn{display:block}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.admin-section-intro{color:var(--text-secondary);font-size:14px;margin-bottom:20px;max-width:720px}.integration-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:8px;padding:18px 20px;margin-bottom:16px}.integration-header{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}.integration-title{font-size:16px;font-weight:700}.integration-badge{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}.integration-badge.ok{color:#1db954;background:rgba(29,185,84,.12)}.integration-badge.warn{color:#e0a106;background:rgba(224,161,6,.14)}.integration-restart{font-size:12px;color:var(--text-muted);font-style:italic}.integration-field{margin-bottom:12px}.integration-field-label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;text-transform:capitalize}.integration-required{color:var(--error)}.integration-source{margin-left:8px;font-size:11px;font-weight:500;text-transform:none;color:var(--text-muted)}.integration-source.admin{color:var(--accent)}.integration-field-row{display:flex;gap:8px;align-items:center}.integration-input{flex:1;background:var(--bg-tertiary);border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:6px;padding:9px 12px;font-size:14px}.integration-input:focus{outline:none;border-color:var(--accent)}.integration-clear{background:rgba(0,0,0,0);border:1px solid var(--border-subtle);color:var(--text-muted);border-radius:6px;width:36px;height:36px;cursor:pointer;transition:all var(--transition)}.integration-clear:hover{color:var(--error);border-color:var(--error)}.integration-save{margin-top:8px}