:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --panel: #ffffff;
  --panel-2: #eef2f7;
  --text: #162033;
  --muted: #64748b;
  --border: #d8e0ea;
  --primary: #1d4ed8;
  --primary-2: #1e40af;
  --danger: #b91c1c;
  --warning: #b45309;
  --success: #047857;
  --shadow: 0 8px 24px rgba(15, 23, 42, .08);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  line-height: 1.55;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.layout { display: grid; grid-template-columns: 260px minmax(0,1fr); min-height: 100vh; }
.sidebar {
  background: #111827;
  color: #e5e7eb;
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: #2563eb; border-radius: 10px; font-weight: 800;
}
.brand small { color: #9ca3af; display: block; }
.nav { display: grid; gap: 4px; }
.nav a {
  color: #d1d5db; padding: 9px 11px; border-radius: 8px; display: block;
}
.nav a:hover, .nav a.active { background: #1f2937; color: #fff; text-decoration: none; }
.sidebar-footer { margin-top: 20px; padding-top: 14px; border-top: 1px solid #374151; }
.main { min-width: 0; }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 14px 24px; background: var(--panel);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20;
}
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.content { padding: 24px; max-width: 1600px; margin-inline: auto; }
.page-title { margin: 0 0 18px; font-size: 1.55rem; }
.grid { display: grid; gap: 16px; }
.grid.cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.panel, .card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow);
}
.panel { padding: 18px; margin-bottom: 16px; }
.card { padding: 16px; }
.card h3, .panel h2, .panel h3 { margin-top: 0; }
.metric { font-size: 1.75rem; font-weight: 700; margin: 6px 0; }
.muted { color: var(--muted); }
.badge {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 2px 8px; font-size: .8rem; background: var(--panel-2);
}
.badge.success { color: var(--success); background: #d1fae5; }
.badge.warning { color: var(--warning); background: #fef3c7; }
.badge.danger { color: var(--danger); background: #fee2e2; }
table { width: 100%; border-collapse: collapse; }
th, td {
  padding: 9px 10px; border-bottom: 1px solid var(--border);
  text-align: start; vertical-align: top;
}
th { background: var(--panel-2); font-weight: 600; }
.table-wrap { overflow-x: auto; }
form.stack { display: grid; gap: 12px; }
.form-row { display: grid; grid-template-columns: minmax(140px, .4fr) 1fr; gap: 12px; align-items: center; }
label { font-weight: 600; }
input, select, textarea, button {
  font: inherit;
}
input, select, textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 10px; background: #fff; color: var(--text);
}
textarea { min-height: 120px; resize: vertical; }
button, .button {
  border: 0; border-radius: 8px; padding: 9px 13px; cursor: pointer;
  background: var(--primary); color: #fff; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px;
}
button:hover, .button:hover { background: var(--primary-2); text-decoration: none; }
button.secondary, .button.secondary { background: #475569; }
button.danger, .button.danger { background: var(--danger); }
button.warning, .button.warning { background: var(--warning); }
button:disabled { opacity: .55; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
pre, code, .ltr, .technical {
  direction: ltr !important; unicode-bidi: plaintext; text-align: left;
  font-family: Consolas, "Cascadia Code", monospace;
}
pre {
  white-space: pre-wrap; overflow-wrap: anywhere; background: #0f172a; color: #e2e8f0;
  border-radius: 9px; padding: 14px; max-height: 620px; overflow: auto;
}
.message { padding: 12px 14px; border-radius: 8px; margin-bottom: 12px; background: #dbeafe; }
.message.error, .error-box { background: #fee2e2; color: #7f1d1d; padding: 12px; border-radius: 8px; }
.message.success { background: #d1fae5; color: #065f46; }
.file-tree { max-height: 620px; overflow: auto; }
.file-tree a { display: block; padding: 5px 8px; border-radius: 6px; }
.file-tree a:hover { background: var(--panel-2); text-decoration: none; }
.editor-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 14px; }
#editor-container { min-height: 65vh; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
#editor-textarea { min-height: 65vh; border: 0; border-radius: 0; direction: ltr; text-align: left; font-family: Consolas, monospace; }
.result-box { margin-top: 12px; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(440px, 100%); background: var(--panel); padding: 28px; border-radius: 14px; box-shadow: var(--shadow); }
dialog { border: 0; border-radius: 12px; width: min(560px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(15,23,42,.55); }
.progress { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--primary); }

.grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.page-head, .row, .between {
  display: flex; align-items: center; gap: 12px;
}
.page-head, .between { justify-content: space-between; }
.page-head { margin-bottom: 18px; flex-wrap: wrap; }
.stack { display: grid; gap: 12px; }
.grow { flex: 1 1 280px; }
.mt-16 { margin-top: 16px; }
.empty { padding: 24px; text-align: center; color: var(--muted); }
.notice, .warning-box {
  padding: 13px 15px; border-radius: 9px; background: #eff6ff;
  border-inline-start: 4px solid var(--primary); margin-block: 12px;
}
.warning-box { background: #fff7ed; border-inline-start-color: var(--warning); }
.field-error { display: block; color: var(--danger); font-weight: 400; }
.feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.toggle { display: flex; align-items: center; gap: 8px; background: var(--panel-2); padding: 9px; border-radius: 8px; }
.toggle input, label input[type="checkbox"] { width: auto; }
.definition-list { display: grid; grid-template-columns: minmax(110px,.35fr) 1fr; gap: 8px 14px; }
.definition-list dt { font-weight: 700; }
.definition-list dd { margin: 0; color: var(--muted); }
.vault-card, .subpanel { border: 1px solid var(--border); border-radius: 10px; padding: 13px; }
.secret-output { background: #0f172a; color: #e2e8f0; padding: 10px; border-radius: 7px; margin-block: 10px; min-height: 42px; }
.status { display: inline-flex; border-radius: 999px; padding: 3px 8px; background: var(--panel-2); }
.status.success { background:#d1fae5;color:var(--success); }
.status.failed { background:#fee2e2;color:var(--danger); }
.status.running, .status.queued { background:#fef3c7;color:var(--warning); }
.alert.critical { border-inline-start: 5px solid var(--danger); }
.alert.warning { border-inline-start: 5px solid var(--warning); }
.alert.info { border-inline-start: 5px solid var(--primary); }
.metric > span { display:block; color:var(--muted); font-size:.9rem; font-weight:500; }
.metric > strong { display:block; font-size:1.6rem; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .topbar { position: static; }
  .grid.two, .grid.three, .grid.four, .editor-layout { grid-template-columns: 1fr; }
}


.terminal-panel { background: #0b1020; color: #e5e7eb; }
.terminal-output {
  min-height: 420px;
  max-height: 65vh;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #050814;
  color: #d1fae5;
  border: 1px solid #26324f;
  border-radius: .55rem;
  padding: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.45;
}
#terminal-input {
  background: #050814;
  color: #f8fafc;
  border-color: #334155;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.danger-text { color: #ef4444; }
#terminal-status[data-kind="ok"] { background: #14532d; }
#terminal-status[data-kind="error"] { background: #7f1d1d; }
#terminal-status[data-kind="pending"] { background: #78350f; }


/* Workspace IDE (CP-330 core) */
.workspace-ide {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(260px, 360px);
  gap: 14px;
  align-items: stretch;
}
.workspace-ide .ide-sidebar,
.workspace-ide .ide-main,
.workspace-ide .ide-panels {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  min-width: 0;
}
.ide-sidebar,
.ide-panels { padding: 14px; overflow: auto; }
.ide-main { display: flex; flex-direction: column; min-height: 680px; overflow: hidden; }
.ide-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.ide-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  padding: 6px 8px 0;
}
.ide-tab {
  border: 1px solid var(--border);
  border-bottom: 0;
  background: var(--panel-2);
  color: var(--text);
  border-radius: 8px 8px 0 0;
  padding: 7px 10px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ide-tab.active { background: var(--panel); font-weight: 700; }
.ide-editor-host { min-height: 460px; flex: 1; border: 0; }
.ide-editor-textarea {
  width: 100%;
  min-height: 460px;
  flex: 1;
  border: 0;
  padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
  background: #0f172a;
  color: #e5e7eb;
}
.ide-status {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  color: var(--muted);
}
.ide-status[data-kind="error"],
.ide-init-error { color: var(--danger); }
.ide-status[data-kind="ok"] { color: var(--success); }
.ide-tree { display: grid; gap: 2px; }
.ide-tree-item button,
.search-match,
#quick-open-results button,
#draft-revisions-panel button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 6px 8px;
  color: var(--text);
  cursor: pointer;
}
.ide-tree-item button:hover,
.search-match:hover,
#quick-open-results button:hover,
#draft-revisions-panel button:hover { background: var(--panel-2); }
.ide-tree-item.depth-1 { padding-left: 12px; }
.ide-tree-item.depth-2 { padding-left: 24px; }
.ide-tree-item.depth-3 { padding-left: 36px; }
.ide-panel {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 12px;
}
.ide-panel:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.ide-panel pre,
.ide-dialog pre {
  white-space: pre-wrap;
  overflow: auto;
  max-height: 260px;
  background: var(--panel-2);
  border-radius: 10px;
  padding: 10px;
}
.ide-dialog {
  width: min(900px, calc(100vw - 32px));
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.ide-dialog::backdrop { background: rgba(15, 23, 42, .35); }
.ide-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.ide-dialog input[type="search"],
.ide-dialog input[type="text"] {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.ide-search-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0;
  color: var(--muted);
}
.ide-terminal {
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: #111827;
  color: #e5e7eb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (max-width: 1100px) {
  .workspace-ide { grid-template-columns: 1fr; }
  .ide-main { min-height: 560px; }
}

/* Sites, Domains & Discovery catalog */
.page-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.site-hero .actions,
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.inline-form {
  display: inline-flex;
  margin: 0;
}
.eyebrow {
  margin: 0 0 .25rem;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
  margin: 1rem 0;
}
.metric-card {
  display: block;
  text-decoration: none;
}
.metric-card strong {
  display: block;
  font-size: 1.55rem;
  margin-top: .25rem;
}
.metric-card.wide {
  grid-column: span 2;
}
.filters-grid {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(150px, 1fr)) auto;
  gap: .75rem;
  align-items: end;
}
.filters-grid label {
  display: grid;
  gap: .25rem;
}
.filter-actions {
  display: flex;
  gap: .5rem;
}
.status-pill,
.tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .16rem .5rem;
  font-size: .78rem;
  line-height: 1.2;
  background: rgba(255,255,255,.04);
  margin: .08rem;
}
.status-online,
.management-complete {
  border-color: rgba(64, 180, 120, .55);
}
.status-warning,
.status-partial,
.management-needs_attention {
  border-color: rgba(232, 180, 72, .65);
}
.status-offline,
.status-failed,
.status-error {
  border-color: rgba(220, 80, 80, .65);
}
.management-unmanaged {
  border-color: rgba(120, 150, 220, .65);
}
.actions-cell {
  min-width: 220px;
}
.button.tiny {
  padding: .25rem .45rem;
  font-size: .78rem;
  margin: .08rem;
}
.button.disabled,
button:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.detail-tabs {
  display: grid;
  gap: 1rem;
}
.detail-grid {
  display: grid;
  grid-template-columns: minmax(130px, 220px) 1fr;
  gap: .55rem 1rem;
}
.detail-grid dt {
  color: var(--muted);
}
.detail-grid dd {
  margin: 0;
}
.warning-panel,
.danger-zone {
  border-color: rgba(232, 180, 72, .55);
}
@media (max-width: 900px) {
  .page-hero,
  .filters-grid {
    grid-template-columns: 1fr;
    display: grid;
  }
  .metric-card.wide {
    grid-column: auto;
  }
  .detail-grid {
    grid-template-columns: 1fr;
  }
}


/* Sites, Domains & Discovery batch 2 */
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: .75rem;
}
.compact-list {
  display: grid;
  gap: .5rem;
}
.compact-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  padding: .55rem .65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.severity-critical,
.check-failed {
  border-color: rgba(220, 80, 80, .75);
}
.severity-warning,
.check-warning {
  border-color: rgba(232, 180, 72, .75);
}
.severity-info,
.check-skipped {
  border-color: rgba(120, 150, 220, .75);
}
.check-passed,
.status-passed {
  border-color: rgba(64, 180, 120, .65);
}
.tag.warning {
  border-color: rgba(232, 180, 72, .75);
}
.compact-pre {
  max-width: 360px;
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
}
.site-table table,
.table-wrap table {
  min-width: 100%;
}
@media (max-width: 1100px) {
  .section-head {
    display: grid;
  }
  .compact-row {
    align-items: flex-start;
  }
}


/* Sites, Domains & Discovery batch 3 */
.hidden {
  display: none !important;
}
.wizard-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .55rem;
  margin-bottom: 1rem;
}
.step-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .65rem .75rem;
  background: var(--panel);
  box-shadow: var(--shadow);
  display: grid;
  gap: .25rem;
}
.step-card strong {
  display: inline-grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  background: var(--panel-2);
}
.step-card.active {
  border-color: rgba(64, 180, 120, .65);
}
.step-card.attention {
  border-color: rgba(232, 180, 72, .8);
}
.step-card.locked {
  opacity: .72;
  border-style: dashed;
}
.wizard-steps + .grid {
  align-items: start;
}


/* Connection & Inventory patch */
.inventory-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 4px;
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.mini-pre {
  max-height: 240px;
  margin: 0;
  font-size: .86rem;
}
.subpanel summary {
  cursor: pointer;
  font-weight: 700;
}
.subpanel pre {
  margin-bottom: 0;
}


/* Operations Dashboard */
.dashboard-hero, .section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.dashboard-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
  gap: 12px;
}
.dashboard-filters label { display: grid; gap: 6px; font-size: .9rem; }
.global-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 14px;
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.global-status > div {
  border-inline-start: 3px solid var(--border);
  padding-inline-start: 10px;
}
.global-status span { display: block; font-size: .82rem; }
.global-status.status-healthy { border-color: #bbf7d0; }
.global-status.status-degraded,
.global-status.status-configuration_pending { border-color: #fde68a; }
.global-status.status-critical,
.global-status.status-agent_offline { border-color: #fecaca; }
.success-text { color: var(--success); }
.danger-text { color: var(--danger); }
.warning-text { color: var(--warning); }
.card-link {
  color: inherit;
  display: block;
  transition: transform .12s ease, border-color .12s ease;
}
.card-link:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  text-decoration: none;
}
.mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  color: var(--muted);
  font-size: .86rem;
}
.site-distribution, .quick-filters, .quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quick-filters a {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--panel-2);
  font-size: .85rem;
}
.actions.compact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.resource-card .metric { margin-bottom: 2px; }
.sparkline {
  display: flex;
  align-items: end;
  gap: 2px;
  height: 34px;
  margin-top: 10px;
  border-bottom: 1px solid var(--border);
}
.sparkline span {
  display: inline-block;
  width: 5px;
  min-height: 2px;
  max-height: 34px;
  background: currentColor;
  opacity: .55;
}
.sparkline em {
  color: var(--muted);
  font-size: .85rem;
}
.badge.healthy, .badge.normal { color: var(--success); background: #d1fae5; }
.badge.degraded, .badge.warning, .badge.elevated, .badge.high { color: var(--warning); background: #fef3c7; }
.badge.critical { color: var(--danger); background: #fee2e2; }
.kv-grid {
  display: grid;
  grid-template-columns: minmax(120px, .45fr) 1fr;
  gap: 8px 12px;
}
.kv-grid dt, .compact-kv dt { color: var(--muted); font-weight: 600; }
.kv-grid dd, .compact-kv dd { margin: 0; }
.compact-kv {
  display: grid;
  grid-template-columns: minmax(92px, .45fr) 1fr;
  gap: 5px 10px;
  margin: 10px 0;
}
.pending-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  color: inherit;
}
.pending-item:hover { text-decoration: none; border-color: var(--primary); }
.pending-item.severity-critical { background: #fef2f2; }
.pending-item.severity-warning { background: #fffbeb; }
.pending-item.severity-success { background: #ecfdf5; }
.timeline {
  display: grid;
  gap: 10px;
}
.timeline-item {
  border-inline-start: 3px solid var(--primary);
  padding: 8px 10px;
  background: var(--panel-2);
  border-radius: 8px;
}
.timeline-item span {
  display: block;
  color: var(--muted);
  font-size: .82rem;
}
.json-output.collapsed {
  max-height: 260px;
  overflow: auto;
}
.grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 1100px) {
  .grid.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 780px) {
  .dashboard-hero, .section-head { display: grid; }
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
  .global-status { grid-template-columns: 1fr; }
}


/* Operations Dashboard customization (batch 2) */
.dashboard-customizer {
  border-style: dashed;
}
.dashboard-widget[hidden],
.dashboard-site-row[hidden] {
  display: none !important;
}
.widget-list {
  display: grid;
  gap: .5rem;
}
.widget-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .7rem;
  border: 1px solid var(--border, #d9dee7);
  border-radius: .75rem;
  background: var(--panel-bg, rgba(255,255,255,.04));
}
.widget-list-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-site-row.pinned-site {
  outline: 2px solid rgba(245, 158, 11, .45);
  outline-offset: -2px;
  background: rgba(245, 158, 11, .08);
}
.link-button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0 .25rem;
  font: inherit;
}
.link-button:hover {
  text-decoration: underline;
}
.compact-list {
  margin: .5rem 0 0;
  padding-inline-start: 1.2rem;
}
.compact-list li {
  margin: .2rem 0;
}
.dashboard-widget {
  transition: opacity .16s ease, transform .16s ease;
}
.dashboard-widget[data-dashboard-widget] {
  min-width: 0;
}


/* Code Management and Workspace IDE — batch 1 */
.code-hero {
  border: 1px solid rgba(148, 163, 184, .25);
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, .16), transparent 28rem),
    linear-gradient(135deg, rgba(15, 23, 42, .95), rgba(30, 41, 59, .82));
  color: #e5eef9;
  border-radius: 1.25rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.code-hero .muted { color: #cbd5e1; }
.code-selector-panel .mode-grid,
.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .75rem;
}
.mode-card,
.source-card,
.mini-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 1rem;
  padding: .85rem;
  background: rgba(15, 23, 42, .035);
}
.mode-card {
  cursor: pointer;
}
.mode-card input,
.source-card input {
  width: auto;
  margin-inline-end: .35rem;
}
.mode-card.active,
.source-card:has(input:checked) {
  border-color: rgba(59, 130, 246, .75);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
}
.source-card.disabled {
  opacity: .55;
}
.selector-forms [hidden] {
  display: none !important;
}
.workspace-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
}
.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 1rem;
}
.check-list {
  margin: 0;
  padding-inline-start: 1.2rem;
}
.check-list li {
  margin: .35rem 0;
}
.accent-panel {
  border-color: rgba(14, 165, 233, .35);
  background: rgba(14, 165, 233, .08);
}
.domain-route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .75rem;
}
.domain-route-grid ul {
  margin: .5rem 0 0;
  padding-inline-start: 1.1rem;
}
.domain-route-grid li {
  margin: .35rem 0;
}
.selected-row {
  outline: 2px solid rgba(59, 130, 246, .45);
  outline-offset: -2px;
}
.status-pill.ok,
.status-pill.status-online {
  background: rgba(34, 197, 94, .14);
  color: #166534;
}
.status-pill.warning {
  background: rgba(245, 158, 11, .15);
  color: #92400e;
}
.status-pill.danger {
  background: rgba(239, 68, 68, .14);
  color: #991b1b;
}
.status-pill.neutral,
.status-pill.muted {
  background: rgba(100, 116, 139, .14);
  color: #475569;
}
.ide-context-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
  grid-column: 1 / -1;
  margin-bottom: .75rem;
}
.ide-context-strip > div {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.workspace-ide {
  align-items: stretch;
}
@media (max-width: 900px) {
  .split-grid {
    grid-template-columns: 1fr;
  }
}


/* Code Management Workspace IDE - batch 2 */
.enhanced-ide {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr) 330px;
  grid-template-areas:
    "context context context"
    "tree editor inspector"
    "bottom bottom bottom";
  gap: 16px;
  align-items: start;
}
.enhanced-ide .ide-context-strip { grid-area: context; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.enhanced-ide .ide-context-strip div { display: grid; gap: 4px; }
.enhanced-ide .ide-sidebar { grid-area: tree; position: sticky; top: 88px; max-height: calc(100vh - 120px); overflow: auto; }
.enhanced-ide .ide-main { grid-area: editor; min-width: 0; }
.enhanced-ide .ide-inspector { grid-area: inspector; position: sticky; top: 88px; max-height: calc(100vh - 120px); overflow: auto; }
.enhanced-ide .ide-bottom { grid-area: bottom; }
.ide-tree-tools { display: grid; gap: 8px; margin: 10px 0; }
.inline-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.inline-check input { width: auto; }
.ide-tree { display: grid; gap: 4px; max-height: 62vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: var(--panel-2); }
.ide-tree-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 4px; border-radius: 8px; }
.ide-tree-row input { width: auto; margin-inline: auto; }
.ide-tree-row button { justify-content: flex-start; width: 100%; background: transparent; color: var(--text); border: 1px solid transparent; padding: 6px 8px; overflow-wrap: anywhere; }
.ide-tree-row button:hover, .ide-tree-row.active button { background: var(--panel); border-color: var(--border); text-decoration: none; }
.ide-tree-row.directory button { color: var(--primary); }
.ide-selection-summary { margin-top: 8px; color: var(--muted); }
.ide-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ide-toolbar .shortcut { opacity: .75; font-size: .78rem; }
.ide-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; color: var(--muted); }
.ide-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.ide-tab { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--panel-2); }
.ide-tab.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(29, 78, 216, .12); }
.ide-tab button { border-radius: 0; background: transparent; color: var(--text); padding: 5px 9px; }
.ide-tab-close { color: var(--danger) !important; border-inline-start: 1px solid var(--border) !important; }
.ide-editor-host { min-height: 58vh; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #0f172a; position: relative; }
.ide-editor-host .empty { position: absolute; inset: 0; display: grid; place-items: center; color: #94a3b8; pointer-events: none; }
#editor-textarea { min-height: 58vh; border: 0; border-radius: 0; background: #0f172a; color: #e5e7eb; font-family: Consolas, "Cascadia Code", monospace; line-height: 1.5; }
.ide-status { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); }
.ide-status[data-kind="ok"] { background: #d1fae5; color: #065f46; }
.ide-status[data-kind="error"] { background: #fee2e2; color: #7f1d1d; }
.ide-status[data-kind="info"] { background: #dbeafe; color: #1e3a8a; }
.ide-inspector-body pre, #ide-bottom-content { max-height: 420px; }
.ide-inspector-tabs { margin-bottom: 10px; }
.ide-search-results { display: grid; gap: 6px; max-height: 380px; overflow: auto; }
.search-match { display: block; width: 100%; justify-content: flex-start; text-align: left; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
.warning-panel { border-color: #f59e0b; background: #fffbeb; }
dialog { border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); max-width: min(720px, 92vw); }
dialog::backdrop { background: rgba(15, 23, 42, .5); }
@media (max-width: 1180px) {
  .enhanced-ide {
    grid-template-columns: 1fr;
    grid-template-areas:
      "context"
      "tree"
      "editor"
      "inspector"
      "bottom";
  }
  .enhanced-ide .ide-sidebar, .enhanced-ide .ide-inspector { position: static; max-height: none; }
}


.workflow-steps { display: grid; gap: 10px; padding-inline-start: 22px; }
.workflow-steps li { padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.workflow-steps li button { margin-inline-start: 10px; }
.workflow-output { min-height: 140px; max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: #0f172a; color: #e5e7eb; }
.workflow-output[data-kind="ok"] { border-color: #10b981; }
.workflow-output[data-kind="error"] { border-color: #ef4444; }
.wide-dialog { max-width: min(1040px, 94vw); width: 980px; }
.sensitive-ide-action { box-shadow: 0 0 0 2px rgba(245, 158, 11, .18); }


/* Full Server File Manager */
.page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.eyebrow {
  margin: 0 0 .25rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted, #6b7280);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.file-nav-panel {
  margin-bottom: 1rem;
}
.file-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}
.file-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-top: .75rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 999px;
  padding: .18rem .55rem;
  text-decoration: none;
  background: rgba(148, 163, 184, .08);
}
.filters-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: .75rem;
}
.file-explorer-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 1rem;
}
.file-tree {
  align-self: start;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
}
.tree-link {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .45rem .55rem;
  border-radius: .6rem;
  text-decoration: none;
}
.tree-link:hover {
  background: rgba(148, 163, 184, .12);
}
.tree-link small {
  color: var(--muted, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
}
.kv-grid > div {
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: .75rem;
  padding: .65rem;
}
.kv-grid strong {
  display: block;
  margin-bottom: .25rem;
}
.related-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  border: 1px solid rgba(59, 130, 246, .28);
  background: rgba(59, 130, 246, .08);
  border-radius: .85rem;
  padding: .75rem;
  margin-top: .8rem;
}
.file-list table td {
  vertical-align: top;
}
.inline-details {
  display: inline-block;
}
.inline-details summary {
  cursor: pointer;
  list-style: none;
}
.inline-details[open] {
  display: block;
  position: relative;
  z-index: 2;
  margin-top: .5rem;
}
.inline-details[open] .code-block {
  max-width: min(72vw, 720px);
  max-height: 360px;
  overflow: auto;
}
.code-block {
  direction: ltr;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: .75rem;
  padding: .75rem;
  background: rgba(15, 23, 42, .05);
}
.status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .15rem .5rem;
  font-size: .78rem;
  border: 1px solid rgba(148, 163, 184, .35);
}
.status-managed,
.status-safe {
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .35);
}
.status-system,
.status-read_only_recommended {
  background: rgba(234, 179, 8, .14);
  border-color: rgba(234, 179, 8, .35);
}
.status-sensitive,
.status-danger,
.status-protected {
  background: rgba(239, 68, 68, .13);
  border-color: rgba(239, 68, 68, .35);
}
.warning-box {
  border: 1px solid rgba(234, 179, 8, .38);
  background: rgba(234, 179, 8, .12);
  border-radius: .85rem;
  padding: .8rem 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 920px) {
  .page-hero,
  .file-explorer-layout {
    display: block;
  }
  .file-tree {
    position: static;
    max-height: none;
    margin-bottom: 1rem;
  }
}


/* Full Server File Manager batch 2 */
.file-action-panel .actions.wrap,
.file-table .actions.wrap {
  flex-wrap: wrap;
  gap: .35rem;
}
.file-preview-modal {
  width: min(1100px, 96vw);
  max-height: 92vh;
  overflow: auto;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(4px);
}
.modal-backdrop[hidden] {
  display: none !important;
}
.modal-card {
  width: min(920px, 96vw);
  max-height: 90vh;
  overflow: auto;
  border: 1px solid var(--border, rgba(148, 163, 184, .25));
  border-radius: 20px;
  background: var(--panel, #111827);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
  padding: 1.25rem;
}
.code-editor-textarea {
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--border, rgba(148, 163, 184, .25));
  border-radius: 14px;
  padding: 1rem;
  background: #0b1020;
  color: #e5e7eb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .9rem;
  line-height: 1.5;
  resize: vertical;
}
.link-button {
  border: 0;
  background: transparent;
  color: var(--link, #60a5fa);
  cursor: pointer;
  padding: 0;
  text-align: inherit;
}
.link-button:hover {
  text-decoration: underline;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .85rem;
}
.form-grid label {
  display: grid;
  gap: .35rem;
}
.form-grid input,
.form-grid select {
  width: 100%;
}
.list-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  gap: .75rem;
  align-items: center;
  padding: .55rem .65rem;
  border: 1px solid var(--border, rgba(148, 163, 184, .18));
  border-radius: 12px;
  margin-bottom: .35rem;
}
.panel.nested {
  padding: .75rem;
  border-radius: 14px;
}
.file-icon {
  display: inline-block;
  width: .75rem;
  height: .75rem;
  border-radius: 3px;
  margin-inline-end: .35rem;
  background: currentColor;
  opacity: .65;
}
.file-icon-directory {
  border-radius: 2px;
}


/* Backup and Recovery Management Center */
.page-hero.backup-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(29, 78, 216, .10), rgba(4, 120, 87, .08)), var(--panel);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.eyebrow {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  margin: 0 0 4px;
}
.actions.wrap { flex-wrap: wrap; }
.backup-summary .metric-card { min-height: 132px; }
.metric-card small,
.path-inline,
.workflow-card p,
.operation-card span,
.label-option small {
  display: block;
  color: var(--muted);
}
.path-inline {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
  white-space: nowrap;
}
.operation-grid.backup-operation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.operation-card {
  width: 100%;
  text-align: start;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.operation-card:hover,
.operation-card.active {
  border-color: var(--primary);
  box-shadow: 0 8px 18px rgba(29, 78, 216, .12);
}
.operation-card.is-locked {
  opacity: .66;
  cursor: not-allowed;
  background: var(--panel-2);
}
.backup-operation[hidden] { display: none !important; }
.check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}
.check-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.table-wrap { overflow-x: auto; }
.data-table.backup-table th,
.data-table.backup-table td { vertical-align: top; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .82rem;
  background: var(--panel-2);
}
.status-pill.healthy,
.status-pill.ok { background: rgba(4, 120, 87, .12); color: var(--success); }
.status-pill.unverified,
.status-pill.warn,
.status-pill.stale { background: rgba(180, 83, 9, .12); color: var(--warning); }
.status-pill.unknown,
.status-pill.muted { background: var(--panel-2); color: var(--muted); }
.mini-card,
.workflow-card,
.operation-summary > div,
.key-value-grid > div {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: var(--panel);
}
.workflow-card.locked {
  background: repeating-linear-gradient(-45deg, rgba(180, 83, 9, .08), rgba(180, 83, 9, .08) 8px, transparent 8px, transparent 16px), var(--panel);
}
.key-value-grid,
.operation-summary,
.label-grid,
.link-grid {
  display: grid;
  gap: 10px;
}
.key-value-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.operation-summary { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 12px; }
.label-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.link-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.link-grid a {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
}
.label-option {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
}
.label-option small { grid-column: 2; }
.diagnostic-list {
  display: grid;
  gap: 8px;
  border: 1px dashed var(--border);
  padding: 12px;
  border-radius: 12px;
}
.diagnostics-pre {
  max-height: 520px;
  overflow: auto;
  background: #0f172a;
  color: #e5e7eb;
  border-radius: 12px;
  padding: 14px;
}
.warning-box {
  border: 1px solid rgba(180, 83, 9, .35);
  background: rgba(180, 83, 9, .10);
  color: var(--warning);
  border-radius: 12px;
  padding: 10px 12px;
}
.empty-state {
  border: 1px dashed var(--border);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  background: var(--panel-2);
}
@media (max-width: 900px) {
  .page-hero.backup-hero { flex-direction: column; }
}


/* Resource Monitor and Operations Center */
.resource-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.25rem;
}
.resource-card {
  display: block;
  padding: 1rem;
  border: 1px solid var(--border, #263244);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(29, 78, 216, .12), rgba(15, 23, 42, .4));
  text-decoration: none;
  color: inherit;
}
.resource-card:hover { transform: translateY(-1px); }
.resource-card-label,
.resource-card small {
  display: block;
  color: var(--muted, #94a3b8);
}
.resource-card-value {
  display: block;
  margin: .35rem 0;
  font-size: 1.35rem;
}
.state-ok { border-color: rgba(34, 197, 94, .35) !important; }
.state-elevated { border-color: rgba(234, 179, 8, .35) !important; }
.state-warning { border-color: rgba(245, 158, 11, .45) !important; }
.state-critical,
.state-danger { border-color: rgba(239, 68, 68, .55) !important; }
.badge.state-ok,
.metric.state-ok .badge { background: rgba(34, 197, 94, .14); color: #86efac; }
.badge.state-elevated { background: rgba(234, 179, 8, .14); color: #fde68a; }
.badge.state-warning,
.metric.state-warning .badge { background: rgba(245, 158, 11, .16); color: #fcd34d; }
.badge.state-critical,
.badge.state-danger,
.metric.state-critical .badge { background: rgba(239, 68, 68, .18); color: #fca5a5; }
.resource-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  overflow-x: auto;
  padding-block: .5rem;
}
.resource-tab-panel.hidden { display: none; }
.recommendation-list {
  display: grid;
  gap: .75rem;
}
.recommendation {
  padding: .85rem 1rem;
  border: 1px solid var(--border, #263244);
  border-radius: .85rem;
  background: rgba(15, 23, 42, .35);
}
.recommendation p { margin: .35rem 0 0; color: var(--muted, #94a3b8); }
.kv-grid {
  display: grid;
  grid-template-columns: minmax(110px, 170px) 1fr;
  gap: .5rem 1rem;
}
.kv-grid dt { color: var(--muted, #94a3b8); }
.kv-grid dd { margin: 0; }
.resource-bars {
  display: grid;
  gap: .55rem;
}
.resource-bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 64px;
  gap: .75rem;
  align-items: center;
}
.bar,
.mini-bar {
  height: .55rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148, 163, 184, .18);
}
.bar i,
.mini-bar i {
  display: block;
  height: 100%;
  background: currentColor;
  opacity: .7;
}
.mini-bar { min-width: 90px; margin-bottom: .15rem; }
.resource-filter-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.json-block {
  max-height: 520px;
  overflow: auto;
}
.truncate {
  max-width: 440px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.button.tiny {
  padding: .22rem .45rem;
  font-size: .78rem;
}


/* Resource Monitor batch 3 */
.operation-card { border-left: 4px solid var(--border, #334155); }
.operation-card .card-title-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.stacked { display:flex; flex-direction:column; gap:.75rem; }
.stacked label { display:flex; flex-direction:column; gap:.35rem; font-size:.9rem; }
.stacked input, .stacked textarea, .stacked select { width:100%; }
.nested-panel { margin-top:1rem; }
.mini-doc p { margin:.35rem 0; }
.sensitive-resource-action.hidden { display:none !important; }


/* Scheduled and Deferred Operations Center */
.schedule-hero { align-items: flex-start; }
.sticky-tabs { position: sticky; top: 0.5rem; z-index: 3; backdrop-filter: blur(10px); }
.form-grid.schedule-builder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.form-grid .wide { grid-column: 1 / -1; }
.checkbox-row { display: flex; align-items: center; gap: .5rem; }
.checkbox-card {
  display: flex;
  gap: .6rem;
  align-items: center;
  padding: .75rem;
  border: 1px solid var(--border, rgba(148,163,184,.24));
  border-radius: .75rem;
  background: rgba(15,23,42,.035);
}
.catalog-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.operation-card {
  border: 1px solid var(--border, rgba(148,163,184,.24));
  border-radius: 1rem;
  padding: 1rem;
  background: rgba(255,255,255,.035);
}
.operation-card h4 { margin: 0; }
.meta-grid {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) 1.2fr;
  gap: .35rem .75rem;
  margin: .75rem 0;
}
.meta-grid dt { color: var(--muted, #64748b); }
.meta-grid dd { margin: 0; }
.risk {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: .18rem .55rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  background: rgba(100,116,139,.14);
}
.risk-low { background: rgba(34,197,94,.16); color: #15803d; }
.risk-medium { background: rgba(245,158,11,.18); color: #b45309; }
.risk-high { background: rgba(239,68,68,.16); color: #b91c1c; }
.timeline-list { display: grid; gap: .75rem; }
.timeline-item {
  display: grid;
  grid-template-columns: minmax(150px,.4fr) 1fr auto auto;
  align-items: center;
  gap: .75rem;
  padding: .85rem;
  border: 1px solid var(--border, rgba(148,163,184,.22));
  border-radius: .85rem;
}
.timeline-time { color: var(--muted, #64748b); font-weight: 700; }
.disabled, button:disabled { opacity: .58; cursor: not-allowed; }
.operation-doc {
  padding: 1rem;
  border: 1px dashed var(--border, rgba(148,163,184,.35));
  border-radius: .85rem;
  background: rgba(59,130,246,.06);
}
.text-danger { color: #dc2626; }
@media (max-width: 760px) {
  .timeline-item { grid-template-columns: 1fr; }
  .meta-grid { grid-template-columns: 1fr; }
}


/* Scheduled and Deferred Operations Center batch 2 */
.inline-form .compact-input,
.compact-input {
  max-width: 180px;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border, #2a3348);
  border-radius: 0.5rem;
  background: var(--surface, #111827);
  color: inherit;
}
.toolbar.compact {
  gap: 0.5rem;
  flex-wrap: wrap;
}
.schedule-builder input[type="datetime-local"] {
  min-width: 220px;
}
.timeline-item .badge.warning,
.badge.warning {
  border-color: rgba(245, 158, 11, 0.45);
}


/* Database Management Center */
.inline-form {
  display: flex;
  gap: .75rem;
  align-items: end;
  flex-wrap: wrap;
}
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.summary-card {
  display: block;
  padding: 1rem;
  border: 1px solid var(--border, #263445);
  border-radius: 14px;
  background: var(--panel, rgba(255,255,255,.04));
  text-decoration: none;
  color: inherit;
}
.summary-card span {
  display: block;
  color: var(--muted, #94a3b8);
  font-size: .85rem;
}
.summary-card strong {
  display: block;
  margin-top: .35rem;
  font-size: 1.45rem;
}
.operation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .85rem;
}
.operation-card {
  text-align: start;
  border: 1px solid var(--border, #263445);
  background: var(--panel, rgba(255,255,255,.04));
  color: inherit;
  padding: 1rem;
  border-radius: 14px;
  cursor: pointer;
}
.operation-card strong,
.operation-card span {
  display: block;
}
.operation-card span {
  margin-top: .35rem;
  color: var(--muted, #94a3b8);
  font-size: .9rem;
}
.operation-card.active {
  border-color: var(--accent, #38bdf8);
  box-shadow: 0 0 0 1px rgba(56,189,248,.25);
}
.operation-card.locked {
  opacity: .65;
  cursor: not-allowed;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.info-card {
  border: 1px solid var(--border, #263445);
  background: var(--panel, rgba(255,255,255,.035));
  border-radius: 14px;
  padding: 1rem;
}
.details-list {
  display: grid;
  grid-template-columns: minmax(120px, .5fr) 1fr;
  gap: .45rem .85rem;
}
.details-list dt {
  color: var(--muted, #94a3b8);
}
.chip-list {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.code-textarea {
  min-height: 220px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.code-block {
  white-space: pre-wrap;
  max-height: 220px;
  overflow: auto;
}
.actions.stacked {
  align-items: flex-start;
}
.badge.read {
  background: rgba(34,197,94,.16);
}
.badge.danger {
  background: rgba(239,68,68,.18);
}


/* Vault and Secrets Management Center */
.cards-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.toolbar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;align-items:end;}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;}
.form-grid .span-2{grid-column:1/-1;}
.checkbox-row{display:flex;align-items:center;gap:.5rem;}
.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.actions.compact{display:flex;flex-wrap:wrap;gap:.35rem;}
.actions.compact button{padding:.35rem .55rem;}
.badge.small{font-size:.72rem;margin:.1rem .15rem .1rem 0;}
.badge.ok,.badge.healthy{background:rgba(60,179,113,.14);color:#22c55e;border-color:rgba(60,179,113,.35);}
.badge.warning{background:rgba(245,158,11,.14);color:#f59e0b;border-color:rgba(245,158,11,.35);}
.badge.neutral{opacity:.82;}
.vault-table td{vertical-align:top;}
.secret-output{margin-top:.5rem;padding:.45rem .6rem;border-radius:.5rem;background:rgba(15,23,42,.45);border:1px solid rgba(148,163,184,.18);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;max-width:22rem;overflow:auto;}
.vault-sensitive-only{display:none;}
.vault-sensitive-visible .vault-sensitive-only{display:inline-flex;}
.wide-dialog{max-width:min(960px,96vw);width:860px;}
.panel.inset{background:rgba(255,255,255,.03);}
.doc-card{border:1px solid rgba(148,163,184,.18);border-radius:1rem;padding:1rem;background:rgba(15,23,42,.35);}
.detail-list{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:.5rem 1rem;}
.detail-list dt{font-weight:700;color:var(--muted);}
.detail-list dd{margin:0;word-break:break-word;}
.check-list{display:grid;gap:.45rem;margin:0;padding-left:1.2rem;}
.button-row{display:flex;flex-wrap:wrap;gap:.5rem;}
.align-end{align-self:end;}


/* Vault lifecycle management */
.vault-detail-dialog .tab-strip,
.tab-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .75rem 0 1rem;
}
.vault-detail-tab,
.tab-strip button {
  border: 1px solid var(--border, #334155);
  border-radius: .7rem;
  padding: .45rem .75rem;
  background: var(--surface-muted, rgba(148, 163, 184, .12));
  color: inherit;
}
.vault-detail-tab.active,
.tab-strip button.active {
  background: linear-gradient(135deg, rgba(59,130,246,.25), rgba(14,165,233,.18));
  border-color: rgba(96,165,250,.8);
}
.operation-list {
  display: grid;
  gap: .75rem;
}
.operation-card {
  border: 1px solid var(--border, rgba(148,163,184,.25));
  border-radius: 1rem;
  padding: .85rem;
  background: rgba(15, 23, 42, .28);
}
.detail-list {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) 1fr;
  gap: .45rem .85rem;
}
.detail-list dt {
  color: var(--muted, #94a3b8);
  font-weight: 600;
}
.detail-list dd {
  margin: 0;
}
.secret-output {
  margin-top: .45rem;
  padding: .55rem .7rem;
  border: 1px dashed rgba(148,163,184,.35);
  border-radius: .65rem;
  background: rgba(2,6,23,.3);
  word-break: break-all;
}


/* Vault final sensitive operations */
.vault-sensitive-only {
  display: none;
}
body.vault-sensitive-visible .vault-sensitive-only {
  display: inline-flex;
}
body.vault-sensitive-visible section.vault-sensitive-only,
body.vault-sensitive-visible .panel.vault-sensitive-only {
  display: block;
}
#vault-sensitive-dialog .vault-owner-field,
#vault-sensitive-dialog .vault-revealable-field {
  display: none;
}
#vault-sensitive-dialog.vault-owner-mode .vault-owner-field,
#vault-sensitive-dialog.vault-revealable-mode .vault-revealable-field {
  display: flex;
}
.danger-soft {
  border-color: rgba(220, 38, 38, .35);
}


/* Command Center redesign batch 1 */
.command-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  border: 1px solid rgba(250, 204, 21, .35);
  background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(88,28,135,.35));
}
.eyebrow {
  margin: 0 0 .35rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #93c5fd;
  font-size: .75rem;
  font-weight: 700;
}
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}
.command-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(15, 23, 42, .92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 14px;
  padding: .5rem;
  margin: 1rem 0;
}
.command-tabs a {
  display: inline-block;
  padding: .45rem .7rem;
  border-radius: 999px;
  color: #cbd5e1;
  text-decoration: none;
}
.command-tabs a:hover {
  background: rgba(59,130,246,.18);
  color: #fff;
}
.command-wizard .wizard-step {
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 16px;
  padding: 1rem;
  background: rgba(15, 23, 42, .44);
  margin-bottom: 1rem;
}
.access-level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .85rem;
}
.access-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 16px;
  padding: .85rem;
  background: rgba(2,6,23,.35);
  cursor: pointer;
}
.access-card:hover,
.access-card:has(input:checked) {
  border-color: rgba(96,165,250,.75);
  box-shadow: 0 0 0 1px rgba(96,165,250,.35), 0 12px 30px rgba(2,6,23,.2);
}
.access-card input {
  align-self: flex-start;
}
.risk-low { border-color: rgba(34,197,94,.35); }
.risk-medium { border-color: rgba(59,130,246,.35); }
.risk-high { border-color: rgba(251,191,36,.45); }
.risk-critical, .risk-break_glass { border-color: rgba(248,113,113,.55); }
.badge.risk-low,
.badge.ok { background: rgba(34,197,94,.16); color: #86efac; border-color: rgba(34,197,94,.35); }
.badge.risk-medium { background: rgba(59,130,246,.16); color: #93c5fd; border-color: rgba(59,130,246,.35); }
.badge.risk-high,
.badge.warning { background: rgba(251,191,36,.16); color: #fde68a; border-color: rgba(251,191,36,.35); }
.badge.risk-critical,
.badge.risk-break_glass,
.badge.danger { background: rgba(248,113,113,.16); color: #fecaca; border-color: rgba(248,113,113,.35); }
.result-box {
  margin-top: 1rem;
}
.result-summary {
  padding: .85rem;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(15,23,42,.5);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.result-summary.ok { border-color: rgba(34,197,94,.45); }
.result-summary.warning { border-color: rgba(251,191,36,.45); }
.result-summary.danger { border-color: rgba(248,113,113,.45); }
.info-box,
.success-box {
  border: 1px solid rgba(96,165,250,.35);
  background: rgba(59,130,246,.12);
  border-radius: 14px;
  padding: .85rem;
  margin: .75rem 0;
}
.success-box {
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
}
.command-warning {
  margin-block: 1rem;
}
@media (max-width: 860px) {
  .command-hero {
    flex-direction: column;
  }
  .command-tabs {
    position: static;
  }
}

/* Break-Glass Command Center live terminal */
.command-terminal-panel {
  border: 1px solid var(--border, rgba(148,163,184,.25));
}
.command-terminal-meta .soft-card strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
.terminal-frame {
  background: #050816;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 16px;
  padding: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.terminal-output {
  min-height: 360px;
  max-height: 560px;
  overflow: auto;
  padding: 12px;
  margin: 0 0 10px;
  background: #020617;
  color: #d1fae5;
  border-radius: 12px;
  white-space: pre-wrap;
  font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.terminal-input {
  width: 100%;
  color: #e5e7eb;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, .32);
  border-radius: 10px;
  padding: 10px;
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.compact-table table td,
.compact-table table th {
  font-size: .88rem;
}


/* Break-Glass Command Center command policy engine */
.command-policy-strip {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border, #273449);
  border-radius: 0.9rem;
  background: rgba(15, 23, 42, 0.45);
}
.badge.command-policy-allowed,
.badge.command-policy-monitored {
  border-color: rgba(59, 130, 246, 0.55);
}
.badge.command-policy-confirmation_required,
.badge.command-policy-confirmation-required {
  border-color: rgba(245, 158, 11, 0.7);
}
.badge.command-policy-blocked {
  border-color: rgba(239, 68, 68, 0.75);
}


/* Command Center batch 4 */
.compact-list {
  margin: 0;
  padding-inline-start: 1.1rem;
}
.compact-list li {
  margin: .25rem 0;
}
.summary-grid.small .summary-card {
  min-height: 92px;
}
.command-review-result,
#command-review-result {
  max-height: 360px;
  overflow: auto;
}
.risk-high {
  background: rgba(245, 158, 11, .18);
  color: #92400e;
}
.command-evidence-card {
  border: 1px solid var(--border-color, rgba(148,163,184,.24));
  border-radius: 14px;
  padding: 1rem;
}


.command-evidence-governance,
#policy-management,
#advanced-evidence {
  scroll-margin-top: 1rem;
}

.json-output.compact {
  max-height: 12rem;
  overflow: auto;
  font-size: 0.82rem;
}

.operation-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.command-policy-blocked { border-color: rgba(239, 68, 68, 0.55); }
.command-policy-confirmation_required { border-color: rgba(245, 158, 11, 0.55); }
.command-policy-allowed { border-color: rgba(34, 197, 94, 0.55); }


/* Security, Users & Access center */
.security-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.88));
  margin-bottom: 1rem;
}
.security-hero .page-title { margin: 0.1rem 0; }
.page-subtitle { color: #cbd5e1; margin: 0.25rem 0 0; max-width: 72ch; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; color: #93c5fd; margin: 0; }
.security-principle {
  display: flex;
  gap: .75rem;
  align-items: center;
  border: 1px solid rgba(59, 130, 246, .35);
  background: rgba(37, 99, 235, .12);
  border-radius: .85rem;
  padding: .8rem 1rem;
  margin: .75rem 0 1rem;
}
.security-summary .summary-card { text-decoration: none; }
.tone-ok { border-color: rgba(34,197,94,.38) !important; }
.tone-warning { border-color: rgba(245,158,11,.52) !important; }
.tone-critical { border-color: rgba(239,68,68,.55) !important; }
.security-tabs { flex-wrap: wrap; }
.kv-grid {
  display: grid;
  grid-template-columns: minmax(10rem, 18rem) 1fr;
  gap: .55rem .9rem;
}
.kv-grid dt { color: #94a3b8; }
.kv-grid dd { margin: 0; }
.badge.ok, .badge.risk-low { background: rgba(34,197,94,.15); color: #86efac; border: 1px solid rgba(34,197,94,.35); }
.badge.warn, .badge.risk-medium, .badge.risk-high { background: rgba(245,158,11,.16); color: #facc15; border: 1px solid rgba(245,158,11,.38); }
.badge.danger, .badge.risk-critical { background: rgba(239,68,68,.16); color: #fca5a5; border: 1px solid rgba(239,68,68,.40); }
.pill-list, .feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.pill, .feature-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 999px;
  padding: .25rem .55rem;
  background: rgba(15,23,42,.35);
  color: #cbd5e1;
  font-size: .85rem;
}
.feature-chip.enabled {
  border-color: rgba(34,197,94,.34);
  color: #bbf7d0;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .75rem;
}
.mini-card, .notice-card {
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(15,23,42,.28);
  border-radius: .8rem;
  padding: .85rem;
}
.mini-card h3 { margin-top: 0; }
.status-ok { border-color: rgba(34,197,94,.35); }
.status-warning { border-color: rgba(245,158,11,.38); }
.status-planned { border-color: rgba(59,130,246,.35); }
.notice-card.critical { border-color: rgba(239,68,68,.45); }
.notice-card.warning { border-color: rgba(245,158,11,.45); }
.check-list { margin: 0; padding-inline-start: 1.2rem; }
.check-list li { margin: .35rem 0; }
.numbered-list li { margin: .35rem 0; }
.mini-json { max-height: 20rem; overflow: auto; }
.small { font-size: .82rem; }
@media (max-width: 900px) {
  .security-hero { flex-direction: column; }
  .kv-grid { grid-template-columns: 1fr; }
}


/* Security Users & Access batch 2 */
.success-panel {
  border: 1px solid rgba(34, 197, 94, .45);
  background: linear-gradient(135deg, rgba(34, 197, 94, .10), rgba(14, 165, 233, .06));
}
.copy-row {
  display: flex;
  gap: .75rem;
  align-items: center;
}
.copy-row input {
  flex: 1;
  min-width: 0;
}
.wizard-form fieldset {
  border: 1px solid var(--border, rgba(148, 163, 184, .25));
  border-radius: 18px;
  padding: 1rem;
  margin: 1rem 0;
  background: rgba(15, 23, 42, .025);
}
.wizard-form legend {
  font-weight: 700;
  padding: 0 .5rem;
}
.permission-group {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px dashed rgba(148, 163, 184, .3);
}
.large-dialog {
  width: min(1100px, 94vw);
  max-height: 90vh;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 22px;
  padding: 1.25rem;
  background: var(--panel-bg, #0f172a);
  color: inherit;
  box-shadow: 0 25px 80px rgba(0, 0, 0, .35);
}
.large-dialog::backdrop {
  background: rgba(2, 6, 23, .68);
  backdrop-filter: blur(3px);
}
.dialog-close {
  float: inline-end;
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  padding: 0;
}
.inline-actions {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}
.inline-actions form {
  margin: 0;
}
button.mini, .button.mini {
  padding: .32rem .55rem;
  font-size: .82rem;
}
.check-row {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.compact-tabs {
  margin: 1rem 0;
}

/* Security batch 4: authenticators, sessions, grants, and recovery codes */
.critical-panel {
  border: 1px solid rgba(185, 28, 28, .25);
  box-shadow: 0 12px 30px rgba(185, 28, 28, .08);
}
.mini-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: var(--panel);
}
button.mini, .button.mini {
  padding: 5px 9px;
  font-size: .82rem;
  margin: 2px;
}
.security-stepup-form textarea {
  min-height: 80px;
}
.badge.risk-low { background: #dcfce7; color: #166534; }
.badge.risk-moderate, .badge.risk-medium { background: #fef3c7; color: #92400e; }
.badge.risk-high { background: #ffedd5; color: #9a3412; }
.badge.risk-critical { background: #fee2e2; color: #991b1b; }


.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .5rem .75rem;
  margin: .5rem 0;
}

.checkbox-grid label {
  align-items: center;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: .75rem;
  display: flex;
  gap: .5rem;
  padding: .55rem .7rem;
}

.compact-summary {
  margin: .75rem 0 1rem;
}

.summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
}
.summary-strip span { display: inline-flex; gap: 6px; align-items: center; }
.code-input { min-height: 150px; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; direction: ltr; }
.badge.monitor { background: #eef2ff; color: #3730a3; }
.badge.enforce { background: #fee2e2; color: #991b1b; }
.badge.high { background: #ffedd5; color: #9a3412; }
.badge.critical { background: #fee2e2; color: #991b1b; }
.pill.danger { border-color: rgba(185, 28, 28, .35); color: var(--danger); background: #fee2e2; }

/* Resilience Testing Center */
.resilience-center { display: grid; gap: 18px; }
.resilience-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, .10), transparent 35%),
    var(--panel);
  box-shadow: var(--shadow);
}
.resilience-hero h1 { margin: 4px 0 8px; font-size: clamp(1.65rem, 3vw, 2.35rem); }
.resilience-hero p { max-width: 780px; margin: 0; color: var(--muted); }
.resilience-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; min-width: 300px; }
.resilience-safety-banner {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(300px, 1fr);
  gap: 20px;
  border-inline-start: 5px solid var(--primary);
}
.resilience-safety-banner p { margin: 6px 0 0; color: var(--muted); }
.resilience-safety-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 9px;
}
.resilience-safety-grid span,
.resilience-impact-preview span {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  font-size: .9rem;
}
.resilience-safety-grid b,
.resilience-impact-preview b { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.resilience-agent-warning { display: grid; gap: 4px; }
.resilience-agent-warning code { max-width: 100%; overflow-wrap: anywhere; }
.resilience-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
}
.resilience-summary-card {
  display: grid;
  gap: 5px;
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 5px 16px rgba(15, 23, 42, .05);
}
.resilience-summary-card > span { color: var(--muted); font-weight: 600; }
.resilience-summary-card > strong { font-size: 1.8rem; line-height: 1.1; }
.resilience-summary-card small { color: var(--muted); align-self: end; }
.panel-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.panel-heading-row h2 { margin: 0 0 4px; }
.panel-heading-row p { margin: 0; color: var(--muted); }
.resilience-mode-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  border: 1px solid var(--border);
}
.resilience-mode-badge.safe {
  color: var(--success);
  background: rgba(4, 120, 87, .08);
  border-color: rgba(4, 120, 87, .25);
}
.resilience-mode-badge.live {
  color: var(--danger);
  background: rgba(185, 28, 28, .10);
  border-color: rgba(185, 28, 28, .30);
}
.resilience-live-panel {
  border-color: rgba(185, 28, 28, .28);
}
.resilience-progress {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.resilience-progress > span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #60a5fa);
}
.resilience-coverage-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 16px;
}
.resilience-coverage-columns h3 { margin: 0 0 8px; font-size: 1rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  font-size: .82rem;
}
.chip.subtle { color: var(--muted); background: transparent; }
.resilience-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.resilience-filters label,
.resilience-dialog label { display: grid; gap: 5px; }
.resilience-filters label > span,
.resilience-dialog label > span { color: var(--muted); font-size: .82rem; font-weight: 700; }
.table-scroll { overflow-x: auto; }
.resilience-table { min-width: 1280px; }
.resilience-table td { vertical-align: top; }
.resilience-table td:nth-child(2) { min-width: 260px; }
.resilience-table td:nth-child(5),
.resilience-table td:nth-child(6) { min-width: 220px; }
.resilience-table td strong,
.resilience-table td small { display: block; }
.resilience-table td small { color: var(--muted); margin-top: 5px; }
.table-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.button.small,
button.small { padding: 6px 9px; font-size: .78rem; }
.copy-inline {
  border: 0;
  padding: 0;
  margin: 3px 0 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: start;
}
.copy-inline code { color: var(--muted); }
.copy-inline.copied code { color: var(--success); }
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  text-transform: capitalize;
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.status-passed { color: var(--success); border-color: rgba(4, 120, 87, .25); background: rgba(4, 120, 87, .08); }
.status-failed,
.status-internal_error,
.status-recovery_required { color: var(--danger); border-color: rgba(185, 28, 28, .25); background: rgba(185, 28, 28, .08); }
.status-blocked,
.status-timed_out,
.status-interrupted { color: var(--warning); border-color: rgba(180, 83, 9, .25); background: rgba(180, 83, 9, .08); }
.status-running,
.status-queued { color: var(--primary); border-color: rgba(29, 78, 216, .25); background: rgba(29, 78, 216, .08); }
.status-never_tested,
.status-skipped { color: var(--muted); }
.status-text { text-transform: capitalize; }
.empty-state { padding: 22px; color: var(--muted); text-align: center; }
.resilience-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}
.resilience-dialog.wide { width: min(1040px, calc(100vw - 32px)); }
.resilience-dialog::backdrop { background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); }
.resilience-dialog h2 { margin: 4px 0 8px; overflow-wrap: anywhere; }
.resilience-dialog .dialog-close { position: sticky; float: inline-end; top: 0; z-index: 2; }
.resilience-impact-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 9px;
  margin: 16px 0;
}
.resilience-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.resilience-detail-grid > div {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
}
.resilience-detail-grid span { color: var(--muted); font-size: .78rem; }
.resilience-dialog-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.resilience-dialog-section h3 { margin: 0 0 8px; }
.resilience-result-card {
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
.resilience-result-card > summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
}
.resilience-result-card > summary span:first-child { display: grid; gap: 3px; }
.resilience-result-card > summary code { color: var(--muted); }
.resilience-result-card[open] > summary { border-bottom: 1px solid var(--border); }
.resilience-actual-expected {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px;
}
.resilience-actual-expected > div {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-2);
}
.resilience-actual-expected span { color: var(--muted); font-size: .78rem; font-weight: 700; }
.resilience-actual-expected p { margin: 5px 0 0; }
.resilience-assertions { display: grid; gap: 9px; padding: 0 14px 14px; }
.resilience-assertion {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.resilience-assertion > div:first-child { display: grid; gap: 3px; }
.resilience-assertion code { color: var(--muted); }
.resilience-assertion dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px;
  margin: 0;
}
.resilience-assertion dl > div {
  padding: 8px;
  border-radius: 8px;
  background: var(--panel-2);
}
.resilience-assertion dt { color: var(--muted); font-size: .75rem; font-weight: 700; }
.resilience-assertion dd { margin: 3px 0 0; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .resilience-summary-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .resilience-filters { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .resilience-safety-banner { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .resilience-hero { padding: 20px; }
  .resilience-hero,
  .panel-heading-row { flex-direction: column; }
  .resilience-hero-actions { justify-content: flex-start; min-width: 0; width: 100%; }
  .resilience-summary-grid,
  .resilience-filters,
  .resilience-coverage-columns,
  .resilience-detail-grid,
  .resilience-impact-preview,
  .resilience-actual-expected,
  .resilience-assertion dl { grid-template-columns: 1fr; }
  .resilience-safety-grid { grid-template-columns: 1fr; }
}



.resilience-analytics-panel { margin-top: 1rem; }
.resilience-component-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.75rem; margin:1rem 0; }
.resilience-component-card { border:1px solid var(--border-color, #d7dde5); border-radius:12px; padding:.85rem; display:grid; gap:.35rem; }
.resilience-component-card progress { width:100%; }
.resilience-category-table-wrap { overflow:auto; }
.transition-regression td { font-weight:600; }
.transition-improvement td { font-weight:600; }


.resilience-mode-badge.sandbox {
  border-color: color-mix(in srgb, var(--warning), transparent 35%);
}

.resilience-sandbox-panel code,
.resilience-sandbox-resources code {
  word-break: break-all;
}

.resilience-sandbox-resources {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}


/* Platform Settings Center */
.settings-hero {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.settings-hero .hero-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  color: var(--muted);
  margin: 0 0 .25rem;
}
.settings-safety {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .85rem;
  margin: 1rem 0;
}
.metric-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1rem;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.metric-card strong {
  font-size: 1.65rem;
  line-height: 1.05;
}
.metric-card small,
.metric-label {
  color: var(--muted);
}
.metric-ok {
  border-color: rgba(62, 207, 142, .35);
}
.metric-warning,
.metric-pending {
  border-color: rgba(251, 191, 36, .55);
}
.metric-danger {
  border-color: rgba(239, 68, 68, .55);
}
.health-pill {
  display: inline-flex;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, .16);
  border: 1px solid var(--border);
  margin-bottom: .75rem;
}
.health-healthy {
  background: rgba(62, 207, 142, .12);
  border-color: rgba(62, 207, 142, .45);
}
.health-agent_offline,
.health-agent_differs,
.health-pending_sync {
  background: rgba(251, 191, 36, .12);
  border-color: rgba(251, 191, 36, .45);
}
.health-invalid_configuration,
.health-apply_failed,
.health-recovery_required {
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .45);
}
.split-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: .65rem;
  margin-bottom: 1rem;
}
.split-metrics div {
  background: rgba(148, 163, 184, .08);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .75rem;
}
.split-metrics strong {
  display: block;
  font-size: 1.35rem;
}
.split-metrics span {
  color: var(--muted);
  font-size: .82rem;
}
.section-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .75rem;
}
.section-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: .9rem;
  background: rgba(148, 163, 184, .07);
}
.section-card.future {
  opacity: .78;
}
.section-card p {
  color: var(--muted);
  min-height: 3.25rem;
}
.settings-form .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.settings-form fieldset {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1rem;
}
.settings-form legend {
  padding: 0 .35rem;
  color: var(--text);
  font-weight: 700;
}
.settings-form label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .75rem;
}
.settings-form .toggle-row {
  flex-direction: row;
  align-items: center;
}
.compact-table {
  width: 100%;
}
.compact-table th,
.compact-table td {
  padding: .55rem .6rem;
}
.status-list {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
}
.status-list li {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .55rem .7rem;
  margin-bottom: .45rem;
  background: rgba(148, 163, 184, .07);
}
.status-list li.warning {
  border-color: rgba(251, 191, 36, .55);
}
.status-list li.danger {
  border-color: rgba(239, 68, 68, .55);
}
.badge.success {
  background: rgba(62, 207, 142, .14);
}
.badge.warning {
  background: rgba(251, 191, 36, .16);
}
.badge.danger {
  background: rgba(239, 68, 68, .16);
}



/* Platform Settings batch 2 */
.section-heading-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: .85rem;
}
.mode-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .9rem;
}
.mode-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(148, 163, 184, .07);
}
.mode-card.current {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary), transparent 50%);
}
.mode-card-top {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: flex-start;
}
.mode-card-top strong,
.mode-card-top span {
  display: block;
}
.mode-card-top span {
  color: var(--muted);
}
.mode-card h4 {
  margin: .85rem 0 .35rem;
}
.compact-list {
  margin-top: .35rem;
}
.compact-list li {
  padding: .35rem .5rem;
  margin-bottom: .3rem;
}
.impact-tags {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  align-items: center;
}
.responsive-table {
  width: 100%;
  overflow-x: auto;
}
.feature-catalog-table td,
.feature-catalog-table th {
  vertical-align: top;
}
.feature-row.status-dependency_missing {
  outline: 1px solid rgba(239, 68, 68, .35);
}
.feature-row.status-pending_apply,
.feature-row.status-restart_required,
.feature-row.status-agent_unavailable {
  outline: 1px solid rgba(251, 191, 36, .35);
}
.feature-toggle-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.feature-toggle {
  align-items: flex-start;
  min-height: 84px;
}
.feature-toggle span {
  display: grid;
  gap: .15rem;
}
.feature-toggle small {
  color: var(--muted);
}
.feature-toggle.status-dependency_missing {
  border-color: rgba(239, 68, 68, .55);
}
.impact-preview-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(148, 163, 184, .07);
}
.notice.subtle {
  background: rgba(148, 163, 184, .09);
  border-color: var(--border);
}
@media (max-width: 760px) {
  .section-heading-row {
    display: block;
  }
  .mode-card-grid {
    grid-template-columns: 1fr;
  }
}


/* -------------------------------------------------------------------------
   BLACK X / BLACK TECH UI/UX Batch 1 — Design System Foundation
   Applies the unified Midnight Navy, Heritage Gold, Warm Ivory and Jade Teal
   identity across the existing control-plane components without requiring
   template-specific migrations.
   ------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Core brand */
  --bx-navy: #1F2A44;
  --bx-ivory: #E8DCC8;
  --bx-gold: #C6A75E;
  --bx-teal: #2FA68E;

  /* Background system */
  --bx-absolute-shadow: #01040B;
  --bx-background-deep: #03070D;
  --bx-obsidian: #050A11;
  --bx-ink-navy: #09111D;
  --bx-background-raised: #0A1422;
  --bx-background-soft: #142238;
  --bx-slate-navy: #2B3A59;
  --bx-steel-blue: #3B4D6E;

  /* Neutral metal */
  --bx-graphite: #292C31;
  --bx-gunmetal: #47494C;
  --bx-steel: #85898D;
  --bx-silver: #B7B5AD;

  /* Gold ramp */
  --bx-gold-shadow: #5A3B17;
  --bx-gold-dark: #7D5426;
  --bx-gold-mid: #9F743A;
  --bx-gold-light: #D7B96F;
  --bx-gold-highlight: #F5DE9D;

  /* Ivory ramp */
  --bx-ivory-shadow: #A49A84;
  --bx-ivory-muted: #C5B9A3;
  --bx-ivory-light: #F1E7D5;
  --bx-ivory-highlight: #FEFCEB;

  /* Teal ramp */
  --bx-teal-shadow: #0B3E39;
  --bx-teal-dark: #176F63;
  --bx-teal-light: #63BEAC;
  --bx-teal-pale: #B9E4DA;

  /* Existing semantic variables remapped to brand tokens */
  --bg: var(--bx-background-deep);
  --panel: rgba(10, 20, 34, .92);
  --panel-2: rgba(20, 34, 56, .86);
  --text: var(--bx-ivory-light);
  --muted: var(--bx-ivory-muted);
  --border: rgba(198, 167, 94, .22);
  --primary: var(--bx-gold);
  --primary-2: var(--bx-gold-light);
  --danger: #D86F64;
  --warning: var(--bx-gold-light);
  --success: var(--bx-teal);
  --shadow: 0 20px 60px rgba(1, 4, 11, .42), 0 1px 0 rgba(245, 222, 157, .05);

  --ui-radius-xs: 8px;
  --ui-radius-sm: 12px;
  --ui-radius-md: 16px;
  --ui-radius-lg: 22px;
  --ui-gap-xs: .45rem;
  --ui-gap-sm: .7rem;
  --ui-gap-md: 1rem;
  --ui-gap-lg: 1.35rem;
  --ui-gap-xl: 1.85rem;
  --ui-control-height: 2.65rem;
  --ui-focus: 0 0 0 3px rgba(47, 166, 142, .28);
  --ui-gold-metal: linear-gradient(135deg, #5A3B17 0%, #9F743A 18%, #C6A75E 38%, #F5DE9D 51%, #D7B96F 63%, #7D5426 84%, #5A3B17 100%);
  --ui-graphite-metal: linear-gradient(135deg, #171A1F 0%, #292C31 28%, #47494C 48%, #85898D 53%, #34373B 68%, #171A1F 100%);
  --ui-ivory-metal: linear-gradient(180deg, #FEFCEB 0%, #E8DCC8 32%, #C5B9A3 70%, #F1E7D5 100%);
  --ui-teal-inlay: linear-gradient(145deg, #0B3E39 0%, #176F63 28%, #2FA68E 55%, #63BEAC 72%, #10554D 100%);
}

html {
  scroll-behavior: smooth;
}

body.blackx-shell,
body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 26%, rgba(31, 42, 68, .94) 0%, rgba(20, 34, 56, .82) 21%, rgba(10, 20, 34, .94) 52%, rgba(5, 10, 17, .98) 78%, #03070D 100%);
  color: var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(115deg, rgba(198, 167, 94, .045), transparent 28%, rgba(47, 166, 142, .035) 54%, transparent 72%),
    radial-gradient(circle at 15% 14%, rgba(245, 222, 157, .06), transparent 24%),
    radial-gradient(circle at 86% 8%, rgba(47, 166, 142, .08), transparent 22%);
}

.skip-link {
  position: fixed;
  inset-inline-start: 1rem;
  top: .75rem;
  transform: translateY(-150%);
  z-index: 9999;
  padding: .65rem 1rem;
  border-radius: 999px;
  background: var(--ui-gold-metal);
  color: #120D05;
  font-weight: 800;
  box-shadow: var(--shadow);
}
.skip-link:focus {
  transform: translateY(0);
  outline: none;
}

a {
  color: var(--bx-gold-light);
  text-decoration-color: rgba(198, 167, 94, .35);
  text-underline-offset: .18em;
}
a:hover {
  color: var(--bx-gold-highlight);
  text-decoration-color: currentColor;
}

.layout {
  grid-template-columns: minmax(260px, 292px) minmax(0, 1fr);
  background: transparent;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(3, 7, 13, .98), rgba(5, 10, 17, .96) 48%, rgba(1, 4, 11, .98)),
    radial-gradient(circle at 50% 0%, rgba(31, 42, 68, .68), transparent 40%);
  border-inline-end: 1px solid rgba(198, 167, 94, .18);
  box-shadow: 18px 0 48px rgba(1, 4, 11, .42);
  padding: 1rem .9rem;
  scrollbar-color: rgba(198, 167, 94, .35) rgba(255,255,255,.04);
}

.brand {
  gap: .8rem;
  padding: .45rem .55rem 1.05rem;
  margin-bottom: .45rem;
  border-bottom: 1px solid rgba(198, 167, 94, .16);
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #120D05;
  background:
    linear-gradient(145deg, rgba(255, 240, 194, .86), transparent 26%),
    var(--ui-gold-metal);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(90,59,23,.9),
    0 14px 28px rgba(1,4,11,.45);
  letter-spacing: .04em;
}

.brand-copy strong {
  display: block;
  font-size: 1.02rem;
  line-height: 1.15;
  color: var(--bx-ivory-highlight);
  letter-spacing: .015em;
}
.brand small,
.brand-copy small {
  color: var(--bx-ivory-shadow);
  margin-top: .18rem;
}

.nav {
  gap: .24rem;
  padding-block: .25rem;
}

.nav a {
  display: flex;
  align-items: center;
  min-height: 2.45rem;
  padding: .6rem .72rem;
  color: rgba(232, 220, 200, .78);
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.nav a:hover {
  color: var(--bx-ivory-highlight);
  background: rgba(31, 42, 68, .62);
  border-color: rgba(198, 167, 94, .16);
  transform: translateX(2px);
}
[dir="rtl"] .nav a:hover {
  transform: translateX(-2px);
}
.nav a.active,
.nav a[aria-current="page"] {
  color: var(--bx-gold-highlight);
  background:
    linear-gradient(90deg, rgba(198, 167, 94, .18), rgba(47, 166, 142, .08)),
    rgba(20, 34, 56, .78);
  border-color: rgba(198, 167, 94, .36);
  box-shadow: inset 3px 0 0 var(--bx-gold);
}
[dir="rtl"] .nav a.active,
[dir="rtl"] .nav a[aria-current="page"] {
  box-shadow: inset -3px 0 0 var(--bx-gold);
}

.sidebar-footer {
  border-top-color: rgba(198, 167, 94, .18);
}

.main {
  background:
    linear-gradient(180deg, rgba(9, 17, 29, .44), rgba(3, 7, 13, .2));
}

.topbar {
  min-height: 4.25rem;
  background: rgba(5, 10, 17, .78);
  border-bottom: 1px solid rgba(198, 167, 94, .18);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 30px rgba(1, 4, 11, .28);
  padding: .9rem clamp(1rem, 2.1vw, 1.65rem);
}

.topbar-title {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}

.topbar-title strong {
  color: var(--bx-ivory-highlight);
  font-size: clamp(1rem, 1.3vw, 1.22rem);
  letter-spacing: .015em;
  overflow-wrap: anywhere;
}

.topbar-actions,
.actions,
.page-actions,
.form-actions,
.toolbar,
.filter-actions,
.modal-actions,
.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
}

.sidebar-toggle {
  display: none;
}

.content {
  width: min(100%, 1680px);
  padding: clamp(1rem, 2.4vw, 2rem);
}

.page-title,
.page-heading,
h1 {
  color: var(--bx-ivory-highlight);
  letter-spacing: -.015em;
}

.page-title {
  margin-bottom: 1.2rem;
  font-size: clamp(1.55rem, 2.35vw, 2.3rem);
}

.panel,
.card,
.metric-card,
.section-card,
.mode-card,
.impact-preview-card,
.summary-card,
.operation-card,
details {
  background:
    linear-gradient(180deg, rgba(20, 34, 56, .88), rgba(10, 20, 34, .9)),
    radial-gradient(circle at 18% 0%, rgba(198, 167, 94, .08), transparent 38%);
  border: 1px solid rgba(198, 167, 94, .2);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--shadow);
}

.panel,
.card {
  padding: clamp(1rem, 1.6vw, 1.35rem);
}

.panel {
  margin-bottom: var(--ui-gap-lg);
}

.panel h2,
.panel h3,
.card h3,
.card h4,
.section-card h3,
.section-card h4 {
  color: var(--bx-ivory-highlight);
  letter-spacing: .005em;
}

.panel > :first-child,
.card > :first-child {
  margin-top: 0;
}

.panel > :last-child,
.card > :last-child {
  margin-bottom: 0;
}

.grid {
  gap: var(--ui-gap-lg);
}

.grid.cards,
.summary-grid,
.metrics-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.metric,
.metric-card strong {
  color: var(--bx-gold-highlight);
  font-weight: 800;
}

.muted,
.metric-label,
.metric-card small,
.helptext,
.hint,
small {
  color: var(--muted);
}

.badge,
.status-badge,
.mode-badge,
.health-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 1.65rem;
  padding: .25rem .68rem;
  border-radius: 999px;
  color: var(--bx-ivory-light);
  background: rgba(183, 181, 173, .12);
  border: 1px solid rgba(183, 181, 173, .2);
  white-space: nowrap;
  font-weight: 700;
}

.badge.success,
.status-success,
.health-healthy,
.metric-ok {
  color: var(--bx-teal-pale);
  background: rgba(47, 166, 142, .16);
  border-color: rgba(47, 166, 142, .42);
}

.badge.warning,
.status-warning,
.metric-warning,
.metric-pending {
  color: var(--bx-gold-highlight);
  background: rgba(198, 167, 94, .16);
  border-color: rgba(198, 167, 94, .46);
}

.badge.danger,
.status-danger,
.status-error,
.metric-danger {
  color: #FFD8D2;
  background: rgba(216, 111, 100, .15);
  border-color: rgba(216, 111, 100, .48);
}

.table-wrap,
.responsive-table,
.table-scroll {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--ui-radius-md);
  border: 1px solid rgba(198, 167, 94, .14);
  background: rgba(3, 7, 13, .26);
}

.table-wrap table,
.responsive-table table,
.table-scroll table {
  min-width: 760px;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  color: var(--text);
}

th,
td {
  border-bottom: 1px solid rgba(198, 167, 94, .14);
  padding: .75rem .85rem;
}

th {
  background: rgba(20, 34, 56, .88);
  color: var(--bx-gold-highlight);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .055em;
}

tbody tr {
  background: rgba(10, 20, 34, .32);
}
tbody tr:nth-child(even) {
  background: rgba(20, 34, 56, .22);
}
tbody tr:hover {
  background: rgba(47, 166, 142, .07);
}

input,
select,
textarea {
  min-height: var(--ui-control-height);
  border-radius: var(--ui-radius-sm);
  border: 1px solid rgba(198, 167, 94, .22);
  background: rgba(3, 7, 13, .58);
  color: var(--bx-ivory-light);
  padding: .68rem .78rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

textarea {
  min-height: 8rem;
}

input::placeholder,
textarea::placeholder {
  color: rgba(197, 185, 163, .58);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
.button:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus);
  border-color: rgba(47, 166, 142, .72);
}

select {
  accent-color: var(--bx-gold);
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.05rem;
  min-height: 1.05rem;
  accent-color: var(--bx-teal);
}

label {
  color: var(--bx-ivory-light);
}

.form-row {
  grid-template-columns: minmax(150px, .36fr) minmax(0, 1fr);
  gap: .75rem 1rem;
  align-items: start;
}

form.stack,
.form-grid,
.filters,
.filter-row,
.search-row,
.control-row,
.input-row {
  gap: var(--ui-gap-md);
}

.filters,
.filter-row,
.search-row,
.control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
}

.filters > *,
.filter-row > *,
.search-row > *,
.control-row > * {
  min-width: min(100%, 14rem);
}

button,
.button {
  min-height: var(--ui-control-height);
  border-radius: var(--ui-radius-sm);
  padding: .64rem .95rem;
  border: 1px solid rgba(245, 222, 157, .18);
  color: #140F07;
  background: var(--ui-gold-metal);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 10px 22px rgba(1,4,11,.28);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  white-space: normal;
}

button:hover,
.button:hover {
  background: var(--ui-gold-metal);
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 14px 28px rgba(1,4,11,.36);
}

button.secondary,
.button.secondary {
  color: var(--bx-ivory-light);
  background:
    linear-gradient(135deg, rgba(23, 26, 31, .96), rgba(41, 44, 49, .92) 44%, rgba(71, 73, 76, .85) 58%, rgba(20, 34, 56, .9));
  border-color: rgba(183, 181, 173, .22);
}

button.ghost,
.button.ghost,
button.linklike,
.button.linklike {
  color: var(--bx-gold-light);
  background: rgba(198, 167, 94, .08);
  border-color: rgba(198, 167, 94, .24);
  box-shadow: none;
}

button.danger,
.button.danger {
  color: #FFF3EE;
  background: linear-gradient(135deg, #4A1310, #8F2E26 42%, #D86F64 72%, #5B1A14);
  border-color: rgba(216, 111, 100, .44);
}

button.warning,
.button.warning {
  color: #140F07;
  background: linear-gradient(135deg, #5A3B17, #C6A75E 48%, #F5DE9D 72%, #7D5426);
}

button.success,
.button.success {
  color: #EFFFFB;
  background: var(--ui-teal-inlay);
  border-color: rgba(99, 190, 172, .44);
}

button:disabled,
.button[aria-disabled="true"],
.button.disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
  filter: saturate(.55);
}

.actions {
  margin-top: .25rem;
}

.actions > *,
.topbar-actions > *,
.form-actions > *,
.page-actions > *,
.card-actions > * {
  flex: 0 1 auto;
}

.result-box,
pre,
code {
  border: 1px solid rgba(198, 167, 94, .16);
}

pre,
.result-box {
  background:
    linear-gradient(180deg, rgba(1,4,11,.96), rgba(5,10,17,.98));
  color: #E8F6F1;
  border-radius: var(--ui-radius-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

code {
  color: var(--bx-gold-highlight);
  background: rgba(1,4,11,.42);
  border-radius: 6px;
  padding: .08rem .28rem;
}

.message,
.notice,
.alert,
.error-box {
  border-radius: var(--ui-radius-md);
  border: 1px solid rgba(198, 167, 94, .22);
}

.message {
  color: var(--bx-ivory-light);
  background: rgba(31, 42, 68, .82);
}

.message.success,
.notice.success {
  color: var(--bx-teal-pale);
  background: rgba(47, 166, 142, .13);
  border-color: rgba(47, 166, 142, .36);
}

.message.error,
.error-box,
.notice.danger {
  color: #FFD8D2;
  background: rgba(216, 111, 100, .13);
  border-color: rgba(216, 111, 100, .38);
}

.message.warning,
.notice.warning {
  color: var(--bx-gold-highlight);
  background: rgba(198, 167, 94, .14);
  border-color: rgba(198, 167, 94, .42);
}

dialog {
  width: min(92vw, 760px);
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(20, 34, 56, .98), rgba(5, 10, 17, .98));
  border: 1px solid rgba(198, 167, 94, .32);
  border-radius: var(--ui-radius-lg);
  box-shadow: 0 28px 90px rgba(1,4,11,.72);
  padding: clamp(1rem, 2vw, 1.35rem);
}
dialog::backdrop {
  background: rgba(1, 4, 11, .72);
  backdrop-filter: blur(6px);
}

details {
  padding: .85rem 1rem;
}
summary {
  cursor: pointer;
  color: var(--bx-gold-highlight);
  font-weight: 800;
}

hr {
  border: 0;
  border-top: 1px solid rgba(198, 167, 94, .16);
  margin: var(--ui-gap-lg) 0;
}

.empty-state,
.loading-state,
.error-state {
  border: 1px dashed rgba(198, 167, 94, .28);
  border-radius: var(--ui-radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: rgba(20, 34, 56, .38);
  color: var(--muted);
  text-align: center;
}

.compact-table th,
.compact-table td {
  padding: .62rem .7rem;
}

@media (max-width: 1180px) {
  .layout {
    grid-template-columns: 248px minmax(0, 1fr);
  }

  .content {
    padding: 1.1rem;
  }
}

@media (max-width: 980px) {
  .layout {
    display: block;
  }

  .sidebar-toggle {
    display: inline-flex;
  }

  .sidebar {
    position: fixed;
    z-index: 90;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(86vw, 310px);
    height: 100vh;
    transform: translateX(-105%);
    transition: transform .24s ease;
  }

  [dir="rtl"] .sidebar {
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform: translateX(105%);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(1,4,11,.64);
    backdrop-filter: blur(3px);
  }

  .topbar {
    position: sticky;
    top: 0;
  }

  .topbar,
  .topbar-title,
  .topbar-actions {
    align-items: center;
  }
}

@media (max-width: 760px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-title,
  .topbar-actions {
    justify-content: space-between;
  }

  .topbar-actions > *,
  .actions > *,
  .page-actions > *,
  .form-actions > *,
  .toolbar > *,
  .filter-actions > *,
  .card-actions > * {
    flex: 1 1 11rem;
  }

  .grid.two,
  .grid.three,
  .editor-layout,
  .form-row {
    grid-template-columns: 1fr;
  }

  .filters,
  .filter-row,
  .search-row,
  .control-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .filters > *,
  .filter-row > *,
  .search-row > *,
  .control-row > * {
    min-width: 0;
  }

  button,
  .button,
  input,
  select,
  textarea {
    width: 100%;
  }

  table {
    font-size: .92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* BLACK X UI/UX Batch 2 — control centers layout cleanup */
:root {
  --ui-page-max: 1720px;
  --ui-control-gap: clamp(1rem, 1.8vw, 1.5rem);
  --ui-control-gap-sm: clamp(.65rem, 1vw, .95rem);
  --ui-control-gap-lg: clamp(1.25rem, 2.4vw, 2rem);
  --ui-field-min: 13.5rem;
  --ui-button-min: 9.25rem;
}

.control-center-page {
  display: grid;
  gap: var(--ui-control-gap);
  width: min(100%, var(--ui-page-max));
  margin-inline: auto;
}

.control-center-page > * {
  min-width: 0;
}

.control-center-page .control-center-hero,
.control-center-page > .page-hero,
.control-center-page > .page-header,
.control-center-page > .hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .85fr);
  align-items: start;
  gap: var(--ui-control-gap-lg);
  padding: clamp(1.1rem, 2.6vw, 2rem);
  overflow: hidden;
  border-radius: var(--ui-radius-xl);
  border: 1px solid rgba(198, 167, 94, .28);
  background:
    radial-gradient(circle at 18% 0%, rgba(198, 167, 94, .14), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(47, 166, 142, .12), transparent 26%),
    linear-gradient(135deg, rgba(31, 42, 68, .98), rgba(10, 20, 34, .96) 55%, rgba(3, 7, 13, .98));
  box-shadow: 0 22px 70px rgba(1, 4, 11, .42), inset 0 1px 0 rgba(255, 240, 194, .08);
}

.control-center-page .control-center-hero::before,
.control-center-page > .page-hero::before,
.control-center-page > .page-header::before,
.control-center-page > .hero-panel::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: .24rem;
  background: linear-gradient(180deg, var(--bx-gold-highlight), var(--bx-gold), var(--bx-teal));
  opacity: .88;
}

.control-center-page .control-center-hero > div:first-child,
.control-center-page > .page-hero > div:first-child,
.control-center-page > .page-header > div:first-child,
.control-center-page > .hero-panel > div:first-child {
  display: grid;
  gap: .45rem;
  min-width: 0;
}

.control-center-page .page-title {
  margin: 0;
  max-width: 48rem;
  letter-spacing: -.025em;
  line-height: 1.08;
}

.control-center-page .eyebrow {
  margin: 0;
  color: var(--bx-teal-pale);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.control-center-page .muted {
  max-width: 72ch;
}

.control-center-page .actions,
.control-center-page .hero-actions,
.control-center-page .page-actions,
.control-center-page .button-row,
.control-center-page .inline-actions,
.control-center-page .form-actions,
.control-center-page .filter-actions,
.control-center-page menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}

.control-center-page .control-center-hero .actions,
.control-center-page .control-center-hero .hero-actions,
.control-center-page .page-actions {
  justify-content: flex-end;
  align-content: flex-start;
  padding: .35rem;
  border-radius: var(--ui-radius-lg);
  background: rgba(1, 4, 11, .18);
  border: 1px solid rgba(198, 167, 94, .12);
}

.control-center-page .actions > form,
.control-center-page .hero-actions > form,
.control-center-page .page-actions > form,
.control-center-page .inline-actions > form,
.control-center-page .form-actions > form {
  display: contents;
}

.control-center-page .actions > *,
.control-center-page .hero-actions > *,
.control-center-page .page-actions > *,
.control-center-page .button-row > *,
.control-center-page .inline-actions > *,
.control-center-page .form-actions > *,
.control-center-page menu > * {
  flex: 0 1 auto;
  min-width: min(100%, var(--ui-button-min));
}

.control-center-page .actions.compact > *,
.control-center-page .button-row.compact > *,
.control-center-page .inline-actions > * {
  min-width: auto;
}

.control-center-page button,
.control-center-page .button {
  justify-content: center;
  white-space: normal;
  min-height: 2.55rem;
}

.control-center-page .panel,
.control-center-page .card,
.control-center-page .subpanel,
.control-center-page .notice-card,
.control-center-page .operation-card,
.control-center-page .operation-doc-card,
.control-center-page .info-card,
.control-center-page .stat-card,
.control-center-page .metric-card,
.control-center-page .settings-section-card,
.control-center-page .mode-card,
.control-center-page .feature-card,
.control-center-page .section-card {
  min-width: 0;
  overflow: clip;
}

.control-center-page .panel,
.control-center-page .subpanel,
.control-center-page .operation-card,
.control-center-page .operation-doc-card,
.control-center-page .notice-card,
.control-center-page .info-card,
.control-center-page .section-card {
  border-color: rgba(198, 167, 94, .18);
}

.control-center-page .panel > h2:first-child,
.control-center-page .panel > h3:first-child,
.control-center-page .section-heading,
.control-center-page .section-title,
.control-center-page .section-header,
.control-center-page .section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-control-gap-sm);
  margin-block-start: 0;
  padding-block-end: .7rem;
  border-bottom: 1px solid rgba(198, 167, 94, .13);
}

.control-center-page .section-header > *,
.control-center-page .section-heading-row > * {
  min-width: 0;
}

.control-center-page .control-summary-grid,
.control-center-page .metric-grid,
.control-center-page .overview-grid,
.control-center-page .audit-overview,
.control-center-page .deployment-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: var(--ui-control-gap-sm);
}

.control-center-page .stat-card,
.control-center-page .metric-card {
  padding: clamp(.95rem, 1.4vw, 1.3rem);
  background:
    linear-gradient(145deg, rgba(20, 34, 56, .88), rgba(5, 10, 17, .92)),
    radial-gradient(circle at 12% 0%, rgba(245, 222, 157, .08), transparent 38%);
}

.control-center-page .stat-card span,
.control-center-page .metric-card span,
.control-center-page .metric-label {
  display: block;
  color: var(--bx-ivory-muted);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.control-center-page .stat-card strong,
.control-center-page .metric-card strong {
  display: block;
  margin-block-start: .25rem;
  color: var(--bx-ivory-light);
  font-size: clamp(1.08rem, 1.7vw, 1.45rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.control-center-page .form-grid,
.control-center-page .filter-row,
.control-center-page .package-filter-form,
.control-center-page .audit-filters,
.control-center-page .settings-form,
.control-center-page form.stack,
.control-center-page form.ui-form,
.control-center-page .deployment-api-form,
.control-center-page .agent-operation.stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ui-field-min)), 1fr));
  align-items: end;
  gap: var(--ui-control-gap-sm);
}

.control-center-page form.stack > .form-actions,
.control-center-page .deployment-api-form > .form-actions,
.control-center-page .span-2,
.control-center-page .result-box,
.control-center-page .operation-result,
.control-center-page .audit-api-result,
.control-center-page .operation-result-card {
  grid-column: 1 / -1;
}

.control-center-page label,
.control-center-page .field,
.control-center-page .checkbox-line,
.control-center-page .checkbox-group,
.control-center-page .toggle-row {
  min-width: 0;
}

.control-center-page label > input,
.control-center-page label > select,
.control-center-page label > textarea,
.control-center-page .field > input,
.control-center-page .field > select,
.control-center-page .field > textarea {
  margin-block-start: .35rem;
}

.control-center-page input,
.control-center-page select,
.control-center-page textarea {
  min-width: 0;
}

.control-center-page .table-wrap,
.control-center-page .table-scroll,
.control-center-page .responsive-table {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--ui-radius-lg);
  border: 1px solid rgba(198, 167, 94, .16);
  background: rgba(1, 4, 11, .22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.control-center-page table {
  min-width: 760px;
}

.control-center-page th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--bx-gold-highlight);
  background: rgba(10, 20, 34, .96);
}

.control-center-page td,
.control-center-page th {
  vertical-align: middle;
}

.control-center-page td .actions,
.control-center-page td .inline-actions,
.control-center-page td .button-row {
  gap: .4rem;
  justify-content: flex-start;
}

.control-center-page td button,
.control-center-page td .button,
.control-center-page .data-table button,
.control-center-page .data-table .button {
  min-height: 2.15rem;
  padding: .42rem .68rem;
  font-size: .82rem;
}

.control-center-page .tabs,
.control-center-page .tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .45rem;
  border-radius: var(--ui-radius-lg);
  border: 1px solid rgba(198, 167, 94, .15);
  background: rgba(1, 4, 11, .22);
}

.control-center-page .tabs button,
.control-center-page .tab-bar button,
.control-center-page .tabs a,
.control-center-page .tab-bar a {
  flex: 0 1 auto;
  min-width: 8.5rem;
}

.control-center-page .tabs .active,
.control-center-page .tab-bar .active,
.control-center-page [aria-selected="true"] {
  color: #130F08;
  background: var(--ui-gold-metal);
  border-color: rgba(245, 222, 157, .45);
}

.control-center-page .badge,
.control-center-page .filter-pills > *,
.control-center-page .status-strip > * {
  margin-block: .12rem;
}

.control-center-page .status-strip,
.control-center-page .filter-pills,
.control-center-page .badges,
.control-center-page .impact-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}

.control-center-page details {
  background: rgba(1,4,11,.18);
  border: 1px solid rgba(198, 167, 94, .14);
  border-radius: var(--ui-radius-lg);
}

.control-center-page dialog.wide-dialog,
.control-center-page .wide-dialog {
  width: min(96vw, 1080px);
}

.control-center-page dialog form,
.control-center-page dialog .stack {
  gap: var(--ui-control-gap-sm);
}

.control-center-page pre,
.control-center-page .result-box,
.control-center-page .operation-result,
.control-center-page .audit-api-result,
.control-center-page .technical {
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.settings-layout .settings-section-grid,
.settings-layout .feature-grid,
.settings-layout .mode-card-grid,
.settings-layout .section-catalog,
.services-layout .cards-grid,
.services-layout .doc-grid,
.packages-layout .dashboard-grid,
.packages-layout .wizard-steps,
.deployments-layout .deployment-wizard,
.ssl-layout .timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--ui-control-gap-sm);
}

.system-admin-layout .operation-doc-grid,
.system-admin-layout .operation-doc-card,
.services-layout .operation-card,
.ssl-layout .kv,
.audit-layout .key-value-list {
  display: grid;
  gap: .65rem;
}

.services-layout .service-group,
.services-layout .operation-execution-box,
.deployments-layout .wizard-step,
.ssl-layout .subpanel,
.packages-layout .sensitive-action,
.settings-layout .impact-preview-card {
  border-radius: var(--ui-radius-lg);
  border: 1px solid rgba(198, 167, 94, .16);
  background: rgba(5, 10, 17, .22);
  padding: clamp(.9rem, 1.4vw, 1.2rem);
}

.audit-layout .audit-tabs,
.packages-layout .tabs,
.deployments-layout .tabs,
.services-layout .tab-bar {
  position: sticky;
  top: calc(var(--topbar-height, 64px) + .5rem);
  z-index: 9;
  backdrop-filter: blur(12px);
}

.ssl-layout .clean-list,
.packages-layout .compact-list,
.settings-layout .compact-list,
.deployments-layout .compact-list {
  display: grid;
  gap: .4rem;
  padding-inline-start: 1.1rem;
}

.control-center-page .danger,
.control-center-page .sensitive-action,
.control-center-page .deployment-sensitive {
  border-color: rgba(216, 111, 100, .26);
}

.control-center-page .warning,
.control-center-page .warning-box,
.control-center-page .notice.warning {
  border-color: rgba(198, 167, 94, .32);
}

@media (max-width: 1024px) {
  .control-center-page .control-center-hero,
  .control-center-page > .page-hero,
  .control-center-page > .page-header,
  .control-center-page > .hero-panel {
    grid-template-columns: 1fr;
  }

  .control-center-page .control-center-hero .actions,
  .control-center-page .control-center-hero .hero-actions,
  .control-center-page .page-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .control-center-page {
    gap: .85rem;
  }

  .control-center-page .actions > *,
  .control-center-page .hero-actions > *,
  .control-center-page .page-actions > *,
  .control-center-page .button-row > *,
  .control-center-page .inline-actions > *,
  .control-center-page .form-actions > * {
    flex: 1 1 100%;
    min-width: 0;
  }

  .control-center-page table {
    min-width: 680px;
  }

  .control-center-page .tabs,
  .control-center-page .tab-bar {
    position: static;
  }

  .control-center-page .tabs button,
  .control-center-page .tab-bar button,
  .control-center-page .tabs a,
  .control-center-page .tab-bar a {
    flex: 1 1 100%;
  }
}


/* -------------------------------------------------------------------------
   BLACK X UI/UX Batch 3 — full system polish and final acceptance
   Scope: dashboard, sites, files, databases, resources, backups, schedules,
   jobs, security, vault, recovery, emergency, command center, workspace IDE.
   This layer intentionally sits last to resolve button/container overlap and
   to align the complete system with the unified BLACK X / BLACK TECH identity.
   ------------------------------------------------------------------------- */

:root {
  --ui-page-max: 1680px;
  --ui-page-pad: clamp(1rem, 2vw, 1.65rem);
  --ui-section-gap: clamp(1rem, 1.8vw, 1.45rem);
  --ui-card-gap: clamp(.85rem, 1.4vw, 1.15rem);
  --ui-touch: 2.75rem;
  --ui-filter-min: 15rem;
  --ui-action-min: 9.5rem;
  --ui-line: rgba(232, 220, 200, .13);
  --ui-line-strong: rgba(198, 167, 94, .24);
  --ui-surface-depth:
    radial-gradient(circle at 24% 0%, rgba(198, 167, 94, .11), transparent 30%),
    linear-gradient(145deg, rgba(31, 42, 68, .92), rgba(5, 10, 17, .9) 62%, rgba(3, 7, 13, .96));
  --ui-surface-soft:
    linear-gradient(145deg, rgba(20, 34, 56, .78), rgba(10, 20, 34, .74) 54%, rgba(5, 10, 17, .82));
  --ui-surface-card:
    linear-gradient(145deg, rgba(31, 42, 68, .72), rgba(10, 20, 34, .76) 58%, rgba(5, 10, 17, .84));
  --ui-gold-border: linear-gradient(135deg, rgba(245, 222, 157, .42), rgba(198, 167, 94, .18), rgba(47, 166, 142, .13));
  --ui-focus-ring: 0 0 0 3px rgba(47, 166, 142, .18), 0 0 0 1px rgba(99, 190, 172, .55);
  --ui-lux-shadow: 0 18px 60px rgba(1, 4, 11, .42), inset 0 1px 0 rgba(245, 222, 157, .055);
  --ui-contact-shadow: 0 8px 22px rgba(1, 4, 11, .22);
}

body.ui-polish-ready .content {
  width: min(100%, var(--ui-page-max));
  margin-inline: auto;
}

.main > .content {
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

/* Universal page framing for older templates that only had h1 + panels. */
.content > .page-title:first-child,
.content > h1.page-title:first-child {
  margin-top: 0;
}

.content > .page-title:first-child + .muted,
.content > h1.page-title:first-child + .muted {
  max-width: 74rem;
  margin-bottom: var(--ui-section-gap);
}

/* Premium hero/header normalization across the full system */
.page-hero,
.hero-panel,
.page-head,
.dashboard-hero,
.site-hero,
.backup-hero,
.schedule-hero,
.security-hero,
.command-hero,
.code-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--ui-line-strong);
  border-radius: calc(var(--ui-radius-xl, 1.25rem) + .15rem);
  background: var(--ui-surface-depth);
  box-shadow: var(--ui-lux-shadow);
  padding: clamp(1.05rem, 2.1vw, 1.8rem);
  margin-bottom: var(--ui-section-gap);
}

.page-hero::before,
.hero-panel::before,
.page-head::before,
.dashboard-hero::before,
.site-hero::before,
.backup-hero::before,
.schedule-hero::before,
.security-hero::before,
.command-hero::before,
.code-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(245, 222, 157, .12), transparent 26%),
    radial-gradient(circle at 88% 18%, rgba(47, 166, 142, .13), transparent 28%);
  opacity: .88;
}

.page-hero::after,
.hero-panel::after,
.page-head::after,
.dashboard-hero::after,
.site-hero::after,
.backup-hero::after,
.schedule-hero::after,
.security-hero::after,
.command-hero::after,
.code-hero::after {
  content: "";
  position: absolute;
  inset-inline: clamp(1rem, 2vw, 1.6rem);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 167, 94, .58), rgba(47, 166, 142, .32), transparent);
}

.page-title {
  letter-spacing: -.035em;
  line-height: 1.04;
  color: var(--bx-ivory-highlight, #FEFCEB);
  text-shadow: 0 12px 32px rgba(1, 4, 11, .28);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .55rem;
  color: var(--bx-gold-light, #D7B96F);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 800;
}

.eyebrow::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--ui-teal-inlay, linear-gradient(145deg, #0B3E39, #2FA68E, #10554D));
  box-shadow: 0 0 0 3px rgba(47, 166, 142, .12);
}

/* Button/action ergonomics. Prevent overlap and improve touch targets. */
.actions,
.hero-actions,
.page-actions,
.toolbar,
.button-row,
.form-actions,
.inline-actions,
.filter-actions,
.file-nav-actions,
.copy-row,
.row.between,
.card-title-row,
.badge-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  min-width: 0;
}

.actions > *,
.hero-actions > *,
.page-actions > *,
.toolbar > *,
.button-row > *,
.form-actions > *,
.inline-actions > *,
.filter-actions > *,
.file-nav-actions > * {
  min-width: 0;
}

.actions .button,
.actions button,
.hero-actions .button,
.hero-actions button,
.page-actions .button,
.page-actions button,
.toolbar .button,
.toolbar button,
.button-row .button,
.button-row button,
.form-actions .button,
.form-actions button,
.inline-actions .button,
.inline-actions button,
.filter-actions .button,
.filter-actions button {
  min-height: var(--ui-touch);
  white-space: normal;
  text-align: center;
  justify-content: center;
  line-height: 1.2;
}

.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  border-radius: .85rem;
  font-weight: 760;
  letter-spacing: -.01em;
  box-shadow: 0 1px 0 rgba(245, 222, 157, .08) inset, 0 8px 18px rgba(1, 4, 11, .18);
}

.button:not(.secondary):not(.danger):not(.ghost),
button:not(.secondary):not(.danger):not(.ghost):not(.dialog-close) {
  color: #050A11;
  border-color: rgba(245, 222, 157, .38);
  background:
    linear-gradient(135deg, #7D5426 0%, #C6A75E 35%, #F5DE9D 52%, #D7B96F 70%, #7D5426 100%);
}

.button.secondary,
button.secondary,
.secondary.button {
  color: var(--bx-ivory-light, #F1E7D5);
  border-color: rgba(232, 220, 200, .16);
  background:
    linear-gradient(145deg, rgba(43, 58, 89, .72), rgba(10, 20, 34, .72));
}

.button.ghost,
button.ghost,
.ghost.button {
  color: var(--bx-gold-light, #D7B96F);
  border-color: rgba(198, 167, 94, .22);
  background: rgba(10, 20, 34, .28);
}

.button.danger,
button.danger,
.danger.button {
  color: #fff2ee;
  border-color: rgba(245, 139, 122, .38);
  background: linear-gradient(145deg, rgba(122, 38, 34, .9), rgba(69, 20, 21, .86));
}

button:hover,
.button:hover,
summary:hover {
  transform: translateY(-1px);
}

button:active,
.button:active {
  transform: translateY(0);
}

button:focus-visible,
.button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: var(--ui-focus-ring);
}

/* Forms and filters */
form,
.form-grid,
.filters-grid,
.filters-panel,
.filters-inline,
.db-operation-panel,
.file-action-panel,
.code-selector-panel,
.backup-operation,
.backup-label-form,
.command-wizard {
  min-width: 0;
}

.form-grid,
.filters-grid,
.card-grid,
.cards-grid,
.dashboard-summary,
.dashboard-grid,
.catalog-grid,
.feature-grid,
.detail-grid,
.domain-route-grid,
.checkbox-grid,
.access-level-grid,
.backup-operation-grid {
  display: grid;
  gap: var(--ui-card-gap);
}

.form-grid,
.filters-grid,
.filters-panel form,
.filters-inline,
.db-operation-panel,
.file-action-panel,
.code-selector-panel,
.backup-label-form {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ui-filter-min)), 1fr));
  align-items: end;
}

