/* Hallmark · macrostructure: Workbench · variation: KPI-first drill-down · tone: austere technical · theme: studied-DNA (source: reference image) · nav: workspace rail · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) · pre-emit critique: P5 H5 E5 S5 R5 V4 */

*, *::before, *::after { box-sizing: border-box; }

html {
  width: 100%;
  height: 100%;
  overflow-x: clip;
  background: var(--bg-base);
}

.theme-dark { color-scheme: dark; }
.theme-light { color-scheme: light; }

body {
  min-width: 320px;
  min-height: 480px;
  width: 100%;
  height: 100dvh;
  margin: 0;
  overflow-y: hidden;
  overflow-x: clip;
  color: var(--text-primary);
  background: var(--bg-base);
  font: 14px/1.45 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: 0.48; cursor: not-allowed; }

.skip-link { position: fixed; z-index: 1000; top: var(--space-sm); left: var(--space-sm); padding: var(--space-sm) var(--space-md); color: var(--text-inverse); background: var(--accent); transform: translateY(-180%); transition: transform var(--duration) var(--ease); }
.skip-link:focus { transform: translateY(0); }

.noscript-banner, .offline-banner {
  position: fixed;
  z-index: 150;
  top: 64px;
  left: 50%;
  display: flex;
  width: min(460px, calc(100vw - 24px));
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 7px var(--space-md);
  border: 1px solid var(--accent-muted);
  border-radius: var(--radius-sm);
  color: var(--text-warning);
  background: var(--bg-overlay);
  text-align: center;
  overflow-wrap: anywhere;
  transform: translateX(-50%);
  font: 11px/1.4 var(--font-mono);
  letter-spacing: 0.03em;
}
.noscript-banner { top: var(--space-sm); }

.status-dot, .pulse-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: currentColor; }
.pulse-dot { color: var(--yellow); animation: pulse 1.4s ease-in-out infinite; }

.app-header {
  position: relative;
  z-index: 100;
  display: flex;
  width: 100%;
  min-width: 0;
  height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 0 var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
  overflow: hidden;
}
.brand { display: inline-flex; min-width: 0; align-items: center; text-decoration: none; }
.brand-name { overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 750; letter-spacing: 0.035em; }
.header-status { display: flex; min-width: 0; align-items: center; gap: var(--space-sm); }
.header-hostname { max-width: 180px; overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

.node-switcher { display: inline-flex; min-width: 0; height: 32px; align-items: center; gap: 6px; padding: 0 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); }
.node-switcher-dot { width: 6px; height: 6px; flex-basis: 6px; color: var(--green); }
.node-switcher[data-online="false"] .node-switcher-dot { color: var(--red); }
.node-switcher[data-online="unknown"] .node-switcher-dot { color: var(--gray); }
.node-switcher select { max-width: 138px; border: 0; color: var(--text-secondary); background: transparent; outline: 0; font: 10px/1.2 var(--font-mono); letter-spacing: 0.04em; cursor: pointer; }
.node-switcher select option { color: var(--text-primary); background: var(--bg-surface); }

.connection-chip, .badge, .count-badge { display: inline-flex; min-height: 24px; align-items: center; justify-content: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--surface-muted); font: 10px/1.2 var(--font-mono); letter-spacing: 0.05em; }
.connection-chip .status-dot, .badge .status-dot { width: 6px; height: 6px; flex-basis: 6px; }
.connection-chip[data-state="online"] { color: var(--green); border-color: var(--green); }
.connection-chip[data-state="connecting"], .connection-chip[data-state="partial"] { color: var(--yellow); border-color: var(--yellow); }
.connection-chip[data-state="offline"] { color: var(--red); border-color: var(--red); }
.badge-demo { color: var(--text-inverse); border-color: var(--accent); background: var(--accent); font-weight: 800; }
.badge-muted { color: var(--text-dim); }
.badge-up { color: var(--green); border-color: var(--green); background: var(--green-soft); }
.badge-down { color: var(--red); border-color: var(--red); background: var(--red-soft); }
.badge-degraded { color: var(--yellow); border-color: var(--yellow); background: var(--yellow-soft); }
.count-badge { min-width: 26px; color: var(--accent); border-radius: var(--radius-sm); }

.icon-button { display: inline-grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; cursor: pointer; transition: color var(--duration), background var(--duration), border-color var(--duration); }
.icon-button:hover { border-color: var(--border-strong); color: var(--accent-hover); background: var(--accent-soft); }
.icon-button:active { background: var(--surface-selected); }
.icon-button svg { width: 18px; height: 18px; }
.theme-icon-moon { display: none; }
.theme-light .theme-icon-sun { display: none; }
.theme-light .theme-icon-moon { display: block; }
.user-chip { display: flex; min-width: 36px; min-height: 36px; align-items: center; gap: var(--space-sm); }
.user-chip > svg { width: 21px; height: 21px; color: var(--text-secondary); }
.user-copy { display: grid; min-width: 0; }
.user-copy span:first-child { max-width: 150px; overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; font: 11px/1.3 var(--font-mono); }
.user-copy span:last-child { color: var(--accent); font: 10px/1.3 var(--font-mono); letter-spacing: 0.1em; }

.app-shell { display: grid; width: 100%; height: calc(100dvh - 56px); min-width: 0; min-height: 0; overflow: hidden; grid-template-columns: 216px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.dashboard-grid { display: block; width: 100%; min-width: 0; min-height: 0; padding: 12px 16px; overflow-x: clip; overflow-y: auto; scrollbar-color: var(--scroll-thumb) var(--scroll-track); transition: opacity var(--duration); grid-column: 2; grid-row: 1; }
.dashboard-workspace { display: grid; min-width: 0; min-height: 100%; align-content: start; gap: 12px; }
.dashboard-workspace:not(.workspace-overview) { grid-template-columns: minmax(0, 1fr); }
.workspace-overview { grid-template-columns: minmax(0, 1fr); }
.overview-layout { display: grid; min-width: 0; align-items: start; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.overview-widget { grid-column: 1 / -1; min-width: 0; }
.overview-widget[data-widget-size="small"] { grid-column: span 4; }
.overview-widget[data-widget-size="medium"] { grid-column: span 8; }
.overview-widget[data-widget-size="full"] { grid-column: 1 / -1; }
.overview-widget[hidden] { display: none; }
.workspace-services .column-center, .workspace-containers .column-right { grid-column: 1; }
.is-stale .dashboard-grid { opacity: 0.74; }
.is-offline #system-card { border-color: var(--red); }
.column { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.column > * { min-width: 0; max-width: 100%; }

/* Workspace navigation: a compact operational rail on desktop and drawer on touch layouts. */
.workspace-sidebar { display: flex; min-width: 0; min-height: 0; grid-column: 1; grid-row: 1 / -1; flex-direction: column; padding: 10px 8px; border-right: 1px solid var(--border); color: var(--text-secondary); background: var(--bg-deep); overflow-y: auto; }
.sidebar-backdrop { display: none; }
.sidebar-open { display: none; }
.sidebar-brand-row { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 0 4px; }
.sidebar-title { color: var(--text-dim); font-size: 10px; letter-spacing: 0.12em; }
.sidebar-collapse { display: inline-grid; width: 32px; height: 32px; place-items: center; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-dim); background: transparent; cursor: pointer; }
.sidebar-collapse:hover { border-color: var(--border-strong); color: var(--accent-hover); background: var(--accent-soft); }
.workspace-nav { display: grid; gap: 3px; padding-top: 6px; }
.workspace-nav-item { display: flex; width: 100%; min-height: 36px; align-items: center; gap: 10px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-dim); background: transparent; text-align: left; font: 10px/1.2 var(--font-mono); letter-spacing: 0.06em; cursor: pointer; }
.workspace-nav-item svg { width: 16px; height: 16px; flex: 0 0 16px; }
.workspace-nav-item:hover { color: var(--text-primary); background: var(--surface-muted); }
.workspace-nav-item.is-active, .workspace-nav-item[aria-current="page"] { border-color: var(--accent-muted); color: var(--accent-hover); background: var(--surface-selected); }
.sidebar-group-label { margin: 14px 10px 5px; color: var(--text-dim); font: 9px/1.2 var(--font-mono); letter-spacing: 0.12em; }

.panel { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); }
.panel-header { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-bottom: 1px solid var(--border-subtle); }
.panel-header.compact { min-height: 48px; }
.panel-header h1, .panel-header h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--text-primary); font-size: 15px; line-height: 1.2; letter-spacing: 0.01em; }
.panel-context { color: var(--text-dim); font: 10px/1.2 var(--font-mono); letter-spacing: 0.08em; }
.node-name { margin: 0; overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; font-size: 14px !important; }
.panel-actions, .title-with-icon { display: flex; min-width: 0; align-items: center; gap: var(--space-sm); }
.title-with-icon svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--accent); }

