/* Operator workspace: shared geometry, explicit surfaces, two appearance themes. */
:root {
  color-scheme: light;
  --canvas: #f1f3f7;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --surface-inset: #edf1f7;
  --input-surface: #ffffff;
  --text: #182338;
  --muted: #5f6f85;
  --line: #dfe5ee;
  --blue: #4257bf;
  --green: #116b53;
  --amber: #8a5a15;
  --red: #b9374d;
  --action: #4257bf;
  --action-hover: #3447a2;
  --action-text: #ffffff;
  --good-surface: #edf7f1;
  --warn-surface: #fff7e7;
  --bad-surface: #fcf0f3;
  --info-surface: #edf1fd;
  --danger-line: #eac4ce;
  --hover-surface: #edf1f7;
  --focus: #7288e6;
  --focus-halo: #4257bf24;
  --overlay: #14233e80;
  --shadow: 0 1px 3px #18233806;
  --workspace-gap: 20px;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --canvas: #11151d;
  --surface: #1b212c;
  --surface-soft: #202735;
  --surface-inset: #263043;
  --input-surface: #141b27;
  --text: #e6ebf4;
  --muted: #a6b2c7;
  --line: #343e50;
  --blue: #adbdff;
  --green: #8bdfba;
  --amber: #f2cb86;
  --red: #ffacb9;
  --action: #b3c0ff;
  --action-hover: #cbd4ff;
  --action-text: #121a2d;
  --good-surface: #17372d;
  --warn-surface: #3b301d;
  --bad-surface: #402730;
  --info-surface: #2b3549;
  --danger-line: #754052;
  --hover-surface: #2c374b;
  --focus: #a6b5ff;
  --focus-halo: #adbdff30;
  --overlay: #03060db3;
  --shadow: 0 1px 3px #00000015;
  background: var(--canvas);
  color: var(--text);
}

