@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap";
.custom-notifications-container{z-index:10000;pointer-events:none;flex-direction:column;gap:12px;display:flex;position:fixed;top:24px;right:24px}.custom-notifications-container>div{pointer-events:all}.custom-notification{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff;border:1px solid #d1d5db;border-radius:1.5rem;align-items:flex-start;gap:12px;width:360px;max-width:calc(100vw - 48px);padding:1rem 1.25rem;font-family:Nunito,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;transition:all .3s cubic-bezier(.4,0,.2,1);animation:.4s cubic-bezier(.4,0,.2,1) slideInRight;display:flex;position:relative;overflow:hidden}.custom-notification:hover{transform:translate(-4px);box-shadow:0 8px 20px #0000001f,0 4px 8px #0000000f}.custom-notification.exiting{animation:.3s cubic-bezier(.4,0,.6,1) forwards slideOutRight}.custom-notification .notification-icon{flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;display:flex}.custom-notification .notification-content{flex:1;min-width:0;padding-right:8px}.custom-notification .notification-title{color:#1e293b;margin-bottom:4px;font-size:15px;font-weight:700;line-height:1.3}.custom-notification .notification-message{color:#64748b;word-wrap:break-word;font-size:13px;font-weight:500;line-height:1.4}.custom-notification .notification-close{color:#94a3b8;cursor:pointer;background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-top:-2px;transition:all .2s;display:flex}.custom-notification .notification-close:hover{color:#1e293b;background:#f1f5f9}.custom-notification .notification-close:active{transform:scale(.95)}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(120%)}}@keyframes notificationPulse{0%,to{box-shadow:0 4px 12px #00000014,0 2px 4px #0000000a}50%{box-shadow:0 8px 24px #ff6b3526,0 4px 8px #ff6b351a}}@keyframes notificationShake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}@media (max-width:768px){.custom-notifications-container{max-width:100%;top:16px;left:16px;right:16px}.custom-notification{border-radius:1rem;width:100%;max-width:100%;padding:.875rem 1rem}.custom-notification .notification-title{font-size:14px}.custom-notification .notification-message{font-size:12px}}