.health-overview { display: grid; grid-column: 1 / -1; min-height: 78px; overflow: hidden; grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(140px, 1fr)); }
.health-cell { display: grid; min-width: 0; align-content: center; gap: 4px; padding: 12px 16px; border-left: 1px solid var(--border); }
.health-cell:first-of-type { border-left: 0; }
.health-cell-primary { background: var(--surface-muted); }
.health-cell-action { width: 100%; border: 0; border-left: 1px solid var(--border); color: inherit; background: transparent; text-align: left; cursor: pointer; transition: color var(--duration) var(--ease), background var(--duration) var(--ease); }
.health-cell-action:hover { color: var(--accent-hover); background: var(--surface-selected); }
.health-cell-action:active { background: var(--accent-soft); }
.health-label { color: var(--text-dim); font: 10px/1.2 var(--font-mono); letter-spacing: 0.1em; }
.health-value { display: inline-flex; min-width: 0; align-items: center; gap: 7px; color: var(--text-primary); font-size: 14px; letter-spacing: 0.02em; }
.health-value[data-state="up"], .health-value[data-state="online"] { color: var(--green); }
.health-value[data-state="degraded"], .health-value[data-state="stale"] { color: var(--yellow); }
.health-value[data-state="down"], .health-value[data-state="offline"] { color: var(--red); }
.health-value[data-state="waiting"], .health-value[data-state="connecting"] { color: var(--text-secondary); }
.health-detail { overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.overview-action-list { display: grid; gap: 0; padding: 0 12px; }
.overview-action-item { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: transparent; }
.overview-action-item:last-child { border-bottom: 0; }
.overview-action-item[data-level="critical"] > .status-dot { color: var(--red); }
.overview-action-item[data-level="warning"] > .status-dot, .overview-action-item[data-level="degraded"] > .status-dot { color: var(--yellow); }
.overview-action-item[data-level="healthy"] > .status-dot { color: var(--green); }
.overview-action-item > .status-dot { margin-top: 5px; color: var(--text-dim); }
.overview-action-copy { display: grid; min-width: 0; gap: 3px; }
.overview-action-title { min-width: 0; overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; font: 700 12px/1.35 var(--font-mono); }
.overview-action-detail { min-width: 0; overflow-wrap: anywhere; color: var(--text-dim); font: 10px/1.4 var(--font-mono); }
.overview-action-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.overview-action-actions .text-button { min-height: 30px; padding: 4px 7px; white-space: nowrap; }
.overview-empty-state { display: flex; min-height: 70px; align-items: center; justify-content: center; gap: 8px; padding: 12px; color: var(--text-dim); text-align: center; font: 10px/1.4 var(--font-mono); }
.overview-empty-state .status-dot { color: var(--green); }
.overview-attention.is-empty .panel-header { min-height: 44px; border-bottom: 0; }
.overview-attention.is-empty .overview-empty-state { min-height: 40px; justify-content: flex-start; padding: 0 13px 12px; text-align: left; }
.overview-trend { overflow: hidden; }
.overview-trend-chart-wrap { position: relative; height: 176px; min-height: 176px; overflow: hidden; margin: 10px 12px 0; }
.overview-trend-chart-wrap canvas { width: 100% !important; height: 176px !important; }
.overview-trend-status { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; color: var(--text-dim); background: var(--bg-overlay); text-align: center; font: 10px/1.4 var(--font-mono); }
.overview-trend-status[data-level="error"] { color: var(--text-danger); }
.overview-trend-footer { display: flex; min-width: 0; justify-content: space-between; gap: 8px; padding: 9px 12px 11px; color: var(--text-dim); font-size: 10px; letter-spacing: 0.04em; }
.overview-trend-footer > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-content-widget { overflow: hidden; }
.launchpad-list, .service-groups-list, .top-containers-list, .storage-pools-list { display: grid; gap: 6px; padding: 10px 12px; }
.launchpad-item { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); }
.launchpad-link { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--text-secondary); text-decoration: none; }
.launchpad-link:hover, .launchpad-link:focus-visible { color: var(--accent-hover); }
.launchpad-link svg { width: 15px; height: 15px; flex: 0 0 15px; }
.launchpad-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px var(--font-mono); }
.launchpad-tag { color: var(--text-dim); font-size: 9px; }
.service-group-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--bg-surface); text-align: left; cursor: pointer; }
.service-group-row:hover, .service-group-row:focus-visible { border-color: var(--border-hover); background: var(--surface-selected); }
.service-group-copy { display: grid; min-width: 0; gap: 3px; }
.service-group-copy strong { overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; font: 700 11px var(--font-mono); }
.service-group-copy span { color: var(--text-dim); font: 9px var(--font-mono); }
.service-group-count { color: var(--text-dim); white-space: nowrap; font-size: 9px; }
.segmented-control { display: flex; gap: 2px; }
.segmented-control button { min-height: 28px; padding: 4px 7px; border: 1px solid var(--border-subtle); color: var(--text-dim); background: transparent; cursor: pointer; font: 9px var(--font-mono); }
.segmented-control button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.segmented-control button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.segmented-control button[aria-pressed="true"], .segmented-control button:hover { border-color: var(--accent-muted); color: var(--accent-hover); background: var(--accent-soft); }
.top-container-row { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--border-subtle); }
.top-container-row:last-child { border-bottom: 0; }
.top-container-row strong { min-width: 0; overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; font: 11px var(--font-mono); }
.top-container-row > span:last-child { color: var(--text-dim); white-space: nowrap; font-size: 9px; }
.storage-pool-row { display: grid; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); }
.storage-pool-row:last-child { border-bottom: 0; }
.storage-pool-heading, .storage-pool-meta { display: flex; min-width: 0; justify-content: space-between; gap: 8px; }
.storage-pool-heading strong { min-width: 0; overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; font: 11px var(--font-mono); }
.storage-pool-heading span, .storage-pool-meta { color: var(--text-dim); font-size: 9px; }
.storage-pool-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storage-pool-status-line { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--text-dim); font-size: 9px; }
.storage-pool-smart, .storage-pool-temperature { white-space: nowrap; }
.storage-pool-smart[data-status="PASSED"] { color: var(--green); }
.storage-pool-smart[data-status="FAILED"] { color: var(--red); }
.storage-pool-smart[data-status="STANDBY"], .storage-pool-smart[data-status="UNAVAILABLE"] { color: var(--gray); }
.storage-pool-smart[data-status="TIMEOUT"] { color: var(--yellow); }
.storage-pool-temperature[data-level="warning"] { color: var(--yellow); }
.storage-pool-temperature[data-level="critical"] { color: var(--red); }
#overview-storage-smart-status { min-width: 0; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operator-note-field { display: block; padding: 10px 12px 0; }
.operator-note-field textarea { display: block; width: 100%; min-height: 100px; resize: vertical; box-sizing: border-box; padding: 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--bg-recess); font: 11px/1.5 var(--font-mono); }
.operator-note-field textarea:focus { border-color: var(--accent-muted); outline: 2px solid var(--accent-soft); }
.launchpad-config-list { display: grid; gap: 6px; margin-top: 12px; }
.launchpad-config-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 7px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-recess); }
.launchpad-config-item > div { display: grid; min-width: 0; gap: 2px; }
.launchpad-config-item strong, .launchpad-config-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.launchpad-config-item strong { color: var(--text-secondary); font: 11px var(--font-mono); }
.launchpad-config-item span { color: var(--text-dim); font: 9px var(--font-mono); }
.launchpad-config-actions { display: flex; gap: 4px; }
.launchpad-config-actions button { min-height: 28px; }
.dashboard-alerts { grid-column: 1 / -1; border-color: var(--red); }
.dashboard-alerts .alerts-list { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

.history-panel { grid-column: 1 / -1; min-height: 218px; overflow: hidden; }
.history-toolbar { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px; }
.history-kind-controls, .history-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.history-resource-picker select { min-width: 130px; max-width: 220px; height: 32px; padding: 4px 24px 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--bg-surface); font: 10px/1.2 var(--font-mono); }
.range-button, .text-button { min-height: 32px; padding: 5px 9px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-dim); background: transparent; cursor: pointer; font: 10px/1.2 var(--font-mono); }
.range-button:hover, .range-button.is-active, .text-button:hover { border-color: var(--accent-muted); color: var(--accent-hover); background: var(--accent-soft); }
.history-body { padding: 9px 12px 8px; }
.history-chart-wrap { position: relative; height: 126px; min-height: 126px; overflow: hidden; }
.history-chart-wrap canvas { width: 100% !important; height: 126px !important; }
.history-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-sm); color: var(--text-dim); background: var(--bg-overlay); text-align: center; font: 11px/1.4 var(--font-mono); }
.history-overlay[data-level="error"] { color: var(--text-danger); }
.history-footer { display: grid; min-width: 0; align-items: center; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr) auto; gap: 8px 14px; padding: 8px 2px 0; color: var(--text-dim); font-size: 10px; letter-spacing: 0.04em; }
.history-footer > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-quota[data-level="warning"] { color: var(--yellow); }
.history-quota[data-level="full"] { color: var(--red); }
.history-footer .text-button { min-height: 30px; padding-block: 3px; }

