:root {
  color-scheme: dark;
  --bg: #070914;
  --panel: rgba(255,255,255,.08);
  --panel-strong: rgba(255,255,255,.13);
  --text: #f8fbff;
  --muted: #9fa9bd;
  --blue: #7dd3fc;
  --green: #86efac;
  --pink: #f0abfc;
  --red: #f87171;
  --yellow: #fde68a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 10% 10%, rgba(125,211,252,.25), transparent 32rem),
    radial-gradient(circle at 90% 0%, rgba(240,171,252,.20), transparent 32rem),
    linear-gradient(145deg, #060713 0%, #101827 100%);
  color: var(--text);
}
.shell { width: min(1180px, calc(100vw - 32px)); margin: 0 auto; padding: 28px 0; }
.hero { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 20px; }
.hero-actions { display: grid; gap: 10px; justify-items: end; align-items: center; }
.docs-button { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; padding: 13px 16px; border-radius: 999px; color: #061018; text-decoration: none; font-weight: 950; letter-spacing: -.015em; background: linear-gradient(135deg, var(--pink), var(--blue)); box-shadow: 0 18px 50px rgba(125,211,252,.18); transition: transform .12s ease, filter .12s ease; }
.docs-button:hover { transform: translateY(-2px); filter: brightness(1.05); }
.eyebrow { color: var(--blue); text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; margin: 0 0 8px; }
h1 { font-size: clamp(2.8rem, 8vw, 5.8rem); line-height: .85; margin: 0; letter-spacing: -.08em; }
.subhead { color: var(--muted); font-size: 1rem; margin: 14px 0 0; max-width: 700px; }
.profile-picker { display: inline-grid; gap: 6px; margin-top: 14px; min-width: min(360px, 100%); color: var(--muted); font-weight: 850; }
.profile-picker span { color: var(--blue); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.profile-picker select { width: 100%; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(0,0,0,.28); color: var(--text); padding: 11px 12px; font-weight: 850; }
.status-card, .panel, .scoreboard article, dialog::backdrop + * {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  backdrop-filter: blur(18px);
  border-radius: 24px;
}
.status-card { display: flex; align-items: center; gap: 10px; padding: 14px 16px; min-width: 220px; }
.dot { width: 12px; height: 12px; border-radius: 999px; background: var(--yellow); box-shadow: 0 0 20px currentColor; }
.dot.ok { background: var(--green); }
.dot.bad { background: var(--red); }
.scoreboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.scoreboard article { padding: 18px; }
.scoreboard span { display: block; font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 900; letter-spacing: -.06em; }
.scoreboard label { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.panel { padding: 20px; }
.launchpad { margin-bottom: 14px; }
.inline-launchpad { margin-bottom: 0; padding: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; }
.big-buttons { display: grid; grid-template-columns: 1.1fr .9fr .9fr .65fr; gap: 12px; }
.inline-launchpad .big-buttons { grid-template-columns: 1fr 1fr; gap: 10px; }
button { cursor: pointer; border: 0; color: #061018; font-weight: 950; transition: transform .12s ease, filter .12s ease; }
button:hover { transform: translateY(-2px); filter: brightness(1.05); }
button:active { transform: translateY(1px); }
button:disabled, button[aria-disabled="true"] { cursor: not-allowed; opacity: .46; filter: grayscale(.35); transform: none; }
.launch { min-height: 78px; border-radius: 22px; font-size: clamp(1.1rem, 2.2vw, 1.75rem); letter-spacing: -.04em; }
.inline-launchpad .launch { min-height: 72px; font-size: clamp(1rem, 1.8vw, 1.35rem); }
.launch { position: relative; overflow: hidden; }
.launch::after { content: ""; position: absolute; inset: -45%; background: linear-gradient(120deg, transparent 37%, rgba(255,255,255,.30), transparent 63%); transform: translateX(-72%) rotate(12deg); transition: transform .48s ease; pointer-events: none; }
.launch:hover::after { transform: translateX(72%) rotate(12deg); }
.record { background: linear-gradient(135deg, var(--green), var(--blue)); }
.infer { background: linear-gradient(135deg, var(--pink), var(--blue)); }
.ghost { background: linear-gradient(135deg, #bfdbfe, var(--blue) 54%, #60a5fa); color: #061018; box-shadow: 0 14px 38px rgba(96,165,250,.18); }
.stop { background: linear-gradient(135deg, #bbf7d0, var(--green) 48%, #22c55e); box-shadow: 0 14px 38px rgba(34,197,94,.18); }
#stopBtn { background: linear-gradient(135deg, #fecaca, var(--red) 55%, #dc2626); color: #061018; box-shadow: 0 14px 38px rgba(248,113,113,.24); }
.episode-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; color: var(--muted); }
.inline-launchpad .episode-row { margin-top: 10px; font-size: .9rem; }
#episodeBtn { padding: 14px 20px; border-radius: 16px; background: linear-gradient(135deg, #bfdbfe, var(--blue) 55%, #38bdf8); box-shadow: 0 10px 30px rgba(56,189,248,.18); font-size: .95rem; }
.grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
h2 { margin: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.list { display: grid; gap: 10px; }
.run-item, .recording-item { padding: 12px; border-radius: 16px; background: rgba(255,255,255,.07); color: var(--muted); border: 1px solid transparent; text-align: left; }
.recording-item { width: 100%; color: var(--muted); font-weight: 500; }
.recording-item:hover, .recording-item.selected { border-color: var(--blue); background: rgba(125,211,252,.12); }
.run-item strong, .recording-item strong { color: var(--text); display: block; font-weight: 900; }
.dataset-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px; border-radius: 18px; background: linear-gradient(145deg, rgba(125,211,252,.08), rgba(255,255,255,.055)); color: var(--muted); border: 1px solid rgba(255,255,255,.10); text-align: left; cursor: pointer; }
.dataset-item:hover { border-color: rgba(125,211,252,.55); background: linear-gradient(145deg, rgba(125,211,252,.13), rgba(255,255,255,.07)); }
.dataset-main { display: grid; gap: 5px; min-width: 0; }
.dataset-main strong { color: var(--text); font-size: 1.08rem; font-weight: 1000; letter-spacing: -.025em; }
.dataset-main span { color: #dbeafe; font-weight: 850; overflow-wrap: anywhere; }
.dataset-main small { color: var(--green); font-weight: 850; }
.dataset-main code { color: rgba(255,255,255,.66); background: rgba(0,0,0,.22); border-radius: 10px; padding: 6px 8px; font-size: .74rem; overflow-wrap: anywhere; }
.dataset-main p { margin: 2px 0 0; color: var(--muted); }
.dataset-main em { color: rgba(255,255,255,.58); font-style: normal; font-size: .78rem; }
.dataset-actions { display: grid; gap: 8px; min-width: 132px; }
.mini.danger { background: linear-gradient(135deg, #fecaca, var(--red)); color: #061018; }
.dataset-actions .mini { width: 100%; }
.dataset-runs { grid-column: 1 / -1; display: grid; gap: 8px; padding: 10px; border-radius: 16px; background: rgba(0,0,0,.20); border: 1px solid rgba(255,255,255,.08); }
.dataset-run { display: grid; grid-template-columns: 1.1fr .85fr minmax(0,1fr); gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border-radius: 13px; background: rgba(255,255,255,.075); color: var(--muted); border: 1px solid rgba(255,255,255,.08); text-align: left; }
.dataset-run:hover { border-color: rgba(125,211,252,.45); background: rgba(125,211,252,.10); }
.dataset-run strong { color: var(--text); font-weight: 950; }
.dataset-run span { color: #dbeafe; font-size: .82rem; }
.dataset-run small { color: var(--yellow); overflow-wrap: anywhere; }
.dataset-runs p { margin: 0; color: var(--muted); }
.hint { color: var(--muted); margin: -4px 0 14px; }
.setup-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.setup-buttons .mini.danger:last-child:nth-child(odd) { grid-column: 1 / -1; }
.auth-grid { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-bottom: 10px; }
.hidden { display: none !important; }
.field, .toggle { position: relative; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 13px; display: grid; gap: 7px; }
.field[data-tip]::after, .toggle[data-tip]::after { content: attr(data-tip); position: absolute; left: 12px; right: 12px; bottom: calc(100% + 8px); z-index: 40; padding: 10px 12px; border-radius: 13px; background: rgba(8,13,26,.98); color: var(--text); border: 1px solid rgba(125,211,252,.38); box-shadow: 0 16px 44px rgba(0,0,0,.42); font-size: .82rem; line-height: 1.25; font-weight: 750; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .06s ease, transform .06s ease; }
.field[data-tip]:hover::after, .toggle[data-tip]:hover::after, .field[data-tip]:focus-within::after, .toggle[data-tip]:focus-within::after { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.field span, .toggle span { font-weight: 850; }
.info-dot { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 5px; border-radius: 999px; background: rgba(125,211,252,.18); color: var(--blue); border: 1px solid rgba(125,211,252,.38); font-size: .72rem; font-style: normal; cursor: help; }
.field input { width: 100%; font-size: 1rem; padding: 10px 12px; border-radius: 12px; border: 0; background: rgba(0,0,0,.25); color: var(--text); }
.toggle { grid-template-columns: auto 1fr; align-items: center; }
.toggle input { width: 24px; height: 24px; accent-color: var(--green); grid-row: span 2; }
.toggle small { color: var(--muted); }
.mini { padding: 11px 14px; border-radius: 13px; background: rgba(255,255,255,.85); color: #061018; font-size: .92rem; }
.mini.strong { background: linear-gradient(135deg, var(--green), var(--blue)); }
.mini.primary { background: linear-gradient(135deg, var(--pink), var(--blue)); }
.calibration-card { grid-column: span 2; }
.calibration-buttons { grid-template-columns: repeat(4, 1fr); }
.calibration-state { border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 11px 12px; margin-bottom: 12px; color: var(--muted); background: rgba(0,0,0,.20); font-weight: 850; }
.calibration-state.active { color: var(--green); border-color: rgba(134,239,172,.36); }
.calibration-state.error { color: var(--red); border-color: rgba(248,113,113,.45); }
.joint-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.joint-card { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); }
.joint-card > div:first-child { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.joint-card strong { color: var(--text); font-weight: 950; }
.joint-card span { color: var(--blue); font-weight: 950; font-variant-numeric: tabular-nums; }
.joint-card small, .joint-empty, .muted { color: var(--muted); }
.joint-bar { height: 9px; border-radius: 999px; background: rgba(0,0,0,.35); overflow: hidden; }
.joint-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--blue)); }
.icon { background: rgba(255,255,255,.12); color: var(--text); width: 40px; height: 40px; border-radius: 999px; font-size: 1.7rem; }
pre { min-height: 240px; max-height: 380px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; box-sizing: border-box; background: rgba(0,0,0,.28); border-radius: 18px; padding: 14px; color: #d7fbe8; }
.small-console { min-height: 76px; max-height: 130px; margin-bottom: 0; color: #dbeafe; contain: inline-size; }
dialog { border: 0; background: transparent; padding: 0; width: min(880px, calc(100vw - 28px)); color: var(--text); }
dialog::backdrop { background: rgba(0,0,0,.62); backdrop-filter: blur(8px); }
.dialog-card { background: rgba(12,18,32,.96); border: 1px solid rgba(255,255,255,.14); border-radius: 26px; padding: 22px; box-shadow: 0 28px 100px rgba(0,0,0,.6); }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wide { grid-column: 1 / -1; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
@media (max-width: 860px) {
  .hero, .episode-row, .section-head { align-items: stretch; flex-direction: column; }
  .hero-actions { justify-items: stretch; }
  .docs-button { min-width: 0; }
  .scoreboard, .big-buttons, .grid-two, .auth-grid, .setup-buttons, .form-grid { grid-template-columns: 1fr; }
  .launch { min-height: 68px; }
  .calibration-card { grid-column: auto; }
  .joint-grid { grid-template-columns: 1fr; }
  .dataset-item { grid-template-columns: 1fr; }
  .dataset-actions { grid-template-columns: 1fr; }
  .dataset-run { grid-template-columns: 1fr; }
}

.setup-form { grid-template-columns: repeat(2, 1fr); margin-bottom: 12px; }
.pill { display: inline-block; border-radius: 999px; padding: 5px 10px; color: #071018; font-weight: 950; }
.pill.ok { background: var(--green); }
.pill.warn { background: var(--yellow); }
@media (max-width: 860px) { .setup-form { grid-template-columns: 1fr; } }

.port-summary { background: rgba(255,255,255,.07); border-radius: 16px; padding: 12px; color: var(--muted); line-height: 1.45; margin-bottom: 12px; }
.port-summary strong { color: var(--text); }
#portSetupPanel { display: grid; gap: 12px; }
#portSetupPanel.hidden { display: none !important; }

.settings-panel { margin-bottom: 14px; padding: 0; overflow: hidden; }
.settings-toggle { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-align: left; background: rgba(255,255,255,.08); color: var(--text); padding: 18px 20px; border-radius: 24px; }
.settings-toggle span { font-size: 1.25rem; font-weight: 950; }
.settings-toggle small { color: var(--muted); font-weight: 650; }
.settings-toggle b { font-size: 1.6rem; transition: transform .15s ease; }
.settings-toggle.open b { transform: rotate(180deg); }
/* Settings: one column of fold-down rows. Every card is a row with a title, a one-line
   summary and a chevron; the body opens on a tap and the choice is remembered per browser.
   One type scale for the whole page: titles 1rem/800, summaries and hints .86rem/500. */
.settings-body { display: grid; gap: 10px; padding: 0 20px 20px; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.settings-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 0; min-width: 0; overflow: hidden; overflow-wrap: anywhere; }
.settings-card.danger-zone { border-color: rgba(248,113,113,.3); }
.settings-group { display: grid; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; min-width: 0; overflow: hidden; }
.settings-group > .settings-grid { padding: 10px; background: rgba(0,0,0,.14); }
.fold-toggle { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; text-align: left; background: transparent; color: var(--text); padding: 14px 16px; border: 0; border-radius: 0; font: inherit; cursor: pointer; }
.fold-toggle:hover { background: rgba(255,255,255,.04); }
.fold-toggle.open { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); }
.fold-title { grid-column: 1; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.fold-sub { grid-column: 1; color: var(--muted); font-size: .86rem; font-weight: 500; line-height: 1.4; }
.fold-chev { grid-column: 2; grid-row: 1 / span 2; font-size: 1.25rem; line-height: 1; color: var(--muted); transition: transform .15s ease; }
.fold-toggle.open .fold-chev { transform: rotate(180deg); }
.fold-body { padding: 16px; }
.fold-toggle.group .fold-title::before { content: '▸ '; color: var(--blue); }
.fold-inner { margin-top: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.14); }
.fold-inner .fold-toggle { padding: 10px 12px; }
.fold-inner .fold-title { font-size: .92rem; }
.fold-inner .fold-body { padding: 4px 12px 10px; }
/* The same scale inside the bodies, so hints, labels and status lines read as one page. */
.settings-body .hint, .settings-body .field-hint, .settings-body .muted-small, .settings-body .port-summary, .settings-body .wizard-head small, .settings-body .tuning-head small, .settings-body .key-sync, .settings-body .key-note { font-size: .86rem; font-weight: 500; line-height: 1.5; color: var(--muted); }
.settings-body .hint { margin: 0 0 12px; }
.settings-body .hint:last-child { margin-bottom: 0; }
.settings-body .substatus { font-size: .9rem; font-weight: 500; }
.settings-body h3 { margin: 0 0 6px; font-size: .95rem; font-weight: 800; letter-spacing: -.01em; }
.settings-body .wizard-head h3 { font-size: .95rem; letter-spacing: -.01em; }
.settings-body .eyebrow { font-size: .68rem; letter-spacing: .14em; margin: 0 0 4px; }
.settings-body .key-row b { font-size: .92rem; font-weight: 700; }
.settings-body .key-state { font-size: .88rem; font-weight: 600; }
.settings-body .calibration-state { font-size: .9rem; font-weight: 650; }
.settings-body .mini { font-size: .88rem; padding: 10px 14px; }
.settings-body pre.small-console { font-size: .8rem; min-height: 0; }
.settings-body .support-login { font-size: .86rem; font-weight: 500; }
.settings-body .remote-row { font-size: .9rem; }
.settings-body .audit-list { font-size: .84rem; }
.settings-body .update-notes { font-size: .88rem; }
.settings-body .setup-buttons { margin-bottom: 0; }
.settings-body .setup-buttons + * { margin-top: 12px; }
.settings-body .key-rows { margin-bottom: 0; }
.settings-body .key-rows + .hint { margin-top: 10px; }
#portSetupPanel .port-summary { margin-bottom: 0; }
.settings-body .field > span, .settings-body .toggle > span { font-size: .88rem; font-weight: 700; }
.settings-body .field input, .settings-body .field select, .settings-body .field textarea { font-size: .95rem; }
.settings-body .usb-ports, .settings-body .usb-ports .empty { font-size: .9rem; font-weight: 500; }
.settings-body .joints-mode, .settings-body .tuning-status { font-size: .86rem; }
.run-item { cursor: pointer; }
.run-log { margin-top: 12px; max-height: 320px; min-height: 140px; color: #fef3c7; }
.run-item small { color: var(--yellow); }
.launch.running { box-shadow: 0 0 0 3px rgba(134,239,172,.35), 0 0 34px rgba(134,239,172,.22); animation: pulse-run 1.5s ease-in-out infinite; }
@keyframes pulse-run { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
.launch.locked:not(.running), .launch:disabled:not(.running) { opacity: .38; filter: grayscale(.75); cursor: not-allowed; transform: none; box-shadow: none; }
.launch.locked:not(.running):hover, .launch:disabled:not(.running):hover { transform: none; filter: grayscale(.75); }
.camera-panel { margin-bottom: 14px; display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 18px; align-items: start; }
.camera-left-rail { display: grid; gap: 18px; align-content: start; min-height: 100%; }
.camera-side-tools { display: grid; gap: 12px; align-content: start; padding-top: clamp(24px, 11vw, 150px); }
.camera-panel .section-head { display: grid; gap: 14px; align-content: start; margin-bottom: 0; }
.camera-actions { display: grid; grid-template-columns: 1fr; gap: 10px; justify-content: stretch; }
.camera-grid { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 12px; align-items: start; }
.camera-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); border-radius: 18px; padding: 10px; display: grid; gap: 8px; position: relative; }
.camera-card { touch-action: pan-y; user-select: none; cursor: grab; }
.camera-grip { display: none; position: absolute; left: 14px; top: 14px; z-index: 3; width: 36px; height: 36px; border-radius: 11px; background: rgba(7,9,20,.72); color: var(--text); place-items: center; font-size: 1.15rem; touch-action: none; cursor: grab; }
@media (pointer: coarse) { .camera-grip { display: grid; } }
.camera-card input, .camera-card button, .camera-card summary, .camera-card details, .camera-card label { touch-action: auto; user-select: auto; cursor: auto; }
.camera-card.dragging { opacity: .88; cursor: grabbing; transform: scale(1.025); box-shadow: 0 28px 90px rgba(0,0,0,.45); }
.camera-card.drop-target { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(125,211,252,.22), 0 18px 50px rgba(125,211,252,.14); transform: translateY(-4px); }
.camera-drag-active { cursor: grabbing; }
.camera-card.drag-affordance { animation: drag-affordance .95s ease both; }
@keyframes drag-affordance { 0%,100% { transform: translateY(0); box-shadow: none; } 28% { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(125,211,252,.18); } 55% { transform: translateY(2px); } }
.camera-drag-hint { position: absolute; top: 8px; right: 8px; z-index: 1; padding: 4px 7px; border-radius: 999px; background: rgba(0,0,0,.46); color: rgba(255,255,255,.72); font-size: .62rem; font-weight: 900; letter-spacing: .02em; pointer-events: none; }
.camera-card.camera-role-overhead { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
.camera-card.camera-role-left_wrist { justify-self: start; }
.camera-card.camera-role-right_wrist { justify-self: end; }
.camera-card.disabled { opacity: .58; }
.camera-preview { aspect-ratio: 16/9; max-height: none; background: rgba(0,0,0,.38); border-radius: 14px; display: grid; place-items: center; overflow: hidden; color: var(--muted); font-size: .9rem; text-align: center; padding: 0; }
.camera-preview img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; user-drag: none; }
.stream-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: -2px; }
.stream-tab { padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.12); color: var(--text); font-size: .76rem; font-weight: 900; }
.stream-tab.active { background: linear-gradient(135deg, var(--green), var(--blue)); color: #061018; }
.stream-tab:disabled { opacity: .55; cursor: wait; }
.open-camera-preview { width: 100%; height: 100%; min-height: 190px; display: grid; place-items: center; align-content: center; gap: 6px; border-radius: inherit; color: var(--text); background: radial-gradient(circle at 50% 40%, rgba(125,211,252,.16), rgba(255,255,255,.055) 55%, rgba(0,0,0,.18)); border: 1px solid rgba(255,255,255,.08); }
.open-camera-preview span { font-size: 1.05rem; font-weight: 1000; letter-spacing: -.03em; }
.open-camera-preview small { color: var(--muted); font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.camera-loading { display: grid; place-items: center; min-height: 190px; color: rgba(255,255,255,.74); font-weight: 900; }
.camera-controls { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(170px, 1fr); gap: 7px; align-items: end; }
.camera-row { display: grid; grid-template-columns: auto 1fr; gap: 7px; align-items: center; min-height: 42px; }
.camera-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); }
.camera-card .field { padding: 7px 8px; border-radius: 12px; }
.camera-card .field span { font-size: .64rem; white-space: nowrap; }
.camera-card .field input { font-size: .86rem; padding: 6px 8px; }
.camera-card select { width: 100%; font-size: .86rem; padding: 5px 7px; border-radius: 10px; border: 0; background: rgba(0,0,0,.25); color: var(--text); }
.camera-device-picker { grid-column: 1 / -1; }
.camera-device-picker select { min-height: 36px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
.camera-device { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; overflow-wrap: anywhere; }
.camera-device summary { cursor: pointer; color: rgba(255,255,255,.62); }
.camera-loading { color: var(--muted); font-weight: 800; }
.camera-disclaimer { margin: 6px 0 0; color: var(--yellow); font-size: .9rem; max-width: 720px; }
.camera-count { display: inline-flex; margin-left: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(153,202,59,.14); color: var(--green); font-size: .86rem; letter-spacing: 0; vertical-align: middle; }
.camera-status { margin-top: 12px; min-height: 0; max-height: 160px; }
.camera-status.hidden { display: none; }
.safety-dialog { width: min(520px, calc(100vw - 28px)); }
.safety-card { background: linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,26,.98)); border-color: rgba(253,230,138,.28); }
.safety-card h2 { font-size: clamp(1.7rem, 4vw, 2.45rem); letter-spacing: -.05em; }
.safety-copy { color: var(--text); font-size: 1.05rem; line-height: 1.45; margin: 12px 0 0; padding: 14px 16px; border-radius: 18px; background: rgba(253,230,138,.10); border: 1px solid rgba(253,230,138,.22); }
.confirm-dialog { width: min(620px, calc(100vw - 28px)); }
.confirm-card { background: radial-gradient(circle at 0 0, rgba(125,211,252,.14), transparent 36%), linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,26,.98)); border-color: rgba(125,211,252,.24); }
.confirm-card h2 { font-size: clamp(1.65rem, 4vw, 2.55rem); letter-spacing: -.055em; margin-bottom: 12px; }
.confirm-copy { display: grid; gap: 10px; margin: 8px 0 2px; }
.confirm-copy p { margin: 0; color: rgba(255,255,255,.84); line-height: 1.42; padding: 11px 13px; border-radius: 15px; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.08); overflow-wrap: anywhere; }
.confirm-card .dialog-actions { flex-wrap: wrap; }
@media (max-width: 980px) { .camera-panel { grid-template-columns: 1fr; } .camera-side-tools { padding-top: 0; } .inline-launchpad .big-buttons { grid-template-columns: 1fr; } .camera-panel .section-head { margin-bottom: 0; } .camera-grid { grid-template-columns: 1fr; justify-content: stretch; } .camera-card.camera-role-overhead,.camera-card.camera-role-left_wrist,.camera-card.camera-role-right_wrist { grid-column: auto; width: 100%; justify-self: stretch; } .camera-controls { grid-template-columns: 1fr; } .camera-actions { justify-content: stretch; } }
#discardEpisodeBtn { padding: 14px 20px; border-radius: 16px; background: linear-gradient(135deg, #fed7aa, var(--yellow)); font-size: .95rem; }
.record-notice { position: fixed; right: 26px; bottom: 26px; z-index: 120; width: min(520px, calc(100vw - 32px)); padding: 24px 26px; border-radius: 28px; border: 1px solid rgba(255,255,255,.18); background: rgba(8,13,26,.94); box-shadow: 0 28px 100px rgba(0,0,0,.55); backdrop-filter: blur(18px); display: grid; gap: 6px; animation: notice-pop .22s ease both; }
.record-notice span { font-size: clamp(2.2rem, 7vw, 4.4rem); line-height: .86; letter-spacing: -.08em; font-weight: 1000; }
.record-notice small { color: rgba(255,255,255,.82); font-size: clamp(1rem, 2.1vw, 1.45rem); font-weight: 850; }
.record-notice.record { border-color: rgba(134,239,172,.45); box-shadow: 0 0 0 4px rgba(134,239,172,.12), 0 28px 100px rgba(0,0,0,.55); }
.record-notice.next { border-color: rgba(125,211,252,.55); box-shadow: 0 0 0 4px rgba(125,211,252,.14), 0 28px 100px rgba(0,0,0,.55); }
.record-notice.discard { border-color: rgba(253,230,138,.60); box-shadow: 0 0 0 4px rgba(253,230,138,.13), 0 28px 100px rgba(0,0,0,.55); }
.record-notice.stop, .record-notice.error { border-color: rgba(248,113,113,.58); box-shadow: 0 0 0 4px rgba(248,113,113,.14), 0 28px 100px rgba(0,0,0,.55); }
@keyframes notice-pop { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 860px) { .record-notice { left: 16px; right: 16px; bottom: 16px; width: auto; } }
/* While recording, the operator watches the camera grid full-screen: dock the
   cue banner top-center and let clicks pass through so it never hides a wrist view. */
.recording-mode .record-notice { top: 14px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: min(460px, calc(100vw - 32px)); padding: 12px 22px 14px; text-align: center; justify-items: center; pointer-events: none; animation: notice-pop-top .22s ease both; }
.recording-mode .record-notice span { font-size: clamp(1.4rem, 3.2vw, 2.2rem); }
.recording-mode .record-notice small { font-size: clamp(.85rem, 1.6vw, 1.05rem); }
@keyframes notice-pop-top { from { opacity: 0; transform: translate(-50%, -12px) scale(.98); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.train-epoch-line { justify-content: center; padding: 2px 4px 0; }
.adv-flags { grid-column: 1 / -1; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 10px 14px; background: rgba(255,255,255,.04); }
.adv-flags summary { cursor: pointer; font-weight: 850; color: rgba(255,255,255,.82); display: flex; align-items: center; gap: 10px; }
.adv-flags summary small { color: rgba(255,255,255,.55); font-weight: 700; }
.adv-flags[open] summary { margin-bottom: 12px; }
.adv-flags .form-grid label.field span { font-family: ui-monospace, monospace; font-size: .82em; }
.train-epoch-line small { color: rgba(255,255,255,.66); font-weight: 750; }
.train-epoch-line b { color: rgba(134,239,172,.92); font-weight: 900; }
.record-live-panel { display: grid; gap: 18px; padding: clamp(18px, 3vw, 28px); border-radius: 30px; border: 1px solid rgba(134,239,172,.26); background: radial-gradient(circle at 0 0, rgba(134,239,172,.16), transparent 34%), linear-gradient(145deg, rgba(8,13,26,.94), rgba(17,24,39,.92)); box-shadow: 0 28px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06); }
.record-live-panel.hidden { display: none; }
.recording-mode .scoreboard, .recording-mode .settings-panel, .recording-mode .grid-two, .uploading-mode .scoreboard, .uploading-mode .settings-panel, .uploading-mode .grid-two, .uploading-mode .camera-panel { display: none; }
.recording-mode .record-live-panel { min-height: calc(100vh - 190px); align-content: start; border-color: rgba(248,113,113,.42); background: radial-gradient(circle at 0 0, rgba(248,113,113,.20), transparent 30%), radial-gradient(circle at 100% 0, rgba(125,211,252,.14), transparent 32%), linear-gradient(145deg, rgba(8,13,26,.97), rgba(17,24,39,.94)); }
.record-live-head { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.record-live-rec { display: inline-flex; align-items: center; gap: 9px; color: var(--red); }
.record-live-rec span { width: 12px; height: 12px; border-radius: 999px; background: var(--red); box-shadow: 0 0 24px rgba(248,113,113,.9); animation: rec-blink .85s infinite; }
.record-live-head h2 { margin: 0; font-size: clamp(2rem, 5vw, 4rem); line-height: .9; letter-spacing: -.08em; }
.record-live-head small { display: block; margin-top: 8px; color: rgba(255,255,255,.72); font-weight: 800; overflow-wrap: anywhere; }
#recordLiveState { padding: 10px 14px; border-radius: 999px; background: rgba(134,239,172,.16); color: var(--green); letter-spacing: .08em; font-size: .82rem; white-space: nowrap; }
.record-live-commandbar { display: grid; grid-template-columns: 1.15fr 1fr .9fr 1fr; gap: 12px; }
.live-control { min-height: 72px; border-radius: 20px; font-size: clamp(1rem, 2vw, 1.45rem); letter-spacing: -.035em; }
.live-control.next { background: linear-gradient(135deg, #bfdbfe, var(--blue) 55%, #38bdf8); box-shadow: 0 14px 38px rgba(56,189,248,.18); }
.live-control.discard { background: linear-gradient(135deg, #fed7aa, var(--yellow)); }
.live-control.stop { background: linear-gradient(135deg, #bbf7d0, var(--green) 48%, #22c55e); box-shadow: 0 14px 38px rgba(34,197,94,.18); }
.live-control.kill { background: linear-gradient(135deg, #7f1d1d, var(--red)); color: white; box-shadow: 0 0 0 1px rgba(248,113,113,.35) inset; }
.record-live-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.record-live-grid article { padding: 18px; border-radius: 22px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); }
.record-live-grid span { display: block; font-size: clamp(2.2rem, 6vw, 5rem); line-height: .86; font-weight: 1000; letter-spacing: -.08em; }
.record-live-grid label { display: block; margin-top: 9px; color: rgba(255,255,255,.64); font-size: .78rem; font-weight: 1000; text-transform: uppercase; letter-spacing: .09em; }
.record-live-timer { background: linear-gradient(145deg, rgba(125,211,252,.14), rgba(255,255,255,.06)) !important; }
.record-live-meter { height: 13px; border-radius: 999px; background: rgba(255,255,255,.10); overflow: hidden; }
.record-live-meter span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--blue)); transition: width .25s linear; }
.record-live-panel p { margin: 0; color: rgba(255,255,255,.78); font-weight: 850; }
.record-live-audio { display: inline-flex; width: fit-content; padding: 8px 11px; border-radius: 999px; background: rgba(253,230,138,.12); color: var(--yellow) !important; border: 1px solid rgba(253,230,138,.20); font-size: .86rem; }
.record-live-audio.enabled { background: rgba(134,239,172,.13); color: var(--green) !important; border-color: rgba(134,239,172,.24); }
.record-live-audio.muted { background: rgba(248,113,113,.10); color: rgba(255,255,255,.70) !important; border-color: rgba(248,113,113,.18); }
.toggle.disabled { opacity: .48; filter: grayscale(.55); }
.record-live-camera-wrap { display: grid; gap: 12px; margin-top: 4px; }
.record-live-section-head { display: flex; justify-content: space-between; gap: 12px; align-items: end; }
.record-live-section-head h3 { margin: 0; font-size: 1.25rem; letter-spacing: -.04em; }
.record-live-section-head small { color: rgba(255,255,255,.60); font-weight: 800; }
.record-live-cameras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.record-live-camera { display: grid; gap: 8px; padding: 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.065); min-width: 0; }
.record-live-camera-screen { aspect-ratio: 16/9; border-radius: 16px; background: radial-gradient(circle at 50% 45%, rgba(248,113,113,.20), rgba(0,0,0,.42) 42%, rgba(0,0,0,.72)); display: grid; place-items: center; position: relative; overflow: hidden; }
.record-live-camera-screen:before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 7px); opacity: .45; }
.record-live-camera-screen b { position: relative; z-index: 1; font-size: .75rem; letter-spacing: .12em; color: rgba(255,255,255,.78); }
.record-live-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.record-live-frame[src] + .record-live-camera-dot + b { display: none; }
.record-live-camera-dot { position: absolute; top: 12px; left: 12px; width: 10px; height: 10px; border-radius: 999px; background: var(--red); box-shadow: 0 0 20px rgba(248,113,113,.9); animation: rec-blink .85s infinite; }
.record-live-camera strong { color: var(--text); font-size: 1rem; }
.record-live-camera small { color: var(--green); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.record-live-camera code { color: rgba(255,255,255,.62); background: rgba(0,0,0,.24); border-radius: 10px; padding: 7px 8px; font-size: .72rem; overflow-wrap: anywhere; }
.record-live-panel.resetting { border-color: rgba(125,211,252,.36); background: radial-gradient(circle at 0 0, rgba(125,211,252,.18), transparent 34%), linear-gradient(145deg, rgba(8,13,26,.94), rgba(17,24,39,.92)); }
.record-live-panel.resetting #recordLiveState { background: rgba(125,211,252,.16); color: var(--blue); }
.record-live-panel.failed { border-color: rgba(248,113,113,.48); background: radial-gradient(circle at 0 0, rgba(248,113,113,.20), transparent 34%), linear-gradient(145deg, rgba(8,13,26,.96), rgba(31,18,18,.92)); }
.record-live-panel.failed #recordLiveState { background: rgba(248,113,113,.16); color: var(--red); }
.record-live-panel.complete { border-color: rgba(134,239,172,.42); }
.record-live-panel.preparing { border-color: rgba(125,211,252,.36); background: radial-gradient(circle at 0 0, rgba(125,211,252,.18), transparent 34%), linear-gradient(145deg, rgba(8,13,26,.94), rgba(17,24,39,.92)); }
.record-live-panel.preparing #recordLiveState { background: rgba(125,211,252,.16); color: var(--blue); }
.record-live-panel.finalizing { display: none; }
.record-live-panel.waiting { border-color: rgba(134,239,172,.42); background: radial-gradient(circle at 0 0, rgba(134,239,172,.20), transparent 34%), radial-gradient(circle at 100% 0, rgba(125,211,252,.12), transparent 32%), linear-gradient(145deg, rgba(8,13,26,.94), rgba(17,24,39,.92)); }
.record-live-panel.waiting #recordLiveState { background: rgba(134,239,172,.16); color: var(--green); }
.record-live-panel.waiting .record-live-rec { color: var(--green); }
.record-live-panel.waiting .record-live-rec span { background: var(--green); box-shadow: 0 0 24px rgba(134,239,172,.75); animation: rec-blink 1.6s infinite; }
.record-live-panel.waiting #recordLiveEpisodeBtn { background: linear-gradient(135deg, var(--green), var(--blue)); color: #061018; }
.record-live-panel.preparing .record-live-rec, .record-live-panel.resetting .record-live-rec, .record-live-panel.complete .record-live-rec { color: var(--blue); }
.record-live-panel.preparing .record-live-rec span, .record-live-panel.resetting .record-live-rec span, .record-live-panel.complete .record-live-rec span { background: var(--blue); box-shadow: 0 0 24px rgba(125,211,252,.75); animation: none; }
@keyframes rec-blink { 0%, 45% { opacity: 1; transform: scale(1); } 46%, 100% { opacity: .25; transform: scale(.82); } }
@media (max-width: 760px) { .record-live-head { display: grid; } .record-live-grid, .record-live-commandbar, .record-live-cameras { grid-template-columns: 1fr; } }

.upload-panel { display: grid; gap: 20px; min-height: calc(100vh - 190px); align-content: start; padding: clamp(18px, 3vw, 32px); border-radius: 30px; border: 1px solid rgba(125,211,252,.34); background: radial-gradient(circle at 0 0, rgba(125,211,252,.20), transparent 34%), radial-gradient(circle at 100% 0, rgba(240,171,252,.15), transparent 32%), linear-gradient(145deg, rgba(8,13,26,.97), rgba(17,24,39,.94)); box-shadow: 0 28px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06); }
.upload-panel.hidden { display: none; }
.upload-head { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.upload-head h2 { margin: 0; font-size: clamp(2.1rem, 5.5vw, 4.6rem); line-height: .9; letter-spacing: -.08em; }
.upload-head small { display: block; margin-top: 8px; color: rgba(255,255,255,.72); font-weight: 800; overflow-wrap: anywhere; }
#uploadState { padding: 10px 14px; border-radius: 999px; background: rgba(125,211,252,.16); color: var(--blue); letter-spacing: .08em; font-size: .82rem; white-space: nowrap; }
.upload-meter { height: 18px; border-radius: 999px; background: rgba(255,255,255,.10); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.upload-meter span { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--blue), var(--green)); animation: upload-slide 1.25s ease-in-out infinite alternate; }
.upload-panel p { margin: 0; color: rgba(255,255,255,.80); font-size: 1.05rem; font-weight: 850; }
@keyframes upload-slide { from { transform: translateX(-80%); } to { transform: translateX(140%); } }
@media (max-width: 760px) { .upload-head { display: grid; } }
.swap-wrists { align-self: center; justify-self: center; width: 58px; height: 58px; border-radius: 999px; background: linear-gradient(135deg, var(--blue), #bfdbfe); color: #061018; font-size: 2rem; line-height: 1; box-shadow: 0 14px 34px rgba(125,211,252,.22); grid-column: 1 / -1; grid-row: 2; z-index: 2; }
.swap-wrists:hover { transform: translateY(-2px) rotate(180deg); }
.camera-card.camera-role-left_wrist { grid-column: 1; grid-row: 2; }
.camera-card.camera-role-right_wrist { grid-column: 2; grid-row: 2; }
@media (max-width: 980px) { .swap-wrists { grid-column: auto; grid-row: auto; transform: rotate(90deg); } .swap-wrists:hover { transform: translateY(-2px) rotate(270deg); } .camera-card.camera-role-left_wrist, .camera-card.camera-role-right_wrist { grid-column: auto; grid-row: auto; } }

.swap-action { background: linear-gradient(135deg, var(--blue), #bfdbfe); color: #061018; font-size: 1rem; }
.camera-grid { position: relative; }
.audio-action { background: linear-gradient(135deg, #ddd6fe, var(--blue)); color: #061018; }
.audio-action.enabled { background: linear-gradient(135deg, var(--green), var(--blue)); }
#restoreRecordingDefaultsBtn { margin-right: auto; background: rgba(255,255,255,.72); }

.history-more { margin-top: 10px; width: 100%; background: rgba(255,255,255,.78); }
.history-item strong { display: block; }
.muted { color: var(--muted); font-weight: 750; }

.port-wizard { display: grid; gap: 14px; padding: 16px; border-radius: 22px; border: 1px solid rgba(125,211,252,.18); background: radial-gradient(circle at 0% 0%, rgba(125,211,252,.13), transparent 35%), rgba(255,255,255,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.wizard-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(140px,240px); gap: 16px; align-items: center; }
.wizard-head h3 { margin: 0; font-size: clamp(1.35rem, 2.5vw, 2rem); letter-spacing: -.055em; }
.wizard-head small { color: var(--muted); font-weight: 750; line-height: 1.35; }
.wizard-meter { height: 12px; border-radius: 999px; background: rgba(255,255,255,.10); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.wizard-meter span { display: block; width: 0%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--blue)); transition: width .28s ease; }
.wizard-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.wizard-step { display: grid; gap: 4px; min-height: 72px; padding: 10px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.045); opacity: .46; transition: opacity .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.wizard-step b { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.wizard-step span { color: var(--text); font-weight: 950; line-height: 1.05; }
.wizard-step small { color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; }
.wizard-step.active { opacity: 1; border-color: rgba(125,211,252,.62); background: rgba(125,211,252,.12); transform: translateY(-1px); }
.wizard-step.done { opacity: 1; border-color: rgba(134,239,172,.42); background: rgba(134,239,172,.10); }
.wizard-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.wizard-port-card { position: relative; min-height: 130px; display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(8,13,26,.42); opacity: .34; filter: grayscale(.65); transition: opacity .22s ease, filter .22s ease, transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.wizard-port-card .icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.10); font-size: 1.45rem; }
.wizard-port-card h4 { margin: 0; font-size: .98rem; line-height: 1.05; }
.wizard-port-card p { margin: 0; color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.wizard-port-card.active { opacity: 1; filter: none; border-color: rgba(125,211,252,.70); box-shadow: 0 0 0 3px rgba(125,211,252,.12), 0 18px 52px rgba(125,211,252,.10); transform: translateY(-2px); }
.wizard-port-card.done { opacity: 1; filter: none; border-color: rgba(134,239,172,.45); background: linear-gradient(145deg, rgba(134,239,172,.11), rgba(8,13,26,.42)); }
.wizard-port-card.done:after { content: '✓'; position: absolute; right: 12px; top: 10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--green); color: #071018; font-weight: 1000; }
.wizard-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wizard-device-picker { display: grid; gap: 8px; padding: 12px; border-radius: 16px; border: 1px solid rgba(253,230,138,.22); background: rgba(253,230,138,.08); }
.wizard-device-picker p { margin: 0; color: var(--yellow); font-weight: 850; }
.wizard-device-picker button { text-align: left; justify-content: flex-start; background: rgba(255,255,255,.12); color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 980px) { .wizard-head, .wizard-steps, .wizard-card-grid { grid-template-columns: 1fr; } }

/* Teleop device picker (leader selector next to the Teleop button) */
.teleop-cluster { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.teleop-cluster .launch { width: 100%; }
.teleop-device-picker { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: .8rem; }
.teleop-device-picker .teleop-device-icon { font-size: 1rem; line-height: 1; }
.teleop-device-picker select { flex: 1; min-width: 0; background: transparent; color: inherit; border: 0; outline: none; font-size: .82rem; cursor: pointer; }
.teleop-device-picker select option { color: #111; }
.teleop-device-picker.single select { pointer-events: none; opacity: .75; cursor: default; }

/* VR teleop session panel (Quest URL card, shown while VR teleop is live) */
.vr-session-panel { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(99,102,241,.16), rgba(14,165,233,.10)); border: 1px solid rgba(99,102,241,.45); box-shadow: 0 8px 30px rgba(30,27,75,.35); }
.vr-session-head { display: flex; align-items: center; gap: 8px; font-weight: 900; letter-spacing: .08em; font-size: .85rem; }
.vr-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: vr-pulse 1.6s infinite; }
.vr-live-dot.starting { background: #f59e0b; box-shadow: none; animation: none; }
@keyframes vr-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.7); } 70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.vr-session-sub { font-size: .8rem; opacity: .85; }
.vr-session-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(.95rem, 1.6vw, 1.2rem); font-weight: 800; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px dashed rgba(255,255,255,.35); color: #7dd3fc; cursor: pointer; text-align: center; overflow-wrap: anywhere; }
.vr-session-url:hover { background: rgba(0,0,0,.5); }
.vr-session-cams { font-size: .78rem; opacity: .8; }
/* Headset controller legend (shown while a recording owns the VR session) */
.vr-session-legend { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); font-size: .76rem; font-weight: 650; color: rgba(255,255,255,.86); }
.vr-session-legend.hidden { display: none; }
.vr-key { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px; border-radius: 8px; font-size: .72rem; font-weight: 900; border: 1px solid currentColor; background: rgba(255,255,255,.04); }
.vr-key-a { color: var(--green); }
.vr-key-b { color: var(--red); }
.vr-key-x { color: var(--yellow); }
.vr-key-y { color: var(--blue); }

/* Teleop device card rail (above the launch buttons; governs Teleop & Record) */
.device-rail-wrap { margin-bottom: 12px; }
.device-rail-title { font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; opacity: .85; margin-bottom: 8px; }
.device-rail-hint { font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .6; margin-left: 6px; }
.device-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.device-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 12px 12px; border-radius: 16px; border: 1.5px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: inherit; text-align: left; cursor: pointer; transition: transform .15s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.device-card:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.09); }
.device-card.selected { border-color: rgba(99,102,241,.9); background: linear-gradient(140deg, rgba(99,102,241,.22), rgba(14,165,233,.12)); box-shadow: 0 6px 24px rgba(79,70,229,.35); }
.device-card.selected::after { content: "ACTIVE"; font-size: .58rem; font-weight: 900; letter-spacing: .12em; color: #a5b4fc; margin-top: 4px; }
.device-card.coming-soon { opacity: .45; cursor: not-allowed; }
.device-card-icon { font-size: 1.6rem; line-height: 1.1; }
.device-card-name { font-weight: 850; font-size: .92rem; letter-spacing: -.01em; }
.device-card-desc { font-size: .68rem; opacity: .75; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Auto-detected transport badge (e.g. KER: USB vs WiFi vs not-detected) */
.device-card-status { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: .62rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; opacity: .9; }
.device-card-status .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.device-card-status .dot-ok   { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,.8); }
.device-card-status .dot-wifi { background: #38bdf8; box-shadow: 0 0 6px rgba(56,189,248,.8); }
.device-card-status .dot-off  { background: rgba(255,255,255,.28); }
.device-card-status .dot-wait { background: #fbbf24; animation: dotPulse 1.2s ease-in-out infinite; }
@keyframes dotPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Joints & tuning panel */
.joints-controls { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.joints-mode { font-size: .78rem; opacity: .8; }
.joints-grid-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 14px; }
.joints-arm h4 { margin: 6px 0 4px; font-size: .9rem; letter-spacing: .04em; }
.joints-src { margin-bottom: 10px; }
.joints-src-status { font-size: .72rem; margin: 2px 0 6px; opacity: .85; }
.joints-src-status.ok { color: #22c55e; }
.joints-src-status.bad { color: #f59e0b; }
.joints-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.joints-table td { padding: 2px 8px 2px 0; border-bottom: 1px solid rgba(128,128,128,.15); }
.joints-table td.val { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; min-width: 72px; font-variant-numeric: tabular-nums; }
.joints-table td.val.moved { animation: joint-flash .6s ease-out; }
@keyframes joint-flash { 0% { background: rgba(34,197,94,.45); } 100% { background: transparent; } }
.joint-err { color: #ef4444; font-weight: 700; margin-left: 6px; }
.tuning-head { margin: 8px 0 4px; }
.tuning-head h3 { margin: 0; font-size: .95rem; }
.advanced-tuning { margin-top: 14px; border-top: 1px solid var(--panel-strong); padding-top: 10px; }
.advanced-tuning > summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.tuning-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.tuning-side { border: 1px solid rgba(128,128,128,.25); border-radius: 10px; padding: 10px 12px; }
.tuning-side h4 { margin: 0 0 8px; font-size: .85rem; }
.tuning-side .field { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0; font-size: .78rem; }
.tuning-side input[type=number] { width: 84px; }
.tuning-limits { margin-top: 8px; }
.tuning-limits summary { cursor: pointer; font-size: .78rem; opacity: .9; }
.tuning-limits .limit-row { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 6px; align-items: center; margin: 3px 0; font-size: .75rem; }
.tuning-limits input { width: 100%; }
.tuning-status { font-size: .78rem; }
.tuning-status.ok { color: #22c55e; }
.tuning-status.bad { color: #ef4444; }

/* ---------------- Library & inference ---------------- */
.library-dialog::backdrop, .infer-dialog::backdrop { background: rgba(4, 7, 16, .72); backdrop-filter: blur(3px); }
.library-card { width: min(880px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.library-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 14px; }
.library-tabs { display: flex; gap: 6px; }
.lib-tab, .lib-scope { opacity: .62; }
.lib-tab.active, .lib-scope.active { opacity: 1; outline: 2px solid var(--blue); }
.library-search { flex: 1; min-width: 220px; font-size: 1rem; padding: 10px 12px; border-radius: 12px; border: 0; background: rgba(0,0,0,.25); color: var(--text); }
.library-auth { width: 100%; color: var(--muted); font-size: .8rem; }
.library-list { overflow-y: auto; display: grid; gap: 8px; padding-right: 4px; }
.library-empty { color: var(--muted); padding: 18px 4px; }
.lib-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--panel); border: 1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 12px 14px; }
.lib-row-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 6px; }
/* Full repo names, always readable: take the row's free width and wrap rather than cut. */
.lib-row-main strong { overflow-wrap: anywhere; line-height: 1.25; }
.lib-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.lib-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-chip { font-size: .72rem; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.10); color: var(--muted); letter-spacing: .02em; }
.lib-chip.type { background: rgba(125,211,252,.16); color: var(--blue); text-transform: uppercase; font-weight: 800; }
.lib-chip.good { background: rgba(134,239,172,.14); color: var(--green); }
.lib-chip.warn { background: rgba(253,230,138,.14); color: var(--yellow); }
.lib-link { text-decoration: none; display: inline-flex; align-items: center; }
.lib-progress { color: var(--muted); font-size: .78rem; min-width: 0; }
.infer-model-summary { margin: 2px 0 10px; }
.infer-checks { display: grid; gap: 7px; margin: 0 0 14px; }
.infer-check { display: flex; gap: 10px; align-items: baseline; background: var(--panel); border: 1px solid rgba(255,255,255,.10); border-radius: 13px; padding: 9px 12px; }
.infer-check.ok { border-color: rgba(134,239,172,.35); }
.infer-check.bad { border-color: rgba(248,113,113,.45); }
.infer-check.warn { border-color: rgba(251,191,36,.55); }
.infer-check.warn .infer-check-mark { color: #fbbf24; }
.infer-check-mark { font-weight: 900; }
.infer-check.ok .infer-check-mark { color: var(--green); }
.infer-check.bad .infer-check-mark { color: var(--red); }
.infer-check small { display: block; color: var(--muted); font-weight: 500; }
.mini.danger-primary { background: linear-gradient(135deg, #fecaca, var(--red)); color: #061018; font-weight: 900; }

/* Cloud training */
.train-jobs { display: grid; gap: 8px; margin: 4px 0 16px; max-height: 34vh; overflow-y: auto; }
.train-form { border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; }
.field select { width: 100%; font-size: 1rem; padding: 10px 12px; border-radius: 12px; border: 0; background: rgba(0,0,0,.25); color: var(--text); }
.lib-row-dataset { display: block; }
.lib-row-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lib-runs { display: grid; gap: 5px; margin-top: 10px; border-top: 1px solid rgba(255,255,255,.10); padding-top: 10px; }
.lib-run { color: var(--muted); font-size: .82rem; text-decoration: none; padding: 4px 8px; border-radius: 8px; background: rgba(0,0,0,.18); }
.lib-run:hover { color: var(--text); }
.status-card { flex-direction: column; align-items: flex-start; gap: 3px; }
.status-card > div { display: flex; align-items: center; gap: 8px; }
.status-card .substatus { font-size: .82rem; color: var(--muted); }

/* Dataset viewer */
.ds-card { width: min(1100px, 96vw); }
.ds-layout { display: flex; gap: 12px; min-height: 0; }
.ds-episodes { width: 180px; flex-shrink: 0; overflow-y: auto; max-height: 56vh; display: grid; gap: 6px; align-content: start; }
.ds-ep { text-align: left; background: var(--panel); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 8px 10px; color: var(--text); display: grid; gap: 2px; cursor: pointer; }
.ds-ep span { color: var(--muted); font-size: .78rem; }
.ds-ep.active { outline: 2px solid var(--blue); }
.ds-player { flex: 1; min-width: 0; display: grid; gap: 10px; align-content: start; }
.ds-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ds-video { margin: 0; display: grid; gap: 3px; }
.ds-video video { width: 100%; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: #000; }
.ds-video figcaption { color: var(--muted); font-size: .75rem; text-align: center; }
.ds-controls { display: flex; align-items: center; gap: 10px; }
.ds-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ================= App shell: sidebar + header + pages ================= */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 16px; padding: 22px 14px 16px; border-right: 1px solid rgba(255,255,255,.07); background: rgba(6,8,18,.55); backdrop-filter: blur(14px); z-index: 70; }
.side-brand .eyebrow { font-size: .6rem; letter-spacing: .16em; margin: 0 0 5px; }
.side-logo-row { display: flex; align-items: center; gap: 9px; }
.side-mark { width: 34px; height: auto; flex: none; }
.side-logo { font-size: 1.85rem; font-weight: 1000; letter-spacing: -.06em; line-height: .9; }
.menu-btn { display: none; width: 40px; height: 40px; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border-radius: 12px; background: rgba(255,255,255,.08); color: var(--text); }
.menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.side-nav { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: 14px; background: transparent; color: var(--muted); font-weight: 850; font-size: .95rem; text-align: left; }
.nav-item:hover { background: rgba(255,255,255,.07); color: var(--text); transform: none; filter: none; }
.nav-item.active { background: linear-gradient(135deg, rgba(134,239,172,.15), rgba(125,211,252,.13)); color: var(--text); box-shadow: inset 0 0 0 1px rgba(125,211,252,.26); }
.nav-glyph { width: 20px; text-align: center; color: var(--blue); font-size: 1rem; }
.side-foot { margin-top: auto; display: grid; gap: 10px; }
/* "All robots" back to the portal, and the robot's name + address under the nav */
.side-portal { display: flex; align-items: center; gap: 9px; margin-top: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); color: #dbeafe; text-decoration: none; font-weight: 800; font-size: .8rem; line-height: 1.15; }
.side-portal:hover { background: rgba(255,255,255,.1); }
.side-portal-arrow { color: var(--blue); font-size: 1rem; }
.side-portal-text { display: flex; flex-direction: column; }
.side-portal-text small { color: var(--muted); font-weight: 600; font-size: .68rem; }
.sidebar .status-card b { font-weight: 800; }
.sidebar .status-card .side-addr { color: var(--muted); font-size: .72rem; padding-left: 20px; word-break: break-all; }
.sidebar .status-card { min-width: 0; padding: 12px 13px; font-size: .8rem; border-radius: 18px; box-shadow: none; }
.side-stop { min-height: 56px; border-radius: 16px; font-size: 1rem; letter-spacing: -.02em; font-weight: 950; color: #061018; background: linear-gradient(135deg, #fecaca, var(--red) 55%, #dc2626); box-shadow: 0 14px 38px rgba(248,113,113,.24); }

.main-col { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 14px; min-height: 73px; padding: 12px clamp(16px, 2.5vw, 28px); border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(7,9,20,.82); backdrop-filter: blur(16px); }
.back-btn { width: 40px; height: 40px; flex: none; border-radius: 999px; background: rgba(255,255,255,.10); color: var(--text); font-size: 1.15rem; font-weight: 900; }
.crumb-wrap { flex: 1 1 auto; min-width: 0; }
.crumb { margin: 0 0 2px; color: var(--blue); text-transform: uppercase; letter-spacing: .14em; font-size: .64rem; font-weight: 800; }
.page-title { margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.6rem); letter-spacing: -.045em; line-height: 1.05; overflow-wrap: anywhere; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.top-profile { margin: 0; min-width: 220px; }
.top-profile select { padding: 9px 11px; border-radius: 12px; }
.top-docs { min-width: 0; padding: 11px 18px; font-size: .9rem; }
.pages { padding: clamp(16px, 2.5vw, 26px); }
.page { display: none; }
.page.active { display: block; animation: page-in .16s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.page-card { max-width: 1080px; margin: 0 auto; background: var(--panel); border: 1px solid rgba(255,255,255,.12); border-radius: 26px; padding: 22px; box-shadow: 0 24px 80px rgba(0,0,0,.35); backdrop-filter: blur(18px); }
.page-card.library-card { width: auto; max-height: none; }
.page-wide .page-card { max-width: none; }
.launch.replay-last { background: linear-gradient(135deg, #bbf7d0, var(--green) 48%, #22c55e); box-shadow: 0 14px 38px rgba(34,197,94,.18); color: #061018; }
.console-grid { margin-top: 14px; grid-template-columns: 1fr; }

/* Confirm dialogs sized per the navigation design */
.confirm-dialog { width: min(440px, 90vw); }
.confirm-card { border-radius: 26px; }

/* ================= Dataset editor (cinema layout) ================= */
.ds-page-head { margin-bottom: 12px; }
.ds-page-head h2 { font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -.04em; overflow-wrap: anywhere; }
.dsx-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.dsx-rail { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.dsx-rail-head { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 4px; }
.dsx-rail-head span { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.dsx-rail-head small { color: var(--muted); font-weight: 700; }
.dsx-eps { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: calc(100vh - 260px); padding-right: 2px; }
.ds-ep { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.05); color: var(--text); border: 1px solid transparent; cursor: pointer; }
.ds-ep:hover { background: rgba(255,255,255,.09); transform: none; }
.ds-ep.active { border-color: rgba(125,211,252,.55); background: rgba(125,211,252,.10); box-shadow: 0 0 0 1px rgba(125,211,252,.25); }
.ds-ep .dsx-thumb { height: 40px; border-radius: 9px; }
.ds-ep strong { display: block; font-size: .86rem; font-weight: 900; }
.ds-ep span { display: block; color: var(--muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsx-main { display: grid; gap: 10px; min-width: 0; }
.dsx-stage { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.dsx-stage .ds-video { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: #05070f; border: 1px solid rgba(255,255,255,.09); min-height: 0; }
.dsx-stage .ds-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; border: 0; border-radius: 0; }
.dsx-stage .ds-video figcaption { position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; background: rgba(5,7,15,.66); color: #dbeafe; text-align: left; }
.dsx-stage .dsx-hero { grid-row: 1 / span var(--dsx-rest, 1); }
.dsx-transport { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.dsx-play { width: 52px; height: 52px; flex: none; border-radius: 999px; font-size: 1.1rem; color: #061018; background: linear-gradient(135deg, var(--green), var(--blue)); box-shadow: 0 12px 30px rgba(125,211,252,.2); }
.dsx-steps { display: flex; gap: 6px; }
.ghost-mini { background: rgba(255,255,255,.10); color: #dbeafe; }
.dsx-time { font-variant-numeric: tabular-nums; font-size: .95rem; font-weight: 800; letter-spacing: -.01em; }
.dsx-trim-btns { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.dsx-track { position: relative; height: 88px; border-radius: 16px; overflow: hidden; background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.08); cursor: pointer; user-select: none; touch-action: none; }
.dsx-strip { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(125,211,252,.16) 0 6%, rgba(134,239,172,.14) 6% 12%, rgba(240,171,252,.12) 12% 18%), linear-gradient(155deg, rgba(125,211,252,.10), rgba(240,171,252,.08)); }
.dsx-dim { position: absolute; top: 0; bottom: 0; background: rgba(5,7,15,.72); pointer-events: none; }
.dsx-dim-l { left: 0; width: 0; }
.dsx-dim-r { right: 0; width: 0; }
.dsx-trimbox { position: absolute; top: 0; bottom: 0; box-shadow: inset 0 0 0 2px var(--green); border-radius: 4px; pointer-events: none; }
.dsx-handle { position: absolute; top: 0; bottom: 0; width: 16px; margin-left: -8px; display: grid; place-items: center; cursor: ew-resize; z-index: 3; }
.dsx-handle span { width: 6px; height: 100%; border-radius: 4px; background: var(--green); box-shadow: 0 0 16px rgba(134,239,172,.7); }
.dsx-playhead { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text); box-shadow: 0 0 14px rgba(255,255,255,.8); pointer-events: none; z-index: 2; }
.dsx-playhead span { position: absolute; top: 0; left: -7px; width: 16px; height: 8px; border-radius: 3px; background: var(--text); }
.dsx-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.dsx-trim-summary { font-size: .82rem; font-weight: 800; color: var(--green); }
.dsx-status { width: auto; font-weight: 800; color: var(--yellow); }
.dsx-keys { font-size: .78rem; color: var(--muted); }
.dsx-actions { margin-left: auto; display: flex; gap: 9px; }
.dsx-inspector { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dsx-insp-head { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-top: 4px; }
.dsx-meta { display: flex; flex-direction: column; gap: 8px; }
.dsx-meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 13px; background: rgba(255,255,255,.05); }
.dsx-meta-row span { font-size: .76rem; color: var(--muted); font-weight: 700; }
.dsx-meta-row b { font-size: .82rem; font-weight: 800; text-align: right; overflow-wrap: anywhere; }

@media (max-width: 1240px) {
  .dsx-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .dsx-inspector { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .dsx-inspector .dsx-meta { flex: 1; min-width: 240px; }
  .dsx-insp-head { width: 100%; }
}
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .side-brand .eyebrow { display: none; }
  .side-logo { font-size: 1.2rem; }
  .side-nav { flex-direction: row; flex-wrap: wrap; margin: 0; gap: 4px; }
  .nav-item { padding: 8px 10px; font-size: .82rem; gap: 7px; }
  .side-foot { margin: 0 0 0 auto; grid-auto-flow: column; align-items: center; }
  .sidebar .status-card { display: none; }
  .side-portal { margin: 0; padding: 8px 10px; }
  .side-portal-text small { display: none; }
  .side-stop { min-height: 40px; padding: 0 14px; font-size: .85rem; }
  .topbar { position: static; flex-wrap: wrap; }
  .topbar-right { width: 100%; }
  .top-profile { flex: 1; }
  .dsx-layout { grid-template-columns: 1fr; }
  .dsx-eps { max-height: 220px; }
  .dsx-stage { grid-template-columns: 1fr; }
  .dsx-stage .dsx-hero { grid-row: auto; }
  .dsx-actions { margin-left: 0; width: 100%; }
  .dsx-trim-btns { margin-left: 0; }
}

/* Episode rail details */
.ds-ep .dsx-thumb { display: block; height: 40px; border-radius: 9px; }
.ds-ep strong { color: var(--text); }
.ds-ep > span > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* In the sidebar shell the launch cluster sits higher, so the camera tools no
   longer need the tall hero offset. */
.camera-side-tools { padding-top: 12px; }

/* Dataset editor: swap cameras flow */
.dsx-swapbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(134,239,172,.10); border: 1px solid rgba(134,239,172,.35); color: #dcfce7; }
.dsx-swap-step { flex: none; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
.dsx-swap-msg { flex: 1; min-width: 0; font-weight: 800; font-size: .88rem; }
.dsx-actions .mini.active { outline: 2px solid var(--green); outline-offset: 1px; }
.dsx-stage.dsx-swapping .ds-video { cursor: pointer; transition: box-shadow .12s ease, transform .12s ease; }
.dsx-stage.dsx-swapping .ds-video:hover { box-shadow: 0 0 0 2px rgba(125,211,252,.6); transform: translateY(-1px); }
.dsx-stage .ds-video.dsx-pick-1 { box-shadow: 0 0 0 3px var(--green), 0 0 26px rgba(134,239,172,.45); }
.dsx-stage .ds-video.dsx-pick-2 { box-shadow: 0 0 0 3px var(--blue), 0 0 26px rgba(125,211,252,.45); }
.dsx-stage .ds-video.dsx-pick-1::after, .dsx-stage .ds-video.dsx-pick-2::after { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; font-weight: 900; font-size: .9rem; color: #061018; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.dsx-stage .ds-video.dsx-pick-1::after { content: '1'; background: var(--green); }
.dsx-stage .ds-video.dsx-pick-2::after { content: '2'; background: var(--blue); }
.dsx-eppicker { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); }
.dsx-eppicker-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dsx-eppicker-head > span { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.dsx-eppicker-head small { color: var(--muted); font-weight: 700; }
.dsx-eppicker-tools { margin-left: auto; display: flex; gap: 6px; }
.dsx-eppicker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; padding-right: 2px; }
.dsx-epchk { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid transparent; cursor: pointer; user-select: none; }
.dsx-epchk:hover { background: rgba(255,255,255,.09); }
.dsx-epchk.on { border-color: rgba(134,239,172,.55); background: rgba(134,239,172,.10); }
.dsx-epchk.current strong::after { content: ' · playing'; color: var(--blue); font-weight: 800; font-size: .7rem; }
.dsx-epchk input { accent-color: var(--green); width: 16px; height: 16px; flex: none; pointer-events: none; }
.dsx-epchk strong { display: block; font-size: .82rem; font-weight: 900; }
.dsx-epchk small { display: block; color: var(--muted); font-size: .7rem; }
.dsx-eppicker-actions { display: flex; justify-content: flex-end; gap: 9px; }

/* Dataset editor: running edit banner */
.dsx-editbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: rgba(253,224,71,.10); border: 1px solid rgba(253,224,71,.4); color: #fef9c3; }
.dsx-editbar .dsx-swap-step { color: var(--yellow); }
.dsx-editbar .dsx-swap-msg { font-variant-numeric: tabular-nums; }
.dsx-edit-note { flex-basis: 100%; color: var(--muted); font-size: .78rem; }
.dsx-actions .mini:disabled { opacity: .45; cursor: not-allowed; }

.tuning-side .tuning-sub { margin: 10px 0 4px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.tuning-limits .ker-row { grid-template-columns: 70px 1fr 1.4fr; }
.tuning-limits .ker-head span { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.ker-inv { display: flex; align-items: center; gap: 6px; font-size: .75rem; white-space: nowrap; }

/* Inference pre-flight extras */
.infer-checks.wide { grid-column: 1 / -1; margin: 0; }
.infer-checks:empty { display: none; }
.infer-session-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.infer-session-actions .mini[disabled] { opacity: .45; }
#inferRunGrid .field.hidden, #inferRunGrid .toggle.hidden { display: none; }

.train-command { white-space: pre-wrap; word-break: break-all; font-size: .78rem; line-height: 1.45; max-height: 260px; overflow: auto; }

/* Checkpoint picker (inference pre-flight) */
.infer-ckpt { display: grid; gap: 10px; margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.infer-ckpt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.infer-ckpt-head strong { font-size: .95rem; }
.infer-ckpt-head small { color: var(--muted); }
.infer-ckpt-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 10px; align-items: center; }
.infer-ckpt-row select { width: 100%; font-size: 1rem; padding: 10px 12px; border-radius: 12px; border: 0; background: rgba(0,0,0,.25); color: var(--text); }
.infer-ckpt-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.infer-ckpt-state { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--muted); }
.infer-ckpt-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.infer-ckpt-state.on { color: var(--green); background: rgba(134,239,172,.14); }
.infer-ckpt-state.off { color: var(--muted); }
.infer-ckpt-state.busy { color: var(--blue); background: rgba(125,211,252,.14); }
.infer-ckpt-state.busy::before { animation: vr-pulse 1.4s infinite; }
.infer-ckpt-state.bad { color: var(--red); background: rgba(248,113,113,.14); }
.infer-ckpt-progress { height: 5px; border-radius: 999px; background: rgba(255,255,255,.10); overflow: hidden; }
.infer-ckpt-progress > span { display: block; height: 100%; width: 30%; background: linear-gradient(90deg, rgba(125,211,252,.35), var(--blue)); animation: ckpt-slide 1.6s ease-in-out infinite alternate; }
@keyframes ckpt-slide { from { transform: translateX(-40%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .infer-ckpt-progress > span, .infer-ckpt-state.busy::before { animation: none; } }
.infer-ckpt-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.infer-ckpt-dot { font-size: .72rem; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: var(--muted); cursor: pointer; background: transparent; font-family: inherit; }
.infer-ckpt-dot.on { border-color: rgba(134,239,172,.45); color: var(--green); }
.infer-ckpt-dot.busy { border-color: rgba(125,211,252,.45); color: var(--blue); }
.infer-ckpt-dot.selected { background: rgba(255,255,255,.12); color: var(--text, #fff); font-weight: 800; }
.infer-ckpt-dot:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
@media (max-width: 720px) { .infer-ckpt-row { grid-template-columns: 1fr; } .infer-ckpt-actions { justify-content: flex-start; } }

#cameraSupervisorChip { white-space: nowrap; vertical-align: middle; }
.camera-loading small { display: block; font-size: .72rem; opacity: .75; margin-top: 4px; }

.camera-badge { position: absolute; right: 10px; top: 8px; font-size: .66rem; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.45); color: var(--green); pointer-events: none; }
.camera-badge.usb { right: auto; left: 10px; top: auto; bottom: 8px; color: var(--muted); pointer-events: auto; }
.camera-badge.usb.ok { color: rgba(255,255,255,.75); }
.camera-badge.usb.warn { color: var(--yellow); background: rgba(253,230,138,.14); }
.camera-preview { position: relative; }
.camera-preview video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }

/* Train dialog: dataset resolution notice (GR00T needs one size for all cameras) */
.train-res-notice { display: grid; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(253,230,138,.10); border: 1px solid rgba(253,230,138,.28); }
.train-res-notice.hidden { display: none; }
.train-res-notice.working { background: rgba(125,211,252,.10); border-color: rgba(125,211,252,.3); }
.train-res-notice.done { background: rgba(134,239,172,.10); border-color: rgba(134,239,172,.3); }
.train-res-text { font-size: .86rem; font-weight: 650; line-height: 1.35; }
.train-res-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.train-res-actions .field { margin: 0; min-width: 200px; }
.train-res-progress { color: var(--muted); font-size: .8rem; }


/* Cosmos augmentation page */
.aug-intro { display: grid; gap: 8px; margin: 4px 0 14px; color: rgba(255,255,255,.82); font-size: .93rem; line-height: 1.4; }
.aug-intro p { margin: 0; }
.aug-variants { display: grid; gap: 10px; }
.aug-variant { display: grid; grid-template-columns: minmax(180px, 240px) 1fr auto; gap: 10px; align-items: start; background: rgba(0,0,0,.22); border-radius: 14px; padding: 10px; }
.aug-variant select, .aug-variant textarea, .aug-variant input { width: 100%; font-size: .95rem; padding: 9px 11px; border-radius: 12px; border: 0; background: rgba(0,0,0,.28); color: var(--text); font-family: inherit; }
.aug-variant textarea { min-height: 84px; resize: vertical; line-height: 1.3; }
.aug-variant .aug-variant-side { display: grid; gap: 8px; }
.aug-variant .aug-variant-side small { color: var(--muted); }
.aug-variants-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.aug-variants-actions small { color: var(--muted); }
.aug-checks { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.aug-checks label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.aug-checks input { width: 20px; height: 20px; accent-color: var(--green); }
.aug-estimate { border-color: rgba(125,211,252,.35); }
.aug-estimate strong { color: var(--blue); }
.aug-estimate.warn { border-color: rgba(253,230,138,.45); }
@media (max-width: 900px) { .aug-variant { grid-template-columns: 1fr; } }

.camera-badge-btn { margin-left: 8px; font-size: .66rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(253,230,138,.55); background: rgba(253,230,138,.16); color: var(--yellow); cursor: pointer; }
.camera-badge-btn:disabled { opacity: .5; cursor: wait; }

.infer-group-head { grid-column: 1 / -1; background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.12); border-radius: 0; padding: 12px 2px 0; gap: 4px; }
.infer-group-head span { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.infer-group-head small { color: var(--muted); }
.infer-advanced-note { margin: 0 0 10px; color: var(--muted); font-size: .88rem; }
.toggle.disabled input { pointer-events: none; }

/* ---------------- Inference run screen, past runs, camera alignment ---------------- */
.infer-run { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 18px; align-items: start; }
.infer-run-side { display: grid; gap: 12px; align-content: start; position: sticky; top: 12px; }
.infer-run-state { display: flex; align-items: center; gap: 10px; font-weight: 950; letter-spacing: .08em; font-size: .95rem; }
.infer-run-model { color: var(--muted); font-weight: 750; font-size: .86rem; overflow-wrap: anywhere; }
.infer-run-stats { font-size: .86rem; line-height: 1.4; color: rgba(255,255,255,.86); display: grid; gap: 4px; }
.infer-run-stats span { display: block; }
.infer-run-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.infer-run-actions .mini { flex: 1 1 auto; }
.infer-run-notes textarea { width: 100%; font: inherit; font-size: .95rem; padding: 10px 12px; border-radius: 12px; border: 0; background: rgba(0,0,0,.25); color: var(--text); resize: vertical; min-height: 84px; }
.infer-run-notes small { color: var(--muted); min-height: 1em; }
.infer-run-params { margin: 0; display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 4px 12px; font-size: .82rem; }
.infer-run-params dt { color: var(--muted); font-weight: 750; }
.infer-run-params dd { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
.infer-run-main { display: grid; gap: 12px; align-content: start; }
.infer-run-camhead { padding: 10px 12px; border-radius: 16px; background: var(--panel); border: 1px solid rgba(255,255,255,.10); }
.align-controls { display: grid; grid-template-columns: minmax(200px, 1.3fr) minmax(150px, 1fr) auto minmax(150px, 1fr); gap: 10px; align-items: end; margin-bottom: 10px; }
.align-episode span em { font-style: normal; color: var(--blue); margin-left: 6px; }
.align-controls .field, .align-controls .toggle { padding: 9px 11px; }
.align-controls input[type="range"] { width: 100%; accent-color: var(--blue); }
.align-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.align-tile { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); border-radius: 18px; padding: 10px; display: grid; gap: 8px; }
.align-tile.align-role-overhead { grid-column: 1 / -1; }
.align-view { position: relative; aspect-ratio: 16/9; background: rgba(0,0,0,.4); border-radius: 14px; overflow: hidden; display: grid; place-items: center; color: var(--muted); font-size: .86rem; text-align: center; }
.align-view video, .align-view img.live { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.align-view img.align-ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: .55; display: none; }
.align-view.overlay-on img.align-ghost { display: block; }
.align-view.flash-hide img.align-ghost { opacity: 0 !important; }
.align-view .align-msg { position: absolute; inset: auto 8px 8px 8px; padding: 6px 9px; border-radius: 10px; background: rgba(8,13,26,.82); color: var(--yellow); font-size: .78rem; font-weight: 800; }
.align-cap { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 900; font-size: .86rem; }
.align-cap small { color: var(--muted); font-weight: 750; }
.infer-align-box .align-tiles { margin-top: 4px; }
.infer-history { margin-top: 22px; border-top: 1px solid rgba(255,255,255,.10); padding-top: 16px; }
.infer-history .section-head h3 { margin: 0; font-size: 1.05rem; letter-spacing: -.02em; }
.compact-toggle { padding: 8px 11px; }
.infer-history-list { display: grid; gap: 8px; }
.infer-history-row { background: var(--panel); border: 1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 10px 14px; display: grid; gap: 6px; }
.infer-history-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.infer-history-top strong { font-size: .92rem; }
.infer-history-when { color: var(--muted); font-weight: 750; font-size: .82rem; }
.infer-history-params { color: rgba(255,255,255,.8); font-size: .8rem; line-height: 1.35; }
.infer-history-motion { color: var(--muted); font-size: .8rem; }
.infer-history-notes { width: 100%; font: inherit; font-size: .86rem; padding: 8px 10px; border-radius: 10px; border: 1px dashed rgba(255,255,255,.18); background: rgba(0,0,0,.18); color: var(--text); resize: vertical; min-height: 34px; }
.infer-history-notes:focus { border-style: solid; border-color: var(--blue); outline: none; }
.infer-history-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.infer-history-actions .mini { padding: 7px 11px; font-size: .82rem; }
.outcome-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.10); color: var(--text); }
.outcome-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.outcome-chip.finished { color: var(--green); background: rgba(134,239,172,.14); }
.outcome-chip.stopped { color: var(--blue); background: rgba(125,211,252,.14); }
.outcome-chip.emergency_stop, .outcome-chip.failed { color: var(--red); background: rgba(248,113,113,.14); }
.outcome-chip.running, .outcome-chip.stopping { color: var(--yellow); background: rgba(253,230,138,.14); }
@media (max-width: 980px) {
  .infer-run { grid-template-columns: 1fr; }
  .infer-run-side { position: static; }
  .align-controls { grid-template-columns: 1fr; }
  .align-tiles { grid-template-columns: 1fr; }
}

.infer-check-btn { margin-left: auto; padding: 6px 10px; font-size: .8rem; align-self: center; }

.record-launch-state { margin: 0 0 12px; padding: 10px 14px; border-radius: 13px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-weight: 750; font-size: .9rem; }
.record-launch-state.busy { border-color: rgba(125,211,252,.45); color: var(--blue); }
.record-launch-state.bad { border-color: rgba(248,113,113,.5); color: var(--red); }
#recordReadyHint { margin-right: auto; align-self: center; }

/* GPU picker: one chip per GPU model, then one per size/count, then the summary */
.gpu-picker { display: grid; gap: 8px; }
.gpu-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gpu-row-label { font-size: .72rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }
.gpu-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 11px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: var(--text); font-weight: 850; font-size: .86rem; line-height: 1.15; cursor: pointer; }
.gpu-chip small { color: var(--muted); font-weight: 700; font-size: .72rem; }
.gpu-chip:hover { background: rgba(255,255,255,.13); }
.gpu-chip.active { background: linear-gradient(135deg, rgba(134,239,172,.28), rgba(125,211,252,.28)); border-color: rgba(125,211,252,.6); }
.gpu-chip.recommended::after { content: "recommended"; font-size: .62rem; color: var(--green); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.gpu-summary { font-size: .86rem; font-weight: 750; color: rgba(255,255,255,.9); }
.gpu-summary b { color: var(--blue); }

.infer-ckpt-dot.stale { opacity: .38; text-decoration: line-through; }

/* ---------------- Voice page ---------------- */
.voice-panel { display: grid; gap: 12px; }
.voice-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.voice-state { display: flex; gap: 8px; flex-wrap: wrap; }
.voice-mic { display: flex; align-items: center; gap: 8px; min-width: 220px; flex: 1 1 220px; }
.voice-mic span { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.voice-mic small { color: var(--muted); min-width: 4.5em; }
.voice-mic-bar { position: relative; flex: 1; height: 10px; border-radius: 999px; background: rgba(255,255,255,.10); overflow: hidden; }
.voice-mic-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--yellow)); transition: width .12s linear; }
.voice-mic-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text); opacity: .8; left: 40%; }
.voice-actions { display: flex; gap: 8px; margin-left: auto; }
.voice-log { display: grid; gap: 6px; max-height: 52vh; overflow-y: auto; padding: 4px; background: rgba(0,0,0,.18); border-radius: 14px; }
.voice-empty { color: var(--muted); padding: 14px; }
.voice-line { display: grid; grid-template-columns: 5.2em 1fr; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 10px; }
.voice-line b { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.voice-line.user { background: rgba(125,211,252,.10); }
.voice-line.user b { color: var(--blue); }
.voice-line.yuri { background: rgba(134,239,172,.10); }
.voice-line.yuri b { color: var(--green); }
.voice-line.error b { color: var(--red); }
.voice-line small { color: var(--muted); margin-left: 8px; }
.voice-compose { display: flex; gap: 8px; align-items: center; }
.voice-compose input { flex: 1; min-width: 0; font-size: 1rem; padding: 11px 13px; border-radius: 12px; border: 0; background: rgba(0,0,0,.25); color: var(--text); }

.hint.warn { color: var(--yellow); font-weight: 700; }

/* ---------------- Sign-in ---------------- */
.user-box { margin-top: auto; padding: 12px 10px 4px; display: grid; gap: 2px; color: var(--muted); font-size: .8rem; border-top: 1px solid rgba(255,255,255,.08); }
.user-box b { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.user-box.warn b { color: var(--yellow); }
.link-btn { background: none; border: 0; padding: 0; color: var(--blue); font: inherit; cursor: pointer; }
body[data-role="viewer"] .operator-only, body[data-role="viewer"] .admin-only, body[data-role="operator"] .admin-only { opacity: .45; pointer-events: none; }
.audit-list { display: grid; gap: 4px; max-height: 42vh; overflow-y: auto; font-size: .8rem; }
.audit-row { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; padding: 5px 8px; border-radius: 8px; background: rgba(0,0,0,.18); }
.audit-row.bad { border-left: 3px solid var(--red); }
.audit-row .when { color: var(--muted); white-space: nowrap; }
.audit-row .what b { font-weight: 700; }
.audit-row .what small { color: var(--muted); margin-left: 6px; }

/* ---------------- Wheel drive page ---------------- */
.launch.drive { background: linear-gradient(135deg, #bae6fd, var(--blue) 48%, #38bdf8); box-shadow: 0 14px 38px rgba(125,211,252,.18); color: #061018; }
.launch.drive.running { background: linear-gradient(135deg, var(--green), var(--blue)); color: #061018; }
.drive-panel { display: grid; gap: 12px; touch-action: none; }
.drive-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.drive-speed { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: .8rem; color: var(--muted); }
.drive-speed input { width: 140px; }
.drive-speed b { color: var(--text); min-width: 3em; }
.drive-pads { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.drive-pad { position: relative; aspect-ratio: 1; max-height: 46vh; border-radius: 24px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12); touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; }
.drive-pad::before { content: ''; position: absolute; inset: 50% auto auto 50%; width: 2px; height: 70%; background: rgba(255,255,255,.08); transform: translate(-50%, -50%); }
.drive-pad[data-axis="x"]::before { width: 70%; height: 2px; }
.drive-knob { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; border-radius: 999px; background: rgba(125,211,252,.25); border: 2px solid var(--blue); transform: translate(-50%, -50%); transition: transform .05s linear; }
.drive-pad.active .drive-knob { background: rgba(134,239,172,.35); border-color: var(--green); }
.drive-label { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.drive-readout { font-size: .8rem; min-height: 1.2em; }
@media (max-width: 640px) { .drive-pads { gap: 10px; } .drive-speed { margin-left: 0; } }

/* Camera card: subtle power-cycle button for the camera's USB port. */
.camera-power-btn { position: absolute; z-index: 3; right: 8px; bottom: 8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: rgba(0,0,0,.45); color: rgba(255,255,255,.75); font-size: .8rem; line-height: 1; display: grid; place-items: center; opacity: .55; cursor: pointer; padding: 0; }
.camera-power-btn:hover { opacity: 1; border-color: var(--blue); color: var(--blue); }
.camera-power-btn:disabled { opacity: .9; cursor: wait; color: var(--yellow); border-color: var(--yellow); animation: usb-cycling 1s linear infinite; }
@keyframes usb-cycling { 0% { box-shadow: 0 0 0 0 rgba(253,230,138,.5); } 100% { box-shadow: 0 0 0 8px rgba(253,230,138,0); } }

/* Settings › USB ports */
.usb-ports { display: grid; gap: 6px; }
.usb-hub { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 8px 0 2px; }
.usb-port { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.usb-port.empty { opacity: .7; }
.usb-port.cycling { border-color: rgba(253,230,138,.5); }
.usb-port .port { font-weight: 800; font-size: .82rem; color: var(--muted); }
.usb-port .port b { display: block; color: var(--text); font-size: .95rem; }
.usb-port .what { min-width: 0; font-size: .9rem; }
.usb-port .what small { display: block; color: var(--muted); font-size: .76rem; margin-top: 2px; overflow-wrap: anywhere; }
.usb-port .what .role { color: var(--green); font-weight: 700; }
.usb-port .what .bad { color: var(--yellow); }
.usb-port .what .good { color: var(--green); }
.usb-port .mini { padding: 7px 10px; font-size: .8rem; white-space: nowrap; }
@media (max-width: 640px) { .usb-port { grid-template-columns: 52px 1fr; } .usb-port .mini { grid-column: 1 / -1; } }

/* Phones: the signed-in box is one short line, and on the Drive page the
   header shrinks to the brand and Emergency stop so the sticks get the screen. */
@media (max-width: 980px) {
  .user-box { margin: 0; padding: 0 4px; border-top: 0; display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; font-size: .74rem; width: 100%; }
  .user-box b { font-weight: 600; font-size: .78rem; }
  .user-box small:last-child { display: none; }
  body.drive-page .sidebar { gap: 6px; padding: 6px 12px; }
  body.drive-page .side-nav, body.drive-page .user-box, body.drive-page .topbar { display: none; }
  body.drive-page .drive-pads { gap: 12px; }
  body.drive-page .drive-pad { max-height: none; }
  body.drive-page .drive-panel .hint { font-size: .8rem; margin-bottom: 8px; }
}

/* Animations page */
.anim-panel { display: grid; gap: 14px; }
.anim-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.anim-head h2 { margin: 0 0 6px; }
.anim-head .hint { margin: 0; max-width: 720px; }
.anim-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.anim-card { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.anim-card.playing { border-color: var(--green); box-shadow: 0 0 0 3px rgba(134,239,172,.18); }
.anim-card b { font-size: 1.05rem; overflow-wrap: anywhere; }
.anim-card small { color: var(--muted); display: block; overflow-wrap: anywhere; white-space: normal; }
.anim-card .row { display: flex; gap: 8px; flex-wrap: wrap; }
.anim-card .mini { padding: 9px 12px; font-size: .84rem; }
.anim-card .mini.play { background: linear-gradient(135deg, var(--green), var(--blue)); font-weight: 900; }
.anim-new { border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); padding: 10px 14px; }
.anim-new summary { cursor: pointer; font-weight: 800; }
.anim-import { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; margin-top: 8px; }
.anim-import .check { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; }
.anim-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.anim-sliders input[type="range"] { width: 100%; }
.anim-card .field.compact span { white-space: normal; overflow-wrap: anywhere; }
.anim-edit { border-radius: 12px; background: rgba(255,255,255,.04); padding: 8px 10px; }
.anim-edit summary { cursor: pointer; font-size: .86rem; font-weight: 700; color: var(--muted); }
.anim-edit-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 8px; align-items: center; margin: 8px 0 4px; }
.anim-edit-row select, .anim-edit-row input { min-width: 0; }
.anim-edit small { font-size: .76rem; }
@media (max-width: 640px) { .anim-edit-row { grid-template-columns: 1fr; } .anim-sliders { grid-template-columns: 1fr; } }
.slider-reset { margin-left: 8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: var(--muted); font-size: .9rem; line-height: 1; display: inline-grid; place-items: center; padding: 0; vertical-align: middle; cursor: pointer; }
.slider-reset:hover { color: var(--blue); border-color: var(--blue); }
.anim-safety { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: .88rem; padding: 6px 2px; }
.anim-safety input { margin-top: 4px; }
.anim-card.off { opacity: .6; }
.anim-card.off .play { filter: grayscale(.6); }
.anim-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.anim-toggles .check { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .86rem; }
.anim-cooldown-left { color: var(--yellow); font-weight: 600; margin-left: 6px; }
@media (max-width: 640px) { .anim-toggles { grid-template-columns: 1fr; } }

/* Settings › Your keys: one row per key, state in the middle, actions right. */
.key-rows { display: grid; gap: 6px; margin-bottom: 10px; }
.key-row { display: grid; grid-template-columns: 9.5rem 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.08); }
.key-row:first-child { border-top: 0; }
.key-row b { font-weight: 800; }
.key-state { color: var(--muted); font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.key-state.ok { color: var(--green); }
.key-state.warn { color: var(--yellow); }
.key-state.bad { color: var(--red); }
.key-actions { display: flex; gap: 8px; }
.key-sync { margin: 4px 0 0; }
.key-note { margin: 6px 0 0; color: var(--text); }
.key-note:empty, .key-sync:empty { display: none; }
@media (max-width: 560px) { .key-row { grid-template-columns: 1fr auto; } .key-row .key-state { grid-column: 1 / -1; } }
.anim-card .anim-scope { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: .68rem; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--muted); font-weight: 750; letter-spacing: .02em; }
.anim-card .anim-scope.mine { background: rgba(94,234,212,.14); color: var(--green); }

.train-scores { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.train-scores small { color: var(--muted); width: 100%; }
.lib-chip.ok { background: rgba(94,234,212,.16); color: var(--green); }

/* Model comparison: select multiple in the Library, the set in the pre-flight, the switcher on the run screen. */
.library-compare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: rgba(94,234,212,.10); border: 1px solid rgba(94,234,212,.3); border-radius: 14px; padding: 10px 14px; margin-bottom: 12px; }
.library-compare-bar span { font-weight: 800; }
.lib-row.pickable { cursor: pointer; }
.lib-row.picked { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.lib-row.incompatible { opacity: .4; pointer-events: none; }
.lib-pick { width: 20px; height: 20px; flex: 0 0 auto; }
.library-compare-runs { display: grid; gap: 8px; margin-bottom: 14px; }
.library-compare-runs h3 { margin: 0; font-size: .95rem; color: var(--muted); }
.compare-run { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; background: var(--panel); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 10px 14px; }
.compare-run .models { display: flex; flex-wrap: wrap; gap: 6px; }
.infer-compare { display: grid; gap: 8px; margin-bottom: 12px; }
.infer-compare-row { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 10px; align-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 8px 12px; }
.infer-compare-row b { overflow-wrap: anywhere; }
.infer-compare-row .order { font-family: var(--mono, ui-monospace, monospace); color: var(--muted); }
.infer-compare-flags { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.infer-compare-note { color: var(--muted); font-size: .9rem; }
.infer-run-models { display: grid; gap: 8px; margin: 6px 0 10px; }
.infer-run-models .switcher { display: flex; flex-wrap: wrap; gap: 6px; }
.infer-run-models .switcher button.driving { background: var(--green); color: #06211c; font-weight: 800; }
.infer-run-models .switcher button.pending { outline: 2px dashed var(--yellow); }
.infer-run-models table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.infer-run-models th, .infer-run-models td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
.infer-run-models tr.driving td { color: var(--green); }
@media (max-width: 700px) { .infer-compare-row { grid-template-columns: auto 1fr; } }
.infer-run-models { overflow-x: auto; max-width: 100%; }
.infer-run-models table { font-size: .8rem; }
.infer-compare-flags .field { min-width: 0; }
.infer-compare-flags .field span { overflow-wrap: anywhere; font-size: .82rem; }
.infer-compare-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.18); border-radius: 12px; padding: 10px 14px; color: var(--muted); }
.infer-compare-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 10px 12px; display: grid; gap: 8px; }
.infer-compare-card.first { border-color: rgba(94,234,212,.4); }
.infer-compare-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.infer-compare-head b { overflow-wrap: anywhere; }
.infer-compare-head select { max-width: 320px; }
.infer-compare-overrides { display: grid; gap: 6px; padding-left: 4px; }
.infer-ov-row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(120px, 220px) auto; gap: 8px; align-items: center; }
.infer-ov-row > span { color: var(--muted); font-size: .9rem; }
.infer-ov-row.add > span { font-style: italic; }
.infer-ov-row.flags { grid-template-columns: minmax(160px, 1fr) auto auto; }
.infer-ov-row input, .infer-ov-row select { min-width: 0; }
@media (max-width: 640px) { .infer-ov-row, .infer-ov-row.flags { grid-template-columns: 1fr; } }

/* Settings › Remote access */
.remote-rows { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 6px; }
.remote-row { display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.remote-row a { color: inherit; }
.mono-hint { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; user-select: all; }

/* Phone: the sidebar becomes a slim top bar (mark, name, status dot, Stop, menu);
   the navigation and account open as a sheet under it. */
@media (max-width: 760px) {
  /* The bar row takes only its own height; a page shorter than the screen (Drive) must not
     share the leftover height with it (the bar grew to 190 px there, 2026-11-02). */
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  /* no backdrop blur here: it would pin the fixed menu sheet to the bar instead of the screen */
  .sidebar { position: sticky; top: 0; height: auto; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(7,9,20,.96); backdrop-filter: none; }
  .side-brand .eyebrow { display: none; }
  .side-mark { width: 26px; }
  .side-logo { font-size: 1.15rem; }
  .side-nav { display: none; }
  .sidebar.open .side-nav { display: flex; flex-direction: column; flex-wrap: nowrap; position: fixed; left: 0; right: 0; top: 57px; bottom: 0; margin: 0; padding: 14px 12px 24px; gap: 4px; background: rgba(7,9,20,.97); overflow: auto; z-index: 90; }
  .sidebar.open .nav-item { padding: 14px 16px; font-size: 1.05rem; }
  .side-portal { display: none; }
  .sidebar.open .side-portal { display: flex; margin: 8px 0 0; padding: 14px 16px; }
  .sidebar.open .side-portal-text small { display: block; }
  .sidebar .status-card .side-addr { display: none; }
  .side-foot { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .side-foot { margin: 0 0 0 auto; }
  .sidebar .status-card { display: flex; padding: 0; background: none; border: 0; box-shadow: none; gap: 0; min-width: 0; }
  .sidebar .status-card > div > span:not(.dot) { font-size: .72rem; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar .status-card .substatus { display: none; }
  .side-stop { min-height: 38px; padding: 0 14px; border-radius: 999px; font-size: 0; box-shadow: none; }
  .side-stop::after { content: 'Stop'; font-size: .85rem; }
  .menu-btn { display: inline-flex; }
  .topbar { position: sticky; top: 57px; flex-wrap: nowrap; min-height: 54px; padding: 8px 12px; gap: 10px; }
  .topbar-right { width: auto; flex: 0 1 auto; }
  .crumb { display: none; }
  .page-title { font-size: 1.05rem; -webkit-line-clamp: 1; }
  .top-docs { display: none; }
  .top-profile { min-width: 0; max-width: 44vw; }
  .top-profile span { display: none; }
  .top-profile select { padding: 8px 10px; font-size: .85rem; }
  .pages { padding: 12px; }
  body.menu-open { overflow: hidden; }
}

/* No stored zero: a warning by the launch buttons, never a block */
.calib-warn { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 8px 10px; border: 1px solid rgba(251,191,36,.55); border-radius: 10px; background: rgba(251,191,36,.08); font-size: .82rem; line-height: 1.35; }
.calib-warn-mark { font-weight: 900; color: #fbbf24; }
.calib-warn .mini { margin-left: auto; white-space: nowrap; }

.warn-text { color: #fbbf24; }
.can-pins { margin: 12px 0; }
.can-pins-title { margin: 2px 0 4px; font-size: 1.05rem; }
.can-pins .port-summary { word-break: break-all; }

/* Update ready: download arrow with a dot, in the logo row (sidebar / phone top bar) */
.side-logo-row { align-items: center; }
.update-badge { position: relative; margin-left: auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #cde6ff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.update-badge:hover { background: rgba(255,255,255,.12); }
.update-dot { position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%; background: #fbbf24; border: 2px solid var(--bg, #0b1020); box-shadow: 0 0 0 0 rgba(251,191,36,.6); animation: update-pulse 2.4s ease-out infinite; }
@keyframes update-pulse { 0% { box-shadow: 0 0 0 0 rgba(251,191,36,.55); } 70% { box-shadow: 0 0 0 8px rgba(251,191,36,0); } 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); } }
.update-notes { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); font-size: .9rem; line-height: 1.45; }
.field textarea { width: 100%; min-height: 86px; resize: vertical; font: inherit; font-size: .95rem; padding: 10px 12px; border-radius: 12px; border: 0; background: rgba(0,0,0,.25); color: var(--text); }
.support-login { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; color: var(--muted); padding: 4px 0; border-top: 1px solid rgba(255,255,255,.06); }
.support-login b { color: var(--text); font-weight: 700; }
.update-notes strong { display: block; margin-bottom: 4px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: #9fb3c8; }
.muted-small { font-size: .8rem; opacity: .7; }
@media (max-width: 760px) { .update-badge { width: 32px; height: 32px; margin-right: 6px; } }

/* ================= Design round 2026-10-16: Models library, pre-flight, run screen ================= */
/* Policy family chips (ACT blue, GR00T green, SmolVLA pink) */
.fam-chip { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 900; letter-spacing: .06em; padding: 4px 9px; border-radius: 999px; color: #dbeafe; background: rgba(255,255,255,.1); text-transform: uppercase; }
.fam-chip.fam-act { color: var(--blue); background: rgba(125,211,252,.14); }
.fam-chip.fam-groot { color: var(--green); background: rgba(134,239,172,.14); }
.fam-chip.fam-smolvla { color: var(--pink); background: rgba(240,171,252,.14); }

/* Library › Models: cards */
.library-list.libm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.libm-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 22px; background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.06); transition: border-color .15s, transform .15s, opacity .15s; }
.libm-card:hover { transform: translateY(-2px); }
.libm-card.pickable { cursor: pointer; }
.libm-card.picked { border-color: var(--blue); }
.libm-card.incompatible { opacity: .45; cursor: not-allowed; }
.libm-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.libm-pick { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: .8rem; font-weight: 900; color: #061018; border: 1.5px solid rgba(255,255,255,.25); }
.libm-card.picked .libm-pick { background: var(--blue); border-color: var(--blue); }
.libm-title { display: flex; flex-direction: column; gap: 4px; }
.libm-title strong { font-size: 1.05rem; font-weight: 900; letter-spacing: -.02em; overflow-wrap: anywhere; line-height: 1.2; }
.libm-sub { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.libm-block { font-size: .78rem; font-weight: 700; color: var(--yellow); }
.libm-actions { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.libm-run { flex: 1; padding: 11px; border-radius: 12px; font-size: .86rem; font-weight: 900; }
.libm-more { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; }
.libm-more .link-btn { color: var(--muted); font-weight: 700; text-decoration: none; }
.libm-more .link-btn:hover { color: var(--text); }
.lib-progress:empty { display: none; }
.libm-bar { position: sticky; top: 86px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 14px; border-radius: 18px; background: rgba(17,22,38,.96); border: 1px solid rgba(125,211,252,.35); box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.libm-bar-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.libm-bar-text b { font-size: .95rem; font-weight: 900; }
.libm-bar-text span { font-size: .8rem; color: var(--muted); }
.libm-bar-actions { display: flex; gap: 8px; }
.libm-bar-actions .mini[disabled] { opacity: .5; cursor: not-allowed; }
.libm-recent { display: grid; gap: 10px; margin-top: 22px; }
.libm-recent h3 { margin: 0; font-size: 1.15rem; font-weight: 900; letter-spacing: -.03em; }
.libm-recent-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 18px; background: rgba(255,255,255,.04); }
.libm-recent-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.libm-recent-when { font-size: .78rem; color: var(--muted); }
.libm-recent-models { display: flex; gap: 6px; flex-wrap: wrap; }
.libm-recent-model { display: inline-flex; gap: 6px; align-items: center; font-size: .78rem; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.06); }
.libm-recent-model b.tag-good { color: var(--green); } .libm-recent-model b.tag-bad { color: #fca5a5; } .libm-recent-model b.tag-mixed { color: var(--yellow); }
.libm-recent-model small { color: var(--muted); font-weight: 700; }
@media (max-width: 640px) { .libm-recent-row { grid-template-columns: 1fr; } .libm-bar { top: 60px; } }

/* Pre-flight layout */
.pf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 0 0 18px; }
.pf-head h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; letter-spacing: -.05em; overflow-wrap: anywhere; }
.pf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.pf-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.pf-side { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pf-card { padding: 18px; border-radius: 22px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 10px; }
.pf-card-title { font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pf-checks { display: flex; flex-direction: column; gap: 10px; }
.pf-checks .infer-check { background: none; border: 0; padding: 0; gap: 10px; align-items: flex-start; }
.pf-checks .infer-check-mark { flex: 0 0 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; font-size: .68rem; font-weight: 900; color: #061018; background: var(--green); }
.pf-checks .infer-check.bad .infer-check-mark { background: var(--red); color: #061018; }
.pf-checks .infer-check.warn .infer-check-mark { background: var(--yellow); color: #061018; }
.pf-checks .infer-check.neutral .infer-check-mark { background: rgba(255,255,255,.18); color: var(--text); }
.pf-checks .infer-check-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-checks .infer-check-text strong { font-size: .84rem; font-weight: 800; }
.pf-checks .infer-check-text small { font-size: .74rem; color: var(--muted); overflow-wrap: anywhere; }
.pf-checks .infer-check-btn { margin-left: auto; padding: 5px 9px; font-size: .72rem; border-radius: 8px; background: rgba(255,255,255,.08); color: #dbeafe; }
.pf-summary { display: flex; flex-direction: column; gap: 6px; }
.pf-sum-row { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; }
.pf-sum-row span { color: var(--muted); }
.pf-sum-row b { font-weight: 800; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.pf-sum-row b.good { color: var(--green); } .pf-sum-row b.warn { color: var(--yellow); }
.pf-changes { display: flex; flex-direction: column; gap: 5px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); font-size: .78rem; color: #dbeafe; }
.pf-changes-title { font-size: .74rem; font-weight: 800; color: var(--blue); }
.pf-start { padding: 16px; border-radius: 16px; font-size: 1rem; font-weight: 900; color: #061018; background: linear-gradient(135deg, var(--blue), var(--green)); box-shadow: 0 14px 38px rgba(125,211,252,.18); }
.pf-start.shadow { background: var(--yellow); box-shadow: 0 14px 38px rgba(253,230,138,.16); }
.pf-start[disabled] { opacity: .5; cursor: not-allowed; background: rgba(255,255,255,.2); color: var(--text); box-shadow: none; }
.pf-start-note { font-size: .74rem; color: var(--muted); text-align: center; min-height: 1em; }
.pf-cancel { align-self: center; font-size: .8rem; color: var(--muted); }

/* Lineup cards */
.lineup { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.lineup-card { flex: 0 0 270px; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.06); }
.lineup-card.pickable { cursor: pointer; }
.lineup-card.focused { background: linear-gradient(160deg, rgba(134,239,172,.1), rgba(255,255,255,.04)); border-color: rgba(134,239,172,.55); }
.lineup-card.lineup-all { flex: 0 0 190px; justify-content: space-between; }
.lineup-all strong { font-size: .95rem; font-weight: 900; }
.lineup-sub { font-size: .74rem; color: var(--muted); }
.lineup-letters { display: flex; gap: 4px; }
.lineup-letter { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-size: .66rem; font-weight: 900; font-style: normal; color: #061018; flex: none; }
.lineup-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lineup-ids { display: flex; align-items: center; gap: 8px; }
.lineup-x { width: 26px; height: 26px; border-radius: 8px; font-size: .8rem; color: var(--muted); background: rgba(255,255,255,.06); }
.lineup-x:hover { color: var(--text); background: rgba(248,113,113,.25); }
.lineup-title { display: flex; flex-direction: column; gap: 3px; }
.lineup-title strong { font-size: .95rem; font-weight: 900; overflow-wrap: anywhere; line-height: 1.2; }
.lineup-role { font-size: .74rem; font-weight: 700; color: var(--muted); }
.lineup-role.lead { color: var(--green); }
.lineup-ckpts { display: flex; flex-direction: column; gap: 6px; }
.lineup-cap { font-size: .72rem; font-weight: 800; color: var(--muted); }
.lineup-ckpt-row { display: flex; gap: 4px; flex-wrap: wrap; }
.lineup-ckpt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 8px; border-radius: 9px; font-size: .7rem; font-weight: 800; color: #dbeafe; background: rgba(255,255,255,.06); border: 1px solid transparent; }
.lineup-ckpt small { font-size: .66rem; font-weight: 700; opacity: .8; }
.lineup-ckpt.dl { border-color: rgba(134,239,172,.35); }
.lineup-ckpt.on { color: #061018; background: #f8fbff; border-color: #f8fbff; }
.lineup-ckpt:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.lineup-dlrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.lineup-dlstate { font-size: .74rem; font-weight: 800; color: var(--muted); }
.lineup-dlstate.ok { color: var(--green); } .lineup-dlstate.warn { color: var(--yellow); } .lineup-dlstate.bad { color: var(--red); } .lineup-dlstate.busy { color: var(--blue); }
.lineup-dl { padding: 6px 10px; border-radius: 9px; font-size: .74rem; font-weight: 800; color: #061018; background: var(--blue); }
.lineup-del { font-size: .72rem; color: var(--muted); }
.lineup-actions { display: flex; gap: 6px; }
.lineup-actions .mini { flex: 1; padding: 7px; border-radius: 9px; font-size: .74rem; font-weight: 800; color: #dbeafe; background: rgba(255,255,255,.06); }
.lineup-add { flex: 0 0 150px; min-height: 200px; border-radius: 20px; border: 1.5px dashed rgba(255,255,255,.18); background: none; color: var(--muted); font-size: .86rem; font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.lineup-add span { font-size: 1.4rem; }
.lineup-add:hover { color: var(--text); border-color: rgba(125,211,252,.5); }
.mx-badge { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 900; font-style: normal; padding: 2px 8px; border-radius: 999px; color: #061018; background: var(--blue); align-self: flex-start; }
.pf-setname { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--muted); font-weight: 800; }
.pf-setname input { flex: 0 1 320px; font: inherit; font-weight: 700; padding: 8px 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.28); color: var(--text); }

/* Task block */
.pf-task { padding: 20px; border-radius: 22px; background: rgba(255,255,255,.05); display: flex; flex-direction: column; gap: 16px; }
.pf-field { display: flex; flex-direction: column; gap: 7px; }
.pf-label-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pf-label { font-size: .78rem; font-weight: 800; color: var(--muted); }
.pf-field input { font: inherit; font-size: 1.05rem; font-weight: 600; padding: 13px 15px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.28); color: var(--text); outline: none; }
.pf-field input:focus { border-color: var(--blue); }
.pf-field input[readonly] { color: var(--muted); }
.pf-hint { font-size: .74rem; color: rgba(159,169,189,.8); }
.pf-shared { display: flex; flex-direction: column; gap: 16px; }
.pf-shape-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.pf-seg-wrap { display: flex; flex-direction: column; gap: 7px; }
.pf-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.28); }
.pf-seg button { padding: 9px 14px; border-radius: 9px; font-size: .84rem; font-weight: 800; color: var(--muted); background: transparent; }
.pf-seg button.on { color: #061018; background: #e8f4ff; }
.pf-seg.small button { padding: 5px 9px; font-size: .7rem; border-radius: 8px; }
.pf-num { display: flex; flex-direction: column; gap: 7px; width: 120px; }
.pf-num span { font-size: .78rem; font-weight: 800; color: var(--muted); }
.pf-num input { font: inherit; font-size: .95rem; font-weight: 700; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.28); color: var(--text); outline: none; width: 100%; }
.pf-num input:focus { border-color: var(--blue); }
.pf-num[data-tip]::after, .pf-toggle[data-tip]::after, .pf-field[data-tip]::after, .pf-check[data-tip]::after, .run-overlay-toggle[data-tip]::after { content: attr(data-tip); position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 40; padding: 10px 12px; border-radius: 13px; background: rgba(8,13,26,.98); color: var(--text); border: 1px solid rgba(125,211,252,.38); box-shadow: 0 16px 44px rgba(0,0,0,.42); font-size: .8rem; line-height: 1.3; font-weight: 700; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .06s ease, transform .06s ease; }
.pf-num[data-tip], .pf-toggle[data-tip], .pf-field[data-tip], .pf-check[data-tip], .run-overlay-toggle[data-tip] { position: relative; }
.pf-num[data-tip]:hover::after, .pf-toggle[data-tip]:hover::after, .pf-field[data-tip]:hover::after, .pf-check[data-tip]:hover::after, .run-overlay-toggle[data-tip]:hover::after { opacity: 1; transform: translateY(0); }
.pf-toggles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.pf-toggle { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 14px; background: rgba(0,0,0,.2); border: 1px solid transparent; cursor: pointer; }
.pf-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.pf-knob { flex: 0 0 34px; height: 20px; border-radius: 999px; position: relative; background: var(--green); margin-top: 1px; transition: background .15s; }
.pf-knob::after { content: ''; position: absolute; top: 2px; left: 16px; width: 16px; height: 16px; border-radius: 999px; background: #f8fbff; transition: left .15s; }
.pf-toggle.off .pf-knob { background: rgba(255,255,255,.18); }
.pf-toggle.off .pf-knob::after { left: 2px; }
.pf-toggle input:focus-visible + .pf-knob { outline: 2px solid var(--blue); outline-offset: 2px; }
.pf-tg-text { display: flex; flex-direction: column; gap: 3px; }
.pf-tg-text b { font-size: .86rem; font-weight: 800; }
.pf-tg-text small { font-size: .74rem; line-height: 1.4; color: var(--muted); }
.pf-toggle.warn-off.off { background: rgba(253,230,138,.08); border-color: rgba(253,230,138,.3); }
.pf-toggle.warn-off.off b { color: var(--yellow); }
.pf-record { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(0,0,0,.2); }
.pf-record .pf-field input { font-size: .95rem; padding: 10px 12px; }
.pf-record-opts { display: flex; gap: 14px; flex-wrap: wrap; }
.pf-check { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; cursor: pointer; }
.pf-check input { width: 18px; height: 18px; accent-color: var(--green); }
.pf-note { margin: 0; font-size: .8rem; color: var(--muted); }

/* Settings matrix */
.mx { display: flex; flex-direction: column; gap: 10px; }
.mx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.mx-head h3 { margin: 0 0 4px; font-size: 1.2rem; font-weight: 900; letter-spacing: -.03em; }
.mx-help { display: block; font-size: .8rem; color: var(--muted); max-width: 620px; }
.mx-legend { display: flex; gap: 10px; align-items: center; font-size: .74rem; color: var(--muted); }
.mx-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.mx-sw { width: 10px; height: 10px; border-radius: 3px; background: rgba(255,255,255,.08); }
.mx-sw.changed { background: var(--blue); }
.mx-legend .mini { margin-left: 6px; padding: 7px 11px; border-radius: 10px; font-size: .76rem; font-weight: 800; color: #dbeafe; background: rgba(255,255,255,.07); }
.mx-table { border-radius: 22px; background: rgba(255,255,255,.04); overflow: hidden; }
.mx-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(200px, 1fr); padding: 12px 16px; background: #0d1120; border-bottom: 1px solid rgba(255,255,255,.06); }
.mx-colhead { display: flex; align-items: center; gap: 6px; padding: 0 6px; font-size: .74rem; font-weight: 900; }
.mx-colhead.model { color: var(--green); overflow-wrap: anywhere; }
.mx-group { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px 10px; text-align: left; background: none; border-radius: 0; }
.mx-group:hover { background: rgba(255,255,255,.03); transform: none; filter: none; }
.mx-group-text { display: flex; flex-direction: column; gap: 2px; }
.mx-group-text b { font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mx-group.has-changes .mx-group-text b { color: var(--blue); }
.mx-group-text small { font-size: .74rem; color: rgba(159,169,189,.8); }
.mx-group-right { display: flex; gap: 8px; align-items: center; }
.mx-group-right em { font-style: normal; font-size: .8rem; color: var(--muted); }
.mx-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(200px, 1fr); align-items: center; padding: 8px 16px; border-top: 1px solid rgba(255,255,255,.04); }
.mx-rowlabel { display: flex; flex-direction: column; gap: 2px; padding-right: 12px; min-width: 0; }
.mx-rowlabel > span:first-child { font-size: .86rem; font-weight: 800; }
.mx-rowhelp { font-size: .72rem; line-height: 1.4; color: var(--muted); }
.mx-flagname { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; overflow-wrap: anywhere; }
.mx-cell { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 0 6px; }
.mx-cell > select, .mx-cell > .mx-tg, .mx-cell > .mx-num { flex: 1; min-width: 0; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid transparent; color: var(--text); }
.mx-cell.inherited > select, .mx-cell.inherited > .mx-tg, .mx-cell.inherited > .mx-num input, .mx-cell.inherited > .mx-num { color: var(--muted); }
.mx-cell.changed > select, .mx-cell.changed > .mx-tg, .mx-cell.changed > .mx-num { color: var(--blue); background: rgba(125,211,252,.1); border-color: rgba(125,211,252,.45); }
.mx-cell.changed > .mx-num input { color: var(--blue); }
.mx-cell > select { padding: 8px; font: inherit; font-size: .82rem; font-weight: 800; }
.mx-cell > select option { color: var(--text); background: #141a2a; }
.mx-tg { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 10px; font-size: .82rem; font-weight: 800; }
.mx-tg i { width: 26px; height: 15px; border-radius: 999px; position: relative; background: rgba(255,255,255,.18); flex: none; }
.mx-tg i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 999px; background: #f8fbff; transition: left .15s; }
.mx-tg.on i { background: var(--green); }
.mx-tg.on i::after { left: 13px; }
.mx-cell.changed > .mx-tg.on i { background: var(--blue); }
.mx-num { display: flex; align-items: center; gap: 4px; padding: 0 10px; }
.mx-num input { flex: 1; min-width: 0; width: 100%; padding: 8px 0; border: 0; background: none; font: inherit; font-size: .86rem; font-weight: 800; color: inherit; outline: none; }
.mx-num em { font-style: normal; font-size: .72rem; color: var(--muted); }
.mx-na { flex: 1; padding: 9px 10px; border-radius: 10px; font-size: .76rem; font-weight: 700; color: rgba(159,169,189,.75); background: rgba(255,255,255,.02); }
.mx-reset { flex: 0 0 24px; height: 24px; border-radius: 7px; font-size: .8rem; color: var(--blue); background: rgba(125,211,252,.1); padding: 0; }
.mx-flags-slot, .mx-flags { display: block; }
.mx-flags .muted { padding: 8px 16px; font-size: .82rem; }
.mx-flag-row .mx-cell input[type="text"] { padding: 8px 0; }

/* Run screen */
.run-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.run-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.run-card { padding: 18px; border-radius: 22px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 12px; }
.run-state-card { padding: 20px; gap: 14px; }
.run-state-card.live { background: linear-gradient(160deg, rgba(134,239,172,.1), rgba(255,255,255,.05)); }
.run-state-card.shadow { background: linear-gradient(160deg, rgba(253,230,138,.1), rgba(255,255,255,.05)); }
.run-state-line { display: flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--green); overflow-wrap: anywhere; }
.run-state-card.shadow .run-state-line { color: var(--yellow); }
.run-state-card.ended .run-state-line { color: var(--muted); }
.run-pulse { position: relative; width: 10px; height: 10px; flex: none; border-radius: 999px; background: var(--green); }
.run-pulse.live::before { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--green); animation: run-pulse 1.6s ease-out infinite; }
.run-pulse.shadow { background: var(--yellow); } .run-pulse.shadow::before { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--yellow); animation: run-pulse 1.6s ease-out infinite; }
.run-pulse.starting { background: #f59e0b; } .run-pulse.ended { background: var(--muted); }
@keyframes run-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .run-pulse::before { animation: none; } }
.run-title-wrap { display: flex; flex-direction: column; gap: 4px; }
.run-task { font-size: 1.25rem; font-weight: 900; letter-spacing: -.03em; overflow-wrap: anywhere; }
.run-sub { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.run-stat-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.run-stat { padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 2px; }
.run-stat b { font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.run-stat.good b { color: var(--green); }
.run-stat small { font-size: .7rem; font-weight: 700; color: var(--muted); }
.run-bits { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; line-height: 1.4; color: rgba(255,255,255,.86); }
.run-bits:empty { display: none; }
.run-warn { display: flex; flex-direction: column; gap: 6px; font-size: .78rem; font-weight: 700; padding: 9px 11px; border-radius: 11px; color: var(--yellow); background: rgba(253,230,138,.1); }
.run-actions { display: flex; gap: 8px; }
.run-stop { flex: 1; padding: 13px; border-radius: 13px; font-size: .9rem; font-weight: 900; color: #061018; background: #f8fbff; }
.run-stop.release { background: linear-gradient(135deg, #fecaca, var(--red)); }
.run-stop[disabled], .run-estop[disabled] { opacity: .5; cursor: not-allowed; }
.run-estop { padding: 13px 14px; border-radius: 13px; font-size: .84rem; font-weight: 900; color: #fff; background: #dc2626; box-shadow: inset 0 0 0 2px #fde047; }
.run-hint { font-size: .72rem; color: var(--muted); }
.run-ep-actions, .run-after { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.run-ep-actions .mini { padding: 8px 11px; border-radius: 10px; font-size: .78rem; font-weight: 800; color: #dbeafe; background: rgba(255,255,255,.07); }
.run-after .mini { padding: 12px 14px; border-radius: 13px; font-size: .86rem; font-weight: 900; }
.run-after .mini.strong { flex: 1; color: #061018; }
.run-after .mini:not(.strong) { color: #dbeafe; background: rgba(255,255,255,.08); }
.run-after .link-btn { margin-left: auto; font-size: .8rem; color: var(--muted); }
.run-models-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.run-model { padding: 13px; border-radius: 16px; background: rgba(0,0,0,.18); border: 1.5px solid transparent; display: flex; flex-direction: column; gap: 10px; }
.run-model.driving { background: rgba(134,239,172,.08); border-color: rgba(134,239,172,.4); }
.run-model-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.run-model-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.run-model-id .lineup-letter { width: 22px; height: 22px; border-radius: 7px; font-size: .72rem; }
.run-model-name { display: flex; flex-direction: column; min-width: 0; }
.run-model-name b { font-size: .84rem; font-weight: 900; overflow-wrap: anywhere; }
.run-model-name small { font-size: .7rem; font-weight: 800; color: var(--muted); }
.run-model-name small.good { color: var(--green); } .run-model-name small.warn { color: var(--yellow); }
.run-drive { padding: 7px 10px; border-radius: 9px; font-size: .74rem; font-weight: 900; color: #061018; background: var(--blue); white-space: nowrap; }
.run-drive[disabled] { opacity: .4; cursor: not-allowed; }
.run-model-stats { display: grid; gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.run-model-stats span { display: flex; flex-direction: column; gap: 1px; }
.run-model-stats b { font-size: .86rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.run-model-stats small { font-size: .64rem; font-weight: 700; color: var(--muted); }
.run-model-tags { display: flex; gap: 6px; }
.run-tag { flex: 1; padding: 7px; border-radius: 9px; font-size: .74rem; font-weight: 800; text-align: center; background: rgba(134,239,172,.1); color: var(--green); }
.run-tag.bad { background: rgba(248,113,113,.1); color: #fca5a5; }
.run-tag.ok.has { background: var(--green); color: #061018; } .run-tag.bad.has { background: var(--red); color: #061018; }
.run-tag[disabled] { opacity: .45; cursor: not-allowed; }
.run-model-tags.static .run-tag { opacity: .85; }
.run-notes textarea { width: 100%; font: inherit; font-size: .86rem; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.28); color: var(--text); resize: vertical; min-height: 72px; outline: none; }
.run-notes textarea:focus { border-color: var(--blue); }
.run-notes small { font-size: .72rem; color: var(--muted); min-height: 1em; }
.run-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.run-cam-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.run-cam-title { font-size: .86rem; font-weight: 800; color: var(--muted); }
.run-overlay-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 11px; font-size: .8rem; font-weight: 800; color: #dbeafe; background: rgba(255,255,255,.07); cursor: pointer; }
.run-overlay-toggle:has(input:checked) { color: #061018; background: var(--pink); }
.run-overlay-toggle:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.run-overlay-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.run-cam-head small { width: 100%; font-size: .72rem; color: var(--muted); }
.run-overlay-controls { grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr); margin: 0; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.05); }
.run-tiles .align-tile { padding: 0; border-radius: 18px; overflow: hidden; }
.run-tiles .align-view { border-radius: 0; }
.run-tiles .align-cap { padding: 8px 12px; }
.run-used summary { cursor: pointer; font-size: .86rem; font-weight: 800; }
.run-used[open] summary { margin-bottom: 8px; }

@media (max-width: 1100px) {
  .pf-layout { grid-template-columns: 1fr; }
  .pf-side { position: static; order: -1; }   /* checks + Start first; the long settings list follows */
  .run-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pf-head h2 { font-size: 1.4rem; }
  .pf-task { padding: 14px; }
  .pf-num { width: calc(50% - 7px); }
  .mx-cols, .mx-row { grid-template-columns: minmax(0, 1fr); }
  .mx-cols > span:first-child { display: none; }
  .mx-row { gap: 6px; padding: 10px 12px; }
  .mx-rowlabel { padding-right: 0; }
  .mx-cell { padding: 0; }
  .mx-group { padding: 12px 12px 8px; }
  .lineup-card { flex-basis: 250px; }
  .libm-bar { position: static; }
  .run-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .run-model-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .run-overlay-controls { grid-template-columns: 1fr; }
}

/* ================= Voice, Animations and Drive pages (2026-10-16 design) =================
   Prefixes: vx- voice, ax- animations, dx- drive. Tokens are the shared ones above. */
@keyframes vx-breath { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.08); opacity: .9; } }
@keyframes ax-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.vx-page, .ax-page, .dx-page { max-width: 1240px; display: flex; flex-direction: column; gap: 18px; }
.vx-page { flex-direction: row; align-items: flex-start; flex-wrap: wrap; gap: 20px; }
.vx-side { flex: 0 1 360px; min-width: min(100%, 290px); display: flex; flex-direction: column; gap: 14px; }
.vx-main { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.vx-btn { padding: 10px 18px; border-radius: 12px; font-size: .86rem; font-weight: 800; color: #dbeafe; background: rgba(255,255,255,.08); }
.vx-btn.primary { color: #061018; background: linear-gradient(135deg, var(--blue), var(--green)); font-weight: 900; }
.vx-btn.small { align-self: flex-start; margin-top: 4px; padding: 8px 12px; font-size: .78rem; }
.vx-hero { padding: 26px 22px; border-radius: 26px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; background: rgba(255,255,255,.04); --vx-core: var(--muted); --vx-ring: rgba(255,255,255,.08); --vx-ring-opacity: .2; }
.vx-hero[data-state="asleep"] { --vx-core: var(--green); --vx-ring: rgba(134,239,172,.25); --vx-ring-opacity: .8; background: linear-gradient(160deg, rgba(134,239,172,.12), rgba(255,255,255,.04)); }
.vx-hero[data-state="listening"] { --vx-core: var(--blue); --vx-ring: rgba(125,211,252,.3); --vx-ring-opacity: .8; background: linear-gradient(160deg, rgba(125,211,252,.16), rgba(255,255,255,.04)); }
.vx-hero[data-state="thinking"] { --vx-core: #c4b5fd; --vx-ring: rgba(196,181,253,.3); --vx-ring-opacity: .8; background: linear-gradient(160deg, rgba(196,181,253,.14), rgba(255,255,255,.04)); }
.vx-hero[data-state="speaking"] { --vx-core: var(--pink); --vx-ring: rgba(240,171,252,.3); --vx-ring-opacity: .8; background: linear-gradient(160deg, rgba(240,171,252,.14), rgba(255,255,255,.04)); }
.vx-hero[data-state="off"] { --vx-core: #5f6b82; --vx-ring: rgba(248,113,113,.18); --vx-ring-opacity: .35; background: linear-gradient(160deg, rgba(248,113,113,.08), rgba(255,255,255,.04)); }
.vx-orb { position: relative; width: 140px; height: 140px; display: grid; place-items: center; }
.vx-orb-breath { position: absolute; inset: 0; border-radius: 999px; background: var(--vx-ring); opacity: var(--vx-ring-opacity); animation: vx-breath 2.4s ease-in-out infinite; }
.vx-hero[data-state="off"] .vx-orb-breath, .vx-hero[data-state="checking"] .vx-orb-breath { animation: none; }
.vx-orb-level { position: absolute; inset: 42px; border-radius: 999px; background: var(--vx-ring); opacity: .55; transition: inset .25s; }
.vx-orb-core { position: relative; width: 84px; height: 84px; border-radius: 999px; display: grid; place-items: center; font-size: .78rem; font-weight: 900; letter-spacing: .1em; color: #061018; background: var(--vx-core); }
.vx-state { display: flex; flex-direction: column; gap: 6px; }
.vx-state-title { font-size: 1.35rem; font-weight: 900; letter-spacing: -.03em; }
.vx-state-sub { font-size: .84rem; color: var(--muted); text-wrap: pretty; }
.vx-hero-actions { display: flex; gap: 8px; }
.vx-card { padding: 18px; border-radius: 22px; background: rgba(255,255,255,.05); display: flex; flex-direction: column; gap: 14px; }
.vx-meter { display: flex; flex-direction: column; gap: 8px; }
.vx-meter small { font-size: .72rem; color: #5f6b82; }
.vx-meter-head { display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; font-weight: 800; }
.vx-meter-head span:first-child { color: var(--muted); }
.vx-meter-head span:last-child { color: var(--muted); text-align: right; }
.vx-meter-head span.loud { color: var(--yellow); }
.vx-meter-head span.bad { color: var(--red); }
.vx-mic-bar { position: relative; height: 12px; border-radius: 999px; background: rgba(0,0,0,.35); overflow: hidden; }
.vx-mic-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--green)); transition: width .2s linear; }
.vx-mic-tick { position: absolute; left: 40%; top: -2px; bottom: -2px; width: 2px; background: var(--yellow); }
.vx-health { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.vx-health-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .8rem; }
.vx-switches { gap: 12px; }
.vx-switch { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .85rem; cursor: pointer; }
.vx-switch > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vx-switch small { color: var(--muted); font-size: .72rem; }
.vx-switch input { width: 22px; height: 22px; flex: none; accent-color: var(--green); margin: 0; }
.vx-switch input:disabled { opacity: .4; }
.vx-note { margin: 0; font-size: .78rem; color: var(--muted); }
.vx-keycard { gap: 10px; background: rgba(253,230,138,.08); border: 1px solid rgba(253,230,138,.25); }
.vx-keycard p { margin: 0; font-size: .84rem; line-height: 1.45; }
.vx-keycard.bad { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.3); }
.vx-keycard .vx-btn { margin-top: 0; }
.vx-health-row span:first-child { display: flex; align-items: center; gap: 8px; }
.vx-health-row span:last-child { color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.vx-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--muted); flex: none; }
.vx-dot.ok { background: var(--green); }
.vx-dot.warn { background: var(--yellow); }
.vx-dot.bad { background: var(--red); }
.vx-dot.pending { background: var(--muted); opacity: .6; }
.vx-convo-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.vx-convo-head span { font-size: .86rem; font-weight: 800; color: var(--muted); }
.vx-convo-head small { font-size: .74rem; color: #5f6b82; }
.vx-log { flex: 1; min-height: 320px; max-height: 560px; padding: 18px; border-radius: 24px; background: rgba(255,255,255,.04); display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.vx-empty { color: var(--muted); font-size: .9rem; }
.vx-msg { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; max-width: 100%; }
.vx-msg.me { align-items: flex-end; }
.vx-meta { font-size: .68rem; font-weight: 800; letter-spacing: .06em; color: #5f6b82; }
.vx-bubble { max-width: 78%; padding: 12px 15px; border-radius: 18px; font-size: .92rem; line-height: 1.5; color: var(--text); background: rgba(255,255,255,.07); overflow-wrap: anywhere; }
.vx-msg.me .vx-bubble { color: #061018; background: #dbeafe; }
.vx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; color: var(--green); background: rgba(134,239,172,.12); max-width: 100%; overflow-wrap: anywhere; }
.vx-chip.anim { color: var(--pink); background: rgba(240,171,252,.12); }
.vx-chip.warn { color: var(--yellow); background: rgba(253,230,138,.12); }
.vx-chip.info { color: var(--muted); background: rgba(255,255,255,.06); }
.vx-line { align-self: center; font-size: .72rem; color: #5f6b82; text-align: center; }
.vx-notice { padding: 10px 14px; border-radius: 12px; font-size: .84rem; font-weight: 700; color: var(--yellow); background: rgba(253,230,138,.1); }
.vx-compose { padding: 10px; border-radius: 20px; background: rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 10px; }
.vx-seg, .ax-seg { display: flex; gap: 4px; padding: 3px; border-radius: 11px; background: rgba(0,0,0,.25); align-self: flex-start; align-items: center; }
.vx-seg-btn, .ax-seg-btn { padding: 6px 11px; border-radius: 9px; font-size: .76rem; font-weight: 800; color: var(--muted); background: transparent; }
.vx-seg-btn.active, .ax-seg-btn.active { color: #061018; background: #e8f4ff; }
.vx-compose-row { display: flex; gap: 8px; }
.vx-compose-row input { flex: 1; min-width: 0; font-size: .95rem; padding: 12px 14px; border-radius: 13px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.28); color: var(--text); outline: none; }
.vx-compose-row input:focus { border-color: var(--blue); }
.vx-compose-row .vx-btn { padding: 12px 18px; }

/* Animations */
.ax-btn { padding: 11px 12px; border-radius: 12px; font-size: .8rem; font-weight: 800; color: #dbeafe; background: rgba(255,255,255,.06); }
.ax-btn.primary { color: #061018; font-weight: 900; background: linear-gradient(135deg, var(--pink), var(--blue)); font-size: .86rem; padding: 11px 16px; }
.ax-btn.danger { color: #fca5a5; background: rgba(248,113,113,.08); }
.ax-btn.play { flex: 1; font-size: .88rem; font-weight: 900; }
.ax-btn.play:not(.primary) { color: var(--muted); background: rgba(255,255,255,.07); }
.ax-switches { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ax-switch { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 18px; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid transparent; }
.ax-switch.danger { background: rgba(248,113,113,.06); border-color: rgba(248,113,113,.25); }
.ax-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ax-track { flex: 0 0 38px; height: 22px; border-radius: 999px; position: relative; background: rgba(255,255,255,.18); margin-top: 1px; transition: background .15s; }
.ax-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px; background: var(--text); transition: left .15s; }
.ax-switch input:checked ~ .ax-track { background: var(--green); }
.ax-switch input:checked ~ .ax-track .ax-knob { left: 19px; }
.ax-switch input:focus-visible ~ .ax-track { outline: 2px solid var(--blue); outline-offset: 2px; }
.ax-switch-text { display: flex; flex-direction: column; gap: 4px; }
.ax-switch-text b { font-size: .92rem; font-weight: 900; }
.ax-switch-text small { font-size: .78rem; line-height: 1.45; color: var(--muted); }
.ax-warn { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: rgba(253,230,138,.08); font-size: .84rem; color: var(--yellow); }
.ax-warn b { font-weight: 900; }
.ax-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ax-head-text { display: flex; flex-direction: column; gap: 4px; }
.ax-head h2 { margin: 0; font-size: 1.3rem; font-weight: 900; letter-spacing: -.03em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ax-state { font-size: .72rem; padding: 4px 9px; background: rgba(255,255,255,.1); color: var(--text); letter-spacing: 0; }
.ax-state.ok { background: var(--green); color: #061018; }
.ax-state.warn { background: var(--yellow); color: #061018; }
.ax-hears { font-size: .8rem; color: var(--muted); }
.ax-new { padding: 20px; border-radius: 22px; background: rgba(240,171,252,.07); border: 1px solid rgba(240,171,252,.25); display: flex; flex-direction: column; gap: 14px; }
.ax-new.hidden { display: none; }
.ax-new-title { display: flex; flex-direction: column; gap: 4px; }
.ax-new-title span { font-size: 1rem; font-weight: 900; }
.ax-new-title small { font-size: .8rem; color: var(--muted); }
.ax-new-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.ax-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ax-field > span { font-size: .76rem; font-weight: 800; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ax-field > span b { color: var(--text); }
.ax-field input[type="text"], .ax-field input[type="number"], .ax-field input:not([type]), .ax-field select { font-size: .92rem; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.28); color: var(--text); outline: none; min-width: 0; width: 100%; }
.ax-field select { background-color: #111626; }
.ax-field input:focus { border-color: var(--blue); }
.ax-field input[type="range"] { width: 100%; accent-color: var(--pink); }
.ax-reset { padding: 0 6px; border-radius: 6px; font-size: .8rem; color: var(--muted); background: rgba(255,255,255,.08); line-height: 1.4; }
.ax-new-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.ax-new-opts { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ax-seg-label { font-size: .74rem; font-weight: 800; color: var(--muted); padding: 0 6px 0 8px; }
.ax-seg.hidden { display: none; }
.ax-check { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; font-size: .78rem; font-weight: 800; color: #dbeafe; background: rgba(255,255,255,.06); cursor: pointer; }
.ax-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ax-check-box { width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center; font-size: .66rem; color: #061018; background: rgba(255,255,255,.15); flex: none; }
.ax-check input:checked ~ .ax-check-box { background: var(--green); }
.ax-check input:checked ~ .ax-check-box::after { content: '✓'; }
.ax-check input:focus-visible ~ .ax-check-box { outline: 2px solid var(--blue); outline-offset: 2px; }
.ax-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.ax-empty { color: var(--muted); padding: 14px; grid-column: 1 / -1; }
.ax-card { padding: 18px; border-radius: 22px; background: rgba(255,255,255,.05); border: 1.5px solid transparent; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ax-card.playing { background: linear-gradient(160deg, rgba(240,171,252,.12), rgba(255,255,255,.04)); border-color: rgba(240,171,252,.5); }
.ax-card.off { opacity: .5; }
.ax-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ax-card-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ax-name { font-size: 1.25rem; font-weight: 900; letter-spacing: -.03em; overflow-wrap: anywhere; }
.ax-meta { font-size: .76rem; color: var(--muted); overflow-wrap: anywhere; }
.ax-scope { font-size: .68rem; font-weight: 900; padding: 3px 8px; border-radius: 999px; color: #c4b5fd; background: rgba(196,181,253,.12); white-space: nowrap; flex: none; }
.ax-scope.mine { color: var(--blue); background: rgba(125,211,252,.12); }
.ax-strip { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; position: relative; opacity: .35; }
.ax-strip.on, .ax-strip.starting { opacity: 1; }
.ax-strip-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--blue)); transition: width 1s linear; }
.ax-strip.starting .ax-strip-fill { width: 40% !important; animation: ax-sweep 1.2s linear infinite; }
.ax-strip-text { font-size: .74rem; color: var(--pink); min-height: 1em; margin-top: -6px; }
.ax-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ax-say { font-size: .74rem; color: #5f6b82; }
.ax-more { border-radius: 12px; background: rgba(0,0,0,.18); padding: 8px 12px; }
.ax-more summary { cursor: pointer; font-size: .8rem; font-weight: 800; color: var(--muted); }
.ax-more-body { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 10px; }
.ax-more-body .ax-check { grid-column: 1 / -1; align-self: start; justify-self: start; }
.ax-field.wide { grid-column: 1 / -1; }
.ax-edit-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 8px; align-items: center; }
.ax-edit-row .ax-btn { grid-column: 1 / -1; }
.ax-edit small { font-size: .72rem; color: #5f6b82; }

/* Drive */
.dx-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 22px; background: rgba(255,255,255,.05); }
.dx-bar-left, .dx-bar-right { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dx-state, .dx-link { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: .8rem; font-weight: 800; color: var(--muted); background: rgba(0,0,0,.25); }
.dx-state::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.dx-state.ok { color: var(--green); background: rgba(0,0,0,.25); }
.dx-state.warn { color: var(--yellow); background: rgba(0,0,0,.25); }
.dx-link.ok { color: var(--green); background: rgba(0,0,0,.25); }
.dx-link.warn { color: var(--yellow); background: rgba(0,0,0,.25); }
.dx-speed { display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 800; color: var(--muted); }
.dx-speed input { width: 160px; accent-color: var(--blue); }
.dx-speed b { color: var(--text); font-size: .9rem; min-width: 40px; }
.dx-stop { padding: 10px 18px; border-radius: 12px; font-size: .86rem; font-weight: 900; color: #1b0508; background: linear-gradient(135deg, #fecaca, #f87171 55%, #dc2626); }
.dx-readout { font-size: .8rem; color: var(--muted); min-height: 1.2em; margin-top: -8px; padding: 0 6px; }
.dx-readout:empty { display: none; }
.dx-pads { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.dx-pad-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px; border-radius: 26px; background: rgba(255,255,255,.04); }
.dx-pad { position: relative; width: min(100%, 280px); aspect-ratio: 1; border-radius: 999px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; background: radial-gradient(circle, rgba(125,211,252,.1), rgba(255,255,255,.02) 70%); border: 1.5px solid rgba(255,255,255,.1); }
.dx-pad.active { cursor: grabbing; }
.dx-axis { position: absolute; background: rgba(255,255,255,.05); pointer-events: none; }
.dx-axis.v { left: 50%; top: 10%; bottom: 10%; width: 2px; transform: translateX(-50%); }
.dx-axis.h { top: 50%; left: 10%; right: 10%; height: 2px; transform: translateY(-50%); }
.dx-pad[data-axis="y"] .dx-axis.v, .dx-pad[data-axis="x"] .dx-axis.h { background: rgba(125,211,252,.35); }
.dx-knob { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; border-radius: 999px; background: #dbeafe; box-shadow: 0 10px 30px rgba(0,0,0,.45); transform: translate(-50%, -50%); transition: transform .25s cubic-bezier(.2,.9,.3,1.3); }
.dx-pad.active .dx-knob { background: linear-gradient(135deg, var(--blue), var(--green)); transition: none; }
.dx-pad-label { font-size: .9rem; font-weight: 900; }
.dx-pad-readout { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.dx-pad-readout.live { color: var(--green); font-weight: 800; }
.dx-hint { margin: 0; font-size: .82rem; color: var(--muted); text-align: center; }
@media (max-width: 640px) {
  .dx-bar-right { width: 100%; justify-content: space-between; }
  .dx-speed input { width: 120px; }
  .dx-pads { gap: 12px; }
  .dx-pad-card { padding: 14px; }
  /* Two thumbs at once: both sticks stay side by side on a phone, as before. */
  body.drive-page .dx-pads { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.drive-page .dx-pad-card { padding: 12px 8px; gap: 8px; }
  body.drive-page .dx-pad { width: 100%; }
  body.drive-page .dx-pad-label { font-size: .8rem; }
}

/* ---- Update bar: sticky under the top bar on every page while a release installs ---- */
.update-bar { position: sticky; top: 73px; z-index: 59; margin: 0 clamp(16px, 2.5vw, 28px) 12px; padding: 12px 16px; border-radius: 18px; border: 1px solid rgba(125,211,252,.28); background: linear-gradient(135deg, rgba(125,211,252,.14), rgba(196,181,253,.10)), rgba(7,9,20,.92); backdrop-filter: blur(16px); box-shadow: 0 16px 40px rgba(0,0,0,.35); display: grid; gap: 9px; }
.update-bar.hidden { display: none; }
.ub-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ub-glyph { flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(125,211,252,.16); color: var(--blue); font-weight: 900; animation: ub-spin 1.6s linear infinite; }
.ub-title { font-weight: 900; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-step { margin-left: auto; flex: none; font-size: .78rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.ub-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.ub-fill { position: relative; height: 100%; width: 4%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), #c4b5fd); transition: width .6s ease; }
.ub-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-100%); animation: ub-shimmer 1.8s ease-in-out infinite; }
.ub-foot { display: flex; align-items: center; gap: 10px; }
.ub-note { font-size: .8rem; color: var(--muted); min-width: 0; }
.ub-note.flash { color: #fde68a; font-weight: 800; }
.ub-dismiss { margin-left: auto; padding: 5px 10px; border-radius: 9px; font-size: .76rem; font-weight: 800; background: rgba(255,255,255,.08); color: var(--text); }
.ub-dismiss.hidden { display: none; }
.update-bar.wait .ub-fill::after { animation-duration: .9s; }
.update-bar.done .ub-glyph { animation: none; background: rgba(134,239,172,.18); color: var(--green); }
.update-bar.done .ub-fill { background: linear-gradient(90deg, var(--green), var(--blue)); } .update-bar.done .ub-fill::after { animation: none; }
.update-bar.bad { border-color: rgba(248,113,113,.35); }
.update-bar.bad .ub-glyph { animation: none; background: rgba(248,113,113,.18); color: var(--red); }
.update-bar.bad .ub-fill { background: linear-gradient(90deg, var(--red), #fca5a5); } .update-bar.bad .ub-fill::after { animation: none; }
@keyframes ub-shimmer { to { transform: translateX(100%); } }
@keyframes ub-spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) { .update-bar { position: sticky; top: 0; margin: 0 12px 10px; } }
@media (max-width: 760px) { .update-bar { top: 111px; } }

/* Headset addresses (Console, Meta Quest selected) */
.headset-panel { display: grid; gap: 8px; }
.headset-row { display: grid; gap: 4px; }
.headset-note { font-size: .78rem; opacity: .7; }

/* Phone top strip with the update badge showing: the strip must never be wider than the
   phone (it was 420 px on a 390 px phone, which zooms the page out and puts taps off
   target). The robot's name is what gives way; the dot, Stop and the menu keep their size. */
@media (max-width: 760px) {
  .sidebar { min-width: 0; }
  .sidebar .side-logo-row { flex: 0 0 auto; }
  .side-foot { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  .sidebar .status-card { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .sidebar .status-card > div { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .sidebar .status-card > div > span:not(.dot) { max-width: 140px; min-width: 0; }
  .sidebar .status-card .dot { flex: none; }
}

/* Settings › Advanced: the last row. The dramatic actions live here. */
.advanced-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08); }
.advanced-row:first-child { border-top: 0; padding-top: 0; }
.advanced-row > div { flex: 1 1 320px; min-width: 0; }
.advanced-row .hint { margin: 0; }
.advanced-row button { flex: none; }
.advanced-row button[disabled] { opacity: .45; cursor: not-allowed; }
.advanced-row + .small-console { margin-bottom: 4px; }
.leader-arms { padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.leader-arms h3 { margin: 2px 0 8px; }
.leader-step { padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); margin: 10px 0; line-height: 1.5; }
.leader-step b { display: block; margin-bottom: 4px; }

/* ---- Leader arms on the operator's computer: device cog, setup dialog, run panel ---- */
.device-card { position: relative; }
.device-card-cog { position: absolute; top: 4px; right: 4px; font-size: 1.35rem; line-height: 1; opacity: .8; padding: 5px 7px; border-radius: 10px; cursor: pointer; background: rgba(255,255,255,.08); }
.device-card-cog:hover, .device-card-cog:focus-visible { opacity: 1; background: rgba(255,255,255,.12); outline: none; }
.device-card-where { text-transform: none; letter-spacing: 0; font-weight: 700; opacity: .8; }
.leader-dialog { width: min(640px, calc(100vw - 28px)); }
.leader-card h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.leader-choice { display: grid; gap: 10px; margin: 6px 0 12px; }
.leader-option { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); cursor: pointer; }
.leader-option.selected { border-color: rgba(99,102,241,.9); background: rgba(99,102,241,.14); }
.leader-option input { margin-top: 4px; accent-color: var(--blue); }
.leader-option b { display: block; font-size: .95rem; }
.leader-option small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.35; margin-top: 2px; }
.leader-note { margin: 6px 0; font-size: .82rem; color: var(--muted); line-height: 1.4; }
.leader-note.warn { color: var(--yellow); }
.leader-note.ok { color: var(--green); }
.leader-link { color: #7dd3fc; font-weight: 800; }
.leader-ports { display: grid; gap: 8px; margin: 8px 0; }
.leader-port-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.25); }
.leader-port-label { font-weight: 800; font-size: .88rem; }
.leader-port-state { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.leader-port-state .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.leader-port-state .dot-ok { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,.8); }
.leader-port-state .dot-off { background: rgba(255,255,255,.28); }
.leader-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.leader-panel .vr-live-dot.bad { background: #f87171; box-shadow: none; animation: none; }
.leader-angles { display: grid; gap: 4px; margin-top: 4px; }
.leader-arm { display: grid; grid-template-columns: 44px repeat(8, minmax(0, 1fr)); gap: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; }
.leader-arm b { text-transform: uppercase; letter-spacing: .08em; font-size: .62rem; align-self: center; }
.leader-arm span { text-align: right; padding: 2px 4px; border-radius: 6px; background: rgba(0,0,0,.25); font-variant-numeric: tabular-nums; }
.leader-drive { margin-top: 10px; display: grid; gap: 10px; }
.leader-drive-head { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.leader-drive-state { font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muted); }
.leader-pads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.leader-pads .dx-pad-card { padding: 10px; gap: 6px; }
.leader-pads .dx-pad { width: min(100%, 150px); }
.leader-pads .dx-pad-label { font-size: .78rem; }
.leader-drive-sliders { display: flex; flex-wrap: wrap; gap: 12px; }
.leader-drive-sliders .dx-speed input { width: 120px; }
@media (max-width: 760px) { .leader-port-row { grid-template-columns: 1fr; } .leader-arm { grid-template-columns: 36px repeat(4, minmax(0, 1fr)); } }

/* leader dialog: detection rows, sections; flow dialog: busy state */
.leader-detect { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .8rem; margin-top: 3px; }
.leader-detect .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.leader-detect .dot-ok { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,.8); }
.leader-detect .dot-off { background: rgba(255,255,255,.28); }
.leader-detect .dot-wait { background: #fbbf24; animation: dotPulse 1.2s ease-in-out infinite; }
.leader-section { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.22); display: grid; gap: 8px; }
.leader-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: .9rem; }
.flow-dialog { width: min(560px, calc(100vw - 28px)); }
.flow-busy { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; font-size: .95rem; }
.flow-spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); border-top-color: var(--blue); animation: flowSpin .9s linear infinite; flex: none; }
@keyframes flowSpin { to { transform: rotate(360deg); } }
.check-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: .92rem; cursor: pointer; }
.check-row input { accent-color: var(--blue); width: 18px; height: 18px; }
.account-subhead { margin: 18px 0 6px; font-size: 1rem; }

/* camera settings fold under each preview; the leader panel inside the recording view */
.camera-settings { border-radius: 12px; background: rgba(0,0,0,.18); }
.camera-settings > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; font-size: .8rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.camera-settings > summary::-webkit-details-marker { display: none; }
.camera-settings > summary::before { content: "›"; display: inline-block; transition: transform .15s ease; font-size: 1rem; }
.camera-settings[open] > summary::before { transform: rotate(90deg); }
.camera-settings-sum { margin-left: auto; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; overflow-wrap: anywhere; text-align: right; }
.camera-settings[open] > summary { border-bottom: 1px solid rgba(255,255,255,.08); }
.camera-settings > :not(summary) { margin: 8px 10px; }
.record-live-leader:empty { display: none; }
.record-live-leader .leader-panel { margin: 0; }


/* ---- Battery pills (top bar) + dialog ---- */
.battery-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.batt-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.28); color: var(--text); font-weight: 850; font-size: .78rem; cursor: pointer; }
.batt-pill:hover { border-color: rgba(255,255,255,.3); }
.batt-pill.low { border-color: rgba(248,113,113,.7); background: rgba(248,113,113,.14); }
.batt-pill.dim { opacity: .6; }
.batt-label { color: var(--muted); letter-spacing: .06em; font-size: .7rem; }
.batt-glyph { position: relative; display: inline-block; width: 20px; height: 11px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 3px; box-sizing: border-box; }
.batt-glyph::after { content: ""; position: absolute; right: -4px; top: 2px; width: 2.5px; height: 5px; background: rgba(255,255,255,.7); border-radius: 0 1px 1px 0; }
.batt-glyph i { position: absolute; left: 1px; top: 1px; bottom: 1px; max-width: 16px; background: #34d399; border-radius: 1px; }
.batt-glyph.low i { background: #f87171; }
.batt-glyph.unknown { border-style: dashed; }
.battery-dialog { width: min(520px, calc(100vw - 28px)); }
.batt-rows { display: grid; gap: 12px; margin: 10px 0 14px; }
.batt-row-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .95rem; }
.batt-track { height: 10px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; margin: 6px 0 4px; }
.batt-fill { height: 100%; background: #34d399; border-radius: 999px; }
.batt-fill.low { background: #f87171; }
.batt-row small { color: var(--muted); font-size: .76rem; }
.batt-trips { color: #fca5a5; }
@media (max-width: 860px) { .batt-glyph { display: none; } .batt-pill { padding: 4px 7px; } }
.run-panel-slot { grid-column: 1 / -1; display: grid; gap: 10px; }
.run-panel-slot:empty { display: none; }
.run-panel-slot .vr-session-panel { margin: 0; }


/* ---- Arm motion panel during a run ---- */
.motion-panel { background: linear-gradient(135deg, rgba(52,211,153,.14), rgba(14,165,233,.08)); border-color: rgba(52,211,153,.4); }
.motion-rows { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.motion-rows .dx-speed input[type=range] { width: 150px; }
.motion-rows select { border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(0,0,0,.28); color: var(--text); padding: 6px 8px; font-weight: 800; }
.motion-live { margin-left: auto; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #34d399; }
.motion-live.bad { color: #f87171; }
.record-live-leader .motion-panel { margin: 0; }
.record-live-leader { display: grid; gap: 10px; }
.ax-repeat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 6px; }
.ax-repeat-times { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; color: #dbeafe; }
.ax-repeat-times input { width: 64px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(0,0,0,.28); color: var(--text); padding: 5px 8px; font-weight: 800; }
.ax-repeat-times input:disabled { opacity: .45; }

/* Red button on the power board: shown on every page while it is pressed. */
.estop-bar { position: sticky; top: 73px; z-index: 60; margin: 0 clamp(16px, 2.5vw, 28px) 12px; padding: 12px 16px; border-radius: 18px; border: 1px solid rgba(248,113,113,.6); background: rgba(127,29,29,.92); color: #fff; display: grid; gap: 4px; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.estop-bar.hidden { display: none; }
.estop-bar b { letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; }
#voiceVolume { width: 100%; accent-color: var(--blue); margin: 6px 0 2px; }
.ros-bar { position: sticky; top: 73px; z-index: 59; margin: 0 clamp(16px, 2.5vw, 28px) 12px; padding: 12px 16px; border-radius: 18px; border: 1px solid rgba(125,211,252,.45); background: rgba(12,40,64,.92); color: var(--text); display: grid; gap: 4px; }
.ros-bar.hidden { display: none; }
.ros-bar b { letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; color: var(--blue); }