:root{color-scheme:dark;font:14px/1.4 system-ui,sans-serif;background:#101217;color:#d8dbe7;--panel:#191c25;--muted:#929bb4;--line:#2b3040;--accent:#b4b8dd}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{color:inherit;border:1px solid transparent;background:#292e3f;border-radius:5px;cursor:pointer;min-height:40px;padding:6px 12px}button:hover{background:#383e53}button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #c8cafa;outline-offset:2px}button[aria-pressed=true]{background:#555b78;color:#fff}button:disabled{opacity:.4;cursor:default}[hidden]{display:none!important}input{accent-color:var(--accent)}input[type=range]{min-width:0;cursor:pointer}.formats{display:flex;gap:24px;border:1px solid var(--line);border-radius:5px;padding:6px 12px}.formats label{display:flex;flex-direction:row;align-items:center;gap:8px;margin:4px 0;min-height:40px}.formats input[type=checkbox]{width:20px;height:20px}.formats legend{font-size:12px;color:var(--muted)}.app{max-width:1440px;height:100dvh;min-height:260px;margin:auto;display:flex;flex-direction:column;padding:12px 18px}header{display:flex;gap:6px;align-items:center;height:48px;flex-shrink:0;border-bottom:1px solid var(--line);padding:0 2px 8px}header .brand{font-size:15px;letter-spacing:-.5px;margin-right:auto}nav{display:flex;gap:2px;background:#242835;border-radius:6px;padding:2px}nav button{min-height:32px;padding:4px 16px}.icon{font-size:24px;min-width:42px;padding:0;background:transparent}#logout{font-size:19px;color:var(--muted)}.layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:12px;min-height:0;flex:1;padding:12px 0;align-items:start}.player{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;min-width:0;width:100%;align-self:start;max-height:100%;display:flex;flex-direction:column}.screen{position:relative;background:#08090e;min-height:0;flex:1;aspect-ratio:16/9;overflow:hidden}.screen video{display:block;width:100%;height:100%;object-fit:contain;max-height:calc(100dvh - 176px)}#empty-screen{position:absolute;inset:0;display:grid;place-items:center;color:#747d96;font-size:16px;pointer-events:none}.controls{display:flex;align-items:center;flex-wrap:wrap;padding:6px;gap:4px;border-top:1px solid var(--line)}.transport,.options{display:flex;align-items:center;gap:2px}.controls button{background:transparent;min-width:40px;padding:6px;font-size:17px}.controls button[aria-pressed=true]{background:#393f56}.timeline{display:flex;align-items:center;gap:8px;flex:1;min-width:170px}.timeline input{flex:1;width:80px;height:32px}.timeline span{font-size:11px;color:var(--muted);white-space:nowrap}.options{margin-left:auto}#volume{width:60px;height:32px}.playlist-section{display:flex;flex-direction:column;min-height:0;height:100%;background:#14171f;border:1px solid var(--line);border-radius:8px;overflow:hidden}.list-heading{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line);flex-shrink:0}.list-heading h2{font-size:12px;font-weight:500;margin:0;color:var(--muted)}#count{font-size:11px;color:var(--muted)}.playlist-scroll{overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;padding:6px}ol{list-style:none;padding:0;margin:0}.track{display:flex;align-items:center;gap:5px;border-radius:6px;margin:2px 0;padding:3px;background:transparent;border:1px solid transparent;min-height:50px}.track.current{background:#2d3245;border-color:#454c65}.track.dragging{opacity:.5}.track.drop-target{border-top:2px solid var(--accent)}.track .drag{font-size:18px;color:#7b86a4;touch-action:none;cursor:grab;min-width:30px;padding:3px;background:transparent}.track .select{flex:1;min-width:0;background:none;text-align:left;padding:4px;display:flex;gap:8px;align-items:center;min-height:42px}.mini-cover{width:35px;height:30px;border-radius:3px;display:grid;place-items:center;background:linear-gradient(35deg,#30394a,#62617c);flex-shrink:0;font-size:16px;color:#bdc6e1}.track .text{min-width:0;flex:1}.title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.state{font-size:10px;color:var(--muted);display:block}.state.failed{color:#edb4ae;white-space:normal;overflow-wrap:anywhere}.track .actions{display:flex;gap:0}.actions button{font-size:14px;background:transparent;min-width:30px;min-height:40px;padding:4px}.track .retry{font-size:11px}details{color:var(--muted);font-size:12px;margin:14px 2px 0}summary{cursor:pointer;padding:8px 4px;min-height:40px}#passive-list{opacity:.78}#empty-list{padding:18px;color:var(--muted);font-size:13px}.audio-heading{display:none}.layout.audio{display:flex;flex-direction:column;gap:12px;align-items:stretch}.audio .player{flex-shrink:0;max-width:100%;height:auto}.audio .screen{display:none}.audio-heading h1{font-size:16px;font-weight:500;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.audio-heading>div{min-width:0}.audio-heading span:not(.cover){font-size:11px;color:var(--muted)}.audio .audio-heading{display:flex;align-items:center;gap:16px;padding:16px 18px}.cover{display:grid;place-items:center;background:linear-gradient(35deg,#41475f,#73708a);border-radius:6px;width:56px;height:56px;flex-shrink:0;font-size:27px}.audio .playlist-section{flex:1;height:auto}.audio .options #fullscreen{display:none}.layout.list-hidden{grid-template-columns:1fr}.layout.list-hidden .playlist-section{display:none}.layout.audio.list-hidden .playlist-section{display:none}footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-height:28px;flex-shrink:0;font-size:10px;color:#77819d}#version{position:fixed;left:18px;bottom:8px;z-index:5;background:transparent;text-decoration:underline;text-underline-offset:3px;font-size:10px;color:#929bb4;padding:2px 0;min-height:28px}#sync-status{text-align:right}dialog{background:#1c202b;color:inherit;border:1px solid #41485e;border-radius:10px;width:min(94vw,480px);max-height:85dvh;padding:20px}dialog::backdrop{background:#000a}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-heading h2{font-size:17px;margin:0 0 12px}.dialog-heading button{background:transparent;font-size:22px;min-width:40px}label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#a4adc4;margin:12px 0}input:not([type=range]){padding:12px;border:1px solid #4b536b;border-radius:5px;background:#11151f;color:#fff;width:100%;font-size:15px}.hint{font-size:12px;color:#929bb4}.error{color:#efb8ad;font-size:12px;overflow-wrap:anywhere}#play-error{margin:4px 12px 10px}#toast{position:fixed;left:50%;bottom:38px;transform:translateX(-50%);background:#343b51;border:1px solid #68738e;padding:8px 12px;border-radius:7px;display:flex;align-items:center;gap:14px;z-index:10;max-width:94vw;font-size:12px}#toast button{min-height:36px}.login{height:100dvh;display:grid;place-items:center;padding:20px}.login form{width:min(100%,320px);padding:24px;background:#191d27;border:1px solid var(--line);border-radius:10px}.login h1{margin:0;font-size:22px}.login p{font-size:12px;color:var(--muted)}.login form>button{width:100%;margin-top:12px}#history h3{font-size:13px;color:#c8cee6}#history section{border-top:1px solid var(--line);padding:10px 0}#history ul{padding-left:20px;font-size:13px}#baseline{font-size:11px;color:var(--muted)}.player:fullscreen{background:#08090e;max-height:none;height:100dvh;border:none;border-radius:0}.player:fullscreen .screen{aspect-ratio:auto;flex:1;min-height:0}.player:fullscreen video{max-height:100%;height:100%}.player:fullscreen .controls{flex-shrink:0}@media(min-width:1000px){.layout.audio{max-width:1000px;width:100%;align-self:center}.audio .track .title{font-size:14px}.audio .track{padding:4px 8px}.layout.video .options{width:100%;justify-content:flex-end}.layout.video .timeline{min-width:100px}}@media(max-width:760px){.app{padding:6px 8px}.layout.video{display:flex;flex-direction:column;gap:8px;padding:8px 0}.video .player{flex-shrink:0;max-height:65%;}.video .screen{aspect-ratio:16/9;flex:initial}.video video{max-height:calc(60dvh - 92px)}.video .playlist-section{flex:1;height:auto;width:100%}.controls{gap:2px;padding:4px}.controls button{min-width:38px;min-height:40px}.options{width:100%;justify-content:flex-end}.timeline{min-width:120px}.audio .audio-heading{padding:12px;gap:12px}.audio-heading h1{font-size:15px}.track{min-height:52px}.actions button{min-width:36px;min-height:44px}.track .drag{min-height:44px;min-width:32px}.audio .layout{gap:8px}.cover{width:44px;height:44px}.playlist-scroll{padding:4px}header{height:45px}.list-heading{padding:7px 10px}.track .select{gap:6px}.mini-cover{width:30px;height:28px}}@media (max-height:500px) and (min-width:550px){.app{padding:4px 8px}header{height:38px;padding-bottom:3px}.layout.video{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:8px;padding:5px 0}.video .player{max-height:100%}.video .screen{aspect-ratio:auto;flex:1}.video video{max-height:calc(100dvh - 172px)}.options{width:auto}.layout.video .options{width:100%;justify-content:flex-end}.video .playlist-section{height:100%}.layout.audio{gap:6px;padding:5px 0}.audio .audio-heading{padding:6px 12px}.audio .cover{width:34px;height:34px}.audio .controls .options{width:auto}.audio .player{max-height:none}.audio-heading h1{font-size:14px}footer{min-height:22px}}@media(prefers-reduced-motion:no-preference){button{transition:background .12s}}