.logs-panel { overflow: hidden; }
.logs-toolbar { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px 0; }
.logs-toolbar select, .logs-toolbar input { min-height: 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--bg-surface); font: 10px/1.2 var(--font-mono); }
.logs-toolbar select { max-width: 160px; padding: 4px 24px 4px 8px; }
.logs-search { position: relative; min-width: 160px; flex: 1 1 220px; }
.logs-search input { width: 100%; padding: 4px 38px 4px 34px; }
.search-shortcut { position: absolute; top: 5px; left: 6px; min-width: 20px; min-height: 20px; padding: 2px 4px; color: var(--text-dim); opacity: .9; pointer-events: none; transition: opacity var(--duration) var(--ease); }
.logs-search:has(input:not(:placeholder-shown)) .search-shortcut, .inventory-filter-input-wrap:has(input:not(:placeholder-shown)) .search-shortcut { opacity: 0; }
.inventory-filter-input-wrap { position: relative; min-width: 0; flex: 1 1 220px; }
.inventory-filter-input-wrap .inventory-filter-input { width: 100%; padding-right: 34px; }
.inventory-filter-input-wrap .search-shortcut { top: 6px; right: 7px; left: auto; }
.logs-regex-toggle { position: absolute; top: 4px; right: 4px; display: inline-grid; width: 26px; height: 24px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 3px; color: var(--text-dim); background: transparent; cursor: pointer; font: 11px/1 var(--font-mono); }
.logs-regex-toggle:hover, .logs-regex-toggle:focus-visible { border-color: var(--accent-muted); color: var(--accent-hover); background: var(--accent-soft); }
.logs-regex-toggle[aria-pressed="true"] { border-color: var(--accent-muted); color: var(--accent-hover); background: var(--surface-selected); }
.logs-match-status { min-width: 86px; color: var(--text-dim); font-size: 10px; letter-spacing: 0.05em; text-align: right; white-space: nowrap; }
.logs-note { margin: 9px 12px; color: var(--text-dim); font: 10px/1.45 var(--font-mono); }
.historical-logs-list { display: grid; min-height: 238px; max-height: min(54dvh, 650px); overflow: auto; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: var(--bg-deep); scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
.historical-log-entry { display: grid; min-width: 0; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); }
.historical-log-entry:last-child { border-bottom: 0; }
.historical-log-meta { display: grid; min-width: 0; align-content: start; gap: 3px; color: var(--text-dim); font-size: 10px; }
.historical-log-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.historical-log-line { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--text-secondary); white-space: pre-wrap; font: 11px/1.45 var(--font-mono); }
.historical-log-entry[data-severity="error"], .historical-log-entry[data-severity="fatal"], .historical-log-entry[data-severity="critical"] { box-shadow: inset 3px 0 var(--red); }
.historical-log-entry[data-severity="warn"], .historical-log-entry[data-severity="warning"] { box-shadow: inset 3px 0 var(--yellow); }
.historical-log-entry[data-match-active="true"] { outline: 1px solid var(--accent); outline-offset: -1px; background: var(--surface-selected); }
.historical-log-level { font-weight: 800; letter-spacing: 0.07em; }
.historical-log-entry[data-severity="error"] .historical-log-level, .historical-log-entry[data-severity="fatal"] .historical-log-level, .historical-log-entry[data-severity="critical"] .historical-log-level { color: var(--red); }
.historical-log-entry[data-severity="warn"] .historical-log-level, .historical-log-entry[data-severity="warning"] .historical-log-level { color: var(--yellow); }
.historical-log-entry[data-severity="info"] .historical-log-level { color: var(--green); }
.historical-log-line mark { padding: 0 1px; color: var(--text-primary); background: var(--accent-muted); }
.historical-log-actions { display: flex; align-items: flex-start; justify-content: flex-end; }
.historical-log-actions .text-button { min-height: 32px; white-space: nowrap; }
.logs-empty { min-height: 72px; margin: 0; padding: 20px 12px; color: var(--text-dim); background: var(--bg-deep); text-align: center; font: 11px/1.45 var(--font-mono); }
.logs-footer { display: flex; min-width: 0; justify-content: space-between; gap: 10px; padding: 9px 12px; color: var(--text-dim); font-size: 10px; letter-spacing: 0.05em; }
.logs-footer > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#logs-status[data-state="ready"] { color: var(--green); border-color: var(--green); background: var(--green-soft); }
#logs-status[data-state="pending"] { color: var(--yellow); border-color: var(--yellow); background: var(--yellow-soft); }
#logs-status[data-state="error"] { color: var(--red); border-color: var(--red); background: var(--red-soft); }

.system-panel { flex: 0 0 auto; }
.metric-block, .network-block { padding: 11px 14px 0; }
.metric-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-secondary); font: 11px/1.35 var(--font-mono); letter-spacing: 0.04em; }
.metric-heading strong { color: var(--text-primary); font-size: 12px; }
.metric-heading strong.is-over-limit { color: var(--red); }
.metric-detail { margin-top: 6px; color: var(--text-secondary); font-size: 11px; }
.metric-caption { overflow: hidden; color: var(--text-dim); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.warning-text { margin-top: 5px; color: var(--orange); font: 11px/1.3 var(--font-mono); }
.progress { --progress: 0; --progress-color: var(--green); height: 6px; margin-top: 6px; overflow: hidden; border-radius: var(--radius-sm); background: var(--track); }
.progress-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--progress-color); transform: scaleX(calc(var(--progress) / 100)); transform-origin: left center; }
.progress[data-level="warning"] { --progress-color: var(--yellow); }
.progress[data-level="hot"] { --progress-color: var(--orange); }
.progress[data-level="critical"] { --progress-color: var(--red); }
.progress-thin { height: 4px; }
.progress-yellow { --progress-color: var(--yellow); }
.sparkline { display: block; width: 100% !important; height: 30px !important; max-height: 30px; margin-top: 4px; }
.network-values { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; color: var(--text-secondary); font-size: 11px; }
.network-values > span { display: flex; min-width: 0; align-items: center; gap: 7px; }
.arrow { font-size: 15px; }
.arrow-down { color: var(--accent); }
.arrow-up { color: var(--green); }
.disk-io-block { margin: 12px 14px 0; padding-top: 11px; border-top: 1px solid var(--border-subtle); }
.io-row { margin-top: 8px; }
.io-row > div:first-child { display: flex; justify-content: space-between; gap: var(--space-sm); color: var(--text-dim); font: 10px/1.2 var(--font-mono); }
.system-footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 13px 14px 14px; padding-top: 11px; border-top: 1px solid var(--border-subtle); }
.system-footer div { display: grid; min-width: 0; gap: 3px; }
.system-footer span { color: var(--text-dim); font-size: 10px; letter-spacing: 0.08em; }
.system-footer strong { overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; }

/* Overview carries a dedicated 24-hour chart, so its snapshot stays transactional rather than repeating sparklines. */
.workspace-overview .sparkline { display: none !important; }

