/* ===== base.css · reset + 容器 + 移动优先 ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans, system-ui, sans-serif);
  background: radial-gradient(ellipse at 50% -10%, #2A0B36 0%, #160620 55%, #0B0307 100%);
  color: var(--text-primary, #E8E2D6);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }
img { max-width: 100%; display: block; }
a { color: inherit; }

#app {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 8px) 22px calc(env(safe-area-inset-bottom) + 8px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
}

/* 银色星光层：低密度星点 + 缓慢流动 + 微闪（置于内容之下、暗角之上） */
#app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.3px 1.3px at 25px 35px, rgba(236,236,250,0.90), transparent),
    radial-gradient(1px 1px at 180px 120px, rgba(220,226,255,0.70), transparent),
    radial-gradient(1.5px 1.5px at 320px 260px, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 430px 80px, rgba(236,236,250,0.60), transparent),
    radial-gradient(1.2px 1.2px at 95px 380px, rgba(220,226,255,0.70), transparent),
    radial-gradient(1px 1px at 380px 470px, rgba(255,255,255,0.55), transparent);
  background-size: 500px 500px;
  background-repeat: repeat;
  opacity: 0.55;
  animation: star-drift 70s linear infinite, star-twinkle 7s ease-in-out infinite;
}
@keyframes star-drift {
  from { background-position: 0 0; }
  to { background-position: 120px 360px; }
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

/* 质感层：暗角 + 颗粒噪点（SVG 噪点，无需图片资源） */
#app::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background-image:
    radial-gradient(ellipse at center, transparent 0%, rgba(11, 3, 9, 0.65) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-blend-mode: multiply;
  opacity: 1;
}
#app::after { opacity: 0.5; }
#app > * { position: relative; z-index: 1; }

/* 让 result 等可滚动屏内部滚动，不被 #app 裁掉 */
.screen { width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; }