/* ============================================
   apple-cute.css v10 — 性能优化版
   · backdrop-filter 仅用于导航栏（其余用纯色替代）
   · 移动端完全关闭 backdrop-filter
   · 樱花/粒子数量减半
   · 统一强调色 #e8597a
============================================ */

:root {
  --ap: #e8597a;
  --ap2: #c084fc;
  --ap-light: rgba(232,89,122,0.10);
  --ap-glow: rgba(232,89,122,0.20);
  --r-card: 20px;
  --r-btn: 28px;
  /* 桌面用半透白，移动端直接纯白 */
  --card-bg: rgba(255,255,255,0.88);
  --card-border: rgba(0,0,0,0.05);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.05);
  --shadow-hover: 0 8px 28px rgba(0,0,0,0.09);
}

/* ── 1. 全局 ─────────────────────────────── */
body {
  background: #f7f7f8 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "PingFang SC", "Hiragino Sans GB", sans-serif !important;
  color: #1c1c1e !important;
  -webkit-font-smoothing: antialiased;
}
body::before {
  background: radial-gradient(ellipse 80% 45% at 50% -5%,
    rgba(232,89,122,0.07) 0%, transparent 65%) !important;
}

/* ── 2. 导航栏：唯一用 backdrop-filter 的地方 ── */
nav {
  background: rgba(247,247,248,0.90) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.06) !important;
}
.nav-title  { color: #1c1c1e !important; font-weight: 600 !important; }
.nav-logo   { color: var(--ap) !important; }
.nav-count  { background: var(--ap-light) !important; color: var(--ap) !important; }
.nav-back {
  background: rgba(0,0,0,0.04) !important;
  border: none !important;
  color: #6c6c70 !important;
  border-radius: var(--r-btn) !important;
}
.nav-back:hover { background: var(--ap-light) !important; color: var(--ap) !important; }

/* ── 3. 卡片：纯色背景（不用 blur，避免 GPU 合成）── */
.result-card, .start-card, .progress-box,
.kimi-section, .cta-section, .trust-section, .qcard {
  background: #ffffff !important;
  border: 0.5px solid var(--card-border) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow-card) !important;
  /* 不加 backdrop-filter */
}
.quiz-card {
  background: #ffffff !important;
  border: 0.5px solid var(--card-border) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform .22s cubic-bezier(.34,1.2,.64,1), box-shadow .22s !important;
}
.quiz-card:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* ── 4. 主按钮 ────────────────────────────── */
.btn-start, #analyze-btn, #start-quiz-btn {
  background: linear-gradient(135deg, #e8597a, #d44a6a) !important;
  border: none !important;
  border-radius: var(--r-btn) !important;
  box-shadow: 0 4px 16px var(--ap-glow) !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: .5px !important;
}
.btn-start:hover, #analyze-btn:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px var(--ap-glow) !important;
}
.btn-start:active { transform: scale(0.97) !important; }

