@import "https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Tajawal:wght@300;400;500;700&family=Amiri:wght@400;700&display=swap";:root{--pink:#ff4d8d;--pink-soft:#ff7eb3;--gold:#ffd166;--ink:#4a1d36;--cream:#fff7fa;color:var(--ink);font-family:Tajawal,system-ui,sans-serif}*{box-sizing:border-box}body{background:linear-gradient(160deg,#ffe3ee 0%,#fbd3e9 40%,#e9d5ff 100%) fixed;min-height:100vh;margin:0;overflow-x:hidden}button{font:inherit;cursor:pointer}.hearts{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.hearts span{color:var(--pink-soft);opacity:.5;animation:linear infinite floatUp;position:absolute;bottom:-40px}@keyframes floatUp{0%{opacity:0;transform:translateY(0)rotate(0)}10%{opacity:.6}to{opacity:0;transform:translateY(-110vh)rotate(25deg)}}.intro{z-index:1;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:2rem;min-height:100vh;padding:1rem;transition:opacity .8s,transform .8s;display:flex;position:relative}.intro--out{opacity:0;transform:scale(1.1)}.intro__hint{margin:0;font-family:Aref Ruqaa,serif;font-size:clamp(1.8rem,6vw,2.4rem)}.intro__tap{opacity:.7;margin:0;animation:1.6s infinite pulse}.gift{background:0 0;border:0;width:160px;height:160px;animation:2s infinite wiggle;position:relative}.gift__box,.gift__lid{background:var(--pink);border-radius:8px;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #ff4d8d66}.gift__box{width:140px;height:110px;bottom:0}.gift__lid{z-index:1;width:160px;height:36px;transition:transform .6s ease-in;top:20px}.gift__box:before,.gift__lid:before{content:"";background:var(--gold);width:22px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.gift__lid:after{content:"🎀";font-size:44px;position:absolute;top:-34px;left:50%;transform:translate(-50%)}.gift--open{animation:none}.gift--open .gift__lid{transform:translate(-50%,-140px)rotate(-25deg)}@keyframes wiggle{0%,80%,to{transform:rotate(0)}85%{transform:rotate(-6deg)}90%{transform:rotate(6deg)}95%{transform:rotate(-3deg)}}@keyframes pulse{50%{opacity:.3}}.page{z-index:1;max-width:960px;margin:0 auto;padding:0 16px 4rem;animation:1s fadeIn;position:relative}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}}.section{text-align:center;margin-top:5rem}.section h2{color:var(--pink);margin:0 0 .5rem;font-family:Aref Ruqaa,serif;font-size:clamp(2.4rem,7vw,3.4rem);font-weight:400}.muted{opacity:.7;margin-top:0}.btn{color:#fff;background:linear-gradient(135deg, var(--pink-soft), var(--pink));border:0;border-radius:999px;margin-top:1.5rem;padding:.8rem 1.8rem;font-weight:600;transition:transform .2s;box-shadow:0 8px 20px #ff4d8d59}.btn:hover{transform:translateY(-2px)scale(1.03)}.hero{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;display:flex}.hero__greeting{color:var(--pink);margin:0;font-family:Amiri,serif;font-size:clamp(1.6rem,5vw,2.2rem)}.hero h1{margin:.5rem 0;font-size:clamp(1.6rem,5vw,2.4rem);font-weight:500}.hero__name{background:linear-gradient(135deg, var(--pink), #c026d3, var(--pink-soft));color:#0000;filter:drop-shadow(0 6px 20px #ff4d8d4d);-webkit-background-clip:text;background-clip:text;font-family:Aref Ruqaa,serif;font-size:clamp(4.5rem,20vw,9rem);line-height:1.4;display:block}.hero__sub{opacity:.85;max-width:560px;font-size:1.15rem;line-height:1.9}.cake{width:240px;height:230px;margin:2rem auto 0;position:relative}.candles{justify-content:center;gap:18px;display:flex;position:absolute;top:0;left:0;right:0}.candle{background:repeating-linear-gradient(45deg, #fff 0 6px, var(--pink-soft) 6px 12px);border:0;border-radius:4px;width:14px;height:56px;margin-top:30px;position:relative}.flame{background:radial-gradient(circle at 50% 70%, #fff 0 20%, var(--gold) 45%, #ff8c42 80%);border-radius:50%/60% 60% 40% 40%;width:16px;height:26px;animation:.15s infinite alternate flicker;position:absolute;top:-30px;left:50%;transform:translate(-50%);box-shadow:0 0 20px 6px #ffd16699}@keyframes flicker{to{transform:translate(-50%)scale(1.05,.95)rotate(2deg)}}.cake__layer{border-radius:12px;position:absolute;left:50%;transform:translate(-50%)}.cake__layer--top{background:#ffc2d9;border-top:14px solid #fff;width:180px;height:56px;top:86px}.cake__layer--bottom{background:var(--pink-soft);border-top:14px solid #fff0f6;width:230px;height:66px;top:142px}.cake__plate{background:#fff;border-radius:50%;width:270px;height:14px;position:absolute;bottom:8px;left:50%;transform:translate(-50%);box-shadow:0 6px 12px #0000001a}.cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1.5rem;display:grid}.card{perspective:800px;background:0 0;border:0;height:170px;padding:0}.card__inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s;display:block;position:relative}.card--flipped .card__inner{transform:rotateY(180deg)}.card__face{backface-visibility:hidden;border-radius:18px;justify-content:center;align-items:center;padding:1.2rem;display:flex;position:absolute;inset:0;box-shadow:0 10px 25px #4a1d361f}.card__front{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffb3;font-size:3rem}.card__back{color:#fff;background:linear-gradient(135deg, var(--pink-soft), #c026d3);font-size:1.1rem;line-height:1.7;transform:rotateY(180deg)}.gallery{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem;margin-top:2rem;display:grid}@media (width<=480px){.gallery{grid-template-columns:repeat(2,1fr);gap:1rem}}.polaroid{transform:rotate(var(--tilt));background:#fff;margin:0;padding:10px 10px 14px;transition:transform .3s;box-shadow:0 10px 25px #4a1d3626}.polaroid:hover{z-index:1;transform:rotate(0)scale(1.05)}.polaroid img,.polaroid__placeholder{aspect-ratio:1;object-fit:cover;width:100%;display:block}.polaroid img{aspect-ratio:3/4}.polaroid__placeholder{background:#fde7f0;place-items:center;font-size:3rem;display:grid}.polaroid figcaption{margin-top:8px;font-family:Aref Ruqaa,serif;font-size:1.4rem}.letter{text-align:right;white-space:pre-line;background:var(--cream);background-image:repeating-linear-gradient(#0000 0 calc(2.1em - 1px),#f9cfe0 calc(2.1em - 1px) 2.1em);border-radius:6px;max-width:640px;margin:1.5rem auto 0;padding:2rem;font-family:Amiri,serif;font-size:1.2rem;line-height:2.1;box-shadow:0 15px 35px #4a1d3626}.letter p{margin:0}.cursor{color:var(--pink);animation:.8s infinite pulse}.letter__sign{text-align:left;color:var(--pink);font-family:Aref Ruqaa,serif;font-size:1.8rem;margin-top:1rem!important}.music,.sound-toggle{z-index:10;background:#fff;border:0;border-radius:50%;width:52px;height:52px;font-size:1.4rem;position:fixed;bottom:16px;left:16px;box-shadow:0 6px 18px #4a1d3633}.sound-toggle{left:auto;right:16px}.footer{text-align:center;opacity:.7;margin-top:5rem}.counter{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffb3;border-radius:24px;flex-direction:column;align-items:center;margin-top:1rem;padding:1.5rem 2.5rem;display:inline-flex;box-shadow:0 10px 25px #4a1d361f}.counter__num{color:var(--pink);font-size:clamp(3rem,12vw,4.5rem);font-weight:700;line-height:1.2}.counter__label{opacity:.8}.timeline{text-align:right;max-width:640px;margin:2rem auto 0;padding:0;list-style:none;position:relative}.timeline:before{content:"";background:linear-gradient(var(--pink-soft), #c026d3);border-radius:3px;width:3px;position:absolute;top:0;bottom:0;right:23px}.timeline__item{gap:1rem;margin-bottom:1.5rem;display:flex;position:relative}.timeline__icon{z-index:1;background:#fff;border-radius:50%;flex:none;place-items:center;width:48px;height:48px;font-size:1.4rem;display:grid;box-shadow:0 6px 16px #ff4d8d4d}.timeline__card{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffbf;border-radius:16px;flex:1;padding:1rem 1.2rem;box-shadow:0 10px 25px #4a1d361a}.timeline__date{color:var(--pink);font-size:.85rem;font-weight:700}.timeline__card h3{margin:.2rem 0 .4rem;font-size:1.2rem}.timeline__card p{opacity:.85;margin:0;line-height:1.8}.wishes{text-align:right;max-width:600px;margin:1.5rem auto 0;padding:0;list-style:none}.wishes li{background:#ffffffa6;border-radius:14px;align-items:flex-start;gap:.8rem;margin-bottom:.8rem;padding:.9rem 1.2rem;line-height:1.8;animation:.8s both fadeIn;display:flex;box-shadow:0 6px 16px #4a1d3614}.wishes__star{flex:none}.surprise{max-width:560px;color:var(--pink);margin:1.5rem auto 0;font-family:Amiri,serif;font-size:clamp(1.4rem,4.5vw,1.9rem);line-height:1.9;animation:1s fadeIn}.section{opacity:0;transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1);transform:translateY(50px)scale(.97)}.section.is-visible{opacity:1;transform:none}.section:not(.is-visible) .wishes li,.section:not(.is-visible) .timeline__item{opacity:0;animation:none}.timeline__item{animation:.7s both slideIn}.timeline__item:nth-child(2){animation-delay:.15s}.timeline__item:nth-child(3){animation-delay:.3s}.timeline__item:nth-child(4){animation-delay:.45s}.timeline__item:nth-child(5){animation-delay:.6s}@keyframes slideIn{0%{opacity:0;transform:translate(40px)}}.tap-heart{z-index:100;pointer-events:none;color:var(--pink);font-size:20px;animation:.9s ease-out forwards tapHeart;position:fixed;translate:-50% -50%}@keyframes tapHeart{0%{opacity:1;transform:translate(0)scale(.4)}to{transform:translate(var(--dx), var(--dy)) scale(1.2) rotate(20deg);opacity:0}}.smoke{filter:blur(3px);background:#a0a0a099;border-radius:50%;width:10px;height:10px;animation:1.4s ease-out forwards smoke;position:absolute;top:-10px;left:50%}@keyframes smoke{0%{opacity:.8;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-30%,-60px)scale(3)}}.balloons{flex-wrap:wrap;justify-content:center;gap:1.2rem 1.6rem;min-height:140px;margin-top:2rem;display:flex}.balloon{background:radial-gradient(circle at 30% 28%, #fff9 0 10%, transparent 30%), var(--c);border:0;border-radius:50%/45% 45% 55% 55%;width:70px;height:88px;padding:0;animation:3s ease-in-out infinite bob;position:relative;box-shadow:inset -8px -10px 16px #0000001f,0 10px 20px #4a1d3626}.balloon:before{content:"";border:6px solid #0000;border-bottom-color:var(--c);position:absolute;bottom:-6px;left:50%;translate:-50%;rotate:180deg}.balloon:after{content:"";background:#4a1d3659;width:1px;height:40px;margin-top:6px;position:absolute;top:100%;left:50%}.balloon--popped{pointer-events:none;animation:.25s ease-out forwards popOut}@keyframes bob{50%{transform:translateY(-14px)rotate(3deg)}}@keyframes popOut{to{opacity:0;transform:scale(1.6)}}.balloon-msg{min-height:2em;color:var(--pink);margin-top:2.6rem;font-family:Amiri,serif;font-size:1.5rem;animation:.5s cubic-bezier(.3,1.6,.5,1) popIn}@keyframes popIn{0%{opacity:0;transform:scale(.5)}}.hold-heart{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transform:scale(calc(1 + var(--p) * .9));filter:drop-shadow(0 0 calc(var(--p) * 30px) #ff4d8de6);background:0 0;border:0;margin-top:1rem;padding:0;font-size:5rem;line-height:1;transition:transform 80ms linear;animation:1.2s ease-in-out infinite heartbeat}.hold-heart--shake{animation:.12s infinite shake}@keyframes heartbeat{15%{scale:1.12}30%{scale:1}45%{scale:1.08}}@keyframes shake{25%{translate:-3px 2px}75%{translate:3px -2px}}.meter{background:#fff9;border-radius:999px;width:min(260px,80%);height:10px;margin:3rem auto 0;overflow:hidden}.meter span{border-radius:inherit;background:linear-gradient(90deg, var(--pink-soft), #c026d3);height:100%;margin-inline-start:0;display:block}.hold-msg{color:var(--pink);font-family:Amiri,serif;font-size:1.5rem;animation:.5s cubic-bezier(.3,1.6,.5,1) popIn}.envelope{perspective:800px;background:linear-gradient(160deg,#ffd6e7,#ffb3d1);border:0;border-radius:8px;width:280px;height:180px;margin:1.5rem auto 0;padding:0;animation:2.5s infinite wiggle;position:relative;box-shadow:0 15px 35px #4a1d3633}.envelope:before{content:"";z-index:2;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);background:linear-gradient(160deg,#ffc2d9,#ff9cc2);border-radius:8px;position:absolute;inset:0}.envelope__flap{z-index:3;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;background:#ff8ab8;height:60%;transition:transform .5s,z-index 0s .25s;position:absolute;inset:0 0 auto}.envelope__paper{z-index:1;background:var(--cream);border-radius:4px;transition:transform .6s .4s;position:absolute;inset:12px 18px}.envelope__seal{z-index:4;color:#fff;background:#e11d74;border-radius:50%;place-items:center;width:44px;height:44px;font-size:1.3rem;transition:opacity .2s;display:grid;position:absolute;top:46%;left:50%;translate:-50% -50%;box-shadow:0 4px 10px #0003}.envelope--open{animation:none}.envelope--open .envelope__seal{opacity:0}.envelope--open .envelope__flap{z-index:0;transform:rotateX(180deg)}.envelope--open .envelope__paper{transform:translateY(-90px)}.letter--in{animation:.8s cubic-bezier(.2,.8,.2,1) letterIn}@keyframes letterIn{0%{opacity:0;transform:translateY(60px)scale(.9)}}.scratch{background:var(--cream);border-radius:20px;place-items:center;max-width:460px;min-height:200px;margin:1.5rem auto 0;padding:1.5rem;display:grid;position:relative;overflow:hidden;box-shadow:0 15px 35px #4a1d3626}.scratch .surprise{margin:0;animation:none}.scratch__cover{cursor:grab;touch-action:none;width:100%;height:100%;transition:opacity .8s;position:absolute;inset:0}.scratch__cover--gone{opacity:0;pointer-events:none}.polaroid:has(img){cursor:zoom-in}.lightbox{z-index:100;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);touch-action:pan-y;background:#1e0814eb;place-items:center;padding:56px 16px;animation:.25s fadeIn;display:grid;position:fixed;inset:0}.lightbox__figure{flex-direction:column;align-items:center;gap:.75rem;max-width:100%;max-height:100%;margin:0;display:flex}.lightbox__figure img{object-fit:contain;border:8px solid #fff;border-radius:4px;max-width:min(100%,900px);max-height:calc(100dvh - 160px);animation:.3s lightboxIn;display:block;box-shadow:0 20px 50px #00000080}.lightbox__figure figcaption{color:#fff;text-align:center;font-family:Aref Ruqaa,serif;font-size:1.3rem}@keyframes lightboxIn{0%{opacity:0;transform:scale(.94)}}.lightbox__close,.lightbox__nav{color:#fff;background:#ffffff26;border:0;border-radius:50%;position:absolute}.lightbox__close{width:44px;height:44px;font-size:1.2rem;top:12px;right:12px}.lightbox__nav{width:48px;height:48px;margin-top:-24px;font-size:2rem;line-height:1;top:50%}.lightbox__nav--prev{right:12px}.lightbox__nav--next{left:12px}.lightbox__count{color:#fffc;direction:ltr;font-size:.9rem;position:absolute;top:22px;left:50%;transform:translate(-50%)}@media (hover:none) and (width<=600px){.lightbox__nav{display:none}}.voice{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffbf;border-radius:999px;align-items:center;gap:1rem;max-width:420px;margin:2rem auto 0;padding:1rem 1.25rem;display:flex;box-shadow:0 10px 25px #4a1d3626}.voice__play{color:#fff;background:linear-gradient(135deg, var(--pink-soft), var(--pink));border:0;border-radius:50%;flex:none;width:56px;height:56px;font-size:1.2rem;box-shadow:0 6px 16px #ff4d8d66}.voice--playing .voice__play{animation:1.4s ease-in-out infinite voicePulse}@keyframes voicePulse{50%{box-shadow:0 0 0 10px #ff4d8d26,0 6px 16px #ff4d8d66}}.voice__body{flex:1;align-items:center;gap:.75rem;min-width:0;display:flex}.voice__bars{cursor:pointer;flex:1;align-items:center;gap:3px;height:36px;display:flex}.voice__bars span{height:var(--h);background:#4a1d3633;border-radius:2px;flex:1;transition:background .2s}.voice__bars span.is-played{background:var(--pink)}.voice--playing .voice__bars span{animation:voiceBar .9s ease-in-out var(--d) infinite alternate}@keyframes voiceBar{to{transform:scaleY(.55)}}.voice__time{opacity:.7;direction:ltr;flex:none;font-size:.85rem}.friend-voices{gap:1.25rem;max-width:460px;margin:2rem auto 0;display:grid}.friend-voice{gap:.4rem;display:grid}.friend-voice .voice{margin:0}.friend-voice__name{color:var(--pink);padding-inline-start:1.25rem;font-family:Aref Ruqaa,serif;font-size:1.2rem}.record{place-items:center;min-height:100vh;display:grid}.record__title{margin:0;font-size:clamp(1.8rem,6vw,2.6rem)}.record__title .hero__name{font-size:1.3em;display:inline}.record .hero__sub{margin:1rem auto 2rem}.record__name{width:100%;max-width:340px;font:inherit;text-align:center;color:var(--ink);background:#ffffffd9;border:2px solid #ff4d8d40;border-radius:999px;outline:none;margin:0 auto 2rem;padding:.9rem 1.2rem;font-size:1.05rem;display:block}.record__name:focus{border-color:var(--pink)}.record__mic-wrap{justify-items:center;gap:.75rem;display:grid}.record__mic{color:#fff;background:linear-gradient(135deg, var(--pink-soft), var(--pink));border:0;border-radius:50%;width:104px;height:104px;font-size:2.6rem;transition:transform .2s;box-shadow:0 12px 30px #ff4d8d73}.record__mic:active{transform:scale(.95)}.record__mic--on{font-size:1.8rem;animation:1.2s ease-in-out infinite voicePulse}.record__hint{opacity:.75;direction:rtl;margin:0}.record__review .voice{margin-top:0}.record__actions{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.btn:disabled{opacity:.6;cursor:default;transform:none}.btn--ghost{color:var(--pink);box-shadow:none;background:#ffffffd9}.record__error{color:#d6336c;margin-top:1.25rem;font-weight:600}.record__done p{font-size:1.4rem}.btn--sm{margin-top:0;padding:.5rem 1.1rem;font-size:.9rem}.btn--danger{color:#d6336c;box-shadow:none;background:#fff;border:1px solid #d6336c4d}.admin{max-width:640px;margin:0 auto;padding:1.5rem 16px 4rem}.admin__login{justify-items:center;gap:1rem;display:grid}.admin__login .record__name{margin:0}.admin__head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.admin__head h1{margin:0;font-size:1.8rem}.admin__head-actions{gap:.5rem;display:flex}.admin__stats{grid-template-columns:repeat(3,1fr);gap:.75rem;margin:1.5rem 0;display:grid}.admin__stat,.admin__card,.admin__voice{background:#fffc;border-radius:18px;box-shadow:0 6px 18px #4a1d3614}.admin__stat{text-align:center;justify-items:center;padding:1rem .5rem;display:grid}.admin__stat strong{color:var(--pink);font-size:1.8rem;line-height:1.2}.admin__stat span{opacity:.75;font-size:.8rem}.admin__stat--alert{outline:2px solid var(--pink)}.admin__card{gap:1rem;padding:1.1rem 1.25rem;display:grid}.admin__switch{cursor:pointer;align-items:center;gap:.9rem;display:flex}.admin__switch input{width:1.4rem;height:1.4rem;accent-color:var(--pink);flex:none}.admin__switch span{display:grid}.admin__switch small{opacity:.7}.admin__links{flex-wrap:wrap;gap:.5rem;display:flex}.admin__section{margin-top:2.5rem}.admin__section h2{margin:0 0 1rem;font-size:1.3rem}.admin__count{text-align:center;color:#fff;background:var(--pink);vertical-align:middle;border-radius:999px;min-width:1.6rem;padding:0 .4rem;font-size:.85rem;display:inline-block}.admin__empty{opacity:.6}.admin__voice{gap:.75rem;margin-bottom:1rem;padding:1rem 1.1rem;display:grid}.admin__voice .voice{max-width:none;box-shadow:none;background:#ff4d8d0f;margin:0}.admin__voice-meta{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem;display:flex}.admin__voice-meta strong{font-size:1.1rem}.admin__voice-meta small{opacity:.65}.admin__voice-actions{justify-content:flex-end;gap:.5rem;display:flex}.admin__me{opacity:.7}.admin__note{opacity:.75;max-width:340px;margin:0;font-size:.9rem}.admin__row{justify-content:space-between;align-items:center;gap:.5rem;min-height:2.4rem;display:flex}.admin__row small{opacity:.6}.admin__add{gap:.6rem;display:grid}.admin__add .record__name{max-width:none;margin:0}.admin__add-btn{justify-self:start}.lock{place-items:center;min-height:100vh;display:grid}.lock__card{text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffb3;border-radius:28px;justify-items:center;gap:1rem;width:100%;max-width:380px;padding:2.5rem 1.5rem;animation:.6s fadeIn;display:grid;box-shadow:0 20px 50px #4a1d3626}.lock__card--shake{animation:.45s lockShake}@keyframes lockShake{20%,60%{transform:translate(-10px)}40%,80%{transform:translate(10px)}}.lock__icon{font-size:3.5rem;animation:3s ease-in-out infinite float}@keyframes float{50%{transform:translateY(-8px)}}.lock__title{margin:0;font-size:1.4rem;line-height:1.8}.lock__title .hero__name{font-size:1.4em;display:inline}.lock__hint{opacity:.7;margin:0}.lock__card .record__name{margin:0}.admin__badge{vertical-align:middle;background:#4a1d3614;border-radius:999px;padding:.1rem .6rem;font-size:.8rem;display:inline-block}.admin__badge--on{color:#fff;background:var(--pink)}.admin__card .admin__note{max-width:none}