/* ═══════════════════════════════════════════════════
   ENGEBLIND — Global Reset & Body Background
═══════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Roboto', sans-serif;
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: color 0.3s ease;

  /* Animated mesh gradient background */
  background-color: var(--grad-1);
  background-image:
    radial-gradient(ellipse at 20% 50%, var(--grad-2) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, var(--grad-3) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 80%, color-mix(in srgb, var(--grad-2) 60%, var(--grad-1)) 0%, transparent 50%);
  background-attachment: fixed;
}

/* Subtle animated orbs behind everything */
body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  animation: floatOrb 18s ease-in-out infinite alternate;
}
body::before {
  width: 600px; height: 600px;
  top: -150px; left: -150px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
}
body::after {
  width: 500px; height: 500px;
  bottom: -100px; right: -100px;
  background: radial-gradient(circle, var(--grad-2) 0%, transparent 70%);
  animation-delay: -9s;
  animation-duration: 22s;
}

@keyframes floatOrb {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.08); }
}

/* Layout */
#app {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.page-container {
  padding: var(--sp-6) var(--sp-8);
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* Typography */
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }

h1 { font-size: 1.75rem; font-weight: 300; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: 1.25rem; font-weight: 400; }
h3 { font-size: 1rem;    font-weight: 500; }

/* Logo dark-mode inversion */
.dark-theme #sidebar-logo { filter: brightness(0) invert(1); }

/* Mobile logo */
.mobile-logo  { display: none; }
.desktop-title{ display: block; }

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: var(--r-full);
}

/* ── Logo handling ── */
.light-theme #sidebar-logo { filter: none; }