:root{--wrap:800px;--radius:14px;--card-radius:18px;--title-size:clamp(22px,2.2vw,28px);--artist-size:clamp(16px,1.6vw,18px);--card-pad:14px;--recent-img:130px;--recent-gap:8px;--blob-opacity:.30;--bg1:#07101d;--bg2:#111c31;--bg3:#162640;--text:#edf4ff;--text-soft:#bfd0ea;--muted:#8fa7ca;--title-color:#f6fbff;--accent1:#7fe8ff;--accent2:#6b7dff;--accent3:#8ef4c8;--card-bg:rgba(255,255,255,.055);--card-bg-2:rgba(255,255,255,.035);--panel-bg:rgba(10,16,29,.88);--panel-bg-2:rgba(14,22,38,.92);--popup-bg-1:rgba(10,16,29,.96);--popup-bg-2:rgba(16,24,40,.94);--border:rgba(255,255,255,.10);--border-strong:rgba(255,255,255,.16);--stroke:rgba(255,255,255,.10);--glass-blur:12px;--shadow-card:0 18px 48px rgba(0,0,0,.36);--shadow-card-hover:0 28px 72px rgba(0,0,0,.42);--shadow-cover:0 20px 40px rgba(2,8,20,.48);--shadow-cover-hover:0 28px 58px rgba(2,8,20,.56);--shadow-popup:0 26px 80px rgba(0,0,0,.46);--btn-text:#f5f9ff;--btn-bg:rgba(255,255,255,.05);--btn-bg-hover:rgba(255,255,255,.09);--btn-border:rgba(255,255,255,.12);--play-bg:linear-gradient(135deg,var(--accent1),var(--accent2));--play-icon:#071120;--danger:#ff5a78;--danger-soft:rgba(255,90,120,.14);--focus-ring:rgba(127,232,255,.16);--focus-stroke:rgba(127,232,255,.30);--scroll-track:rgba(255,255,255,.05);--scroll-thumb:rgba(255,255,255,.18);--scroll-thumb-hover:rgba(255,255,255,.28)}html[data-theme="midnight"],body[data-theme="midnight"],[data-theme="midnight"] body{--bg1:#04070d;--bg2:#0d1422;--bg3:#13203a;--text:#edf6ff;--text-soft:#c9d8ec;--muted:#9db2ce;--title-color:#f7fbff;--accent1:#76ffd1;--accent2:#69a5ff;--accent3:#7ee9ff;--card-bg:rgba(255,255,255,.045);--card-bg-2:rgba(255,255,255,.025);--panel-bg:rgba(7,12,22,.90);--panel-bg-2:rgba(11,17,29,.92);--popup-bg-1:rgba(8,13,23,.97);--popup-bg-2:rgba(11,18,31,.95);--border:rgba(255,255,255,.09);--border-strong:rgba(118,255,209,.18);--stroke:rgba(255,255,255,.08);--btn-text:#eef7ff;--btn-bg:rgba(255,255,255,.045);--btn-bg-hover:rgba(255,255,255,.075);--btn-border:rgba(255,255,255,.10);--play-icon:#07151a;--focus-ring:rgba(105,165,255,.16);--focus-stroke:rgba(105,165,255,.30);--shadow-card:0 18px 48px rgba(0,0,0,.42);--shadow-card-hover:0 28px 72px rgba(0,0,0,.52);--shadow-cover:0 20px 40px rgba(0,0,0,.50);--shadow-cover-hover:0 28px 58px rgba(0,0,0,.58);--shadow-popup:0 26px 80px rgba(0,0,0,.52)}html[data-theme="glass"],body[data-theme="glass"],[data-theme="glass"] body{--bg1:#0a1322;--bg2:#18263c;--bg3:#203351;--text:#f4f9ff;--text-soft:#d6e4f4;--muted:#b5c7de;--title-color:#ffffff;--accent1:#98e9ff;--accent2:#a18cff;--accent3:#a8ffdd;--card-bg:rgba(255,255,255,.12);--card-bg-2:rgba(255,255,255,.07);--panel-bg:rgba(20,29,46,.66);--panel-bg-2:rgba(26,37,58,.72);--popup-bg-1:rgba(19,29,46,.78);--popup-bg-2:rgba(24,36,56,.74);--border:rgba(255,255,255,.20);--border-strong:rgba(255,255,255,.28);--stroke:rgba(255,255,255,.16);--glass-blur:18px;--btn-text:#f6fbff;--btn-bg:rgba(255,255,255,.10);--btn-bg-hover:rgba(255,255,255,.16);--btn-border:rgba(255,255,255,.20);--play-icon:#08131f;--focus-ring:rgba(152,233,255,.20);--focus-stroke:rgba(152,233,255,.38);--shadow-card:0 20px 54px rgba(4,10,20,.30);--shadow-card-hover:0 30px 78px rgba(4,10,20,.38);--shadow-cover:0 18px 42px rgba(4,10,20,.38);--shadow-cover-hover:0 30px 62px rgba(4,10,20,.46);--shadow-popup:0 26px 82px rgba(4,10,20,.42)}html[data-theme="light"],body[data-theme="light"],[data-theme="light"] body{--bg1:#edf3fb;--bg2:#dde8f5;--bg3:#cfddee;--text:#17263a;--text-soft:#334760;--muted:#60748f;--title-color:#11233a;--accent1:#1f8fff;--accent2:#4d67ff;--accent3:#27b89a;--card-bg:rgba(255,255,255,.84);--card-bg-2:rgba(255,255,255,.68);--panel-bg:rgba(255,255,255,.92);--panel-bg-2:rgba(245,249,255,.96);--popup-bg-1:rgba(255,255,255,.97);--popup-bg-2:rgba(240,246,255,.98);--border:rgba(17,35,58,.10);--border-strong:rgba(17,35,58,.16);--stroke:rgba(17,35,58,.10);--glass-blur:8px;--btn-text:#17304d;--btn-bg:rgba(17,35,58,.04);--btn-bg-hover:rgba(17,35,58,.08);--btn-border:rgba(17,35,58,.10);--play-bg:linear-gradient(135deg,#198cff,#4663ff);--play-icon:#ffffff;--danger:#e45174;--danger-soft:rgba(228,81,116,.10);--focus-ring:rgba(31,143,255,.16);--focus-stroke:rgba(31,143,255,.30);--shadow-card:0 16px 36px rgba(34,58,94,.12);--shadow-card-hover:0 22px 48px rgba(34,58,94,.16);--shadow-cover:0 14px 30px rgba(34,58,94,.14);--shadow-cover-hover:0 20px 42px rgba(34,58,94,.18);--shadow-popup:0 22px 60px rgba(34,58,94,.18);--scroll-track:rgba(17,35,58,.05);--scroll-thumb:rgba(17,35,58,.18);--scroll-thumb-hover:rgba(17,35,58,.28)}html[data-theme="neo"],body[data-theme="neo"],[data-theme="neo"] body{--bg1:#081013;--bg2:#101c1f;--bg3:#18292c;--text:#eefcf8;--text-soft:#c7ebe2;--muted:#90bdb2;--title-color:#f3fffb;--accent1:#45f3c3;--accent2:#57d0ff;--accent3:#c7ff65;--card-bg:rgba(255,255,255,.05);--card-bg-2:rgba(255,255,255,.03);--panel-bg:rgba(7,18,20,.90);--panel-bg-2:rgba(12,24,26,.92);--popup-bg-1:rgba(9,18,20,.97);--popup-bg-2:rgba(13,25,28,.95);--border:rgba(69,243,195,.14);--border-strong:rgba(69,243,195,.24);--stroke:rgba(255,255,255,.09);--btn-text:#effffb;--btn-bg:rgba(69,243,195,.08);--btn-bg-hover:rgba(69,243,195,.13);--btn-border:rgba(69,243,195,.16);--play-bg:linear-gradient(135deg,#45f3c3,#57d0ff);--play-icon:#06211d;--focus-ring:rgba(69,243,195,.16);--focus-stroke:rgba(69,243,195,.32);--shadow-card:0 18px 48px rgba(0,0,0,.40);--shadow-card-hover:0 28px 72px rgba(0,0,0,.48);--shadow-cover:0 20px 40px rgba(0,0,0,.46);--shadow-cover-hover:0 28px 58px rgba(0,0,0,.54);--shadow-popup:0 26px 80px rgba(0,0,0,.50)}*{box-sizing:border-box}html,body{height:100%}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;min-height:100%;color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:radial-gradient(800px 520px at -10% -20%,rgba(255,255,255,.05),transparent 60%),radial-gradient(700px 520px at 110% 0%,rgba(255,255,255,.04),transparent 58%),linear-gradient(180deg,var(--bg1),var(--bg2) 54%,var(--bg3));background-attachment:fixed;font-size:14px;padding:12px;overflow-x:hidden}body::before,body::after{content:"";position:fixed;z-index:0;pointer-events:none;width:620px;height:620px;filter:blur(90px);opacity:var(--blob-opacity)}body::before{top:-12%;left:-10%;background:radial-gradient(circle,var(--accent2),transparent 58%)}body::after{bottom:-16%;right:-12%;background:radial-gradient(circle,var(--accent1),transparent 58%)}.wrap{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto}.stack{display:grid;gap:12px}.card{position:relative;overflow:hidden;border-radius:var(--card-radius);background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),var(--card-bg);border:1px solid var(--border);backdrop-filter:blur(var(--glass-blur)) saturate(120%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(120%);box-shadow:var(--shadow-card);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:var(--border-strong)}.head{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--stroke)}.head h2{margin:0;font-size:15px;color:var(--text);font-weight:800}.head .actions{margin-left:auto;display:flex;gap:6px}.body{padding:var(--card-pad)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:6px 12px;border-radius:999px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-text);cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}.btn:hover{background:var(--btn-bg-hover);border-color:var(--border-strong)}.btn.icon{min-width:36px;padding-inline:10px}.error{display:none;margin:10px 0;padding:10px 12px;border-radius:10px;background:var(--danger-soft);border:1px solid rgba(255,90,120,.24);color:var(--danger)}.now{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}.coverCol{display:flex;align-items:flex-start;justify-content:flex-start}.cover-300{width:300px;height:300px;object-fit:cover;border-radius:16px;background:var(--panel-bg);box-shadow:var(--shadow-cover);transition:transform .26s ease,box-shadow .26s ease}.cover-300:hover{transform:translateY(-3px) scale(1.015);box-shadow:var(--shadow-cover-hover)}.infoCol{min-width:0}.title{display:block;margin:40px 0 12px;color:var(--title-color);font-size:var(--title-size);font-weight:900;line-height:1.15;letter-spacing:-.02em;white-space:normal;overflow:visible;text-overflow:initial;background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;text-shadow:0 1px 0 rgba(255,255,255,.04);word-break:break-word;overflow-wrap:anywhere;unicode-bidi:plaintext}.artist{margin:0 0 30px;color:var(--muted);font-size:var(--artist-size);font-weight:600}.pills{display:flex;flex-wrap:wrap;gap:20px;margin:6px 0 12px}.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;border:1px solid var(--border);background:var(--card-bg-2);color:var(--text);font-size:14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.pill.heart{cursor:pointer}.pill.heart:hover{border-color:rgba(255,90,120,.28);background:var(--danger-soft)}.pill.heart svg{width:20px;height:20px;fill:none;stroke:var(--danger);stroke-width:2px;transition:fill .18s ease,stroke .18s ease,transform .18s ease}.pill.heart:hover svg{transform:scale(1.05)}.pill.heart.liked svg{fill:var(--danger);stroke:var(--danger)}.controls{display:flex;align-items:center;flex-wrap:wrap;gap:28px;margin-top:35px}.btnPlay{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:var(--play-bg);box-shadow:0 12px 30px rgba(0,0,0,.16);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.btnPlay:hover{transform:scale(1.06);box-shadow:0 16px 38px rgba(0,0,0,.22);filter:saturate(108%)}.btnPlay svg{width:20px;height:20px;fill:var(--play-icon)}.vol{display:flex;align-items:center;gap:10px;color:var(--text-soft)}.vol input[type="range"]{width:130px;accent-color:var(--accent1)}.upnext-wrap{display:flex;align-items:center;gap:12px}.upnext-cover{width:100px;height:100px;object-fit:cover;border-radius:12px;background:var(--panel-bg)}.upnext-text{min-width:0}.upnext-text .t{margin:0 0 4px;color:var(--text);font-weight:800;line-height:1.3}.upnext-text .a{margin:0;color:var(--muted);font-size:13px}.recent-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--recent-gap)}.recent-cell{display:grid;grid-template-rows:auto 1fr;justify-items:center;gap:8px;min-width:0;padding:8px;border-radius:12px;border:1px solid var(--border);background:var(--card-bg-2);text-align:center;transition:transform .18s ease,border-color .18s ease,background .18s ease}.recent-cell:hover{transform:translateY(-2px);border-color:var(--border-strong);background:var(--card-bg)}.recent-cell img{width:var(--recent-img);height:var(--recent-img);object-fit:cover;border-radius:10px;background:var(--panel-bg)}.recent-info{display:flex;flex-direction:column;align-items:center;min-width:0}.recent-info .t{max-width:140px;margin:2px 0;color:var(--text);font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recent-info .a{max-width:135px;margin:0;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lyrics-popup,.about-popup{position:fixed;top:50%;left:50%;z-index:9999;display:none;width:min(420px,calc(100vw - 24px));max-height:70vh;overflow:hidden;border-radius:18px;border:1px solid var(--border-strong);background:linear-gradient(180deg,var(--popup-bg-1),var(--popup-bg-2));backdrop-filter:blur(8px) saturate(100%);-webkit-backdrop-filter:blur(16px) saturate(120%);box-shadow:var(--shadow-popup);transform:translate(-50%,-50%);user-select:none}.lyrics-popup.show,.about-popup.show{display:block}.lyrics-popup-header,.about-popup-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--stroke);background:rgba(255,255,255,.03);touch-action:none}.lyrics-popup-header{cursor:grab}.lyrics-popup.dragging .lyrics-popup-header{cursor:grabbing}.lyrics-popup-title-wrap,.about-popup-title-wrap{display:flex;flex-direction:column;gap:2px;min-width:0}.lyrics-popup-title-wrap strong,.about-popup-title-wrap strong{color:var(--text);font-size:15px;line-height:1.2}.lyrics-popup-subtitle,.about-popup-subtitle{color:var(--muted);font-size:12px;line-height:1.2}.lyrics-close,.about-close{width:34px;height:34px;flex:0 0 auto;border:1px solid var(--btn-border);border-radius:999px;background:var(--btn-bg);color:var(--text);font-size:20px;line-height:1;cursor:pointer}.lyrics-close:hover,.about-close:hover{background:var(--btn-bg-hover);border-color:var(--border-strong)}.lyrics-popup-body,.about-popup-body{max-height:calc(70vh - 58px);overflow:auto;padding:14px 14px 16px;user-select:text}#lyricText{margin:0;color:var(--text);direction:rtl;text-align:center;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;font-size:18px;line-height:1.72;font-weight:700;font-family:inherit;unicode-bidi:plaintext}.about-version{margin:0}.about-version strong{display:block;margin-bottom:8px;color:var(--text);font-size:18px}.about-version span{display:block;color:var(--text-soft);font-size:15px}.context-menu{position:fixed;top:0;left:0;z-index:10001;display:none;min-width:230px;padding:8px;border-radius:16px;border:1px solid var(--border-strong);background:linear-gradient(180deg,var(--popup-bg-1),var(--popup-bg-2));backdrop-filter:blur(8px) saturate(100%);-webkit-backdrop-filter:blur(16px) saturate(120%);box-shadow:var(--shadow-popup);user-select:none}.context-menu.show{display:block}.context-menu-list,.context-submenu ul{list-style:none;margin:0;padding:0}.context-item{position:relative}.context-menu button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}.context-menu button:hover,.context-item:hover>button,.context-menu button:focus-visible{background:var(--btn-bg-hover);outline:none}.context-separator{height:1px;margin:6px 4px;background:var(--stroke)}.context-arrow{color:var(--muted);font-size:12px;line-height:1}.context-submenu{position:absolute;top:0;left:calc(100% + 6px);display:none;min-width:220px;padding:8px;border-radius:16px;border:1px solid var(--border-strong);background:linear-gradient(180deg,var(--popup-bg-1),var(--popup-bg-2));backdrop-filter:blur(8px) saturate(100%);-webkit-backdrop-filter:blur(16px) saturate(120%);box-shadow:var(--shadow-popup)}.has-submenu:hover>.context-submenu,.has-submenu:focus-within>.context-submenu{display:block}.context-menu.submenu-left .context-submenu{left:auto;right:calc(100% + 6px)}.btn:focus,.btnPlay:focus,.pill:focus,.lyrics-close:focus,.about-close:focus,.context-menu button:focus{outline:0;box-shadow:0 0 0 4px var(--focus-ring);border-color:var(--focus-stroke)}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:var(--scroll-track)}*::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:999px}*::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}@media (max-width:800px){.now{grid-template-columns:1fr;gap:14px}.coverCol{justify-content:center}.cover-300{width:100%;height:auto;aspect-ratio:1/1}.infoCol{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}.title,.artist{width:100%;text-align:center}.title{margin:4px 0 8px;font-size:clamp(18px,6vw,24px);line-height:1.14;letter-spacing:-.02em}.artist{margin:0 0 14px;font-size:clamp(13px,4.2vw,17px);line-height:1.28;color:var(--text-soft)}.controls,.pills{justify-content:center}.pills{gap:10px;margin:4px 0 10px}.pill{padding:7px 11px;font-size:13px}.controls{gap:18px;margin-top:14px}.vol{gap:8px}.vol input[type="range"]{width:136px}.recent-list{display:flex;flex-direction:column;gap:8px}.recent-cell,.recent-row{display:grid;grid-template-columns:var(--recent-img) minmax(0,1fr);grid-template-rows:none;align-items:center;justify-items:stretch;gap:12px;min-width:0;padding:8px;border-radius:12px;border:1px solid var(--border);background:var(--card-bg-2);text-align:left}.recent-cell:hover,.recent-row:hover{transform:none}.recent-cell img,.recent-row img{width:var(--recent-img);height:var(--recent-img);min-width:var(--recent-img);max-width:var(--recent-img);object-fit:cover;border-radius:10px;background:var(--panel-bg)}.recent-cell .recent-info,.recent-row .recent-info{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;width:100%;text-align:left}.recent-cell .recent-info .t,.recent-row .recent-info .t{max-width:none;width:100%;margin:0 0 4px;color:var(--text);font-size:14px;font-weight:800;line-height:1.28;white-space:normal;overflow:visible;text-overflow:clip;text-align:left;word-break:break-word;overflow-wrap:anywhere}.recent-cell .recent-info .a,.recent-row .recent-info .a{max-width:none;width:100%;margin:0;color:var(--muted);font-size:12px;line-height:1.28;white-space:normal;overflow:visible;text-overflow:clip;text-align:left;word-break:break-word;overflow-wrap:anywhere}.lyrics-popup,.about-popup{width:calc(100vw - 20px);max-width:none;max-height:68vh}.lyrics-popup-body,.about-popup-body{max-height:calc(68vh - 58px);padding:12px}}@media (max-width:560px){:root{--recent-img:78px}.title{margin:2px 0 6px;font-size:clamp(16px,5.8vw,20px);line-height:1.12}.artist{margin:0 0 12px;font-size:clamp(12px,4vw,15px);line-height:1.24}.pills{gap:8px;margin:2px 0 8px}.pill{padding:6px 10px;font-size:12px}.controls{gap:14px;margin-top:10px}.btnPlay{width:44px;height:44px}.btn.icon{min-width:34px;min-height:34px;padding-inline:9px}.vol{gap:8px}.vol input[type="range"]{width:112px}.recent-list{gap:10px}.recent-cell,.recent-row{gap:12px;padding:8px;border-radius:14px}.recent-cell img,.recent-row img{border-radius:8px}.recent-cell .recent-info .t,.recent-row .recent-info .t{font-size:15px;line-height:1.2;margin-bottom:3px}.recent-cell .recent-info .a,.recent-row .recent-info .a{font-size:13px;line-height:1.2}.context-menu{min-width:210px}.context-submenu{min-width:190px}}@media (prefers-reduced-motion:no-preference){body::before{animation:driftA 18s linear infinite alternate}body::after{animation:driftB 22s linear infinite alternate-reverse}@keyframes driftA{to{transform:translate3d(-18px,16px,0) scale(1.02)}}@keyframes driftB{to{transform:translate3d(18px,-14px,0) scale(1.04)}}}@media (prefers-reduced-motion:reduce){body::before,body::after{animation:none}.card:hover,.cover-300:hover,.recent-cell:hover,.btnPlay:hover{transform:none}}.btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none}