/* ══ 404 页面专用样式 ══ */
.e404-wrap {
    position: relative;
    min-height: calc(100vh - 70px);
    overflow: hidden;
    background: #0a0c1a;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
}

/* ── 雷达 canvas 全屏背景 ── */
#e404-radar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .75;
    z-index: 0;
}

/* ── 径向渐变遮罩，让中间内容更清晰 ── */
.e404-mask {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 50%,
        rgba(10,12,26,.7) 0%,
        rgba(10,12,26,.2) 60%,
        transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* ── 内容层 ── */
.e404-content {
    position: relative;
    z-index: 2;
    padding: 40px 24px;
    max-width: 560px;
}

/* 404 大字 */
.e404-code {
    font-size: clamp(96px, 20vw, 160px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, #3b7ef6 0%, #7c3aed 60%, #3b7ef6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    /* 扫光动画 */
    background-size: 200% 200%;
    animation: e404Shine 3s linear infinite;
}
@keyframes e404Shine {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 徽章 */
.e404-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    background: rgba(59,126,246,.12);
    border: 1px solid rgba(59,126,246,.25);
    border-radius: 20px;
    font-size: 12px;
    color: #93b4fb;
    margin-bottom: 20px;
}
.e404-badge-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #3b7ef6;
    animation: e404Pulse 1.8s ease-in-out infinite;
}
@keyframes e404Pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.4; transform:scale(1.3); }
}

/* 标题 & 描述 */
.e404-title {
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: -.3px;
}
.e404-desc {
    font-size: 14px;
    color: rgba(255,255,255,.45);
    line-height: 1.7;
    margin: 0 0 32px;
}

/* 按钮组 */
.e404-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.e404-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: #3b7ef6;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, transform .15s;
}
.e404-btn-primary:hover {
    background: #2563d4;
    color: #fff;
    transform: translateY(-1px);
}
.e404-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 13px 22px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    color: rgba(255,255,255,.7);
    font-size: 14px;
    text-decoration: none;
    font-family: inherit;
    transition: all .15s;
}
.e404-btn-ghost:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}

/* ── 快捷导航 ── */
.e404-nav {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.e404-nav-link {
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    font-size: 12px;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    transition: all .15s;
}
.e404-nav-link:hover {
    border-color: rgba(59,126,246,.4);
    color: #93b4fb;
    background: rgba(59,126,246,.08);
}

/* ── 响应式 ── */
@media (max-width: 480px) {
    .e404-actions { flex-direction: column; align-items: center; }
    .e404-btn-primary, .e404-btn-ghost { width: 100%; justify-content: center; }
}