:root {
  --bg-primary: #0a0e1a;
  --bg-secondary: #111827;
  --bg-tertiary: #1f2937;
  --bg-elevated: #161d30;
  --surface-glass: rgba(17, 24, 39, 0.78);
  --surface-glow: rgba(59, 130, 246, 0.14);
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
  --accent-primary: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-glow: rgba(59, 130, 246, 0.18);
  --stage-a: #f59e0b;
  --stage-b: #10b981;
  --stage-c: #6366f1;
  --stage-d: #ec4899;
  --success: #22c55e;
  --warning: #eab308;
  --error: #ef4444;
  --info: #38bdf8;
  --border-default: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.14);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.28);
  --shadow-strong: 0 28px 80px rgba(0, 0, 0, 0.38);
  --radius-xl: 14px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --font-heading: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  --container-width: min(1440px, calc(100vw - 32px));
  --page-gap: 20px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body.portal-body {
  position: relative;
  color: var(--text-primary);
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 14% 18%, rgba(99, 102, 241, 0.18), transparent 22%),
    radial-gradient(circle at 86% 10%, rgba(59, 130, 246, 0.18), transparent 24%),
    radial-gradient(circle at 52% 82%, rgba(236, 72, 153, 0.12), transparent 24%),
    linear-gradient(180deg, #09101d 0%, #0a0e1a 45%, #101827 100%);
}

body.portal-body::before,
body.portal-body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body.portal-body::before {
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.045) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: 0.85;
}

body.portal-body::after {
  background:
    radial-gradient(circle at 24% 20%, rgba(59, 130, 246, 0.1), transparent 30%),
    radial-gradient(circle at 80% 28%, rgba(16, 185, 129, 0.08), transparent 28%);
}

a {
  color: inherit;
}