:root{--bg:#111418;--panel:#1b2027;--fg:#e6e9ee;--mut:#8b95a3;--acc:#ff8a00;--you:#2b5cab;--bot:#2a3038}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 -apple-system,system-ui,sans-serif}
main{display:grid;gap:10px;padding:10px;height:calc(100vh - 42px);
 grid-template-columns:78px 340px minmax(0,1fr) 360px;grid-template-rows:auto 1fr;
 grid-template-areas:"tabs content v3 camc" "tabs content v3 mapc"}
main:not([data-tab=chat]){grid-template-columns:78px minmax(0,1fr) 380px;grid-template-areas:"tabs content v3" "tabs content camc" "tabs content mapc";grid-template-rows:auto auto 1fr}
#tabs{grid-area:tabs;display:flex;flex-direction:column;gap:6px}
#tabs button{background:var(--panel);color:var(--fg);padding:10px 2px;font-size:11px;font-weight:500;border:2px solid transparent;display:flex;flex-direction:column;gap:2px;align-items:center}
#tabs button span{font-size:10.5px;line-height:1.1;text-align:center}
#tabs button.on{border-color:var(--acc)}#tabs button:disabled{opacity:.35;cursor:default}
#content{grid-area:content;display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0}
.pane{display:none;flex:1;min-height:0;overflow:auto;flex-direction:column;gap:8px}
main[data-tab=chat] #p-chat,main[data-tab=res] #p-res,main[data-tab=help] #p-help,main[data-tab=man] #p-man,main[data-tab=perc] #p-perc,main[data-tab=teach] #p-teach,main[data-tab=diag] #p-diag,main[data-tab=loops] #p-loops,main[data-tab=sens] #p-sens{display:flex}
#v3{grid-area:v3;display:flex;flex-direction:column;min-height:0}#camc{grid-area:camc}#mapc{grid-area:mapc;min-height:0;overflow:auto}
main:not([data-tab=chat]) #view3d{min-height:0;height:230px}
@media(max-width:1100px){main{display:block;height:auto}#tabs{flex-direction:row}}
.card{background:var(--panel);border-radius:10px;padding:10px}
h1{font-size:15px;margin:0 0 6px}h2{font-size:14px;margin:4px 0}#status{color:var(--mut);font-size:12px}
#log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;min-height:150px}
.m{padding:7px 10px;border-radius:8px;white-space:pre-wrap;max-width:92%}
.u{background:var(--you);align-self:flex-end}.b{background:var(--bot)}.e{color:var(--mut);font-size:12px;padding:0 4px}
#cmdbar{display:flex;gap:6px}input,select{flex:1;padding:8px;border-radius:8px;border:1px solid #333;background:#0c0f12;color:var(--fg)}
button{padding:8px 11px;border:0;border-radius:8px;background:var(--acc);color:#111;font-weight:600;cursor:pointer}
button.s{background:#39414c;color:var(--fg)}button.on{background:var(--acc);color:#111}
img{width:100%;border-radius:6px;display:block}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips button{font-weight:400;padding:5px 8px;font-size:12px}.chips button.on{font-weight:700}
#view3d{width:100%;flex:1;min-height:200px;object-fit:contain;background:#000;cursor:grab;touch-action:none;user-select:none}
.bar{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--mut);flex-wrap:wrap}.hint{font-size:11px}
.live-badge{margin-left:auto}.live-badge b{color:var(--acc)}
.vp{position:relative;overflow:hidden;background:#0c0f12;border-radius:10px;height:62vh;cursor:grab;touch-action:none}
.pz{transform-origin:0 0;position:absolute;left:0;top:0}.pz svg{display:block}
.zbar{position:absolute;right:8px;top:8px;display:flex;gap:4px}.zbar button{padding:4px 9px}
.desc{color:var(--mut);margin:2px 0 10px}
.live rect,.live polygon,.live circle,.live ellipse,.live path.label-container{fill:#ff8a00 !important;stroke:#fff !important;stroke-width:3px !important}
.live .nodeLabel,.live span{color:#111 !important;font-weight:700}
#p-loops g.node{cursor:pointer}#p-loops g.node.sel rect,#p-loops g.node.sel circle{stroke:#ff8a00 !important;stroke-width:3px !important}
.lpgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:10px}
#info{position:sticky;top:0;align-self:start;max-height:calc(100vh - 120px);overflow:auto;font-size:13px}
#info dt{color:var(--acc);font-size:11px;text-transform:uppercase;margin-top:8px}#info dd{margin:2px 0}#info code{font-size:12px;color:#9cc}
#charts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.ch{background:var(--panel);border-radius:8px;padding:6px}.ch .t{font-size:12px;color:var(--mut);display:flex;justify-content:space-between}
canvas{width:100%;height:90px;display:block}
table{border-collapse:collapse;width:100%;font-size:12px}th,td{padding:4px 8px;border-bottom:1px solid #2a3038;text-align:left;vertical-align:top}th{color:var(--mut);position:sticky;top:0;background:var(--panel)}
td.lv{font-family:ui-monospace,monospace;color:#9fd}

#top{display:flex;gap:14px;align-items:center;padding:6px 12px;background:#0c0f12;height:42px;font-size:13px}
#top label{display:flex;gap:6px;align-items:center;color:var(--mut)}#top select{flex:none;padding:4px 6px}
.badge{margin-left:auto;padding:3px 10px;border-radius:10px;background:#2a3038;color:var(--fg);font-size:12px}.badge.man{background:var(--acc);color:#111;font-weight:700}
#swstat{color:var(--acc)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:6px 0}.grow{flex:1;min-width:180px}
.pad{text-align:center}.pad button{width:44px;height:40px;margin:2px;padding:0}.pad button.act{background:var(--acc);color:#111}
#dpad-man .joy,#dpad-chat .joy,.joy{width:130px;height:130px;border-radius:50%;background:#0c0f12;border:2px solid #39414c;position:relative;touch-action:none}
#dpad-man .knob,.knob{width:44px;height:44px;border-radius:50%;background:var(--acc);position:absolute;left:43px;top:43px;pointer-events:none}
.jog{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:6px 0}.jog button{padding:8px 2px;font-size:12px}
#joints{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 14px;margin:8px 0}
#joints label{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--mut)}#joints input{padding:0}#joints span{width:52px;text-align:right;color:var(--fg);font-family:ui-monospace,monospace}
#pose{background:#0c0f12;border-radius:8px;padding:8px;font-size:12px;overflow:auto;margin:6px 0}
#m-demo input{flex:1}#demolist td button{padding:3px 8px;font-size:12px}
body.switching #content,body.switching #v3{opacity:.45;pointer-events:none}

#camlive{width:640px;max-width:100%;background:#000;border-radius:6px;image-rendering:auto}
.stats{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0;font-size:13px}.stats b{color:var(--acc);font-size:16px}
#detlist td{font-size:12px}.out{background:#0c0f12;border-radius:8px;padding:8px;margin:6px 0;font-size:12px;white-space:pre-wrap;min-height:20px;color:#9fd}
#demolist td{vertical-align:top}#demolist button{padding:3px 8px;font-size:12px;margin:1px}

.err{background:#5a1d1d;color:#ffd0d0;border:1px solid #e53935;border-radius:8px;padding:10px 12px;margin:6px;font-size:13px;white-space:pre-wrap}

#camimgs{display:flex;gap:6px}#camimgs img{flex:1;min-width:0}
#drivebox summary{cursor:pointer;color:var(--mut);font-size:12px;padding:4px 0}
#drivebox .pad button{width:40px;height:36px}
#mapc img{background:#1d2026}

#swstat{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#swpre{position:fixed;top:44px;left:12px;right:12px;max-height:40vh;overflow:auto;white-space:pre-wrap;word-break:break-word;background:#2a1414;color:#ffd0d0;border:1px solid #e53935;border-radius:8px;padding:10px;z-index:50;font-size:12px}
#camgrid .bigcam img{width:100%;border-radius:6px;display:block}
#camgrid .thumbs{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
#camgrid .th{position:relative;width:calc(50% - 2px);cursor:pointer;border:2px solid transparent;border-radius:6px;overflow:hidden}
#camgrid .th.on{border-color:var(--acc)}#camgrid .th img{width:100%;display:block}
#camgrid .lbl{position:absolute;left:3px;top:2px;font-size:10px;background:#000a;padding:0 4px;border-radius:3px}
#camgrid .grp{font-size:11px;color:var(--mut);margin:6px 0 0}
#mapwrap{position:relative}#mapwrap img{cursor:crosshair;width:100%}
#mapinfo{position:absolute;left:6px;top:6px;width:min(330px,92%);background:#12161cf2;border:1px solid #39414c;border-radius:8px;padding:8px;font-size:12px;z-index:5;max-height:92%;overflow:auto}
#mapinfo h3{margin:0 0 4px;font-size:13px}#mapinfo dl{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;margin:4px 0}#mapinfo dt{color:var(--mut)}#mapinfo dd{margin:0}
#mapinfo .src{padding:0 6px;border-radius:8px;color:#111;font-weight:700}#mapinfo img.crop{max-width:120px;border-radius:4px;float:right;margin-left:6px}
#mapinfo .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}#mapinfo .x{float:right;cursor:pointer;color:var(--mut)}
#mapc.big{position:fixed;inset:54px 14px 14px 100px;z-index:40;overflow:auto;box-shadow:0 0 0 9999px #000a}#mapc.big #mapwrap img{max-height:calc(100vh - 150px);width:auto;max-width:100%;margin:auto;display:block}
#maplegend{margin-top:4px}
main:not([data-tab=chat]) #camgrid .bigcam img{max-height:170px;width:auto;margin:auto}
main:not([data-tab=chat]) #camgrid .th{width:calc(33.3% - 3px)}

#resbody h2{font-size:15px;margin:14px 0 4px;border-bottom:1px solid #2a3038;padding-bottom:3px}#resbody h3{font-size:13px;margin:10px 0 2px}
.rc{background:#151a20;border-radius:8px;padding:8px 10px;margin:8px 0}.rc .fl{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.rc .fl a{font-size:11px;background:#262d36;border-radius:10px;padding:1px 8px;color:#9cc;cursor:pointer;text-decoration:none}.rc .fl a:hover{background:#39414c}
table.mx td,table.mx th{text-align:center;font-size:11px;padding:3px 5px}table.mx td.c{min-width:46px;border-radius:4px;color:#111;font-weight:600}
.bars{display:grid;grid-template-columns:minmax(120px,220px) 1fr auto;gap:2px 8px;align-items:center;margin:6px 0;font-size:12px}
.bars .bt{background:#262d36;border-radius:4px;height:12px;overflow:hidden}.bars .bf{height:100%}.bars .bv{font-family:ui-monospace,monospace}
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:10px}
.md{font-size:13px;line-height:1.5;max-height:70vh;overflow:auto}.md table{margin:6px 0}.md code{background:#0c0f12;padding:0 4px;border-radius:3px}.md pre{background:#0c0f12;padding:8px;border-radius:6px;overflow:auto;white-space:pre-wrap}
.md h1,.md h2,.md h3{margin:10px 0 4px}.md blockquote{border-left:3px solid #39414c;margin:4px 0;padding-left:8px;color:var(--mut)}
#demolist img.th{width:112px;border-radius:4px;display:block;margin-bottom:2px}

#helpbody{max-height:none;font-size:14px;line-height:1.55;max-width:980px}#helpbody h1{font-size:20px}#helpbody h2{font-size:16px;margin-top:18px;border-bottom:1px solid #2a3038;padding-bottom:3px}
#helpbody p strong,#helpbody b{color:#ffb74d}#helpbody p{margin:6px 0}