/* ============================================================
   404.css —— 页面未找到
   全屏折线 404 图形 + 三个入口
   ============================================================ */

.nf {
  min-height: 100vh;
  padding: calc(var(--nav-h) + 40px) 0 60px;
  background:
    radial-gradient(circle at 20% 20%, var(--green-50) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, var(--blue-50) 0%, transparent 45%),
    var(--paper);
}
.nf-art {
  max-width: 460px;
  margin: 0 auto 10px;
}
.nf-art svg { width: 100%; height: auto; }

.nf h1 {
  font-size: 34px;
  color: var(--ink-900);
  margin: 0 0 12px;
}
.nf-sub {
  color: var(--ink-500);
  font-size: 16px;
  max-width: 480px;
  margin: 0 auto 28px;
  line-height: 1.8;
}
.nf-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.nf-tips {
  max-width: 460px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--green-100);
  border-radius: 16px;
  padding: 24px 28px;
  text-align: left;
}
.nf-tips h2 { font-size: 17px; margin: 0 0 12px; }
.nf-tips ul { list-style: none; padding: 0; margin: 0; }
.nf-tips li {
  padding: 7px 0;
  font-size: 14.5px;
  color: var(--ink-700);
  border-bottom: 1px dashed var(--paper-2);
}
.nf-tips li:last-child { border-bottom: 0; }
.nf-tips a { color: var(--green-500); }

.center { text-align: center; }

@media (max-width: 640px) {
  .nf h1 { font-size: 26px; }
  .nf-actions { flex-direction: column; align-items: stretch; }
  .nf-actions .btn { width: 100%; }
}