/* ══════════════════════════════════════════════════════════════
   أنماط الصفحة الرئيسية (الهبوط)

   الهوية والمكوّنات التسويقية المشتركة في /marketing/marketing.css
   (تُستورد أدناه). هذا الملف يضيف ما يخص الصفحة الرئيسية وحدها:
   نظام تبديل الشاشات، شاشة التحميل، نافذة الدخول/التسجيل،
   وشاشة «أقسامي» ببطاقات الأقسام التي يولّدها landing.js.

   ⚠️ لا يستورد base.css: مكوّناته معاد بناؤها هنا وفي marketing.css
   بالهوية الجديدة، وأسماء أصنافها محفوظة (btn, badge, module-card…)
   لأن landing.js يولّد وسومًا بها.
   ══════════════════════════════════════════════════════════════ */

@import url('/marketing/marketing.css');

/* ── الشعار في رأس الصفحة الأولى ──
   رمزُ الحزمة هنا ٥٤ بكسل لا ٤٨، فالملفّ ٦٣ بكسل (الاشتقاقُ في `chrome.css`).
   وفوق عرض الجوّال وحده، كي لا يغلب قاعدةَ الجوّال هناك. */
@media (min-width: 641px) {
  .site-brand-logo { height: 63px; }
}

/* ── عرضُ الرأس من ١٢٠٠ فما فوق — قواعدُ العروض في الحزمة (`landing-header-fits-narrow-desktop`) ──
   حاويةُ المنصّة ١١٦٠ في كلّ عرض، فكان محتوى الرأس ١٠٩٦ على ١٢٨٠ وعلى ١٤٤٠ معًا، والقائمةُ بمقاسها ٢١
   تفيض فيهما. والحزمةُ تمدّ الرأسَ بهامش ٦٤ إلى أقصى ١٣١٢، ومقاسُ القائمة يصغر حيث يضيق (`tokens.css`). */
@media (min-width: 1200px) {
  .site-header-inner.container {
    max-width: calc(var(--header-max-wide) + 2 * var(--header-pad-wide));
    padding-inline: var(--header-pad-wide);
  }
}

/* ── مقاساتُ الخطوط — «حِبر» ──
   كلُّ رقمٍ رمزٌ في `tokens.css` من جدول مقاسات الحزمة (الحاسوب والجوّال وما
   بينهما خطّيّ). وموضعُها هنا لا في `marketing.css`: الجدولُ للصفحة الأولى، وأصنافُها
   مشتركةٌ مع الصفحات التعريفيّة التي لم يبلغها التصميمُ بعد. */
.site-nav a { font-size: var(--fs-nav); }
.site-header-cta .btn { font-size: var(--fs-btn); }
#screen-marketing .btn { font-size: var(--fs-btn); }
#screen-marketing .btn-lg { font-size: var(--fs-btn-lg); }
#screen-marketing .btn-sm { font-size: var(--fs-btn-sm); }
/* كلُّ أزرار الصفحة الأولى بزاوية الحزمة (`.btn` ١٠ في `pages/home.html`، ولا صنفَ فيها يغيّرها) لا بالحبّة
   ٩٩٩ من `marketing.css` — `landing-all-buttons-radius-package`: الرأسُ وبطاقاتُ الأقسام والشريطُ الختاميّ
   وشاشاتُ التحقّق والاستعادة ونافذةُ الدخول و«أقسامي» وبانرُ الارتباط. وهذه الورقةُ للصفحة الأولى وحدها،
   فلا تمسّ أزرارَ الصفحات التي تشترك في `marketing.css`.
   📛 كان «زرّا الافتتاح» وحدهما (`#screen-marketing .mk-hero .btn`) — `designed-pages-diffs-to-package`.
   🔎 git show 8624eab:client/landing/landing.css | sed -n '42,44p' */
