/* ============================================================
   رزنامة القبيلة — نظام التصميم
   ============================================================ */

:root {
  --navy:        #0F172A;
  --navy-soft:   #1E293B;
  --page:        #F8FAFC;
  --card:        #FFFFFF;
  --ink:         #0F172A;
  --ink-soft:    #475569;
  --ink-faint:   #94A3B8;
  --line:        #E2E8F0;

  --indigo:      #4F46E5;
  --indigo-dark: #4338CA;
  --indigo-bg:   #EEF2FF;

  --amber:       #E07B0C;
  --amber-bg:    #FEF3E2;

  --rose:        #E11D48;
  --rose-bg:     #FFF1F3;

  --slate:       #475569;
  --slate-bg:    #F1F5F9;

  --accent:      var(--indigo);
  --accent-bg:   var(--indigo-bg);

  --w:      min(100% - 2rem, 46rem);
  --w-wide: min(100% - 2rem, 64rem);
  --r:      14px;

  --font: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-card: 'Amiri', 'Times New Roman', serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.35; font-weight: 700; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

.wrap      { width: var(--w);      margin-inline: auto; }
.wrap-wide { width: var(--w-wide); margin-inline: auto; }

/* الألوان حسب النوع */
.t-indigo { --accent: var(--indigo); --accent-bg: var(--indigo-bg); }
.t-amber  { --accent: var(--amber);  --accent-bg: var(--amber-bg); }
.t-rose   { --accent: var(--rose);   --accent-bg: var(--rose-bg); }
.t-slate  { --accent: var(--slate);  --accent-bg: var(--slate-bg); }

/* ── الهيرو ─────────────────────────────────────────────── */
.hero {
  background: var(--navy);
  color: #fff;
  padding: 2rem 1rem 4.5rem;
  text-align: center;
  position: relative;
}
.hero .brand-mini {
  font-size: .78rem;
  letter-spacing: .12em;
  color: #94A3B8;
  margin-bottom: 1.75rem;
}
.hero h1 { font-size: clamp(1.9rem, 6vw, 2.75rem); margin-bottom: .35rem; }
.hero p  { color: #CBD5E1; margin: 0 0 1.75rem; font-size: .95rem; }

.hero-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.hero-top {
  position: absolute;
  top: 1.25rem;
  inset-inline-start: 1.25rem;
  display: flex;
  gap: .5rem;
}
.hero-top a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: #E2E8F0;
  text-decoration: none;
  font-size: 1rem;
}
.hero-top a:hover { background: rgba(255,255,255,.16); }

/* ── الأزرار ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 600;
  padding: .7rem 1.35rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s, filter .15s;
}
.btn:hover  { filter: brightness(.94); }
.btn:active { transform: scale(.97); }

.btn-indigo { background: var(--indigo); color: #fff; }
.btn-amber  { background: var(--amber);  color: #fff; }
.btn-dark   { background: var(--navy);   color: #fff; }
.btn-ghost  { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }
.btn-ghost:hover { background: #fff; color: var(--ink); }
.btn-block  { width: 100%; }
.btn-sm     { padding: .4rem .8rem; font-size: .85rem; }

/* ── التبويبات ──────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: .25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .3rem;
  width: fit-content;
  margin: -2.5rem auto 2.5rem;
  position: relative;
  box-shadow: 0 4px 16px rgba(15,23,42,.07);
  max-width: calc(100% - 2rem);
  overflow-x: auto;
}
.tabs a {
  white-space: nowrap;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  color: var(--ink-soft);
}
.tabs a.on { background: var(--accent); color: #fff; }
.tabs a:not(.on):hover { background: var(--page); }

/* ── فاصل الشهر ─────────────────────────────────────────── */
.month {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 2rem 0 1rem;
}
.month span {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 700;
  font-size: .88rem;
  padding: .3rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
}
.month::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ── بطاقة المناسبة ─────────────────────────────────────── */
.occ {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  margin-bottom: .85rem;
  transition: border-color .15s, transform .15s;
}
.occ:hover { border-color: var(--accent); transform: translateY(-2px); }
.occ.is-past { opacity: .55; }
.occ .strip { height: 4px; background: var(--accent); }

.occ .row { display: flex; gap: 1rem; padding: 1rem 1.1rem; align-items: center; }

.datebox {
  flex: 0 0 auto;
  width: 64px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .35rem 0;
  background: var(--page);
}
.datebox .m { font-size: .68rem; color: var(--ink-faint); }
.datebox .d { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.datebox .w { font-size: .68rem; color: var(--ink-faint); }

.occ .meta { flex: 1; min-width: 0; }
.occ .pill {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: .1rem .6rem;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent);
  margin-bottom: .3rem;
}
.occ h3 { font-size: 1.05rem; margin: 0 0 .15rem; overflow-wrap: anywhere; }
.occ .sub { font-size: .82rem; color: var(--ink-faint); margin: 0; }

.empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--ink-faint);
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--r);
}

