/* قالب «سرّ التاريخ» — باستيل نعناعي، وبطاقة فضية تُحكّ */
body.tpl-scratch { --q-bg: #EEF6F6; --q-soft: #DFEEEE; --q-ink: #23424A; --q-muted: #4C6A71; --q-accent: #2F7A84; --q-line: #C6E0E0; --q-btn: #2F7A84; --q-btn-ink: #FFFFFF; --q-display: 'Reem Kufi', sans-serif; }
.sc-cover { position: absolute; inset: 0; background: radial-gradient(420px 420px at 50% 40%, #F7FBFB, #DCEDED); display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 18px; padding: 30px 20px; text-align: center; color: #23424A; overflow-y: auto; transition: opacity .7s ease; }
.sc-cover .q-guest { font-size: 15px; color: #4C6A71; }
.sc-cover .q-guest strong { font: 700 24px 'Reem Kufi', sans-serif; color: #23424A; }
.sc-cn { font: 700 36px/1.4 'Reem Kufi', sans-serif; color: #2F7A84; }
.sc-cn i { font-style: normal; color: #E08A6A; margin: 0 6px; }
.sc-hint { font-size: 15px; color: #4C6A71; }
.sc-card { position: relative; width: min(300px, 86vw); height: 150px; border-radius: 18px; background: #fff; box-shadow: 0 16px 36px rgba(35,66,74,.18); overflow: hidden; }
.sc-secret { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.sc-secret span { font-size: 13px; color: #4C6A71; }
.sc-secret strong { font: 700 22px 'Reem Kufi', sans-serif; color: #2F7A84; }
.sc-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; transition: opacity .6s ease; }
.sc-card canvas.cleared { opacity: 0; pointer-events: none; }
.sc-open { min-height: 50px; padding: 0 28px; border-radius: 999px; border: 0; background: #2F7A84; color: #fff; font: 600 16px 'Plex Arabic', sans-serif; cursor: pointer; }
.is-opening .sc-cover { opacity: 0; }
.sc-hero { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 44px 24px 14px; }
.sc-orn { width: 80px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #C9CED6, #F2F4F7, #B5BCC6); }
.sc-host { font-size: 15px; color: #4C6A71; max-width: 30ch; }
.sc-names { display: flex; flex-direction: column; font: 700 48px/1.3 'Reem Kufi', sans-serif; color: #2F7A84; outline: none; }
.sc-and { font-size: 26px; color: #B86347; }
.sc-tag { font-size: 16px; color: #4C6A71; }
.sc-when { display: flex; flex-direction: column; gap: 2px; }
.sc-when strong { font-size: 18px; }
.sc-when span { font-size: 14px; color: #4C6A71; }
.tpl-scratch .q-made { color: #4C6A71; }
@media (prefers-reduced-motion: reduce) { .sc-cover, .sc-card canvas { transition: none; } }