/* ════════════════════════════════════════════════════════════════
   نظام تصميم بورتال استضافة البريد
   عربي أولاً · RTL · من غير أي build step

   الاتجاه: دقّة البنية التحتية. ده منتج ثقة — العميل بيسلّمنا بريد
   شركته. فاللغة البصرية مأخوذة من مادة المنتج نفسها: سجلات، مسارات،
   حالات تحقق. الأحمر ده أحمر ختم البريد، وبيتحط بحساب.
   ════════════════════════════════════════════════════════════════ */

/* ── ١. التوكنات ─────────────────────────────────────────────── */

:root {
  /* الأسطح — ورق دافي، مش أبيض معقّم ولا كريمي */
  --paper:     #F7F6F3;
  --surface:   #FFFFFF;
  --raised:    #F0EEE8;
  --sunken:    #E9E6DE;

  /* الحبر — أسود مائل للأزرق، مش رمادي ميت */
  --ink:       #14181F;
  --ink-2:     #39424E;
  --muted:     #67717E;
  --faint:     #98A1AC;

  --line:      #E1DFD7;
  --line-2:    #C9C5BA;

  /* الهوية */
  --brand:     #153A48;   /* حبر بترولي — الأزرار والروابط */
  --brand-2:   #1E5567;
  --brand-soft:#E3EAED;
  --stamp:     #C1452B;   /* أحمر الختم — العلامة والتأكيد النادر */
  --stamp-soft:#F8E7E2;

  /* الدلالة — منفصلة عن الهوية بالكامل */
  --ok:        #2C6247;  --ok-soft:   #DFEAE2;
  --warn:      #8F5D14;  --warn-soft: #F7EAD3;
  --err:       #A83A2B;  --err-soft:  #F9E4E0;

  /* المقياس النوعي */
  --t--1: 0.8125rem;
  --t-0:  1rem;
  --t-1:  1.125rem;
  --t-2:  1.375rem;
  --t-3:  1.75rem;
  --t-4:  clamp(2rem, 1.4rem + 2.4vw, 3.1rem);

  --r-sm: 7px;
  --r:    11px;
  --r-lg: 16px;

  --sh-1: 0 1px 2px rgba(20,24,31,.05);
  --sh-2: 0 1px 3px rgba(20,24,31,.06), 0 8px 24px -12px rgba(20,24,31,.14);

  --measure: 64ch;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* الوضع الداكن — بيتعرّف مرتين: الافتراضي من النظام، والاختيار الصريح.
   القيم مختارة مش معكوسة — العكس الأعمى بيكسر التباين. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #0F1216;
    --surface:   #161A20;
    --raised:    #1D222A;
    --sunken:    #232932;
    --ink:       #E9E7E2;
    --ink-2:     #BFC5CD;
    --muted:     #929BA6;
    --faint:     #6C7681;
    --line:      #262C35;
    --line-2:    #363E49;
    --brand:     #6FB0C6;
    --brand-2:   #8FC7D9;
    --brand-soft:#14262E;
    --stamp:     #E8785E;
    --stamp-soft:#2E1A16;
    --ok:        #5EB78B;  --ok-soft:   #142A21;
    --warn:      #D9A24E;  --warn-soft: #2C2313;
    --err:       #E07C6C;  --err-soft:  #2E1A17;
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --paper:#0F1216; --surface:#161A20; --raised:#1D222A; --sunken:#232932;
  --ink:#E9E7E2; --ink-2:#BFC5CD; --muted:#929BA6; --faint:#6C7681;
  --line:#262C35; --line-2:#363E49;
  --brand:#6FB0C6; --brand-2:#8FC7D9; --brand-soft:#14262E;
  --stamp:#E8785E; --stamp-soft:#2E1A16;
  --ok:#5EB78B; --ok-soft:#142A21;
  --warn:#D9A24E; --warn-soft:#2C2313;
  --err:#E07C6C; --err-soft:#2E1A17;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

/* ── ٢. الأساس ───────────────────────────────────────────────── */

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

/* ⚠️ قاعدة عربية أساسية: مفيش letter-spacing خالص.
   الحروف العربية متصلة ببعضها، وأي تباعد بيقطع الوصلات ويخلي
   الكلمة تتقري حرف حرف. القاعدة دي بتلغي أي تباعد جاي من
   أنماط لاتينية معتادة (شرائط صغيرة، رؤوس جداول). */
:lang(ar), [dir="rtl"] { letter-spacing: normal; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-0);
  /* العربي محتاج سطر أوسع من اللاتيني */
  line-height: 1.8;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 .5rem;
  text-wrap: balance;
}
h1 { font-size: var(--t-4); line-height: 1.15; }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-2); }
h4 { font-size: var(--t-1); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* الفوكس مرئي دايماً — شيله وإنت بتكسر الوصول بالكيبورد */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--stamp-soft); color: var(--stamp); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── ٣. التخطيط ──────────────────────────────────────────────── */

