:root{--bg:#0f1115;--panel:#171a21;--card:#1e222b;--line:#2b303b;--fg:#eceff4;--muted:#98a2b3;--accent:#5ec2ff;--key:#262b36;--bad:#ff6a5f;
--sans:-apple-system,system-ui,"Segoe UI",sans-serif;--mono:ui-monospace,Menlo,monospace;color-scheme:dark}
@media (prefers-color-scheme: light){:root{--bg:#f4f5f8;--panel:#fff;--card:#eef0f5;--line:#d6dae3;--fg:#161a22;--muted:#5d6678;--accent:#0a74c4;--key:#e3e6ee;color-scheme:light}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.4 var(--sans)}
button,select,input,textarea{font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
button{cursor:pointer}button:hover{border-color:var(--accent)}
button:focus-visible,select:focus-visible,input:focus-visible,.cell:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.primary{background:var(--accent);color:#04121c;border-color:transparent;font-weight:600}
.ghost{background:none}.muted{color:var(--muted)}.err{color:var(--bad);margin:4px 0;min-height:1em}
.sp{flex:1}.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.row.end{justify-content:flex-end;margin-top:12px}.gap{gap:8px}
.shell{max-width:1240px;margin:0 auto;padding:0 12px 40px}
.top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 0}
.logo{font-size:18px;margin-right:4px}.role{color:var(--muted);font-size:12px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{border:0;border-radius:8px 8px 0 0;background:none;color:var(--muted);padding:9px 16px}
.tabs button.on{background:var(--panel);color:var(--fg);box-shadow:inset 0 -2px var(--accent)}
main{background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;padding:12px;min-height:60vh}
.chip{display:inline-block;border-radius:99px;padding:3px 12px;background:var(--card);border:1px solid var(--line);color:var(--fg);text-decoration:none;font-size:13px}
.chip.on{border-color:var(--accent);color:var(--accent)}.chip.add{border-style:dashed}.chip.del{color:var(--bad)}
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:0;border-radius:0;background:var(--card)}.seg button.on{background:var(--accent);color:#04121c;font-weight:600}
.layerbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.mapwrap{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:12px}
@media(max-width:900px){.mapwrap{grid-template-columns:1fr}}
.mapscroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:8px}
.map{display:block;width:100%;height:auto;margin:0 auto}.map.kbd{min-width:880px}.map.pad{max-width:660px;min-width:420px}
.cell{cursor:pointer}.cell .cap{stroke:var(--line);stroke-width:.04;transition:stroke .1s}
.pad .cell .cap{stroke-width:1.5}
.cell:hover .cap,.cell.hl .cap{stroke:var(--accent);stroke-width:.08}.pad .cell:hover .cap,.pad .cell.hl .cap{stroke-width:3}
.cell.held .cap{stroke:var(--accent);stroke-dasharray:.15 .1}.pad .cell.held .cap{stroke-dasharray:6 4;stroke-width:2}
.kbd .kl{font:600 .26px var(--sans)}.kbd .ka{font:.27px var(--sans);pointer-events:none}.kbd .kc{font:700 .22px var(--sans)}
.mouse-body{fill:none;stroke:var(--line);stroke-width:.06}
.pad .cl{font:700 13px var(--sans);pointer-events:none}.pad .ca{font:11px var(--sans);pointer-events:none}.pad .ca.out{fill:var(--fg)}.pad .cc{font:700 11px var(--sans);fill:var(--fg)}
.ctl-body{fill:var(--card);stroke:var(--line);stroke-width:2}.ctl-well{fill:var(--bg);stroke:var(--line);stroke-width:1.5}.ctl-logo{fill:none;stroke:var(--line);stroke-width:2}
.pad .ca.sends{fill:var(--muted);opacity:.6;font-size:10px}.map.cyro{max-width:700px}
.ctl-caption{font:600 10px var(--sans);letter-spacing:.15em;fill:var(--muted)}
.side{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--card);max-height:560px;overflow:auto}
.side h3{margin:0 0 8px;font-size:14px}.side small{color:var(--muted);font-weight:400}
.binds,.plain{list-style:none;margin:0;padding:0}.binds li{display:flex;gap:6px;align-items:center;padding:4px 6px;border-radius:6px;cursor:default}
.binds li.on,.binds li:hover{background:var(--bg)}.binds .dotc{margin-left:auto}
.k{font:12px var(--mono);background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:0 6px;white-space:nowrap}
.dotc{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;flex:none}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:12px}
.lg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.tablewrap{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:900px}
th{text-align:left;color:var(--muted);font-weight:500;font-size:12px;padding:6px 6px;border-bottom:1px solid var(--line)}
td{padding:3px 4px;border-bottom:1px solid var(--line);vertical-align:middle}
.cellin{width:100%;background:transparent;border-color:transparent;padding:4px 6px}.cellin:hover,.cellin:focus{border-color:var(--line);background:var(--card)}
.cellin.narrow{width:56px}.cellin.bad{border-color:var(--bad)}
tr.unbound td:first-child input{opacity:.7}
.bchip{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:0 6px;margin:1px 2px;font:12px var(--mono);white-space:nowrap}
.x{border:0;background:none;color:var(--muted)}.x:hover{color:var(--bad)}
.vlist{display:grid;gap:8px;margin:10px 0}.vcard{border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--card)}.vcard.on{border-color:var(--accent)}
.diff{margin-top:14px;border-top:1px solid var(--line);padding-top:8px}.diff code{font:12px var(--mono);background:var(--bg);padding:0 4px;border-radius:4px}
.badge{font-size:11px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:1px 8px;margin-left:8px;color:#f5a524}
.danger{margin-top:20px}.danger summary{cursor:pointer;color:var(--muted)}
dialog{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:14px;padding:0;max-width:min(520px,94vw)}
dialog::backdrop{background:#0009}.dlg{padding:16px;display:grid;gap:10px}.dlg h3{margin:0}.dlg select,.dlg input:not([type=checkbox]){width:100%}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hidden{display:none}
.chain{min-height:34px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;border:1px dashed var(--line);border-radius:8px;padding:6px}
.then{color:var(--muted);font-size:12px}.picks{display:flex;gap:4px;flex-wrap:wrap}
.login{max-width:300px;margin:18vh auto;display:grid;gap:10px;text-align:center}.login h1{margin:0}.login input{text-align:center}
.empty{color:var(--muted);text-align:center;padding:60px 0}