/* Shared page geometry and readability. Load after feature styles;
   safety.css owns the independent P0 controls. */
:root {
  --page-gutter: clamp(12px, 1.25vw, 24px);
  --layout-gap: 16px;
  --card-padding: 16px;
  --control-height: 40px;
  --card-radius: 8px;
  --detail-text: #526786;
  --ui-primary: #2167de;
  --ui-danger: #c9364f;
  --ui-danger-text: #b42d46;
  --ui-subtle: #f4f7fc;
  --ui-border: #dce5f1;
  --ui-input-border: #c4d1e2;
  --ui-hover: #f0f5ff;
  --ui-selected: #eaf2ff;
}

body.dark {
  --detail-text: var(--muted);
  --ui-danger-text: #ffb1bc;
  --ui-subtle: #1d2f49;
  --ui-border: #344964;
  --ui-input-border: #49617f;
  --ui-hover: #203958;
  --ui-selected: #233f64;
}
.workspace { min-width: 0; }
.topbar { height: 68px; padding: 10px var(--page-gutter); }
.page-content {
  width: 100%; max-width: none; margin: 0;
  padding: 12px var(--page-gutter) 24px;
  font-size: 14px;
}
.page-content > :not(:last-child) { margin-bottom: var(--layout-gap); }
.page-content :is(.panel, .chart-card) {
  padding: var(--card-padding); border-radius: var(--card-radius);
}
.page-content :is(.page-toolbar, .pw-heading, .upload-heading) {
  min-width: 0; padding: 0; margin: 0 0 var(--layout-gap);
  gap: var(--layout-gap); align-items: flex-start;
}
.page-content :is(.page-toolbar, .pw-heading, .upload-heading) > div { min-width: 0; }
.page-content :is(.page-toolbar, .pw-heading, .upload-heading) h2 {
  font-size: 22px; line-height: 1.4; margin: 0 0 4px; color: var(--text);
}
.page-content :is(.page-toolbar, .pw-heading, .upload-heading) p {
  font-size: 12px; line-height: 1.6; margin: 0; overflow-wrap: anywhere;
}
.page-content .section-head {
  min-height: 32px; margin-bottom: var(--layout-gap);
  gap: var(--layout-gap); flex-wrap: wrap;
}
.page-content .section-head :is(h2, h3) { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.page-content .section-head > div { min-width: 0; }
.page-content :is(.two-column, .collection-layout, .device-dashboard,
  .fairino-overview-grid, .fairino-workspace-cards, .overview-runtime, .overview-charts) {
  gap: var(--layout-gap); align-items: start;
}
.page-content :is(.two-column, .collection-layout, .device-dashboard) > * { min-width: 0; }
.page-content .pw-columns { gap: var(--layout-gap); align-items: start; }
.pw-columns > div {
  display: grid; gap: var(--layout-gap); align-items: start; align-content: start; min-width: 0;
}
.page-content .pw-columns > .pw-panel,
.page-content .pw-columns > div > .pw-panel { margin: 0; }
.page-content :is(.pw-metrics, .overview-metrics, .asset-metrics,
  .robot-workspace-grid, .capture-choice, .pw-chart-grid, .pw-device-layout) { gap: var(--layout-gap); }
.page-content :is(.overview-metric, .pw-metric, .asset-metric) {
  min-height: 92px; padding: var(--card-padding); align-items: flex-start;
}
.page-content :is(.pw-device-layout, .upload-workspace) { align-items: start; }
.page-content .pw-device-layout > aside { display: grid; gap: var(--layout-gap); }
.page-content .pw-device-layout > aside > .pw-panel { margin: 0; }
.page-content .runtime-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

/* Refine the existing type hierarchy without changing titles or page structure. */
.page-content :is(.page-toolbar, .pw-heading, .upload-heading) p {
  font-size: 13px;
}
.page-content :is(.muted, .pw-subtle, .camera-meta, .legend, .capability-list) {
  color: var(--detail-text);
  font-size: 12px;
  line-height: 1.65;
}
.page-content :is(.metric-label, .overview-metric small, .overview-device small,
  .welcome-copy p, .overview-flow-step small, .quality-legend > small,
  .asset-metric > div > small, .asset-metric > div > span,
  .asset-sidebar > .panel > small, .asset-table td small, .pw-metric small) {
  color: var(--detail-text);
  font-size: 12px;
  line-height: 1.6;
}
.page-content :is(.overview-metric, .asset-metric, .pw-metric) > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.page-content :is(.joint-readings, .runtime-grid, .camera-meta,
  .overview-metrics, .asset-metrics, .pw-metrics, table) {
  font-variant-numeric: tabular-nums;
}
.page-content :is(.empty-state, .pw-empty) { color: var(--detail-text); line-height: 1.7; }
.page-content .empty-state small { color: var(--detail-text); font-size: 12px; }
.page-content :is(table, .pw-table, .recent-datasets td) { font-size: 12px; }
.page-content table th { color: var(--detail-text); }
.page-content .recent-datasets td { color: var(--detail-text); }
.page-content .recent-datasets td:first-child { color: var(--text); }
.page-content .asset-table td strong { font-size: 12px; font-weight: 600; }
.page-content .asset-metric:has(.asset-storage-mini) {
  display: grid; grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px; align-content: start;
}
.page-content .asset-storage-mini { position: static; grid-column: 1 / -1; }

/* Labels may wrap; controls in the same row still share a baseline. */
.page-content :is(.form-grid, .form-stack, .wizard-form, .pw-form) {
  min-width: 0; gap: var(--layout-gap); align-items: end;
}
.page-content :is(.form-grid, .form-stack, .wizard-form, .pw-form) > label {
  min-width: 0; display: grid; gap: 6px;
}
.page-content :is(input, select, textarea) { max-width: 100%; box-sizing: border-box; }
.page-content input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
.page-content select { min-height: var(--control-height); }
.page-content textarea { resize: vertical; }
.page-content :is(.form-grid, .form-stack, .pw-form) label {
  color: var(--detail-text); font-size: 12px; line-height: 1.6;
}
.page-content label:has(> input:is([type=checkbox], [type=radio])) {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start; align-content: start; gap: 6px 8px;
}
.page-content label > input:is([type=checkbox], [type=radio]) {
  grid-column: 1; grid-row: 1;
  width: 16px; height: 16px; margin: 3px 0 0; justify-self: start;
}
.page-content label:has(> input:is([type=checkbox], [type=radio])) > small {
  grid-column: 2;
}
.page-content :is(.form-grid, .form-stack, .pw-form) :is(input, select, textarea) {
  font-size: 13px; line-height: 1.5;
}
.page-content textarea { font-family: inherit; }
.page-content .form-grid select { background: var(--panel); color: var(--text); }
.page-content :is(input[type=checkbox], input[type=radio]) { width: auto; min-height: 0; }
.page-content input[type=range] { min-height: 18px; padding: 0; }
.page-content :is(.pw-actions, .button-row) { align-items: end; gap: 8px; }
.page-content .pw-actions > input { flex: 1 1 180px; min-width: 0; width: auto; }
.page-content .pw-actions > label { flex: 1 1 160px; min-width: 0; }
.page-content .pw-actions > button,
.page-content .button-row > :is(button, a) { min-height: var(--control-height); }
.page-content .pw-filter > button,
.page-content .asset-filters > button { height: var(--control-height); }
/* Native selects size themselves from the longest option. Constrain the label
   as well as the select so real dataset names cannot widen the whole page. */
.page-content .pw-filter > label { flex: 0 1 220px; min-width: 0; display: grid; gap: 6px; }
.page-content .pw-filter > label > select { width: 100%; min-width: 0; }
.page-content .pw-filter > input { flex: 1 1 180px; min-width: 0; }
.page-content .pw-media-controls :is(select, button) { height: var(--control-height); }
.page-content .message:empty { display: none; }
.page-content .table-wrap { width: 100%; max-width: 100%; }
.page-content pre { max-width: 100%; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; }
.page-content .pw-kv { grid-template-columns: minmax(80px, 105px) minmax(0, 1fr); }

/* Keyboard focus and busy feedback use the platform's existing action color. */
.platform-shell :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px;
}
.global-search:focus-within { border-color: var(--blue); }
.platform-shell button[aria-busy=true] { cursor: progress; }
.platform-shell button:disabled:hover { filter: none; transform: none; }

