/* 人生规划器 · 设计令牌
   视觉方向：一张温暖的账簿纸，墨色正文，松绿与金色做强调。 */

:root {
  --paper: #F5F0E6;
  --paper-2: #FFFDF7;
  --paper-3: #EDE6D8;
  --ink: #1E2A32;
  --ink-2: #4E5D66;
  --ink-3: #5F6B73;
  --line: #DCD3C2;
  --line-soft: #EAE3D6;

  --accent: #1F6F5C;
  --accent-soft: rgba(31, 111, 92, .10);
  --accent-2: #C89B3C;

  --good: #2F7D5F;
  --fair: #B07D24;
  --warn: #B4472E;
  --warn-soft: rgba(180, 71, 46, .08);

  --radius: 20px;
  --shadow: 0 14px 40px rgba(30, 42, 50, .10);
  --maxw: 860px;

  --font-ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Segoe UI", "Noto Sans SC", sans-serif;
  --font-display: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC",
    "SimSun", serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* 细网格：账簿纸的秩序感 */
body::before {
  background-image:
    linear-gradient(rgba(30, 42, 50, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 42, 50, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(110% 85% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(110% 85% at 50% 0%, #000 0%, transparent 78%);
  opacity: .6;
}

/* 顶部金、左下绿的柔光 */
body::after {
  background:
    radial-gradient(620px 420px at 94% -10%, rgba(200, 155, 60, .18), transparent 70%),
    radial-gradient(760px 520px at -12% 32%, rgba(31, 111, 92, .09), transparent 72%);
}

#app {
  position: relative;
  z-index: 1;
}

h1, h2, h3, h4, p {
  margin: 0;
}

button {
  font-family: inherit;
}

input, select {
  font-family: inherit;
}

::selection {
  background: rgba(200, 155, 60, .30);
}

.stage {
  min-height: 100svh;
}

.hidden {
  display: none !important;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}