/* 全站科技氛围层 — 挂 body，pointer-events:none，不挡操作
   只给原版青蓝用；紫调主体自己画背景，不吃这套青令牌。 */
html:not([data-theme="purple-dark"]) {
  --bg: #061018;
  --surface: rgba(8, 24, 40, .58);
  --surface-solid: #0c1a28;
  --surface-2: rgba(12, 32, 48, .72);
  --border: rgba(34, 211, 238, .22);
  --text: #f5f5f7;
  --text-2: #a8c5d4;
  --text-3: #7a9aab;
  --brand: #22d3ee;
  --brand-soft: rgba(34, 211, 238, .14);
  --cta: #fff;
  --cta-fg: #0a0a0b;
  --danger: #e06b63;
  --success: #3dbe8c;
  --dot: #22d3ee;
  --radius: 16px;
}
html:not([data-theme="purple-dark"]),
html:not([data-theme="purple-dark"]) body {
  background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0d1232 100%);
  color: var(--text);
}
body { position: relative; min-height: 100vh; overflow-x: hidden; }

.fx { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.fx-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .34;
}
.fx-glow.a {
  top: -120px;
  right: -80px;
  background: radial-gradient(circle, rgba(34, 211, 238, .55), transparent 70%);
}
.fx-glow.b {
  bottom: 40px;
  left: -120px;
  background: radial-gradient(circle, rgba(14, 165, 233, .4), transparent 70%);
  opacity: .28;
}
.fx-grid {
  position: absolute;
  inset: -50px;
  background-image:
    linear-gradient(rgba(0, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, .05) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
  to { transform: translate(50px, 50px); }
}
.stars {
  position: absolute;
  inset: 0;
}
.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: starTwinkle var(--duration, 3s) ease-in-out infinite;
}
.star--glow {
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(0, 255, 255, .45);
}
@keyframes starTwinkle {
  0%, 100% { opacity: .3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

.app-layer { position: relative; z-index: 1; }

.btn-primary, .btn.primary { transition: transform .15s ease, box-shadow .2s ease; }
.btn-primary:active, .btn.primary:active { transform: scale(.97); }
.btn-primary:hover, .btn.primary:hover { box-shadow: 0 0 22px rgba(34, 211, 238, .35); }
.card-enter { animation: riseIn .35s ease both; }
@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tile, .card { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.tile:active { transform: scale(.985); }
.dot-live { box-shadow: 0 0 8px rgba(34, 211, 238, .85); animation: dotPulse 2.2s ease-in-out infinite; }
@keyframes dotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .7; } }
.step-on { animation: stepGlow 2.8s ease-in-out infinite; }
@keyframes stepGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
  50% { box-shadow: 0 0 14px rgba(34, 211, 238, .4); }
}
.skeleton-shimmer {
  background: linear-gradient(90deg, rgba(12,32,48,.7) 25%, rgba(34,211,238,.12) 50%, rgba(12,32,48,.7) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .star, .fx-grid, .dot-live, .step-on, .skeleton-shimmer, .card-enter { animation: none !important; }
  .btn-primary, .btn.primary, .tile, .card { transition: none !important; }
}