.btn { border-radius: var(--radius-sm); }
.mk-hero h1 { font-size: var(--fs-hero); line-height: 1.28; grid-column: 1 / -1; text-wrap: balance; }
/* على الجوّال العنوانُ أوّلًا ثمّ الفقرةُ ثمّ الرسم، كصفّ الحزمة المطويّ (`.m .hero-row`) */
@media (max-width: 860px) {
  .mk-hero-art { order: 0; }
}
/* ── رسمُ الافتتاح — منقولٌ من الحزمة (`pages/home.html` · `.hero-art` وأصنافُ رسمه) ──
   الألوانُ أدوارٌ في `tokens.css`: القِرمزُ `--primary-fill` والحبرُ `--heading` والزعفرانُ `--saffron`
   والنصُّ على القرمز `--on-primary`، وهالةُ الخلفيّة `--hero-wash`، وخطوطُ الرسوم الصغيرة `--hero-line`
   (حبرٌ في العادي وزعفرانٌ في الداكن، كـ`.t-dark .s-ink` في الحزمة). والحركاتُ بمددها ومنحنياتها،
   وتسكن كلُّها مع «تقليل الحركة» فيظهر الرسمُ كاملًا. */
.mk-hero-art svg { overflow: visible; }
.mk-hero-art .f-ver  { fill: var(--primary-fill); }
.mk-hero-art .f-head { fill: var(--heading); }
.mk-hero-art .f-saf  { fill: var(--saffron); }
.mk-hero-art .f-on   { fill: var(--on-primary); }
.mk-hero-art .s-ink  { fill: none; stroke: var(--hero-line); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mk-hero-art .wash   { fill: var(--hero-wash); }
.mk-hero-art .hw0    { stop-color: var(--saffron); stop-opacity: .16; }
.mk-hero-art .hw1    { stop-color: var(--primary-fill); stop-opacity: .07; }
.mk-hero-art .hw2    { stop-color: var(--primary-fill); stop-opacity: 0; }
.mk-hero-art .flour  { fill: none; stroke: var(--heading); stroke-width: 5; stroke-linecap: round; }
.mk-hero-art .ar-in  { font-family: 'Markazi Text', serif; font-weight: 700; }
.mk-hero-art .lat    { font-family: 'Newsreader', Georgia, serif; }
.mk-hero-art .big-dot { transform-origin: 262px 232px; transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .mk-hero-art .flour { stroke-dasharray: 1500; stroke-dashoffset: 1500; animation: hero-draw 2.6s .8s cubic-bezier(.6, .1, .2, 1) forwards; }
  .mk-hero-art .big-dot { animation: hero-dot-in 1.1s .15s cubic-bezier(.2, .7, .2, 1) both; }
  .mk-hero-art .fade { animation: hero-fade-up .9s cubic-bezier(.2, .7, .2, 1) both; }
  .mk-hero-art .fade.d1 { animation-delay: 1.2s; }
  .mk-hero-art .fade.d2 { animation-delay: 1.35s; }
  .mk-hero-art .fade.d3 { animation-delay: 1.5s; }
  .mk-hero-art .float { animation: hero-float 7s ease-in-out infinite; }
  .mk-hero-art .float.f2 { animation-delay: -2.3s; }
  .mk-hero-art .float.f3 { animation-delay: -4.6s; }
}
@keyframes hero-draw { to { stroke-dashoffset: 0; } }
@keyframes hero-dot-in { from { transform: scale(.7) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hero-fade-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.mk-hero-lede { font-size: var(--fs-lead); line-height: 1.75; }
.mk-hero-pricing { font-size: var(--fs-note); }
#screen-marketing .mk-kicker { font-size: var(--fs-kicker); }
/* رأسُ القسم يتّسع لعنوانه بمقاسه الجديد: ٦٤٠ بكسل كانت تقسم عنوانًا بـ٨٤ بكسل
   أسطرًا من كلمتين، وعرضُ العنوان في الحزمة ما بعد عمود العنوان الصغير (٩٢٠ من ١٢٠٠) */
#screen-marketing .mk-section-head { max-width: 920px; }
#screen-marketing .mk-section-head h2 { font-size: var(--fs-section); line-height: 1.25; text-wrap: balance; }
#screen-marketing .mk-section-sub { font-size: var(--fs-sub); line-height: 1.6; }
.mk-station-title { font-size: var(--fs-dept-title); line-height: 1.3; }
.mk-station-tag,
.mk-station .mk-points li { font-size: var(--fs-dept-text); line-height: 1.7; }
.mk-step h3 { font-size: var(--fs-step-title); }
.mk-step p { font-size: var(--fs-step-text); line-height: 1.7; }
/* أربعُ بطاقاتٍ في الصفّ واثنتان في الجوّال (`.stats` و`.m .stats` في الحزمة) —
   أرقامٌ بمقاسها الجديد لا تتّسع لخمسٍ في الصفّ */
.mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) {
  .mk-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mk-stat-num { font-size: var(--fs-stat-num); line-height: 1; }
.mk-stat-label { font-size: var(--fs-stat-label); }
.mk-stat-sub { font-size: var(--fs-stat-sub); line-height: 1.6; }
.mk-stats-note { font-size: var(--fs-foot-note); }
/* ── نقاطُ بطاقات الأقسام بلا بعثرة (`landing-bidi-points-and-faq-single-icon`) ──
   كان `li` صندوقًا مرنًا (`marketing.css`)، فيصير كلُّ مقطعٍ لاتينيٍّ وكلُّ نصٍّ بينه عنصرًا مرنًا مستقلًّا
   يلتفّ وحده — فتتبعثر الكلماتُ حول `IELTS` و`XLOOKUP` وأخواتهما. فالسطرُ نصٌّ جارٍ واحد بترتيبه العربيّ،
   والنقطةُ في هامشه لا عنصرٌ بجانبه. */
#screen-marketing .mk-points li {
  display: block;
  position: relative;
  padding-inline-start: calc(8px + var(--space-2));
}
#screen-marketing .mk-points li::before {
  position: absolute;
  inset-inline-start: 0;
  top: calc(.85em - 4px);
  margin-top: 0;
}
/* ── الأسئلةُ الشائعة: علامةٌ واحدة، معيّنُ الحزمة (`landing-bidi-points-and-faq-single-icon` ·
   `designed-pages-diffs-to-package`) ──
   كان في كلّ سؤالٍ علامتان: «+» من `.mk-faq summary::after` والسهمُ من `.mk-faq-item > summary::before`
   (`marketing.css`)، فبقي السهمُ وحده. وصارت العلامةُ الواحدة معيّنَ الحزمة (`pages/home.html` ·
   `.q .qi`): مربّعٌ ٢٢ مدوَّرٌ ٤٥ درجةً في آخر السؤال، بالحبر الشفيف مغلقًا (وبالزعفران في الداكن ·
   `--faq-mark`)، يصير قِرمزًا ويدور إلى ١٣٥ حين يُفتح السؤال أو يُمرّ عليه. وزاويةُ الخانة ١٨ (`.q` ·
   `--radius-panel`) بدل ١٦ من `.mk-faq details`، والجوابُ يبدأ حيث يبدأ السؤال بعد أن زال السهمُ من أوّله.
   📛 كان: «وورقةُ المكوّنات لا ترسم علامةً للسؤال القابل للفتح، فيبقى السهم.»
   🔎 git show a149c2a:client/landing/landing.css | sed -n '119,122p' */
#screen-marketing .mk-faq-item { border-radius: var(--radius-panel); }
#screen-marketing .mk-faq-item > summary::before { content: none; }
#screen-marketing .mk-faq-item > summary::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-inline-start: auto;
  font-size: 0;
  background: var(--faq-mark);
  transform: rotate(45deg);
  transition: transform .45s ease, background-color .3s;
}
#screen-marketing .mk-faq-item[open] > summary::after,
#screen-marketing .mk-faq-item > summary:hover::after { background: var(--primary-fill); transform: rotate(135deg); }
@media (prefers-reduced-motion: reduce) {
  #screen-marketing .mk-faq-item > summary::after { transition: none; }
}
.mk-faq-item > summary { font-size: var(--fs-faq-q); }
.mk-faq-item > p { font-size: var(--fs-faq-a); line-height: 1.7; }
#screen-marketing .mk-panel h2 { font-size: var(--fs-closing); line-height: 1.25; }