/* Empty data needs a useful message, not a full-height placeholder card. */
.page-content .chart-card { min-height: 0; }
.page-content .pw-empty { min-height: 64px; padding: 12px; gap: 8px; font-size: 13px; }
.page-content .pw-empty .ui-icon { width: 28px; height: 28px; }
.page-content .pw-training .pw-chart-grid .pw-empty { min-height: 64px; }
.page-content .pw-chart-grid > .pw-panel { margin: 0; min-height: 0; align-self: start; }
.page-content .launch-log { min-height: 72px; max-height: 220px; }
.page-content .wizard-body { min-height: 0; padding: 12px 0; }
.page-content .fairino-workspace-cards .panel { min-height: 0; }
.page-content .adapter-placeholder { padding: var(--card-padding); }
.page-content .robot-workspace-art { height: 150px; overflow: hidden; margin-bottom: var(--layout-gap); }
.page-content .robot-workspace-art .robot-artwork { width: 100%; height: 100%; object-fit: cover; }

/* The page title starts at the same gutter, including upload and asset pages. */
.page-content .asset-header { padding: 0; border: 0; border-radius: 0; background: transparent; }
.page-content .asset-header .page-toolbar { margin: 0 0 var(--layout-gap); }
.page-content .asset-header .page-toolbar p { max-width: none; }
.page-content .asset-main { display: grid; gap: var(--layout-gap); align-content: start; }
.page-content .asset-data-panel { margin-top: 0; }
.page-content .asset-workspace { grid-template-columns: minmax(0, 1fr); }
.page-content .asset-sidebar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--layout-gap); align-items: start; }
.page-content .asset-sidebar .panel { padding: var(--card-padding) !important; }
.page-content .asset-sidebar h2 { white-space: normal; }
.page-content .asset-category-chart { flex-direction: row; }
.page-content .asset-legend { min-width: 0; }
.page-content .asset-data-panel .table-wrap { max-height: none; }

/* Share rows between input, queue and supporting content, rather than placing
   two independent stacks beside each other. DOM order stays task-first. */
.page-content .upload-workspace { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-gap); }
.page-content :is(.upload-main, .upload-aside) { display: contents; }
.page-content .upload-main > .panel:first-child {
  grid-column: 1 / -1; padding: 0; border: 0; box-shadow: none; background: transparent;
}
.page-content .upload-workspace .panel { margin: 0; }
.page-content .upload-main > .panel:first-child .upload-hero { margin-top: var(--layout-gap); }
.page-content .upload-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.page-content .upload-rules li { margin: 0; }
.page-content .upload-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.page-content .upload-meta-col { display: contents; }
.page-content .upload-field.notes { grid-column: span 2; }
.page-content .upload-drop { padding: 12px; }
.page-content .upload-field textarea { height: 96px; }

