:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
    background:
        radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.2), transparent 34rem),
        #07101f;
    color: #f8fafc;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

.not-found-main {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
        max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.not-found-card {
    background: rgba(15, 23, 42, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    max-width: 560px;
    padding: clamp(28px, 7vw, 54px);
    width: 100%;
}

.not-found-brand {
    align-items: center;
    color: #f8fafc;
    display: inline-flex;
    font-weight: 750;
    gap: 10px;
    text-decoration: none;
}

.not-found-brand img { border-radius: 10px; }
.not-found-code { color: #60a5fa; font-size: 14px; font-weight: 800; letter-spacing: 0.14em; margin: 42px 0 10px; }
.not-found-card h1 { font-size: clamp(30px, 8vw, 48px); line-height: 1.08; margin: 0; }
.not-found-copy { color: #cbd5e1; font-size: 17px; line-height: 1.6; margin: 18px 0 26px; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.not-found-actions a,
.not-found-actions button {
    align-items: center;
    border: 1px solid #475569;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    justify-content: center;
    min-height: 44px;
    padding: 10px 17px;
    text-decoration: none;
}
.not-found-actions .not-found-primary { background: #2563eb; border-color: #2563eb; color: white; }
.not-found-actions button { background: transparent; color: #e2e8f0; }
.not-found-actions a:focus-visible,
.not-found-actions button:focus-visible,
.not-found-brand:focus-visible,
.not-found-help a:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
.not-found-help { color: #94a3b8; font-size: 14px; line-height: 1.55; margin: 28px 0 0; }
.not-found-help a { color: #93c5fd; }

@media (max-width: 420px) {
    .not-found-actions > * { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
}