:root{
  --bg:#0e0e10;--panel:#18181b;--panel2:#1f1f23;--line:#2f2f35;--text:#efeff1;--muted:#adadb8;
  --accent:#9146ff;--accent2:#772ce8;--ok:#00c48c;--warn:#f5a623;--err:#ff4d4d;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,"Segoe UI","Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
input[type=text],input[type=password],input[type=number],input:not([type]),select,textarea{
  background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:6px 8px;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
textarea{width:100%;resize:vertical}
button{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:6px 12px;cursor:pointer}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.primary:hover{background:var(--accent2)}
button.sm{padding:2px 8px;font-size:12px}
button.danger:hover{border-color:var(--err);color:var(--err)}
.top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
.brand{font-weight:700;font-size:16px;display:flex;gap:8px;align-items:center}
.brand small{color:var(--muted);font-weight:400}
.conn{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.conn input:not([type=checkbox]){width:180px;max-width:100%}
select{max-width:100%}
.row label{flex-wrap:wrap;max-width:100%}
.tab,.live{min-width:0}
.pill{font-size:12px;padding:2px 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.pill.on{color:var(--ok);border-color:var(--ok)}
.pill.wait{color:var(--warn);border-color:var(--warn)}
.switch{display:flex;gap:6px;align-items:center;cursor:pointer;user-select:none}
main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;padding:16px;max-width:1500px;margin:0 auto}
@media (max-width:1000px){main{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;min-width:0}
.tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:0 8px}
.tabs button{background:none;border:none;border-bottom:2px solid transparent;border-radius:0;padding:10px 12px;color:var(--muted)}
.tabs button.active{color:var(--text);border-bottom-color:var(--accent)}
.tab{display:none;padding:16px}
.tab.active{display:block}
.grp{margin-bottom:18px}
.grp h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 8px}
.row{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-bottom:8px}
.row label{display:flex;gap:6px;align-items:center}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.field>span{color:var(--muted);font-size:12px}
.hint{color:var(--muted);font-size:12px}
.warnbox{background:#3a2a0a;border:1px solid #6b4d12;color:#ffd58a;border-radius:8px;padding:8px 10px;font-size:13px;margin-bottom:10px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.cols2{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:6px 4px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-weight:500;font-size:12px}
td select,td input:not([type=checkbox]):not([type=range]){width:100%}
td input[type=range]{width:80px}
.scroll-x{overflow-x:auto}
body[data-engine=azure] .eng-browser,body[data-engine=browser] .eng-azure{display:none}
.vwarn{color:var(--warn);font-size:11px}
body:not([data-ai=ollama]) .ai-ollama,body:not([data-ai=openai]) .ai-openai,body:not([data-ai=anthropic]) .ai-anthropic,body:not([data-ai=gemini]) .ai-gemini,body[data-ai=ollama] .ai-cloud{display:none!important}
body.hosted .only-local,body:not(.hosted) .only-hosted{display:none!important}
.chip{display:inline-block;min-width:26px;text-align:center;font-size:11px;font-weight:700;padding:1px 6px;border-radius:4px;color:#fff;margin-right:4px}
.l-en{background:#3b82f6}.l-fr{background:#ef4444}.l-yue{background:#f59e0b;color:#111}
.l-zh-TW{background:#10b981}.l-zh-CN{background:#14b8a6}.l-ja{background:#ec4899}.l-ko{background:#8b5cf6}.l-other{background:#6b7280}
.live{padding:16px;display:flex;flex-direction:column;gap:14px}
.now{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px;min-height:84px}
.now .who{font-weight:700;margin-bottom:4px}
.now .who .tag{font-weight:400;color:var(--muted);font-size:12px;margin-left:6px}
.now .segs div{margin:2px 0}
.now.roast{border-color:#ff6a00;box-shadow:0 0 0 1px #ff6a0055 inset}
.controls{display:flex;flex-wrap:wrap;gap:8px}
.queue{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.qitem{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-bottom:1px solid var(--line)}
.qitem:last-child{border-bottom:none}
.qitem .body{flex:1;min-width:0;word-break:break-word}
.qitem .u{font-weight:600;margin-right:4px}
.empty{color:var(--muted);padding:10px;text-align:center;font-size:13px}
.log{height:220px;overflow:auto;font:12px/1.5 ui-monospace,Consolas,monospace;background:#0a0a0c;border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.log div{white-space:pre-wrap;word-break:break-word}
.log .warn{color:var(--warn)}.log .err{color:var(--err)}.log .roast{color:#ff9a4d}.log .ok{color:var(--ok)}
.log time{color:#666;margin-right:6px}
.analysis{background:var(--panel2);border:1px dashed var(--line);border-radius:8px;padding:8px;font-size:13px}
.analysis:empty{display:none}
.unlock{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--accent);color:#fff;padding:10px 18px;border-radius:99px;font-weight:600;box-shadow:0 6px 24px #0008;z-index:10;cursor:pointer}
.help h4{margin:16px 0 6px}
.help ol,.help ul{padding-left:20px;margin:6px 0}
.help code,.help kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:0 4px;font-size:12px}
details summary{cursor:pointer;color:var(--muted)}
.lookup-out{font-size:13px;margin-top:6px}
/* overlay (OBS) mode */
body.overlay{background:transparent}
body.overlay .app,body.overlay .unlock{display:none!important}
.caption{position:fixed;left:24px;right:24px;bottom:24px;background:#000c;border-left:4px solid var(--accent);border-radius:8px;padding:12px 16px;font-size:22px;line-height:1.35;transition:opacity .4s;opacity:0}
.caption.show{opacity:1}
.caption.roast{border-left-color:#ff6a00}
.caption .u{font-weight:700;margin-right:8px;color:#c9a7ff}