/* Dark theme */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap');
* {
  font-family: "Unbounded", sans-serif !important;
}
:root {
  --bg-primary: #030712;
  --bg-secondary:#111827;
  --bg-tertiary: #111827;
  --border: #484f58;
  --border-hover: #3e434b;
  --text-primary: #cdcdcd;
  --text-secondary: #9ca3af;
  --text-muted: #5c6370;
  --hover-bg: rgba(255, 255, 255, 0.08);
  --segment-empty: #3e434b;
  --accent: linear-gradient(135deg, rgb(24, 43, 54) 0%, rgb(21, 34, 41) 100%);
  --color-green: #3aff82;
  --color-red: #ff3232;
  --color-yellow: #ffae00;
  --filter-online-bg: rgba(58, 255, 130, 0.15);
  --filter-offline-bg: rgba(255, 50, 50, 0.15);
  --btn-active-bg: rgba(58, 255, 130, 0.1);
  --btn-active-border: rgba(58, 255, 130, 0.3);
}

/* Light theme */
.light {
  --bg-primary: #f5f8fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #edf1f7;
  --border: #d0d9e8;
  --border-hover: #b8c4d6;
  --text-primary: #0a0a0a;
  --text-secondary: #4b5563;
  --text-muted: #8c95a4;
  --hover-bg: rgba(0, 0, 0, 0.05);
  --segment-empty: #c4cdd9;
  --accent: linear-gradient(135deg, rgb(24, 43, 54) 0%, rgb(21, 34, 41) 100%);
  --color-green: #00a63d;
  --color-red: #ff0000;
  --color-yellow: #ea8900;
  --filter-online-bg: rgba(0, 166, 61, 0.15);
  --filter-offline-bg: rgba(255, 0, 0, 0.15);
  --btn-active-bg: rgba(0, 166, 61, 0.1);
  --btn-active-border: rgba(0, 166, 61, 0.3);
}