/* 下一题/看结果 */
.btn-next {
  background: linear-gradient(135deg, #e8597a, #c084fc) !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(192,100,200,0.18) !important;
  color: #fff !important;
}
.btn-next:hover:not(:disabled) {
  filter: brightness(1.07) !important;
  transform: translateY(-1px) !important;
}
.btn-next:disabled { opacity: 0.35 !important; box-shadow: none !important; }

/* 次级按钮 */
.btn-prev, .btn-retry {
  background: #f2f2f4 !important;
  border: none !important;
  color: #6c6c70 !important;
  border-radius: var(--r-btn) !important;
  box-shadow: none !important;
}
.btn-prev:hover:not(:disabled), .btn-retry:hover {
  background: var(--ap-light) !important;
  color: var(--ap) !important;
}

/* 首页卡片按钮 */
.card-btn {
  background: linear-gradient(135deg, #e8597a, #c084fc) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(192,100,200,0.15) !important;
  color: #fff !important;
  border-radius: 20px !important;
}
.card-btn:hover { filter: brightness(1.07) !important; transform: scale(1.04) !important; }

/* ── 5. 选项按钮 ──────────────────────────── */
.qopt, .bq-opt {
  background: #fafafa !important;
  border: 0.5px solid rgba(0,0,0,0.06) !important;
  border-radius: 14px !important;
  transition: background .15s, border-color .15s, transform .15s !important;
}
.qopt:hover, .bq-opt:hover {
  background: rgba(232,89,122,0.06) !important;
  border-color: rgba(232,89,122,0.30) !important;
  transform: translateX(3px) !important;
}
.qopt.sel, .bq-opt.sel {
  background: var(--ap-light) !important;
  border-color: rgba(232,89,122,0.45) !important;
  box-shadow: 0 0 0 1px rgba(232,89,122,0.15) !important;
}
.qlabel, .bq-label {
  background: var(--ap-light) !important;
  color: var(--ap) !important;
}

/* ── 6. 进度条 ────────────────────────────── */
#progress-bar {
  background: linear-gradient(90deg, var(--ap), #c084fc) !important;
}
#progress-bar::after { display: none !important; } /* 去掉 shine 动效 */
.prog-track { background: rgba(0,0,0,0.05) !important; }
.prog-cnt   { color: var(--ap) !important; }

/* ── 7. 分数环 ────────────────────────────── */
#score-circle, #b-score-circle { stroke: var(--ap) !important; stroke-width: 8 !important; }
.score-bg, .bsr-bg { stroke: rgba(0,0,0,0.06) !important; stroke-width: 8 !important; }
#score-num, #b-score-num { color: var(--ap) !important; }

/* ── 8. 标签 & badge ─────────────────────── */
.card-tag   { background: var(--ap-light) !important; color: var(--ap) !important; }
.hot-badge {
  background: linear-gradient(135deg, #e8597a, #c084fc) !important;
  color: #fff !important; animation: none !important;
  box-shadow: 0 2px 8px rgba(192,100,200,0.18) !important;
}
.start-eyebrow {
  background: var(--ap-light) !important;
  color: var(--ap) !important;
  border-color: rgba(232,89,122,0.18) !important;
}
.stat-n  { color: var(--ap) !important; }
.kimi-dot { background: var(--ap) !important; }

/* ── 9. 其他测试按钮 ──────────────────────── */
.other-test-btn, .t-other-btn, .b-other-btn {
  background: #f2f2f4 !important;
  border: 0.5px solid rgba(0,0,0,0.06) !important;
  color: #3a3a3c !important;
}
.other-test-btn:hover, .t-other-btn:hover {
  background: var(--ap-light) !important;
  color: var(--ap) !important;
  border-color: rgba(232,89,122,0.22) !important;
}

/* ── 10. 文字 ─────────────────────────────── */
.start-title, .hero-title, #result-type, .b-title, .t-title {
  font-weight: 700 !important; letter-spacing: -.3px !important;
  color: #1c1c1e !important; text-shadow: none !important;
  -webkit-text-fill-color: #1c1c1e !important; background: none !important;
}
.hero-title span {
  background: linear-gradient(135deg, var(--ap), var(--ap2)) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
#result-tagline, .start-sub, .b-sub { color: #6c6c70 !important; line-height: 1.65 !important; }
#result-desc, #b-result-desc {
  background: #f7f7f8 !important;
  border-left-color: var(--ap) !important; color: #3a3a3c !important;
}
#kimi-analysis { color: #3a3a3c !important; line-height: 1.9 !important; }
.footer { color: #aeaeb2 !important; }
.disclaimer { text-align:center; font-size:.72rem; color:#aeaeb2; padding:10px 20px 4px; letter-spacing:.3px; line-height:1.6; }

/* ── 11. 樱花/粒子：保留，用 CSS 控制性能 ─── */
#particles-bg { display: block !important; }
.sakura-container { display: block !important; }
/* 用 will-change 提示浏览器提前合成，减少重排 */
.sakura, .particle { will-change: transform, opacity; }

@keyframes sakuraFall {
  0%   { transform: translateY(0) rotate(0deg) translateX(0); opacity: 0; }
  6%   { opacity: 0.55; }
  88%  { opacity: 0.40; }
  100% { transform: translateY(105vh) rotate(720deg) translateX(var(--drift,40px)); opacity: 0; }
}
@keyframes pdrift {
  0%   { transform: translateY(105vh) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.09; }
  92%  { opacity: 0.09; }
  100% { transform: translateY(-8vh) rotate(540deg); opacity: 0; }
}
@keyframes bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}

/* ── 12. 维度条 ───────────────────────────── */
.bar-fill { transition: width 1.2s cubic-bezier(0.2,0.9,0.4,1.1) !important; will-change: width; }
.bar-track { background: rgba(0,0,0,0.05) !important; }

/* ── 13. 塔罗页 ───────────────────────────── */
.tarot-page body, body.tarot-page { background: #f7f7f8 !important; color: #1c1c1e !important; }
.tarot-page nav { background: rgba(247,247,248,0.92) !important; backdrop-filter: blur(20px) !important; }
.tarot-page .t-card { background: #fff !important; border: 0.5px solid rgba(0,0,0,0.05) !important; box-shadow: var(--shadow-card) !important; }
.tarot-page .btn-t-primary { background: linear-gradient(135deg,#e8597a,#c084fc) !important; color:#fff !important; border:none !important; box-shadow:0 4px 14px var(--ap-glow) !important; }
.tarot-page .t-loading-orb { background: var(--ap) !important; box-shadow: 0 0 20px var(--ap-glow) !important; }
.tarot-page .tarot-main-name { -webkit-text-fill-color:#1c1c1e !important; background:none !important; }
.tarot-page .copy-btn { background: linear-gradient(135deg,#e8597a,#c084fc) !important; color:#fff !important; }
.tarot-page .stars-bg { display:none !important; }
.tarot-page .t-lifenum-big { color: var(--ap) !important; text-shadow:none !important; }
.tarot-page .t-other-btn { background:#f2f2f4 !important; color:#3a3a3c !important; }
.tarot-page .t-other-btn:hover { background:var(--ap-light) !important; color:var(--ap) !important; }
.tarot-page .t-kimi-card, .tarot-page .t-share-card { background:#fff !important; border:0.5px solid rgba(0,0,0,0.05) !important; }
.tarot-page .t-select, .tarot-page .t-input { background:#f2f2f4 !important; border-color:rgba(0,0,0,0.07) !important; color:#1c1c1e !important; }
.tarot-page .tarot-num-badge { background:var(--ap-light) !important; border-color:rgba(232,89,122,0.25) !important; color:var(--ap) !important; }
.tarot-page .t-dim-card { background:#f7f7f8 !important; }
.tarot-page .t-share-preview { background:#f2f2f4 !important; color:#3a3a3c !important; }

/* ── 14. 移动端性能优化 ───────────────────── */
@media (max-width: 680px) {
  /* 移动端完全关闭 backdrop-filter（包括导航栏），改用纯色 */
  nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(247,247,248,0.97) !important;
  }
  /* 减少阴影复杂度 */
  .result-card, .start-card, .qcard, .quiz-card {
    box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
  }
  /* 禁用卡片 hover 动画（触屏无意义且消耗性能） */
  .quiz-card:hover { transform: none !important; box-shadow: var(--shadow-card) !important; }
  /* 减少按钮过渡 */
  .btn-start, .btn-next, .card-btn { transition: filter .15s !important; }
}

/* ── 15. prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .bar-fill { transition: none !important; }
  .sakura, .particle { display: none !important; }
}

/* ── 16. 键盘焦点 ─────────────────────────── */
button:focus-visible, a:focus-visible, [tabindex="0"]:focus-visible {
  outline: 2px solid var(--ap) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(232,89,122,0.14) !important;
}

/* ── 17. 深色模式 ─────────────────────────── */
@media (prefers-color-scheme: dark) {
  body { background: #1c1c1e !important; }
  .result-card, .start-card, .progress-box, .kimi-section,
  .cta-section, .trust-section, .quiz-card, .qcard {
    background: #2c2c2e !important; border-color: rgba(255,255,255,0.07) !important;
  }
  .quiz-card:hover { background: #3a3a3c !important; }
  .qopt { background: #3a3a3c !important; border-color: rgba(255,255,255,0.07) !important; color: #f2f2f7 !important; }
  .qopt:hover { background: rgba(232,89,122,0.12) !important; }
  .qopt.sel   { background: rgba(232,89,122,0.18) !important; }
  nav { background: rgba(28,28,30,0.95) !important; }
  .btn-prev, .btn-retry { background: #3a3a3c !important; color: #aeaeb2 !important; }
  .other-test-btn { background: #3a3a3c !important; color: #ebebf0 !important; }
  #result-desc { background: #2c2c2e !important; color: #e5e5ea !important; }
  .start-title, .hero-title, #result-type { color: #f2f2f7 !important; -webkit-text-fill-color: #f2f2f7 !important; }
  #result-tagline, .start-sub { color: #98989e !important; }
}