/* ── RESET ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body.dark-theme {
  --bg: #0a0a0a;
  --surface: rgba(18, 18, 18, 0.95);
  --surface-border: rgba(194, 136, 64, 0.15);
  --input-bg: rgb(10, 10, 10, 0.15);
  --text: #e5e7eb;
  --text-strong: #ffffff;
  --muted: #9ca3af;
  --accent: #c28840;
  --accent-light: #d4af37;
  --positive: #16a34a;
  --negative: #dc2626;
  --navbar-bg: rgba(10, 10, 10, 0.92);
  --glow: rgba(194, 136, 64, 0.12);
  --select-bg: #151515;
  --select-color: #ffffff;
  --input-bg: rgba(255, 255, 255, 0.03);
  --input-border: rgba(255, 255, 255, 0.08);
  --grid-color: rgba(255, 255, 255, 0.03);
}
body.light-theme {
  --bg: #f8f8f6;
  --surface: rgba(255, 255, 255, 0.95);
  --surface-border: rgba(212, 175, 55, 0.18);
  --text: #1e1b16;
  --text-strong: #000000;
  --muted: #5a5a5a;
  --accent: #c28840;
  --accent-light: #cfb53b;
  --positive: #16a34a;
  --negative: #dc2626;
  --navbar-bg: rgba(255, 255, 255, 0.92);
  --glow: rgba(194, 136, 64, 0.18);
  --select-bg: #ffffff;
  --select-color: #111111;
  --input-bg: rgba(0, 0, 0, 0.03);
  --input-border: rgba(0, 0, 0, 0.1);
  --grid-color: rgba(0, 0, 0, 0.06);
}

/* accent/positive don't change between themes, so these tints live
   outside the theme blocks. Single source of truth for every page —
   don't redeclare --sidebar-w (or these tints) locally. */
:root {
  --sidebar-w: 272px;
  --accent-dim: rgba(194, 136, 64, 0.12);
  --positive-dim: rgba(22, 163, 74, 0.12);
}

html {
  scroll-behavior: smooth;
}
body {
  font-family: "Inter", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
}

/* Prevent stray horizontal scroll on small screens and keep media in bounds */
img,
svg,
video {
  max-width: 100%;
  height: auto;
}
table {
  max-width: 100%;
}
input,
select,
textarea,
button {
  max-width: 100%;
}

.background-grid {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at center, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(
    circle at center,
    black 20%,
    transparent 80%
  );
}
.glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(150px);
  z-index: -2;
  pointer-events: none;
}
.glow-1 {
  width: 450px;
  height: 450px;
  background: var(--glow);
  top: -100px;
  right: -100px;
  opacity: 0.6;
}
.glow-2 {
  width: 400px;
  height: 400px;
  background: var(--glow);
  bottom: -150px;
  left: -100px;
  opacity: 0.4;
}