.alert {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-lg);
    font-size: var(--fs-sm);
    border: 1px solid transparent;
}

/* Fixed toast region — visible above the fixed header on any scroll position */
.flash-region {
    position: fixed;
    top: calc(var(--header-height) + var(--space-md));
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    width: min(92vw, 30rem);
    animation: flashIn 0.4s var(--ease) both, flashOut 0.5s var(--ease) 5s forwards;
}

.flash-region .alert {
    margin-bottom: 0;
    box-shadow: var(--shadow-md);
}

@keyframes flashIn {
    from { opacity: 0; transform: translate(-50%, -12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes flashOut {
    to { opacity: 0; transform: translate(-50%, -12px); visibility: hidden; }
}

.alert-info {
    background-color: oklch(from var(--color-info) calc(l + 0.34) calc(c - 0.04) h);
    color: oklch(from var(--color-info) calc(l - 0.18) c h);
    border-color: oklch(from var(--color-info) calc(l + 0.2) c h);
}

.alert-success {
    background-color: oklch(from var(--color-success) calc(l + 0.32) calc(c - 0.04) h);
    color: oklch(from var(--color-success) calc(l - 0.18) c h);
    border-color: oklch(from var(--color-success) calc(l + 0.18) c h);
}

.alert-warning {
    background-color: oklch(from var(--color-warning) calc(l + 0.22) calc(c - 0.05) h);
    color: oklch(from var(--color-warning) calc(l - 0.32) c h);
    border-color: oklch(from var(--color-warning) calc(l + 0.12) c h);
}

.alert-error {
    background-color: oklch(from var(--color-error) calc(l + 0.36) calc(c - 0.08) h);
    color: oklch(from var(--color-error) calc(l - 0.12) c h);
    border-color: oklch(from var(--color-error) calc(l + 0.22) c h);
}

.error-card {
    max-width: 32rem;
    margin: var(--space-3xl) auto;
    padding: var(--space-xl);
    text-align: center;
    background-color: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
}

.error-card h2 {
    margin-bottom: var(--space-sm);
    font-size: var(--fs-2xl);
}