/* Dowell Studio design: command-center.css + original panel-frame.svg. */
:root{color-scheme:dark;--bg:#040c13;--panel:#071822;--surface:#071822;--surface2:#0b2230;--accent:#32e6f1;--accent-dark:#09343f;--text:#e1f5fa;--ink:#e1f5fa;--muted:#86aab8;--line:#1c4050;--amber:#ffca63;--red:#ff9292;--mono:Consolas,"SFMono-Regular",monospace;font-family:"Segoe UI",Inter,system-ui,sans-serif;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 65% 0,#09243280,transparent 58%),var(--bg)}button,input,a{touch-action:manipulation}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.45;cursor:wait}a{color:inherit;text-decoration:none}button{color:inherit}h1,h2,p{margin:0}section[id]{scroll-margin-top:75px}.command-shell{display:flex;min-height:100vh;background-image:linear-gradient(#2bd7f104 1px,transparent 1px),linear-gradient(90deg,#2bd7f104 1px,transparent 1px);background-size:48px 48px}.sidebar{width:190px;flex:0 0 190px;height:100vh;position:sticky;top:0;display:flex;flex-direction:column;padding:26px 10px 18px;background:linear-gradient(165deg,#071822ee,#030c14fa);border-right:1px solid #174354}.brand{display:flex;align-items:center;font-size:22px;letter-spacing:.12em;text-transform:uppercase;font-weight:650;gap:11px}.sidebar .brand{margin:0 5px 36px}.studio-mark{width:42px;height:42px;flex-shrink:0;filter:drop-shadow(0 0 5px #21dbe332)}.brand-studio{display:block;font-size:10px;letter-spacing:.48em;margin-top:5px;color:#a6d1df}.nav-label{font-size:9px;letter-spacing:.17em;color:#467888;padding:0 12px 14px}.sidebar nav{display:flex;flex-direction:column;gap:8px}.sidebar nav a{display:flex;align-items:center;gap:11px;padding:15px 10px;font-size:12px;border-left:3px solid transparent}.sidebar nav a:hover{background:#0b2b38;color:#ddfaff}.sidebar nav a.active{background:linear-gradient(90deg,#0b3947,transparent);border-color:var(--accent);color:var(--accent);box-shadow:-6px 0 12px -10px var(--accent)}.nav-icon{font:24px var(--mono);width:22px;flex-shrink:0;text-align:center;line-height:1}.nav-external{margin-left:auto}.sidebar-bottom{margin-top:auto}.machine-name{font-size:11px;padding:16px 5px;display:flex;gap:9px;align-items:center}.machine-name small{display:block;font-size:10px;color:var(--muted);margin-top:5px}.logout{display:flex;align-items:center;gap:10px;background:none;border:0;padding:13px 8px;font-size:11px;color:var(--muted);width:100%}.local-access{display:block;font-size:9px;color:#547f91;padding:10px 5px}.main-shell{flex:1;min-width:0}.topbar{height:52px;padding:0 24px;background:#04111adb;border-bottom:1px solid #163441;font-size:11px;display:flex;align-items:center;justify-content:space-between;gap:14px}.topbar>div{display:flex;align-items:center;gap:10px}.breadcrumb,.chevron{color:var(--muted)}.icon-button{width:30px;height:30px;display:grid;place-items:center;background:none;border:1px solid transparent;font-size:19px;color:var(--accent);padding:0}.icon-button:hover{border-color:#245368;background:#091d29}.topbar-status{color:#9ad2db}.studio-clock{font-size:19px;font-family:var(--mono);font-variant-numeric:tabular-nums;line-height:1.2;color:#e1f9ff;border-right:1px solid var(--line);padding-right:16px;margin-right:5px}.studio-clock small{display:block;font:8px "Segoe UI",sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);text-align:right;margin-top:2px}.mobile-logout{display:none}.content{max-width:2100px;padding:22px 24px;margin:0 auto}.console-heading{display:flex;align-items:center;gap:24px;margin-bottom:20px}.eyebrow{color:var(--accent);text-transform:uppercase;font-size:10px;letter-spacing:.2em}.console-heading h1{font-size:clamp(25px,2.3vw,38px);line-height:1.15;font-weight:400;letter-spacing:.025em;margin:7px 0}.console-heading p{font-size:11px;color:var(--muted)}.state-badge{margin-left:auto;background:#09333d;border:1px solid #278995;color:var(--accent);padding:8px 10px;font-size:9px;letter-spacing:.1em;white-space:nowrap}.connection{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 15px;border:1px solid #174353;background:#051822d9;font-size:11px;margin-bottom:15px}.connection strong{font-weight:500}.mono{font-family:var(--mono)}.muted{color:var(--muted)}.spacer{flex:1}.tag{border:1px solid #1f6674;color:#8de9f2;font-size:8px;padding:4px 6px;letter-spacing:.07em}.dot{width:6px;height:6px;border-radius:50%;background:#678b9a;display:inline-block;flex-shrink:0}.dot.live{background:var(--accent);box-shadow:0 0 9px #0be8ef66}.dot.warn{background:var(--amber)}.dot.small{width:4px;height:4px;background:var(--accent)}.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.summary{padding:17px 19px;display:flex;flex-direction:column;gap:11px;background:linear-gradient(145deg,#071923ed,#020e18f5);border:1px solid #1c4050;border-top:2px solid #27798b}.summary .eyebrow{font-size:9px}.summary strong{font:clamp(17px,1.6vw,25px) var(--mono);font-weight:400;letter-spacing:-.5px}.summary>span:last-child{font-size:10px;color:var(--muted)}.console-layout{display:grid;grid-template-columns:minmax(220px,.86fr) minmax(400px,2fr) minmax(245px,.96fr);gap:14px;align-items:start}.console-left,.console-center,.console-right{display:flex;flex-direction:column;gap:14px;min-width:0}
.panel{position:relative;background:linear-gradient(145deg,#071923ed,#020e18f5);border:0;border-radius:0;min-width:0;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);box-shadow:inset 0 0 30px #0befff03;overflow:hidden}.panel::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;border:1px solid transparent;border-image:url("/panel-frame.svg") 26 / 26px / 0 stretch;filter:drop-shadow(0 0 2px #12deed30)}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:17px 17px 13px;border-bottom:1px solid #174353;gap:7px}.panel-heading h2{font-size:11px;font-weight:500;color:var(--accent);text-transform:uppercase;letter-spacing:.065em;line-height:1.4}.unit{font:9px var(--mono);color:var(--muted)}.joint-list{padding:0 17px}.joint{padding:19px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px}.joint:last-child{border-bottom:0}.axis-label{display:flex;align-items:center;gap:9px}.axis-number{border:1px solid #246475;background:#06242f;color:var(--accent);font:12px var(--mono);padding:5px}.axis-label>span:last-child{font-size:10px;color:var(--muted)}.joint b{font:23px var(--mono);font-variant-numeric:tabular-nums;font-weight:400}.joint small{font-size:11px;color:var(--muted);padding-left:3px}.panel-foot{border-top:1px solid var(--line);padding:14px 17px;font-size:9px;color:var(--muted);display:flex;align-items:center;gap:7px;line-height:1.6}.tcp-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:8px 13px}.tcp-cell{padding:13px 5px}.tcp-cell>span{display:block;font:10px var(--mono);color:var(--accent);margin-bottom:7px}.tcp-cell b{font:22px var(--mono);font-variant-numeric:tabular-nums}.tcp-cell small{display:block;margin-top:4px;font-size:9px;color:var(--muted)}.coordinate-info{display:flex;justify-content:space-between;gap:9px;flex-wrap:wrap;border-top:1px solid var(--line);padding:12px 17px;color:var(--muted);font-size:10px}.coordinate-info b{font-family:var(--mono);color:var(--accent);margin-left:4px}.payload{display:flex;justify-content:space-between;padding:0 17px 15px;font-size:10px;color:var(--muted)}.payload b{font:11px var(--mono);color:var(--text)}.signal-list{padding:3px 17px}.signal-list>div{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:13px 0;font-size:11px;gap:8px}.signal-list>div:last-child{border:0}.signal-list b{font:9px var(--mono);color:#77bfde;background:#0b2534;border:1px solid #193e52;padding:4px 5px}.signal-list b.active{color:var(--amber);background:#302616;border-color:#795f2c}.panel-note{font-size:10px;color:var(--muted);line-height:1.65;padding:0 17px;margin:12px 0 16px}.io-label{font-size:9px;letter-spacing:.08em;color:var(--accent);margin:17px 17px 8px}.io-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:0 17px}.io-bit{font:9px var(--mono);border:1px solid #1d4557;background:#091d29;color:#6c95a6;text-align:center;padding:6px 0}.io-bit.active{border-color:#2aa9bb;background:#0a3946;color:var(--accent)}.io-bit.unknown{opacity:.4}.legend-square{width:6px;height:6px;display:inline-block;background:var(--accent);margin-right:3px}.legend-square.off{background:#274657;margin-left:10px}dl{padding:1px 17px 10px;margin:0}dl>div{border-bottom:1px solid var(--line);padding:11px 0}dl>div:last-child{border:0}dt{font-size:9px;color:var(--muted);margin-bottom:5px}dd{font:11px var(--mono);margin:0;overflow-wrap:anywhere}.console-link{display:flex;align-items:center;justify-content:space-between;margin:12px 17px;border:1px solid #238397;background:#031924;color:var(--accent);font-size:11px;padding:10px 11px;min-height:36px}.console-link:hover{background:#0d3442;box-shadow:0 0 15px #00edff12}.diagnostic{margin-top:18px;border:1px solid #805b2a;background:#342415;color:#ffdb9b;padding:14px;font-size:12px;overflow-wrap:anywhere}.bad{color:var(--amber)!important}footer{margin-top:20px;padding:14px 0;border-top:1px solid var(--line);font-size:9px;color:#547f91;display:flex;justify-content:space-between;gap:12px;letter-spacing:.08em}.version{color:var(--accent);margin-left:7px}
.sidebar-collapsed .sidebar{width:72px;flex-basis:72px;padding-left:9px;padding-right:9px}.sidebar-collapsed .brand-wordmark,.sidebar-collapsed .nav-text,.sidebar-collapsed .nav-label,.sidebar-collapsed .nav-external,.sidebar-collapsed .machine-name>div,.sidebar-collapsed .local-access{display:none}.sidebar-collapsed .sidebar .brand{margin:0 5px 36px}.sidebar-collapsed .sidebar nav a{justify-content:center;padding:15px 8px}.sidebar-collapsed .machine-name,.sidebar-collapsed .logout{justify-content:center}
.session-loading{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:15px;font-size:20px}.session-loading small{color:var(--muted);font-size:11px}.login-page{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}.login-art{padding:50px 9%;background:radial-gradient(ellipse at 40% 35%,#0c3a4c,#04111d 75%);display:flex;flex-direction:column;justify-content:space-between;gap:50px;min-height:100vh}.login-art .brand{font-size:27px}.login-copy h1{font-size:clamp(36px,4vw,60px);font-weight:400;line-height:1.17;letter-spacing:-.03em;margin:22px 0}.login-copy p{font-size:15px;line-height:1.8;color:#91b8c8;max-width:360px}.login-device{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.08em;color:#9ad2db;margin-top:38px}.login-device span{height:1px;width:25px;background:#287284}.login-caption{font-size:11px;color:#699aaa}.login-form-wrap{background:#06131e;display:grid;place-items:center;padding:35px}.login-form{width:100%;max-width:350px}.login-lock{display:grid;place-items:center;background:#0d303e;color:var(--accent);width:48px;height:48px;font-size:32px;margin-bottom:27px}.login-form h2{font-size:25px;font-weight:500;text-transform:none;letter-spacing:0}.login-form>p{font-size:13px;color:var(--muted);margin:12px 0 30px;line-height:1.6}.login-form label{display:flex;flex-direction:column;gap:9px;font-size:12px;margin:20px 0}.login-form input{background:#071c28;color:var(--text);border:1px solid #2a5164;border-radius:4px;font:15px inherit;padding:13px 14px;min-height:46px;width:100%}.primary{background:#113f4e;color:#b6faff;border:1px solid #2897ac;padding:13px 17px;border-radius:4px;min-height:46px}.login-form .primary{width:100%;display:flex;justify-content:space-between;margin-top:25px}.login-form>small{display:block;text-align:center;font-size:10px;color:#7197a8;line-height:1.7;margin-top:22px}.login-form .form-error{color:var(--amber);border:1px solid #805b2a;padding:10px;background:#342415;margin:0}
@media(min-width:1700px){.sidebar{width:216px;flex-basis:216px}.console-layout,.console-left,.console-center,.console-right{gap:18px}.panel-heading{padding:20px}.content{padding:24px 28px}}
@media(max-width:1400px){.console-layout{grid-template-columns:minmax(215px,.72fr) minmax(0,1.5fr)}.console-right{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.summary{padding:15px}.summary strong{font-size:19px}}
@media(max-width:1050px){.command-shell,.sidebar-collapsed{display:block}.sidebar,.sidebar-collapsed .sidebar{width:100%;height:auto;padding:10px 14px;position:relative;flex-direction:row;align-items:center;gap:18px;border-right:0;border-bottom:1px solid #194557}.sidebar .brand,.sidebar-collapsed .sidebar .brand{margin:0;font-size:16px;gap:7px}.studio-mark{width:32px;height:33px}.brand-studio{font-size:8px;letter-spacing:.4em}.sidebar .brand-wordmark{display:block}.sidebar .nav-label,.sidebar-bottom{display:none}.sidebar nav{flex-direction:row;overflow-x:auto;min-width:0;gap:3px;scrollbar-width:thin}.sidebar nav a,.sidebar-collapsed .sidebar nav a{white-space:nowrap;padding:11px 10px;border-left:0;border-bottom:2px solid transparent;gap:7px;font-size:10px;flex-shrink:0}.sidebar nav a.active{border-bottom-color:var(--accent);background:#0d3341}.sidebar .nav-text{display:inline}.nav-icon{font-size:20px}.content{padding:18px}.topbar{padding:0 18px;height:50px}#sidebar-toggle{display:none}.mobile-logout{display:grid}.sidebar-collapsed .nav-external{display:inline}}
@media(max-width:760px){.console-layout{display:flex;flex-direction:column;gap:14px}.console-center{order:0;width:100%}.console-left{order:1;width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:start}.console-right{order:2;width:100%;grid-template-columns:1fr 1fr}.connection-panel{grid-column:1/-1}.summary-grid{gap:9px}.summary{padding:12px}.summary .eyebrow{font-size:8px}.summary strong{font-size:17px}.summary>span:last-child{font-size:9px;line-height:1.5}.console-heading{gap:12px}.console-heading h1{font-size:28px}.state-badge{font-size:8px;padding:7px}.connection{font-size:10px}.connection #updated{font-size:9px}.login-page{grid-template-columns:1fr}.login-art{min-height:0;padding:28px;gap:35px}.login-copy h1{font-size:35px;margin:12px 0}.login-copy p{font-size:12px}.login-caption,.login-device{display:none}.login-form-wrap{padding:35px 28px}.login-lock{display:none}}
@media(max-width:480px){.sidebar{gap:12px;padding:10px}.sidebar .brand{font-size:14px}.sidebar .nav-text{display:none}.sidebar nav a{padding:10px 12px}.content{padding:17px 12px}.topbar{padding:0 12px;font-size:10px}.topbar>div{gap:6px}.studio-clock{font-size:15px;padding-right:8px;margin:0}.studio-clock small{font-size:7px}#topbar-status{font-size:9px}.console-heading p{font-size:10px}.eyebrow{font-size:8px}.state-badge{display:none}.summary-grid{grid-template-columns:1fr 1fr}.summary strong{font-size:21px}.console-left,.console-right{display:flex;flex-direction:column}.console-left>.panel,.console-right>.panel{width:100%}.connection .spacer{display:none}.connection #updated{width:100%}.joint{padding:14px 0}.tcp-cell b{font-size:22px}footer{font-size:8px;line-height:1.6}.session-loading{flex-direction:column}}
/* Interactive model viewport. Camera controls never send robot commands. */
.robot-panel{margin-bottom:20px}.robot-panel .panel-heading{padding:17px 20px}.view-3d{color:var(--accent);font:10px var(--mono);border:1px solid #31524e;border-radius:2px;padding:3px 5px;margin-left:8px}.robot-subtitle{margin:9px 0 0;color:var(--muted);font-size:10px}.robot-toolbar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#10181e;border-bottom:1px solid var(--line)}.robot-toolbar button{font:11px Segoe UI,Arial,sans-serif;background:#17242c;color:var(--text);border:1px solid #30444f;border-radius:3px;padding:8px 11px;cursor:pointer}.robot-toolbar button:hover,.robot-toolbar button:focus-visible{color:var(--accent);border-color:var(--accent)}.robot-toolbar button:disabled{opacity:.4;cursor:wait}.view-presets{display:flex;gap:5px}.robot-toolbar #robot-fullscreen{margin-left:auto}.robot-viewport{height:430px;position:relative;overflow:hidden;background:#040e18}.robot-viewport canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.robot-viewport canvas:active{cursor:grabbing}.robot-overlay{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);background:#0d171fe8;border:1px solid #42606d;padding:14px 18px;font-size:12px;line-height:1.6;text-align:center;max-width:85%;min-width:230px;pointer-events:none}.robot-stale .robot-overlay{top:22px;transform:translateX(-50%);color:#e7b985;border-color:#756045;max-width:90%}.robot-stale canvas{filter:saturate(.3);opacity:.65}.robot-tcp-label{position:absolute;left:0;top:0;padding:4px 6px;border:1px solid #32e6f199;background:#0c211de0;color:var(--accent);font:10px var(--mono);pointer-events:none;z-index:1}.robot-axis-legend{position:absolute;bottom:18px;left:20px;display:flex;align-items:center;gap:8px;pointer-events:none;font:10px var(--mono);color:var(--muted)}.robot-axis-legend span:not(:last-child){border:1px solid currentColor;border-radius:2px;width:22px;height:22px;display:grid;place-items:center;background:#10191ee0}.axis-x{color:#ff7b79}.axis-y{color:#a3e789}.axis-z{color:#77aaff}.robot-grid-scale{position:absolute;right:20px;bottom:22px;pointer-events:none;color:var(--muted);font:9px var(--mono);letter-spacing:1px}.robot-view-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:13px 20px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.robot-model-note{font-size:10px;color:var(--muted);padding:0 20px 12px}.robot-panel:fullscreen{display:flex;flex-direction:column;background:var(--bg);border:0;margin:0;width:100%;height:100%}.robot-panel:fullscreen .robot-viewport{flex:1;height:auto;min-height:200px}.robot-panel:fullscreen .robot-toolbar{flex-shrink:0}
@media(max-width:760px){.robot-toolbar{padding:10px;gap:7px;flex-wrap:wrap}.robot-toolbar button{font-size:10px;padding:8px}.robot-toolbar #robot-fullscreen span{display:none}.view-presets{gap:4px}.robot-viewport{height:380px}.robot-panel .panel-heading{padding:16px 14px;align-items:flex-start}.robot-panel #robot-view-status{font-size:8px;max-width:100px;text-align:right;white-space:normal;line-height:1.6}.robot-view-footer{font-size:9px;line-height:1.6;padding:12px 14px}}
.robot-panel{margin-bottom:0}.robot-toolbar{padding:9px 12px;gap:6px;flex-wrap:wrap;background:#05131d}.robot-toolbar button{border-radius:0;border-color:#245368;background:#091d29;font-size:10px;padding:7px 9px}.robot-viewport{height:460px}.robot-panel .panel-heading h2{font-size:11px}.robot-view-footer{font-size:9px;line-height:1.6;padding:12px 17px}.robot-model-note{font-size:9px;padding:0 17px 14px}.robot-subtitle{font-size:9px}.robot-grid-scale{font-size:8px}.robot-panel:fullscreen{clip-path:none}.robot-panel:fullscreen::before{display:none}.robot-panel:fullscreen .robot-viewport{min-height:200px}.view-3d{border-color:#246475}.robot-panel .unit{white-space:normal;text-align:right;font-size:8px;line-height:1.5}.robot-toolbar #robot-fullscreen{margin-left:auto}@media(max-width:480px){.robot-viewport{height:360px}.robot-toolbar button{font-size:9px;padding:7px}.robot-view-footer{gap:4px}.robot-grid-scale{right:12px}.robot-axis-legend{left:14px}}
.agent-panel { margin-top: 20px; scroll-margin-top: 84px; }
.agent-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; }
.agent-permission { color: #ffca63; font-size: 12px; line-height: 1.6; }
.agent-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.agent-buttons button { background: #102c39; color: #e1f5fa; border: 1px solid #286070; padding: 10px 13px; font: inherit; font-size: 12px; cursor: pointer; }
.agent-buttons button:hover:not(:disabled) { border-color: #32e6f1; background: #153e4a; }
.agent-buttons button:disabled { opacity: .4; cursor: not-allowed; }
.agent-buttons .stop-command { border-color: #a2684e; color: #ffca9a; }
.loaded-program { overflow-wrap: anywhere; font: 12px Consolas, monospace; color: #e1f5fa; }
.command-history { padding: 0; margin: 12px 0; list-style: none; }
.command-history li { padding: 10px 0; border-bottom: 1px solid #1c4050; }
.command-history strong { display: block; font-size: 12px; color: #e1f5fa; }
.command-history span { display: block; margin-top: 5px; font-size: 11px; line-height: 1.5; color: #86aab8; }
.command-history [data-status="unknown"] span,.command-history [data-status="rejected"] span { color: #ffca63; }
@media(max-width: 760px) { .agent-layout { grid-template-columns: 1fr; gap: 18px; } }