:root{color-scheme:dark}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{font-family:PingFang SC,Microsoft YaHei,system-ui,sans-serif;background:#04101f;color:#eaf6ff;overflow:hidden}.tv{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:auto 1fr;height:100vh;height:100dvh;--side-w: 300px;background-image:radial-gradient(circle at 25% 20%,rgba(255,255,255,.35) 0 1px,transparent 1.6px),radial-gradient(circle at 75% 40%,rgba(255,255,255,.25) 0 1px,transparent 1.6px),radial-gradient(circle at 50% 75%,rgba(255,255,255,.18) 0 1px,transparent 1.6px),linear-gradient(180deg,#0a2a4d,#06182e 55%,#030d1a);background-size:260px 260px,380px 380px,520px 520px,100% 100%}@media(min-width:601px){.tv{--side-w: 380px}}@media(min-width:901px){.tv{--side-w: 452px}}.side{overflow:hidden;width:var(--side-w);transition:width .25s ease}.side-inner{display:flex;width:var(--side-w);height:100%}.tv.nav-closed .side{width:0}.backdrop{display:none}.nav-tab{position:absolute;top:14px;left:12px;z-index:8;padding:6px 10px;background:#030e1c99;border:1px solid rgba(120,190,255,.25);border-radius:8px;color:#cfe8ff;font-size:14px;cursor:pointer}.nav-tab:hover{color:#35c5ff;border-color:#35c5ff80}.rail{display:flex;flex-direction:column;gap:4px;padding:18px 0;overflow-y:auto;border-right:1px solid rgba(120,190,255,.15);flex:none;width:84px}@media(min-width:601px){.rail{width:104px}}@media(min-width:901px){.rail{width:132px}}.rail-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:none;border:0;color:#cfe8ff;font-size:17px;text-align:left;cursor:pointer}.rail-item:hover{color:#fff}.rail-item.active{color:#35c5ff;font-weight:600;background:linear-gradient(90deg,rgba(53,197,255,.14),transparent);box-shadow:inset 3px 0 #35c5ff}.rail-count{font-size:12px;color:#cfe8ff73}.list{padding:12px 10px;overflow-y:auto;background:#030e1c8c;border-right:1px solid rgba(120,190,255,.12);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);flex:1;min-width:0}.row{display:grid;grid-template-columns:40px 36px 1fr 18px 22px;gap:8px;align-items:center;width:100%;padding:9px 8px;background:none;border:0;border-radius:6px;color:#eaf6ff;cursor:pointer}.row:hover{background:#35c5ff14}.row.active{background:#35c5ff24}.row.active .row-name{color:#35c5ff}.row.dead{opacity:.45}.row-num{padding:2px 0;border:1px solid rgba(207,232,255,.35);border-radius:4px;color:#cfe8ff;font-size:13px;text-align:center}.row-logo{display:flex;align-items:center;justify-content:center;width:34px;height:34px;overflow:hidden;background:#ffffff0f;border-radius:4px}.row-logo img{width:100%;height:100%;object-fit:contain}.row-logo-ph{color:#cfe8ff80;font-size:14px}.row-main{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.row-name{max-width:100%;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-sub{font-size:12px;color:#cfe8ff80}.eq{display:inline-flex;gap:2px;align-items:flex-end;height:16px;visibility:hidden}.eq.on{visibility:visible}.eq i{width:3px;background:#35c5ff;animation:eq 1s infinite ease-in-out}.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}@keyframes eq{0%,to{height:5px}50%{height:16px}}.fav{padding:2px 4px;color:#cfe8ff40;font-size:15px}.fav.on{color:#ffd75e}.list-tip{padding:24px 12px;color:#cfe8ff99;font-size:14px}.list-tip button{margin-left:8px}.stage{position:relative;background:#000;min-width:0;min-height:0}.stage video{width:100%;height:100%;object-fit:contain;background:#000}.stage-tabs{position:absolute;top:50%;left:10px;transform:translateY(-50%);padding:10px 6px;border:1px solid rgba(120,190,255,.2);border-radius:6px;background:#030e1c99;color:#cfe8ff;font-size:13px;letter-spacing:4px;writing-mode:vertical-rl}.stage-tabs .arrow{color:#35c5ff}.stage-name{position:absolute;top:14px;left:92px;padding:4px 10px;border-radius:6px;background:#030e1c8c;color:#eaf6ffd9;font-size:15px}.stage-name em{font-style:normal;font-size:12px;color:#cfe8ff80}.mirror-btn{margin-left:10px;padding:2px 10px;background:#35c5ff26;border:1px solid rgba(53,197,255,.4);border-radius:5px;color:#35c5ff;font-size:12px;cursor:pointer}.mirror-btn:hover{background:#35c5ff4d}.stage.no-cursor{cursor:none}.pbar{position:absolute;right:0;bottom:0;left:0;z-index:6;display:flex;gap:10px;align-items:center;padding:10px calc(16px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));background:linear-gradient(0deg,rgba(2,8,16,.85),transparent)}.pbar .spacer{flex:1}.pbtn{padding:4px 10px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:6px;color:#eaf6ff;font-size:13px;cursor:pointer}.pbtn:hover{background:#35c5ff40}.pbtn.accent{border-color:#35c5ff99;color:#35c5ff}.live-badge{display:inline-flex;gap:6px;align-items:center;color:#ff5f5f;font-size:13px;font-weight:700;letter-spacing:1px}.live-badge .dot{width:8px;height:8px;background:#ff5f5f;border-radius:50%;animation:pulse 1.6s infinite}.live-badge .lat{color:#eaf6ff99;font-weight:400}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.pbuf{width:70px;height:4px;overflow:hidden;background:#ffffff26;border-radius:2px}.pbuf i{display:block;height:100%;background:#35c5ff;transition:width .5s}.vol{width:80px;accent-color:#35c5ff;cursor:pointer}.stats-box{position:absolute;top:52px;left:48px;z-index:6;padding:8px 12px;background:#020810b3;border:1px solid rgba(120,190,255,.25);border-radius:8px;color:#eaf6ffd9;font-size:12px;line-height:1.7}.play-big{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:7;width:84px;height:84px;background:#35c5ffe6;border:0;border-radius:50%;color:#04101f;font-size:30px;cursor:pointer}.play-big:hover{background:#35c5ff}.stage-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;background:#0208108c;color:#cfe8ff}.stage-overlay.soft{background:#0208104d}.buf-hint{font-size:12px;color:#cfe8ff99}.spin{width:42px;height:42px;border:3px solid rgba(53,197,255,.25);border-top-color:#35c5ff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.stage-overlay button{padding:8px 18px;background:#35c5ff;border:0;border-radius:6px;color:#04101f;font-size:14px;cursor:pointer}.err-text{color:#ff8f8f}.clock{position:absolute;top:14px;right:18px;z-index:5;padding:6px 14px;border-radius:8px;background:#ffffffeb;color:#12263a;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}.rail::-webkit-scrollbar,.list::-webkit-scrollbar{width:6px}.rail::-webkit-scrollbar-thumb,.list::-webkit-scrollbar-thumb{background:#78beff40;border-radius:3px}@media(max-width:900px){.side{position:fixed;top:0;bottom:0;left:0;z-index:30;width:var(--side-w);transform:translate(0);transition:transform .25s ease;box-shadow:8px 0 24px #00000080}.tv.nav-closed .side{width:var(--side-w);transform:translate(-105%)}.backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:25;background:#00000073}.rail-item{padding:12px 10px;font-size:15px}}@media(max-width:600px){.rail-item{padding:10px 8px;font-size:14px}.rail-count{display:none}.row{grid-template-columns:34px 30px 1fr 14px 20px;gap:6px;padding:8px 6px}.row-name{font-size:14px}.row-num{font-size:11px}.row-logo{width:28px;height:28px}.clock{top:8px;right:10px;padding:4px 8px;font-size:15px}.nav-tab{top:8px;left:10px;padding:5px 8px;font-size:13px}.stage-name{top:8px;left:76px;padding:3px 8px;font-size:13px}.stage-tabs{display:none}.pbar{gap:6px;padding:8px 10px}.pbtn{padding:3px 7px;font-size:12px}.vol{width:56px}.pbuf{display:none}.stats-box{top:44px;left:12px;font-size:11px}.play-big{width:64px;height:64px;font-size:24px}}
