@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Dancing+Script:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700;800;900&family=Great+Vibes&display=swap";:root{--butter-yellow: #F7DC6F;--soft-cream: #FFF9C4;--warm-honey: #FFE082;--deep-gold: #F9A825;--golden-shimmer: #FFD700;--soft-white: #FFFEF7;--warm-white: #FFF8E1;--light-peach: #FFECB3;--rose-pink: #FFB6C1;--soft-coral: #FFAB91;--lavender: #E1BEE7;--charcoal: #2D3436;--dark-brown: #5D4037;--warm-gray: #6D4C41;--glass-yellow: rgba(247, 220, 111, .15);--glass-cream: rgba(255, 249, 196, .2);--glass-white: rgba(255, 255, 255, .15)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{margin:0;padding:0;overflow:hidden;height:100vh;height:100dvh;width:100vw;width:100dvw}body{margin:0;padding:0;font-family:Poppins,Segoe UI,system-ui,-apple-system,sans-serif;background:linear-gradient(135deg,#fff8e1,#ffecb3,#ffe082 30%,#fff9c4,#ffe0b2 70%,#ffecb3,#fff8e1);background-size:400% 400%;animation:butterGradient 20s ease infinite,fadeIn .8s ease-out forwards;text-align:center;color:var(--charcoal);scroll-behavior:smooth;overflow:hidden;height:100vh;height:100dvh;width:100vw;width:100dvw;position:fixed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:pan-y}@keyframes butterGradient{0%{background-position:0% 50%}25%{background-position:50% 100%}50%{background-position:100% 50%}75%{background-position:50% 0%}to{background-position:0% 50%}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;background-image:radial-gradient(2px 2px at 10% 20%,rgba(255,215,0,.9),transparent),radial-gradient(3px 3px at 25% 35%,rgba(255,215,0,.7),transparent),radial-gradient(2px 2px at 40% 15%,rgba(255,236,179,.8),transparent),radial-gradient(3px 3px at 55% 45%,rgba(255,215,0,.6),transparent),radial-gradient(2px 2px at 70% 25%,rgba(255,249,196,.9),transparent),radial-gradient(3px 3px at 85% 55%,rgba(255,215,0,.7),transparent),radial-gradient(2px 2px at 15% 65%,rgba(255,224,130,.8),transparent),radial-gradient(3px 3px at 30% 80%,rgba(255,215,0,.6),transparent),radial-gradient(2px 2px at 60% 70%,rgba(255,236,179,.9),transparent),radial-gradient(3px 3px at 80% 85%,rgba(255,215,0,.7),transparent),radial-gradient(2px 2px at 95% 40%,rgba(255,249,196,.8),transparent),radial-gradient(3px 3px at 5% 90%,rgba(255,215,0,.6),transparent);background-size:100% 100%;animation:sparkleFloat 8s ease-in-out infinite}@keyframes sparkleFloat{0%,to{opacity:.6;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-15px) scale(1.1)}}body:after{content:"";position:fixed;top:-10%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(255,215,0,.4) 0%,rgba(255,224,130,.2) 30%,rgba(255,236,179,.1) 50%,transparent 70%);border-radius:50%;pointer-events:none;z-index:0;animation:sunGlow 10s ease-in-out infinite}@keyframes sunGlow{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.3);opacity:.9}}#root{width:100vw;width:100dvw;height:100vh;height:100dvh;overflow:hidden;margin:0;padding:0;position:relative;z-index:1}*{scrollbar-width:thin;scrollbar-color:var(--butter-yellow) var(--soft-cream)}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:var(--soft-cream);border-radius:10px}*::-webkit-scrollbar-thumb{background:linear-gradient(var(--butter-yellow),var(--warm-honey));border-radius:10px}.app{position:fixed;top:0;left:0;width:100vw;width:100dvw;height:100vh;height:100dvh;overflow:hidden;margin:0;padding:0}.page{height:100vh;height:100dvh;width:100vw;width:100dvw;position:absolute;top:0;left:0;opacity:0;visibility:hidden;transform:translate(100%);transition:all .6s cubic-bezier(.22,1,.36,1);padding:env(safe-area-inset-top,20px) env(safe-area-inset-right,20px) env(safe-area-inset-bottom,20px) env(safe-area-inset-left,20px);display:flex;flex-direction:column;justify-content:center;align-items:center;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}.page.active{opacity:1;visibility:visible;transform:translate(0);position:relative}.page.exit-left{transform:translate(-100%);opacity:0}.test-btn{position:fixed;left:16px;top:16px;z-index:20;background:#4caf50;color:#fff;border:none;padding:10px 14px;border-radius:999px;cursor:pointer;font-size:12px;box-shadow:0 4px 12px #4caf504d;transition:transform .2s}.test-btn:hover{transform:scale(1.05)}.hero{padding:10px 20px;max-width:800px;margin:0 auto;text-align:center}.hero h1{font-size:2.2rem;margin-bottom:10px;font-weight:700;color:#333;line-height:1.2}.hero p{font-size:1rem;color:#555;font-style:italic;margin:0}.highlight{background:linear-gradient(45deg,#e91e63,#ff6b9d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}.teaser{padding:10px 20px;max-width:700px;margin:0 auto;text-align:center}#teaserHeading{font-size:1.3rem;background:linear-gradient(45deg,#e91e63,#9c27b0,#e91e63);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradientShift 4s ease infinite;margin:0 0 8px;line-height:1.3}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.teaser-hint{font-size:.9rem;color:#666;font-style:italic;opacity:.8;margin:0}#surpriseBtn{background:#e91e63;color:#fff;border:none;padding:12px 30px;font-size:1.1rem;border-radius:30px;cursor:pointer;margin:20px;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;box-shadow:0 12px 24px #e91e6340}#surpriseBtn:hover{transform:translateY(-2px) scale(1.05)}#surpriseBtn:disabled{opacity:.6;cursor:not-allowed;filter:grayscale(10%)}#surpriseBtn:not(:disabled){animation:pulse 2s ease-in-out infinite}.celebrate-btn{background:linear-gradient(135deg,#e91e63,#ff6b9d);color:#fff;border:none;padding:14px 36px;font-size:1.2rem;font-weight:600;border-radius:50px;cursor:pointer;margin:15px auto;transition:all .3s cubic-bezier(.22,1,.36,1);box-shadow:0 12px 30px #e91e6359;position:relative;overflow:hidden}.celebrate-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.celebrate-btn:hover:before{width:300px;height:300px}.celebrate-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 40px #e91e6373}.celebrate-btn:disabled{opacity:.6;cursor:not-allowed;filter:grayscale(20%);background:linear-gradient(135deg,#999,#aaa)}.celebrate-btn:not(:disabled){animation:pulse-celebrate 2s ease-in-out infinite}@keyframes pulse-celebrate{0%,to{box-shadow:0 12px 30px #e91e6359}50%{box-shadow:0 16px 40px #e91e6380}}@keyframes pulse{0%,to{box-shadow:0 12px 24px #e91e6340}50%{box-shadow:0 16px 32px #e91e6366}}.back-btn{position:fixed;top:80px;left:20px;background:#ffffffe6;color:#e91e63;border:2px solid #e91e63;padding:10px 20px;font-size:1rem;border-radius:25px;cursor:pointer;z-index:15;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 12px #0000001a}.back-btn:hover{background:#e91e63;color:#fff;transform:translate(-5px);box-shadow:0 6px 16px #e91e634d}.page-nav-btn{background:#e91e63;color:#fff;border:none;padding:14px 35px;font-size:1.2rem;border-radius:30px;cursor:pointer;margin-top:30px;transition:all .3s ease;box-shadow:0 8px 20px #e91e634d}.page-nav-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 28px #e91e6366}.final{text-align:center;padding:40px 20px;max-width:700px;margin:40px auto 20px}.final-message{font-size:1.4rem;background:linear-gradient(45deg,#e91e63,#ff6b9d,#e91e63);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradientShift 4s ease infinite;margin-bottom:8px;margin-top:15px;font-weight:700}.final-subtitle{font-size:.85rem;color:#666;font-style:italic}@media(max-width:600px){.hero h1{font-size:2.2rem;padding:0 10px}.hero p{font-size:1rem;padding:0 10px}.back-btn{top:70px;left:15px;padding:8px 16px;font-size:.9rem}.page-nav-btn{font-size:1.1rem;padding:12px 30px}#teaserHeading{font-size:1.3rem;padding:0 15px}.teaser-hint{padding:0 15px}#surpriseBtn{font-size:1rem;padding:10px 25px}.test-btn{left:10px;top:10px;padding:8px 12px;font-size:11px}.final{padding:30px 15px}.final-message{font-size:1.6rem}.final-subtitle{font-size:1rem}}@media(min-width:601px)and (max-width:1024px){.hero h1{font-size:2.5rem}.page{padding:15px}}@media(min-width:1400px){.hero h1{font-size:3.2rem}.hero p{font-size:1.25rem}}@media(hover:none)and (pointer:coarse){button{min-height:44px;min-width:44px}.back-btn,.page-nav-btn,#surpriseBtn{padding:14px 30px}}@supports (-webkit-touch-callout: none){.app,.page,body{height:-webkit-fill-available}}@media(max-width:932px)and (orientation:landscape){.page{padding:20px 10px 10px;justify-content:flex-start}.hero{padding:10px}.hero h1{font-size:2rem;margin-bottom:10px}.hero p{font-size:1rem}}@media only screen and (max-width:428px){.page{padding:12px;padding-top:max(env(safe-area-inset-top,15px),15px);padding-bottom:max(env(safe-area-inset-bottom,15px),15px)}.hero{padding:8px 15px}.hero h1{font-size:1.8rem;line-height:1.2;margin-bottom:8px}.hero p{font-size:.95rem}.teaser{padding:8px 15px}#teaserHeading{font-size:1.1rem;margin-bottom:6px}.teaser-hint{font-size:.85rem}.celebrate-btn,.page-nav-btn{padding:12px 28px;font-size:1.1rem;margin:12px auto}.back-btn{top:max(env(safe-area-inset-top,12px),70px);left:12px;padding:8px 16px;font-size:.9rem}}@media only screen and (max-width:375px){.page{padding:10px;padding-top:max(env(safe-area-inset-top,12px),12px);padding-bottom:max(env(safe-area-inset-bottom,12px),12px)}.hero{padding:6px 12px}.hero h1{font-size:1.6rem;margin-bottom:6px}.hero p{font-size:.9rem}.teaser{padding:6px 12px}#teaserHeading{font-size:1rem;margin-bottom:5px}.teaser-hint{font-size:.8rem}.celebrate-btn,.page-nav-btn{padding:11px 24px;font-size:1rem;margin:10px auto}}.celebration-page{position:fixed;top:0;left:0;width:100vw;width:100dvw;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0;box-sizing:border-box}.floating-hearts-bg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.heart-float{position:absolute;font-size:1.5rem;opacity:.4;animation:floatHeart linear infinite;color:gold;filter:drop-shadow(0 0 8px rgba(255,215,0,.5))}@keyframes floatHeart{0%{bottom:-10%;transform:translate(0) rotate(0);opacity:.4}50%{transform:translate(30px) rotate(180deg);opacity:.6}to{bottom:110%;transform:translate(-30px) rotate(360deg);opacity:0}}.slides-container{position:relative;z-index:1;max-width:600px;width:100%;padding:45px;background:#fff9c466;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:35px;border:2px solid rgba(255,215,0,.4);box-shadow:0 25px 70px #f9a82540,0 0 50px #ffd70026,inset 0 1px #ffffff80}.slide-content{text-align:center;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center}.slide-icon{font-size:4.5rem;margin-bottom:20px;animation:iconPulse 2s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(255,215,0,.5))}@keyframes iconPulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.slide-text{font-family:Dancing Script,cursive;font-size:2rem;color:var(--dark-brown, #5D4037);margin-bottom:30px;line-height:1.4;font-weight:600}.question-options{display:flex;gap:20px;margin-top:20px}.option-button{padding:16px 45px;font-family:Poppins,sans-serif;font-size:1.2rem;font-weight:700;border:none;border-radius:50px;cursor:pointer;transition:all .4s cubic-bezier(.22,1,.36,1);box-shadow:0 8px 25px #00000026;position:relative;overflow:hidden}.option-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s ease}.option-button:hover:before{left:100%}.yes-button{background:linear-gradient(135deg,var(--butter-yellow, #F7DC6F),var(--golden-shimmer, #FFD700));color:var(--dark-brown, #5D4037)}.yes-button:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 15px 40px #f9a82566,0 0 30px #ffd7004d}.no-button{background:linear-gradient(135deg,#ffb6c1,#ff69b4);color:#fff}.no-button:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 15px 40px #ff69b466}.next-button{padding:16px 55px;font-family:Poppins,sans-serif;font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,var(--butter-yellow, #F7DC6F),var(--deep-gold, #F9A825));color:var(--dark-brown, #5D4037);border:none;border-radius:50px;cursor:pointer;box-shadow:0 10px 35px #f9a82566,0 0 25px #ffd70033;transition:all .4s cubic-bezier(.22,1,.36,1);margin-top:25px;position:relative;overflow:hidden}.next-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transition:left .5s ease}.next-button:hover:before{left:100%}.next-button:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 15px 45px #f9a82580,0 0 35px #ffd7004d}.slide-progress{display:flex;justify-content:center;gap:12px;margin-top:35px}.progress-dot{width:14px;height:14px;border-radius:50%;background:#ffd7004d;border:2px solid rgba(255,215,0,.5);transition:all .4s ease}.progress-dot.active{background:linear-gradient(135deg,var(--golden-shimmer, #FFD700),var(--deep-gold, #F9A825));transform:scale(1.3);box-shadow:0 0 20px #ffd70099}.progress-dot.completed{background:var(--butter-yellow, #F7DC6F)}.celebration-buttons{position:relative;z-index:10;max-width:800px;width:100%;padding:15px 25px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;margin-bottom:15px}.celebration-title{font-family:Great Vibes,cursive;font-size:2.5rem;background:linear-gradient(45deg,var(--deep-gold, #F9A825),var(--golden-shimmer, #FFD700),var(--butter-yellow, #F7DC6F),var(--golden-shimmer, #FFD700));background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:goldShimmer 3s ease-in-out infinite;margin-bottom:8px;margin-top:0;filter:drop-shadow(0 0 15px rgba(249,168,37,.4))}.celebration-subtitle{font-family:Poppins,sans-serif;font-size:1rem;color:var(--warm-gray, #6D4C41);margin-bottom:20px}.buttons-grid{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:20px;width:100%;max-width:400px}.action-button{padding:14px 30px;font-family:Poppins,sans-serif;font-size:1rem;font-weight:700;border:none;border-radius:60px;cursor:pointer;transition:all .4s cubic-bezier(.68,-.55,.265,1.55);box-shadow:0 10px 30px #00000026;color:var(--dark-brown, #5D4037);position:relative;overflow:hidden;width:100%;min-width:280px;max-width:350px}.action-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#fff6;transform:translate(-50%,-50%);transition:width .6s,height .6s}.action-button:hover:before{width:400px;height:400px}.action-button:hover:not(:disabled){transform:translateY(-5px) scale(1.05);box-shadow:0 20px 50px #f9a82559}.action-button:disabled{cursor:not-allowed;opacity:.5}.lights-button{background:linear-gradient(135deg,var(--butter-yellow, #F7DC6F),var(--golden-shimmer, #FFD700));box-shadow:0 0 30px #ffd70066}.lights-button:hover:not(:disabled){box-shadow:0 0 50px #ffd70099}.decorate-button{background:linear-gradient(135deg,var(--warm-honey, #FFE082),var(--butter-yellow, #F7DC6F))}.balloons-button{background:linear-gradient(135deg,#ffb6c1,pink)}.message-button{background:linear-gradient(135deg,var(--deep-gold, #F9A825),var(--golden-shimmer, #FFD700));animation:messageGlow 2s ease-in-out infinite}@keyframes messageGlow{0%,to{box-shadow:0 10px 30px #f9a82566}50%{box-shadow:0 10px 45px #f9a82599}}.string-lights{position:absolute;top:0;left:0;width:100%;height:50px;z-index:10}.light{position:absolute;top:15px;width:18px;height:18px;border-radius:50%;animation:twinkle 1.5s ease-in-out infinite;box-shadow:0 0 20px currentColor}.light-0{background-color:gold;color:gold}.light-1{background-color:#f7dc6f;color:#f7dc6f}.light-2{background-color:#ffe082;color:#ffe082}.light-3{background-color:#f9a825;color:#f9a825}@keyframes twinkle{0%,to{opacity:1;transform:scale(1);box-shadow:0 0 20px currentColor}50%{opacity:.4;transform:scale(.85);box-shadow:0 0 8px currentColor}}.decorations-container{position:relative;width:100%;max-width:1200px;flex:1;display:flex;flex-direction:column;align-items:center;z-index:5;pointer-events:none;padding-bottom:20px}.bunting{position:absolute;top:55px;left:0;width:100%;padding:8px 15px;z-index:6;display:flex;justify-content:center;align-items:center}.bunting-string{display:flex;justify-content:center;align-items:flex-start;gap:8px;flex-wrap:nowrap}.bunting-flag{width:0;height:0;border-left:22px solid transparent;border-right:22px solid transparent;position:relative;display:flex;align-items:center;justify-content:center;font-family:Poppins,sans-serif;font-weight:700;font-size:1.1rem;color:var(--dark-brown, #5D4037);padding-top:35px;animation:sway 3s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.flag-0{border-top:40px solid var(--butter-yellow, #F7DC6F)}.flag-1{border-top:40px solid var(--warm-honey, #FFE082);animation-delay:.2s}.flag-2{border-top:40px solid var(--golden-shimmer, #FFD700);animation-delay:.4s}@keyframes sway{0%,to{transform:rotate(0)}50%{transform:rotate(5deg)}}.decoration-balloons{position:absolute;bottom:200px;left:0;width:100%;height:220px;z-index:3;display:flex;align-items:flex-end;justify-content:center}.balloon{position:absolute;bottom:0;animation:floatUp 4s ease-in-out infinite;transform-origin:center bottom}.balloon-body{width:65px;height:85px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.6),transparent 60%);border-radius:50%/60% 60% 40% 40%;position:relative;box-shadow:inset -10px -10px 25px #0000001a,0 8px 25px #0003;transition:transform .3s ease}.balloon:hover .balloon-body{transform:scale(1.1)}.balloon-0 .balloon-body{background-color:gold;background-image:radial-gradient(circle at 35% 30%,rgba(255,255,255,.6),transparent 60%)}.balloon-1 .balloon-body{background-color:#f7dc6f;background-image:radial-gradient(circle at 35% 30%,rgba(255,255,255,.6),transparent 60%)}.balloon-2 .balloon-body{background-color:#ffb6c1;background-image:radial-gradient(circle at 35% 30%,rgba(255,255,255,.6),transparent 60%)}.balloon-string{width:2px;height:90px;background:linear-gradient(to bottom,#0000004d,#0000001a);margin:0 auto;position:relative}@keyframes floatUp{0%,to{transform:translateY(0) translate(0) rotate(0)}25%{transform:translateY(-35px) translate(15px) rotate(4deg)}50%{transform:translateY(-55px) translate(-12px) rotate(-3deg)}75%{transform:translateY(-35px) translate(12px) rotate(3deg)}}.cake-container{position:absolute;bottom:25px;left:50%;transform:translate(-50%);z-index:4;opacity:0}.cake{position:relative;display:flex;flex-direction:column;align-items:center}.cake-layer{border-radius:12px;position:relative;box-shadow:0 6px 15px #0003}.layer-1{width:130px;height:45px;background:linear-gradient(135deg,var(--butter-yellow, #F7DC6F),var(--warm-honey, #FFE082));z-index:3}.layer-2{width:150px;height:45px;background:linear-gradient(135deg,var(--soft-cream, #FFF9C4),var(--butter-yellow, #F7DC6F));z-index:2}.layer-3{width:170px;height:45px;background:linear-gradient(135deg,var(--warm-white, #FFF8E1),var(--soft-cream, #FFF9C4));z-index:1}.cake-candles{display:flex;gap:15px;position:absolute;top:-50px;z-index:4}.candle{display:flex;flex-direction:column;align-items:center}.flame{width:12px;height:18px;background:linear-gradient(to top,#ff9500,gold,#fe0);border-radius:50%/60% 60% 40% 40%;animation:flicker .3s ease-in-out infinite alternate;box-shadow:0 0 15px #ffd700e6}@keyframes flicker{0%{transform:scaleY(1) scaleX(1)}to{transform:scaleY(1.1) scaleX(.9)}}.wick{width:4px;height:22px;background:var(--deep-gold, #F9A825);margin-top:-3px}@media(max-width:768px){.celebration-title{font-size:2rem}.slide-text{font-size:1.6rem}.action-button{padding:15px 25px;font-size:.95rem}}@media(max-width:480px){.celebration-page{padding:15px}.slides-container{padding:25px 20px}.celebration-title{font-size:1.8rem}.slide-text{font-size:1.3rem}.slide-icon{font-size:3.5rem}.option-button{padding:14px 35px;font-size:1.05rem}.next-button{padding:14px 45px;font-size:1.1rem}.bunting-flag{border-left:18px solid transparent;border-right:18px solid transparent;font-size:.9rem}}@media(max-width:375px){.celebration-title{font-size:1.6rem}.slide-text{font-size:1.2rem}.action-button{padding:13px 22px;font-size:.9rem}}@supports (-webkit-touch-callout: none){.celebration-page{height:-webkit-fill-available}}.message-page{position:fixed;top:0;left:0;width:100vw;width:100dvw;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}.message-header{text-align:center;margin-bottom:25px}.message-title{font-family:Great Vibes,cursive;font-size:2.5rem;background:linear-gradient(45deg,var(--deep-gold, #F9A825),var(--golden-shimmer, #FFD700),var(--butter-yellow, #F7DC6F),var(--golden-shimmer, #FFD700));background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:goldShimmer 3s ease-in-out infinite;margin:0;filter:drop-shadow(0 0 15px rgba(249,168,37,.4))}.curtain-container{position:relative;width:100%;max-width:550px;min-height:380px;margin:0 auto}.curtain-rod{position:absolute;top:0;left:50%;transform:translate(-50%);width:105%;height:18px;background:linear-gradient(to bottom,var(--golden-shimmer, #FFD700) 0%,var(--deep-gold, #F9A825) 50%,var(--butter-yellow, #F7DC6F) 100%);border-radius:10px;box-shadow:0 4px 15px #f9a82566,inset 0 2px 4px #ffffff80;z-index:20}.curtain-rod:before,.curtain-rod:after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:22px;height:22px;background:radial-gradient(circle,var(--golden-shimmer, #FFD700),var(--deep-gold, #F9A825));border-radius:50%;box-shadow:0 3px 10px #f9a82580}.curtain-rod:before{left:-8px}.curtain-rod:after{right:-8px}.curtains{position:relative;width:100%;height:350px;margin-top:15px;overflow:hidden;border-radius:0 0 20px 20px}.curtain{position:absolute;top:0;width:52%;height:100%;background:linear-gradient(135deg,var(--deep-gold, #F9A825) 0%,var(--butter-yellow, #F7DC6F) 30%,var(--warm-honey, #FFE082) 50%,var(--butter-yellow, #F7DC6F) 70%,var(--deep-gold, #F9A825) 100%);transition:transform 1.2s cubic-bezier(.22,1,.36,1);z-index:10;box-shadow:4px 0 20px #00000026}.curtain:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0px,rgba(255,255,255,.1) 2px,transparent 4px)}.curtain:after{content:"";position:absolute;top:0;bottom:0;width:40px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08),transparent)}.curtain-left{left:0;border-radius:0 0 0 20px}.curtain-left:after{right:0}.curtain-right{right:0;border-radius:0 0 20px}.curtain-right:after{left:0}.curtains.open .curtain-left{transform:translate(-100%)}.curtains.open .curtain-right{transform:translate(100%)}.curtain-open-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:15;background:#fffffff2;color:var(--dark-brown, #5D4037);border:none;padding:16px 35px;font-family:Dancing Script,cursive;font-size:1.3rem;font-weight:700;border-radius:40px;cursor:pointer;box-shadow:0 8px 30px #0003,0 0 20px #ffd7004d;transition:all .4s ease;animation:pulseButton 2s ease-in-out infinite}@keyframes pulseButton{0%,to{transform:translate(-50%,-50%) scale(1);box-shadow:0 8px 30px #0003}50%{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 12px 40px #f9a82566}}.curtain-open-btn:hover{background:var(--butter-yellow, #F7DC6F);transform:translate(-50%,-50%) scale(1.08)}.curtains.open .curtain-open-btn{opacity:0;visibility:hidden;pointer-events:none}.message-content{position:absolute;inset:0;background:#fff9c4f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:35px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:5;border-radius:0 0 20px 20px}.message-greeting{font-family:Great Vibes,cursive;font-size:2rem;color:var(--deep-gold, #F9A825);margin-bottom:20px;animation:fadeInUp .8s ease .5s both}.message-text{font-family:Dancing Script,cursive;font-size:1.3rem;color:var(--dark-brown, #5D4037);line-height:1.8;max-width:450px;animation:fadeInUp .8s ease .8s both}.message-signature{font-family:Great Vibes,cursive;font-size:1.5rem;color:var(--deep-gold, #F9A825);margin-top:25px;animation:fadeInUp .8s ease 1.1s both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.message-hearts{position:absolute;font-size:1.5rem;opacity:.6;filter:drop-shadow(0 0 8px rgba(255,215,0,.5))}.heart-1{top:15px;left:15px;animation:heartFloat 3s ease-in-out infinite}.heart-2{top:15px;right:15px;animation:heartFloat 3s ease-in-out infinite .5s}.heart-3{bottom:15px;left:15px;animation:heartFloat 3s ease-in-out infinite 1s}.heart-4{bottom:15px;right:15px;animation:heartFloat 3s ease-in-out infinite 1.5s}@keyframes heartFloat{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(10deg)}}.view-gallery-btn{margin-top:35px;padding:16px 45px;font-family:Poppins,sans-serif;font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,var(--butter-yellow, #F7DC6F),var(--deep-gold, #F9A825));color:var(--dark-brown, #5D4037);border:none;border-radius:50px;cursor:pointer;box-shadow:0 10px 35px #f9a82566,0 0 20px #ffd70033;transition:all .4s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}.view-gallery-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s ease}.view-gallery-btn:hover:before{left:100%}.view-gallery-btn:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 15px 45px #f9a82580,0 0 30px #ffd7004d}@media(max-width:600px){.message-title{font-size:2rem}.curtain-container{max-width:95%;min-height:340px}.curtains{height:300px}.message-greeting{font-size:1.7rem}.message-text{font-size:1.15rem;padding:0 10px}.message-signature{font-size:1.3rem}.curtain-open-btn{padding:14px 28px;font-size:1.15rem}.view-gallery-btn{padding:14px 35px;font-size:1rem}}@media(max-width:375px){.message-greeting{font-size:1.5rem}.message-text{font-size:1.05rem}.curtain-container{min-height:300px}.curtains{height:260px}}.gallery-page{position:fixed;top:0;left:0;width:100vw;width:100dvw;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}.gallery-header{text-align:center;margin-bottom:30px;padding-top:60px}.gallery-title{font-family:Great Vibes,cursive;font-size:3rem;background:linear-gradient(45deg,var(--deep-gold, #F9A825),var(--golden-shimmer, #FFD700),var(--butter-yellow, #F7DC6F),var(--golden-shimmer, #FFD700),var(--deep-gold, #F9A825));background-size:300% 300%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:goldShimmer 4s ease-in-out infinite;margin:0;filter:drop-shadow(0 0 20px rgba(249,168,37,.4))}@keyframes goldShimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.gallery-subtitle{font-family:Dancing Script,cursive;font-size:1.3rem;color:var(--warm-gray, #6D4C41);margin-top:10px}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:25px;width:100%;max-width:1200px;padding:20px}.gallery-item{position:relative;border-radius:25px;overflow:hidden;background:#fff9c44d;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:2px solid rgba(255,215,0,.3);box-shadow:0 15px 40px #f9a82533,inset 0 1px #fff6;transition:all .4s cubic-bezier(.22,1,.36,1);cursor:pointer;aspect-ratio:4/3}.gallery-item:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 25px 60px #f9a82559,0 0 40px #ffd70033,inset 0 1px #ffffff80;border-color:#ffd70099}.gallery-item img,.gallery-item video{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.gallery-item:hover img,.gallery-item:hover video{transform:scale(1.1)}.gallery-item:after{content:"";position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,rgba(249,168,37,.3) 0%,transparent 100%);opacity:0;transition:opacity .3s ease}.gallery-item:hover:after{opacity:1}.gallery-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff9c466;border:3px dashed rgba(255,215,0,.5);border-radius:25px;aspect-ratio:4/3;transition:all .3s ease}.gallery-placeholder:hover{background:#ffe08266;border-color:#ffd700b3}.placeholder-icon{font-size:3rem;margin-bottom:15px;filter:drop-shadow(0 0 10px rgba(255,215,0,.5))}.placeholder-text{font-family:Dancing Script,cursive;font-size:1.3rem;color:var(--warm-gray, #6D4C41);text-align:center;padding:0 20px}.lightbox{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all .4s ease}.lightbox.open{opacity:1;visibility:visible}.lightbox-content{max-width:90vw;max-height:90vh;border-radius:20px;box-shadow:0 0 60px #ffd7004d;transform:scale(.9);transition:transform .4s ease}.lightbox.open .lightbox-content{transform:scale(1)}.lightbox-close{position:absolute;top:30px;right:30px;width:50px;height:50px;background:#fff9c44d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,215,0,.4);border-radius:50%;color:var(--golden-shimmer, #FFD700);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.lightbox-close:hover{background:#ffd70066;transform:scale(1.1)}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:55px;height:55px;background:#fff9c44d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,215,0,.4);border-radius:50%;color:var(--golden-shimmer, #FFD700);font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.lightbox-nav:hover{background:#ffd70066;transform:translateY(-50%) scale(1.1)}.lightbox-prev{left:30px}.lightbox-next{right:30px}.video-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;background:#ffd700e6;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--dark-brown, #5D4037);box-shadow:0 0 30px #ffd70099;transition:all .3s ease;z-index:5}.gallery-item:hover .video-indicator{transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 50px #ffd700cc}@media(max-width:768px){.gallery-title{font-size:2.5rem}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;padding:15px}.gallery-header{padding-top:70px}}@media(max-width:480px){.gallery-title{font-size:2rem}.gallery-subtitle{font-size:1.1rem}.gallery-grid{grid-template-columns:1fr;gap:15px;padding:10px}.gallery-item{border-radius:20px}.lightbox-nav{width:45px;height:45px}.lightbox-close{top:20px;right:20px;width:45px;height:45px}}.countdown{padding:25px 30px;max-width:700px;margin:0 auto}.flip-timer{display:flex;justify-content:center;gap:25px;flex-wrap:wrap;perspective:1000px}.digit{display:flex;flex-direction:column;align-items:center;gap:12px}.card{width:95px;height:110px;position:relative;transform-style:preserve-3d;perspective:600px}.card .text{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:Playfair Display,serif;font-size:3.2rem;font-weight:800;background:linear-gradient(180deg,#fff9c4e6,#ffecb3f2,#ffe082e6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 15px 40px #f9a8254d,0 0 30px #ffd70033,inset 0 2px 4px #fff9,inset 0 -2px 4px #0000000d;position:relative;font-variant-numeric:tabular-nums;border:2px solid rgba(255,215,0,.4);color:var(--deep-gold, #F9A825);text-shadow:0 2px 15px rgba(249,168,37,.5);animation:cardGlow 3s ease-in-out infinite}@keyframes cardGlow{0%,to{box-shadow:0 15px 40px #f9a8254d,0 0 30px #ffd70033}50%{box-shadow:0 15px 40px #f9a82566,0 0 50px #ffd70066,0 0 70px #ffd70033}}.card .text:before{content:"";position:absolute;top:50%;left:5%;right:5%;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(249,168,37,.3) 20%,rgba(249,168,37,.3) 80%,transparent 100%);z-index:1}.card.flip .text{animation:flipCard .6s cubic-bezier(.4,0,.2,1)}@keyframes flipCard{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg);box-shadow:0 8px 20px #f9a8254d,0 0 40px #ffd70080}to{transform:rotateX(0)}}.label{font-family:Poppins,sans-serif;font-size:.85rem;text-transform:uppercase;color:var(--dark-brown, #5D4037);font-weight:700;letter-spacing:2px;text-shadow:0 1px 5px rgba(255,224,130,.5)}.birthday-celebration{font-family:Great Vibes,cursive;font-size:3rem;font-weight:400;background:linear-gradient(90deg,#f9a825,gold,#fff8dc,gold,#f9a825,gold);background-size:300% 300%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rainbowGold 4s linear infinite,celebrationBounce 1.5s ease-in-out infinite;display:inline-block;padding:20px;text-align:center;line-height:1.3;filter:drop-shadow(0 0 30px rgba(255,215,0,.6))}@keyframes rainbowGold{0%{background-position:0% 50%}to{background-position:300% 50%}}@keyframes celebrationBounce{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.05)}}.celebration-sub{font-family:Dancing Script,cursive;font-size:1.5rem;color:var(--warm-gray, #6D4C41);margin-top:10px;text-shadow:0 2px 10px rgba(255,224,130,.4)}@media(max-width:600px){.countdown{padding:20px 15px}.flip-timer{gap:15px}.card{width:75px;height:90px}.card .text{font-size:2.5rem;border-radius:16px}.label{font-size:.7rem;letter-spacing:1.5px}.birthday-celebration{font-size:2.2rem;padding:15px}.celebration-sub{font-size:1.2rem}}@media(max-width:375px){.card{width:65px;height:80px}.card .text{font-size:2.2rem;border-radius:14px}.label{font-size:.65rem}.birthday-celebration{font-size:1.8rem;padding:12px}}.balloon{position:fixed;bottom:-150px;font-size:3rem;z-index:999;pointer-events:none;animation:floatUp 8s ease-out forwards}@keyframes floatUp{0%{transform:translateY(0) translate(0) rotate(0);opacity:1}to{transform:translateY(-120vh) translate(var(--drift)) rotate(var(--rotate));opacity:0}}.balloon:after{content:"";position:absolute;bottom:-20px;left:50%;width:2px;height:30px;background:#666;transform:translate(-50%)}.firework{position:fixed;width:4px;height:4px;border-radius:50%;z-index:999;pointer-events:none}.firework-particle{position:absolute;width:100%;height:100%;border-radius:50%;animation:explode 1.5s ease-out forwards}@keyframes explode{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}.cracker{position:fixed;font-size:2.5rem;z-index:999;pointer-events:none;animation:popCracker 1s ease-out forwards}@keyframes popCracker{0%{transform:scale(0) rotate(0);opacity:1}50%{transform:scale(1.5) rotate(180deg);opacity:1}to{transform:scale(.5) rotate(360deg);opacity:0}}.hearts{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}.heart{position:absolute;bottom:-10%;pointer-events:none;will-change:transform,opacity;animation:floatUp linear infinite}.heart:nth-child(4n){color:gold;filter:drop-shadow(0 0 15px rgba(255,215,0,.7))}.heart:nth-child(4n+1){color:#f7dc6f;filter:drop-shadow(0 0 12px rgba(247,220,111,.6))}.heart:nth-child(4n+2){color:#ffe082;filter:drop-shadow(0 0 10px rgba(255,224,130,.6))}.heart:nth-child(4n+3){color:#ffb6c1;filter:drop-shadow(0 0 12px rgba(255,182,193,.5))}@keyframes floatUp{0%{transform:translateY(0) translate(0) rotate(0) scale(1);opacity:0}10%{opacity:1}50%{transform:translateY(-50vh) translate(30px) rotate(180deg) scale(1.2)}90%{opacity:1}to{transform:translateY(-110vh) translate(-20px) rotate(360deg) scale(.8);opacity:0}}.butterfly{position:absolute;bottom:-10%;pointer-events:none;will-change:transform,opacity;animation:butterflyFloat linear infinite;color:gold;font-size:1.5rem;filter:drop-shadow(0 0 10px rgba(255,215,0,.5))}@keyframes butterflyFloat{0%{transform:translateY(0) translate(0) rotate(-15deg) scale(1);opacity:0}10%{opacity:1}25%{transform:translateY(-25vh) translate(40px) rotate(15deg)}50%{transform:translateY(-50vh) translate(-30px) rotate(-15deg) scale(1.1)}75%{transform:translateY(-75vh) translate(50px) rotate(15deg)}90%{opacity:.8}to{transform:translateY(-110vh) translate(-20px) rotate(-15deg) scale(.9);opacity:0}}.star{position:absolute;bottom:-5%;pointer-events:none;will-change:transform,opacity;animation:starFloat linear infinite;color:gold;filter:drop-shadow(0 0 8px rgba(255,215,0,.8))}@keyframes starFloat{0%{transform:translateY(0) rotate(0) scale(.5);opacity:0}20%{opacity:1;transform:translateY(-20vh) rotate(72deg) scale(1)}40%{transform:translateY(-40vh) rotate(144deg) scale(.8)}60%{transform:translateY(-60vh) rotate(216deg) scale(1.2)}80%{opacity:.8;transform:translateY(-80vh) rotate(288deg) scale(.9)}to{transform:translateY(-110vh) rotate(360deg) scale(.5);opacity:0}}.sparkle{position:absolute;pointer-events:none;animation:sparkle 1.5s ease-out forwards}@keyframes sparkle{0%{transform:scale(0) rotate(0);opacity:1}50%{transform:scale(1.5) rotate(180deg);opacity:.8}to{transform:scale(0) rotate(360deg);opacity:0}}.music-toggle{position:fixed;right:25px;top:25px;top:max(env(safe-area-inset-top,25px),25px);z-index:1000;background:linear-gradient(135deg,#e91e63,#ff4081,#f50057);background-size:200% 200%;color:#fff;border:none;padding:14px 26px;border-radius:35px;cursor:pointer;font-family:Dancing Script,cursive;font-size:1.1rem;font-weight:700;transition:all .4s cubic-bezier(.22,1,.36,1);box-shadow:0 8px 32px #e91e6366,0 0 25px #ff40814d;letter-spacing:.5px;animation:btnGlow 3s ease-in-out infinite}@keyframes btnGlow{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.music-toggle:hover{transform:scale(1.08) translateY(-3px);box-shadow:0 15px 45px #e91e6380,0 0 40px #ff408166}.music-toggle.playing{animation:heartPulse 1.5s ease-in-out infinite,btnGlow 3s ease-in-out infinite}@keyframes heartPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.music-panel{position:fixed;right:20px;top:80px;width:400px;max-height:calc(100vh - 100px);background:linear-gradient(165deg,#1a1a2e,#16213e 30%,#0f0f23);border-radius:24px;z-index:999;overflow:hidden;transform:translate(120%) scale(.9);opacity:0;transition:all .5s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;box-shadow:0 30px 100px #000000b3,0 0 60px #e91e6326,inset 0 1px #ffffff1a;border:1px solid rgba(233,30,99,.2)}.music-panel.open{transform:translate(0) scale(1);opacity:1}.music-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;background:linear-gradient(135deg,#e91e63,#ff4081,#c2185b);color:#fff;position:relative;overflow:hidden}.music-header:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation:shimmer 3s linear infinite}@keyframes shimmer{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.music-logo{display:flex;align-items:center;gap:12px;z-index:1}.music-icon{font-size:2rem;animation:heartBeat 2s ease-in-out infinite}@keyframes heartBeat{0%,to{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.music-title{display:flex;flex-direction:column}.title-main{font-family:Dancing Script,cursive;font-size:1.4rem;font-weight:700}.title-sub{font-family:Poppins,sans-serif;font-size:.75rem;opacity:.9}.close-btn{background:#0003;border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:1}.close-btn:hover{background:#0006;transform:rotate(90deg)}.search-container{padding:16px 18px;background:#ffffff08}.search-box{display:flex;align-items:center;background:#ffffff14;border-radius:30px;padding:12px 18px;border:1px solid rgba(233,30,99,.2);transition:all .3s}.search-box:focus-within{border-color:#e91e63;box-shadow:0 0 20px #e91e6333;background:#ffffff1a}.search-icon{font-size:1rem;margin-right:10px;opacity:.6}.search-input{flex:1;background:transparent;border:none;color:#fff;font-family:Poppins,sans-serif;font-size:.95rem;outline:none}.search-input::placeholder{color:#ffffff80}.clear-search{background:none;border:none;color:#ffffff80;cursor:pointer;padding:4px 8px;font-size:.9rem}.clear-search:hover{color:#ff4081}.music-tabs{display:flex;padding:0 18px;gap:10px;border-bottom:1px solid rgba(255,255,255,.1)}.tab-btn{flex:1;background:transparent;border:none;color:#fff9;padding:12px;font-family:Poppins,sans-serif;font-size:.85rem;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;transition:all .3s}.tab-btn:hover{color:#ff4081}.tab-btn.active{color:#ff4081;border-bottom-color:#ff4081}.song-list{flex:1;overflow-y:auto;padding:12px;min-height:200px;max-height:300px}.song-list::-webkit-scrollbar{width:6px}.song-list::-webkit-scrollbar-track{background:transparent}.song-list::-webkit-scrollbar-thumb{background:#e91e634d;border-radius:3px}.song-list::-webkit-scrollbar-thumb:hover{background:#e91e6380}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}.empty-icon{font-size:3rem;margin-bottom:15px;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.empty-state p{color:#ffffffb3;font-family:Poppins,sans-serif;margin:5px 0}.empty-hint{font-size:.85rem!important;color:#ff4081!important}.loading{display:flex;flex-direction:column;align-items:center;padding:40px}.spinner{width:40px;height:40px;border:3px solid rgba(233,30,99,.2);border-top-color:#ff4081;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading p{color:#ffffffb3;margin-top:15px;font-family:Poppins,sans-serif;font-size:.9rem}.song-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer;transition:all .25s;margin-bottom:6px}.song-item:hover{background:#e91e6326}.song-item.active{background:linear-gradient(135deg,#e91e6340,#ff408126);border:1px solid rgba(233,30,99,.3)}.song-number{width:24px;text-align:center;color:#ffffff80;font-family:Poppins,sans-serif;font-size:.85rem}.song-item.active .song-number{color:#ff4081}.playing-indicator{display:flex;align-items:flex-end;gap:2px;height:16px;justify-content:center}.playing-indicator span{width:3px;background:linear-gradient(to top,#ff4081,#e91e63);border-radius:2px;animation:playBar .5s ease-in-out infinite alternate}.playing-indicator span:nth-child(1){animation-delay:0s;height:6px}.playing-indicator span:nth-child(2){animation-delay:.15s;height:12px}.playing-indicator span:nth-child(3){animation-delay:.3s;height:4px}@keyframes playBar{0%{height:4px}to{height:16px}}.song-cover{width:48px;height:48px;border-radius:8px;object-fit:cover;box-shadow:0 4px 15px #0006}.song-info{flex:1;min-width:0}.song-title{font-family:Poppins,sans-serif;font-size:.9rem;font-weight:500;color:#fff;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-item.active .song-title{color:#ff4081}.song-artist{font-family:Poppins,sans-serif;font-size:.78rem;color:#ffffff80;margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-actions{display:flex;gap:6px}.add-btn,.play-btn-small,.remove-btn{background:#ffffff1a;border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all .2s}.add-btn:hover,.play-btn-small:hover{background:#e91e634d;transform:scale(1.1)}.remove-btn:hover{background:#f443364d}.now-playing{background:linear-gradient(180deg,#e91e631a,#0000004d);border-top:1px solid rgba(233,30,99,.2);padding:16px}.now-playing-info{display:flex;align-items:center;gap:14px;margin-bottom:14px}.now-playing-cover{width:54px;height:54px;border-radius:10px;object-fit:cover;box-shadow:0 6px 20px #00000080;animation:coverGlow 3s ease-in-out infinite}@keyframes coverGlow{0%,to{box-shadow:0 6px 20px #00000080}50%{box-shadow:0 6px 30px #e91e6366}}.now-playing-text{flex:1;min-width:0}.now-playing-title{font-family:Poppins,sans-serif;font-size:.95rem;font-weight:600;color:#fff;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing-artist{font-family:Poppins,sans-serif;font-size:.8rem;color:#fff9;margin:3px 0 0}.playback-section{margin-bottom:12px}.playback-controls{display:flex;justify-content:center;align-items:center;gap:14px;margin-bottom:12px}.control-btn{background:none;border:none;color:#ffffffb3;font-size:1.2rem;cursor:pointer;padding:8px;border-radius:50%;transition:all .2s;display:flex;align-items:center;justify-content:center}.control-btn:hover{color:#fff;transform:scale(1.15)}.control-btn.active{color:#ff4081}.control-btn.play-main{background:linear-gradient(135deg,#e91e63,#ff4081);color:#fff;width:48px;height:48px;font-size:1.3rem;box-shadow:0 4px 20px #e91e6366}.control-btn.play-main:hover{transform:scale(1.1);box-shadow:0 6px 25px #e91e6380}.progress-container{display:flex;align-items:center;gap:10px}.time{font-family:Poppins,sans-serif;font-size:.72rem;color:#ffffff80;min-width:35px;text-align:center}.progress-bar{flex:1;height:5px;background:#ffffff26;border-radius:3px;cursor:pointer;overflow:hidden;position:relative}.progress-bar:hover{height:6px}.progress-fill{height:100%;background:linear-gradient(90deg,#e91e63,#ff4081);border-radius:3px;transition:width .1s linear;position:relative}.progress-fill:after{content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:12px;height:12px;background:#fff;border-radius:50%;opacity:0;transition:opacity .2s}.progress-bar:hover .progress-fill:after{opacity:1}.volume-section{display:flex;align-items:center;justify-content:flex-end;gap:8px}.volume-icon{font-size:.9rem}.volume-slider{width:90px;height:4px;-webkit-appearance:none;appearance:none;background:#ffffff26;border-radius:2px;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:linear-gradient(135deg,#e91e63,#ff4081);border-radius:50%;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px #e91e634d}.volume-slider:hover::-webkit-slider-thumb{transform:scale(1.2)}.volume-slider::-moz-range-thumb{width:12px;height:12px;background:linear-gradient(135deg,#e91e63,#ff4081);border-radius:50%;cursor:pointer;border:none}@media(max-width:600px){.music-toggle{right:15px;top:15px;padding:12px 20px;font-size:1rem}.music-panel{right:10px;left:10px;width:auto;top:70px;max-height:calc(100vh - 90px)}.song-list{max-height:220px}.playback-controls{gap:10px}.control-btn{font-size:1rem;padding:6px}.control-btn.play-main{width:42px;height:42px;font-size:1.1rem}.volume-slider{width:70px}.song-cover{width:42px;height:42px}}@media(max-width:375px){.music-toggle{right:12px;top:12px;padding:10px 16px;font-size:.9rem}.music-panel{right:5px;left:5px}.song-item{padding:8px 10px}.now-playing-cover{width:46px;height:46px}.music-header{padding:14px 16px}.title-main{font-size:1.2rem}}