@media (min-width: 1280px), (min-width: 560px) and (max-width: 899px) {
  .workspace-overview .system-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace-overview .system-panel > .panel-header,
  .workspace-overview .system-panel > .system-footer { grid-column: 1 / -1; }
  .workspace-overview .system-panel > .metric-block { min-width: 0; padding: 10px 12px 12px; border-bottom: 1px solid var(--border-subtle); }
  .workspace-overview .system-panel > .metric-block + .metric-block { border-left: 1px solid var(--border-subtle); }
  .workspace-overview .system-panel > .network-block { min-width: 0; padding: 10px 12px 12px; border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); }
  .workspace-overview .system-panel > .disk-io-block { grid-column: span 2; min-width: 0; margin: 0; padding: 10px 12px 12px; border-top: 0; border-bottom: 1px solid var(--border-subtle); }
  .workspace-overview .system-panel > .system-footer { margin: 0; padding: 11px 12px 12px; border-top: 0; }
  .workspace-overview .system-panel .network-values { grid-template-columns: minmax(0, 1fr); gap: 5px; margin-top: 6px; }
  .workspace-overview .system-panel .network-values > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.alerts-list { display: grid; max-block-size: min(56dvh, 520px); gap: 7px; padding: 10px; overflow-y: auto; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
.alert-item { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 9px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); }
.alert-item > :last-child { min-width: 0; }
.alert-item .status-dot { margin-top: 5px; }
.alert-item[data-level="info"] .status-dot { color: var(--green); }
.alert-item[data-level="warning"] .status-dot { color: var(--yellow); }
.alert-item[data-level="error"] .status-dot, .alert-item[data-level="critical"] .status-dot { color: var(--red); }
.alert-message { min-width: 0; overflow-wrap: anywhere; color: var(--text-secondary); font: 11px/1.4 var(--font-mono); }
.alert-meta { min-width: 0; margin-top: 3px; overflow-wrap: anywhere; color: var(--text-dim); font: 10px/1.35 var(--font-mono); }

.services-panel { min-height: 0; }
.services-table-head { display: grid; min-width: 0; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.2fr) minmax(74px, 0.55fr) minmax(62px, 0.48fr) minmax(82px, 0.65fr) 36px; gap: 10px 14px; padding: 8px 13px; border-bottom: 1px solid var(--border-subtle); color: var(--text-dim); font-size: 10px; letter-spacing: 0.07em; }
.services-grid { display: grid; min-width: 0; padding: 0; }
.inventory-filter-bar { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 13px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-recess); }
.inventory-filter-input { width: min(250px, 32%); min-width: 150px; min-height: 30px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); outline: 2px solid transparent; outline-offset: 1px; color: var(--text-primary); background: var(--bg-base); font-size: 10px; letter-spacing: 0.04em; }
.inventory-filter-input::placeholder { color: var(--text-dim); opacity: 1; }
.inventory-filter-input:hover { border-color: var(--accent-muted); }
.inventory-filter-input:focus-visible { border-color: var(--accent); outline-color: var(--accent); }
.inventory-filter-controls { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; }
.inventory-filter { min-height: 28px; padding: 4px 7px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-dim); background: transparent; font: 9px/1.2 var(--font-mono); letter-spacing: 0.04em; cursor: pointer; }
.inventory-filter:hover, .inventory-filter.is-active { border-color: var(--accent-muted); color: var(--accent-hover); background: var(--accent-soft); }
.inventory-filter-count { flex: 0 0 auto; color: var(--text-dim); font-size: 9px; letter-spacing: 0.05em; white-space: nowrap; }
.inventory-filter-toggle { display: none; }
.service-card { display: grid; min-width: 0; min-height: 68px; align-items: center; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.2fr) minmax(74px, 0.55fr) minmax(62px, 0.48fr) minmax(82px, 0.65fr) 36px; gap: 10px 14px; padding: 10px 13px; border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: transparent; }
.service-card:last-child { border-bottom: 0; }
.service-card:not(.skeleton-card):hover, .service-card:not(.skeleton-card):focus-within { background: var(--surface-muted); }
.service-main { display: flex; min-width: 0; align-items: center; }
.service-status { display: inline-flex; min-width: 0; align-items: center; gap: 7px; color: var(--gray); }
.service-status[data-status="up"], .service-status[data-status="running"], .service-status[data-status="healthy"] { color: var(--green); }
.service-status[data-status="down"], .service-status[data-status="error"] { color: var(--red); }
.service-status[data-status="degraded"], .service-status[data-status="warning"] { color: var(--yellow); }
.service-name { overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; font: 700 16px/1.25 var(--font-sans); }
.service-link { display: block; min-width: 0; color: var(--text-secondary); text-decoration: none; }
.service-link:hover { color: var(--accent-hover); text-decoration: underline; }
.service-link span, .service-endpoint, .service-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-endpoint { color: var(--text-secondary); font-size: 11px; font-weight: 400; }
.service-latency { min-width: 0; overflow: hidden; color: var(--text-dim); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.service-meta { color: var(--text-dim); font: 10px/1.35 var(--font-mono); text-align: right; }
.service-menu-button { width: 36px; height: 36px; justify-self: end; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-dim); background: transparent; cursor: pointer; }
.service-menu-button:hover { border-color: var(--border-strong); color: var(--accent-hover); background: var(--accent-soft); }

.containers-list { display: flex; min-height: 122px; max-height: calc(100dvh - 360px); flex-direction: column; gap: 8px; overflow-y: auto; padding: 8px; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
.container-item { min-width: 0; padding: 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); }
.container-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.container-name { min-width: 0; overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; font: 700 12px/1.3 var(--font-mono); }
.container-state { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; color: var(--text-dim); font: 10px/1.2 var(--font-mono); }
.container-state[data-status="running"] { color: var(--green); }
.container-state[data-status="stopped"] { color: var(--gray); }
.container-state[data-status="crashed"], .container-state[data-status="error"] { color: var(--red); }
.container-subtitle, .container-ports { min-width: 0; overflow: hidden; margin-top: 4px; color: var(--text-dim); text-overflow: ellipsis; white-space: nowrap; font: 9px/1.35 var(--font-mono); }
.container-ports { display: flex; align-items: center; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.container-ports::-webkit-scrollbar { display: none; }
.container-port-copy { flex: 0 0 auto; min-height: 26px; padding: 3px 6px; border: 1px solid var(--border-subtle); border-radius: 3px; color: var(--text-secondary); background: var(--bg-recess); cursor: pointer; font: 9px/1.2 var(--font-mono); }
.container-port-copy:hover, .container-port-copy:focus-visible { border-color: var(--accent-muted); color: var(--accent-hover); background: var(--accent-soft); outline: none; }
.container-telemetry { display: grid; gap: 7px; margin-top: 9px; }
.mini-metric { display: grid; min-width: 0; gap: 4px; }
.mini-metric > div:first-child { display: flex; min-width: 0; justify-content: space-between; gap: 8px; color: var(--text-dim); font: 9px/1.25 var(--font-mono); }
.container-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.container-action { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; cursor: pointer; font: 10px/1.2 var(--font-mono); }
.container-action:hover:not(:disabled) { border-color: var(--accent-muted); color: var(--accent-hover); background: var(--accent-soft); }
.container-action-danger:hover:not(:disabled) { border-color: var(--red); color: var(--text-danger); background: var(--red-soft); }
.empty-state { display: grid; min-height: 128px; place-items: center; gap: 5px; padding: var(--space-md); color: var(--text-dim); text-align: center; font: 11px/1.4 var(--font-mono); }
.empty-state strong { color: var(--text-secondary); }
.skeleton-card, .skeleton-container, .skeleton-line { position: relative; overflow: hidden; border-color: transparent; background: var(--skeleton); }
.skeleton-card::after, .skeleton-container::after, .skeleton-line::after { position: absolute; inset: 0; width: 42%; content: ""; background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent); transform: translateX(-150%); animation: skeleton-shimmer 1.7s var(--ease) infinite; }
.is-offline .skeleton-card::after, .is-offline .skeleton-container::after, .is-offline .skeleton-line::after { animation-play-state: paused; opacity: 0; }
.skeleton-container { min-height: 112px; }
.skeleton-line { display: block; height: 13px; border-radius: var(--radius-sm); }
.skeleton-line.short { width: 58%; }

.button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; cursor: pointer; font: 10px/1.2 var(--font-mono); }
.button:hover:not(:disabled) { border-color: var(--border-hover); color: var(--text-primary); background: var(--surface-muted); }
.button-primary { color: var(--text-inverse); border-color: var(--accent); background: var(--accent); }
.button-primary:hover:not(:disabled) { border-color: var(--accent-hover); background: var(--accent-hover); }
.button-ghost { border-color: var(--border-strong); }
.button-danger { border-color: var(--red); color: var(--text-primary); background: var(--red-soft); }
.button-danger:hover:not(:disabled) { background: var(--red); }
.button-small { min-height: 32px; }