/* ── بطاقة الدعوة الاحترافية (مقاس 9:16) ───────────────────────────── */
.card-shell {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  margin-inline: auto;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(15,23,42,.12);
  position: relative;
  background: #FDFBF3;
}

.inv {
  width: 1080px;
  height: 1920px;
  transform: scale(0.296);
  transform-origin: top left;
  background: #FDFBF3;
  font-family: var(--font-card);
  color: #1B2333;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px;
  position: absolute;
  top: 0; 
  left: 0;
}

/* تحديث الزوايا */
.inv .cor {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 16px solid var(--navy);
}
.inv .cor.c1 { top: 70px; right: 70px; border-left: 0; border-bottom: 0; border-top-right-radius: 40px; }
.inv .cor.c2 { top: 70px; left: 70px; border-right: 0; border-bottom: 0; border-top-left-radius: 40px; }
.inv .cor.c3 { bottom: 70px; right: 70px; border-left: 0; border-top: 0; border-bottom-right-radius: 40px; }
.inv .cor.c4 { bottom: 70px; left: 70px; border-right: 0; border-top: 0; border-bottom-left-radius: 40px; }

/* تحسين العناوين */
.inv .ttl { font-size: 82px; font-weight: 700; line-height: 1.3; margin-bottom: 40px; }
.inv .gr { font-size: 80px; font-weight: 700; line-height: 1.4; margin-bottom: 20px; }


/* الزوايا الأربع */
.inv .cor {
  position: absolute;
  width: 170px;
  height: 170px;
  border: 12px solid var(--navy);
}
.inv .cor.c1 { top: 60px;    right: 60px; border-left: 0;  border-bottom: 0; border-top-right-radius: 34px; }
.inv .cor.c2 { top: 60px;    left: 60px;  border-right: 0; border-bottom: 0; border-top-left-radius: 34px; }
.inv .cor.c3 { bottom: 60px; right: 60px; border-left: 0;  border-top: 0;    border-bottom-right-radius: 34px; }
.inv .cor.c4 { bottom: 60px; left: 60px;  border-right: 0; border-top: 0;    border-bottom-left-radius: 34px; }

