/* Theme definitions according to A29 Design System "Крона" */
:root {
  /* Common variables */
  --status-healthy: #72C943;
  --status-warning: #E1A62B;
  --status-error: #E45C4F;
  --status-info: #4C8DD8;
  --status-disabled: #708078;

  --prov-antigravity: #74A9FF;
  --prov-codex: #46BE8A;
  --prov-opencode: #F39A50;
  --prov-claude: #DF9C63;
  --prov-grok: #3B82F6;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --font-ui: 'Inter', "Segoe UI", -apple-system, sans-serif;
  --font-title: "Cinzel", "Cinzel Decorative", "Segoe UI", serif;
  --font-mono: "Consolas", "Courier New", monospace;

  --header-height: 58px;
  --sidebar-width: 230px;
}

/* Default DARK theme */
:root, body[data-theme="dark"] {
  --bg-base: #101510;
  --bg-sidebar: #0D120D;
  --bg-header: #0D120D;
  --bg-statusbar: #0D120D;
  --bg-modal-backdrop: rgba(16, 21, 16, 0.85);

  --surface: #1A2A1F;
  --surface-hover: #2F4A36;
  --surface-active: #3C5C44;
  --surface-selected: #28402F;
  --surface-muted: #152219;

  --border: #36513B;
  --border-subtle: #203A2D;
  --border-accent: #CDAA64;
  --border-hover: #537456;

  --text-primary: #F7F1E3;
  --text-secondary: #B0B8B2;
  --text-muted: #8FA395;
  --text-accent: #CDAA64;

  --accent: #CDAA64;
  --accent-hover: #E0B84E;
  --accent-pressed: #A9781E;
  --accent-dim: rgba(205, 170, 100, 0.15);
}

/* MEDIUM theme (cream cards on green canvas) */
body[data-theme="medium"] {
  --bg-base: #1A2A1F;
  --bg-sidebar: #152219;
  --bg-header: #152219;
  --bg-statusbar: #152219;
  --bg-modal-backdrop: rgba(26, 42, 31, 0.85);

  --surface: #F7F1E3;
  --surface-hover: #F0EAD6;
  --surface-active: #E6DFCB;
  --surface-selected: #EAE3CF;
  --surface-muted: #2F4A36;

  --border: #D1C7AE;
  --border-subtle: #E0D7BF;
  --border-accent: #CDAA64;
  --border-hover: #B7A88D;

  --text-primary: #101510;
  --text-secondary: #2F4A36;
  --text-muted: #537456;
  --text-accent: #B78525;

  --accent: #B78525;
  --accent-hover: #CDAA64;
  --accent-pressed: #9A6F1D;
  --accent-dim: rgba(183, 133, 37, 0.15);
}

/* LIGHT theme */
body[data-theme="light"] {
  --bg-base: #F7F1E3;
  --bg-sidebar: #F0EAD6;
  --bg-header: #F0EAD6;
  --bg-statusbar: #E6DFCB;
  --bg-modal-backdrop: rgba(247, 241, 227, 0.85);

  --surface: #FFFFFF;
  --surface-hover: #FDFBF7;
  --surface-active: #F4EEDF;
  --surface-selected: #FAF7F0;
  --surface-muted: #F0EAD6;

  --border: #D1C7AE;
  --border-subtle: #EAE3CF;
  --border-accent: #CDAA64;
  --border-hover: #C5BAA1;

  --text-primary: #101510;
  --text-secondary: #2F4A36;
  --text-muted: #537456;
  --text-accent: #B78525;

  --accent: #B78525;
  --accent-hover: #CDAA64;
  --accent-pressed: #9A6F1D;
  --accent-dim: rgba(183, 133, 37, 0.15);
}
/* Hermes Hub Web Client — Dark Theme & Cockpit Design System */



* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography & Utilities ── */
.text-healthy { color: var(--status-healthy); }
.text-warning { color: var(--status-warning); }
.text-error { color: var(--status-error); }
.text-info { color: var(--status-info); }
.text-accent { color: var(--text-accent); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

/* ── App Layout ── */
.app-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.brand {
  padding: 16px 18px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.brand-logo {
  font-size: 22px;
  color: var(--accent);
}

.brand-title {
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--text-accent);
}

.brand-subtitle {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.nav-menu {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.nav-item:hover {
  background-color: var(--surface-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background-color: var(--surface-selected);
  color: var(--text-accent);
  border-color: var(--border-accent);
}

.nav-icon {
  font-size: 15px;
  display: inline-flex;
  width: 18px;
}

.nav-label {
  flex: 1;
}

.nav-badge {
  background-color: var(--surface-muted);
  color: var(--text-muted);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.source-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--status-disabled);
  display: inline-block;
}

.status-dot.healthy { background-color: var(--status-healthy); box-shadow: 0 0 6px var(--status-healthy); }
.status-dot.warning { background-color: var(--status-warning); }
.status-dot.error { background-color: var(--status-error); }

.version-tag {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ── Main Area ── */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-base);
}

/* ── Top Header ── */
.top-header {
  height: var(--header-height);
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.header-readiness-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
}

.header-update-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(225, 166, 43, 0.15);
  border: 1px solid var(--status-warning);
  color: var(--status-warning);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.header-update-badge:hover {
  background-color: rgba(225, 166, 43, 0.28);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.btn-primary {
  background-color: var(--accent);
  color: #061916;
  border-color: var(--border-accent);
}

.btn-primary:hover {
  background-color: var(--accent-hover);
}

.btn-secondary {
  background-color: var(--surface);
  color: var(--text-primary);
  border-color: var(--border);
}

.btn-secondary:hover {
  background-color: var(--surface-hover);
  border-color: var(--border-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background-color: var(--surface-hover);
  color: var(--text-primary);
}

.btn-sm {
  padding: 4px 8px;
  font-size: 11px;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Content Scroll Area ── */
.content-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.view-pane {
  display: none;
}

.view-pane.active {
  display: block;
}

.view-header-note {
  background-color: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: 16px;
}

/* ── Toolbar & Filters ── */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  width: 340px;
}

.search-icon {
  font-size: 13px;
  color: var(--text-muted);
}

.search-box input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 12px;
  width: 100%;
  outline: none;
}

.search-box input::placeholder {
  color: var(--text-muted);
}

.filters-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.select-filter {
  background-color: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
}

.select-filter:focus {
  border-color: var(--border-accent);
}

.toolbar-stats {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Provider Group & Account Cards Grid ── */
.provider-group {
  margin-bottom: 24px;
}

.provider-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

.provider-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.provider-group-count {
  font-size: 11px;
  color: var(--text-muted);
}

.accounts-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  background-color: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  margin: 16px 0;
}

.accounts-empty-state .empty-state-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.accounts-empty-state h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.accounts-empty-state p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 18px;
  max-width: 440px;
}

.accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 10px;
}

/* ── Compact Account Card (164px Fixed Height) ── */
.account-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  height: 164px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
}

.account-card:hover {
  background-color: var(--surface-hover);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.account-card.main-account {
  border-color: var(--border-accent);
}

.account-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.account-provider-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
}

.account-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
}

.badge-plan {
  background-color: var(--accent-dim);
  color: var(--text-accent);
  border: 1px solid var(--border-accent);
}

.badge-status {
  background-color: var(--surface-muted);
  color: var(--text-secondary);
}

.badge-status.healthy { color: var(--status-healthy); }
.badge-status.warning { color: var(--status-warning); }
.badge-status.quota_exhausted { color: var(--status-error); }
.badge-status.auth_required { color: var(--status-warning); }
.badge-status.disabled { color: var(--status-disabled); }

.badge-unassigned {
  background-color: var(--surface-muted);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.account-eligibility-warning {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(230, 162, 60, 0.12);
  border-left: 3px solid var(--status-warning);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--status-warning);
  line-height: 1.4;
}

.role-answering-status {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin: 6px 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.role-answering-status.healthy {
  background-color: rgba(114, 201, 67, 0.1);
  color: var(--status-healthy);
  border: 1px solid rgba(114, 201, 67, 0.25);
}

.role-answering-status.warning {
  background-color: rgba(225, 166, 43, 0.1);
  color: var(--status-warning);
  border: 1px solid rgba(225, 166, 43, 0.25);
}

.routing-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background-color: var(--surface-muted);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.account-identity-row {
  margin: 2px 0;
}

.account-email {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Quota Cells Grid (Up to 4 pools) ── */
.account-quota-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  margin-top: 4px;
}

.account-quota-grid.single-cell {
  grid-template-columns: 1fr;
}

.quota-cell {
  background-color: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quota-cell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
}

.quota-cell-title {
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

.quota-cell-value {
  font-family: var(--font-mono);
  font-weight: 700;
}

.quota-bar-track {
  height: 4px;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin: 3px 0 2px;
}

.quota-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.quota-cell-reset {
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Overview KPI Grid ── */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.kpi-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.kpi-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.kpi-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.kpi-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ── Section Cards ── */
.section-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 20px;
}

.section-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.section-card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Route Diagram ── */
.route-diagram-container {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 10px 0;
}

.diagram-column {
  flex: 1;
  min-width: 220px;
  background-color: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.diagram-column-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-accent);
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 6px;
}

.diagram-node {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 8px;
}

.diagram-node.active {
  border-color: var(--status-healthy);
  box-shadow: 0 0 8px rgba(114, 201, 67, 0.2);
}

/* ── Providers Grid ── */
.providers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.provider-summary-card {
  background-color: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.provider-summary-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.provider-summary-stats {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.provider-models-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  background-color: var(--bg-base);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  word-break: break-all;
}

/* ── Routing Pipelines List (Main Control Center) ── */
.routing-pipelines-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pipeline-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

.pipeline-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.pipeline-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.pipeline-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.badge-quota {
  background-color: rgba(64, 158, 255, 0.15);
  color: var(--accent);
  border: 1px solid rgba(64, 158, 255, 0.3);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.badge-quota.warning {
  background-color: rgba(230, 162, 60, 0.15);
  color: var(--status-warning);
  border-color: rgba(230, 162, 60, 0.3);
}

.badge-quota.error {
  background-color: rgba(245, 108, 108, 0.15);
  color: var(--status-error);
  border-color: rgba(245, 108, 108, 0.3);
}

.badge-affinity {
  background-color: var(--surface-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.pipeline-chain-flow {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 100px;
  padding: 4px 0;
}

/* ── Draggable Node Chip (HTML5 DND) ── */
.pipeline-node-chip {
  background-color: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
  max-width: 280px;
  cursor: grab;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  position: relative;
}

.pipeline-node-chip[draggable]:hover {
  border-color: var(--accent);
  background-color: var(--surface-hover);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pipeline-node-chip.active {
  border-color: var(--status-healthy);
  background-color: var(--surface-hover);
  box-shadow: 0 0 6px rgba(103, 194, 58, 0.2);
}

.pipeline-node-chip.dragging {
  opacity: 0.45;
  cursor: grabbing;
  transform: scale(0.96);
  border-style: dashed;
  border-color: var(--accent);
}

.pipeline-node-chip.drop-target {
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(64, 158, 255, 0.5);
  transform: scale(1.03);
  background-color: var(--surface-hover);
}

.node-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.node-rank {
  font-weight: 700;
  color: var(--accent);
}

.btn-node-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  border-radius: var(--radius-xs);
  transition: color 0.15s ease, background 0.15s ease;
}

.btn-node-remove:hover {
  color: var(--status-error);
  background: rgba(245, 108, 108, 0.15);
}

.node-identity {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.node-meta {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mono-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

.node-model-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
}

.node-model-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.node-model-select,
.diagram-model-select,
.diagram-account-select {
  flex: 1;
  background-color: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 3px 6px;
  outline: none;
  cursor: pointer;
  max-width: 100%;
}

.diagram-account-select {
  margin-bottom: 4px;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
}

.node-model-select:focus,
.diagram-model-select:focus,
.diagram-account-select:focus {
  border-color: var(--accent);
}

.node-model-refresh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.node-model-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.node-failover-warning {
  font-size: 10px;
  color: var(--status-warning);
  margin-top: 4px;
}

.btn-xs {
  font-size: 10px;
  padding: 2px 6px;
}

.pipeline-arrow {
  color: var(--accent);
  font-weight: bold;
}

/* ── Settings Card ── */
.settings-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  max-width: 800px;
}

.settings-group-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
  gap: 16px;
}

.setting-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.setting-desc {
  font-size: 11px;
  color: var(--text-muted);
}

.input-text {
  background-color: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  outline: none;
  width: 260px;
}

.input-text:focus {
  border-color: var(--border-accent);
}

.settings-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* ── Modal Layer ── */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

.modal-backdrop.hidden {
  display: none !important;
}

.modal-card {
  background-color: var(--surface);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  width: 680px;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  animation: modalAppear 0.2s ease-out;
}

@keyframes modalAppear {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.modal-feedback {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-bottom: 14px;
}

.modal-feedback.error {
  background-color: rgba(228, 92, 79, 0.15);
  border: 1px solid var(--status-error);
  color: #FFD8D2;
}

.modal-feedback.success {
  background-color: rgba(114, 201, 67, 0.15);
  border: 1px solid var(--status-healthy);
  color: #E2F8D5;
}

.modal-feedback.info {
  background-color: rgba(76, 141, 216, 0.15);
  border: 1px solid var(--status-info);
  color: #D2E5FA;
}

/* ── Toast Notifications ── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10000;
  pointer-events: none;
}

.toast {
  background-color: var(--surface-hover);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  animation: toastSlideIn 0.2s ease-out;
  pointer-events: auto;
}

.toast.success { border-color: var(--status-healthy); }
.toast.error { border-color: var(--status-error); }
.toast.warning { border-color: var(--status-warning); }

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Scrollbars ── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--surface-muted);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-hover);
}

/* ── Data Tables (Analytics) ── */
.table-responsive {
  width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.data-table th {
  background-color: var(--surface-muted);
  color: var(--text-muted);
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
}

.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.data-table tr:hover td {
  background-color: var(--surface-hover);
}

.cell-bar-container {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.cell-bar-track {
  flex: 1;
  height: 6px;
  background: var(--surface-muted);
  border-radius: 3px;
  overflow: hidden;
}

.cell-bar-fill {
  height: 100%;
  border-radius: 3px;
}

/* ── Readiness Banner (Health) ── */
.readiness-banner {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 16px;
  border-left: 4px solid var(--status-healthy);
}

.readiness-banner.degraded {
  border-left-color: var(--status-warning);
}

.readiness-banner.critical {
  border-left-color: var(--status-error);
}

.readiness-banner.limited {
  border-left-color: var(--status-info);
}

.readiness-banner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.readiness-banner-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.readiness-banner-summary {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.readiness-banner-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}

.readiness-banner-stats strong {
  color: var(--text-primary);
}

/* ── Host Resources Grid (Health) ── */
.host-resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px;
}

.host-resource-card {
  background-color: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.host-resource-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.host-resource-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.host-resource-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.host-resource-bar {
  height: 6px;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.host-resource-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}

.host-resource-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Warnings List (Health) ── */
.warnings-list {
  padding: 14px;
}

.warning-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background-color: rgba(225, 166, 43, 0.08);
  border: 1px solid var(--status-warning);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-primary);
}

.warning-item:last-child {
  margin-bottom: 0;
}

.warning-icon {
  font-size: 14px;
  color: var(--status-warning);
  line-height: 1.2;
}

/* ── Logs Feed (Events) ── */
.logs-container {
  max-height: 620px;
  overflow-y: auto;
  padding: 8px;
}

.log-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
}

.log-entry:hover {
  background-color: var(--surface-hover);
}

.log-timestamp {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  min-width: 65px;
}

.log-badge {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  min-width: 54px;
  text-align: center;
}

.log-badge.info { background: rgba(76, 141, 216, 0.2); color: var(--status-info); border: 1px solid var(--status-info); }
.log-badge.success { background: rgba(114, 201, 67, 0.2); color: var(--status-healthy); border: 1px solid var(--status-healthy); }
.log-badge.warning { background: rgba(225, 166, 43, 0.2); color: var(--status-warning); border: 1px solid var(--status-warning); }
.log-badge.error { background: rgba(228, 92, 79, 0.2); color: var(--status-error); border: 1px solid var(--status-error); }

.log-category {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.log-content {
  flex: 1;
}

.log-message {
  color: var(--text-primary);
  font-weight: 500;
}

.log-details {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  font-family: var(--font-mono);
  word-break: break-all;
}

/* ── Settings View ── */
.mono-path {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--surface-muted);
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid var(--border-subtle);
  display: inline-block;
  margin-top: 4px;
}

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.badge.healthy {
  background: rgba(114, 201, 67, 0.15);
  border-color: var(--status-healthy);
  color: var(--status-healthy);
}

/* ── Light Theme Override ── */


/* Drag and Drop Styles */
.draggable-item {
  cursor: grab;
  user-select: none;
}
.draggable-item:active {
  cursor: grabbing;
}
.drop-zone {
  min-height: 40px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-muted);
  transition: all 0.2s;
  margin-top: 8px;
}
.drop-zone.drag-over {
  border-color: var(--accent);
  background-color: var(--accent-dim);
  color: var(--accent);
}
.role-section {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}
.role-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.role-header h4 {
  font-family: var(--font-title);
  color: var(--text-primary);
  font-size: 14px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.role-badge {
  font-size: 10px;
  background-color: var(--accent-dim);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-ui);
}
.account-row {
  display: grid;
  grid-template-columns: 24px 20px 200px 120px 120px 150px 80px 80px 24px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  background-color: var(--surface);
  font-size: 12px;
}
.account-row:last-child {
  border-bottom: none;
}
.account-row.drag-over {
  border-top: 2px solid var(--accent);
}
.drag-handle {
  color: var(--text-muted);
  cursor: grab;
  text-align: center;
}
.provider-logo-sm {
  width: 16px;
  height: 16px;
  border-radius: 2px;
}
.available-account-card {
  background-color: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: grab;
}
.available-account-card:hover {
  border-color: var(--border);
  background-color: var(--surface-hover);
}
.grid-header {
  display: grid;
  grid-template-columns: 24px 20px 200px 120px 120px 150px 80px 80px 24px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-subtle);
  background-color: var(--surface-muted);
}

/* A48 — Крона workspace. Surface and chrome have separate ink tokens so
   cream cards remain legible against the medium theme's green workspace. */
:root, body[data-theme="dark"] {
  --bg-base:#07120f; --bg-sidebar:#06110e; --bg-header:#07120f;
  --surface:#0d1b16; --surface-muted:#10231c; --surface-hover:#172e23;
  --surface-active:#253b27; --surface-selected:#182e20;
  --border:#3d3924; --border-subtle:#2d3423; --border-accent:#9f7938;
  --text-primary:#f2eedf; --text-secondary:#c5cbbb; --text-muted:#a3b0a0;
  --accent:#dab568; --text-accent:#dab568; --chrome-ink:#f2eedf;
  --chrome-muted:#b5bca9; --canvas-bg:#081811; --canvas-ink:#d8d4b6;
  --surface-card:var(--surface); --accent-ink:#211c0e;
  --sidebar-width:244px; --header-height:76px;
}
body[data-theme="medium"] {
  --bg-base:#1a2a1f; --bg-sidebar:#102219; --bg-header:#15271c;
  --surface:#f7f1e3; --surface-muted:#eee6d3; --surface-hover:#e8dec6;
  --surface-active:#e4d7b8; --surface-selected:#eae0c8;
  --border:#c9bea4; --border-subtle:#dbcfb5; --border-accent:#9b7429;
  --text-primary:#1c2b20; --text-secondary:#3a4d3d; --text-muted:#57624e;
  --accent:#89631d; --text-accent:#89631d; --chrome-ink:#f7f1e3;
  --chrome-muted:#c3cbb9; --canvas-bg:#1a2a1f; --canvas-ink:#e5d2a6;
  --status-healthy:#42732c; --status-warning:#86580e; --status-error:#a93428;
  --status-info:#396ba0; --accent-ink:#fff9e9;
}
body[data-theme="light"] {
  --bg-base:#f7f1e3; --bg-sidebar:#f3ecdb; --bg-header:#f7f1e3;
  --surface:#fcf8ee; --surface-muted:#f0e8d7; --surface-hover:#eee3ca;
  --surface-active:#e7d7b2; --surface-selected:#f0e4cb;
  --border:#d4c5a5; --border-subtle:#e3d7be; --border-accent:#a67b2e;
  --text-primary:#202b21; --text-secondary:#414e3e; --text-muted:#606951;
  --accent:#8b631c; --text-accent:#8b631c; --chrome-ink:#202b21;
  --chrome-muted:#606951; --canvas-bg:#f5eedb; --canvas-ink:#5c593e;
  --status-healthy:#42732c; --status-warning:#86580e; --status-error:#a93428;
  --status-info:#396ba0; --accent-ink:#fff9e9;
}
body { font-size:13px; font-variant-numeric:tabular-nums; user-select:text; }
button,input,select,textarea { font:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
button:disabled { opacity:.5; cursor:not-allowed; }
.brand { min-height:104px; padding:16px 12px; gap:6px; border:0; }
.brand-logo { width:68px; height:68px; object-fit:contain; flex-shrink:0; }
.brand-title { font-size:18px; font-weight:500; letter-spacing:.6px; }
.brand-subtitle { font-size:9px; letter-spacing:0; color:var(--chrome-muted); }
.nav-menu { padding:8px 12px; gap:5px; flex:0 1 auto; }
.nav-item { min-height:45px; padding:10px 12px; gap:14px; color:var(--chrome-ink); border-radius:6px; }
.nav-item.active { border-color:var(--border-accent); background:var(--surface-selected); color:var(--text-accent); }
.nav-icon { width:23px; height:23px; fill:none; stroke:var(--accent); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
body[data-theme="medium"] .nav-icon { stroke:var(--canvas-ink); }
.brand-panel { margin:auto 14px 18px; padding:20px 10px; border:1px solid var(--border-accent); border-radius:7px; text-align:center; color:var(--chrome-ink); }
.brand-panel img { width:110px; height:110px; object-fit:contain; }
.brand-panel p { font-size:12px; line-height:1.8; margin:12px 0; }
.brand-panel span { color:var(--chrome-muted); font-size:11px; }
.sidebar-footer { padding:14px 16px; border-color:var(--border-accent); }
.sidebar-footer .source-text,.sidebar-footer .version-tag { color:var(--chrome-muted); }
.main-wrapper { min-width:0; }
.top-header { min-height:var(--header-height); height:auto; flex-wrap:wrap; padding:14px 20px; gap:10px 18px; border-color:var(--border-accent); }
.header-left { flex:1; min-width:220px; gap:12px; flex-wrap:wrap; }
.header-title { color:var(--chrome-ink); font-size:20px; font-weight:600; }
.header-readiness-badge { font-weight:400; color:var(--text-secondary); background:var(--surface); }
.header-actions { gap:12px; }
.header-page-actions { display:flex; gap:10px; }
.header-search { min-width:178px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 12px; border:1px solid var(--border-accent); border-radius:6px; background:transparent; color:var(--chrome-muted); cursor:pointer; }
.header-search kbd { font-size:10px; }
.header-icon { width:32px; height:34px; background:transparent; border:0; font-size:23px; color:var(--chrome-muted); cursor:pointer; }
.hub-user { display:flex; align-items:center; gap:9px; color:var(--chrome-ink); font-size:12px; }
.hub-user>span { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--border-accent); border-radius:50%; color:var(--chrome-muted); }
.hub-user small { display:block; font-size:9px; color:var(--chrome-muted); }
.content-area { padding:18px 20px; }
.btn { min-height:34px; box-shadow:none; transition:background-color .15s,border-color .15s; }
.btn-primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn-secondary { background:var(--surface); color:var(--text-accent); border-color:var(--border-accent); }
.status-dot.healthy { box-shadow:none; }
.view-header-note { color:var(--chrome-muted); background:transparent; border:0; padding:0 0 16px; line-height:1.6; }
.toolbar { gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.search-box { min-width:220px; background:var(--surface); border-color:var(--border); }
.filters-row { flex-wrap:wrap; }
.section-card,.settings-card,.kpi-card,.account-card,.resource-card { background:var(--surface); border:1px solid var(--border); border-radius:7px; box-shadow:none; }
.section-card { padding:16px; margin-bottom:14px; min-width:0; }
.section-card-title,.settings-group-title { font-family:var(--font-ui); font-weight:500; color:var(--text-accent); font-size:13px; text-transform:uppercase; letter-spacing:.03em; }
.section-card-subtitle { margin-top:6px; color:var(--text-muted); line-height:1.5; }
.account-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; border:1px solid var(--border); background:var(--surface); border-radius:7px; margin-bottom:16px; }
.account-summary>div { padding:16px; border-right:1px solid var(--border-subtle); }
.account-summary strong { display:block; font-size:24px; font-weight:500; margin:6px 0; }
.account-summary span,.account-summary small { color:var(--text-muted); font-size:11px; }
.accounts-groups-container { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.provider-group { grid-column:1 / -1; min-width:0; }
.provider-group-header { display:flex; justify-content:space-between; align-items:center; margin:12px 0; }
.accounts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:12px; }
.account-card { min-width:0; padding:16px; height:auto; min-height:164px; gap:10px; }
.account-card-header { flex-wrap:wrap; }
.account-badges { min-width:0; flex-wrap:wrap; }
.account-card .badge-status { white-space:normal; overflow-wrap:anywhere; }
.badge-status.unhealthy { color:var(--status-error); }
.account-card-header { gap:8px; }
.account-provider-tag { display:flex; align-items:center; gap:10px; }
.account-provider-tag img { width:30px; height:30px; object-fit:contain; }
.account-email,.account-meta { overflow-wrap:anywhere; white-space:normal; }
.account-quota-grid { gap:6px; }
.quota-cell { background:var(--surface-muted); border:1px solid var(--border-subtle); padding:10px; }
.quota-bar-track { height:5px; box-shadow:none; background:var(--border-subtle); }
.routing-grid { display:grid!important; grid-template-columns:minmax(0,2.15fr) minmax(280px,1fr); gap:16px!important; height:calc(100vh - 212px)!important; }
.routing-left-col { min-width:0; }
.routing-right-col { min-width:0; background:var(--surface)!important; }
.role-section { background:var(--surface); padding:12px; margin-bottom:14px; border:1px solid var(--border); border-radius:7px; overflow:auto; }
.role-header { gap:10px; }
.role-header h4 { font:600 14px var(--font-ui); }
.grid-header,.account-row { grid-template-columns:20px 56px minmax(120px,1.2fr) minmax(126px,1fr) minmax(100px,1fr) 88px 82px 26px; gap:8px; min-width:690px; }
.grid-header { font-size:10px; padding:10px 8px; }
.account-row { padding:10px 8px; border:1px solid var(--border-subtle); border-radius:5px; margin:4px 0; }
.account-row>div { min-width:0; overflow-wrap:anywhere; }
.account-row select { width:100%; background:var(--surface-muted); color:var(--text-primary); border:1px solid var(--border); padding:5px; border-radius:4px; }
.available-account-card { background:var(--surface); border:1px solid var(--border-subtle); padding:12px; }
.drop-zone { padding:12px; border:1px dashed var(--border-accent); color:var(--text-accent); }
.drag-over { outline:2px solid var(--accent); outline-offset:-2px; background:var(--surface-selected); }
.route-priority { font-size:9px; color:var(--text-accent); }
.route-quota { font-size:10px; color:var(--text-muted); margin-bottom:5px; }
.route-remove { color:var(--text-accent); background:transparent; border:0; cursor:pointer; padding:5px; }
.overview-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.kpi-card { padding:18px; }
.kpi-value { font-size:28px; font-weight:500; }
.analytics-workspace { display:grid; grid-template-columns:1.25fr 1fr .8fr; gap:14px; }
.analytics-tables { display:grid; grid-template-columns:1.1fr 1fr; gap:14px; }
.metric-chart { min-height:230px; display:flex; flex-direction:column; justify-content:center; gap:12px; color:var(--text-muted); }
.metric-bar { display:grid; grid-template-columns:minmax(80px,1fr) 2fr auto; gap:10px; align-items:center; font-size:11px; }
.metric-bar meter { width:100%; height:10px; accent-color:var(--status-healthy); }
.data-table th { color:var(--text-accent); background:var(--surface); font-weight:500; }
.data-table td { padding:13px 10px; border-color:var(--border-subtle); }
.data-table tr:hover { background:var(--surface-hover); }
.host-resources-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.resource-card { padding:16px; }
.resource-value { font-size:24px; }
.logs-layout { display:grid; grid-template-columns:minmax(0,2.4fr) minmax(250px,1fr); gap:16px; }
.logs-container { min-width:0; overflow:auto; max-height:65vh; }
.log-detail { background:var(--surface-muted); border:1px solid var(--border); border-radius:6px; padding:18px; overflow-wrap:anywhere; }
.log-detail h2 { font-size:13px; font-weight:500; color:var(--text-accent); text-transform:uppercase; margin-bottom:20px; }
.log-detail pre { white-space:pre-wrap; font-size:11px; margin-top:16px; }
.log-detail p { margin:10px 0; color:var(--text-secondary); }
#view-settings.active { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
#view-settings>.settings-card { margin:0!important; min-width:0; }
.setting-row { padding:14px 0; gap:12px; align-items:start; }
.setting-control { min-width:0; max-width:55%; }
.setting-control input,.setting-control select { max-width:100%; }
.command-results { display:flex; flex-direction:column; gap:8px; padding-top:12px; }
.command-results button { text-align:left; }
@media(min-width:1700px) { #view-settings.active { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1250px) { :root { --sidebar-width:210px; }.hub-user { display:none; }.accounts-groups-container { grid-template-columns:repeat(2,minmax(0,1fr)); }.routing-grid { grid-template-columns:minmax(0,1.6fr) 280px; }.brand-title { font-size:15px; }.brand-logo { width:50px;height:50px; } }
@media(max-width:950px) { :root { --sidebar-width:180px; }.analytics-workspace,.analytics-tables,.logs-layout { grid-template-columns:1fr; }#view-settings.active { grid-template-columns:1fr; }.host-resources-grid,.account-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.brand-panel { display:none; }.sidebar-footer { margin-top:auto; }.routing-grid { height:auto!important; grid-template-columns:1fr; }.routing-right-col { max-height:400px; } }
@media(max-width:650px) { :root { --sidebar-width:64px; }.brand { padding:8px; min-height:70px; }.brand-text,.nav-label,.nav-badge,.sidebar-footer { display:none; }.nav-menu { padding:6px; }.nav-item { padding:10px; }.content-area { padding:12px; }.header-title { font-size:17px; }.header-search { min-width:120px; }.header-page-actions { flex-wrap:wrap; }.accounts-groups-container,.overview-grid { grid-template-columns:1fr; }.setting-row { flex-direction:column; }.setting-control { max-width:100%; }.top-header { padding:12px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }
/* Keep navigation reachable on shorter desktop windows. */
.brand,.sidebar-footer { flex-shrink:0; }
.nav-menu { flex:0 0 auto; overflow:visible; }
.brand-panel { min-height:0; }
.content-scroll { padding:18px 20px; min-height:0; }
.setting-control { display:flex; flex-wrap:wrap; gap:8px; flex:0 1 48%; }
.setting-control input { min-width:0; width:100%!important; }
.setting-info { min-width:0; flex:1; }
.setting-control select { width:100%; }
.header-left { flex-basis:260px; }
.header-title { white-space:nowrap; font-size:18px; }
@media(max-height:850px) { .brand-panel { display:none; }.sidebar-footer { margin-top:auto; } }
@media(max-width:1350px) { .hub-user { display:none; }.header-search { min-width:150px; } }
@media(max-width:650px) { .content-scroll { padding:12px; }.setting-control { flex-basis:auto; width:100%; } }
.health-workspace { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:14px; }
.health-workspace .section-card { margin:0; }
.health-workspace p { font-size:12px; color:var(--text-muted); line-height:1.6; margin:10px 0; }
@media(max-width:1100px) { .health-workspace { grid-template-columns:1fr; } }
.routing-right-col input,.routing-right-col select { min-width:0; padding:8px 10px; color:var(--text-primary); background:var(--surface-muted); border:1px solid var(--border); border-radius:4px; font:11px var(--font-ui); }
body[data-theme="medium"] .brand-title { color:var(--canvas-ink); }
body[data-theme="medium"] .nav-item.active .nav-icon { stroke:var(--text-accent); }
.header-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; }
.header-update-badge { color:var(--chrome-ink); background:transparent; }
@media(min-width:1051px) {
  .top-header { min-height:84px; padding-top:8px; padding-bottom:8px; }
  .header-left { display:flex; flex-wrap:wrap; gap:6px; min-width:200px; }
  .header-title { width:100%; }
  .header-readiness-badge,.header-update-badge { margin:0; font-size:9px; padding:4px 6px; }
}
.readiness-banner.not-ready { border-left-color:var(--status-error); }
.status-dot.not-ready { background:var(--status-error); }
.status-dot.ready { background:var(--status-healthy); }
.resource-value { font-size:clamp(18px,1.7vw,26px); }

/* ── Skills View & Cards ── */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  padding-top: 12px;
}

.skill-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.skill-card:hover {
  border-color: var(--border-accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.skill-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.skill-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.skill-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  flex: 1;
}

.skill-card-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  word-break: break-all;
}

.skill-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.skill-tag {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.skill-card-assigned {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.skill-agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(33, 150, 243, 0.12);
  border: 1px solid rgba(33, 150, 243, 0.3);
  border-radius: 12px;
  font-size: 11px;
  color: #90caf9;
}

.skill-agent-badge .remove-btn {
  cursor: pointer;
  font-weight: bold;
  opacity: 0.7;
}

.skill-agent-badge .remove-btn:hover {
  opacity: 1;
  color: var(--status-error);
}

.skill-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
  margin-top: 4px;
}

.doctor-report-body {
  font-size: 13px;
  line-height: 1.5;
}

.doctor-report-body h2 {
  font-size: 14px;
  margin: 14px 0 6px;
  color: var(--text-primary);
}

.doctor-report-body h3 {
  font-size: 13px;
  margin: 10px 0 4px;
  color: var(--text-secondary);
}

.doctor-report-body ul, .doctor-report-body ol {
  margin: 0 0 10px 18px;
  padding: 0;
}

.doctor-report-body pre {
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  padding: 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Brand marks are local assets, separate for a provider and the model it hosts. */
.brand-logo,.account-provider-tag img,.available-account-card>img { width:24px; height:24px; object-fit:contain; padding:3px; border-radius:4px; background:#fff; flex:none; }
.model-brand { display:inline-flex; align-items:center; gap:6px; min-width:0; }
.model-brand>span { overflow-wrap:anywhere; }
.account-models { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; font-size:11px; }
.account-models:empty { display:none; }
.route-model-with-logo { display:flex; align-items:center; gap:6px; min-width:0; }
.route-model-with-logo select { min-width:0; }
.agent-node-icon .brand-logo { width:27px; height:27px; }

.account-check { font-size:12px; line-height:1.5; color:var(--text-secondary); overflow-wrap:anywhere; }
.badge-status.checking { color:var(--text-accent); }