:root{--bg:#0d141c;--pn:#111b25;--pn2:#172431;--ln:#26384a;--tx:#dbe6f0;--mu:#8aa0b4;--ac:#19b5f0;--am:#f5b400;--rd:#ff4d4d;--gn:#2ecc71}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#e9edf1;color:var(--tx);font:14px/1.45 -apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif}
#view{position:fixed;inset:0}
#view canvas{display:block;touch-action:none}
button,select,input{font:inherit}
button{background:var(--pn2);color:var(--tx);border:1px solid var(--ln);border-radius:6px;padding:6px 10px;cursor:pointer}
button.on,button:active{background:var(--ac);color:#001018;border-color:var(--ac)}
button.pri{background:var(--ac);color:#001018;font-weight:700;border:0}
#top{position:fixed;top:0;left:0;right:0;height:48px;display:flex;align-items:center;gap:10px;padding:0 10px;padding-top:env(safe-area-inset-top);background:linear-gradient(#0d141cf0,#0d141cd8);border-bottom:1px solid var(--ln);z-index:20}
.brand{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap}.brand b{color:var(--ac);letter-spacing:2px;font-size:13px}.brand span{font-size:11px;color:var(--mu)}
.tbtns{display:flex;gap:4px;overflow-x:auto;flex:1;justify-content:flex-end}.tbtns button{padding:4px 8px;font-size:12px;white-space:nowrap}
#hud{position:fixed;top:56px;right:10px;z-index:10;font:12px/1.4 ui-monospace,Menlo,Consolas,monospace;color:#0d141c;text-align:right;pointer-events:none;max-width:56vw}
#hud #camlbl{background:#0d141c;color:var(--am);display:inline-block;padding:1px 6px;border-radius:3px}
#hud #tlbl{font-size:15px;font-weight:700}
#hud #live div{background:#ffffffc8;margin-top:2px;padding:1px 6px;border-radius:3px;display:inline-block}
#warn div{background:#fff3cd;color:#7a4a00;border-left:3px solid var(--am);margin-top:3px;padding:1px 6px;font-family:inherit}
#legend{position:fixed;right:10px;bottom:120px;z-index:10;background:#0d141ce0;padding:6px 8px;border-radius:6px;font-size:11px;width:200px}
#legend .bar{height:10px;border-radius:2px;background:linear-gradient(90deg,#00f,#0ff,#0f0,#ff0,#f00)}
#legend .ticks{display:flex;justify-content:space-between;color:var(--mu)}
#triad{position:fixed;left:10px;bottom:120px;width:70px;height:70px;z-index:10;pointer-events:none}
.hide{display:none!important}
#timeline{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;gap:6px;align-items:center;padding:6px 10px calc(6px + env(safe-area-inset-bottom));background:#0d141cf0;border-top:1px solid var(--ln)}
#timeline input[type=range]{flex:1;accent-color:var(--ac)}#tread{font:12px ui-monospace,monospace;min-width:72px;text-align:right;color:var(--am)}
.chk{font-size:12px;color:var(--mu);white-space:nowrap}
select,input[type=number],input[type=text]{background:#0b121a;color:var(--tx);border:1px solid var(--ln);border-radius:5px;padding:5px;width:100%}
#panel{position:fixed;z-index:18;background:var(--pn);border:1px solid var(--ln);display:flex;flex-direction:column}
#tabs{display:flex;gap:2px;overflow-x:auto;padding:4px;background:var(--bg);border-bottom:1px solid var(--ln);flex:none}
#tabs button{padding:6px 9px;font-size:13px;white-space:nowrap;border:0;background:transparent;color:var(--mu)}
#tabs button.on{color:var(--ac);background:var(--pn2)}
#collapse{margin-left:auto}
#pbody{overflow:auto;padding:10px;flex:1;-webkit-overflow-scrolling:touch}
section{display:none}section.on{display:block}
h3{margin:12px 0 6px;font-size:13px;color:var(--ac);letter-spacing:1px;border-bottom:1px solid var(--ln);padding-bottom:3px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}.g2 label,.f label{font-size:12px;color:var(--mu);display:block}
.note{font-size:11.5px;color:var(--mu);background:#0b121a;border-left:3px solid var(--am);padding:6px 8px;margin:8px 0;border-radius:3px}
table{width:100%;border-collapse:collapse;font-size:12px}td,th{padding:4px 5px;border-bottom:1px solid var(--ln);text-align:left;vertical-align:top}th{color:var(--mu);font-weight:500}
td.n{font-family:ui-monospace,monospace;text-align:right;white-space:nowrap}
.cand{background:var(--pn2);border:1px solid var(--ln);border-radius:8px;padding:8px;margin:6px 0;cursor:pointer}.cand:hover{border-color:var(--ac)}
.cand .p{float:right;font:700 18px ui-monospace,monospace;color:var(--am)}.cand .t{font-weight:600}.cand .d{font-size:12px;color:var(--mu)}
.pbar{height:6px;background:#0b121a;border-radius:3px;overflow:hidden;margin-top:4px}.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--ac),var(--am))}
.ebar{display:flex;align-items:center;gap:6px;font-size:12px;margin:2px 0}.ebar span:first-child{width:42%;color:var(--mu)}.ebar b{flex:1;height:10px;background:#0b121a;border-radius:2px;overflow:hidden}.ebar b i{display:block;height:100%;background:var(--ac)}
.sev0{color:var(--gn)}.sev1{color:#9be15d}.sev2{color:var(--am)}.sev3{color:var(--rd)}
.dash{display:grid;grid-template-columns:1fr;gap:8px}.dash canvas{width:100%;height:150px;background:#0b121a;border:1px solid var(--ln);border-radius:4px}
.rate{display:inline-block;padding:1px 8px;border-radius:4px;font-weight:700;color:#001}.rG{background:#2ecc71}.rA{background:#c8e65a}.rM{background:#f5b400}.rP{background:#ff5d5d}
.stars{color:var(--am);letter-spacing:2px}
.btnrow{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
#toast{position:fixed;left:50%;top:60px;transform:translateX(-50%);background:#0d141cf0;color:var(--tx);padding:8px 14px;border-radius:6px;z-index:40;display:none;border:1px solid var(--ac)}
#drivepad{position:fixed;left:0;right:0;bottom:56px;z-index:16;display:flex;justify-content:space-between;padding:10px;pointer-events:none}
#drivepad button{pointer-events:auto;width:64px;height:64px;border-radius:50%;font-size:15px;background:#0d141cc0;margin:4px}
.prog{height:8px;background:#0b121a;border-radius:4px;overflow:hidden}.prog i{display:block;height:100%;width:0;background:var(--ac)}
/* 桌機：左側面板 */
@media (min-width:900px){
  #panel{top:48px;left:0;bottom:50px;width:420px;border-left:0}
  #panel.col{transform:translateX(-380px)}
  #hud{max-width:40vw}
  #legend{bottom:64px}#triad{left:430px;bottom:60px}
  .dash{grid-template-columns:1fr 1fr}
}
/* 手機：底部抽屜 */
@media (max-width:899px){
  #panel{left:0;right:0;bottom:calc(46px + env(safe-area-inset-bottom));height:48vh;border-radius:12px 12px 0 0;transition:height .2s}
  #panel.col{height:42px}
  #panel.col #pbody{display:none}
  #hud{font-size:11px}
  #legend{bottom:auto;top:56px;left:10px;right:auto;width:160px}
  #triad{display:none}
  .brand span{display:none}
  #drivepad{bottom:calc(48vh + 50px)}
  body.pcol #drivepad{bottom:100px}
}

#timeline select{width:auto}
@media (max-width:899px){ .chk{font-size:0} .chk input{transform:scale(1.1)} .chk::after{content:'慢放';font-size:12px} #tread{min-width:52px} }