:root {
  color-scheme: dark;
  --dark-bg-0: #040911;
  --dark-bg-1: #071422;
  --dark-bg-2: #0d2035;
  --dark-surface: rgba(12, 22, 38, 0.82);
  --dark-surface-strong: rgba(10, 18, 32, 0.9);
  --dark-line: rgba(110, 170, 225, 0.2);
  --dark-text: #dbe7f5;
  --dark-text-soft: #9cb8d7;
  --dark-accent: #34b5ff;
  --dark-accent-2: #1de3c4;
  --dark-warning: #ffb65c;
  --dark-danger: #ff7b8a;
  --dark-success: #58d497;
  --dark-shadow: 0 22px 52px rgba(0, 0, 0, 0.42);
  --dark-btn-a: #1085ca;
  --dark-btn-b: #11b7af;
}

body.theme-deck {
  --dark-bg-0: #030914;
  --dark-bg-1: #08192a;
  --dark-bg-2: #0b2740;
  --dark-accent: #39b9ff;
  --dark-accent-2: #24d9cc;
  --dark-btn-a: #107fc2;
  --dark-btn-b: #0eb8b0;
}

body.theme-projects {
  --dark-bg-0: #0a120c;
  --dark-bg-1: #122515;
  --dark-bg-2: #2e3820;
  --dark-accent: #73d764;
  --dark-accent-2: #f4ba53;
  --dark-btn-a: #0f8b5e;
  --dark-btn-b: #b78f39;
}

body.theme-architecture {
  --dark-bg-0: #02050e;
  --dark-bg-1: #071629;
  --dark-bg-2: #0e2740;
  --dark-accent: #46c3ff;
  --dark-accent-2: #0de3c5;
  --dark-btn-a: #1d79dd;
  --dark-btn-b: #0aaea0;
}

body.theme-organization {
  --dark-bg-0: #070a11;
  --dark-bg-1: #111b2b;
  --dark-bg-2: #1e3247;
  --dark-accent: #8ab8ff;
  --dark-accent-2: #f0b267;
  --dark-btn-a: #2f6bb6;
  --dark-btn-b: #b4772a;
}

html,
body {
  background:
    radial-gradient(circle at 12% -2%, rgba(51, 174, 255, 0.18), transparent 40%),
    radial-gradient(circle at 92% 8%, rgba(29, 227, 196, 0.16), transparent 36%),
    radial-gradient(circle at 50% 110%, rgba(255, 182, 92, 0.14), transparent 48%),
    linear-gradient(160deg, var(--dark-bg-0), var(--dark-bg-1) 55%, var(--dark-bg-2));
  color: var(--dark-text) !important;
}

.texture,
.ambient-grid,
.grid-noise {
  background-image:
    linear-gradient(to right, rgba(84, 139, 190, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(84, 139, 190, 0.12) 1px, transparent 1px) !important;
  opacity: 0.4;
}

.eyebrow,
.subhead,
.intro-copy,
.sync-meta,
.metric-label,
.panel-head p,
.muted,
.workspace-meta,
.card-note,
.empty-state,
.allowlist-state {
  color: var(--dark-text-soft) !important;
}

.brand-chip {
  color: #b8e3ff !important;
  background: rgba(40, 117, 167, 0.26) !important;
  border-color: rgba(86, 176, 236, 0.42) !important;
}

.hero,
.hero-left,
.hero-right,
.panel,
.summary-card,
.summary-card.accent,
.metric-card,
.board-shell,
.add-card-shell,
.kanban-column,
.project-card,
.workspace-card,
.control-actions,
.simple-list li,
.card,
.surface-card,
.lock-box,
.mermaid-shell,
.json-block,
.status-card,
.triangle-card,
.table-wrap,
.table-wrap table,
.router-metrics .summary-card,
.topology-card,
.tile,
.widget {
  background:
    linear-gradient(165deg, rgba(14, 28, 44, 0.92), rgba(9, 20, 34, 0.94)) !important;
  border-color: var(--dark-line) !important;
  box-shadow: var(--dark-shadow) !important;
  color: var(--dark-text) !important;
}

.metric-card::after {
  background: linear-gradient(90deg, transparent, var(--dark-accent), transparent) !important;
}

h1,
h2,
h3,
h4,
.metric-value,
.summary-card h2,
.board-head h3,
.panel-head h3,
.identity h1,
.hero-left h2 {
  color: var(--dark-text) !important;
}

.btn.ghost,
.telegram-link,
.workspace-chip,
.pill,
.badge,
.command {
  border-color: rgba(99, 177, 231, 0.35) !important;
  color: #d6ecff !important;
  background: rgba(22, 45, 67, 0.82) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
}

.btn.solid,
.telegram-link,
.project-link,
button.btn.solid,
button[type="submit"].btn,
.command:hover {
  background: linear-gradient(125deg, var(--dark-btn-a), var(--dark-btn-b)) !important;
  border-color: rgba(74, 201, 255, 0.4) !important;
  color: #ecf8ff !important;
}

.status-chip {
  border-color: rgba(88, 212, 151, 0.42) !important;
  background: rgba(11, 95, 63, 0.3) !important;
  color: #93f5c1 !important;
}

.status-chip.degraded {
  border-color: rgba(255, 123, 138, 0.45) !important;
  background: rgba(120, 26, 45, 0.26) !important;
  color: #ffc8cf !important;
}

input,
select,
textarea,
.control-token,
.new-card-form input,
.new-card-form select,
.control-form-grid input,
.control-form-grid select,
.control-form-grid textarea,
.control-token-row input {
  background: rgba(9, 18, 30, 0.92) !important;
  border-color: rgba(94, 160, 216, 0.3) !important;
  color: #e4f1ff !important;
}

input::placeholder,
textarea::placeholder {
  color: #7f9fbe !important;
}

table,
th,
td {
  border-color: rgba(104, 167, 219, 0.24) !important;
  color: var(--dark-text) !important;
}

th {
  color: #9cc1e8 !important;
}

.badge.ready {
  background: rgba(23, 105, 67, 0.35) !important;
  color: #8df2bf !important;
}

.badge.degraded,
.badge.medium {
  background: rgba(137, 89, 14, 0.34) !important;
  color: #ffd39a !important;
}

.badge.blocked,
.badge.high,
.badge.urgent {
  background: rgba(126, 28, 44, 0.34) !important;
  color: #ffc1cb !important;
}

.pulse-chart {
  filter: drop-shadow(0 0 14px rgba(52, 181, 255, 0.35));
}

.surface-card span,
.policy-list li,
.simple-list li,
.command-grid .command,
.project-meta,
.workspace-chip,
.pill,
.badge {
  color: var(--dark-text-soft) !important;
}

@keyframes chromePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 181, 255, 0.22);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(52, 181, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 181, 255, 0);
  }
}

.summary-card.accent,
.metric-card:last-child,
.status-chip {
  animation: chromePulse 4.5s ease-in-out infinite;
}