/* العنوان */
.inv .ttl { font-size: 76px; font-weight: 700; line-height: 1.35; margin-bottom: 30px; overflow-wrap: anywhere; }
.inv .sub { font-size: 40px; color: #8A8F9C; margin-bottom: 40px; }

/* أسماء الدعاة — كل اسم بسطر */
.inv .ln { font-size: 48px; line-height: 1.9; overflow-wrap: anywhere; }

/* الشريط الذهبي بخطوط جانبية */
.inv .rule {
  display: flex;
  align-items: center;
  gap: 26px;
  width: 100%;
  margin: 46px 0;
}
.inv .rule::before, .inv .rule::after {
  content: '';
  flex: 1;
  height: 3px;
  background: #E3D6A8;
}
.inv .rule span { font-size: 46px; font-weight: 700; color: #C9A227; white-space: nowrap; }

/* أسماء المعاريس */
.inv .gr  { font-size: 74px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.inv .amp { font-size: 34px; color: #A9AEBA; line-height: 1.6; }

/* السطر الزمني */
.inv .when { font-size: 42px; color: #6B7280; margin: 46px 0 32px; }
.inv .when b { color: #C9A227; font-weight: 700; }

/* بادج التاريخ الداكن */
.inv .datepill {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  padding: 26px 66px;
  font-size: 54px;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 44px;
}
.inv .datepill svg { color: #C9A227; flex: 0 0 auto; }
.inv .datepill i { width: 3px; height: 46px; background: rgba(255,255,255,.28); }

.inv .venue {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 40px;
}
.inv .venue svg { color: #C9A227; }

.inv .bless { font-size: 44px; color: #C9A227; }

.inv .sep { width: 55%; height: 2px; background: #E6E3D8; margin: 36px 0 30px; }
.inv .apology { font-size: 36px; color: #9CA3AF; }

/* ── دعوة العشاء — أحجام ومسافات احترافية (لا تؤثر على الزواج) ── */
/* المحتوى يبقى موسّطاً عمودياً فيتوازن الهامش تلقائياً مع 1 أو 2 أو 3 دعاة */
.inv.dinner { padding: 150px 130px; }
.inv.dinner .ttl  { font-size: 90px; line-height: 1.25; margin-bottom: 34px; }
.inv.dinner .sub  { font-size: 46px; margin-bottom: 46px; }
.inv.dinner .ln   { font-size: 62px; font-weight: 600; line-height: 1.75; color: #1B2333; }
.inv.dinner .rule { margin: 58px 0; }
.inv.dinner .gr   { margin-bottom: 14px; }
.inv.dinner .when { margin: 56px 0 34px; }

/* تحديد الزفاف — نمط أهدأ */
.inv.soft .ttl { font-size: 62px; }
.inv.soft .cor { border-color: #C9A227; }
.inv.soft .note { font-size: 40px; color: #6B7280; line-height: 1.8; margin-bottom: 46px; }
.inv.soft .nmbox {
  font-size: 76px;
  font-weight: 700;
  line-height: 1.5;
  background: #F5F0DF;
  border-radius: 22px;
  padding: 28px 42px;
  margin-bottom: 46px;
  overflow-wrap: anywhere;
}
.inv.soft .datepill { background: transparent; color: #1B2333; border: 5px solid #E8DFC0; }
.inv.soft .datepill i { background: #E8DFC0; }

/* عزاء */
.inv.mourn { background: #F7F7F5; }
.inv.mourn .cor { border-color: #64748B; }
.inv.mourn .rule span, .inv.mourn .bless { color: #64748B; }
.inv.mourn .rule::before, .inv.mourn .rule::after { background: #D3D7DE; }
.inv.mourn .datepill { background: #475569; }
.inv.mourn .datepill svg { color: #CBD5E1; }

/* ── صفحة التفاصيل ──────────────────────────────────────── */
.detail-hero { background: var(--navy); padding: 2rem 1rem 6rem; }
.detail-body { margin-top: -5rem; padding-bottom: 3rem; }

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.75rem;
}
.panel.tight { padding: 1.25rem; }

/* عناصر صفحة التفاصيل */
.badge-pill {
  display: inline-block;
  background: var(--accent-bg);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 600;
  padding: .25rem .9rem;
  border-radius: 999px;
}
.fam {
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  font-weight: 700;
  margin: .7rem 0 0;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.block {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.block.accentbg { background: var(--accent-bg); border-color: transparent; text-align: center; }
.block-h {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: var(--ink-faint);
  margin-bottom: .7rem;
}
.block.accentbg .block-h { justify-content: center; }

.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem; }
.chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .6rem .75rem;
  font-size: .92rem;
  overflow-wrap: anywhere;
}
.chip .ic {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--page);
  color: var(--ink-faint);
}

.quote {
  position: relative;
  text-align: center;
  font-family: var(--font-card);
  font-size: 1.15rem;
  font-weight: 700;
  color: #C9A227;
  margin: 1.25rem 0;
  padding: 0 1.5rem;
}
.quote::before, .quote::after {
  content: '”';
  position: absolute;
  top: -.35rem;
  font-size: 1.6rem;
  color: var(--line);
}
.quote::before { right: 0; }
.quote::after  { left: 0; content: '“'; }

.bigname {
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.amp-line { font-size: .85rem; color: var(--ink-faint); margin: .2rem 0; }

.facts { display: grid; gap: .6rem; margin: 1.25rem 0; }
.fact {
  background: var(--page);
  border-radius: 12px;
  padding: .75rem 1rem;
}
.fact .k { font-size: .74rem; color: var(--ink-faint); }
.fact .v { font-weight: 600; overflow-wrap: anywhere; }

.share-row { display: flex; gap: .5rem; justify-content: center; margin: 1.25rem 0; }
.share-row a, .share-row button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: none;
  font-size: 1.05rem;
}
.share-row a:hover, .share-row button:hover { border-color: var(--accent); color: var(--accent); }

/* ── النماذج ────────────────────────────────────────────── */
.form-head {
  background: var(--navy);
  color: #fff;
  text-align: center;
  padding: 1.25rem;
  border-radius: 20px 20px 0 0;
}
.form-head h2 { margin: 0; font-size: 1.15rem; }
.form-head p  { margin: .15rem 0 0; font-size: .82rem; color: #94A3B8; }

.form-body {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  padding: 1.5rem;
}

.seg {
  display: flex;
  gap: .35rem;
  background: var(--page);
  border-radius: 12px;
  padding: .3rem;
  margin-bottom: 1.5rem;
}
.seg a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
  padding: .55rem;
  border-radius: 9px;
  color: var(--ink-soft);
}
.seg a.on { background: #fff; color: var(--accent); box-shadow: 0 1px 4px rgba(15,23,42,.08); }

.field { margin-bottom: 1.1rem; }
.field > label { display: block; font-size: .87rem; font-weight: 600; margin-bottom: .35rem; }
.field .note { font-weight: 400; color: var(--ink-faint); font-size: .78rem; }

input[type=text], input[type=tel], input[type=date], input[type=time],
input[type=password], select, textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 1rem;
  padding: .7rem .85rem;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); background: #fff; }
textarea { min-height: 6rem; resize: vertical; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }

.group {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 1.1rem;
  background: var(--page);
}
.group > h4 { margin: 0 0 .75rem; font-size: .88rem; color: var(--accent); }
.group input { background: #fff; margin-bottom: .5rem; }

.addbtn {
  background: none;
  border: 0;
  color: var(--accent);
  font-family: var(--font);
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  padding: .2rem 0;
}

.choice { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.25rem; }
.choice label {
  display: block;
  text-align: center;
  padding: 1.1rem .75rem;
  border: 2px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  background: #fff;
}
.choice input { position: absolute; opacity: 0; }
.choice label .t { font-weight: 700; font-size: .92rem; display: block; }
.choice label .s { font-size: .75rem; color: var(--ink-faint); }
.choice input:checked + .t,
.choice label:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }

.preview-box {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.preview-box > .cap { text-align: center; font-size: .82rem; color: var(--ink-faint); margin-bottom: .9rem; }

.hidden { display: none !important; }

.alert {
  padding: .8rem 1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  font-size: .9rem;
  border: 1px solid var(--line);
  background: #fff;
}
.alert.success { border-color: #16A34A; color: #15803D; background: #F0FDF4; }
.alert.error   { border-color: var(--rose); color: var(--rose); background: var(--rose-bg); }
.alert.info    { border-color: var(--indigo); color: var(--indigo-dark); background: var(--indigo-bg); }

/* ── التواصل ────────────────────────────────────────────── */
.people { display: grid; gap: 1rem; }
.person {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.person .who { flex: 1; min-width: 9rem; }
.person .who .n { font-weight: 700; font-size: 1.05rem; }
.person .who .r { font-size: .82rem; color: var(--ink-faint); }

.socials { display: flex; gap: .55rem; flex-wrap: wrap; }
.soc {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  width: 52px;
  text-decoration: none;
}
.soc .ic {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
}
.soc .lbl {
  font-size: .66rem;
  line-height: 1.15;
  text-align: center;
  color: var(--ink-faint);
}
.s-wa     .ic { background: #25D366; }
.s-snap   .ic { background: #111; }
.s-snap   .ic svg { color: #FFFC00; }
.s-ig     .ic { background: #E1306C; }
.s-x      .ic { background: #000; }
.s-tk     .ic { background: #000; }
.s-deafat .ic { background: #fff; border: 1px solid var(--line); padding: 0; overflow: hidden; }
.s-deafat .ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-cal    .ic { background: #4F46E5; }

.qr-wrap { text-align: center; }
.qr {
  width: 96px; height: 96px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px;
}
.qr img, .qr canvas { width: 100%; height: 100%; display: block; }
.qr-wrap .cap { font-size: .68rem; color: var(--ink-faint); margin-top: .2rem; }

/* ── لوحة التحكم ────────────────────────────────────────── */
.abar { background: var(--navy); color: #fff; }
.abar .in {
  width: var(--w-wide);
  margin-inline: auto;
  padding: .85rem 0;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.abar a { color: #CBD5E1; text-decoration: none; font-size: .9rem; }
.abar a:hover, .abar a.on { color: #fff; }
.abar nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.abar .brand { font-weight: 700; color: #fff; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem,1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; }
.stat .n { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.stat .l { font-size: .78rem; color: var(--ink-faint); }

table.list { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: .9rem; }
table.list th { text-align: right; font-size: .75rem; color: var(--ink-faint); padding: .7rem 1rem; background: var(--page); border-bottom: 1px solid var(--line); }
table.list td { padding: .75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list tr:last-child td { border-bottom: 0; }
table.list tr.unread td { font-weight: 600; }
.table-scroll { overflow-x: auto; }

/* ── الدخول / التركيب ───────────────────────────────────── */
.center-page { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.center-card { width: min(100%, 27rem); background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 2rem; }
.center-card h1 { font-size: 1.35rem; }
.center-card .hint { font-size: .85rem; color: var(--ink-faint); }
.center-card .ok  { color: #15803D; font-weight: 600; }
.center-card code { background: var(--page); padding: .1rem .35rem; border-radius: 5px; font-size: .85em; }

/* ── التذييل ────────────────────────────────────────────── */
.foot {
  margin-top: 3rem;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .85rem;
  color: var(--ink-faint);
}
.foot a { color: var(--ink-soft); text-decoration: none; }

@media print { .hero, .foot, .share-row, .abar, .tabs { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }