/* IBM Plex ships with the binary: this console is served on a robot LAN
       with no route to a font CDN, and a fallback face would change every
       measurement's width mid-session. */
    @font-face { font-family:"Plex Sans"; font-style:normal; font-weight:400 600; font-display:swap; src:url("/plex-sans.woff2") format("woff2"); }
    @font-face { font-family:"Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/plex-mono-400.woff2") format("woff2"); }
    @font-face { font-family:"Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("/plex-mono-500.woff2") format("woff2"); }

    :root {
      color-scheme:dark;
      --void:#07080A;
      --panel:#0E1013;
      --panel-2:#14171A;
      --panel-3:#1A1E22;
      --well:#090A0C;
      --black:#030304;

      --hair:rgba(255,255,255,.055);
      --edge:rgba(255,255,255,.1);
      --edge-hi:rgba(255,255,255,.2);

      --ink:#EDEEEC;
      --ink-2:#9DA2A4;
      --ink-3:#6A6F72;

      /* Status is a four-value language and nothing else uses these: green is
         nominal, amber is "look at this", red is failed, grey is not present.
         Amber used to mean healthy too, which left nothing to raise a hand. */
      --ok:#4FBE87;
      --ok-soft:rgba(79,190,135,.13);
      --signal:#EFC14B;
      --signal-soft:rgba(239,193,75,.12);
      --fail:#FF6B60;
      --fail-soft:rgba(255,107,96,.1);

      --sans:"Plex Sans","IBM Plex Sans","Helvetica Neue",system-ui,-apple-system,"Segoe UI",sans-serif;
      --mono:"Plex Mono","IBM Plex Mono","JetBrainsMono NF",ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace;

      /* Shared by desktop notices and the immersive canvas painter. */
      --notice-ink:#edf0eb;
      --notice-background:#090b0a;
      --notice-font:var(--sans);
      --notice-weight:500;
      --notice-radius:12px;

      --r:12px;
      --r-s:8px;
      --r-xs:5px;
      --gap:10px;
      --pad:16px;
      --ease:cubic-bezier(.2,.8,.2,1);
    }

    * { box-sizing:border-box; scrollbar-width:none; -ms-overflow-style:none; }
    *::-webkit-scrollbar { width:0; height:0; display:none; }
    html { min-width:320px; min-height:100%; background:var(--void); }
    body { margin:0; min-height:100vh; min-height:100svh; color:var(--ink); background:var(--void); font:400 13px/1.45 var(--sans); font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
    body::before { content:""; position:fixed; inset:0 0 auto; z-index:0; height:420px; pointer-events:none; background:radial-gradient(120% 100% at 50% -30%,rgba(255,255,255,.045),transparent 70%); }
    button,input { font:inherit; }
    button { color:inherit; }
    button:focus-visible,a:focus-visible,summary:focus-visible,.camera:focus-visible,input:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--ink); outline-offset:2px; border-radius:var(--r-xs); }
    .hidden { display:none!important; }
    /* Several panels are laid out with display:grid/flex and hidden by the
       `hidden` property. Without this the author rule wins and the element
       stays on screen after the code has switched it off. */
    [hidden] { display:none!important; }
    @keyframes rise { from { opacity:0; transform:translateY(8px); } }
    .sr-only { width:1px; height:1px; position:absolute; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; }

    /* ---- shared primitives ------------------------------------------------ */

    /* Every small uppercase caption in the console is this one thing. */
    .eyebrow,.rd span,.strip h3,.chip,.cam-label,.cam-rate,.model-label,.model-hint,
    .fleet-count,.tag,.robot-id,.secure-note,.settings-card label span
    { font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; }

    .strip { display:flex; align-items:center; gap:14px; padding:11px var(--pad); border-top:1px solid var(--hair); }
    .strip h3 { margin:0; flex:none; color:var(--ink-3); font-size:10px; font-weight:400; }

    /* One readout: caption over measurement. It is sized by its own content
       and wraps rather than shrinking, because a clipped measurement is worse
       than a ragged row. */
    /* Sized for the longest value each readout can ever hold, so a number
       changing never moves anything. Widths are the caption or the worst-case
       measurement, whichever is wider: MODE must fit ESTOPPED, RECOVERY must
       fit HELD · AUTO OFF, DRIVE STATE must fit DRIVE NOT CLOSED LOOP. */
    .rd { min-width:0; }
    .rd span { display:block; overflow:hidden; margin-bottom:8px; color:var(--ink-3); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
    .rd b { display:block; overflow:hidden; color:var(--ink); font:500 15px/1.15 var(--mono); letter-spacing:-.01em; text-overflow:ellipsis; white-space:nowrap; }
    .rd.hero b { font-size:22px; letter-spacing:-.03em; }
    .rd b.ok { color:var(--ok); }
    .rd b.attention { color:var(--signal); }
    .rd b.down { color:var(--fail); }
    .rd b.idle { color:var(--ink-3); }
    /* The traction readout carries its own state classes from the base poll;
       they map onto the same four tones as everything else. */
    #base-drive-state.driving { color:var(--ok); }
    #base-drive-state.ready { color:var(--ink); }
    #base-drive-state.blocked { color:var(--signal); }

    .dot { width:6px; height:6px; flex:none; display:inline-block; border-radius:50%; background:var(--ink-3); }
    .dot.ok { background:var(--ok); }
    .dot.live { background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }

    button:disabled { opacity:.32; cursor:not-allowed; }

    .arm-strength > summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px var(--pad); cursor:pointer; list-style:none; }
    .arm-strength > summary::-webkit-details-marker { display:none; }
    .arm-strength summary strong { display:block; font-size:16px; font-weight:500; }
    .arm-strength summary small { display:block; margin-top:4px; color:var(--ink-3); font:11px var(--mono); }
    .strength-open { display:flex; align-items:center; gap:10px; flex:none; padding:9px 12px; border:1px solid var(--edge-hi); border-radius:var(--r-xs); color:var(--ink-2); font:11px var(--mono); }
    .strength-open i { display:inline-block; width:6px; height:6px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); }
    .arm-strength[open] .strength-open i { transform:rotate(225deg); }
    .arm-strength:not([open]) [data-hide-label],.arm-strength[open] [data-show-label] { display:none; }
    .arm-strength:not([open]) > form { display:none; }
    .arm-strength > summary:hover .strength-open { color:var(--ink); background:var(--panel-3); }
    .arm-strength form { border-top:1px solid var(--hair); background:var(--well); }
    .arm-strength fieldset { min-width:0; padding:0; margin:0; border:0; }
    .arm-strength p { color:var(--ink-2); font-size:12px; line-height:1.65; margin:0; }
    .strength-table-wrap { overflow-x:auto; scrollbar-width:thin; }
    .arm-strength table { width:100%; min-width:1080px; border-collapse:collapse; text-align:left; }
    .arm-strength th,.arm-strength td { padding:10px 12px; border-bottom:1px solid var(--hair); }
    .arm-strength th { font-size:11px; font-weight:500; color:var(--ink-2); }
    .arm-strength th:first-child { padding-left:var(--pad); }
    .arm-strength th small { display:block; margin-top:4px; font-size:10px; font-weight:400; color:var(--ink-3); white-space:nowrap; }
    .arm-strength input { width:100%; min-width:75px; height:35px; padding:0 9px; border:1px solid var(--edge); border-radius:var(--r-xs); color:var(--ink); background:var(--panel); font:12px var(--mono); }
    .arm-strength input[readonly] { color:var(--ink-3); border-style:dashed; }
    #stats-panel > .arm-strength { margin-top:0; margin-bottom:var(--gap); }
    .strength-value { display:flex; align-items:center; gap:8px; min-width:130px; }
    .strength-value input { flex:1; width:80px; }
    .arm-strength .strength-scale-note { padding:14px var(--pad); font-size:11px; color:var(--ink-2); }
    .strength-unit { color:var(--ink-3); font:10px var(--mono); white-space:nowrap; }
    .strength-heading { display:flex; align-items:center; gap:9px; }
    .strength-info-button { display:grid; place-items:center; width:25px; height:25px; padding:0; border:1px solid var(--edge-hi); border-radius:50%; background:transparent; color:var(--ink-2); font:500 13px var(--mono); cursor:pointer; }
    .strength-info-button:hover { color:var(--ink); border-color:var(--ink); }
    .strength-info { width:min(560px,calc(100vw - 32px)); max-height:calc(100svh - 48px); padding:0; border:1px solid var(--edge-hi); border-radius:var(--r); background:var(--panel); color:var(--ink); overflow:auto; box-shadow:0 24px 100px #0008; }
    .strength-info::backdrop { background:#0009; }
    .strength-info-head { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; background:var(--panel); border-bottom:1px solid var(--hair); }
    .strength-info h2 { margin:0; font-size:18px; font-weight:500; letter-spacing:-.02em; }
    .strength-info-head button { width:32px; height:32px; flex:none; padding:0; border:1px solid var(--edge); border-radius:var(--r-xs); background:transparent; color:var(--ink-2); font-size:20px; cursor:pointer; }
    .strength-info-body { display:grid; gap:16px; padding:20px; }
    .strength-info p { margin:0; color:var(--ink-2); font-size:13px; line-height:1.65; }
    .strength-info p strong { color:var(--ink); font-weight:500; }
    .strength-info .strength-source { font-size:11px; }
    .strength-source a { color:var(--ink-2); text-underline-offset:3px; }
    .strength-live { color:var(--ink-2); font:11px var(--mono); white-space:nowrap; }
    .strength-gripper { display:flex; align-items:end; flex-wrap:wrap; gap:12px 24px; padding:16px var(--pad); }
    .strength-gripper label { display:grid; grid-template-columns:1fr auto; gap:6px; font-size:12px; }
    .strength-gripper label small { color:var(--ink-3); }
    .strength-gripper label > span { grid-column:1 / -1; width:260px; }
    .strength-gripper p { padding-bottom:8px; }
    .strength-footer { display:grid; gap:12px; padding:16px var(--pad); border-top:1px solid var(--hair); }
    .strength-footer [data-admission] { color:var(--ink); }
    .strength-footer [data-message]:empty { display:none; }
    .strength-actions { display:flex; gap:8px; flex-wrap:wrap; }
    .strength-actions button { min-height:36px; padding:8px 14px; border:1px solid var(--edge-hi); border-radius:var(--r-xs); color:var(--ink-2); background:var(--panel); cursor:pointer; }
    .strength-actions [data-apply] { background:var(--ink); color:var(--void); font-weight:500; }

    /* ---- masthead --------------------------------------------------------- */

    header { height:58px; display:flex; align-items:center; gap:20px; padding:0 clamp(16px,2.2vw,36px); border-bottom:1px solid var(--hair); background:color-mix(in srgb,var(--void) 84%,transparent); backdrop-filter:blur(14px); position:sticky; top:0; z-index:100; }
    .mark { display:flex; align-items:center; gap:11px; font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.16em; }
    .mark i { width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--edge-hi); border-radius:var(--r-xs); }
    .mark i::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--signal); }
    .mark small { padding-left:11px; border-left:1px solid var(--hair); color:var(--ink-3); font:400 10px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; }
    .header-status { margin-left:auto; display:flex; align-items:center; gap:22px; color:var(--ink-2); font:400 11px/1 var(--mono); letter-spacing:.08em; }
    .header-status span { display:flex; align-items:center; gap:9px; }
    .power-link { --battery-tone:var(--ink-3); display:flex; align-items:center; gap:9px; min-height:34px; padding:7px 11px; border:1px solid var(--edge); border-radius:var(--r-xs); color:var(--ink); text-decoration:none; white-space:nowrap; letter-spacing:0; transition:border-color .15s,background .15s; }
    .power-link:hover { border-color:var(--edge-hi); background:var(--panel-2); }
    .power-link > span:not(.battery-icon) { color:var(--ink-2); font:400 11px/1 var(--sans); }
    .power-link b { min-width:3ch; font:500 15px/1 var(--mono); text-align:right; }
    .power-link.ok { --battery-tone:var(--ok); }
    .power-link.attention { --battery-tone:var(--signal); color:var(--signal); }
    .power-link.down { --battery-tone:var(--fail); color:var(--fail); }
    .power-link .battery-icon { display:block; width:22px; height:12px; margin-right:2px; border:1px solid var(--battery-tone); border-radius:3px; position:relative; }
    .battery-icon::before { content:""; position:absolute; inset:2px; width:calc((100% - 4px) * var(--charge,0)); border-radius:1px; background:var(--battery-tone); }
    .battery-icon::after { content:""; position:absolute; top:3px; right:-4px; width:2px; height:4px; border-radius:0 1px 1px 0; background:var(--battery-tone); }
    .battery-charging-icon { position:absolute; z-index:1; left:6px; top:-3px; width:9px; height:16px; fill:var(--battery-tone); stroke:var(--void); stroke-width:2; stroke-linejoin:round; paint-order:stroke; }
    .battery-warning-icon { display:grid; place-items:center; flex:none; width:14px; height:14px; border:1px solid currentColor; border-radius:50%; color:var(--signal); font:500 10px/1 var(--mono); }
    #clock { color:var(--ink-2); }

    main { width:min(100%,1680px); min-height:calc(100svh - 58px); margin:0 auto; padding:0 clamp(16px,2.2vw,36px) 64px; position:relative; z-index:1; }

    /* ---- fleet ------------------------------------------------------------ */

    #fleet { padding-top:clamp(44px,7vw,96px); }
    .fleet-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; padding-bottom:30px; border-bottom:1px solid var(--hair); }
    .fleet-head > div:first-child { min-width:0; flex:1 1 auto; }
    .eyebrow { margin:0 0 14px; color:var(--ink-3); font-size:10px; }
    h1 { margin:0; font-size:clamp(40px,5.4vw,72px); font-weight:600; line-height:.92; letter-spacing:-.045em; }
    .fleet-sub { max-width:58ch; margin:18px 0 0; color:var(--ink-2); font-size:14px; line-height:1.6; }
    .fleet-side { flex:none; text-align:right; }
    .fleet-side .eyebrow { margin-bottom:9px; }
    .fleet-count { color:var(--ink); font:500 13px/1 var(--mono); letter-spacing:.09em; }
    .robot-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap); padding-top:var(--gap); }
    .fleet-head { animation:rise .5s var(--ease) both; }
    .robot-card { animation:rise .45s var(--ease) both; }
    .robot-card:nth-child(1) { animation-delay:.05s; }
    .robot-card:nth-child(2) { animation-delay:.1s; }
    .robot-card:nth-child(3) { animation-delay:.15s; }
    .robot-card:nth-child(4) { animation-delay:.2s; }
    .robot-card:nth-child(n+5) { animation-delay:.25s; }
    .robot-card { display:grid; grid-template-columns:minmax(0,46%) 8px minmax(0,1fr) 18px; grid-template-areas:"preview status meta action" "preview status tag action"; grid-template-rows:1fr 1fr; align-items:center; gap:12px 24px; padding:0 24px 0 0; border:1px solid var(--edge); border-radius:var(--r); background:var(--panel); color:inherit; text-align:left; cursor:pointer; position:relative; overflow:hidden; transition:border-color .18s,background .18s,transform .18s var(--ease); }
    .robot-card::before { grid-area:status; content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px var(--ok-soft); }
    .robot-card::after { grid-area:action; content:"\2192"; color:var(--ink-3); font-size:17px; transition:color .18s,transform .18s var(--ease); }
    .robot-card:hover { border-color:var(--edge-hi); background:var(--panel-2); transform:translateY(-2px); }
    .robot-card:hover::after { color:var(--ink); transform:translateX(3px); }
    .robot-meta { grid-area:meta; align-self:end; min-width:0; padding-top:20px; }
    .robot-name { overflow:hidden; color:var(--ink); font-size:21px; font-weight:500; letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap; }
    .robot-id { margin-top:9px; color:var(--ink-3); font-size:10px; line-height:1.6; overflow-wrap:anywhere; }
    .tag { padding:6px 10px; border:1px solid var(--edge); border-radius:999px; color:var(--ink-2); font-size:9.5px; }
    .robot-card > .tag { grid-area:tag; align-self:start; justify-self:start; margin-bottom:20px; }
    /* Keep the uncropped eye beside the robot details, without a wide video
       container that adds empty bars on either side of the image. */
    .fleet-preview { grid-area:preview; position:relative; width:100%; aspect-ratio:16/9; background:var(--black); border-right:1px solid var(--edge); }
    .fleet-preview video { object-fit:contain; }
    .fleet-preview-label { position:absolute; left:14px; bottom:12px; padding:5px 8px; border-radius:var(--r-xs); color:var(--ink-2); background:rgba(6,7,8,.85); font:10px/1.4 var(--mono); }
    .viewer-bar { display:flex; align-items:center; gap:16px; margin:0 0 14px; padding:12px 16px; border:1px solid var(--edge); border-radius:var(--r-s); background:var(--panel); }
    .viewer-bar > div { flex:1; min-width:0; }
    .viewer-bar strong { display:block; font:500 11px/1.5 var(--mono); letter-spacing:.08em; }
    .viewer-bar p { margin:3px 0 0; color:var(--ink-2); font-size:12px; }
    .viewer-bar[data-role="primary"] { border-left:3px solid var(--ok); }
    .viewer-bar button { flex:none; padding:10px 14px; border:1px solid var(--edge-hi); border-radius:var(--r-xs); background:var(--panel-3); font:500 11px/1.3 var(--mono); cursor:pointer; }
    .viewer-bar button:hover { background:var(--edge); }
    [data-primary-control][inert] { opacity:.38; }
    @media(max-width:480px) {
      .viewer-bar { align-items:stretch; flex-direction:column; gap:10px; }
      .viewer-bar button { align-self:flex-start; }
      .robot-card { grid-template-columns:minmax(0,42%) minmax(0,1fr) 12px; grid-template-areas:"preview meta action"; grid-template-rows:auto; gap:10px; padding-right:12px; }
      .robot-card::before,.robot-card > .tag { display:none; }
      .robot-meta { align-self:center; padding:14px 0; }
      .robot-name { font-size:16px; white-space:normal; overflow-wrap:anywhere; }
      .robot-id { margin-top:6px; font-size:9px; }
      .fleet-preview-label { left:5px; right:5px; bottom:5px; padding:3px; font-size:7px; }
    }

    /* ---- workspace head --------------------------------------------------- */

    #control { padding-top:20px; }
    body.fleet-embedded > header { display:none; }
    body.fleet-embedded > main { max-width:none; padding:0 12px 24px; }
    body.fleet-embedded #control { padding-top:4px; }
    body.access-locked main > section:not(#access-gate) { display:none!important; }
    #access-gate a { color:var(--ink); text-underline-offset:4px; }
    .control-head { min-height:64px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--hair); }
    .back { width:34px; height:34px; display:grid; place-items:center; padding:0; border:1px solid var(--edge); border-radius:50%; background:transparent; color:var(--ink-2); cursor:pointer; font-size:15px; transition:border-color .15s,color .15s; }
    .back:hover { border-color:var(--edge-hi); color:var(--ink); }
    .control-title { overflow:hidden; font-size:24px; font-weight:500; line-height:1.15; letter-spacing:-.03em; text-overflow:ellipsis; white-space:nowrap; }
    .control-head .eyebrow { margin:5px 0 0; }
    .tabs { display:flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--hair); border-radius:999px; background:var(--panel); }
    .tab { min-width:82px; height:30px; padding:0 14px; border:0; border-radius:999px; background:transparent; color:var(--ink-3); cursor:pointer; font:500 10px/1 var(--mono); letter-spacing:.12em; transition:background .15s,color .15s; }
    .tab:hover { color:var(--ink-2); }
    .tab.active { background:var(--panel-3); color:var(--ink); }

    /* ---- the console: one instrument, not seven cards --------------------- */

    .console { border:1px solid var(--edge); border-radius:var(--r); background:var(--panel); overflow:hidden; animation:rise .4s var(--ease) both; }
    #vision-panel { position:relative; }

    /* Sized so the whole instrument -- video, vitals, systems, the stop --
       lands above the fold on a laptop. The stop used to sit four panels
       down the page, which is the wrong place for the one control that is
       never looked for in advance. */
    .camera-stage { height:clamp(340px,38vw,min(58svh,720px)); display:grid; grid-template-columns:minmax(0,2.35fr) minmax(250px,.72fr); grid-template-rows:repeat(3,minmax(0,1fr)); gap:1px; position:relative; isolation:isolate; overflow:hidden; background:var(--hair); }
    /* The side-by-side pair is roughly 32:9. Left at the full stage height it
       is two thirds letterbox, so the stage comes down to meet the picture
       whenever that is the view being shown. Not when the wrist panels are up:
       the right-hand column then has three tenants and needs the height back. */
    .camera-stage:not(.wrists):has(#stereo-pair:not(.single)) { height:clamp(280px,26vw,440px); }
    .camera { min-width:0; min-height:0; position:relative; margin:0; overflow:hidden; border:0; background:var(--black); cursor:pointer; transform-origin:0 0; }
    .camera.main { grid-column:1; grid-row:1 / 4; }
    #cam-left { grid-column:2; grid-row:1; }
    #cam-right { grid-column:2; grid-row:2; }
    .lidar-panel { min-width:0; min-height:0; position:relative; grid-column:2; grid-row:1 / 4; overflow:hidden; background:var(--black); }
    .camera-stage.wrists .lidar-panel { grid-row:3 / 4; }
    #stereo-pair { position:absolute; inset:0; display:flex; gap:1px; background:var(--black); }
    #stereo-pair video { position:static; inset:auto; width:50%; height:100%; flex:1 1 0; min-width:0; object-fit:contain; background:var(--black); }
    #stereo-pair.single video { width:100%; }
    #stereo-pair video[hidden] { display:none; }
    #lidar-map { width:100%; height:100%; position:absolute; inset:0; display:block; background:var(--black); }
    .camera::after { content:""; position:absolute; inset:auto 0 0; z-index:1; height:24%; pointer-events:none; background:linear-gradient(to top,rgba(0,0,0,.55),transparent); }
    .cam-feed,video,canvas,.camera img { width:100%; height:100%; position:absolute; inset:0; object-fit:contain; background:var(--black); }
    .camera img:not([src]) { visibility:hidden; }
    .cam-feed { z-index:0; }

    /* The lidar reports its own condition on its edge, so the operator reads
       the map's trustworthiness without leaving the map. */
    .lidar-panel::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; box-shadow:inset 0 0 0 1px transparent; transition:box-shadow .2s; }
    .lidar-panel.live::after { box-shadow:inset 0 0 0 1px var(--ok-soft); }
    .lidar-panel.stale::after,.lidar-panel.recovering::after { box-shadow:inset 0 0 0 1px rgba(239,193,75,.45); }
    .lidar-panel.offline::after { box-shadow:inset 0 0 0 1px rgba(255,107,96,.45); }
    .lidar-panel.absent { opacity:.6; }

    .cam-label { position:absolute; z-index:3; left:12px; top:12px; max-width:calc(100% - 54px); overflow:hidden; padding:5px 9px; border:1px solid var(--hair); border-radius:var(--r-xs); background:rgba(6,7,8,.78); backdrop-filter:blur(6px); color:var(--ink-2); font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }
    .cam-rate { position:absolute; z-index:3; right:12px; bottom:12px; padding:5px 8px; border-radius:var(--r-xs); background:rgba(6,7,8,.72); color:var(--ink-3); font-size:9.5px; letter-spacing:.06em; }
    .cam-live { position:absolute; z-index:4; right:14px; top:15px; width:6px; height:6px; border-radius:50%; background:#3A3E40; pointer-events:none; transition:background .2s,box-shadow .2s; }
    .camera.live .cam-live { background:var(--ok); box-shadow:0 0 0 4px var(--ok-soft); }
    .camera .tick { display:none; }
    .camera.focused { position:absolute; z-index:50; border-radius:var(--r-s); cursor:default; box-shadow:0 30px 90px rgba(0,0,0,.75),0 0 0 1px var(--edge-hi); }
    .camera.settling { z-index:50; transition:transform .34s var(--ease); }
    .camera-scrim { position:absolute; inset:0; z-index:40; background:rgba(3,3,4,.9); opacity:0; pointer-events:none; transition:opacity .24s ease; }
    .camera-scrim.on { opacity:1; pointer-events:auto; cursor:pointer; }
    .cam-meta { position:absolute; z-index:51; display:flex; align-items:center; gap:18px; height:38px; margin:0; padding:0 12px; border:1px solid var(--edge); border-radius:var(--r-s); background:var(--panel-2); color:var(--ink-3); font:400 10px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; opacity:0; pointer-events:none; }
    .cam-meta.on { opacity:1; }
    .cam-meta b { color:var(--ink); font-weight:500; }
    .cam-meta button { margin-left:auto; height:26px; padding:0 10px; border:1px solid var(--edge-hi); border-radius:var(--r-xs); background:transparent; color:var(--ink); cursor:pointer; pointer-events:auto; font:500 9.5px/1 var(--mono); letter-spacing:.09em; }
    .cam-meta button:hover { background:rgba(255,255,255,.07); }
    .head-controls { position:absolute; top:10px; right:34px; z-index:5; display:flex; gap:6px; }
    .head-controls button { height:26px; padding:0 10px; border:1px solid var(--hair); border-radius:var(--r-xs); background:rgba(6,7,8,.78); backdrop-filter:blur(6px); color:var(--ink-2); cursor:pointer; font:500 9.5px/1 var(--mono); letter-spacing:.1em; }
    .head-controls button:hover { border-color:var(--edge-hi); color:var(--ink); }

    /* A feed that has stopped must look stopped. The live dot alone reads as
       decoration once an operator is concentrating on the task, and a frozen
       image is otherwise indistinguishable from a still scene. */
    .cam-fault { position:absolute; inset:0; z-index:5; display:none; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:14px; background:rgba(9,5,5,.88); color:var(--fail); font:400 10px/1.5 var(--mono); letter-spacing:.1em; text-align:center; }
    .camera.fault .cam-fault,.camera.recovering .cam-fault { display:flex; }
    .camera.fault::before,.camera.recovering::before { content:""; position:absolute; inset:0; z-index:6; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,107,96,.45); }
    .camera.recovering::before { box-shadow:inset 0 0 0 1px rgba(239,193,75,.42); }
    .camera.recovering .cam-fault { color:var(--signal); background:rgba(12,10,5,.86); }
    .cam-fault b { font-size:12px; font-weight:500; letter-spacing:.15em; }
    .cam-fault span { max-width:90%; color:var(--ink-2); overflow-wrap:anywhere; }

    /* ---- operator summary ------------------------------------------------ */

    .status-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--hair); }
    .status-metric { min-width:0; padding:22px 24px 20px; }
    .status-metric + .status-metric { border-left:1px solid var(--hair); }
    .metric-heading { min-height:20px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
    .metric-heading h3 { margin:0; color:var(--ink-2); font-size:12px; font-weight:400; }
    .metric-heading a { color:var(--ink-3); font-size:11px; text-decoration:none; white-space:nowrap; }
    .metric-heading a:hover { color:var(--ink); }
    .metric-value { min-width:0; display:block; margin:0; color:var(--ink); font:500 clamp(28px,2.8vw,40px)/1.1 var(--mono); letter-spacing:-.055em; overflow-wrap:anywhere; }
    .metric-value.status-word { font-family:var(--sans); letter-spacing:-.025em; }
    .metric-value.idle { color:var(--ink-2); }
    .metric-value.attention,.metric-note.attention { color:var(--signal); }
    .metric-value.down,.metric-note.down { color:var(--fail); }
    .metric-note { min-height:19px; margin:12px 0 0; color:var(--ink-2); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
    .connection-note { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
    .connection-note span:last-child { color:var(--ink-3); font-size:11px; }
    #peer-state { font:500 10px/1.5 var(--mono); letter-spacing:.06em; }
    #peer-state.ok { color:var(--ok); }
    #peer-state.attention { color:var(--signal); }
    .battery-meter { width:min(100%,200px); height:4px; margin-top:14px; border-radius:2px; background:var(--edge); overflow:hidden; }
    .battery-meter i { display:block; width:0; height:100%; border-radius:inherit; background:var(--ok); transition:width .35s var(--ease); }
    .battery-meter.attention i { background:var(--signal); }
    .battery-meter.down i { background:var(--fail); }
    .battery-warning { margin:7px 0 0; color:var(--signal); font-size:11px; line-height:1.5; }


    /* Routine numbers fold away; exceptions stay outside the disclosure. */
    .diagnostics { border-top:1px solid var(--hair); }
    .diagnostics > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:46px; padding:12px 24px; list-style:none; cursor:pointer; color:var(--ink-2); font-size:12px; }
    .diagnostics > summary::-webkit-details-marker { display:none; }
    .diagnostics > summary:hover { background:rgba(255,255,255,.02); }
    .system-summary { display:flex; align-items:center; gap:9px; min-width:0; }
    .system-summary::before { content:""; width:6px; height:6px; flex:none; border-radius:50%; background:var(--ink-3); }
    .system-summary.ok::before { background:var(--ok); }
    .system-summary.attention::before { background:var(--signal); }
    .system-summary.down::before { background:var(--fail); }
    .diagnostics-label { flex:none; display:flex; align-items:center; gap:8px; color:var(--ink-3); font-size:11px; }
    .diagnostics-label::after { content:"+"; font:400 16px/1 var(--mono); }
    .diagnostics[open] .diagnostics-label::after { content:"−"; }
    .diagnostic-body { padding:4px 24px 20px; }
    .diagnostic-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
    .diagnostic-grid section { min-width:0; }
    .diagnostic-grid h3 { margin:0 0 14px; color:var(--ink-2); font-size:12px; font-weight:500; }
    .vrow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
    .diagnostic-grid .rd b { white-space:normal; overflow-wrap:anywhere; font-size:12px; }
    .diagnostic-grid .rd span { white-space:normal; font-size:9px; }
    .diagnostic-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; }
    .health-alerts { display:flex; flex-wrap:wrap; gap:10px 24px; padding:14px 24px; border-top:1px solid var(--hair); background:rgba(255,107,96,.025); }
    .system-alert { min-width:0; flex:1 1 220px; display:grid; gap:3px; }
    .system-alert b { color:var(--signal); font-size:12px; font-weight:500; }
    .system-alert.failed b { color:var(--fail); }
    .system-alert span { color:var(--ink-2); font-size:11px; overflow-wrap:anywhere; }

    /* ---- systems ---------------------------------------------------------- */

    .systems { align-items:center; }
    .health-bar { min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:20px; padding-top:14px; border-top:1px solid var(--hair); }
    .chip { min-width:0; display:flex; align-items:center; gap:9px; padding:4px 10px; overflow:hidden; border-radius:999px; background:transparent; color:var(--ink-2); font-size:10px; white-space:nowrap; transition:background .18s,color .18s; }
    .chip i { width:6px; height:6px; flex:none; border-radius:50%; background:var(--ink-3); }
    .chip > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
    .chip b { flex:none; color:var(--ink); font-weight:500; }
    .chip i,.chip small { flex:none; }
    .chip.ok i { background:var(--ok); }
    /* A green dot already says OK; printing the word seven times does not. */
    .chip.ok b { display:none; }
    .chip.degraded,.chip.recovering { background:var(--signal-soft); color:var(--signal); }
    .chip.degraded i,.chip.recovering i { background:var(--signal); }
    .chip.degraded b,.chip.recovering b { color:var(--signal); }
    .chip.recovering i { animation:chip-pulse 1.1s ease-in-out infinite; }
    .chip.failed { background:var(--fail-soft); color:var(--fail); }
    .chip.failed i { background:var(--fail); }
    .chip.failed b { color:var(--fail); }
    .chip.absent { opacity:.42; }
    .chip small { color:var(--ink-3); font-size:9px; letter-spacing:.06em; text-transform:none; }
    @keyframes chip-pulse { 0%,100% { opacity:1; } 50% { opacity:.25; } }

    /* ---- command dock ----------------------------------------------------- */

    .dock { flex-wrap:wrap; padding-top:12px; padding-bottom:12px; }
    .commands { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
    .commands button,.data-head button,.data-filters button,.clip-controls button { height:32px; padding:0 12px; border:1px solid var(--edge); border-radius:var(--r-s); background:var(--panel-2); color:var(--ink-2); cursor:pointer; font:500 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; transition:border-color .15s,background .15s,color .15s; }
    .commands button:hover:not(:disabled),.data-head button:hover:not(:disabled),.data-filters button:hover:not(:disabled) { border-color:var(--edge-hi); background:var(--panel-3); color:var(--ink); }
    .dock { padding:16px 24px; gap:16px; }
    .dock .commands button { height:40px; padding:0 16px; font:500 12px/1 var(--sans); letter-spacing:0; text-transform:none; }
    .dock #reset { color:var(--ink); border-color:var(--edge-hi); }
    .commands button.armed { border-color:rgba(239,193,75,.42); background:var(--signal-soft); color:var(--signal); }
    /* These three relabel themselves as state changes. Without a fixed width
       the button grows and shoves everything after it, the stop included. */
    #auto-recover { width:150px; }
    #base-enable { width:132px; }
    #stereo-view { width:88px; }
    #toggle-wrists { width:88px; }
    .dock-end { margin-left:auto; display:flex; align-items:center; gap:12px; padding-left:16px; border-left:1px solid var(--hair); }
    .secure-note { width:112px; margin:0; overflow:hidden; color:var(--ink-3); font-size:9.5px; line-height:1.35; text-align:right; }
    #enter-xr { height:38px; display:flex; align-items:center; gap:16px; padding:0 15px; border:1px solid var(--ink); border-radius:var(--r-s); background:var(--ink); color:#0B0D0E; cursor:pointer; transition:background .15s,border-color .15s; }
    #enter-xr:hover { border-color:#fff; background:#fff; }
    #enter-xr strong,#enter-xr small { display:block; text-align:left; }
    #enter-xr strong { font:500 10.5px/1 var(--mono); letter-spacing:.11em; }
    #enter-xr small { margin-top:4px; color:rgba(11,13,14,.62); font:400 9px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; }
    #enter-xr b { color:rgba(11,13,14,.55); font-weight:400; }
    /* The stop sits in the row with the controls it belongs to. Being the one
       red thing on the page is what makes it findable without looking. */
    .dock .commands #estop { min-width:104px; height:40px; margin-left:6px; padding:0 20px; border:1px solid rgba(255,107,96,.5); border-radius:var(--r-s); background:var(--fail-soft); color:var(--fail); cursor:pointer; font:600 12px/1 var(--sans); letter-spacing:0; text-transform:none; transition:background .15s,color .15s,border-color .15s; }
    .dock .commands #estop:hover:not(:disabled) { border-color:var(--fail); background:var(--fail); color:#160707; }

    /* ---- traction --------------------------------------------------------- */

    .drive { margin-top:var(--gap); border:1px solid var(--edge); border-radius:var(--r); background:var(--panel); overflow:hidden; animation:rise .4s .06s var(--ease) both; }
    .drive-head { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto; align-items:center; gap:24px; padding:20px 24px; }
    .drive-head > div { min-width:0; }
    .drive-head h2 { margin:0 0 7px; color:var(--ink-2); font-size:12px; font-weight:400; }
    .drive-head .drive-state { display:block; margin:0; font:500 20px/1.3 var(--sans); letter-spacing:-.02em; overflow-wrap:anywhere; }
    .drive-state.ok { color:var(--ok); }
    .drive-state.attention { color:var(--signal); }
    .drive-state.down { color:var(--fail); }
    .drive-live { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
    .drive-live .rd b { font-size:18px; white-space:normal; overflow-wrap:anywhere; }
    .drive-live .rd span { color:var(--ink-2); font:400 11px/1.4 var(--sans); letter-spacing:0; text-transform:none; }
    .drive-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:12px; }
    .base-wheel-summary { display:block; margin-top:7px; color:var(--ink-3); font:10px var(--mono); }
    .base-activation { display:grid; gap:6px; justify-items:end; }
    #base-enable { height:34px; padding:0 16px; border:1px solid rgba(239,193,75,.5); border-radius:var(--r-s); background:transparent; color:var(--signal); cursor:pointer; font:600 10.5px/1 var(--mono); letter-spacing:.11em; transition:background .15s,color .15s,border-color .15s; }
    #base-enable:hover:not(:disabled) { background:var(--signal); color:#12100A; }
    #base-enable.online { border-color:var(--edge-hi); background:var(--panel-2); color:var(--ok); }
    #base-enable:disabled { opacity:1; }
    .base-activation small { max-width:170px; min-height:13px; text-align:right; color:var(--ink-2); font:400 10px/1.45 var(--sans); letter-spacing:0; text-transform:none; }
    /* Navigation to the single base tuning workspace. */
    .disclose { height:34px; display:inline-flex; align-items:center; gap:9px; padding:0 14px; border:1px solid var(--edge); border-radius:999px; background:transparent; color:var(--ink-2); cursor:pointer; font:500 10px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase; transition:border-color .15s,color .15s; }
    .disclose:hover { border-color:var(--edge-hi); color:var(--ink); }
    .disclose i { width:0; height:0; border:4px solid transparent; border-top-color:currentColor; transform:translateY(2px); transition:transform .2s var(--ease); }
    .disclose[aria-expanded="true"] i { transform:translateY(-2px) rotate(180deg); }

    /* ---- stats ------------------------------------------------------------ */

    .robot-stats-grid { display:grid; grid-template-columns:246px minmax(420px,1fr) 246px 268px; grid-template-areas:"left model right host"; align-items:stretch; gap:var(--gap); }
    .joint-col { min-width:0; display:flex; flex-direction:column; gap:7px; }
    #joints-left { grid-area:left; }
    #joints-right { grid-area:right; }
    .joint-col > h2 { height:30px; display:flex; align-items:center; justify-content:space-between; margin:0; padding:0 2px; color:var(--ink-3); font:400 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
    .joint-col > h2 b { color:var(--ink); font-weight:500; }
    .joint,.force { overflow:hidden; border:1px solid var(--edge); border-radius:var(--r-s); background:var(--panel); }
    .joint { min-height:70px; padding:11px 12px 10px; transition:border-color .15s,background .15s; }
    .joint.hot { border-color:var(--edge-hi); background:var(--panel-2); }
    .joint header,.force header { height:auto; position:static; display:flex; align-items:center; padding:0; border:0; background:transparent; backdrop-filter:none; }
    .joint header { gap:8px; }
    .joint header i { min-width:18px; color:var(--signal); font:500 9.5px/1 var(--mono); font-style:normal; letter-spacing:.05em; }
    .joint header b,.force header b { overflow:hidden; color:var(--ink-2); font:500 9.5px/1 var(--mono); letter-spacing:.1em; text-overflow:ellipsis; white-space:nowrap; }
    .joint .jtemp { margin-left:auto; color:var(--ink-3); font:400 9.5px/1 var(--mono); white-space:nowrap; }
    .joint .jtemp.warn,.force .warn { color:var(--signal); }
    .joint .jtemp.bad,.force .bad { color:var(--fail); }
    .jbar,.fbar { height:2px; overflow:hidden; margin:10px 0 9px; border-radius:999px; background:rgba(255,255,255,.07); }
    .jbar i,.fbar i { width:0; height:100%; display:block; border-radius:inherit; background:var(--ink-2); transition:width .16s linear,background .16s; }
    .jbar i.bad,.fbar i.bad { background:var(--fail); }
    .joint dl,.force dl { display:grid; margin:0; }
    .joint dl { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
    .joint dl div,.force dl div { min-width:0; }
    .joint dt,.force dt { color:var(--ink-3); font:400 9px/1 var(--mono); letter-spacing:.09em; }
    .joint dd,.force dd { margin:5px 0 0; overflow:hidden; color:var(--ink-2); font:400 10px/1 var(--mono); text-overflow:ellipsis; white-space:nowrap; }
    .force { min-height:142px; padding:12px; }
    .force header { justify-content:space-between; }
    .fzero { color:var(--ink-3); font:400 9px/1 var(--mono); letter-spacing:.09em; }
    .fzero.on { color:var(--ok); }
    .frow { display:flex; align-items:baseline; justify-content:space-between; margin-top:11px; }
    .flabel { color:var(--ink-3); font:400 9px/1 var(--mono); letter-spacing:.1em; }
    .fpush,.fgrip { color:var(--ink); font:500 15px/1 var(--mono); letter-spacing:-.02em; }
    .fpush.warn,.fgrip.warn { color:var(--signal); }
    .fpush.high,.fgrip.high { color:var(--fail); }
    .force dl { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
    .model-wrap { grid-area:model; min-height:760px; position:relative; overflow:hidden; border:1px solid var(--edge); border-radius:var(--r); background:#050607; }
    .model-wrap::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 84%); }
    #robot-canvas { width:100%; height:100%; position:absolute; inset:0; display:block; background:transparent; cursor:grab; touch-action:none; }
    #robot-canvas.dragging { cursor:grabbing; }
    .model-label,.model-hint,.model-offline { position:absolute; z-index:2; margin:0; font:400 10px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase; pointer-events:none; }
    .model-label { top:16px; left:18px; display:flex; align-items:center; gap:9px; color:var(--ink-2); }
    .model-label::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }
    .model-hint { right:18px; bottom:16px; color:var(--ink-3); }
    .model-offline { inset:50% auto auto 50%; color:var(--ink-3); transform:translate(-50%,-50%); }
    .host-col { grid-area:host; min-width:0; display:flex; flex-direction:column; gap:var(--gap); }
    .host-col .stat-card { min-height:0; flex:1; padding:16px; }
    .host-col .stat-card h3 { margin-bottom:14px; }
    .host-col .stat-card dl div { padding:7px 0; }
    .host-col .stat-card dd.good { color:var(--ok); }
    .host-col .stat-card dd.bad { color:var(--fail); }
    .media-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--gap); margin-top:var(--gap); }
    .stat-card { min-height:168px; padding:20px; border:1px solid var(--edge); border-radius:var(--r); background:var(--panel); }
    .stat-card h3 { margin:0 0 22px; color:var(--ink-3); font:400 10px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; }
    .big { color:var(--ink); font:500 34px/1 var(--mono); letter-spacing:-.045em; }
    .warning { color:var(--signal)!important; }
    .rows { margin-top:18px; color:var(--ink-3); font:400 10px/1.4 var(--mono); }
    .rows div,.stat-card dl div { display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-top:1px solid var(--hair); }
    .rows b { color:var(--ink-2); font-weight:500; }
    .stat-card dl { margin:0; }
    .stat-card dt { color:var(--ink-3); font:400 9.5px/1.3 var(--mono); letter-spacing:.09em; }
    .stat-card dd { margin:0; color:var(--ink-2); font:400 10.5px/1.3 var(--mono); text-align:right; }

    /* Diagram-first safety inspection: one canvas, one contextual side panel. */
    .robot-stats-grid { grid-template-columns:minmax(520px,1fr) 330px; grid-template-rows:auto minmax(680px,calc(100svh - 180px)); grid-template-areas:"toolbar toolbar" "model inspector"; align-items:stretch; gap:10px; }
    .stats-toolbar { grid-area:toolbar; min-width:0; display:flex; align-items:stretch; justify-content:space-between; gap:10px; }
    .stats-safety,.stats-tools button { border:1px solid var(--edge); background:var(--panel); color:var(--ink-2); cursor:pointer; font-family:var(--mono); }
    .stats-safety { min-width:0; flex:1; display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:var(--r-s); text-align:left; }
    .stats-safety:hover,.stats-safety:focus-visible,.stats-tools button:hover,.stats-tools button:focus-visible { border-color:var(--edge-hi); outline:none; }
    .stats-safety > i { width:8px; height:8px; flex:none; border-radius:50%; background:var(--ink-3); box-shadow:0 0 0 4px rgba(255,255,255,.04); }
    .stats-safety > span { min-width:0; display:grid; gap:3px; }
    .stats-safety b { color:var(--ink); font:500 11px/1 var(--mono); letter-spacing:.05em; }
    .stats-safety small { overflow:hidden; color:var(--ink-3); font:400 9.5px/1.2 var(--mono); text-overflow:ellipsis; white-space:nowrap; }
    .stats-safety .inspect-arrow { display:block; margin-left:auto; color:var(--ink-3); font-size:12px; }
    .stats-safety[data-tone="clear"] > i { background:var(--ok); box-shadow:0 0 0 4px var(--ok-soft); }
    .stats-safety[data-tone="near"] > i { background:var(--signal); box-shadow:0 0 0 4px var(--signal-soft); }
    .stats-safety[data-tone="inside"] > i { background:var(--fail); box-shadow:0 0 0 4px var(--fail-soft); }
    .stats-tools { display:flex; align-items:stretch; gap:6px; }
    .stats-tools label,.stats-tools button { display:flex; align-items:center; padding:0 13px; border-radius:var(--r-s); color:var(--ink-3); font:400 9.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
    .stats-tools label { gap:7px; border:1px solid var(--edge); background:var(--panel); cursor:pointer; }
    .stats-tools input { accent-color:var(--signal); }
    .model-wrap { min-height:0; }
    .model-wrap[data-pose="unknown"] canvas { opacity:.48; }
    .model-label[data-fresh="false"]::before { background:var(--ink-3); box-shadow:0 0 0 3px rgba(255,255,255,.04); }
    .model-key { position:absolute; z-index:2; top:16px; right:18px; display:flex; gap:13px; color:var(--ink-3); font:400 9px/1 var(--mono); letter-spacing:.05em; pointer-events:none; }
    .model-key span { display:flex; align-items:center; gap:5px; }
    .model-key i { width:13px; height:2px; display:block; background:var(--ok); }
    .model-key .key-near { background:var(--signal); }.model-key .key-inside { background:var(--fail); }
    .model-caption { position:absolute; z-index:2; right:18px; bottom:16px; left:18px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; pointer-events:none; }
    .model-caption p { margin:0; color:var(--ink-3); font:400 9px/1.35 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
    .model-caption .model-hint { position:static; flex:none; }
    .stats-inspector { grid-area:inspector; min-width:0; overflow:auto; padding:17px; border:1px solid var(--edge); border-radius:var(--r); background:var(--panel); }
    .inspector-heading { display:flex; align-items:center; justify-content:space-between; }
    .inspector-heading span,.inspector-eyebrow { color:var(--ink-3); font:400 9px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
    #inspect-close { width:25px; height:25px; border:1px solid var(--edge); border-radius:50%; background:transparent; color:var(--ink-3); cursor:pointer; font:400 17px/1 var(--sans); }
    .stats-inspector > h2 { margin:18px 0 17px; color:var(--ink); font:400 23px/1.1 var(--sans); letter-spacing:-.025em; text-transform:none; }
    .inspect-select-label { display:block; margin-bottom:7px; color:var(--ink-3); font:400 10px/1.2 var(--mono); }
    #inspect-part { width:100%; height:36px; padding:0 10px; border:1px solid var(--edge); border-radius:var(--r-s); background:var(--panel-2); color:var(--ink-2); font:400 10px/1 var(--mono); }
    .inspect-empty { min-height:340px; display:grid; place-content:center; padding:28px; color:var(--ink-3); text-align:center; }
    .inspect-empty > span { font:300 27px/1 var(--sans); }.inspect-empty p { margin:14px 0 5px; color:var(--ink-2); font:400 14px/1.2 var(--sans); }.inspect-empty small { max-width:210px; font:400 11px/1.5 var(--mono); }
    #inspect-readings { margin-top:14px; }
    #inspect-readings .joint-col { gap:8px; }
    #inspect-readings .force { margin-top:8px; }
    .inspect-safety { margin-top:17px; padding-top:18px; border-top:1px solid var(--hair); }
    .inspect-safety h3 { margin:10px 0 5px; color:var(--ink); font:500 18px/1.2 var(--sans); }
    .inspect-safety > p:not(.inspector-eyebrow):not(.inspect-footnote):not(.inspect-reason) { margin:0 0 17px; color:var(--ink-2); font:400 11px/1.5 var(--mono); overflow-wrap:anywhere; }
    .clearance-readings { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:0 0 17px; background:var(--hair); }
    .clearance-readings div { padding:12px; background:var(--panel-2); }.clearance-readings dt { color:var(--ink-3); font:400 9px/1 var(--mono); }.clearance-readings dd { margin:7px 0 0; color:var(--ink); font:500 19px/1 var(--mono); }
    .inspect-reason { margin:0 0 23px; padding:11px 12px; border-left:2px solid var(--ink-3); background:var(--well); color:var(--ink-2); font:400 11px/1.55 var(--mono); }
    .inspect-safety[data-tone="near"] .inspect-reason { border-color:var(--signal); }.inspect-safety[data-tone="inside"] .inspect-reason { border-color:var(--fail); }
    .inspect-footnote { margin:10px 0 17px; color:var(--ink-3); font:400 10px/1.55 var(--mono); }
    .inspect-model-details { border-top:1px solid var(--hair); color:var(--ink-3); font:400 9px/1.5 var(--mono); }.inspect-model-details summary { padding:12px 0; cursor:pointer; text-transform:uppercase; letter-spacing:.08em; }.inspect-model-details p { overflow-wrap:anywhere; }
    #inspect-system-readings { margin-top:16px; }.stats-inspector .host-col { display:flex; }.stats-inspector .media-stats-grid { grid-template-columns:1fr; }
    #inspect-system-readings .stat-card { min-height:0; }.stats-inspector .host-col .stat-card { flex:none; }
    .inspect-motion-arm { margin-top:20px; padding-top:16px; border-top:1px solid var(--hair); }
    .inspect-motion-arm h3 { color:var(--ink); font:500 17px/1.3 var(--sans); }
    .inspect-motion-arm[data-tone="attention"] h3 { color:var(--signal); }
    .inspect-motion-arm p { color:var(--ink-2); font:12px/1.5 var(--sans); }

    /* ---- data ------------------------------------------------------------- */

    .data-grid { display:grid; grid-template-columns:272px 272px minmax(390px,1fr); gap:var(--gap); }
    .data-col,.data-replay { min-height:520px; padding:18px; border:1px solid var(--edge); border-radius:var(--r); background:var(--panel); }
    .data-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--hair); }
    .data-head h2 { margin:0; color:var(--ink-2); font:400 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
    .data-head span { color:var(--ink-3); font:400 10px/1 var(--mono); }
    .data-filters { display:flex; gap:4px; }
    .data-filters button { height:26px; padding:0 9px; font-size:9.5px; }
    .data-filters button.active { border-color:var(--edge-hi); color:var(--ink); }
    .data-status,.data-source,.data-hint { margin:14px 0 0; color:var(--ink-3); font:400 10px/1.6 var(--mono); }
    .data-status { text-transform:none; letter-spacing:0; }
    .data-empty { margin-top:64px; color:var(--ink-3); font:400 11px/1.6 var(--mono); text-align:center; }
    .clip-stage { min-height:340px; display:grid; place-items:center; margin-top:16px; border:1px solid var(--hair); border-radius:var(--r-s); background:var(--well); color:var(--ink-3); font:400 11px/1 var(--mono); }
    .clip-controls { display:flex; align-items:center; gap:12px; margin-top:14px; }
    .clip-controls input { flex:1; height:2px; appearance:none; border-radius:999px; background:rgba(255,255,255,.1); }
    .clip-controls input::-webkit-slider-thumb { appearance:none; width:12px; height:12px; border:0; border-radius:50%; background:var(--ink-2); cursor:pointer; }
    .clip-controls input:disabled { opacity:.4; }
    .clip-controls span { color:var(--ink-3); font:400 10px/1 var(--mono); }
    .recording-data-grid { grid-template-columns:minmax(320px,.8fr) minmax(480px,1.2fr); }
    .recording-data-grid .data-col,.recording-data-grid .data-replay { min-height:460px; }
    .storage-hero { margin:30px 0 22px; }
    .storage-hero span { display:block; color:var(--ink-3); font:400 9.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
    .storage-hero b { display:block; margin-top:9px; color:var(--ink); font:500 clamp(34px,4vw,58px)/.95 var(--mono); letter-spacing:-.05em; }
    .storage-meter { height:5px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08); }
    .storage-meter i { display:block; width:0; height:100%; border-radius:inherit; background:var(--ok); transition:width .35s var(--ease),background .2s; }
    .storage-meter i.low { background:var(--signal); }
    .storage-meter i.critical { background:var(--fail); }
    .recording-facts { margin:22px 0 0; }
    .recording-facts div { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-top:1px solid var(--hair); }
    .recording-facts dt { color:var(--ink-3); font:400 9.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
    .recording-facts dd { margin:0; color:var(--ink-2); font:500 10.5px/1 var(--mono); text-align:right; }
    .sync-control { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; margin-top:28px; padding:18px; border:1px solid var(--hair); border-radius:var(--r-s); background:var(--well); }
    .sync-control h3 { margin:0 0 7px; color:var(--ink); font-size:14px; font-weight:500; }
    .sync-control p { margin:0; color:var(--ink-3); font:400 10px/1.55 var(--mono); }
    #data-sync-toggle { min-width:128px; height:38px; border-color:rgba(239,193,75,.45); color:var(--signal); }
    #data-sync-toggle.on { border-color:rgba(121,214,157,.45); background:var(--ok-soft); color:var(--ok); }
    .archive-door { display:flex; flex-direction:column; justify-content:flex-end; min-height:290px; margin-top:18px; padding:28px; border:1px solid var(--hair); border-radius:var(--r-s); background:linear-gradient(135deg,rgba(239,193,75,.08),transparent 58%),var(--well); }
    .archive-door span { color:var(--signal); font:500 10px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; }
    .archive-door h3 { max-width:12ch; margin:12px 0 10px; color:var(--ink); font-size:clamp(28px,4vw,52px); font-weight:500; line-height:.96; letter-spacing:-.045em; }
    .archive-door p { max-width:52ch; margin:0 0 24px; color:var(--ink-3); font-size:12px; line-height:1.6; }
    .archive-door a { width:max-content; padding:11px 15px; border:1px solid var(--edge-hi); border-radius:var(--r-s); color:var(--ink); font:500 10px/1 var(--mono); letter-spacing:.1em; text-decoration:none; }
    .archive-door a[aria-disabled=true] { opacity:.35; pointer-events:none; }

    /* ---- settings --------------------------------------------------------- */

    #settings-panel { max-width:720px; display:grid; gap:var(--gap); align-content:start; }
    .settings-card { padding:22px 24px; border:1px solid var(--edge); border-radius:var(--r); background:var(--panel); }
    .settings-card h2 { margin:0 0 8px; color:var(--ink); font-size:15px; font-weight:500; letter-spacing:-.01em; }
    .settings-card p { max-width:64ch; margin:0 0 22px; color:var(--ink-2); font-size:13px; line-height:1.65; }
    .settings-card label { display:grid; grid-template-columns:160px 1fr 68px; align-items:center; gap:16px; margin:14px 0; }
    .settings-card label span { color:var(--ink-3); font-size:10px; }
    .settings-card input[type=range] { width:100%; height:2px; appearance:none; border-radius:999px; background:rgba(255,255,255,.12); }
    .settings-card input[type=range]::-webkit-slider-thumb { appearance:none; width:14px; height:14px; border:0; border-radius:50%; background:var(--ink); cursor:pointer; }
    .settings-card input[type=range]::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:50%; background:var(--ink); cursor:pointer; }
    .settings-card output { color:var(--ink); font:500 12px/1 var(--mono); text-align:right; }
    .settings-card .settings-row { display:flex; gap:8px; align-items:center; margin-top:22px; padding-top:20px; border-top:1px solid var(--hair); }
    .settings-card .settings-row button { height:32px; padding:0 14px; border:1px solid var(--edge); border-radius:var(--r-s); background:var(--panel-2); color:var(--ink-2); cursor:pointer; font:500 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
    .settings-card .settings-row button:hover { border-color:var(--edge-hi); color:var(--ink); }
    .settings-card .settings-row button.on { border-color:rgba(239,193,75,.45); background:var(--signal-soft); color:var(--signal); }
    /* The camera card's rows are built by the robot's own control descriptors,
       so they arrive as the same label/control/output grid and inherit it. */
    .settings-card label button { height:30px; justify-self:start; padding:0 15px; border:1px solid var(--edge); border-radius:var(--r-s); background:var(--panel-2); color:var(--ink-2); cursor:pointer; font:500 10px/1 var(--mono); letter-spacing:.11em; transition:border-color .15s,background .15s,color .15s; }
    .settings-card label button:hover { border-color:var(--edge-hi); color:var(--ink); }
    .settings-card label button.on { border-color:rgba(239,193,75,.45); background:var(--signal-soft); color:var(--signal); }
    .settings-card input[type=range]:disabled { opacity:.3; }
    #camera-controls { display:grid; }
    #camera-controls-status { margin:0; color:var(--ink-3); font:400 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }

    /* ---- battery workspace ---------------------------------------------- */

    #battery-panel { --ground:var(--panel); --dim:var(--ink-3); --line:var(--hair); --line-hi:var(--edge-hi); --trace:var(--ok); min-width:0; padding:24px; background:var(--panel); border:1px solid var(--edge); border-radius:var(--r); }
    .battery-workspace-head { display:flex; justify-content:space-between; align-items:center; gap:20px; }
    .battery-workspace-head h2 { margin:0; font-size:22px; font-weight:500; letter-spacing:-.025em; }
    .battery-workspace-head p,.battery-chart-head p { margin:5px 0 0; color:var(--ink-3); font-size:12px; }
    #battery-panel .live-pill { color:var(--ink-3); font:11px var(--mono); white-space:nowrap; }
    #battery-panel .live-pill::before { content:""; display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:currentColor; }
    #battery-panel .live-pill.live { color:var(--ok); }
    #battery-panel .live-pill.offline { color:var(--signal); }
    .battery-workspace-warning { padding:12px 0; color:var(--signal); border-bottom:1px solid var(--edge); }
    .battery-workspace-summary { display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; gap:24px; padding:28px 0; border-bottom:1px solid var(--hair); }
    .battery-workspace-summary > div { display:flex; flex-direction:column; min-width:0; }
    .battery-workspace-summary span,.battery-workspace-summary small { color:var(--ink-2); font-size:12px; }
    .battery-workspace-summary b { display:flex; align-items:baseline; gap:5px; margin:12px 0 9px; font:500 clamp(24px,3vw,38px)/1.1 var(--mono); letter-spacing:-.055em; white-space:nowrap; }
    .battery-workspace-summary b span { font:14px var(--mono); letter-spacing:0; }
    .battery-workspace-summary small { font-size:10px; color:var(--ink-3); }
    .battery-workspace-summary .stale { color:var(--ink-3); }
    .battery-workspace-summary .charging { color:var(--ok); }
    #battery-panel [data-battery="measurement-state"] strong { font-weight:400; }
    .battery-chart-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 0 16px; }
    .battery-chart-head h3 { margin:0; font-size:15px; font-weight:500; }
    .battery-ranges { display:flex; gap:3px; }
    #battery-panel .range-button { min-width:44px; min-height:34px; border:1px solid transparent; border-radius:var(--r-xs); padding:5px 10px; background:transparent; color:var(--ink-3); font:11px var(--mono); cursor:pointer; }
    #battery-panel .range-button:hover { color:var(--ink); }
    #battery-panel .range-button.active { border-color:var(--edge); color:var(--ink); background:var(--panel-2); }
    .battery-chart-wrap { position:relative; height:250px; }
    .battery-chart-wrap canvas { display:block; width:100%; height:100%; }
    .battery-chart-empty { position:absolute; inset:0; display:grid; place-items:center; color:var(--ink-3); pointer-events:none; }
    .battery-chart-tooltip { position:absolute; z-index:1; padding:8px 12px; background:var(--panel-3); border:1px solid var(--edge-hi); border-radius:var(--r-xs); font:10px/1.6 var(--mono); pointer-events:none; transform:translate(-50%,calc(-100% - 12px)); white-space:nowrap; }
    .battery-chart-tooltip b { display:block; font-size:13px; color:var(--ok); }
    .battery-chart-foot { display:flex; justify-content:space-between; gap:12px; padding:10px 0 24px; color:var(--ink-3); font:10px var(--mono); }
    .battery-chart-foot b { margin-left:8px; color:var(--ink-2); font-weight:400; }
    .battery-secondary-readings { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin:0; padding:20px 0; border-top:1px solid var(--hair); }
    #battery-panel dt { color:var(--ink-3); font-size:11px; }
    #battery-panel dd { margin:7px 0 0; font:13px var(--mono); overflow-wrap:anywhere; }
    .battery-details { border-top:1px solid var(--hair); }
    .battery-details summary { padding:18px 0 0; cursor:pointer; font-size:13px; }
    .battery-details summary span { margin-left:12px; color:var(--ink-3); font-size:11px; }
    .battery-details-body { padding-top:8px; }
    .battery-details-body p { max-width:85ch; color:var(--ink-3); font-size:12px; line-height:1.6; }
    .battery-details-body h4 { margin:24px 0 12px; font-size:12px; font-weight:500; }
    .battery-device-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
    .battery-cell-readings { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:16px; margin:0 0 24px; }
    @media(max-width:700px) {
      #battery-panel { padding:20px 16px; }
      .battery-workspace-summary,.battery-secondary-readings,.battery-device-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; }
      .battery-workspace-summary { padding:24px 0; }
      .battery-workspace-summary b { font-size:29px; }
      .battery-chart-head { flex-wrap:wrap; }
      .battery-chart-wrap { height:230px; }
      .battery-details summary span { display:block; margin:5px 0 0 16px; }
    }
    @media(max-width:460px) {
      .tabs { overflow-x:auto; border-radius:var(--r-s); }
      .tabs .tab { flex:1 0 auto; padding-right:8px; padding-left:8px; font-size:9px; letter-spacing:.07em; }
    }

    /* ---- base configuration --------------------------------------------- */

    #base-panel { min-width:0; }
    .base-config-owner { min-height:112px; display:grid; grid-template-columns:minmax(340px,1fr) minmax(230px,.42fr) auto; align-items:center; gap:30px; padding:20px 24px; border:1px solid var(--edge); border-radius:var(--r); background:var(--panel); }
    .base-config-owner h2 { margin:0; font-size:22px; font-weight:500; letter-spacing:-.025em; }
    .base-config-owner p:not(.eyebrow) { max-width:70ch; margin:8px 0 0; color:var(--ink-2); font-size:12px; line-height:1.55; }
    .base-config-owner .eyebrow { margin-bottom:7px; }
    .base-config-mode { min-width:0; display:grid; gap:6px; padding-left:18px; border-left:1px solid var(--hair); }
    .base-config-mode span,.base-config-mode small { overflow:hidden; color:var(--ink-3); font:400 8px/1.35 var(--mono); letter-spacing:.09em; text-overflow:ellipsis; white-space:nowrap; }
    .base-config-mode strong { color:var(--ink); font:500 11px/1.2 var(--mono); letter-spacing:.06em; }
    .base-config-mode strong.ok { color:var(--ok); }.base-config-mode strong.attention { color:var(--signal); }.base-config-mode strong.down { color:var(--fail); }
    .base-config-actions { display:flex; gap:7px; }
    .base-config-actions button { height:36px; padding:0 14px; border:1px solid var(--edge); border-radius:var(--r-s); background:var(--panel-2); color:var(--ink-2); cursor:pointer; font:500 9px/1 var(--mono); letter-spacing:.09em; }
    .base-config-actions button:hover:not(:disabled) { border-color:var(--edge-hi); color:var(--ink); }
    #base-configure { border-color:rgba(239,193,75,.3); color:var(--signal); }
    #settingsView { margin-top:var(--gap); }

    /* ---- overlays --------------------------------------------------------- */

    #xr-canvas { display:none; }
    .toast { position:fixed; left:50%; top:max(20px,env(safe-area-inset-top)); z-index:2147483647; width:max-content; max-width:min(560px,calc(100vw - 40px)); max-height:calc(100svh - 40px); overflow:auto; padding:10px 16px; border:0; border-radius:var(--notice-radius); background:var(--notice-background); color:var(--notice-ink); font:var(--notice-weight) 14px/1.5 var(--notice-font); text-align:center; overflow-wrap:anywhere; opacity:0; transform:translate(-50%,-6px); pointer-events:none; transition:opacity .18s,transform .18s var(--ease); }
    .toast.show { opacity:1; transform:translate(-50%,0); }

    /* ---- responsive ------------------------------------------------------- */

    @media(max-width:1500px) {
      .robot-stats-grid { grid-template-columns:minmax(480px,1fr) 320px; grid-template-areas:"toolbar toolbar" "model inspector"; }
    }

    @media(max-width:1240px) {
      .rd.hero b { font-size:19px; }
      .drive-head { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
      .drive-actions { grid-column:1 / -1; justify-content:flex-start; }
      .base-activation { justify-items:start; }
      .base-activation small { text-align:left; }
      .data-grid { grid-template-columns:1fr; }
      .data-col { min-height:220px; }
    }

    @media(max-width:900px) {
      header { height:54px; }
      .mark small,#clock { display:none; }
      main { min-height:calc(100svh - 54px); padding-right:14px; padding-left:14px; }
      #fleet { padding-top:36px; }
      .fleet-head { align-items:flex-start; flex-direction:column; gap:20px; }
      .fleet-side { text-align:left; }
      .robot-grid { grid-template-columns:1fr; }
      #control { padding-top:12px; }
      .control-head { grid-template-columns:auto minmax(0,1fr); gap:14px; }
      .tabs { grid-column:1 / -1; justify-content:stretch; }
      .tab { flex:1; min-width:0; }
      .camera-stage { height:auto; min-height:0; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; }
      .camera-stage:not(.wrists):has(#stereo-pair:not(.single)) { height:auto; }
      .camera { aspect-ratio:16/9; }
      .camera.main { grid-column:1 / -1; grid-row:1; }
      #cam-left { grid-column:1; grid-row:2; }
      #cam-right { grid-column:2; grid-row:2; }
      .lidar-panel,.camera-stage.wrists .lidar-panel { height:clamp(190px,34vw,240px); grid-column:1 / -1; grid-row:3; }
      .status-metric { padding:20px 16px; }
      .metric-value { font-size:28px; }
      .diagnostic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .dock-end { width:100%; margin-left:0; padding-left:0; border-left:0; padding-top:12px; border-top:1px solid var(--hair); }
      .secure-note { margin-left:auto; width:auto; }
      .dock-end #enter-xr { order:-1; }
      .robot-stats-grid { grid-template-columns:1fr 300px; grid-template-areas:"toolbar toolbar" "model inspector"; }
      .model-wrap { min-height:560px; }
      .host-col { grid-template-columns:1fr 1fr; }
      .media-stats-grid { grid-template-columns:1fr 1fr; }
      .settings-card label { grid-template-columns:1fr; gap:8px; }
      .settings-card output { text-align:left; }
      .base-config-owner { grid-template-columns:1fr; gap:18px; }
      .base-config-mode { padding:14px 0 0; border-top:1px solid var(--hair); border-left:0; }
      .toast { top:max(14px,env(safe-area-inset-top)); max-width:calc(100vw - 28px); max-height:calc(100svh - 28px); }
    }

    @media(max-width:760px) {
      .robot-stats-grid { grid-template-columns:1fr; grid-template-rows:auto 560px auto; grid-template-areas:"toolbar" "model" "inspector"; }
      .stats-inspector { overflow:visible; }
      .inspect-empty { min-height:140px; }
      .model-caption { flex-direction:column; align-items:flex-start; gap:7px; }
    }

    @media(max-width:560px) {
      .status-overview { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .status-metric:last-child { grid-column:1 / -1; border-left:0; border-top:1px solid var(--hair); }
      .status-metric:last-child .metric-value { font-size:26px; }
      .metric-heading a { font-size:10px; }
      .metric-heading { flex-wrap:wrap; gap:4px; }
      .metric-value { font-size:30px; }
      .metric-note { font-size:11px; }
      .dock,.health-alerts { padding:14px 16px; }
      .dock .commands { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
      .dock .commands button,.dock .commands #estop { min-width:0; height:44px; margin-left:0; padding:0 8px; }
      .diagnostics > summary { padding:14px 16px; font-size:11px; }
      .diagnostic-body { padding:4px 16px 18px; }
      .diagnostic-grid { grid-template-columns:1fr; }
      .drive-head { padding:18px 16px; gap:18px; }
      .drive-head > div:first-child { grid-column:1 / -1; }
      .drive-live { grid-column:1 / -1; }
      .header-status { gap:10px; }
      .header-status > span:last-child { display:none; }
      .robot-stats-grid { grid-template-columns:1fr; grid-template-rows:auto 440px auto; grid-template-areas:"toolbar" "model" "inspector"; }
      .model-wrap { min-height:440px; }
      .host-col,.media-stats-grid { grid-template-columns:1fr; }
      .stats-toolbar { flex-direction:column; }
      .stats-tools { min-height:38px; display:grid; grid-template-columns:1fr 1fr 1fr; }
      .stats-tools label,.stats-tools button { justify-content:center; padding:0 7px; }
      .model-key { top:42px; left:18px; right:auto; }
      .model-caption .model-hint { display:none; }
      .stats-inspector { overflow:visible; }
    }

    @media(prefers-reduced-motion:reduce) {
      *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
    }

    .session-recording { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px; border:1px solid var(--hair); background:var(--panel, #101412); }
    .session-recording-copy { flex:1; min-width:220px; display:grid; gap:5px; }
    .session-recording-copy strong { font:500 12px var(--mono); letter-spacing:.04em; }
    .session-recording-copy span { font:400 11px var(--mono); color:var(--muted); }
    .session-recording[data-state="recording"] strong { color:#ff7777; }
    .session-recording[data-state="armed"] strong { color:#aee5c2; }
    .session-recording[data-state="warning"] strong { color:#ffc16d; }
    .session-recording button { padding:11px 14px; font-size:11px; }
    #data-recording { margin:20px 0; }