/* إضافات خاصة بنسخة Blazor فقط. نظام التصميم كاملًا في site.css (منسوخ من النموذج كما هو، لا يُعدَّل). */

/* «ما نشاطك؟»: كل الأنشطة في الصفحة، والظاهر واحد فقط (site.css يعطي .pane display:flex فيتجاوز hidden) */
#hpOut > .pane[hidden] { display: none }

/* رأس صفحات الأدوات: .row في site.css (قائمة الخدمات) يضيف خلفية بيضاء وإطارًا وحشوًا،
   و .thead .row يحدد التخطيط فقط، فيظهر العنوان الأبيض داخل صندوق أبيض (خلل موروث من النموذج) */
.thead .row { background: none; border: 0; border-radius: 0; padding: 0 }

/* ================= اللغات (docs/superpowers/specs/2026-10-25-multilingual-design.md) ================= */
/* مبدّل اللغة 🌐: top = الشريط العلوي (كمبيوتر)، bar = هيدر الجوال، menu = أعلى القائمة الجانبية */
.lang { position: relative }
.lang > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; user-select: none }
.lang > summary::-webkit-details-marker { display: none }
.lang > summary svg { width: 17px; height: 17px }
.lang-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; min-width: 150px; background: #fff; border-radius: 14px;
    box-shadow: 0 18px 40px -16px rgba(4,37,45,.45); padding: 6px; display: flex; flex-direction: column }
.lang-menu a { color: var(--text) !important; padding: 8px 12px; border-radius: 10px; font: 600 14.5px var(--body); display: flex; align-items: center; gap: 10px }
/* علم الدولة أمام كل لغة (wwwroot/img/flags) */
.lang .flag { width: 20px; height: 15px; flex-shrink: 0; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(4,37,45,.12) }
.lang-menu a:hover { background: var(--bg) }
.lang-menu a.on { background: var(--cyan-l); color: var(--teal) !important }
.lang-top > summary { color: #A9C4CA }
.lang-top > summary:hover { color: #fff }
.lang-top .lang-menu { inset-inline-end: auto; inset-inline-start: 0 }
.lang-bar > summary { min-height: 40px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 999px; font: 600 13.5px var(--body); color: var(--ink) }
/* هيدر الجوال ضيق: العلم وحده (اسم اللغة في القائمة، وaria-label «تغيير اللغة»)، فلا ينكسر زر «اطلب عرض سعر» إلى سطرين */
.lang-bar > summary svg, .lang-bar > summary span { display: none }
.lang-bar > summary { padding: 0 9px }
.lang-bar > summary .flag { width: 22px; height: 16px }
/* زر «اطلب عرض سعر» في هيدر الجوال: ترجمته أطول من العربية (Request a quote، قیمت کی پیشکش طلب کریں) فكان ينكسر سطرين.
   سطر واحد بحشوة وخط أصغر قليلًا للغات الأخرى فقط؛ العربية كما في النموذج */
@media (max-width: 480px) {
    :root:not([lang="ar"]) .hdr .act .btn { white-space: nowrap; padding-inline: 14px; font-size: 13.5px }
    /* الأردية: «قیمت کی پیشکش طلب کریں» بالنستعليق أعرض بـ4px من مكانه على 390px فيظهر تمرير أفقي */
    :root[lang="ur"] .hdr .act .btn { padding-inline: 12px; font-size: 12.5px }
}
@media (min-width: 1024px) { .lang-bar { display: none } }
.lang-menu > a[lang="ur"] { font-family: "Noto Nastaliq Urdu", var(--body) }
.lang-menu > a[lang="hi"] { font-family: "Noto Sans Devanagari", var(--body) }
.menu .lang { margin-bottom: 10px }
.menu .lang > summary { min-height: 40px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 999px; font: 600 14px var(--body); color: var(--ink) }
.menu .lang-menu { position: static; box-shadow: none; border: 1.5px solid var(--line); margin-top: 8px }

/* شريط اقتراح اللغة (site.js) حسب لغة المتصفح */
.lang-hint { background: var(--cyan-l); color: var(--ink); font: 500 14px var(--body) }
.lang-hint .wrap { display: flex; gap: 12px; align-items: center; justify-content: center; padding-block: 8px; flex-wrap: wrap }
.lang-hint a { font-weight: 700; color: var(--teal); text-decoration: underline }
.lang-hint button { background: none; border: 0; font-size: 18px; line-height: 1; cursor: pointer; color: var(--text-2) }

/* اتجاه من اليسار لليمين (الإنجليزية والهندية): قواعد site.css الفيزيائية (left/right) المكتوبة للعربية */
[dir="ltr"] .mega { transform: translateX(-50%) }
/* القوائم المنسدلة لا تخرج عن الشاشة (مراجعة التصميم 2026-10-25):
   - من 1440 فأكثر: القائمة الأولى (نظام الشاشة الكاملة) في طرف الشريط تبدأ من حافة العنصر بدل التوسيط عليه.
   - أقل من 1440 (ومنها 1366 الأكثر شيوعًا): القائمة (820px) أعرض من المسافة حول العنصر، فتتوسط الهيدر كله
     (الاسم العربي كان يُخرج الأولى 32px على 1366، والثانية تخرج على 1024 وفي الإنجليزية على 1366 حتى قبله — موروث من النموذج).
     جسر ::before أطول ليغطي المسافة بين العنصر والقائمة فلا تُغلق مع حركة الماوس */
@media (min-width: 1440px) {
    .hdr nav .ni:first-child .mega, [dir="ltr"] .hdr nav .ni:first-child .mega { inset-inline-start: 0; transform: none }
    /* والأخيرة («تعرّف علينا»، 1100px منذ 2026-10-29) تنتهي عند حافة الهيدر نفسه في جهتها: موسّطةً على عنصرها كانت تخرج عن الشاشة
       (فيديو المدير)، ومن حافة العنصر وحدها تخرج 9px في الإنجليزية على 1440 لأن الأزرار بعدها. مثل ما تحت 1440: العنصر static والجسر أطول */
    .hdr .wrap { position: relative }
    .hdr nav .ni:last-child { position: static }
    .hdr nav .ni:last-child .mega, [dir="ltr"] .hdr nav .ni:last-child .mega { inset-inline-start: auto; inset-inline-end: 0; transform: none }
    .hdr nav .ni:last-child .mega::before { top: -36px; height: 36px }
}
@media (max-width: 1439px) {
    .hdr .wrap { position: relative }
    .hdr nav .ni { position: static }
    .hdr nav .ni .mega { inset-inline-start: 50%; transform: translateX(50%) }
    [dir="ltr"] .hdr nav .ni .mega { transform: translateX(-50%) }
    .hdr nav .ni .mega::before { top: -36px; height: 36px }
}
[dir="ltr"] .fchip .nm, [dir="ltr"] .coa .code { text-align: left }
[dir="ltr"] .mq-t { animation-name: mq-ltr }
@keyframes mq-ltr { to { transform: translateX(-50%) } }

/* ================= لوحة الإدارة /admin (نفس ألوان وخطوط site.css) ================= */
.adm-hdr { background: var(--ink); color: #fff }
.adm-hdr .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-block: 10px }
.adm-hdr img { height: 34px; width: auto }
.adm-hdr nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1 }
.adm-hdr nav a { color: #B6CED4; padding: 7px 12px; border-radius: 999px; font: 500 14.5px var(--body) }
.adm-hdr nav a:hover, .adm-hdr nav a.active { color: #fff; background: rgba(255,255,255,.1) }
.adm-hdr .who { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #A9C4CA }
.adm-hdr .who button { background: none; border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 999px; padding: 5px 12px; cursor: pointer; font: inherit }
.adm { padding: 22px 0 60px; min-height: 70vh }
.adm h1 { font-size: clamp(24px, 4vw, 32px); margin-bottom: 14px }
.adm-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-bottom: 14px }
.adm-bar input, .adm-bar select { min-height: 40px; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font: inherit; color: var(--text) }
.adm-bar label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text-2) }
/* أزرار صف الطلب (التفاصيل، سحب الموافقة، الحذف) وزر الحذف النهائي */
.lead-acts { display: flex; gap: 6px; flex-wrap: wrap }
.del-btn { background: var(--bad); color: #fff; border-color: var(--bad) }
.del-btn:hover { filter: brightness(.92) }
.adm table.dt td, .adm table.dt th { font-size: 14px; vertical-align: top }
.adm table.dt td.wrap-cell { white-space: normal; min-width: 220px; max-width: 420px; overflow-wrap: anywhere }
/* .pill في لوحة الإدارة، وفي صفحة الشريك ودليل المحاسبين (برنامج الشركاء) */
:is(.adm, .pp-portal, .acc-card) .pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--bg); color: var(--text-2) }
:is(.adm, .pp-portal, .acc-card) .pill.ok { background: var(--ok-l); color: var(--ok) }
:is(.adm, .pp-portal, .acc-card) .pill.w { background: var(--copper-l); color: var(--copper) }
.adm .pill.bad { background: var(--bad-l); color: var(--bad) }
.adm .pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 14px }
.adm-auth { min-height: 100vh; display: grid; place-items: center; background: var(--ink); padding: 24px 16px }
.adm-auth .panel { width: min(420px, 100%) }
.adm-auth .qr svg { width: 200px; height: 200px; display: block; margin: 10px auto }
.adm-auth code { direction: ltr; display: block; text-align: center; font-size: 15px; letter-spacing: 2px; background: var(--bg); border-radius: 10px; padding: 8px; overflow-wrap: anywhere }
.adm .secret { direction: ltr; font: 600 16px monospace; background: var(--cyan-l); padding: 6px 12px; border-radius: 10px; user-select: all }

/* خط الموقع: Readex Pro للنصوص والعناوين والمنيو (مراجعة التصميم 2026-10-25، اختيار المدير من مقارنة سبعة خطوط في review/fonts-compare.html،
   للمنيو أولًا ثم لبقية الموقع). الأرقام 0–9 من FS Digits (IBM Plex، متساوية العرض) حتى تبقى أعمدة المبالغ مستقيمة كما كانت.
   يحل محل Alexandria و IBM Plex في --display و --body من site.css. الأردية تبقى على خطها النستعليق (fonts-ur.css)،
   والهندية يكمّلها Noto Sans Devanagari (fonts-hi.css؛ Readex بلا حروف ديفاناغرية) */
:root {
  --body: "FS Digits", "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --display: var(--body);
  --menu: var(--body)
}
:root[lang="ur"] { --menu: var(--body) }
.topbar, .hdr nav .ni > a, .hdr nav .ni > button, .hdr nav > a, .hdr .act .btn, .hdr .who, .mega b, .mega small, .mega .mf,
.menu h5, .menu .mg a, .tabbar a, .tabbar button, .lang > summary, .lang-menu a { font-family: var(--menu) }

/* تباين الألوان (قرار الإدارة 2026-10-25): أقل تغميق يحقق 4.5:1 للنص (3:1 لنجوم التقييم) على خلفياته،
   بنفس الصبغة والتشبع. الأزرار والخلفيات والرسوم بألوان النموذج كما هي؛ site.css لم يُلمس. */
