:root {
  color-scheme: dark;

  --bg: #0b0b12;
  --bg-elev: #12121c;
  --surface: #16161f;
  --surface-2: #1e1e2b;
  --surface-3: #262636;
  --border: #2a2a3d;
  --border-soft: #22222f;

  --text: #ecedf5;
  --muted: #9a9ab4;
  --faint: #6b6b85;

  --accent: #8b5cf6;
  --accent-2: #ec4899;
  --accent-grad: linear-gradient(100deg, #7c3aed, #db2777);
  --accent-soft: rgba(139, 92, 246, 0.14);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);

  --header-h: 64px;
  --bottomnav-h: 62px;
  --maxw: min(1660px, 95vw);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { height: 100%; }
body { min-height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

/* Ambient background: soft accent glows behind everything (fixed, non-scrolling). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 640px at 12% -12%, rgba(124, 58, 237, 0.18), transparent 60%),
    radial-gradient(1000px 560px at 100% -8%, rgba(219, 39, 119, 0.13), transparent 58%),
    radial-gradient(900px 900px at 88% 108%, rgba(124, 58, 237, 0.08), transparent 60%),
    var(--bg);
}

* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 20px; border: 2px solid var(--bg); transition: background 0.2s; }
*::-webkit-scrollbar-thumb:hover { background: var(--accent); }