/* Aurex — gedeelde huisstijl voor site (/), hosting (/hosting) en dashboard (/dashboard).
   Donker, rustig, met subtiele blauwe accenten. Alle drie de onderdelen lezen deze tokens. */
:root {
  --ax-ink: #07080a;
  --ax-surface: #0d0f13;
  --ax-raised: #12151a;
  --ax-hover: #171b22;
  --ax-line: #1c212a;
  --ax-strong: #2a313d;
  --ax-fg: #e4e7ec;
  --ax-muted: #868f9d;
  --ax-faint: #566070;
  --ax-accent: #3a63b8;
  --ax-accent-hover: #4673cc;
  --ax-accent-soft: #111c33;
  --ax-accent-text: #8fb0ee;
  --ax-ok: #3e9d78;
  --ax-warn: #c19a45;
  --ax-bad: #c05a5a;
  --ax-radius: 10px;
  --ax-nav-h: 60px;
  --ax-font: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ax-font-display: 'Space Grotesk', 'IBM Plex Sans', 'Segoe UI', sans-serif;
  color-scheme: dark;
}

/* ---------- Globale navigatie ---------- */
.ax-nav {
  position: sticky; top: 0; z-index: 1000; height: var(--ax-nav-h);
  background: rgba(7, 8, 10, .86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ax-line); font-family: var(--ax-font);
}
.ax-nav-inner {
  max-width: 1400px; height: 100%; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.ax-brand {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ax-fg);
  font-family: var(--ax-font-display); font-weight: 700; font-size: 17px; letter-spacing: .16em;
}
.ax-brand img { width: 26px; height: 26px; object-fit: contain; }
.ax-links { display: flex; gap: 6px; }
.ax-links a {
  position: relative; color: var(--ax-muted); text-decoration: none; font-family: var(--ax-font-display);
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 8px 14px; border-radius: 8px;
  transition: color .15s, background .15s;
}
.ax-links a:hover { color: var(--ax-fg); background: var(--ax-hover); }
.ax-links a.active { color: var(--ax-fg); }
.ax-links a.active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -13px; height: 2px; background: var(--ax-accent-hover); border-radius: 2px;
}
.ax-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.ax-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--ax-strong);
  background: var(--ax-raised); color: var(--ax-fg); border-radius: 8px; padding: 8px 14px; font: 600 12px var(--ax-font-display);
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s;
}
.ax-btn:hover { background: var(--ax-hover); }
.ax-btn-primary { background: var(--ax-accent); border-color: var(--ax-accent); color: #fff; }
.ax-btn-primary:hover { background: var(--ax-accent-hover); border-color: var(--ax-accent-hover); }
.ax-btn-ghost { background: transparent; border-color: transparent; color: var(--ax-muted); }
.ax-hidden { display: none !important; }
.ax-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ax-user-link { display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 3px 10px 3px 3px; border-radius: 999px; color: var(--ax-muted); font-size: 13px; }
.ax-user-link:hover { background: var(--ax-hover); color: var(--ax-fg); }
.ax-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--ax-accent-soft) center/cover; color: var(--ax-accent-text);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none;
}
.ax-user-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-cart { position: relative; display: inline-flex; padding: 6px; color: var(--ax-fg); }
.ax-cart-count {
  position: absolute; top: -3px; right: -5px; background: var(--ax-accent); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; padding: 1px 6px;
}
.ax-burger { display: none; }

@media (max-width: 860px) {
  .ax-nav-inner { grid-template-columns: auto 1fr; padding: 0 14px; }
  .ax-burger { display: inline-flex; margin-left: 8px; }
  .ax-links {
    display: none; position: absolute; top: var(--ax-nav-h); left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 14px 14px;
    background: var(--ax-ink); border-bottom: 1px solid var(--ax-line);
  }
  .ax-nav.open .ax-links { display: flex; }
  .ax-links a { padding: 12px 8px; }
  .ax-links a.active::after { display: none; }
  .ax-user-name { display: none; }
}

body.ax-notfound { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--ax-ink); color: var(--ax-fg); font-family: var(--ax-font); text-align: center; }
body.ax-notfound h1 { font: 700 64px var(--ax-font-display); margin: 0 0 8px; }
body.ax-notfound a { color: var(--ax-accent-text); }