/* ── «محتوى يُبنى للتطبيق» و«أربعة أوجه لهدف واحد» بمكوّنات ورقة المكوّنات
   (`landing-two-sections-kept-hibr-styled` · `identity/components.css` في الحزمة) ──
   البطاقةُ `.card`: خلفيّةُ البطاقة بلا إطار، زاويةٌ ٢٤ وحشوةٌ ٣٢×٣٤ (والصغيرةُ ٢٢×٢٤ بزاوية ٢٠
   على الجوّال)، ولمعةٌ في الداكن وظلّ؛ وعنوانُها `.h4`؛ وأيقونتُها `.ibtn` دائرةٌ ٤٦ بخلفيّة الحبر
   الشفيف والرسمُ ٢٢ بخطّ ١٫٨؛ وبين البطاقات ٢٢. والنصُّ بحرفه لم يُمسّ. */
#screen-marketing .mk-features,
#screen-marketing .mk-audience { gap: 22px; }
#screen-marketing .mk-feature,
#screen-marketing .mk-slice {
  background: var(--surface);
  border: 0;
  border-radius: 24px;
  padding: 32px 34px;
  box-shadow: var(--card-hi), var(--shadow);
}
#screen-marketing .mk-feature-icon,
#screen-marketing .mk-slice-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--heading);
}
/* أيقوناتُ «حِبر» بمقاس جدول الحزمة (٢٤) من `icons.css` (`icons-hibr-reading-b`).
   📛 كانت الرسومُ القديمة تُصغَّر هنا إلى ٢٢ — 🔎 `git show 2c1453b:client/landing/landing.css | sed -n '180,181p'` */
