@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap";:root{--color-bone:#f5f1eb;--color-oyster:#efe7dd;--color-charcoal:#2a2423;--color-espresso:#4d4240;--color-rose-quartz:#eab8b1;--color-dusty-pink:#d48c85;--color-tiffany-aqua:#70d1bb;--color-gloss:#fff6;--bg-primary:var(--color-bone);--bg-secondary:var(--color-oyster);--text-primary:var(--color-charcoal);--text-secondary:var(--color-espresso);--accent-primary:var(--color-dusty-pink);--accent-secondary:var(--color-tiffany-aqua);--border-color:#00000014;--font-serif:"Playfair Display", serif;--font-sans:"Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;--radius-sm:8px;--radius-md:12px;--radius-lg:24px;--radius-full:9999px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-xxl:48px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);text-transform:uppercase;color:var(--text-primary);margin-bottom:var(--spacing-sm);letter-spacing:-.03em;font-weight:800}p{color:var(--text-secondary);font-weight:400}a{color:var(--text-primary);text-decoration:none;transition:color .3s}a:hover{color:var(--accent-primary)}.app-container{background-color:var(--bg-primary);background-image:radial-gradient(circle at 50% 0,#d48c8514 0%,#0000 60%);background-size:200% 200%;flex-direction:column;max-width:480px;min-height:100vh;margin:0 auto;animation:15s ease-in-out infinite alternate subtle-light-shift;display:flex;position:relative;box-shadow:0 0 40px #0000000d}@keyframes subtle-light-shift{0%{background-position:0 0}to{background-position:100% 100%}}.main-content{padding:var(--spacing-lg);flex:1;padding-bottom:100px;overflow-y:auto}.video-background{object-fit:cover;z-index:0;opacity:.8;width:100%;height:100%;position:absolute;top:0;left:0}.video-overlay{z-index:1;background:linear-gradient(#f5f1eb33 0%,#f5f1eb 100%);width:100%;height:100%;position:absolute;top:0;left:0}.content-layer{z-index:2;flex-direction:column;height:100%;display:flex;position:relative}.text-serif{font-family:var(--font-serif);text-transform:none;letter-spacing:0}.text-sans-bold{font-family:var(--font-sans);font-weight:900}.text-accent{color:var(--accent-primary)}.text-tiffany{color:var(--color-tiffany-aqua)}.text-dusty{color:var(--color-dusty-pink)}.text-balance{text-wrap:balance}.glass-panel{-webkit-backdrop-filter:blur(16px);background:#ffffff80;border:1px solid #ffffffb3;box-shadow:0 10px 40px #00000008}.btn-primary{background:var(--color-charcoal);color:#fff;border-radius:var(--radius-sm);padding:var(--spacing-md) var(--spacing-xl);font-family:var(--font-sans);text-transform:uppercase;letter-spacing:1px;cursor:pointer;border:none;width:100%;font-size:.85rem;font-weight:700;transition:all .3s;position:relative;overflow:hidden}.btn-primary:after{content:"";background:linear-gradient(90deg,#fff0 0%,#fff3 50%,#fff0 100%);width:50%;height:100%;animation:4s infinite shimmer;position:absolute;top:0;left:-100%;transform:skew(-20deg)}.btn-primary:hover{background:#000;transform:translateY(-2px);box-shadow:0 10px 20px #00000026}.btn-outline{color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:var(--spacing-md) var(--spacing-xl);font-family:var(--font-sans);cursor:pointer;background-color:#0000;justify-content:space-between;align-items:center;width:100%;font-weight:500;transition:all .3s;display:flex}.btn-outline:hover{border-color:var(--color-charcoal);background-color:#00000008;transform:translateY(-1px)}.btn-outline.selected{border-color:var(--color-dusty-pink);background-color:#e6c5c026;animation:2.5s cubic-bezier(.4,0,.2,1) infinite emotionalPulse;transform:translateY(-1px);box-shadow:0 4px 20px #c49a9640,inset 0 0 10px #c49a961a}@keyframes emotionalPulse{0%{border-color:var(--color-dusty-pink);box-shadow:0 4px 20px #c49a9640,inset 0 0 10px #c49a961a}50%{border-color:#d1a8a4;box-shadow:0 4px 25px #c49a9673,inset 0 0 15px #c49a9640}to{border-color:var(--color-dusty-pink);box-shadow:0 4px 20px #c49a9640,inset 0 0 10px #c49a961a}}.premium-card{border-radius:var(--radius-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-md);background-color:#fffc;transition:transform .3s,box-shadow .3s;box-shadow:0 4px 15px #00000008}.premium-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000000f}.fade-in{animation:.8s forwards fadeIn}.slide-up{animation:.6s cubic-bezier(.16,1,.3,1) forwards slideUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{left:-100%}20%{left:200%}to{left:200%}}@keyframes aqua-pulse-glow{0%{box-shadow:0 0 #70d1bb80}70%{box-shadow:0 0 0 10px #70d1bb00}to{box-shadow:0 0 #70d1bb00}}.pulse-dot{background-color:var(--color-tiffany-aqua);width:8px;height:8px;box-shadow:0 0 8px var(--color-tiffany-aqua);border-radius:50%;animation:2s infinite aqua-pulse-glow}.social-popup{-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-full);opacity:0;z-index:50;pointer-events:none;background:#fffffff2;border:1px solid #0000000d;align-items:center;gap:12px;width:max-content;max-width:90%;padding:12px 20px;transition:all .5s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;bottom:30px;left:50%;transform:translate(-50%)translateY(20px);box-shadow:0 10px 30px #00000014}.social-popup.visible{opacity:1;transform:translate(-50%)translateY(0)}.social-popup p{color:var(--text-primary);margin:0;font-size:.8rem;font-weight:500}.particle{background:var(--color-rose-quartz);filter:blur(12px);opacity:.6;border-radius:50%;animation:12s cubic-bezier(.4,0,.2,1) infinite float;position:absolute}.particle.aqua{background:var(--color-tiffany-aqua);box-shadow:0 0 30px var(--color-tiffany-aqua);opacity:.3}@keyframes float{0%{opacity:.6;transform:translateY(0)scale(1)translate(0)}50%{opacity:.2;transform:translateY(-120px)scale(1.3)translate(20px)}to{opacity:0;transform:translateY(-200px)scale(1)translate(-10px)}}.text-gradient{background:linear-gradient(135deg, var(--color-charcoal) 0%, var(--color-dusty-pink) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.package-card-wrapper{margin-bottom:var(--spacing-md);position:relative}.popular-banner{background-color:var(--color-dusty-pink);color:#fff;font-size:.75rem;font-family:var(--font-sans);text-transform:uppercase;letter-spacing:2px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;text-align:center;width:100%;padding:6px 12px;font-weight:700}.package-card{border-radius:var(--radius-lg);padding:var(--spacing-md);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#2a242366;border:1px solid #ffffff14;justify-content:space-between;align-items:center;transition:all .3s;display:flex;position:relative}.package-card-wrapper.popular .package-card{border-top-color:#0000;border-top-left-radius:0;border-top-right-radius:0}.package-card.selected{border-color:var(--color-dusty-pink);background:#d48c8526;box-shadow:0 4px 20px #c49a9633}.gold-text{background:linear-gradient(135deg,#fff1b0 0%,#d4af37 50%,#b8860b 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.testimonial-card{border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-md);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#2a242380;border:1px solid #ffffff0d}.grain-overlay{pointer-events:none;z-index:5;opacity:.35;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");width:100%;height:100%;animation:8s steps(10,end) infinite noise-shift;position:absolute;top:0;left:0}@keyframes noise-shift{0%{transform:translate(0)}10%{transform:translate(-2%,-2%)}20%{transform:translate(-4%,2%)}30%{transform:translate(2%,-4%)}40%{transform:translate(-2%,4%)}50%{transform:translate(4%,-2%)}60%{transform:translate(-4%,-4%)}70%{transform:translate(2%,2%)}80%{transform:translate(-2%,-2%)}90%{transform:translate(4%,4%)}to{transform:translate(0)}}.progress-container{background:var(--border-color);border-radius:var(--radius-full);width:100%;height:4px;margin-bottom:var(--spacing-xl);position:relative;overflow:hidden}.liquid-progress{border-radius:var(--radius-full);background:linear-gradient(90deg, #3d3432 0%, #876763 50%, var(--color-dusty-pink) 100%);height:100%;transition:width 1s cubic-bezier(.25,1,.5,1);position:relative;box-shadow:0 0 12px #c49a9699}.liquid-progress:after{content:"";background:linear-gradient(90deg,#0000,#fff9,#0000);animation:2s linear infinite glossy-shimmer;position:absolute;inset:0}@keyframes glossy-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.streak-glow-card{border:1px solid #eab8b133;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative}.streak-glow-card:before{content:"";background:linear-gradient(135deg, var(--color-rose-quartz), var(--color-tiffany-aqua));border-radius:inherit;z-index:-1;opacity:.15;filter:blur(8px);transition:opacity .4s;position:absolute;inset:-2px}.streak-glow-card:hover:before{opacity:.35;filter:blur(12px)}.hydration-ring-container{justify-content:center;align-items:center;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);display:inline-flex;position:relative}.hydration-ring-container:active{transform:scale(.92)}.liquid-bubble{pointer-events:none;background:#70d1bb66;border-radius:50%;animation:1.8s ease-out infinite bubble-up;position:absolute}@keyframes bubble-up{0%{opacity:0;transform:translateY(10px)scale(.5)}50%{opacity:.8}to{opacity:0;transform:translateY(-30px)scale(1.2)}}.slider-container{border-radius:var(--radius-lg);-webkit-user-select:none;user-select:none;border:1px solid #fff6;width:100%;height:280px;position:relative;overflow:hidden;box-shadow:0 12px 30px #00000014}.slider-before,.slider-after{width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.slider-after{z-index:10}.slider-handle{z-index:20;cursor:ew-resize;background:#fff;justify-content:center;align-items:center;width:2px;display:flex;position:absolute;top:0;bottom:0;box-shadow:0 0 10px #0000004d}.slider-handle-button{border:1px solid var(--border-color);width:36px;height:36px;color:var(--text-primary);background:#fff;border-radius:50%;justify-content:center;align-items:center;font-size:.8rem;font-weight:700;display:flex;box-shadow:0 4px 10px #00000026}.editorial-timeline{padding-left:28px;position:relative}.editorial-timeline:before{content:"";background:var(--border-color);width:1.5px;position:absolute;top:4px;bottom:4px;left:8px}.timeline-dot{background:var(--bg-primary);border:2px solid var(--text-secondary);border-radius:50%;width:11px;height:11px;transition:all .3s;position:absolute;left:3px}.timeline-dot.active{border-color:var(--color-tiffany-aqua);background:var(--color-tiffany-aqua);box-shadow:0 0 8px var(--color-tiffany-aqua)}.timeline-item{margin-bottom:24px;position:relative}.timeline-item:last-child{margin-bottom:0}.trend-bar-container{border-radius:var(--radius-full);background:#00000008;height:8px;position:relative;overflow:hidden}.trend-bar{border-radius:var(--radius-full);height:100%;transition:width 1.2s cubic-bezier(.16,1,.3,1)}.glow-text-gold{color:#d4af37;text-shadow:0 0 8px #d4af3740}.tutorial-highlight-ring{position:relative}.tutorial-highlight-ring:after{content:"";border:2px dashed var(--color-tiffany-aqua);border-radius:inherit;box-shadow:0 0 12px var(--color-tiffany-aqua), inset 0 0 8px var(--color-tiffany-aqua);pointer-events:none;z-index:999;animation:2s infinite tutorial-pulse;position:absolute;inset:-6px}@keyframes tutorial-pulse{0%{opacity:.9;transform:scale(1)}50%{opacity:.4;transform:scale(1.04)}to{opacity:.9;transform:scale(1)}}.tutorial-target-glow{transition:all .3s;animation:2s ease-in-out infinite target-pulse;border-color:var(--color-tiffany-aqua)!important;box-shadow:0 0 20px #70d1bba6!important}@keyframes target-pulse{0%{box-shadow:0 0 10px #70d1bb66}50%{box-shadow:0 0 25px #70d1bbcc}to{box-shadow:0 0 10px #70d1bb66}}@keyframes slide-up-banner{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-ring{0%{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.02)}to{opacity:.3;transform:scale(1)}}@keyframes task-complete-pop{0%{transform:scale(1)}40%{transform:scale(1.18)}70%{transform:scale(.94)}to{transform:scale(1)}}@keyframes milestone-shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes celebration-float{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(-80px)rotate(15deg)}}@keyframes checkmark-draw{0%{stroke-dashoffset:40px;opacity:0}to{stroke-dashoffset:0;opacity:1}}@keyframes glow-pulse-pink{0%{box-shadow:0 0 #eab8b166}70%{box-shadow:0 0 0 10px #eab8b100}to{box-shadow:0 0 #eab8b100}}@keyframes glow-pulse-aqua{0%{box-shadow:0 0 #70d1bb66}70%{box-shadow:0 0 0 10px #70d1bb00}to{box-shadow:0 0 #70d1bb00}}@keyframes glow-pulse-gold{0%{box-shadow:0 0 #d4af3766}70%{box-shadow:0 0 0 10px #d4af3700}to{box-shadow:0 0 #d4af3700}}.task-completed-animate{animation:.4s cubic-bezier(.36,.07,.19,.97) task-complete-pop}.water-milestone-glow{animation:.8s ease-out glow-pulse-aqua}.shimmer-text{background:linear-gradient(90deg, var(--color-dusty-pink) 0%, #fff 25%, var(--color-tiffany-aqua) 50%, #fff 75%, var(--color-dusty-pink) 100%);-webkit-text-fill-color:transparent;background-size:200%;-webkit-background-clip:text;background-clip:text;animation:3s linear infinite milestone-shimmer}@keyframes nav-shimmer{0%{background-position:-100% 0}50%{background-position:100% 0}to{background-position:-100% 0}}@keyframes tab-enter{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes nav-press{0%{transform:scale(1)}50%{transform:scale(.85)}to{transform:scale(1.06)}}@keyframes dot-pop{0%{opacity:0;transform:scale(0)translate(-50%)}60%{opacity:1;transform:scale(1.4)translate(-50%)}to{opacity:1;transform:scale(1)translate(-50%)}}.modal-backdrop{-webkit-backdrop-filter:blur(8px);z-index:1000;background:#1a1615b3;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-content{z-index:1001;max-height:90vh;position:relative;overflow-y:auto}@keyframes spin{to{transform:rotate(360deg)}}@keyframes badge-shimmer{0%{opacity:0;transform:translate(-100%)}50%{opacity:1}to{opacity:0;transform:translate(100%)}}@keyframes float-particles{0%{opacity:0;transform:translateY(0)scale(1)}50%{opacity:.8}to{opacity:0;transform:translateY(-30px)scale(.5)}}@keyframes badge-reveal-scale{0%{opacity:0;filter:blur(10px);transform:scale(.8)}50%{filter:blur();transform:scale(1.05)}to{opacity:1;filter:blur();transform:scale(1)}}@keyframes subtle-pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.badge-newly-unlocked-overlay{z-index:9999;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:#120f0ed9;flex-direction:column;justify-content:center;align-items:center;animation:.5s ease-out fade-in;display:flex;position:fixed;inset:0}.badge-reveal-container{flex-direction:column;align-items:center;animation:1.2s cubic-bezier(.16,1,.3,1) forwards badge-reveal-scale;display:flex;position:relative}.badge-image-container{border-radius:50%;justify-content:center;align-items:center;width:220px;height:220px;display:flex;position:relative}.rarity-glow-COMMON{box-shadow:0 0 40px #eab8b14d}.rarity-glow-RARE{box-shadow:0 0 60px #70d1bb66}.rarity-glow-EPIC{box-shadow:0 0 80px #b388ff80}.rarity-glow-LEGENDARY{box-shadow:0 0 100px #d4af3799}.badge-image{object-fit:cover;z-index:2;border-radius:50%;width:100%;height:100%;transition:transform .3s;position:relative}.badge-image:hover{transform:scale(1.05)}.badge-grid-item{cursor:pointer;flex-direction:column;align-items:center;transition:transform .3s cubic-bezier(.16,1,.3,1);display:flex;position:relative}.badge-grid-item:active{transform:scale(.95)}.badge-grid-item.locked{opacity:.4;filter:grayscale(80%)blur(1px)}.badge-grid-item.locked:hover{transform:none}.badge-lock-icon{z-index:5;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;border-radius:50%;padding:8px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
