/* خط أميري مستضاف على الموقع نفسه (بدون اتصال بجوجل = بدون تتبّع) */
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/amiri-arabic-400-normal.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/amiri-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/amiri-arabic-700-normal.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/amiri-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* =====================================================
   بسام قرآن كريم - ملف التنسيق
   ===================================================== */

/* ---------- 1) الألوان (متغيرات) ----------
   غيّر اللون من هنا وهيتغير في الموقع كله */
:root {
  color-scheme: light dark;

  --bg: #f4faff;            /* خلفية الصفحة */
  --bg-soft: #e3f1fb;       /* خلفية فاتحة للأشرطة */
  --surface: #ffffff;       /* خلفية الكروت */
  --border: #cde2f1;        /* لون الحدود */
  --text: #14283b;          /* لون النص */
  --muted: #566b7f;         /* لون النص الخافت */
  --primary: #1f78b4;       /* الأزرق الأساسي */
  --primary-strong: #145a8a;/* أزرق أغمق للعناوين */
  --primary-soft: #dcedfa;  /* أزرق فاتح جداً */
  --on-primary: #ffffff;    /* لون الكتابة فوق الأزرق */
  --gold: #8f6410;          /* الذهبي (للنصوص) */
  --gold-line: #c9992f;     /* ذهبي للخطوط والزينة */
  --gold-soft: #f7edd0;     /* ذهبي فاتح للتظليل */
  --green: #1b7f5c;         /* أخضر */
  --shadow: 0 6px 22px rgba(20, 90, 138, .10);
  --radius: 18px;
}

/* الوضع الداكن التلقائي: بيشتغل لو جهاز الزائر على الوضع الداكن
   ولسه ما اختارش ثيم من اللوحة الجانبية */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0a1724;
    --bg-soft: #0f2234;
    --surface: #12293f;
    --border: #24435f;
    --text: #e9f2f9;
    --muted: #9db3c6;
    --primary: #6bb9ee;
    --primary-strong: #9ad0f5;
    --primary-soft: #173a57;
    --on-primary: #08213a;
    --gold: #e3b95c;
    --gold-line: #c9992f;
    --gold-soft: #3a3016;
    --green: #5fd1a3;
    --shadow: 0 6px 22px rgba(0, 0, 0, .35);
  }
}

/* ---------- الثيمات الجاهزة (من اللوحة الجانبية) ---------- */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1724;
  --bg-soft: #0f2234;
  --surface: #12293f;
  --border: #24435f;
  --text: #e9f2f9;
  --muted: #9db3c6;
  --primary: #6bb9ee;
  --primary-strong: #9ad0f5;
  --primary-soft: #173a57;
  --on-primary: #08213a;
  --gold: #e3b95c;
  --gold-line: #c9992f;
  --gold-soft: #3a3016;
  --green: #5fd1a3;
  --shadow: 0 6px 22px rgba(0, 0, 0, .35);
}

:root[data-theme="green"] {
  color-scheme: light;
  --bg: #f3faf5;
  --bg-soft: #e0f1e5;
  --surface: #ffffff;
  --border: #c9e3d1;
  --text: #12301f;
  --muted: #4f6b5a;
  --primary: #1f7a4d;
  --primary-strong: #14573a;
  --primary-soft: #dcf0e3;
  --on-primary: #ffffff;
  --gold: #8f6410;
  --gold-line: #c9992f;
  --gold-soft: #f7edd0;
  --green: #1b7f5c;
  --shadow: 0 6px 22px rgba(20, 100, 60, .10);
}

:root[data-theme="paper"] {
  color-scheme: light;
  --bg: #f6efe0;
  --bg-soft: #ece0c6;
  --surface: #fffaf0;
  --border: #dccdab;
  --text: #3a2d17;
  --muted: #6d5c3d;
  --primary: #8a5a1c;
  --primary-strong: #6a4210;
  --primary-soft: #f0e2c4;
  --on-primary: #ffffff;
  --gold: #7a5200;
  --gold-line: #b8862b;
  --gold-soft: #f3e4b8;
  --green: #3f7a3a;
  --shadow: 0 6px 22px rgba(90, 60, 20, .12);
}

:root[data-theme="royal"] {
  color-scheme: light;
  --bg: #f8f5ff;
  --bg-soft: #ebe4fa;
  --surface: #ffffff;
  --border: #d9cdf0;
  --text: #221840;
  --muted: #5f5580;
  --primary: #6b3fb0;
  --primary-strong: #4c2a82;
  --primary-soft: #e8defa;
  --on-primary: #ffffff;
  --gold: #8f6410;
  --gold-line: #c9992f;
  --gold-soft: #f7edd0;
  --green: #1b7f5c;
  --shadow: 0 6px 22px rgba(76, 42, 130, .12);
}

