/* ============================================================
   XZDW-XY — 基础层
   风格：明亮 / 简约 / 圆润可爱
   ============================================================ */
:root{
  /* ---------- 背景 ---------- */
  --bg:#fbf9f6;              /* 暖白纸感 */
  --bg-2:#f4f1ec;
  --bg-tint-1:#e8f4ff;       /* 淡蓝 */
  --bg-tint-2:#fff0e2;       /* 淡橙 */
  --bg-tint-3:#f0ecff;       /* 淡紫 */
  --bg-tint-4:#e6f8f0;       /* 淡绿 */

  --surface:#ffffff;
  --surface-2:#faf8f5;
  --surface-3:#f2efe9;

  /* ---------- 线 ---------- */
  --line:#e8e2d9;
  --line-2:#d9d2c6;
  --line-strong:#c7bfb0;

  /* ---------- 文字 ---------- */
  --ink:#2b2a33;
  --ink-2:#565463;
  --ink-3:#8a8797;
  --ink-4:#b0acb8;

  /* ---------- 主色（糖果系） ---------- */
  --primary:#ff8a5b;         /* 珊瑚橙 */
  --primary-d:#f2703c;
  --primary-soft:#fff0e8;

  --mint:#4ecdc4;            /* 薄荷 */
  --mint-soft:#e4f8f5;
  --blue:#5b9cf5;
  --blue-soft:#e8f1ff;
  --violet:#9d8cf5;
  --violet-soft:#f0edff;
  --pink:#ff8fb1;
  --pink-soft:#ffe9f0;
  --yellow:#ffc94d;
  --yellow-soft:#fff6db;
  --green:#5ec98b;
  --green-soft:#e6f8ee;
  --red:#f2705f;
  --red-soft:#ffebe8;

  /* 兼容旧变量名 */
  --gold:var(--primary);
  --gold-2:var(--primary-d);
  --gold-soft:var(--primary-soft);
  --jade:var(--mint);
  --jade-soft:var(--mint-soft);
  --rose:var(--pink);
  --rose-soft:var(--pink-soft);
  --azure:var(--blue);
  --panel:var(--surface);
  --panel-solid:var(--surface);
  --panel-hi:var(--surface-2);

  /* ---------- 圆角 ---------- */
  --r-s:10px;
  --r-m:16px;
  --r-l:22px;
  --r-xl:30px;
  --radius-s:var(--r-s);
  --radius-m:var(--r-m);
  --radius-l:var(--r-l);
  --radius-xl:var(--r-xl);

  /* ---------- 阴影（柔和，不用黑色） ---------- */
  --sh-1:0 1px 2px rgba(94,82,72,.06), 0 2px 6px rgba(94,82,72,.04);
  --sh-2:0 2px 4px rgba(94,82,72,.06), 0 8px 20px -6px rgba(94,82,72,.12);
  --sh-3:0 4px 8px rgba(94,82,72,.07), 0 18px 40px -14px rgba(94,82,72,.18);
  --shadow-s:var(--sh-1);
  --shadow-m:var(--sh-2);
  --shadow-l:var(--sh-3);

  /* ---------- 字体 ---------- */
  --font-sans:"Nunito","PingFang SC","HarmonyOS Sans SC","Microsoft Yahei",system-ui,sans-serif;
  --font-display:"Nunito","PingFang SC","HarmonyOS Sans SC",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --font-serif:var(--font-sans);

  --ease:cubic-bezier(.34,1.4,.64,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --header-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.65;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,canvas,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--yellow);color:var(--ink)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#ddd6ca;border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#c9c0b2}

/* ---------- 布局 ---------- */
.app-shell{position:relative;min-height:100dvh}
.view-root{position:relative;min-height:100dvh;display:flex;flex-direction:column}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}
@media(max-width:700px){.wrap{width:calc(100% - 28px)}}

/* ---------- 背景：柔和彩色光斑 ---------- */
.bg-layer{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(46% 38% at 12% 4%, var(--bg-tint-1), transparent 70%),
    radial-gradient(40% 34% at 92% 12%, var(--bg-tint-2), transparent 70%),
    radial-gradient(38% 34% at 8% 88%, var(--bg-tint-4), transparent 70%),
    radial-gradient(44% 36% at 88% 92%, var(--bg-tint-3), transparent 70%);
}
.bg-layer::after{display:none}
.bg-grid,.bg-orbit{display:none}

/* ---------- 文字工具 ---------- */
.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);
}
.display,.serif{font-family:var(--font-display)}
.muted{color:var(--ink-3)}
.tiny{font-size:12px}
.sm{font-size:13px}
.ink-2{color:var(--ink-2)}

/* ---------- 动画 ---------- */
@keyframes fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes pop-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes bounce-in{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}

.anim-up{animation:fade-up .45s var(--ease-out) both}
.anim-in{animation:fade-in .3s ease both}
.d1{animation-delay:.05s}.d2{animation-delay:.1s}.d3{animation-delay:.15s}.d4{animation-delay:.2s}.d5{animation-delay:.25s}.d6{animation-delay:.3s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}