.error {
    margin-top: 20px;
    display: grid;
    place-items: center;

    .report {
        max-width: 520px;
        text-align: center;

        .code {
            font-size: clamp(4rem, 18vw, 9rem);
            font-weight: 800;
            letter-spacing: -0.04em;
            line-height: 1;
            color: var(--primary-teal, #00aa87);
            opacity: 0.15;
            margin-bottom: -0.25em;
        }

        .title {
            font-size: clamp(1.5rem, 5vw, 2.25rem);
            font-weight: 700;
            margin: 0 0 0.5em;
        }

        .message {
            font-size: 1rem;
            line-height: 1.6;
            color: var(--text-muted, #666);
            margin-bottom: 1.75em;
        }

        .actions {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;

            a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 10px 16px;
                border-radius: 12px;
                text-decoration: none;
                font-weight: 600;
                font-size: 0.9rem;
                border: 1px solid rgba(0,0,0,0.08);
                background: transparent;
                color: inherit;

                &:hover{ background: rgba(0,0,0,0.04) }
                &.primary {
                    background: var(--primary-teal, #00aa87);
                    color: #fff;
                    border-color: transparent;
                    &:hover { filter: brightness(0.95) }
                }

            }
        }
    }
}