.app-notification-region{
    width:min(380px,calc(100vw - 28px));
    position:fixed;
    z-index:100000;
    top:18px;
    left:50%;
    transform:translateX(-50%);
    display:grid;
    gap:10px;
    pointer-events:none;
}

.app-notification{
    --notice-color:#365f91;
    --notice-soft:#eef5fc;
    min-height:64px;
    padding:13px 42px 13px 48px;
    position:relative;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--notice-color) 24%,white);
    border-radius:10px;
    background:#fff;
    color:#26313f;
    box-shadow:0 16px 42px rgba(23,31,44,.18);
    pointer-events:auto;
    animation:notice-in .2s ease-out both;
}

.app-notification.success{--notice-color:#087a5b;--notice-soft:#eaf7f2}
.app-notification.error{--notice-color:#b42318;--notice-soft:#fff0ee}
.app-notification.warning{--notice-color:#966515;--notice-soft:#fff6df}
.app-notification:before{
    content:"✓";
    width:26px;
    height:26px;
    position:absolute;
    top:17px;
    left:13px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--notice-soft);
    color:var(--notice-color);
    font-size:14px;
    font-weight:900;
}
.app-notification.error:before{content:"!"}
.app-notification.warning:before{content:"!"}
.app-notification.info:before{content:"i"}
.app-notification strong{display:block;margin-bottom:2px;color:#202733;font-size:12px}
.app-notification p{margin:0;color:#5e6979;font-size:12px;line-height:1.45}
.app-notification-close{
    width:28px;
    height:28px;
    position:absolute;
    top:8px;
    right:8px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:6px;
    background:transparent;
    color:#7a8595;
    cursor:pointer;
    font-size:18px;
    line-height:1;
}
.app-notification-close:hover{background:#f1f3f6;color:#293342}
.app-notification-progress{
    height:3px;
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    transform-origin:left;
    background:var(--notice-color);
    animation:notice-progress var(--notice-duration,4500ms) linear forwards;
}
.app-notification.leaving{animation:notice-out .16s ease-in both}
@keyframes notice-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes notice-out{to{opacity:0;transform:translateX(18px) scale(.98)}}
@keyframes notice-progress{to{transform:scaleX(0)}}
@media(max-width:560px){.app-notification-region{top:10px}.app-notification{min-height:60px}}
@media(prefers-reduced-motion:reduce){.app-notification,.app-notification-progress{animation:none}}