.app-flashes {
    display: grid;
    gap: 12px;
    max-width: 1360px;
    margin: 0 auto 24px;
}

.app-flash {
    --flash-accent: #9bcbe9;
    --flash-border: #40576a;
    --flash-icon-bg: #2c3b47;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
    padding: 16px 16px 16px 18px;
    border: 1px solid var(--flash-border);
    border-left: 3px solid var(--flash-accent);
    border-radius: 14px;
    background: #292f35;
    color: #f3f4f5;
    box-shadow: 0 4px 16px #00000012;
    animation: app-flash-enter .18s ease-out;
}

.app-flash--success {
    --flash-accent: #98d8b9;
    --flash-border: #415d4f;
    --flash-icon-bg: #2b3d36;
}

.app-flash--error {
    --flash-accent: #ffb5ae;
    --flash-border: #704a4b;
    --flash-icon-bg: #493438;
}

.app-flash--warning {
    --flash-accent: #e3ca94;
    --flash-border: #60563e;
    --flash-icon-bg: #3e3a2f;
}

.app-flash-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-top: 2px;
    border: 1px solid var(--flash-border);
    border-radius: 11px;
    background: var(--flash-icon-bg);
    color: var(--flash-accent);
}

.app-flash-icon svg {width: 22px; height: 22px;}
.app-flash-content {min-width: 0; align-self: center; overflow-wrap: anywhere;}
.app-flash-title {display: block; margin-bottom: 3px; color: var(--flash-accent); font-size: .84rem; font-weight: 600; line-height: 1.5;}
.app-flash-message {margin: 0; color: #d3dae1; font-size: .84rem; line-height: 1.65;}
.app-flash-message a {color: var(--flash-accent); text-underline-offset: 3px;}

.app-flash-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #aeb8c2;
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}

.app-flash-close[hidden] {display: none;}
.app-flash-close svg {width: 16px; height: 16px;}
.app-flash-close:hover {background: var(--flash-icon-bg); border-color: var(--flash-border); color: var(--flash-accent);}
.app-flash-close:focus-visible {outline: 2px solid var(--flash-accent); outline-offset: 2px;}

@keyframes app-flash-enter {
    from {opacity: 0; transform: translateY(-4px);}
    to {opacity: 1; transform: translateY(0);}
}

@media (max-width: 575.98px) {
    .app-flashes {gap: 10px; margin-bottom: 20px;}
    .app-flash {grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 12px; border-radius: 12px;}
    .app-flash-icon {width: 36px; height: 36px; border-radius: 10px;}
}

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