.system-toasts{
    position:fixed;
    top:50%;
    left:50%;right:15%;
    inset-inline:auto;
    transform:translate(-50%,-50%);
    width:min(430px,calc(100vw - 28px));
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:2147483000;
    pointer-events:none;
    direction:inherit;
}
.system-toast{
    position:relative;
    display:grid;
    grid-template-columns:42px 1fr 28px;
    align-items:center;
    gap:11px;
    min-height:72px;
    padding:12px 13px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.7);
    border-radius:16px;
    background:rgba(255,255,255,.98);
    box-shadow:0 16px 42px rgba(11,31,77,.20),0 3px 12px rgba(11,31,77,.08);
    opacity:0;
    transform:translateY(-12px) scale(.97);
    transition:opacity .24s ease,transform .24s ease;
    pointer-events:auto;
    font-family:inherit;
}
.system-toast.is-visible{opacity:1;transform:translateY(0) scale(1)}
.system-toast-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:18px}
.system-toast-success .system-toast-icon{background:#eaf8ef;color:#15803d}
.system-toast-error .system-toast-icon{background:#fff0f0;color:#c53030}
.system-toast-warning .system-toast-icon{background:#fff6df;color:#a66a00}
.system-toast-info .system-toast-icon{background:#edf4ff;color:#1f5fbf}
.system-toast-body{min-width:0;display:flex;flex-direction:column;gap:3px}
.system-toast-body strong{color:#0b1f4d;font-size:13px;line-height:1.4}
.system-toast-body span{color:#66758d;font-size:11px;line-height:1.65;word-break:break-word}
.system-toast-close{width:28px;height:28px;border:0;background:transparent;color:#9aa5b7;border-radius:8px;font-size:21px;line-height:1;cursor:pointer}
.system-toast-close:hover{background:#f1f4f8;color:#0b1f4d}
.system-toast-progress{position:absolute;inset:auto 0 0;height:3px;transform-origin:100% 50%;animation:systemToastProgress 3.8s linear forwards}
.system-toast-success .system-toast-progress{background:#22a06b}
.system-toast-error .system-toast-progress{background:#d64545}
.system-toast-warning .system-toast-progress{background:#f5b223}
.system-toast-info .system-toast-progress{background:#2f6fed}
@keyframes systemToastProgress{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.system-confirm-backdrop{position:fixed;inset:0;z-index:2147483100;display:grid;place-items:center;padding:18px;background:rgba(7,20,48,.46);backdrop-filter:blur(5px);opacity:0;transition:opacity .18s ease;direction:inherit}
.system-confirm-backdrop.is-visible{opacity:1}
.system-confirm{width:min(390px,100%);padding:27px 24px 22px;border-radius:22px;background:#fff;box-shadow:0 25px 80px rgba(0,0,0,.22);text-align:center;transform:translateY(8px) scale(.97);transition:transform .18s ease}
.system-confirm-backdrop.is-visible .system-confirm{transform:translateY(0) scale(1)}
.system-confirm-icon{width:58px;height:58px;margin:0 auto 14px;display:grid;place-items:center;border-radius:18px;background:#fff4d6;color:#d59600;font-size:23px}
.system-confirm h3{margin:0 0 7px;color:#0b1f4d;font-size:19px}
.system-confirm p{margin:0;color:#6d7890;font-size:12px;line-height:1.8}
.system-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:21px}
.system-confirm-actions button{min-height:44px;border:0;border-radius:11px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.system-confirm-cancel{background:#eef3f9;color:#0b1f4d}
.system-confirm-ok{background:#0b1f4d;color:#fff}
.system-confirm-ok:hover{background:#132f67}
@media(max-width:600px){.system-toasts{top:50%;width:calc(100vw - 20px)}.system-toast{min-height:66px;border-radius:14px}.system-toast-body strong{font-size:12px}.system-toast-body span{font-size:10px}.system-confirm{border-radius:18px;padding:24px 18px 18px}}
html[dir="ltr"] .system-toast-progress{transform-origin:0 50%}


/* ==========================================================
   SmartShop System Notifications
   Same visual language as the logout confirmation modal.
   ========================================================== */
.system-notification{
    width:min(390px,100%);
    padding:27px 24px 22px;
    border-radius:22px;
}
.system-notification-icon{
    transition:background .18s ease,color .18s ease;
}
.system-notification-success{
    background:#eaf8ef;
    color:#15803d;
}
.system-notification-error{
    background:#fff0f0;
    color:#c53030;
}
.system-notification-warning{
    background:#fff6df;
    color:#a66a00;
}
.system-notification-info{
    background:#edf4ff;
    color:#1f5fbf;
}
.system-notification-message{
    max-height:120px;
    overflow:auto;
    word-break:break-word;
}
.system-notification-actions{
    grid-template-columns:1fr;
    margin-top:21px;
}
.system-notification-ok{
    width:100%;
    min-height:44px;
}
@media(max-width:600px){
    .system-notification{
        width:100%;
        border-radius:18px;
        padding:24px 18px 18px;
    }
}