.wrap { max-width: 1140px; margin-inline: auto; padding-inline: 1.15rem; }
.narrow { max-width: 480px; margin-inline: auto; }
.mid { max-width: 760px; margin-inline: auto; }
.section { padding-block: clamp(2rem, 5vw, 3.75rem); }
.lede { color: var(--muted); font-size: var(--t-1); max-width: var(--measure); margin-bottom: 1.75rem; }
.stack { display: grid; gap: 1rem; }
.stack-lg { display: grid; gap: 1.75rem; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cluster { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

.grid { display: grid; gap: 1.1rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr)); }

/* ── ٤. الهيدر ───────────────────────────────────────────────── */

header.top {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
header.top .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 66px; flex-wrap: wrap;
}

.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: "Readex Pro", sans-serif; font-weight: 600;
  font-size: 1.1rem; color: var(--ink);
}
.brand:hover { text-decoration: none; }
/* علامة الختم — المكان الوحيد اللي الأحمر بيقود فيه */
.brand .mark {
  width: 26px; height: 26px; flex: none;
  border-radius: 7px; background: var(--brand);
  display: grid; place-items: center; position: relative;
}
.brand .mark::before {
  content: ""; width: 13px; height: 9px;
  border: 1.5px solid var(--surface); border-radius: 1.5px;
}
.brand .mark::after {
  content: ""; position: absolute;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--stamp);
  inset-block-start: -2px; inset-inline-end: -2px;
  border: 2px solid var(--surface);
}

nav.main {
  display: flex; gap: 1.15rem; align-items: center;
  margin-inline-start: auto; flex-wrap: wrap;
}
nav.main a {
  color: var(--muted); font-size: .93rem; font-weight: 500;
  padding-block: .45rem; position: relative;
}
nav.main a:hover { color: var(--ink); text-decoration: none; }
nav.main a.on { color: var(--ink); font-weight: 600; }
nav.main a.on::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px;
  height: 2px; background: var(--stamp); border-radius: 2px;
}

/* ── ٥. الأزرار ──────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  /* 44px ارتفاع — الحد الأدنى للمس */
  min-height: 44px; padding: .6rem 1.25rem;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--brand); color: #fff;
  font: inherit; font-size: .95rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; text-align: center;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover { background: var(--brand-2); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--raised); color: var(--ink); border-color: var(--line-2); }

.btn.stamp { background: var(--stamp); }
.btn.stamp:hover { background: color-mix(in srgb, var(--stamp) 85%, black); }

.btn.danger { background: transparent; color: var(--err); border-color: var(--line-2); }
.btn.danger:hover { background: var(--err-soft); border-color: var(--err); }

.btn.sm { min-height: 36px; padding: .35rem .8rem; font-size: .86rem; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ── ٦. البطاقات ─────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.15rem, 3vw, 1.6rem);
  box-shadow: var(--sh-1);
}
.card + .card { margin-top: 1.1rem; }
.card > :first-child { margin-top: 0; }
.card-lift { box-shadow: var(--sh-2); }

/* ── ٧. الهيرو ───────────────────────────────────────────────── */

.hero {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(1.5rem, 4vw, 3.25rem);
}
@media (min-width: 900px) { .hero { grid-template-columns: 1.05fr .95fr; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  /* الخط المونوسبيس مالوش أشكال عربية كويسة — بيسقط لخط النظام
     وبيبان مختلف عن باقي الصفحة. بنستخدم خط النص نفسه. */
  font-family: inherit;
  font-size: .78rem; font-weight: 500;
  color: var(--stamp); background: var(--stamp-soft);
  padding: .3rem .7rem; border-radius: 999px; margin-bottom: 1rem;
}

/* لوحة التوجيه — دي مش زينة، دي بالظبط الحاجة اللي المنتج بيعملها */
.routing {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
  overflow: hidden;
}
.routing .rt-head {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--line);
  background: var(--raised);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .82rem; color: var(--muted);
}
.routing .rt-head .dotset { display: flex; gap: .3rem; }
.routing .rt-head .dotset i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); display: block;
}
.routing .rt-flow {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  padding: 1.2rem 1.1rem; border-bottom: 1px solid var(--line);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .84rem; flex-wrap: wrap; direction: ltr;
}
.routing .rt-flow b { font-weight: 600; color: var(--ink); }
.routing .rt-flow .arrow { color: var(--stamp); font-size: 1.1rem; }
.routing .rt-rows { padding: .4rem 0; }
.routing .rt-row {
  display: grid; grid-template-columns: 4.5rem 1fr auto;
  gap: .8rem; align-items: center;
  padding: .58rem 1.1rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .8rem;
}
.routing .rt-row .k { color: var(--muted); direction: ltr; text-align: left; }
.routing .rt-row .v {
  color: var(--ink-2); direction: ltr; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.routing .rt-ok {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--ok-soft); color: var(--ok);
  font-size: .68rem; font-weight: 700;
}

