:root{
  --bg:#0c0517; --pink:#ff5fa2; --rose:#ff8fb8; --violet:#9b6bff; --gold:#ffd27a;
  --text:#fff3f8; --muted:#d8bcd0; --card:rgba(255,255,255,.07); --line:rgba(255,255,255,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,sans-serif; color:var(--text); min-height:100vh; overflow-x:hidden;
  background:radial-gradient(1200px 700px at 15% -10%,#3b0f4a 0%,transparent 60%),
             radial-gradient(900px 600px at 110% 20%,#4a0f2f 0%,transparent 55%),
             linear-gradient(180deg,#0c0517,#140726 60%,#0c0517);
}
#sky,#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#sky{z-index:0} #confetti{z-index:50}
.wrap{position:relative;z-index:1;max-width:920px;margin:0 auto;padding:40px 18px 60px}
.script{font-family:'Great Vibes',cursive;font-weight:400}
.eyebrow{letter-spacing:.25em;text-transform:uppercase;font-size:.75rem;color:var(--rose)}
.muted{color:var(--muted);font-size:.92rem}
.glow{text-shadow:0 0 18px rgba(255,95,162,.7),0 0 40px rgba(155,107,255,.5)}

/* hero + countdown */
.hero{text-align:center;padding:40px 0 30px}
.hero h1.script{font-size:clamp(2.8rem,9vw,5.4rem);line-height:1.05;margin:10px 0}
.sub{color:var(--muted)}
.countdown{display:flex;justify-content:center;gap:clamp(8px,3vw,22px);margin:34px 0 26px}
.unit{background:linear-gradient(160deg,rgba(255,95,162,.25),rgba(155,107,255,.18));border:1px solid var(--line);
  border-radius:20px;padding:18px 10px 12px;width:clamp(70px,20vw,130px);backdrop-filter:blur(8px);
  box-shadow:0 10px 40px rgba(255,95,162,.15),inset 0 1px 0 rgba(255,255,255,.15)}
.num{font-size:clamp(2rem,8vw,3.6rem);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.num.tick{animation:tick .45s ease}
@keyframes tick{0%{transform:translateY(-8px) scale(1.08);opacity:.4}100%{transform:none;opacity:1}}
.unit label{display:block;margin-top:8px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.progress{position:relative;height:8px;border-radius:9px;background:rgba(255,255,255,.1);max-width:560px;margin:0 auto}
.bar{height:100%;border-radius:9px;background:linear-gradient(90deg,var(--violet),var(--pink),var(--gold));width:0;transition:width 1s}
.heart-runner{position:absolute;top:50%;transform:translate(-50%,-55%);font-size:1.3rem;transition:left 1s;animation:beat 1.1s infinite}
@keyframes beat{0%,100%{transform:translate(-50%,-55%) scale(1)}50%{transform:translate(-50%,-55%) scale(1.25)}}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:28px clamp(18px,4vw,36px);
  margin:26px 0;backdrop-filter:blur(10px);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.card h2{font-size:1.4rem;margin-bottom:8px}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}

/* buttons + forms */
.btn{font:inherit;cursor:pointer;border:1px solid var(--line);color:var(--text);background:rgba(255,255,255,.08);
  padding:12px 24px;border-radius:999px;font-weight:600;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-glow{background:linear-gradient(90deg,var(--pink),var(--violet));border:none;box-shadow:0 8px 30px rgba(255,95,162,.45)}
input,textarea{font:inherit;width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:rgba(0,0,0,.25);color:var(--text);outline:none;transition:border .2s}
input:focus,textarea:focus{border-color:var(--pink)}
input[type=date],input[type=time]{color-scheme:dark}
label{display:block;font-size:.9rem;color:var(--muted);margin:10px 0 4px}
label input,label textarea{margin-top:6px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px}
.wish-form{display:grid;gap:12px;margin-top:14px}
.form-msg{min-height:1.2em;font-size:.92rem}
.emoji-pick{display:flex;flex-wrap:wrap;gap:8px}
.emoji-pick button,.chip{font:inherit;cursor:pointer;border:1px solid var(--line);background:rgba(255,255,255,.05);
  color:var(--text);border-radius:999px;padding:6px 12px;font-size:1.1rem;transition:.2s}
.chip{font-size:.9rem}
.emoji-pick button.active,.chip.active{background:rgba(255,95,162,.3);border-color:var(--pink);transform:scale(1.08)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* daily notes */
.days-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:12px;margin-top:18px}
.day{font:inherit;color:var(--text);border:1px solid var(--line);border-radius:18px;padding:14px 6px;
  background:rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:.25s}
.day .d-ico{font-size:1.6rem}.day .d-lbl{font-size:.75rem;color:var(--muted)}
.day.open:hover{transform:translateY(-4px) rotate(-2deg);background:rgba(255,95,162,.2)}
.day.today{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,95,162,.25),0 0 30px rgba(255,95,162,.4);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(255,95,162,.1),0 0 40px rgba(255,95,162,.6)}}
.day.locked{opacity:.45;cursor:not-allowed}
.day.final{background:linear-gradient(160deg,rgba(255,210,122,.25),rgba(255,95,162,.2));cursor:default}

/* modal */
.modal{position:fixed;inset:0;z-index:60;background:rgba(5,0,12,.7);display:grid;place-items:center;padding:20px;backdrop-filter:blur(6px)}
.modal[hidden]{display:none}
.modal-card{background:linear-gradient(160deg,#2a0f3c,#3d1030);border:1px solid var(--line);border-radius:26px;
  padding:34px 28px;max-width:480px;text-align:center;animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.note-text{font-size:2rem;line-height:1.3;margin:16px 0 22px}

/* date question */
.date-card{text-align:center;position:relative;overflow:hidden;min-height:340px}
.big-q{font-size:clamp(1.4rem,4.5vw,2rem);margin:10px 0 24px}
.date-buttons{display:flex;justify-content:center;gap:16px;min-height:60px;position:relative}
.btn-yes{background:linear-gradient(90deg,#ff4d8d,#ff7aa8);border:none;transition:transform .3s,font-size .3s}
.btn-no{transition:left .25s,top .25s}
.btn-no.runaway{position:absolute}
.date-form{text-align:left;max-width:520px;margin:0 auto}
.date-form .btn{margin-top:16px;width:100%}
.yay{text-align:center;font-weight:600;margin-bottom:6px}
.thanks .big-emoji{font-size:3.5rem;animation:beat2 1s infinite}
@keyframes beat2{50%{transform:scale(1.2)}}

/* live */
.live-card{border-color:rgba(255,60,90,.5)}
.live-badge{display:inline-flex;align-items:center;gap:8px;background:#e11d48;padding:4px 12px;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.1em;margin-bottom:10px}
.live-badge .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.video-frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;margin-top:14px}
.video-frame iframe,.video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* gift screen */
.gift-screen{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  background:radial-gradient(circle at 50% 40%,#3a0f45,#0c0517 70%);transition:opacity 1s}
.gift-screen.gone{opacity:0;pointer-events:none}
.gift{position:relative;width:170px;height:170px;cursor:pointer;animation:wobble 2.2s infinite}
@keyframes wobble{0%,100%{transform:rotate(0)}10%{transform:rotate(-6deg)}20%{transform:rotate(6deg)}30%{transform:rotate(0)}}
.gift .box{position:absolute;bottom:0;left:10px;width:150px;height:115px;border-radius:10px;
  background:linear-gradient(90deg,transparent 42%,var(--gold) 42% 58%,transparent 58%),linear-gradient(160deg,var(--pink),#c2185b)}
.gift .lid{position:absolute;top:28px;left:0;width:170px;height:38px;border-radius:10px;z-index:2;
  background:linear-gradient(90deg,transparent 42%,var(--gold) 42% 58%,transparent 58%),linear-gradient(160deg,#ff7ab3,var(--pink));transition:transform .8s cubic-bezier(.3,1.6,.5,1)}
.gift .bow{position:absolute;top:-30px;left:50%;width:60px;height:34px;transform:translateX(-50%)}
.gift .bow::before,.gift .bow::after{content:"";position:absolute;top:0;width:32px;height:30px;border:7px solid var(--gold);border-radius:50% 50% 0 50%}
.gift .bow::before{left:-4px;transform:rotate(-20deg)}.gift .bow::after{right:-4px;transform:rotate(20deg) scaleX(-1)}
.gift.open{animation:none}.gift.open .lid{transform:translateY(-140px) rotate(-25deg)}
.tap{font-size:1.1rem;animation:blink 1.6s infinite}

/* birthday hero */
.bday-title{font-family:'Dancing Script',cursive;font-size:clamp(2.4rem,8vw,4.2rem);
  background:linear-gradient(90deg,var(--gold),var(--rose),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% auto;animation:shine 3s linear infinite}
@keyframes shine{to{background-position:200% center}}
.her-name{font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(4rem,17vw,9rem);line-height:1.1;min-height:1.1em}
.her-name span{display:inline-block;opacity:0;transform:translateY(40px) scale(.4) rotate(-20deg);
  animation:letterIn .7s forwards cubic-bezier(.2,1.6,.4,1);text-shadow:0 0 25px rgba(255,95,162,.8)}
@keyframes letterIn{to{opacity:1;transform:none}}
.photo-ring{width:190px;height:190px;margin:20px auto 0;border-radius:50%;padding:6px;
  background:conic-gradient(var(--pink),var(--gold),var(--violet),var(--pink));animation:spin 6s linear infinite}
.photo-ring img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:4px solid var(--bg);animation:spin 6s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* cake */
.cake-card{text-align:center}
.cake{position:relative;width:240px;margin:70px auto 20px;height:200px}
.layer{position:absolute;left:50%;transform:translateX(-50%);border-radius:14px}
.layer.bottom{bottom:16px;width:240px;height:70px;background:linear-gradient(#ff8fb8,#e05591)}
.layer.mid{bottom:80px;width:200px;height:56px;background:linear-gradient(#fff0f6,#ffc2da)}
.layer.top{bottom:130px;width:160px;height:46px;background:linear-gradient(#ff8fb8,#ff5fa2)}
.layer.mid::after{content:"";position:absolute;top:-6px;left:0;right:0;height:16px;border-radius:14px;
  background:radial-gradient(circle at 10px 0,#fff 9px,transparent 10px) 0 0/20px 16px repeat-x}
.plate{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:290px;height:20px;border-radius:50%;background:rgba(255,255,255,.25)}
.candles{position:absolute;bottom:170px;left:50%;transform:translateX(-50%);display:flex;gap:18px;z-index:3}
.candle{position:relative;width:10px;height:44px;border-radius:3px;cursor:pointer;
  background:repeating-linear-gradient(45deg,#fff 0 6px,var(--violet) 6px 12px)}
.flame{position:absolute;bottom:44px;left:50%;width:14px;height:24px;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 70%,#fff 0 20%,#ffd27a 35%,#ff8a00 70%,transparent 72%);
  border-radius:50% 50% 40% 40%;filter:drop-shadow(0 0 10px #ffb84d);animation:flicker .15s infinite alternate}
@keyframes flicker{to{transform:translateX(-50%) scale(1.06,.94) rotate(2deg)}}
.candle.out .flame{animation:none;opacity:0;transition:opacity .3s}
.candle.out::after{content:"";position:absolute;bottom:46px;left:50%;width:6px;height:30px;transform:translateX(-50%);
  background:linear-gradient(transparent,rgba(220,220,220,.6));border-radius:50%;filter:blur(3px);animation:smoke 1.8s forwards}
@keyframes smoke{to{transform:translate(-50%,-50px);opacity:0}}
.cake-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.cake-msg{margin-top:16px;font-size:1.2rem;font-weight:600;min-height:1.5em}

/* letter */
.letter{white-space:pre-wrap;font-size:1.05rem;line-height:1.85;min-height:6em;margin-top:12px}
.letter.typing::after{content:"▍";animation:blink .8s infinite;color:var(--pink)}
.signature{font-size:2.2rem;text-align:right;margin-top:10px;color:var(--rose)}

/* wish wall */
.wall{columns:3 220px;column-gap:16px;margin-top:16px}
.wish-note{break-inside:avoid;margin-bottom:16px;padding:18px;border-radius:6px 18px 18px 18px;
  background:linear-gradient(160deg,#fff1f7,#ffd6e8);color:#4a1530;transform:rotate(var(--r));
  box-shadow:0 10px 25px rgba(0,0,0,.3);transition:transform .3s}
.wish-note:hover{transform:rotate(0) scale(1.04)}
.w-emoji{font-size:1.6rem}.wish-note p{margin:6px 0 10px;white-space:pre-wrap}
.wish-note footer{font-weight:600;font-size:.9rem}.wish-note footer span{font-weight:400;opacity:.7}

.foot{text-align:center;color:var(--muted);margin-top:40px;font-size:.9rem}