/* ---------- 2) أساسيات الصفحة ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif;
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  line-height: 1.9;
}

a {
  color: var(--primary);
  text-underline-offset: .3em;
}

a:hover {
  color: var(--primary-strong);
}

:focus-visible {
  outline: 3px solid var(--gold-line);
  outline-offset: 3px;
  border-radius: 6px;
}

button {
  font-family: inherit;
}

/* ---------- 3) القائمة (nav) - فوق الهيدر ---------- */
nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--gold-line);
  padding: .5rem 1rem;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

nav a {
  display: block;
  padding: .3rem 1.1rem;
  border-radius: 999px;
  color: var(--primary-strong);
  text-decoration: none;
  font-weight: 700;
  transition: background .2s, color .2s;
}

nav a:hover,
nav a[aria-current="page"] {
  background: var(--primary);
  color: var(--on-primary);
}

/* زر النجمة (محبّي الموقع) */
.love-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .85rem;
  border: 2px solid var(--gold-line);
  border-radius: 999px;
  background: transparent;
  color: var(--primary-strong);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  transition: background .2s, transform .2s;
}

.love-btn:hover {
  background: var(--gold-soft);
}

.love-star {
  display: inline-block;
  filter: grayscale(1) opacity(.7);
  transition: transform .3s, filter .3s;
}

.love-btn:hover .love-star {
  filter: none;
}

.love-btn[aria-pressed="true"] {
  background: var(--gold-soft);
}

.love-btn[aria-pressed="true"] .love-star {
  filter: none;
  transform: scale(1.2) rotate(72deg);
}

#love-count:empty {
  display: none;
}

/* ---------- 4) الشريط العلوي (header) ---------- */
header {
  position: relative;
  text-align: center;
  padding: 2rem 1rem 1.4rem;
  background: linear-gradient(180deg, var(--primary-soft), var(--bg));
  overflow: hidden;
}

/* زخرفة نجمة ثمانية خفيفة في خلفية الشريط */
header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primary);
  opacity: var(--ornament-opacity, .10);
  -webkit-mask: var(--ornament-mask, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Crect x='16' y='16' width='32' height='32'/%3E%3Crect x='16' y='16' width='32' height='32' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E"));
  mask: var(--ornament-mask, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Crect x='16' y='16' width='32' height='32'/%3E%3Crect x='16' y='16' width='32' height='32' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E"));
  -webkit-mask-size: var(--ornament-size, 64px);
  mask-size: var(--ornament-size, 64px);
  pointer-events: none;
}

header h1 {
  position: relative;
  margin: 0;
  font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);
  line-height: 1.4;
  color: var(--primary-strong);
}

/* علامة ۞ (رُبع الحزب) تحت العنوان */
header h1::after {
  content: "۞";
  display: block;
  font-size: .55em;
  line-height: 1.2;
  color: var(--gold-line);
}

/* ---------- 5) المحتوى (main) والأقسام (section) ---------- */
main {
  max-width: 1040px;
  margin-inline: auto;
  padding: 1.5rem 1rem 2rem;
}

section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.4rem 1.6rem;
  margin-bottom: 1.4rem;
}

section h2 {
  margin: 0 0 .6rem;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  line-height: 1.5;
  color: var(--primary-strong);
}

/* علامة ۞ قبل كل عنوان فرعي */
section h2::before {
  content: "۞ ";
  color: var(--gold-line);
}

section p {
  margin: 0 0 .8rem;
}

/* القوائم داخل الأقسام */
section ul {
  margin: 0;
  padding-inline-start: 1.4rem;
}

section li {
  margin-bottom: .5rem;
}

section li::marker {
  color: var(--gold-line);
}

/* قسم الترحيب: أكبر ومميز */
#welcome {
  text-align: center;
  padding-block: 2.2rem;
  background: linear-gradient(135deg, var(--primary-soft), var(--surface) 70%);
  border-color: var(--gold-line);
}

#welcome h2::before {
  content: none;
}

/* الرابط داخل الترحيب يظهر كزر */
#welcome a {
  display: inline-block;
  margin-top: .6rem;
  padding: .4rem 1.8rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .2s, background .2s;
}

#welcome a:hover {
  background: var(--primary-strong);
  color: var(--on-primary);
  transform: translateY(-2px);
}

/* ---------- 6) فاتحة القرآن ---------- */

/* الخط الذي يظهر "فجأة" تحت العبارة بعد ثانية وشوية */
.reveal-underline {
  padding-bottom: .15em;
  background-image: linear-gradient(var(--gold-line), var(--gold-line));
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 0% 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: underline-in .6s ease-out 1.2s forwards;
}

@keyframes underline-in {
  to {
    background-size: 100% 4px;
  }
}

/* إطار شبيه بصفحة المصحف */
.surah-text {
  text-align: center;
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.5rem);
  line-height: 2.7;
  padding: 1rem 1.2rem;
  border: 4px double var(--gold-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary-soft) 40%, var(--surface));
}

/* علامة نهاية الآية: دائرة ذهبية فيها الرقم */
.ayah-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9em;
  height: 1.9em;
  margin-inline: .4em .7em;
  border: 2px solid var(--gold-line);
  border-radius: 50%;
  color: var(--gold);
  font-size: .5em;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.surah-meta {
  margin: .8rem 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 1rem;
}

/* ---------- 7) الأماكن اللي هتتملا بالجافاسكريبت ---------- */
#ayah-of-day-box {
  text-align: center;
  font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.3rem);
  line-height: 2.3;
  padding: 1rem;
  border: 2px dashed var(--gold-line);
  border-radius: calc(var(--radius) - 4px);
  background: var(--gold-soft);
}

#reciters-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

/* رسالة مؤقتة لحد ما نملا الأماكن الفاضية */
#ayah-of-day-box:empty::before,
#reciters-list:empty::before {
  content: "سيظهر المحتوى هنا قريباً إن شاء الله";
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 1rem;
}

/* ---------- 8) المشغّل (ثابت أسفل الشاشة) ---------- */
#player {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  padding: .8rem 1rem;
  background: var(--surface);
  border-top: 2px solid var(--gold-line);
  box-shadow: 0 -6px 22px rgba(0, 0, 0, .12);
}

/* وهو فاضي مايظهرش */
#player:empty {
  display: none;
}

/* ---------- 9) الذيل (footer) ---------- */
footer {
  text-align: center;
  padding: 1.4rem 1rem 6rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}

footer h2 {
  margin: 0 0 .3rem;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem);
  line-height: 1.5;
  color: var(--primary-strong);
}

footer p {
  margin: 0 0 .5rem;
}

footer a {
  font-weight: 700;
}

/* ---------- 10) كلمات ملونة ومسطّرة ----------
   استخدمها داخل أي فقرة هكذا:
   <span class="hl">كلمة زرقاء</span>
   <span class="important">كلمة مهمة</span>  */
.hl {
  color: var(--primary);
  font-weight: 700;
}

.gold {
  color: var(--gold);
  font-weight: 700;
}

.green {
  color: var(--green);
  font-weight: 700;
}

.important {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-decoration-thickness: 3px;
  text-underline-offset: .35em;
}

.mark {
  background: var(--gold-soft);
  padding: .05em .4em;
  border-radius: .4em;
}

strong {
  color: var(--primary-strong);
}

/* ---------- 11) اللوحة الجانبية (ثيمات وألوان ومقالات) ---------- */
.side-toggle {
  position: fixed;
  left: .8rem;
  bottom: 1rem;
  z-index: 50;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--gold-line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .2s;
}

.side-toggle:hover {
  transform: scale(1.08);
}

/* لو المشغّل ظاهر، نرفع الزر فوقه */
body:has(#player:not(:empty)) .side-toggle {
  bottom: 5.5rem;
}

.side-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility 0s .25s;
}

.side-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s;
}

.side-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  width: min(22rem, 90vw);
  padding: 1rem 1.2rem 2rem;
  overflow-y: auto;
  background: var(--surface);
  border-right: 3px solid var(--gold-line);
  box-shadow: 8px 0 30px rgba(0, 0, 0, .25);
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform .3s ease, visibility 0s .3s;
}

.side-panel.open {
  transform: none;
  visibility: visible;
  transition: transform .3s ease;
}

.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.side-head h2 {
  margin: 0;
  font-size: 1.6rem;
  color: var(--primary-strong);
}

.side-close {
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
}

.side-panel h3 {
  margin: 1.4rem 0 .6rem;
  font-size: 1.25rem;
  color: var(--gold);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}

.theme-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .6rem .3rem;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color .2s, transform .2s;
}

.theme-btn:hover {
  transform: translateY(-2px);
}

.theme-btn[aria-pressed="true"] {
  border-color: var(--gold-line);
  box-shadow: 0 0 0 2px var(--gold-line);
}

/* دايرة صغيرة بنصفين: لون الثيم وخلفيته */
.swatch {
  --sw-a: #1f78b4;
  --sw-b: #f4faff;
  width: 2.2rem;
  height: 2.2rem;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sw-a) 50%, var(--sw-b) 50%);
}