/* Shell and shared controls. */
body { background: var(--canvas); color: var(--text); }
main > header {
  align-items: center;
  min-height: 58px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
main > header h1 { margin-top: 4px; font-size: 25px; line-height: 1.25; }
.header-actions { align-items: center; gap: 8px; }
.header-actions > button { height: 40px; min-height: 40px; margin: 0; }
.header-actions > #theme-toggle { width: 40px; padding: 0; font-size: 23px; line-height: 1; }
.view-access { display: flex; gap: 8px; align-items: center; padding: 0 0 16px; color: var(--muted); font-size: 12px; }
.view-access:before { content: '◉'; font-size: 10px; }
.panel { min-width: 0; padding: 20px; background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.panel h2 { font-size: 16px; line-height: 1.4; }
.panel h3 { line-height: 1.5; }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.panel-grid { gap: var(--workspace-gap); margin-bottom: 20px; align-items: stretch; }
.panel-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel-grid > .panel { min-width: 0; margin-bottom: 0; }
.action-card { display: flex; flex-direction: column; }
.action-card > .actions, .action-card > a.button:last-child, .action-card > button:last-child { margin-top: auto; order: 10; }
.action-card > .actions { padding-top: 18px; }
.action-card > a.button:last-child, .action-card > button:last-child { align-self: flex-start; }
.action-note { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.toolbar, .workspace-toolbar, .inventory-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.toolbar > div, .workspace-toolbar > div, .inventory-toolbar > div { min-width: 0; }
.toolbar h2, .workspace-toolbar h2, .inventory-toolbar h2 { margin: 0; font-size: 16px; line-height: 1.4; }
.toolbar p, .workspace-toolbar p, .inventory-toolbar p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.toolbar .actions, .workspace-toolbar .actions { flex-shrink: 0; }
button, a.button, a.download-link {
  box-sizing: border-box;
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 550;
  line-height: 20px;
}
button, a.button, a.download-link { background: var(--surface); border-color: var(--line); color: var(--text); }
a.button, a.download-link { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); text-align: center; }
button:hover, a.button:hover, a.download-link:hover { background: var(--hover-surface); }
button.primary { background: var(--action); border-color: var(--action); color: var(--action-text); }
button.primary:hover { background: var(--action-hover); }
button.danger { background: var(--bad-surface); border-color: var(--danger-line); color: var(--red); }
button.danger:hover { border-color: var(--red); }
button.quiet { background: transparent; border-color: transparent; color: var(--blue); }
button.quiet:hover { background: var(--surface-inset); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
input, select, textarea { background: var(--input-surface); border-color: var(--line); color: var(--text); }
input:focus, select:focus, textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-halo); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.actions { align-items: center; gap: 10px; }
.actions > button, .actions > a { min-height: 40px; margin: 0; }
.actions > button { max-width: 100%; white-space: normal; }
td .actions { justify-content: flex-end; flex-wrap: nowrap; }
td button, td .actions > button { min-height: 34px; padding: 6px 11px; font-size: 12px; }
td .actions > button { white-space: nowrap; }
th { background: var(--surface-soft); border-color: var(--line); color: var(--muted); font-size: 11px; }
td { border-color: var(--line); line-height: 1.5; }
tbody tr:hover { background: var(--surface-soft); }
.tag { border-radius: 5px; font-size: 11px; line-height: 1.35; }
.tag.good { background: var(--good-surface); color: var(--green); }
.tag.warn { background: var(--warn-surface); color: var(--amber); }
.tag.bad { background: var(--bad-surface); color: var(--red); }
.tag.info { background: var(--info-surface); color: var(--blue); }
.tag.neutral { background: var(--surface-inset); color: var(--muted); }
.role-grid article { min-width: 0; }
.role-grid article > button { max-width: 100%; }
.release-path article { min-width: 0; display: flex; flex-direction: column; }
.release-path p { min-height: 0; }
.release-path article > button, .release-path article > .actions { margin-top: auto; order: 10; }
.release-path article > p.help { margin-bottom: 16px; }

/* A working overview: a wide operations area and a quiet context rail. */
.workspace-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  align-items: start;
  gap: var(--workspace-gap);
}
.workspace-main { min-width: 0; }
.workspace-main > .panel:last-child { margin-bottom: 0; }
.workspace-rail { display: grid; min-width: 0; gap: var(--workspace-gap); align-content: start; }
.workspace-layout > aside.workspace-rail {
  position: static;
  inset: auto;
  z-index: auto;
  width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  color: inherit;
}
.workspace-rail > .panel { margin: 0; padding: 18px; }
.workspace-rail h2, .workspace-rail h3 { margin-bottom: 14px; font-size: 14px; }
.workspace-rail p { font-size: 12px; line-height: 1.65; }
.workspace-rail .empty { padding: 18px 0; }
.workspace-rail .actions { gap: 8px; }
.workspace-rail .actions > button, .workspace-rail .actions > a { width: 100%; justify-content: flex-start; text-align: left; }
.workspace-rail .setting-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0; }
.workspace-rail .attention-item { display: block; }
.workspace-rail .attention-item .actions { margin-top: 9px; }
.workspace-rail .attention-item .actions > button { width: auto; min-height: 32px; padding: 5px 9px; font-size: 11px; }
.health-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 18px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: 10px;
  background: var(--surface);
}
.health-strip.good { border-left-color: var(--green); }
.health-strip.warn { border-left-color: var(--amber); }
.health-strip.bad { border-left-color: var(--red); }
.health-strip > div:first-child { min-width: 0; }
.health-strip h2, .health-strip h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.35; }
.health-strip p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.health-strip > .actions { flex-shrink: 0; }
.metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0 0 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.metric-strip > .stat { min-width: 0; padding: 17px 18px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.metric-strip > .stat:last-child { border-right: 0; }
.metric-strip .stat .label { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; }
.metric-strip .stat .value { margin: 8px 0 5px; font-size: 25px; line-height: 1.15; letter-spacing: -.6px; }
.metric-strip .stat .value, .stage-counts > strong, .stage-counts > span, .rail-fact > strong, .resource-cell strong { font-variant-numeric: tabular-nums; }
.metric-strip .stat small { display: block; color: var(--muted); font-size: 11px; line-height: 1.5; }
.pipeline-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.pipeline-stage { display: flex; flex-direction: column; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.pipeline-stage > p { margin: 13px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.pipeline-stage > button { align-self: flex-start; margin-top: auto; min-height: 32px; padding: 5px 8px; border-color: transparent; background: transparent; color: var(--blue); font-size: 11px; white-space: normal; }
.pipeline-stage > button:hover { background: var(--surface-inset); }
.stage-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 19px; }
.stage-heading h3 { margin: 0; font-size: 13px; font-weight: 600; }
.stage-number { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: var(--surface-inset); color: var(--muted); font-size: 10px; font-weight: 650; }
.stage-counts { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.stage-counts > strong { color: var(--text); font-size: 27px; font-weight: 600; line-height: 1.1; }
.stage-counts > span { color: var(--muted); font-size: 19px; font-weight: 500; line-height: 1.1; text-align: right; }
.stage-counts small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.5; }
.attention-list { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.attention-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.attention-item:last-child { padding-bottom: 0; border-bottom: 0; }
.attention-item:first-child { padding-top: 0; }
.attention-item > div { min-width: 0; }
.attention-item strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.5; }
.attention-item p, .attention-item small { display: block; margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.attention-item > button, .attention-item > .actions { flex-shrink: 0; }
.attention-item.bad strong { color: var(--red); }
.attention-item.warn strong { color: var(--amber); }
.rail-facts { display: grid; gap: 0; }
.rail-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.5; }
.rail-fact:first-child { padding-top: 0; }
.rail-fact:last-child { padding-bottom: 0; border-bottom: 0; }
.rail-fact > span { color: var(--muted); }
.rail-fact > strong { max-width: 60%; color: var(--text); text-align: right; font-weight: 600; overflow-wrap: anywhere; }

/* Tabs are navigation inside the workspace, not another wall of cards. */
.workspace-tabs, .inventory-tabs, .release-tabs {
  display: flex;
  gap: 0;
  align-items: stretch;
  padding: 0;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
}
.workspace-tabs > button, .inventory-tabs > button, .release-tabs > button {
  flex: 0 0 auto;
  min-height: 46px;
  margin: 0 0 -1px;
  padding: 11px 17px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
}
.workspace-tabs > button:hover, .inventory-tabs > button:hover, .release-tabs > button:hover { background: var(--surface-inset); color: var(--text); }
.workspace-tabs > button[aria-current='page'], .workspace-tabs > button[aria-selected='true'], .workspace-tabs > button.active,
.inventory-tabs > button[aria-current='page'], .inventory-tabs > button[aria-selected='true'], .inventory-tabs > button.active,
.release-tabs > button[aria-selected='true'], .release-tabs > button.active { border-bottom-color: var(--blue); background: transparent; color: var(--blue); }
.workspace-tabs > button:focus-visible, .inventory-tabs > button:focus-visible, .release-tabs > button:focus-visible { outline-offset: -4px; }
.settings-context { margin-bottom: 18px; padding: 0 0 0 14px; border-left: 2px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.7; }
.settings-context strong { color: var(--text); }
.settings-context p { margin: 0; }
.settings-context > .eyebrow { display: block; margin-bottom: 10px; }
.settings-context > button { margin-top: 16px; }

/* Dense server inventory; resources remain small, comparable and explicit. */
.inventory-toolbar { flex-wrap: wrap; }
.inventory-toolbar .inventory-tabs { margin: 0; border-bottom: 0; }
.inventory-search { margin: 0 0 18px; }
.inventory-table { padding: 0; }
.inventory-table > .inventory-search { padding: 17px 20px; margin: 0; border-bottom: 1px solid var(--line); }
.inventory-table .table-wrap { border-radius: inherit; }
.inventory-table table { width: 100%; font-size: 12px; }
.inventory-table th { padding: 12px 14px; white-space: nowrap; }
.inventory-table td { padding: 14px; vertical-align: middle; }
.inventory-table td:first-child { width: 23%; }
.inventory-table td:nth-child(2) { width: 25%; }
.inventory-table td:nth-child(3), .inventory-table td:nth-child(4), .inventory-table td:nth-child(5) { width: 8%; }
.inventory-table td:nth-child(6) { width: 12%; }
.inventory-table td:last-child { width: 16%; }
.inventory-processes > h2 { margin: 0; padding: 18px 20px 0; }
.inventory-processes > p.help { margin: 0; padding: 8px 20px 16px; }
.inventory-processes td:nth-child(1) { width: 18%; }
.inventory-processes td:nth-child(2) { width: 32%; }
.inventory-processes td:nth-child(3) { width: 18%; }
.inventory-processes td:nth-child(4) { width: 12%; }
.inventory-processes td:nth-child(5) { width: 20%; }
.inventory-name { min-width: 0; }
.inventory-name > button { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--blue); font-size: 13px; font-weight: 600; line-height: 1.5; text-align: left; }
.inventory-name > button:hover { text-decoration: underline; }
.inventory-name > small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.inventory-table td > .help { max-width: 270px; margin: 5px 0 0; font-size: 11px; line-height: 1.5; }
.resource-cell { min-width: 58px; max-width: 118px; }
.resource-cell > div { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: 10px; line-height: 1.3; }
.resource-cell > div > span { color: var(--muted); }
.resource-cell > div > strong { color: var(--text); font-size: 11px; font-weight: 550; }
progress.resource-track { display: block; width: 100%; height: 4px; border: 0; border-radius: 4px; background: var(--surface-inset); overflow: hidden; appearance: none; }
progress.resource-track::-webkit-progress-bar { border-radius: 4px; background: var(--surface-inset); }
progress.resource-track::-webkit-progress-value { border-radius: 4px; background: var(--blue); }
progress.resource-track::-moz-progress-bar { border-radius: 4px; background: var(--blue); }
.inventory-action { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 6px; }
.inventory-action > button { min-height: 34px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.inventory-table td small { color: var(--muted); }
.inventory-table-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 12px; }
.inventory-table-foot > span { margin-right: auto; }
.inventory-table-foot > button { min-height: 34px; padding: 6px 10px; font-size: 12px; }

/* Deployment: two native table rows and a single active history/configuration tab. */
.release-components { padding: 0; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.release-components > .workspace-toolbar { padding: 18px 20px; margin: 0; border-bottom: 1px solid var(--line); }
.release-components-table { width: 100%; font-size: 12px; }
.release-components-table th { padding: 11px 18px; }
.release-components-table td { padding: 17px 18px; vertical-align: middle; }
.release-components-table th:last-child { text-align: right; }
.release-component-info h3 { margin: 0 0 4px; font-size: 14px; }
.release-component-info p, .release-component-info small { display: block; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.release-component-version { min-width: 130px; }
.release-component-version strong { font-size: 13px; font-weight: 600; }
.release-component-version small, .release-component-state small { display: block; max-width: 320px; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.release-component-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: nowrap; gap: 8px; }
.release-component-actions > button { min-height: 36px; padding: 7px 11px; font-size: 12px; white-space: nowrap; }
.release-tab-panels, .release-tab-panel { min-width: 0; }
.release-tab-panel > .panel:first-child { margin-top: 0; }
.release-history .table-wrap { border-radius: 10px; }
.update-card > .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.update-card > .actions > button { width: 100%; height: auto; white-space: normal; }

/* Forms and intentional deployment confirmation. */
.filters, .report-filters { align-items: flex-end; gap: 12px; }
.filters > label { display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; flex: 1 1 160px; min-width: 140px; max-width: 260px; margin: 0; line-height: 1.5; }
.filters label > input, .filters label > select { height: 40px; margin: 0; }
.filters > button, .report-filters > button { height: 40px; min-height: 40px; align-self: flex-end; margin: 0; padding: 9px 15px; }
.filters > .error { flex-basis: 100%; margin: 0; }
.setting-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, auto); align-items: center; gap: 24px; }
.setting-row > div { min-width: 0; }
.setting-value { display: grid; grid-template-columns: minmax(90px, 1fr) 104px; align-items: center; gap: 16px; text-align: right; }
.setting-value strong { white-space: normal; overflow-wrap: anywhere; }
.setting-value > button { width: 104px; min-height: 36px; }
.backup-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 10px; }
.backup-actions > button { height: auto; min-height: 44px; white-space: normal; line-height: 1.45; }
dialog { width: min(760px, calc(100% - 32px)); max-height: 90vh; background: var(--surface); color: var(--text); border-color: var(--line); border-radius: 16px; box-shadow: 0 24px 100px #0b132440; }
dialog[data-variant='wide'] { width: min(860px, calc(100% - 32px)); }
dialog[data-variant='log'] { width: min(1180px, calc(100% - 32px)); }
dialog[data-variant='log'] .log { max-height: min(65vh, 680px); white-space: pre; overflow-wrap: normal; }
.modal-head { min-height: 72px; padding: 20px 28px; gap: 20px; background: var(--surface); border-color: var(--line); }
.modal-head h2 { font-size: 23px; line-height: 1.3; letter-spacing: -.5px; }
.modal-head > .icon { flex-shrink: 0; width: 40px; height: 40px; min-height: 40px; padding: 0; border-color: transparent; background: transparent; color: var(--muted); }
#modal-content { padding: 24px 28px 28px; }
.form-footer { align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-color: var(--line); }
.form-footer > button { min-height: 42px; min-width: 110px; margin: 0; }
.change-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; padding: 5px 20px; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.change-summary .key-value { align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.change-summary .key-value:nth-last-child(-n+2) { border-bottom: 0; }
.change-summary strong { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.change-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 24px 0; list-style: none; }
.change-steps li { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); font-size: 12px; line-height: 1.5; }
.change-steps span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.change-note { margin: 16px 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.change-note.warning { padding: 14px 16px; border: 1px solid var(--danger-line); border-radius: 10px; background: var(--warn-surface); color: var(--amber); }
.change-target { padding: 16px 18px; margin: 18px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.change-target strong, .change-target small { display: block; }
.change-target small { margin-top: 6px; color: var(--muted); line-height: 1.6; }

/* Compact monitoring links use the same row grammar as the inventory. */
.monitor-links { margin-bottom: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.monitor-link { display: grid; grid-template-columns: 28px minmax(0, 1fr) 18px; gap: 15px; align-items: center; padding: 17px 20px; border-bottom: 1px solid var(--line); color: var(--text); }
.monitor-link:last-child { border-bottom: 0; }
.monitor-link:hover { background: var(--surface-soft); }
.monitor-link-index { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: var(--surface-inset); color: var(--muted); font-size: 10px; font-weight: 600; }
.monitor-link strong { display: block; font-size: 13px; line-height: 1.5; }
.monitor-link p, .monitor-link small, .monitor-link .sub { display: block; margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* Existing surfaces share the theme without changing their behavior. */
:root[data-theme='dark'] aside:not(.workspace-rail) { background: #151a24; color: #c5cfe0; border-right: 1px solid var(--line); }
:root[data-theme='dark'] nav a { color: #b4c0d5; }
:root[data-theme='dark'] nav a:hover, :root[data-theme='dark'] nav a.active { background: #263049; color: #eef2ff; }
:root[data-theme='dark'] .nav-group, :root[data-theme='dark'] .nav-caption { color: #9baac1; }
:root[data-theme='dark'] .stat, :root[data-theme='dark'] .node-card, :root[data-theme='dark'] .login-card,
:root[data-theme='dark'] .technical, :root[data-theme='dark'] .role-grid article, :root[data-theme='dark'] .release-path article,
:root[data-theme='dark'] .db-node, :root[data-theme='dark'] .verdict { background: var(--surface); border-color: var(--line); color: var(--text); }
:root[data-theme='dark'] .help, :root[data-theme='dark'] .field-hint, :root[data-theme='dark'] .walkthrough,
:root[data-theme='dark'] .prose, :root[data-theme='dark'] .verdict-head p, :root[data-theme='dark'] .role-grid p,
:root[data-theme='dark'] .release-path p, :root[data-theme='dark'] .db-migration p { color: var(--muted); }
:root[data-theme='dark'] .guide, :root[data-theme='dark'] .connection-strip, :root[data-theme='dark'] .db-migration,
:root[data-theme='dark'] .db-empty, :root[data-theme='dark'] .code-box, :root[data-theme='dark'] .install-steps li { background: var(--surface-soft); border-color: var(--line); color: var(--text); }
:root[data-theme='dark'] .connection-strip strong, :root[data-theme='dark'] .empty strong, :root[data-theme='dark'] .key-value strong { color: var(--text); }
:root[data-theme='dark'] .action-choice p, :root[data-theme='dark'] .stat .label { color: var(--muted); }
:root[data-theme='dark'] .text-link, :root[data-theme='dark'] .guide summary { color: var(--blue); }
:root[data-theme='dark'] .db-node.primary { background: #202c43; border-color: #576991; }
:root[data-theme='dark'] .db-node.fenced { background: #20242c; }
:root[data-theme='dark'] .db-glyph, :root[data-theme='dark'] .step-number { background: #303d61; color: #d3ddff; }
:root[data-theme='dark'] .banner, :root[data-theme='dark'] .next-step { background: var(--warn-surface); border-color: #65502d; color: var(--amber); }
:root[data-theme='dark'] .banner.bad { background: var(--bad-surface); border-color: var(--danger-line); color: var(--red); }
:root[data-theme='dark'] .banner.good { background: var(--good-surface); border-color: #345f4d; color: var(--green); }
:root[data-theme='dark'] .technical > summary { color: #d4dcef; }
:root[data-theme='dark'] .problem-list li { background: var(--surface-soft); border-color: var(--line); }
:root[data-theme='dark'] .problem-list li span { color: var(--muted); }
:root[data-theme='dark'] .map-panel { background: var(--surface-soft); }
:root[data-theme='dark'] .map-card > rect { fill: var(--surface); stroke: #586780; }
:root[data-theme='dark'] .map-card text { fill: #b5c3d9; }
:root[data-theme='dark'] .map-card .map-title { fill: var(--text); }
:root[data-theme='dark'] .map-link text { fill: #bccbe2; stroke: var(--surface-soft); }
:root[data-theme='dark'] .map-plus circle { fill: #2d3a58; stroke: #7f94c4; }
:root[data-theme='dark'] .map-plus text { fill: #d0dcff; }
:root[data-theme='dark'] .map-card.up .map-status { fill: var(--green); }
:root[data-theme='dark'] .map-card.down .map-status { fill: var(--red); }
:root[data-theme='dark'] .map-card.degraded .map-status { fill: var(--amber); }
:root[data-theme='dark'] .map-legend .up { color: var(--green); }
:root[data-theme='dark'] .map-legend .down { color: var(--red); }
:root[data-theme='dark'] .map-legend .degraded { color: var(--amber); }
:root[data-theme='dark'] .login-screen { background: radial-gradient(ellipse at 15% 0, #223255, transparent 55%), var(--canvas); }
:root[data-theme='dark'] .login-card .muted, :root[data-theme='dark'] .login-card small { color: var(--muted); }
:root[data-theme='dark'] .log { background: #101722; border-color: var(--line); color: #c5d4eb; }
dialog::backdrop { background: var(--overlay); }
:root[data-theme='dark'] .stat .value, :root[data-theme='dark'] .node-reason, :root[data-theme='dark'] .setting-row strong { color: var(--text); }
:root[data-theme='dark'] .toast { background: var(--surface); color: var(--text); border-color: var(--line); }
:root[data-theme='dark'] .toast.bad { background: var(--bad-surface); color: var(--red); border-color: var(--danger-line); }
:root[data-theme='dark'] .actions > a.icon-action { background: var(--surface-soft); border-color: var(--line); color: var(--blue); }
:root[data-theme='dark'] .actions > a.icon-action:hover { background: var(--hover-surface); border-color: var(--blue); }
:root[data-theme='dark'] .release-steps li span { background: var(--surface-inset); color: var(--muted); }
:root[data-theme='dark'] .release-steps li.current, :root[data-theme='dark'] .release-steps li.current span { background: var(--info-surface); color: var(--blue); }
:root[data-theme='dark'] .release-steps li.complete, :root[data-theme='dark'] .release-steps li.complete span { background: var(--good-surface); color: var(--green); }
:root[data-theme='dark'] .install-steps .complete { background: var(--good-surface); color: var(--green); }
:root[data-theme='dark'] .install-steps .current { background: var(--info-surface); color: var(--blue); }
:root[data-theme='dark'] .node-card.up { border-top-color: var(--green); }
:root[data-theme='dark'] .node-card.degraded, :root[data-theme='dark'] .node-card.draining { border-top-color: var(--amber); }
:root[data-theme='dark'] .node-card.down { border-top-color: var(--red); }
:root[data-theme='dark'] .verdict.good { border-left-color: var(--green); background: linear-gradient(90deg, #1c3029, var(--surface) 55%); }
:root[data-theme='dark'] .verdict.warn { border-left-color: var(--amber); background: linear-gradient(90deg, #352c20, var(--surface) 55%); }
:root[data-theme='dark'] .verdict.bad { border-left-color: var(--red); background: linear-gradient(90deg, #38242e, var(--surface) 55%); }
:root[data-theme='dark'] progress.bar::-webkit-progress-bar { background: var(--surface-inset); }

/* Responsive layout changes structure without hiding operations. */
@media (max-width: 1200px) {
  .workspace-layout { grid-template-columns: minmax(0, 1fr); }
  .workspace-rail { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 1100px) {
  .inventory-table { padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .inventory-table > .inventory-search { padding: 17px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
  .inventory-table .table-wrap { overflow: visible; }
  .inventory-table table, .inventory-table tbody { display: block; width: 100%; }
  .inventory-table thead { display: none; }
  .inventory-table tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .inventory-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 12px; min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
  .inventory-table td, .inventory-table td:nth-child(n) { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  .inventory-table td:nth-child(1), .inventory-table td:nth-child(2), .inventory-table td:nth-child(6), .inventory-table td:nth-child(7) { grid-column: 1 / -1; }
  .inventory-processes > h2 { padding: 0 0 5px; }
  .inventory-processes > p.help { padding: 0 0 14px; }
  .inventory-processes tr { grid-template-columns: minmax(0, 1fr); }
  .inventory-processes td:nth-child(n) { display: flex; grid-column: 1 / -1; align-items: flex-start; justify-content: space-between; gap: 15px; text-align: right; }
  .inventory-processes td:last-child { padding-top: 0; border-top: 0; }
  .inventory-processes td:before { display: block; flex-shrink: 0; content: attr(data-label); color: var(--muted); font-size: 11px; text-align: left; }
  .inventory-table td:nth-child(6) { color: var(--muted); font-size: 11px; }
  .inventory-table td:last-child { padding-top: 12px; border-top: 1px solid var(--line); }
  .inventory-action { justify-content: flex-start; }
  .inventory-table .resource-cell { max-width: none; }
  .inventory-table td:before { display: none; }
  .inventory-table-foot { padding: 14px 0; border-top: 0; }
}
@media (max-width: 960px) {
  .panel-grid.two { grid-template-columns: minmax(0, 1fr); }
  .toolbar, .workspace-toolbar { flex-wrap: wrap; }
  .toolbar > .actions, .workspace-toolbar > .actions { flex-wrap: wrap; flex-shrink: 1; }
  .setting-row { grid-template-columns: minmax(0, 1fr) minmax(190px, auto); gap: 16px; }
  .setting-value { grid-template-columns: minmax(65px, 1fr) 96px; }
  .setting-value > button { width: 96px; }
}
@media (max-width: 760px) {
  .panel { padding: 18px; }
  main > header { align-items: flex-start; }
  main > header h1 { font-size: 22px; }
  .header-actions { gap: 6px; flex-wrap: wrap; }
  .header-actions > button, .header-actions > #theme-toggle { height: 44px; min-height: 44px; }
  .header-actions > #theme-toggle { width: 44px; }
  .toolbar, .workspace-toolbar, .inventory-toolbar { align-items: flex-start; }
  button, a.button, a.download-link, .actions > button, .actions > a { min-height: 44px; }
  .actions { gap: 8px; }
  .workspace-rail { grid-template-columns: minmax(0, 1fr); }
  .workspace-rail > .panel { padding: 17px; }
  .workspace-rail .attention-item .actions > button { min-height: 44px; }
  .health-strip { align-items: flex-start; flex-direction: column; gap: 12px; }
  .health-strip > .actions { width: 100%; }
  .health-strip > .actions > button { flex: 1 1 auto; }
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-strip > .stat { padding: 15px; }
  .metric-strip > .stat:nth-child(2) { border-right: 0; }
  .metric-strip > .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .metric-strip .stat .value { font-size: 23px; }
  .pipeline-board { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pipeline-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 15px; }
  .pipeline-stage > p { margin: 0; }
  .pipeline-stage > button { align-self: center; justify-self: end; margin: 0; min-height: 44px; }
  .stage-heading { margin: 0; }
  .stage-counts { min-width: 128px; gap: 18px; }
  .stage-counts > strong { font-size: 22px; }
  .stage-counts > span { font-size: 18px; }
  .attention-item { align-items: flex-start; flex-direction: column; gap: 10px; }
  .attention-item > button { min-height: 40px; }
  .workspace-tabs, .inventory-tabs, .release-tabs { margin-bottom: 17px; }
  .workspace-tabs > button, .inventory-tabs > button, .release-tabs > button { min-height: 46px; padding: 11px 14px; }
  .inventory-table { padding: 0; }
  .inventory-table tbody { grid-template-columns: minmax(0, 1fr); }
  .inventory-table tr { gap: 14px 12px; }
  .inventory-table td:last-child { display: block; text-align: left; }
  .inventory-action > button { min-height: 44px; }
  .inventory-table-foot > button { min-height: 44px; }
  .filters > label { max-width: none; flex-basis: 100%; }
  .filters label > input, .filters label > select, .filters > button, .report-filters > button { height: 44px; min-height: 44px; }
  .setting-row { grid-template-columns: minmax(0, 1fr); }
  .setting-value { grid-template-columns: minmax(0, 1fr) 104px; }
  .setting-value > button { width: 104px; min-height: 44px; }
  .backup-actions { grid-template-columns: minmax(0, 1fr); }
  td .actions { flex-wrap: wrap; }
  .release-components > .workspace-toolbar { padding: 17px; }
  .release-components-table, .release-components-table tbody, .release-components-table tr, .release-components-table td { display: block; width: 100%; }
  .release-components-table thead { display: none; }
  .release-components-table tr { padding: 17px; border-bottom: 1px solid var(--line); }
  .release-components-table tr:last-child { border-bottom: 0; }
  .release-components-table td { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 7px 0; border: 0; }
  .release-components-table td:before { content: attr(data-label); flex-shrink: 0; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: left; }
  .release-component-info, .release-component-version, .release-component-state { min-width: 0; text-align: right; }
  .release-components-table td:last-child { padding-top: 12px; }
  .release-components-table td:last-child:before { display: none; }
  .release-component-actions { width: 100%; flex-wrap: wrap; }
  .release-component-actions > button { min-height: 44px; flex: 1 1 120px; }
  .modal-head { min-height: 72px; padding: 20px; }
  .modal-head h2 { font-size: 21px; }
  #modal-content { padding: 20px; }
  .form-footer { flex-wrap: wrap; }
  .form-footer > button { min-height: 44px; flex: 1; }
  .change-summary { grid-template-columns: minmax(0, 1fr); padding: 4px 16px; }
  .change-summary .key-value:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .change-steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .change-steps li { padding: 12px 14px; }
  .monitor-link { padding: 16px 17px; gap: 12px; }
}
@media (max-width: 480px) {
  .update-card > .actions { grid-template-columns: minmax(0, 1fr); }
  .stage-counts { min-width: 114px; gap: 12px; }
  .stage-heading { gap: 7px; }
  .stage-heading h3 { font-size: 12px; }
}