/* =========================================================
   ERROR / 404
   ========================================================= */

.error-page {
    position: relative;

    min-height: calc(100vh - 64px);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 4rem 1.5rem;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(98, 85, 217, 0.10),
            transparent 34%
        ),
        var(--bg);

    color: var(--text);
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.error-background {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.error-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(136, 124, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(136, 124, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 56px 56px;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 25%,
        black 70%,
        transparent
    );

    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent,
        black 25%,
        black 70%,
        transparent
    );
}

.error-glow {
    position: absolute;

    width: 360px;
    height: 360px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(124, 108, 255, 0.07);

    filter: blur(100px);
}


/* =========================================================
   CONTENT
   ========================================================= */

.error-content {
    position: relative;
    z-index: 2;

    width: min(100%, 760px);

    text-align: center;

    animation: errorReveal .6s ease-out both;
}


/* =========================================================
   STATUS
   ========================================================= */

.error-status {
    display: inline-flex;
    align-items: center;
    gap: .55rem;

    margin-bottom: 1rem;

    color: var(--purple-light);

    font-family: var(--font-mono);

    font-size: .62rem;
    font-weight: 500;

    letter-spacing: .14em;
}

.error-status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--purple-light);

    box-shadow:
        0 0 0 4px rgba(136, 124, 255, .08),
        0 0 12px rgba(136, 124, 255, .55);
}


/* =========================================================
   ERROR CODE
   ========================================================= */

.error-code {
    margin: 0;

    color: rgba(155, 143, 255, 0.10);

    font-family: var(--font-body);

    font-size: clamp(8rem, 25vw, 15rem);

    font-weight: 800;

    line-height: .72;

    letter-spacing: -.09em;

    user-select: none;

    transform: translateX(-.025em);
}


/* =========================================================
   HEADER
   ========================================================= */

.error-header {
    position: relative;

    margin-top: 2.5rem;
}

.error-label {
    display: block;

    margin-bottom: .75rem;

    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: .58rem;
    font-weight: 500;

    letter-spacing: .14em;
}

.error-header h1 {
    margin: 0;

    font-size: clamp(2rem, 5vw, 3.3rem);

    line-height: 1.05;

    letter-spacing: -.045em;
}

.error-header p {
    max-width: 540px;

    margin: 1rem auto 0;

    color: var(--text-soft);

    font-size: .86rem;

    line-height: 1.7;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.error-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: .75rem;

    margin-top: 2rem;
}

.error-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: .75rem;

    min-height: 43px;

    padding: .7rem 1rem;

    border-radius: 8px;

    font-size: .7rem;
    font-weight: 700;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.error-button-primary {
    border: 1px solid rgba(255,255,255,.08);

    background: var(--purple);

    color: #fff;

    box-shadow:
        0 8px 25px rgba(98,85,217,.18);
}

.error-button-primary:hover {
    background: var(--purple-light);

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(98,85,217,.28);
}

.error-button-secondary {
    border: 1px solid var(--border);

    background: rgba(255,255,255,.025);

    color: var(--text-soft);
}

.error-button-secondary:hover {
    border-color: var(--border-purple);

    background: rgba(124,108,255,.06);

    color: var(--text);

    transform: translateY(-2px);
}

.error-terminal-symbol {
    color: var(--purple-light);

    font-family: var(--font-mono);
}


/* =========================================================
   TERMINAL
   ========================================================= */

.error-terminal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: min(100%, 540px);

    margin: 3rem auto 0;

    padding: 1rem 1.1rem;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;

    background: rgba(8,7,14,.45);

    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: .62rem;

    line-height: 1.7;

    text-align: left;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}

.error-terminal > div {
    display: flex;

    flex-wrap: wrap;

    gap: .6rem;
}

.terminal-prompt {
    color: var(--purple-light);
}

.terminal-command {
    color: var(--text-soft);
}

.terminal-result {
    color: var(--text-muted);
}


/* =========================================================
   FOOTER
   ========================================================= */

.error-footer {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: .7rem;

    margin-top: 2rem;

    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: .52rem;

    letter-spacing: .12em;
}

.error-footer-line {
    width: 32px;
    height: 1px;

    background: rgba(255,255,255,.12);
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes errorReveal {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {

    .error-page {
        min-height: calc(100vh - 60px);

        padding: 2.5rem 1rem;
    }

    .error-code {
        font-size: clamp(7rem, 34vw, 11rem);
    }

    .error-header {
        margin-top: 2rem;
    }

    .error-header h1 {
        font-size: clamp(1.8rem, 9vw, 2.7rem);
    }

    .error-header p {
        font-size: .8rem;
    }

    .error-actions {
        flex-direction: column;

        width: 100%;
    }

    .error-button {
        width: 100%;
    }

    .error-terminal {
        margin-top: 2.5rem;

        font-size: .57rem;
    }
}

@media (max-width: 400px) {

    .error-page {
        padding-inline: .8rem;
    }

    .error-code {
        font-size: 7rem;
    }

    .error-footer {
        flex-wrap: wrap;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .error-content {
        animation: none;
    }

    .error-button {
        transition: none;
    }
}
/* =========================================================
   ACCESS / REVOKED
   ========================================================= */

.access-revoked-page .error-glow {
    background: rgba(98, 85, 217, 0.06);
}

.access-revoked-page .error-code {
    color: rgba(155, 143, 255, 0.085);
}


/* =========================================================
   ACCESS CARD
   ========================================================= */

.access-revoked-card {
    width: min(100%, 560px);

    margin: 2.5rem auto 0;

    padding: 1.15rem;

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    background: rgba(24, 21, 42, .68);

    text-align: left;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .16),
        inset 0 1px 0 rgba(255,255,255,.025);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.access-revoked-card-header {
    display: flex;
    align-items: flex-start;

    gap: .8rem;
}

.access-revoked-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 30px;
    height: 30px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;

    background: rgba(255,255,255,.025);

    color: var(--text-soft);

    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 600;
}

.access-revoked-label {
    display: block;

    color: var(--text);

    font-family: var(--font-mono);

    font-size: .58rem;

    letter-spacing: .1em;
}

.access-revoked-card-header p {
    margin: .35rem 0 0;

    color: var(--text-muted);

    font-size: .68rem;

    line-height: 1.55;
}


/* =========================================================
   ACCESS META
   ========================================================= */

.access-revoked-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 1rem;

    margin-top: 1rem;
    padding-top: 1rem;

    border-top: 1px solid rgba(255,255,255,.07);
}

.access-revoked-meta div {
    display: flex;
    flex-direction: column;

    gap: .3rem;
}

.access-revoked-meta span {
    color: var(--text-muted);

    font-family: var(--font-mono);

    font-size: .48rem;

    letter-spacing: .1em;
}

.access-revoked-meta strong {
    color: var(--text-soft);

    font-family: var(--font-mono);

    font-size: .58rem;
    font-weight: 500;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 600px) {

    .access-revoked-card {
        padding: 1rem;
    }

    .access-revoked-meta {
        grid-template-columns: 1fr;
    }
}