:root { --navy:#152d39; --teal:#14776e; --teal-dark:#0f5d56; --ink:#243f46; --muted:#526960; --paper:#fff; --canvas:#f2f5f1; --line:#d7e1da; --mint:#e6f0e9; --orange:#da7b44; --danger:#a7462f; --radius:14px; --header-height:88px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--canvas); font-size:14px; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; }
button,input,select,output { font:inherit; }
button { cursor:pointer; border:0; }
button:disabled { cursor:not-allowed; opacity:.5; }
button:disabled:hover { transform:none; }
button,a,input,summary { touch-action:manipulation; outline-offset:3px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--teal); }
input[type=checkbox],input[type=range] { accent-color:var(--teal); }
input[type=number] { appearance:textfield; -moz-appearance:textfield; }
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input[aria-invalid="true"] { border-color:var(--danger)!important; background:#fff0e9!important; }
a { color:inherit; }
p { line-height:1.6; }
[hidden] { display:none!important; }
h1,h2,h3 { color:var(--navy); margin:0; line-height:1.3; }
h1 { font-size:30px; letter-spacing:-.8px; font-weight:650; }
h2 { font-size:21px; letter-spacing:-.4px; font-weight:650; }
h3 { font-size:16px; font-weight:650; }
.app-header { position:sticky; top:0; z-index:20; min-height:var(--header-height); padding:17px max(28px,calc((100vw - 1480px)/2)); display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--navy); color:#fff; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; white-space:nowrap; }
.brand strong { font-size:23px; letter-spacing:-.6px; font-weight:650; }
.brand small { display:block; margin-top:4px; color:#c0d4cb; font-size:12px; }
.brand-mark { display:grid; place-items:center; width:44px; height:44px; border:1px solid #7ba397; border-radius:12px; font-size:30px; font-weight:700; position:relative; }
.brand-mark span { color:#f0a36f; position:absolute; right:4px; bottom:-1px; font-size:20px; }
.header-controls { display:flex; align-items:center; gap:22px; }
.connection-badge { display:flex; align-items:center; gap:8px; white-space:nowrap; color:#d5e3db; font-size:13px; }
.connection-badge i { display:block; height:8px; width:8px; border-radius:50%; background:#a4bab0; }
.connection-badge.connected i { background:#84d4a9; }
.connection-badge.offline i { background:#efa06f; }
.stop-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:8px; min-height:42px; padding:10px 18px; background:#f0a06c; color:#172e38; font-size:14px; letter-spacing:1px; font-weight:800; }
.stop-button:hover { background:#ffb782; }
.switch-label { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer; }
.switch-label>input { position:absolute; opacity:0; width:1px; height:1px; }
.switch { width:34px; height:20px; border-radius:20px; background:#9bad9e; position:relative; display:block; }
.switch:after { content:""; position:absolute; width:14px; height:14px; top:3px; left:3px; border-radius:50%; background:#fff; transition:transform .15s; }
.switch-label>input:checked+.switch { background:var(--teal); }
.switch-label>input:checked+.switch:after { transform:translateX(14px); }
.switch-label>input:focus-visible+.switch { outline:2px solid #7cc8b0; outline-offset:3px; }
.arm-switch .switch { background:#657f80; }
.arm-switch>input:checked+.switch { background:#da8c54; }
main { max-width:1536px; margin:0 auto; padding:0 28px; }
.workbench-nav-wrap { position:sticky; top:var(--header-height); z-index:10; background:var(--canvas); padding:13px 0; }
.workbench-nav { display:flex; padding:5px; border:1px solid var(--line); border-radius:12px; background:#fff; gap:5px; max-width:770px; }
.workspace-tab { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:41px; padding:10px 18px; flex:1; border-radius:8px; background:transparent; color:#51665c; font-size:14px; font-weight:650; white-space:nowrap; }
.workspace-tab:hover { background:#f0f5ed; }
.workspace-tab.active { background:var(--navy); color:#fff; }
.nav-number { font-size:12px; font-weight:500; opacity:.75; }
.navigation-note { display:none; }
.intro { display:flex; align-items:center; justify-content:space-between; gap:25px; margin:8px 0 21px; }
.intro p { color:var(--muted); font-size:14px; margin:7px 0 0; max-width:650px; }
.eyebrow { display:block; font-size:12px; font-weight:700; color:var(--teal); letter-spacing:1.2px; margin-bottom:6px; }
.state-strip { display:flex; gap:20px; padding:15px 20px; border:1px solid var(--line); border-radius:11px; background:#fff; flex-shrink:0; }
.state-strip>div+div { border-left:1px solid var(--line); padding-left:20px; }
.state-label { display:block; margin-bottom:5px; font-size:12px; color:#5f7267; letter-spacing:.4px; }
.state-strip strong { font-size:13px; font-weight:650; white-space:nowrap; }
.state-strip .armed { color:#934e27; }
.notice,.error-banner { padding:13px 16px; border-radius:9px; margin-bottom:20px; font-size:14px; line-height:1.6; }
.notice { background:#e9f1e7; color:#355b46; border:1px solid #c9dcc7; }
.error-banner { background:#fff0e8; border:1px solid #ddb29a; color:#8c3e25; }
.workspace-view { min-width:0; }
.panel { min-width:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:0 3px 14px #244b3505; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:23px 24px 19px; }
.heading-actions { display:flex; gap:8px; align-items:center; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; border:1px solid transparent; border-radius:7px; padding:10px 14px; font-size:13px; line-height:1.35; font-weight:600; white-space:nowrap; }
.button.primary { background:var(--teal); color:#fff; }
.button.primary:hover { background:var(--teal-dark); }
.button.secondary { background:#f4f7f0; border-color:#c7d6c8; color:#385a48; }
.button.secondary:hover { background:#eaf2e6; }
.button.small { font-size:12px; min-height:34px; padding:8px 11px; }
.button.danger { background:var(--danger); color:#fff; }
.text-button { background:transparent; color:#27695a; font-size:13px; font-weight:600; padding:5px 0; text-align:left; }
.text-button:hover { text-decoration:underline; }
.danger-text { color:var(--danger)!important; }
.icon-button { display:grid; place-items:center; min-width:34px; height:34px; border:1px solid #cfdbd0; border-radius:6px; background:#f8faf5; font-size:20px; color:#4b6a55; }
.icon-button:hover { background:#eaf1e5; }
.icon-button.delete { color:var(--danger); }
.microcopy { font-size:12px; line-height:1.65; color:var(--muted); margin:10px 0 0; }
.quick-poses-panel { margin-bottom:18px; }
.quick-poses-heading { display:flex; justify-content:space-between; align-items:center; gap:22px; padding:17px 24px 15px; }
.quick-poses-controls { display:flex; align-items:center; gap:18px; }
.quick-poses-controls>p { margin:0; max-width:320px; font-size:12px; line-height:1.55; color:var(--muted); }
.quick-pose-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; padding:0 24px 17px; }
.quick-pose-button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:151px; border:1px solid #cfddcb; border-radius:10px; background:#f6f9f2; color:#3f624b; padding:12px; }
.quick-pose-button:disabled { opacity:.72; }
.quick-pose-button:not(:disabled):hover { background:#eaf3e5; border-color:#8caf98; }
.quick-pose-button.selected,.quick-pose-button[aria-pressed="true"] { background:#e5f0e3; border-color:#6d9d81; box-shadow:inset 0 0 0 1px #6d9d81; }
.quick-pose-number { position:absolute; top:9px; left:12px; font-size:12px; font-weight:600; color:#55715a; }
.quick-pose-figure { display:block; width:68px; height:72px; margin-bottom:3px; overflow:visible; }
.pose-body { fill:none; stroke:#526a60; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.pose-body circle { fill:#fff; stroke-width:3.5; }
.pose-arms { fill:none; stroke:var(--teal); stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; }
.pose-joints { fill:#ce854d; stroke:#f6f9f2; stroke-width:1; }
.pose-ground { fill:none; stroke:#aec5a6; stroke-width:2; stroke-linecap:round; }
.quick-pose-name { text-align:center; font-size:14px; font-weight:650; line-height:1.4; color:#365b44; }
.quick-pose-caption { text-align:center; font-size:12px; line-height:1.5; color:#536f52; }
.quick-poses-note { display:flex; align-items:flex-start; gap:9px; padding:10px 24px; margin:0; font-size:12px; color:#526c4e; background:#f7faf2; border-top:1px solid #e0e8d9; }
.quick-poses-note>span { font-size:18px; line-height:1.1; }
.quick-pose-targets { border-top:1px solid #e0e8d9; padding:10px 24px; background:#f9fbf5; }
.quick-pose-targets>summary { font-size:12px; color:#4c6a4d; font-weight:600; cursor:pointer; }
.quick-pose-targets>div { overflow-x:auto; margin-top:13px; }
.quick-pose-targets p { margin:0; font-size:12px; color:var(--muted); }
.quick-pose-values-table { min-width:540px; font-size:12px; border:1px solid var(--line); }
.quick-pose-values-table caption { text-align:left; color:var(--muted); font-size:12px; margin-bottom:10px; }
.supported-stance-panel { display:grid; grid-template-columns:150px minmax(0,1fr); gap:8px 22px; padding:17px 22px; background:#fffcf6; border-color:#e2d3ba; margin-bottom:22px; }
.supported-stance-panel .panel-heading { grid-column:2; padding:0; }
.supported-stance-panel .eyebrow { color:#805723; }
.supported-stance-panel>.quick-pose-button { grid-column:1; grid-row:1/4; min-height:126px; background:#faf2e1; border-color:#dbc39a; padding:9px; }
.supported-stance-panel .quick-pose-caption { color:#855320; font-weight:650; }
.supported-stance-panel>.microcopy { grid-column:2; margin:0; color:#644f37; }
#supportedStanceStatus { font-weight:600; }
.control-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(285px,.8fr); gap:22px; align-items:start; }
.control-sidebar,.actions-sidebar,.vision-sidebar { display:flex; flex-direction:column; gap:22px; min-width:0; }
.joint-toolbar { display:flex; justify-content:space-between; align-items:center; padding:0 24px 18px; gap:15px; }
.segmented { display:flex; gap:3px; padding:4px; border-radius:8px; background:#eaf0e7; }
.segmented button { background:transparent; color:#516851; border-radius:5px; padding:8px 16px; font-size:13px; font-weight:600; }
.segmented button.active { background:#fff; color:#1d6b56; box-shadow:0 1px 4px #213d2b14; }
.checkbox-label { display:inline-flex; align-items:center; gap:7px; font-size:12px; line-height:1.5; color:#4e6656; cursor:pointer; }
.checkbox-label input { margin:0; width:15px; height:15px; }
.draft-explainer { display:flex; align-items:center; gap:8px; padding:17px 24px 0; border-top:1px solid #e1e8db; font-size:12px; color:#506b52; }
.draft-explainer strong { font-weight:650; }
.draft-explainer .live-switch { margin-left:auto; font-size:12px; }
.draft-dot { width:7px; height:7px; flex-shrink:0; background:var(--teal); border-radius:50%; }
.joint-panel>.microcopy { margin:10px 24px 18px; }
.servo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; padding:0 24px 21px; }
.servo-card { border:1px solid #dbe5d3; background:#f8faf4; border-radius:9px; padding:15px; min-width:0; }
.servo-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:16px; }
.servo-title { font-size:14px; line-height:1.35; color:#3b5f48; font-weight:650; }
.servo-title small { display:block; color:#5f735c; font-size:12px; font-weight:400; margin-top:4px; }
.servo-id { border:1px solid #cbdbc4; border-radius:4px; padding:3px 6px; color:#536e50; font-size:12px; white-space:nowrap; }
.servo-target { display:flex; align-items:center; gap:13px; }
.servo-range { width:100%; min-width:0; height:8px; margin:0; }
.servo-number { width:61px; flex-shrink:0; padding:7px 2px; border:1px solid #c8d8c0; background:#fff; border-radius:6px; text-align:center; color:#2e5739; font-size:16px; font-weight:600; }
.servo-current { display:flex; justify-content:space-between; gap:10px; min-height:17px; margin-top:11px; font-size:12px; color:#526c4d; }
.servo-current .changed { color:#95602c; }
.servo-group-label { grid-column:1/-1; color:#496b4d; font-size:12px; letter-spacing:1px; font-weight:700; border-top:1px solid var(--line); padding-top:17px; margin-top:2px; }
.pose-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; border-top:1px solid #e0e8d9; padding:18px 24px; }
.field { display:inline-flex; align-items:center; gap:10px; font-size:13px; color:#466449; font-weight:550; }
.input-with-unit { display:inline-flex; align-items:center; border:1px solid #ccd9c6; border-radius:6px; background:#f8fbf4; overflow:hidden; }
.input-with-unit input { border:0; background:transparent; color:#34563b; width:68px; padding:9px 4px 9px 9px; font-size:13px; }
.input-with-unit>span { font-size:12px; color:#5e785a; padding:0 9px 0 2px; }
.joint-utilities { display:flex; gap:21px; flex-wrap:wrap; padding:0 24px 16px; }
.lesson-note { background:#f3f7ee; border-top:1px solid #e1e8d8; padding:14px 24px; }
.lesson-note>summary { font-size:13px; color:#406743; font-weight:600; cursor:pointer; }
.lesson-note p { font-size:14px; color:#496c49; margin:11px 0 0; }
.draft-navigation { display:flex; gap:13px; justify-content:space-between; flex-wrap:wrap; align-items:center; padding:14px 24px; border-top:1px solid #e1e8db; font-size:12px; color:var(--muted); }
.head-controls { padding:0 24px 23px; }
.head-controls>p:not(.microcopy) { font-size:14px; color:var(--muted); margin:0 0 17px; line-height:1.6; }
.head-inputs { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.head-toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.learning-panel ol { padding:0 24px 0 45px; margin:0; font-size:14px; color:#45634f; line-height:1.7; }
.learning-panel li+li { margin-top:10px; }
.learning-panel>p { padding:0 24px; font-size:14px; color:var(--muted); margin:18px 0 10px; }
.learning-panel>.text-button { margin:0 24px 20px; }
.actions-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(330px,1fr); align-items:start; gap:22px; }
.sequence-title-row { display:flex; justify-content:space-between; gap:15px; padding:0 24px 17px; color:#48674b; font-size:14px; }
.sequence-title-row>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sequence-stats { display:flex; gap:13px; color:#5c7457; font-size:12px; white-space:nowrap; }
.dirty-badge { font-size:12px; font-weight:500; letter-spacing:0; padding:4px 6px; border-radius:4px; background:#f9ebcd; color:#825625; vertical-align:middle; margin-left:4px; }
.sequence-actions { display:flex; align-items:center; gap:8px; padding:14px 24px; border-block:1px solid #e1e9d9; background:#f6f9f1; flex-wrap:wrap; }
.row-tools { display:flex; gap:5px; margin-left:auto; }
.table-scroller { overflow:auto; min-height:300px; max-height:475px; scrollbar-width:thin; scrollbar-color:#abc1a4 #f4f7ef; }
table { border-collapse:separate; border-spacing:0; white-space:nowrap; width:100%; font-size:13px; }
thead { position:sticky; top:0; z-index:3; }
th { background:#eaf2e3; color:#3f6642; font-size:12px; font-weight:650; text-align:left; padding:12px 9px; border-bottom:1px solid #cddbca; min-width:58px; }
th:first-child { min-width:44px; padding-left:15px; position:sticky; left:0; z-index:4; }
th:nth-child(2) { min-width:86px; }
td { padding:9px 8px; border-bottom:1px solid #e1e9d9; background:#fff; }
td:first-child { position:sticky; left:0; z-index:1; padding-left:15px; }
tr.selected td { background:#edf5e8; }
tr.playing td { background:#fff0db; }
tr.selected td:first-child { box-shadow:inset 3px 0 var(--teal); }
tr.playing td:first-child { box-shadow:inset 3px 0 var(--orange); }
.row-select { background:transparent; color:#3d7849; font-size:13px; min-width:22px; padding:6px 0; font-weight:600; }
.cell-input { width:100%; min-width:42px; max-width:55px; border:1px solid transparent; background:transparent; border-radius:4px; padding:6px 3px; font-size:13px; color:#355f3c; }
.duration-cell .cell-input { max-width:64px; }
.cell-input:hover,.cell-input:focus { border-color:#aacaa1; background:#fff; }
.empty-state { min-height:300px; padding:33px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.empty-icon { color:#7ba578; font-size:45px; margin-bottom:14px; line-height:1; }
.empty-state h3 { color:#476f4c; font-size:18px; margin-bottom:9px; }
.empty-state p { color:#5c7958; font-size:14px; margin:0; }
.table-hint { padding:13px 24px; color:#526d4c; font-size:12px; margin:0; border-top:1px solid #e1e8d8; background:#f9fbf4; line-height:1.7; }
.playback-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; border-top:1px solid #e0e7d8; padding:19px 24px; }
.playback-buttons { display:flex; gap:8px; }
.count-badge { display:inline-block; font-size:12px; padding:4px 7px; border-radius:7px; vertical-align:middle; background:#eaf2e3; color:#447a42; }
.library-content { padding:0 24px 21px; display:grid; grid-template-columns:1fr; gap:19px; }
.search-field { display:flex; align-items:center; gap:8px; border:1px solid #ccd9c3; border-radius:7px; padding:10px 11px; background:#f8fbf3; color:#4b7a46; }
.search-field input { width:100%; border:0; background:transparent; color:#315c35; font-size:13px; padding:0; outline:none; }
.search-field input::placeholder { color:#657e59; }
.action-list { max-height:243px; min-height:143px; margin-top:10px; border:1px solid #d8e4ce; border-radius:7px; overflow:auto; scrollbar-width:thin; background:#fcfdf9; }
.action-item { display:flex; align-items:center; gap:9px; padding:11px 13px; font-size:13px; border-bottom:1px solid #e1ead9; background:transparent; color:#42643b; width:100%; text-align:left; }
.action-item:last-child { border-bottom:0; }
.action-item:hover { background:#edf5e6; }
.action-item.selected { background:#e5f0db; color:#285b31; box-shadow:inset 3px 0 var(--teal); }
.action-file-icon { font-size:15px; color:#527a42; }
.action-item-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.action-item-meta { font-size:12px; color:#5b7749; white-space:nowrap; }
.library-empty { padding:26px 15px; text-align:center; font-size:13px; color:#58764e; }
.library-selected-name { font-size:16px; color:#365d34; font-weight:650; overflow-wrap:anywhere; }
.library-details>p { color:#59744e; font-size:13px; margin:8px 0 14px; line-height:1.65; }
.library-button-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
#playSavedActionButton { grid-column:1/-1; }
.file-tools { display:flex; flex-wrap:wrap; gap:17px; margin-top:17px; }
.library-footer { display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between; padding:13px 24px; background:#f9fbf4; border-top:1px solid #e1e8d8; }
.factory-dances { padding:22px 24px; }
.factory-dances-heading { display:flex; align-items:center; justify-content:space-between; gap:13px; margin-bottom:15px; }
.factory-dances-heading .microcopy { margin:0; }
.dance-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.dance-choice { border:1px solid #d4e3c8; background:#f7faf2; border-radius:9px; padding:13px; display:flex; flex-direction:column; gap:5px; }
.dance-choice>strong { font-size:14px; color:#3d6c35; }
.dance-choice>span { font-size:12px; color:#5a774e; }
.dance-choice>div { display:flex; gap:6px; margin-top:7px; }
.dance-choice .button { flex:1; padding-inline:9px; }
.music-choice { margin-top:17px; }
.shared-activity-mount { margin-top:22px; }
.vision-layout,.setup-preview-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(355px,1fr); gap:22px; align-items:start; }
.vision-sidebar { gap:20px; }
.camera-panel .panel-heading { padding-bottom:17px; }
.feature-status-badge { display:inline-flex; align-items:center; padding:5px 9px; border:1px solid #cddac7; background:#f0f5eb; color:#49683d; border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap; }
.feature-status-badge.active { background:#e3f1e6; border-color:#a3c5a7; color:#216343; }
.camera-viewport { position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:#1c343e; margin:0 24px; display:grid; place-items:center; }
.camera-viewport img { width:100%; height:100%; object-fit:contain; position:absolute; inset:0; display:block; }
.camera-viewport img.target-picking { cursor:crosshair; }
.camera-placeholder { color:#c3d5cd; text-align:center; font-size:14px; padding:30px 25px; max-width:340px; }
.camera-placeholder>span { display:block; font-size:42px; color:#7aada1; line-height:1.2; margin-bottom:15px; }
.camera-placeholder strong { display:block; font-size:18px; color:#ebf3ed; font-weight:550; }
.camera-placeholder p { margin:9px 0 0; font-size:13px; line-height:1.7; }
.camera-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:17px 24px 0; }
.camera-toolbar .microcopy { margin:3px 0 0; flex-basis:100%; min-height:19px; }
.camera-note { font-size:12px; color:var(--muted); margin:12px 24px 20px; line-height:1.7; }
.camera-target-status { font-size:13px; line-height:1.6; color:#365f4f; background:#edf5e9; border-top:1px solid #d5e3cb; padding:13px 24px; margin:0; }
.camera-target-marker { position:absolute; pointer-events:none; width:25px; height:25px; border:2px solid #ffcf67; border-radius:50%; box-shadow:0 0 0 1px #1b323a; transform:translate(-50%,-50%); }
.camera-target-marker:before,.camera-target-marker:after { content:""; position:absolute; background:#ffcf67; box-shadow:0 0 0 1px #1b323a; }
.camera-target-marker:before { width:33px; height:1px; left:-6px; top:10px; }
.camera-target-marker:after { height:33px; width:1px; top:-6px; left:10px; }
.feature-panel .panel-heading { padding-bottom:14px; }
.feature-service-status { margin:0 24px 17px; font-size:13px; line-height:1.65; color:var(--muted); }
.feature-catalog { padding:0 24px 22px; }
.activity-group { border:1px solid #d7e2d0; border-radius:9px; overflow:hidden; background:#fbfdf8; }
.activity-group+.activity-group { margin-top:10px; }
.activity-group>summary { cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; font-size:14px; color:#3d6445; }
.activity-group>summary:after { content:"+"; font-size:18px; font-weight:400; }
.activity-group[open]>summary:after { content:"−"; }
.activity-group>summary::-webkit-details-marker { display:none; }
.activity-group>summary strong { flex:1; font-weight:650; }
.activity-group>summary span { font-size:12px; font-weight:400; white-space:nowrap; }
.activity-group>p { font-size:12px; color:#536e4e; margin:0; padding:0 14px 12px; }
.activity-group-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0 12px 13px; }
.feature-choice { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:6px; min-height:74px; text-align:left; background:#f0f6eb; color:#345e3f; border:1px solid #cddfc6; border-radius:7px; padding:12px; }
.feature-choice strong { font-size:13px; font-weight:600; line-height:1.45; }
.feature-choice span { font-size:12px; color:#4d734a; line-height:1.4; }
.feature-choice:hover { background:#e5f0df; }
.feature-choice.selected { background:#e2efdc; border-color:#6d9d78; box-shadow:inset 0 0 0 1px #6d9d78; }
.feature-choice.unavailable { background:#f6f5f0; border-color:#dedfd3; color:#5e6959; }
.feature-choice.unavailable span { color:#875a32; }
.feature-empty { font-size:13px; color:#506f4a; line-height:1.7; margin:0; padding:8px 0; grid-column:1/-1; }
.feature-details { padding:22px 24px; background:#fff; }
.feature-selection-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.feature-details>p { font-size:14px; line-height:1.7; color:var(--muted); margin:13px 0 0; }
.feature-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:17px; }
.feature-settings:empty { display:none; }
.feature-setting { display:flex; flex-direction:column; gap:7px; color:#456940; font-size:13px; min-width:0; }
.feature-setting>span { font-weight:600; }
.feature-setting input:not([type=checkbox]),.feature-setting select { border:1px solid #c4d7ba; border-radius:6px; background:#fbfdf7; padding:9px; color:#30562e; font-size:14px; width:100%; min-width:0; }
.feature-setting select { min-height:39px; }
.feature-setting small { font-size:12px; color:#54724b; line-height:1.6; }
.feature-setting-check { flex-direction:row; align-items:center; gap:8px; flex-wrap:wrap; }
.feature-setting-check input { order:-1; }
.feature-setting-check small { width:100%; }
.feature-setting-range { display:grid; grid-template-columns:1fr auto; align-items:center; gap:9px; }
.feature-setting-range>span,.feature-setting-range small { grid-column:1/-1; }
.feature-setting-range input[type=range] { padding:0; border:0; background:transparent; }
.feature-setting-range output { font-size:13px; min-width:27px; text-align:right; color:#3f6b3d; }
.feature-advanced-settings { grid-column:1/-1; border:1px solid #d4e2ca; border-radius:8px; padding:12px 13px; background:#f8fcf3; }
.feature-advanced-settings>summary { font-size:13px; font-weight:600; color:#396339; cursor:pointer; }
.feature-advanced-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin-top:15px; }
.feature-controls { display:flex; gap:9px; flex-wrap:wrap; margin-top:20px; }
.lab-tools { margin-top:17px; border-top:1px solid #dce7d4; padding-top:13px; display:flex; gap:8px 20px; flex-wrap:wrap; }
.lab-tools .microcopy { flex-basis:100%; }
.mount-placeholder { padding:24px; }
.mount-placeholder p { color:var(--muted); font-size:14px; margin:12px 0 20px; }
.setup-layout { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:22px; }
.connections-panel { margin-bottom:24px; }
.network-doctor { margin-bottom:24px; }
.network-doctor .panel-heading { align-items:flex-start; }
.network-doctor-mark { display:inline-block; color:var(--teal); margin-left:6px; font-size:24px; vertical-align:-1px; }
.network-subtitle { margin:7px 0 0; color:var(--muted); font-size:14px; }
.network-check-age { border:1px solid #c8d8cc; border-radius:6px; padding:6px 10px; color:#496251; font-size:12px; white-space:nowrap; }
.network-body { padding:0 24px 24px; }
.network-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.network-metric { border:1px solid #d4dfd2; border-radius:9px; padding:16px; background:#f5f8f1; min-width:0; }
.network-metric>span { display:block; color:#557360; font-size:12px; margin-bottom:8px; }
.network-metric>strong { display:block; font-size:16px; color:var(--navy); overflow-wrap:anywhere; }
.network-metric>p { margin:8px 0 0; font-size:12px; line-height:1.6; color:var(--muted); overflow-wrap:anywhere; }
.network-actions { display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; margin-top:18px; }
.network-status { margin:15px 0 0; padding:12px 14px; background:#edf4e9; border-left:3px solid #76a08b; border-radius:4px; font-size:14px; color:#355343; overflow-wrap:anywhere; }
.network-path-note { margin:12px 0 20px; max-width:1050px; }
.network-detail-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px; padding-bottom:22px; }
.network-section h3 { margin-bottom:13px; }
.network-interface-list,.network-route-list { display:grid; gap:12px; }
.network-interface { border:1px solid #d5e1d7; border-radius:9px; padding:14px 16px; min-width:0; }
.network-interface-heading { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:10px; }
.network-interface-heading strong { font-size:14px; overflow-wrap:anywhere; }
.network-state-chip { border-radius:5px; padding:4px 7px; color:#466752; background:#edf3e8; font-size:11px; }
.network-facts { margin:0; display:grid; gap:6px; font-size:12px; }
.network-fact { display:grid; grid-template-columns:minmax(115px,.8fr) minmax(0,1.3fr); gap:10px; line-height:1.6; }
.network-fact dt { color:var(--muted); }
.network-fact dd { color:#2e4e43; margin:0; overflow-wrap:anywhere; }
.network-route-list>.network-facts { padding:14px; border:1px solid #d5e1d7; border-radius:9px; }
.network-empty { color:var(--muted); font-size:13px; line-height:1.65; margin:0; }
.network-issues { margin:14px 0 0; padding:12px 16px 12px 31px; border:1px solid #e4c8ae; border-radius:8px; background:#fff5e9; color:#765234; font-size:12px; line-height:1.6; }
.network-issues li+li { margin-top:6px; }
.network-gateway-tests { padding:14px; margin-top:14px; border:1px solid #d5e1d7; border-radius:9px; }
.network-gateway-tests h4 { margin:0 0 10px; font-size:13px; color:var(--navy); }
.network-gateway-tests>.network-facts+.network-facts { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.network-wifi-section { padding-top:20px; border-top:1px solid var(--line); }
.network-section-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.network-section-heading .microcopy { margin-top:5px; }
.network-scan-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; }
.network-scan-controls select { padding:8px 10px; min-width:92px; max-width:180px; border:1px solid #b9cbb8; border-radius:6px; background:#fbfdf9; color:var(--ink); }
.network-scan-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin-top:13px; }
.network-scan-card { min-width:0; border:1px solid #d5e1d7; border-radius:8px; padding:14px; }
.network-scan-card>strong { display:block; margin-bottom:9px; font-size:13px; overflow-wrap:anywhere; }
.network-scan-card .network-fact { grid-template-columns:minmax(74px,.65fr) minmax(0,1fr); }
.network-management-section { padding-top:21px; margin-top:21px; border-top:1px solid var(--line); }
.network-wired-confirm { margin:16px 0; font-size:13px; white-space:normal; line-height:1.6; }
.network-join-form { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) minmax(0,1fr) auto; align-items:end; gap:12px; }
.network-join-form .field { display:flex; flex-direction:column; gap:7px; font-size:12px; color:#35564d; }
.network-join-form input,.network-join-form select { width:100%; min-width:0; height:41px; padding:9px 11px; border:1px solid #b9cbb8; border-radius:7px; background:#fbfdf9; color:var(--ink); font-size:13px; }
.network-join-form input:disabled,.network-join-form select:disabled { opacity:.6; }
.network-transaction { margin-top:18px; padding:16px; background:#fff7ea; border:1px solid #ddc49f; border-radius:9px; }
.network-transaction-heading { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.network-transaction-heading strong { font-size:14px; }
.network-transaction-heading span { font-size:12px; color:#7b582e; }
.network-transaction>p { margin:10px 0 0; font-size:13px; }
.network-wifi-address-links { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:10px; }
.network-wifi-address-links a { overflow-wrap:anywhere; }
.network-transaction>.checkbox-label { margin-top:14px; font-size:13px; white-space:normal; line-height:1.6; }
.network-transaction-actions { display:flex; flex-wrap:wrap; align-items:center; gap:9px 20px; margin-top:13px; }
.network-help { margin-top:19px; border:1px solid #dbe4d3; border-radius:8px; background:#f7f9f3; }
.network-help>summary { cursor:pointer; padding:13px 16px; color:#345343; font-size:13px; font-weight:650; }
.network-help>div { padding:0 16px 16px; }
.network-help ol { margin:0; padding-left:20px; font-size:13px; line-height:1.7; }
.network-help li+li { margin-top:7px; }
.connections-panel .panel-heading { align-items:center; }
.connection-target { max-width:42%; border:1px solid #c6d8c1; background:#eff5eb; color:#355844; padding:6px 10px; border-radius:7px; font-size:12px; overflow-wrap:anywhere; }
.connection-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:28px; padding:0 24px 24px; }
.connection-form,.connection-guide { min-width:0; }
.connection-form .field,.pairing-content .field { display:flex; flex-direction:column; align-items:stretch; gap:7px; color:#35564d; font-size:14px; }
.connection-form input,.connection-form select,.pairing-content input { width:100%; min-width:0; padding:10px 12px; border:1px solid #b9cbb8; border-radius:7px; background:#fbfdf9; color:#243f46; font-size:14px; }
.connection-form>label { margin-bottom:12px; }
.connection-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:13px; }
.connection-form .microcopy { margin:9px 0 15px; }
.connection-actions,.connection-profile-actions,.pairing-actions,.connection-guide-links { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
.connection-actions { margin-top:18px; }
.connection-profile-actions { border-top:1px solid #e0e8db; padding-top:12px; }
.connection-profile-actions a,.connection-guide-links a { text-decoration:none; }
.connection-profile-actions a:hover,.connection-guide-links a:hover { text-decoration:underline; }
.connection-status { margin:16px 0; padding:12px 14px; background:#edf4e9; border-radius:7px; color:#355343; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.connection-guide { padding:18px 20px; border-radius:10px; background:#f3f6ef; border:1px solid #dbe4d3; }
.connection-guide h3 { margin:0 0 12px; font-size:17px; color:#243f46; }
.connection-guide ol { margin:0 0 16px; padding-left:22px; font-size:14px; line-height:1.65; }
.connection-guide li+li { margin-top:10px; }
.connection-guide .microcopy { margin:14px 0 0; }
.pairing-panel { padding:15px 24px 20px; border-top:1px solid #dce5d8; }
.pairing-panel>summary { color:#335848; font-size:14px; font-weight:650; cursor:pointer; }
.pairing-content { padding-top:10px; max-width:850px; }
.pairing-content>p { font-size:14px; line-height:1.65; }
.pairing-content>.microcopy { font-size:12px; overflow-wrap:anywhere; }
.pairing-token-result { margin-top:16px; padding:17px; border:1px solid #acc9aa; border-radius:8px; background:#eef5e9; }
.pairing-token-result input { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; margin-bottom:12px; }
.pairing-token-result .microcopy { margin-bottom:0; }
.connection-stop-warning { background:#fff1e3; color:#6e3917; border-color:#d6a474; }
.connection-stop-warning p { margin:0 0 10px; overflow-wrap:anywhere; }
.setup-card { padding:0 24px 23px; }
.setup-card .panel-heading { padding-inline:0; }
.setup-card>p { color:var(--muted); font-size:14px; margin:0 0 17px; }
.setup-card>.microcopy { font-size:12px; margin-top:12px; margin-bottom:0; }
.setup-card-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; }
.setup-preview-layout { margin-top:22px; }
#setupDetailsMount.full-width { grid-column:1/-1; }
#setupCameraMount:empty,#setupDetailsMount:empty,#visionDetailsMount:empty { display:none; }
.calibration-summary { list-style:none; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer; }
.calibration-summary::-webkit-details-marker { display:none; }
.calibration-summary p { margin:8px 0 0; color:var(--muted); font-size:14px; }
.calibration-chevron { color:#4e7547; font-size:28px; }
details[open] .calibration-chevron { transform:rotate(180deg); }
.calibration-body { padding:0 24px 23px; }
.calibration-toolbar { display:flex; flex-wrap:wrap; gap:15px 23px; align-items:center; margin-bottom:19px; }
.calibration-toolbar .microcopy { margin:0; }
.calibration-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:11px; }
.calibration-item { border:1px solid #d4e1ca; border-radius:7px; background:#f7fbf0; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px; font-size:13px; color:#446b39; }
.calibration-item input { width:51px; border:1px solid #c8dcb8; border-radius:5px; padding:6px 3px; text-align:center; font-size:14px; color:#356128; background:#fff; }
.calibration-item input:disabled { opacity:.7; }
.calibration-footer { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:9px; margin-top:19px; }
.page-footer { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:26px 3px; font-size:12px; color:#536e4d; }
.page-footer>span:first-child { font-weight:650; color:#355f34; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--navy); color:#f5faf5; border-radius:9px; padding:14px 20px; font-size:14px; line-height:1.5; box-shadow:0 6px 25px #0002; z-index:40; max-width:min(620px,calc(100vw - 30px)); }
.app-dialog { width:min(520px,calc(100vw - 30px)); padding:28px; border:1px solid #c4d6bb; border-radius:14px; background:#fff; color:var(--ink); box-shadow:0 20px 90px #142d3955; }
.app-dialog::backdrop { background:#142d3970; backdrop-filter:blur(3px); }
.dialog-eyebrow { font-size:12px; color:var(--teal); font-weight:700; letter-spacing:1.2px; margin-bottom:10px; }
.app-dialog h2 { font-size:25px; }
.app-dialog p { font-size:14px; color:var(--muted); line-height:1.7; margin:14px 0 21px; }
.dialog-buttons { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:9px; margin-top:24px; }
.dialog-field { display:flex; flex-direction:column; gap:9px; font-size:14px; color:#476640; }
.dialog-field input { width:100%; border:1px solid #c3d9b7; border-radius:6px; padding:11px; color:#355a2c; background:#fbfdf8; font-size:14px; }
.dialog-error { color:var(--danger); font-size:13px; line-height:1.6; margin-top:10px; }
.torque-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.torque-grid .checkbox-label { border:1px solid #d2e0c5; border-radius:5px; padding:8px; }
.torque-presets { display:flex; gap:16px; margin-bottom:14px; }
@media(min-width:1400px) {
  .servo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:1190px) {
  main { padding:0 22px; }
  .app-header { padding-inline:22px; }
  .intro { flex-wrap:wrap; gap:19px; }
  .state-strip { margin-left:auto; }
  .control-layout { grid-template-columns:minmax(0,1.5fr) minmax(290px,.9fr); }
  .actions-layout { grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr); }
  .vision-layout,.setup-preview-layout { grid-template-columns:minmax(0,1fr) minmax(345px,1fr); }
  .panel-heading,.quick-poses-heading { padding-inline:20px; }
  .quick-poses-controls { gap:12px; }
  .quick-poses-controls>p { max-width:250px; }
  .quick-pose-grid,.quick-poses-note,.quick-pose-targets { padding-inline:20px; }
  .joint-toolbar,.draft-explainer,.servo-grid,.pose-footer,.joint-utilities,.lesson-note,.draft-navigation { padding-inline:20px; }
  .joint-panel>.microcopy { margin-inline:20px; }
  .sequence-title-row,.sequence-actions,.table-hint,.playback-footer,.library-content,.library-footer,.factory-dances { padding-inline:20px; }
  .head-controls,.feature-catalog,.feature-details,.camera-toolbar,.camera-target-status { padding-inline:20px; }
  .camera-viewport,.camera-note,.feature-service-status { margin-inline:20px; }
  .heading-actions { flex-wrap:wrap; justify-content:flex-end; }
  .sequence-panel .panel-heading { align-items:flex-start; }
  .calibration-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:960px) {
  .network-join-form { grid-template-columns:1fr 1fr; }
  .network-overview { grid-template-columns:1fr 1fr; }
  .network-overview>.network-metric:last-child { grid-column:1/-1; }
  .network-scan-results { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .header-controls { gap:14px; }
  .brand strong { font-size:21px; }
  .brand small { display:none; }
  .intro { margin-top:10px; }
  .intro>div:first-child { flex:1; min-width:280px; }
  .state-strip { margin-left:0; }
  .control-layout,.actions-layout,.vision-layout,.setup-preview-layout { grid-template-columns:1fr; }
  .control-sidebar { display:grid; grid-template-columns:1fr 1fr; align-items:start; }
  .actions-sidebar { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:start; }
  .servo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .quick-poses-heading { align-items:flex-start; }
  .quick-poses-controls { align-items:flex-start; flex-direction:column; gap:8px; }
  .quick-poses-controls>p { max-width:370px; }
  .vision-sidebar { display:grid; grid-template-columns:1fr 1fr; align-items:start; }
  .camera-viewport { max-height:470px; }
  .feature-selection-heading { align-items:flex-start; flex-wrap:wrap; }
  .feature-settings { grid-template-columns:1fr; }
  .setup-layout { grid-template-columns:1fr 1fr; }
}
@media(max-width:760px) {
  :root { --header-height:139px; }
  .app-header { flex-wrap:wrap; gap:13px; }
  .header-controls { width:100%; justify-content:space-between; }
  .connection-layout { grid-template-columns:1fr; gap:18px; }
}
@media(max-width:650px) {
  .network-join-form { grid-template-columns:1fr; }
  .network-body { padding-inline:17px; }
  .network-overview,.network-detail-layout,.network-scan-results { grid-template-columns:1fr; }
  .network-overview>.network-metric:last-child { grid-column:auto; }
  .network-detail-layout { gap:20px; }
  .network-metric { padding:14px; }
  .network-actions { gap:10px 14px; }
  .network-check-age { white-space:normal; }
  :root { --header-height:139px; }
  .app-header { min-height:var(--header-height); padding:15px 16px; flex-wrap:wrap; gap:13px; }
  .brand small { display:block; }
  .brand strong { font-size:21px; }
  .brand-mark { width:38px; height:38px; font-size:27px; }
  .header-controls { width:100%; justify-content:space-between; gap:9px; }
  .connection-badge { font-size:12px; gap:6px; }
  .arm-switch { font-size:12px; gap:6px; }
  .stop-button { min-height:36px; padding:8px 12px; font-size:13px; }
  main { padding:0 12px; }
  .workbench-nav-wrap { padding-top:12px; padding-bottom:12px; }
  .workbench-nav { padding:4px; gap:3px; }
  .workspace-tab { white-space:normal; font-size:12px; padding:8px 5px; min-height:47px; line-height:1.4; }
  .nav-number { display:none; }
  .intro { margin:10px 0 20px; gap:18px; }
  h1 { font-size:27px; }
  h2 { font-size:20px; }
  .intro p { font-size:14px; }
  .state-strip { width:100%; justify-content:space-between; padding:12px; gap:12px; }
  .state-strip>div+div { padding-left:12px; }
  .state-label { font-size:12px; }
  .state-strip strong { font-size:12px; white-space:normal; }
  .quick-poses-heading { flex-direction:column; gap:13px; padding:20px 17px 17px; }
  .quick-poses-controls { width:100%; align-items:flex-start; gap:10px; }
  .quick-poses-controls>p { text-align:left; max-width:none; }
  .quick-pose-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; padding-inline:17px; }
  .quick-pose-button { min-height:169px; padding:13px 8px; }
  .quick-pose-name { font-size:13px; }
  .quick-pose-figure { width:66px; height:70px; }
  .quick-poses-note,.quick-pose-targets { padding-inline:17px; }
  .supported-stance-panel { grid-template-columns:110px minmax(0,1fr); padding:17px; gap:11px 16px; }
  .supported-stance-panel .panel-heading { grid-column:2; }
  .supported-stance-panel>.quick-pose-button { grid-column:1; grid-row:1/4; padding:8px; }
  .supported-stance-panel>.microcopy { grid-column:2; font-size:12px; }
  .supported-stance-panel .quick-pose-name { font-size:13px; }
  .control-layout,.actions-layout,.vision-layout,.setup-preview-layout,.setup-layout { gap:17px; }
  .control-sidebar,.actions-sidebar,.vision-sidebar,.setup-layout { display:flex; flex-direction:column; gap:17px; }
  .control-sidebar>*,.actions-sidebar>*,.vision-sidebar>* { width:100%; }
  .panel-heading { padding:20px 17px 17px; gap:10px; flex-wrap:wrap; }
  .servo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding-inline:17px; gap:10px; }
  .servo-card { padding:12px; }
  .servo-title { font-size:13px; }
  .servo-id { padding:3px 4px; }
  .servo-number { width:52px; font-size:15px; }
  .servo-target { gap:9px; }
  .servo-current { flex-direction:column; gap:3px; }
  .joint-toolbar,.draft-explainer,.pose-footer,.joint-utilities,.lesson-note,.draft-navigation { padding-inline:17px; }
  .draft-explainer { flex-wrap:wrap; }
  #draftComparison { display:none; }
  .joint-panel>.microcopy { margin-inline:17px; }
  .joint-utilities { gap:12px 20px; }
  .pose-footer { flex-wrap:wrap; }
  .sequence-title-row,.sequence-actions,.table-hint,.playback-footer,.library-content,.library-footer,.factory-dances { padding-inline:17px; }
  .sequence-title-row { flex-wrap:wrap; gap:10px; }
  .table-scroller { min-height:270px; max-height:430px; }
  .empty-state { min-height:270px; padding-inline:17px; }
  .heading-actions { justify-content:flex-start; }
  .head-controls,.feature-catalog,.feature-details,.camera-toolbar,.camera-target-status { padding-inline:17px; }
  .camera-viewport,.camera-note,.feature-service-status { margin-inline:17px; }
  .camera-viewport { max-height:360px; }
  .feature-settings { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .activity-group>summary { font-size:13px; gap:8px; }
  .activity-group>summary span { white-space:normal; text-align:right; }
  .setup-card { padding-inline:17px; }
  .connection-layout { padding-inline:17px; }
  .connection-fields { grid-template-columns:1fr; }
  .connection-target { max-width:100%; }
  .pairing-panel { padding-inline:17px; }
  .connection-guide { padding:16px; }
  .calibration-summary,.calibration-body { padding-inline:17px; }
  .calibration-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .calibration-item { padding:8px; gap:6px; font-size:12px; }
  .calibration-item input { width:43px; }
  .learning-panel ol { padding-inline:39px 17px; }
  .learning-panel>p { padding-inline:17px; }
  .learning-panel>.text-button { margin-inline:17px; }
  .page-footer { padding-block:23px; gap:9px; }
  .page-footer>span:last-child { flex-basis:100%; }
  .app-dialog { padding:23px; }
  .app-dialog h2 { font-size:23px; }
}
@media(max-width:380px) {
  .quick-pose-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .servo-grid,.feature-settings,.feature-advanced-grid { grid-template-columns:1fr; }
  .header-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:15px; row-gap:8px; }
  .connection-badge { grid-column:1; grid-row:1; }
  .arm-switch { grid-column:1; grid-row:2; justify-self:start; }
  .stop-button { grid-column:2; grid-row:1/3; margin:0; align-self:center; }
  .joint-toolbar { flex-wrap:wrap; }
  .calibration-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { transition:none!important; scroll-behavior:auto!important; }
}