:root {
  --green: #00ff9a;
  --green-2: #00d084;
  --bg-dark: #0b0f0c;
  --bg-dark-2: #0f1511;
  --border-dark: #1f2b24;
}
html, body.theme-ready, body.theme-ready * { transition: background-color .25s linear, color .25s linear, border-color .25s linear; }
html[data-theme="dark"] {
  color-scheme: dark;
  --bs-body-bg: var(--bg-dark);
  --bs-card-bg: var(--bg-dark-2);
  --bs-body-color: #d6f5d6;
  --bs-border-color: var(--border-dark);
}
html[data-theme="light"] {
  color-scheme: light;
  --bs-body-bg: #ffffff;
  --bs-card-bg: #ffffff;
  --bs-body-color: #212529;
  --bs-border-color: #e5e7eb;
}
/* Ensure body uses the computed variables explicitly */
body, html, .bg-body { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; }
.card, .bg-card { background-color: var(--bs-card-bg) !important; color: var(--bs-body-color) !important; }
.text-muted { color: rgba(214, 245, 214, 0.5) !important; }
.card, .navbar *, .border { border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; }
.stat { background: rgba(0,255,153,0.06); border: 1px solid rgba(0,255,153,0.25); }
.glassy { backdrop-filter: blur(6px); background: linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,.05)); }
::placeholder {
  color: var(--bs-body-color) !important;
}