/* ============================================================
   异常页 403 / 404 / 500
   ============================================================ */
.err-page {
  min-height: calc(100dvh - 160px);
  padding: 8px 26px 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.err-art {
  position: relative;
  width: 132px; height: 132px;
  display: grid; place-items: center;
  margin-bottom: 22px;
}
.err-halo {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--brand-100), transparent 68%);
  animation: errFloat 5s var(--ease-in-out) infinite;
}
.err-art::before,
.err-art::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1px solid var(--brand-100);
}
.err-art::before { inset: 10px; }
.err-art::after { inset: -8px; border-style: dashed; opacity: .55; }
.err-ico {
  position: relative; z-index: 1;
  width: 64px; height: 64px; border-radius: 20px;
  display: grid; place-items: center;
  color: var(--brand);
  background: var(--card);
  border: 1px solid var(--brand-100);
  box-shadow: 0 12px 26px -14px rgba(22, 119, 255, .5);
}
.err-ico .icon { width: 30px; height: 30px; }
.err-code {
  position: absolute; z-index: 2; right: -2px; bottom: 4px;
  min-width: 44px; height: 26px; padding: 0 8px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--font-num); font-size: 13px; font-weight: 750;
  color: #fff; background: linear-gradient(135deg, var(--brand), #4a9bff);
  box-shadow: 0 6px 14px -6px rgba(22, 119, 255, .6);
}
.err-art.is-500 .err-ico { color: var(--warning); border-color: var(--warning-soft); box-shadow: 0 12px 26px -14px rgba(255, 125, 0, .5); }
.err-art.is-500 .err-code { background: linear-gradient(135deg, var(--warning), #ffb45c); box-shadow: 0 6px 14px -6px rgba(255, 125, 0, .55); }
.err-art.is-403 .err-ico { color: var(--danger); border-color: var(--danger-soft); box-shadow: 0 12px 26px -14px rgba(245, 63, 63, .45); }
.err-art.is-403 .err-code { background: linear-gradient(135deg, var(--danger), #ff7a7a); box-shadow: 0 6px 14px -6px rgba(245, 63, 63, .5); }

.err-title { font-size: 22px; font-weight: 750; letter-spacing: -.02em; color: var(--text-1); }
.err-desc {
  margin-top: 8px; max-width: 290px;
  font-size: 12.5px; line-height: 1.75; color: var(--text-3);
}
.err-meta {
  margin-top: 10px; font-family: var(--font-num); font-size: 9.5px;
  color: var(--text-4); letter-spacing: .04em;
  padding: 3px 8px; border-radius: 5px; background: var(--bg-2);
}
.err-actions { width: 100%; max-width: 300px; margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.err-actions .btn { height: 46px; }
.err-contact {
  margin-top: 18px; font-size: 11px; color: var(--text-4);
  padding: 8px 12px; border-radius: 8px;
}
.err-contact:active { background: var(--card-2); }
.err-contact-sheet { display: flex; flex-direction: column; gap: 12px; }
.err-contact-sheet div { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.err-contact-sheet span { color: var(--text-3); }
.err-contact-sheet b { font-size: 12px; color: var(--text-1); font-weight: 600; }

@keyframes errFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.03); }
}