/* ═══════════════════════════════════════════════════════
   الثيم الداكن الجديد — خلفية داكنة دافئة + أخضر نعناعي
   مستوحى من التصميم الجديد (variant-balanced dark)
   
   ⚠️ لا تعد للألوان القديمة (أسود بارد + أخضر غامق)
   ═══════════════════════════════════════════════════════ */
:root {
  --bg:    #131816;
  --s1:    #181f1c;
  --s2:    #1e2723;
  --b1:    #2a322e;
  --b2:    #323d38;
  --t1:    #ede7d6;
  --t2:    #c8c6bb;
  --t3:    #8a8d85;
  --acc:   #2a4a3c;
  --acc2:  #1f3a2e;
  --hi:    #6ec79f;
  --hi2:   #5ab28a;
  --neon:  #6ec79f;
  --am:    #d8b97f;
  --shimmer: #6ec79f;   /* لون لمعة الأزرار المحايدة — نعناعي في الداكن (مطابق للديمو) */
  --bl:    #6ec79f;
  --rd:    #E05555;
  --pur:   #A07AE8;
  --glow:  rgba(110,199,159,.10);
  --logo-color: #6ec79f;
  /* ═══ سلّم الظلال الموحّد (v45) — مستويات ارتفاع. القيم = أكثر الظلال تكراراً
     في الموقع، فلا تغيير بصري عند الربط. ⚠️ لا تُستخدم لحلقات التركيز (0 0 0)
     ولا inset — تلك تبقى مستقلة. */
  --shadow-1: 0 1px 4px rgba(0,0,0,.3);
  --shadow-2: 0 3px 8px rgba(0,0,0,.12);
  --shadow-3: 0 4px 12px rgba(0,0,0,.2);
  --shadow-4: 0 8px 24px rgba(0,0,0,.18);
  --shadow-5: 0 8px 32px rgba(0,0,0,.4);
}

/* ثيم neutral محذوف — قرار نهائي 27 مايو 2026 */
#authScreen {
  background: linear-gradient(
    135deg,
    #131816 0%,
    #181f1c 30%,
    #1e2723 60%,
    #131816 100%
  );
}
/* ═══════════════════════════════════════════════════════
   ألوان البنوك — الثيم الداكن
   محدّثة لتتوافق مع الخلفية الداكنة الدافئة الجديدة
   ⚠️ لا تحذف data-bank — يستخدمها app.js و switchBank()
   ═══════════════════════════════════════════════════════ */
/* الأهلي — لا يحتاج block منفصل (الافتراضي أصلاً أخضر من :root) */

/* ⚠️ v40: حُذفت --bg/--s1/--s2/--b1/--b2/--t1/--t2/--t3 من كل block بنك.
   الخلفيات والنصوص ترث من :root الدافئ الموحّد — فقط لون البنك يتغيّر.
   لا تُعد لإضافة متغيرات الخلفية هنا — هذا مقصود (توحيد هوية الثيم الداكن). */
/* ⚠️ v41: لون البنك الأصلي نُقل إلى --bank-strip فقط (يغذّي الشريط الرفيع).
   --hi/--acc كانت تلوّن الزر والحدود وزر احسب — أُلغيت لتوحيد الهوية.
   هذه القواعد بلا قيد ثيم: في الثيم الرسمي يطغى عليها الأخضر من سطر 1499+،
   وفي الثيم الداكن يطغى عليها قسم :not(formal) أسفل الملف. لا تُعد ألوان البنوك هنا. */
[data-bank="rajhi"] {
  --bank-strip: #1A56C4;
  --logo-color: #6080d8;
  --am: #d8b97f;
}
[data-bank="bilad"] {
  --bank-strip: #8a1020;
  --logo-color: #c04050;
  --am: #d8b97f;
}
[data-bank="inma"] {
  --bank-strip: #1a4a8a;
  --logo-color: #5090d8;
  --am: #d8b97f;
}
[data-bank="fransi"] {
  --bank-strip: #0a6070;
  --logo-color: #40a0b0;
  --am: #d8b97f;
}
[data-bank="bidaya"] {
  --bank-strip: #7a1060;
  --logo-color: #c040c0;
  --am: #d8b97f;
}
[data-bank="saib"] {
  --bank-strip: #0B7A6E;
  --logo-color: #3aa090;
  --am: #d8b97f;
}
[data-bank="anb"] {
  --bank-strip: #6030B8;
  --logo-color: #8060c8;
  --rd: #C84060;
  /* ⚠️ --am مُعرَّف هنا لمنع وراثة الذهبي الافتراضي */
  --am: #a080d0;
}

/* =================== 2. شاشة تسجيل الدخول =================== */
#authScreen {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.auth-card {
  background:var(--s1); border:1px solid var(--b2);
  border-radius:20px; padding:36px 28px;
  width:100%; max-width:380px;
}
.auth-logo { text-align:center; margin-bottom:24px; }
.auth-logo svg { width:48px; height:48px; }
.auth-logo-name { font-size:20px; font-weight:600; color:var(--t1); margin-top:8px; }
.auth-logo-sub  { font-size:12px; color:var(--t3); margin-top:3px; }
.auth-tabs { display:flex; background:var(--bg); border:1px solid var(--b1); border-radius:10px; padding:3px; gap:3px; margin-bottom:20px; }
.auth-tab { flex:1; padding:8px; border-radius:7px; text-align:center; cursor:pointer; font-size:13px; border:none; background:transparent; color:var(--t3); transition:.15s; font-family:inherit; }
.auth-tab.on { background:var(--s2); color:var(--t1); }
.auth-fld { margin-bottom:14px; }
.auth-fld label { display:block; font-size:11px; color:var(--t3); margin-bottom:5px; }
.auth-fld input { width:100%; background:var(--bg); border:1px solid var(--b1); border-radius:9px; padding:10px 13px; color:var(--t1); font-family:inherit; font-size:14px; outline:none; direction:ltr; transition:.15s; }
.auth-fld input:focus { border-color:var(--hi); box-shadow:0 0 0 3px var(--glow); }
.auth-btn { width:100%; padding:12px; background:linear-gradient(135deg,var(--acc2),var(--acc),var(--hi2)); border:none; border-radius:10px; color:#fff; font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; margin-top:6px; }
.auth-sep { display:flex; align-items:center; gap:10px; margin:14px 0; }
.auth-sep div { flex:1; height:1px; background:var(--b2); }
.auth-sep span { font-size:11px; color:var(--t3); }
.google-btn { width:100%; padding:10px; background:var(--bg); border:1px solid var(--b2); border-radius:10px; color:var(--t2); font-family:inherit; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
.google-btn:hover { border-color:var(--hi); color:var(--t1); }
.auth-msg { font-size:12px; padding:9px 12px; border-radius:8px; text-align:center; margin-bottom:12px; display:none; }
#appScreen { display:block; }

/* loading overlay */
.calc-loading {
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  z-index:999; backdrop-filter:blur(4px);
}
.calc-loading-inner { text-align:center; }
.calc-loading-spinner {
  width:40px; height:40px; border:3px solid var(--b2);
  border-top-color:var(--hi); border-radius:50%;
  animation:spin .8s linear infinite; margin:0 auto 12px;
}
@keyframes spin { to{ transform:rotate(360deg); } }
.calc-loading-txt { font-size:14px; color:var(--t2); }

/* =================== LOGO =================== */
/* شعار العدسة القديم أُزيل (v41) — استُبدل بالرمز الجديد (العين المعمارية).
   كلاسات logo-ring-* / logo-symbol-* / logo-svg / logo-text-* حُذفت لأنها صارت بلا استخدام. */
/* الرمز الجديد في مربع الدخول — يأخذ لون الأكسنت: #1f4d3c فاتح · #6ec79f داكن (نعناعي) */
.nz-auth-mark { color: var(--hi); }
* { margin:0; padding:0; box-sizing:border-box; }
body {
  /* ⚠️ الخط الجديد: Noto Sans Arabic — لا تعد لـ Rubik */
  font-family: 'Noto Sans Arabic', system-ui, sans-serif;
  background: var(--bg);
  color: var(--t1);
  min-height: 100vh;
  direction: rtl;
  transition: background .5s, color .5s;
}
body::before {
  content:'';
  position:fixed; inset:0;
  background: radial-gradient(ellipse 55% 40% at 15% 0%, var(--glow) 0%, transparent 60%);
  pointer-events:none;
  transition: background .5s;
  z-index:0;
}
.wrap { max-width:1100px; margin:0 auto; padding:20px 18px; position:relative; z-index:1; }

/* =================== TOPBAR ===================
   الهوية الجديدة: خط فاصل سفلي نظيف، بدون خلفية مميزة
   ⚠️ لا تغير بنية الـ HTML — فقط CSS
   ============================================ */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:16px;
  margin-bottom:20px;
  border-bottom:1px solid var(--b1);
  transition: border-color .5s;
}
.brand { display:flex; align-items:center; gap:12px; }
.brand-icon {
  width:36px; height:36px; border-radius:10px;
  background: var(--hi);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; color:#fff;
  transition: background .5s;
  flex-shrink:0;
  letter-spacing:-.5px;
}
.brand-name { font-size:18px; font-weight:700; color:var(--t1); letter-spacing:-.3px; }
.brand-sub  { font-size:11px; color:var(--t3); margin-top:2px; }
.user-pill {
  display:flex; align-items:center; gap:8px;
  background:var(--s1); border:1px solid var(--b1);
  border-radius:6px; padding:4px 12px 4px 5px;
  transition: border-color .5s, background .5s;
}
.avatar {
  width:26px; height:26px; border-radius:50%;
  background: linear-gradient(135deg, var(--acc), var(--hi));
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; color:#fff;
}
.user-name { font-size:12px; color:var(--t2); }

/* ── User Menu ── */
.user-name-topbar {
  font-size:12px; color:var(--t2); font-weight:500;
}
.user-menu-wrap {
  position:relative;
}
.user-avatar-wrap {
  display:flex; align-items:center; gap:6px;
  cursor:pointer; padding:6px 10px 6px 8px;
  border-radius:999px;
  border:1.5px solid var(--b2);
  background:var(--s2);
  transition: border-color .2s, background .2s;
}
.user-avatar-wrap:hover { border-color:var(--hi); background:var(--s1); }
.user-menu-arrow {
  color:var(--t3); transition: transform .2s;
  flex-shrink:0;
}
.avatar {
  width:26px; height:26px; border-radius:50%;
  background: var(--hi);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; color:#fff;
}
/* Dropdown */
.user-dropdown {
  display:none;
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:200px;
  background:var(--s1); border:1px solid var(--b2);
  border-radius:12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index:2000;
  overflow:hidden;
  animation: ud-in .18s cubic-bezier(.22,1,.36,1);
}
.user-dropdown.open { display:block; }
@keyframes ud-in {
  from { opacity:0; transform:translateY(-6px) scale(.97); }
  to   { opacity:1; transform:translateY(0)   scale(1);    }
}
.ud-header {
  display:flex; align-items:center; gap:10px;
  padding:14px 14px 10px;
}
.ud-avatar {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg, var(--acc), var(--hi));
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; color:#fff;
}
.ud-info { min-width:0; }
.ud-name  { font-size:13px; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ud-email { font-size:11px; color:var(--t3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ud-divider { height:1px; background:var(--b1); margin:4px 0; }
.ud-item {
  display:flex; align-items:center; gap:8px;
  width:100%; padding:9px 14px;
  background:none; border:none; cursor:pointer;
  font-size:13px; color:var(--t2); text-align:right;
  transition: background .15s, color .15s;
  font-family:inherit;
}
.ud-item:hover { background:var(--s2); color:var(--t1); }
.ud-item--logout { color:var(--err,#c0392b); }
.ud-item--logout:hover { background:rgba(192,57,43,.08); color:var(--err,#c0392b); }
/* Bottom Sheet — جوال */
.user-sheet-backdrop {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.45); z-index:2000;
  opacity:0; transition: opacity .28s;
}
.user-sheet-backdrop.open { opacity:1; }
.user-sheet {
  display:none; position:fixed; bottom:0; left:0; right:0;
  background:var(--s1); border-radius:18px 18px 0 0;
  /* ⚠️ padding-bottom يشمل ارتفاع bottom-nav (64px) حتى لا يُغطى زر الخروج */
  z-index:2001; padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%); transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.user-sheet.open { transform:translateY(0); }
.user-sheet-handle {
  width:36px; height:4px; border-radius:2px;
  background:var(--b2); margin:10px auto 6px;
}
.user-sheet-header {
  display:flex; align-items:center; gap:12px;
  padding:12px 20px 10px;
  border-bottom:1px solid var(--b1);
}
.us-avatar {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg, var(--acc), var(--hi));
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:600; color:#fff;
}
.us-info { min-width:0; }
.us-name  { font-size:15px; font-weight:600; color:var(--t1); }
.us-email { font-size:12px; color:var(--t3); margin-top:2px; }
.user-sheet-body { padding:8px 0 12px; }
.us-item {
  display:flex; align-items:center; gap:14px;
  width:100%; padding:13px 20px;
  background:none; border:none; cursor:pointer;
  text-align:right; transition: background .15s;
  font-family:inherit; color:var(--t1);
}
.us-item:hover { background:var(--s2); }
.us-item svg { flex-shrink:0; color:var(--t3); }
.us-item-title { font-size:14px; font-weight:500; color:var(--t1); }
.us-item-sub   { font-size:11px; color:var(--t3); margin-top:2px; }
.us-item--logout .us-item-title { color:var(--err,#c0392b); }
.us-item--logout svg { color:var(--err,#c0392b); }

/* إخفاء زر الخروج والأدمن للزوار */
[data-auth="guest"] .logout-btn,
[data-auth="guest"] #adminBtn { display:none !important; }

/* =================== BANKS =================== */
.banks-wrap { margin-bottom:22px; }
.banks-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
}
.banks-grid-row2 {
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:6px;
}
.bank-btn {
  padding:9px 6px 7px; border-radius:2px;
  text-align:center; cursor:pointer;
  font-size:13px; font-weight:500;
  transition: all .18s;
  border:1px solid transparent;
  background:var(--s1); color:var(--t3);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  align-items:center; gap:2px;
}
/* شريط سفلي أسفل الزر النشط (v31).
   ⚠️ قرار المالك (دورة 8): أُزيل تمييز لون البنك نهائياً — الشريط يأخذ
   لون الثيم --hi فقط في كلا الثيمين (لم يعد يقرأ --bank-strip). */
.bank-btn::before {
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:3px; background:var(--hi); opacity:0; transition:opacity .18s; z-index:2;
}
.bank-btn.active::before { opacity:1; }
/* اسم الجهة */
.bank-btn .btn-name, .bn-btn .btn-name {
  display:block; line-height:1;
}
/* نوع الجهة — بنك / شركة */
.bank-btn .btn-type, .bn-btn .btn-type {
  display:block;
  font-size:9px; font-weight:400;
  color:var(--t3); opacity:.7;
  line-height:1; letter-spacing:.2px;
}
.bank-btn.active .btn-type, .bn-btn.active .btn-type {
  opacity:1; color:var(--t2);
}
.bank-btn::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, var(--acc), var(--hi));
  opacity:0; transition: opacity .25s;
}
.bank-btn:hover { color:var(--t2); background:var(--s2); }
.bank-btn.active {
  color:var(--t1);
  border-color: var(--hi);
  box-shadow: 0 0 0 1px var(--hi) inset,
              0 0 20px var(--glow),
              0 4px 12px rgba(0,0,0,.3);
  font-weight:600;
  transform: translateY(-1px);
}
.bank-btn.active::after { opacity:.12; }

/* ANB — تدرج أزرق+أحمر — ⚠️ v41: قُيّد بالثيم الداكن فقط (كان بلا قيد فيطغى على الرسمي) */
body:not([data-theme="formal"]) [data-bank="anb"] .bank-btn[data-bank="anb"]::after {
  background: linear-gradient(135deg, #2C1244, #7040C8, #C84060);
}
body:not([data-theme="formal"]) [data-bank="anb"] .bank-btn[data-bank="anb"].active {
  border-color: #9050D8;
  box-shadow: 0 0 0 1px #9050D8 inset,
              0 0 20px rgba(112,64,200,.18),
              0 0 20px rgba(200,64,96,.08),
              0 4px 12px rgba(0,0,0,.3);
}
body:not([data-theme="formal"]) [data-bank="anb"] .brand-icon,
body:not([data-theme="formal"]) [data-bank="anb"] .calc-btn {
  background: linear-gradient(135deg, #2C1244, #7040C8, #C84060) !important;
}
body:not([data-theme="formal"]) [data-bank="anb"] .bn-btn[data-bank="anb"].active {
  border-color: #9050D8;
  box-shadow: 0 0 0 1px #9050D8 inset,
              0 0 20px rgba(112,64,200,.18),
              0 0 12px rgba(200,64,96,.1),
              0 4px 12px rgba(0,0,0,.3);
}

/* =================== MAIN LAYOUT =================== */
.main { display:grid; grid-template-columns:1fr 390px; gap:14px; align-items:start; }

/* =================== INPUT PANEL =================== */
.input-panel {
  display: flex; flex-direction: column; gap: 6px;
}

/* مربعات الأقسام */
.sec-box {
  border-radius:13px; padding:12px 14px;
  border:1px solid var(--b1);
  transition: background .5s, border-color .5s;
}
.sec-box-1 { background: var(--s1); }
/* مربع القطاع يطفو فوق المربعات اللاحقة (الراتب) — يسمح لقائمة الرتب milDropdown
   بالظهور فوق خانات الراتب بدل أن تُحجب خلفها. z-index:20 أعلى من خانات الراتب
   المرفوعة (z-index:1) في الثيم الرسمي. ⚠️ لا تحذف — يحل تداخل القائمة المنسدلة */
.sec-box-1 { position: relative; z-index: 20; }
.sec-box-2 { background: var(--s2); }
.sec-box-3 { background: color-mix(in srgb, var(--s1) 60%, var(--s2)); }
.sec-box-4 { background: var(--s1); }

/* =================== section heading مرقّم ===================
   الشكل الجديد: رقم mono صغير + عنوان + شرح
   يُستخدم مع .sec-num (الرقم) و .sec-title و .sec-sub
   ⚠️ card-title-bar تبقى للتوافق مع الكود القديم
   ============================================================ */
.sec-heading {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0 12px;
  align-items:start;
  margin-bottom:14px;
}
.sec-num {
  /* v46: مربّع أخضر بدل رقم رمادي باهت — لون من متغيّر الثيم */
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:7px;
  background:var(--acc); color:#fff;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:.5px; line-height:1;
  font-weight:600; padding:0;
}
.sec-title {
  font-size:14px; font-weight:700; color:var(--t1);
  margin:0 0 3px; letter-spacing:-.1px;
}
.sec-sub {
  font-size:11px; color:var(--t3); margin:0;
  line-height:1.5;
}

/* card title with colored bar — تبقى للتوافق */
.card-title-bar {
  font-size:14px; font-weight:600; color:var(--t1);
  margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.card-title-bar::before {
  content:'';
  display:block; width:3px; height:16px;
  border-radius:2px;
  background: var(--hi);
  transition: background .5s;
  flex-shrink:0;
}

/* ---- SECTORS — Segmented Control ----
   ⚠️ قاعدة ثابتة: لا تحذف position:relative من .military-btn
   لأن .mil-dropdown يعتمد عليها للموضع المطلق
   ⚠️ قاعدة ثابتة: sector !== 'retired' في selSector — لا تحذفه
   =========================================== */
.sectors {
  display:flex;
  border-radius:0;
  border:1.5px solid var(--b1);
  /* ⚠️ overflow:visible ضروري لإظهار mil-dropdown — لا تغيّر */
  overflow:visible;
  margin-bottom:10px;
  background:var(--bg);
  transition: border-color .3s, background .3s;
}
.sec-btn {
  flex:1; padding:9px 6px;
  border-radius:0; cursor:pointer;
  font-size:12px; font-weight:500;
  border:none;
  border-left:1px solid var(--b1);
  background: var(--bp-bg-3); color:var(--t3);
  text-align:center;
  transition: background .15s, color .15s, border-color .3s;
  font-family:inherit;
  position:relative; /* للمعة السفلية ::after — military-btn له relative ثابت أصلاً */
}
/* ⚠️ لا تضِف overflow:hidden هنا — يقصّ mil-dropdown. شريط اللمعة لا يحتاجه. */
.sec-btn.nz-pending::after {
  content:''; position:absolute; inset-inline:0; bottom:0; height:2px;
  pointer-events:none; opacity:.85;
  background-image: linear-gradient(90deg, transparent 0%, transparent 40%, var(--shimmer) 50%, transparent 60%, transparent 100%);
  background-size:250% 100%; background-position:150% 0;
  animation: nz-pending-shimmer 2.8s ease-in-out infinite;
}
/* أول زر — بدون حد يسار */
.sec-btn:first-child { border-left:none; }
.sec-btn.active {
  background: var(--bp-emerald);
  color: #fcfaf5 !important;
  font-weight:600;
}
.sec-btn:hover:not(.active){ background:var(--s2); color:var(--t1); }

/* military label marquee */
.mil-label-wrap {
  overflow:hidden; flex:1;
  display:flex; align-items:center; justify-content:center;
}
.mil-label-inner {
  white-space:nowrap;
  display:inline-block;
}
.mil-label-inner.scrolling {
  animation: marquee 3s linear infinite;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(0); }
  70%  { transform: translateX(-40%); }
  100% { transform: translateX(0); }
}
.military-btn {
  /* ⚠️ position:relative ثابت — mil-dropdown يعتمد عليه */
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:4px;
  flex:1; padding:9px 6px;
  border-left:1px solid var(--b1);
  border-radius:0; cursor:pointer;
  font-size:12px; font-weight:500;
  border-top:none; border-bottom:none; border-right:none;
  background: var(--bp-bg-3); color:var(--t3);
  text-align:center;
  transition: background .15s, color .15s;
  font-family:inherit;
}
.military-btn.active {
  background: var(--bp-emerald);
  /* ⚠️ v40: لون النص يُطغى في الداكن بـ body:not([data-theme="formal"]) أسفل الملف */
  color: #fcfaf5 !important;
  font-weight:600;
}
.military-btn:hover:not(.active){ background:var(--s2); color:var(--t1); }
.mil-arrow { font-size:13px; transition:.2s; flex-shrink:0; }
.military-btn.open .mil-arrow { transform:rotate(180deg); }
.mil-dropdown {
  display:none;
  position:absolute; top:calc(100% + 6px); right:0; left:0;
  background:var(--s2); border:1px solid var(--b2);
  border-radius:6px; overflow:hidden;
  z-index:100; min-width:160px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.military-btn.open .mil-dropdown { display:block; }
.mil-opt {
  padding:9px 13px; font-size:12px; color:var(--t2);
  cursor:pointer; transition:.1s; text-align:right;
  border-bottom:1px solid var(--b1);
}
.mil-opt:last-child { border-bottom:none; }
.mil-opt:hover { background:var(--b1); color:var(--t1); }
.mil-opt.active { color:var(--hi); background:color-mix(in srgb,var(--hi) 8%,transparent); }

/* ---- SALARY TABS ---- */
.sal-tabs {
  display:flex; background:var(--bg);
  border:1px solid var(--b1); border-radius:10px;
  padding:3px; gap:3px; margin-bottom:12px;
}
.sal-tab {
  flex:1; padding:7px; border-radius:7px; text-align:center;
  cursor:pointer; font-size:12px; border:none;
  background:transparent; color:var(--t3);
  transition:.15s; font-family:inherit;
}
.sal-tab.active {
  background:var(--s2);
  color:var(--t1);
  box-shadow: var(--shadow-1);
}

/* ---- DATES (تخطيط الشبكة فقط) ---- */
/* ⚠️ تنسيق التبويب والخانات موحّد في بلوك "التواريخ — التصميم الموحّد (v28)" أسفل الملف */
/* الحقول من نوع التاريخ تستخدم nz-date-row — وليس date-inputs القديم (كود ميت أُزيل) */
.dates-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:14px; }
.date-field { display:flex; flex-direction:column; gap:7px; }
.date-field label { font-size:10px; color:var(--t3); letter-spacing:.4px; display:block; margin-bottom:5px; }

/* ---- PRODUCT ---- */
.prod-tabs {
  display:flex; background:var(--bg); border:1px solid var(--b1);
  border-radius:10px; padding:3px; gap:3px; margin-bottom:12px;
}
.prod-tab {
  flex:1; padding:8px; border-radius:7px; text-align:center;
  cursor:pointer; font-size:12px; border:none;
  background:transparent; color:var(--t3);
  transition:.15s; font-family:inherit;
}
.prod-tab.active { background:var(--s2); color:var(--t1); box-shadow:var(--shadow-1); }
/* ⚠️ زر منتج معطّل (عند وجود التزام) — مرئي لكن باهت وغير قابل للنقر.
   يوصل أن المنتج موجود لكن لا يُختار مع التزام (قرار المالك v47). */
.prod-tab-disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* existing personal */
.existing-box {
  background: color-mix(in srgb, var(--pur) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--pur) 18%, transparent);
  border-radius:10px; padding:12px;
  display:none; grid-template-columns:1fr 1fr; gap:8px;
  margin-bottom:12px;
}
.existing-box.open { display:grid; }
.existing-box label { font-size:10px; color: color-mix(in srgb, var(--pur) 80%, white); margin-bottom:4px; display:block; }
.existing-box input {
  width:100%; background:var(--bg);
  border:1px solid color-mix(in srgb, var(--pur) 25%, transparent);
  border-radius:6px; padding:8px 10px; color:var(--t1);
  font-family:inherit; font-size:13px; outline:none; text-align:right;
}

/* ---- BOTTOM CONTROLS ---- */
.controls { display:flex; flex-direction:column; gap:10px; margin-top:14px; }

.ctrl-row { display:flex; align-items:center; justify-content:space-between; }
.ctrl-label { font-size:12px; color:var(--t2); }

/* support options */
.sup-opts { display:flex; gap:4px; }
.sup-btn {
  padding:5px 11px; border-radius:7px; font-size:11px;
  cursor:pointer; border:1px solid var(--b1);
  background:transparent; color:var(--t3);
  font-family:inherit; transition:.15s;
}
.sup-btn.nsub.active {
  background: color-mix(in srgb, var(--t2) 12%, transparent);
  border-color: var(--t2);
  color: var(--t2);
}
.sup-btn.active {
  background: color-mix(in srgb, var(--am) 10%, transparent);
  border-color: color-mix(in srgb, var(--am) 35%, transparent);
  color:var(--am);
}

/* tenure options */
.ten-opts { display:flex; gap:4px; }
.ten-btn {
  padding:5px 11px; border-radius:7px; font-size:11px;
  cursor:pointer; border:1px solid var(--b1);
  background:transparent; color:var(--t3);
  font-family:inherit; transition:.15s;
}
.ten-btn.active {
  background: color-mix(in srgb, var(--bl) 10%, transparent);
  border-color: color-mix(in srgb, var(--bl) 35%, transparent);
  color:var(--bl);
}
/* etizaz toggle */
.toggle {
  width:40px; height:22px; background:var(--b2);
  border-radius:11px; position:relative; cursor:pointer; transition:.3s;
  flex-shrink:0;
}
.toggle.on { background:var(--acc); }
.toggle::after {
  content:''; position:absolute;
  width:16px; height:16px; background:#fff;
  border-radius:50%; top:3px; right:3px;
  transition:.3s; box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.toggle.on::after { transform:translateX(-18px); }

/* ---- CALC BTN ---- */
.calc-btn {
  width:100%; padding:13px; border-radius:11px;
  background: linear-gradient(135deg, var(--acc2), var(--acc), var(--hi2));
  border:none; color:#fff; font-family:inherit;
  font-size:15px; font-weight:600; cursor:pointer;
  transition: all .2s; margin-top:16px;
  box-shadow: 0 4px 20px var(--glow);
  position:relative; overflow:hidden;
}
.calc-btn::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,.08));
  pointer-events:none;
}
.calc-btn:hover { transform:translateY(-1px); box-shadow:0 6px 28px var(--glow); }
.calc-btn:active { transform:translateY(0); }

/* =================== RESULT PANEL ===================
   الهيكل الجديد:
   .res-panel
     .res-panel-head   — عنوان + chips
     .res-hero         — الرقم الكبير + donut
       .res-hero-main  — العمود الرئيسي
       .res-hero-side  — الدائرة
     .res-stats        — 3 كروت أفقية
     .res-support      — كرت الدعم (إن وجد)
     .res-phases-wrap  — الأقساط
   ⚠️ الـ IDs الداخلية لا تتغير: od-grand, od-re, supStatVal, perStatVal
   ===================================================== */

.res-panel { display:flex; flex-direction:column; gap:12px; }

/* رأس قسم النتائج */
.res-panel-head {
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:12px;
  margin-bottom:4px;
}
.res-panel-eyebrow {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:10px; letter-spacing:2px; color:var(--t3);
  text-transform:uppercase; margin-bottom:4px; display:block;
}
.res-panel-title {
  font-size:clamp(16px,2vw,20px); font-weight:700;
  color:var(--t1); margin:0; letter-spacing:-.3px;
  line-height:1.2;
}
.res-chips { display:flex; gap:6px; flex-wrap:wrap; padding-top:4px; }
.res-chip {
  font-size:10px; padding:4px 10px; border-radius:999px;
  background:var(--s2); border:1px solid var(--b1);
  color:var(--t3); white-space:nowrap;
  transition: background .3s, border-color .3s;
}

/* Hero card — الكرت الرئيسي */
.res-card {
  background:var(--s1); border:1px solid var(--b1);
  border-radius:14px; padding:24px 20px;
  position:relative; overflow:hidden;
  transition: background .5s, border-color .5s;
}
/* الشريط الجانبي الأخضر */
.res-card::before {
  content:''; position:absolute;
  right:0; top:0; bottom:0;
  width:4px;
  background: linear-gradient(180deg, var(--hi) 0%, color-mix(in srgb,var(--hi) 60%,transparent) 100%);
  border-radius:0 14px 14px 0;
}
/* تدرج خلفي خفيف */
.res-card::after {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 60% at 20% 0%, var(--glow) 0%, transparent 60%);
  pointer-events:none; z-index:0;
}
.res-card > * { position:relative; z-index:1; }

/* داخل الـ hero: رقم يسار، دائرة يمين */
.res-hero {
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px; align-items:center;
  margin-bottom:16px;
}
.res-hero-main { display:flex; flex-direction:column; gap:10px; }

/* الرقم الكبير */
.res-hero-number {
  display:flex; align-items:baseline; gap:10px;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
}
.res-hero-amount {
  font-size:clamp(36px,5vw,58px);
  font-weight:500; color:var(--hi);
  line-height:.95; letter-spacing:-2px;
}
.res-hero-currency {
  font-size:13px; color:var(--t3);
  font-family:'Noto Sans Arabic', system-ui, sans-serif;
  font-weight:500;
}

/* الشريط الذهبي */
.res-hero-rule {
  width:48px; height:2px; border-radius:2px;
  background:var(--am); opacity:.8;
}

/* تفاصيل: مدة + هامش + قسط */
.res-hero-tags {
  display:flex; align-items:center; gap:8px;
  flex-wrap:wrap; font-size:12px; color:var(--t3);
}
.res-hero-tags b {
  color:var(--t1);
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-weight:600;
}
.res-hero-dot { color:var(--b2); }

/* الاسم والمنتج — نص صغير فوق الرقم */
.res-tag-main {
  font-size:12px; font-weight:600; color:var(--t2); margin-bottom:2px;
}
.res-tag-sub {
  font-size:11px; color:var(--t3);
}

/* =================== DONUT GAUGE =================== */
.res-gauge { position:relative; width:110px; height:110px; flex-shrink:0; }
.res-gauge-center {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px;
}
.res-gauge-pct {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:20px; font-weight:600; color:var(--hi);
  line-height:1;
}
.res-gauge-meta { font-size:9px; color:var(--t3); }
.res-gauge-label {
  font-size:10px; color:var(--t3); text-align:center;
  margin-top:6px; line-height:1.4;
}

/* =================== STATS (3 كروت) =================== */
/* ⚠️ هوية ديزاين كلود (variant-balanced) — مطبّقة عبر tokens الموقع
   (--s1 = bp-bg-3، --b1 = bp-line، --t3 = bp-ink-3، --am = bp-gold/accent)
   لا تحوّلها لقيم ثابتة — يكسر تبدّل الثيمين وألوان البنوك */
.stats-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:12px; margin-bottom:0;
}
.stat {
  background:var(--s1); border:1px solid var(--b1);
  border-radius:8px; padding:18px;
  display:flex; flex-direction:column; gap:6px;
  transition: background .5s, border-color .5s;
}
.stat.is-accent {
  border-color:var(--am);
  background:color-mix(in srgb,var(--am) 7%,var(--s1));
}
.stat-lbl {
  font-size:11px; color:var(--t3);
  letter-spacing:.3px; text-transform:uppercase;
}
.stat-val {
  font-size:clamp(13px,1.5vw,16px); font-weight:600;
  min-height:20px; display:flex; align-items:baseline; gap:3px;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
}
.stat-unit { font-size:10px; color:var(--t3); font-weight:400; font-family:inherit; }

/* =================== SUPPORT CARD =================== */
.res-support {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  background:color-mix(in srgb,var(--am) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--am) 20%,transparent);
  border-radius:10px;
}
.res-support-icon {
  width:36px; height:36px; flex-shrink:0;
  background:var(--hi); color:#fff;
  display:grid; place-items:center;
  border-radius:9px;
}
.res-support strong { font-size:12px; color:var(--t1); font-weight:600; display:block; }
.res-support span { font-size:11px; color:var(--t3); display:block; margin-top:2px; }
.stat.disabled {
  opacity:.45;
  border:1px dashed var(--b2);
  background:transparent;
}
.stat-lock { font-size:9px; opacity:.6; }
.stat-per-q { font-size:9px; color:var(--t3); margin-top:3px; letter-spacing:.2px; }
.c-t3 { color:var(--t3); }
.c-hi { color:var(--hi); }
.c-am  { color:var(--am); }
.c-bl  { color:var(--bl); }
.c-pur { color:var(--pur); }
.c-t1  { color:var(--t1); }

/* =================== الأقساط — التصميم الجديد ===================
   .phases-wrap يحتوي .nz-phase-row — تُبنى ديناميكياً من nazrah-ui.js
   ============================================================= */
.phases-wrap {
  background:var(--s2); border:1px solid var(--b1);
  border-radius:10px; overflow:hidden; margin-top:8px;
  transition: background .5s, border-color .5s;
}
.nz-phase-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  border-bottom:1px solid var(--b1);
  transition: border-color .5s;
}
.nz-phase-row:last-child { border-bottom:none; }
.nz-phase-left { display:flex; align-items:center; gap:10px; }
.nz-phase-bar {
  width:3px; height:24px; border-radius:2px; flex-shrink:0;
}
.nz-phase-bar.active { background: var(--hi); }
.nz-phase-bar.retire { background: var(--am); }
.nz-phase-name { font-size:12px; color:var(--t2); font-weight:500; }
.nz-phase-dur  { font-size:10px; color:var(--t3); margin-top:2px; }
.nz-phase-amt  {
  display:flex; align-items:baseline; gap:5px;
}
.nz-phase-num {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:15px; font-weight:600; color:var(--t1);
}
.nz-phase-unit { font-size:10px; color:var(--t3); }

/* fade-in للنتيجة */
@keyframes nz-fadein {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.nz-fadein {
  animation: nz-fadein .35s cubic-bezier(.22,1,.36,1);
}

/* mono helper */
.nz-mono {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-weight:600;
}

/* mini cards */
.mini {
  border-radius:11px; padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between;
}
.mini.total {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--acc) 20%, transparent),
    color-mix(in srgb, var(--hi) 8%, transparent));
  border:1px solid color-mix(in srgb, var(--hi) 20%, transparent);
}
.mini.support {
  background: color-mix(in srgb, var(--am) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--am) 18%, transparent);
}
.mini-lbl { font-size:11px; color:var(--t2); }
.mini-val { font-size:15px; font-weight:600; }
.mini-val.hi { color:var(--hi); }
.mini-val.am { color:var(--am); }

