:root{color:#202329;font-synthesis:none;text-rendering:optimizelegibility;--bg:#f3f4f6;--surface:#fff;--surface-2:#f8f9fb;--text:#202329;--muted:#707782;--line:#e4e7eb;--accent:#4e66d8;--accent-soft:#edf0ff;--danger:#b42318;--safe-bottom:env(safe-area-inset-bottom,0px);background:#f3f4f6;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#15171a;--surface:#202327;--surface-2:#282c31;--text:#f1f2f4;--muted:#a5abb4;--line:#3b4047;--accent:#aab5ff;--accent-soft:#303650;--danger:#ff8a80}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--bg);color:var(--text);font-size:16px}.youtube-import{overflow-wrap:anywhere}.youtube-setup,.youtube-command{text-align:left;margin:18px 0}.youtube-import summary{cursor:pointer;min-height:44px;padding:10px 0}.youtube-import ol{padding-left:22px;line-height:1.7}.youtube-import li+li{margin-top:10px}.youtube-import a{color:var(--accent)}.youtube-import a:focus-visible,.companion-command:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.companion-command{border:1px solid var(--line);background:var(--surface-2);width:100%;min-width:0;color:var(--text);resize:vertical;border-radius:12px;margin:8px 0;padding:12px;font:14px/1.6 monospace;display:block}.companion-download,.companion-launch{justify-content:center;align-items:center;min-height:44px;padding:10px 14px;display:inline-flex}.youtube-import .companion-launch{color:var(--surface);text-decoration:none}button,input,select{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0;min-height:44px}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 65%, transparent);outline-offset:2px}.app-shell{max-width:760px;min-height:100dvh;padding-bottom:calc(78px + var(--safe-bottom));background:var(--bg);margin:0 auto}.topbar{background:var(--surface);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:68px;padding:10px 20px;display:flex}.brand{letter-spacing:-.04em;font-size:21px;font-weight:760}.subtitle{color:var(--muted);font-size:12px}.icon-button{border-radius:14px;width:44px;font-size:20px}.main-content{padding:22px 18px 24px}.section-heading{justify-content:space-between;align-items:center;gap:12px;margin:0 2px 18px;display:flex}.section-heading h1{letter-spacing:-.03em;margin:0;font-size:25px}.section-heading p{color:var(--muted);margin:5px 0 0;font-size:14px}.filters{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px;display:flex}.search{background:var(--surface);border:1px solid var(--line);border-radius:13px;flex:220px;align-items:center;gap:8px;min-height:46px;padding:0 12px;display:flex}.search input{background:0 0;border:0;outline:0;width:100%;min-width:0;font-size:16px}.search span{color:var(--muted);font-size:23px}select{border:1px solid var(--line);background:var(--surface);border-radius:12px;min-height:44px;padding:0 10px;font-size:14px}.chip{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:0 12px;font-size:13px}.chip.selected{background:var(--accent-soft);color:var(--accent)}.track-list,.playlist-list{flex-direction:column;gap:8px;display:flex}.track-row{background:var(--surface);border:1px solid var(--line);border-radius:15px;align-items:center;gap:11px;min-height:72px;padding:9px 8px;display:flex;position:relative}.cover{color:#4e61b8;background:linear-gradient(145deg,#dce4ff,#f4dff0);border-radius:12px;flex:none;place-items:center;width:48px;height:48px;min-height:48px;font-size:24px;display:grid}.track-main{text-align:left;flex-direction:column;flex:1;align-items:flex-start;gap:2px;min-width:0;padding:4px 0;display:flex}.track-main strong,.mini-track strong{white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:15px;overflow:hidden}.track-main span,.mini-track small{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:13px;overflow:hidden}.track-main small{font-size:11px}.saved{color:#25805a}.missing{color:#aa5a28}.menu{position:relative}.menu summary{cursor:pointer;min-width:40px;min-height:44px;color:var(--muted);place-items:center;list-style:none;display:grid}.menu summary::-webkit-details-marker{display:none}.menu-panel{z-index:4;background:var(--surface);border:1px solid var(--line);border-radius:13px;width:188px;padding:6px;position:absolute;top:40px;right:0;box-shadow:0 6px 24px #0002}.menu-panel button{text-align:left;border-radius:8px;width:100%;min-height:40px;padding:0 10px;font-size:14px}.menu-panel button:hover{background:var(--surface-2)}.danger-text{color:var(--danger)}.primary{background:var(--accent);color:#fff;border-radius:13px;justify-content:center;align-items:center;min-height:46px;padding:0 18px;font-weight:650;display:inline-flex}.small{min-height:42px;padding:0 14px;font-size:14px}.quiet{color:var(--accent);padding:0 9px;font-size:14px}.empty-state{text-align:center;max-width:330px;margin:34px auto 0;padding:32px 18px}.empty-icon{background:var(--accent-soft);width:66px;height:66px;color:var(--accent);border-radius:22px;place-items:center;margin:auto;font-size:30px;display:grid}.empty-state h2{margin:16px 0 6px;font-size:18px}.empty-state p,.muted{color:var(--muted);font-size:14px;line-height:1.6}.panel{background:var(--surface);border:1px solid var(--line);border-radius:17px;margin:0 0 13px;padding:18px}.panel h2,.settings-group h2{margin:4px 0 5px;font-size:16px}.panel p{color:var(--muted);font-size:14px;line-height:1.55}.panel-icon{background:var(--accent-soft);width:43px;height:43px;color:var(--accent);border-radius:14px;place-items:center;font-size:25px;display:grid}.panel .primary{width:100%}.url-input{border:1px solid var(--line);background:var(--surface-2);border-radius:12px;width:100%;min-height:48px;margin:7px 0 12px;padding:0 13px;font-size:16px;display:block}.field-label{font-size:13px;font-weight:650}.offline-card{background:var(--accent-soft);border-radius:14px;flex-direction:column;gap:5px;padding:15px;font-size:14px;display:flex}.offline-card span{color:var(--muted);font-size:13px}.job-row{border-top:1px solid var(--line);justify-content:space-between;gap:9px;padding:10px 0;font-size:13px;display:flex}.settings-group{background:var(--surface);border:1px solid var(--line);border-radius:16px;margin-bottom:12px;padding:16px}.setting-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;min-height:44px;font-size:14px;display:flex}.setting-row span:last-child{color:var(--muted);text-align:right}.setting-action{text-align:left;border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;width:100%;padding:8px 0;display:flex}.setting-action small{color:var(--muted);font-size:12px}.install-help{background:var(--surface-2);border-radius:12px;margin:14px 0;padding:13px}.install-help p,.settings-group details p{color:var(--muted);font-size:14px;line-height:1.6}.settings-group details{padding:12px 0}.danger-button{border:1px solid color-mix(in srgb, var(--danger) 50%, var(--line));width:100%;min-height:46px;color:var(--danger);border-radius:13px}.playlist-card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:12px}.playlist-open{text-align:left;flex:1 1 0;align-items:center;gap:12px;min-width:0;display:flex}.playlist-art{background:var(--accent-soft);width:46px;height:46px;color:var(--accent);border-radius:13px;flex:0 0 46px;place-items:center;font-size:21px;display:grid}.playlist-open>span:last-child{flex-direction:column;flex:auto;gap:3px;min-width:0;max-width:100%;display:flex}.playlist-open strong{overflow-wrap:anywhere;max-width:100%}.playlist-open small{color:var(--muted)}.playlist-card{flex-wrap:wrap;align-items:center;min-width:0;display:flex}.row-actions{flex:none;display:flex}.row-actions button{border-radius:10px;width:44px;min-width:44px;min-height:44px}.playlist-members{width:100%;padding:8px 0 0}.member-row{border-top:1px solid var(--line);align-items:center;gap:4px;display:flex}.member-row .text-button{text-align:left;flex-direction:column;flex:1;padding:5px 0;display:flex}.member-row small{color:var(--muted)}.member-row>button:not(.text-button){min-width:37px;font-size:12px}.mini-player{z-index:5;bottom:calc(64px + var(--safe-bottom));background:var(--surface);border-top:1px solid var(--line);align-items:center;gap:8px;width:min(100%,760px);min-height:64px;padding:7px 14px;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 -4px 18px #0000000a}.mini-track{text-align:left;flex:1;align-items:center;gap:10px;min-width:0;padding:0;display:flex}.mini-track>span:last-child{flex-direction:column;gap:3px;min-width:0;display:flex}.mini-cover{width:45px;height:45px;min-height:45px}.player-control{width:44px;font-size:18px}.tabbar{z-index:6;width:min(100%,760px);height:calc(64px + var(--safe-bottom));padding:5px 8px var(--safe-bottom);background:var(--surface);border-top:1px solid var(--line);justify-content:space-around;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.tab{min-width:0;color:var(--muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;display:flex}.tab span{font-size:19px;line-height:22px}.tab small{font-size:11px}.tab.active{color:var(--accent);font-weight:700}.notice{z-index:8;background:var(--accent-soft);color:var(--text);justify-content:space-between;align-items:center;margin:0;padding:10px 16px;font-size:14px;display:flex;position:sticky;top:0}.notice button{min-width:36px}.player-screen{z-index:10;min-height:100dvh;padding:calc(20px + env(safe-area-inset-top)) 24px calc(28px + var(--safe-bottom));background:var(--bg);flex-direction:column;align-items:center;display:flex;position:fixed;inset:0;overflow:auto}.close-player{align-self:flex-start;font-size:25px}.big-cover{aspect-ratio:1;color:#5363b7;background:linear-gradient(145deg,#dce4ff,#f4dff0);border-radius:28px;place-items:center;width:min(72vw,360px);margin:18px auto 32px;font-size:100px;display:grid}.now-playing{justify-content:space-between;align-items:center;width:min(100%,460px);display:flex}.now-playing div{flex-direction:column;gap:5px;min-width:0;display:flex}.now-playing strong{white-space:nowrap;text-overflow:ellipsis;font-size:21px;overflow:hidden}.now-playing span{color:var(--muted)}.now-playing button{color:var(--accent);font-size:26px}.seek{width:min(100%,460px);accent-color:var(--accent);margin-top:24px}.time-row{width:min(100%,460px);color:var(--muted);justify-content:space-between;font-size:12px;display:flex}.main-controls{justify-content:center;align-items:center;gap:32px;margin:17px 0;display:flex}.main-controls button{font-size:23px}.main-controls .play-large{background:var(--accent);color:#fff;border-radius:50%;width:66px;height:66px;font-size:25px}.secondary-controls{gap:20px;display:flex}.secondary-controls button{color:var(--muted);font-size:13px}.secondary-controls button[aria-pressed=true]{color:var(--accent)}.queue{border-top:1px solid var(--line);width:min(100%,460px);margin-top:20px;padding:12px 0}.queue summary{min-height:38px}.queue button{text-align:left;border-bottom:1px solid var(--line);width:100%;font-size:14px}.update-toast{z-index:20;bottom:calc(140px + var(--safe-bottom));background:var(--surface);border:1px solid var(--line);border-radius:14px;align-items:center;gap:5px;width:min(100% - 24px,620px);padding:9px 12px;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 8px 28px #0002}.update-toast span{flex:1;font-size:14px}.update-toast button{color:var(--accent);font-size:13px}.export-dialog{z-index:30;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + var(--safe-bottom));background:#10121699;place-items:center;display:grid;position:fixed;inset:0}.export-card{width:min(100%,460px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-bottom) - 32px);border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:18px;padding:28px 22px 22px;position:relative;overflow:auto;box-shadow:0 18px 54px #0004}.export-card h2{margin:0 40px 14px 0;font-size:20px}.export-card>p{overflow-wrap:anywhere}.export-card>.primary{width:100%;margin-top:12px}.export-card .muted{color:var(--muted);font-size:13px;line-height:1.5}.dialog-close{border-radius:12px;width:44px;font-size:24px;position:absolute;top:8px;right:8px}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width>=700px){.main-content{padding:28px 24px}.track-row{padding:10px 12px}.big-cover{margin-top:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#15171a;--surface:#202327;--surface-2:#282c31;--text:#f1f2f4;--muted:#a5abb4;--line:#3b4047;--accent:#aab5ff;--accent-soft:#303650;--danger:#ff8a80}}.menu[open]{z-index:9}.menu-panel{overscroll-behavior:contain;z-index:9;max-height:min(45dvh,320px);position:fixed;inset:8px 8px auto auto;overflow-y:auto}.playback-error{background:color-mix(in srgb, var(--danger) 12%, var(--surface))}