#screen-marketing .mk-feature h3,
#screen-marketing .mk-slice h3 { font-size: var(--fs-card-h4); line-height: 1.35; color: var(--heading); }
#screen-marketing .mk-feature p,
#screen-marketing .mk-slice p { font-size: var(--fs-dept-text); line-height: 1.7; color: var(--text-muted); }
@media (max-width: 700px) {
  #screen-marketing .mk-feature,
  #screen-marketing .mk-slice { padding: 22px 24px; border-radius: 20px; }
}

/* ── الشريطُ الختاميّ بتركيب الحزمة (`landing-closing-strip-package-layout-texts-pending` · `.close`) ──
   العنوانُ والزرُّ، وحلقةُ القلم ونقاطُها الثلاث بجانبهما (عمودُ الرسم ٤٦٠ وبينهما ٦٠، وفوقهما على الجوّال
   بعرض ٣٠٠). والألوانُ أدوار: الحلقةُ بلون النصّ على الكحليّ، والنقاطُ بالقِرمز والزعفران ولون النصّ؛
   وعند المرور يُرسم خطٌّ قرمزيٌّ على الحلقة وتدور النقاط، ويسكن ذلك مع «تقليل الحركة». */
#screen-marketing .mk-closing .mk-panel-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 60px; }
#screen-marketing .mk-closing h2 { margin: 0 0 40px; }
.mk-closing-art { width: 100%; max-width: 460px; justify-self: center; }
.mk-closing-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.mk-closing-art .pen    { fill: none; stroke: var(--panel-fg); stroke-width: 4.5; stroke-linecap: round; opacity: .9; }
.mk-closing-art .pen2   { fill: none; stroke: var(--primary-fill); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1100; stroke-dashoffset: 1100; }
.mk-closing-art .pd     { transform-box: fill-box; transform-origin: center; }
.mk-closing-art .f-ver  { fill: var(--primary-fill); }
.mk-closing-art .f-saf  { fill: var(--saffron); }
.mk-closing-art .f-band { fill: var(--panel-fg); }
@media (prefers-reduced-motion: no-preference) {
  .mk-closing-art .pd { transition: transform .8s ease; }
  .mk-closing:hover .mk-closing-art .pen2 { animation: hero-draw 2s ease forwards; }
  .mk-closing:hover .mk-closing-art .pd { transform: rotate(90deg); }
}
@media (max-width: 820px) {
  #screen-marketing .mk-closing .mk-panel-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .mk-closing-art { order: -1; max-width: 300px; }
}