.terminal-panel { position: relative; z-index: 80; width: 100%; min-width: 0; min-height: 44px; overflow: hidden; border-top: 1px solid var(--border-strong); background: var(--terminal-background); grid-column: 1 / -1; grid-row: 2; }
.terminal-resize { position: absolute; z-index: 2; top: -4px; left: 0; width: 100%; height: 8px; cursor: ns-resize; touch-action: none; }
.terminal-resize::before { position: absolute; top: 3px; left: 50%; width: 38px; height: 2px; border-radius: var(--radius-sm); background: var(--border-strong); content: ""; transform: translateX(-50%); }
.terminal-toolbar { display: flex; min-width: 0; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; overflow: hidden; border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); }
.terminal-heading, .terminal-tools { display: flex; min-width: 0; align-items: center; gap: var(--space-sm); }
.terminal-heading { flex: 1 1 auto; overflow: hidden; }
.terminal-tools { flex: 0 0 auto; }
.terminal-heading > svg { width: 15px; height: 15px; color: var(--accent); }
.terminal-heading > span:first-of-type { color: var(--text-primary); font-size: 10px; font-weight: 700; }
.terminal-session { max-width: 360px; overflow: hidden; padding-left: 9px; border-left: 1px solid var(--border); color: var(--text-dim); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.terminal-button { display: inline-flex; min-height: 36px; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; cursor: pointer; font: 10px/1.2 var(--font-mono); }
.terminal-button[hidden] { display: none; }
.terminal-button:hover { border-color: var(--border-strong); color: var(--accent-hover); background: var(--accent-soft); }
.terminal-host-button { border-color: var(--accent-muted); color: var(--accent-hover); }
.terminal-toggle svg { width: 13px; height: 13px; transition: transform var(--duration); }
.terminal-body { width: 100%; height: var(--terminal-height); min-width: 0; min-height: 0; overflow: hidden; opacity: 1; transition: opacity var(--duration); }
.terminal { width: 100%; height: 100%; min-width: 0; overflow: hidden; padding: 7px 9px; background: var(--terminal-background); transition: transform var(--duration) var(--ease), opacity var(--duration); }
.terminal[hidden], .log-viewer[hidden] { display: none; }
.terminal .xterm { max-width: 100%; overflow: hidden; }
.log-viewer { display: flex; width: 100%; height: 100%; min-width: 0; min-height: 0; flex-direction: column; background: var(--terminal-background); }
.log-viewer-toolbar { display: flex; min-width: 0; min-height: 42px; flex: 0 0 auto; align-items: center; gap: 7px; padding: 5px 9px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); }
.log-search { min-width: 120px; flex: 1 1 260px; }
.log-search input { width: 100%; height: 32px; padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); background: var(--bg-recess); font: 11px/1.2 var(--font-mono); }
.log-search input::placeholder { color: var(--text-dim); }
.log-tool-button { min-height: 32px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; cursor: pointer; font: 10px/1.2 var(--font-mono); }
.log-tool-button:hover, .log-tool-button[aria-pressed="true"] { border-color: var(--accent-muted); color: var(--accent-hover); background: var(--accent-soft); }
.log-stats { min-width: 126px; color: var(--text-dim); text-align: right; font-size: 9px; white-space: nowrap; }
.log-output { min-width: 0; min-height: 0; flex: 1 1 auto; overflow: auto; padding: 8px 10px 16px; color: var(--terminal-foreground); background: var(--terminal-background); font-size: 12px; line-height: 1.45; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
.log-line { min-width: max-content; white-space: pre; }
.log-line.is-system { color: var(--accent-hover); }
.log-line.is-match { background: var(--accent-soft); }
.terminal-panel.terminal-mode-logs #terminal-bell { display: none; }
.terminal-panel.is-collapsed .terminal-body { height: 0; opacity: 0; }
.terminal-panel.is-collapsed .terminal { opacity: 0; transform: translateY(100%); }
.terminal-panel.is-collapsed .terminal-toggle svg { transform: rotate(180deg); }
.terminal-panel.is-collapsed .terminal-resize { display: none; }
.terminal-panel.is-collapsed .terminal-toolbar { border-bottom-color: transparent; }
.terminal-panel.is-collapsed #terminal-clear, .terminal-panel.is-collapsed #terminal-bell, .terminal-panel.is-collapsed .terminal-size-button, .terminal-panel.is-collapsed #terminal-maximize { display: none; }
.terminal-panel.terminal-state-connected { border-top-color: var(--green); }
.terminal-panel.terminal-state-disconnected, .terminal-panel.terminal-state-exited { border-top-color: var(--red); }
.terminal-panel.is-maximized, .terminal-panel.is-mobile-workbench { position: fixed; z-index: 250; inset: 56px 0 0; display: flex; flex-direction: column; }
.terminal-panel.is-maximized .terminal-body, .terminal-panel.is-mobile-workbench .terminal-body { flex: 1 1 auto; height: auto !important; }
.terminal-panel.is-maximized .terminal, .terminal-panel.is-mobile-workbench .terminal { height: 100%; }
.xterm .xterm-viewport { scrollbar-color: var(--scroll-thumb) var(--scroll-track); }

.modal { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--text-primary); background: var(--bg-overlay); }
.modal::backdrop { background: var(--shadow); opacity: 0.74; }
.modal-small { width: min(430px, calc(100vw - 24px)); }
.modal-wide { width: min(1040px, calc(100vw - 24px)); }
.modal-form { padding: var(--space-md); }
.modal-form > header, .modal-form > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modal-form > header { padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.modal-form > header h2 { margin: 0; font-size: 17px; }
.modal-form > header .icon-button { font-size: 24px; }
.modal-form > footer { justify-content: flex-end; padding-top: 15px; }
.shortcut-dialog { max-width: 440px; }
.shortcut-list { display: grid; gap: 0; margin: 12px 0 0; border-top: 1px solid var(--border-subtle); }
.shortcut-list > div { display: grid; min-width: 0; grid-template-columns: minmax(96px, 0.55fr) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
.shortcut-list dt, .shortcut-list dd { margin: 0; }
.shortcut-list dt { color: var(--text-secondary); }
.shortcut-list dd { color: var(--text-dim); font-size: 11px; }
kbd { display: inline-flex; min-width: 22px; min-height: 22px; align-items: center; justify-content: center; padding: 2px 5px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--text-secondary); background: var(--bg-recess); font: 10px/1 var(--font-mono); }
.modal-form > p { color: var(--text-secondary); font-size: 12px; }
.modal-form code, .one-time-secret code { color: var(--accent-hover); font-family: var(--font-mono); }
.modal-form label:not(.check-field), .file-picker { display: grid; min-width: 0; gap: 6px; color: var(--text-dim); font: 10px/1.3 var(--font-mono); letter-spacing: 0.06em; }
.weekday-field { min-width: 0; margin: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); font: 10px/1.3 var(--font-mono); letter-spacing: 0.06em; }
.weekday-field > div { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 6px; }
.weekday-field label { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); cursor: pointer; }
.modal-form label > span small { color: var(--text-dim); font-size: 9px; letter-spacing: 0; }
.modal-form input, .modal-form select, .file-picker input { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); background: var(--bg-recess); }
.modal-form input:hover, .modal-form select:hover { border-color: var(--border-strong); background: var(--bg-overlay); }
.modal-form input:focus, .modal-form select:focus { border-color: var(--accent); outline: none; }
.modal-form input::placeholder { color: var(--text-dim); }
.security-callout, .one-time-secret { padding: 10px; border: 1px solid var(--yellow); border-radius: var(--radius-sm); color: var(--text-warning); background: var(--yellow-soft); }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 13px; padding: 16px 0 4px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid-rules .check-field { display: flex; min-height: 38px; align-items: center; align-self: end; gap: 8px; }
.form-grid-rules .check-field input, .mode-picker input { width: 18px; min-height: 18px; margin: 0; accent-color: var(--accent); }
.form-error { margin: 10px 0 0; padding: 8px 10px; border: 1px solid var(--red); color: var(--text-danger) !important; background: var(--red-soft); font: 10px/1.4 var(--font-mono); }
.monitoring-dialog { min-height: 0; }
.monitoring-dialog > p { margin: 12px 0; }
.dialog-status { min-height: 18px; margin: 10px 0 0 !important; color: var(--text-dim) !important; }
.dialog-status[data-level="error"] { color: var(--text-danger) !important; }
.alert-center-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 8px; }
.alert-center-grid > section, .settings-section { min-width: 0; padding: 11px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); }
.subsection-header { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: 10px; }
.subsection-header h3 { margin: 0; color: var(--text-secondary); font: 11px/1.3 var(--font-mono); letter-spacing: 0.1em; }
.management-list { display: grid; max-height: 250px; min-height: 45px; gap: 7px; overflow: auto; padding-top: 6px; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
.management-empty { display: grid; min-height: 72px; place-items: center; color: var(--text-dim); text-align: center; font: 10px/1.45 var(--font-mono); }
.management-item { display: grid; min-width: 0; gap: 5px; padding: 9px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-recess); }
.management-item[data-severity="critical"], .management-item[data-status="firing"] { border-color: var(--red); }
.management-item[data-severity="warning"], .management-item[data-status="pending"] { border-color: var(--yellow); }
.management-item-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.management-item-title { min-width: 0; overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; font: 700 11px/1.35 var(--font-mono); }
.management-item-meta { overflow-wrap: anywhere; color: var(--text-dim); font: 9px/1.4 var(--font-mono); }
.management-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.management-actions button { min-height: 30px; padding: 4px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); background: transparent; cursor: pointer; font: 9px/1.2 var(--font-mono); }
.management-actions button:hover { border-color: var(--accent-muted); color: var(--accent-hover); background: var(--accent-soft); }
.management-actions a { display: inline-flex; min-height: 30px; align-items: center; padding: 4px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); text-decoration: none; font: 9px/1.2 var(--font-mono); }
.management-actions a:hover { border-color: var(--accent-muted); color: var(--accent-hover); background: var(--accent-soft); }
.management-actions button.danger:hover { border-color: var(--red); color: var(--text-danger); background: var(--red-soft); }
.integration-status { margin: 5px 0 0; color: var(--text-dim); font-size: 10px; }
.integration-status[data-configured="true"] { color: var(--green); }
.one-time-secret { display: grid; gap: 9px; margin-top: 12px; }
.one-time-secret > strong { color: var(--text-warning); font: 10px/1.3 var(--font-mono); letter-spacing: 0.08em; }
.one-time-secret code { display: block; overflow: auto; padding: 9px; border-radius: var(--radius-sm); background: var(--bg-recess); white-space: nowrap; }
.one-time-secret > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-secondary); font-size: 10px; }
.one-time-secret p, .security-callout p { margin: 0; color: var(--text-warning); font-size: 10px; }
.settings-section { margin-top: 14px; }
.settings-section > p { color: var(--text-secondary); font-size: 11px; }
.sidebar-workspaces-list { display: grid; gap: 7px; margin-top: 12px; }
.workspace-config-item { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-recess); }
.overview-widgets-config-list { display: grid; gap: 7px; margin-top: 12px; }
.overview-widget-config-item { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-recess); }
.overview-widget-size-select { min-height: 32px; padding: 4px 22px 4px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--bg-surface); font: 10px/1.2 var(--font-mono); }
.workspace-config-label { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--text-secondary); font: 10px/1.3 var(--font-mono); letter-spacing: 0.04em; }
.workspace-config-label input { width: 16px; min-height: 16px; margin: 0; accent-color: var(--accent); }
.workspace-config-label input:disabled { cursor: not-allowed; }
.workspace-config-actions { display: flex; gap: 4px; }
.workspace-config-actions button { display: inline-grid; width: 26px; min-height: 26px; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; cursor: pointer; font: 13px/1 var(--font-mono); }
.workspace-config-actions button:hover:not(:disabled) { border-color: var(--accent-muted); color: var(--accent-hover); background: var(--accent-soft); }
.workspace-config-actions button:disabled { opacity: 0.42; cursor: not-allowed; }
.workspace-config-readonly { margin: 10px 0 0; color: var(--text-dim) !important; font: 10px/1.4 var(--font-mono); }
.file-picker { margin: 14px 0 10px; }
.file-picker input { border-style: dashed; }
.file-picker input::file-selector-button { margin-right: 10px; padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--surface-muted); cursor: pointer; font: 9px/1.2 var(--font-mono); }
.mode-picker { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; padding: 10px; border: 1px solid var(--border); color: var(--text-secondary); }
.mode-picker legend { padding: 0 5px; color: var(--text-dim); font: 9px/1.2 var(--font-mono); letter-spacing: 0.08em; }
.mode-picker label { display: flex; align-items: center; gap: 6px; }
.settings-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.config-preview { min-height: 65px; margin-top: 12px; padding: 9px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-dim); background: var(--bg-recess); font: 10px/1.45 var(--font-mono); }
.config-preview dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px; margin: 0; }
.config-preview dt { color: var(--text-secondary); }
.config-preview dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.context-menu { position: fixed; z-index: 300; display: grid; min-width: 160px; padding: 5px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-overlay); }
.context-menu button { min-height: 34px; padding: 7px 10px; border: 0; border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; text-align: left; cursor: pointer; font: 10px/1.3 var(--font-mono); }
.context-menu button:hover, .context-menu button:focus-visible { color: var(--accent-hover); background: var(--accent-soft); outline: none; }
.context-menu button.danger { color: var(--text-danger); }
.widget-menu-popover { position: fixed; inset: auto; z-index: 500; min-width: 190px; margin: 0; padding: 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--text-secondary); background: var(--bg-overlay); box-shadow: 0 12px 32px rgba(0,0,0,.32); }
.widget-menu-popover::backdrop { background: transparent; }
.widget-menu-title { padding: 4px 6px 8px; color: var(--text-primary); font: 700 11px/1.3 var(--font-mono); }
.widget-menu-size { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding-bottom: 7px; border-bottom: 1px solid var(--border-subtle); }
.widget-size-option { min-height: 36px; padding-inline: 5px; }
.widget-size-option[aria-checked="true"] { border-color: var(--accent-muted); color: var(--accent-hover); background: var(--accent-soft); }
.widget-menu-action { display: block; width: 100%; margin-top: 5px; text-align: left; }
.widget-menu-trigger { flex: 0 0 auto; width: 34px; min-height: 34px; padding: 0; }
.widget-menu-trigger svg { width: 16px; height: 16px; }
.toast-region { position: fixed; z-index: 400; right: 14px; bottom: calc(var(--terminal-height) + 55px); display: grid; width: min(360px, calc(100vw - 28px)); gap: 8px; pointer-events: none; }
.toast { position: relative; padding: 10px 12px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--bg-overlay); overflow: hidden; overflow-wrap: anywhere; font: 10px/1.4 var(--font-mono); animation: toast-in var(--duration) var(--ease); }
.toast-message { display: block; }
.toast-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; transform-origin: left center; background: var(--accent); animation: toast-progress 3000ms linear both; }
.toast[data-level="error"] { border-color: var(--red); color: var(--text-danger); }
.toast[data-level="error"] .toast-progress { background: var(--red); }
.terminal-panel.is-collapsed ~ .toast-region { bottom: 52px; }
.viewer .admin-only { display: none !important; }

