/* قالب «ختم الوعد» — زيتوني وعاجي وختم عنّابي */
body.tpl-envelope {
  --q-bg: #F6EFE0;
  --q-soft: #EFE5CF;
  --q-ink: #2E382D;
  --q-muted: #5E5340;
  --q-accent: #6E1A25;
  --q-line: #CDBB94;
  --q-btn: #3E4A3D;
  --q-btn-ink: #F6EFE0;
  --q-display: 'Aref Ruqaa', 'Amiri', serif;
  background: #2A3329;
}

.env-cover { position: absolute; inset: 0; background: radial-gradient(520px 480px at 50% 38%, #4B5A48, #2A3329); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px; padding: 32px; text-align: center; }
.env-cover .q-guest { font-family: 'Amiri', serif; color: #E9DFC9; font-size: 17px; transition: opacity .5s ease .2s; }
.env-cover .q-guest strong { font-size: 30px; line-height: 1.5; }
.env { position: relative; width: 300px; height: 200px; perspective: 900px; transition: transform .9s cubic-bezier(.5,0,.2,1) .55s, opacity .6s ease .9s; }
.env-body { position: absolute; inset: 0; background: #EFE6D3; border-radius: 6px; box-shadow: 0 26px 40px rgba(0,0,0,.38); }
.env-fold { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(to top right, #E6DBC4 49.6%, transparent 50%) left/50% 100% no-repeat, linear-gradient(to top left, #E6DBC4 49.6%, transparent 50%) right/50% 100% no-repeat; }
.env-flap { position: absolute; top: 0; left: 0; right: 0; height: 118px; background: #DED1B5; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; transition: transform .7s cubic-bezier(.5,0,.3,1); }
.env-seal { position: absolute; top: 84px; left: 50%; width: 72px; height: 72px; margin-left: -36px; border-radius: 50%; border: 0; cursor: pointer; background: radial-gradient(circle at 35% 32%, #B04452, #6E1A25 68%); box-shadow: 0 5px 12px rgba(0,0,0,.4), inset 0 0 0 6px rgba(0,0,0,.13); color: #EBC0A7; font: 700 22px 'Amiri', serif; transition: transform .4s ease, opacity .4s ease; animation: env-breathe 2.6s ease-in-out infinite; }
.env-seal:focus-visible { outline-color: #EBC0A7; }
.env-hint { color: rgba(233,223,201,.78); font-size: 14px; transition: opacity .5s ease .2s; }
@keyframes env-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.is-opening .env-seal { animation: none; transform: scale(1.4); opacity: 0; }
.is-opening .env-flap { transform: rotateX(180deg); }
.is-opening .env { transform: translateY(420px); opacity: 0; }
.is-opening .env-cover .q-guest, .is-opening .env-hint { opacity: 0; }

.env-page { padding: 18px 14px 0; }
.env-card { background: #F6EFE0; border-radius: 10px; padding: 14px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.env-frame { border: 1px solid #B9A57E; border-radius: 6px; padding: 34px 10px 10px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.env-frame > .q-verse { padding: 0 12px; }
.env-rule { width: 54px; height: 1px; background: #B9A57E; margin: 26px 0; }
.env-host { font-size: 15px; color: #4A4436; max-width: 30ch; }
.env-names { display: flex; flex-direction: column; align-items: center; font-family: 'Aref Ruqaa', serif; color: #6E1A25; line-height: 1.3; margin: 18px 0 6px; outline: none; }
.env-names span { font-size: 54px; font-weight: 700; }
.env-names .env-and { font-size: 26px; color: #7A5C26; }
.env-tag { font-family: 'Amiri', serif; font-size: 17px; color: #5E5340; }
.env-when { display: flex; align-items: center; gap: 18px; font-family: 'Amiri', serif; margin: 22px 0 8px; }
.env-day, .env-time { font-size: 17px; padding-inline: 12px; }
.env-day { border-inline-end: 1px solid #B9A57E; }
.env-time { border-inline-start: 1px solid #B9A57E; }
.env-date { display: flex; flex-direction: column; line-height: 1.15; }
.env-date strong { font-size: 44px; }
.env-date span { font-size: 15px; }
.env-frame .q-sec { width: 100%; border-top: 1px solid #DDCFAE; }
.tpl-envelope .q-made { color: rgba(233,223,201,.7); }

@media (prefers-reduced-motion: reduce) {
  .env-seal { animation: none; }
  .env, .env-flap, .env-seal, .env-hint, .env-cover .q-guest { transition: none; }
}
.env-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px 10px 24px; }
.env-frame > .q-verse-wrap, .env-frame > .q-sec.q-verse { border-top: 0; padding-top: 6px; }
.env-hero .q-quick { margin-top: 14px; }
.env-names.is-mono .q-mono-l { color: #6E1A25; }