/* ── نظام تبديل الشاشات — نفس نمط بقية المنصة ── */

.screen { display: none; }
.screen.is-active { display: block; }

/* ── شاشة التحميل ── */

.loading-wrap {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-4);
}

.spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid var(--border);
  border-inline-start-color: var(--primary);
}
@media (prefers-reduced-motion: no-preference) {
  .spinner { animation: spin .8s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-text { color: var(--text-muted); }

/* ── شاشة «أقسامي» ── */

.dashboard { padding-block: var(--space-6) var(--space-7); }

.welcome { margin-bottom: var(--space-6); }
.welcome-title { font-size: clamp(24px, 4vw, 32px); font-weight: 700; }
.welcome-sub { color: var(--text-muted); margin-top: var(--space-1); }

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

.module-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
}

/* بطاقة «قريبًا»: ثلاث إشارات معًا (شارة + تباين مخفوض + حدّ متقطّع)
   لأن اللون وحده لا يصل — انظر التعليق في landing.js */
.module-card.is-coming-soon {
  border-style: dashed;
  background: color-mix(in srgb, var(--surface) 60%, var(--bg));
}
.module-card.is-coming-soon .module-name { opacity: .75; }

.module-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.module-icon { display: inline-flex; line-height: 1; color: var(--heading); }
.module-name { font-size: 17.5px; font-weight: 700; margin: 0; }
.module-desc { color: var(--text-muted); font-size: 18px; margin: 0; flex: 1; }
.module-progress { font-size: 15px; color: var(--text-light); margin: 0; }
.module-footer { display: flex; align-items: center; gap: var(--space-2); }

/* ── نافذة الدخول / التسجيل ── */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--ink-surface) 55%, transparent);
  backdrop-filter: blur(3px);
  display: grid;
  justify-items: center;
  padding: var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* ⚠️ **أعلى النافذة في مدى التمرير دائمًا** (رآه المالك على هاتفه): كان الغطاءُ `place-items: center`
   والبطاقةُ بسقف `100vh` وتمريرٍ في جوفها. و`100vh` على الهاتف ارتفاعُ النافذة بلا شريط المتصفّح ولا
   لوحة المفاتيح، فالبطاقةُ أطولُ من الغطاء، والتمركزُ يدفع فائضَها أعلى الغطاء كما يدفعه أسفله — وما
   فوق حدّ الغطاء لا يبلغه تمرير، وفيه التبويبان. فالتمريرُ واحدٌ على الغطاء، والبطاقةُ بطولها وهامشٍ
   تلقائيّ يتوسّطها حين تتّسع لها الشاشة ويصير صفرًا حين تطول فتبدأ من أعلاه.
   📛 كان `place-items: center` وفي البطاقة `max-height: calc(100vh - 32px); overflow-y: auto`.
   🔎 git show ced1b8e:client/landing/landing.css | sed -n '291,322p' */
/* ⚠️ رقعةٌ فرديّة ثالثة حُذفت (`م-٣٤`): كانت
   `.modal-overlay[hidden] { display: none; }` تُصلح هذا العنصر
   وحده. وتغطّيها الآن القاعدةُ العامّة في `chrome.css` — وهي
   تصل هذه الصفحة، بخلاف `base.css`. */

