:root {
  color-scheme: dark;
  --bg: #0b0f12;
  --panel: #151a1f;
  --panel-2: #1b2128;
  --panel-3: #101417ad;
  --muted: #8d98a8;
  --text: #eef3f8;
  --accent: #21d4a8;
  --accent-2: #2de3ff;
  --danger: #ff5f5f;
  --warning: #f7b731;
  --good: #26d07c;
  --shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  --border: rgba(255, 255, 255, 0.08);
  --topbar-bg: #0d1217;
  --status-online-bg: rgba(33, 212, 168, 0.15);
  --status-online-border: rgba(33, 212, 168, 0.45);
  --status-online-text: #53e5c0;
  --status-offline-bg: rgba(255, 95, 95, 0.14);
  --status-offline-border: rgba(255, 95, 95, 0.5);
  --status-offline-text: #ff8e8e;
  --section-bg: rgba(27, 33, 40, 0.65);
  --section-border: rgba(255, 255, 255, 0.08);
  --section-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  --button-bg: #101417;
  --button-border: rgba(255, 255, 255, 0.12);
  --button-text: var(--text);
  --button-hover-bg: #151b21;
  --button-hover-border: rgba(45, 227, 255, 0.35);
  --button-active-bg: #1a232b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  background: radial-gradient(circle at top, rgba(36, 60, 70, 0.2), transparent 45%),
    radial-gradient(circle at 10% 20%, rgba(37, 163, 140, 0.2), transparent 35%),
    var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

body.theme-light {
  color-scheme: light;
  --bg: #eef3f8;
  --panel: #f7fbff;
  --panel-2: #eef4fb;
  --panel-3: #e5edf7;
  --muted: #5d6c7f;
  --text: #182433;
  --accent: #0d9d7d;
  --accent-2: #1a84c7;
  --shadow: 0 14px 34px rgba(18, 47, 77, 0.16);
  --border: rgba(19, 45, 74, 0.18);
  --topbar-bg: #f5f8fc;
  --status-online-bg: rgba(13, 157, 125, 0.14);
  --status-online-border: rgba(13, 157, 125, 0.45);
  --status-online-text: #0d8a70;
  --status-offline-bg: rgba(213, 78, 78, 0.14);
  --status-offline-border: rgba(213, 78, 78, 0.42);
  --status-offline-text: #be3d3d;
  --section-bg: rgba(238, 244, 251, 0.96);
  --section-border: rgba(92, 129, 163, 0.28);
  --section-shadow: 0 8px 18px rgba(54, 97, 140, 0.12);
  --button-bg: #f4f9ff;
  --button-border: rgba(90, 128, 163, 0.34);
  --button-text: #1d2f43;
  --button-hover-bg: #ebf4fd;
  --button-hover-border: rgba(58, 107, 154, 0.48);
  --button-active-bg: #e2eefb;
  background: radial-gradient(circle at top, rgba(152, 191, 219, 0.35), transparent 45%),
    radial-gradient(circle at 10% 20%, rgba(130, 176, 200, 0.2), transparent 35%),
    var(--bg);
}