/* ── ٨. الشارات والحالات ─────────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.badge.ok   { background: var(--ok-soft);   color: var(--ok);    border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.badge.warn { background: var(--warn-soft); color: var(--warn);  border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.badge.err  { background: var(--err-soft);  color: var(--err);   border-color: color-mix(in srgb, var(--err) 22%, transparent); }
.badge.mute { background: var(--raised);    color: var(--muted); border-color: var(--line); }
/* نقطة الحالة — عشان المعنى مايبقاش باللون لوحده */
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}

.flash {
  padding: .85rem 1.1rem; border-radius: var(--r-sm);
  margin-bottom: 1.3rem; font-size: .94rem;
  border: 1px solid; border-inline-start-width: 3px;
}
.flash.ok   { background: var(--ok-soft);   color: var(--ok);   border-color: var(--ok); }
.flash.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.flash.err  { background: var(--err-soft);  color: var(--err);  border-color: var(--err); }

/* ── ٩. النماذج ──────────────────────────────────────────────── */

label {
  display: block; font-size: .89rem; font-weight: 600;
  margin-bottom: .35rem; color: var(--ink-2);
}
label .hint { font-weight: 400; color: var(--faint); }

input[type=text], input[type=email], input[type=password],
input[type=number], input[type=url], input[type=search],
select, textarea {
  width: 100%; min-height: 44px;
  padding: .6rem .8rem;
  font: inherit; font-size: .95rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:hover:not(:disabled), select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
  outline: none;
}
input:disabled { background: var(--raised); color: var(--faint); cursor: not-allowed; }
textarea { min-height: 100px; resize: vertical; line-height: 1.7; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: left 1.1rem center, left .75rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-start: 2.2rem;
}
::placeholder { color: var(--faint); }

.field { margin-bottom: 1.1rem; }
.field .note { font-size: .84rem; color: var(--muted); margin: .35rem 0 0; }
.row { display: flex; gap: .85rem; flex-wrap: wrap; }
.row > * { flex: 1 1 190px; min-width: 0; }
.check { display: flex; align-items: center; gap: .55rem; }
.check input { width: auto; min-height: auto; width: 18px; height: 18px; accent-color: var(--brand); }
.check label { margin: 0; font-weight: 500; }

/* ── ١٠. الجداول ─────────────────────────────────────────────── */

/* المحتوى العريض بيتمرّر جوه حاويته — الصفحة نفسها عمرها ما بتتمرّر أفقياً */
.scroller {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: .91rem; }
th, td {
  text-align: start; padding: .8rem 1rem;
  border-bottom: 1px solid var(--line); vertical-align: middle;
}
thead th {
  background: var(--raised); color: var(--muted);
  font-size: .78rem; font-weight: 600;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--raised); }
.num { font-variant-numeric: tabular-nums; }

/* ── ١١. القيم التقنية ───────────────────────────────────────── */

code, .mono {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .85em; direction: ltr; unicode-bidi: isolate;
}
/* قيم DNS لازم تتنسخ حرفياً — المونوسبيس هنا وظيفة مش زينة */
.val {
  display: block;
  background: var(--sunken); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .55rem .7rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .81rem; line-height: 1.6;
  direction: ltr; text-align: left;
  overflow-wrap: anywhere; user-select: all;
}

/* ── ١٢. الباقات ─────────────────────────────────────────────── */

