*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Shantell Sans',cursive;overflow-x:hidden;background:#1a0a2e;color:#fff}
#loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(135deg,#1a0a2e,#2d1b69,#1a0a2e);transition:opacity 1s}
#loader.hidden{opacity:0;pointer-events:none}
.loader-heart{font-size:5rem;animation:pulse 1s infinite}
.loader-text{margin-top:1.5rem;font-size:1.4rem;color:#f9a8d4;animation:fadeIO 2s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@keyframes fadeIO{0%,100%{opacity:.4}50%{opacity:1}}
canvas{position:fixed;inset:0;pointer-events:none}
#sparkleCanvas{z-index:9999;pointer-events:none}#fireworksCanvas{z-index:2}
.main-bg{min-height:100vh;background:linear-gradient(160deg,#0f0520,#1a0a3a 30%,#2a1050 60%,#150830);position:relative}
.stars{position:fixed;inset:0;pointer-events:none;z-index:1}
.star{position:absolute;border-radius:50%;background:#fff;animation:twinkle var(--dur) ease-in-out infinite var(--delay)}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
.screen{display:flex;visibility:hidden;opacity:0;transform:scale(.95) translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.34,1.56,.64,1),visibility .7s;position:absolute;inset:0;pointer-events:none;overflow-y:auto;flex-direction:column;align-items:center;justify-content:center;padding:2rem;z-index:1}
.screen.active{visibility:visible;opacity:1;transform:scale(1) translateY(0);pointer-events:all;z-index:10}
.glow-title{font-family:'Dancing Script',cursive;font-size:clamp(2rem,6vw,3.5rem);background:linear-gradient(90deg,#f9a8d4,#c084fc,#f9a8d4);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 3s linear infinite;text-align:center;margin-bottom:1.5rem}
@keyframes shimmer{0%{background-position:200%}100%{background-position:-200%}}
.countdown-boxes{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-bottom:2rem}
.cbox{background:rgba(255,255,255,.06);backdrop-filter:blur(20px);border:1px solid rgba(249,168,212,.25);border-radius:1.5rem;padding:1.5rem 1rem;width:110px;text-align:center;transition:transform .3s,box-shadow .3s}
.cbox:hover{transform:translateY(-8px) scale(1.05);box-shadow:0 20px 40px rgba(249,168,212,.2)}
.cbox .num{font-size:2.5rem;font-weight:800;background:linear-gradient(180deg,#f9a8d4,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.cbox .lbl{font-size:.8rem;color:#d8b4fe;margin-top:.3rem;text-transform:uppercase;letter-spacing:1px}
.cbox .ico{margin-top:.4rem;font-size:1.2rem}
.glass-box{background:rgba(255,255,255,.05);backdrop-filter:blur(20px);border:1px solid rgba(249,168,212,.15);border-radius:2rem;padding:1.5rem 2rem;max-width:500px;text-align:center}
.glass-box p{color:#e9d5ff;font-size:1.1rem;line-height:1.6}
.dots{display:flex;justify-content:center;gap:.5rem;margin-top:1rem}
.dot{width:10px;height:10px;border-radius:50%;background:#f472b6;animation:dotP 1.5s infinite}
.dot:nth-child(2){animation-delay:.3s}.dot:nth-child(3){animation-delay:.6s}
@keyframes dotP{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.5);opacity:1}}
.glow-btn{margin-top:2rem;padding:1rem 3rem;font-family:'Shantell Sans',cursive;font-size:1.3rem;font-weight:700;color:#fff;border:none;border-radius:50px;cursor:pointer;background:linear-gradient(135deg,#ec4899,#8b5cf6,#ec4899);background-size:200%;animation:btnG 3s infinite,btnF 2.5s infinite;box-shadow:0 0 30px rgba(236,72,153,.4);transition:transform .2s}
.glow-btn:hover{transform:scale(1.08)}.glow-btn:active{transform:scale(.95)}
@keyframes btnG{0%,100%{background-position:0%;box-shadow:0 0 30px rgba(236,72,153,.4)}50%{background-position:100%;box-shadow:0 0 50px rgba(236,72,153,.6)}}
@keyframes btnF{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.big-title{font-family:'Dancing Script',cursive;font-size:clamp(2.5rem,8vw,5rem);text-align:center;background:linear-gradient(90deg,#f9a8d4,#fbbf24,#c084fc,#f9a8d4);background-size:300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 4s linear infinite;margin-bottom:.5rem}
.subtitle{font-size:clamp(1.3rem,4vw,2rem);color:#f9a8d4;margin-bottom:1.5rem;text-align:center}
.icons-row{display:flex;gap:1rem;justify-content:center;margin-bottom:1rem;font-size:2rem}
.icons-row span{animation:ib 2s infinite;display:inline-block}
.icons-row span:nth-child(2){animation-delay:.3s}.icons-row span:nth-child(3){animation-delay:.6s}
@keyframes ib{0%,100%{transform:translateY(0)}25%{transform:translateY(-12px) rotate(-5deg)}75%{transform:translateY(-6px) rotate(5deg)}}
.card3d{perspective:1200px;width:min(380px,90vw);height:250px;margin:1rem auto;cursor:pointer}
.card-in{width:100%;height:100%;position:relative;transition:transform .8s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.card3d.flipped .card-in{transform:rotateY(180deg)}
.cfront,.cback{position:absolute;inset:0;border-radius:1.5rem;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem}
.cfront{background:linear-gradient(135deg,#ec4899,#8b5cf6);box-shadow:0 20px 60px rgba(236,72,153,.3)}
.cfront h3{font-size:1.2rem;line-height:1.4;margin-bottom:.8rem;color:#fff;text-align:center}.cfront .gift{font-size:3.5rem;animation:gs 2s infinite}
@keyframes gs{0%,100%{transform:rotate(0) scale(1)}15%{transform:rotate(-8deg) scale(1.1)}30%{transform:rotate(8deg) scale(1.1)}45%{transform:rotate(-5deg)}60%{transform:rotate(5deg)}}
.cfront .hint{margin-top:.8rem;font-size:.85rem;color:rgba(255,255,255,.7);animation:fadeIO 2s infinite}
.cback{background:rgba(255,255,255,.95);transform:rotateY(180deg);box-shadow:0 20px 60px rgba(236,72,153,.2)}
.cback p{color:#6b21a8;font-size:.95rem;line-height:1.7;text-align:center;margin-bottom:.4rem}
.cback .ha{font-size:2rem;animation:pulse 1.5s infinite;margin-top:.3rem}
.nav-btn{margin-top:1.5rem;padding:.8rem 2rem;font-family:'Shantell Sans',cursive;font-size:1.1rem;font-weight:700;color:#fff;border:2px solid rgba(249,168,212,.4);border-radius:50px;cursor:pointer;background:rgba(255,255,255,.08);backdrop-filter:blur(10px);transition:all .3s}
.nav-btn:hover{background:rgba(249,168,212,.2);transform:scale(1.05);box-shadow:0 0 25px rgba(249,168,212,.3)}
.reasons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;max-width:700px;width:100%;margin:1.5rem auto}
.reason-card{background:rgba(255,255,255,.06);backdrop-filter:blur(15px);border:1px solid rgba(249,168,212,.2);border-radius:1.5rem;padding:1.2rem;text-align:center;transition:all .3s;opacity:0;animation:cardIn .6s forwards}
.reason-card:hover{transform:translateY(-5px) scale(1.03);border-color:#f472b6;box-shadow:0 15px 30px rgba(244,114,182,.15)}
.reason-card .emoji{font-size:2rem;margin-bottom:.5rem;display:block}
.reason-card p{color:#e9d5ff;font-size:.9rem;line-height:1.5}
@keyframes cardIn{to{opacity:1;transform:translateY(0)}}
/* Custom 3D Layered Cake */
.cake-3d-box {
  position: relative;
  width: 240px;
  height: 200px;
  margin: 1.5rem auto 1rem auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cake-3d-box:hover {
  transform: scale(1.08) translateY(-5px);
}
.candles-group {
  display: flex;
  gap: 16px;
  position: absolute;
  top: 0px;
  z-index: 10;
}
.candle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flame-glow {
  width: 12px;
  height: 18px;
  background: radial-gradient(ellipse at bottom, #ffe066 10%, #ff922b 60%, transparent 90%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0 0 15px #ff922b, 0 0 30px #ffe066;
  animation: flameFlicker 0.4s infinite alternate ease-in-out;
  transition: opacity 0.6s ease, transform 0.6s ease;
  margin-bottom: 2px;
}
.candle-stick {
  width: 8px;
  height: 32px;
  background: repeating-linear-gradient(45deg, #f472b6, #f472b6 6px, #ffffff 6px, #ffffff 12px);
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.cake-tier-top {
  width: 130px;
  height: 52px;
  background: linear-gradient(180deg, #fce7f3 0%, #f472b6 100%);
  border-radius: 20px 20px 10px 10px;
  position: relative;
  z-index: 5;
  box-shadow: inset 0 4px 6px rgba(255,255,255,0.7), 0 4px 10px rgba(0,0,0,0.25);
  display: flex;
  justify-content: center;
  align-items: center;
}
.cake-tier-top::before {
  content: '🍓 ✨ 🍓';
  font-size: 0.9rem;
}
.cake-tier-bottom {
  width: 190px;
  height: 68px;
  background: linear-gradient(180deg, #fbcfe8 0%, #c084fc 100%);
  border-radius: 24px 24px 12px 12px;
  position: relative;
  margin-top: -6px;
  z-index: 4;
  box-shadow: inset 0 4px 8px rgba(255,255,255,0.7), 0 8px 20px rgba(0,0,0,0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}
.cake-tier-bottom::before {
  content: '💖 ✨ 💖';
  font-size: 1.1rem;
}
.cake-plate-base {
  width: 230px;
  height: 16px;
  background: linear-gradient(90deg, #cbd5e1, #ffffff, #94a3b8);
  border-radius: 50%;
  margin-top: -6px;
  z-index: 3;
  box-shadow: 0 12px 30px rgba(244, 114, 182, 0.4);
}
@keyframes flameFlicker {
  0% { transform: scale(1) rotate(-4deg); box-shadow: 0 0 15px #ff922b, 0 0 25px #ffe066; }
  100% { transform: scale(1.15) rotate(4deg); box-shadow: 0 0 20px #ff922b, 0 0 35px #ffe066; }
}
.blown .flame-glow {
  opacity: 0 !important;
  transform: scale(0) !important;
}
.wish-msg{color:#f9a8d4;font-size:1.2rem;margin-top:1rem;opacity:0;transition:opacity .5s;text-align:center}
.wish-msg.show{opacity:1}
.letter-box{max-width:550px;background:rgba(255,255,255,.06);backdrop-filter:blur(20px);border:1px solid rgba(249,168,212,.2);border-radius:2rem;padding:2rem;margin:1rem auto}
.letter-box p{color:#e9d5ff;font-size:1rem;line-height:1.8;text-align:center;margin-bottom:.8rem}
.letter-box .sign{color:#f472b6;font-weight:700;font-size:1.1rem}
.float-hearts{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.fh{position:absolute;opacity:0;animation:fu var(--dur) linear infinite var(--delay)}
@keyframes fu{0%{opacity:0;transform:translateY(100vh) rotate(0) scale(0)}10%{opacity:.8}90%{opacity:.6}100%{opacity:0;transform:translateY(-10vh) rotate(720deg) scale(1)}}
.music-btn{position:fixed;top:1.5rem;right:1.5rem;z-index:100;width:50px;height:50px;border-radius:50%;border:2px solid rgba(249,168,212,.4);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);cursor:pointer;font-size:1.5rem;display:flex;align-items:center;justify-content:center;transition:all .3s}
.music-btn:hover{background:rgba(249,168,212,.2);transform:scale(1.1)}
.music-btn.on{border-color:#f472b6;box-shadow:0 0 20px rgba(244,114,182,.3)}
.page-dots{position:fixed;right:1.5rem;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:10px}
.pdot{width:12px;height:12px;border-radius:50%;border:2px solid rgba(249,168,212,.4);background:transparent;cursor:pointer;transition:all .3s}
.pdot.active{background:#f472b6;box-shadow:0 0 10px rgba(244,114,182,.5)}
.confetti{position:fixed;z-index:40;pointer-events:none;animation:cfall var(--dur) linear forwards}
@keyframes cfall{0%{opacity:1;transform:translateY(-10vh) rotate(0)}100%{opacity:0;transform:translateY(110vh) rotate(var(--rot))}}
.bottom-msg{max-width:500px;text-align:center;margin-top:1.5rem}
.bottom-msg p{color:#e9d5ff;font-size:1.05rem;line-height:1.8;margin-bottom:.8rem}
.hl{color:#f9a8d4;font-weight:700}

/* Grand Finale I Love You Banner */
.love-momo-container {
  margin-top: 1.5rem;
  padding: 1.8rem 2.5rem;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(139, 92, 246, 0.25));
  backdrop-filter: blur(20px);
  border: 2px solid rgba(249, 168, 212, 0.5);
  border-radius: 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 40px rgba(236, 72, 153, 0.35);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 540px;
  width: 100%;
  animation: pulseGlow 2.5s infinite alternate ease-in-out;
}
.love-momo-container:hover {
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 0 60px rgba(236, 72, 153, 0.7);
  border-color: #f472b6;
}
.pulsing-heart-bg {
  position: absolute;
  font-size: 8rem;
  opacity: 0.12;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 1.2s infinite ease-in-out;
  pointer-events: none;
}
.love-momo-title {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(2.5rem, 6vw, 3.8rem);
  background: linear-gradient(90deg, #f9a8d4, #fbbf24, #f472b6, #c084fc, #f9a8d4);
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
  margin-bottom: 0.3rem;
  position: relative;
  z-index: 2;
}
.love-momo-subtitle {
  color: #e9d5ff;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}
.love-burst-btn {
  padding: 0.7rem 1.8rem;
  font-family: 'Shantell Sans', cursive;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
  animation: btnF 2s infinite ease-in-out;
  position: relative;
  z-index: 2;
}
@keyframes pulseGlow {
  0% { box-shadow: 0 0 30px rgba(236, 72, 153, 0.3); }
  100% { box-shadow: 0 0 50px rgba(236, 72, 153, 0.6); }
}

/* Secret Lock Gate */
#lockGate {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f0520, #2a1050, #150830);
  backdrop-filter: blur(25px);
  padding: 1.5rem;
  transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s;
}
#lockGate.unlocked {
  opacity: 0;
  transform: scale(1.1);
  pointer-events: none;
  visibility: hidden;
}
.lock-card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(249, 168, 212, 0.3);
  border-radius: 2.5rem;
  padding: 2.5rem 2rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(236, 72, 153, 0.25);
  animation: cardFloat 3s infinite ease-in-out;
}
.lock-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  transition: transform 0.4s ease;
}
.lock-title {
  font-family: 'Dancing Script', cursive;
  font-size: 2.5rem;
  background: linear-gradient(90deg, #f9a8d4, #c084fc, #f9a8d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}
.lock-subtitle {
  color: #e9d5ff;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}
.input-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
#passInput {
  width: 100%;
  padding: 0.9rem 1.2rem;
  border-radius: 50px;
  border: 2px solid rgba(249, 168, 212, 0.4);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: 'Shantell Sans', cursive;
  font-size: 1.3rem;
  text-align: center;
  letter-spacing: 4px;
  outline: none;
  transition: all 0.3s ease;
}
#passInput:focus {
  border-color: #f472b6;
  box-shadow: 0 0 20px rgba(244, 114, 182, 0.4);
  background: rgba(255, 255, 255, 0.15);
}
.unlock-btn {
  width: 100%;
  padding: 0.9rem;
  border-radius: 50px;
  border: none;
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: #fff;
  font-family: 'Shantell Sans', cursive;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(236, 72, 153, 0.4);
  transition: all 0.3s ease;
}
.unlock-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 15px 35px rgba(236, 72, 153, 0.6);
}
.lock-error {
  color: #fb7185;
  font-size: 0.9rem;
  margin-top: 0.8rem;
  min-height: 1.4rem;
  font-weight: 700;
}
.hint-btn {
  background: transparent;
  border: none;
  color: #d8b4fe;
  font-family: 'Shantell Sans', cursive;
  font-size: 0.88rem;
  margin-top: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  opacity: 0.85;
  transition: all 0.3s ease;
}
.hint-btn:hover {
  opacity: 1;
  color: #f9a8d4;
  transform: scale(1.05);
}
.hint-box {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1.5px dashed rgba(249, 168, 212, 0.4);
  border-radius: 1.2rem;
  padding: 1.2rem;
  margin-top: 0.8rem;
  width: 100%;
  box-sizing: border-box;
  animation: slideDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hint-box-title {
  color: #f9a8d4;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  text-align: center;
}
.hint-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
}
.hint-input-wrap input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  border-radius: 50px;
  border: 1.5px solid rgba(249, 168, 212, 0.4);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: 'Shantell Sans', cursive;
  font-size: 1rem;
  text-align: center;
  outline: none;
  transition: all 0.3s ease;
}
.hint-input-wrap input:focus {
  border-color: #f472b6;
  box-shadow: 0 0 15px rgba(244, 114, 182, 0.4);
}
.hint-input-wrap button {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem;
  border-radius: 50px;
  border: none;
  background: linear-gradient(135deg, #f472b6, #8b5cf6);
  color: #fff;
  font-family: 'Shantell Sans', cursive;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(244, 114, 182, 0.3);
  transition: all 0.3s ease;
}
.hint-input-wrap button:hover {
  transform: scale(1.03);
}
.hint-text {
  font-size: 0.88rem;
  margin-top: 0.6rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  animation: fadeIn 0.4s ease;
}
.hint-success {
  color: #f9a8d4;
  background: rgba(244, 114, 182, 0.18);
  border: 1px solid rgba(249, 168, 212, 0.5);
}
.hint-error {
  color: #fb7185;
  background: rgba(251, 113, 133, 0.18);
  border: 1px solid rgba(251, 113, 133, 0.5);
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.shake {
  animation: shake 0.5s ease-in-out;
}
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

/* Digital Romantic Coupons */
.coupons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  max-width: 820px;
  width: 100%;
  margin: 1.5rem auto;
}
.coupon-card {
  perspective: 1000px;
  height: 190px;
  cursor: pointer;
}
.coupon-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
}
.coupon-card.flipped .coupon-inner {
  transform: rotateY(180deg);
}
.coupon-front, .coupon-back {
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.coupon-front {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.15), rgba(192, 132, 252, 0.15));
  backdrop-filter: blur(15px);
  border: 2px dashed rgba(249, 168, 212, 0.5);
  transition: border-color 0.3s, transform 0.3s;
}
.coupon-card:hover .coupon-front {
  border-color: #f472b6;
  transform: translateY(-4px);
}
.coupon-front h4 {
  color: #f9a8d4;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.4rem;
}
.coupon-front p {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  line-height: 1.4;
}
.coupon-front .tap-tag {
  font-size: 0.8rem;
  color: #d8b4fe;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  border: 1px solid rgba(249, 168, 212, 0.3);
  animation: fadeIO 2s infinite;
}
.coupon-back {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  transform: rotateY(180deg);
  border: 2px solid #f472b6;
  box-shadow: 0 15px 40px rgba(236, 72, 153, 0.4);
}
.coupon-back .stamp {
  font-size: 0.9rem;
  font-weight: 800;
  color: #fbbf24;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.3rem 1rem;
  border-radius: 20px;
  margin-bottom: 0.6rem;
  letter-spacing: 2px;
}
.coupon-back p {
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.45;
}