/* css/base.css */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-3) 100%);
  min-height: 100vh;
  color: var(--text-primary);
  overflow-x: hidden;
  position: relative;
  transition: background 0.4s ease, color 0.3s ease;
}

body::before, body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
  animation: float 18s ease-in-out infinite;
  transition: background 0.4s ease;
}
body::before {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #6366f1, transparent 70%);
  top: -150px; left: -100px;
}
body::after {
  width: 450px; height: 450px;
  background: radial-gradient(circle, #a855f7, transparent 70%);
  bottom: -120px; right: -80px;
  animation-delay: -9s;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.08); }
  66% { transform: translate(-30px, 20px) scale(0.95); }
}

body.wallpaper-on::before { display: none; }
body.wallpaper-on::after {
  content: "";
  position: fixed;
  inset: 0;
  border-radius: 0;
  width: 100%; height: 100%;
  top: 0; left: 0; bottom: 0; right: 0;
  filter: none;
  opacity: 1;
  animation: none;
  z-index: 0;
  pointer-events: none;
  background-image: var(--wallpaper-url, none);
  background-size: cover;
  background-position: center;
  filter: blur(var(--wallpaper-blur, 0px));
  opacity: var(--wallpaper-opacity, 0.35);
  transition: opacity .4s ease, filter .4s ease;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }