/* قالب «لؤلؤ» — مخمل رمادي داكن ولؤلؤ ومشبك ذهبي، ثم صفحة لؤلؤية فاتحة */
body.tpl-pearls {
  --q-bg: #EDE6E1;
  --q-soft: #F7F3F0;
  --q-ink: #2F3540;
  --q-muted: #555B67;
  --q-accent: #7D5F33;
  --q-line: #DCD2CD;
  --q-btn: #2F3540;
  --q-btn-ink: #EDE6E1;
  --q-display: 'Mirza', 'Amiri', serif;
}
.pl-cover { position: absolute; inset: 0; background: radial-gradient(420px 420px at 50% 46%, #4A5260, #262B34 75%); display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 30px; padding: 30px 20px; color: #EDE6E1; overflow-y: auto; }
.pl-cover .q-guest { font-size: 15px; transition: opacity .6s ease; }
.pl-cover .q-guest strong { font: 700 30px 'Mirza', serif; }
.pl-stage { position: relative; width: 280px; height: 292px; flex: none; }
.pl-stage svg { width: 100%; height: 100%; overflow: visible; }
.pl-pearl { transform-box: fill-box; transform-origin: center; transition: transform 1.1s cubic-bezier(.5,0,.75,0) calc(var(--i) * 35ms), opacity .6s ease calc(var(--i) * 35ms + .6s); }
.is-opening .pl-pearl { transform: translate(var(--dx), 620px) rotate(200deg); opacity: 0; }
.pl-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Mirza', serif; transition: opacity .6s ease; }
.pl-center span { font-size: 28px; font-weight: 600; }
.pl-center small { font-size: 14px; opacity: .75; }
.pl-clasp { position: absolute; top: -3px; left: 50%; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; border: 0; cursor: pointer; background: radial-gradient(circle at 35% 30%, #F1DDA3, #C2A05A 55%, #8C6A3A); box-shadow: 0 6px 16px rgba(0,0,0,.35); transition: transform .5s ease, opacity .5s ease; }
.pl-clasp:focus-visible { outline-color: #F1DDA3; }
.pl-hint { font-size: 14px; color: rgba(237,230,225,.78); transition: opacity .6s ease; }
.is-opening .pl-clasp { transform: scale(0); opacity: 0; }
.is-opening .pl-center, .is-opening .pl-hint, .is-opening .pl-cover .q-guest { opacity: 0; }

.pl-hero { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; padding: 48px 24px 10px; }
.pl-host { font-size: 15px; color: #555B67; max-width: 30ch; }
.pl-names { display: flex; flex-direction: column; font: 700 54px/1.25 'Mirza', serif; outline: none; }
.pl-and { font-size: 24px; color: #7D5F33; }
.pl-tag { font: 400 18px 'Mirza', serif; color: #555B67; }
.pl-when { display: flex; flex-direction: column; gap: 4px; padding: 16px 30px; border-radius: 999px; background: #F7F3F0; border: 1px solid #DCD2CD; }
.pl-when strong { font-size: 17px; }
.pl-when span { font-size: 13px; color: #555B67; }
.tpl-pearls .q-made { color: #555B67; }

@media (prefers-reduced-motion: reduce) {
  .pl-pearl, .pl-clasp, .pl-center, .pl-hint, .pl-cover .q-guest { transition: none; }
}