.card {
  /* النافذة عنصر مرتفع — أعلى طبقات الأسطح الثلاث */
  background: var(--surface-raised, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: var(--space-6);
  margin-block: auto;
}

.modal-close {
  position: absolute;
  top: var(--space-4);
  inset-inline-start: var(--space-4);
  display: inline-flex;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  font-size: 17px;
  line-height: 1;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}
.modal-close:hover { color: var(--text); background: var(--bg); }

/* تبويبا الدخول/التسجيل */
.tabs {
  display: flex;
  gap: var(--space-1);
  background: var(--bg);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: var(--space-5);
}
.tab {
  flex: 1;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 999px;
  padding: 8px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.tab.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

#auth-form { display: grid; gap: var(--space-4); }

.consent-check {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  cursor: pointer;
}
.consent-check + .consent-check { margin-top: var(--space-3); }
.consent-check input {
  flex: none;
  width: 17px; height: 17px;
  margin-top: 5px;
  accent-color: var(--primary);
}

/* ══════════════════════════════════════════════════════════════
   نافذةُ الدخول والتسجيل بثوب «حِبر» (`pages/auth.html` · §١٠ و§١١.١ من دليل الحزمة)

   الشكلُ وحده، ونصوصُ النافذة ووظائفُها وترتيبُ حقولها كما هي (`design-uses-platform-texts`).
   والحزمةُ ترسمها صفحةً بعمودين ولوحةٍ كحليّة، وهي هنا نافذةٌ فوق الصفحة الأولى — فتُركت
   اللوحةُ الكحليّة، وأُخذت البطاقةُ ومكوّناتُها: التبويبان بعرض الحاوية على الحبر الشفيف ·
   الحقلُ على `--field-bg` بلا إطار، وحلقةُ تركيزه بلون `--focus` · التنبيهُ بشريطٍ يمينيّ ·
   والزرُّ الكبير بعرض الحاوية. وقواعدُ الحقل والتنبيه العامّة في `marketing.css`، فتُحصر
   هنا في البطاقة ولا تمسّ حقولَ الصفحات الأخرى.
   ══════════════════════════════════════════════════════════════ */
.auth-card {
  max-width: 512px;
  border: 0;
  border-radius: 24px;
  padding: 32px 34px;
  box-shadow: var(--card-hi), var(--shadow-lg);
}
.auth-card .tabs {
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--tint);
}
.auth-card .tab {
  font-size: 22px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 9px;
  color: var(--text-muted);
}
.auth-card .tab:hover { color: var(--heading); }
.auth-card .tab.is-active {
  background: var(--surface);
  color: var(--heading);
  box-shadow: var(--shadow-sm);
}
.auth-card #auth-form { gap: var(--space-5); }
.auth-card .field { gap: var(--space-2); }
.auth-card .label {
  font-size: 20px;
  font-weight: 600;
  color: var(--heading);
}
.auth-card .input {
  min-height: 56px;
  padding: 0 18px;
  font-size: 22px;
  color: var(--heading);
  background: var(--field-bg);
  border: 0;
  border-radius: 12px;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.auth-card .input.en { font-size: 20px; }
.auth-card .input:hover { background: var(--field-bg-hover); }
.auth-card .input:focus {
  outline: 0;
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--focus);
}
.auth-card .hint { font-size: 18px; color: var(--text-muted); }
/* «نسيت كلمة المرور؟» رابطٌ نصّيّ (`.lnk`): حبرُ العنوان وخطٌّ زعفرانيّ تحته */
.auth-card #auth-forgot-link {
  font-size: 20px;
  font-weight: 600;
  color: var(--heading);
  text-decoration: underline;
  text-decoration-color: var(--saffron);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
/* التنبيهُ العامّ فوق الزرّ (`.alert.a-err`): خلفيّةٌ شفيفة وشريطٌ يمينيّ بقِرمز النصّ */
.auth-card .alert-error {
  padding: 18px 22px;
  font-size: 20px;
  color: var(--text);
  background: var(--alert-err-bg);
  border-radius: 16px;
  box-shadow: inset -4px 0 0 var(--primary);
}
.auth-card .btn { border-radius: var(--radius-sm); }
.auth-card .btn-primary.btn-block {
  font-size: 27px;
  font-weight: 700;
  padding: 15px 34px 18px;
}
.auth-card .consent-check { font-size: 17px; }

@media (max-width: 480px) {
  .auth-card { padding: 22px 18px; border-radius: 20px; }
  .auth-card .btn-primary.btn-block { font-size: var(--fs-btn-lg); }
}