.celebration-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); animation: celebrationFadeIn 0.5s ease; }
.celebration-balloons { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.celebration-balloon { position: absolute; bottom: -80px; left: var(--x, 50%); width: 42px; height: 52px; border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%; animation: celebrationBalloonRise var(--duration, 5s) ease-in-out var(--delay, 0s) 1 forwards; opacity: 0.92; box-shadow: inset -6px -8px 12px rgba(0,0,0,0.15); }
.celebration-balloon::before { content: ""; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); width: 4px; height: 18px; background: linear-gradient(180deg, rgba(0,0,0,0.2), transparent); border-radius: 2px; }
.celebration-balloon-0 { background: linear-gradient(135deg, #ff6b9d, #c44569); }
.celebration-balloon-1 { background: linear-gradient(135deg, #4ecdc4, #2d8b84); }
.celebration-balloon-2 { background: linear-gradient(135deg, #ffe66d, #f4a261); }
.celebration-balloon-3 { background: linear-gradient(135deg, #a8e6cf, #56ab91); }
.celebration-balloon-4 { background: linear-gradient(135deg, #dda0dd, #9b59b6); }
.celebration-balloon-5 { background: linear-gradient(135deg, #74b9ff, #0984e3); }
.celebration-confetti-canvas { position: absolute; inset: 0; pointer-events: none; }
.celebration-modal { position: relative; z-index: 2; margin: 20px; max-width: 420px; width: 90%; animation: celebrationModalPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both; }
.celebration-modal-inner { background: linear-gradient(160deg, #fff 0%, #f8fafc 100%); border-radius: 20px; padding: 32px 28px; text-align: center; box-shadow: 0 25px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.4); }
.celebration-badge { display: inline-block; font-size: 1.5rem; font-weight: 800; color: #1a1a2e; background: linear-gradient(135deg, #ffeaa7, #fdcb6e); padding: 8px 20px; border-radius: 999px; margin-bottom: 16px; box-shadow: 0 4px 14px rgba(253,203,110,0.5); }
.celebration-title { font-size: 1.6rem; font-weight: 700; color: #1a1a2e; margin: 0 0 12px; line-height: 1.3; }
.celebration-message { font-size: 1.05rem; color: #475569; line-height: 1.55; margin: 0 0 24px; }
.celebration-cta { background: linear-gradient(135deg, #0984e3, #074a7a); color: #fff; border: none; padding: 14px 32px; font-size: 1.05rem; font-weight: 600; border-radius: 12px; cursor: pointer; box-shadow: 0 6px 20px rgba(9,132,227,0.4); transition: transform 0.2s, box-shadow 0.2s; }
.celebration-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(9,132,227,0.5); }
@keyframes celebrationBalloonRise { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 15% { opacity: 0.92; } 100% { transform: translateY(-120vh) scale(1); opacity: 0.7; } }
@keyframes celebrationFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes celebrationModalPop { from { opacity: 0; transform: scale(0.85) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }