/* Design tokens + base reset. Change the look from here. */
:root {
  --bg: #15102b;
  --bg2: #1f1640;
  --card: #271b54;
  --card2: #32246b;
  --ink: #f5f2ff;
  --muted: #b6a9e6;
  --line: #4a3a86;
  --accent: #7c5cff;
  --accent2: #ff7a59;
  --good: #22c1a4;
  --gold: #ffd23f;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --r: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: "Baloo 2", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, #3a2780 0%, transparent 55%),
    radial-gradient(1000px 700px at 110% 10%, #6b2f6f 0%, transparent 50%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%);
  background-attachment: fixed;
  min-height: 100dvh;
}

/* The body stays a plain block so the hub's header and footer span the page; the app centres itself. */
.app { width: 100%; max-width: calc(540px + 32px); margin: 0 auto; padding: 20px 16px 60px; }