/* =========================================================
   404.html 提示页独有样式
   ========================================================= */

.nf-page {
  position: relative;
  min-height: calc(100vh - 200px);
  padding: calc(var(--header-h) + var(--topbar-h) + 70px) 0 80px;
  background:
    radial-gradient(circle at 85% 15%, rgba(238,209,145,.5) 0 20%, transparent 45%),
    linear-gradient(160deg, var(--cream) 0%, var(--green) 140%);
  display: flex; align-items: center;
  overflow: hidden;
}
.nf-dot { position: absolute; border-radius: 50%; pointer-events: none; }
.nf-dot-a { width: 110px; height: 110px; left: 10%; bottom: 12%; background: rgba(238,209,145,.55); }
.nf-dot-b { width: 70px; height: 70px; right: 12%; top: 22%; background: rgba(255,255,255,.55); }

.nf-inner { text-align: center; position: relative; z-index: 2; }
.nf-circle {
  width: clamp(200px, 26vw, 280px); aspect-ratio: 1 / 1;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #FDF6E4 0%, var(--yellow) 70%);
  box-shadow: var(--clay-shadow-lg);
  display: flex; align-items: center; justify-content: center;
  border: 10px solid #FFFDF6;
}
.nf-num {
  font-size: clamp(3rem, 8vw, 5rem); font-weight: 800; color: var(--ink);
}
.nf-inner h1 { margin-bottom: 14px; }
.nf-sub { max-width: 520px; margin: 0 auto 28px; }
.nf-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 46px; }
.nf-hot h2 { font-size: 1.1rem; margin-bottom: 14px; }
.nf-hot ul { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.nf-hot a {
  display: inline-block; padding: 8px 20px; border-radius: 999px;
  background: #FFFDF6; border: 2px solid var(--line);
  font-weight: 600; font-size: .9rem; color: var(--ink-2);
  box-shadow: var(--clay-shadow-sm);
  transition: transform .3s var(--ease), background .3s;
}
.nf-hot a:hover { transform: translateY(-3px) rotate(-1deg); background: var(--green); border-color: var(--green-2); color: #3F5238; }

/* ---------- 你可能想问 ---------- */
.nf-faq { margin-top: 44px; }
.nf-faq h2 { font-size: 1.15rem; margin-bottom: 18px; }
.nf-faq-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  max-width: 880px; margin: 0 auto; text-align: left;
}
.nf-faq-card {
  background: #FFFDF6; border-radius: 20px;
  box-shadow: var(--clay-shadow-sm);
  padding: 20px 22px;
}
.nf-faq-card h3 { font-size: .98rem; margin-bottom: 8px; color: var(--green-3); }
.nf-faq-card p { font-size: .9rem; }
.nf-faq-card a { font-weight: 700; color: var(--green-3); }
@media (max-width: 768px) { .nf-faq-grid { grid-template-columns: 1fr; } }