html[data-theme="dark"],
html[data-theme="monitor"] {
  color-scheme: dark;
  --black: #ffffff;
  --red: #c2120e;
  --red-dark: #ff4b44;
  --white: #000000;
  --paper: #050505;
  --paper-2: #111111;
  --ink: #f7f7f7;
  --muted: #b7bcc4;
  --line: #34383f;
  --glass: rgba(18, 18, 18, 0.94);
  --soft-red: rgba(194, 18, 14, 0.18);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 8px 26px rgba(0, 0, 0, 0.46);
  --glow: 0 0 0 1px rgba(194, 18, 14, 0.42), 0 0 18px rgba(194, 18, 14, 0.22);
  --blue: #58a6ff;
  --green: #62b06d;
  --match-green: #62b06d;
  --match-green-soft: rgba(98, 176, 109, 0.22);
  --teal: #1f929d;
  --md-primary: #c2120e;
  --md-on-primary: #ffffff;
  --md-primary-container: #2a0d0b;
  --md-on-primary-container: #ffffff;
  --md-secondary: #d6d8dc;
  --md-on-secondary: #111111;
  --md-secondary-container: #24272c;
  --md-on-secondary-container: #ffffff;
  --md-tertiary: #58a6ff;
  --md-on-tertiary: #061423;
  --md-tertiary-container: #11263e;
  --md-on-tertiary-container: #d9ecff;
  --md-surface: #050505;
  --md-surface-dim: #000000;
  --md-surface-bright: #242424;
  --md-surface-container-lowest: #080808;
  --md-surface-container-low: #111111;
  --md-surface-container: #171717;
  --md-surface-container-high: #202124;
  --md-surface-container-highest: #2b2d31;
  --md-on-surface: #f7f7f7;
  --md-on-surface-variant: #c9cdd3;
  --md-outline: #858b94;
  --md-outline-variant: #34383f;
  --md-error: #ff554d;
  --md-on-error: #ffffff;
  --md-state-hover: rgba(255, 255, 255, 0.08);
  --md-state-focus: rgba(194, 18, 14, 0.32);
  --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.85), 0 4px 14px rgba(0, 0, 0, 0.38);
  --md-elevation-2: 0 2px 5px rgba(0, 0, 0, 0.90), 0 10px 28px rgba(0, 0, 0, 0.44);
  --md-elevation-3: 0 8px 18px rgba(0, 0, 0, 0.92), 0 20px 48px rgba(0, 0, 0, 0.52);
}

html[data-theme="dark"] body,
html[data-theme="monitor"] body {
  background: var(--md-surface);
}

html[data-theme="dark"] .sidebar,
html[data-theme="monitor"] .sidebar {
  background: var(--md-surface-container);
  border-right-color: var(--md-outline-variant);
}

html[data-theme="dark"] .sidebar::before,
html[data-theme="monitor"] .sidebar::before {
  background: linear-gradient(180deg, rgba(194, 18, 14, 0.22), transparent 78%);
}

html[data-theme="dark"] .sidebar::after,
html[data-theme="monitor"] .sidebar::after {
  background: var(--md-primary);
}

html[data-theme="dark"] .brand-mark,
html[data-theme="monitor"] .brand-mark {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .list-item,
html[data-theme="dark"] .customer,
html[data-theme="dark"] .bar-row,
html[data-theme="dark"] .customer-card,
html[data-theme="dark"] .sync-card,
html[data-theme="dark"] .login-panel,
html[data-theme="dark"] .license-modal-panel,
html[data-theme="dark"] .license-context-menu,
html[data-theme="monitor"] .topbar,
html[data-theme="monitor"] .panel,
html[data-theme="monitor"] .metric,
html[data-theme="monitor"] .list-item,
html[data-theme="monitor"] .customer,
html[data-theme="monitor"] .bar-row,
html[data-theme="monitor"] .customer-card,
html[data-theme="monitor"] .sync-card,
html[data-theme="monitor"] .login-panel,
html[data-theme="monitor"] .license-modal-panel,
html[data-theme="monitor"] .license-context-menu {
  border-color: var(--md-outline-variant);
  background: var(--md-surface-container-low);
  box-shadow: var(--md-elevation-1);
}

html[data-theme="dark"] .chart-panel,
html[data-theme="monitor"] .chart-panel {
  background:
    linear-gradient(145deg, rgba(36, 41, 48, .92), rgba(18, 22, 28, .86)),
    var(--md-surface-container-low);
}

html[data-theme="dark"] .chart-panel::before,
html[data-theme="monitor"] .chart-panel::before {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}

html[data-theme="dark"] .line-chart,
html[data-theme="monitor"] .line-chart {
  border-color: rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
}

html[data-theme="dark"] .exchange-section,
html[data-theme="monitor"] .exchange-section {
  border-color: var(--md-outline-variant);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)), var(--md-surface-container-lowest);
}

html[data-theme="dark"] .nav a,
html[data-theme="monitor"] .nav a {
  color: var(--md-on-surface-variant);
}

html[data-theme="dark"] .nav a.active,
html[data-theme="dark"] .nav a:hover,
html[data-theme="monitor"] .nav a.active,
html[data-theme="monitor"] .nav a:hover {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

html[data-theme="dark"] .nav a.active,
html[data-theme="monitor"] .nav a.active {
  background: #2a2d33;
  color: #ffffff;
}

html[data-theme="dark"] .nav a.active::before,
html[data-theme="monitor"] .nav a.active::before {
  background: var(--md-primary);
}

html[data-theme="dark"] button,
html[data-theme="monitor"] button {
  border-color: var(--md-outline-variant);
  background: var(--md-surface-container);
  color: var(--md-on-surface);
}

html[data-theme="dark"] button:hover,
html[data-theme="monitor"] button:hover {
  border-color: color-mix(in srgb, var(--md-primary), var(--md-outline-variant) 45%);
  background: var(--md-state-hover);
  color: var(--md-on-surface);
}

html[data-theme="dark"] button.primary,
html[data-theme="monitor"] button.primary,
html[data-theme="dark"] .button.primary,
html[data-theme="monitor"] .button.primary {
  border-color: var(--md-primary);
  background: var(--md-primary);
  color: var(--md-on-primary);
}

html[data-theme="dark"] button.primary:hover,
html[data-theme="monitor"] button.primary:hover,
html[data-theme="dark"] .button.primary:hover,
html[data-theme="monitor"] .button.primary:hover {
  background: color-mix(in srgb, var(--md-primary), white 10%);
  color: var(--md-on-primary);
}

html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .login-field input,
html[data-theme="dark"] .impersonate-form input,
html[data-theme="dark"] .theme-switcher select,
html[data-theme="dark"] .license-content,
html[data-theme="monitor"] .search-box input,
html[data-theme="monitor"] .login-field input,
html[data-theme="monitor"] .impersonate-form input,
html[data-theme="monitor"] .theme-switcher select,
html[data-theme="monitor"] .license-content {
  border-color: var(--md-outline);
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface);
}

html[data-theme="dark"] th,
html[data-theme="monitor"] th {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
}

html[data-theme="dark"] .badge,
html[data-theme="monitor"] .badge {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
}

html[data-theme="dark"] .badge.good,
html[data-theme="monitor"] .badge.good {
  background: var(--md-primary);
  color: var(--md-on-primary);
}

html[data-theme="dark"] .contact,
html[data-theme="dark"] .detail-contact,
html[data-theme="monitor"] .contact,
html[data-theme="monitor"] .detail-contact {
  background: var(--md-surface-container);
}