:root { --muted: #627379 }                                   /* كان #6A7D83: 4.31 ← 4.93 على الأبيض، 4.53 على --bg */
.tag.o, .st.live, .up-c { color: #187D54 }                   /* نص أخضر على --ok-l: 3.01 ← 4.54 */
.t1 { --tc: #0C798F } .t3 { --tc: #A45B27 } .t4 { --tc: #2E7B59 } .t5 { --tc: #89691D } /* ألوان أنشطة العملاء كنص */
.je .dt td.cr { color: #A36031 }                             /* مبالغ الدائن في القيود: 3.62 ← 4.91 */
.stars, .rate input:checked ~ label, .rate label:hover, .rate label:hover ~ label { color: #B8851A } /* 2.19 ← 3.2 */

/* صفحة الأداة قبل أن يرسمها host.js: مكان «جارٍ تجهيز الأداة» بارتفاع الشاشة حتى يبقى الفوتر خارجها،
   فلا تتحرك الصفحة حين تظهر الأداة (CLS كان 0.31 لأول زيارة على الجوال). الأداة المرسومة تستبدل [data-tool] كله */
[data-tool] > .tbody { min-height: 100vh }

/* سهولة الاستخدام (مراجعة 2026-10-25، الدفعة 2) */
/* «تخطَّ إلى المحتوى»: أول عنصر بلوحة المفاتيح، مخفي حتى يصله التركيز */
.skip { position: absolute; inset-inline-start: 12px; top: -80px; z-index: 100; background: var(--cyan); color: var(--ink); padding: 10px 18px; border-radius: 10px; font: 700 15px var(--display); text-decoration: none; box-shadow: 0 6px 20px rgba(4,37,45,.25) }
.skip:focus { top: 12px }
/* أهداف لمس 24px على الأقل لروابط الفوتر السفلي ومسار الصفحة: الحشوة تكبّر مساحة الضغط
   والهامش السالب بنفس القيمة يبقي الشكل والمسافات كما في النموذج تمامًا */
footer .bot a, .thead .crumbs a { display: inline-block; padding: 2px 8px; margin: -2px -8px }

/* أعمدة الفوتر (2026-10-27): كانت auto-fit بأعمدة 170px وعمود الشعار min-width:220px فيتداخل نصه مع العمود التالي.
   الجوال: الشعار سطر كامل ثم عمودان؛ من 640: ثلاثة؛ من 1200: الشعار أعرض بجانب الأعمدة الخمسة */
footer .cols.fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px }
footer .fbrand { grid-column: 1 / -1; max-width: 46ch }
footer .fcols > div { min-width: 0; overflow-wrap: anywhere }
@media (min-width: 640px) { footer .cols.fcols { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (min-width: 1200px) { /* ستة أعمدة منذ «لأصحاب المنشآت» (2026-10-27) */
    footer .cols.fcols { grid-template-columns: minmax(0, 1.6fr) repeat(6, minmax(0, 1fr)); gap: 26px 22px }
    footer .fbrand { grid-column: auto; max-width: none; padding-inline-end: 12px }
}

/* الطباعة من الأدوات (القوائم المالية والتقارير): من <style> في shell.html بالنموذج */
@media print {
    /* الطباعة و«حفظ كـ PDF» بألوان الموقع والعلامة المائية (طلب المدير 2026-10-28): المتصفح يُسقط الخلفيات والألوان افتراضيًا */
    html { -webkit-print-color-adjust: exact; print-color-adjust: exact }
    .hdr, .tabbar, .actionbar, footer, .tabs, .thead .privacy, .sheet-bg, .toast, .lang-hint { display: none !important }
    body { background: #fff; padding: 0 }
    .thead { background: #fff; color: #000 }
    .thead h1, .thead p { color: #000 }
    .panel { border: 0; padding: 0 }
}

/* الهيدر من 1024: بعد اسم «نظام الشاشة الكاملة» وخط Readex الأعرض لم يعد يتسع، فكان الشعار ينكمش إلى صفر
   والهيدر يخرج عن الشاشة (على 1024: العربية 6px، الأردية 24px، الإنجليزية 97px؛ والإنجليزية 14px حتى على 1366).
   الشعار لا ينكمش؛ من 1320 (عرض الصفحة ثابت 1240) مسافة العناصر 10px بدل 13؛ وتحت 1320 تُضغط أكثر
   و«حسابي» أيقونة وحدها (الاسم باقٍ لقارئ الشاشة). فُحصت اللغات الأربع على 1024 و 1280 و 1319 و 1366 */
.hdr .logo { flex-shrink: 0 }
@media (width >= 1320px) { .hdr nav .ni > a, .hdr nav .ni > button { padding: 9px 6px } } /* كانت 10px؛ 6px منذ شارة «مجانًا» (2026-10-27) */
/* الإنجليزية والهندية والأردية: نصوص القائمة أطول (IT solutions، Accountant tools…) فكان الهيدر يتجاوز عرضه 40–59px على 1366 وما فوقه
   (عرض الصفحة ثابت 1240 من 1320). من 1320: «حسابي» أيقونة وحدها ومسافة العناصر 7px (2026-10-27) */
@media (width >= 1320px) {
    html:is([lang=en], [lang=hi], [lang=ur]) .hdr nav .ni > a, html:is([lang=en], [lang=hi], [lang=ur]) .hdr nav .ni > button { padding: 9px 7px }
    /* «حسابي» أيقونة في العربية أيضًا منذ عنصر «لأصحاب المنشآت» (2026-10-27): كان الهيدر العربي يتجاوز 106px على 1366 */
    .hdr .act .who { width: 44px; padding: 0; justify-content: center }
    .hdr .who span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
}
@media (1024px <= width < 1320px) {
    .hdr .wrap { gap: 8px }
    .hdr .logo img { height: 40px }
    .hdr nav { gap: 0 }
    .hdr nav .ni > a, .hdr nav .ni > button { padding: 9px 6px; font-size: 13.5px; gap: 4px }
    .hdr .act { gap: 6px }
    .hdr .act .btn { padding: 0 12px }
    .hdr .act .who { width: 40px; padding: 0; justify-content: center }
    .hdr .who span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
}

/* FocusOnNavigate (Routes.razor) ينقل التركيز إلى h1 بعد كل تنقّل لقارئ الشاشة، فكان المتصفح يرسم حوله إطار التركيز السماوي.
   العنوان ليس عنصرًا يُضغط، فلا إطار له */
h1:focus { outline: none }

/* واجهة الرئيسية (مراجعة التصميم 2026-10-26، Home.razor، «الخيار ج» باختيار المدير من review/hero-options.html).
   القديم: عمودان غير متوازنين (البطاقة 793px والنص 502px في وسطها: فراغ ~145px فوق العنوان وتحته، والأزرار تحت حد 1366×768).
   المحاولة الثانية (العنوان يمينًا والفقرة بجانبه) رُفضت: جزيرتان منفصلتان بلا نقطة بداية واحدة للعين.
   الآن محور واحد: العنوان ثم الفقرة ثم الأزرار من نفس الحافة، وحلقة الشعار تملأ الجهة الأخرى عن قصد، ثم «ما نشاطك؟» بعرض الصفحة
   تُقرأ بالترتيب: الأنشطة، الوصف، الشارات في سطر، ثم المشكلة والحل جنبًا إلى جنب.
   العنوان أبيض كله بوزن 700 بلا تدرّج وبلا تباعد أحرف (يضر الحروف العربية المتصلة) */
/* بعد ملاحظة المدير على ج (فراغات وتمرير كثير): العنوان في سطر واحد بعرض الصفحة (يُخفى <br> الذي في النص)، وتحته صف واحد:
   الفقرة في جهة، والأزرار والميزتان في الجهة الأخرى، فتُستغل المساحة الفارغة بدل التكديس، والحلقة زخرفة صغيرة في الزاوية */
.hero.hero-v2 { padding: 26px 0 30px }
@media (min-width: 1024px) { .hero.hero-v2 { padding: 36px 0 40px } }
.hero-v2 h1 { font-size: clamp(28px, 3.4vw, 46px); font-weight: 700; line-height: 1.2; letter-spacing: 0; margin: 0; text-wrap: balance }
.hero-v2 h1 br { display: none }
.hero-v2 h1 em::before { content: " " } /* النص «…<br><em>…» بلا مسافة في كل اللغات: بعد إخفاء السطر الجديد تعود المسافة */
/* اللغات الأخرى: عنوانها أطول من العربي */
:root:not([lang="ar"]) .hero-v2 h1 { font-size: clamp(26px, 3vw, 40px) }
:root[lang="ur"] .hero-v2 h1 { font-size: clamp(24px, 2.6vw, 34px) }
.hero-v2 h1 em { background: none; color: inherit; -webkit-background-clip: border-box; background-clip: border-box }
.hero-v2 .hv-side { margin-top: 12px }
.hero-v2 .lead { font-size: 15px; line-height: 1.75; margin: 0; text-wrap: pretty }
@media (min-width: 560px) { .hero-v2 .lead { font-size: 16px; line-height: 1.8 } }
.hero-v2 .hv-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px }
.hero-v2 .trust { margin-top: 12px }
@media (min-width: 1024px) {
    .hero-v2 .lead { font-size: 16.5px }
    .hero-v2 .hv-side { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px }
    .hero-v2 .lead { flex-basis: 100% }
    .hero-v2 .trust { margin-top: 16px }
}
.hero-v2 .lead { max-width: none } /* site.css يحدّها بـ 56ch فتصير 3 أسطر */
/* العربية من 1280: شريط واحد بلا زوايا فارغة. يمينًا العنوان وتحته الفقرة في سطرين، ويسارًا الأزرار بمحاذاة العنوان
   والميزتان بمحاذاة الفقرة (.hv-side تذوب في شبكة .hv-top بـ display: contents). أضيق من ذلك، وفي اللغات الأخرى
   (فقرتها أطول من العربية)، الفقرة بعرض الصفحة كي تبقى سطرين، والأزرار تحتها */
@media (width >= 1280px) {
    :root[lang="ar"] .hero-v2 .hv-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 56px; align-items: center }
    :root[lang="ar"] .hero-v2 .hv-side { display: contents }
    :root[lang="ar"] .hero-v2 h1 { grid-column: 1; grid-row: 1 }
    :root[lang="ar"] .hero-v2 .lead { grid-column: 1; grid-row: 2; margin-top: 8px }
    :root[lang="ar"] .hero-v2 .hv-cta { grid-column: 2; grid-row: 1; margin: 0; flex-wrap: nowrap }
    :root[lang="ar"] .hero-v2 .trust { grid-column: 2; grid-row: 2; align-self: start; margin-top: 14px }
}
.hero-v2 .hring { width: 420px; inset-inline-start: auto; inset-inline-end: -150px; top: -190px; transform: none; opacity: .35 }
@media (max-width: 1023px) { .hero-v2 .hring { width: 300px; inset-inline-end: -160px; top: -150px; opacity: .25 } }

/* الرئيسية: مسافات الأقسام أقل (طلب المدير: تقليل التمرير). كانت 88px أعلى وأسفل كل قسم على الكمبيوتر (~1,760px فراغ في
   الصفحة)، والآن 56px؛ وعلى الجوال 40 بدل 52. بقية الصفحات بلا تغيير */
.home .sec { padding: 40px 0 }
@media (min-width: 1024px) { .home .sec { padding: 56px 0 } }
.home .sh { margin-bottom: 20px }
/* وحدات النظام في الرئيسية: الأيقونة بجانب العنوان والوصف تحته (كانت فوقهما)، بلا «التفاصيل» لأن البطاقة كلها رابط:
   البطاقة ~نصف ارتفاعها (199←~95px). صفحة /erp تبقى بشكلها */
.home .mod { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic h" "ic p"; column-gap: 12px; row-gap: 2px; align-items: start; padding: 14px 16px }
.home .mod .ic { grid-area: ic }
.home .mod h3 { grid-area: h; margin: 2px 0 0; font-size: 16.5px }
.home .mod p { grid-area: p; font-size: 14px }
.home .mod .go { display: none }
.home .mod-cta { background: var(--ink); border-color: var(--ink); align-content: center }
.home .mod-cta h3 { color: #fff } .home .mod-cta p { color: #A9C4CA }
.home .mod-cta .ic { background: rgba(27, 179, 207, .16); color: var(--cyan) }
.home .mod-cta:hover { border-color: var(--cyan) }
@media (min-width: 640px) and (max-width: 1099px) { .home .mod-cta { grid-column: span var(--span2, 2) } }
@media (min-width: 1100px) { .home .mod-cta { grid-column: span var(--span4, 4) } }
/* أدوات المحاسب في الرئيسية (طلب المدير: أصغر وأرقى). كان القسم 695px على 1366: عنوان 48px في سطرين، وبلاطات 91px،
   ودائرة رفع 420px. الآن عنوان في سطر واحد أبيض كعنوان الواجهة، وبلاطات أفقية (الأيقونة بجانب الاسم)، ودائرة 300px */
.home .tools-sec h2 { font-size: clamp(26px, 2.9vw, 38px); margin-bottom: 10px; text-wrap: balance }
.home .tools-sec h2 br { display: none }
.home .tools-sec h2 em::before { content: " " }
.home .tools-sec h2 .grad { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit }
.home .tools-sec .lead { font-size: 16px; max-width: 60ch; margin-bottom: 0 }
.home .tools-sec .trust { margin-top: 12px }
.home .tl-grid { margin-top: 18px; gap: 8px }
.home .tl-grid a { flex-direction: row; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px }
.home .tl-grid .ic { width: 34px; height: 34px; border-radius: 10px; flex: none }
.home .tl-grid .ic svg { width: 18px; height: 18px }
.home .tl-grid b { font-size: 14px }
.home .tools-sec .drop { width: min(74vw, 320px) }
.home .tools-sec .drop .halo { inset: 9% }
.home .tools-sec .drop .core { inset: 15%; padding: 8% }
.home .tools-sec .drop .core svg { width: 34px; margin-bottom: 6px }
.home .tools-sec .drop .core b { font-size: 17px; white-space: nowrap }
.home .tools-sec .drop .core small { font-size: 12px; line-height: 1.45; margin-top: 4px }
.home .tools-sec .orbit span { font-size: 11.5px; padding: 4px 10px }
.home .tools-sec .sample-row { margin-top: 14px }
@media (min-width: 1024px) { .home .tools-sec .hero-g { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px } }
@media (max-width: 560px) {
    .home .tl-grid { gap: 6px; margin-top: 14px }
    .home .tl-grid a { padding: 7px 10px; gap: 8px }
    .home .tl-grid .ic { width: 30px; height: 30px }
    .home .tl-grid b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .home .tools-sec .drop { width: min(64vw, 250px) }
    .home .tools-sec .drop .core small { display: none }
}

/* «ماذا نقدّم»: بنود أقرب وحشوة أقل */
.home .offer { padding: 22px }
.home .offer ul { margin: 6px 0 16px }
.home .offer li { padding: 6px 0; font-size: 14.5px }

/* شريط آخر الأخبار والمواعيد تحت الواجهة (NewsTicker.razor). يدور باتجاه القراءة: في RTL يتحرك لليمين فتدخل بداية كل خبر أولًا.
   .nt-track فيه نسختان، والحركة بعرض نسخة واحدة (50%) فيدور بلا قفزة. يتوقف عند المرور أو التركيز */
.nticker { background: #062F38; color: #D6E8EC; border-bottom: 1px solid rgba(255, 255, 255, .06) }
.nticker .wrap { display: flex; align-items: center; gap: 14px; height: 46px }
.nt-lbl { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px var(--menu); color: var(--ink); background: var(--cyan); padding: 5px 12px; border-radius: 999px }
.nt-lbl svg { width: 15px; height: 15px }
.nt-view { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent) }
.nt-track { display: flex; width: max-content; animation: nt-scroll var(--nt-dur, 40s) linear infinite }
.nt-set { display: flex; gap: 40px; padding-inline-end: 40px }
.nt-i { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: #D6E8EC; font-size: 14.5px; text-decoration: none }
.nt-i:hover { color: #fff }
.nt-tag { font: 600 12px var(--menu); padding: 2px 9px; border-radius: 999px; background: rgba(194, 115, 58, .24); color: #F3C9A6 }
.nt-tag.src { background: rgba(27, 179, 207, .16); color: var(--cyan-2) }
.nt-days { color: var(--cyan-2); font-size: 13.5px }
.nticker:hover .nt-track, .nticker:focus-within .nt-track { animation-play-state: paused }
@keyframes nt-scroll { from { transform: translateX(0) } to { transform: translateX(50%) } }
@keyframes nt-scroll-ltr { from { transform: translateX(0) } to { transform: translateX(-50%) } }
[dir="ltr"] .nt-track { animation-name: nt-scroll-ltr }
@media (max-width: 560px) { .nticker .wrap { height: 42px; gap: 10px } .nt-lbl { padding: 4px 10px; font-size: 12.5px } }
@media (prefers-reduced-motion: reduce) {
    .nt-track { animation: none }
    .nt-view { overflow-x: auto; mask-image: none }
    .nt-set[aria-hidden="true"] { display: none }
}

/* مربع البحث في المكتبة (LibSearchBox): كان الحقل بعرضه الافتراضي (220px) داخل مربع 640px، فيقع زر «ابحث» في الوسط
   ويُقطع النص الإرشادي. الحقل يملأ ما بين أيقونة البحث والزر، والزر في نهاية المربع */
.search { align-items: center }
.search .search-ic { flex: none; display: grid; place-items: center; width: 34px; margin-inline-start: 8px; color: var(--muted) }
.search .search-ic svg { width: 19px; height: 19px }
.thead .search .search-ic { color: #8FB0B8 }
.search input { flex: 1; min-width: 0; width: auto; padding: 0 6px; font-size: 15.5px }
.search input::-webkit-search-cancel-button { display: none }
.search .btn { flex: none; min-height: 42px; padding: 0 22px }

/* المصطلح وترجمته الإنجليزية (GlossaryItem في القاموس ونتائج البحث) كانا ملتصقين («الحولHawl»): الترجمة dir="ltr"
   فهامشها «البدائي» يقع في الطرف الخارجي. المسافة صارت على المصطلح نفسه باتجاه الصفحة */
.gt b { margin-inline-end: 8px }
.gt em { margin-inline-start: 0 }

/* البطاقات المتجاورة في .grid2 («من نحن»: رؤيتنا ورسالتنا): قاعدة site.css «.panel+.panel{margin-top:14px}» للصناديق المتتالية
   رأسيًا كانت تدفع الثانية 14px للأسفل فتختلف البداية والارتفاع (155 مقابل 141). البطاقات في الشبكة بلا هامش علوي فتتساوى،
   والشبكة نفسها تأخذ المسافة من الصناديق قبلها وبعدها */
.grid2 > .panel + .panel { margin-top: 0 }
.panel + .grid2, .grid2 + .panel { margin-top: 14px }
.panel h3 > .ic { width: 38px; height: 38px; border-radius: 11px; flex: none }
.panel h3 > .ic svg { width: 19px; height: 19px }

/* التنقل بين وحدات النظام (ErpModulePage): بطاقتان متوازنتان بعد التقارير بمسافة واضحة. السابقة في بداية السطر،
   والتالية في نهايته ونصها بمحاذاة الطرف؛ تتكدسان على الجوال */
.mod-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px }
.mod-nav a { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s }
.mod-nav a:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(4, 37, 45, .35) }
.mod-nav .mn-next { justify-content: flex-end; text-align: end }
.mod-nav small { display: block; font: 600 12.5px var(--menu); color: var(--muted); margin-bottom: 2px }
.mod-nav b { display: block; font: 600 15.5px/1.35 var(--display) }
.mod-nav .ic { flex: none; width: 42px; height: 42px; border-radius: 12px }
@media (max-width: 560px) { .mod-nav { grid-template-columns: 1fr } }

/* القط العسيري (مراجعة التصميم 2026-10-26): شريط مثلثات بألوان الهوية في أسفل الواجهة مثل حاشية جدار عسيري.
   ملف SVG صغير يتكرر أفقيًا (img/qatt-band.svg)، والحشوة السفلية تترك له مكانه */
.hero.hero-v2 { padding-bottom: 46px }
.hero-v2 .qatt { position: absolute; inset-inline: 0; bottom: 0; height: 22px; background: url(/img/qatt-band.svg) repeat-x 0 0 / auto 100%; pointer-events: none }
@media (min-width: 1024px) { .hero.hero-v2 { padding-bottom: 60px } .hero-v2 .qatt { height: 28px } }
.hero-v2 .hpick { margin-top: 24px }
.hero-v2 .hpick h3 { font-size: 20px; margin-bottom: 12px }
@media (min-width: 1024px) {
    .hero-v2 .hpick { margin-top: 26px; padding: 24px 28px }
    .hero-v2 .hp-intro { font-size: 15.5px; margin-bottom: 12px }
    .hero-v2 .ints { margin: 0 0 18px }
    .hero-v2 #hpOut .hp-cols { width: 100%; column-gap: 40px; padding-top: 14px; border-top: 1px solid var(--line-2); margin-bottom: 0 }
    /* #hpOut لا لـ .hero-v2 وحدها: site.css يعطي «#hpOut .hp-foot» margin-top:auto، وبعد إزالة الارتفاع الثابت (hpFit) صار 0 */
    .hero-v2 #hpOut .hp-foot { width: 100%; margin-top: 18px }
}
@media (min-width: 1200px) { .hero-v2 .hp-chips { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px } }

/* حركة الواجهة (طلب المدير: انطباع أول مبهر، ثم «أوضح وأقوى»). لحظة واحدة منسّقة عند التحميل (~2.5 ث) + حركة تستجيب لاختيار النشاط.
   - توهّج سماوي خلف العنوان يضيء ويتسع مرة واحدة ثم يبقى خافتًا (::before في .hv-top، موضعه مطلق فلا يأخذ خانة في الشبكة)
   - العنوان يصعد من ضبابية إلى وضوح، ثم ومضة ضوء عريضة تعبره باتجاه القراءة. الفقرة والأزرار تصعد بعده
     (opacity تبقى 1 للعنوان والفقرة حتى لا يتأخر LCP)
   - البطاقة تصعد مع تكبير خفيف، والأنشطة تقفز بالتتابع (--i من nth-child، بلا JS)
   - بعد اكتمال المشهد ومضة واحدة تعبر زر «اطلب عرض سعر» لتلفت إليه
   - عند تبديل النشاط: الجزء الذي كان hidden يُعرض فتبدأ حركته من جديد، وبنود المشكلة والحل تنزلق واحدًا بعد الآخر
   - transform و opacity و filter فقط (لا CLS)، وتتوقف كلها مع prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
    .hero-v2 .hv-top { position: relative }
    .hero-v2 .hv-top::before {
        content: ""; position: absolute; z-index: -1; pointer-events: none;
        inset-inline-start: -10%; top: -90%; width: min(960px, 100vw); height: 280%;
        background: radial-gradient(closest-side, rgba(27, 179, 207, .5), rgba(27, 179, 207, .16) 55%, transparent);
        animation: hv-glow 2.6s .05s cubic-bezier(.2, .7, .2, 1) both
    }
    .hero-v2 .lead, .hero-v2 .hv-cta, .hero-v2 .trust { animation: hv-rise 1s cubic-bezier(.16, 1, .3, 1) both }
    .hero-v2 .lead { animation-delay: .15s }
    .hero-v2 .hv-cta { animation-delay: .28s }
    .hero-v2 .trust { animation-delay: .4s }
    .hero-v2 h1 {
        /* خلفية بعرض 300%: عند 0% و 100% تظهر نافذة بيضاء فقط (0–33% ثم 67–100%)، والومضة 36–64% تعبر بينهما */
        background: linear-gradient(105deg, #fff 0 36%, #8AE6F7 44%, #1BB3CF 50%, #8AE6F7 56%, #fff 64% 100%) 0 0 / 300% 100% no-repeat;
        -webkit-background-clip: text; background-clip: text; color: transparent;
        animation: hv-rise-h 1.1s cubic-bezier(.16, 1, .3, 1) both, hv-shine 1.9s .75s cubic-bezier(.45, 0, .25, 1) both
    }
    .hero-v2 .hpick { animation: hv-card 1.1s .3s cubic-bezier(.16, 1, .3, 1) both }
    .hero-v2 .hp-chips button { animation: hv-pop .6s calc(.65s + var(--i, 0) * 60ms) cubic-bezier(.34, 1.56, .64, 1) both }
    .hero-v2 .hp-chips button:nth-child(2) { --i: 1 } .hero-v2 .hp-chips button:nth-child(3) { --i: 2 }
    .hero-v2 .hp-chips button:nth-child(4) { --i: 3 } .hero-v2 .hp-chips button:nth-child(5) { --i: 4 }
    .hero-v2 .hp-chips button:nth-child(6) { --i: 5 } .hero-v2 .hp-chips button:nth-child(7) { --i: 6 }
    .hero-v2 .hp-chips button:nth-child(8) { --i: 7 } .hero-v2 .hp-chips button:nth-child(9) { --i: 8 }
    .hero-v2 .hp-chips button:nth-child(10) { --i: 9 } .hero-v2 .hp-chips button:nth-child(11) { --i: 10 }
    .hero-v2 .hp-chips button:nth-child(12) { --i: 11 }
    .hero-v2 .hp-chips button svg { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1) }
    .hero-v2 .hp-chips button:hover svg, .hero-v2 .hp-chips button[aria-pressed=true] svg { transform: scale(1.22) }
    /* ومضة على الزر الرئيسي بعد اكتمال المشهد */
    .hero-v2 .hv-cta .b-cyan { position: relative; overflow: hidden; isolation: isolate }
    .hero-v2 .hv-cta .b-cyan::after {
        content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
        background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .75) 50%, transparent 75%);
        transform: translateX(130%); animation: hv-btn 1.1s 2.3s ease-in-out both
    }
    /* محتوى النشاط عند التبديل */
    .hero-v2 #hpOut > .pane:not([hidden]) { animation: hv-fade .45s cubic-bezier(.16, 1, .3, 1) both }
    .hero-v2 #hpOut > .pane .hp-cols li { animation: hv-item .5s cubic-bezier(.16, 1, .3, 1) both }
    .hero-v2 #hpOut > .pane .hp-cols li:nth-child(2) { animation-delay: .07s }
    .hero-v2 #hpOut > .pane .hp-cols li:nth-child(3) { animation-delay: .14s }
    .hero-v2 #hpOut > .pane .hp-cols li:nth-child(4) { animation-delay: .21s }
    .hero-v2 #hpOut > .pane .hp-cols > div + div li { animation-delay: .16s }
    .hero-v2 #hpOut > .pane .hp-cols > div + div li:nth-child(2) { animation-delay: .23s }
    .hero-v2 #hpOut > .pane .hp-cols > div + div li:nth-child(3) { animation-delay: .3s }
    .hero-v2 #hpOut > .pane .hp-cols > div + div li:nth-child(4) { animation-delay: .37s }
    /* شريط القط يُرسم من بداية السطر إلى نهايته مع صعود البطاقة */
    .hero-v2 .qatt { animation: hv-qatt 1.6s .5s cubic-bezier(.65, 0, .35, 1) both }
    /* في صفحات LTR: الومضتان والشريط من اليسار لليمين */
    [dir="ltr"] .hero-v2 h1 { animation-direction: normal, reverse }
    [dir="ltr"] .hero-v2 .hv-cta .b-cyan::after { animation-direction: reverse }
    [dir="ltr"] .hero-v2 .qatt { animation-name: hv-qatt-ltr }
}
@keyframes hv-qatt { from { clip-path: inset(0 0 0 100%) } to { clip-path: inset(0) } }
@keyframes hv-qatt-ltr { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0) } }
/* حركة كل الموقع (طلب المدير 2026-10-26: «قوية في جميع أماكن الموقع»).
   1) رأس الصفحات الداخلية (.thead): المسار ثم العنوان (من ضبابية) ثم الفقرة والأزرار، عند التحميل، بلا إخفاء (لا يتأخر LCP)
   2) عند التمرير (site.js، initFx): عناصر تحت أول شاشة تبدأ .fx (مخفية ومنخفضة) وتصير .fx-in حين تدخل الشاشة، والمجموعة
      بالتتابع عبر --fx-i؛ بعد انتهاء الحركة تُزال الفئتان فيعود العنصر لتنسيقه (hover وغيره) */
@media (prefers-reduced-motion: no-preference) {
    .thead .crumbs { animation: hv-rise .8s cubic-bezier(.16, 1, .3, 1) both }
    .thead h1 { animation: hv-rise-h 1s .06s cubic-bezier(.16, 1, .3, 1) both }
    .thead h1 + p, .thead .lead { animation: hv-rise .9s .16s cubic-bezier(.16, 1, .3, 1) both }
    .thead .wrap > div:last-child:not(.crumbs) { animation: hv-rise .9s .26s cubic-bezier(.16, 1, .3, 1) both }

    .fx { opacity: 0; transform: translateY(40px) scale(.96) }
    .fx.fx-in {
        opacity: 1; transform: none;
        transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .95s cubic-bezier(.16, 1, .3, 1), filter .8s ease;
        transition-delay: calc(var(--fx-i, 0) * 80ms)
    }
    .sh.fx { filter: blur(6px) }
    .sh.fx.fx-in { filter: none }
}

@keyframes hv-glow { 0% { opacity: 0; transform: scale(.35) } 45% { opacity: 1 } 100% { opacity: .4; transform: none } }
@keyframes hv-rise { from { transform: translateY(36px) } to { transform: none } }
@keyframes hv-rise-h { from { transform: translateY(44px) scale(.97); filter: blur(8px) } to { transform: none; filter: none } }
/* 0% → 100% تعبر الومضة من اليمين لليسار (اتجاه القراءة العربي) */
@keyframes hv-shine { from { background-position: 0 0 } to { background-position: 100% 0 } }
@keyframes hv-card { from { opacity: 0; transform: translateY(90px) scale(.96) } to { opacity: 1; transform: none } }
@keyframes hv-pop { from { opacity: 0; transform: translateY(26px) scale(.8) } to { opacity: 1; transform: none } }
@keyframes hv-btn { from { transform: translateX(130%) } to { transform: translateX(-130%) } }
@keyframes hv-fade { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes hv-item { from { opacity: 0; transform: translateX(var(--hv-dx, -24px)) } to { opacity: 1; transform: none } }
[dir="ltr"] .hero-v2 { --hv-dx: 24px }

/* من نحن: السطر الافتتاحي (مراجعة التصميم 2026-10-26) */
.panel .ab-lead { font-family: var(--display); font-size: clamp(19px, 2vw, 23px); font-weight: 700; line-height: 1.5; color: var(--ink); margin: 0 0 12px; padding-inline-start: 14px; border-inline-start: 4px solid var(--copper) }

/* دليل الأداة تحت الأداة (ToolGuideView، SEO): نفس شكل المقال، وأدوات مرتبطة أفقية */
.tguide { padding-top: 0 }
.tguide .article { max-width: none }
.tguide .article > h2:first-child { margin-top: .2em }
.tguide .article td:last-child, .tguide .article th:last-child { text-align: end; white-space: nowrap }
.tguide .tg-upd { font-size: 13px; margin: 18px 0 0 }
.tguide .tg-h { font-size: clamp(19px, 2.4vw, 22px); margin: 28px 0 12px }
.tguide .tg-tools { display: grid; gap: 10px; grid-template-columns: 1fr }
.tguide .tg-tools .tile { min-height: 0; flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px }
.tguide .tg-tools .tile:hover { border-color: var(--teal) }
.tguide .tg-tools .tile b { display: block; font-family: var(--display); color: var(--ink); font-size: 15.5px }
.tguide .tg-tools .tile small { display: block; color: var(--muted); font-size: 13px; line-height: 1.5 }
.tguide .tg-tools .ic { flex: none }
@media (width >= 760px) { .tguide .tg-tools { grid-template-columns: repeat(3, 1fr) } .tguide .tg-tools .tile { align-items: flex-start } }
.tguide .tg-tools .tile small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.tguide .tg-tools .tile::before, .tguide .tg-tools .tile::after { content: none }

/* المقال: أدوات أخرى مرتبطة تحت شريط «طبّق ما قرأته» */
.art-tools { margin: 12px 0 0; font-size: 14.5px; color: var(--text-2) }
.art-tools .link { font-weight: 600 }

/* التصنيف: مقدمة القسم، والقاموس: إبراز المصطلح المفتوح من رابط مباشر، والمقال: رابط المصطلح */
.cat-intro { margin-bottom: 14px }
.cat-intro h2 { font-size: clamp(18px, 2.2vw, 21px); margin: 0 0 6px }
.cat-intro p { margin: 0 }
.gt { scroll-margin-top: 96px }
.gt:target { background: var(--cyan-l, #E3F6FA); border-radius: 12px; outline: 2px solid var(--cyan); outline-offset: 4px }
.article a.term { color: inherit; text-decoration: underline dotted var(--teal); text-underline-offset: 4px }
.article a.term:hover { color: var(--teal) }
.cal-h { font-size: clamp(18px, 2.2vw, 21px); margin: 0 0 12px }
.je { scroll-margin-top: 96px }
/* محتوى الأدوات: العملية الحسابية داخل bdi لا تنقسم على سطرين (انقسامها في صفحة من اليمين لليسار يخلط ترتيب أجزائها)، عدا رمز Base64 الطويل */
.tguide .article bdi[dir="ltr"]:not(.b64) { white-space: nowrap }

/* شركاؤنا (PartnersStrip): مجموعتان، شعارات بارتفاع موحّد في بطاقات بيضاء؛ الشعار بألوانه الأصلية دون تعديل */
.partners .pt-groups { display: grid; gap: 22px }
.partners .pt-group h3 { font-size: 15px; color: var(--muted); font-weight: 600; margin: 0 0 10px }
.partners .pt-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.partners .pt-tile { background: #fff; border: 1px solid var(--line); border-radius: 16px; min-height: 92px; padding: 14px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center }
.partners .pt-tile img { width: auto; height: auto; max-width: 128px; max-height: 42px; object-fit: contain }
.partners .pt-tile small { font-size: 12.5px; color: var(--text-2); line-height: 1.5 }
.partners .pt-gov { grid-template-columns: repeat(2, 1fr) }
.partners .pt-gov .pt-tile img { max-height: 48px; max-width: 170px }
@media (width >= 760px) { .partners .pt-logos { grid-template-columns: repeat(3, 1fr) } .partners .pt-gov { grid-template-columns: repeat(2, minmax(0, 300px)) } }
@media (width >= 1100px) { .partners .pt-logos { grid-template-columns: repeat(7, 1fr) } .partners .pt-gov { grid-template-columns: repeat(2, minmax(0, 300px)) } }
@media (760px <= width < 1100px) { .partners .pt-logos:not(.pt-gov) { display: flex; flex-wrap: wrap; justify-content: center } .partners .pt-logos:not(.pt-gov) .pt-tile { flex: 0 0 calc((100% - 30px) / 4) } }
@media (width < 760px) { .partners .pt-logos:not(.pt-gov) { display: flex; flex-wrap: wrap; justify-content: center } .partners .pt-logos:not(.pt-gov) .pt-tile { flex: 0 0 calc((100% - 20px) / 3) } .partners .pt-tile { min-width: 0; padding: 12px 8px } .partners .pt-tile img { max-width: 100% } }
.partners .pt-tile.pt-dark { background: var(--ink); border-color: var(--ink) } /* شعار مصمم لخلفية داكنة (ZKTeco) يُعرض كما هو */
/* رابط «شركاؤنا» في المنيو (./#partners): العنوان لا يختفي تحت الهيدر الثابت */
#partners { scroll-margin-top: 80px }
/* قارئ رمز الفاتورة: معاينة الكاميرا (core.js تعديل 11) */
.qcam { position: relative; margin-bottom: 12px; border-radius: 14px; overflow: hidden; background: var(--ink) }
.qcam[hidden], #qcam[hidden] { display: none }
.qcam video { display: block; width: 100%; max-height: 60vh; object-fit: cover }
.qcam .qframe { position: absolute; inset: 50% auto auto 50%; width: min(60%, 260px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid var(--cyan, #1BB3CF); border-radius: 12px; box-shadow: 0 0 0 999px rgba(4, 37, 45, .35); pointer-events: none }
.qcam #qstop { position: absolute; inset: auto 0 12px; margin: 0 auto; width: max-content; background: #fff }
/* بوابة الأدوات: النتيجة مغطّاة بالبلور حتى التسجيل بالبريد (host.js applyLocks، قرار المدير 2026-10-27) */
.fs-locked { position: relative; min-height: 230px }
.fs-locked > :not(.fs-gate-ov):not(.res-head) { filter: blur(7px); user-select: none; pointer-events: none }
.fs-gate-ov { position: absolute; inset: 0; z-index: 6; display: flex; justify-content: center; align-items: flex-start; padding: 24px 12px; background: rgba(255, 255, 255, .25); border-radius: inherit }
.fs-gate-card { position: sticky; top: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 340px; padding: 20px 22px; text-align: center; background: #fff; border: 1px solid var(--line, #DCE6E8); border-radius: 18px; box-shadow: 0 18px 40px rgba(4, 37, 45, .18) }
.fs-gate-card .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ink, #04252D); color: var(--cyan, #1BB3CF) }
.fs-gate-card .ic svg { width: 22px; height: 22px }
.fs-gate-card b { font-size: 17px; color: var(--ink, #04252D) }
.fs-gate-card p { margin: 0 0 6px; font-size: 14px; line-height: 1.7; color: var(--text-2, #3E5359) }
.fs-gate-card .btn { min-width: 180px }
.result.fs-locked { overflow: hidden }
/* نافذة التسجيل: إعادة إرسال الرمز وتعديل البيانات */
/* تنبيه مجلد الرسائل غير المرغوب فيها في نافذة رمز التحقق */
.otp-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; background: #EAF6F8; border: 1px solid #B5E3EC; border-radius: 10px; font-size: 13.5px; line-height: 1.7; color: #0B4B58 }
.otp-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--teal, #006780) }
.otp-more { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px }
.otp-more .link { background: none; border: 0; padding: 6px 2px; font: inherit; font-size: 14px; color: var(--teal, #006780); text-decoration: underline; cursor: pointer }
.otp-more .link:disabled { color: var(--muted, #627379); text-decoration: none; cursor: default }
@media print { .fs-gate-ov { display: none } }

/* ---------- صفحتا التواصل وعرض السعر (مراجعة التصميم 2026-10-27) ---------- */
/* بيانات التواصل: صف لكل قناة بأيقونة، وأرقام المبيعات أزرار اتصال */
.cx h3 { margin-bottom: 6px }
.cx-row { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line-2, #EEF3F4) }
.cx-row:last-of-type { border-bottom: 0 }
.cx-ic { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; background: var(--cyan-l, #DFF4F8); color: var(--teal, #006780) }
.cx-ic svg { width: 19px; height: 19px }
.cx-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0 }
.cx-k { font-size: 12.5px; font-weight: 600; color: var(--muted, #627379) }
.cx-v { color: var(--ink, #04252D); font-weight: 600; font-size: 15px; overflow-wrap: anywhere }
/* أرقام المبيعات: صف لكل رقم، الرقم للاتصال وزر واتساب أخضر في نهاية الصف */
.cx-tels { list-style: none; margin: 4px 0 0; padding: 0; width: 100% }
.cx-tels li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line, #DCE6E8) }
.cx-tels li:last-child { border-bottom: 0 }
.cx .cx-tels li a { border-bottom: 0; font-weight: 600 } /* يلغي .side li a في site.css (خط وحشوة تحت كل رابط) */
.cx .cx-tels .cx-call { display: block; font: 600 15.5px var(--body); color: var(--ink, #04252D); white-space: nowrap; padding: 6px 0 }
.cx-call:hover, .cx-call:focus-visible { color: var(--teal, #006780) }
.cx .cx-tels .cx-wa { display: grid; padding: 0; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #E7F8EE; color: #128C4B; transition: background .15s, color .15s, transform .15s }
.cx-wa:hover, .cx-wa:focus-visible { background: #25D366; color: #fff; transform: scale(1.06) }
.cx-body .link { font-size: 13.5px; margin-top: 2px }
.cx-social { margin: 12px 0 0; font-size: 14px }
/* «بعد الإرسال»: خط زمني مرقّم لأن الخطوات متسلسلة فعلًا */
.qsteps { list-style: none; counter-reset: qs; margin: 4px 0 0; padding: 0 }
.qsteps li { position: relative; counter-increment: qs; padding-inline-start: 42px; padding-bottom: 16px; color: var(--text-2, #3E5359); line-height: 1.7 }
.qsteps li:last-child { padding-bottom: 0 }
.qsteps li::before { content: counter(qs); position: absolute; inset-inline-start: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink, #04252D); color: var(--cyan, #1BB3CF); font: 700 13.5px/1 var(--body) }
.qsteps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--line, #DCE6E8) }

/* خريطة المقر (OfficeMap): الصورة بهوية الموقع، الدبوس في المركز، البطاقة فوق الخريطة على الشاشات الكبيرة وتحتها على الجوال */
.omap-wrap { margin-top: 14px }
.omap { position: relative; margin: 0; border-radius: var(--r, 22px); overflow: hidden; background: var(--ink, #04252D); color: #fff; isolation: isolate }
.omap-view { position: relative; height: 300px }
.omap-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.omap-pin { position: absolute; inset: 50% auto auto 50%; width: 0; height: 0 }
.omap-dot { position: absolute; left: -26px; top: -60px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 0 4px rgba(27, 179, 207, .45) }
.omap-dot img { width: 34px; height: 34px; transform: rotate(45deg) }
.omap-ring { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--cyan, #1BB3CF); box-shadow: 0 0 0 3px rgba(4, 37, 45, .6) }
.omap-ring.r2 { background: transparent; box-shadow: none; border: 2px solid var(--cyan, #1BB3CF); opacity: 0 }
.omap-osm { position: absolute; inset-inline-end: 10px; bottom: 6px; font-size: 11px; color: #9FC2CA; background: rgba(4, 37, 45, .7); padding: 1px 7px; border-radius: 6px }
.omap-osm a { color: inherit; text-decoration: underline }
.omap-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 20px; background: linear-gradient(180deg, #06303A, var(--ink, #04252D)) }
.omap-kick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--cyan-2, #5FD0E4) }
.omap-kick svg { width: 15px; height: 15px }
.omap-name { font: 700 19px/1.4 var(--display); color: #fff }
.omap-addr { color: #B9D3D9; font-size: 14.5px }
.omap-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px }
.omap-go .btn { min-height: 44px }
.omap-app { font-size: 14px; color: #CFE6EB; text-decoration: underline; text-underline-offset: 3px }
.omap-app:hover { color: #fff }
@media (min-width: 760px) {
    .omap:not(.omap-sm) .omap-view { height: 440px }
    .omap:not(.omap-sm) .omap-card { position: absolute; inset-inline-start: 28px; top: 50%; transform: translateY(-50%); width: min(360px, 40%); padding: 22px 24px; border: 1px solid rgba(95, 208, 228, .28); border-radius: 18px; background: rgba(4, 37, 45, .82); backdrop-filter: blur(6px); box-shadow: 0 20px 50px rgba(0, 0, 0, .35) }
    .omap:not(.omap-sm) .omap-name { font-size: 21px }
    /* البطاقة تغطي جهة البداية: المقر (مركز الصورة) يُزاح إلى منتصف الجزء الظاهر، 67% من البداية، والصورة أعرض لتغطي الطرفين */
    .omap:not(.omap-sm) .omap-bg { width: 136%; max-width: none; inset: 0 auto 0 auto; inset-inline-start: -1% }
    .omap:not(.omap-sm) .omap-pin { left: auto; inset-inline-start: 67% }
}
.omap-sm .omap-view { height: 190px }
.omap-sm .omap-card { padding: 14px 16px 16px }
.omap-sm .omap-name { font-size: 16.5px }
.omap-sm .omap-dot { left: -21px; top: -50px; width: 42px; height: 42px }
.omap-sm .omap-dot img { width: 28px; height: 28px }
@media (prefers-reduced-motion: no-preference) {
    .omap-dot { animation: omapDrop .7s cubic-bezier(.2, 1.4, .4, 1) .25s both }
    .omap-ring.r2 { animation: omapPulse 2.4s ease-out 1s infinite }
    .omap-bg { animation: omapZoom 1.6s cubic-bezier(.2, .8, .2, 1) both }
}
@keyframes omapDrop { from { transform: translateY(-40px) rotate(-45deg); opacity: 0 } to { transform: rotate(-45deg); opacity: 1 } }
@keyframes omapPulse { 0% { transform: scale(1); opacity: .9 } 100% { transform: scale(6); opacity: 0 } }
@keyframes omapZoom { from { transform: scale(1.08) } to { transform: scale(1) } }

/* ملفات طلب البرنامج المخصص (CustomPage، LeadFiles): منطقة سحب وإفلات، والحقل الحقيقي يغطيها شفافًا فيستقبل الإفلات والنقر */
.ffile .flabel { display: block; font-size: 14px; font-weight: 600; color: var(--ink, #04252D); margin-bottom: 6px }
.ffile .flabel small { font-weight: 400; color: var(--muted, #627379) }
.fdrop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 16px; text-align: center; border: 2px dashed #B5E3EC; border-radius: 16px; background: #F5FBFC; color: var(--text-2, #3E5359); cursor: pointer; transition: border-color .15s, background .15s }
.fdrop:hover, .fdrop:focus-within { border-color: var(--cyan, #1BB3CF); background: var(--cyan-l, #DFF4F8) }
.fdrop b { color: var(--ink, #04252D); font-size: 15px }
.fdrop > span:not(.fdrop-ic) { font-size: 13px; color: var(--muted, #627379) }
.fdrop-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--teal, #006780); box-shadow: 0 4px 12px rgba(4, 37, 45, .08); margin-bottom: 4px }
.fdrop-ic svg { width: 20px; height: 20px }
.fdrop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer }
.ffile.bad .fdrop { border-color: var(--bad, #C0392B) }
.flist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.flist:empty { display: none }
.flist li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--line, #DCE6E8); border-radius: 10px; background: #fff; font-size: 14px }
.flist li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.flist li small { color: var(--muted, #627379); flex-shrink: 0 }
.ffile .fnote { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted, #627379) }

/* طلب البرنامج المخصص: النموذج تحت رأس الصفحة مباشرة، ورحلة العميل بجانبه (طلب المدير 2026-10-27) */
#cform, #kinds { scroll-margin-top: 80px }
.cform-head { margin-bottom: 12px }
.cform-head h2 { font: 700 22px/1.4 var(--display); color: var(--ink, #04252D); margin: 0 }
.cform-head p { margin: 4px 0 0; color: var(--text-2, #3E5359); font-size: 15px }
.qsteps-2 li { display: flex; flex-direction: column; padding-bottom: 14px }
.qsteps-2 li b { color: var(--ink, #04252D); font-weight: 700; line-height: 1.5 }
.qsteps-2 li span { font-size: 13.5px; color: var(--muted, #627379); line-height: 1.6 }

/* زر النموذج أثناء الإرسال (site.js): دائرة دوّارة ونص الانتظار، بوضوح كامل بدل شفافية الزر المعطّل */
.btn.sending[disabled] { opacity: 1; cursor: progress }
.btn.sending::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; flex-shrink: 0; animation: btnSpin .8s linear infinite }
@keyframes btnSpin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .btn.sending::before { animation-duration: 2.4s } }

/* شارة «مجانًا» فوق «أدوات المحاسب» و«لأصحاب المنشآت» (طلب المدير 2026-10-28): فوق الكلمة لا بجانبها، فلا تأخذ عرضًا
   من الهيدر المزدحم وتظهر على كل عروض الكمبيوتر، والمساحة التي كانت تأخذها صارت مسافات أوسع بين العناصر */
.hdr nav .ni > button { position: relative }
.hdr .nfree { position: absolute; top: -9px; inset-inline-start: 50%; transform: translateX(50%); padding: 0 7px; border-radius: 999px; background: #187D54; color: #fff; font-size: 10px; font-weight: 700; line-height: 1.5; white-space: nowrap; box-shadow: 0 2px 6px rgba(24, 125, 84, .25); pointer-events: none }
html[dir=ltr] .hdr .nfree { transform: translateX(-50%) }
/* قائمة أدوات المحاسب: 16 أداة (2026-10-28) في 4 أعمدة من 1200 بدل 3 أعمدة بستة صفوف؛ كل أداة باسمها وشرحها المبسط (طلب المدير) */
@media (width >= 1024px) { .hdr .mega.g4 { grid-template-columns: repeat(4, 1fr); width: min(1100px, 94vw) } } /* من 1024 لا 1200: 16 أداة في 3 أعمدة تنتهي عند 758 من 768 */
/* من 1320 (عرض الصفحة ثابت 1240) يبقى ~20px في العربية بعد الشارة: مسافة 8px بين العناصر بدل 4 */
@media (width >= 1320px) { .hdr nav { gap: 8px } }
/* بين 1024 و1320 كانت المسافة صفرًا والفراغ يبقى على الطرفين (207px على 1280): تكبر مع العرض، 0 على 1024 و ~21px على 1280 */
@media (1024px <= width < 1320px) { .hdr nav { gap: calc((100vw - 1024px) / 12) } }
/* الإنجليزية أطول قائمة (Accountant Library، IT solutions): مسافة أقل بين عناصرها وحدها */
@media (1024px <= width < 1320px) { html[lang=en] .hdr nav .ni > a, html[lang=en] .hdr nav .ni > button { padding: 9px 4px } }
@media (width >= 1320px) { html[lang=en] .hdr nav .ni > a, html[lang=en] .hdr nav .ni > button { padding: 9px 5px } }
/* أيقونة «حسابي» كانت تنضغط إلى عرض صفر داخل الزر المرن */
.hdr .who svg { flex-shrink: 0; width: 18px; height: 18px }

/* ================================================================
   أدوات أصحاب المنشآت (2026-10-27، docs/superpowers/specs/2026-10-27-owner-tools-design.md)
   ================================================================ */
/* بطاقة الربط بين القسمين: «هل أنت صاحب المنشأة؟» في /tools و«أنت محاسب؟» في /owners */
.own-cross { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.own-cross > .ic { flex-shrink: 0; }
.own-cross > div { flex: 1 1 260px; }
.own-cross b { font-family: var(--display); color: var(--ink); }
.own-cross p { margin: 2px 0 0; color: var(--muted); font-size: 14.5px; }
.own-disclaimer { margin-top: 14px; font-size: 13.5px; }
/* عنصر «لأصحاب المنشآت» في الهيدر: سبعة عناصر بدل ستة. **سهم القوائم المنسدلة باقٍ** (طلب المدير 2026-10-28: «مهم جدًا لشكل المنيو»)،
   أصغر قليلًا (5px وفراغ 3px)، والمساحة من غيره: من 1320 فراغ الهيدر 12px وحشوة زر «اطلب عرض سعر» 14px (الشعار بحجمه الكامل)؛
   ومن 1024 إلى 1320 خط القائمة 13px وحشوة العناصر 5px والزر 10px. قيس بلا تجاوز في العربية والأردية والهندية على
   1024/1280/1319/1320/1366/1440، والإنجليزية بعنوان «Owners» (أطول منه يتجاوز 12–15px) */
@media (width >= 1024px) { .hdr nav .ni > button::after { width: 5px; height: 5px } .hdr nav .ni > button { gap: 3px } }
@media (width >= 1320px) { .hdr .wrap { gap: 12px } .hdr .act .btn.b-teal { padding-inline: 14px } .hdr .act { gap: 8px } }
@media (1024px <= width < 1320px) {
    .hdr nav .ni > a, .hdr nav .ni > button { padding: 9px 5px; font-size: 13px }
    .hdr .act .btn.b-teal { padding: 0 10px }
    .hdr .wrap { gap: 6px }
}

/* ---------- شاشة أداة الملاك (§4) ---------- */
.own-wrap { max-width: 980px }
.own-tabs { margin-bottom: 14px }
.own-in-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px }
.own-in-h h2 { margin: 0; font-size: 19px }
.own-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; line-height: 1.5 }
.own-sample-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--copper-l); color: #6B3713; font-size: 13.5px }
.own-sample-note[hidden] { display: none }
.own-sample-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px }
.own-res { margin-top: 16px }
.own-res:empty { display: none }
.own-head { margin-bottom: 14px }
.own-kpis { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) }
.own-kpi p { margin: 6px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.55 }
.own-lv { display: inline-block; margin-top: 4px; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 700 }
.lv-good .own-lv, .rp-lv.lv-good { background: #E3F6EC; color: #187D54 }
.lv-warn .own-lv, .rp-lv.lv-warn { background: var(--copper-l); color: #A36031 }
.lv-bad .own-lv, .rp-lv.lv-bad { background: var(--bad-l); color: #A3321F }
.own-kpi.lv-good { border-inline-start: 4px solid #187D54 }
.own-kpi.lv-warn { border-inline-start: 4px solid #C2733A }
.own-kpi.lv-bad { border-inline-start: 4px solid var(--bad) }
.own-chart { position: relative; height: 280px; margin: 16px 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px }
.own-steps { margin: 16px 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 4px 16px }
.own-steps summary { cursor: pointer; padding: 12px 0; font-family: var(--display); font-weight: 700; color: var(--teal) }
.own-steps ol { margin: 0 0 12px; padding-inline-start: 22px }
.own-steps li { margin: 0 0 12px }
.own-steps li > b { display: block; color: var(--ink) }
.own-f { display: block; color: var(--muted); font-size: 13.5px }
.own-x { display: inline-block; margin-top: 2px; padding: 2px 10px; border-radius: 8px; background: var(--bg); font-size: 14px; white-space: normal; overflow-wrap: anywhere }
.own-h { font-size: 18px; margin: 18px 0 8px }
.own-notes { margin: 0; padding-inline-start: 20px; line-height: 1.8 }
.own-disc { margin: 14px 0 0; color: var(--muted); font-size: 13px }
.own-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }
.own-acts .btn svg { width: 18px; height: 18px }
.own-wm-line { margin: 14px 0 0; color: var(--muted); font-size: 12.5px; text-align: center; direction: ltr }
.own-sys { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px }
.own-sys > div { flex: 1 1 240px }
@media (width < 640px) {
    .own-acts .btn { flex: 1 1 100% } .own-chart { height: 230px }
    /* بطاقتان في الصف على الجوال (§4): تمرير أقل */
    .own-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) } .own-kpi { padding: 12px } .own-kpi p { font-size: 12.5px }
}

/* العلامة المائية داخل الموقع (§5.1): شعار شفاف متكرر فوق النتيجة، لا يعيق القراءة ولا التحديد (pointer-events: none)،
   ويظهر في أي لقطة شاشة وفي الطباعة. كانت خلف النتيجة (z-index: -1) فتغطيها البطاقات البيضاء في القوائم المالية
   وغيرها؛ صارت فوقها بشفافية 5% (طلب المدير 2026-10-28: علامة مائية في نتيجة كل الأدوات) */
.wm { position: relative; isolation: isolate }
.wm:not(:empty)::before {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: url("/img/brand/mark-512.png") center 40px / 220px repeat-y; opacity: .05
}
/* المقالات وأدلة الأدوات وصفحات المكتبة (دليل الحسابات، القيود، المواعيد): شعار واحد كبير باهت ثابت خلف المحتوى
   لشكل الصفحة (اختيار المدير «د» من أربعة أشكال، review/wm-compare، 2026-10-28). fixed: يبقى مكانه أثناء التمرير
   ولا يتكرر مع كل قسم؛ Safari على iPhone لا يدعم الخلفية الثابتة فيظهر مرة في أعلى المحتوى */
.article, .wm-page { position: relative; isolation: isolate }
.article::before, .wm-page::before {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: url("/img/brand/mark-512.png") 38% 55% / 440px no-repeat fixed; opacity: .045
}
@media (width < 1024px) { .article::before, .wm-page::before { background-position: center 55%; background-size: 300px } }
@media print { .article::before, .wm-page::before { display: none } }
/* سياسة الخصوصية والشروط (LegalPage): البريد والهاتف والتاريخ لا تنكسر على سطرين */
.legal bdi { white-space: nowrap }
.legal .legal-id { margin-top: 24px; font-size: 13.5px }
/* «بإرسال النموذج / بالتسجيل توافق على سياسة الخصوصية» تحت زر كل نموذج وفي نافذة تسجيل الأدوات */
.form-legal { grid-column: 1 / -1; margin: 2px 0 0; text-align: center; font-size: 12.5px; color: var(--muted) }
.form-legal a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px }

/* ---------- تقرير PDF (report.js، §5.2): يُبنى عند الطلب ويُطبع وحده ---------- */
#report { display: none }
@media print {
    body:has(> #report) > :not(#report) { display: none !important }
    body:has(> #report) { background: #fff; padding: 0 }
    @page { size: A4; margin: 14mm 14mm 18mm }
    /* بألوان الموقع (طلب المدير 2026-10-28): رأس داكن بالشعار الأبيض وشريط القط، وبطاقة النتيجة بتدرّج teal، وعناوين الجداول ملونة */
    #report { display: block; color: #13262C; font-size: 11.5pt; line-height: 1.6; -webkit-print-color-adjust: exact; print-color-adjust: exact }
    #report h1 { font-size: 18pt; margin: 0; color: #fff }
    #report h2 { font-size: 13pt; margin: 18px 0 8px; padding-inline-start: 10px; border-inline-start: 4px solid #C2733A; color: #006780; break-after: avoid }
    #report .rp-head { display: flex; align-items: center; gap: 18px; padding: 14px 18px; border-radius: 14px 14px 0 0; background: linear-gradient(120deg, #04252D 0%, #0A3A45 60%, #006780 100%) }
    #report .rp-head img { width: 150px; height: auto }
    #report .rp-head p { margin: 2px 0 0; color: #A9D8E2; font-size: 10pt }
    #report .rp-band { height: 16px; margin-bottom: 14px; border-radius: 0 0 6px 6px; background: url("/img/qatt-band.svg") 0 0 / auto 16px repeat-x }
    #report .rp-sum { padding: 12px 18px; border-radius: 14px; background: linear-gradient(135deg, #006780, #1BB3CF); margin-bottom: 14px; break-inside: avoid }
    #report .rp-sum small { display: block; color: #DFF4F8 }
    #report .rp-sum b { font-size: 22pt; color: #fff }
    #report table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 6px 0; border: 1px solid #DAE5E8; border-radius: 10px; overflow: hidden }
    #report th, #report td { border-bottom: 1px solid #DAE5E8; padding: 7px 10px; text-align: start; vertical-align: top; font-size: 10.5pt }
    #report tr:last-child > * { border-bottom: 0 }
    #report th { font-weight: 600; width: 34%; background: #EEF8FA; color: #04252D }
    #report tbody tr:nth-child(even) td { background: #F8FBFC }
    #report td.n { white-space: nowrap; font-weight: 700; color: #006780 }
    #report tr { break-inside: avoid }
    #report .rp-lv { padding: 2px 10px; border-radius: 99px; font-weight: 700; font-size: 9.5pt; white-space: nowrap }
    #report .rp-steps { padding-inline-start: 22px }
    #report .rp-steps li::marker { color: #C2733A; font-weight: 700 }
    #report .rp-chart { display: block; max-width: 100%; max-height: 240px; margin: 8px auto }
    #report .rp-steps li { margin-bottom: 6px; break-inside: avoid }
    #report bdi { color: #3E5359 }
    #report .rp-disc { margin-top: 14px; font-size: 9.5pt; color: #627379 }
    #report .rp-src { font-size: 9.5pt; color: #3E5359; padding-inline-start: 18px }
    #report .rp-src li { margin-bottom: 4px; break-inside: avoid }
    #report .rp-src bdi { font-size: 8.5pt; color: #627379; overflow-wrap: anywhere }
    #report .rp-sign { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px; margin-top: 24px; break-inside: avoid }
    #report .rp-sign i { display: block; border-bottom: 1px solid #13262C; height: 34px }
    /* العلامة المائية والتذييل fixed: يتكرران في كل صفحة مطبوعة */
    #report .rp-wm { position: fixed; top: 50%; left: 50%; width: 110mm; transform: translate(-50%, -50%) rotate(-20deg); opacity: .075; z-index: -1 }
    #report .rp-foot { position: fixed; bottom: -12mm; inset-inline: 0; text-align: center; font-size: 8.5pt; color: #627379; border-top: 1px solid #DAE5E8; padding-top: 3px }
}
.own-kpi p strong, .own-notes strong { font-weight: 700; color: var(--ink) }
/* صحة المنشأة: الملف المرفوع، وجدول تصنيف الحسابات */
.own-file { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--bg) }
.own-file svg { width: 18px; height: 18px; vertical-align: -4px; color: var(--teal) }
/* اسم الملف بلا مسافات (Previous_year_trial_balance_sample.xlsx) ينكسر بدل أن يدفع الصفحة أفقيًا على الجوال */
.own-file > span { min-width: 0; overflow-wrap: anywhere }
.own-acc .scroll { max-height: 420px; overflow: auto; margin-bottom: 12px }
/* 9 مؤشرات (صحة المنشأة): 3 أعمدة بدل 4 فلا يبقى مؤشر وحده في آخر صف */
@media (width >= 640px) { .own-kpis.own-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
/* أداة «قريبًا» في /owners: بطاقة بلا رابط */
.tile.own-soon { opacity: .72; cursor: default }
.tile.own-soon:hover { transform: none; box-shadow: none }
/* أدوات المرحلة 2: عنوان فرعي بين الحقول، والمنزلقات، وتنبيه النسبة، وشريط دورة النقد، وجدول المقارنة */
.own-in .fgrid > .own-sub { grid-column: 1 / -1; margin: 8px 0 -4px; font-size: 15px; color: var(--teal) }
.own-range-row { display: flex; align-items: center; gap: 12px }
.own-range input[type=range] { flex: 1; accent-color: var(--teal); min-width: 0 }
.own-range output { min-width: 64px; padding: 4px 10px; border-radius: 10px; background: var(--bg); font-weight: 700; text-align: center }
.own-pctwarn { display: block; margin-top: 4px; color: #A36031; font-size: 12.5px; font-weight: 600 }
.own-pctwarn[hidden] { display: none }
.own-ccc { margin: 16px 0; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 18px; display: grid; gap: 8px }
.own-ccc-row { display: flex; gap: 6px; min-width: 0 }
.own-ccc-row span { min-width: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4; color: #fff; overflow: hidden }
.own-ccc-row b { font-size: 16px }
.own-ccc .c-inv { background: var(--teal) } .own-ccc .c-ar { background: #1592AB }
.own-ccc .c-ap { background: #627379 } .own-ccc .c-ccc { background: #A36031 }
.own-cmp { margin: 16px 0 }
.own-cmp .own-best td { background: #E3F6EC; font-weight: 700 }
.own-cmp .tag { background: #187D54; color: #fff }
/* المرحلة 3: صفوف الشركاء (اسم، حصة، مسحوبات، حذف)، والمستحق السالب، وملفا السنتين، وحالة كل حساب */
.own-pts { margin-top: 14px }
.own-pt { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 10px 0; border-bottom: 1px solid var(--line) }
.own-pt .f { margin: 0 }
.own-pt-del { width: 40px; height: 44px; padding: 0; justify-content: center }
.own-pt-del svg { width: 16px; height: 16px }
.own-pt-del:disabled { opacity: .35; cursor: default }
.own-pt-sum { margin: 10px 0 0; font-weight: 600; color: #A36031 }
.own-pt-sum .ok { color: #187D54 }
@media (width < 640px) {
    .own-pt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto }
    .own-pt .f:first-child { grid-column: 1 / -1 }
}
/* أدوات المحاسب: صف دفعة الاستقطاع (المبلغ، النوع، التاريخ، حذف): النوع أعرض لأن أسماءه طويلة. على الجوال: النوع وزر الحذف
   في السطر الأول، ثم المبلغ والتاريخ (حقل التاريخ يأخذ عرض زر الحذف أيضًا حتى لا يُقص اليوم) */
.own-pt.acct-wh { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1fr) auto }
@media (width < 640px) {
    .own-pt.acct-wh { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto }
    .own-pt.acct-wh .f:first-child { grid-column: auto }
    .own-pt.acct-wh .f:nth-child(2) { grid-column: 1 / 3; order: -2 }
    .own-pt.acct-wh .own-pt-del { order: -1 }
    .own-pt.acct-wh .f:nth-child(3) { grid-column: 2 / -1 }
}
.own-cmp td.neg, .own-cmp tfoot th { font-weight: 700 }
.own-cmp td.neg { color: #B3261E }
.own-cmp tfoot th { border-top: 2px solid var(--ink) }
.own-years { display: grid; gap: 14px }
@media (width >= 760px) { .own-years { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.own-year .own-sub { margin: 0 0 8px; font-size: 15px; color: var(--teal) }
.own-acc .tag { white-space: nowrap }
.own-st-up { background: #E3F6EC; color: #187D54 } .own-st-down { background: #FBE9E6; color: #B3261E }
.own-st-added { background: #DFF4F8; color: #006780 } .own-st-stopped { background: #EEF2F3; color: #3E5359 }
.own-quote { margin: 16px 0 }
/* أدوات المحاسب الجديدة (2026-10-28): «النسب المستخدمة» قابلة للتعديل، و«المصادر الرسمية» تحت الأداة */
.acct-rates { margin-top: 14px }
.acct-rates > summary { cursor: pointer; font-weight: 700; color: var(--teal); padding: 2px 0 }
.acct-rates[open] > summary { margin-bottom: 10px }
.acct-rates .own-hint { display: block }
.tool-sources { margin: 0 0 28px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff }
.tool-sources h2 { margin: 0 0 10px; font-size: 18px; color: var(--ink) }
.tool-sources ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px }
.tool-sources a { color: var(--teal); font-weight: 600; overflow-wrap: anywhere }
.tool-sources small { white-space: nowrap }
.tool-sources-note { margin: 12px 0 0; font-size: 13.5px; color: var(--muted) }
/* الأنظمة واللوائح في مكتبة المحاسب (2026-10-28): بطاقة لكل نص رسمي، وبيانات النسخة، وزرّا التنزيل والمصدر */
.reg-h { display: flex; gap: 12px; align-items: flex-start }
.reg-h .ic { flex-shrink: 0 }
.reg-h h2 { margin: 0 0 2px; font-size: 20px }
.reg-h p { margin: 0 }
.reg-meta { margin: 0 0 14px; padding-inline-start: 20px; color: var(--muted); font-size: 14.5px }
.reg-acts { display: flex; flex-wrap: wrap; gap: 10px }
.reg-tools { margin: 14px 0 0; font-size: 14.5px }
.reg:target { box-shadow: 0 0 0 3px var(--cyan) }
/* محوّل التاريخ (2026-10-28): التاريخان جنبًا إلى جنب (وتحت بعضهما على الجوال)، ورأس جدول التحويل يبقى ظاهرًا فوق البلور */
.hj-res { margin-top: 14px }
.hj-res small { display: block; color: var(--muted) }
.hj-res b { display: block; font-size: 26px; color: var(--ink); line-height: 1.4 }
.hj-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.hj-two > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg) }
.hj-two bdi { display: block; font-size: 14px }
.hj-ymd { max-width: 420px; margin-top: 10px }
.hj-ymd td { text-align: center; font-size: 20px; font-weight: 700 }
.hj-th { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 12px }
.hj-th .fgrid { flex: 1 1 420px; margin: 0 }
@media (width < 640px) { .hj-two { grid-template-columns: 1fr } .hj-res b { font-size: 22px } }

/* خطة SEO 2026-10-28: «باختصار» أعلى صفحات النظام والأنشطة، وروابط الوحدات والأدوات داخل المحتوى، وبطاقة النظام تحت دليل الأداة */
.seo-answer { border-inline-start: 4px solid var(--teal); margin-bottom: 14px }
.seo-answer h2 { font-size: 16px; margin: 0 0 6px; color: var(--teal) }
.seo-answer p { margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--text) }
.wrap > .seo-answer { margin-bottom: 14px }
.rel-tools { display: grid; gap: 10px; grid-template-columns: 1fr }
.rel-tools .tile { min-height: 0; flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px }
.rel-tools .tile b { display: block; font-family: var(--display); color: var(--ink); font-size: 15px }
.rel-tools .tile small { display: block; color: var(--muted); font-size: 13px; line-height: 1.5 }
.rel-tools .ic { flex: none }
@media (width >= 760px) { .rel-tools { grid-template-columns: repeat(2, 1fr) } }
.erp-card { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 18px; background: #fff; border: 1px solid var(--line); border-inline-start: 4px solid var(--teal); border-radius: var(--r); color: inherit; transition: border-color .15s, box-shadow .15s }
.erp-card:hover { border-color: var(--teal); box-shadow: 0 18px 36px -24px rgba(0,103,128,.5) }
.erp-card .ic { flex: none }
.erp-card .ec-t { flex: 1; min-width: 0 }
.erp-card small { display: block; color: var(--teal); font-size: 13px; font-weight: 600 }
.erp-card b { display: block; font-family: var(--display); color: var(--ink); font-size: 17px; margin: 2px 0 4px }
.erp-card .ec-t > span { display: block; color: var(--text-2); font-size: 14px; line-height: 1.7 }
.erp-card .btn { flex: none }
@media (width < 640px) { .erp-card { flex-wrap: wrap } .erp-card .btn { width: 100% } }
.mod-chips { display: flex; flex-wrap: wrap; gap: 8px }
.mod-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600 }
.mod-chips a:hover { border-color: var(--teal); color: var(--teal) }
.mod-chips svg { width: 16px; height: 16px; flex: none }

/* برنامج الشركاء (/partner-program، 2026-10-29): «من يمكنه الانضمام؟» ثلاث بطاقات من 760px، وتحت بعضها على الجوال */
.pp-who { padding-top: 0 }
.pp-who h2 { font: 700 22px/1.4 var(--display); color: var(--ink, #04252D); margin: 0 0 12px }
.pp-kinds { display: grid; gap: 14px }
.pp-kinds .panel { margin: 0 }
.pp-kinds h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px }
@media (width >= 760px) { .pp-kinds { grid-template-columns: repeat(3, 1fr) } }
/* لوحة الإدارة: رابط الشريك قابل للتحديد كاملًا بضغطة */
.adm .pp-link { user-select: all; direction: ltr; font-size: 12.5px; color: var(--teal); word-break: break-all }
/* صفحة الشريك (/partner، المرحلة 2): أرقامه، ورابطه للنسخ، وعملاؤه */
.pp-portal .panel h2 { font: 700 19px/1.4 var(--display); color: var(--ink, #04252D); margin: 0 0 8px }
.pp-portal .panel + .panel { margin-top: 14px }
.pp-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px }
.pp-stats .panel { margin: 0; padding: 14px 16px }
.pp-stats small { display: block; color: var(--muted); font-size: 13px }
.pp-stats b { display: block; font: 700 22px/1.3 var(--display); color: var(--ink, #04252D); margin-top: 2px }
@media (width >= 760px) { .pp-stats { grid-template-columns: repeat(5, 1fr) } }
.pp-linkrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.pp-linkbox { flex: 1 1 260px; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: 14px; overflow-wrap: anywhere; user-select: all }
/* دليل المحاسبين الشركاء (/accountants، المرحلة 3) */
.acc-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px }
.acc-filter label { display: inline; margin: 0; font-weight: 600 }
.acc-filter select { width: auto; flex: 0 1 240px; min-width: 160px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: inherit }
.acc-grid { display: grid; gap: 14px }
@media (width >= 760px) { .acc-grid { grid-template-columns: repeat(2, 1fr) } }
@media (width >= 1100px) { .acc-grid { grid-template-columns: repeat(3, 1fr) } }
.acc-card { margin: 0; display: flex; flex-direction: column; gap: 8px }
.acc-card h2 { font: 700 18px/1.4 var(--display); color: var(--ink, #04252D); margin: 0; overflow-wrap: anywhere }
.acc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 14px }
.acc-meta svg { width: 16px; height: 16px }
.acc-bio { margin: 0; font-size: 14.5px; line-height: 1.7; overflow-wrap: anywhere }
.acc-svc { list-style: none; margin: 0; padding: 0 }
.acc-svc li { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ink) }
.acc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto }
.acc-note { margin: 16px 0; font-size: 13.5px }
.acc-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between }
.acc-cta h2 { font: 700 19px/1.4 var(--display); color: var(--ink, #04252D); margin: 0 0 4px }
.pp-checks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px }
.pp-checks legend { font-weight: 600; margin-bottom: 6px; padding: 0 }
/* صورة المحاسب أو شعار المكتب (PhotoField): معاينة دائرية وزر اختيار؛ والصورة في بطاقة الدليل */
.fphoto .flabel { display: block; font-weight: 600; margin-bottom: 6px }
.fphoto-pick { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 14px; cursor: pointer; background: #fff }
.fphoto-pick:hover { border-color: var(--teal) }
.fphoto-pick input { position: absolute; width: 1px; height: 1px; opacity: 0 }
.fphoto-pick:focus-within { outline: 2px solid var(--cyan); outline-offset: 2px }
.fphoto-prev { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--cyan-l); color: var(--teal) }
.fphoto-prev img { width: 100%; height: 100%; object-fit: cover }
.fphoto-prev svg { width: 28px; height: 28px }
.fphoto-txt b { display: block; color: var(--teal) }
.fphoto-txt small { display: block; color: var(--muted); font-size: 13px; line-height: 1.5 }
.fphoto .err { display: block; color: var(--bad); font-size: 13px; margin-top: 4px }
.acc-head { display: flex; gap: 12px; align-items: center }
.acc-photo { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid var(--line) }
.acc-initial { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--cyan-l); color: var(--teal); font: 700 24px var(--display) }
/* سلايدر لقطات النظام (ErpGallery + ErpShot، 2026-10-30): إطار بنسبة ثابتة والصورة داخله كاملة (الجوال والنوافذ الصغيرة في وسطه)،
   والشرح تحتها، والأزرار والنقاط تحته. بلا JS يبقى شريطًا يُسحب أفقيًا */
.eslider { margin: 0 0 14px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 10px; box-shadow: 0 10px 30px -18px rgba(4,37,45,.35) }
.es-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 12px }
.es-track::-webkit-scrollbar { display: none }
.es-track:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px }
.es-slide { flex: 0 0 100%; scroll-snap-align: start; min-width: 0 }
.erp-shot { margin: 0 }
.erp-shot a { display: flex; align-items: center; justify-content: center; aspect-ratio: 1600 / 858; background: linear-gradient(160deg, #EEF5F7, #E2EEF1); border-radius: 12px; overflow: hidden }
.erp-shot img { width: 100%; height: 100%; object-fit: contain; display: block }
.erp-shot.phone img { padding: 10px 0 }
.erp-shot a:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px }
.erp-shot figcaption { padding: 12px 6px 4px; font-size: 14.5px; line-height: 1.7; color: var(--muted); min-height: 3.4em }
.erp-shot figcaption b { color: var(--ink); margin-inline-end: 4px }
.es-nav { display: none; align-items: center; gap: 8px; padding: 6px 4px 2px }
.es-ready .es-nav { display: flex }
.es-dots { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px }
.es-dot { width: 24px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center }
.es-dot::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: width .25s, background .25s }
.es-dot[aria-current="true"]::before { width: 22px; background: var(--teal) }
.es-dot:focus-visible { outline: 2px solid var(--cyan); border-radius: 6px }
.es-count { font-size: 13px; color: var(--muted); min-width: 3.5em; text-align: center }
.es-count b { color: var(--ink) }
.es-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--teal); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s }
.es-btn:hover { background: var(--teal); color: #fff }
.es-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px }
.es-btn svg { width: 20px; height: 20px }
[dir="rtl"] .es-next svg, [dir="ltr"] .es-prev svg { transform: scaleX(-1) }
.es-play span { display: block; width: 10px; height: 12px; border-inline: 3px solid currentColor }
.es-paused .es-play span { width: 0; height: 0; border: 0; border-block: 7px solid transparent; border-inline-start: 11px solid currentColor; margin-inline-start: 3px }
[dir="rtl"] .es-paused .es-play span { transform: scaleX(-1); margin-inline-start: 0; margin-inline-end: 3px }
.es-tall .erp-shot a { aspect-ratio: auto; height: min(560px, 72vh) }
.es-tall .erp-shot.phone img { padding: 14px 0 }
@media (max-width: 520px) { .es-dots { display: none } .es-count { flex: 1 } .es-btn { width: 36px; height: 36px } .eslider { padding: 6px } }
/* /erp: سلايدر المتصفح وبجانبه سلايدر الجوال (تحته على الشاشات الصغيرة) */
.es-pair { display: grid; gap: 14px; margin-bottom: 14px }
.es-pair .eslider { margin: 0 }
@media (min-width: 1024px) {
  .es-pair { grid-template-columns: minmax(0, 1fr) 340px; align-items: start }
  .es-pair .es-tall .erp-shot a { height: 520px }
}
/* نافذة صور السلايدر المنبثقة (site.js openLightbox): الصورة بأكبر حجم يسعه الشاشة، وشرحها تحتها، وزر الإغلاق والسهمان */
.lbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; color: #fff }
.lbox::backdrop { background: rgba(4, 37, 45, .88); backdrop-filter: blur(3px) }
.lb-lock { overflow: hidden }
.lb-in { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 56px 16px 20px; box-sizing: border-box }
.lbox figure { margin: 0; flex: 0 1 auto; min-width: 0; max-width: min(1600px, 100%); display: flex; flex-direction: column; align-items: center }
.lbox img { display: block; max-width: 100%; max-height: calc(100dvh - 170px); width: auto; height: auto; border-radius: 10px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.45) }
.lbox figcaption { margin-top: 12px; max-width: 900px; text-align: center; font-size: 15px; line-height: 1.7; color: #D6E6EA }
.lbox figcaption b { color: #fff; margin-inline-end: 4px }
.lb-x { position: absolute; top: 12px; inset-inline-end: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer }
.lb-x:hover { background: rgba(255,255,255,.28) }
.lb-x svg { width: 22px; height: 22px }
.lbox .es-btn { width: 48px; height: 48px; background: rgba(255,255,255,.14); border: 0; color: #fff }
.lbox .es-btn:hover { background: var(--cyan); color: var(--ink) }
.lbox .es-btn[hidden] { display: none }
.lb-x:focus-visible, .lbox .es-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px }
[dir="rtl"] .lb-next svg, [dir="ltr"] .lb-prev svg { transform: scaleX(-1) }
.lb-count { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font-size: 14px; color: #D6E6EA }
@media (max-width: 760px) {
  .lb-in { padding: 60px 8px 16px; flex-wrap: wrap; align-content: center }
  .lbox figure { order: 1; flex-basis: 100% }
  .lbox .es-btn { order: 2 }
  .lbox img { max-height: calc(100dvh - 230px) }
}
/* «مساعد الشاشة الكاملة» (المحادثة الذكية، chat.js + ChatWidget، التصميم الثاني المعتمد review/chat-mockup-v2.html):
   زر «اسألنا» بالشعار ونقطة «متاح الآن»، ورسالة ترحيب فوقه، ونافذة برأس داكن وشريط القط. فوق الشريط السفلي على الجوال، وبملء الشاشة تحت 640px */
.fschat { position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 70; font-family: var(--body); color: var(--ink) }
.fschat[hidden] { display: none }
@media (max-width: 1023.98px) { .fschat { bottom: calc(var(--tab) + 14px + env(safe-area-inset-bottom)); inset-inline-start: 12px } }
.fc-launch { display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border: 0; border-radius: 99px; cursor: pointer;
  background: linear-gradient(135deg, var(--ink), var(--teal)); color: #fff; font: 700 14.5px var(--body); box-shadow: 0 14px 30px -10px rgba(0,103,128,.75) }
.fschat[dir="rtl"] .fc-launch { padding: 6px 6px 6px 18px }
.fc-launch:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px }
.fc-av { position: relative; width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center }
.fc-av img { width: 34px; height: 34px }
.fc-av::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(27,179,207,.65) }
.fc-dot { position: absolute; bottom: 1px; inset-inline-end: 1px; width: 11px; height: 11px; border-radius: 50%; background: #2BD47A; border: 2px solid #fff }
.fc-qatt { height: 7px; background: url("../img/qatt-band.svg") repeat-x center / auto 100% }
.fc-teaser { position: absolute; inset-inline-start: 0; bottom: 66px; width: 300px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--line); border-radius: 18px; border-end-start-radius: 6px; overflow: hidden; box-shadow: 0 24px 50px -18px rgba(4,37,45,.5) }
.fc-t-in { padding: 12px 14px 14px }
.fc-t-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px }
.fc-t-top img { width: 30px; height: 30px; border-radius: 50%; background: var(--bg); padding: 3px }
.fc-t-top b { display: block; font-size: 13.5px }
.fc-t-top small { display: block; color: #187D54; font-size: 11.5px }
.fc-t-x { margin-inline-start: auto; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--bg); color: var(--muted); display: grid; place-items: center; cursor: pointer }
.fc-t-x svg, .fc-ib svg { width: 15px; height: 15px }
.fc-t-msg { font-size: 14px; line-height: 1.75; margin: 0 0 10px }
.fc-chips { display: flex; flex-wrap: wrap; gap: 6px }
.fc-chips button { font: 600 12.5px var(--body); padding: 6px 11px; border-radius: 99px; background: #EAF6F9; color: var(--teal); border: 0; cursor: pointer }
.fc-panel { position: absolute; inset-inline-start: 0; bottom: 66px; width: 384px; height: min(640px, calc(100vh - 110px)); background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 34px 70px -24px rgba(4,37,45,.55); border: 1px solid var(--line); display: flex; flex-direction: column }
.fc-panel[hidden], .fc-teaser[hidden] { display: none }
.fc-head { position: relative; display: flex; align-items: center; gap: 11px; padding: 14px 14px 16px; color: #fff;
  background: radial-gradient(circle at 85% -20%, #128AA3 0, transparent 55%), linear-gradient(160deg, #04252D, #0A3F4B) }
.fc-head .fc-qatt { position: absolute; inset-inline: 0; bottom: 0 }
.fc-hav { width: 42px; height: 42px; border-radius: 13px; background: #fff; display: grid; place-items: center; flex: none }
.fc-hav img { width: 34px; height: 34px }
.fc-hname b { display: block; font-size: 15.5px }
.fc-hname small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #A6D8E2 }
.fc-hname small i { width: 7px; height: 7px; border-radius: 50%; background: #2BD47A; display: inline-block }
.fc-acts { margin-inline-start: auto; display: flex; gap: 6px }
.fc-ib { width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer }
.fc-ib:hover { background: rgba(255,255,255,.24) }
.fc-body { position: relative; flex: 1; overflow-y: auto; padding: 14px 12px 10px; background: var(--bg); display: flex; flex-direction: column; gap: 9px; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(4, 37, 45, .18) transparent } /* شريط تمرير رفيع بلا أسهم */
.fc-body::-webkit-scrollbar { width: 6px }
.fc-body::-webkit-scrollbar-thumb { background: rgba(4, 37, 45, .18); border-radius: 6px }
.fc-body::-webkit-scrollbar-button { display: none }
.fc-row { display: flex; gap: 7px; align-items: flex-end; align-self: flex-start; max-width: 92% }
.fc-mini { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center }
.fc-mini img { width: 20px; height: 20px }
.fc-bot { background: #fff; border: 1px solid #E1EAEC; border-radius: 16px; border-end-start-radius: 5px; padding: 9px 12px; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; box-shadow: 0 4px 12px -8px rgba(4,37,45,.25) }
.fc-bot a { color: var(--teal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px }
.fc-me { align-self: flex-end; max-width: 82%; background: linear-gradient(135deg, var(--teal), #0A7F98); color: #fff; border-radius: 16px; border-end-end-radius: 5px; padding: 9px 12px; font-size: 14px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere }
.fc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-inline-start: 33px }
.fc-cards button { text-align: start; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; font: 500 12.5px/1.5 var(--body); color: var(--ink); cursor: pointer }
.fc-cards button:hover, .fc-chips button:hover { border-color: var(--teal); background: #F1FAFC }
.fc-cta { display: flex; flex-wrap: wrap; gap: 6px; margin-inline-start: 33px }
.fc-cta a { font: 700 12.5px var(--body); padding: 7px 12px; border-radius: 10px; text-decoration: none }
.fc-c-quote { background: var(--copper); color: #fff }
.fc-c-trial { background: #fff; border: 1px solid var(--teal); color: var(--teal) }
.fc-c-whatsapp { background: #1E9E56; color: #fff }
.fc-typing { display: flex; gap: 4px; background: #fff; border: 1px solid #E1EAEC; border-radius: 14px; padding: 11px 13px }
.fc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); opacity: .4 }
@media (prefers-reduced-motion: no-preference) {
  .fc-typing i { animation: fcDot 1s infinite }
  .fc-typing i:nth-child(2) { animation-delay: .15s }
  .fc-typing i:nth-child(3) { animation-delay: .3s }
  .fc-panel, .fc-teaser { animation: fcIn .22s ease-out }
}
@keyframes fcDot { 50% { opacity: 1; transform: translateY(-2px) } }
@keyframes fcIn { from { opacity: 0; transform: translateY(10px) } }
.fc-confirm { margin-inline-start: 33px; background: #fff; border: 1px solid #EBC9A9; border-radius: 14px; padding: 10px 12px; font-size: 13.5px; line-height: 1.7; box-shadow: 0 0 0 3px #FBF1E7 }
.fc-btns { display: flex; gap: 6px; margin-top: 8px }
.fc-btns button { font: 700 12.5px var(--body); padding: 6px 12px; border-radius: 10px; cursor: pointer }
.fc-yes { background: var(--teal); color: #fff; border: 0 }
.fc-no { background: #fff; border: 1px solid var(--line); color: var(--ink) }
.fc-note { align-self: center; font-size: 12.5px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; text-align: center }
.fc-ok { color: #187D54; border-color: #BFE3CE }
.fc-foot { padding: 9px 11px 8px; background: #fff; border-top: 1px solid var(--line); margin: 0 }
.fc-in { display: flex; gap: 8px; align-items: flex-end; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 5px 5px 5px 12px }
.fschat[dir="rtl"] .fc-in { padding: 5px 12px 5px 5px }
.fc-in:focus-within { border-color: var(--teal) }
.fc-in textarea { flex: 1; border: 0; background: none; resize: none; font: 400 14px/1.6 var(--body); color: var(--ink); padding: 7px 0; max-height: 120px; outline: 0 }
.fc-send { flex: none; width: 38px; height: 38px; border-radius: 11px; border: 0; background: var(--teal); color: #fff; display: grid; place-items: center; cursor: pointer }
.fc-send:disabled { opacity: .5; cursor: default }
.fc-send svg { width: 18px; height: 18px }
.fschat[dir="rtl"] .fc-send svg { transform: scaleX(-1) }
.fc-legal { font-size: 10.5px; color: var(--muted); margin-top: 6px; text-align: center }
.fc-legal a { color: var(--teal) }
.fc-cards button:focus-visible, .fc-chips button:focus-visible, .fc-ib:focus-visible, .fc-t-x:focus-visible, .fc-cta a:focus-visible, .fc-btns button:focus-visible, .fc-send:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px }
@media (max-width: 639.98px) {
  .fschat.fc-open .fc-launch { display: none }
  .fc-panel { position: fixed; inset: 0; width: auto; height: 100dvh; border-radius: 0; border: 0 }
  .fc-cards, .fc-cta, .fc-confirm { margin-inline-start: 0 }
}
@media print { .fschat { display: none !important } }
/* لوحة الإدارة: نص محادثة في «محادثات الزوار» (Admin/Chats.razor) */
.chat-log { display: flex; flex-direction: column; gap: 8px }
.chat-log > div { max-width: 80%; padding: 8px 12px; border-radius: 12px; line-height: 1.7; white-space: pre-line }
.chat-log small { display: block; color: var(--muted); font-size: 11.5px }
.chat-log .cl-v { align-self: flex-start; background: #E6F3F6 }
.chat-log .cl-a { align-self: flex-end; background: #fff; border: 1px solid var(--line) }

/* «لماذا الشاشة الكاملة؟» بجانب «نظرة عامة» في ذيل قائمة النظام (2026-10-31) */
.mega .mf .mf-links { display: inline-flex; gap: 16px; flex-wrap: wrap }

/* صفحة «لماذا الشاشة الكاملة؟»: الأقسام بست بطاقات في ثلاثة أعمدة (صفّان كاملان بدل 4+2) */
@media (min-width: 1100px) { .aig.a3 { grid-template-columns: repeat(3, 1fr) } }

/* «اقترح لي النظام» (/recommend، 2026-10-31): النموذج ثم الوحدات المقترحة مرتبة، لكل وحدة نصها وصورة شاشتها بجانبه من 900px */
.tbody .wrap.rec { display: block; max-width: 1040px }
.rec-form textarea { min-height: 110px }
.rec-form .btn { justify-self: start }
.rec-privacy { margin: 0; font-size: 13px }
.rec-res { margin-top: 26px }
.rec-sum { font-size: 17px; color: var(--ink); margin: 0 0 6px }
.rec-res h2 { margin: 0 0 14px }
.rec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: rec }
.rec-item { counter-increment: rec; display: grid; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px }
.rec-txt { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-content: start }
.rec-txt .ic { grid-row: span 3 }
.rec-txt h3 { margin: 0 0 4px; font-size: 19px }
.rec-txt h3 a { color: var(--ink); text-decoration: none }
.rec-txt h3::before { content: counter(rec) ". "; color: var(--teal) }
.rec-txt p { margin: 0 0 8px }
.rec-item .erp-shot { margin: 0 }
@media (min-width: 900px) { .rec-item { grid-template-columns: 1fr 1.1fr; align-items: start } }
.rec-growth { margin-top: 14px }
.rec-growth h3 { margin-top: 0 }
.rec-growth ul { margin: 0 0 10px; padding-inline-start: 20px }
.rec-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 10px }

/* لوحتا الجوال: القائمة والأدوات (طلب المدير 2026-10-31). الشريط السفلي فوق الخلفية وهي مفتوحة، فزرها نفسه يغلقها (أيقونته ✕)،
   ورأس ثابت بزر إغلاق داخل اللوحة. site.js setSheet */
html.sheet-open .tabbar { z-index: 75 }
.tabbar .ic-open, .tabbar .ic-close { display: contents }
.tabbar .ic-close, .tabbar [aria-expanded=true] .ic-open { display: none }
.tabbar [aria-expanded=true] .ic-close { display: contents }
.tabbar [aria-expanded=true] { color: var(--teal) }
.tabbar .tl2 { text-align: center; line-height: 1.15; max-width: 100%; padding-inline: 2px }
.menu-top { position: sticky; top: -16px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -16px -18px 10px; padding: 12px 18px 10px; background: #fff; border-bottom: 1px solid var(--line); border-radius: 26px 26px 0 0 }
.menu-top b { font: 700 16px var(--menu); color: var(--ink) }
.menu-x { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--bg); color: var(--ink); cursor: pointer }
.menu-x svg { width: 20px; height: 20px }
.menu h5 .nfree { display: inline-block; margin-inline-start: 6px; padding: 0 8px; border-radius: 999px; background: #187D54; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.6; vertical-align: middle }
.menu .menu-all { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--line); text-align: center; font: 600 14px var(--menu); color: var(--teal) }
/* زر المساعد ورسالة الترحيب لا يغطيان اللوحة وهي مفتوحة */
html.sheet-open #fs-chat { display: none }