/* ===== ROMANTIC DARK RED THEME ===== */
:root{
  --romantic-bg:#0d0508;
  --romantic-bg2:#1a080d;
  --romantic-card:rgba(35,10,17,.82);
  --romantic-card-solid:#220b12;
  --romantic-red:#b51f3f;
  --romantic-red2:#e33b5f;
  --romantic-pink:#ff718d;
  --romantic-soft:#f3b6c2;
  --romantic-text:#fff1f4;
  --romantic-muted:#c99da7;
  --romantic-line:rgba(255,113,141,.25);
}

/* Global dark romantic atmosphere */
#app{
  background:var(--romantic-bg);
  color:var(--romantic-text);
}
.page{
  color:var(--romantic-text);
}

/* Shared buttons / cards */
button{
  font-family:'Poppins',sans-serif;
}
.page button:not(.mute-btn){
  background:linear-gradient(135deg,var(--romantic-red2),var(--romantic-red));
  color:#fff;
  box-shadow:0 8px 25px rgba(181,31,63,.28);
}
.page button:not(.mute-btn):hover{
  box-shadow:0 12px 35px rgba(227,59,95,.4);
}
.mute-btn{
  background:rgba(30,7,13,.72)!important;
  color:#ffd9e1;
  border:1px solid var(--romantic-line);
}

/* ===== WELCOME ===== */
#page-index{
  background:
    radial-gradient(circle at 50% 20%,rgba(181,31,63,.32),transparent 38%),
    radial-gradient(circle at 15% 85%,rgba(102,10,35,.32),transparent 35%),
    linear-gradient(145deg,#090305,#1b070d 55%,#0b0306);
}
#page-index .hearts span{
  color:#e33b5f;
  text-shadow:0 0 18px rgba(227,59,95,.65);
}
#page-index .progress{
  background:rgba(255,255,255,.08);
}
#page-index .progress-fill{
  background:linear-gradient(90deg,#8d1634,#ff5c7d)!important;
}
#page-index .card{
  background:rgba(31,8,14,.72)!important;
  border:1px solid rgba(255,113,141,.18);
  box-shadow:0 25px 70px rgba(0,0,0,.55),0 0 45px rgba(181,31,63,.1);
  backdrop-filter:blur(18px);
}
#page-index h1{color:#ffe2e8!important;}
#page-index p{color:var(--romantic-muted)!important;}

/* ===== PIN ===== */
#page-pin{
  background:
    radial-gradient(circle at 50% 30%,rgba(181,31,63,.28),transparent 42%),
    linear-gradient(145deg,#090305,#200810);
}
#page-pin .card{
  background:rgba(35,10,17,.78)!important;
  border:1px solid var(--romantic-line);
  box-shadow:0 25px 70px rgba(0,0,0,.6),0 0 45px rgba(181,31,63,.12);
}
#page-pin h2{color:#ff718d!important;}
#page-pin .dot{border-color:#b51f3f;}
#page-pin .dot.fill{background:#e33b5f;box-shadow:0 0 12px rgba(227,59,95,.45);}
#page-pin button{
  background:#2a0d15!important;
  color:#ffe8ed!important;
  border:1px solid rgba(255,113,141,.12)!important;
}
#page-pin .pin-hint{color:#c99da7!important;}

/* ===== CAKE ===== */
#page-cake{
  background:
    radial-gradient(circle at 50% 35%,rgba(181,31,63,.25),transparent 38%),
    linear-gradient(145deg,#0b0406,#210810);
}
#page-cake h1{color:#ff718d!important;}
#page-cake p{color:var(--romantic-muted)!important;}
#page-cake .bottom{background:linear-gradient(#a71e3d,#73132c);}
#page-cake .middle{background:linear-gradient(#c73554,#8f1734);}
#page-cake .top{background:#f0c4cb;}
#page-cake .candle{background:#f5d8dd;}
#page-cake .flame{background:#ff718d;box-shadow:0 0 18px #e33b5f;}

/* ===== GIFT BOX ===== */
#page-box{
  background:
    radial-gradient(circle at 50% 40%,rgba(181,31,63,.3),transparent 42%),
    linear-gradient(145deg,#0a0305,#200810);
}
#page-box h1{color:#ff718d!important;}
#page-box p{color:var(--romantic-muted)!important;}
#page-box .base{background:linear-gradient(145deg,#a91f3e,#641029);}
#page-box .lid{background:linear-gradient(145deg,#d83b5b,#92152f);}
#page-box .base::after,#page-box .lid::after,
#page-box .bow::before,#page-box .bow::after{background:#f0b3bd;}

