:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--font-sans:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, Arial, sans-serif;--font-mono:"SF Mono", "Cascadia Code", "Consolas", monospace;--bg-0:#000;--bg-1:#0b0b0d;--bg-2:#131316;--surface:#ffffff0b;--surface-strong:#ffffff14;--hairline:#ffffff17;--hairline-strong:#ffffff29;--text-primary:#fffffff5;--text-secondary:#ffffff8f;--text-tertiary:#ffffff57;--accent:#fff;--accent-contrast:#000;--danger:#ff6b6b;--radius-lg:28px;--radius-md:18px;--radius-sm:12px;--radius-pill:999px;--shadow-elevated:0 30px 80px -30px #000c, 0 1px 0 #ffffff0a inset;font-family:var(--font-sans);color:var(--text-primary);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.4}*{box-sizing:border-box}body{background:radial-gradient(1100px 620px at 50% -12%, #1c1c1f 0%, #1c1c1f00 60%), radial-gradient(900px 500px at 90% 110%, #141416 0%, #14141600 55%), var(--bg-0);background-attachment:fixed;min-height:100vh;margin:0}#root{min-height:100vh}::selection{background:#ffffff38}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{border-radius:var(--radius-pill);background:#ffffff24}::-webkit-scrollbar-thumb:hover{background:#ffffff3d}::-webkit-scrollbar-track{background:0 0}button{font:inherit;color:inherit}input{font:inherit}.app{flex-direction:column;justify-content:center;align-items:center;min-height:100dvh;padding:32px 16px 20px;display:flex;position:relative}.app-shell{flex-direction:column;gap:18px;width:100%;max-width:760px;display:flex}.app-body{align-items:flex-start;gap:16px;display:flex}.header{align-items:center;gap:12px;padding:0 4px;display:flex}.logo{border-radius:var(--radius-sm);background:var(--accent);width:40px;height:40px;color:var(--accent-contrast);letter-spacing:.02em;flex-shrink:0;place-items:center;font-size:13px;font-weight:700;display:grid}.header-text h1{letter-spacing:-.01em;margin:0;font-size:16px;font-weight:600}.header-text p{color:var(--text-tertiary);letter-spacing:.02em;margin:1px 0 0;font-size:12px}.app-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(28px);min-width:0;box-shadow:var(--shadow-elevated);flex-direction:column;flex:360px;gap:4px;padding:28px 24px 26px;display:flex}.now-playing{align-items:center;gap:16px;min-width:0;padding-bottom:24px;display:flex}.art{border-radius:var(--radius-md);border:1px solid var(--hairline);width:76px;height:76px;color:var(--text-tertiary);background:linear-gradient(155deg,#232326 0%,#131315 100%);flex-shrink:0;place-items:center;display:grid}.art-active{border-color:var(--hairline-strong);color:var(--text-primary);background:linear-gradient(155deg,#2c2c30 0%,#17171a 100%)}.art-icon{opacity:.5;width:28px;height:28px}.equalizer{align-items:flex-end;gap:4px;height:28px;display:flex}.equalizer i{background:var(--text-primary);border-radius:2px;width:3.5px;animation:1.1s ease-in-out infinite eq}.equalizer i:first-child{height:40%;animation-delay:-.9s}.equalizer i:nth-child(2){height:100%;animation-delay:-.6s}.equalizer i:nth-child(3){height:65%;animation-delay:-.3s}.equalizer i:nth-child(4){height:85%;animation-delay:0s}@keyframes eq{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}.now-playing-info{flex:1;min-width:0}.now-playing-title{letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis;margin:0 0 6px;font-size:17px;font-weight:600;overflow:hidden}.now-playing-status{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:7px;margin:0;font-size:13px;display:flex;overflow:hidden}.status-dot{background:var(--text-tertiary);border-radius:50%;flex-shrink:0;width:6px;height:6px}.status-dot.status-playing{background:#34d399;box-shadow:0 0 0 3px #34d3992e}.status-dot.status-preparing{background:#fbbf24}.status-dot.status-error{background:var(--danger)}.status-dot.status-paused,.status-dot.status-stopped{background:var(--text-secondary)}.controls{border-top:1px solid var(--hairline);flex-direction:column;gap:16px;padding-top:20px;display:flex}.seek-row{align-items:center;gap:10px;display:flex}.time-label{font-family:var(--font-mono);color:var(--text-tertiary);text-align:center;font-variant-numeric:tabular-nums;min-width:34px;font-size:11px}.seek{appearance:none;border-radius:var(--radius-pill);background:linear-gradient(to right, var(--text-primary) 0%, var(--text-primary) var(--progress,0%), var(--hairline-strong) var(--progress,0%), var(--hairline-strong) 100%);cursor:pointer;outline:none;flex:1;height:4px}.seek::-webkit-slider-thumb{appearance:none;background:var(--accent);border-radius:50%;width:13px;height:13px;transition:transform .15s;box-shadow:0 1px 4px #00000080}.seek:active::-webkit-slider-thumb{transform:scale(1.2)}.seek::-moz-range-thumb{background:var(--accent);border:none;border-radius:50%;width:13px;height:13px}.seek:disabled{opacity:.35;cursor:default}.transport-row{justify-content:center;align-items:center;gap:14px;display:flex}.icon-btn{width:40px;height:40px;color:var(--text-secondary);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:50%;place-items:center;transition:color .15s,background .15s,transform .1s;display:grid}.icon-btn:hover{color:var(--text-primary);background:var(--surface-strong)}.icon-btn:active{transform:scale(.92)}.icon-btn-active{color:var(--accent-contrast);background:var(--accent)}.icon-btn-active:hover{color:var(--accent-contrast);background:var(--accent);opacity:.9}.play-btn{background:var(--accent);width:60px;height:60px;color:var(--accent-contrast);cursor:pointer;border:none;border-radius:50%;place-items:center;padding-left:2px;transition:transform .1s,opacity .15s;display:grid}.play-btn:hover{opacity:.88}.play-btn:active{transform:scale(.94)}.play-btn:disabled{cursor:default}.play-btn-loading{padding-left:0}.spinner{border:2.5px solid #00000040;border-top-color:var(--accent-contrast);border-radius:50%;width:20px;height:20px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.ghost-btn{border:1px solid var(--hairline-strong);border-radius:var(--radius-pill);color:var(--text-secondary);cursor:pointer;background:0 0;align-items:center;gap:7px;padding:8px 16px;font-size:12.5px;font-weight:500;transition:color .15s,border-color .15s,background .15s;display:inline-flex}.ghost-btn:hover{color:var(--text-primary);border-color:var(--text-primary);background:var(--surface-strong)}.playlist-panel{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(28px);min-width:220px;max-width:320px;min-height:0;box-shadow:var(--shadow-elevated);flex-direction:column;flex:280px;padding:22px 8px 20px 22px;display:flex}.playlist-header{justify-content:space-between;align-items:center;margin-bottom:10px;padding-right:14px;display:flex}.playlist-footer{border-top:1px solid var(--hairline);flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px;padding:14px 14px 0 0;display:flex}.playlist-header h2{letter-spacing:.01em;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:600;display:inline-flex}.playlist-count{font-family:var(--font-mono);color:var(--text-tertiary);background:var(--surface-strong);border-radius:var(--radius-pill);padding:1px 7px;font-size:11px;font-weight:500}.text-btn{color:var(--text-tertiary);cursor:pointer;background:0 0;border:none;padding:4px 2px;font-size:12px;transition:color .15s}.text-btn:hover:not(:disabled){color:var(--text-primary)}.text-btn:disabled{opacity:.35;cursor:default}.playlist-scroll{scrollbar-width:thin;scrollbar-color:#ffffff24 transparent;flex-direction:column;min-height:220px;max-height:min(56vh,420px);padding-right:8px;display:flex;overflow-y:auto}.playlist-scroll::-webkit-scrollbar{width:5px}.playlist-scroll::-webkit-scrollbar-track{background:0 0}.playlist-scroll::-webkit-scrollbar-thumb{border-radius:var(--radius-pill);background:#ffffff1f}.playlist-panel:hover .playlist-scroll::-webkit-scrollbar-thumb{background:#ffffff42}.playlist-list{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.playlist-row{border-radius:var(--radius-sm);align-items:center;gap:4px;transition:background .12s;display:flex}.playlist-row:hover{background:var(--surface)}.playlist-row-active{background:var(--surface-strong)}.playlist-item{min-width:0;color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;text-align:left;background:0 0;border:none;flex:1;align-items:center;gap:12px;padding:9px 8px;display:flex}.playlist-row-active .playlist-item{color:var(--text-primary);font-weight:500}.playlist-index{width:18px;font-family:var(--font-mono);color:var(--text-tertiary);text-align:center;flex-shrink:0;font-size:11px}.mini-equalizer{justify-content:center;align-items:flex-end;gap:2px;width:100%;height:12px;display:inline-flex}.mini-equalizer i{background:var(--text-primary);border-radius:1px;width:2px;animation:1.1s ease-in-out infinite eq}.mini-equalizer i:first-child{height:40%;animation-delay:-.8s}.mini-equalizer i:nth-child(2){height:100%;animation-delay:-.4s}.mini-equalizer i:nth-child(3){height:65%;animation-delay:0s}.playlist-name{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:13.5px;overflow:hidden}.playlist-remove{width:30px;height:30px;color:var(--text-tertiary);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:50%;flex-shrink:0;place-items:center;transition:opacity .12s,color .12s,background .12s;display:grid}.playlist-row:hover .playlist-remove,.playlist-row-active .playlist-remove{opacity:1}.playlist-remove:hover{color:var(--danger);background:var(--surface-strong)}.hint{color:var(--text-tertiary);text-align:center;margin:auto 0;padding:12px 4px;font-size:13px}.hidden-file-input{display:none}.drop-overlay{z-index:20;-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;background:#000000b8;place-items:center;transition:opacity .18s;display:grid;position:fixed;inset:0}.app-drag-over .drop-overlay{opacity:1}.drop-overlay-inner{border:1.5px dashed var(--hairline-strong);border-radius:var(--radius-lg);color:var(--text-primary);text-align:center;padding:40px 56px;font-size:15px;font-weight:500}.site-footer{text-align:left;color:var(--text-tertiary);letter-spacing:.03em;margin:0;font-size:12px;position:fixed;bottom:12px;left:16px}@media (width<=680px){.app{justify-content:flex-start;padding:20px 12px 16px}.app-body{flex-direction:column;align-items:stretch}.app-card{flex:none;width:100%}.playlist-panel{flex:none;width:100%;min-width:0;max-width:none}.playlist-scroll{min-height:0;max-height:min(40vh,320px)}.site-footer{text-align:center;margin-top:16px;position:static}}@media (width<=420px){.app-card{padding:22px 16px}.playlist-panel{padding:20px 6px 18px 18px}.now-playing{gap:12px}.art{width:64px;height:64px}.transport-row{gap:8px}}