@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap";body{font-family:'Montserrat',sans-serif;min-height:100vh;background-color:#0f172a;background-image:radial-gradient(circle at 20% 20%,#fb718526 0%,transparent 40%),radial-gradient(circle at 80% 80%,#38bdf826 0%,transparent 40%);overflow-x:hidden}.glass{background:#ffffff0d;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid #ffffff1a}.glass-dark{background:#0f172ab3;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid #ffffff0d}.shimmer-bg{background:linear-gradient(90deg,#fb718500 0%,#fb71851a 20%,#fb718533 60%,#fb71851a 80%,#fb718500 100%);background-size:200% 100%;animation:shimmer 3s linear infinite}.number-card{position:relative;overflow:hidden;transition:all .3s ease}.heart{animation:heartbeat 1.5s ease-in-out infinite;filter:drop-shadow(0 0 8px #fb7185cc)}@keyframes heartbeat{0%{transform:scale(1)}25%{transform:scale(1.1)}50%{transform:scale(1)}75%{transform:scale(1.1)}100%{transform:scale(1)}}.circle{position:absolute;border-radius:50%;background:linear-gradient(45deg,var(--tw-gradient-from),var(--tw-gradient-to));filter:blur(40px);z-index:-1;opacity:.4}.star{position:absolute;width:2px;height:2px;background-color:#fff;border-radius:50%;opacity:.5;animation:twinkle 4s infinite}@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:.8}}.falling-star{position:absolute;width:2px;height:2px;background:linear-gradient(to bottom,#fffc,#fff0);border-radius:50%;box-shadow:0 0 5px 1px #ffffff4d;opacity:0;z-index:0}.date-display{width:100%;padding:15px;border-radius:12px;background:#0f172ab3;color:#fff;border:1px solid #ffffff0d;text-align:center;cursor:pointer;transition:all .3s ease;font-size:16px}.date-display:hover{background:#0f172ae6;border-color:#fb718580}.date-icon{position:absolute;right:15px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:20px}.progress-bar{height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#f43f5e 0%,#fb7185 100%)}.milestone-badge{position:relative;width:60px;height:60px;background:linear-gradient(135deg,#f43f5e 0%,#be123c 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px #e01d4880;opacity:0;transform:scale(0);transition:opacity .5s ease,transform .5s ease}.milestone-badge.visible{opacity:1;transform:scale(1)}.milestone-badge::after{content:'';position:absolute;width:66px;height:66px;border:2px solid #fb718580;border-radius:50%;animation:scale 2s ease-in-out infinite}.countdown-ring{position:relative;width:120px;height:120px;border-radius:50%;background:linear-gradient(#0f172ab3,#0f172ae6);display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px #0003}.countdown-ring::before{content:'';position:absolute;width:110px;height:110px;border-radius:50%;border:2px solid #ffffff1a}.countdown-progress{position:absolute;top:5px;left:5px;width:110px;height:110px;border-radius:50%;background:conic-gradient(#f43f5e var(--progress-angle),transparent var(--progress-angle));transform:rotate(-90deg)}.countdown-inner{position:relative;width:90px;height:90px;border-radius:50%;background:#0f172ae6;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center}.reaction-container{position:fixed;bottom:20px;right:20px;z-index:100}.reaction-main-button{width:50px;height:50px;border-radius:50%;background:#0f172acc;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #ffffff1a;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px #00000026;transition:transform .2s ease,box-shadow .2s ease;font-size:24px;position:relative;z-index:101}.reaction-main-button:active{transform:scale(0.9);box-shadow:0 2px 6px #0000001a}.reaction-menu{position:absolute;bottom:60px;right:0;display:flex;flex-direction:column;gap:10px;opacity:0;transform:scale(0);transform-origin:bottom right;transition:all .3s cubic-bezier(0.175,0.885,0.32,1.275);pointer-events:none}.reaction-container:hover .reaction-menu{opacity:1;transform:scale(1);pointer-events:auto}.reaction-button{width:45px;height:45px;border-radius:50%;background:#0f172acc;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #ffffff1a;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px #00000026;transition:transform .2s ease,box-shadow .2s ease;font-size:20px}.reaction-button:active{transform:scale(0.9);box-shadow:0 2px 6px #0000001a}.reaction-effect{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0}.reaction-effect.active{animation:reaction-pop .3s cubic-bezier(0.175,0.885,0.32,1.275) forwards}.music-button{position:fixed;bottom:20px;right:80px;width:50px;height:50px;border-radius:50%;background:#0f172acc;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #ffffff1a;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px #00000026;transition:transform .2s ease,box-shadow .2s ease;font-size:24px;z-index:100}.music-button:active{transform:scale(0.9);box-shadow:0 2px 6px #0000001a}.music-button.playing{background:#fb71854d;border-color:#fb718580}.dual-clocks{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#0f172ab3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #ffffff0d;border-radius:12px;margin-bottom:15px}.clock{display:flex;flex-direction:column;align-items:center}.clock-time{font-size:18px;font-weight:500;color:#fff}.clock-city{font-size:12px;color:#ffffffb3}.clock-separator{width:1px;height:30px;background:#fff3;margin:0 15px}@media (max-width: 640px){.date-icon{font-size:18px;right:12px}.date-display{font-size:14px;padding:12px}.heart{font-size:1.5rem}.milestone-badge{width:50px;height:50px}.milestone-badge::after{width:56px;height:56px}.countdown-ring{width:100px;height:100px}.countdown-progress{width:90px;height:90px}.countdown-inner{width:70px;height:70px}.reaction-container{bottom:15px;right:15px}.reaction-main-button{width:45px;height:45px;font-size:20px}.reaction-button{width:40px;height:40px;font-size:18px}.music-button{bottom:15px;right:70px;width:45px;height:45px;font-size:20px}.dual-clocks{padding:8px 12px}.clock-time{font-size:16px}.clock-city{font-size:10px}.clock-separator{height:25px;margin:0 10px}}@media (max-width: 360px){.text-xs{font-size:.65rem}.milestone-badge{width:45px;height:45px}.milestone-badge::after{width:51px;height:51px}.reaction-main-button{width:40px;height:40px;font-size:18px}.reaction-button{width:35px;height:35px;font-size:16px}.music-button{width:40px;height:40px;font-size:18px;right:65px}.clock-time{font-size:14px}.clock-city{font-size:9px}}@media (max-width: 640px){.number-card{min-height:90px}}.flex-center{display:flex;align-items:center;justify-content:center}*{transition:all .2s ease}@media (prefers-reduced-motion: reduce){.shimmer-bg{animation:none}.heart{animation:heartbeat 3s ease-in-out infinite}.star{animation:twinkle 6s infinite}.milestone-badge::after{animation:none}.falling-star{display:none}}.tab{padding:.75rem 1.5rem;border-radius:9999px;font-weight:500;cursor:pointer;transition:all .3s ease}.tab.active{background:#e01d4833;color:#fb7185}.tab-content{display:none;opacity:0;transform:translateY(10px);transition:all .5s ease}.tab-content.active{display:block;opacity:1;transform:translateY(0)}.celebration{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100;opacity:0;transition:opacity .5s ease}.celebration.show{opacity:1}.confetti{position:absolute;width:10px;height:10px;background-color:#fb7185;opacity:.8;border-radius:0;animation:fall 5s ease-out infinite}@keyframes fall{0%{transform:translateY(-100px) rotate(0deg);opacity:1}70%{opacity:1}100%{transform:translateY(100vh) rotate(360deg);opacity:0}}.date-picker-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.date-picker-modal.active{opacity:1;visibility:visible}.date-picker-content{background:#0f172af2;border-radius:16px;padding:20px;width:90%;max-width:320px;box-shadow:0 10px 25px #00000080;border:1px solid #fb71854d}.date-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid #ffffff1a}.date-picker-close{background:none;border:none;color:#fb7185;font-size:24px;cursor:pointer;padding:0;line-height:1}.date-picker-body{display:flex;flex-direction:column;gap:15px}.date-picker-row{display:flex;gap:10px}.date-picker-input{flex:1;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;padding:10px;color:#fff;text-align:center;font-size:16px}.date-picker-input:focus{outline:none;border-color:#fb7185}.date-picker-button{background:linear-gradient(135deg,#f43f5e 0%,#be123c 100%);border:none;border-radius:8px;color:#fff;padding:12px;font-weight:500;cursor:pointer;transition:all .3s ease}.date-picker-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #e01d4866}