.theme-toggle .moon { display: none; }
.theme-toggle .sun { display: inline; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --deep: #070b25;
  --bg: #0d1021;
  --card: #15182b;
  --ink: #f1f2f8;
  --muted: #9ca1b8;
  --line: #292d45;
  --green: #42c991;
  --amber: #f1ad42;
  --red: #f07171;
  --shadow: 0 16px 40px rgba(0, 0, 0, .28);
}

:root[data-theme="dark"] body { background: var(--bg); }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: inline; font-size: 18px; }
:root[data-theme="dark"] .topbar { background: rgba(13, 16, 33, .9); }
:root[data-theme="dark"] .metric,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .agent-card,
:root[data-theme="dark"] .client-card,
:root[data-theme="dark"] .vps-card,
:root[data-theme="dark"] .connection-card,
:root[data-theme="dark"] .drawer,
:root[data-theme="dark"] .drawer-head,
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] .global-search,
:root[data-theme="dark"] .field,
:root[data-theme="dark"] .select,
:root[data-theme="dark"] .modal-form input,
:root[data-theme="dark"] .modal-form select {
  background-color: var(--card);
  color: var(--ink);
}

:root[data-theme="dark"] .metric-icon,
:root[data-theme="dark"] .service-icon,
:root[data-theme="dark"] .connection-card .service-large {
  background: #202440;
  color: #b8c0ff;
}

:root[data-theme="dark"] .agent-card:hover,
:root[data-theme="dark"] .client-card:hover,
:root[data-theme="dark"] .vps-card:hover,
:root[data-theme="dark"] .connection-card:hover,
:root[data-theme="dark"] tbody tr:hover {
  background: #191d34;
  border-color: #3a4060;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select { color: var(--ink); }
:root[data-theme="dark"] input::placeholder { color: #737a99; }
:root[data-theme="dark"] .select:hover { background-color: #1a1e34; border-color: #454a68; }
:root[data-theme="dark"] .select option { background: #15182b; color: #f1f2f8; }
:root[data-theme="dark"] .progress { background: #292d45; }
:root[data-theme="dark"] .check-item,
:root[data-theme="dark"] .incident,
:root[data-theme="dark"] .detail-section,
:root[data-theme="dark"] .info { background: #121528; }
:root[data-theme="dark"] .status { background: rgba(66, 201, 145, .13); }
:root[data-theme="dark"] .status.warning,
:root[data-theme="dark"] .status.investigating { background: rgba(241, 173, 66, .14); }
:root[data-theme="dark"] .status.maintenance,
:root[data-theme="dark"] .status.open { background: rgba(240, 113, 113, .14); }
:root[data-theme="dark"] .checkmark { background: rgba(66, 201, 145, .13); }
:root[data-theme="dark"] .donut::after { background: var(--card); }
:root[data-theme="dark"] .overlay { background: rgba(2, 4, 16, .76); }
:root[data-theme="dark"] .drawer-hero { background: #090d2c; border: 1px solid #252b52; }
:root[data-theme="dark"] .toast { background: #eef0ff; color: #101329; }
:root[data-theme="dark"] .theme-toggle { border-color: #3b405d; }
:root[data-theme="dark"] .btn.primary {
  background: var(--navy);
  border-color: #3345bf;
  color: #fff;
}
:root[data-theme="dark"] th { background: #121528; }
:root[data-theme="dark"] .barcol i { filter: brightness(1.3); }

.theme-toggle { position: relative; font-weight: 700; }
.theme-toggle:hover { border-color: var(--navy); transform: translateY(-1px); }