HTML _error.css.html

<style nonce="{{ csp_nonce }}">

/* === error_403.html === */
.error-page main {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 24px;
    }
    .error-content { text-align: center; max-width: 480px; }
    .error-code {
        font-size: 96px;
        font-weight: 800;
        line-height: 1;
        color: var(--accent);
        margin-bottom: 16px;
        letter-spacing: -0.03em;
    }
    .error-title {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 8px;
        color: var(--text);
    }
    .error-desc {
        color: var(--text-muted);
        margin-bottom: 24px;
        line-height: 1.6;
    }
    @media (max-width: 480px) {
        .error-code { font-size: 64px; }
        .error-title { font-size: 20px; }
    }

/* === error_404.html === */
.error-page main {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 24px;
    }
    .error-content { text-align: center; max-width: 480px; }
    .error-code {
        font-size: 96px;
        font-weight: 800;
        line-height: 1;
        color: var(--accent);
        margin-bottom: 16px;
        letter-spacing: -0.03em;
    }
    .error-title {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 8px;
        color: var(--text);
    }
    .error-desc {
        color: var(--text-muted);
        margin-bottom: 24px;
        line-height: 1.6;
    }
    @media (max-width: 480px) {
        .error-code { font-size: 64px; }
        .error-title { font-size: 20px; }
    }

/* === error_500.html === */
.error-page main {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 24px;
    }
    .error-content { text-align: center; max-width: 480px; }
    .error-code {
        font-size: 96px;
        font-weight: 800;
        line-height: 1;
        color: var(--accent);
        margin-bottom: 16px;
        letter-spacing: -0.03em;
    }
    .error-title {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 8px;
        color: var(--text);
    }
    .error-desc {
        color: var(--text-muted);
        margin-bottom: 24px;
        line-height: 1.6;
    }
    @media (max-width: 480px) {
        .error-code { font-size: 64px; }
        .error-title { font-size: 20px; }
    }

/* === form_404.html === */
.error-page main {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 24px;
    }
    .error-container {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.03);
        width: 100%;
        max-width: 480px;
        padding: 48px 32px;
        text-align: center;
    }
    .error-icon {
        font-size: 48px;
        margin-bottom: 16px;
    }
    .error-container h1 {
        font-size: 24px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 8px;
    }
    .error-container p {
        font-size: 15px;
        color: var(--text-muted);
        margin-bottom: 24px;
    }
    @media (max-width: 480px) {
        .error-container { padding: 32px 24px; }
    }
</style>