:root{--bg: #0f0f14;--bg-nav: #181820;--bg-surface: #1c1c28;--bg-raised: #232334;--bg-hover: rgba(255,255,255,.055);--bg-active: rgba(130,110,255,.13);--accent: #8c72ff;--accent-dim: rgba(140,114,255,.18);--accent-glow: rgba(140,114,255,.35);--pink: #d966a8;--grad: linear-gradient(135deg, var(--accent), var(--pink));--text: #eeeeff;--text2: #9591bb;--text3: #514d72;--red: #f05070;--green: #3dd68c;--yt: #ff4545;--sp: #1ed760;--nav-w: 240px;--player-h: 72px;--topbar-h: 0px;--header-h: 56px;--r: 10px;--r-sm: 6px;--r-pill:99px;--ease: cubic-bezier(.4,0,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);--t: .22s var(--ease)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{height:100%;overflow:hidden;-webkit-font-smoothing:antialiased}body{height:100vh;height:100dvh;font-family:Inter,sans-serif;background:var(--bg);color:var(--text);overflow:hidden;display:grid;grid-template-columns:var(--nav-w) 1fr;grid-template-rows:1fr var(--player-h);grid-template-areas:"sidebar main" "player  player"}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-raised);border-radius:3px}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.mobile-topbar{display:none;align-items:center;gap:10px;padding:0 14px;height:var(--topbar-h);background:var(--bg-nav);border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0;position:relative;z-index:10}.mobile-logo{font-family:Cormorant Garamond,serif;font-size:16px;font-weight:600;letter-spacing:1.5px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;flex:1}#mobile-menu-btn{background:none;border:none;cursor:pointer;color:var(--text2);width:40px;height:40px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--t)}#mobile-menu-btn:hover{background:var(--bg-hover);color:var(--text)}#mobile-menu-btn svg{width:20px;height:20px}.mobile-search-bar{display:none;gap:8px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.04);flex-shrink:0;background:var(--bg)}.sidebar-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:499}.sidebar-overlay.visible,.sidebar-overlay.open{display:block}#sidebar{grid-area:sidebar;background:var(--bg-nav);border-right:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;overflow:hidden;position:relative}#sidebar:after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}.sidebar-logo{padding:22px 18px 16px;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0}.sidebar-logo h1{font-family:Cormorant Garamond,serif;font-size:20px;font-weight:600;letter-spacing:2px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}.sidebar-logo p{font-size:9px;color:var(--text3);letter-spacing:2px;text-transform:uppercase;margin-top:4px;font-weight:400}.auth-section{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0}.auth-user{display:flex;align-items:center;gap:9px}.auth-avatar{width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.auth-name{font-size:12px;color:var(--text2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-actions{display:flex;gap:5px}.sidebar-nav{padding:8px 10px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.04)}.nav-btn{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);cursor:pointer;color:var(--text2);font-size:13px;font-weight:500;transition:var(--t);-webkit-user-select:none;user-select:none;position:relative}.nav-btn svg{width:17px;height:17px;flex-shrink:0;opacity:.75}.nav-btn:hover{background:var(--bg-hover);color:var(--text)}.nav-btn.active{background:var(--bg-active);color:var(--accent)}.nav-btn.active:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;border-radius:0 2px 2px 0;background:var(--accent)}.nav-btn.active svg{opacity:1}.playlists-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 7px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);font-weight:600}.playlists-header button{background:var(--accent-dim);border:none;cursor:pointer;color:var(--accent);width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;transition:var(--t)}.playlists-header button:hover{background:var(--accent-glow)}#playlists-list{overflow-y:auto;flex:1;padding:0 8px 12px}.playlist-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;color:var(--text2);font-size:13px;transition:var(--t);-webkit-user-select:none;user-select:none}.playlist-item:hover{background:var(--bg-hover);color:var(--text)}.playlist-item.active{color:var(--accent);background:var(--bg-active)}.playlist-item .pl-icon{font-size:14px}.playlist-item .pl-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-item .pl-count{font-size:10px;color:var(--text3)}.pl-actions{display:flex;gap:2px;opacity:0;transition:opacity var(--t)}.playlist-item:hover .pl-actions{opacity:1}.pl-act-btn{background:none;border:none;cursor:pointer;color:var(--text3);font-size:12px;padding:3px 6px;border-radius:4px;transition:var(--t)}.pl-act-btn:hover{background:var(--bg-raised);color:var(--text)}.pl-act-btn.del:hover{color:var(--red)}#main{grid-area:main;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}.main-header{height:var(--header-h);padding:0 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0;min-width:0}.main-header h2{font-family:Cormorant Garamond,serif;font-size:20px;font-weight:600;color:var(--text);white-space:nowrap;flex-shrink:0}.main-header-actions{display:flex;gap:6px;align-items:center;flex-shrink:0;margin-left:auto}.mobile-search-bar{display:none}.search-trigger{flex:1;max-width:320px;min-width:0;display:flex;align-items:center;gap:8px;background:var(--bg-surface);border:1px solid rgba(140,114,255,.12);border-radius:var(--r-pill);padding:7px 14px;cursor:pointer;color:var(--text3);font-size:12.5px;font-family:Inter,sans-serif;transition:var(--t)}.search-trigger:hover{border-color:#8c72ff52;color:var(--text2)}.search-trigger svg{flex-shrink:0}.search-trigger>span:not(.st-kbd){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.search-trigger .st-kbd{margin-left:auto;display:flex;gap:3px;flex-shrink:0}.st-key{font-size:9px;padding:1px 5px;background:var(--bg-raised);border:1px solid rgba(255,255,255,.06);border-radius:4px;color:var(--text3)}.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 15px;border-radius:var(--r-pill);font-size:12.5px;font-family:Inter,sans-serif;font-weight:500;cursor:pointer;border:none;transition:var(--t);-webkit-user-select:none;user-select:none;white-space:nowrap}.btn-gold{background:var(--grad);color:#fff;box-shadow:0 3px 12px var(--accent-glow)}.btn-gold:hover{transform:translateY(-1px);box-shadow:0 5px 18px var(--accent-glow)}.btn-ghost{background:var(--bg-raised);color:var(--text2);border:1px solid rgba(255,255,255,.07)}.btn-ghost:hover{background:var(--bg-hover);color:var(--text)}.btn-sm{padding:5px 11px;font-size:11.5px}.header-signin-btn{display:none}#add-panel{padding:12px 20px;background:var(--bg-nav);border-bottom:1px solid rgba(255,255,255,.04);flex-shrink:0;display:none}#add-panel.open{display:block}.add-form{display:flex;gap:8px;flex-wrap:wrap}.add-form input[type=text]{flex:1;min-width:160px;background:var(--bg-surface);border:1px solid rgba(140,114,255,.15);color:var(--text);font-family:Inter,sans-serif;font-size:13px;padding:8px 13px;border-radius:var(--r-sm);outline:none;transition:var(--t)}.add-form input[type=text]:focus{border-color:var(--accent)}.add-form input::placeholder{color:var(--text3)}.add-form select{background:var(--bg-surface);border:1px solid rgba(140,114,255,.15);color:var(--text2);font-family:Inter,sans-serif;font-size:13px;padding:8px 13px;border-radius:var(--r-sm);outline:none;cursor:pointer}.hint{font-size:11px;color:var(--text3);margin-top:7px;line-height:1.5}.platform-tags{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}.ptag{font-size:10px;padding:2px 8px;border-radius:var(--r-pill);font-weight:600}.ptag-yt{background:#ff45451a;color:#ff6969;border:1px solid rgba(255,69,69,.2)}.ptag-sp{background:#1ed7601a;color:#1ed760;border:1px solid rgba(30,215,96,.2)}.section-tabs{display:flex;gap:4px;padding:9px 20px;border-bottom:1px solid rgba(255,255,255,.04);flex-shrink:0}.section-tab{padding:5px 14px;border-radius:var(--r-pill);font-size:12px;cursor:pointer;border:none;background:none;color:var(--text3);transition:var(--t);font-family:Inter,sans-serif;font-weight:500}.section-tab:hover{color:var(--text2);background:var(--bg-hover)}.section-tab.active{background:var(--accent-dim);color:var(--accent)}#content-area{flex:1;overflow-y:auto}.track-list{padding:4px 0}.track-row{display:grid;grid-template-columns:36px 44px minmax(0,1fr) auto 50px;align-items:center;gap:10px;padding:6px 20px;cursor:pointer;transition:background var(--t)}.track-row:hover{background:var(--bg-hover)}.track-row.playing{background:var(--bg-active)}.track-row.playing .track-title{color:var(--accent)}.track-num{font-size:12px;color:var(--text3);text-align:center;flex-shrink:0}.track-row.playing .track-num:before{content:"▶";color:var(--accent);font-size:9px}.track-row.playing .track-num-val{display:none}.track-thumb{width:44px;height:44px;border-radius:8px;overflow:hidden;background:var(--bg-raised);flex-shrink:0}.track-thumb img{width:100%;height:100%;object-fit:cover;display:block}.track-thumb .thumb-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text3);background:var(--bg-raised)}.track-info{min-width:0;overflow:hidden}.track-title{font-size:13.5px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-meta{font-size:11px;color:var(--text3);margin-top:2px;display:flex;align-items:center;gap:5px;overflow:hidden}.track-meta>:not(.track-source){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.track-source{font-size:9px;padding:1px 6px;border-radius:var(--r-pill);letter-spacing:.5px;font-weight:700;flex-shrink:0}.src-youtube,.src-ytmusic{background:#ff45451f;color:#ff6969}.src-spotify{background:#1ed7601f;color:#1ed760}.track-actions{display:flex;gap:2px;opacity:0;transition:opacity var(--t);flex-shrink:0}.track-row:hover .track-actions{opacity:1}.track-act-btn{background:none;border:none;cursor:pointer;color:var(--text3);font-size:12px;padding:5px;border-radius:5px;transition:var(--t);min-width:28px;min-height:28px;display:flex;align-items:center;justify-content:center}.track-act-btn:hover{background:var(--bg-raised);color:var(--text)}.track-dur{font-size:11.5px;color:var(--text3);text-align:right;flex-shrink:0;white-space:nowrap;font-variant-numeric:tabular-nums}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 40px;text-align:center;gap:14px}.empty-icon{color:var(--text3)}.empty-state h3{font-family:Cormorant Garamond,serif;font-size:22px;font-weight:400;color:var(--text2)}.empty-state p{font-size:13px;color:var(--text3);max-width:280px;line-height:1.7}#player-bar{grid-area:player;background:var(--bg-nav);border-top:1px solid rgba(255,255,255,.06);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 18px;gap:12px;position:relative;z-index:100;height:var(--player-h);overflow:visible}#progress-bar-wrap{position:absolute;top:-2px;left:0;right:0;height:20px;cursor:pointer;touch-action:none;z-index:10}#progress-track{position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);background:var(--bg-raised);border-radius:3px;transition:height .15s var(--ease)}#progress-bar-wrap:hover #progress-track{height:5px}#progress-bar-fill{position:absolute;left:0;top:50%;height:3px;width:0%;background:var(--grad);border-radius:3px;transform:translateY(-50%);pointer-events:none;transition:width .5s linear,height .15s var(--ease)}#progress-bar-wrap:hover #progress-bar-fill{height:5px}#progress-thumb{position:absolute;top:50%;left:0%;width:13px;height:13px;border-radius:50%;background:#fff;transform:translate(-50%,-50%) scale(0);transition:transform .18s var(--spring),left .5s linear;pointer-events:none;box-shadow:0 1px 6px #00000080}#progress-bar-wrap:hover #progress-thumb{transform:translate(-50%,-50%) scale(1)}.player-now{display:flex;align-items:center;gap:11px;min-width:0;overflow:hidden}.player-thumb{width:46px;height:46px;border-radius:8px;overflow:hidden;background:var(--bg-raised);flex-shrink:0;box-shadow:0 3px 12px #00000073}.player-thumb img{width:100%;height:100%;object-fit:cover;display:block}.player-thumb .thumb-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text3)}.player-track-info{min-width:0;flex:1;overflow:hidden}.player-title{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none;display:block}.player-sub{font-size:11px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.player-heart{background:none;border:none;cursor:pointer;color:var(--text3);padding:6px;border-radius:50%;flex-shrink:0;transition:var(--t);min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center}.player-heart:hover{color:var(--red);background:#f050701f}.player-heart.liked{color:var(--red)}.player-controls{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0}.player-buttons{display:flex;align-items:center;gap:2px}.ctrl-btn{background:none;border:none;cursor:pointer;color:var(--text2);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--t);flex-shrink:0}.ctrl-btn:hover{background:var(--bg-hover);color:var(--text)}.ctrl-btn.active{color:var(--accent)}.ctrl-btn svg{width:18px;height:18px;pointer-events:none}.ctrl-btn-main{width:42px;height:42px;background:var(--grad);color:#fff;border-radius:50%;box-shadow:0 3px 14px var(--accent-glow)}.ctrl-btn-main:hover{transform:scale(1.08);box-shadow:0 5px 20px var(--accent-glow)}.ctrl-btn-main svg{width:20px;height:20px}.player-time{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--text3);width:210px;font-variant-numeric:tabular-nums}.time-bar{flex:1;height:3px;background:var(--bg-raised);border-radius:3px;cursor:pointer;touch-action:none;position:relative}.time-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .5s linear}.player-extras{display:flex;align-items:center;gap:6px;justify-content:flex-end;min-width:0;overflow:hidden}.fade-badge{font-size:9px;padding:3px 8px;border-radius:var(--r-pill);letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:var(--t);border:1px solid var(--text3);color:var(--text3);font-weight:700;-webkit-user-select:none;user-select:none;flex-shrink:0}.fade-badge.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.vol-wrap{display:flex;align-items:center;gap:5px;flex-shrink:0}.vol-btn{background:none;border:none;cursor:pointer;color:var(--text2);min-width:32px;min-height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--t)}.vol-btn:hover{background:var(--bg-hover);color:var(--text)}.vol-btn svg{width:17px;height:17px}.vol-slider{-webkit-appearance:none;width:72px;height:3px;background:var(--bg-raised);border-radius:3px;outline:none;cursor:pointer}.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;transition:transform .15s}.vol-slider::-webkit-slider-thumb:hover{transform:scale(1.35)}.queue-toggle-btn{color:var(--text2)}.queue-toggle-btn svg{width:17px;height:17px}#search-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;background:#0a0a12e6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;padding-top:52px;opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}#search-overlay.open{opacity:1;pointer-events:all}.search-box{width:100%;max-width:640px;padding:0 20px;flex-shrink:0}.search-input-wrap{display:flex;align-items:center;gap:12px;background:var(--bg-nav);border:1px solid rgba(140,114,255,.2);border-radius:16px;padding:12px 16px;box-shadow:0 20px 60px #000000b3;transition:border-color var(--t)}.search-input-wrap:focus-within{border-color:var(--accent)}.search-input-wrap svg{color:var(--text3);flex-shrink:0;width:18px;height:18px}#search-input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:Inter,sans-serif;font-size:16px}#search-input::placeholder{color:var(--text3)}.search-esc{font-size:10px;padding:2px 8px;background:var(--bg-raised);border:1px solid rgba(255,255,255,.07);border-radius:5px;color:var(--text3);cursor:pointer;flex-shrink:0}.search-platform-filters{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.spf-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);font-size:11.5px;cursor:pointer;border:1px solid rgba(255,255,255,.07);background:var(--bg-surface);color:var(--text3);transition:var(--t);font-family:Inter,sans-serif;font-weight:500}.spf-btn:hover{border-color:var(--text3);color:var(--text2)}.spf-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.spf-btn.yt.active{border-color:var(--yt);color:var(--yt);background:#ff454514}.spf-btn.sp.active{border-color:var(--sp);color:var(--sp);background:#1ed76014}.spf-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.dot-all{background:var(--accent)}.dot-yt{background:var(--yt)}.dot-sp{background:var(--sp)}.search-results-wrap{width:100%;max-width:640px;padding:0 20px;margin-top:14px;flex:1;overflow-y:auto}.search-results{background:var(--bg-nav);border-radius:var(--r);border:1px solid rgba(255,255,255,.05);overflow:hidden}.search-section-label{padding:9px 16px 5px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);border-bottom:1px solid rgba(255,255,255,.04);font-weight:600}.sr-item{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;transition:background var(--t);border-bottom:1px solid rgba(255,255,255,.03);min-width:0}.sr-item:last-child{border-bottom:none}.sr-item:hover{background:var(--bg-hover)}.sr-thumb{width:44px;height:44px;border-radius:7px;overflow:hidden;background:var(--bg-raised);flex-shrink:0}.sr-thumb img{width:100%;height:100%;object-fit:cover;display:block}.sr-thumb .thumb-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:18px}.sr-info{flex:1;min-width:0;overflow:hidden}.sr-title{font-size:13.5px;color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sr-sub{font-size:11px;color:var(--text3);margin-top:2px;display:flex;align-items:center;gap:5px;overflow:hidden}.sr-sub>span:not(.sr-badge){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.sr-badge{font-size:9px;padding:1px 6px;border-radius:var(--r-pill);letter-spacing:.5px;flex-shrink:0;font-weight:700}.sr-badge-yt,.sr-badge-ytm{background:#ff45451f;color:#ff6969}.sr-badge-sp{background:#1ed7601f;color:#1ed760}.sr-duration{font-size:11px;color:var(--text3);flex-shrink:0;white-space:nowrap;font-variant-numeric:tabular-nums}.sr-actions{display:flex;gap:4px;flex-shrink:0}.sr-act-btn{background:none;border:none;cursor:pointer;color:var(--text3);padding:5px 8px;border-radius:5px;transition:var(--t);white-space:nowrap;font-size:11.5px;font-family:Inter,sans-serif}.sr-act-btn:hover{background:var(--bg-raised);color:var(--text)}.sr-play-btn{background:var(--grad);color:#fff;border:none;cursor:pointer;padding:5px 13px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600;transition:var(--t);font-family:Inter,sans-serif;white-space:nowrap;box-shadow:0 2px 8px var(--accent-glow)}.sr-play-btn:hover{transform:scale(1.04)}.search-state{padding:40px 20px;text-align:center;color:var(--text3);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:10px}.search-spinner{width:22px;height:22px;border:2px solid var(--bg-raised);border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#queue-panel,#settings-panel{position:fixed;top:0;right:-360px;bottom:var(--player-h);width:340px;background:var(--bg-nav);border-left:1px solid rgba(255,255,255,.06);z-index:500;transition:right .28s var(--ease);display:flex;flex-direction:column;overflow:hidden;box-shadow:-8px 0 40px #00000073}#settings-panel{width:360px;right:-380px;overflow-y:auto;display:block}#queue-panel.open,#settings-panel.open{right:0}.queue-header,.settings-header{padding:17px 16px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.settings-header{position:sticky;top:0;background:var(--bg-nav);z-index:1}.queue-header h3,.settings-header h3{font-family:Cormorant Garamond,serif;font-size:18px;font-weight:600}.close-btn{background:var(--bg-raised);border:none;cursor:pointer;color:var(--text3);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--t)}.close-btn:hover{color:var(--text);background:var(--bg-hover)}#queue-list{overflow-y:auto;flex:1;padding:4px 0}.queue-item{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;transition:background var(--t)}.queue-item:hover{background:var(--bg-hover)}.queue-item.active{background:var(--bg-active)}.queue-item.active .qi-title{color:var(--accent)}.qi-num{width:22px;font-size:11px;color:var(--text3);text-align:center;flex-shrink:0}.qi-info{flex:1;min-width:0}.qi-title{font-size:12.5px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qi-src{font-size:10px;color:var(--text3);margin-top:2px}.qi-del{background:none;border:none;cursor:pointer;color:var(--text3);font-size:13px;padding:3px 6px;border-radius:4px;opacity:0;transition:var(--t)}.queue-item:hover .qi-del{opacity:1}.qi-del:hover{color:var(--red)!important}.settings-section{padding:15px 17px;border-bottom:1px solid rgba(255,255,255,.04)}.settings-section h4{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);margin-bottom:13px;font-weight:700}.setting-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.setting-row label{font-size:13px;color:var(--text2)}.setting-row:last-child{margin-bottom:0}input[type=range].setting-range{-webkit-appearance:none;width:100px;height:4px;background:var(--bg-raised);border-radius:4px;outline:none;cursor:pointer}input[type=range].setting-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer}.toggle{width:40px;height:22px;background:var(--bg-raised);border-radius:11px;position:relative;cursor:pointer;transition:background var(--t)}.toggle.on{background:var(--accent)}.toggle:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--t);box-shadow:0 1px 4px #0000004d}.toggle.on:after{transform:translate(18px)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3000;background:#000000c7;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}.modal-overlay.open{opacity:1;pointer-events:all}.modal{background:var(--bg-nav);border-radius:16px;border:1px solid rgba(140,114,255,.14);padding:26px;width:100%;max-width:440px;transform:translateY(14px) scale(.97);transition:transform .24s var(--spring),opacity .2s;box-shadow:0 28px 80px #000000b3;opacity:0}.modal-overlay.open .modal{transform:translateY(0) scale(1);opacity:1}.modal h3{font-family:Cormorant Garamond,serif;font-size:20px;font-weight:600;margin-bottom:16px;color:var(--accent)}.modal p{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:16px}.modal input{width:100%;background:var(--bg-surface);border:1px solid rgba(140,114,255,.15);color:var(--text);font-family:Inter,sans-serif;font-size:14px;padding:10px 13px;border-radius:var(--r-sm);outline:none;margin-bottom:11px;transition:border-color var(--t)}.modal input:focus{border-color:var(--accent)}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}.share-link-wrap{display:flex;gap:8px;align-items:center;background:var(--bg-surface);border:1px solid rgba(140,114,255,.15);border-radius:var(--r-sm);padding:9px 13px;margin-bottom:15px}.share-link-url{flex:1;font-size:11px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:monospace}.share-btns{display:flex;gap:8px;flex-wrap:wrap}.share-btn{display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r-sm);font-size:12px;cursor:pointer;border:1px solid rgba(255,255,255,.07);background:var(--bg-surface);color:var(--text2);transition:var(--t);font-family:Inter,sans-serif}.share-btn:hover{border-color:var(--accent);color:var(--accent)}.share-info{font-size:11px;color:var(--text3);line-height:1.6;padding:8px 12px;background:var(--accent-dim);border-radius:var(--r-sm)}.playlist-empty-state{padding:16px;text-align:center;color:var(--text3)}.playlist-select-item{padding:11px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s}.playlist-select-item:hover:not(.playlist-select-item--disabled){background:var(--bg-hover)}.playlist-select-item--disabled{opacity:.45;cursor:default}.playlist-select-icon{font-size:18px}.playlist-select-name{flex:1}.playlist-select-meta{font-size:11px;color:var(--text3)}.api-input-wrap{display:flex;flex-direction:column;gap:8px;margin-top:4px}.api-input-row{display:flex;gap:6px}.api-input{flex:1;background:var(--bg-surface);border:1px solid rgba(140,114,255,.15);color:var(--text);font-family:Inter,sans-serif;font-size:11px;padding:7px 10px;border-radius:var(--r-sm);outline:none;transition:var(--t)}.api-input:focus{border-color:var(--accent)}.api-input::placeholder{color:var(--text3)}.api-status{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600}.api-status.ok{color:var(--green);background:#3dd68c1a;border:1px solid rgba(61,214,140,.2)}.api-status.err{color:var(--red);background:#f050701a;border:1px solid rgba(240,80,112,.2)}.api-status.idle{color:var(--text3);background:var(--bg-raised)}.api-note{font-size:10px;color:var(--text3);line-height:1.6;margin-top:4px}.api-note a{color:var(--accent);text-decoration:none}.api-note a:hover{text-decoration:underline}#toast{position:fixed;bottom:calc(var(--player-h) + 14px);left:50%;transform:translate(-50%) translateY(12px);background:var(--bg-nav);border:1px solid rgba(140,114,255,.22);color:var(--text);font-size:13px;font-weight:500;padding:9px 22px;border-radius:var(--r-pill);z-index:9999;opacity:0;transition:all .28s var(--spring);pointer-events:none;white-space:nowrap;box-shadow:0 6px 28px #0000008c}#toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media (max-width: 768px){:root{--topbar-h: 50px;--player-h: 76px}body{grid-template-columns:1fr;grid-template-rows:var(--topbar-h) 1fr var(--player-h);grid-template-areas:"topbar" "main" "player"}.mobile-topbar{display:flex;grid-area:topbar}#sidebar{position:fixed;left:0;top:0;bottom:var(--player-h);width:min(280px,85vw);z-index:500;transform:translate(-100%);transition:transform .28s var(--ease)}#sidebar.mobile-open,#sidebar.open{transform:translate(0)}#main{grid-area:main;min-height:0}.main-header{display:none}.mobile-search-bar{display:flex}.header-signin-btn{display:inline-flex!important}#player-bar{grid-template-columns:1fr auto 1fr;padding:0 10px;gap:6px;align-items:center}.player-now{gap:8px}.player-title{font-size:13px}.player-sub{font-size:10px}.player-extras .fade-badge,.vol-wrap{display:none}#progress-bar-wrap{top:0;height:16px}#progress-track,#progress-bar-fill{height:2px}#progress-bar-wrap:hover #progress-track,#progress-bar-wrap:hover #progress-bar-fill{height:3px}#progress-thumb{width:11px;height:11px}.track-row{grid-template-columns:44px minmax(0,1fr) auto;padding:7px 14px;gap:9px}.track-num,.track-dur{display:none}.track-actions{opacity:1}#queue-panel,#settings-panel{width:100%;right:-100vw;max-width:100%}#add-panel{position:fixed;bottom:var(--player-h);left:0;right:0;border-radius:14px 14px 0 0;z-index:400;max-height:60vh;overflow-y:auto;padding:12px 14px}.add-form{flex-direction:column}#search-overlay{padding-top:10px}.search-results-wrap{padding:0 12px;margin-top:10px}.sr-item{flex-wrap:wrap;padding:10px 12px}.sr-info{flex:1 1 0;min-width:0}.sr-actions{flex:0 0 100%;opacity:1;display:flex;padding-left:56px;gap:6px;flex-wrap:wrap}.sr-act-btn,.sr-play-btn{flex:1;text-align:center;min-height:36px}.queue-item .qi-del,.pl-actions{opacity:1}.modal{max-height:85vh;overflow-y:auto}#toast{bottom:calc(var(--player-h) + 10px)}}@media (max-width: 480px){:root{--player-h: 70px;--topbar-h: 48px}#player-bar{grid-template-columns:minmax(0,1.4fr) auto minmax(0,.6fr);padding:0 8px}.player-thumb{width:38px;height:38px}.player-title{font-size:12px}.player-sub{font-size:9.5px}.ctrl-btn{width:34px;height:34px}.ctrl-btn-main{width:40px;height:40px}.ctrl-btn svg{width:16px;height:16px}.ctrl-btn-main svg{width:18px;height:18px}.player-buttons{gap:1px}.player-time{width:160px;font-size:10px}.player-extras{min-width:0}.queue-toggle-btn,.track-actions{display:none}.track-row:active .track-actions{display:flex}}@media (max-width: 360px){.ctrl-btn{width:32px;height:32px}.ctrl-btn-main{width:38px;height:38px}.player-thumb{width:34px;height:34px}.player-time{display:none}#search-input{font-size:14px}}@media (max-height: 460px) and (orientation: landscape){:root{--player-h: 60px}.player-thumb{width:34px;height:34px}.ctrl-btn-main{width:36px;height:36px}.player-time{display:none}.empty-state{padding:20px}#search-overlay{padding-top:6px}}@media (min-width: 1440px){:root{--nav-w: 280px}.player-time{width:260px}.main-header h2{font-size:22px}.track-row{padding:7px 26px}.player-title{font-size:15px}.player-sub{font-size:12px}}@media (min-width: 2000px){:root{--nav-w: 320px;--player-h: 88px}.ctrl-btn-main{width:52px;height:52px}.player-thumb{width:58px;height:58px}.player-title{font-size:16px}}@supports (padding-bottom: env(safe-area-inset-bottom)){#player-bar{padding-bottom:max(0px,env(safe-area-inset-bottom))}#sidebar{padding-top:env(safe-area-inset-top)}.mobile-topbar{padding-top:env(safe-area-inset-top);height:calc(var(--topbar-h) + env(safe-area-inset-top))}}@media (hover:none) and (pointer:coarse){.track-row{min-height:56px}.nav-btn{padding:12px}.playlist-item{padding:11px 12px}.ctrl-btn{min-width:44px;min-height:44px}.btn{min-height:42px}.track-actions,.pl-actions,.queue-item .qi-del{opacity:1}.track-row:hover:not(:active){background:transparent}}@media (prefers-contrast: high){:root{--bg:#000;--bg-nav:#080808;--text:#fff;--text2:#ccc;--accent:#a090ff}.track-row{border-bottom:1px solid var(--text3)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media print{#player-bar,#sidebar,.mobile-topbar,.sidebar-overlay{display:none!important}body{display:block;background:#fff;color:#000}#main{display:block}}