: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=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}
#joy{width:130px;height:130px;border-radius:50%;background:#0c0f12;border:2px solid #39414c;position:relative;touch-action:none}
#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}