:root{
  --bg:#f5f6f8;--surface:#fff;--sunk:#eef0f3;--border:#d9dde3;--text:#1b1f24;--t2:#4a525c;--t3:#79818c;
  --accent:#2f6fde;--accent-bg:#e8f0fd;--green:#178a4c;--red:#c8372d;--amber:#a86a00;--rec:#d23c3c;
  --fs-1:12px;--fs-2:13px;--fs-3:14px;--radius:8px;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:var(--fs-3);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111418;--surface:#191d22;--sunk:#0d1013;--border:#2c323a;--text:#e6e9ed;--t2:#b7bec7;--t3:#838c97;
  --accent:#6fa0ff;--accent-bg:#1b2a44;--green:#4cc584;--red:#f0716a;--amber:#e3a940;--rec:#f06a6a;}}
:root[data-theme="dark"]{--bg:#111418;--surface:#191d22;--sunk:#0d1013;--border:#2c323a;--text:#e6e9ed;--t2:#b7bec7;--t3:#838c97;
  --accent:#6fa0ff;--accent-bg:#1b2a44;--green:#4cc584;--red:#f0716a;--amber:#e3a940;--rec:#f06a6a;}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text)}
.top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
.brand{font-weight:700;font-size:16px}.logo{color:var(--accent)}
.tabs,.subtabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs button,.subtabs button{background:none;border:1px solid transparent;color:var(--t2);padding:6px 12px;border-radius:6px;cursor:pointer;font:inherit}
.tabs button.on,.subtabs button.on{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
.subtabs{margin:0 0 10px}
main{padding:14px 16px;max-width:1500px;margin:0 auto}
.tab,.sub{display:none}.tab.on,.sub.on{display:block}
.cols{display:grid;grid-template-columns:240px 1fr;gap:14px;align-items:start}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media (max-width:900px){.cols,.cols2{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:14px;min-width:0}
.panel-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.panel-h h2,.panel-h h3{margin:0;font-size:15px}
h3{font-size:14px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}
.grow{flex:1;min-width:120px}.sep{width:1px;height:22px;background:var(--border)}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:8px 0}
label{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-2);color:var(--t2)}
label.inl{flex-direction:row;align-items:center;gap:6px}
label.blk{margin:6px 0}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:6px 8px;min-width:0}
input[type=checkbox]{width:auto}
textarea{width:100%;resize:vertical}
input.big{font-size:16px;font-weight:600}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
button{background:var(--sunk);border:1px solid var(--border);border-radius:6px;padding:6px 12px;cursor:pointer}
button:hover{border-color:var(--t3)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.danger{color:var(--red);border-color:var(--red);background:none}
button.danger.on{background:var(--red);color:#fff}
button.sm{padding:3px 9px;font-size:var(--fs-2)}
button.linkish{background:none;border:none;color:var(--accent);padding:0;text-decoration:underline}
button:disabled{opacity:.5;cursor:default}
.mono,code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-2)}
code{background:var(--sunk);padding:1px 4px;border-radius:4px}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--sunk);padding:8px;border-radius:6px;margin:6px 0}
.xs{font-size:var(--fs-1)}.t3{color:var(--t3)}.green{color:var(--green)}.red{color:var(--red)}.amber{color:var(--amber)}
.list{list-style:none;margin:0 0 8px;padding:0}
.list li{padding:7px 9px;border-radius:6px;cursor:pointer;display:flex;justify-content:space-between;gap:6px}
.list li:hover{background:var(--sunk)}.list li.on{background:var(--accent-bg);color:var(--accent)}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:var(--fs-2)}
th{text-align:left;color:var(--t3);font-weight:500;border-bottom:1px solid var(--border);padding:5px 6px;white-space:nowrap}
td{border-bottom:1px solid var(--border);padding:5px 6px;vertical-align:top}
td input,td select{width:100%}
table.steps td.sel{min-width:320px}
table.steps td.sel input{margin-bottom:3px}
.screen{position:relative;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--sunk);aspect-ratio:1280/800;margin:8px 0}
.screen img{display:block;width:100%;height:100%;cursor:crosshair}
.screen img:not([src]){display:none}
.screen.inspect img{cursor:help}
.screen.rec{outline:3px solid var(--rec);outline-offset:-3px}
.screen:focus{outline:2px solid var(--accent);outline-offset:-2px}
.screen.rec:focus{outline:3px solid var(--rec)}
.screen .empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center}
.typing,.pick{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;padding:6px 10px;border:1px solid var(--accent);border-radius:6px;background:var(--accent-bg);font-size:var(--fs-2)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:3px 9px;border:1px solid var(--border);border-radius:999px;background:var(--sunk);font-size:var(--fs-2);cursor:pointer}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.sample-view{padding:8px 10px;background:var(--sunk);border-radius:6px;margin:6px 0;line-height:1.6;min-height:20px;overflow-wrap:anywhere}
.sample-view mark{background:var(--accent);color:#fff;padding:1px 3px;border-radius:3px}
.sample-view .num{border-bottom:1px dashed var(--t3);cursor:pointer}
.pair{display:flex;gap:16px;align-items:center;margin-top:10px;flex-wrap:wrap}
#pair-qr{background:#fff;padding:8px;border-radius:6px;line-height:0}
.code{font-size:34px;font-weight:700;letter-spacing:6px;font-family:ui-monospace,monospace}
.pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:var(--fs-1);border:1px solid currentColor}
.ep{border-left:3px solid var(--accent)}
.ep.off{border-left-color:var(--t3);opacity:.85}
.keybox{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--amber);border-radius:6px;background:var(--sunk);margin:8px 0;flex-wrap:wrap}
.keybox code{font-size:14px;overflow-wrap:anywhere}
.spin{display:inline-block;width:11px;height:11px;border:2px solid var(--t3);border-top-color:transparent;border-radius:50%;animation:sp .8s linear infinite;vertical-align:-1px}
@keyframes sp{to{transform:rotate(360deg)}}
.steplog{margin:6px 0;padding-left:18px}
.steplog li{margin:2px 0}
.shot{max-width:100%;border:1px solid var(--border);border-radius:6px;margin-top:8px}
.login{position:fixed;inset:0;z-index:30;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:16px}
.login-box{width:100%;max-width:380px;display:flex;flex-direction:column;gap:10px;padding:22px}
.login-box h2{margin:0;font-size:20px}.login-box p{margin:0}
.login-box input{font-size:15px;padding:9px 10px}.login-box button{padding:9px 12px;font-weight:600}
#login-msg:empty{display:none}
input.num{width:64px}
.row.tight{margin:2px 0;gap:6px}
td .row.tight select,td .row.tight input{width:auto}td input.num,td .row.tight input.num{width:68px}td .row.tight select{max-width:100%}
td label.kv{flex-direction:row;align-items:center;gap:6px;margin:2px 0}td label.kv span{min-width:76px;font-size:var(--fs-1);color:var(--t3)}
td label.kv input{flex:1;margin:0}
.st-tools{padding:6px 8px;background:var(--sunk);border-radius:6px}
.st-tools label.inl{font-size:var(--fs-2)}
table.steps tr.flow td{background:var(--accent-bg)}
table.steps tr.flow-end td,table.steps tr.flow-else td,table.steps tr.flow-break td{background:var(--sunk)}
table.steps tr.flow-fail td{background:var(--sunk)}table.steps tr.flow-fail td:first-child{color:var(--red)}
table.steps tr.flow-run_workflow td{background:var(--sunk)}table.steps tr.flow-run_workflow td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.workers{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.wk{border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;background:var(--surface);display:flex;flex-direction:column;gap:5px;min-width:0}
.wk.waiting{opacity:.75;border-style:dashed}
.wk-h{display:flex;gap:6px;align-items:center;font-size:var(--fs-2)}.wk-h .wk-wf{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-st{font-size:var(--fs-2);overflow-wrap:anywhere}
.wk-screen{position:relative;aspect-ratio:1280/800;background:var(--sunk);border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.wk-screen img{width:100%;height:100%;object-fit:cover;display:block}.wk-screen img:not([src]){display:none}
.empty-wk{padding:8px 0}
.bar{height:6px;background:var(--sunk);border-radius:99px;overflow:hidden;min-width:120px;margin-bottom:3px}.bar i{display:block;height:100%;background:var(--green)}
.toast{position:fixed;bottom:18px;right:18px;background:var(--text);color:var(--surface);padding:9px 14px;border-radius:8px;font-size:var(--fs-2);max-width:420px;z-index:20}
details summary{cursor:pointer;color:var(--t2)}
.help ol{margin:6px 0;padding-left:18px}
.help li{margin:3px 0}
.empty-main .panel{padding:30px;text-align:center}
@media (max-width:600px){main{padding:10px}.top{padding:8px 10px}.brand .xs{display:none}}