/* ===== BALLOONS ===== */
#page-balloons{
  background:
    radial-gradient(circle at 50% 35%,rgba(181,31,63,.3),transparent 45%),
    linear-gradient(145deg,#090305,#1e070d);
}
#page-balloons h1{color:#ff718d!important;}
#page-balloons #counter{color:#c99da7!important;}
#page-balloons .balloon{
  background:linear-gradient(145deg,#e33b5f,#85142e);
  box-shadow:0 10px 25px rgba(0,0,0,.45),inset -8px -10px 0 rgba(0,0,0,.12),inset 10px 12px 0 rgba(255,255,255,.2);
}
#page-balloons .balloon::after{background:#8f5965;}

/* ===== LETTER ===== */
#page-letter{
  background:
    radial-gradient(circle at 50% 35%,rgba(181,31,63,.28),transparent 40%),
    linear-gradient(145deg,#090305,#200810)!important;
}
#page-letter .envelope-body{
  background:linear-gradient(160deg,#a91f3e,#68112b)!important;
  box-shadow:0 25px 55px rgba(0,0,0,.55),0 0 30px rgba(181,31,63,.2);
}
#page-letter .flap{
  background:linear-gradient(160deg,#cf3454,#85142e)!important;
}
#page-letter .seal{
  background:radial-gradient(circle at 35% 30%,#ff718d,#8d1432 72%)!important;
  color:#ffe8ed!important;
}
#page-letter .letter-paper{
  background:linear-gradient(145deg,#2a0d15,#18070c)!important;
  color:#ffe8ed!important;
  border:1px solid rgba(255,113,141,.2);
  box-shadow:0 25px 70px rgba(0,0,0,.65),0 0 40px rgba(181,31,63,.12);
}
#page-letter .letter-paper h2{color:#ff718d!important;}
#page-letter .letter-paper p,
#page-letter .typing-lines{color:#e7c3ca!important;}

/* ===== REASONS ===== */
#page-reasons{
  background:
    radial-gradient(circle at 50% 30%,rgba(181,31,63,.28),transparent 40%),
    linear-gradient(145deg,#090305,#210810)!important;
}
#page-reasons h1{color:#ff718d!important;}
#page-reasons #reasonsIntro{color:var(--romantic-muted)!important;}
#page-reasons .reason-card{
  background:linear-gradient(145deg,rgba(43,12,21,.95),rgba(26,7,13,.95))!important;
  border:1px solid rgba(255,113,141,.15);
  box-shadow:0 18px 45px rgba(0,0,0,.5),0 0 25px rgba(181,31,63,.08);
}
#page-reasons .reason-card p{color:#f4dce1!important;}
#page-reasons #reasonsCount{color:#ff718d!important;}
#page-reasons #reasonHeartBtn{filter:drop-shadow(0 6px 16px rgba(227,59,95,.5));}

/* ===== GALLERY ===== */
#page-gallery{
  background:
    radial-gradient(circle at 50% 30%,rgba(181,31,63,.25),transparent 42%),
    linear-gradient(145deg,#090305,#210810)!important;
}
#page-gallery h1{color:#ff718d!important;}
#page-gallery .page-leaf{
  background:linear-gradient(145deg,#2b0d16,#18070c)!important;
  border:1px solid rgba(255,113,141,.18);
  box-shadow:0 20px 50px rgba(0,0,0,.65);
}
#page-gallery .page-leaf h3,
#page-gallery .page-leaf p{color:#ffe4e9!important;}

/* ===== TIMELINE ===== */
#page-timeline{
  background:
    radial-gradient(circle at 50% 20%,rgba(181,31,63,.25),transparent 40%),
    linear-gradient(145deg,#090305,#200810)!important;
}
#page-timeline h1{color:#ff718d!important;}
#page-timeline .timeline-wrap::before{
  background:linear-gradient(#7f1832,#f05a78)!important;
}
#page-timeline .timeline-dot{
  background:#e33b5f!important;
  box-shadow:0 0 0 5px rgba(227,59,95,.18),0 0 18px rgba(227,59,95,.35);
}
#page-timeline .timeline-card{
  background:linear-gradient(145deg,#2a0d15,#18070c)!important;
  border:1px solid rgba(255,113,141,.15);
  box-shadow:0 15px 35px rgba(0,0,0,.5);
}
#page-timeline .timeline-date{color:#ff718d!important;}
#page-timeline .timeline-card h3{color:#ffd5dd!important;}
#page-timeline .timeline-card p{color:#cda7b0!important;}