.plan {
  display: flex; flex-direction: column; gap: 1rem;
  position: relative;
}
.plan.featured {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), var(--sh-2);
}
.plan.featured::before {
  content: "الأكثر طلباً";
  position: absolute; inset-block-start: -.75rem; inset-inline-start: 1.4rem;
  background: var(--stamp); color: #fff;
  font-size: .72rem; font-weight: 600;
  padding: .18rem .7rem; border-radius: 999px;
}
.plan .price {
  font-family: "Readex Pro", sans-serif;
  font-size: 2.3rem; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan .price small {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: .88rem; font-weight: 400; color: var(--muted);
}
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .92rem; }
.plan ul li { padding-inline-start: 1.45rem; position: relative; color: var(--ink-2); }
.plan ul li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .58em;
  width: 9px; height: 5px;
  /* الشكل ده رمز مش تخطيط — لازم يفضل علامة صح في الاتجاهين،
     فبنستخدم خصائص فيزيائية عشان RTL ما يعكسهاش لسهم. */
  border-left: 1.9px solid var(--ok); border-bottom: 1.9px solid var(--ok);
  transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; }

/* ── ١٣. الإحصائيات ──────────────────────────────────────────── */

.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.05rem 1.15rem;
  display: grid; gap: .15rem;
}
.stat b {
  font-family: "Readex Pro", sans-serif;
  font-size: 1.7rem; font-weight: 600; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: .85rem; color: var(--muted); }
.stat.accent { border-inline-start: 3px solid var(--stamp); }

/* ── ١٤. الخطوات ─────────────────────────────────────────────── */
/* الترقيم هنا مستحق — دي عملية متسلسلة فعلاً، مش قايمة مزخرفة */

.steps { display: grid; gap: 1.1rem; counter-reset: step; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  counter-increment: step;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.25rem 1.15rem;
  position: relative;
}
.step::before {
  content: counter(step);
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem; font-weight: 600;
  color: var(--stamp); background: var(--stamp-soft);
  width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center;
  margin-bottom: .7rem;
}
.step h3 { font-size: 1rem; margin-bottom: .3rem; }
.step p { font-size: .88rem; color: var(--muted); margin: 0; }

/* ── ١٥. متفرقات ─────────────────────────────────────────────── */

.muted { color: var(--muted); }
.small { font-size: var(--t--1); }
hr { border: none; border-top: 1px solid var(--line); margin-block: 1.5rem; }
.inline-form { display: inline; }

details { border-block-end: 1px solid var(--line); padding-block: .85rem; }
details:last-of-type { border-block-end: none; }
details summary {
  cursor: pointer; font-weight: 600; font-size: .95rem;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--stamp); font-weight: 400; font-size: 1.2rem; line-height: 1; }
details[open] summary::after { content: "−"; }
details > p { margin: .7rem 0 0; color: var(--muted); font-size: .92rem; }

.empty {
  text-align: center; padding: clamp(2rem, 6vw, 3.5rem) 1.25rem;
  border: 1px dashed var(--line-2); border-radius: var(--r);
  background: var(--surface);
}
.empty h3 { color: var(--ink); }
.empty p { color: var(--muted); max-width: 40ch; margin-inline: auto; }

footer.bottom {
  border-top: 1px solid var(--line);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-block: 1.8rem;
  color: var(--faint); font-size: .88rem;
}

/* شريط الترتيب على الموبايل — الجداول العريضة بتلمّح إنها بتتمرّر */
@media (max-width: 620px) {
  .scroller { position: relative; }
  .scroller::after {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
    width: 22px; pointer-events: none;
    background: linear-gradient(to left, transparent, var(--surface));
  }
}

/* ── ١٦. مهام النقل ──────────────────────────────────────────── */

.job {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.1rem 1.15rem;
  background: var(--raised);
}

/* شريط التقدّم — الأرقام تحته بتفسّره، عشان المعنى ما يكونش
   في الطول لوحده */
.bar {
  height: 7px; border-radius: 999px;
  background: var(--sunken);
  border: 1px solid var(--line);
  overflow: hidden;
}
.bar > span {
  display: block; height: 100%;
  background: var(--ok);
  border-radius: 999px;
  transition: width .4s var(--ease);
}

/* ── ١٧. كود الربط السريع ────────────────────────────────────── */

.qr-wrap { margin-top: 1.25rem; }
.qr-card {
  display: grid; gap: 1.4rem; align-items: center;
  grid-template-columns: auto 1fr;
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.3rem;
}
@media (max-width: 620px) {
  .qr-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
.qr-img {
  background: #fff; padding: .7rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  width: 176px; height: 176px;
  display: grid; place-items: center;
}
.qr-img svg { width: 100%; height: 100%; display: block; }
.qr-side { min-width: 0; }