.flash-stack {
    position: fixed;
    z-index: 1100;
    top: 96px;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 40px);
    pointer-events: none;
    transform: translateX(-50%);
}

.flash {
    border: 1px solid transparent;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 12px 14px;
    box-shadow: 0 10px 28px rgba(16, 42, 67, 0.18);
    opacity: 1;
    pointer-events: auto;
    text-align: center;
    transform: translateY(0);
    transition: opacity 240ms ease, transform 240ms ease;
}

.flash--leaving {
    opacity: 0;
    transform: translateY(-8px);
}

.flash--success {
    border-color: #bcd6c4;
    background: #dff5e7;
    color: #185332;
}

.flash--error {
    border-color: #efb9b1;
    background: #fee8e4;
    color: #7f251b;
}

.flash--info {
    border-color: #c4d8e5;
    background: #e9f1f6;
    color: #234761;
}

.flash--warning {
    border-color: #ead69c;
    background: #fff4d6;
    color: #7a5600;
}

.flash--debug {
    border-color: #d9dee2;
    background: #f1f3f5;
    color: #495057;
}

@media (max-width: 700px) {
    .flash-stack {
        top: 12px;
        max-width: calc(100% - 24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .flash {
        transition: none;
    }
}