/* ===== FLOWER ===== */
#page-flower{
  background:
    radial-gradient(circle at 50% 45%,rgba(181,31,63,.3),transparent 40%),
    linear-gradient(145deg,#090305,#210810)!important;
}
#page-flower #message{color:#ff718d!important;}
#page-flower .stem{background:#6f9c62;}
#page-flower .rose{filter:drop-shadow(0 0 18px rgba(227,59,95,.55));}

/* ===== FINAL ===== */
#page-final{
  background:
    radial-gradient(circle at 50% 45%,rgba(120,8,38,.28),transparent 38%),
    linear-gradient(145deg,#050204,#17060c)!important;
}
#page-final .achievement-tally{color:#f0b5c1!important;}
#page-final #title{color:#ffe4e9!important;}

/* ===== BUTTON UNIFICATION (page IDs otherwise out-specificity the shared rule) ===== */
#page-cake button,#page-box button,#page-gallery button,#page-timeline button,
#page-flower button,#page-final button,#page-letter button,#page-index button,
#page-reasons #reasonsNextBtn{
  background:linear-gradient(135deg,var(--romantic-red2),var(--romantic-red))!important;
  color:#fff!important;
  box-shadow:0 8px 25px rgba(181,31,63,.28)!important;
}
#page-cake button:disabled,#page-cake button.disabled{
  background:#5a1c28!important;color:#c99da7!important;opacity:.6!important;
}

/* ===== CAKE candle glow ===== */
#page-cake .flame{background:#ff9f6b;box-shadow:0 0 14px #e33b5f;}

/* ===== GIFT BOX reveal cards ===== */
#page-box .mini-gift{background:linear-gradient(160deg,#3a1119,#220a12)!important;box-shadow:0 8px 18px rgba(0,0,0,.4)!important;}
#page-box .mini-gift.opened{background:linear-gradient(160deg,#8d1634,#e33b5f)!important;}
#page-box .gift-reveal-card{background:#220b12!important;box-shadow:0 15px 35px rgba(0,0,0,.5)!important;}
#page-box .gift-reveal-card h3{color:#ff718d!important;}
#page-box .gift-reveal-card p{color:#e7c3ca!important;}

/* ===== BALLOONS golden note ===== */
#page-balloons .golden-note{background:#220b12!important;color:#ffd9a0!important;}

/* ===== LETTER ink accents ===== */
#page-letter .ink-word{color:#ff9db9!important;border-bottom-color:rgba(255,157,185,.45)!important;}
#page-letter .ink-tooltip-bubble{background:#2a0d15!important;}
#page-letter .ps-note{background:rgba(58,15,10,.55)!important;border-left-color:#e33b5f!important;color:#f0c9a0!important;}

/* ===== GALLERY page number ===== */
#page-gallery #galleryPageNum{color:#ff718d!important;}

/* ===== INDEX quote & FLOWER note ===== */
#page-index .index-quote{color:#ff718d!important;}
#page-flower .butterfly-note{background:#220b12!important;color:#ff9db9!important;box-shadow:0 10px 25px rgba(0,0,0,.5)!important;}

/* Better mobile readability */
@media(max-width:480px){
  .page p{color:#d0adb5;}
}

/* ===== BALLOON COMPLIMENTS ===== */
#page-balloons .compliment-note{
  position:absolute;
  z-index:20;
  max-width:230px;
  padding:12px 18px;
  border:1px solid rgba(255,150,180,.35);
  border-radius:18px;
  background:rgba(35,5,18,.88);
  color:#ffe1ea;
  font-size:15px;
  font-weight:600;
  line-height:1.35;
  text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,.35), 0 0 22px rgba(255,70,120,.22);
  backdrop-filter:blur(10px);
  animation:compliment-float 2.8s ease forwards;
}
@keyframes compliment-float{
  0%{opacity:0;transform:translateY(12px) scale(.88)}
  12%{opacity:1;transform:translateY(0) scale(1)}
  78%{opacity:1;transform:translateY(-28px) scale(1)}
  100%{opacity:0;transform:translateY(-52px) scale(.96)}
}