:root {
  color-scheme: light;
  --rose-950: #452535;
  --rose-800: #713d57;
  --rose-650: #a45478;
  --rose-500: #cf709b;
  --rose-300: #efafca;
  --rose-150: #f9dbe7;
  --rose-75: #fff0f5;
  --cream: #fffaf7;
  --lavender: #e6ddff;
  --sage: #cfe7d7;
  --gold: #e7b75f;
  --ink: #342a32;
  --muted: #756873;
  --line: rgba(113, 61, 87, 0.13);
  --shadow-1: 0 8px 24px rgba(107, 62, 83, 0.08);
  --shadow-2: 0 18px 45px rgba(107, 62, 83, 0.13);
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--cream); }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 5%, rgba(239, 175, 202, 0.34), transparent 28rem),
    radial-gradient(circle at 96% 20%, rgba(230, 221, 255, 0.45), transparent 24rem),
    var(--cream);
  font-family: var(--font);
  line-height: 1.5;
  min-height: 100vh;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.eyebrow { color: var(--rose-650); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.muted { color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: var(--rose-75); color: var(--rose-800); font-size: 0.78rem; font-weight: 750; }
.button { border: 0; border-radius: 999px; min-height: 48px; padding: 0 20px; font-weight: 800; transition: transform 180ms ease, box-shadow 180ms ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { color: white; background: linear-gradient(135deg, var(--rose-650), var(--rose-500)); box-shadow: 0 9px 22px rgba(164, 84, 120, 0.24); }
.button.secondary { color: var(--rose-800); background: var(--rose-75); border: 1px solid var(--line); }
.icon-box { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; background: var(--rose-75); color: var(--rose-800); font-weight: 900; }
.avatar { display: grid; place-items: center; border-radius: 50%; color: white; background: linear-gradient(145deg, var(--rose-300), var(--rose-650)); font-weight: 900; box-shadow: inset 0 0 0 4px rgba(255,255,255,.72); }
.progress { height: 10px; overflow: hidden; border-radius: 99px; background: var(--rose-150); }
.progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--rose-500), var(--gold)); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }