:root{--emerald:#719FC5;--emerald-deep:#638FB7;--ivory:#f7f0e5;--maroon:#D58FA8;--gold:#D9B3C1;--cream:#f5e8c9}
*{box-sizing:border-box}
html{min-height:100%;background:var(--emerald-deep)}
body{margin:0;min-height:100vh;color:var(--cream);font-family:'Cormorant Garamond',Georgia,serif;background:#638FB7}
.opening-page{position:relative;isolation:isolate;width:min(100%,480px);min-height:100svh;margin:0 auto;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:22px 9px 26px;background:linear-gradient(180deg,rgba(2,39,25,.2),rgba(2,39,25,.1)),url('assets/opening-background.png') center/cover fixed;background-color:var(--emerald);box-shadow:0 0 50px rgba(0,0,0,.28)}
.opening-page:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,28,18,.24),transparent 38%,rgba(0,25,17,.26))}
.verse-card{position:relative;width:min(100%,450px);min-height:535px;display:grid;place-items:center;margin:0 auto 8px;z-index:3;filter:drop-shadow(0 12px 20px rgba(0,0,0,.22))}
.verse-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.verse-content{position:relative;width:80%;max-width:350px;padding:52px 0 48px;color:#514438;text-align:center;z-index:1}
.bismillah{font-family:'Amiri',serif;font-size:clamp(20px,5.2vw,26px);line-height:1.8;margin:0 auto 15px;color:#4c3b30;max-width:100%;}
.arabic{font-family:'Amiri',serif;font-size:clamp(17px,4.1vw,21px);line-height:1.82;margin:0 auto 17px;color:#514438;max-width:100%;padding:0 5px;}
.translation{font-family:Georgia,serif;font-size:clamp(12px,2.95vw,13.5px);line-height:1.68;margin:0 auto;max-width:100%;color:#5d5045;padding:0 5px;}
.verse-ref{font-family:Georgia,serif;font-size:11.5px;letter-spacing:.4px;margin:18px 0 0;color:#6d5846}
.pearl-garland{position:absolute;z-index:1;top:-10px;left:-24px;width:150px;height:485px;opacity:.98;pointer-events:none;overflow:visible;filter:drop-shadow(1px 3px 4px rgba(0,0,0,.3))}
.music-button{position:relative;z-index:4;align-self:flex-start;margin:-72px 0 0 20px;width:54px;height:54px;border:1px solid rgba(245,224,184,.75);border-radius:50%;background:radial-gradient(circle at 35% 25%,#45444a,#09090d 65%);box-shadow:0 5px 14px rgba(0,0,0,.35);color:white;display:grid;place-items:center;cursor:pointer}
.music-icon{font-family:Arial,sans-serif;font-size:20px;margin-left:2px}.music-button.is-playing .music-icon{margin-left:0;font-size:17px}
.music-caption{align-self:flex-start;margin:3px 0 0 13px;z-index:3;font-family:'Alex Brush',cursive;font-size:15px;color:rgba(238,224,190,.8);transform:rotate(-5deg)}
.floral{position:absolute;z-index:2;pointer-events:none;filter:drop-shadow(0 4px 5px rgba(0,0,0,.18))}.floral-left{width:190px;height:300px;left:-10px;bottom:110px}.floral-right{width:205px;height:310px;right:-8px;bottom:105px}
.countdown{position:relative;z-index:2;width:100%;margin-top:auto;padding-top:26px;text-align:center;text-shadow:0 2px 7px rgba(0,0,0,.25)}
.countdown-title{font-size:clamp(21px,5.5vw,27px);letter-spacing:2.2px;font-weight:500;color:#f2e8d2;margin-bottom:8px}
.countdown-grid{display:flex;justify-content:center;align-items:flex-start;gap:clamp(5px,2vw,12px);font-family:Arial,sans-serif;font-variant-numeric:tabular-nums}
.countdown-grid>b{font-size:clamp(22px,6vw,31px);font-weight:300;line-height:1.15;color:#D9B3C1;opacity:.9}
.time-unit{min-width:52px;display:flex;flex-direction:column;align-items:center;gap:5px}.time-unit span{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(32px,9vw,46px);line-height:1;color:#f7f0e5}.time-unit.seconds span{color:#d6df38}.time-unit small{font-size:9px;letter-spacing:.45px;color:#e4ddc9}
.countdown-date{margin:13px 0 0;font-size:13px;letter-spacing:1px;color:#e8d8ad}.back-link{position:relative;z-index:4;margin-top:20px;color:#e5d2a3;text-decoration:none;font-size:12px;letter-spacing:.4px;border-bottom:1px solid rgba(229,210,163,.45);padding-bottom:3px}
@media(min-width:600px){body{padding:22px 0}.opening-page{min-height:calc(100vh - 44px);border:1px solid rgba(218,188,117,.25);border-radius:8px;background-attachment:scroll}.verse-card{margin-top:8px}.floral-left{left:0}.floral-right{right:0}.pearl-garland{left:-8px}}
@media(max-height:760px){.opening-page{padding-top:12px;padding-bottom:15px}.verse-card{min-height:500px;max-width:400px}.verse-content{padding-top:40px;padding-bottom:38px}.arabic{line-height:1.72}.translation{line-height:1.55}.floral-left,.floral-right{bottom:90px;transform:scale(.82);transform-origin:bottom}.pearl-garland{transform:scale(.9);transform-origin:top left}.countdown{padding-top:18px}.back-link{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

@media(max-width:380px){.opening-page{padding-left:7px;padding-right:7px}.verse-card{min-height:515px}.verse-content{width:78%;padding-top:46px;padding-bottom:42px}.bismillah{font-size:20px}.arabic{font-size:16.5px;line-height:1.72}.translation{font-size:11.8px;line-height:1.58}.pearl-garland{width:132px;height:450px;left:-17px}.music-button{margin-left:14px}}

/* Readable plaque proportions: generous text inset, soft paper texture and clear layered edges. */
.verse-card{isolation:isolate}
.verse-frame{z-index:0}
.verse-content{z-index:1;text-wrap:pretty}
.bismillah,.arabic,.translation,.verse-ref{overflow-wrap:anywhere}


/* V17: supplied transparent artwork combines the ayat plaque, pearl tasbih, and flowers. */
.opening-art{position:relative;z-index:3;width:min(100%,460px);margin:0 auto 0;flex:0 0 auto;line-height:0;isolation:isolate}
.opening-art-image{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 3px 7px rgba(62,83,105,.12));user-select:none;-webkit-user-drag:none}
.opening-art .music-button{position:absolute;left:5%;top:68%;margin:0;width:52px;height:52px;line-height:1}
.opening-art .music-caption{position:absolute;left:3%;top:78%;margin:0;line-height:1.2;font-size:15px}
.countdown{margin-top:0;padding-top:10px}
@media(min-width:600px){.opening-page{padding-top:14px}.opening-art{width:min(100%,460px)}}
@media(max-width:380px){.opening-art{width:100%}.opening-art .music-button{left:4%;top:68%;width:47px;height:47px}.opening-art .music-caption{left:2%;top:78%;font-size:13px}.countdown{padding-top:8px}}

/* V18: longer hanging tasbih while preserving the approved plaque position. */
.opening-art{
  width:min(100%,460px);
  height:436px;
  flex:0 0 436px;
  margin:0 auto;
  overflow:visible;
}
.opening-art-image{
  position:absolute;
  left:50%;
  top:-141px;
  transform:translateX(-50%);
  width:100%;
  height:auto;
  max-width:none;
}
.opening-art .music-button{left:19%;top:68%;margin:0;width:54px;height:54px}
.opening-art .music-caption{left:22%;top:78%;margin:0;font-size:14px}
.countdown{margin-top:0;padding-top:10px}
@media(max-width:380px){
  .opening-art{height:420px;flex-basis:420px}
  .opening-art-image{top:-135px}
  .opening-art .music-button{left:19%;top:68%;width:52px;height:52px}
  .opening-art .music-caption{left:22%;top:78%;font-size:13px}
  .countdown{padding-top:8px}
}


/* V21: match standalone Opening width to the editor's phone preview.
   Applied only when opening.html is opened directly; iframe preview is unchanged. */
.standalone-opening .opening-page{
  width:min(100%,390px);
}
@media (min-width:600px){
  .standalone-opening .opening-page{
    width:390px;
  }
}


/* V22: Countdown moves upward and uses the supplied green texture strip.
   The approved cover and Opening artwork/tasbih remain unchanged. */
.countdown{
  position:relative;
  z-index:2;
  isolation:isolate;
  margin-top:-48px;
  padding:16px 0 10px;
}
.countdown::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background-image:linear-gradient(rgba(3,47,30,.10),rgba(3,47,30,.10)),url('assets/countdown-texture.jpg');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  pointer-events:none;
}
@media(max-width:380px){
  .countdown{
    margin-top:-42px;
    padding:13px 0 9px;
  }
}


/* V25: flower hangs down the left edge toward the bottom of the countdown panel. */
.floral-left-reference{
  position:absolute;
  z-index:3;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  width:250px;
  height:auto;
  left:-4px;
  top:260px;
  object-fit:contain;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.18));
}
/* Keep countdown text crisp and readable above the decorative flower. */
.countdown{
  z-index:4;
}
.time-unit span{
  font-size:clamp(29px,8vw,42px);
}
.countdown-grid>b{
  font-size:clamp(20px,5.2vw,28px);
}
@media(max-width:380px){
  .floral-left-reference{
    width:235px;
    left:-5px;
    top:245px;
  }
  .time-unit span{
    font-size:clamp(28px,7.7vw,39px);
  }
}

/* V26: let the pink floral ornament sit above the countdown texture,
   while keeping the countdown labels/numbers readable above the flower. */
.floral-left-reference{
  z-index:2;
  width:282px;
  left:-7px;
  top:238px;
}
.countdown{
  z-index:auto;
  isolation:auto;
  position:relative;
  padding-top:13px;
}
.countdown::before{
  z-index:0;
}
.countdown > *{
  position:relative;
  z-index:3;
}
.countdown-grid{
  gap:clamp(2px,1.15vw,6px);
}
.time-unit{
  min-width:45px;
  gap:4px;
}
.time-unit span{
  font-size:clamp(27px,7.1vw,36px);
  letter-spacing:-.5px;
}
.countdown-grid>b{
  font-size:clamp(17px,4.6vw,23px);
  line-height:1.25;
}
.countdown-title{
  font-size:clamp(20px,5.1vw,25px);
  letter-spacing:1.8px;
  margin-bottom:7px;
}
.countdown-date{
  margin-top:10px;
  font-size:12px;
}
@media(max-width:380px){
  .floral-left-reference{
    width:268px;
    left:-8px;
    top:232px;
  }
  .time-unit{min-width:41px;}
  .time-unit span{font-size:clamp(25px,6.9vw,33px);}
  .countdown-grid{gap:2px;}
  .countdown{padding-top:11px;}
}


/* V123: blank ivory plaque with editable, sharp HTML verse text. */
.opening-art{position:relative;isolation:isolate;overflow:visible}
.opening-art-image{top:-70px!important;left:50%;transform:translateX(-50%);width:100%;height:auto;max-width:none;object-fit:contain}
.opening-verse-overlay{position:absolute;z-index:4;left:17%;top:48px;width:59%;height:330px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;color:#536F88;pointer-events:none;line-height:1.35}
.opening-verse-overlay p{box-sizing:border-box;width:100%;margin:0;overflow-wrap:anywhere}
.opening-verse-overlay .verse-bismillah{font-family:'Amiri',serif;font-size:clamp(15px,4.1vw,19px);font-weight:700;line-height:1.55;color:#466B8C;margin:0 0 7px}
.opening-verse-overlay .verse-arabic{font-family:'Amiri',serif;font-size:clamp(14px,3.7vw,17px);font-weight:700;line-height:1.72;color:#466B8C;margin:0 0 8px}
.opening-verse-overlay .verse-translation{font-family:Georgia,'Times New Roman',serif;font-size:clamp(9px,2.55vw,11px);font-weight:500;line-height:1.48;color:#40372c;margin:0 auto;max-width:96%}
.opening-verse-overlay .verse-reference{font-family:Georgia,'Times New Roman',serif;font-size:clamp(9px,2.4vw,10px);line-height:1.35;color:#554331;margin:7px 0 0;font-weight:600}
@media(min-width:600px){.opening-verse-overlay{left:17%;width:59%;top:48px}.opening-verse-overlay .verse-bismillah{font-size:19px}.opening-verse-overlay .verse-arabic{font-size:17px}.opening-verse-overlay .verse-translation{font-size:11px}}
@media(max-width:380px){.opening-art-image{top:-70px!important}.opening-verse-overlay{left:16%;width:60%;top:46px}.opening-verse-overlay .verse-bismillah{font-size:15px;margin-bottom:5px}.opening-verse-overlay .verse-arabic{font-size:13.5px;line-height:1.62;margin-bottom:6px}.opening-verse-overlay .verse-translation{font-size:9px;line-height:1.42}.opening-verse-overlay .verse-reference{font-size:9px;margin-top:5px}}

/* V125 standalone Opening geometry: match the main invitation layout. */
.opening-page .opening-art{width:100%;max-width:390px;height:448px;flex:0 0 448px;margin:0 auto;overflow:visible;position:relative}
.opening-page .opening-art-image{position:absolute;left:50%;top:-139px;transform:translateX(-50%);width:410px;max-width:none;height:auto;object-fit:contain;clip-path:inset(139px 0 0 0)}
.opening-page .opening-verse-overlay{left:22%;top:57px;width:56%;height:292px;padding:0;justify-content:flex-start;overflow:visible;line-height:1.32}
.opening-page .opening-verse-overlay .verse-bismillah{font-size:clamp(14px,3.9vw,17px);line-height:1.45;margin:0 0 5px}
.opening-page .opening-verse-overlay .verse-arabic{font-size:clamp(12.5px,3.45vw,15px);line-height:1.55;margin:0 0 6px}
.opening-page .opening-verse-overlay .verse-translation{font-size:clamp(9px,2.45vw,10px);line-height:1.38;max-width:100%}
.opening-page .opening-verse-overlay .verse-reference{font-size:clamp(8.5px,2.25vw,9.5px);line-height:1.25;margin:5px 0 0}
@media(max-width:380px){.opening-page .opening-art{height:448px;flex-basis:448px}.opening-page .opening-art-image{top:-139px;clip-path:inset(139px 0 0 0)}.opening-page .opening-verse-overlay{left:22%;top:57px;width:56%;height:292px}.opening-page .opening-verse-overlay .verse-bismillah{font-size:14px;margin-bottom:4px}.opening-page .opening-verse-overlay .verse-arabic{font-size:12.5px;line-height:1.48;margin-bottom:5px}.opening-page .opening-verse-overlay .verse-translation{font-size:9px;line-height:1.34}.opening-page .opening-verse-overlay .verse-reference{font-size:8.5px;margin-top:4px}}


/* V126: compact vertical spacing and prevent verse clipping on mobile.
   Preserve the established panel/tasbih artwork and countdown styling. */
.opening-page .opening-art{
  height:420px!important;
  flex:0 0 420px!important;
}
.opening-page .opening-art-image{
  top:-139px!important;
  width:400px!important;
  clip-path:inset(139px 0 0 0)!important;
}
.opening-page .opening-verse-overlay{
  left:21%!important;
  top:61px!important;
  width:58%!important;
  height:276px!important;
  padding:0 2px!important;
  overflow:visible!important;
  line-height:1.28!important;
}
.opening-page .opening-verse-overlay .verse-bismillah{
  font-size:clamp(13px,3.6vw,15.5px)!important;
  line-height:1.35!important;
  margin:0 0 3px!important;
}
.opening-page .opening-verse-overlay .verse-arabic{
  font-size:clamp(11px,3.05vw,13px)!important;
  line-height:1.38!important;
  margin:0 0 4px!important;
}
.opening-page .opening-verse-overlay .verse-translation{
  font-size:clamp(8.2px,2.2vw,9.2px)!important;
  line-height:1.28!important;
  max-width:100%!important;
}
.opening-page .opening-verse-overlay .verse-reference{
  font-size:clamp(8px,2.05vw,8.8px)!important;
  line-height:1.2!important;
  margin:4px 0 0!important;
}
@media(max-width:380px){
  .opening-page .opening-art{height:412px!important;flex-basis:412px!important}
  .opening-page .opening-art-image{width:390px!important;top:-139px!important;clip-path:inset(139px 0 0 0)!important}
  .opening-page .opening-verse-overlay{left:20.5%!important;top:61px!important;width:59%!important;height:270px!important}
  .opening-page .opening-verse-overlay .verse-bismillah{font-size:12.8px!important;line-height:1.32!important;margin-bottom:3px!important}
  .opening-page .opening-verse-overlay .verse-arabic{font-size:10.8px!important;line-height:1.34!important;margin-bottom:4px!important}
  .opening-page .opening-verse-overlay .verse-translation{font-size:8.1px!important;line-height:1.25!important}
  .opening-page .opening-verse-overlay .verse-reference{font-size:7.8px!important;margin-top:3px!important}
}


/* V127: refine verse typography while keeping the approved artwork and placement. */
.opening-page .opening-art{
  height:402px!important;
  flex-basis:402px!important;
}
.opening-page .opening-verse-overlay{
  left:18.5%!important;
  top:61px!important;
  width:63%!important;
  height:auto!important;
  max-height:286px!important;
  padding:0 3px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:center!important;
  line-height:1.35!important;
  overflow:visible!important;
}
.opening-page .opening-verse-overlay p{
  width:100%!important;
  max-width:100%!important;
  text-align:center!important;
  overflow:visible!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  box-sizing:border-box!important;
}
.opening-page .opening-verse-overlay .verse-bismillah{
  font-size:clamp(12.5px,3.35vw,14.5px)!important;
  line-height:1.65!important;
  margin:0 0 3px!important;
  padding-top:1px!important;
  white-space:normal!important;
}
.opening-page .opening-verse-overlay .verse-arabic{
  font-size:clamp(10.5px,2.85vw,12.2px)!important;
  line-height:1.62!important;
  margin:0 0 5px!important;
  padding:1px 0 2px!important;
  direction:rtl!important;
  unicode-bidi:plaintext!important;
  text-align:center!important;
  text-wrap:pretty;
}
.opening-page .opening-verse-overlay .verse-translation{
  font-size:clamp(8.1px,2.15vw,9px)!important;
  line-height:1.32!important;
  margin:0 auto!important;
  padding:0 1px!important;
  text-align:center!important;
}
.opening-page .opening-verse-overlay .verse-reference{
  font-size:clamp(7.8px,2vw,8.6px)!important;
  line-height:1.3!important;
  margin:4px 0 0!important;
  text-align:center!important;
}
@media(max-width:380px){
  .opening-page .opening-art{height:396px!important;flex-basis:396px!important}
  .opening-page .opening-art-image{width:390px!important;top:-139px!important;clip-path:inset(139px 0 0 0)!important}
  .opening-page .opening-verse-overlay{left:18%!important;top:59px!important;width:64%!important;max-height:280px!important}
  .opening-page .opening-verse-overlay .verse-bismillah{font-size:12.2px!important;line-height:1.62!important}
  .opening-page .opening-verse-overlay .verse-arabic{font-size:10.2px!important;line-height:1.58!important}
  .opening-page .opening-verse-overlay .verse-translation{font-size:7.9px!important;line-height:1.3!important}
  .opening-page .opening-verse-overlay .verse-reference{font-size:7.6px!important}
}

/* V128: match the reference typography: centered, balanced lines, no clipping. */
.opening-page .opening-verse-overlay{
  left:16.5%!important;
  top:61px!important;
  width:67%!important;
  max-height:none!important;
  height:auto!important;
  padding:0 2px!important;
  gap:0!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:center!important;
  overflow:visible!important;
  line-height:1.25!important;
}
.opening-page .opening-verse-overlay p{
  width:100%!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  overflow:visible!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
.opening-page .opening-verse-overlay .verse-bismillah{
  font-size:clamp(12px,3.2vw,14px)!important;
  line-height:1.45!important;
  margin:0 0 5px!important;
  padding:0!important;
}
.opening-page .opening-verse-overlay .verse-arabic{
  font-size:clamp(10.5px,2.9vw,12.3px)!important;
  line-height:1.48!important;
  margin:0 0 6px!important;
  padding:0!important;
  direction:rtl!important;
  unicode-bidi:plaintext!important;
  text-align:center!important;
  letter-spacing:0!important;
}
.opening-page .opening-verse-overlay .verse-translation{
  font-size:clamp(8.1px,2.15vw,9px)!important;
  line-height:1.28!important;
  margin:0 auto!important;
  padding:0!important;
  max-width:100%!important;
  text-align:center!important;
}
.opening-page .opening-verse-overlay .verse-reference{
  font-size:clamp(7.8px,2vw,8.6px)!important;
  line-height:1.25!important;
  margin:5px 0 0!important;
  padding:0!important;
  text-align:center!important;
}
@media(max-width:380px){
  .opening-page .opening-verse-overlay{left:16%!important;top:59px!important;width:68%!important}
  .opening-page .opening-verse-overlay .verse-bismillah{font-size:12px!important;line-height:1.42!important;margin-bottom:4px!important}
  .opening-page .opening-verse-overlay .verse-arabic{font-size:10.4px!important;line-height:1.43!important;margin-bottom:5px!important}
  .opening-page .opening-verse-overlay .verse-translation{font-size:8px!important;line-height:1.25!important}
  .opening-page .opening-verse-overlay .verse-reference{font-size:7.7px!important;margin-top:4px!important}
}

/* V129: spacious, readable verse typography based on the user's reference image. */
.opening-page .opening-verse-overlay {
  left: 14.5% !important;
  width: 71% !important;
  top: 61px !important;
  padding: 0 4px !important;
  gap: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  overflow: visible !important;
}
.opening-page .opening-verse-overlay p {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
.opening-page .opening-verse-overlay .verse-bismillah {
  font-size: clamp(12.5px, 3.25vw, 14px) !important;
  line-height: 1.65 !important;
  margin: 0 0 7px !important;
  padding: 0 1px !important;
}
.opening-page .opening-verse-overlay .verse-arabic {
  font-size: clamp(10.8px, 2.9vw, 12.2px) !important;
  line-height: 1.78 !important;
  margin: 0 0 8px !important;
  padding: 1px 1px 2px !important;
  direction: rtl !important;
  unicode-bidi: plaintext !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}
.opening-page .opening-verse-overlay .verse-translation {
  font-size: clamp(8.3px, 2.18vw, 9.2px) !important;
  line-height: 1.46 !important;
  margin: 0 auto !important;
  padding: 0 2px !important;
  max-width: 100% !important;
  text-align: center !important;
}
.opening-page .opening-verse-overlay .verse-reference {
  font-size: clamp(7.8px, 2vw, 8.6px) !important;
  line-height: 1.35 !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
@media (max-width: 380px) {
  .opening-page .opening-verse-overlay {
    left: 14% !important;
    width: 72% !important;
    top: 59px !important;
    padding: 0 3px !important;
  }
  .opening-page .opening-verse-overlay .verse-bismillah {
    font-size: 12.2px !important;
    line-height: 1.62 !important;
    margin-bottom: 6px !important;
  }
  .opening-page .opening-verse-overlay .verse-arabic {
    font-size: 10.6px !important;
    line-height: 1.72 !important;
    margin-bottom: 7px !important;
  }
  .opening-page .opening-verse-overlay .verse-translation {
    font-size: 8.1px !important;
    line-height: 1.42 !important;
  }
  .opening-page .opening-verse-overlay .verse-reference {
    font-size: 7.7px !important;
    line-height: 1.3 !important;
    margin-top: 5px !important;
  }
}


/* V130: balanced vertical rhythm for editable Quran verse panel.
   Preserve the approved artwork, panel position, tasbih, flowers, and countdown. */
.opening-page .opening-verse-overlay {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  align-items: center !important;
  text-align: center !important;
  padding: 17px 3px 17px !important;
  gap: 0 !important;
  overflow: visible !important;
  line-height: 1.45 !important;
}
.opening-page .opening-verse-overlay p {
  width: 100% !important;
  flex: 0 0 auto !important;
  text-align: center !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.opening-page .opening-verse-overlay .verse-bismillah {
  font-size: clamp(12px, 3.15vw, 14px) !important;
  line-height: 1.65 !important;
  margin: 0 0 7px !important;
}
.opening-page .opening-verse-overlay .verse-arabic {
  font-size: clamp(10.8px, 2.85vw, 12.4px) !important;
  line-height: 1.78 !important;
  margin: 0 0 9px !important;
  letter-spacing: 0 !important;
  word-spacing: 0.02em !important;
}
.opening-page .opening-verse-overlay .verse-translation {
  font-size: clamp(8.1px, 2.08vw, 9px) !important;
  line-height: 1.52 !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 1px !important;
}
.opening-page .opening-verse-overlay .verse-reference {
  font-size: clamp(7.8px, 1.98vw, 8.6px) !important;
  line-height: 1.35 !important;
  margin: 7px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
@media (max-width: 380px) {
  .opening-page .opening-verse-overlay {
    left: 14% !important; width: 72% !important;
    top: 59px !important; height: 276px !important;
    padding: 16px 3px 16px !important;
  }
  .opening-page .opening-verse-overlay .verse-bismillah {
    font-size: 12px !important; line-height: 1.62 !important; margin-bottom: 7px !important;
  }
  .opening-page .opening-verse-overlay .verse-arabic {
    font-size: 10.7px !important; line-height: 1.72 !important; margin-bottom: 8px !important;
  }
  .opening-page .opening-verse-overlay .verse-translation {
    font-size: 8px !important; line-height: 1.48 !important;
  }
  .opening-page .opening-verse-overlay .verse-reference {
    font-size: 7.7px !important; line-height: 1.3 !important; margin-top: 6px !important;
  }
}

/* V131: final spacing refinement from Screenshot_89. Keep the panel/artwork geometry unchanged. */
.opening-page .opening-verse-overlay {
  top: 55px !important;
  padding: 14px 7px 18px !important;
  justify-content: flex-start !important;
}
.opening-page .opening-verse-overlay .verse-bismillah {
  margin-bottom: 6px !important;
}
.opening-page .opening-verse-overlay .verse-arabic {
  margin-bottom: 4px !important;
  line-height: 1.68 !important;
}
.opening-page .opening-verse-overlay .verse-translation {
  max-width: 92% !important;
  padding: 0 3px !important;
  line-height: 1.43 !important;
}
.opening-page .opening-verse-overlay .verse-reference {
  margin-top: 6px !important;
}
@media (max-width: 380px) {
  .opening-page .opening-verse-overlay {
    top: 55px !important;
    padding: 14px 7px 18px !important;
  }
  .opening-page .opening-verse-overlay .verse-bismillah {
    margin-bottom: 6px !important;
  }
  .opening-page .opening-verse-overlay .verse-arabic {
    margin-bottom: 4px !important;
    line-height: 1.66 !important;
  }
  .opening-page .opening-verse-overlay .verse-translation {
    max-width: 90% !important;
    line-height: 1.4 !important;
    padding: 0 3px !important;
  }
}


/* V133 — explicit final ayat typography override. Keep artwork geometry unchanged. */
.opening-page .opening-verse-overlay {
  top: 50px !important;
  height: 292px !important;
  padding: 13px 16px 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  overflow: visible !important;
  gap: 0 !important;
}
.opening-page .opening-verse-overlay p {
  box-sizing: border-box !important;
  width: 100% !important;
  text-align: center !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.opening-page .opening-verse-overlay .verse-bismillah {
  margin: 0 0 3px !important;
  padding: 0 5px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
.opening-page .opening-verse-overlay .verse-arabic {
  width: 92% !important;
  margin: 0 0 4px !important;
  padding: 0 5px !important;
  font-size: 10.5px !important;
  line-height: 1.52 !important;
  letter-spacing: 0 !important;
  word-spacing: 0.02em !important;
}
.opening-page .opening-verse-overlay .verse-translation {
  width: 88% !important;
  max-width: 88% !important;
  margin: 0 auto !important;
  padding: 0 5px !important;
  font-size: 8px !important;
  line-height: 1.38 !important;
  text-align: center !important;
  hyphens: none !important;
}
.opening-page .opening-verse-overlay .verse-reference {
  margin: 5px 0 0 !important;
  padding: 0 4px !important;
  font-size: 7.7px !important;
  line-height: 1.25 !important;
}
@media (max-width: 380px) {
  .opening-page .opening-verse-overlay {
    top: 49px !important;
    height: 292px !important;
    padding: 13px 15px 16px !important;
  }
  .opening-page .opening-verse-overlay .verse-bismillah {
    font-size: 12.5px !important;
    line-height: 1.38 !important;
    margin-bottom: 3px !important;
  }
  .opening-page .opening-verse-overlay .verse-arabic {
    width: 91% !important;
    font-size: 10px !important;
    line-height: 1.48 !important;
    margin-bottom: 4px !important;
    padding: 0 4px !important;
  }
  .opening-page .opening-verse-overlay .verse-translation {
    width: 86% !important;
    max-width: 86% !important;
    font-size: 7.8px !important;
    line-height: 1.36 !important;
    padding: 0 4px !important;
  }
  .opening-page .opening-verse-overlay .verse-reference {
    font-size: 7.5px !important;
    margin-top: 4px !important;
  }
}


/* V158 — Opening & Countdown aligned with Romantic Pastel Royal cover.
   Keep the existing verse artwork and functional countdown/music controls. */
:root{
  --emerald:#A9CBE7;
  --emerald-deep:#8FB8D8;
  --ivory:#FFF8EF;
  --maroon:#B85F7A;
  --gold:#C7A46A;
  --cream:#456782;
}
html, body { background:#A9CBE7 !important; }
body { color:#456782 !important; }
.opening-page{
  background-color:#A9CBE7 !important;
  background-image:linear-gradient(180deg,rgba(169,203,231,.08),rgba(169,203,231,.02)),url('assets/opening-background.png') !important;
  background-position:center top !important;
  background-size:cover !important;
  background-attachment:scroll !important;
  box-shadow:0 0 32px rgba(49,82,111,.12) !important;
}
.opening-page:before{
  background:linear-gradient(180deg,rgba(255,248,239,.035),transparent 48%,rgba(255,248,239,.025)) !important;
}
/* The old green translucent countdown slab is removed. */
.countdown{
  background:transparent !important;
  margin-top:auto !important;
  padding:20px 10px 13px !important;
  text-shadow:none !important;
  border-top:1px solid rgba(199,164,106,.65);
  border-bottom:1px solid rgba(199,164,106,.45);
}
.countdown:before{
  content:none !important;
  display:none !important;
  background:none !important;
}
.countdown-title{
  color:#456782 !important;
  text-shadow:none !important;
  font-weight:600 !important;
  letter-spacing:2px !important;
}
.countdown-grid{ color:#B85F7A !important; text-shadow:none !important; }
.countdown-grid>b{ color:#C7A46A !important; opacity:1 !important; }
.time-unit span{ color:#456782 !important; text-shadow:none !important; }
.time-unit.seconds span{ color:#B85F7A !important; }
.time-unit small{ color:#456782 !important; letter-spacing:.7px !important; }
.countdown-date{ color:#456782 !important; text-shadow:none !important; }
.back-link{
  color:#456782 !important;
  border-bottom-color:rgba(184,95,122,.6) !important;
}
.music-button{
  border-color:rgba(199,164,106,.9) !important;
  background:linear-gradient(145deg,#D99AAF,#B85F7A) !important;
  box-shadow:0 4px 12px rgba(69,103,130,.18) !important;
}
.music-caption{ color:#456782 !important; text-shadow:none !important; }
@media(max-width:380px){
  .countdown{padding:15px 8px 10px !important;}
}

/* V159 — Refine countdown rhythm and blend the upper tasbih entry. */
.opening-page .countdown{
  padding-top:15px !important;
  padding-bottom:10px !important;
  margin-top:auto !important;
}
.opening-page .countdown-title{margin-bottom:6px !important;}
.opening-page .countdown-date{margin-top:10px !important;}
@media(max-width:380px){
  .opening-page .countdown{padding:12px 8px 8px !important;}
  .opening-page .countdown-date{margin-top:8px !important;}
}
/* The top pearls fade in gently against the powder-blue background instead of ending abruptly. */
.opening-page .opening-art-image{filter:drop-shadow(0 1px 1px rgba(69,103,130,.06));}


/* V168 — unify opening/countdown with the approved powder-blue + blush cover. */
.opening-page{
  background-color:#A9CBE7!important;
  background-image:linear-gradient(180deg,rgba(255,248,239,.035),rgba(169,203,231,.025)),url('assets/opening-background.png')!important;
  background-position:center top!important;background-size:cover!important;background-attachment:scroll!important;
  color:#456782!important;box-shadow:0 0 28px rgba(69,103,130,.12)!important;
}
.opening-page:before{background:linear-gradient(180deg,rgba(255,248,239,.025),transparent 52%,rgba(255,248,239,.035))!important;}
/* Keep the mihrab and pearl strand; gently reduce the orange/green contrast of the combined artwork. */
.opening-page .opening-art-image{filter:saturate(.82) contrast(.99) drop-shadow(0 2px 3px rgba(69,103,130,.08))!important;}
.opening-page .countdown{
  background:transparent!important;
  border-top:1px solid rgba(199,164,106,.46)!important;
  border-bottom:1px solid rgba(199,164,106,.32)!important;
  padding:14px 10px 9px!important;
  margin-top:auto!important;text-shadow:none!important;
}
.opening-page .countdown:before{content:none!important;display:none!important;}
.opening-page .countdown-title{color:#456782!important;font-weight:600!important;letter-spacing:2px!important;text-shadow:none!important;margin-bottom:5px!important;}
.opening-page .countdown-grid{color:#B85F7A!important;text-shadow:none!important;}
.opening-page .countdown-grid>b{color:#C7A46A!important;opacity:1!important;}
.opening-page .time-unit span{color:#456782!important;text-shadow:none!important;}
.opening-page .time-unit.seconds span{color:#B85F7A!important;}
.opening-page .time-unit small{color:#456782!important;letter-spacing:.65px!important;}
.opening-page .countdown-date{color:#456782!important;text-shadow:none!important;margin-top:8px!important;}
.opening-page .music-button{border-color:rgba(199,164,106,.85)!important;background:linear-gradient(145deg,#E8B8C8,#C98499)!important;box-shadow:0 4px 12px rgba(69,103,130,.18)!important;}
.opening-page .music-caption{color:#456782!important;text-shadow:none!important;}
@media(max-width:380px){.opening-page .countdown{padding:11px 8px 7px!important}.opening-page .countdown-date{margin-top:7px!important}}


/* V169: refine the opening artwork without changing countdown or couple page. */
.opening-art-image{filter:drop-shadow(0 3px 7px rgba(62,83,105,.12));}
.opening-verse-overlay{color:#456782;}
.opening-verse-overlay .verse-bismillah,.opening-verse-overlay .verse-arabic{color:#456782;}
.opening-verse-overlay .verse-translation{color:#45566a;}
.opening-verse-overlay .verse-reference{color:#8c6d54;}

/* V171: new mihrab plaque artwork; verse remains editable HTML, countdown/couple/cover untouched. */
.opening-page .opening-art{height:500px!important;flex-basis:500px!important;overflow:visible!important;}
.opening-page .opening-art-image{top:-105px!important;width:375px!important;left:50%!important;clip-path:none!important;}
.opening-page .opening-verse-overlay{left:24%!important;top:68px!important;width:52%!important;height:auto!important;max-height:none!important;padding:0 2px!important;}
.opening-page .opening-verse-overlay .verse-bismillah{font-size:clamp(13px,3.6vw,16px)!important;line-height:1.4!important;margin:0 0 5px!important;}
.opening-page .opening-verse-overlay .verse-arabic{font-size:clamp(11px,3.05vw,13px)!important;line-height:1.48!important;margin:0 0 6px!important;}
.opening-page .opening-verse-overlay .verse-translation{font-size:clamp(8.4px,2.25vw,9.5px)!important;line-height:1.34!important;max-width:100%!important;}
.opening-page .opening-verse-overlay .verse-reference{font-size:clamp(8px,2.1vw,9px)!important;line-height:1.2!important;margin:5px 0 0!important;}
@media(max-width:380px){.opening-page .opening-art{height:480px!important;flex-basis:480px!important}.opening-page .opening-art-image{top:-95px!important;width:360px!important}.opening-page .opening-verse-overlay{left:23.5%!important;top:62px!important;width:53%!important}.opening-page .opening-verse-overlay .verse-bismillah{font-size:12.8px!important}.opening-page .opening-verse-overlay .verse-arabic{font-size:10.8px!important;line-height:1.4!important}.opening-page .opening-verse-overlay .verse-translation{font-size:8.1px!important;line-height:1.28!important}.opening-page .opening-verse-overlay .verse-reference{font-size:7.8px!important}}

/* V172: smaller complete mihrab artwork, natural tasbih top, and balanced verse block. */
.opening-page .opening-art{
  width:min(100%,350px)!important;
  max-width:350px!important;
  height:490px!important;
  flex:0 0 490px!important;
  margin:0 auto!important;
  overflow:visible!important;
}
.opening-page .opening-art-image{
  position:absolute!important;
  left:50%!important;
  top:0!important;
  transform:translateX(-50%)!important;
  width:350px!important;
  max-width:100%!important;
  height:auto!important;
  clip-path:none!important;
  object-fit:contain!important;
}
.opening-page .opening-verse-overlay{
  left:22%!important;
  top:88px!important;
  width:56%!important;
  height:auto!important;
  max-height:none!important;
  padding:0 3px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:center!important;
  line-height:1.3!important;
}
.opening-page .opening-verse-overlay p{
  width:100%!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
.opening-page .opening-verse-overlay .verse-bismillah{
  font-size:clamp(12px,3.1vw,13.5px)!important;
  line-height:1.4!important;
  margin:0 auto 5px!important;
}
.opening-page .opening-verse-overlay .verse-arabic{
  font-size:clamp(10px,2.65vw,11.5px)!important;
  line-height:1.48!important;
  margin:0 auto 6px!important;
  direction:rtl!important;
  unicode-bidi:plaintext!important;
  text-align:center!important;
}
.opening-page .opening-verse-overlay .verse-translation{
  font-size:clamp(7.8px,2vw,8.7px)!important;
  line-height:1.28!important;
  margin:0 auto!important;
  text-align:center!important;
}
.opening-page .opening-verse-overlay .verse-reference{
  font-size:clamp(7.6px,1.9vw,8.3px)!important;
  line-height:1.25!important;
  margin:5px auto 0!important;
  text-align:center!important;
}
@media(max-width:380px){
  .opening-page .opening-art{width:100%!important;height:470px!important;flex-basis:470px!important}
  .opening-page .opening-art-image{width:min(330px,100%)!important;top:0!important;clip-path:none!important}
  .opening-page .opening-verse-overlay{left:22%!important;top:83px!important;width:56%!important}
  .opening-page .opening-verse-overlay .verse-bismillah{font-size:11.5px!important;line-height:1.38!important}
  .opening-page .opening-verse-overlay .verse-arabic{font-size:9.6px!important;line-height:1.42!important}
  .opening-page .opening-verse-overlay .verse-translation{font-size:7.5px!important;line-height:1.23!important}
  .opening-page .opening-verse-overlay .verse-reference{font-size:7.3px!important}
}


/* V174: genuinely smaller mihrab panel and balanced centered verse.
   Keep the tasbih, flowers, verse content, countdown logic, cover and couple page unchanged. */
.opening-page .opening-art{
  width:100%!important;
  max-width:300px!important;
  height:395px!important;
  flex:0 0 395px!important;
  margin:0 auto!important;
  overflow:visible!important;
  position:relative!important;
}
.opening-page .opening-art-image{
  position:absolute!important;
  left:50%!important;
  top:0!important;
  transform:translateX(-50%)!important;
  width:280px!important;
  max-width:100%!important;
  height:auto!important;
  clip-path:none!important;
  object-fit:contain!important;
}
.opening-page .opening-verse-overlay{
  position:absolute!important;
  left:23%!important;
  top:66px!important;
  width:54%!important;
  height:auto!important;
  max-height:none!important;
  padding:0 3px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:center!important;
  box-sizing:border-box!important;
}
.opening-page .opening-verse-overlay p{
  width:100%!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  box-sizing:border-box!important;
}
.opening-page .opening-verse-overlay .verse-bismillah{
  font-size:clamp(10.5px,2.65vw,12px)!important;
  line-height:1.35!important;
  margin-bottom:4px!important;
}
.opening-page .opening-verse-overlay .verse-arabic{
  font-size:clamp(9px,2.3vw,10.2px)!important;
  line-height:1.4!important;
  margin-bottom:5px!important;
  direction:rtl!important;
  unicode-bidi:plaintext!important;
  text-align:center!important;
}
.opening-page .opening-verse-overlay .verse-translation{
  font-size:clamp(7.2px,1.75vw,7.8px)!important;
  line-height:1.2!important;
  text-align:center!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
.opening-page .opening-verse-overlay .verse-reference{
  font-size:clamp(7px,1.7vw,7.6px)!important;
  line-height:1.2!important;
  margin:4px auto 0!important;
  text-align:center!important;
}
@media(max-width:380px){
  .opening-page .opening-art{max-width:280px!important;height:370px!important;flex-basis:370px!important}
  .opening-page .opening-art-image{width:260px!important}
  .opening-page .opening-verse-overlay{left:23%!important;top:61px!important;width:54%!important}
  .opening-page .opening-verse-overlay .verse-bismillah{font-size:10px!important;line-height:1.32!important}
  .opening-page .opening-verse-overlay .verse-arabic{font-size:8.7px!important;line-height:1.36!important}
  .opening-page .opening-verse-overlay .verse-translation{font-size:6.9px!important;line-height:1.17!important}
  .opening-page .opening-verse-overlay .verse-reference{font-size:6.8px!important}
}


/* V177 FINISHING TOUCH — clean luxury powder-blue paper texture + restrained champagne corners.
   Preserve approved mihrab/tasbih/verse/countdown geometry and all invitation copy. */
.opening-page{
  background-color:#b7d3e8;
  background-image:
    radial-gradient(ellipse at 50% 24%, rgba(255,255,255,.19) 0%, rgba(255,255,255,.07) 34%, transparent 66%),
    radial-gradient(ellipse at 8% 78%, rgba(255,255,255,.07) 0%, transparent 42%),
    radial-gradient(ellipse at 94% 12%, rgba(247,229,204,.09) 0%, transparent 32%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.018) 0px, rgba(255,255,255,.018) 1px, transparent 1px, transparent 5px),
    linear-gradient(180deg,#b9d5e9 0%,#b1cfe5 52%,#b8d5e8 100%);
  background-attachment:local;
  position:relative;
  isolation:isolate;
}
.opening-page::before,
.opening-page::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  width:clamp(42px,10vw,76px);
  height:clamp(42px,10vw,76px);
  opacity:.38;
  border-color:rgba(197,157,91,.62);
  border-style:solid;
}
.opening-page::before{
  top:14px;
  right:14px;
  border-width:1px 1px 0 0;
  border-top-right-radius:2px;
  background:
    radial-gradient(ellipse at 100% 0%, transparent 0 48%, rgba(197,157,91,.22) 49% 50%, transparent 51%),
    radial-gradient(circle at 88% 14%, rgba(197,157,91,.4) 0 1px, transparent 1.8px);
}
.opening-page::after{
  bottom:14px;
  left:14px;
  border-width:0 0 1px 1px;
  border-bottom-left-radius:2px;
  background:
    radial-gradient(ellipse at 0% 100%, transparent 0 48%, rgba(197,157,91,.22) 49% 50%, transparent 51%),
    radial-gradient(circle at 12% 86%, rgba(197,157,91,.4) 0 1px, transparent 1.8px);
}
.opening-page > *{
  position:relative;
  z-index:1;
}
.opening-page .opening-art,
.opening-page .opening-art-image,
.opening-page .opening-verse-overlay{
  /* Keep the approved V176 geometry unchanged. */
}
@media(prefers-reduced-motion:reduce){
  .opening-page{scroll-behavior:auto}
}


/* V178: more visible but restrained clean-luxury finishing.
   Intentionally only adjusts the opening background and corner ornaments. */
.opening-page{
  background-color:#b6d2e7 !important;
  background-image:
    radial-gradient(ellipse at 50% 27%, rgba(255,255,255,.30) 0%, rgba(255,255,255,.13) 27%, rgba(255,255,255,.025) 56%, transparent 72%),
    radial-gradient(ellipse at 10% 82%, rgba(255,255,255,.12) 0%, transparent 42%),
    radial-gradient(ellipse at 92% 14%, rgba(241,218,184,.15) 0%, transparent 34%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(8deg, rgba(105,139,166,.025) 0px, rgba(105,139,166,.025) 1px, transparent 1px, transparent 6px),
    linear-gradient(180deg,#b9d5e9 0%,#b2cfe5 50%,#b8d5e8 100%) !important;
  position:relative;
  isolation:isolate;
}
.opening-page::before,
.opening-page::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  width:clamp(58px,13vw,92px);
  height:clamp(58px,13vw,92px);
  opacity:.68;
  border-color:rgba(190,145,75,.78);
  border-style:solid;
}
.opening-page::before{
  top:12px;
  right:12px;
  border-width:1.25px 1.25px 0 0;
  background:
    radial-gradient(ellipse at 100% 0%, transparent 0 42%, rgba(190,145,75,.36) 43% 44%, transparent 45%),
    radial-gradient(ellipse at 100% 0%, transparent 0 62%, rgba(190,145,75,.23) 63% 64%, transparent 65%),
    radial-gradient(circle at 82% 18%, rgba(190,145,75,.72) 0 1.2px, transparent 2px),
    radial-gradient(circle at 68% 32%, rgba(190,145,75,.52) 0 1px, transparent 1.8px);
}
.opening-page::after{
  bottom:12px;
  left:12px;
  border-width:0 0 1.25px 1.25px;
  background:
    radial-gradient(ellipse at 0% 100%, transparent 0 42%, rgba(190,145,75,.36) 43% 44%, transparent 45%),
    radial-gradient(ellipse at 0% 100%, transparent 0 62%, rgba(190,145,75,.23) 63% 64%, transparent 65%),
    radial-gradient(circle at 18% 82%, rgba(190,145,75,.72) 0 1.2px, transparent 2px),
    radial-gradient(circle at 32% 68%, rgba(190,145,75,.52) 0 1px, transparent 1.8px);
}
.opening-page > *{position:relative;z-index:1}


/* V179 placement correction: keep the decorative finishing on the mihrab artwork area,
   not around the countdown/date region. */
.opening-page::before,
.opening-page::after{
  content:none!important;
  display:none!important;
}
.opening-page .opening-art{
  position:relative!important;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 50% 26%, rgba(255,255,255,.12) 0%, rgba(255,255,255,.035) 38%, transparent 70%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.018) 0px, rgba(255,255,255,.018) 1px, transparent 1px, transparent 5px);
}
.opening-page .opening-art::before,
.opening-page .opening-art::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  pointer-events:none!important;
  z-index:0!important;
  width:clamp(34px,8vw,58px)!important;
  height:clamp(34px,8vw,58px)!important;
  opacity:.62!important;
  border-color:rgba(190,145,75,.78)!important;
  border-style:solid!important;
}
.opening-page .opening-art::before{
  top:5px!important;
  right:calc(50% - 150px)!important;
  border-width:1px 1px 0 0!important;
  background:
    radial-gradient(ellipse at 100% 0%, transparent 0 42%, rgba(190,145,75,.36) 43% 44%, transparent 45%),
    radial-gradient(ellipse at 100% 0%, transparent 0 62%, rgba(190,145,75,.23) 63% 64%, transparent 65%),
    radial-gradient(circle at 82% 18%, rgba(190,145,75,.72) 0 1px, transparent 2px);
}
.opening-page .opening-art::after{
  bottom:5px!important;
  left:calc(50% - 150px)!important;
  border-width:0 0 1px 1px!important;
  background:
    radial-gradient(ellipse at 0% 100%, transparent 0 42%, rgba(190,145,75,.36) 43% 44%, transparent 45%),
    radial-gradient(ellipse at 0% 100%, transparent 0 62%, rgba(190,145,75,.23) 63% 64%, transparent 65%),
    radial-gradient(circle at 18% 82%, rgba(190,145,75,.72) 0 1px, transparent 2px);
}
.opening-page .opening-art-image,
.opening-page .opening-verse-overlay{
  z-index:1!important;
}
@media(max-width:380px){
  .opening-page .opening-art::before{right:calc(50% - 140px)!important}
  .opening-page .opening-art::after{left:calc(50% - 140px)!important}
}


/* V180: restore the clean approved opening; remove corner-line ornaments.
   Theme direction: powder blue + blush pink, with no added champagne corner frames. */
.opening-page::before,
.opening-page::after{
  content:none!important;
  display:none!important;
}
.opening-page .opening-art::before,
.opening-page .opening-art::after{
  content:none!important;
  display:none!important;
}
.opening-page{
  background-color:#b7d3e8!important;
  background-image:
    radial-gradient(ellipse at 50% 26%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.055) 34%, transparent 68%),
    radial-gradient(ellipse at 88% 18%, rgba(245,199,205,.075) 0%, transparent 28%),
    radial-gradient(ellipse at 12% 80%, rgba(245,199,205,.06) 0%, transparent 30%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, transparent 1px, transparent 6px),
    linear-gradient(180deg,#b9d5e9 0%,#b4d0e6 52%,#b9d5e8 100%)!important;
}


/* V181 — Countdown only: Soft Romantic Luxury.
   Preserve the approved opening artwork, cover, couple page, event date and timer logic. */
.opening-page .countdown{
  background:transparent!important;
  border-top:1px solid rgba(199,164,106,.34)!important;
  border-bottom:1px solid rgba(199,164,106,.22)!important;
  box-shadow:none!important;
  padding:13px 9px 8px!important;
  text-align:center!important;
}
.opening-page .countdown-title{
  color:#456782!important;
  font-family:'Cormorant Garamond',Georgia,serif!important;
  font-size:clamp(21px,5.35vw,26px)!important;
  font-weight:600!important;
  letter-spacing:2px!important;
  line-height:1.15!important;
  margin:0 0 7px!important;
  text-shadow:none!important;
}
.opening-page .countdown-grid{
  display:flex!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:clamp(5px,1.8vw,10px)!important;
  color:#456782!important;
  font-variant-numeric:tabular-nums!important;
  text-shadow:none!important;
}
.opening-page .countdown-grid>b{
  color:#C7A46A!important;
  font-family:'Cormorant Garamond',Georgia,serif!important;
  font-size:clamp(19px,4.7vw,24px)!important;
  font-weight:400!important;
  line-height:1.22!important;
  opacity:.9!important;
  padding-top:1px!important;
}
.opening-page .time-unit{
  min-width:clamp(43px,12vw,53px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:3px!important;
}
.opening-page .time-unit span{
  color:#456782!important;
  font-family:'Cormorant Garamond',Georgia,serif!important;
  font-size:clamp(28px,7vw,34px)!important;
  font-weight:500!important;
  line-height:1.02!important;
  letter-spacing:.25px!important;
  text-shadow:none!important;
}
.opening-page .time-unit.seconds span{
  color:#C98499!important;
}
.opening-page .time-unit small{
  color:#56758D!important;
  font-family:Arial,sans-serif!important;
  font-size:clamp(8px,2vw,9px)!important;
  font-weight:400!important;
  letter-spacing:.65px!important;
  line-height:1.15!important;
  text-transform:uppercase!important;
}
.opening-page .countdown-date{
  color:#56758D!important;
  font-family:'Cormorant Garamond',Georgia,serif!important;
  font-size:clamp(11px,2.8vw,12.5px)!important;
  font-weight:400!important;
  letter-spacing:1.05px!important;
  line-height:1.3!important;
  margin:8px 0 0!important;
  text-align:center!important;
  text-shadow:none!important;
}
@media(max-width:380px){
  .opening-page .countdown{padding:11px 7px 7px!important}
  .opening-page .countdown-title{font-size:clamp(20px,5.2vw,23px)!important;letter-spacing:1.7px!important;margin-bottom:6px!important}
  .opening-page .countdown-grid{gap:4px!important}
  .opening-page .time-unit{min-width:40px!important}
  .opening-page .time-unit span{font-size:clamp(26px,7vw,30px)!important}
  .opening-page .countdown-date{margin-top:7px!important;letter-spacing:.8px!important}
}


/* V182 — countdown spacing polish only; preserve all approved visuals and timer behavior. */
.opening-page .countdown{
  padding:12px 9px 8px!important;
}
.opening-page .countdown-title{
  margin:0 0 8px!important;
  line-height:1.12!important;
}
.opening-page .countdown-grid{
  align-items:flex-start!important;
  gap:clamp(6px,1.9vw,10px)!important;
}
.opening-page .countdown-grid>b{
  line-height:1.05!important;
  padding-top:2px!important;
}
.opening-page .time-unit{
  gap:4px!important;
}
.opening-page .time-unit span{
  line-height:1.08!important;
}
.opening-page .time-unit small{
  line-height:1.2!important;
  letter-spacing:.7px!important;
}
.opening-page .countdown-date{
  margin:9px 0 0!important;
  line-height:1.35!important;
  letter-spacing:1.1px!important;
}
@media(max-width:380px){
  .opening-page .countdown{padding:11px 7px 7px!important}
  .opening-page .countdown-title{margin-bottom:7px!important}
  .opening-page .countdown-grid{gap:5px!important}
  .opening-page .time-unit{gap:4px!important}
  .opening-page .countdown-date{margin-top:8px!important;letter-spacing:.85px!important}
}


/* V190 — refined gold separators and pink/gold date flourishes. */
.opening-page .countdown-grid{
  gap:clamp(7px,2vw,11px)!important;
}
.opening-page .countdown-grid>b{
  position:relative!important;
  color:transparent!important;
  font-size:0!important;
  width:13px!important;
  min-width:13px!important;
  height:30px!important;
  padding:0!important;
  margin-top:1px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.opening-page .countdown-grid>b:before{
  content:"✦"!important;
  color:#C7A46A!important;
  font-family:Georgia,serif!important;
  font-size:12px!important;
  line-height:1!important;
  text-shadow:0 0 1px rgba(199,164,106,.25)!important;
}
.opening-page .countdown-date{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(7px,2.2vw,13px)!important;
  white-space:nowrap!important;
}
.opening-page .countdown-date:before,
.opening-page .countdown-date:after{
  content:""!important;
  display:inline-block!important;
  width:clamp(20px,7vw,42px)!important;
  height:1px!important;
  flex:0 1 42px!important;
  background:linear-gradient(90deg,transparent,#C7A46A 35%,#C7A46A 65%,transparent)!important;
  position:relative!important;
}
.opening-page .countdown-date:before{
  background:linear-gradient(90deg,transparent,#C7A46A)!important;
}
.opening-page .countdown-date:after{
  background:linear-gradient(90deg,#C7A46A,transparent)!important;
}
.opening-page .countdown-date{
  text-shadow:none!important;
}
.opening-page .countdown-date::selection{background:transparent!important}
.opening-page .countdown-date:before{
  box-shadow:10px 0 0 -0.25px #D99EAA!important;
}
.opening-page .countdown-date:after{
  box-shadow:-10px 0 0 -0.25px #D99EAA!important;
}
@media(max-width:380px){
 .opening-page .countdown-grid{gap:5px!important}
 .opening-page .countdown-grid>b{width:11px!important;min-width:11px!important}
 .opening-page .countdown-grid>b:before{font-size:10px!important}
 .opening-page .countdown-date{gap:6px!important;font-size:10.5px!important;letter-spacing:.65px!important}
 .opening-page .countdown-date:before,.opening-page .countdown-date:after{width:clamp(13px,5vw,22px)!important}
}


/* V191 — center gold separators vertically between countdown numbers;
   date ornament order: gold line, blush-pink symbol, date, blush-pink symbol, gold line. */
.opening-page .countdown-grid>b{
  align-self:stretch!important;
  height:auto!important;
  min-height:clamp(36px,9vw,48px)!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:translateY(0)!important;
  position:relative!important;
  top:0!important;
}
.opening-page .countdown-grid>b:before{
  content:"✦"!important;
  display:block!important;
  position:static!important;
  transform:translateY(0)!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
  vertical-align:middle!important;
}
.opening-page .countdown-date{
  gap:clamp(5px,1.8vw,10px)!important;
}
.opening-page .countdown-date:before,
.opening-page .countdown-date:after{
  position:relative!important;
  width:clamp(22px,7vw,42px)!important;
  flex:0 0 clamp(22px,7vw,42px)!important;
  height:1px!important;
  box-shadow:none!important;
  background:linear-gradient(90deg,transparent,#C7A46A 50%,transparent)!important;
}
.opening-page .countdown-date:before{
  content:""!important;
  box-shadow:12px 0 0 -0.2px #D99EAA!important;
}
.opening-page .countdown-date:after{
  content:""!important;
  box-shadow:-12px 0 0 -0.2px #D99EAA!important;
}
.opening-page .countdown-date .date-flourish{
  display:inline-flex!important;
  color:#D99EAA!important;
  font-family:Georgia,serif!important;
  font-size:10px!important;
  line-height:1!important;
  align-items:center!important;
  justify-content:center!important;
}
@media(max-width:380px){
 .opening-page .countdown-grid>b{min-height:clamp(32px,8.5vw,40px)!important}
 .opening-page .countdown-date{gap:5px!important}
 .opening-page .countdown-date:before,.opening-page .countdown-date:after{width:clamp(17px,5.5vw,24px)!important;flex-basis:clamp(17px,5.5vw,24px)!important}
}


/* V192 — visible blush-pink symbols on both sides of the event date. */
.opening-page .countdown-date{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(4px,1.4vw,8px)!important;
  white-space:nowrap!important;
}
.opening-page .countdown-date:before,
.opening-page .countdown-date:after{
  content:""!important;
  display:block!important;
  width:clamp(20px,6vw,36px)!important;
  flex:0 0 clamp(20px,6vw,36px)!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,#C7A46A 50%,transparent)!important;
  box-shadow:none!important;
}
.opening-page .countdown-date .date-flourish{
  display:inline-flex!important;
  flex:0 0 auto!important;
  color:#D88FA3!important;
  opacity:1!important;
  visibility:visible!important;
  font-family:Georgia,serif!important;
  font-size:11px!important;
  line-height:1!important;
  width:10px!important;
  height:14px!important;
  align-items:center!important;
  justify-content:center!important;
  text-shadow:0 0 1px rgba(216,143,163,.25)!important;
}
.opening-page .countdown-date .countdown-date-text{
  display:inline-block!important;
  flex:0 0 auto!important;
}
@media(max-width:380px){
 .opening-page .countdown-date{gap:4px!important}
 .opening-page .countdown-date:before,
 .opening-page .countdown-date:after{width:clamp(15px,5vw,22px)!important;flex-basis:clamp(15px,5vw,22px)!important}
 .opening-page .countdown-date .date-flourish{font-size:10px!important;width:9px!important}
}


/* V193 — keep date flourishes alive after the countdown script refreshes the event date. */
.opening-page .countdown-date{
  display:flex!important;align-items:center!important;justify-content:center!important;
  gap:clamp(4px,1.3vw,8px)!important;white-space:nowrap!important;
}
.opening-page .countdown-date:before,
.opening-page .countdown-date:after{
  content:""!important;display:block!important;position:static!important;
  width:clamp(18px,6vw,34px)!important;flex:0 0 clamp(18px,6vw,34px)!important;
  height:1px!important;background:#C7A46A!important;box-shadow:none!important;
}
.opening-page .countdown-date .date-flourish{
  display:inline-flex!important;visibility:visible!important;opacity:1!important;
  color:#D88FA3!important;font-family:Georgia,serif!important;font-size:11px!important;
  line-height:1!important;width:10px!important;height:14px!important;flex:0 0 10px!important;
  align-items:center!important;justify-content:center!important;text-shadow:none!important;
}
.opening-page .countdown-date .countdown-date-text{
  display:inline-block!important;visibility:visible!important;flex:0 0 auto!important;
}
@media(max-width:380px){
 .opening-page .countdown-date{gap:4px!important}
 .opening-page .countdown-date:before,.opening-page .countdown-date:after{
   width:clamp(14px,4.8vw,21px)!important;flex-basis:clamp(14px,4.8vw,21px)!important
 }
 .opening-page .countdown-date .date-flourish{font-size:10px!important;width:9px!important;flex-basis:9px!important}
}