:root,
[data-theme="dark"] {
  --bg-primary: #0a0a0f;
  --bg-secondary: #111118;
  --bg-card: #16161f;
  --bg-card-hover: #1e1e2e;
  --accent: #7c6bf0;
  --accent-glow: rgba(124, 107, 240, 0.3);
  --accent-light: #9585f5;
  --text-primary: #eeeef2;
  --text-secondary: #9898ad;
  --text-muted: #7b7b92;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);
  --nav-bg: rgba(10, 10, 15, 0.85);
  --nav-shadow: 0 2px 30px rgba(0,0,0,0.4);
  --nav-toggle-color: #eeeef2;
  --hero-glow: rgba(124, 107, 240, 0.12);
  --accent-subtle: rgba(124, 107, 240, 0.12);
  --accent-subtle-10: rgba(124, 107, 240, 0.1);
  --accent-border-subtle: rgba(124, 107, 240, 0.2);
  --gradient-1: #7c6bf0;
  --gradient-2: #a78bfa;
  --gradient-3: #c4b5fd;
  --card-hover-border: rgba(124, 107, 240, 0.3);
  --card-hover-glow: rgba(124, 107, 240, 0.08);
  --ring-bg: rgba(255,255,255,0.1);
  --danger: #f87171;
  --amber: #fbbf24;
  --danger-bg: rgba(248, 113, 113, 0.08);
  --mobile-nav-bg: rgba(10, 10, 15, 0.97);
  --mobile-nav-shadow: 0 8px 24px rgba(0,0,0,0.5);
  --bg-watermark: rgba(255,255,255,0.03);
  --accent-faint: rgba(124, 107, 240, 0.06);
  --nvidia-text: #76b900;
  --nvidia-border: rgba(118, 185, 0, 0.3);
  --nvidia-border-hover: rgba(118, 185, 0, 0.5);
  --nvidia-bg-hover: rgba(118, 185, 0, 0.1);
  --hero-drop-shadow: drop-shadow(0 24px 60px rgba(124, 107, 240, 0.18));
  --img-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f8fa;
  --bg-card: #f2f2f7;
  --bg-card-hover: #eaeaf0;
  --accent: #523be7;
  --accent-glow: rgba(82, 59, 231, 0.15);
  --accent-light: #6b5ce7;
  --text-primary: #1a1a2e;
  --text-secondary: #555566;
  --text-muted: #888899;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.12);
  --nav-bg: rgba(255, 255, 255, 0.9);
  --nav-shadow: 0 2px 20px rgba(0,0,0,0.06);
  --nav-toggle-color: #1a1a2e;
  --hero-glow: rgba(82, 59, 231, 0.06);
  --accent-subtle: rgba(82, 59, 231, 0.06);
  --accent-subtle-10: rgba(82, 59, 231, 0.08);
  --accent-border-subtle: rgba(82, 59, 231, 0.15);
  --gradient-1: #523be7;
  --gradient-2: #7c6bf0;
  --gradient-3: #6b5ce7;
  --card-hover-border: rgba(82, 59, 231, 0.2);
  --card-hover-glow: rgba(0, 0, 0, 0.06);
  --ring-bg: #e5e7eb;
  --danger: #dc2626;
  --amber: #d97706;
  --danger-bg: rgba(220, 38, 38, 0.04);
  --mobile-nav-bg: rgba(255, 255, 255, 0.97);
  --mobile-nav-shadow: 0 8px 24px rgba(0,0,0,0.06);
  --bg-watermark: rgba(0,0,0,0.03);
  --accent-faint: rgba(82, 59, 231, 0.03);
  --nvidia-text: #4a7a00;
  --nvidia-border: rgba(118, 185, 0, 0.3);
  --nvidia-border-hover: rgba(118, 185, 0, 0.5);
  --nvidia-bg-hover: rgba(118, 185, 0, 0.06);
  --hero-drop-shadow: drop-shadow(0 24px 60px rgba(82, 59, 231, 0.14));
  --img-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .invert-on-dark { filter: invert(1); }

.layers-light { display: none; }
[data-theme="light"] .layers-dark { display: none; }
[data-theme="light"] .layers-light { display: block; }

[data-theme="light"] .nav-logo img.logo-default { display: none; }
[data-theme="light"] .nav-logo img.logo-light-theme { display: inline; }
.nav-logo img.logo-light-theme { display: none; }

.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
  padding: 0;
}
.theme-toggle:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-secondary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-right .theme-toggle { display: none; }
.nav-right .nav-toggle { display: none; }
@media (max-width: 768px) {
  .nav-right .theme-toggle { display: flex; }
  .nav-right .nav-toggle { display: block; }
  .nav-links .theme-toggle { display: none !important; }
}