/* Long configuration forms use the available width. Short supporting cards
   keep their natural height below, without stretching to the form. */
.page-content[data-page=exports] > .pw-columns { grid-template-columns: minmax(0, 1fr); }
.page-content[data-page=exports] > .pw-columns > div { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.page-content[data-page=exports] .pw-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-content[data-page=exports] .pw-mapping { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) minmax(0, 1fr) 20px minmax(0, 1fr); }
.page-content[data-page=exports] .pw-capabilities { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.page-content .pw-device-top { grid-template-columns: minmax(0, 1fr); }
.page-content .pw-device-top > .pw-panel { display: flex; align-items: center; gap: 24px; }
.page-content .pw-device-top > .pw-panel > .section-head { flex: 0 1 360px; margin: 0; border: 0; padding: 0; }
.page-content .pw-device-top .pw-status-grid { flex: 1; margin: 0; }
.page-content .pw-device-brands { align-items: start; align-self: start; }
.page-content .pw-device-brand { min-height: 92px; }
.page-content .pw-device-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-content .pw-device-layout > div:first-child { grid-column: 1 / -1; }
.page-content .pw-device-layout > aside { display: contents; }
.page-content #connection-settings-form .form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items: start; gap: 16px; }
.page-content #connection-settings-form fieldset {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 12px 24px; align-items: start;
}
.page-content #connection-settings-form fieldset > .form-grid { grid-column: 1; grid-row: 1 / span 7; }
.page-content #connection-settings-form fieldset > :not(.form-grid) { grid-column: 2; margin: 0; }
.page-content .pw-device-layout .pw-preview:not(:has(img)) { min-height: 96px; }

/* Keep the inference test and service output close to the model form, even
   when no model is deployed. All existing panels remain in the reading order. */
