:root {
  color-scheme: light;
  --color-bg: #f4f7fb;
  --color-surface: #ffffff;
  --color-surface-soft: #f7f9fd;
  --color-primary: #2463e9;
  --color-primary-strong: #174fc6;
  --color-primary-soft: #eaf2ff;
  --color-cyan: #08b5d2;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-text: #152238;
  --color-muted: #718096;
  --color-border: #e1e8f3;
  --color-border-strong: #d4dfef;
  --color-focus: rgba(36, 99, 233, 0.22);
  --shadow-card: 0 14px 38px rgba(31, 55, 92, 0.075);
  --shadow-card-hover: 0 18px 44px rgba(31, 85, 160, 0.12);
  --shadow-glow: 0 0 34px rgba(36, 99, 233, 0.16);
  --radius-card: 19px;
  --radius-control: 12px;
  --space-page: clamp(20px, 4vw, 56px);
  font-family:
    "Segoe UI Variable Text", "Segoe UI", Inter, "Noto Sans SC", "PingFang SC",
    "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  font-size: 16px;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 78% -5%, rgba(37, 99, 235, 0.1), transparent 30rem),
    radial-gradient(circle at -8% 105%, rgba(6, 182, 212, 0.05), transparent 26rem),
    var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}