:root {
  --bg: #121212;
  --surface: #1c1c1c;
  --surface-active: #2a2a2a;
  --text: #e6e6e6;
  --text-subtle: #999;
  --accent: #43205d;
  --accent-hover: #f5a524;
  --font: Poppins, sans-serif;
}

html[data-theme="light"] {
  --bg: #fdfdfd;
  --surface: #f0f0f0;
  --surface-active: #e0e0e0;
  --text: #111;
  --text-subtle: #666;
  --accent: #7F2CCB;
  --accent-hover: #b84700;
  --font: Poppins, sans-serif;
}

html[data-theme="retro"] {
  --bg: #0f1a20;
  --surface: #1e2a30;
  --surface-active: #2a363c;
  --text: #d5d9d9;
  --text-subtle: #999;
  --accent: #ff66cc;
  --accent-hover: #ffcc00;
  --font: "Tiny5", cursive;
}

/* ===== Sidebar (static) ===== */
.sidebar {
  width: 220px;
  background: var(--surface);
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 60px; /* below header */
  left: 0;
  border-right: 1px solid #2a2a2a;
  overflow-y: auto;
  box-sizing: border-box;
  padding-top: 0.5rem;
}

/* Sidebar header */
.sidebar-header {
  font-weight: bold;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid #333;
}

/* Sidebar links container */
#sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0;
}

/* Sidebar links */
.sidebar-link {
  color: var(--text);
  font-size: 0.9rem;
  text-decoration: none;
  padding: 0.4rem 1rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.sidebar-link:hover {
  color: var(--accent);
  background: var(--surface-active);
  text-decoration: none;
}

.sidebar-link.active {
  color: var(--bg);
  background: var(--accent);
  text-decoration: none;
}

/* Main content (leave space for sidebar) */
main {
  margin-left: 220px; /* matches sidebar width */
  padding: 1rem;
  transition: margin-left 0.3s ease;
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Hide sidebar completely on small screens */
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }

  main {
    margin-left: 0;
  }
}