.alert {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-sm);
    border: 1px solid transparent;
}

.alert__message {
    flex: 1;
}

/* Dismiss (×) button — inherits the alert's text colour so it matches each
   variant. */
.alert__close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: 0.7;
}

.alert__close:hover {
    opacity: 1;
}

.alert-info {
    background-color: #083344;
    color: #67e8f9;
    border-color: #155e75;
}

.alert-success {
    background-color: #052e16;
    color: #86efac;
    border-color: #166534;
}

.alert-warning {
    background-color: #451a03;
    color: #fcd34d;
    border-color: #92400e;
}

.alert-error {
    background-color: #450a0a;
    color: #fca5a5;
    border-color: #991b1b;
}

.error-card {
    max-width: 32rem;
    margin: var(--space-2xl) auto;
    padding: var(--space-xl);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
}

.error-card h2 {
    margin-bottom: var(--space-sm);
}