.theme-btn[data-theme="auto"] .swatch  { --sw-a: #f4faff; --sw-b: #0a1724; }
.theme-btn[data-theme="light"] .swatch { --sw-a: #1f78b4; --sw-b: #f4faff; }
.theme-btn[data-theme="dark"] .swatch  { --sw-a: #6bb9ee; --sw-b: #0a1724; }
.theme-btn[data-theme="green"] .swatch { --sw-a: #1f7a4d; --sw-b: #f3faf5; }
.theme-btn[data-theme="paper"] .swatch { --sw-a: #8a5a1c; --sw-b: #f6efe0; }
.theme-btn[data-theme="royal"] .swatch { --sw-a: #6b3fb0; --sw-b: #f8f5ff; }

.color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .7rem;
}

.color-row input[type="color"] {
  width: 3.2rem;
  height: 2.4rem;
  padding: 2px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
}

.btn-soft {
  padding: .3rem 1.2rem;
  border: 2px solid var(--gold-line);
  border-radius: 999px;
  background: transparent;
  color: var(--primary-strong);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-soft:hover {
  background: var(--gold-soft);
}

.side-note {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

/* ---------- 12) رسالة صغيرة (تظهر وتختفي) ---------- */
.toast {
  position: fixed;
  inset-inline: 0;
  bottom: 5.5rem;
  z-index: 80;
  width: fit-content;
  max-width: 90vw;
  margin-inline: auto;
  padding: .5rem 1.4rem;
  border-radius: 999px;
  background: var(--primary-strong);
  color: var(--on-primary);
  font-weight: 700;
  text-align: center;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}

.toast.show {
  opacity: 1;
  transform: none;
}

/* ---------- 13) الشاشات الصغيرة (الموبايل) ---------- */
@media (max-width: 480px) {
  nav {
    padding-inline: .5rem;
  }

  nav ul {
    gap: .15rem;
  }

  nav a {
    padding: .25rem .7rem;
    font-size: 1.05rem;
  }

  .love-btn {
    padding: .15rem .55rem;
  }
}

/* ---------- 14) راحة العين ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .reveal-underline {
    animation: none;
    background-size: 100% 4px;
  }
}

/* =====================================================
   صفحة «نبذة عني» (about.html)
   ===================================================== */
.about-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.4rem;
  align-items: center;
}

.about-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 3.4rem;
  background: var(--primary-soft);
  border: 3px solid var(--gold-line);
  box-shadow: var(--shadow);
}

.about-card h2 {
  margin: 0 0 .3rem;
}

.about-card .about-role {
  color: var(--muted);
  margin: 0;
}

.facts {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .8rem;
}

.facts li {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .8rem 1rem;
}

.facts li::marker { content: ""; }

.facts .label {
  display: block;
  font-size: .85rem;
  color: var(--muted);
}

.facts .value {
  font-weight: 700;
  color: var(--primary-strong);
}

@media (max-width: 560px) {
  .about-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}


/* ---------- بطاقة دعم الموقع ---------- */
.support-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 1.15rem;
  align-items: start;
  margin-top: 1.4rem;
  padding: 1.35rem;
  border: 1px solid var(--gold-line);
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary-soft), var(--surface) 78%);
  box-shadow: var(--shadow);
}
.support-mark {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 2rem;
}
.support-kicker {
  margin: 0 0 .25rem;
  color: var(--primary-strong);
  font-weight: 800;
  font-size: .9rem;
}
.support-content h2 {
  margin: 0 0 .55rem;
  color: var(--primary-strong);
}
.support-content > p {
  line-height: 1.9;
}
.support-method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .8rem;
  margin-top: .8rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.support-method > strong { color: var(--primary-strong); }
.support-number-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding-top: .55rem;
  border-top: 1px solid var(--border);
}
.support-number-box[hidden] { display: none; }
.support-number-label { color: var(--muted); }
#support-number {
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: .06em;
  font-size: 1.1rem;
  color: var(--primary-strong);
}
.support-note {
  width: 100%;
  margin: .1rem 0 0;
  color: var(--muted);
  font-size: .88rem;
}
.support-thanks {
  margin-bottom: 0;
  color: var(--muted);
  font-size: .92rem;
}
@media (max-width: 560px) {
  .support-card { grid-template-columns: 1fr; }
  .support-mark { width: 56px; height: 56px; font-size: 1.7rem; }
}


/* تنويه موحّد يظهر في تذييل جميع صفحات الإصدار الأول */
footer .version-notice {
  max-width: 820px;
  margin: 1rem auto 0;
  padding: .75rem 1rem;
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.8;
}

footer .version-notice strong {
  color: var(--primary-strong);
}