*{box-sizing:border-box}
:root{
  --bg1:#ead5ff;
  --bg2:#f2d7fb;
  --bg3:#fbe4f0;
  --pink:#da0879;
  --pink-hi:#f03c9d;
  --pink-deep:#bb0566;
  --ink:#302135;
  --muted:#8a728a;
  --glass:rgba(255,255,255,.61);
  --glass-strong:rgba(255,255,255,.78);
  --line:rgba(115,55,101,.10);
  --shadow:0 30px 80px rgba(91,38,88,.17);
}
html{min-height:100%;background:var(--bg2)}
body{
  margin:0;min-height:100svh;color:var(--ink);
  font-family:"Vazirmatn",Tahoma,"Segoe UI",Arial,sans-serif;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
button,input{font:inherit}
button{-webkit-tap-highlight-color:transparent}
.background{
  position:fixed;inset:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(circle at 50% -5%,rgba(255,255,255,.70),transparent 31%),
    linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 48%,var(--bg3) 100%);
}
.glow{position:absolute;border-radius:50%;filter:blur(58px);opacity:.48}
.g1{width:280px;height:280px;background:#ff76bc;right:-120px;top:-95px}
.g2{width:310px;height:310px;background:#986fff;left:-155px;top:32%}
.g3{width:270px;height:270px;background:#ff9fcc;right:-120px;bottom:-105px}
.grain{
  position:absolute;inset:0;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}
.app{
  position:relative;z-index:2;min-height:100svh;padding:38px 16px 24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.mini-logo{
  width:44px;height:44px;margin-bottom:14px;border-radius:16px;display:grid;place-items:center;
  background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.72);
  box-shadow:0 13px 30px rgba(92,43,88,.11);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.shell{
  position:relative;overflow:hidden;width:min(100%,420px);min-height:568px;
  padding:25px 22px 24px;border-radius:34px;
  background:linear-gradient(145deg,rgba(255,255,255,.67),rgba(255,255,255,.52));
  border:1px solid rgba(255,255,255,.76);box-shadow:var(--shadow);
  backdrop-filter:blur(28px) saturate(1.1);-webkit-backdrop-filter:blur(28px) saturate(1.1);
}
.shell::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.90);
}
.topline{height:28px;display:grid;place-items:start center}
.steps{display:flex;direction:ltr;gap:8px;align-items:center}
.step-dot{width:8px;height:8px;border-radius:999px;background:#d7b8d2;transition:.35s cubic-bezier(.2,.8,.2,1)}
.step-dot.active{width:31px;background:linear-gradient(90deg,#ef4aa8,#d20776);box-shadow:0 4px 10px rgba(217,8,121,.16)}
.panel{display:none;text-align:center;animation:panelIn .46s cubic-bezier(.2,.8,.2,1)}
.panel.active{display:block}
@keyframes panelIn{from{opacity:0;transform:translateY(12px) scale(.988)}to{opacity:1;transform:none}}
.hero-emoji{
  font-size:52px;line-height:1;margin:11px 0 15px;
  filter:drop-shadow(0 8px 12px rgba(86,37,82,.10));
  animation:emojiFloat 2.7s ease-in-out infinite;
}
@keyframes emojiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.kicker{font-size:11px;font-weight:800;color:var(--pink);margin:0 0 9px}
h1,h2{margin:0;line-height:1.58;letter-spacing:-.45px}
h1{font-size:25px;font-weight:900}
h2{font-size:24px;font-weight:900}
.desc{
  max-width:330px;margin:8px auto 20px;color:var(--muted);
  font-size:12.5px;line-height:2;font-weight:500;
}
.choice-stage{
  position:relative;height:204px;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:14px 9px;overflow:visible;
}
.choice{
  border:0;border-radius:19px;cursor:pointer;font-weight:900;
  transition:transform .30s cubic-bezier(.18,.9,.25,1),opacity .25s,filter .25s;
}
.yes{
  min-width:160px;padding:16px 24px;color:#fff;position:relative;z-index:4;
  background:linear-gradient(135deg,var(--pink-hi),var(--pink));
  box-shadow:0 15px 31px rgba(207,10,113,.27),inset 0 1px 0 rgba(255,255,255,.28);
  transform-origin:center;
}
.yes::before{
  content:"";position:absolute;inset:2px;border-radius:17px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 50%);
}
.yes span{position:relative;z-index:1}
.heart-mark{margin-right:5px}
.no{
  min-width:73px;padding:15px 16px;position:relative;z-index:2;
  color:#7e667a;background:rgba(255,255,255,.72);border:1px solid var(--line);
  box-shadow:0 10px 20px rgba(75,40,70,.06);
}
.reaction{min-height:23px;margin:2px 0 0;color:#9c7c96;font-size:11px;font-weight:600}
.picker-card,.clock-card{
  margin:27px 0 18px;padding:17px;border-radius:24px;text-align:right;
  background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.78);
  box-shadow:0 16px 34px rgba(89,42,83,.07),inset 0 1px 0 rgba(255,255,255,.8);
}
.picker-label{font-size:11px;font-weight:800;color:#6e556a;margin:0 2px 9px}
input[type=date],input[type=time]{
  width:100%;height:54px;padding:0 14px;border-radius:17px;outline:0;
  border:1px solid rgba(112,60,99,.11);background:rgba(255,255,255,.79);
  color:var(--ink);direction:ltr;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
input:focus{border-color:rgba(218,8,121,.32);box-shadow:0 0 0 4px rgba(218,8,121,.07)}
.field-help{margin:10px 2px 0;color:#9a8197;font-size:10px}
.main-action{
  width:100%;border:0;border-radius:18px;padding:16px 18px;cursor:pointer;color:#fff;font-weight:900;
  background:linear-gradient(135deg,var(--pink-hi),var(--pink));
  box-shadow:0 14px 29px rgba(210,11,116,.24),inset 0 1px 0 rgba(255,255,255,.25);
}
.main-action:active,.yes:active{filter:brightness(.97);transform:translateY(1px)}
.clock-card{text-align:center}
.clock-display{
  direction:ltr;font-size:43px;font-weight:500;letter-spacing:2.5px;color:#493249;
  margin:1px 0 13px;
}
.clock-line{height:1px;background:linear-gradient(90deg,transparent,rgba(117,63,104,.14),transparent);margin-bottom:14px}
.clock-card input{height:48px;text-align:center}
.reset-time{
  margin-top:10px;border:0;background:transparent;color:#a07c96;font-size:10px;cursor:pointer;font-weight:700
}
.ticket{
  margin:21px 0 14px;padding:17px 18px 15px;border-radius:25px;text-align:right;
  background:rgba(255,255,255,.79);border:1px solid rgba(218,8,121,.10);
  box-shadow:0 17px 36px rgba(92,44,85,.08);
}
.ticket-head{display:flex;align-items:center;justify-content:space-between}
.ticket-head>div:first-child{display:grid;gap:4px}
.ticket-head small{color:var(--muted);font-size:10px}
.ticket-head strong{font-size:15px;color:var(--pink);font-weight:900}
.ticket-icon{font-size:27px}
.perforation{position:relative;margin:14px -18px 3px;border-top:1px dashed rgba(113,67,102,.17)}
.perforation::before,.perforation::after{
  content:"";position:absolute;top:-7px;width:13px;height:13px;border-radius:50%;background:#efd6f4
}
.perforation::before{right:-7px}.perforation::after{left:-7px}
.ticket-row{
  display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid rgba(109,63,98,.065);font-size:11px
}
.ticket-row span{color:var(--muted)}.ticket-row b{font-size:11px;text-align:left}
.ticket-note{padding-top:12px;color:#7c6378;font-size:10.5px;line-height:1.9}
.ending{font-size:12px;font-weight:800;color:#684f64;margin:9px 0 14px}
.ghost-action{
  width:100%;padding:14px;border-radius:17px;cursor:pointer;font-weight:800;
  color:#755b70;background:rgba(255,255,255,.61);border:1px solid var(--line)
}
.final-heart{animation:finalPulse 1.6s ease-in-out infinite}
@keyframes finalPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
footer{direction:ltr;margin-top:13px;color:rgba(70,45,69,.45);font-size:9px}
footer span{color:var(--pink)}
.float-heart{
  position:absolute;bottom:-40px;opacity:0;will-change:transform,opacity;
  animation:floatUp linear forwards;filter:drop-shadow(0 4px 8px rgba(120,46,100,.08))
}
@keyframes floatUp{
  0%{transform:translate3d(0,0,0) rotate(0) scale(.7);opacity:0}
  12%{opacity:.42}80%{opacity:.18}
  100%{transform:translate3d(var(--drift),-112vh,0) rotate(28deg) scale(1.16);opacity:0}
}
.confetti{
  position:fixed;left:50%;top:50%;z-index:30;pointer-events:none;
  animation:confetti 1.55s cubic-bezier(.15,.75,.2,1) forwards
}
@keyframes confetti{
  from{transform:translate(-50%,-50%) rotate(var(--r)) translateX(0) scale(.45);opacity:1}
  to{transform:translate(-50%,-50%) rotate(var(--r)) translateX(var(--d)) scale(1.2);opacity:0}
}
.toast{
  position:fixed;z-index:50;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translate(-50%,20px);opacity:0;pointer-events:none;
  padding:10px 14px;border-radius:15px;background:rgba(50,31,47,.88);color:white;
  font-size:11px;font-weight:700;box-shadow:0 12px 30px rgba(40,23,38,.16);
  transition:.28s ease;white-space:nowrap
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.shake{animation:shake .27s linear}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(6px)}75%{transform:translateX(-6px)}}
@media(max-width:370px){
  .app{padding-inline:12px}.shell{padding:22px 16px;min-height:540px;border-radius:29px}
  h1,h2{font-size:22px}.choice-stage{height:188px}.hero-emoji{font-size:48px}
}
@media(max-height:690px){
  .app{justify-content:flex-start;padding-top:18px}.mini-logo{margin-bottom:9px}
  .shell{min-height:535px}.hero-emoji{margin-top:4px}.choice-stage{height:178px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}