/* 有朋 Youpeng 设计变量
   品牌来自团队 logo：薄荷绿＝有朋青年（“青年”的青，这里的人），紫色＝远方的朋友。
   版式参照 Apple：白与浅灰的底、近黑的字、大字号标题、柔和阴影；彩色只给两位主角和关键状态。 */
:root {
  --mint: #62E8C4;
  --mint-deep: #12B48F;
  --mint-ink: #0A7A60;
  --mint-tint: #C8F5E8;
  --mint-soft: #ECFBF6;
  --purple: #B881FC;
  --purple-deep: #8A4DF0;
  --purple-ink: #5B28B5;
  --purple-tint: #E5D4FE;
  --purple-soft: #F5EEFF;
  --grad: linear-gradient(115deg, #62E8C4 0%, #8FB4F7 52%, #B881FC 100%);

  --ink: #1D1D1F;
  --ink-2: #424245;
  --ink-3: #6E6E73;
  --ink-4: #A1A1A6;
  --bg: #F5F5F7;
  --bg-2: #EBEBF0;
  --card: #FFFFFF;
  --line: #E5E5EA;
  --line-2: #D2D2D7;

  /* 风险四色（系统色） */
  --r-red: #FF3B30;
  --r-orange: #FF9500;
  --r-green: #34C759;
  --r-gray: #8E8E93;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  --radius: 20px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, .08), 0 24px 60px rgba(0, 0, 0, .14);

  /* 兼容旧变量名：青＝来华人员（紫），丹＝有朋青年（薄荷），墨＝字，宣纸＝底 */
  --qing: var(--purple-deep);
  --qing-ink: var(--purple-ink);
  --qing-tint: var(--purple-tint);
  --qing-soft: var(--purple-soft);
  --dan: var(--mint-deep);
  --dan-ink: var(--mint-ink);
  --dan-tint: var(--mint-tint);
  --dan-soft: var(--mint-soft);
  --mo: var(--ink);
  --mo-2: var(--ink-2);
  --mo-3: var(--ink-3);
  --mo-4: var(--ink-4);
  --xuan: var(--bg);
  --xuan-2: var(--bg-2);
  --paper: var(--card);
  --serif: var(--display);
  --serif-en: var(--display);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }

/* 吉祥物动画：眨眼、轻轻浮动、东张西望 */
.ym { overflow: visible; }
.ym .eye { transform-box: fill-box; transform-origin: center; }
.ym.blink .eye { animation: ym-blink 5.2s infinite; }
.ym.blink .eye.d2 { animation-delay: 1.7s; }
@keyframes ym-blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
.ym .b1, .ym .b2 { transform-box: fill-box; transform-origin: 50% 100%; }
.ym.bob .b1 { animation: ym-bob 3.2s ease-in-out infinite; }
.ym.bob .b2 { animation: ym-bob 3.2s ease-in-out infinite; animation-delay: .5s; }
@keyframes ym-bob { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-3%) scaleY(1.015); } }
.ym.look .pupil { animation: ym-look 6s ease-in-out infinite; }
@keyframes ym-look { 0%, 20%, 100% { transform: translate(0, 0); } 30%, 45% { transform: translate(-3px, 1px); } 60%, 75% { transform: translate(3px, -1px); } }
.ym.pop { animation: ym-pop .55s cubic-bezier(.2, 1.4, .4, 1) both; transform-origin: 50% 100%; }
@keyframes ym-pop { from { transform: scale(.4) translateY(20%); opacity: 0; } to { transform: none; opacity: 1; } }
.ym.ghost { color: var(--ink-4); opacity: .7; animation: ym-ghost 1.6s ease-in-out infinite; }
@keyframes ym-ghost { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .ym .eye, .ym .b1, .ym .b2, .ym .pupil, .ym.pop, .ym.ghost { animation: none !important; } }