:root {
  --accent: #6aaefc;
  --accent-600: #4a90e2;
  --good: #30b26f;
  --warn: #e9b500;
}

body.mode-dark {
  --bg: #0c0f14;
  --panel: #12161d;
  --panel-2: #1a1f28;
  --text: #d9e2ec;
  --muted: #8aa0b2;
  --border: #273142;
  --pill: #202735;
  --shadow: 0 10px 30px rgba(0,0,0,0.175), 0 2px 10px rgba(0,0,0,0.10);
}

body.mode-light {
  --bg: #ffffff;
  --panel: #f5f7fb;
  --panel-2: #eef2f7;
  --text: #0c0f14;
  --muted: #5b6b7a;
  --border: #d9e2ec;
  --pill: #eef2f7;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 10px rgba(15, 23, 42, 0.08);
}


*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  min-height: 100vh;
}



.header { 
  position: sticky; 
  top: 0; 
  z-index: 30; 
  background: #6484D4;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}


.navbar { max-width: 1200px; margin: 0 auto; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; }

.navbar-logo {
  flex: 1;
  margin: 0 16px;
  background: #6484D4;
  padding: 6px 10px;
  border-radius: 6px;
}



.desktop-nav a { color: var(--text); text-decoration: none; margin-left: 18px; font-size: 0.98rem; opacity: 0.9; }
.desktop-nav a.active, .desktop-nav a:hover { color: var(--accent); }

.hamburger { display: none; background: none; border: none; height: 32px; width: 32px; cursor: pointer; }
.hamburger span { display: block; width: 24px; height: 3px; margin: 5px 0; background: #fff; border-radius: 2px; }
.side-menu { display: none; }
.side-menu-overlay { display: none; }

@media (max-width: 640px) { .desktop-nav { display: none; } .hamburger { display: inline-block; } }