:root {
  color-scheme: light dark;
  --bg: #f5f9ff;
  --surface: rgba(255,255,255,.82);
  --surface-solid: #fff;
  --surface-2: #edf5ff;
  --surface-hover: #e7f2ff;
  --line: rgba(38,79,126,.12);
  --text: #10213b;
  --muted: #65778f;
  --blue: #197cff;
  --cyan: #24c5ea;
  --indigo: #6657ff;
  --green: #19b878;
  --orange: #ef9a38;
  --red: #e84d66;
  --shadow: 0 24px 80px rgba(53,92,137,.15);
  --small-shadow: 0 10px 30px rgba(53,92,137,.1);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, ui-rounded, "SF Pro Rounded", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
html[data-theme="dark"] {
  --bg: #06111f;
  --surface: rgba(13,28,47,.85);
  --surface-solid: #0d1c2f;
  --surface-2: #132942;
  --surface-hover: #19344f;
  --line: rgba(187,218,255,.11);
  --text: #eff7ff;
  --muted: #91a6bf;
  --shadow: 0 25px 90px rgba(0,0,0,.34);
  --small-shadow: 0 10px 35px rgba(0,0,0,.22);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: #06111f; --surface: rgba(13,28,47,.85); --surface-solid: #0d1c2f;
    --surface-2: #132942; --surface-hover: #19344f; --line: rgba(187,218,255,.11);
    --text: #eff7ff; --muted: #91a6bf; --shadow: 0 25px 90px rgba(0,0,0,.34);
  }
}