label,
.ui-field-label {
  display: grid;
  gap: .42rem;
  color: var(--bx-ivory-muted, #C5B9A3);
  font-size: .9rem;
  font-weight: 650;
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--ui-touch);
  color: var(--bx-ivory-light, #F1E7D5);
  border: 1px solid rgba(232, 220, 200, .14);
  border-radius: .85rem;
  background: rgba(1, 4, 11, .36);
}

textarea {
  min-height: 7.5rem;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: rgba(232, 220, 200, .44);
}

/* Card/panel polish and spacing */
.panel,
.card,
.dashboard-widget,
.backup-card,
.access-card,
.checkbox-card,
.doc-card,
.info-card,
.notice-card,
.global-status,
.command-terminal-panel,
.ide-inspector,
.ide-editor-host,
.file-nav-panel,
.file-tree,
.file-action-panel,
.file-preview-modal,
.db-operation-panel,
.critical-panel,
.accent-panel {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg, 1rem);
  background: var(--ui-surface-card);
  box-shadow: var(--ui-contact-shadow);
}

.panel,
.dashboard-widget,
.backup-card,
.access-card,
.checkbox-card,
.doc-card,
.info-card,
.notice-card,
.file-nav-panel,
.file-tree,
.file-action-panel,
.db-operation-panel,
.critical-panel,
.accent-panel {
  padding: clamp(.9rem, 1.45vw, 1.2rem);
}

