*{box-sizing:border-box}
:root{
 --bg:#fff5f8;--card:rgba(255,255,255,.78);--line:rgba(188,117,145,.28);
 --text:#513945;--muted:#806975;--accent:#d46f91;--accent2:#9c7ac2;
}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 18% 8%,#ffdce8 0,transparent 28%),radial-gradient(circle at 82% 20%,#ddd0f5 0,transparent 30%),linear-gradient(135deg,#fff8fa 0%,#f8edf5 48%,#eeeafa 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.screen{min-height:100svh;display:grid;place-items:center;padding:24px;position:relative;z-index:2}
.glass{background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,245,250,.58));border:1px solid var(--line);box-shadow:0 24px 70px rgba(133,94,119,.20),inset 0 1px rgba(255,255,255,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.login-card{width:min(430px,100%);padding:42px 28px;border-radius:30px;text-align:center}
.lock{font-size:42px;margin-bottom:8px;color:#e2a1b2}.eyebrow{font-size:10px;letter-spacing:.34em;color:#aaa5b2;margin:0 0 15px;text-transform:uppercase}
h1,h2,h3,p{margin-top:0}.login-card h1{font-size:clamp(34px,8vw,54px);line-height:.98;margin:0 0 14px;letter-spacing:-.05em}
.login-card h1 span,.hero-title span{color:#c95f82}
.muted{color:var(--muted);line-height:1.7}
input{display:block;width:100%;margin:10px 0;padding:15px 16px;border-radius:15px;border:1px solid var(--line);background:rgba(255,255,255,.72);color:var(--text);outline:none}
input:focus{border-color:rgba(216,138,159,.7);box-shadow:0 0 0 4px rgba(216,138,159,.08)}
.primary,.ghost{border-radius:999px;padding:14px 21px;transition:.3s ease;border:1px solid transparent}
.primary{color:white;background:linear-gradient(135deg,#d5678c 0%,#b66aa5 52%,#8d79c8 100%);box-shadow:0 12px 35px rgba(130,80,105,.25)}
.ghost{color:#eee;background:rgba(255,255,255,.70);border-color:var(--line)}
.primary:hover,.ghost:hover{transform:translateY(-2px)}
.login-card .primary{width:100%;margin-top:8px}.login-msg{min-height:20px;color:#df9aac;font-size:13px;margin:12px 0 0}
#loader{background:#fbf6fa}.loader-wrap{text-align:center;width:min(420px,90vw)}
.loader-ring{width:72px;height:72px;border-radius:50%;border:1px solid rgba(255,255,255,.14);border-top-color:var(--accent);margin:0 auto 24px;animation:spin 1s linear infinite;box-shadow:0 0 45px rgba(216,138,159,.13)}
.progress{height:3px;background:rgba(120,90,110,.10);border-radius:99px;overflow:hidden;margin:16px 0 8px}.progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:.2s}.loader-wrap small{color:#77727f}
.section{min-height:100svh;padding:95px 22px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative}
.reveal-section{display:none;opacity:0}.reveal-section.visible{display:flex;animation:sectionIn .8s ease forwards}
.section-inner{max-width:1000px}
.hero-title{font-size:clamp(52px,10vw,105px);line-height:.92;letter-spacing:-.07em;max-width:950px;margin:0 0 24px}.hero-title span{font-size:.48em;letter-spacing:-.025em}
.hero-sub{color:var(--muted);margin-bottom:30px}
.section-head{max-width:760px;margin-bottom:35px}.section-head h2,.cake-card h2,.message-section h2{font-size:clamp(34px,6vw,62px);letter-spacing:-.05em;margin:0}
.mini-card{max-width:700px;border-radius:32px;padding:50px 30px}.tiny-star{font-size:30px;color:#e2b4c2}
.cinematic-line{font-size:clamp(24px,4vw,42px);line-height:1.2;margin:22px 0;letter-spacing:-.035em}
.memory-stage{width:min(900px,100%);display:flex;align-items:center;gap:12px}.photo-frame{width:min(680px,82vw);aspect-ratio:4/5;position:relative;border-radius:28px;overflow:hidden;border:1px solid var(--line);background:#f8eef3;box-shadow:0 25px 70px rgba(0,0,0,.6)}
.photo-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .35s,transform .5s}.photo-frame.change img{opacity:.2;transform:scale(1.03)}
.photo-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.4),transparent 38%)}.photo-counter{position:absolute;right:18px;bottom:16px;font-size:12px;letter-spacing:.18em}
.nav{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.70);color:#6b5360;font-size:34px;line-height:1}.dots{display:flex;gap:7px;margin:20px 0 25px}.dot{width:6px;height:6px;border-radius:50%;background:#cbb6c3;transition:.2s}.dot.active{width:22px;border-radius:10px;background:var(--accent)}
.countdown-section{min-height:85svh}.countdown-card{width:min(760px,100%);padding:50px 25px;border-radius:34px}.countdown-card h2{font-size:clamp(34px,6vw,62px);letter-spacing:-.045em;margin:0 0 30px}
.timer{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(650px,100%);margin:0 auto 22px}.timer div{padding:20px 10px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.70)}.timer strong{display:block;font-size:clamp(32px,7vw,60px);letter-spacing:-.05em}.timer span{display:block;color:#9c8792;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.cake-card{max-width:680px;padding:50px 28px;border-radius:34px}.cake-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:26px 0}.cake-msg{min-height:24px;color:#d5cfe0}.cake-scene{padding-top:10px}.count{font-size:72px;font-weight:800;letter-spacing:-.06em}
.real-cake{position:relative;width:260px;height:260px;margin:0 auto 20px;filter:drop-shadow(0 22px 25px rgba(0,0,0,.5));animation:cakeFloat 3s ease-in-out infinite}
.plate{position:absolute;left:12px;right:12px;bottom:30px;height:22px;border-radius:50%;background:linear-gradient(#f3edf0,#9b929a);box-shadow:0 5px 0 #5f5960}
.cake-body{position:absolute;left:35px;right:35px;bottom:48px;height:130px}
.cake-layer{position:absolute;left:0;right:0;border-radius:18px 18px 13px 13px;box-shadow:inset 0 -8px 0 rgba(0,0,0,.12),inset 0 7px 0 rgba(255,255,255,.16)}
.bottom-layer{bottom:0;height:55px;background:linear-gradient(#7c3e4e,#4a2631)}
.middle-layer{bottom:43px;height:50px;background:linear-gradient(#a65a68,#63313d)}
.top-layer{bottom:82px;height:48px;background:linear-gradient(#d88797,#a65265)}
.cream{position:absolute;height:15px;background:#f5e7e8;border-radius:50%;left:0;right:0;box-shadow:0 4px 0 rgba(90,40,50,.18)}
.cream-1{bottom:39px}.cream-2{bottom:78px}.cream-3{bottom:117px}
.berry{position:absolute;width:13px;height:13px;border-radius:50%;background:#6f253d;box-shadow:inset 2px 2px 3px rgba(255,255,255,.3)}
.b1{left:45px;bottom:123px}.b2{left:116px;bottom:122px}.b3{right:45px;bottom:123px}
.candle{position:absolute;left:50%;top:48px;transform:translateX(-50%);width:15px;height:57px;border-radius:5px;background:repeating-linear-gradient(135deg,#eee 0 7px,#b8879a 7px 13px);box-shadow:0 3px 10px rgba(0,0,0,.25)}
.flame{position:absolute;left:50%;top:-25px;width:18px;height:28px;transform:translateX(-50%);border-radius:50% 50% 50% 50%;background:radial-gradient(circle at 50% 70%,#fff6ba 0 20%,#ffbd58 38%,#d66b39 70%,transparent 72%);animation:flicker .16s infinite alternate;filter:drop-shadow(0 0 12px #ffad55)}
.cake-scene h3{font-size:clamp(26px,5vw,44px);margin:12px 0 24px}
.message-section{min-height:110svh}.message-box{width:min(760px,100%);min-height:290px;border-radius:30px;padding:40px 28px;display:grid;place-items:center;margin:20px 0}.message-line{font-size:clamp(24px,4vw,43px);line-height:1.25;letter-spacing:-.03em;animation:lineIn .8s both}.message-line strong{color:#d996a8}
.message-progress{width:min(500px,80vw);height:2px;background:rgba(160,120,140,.16);margin:22px 0}.message-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:.5s}
.ending{min-height:85svh;overflow:hidden}.end-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(216,138,159,.14);filter:blur(90px)}.ending h2,.ending p,.signature{position:relative}.ending h2{font-size:clamp(50px,10vw,100px);letter-spacing:-.06em;margin-bottom:18px}.ending p{color:var(--muted)}.signature{margin-top:70px;font-size:13px;color:#777384;letter-spacing:.08em}.signature span{color:#d88a9f}
.stars,.hearts{position:fixed;inset:0;pointer-events:none;z-index:1}.stars{background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(#fff 1px,transparent 1px);background-size:110px 110px,170px 170px;background-position:10px 20px,60px 90px;opacity:.18}.hearts span{position:absolute;bottom:-20px;font-size:12px;opacity:0;animation:heartFloat 8s linear forwards}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes sectionIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes lineIn{from{opacity:0;filter:blur(10px);transform:translateY(12px)}to{opacity:1;filter:blur(0);transform:none}}@keyframes cakeFloat{50%{transform:translateY(-7px)}}@keyframes flicker{to{transform:translateX(-50%) scale(1.08,.92)}}@keyframes heartFloat{to{opacity:0;transform:translateY(-100vh) rotate(35deg)}}
@media(max-width:600px){.section{padding:75px 16px}.login-card{padding:32px 20px}.memory-stage{gap:5px}.nav{width:40px;height:40px;font-size:28px}.photo-frame{width:78vw}.cake-card{padding:38px 20px}.timer{gap:6px}.timer div{padding:14px 5px}.timer strong{font-size:30px}.timer span{font-size:9px}.message-box{padding:32px 20px;min-height:310px}.real-cake{transform:scale(.9)}}

/* --- Cinematic memory gallery --- */
.memory-stage{position:relative;min-height:min(650px,82vh);justify-content:center}
.photo-frame{transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.photo-frame::before{content:"";position:absolute;inset:10px;border-radius:22px;border:1px solid rgba(255,255,255,.45);z-index:2;pointer-events:none}
.photo-frame img{object-position:center;animation:photoReveal .8s cubic-bezier(.2,.8,.2,1)}
.photo-frame.change{transform:perspective(1000px) rotateY(10deg) translateX(20px) scale(.97);box-shadow:0 30px 80px rgba(150,80,115,.25)}
.photo-frame.change img{opacity:0;transform:scale(1.08)}
.nav{position:relative;z-index:5;box-shadow:0 10px 30px rgba(120,80,110,.12)}
.dot.active{background:linear-gradient(90deg,var(--accent),var(--accent2))}
@keyframes photoReveal{from{opacity:0;transform:scale(1.07) rotate(-1deg)}to{opacity:1;transform:none}}

/* --- Cake cut animation --- */
.real-cake{cursor:pointer;transition:transform .35s}
.real-cake.cut{animation:cakeCut .7s cubic-bezier(.2,.8,.2,1) forwards}
.real-cake.cut .top-layer,.real-cake.cut .middle-layer,.real-cake.cut .bottom-layer,
.real-cake.cut .cream,.real-cake.cut .berry{animation:layerCut .8s cubic-bezier(.2,.8,.2,1) forwards}
.real-cake.cut .top-layer{--slice:-18px}.real-cake.cut .middle-layer{--slice:-13px}.real-cake.cut .bottom-layer{--slice:-8px}
.real-cake.cut .candle{animation:candleCut .8s ease forwards}
@keyframes cakeCut{45%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes layerCut{to{transform:translateX(var(--slice,12px)) rotate(var(--rot,1deg))}}
@keyframes candleCut{to{transform:translateX(-50%) translateX(-10px) rotate(-4deg)}}

/* More visible coordinated accents */
.section-head h2,.cake-card h2,.countdown-card h2{background:linear-gradient(90deg,#633f52,#b85c82,#76539c);-webkit-background-clip:text;background-clip:text;color:transparent}
.mini-card,.cake-card,.countdown-card,.message-box,.login-card{border-color:rgba(181,104,136,.25)}

/* --- Elegant birthday typography + special HBD page --- */
body{
  font-family:"Trebuchet MS","Segoe UI",sans-serif;
}
h1,h2,h3,.special-hbd h2,.signature{
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:.01em;
}
p,.message,.caption,.mini-card{
  letter-spacing:.015em;
  line-height:1.75;
}
.special-hbd{
  min-height:82vh;
  display:grid;
  place-items:center;
  padding:70px 18px;
  position:relative;
  overflow:hidden;
}
.special-hbd::before,
.special-hbd::after{
  content:"";
  position:absolute;
  width:280px;height:280px;border-radius:50%;
  filter:blur(12px);opacity:.42;pointer-events:none;
}
.special-hbd::before{background:#ffd1e1;top:-90px;left:-70px}
.special-hbd::after{background:#d8c7f2;bottom:-100px;right:-60px}
.special-hbd-inner{
  position:relative;z-index:2;
  max-width:760px;width:min(92vw,760px);
  padding:58px 34px;
  text-align:center;
  border:1px solid rgba(181,104,136,.24);
  border-radius:34px;
  background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(255,240,247,.66));
  box-shadow:0 30px 90px rgba(133,94,119,.18);
  animation:specialFloat 5s ease-in-out infinite;
}
.sparkle-line{font-size:22px;color:#c56b8b;letter-spacing:12px;margin-bottom:16px}
.special-kicker{
  color:#987485;text-transform:uppercase;letter-spacing:.22em;
  font-size:12px;margin:0 0 12px;
}
.special-hbd h2{
  font-size:clamp(42px,9vw,82px);
  margin:0;
  color:#5b4050;
  line-height:1.02;
}
.special-hbd h2 span{
  display:block;
  font-size:.52em;
  margin-top:12px;
  background:linear-gradient(90deg,#d5678c,#9c72bc);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.special-caption{
  max-width:600px;margin:28px auto 0;
  color:#725c68;font-size:17px;
}
.special-caption.short{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;color:#9a6178;
  font-size:18px;
}
.special-sign{
  margin-top:30px;color:#6b4d5c;
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
}
@keyframes specialFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
@media(max-width:560px){
  .special-hbd-inner{padding:46px 22px}
  .special-caption{font-size:15px}
}

.special-hbd.locked-section{display:none}
.special-hbd.visible{display:grid}
.special-hbd .continue-btn{margin-top:26px}
.special-sign{display:none}

#hbd-special.visible{display:grid!important;opacity:1}
#hbdContinue{position:relative;z-index:20;pointer-events:auto}

/* Unified pink buttons */
.primary,
.ghost.continue-btn,
#hbdContinue {
  color:#fff !important;
  background:linear-gradient(135deg,#e36f96 0%,#d65382 52%,#c84f88 100%) !important;
  border:1px solid rgba(255,255,255,.38) !important;
  box-shadow:0 12px 32px rgba(211,82,126,.24) !important;
}
.primary:hover,
.ghost.continue-btn:hover,
#hbdContinue:hover {
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 16px 38px rgba(211,82,126,.30) !important;
}