.notifications{--notification-from:1;z-index:1000;box-sizing:border-box;width:min(400px + 2rem,100vw);max-height:100dvh;padding:max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 2.5rem max(1rem, env(safe-area-inset-left));pointer-events:none;align-content:start;justify-items:end;gap:.75rem;font-family:Vazirmatn,Tahoma,Segoe UI,sans-serif;display:grid;position:fixed;top:0;right:0;overflow:hidden auto}.notifications[dir=rtl]{--notification-from:-1;left:0;right:auto}.notification{--notification-bg:#1e6b3c;--notification-fg:#fff;--notification-icon-bg:#fff;--notification-close:#ffffff2e;--notification-close-hover:#ffffff57;--notification-track:#ffffff38;--notification-shadow:0 22px 44px -14px #17542fb3, 0 6px 14px -4px #17281c4d;box-sizing:border-box;background:var(--notification-bg);min-width:min(300px,100%);max-width:100%;color:var(--notification-fg);box-shadow:var(--notification-shadow);pointer-events:auto;border-radius:18px;align-items:center;gap:14px;padding-block:12px;padding-inline:14px 8px;animation:.7s cubic-bezier(.2,.9,.3,1) both notification-in;display:flex;position:relative;overflow:hidden}.notification--warning{--notification-bg:#f6b01e;--notification-fg:#2a1b05;--notification-icon-bg:#2a1b05;--notification-close:#2a1b0521;--notification-close-hover:#2a1b053d;--notification-track:#2a1b0529;--notification-shadow:0 22px 44px -14px #a06400a6, 0 6px 14px -4px #3c280a47}.notification--info{--notification-bg:#2468b8;--notification-shadow:0 22px 44px -14px #19468cb3, 0 6px 14px -4px #14233c4d}.notification--error{--notification-bg:#a61f1f;--notification-shadow:0 22px 44px -14px #8c1919b3, 0 6px 14px -4px #3214144d;animation:.7s cubic-bezier(.2,.9,.3,1) both notification-in,.5s ease-in-out .75s notification-shake}.notification-message{flex:1;align-items:center;gap:14px;min-width:0;display:flex}.notification-icon{background:var(--notification-icon-bg);width:44px;height:44px;color:var(--notification-bg);border-radius:50%;flex:none;justify-content:center;align-items:center;animation:.55s cubic-bezier(.2,.9,.3,1.4) .15s both notification-pop;display:flex}.notification--warning .notification-icon{animation:.55s cubic-bezier(.2,.9,.3,1.4) .15s both notification-pop,.7s ease-in-out .85s notification-wobble}.notification-text{overflow-wrap:anywhere;flex:1;min-width:0;font-size:18px;font-weight:700;line-height:1.4}.notification-close{width:44px;height:44px;color:var(--notification-fg);cursor:pointer;background:0 0;border:0;border-radius:50%;flex:none;justify-content:center;align-items:center;padding:0;display:flex}.notification-close>span{background:var(--notification-close);border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:background .15s;display:flex}.notification-close:hover>span{background:var(--notification-close-hover)}.notification-close:focus-visible{outline:2px solid var(--notification-fg);outline-offset:-2px}.notification-timer{inset-inline:0;background:var(--notification-track);height:4px;position:absolute;bottom:0}.notification-timer>span{background:var(--notification-fg);transform-origin:0;height:100%;animation:notification-drain var(--notification-duration,5s) linear forwards;display:block}.notifications[dir=rtl] .notification-timer>span{transform-origin:100%}.notification--paused .notification-timer>span{animation-play-state:paused}@keyframes notification-in{0%{opacity:0;transform:translateX(calc(36px * var(--notification-from))) scale(.94)}60%{opacity:1;transform:translateX(calc(-6px * var(--notification-from))) scale(1.015)}to{opacity:1;transform:none}}@keyframes notification-shake{0%,to{transform:translate(0)}20%{transform:translateX(calc(8px * var(--notification-from)))}40%{transform:translateX(calc(-7px * var(--notification-from)))}60%{transform:translateX(calc(5px * var(--notification-from)))}80%{transform:translateX(calc(-3px * var(--notification-from)))}}@keyframes notification-pop{0%{transform:scale(.3)}60%{transform:scale(1.18)}to{transform:scale(1)}}@keyframes notification-wobble{0%,to{transform:rotate(0)}25%{transform:rotate(calc(14deg * var(--notification-from)))}50%{transform:rotate(calc(-12deg * var(--notification-from)))}75%{transform:rotate(calc(6deg * var(--notification-from)))}}@keyframes notification-draw{to{stroke-dashoffset:0}}@keyframes notification-fade{0%{opacity:0}to{opacity:1}}@keyframes notification-drain{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (prefers-reduced-motion:reduce){.notification,.notification *{animation:none!important}.notification-draw{stroke-dashoffset:0!important}}