:root{color-scheme:dark;--bg:#0c1116;--side:#0f161c;--card:#131c23;--line:#26343d;--text:#edf3f2;--muted:#94a7af;--accent:#a5e5c1;--ink:#10251c}
*{box-sizing:border-box}[hidden],.hidden{display:none!important}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 'Segoe UI','Microsoft JhengHei',sans-serif}button,input,select{font:inherit}button{cursor:pointer;transition:background .15s,border-color .15s}button:disabled{opacity:.42;cursor:not-allowed}button,input,select,a,summary{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}h1,h2,p{margin:0}h2{font-size:18px;font-weight:600}button,select{min-height:40px}.skip-link{position:fixed;top:-80px;left:20px;background:var(--accent);color:var(--ink);padding:10px;z-index:10}.skip-link:focus{top:10px}
.shell{display:grid;grid-template-columns:196px minmax(0,1fr);min-height:100dvh}.side{position:sticky;top:0;height:100dvh;padding:30px 14px 22px;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;padding:0 8px 52px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--accent);color:var(--ink);font-size:16px}.brand strong{font-size:22px;letter-spacing:-.04em}.brand small{display:block;font-size:9px;letter-spacing:.2em;color:var(--muted)}.nav-caption{padding:0 14px 14px;font-size:11px;color:var(--muted)}.nav{display:grid;gap:7px}.nav-item{display:flex;align-items:center;gap:12px;background:none;color:#aebcc1;border:1px solid transparent;border-radius:9px;padding:13px;text-align:left;white-space:nowrap}.nav-item span{font-size:18px}.nav-item:hover{background:#1a262d}.nav-item.selected{background:#20372e;color:var(--accent);border-color:#355446}.side-bottom{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding:20px 9px 0;margin-top:auto}.side-bottom strong{font-size:12px;font-weight:500}.side-bottom small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.status-dot{width:7px;height:7px;flex:none;border-radius:50%;background:#d5ab70}body[data-connected=true] .status-dot{background:var(--accent);box-shadow:0 0 0 4px #a5e5c10c}
.main{min-width:0;width:100%;max-width:1840px;margin:0 auto;padding:0 clamp(20px,2.7vw,48px)}.topbar{height:65px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.crumb{font-size:12px;color:var(--muted);letter-spacing:.1em}.account-button{display:flex;align-items:center;gap:10px;padding:8px 12px;background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--text);font-size:12px}.account-button:hover{background:var(--card)}.intro{display:flex;justify-content:space-between;align-items:center;padding:25px 0 22px;gap:12px}h1{font-size:28px;font-weight:600;letter-spacing:-.03em}.intro p{color:var(--muted);font-size:12px;margin-top:5px}.mode-label,.overline{font-size:10px;letter-spacing:.14em;font-weight:600;color:var(--muted)}.mode-label{border:1px solid var(--line);border-radius:5px;padding:5px 8px;white-space:nowrap}.connection-alert{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid #655334;border-radius:8px;background:#282318;padding:11px 15px;margin-bottom:16px;font-size:12px;color:#e1cca8}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:20px;align-items:start;outline:none}.stage,.library{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}.stage-top{height:47px;display:flex;align-items:center;justify-content:space-between;padding:0 18px}.player-state{font-size:11px;color:var(--accent);background:#223b30;padding:4px 9px;border-radius:5px}.video-shell{background:#050709;position:relative;aspect-ratio:16/9;overflow:hidden}video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#050709}.video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;background:radial-gradient(ellipse at center,#1b302b,#0b141a 75%);pointer-events:none}.play-ring{display:grid;place-items:center;border:1px solid #486c5b;border-radius:50%;height:58px;width:58px;color:var(--accent);padding-left:3px;margin-bottom:7px}.video-placeholder strong{font-size:17px;font-weight:500}.video-placeholder span{font-size:12px;color:var(--muted)}.stage-meta{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;padding:20px 20px 8px}.stage-meta>div{min-width:0}.stage-meta h2{font-size:22px;line-height:1.4}.stage-meta p{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.8;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.playback-message{min-height:38px;padding:0 20px 14px;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11px}.playback-message .text-button{min-height:24px}.episode-label{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);margin:0 20px;padding:15px 0;color:var(--muted);font-size:12px}.episode-label select{max-width:75%;min-width:130px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:8px}.error{margin:0 20px 18px;border:1px solid #68413b;background:#322321;border-radius:8px;padding:12px;display:flex;gap:12px;align-items:center;font-size:12px;color:#f3c0b7}.error span{flex:1}
.library{padding:18px 14px 0;display:flex;flex-direction:column;max-height:calc(100dvh - 209px);min-height:450px}.library-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 15px}.library-head h2{font-size:17px}.count{color:var(--muted);background:#1d2931;border-radius:5px;padding:4px 8px;font-size:11px}.search{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:0 12px;background:#0c151b;min-height:43px}.search span{font-size:23px;color:var(--muted)}.search input{width:100%;min-width:0;background:none;border:0;color:var(--text);font-size:13px;outline:none}.search:focus-within{border-color:var(--accent)}input::placeholder{color:#82969f}.filter-bar{display:flex;gap:8px;padding:11px 0}.filter-bar select{min-width:0;width:100%;background:#19252d;border:1px solid var(--line);border-radius:6px;padding:7px 9px;color:#c4d1d4;font-size:12px}.library-list{overflow:auto;min-height:180px;flex:1;scrollbar-width:thin;scrollbar-color:#40524f transparent;padding:0 2px 8px;overscroll-behavior:contain}.row{display:flex;align-items:center;text-align:left;gap:12px;width:100%;padding:9px 8px;margin:2px 0;border:1px solid transparent;border-radius:8px;background:none;color:var(--text);min-height:67px}.row:hover{background:#1b2a30}.row.active{background:#203a30;border-color:#527764}.row-icon{position:relative;display:grid;place-items:center;flex:none;width:70px;height:43px;border-radius:6px;background:linear-gradient(135deg,#2c4540,#1b2e38);overflow:hidden;color:#c1e1d1;font-size:13px;font-weight:600;letter-spacing:.02em}.row-icon.alt{background:linear-gradient(135deg,#344452,#202e36);color:#bfd4e3}.row-icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#18252d}.row-icon.frame img{object-fit:cover}.thumb-fallback{padding:4px;text-align:center;line-height:1.2}.row-body{min-width:0;flex:1}.row-body strong{display:block;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-body small{display:block;font-size:11px;color:var(--muted);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-marker{color:var(--accent);font-size:10px;flex:none}.row:not(.active) .row-marker{visibility:hidden}.library-list.vod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}.vod-grid .row{display:block;margin:0;padding:7px;min-width:0}.vod-grid .row-icon{width:100%;height:auto;aspect-ratio:2/3;font-size:23px;border-radius:6px}.vod-grid .row-icon img{object-fit:cover}.vod-grid .row-body{display:block;padding-top:9px}.vod-grid .row-body strong{font-size:12px}.vod-grid .row-marker{display:none}.pagination{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.pagination button{min-height:34px;padding:4px 12px}.empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;min-height:210px;padding:25px;color:var(--muted)}.empty strong{color:var(--text);font-size:14px;font-weight:500}.empty p{font-size:12px;max-width:290px}.replay-tools{padding:0 0 12px;font-size:12px;color:var(--muted)}.replay-tools label{display:flex;align-items:center;justify-content:space-between;gap:10px}.replay-tools input{min-width:0;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:8px}
.lower{margin-top:27px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.muted{color:var(--muted);font-size:12px}.guide-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:16px}.guide-item{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:16px;text-align:left}.guide-item:hover:not(:disabled){border-color:var(--accent)}.guide-item strong{display:block;margin:9px 0;font-weight:500}.guide-item small{display:block;color:var(--muted);font-size:11px}.guide-item.active{border-color:var(--accent);background:#203a30}footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);margin-top:28px;padding:18px 0 25px;font-size:10px;color:#74888f}
.ghost-button,.secondary-button{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:7px;padding:8px 12px;white-space:nowrap;font-size:12px}.ghost-button:hover,.secondary-button:hover{border-color:#759e8a;background:#1d3029}.text-button{border:0;background:none;color:var(--accent);padding:6px;font-size:12px}.primary-button{background:var(--accent);color:var(--ink);border:0;border-radius:7px;padding:10px 16px;font-size:13px;font-weight:600}.primary-button:hover{background:#c3f5d8}.danger{color:#efb2a6}.dialog{width:min(510px,calc(100vw - 28px));max-height:90dvh;overflow:auto;background:#142028;color:var(--text);border:1px solid #3c5259;border-radius:14px;padding:24px;box-shadow:0 25px 90px #0009}.dialog::backdrop{background:#02070bbd;backdrop-filter:blur(4px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.dialog-head h2{font-size:23px}.close{border:0;background:none;color:var(--muted);font-size:26px;width:40px}.dialog p{font-size:12px;color:var(--muted);line-height:1.8;margin:10px 0}.connection-panel{padding:16px;background:#1b2d2b;border:1px solid #38534a;border-radius:9px}.connection-panel strong{font-size:14px}.connection-panel p:last-child{margin-bottom:0}.settings-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}.message{font-size:12px;color:var(--accent);margin-top:12px;line-height:1.7}.message:empty{display:none}.settings-note{padding:7px 0}.advanced{border-top:1px solid var(--line);padding-top:17px}.advanced summary{cursor:pointer;color:#c7d4d6;font-size:13px}.stream-check{display:grid;gap:8px;margin-top:18px;font-size:12px}.stream-fields{display:flex;gap:8px}.stream-fields input{min-width:0;width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:8px}.stream-check small{color:var(--muted)}.upload-line{display:grid;gap:10px;padding:16px 0;border-top:1px solid var(--line)}.upload-line small{display:block;color:var(--muted);font-weight:400;font-size:11px}.upload-line input{max-width:100%;font-size:12px}
@media(min-width:1700px){.workspace{grid-template-columns:minmax(0,1fr) 400px}}
@media(max-width:1200px){.shell{grid-template-columns:168px minmax(0,1fr)}.brand{gap:8px;padding-left:0}.workspace{grid-template-columns:minmax(0,1fr) 300px;gap:14px}.row-icon{width:58px;height:39px}.main{padding:0 20px}.nav-item{padding:12px 8px}}
@media(max-width:980px){.shell{grid-template-columns:150px minmax(0,1fr)}.brand strong{font-size:20px}.brand-mark{width:30px;height:34px}.workspace{grid-template-columns:1fr}.library{min-height:330px;max-height:540px}.library-list.vod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.side{padding-left:9px;padding-right:9px}}
@media(max-width:620px){.shell{display:block}.side{position:static;height:auto;padding:14px 16px 10px;border-right:0;border-bottom:1px solid var(--line)}.brand{padding:0 0 14px}.brand strong{font-size:21px}.brand small{display:none}.brand-mark{width:30px;height:30px;border-radius:8px;font-size:12px}.nav-caption,.side-bottom{display:none}.nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.nav-item{justify-content:center;gap:7px;font-size:12px;padding:9px 5px;min-height:42px}.nav-item span{font-size:15px}.main{padding:0 14px}.topbar{height:49px}.account-button{min-height:32px;padding:5px 8px;font-size:11px}.intro{padding:18px 0 16px}h1{font-size:24px}.intro p{font-size:11px}.mode-label{font-size:9px}.stage-top{height:39px;padding:0 12px}.stage-meta{padding:14px 14px 8px;gap:10px}.stage-meta h2{font-size:18px}.stage-meta p{font-size:11px;-webkit-line-clamp:3}.playback-message{padding:0 14px 12px;font-size:10px}.video-placeholder strong{font-size:14px}.video-placeholder span{font-size:10px}.play-ring{width:42px;height:42px;margin:0}.library{padding:15px 11px 0;max-height:550px;min-height:330px}.row-icon{width:76px;height:46px}.library-list.vod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-head{align-items:flex-start;flex-direction:column}.connection-alert{align-items:flex-start;flex-direction:column;gap:2px}.error{margin:0 14px 14px;align-items:flex-start;flex-direction:column}.episode-label{margin:0 14px}.dialog{padding:20px}footer{font-size:9px;margin-top:22px}.guide-list{grid-template-columns:1fr}}
.library-list.vod-grid{grid-auto-rows:max-content}.vod-grid .row{height:max-content;min-height:0}.vod-grid .row-icon{display:block;height:0;padding-bottom:150%;aspect-ratio:auto}.vod-grid .thumb-fallback{position:absolute;inset:0;display:grid;place-items:center}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Dedicated URL player: input above the shared accessible player. */
.stream-source-panel{margin-bottom:18px;padding:22px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.stream-source-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.stream-source-heading label{font-size:15px;font-weight:600}.source-format{font-size:10px;letter-spacing:.12em;color:var(--muted)}
.stream-source-panel .stream-fields input{min-height:46px;padding:12px 14px;font-size:14px}.stream-source-panel .stream-fields button{min-height:46px;padding-inline:20px}
.stream-source-panel p{font-size:12px;line-height:1.7;color:var(--muted);margin:12px 0 0}.stream-source-panel #stream-source-message{color:var(--accent)}.stream-source-panel #stream-source-message:empty{display:none}
.direct-view .workspace{grid-template-columns:minmax(0,1fr);max-width:1120px;margin-inline:auto}.direct-view .stream-source-panel{max-width:1120px;margin-inline:auto}.direct-view .connection-alert{display:none}
.direct-view .video-shell{max-height:68vh;min-height:220px}.direct-view .video-shell video{max-height:68vh}
@media(max-width:620px){.stream-source-panel{padding:16px}.stream-source-panel .stream-fields{flex-wrap:wrap}.stream-source-panel .stream-fields input{flex-basis:100%}.stream-source-panel .stream-fields button{flex:1}.direct-view .video-shell{min-height:180px}}

.source-upload{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}.source-upload span{color:var(--muted);font-size:12px}.source-upload-hint{max-width:850px}.direct-view .workspace{grid-template-columns:minmax(0,1fr) 330px;max-width:none;align-items:start}.direct-view .stream-source-panel{max-width:none}.source-library{min-width:0;min-height:400px;max-height:76vh}.source-list-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 12px;color:var(--muted);font-size:11px}.source-list-tools span{min-width:0;overflow-wrap:anywhere}.source-library .row-body{min-width:0}.source-library .row-body strong{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.source-library .row-body small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.source-library #source-list{min-height:220px;overflow:auto}.source-library #source-load-more{margin:10px 0}.source-library .row{min-height:62px}.source-library .row-marker{flex:none}
@media(max-width:980px){.direct-view .workspace{grid-template-columns:minmax(0,1fr)}.source-library{max-height:440px;min-height:300px}}
@media(max-width:620px){.source-upload{align-items:flex-start;flex-direction:column;gap:8px}.source-upload button{width:100%}.source-library{max-height:420px}}

.playback-options{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;border-top:1px solid var(--line,#293d46);padding-top:16px;margin-top:16px}.playback-options label{display:flex;align-items:center;gap:8px;font-size:13px}.playback-options input[type=checkbox]{width:16px;height:16px;accent-color:#a3dfc0}.playback-options select{width:auto;min-width:90px;padding:8px}.playback-options small{flex-basis:100%;color:var(--muted,#91a7b1);font-size:12px}