@keyframes pulse { 0%, 100% { opacity: 0.55; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes skeleton-shimmer { from { transform: translateX(-150%); } to { transform: translateX(280%); } }

@media (min-width: 900px) {
  body.sidebar-collapsed .app-shell { grid-template-columns: 60px minmax(0, 1fr); }
  body.sidebar-collapsed .workspace-sidebar { align-items: center; padding-inline: 10px; }
  body.sidebar-collapsed .workspace-nav-item { width: 36px; justify-content: center; padding: 0; }
  body.sidebar-collapsed .sidebar-title, body.sidebar-collapsed .sidebar-group-label, body.sidebar-collapsed .sidebar-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  body.sidebar-collapsed .sidebar-brand-row { justify-content: center; }
  body.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }
}

@media (max-width: 1279px) {
  .dashboard-workspace:not(.workspace-overview) { grid-template-columns: minmax(0, 1fr); }
  .column-left, .column-center, .column-right { grid-column: 1; }
  .containers-list { max-height: none; }
  .container-item { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(220px, 1fr) auto; column-gap: 16px; align-items: center; }
  .container-heading { grid-column: 1; }
  .container-subtitle { grid-column: 1; margin-bottom: 0; }
  .container-telemetry { grid-row: 1 / span 2; grid-column: 2; }
  .container-actions { min-width: 160px; margin-top: 0; grid-row: 1 / span 2; grid-column: 3; }
}

@media (max-width: 1099px) {
  .health-overview { min-height: 228px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-cell { border-top: 1px solid var(--border); }
  .health-cell-primary { grid-column: 1 / -1; border-top: 0; border-left: 0; }
  #overview-attention-kpi, #overview-containers-kpi { border-left: 0; }
  .health-cell-action { min-height: 72px; }
  #session-identity { display: none; }
}

@media (max-width: 899px) {
  :root { --terminal-height: 240px; }
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .dashboard-grid { grid-column: 1; grid-row: 1; padding: 10px; }
  .dashboard-workspace { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .column-left, .column-center, .column-right { grid-column: 1; }
  .history-panel .panel-header { align-items: flex-start; flex-direction: column; }
  .history-toolbar, .history-controls { width: 100%; justify-content: flex-start; }
  .inventory-filter-bar { align-items: flex-start; flex-direction: column; }
  .inventory-filter-input { width: 100%; }
  .inventory-filter-controls { width: 100%; }
  .inventory-filter { min-height: 36px; }
  .history-chart-wrap, .history-chart-wrap canvas { height: 145px !important; }
  .overview-trend-chart-wrap, .overview-trend-chart-wrap canvas { height: 160px !important; min-height: 160px; }
  .history-footer { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
  .history-footer > span:nth-child(3) { grid-column: 1; }
  .history-footer > span:nth-child(4) { grid-column: 2; }
  .history-footer .text-button { grid-column: 3; grid-row: 1 / span 2; align-self: stretch; }
  .alert-center-grid { grid-template-columns: minmax(0, 1fr); }
  .management-list { max-height: 320px; }
  .container-item { display: block; }
  .container-subtitle { margin-bottom: 8px; }
  .container-actions { min-width: 0; margin-top: 9px; }
  #terminal-size-compact, #terminal-size-default { display: none; }
  #focus-add-service, .service-link, .service-menu-button, .container-action, .terminal-button { min-height: 44px; }
  .service-menu-button, .terminal-button { min-width: 44px; }
  .icon-button { width: 44px; height: 44px; flex-basis: 44px; }
  #demo-badge { display: none; }
  .header-hostname { display: none; }
  .user-copy span:first-child { display: none; }
  .user-copy span:last-child { display: block; }
  .modal-form .button { min-height: 44px; }
  .overview-attention .panel-actions .text-button,
  .overview-trend .text-button,
  .overview-recent-changes .text-button { min-height: 44px; }
  .workspace-sidebar { position: fixed; z-index: 260; top: 0; bottom: 0; left: 0; width: min(280px, calc(100vw - 48px)); padding: 12px 8px; border-right: 1px solid var(--border-strong); transform: translateX(-102%); transition: transform var(--duration) var(--ease); }
  .sidebar-open { display: inline-grid; }
  .sidebar-collapse { display: none; }
  body.sidebar-drawer-open .workspace-sidebar { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; z-index: 255; inset: 0; display: block; background: var(--shadow); opacity: 0.64; }
}

@media (min-width: 1280px) {
  .overview-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

@media (max-width: 1279px) {
  .overview-widget[data-widget-size="small"],
  .overview-widget[data-widget-size="medium"],
  .overview-widget[data-widget-size="full"] { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
  .overview-layout { gap: 12px; }
}

@media (max-width: 599px) {
  .app-header { padding: 0 10px; }
  .brand-name { max-width: 144px; font-size: 13px; }
  .header-status { gap: 6px; }
  .header-hostname { display: none; }
  .node-switcher { max-width: 88px; padding-inline: 5px; }
  .node-switcher select { max-width: 64px; }
  .user-copy span:first-child { display: none; }
  .user-copy span:last-child { display: block; }
  .connection-chip { padding: 3px 7px; }
  .health-cell { padding: 10px; }
  .history-controls, .history-kind-controls { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .history-toolbar { align-items: stretch; }
  .history-resource-picker, .history-resource-picker select { width: 100%; max-width: none; }
  .range-button { min-width: 44px; min-height: 44px; }
  .history-footer { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .history-footer > span:nth-child(3), .history-footer > span:nth-child(4) { grid-column: 1; }
  .history-footer .text-button { grid-column: 2; grid-row: 1 / span 4; }
  .logs-toolbar { align-items: stretch; }
  .logs-toolbar .history-controls { width: 100%; justify-content: flex-start; }
  .logs-toolbar select, .logs-search { min-width: 0; max-width: none; flex: 1 1 calc(50% - 6px); }
  .logs-match-status { flex: 1 1 100%; min-width: 0; text-align: left; }
  .logs-toolbar .text-button { min-height: 44px; }
  .historical-log-entry { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .historical-log-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; }
  .logs-footer { align-items: flex-start; flex-direction: column; }
  .shortcut-list > div { grid-template-columns: minmax(76px, 0.45fr) minmax(0, 1fr); }
  .form-grid-rules { grid-template-columns: minmax(0, 1fr); }
  .form-grid-rules .full { grid-column: 1; }
  .settings-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .one-time-secret > div { align-items: stretch; flex-direction: column; }
  .health-label, .health-detail, .metric-caption, .service-status, .service-latency, .service-meta, .container-state, .container-subtitle, .container-ports, .mini-metric > div:first-child { font-size: 12px; }
  .overview-action-item { grid-template-columns: auto minmax(0, 1fr); }
  .overview-action-actions { grid-column: 2; justify-content: flex-start; }
  .overview-action-actions .text-button { min-width: 44px; min-height: 44px; }
  .services-table-head { display: none; }
  .service-card { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 10px 12px; }
  .service-main { grid-column: 1; grid-row: 1; }
  .service-endpoint { grid-column: 1 / -1; grid-row: 2; }
  .service-status { grid-column: 1; grid-row: 3; }
  .service-latency { grid-column: 2; grid-row: 3; text-align: right; }
  .service-meta { grid-column: 1 / -1; grid-row: 4; text-align: left; }
  .service-endpoint::before,
  .service-status::before,
  .service-latency::before,
  .service-meta::before { color: var(--text-dim); content: attr(data-label) ": "; font-size: 10px; }
  .service-menu-button { grid-column: 2; grid-row: 1; }
  .containers-list { max-height: none; }
  .terminal-toolbar { padding: 0 6px 0 10px; }
  .terminal-session { max-width: 30vw; }
  .terminal-button { min-width: 44px; min-height: 44px; padding: 5px 7px; }
  .terminal-button span { display: none; }
  .terminal-tools #terminal-clear, .terminal-tools #terminal-bell { font-size: 0; }
  .terminal-tools #terminal-clear::after { content: "CLR"; font-size: 9px; }
  .terminal-tools #terminal-bell::after { content: "BELL"; font-size: 9px; }
  .terminal-tools #terminal-bell, .terminal-tools #terminal-maximize { display: none; }
  .log-viewer-toolbar { flex-wrap: wrap; padding: 6px; }
  .log-search { flex-basis: calc(100% - 6px); }
  .log-search input, .log-tool-button { min-height: 44px; }
  .log-stats { min-width: 0; flex: 1 1 auto; padding-right: 4px; }
  .log-output { padding: 8px 7px 14px; font-size: 11px; }
  .form-grid { grid-template-columns: minmax(0, 1fr) 80px; }
  .modal-form > footer .button { flex: 1; }
  .toast-region { bottom: calc(var(--terminal-height) + 50px); }
  .inventory-filter-toggle { display: inline-flex; min-height: 44px; align-items: center; }
  .inventory-filter-bar[data-collapsed="true"] { display: none; }
}

@media (max-width: 420px) {
  .app-header { gap: 6px; padding-inline: 6px; }
  .header-status { gap: 4px; }
  #demo-badge, .user-chip, #nodes-open { display: none; }
  .header-hostname { max-width: 72px; }
  .node-switcher { max-width: 64px; }
  .node-switcher select { max-width: 42px; }
  .connection-chip { width: 28px; flex: 0 0 28px; padding-inline: 0; }
  .connection-chip #freshness-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .container-actions { grid-template-columns: minmax(0, 1fr); }
  .health-overview { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .health-cell, .health-cell:nth-of-type(even), .health-cell-action { min-height: 68px; border-left: 0; }
  .health-cell:not(:first-of-type) { border-top: 1px solid var(--border); }
  .health-detail { white-space: normal; }
  .brand-name { max-width: 116px; font-size: 11px; }
  .overview-trend-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 359px) {
  #theme-toggle { display: none; }
}

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

@media (forced-colors: active) {
  .panel, .service-card, .container-item, .context-menu, .terminal-panel { border: 1px solid CanvasText; }
  .status-dot { forced-color-adjust: none; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* Production operations workspaces: keep dense data grouped by decision,
   while retaining a single calm visual rhythm across SLO, fleet and maps. */
.workspace-nodes, .workspace-topology, .workspace-logs { grid-template-columns: minmax(0, 1fr) !important; }
.workspace-nodes { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr) !important; align-items: start; }
.nodes-workspace-panel, .checks-panel, .topology-panel { min-width: 0; }
.panel-status { min-height: 34px; margin: 0; padding: 8px 12px 10px; color: var(--text-dim); border-top: 1px solid var(--border-subtle); font-size: 10px; }
.panel-status[data-level="error"] { color: var(--red); }
.panel-status[data-stale="true"]::before { content: "STALE · "; color: var(--yellow); }
.slo-list[data-stale="true"], .checks-list[data-stale="true"], .topology-canvas[data-stale="true"], .timeline-list[data-stale="true"], .history-event-markers[data-stale="true"] { opacity: 0.74; }
.history-timeline .panel-context[data-stale="true"]::after { color: var(--yellow); content: " · STALE"; }

.slo-panel { overflow: hidden; }
.slo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 8px; padding: 10px; }
.slo-item { display: grid; min-width: 0; gap: 7px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); }
.slo-item-head, .slo-metric, .slo-controls { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.slo-item-head > strong { min-width: 0; overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.slo-item .badge { min-height: 20px; padding: 3px 5px; font-size: 9px; }
.slo-item .badge[data-level="up"] { color: var(--green); border-color: var(--green); background: var(--green-soft); }
.slo-item .badge[data-level="warning"] { color: var(--yellow); border-color: var(--yellow); background: var(--yellow-soft); }
.slo-item .badge[data-level="critical"] { color: var(--red); border-color: var(--red); background: var(--red-soft); }
.slo-metric > strong { color: var(--text-primary); font-size: 18px; }
.slo-metric > span, .slo-detail { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--text-dim); font-size: 10px; }
.slo-budget { margin-top: 0; }
.slo-controls { justify-content: flex-start; padding-top: 3px; border-top: 1px solid var(--border-subtle); }
.slo-controls input, .slo-controls select { width: 78px; min-height: 30px; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--bg-deep); font: 10px var(--font-mono); }
.slo-controls select { width: 52px; }
.slo-controls .text-button { min-height: 30px; margin-left: auto; padding-inline: 6px; font-size: 9px; }

.history-timeline { display: grid; gap: 7px; margin: 12px 2px 0; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.history-timeline > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.history-timeline h3 { margin: 0; color: var(--text-secondary); font: 700 11px/1.2 var(--font-mono); letter-spacing: 0.05em; }
.history-event-markers { position: relative; height: 44px; margin: 0 3px; border-bottom: 1px solid var(--border); }
.history-event-marker { position: absolute; bottom: -3px; display: grid; width: 44px; height: 44px; padding: 0; border: 0; place-items: end center; background: transparent; cursor: pointer; transform: translateX(-50%); }
.history-event-marker::after { width: 7px; height: 7px; border: 1px solid var(--accent); border-radius: 50%; background: var(--bg-deep); content: ""; }
.history-event-marker:hover::after, .history-event-marker:focus-visible::after { background: var(--accent); }
.timeline-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 6px; }
.timeline-item { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); gap: 7px; padding: 7px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); }
.timeline-item .status-dot { margin-top: 4px; color: var(--accent); }
.timeline-item[data-source="manual"] .status-dot { color: var(--yellow); }
.timeline-item strong, .timeline-item span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-item strong { color: var(--text-secondary); font-size: 11px; }
.timeline-item span, .timeline-empty { margin: 0; color: var(--text-dim); font-size: 10px; }
.operations-event-form { display: grid; grid-template-columns: 108px minmax(150px, 1fr) minmax(180px, 1.4fr) auto; gap: 7px; padding-top: 3px; }.operations-event-form label { display: grid; min-width: 0; gap: 3px; color: var(--text-dim); font: 9px var(--font-mono); letter-spacing: .05em; }.operations-event-form small { color: var(--gray); }.operations-event-form select, .operations-event-form input { min-width: 0; min-height: 31px; padding: 5px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--bg-deep); font: 10px var(--font-mono); }.operations-event-form .text-button { align-self: end; min-height: 31px; white-space: nowrap; }

.nodes-workspace-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; padding: 12px; }
.node-workspace-card { display: grid; min-width: 0; gap: 8px; padding: 11px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: inherit; background: var(--bg-surface); text-align: left; cursor: pointer; transition: border-color var(--duration), background var(--duration); }
.node-workspace-card:hover { border-color: var(--border-strong); background: var(--surface-selected); }
.node-workspace-card[data-state="offline"] { opacity: 0.72; }
.node-workspace-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.node-workspace-head > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12px var(--font-mono); }
.node-workspace-head .badge { min-height: 20px; padding: 3px 5px; font-size: 9px; }
.node-workspace-meta { color: var(--text-dim); font-size: 10px; }
.node-resource { display: grid; gap: 4px; }
.node-resource > div:first-child { display: flex; justify-content: space-between; color: var(--text-dim); font: 9px var(--font-mono); }
.node-resource strong { color: var(--text-secondary); font-weight: 600; }
.checks-list { display: grid; gap: 7px; padding: 10px; }
.check-item { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); }
.check-item .status-dot { margin-top: 4px; color: var(--green); }
.check-item[data-level="warning"] .status-dot { color: var(--yellow); }.check-item[data-level="critical"] .status-dot { color: var(--red); }.check-item[data-level="unknown"] .status-dot { color: var(--gray); }
.check-item strong, .check-item span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-item strong { color: var(--text-secondary); font-size: 11px; }.check-item span { color: var(--text-dim); font-size: 10px; }

.topology-panel { overflow: hidden; }
.topology-actions { flex-wrap: wrap; justify-content: flex-end; }
.topology-actions .icon-button { min-width: 34px; min-height: 34px; padding: 0; }
.topology-actions .panel-context { min-width: 42px; text-align: center; }
.topology-hint { margin: 0; padding: 9px 12px; color: var(--text-dim); border-bottom: 1px solid var(--border-subtle); font-size: 11px; }
.topology-scroll-hint { display: none; margin: 0; padding: 7px 12px; color: var(--text-dim); border-bottom: 1px solid var(--border-subtle); font: 10px/1.4 var(--font-mono); }
.topology-canvas { display: grid; min-height: 290px; place-items: center; padding: 12px; color: var(--text-dim); overflow: auto; }
.topology-canvas svg { width: 100%; min-width: 420px; max-height: 520px; }
.topology-canvas[data-arrange="true"] .topology-node { cursor: grab; }
.topology-canvas[data-arrange="true"] .topology-node:active { cursor: grabbing; }
.topology-edge { stroke: var(--border-strong); stroke-width: 1.4; fill: none; }.topology-edge:focus, .topology-edge:hover { stroke: var(--red); stroke-width: 2.2; cursor: pointer; }.topology-edge + * { pointer-events: auto; }
.topology-canvas marker path { fill: var(--border-strong); }.topology-node rect { fill: var(--bg-surface); stroke: var(--border-strong); stroke-width: 1; }.topology-node text { fill: var(--text-secondary); font: 11px var(--font-mono); pointer-events: none; }.topology-node { cursor: pointer; }.topology-node:hover rect, .topology-node:focus rect { stroke: var(--accent); fill: var(--surface-selected); }.topology-node[data-level="up"] rect { stroke: var(--green); }.topology-node[data-level="warning"] rect { stroke: var(--yellow); }.topology-node[data-level="critical"] rect { stroke: var(--red); }
.topology-edge-list { display: grid; gap: 6px; padding: 9px 12px; border-top: 1px solid var(--border-subtle); }
.topology-edge-item { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); }
.topology-edge-item > div { display: grid; min-width: 0; gap: 2px; }.topology-edge-item strong, .topology-edge-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.topology-edge-item strong { color: var(--text-secondary); font-size: 11px; }.topology-edge-item span { color: var(--text-dim); font-size: 10px; }.topology-edge-item .text-button { min-height: 30px; white-space: nowrap; }
.topology-form { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(120px, 1fr) auto; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border-subtle); }.topology-form label { display: grid; gap: 4px; min-width: 0; color: var(--text-dim); font: 9px var(--font-mono); letter-spacing: .05em; }.topology-form label small { color: var(--gray); }.topology-form select, .topology-form input { min-width: 0; min-height: 32px; padding: 5px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--bg-deep); font: 10px var(--font-mono); }.topology-form .button { align-self: end; min-height: 32px; }

@media (max-width: 899px) { .workspace-nodes { grid-template-columns: minmax(0, 1fr) !important; } .topology-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .topology-form .button { grid-column: span 2; } .topology-edge-item .text-button { min-height: 44px; } }
@media (max-width: 599px) { .slo-list { grid-template-columns: minmax(0, 1fr); } .nodes-workspace-grid { grid-template-columns: minmax(0, 1fr); padding: 8px; } .topology-form, .operations-event-form { grid-template-columns: minmax(0, 1fr); } .topology-form .button { grid-column: auto; min-height: 44px; } .timeline-list { grid-template-columns: minmax(0, 1fr); } .topology-scroll-hint { display: block; } }
@media (max-width: 599px) { .widget-menu-trigger { min-width: 44px; min-height: 44px; } }