/* قالب «خاتمان» — ذهب على ليل، ثم عاج */
.tpl-rings {
  --q-bg: #FDFBF7;
  --q-soft: #FAF4DD;
  --q-ink: #2D2824;
  --q-muted: #665C54;
  --q-accent: #8F6E1C;
  --q-line: #E8D9A8;
  --q-btn: #2D2824;
  --q-btn-ink: #FDFBF7;
  --q-display: 'Aref Ruqaa', 'Amiri', serif;
  --q-body: 'Alexandria', 'Plex Arabic', sans-serif;
}
.rg-cover { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #3A3024, #1A1612 55%, #0D0B09); color: #FDFBF7; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 22px; padding: 30px; text-align: center; overflow-y: auto; transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1), filter 1.1s ease; }
.is-opening .rg-cover { opacity: 0; transform: translateY(-40px); filter: blur(10px); }
.rg-corner { position: absolute; width: 64px; height: 64px; border: 0 solid rgba(212,175,55,.35); }
.rg-corner.tl { top: 22px; left: 22px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 16px; }
.rg-corner.tr { top: 22px; right: 22px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 16px; }
.rg-corner.bl { bottom: 22px; left: 22px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 16px; }
.rg-corner.br { bottom: 22px; right: 22px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 16px; }
.rg-basmala { font: 700 22px 'Aref Ruqaa', serif; color: #EDD484; }
.rg-verse { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 300px; }
.rg-verse p { font: 400 17px/1.9 'Aref Ruqaa', serif; color: rgba(248,244,238,.92); }
.rg-ref { font-size: 12px; color: rgba(229,193,88,.85); }
.rg-line { width: 48px; height: 1px; background: linear-gradient(90deg, transparent, #E5C158, transparent); }
.rg-mono { position: relative; width: 116px; height: 116px; border-radius: 50%; border: 1px solid rgba(229,193,88,.4); background: linear-gradient(#2A241C, #161310); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 34px rgba(212,175,55,.25); }
.rg-spin { position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(237,212,132,.35); animation: rg-spin 40s linear infinite; }
.rg-mono-ar { font: 700 28px 'Aref Ruqaa', serif; background: linear-gradient(135deg, #A88126, #D4AF37 40%, #F5E296, #9B7821); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rg-cover-names { display: flex; align-items: center; gap: 12px; font: 700 34px 'Aref Ruqaa', serif; color: #F4E5B3; }
.rg-heart-sm { width: 22px; height: 22px; fill: #D4B2A7; }
.rg-occ { display: block; font-size: 13px; letter-spacing: .1em; color: rgba(237,212,132,.85); }
.rg-open { position: relative; overflow: hidden; min-height: 52px; padding: 0 34px; border-radius: 999px; border: 0; cursor: pointer; background: linear-gradient(90deg, #D4AF37, #E5C158, #B59128); color: #1E1B18; font: 600 16px 'Alexandria', sans-serif; box-shadow: 0 0 24px rgba(212,175,55,.35); }
.rg-open::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-100%); animation: rg-shimmer 2.6s ease-in-out infinite; }
.rg-open:focus-visible { outline-color: #F4E5B3; }
.rg-in1 { animation: rg-up 1s ease .3s both; } .rg-in2 { animation: rg-up 1.2s ease .8s both; } .rg-in3 { animation: rg-pop 1.4s ease 1.1s both; }
.rg-in4 { animation: rg-up 1s ease 1.4s both; } .rg-in5 { animation: rg-up .9s ease 1.7s both; }
@keyframes rg-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rg-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes rg-spin { to { transform: rotate(360deg); } }
@keyframes rg-shimmer { to { transform: translateX(100%); } }
@keyframes rg-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
.rg-beat { animation: rg-beat 2.2s ease-in-out infinite; }

.rg-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 46px 22px 36px; background: radial-gradient(300px 300px at 50% 40%, rgba(237,212,132,.22), transparent 70%); }
.rg-chip { display: inline-flex; gap: 6px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.75); border: 1px solid rgba(212,175,55,.28); font-size: 13px; }
.rg-chip strong { color: #8F6E1C; }
.rg-rings { width: 110px; }
.rg-rings circle { fill: none; stroke-width: 4; }
.rg-rings circle:first-child { stroke: #D4AF37; fill: rgba(253,251,247,.6); }
.rg-rings circle:last-child { stroke: #E5C158; }
.rg-kicker { font-size: 12px; font-weight: 600; letter-spacing: .2em; color: #8F6E1C; }
.rg-names { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font: 700 50px/1.3 'Aref Ruqaa', serif; outline: none; }
.rg-heart-btn { position: relative; width: 52px; height: 52px; border: 0; background: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.rg-heart { width: 34px; height: 34px; fill: #D4B2A7; stroke: #BE8F81; stroke-width: 1; }
.rg-burst { position: absolute; inset: 0; pointer-events: none; }
.rg-burst i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-radius: 50% 50% 0 50%; background: #E5C158; opacity: 0; transform: translate(-50%, -50%) rotate(45deg); }
.rg-burst i:nth-child(2n) { background: #D4B2A7; }
.burst-a .rg-burst i { animation: rg-fly-a 1.2s ease-out both; }
.burst-b .rg-burst i { animation: rg-fly-b 1.2s ease-out both; }
.rg-burst i:nth-child(1) { --x: -46px; --y: -60px; } .rg-burst i:nth-child(2) { --x: 40px; --y: -70px; } .rg-burst i:nth-child(3) { --x: -10px; --y: -90px; }
.rg-burst i:nth-child(4) { --x: 58px; --y: -30px; } .rg-burst i:nth-child(5) { --x: -62px; --y: -24px; }
@keyframes rg-fly-a { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(.6); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(45deg) scale(1.1); } }
@keyframes rg-fly-b { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(.6); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(45deg) scale(1.1); } }
.rg-orn { display: flex; align-items: center; gap: 10px; }
.rg-orn span { width: 50px; height: 1px; background: linear-gradient(90deg, transparent, #D4AF37); }
.rg-orn span:last-child { background: linear-gradient(90deg, #D4AF37, transparent); }
.rg-orn svg { width: 14px; height: 14px; fill: #D4AF37; }
.rg-tag { font: 400 21px 'Aref Ruqaa', serif; color: #8F6E1C; }
.rg-host { font-size: 14px; color: #665C54; max-width: 300px; }
.rg-datecard { display: flex; flex-direction: column; padding: 12px 18px; margin-top: 6px; border-radius: 20px; background: rgba(255,255,255,.75); border: 1px solid rgba(212,175,55,.28); box-shadow: 0 10px 30px rgba(45,40,36,.06); }
.rg-datecard strong { font-size: 14px; }
.rg-datecard span { font-size: 12px; color: #665C54; }
.tpl-rings .inv-page > .q-sec:nth-of-type(odd) { background: #F8F4EE; }
.rg-foot { padding: 30px 22px 6px; text-align: center; background: #F8F4EE; display: flex; flex-direction: column; gap: 4px; }
.rg-foot > span { font: 400 18px 'Aref Ruqaa', serif; color: #8F6E1C; }
.rg-foot .q-made { color: #7A6E66; }

@media (prefers-reduced-motion: reduce) {
  .rg-in1, .rg-in2, .rg-in3, .rg-in4, .rg-in5, .rg-spin, .rg-beat, .rg-open::after, .burst-a .rg-burst i, .burst-b .rg-burst i { animation: none; }
  .rg-cover { transition: none; }
}