/* warn */
.warns-box {
  background: rgba(220,50,50,.07);
  border:1px solid rgba(220,50,50,.25);
  border-radius:10px; padding:12px 14px;
  display:flex; flex-direction:column; gap:0;
}
.warns-box-title {
  display:flex; align-items:center; gap:7px;
  color:#e05555; font-size:12px; font-weight:700;
  margin-bottom:8px;
}
.warn-item {
  font-size:11px; line-height:1.7;
  color: rgba(220,80,80,.9);
  display:flex; align-items:flex-start; gap:6px;
}
.warn-item::before {
  content:'•'; color:#e05555; font-size:14px; line-height:1.4; flex-shrink:0;
}
.warn-am {
  background: color-mix(in srgb, var(--am) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--am) 18%, transparent);
  color: color-mix(in srgb, var(--am) 80%, white);
}
.warn-bl {
  background: color-mix(in srgb, var(--bl) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--bl) 18%, transparent);
  color: color-mix(in srgb, var(--bl) 80%, white);
}
.warn-rd {
  background: color-mix(in srgb, var(--rd) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--rd) 18%, transparent);
  color: color-mix(in srgb, var(--rd) 80%, white);
}

/* واتساب */
.whatsapp-btn {
  width:100%; padding:10px; border-radius:9px;
  background: color-mix(in srgb, #25D366 10%, transparent);
  border:1px solid color-mix(in srgb, #25D366 30%, transparent);
  color:#25D366; font-family:inherit; font-size:12px;
  cursor:pointer; display:none; align-items:center;
  justify-content:center; gap:8px; transition:.15s;
  letter-spacing:.3px; font-weight:500; text-decoration:none;
}
.whatsapp-btn:hover { background: color-mix(in srgb, #25D366 18%, transparent); }

/* copy */
.copy-btn {
  width:100%; padding:10px; border-radius:9px;
  background:transparent; border:1px solid var(--b2);
  color:var(--t3); font-family:inherit; font-size:12px;
  cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:7px; transition:.15s;
  letter-spacing:.3px;
}
.copy-btn:hover { background:var(--s2); color:var(--t1); border-color:var(--b2); }

/* صف أزرار النسخ والطباعة */
.action-btns-row { display:flex; gap:6px; flex-wrap:wrap; }

/* زر حفظ العميل في المحفظة — بطل بعرض كامل فوق نسخ/طباعة */
.save-client-btn {
  flex:1 1 100%; padding:11px; border-radius:9px;
  background:var(--hi); border:1px solid var(--hi);
  color:#fff; font-family:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:7px; transition:.15s; letter-spacing:.2px;
}
.save-client-btn:hover { filter:brightness(1.07); }
.save-client-btn.saved { background:transparent; color:var(--hi); }
.save-client-btn.saved:hover { filter:none; background:color-mix(in srgb, var(--hi) 8%, transparent); }
[data-theme="formal"] .save-client-btn { background:#1a7a3c; border-color:#1a7a3c; }
[data-theme="formal"] .save-client-btn.saved { background:transparent; color:#1a7a3c; }

/* حقول نافذة حفظ العميل */
.sc-fld { margin-bottom:13px; }
.sc-fld label { display:block; font-size:11.5px; color:var(--t3); margin-bottom:6px; }
.sc-fld input, .sc-fld textarea {
  width:100%; background:var(--s2); border:1px solid var(--b2); border-radius:9px;
  padding:11px 13px; color:var(--t1); font-family:inherit; font-size:13.5px; outline:none; transition:.15s;
}
.sc-fld textarea { resize:vertical; min-height:48px; line-height:1.6; }
.sc-fld input:focus, .sc-fld textarea:focus { border-color:var(--hi); }
.sc-seg { display:flex; gap:7px; }
.sc-seg button {
  flex:1; padding:9px; border-radius:9px; border:1px solid var(--b2); background:var(--s2);
  color:var(--t3); font-family:inherit; font-size:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px; transition:.15s;
}
.sc-seg button.on { border-color:var(--hi); background:color-mix(in srgb, var(--hi) 10%, transparent); color:var(--t1); font-weight:500; }
.sc-seg button .d { width:7px; height:7px; border-radius:50%; }
.sc-acts { display:flex; gap:9px; margin-top:14px; }
.sc-btn {
  flex:1; padding:11px; border-radius:9px; font-family:inherit; font-size:13.5px; font-weight:500;
  cursor:pointer; border:1px solid var(--b2); background:transparent; color:var(--t3); transition:.15s;
}
.sc-btn:hover { color:var(--t1); }
.sc-btn.primary { background:var(--hi); border-color:var(--hi); color:#fff; }
.sc-btn.primary:hover { filter:brightness(1.07); color:#fff; }
[data-theme="formal"] .sc-btn.primary { background:#1a7a3c; border-color:#1a7a3c; }

.print-btn {
  flex:1; padding:10px; border-radius:9px;
  background:transparent;
  border:1px solid color-mix(in srgb, var(--hi) 35%, transparent);
  color:var(--hi); font-family:inherit; font-size:12px;
  cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:7px; transition:.15s; letter-spacing:.3px;
}
.print-btn:hover { background:color-mix(in srgb, var(--hi) 8%, transparent); }
[data-theme="formal"] .print-btn { border-color:#1a7a3c; color:#1a7a3c; }
[data-theme="formal"] .print-btn:hover { background:rgba(26,122,60,.06); }

/* Print Modal */
.print-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; backdrop-filter:blur(4px);
}
.print-modal {
  background:var(--s1); border:1px solid var(--b2);
  border-radius:16px; padding:22px 24px;
  width:100%; max-width:480px; direction:rtl;
  position:relative;
}
.print-modal-title { font-size:15px; font-weight:600; color:var(--t1); margin-bottom:4px; }
.print-modal-sub { font-size:11px; color:var(--t3); margin-bottom:14px; line-height:1.6; }

/* حقول المستند */
.print-fields-row { display:flex; gap:10px; margin-bottom:10px; }
.print-office-row { display:flex; gap:12px; align-items:stretch; margin-bottom:10px; }
.print-office-fields { display:flex; flex-direction:column; gap:8px; flex:1; }
/* منطقة الشعار */
.print-logo-area {
  width:68px; height:68px; flex-shrink:0;
  border:1.5px dashed var(--b2); border-radius:10px;
  background:var(--s2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; transition:.15s;
}
.print-logo-area:hover { border-color:var(--hi); background:color-mix(in srgb,var(--hi) 6%,transparent); }
.print-logo-default { display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--t3); }
.print-logo-default svg { width:22px; height:22px; }
.print-logo-default span { font-size:9px; font-weight:500; }
.print-logo-img { width:100%; height:100%; object-fit:contain; display:none; padding:4px; }
.print-logo-clear {
  display:none; position:absolute; top:3px; left:3px;
  width:16px; height:16px; border-radius:50%;
  background:rgba(0,0,0,.5); color:#fff; border:none;
  font-size:11px; line-height:1; cursor:pointer;
  align-items:center; justify-content:center; padding:0;
}
[data-theme="formal"] .print-logo-area { background:#f0ece3; border-color:#d4cfc4; }
.print-logo-hint-text { font-size:9px; color:var(--t3); line-height:1.6; text-align:center; margin-top:4px; }
.print-field { display:flex; flex-direction:column; gap:5px; flex:1; }
.print-field-lbl { font-size:11px; font-weight:600; color:var(--t2); }
.print-field-inp {
  width:100%; padding:8px 11px; border-radius:8px;
  border:1px solid var(--b2); background:var(--bg);
  color:var(--t1); font-family:inherit; font-size:13px;
  outline:none; transition:.15s;
}
.print-field-inp::placeholder { color:var(--t3); }
.print-field-inp:focus { border-color:var(--hi); box-shadow:0 0 0 3px color-mix(in srgb, var(--hi) 15%, transparent); }
.print-section-lbl {
  font-size:11px; font-weight:600; color:var(--t3);
  text-transform:uppercase; letter-spacing:.5px;
  margin-bottom:10px; padding-top:4px;
  border-top:1px solid var(--b1);
}
[data-theme="formal"] .print-field-inp { background:#fcfaf5; border-color:#e4ddcf; }
[data-theme="formal"] .print-field-inp:focus { border-color:#1f4d3c; box-shadow:0 0 0 3px rgba(31,77,60,.1); }
.print-banks-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:18px; }
.print-bank-check {
  display:flex; align-items:center; gap:8px;
  background:var(--s2); border:1px solid var(--b1);
  border-radius:8px; padding:8px 11px; cursor:pointer;
  transition:.15s; user-select:none;
}
.print-drag-hint { font-size:9px; font-weight:400; color:var(--t3); margin-right:6px; opacity:.7; }
.print-bank-check.drag-over { border-color:var(--hi); box-shadow:0 0 0 2px color-mix(in srgb,var(--hi) 20%,transparent); }
.print-drag-handle {
  font-size:11px; color:var(--t3); cursor:grab; letter-spacing:-2px;
  line-height:1; flex-shrink:0; padding:0 2px; opacity:.5;
}
.print-bank-check:active .print-drag-handle { cursor:grabbing; }
.print-bank-check.on { border-color:var(--hi); background:color-mix(in srgb, var(--hi) 8%, transparent); }
.print-bank-check input { display:none; }
.print-check-box {
  width:15px; height:15px; border-radius:4px;
  border:1.5px solid var(--b2); background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:.15s;
}
.print-bank-check.on .print-check-box { background:var(--hi); border-color:var(--hi); }
.print-check-tick { width:8px; height:8px; display:none; }
.print-bank-check.on .print-check-tick { display:block; }
.print-bank-name { font-size:12px; color:var(--t2); font-weight:500; display:flex; align-items:baseline; gap:5px; }
.print-bank-check.on .print-bank-name { color:var(--t1); }
.print-bank-type { font-size:9px; color:var(--t3); font-weight:400; }
.print-bank-check.on .print-bank-type { color:var(--t2); }
.print-modal-btns { display:flex; gap:8px; }
/* زر X للإغلاق — يحل محل زر إلغاء */
.print-modal-close {
  position:absolute; top:12px; left:14px;
  background:none; border:none; cursor:pointer;
  color:var(--t3); padding:4px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  transition:.15s;
}
.print-modal-close:hover { color:var(--t1); background:var(--s2); }
.print-modal-do {
  flex:2; padding:10px; border-radius:9px;
  background:linear-gradient(135deg,var(--acc2),var(--acc),var(--hi2));
  border:none; color:#fff; font-family:inherit;
  font-size:13px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.print-modal-do:disabled { opacity:.5; cursor:not-allowed; }
.print-modal-dl {
  flex:2; padding:10px; border-radius:9px;
  background:transparent; border:1px solid var(--hi);
  color:var(--hi); font-family:inherit;
  font-size:13px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:7px;
  transition:.2s;
}
.print-modal-dl:hover { background:var(--hi); color:#fff; }
.print-modal-dl:disabled { opacity:.5; cursor:not-allowed; }
.print-modal-loading { font-size:11px; color:var(--t3); text-align:center; margin-bottom:10px; display:none; }
[data-theme="formal"] .print-modal { background:#fcfaf5; border-color:#e4ddcf; }
[data-theme="formal"] .print-bank-check { background:#f0ece3; border-color:#e4ddcf; }
[data-theme="formal"] .print-bank-check.on { background:rgba(31,77,60,.08); border-color:#1f4d3c; }
[data-theme="formal"] .print-check-box { background:#fcfaf5; border-color:#e4ddcf; }
[data-theme="formal"] .print-bank-check.on .print-check-box { background:#1f4d3c; border-color:#1f4d3c; }
[data-theme="formal"] .print-modal-cancel { border-color:#e4ddcf; color:#6f7a72; }

/* =================== DETAILS =================== */
.det-card {
  background:var(--s1); border:1px solid var(--b1);
  border-radius:14px; padding:18px; margin-top:14px;
  transition: background .5s, border-color .5s;
}
.det-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.det-item label { font-size:9px; color:var(--t3); letter-spacing:.7px; display:block; margin-bottom:4px; }
.det-item span  { font-size:14px; font-weight:500; color:var(--t1); }

/* =================== MOBILE =================== */
@media(max-width:768px){
  .topbar { margin-bottom:16px; gap:6px; }
  .brand-sub { display:none; }
  .user-name { display:none; }
  .brand { gap:7px; }
  .user-pill { padding:4px 8px 4px 4px; gap:5px; }
  .theme-toggle-btn { font-size:11px; padding:5px 8px; }
  .main { grid-template-columns:1fr; }
  .dates-grid { grid-template-columns:1fr; }
  .det-grid { grid-template-columns:repeat(2,1fr); }
  /* الموبايل: إحصاء 2 عمود بدل 3 */
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  /* الموبايل: hero بدون gauge — يأخذ العرض كاملاً */
  .res-hero { grid-template-columns:1fr; }
  .res-gauge-wrap { display:none; }
  .res-hero-amount { font-size:clamp(32px,8vw,48px); }
  /* الموبايل: بطاقة النتائج أقل padding */
  .res-card { padding:16px 14px; }

  /* إخفاء الجهات التمويلية من الأعلى على الجوال */
  .banks-wrap { display:none; }

  /* مساحة سفلية للـ wrap تفادياً للتداخل مع الـ bottom nav */
  .wrap { padding-bottom: 90px; }

  /* ===== BOTTOM NAV ===== */
  .bottom-nav {
    display: flex !important;
  }
}

/* Bottom Nav — مخفي افتراضياً على الكمبيوتر */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; right: 0; left: 0;
  background: var(--s1);
  border-top: 1px solid var(--b2);
  z-index: 200;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  gap: 4px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background .5s, border-color .5s;
}

.bn-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--s1);
  color: var(--t3);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.bn-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--acc), var(--hi));
  opacity: 0;
  transition: opacity .2s;
}
.bn-btn.active {
  color: var(--t1);
  border-color: var(--hi);
  box-shadow: 0 0 0 1px var(--hi) inset, 0 0 20px var(--glow);
  font-weight: 600;
}
.bn-btn.active::after { opacity:.12; }

.birth-fields input { border-color: rgba(74,158,150,.4) !important; }
.birth-fields input:focus { border-color: #4A9E96 !important; box-shadow: 0 0 0 3px rgba(74,158,150,.2) !important; }
.appoint-fields input { border-color: rgba(245,158,11,.4) !important; }
.appoint-fields input:focus { border-color: #F59E0B !important; box-shadow: 0 0 0 3px rgba(245,158,11,.2) !important; }
.det-toggle {
  width:100%; padding:10px; border-radius:10px;
  background:transparent; border:1px solid var(--b1);
  color:var(--t2); font-family:inherit; font-size:12px;
  cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:7px; transition:.15s;
  margin-top:14px; letter-spacing:.3px;
}
.det-toggle:hover { background:var(--s1); color:var(--t1); border-color:var(--b2); }

/* إظهار/إخفاء كلمة المرور */
.pass-wrap { position:relative; }
.pass-wrap input { padding-left:36px; }
.pass-eye {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--t3);
  font-size:15px; padding:0; line-height:1;
}
.pass-eye:hover { color:var(--t2); }

/* دعم الإسكان ومدة التمويل — نفس شكل المنتج */
.sup-tabs {
  display:flex; background:var(--bg); border:1px solid var(--b1);
  border-radius:10px; padding:3px; gap:3px; margin-bottom:8px;
}
.sup-tab {
  flex:1; padding:8px; border-radius:7px; text-align:center;
  cursor:pointer; font-size:12px; border:none;
  background:transparent; color:var(--t3);
  transition:.15s; font-family:inherit;
}
.sup-tab.active { background:var(--s2); color:var(--t1); box-shadow:var(--shadow-1); }
.ten-tabs {
  display:flex; background:var(--bg); border:1px solid var(--b1);
  border-radius:10px; padding:3px; gap:3px; margin-bottom:8px;
}
.ten-tab {
  flex:1; padding:8px; border-radius:7px; text-align:center;
  cursor:pointer; font-size:12px; border:none;
  background:transparent; color:var(--t3);
  transition:.15s; font-family:inherit;
}
.ten-tab.active { background:var(--s2); color:var(--t1); box-shadow:var(--shadow-1); }

/* تبويبات هجري/ميلادي — التنسيق موحّد في بلوك "التواريخ (v28)" أسفل الملف */
.date-cal-tabs { display:flex; gap:6px; width:100%; }
/* ---- حالة الانتظار في لوحة النتائج ---- */
.res-loading {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:40px 20px; gap:14px;
}
.res-loading-spinner {
  font-size:36px;
  animation: sandglass 1.2s ease-in-out infinite;
}
@keyframes sandglass {
  0%,100% { transform: rotate(0deg); }
  50%      { transform: rotate(180deg); }
}
.res-loading-txt { font-size:13px; color:var(--t2); }

/* ==========================================
   Skeleton UI — بديل العداد التصاعدي
   ⚠️ قرار نهائي: ممنوع العداد التصاعدي
   الآلية: skeleton 700ms → fade-in للنتيجة
   ========================================== */

/* الـ shimmer animation */
@keyframes nz-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* حاوية الـ skeleton — تظهر أثناء الانتظار */
.res-skeleton {
  display:none;
  flex-direction:column;
  gap:14px;
  padding:4px 0;
  animation: nz-fade-in .2s ease;
}
.res-skeleton.visible { display:flex; }

/* خطوط الـ skeleton */
.sk-line {
  border-radius:6px;
  background: linear-gradient(
    90deg,
    var(--s2) 25%,
    var(--b1) 50%,
    var(--s2) 75%
  );
  background-size: 200% 100%;
  animation: nz-shimmer 1.6s ease-in-out infinite;
}
/* الرقم الكبير */
.sk-hero { height:52px; width:75%; border-radius:8px; }
/* الشريط الذهبي */
.sk-rule { height:2px; width:56px; border-radius:2px; opacity:.6; }
/* صف الوصف */
.sk-tags { height:16px; width:90%; }
/* كرت إحصاء */
.sk-stat { height:60px; border-radius:8px; }
/* صف الأقساط */
.sk-phase { height:36px; border-radius:6px; }

/* grid الإحصاء skeleton */
.sk-stats-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}

/* fade-in عند ظهور النتيجة */
@keyframes nz-fade-in {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
/* يُضاف على resContent عند الظهور */
.res-content-ready {
  animation: nz-fade-in .35s cubic-bezier(.22,1,.36,1);
}

/* ---- حالة الانتظار الأولى (قبل أي حساب) ---- */
.res-empty {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:40px 20px; gap:10px;
  opacity:.5;
}
.res-empty-icon { font-size:32px; }
.res-empty-txt  { font-size:12px; color:var(--t3); text-align:center; }

/* ---- تمييز ألوان الأقسام ---- */
/* المنتج → أخضر/hi */
.prod-tabs { border-color: color-mix(in srgb, var(--hi) 25%, transparent) !important; }
.section-prod .card-title-bar::before { background: linear-gradient(180deg, var(--hi), var(--acc)); }

/* دعم الإسكان → ذهبي */
.section-sup .card-title-bar::before { background: linear-gradient(180deg, var(--am), #C07010); }
.sup-tabs { border-color: color-mix(in srgb, var(--am) 25%, transparent) !important; }
.sup-tab.active { background: color-mix(in srgb, var(--am) 12%, transparent) !important; color:var(--am) !important; box-shadow:none !important; }

/* مدة التمويل → أزرق */
.section-ten .card-title-bar::before { background: linear-gradient(180deg, var(--bl), #2080C0); }
.ten-tabs { border-color: color-mix(in srgb, var(--bl) 25%, transparent) !important; }
.ten-tab.active { background: color-mix(in srgb, var(--bl) 12%, transparent) !important; color:var(--bl) !important; box-shadow:none !important; }

/* ---- لمعة عابرة لتنبيه المستخدم لاختيار لم يتم بعد ----
   تظهر فقط على الزر الذي يحمل .nz-pending (يُضاف عبر app.js عند عدم وجود
   اختيار في المجموعة، ويُزال فوراً عند الاختيار). بقعة ضوء تمر أسفل الزر
   بألوان هوية القسم نفسه (المنتج=--hi، الدعم=--am) — بلا مسار ظاهر. */
.prod-tab, .sup-tab { position:relative; overflow:hidden; }
.prod-tab.nz-pending::after,
.sup-tab.nz-pending::after {
  content:''; position:absolute; inset-inline:0; bottom:0; height:2px;
  pointer-events:none; opacity:.85;
  background-size:250% 100%; background-position:150% 0;
  animation: nz-pending-shimmer 2.8s ease-in-out infinite;
}
.prod-tab.nz-pending::after,
.sup-tab.nz-pending::after {
  background-image: linear-gradient(90deg, transparent 0%, transparent 40%, var(--shimmer) 50%, transparent 60%, transparent 100%);
}

/* ---- لمعة أزرار البنك المحايدة (المرحلة 2) ----
   الديسكتوب: نُعيد توظيف الشريط السفلي ::before (مؤشر التفعيل) ليصبح لمعة
   عند .nz-pending — نُلغي اللون الصلب var(--hi) ونضع تدرّج اللمعة المتحرك.
   الجوال: ::before حر على .bn-btn فننشئ شريط لمعة جديد. (::after محجوز لتعبئة الزر) */
.bank-btn.nz-pending::before,
.bn-btn.nz-pending::before {
  content:''; position:absolute; inset-inline:0; bottom:0; height:3px;
  pointer-events:none; opacity:.85; z-index:2;
  background-color:transparent;
  background-image: linear-gradient(90deg, transparent 0%, transparent 40%, var(--shimmer) 50%, transparent 60%, transparent 100%);
  background-size:250% 100%; background-position:150% 0;
  animation: nz-pending-shimmer 2.8s ease-in-out infinite;
}

@keyframes nz-pending-shimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

/* ---- تنبيه أحمر صغير جداً تحت قسم لم يُكمل (يُحقن عبر app.js بعد أول «احسب») ---- */
.nz-field-hint {
  display:none;
  font-size:10.5px; font-weight:600; line-height:1.5;
  color:var(--rd);
  margin-top:5px;
  letter-spacing:.2px;
  animation: nz-hint-in .25s ease;
}
@keyframes nz-hint-in { from{ opacity:0; transform:translateY(-2px); } to{ opacity:1; transform:translateY(0); } }

/* ---- رجة تنبيه عند الضغط على "احسب" بدون اكتمال الاختيار ---- */
@keyframes nz-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.nz-shake { animation: nz-shake .4s ease-in-out; }

/* ---- ملخص المدخلات — جوال فقط ---- */
.inputs-summary {
  /* جوال فقط — مخفي في الكمبيوتر، يُفعَّل من media query */
  display:none;
  background:var(--s2); border:1px solid var(--b2);
  border-radius:10px; padding:7px 11px; margin-bottom:6px;
  font-size:11px;
}
/* على الجوال: مخفي بـ opacity حتى تُضاف visible */
@media(max-width:768px){
  .inputs-summary {
    display:block;
    overflow:hidden; max-height:0;
    opacity:0;
    transition: max-height .35s cubic-bezier(.22,1,.36,1), opacity .25s ease;
  }
  .inputs-summary.visible {
    /* ⚠️ max-height مضبوط بإحكام — لو أضفت حقلاً جديداً للملخص زِد هذه القيمة */
    max-height:100px; opacity:1;
  }
}
.inputs-summary-title {
  font-size:9px; color:var(--t3); letter-spacing:.5px;
  margin-bottom:4px;
}
.inputs-summary-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:3px 6px;
}
.is-item label { font-size:8px; color:var(--t3); display:block; margin-bottom:1px; }
.is-item span  { font-size:10px; color:var(--t1); font-weight:500; }
@media(max-width:768px){
  /* inputs-summary: يُتحكم فيه من media query فوق */
  /* البنوك من الأعلى مخفية — يُستبدل بـ Bottom Nav */
  .banks-wrap { display:none !important; }
  .bottom-nav { display:flex !important; }
  .wrap { padding-bottom:90px; }
}

/* ---- تمييز تاريخ الميلاد والتعيين ---- */
.birth-label  { color: #4A9E96 !important; }
.appoint-label { color: #F59E0B !important; }

/* شرطة ملونة قبل العنوان — بديل عن card-title-bar الكبيرة */
.bar-label {
  display:flex; align-items:center; gap:7px;
  font-size:12px; font-weight:500; color:var(--t1);
  margin-bottom:6px;
}
.bar-label::before {
  content:''; display:block; width:3px; height:14px;
  border-radius:2px; flex-shrink:0;
  background: linear-gradient(180deg, var(--acc), var(--hi));
  transition: background .5s;
}
.bar-label.birth::before  { background: linear-gradient(180deg,#2A7A74,#4A9E96); }
.bar-label.appoint::before { background: linear-gradient(180deg,#C07010,#F59E0B); }
.bar-label.sup::before    { background: linear-gradient(180deg,#C07010,var(--am)); }
.bar-label.ten::before    { background: linear-gradient(180deg,#2080C0,var(--bl)); }

/* ثيم neutral محذوف — قرار نهائي 27 مايو 2026 */
#authScreen {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px;
  background: radial-gradient(ellipse 60% 40% at 30% 0%, rgba(31,77,60,.15) 0%, transparent 55%),
              radial-gradient(ellipse 50% 40% at 80% 100%, rgba(31,77,60,.10) 0%, transparent 50%);
}

/* ═══════════════════════════════════════════════════════
   الثيم الرسمي (الفاتح) — الهوية الجديدة
   كريمي دافئ #f6f3ec + أخضر عميق #1f4d3c + ذهبي #8b6a2a
   مستوحى من variant-balanced light
   ⚠️ هذا هو الثيم الافتراضي — الشرط الحارس في showApp و switchBank لا يُحذف
   ═══════════════════════════════════════════════════════ */
[data-theme="formal"] {
  --bg:    #f6f3ec;
  --s1:    #fcfaf5;
  --s2:    #f0ece3;
  --b1:    #e4ddcf;
  --b2:    #d4cfc4;
  --t1:    #1a221d;
  --t2:    #3d4942;
  --t3:    #5c655e;
  --acc:   #1f4d3c;
  --acc2:  #134132;
  --hi:    #1f4d3c;
  --hi2:   #134132;
  --neon:  #1f4d3c;
  --am:    #8b6a2a;
  --shimmer: #d8b97f;   /* لون لمعة الأزرار المحايدة — ذهبي عاجي ناعم في الفاتح (مطابق للديمو) */
  --bl:    #1a4a8a;
  --rd:    #c0392b;
  --pur:   #6a3a8a;
  --glow:  rgba(31,77,60,.08);
  --logo-color: #1f4d3c;
}
/* ⚠️ v41: أُلغي تلوين البنوك الكامل — الهوية الجديدة لون أخضر موحّد.
   كل بنك يبقى أخضراً في --hi/--acc (يلوّن زر احسب + رأس النتيجة + الحدود)،
   ولونه الخاص ينتقل إلى --bank-strip فقط: يغذّي الشريط الرفيع أسفل الزر النشط.
   لا تُعد ألوان البنوك إلى --hi/--acc — هذا يكسر توحيد الهوية. */
[data-theme="formal"][data-bank="ahli"]   { --hi:#1f4d3c; --hi2:#134132; --acc:#1f4d3c; --acc2:#134132; --bank-strip:#1f4d3c; }
[data-theme="formal"][data-bank="rajhi"]  { --hi:#1f4d3c; --hi2:#134132; --acc:#1f4d3c; --acc2:#134132; --bank-strip:#1A56C4; }
[data-theme="formal"][data-bank="bilad"]  { --hi:#1f4d3c; --hi2:#134132; --acc:#1f4d3c; --acc2:#134132; --bank-strip:#8a1020; }
[data-theme="formal"][data-bank="inma"]   { --hi:#1f4d3c; --hi2:#134132; --acc:#1f4d3c; --acc2:#134132; --bank-strip:#1a4a8a; }
[data-theme="formal"][data-bank="fransi"] { --hi:#1f4d3c; --hi2:#134132; --acc:#1f4d3c; --acc2:#134132; --bank-strip:#0a6070; }
[data-theme="formal"][data-bank="bidaya"] { --hi:#1f4d3c; --hi2:#134132; --acc:#1f4d3c; --acc2:#134132; --bank-strip:#7a1060; }
[data-theme="formal"][data-bank="anb"]    { --hi:#1f4d3c; --hi2:#134132; --acc:#1f4d3c; --acc2:#134132; --am:#8b6a2a; --bank-strip:#6030B8; }
[data-theme="formal"][data-bank="saib"]   { --hi:#1f4d3c; --hi2:#134132; --acc:#1f4d3c; --acc2:#134132; --bank-strip:#0B7A6E; }

/* تعديلات خاصة بالثيم الرسمي */
body[data-theme="formal"] { background:#f6f3ec; }
body[data-theme="formal"]::before { display:none; }

/* النقش الإسلامي في الخلفية — محدّث بألوان الهوية الجديدة */
body[data-theme="formal"]::after {
  content:'';
  position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%231f4d3c' stroke-width='0.9' stroke-linecap='round' opacity='0.06'%3E%3Cpolygon points='40,6 53,18 53,34 40,46 27,34 27,18'/%3E%3Cpolygon points='40,13 49,22 49,32 40,41 31,32 31,22'/%3E%3Cline x1='40' y1='6' x2='40' y2='0'/%3E%3Cline x1='53' y1='18' x2='60' y2='11'/%3E%3Cline x1='53' y1='34' x2='60' y2='41'/%3E%3Cline x1='40' y1='46' x2='40' y2='53'/%3E%3Cline x1='27' y1='34' x2='20' y2='41'/%3E%3Cline x1='27' y1='18' x2='20' y2='11'/%3E%3Cline x1='0' y1='0' x2='20' y2='11'/%3E%3Cline x1='80' y1='0' x2='60' y2='11'/%3E%3Cline x1='0' y1='80' x2='20' y2='69'/%3E%3Cline x1='80' y1='80' x2='60' y2='69'/%3E%3Cpolygon points='40,54 53,66 53,82 40,94 27,82 27,66'/%3E%3Cpolygon points='40,61 49,70 49,80 40,89 31,80 31,70'/%3E%3Cline x1='40' y1='54' x2='40' y2='53'/%3E%3Cline x1='53' y1='66' x2='60' y2='59'/%3E%3Cline x1='27' y1='66' x2='20' y2='59'/%3E%3Cline x1='53' y1='82' x2='60' y2='89'/%3E%3Cline x1='27' y1='82' x2='20' y2='89'/%3E%3Ccircle cx='0' cy='0' r='2.5' fill='%231f4d3c'/%3E%3Ccircle cx='80' cy='0' r='2.5' fill='%231f4d3c'/%3E%3Ccircle cx='0' cy='80' r='2.5' fill='%231f4d3c'/%3E%3Ccircle cx='80' cy='80' r='2.5' fill='%231f4d3c'/%3E%3Ccircle cx='40' cy='40' r='2.5' fill='%231f4d3c'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}

/* ═══ عزل العناصر التفاعلية عن طبقة النقش (الثيم الرسمي) ═══ */
/* قاعدة شاملة: أي خانة/زر/قائمة/حاوية إدخال ترتفع فوق النقش بخلفية صلبة */
/* تغطي العناصر الحالية وأي عنصر تفاعلي يُضاف مستقبلاً */
[data-theme="formal"] .existing-box input,
[data-theme="formal"] .bp-numwrap,
[data-theme="formal"] .bp-input,
[data-theme="formal"] .nz-sal-field .bp-numwrap,
[data-theme="formal"] .nz-date-row,
[data-theme="formal"] .sectors,
[data-theme="formal"] .sec-btn,
[data-theme="formal"] .sal-tab,
[data-theme="formal"] .prod-tab,
[data-theme="formal"] .sup-tab,
[data-theme="formal"] .ten-tab,
[data-theme="formal"] .bank-btn,
[data-theme="formal"] .bn-btn,
[data-theme="formal"] .calc-btn,
[data-theme="formal"] .mil-opt,
[data-theme="formal"] .toggle {
  position: relative;
  z-index: 1;
}

/* خلفية حاويات الخانات صلبة 100% (بيج دافئ متناسق مع الثيم) — تحجب النقش */
[data-theme="formal"] .bp-numwrap,
[data-theme="formal"] .nz-sal-field .bp-numwrap {
  background: #faf7f0 !important;
}
/* الخانة نفسها شفافة لتظهر خلفية الحاوية الصلبة من خلفها */
[data-theme="formal"] .nz-sal-field .bp-input {
  background: transparent !important;
}

/* الثيم الرسمي — إصلاح تباين الخانات والأزرار */
/* الخلفية صلبة (بيج دافئ متناسق) لتحجب النقش بدل أن ينفذ من خلفها */
[data-theme="formal"] .existing-box input {
  background: #faf7f0 !important;
  border-color: #d4cfc4 !important;
  color: #1a221d !important;
}
/* التواريخ: نص داكن داخل الخانة — الـ focus عبر الخيط الذهبي (في بلوك v28) */
[data-theme="formal"] .nz-date-row .bp-input { color: #1a221d !important; }
[data-theme="formal"] .calc-btn {
  box-shadow: none !important;
  color: #fff !important;
}
[data-theme="formal"] .bank-btn {
  background: #fcfaf5;
  border-color: #e4ddcf;
  border-radius: 2px;
  color: #1a221d;
}
[data-theme="formal"] .bank-btn.active {
  background: #ffffff !important;
  color: #1a221d !important;
  border-color: var(--hi) !important;
  box-shadow: none !important;
  transform: none !important;
}
[data-theme="formal"] .bank-btn.active::after { opacity: 0 !important; }
[data-theme="formal"] .bank-btn.active::before { opacity: 1 !important; }
[data-theme="formal"] .bn-btn {
  background: #fcfaf5;
  color: #1a221d;
}
[data-theme="formal"] .bn-btn.active {
  background: linear-gradient(135deg, var(--acc2), var(--acc), var(--hi2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
[data-theme="formal"] .sec-box { border-color: #e4ddcf; }
[data-theme="formal"] .sec-box-1 { background: #fcfaf5; }
[data-theme="formal"] .sec-box-2 { background: #f7f4ee; }
[data-theme="formal"] .sec-box-3 { background: #fcfaf5; }
[data-theme="formal"] .sec-box-4 { background: #f7f4ee; }
[data-theme="formal"] .res-card  { background: #fcfaf5; border-color: #e4ddcf; }
[data-theme="formal"] .res-card::before { background: linear-gradient(180deg,#1f4d3c,color-mix(in srgb,#1f4d3c 60%,transparent)); }
[data-theme="formal"] .res-card::after { display:none; }
[data-theme="formal"] .stat { background: #fcfaf5; border-color: #e4ddcf; }
[data-theme="formal"] .phases { background: #f0ece3; }
[data-theme="formal"] .sal-tab.active,
[data-theme="formal"] .prod-tab.active,
[data-theme="formal"] .sup-tab.active,
[data-theme="formal"] .ten-tab.active {
  background: #1f4d3c !important;
  color: #fff !important;
  box-shadow: none !important;
}
/* الثيم الرسمي — segmented control للقطاع */
[data-theme="formal"] .sectors { border-color: #e4ddcf; background: #f0ece3; border-radius:0; }
[data-theme="formal"] .prod-tabs,
[data-theme="formal"] .sup-tabs,
[data-theme="formal"] .ten-tabs { background: transparent; border: none; padding: 0; border-radius: 0; gap: 0; }
[data-theme="formal"] .sec-btn { border-color: #e4ddcf; color: #6f7a72; }
[data-theme="formal"] .sec-btn.active { background: #1f4d3c; color: #fcfaf5; }
[data-theme="formal"] .military-btn:not(.active) { border-color: #e4ddcf; color: #6f7a72; }
[data-theme="formal"] .military-btn.active { background: #1f4d3c !important; color: #fcfaf5 !important; }
[data-theme="formal"] .dc-btn { border-color: #d4cfc4; color: #1f4d3c; background: #fcfaf5; }
[data-theme="formal"] .dc-btn:hover:not(.active) { border-color: #1f4d3c; }
[data-theme="formal"] .dc-btn.active {
  background: #1f4d3c;
  border-color: #1f4d3c;
  color: #fff;
}
[data-theme="formal"] .mil-dropdown { background: #fcfaf5; border-color: #e4ddcf; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
[data-theme="formal"] .mil-opt { border-bottom-color: #ece6d8; color: #3d4942; }
[data-theme="formal"] .mil-opt:hover { background: #f0ece3; color: #1a221d; }
[data-theme="formal"] .mil-opt.active { color: #1f4d3c; background: rgba(31,77,60,.08); }
[data-theme="formal"] .toggle { background: #d4cfc4; }
[data-theme="formal"] .toggle.on { background: #1f4d3c; }
[data-theme="formal"] .copy-btn { border-color: #e4ddcf; color: #6f7a72; }
[data-theme="formal"] .copy-btn:hover { background: #f0ece3; color: #1a221d; }
[data-theme="formal"] .det-toggle { border-color: #e4ddcf; color: #6f7a72; }
[data-theme="formal"] .det-toggle:hover { background: #f0ece3; color: #1a221d; }
[data-theme="formal"] .det-card { background: #fcfaf5; border-color: #e4ddcf; }
[data-theme="formal"] .inputs-summary { background: #f0ece3; border-color: #e4ddcf; }
[data-theme="formal"] .bottom-nav { background: #fcfaf5; border-top-color: #e4ddcf; }
[data-theme="formal"] .user-pill { background: #f0ece3; border-color: #e4ddcf; }
[data-theme="formal"] .topbar { border-bottom: 1px solid #e4ddcf; }
[data-theme="formal"] .user-avatar-wrap { background:#f0ece3; border-color:#e4ddcf; }
[data-theme="formal"] .user-avatar-wrap:hover { background:#ece6d8; border-color:#d4cfc4; }
[data-theme="formal"] .user-dropdown { background:#fcfaf5; border-color:#e4ddcf; box-shadow:0 8px 24px rgba(0,0,0,.10); }
[data-theme="formal"] .ud-divider { background:#ece6d8; }
[data-theme="formal"] .ud-item:hover { background:#f0ece3; }
[data-theme="formal"] .user-sheet { background:#fcfaf5; }
[data-theme="formal"] .user-sheet-header { border-color:#e4ddcf; }
[data-theme="formal"] .us-item:hover { background:#f0ece3; }
[data-theme="formal"] .card-title-bar::before { background: #1f4d3c; }
[data-theme="formal"] .bar-label::before { background: #1f4d3c; }
[data-theme="formal"] .bar-label.birth::before { background: #2a7a74; }
[data-theme="formal"] .bar-label.appoint::before { background: #8b6a2a; }
[data-theme="formal"] .bar-label.sup::before { background: #8b6a2a; }
[data-theme="formal"] .bar-label.ten::before { background: #1a4a8a; }
[data-theme="formal"] .phase-bar.active { background: #1f4d3c; }
[data-theme="formal"] .ten-btn.active { background: rgba(26,74,138,.10) !important; border-color: #1a4a8a !important; color: #1a4a8a !important; }
[data-theme="formal"] .sup-btn.active { background: rgba(139,106,42,.10) !important; border-color: #8b6a2a !important; color: #8b6a2a !important; }
[data-theme="formal"] .mini.total { background: rgba(31,77,60,.06); border-color: rgba(31,77,60,.18); }
[data-theme="formal"] .mini.support { background: rgba(139,106,42,.06); border-color: rgba(139,106,42,.18); }
/* الثيم الرسمي — toggle اعتزاز واضح */
body[data-theme="formal"] .toggle {
  background: #d4cfc4;
}
body[data-theme="formal"] .toggle.on {
  background: #1f4d3c;
}

/* زر تبديل الثيم */
.theme-toggle-btn {
  display:flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:20px;
  border:1.5px solid var(--b2);
  background:var(--s2); color:var(--t2);
  font-family:inherit; font-size:12px; font-weight:600;
  cursor:pointer; transition:.2s;
  margin-left:8px; letter-spacing:.3px;
}
.theme-toggle-btn:hover { border-color:var(--hi); color:var(--t1); }
.theme-toggle-btn .toggle-icon { font-size:14px; }
body[data-theme="formal"] .theme-toggle-btn {
  background: #1f4d3c;
  border-color: transparent;
  color: #fcfaf5;
}
body[data-theme="formal"] .theme-toggle-btn:hover { background: #2a6552; }
/* خانات الراتب — شفافة لتظهر خلفية الحاوية (.bp-numwrap) الصلبة #ffffff من خلفها */
/* الحاوية الصلبة هي التي تحجب النقش — راجع بلوك عزل العناصر التفاعلية أعلاه */
body[data-theme="formal"] .nz-sal-field .bp-input { background: transparent !important; }
body[data-theme="formal"] .nz-sal-field .bp-input:focus { background: transparent !important; }

/* الثيم الرسمي — أزرار off واضحة */
body[data-theme="formal"] .sup-btn,
body[data-theme="formal"] .ten-btn,
body[data-theme="formal"] .sec-btn:not(.active),
body[data-theme="formal"] .sal-tab,
body[data-theme="formal"] .prod-tab,
body[data-theme="formal"] .sup-tab,
body[data-theme="formal"] .ten-tab {
  color: #1f4d3c !important;
  border-color: #1f4d3c !important;
  background: #faf7f0 !important; /* بيج صلب يحجب النقش — كان #fcfaf5 ينفذ منه */
  border-radius: 0 !important;
}
/* التبويب المنفصل: غير المفعّل حدّه بيج هادئ — موحّد مع بلوك v28 */
body[data-theme="formal"] .dc-btn {
  color: #1f4d3c !important;
  border-color: #d4cfc4 !important;
  background: #faf7f0 !important; /* بيج صلب يحجب النقش — كان #fcfaf5 ينفذ منه */
  border-radius: 0 !important;
}
body[data-theme="formal"] .dc-btn:hover:not(.active) { border-color: #1f4d3c !important; }
body[data-theme="formal"] .dc-btn.active {
  background: #1f4d3c !important;
  border-color: #1f4d3c !important;
  color: #fff !important;
}
body[data-theme="formal"] .sup-btn:not(.active):hover,
body[data-theme="formal"] .ten-btn:not(.active):hover { color: #1a221d !important; border-color: #d4cfc4 !important; }
/* prod-tab و sup-tab — ملتصقة بحدود حادة في الثيم الرسمي */
body[data-theme="formal"] .prod-tab,
body[data-theme="formal"] .sup-tab {
  border-radius: 0 !important;
  border: 1px solid #e4ddcf !important;
  margin-inline-start: -1px;
}
body[data-theme="formal"] .prod-tab:first-child,
body[data-theme="formal"] .sup-tab:first-child { margin-inline-start: 0; border-radius: 0 !important; }
/* prod-tab و sup-tab — ملتصقة بحدود حادة في الثيم الرسمي */
body[data-theme="formal"] .prod-tab,
body[data-theme="formal"] .sup-tab {
  border-radius: 0 !important;
  border: 1px solid #e4ddcf !important;
  margin-inline-start: -1px;
}
body[data-theme="formal"] .prod-tab:first-child,
body[data-theme="formal"] .sup-tab:first-child { margin-inline-start: 0; border-radius: 0 !important; }

/* =================== ONBOARDING TOUR =================== */
#nz-tour-overlay {
  position:fixed; inset:0; z-index:10000; pointer-events:none;
}
#nz-tour-overlay.active { pointer-events:auto; }
.nz-tour-backdrop {
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  z-index:10001;
  transition:opacity .3s;
}
.nz-tour-highlight {
  position:fixed;
  z-index:10002;
  border-radius:12px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.55), 0 0 0 2px var(--hi);
  transition:all .35s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.nz-tour-bubble {
  position:fixed;
  z-index:10003;
  background:var(--s1);
  border:1px solid var(--b2);
  border-radius:14px;
  padding:14px 16px;
  width:260px;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  transition:all .35s cubic-bezier(.4,0,.2,1);
  pointer-events:auto;
}
.nz-tour-bubble::before {
  content:'';
  position:absolute;
  width:10px; height:10px;
  background:var(--s1);
  border:1px solid var(--b2);
  transform:rotate(45deg);
}
.nz-tour-bubble.arrow-top::before    { top:-6px; right:22px; border-bottom:none; border-left:none; }
.nz-tour-bubble.arrow-bottom::before { bottom:-6px; right:22px; border-top:none; border-right:none; }
.nz-tour-bubble.arrow-right::before  { top:18px; right:-6px; border-bottom:none; border-right:none; transform:rotate(135deg); }
.nz-tour-bubble.arrow-left::before   { top:18px; left:-6px; border-top:none; border-left:none; transform:rotate(225deg); }
.nz-tour-step-num {
  font-size:10px; color:var(--t3); margin-bottom:6px; letter-spacing:.5px;
}
.nz-tour-title {
  font-size:13px; font-weight:600; color:var(--t1); margin-bottom:5px; line-height:1.4;
}
.nz-tour-body {
  font-size:11.5px; color:var(--t2); line-height:1.7; margin-bottom:12px;
}
.nz-tour-footer {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.nz-tour-skip {
  background:none; border:none; color:var(--t3); font-size:11px;
  cursor:pointer; font-family:inherit; padding:0; text-decoration:underline;
}
.nz-tour-skip:hover { color:var(--t2); }
.nz-tour-next {
  padding:7px 16px; border-radius:8px; border:none;
  background:linear-gradient(135deg,var(--acc2),var(--acc),var(--hi2));
  color:#fff; font-family:inherit; font-size:12px; font-weight:600;
  cursor:pointer; transition:.15s;
}
.nz-tour-next:hover { opacity:.9; }
.nz-tour-dots {
  display:flex; gap:5px; align-items:center;
}
.nz-tour-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--b2); transition:.2s;
}
.nz-tour-dot.active { background:var(--hi); width:14px; border-radius:3px; }


/* ==========================================
   شاشة التحميل عند فتح الصفحة (Page Loading Screen)
   ==========================================
   المشكلة التي تحلها:
     عند فتح الموقع، Supabase تحتاج 200-500ms لاستعادة جلسة المستخدم.
     خلال هذا الوقت يظهر مربع تسجيل الدخول للمستخدم المسجّل
     ثم يختفي فجأة — تجربة مزعجة وغير احترافية.

   الحل:
     نُظهر شاشة تحميل تغطي كل شيء فور فتح الصفحة.
     بعد اكتمال getSession() في app.js تختفي الشاشة بانتقال سلس.

   ⚠️ قواعد ثابتة:
     - لا تحذف #nz-page-loader من index.html
     - لا تحذف hidePageLoader() من app.js
     - الشاشة تختفي دائماً حتى لو فشل getSession() (انظر app.js)
   ========================================== */

#nz-page-loader {
  position: fixed;
  inset: 0;
  background: #131816;        /* نفس لون --bg الافتراضي الجديد */
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  transition: opacity .3s ease, visibility .3s ease;
}

/* حالة الاختفاء — تُضاف عبر JS في hidePageLoader() */
#nz-page-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* الرمز الجديد المتحرك — يُرسم خطاً خطاً (السقف ← الأعمدة ← الحلقة الذهبية) ثم يتكرر */
.nz-loader-mark { width: 48px; height: 48px; color: #1f4d3c; }
.nz-loader-mark .nzm-roof {
  stroke: currentColor;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: nzm-draw-roof 2.4s ease-in-out infinite;
}
.nz-loader-mark .nzm-cols rect {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: bottom;
  animation: nzm-grow-col 2.4s ease-in-out infinite;
}
.nz-loader-mark .nzm-cols rect:nth-child(1) { animation-delay: .30s; }
.nz-loader-mark .nzm-cols rect:nth-child(2) { animation-delay: .42s; }
.nz-loader-mark .nzm-cols rect:nth-child(3) { animation-delay: .54s; }
.nz-loader-mark .nzm-cols rect:nth-child(4) { animation-delay: .66s; }
.nz-loader-mark .nzm-cols rect:nth-child(5) { animation-delay: .78s; }
.nz-loader-mark .nzm-ring {
  stroke-dasharray: 82;
  stroke-dashoffset: 82;
  animation: nzm-draw-ring 2.4s ease-in-out infinite;
  animation-delay: .9s;
}

@keyframes nzm-draw-roof {
  0%        { stroke-dashoffset: 170; }
  25%, 80%  { stroke-dashoffset: 0;   }
  100%      { stroke-dashoffset: 170; }
}
@keyframes nzm-grow-col {
  0%, 12%   { transform: scaleY(0); opacity: 0; }
  35%, 80%  { transform: scaleY(1); opacity: 1; }
  100%      { transform: scaleY(0); opacity: 0; }
}
@keyframes nzm-draw-ring {
  0%, 10%   { stroke-dashoffset: 82; }
  40%, 78%  { stroke-dashoffset: 0;  }
  100%      { stroke-dashoffset: 82; }
}

.nz-loader-txt {
  font-size: 13px;
  color: #4A7A5A;
  /* ⚠️ الخط الجديد — لا تعد لـ Rubik */
  font-family: 'Noto Sans Arabic', system-ui, sans-serif;
}

/* ── أنيميشن الأقساط ── */
.phases {
  overflow: hidden;
  transition: height 0.4s cubic-bezier(0.22,1,0.36,1);
}
.stat { will-change: opacity, transform; }

/* ── عداد البنزين ── */
.od-wrap  { display:inline-flex; flex-direction:row; align-items:flex-end; vertical-align:bottom; line-height:1; }
.od-col   { display:inline-block; overflow:hidden; vertical-align:bottom; width:0; opacity:0; transition:width .38s cubic-bezier(.22,1,.36,1), opacity .38s ease; }
.od-col.show { opacity:1; }
.od-reel  { display:flex; flex-direction:column; }
.od-reel span { display:block; text-align:center; }
.od-comma { display:inline-block; vertical-align:bottom; overflow:hidden; width:0; opacity:0; transition:width .38s cubic-bezier(.22,1,.36,1), opacity .38s ease; }
.od-comma.show { opacity:1; }
.od-unit  { font-size:13px; font-weight:400; color:var(--t2); }
.stat-val { font-size:22px; font-weight:600; min-height:26px; display:flex; align-items:baseline; gap:3px;
  /* ⚠️ IBM Plex Mono للأرقام — لا تحذف */
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
/* كرت الاعتزاز المميّز — رقم ذهبي (هوية ديزاين كلود) */
.stat.is-accent .stat-val { color:var(--am); }

/* =================== أنيميشن وتفاعل الأزرار =================== */
/*
  🎨 نظام موحّد للتفاعل البصري
  المبدأ: كل زر يُظهر ردة فعل فورية عند hover وعند الضغط
  المرجع: نمط Linear.app / Stripe — ارتفاع خفيف + توهج + ضغط عند الكليك
  ⚠️ لا تحذف — هذا النظام يعطي الموقع "حياة" بصرية
*/

/* --- Keyframes --- */
@keyframes nz-btn-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(.94); }
  100% { transform: scale(1); }
}
@keyframes nz-select-in {
  0%   { transform: scale(.96); opacity:.7; }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); opacity:1; }
}
@keyframes nz-result-in {
  0%   { opacity:0; transform: translateY(10px); }
  100% { opacity:1; transform: translateY(0); }
}

/* --- أزرار البنوك (bank-btn) --- */
.bank-btn {
  transition: transform .18s cubic-bezier(.22,1,.36,1),
              box-shadow .18s ease,
              background .2s ease,
              border-color .18s ease !important;
}
.bank-btn:hover:not(.active) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.bank-btn:active { transform: scale(.96) !important; }
.bank-btn.active { animation: nz-select-in .28s cubic-bezier(.22,1,.36,1); }

/* --- أزرار القطاع (sec-btn) --- */
.sec-btn {
  transition: transform .15s cubic-bezier(.22,1,.36,1),
              background .15s ease,
              border-color .15s ease,
              color .15s ease !important;
}
.sec-btn:hover:not(.active) {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,.12);
}
.sec-btn:active { animation: nz-btn-pop .2s ease; }
.sec-btn.active { animation: nz-select-in .25s cubic-bezier(.22,1,.36,1); }

/* --- تبويبات الراتب والمنتج والدعم والمدة --- */
.sal-tab, .prod-tab, .sup-tab, .ten-tab {
  transition: transform .15s cubic-bezier(.22,1,.36,1),
              background .15s ease,
              color .15s ease !important;
}
.sal-tab:hover:not(.active),
.prod-tab:hover:not(.active),
.sup-tab:hover:not(.active),
.ten-tab:hover:not(.active) {
  background: color-mix(in srgb, var(--hi) 8%, transparent);
  color: var(--t1);
  transform: translateY(-1px);
}
.sal-tab:active, .prod-tab:active,
.sup-tab:active, .ten-tab:active {
  transform: scale(.96);
}

/* --- هجري / ميلادي (dc-btn) --- */
.dc-btn {
  transition: transform .15s ease, background .15s ease, border-color .15s ease !important;
}
.dc-btn:hover:not(.active) {
  transform: translateY(-1px);
  border-color: var(--hi);
  color: var(--t1);
}
.dc-btn:active { transform: scale(.94); }

/* --- زر احسب التمويل (calc-btn) --- */
/* ⚠️ hover موجود أصلاً — نضيف فقط active أقوى وripple خفيف */
.calc-btn {
  transition: transform .2s cubic-bezier(.22,1,.36,1),
              box-shadow .2s ease,
              opacity .15s ease !important;
}
.calc-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 28px var(--glow);
}
.calc-btn:active:not(:disabled) { transform: scale(.97) translateY(0) !important; }

/* --- أزرار النسخ والتفاصيل --- */
.copy-btn, .det-toggle, .wa-btn {
  transition: transform .15s ease, background .15s ease,
              border-color .15s ease, color .15s ease !important;
}
.copy-btn:hover, .det-toggle:hover, .wa-btn:hover {
  transform: translateY(-1px);
}
.copy-btn:active, .det-toggle:active, .wa-btn:active {
  transform: scale(.95);
}

/* --- أزرار البنوك السفلية (جوال - bn-btn) --- */
.bn-btn {
  transition: transform .15s cubic-bezier(.22,1,.36,1),
              background .15s ease,
              border-color .15s ease !important;
}
.bn-btn:active { transform: scale(.93); }
.bn-btn.active { animation: nz-select-in .25s cubic-bezier(.22,1,.36,1); }

/* --- زر الطباعة والتحميل في المودال --- */
.print-modal-do, .print-modal-dl {
  transition: transform .15s ease, background .15s ease,
              box-shadow .15s ease !important;
}
.print-modal-do:hover { transform: translateY(-1px); box-shadow: var(--shadow-3); }
.print-modal-dl:hover { transform: translateY(-1px); box-shadow: var(--shadow-3); }
.print-modal-do:active, .print-modal-dl:active { transform: scale(.96); }

/* --- أزرار المصادقة (دخول / إنشاء حساب / Google) --- */
.auth-btn, .google-btn {
  transition: transform .15s ease, box-shadow .15s ease,
              background .15s ease, border-color .15s ease !important;
}
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.auth-btn:active { transform: scale(.97); }
.google-btn:hover { transform: translateY(-1px); }
.google-btn:active { transform: scale(.97); }

/* --- عناصر القائمة العسكرية --- */
.mil-opt {
  transition: background .12s ease, color .12s ease, padding-right .12s ease !important;
}
.mil-opt:hover { padding-right: 17px; }

/* --- ظهور النتيجة --- */
.res-card.result-ready {
  animation: nz-result-in .38s cubic-bezier(.22,1,.36,1);
}

/* الثيم الرسمي — hover أقوى لأن الخلفية فاتحة */
body[data-theme="formal"] .bank-btn:hover:not(.active) {
  box-shadow: 0 4px 14px rgba(31,77,60,.15);
  border-color: #d4cfc4;
}
body[data-theme="formal"] .sec-btn:hover:not(.active) {
  box-shadow: 0 3px 10px rgba(31,77,60,.12);
  border-color: #d4cfc4;
}
body[data-theme="formal"] .calc-btn:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(31,77,60,.20) !important;
}

/* placeholder خانة "بدلات أخرى" — النص طويل فيحتاج خط أصغر ليظهر كاملاً */
#other::placeholder {
  font-size: 10px;
}

/* =================== تمييز حقول التواريخ بصرياً =================== */
/*
  ⚠️ لا تحذف — يميّز تاريخ الميلاد (فيروزي) عن تاريخ التعيين (ذهبي)
  نفس الألوان المستخدمة على الشريط bar-label.birth و bar-label.appoint
*/
.birth-fields input {
  border-color: rgba(74,158,150,.35) !important;
}
.birth-fields input:focus {
  border-color: #4A9E96 !important;
  box-shadow: 0 0 0 3px rgba(74,158,150,.12) !important;
}
.appoint-fields input {
  border-color: rgba(245,158,11,.35) !important;
}
.appoint-fields input:focus {
  border-color: #F59E0B !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.12) !important;
}
/* الثيم الرسمي — نفس التمييز على خلفية فاتحة */
[data-theme="formal"] .birth-fields input {
  border-color: rgba(42,122,116,.4) !important;
}
[data-theme="formal"] .birth-fields input:focus {
  border-color: #2a7a74 !important;
  box-shadow: 0 0 0 3px rgba(42,122,116,.14) !important;
}
[data-theme="formal"] .appoint-fields input {
  border-color: rgba(192,112,16,.4) !important;
}
[data-theme="formal"] .appoint-fields input:focus {
  border-color: #c07010 !important;
  box-shadow: 0 0 0 3px rgba(192,112,16,.14) !important;
}

/* =================== أنيميشن نبض زر العسكري =================== */
/*
  ⚠️ لا تحذف — يلفت انتباه المستخدم لاختيار الرتبة
  يُفعَّل بإضافة class="needs-rank" من app.js عند اختيار عسكري
  يُوقَف بحذف needs-rank عند اختيار الرتبة في selRank()
*/
@keyframes nz-rank-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(var(--hi-rgb, 26,138,96), 0);
    border-color: color-mix(in srgb, var(--hi) 50%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(var(--hi-rgb, 26,138,96), 0.18);
    border-color: var(--hi);
  }
}
.military-btn.needs-rank {
  animation: nz-rank-pulse 1.4s ease-in-out infinite;
  border-color: color-mix(in srgb, var(--hi) 50%, transparent);
  /* ⚠️ لا تحذف will-change — يمنع إعادة رسم الصفحة مع كل نبضة (Forced Reflow) */
  will-change: box-shadow, border-color;
}
/* الثيم الرسمي */
[data-theme="formal"] .military-btn.needs-rank {
  animation: nz-rank-pulse 1.4s ease-in-out infinite;
  will-change: box-shadow, border-color;
}

/* placeholder خانة "بدلات أخرى" — النص طويل فيحتاج خط أصغر */
#other::placeholder { font-size: 10px; }

/* =================== أيقونة التقويم + Picker هجري =================== */
/*
  ⚠️ لا تحذف — نظام اختيار التاريخ الهجري بالـ pagination
  nz-date-wrap: يلف كل حقل تاريخ مع زر الأيقونة والـ picker
  nz-cal-btn: زر الأيقونة الصغير داخل الحقل
  nz-picker: القائمة المنسدلة — تُبنى ديناميكياً من app.js
*/
/* nz-date-wrap: يلف الخانة مع زر الأيقونة والـ picker — مستخدم في nz-date-row */
.nz-date-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}
.nz-date-wrap input {
  flex: 1;
  min-width: 0;
}
.nz-cal-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--t3);
  padding: 4px 5px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.nz-cal-btn:hover { color: var(--hi); background: color-mix(in srgb, var(--hi) 8%, transparent); }

/* القائمة المنسدلة */
.nz-picker {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  width: 200px;
  background: var(--s1);
  border: 1px solid var(--b2);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  z-index: 9999;
  overflow: hidden;
  direction: rtl;
}
.nz-picker.open { display: block; }

/* رأس الـ picker — السنة الحالية + أسهم */
.nz-picker-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--b1);
}
.nz-picker-nav span {
  font-size: 12px;
  font-weight: 600;
  color: var(--t1);
}
.nz-nav-btn {
  background: none;
  border: 1px solid var(--b1);
  border-radius: 5px;
  width: 24px; height: 24px;
  cursor: pointer;
  color: var(--t2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: background .12s, color .12s;
  font-family: inherit;
}
.nz-nav-btn:hover { background: var(--s2); color: var(--t1); }
.nz-nav-btn:disabled { opacity: .3; cursor: default; }

/* شبكة السنوات 3×3 */
.nz-year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 8px;
}
.nz-yr {
  padding: 7px 4px;
  text-align: center;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--t1);
  border: 1px solid transparent;
  transition: background .1s, color .1s;
}
.nz-yr:hover { background: var(--s2); border-color: var(--b1); }
.nz-yr.sel { background: var(--hi); color: #fff; border-color: transparent; }

/* شبكة الأشهر 3×4 */
.nz-month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 8px;
}
.nz-mo {
  padding: 7px 3px;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .1s, color .1s;
}
.nz-mo:hover { background: var(--s2); border-color: var(--b1); }
.nz-mo.sel { background: var(--hi); color: #fff; }
.nz-mo-num { font-size: 13px; font-weight: 600; color: var(--t1); }
.nz-mo.sel .nz-mo-num { color: #fff; }
.nz-mo-name { font-size: 9px; color: var(--t3); margin-top: 1px; }
.nz-mo.sel .nz-mo-name { color: rgba(255,255,255,.8); }

/* الثيم الرسمي — picker التواريخ */
[data-theme="formal"] .nz-picker {
  background: #fcfaf5;
  border-color: #e4ddcf;
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
}
[data-theme="formal"] .nz-picker-nav { border-color: #ece6d8; }
[data-theme="formal"] .nz-nav-btn { border-color: #e4ddcf; color: #3d4942; }
[data-theme="formal"] .nz-nav-btn:hover { background: #f0ece3; color: #1a221d; }
[data-theme="formal"] .nz-yr { color: #1a221d; }
[data-theme="formal"] .nz-yr:hover { background: #f0ece3; border-color: #e4ddcf; }
[data-theme="formal"] .nz-yr.sel { background: #1f4d3c; color: #fff; }
[data-theme="formal"] .nz-mo-num { color: #1a221d; }
[data-theme="formal"] .nz-mo-name { color: #6f7a72; }
[data-theme="formal"] .nz-mo:hover { background: #f0ece3; border-color: #e4ddcf; }
[data-theme="formal"] .nz-mo.sel { background: #1f4d3c; }
[data-theme="formal"] .nz-mo.sel .nz-mo-num,
[data-theme="formal"] .nz-mo.sel .nz-mo-name { color: #fff; }

/* إخفاء أسهم spinner من كل خانات الأرقام */
/* ⚠️ لا تحذف — الأسهم تزعج المستخدم ولا فائدة منها */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ============================================================
   variant-balanced.css — التصميم الجديد
   مضاف كما هو — لا تعدّل هذا القسم يدوياً
   ============================================================ */
/* Variant 2 — متوازن (Balanced — emerald premium)
   Warm cream + deep emerald + thin gold accent. Generous spacing,
   rounded-2 corners, subtle dividers, large numbers, no shadows. */

.bp-root {
  --bp-bg:        #f6f3ec;
  --bp-bg-2:      #fcfaf5;
  --bp-bg-3:      #fffefa;
  --bp-tint:      #ecd9c2;
  --bp-ink:       #1a221d;
  --bp-ink-2:     #3d4942;
  --bp-ink-3:     #6f7a72;
  --bp-ink-4:     #9aa39c;
  --bp-line:      #e4ddcf;
  --bp-line-2:    #ece6d8;
  --bp-emerald:   #1f4d3c;
  --bp-emerald-2: #2a6552;
  --bp-emerald-3: #134132;
  --bp-gold:      #8b6a2a;
  --bp-accent:    #b7884a;
  --bp-radius:    8px;
  --bp-radius-sm: 5px;
  --bp-font-ar:   "Noto Sans Arabic", system-ui, sans-serif;
  --bp-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  font-family: var(--bp-font-ar);
  color: var(--bp-ink);
  background: var(--bp-bg);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Header ---------- */
.bp-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 18px 40px;
  background: var(--bp-bg-2);
  border-bottom: 1px solid var(--bp-line);
  /* ⚠️ الهيدر فيه أنيميشن دخول بـ transform (fill:both) يصنع stacking context محبوساً.
     بدون z-index أعلى من .bp-results (z:1) تختفي القائمة المنسدلة خلف أزرار البنوك.
     position:relative + z-index يرفعان الهيدر (والقائمة) فوق قسم النتائج. */
  position: relative;
  z-index: 1000;
}
.bp-brand { display: flex; align-items: center; gap: 14px; }
.bp-logo {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  position: relative;
}
/* الرمز الجديد (العين المعمارية) يأخذ لون الثيم: #1f4d3c فاتح · #6ec79f داكن (نعناعي) */
.bp-logo-svg { width: 42px; height: 42px; color: var(--bp-emerald); }
.bp-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.bp-brand-name {
  font-family: 'Aref Ruqaa', serif;
  font-size: 24px; font-weight: 700; color: var(--bp-emerald);
  letter-spacing: 0;
}
.bp-brand-tag {
  font-size: 11px; color: var(--bp-ink-3); margin-top: 3px;
}
.bp-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bp-bg);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--bp-line);
  overflow: hidden;
  transition: width .35s cubic-bezier(.22,1,.36,1);
}
.bp-nav-link {
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 6px;
  color: var(--bp-ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.bp-nav-link:hover { background: var(--bp-bg-2); }
.bp-nav-link.is-active {
  background: var(--bp-emerald);
  color: #fcfaf5;
  font-weight: 600;
  border-radius: 4px;
}
/* التبويبان المخفيان — إخفاء حقيقي */
.bp-nav-link--soon {
  opacity: 0;
  max-width: 0;
  padding-inline: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity .25s ease, max-width .35s cubic-bezier(.22,1,.36,1), padding .35s;
  white-space: nowrap;
}
.bp-nav.expanded .bp-nav-link--soon {
  opacity: .55;
  max-width: 200px;
  padding-inline: 16px;
  pointer-events: none;
}
/* زر السهم */
.bp-nav-expand {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  background: var(--bp-emerald);
  border: none; border-radius: 4px;
  color: #fcfaf5;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  animation: bpNavArrowBounce 2s ease-in-out infinite;
}
.bp-nav.expanded .bp-nav-expand {
  transform: rotate(180deg);
  animation: none;
}
@keyframes bpNavArrowBounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
}

/* إزالة CSS القديم للـ dropdown */
.bp-nav-item { display: none; }
.bp-nav-chev { display: none; }
.bp-nav-dropdown { display: none !important; }
.bp-nav-dd-item { display: none; }
.bp-header-side { display: flex; align-items: center; gap: 12px; }
.bp-search {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: 999px;
  color: var(--bp-ink-3);
  font-size: 13px;
  min-width: 240px;
}
.bp-search kbd {
  font-family: var(--bp-font-mono);
  font-size: 10px;
  padding: 1px 6px;
  background: var(--bp-bg-2);
  border: 1px solid var(--bp-line);
  border-radius: 4px;
  margin-inline-start: auto;
  color: var(--bp-ink-3);
}
.bp-btn-primary {
  font-family: inherit;
  font-size: 13px;
  padding: 10px 18px;
  background: var(--bp-emerald);
  color: var(--bp-bg-3);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .1px;
  white-space: nowrap;
  transition: background .15s;
}
.bp-btn-primary:hover { background: var(--bp-emerald-2); }

/* ---------- Body ---------- */
.bp-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1.1fr 1.2fr; /* RTL: inputs visually on right */
  gap: 0;
}

/* ---------- Inputs panel ---------- */
.bp-inputs {
  padding: 36px 40px 56px;
  background: var(--bp-bg-2);
  border-left: 1px solid var(--bp-line);
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.bp-panel-eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--bp-ink-3);
  text-transform: uppercase;
  font-family: var(--bp-font-mono);
}
.bp-panel-head h2 {
  font-size: 24px; font-weight: 700; color: var(--bp-emerald);
  margin: 6px 0 4px;
  letter-spacing: -.4px;
}
.bp-panel-head p {
  font-size: 13px; color: var(--bp-ink-3); margin: 0;
}

.bp-section {
  display: flex; flex-direction: column; gap: 18px;
}
.bp-section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 14px;
}
.bp-section-no {
  /* v46: مربّع أخضر بدل رقم باهت — لون من متغيّر الثيم */
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:7px;
  background:var(--acc); color:#fff;
  font-family: var(--bp-font-mono);
  font-size: 11px; font-weight:600;
  letter-spacing: .5px; padding:0;
}
/* v46: في الثيم الداكن المربّع نعناعي واضح بنص غامق (الأخضر الغامق يختفي على الخلفية السوداء) */
body:not([data-theme="formal"]) .sec-num,
body:not([data-theme="formal"]) .bp-section-no { background: var(--hi); color: #0d1a12; }
.bp-section-title {
  font-size: 15px; font-weight: 700; color: var(--bp-ink); margin: 0;
  letter-spacing: -.1px;
}
.bp-section-sub {
  font-size: 12.5px; color: var(--bp-ink-3); margin: 3px 0 0;
}
.bp-section-action { padding-top: 2px; }
.bp-link {
  background: none; border: none; padding: 4px 0;
  font-family: inherit; font-size: 12px;
  color: var(--bp-emerald);
  cursor: pointer;
  font-weight: 600;
}
.bp-link:hover { color: var(--bp-emerald-3); }

/* Field */
.bp-field { display: flex; flex-direction: column; gap: 7px; }
.bp-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--bp-ink-2);
  letter-spacing: .1px;
}
.bp-hint { font-size: 12px; color: var(--bp-ink-4); }

.bp-input {
  font-family: var(--bp-font-mono);
  font-size: 15px;
  color: var(--bp-ink);
  background: var(--bp-bg-3);
  border: 1px solid var(--bp-line);
  padding: 12px 14px;
  width: 100%;
  outline: none;
  border-radius: var(--bp-radius-sm);
  appearance: none;
  transition: border-color .15s, background .15s;
}
.bp-input:focus { border-color: var(--bp-emerald); background: #fff; }

.bp-numwrap { position: relative; }
.bp-suffix {
  position: absolute; inset-block: 0;
  inset-inline-start: 12px;
  display: flex; align-items: center;
  font-family: var(--bp-font-mono);
  font-size: 11px;
  color: var(--bp-ink-4);
  pointer-events: none;
}
.bp-numwrap .bp-input { padding-inline-start: 46px; }

/* Switch */
.bp-switch {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--bp-ink-2);
  font-weight: 500;
}
.bp-switch input { display: none; }
.bp-switch-track {
  width: 36px; height: 20px;
  background: var(--bp-line);
  border-radius: 999px;
  position: relative;
  transition: background .2s;
}
.bp-switch-thumb {
  position: absolute;
  top: 2px;
  /* ⚠️ right بدل inset-inline-end — RTL يعكس inset-inline-end فيكسر الحركة:
     الـ thumb يبدأ من اليمين (2px) ويتحرك لليسار عند التفعيل (translateX) */
  right: 2px; left: auto;
  width: 16px; height: 16px;
  background: var(--bp-bg-3);
  border-radius: 50%;
  transition: transform .2s;
}
.bp-switch input:checked + .bp-switch-track { background: var(--bp-emerald); }
/* track=36px - thumb=16px - 2px margin يمين - 2px margin يسار = 16px إزاحة */
.bp-switch input:checked + .bp-switch-track .bp-switch-thumb { transform: translateX(-16px); }

/* اعتزاز */
.bp-itzaz {
  /* ⚠️ لا تُعد للإطار القديم (padding+border+background) — أُزيل عمداً (v39)
     النص يمين (يأخذ المساحة) والزر يُدفع لأقصى اليسار */
  display: flex; align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 4px 0;
}
/* النص يأخذ المساحة المتبقية — order:1 يجعله أول بصرياً في RTL (= يمين) */
.bp-itzaz > div { flex: 1; order: 1; }
/* الزر يُدفع لأقصى اليسار — order:2 يجعله ثانياً بصرياً في RTL (= يسار) */
.bp-itzaz > label.bp-switch { order: 2; flex-shrink: 0; }
/* strong فقط — span كان كوداً ميتاً (لا يوجد span في HTML) */
.bp-itzaz strong { font-size: 13px; color: var(--bp-ink); font-weight: 600; }

/* Tenor */
.bp-tenor {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 22px;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius);
}
.bp-tenor-readout {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--bp-font-mono);
}
.bp-tenor-years { font-size: 36px; font-weight: 600; color: var(--bp-emerald); line-height: 1; }
.bp-tenor-unit  { font-size: 14px; color: var(--bp-ink-3); }
.bp-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: linear-gradient(to right, var(--bp-emerald) 0%, var(--bp-emerald) 100%);
  background-color: var(--bp-line-2);
  border-radius: 999px;
  outline: none;
  direction: ltr;
}
.bp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  background: var(--bp-bg-3);
  border: 2px solid var(--bp-emerald);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.bp-range::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--bp-bg-3);
  border: 2px solid var(--bp-emerald);
  border-radius: 50%;
  cursor: pointer;
}
.bp-range:disabled { opacity: .4; }
.bp-tenor-ticks {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  font-family: var(--bp-font-mono);
  font-size: 11px;
  color: var(--bp-ink-4);
  direction: ltr;
  /* الهامش = نصف عرض المقبض (22px/2=11px) ليتطابق أول/آخر رقم مع طرفي المسار الفعليين */
  padding: 0 11px;
}
/* محاذاة كل رقم تحت موضعه على المسار: الأول لليسار، الأخير لليمين، والوسط متمركز */
.bp-tenor-ticks span { text-align: center; }
.bp-tenor-ticks span:first-child { text-align: left; }
.bp-tenor-ticks span:last-child  { text-align: right; }
.bp-tenor-meta { font-size: 12px; color: var(--bp-ink-3); margin-top: 4px; }
.bp-tenor-meta b { color: var(--bp-ink); font-family: var(--bp-font-mono); font-weight: 600; }

/* ---------- Results panel ---------- */
.bp-results {
  padding: 36px 40px 56px;
  display: flex; flex-direction: column; gap: 24px;
  background: var(--bp-bg);
}

/* Dark mode */
.bp-root.is-dark {
  --bp-bg:        #131816;
  --bp-bg-2:      #181f1c;
  --bp-bg-3:      #1e2723;
  --bp-tint:      #d8b97f;
  --bp-ink:       #ede7d6;
  --bp-ink-2:     #c8c6bb;
  --bp-ink-3:     #8a8d85;
  --bp-ink-4:     #5e6360;
  --bp-line:      #2a322e;
  --bp-line-2:    #232a26;
  --bp-emerald:   #6ec79f;
  --bp-emerald-2: #82d6af;
  --bp-emerald-3: #5ab28a;
  --bp-gold:      #d8b97f;
  --bp-accent:    #d8b97f;
}
.bp-root.is-dark .bp-btn-primary { background: var(--bp-emerald); color: var(--bp-bg); }
.bp-root.is-dark .bp-nav-link.is-active { background: var(--bp-emerald); color: var(--bp-bg); }
/* bp-itzaz في الثيم الداكن — لا يحتاج override (الإطار أُزيل في v39) */

/* ══════════════════════════════════════════════════════════════
   الثيم الداكن — تصحيحات الهوية الموحّدة (v40)
   هذا الـ block مقصود — لا تعدّل داخله إلا بمعرفة السياق كاملاً
   ══════════════════════════════════════════════════════════════ */

/* ب-1: أزرار القطاع في الثيم الداكن — نص داكن على نعناعي فاتح
   المشكلة: #fcfaf5 على #6ec79f = 1.4:1 (فاشل WCAG AA)
   الحل: #0d1a12 على #6ec79f ≈ 8.2:1 (يتجاوز WCAG AAA) */
body:not([data-theme="formal"]) .sec-btn.active {
  color: #0d1a12 !important;
}
body:not([data-theme="formal"]) .military-btn.active {
  color: #0d1a12 !important;
}

/* ب-1ب: تعميم إصلاح التباين على كل عناصر «المختار» (.active) التي خلفيتها نعناعية
   في الثيم الداكن (--bp-emerald = #6ec79f). كانت كلها color:#fff = أبيض على نعناعي
   فاتح ≈ 1.6:1 (فاشل WCAG). الحل: نفس نص زر القطاع #0d1a12 ≈ 8.2:1 (AAA).
   يشمل: تبويبات الراتب، نعم/لا الالتزامات، أزرار الدعم، تبويبات المنتج،
   زر «حتى التقاعد»، أزرار البنوك المختارة، زر «التالي/احسب».
   ⚠️ الثيم الفاتح غير متأثر — هناك --bp-emerald=#1f4d3c (أخضر غامق) والأبيض عليه سليم. */
body:not([data-theme="formal"]) .sal-tab.active,
body:not([data-theme="formal"]) .wz-oblig-yes.active,
body:not([data-theme="formal"]) .wz-oblig-no.active,
body:not([data-theme="formal"]) .dc-btn.active,
body:not([data-theme="formal"]) .prod-tab.active,
body:not([data-theme="formal"]) .sup-tab.active,
body:not([data-theme="formal"]) #tenRetireBtn.active,
body:not([data-theme="formal"]) #bottomNav .bn-btn.active,
body:not([data-theme="formal"]) #wzNextBtn {
  color: #0d1a12 !important;
}

/* ج-إصلاح (2026-06-05): توحيد التبويب المختار في الداكن على الديسكتوب.
   المشكلة: .prod-tab.active و .sup-tab.active خلفيتهما var(--s2) الداكنة
   (لا نعناعية)، بينما القاعدة أعلاه تُجبر نصّهما على #0d1a12 الداكن →
   نص داكن على خلفية داكنة = شبه غير مقروء. الحل: نعطيهما الخلفية النعناعية
   مثل بقية التبويبات المختارة (sal-tab) فيصبح النص الداكن مقروءاً والهوية موحّدة.
   مقصور على الديسكتوب لأن الجوال له معالجته الخاصة (نعناعي أصلاً). */
@media (min-width: 769px) {
  body:not([data-theme="formal"]) .prod-tab.active,
  body:not([data-theme="formal"]) .sup-tab.active {
    background: var(--hi) !important;
    box-shadow: none !important;
  }
}

/* ب-2: أزرار البنوك في الثيم الداكن — حد نظيف + شريط سفلي فقط
   إزالة glow وgradient الملوّنَين — الشريط ::before يكفي للتمييز */
body:not([data-theme="formal"]) .bank-btn {
  background: var(--s1);
  color: var(--t3);
}
body:not([data-theme="formal"]) .bank-btn.active {
  background: var(--s2) !important;
  color: var(--t1) !important;
  border-color: var(--hi) !important;
  box-shadow: none !important;
  transform: none !important;
}
body:not([data-theme="formal"]) .bank-btn.active::after {
  opacity: 0 !important;
}
body:not([data-theme="formal"]) .bank-btn.active::before {
  opacity: 1 !important;
}

/* نفس المعالجة لأزرار الجوال */
body:not([data-theme="formal"]) .bn-btn.active {
  background: var(--s2) !important;
  color: var(--t1) !important;
  border-color: var(--hi) !important;
  box-shadow: none !important;
}
body:not([data-theme="formal"]) .bn-btn.active::after {
  opacity: 0 !important;
}

/* ب-3: ANB في الثيم الداكن — نظيف بدون glow مزدوج */
body:not([data-theme="formal"]) [data-bank="anb"] .bank-btn[data-bank="anb"].active {
  border-color: #9050D8 !important;
  box-shadow: none !important;
  background: var(--s2) !important;
}
body:not([data-theme="formal"]) [data-bank="anb"] .bank-btn[data-bank="anb"].active::after {
  opacity: 0 !important;
}
/* bn-btn جوال ANB */
body:not([data-theme="formal"]) [data-bank="anb"] .bn-btn[data-bank="anb"].active {
  border-color: #9050D8 !important;
  box-shadow: none !important;
}
/* ⚠️ brand-icon وcalc-btn الخاص بـ ANB يبقى — التدرج مقصود */

/* ج-2: رفع وضوح نصوص أزرار القطاع الخامدة */
body:not([data-theme="formal"]) .sec-btn:not(.active),
body:not([data-theme="formal"]) .military-btn:not(.active) {
  color: var(--t2);
}

/* نص موحّد #0d1a12 على كل خلفية نعناعية في الثيم الداكن
   ⚠️ brand-icon مستثنى عمداً — هوية بصرية، لا تُضف له هنا */
body:not([data-theme="formal"]) .avatar,
body:not([data-theme="formal"]) .ud-avatar,
body:not([data-theme="formal"]) .us-avatar,
body:not([data-theme="formal"]) #salTabDirect,
body:not([data-theme="formal"]) #salTabFull,
body:not([data-theme="formal"]) .bp-root .bp-btn-primary {
  color: #0d1a12 !important;
}

/* ══════════════════════════════════════════════════════════════ */

/* ============================================================
   ربط نظام الثيمين بـ bp-root
   body[data-theme="formal"] = فاتح → bp-root بدون is-dark
   body:not([data-theme="formal"]) = داكن → bp-root.is-dark
   ============================================================ */

/* الثيم الداكن — يُفعَّل تلقائياً عند عدم وجود formal */
body:not([data-theme="formal"]) .bp-root {
  --bp-bg:        #131816;
  --bp-bg-2:      #181f1c;
  --bp-bg-3:      #1e2723;
  --bp-tint:      #d8b97f;
  --bp-ink:       #ede7d6;
  --bp-ink-2:     #c8c6bb;
  --bp-ink-3:     #8a8d85;
  --bp-ink-4:     #5e6360;
  --bp-line:      #2a322e;
  --bp-line-2:    #232a26;
  --bp-emerald:   #6ec79f;
  --bp-emerald-2: #82d6af;
  --bp-emerald-3: #5ab28a;
  --bp-gold:      #d8b97f;
  --bp-accent:    #d8b97f;
  /* لغة الزوايا — الطابع التقني/المودرن: انحناء ناعم موحّد */
  --r-ctrl: 10px;
  --r-card: 14px;
  --r-chip: 8px;
}

/* الثيم الفاتح — الافتراضي، يُطبَّق على bp-root */
body[data-theme="formal"] .bp-root {
  --bp-bg:        #f6f3ec;
  --bp-bg-2:      #fcfaf5;
  --bp-bg-3:      #fffefa;
  --bp-tint:      #ecd9c2;
  --bp-ink:       #1a221d;
  --bp-ink-2:     #3d4942;
  --bp-ink-3:     #6f7a72;
  --bp-ink-4:     #9aa39c;
  --bp-line:      #e4ddcf;
  --bp-line-2:    #ece6d8;
  --bp-emerald:   #1f4d3c;
  --bp-emerald-2: #2a6552;
  --bp-emerald-3: #134132;
  --bp-gold:      #8b6a2a;
  --bp-accent:    #b7884a;
  /* لغة الزوايا — الطابع الرسمي: انحناء خفيف (لا حادّ تماماً) */
  --r-ctrl: 4px;
  --r-card: 10px;
  --r-chip: 4px;
}

/* bp-root يأخذ كامل الشاشة */
#appScreen { min-height: 100vh; }
.bp-root { min-height: 100vh; }

/* زر الثيم داخل bp-header — زوايا حادة */
body[data-theme="formal"] .theme-toggle-btn {
  background: #1f4d3c;
  border-color: transparent;
  color: #fcfaf5;
  font-family: var(--bp-font-ar);
  border-radius: 4px;
}
body:not([data-theme="formal"]) .theme-toggle-btn {
  background: var(--bp-bg-2);
  border: 1.5px solid var(--bp-line);
  color: var(--bp-ink-3);
  border-radius: 4px;
}

/* التبويبات غير الفعّالة — placeholder لمستقبل */
.bp-nav-link--soon {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

/* أفاتار المستخدم داخل bp-header */
body[data-theme="formal"] .user-avatar-wrap {
  background: var(--bp-bg-2);
  border: 1.5px solid var(--bp-line);
}
body:not([data-theme="formal"]) .user-avatar-wrap {
  background: var(--bp-bg-2);
  border: 1.5px solid var(--bp-line);
}
.user-avatar-wrap:hover { border-color: var(--bp-emerald) !important; }

/* الـ bp-inputs يحتوي sec-box — نزيل padding الـ sec-box */
.bp-inputs .sec-box {
  background: transparent;
  border: none;
  border-radius: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* فاصل بين الأقسام داخل bp-inputs */

/* bp-results — padding بدل wrap */
.bp-results {
  padding: 36px 40px 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--bp-bg);
  min-width: 0;
}

/* bp-inputs — min-width لمنع overflow */
.bp-inputs { min-width: 0; }

/* جوال: عمود واحد */
@media(max-width: 900px) {
  .bp-body {
    grid-template-columns: 1fr;
  }
  .bp-inputs {
    padding: 24px 20px 32px;
  }
  .bp-results {
    padding: 24px 20px 100px;
  }
  .bp-header {
    padding: 14px 20px;
    grid-template-columns: 1fr auto;
  }
}

/* ============================================================
   عناصر الواجهة الجديدة — قسم المدخلات
   ============================================================ */

/* ── خانات الراتب المتلاصقة ── */
.nz-sal-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 10px;
}
.nz-sal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nz-sal-field .bp-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--bp-emerald);
  padding: 0 2px;
}
.nz-sal-field .bp-numwrap {
  position: relative;
  border: 1px solid var(--bp-line);
  border-radius: 0;
  background: var(--bp-bg-3);
  border-inline-start: none;
}
.nz-sal-field:last-child .bp-numwrap {
  border-inline-start: 1px solid var(--bp-line);
}
.nz-sal-field:first-child .bp-numwrap {
  border-inline-end: 1px solid var(--bp-line);
}
.nz-sal-field .bp-input {
  border: none;
  border-radius: 0;
  /* padding-inline-end يحجز مكان ر.س على اليسار في RTL */
  padding: 10px 12px 10px 40px;
  padding-inline-end: 12px;
  padding-inline-start: 40px;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  color: var(--bp-ink);
  font-family: var(--bp-font-mono);
  width: 100%;
  text-align: right;
  outline: none;
  box-shadow: none;
}
.nz-sal-field .bp-input:focus {
  background: transparent;
  box-shadow: none;
}
/* ر.س على اليسار — override كامل للتعريف العام */
.nz-sal-field .bp-suffix {
  position: absolute !important;
  inset-block: 0 !important;
  inset-inline-start: 10px !important;
  inset-inline-end: auto !important;
  left: 10px !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
  font-size: 10px !important;
  color: var(--bp-ink-3) !important;
  font-family: var(--bp-font-mono) !important;
  pointer-events: none !important;
}
.nz-sal-row { display: none; }
.nz-sal-input { display: none; }
.nz-sal-unit { display: none; }

/* زر إدخال الصافي يدوياً — خلفية خضراء حادة */
#salTabDirect, #salTabFull {
  flex: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fcfaf5 !important;
  padding: 6px 12px !important;
  background: var(--bp-emerald) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: opacity .15s !important;
  transform: none !important;
}
#salTabDirect:hover, #salTabFull:hover {
  opacity: .85 !important;
  background: var(--bp-emerald) !important;
  transform: none !important;
  color: #fcfaf5 !important;
}
#salTabDirect.active, #salTabFull.active {
  background: var(--bp-emerald) !important;
  color: #fcfaf5 !important;
  box-shadow: none !important;
  transform: none !important;
}
[data-theme="formal"] #salTabDirect,
[data-theme="formal"] #salTabFull {
  background: #1f4d3c !important;
  color: #fcfaf5 !important;
}

/* صف الصافي — "الصافي" أمام + الخانة ممتدة */
.nz-sal-net-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 6px;
  border: 1.5px solid var(--bp-emerald);
  border-radius: 0;
  background: var(--bp-bg-3);
}
.nz-sal-net-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--bp-emerald);
  white-space: nowrap;
  padding: 10px 14px;
  border-inline-start: none;
  flex-shrink: 0;
}
.nz-sal-net {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  flex: 1;
  border-inline-end: none;
  background: transparent;
  border: none;
  border-inline-start: 1.5px solid var(--bp-emerald);
}
.nz-sal-net-label { display: none; }
.nz-sal-net-val {
  font-family: var(--bp-font-mono);
  font-size: 18px; font-weight: 600;
  color: var(--bp-emerald);
  flex: 1; text-align: start;
}
.nz-sal-net-unit { font-size: 11px; color: var(--bp-ink-3); }

/* خانات الصافي المباشر — عمودان */
#salDirect .nz-sal-group {
  grid-template-columns: 1fr 1fr;
}

/* ════════ التواريخ — التصميم الموحّد (v28) ════════ */
/* زوايا حادّة (هوية الجدية) + حدود ملطّفة + خيط ذهبي + تبويب منفصل */
/* المرجع الوحيد لتنسيق التواريخ — لا تكرر هذه القواعد في مكان آخر */

.nz-date-label { font-size:11px; font-weight:600; white-space:nowrap; flex-shrink:0; color:var(--t1); }
.nz-date-block { display:flex; flex-direction:column; gap:9px; flex:1; }

/* التبويب: زرّان منفصلان (هجري/ميلادي) بفراغ بينهما وعن الخانة */
.date-cal-tabs { display:flex; gap:6px; width:100%; }
.dc-btn {
  flex:1; text-align:center;
  padding:7px 0; border-radius:0; font-size:11px;
  cursor:pointer; font-family:inherit;
  border:1px solid #d4cfc4;
  background:#fcfaf5; color:#1f4d3c;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.dc-btn.active {
  background:#1f4d3c; border-color:#1f4d3c;
  color:#fff; font-weight:700;
}
.dc-btn:hover:not(.active) { border-color:#1f4d3c; }
.dc-btn:active { transform:scale(.96); }

/* صف الخانتين: السنة + الشهر داخل إطار واحد ملتصق بزوايا حادّة */
.nz-date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid #d4cfc4;
  border-bottom: 2px solid #8b6a2a;
  border-radius: 0;
  background: #faf7f0; /* بيج صلب يحجب النقش — كان #fcfaf5 ينفذ منه */
  overflow: hidden;
  transition: border-bottom-color .15s ease;
}
.nz-date-row .nz-date-wrap {
  border-left: 1px solid #e4ddcf;
  position: relative;
}
.nz-date-row .nz-date-wrap:last-child { border-left: none; }
.nz-date-row .bp-input {
  border: none; border-radius: 0; background: transparent;
  padding: 12px 34px 12px 12px;
  width: 100%;
  font-size: 14px;
}
/* عند التركيز: يغمق الخيط الذهبي بدل إطار أخضر صارم */
.nz-date-row:focus-within { border-bottom-color: #6b4f1f; }
.nz-date-row .bp-input:focus { outline: none; }
.nz-date-row .nz-cal-btn {
  position: absolute;
  inset-inline-start: 8px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--bp-ink-3); cursor: pointer; padding: 4px;
}
.nz-date-row .nz-picker { position: absolute; z-index: 100; top: calc(100% + 4px); inset-inline-start: 0; }

/* ── التواريخ في الثيم الداكن (وكل ثيمات البنوك) ── */
/* يستخدم المتغيرات ليتكيّف تلقائياً مع كل ثيم داكن — الذهبي أهدأ من ذهبي الكروت المضيء */
/* body:not([data-theme="formal"]) = الداكن (الموثّق في الملف) — أعلى تحديداً من القاعدة العامة */
body:not([data-theme="formal"]) .dc-btn {
  border-color: var(--b1);
  background: var(--s2);
  color: var(--t1);
}
body:not([data-theme="formal"]) .dc-btn:hover:not(.active) { border-color: var(--hi); }
body:not([data-theme="formal"]) .dc-btn.active {
  /* ⚠️ v40: ثابت على النعناعي من :root — لا يتغيّر مع البنك */
  background: #6ec79f;
  border-color: #6ec79f;
  color: #131816;
}
body:not([data-theme="formal"]) .nz-date-row {
  border-color: var(--b1);
  border-bottom: 2px solid #a98a55;
  background: var(--s2);
}
body:not([data-theme="formal"]) .nz-date-row .nz-date-wrap { border-left-color: var(--b1); }
body:not([data-theme="formal"]) .nz-date-row .bp-input { color: var(--t1); }
body:not([data-theme="formal"]) .nz-date-row:focus-within { border-bottom-color: var(--am); }

/* ── الالتزامات ── */
/* أزرار نعم/لا للالتزامات: مخفية على الديسكتوب (يُستخدم زر «+» في رأس القسم)،
   تظهر على الجوال فقط داخل @media(max-width:768px). */
.wz-oblig-choice { display: none; }
.nz-oblig-list {
  display: flex; flex-direction: column; gap: 0;
  margin-bottom: 8px;
  overflow: hidden;
}
/* أنيميشن ظهور كل التزام */
@keyframes nz-oblig-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nz-oblig-row {
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  align-items: end;
  gap: 0;
  animation: nz-oblig-in .25s cubic-bezier(.22,1,.36,1);
  /* بدون بطاقة */
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
.nz-oblig-ix { display: none; }
.nz-oblig-field { display: flex; flex-direction: column; gap: 4px; }
.nz-oblig-field .bp-input {
  border-radius: 0;
  border: 1px solid var(--bp-line);
  border-inline-start: none;
  background: var(--bp-bg-3);
}
.nz-oblig-field:first-of-type .bp-input {
  border-inline-start: 1px solid var(--bp-line);
}
.nz-oblig-del {
  align-self: stretch;
  width: 36px;
  background: transparent;
  border: 1px solid var(--bp-line);
  border-inline-start: none;
  border-radius: 0;
  color: var(--bp-ink-3);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s, color .2s;
}
.nz-oblig-del:hover { background: #b4474215; color: #b44742; }

/* لابلات فوق خانات الالتزام */
.nz-oblig-labels {
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  gap: 0;
  margin-bottom: 4px;
}
.nz-oblig-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--bp-ink-3);
  padding: 0 4px;
}
/* توضيح فوق الخانة الأولى: التزام القرض الشخصي */
.nz-oblig-personal-cap {
  font-size: 11px;
  font-weight: 600;
  color: var(--bp-emerald);
  padding: 0 4px;
  margin-bottom: 5px;
}

/* ===== تعديل الاستقطاع (فوق النتيجة) ===== */
/* ── تعديل الاستقطاع ── */
/* الزر أسفل الأقساط — هامش فوقه للفصل عن النتائج */
.ded-adjust { margin: 16px 0 0; }

/* الزر: لون الثيم الموحّد (var(--hi)) — داكن في الفاتح، نعناعي في الداكن */
.ded-bar {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 16px;
  background: var(--hi);
  border: none; border-radius: var(--bp-radius);
  color: #fcfaf5; /* الفاتح: خلفية داكنة → نص فاتح */
  font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: filter .15s;
}
.ded-bar:hover { filter: brightness(1.1); }
/* الداكن: الزر نعناعي → النص داكن #0d1a12 مثل باقي الأزرار النشطة.
   تصحيح: كان var(--bp-emerald) = نفس #6ec79f النعناعي في الداكن = نص نعناعي على خلفية نعناعية (غير مرئي). */
body:not([data-theme="formal"]) .ded-bar { color: #0d1a12; }
.ded-chev { transition: transform .25s; }
.ded-adjust.open .ded-bar { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ded-adjust.open .ded-chev { transform: rotate(180deg); }

.ded-backdrop { display: none; }

/* اللوح: يتماشى مع بطاقات الموقع (--b1، --s1) */
.ded-panel {
  display: none;
  border: 1px solid var(--b1); border-top: none;
  border-radius: 0 0 var(--bp-radius) var(--bp-radius);
  padding: 16px;
  background: var(--s1);
}
.ded-adjust.open .ded-panel { display: block; }
/* حالة teleport الجوال: اللوح خارج .ded-adjust مباشرة في #bpRoot */
.ded-panel.ded-teleported { display: block; }

.ded-handle { display: none; }
.ded-panel-title { display: none; }
.ded-panel-sub { font-size: 11px; color: var(--bp-ink-3); margin-bottom: 12px; line-height: 1.5; }
.ded-methods {
  display: flex; border: 1px solid var(--b1); border-radius: 7px;
  overflow: hidden; margin-bottom: 14px; background: var(--s2);
}
.ded-method {
  flex: 1; text-align: center; padding: 9px 0; font-size: 12.5px; font-weight: 600;
  color: var(--t2); cursor: pointer; background: transparent;
  border: none; font-family: inherit; transition: background .15s, color .15s;
}
.ded-method.active { background: var(--hi); color: #fcfaf5; }
/* الداكن: التبويب النشط نعناعي → نص داكن #0d1a12 (كان var(--bp-emerald)=نعناعي على نعناعي = غير مرئي) */
body:not([data-theme="formal"]) .ded-method.active { color: #0d1a12; }
.ded-field .bp-label { display: block; margin-bottom: 5px; }
.bp-numwrap.ded-err-wrap { border-color: #c0392b; background: #fdf3f2; }
.ded-hint { font-size: 10.5px; color: var(--bp-ink-3); margin-top: 9px; line-height: 1.6; }
.ded-err { display: none; font-size: 11.5px; color: #c0392b; font-weight: 600; margin-top: 8px; line-height: 1.5; }
.ded-err.show { display: block; }

/* زر إعادة الاحتساب */
.ded-apply {
  display: block; width: 100%; margin-top: 16px; padding: 13px;
  background: var(--hi); color: #fcfaf5; border: none; border-radius: 9px;
  font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: filter .15s;
}
/* الداكن: زر إعادة الاحتساب نعناعي → نص داكن #0d1a12 (كان var(--bp-emerald)=نعناعي على نعناعي = غير مرئي) */
body:not([data-theme="formal"]) .ded-apply { color: #0d1a12; }
.ded-apply:hover { filter: brightness(1.1); }

/* الجوال: bottom-sheet — مُنقَل برمجياً لـ #bpRoot */
@media (max-width: 768px) {
  .ded-panel.ded-teleported {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
    border: none; border-radius: 18px 18px 0 0; padding: 8px 18px 26px;
    background: var(--s1); box-shadow: 0 -8px 30px rgba(0,0,0,.22);
    animation: ded-sheet-up .28s cubic-bezier(.22,1,.36,1);
  }
  .ded-handle { display: block; width: 40px; height: 4px; background: var(--b1); border-radius: 3px; margin: 8px auto 14px; }
  .ded-panel-title { display: block; font-size: 15px; font-weight: 700; color: var(--t1); margin-bottom: 4px; }
}

/* backdrop الجوال */
.ded-backdrop-fixed {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 9998;
}
.ded-backdrop-fixed.show { display: block; }
@keyframes ded-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* تقليل الهامش بين أزرار البنوك وبطاقة النتيجة في وضع النتيجة */
body.wz-result-mode .banks-wrap { margin-bottom: 4px; }
/* ⚠️ v41: أُعيد سطر selector المفقود .nz-oblig-add — كانت خصائصه يتيمة بلا عنوان */
.nz-oblig-add {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: transparent;
  border: 1px dashed var(--bp-line);
  border-radius: var(--bp-radius);
  color: var(--bp-emerald);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; width: 100%;
  transition: background .15s, border-color .15s;
}
.nz-oblig-add:hover { background: color-mix(in srgb, var(--bp-emerald) 6%, transparent); border-color: var(--bp-emerald); }

/* زر + تفعيل الالتزامات */
.nz-oblig-plus-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--bp-emerald);
  border-radius: 5px;
  color: #fcfaf5;
  cursor: pointer;
  transition: opacity .2s, transform .2s cubic-bezier(.22,1,.36,1);
  flex-shrink: 0;
}
.nz-oblig-plus-btn:hover { opacity: .85; transform: scale(1.08); }
[data-theme="formal"] .nz-oblig-plus-btn { background: #1f4d3c; }

/* تقليل المسافة بعد قسم الالتزامات — gap الافتراضي 36px */
.sec-box-oblig { margin-bottom: -20px; }

/* أنيميشن ظهور قسم الالتزامات */
@keyframes nz-section-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#obligSection[style*="block"],
#obligSection:not([style*="none"]) {
  animation: nz-section-in .3s cubic-bezier(.22,1,.36,1);
}

/* ── sec-box بدون padding زائد داخل bp-inputs ── */
.bp-inputs .sec-box {
  border-top: 1.5px solid var(--b2); /* v46: خط فاصل أوضح بين الأقسام (كان --bp-line الباهت) */
  padding-top: 18px;
  padding-bottom: 0;
}
.bp-inputs .sec-box:first-child { border-top: none; }
.bp-inputs .sec-box-3b[style*="display:none"],
.bp-inputs .sec-box-3b[style*="display: none"] {
  padding-top: 0;
  border-top: none;
}

/* ── الخلفية الجديدة — نفس ألوان bp-root + النقش ── */
body[data-theme="formal"] .bp-inputs { background: transparent; }
body[data-theme="formal"] .bp-results { background: var(--bp-bg); position: relative; z-index: 1; }
body:not([data-theme="formal"]) .bp-inputs { background: var(--bp-bg-2); }
body:not([data-theme="formal"]) .bp-results { background: var(--bp-bg); }

/* ── قاعدة الأنيميشن العام — كل عنصر تفاعلي ── */
.sec-btn, .military-btn, .dc-btn, .sup-btn, .ten-btn,
.bp-input, .bp-nav-expand, .nz-oblig-plus-btn,
#salTabDirect, #salTabFull {
  transition-duration: .18s;
  transition-timing-function: cubic-bezier(.22,1,.36,1);
}


/* ── وضع "حتى التقاعد" — تأثيرات بصرية ──
   ⚠️ v40: #tenRetireBtn صار نعناعي في الداكن (مع شريط سفلي ::after بدل border ملوّن).
   هنا فقط: تلاشي الأرقام، تحوّل الرقم الكبير لنص "حتى التقاعد"، وإبهات الشريط. */

/* الشريط في وضع التقاعد: باهت لكن يبقى قابلاً للسحب (أول سحبة تُلغي الوضع) */
.bp-range.is-dimmed {
  opacity: .4;
  transition: opacity .35s ease;
}

/* الأرقام الصغيرة تحت الشريط — تلاشٍ ناعم عند الاختفاء/الظهور */
.bp-tenor-ticks {
  transition: opacity .3s ease;
}

/* نص "حتى التقاعد" البديل — يظهر مكان الرقم الكبير */
.bp-tenor-retire-txt {
  align-items: baseline;
  gap: 8px;
}
.bp-tenor-retire-label {
  animation: nz-retire-in .4s cubic-bezier(.22,.61,.36,1);
}
@keyframes nz-retire-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* الرقم الكبير عند العودة من وضع التقاعد — يظهر بنعومة */
.bp-tenor:not(.retire-mode) .bp-tenor-readout {
  animation: nz-retire-in .4s cubic-bezier(.22,.61,.36,1);
}

/* ── زر "حتى التقاعد" / "اختيار المدة" — شكل ثابت في كل الحالات ──
   ⚠️ v40: خلفية نعناعي في الداكن — مع شريط سفلي بدل حواف ملوّنة.
   الحواف: none دائماً (بدون border ملوّن).
   الشريط السفلي: #1f4d3c فاتح / #6ec79f داكن. */

/* القاعدة المشتركة — الشكل والأنيميشن */
#tenRetireBtn,
#tenRetireBtn.active {
  border: none !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  flex: 0 0 auto !important;
  cursor: pointer;
  position: relative;
  outline: 2px solid rgba(31,77,60,0);
  outline-offset: 0;
  transition: transform .18s cubic-bezier(.22,1,.36,1),
              box-shadow .18s cubic-bezier(.22,1,.36,1),
              background .18s ease;
  animation: nz-retire-breathe 2.4s ease-in-out infinite;
}

/* شريط سفلي — position:relative على الزر نفسه */
#tenRetireBtn::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  transition: background .3s;
}

/* الثيم الفاتح */
body[data-theme="formal"] #tenRetireBtn,
body[data-theme="formal"] #tenRetireBtn.active {
  background: #1f4d3c !important;
  color: #fff !important;
}
body[data-theme="formal"] #tenRetireBtn::after {
  background: #1f4d3c;
}
body[data-theme="formal"] #tenRetireBtn:hover {
  background: #163b2e !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(31,77,60,.28) !important;
  animation: none;
}

/* الثيم الداكن */
body:not([data-theme="formal"]) #tenRetireBtn,
body:not([data-theme="formal"]) #tenRetireBtn.active {
  background: #6ec79f !important;
  color: #0d1a12 !important;
}
body:not([data-theme="formal"]) #tenRetireBtn::after {
  background: #6ec79f;
}
body:not([data-theme="formal"]) #tenRetireBtn:hover {
  background: #5ab28a !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(110,199,159,.20) !important;
  animation: none;
}

/* ضغط */
#tenRetireBtn:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* التنفّس: حلقة خفيفة تظهر وتختفي بهدوء */
@keyframes nz-retire-breathe {
  0%,100% { outline-color: rgba(31,77,60,0);   outline-offset: 0; }
  50%     { outline-color: rgba(31,77,60,.25); outline-offset: 3px; }
}

/* ══════════════════════════════════════════════════════════
   WIZARD — هيكل الجوال البصري (v42 — الجلسة 1)
   ══════════════════════════════════════════════════════════
   إضافة صرفة: لا تعدّل أي قاعدة قائمة. تخص نظام bp-* فقط.
   الديسكتوب لا يتأثر إطلاقاً (كل العناصر display:none افتراضياً).

   ⚠️ الجلسة 1 = هيكل بصري فقط:
     - الشريط العلوي + شريط التقدم + القائمة الجانبية (شكل)
     - كل sec-box تصير "خطوة"؛ تُعرض الأولى فقط، الباقي مخفي
     - منطق التنقّل (تبديل .is-current، أزرار التالي/السابق،
       فتح الـ drawer) يأتي في الجلسة 2 (app.js) — لا يوجد بعد.

   ⚠️ ثوابت لم تُلمس: now.setDate(15)، direction:ltr، frozenStart،
     الثيم الرسمي الافتراضي، #nz-page-loader، النظام القديم
     (.topbar/.wrap/.main) و@media الخاص به (سطر ~1142).
   ══════════════════════════════════════════════════════════ */

/* عناصر الويزرد مخفية تماماً على الديسكتوب */
.wz-topbar,
.wz-progress,
.wz-drawer,
.wz-scrim { display: none; }

/* ⚠️ .wz-step-label/.wz-step-title/.wz-compare-btn/#wzNavBar مخفية
   على الديسكتوب — تظهر فقط داخل @media(max-width:768px) */
.wz-step-label,
.wz-step-title,
.wz-compare-btn,
/* .sal-tabs هنا هي نسخة الجوال المضافة في index.html — مخفية على الديسكتوب */
.bp-inputs .sec-box-2 > .sal-tabs,
#wzNavBar { display: none; }

@media (max-width: 768px) {

  /* ── إخفاء الهيدر القديم على الجوال (v42 — خيار أ) ──
     wz-topbar يحل محله. الهيدر القديم يبقى كاملاً على الديسكتوب.
     ⚠️ مؤقت: قائمة المستخدم (تسجيل الخروج) وزر الثيم يختفيان من
        الجوال حتى الجلسة 3 تنقلهما إلى القائمة الجانبية (الهامبرغر). */
  .bp-header { display: none; }

  /* ── إخفاء منطقة النتائج افتراضياً على الجوال (الويزرد يُظهرها بعد الحساب) ──
     app.js (الويزرد) يُضيف body.wz-result-mode لإظهارها.
     ⚠️ لا تحذف هذه القاعدة — بدونها تظهر النتيجة أسفل الويزرد مباشرة. */
  .bp-results { display: none; }
  body.wz-result-mode .bp-results { display: block; }
  /* الويزرد + شريط التقدم يختفيان في وضع النتيجة */
  body.wz-result-mode .bp-inputs,
  body.wz-result-mode .wz-progress { display: none; }

  /* ── الشريط العلوي الرفيع ── */
  .wz-topbar {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 10px;
    height: 48px;
    padding: 0 14px;
    background: var(--bp-bg-2);
    border-bottom: 1px solid var(--bp-line);
    position: sticky;
    top: 0;
    z-index: 150;
  }
  .wz-topbar-brand {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .wz-topbar-logo { color: var(--bp-emerald); }
  .wz-topbar-name {
    font-family: 'Aref Ruqaa', serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--bp-emerald);
  }
  /* مساحة موازنة — مخفية بعد إضافة زر الثيم بجانب الهامبرغر (v53) */
  .wz-topbar-spacer { display: none; }

  /* ── زر الثيم في topbar الجوال — أيقونة فقط بجانب الهامبرغر ──
     ⚠️ النص داخل الزر (#themeToggleBtn) يُخفى هنا — الأيقونة SVG فقط تظهر.
     الزر نفسه موجود في HTML ويستدعي toggleFormalTheme() — لا يُلمس. */
  .wz-topbar .theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    border: 1.5px solid var(--bp-line, #e4ddcf);
    background: transparent;
    color: var(--bp-emerald, #1f4d3c);
    cursor: pointer;
    flex-shrink: 0;
  }
  /* إخفاء النص — الأيقونة SVG فقط */
  .wz-topbar .theme-toggle-btn .wz-theme-text { display: none; }

  .wz-burger {
    width: 26px; height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .wz-burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--bp-emerald);
    border-radius: 2px;
  }

  /* ── شريط التقدّم ──
     sticky تحت wz-topbar مباشرة — top يساوي ارتفاع wz-topbar (48px)
     حتى لا يطفو في المنتصف عند السكرول */
  .wz-progress {
    display: flex;
    gap: 4px;
    padding: 8px 16px;
    position: sticky;
    top: 48px;
    z-index: 140;
    background: var(--bp-bg-2, #fcfaf5);
    border-bottom: 1px solid var(--bp-line, #e4ddcf);
  }
  .wz-pseg {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--bp-line, #e4ddcf);
    transition: background .3s ease;
  }
  .wz-pseg.is-on { background: var(--bp-emerald, #1f4d3c); }

  /* ── إصلاح الفراغ العلوي على الجوال ──
     bp-body جريد بـ flex:1 يتمدد لكامل ارتفاع الشاشة (100vh) ويوزّع
     عناصره رأسياً → فراغ ضخم فوق المحتوى. نجعله تدفّقاً طبيعياً (block)
     فيلتصق المحتوى من الأعلى تحت التوب بار مباشرة. */
  .bp-body {
    display: block;
    flex: none;
  }

  /* ── منطقة المدخلات على الجوال ──
     padding-top صغير — شريط التقدم sticky يأخذ مكانه فوق المحتوى
     padding-bottom كبير لترك مساحة لشريط التنقل الثابت */
  .bp-inputs {
    padding: 20px 16px 100px;
    gap: 0;
    /* قرار المالك (دورة 8): توسيط محتوى الخطوة عمودياً في الجوال.
       min-height = ارتفاع الشاشة − (wz-topbar 48 + wz-progress ~20).
       الخطوة القصيرة تتوسّط؛ الطويلة تتجاوز الـ min فتبدأ من الأعلى وتُمرَّر طبيعياً. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100dvh - 68px);
  }
  /* قرار المالك (دورة 8): توحيد خلفية الجوال في الداكن — لا «بطاقة» تحت العناصر.
     تتجاوز body:not([data-theme="formal"]) .bp-inputs{background:--bp-bg-2} العام
     بحكم وجودها داخل @media لاحق في الترتيب. */
  body:not([data-theme="formal"]) .bp-inputs { background: transparent; }
  .bp-inputs .sec-box {
    display: none;
  }
  /* الخطوة الظاهرة: الأولى افتراضياً، أو ما يحمل .wz-current */
  .bp-inputs .sec-box-1 { display: block; }
  .bp-inputs .sec-box.wz-current { display: block; }
  /* لو فُعّلت خطوة بـ wz-current، لا تُظهر الأولى تلقائياً */
  .bp-inputs:has(.sec-box.wz-current) .sec-box-1:not(.wz-current) { display: none; }

  /* صندوق ميلاد المتقاعد (3b) يبقى محكوماً بمنطق app.js (inline style)
     — لا نلمس عرضه هنا حتى لا نتعارض مع _setDispById. */

  /* ── أنيميشن الويزرد ── */
  @keyframes wz-step-enter {
    from { opacity: 0; transform: translateX(var(--wz-from, 32px)); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes wz-item-enter {
    0%   { opacity: 0; transform: translateX(20px); }
    68%  { transform: translateX(-3px); }
    100% { opacity: 1; transform: translateX(0); }
  }
  .wz-step-entering {
    animation: wz-step-enter 240ms ease-out both;
  }
  .wz-animate-in {
    animation: wz-item-enter 360ms ease-out both;
    animation-delay: calc(var(--wz-i, 0) * 60ms);
  }
  .wz-nav-btn:active { transform: scale(0.94); transition: transform 80ms ease; }
  .sec-btn:active,
  .wz-oblig-yes:active,
  .wz-oblig-no:active,
  .prod-tab:active,
  .sup-tab:active    { transform: scale(0.95); transition: transform 80ms ease; }

  /* ── القائمة الجانبية (drawer) ── */
  .wz-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20, 40, 30, .4);
    z-index: 200;
  }
  .wz-scrim[hidden] { display: none; }

  .wz-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 78%;
    max-width: 320px;
    background: var(--bp-bg-2);
    z-index: 210;
    box-shadow: 6px 0 18px rgba(0, 0, 0, .12);
  }
  .wz-drawer[hidden] { display: none; }

  .wz-drawer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bp-emerald);
    color: #fff;
    padding: 20px 16px 16px;
  }
  .wz-drawer-av {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--bp-gold, #c79a47);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    flex-shrink: 0;
  }
  .wz-drawer-user { display: flex; flex-direction: column; line-height: 1.3; }
  .wz-drawer-name { font-size: 13px; font-weight: 600; }
  .wz-drawer-email { font-size: 11px; color: rgba(255, 255, 255, .78); }

  .wz-drawer-list { display: flex; flex-direction: column; padding: 8px 0; }
  .wz-ditem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    font-size: 13px;
    color: var(--bp-ink, #1c2a23);
    text-decoration: none;
    cursor: pointer;
  }
  .wz-ditem.is-active {
    background: var(--bp-bg-3);
    color: var(--bp-emerald);
    font-weight: 600;
    border-right: 3px solid var(--bp-emerald);
  }
  .wz-ditem.is-soon { color: var(--bp-ink-3, #8a978d); cursor: default; }
  .wz-soon {
    margin-right: auto;
    font-size: 9px;
    background: var(--bp-gold, #c79a47);
    color: #fff;
    padding: 2px 8px;
    border-radius: 9px;
  }
  .wz-ditem--logout { color: #9a3b3b; }
  .wz-dsep { height: 1px; background: var(--bp-line); margin: 6px 18px; }
  /* زر الثيم في الدراور — يستخدم نفس نمط .wz-ditem مع أيقونة */
  .wz-ditem--theme {
    background: none;
    border: none;
    font-family: inherit;
    text-align: right;
    width: 100%;
    color: var(--bp-ink, #1c2a23);
    cursor: pointer;
  }
  /* زر التعديل في wz-topbar — يظهر بدل المساحة الفارغة عند عرض النتيجة */
  /* زر «تعديل» في النتيجة مخفي على الجوال — بلا فائدة عملية
     (زر «قارن مع بنك آخر» يغطّي الرجوع للتعديل). المنطق في app.js سليم. */
  .wz-edit-btn {
    display: none !important;
  }
  .wz-edit-btn[hidden] { display: none; }

  /* ══════════════════════════════════════════════════════════
     WIZARD VISUAL — v43 جلسة 3
     كل ما يلي بصري بحت داخل @media(max-width:768px).
     الديسكتوب لا يتأثر بأي قاعدة هنا.
     الهوية: بيج #f6f3ec · أخضر #1f4d3c · ذهبي #c79a47 · radius 4px.
     ══════════════════════════════════════════════════════════ */

  /* ── رقم الخطوة والعنوان ── */
  /* ⚠️ .wz-step-label و .wz-step-title تُضاف في index.html لكل sec-box */
  .wz-step-label {
    display: block;
    font-size: 11px;
    color: var(--bp-ink-3, #6f7a72);
    margin-bottom: 6px;
  }
  /* ⚠️ display:block ضروري هنا — القاعدة الخارجية (display:none) تطغى بدونه */
  .wz-step-title {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--bp-emerald, #1f4d3c);
    margin-bottom: 20px;
    line-height: 1.3;
  }

  /* ── إخفاء عناوين الديسكتوب داخل كل sec-box على الجوال ──
     .sec-heading و .bp-section-head تبقى للديسكتوب — على الجوال
     نخفيها لأن .wz-step-label/.wz-step-title تحل محلها. */
  .bp-inputs .sec-box .sec-heading,
  .bp-inputs .sec-box .bp-section-head { display: none; }

  /* ⚠️ استثناء: زر «حتى التقاعد» داخل رأس قسم المدة — يجب أن يظهر على الجوال.
     نُظهر رأس القسم في tenureDiv لكن نُخفي رقمه وعنوانه (تكفي wz-step-title)،
     ونُبقي زر الإجراء (حتى التقاعد) ظاهراً. */
  .bp-inputs .section-ten .bp-section-head {
    display: flex;
    margin-bottom: 12px;
  }
  .bp-inputs .section-ten .bp-section-head .bp-section-no,
  .bp-inputs .section-ten .bp-section-head > div:not(.bp-section-action) {
    display: none;
  }
  .bp-inputs .section-ten .bp-section-action {
    margin-right: auto;
  }

  /* ── الخطوة 1: أزرار القطاع عمودية كاملة العرض ── */
  .bp-inputs .sec-box-1 .sectors {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
  }
  .bp-inputs .sec-box-1 .sec-btn {
    width: 100%;
    height: 52px;
    min-height: 52px;
    flex: none;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid var(--bp-line, #e4ddcf);
    background: var(--bp-bg-2, #fdfbf6);
    color: var(--bp-ink, #1a221d);
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .bp-inputs .sec-box-1 .sec-btn.active {
    background: var(--bp-emerald, #1f4d3c);
    border-color: var(--bp-emerald, #1f4d3c);
    color: #fff;
    font-weight: 600;
  }
  /* ⚠️ العسكري: ارتفاع ثابت 52px حين مغلق تماماً كبقية الأزرار
     position:relative موروثة من الديسكتوب — mil-dropdown يعتمد عليها.
     ⚠️ نُلغي flex:1 الموروث من الديسكتوب: في عمود (flex-direction:column)
     يجعل الزر يتمدد/ينكمش فيظهر بمقاس شاذ مختلف عن بقية الأزرار. */
  .bp-inputs .sec-box-1 .military-btn {
    height: 52px;
    min-height: 52px;
    flex: none;
    box-sizing: border-box;
    flex-direction: row;
    padding: 0 16px;
    border-left: none;
    border-radius: 4px;
    border: 1px solid var(--bp-line, #e4ddcf);
    font-size: 15px;
  }
  /* ⚠️ mil-dropdown: absolute خارج التدفق حتى لا يدفع الأزرار الأخرى */
  .bp-inputs .sec-box-1 .mil-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0; left: 0;
    z-index: 50;
    border-radius: 4px;
  }
  /* ⚠️ إصلاح: عند فتح القائمة، نرفع الزر العسكري (الحاوية) فوق الأزرار التالية
     (قطاع خاص/متقاعد) — بدونه تطفو تلك الأزرار فوق القائمة المطلقة فتحجبها. */
  .bp-inputs .sec-box-1 .military-btn.open {
    position: relative;
    z-index: 60;
  }
  .bp-inputs .sec-box-1 .military-btn.open .mil-dropdown {
    z-index: 61;
  }

  /* ── الخطوة 2: حقول الراتب ── */
  /* التبويبان (تفاصيل / إدخال الصافي) أفقيان بالتساوي */
  .bp-inputs .sec-box-2 > .sal-tabs,
  .bp-inputs .sec-box-2 .sal-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 18px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--bp-line, #e4ddcf);
  }
  .bp-inputs .sec-box-2 .sal-tab {
    flex: 1;
    padding: 10px;
    background: var(--bp-bg-2, #fdfbf6);
    color: var(--bp-ink-3, #6f7a72);
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s;
  }
  .bp-inputs .sec-box-2 .sal-tab.active {
    background: var(--bp-emerald, #1f4d3c);
    color: #fff;
    font-weight: 600;
  }
  /* حقول الراتب: عمودية، label فوق، كاملة العرض */
  .bp-inputs .sec-box-2 .nz-sal-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .bp-inputs .sec-box-2 .nz-sal-field { width: 100%; }
  .bp-inputs .sec-box-2 .bp-label {
    display: block;
    font-size: 12px;
    color: var(--bp-ink-3, #6f7a72);
    margin-bottom: 6px;
  }
  .bp-inputs .sec-box-2 .bp-numwrap {
    border-radius: 4px;
    border: 1px solid var(--bp-line, #e4ddcf);
    background: var(--bp-bg-2, #fdfbf6);
  }
  .bp-inputs .sec-box-2 .bp-input {
    font-size: 16px;
    padding: 12px 14px;
    height: 48px;
  }
  /* سطر الصافي — بار ملون مستقل */
  .bp-inputs .sec-box-2 .nz-sal-net-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--bp-emerald, #1f4d3c) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--bp-emerald, #1f4d3c) 20%, transparent);
    border-radius: 4px;
    margin-top: 14px;
  }
  .bp-inputs .sec-box-2 .nz-sal-net-lbl {
    font-size: 13px;
    color: var(--bp-ink-2, #3d4942);
    font-weight: 500;
  }
  .bp-inputs .sec-box-2 .nz-sal-net {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }
  .bp-inputs .sec-box-2 .nz-sal-net-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--bp-emerald, #1f4d3c);
  }
  .bp-inputs .sec-box-2 .nz-sal-net-unit {
    font-size: 12px;
    color: var(--bp-ink-3, #6f7a72);
  }

  /* ── الخطوة 3: الالتزامات ── */
  /* زر "نعم — لديّ التزام": كامل العرض */
  .bp-inputs .sec-box-oblig .nz-oblig-plus-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    border-radius: 4px;
    border: 1px solid var(--bp-emerald, #1f4d3c);
    background: var(--bp-emerald, #1f4d3c);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 14px;
    font-family: inherit;
    /* عند التفعيل يتحول لأبيض بإطار */
    transition: background .15s, color .15s;
  }
  /* حين يكون الـ checkbox غير محدد (لا التزامات) */
  .bp-inputs .sec-box-oblig #obligToggle:not(:checked) ~ * .nz-oblig-plus-btn,
  .bp-inputs .sec-box-oblig .nz-oblig-plus-btn:has(#obligToggle:not(:checked)) {
    background: var(--bp-emerald, #1f4d3c);
    color: #fff;
  }
  /* زر إضافة التزام: إطار منقط */
  .bp-inputs .sec-box-oblig .nz-oblig-add {
    width: 100%;
    padding: 12px;
    border: 1.5px dashed var(--bp-line-2, #ece6d8);
    border-radius: 4px;
    background: transparent;
    color: var(--bp-ink-2, #3d4942);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
  }
  /* زر "لا توجد التزامات" */
  .wz-no-oblig-btn {
    width: 100%;
    min-height: 52px;
    border-radius: 4px;
    border: 1px solid var(--bp-line, #e4ddcf);
    background: var(--bp-bg-2, #fdfbf6);
    color: var(--bp-ink, #1a221d);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }

  /* ── أزرار نعم/لا للالتزامات (جوال) ── */
  .bp-inputs .sec-box-oblig .wz-oblig-choice {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
  }
  .bp-inputs .sec-box-oblig .wz-oblig-yes,
  .bp-inputs .sec-box-oblig .wz-oblig-no {
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid var(--bp-line, #e4ddcf);
    background: var(--bp-bg-2, #fdfbf6);
    color: var(--bp-ink, #1a221d);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bp-inputs .sec-box-oblig .wz-oblig-yes.active,
  .bp-inputs .sec-box-oblig .wz-oblig-no.active {
    background: var(--bp-emerald, #1f4d3c);
    border-color: var(--bp-emerald, #1f4d3c);
    color: #fff;
    font-weight: 600;
  }

  /* ── الخطوة 4: التواريخ ── */
  /* كل تاريخ مجموعة مستقلة: label + تبويب هجري/ميلادي + حقلان */
  .bp-inputs .sec-box-3 .dates-grid,
  .bp-inputs .sec-box-3b .date-field {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .bp-inputs .sec-box-3 .date-field,
  .bp-inputs .sec-box-3b .date-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .bp-inputs .sec-box-3 .nz-date-label,
  .bp-inputs .sec-box-3b .bp-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bp-ink, #1a221d);
  }
  /* تبويب هجري/ميلادي: زران أفقيان صغيران */
  .bp-inputs .sec-box-3 .date-cal-tabs,
  .bp-inputs .sec-box-3b .date-cal-tabs {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--bp-line, #e4ddcf);
    width: fit-content;
    margin-bottom: 8px;
  }
  .bp-inputs .sec-box-3 .dc-btn,
  .bp-inputs .sec-box-3b .dc-btn {
    padding: 7px 16px;
    font-size: 12px;
    background: var(--bp-bg-2, #fdfbf6);
    color: var(--bp-ink-3, #6f7a72);
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s;
  }
  .bp-inputs .sec-box-3 .dc-btn.active,
  .bp-inputs .sec-box-3b .dc-btn.active {
    background: var(--bp-emerald, #1f4d3c);
    color: #fff;
    font-weight: 600;
  }
  /* حقلا السنة والشهر جنباً لجنب */
  .bp-inputs .sec-box-3 .nz-date-row,
  .bp-inputs .sec-box-3b .nz-date-row {
    display: flex;
    gap: 10px;
  }
  .bp-inputs .sec-box-3 .nz-date-wrap,
  .bp-inputs .sec-box-3b .nz-date-wrap { flex: 1; }
  .bp-inputs .sec-box-3 .bp-input,
  .bp-inputs .sec-box-3b .bp-input {
    height: 48px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid var(--bp-line, #e4ddcf);
    background: var(--bp-bg-2, #fdfbf6);
  }

  /* ── الخطوة 5: المنتج والدعم ── */
  /* أزرار المنتج: عمودية */
  .bp-inputs .sec-box-4 .prod-tabs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
    margin-bottom: 20px;
  }
  .bp-inputs .sec-box-4 .prod-tab {
    width: 100%;
    min-height: 48px;
    border-radius: 4px;
    border: 1px solid var(--bp-line, #e4ddcf);
    background: var(--bp-bg-2, #fdfbf6);
    color: var(--bp-ink, #1a221d);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
    box-shadow: none;
  }
  .bp-inputs .sec-box-4 .prod-tab.active {
    background: var(--bp-emerald, #1f4d3c);
    border-color: var(--bp-emerald, #1f4d3c);
    color: #fff;
    font-weight: 600;
  }
  /* ⚠️ زر "عقاري مع التزامات قائمة" يُتحكم في ظهوره من app.js
     (يظهر فقط عند تفعيل الالتزامات) — لا نلمس منطقه */

  /* الدعم السكاني: ثلاثة أزرار أفقية متساوية */
  .bp-inputs .sec-box-4 .sup-tabs {
    display: flex;
    gap: 0;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--bp-line, #e4ddcf);
    margin-top: 6px;
  }
  .bp-inputs .sec-box-4 .sup-tab {
    flex: 1;
    min-height: 44px;
    border: none;
    background: var(--bp-bg-2, #fdfbf6);
    color: var(--bp-ink-3, #6f7a72);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, color .15s;
    box-shadow: none;
  }
  .bp-inputs .sec-box-4 .sup-tab.active {
    background: var(--bp-emerald, #1f4d3c);
    color: #fff;
    font-weight: 600;
  }
  /* label الدعم — يبقى نص «الدعم السكاني» ويُخفى رقم «06» (اتساقاً مع قسم المدة الذي يُخفي رقمه على الجوال) */
  .bp-inputs .sec-box-4 .section-sup > .bp-section-head { display: flex; }
  .bp-inputs .sec-box-4 .section-sup > .bp-section-head .bp-section-no { display: none; }

  /* اعتزاز: صف toggle واضح */
  .bp-inputs .sec-box-4 .etizaz-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 4px;
    border: 1px solid var(--bp-line, #e4ddcf);
    background: var(--bp-bg-2, #fdfbf6);
    margin-top: 14px;
    cursor: pointer;
  }
  .bp-inputs .sec-box-4 .etizaz-row strong {
    font-size: 13px;
    color: var(--bp-ink, #1a221d);
    font-weight: 500;
  }

  /* ── إصلاح مشكلة 10: زر "حتى التقاعد" ──
     قواعد الديسكتوب تُطغى عليه بـ border:none وpadding محدد
     نعيد تعريفه داخل @media ليظهر كزر مستقل واضح */
  .bp-inputs .sec-box-4 #tenRetireBtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    border: 1px solid var(--bp-line, #e4ddcf) !important;
    background: var(--bp-bg-2, #fdfbf6) !important;
    color: var(--bp-ink, #1a221d) !important;
    font-size: 13px !important;
    font-family: inherit;
    cursor: pointer;
    margin-top: 14px;
    animation: none !important;
    position: static !important;
  }
  .bp-inputs .sec-box-4 #tenRetireBtn.active {
    background: var(--bp-emerald, #1f4d3c) !important;
    border-color: var(--bp-emerald, #1f4d3c) !important;
    color: #fff !important;
  }
  /* إخفاء الشريط السفلي التزيّني (::after) على الجوال */
  .bp-inputs .sec-box-4 #tenRetireBtn::after { display: none !important; }
  /* ⚠️ الزر بدون active (= "حتى التقاعد") يبقى عاجياً — يطغى على قاعدة الديسكتوب الخضراء */
  body .bp-inputs .sec-box-4 #tenRetireBtn:not(.active) {
    background: var(--bp-bg-2, #fdfbf6) !important;
    color: var(--bp-ink, #1a221d) !important;
    animation: none !important;
  }

  /* ── الخطوة 6: المدة — رقم كبير في المنتصف ── */
  .bp-inputs .sec-box-4 .bp-tenor-readout {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin: 16px 0 10px;
  }
  .bp-inputs .sec-box-4 .bp-tenor-years {
    font-size: 52px;
    font-weight: 700;
    color: var(--bp-emerald, #1f4d3c);
    line-height: 1;
  }
  .bp-inputs .sec-box-4 .bp-tenor-unit {
    font-size: 18px;
    color: var(--bp-ink-3, #6f7a72);
  }
  /* السلايدر */
  .bp-inputs .sec-box-4 .bp-range {
    width: 100%;
    accent-color: var(--bp-emerald, #1f4d3c);
    height: 4px;
    margin: 8px 0;
  }
  /* نص المدى */
  .bp-inputs .sec-box-4 .bp-tenor-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--bp-ink-4, #9aa39c);
    margin-top: 4px;
  }
  /* زر حتى التقاعد — مستقل تحت السلايدر */
  .bp-inputs .sec-box-4 #tenRetireBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 4px;
    border: 1px solid var(--bp-line, #e4ddcf);
    background: var(--bp-bg-2, #fdfbf6);
    color: var(--bp-ink, #1a221d);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    margin-top: 14px;
  }
  .bp-inputs .sec-box-4 #tenRetireBtn.active {
    background: var(--bp-emerald, #1f4d3c);
    border-color: var(--bp-emerald, #1f4d3c);
    color: #fff;
  }
  /* إخفاء زر الحساب من داخل sec-box-4 — يظهر في شريط التنقل */
  .bp-inputs .sec-box-4 > .calc-btn { display: none; }

  /* ── الخطوة 7: البنوك ──
     ⚠️ #bottomNav الأصلي position:fixed على الجوال (من style.css القديم)
     عند إضافة .wz-bank-step نتجاوزه بـ position:static حتى يدخل التدفق الطبيعي
     نستخدم !important لأن القاعدة الأصلية تستخدمه أيضاً */
  #bottomNav.wz-bank-step {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
    border-top: none !important;
    margin-top: 8px;
  }
  #bottomNav.wz-bank-step .bn-btn {
    min-height: 52px;
    border-radius: 4px;
    border: 1px solid var(--bp-line, #e4ddcf);
    background: var(--bp-bg-2, #fdfbf6);
    color: var(--bp-ink, #1a221d);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: background .15s, border-color .15s;
    box-shadow: none;
  }
  #bottomNav.wz-bank-step .bn-btn.active {
    background: color-mix(in srgb, var(--bp-emerald, #1f4d3c) 10%, transparent);
    border-color: var(--bp-emerald, #1f4d3c);
    color: var(--bp-emerald, #1f4d3c);
    font-weight: 700;
  }
  #bottomNav.wz-bank-step .btn-name { font-size: 13px; }
  #bottomNav.wz-bank-step .btn-type {
    font-size: 10px;
    color: var(--bp-ink-3, #6f7a72);
  }
  #bottomNav.wz-bank-step .bn-btn.active .btn-type {
    color: var(--bp-emerald, #1f4d3c);
  }
  /* ── خطوة البنك: الترتيب يُدار برمجياً من app.js (render) ──
     يُنقل bottomNav و wzNavBar داخل bp-inputs بالترتيب: بنوك → ملخص → تنقّل.
     هنا فقط إخفاء خطوات الإدخال (sec-box) مع إبقاء الملخص والتنقل ظاهرين. */
  body.wz-bank-active .bp-inputs .sec-box {
    display: none !important;
  }
  /* ملخص المدخلات — يظهر فقط في خطوة البنوك
     ⚠️ .inputs-summary موجود في HTML — app.js يضيف كلاس visible
     نُظهره داخل خطوة البنوك عبر .wz-bank-active على body */
  body.wz-bank-active .inputs-summary {
    display: block !important;
    margin-top: 18px;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--bp-emerald, #1f4d3c) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--bp-emerald, #1f4d3c) 15%, transparent);
    border-radius: 4px;
    font-size: 12px;
    color: var(--bp-ink-2, #3d4942);
    line-height: 1.6;
    opacity: 1;
    max-height: none;
  }

  /* ── شريط التنقل الثابت (التالي / السابق) ── */
  /* ⚠️ #wzNavBar يُحقن من app.js — هنا نضع موضعه وشكله النهائي
     نتجاوز injectStyles() الذي يضع قواعد بنيوية مبدئية */
  #wzNavBar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    display: flex;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--bp-bg-2, #fcfaf5);
    border-top: 1px solid var(--bp-line, #e4ddcf);
    z-index: 120;
    /* فوق المحتوى وتحت الـ drawer */
  }
  /* زر التالي / احسب */
  #wzNextBtn {
    flex: 2;
    min-height: 52px;
    border-radius: 4px;
    border: none;
    background: var(--bp-emerald, #1f4d3c);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
  }
  #wzNextBtn:active { opacity: .85; }
  /* زر السابق — يحمل اسم الخطوة السابقة */
  #wzPrevBtn {
    flex: 1;
    min-height: 52px;
    border-radius: 4px;
    border: 1px solid var(--bp-line, #e4ddcf);
    background: var(--bp-bg-2, #fdfbf6);
    color: var(--bp-ink-2, #3d4942);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #wzPrevBtn[style*="visibility: hidden"],
  #wzPrevBtn[style*="visibility:hidden"] { opacity: 0; pointer-events: none; }
  /* رسالة خطأ الخطوة */
  #wzStepNote {
    position: fixed;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    left: 16px; right: 16px;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #9a6a00;
    background: rgba(232, 160, 32, .12);
    border: 1px solid rgba(232, 160, 32, .3);
    text-align: center;
    z-index: 121;
  }
  /* مساحة سفلية تمنع المحتوى من الاختباء خلف شريط التنقل */
  .bp-inputs { padding-bottom: 100px !important; }

  /* ── النتيجة (شاشة 8) ── */
  /* ⚠️ .bp-results يتحكم فيه body.wz-result-mode — لا نلمس العرض/الإخفاء */
  body.wz-result-mode .bp-results {
    padding: 0 0 80px;
  }
  /* زر "اختر بنكاً آخر" — بارز أعلى النتيجة */
  .wz-compare-btn {
    display: flex;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 13px;
    margin: 14px 0;
    border-radius: 12px;
    border: 1px solid var(--bp-line, #e4ddcf);
    background: var(--bp-bg-2, #fdfbf6);
    color: var(--bp-ink, #1a221d);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s;
  }
  /* ⚠️ تراتبية: أثناء انتظار الرد (wz-calc-loading) لا يظهر زر «قارن»
     — يظهر فقط بعد اكتمال النتيجة عبر wzShowResult. يمنع ظهوره قبل الأرقام. */
  body.wz-calc-loading .wz-compare-btn {
    display: none !important;
  }
  .wz-compare-btn:active {
    background: var(--bp-bg, #f6f3ec);
  }
  /* شريط الإجراءات السفلي في النتيجة (واتساب · طباعة · نسخ) */
  /* إصلاح: الكلاس الفعلي للزر = .whatsapp-btn (كان .wa-btn خطأً فلم يتوحّد القطر = 9px بدل 4px) */
  body.wz-result-mode .action-btns-row,
  body.wz-result-mode .whatsapp-btn,
  body.wz-result-mode .copy-btn {
    border-radius: 4px;
  }
  /* فصل زر واتساب عن صف النسخ/الطباعة فوقه — كان ملاصقاً بلا هامش */
  body.wz-result-mode .whatsapp-btn { margin-top: 10px; }
}

@media(max-width:768px){
  /* زر رجوع للحسابات — يظهر على الجوال فقط في مربع تسجيل الدخول */
  .res-auth-back { display: flex !important; }

  /* placeholder النتيجة للديسكتوب فقط — مخفي نهائياً على الجوال */
  .res-empty { display: none !important; }
}

/* ═══════════════════════════════════════════════════════
   إمكانية الوصول — حلقة تركيز واضحة للتنقّل بلوحة المفاتيح (v33)
   تظهر فقط مع :focus-visible (التنقّل بالـ Tab) ولا تظهر مع نقر الفأرة.
   تستخدم لون الأكسنت --hi فتتوافق مع الثيمين تلقائياً.
   ═══════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--hi);
  outline-offset: 2px;
  /* لا نفرض border-radius هنا — المتصفّح يجعل الـoutline يتبع انحناء العنصر
     نفسه؛ فرض زاوية ثابتة كان يقفز شكل الأزرار المدوّرة عند التركيز. */
}
/* العناصر التي قد تُخفي الـ outline بسبب overflow — نستخدم ظلاً بدلاً منه */
.bp-input:focus-visible,
.auth-fld input:focus-visible,
.print-field-inp:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--glow), 0 0 0 1px var(--hi);
}

/* ═══════════════════════════════════════════════════════
   توسيع مناطق اللمس للأيقونات الصغيرة (v34)
   تقنية ::before شفّاف يمدّ المنطقة القابلة للنقر إلى ~44px
   دون تغيير حجم الأيقونة أو موضعها بصرياً (صفر أثر على التخطيط).
   توصية آبل 44px / ماتيريال 48px / WCAG 2.5.8.
   ═══════════════════════════════════════════════════════ */
/* العناصر الساكنة فقط تحتاج سياق تموضع؛ pass-eye و print-modal-close مطلقة أصلاً */
.nz-cal-btn, .bp-nav-expand { position: relative; }
.pass-eye::before,
.nz-cal-btn::before,
.print-modal-close::before,
.bp-nav-expand::before {
  content: '';
  position: absolute;
  inset: -12px;
}

/* ════════════════════════════════════════════════════════════
   هوية الزوايا الموحّدة (v37) — لغة انحناء واحدة داخل كل ثيم
   فاتح(رسمي)=4px · داكن(تقني)=10px عبر --r-ctrl
   كل كتلة مُوسومة بالثيم لتطابق خصوصية تجاوزات formal القديمة
   (border-radius:0 !important) وتفوز عليها بحكم الترتيب الأخير.
   + إصلاح تباين زر الحاسبة المفعّل (نص داكن على النعناعي)
   + إعادة تصميم أزرار البنوك (بطاقات بدل شبكة حادّة)
   ════════════════════════════════════════════════════════════ */

/* — تباين: نص داكن على الأزرار النعناعية المفعّلة في الداكن — */
body:not([data-theme="formal"]) .bp-nav-link.is-active,
body:not([data-theme="formal"]) .bp-nav-expand {
  color: #0d1a12 !important;
}

/* — تنفّس شبكة البنوك (مشترك للثيمين) — */
.banks-grid, .banks-grid-row2 { gap: 8px; }
.bank-btn { padding: 12px 8px 11px; }

/* ===== الثيم الداكن (تقني) — توحيد على --r-ctrl=10px ===== */
body:not([data-theme="formal"]) .bank-btn,
body:not([data-theme="formal"]) .bp-nav,
body:not([data-theme="formal"]) .bp-nav-link,
body:not([data-theme="formal"]) .bp-nav-expand,
body:not([data-theme="formal"]) .calc-btn,
body:not([data-theme="formal"]) .bp-input,
body:not([data-theme="formal"]) .prod-tab,
body:not([data-theme="formal"]) .sup-tab,
body:not([data-theme="formal"]) .nz-oblig-plus-btn,
body:not([data-theme="formal"]) .theme-toggle-btn,
body:not([data-theme="formal"]) .sectors,
body:not([data-theme="formal"]) .date-cal-tabs {
  border-radius: var(--r-ctrl) !important;
}
body:not([data-theme="formal"]) .bank-btn:not(.active) {
  border-color: var(--b1);
}
/* أطراف الضوابط المقطعية (تدوير منطقي يحترم RTL) */
body:not([data-theme="formal"]) .sectors .sec-btn:first-child,
body:not([data-theme="formal"]) .date-cal-tabs .dc-btn:first-child {
  border-start-start-radius: var(--r-ctrl);
  border-end-start-radius: var(--r-ctrl);
}
body:not([data-theme="formal"]) .sectors > :last-child,
body:not([data-theme="formal"]) .date-cal-tabs .dc-btn:last-child {
  border-start-end-radius: var(--r-ctrl);
  border-end-end-radius: var(--r-ctrl);
}

/* ===== الثيم الفاتح (رسمي) — انحناء خفيف --r-ctrl=4px ===== */
body[data-theme="formal"] .bank-btn,
body[data-theme="formal"] .bp-nav,
body[data-theme="formal"] .bp-nav-link,
body[data-theme="formal"] .bp-nav-expand,
body[data-theme="formal"] .calc-btn,
body[data-theme="formal"] .bp-input,
body[data-theme="formal"] .prod-tab,
body[data-theme="formal"] .sup-tab,
body[data-theme="formal"] .nz-oblig-plus-btn,
body[data-theme="formal"] .theme-toggle-btn,
body[data-theme="formal"] .sectors,
body[data-theme="formal"] .date-cal-tabs {
  border-radius: var(--r-ctrl) !important;
}
body[data-theme="formal"] .sectors .sec-btn:first-child,
body[data-theme="formal"] .date-cal-tabs .dc-btn:first-child {
  border-start-start-radius: var(--r-ctrl) !important;
  border-end-start-radius: var(--r-ctrl) !important;
}
body[data-theme="formal"] .sectors > :last-child,
body[data-theme="formal"] .date-cal-tabs .dc-btn:last-child {
  border-start-end-radius: var(--r-ctrl) !important;
  border-end-end-radius: var(--r-ctrl) !important;
}

/* المنتج/الدعم في الرسمي = ضوابط مقطعية ملتصقة → تدوير الحاوية والأطراف فقط.
   خصوصية :first-child/:last-child (0,3,1) تتجاوز تجاوزات formal القديمة الحادّة. */
body[data-theme="formal"] .prod-tabs,
body[data-theme="formal"] .sup-tabs {
  border-radius: var(--r-ctrl) !important;
}
body[data-theme="formal"] .prod-tab:first-child,
body[data-theme="formal"] .sup-tab:first-child {
  border-start-start-radius: var(--r-ctrl) !important;
  border-end-start-radius: var(--r-ctrl) !important;
}
body[data-theme="formal"] .prod-tab:last-child,
body[data-theme="formal"] .sup-tab:last-child {
  border-start-end-radius: var(--r-ctrl) !important;
  border-end-end-radius: var(--r-ctrl) !important;
}

/* ════════════════════════════════════════════════════════════
   المرحلة 2 — تفاعل وتمييز بطاقات البنوك
   داكن: الظل وحده غير محسوس على خلفية داكنة → نضيف حدّاً نعناعياً
   عند المرور + حلقة داخلية للزر النشط لإبرازه دون ضجيج.
   ════════════════════════════════════════════════════════════ */
body:not([data-theme="formal"]) .bank-btn:hover:not(.active) {
  border-color: color-mix(in srgb, var(--hi) 32%, transparent);
}
/* الزر النشط (داكن): حلقة نعناعية واحدة خارجية (لا حدّ + حلقة = خطّان).
   نُلغي الحدّ المرئي ونستبدله بحلقة 2px نظيفة + ارتفاع خفيف.
   ANB يحتفظ ببنفسجه عبر قاعدته الأعلى خصوصية، فلا يُمسّ هنا. */
body:not([data-theme="formal"]) .bank-btn.active {
  border-color: transparent !important;
  box-shadow: 0 0 0 2px var(--hi), 0 6px 16px rgba(0,0,0,.32) !important;
}
/* رسمي: حدّ زمردي خفيف عند المرور (بدل الرمادي) لتماسك الهوية */
body[data-theme="formal"] .bank-btn:hover:not(.active) {
  border-color: color-mix(in srgb, var(--bp-emerald) 30%, transparent);
}

/* ════════════════════════════════════════════════════════════
   المرحلة 3 — مدّ لغة الهوية للأسطح المساعدة (دخول/طباعة/اتفاقية)
   توكنز الزوايا تُعرَّف على مستوى body أيضاً ليصل var(--r-ctrl)
   للأسطح خارج bp-root (شاشة الدخول، الموديلات).
   ════════════════════════════════════════════════════════════ */
body:not([data-theme="formal"]) { --r-ctrl: 10px; --r-card: 14px; --r-chip: 8px; }
body[data-theme="formal"]       { --r-ctrl: 4px;  --r-card: 10px; --r-chip: 4px; }

/* عناصر تحكّم الأسطح المساعدة → توحيد على --r-ctrl */
.auth-btn, .google-btn, .auth-fld input, .auth-tabs,
.print-modal-do, .print-modal-dl, .print-modal-close, .print-modal-cancel,
.print-modal input, #forcedTermsAcceptBtn {
  border-radius: var(--r-ctrl) !important;
}
.auth-tab { border-radius: var(--r-chip) !important; }
/* حاويات البطاقات/الموديلات → --r-card */
.auth-card, .print-modal, #forcedTermsModal > div {
  border-radius: var(--r-card) !important;
}

/* ════════════════════════════════════════════════════════════
   المرحلة 5 — إصلاح تشوّهات بصرية رصدها المالك
   ════════════════════════════════════════════════════════════ */

/* (د) صف الالتزام ضابط مقطعي متّصل: ألغِ التدوير الداخلي ودوّر الأطراف فقط
   (كان توحيد bp-input يكسر الالتحام فيظهر الحقل المركَّز كصندوق منفصل) */
.nz-oblig-row .bp-input { border-radius: 0 !important; }
.nz-oblig-field:first-of-type .bp-input {
  border-start-start-radius: var(--r-ctrl) !important;
  border-end-start-radius: var(--r-ctrl) !important;
}
.nz-oblig-del {
  border-start-end-radius: var(--r-ctrl) !important;
  border-end-end-radius: var(--r-ctrl) !important;
}

/* (أ) أزرار النتيجة → نفس لغة الزوايا (كانت 9/9/10 غير موحّدة) */
.print-btn, .copy-btn, .det-toggle, .wa-btn {
  border-radius: var(--r-ctrl) !important;
}

/* (ج) إزالة تبويب الراتب القديم على الديسكتوب — استُبدل بالزر المتغيّر
   (.sal-tabs يُجبَر display:flex من JS فيتجاوز إخفاء الديسكتوب الأصلي) */
@media (min-width: 769px) {
  .sal-tabs { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
   المرحلة 6 — دفعة ملاحظات المالك البصرية (10 نقاط)
   ════════════════════════════════════════════════════════════ */

/* (5/6) خلفية الجوال مسطّحة — إطفاء توهّج body::before الذي يصنع تدرّجاً علوياً */
@media (max-width: 768px) {
  body::before { display: none !important; }
}

/* (3) زر البنك المختار في الداكن = خلفية نعناعية + نص غامق (كبقية المختارات) */
body:not([data-theme="formal"]) .bank-btn.active {
  background: var(--hi) !important;
  color: #0d1a12 !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.32) !important;
}
body:not([data-theme="formal"]) .bank-btn.active .btn-name,
body:not([data-theme="formal"]) .bank-btn.active .btn-type {
  color: #0d1a12 !important;
  opacity: 1;
}

/* (7أ) أزرار الدعم السكاني = هوية المختار (داكن نعناعي / رسمي زمردي) */
body:not([data-theme="formal"]) .sup-tab.active,
body:not([data-theme="formal"]) .bp-inputs .sec-box-4 .sup-tab.active {
  background: var(--hi) !important;
  color: #0d1a12 !important;
  box-shadow: none !important;
}
body[data-theme="formal"] .sup-tab.active,
body[data-theme="formal"] .bp-inputs .sec-box-4 .sup-tab.active {
  background: var(--bp-emerald) !important;
  color: #fcfaf5 !important;
  box-shadow: none !important;
}

/* (7ب) زر «حتى التقاعد» — نبض خفيف يوحي بقابلية الضغط (يتوقف عند التفعيل) */
@keyframes nz-retire-hint {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hi) 22%, transparent); }
}
#tenRetireBtn:not(.active) {
  animation: nz-retire-hint 2.4s ease-in-out infinite;
}

/* (8) إعادة الحدّ الخارجي (يمين في RTL) لأول خانة راتب في المجموعة المتّصلة */
.nz-sal-field:first-child .bp-numwrap {
  border-inline-start: 1px solid var(--bp-line);
}

/* (1) زر حذف الالتزام (×): يساوي ارتفاع الخانة ويُحاذيها (لا يمتدّ فوق الليبل) */
.nz-oblig-del {
  align-self: end !important;
  height: 42px;
}
.nz-oblig-field .bp-input { height: 42px; box-sizing: border-box; }

/* (4) تباعد التنبيه وأزرار النتيجة + هوامش جانبية للنتيجة على الجوال */
.warns-box { margin: 14px 0 !important; }
.action-btns-row { margin-top: 14px; }
@media (max-width: 768px) {
  .bp-results { padding-inline: 16px !important; }
}

/* (10) تحسين أزرار البنوك في الفاتح — ظلّ خفيف ساكن + رفعة عند المرور
   + تمييز أوضح للمختار (حلقة زمردية رفيعة) مع بقاء روح التصميم */
body[data-theme="formal"] .bank-btn {
  box-shadow: 0 1px 2px rgba(31,77,60,.05);
}
body[data-theme="formal"] .bank-btn:hover:not(.active) {
  box-shadow: 0 4px 14px rgba(31,77,60,.12);
}
/* قرار المالك (دورة 8): المختار في الفاتح = أخضر غامق صلب + نص أبيض
   (مثل بقية الأزرار المختارة) — أُزيل التمييز الأبيض/الحلقة الزمردية */
body[data-theme="formal"] .bank-btn.active {
  background: var(--bp-emerald) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 5px 16px rgba(31,77,60,.18) !important;
}
body[data-theme="formal"] .bank-btn.active .btn-name,
body[data-theme="formal"] .bank-btn.active .btn-type {
  color: #ffffff !important;
  opacity: 1;
}

/* (9) تفاصيل الأقساط على الديسكتوب — سبب توضيحي تحت كل صف (مثل الجوال) */
.nz-phases .nz-phase-left {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  white-space: normal;
}
.nz-phase-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.nz-phase-reason {
  font-size: 10.5px;
  color: var(--nz-t3);
  line-height: 1.45;
  font-weight: 500;
}

/* الجوال: قرار تصميمي = زوايا 4px موحّدة في الثيمين.
   نُجبر التوكنز على مقياس الجوال (بنفس خصوصية تعريفاتها الأصلية + داخل
   media فيفوز بالترتيب) فلا تتسرّب زوايا الديسكتوب 10px إلى الجوال. */
@media (max-width: 768px) {
  body:not([data-theme="formal"]) .bp-root,
  body[data-theme="formal"] .bp-root,
  body:not([data-theme="formal"]),
  body[data-theme="formal"] {
    --r-ctrl: 4px; --r-card: 10px; --r-chip: 4px;
  }
}

/* ═══════════════════════════════════════════════════
   أنيميشن دخول العناصر — ديسكتوب فقط (min-width:769px)
   ═══════════════════════════════════════════════════ */
@keyframes nz-enter-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nz-enter-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 769px) {
  .bp-header {
    animation: nz-enter-down 1s cubic-bezier(.22,1,.36,1) both;
  }
  .sec-box-1 {
    animation: nz-enter-up 1s cubic-bezier(.22,1,.36,1) .15s both;
  }
  .sec-box-2 {
    animation: nz-enter-up 1s cubic-bezier(.22,1,.36,1) .3s both;
  }
  .sec-box-oblig {
    animation: nz-enter-up 1s cubic-bezier(.22,1,.36,1) .45s both;
  }
  .sec-box-3 {
    animation: nz-enter-up 1s cubic-bezier(.22,1,.36,1) .6s both;
  }
  .sec-box-4 {
    animation: nz-enter-up 1s cubic-bezier(.22,1,.36,1) .75s both;
  }
  .banks-wrap {
    animation: nz-enter-up 1s cubic-bezier(.22,1,.36,1) .3s both;
  }
  #resAuthBox, .res-empty {
    animation: nz-enter-up 1s cubic-bezier(.22,1,.36,1) .5s both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bp-header, .sec-box, .banks-wrap, #resAuthBox, .res-empty {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   تعديلات خاصة بتطبيق الجوال (Capacitor) — تظهر فقط داخل التطبيق
   تُفعَّل عبر html.in-app (يُضاف في <head> عند اكتشاف UA "NazrahApp").
   لا تؤثر إطلاقاً على الموقع في المتصفح العادي.
   ════════════════════════════════════════════════════════════════ */

/* (١) المنطقة الآمنة العليا: ينزل الشريط العلوي تحت الكاميرا/شريط الإشعارات */
html.in-app .wz-topbar {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(48px + env(safe-area-inset-top, 0px));
}

/* (٢) إخفاء الفوتر التسويقي بالكامل داخل التطبيق (التنقل عبر bottom-nav) */
html.in-app .nzf { display: none; }

/* (٣) إخفاء سطر الدعم/التواصل داخل التطبيق (مكرّر — متاح من قائمة الهامبرغر:
   الدعم والتواصل + الروابط القانونية). */
html.in-app .nz-support-line { display: none; }

/* (٤) مسافة سفلية آمنة لمحتوى النتيجة كي لا يقترب من شريط تنقّل النظام */
html.in-app .bp-results { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

/* ═══════════════════════════════════════════════════════════════
   الصفحة الرئيسية للتطبيق (Capacitor) — #nzAppHome
   تظهر داخل التطبيق فقط (html.in-app). كل المتغيّرات والكلاسات معزولة
   تحت #nzAppHome وبادئة ah- → صفر تصادم مع ستايل الموقع.
   الشكل مطابق للديمو _lab/app-home/index.html — لا يُغيَّر.
═══════════════════════════════════════════════════════════════ */
#nzAppHome{ display:none; }
html.in-app #nzAppHome{
  --ah-bg:#f6f3ec;
  --ah-glow1:rgba(31,77,60,.1);
  --ah-glow2:rgba(181,136,47,.08);
  --ah-ink:#14241c;
  --ah-ink2:#41544a;
  --ah-ink3:#74837b;
  --ah-gold:#b5882f;
  --ah-em:#1f4d3c;
  --ah-line:rgba(138,102,34,.25);
  --ah-card-br:rgba(20,36,28,.08);
  --ah-btn-ink:#f3efe2;
  --ah-glass-bg:rgba(255,255,255,.35);
  --ah-grain-op:.025;
  --ah-sphere-op:.6;
  --ah-star-min:.1;
  --ah-star-max:.45;
  position:fixed; inset:0; z-index:9000;
  display:flex; flex-direction:column;
  font-family:'Noto Sans Arabic',sans-serif;
  background:var(--ah-bg); color:var(--ah-ink);
  direction:rtl; min-height:100svh; overflow-x:hidden;
  transition:background .4s ease, color .4s ease;
}
html.in-app #nzAppHome[data-apptheme="dark"]{
  --ah-bg:#070a09;
  --ah-glow1:rgba(36,77,60,.32);
  --ah-glow2:rgba(227,193,120,.07);
  --ah-ink:#f2ecdb;
  --ah-ink2:#b6bdb2;
  --ah-ink3:#79847b;
  --ah-gold:#e3c178;
  --ah-em:#46a87e;
  --ah-line:rgba(227,193,120,.18);
  --ah-card-br:rgba(242,236,219,.09);
  --ah-btn-ink:#0c0f0d;
  --ah-glass-bg:rgba(255,255,255,.07);
  --ah-grain-op:.045;
  --ah-sphere-op:.5;
  --ah-star-min:.12;
  --ah-star-max:.6;
}
#nzAppHome *,#nzAppHome *::before,#nzAppHome *::after{box-sizing:border-box;margin:0;padding:0}

#nzAppHome .ah-bgGlow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(700px 500px at 85% 8%, var(--ah-glow1), transparent 65%),
    radial-gradient(600px 450px at 10% 90%, var(--ah-glow2), transparent 70%);
  animation:ahGlowShift 14s ease-in-out infinite alternate;
}
@keyframes ahGlowShift{
  0%{ background-position:0% 0%, 0% 0%; }
  100%{ background-position:6% 4%, -6% -4%; }
}
#nzAppHome .ah-grain{
  position:absolute;inset:-100px;z-index:1;pointer-events:none;opacity:var(--ah-grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
#nzAppHome .ah-sphere{
  position:absolute;z-index:0;pointer-events:none;color:var(--ah-em);
  top:-110px;right:-120px;width:380px;height:380px;
  opacity:var(--ah-sphere-op);
  animation:ahSphereSpin 90s linear infinite;
  transform-origin:50% 50%;
}
@keyframes ahSphereSpin{ to{ transform:rotate(360deg); } }
#nzAppHome .ah-stars{position:absolute;inset:0;z-index:0;pointer-events:none}
#nzAppHome .ah-stars span{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--ah-gold);opacity:var(--ah-star-min);
  animation:ahTwinkle 4s ease-in-out infinite;
}
#nzAppHome .ah-stars span:nth-child(even){background:var(--ah-em)}
@keyframes ahTwinkle{
  0%,100%{opacity:var(--ah-star-min);transform:scale(.8)}
  50%{opacity:var(--ah-star-max);transform:scale(1.3)}
}
@keyframes ahFadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
#nzAppHome .ah-anim{animation:ahFadeUp .7s ease both}

#nzAppHome .ah-topbar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:9px;
  padding:calc(18px + env(safe-area-inset-top,0px)) 20px 0;
}
#nzAppHome .ah-brand{display:flex;align-items:center;gap:9px}
#nzAppHome .ah-brand svg{width:26px;height:26px;color:var(--ah-em)}
#nzAppHome .ah-name{font-family:'Aref Ruqaa',serif;font-size:1.25rem;color:var(--ah-ink)}
#nzAppHome .ah-theme{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--ah-line);background:var(--ah-glass-bg);
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  color:var(--ah-ink2);cursor:pointer;
  transition:transform .4s ease, background .4s ease, color .4s ease;
}
#nzAppHome .ah-theme:hover{transform:rotate(-15deg)}
#nzAppHome .ah-theme svg{width:15px;height:15px}

#nzAppHome .ah-main{
  position:relative;z-index:2;flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding:28px 20px calc(24px + env(safe-area-inset-bottom,0px));gap:22px;
}
#nzAppHome .ah-kicker{
  position:relative;isolation:isolate;overflow:hidden;
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  flex-direction:row-reverse;
  font-size:.72rem;font-weight:700;color:var(--ah-gold);
  border:1px solid rgba(255,255,255,.35);border-radius:999px;
  padding:5px 14px;background:var(--ah-glass-bg);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.6),
    inset 0 -6px 10px -4px rgba(255,255,255,.25),
    0 6px 18px rgba(20,36,28,.1);
}
#nzAppHome .ah-kicker::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 65%, rgba(255,255,255,.18) 100%);
}
#nzAppHome[data-apptheme="dark"] .ah-kicker{
  border-color:rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.18),
    inset 0 -6px 10px -4px rgba(255,255,255,.05),
    0 6px 18px rgba(0,0,0,.3);
}
#nzAppHome[data-apptheme="dark"] .ah-kicker::before{
  background:linear-gradient(135deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,0) 65%, rgba(255,255,255,.05) 100%);
}
#nzAppHome .ah-dot{width:5px;height:5px;border-radius:50%;background:var(--ah-gold)}

#nzAppHome .ah-headline{
  text-align:right;
  font-size:clamp(1.7rem,7vw,2.3rem);font-weight:900;line-height:1.35;
}
#nzAppHome .ah-headline .ah-em{color:var(--ah-em)}
#nzAppHome .ah-headline .ah-goldtxt{color:var(--ah-gold)}
#nzAppHome .ah-sub{
  text-align:right;color:var(--ah-ink2);font-size:.85rem;font-weight:500;line-height:1.7;
}
#nzAppHome .ah-features{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
#nzAppHome .ah-feature{
  display:flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:600;color:var(--ah-ink2);
}
#nzAppHome .ah-feature svg{width:15px;height:15px;color:var(--ah-gold);flex:none}
#nzAppHome .ah-cta{display:flex;flex-direction:column;gap:10px;margin-top:6px}
#nzAppHome .ah-btn-gold{
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;cursor:pointer;border:none;width:100%;font-family:inherit;
  background:var(--ah-em);color:var(--ah-btn-ink);font-weight:800;font-size:1rem;
  padding:15px 28px;border-radius:8px;
  box-shadow:0 10px 30px rgba(31,77,60,.18);
  transition:background .4s ease, box-shadow .4s ease;
}
#nzAppHome[data-apptheme="dark"] .ah-btn-gold{
  background:var(--ah-gold);
  box-shadow:0 10px 30px rgba(227,193,120,.2);
}
#nzAppHome .ah-btn-line{
  display:flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;color:var(--ah-ink2);font-weight:700;font-size:.85rem;
  padding:13px 28px;border-radius:8px;border:1px solid var(--ah-line);
  background:var(--ah-glass-bg);
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
}
#nzAppHome .ah-btn-line.ah-soon{opacity:.5;pointer-events:none}
#nzAppHome .ah-badge{
  font-size:.65rem;font-weight:800;color:var(--ah-ink3);
  border:1px solid var(--ah-card-br);border-radius:999px;padding:2px 9px;
}