/* 基础与背景层 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; min-height: 100%;
  font-family: var(--font);
  font-size: var(--t-body); line-height: var(--t-body-lh);
  color: var(--ink);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
a { color: var(--blue); text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }
:focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 背景四层：稳定渐变底 → 星云光带/斜向光流 → 粒子 → 内容表面 */
.bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bg-base {
  background:
    radial-gradient(95% 60% at 15% 5%, var(--neb-blue) 0%, transparent 62%),
    radial-gradient(40% 26% at 30% 14%, var(--neb-cyan) 0%, transparent 70%),
    radial-gradient(70% 50% at 88% 18%, var(--neb-cyan) 0%, transparent 62%),
    radial-gradient(80% 60% at 50% 105%, var(--neb-violet) 0%, transparent 65%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 40%, var(--bg-0) 100%);
}
.bg-flow {
  overflow: hidden;
}
.bg-flow::before, .bg-flow::after {
  content: ''; position: absolute; left: -30%; right: -30%; height: 46%;
  filter: blur(34px); opacity: .9;
  animation: flow 32s ease-in-out infinite alternate;
}
.bg-flow::before {
  top: -6%; transform: rotate(-9deg);
  background: linear-gradient(90deg, transparent 0%, var(--glow-a) 25%, var(--glow-b) 55%, transparent 90%);
}
.bg-flow::after {
  top: 52%; transform: rotate(7deg); animation-duration: 40s; animation-direction: alternate-reverse;
  background: linear-gradient(90deg, transparent 5%, var(--glow-c) 35%, var(--glow-b) 65%, transparent 95%);
}
@keyframes flow {
  0% { transform: translate3d(-3%, -1%, 0) rotate(-9deg); }
  100% { transform: translate3d(3%, 2%, 0) rotate(-7deg); }
}
.bg-particles { z-index: 0; width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) {
  .bg-flow::before, .bg-flow::after { animation: none; }
}
:root[data-ace-motion="reduced"] .bg-flow::before, :root[data-ace-motion="reduced"] .bg-flow::after { animation: none; }

#app { position: relative; z-index: 1; min-height: 100vh; }