.bubble-pattern{background-image:radial-gradient(circle at 20% 80%,rgba(160,214,208,.3) 0,transparent 50%),radial-gradient(circle at 80% 20%,rgba(178,231,163,.3) 0,transparent 50%),radial-gradient(circle at 40% 40%,rgba(254,234,112,.2) 0,transparent 50%),radial-gradient(circle at 90% 70%,rgba(160,214,208,.2) 0,transparent 50%);background-size:200px 200px,150px 150px,180px 180px,120px 120px;background-position:0 0,40px 60px,130px 270px,70px 100px}.water-wave-pattern{background-image:repeating-linear-gradient(45deg,transparent,transparent 35px,rgba(160,214,208,.1) 0,rgba(160,214,208,.1) 70px)}.rubber-ducky-bg{position:relative;overflow:hidden}.rubber-ducky-bg:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 15% 15%,rgba(255,204,0,.1) 0,transparent 25%),radial-gradient(circle at 85% 85%,rgba(255,204,0,.1) 0,transparent 25%),radial-gradient(circle at 85% 15%,rgba(160,214,208,.1) 0,transparent 25%),radial-gradient(circle at 15% 85%,rgba(178,231,163,.1) 0,transparent 25%);background-size:300px 300px;animation:float 20s ease-in-out infinite;pointer-events:none}.floating-bubbles{position:absolute;width:100%;height:100%;overflow:hidden;pointer-events:none}.bubble{position:absolute;bottom:-100px;background:radial-gradient(circle,rgba(255,255,255,.5) 0,rgba(255,255,255,.2) 70%);border-radius:50%;opacity:.8;animation:rise 15s ease-in-out infinite}.bubble:first-child{width:40px;height:40px;left:10%;animation-duration:12s;animation-delay:0s}.bubble:nth-child(2){width:60px;height:60px;left:30%;animation-duration:18s;animation-delay:2s}.bubble:nth-child(3){width:30px;height:30px;left:50%;animation-duration:14s;animation-delay:4s}.bubble:nth-child(4){width:50px;height:50px;left:70%;animation-duration:16s;animation-delay:1s}.bubble:nth-child(5){width:35px;height:35px;left:90%;animation-duration:20s;animation-delay:3s}@keyframes rise{0%{bottom:-100px;transform:translateX(0)}10%{transform:translateX(-20px)}20%{transform:translateX(20px)}30%{transform:translateX(-20px)}40%{transform:translateX(15px)}50%{transform:translateX(-15px)}60%{transform:translateX(10px)}70%{transform:translateX(-10px)}80%{transform:translateX(5px)}90%{transform:translateX(-5px)}to{bottom:100%;transform:translateX(0)}}@keyframes float{0%,to{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-10px) rotate(1deg)}66%{transform:translateY(10px) rotate(-1deg)}}.water-splash{position:absolute;bottom:0;left:0;right:0;height:120px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23A0D6D0' opacity='0.3'/%3E%3C/svg%3E");background-size:200% 100%;animation:waves 10s linear infinite}@keyframes waves{0%{background-position-x:0}to{background-position-x:200%}}.glass-panel{backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.125);border-radius:20px;box-shadow:0 4px 30px rgba(0,0,0,.07),inset 0 1px 0 0 rgba(255,255,255,.5);transition:all .3s cubic-bezier(.4,0,.2,1)}.glass-panel:hover{transform:translateY(-2px);box-shadow:0 8px 40px rgba(0,0,0,.12),inset 0 1px 0 0 rgba(255,255,255,.5)}.glass-card{backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.18);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.08),inset 0 2px 0 0 rgba(255,255,255,.4);padding:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.glass-card-hover:hover{transform:scale(1.02);box-shadow:0 12px 48px rgba(0,0,0,.15),inset 0 2px 0 0 rgba(255,255,255,.4)}.glass-hero{backdrop-filter:blur(40px) saturate(200%);-webkit-backdrop-filter:blur(40px) saturate(200%);background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.4));border:1px solid rgba(255,255,255,.2);border-radius:32px;box-shadow:0 20px 80px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.2),inset 0 2px 8px 0 rgba(255,255,255,.6);padding:3rem;position:relative;overflow:hidden}.glass-hero:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5) 20%,rgba(255,255,255,.5) 80%,transparent)}.liquid-button{background:linear-gradient(135deg,#FEEA70,#FFCC00);border:none;border-radius:980px;padding:16px 32px;font-weight:600;color:#2E4A3B;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px rgba(254,234,112,.3),inset 0 1px 0 rgba(255,255,255,.4)}.liquid-button:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 8px 24px rgba(254,234,112,.4),inset 0 1px 0 rgba(255,255,255,.4)}.liquid-button:active{transform:translateY(0) scale(.98)}.liquid-button-secondary{background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(178,231,163,.3);color:#2E4A3B}.liquid-button-secondary:hover{background:rgba(255,255,255,.95);border-color:rgba(178,231,163,.5);box-shadow:0 8px 24px rgba(178,231,163,.2),inset 0 1px 0 rgba(255,255,255,.9)}@keyframes ripple{0%{transform:scale(0);opacity:1}to{transform:scale(4);opacity:0}}.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:ripple .6s ease-out;pointer-events:none}@keyframes liquid-float{0%,to{transform:translateY(0) rotate(-2deg)}25%{transform:translateY(-10px) rotate(1deg)}75%{transform:translateY(-5px) rotate(-1deg)}}.liquid-float{animation:liquid-float 6s ease-in-out infinite}.glass-input{background:rgba(255,255,255,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:16px 20px;font-size:16px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.5)}.glass-input:focus{outline:none;background:rgba(255,255,255,.9);border-color:#B2E7A3;box-shadow:0 0 0 3px rgba(178,231,163,.2),0 2px 8px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.5)}.zodiac-glass-card{backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.6));border:1px solid rgba(255,255,255,.3);border-radius:24px;padding:2rem;box-shadow:0 20px 40px rgba(0,0,0,.08),inset 0 2px 0 rgba(255,255,255,.5);position:relative;overflow:hidden}.zodiac-glass-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(178,231,163,.1) 0,transparent 70%);animation:liquid-rotate 20s linear infinite}@keyframes liquid-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.liquid-float{animation:none}.glass-card:hover,.glass-panel:hover,.liquid-button:hover{transform:none}}.will-blur{will-change:backdrop-filter,transform}@media (prefers-color-scheme:dark){.glass-card,.glass-hero,.glass-panel{background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.1)}.liquid-button-secondary{background:rgba(0,0,0,.7);color:#E8F5E3}}.prediction-container{max-width:800px;margin:0 auto}.step-indicator{display:flex;justify-content:center;align-items:center;margin-bottom:var(--spacing-2xl);gap:var(--spacing-sm)}.step-dot{width:12px;height:12px;border-radius:50%;background:var(--neutral-300);transition:all var(--transition-base);position:relative}.step-dot.active{width:40px;border-radius:var(--radius-full);background:var(--gradient-primary)}.step-dot.completed{background:var(--primary-pink)}.prediction-form{background:rgba(255,255,255,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-2xl);padding:var(--spacing-2xl);box-shadow:var(--shadow-xl);border:1px solid rgba(255,255,255,.8);position:relative;overflow:hidden}.prediction-form:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient-primary)}.zodiac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:var(--spacing-md);margin:var(--spacing-xl) 0}.zodiac-button{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:white;border:2px solid var(--neutral-200);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);position:relative;overflow:hidden}.zodiac-button:hover{transform:translateY(-4px);border-color:var(--primary-pink-light);box-shadow:var(--shadow-lg)}.zodiac-button.selected{background:var(--gradient-soft);border-color:var(--primary-pink);transform:scale(1.05)}.zodiac-emoji{font-size:2.5rem;margin-bottom:var(--spacing-xs)}.zodiac-name{font-size:.875rem;font-weight:600;text-transform:capitalize;color:var(--neutral-700)}.gender-options{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg);margin:var(--spacing-xl) 0}.gender-card{position:relative;padding:var(--spacing-xl);text-align:center;background:white;border:3px solid transparent;border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-base);overflow:hidden}.gender-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-2xl)}.gender-card.boy{background:linear-gradient(135deg,rgba(67,97,238,.05),rgba(67,97,238,.1))}.gender-card.boy:hover{border-color:var(--primary-blue);box-shadow:var(--shadow-2xl),var(--shadow-glow-blue)}.gender-card.girl{background:linear-gradient(135deg,rgba(255,107,157,.05),rgba(255,107,157,.1))}.gender-card.girl:hover{border-color:var(--primary-pink);box-shadow:var(--shadow-2xl),var(--shadow-glow-pink)}.gender-icon{font-size:4rem;margin-bottom:var(--spacing-md)}.gender-label{font-size:1.5rem;font-weight:700;margin-bottom:var(--spacing-sm)}.gender-card.boy .gender-label{color:var(--primary-blue)}.gender-card.girl .gender-label{color:var(--primary-pink)}.gender-description{font-size:.875rem;color:var(--neutral-600)}.input-group{margin-bottom:var(--spacing-lg)}.input-label{display:block;font-weight:600;color:var(--neutral-700);margin-bottom:var(--spacing-sm);font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}.navigation-buttons{display:flex;justify-content:space-between;gap:var(--spacing-md);margin-top:var(--spacing-xl)}.nav-button{flex:1;padding:var(--spacing-md) var(--spacing-xl);font-weight:600;border-radius:var(--radius-full);border:2px solid transparent;cursor:pointer;transition:all var(--transition-fast)}.nav-button.secondary{background:white;border-color:var(--neutral-300);color:var(--neutral-700)}.nav-button.secondary:hover{border-color:var(--neutral-400);background:var(--neutral-100)}.nav-button.primary{background:var(--gradient-primary);color:white;box-shadow:var(--shadow-md)}.nav-button.primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.nav-button:disabled{opacity:.5;cursor:not-allowed}.result-card{text-align:center;padding:var(--spacing-2xl);background:white;border-radius:var(--radius-2xl);box-shadow:var(--shadow-2xl);position:relative;overflow:hidden}.result-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:var(--gradient-soft);opacity:.1;transform:rotate(45deg);animation:gradient-shift 8s ease infinite}.success-icon{width:80px;height:80px;margin:0 auto var(--spacing-lg);background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:white;box-shadow:var(--shadow-lg);animation:scale-in .5s ease-out}@keyframes scale-in{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@media (max-width:768px){.gender-options{grid-template-columns:1fr}.zodiac-grid{grid-template-columns:repeat(3,1fr)}.prediction-form{padding:var(--spacing-lg)}}.hero-premium{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero-background{position:absolute;inset:0;background:var(--gradient-nature);opacity:.3}.hero-content{position:relative;z-index:10;text-align:center}.title-premium{font-size:clamp(3rem,8vw,6rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;margin-bottom:var(--spacing-lg);position:relative}.title-premium:after{content:attr(data-text);position:absolute;left:0;top:0;z-index:-1;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:blur(20px);opacity:.5}.subtitle-premium{font-size:clamp(1.25rem,3vw,1.75rem);font-weight:600;color:var(--neutral-600);margin-bottom:var(--spacing-xl);letter-spacing:-.01em}.card-premium{position:relative;padding:var(--spacing-xl);background:rgba(255,255,255,.95);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:all var(--transition-base);overflow:hidden}.card-premium:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:var(--gradient-soft);opacity:0;transform:rotate(45deg);transition:opacity var(--transition-slow)}.card-premium:hover:before{opacity:.1}.card-premium:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-2xl);border-color:var(--primary-pink-light)}.number-display{font-size:clamp(3rem,6vw,5rem);font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;font-variant-numeric:tabular-nums}.number-label{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--neutral-500);margin-top:var(--spacing-xs)}.input-premium{width:100%;padding:var(--spacing-md) var(--spacing-lg);font-size:1rem;font-weight:500;background:rgba(255,255,255,.9);border:2px solid var(--neutral-200);border-radius:var(--radius-lg);transition:all var(--transition-fast)}.input-premium:focus{outline:none;border-color:var(--primary-pink);box-shadow:0 0 0 3px rgba(255,107,157,.1);background:white}.input-premium::placeholder{color:var(--neutral-400)}.select-premium{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--spacing-md) center;padding-right:var(--spacing-2xl)}.textarea-premium{resize:vertical;min-height:120px;line-height:1.5}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:var(--radius-full);background:var(--gradient-primary);color:white;border:none;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-md)}.icon-button:hover{transform:scale(1.1);box-shadow:var(--shadow-lg)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-lg);margin:var(--spacing-2xl) 0}.stat-card{text-align:center;padding:var(--spacing-lg);background:rgba(255,255,255,.8);border-radius:var(--radius-xl);border:1px solid var(--neutral-200);transition:all var(--transition-fast)}.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary-pink-light)}.stat-number{font-size:2.5rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-xs)}.stat-label{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--neutral-600)}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-xl);margin:var(--spacing-2xl) 0}.feature-card{position:relative;padding:var(--spacing-xl);background:white;border-radius:var(--radius-xl);box-shadow:var(--shadow-md);transition:all var(--transition-base);overflow:hidden}.feature-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary)}.feature-icon{width:4rem;height:4rem;margin-bottom:var(--spacing-lg);padding:1rem;background:var(--gradient-soft);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center}.feature-title{font-size:1.25rem;font-weight:700;margin-bottom:var(--spacing-sm);color:var(--foreground)}.feature-description{font-size:1rem;line-height:1.6;color:var(--neutral-600)}.badge-premium{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-md);font-size:.875rem;font-weight:600;background:var(--gradient-primary);color:white;border-radius:var(--radius-full);box-shadow:var(--shadow-sm)}.floating-element{position:absolute;pointer-events:none;opacity:.1;animation:float-random 20s ease-in-out infinite}@keyframes float-random{0%,to{transform:translate(0) rotate(0deg)}25%{transform:translate(50px,-30px) rotate(90deg)}50%{transform:translate(-30px,-60px) rotate(180deg)}75%{transform:translate(-60px,-30px) rotate(270deg)}}.progress-bar{width:100%;height:8px;background:var(--neutral-200)}.progress-bar,.progress-fill{border-radius:var(--radius-full);overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--gradient-primary);transition:width var(--transition-slow)}.progress-fill:after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@media (max-width:768px){.card-premium{padding:var(--spacing-lg)}.title-premium{font-size:clamp(2.5rem,10vw,4rem)}.stats-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.feature-grid{grid-template-columns:1fr}}.water-gradient-background{background:linear-gradient(180deg,#e0f5f5,#b8e6e6 25%,#7bc4c4 75%,#5cb3b3)}.water-glass-card{background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(224,245,245,.85));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.3);box-shadow:0 20px 60px rgba(74,85,104,.12),inset 0 1px 0 rgba(255,255,255,.8)}@keyframes water-wave{0%,to{transform:translateX(0)}50%{transform:translateX(-25px)}}@keyframes water-wave-reverse{0%,to{transform:translateX(0)}50%{transform:translateX(25px)}}.water-wave{animation:water-wave 8s ease-in-out infinite}.water-wave-reverse{animation:water-wave-reverse 6s ease-in-out infinite}@keyframes bubble-float{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:.3}90%{opacity:.1}to{transform:translateY(-100px) scale(1);opacity:0}}@keyframes bubble-wobble{0%,to{transform:translateX(0) rotate(0deg)}25%{transform:translateX(-15px) rotate(-5deg)}75%{transform:translateX(15px) rotate(5deg)}}.water-bubble{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.8),rgba(123,196,196,.4));border:1px solid rgba(255,255,255,.5);animation:bubble-float 10s ease-out infinite,bubble-wobble 3s ease-in-out infinite}.water-bubble:before{content:"";position:absolute;top:20%;left:30%;width:30%;height:30%;background:rgba(255,255,255,.6);border-radius:50%;filter:blur(2px)}.water-title{color:#4a5568;text-shadow:0 2px 20px rgba(74,85,104,.3),0 0 40px rgba(168,213,213,.2);background:linear-gradient(135deg,#4a5568,#2d7d7d 50%,#4a9b9b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.water-subtitle{color:#4a9b9b;text-shadow:0 1px 10px rgba(74,155,155,.2)}@media (max-width:768px){.water-glass-card{border-radius:1.5rem;padding:1.5rem;margin:0 .5rem}.water-bubble{animation-duration:12s,2s}.water-bubble:before{display:none}}@media (max-width:480px){.water-glass-card{border-radius:1rem;padding:1rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.water-title{text-shadow:0 1px 10px rgba(74,85,104,.2)}}@media (prefers-reduced-motion:reduce){.water-bubble,.water-wave,.water-wave-reverse{animation:none}}@media (prefers-contrast:high){.water-glass-card{background:rgba(255,255,255,.98);border:2px solid #2d7d7d}.water-subtitle,.water-title{text-shadow:none;-webkit-text-fill-color:unset;background:none;color:#2d7d7d}}@media print{.water-bubble,.water-wave{display:none}.water-glass-card{background:white;border:1px solid #ccc;box-shadow:none;backdrop-filter:none}}.duck-container{position:relative;display:inline-block;transition:transform .3s ease}@media (max-width:640px){.duck-container{transform:scale(.7)}}@media (max-width:480px){.duck-container{transform:scale(.6)}}.interactive-element:focus-visible{outline:3px solid #ffd93d;outline-offset:4px;border-radius:.5rem}.smooth-transition{transition:all .3s cubic-bezier(.4,0,.2,1)}.smooth-transition:hover{transform:translateY(-2px)}.loading-shimmer{background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.3) 50%,rgba(255,255,255,.1));background-size:200% 100%;animation:shimmer 2s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}