#notification-container{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;background:transparent;gap:1rem}.notification{background:#fff;border-radius:1rem;box-shadow:0 20px 40px -12px #0000004d,0 0 0 1px #0000000d;padding:2.5rem 3rem;margin:0;transform:scale(.8) translateY(50px);opacity:0;transition:all .5s cubic-bezier(.34,1.56,.64,1);pointer-events:auto;position:relative;overflow:hidden;border:2px solid;min-width:24rem;max-width:30rem;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:center;align-items:center}.notification.show{transform:scale(1) translateY(0);opacity:1}.notification.success{border-color:#3b82f6;background:#fff;box-shadow:0 25px 50px #3b82f633,0 0 0 1px #3b82f61a;border-radius:1.5rem;padding:3rem 2.5rem;text-align:center;position:relative;overflow:hidden}.notification.success:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#3b82f6,#60a5fa,#3b82f6);background-size:200% 100%;animation:successShimmer 3s ease-in-out infinite}@keyframes successShimmer{0%,to{background-position:200% 0}50%{background-position:-200% 0}}@keyframes successPulse{0%,to{transform:scale(1);box-shadow:0 12px 24px #10b98166}50%{transform:scale(1.05);box-shadow:0 16px 32px #10b98199}}.notification.error{border-color:#fca5a5;background:#fff;box-shadow:0 25px 50px #ef44441a,0 0 0 1px #ef44440d;border-radius:1rem;padding:1.5rem 1.25rem;text-align:center;position:relative;overflow:hidden;border-width:1px;min-width:18rem;max-width:22rem;gap:.75rem}.notification.error:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#fca5a5,#fecaca,#fca5a5);background-size:200% 100%;animation:successShimmer 3s ease-in-out infinite}.notification.warning{border-color:#f59e0b;background:linear-gradient(135deg,#fffbeb,#fef3c7);box-shadow:0 25px 50px -12px #f59e0b40,0 0 0 1px #f59e0b1a}.notification.info{border-color:#3b82f6;background:linear-gradient(135deg,#eff6ff,#dbeafe);box-shadow:0 25px 50px -12px #3b82f640,0 0 0 1px #3b82f61a}.notification-icon{font-size:4rem;margin:0 auto 1.5rem;display:block;flex-shrink:0;width:5rem;height:5rem;border-radius:50%;display:flex;align-items:center;justify-content:center}.notification.success .notification-icon{color:#3b82f6;background:#fff;border:3px solid #e5e7eb;box-shadow:0 8px 20px #3b82f633,0 0 0 8px #10b9811a;animation:successPulse 2s ease-in-out infinite;font-size:3rem;width:6rem;height:6rem;position:relative}.notification.success .notification-icon:before{content:"📅";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;z-index:1}.notification.success .notification-icon:after{content:"✓";position:absolute;top:60%;left:60%;transform:translate(-50%,-50%);font-size:1.2rem;color:#10b981;font-weight:700;z-index:2}.notification.error .notification-icon{color:#ef4444;background:#fff;border:2px solid #e5e7eb;box-shadow:0 6px 15px #ef444426,0 0 0 6px #ef444414;animation:successPulse 2s ease-in-out infinite;font-size:2rem;width:4rem;height:4rem;position:relative;margin:0 auto .75rem}.notification.error .notification-icon:before{content:"⚠️";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.25rem;z-index:1}.notification.error .notification-icon:after{content:"✕";position:absolute;top:60%;left:60%;transform:translate(-50%,-50%);font-size:.75rem;color:#ef4444;font-weight:700;z-index:2}.notification.warning .notification-icon{color:#fff;background:#f59e0b;box-shadow:0 8px 20px #f59e0b4d}.notification.info .notification-icon{color:#fff;background:#3b82f6;box-shadow:0 8px 20px #3b82f64d}.notification.loading{background:transparent;border:none;box-shadow:none;padding:0;width:auto;height:auto;min-width:auto;max-width:none;aspect-ratio:unset}.notification.loading .notification-icon{color:#3b82f6;background:transparent;box-shadow:none;width:min(840px,50vw);height:min(840px,50vw);border-radius:50%;border:3px solid #e5e7eb;position:relative;animation:dropFill 3s ease-in-out infinite}.notification.loading .notification-icon:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:linear-gradient(45deg,#3b82f6,#1d4ed8);clip-path:circle(0% at 50% 50%);animation:fillDrop 2s ease-in-out infinite}.notification.loading .notification-icon:after{content:"🚌";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:min(24rem,16vw);z-index:1;animation:busRunning 2.5s linear infinite}@keyframes busRunning{0%{transform:translate(-50%,-50%) translate(-300px) rotate(-8deg);opacity:.8}20%{transform:translate(-50%,-50%) translate(-150px) rotate(4deg);opacity:1}40%{transform:translate(-50%,-50%) translate(0) rotate(-3deg);opacity:1}60%{transform:translate(-50%,-50%) translate(150px) rotate(5deg);opacity:1}80%{transform:translate(-50%,-50%) translate(300px) rotate(-4deg);opacity:1}to{transform:translate(-50%,-50%) translate(450px) rotate(-6deg);opacity:.8}}.notification.loading .flex-1,.notification.loading .notification-close{display:none}@keyframes dropFill{0%{clip-path:circle(0% at 50% 50%)}50%{clip-path:circle(50% at 50% 50%)}to{clip-path:circle(100% at 50% 50%)}}@keyframes fillDrop{0%{transform:scale(.8);opacity:.7}50%{transform:scale(1);opacity:1}to{transform:scale(1.1);opacity:.8}}.notification-close{position:absolute;top:1rem;right:1rem;background:#0000001a;border:none;color:#6b7280;cursor:pointer;padding:.5rem;border-radius:50%;transition:all .2s ease;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center}.notification-close:hover{background:#0003;color:#374151;transform:scale(1.1)}.notification-action-btn{background:#10b981;color:#fff;border:none;padding:.75rem 2rem;border-radius:.75rem;font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s ease;margin-top:1rem;box-shadow:0 4px 12px #10b9814d}.notification-action-btn:hover{background:#059669;transform:translateY(-2px);box-shadow:0 6px 16px #10b98166}.notification .flex-1{min-width:0;text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#111827}.notification .font-medium{font-weight:700;color:#3b82f6!important;margin-bottom:1rem;font-size:1.75rem;line-height:1.2}.notification.success .font-medium{color:#3b82f6!important}.notification.error .font-medium{color:#111827!important}.notification .text-sm{color:#111827!important;line-height:1.6;font-size:1.1rem;max-width:20rem}.notification.success .text-sm,.notification.error .text-sm,.notification .flex-1,.notification.success .flex-1,.notification.error .flex-1{color:#111827!important}.success-animation{animation:successCenterIn .8s cubic-bezier(.34,1.56,.64,1),successPulse 1s ease-in-out .5s,successGlow 2s ease-in-out .3s;position:relative;overflow:visible}.success-animation:before{content:"";position:absolute;inset:-4px;background:linear-gradient(45deg,#10b981,#34d399,#6ee7b7,#10b981);border-radius:1.5rem;z-index:-1;animation:successBorderGlow 3s ease-in-out infinite}@keyframes successCenterIn{0%{transform:scale(.3) translateY(100px);opacity:0}70%{transform:scale(1.1) translateY(-10px);opacity:.9}to{transform:scale(1) translateY(0);opacity:1}}@keyframes successPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes successGlow{0%,to{box-shadow:0 25px 50px -12px #10b98140,0 0 0 1px #10b9811a}50%{box-shadow:0 35px 70px -12px #10b98166,0 0 0 2px #10b98133}}@keyframes successBorderGlow{0%,to{opacity:.3}50%{opacity:.8}}.error-animation{animation:errorCenterIn .6s cubic-bezier(.4,0,.2,1),errorShake .8s ease-in-out .4s,errorGlow 2s ease-in-out .2s;position:relative}.error-animation:before{content:"";position:absolute;inset:-4px;background:linear-gradient(45deg,#ef4444,#f87171,#fca5a5,#ef4444);border-radius:1.5rem;z-index:-1;animation:errorBorderGlow 2s ease-in-out}@keyframes errorCenterIn{0%{transform:scale(.3) translateY(100px);opacity:0}80%{transform:scale(1.05) translateY(-5px);opacity:.9}to{transform:scale(1) translateY(0);opacity:1}}@keyframes errorShake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-6px)}20%,40%,60%,80%{transform:translate(6px)}}@keyframes errorGlow{0%,to{box-shadow:0 25px 50px -12px #ef444440,0 0 0 1px #ef44441a}50%{box-shadow:0 35px 70px -12px #ef444466,0 0 0 2px #ef444433}}@keyframes errorBorderGlow{0%,to{opacity:.2}50%{opacity:.6}}.warning-animation{animation:warningSlideIn .5s cubic-bezier(.4,0,.2,1),warningWiggle .8s ease-in-out .2s}@keyframes warningSlideIn{0%{transform:translate(100%) rotate(2deg);opacity:0}to{transform:translate(0) rotate(0);opacity:1}}@keyframes warningWiggle{0%,to{transform:rotate(0)}25%{transform:rotate(1deg)}75%{transform:rotate(-1deg)}}.info-animation{animation:infoSlideIn .5s cubic-bezier(.4,0,.2,1),infoFade .3s ease-in-out .2s}@keyframes infoSlideIn{0%{transform:translate(100%) scale(.95);opacity:0}to{transform:translate(0) scale(1);opacity:1}}@keyframes infoFade{0%{opacity:.7}to{opacity:1}}.notification.exit{animation:notificationCenterExit .4s ease-in forwards}@keyframes notificationCenterExit{0%{transform:scale(1) translateY(0);opacity:1}to{transform:scale(.8) translateY(-50px);opacity:0}}.notification:hover{transform:translateY(-2px);box-shadow:0 20px 40px -10px #00000026,0 10px 20px -5px #0000001a}@media (max-width: 640px){.notification{min-width:20rem;max-width:24rem;padding:2rem 2.5rem;margin:0 1rem;aspect-ratio:4/5}.notification-icon{font-size:3rem;width:4rem;height:4rem;margin-bottom:1rem}.notification .font-medium{font-size:1.5rem}.notification .text-sm{font-size:1rem;max-width:18rem}}@media (prefers-color-scheme: dark){.notification{background:#1f2937;color:#f9fafb}.notification .font-medium{color:#f9fafb}.notification .text-sm{color:#d1d5db}.notification-close{color:#9ca3af}.notification-close:hover{background:#ffffff1a;color:#f3f4f6}}