.page-content .pw-columns:has(#pi-checkpoint) {
  grid-template-areas: "configuration configuration" "services test" "log test";
}
.page-content .pw-columns:has(#pi-checkpoint) > div { display: contents; }
.page-content .pw-columns:has(#pi-checkpoint) > div:first-child > :first-child { grid-area: configuration; }
.page-content .pw-columns:has(#pi-checkpoint) > div:first-child > :last-child { grid-area: services; }
.page-content .pw-columns:has(#pi-checkpoint) > div:last-child > :first-child { grid-area: test; }
.page-content .pw-columns:has(#pi-checkpoint) > div:last-child > :last-child { grid-area: log; }
.page-content .pw-columns:has(#pi-checkpoint) .pw-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-content .pw-columns:has(#pi-checkpoint) .pw-form > .wide { grid-column: span 2; }

/* Preserve equal-height annotation panels and independent list scrolling. */
.page-content .pw-annotation > .pw-columns { align-items: stretch; }
.page-content .pw-annotation > .pw-columns > .pw-panel { align-self: stretch; }
.page-content .pw-annotation > .pw-heading { min-height: 55px; }
.page-content .pw-annotation > .pw-banner { margin-bottom: var(--layout-gap); }

/* Pack the schema and trajectory beside the preview. Short schema tables keep
   their natural height instead of stretching to the media card. */
.page-content[data-page=lerobot] > .pw-columns > div:first-child { display: contents; }
.page-content[data-page=lerobot] > .pw-columns > div:last-child { grid-column: 1 / -1; }
.page-content[data-page=lerobot] .pw-panel:has(> .pw-compat) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px 24px;
}
.page-content[data-page=lerobot] .pw-panel:has(> .pw-compat) > .section-head { grid-column: 1 / -1; margin: 0; }
.page-content[data-page=lerobot] .pw-compat { grid-column: 1; grid-row: 2 / span 2; }
.page-content[data-page=lerobot] .pw-compat + h4 { grid-column: 2; margin: 0; }
.page-content[data-page=lerobot] .pw-panel:has(> .pw-compat) > .pw-capabilities {
  grid-column: 2; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.page-content[data-page=lerobot] .pw-panel:has(> .pw-compat) > .pw-subtle { grid-column: 1 / -1; margin: 0; }
.page-content .pw-lerobot-grid {
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: var(--layout-gap); align-items: start;
}
.pw-lerobot-grid > div {
  display: grid; gap: var(--layout-gap); min-width: 0;
  align-items: start; align-content: start;
}
.page-content .pw-lerobot-grid .pw-panel { margin: 0; }
.pw-lerobot-grid[data-tab=overview] > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "schema media" "trajectory media";
}
.pw-lerobot-grid[data-tab=overview] > div > :first-child { grid-area: schema; }
.pw-lerobot-grid[data-tab=overview] > div > :nth-child(2) { grid-area: media; }
.pw-lerobot-grid[data-tab=overview] > div > :last-child { grid-area: trajectory; }
.page-content .pw-lerobot-grid .table-wrap { max-height: 350px; overflow: auto; }
.page-content .pw-lerobot-grid[data-tab=overview] .table-wrap { max-height: 220px; }
.page-content .pw-lerobot-grid .pw-table { min-width: 420px; }
.page-content .pw-lerobot-grid .pw-table :is(th, td) { padding: 8px; }
.page-content .pw-lerobot-grid .pw-preview { min-height: 160px; }
.page-content .pw-lerobot-grid .pw-preview img { max-height: 240px; }
.page-content .pw-lerobot-grid .pw-tree { max-height: 460px; }
.page-content .pw-lerobot-grid .pw-actions > button { flex: 0 1 auto; }

/* Full-width settings form, then two secondary cards on one row. */
.page-content[data-page=settings] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-gap); align-content: start; }
.page-content[data-page=settings] > .panel { margin: 0; }
.page-content[data-page=settings] > .panel:first-child { grid-column: 1 / -1; }
.page-content[data-page=settings] #service-settings-form .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Shared controls: original actions and IDs keep their existing handlers. */
.page-content button, .robot-confirm-dialog button, .upload-dialog button, .safety-actions button,
.safety-notice button {
  min-height: 36px; max-width: 100%; padding: 7px 14px;
  border: 1px solid var(--ui-input-border); border-radius: 6px;
  background: var(--panel); color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.5;
  vertical-align: middle;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.page-content :is(a.primary, a.secondary) {
  min-height: 36px; padding: 7px 14px; font-size: 13px; line-height: 1.5;
  border-radius: 6px; border-color: var(--ui-input-border);
}
.page-content :is(button, a.primary, a.secondary):hover,
.robot-confirm-dialog button:hover, .upload-dialog button:hover, .safety-actions button:hover {
  filter: none; transform: none; border-color: var(--blue); background: var(--ui-hover);
}
:is(.page-content, .robot-confirm-dialog, .global-safety-bar, .upload-dialog) .primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ui-primary); border-color: var(--ui-primary); color: #fff;
  box-shadow: 0 1px 2px #15274712;
}
:is(.page-content, .robot-confirm-dialog, .global-safety-bar, .upload-dialog) .primary:hover {
  background: #1858c5; border-color: #1858c5; color: #fff;
}
:is(.page-content, .robot-confirm-dialog, .global-safety-bar, .upload-dialog) .danger {
  background: var(--ui-danger); border-color: var(--ui-danger); color: #fff;
}
:is(.page-content, .robot-confirm-dialog, .global-safety-bar, .upload-dialog) .danger-outline {
  background: var(--panel); border-color: var(--ui-danger-text); color: var(--ui-danger-text);
}
:is(.page-content, .robot-confirm-dialog, .global-safety-bar, .upload-dialog) :is(.danger, .danger-outline):hover {
  background: var(--ui-danger); border-color: var(--ui-danger); color: #fff;
}
:is(.page-content, .robot-confirm-dialog, .global-safety-bar, .upload-dialog) button:disabled {
  opacity: 1; color: var(--detail-text); background: var(--ui-subtle);
  border-color: var(--ui-border); box-shadow: none; cursor: not-allowed;
}
.page-content :is(.button-row, .pw-actions) { gap: 8px; align-items: center; }
.page-content .pw-actions { justify-content: flex-end; align-items: flex-end; }
.page-content .pw-actions > button { flex: 0 1 auto; }
.page-content :is(.button-row, .pw-actions) > :not(.danger, .danger-outline)
  + :is(.danger, .danger-outline),
.page-content :is(.button-row, .pw-actions) > :is(.danger, .danger-outline) + .primary {
  margin-inline-start: 8px;
}
.page-content :is(.text-link, .pw-link, .table-detail) {
  min-height: 28px; padding: 4px 6px; border-color: transparent;
  background: transparent; color: var(--ui-primary); box-shadow: none;
}
.page-content .asset-name-link {
  min-height: 28px; max-width: 180px; padding: 2px 0; border: 0;
  background: transparent; color: var(--text); font-size: 13px; font-weight: 600;
  text-align: left; box-shadow: none;
}
.page-content .asset-name-link:hover { color: var(--ui-primary); background: transparent; text-decoration: underline; }
.page-content .asset-row-actions { gap: 6px; }
.page-content .asset-row-actions button { width: 32px; height: 32px; min-height: 32px; padding: 6px; }
.page-content :is(.pw-tabs, .period-tabs, .fairino-workspace-tabs) button {
  min-height: 32px; padding: 6px 12px; border: 1px solid transparent;
  background: transparent; color: var(--detail-text); box-shadow: none;
}
.page-content :is(.pw-tabs, .period-tabs, .fairino-workspace-tabs) button.active {
  color: var(--ui-primary); background: var(--ui-selected); border-color: var(--ui-border);
}
.page-content .pw-tabs { gap: 4px; max-width: 100%; overflow-x: auto; }
.page-content .pw-tabs button { flex: 0 0 auto; white-space: nowrap; }
.page-content .asset-legend button, .page-content .asset-quality-bars button {
  min-height: 28px; padding: 2px 0; border: 0; background: transparent;
}
.page-content .wizard-step-card { padding: 10px; }
.page-content .pw-thumbnails button { padding: 2px; }
.page-content .jog { min-height: 36px; padding: 4px; }
:is(.page-content, .robot-confirm-dialog, .global-safety-bar, .upload-dialog) button[aria-busy=true]::after {
  content: ''; display: inline-block; width: 12px; height: 12px; margin-inline-start: 8px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  vertical-align: middle; animation: control-pending .8s linear infinite;
}
@keyframes control-pending { to { transform: rotate(360deg); } }
.page-content .status-pill {
  display: inline-flex; align-items: center; min-height: 24px;
  padding: 3px 8px; font-size: 12px; font-weight: 500; line-height: 1.4;
  color: var(--detail-text); background: var(--ui-subtle);
}
.page-content .status-pill.green { color: #16724f; background: #e8f8ef; }
.page-content .status-pill.orange { color: #8c590d; background: #fff4dd; }
.page-content .status-pill.red { color: #b42d46; background: #ffedf1; }
.page-content .status-pill.blue { color: #215cc4; background: #eaf2ff; }
body.dark .page-content .status-pill.green { color: #8ee1b2; background: #17483c; }
body.dark .page-content .status-pill.orange { color: #ffd08a; background: #44351f; }
body.dark .page-content .status-pill.red { color: #ffb1bc; background: #492c3a; }
body.dark .page-content .status-pill.blue { color: #a7ccff; background: #213d63; }

/* Form labels, editable surfaces and parameter groups share one rhythm. */
.page-content :is(.form-grid, .form-stack, .pw-form) label {
  font-size: 13px; color: var(--detail-text); gap: 8px;
}
.page-content :is(.form-grid, .form-stack, .pw-form, .pw-filter, .asset-filters)
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea) {
  min-width: 0; border: 1px solid var(--ui-input-border); border-radius: 6px;
  padding: 9px 12px; margin-top: 0;
  font-family: inherit; font-size: 13px; line-height: 1.5;
  background: var(--panel); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.page-content .upload-field { grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
.page-content .upload-field > span { font-size: 13px; color: var(--detail-text); }
.page-content .upload-field :is(input, select, textarea) {
  min-height: 40px; border: 1px solid var(--ui-input-border); border-radius: 6px;
  padding: 9px 12px; font-family: inherit; font-size: 13px; background: var(--panel); color: var(--text);
}
.page-content .upload-input-action input { border: 0; border-radius: 0; }
.page-content :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
.page-content :is(input, textarea)::placeholder { color: var(--detail-text); opacity: .8; }
.page-content :is(input, textarea)[readonly] { background: var(--ui-subtle); color: var(--detail-text); }
.page-content input[type=checkbox], .page-content input[type=radio] { accent-color: var(--ui-primary); }
.page-content .pi-config-group {
  min-width: 0; padding: 16px; margin: 20px 0;
  border: 1px solid var(--ui-border); background: var(--ui-subtle); border-radius: 8px;
}
.page-content .pi-config-group legend { color: var(--text); padding: 0 8px; font-size: 13px; font-weight: 600; }
.page-content .pw-training .pw-form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; }
.page-content .pw-training .pw-form > .wide > label { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.page-content .pw-training .pw-panel:has(#training-backend) > .pw-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-content .pw-training .pw-panel:has(#training-backend) > .pw-form > .wide { grid-column: auto; }
.page-content .pw-training .pi-config-group .pw-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-content .pw-training .pi-config-group:has(#training-epochs) .pw-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-content .section-head > :is(h2, h3), .page-content .panel > h2 {
  font-size: 15px; line-height: 1.5; font-weight: 600;
}
.page-content .panel > .section-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.page-content .pw-footer { flex-wrap: wrap; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.page-content .pw-filter { align-items: flex-end; gap: 12px; padding: 12px; }
.page-content details > summary { cursor: pointer; font-size: 13px; line-height: 1.7; padding-block: 8px; }

/* Every native table uses the same visual and keyboard-readable structure. */
.page-content .table-wrap {
  max-height: 480px; overflow: auto; isolation: isolate;
  border: 1px solid var(--ui-border); border-radius: 8px; overscroll-behavior: contain;
}
.page-content table { font-size: 13px; line-height: 1.5; border-spacing: 0; }
.page-content table :is(th, td) { padding: 12px 14px; vertical-align: middle; }
.page-content table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--ui-subtle); color: var(--detail-text); font-weight: 600; font-size: 12px;
  border-bottom: 1px solid var(--ui-border);
}
.page-content table td { border-bottom: 1px solid var(--line); color: var(--text); }
.page-content table tbody tr { --row-surface: var(--panel); background: var(--row-surface); }
.page-content table tbody tr:is(:hover, :focus-within) { --row-surface: var(--ui-hover); }
.page-content table tbody tr.selected { --row-surface: var(--ui-selected); }
.page-content table tbody tr td { background: var(--row-surface); }
.page-content table tbody tr:is(:hover, :focus-within) > td { background: var(--ui-hover); }
.page-content table tbody tr.selected > td { background: var(--ui-selected); }
.page-content table tbody tr:last-child td { border-bottom: 0; }
.page-content table [data-column-kind=number], #abb-telemetry-rows td:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums;
}
.page-content table [data-column-kind=actions] { text-align: right; white-space: nowrap; }
.page-content table td[data-column-kind=actions] button { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.page-content .asset-table [data-column-kind=actions] {
  position: sticky; right: 0; min-width: 128px; z-index: 1;
  box-shadow: -1px 0 var(--ui-border);
}
.page-content .asset-table th[data-column-kind=actions] { z-index: 3; }
.page-content .asset-table .asset-row-actions { justify-content: flex-end; }
.page-content .asset-table td strong { font-size: 13px; }
.page-content .asset-table td small { font-size: 12px; line-height: 1.5; }
.page-content .asset-table { table-layout: fixed; min-width: 1280px; }
.page-content .asset-table th:nth-child(1) { width: 44px; }
.page-content .asset-table th:nth-child(2) { width: 260px; }
.page-content .asset-table th:nth-child(3) { width: 140px; }
.page-content .asset-table th:nth-child(4) { width: 120px; }
.page-content .asset-table th:nth-child(5) { width: 144px; }
.page-content .asset-table th:nth-child(6) { width: 100px; }
.page-content .asset-table th:nth-child(7) { width: 112px; }
.page-content .asset-table th:nth-child(8) { width: 120px; }
.page-content .asset-table th:nth-child(9) { width: 96px; }
.page-content .asset-table th:nth-child(10) { width: 144px; }
.page-content .asset-table td { overflow: hidden; text-overflow: ellipsis; }
.page-content .asset-table :is(th, td):first-child { text-align: center; padding-inline: 8px; text-overflow: clip; }
.page-content .asset-table input[type=checkbox] { width: 16px; height: 16px; margin: 0; }
.page-content .asset-robot-cell { min-width: 0; }
.page-content .asset-robot-cell > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-content .asset-table [data-column-kind=actions] { min-width: 144px; padding-inline: 8px; }
.page-content .asset-filters { padding: 16px; gap: 12px; background: var(--ui-subtle); }
.page-content .asset-filters > label { font-size: 12px; }
.page-content .asset-filters > button { height: 40px; }
.page-content .asset-bulk-actions { padding: 12px 16px; }
.page-content .pw-empty span { max-width: 40ch; text-align: center; line-height: 1.7; }
.page-content .table-wrap .empty { padding: 36px 20px; text-align: center; white-space: normal; font-size: 13px; }
.page-content .pw-annotation-list > .pw-scrolling { max-height: none; }
.dataset-modal-backdrop { z-index: 60; }
.upload-dialog {
  position: fixed; inset: 0; display: block; margin: auto;
  width: min(650px, calc(100vw - 32px)); height: fit-content; max-height: 85vh;
  padding: 0; overflow: auto; border: 1px solid var(--ui-border); border-radius: 10px;
  background: var(--panel); color: var(--text); box-shadow: 0 20px 60px #0004;
}
.upload-dialog:not([open]) { display: none; }
.upload-dialog::backdrop { background: #10234780; }
.upload-dialog article { width: 100%; max-height: none; overflow: visible; padding: 24px; border-radius: 0; }
.upload-dialog .section-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); gap: 16px; }
.upload-dialog h2 { font-size: 20px; line-height: 1.5; }
.upload-dialog pre { color: var(--text); background: var(--ui-subtle); font-size: 12px; line-height: 1.7; }
.upload-dialog button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Program adaptation belongs to the existing ABB workflow. Long sources and
   version checks open in dialogs so the device page keeps its compact rhythm. */
.rapid-toolbar { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(100px, 1fr) auto; gap: 12px; align-items: end; }
.rapid-program-panel fieldset, .rapid-dialog fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
.rapid-program-panel label, .rapid-dialog label { min-width: 0; display: grid; gap: 8px; font-size: 13px; color: var(--detail-text); }
.rapid-program-panel select, .rapid-dialog :is(input:not([type=checkbox]), select, textarea) { width: 100%; min-width: 0; }
.rapid-program-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.rapid-program-summary > div { min-width: 0; padding: 12px; background: var(--ui-subtle); border-radius: 6px; }
.rapid-program-summary small, .rapid-program-summary strong { display: block; overflow-wrap: anywhere; }
.rapid-program-summary small { font-size: 12px; margin-bottom: 4px; color: var(--detail-text); }
.rapid-program-summary strong { font-size: 13px; font-weight: 500; }
.rapid-check-list { padding-left: 20px; font-size: 13px; line-height: 1.7; }
.rapid-check-list li { margin: 8px 0; overflow-wrap: anywhere; }
.rapid-active-badge a { margin-left: 8px; }
.rapid-dialog { position: fixed; inset: 0; margin: auto; width: min(1180px, calc(100vw - 32px)); max-width: none; max-height: 90vh; padding: 20px; overflow: auto; color: var(--text); background: var(--panel); border: 1px solid var(--ui-border); border-radius: 10px; box-shadow: 0 20px 60px #0004; }
.rapid-dialog:not([open]) { display: none; }
.rapid-dialog::backdrop { background: #10234780; }
.rapid-dialog > .section-head { position: sticky; top: -20px; z-index: 2; margin: -20px -20px 16px; padding: 20px; background: var(--panel); border-bottom: 1px solid var(--ui-border); }
.rapid-program-panel select, .rapid-dialog :is(input:not([type=checkbox]):not([type=file]), select) { min-height: var(--control-height); padding: 9px 12px; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--ui-input-border); border-radius: 6px; }
.rapid-dialog label:has(> input[type=checkbox]) { display: flex; align-items: flex-start; gap: 8px; }
.rapid-dialog input[type=checkbox] { flex: 0 0 auto; margin-top: 4px; }
.rapid-dialog .pw-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.rapid-dialog .button-row > input { flex: 1 1 240px; width: auto; }
.rapid-dialog .pw-form label { grid-column: auto; }
.rapid-dialog h2 { font-size: 20px; line-height: 1.5; margin: 0; }
.rapid-dialog h3 { font-size: 15px; line-height: 1.5; margin: 0 0 12px; }
.rapid-dialog .rapid-editor-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ui-border); }
.rapid-dialog textarea { padding: 10px 12px; background: var(--panel); color: var(--text); border: 1px solid var(--ui-input-border); border-radius: 6px; font: inherit; line-height: 1.6; }
.rapid-dialog #rapid-source-text { min-height: 220px; margin-top: 4px; font: 12px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 4; }
.rapid-dialog #rapid-source-select { margin-bottom: 12px; }
.rapid-dialog .rapid-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.rapid-dialog .rapid-analysis { margin-top: 16px; padding: 16px; background: var(--ui-subtle); border-radius: 8px; }
.rapid-dialog .rapid-entry-help, .rapid-dialog .rapid-entry-origin { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: 7px; background: var(--ui-subtle); }
.rapid-dialog .rapid-entry-origin { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.rapid-dialog #rapid-references > .section-head { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.rapid-dialog #rapid-references > .section-head p { max-width: 68ch; margin-bottom: 0; }
.rapid-dialog .rapid-reference-list { display: grid; gap: 12px; }
.rapid-dialog .rapid-reference-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ui-border); }
.rapid-dialog [data-action-labels="true"] .rapid-reference-row { grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr) auto; }
.rapid-dialog .rapid-reference-row:last-child { border-bottom: 0; padding-bottom: 0; }
.rapid-dialog .rapid-reference-row > label { min-width: 0; margin: 0; }
.rapid-dialog .rapid-reference-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rapid-dialog .rapid-reference-primary { padding: 7px 10px; border-radius: 5px; background: var(--ui-subtle); color: var(--text); font-size: 12px; }
.rapid-dialog .rapid-reference-summary { overflow-wrap: anywhere; }
.rapid-dialog .rapid-call-tree { display: grid; gap: 6px; padding-left: 24px; }
.rapid-dialog .rapid-call-tree li { padding-left: calc(var(--rapid-depth, 0) * 12px); }
.rapid-dialog .rapid-call-tree code { color: var(--text); font-variant-numeric: tabular-nums; }
.rapid-dialog .rapid-source-changes { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: 7px; background: var(--ui-subtle); }
.rapid-dialog .rapid-source-changes h3 { margin-bottom: 8px; }
.rapid-dialog .rapid-source-changes pre { max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.rapid-dialog pre { max-height: 280px; padding: 12px; border: 1px solid var(--ui-border); border-radius: 6px; background: var(--panel); }
.rapid-site-label { margin: 16px 0; line-height: 1.7; }
.rapid-dialog .section-head > button { flex-shrink: 0; }
@media (max-width: 1100px) {
  .rapid-dialog .pw-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rapid-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rapid-toolbar > .button-row { grid-column: 1 / -1; }
  .rapid-program-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .rapid-dialog { width: calc(100vw - 20px); max-height: 94vh; padding: 16px; }
  .rapid-dialog > .section-head { top: -16px; margin: -16px -16px 16px; padding: 16px; }
  .rapid-toolbar, .rapid-program-summary { grid-template-columns: minmax(0, 1fr); }
  .rapid-dialog .pw-form { grid-template-columns: minmax(0, 1fr); }
  .rapid-dialog .rapid-entry-origin { align-items: stretch; flex-direction: column; }
  .rapid-dialog .rapid-reference-row { grid-template-columns: minmax(0, 1fr); }
  .rapid-dialog [data-action-labels="true"] .rapid-reference-row { grid-template-columns: minmax(0, 1fr); }
  .rapid-dialog .rapid-dialog-actions > button { flex: 1; }
}
.topbar .icon-button { width: 32px; height: 32px; border: 1px solid transparent; }
.topbar .icon-button:hover { background: var(--ui-hover); border-color: var(--ui-border); transform: none; }
.topbar .icon-button .ui-icon { width: 19px; height: 19px; }
.global-search > span { display: inline-flex; align-items: center; }
.global-search > span .ui-icon { width: 16px; height: 16px; }
.global-search input { font-size: 12px; }

@media (max-width: 1450px) {
  .page-content .asset-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-content .asset-category-chart { align-items: center; }
  .page-content .asset-sidebar .asset-legend { width: auto; flex: 1; }
  .page-content .upload-rules { grid-template-columns: minmax(0, 1fr); }
  .page-content .upload-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-content .pw-training .pw-panel:has(#training-backend) > .pw-form,
  .page-content .pw-training .pi-config-group:has(#training-epochs) .pw-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-content .pw-training .pw-panel:has(#training-backend) > .pw-form > .wide:last-child { grid-column: 1 / -1; }
  .page-content[data-page=exports] > .pw-columns > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-lerobot-grid[data-tab=overview] > div {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "schema" "media" "trajectory";
  }
}
@media (max-width: 1100px) {
  .page-content .pw-device-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-content .pw-columns { grid-template-columns: minmax(0, 1fr); }
  .page-content #connection-settings-form fieldset,
  .page-content[data-page=lerobot] .pw-panel:has(> .pw-compat) { grid-template-columns: minmax(0, 1fr); }
  .page-content #connection-settings-form fieldset > .form-grid,
  .page-content #connection-settings-form fieldset > :not(.form-grid),
  .page-content[data-page=lerobot] .pw-panel:has(> .pw-compat) > * { grid-column: 1; grid-row: auto; }
  .page-content .pw-columns:has(#pi-checkpoint) { grid-template-areas: "configuration" "services" "test" "log"; }
  .page-content .pw-columns:has(#pi-checkpoint) .pw-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-content .upload-workspace { grid-template-columns: minmax(0, 1fr); }
  .page-content .upload-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-content[data-page=exports] .pw-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-content[data-page=exports] .pw-mapping { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); }
  .page-content .pw-annotation > .pw-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-content[data-page=settings] #service-settings-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .page-content .pw-annotation > .pw-columns { grid-template-columns: minmax(0, 1fr); }
  .page-content .pw-annotation-list > .pw-scrolling { flex: auto; contain: none; max-height: 430px; }
  .page-content .pw-device-layout { grid-template-columns: minmax(0, 1fr); }
  .page-content[data-page=exports] > .pw-columns > div { grid-template-columns: minmax(0, 1fr); }
  .page-content .pw-lerobot-grid { grid-template-columns: minmax(0, 1fr); }
  .page-content .pw-lerobot-grid .pw-tree { max-height: 260px; }
}
@media (max-width: 720px) {
  .topbar { height: 64px; }
  .page-content { padding-top: 10px; }
  .page-content :is(.page-toolbar, .pw-heading, .upload-heading) { flex-wrap: wrap; }
  .page-content :is(.page-toolbar, .pw-heading, .upload-heading) h2 { font-size: 20px; }
  .page-content .asset-sidebar,
  .page-content .upload-rules,
  .page-content .upload-meta,
  .page-content .pw-training .pw-panel:has(#training-backend) > .pw-form,
  .page-content .pw-training .pi-config-group .pw-form,
  .page-content .pw-training .pi-config-group:has(#training-epochs) .pw-form,
  .page-content .pw-columns:has(#pi-checkpoint) .pw-form,
  .page-content[data-page=exports] .pw-form,
  .page-content[data-page=settings],
  .page-content[data-page=settings] #service-settings-form .form-grid { grid-template-columns: minmax(0, 1fr); }
  .page-content .pw-device-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-content .pw-device-top > .pw-panel { display: block; }
  .page-content .pw-device-top > .pw-panel > .section-head { margin-bottom: 12px; }
  .page-content .upload-field.notes,
  .page-content .pw-columns:has(#pi-checkpoint) .pw-form > .wide { grid-column: 1 / -1; }
  .page-content .pw-actions > label { flex-basis: 100%; }
  .page-content .pw-filter > label { flex-basis: 100%; }
  .page-content .pw-annotation > .pw-banner { margin-bottom: var(--layout-gap); }
  .page-content .pw-metric { flex-direction: column; gap: 8px; }
  .page-content .asset-row-actions button { width: 36px; height: 36px; min-height: 36px; }
  .page-content .pw-actions > button { flex: 1 1 auto; }
  .page-content .asset-filters { padding: 12px; }
  .page-content .pi-config-group { padding: 12px; }
  .page-content .asset-table td[data-column-kind=actions] button { min-height: 36px; }
  .page-content .asset-table [data-column-kind=actions] { position: static; box-shadow: none; }
  /* Keep the original device cards inside the narrow content column. */
  .page-content .overview-device { min-width: 0; }
  .page-content .device-title { flex-wrap: wrap; }
  .page-content .device-title strong { white-space: normal; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .platform-shell button, .robot-confirm-dialog button, .upload-dialog button, .toast { transition: none; }
  .platform-shell button:hover { transform: none; }
  :is(.page-content, .robot-confirm-dialog, .global-safety-bar, .upload-dialog) button[aria-busy=true]::after { animation: none; }
}

/* Three ABB EGM sources share the existing controls and theme. */
.egm-trajectory-panel fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.egm-plan-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.5fr) auto; align-items: end; gap: 16px; margin-bottom: 16px; }
.egm-trajectory-panel label { display: grid; gap: 8px; color: var(--detail-text); font-size: 13px; min-width: 0; }
.egm-trajectory-panel :is(input:not([type=checkbox]):not([type=file]), select, textarea),
#real-egm-tcp-settings textarea { width: 100%; min-width: 0; padding: 9px 10px; min-height: 40px; border: 1px solid var(--ui-input-border); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; font-variant-numeric: tabular-nums; }
.egm-plan-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.egm-plan-columns > * { min-width: 0; }
.egm-trajectory-panel h3 { margin: 0; font-size: 16px; }
.egm-trajectory-panel .inline { display: flex; align-items: center; gap: 8px; }
.egm-replay-source, .egm-frame-notice { padding: 16px; margin-bottom: 16px; background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: 8px; }
.egm-replay-source .form-grid { margin: 12px 0; }
.egm-frame-notice p { margin: 8px 0 12px; color: var(--detail-text); font-size: 13px; }
.egm-plan-table { max-height: 420px; overflow: auto; }
.egm-plan-table table { min-width: 850px; }
.egm-plan-table th { position: sticky; top: 0; z-index: 1; }
.egm-plan-table input { min-width: 76px; }
.egm-plan-table td { padding: 6px; }
.egm-plan-pagination { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.egm-plan-pagination > span { margin-right: auto; font-size: 12px; color: var(--detail-text); }
.egm-preflight-actions { margin: 12px 0; }
.egm-preflight-summary { padding: 16px; border: 1px solid var(--ui-border); background: var(--ui-subtle); border-radius: 8px; }
.egm-preflight-summary p { margin: 8px 0; font-size: 13px; overflow-wrap: anywhere; }
.egm-trajectory-chart { width: 100%; height: 180px; color: var(--detail-text); }
.egm-chart-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; }
.egm-chart-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.egm-execution-bar { position: sticky; bottom: 12px; z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 16px; padding: 12px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--panel); }
.egm-execution-bar > div:first-child { flex: 1 1 220px; min-width: 0; }
.egm-execution-bar strong { display: block; font-size: 13px; margin-bottom: 8px; overflow-wrap: anywhere; }
.egm-execution-bar progress { display: block; width: 100%; height: 8px; accent-color: var(--ui-primary); }
.egm-execution-bar .button-row { gap: 16px; margin: 0; }
#real-egm-tcp-settings { margin: 16px 0; }
#real-egm-tcp-settings > .form-grid { margin-top: 12px; }
@media (max-width: 1250px) {
  .egm-plan-columns { grid-template-columns: minmax(0, 1fr); }
  .egm-plan-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .egm-plan-toolbar > .button-row { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .egm-plan-toolbar { grid-template-columns: minmax(0, 1fr); }
  .egm-execution-bar .button-row { width: 100%; }
  .egm-execution-bar .button-row > button { flex: 1; }
}