/* VM Tips 2026 – shared dark / light theme */

:root,
[data-theme="dark"] {
  --bg: #111111;
  --surface: #1c1c1c;
  --surface2: #252525;
  --border: #333333;
  --text: #eeeeee;
  --muted: #888888;
  --text-muted: #888888;
  --gold: #f0c040;
  --silver: #b0bec5;
  --bronze: #cd7f32;
  --green: #4caf7d;
  --accent: #3a9e6a;
  --blue: #5b9bd5;
  --red: #e05c5c;
  --purple: #b07fd4;
  --header-bg: linear-gradient(135deg, #0d2a0d, #1a3a1a 50%, #0d2a0d);
  --card-header-bg: linear-gradient(90deg, #1a3a1a, #1c2333);
  --row-hover: #ffffff08;
  --row-hover-subtle: #ffffff04;
  --success-bg: #3fb95018;
  --error-bg: #f8514918;
  --flag-ring: rgba(255, 255, 255, 0.08);
  --subtle-text: rgba(255, 255, 255, 0.45);
  --podium-gold-bg: linear-gradient(180deg, #b8921a33, #b8921a11);
  --podium-silver-bg: linear-gradient(180deg, #90a4ae33, #90a4ae11);
  --podium-bronze-bg: linear-gradient(180deg, #8d6e6333, #8d6e6311);
  --btn-hover: #2ea043;
  --btn-disabled: #444444;
  --admin-badge-bg: #3a1a1a;
  --toggle-bg: rgba(255, 255, 255, 0.08);
  --toggle-border: rgba(255, 255, 255, 0.14);
  --toggle-hover-bg: rgba(255, 255, 255, 0.14);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #eef1ee;
  --surface: #ffffff;
  --surface2: #f3f6f3;
  --border: #d4dbd4;
  --text: #1a1f1a;
  --muted: #5c665c;
  --text-muted: #5c665c;
  --gold: #b8860b;
  --silver: #607080;
  --bronze: #a0622a;
  --green: #2d8a5e;
  --accent: #2d8a5e;
  --blue: #3a7fbf;
  --red: #c94444;
  --purple: #8a5cb0;
  --header-bg: linear-gradient(135deg, #dceee0, #edf5ef 50%, #dceee0);
  --card-header-bg: linear-gradient(90deg, #e4f2e7, #eaf0f6);
  --row-hover: #00000006;
  --row-hover-subtle: #00000004;
  --success-bg: #2d8a5e1a;
  --error-bg: #c9444418;
  --flag-ring: rgba(0, 0, 0, 0.1);
  --subtle-text: rgba(0, 0, 0, 0.45);
  --podium-gold-bg: linear-gradient(180deg, #b8860b28, #b8860b0d);
  --podium-silver-bg: linear-gradient(180deg, #60708028, #6070800d);
  --podium-bronze-bg: linear-gradient(180deg, #a0622a28, #a0622a0d);
  --btn-hover: #247a52;
  --btn-disabled: #b8c0b8;
  --admin-badge-bg: #fde8e8;
  --toggle-bg: rgba(0, 0, 0, 0.05);
  --toggle-border: rgba(0, 0, 0, 0.12);
  --toggle-hover-bg: rgba(0, 0, 0, 0.09);
  color-scheme: light;
}

.theme-toggle {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 9999;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--toggle-border);
  background: var(--toggle-bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
  backdrop-filter: blur(6px);
}

.theme-toggle:hover {
  background: var(--toggle-hover-bg);
  transform: scale(1.06);
}