.stack,
.panel.stack,
.ui-polish-page,
.recovery-polish,
.emergency-polish {
  display: grid;
  gap: var(--ui-card-gap);
}

.grid.cards,
.cards,
.card-grid,
.cards-grid,
.dashboard-summary,
.catalog-grid,
.feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.grid.two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.grid.three {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.grid.four {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.metric,
.kpi-value,
.stat-value,
.dashboard-widget strong,
.card .metric {
  color: var(--bx-ivory-highlight, #FEFCEB);
  letter-spacing: -.035em;
}

.muted,
.small,
.technical,
.ltr.muted {
  color: rgba(232, 220, 200, .68);
}

/* Tables: consistent containment and cell action safety */
.table-wrap,
.table-scroll,
.responsive-table,
.data-table,
.backup-table,
.compact-table,
.file-table,
.db-select-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg, 1rem);
  background: rgba(1, 4, 11, .24);
  box-shadow: var(--ui-contact-shadow);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

thead th,
table th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--bx-gold-light, #D7B96F);
  background: rgba(5, 10, 17, .94);
  backdrop-filter: blur(10px);
}

th,
td {
  vertical-align: top;
  padding: .78rem .85rem;
  border-bottom: 1px solid rgba(232, 220, 200, .08);
}

td .actions,
td .button-row,
.actions-cell {
  gap: .45rem;
  justify-content: flex-start;
}

td .button,
td button,
.actions-cell .button,
.actions-cell button {
  min-height: 2.25rem;
  padding: .45rem .68rem;
  font-size: .82rem;
}

/* Status/badge clarity */
.badge,
.chip,
.status-pill,
.health-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 1.75rem;
  border-radius: 999px;
  border: 1px solid rgba(232, 220, 200, .13);
  background: rgba(10, 20, 34, .58);
  color: var(--bx-ivory-light, #F1E7D5);
  padding: .25rem .62rem;
  font-weight: 760;
  letter-spacing: .01em;
}

.badge.success,
.chip.success,
.success .badge,
.passed,
.online,
.ok {
  border-color: rgba(47, 166, 142, .34);
  color: var(--bx-teal-pale, #B9E4DA);
  background: rgba(11, 62, 57, .44);
}

.badge.warning,
.warning .badge,
.due,
.waiting {
  border-color: rgba(198, 167, 94, .42);
  color: var(--bx-gold-highlight, #F5DE9D);
  background: rgba(90, 59, 23, .34);
}

.badge.danger,
.badge.critical,
.danger .badge,
.critical,
.failed,
.offline,
.blocked {
  border-color: rgba(216, 111, 100, .42);
  color: #ffd7d2;
  background: rgba(91, 25, 25, .38);
}

/* Raw/pre/result surfaces */
pre,
.result-box,
.diagnostics-pre,
.compact-pre,
.code-block,
.command-output,
.raw-output {
  max-width: 100%;
  overflow: auto;
  border: 1px solid rgba(198, 167, 94, .16);
  border-radius: var(--ui-radius-md, .85rem);
  background: rgba(1, 4, 11, .54);
  color: var(--bx-ivory-light, #F1E7D5);
  box-shadow: inset 0 1px 0 rgba(245, 222, 157, .04);
}

/* Dashboard and operational overview */
.dashboard-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(20rem, .8fr);
}

.dashboard-widget {
  min-height: 100%;
}

.dashboard-filters,
.dashboard-customizer,
.global-status {
  display: grid;
  gap: .8rem;
}

/* Sites / discovery / inventory */
.site-hero,
.catalog-grid,
.domain-route-grid,
.connection-inventory-polish,
.discovery-polish,
.inventory-polish {
  --ui-filter-min: 14rem;
}

.catalog-grid .card,
.domain-route-grid .card,
.dashboard-site-row,
.check-row,
.dashboard-pin-site {
  min-width: 0;
}

/* Files and IDE */
.file-explorer-layout,
.enhanced-ide {
  display: grid;
  gap: var(--ui-card-gap);
  grid-template-columns: minmax(16rem, .32fr) minmax(0, 1fr);
  align-items: start;
}

.file-tree,
.file-table,
.ide-editor-host {
  min-width: 0;
}

.ide-bottom,
.ide-context-strip,
.command-terminal-meta {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

/* Databases / resources */
.db-select-table,
.resources-polish .table-wrap,
.databases-polish .table-wrap {
  margin-top: .75rem;
}

.compact-kv,
.definition-list,
.details-list {
  display: grid;
  gap: .55rem;
}

.compact-row,
.check-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(232, 220, 200, .07);
  padding-block: .45rem;
}

/* Backups / schedules / jobs */
.backup-summary,
.schedule-summary,
.jobs-polish .grid.cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
}

.backup-sensitive-panel,
.danger-zone,
.command-warning,
.critical-panel {
  border-color: rgba(216, 111, 100, .26);
  background:
    radial-gradient(circle at 0% 0%, rgba(216, 111, 100, .12), transparent 24%),
    linear-gradient(145deg, rgba(69, 20, 21, .48), rgba(5, 10, 17, .68));
}

.schedule-hero .toolbar,
.backup-hero .actions,
.security-hero .actions,
.command-hero .actions {
  justify-content: flex-end;
}

/* Security / Vault */
.security-hero,
.vault-polish .page-hero {
  border-color: rgba(198, 167, 94, .26);
}

.access-level-grid,
.checkbox-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.vault-polish dialog,
.security-polish dialog,
dialog.wide-dialog,
dialog.ui-dialog {
  width: min(100% - 2rem, 74rem);
  border: 1px solid rgba(198, 167, 94, .28);
  border-radius: var(--ui-radius-xl, 1.25rem);
  background:
    radial-gradient(circle at 15% 0%, rgba(198, 167, 94, .12), transparent 24%),
    linear-gradient(145deg, rgba(20, 34, 56, .98), rgba(5, 10, 17, .98));
  color: var(--bx-ivory-light, #F1E7D5);
}

/* Emergency / recovery clarity */
.emergency-polish .panel:first-of-type,
.recovery-polish .panel:first-of-type {
  border-color: rgba(198, 167, 94, .26);
}

.emergency-polish pre,
.recovery-polish pre {
  white-space: pre-wrap;
}

/* Command Center */
.command-terminal-panel {
  min-height: 18rem;
}

.command-tabs,
.compact-tabs,
.detail-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(232, 220, 200, .1);
  padding-bottom: .55rem;
}

.command-tabs > *,
.compact-tabs > *,
.detail-tabs > * {
  min-height: 2.35rem;
}

/* Empty/loading/error states */
.empty,
.empty-state,
.error-box,
.warning-box,
.message {
  border-radius: var(--ui-radius-md, .85rem);
  border: 1px solid rgba(232, 220, 200, .13);
  background: rgba(10, 20, 34, .62);
  padding: .85rem 1rem;
}

.empty,
.empty-state {
  display: grid;
  place-items: center;
  min-height: 7rem;
  text-align: center;
  color: rgba(232, 220, 200, .72);
}

.error-box,
.message.error {
  border-color: rgba(216, 111, 100, .35);
  background: rgba(91, 25, 25, .3);
}

.warning-box,
.message.warning {
  border-color: rgba(198, 167, 94, .32);
  background: rgba(90, 59, 23, .26);
}

/* Final responsive pass */
@media (max-width: 1180px) {
  .dashboard-grid,
  .file-explorer-layout,
  .enhanced-ide {
    grid-template-columns: 1fr;
  }

  .page-hero,
  .hero-panel,
  .page-head,
  .dashboard-hero,
  .site-hero,
  .backup-hero,
  .schedule-hero,
  .security-hero,
  .command-hero,
  .code-hero {
    grid-template-columns: 1fr;
  }

  .schedule-hero .toolbar,
  .backup-hero .actions,
  .security-hero .actions,
  .command-hero .actions {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .content {
    padding-inline: .85rem;
  }

  .actions .button,
  .actions button,
  .hero-actions .button,
  .hero-actions button,
  .page-actions .button,
  .page-actions button,
  .toolbar .button,
  .toolbar button,
  .button-row .button,
  .button-row button,
  .form-actions .button,
  .form-actions button,
  .inline-actions .button,
  .inline-actions button,
  .filter-actions .button,
  .filter-actions button {
    flex: 1 1 100%;
  }

  .form-grid,
  .filters-grid,
  .filters-inline,
  .filters-panel form,
  .db-operation-panel,
  .file-action-panel,
  .code-selector-panel,
  .backup-label-form {
    grid-template-columns: 1fr;
  }

  table {
    min-width: 720px;
  }

  .page-title {
    font-size: clamp(1.65rem, 9vw, 2.55rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

@media print {
  body {
    background: #fff !important;
    color: #111 !important;
  }

  .sidebar,
  .topbar,
  .actions,
  .hero-actions,
  .page-actions,
  .toolbar,
  .button-row {
    display: none !important;
  }

  .panel,
  .card,
  .page-hero,
  .hero-panel,
  .page-head {
    border: 1px solid #999 !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #111 !important;
  }
}

/* Batch 3 resilience page class hook */
.resilience-polish .resilience-center { gap: var(--ui-section-gap); }