:root{
  /* ===== هوية PSA الرسمية — مستخرجة من الشعار: كحلي #062C6A + أزرق #005EC4 + أبيض #FFFFFF ===== */
  --psa-navy:#0B2A4A;
  --psa-navy-2:#123A63;
  --psa-blue:#1D6FE0;
  --psa-blue-pale:#EAF2FF;
  --psa-blue-tint:#F4F8FD;
  --navy:#0B2A4A;
  --navy-2:#123A63;
  --blue:#1D6FE0;
  --blue-deep:#0F4FB0;
  --blue-pale:#EAF2FF;
  --steel:#5B7285;
  --steel-light:#F3F6F9;
  --line:#DCE4EC;
  --white:#FFFFFF;
  --ok:#188A55;
  --ok-bg:#E4F7EE;
  --warn:#B9790A;
  --warn-bg:#FCF1DD;
  --bad:#C23636;
  --bad-bg:#FBE9E9;
  --ink:#0F1E2E;
  --card-2:#fbfcfe;
  --muted:#5B7285;
  --radius:14px;
  font-family:'Tajawal',sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--steel-light);color:var(--ink);}
/* منع أي انزياح/تمرير أفقي على مستوى الصفحة (خصوصاً على الهاتف) — الجداول تتمرر داخل حاوياتها الخاصة فقط،
   وهذا يضمن أن النوافذ المثبّتة (كحاسبة HMT) تتمركز دائماً في منتصف الشاشة الفعلية دون ميل أو خروج */
html, body{overflow-x:hidden;max-width:100%;}
body{font-family:'Tajawal',sans-serif; min-height:100vh;}
.app{max-width:1180px;margin:0 auto;padding:18px 20px 60px;}
.topbar-outer{
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  background:linear-gradient(135deg,var(--navy) 0%, var(--navy-2) 55%, var(--blue-deep) 100%);
  box-shadow:0 6px 18px -8px rgba(11,42,74,.45);
  position:sticky;top:0;z-index:60;
  margin-bottom:18px;
}
.topbar{
  direction:ltr;
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1fr minmax(0,auto) 1fr;align-items:center;column-gap:14px;
  padding:9px 18px;
  color:#fff;
}
.brand{display:flex;align-items:center;gap:12px;justify-self:start;min-width:0;}
.brand-mark{
  display:flex;align-items:center;justify-content:center;
}
.brand-mark img{display:block;height:27px;width:auto;}
.brand-text h1{font-size:17px;margin:0;font-weight:900;letter-spacing:.2px;}
.brand-text p{margin:2px 0 0;font-size:11.5px;color:#BFD6F5;font-family:'IBM Plex Mono',monospace;letter-spacing:.5px;}
.nav{
  display:flex;align-items:center;gap:4px;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  justify-self:center;max-width:100%;min-width:0;
}
.nav::-webkit-scrollbar{display:none;}
/* عند اختيار العربية: نعكس ترتيب أزرار التنقل عبر Flexbox فقط (دون المساس بتصميم/حجم/تباعد الأزرار
   أو بترتيب الأيقونة والنص داخل كل زر) بحيث تبدأ "الرئيسية" من أقصى اليمين كما في المواقع العربية.
   القائمة نفسها تبقى مُتمركزة في العمود الأوسط من الـGrid بغض النظر عن اتجاه اللغة أو طول النص. */
.nav.nav-rtl{flex-direction:row-reverse;}
.nav button{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#EAF2FF;
  padding:6px 10px;border-radius:8px;font-family:'Tajawal';font-weight:700;font-size:11.5px;cursor:pointer;
  transition:.15s;white-space:nowrap;
}
.nav button svg{width:13px;height:13px;flex:none;stroke:currentColor;}
.nav button:hover{background:rgba(255,255,255,.18);}
.nav button.active{background:var(--white);color:var(--navy);}
.nav-utility{display:flex;align-items:center;gap:8px;justify-self:end;flex:none;}

/* قائمة اللغة المنسدلة (Dropdown) */
.lang-dropdown{position:relative;flex:none;}
.lang-trigger{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#EAF2FF;
  padding:6px 9px;border-radius:8px;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:11.5px;
  cursor:pointer;transition:.15s;white-space:nowrap;
}
.lang-trigger:hover{background:rgba(255,255,255,.18);}
.lang-trigger .caret{font-size:9px;opacity:.8;transition:transform .15s;}
.lang-dropdown.open .lang-trigger .caret{transform:rotate(180deg);}
.lang-menu{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;inset-inline-start:auto;min-width:150px;
  background:var(--navy-2);border:1px solid rgba(255,255,255,.15);border-radius:10px;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.5);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.15s;z-index:80;
}
.lang-menu.open{opacity:1;visibility:visible;transform:translateY(0);}
.lang-item{
  display:flex;align-items:center;gap:8px;width:100%;text-align:start;
  background:none;border:none;color:#EAF2FF;padding:8px 10px;border-radius:7px;
  font-family:'Tajawal';font-size:12.5px;font-weight:700;cursor:pointer;transition:.12s;
}
.lang-item .code{font-family:'IBM Plex Mono',monospace;font-size:11px;opacity:.75;min-width:22px;}
.lang-item:hover{background:rgba(255,255,255,.1);}
.lang-item.active{background:rgba(255,255,255,.16);}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 2px 10px -6px rgba(15,30,46,.12);}
.card + .card{margin-top:16px;}
.section-title{display:flex;align-items:center;gap:10px;margin:0 0 16px;}
.section-title .num{
  width:26px;height:26px;border-radius:50%;background:var(--blue-pale);color:var(--blue-deep);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;font-family:'IBM Plex Mono';
}
.section-title h2{font-size:15.5px;margin:0;font-weight:800;color:var(--navy);}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(max-width:720px){.grid{grid-template-columns:1fr;}}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--steel);margin-bottom:6px;}
.field input[type=number], .field input[type=text], .field select{
  width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;font-family:'Tajawal';
  font-size:14px;background:var(--card-2);color:var(--ink);transition:.15s;
}
.field input:focus, .field select:focus{outline:none;border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px var(--blue-pale);}
.unit{font-size:11.5px;color:var(--steel);font-family:'IBM Plex Mono';}
.seg{display:flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;}
.seg button{flex:1;padding:10px 6px;border:none;background:var(--card-2);font-family:'Tajawal';font-weight:700;font-size:13px;color:var(--steel);cursor:pointer;border-inline-start:1.5px solid var(--line);}
.seg button:first-child{border-inline-start:none;}
.seg button.on{background:var(--blue);color:#fff;}
.typegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media(max-width:720px){.typegrid{grid-template-columns:repeat(2,1fr);}}
.typecard{
  border:1.5px solid var(--line);border-radius:12px;padding:14px 8px;text-align:center;cursor:pointer;background:var(--card-2);
  transition:.15s;
}
.typecard:hover{border-color:var(--blue);}
.typecard.on{border-color:var(--blue);background:var(--blue-pale);box-shadow:0 0 0 2px var(--blue) inset;}
.typecard .ic{font-size:22px;display:block;margin-bottom:6px;}
.typecard .lbl{font-size:12.5px;font-weight:800;color:var(--navy);}
.subrow{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);}
.cta-row{display:flex;justify-content:flex-end;margin-top:20px;}
.btn-primary{
  background:linear-gradient(135deg,var(--blue) 0%, var(--blue-deep) 100%);color:#fff;border:none;
  padding:14px 34px;border-radius:12px;font-family:'Tajawal';font-weight:800;font-size:15px;cursor:pointer;
  box-shadow:0 8px 18px -8px rgba(29,111,224,.6);transition:.15s;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(29,111,224,.7);}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.btn-secondary{
  background:var(--white);color:var(--blue-deep);border:1.5px solid var(--blue);padding:10px 18px;border-radius:10px;
  font-family:'Tajawal';font-weight:700;font-size:13.5px;cursor:pointer;
}
.hint{font-size:12px;color:var(--steel);margin-top:8px;line-height:1.7;}

.result-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;}
@media(max-width:900px){.result-hero{grid-template-columns:1fr;}}
.pump-name{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:700;color:var(--navy);}
.match-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;font-weight:800;font-size:13px;}
.match-high{background:var(--ok-bg);color:var(--ok);}
.match-mid{background:var(--warn-bg);color:var(--warn);}
.match-low{background:var(--bad-bg);color:var(--bad);}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;}
@media(max-width:600px){.specs{grid-template-columns:repeat(2,1fr);}}
.spec-box{background:var(--steel-light);border-radius:10px;padding:10px 12px;}
.spec-box .k{font-size:11px;color:var(--steel);font-weight:700;}
.spec-box .v{font-size:16px;color:var(--navy);font-weight:800;font-family:'IBM Plex Mono';margin-top:2px;}
/* ---------- عرض موحّد للقيم الرقمية (القدرة HP/kW وغيرها): صف لكل قيمة بأيقونة واتجاه LTR ثابت ---------- */
.num-ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;white-space:nowrap;}
.kv-rows{display:flex;flex-direction:column;gap:5px;margin-top:6px;}
.kv-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:5px 9px;min-height:30px;}
.kv-row .kv-l{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:var(--steel);white-space:nowrap;direction:ltr;unicode-bidi:isolate;}
.kv-row .kv-v{font-family:'IBM Plex Mono',monospace;font-weight:800;font-size:14px;color:var(--navy);direction:ltr;unicode-bidi:isolate;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.dark-mode .kv-row{background:#111827;border-color:var(--line);}
body.dark-mode .kv-row .kv-v{color:var(--ink);}
body.mobile-mode .kv-row{min-height:34px;padding:6px 10px;}
body.mobile-mode .kv-row .kv-v{font-size:14.5px;}
@media(max-width:600px){
  .kv-row{min-height:34px;}
  .kv-row .kv-v{font-size:14.5px;}
}
table.qh{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono';font-size:12.5px;}
/* white-space:nowrap هنا كقاعدة أساسية (وليس فقط داخل .qh-scroll) يمنع التفاف نص أي خلية إلى سطر جديد
   يلتصق بصرياً بنص الخلية المجاورة على الشاشات الضيقة (وهو ما كان يُظهر مثلاً "Frequency (Hz)" ملتصقة
   بسعر عمود آخر في جدول "المحركات المتوافقة وأسعارها") — القيم الطويلة تُدار بدلاً من ذلك بالتمرير الأفقي. */
table.qh th,table.qh td{border:1px solid var(--line);padding:7px 6px;text-align:center;vertical-align:middle;white-space:nowrap;}
table.qh th{background:var(--navy);color:#fff;font-weight:600;}
/* ============================= جدول الموديلات المحسّن ============================= */
/* رأس ثابت أثناء التمرير، تمرير أفقي/عمودي داخلي، Hover خفيف، أعمدة بلا تداخل، ودعم كامل للوضع الليلي والهاتف */
.models-table-wrap{overflow:auto;max-height:72vh;border:1.5px solid var(--line);border-radius:12px;position:relative;-webkit-overflow-scrolling:touch;background:var(--white);}
table.models-table{width:100%;border-collapse:separate;border-spacing:0;min-width:760px;}
table.models-table th, table.models-table td{border:none;border-bottom:1px solid var(--line);border-inline-start:1px solid var(--line);padding:9px 8px;}
table.models-table th:first-child, table.models-table td:first-child{border-inline-start:none;}
table.models-table thead th{position:sticky;top:0;z-index:3;background:var(--navy);color:#fff;white-space:nowrap;padding:11px 8px;box-shadow:0 1px 0 var(--line);}
table.models-table tbody tr:last-child td{border-bottom:none;}
table.models-table td{white-space:nowrap;}
table.models-table td.model-name-cell{text-align:start;max-width:230px;overflow:hidden;text-overflow:ellipsis;}
table.models-table td.motor-cell{white-space:normal;min-width:150px;max-width:220px;}
table.models-table tbody tr{transition:background .12s;}
table.models-table tbody tr:hover td{background:var(--blue-pale);}
table.models-table tbody tr.selected td{background:var(--blue-pale);}
/* عمود "الأسعار" المدمج: سطر لكل سعر (💧 هيدروليك / ⚙️ موتور / 💰 إجمالي) بمحاذاة ثابتة لا تتداخل */
td.price-cell{min-width:200px;}
.price-stack{display:flex;flex-direction:column;gap:3px;}
.price-line{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;}
.price-line .pl-l{color:var(--muted);font-weight:600;white-space:nowrap;direction:ltr;unicode-bidi:isolate;}
.price-line .pl-v{font-weight:700;color:var(--navy);white-space:nowrap;direction:ltr;unicode-bidi:isolate;font-size:11.5px;}
.price-line.total{border-top:1px dashed var(--line);padding-top:3px;margin-top:1px;}
.price-line.total .pl-l, .price-line.total .pl-v{color:var(--blue-deep);font-weight:800;}
.price-line .pl-v.na{color:var(--muted);font-weight:600;font-size:10.5px;}
td.price-cell.total-only{min-width:130px;font-weight:800;color:var(--blue-deep);font-size:12.5px;}
td.price-cell.total-only .na{color:var(--muted);font-weight:600;font-size:11px;}
body.dark-mode .models-table-wrap{background:var(--card-2);}
body.dark-mode table.models-table thead th{background:#161E2B;color:var(--ink);}
body.dark-mode table.models-table th, body.dark-mode table.models-table td{border-color:var(--line);}
/* الوضع المضغوط التلقائي (شاشات صغيرة/هاتف): تُخفى الأعمدة الثانوية (col-sec) وتبقى الأساسية —
   الموديل، HP، kW، HMT، Débit، الأسعار — والتفاصيل الكاملة تظهر بالضغط على الصف */
@media(max-width:900px){
  table.models-table .col-sec{display:none;}
  table.models-table{min-width:520px;}
  .models-table-wrap{max-height:65vh;}
}
body.mobile-mode table.models-table .col-sec{display:none;}
body.mobile-mode table.models-table{min-width:520px;}
body.mobile-mode .models-table-wrap{max-height:65vh;}

/* ============================= دليل القدرة الذكي (لوحة معلومات) ============================= */
/* شرائح العائلات القابلة للضغط */
.hg-family-chip{
  background:var(--card-2);border:1.5px solid var(--line);border-radius:18px;
  padding:6px 13px;cursor:pointer;font-family:'Tajawal';font-weight:700;font-size:12.5px;
  color:var(--navy);transition:.14s;display:inline-flex;align-items:center;gap:4px;min-height:32px;
}
.hg-family-chip:hover{border-color:var(--blue);background:var(--blue-pale);transform:translateY(-1px);}
.hg-family-chip.active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 3px 10px -3px rgba(29,111,224,.5);}
.hg-family-chip.active .code-ltr{color:#fff;}
.hg-family-chip.clear{color:var(--bad);border-color:var(--bad-bg);}
.hg-family-chip.clear:hover{background:var(--bad-bg);border-color:var(--bad);}
.hg-family-chip.sm{padding:4px 10px;font-size:11.5px;min-height:27px;}
/* شريط الملخص (Dashboard) */
.hg-summary{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.hg-sum-box{background:var(--steel-light);border:1px solid var(--line);border-radius:10px;padding:8px 16px;min-width:110px;}
.hg-sum-box .k{font-size:10.5px;color:var(--muted);font-weight:700;}
.hg-sum-box .v{font-size:17px;color:var(--navy);font-weight:800;font-family:'IBM Plex Mono';margin-top:2px;}
/* إحصاءات مصغّرة داخل بطاقة القدرة */
.hg-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.hg-mini{background:var(--steel-light);border-radius:8px;padding:6px 9px;}
.hg-mini .k{font-size:10px;color:var(--muted);font-weight:700;}
.hg-mini .v{font-size:12.5px;color:var(--navy);font-weight:800;font-family:'IBM Plex Mono';margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* مستويات التدفق الثلاثة مع HMT الموافق */
.hg-lvls{display:flex;flex-direction:column;gap:6px;}
.hg-lvl-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--card-2);border:1px solid var(--line);border-radius:9px;padding:6px 10px;flex-wrap:wrap;}
.hg-lvl-head{font-size:11.5px;font-weight:800;color:var(--steel);white-space:nowrap;}
.hg-lvl-vals{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.hg-lvl-pill{background:var(--steel-light);border-radius:14px;padding:2px 9px;font-size:11px;font-weight:700;color:var(--navy);white-space:nowrap;}
.hg-lvl-pill.hmt{background:var(--blue-pale);color:var(--blue-deep);}
.hg-lvl-arrow{color:var(--muted);font-weight:800;}
/* شارة متوسط الاستخدام */
.hg-usage-badge{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok);border-radius:16px;padding:4px 11px;font-size:11.5px;font-weight:800;white-space:nowrap;flex-shrink:0;}
body.dark-mode .hg-family-chip{background:var(--card-2);}
body.dark-mode .hg-family-chip.active{background:var(--blue);color:#fff;}
body.dark-mode .hg-sum-box, body.dark-mode .hg-mini{background:#161E2B;}
body.dark-mode .hg-lvl-row{background:#161E2B;}
body.dark-mode .hg-lvl-pill{background:#111827;color:var(--ink);}
body.dark-mode .hg-lvl-pill.hmt{background:var(--blue-pale);color:var(--blue);}
@media(max-width:640px){
  .hg-mini-stats{grid-template-columns:repeat(2,1fr);}
  .hg-summary{gap:7px;}
  .hg-sum-box{min-width:90px;padding:7px 12px;}
  .hg-family-chip{min-height:36px;}
}
body.mobile-mode .hg-mini-stats{grid-template-columns:repeat(2,1fr);}
body.mobile-mode .hg-family-chip{min-height:36px;}

/* توسّع بطاقة القدرة في الدليل التعليمي عند عرض الموديلات — تمتد على كامل الشبكة بشكل مريح */
.hg-power-card{transition:box-shadow .18s, border-color .18s;}
.hg-card-open{grid-column:1 / -1;border-color:var(--blue) !important;box-shadow:0 8px 26px -10px rgba(29,111,224,.35);}
.hg-card-open .models-table-wrap{max-height:56vh;}
body.mobile-mode .hg-card-open .models-table-wrap{max-height:60vh;}

/* ============================= تمرير أفقي سلس لكل الجداول على الهاتف ============================= */
/* الجدول يأخذ عرض محتواه (بلا انضغاط للأعمدة أو تصغير للخط) داخل حاوية تمرير باللمس */
.qh-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  position:relative;
}
.qh-scroll > table.qh{width:max-content;min-width:100%;}
.qh-scroll table.qh th, .qh-scroll table.qh td{white-space:nowrap;}
/* تثبيت عمود أسماء الصفوف (التدفق، HMT، الموديل...) أثناء السحب — أول خلية بكل صف عند حافة "البداية"
   (يمين الجدول في RTL، يسار الجدول في LTR) عبر inset-inline-start بدل right الثابتة */
.qh-scroll table.qh tr > th:first-child{position:sticky;inset-inline-start:0;z-index:3;box-shadow:-6px 0 8px -6px rgba(0,0,0,.22);}
.qh-scroll table.qh tr > td:first-child{position:sticky;inset-inline-start:0;z-index:2;background:var(--white);box-shadow:-6px 0 8px -6px rgba(0,0,0,.15);}
/* الظل نفسه (box-shadow) ليس له خاصية منطقية مكافئة، فنعكس اتجاهه يدوياً فقط عند LTR */
html[dir="ltr"] .qh-scroll table.qh tr > th:first-child{box-shadow:6px 0 8px -6px rgba(0,0,0,.22);}
html[dir="ltr"] .qh-scroll table.qh tr > td:first-child{box-shadow:6px 0 8px -6px rgba(0,0,0,.15);}
body.dark-mode .qh-scroll table.qh tr > td:first-child{background:var(--card-2);}
/* تلميح السحب عند أول استعمال على الهاتف — يختفي نهائياً بعد أول سحب */
.qh-swipe-hint{
  text-align:center;background:var(--blue-pale);color:var(--blue-deep);
  border:1px dashed var(--blue);border-radius:8px;padding:6px 10px;
  font-size:11.5px;font-weight:800;margin:8px 0 6px;
  animation:swipePulse 1.6s ease-in-out infinite;
}
@keyframes swipePulse{0%,100%{opacity:.7;}50%{opacity:1;}}

/* ============================= ⛶ عرض الجدول بملء الشاشة (الهاتف) ============================= */
/* زر صغير يظهر على الهاتف فقط فوق كل جدول — يفتح الجدول في نافذة كاملة مع تكبير/تصغير وتمرير مريح */
.qh-fs-btnrow{display:none;justify-content:flex-end;margin:6px 0 4px;}
.qh-fullscreen-btn{
  background:var(--card-2);border:1.5px solid var(--line);color:var(--blue-deep);
  border-radius:9px;padding:6px 12px;font-size:12px;font-weight:800;cursor:pointer;
  font-family:'Tajawal';display:inline-flex;align-items:center;gap:5px;min-height:36px;
}
.qh-fullscreen-btn:active{background:var(--blue-pale);}
@media(max-width:860px){ .qh-fs-btnrow{display:flex;} }
body.mobile-mode .qh-fs-btnrow{display:flex;}
#qhFsOverlay{
  position:fixed;inset:0;z-index:1300;background:var(--steel-light);
  display:flex;flex-direction:column;animation:hmtOverlayIn .15s ease-out;
}
.qh-fs-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;background:var(--white);border-bottom:1.5px solid var(--line);flex-shrink:0;
}
.qh-fs-title{font-weight:800;color:var(--navy);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qh-fs-controls{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.qh-fs-controls button{
  min-width:42px;min-height:42px;border:1.5px solid var(--line);background:var(--card-2);
  border-radius:9px;font-size:16px;cursor:pointer;color:var(--navy);display:flex;align-items:center;justify-content:center;
}
.qh-fs-controls button:active{background:var(--blue-pale);}
#qhFsZoomVal{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);min-width:44px;text-align:center;}
.qh-fs-body{
  flex:1;overflow:auto !important;max-height:none !important;
  -webkit-overflow-scrolling:touch;padding:10px;
  touch-action:pan-x pan-y pinch-zoom;
}
.qh-fs-zoom{width:max-content;}
.qh-fs-body table.qh{width:max-content;min-width:0;}
body.qh-fs-open{overflow:hidden;}
body.dark-mode #qhFsOverlay{background:var(--steel-light);}
body.dark-mode .qh-fs-head{background:var(--card-2);}

/* ---------- 📜 سجل العمليات ---------- */
.hist-card{transition:border-color .15s, box-shadow .15s;}
.hist-card:hover{border-color:var(--blue);}
.hist-card.pinned{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn-bg);}
.hist-mini{font-size:11.5px !important;padding:6px 10px !important;min-height:32px;}
.hist-del:hover{background:var(--bad-bg) !important;color:var(--bad) !important;}
body.mobile-mode .hist-mini{min-height:38px;}
input[type="date"]{font-family:'IBM Plex Mono',monospace;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);font-size:12.5px;}
body.dark-mode input[type="date"]{background:var(--card-2);color-scheme:dark;}

/* ---------- تمييز قسم التفاصيل بعد اختيار نتيجة من البحث السريع ---------- */
#searchDetailAnchor{scroll-margin-top:14px;border-radius:14px;}
#searchDetailAnchor.flash-on{animation:detailFlash 1.7s ease-out;}
@keyframes detailFlash{
  0%{box-shadow:0 0 0 4px var(--blue);}
  60%{box-shadow:0 0 0 4px rgba(29,111,224,.35);}
  100%{box-shadow:0 0 0 0 rgba(29,111,224,0);}
}

/* ============================= زر ونافذة Fiche Technique (PDF) ============================= */
.fiche-btn{
  background:var(--blue-pale);border:1.5px solid var(--blue);color:var(--blue-deep);
  border-radius:8px;padding:4px 11px;font-size:11.5px;font-weight:800;cursor:pointer;
  font-family:'Tajawal';display:inline-flex;align-items:center;gap:4px;transition:.14s;
  vertical-align:middle;white-space:nowrap;line-height:1.6;
}
.fiche-btn:hover{background:var(--blue);color:#fff;transform:translateY(-1px);box-shadow:0 3px 10px -3px rgba(29,111,224,.5);}
body.dark-mode .fiche-btn{background:var(--blue-pale);color:var(--blue);}
body.dark-mode .fiche-btn:hover{background:var(--blue);color:#fff;}
body.mobile-mode .fiche-btn{min-height:34px;font-size:12px;}
@media(max-width:640px){ .fiche-btn{min-height:34px;font-size:12px;} }
/* زر 📍 Emplacement — نفس تصميم وحجم زر 📄 Fiche Technique تماماً، بجانبه */
.empl-btn{
  background:var(--blue-pale);border:1.5px solid var(--blue);color:var(--blue-deep);
  border-radius:8px;padding:4px 11px;font-size:11.5px;font-weight:800;cursor:pointer;
  font-family:'Tajawal';display:inline-flex;align-items:center;gap:4px;transition:.14s;
  vertical-align:middle;white-space:nowrap;line-height:1.6;
}
.empl-btn:hover{background:var(--blue);color:#fff;transform:translateY(-1px);box-shadow:0 3px 10px -3px rgba(29,111,224,.5);}
body.dark-mode .empl-btn{background:var(--blue-pale);color:var(--blue);}
body.dark-mode .empl-btn:hover{background:var(--blue);color:#fff;}
body.mobile-mode .empl-btn{min-height:34px;font-size:12px;}
@media(max-width:640px){ .empl-btn{min-height:34px;font-size:12px;} }
#emplOverlay{
  position:fixed;inset:0;background:rgba(15,23,32,.45);z-index:1050;
  display:flex;align-items:center;justify-content:center;padding:16px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  animation:hmtOverlayIn .16s ease-out;overflow-y:auto;
}
#emplBox{
  background:var(--white);border-radius:16px;width:100%;max-width:360px;
  max-width:min(360px, calc(100vw - 24px));padding:18px 20px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.45);margin:auto;
  animation:hmtBoxIn .2s cubic-bezier(.2,.9,.3,1.1);
  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;
  display:flex;flex-direction:column;
}
body.dark-mode #emplBox{background:var(--white);}
#floorsOverlay{
  position:fixed;inset:0;background:rgba(15,23,32,.45);z-index:1050;
  display:flex;align-items:center;justify-content:center;padding:16px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  animation:hmtOverlayIn .16s ease-out;overflow-y:auto;
}
#floorsBox{
  background:var(--white);border-radius:16px;width:100%;max-width:360px;
  max-width:min(360px, calc(100vw - 24px));padding:18px 20px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.45);margin:auto;
  animation:hmtBoxIn .2s cubic-bezier(.2,.9,.3,1.1);
  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;
  display:flex;flex-direction:column;
}
body.dark-mode #floorsBox{background:var(--white);}
.floors-open-btn:hover{filter:brightness(0.97);}
body.mobile-mode .floors-open-btn{min-height:34px;}
@media(max-width:640px){ .floors-open-btn{min-height:34px;} }
#ficheOverlay{
  position:fixed;inset:0;background:rgba(15,23,32,.45);z-index:1050;
  display:flex;align-items:center;justify-content:center;padding:16px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  animation:hmtOverlayIn .16s ease-out;overflow-y:auto;
}
#ficheBox{
  background:var(--white);border-radius:16px;width:100%;max-width:360px;
  max-width:min(360px, calc(100vw - 24px));padding:18px 20px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.45);margin:auto;
  animation:hmtBoxIn .2s cubic-bezier(.2,.9,.3,1.1);
  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;
  display:flex;flex-direction:column;
}
/* عند توفر الملف: نافذة أوسع على الكمبيوتر مع معاينة مدمجة للـPDF داخل النظام نفسه */
#ficheBox.with-preview{max-width:min(920px, calc(100vw - 24px));}
.fiche-actions{display:flex;flex-direction:column;gap:8px;flex-shrink:0;}
.fiche-actions .btn-primary, .fiche-actions .btn-secondary{width:100%;min-height:46px;font-size:14px;display:flex;align-items:center;justify-content:center;}
#ficheBox.with-preview .fiche-actions{flex-direction:row;flex-wrap:wrap;}
#ficheBox.with-preview .fiche-actions .btn-primary, #ficheBox.with-preview .fiche-actions .btn-secondary{flex:1;min-width:150px;width:auto;}
.fiche-preview-wrap{margin-top:12px;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#525659;flex:1;min-height:0;}
.fiche-preview-wrap iframe{display:block;width:100%;height:58vh;border:0;}
/* على الهاتف: المعاينة داخل إطار غير مدعومة في متصفحات الهاتف — تبقى أزرار الفتح/التحميل/الطباعة وهي تفتح الملف مباشرة */
@media(max-width:760px){
  .fiche-preview-wrap{display:none;}
  #ficheBox.with-preview{max-width:min(360px, calc(100vw - 24px));}
  #ficheBox.with-preview .fiche-actions{flex-direction:column;}
}
body.mobile-mode .fiche-preview-wrap{display:none;}
body.mobile-mode #ficheBox.with-preview{max-width:min(360px, calc(100vw - 24px));}
body.mobile-mode #ficheBox.with-preview .fiche-actions{flex-direction:column;}
body.dark-mode #ficheOverlay{background:rgba(0,0,0,.65);}
body.dark-mode #ficheBox{background:var(--white);}
body.dark-mode .fiche-preview-wrap{border-color:var(--line);}
table.qh td.op{background:var(--blue-pale);font-weight:700;color:var(--blue-deep);}
table.qh td.zone-good{background:var(--ok-bg);color:var(--ok);font-weight:700;}
table.qh th.zone-good-th{background:var(--ok);}
/* صف "نقطة HMT المطلوبة" الاختياري في جدول الأداء — لون مميّز مختلف تماماً عن "نطاق التدفق الجيد" الأخضر،
   حتى يتضح فوراً أنها نقطة محسوبة عند طلب المستخدم وليست جزءاً من بيانات الأداء الأصلية. */
table.qh tr.hmt-target-row th{background:var(--amber-bg,#FFF3CD);color:var(--amber-deep,#8A6116);}
table.qh tr.hmt-target-row td{background:var(--amber-bg,#FFF3CD);color:var(--amber-deep,#8A6116);}
.zone-legend{display:flex;align-items:center;gap:8px;margin-top:10px;}
.zone-legend .swatch{width:14px;height:14px;border-radius:4px;background:var(--ok-bg);border:1.5px solid var(--ok);display:inline-block;}
.seg3{display:flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;max-width:420px;}
.seg3 button{flex:1;padding:10px 6px;border:none;background:var(--card-2);font-family:'Tajawal';font-weight:700;font-size:13px;color:var(--steel);cursor:pointer;border-inline-start:1.5px solid var(--line);}
.seg3 button:first-child{border-inline-start:none;}
.seg3 button.on{background:var(--blue);color:#fff;}
.alt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:900px){.alt-grid{grid-template-columns:1fr;}}
.alt-card{border:1.5px solid var(--line);border-radius:12px;padding:14px;background:var(--card-2);cursor:pointer;transition:.15s;}
.alt-card:hover{border-color:var(--blue);transform:translateY(-2px);}
.alt-card .nm{font-family:'IBM Plex Mono';font-weight:700;color:var(--navy);font-size:15px;}
.alt-card .rk{font-size:11px;color:var(--steel);font-weight:700;margin-bottom:6px;}
.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media(max-width:720px){.settings-grid{grid-template-columns:1fr;}}
.settings-group{margin-bottom:8px;}
.settings-group h3{font-size:13.5px;color:var(--blue-deep);margin:22px 0 10px;font-weight:800;border-inline-start:3px solid var(--blue);padding-inline-start:8px;}
.save-bar{position:sticky;bottom:0;background:var(--white);border-top:1px solid var(--line);padding:14px 0 4px;display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 22px;border-radius:10px;font-weight:700;font-size:13.5px;box-shadow:0 10px 30px -10px rgba(0,0,0,.4);z-index:50;opacity:0;transition:.25s;pointer-events:none;}
/* ⬆️ زر العودة لأعلى الصفحة — عائم في الزاوية السفلية (طرف "النهاية" القرائي)، صغير ولا يُغطّي محتوى، مخفي
   افتراضياً ويظهر فقط بعد النزول لمسافة مناسبة (يتحكم بها JS عبر صنف .show) */
#scrollTopBtn{
  position:fixed;bottom:22px;inset-inline-end:18px;z-index:70;
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);
  background:var(--white);color:var(--blue-deep);font-size:18px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(11,42,74,.35);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);
  transition:opacity .2s,transform .2s,visibility .2s;
}
#scrollTopBtn.show{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
#scrollTopBtn:hover{background:var(--blue-pale);border-color:var(--blue);}
body.dark-mode #scrollTopBtn{background:var(--white);border-color:var(--line);}
@media(max-width:640px){ #scrollTopBtn{bottom:18px;inset-inline-end:14px;width:40px;height:40px;font-size:16px;} }
.toast.show{opacity:1;}
.empty{text-align:center;padding:50px 20px;color:var(--steel);}
.empty .ic{font-size:40px;margin-bottom:10px;}
.small{font-size:12px;color:var(--steel);}
.warn-note{background:var(--warn-bg);color:#7A5200;border:1px solid #EFD69B;border-radius:10px;padding:10px 14px;font-size:12.5px;margin-top:14px;line-height:1.8;}
.chart-wrap{margin-top:6px;overflow-x:auto;}
.footer-note{text-align:center;color:var(--steel);font-size:11.5px;margin-top:24px;}
.footer-copyright{text-align:center;margin-top:14px;padding:16px 10px 4px;border-top:1px solid var(--line);font-family:'IBM Plex Mono',monospace;direction:ltr;}
.footer-copyright .fc-title{font-size:12.5px;font-weight:700;color:var(--navy);letter-spacing:.4px;}
.footer-copyright .fc-dev{font-size:11.5px;color:var(--blue-deep);font-weight:600;margin-top:3px;}
.footer-copyright .fc-rights{font-size:10.5px;color:var(--steel);margin-top:3px;letter-spacing:.3px;}
body.dark-mode .footer-copyright{border-top-color:var(--line);}
body.dark-mode .footer-copyright .fc-title{color:var(--ink);}
body.dark-mode .footer-copyright .fc-dev{color:var(--blue);}
.pump-name, .alt-card .nm, .code-ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;text-align:start;}
.search-box{position:relative;}
.filter-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:var(--card-2);border:1.5px solid var(--line);border-radius:12px;padding:12px 16px;margin:14px 0;}
.filter-group{display:flex;align-items:center;gap:8px;}
.filter-label{font-size:12.5px;font-weight:700;color:var(--steel);white-space:nowrap;}
.filter-group select{border:1.5px solid var(--line);border-radius:8px;padding:6px 10px;font-family:'Tajawal';font-size:13px;background:var(--white);color:var(--navy);cursor:pointer;}
.search-box input{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;font-family:'Tajawal';}
.search-box input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-pale);}
.search-results{margin-top:14px;display:flex;flex-direction:column;gap:8px;}
.search-result-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--card-2);cursor:pointer;transition:.15s;}
.search-result-row:hover{border-color:var(--blue);background:var(--blue-pale);}
.search-result-row .tag{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:8px;}
.tag-pump{background:var(--blue-pale);color:var(--blue-deep);}
.tag-motor{background:#F0E9FB;color:#6B3FB8;}
.tag-surface{background:var(--ok-bg);color:var(--ok);}
.tag-well{background:#FFEFD9;color:#B5651D;}
.tag-armoire{background:#E7EEFB;color:#3355AA;}
.tag-generatrice{background:#FDE8E8;color:#B33A3A;}
.tag-dirty{background:#EFE6DC;color:#7A5A33;}
.tag-monomulti{background:#E0F2F1;color:#00695C;}
.tag-misc{background:#EDEBFB;color:#5B4E9E;}
/* شارة صغيرة محايدة لعرض قيمة مواصفة منفردة (HP وحدها، KVA وحدها...) داخل سطر النتيجة المختصر في "بحث سريع"،
   بدل دمجها كلها في نص واحد متلاصق بفواصل " · " — كل قيمة تبدو بصرياً كعنصر مستقل قابل للتمييز بسرعة. */
.spec-pill{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:800;padding:2.5px 8px;border-radius:8px;background:var(--white);border:1.3px solid var(--line);color:var(--navy);}

/* شريحة/بطاقة صغيرة قابلة للاختيار (Checkbox) — تُستعمل في "فلتر سريع للعائلات الأكثر استخداماً" في كل من
   طلب جديد والدليل السريع؛ تعتمد على متغيرات الألوان فتنعكس تلقائياً في الوضع الليلي دون أي استثناء، وتُبرز
   العنصر المختار بإطار وخلفية بلون Accent بدل الاعتماد على شكل صندوق الاختيار وحده. */
.chip-label{color:var(--navy);background:var(--card-2);border:1.5px solid var(--line);border-radius:8px;padding:5px 10px;transition:.15s;}
.chip-label:hover{border-color:var(--blue);}
.chip-label:has(input:checked){background:var(--blue-pale);border-color:var(--blue);color:var(--blue-deep);}
.chip-label input[type=checkbox]{accent-color:var(--blue);}
/* تمييز العنصر المحدد داخل القائمة المنسدلة متعددة الاختيار بلون Accent واضح بدل الاعتماد على شكل صندوق الاختيار وحده */
.msd-option:has(input:checked){background:var(--blue-pale);color:var(--blue-deep);}
.msd-option input[type=checkbox]{accent-color:var(--blue);}
/* ============================= الوضع الليلي (Dark Mode) — إعادة تصميم كاملة ============================= */
/* درجات حديثة مستوحاة من Discord / VS Code / GitHub Dark / Linear — بدون أي أسود خالص، بتباين ممتاز للقراءة */
body.dark-mode{
  --navy:#F9FAFB; --navy-2:#E5E9F0; --blue:#3B82F6; --blue-deep:#2563EB; --blue-pale:#1E2A3F;
  --steel:#D1D5DB; --steel-light:#111827; --line:#374151; --white:#1F2937;
  --ok:#34D399; --ok-bg:#0F2E22; --warn:#FBBF24; --warn-bg:#3A2E10; --bad:#F87171; --bad-bg:#3B1A1A;
  --ink:#F9FAFB; --muted:#9CA3AF; --card-2:#1A2331;
  background:var(--steel-light);
}
body.dark-mode, body.dark-mode .card, body.dark-mode .filter-bar, body.dark-mode select, body.dark-mode input,
body.dark-mode .search-result-row, body.dark-mode .alt-card, body.dark-mode .model-card, body.dark-mode .typecard,
body.dark-mode .nav button{ transition:background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease; }

/* ---------- شريط التنقل العلوي: أكثر بروزاً، كل زر بطاقة صغيرة بحواف دائرية وظل خفيف ---------- */
body.dark-mode .topbar-outer{background:linear-gradient(135deg,#1F2937 0%, #172032 60%, #111827 100%);box-shadow:0 8px 28px -8px rgba(0,0,0,.55);border-bottom:1px solid var(--line);}
body.dark-mode .nav button{
  background:#1F2937;border:1.5px solid var(--line);color:var(--steel);
  font-size:11.5px;padding:6px 10px;border-radius:8px;box-shadow:0 2px 6px -2px rgba(0,0,0,.4);
}
body.dark-mode .nav button:hover{background:#283244;border-color:var(--blue);color:var(--ink);box-shadow:0 4px 14px -4px rgba(59,130,246,.45);transform:translateY(-1px);}
body.dark-mode .nav button.active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 4px 16px -4px rgba(59,130,246,.6);}
body.dark-mode .theme-toggle{background:#1F2937;border:1.5px solid var(--line);font-size:13px;}
body.dark-mode .theme-toggle:hover{background:#283244;border-color:var(--blue);}
body.dark-mode .lang-trigger{background:#1F2937;border:1.5px solid var(--line);color:var(--steel);}
body.dark-mode .lang-trigger:hover{background:#283244;border-color:var(--blue);}
body.dark-mode .lang-menu{background:#1A2331;border-color:var(--line);}
body.dark-mode .lang-item{color:var(--steel);}
body.dark-mode .lang-item:hover{background:#283244;color:var(--ink);}
body.dark-mode .lang-item.active{background:var(--blue);color:#fff;}
body.dark-mode .brand-text p{color:#93A5C4;}

/* ---------- الأقسام (Sections/Cards): خلفية مختلفة عن الصفحة، حدود واضحة، ظل، عنوان مميز، فراغ داخلي أكبر ---------- */
body.dark-mode .card{background:var(--white);border:1px solid var(--line);box-shadow:0 4px 18px -8px rgba(0,0,0,.5);padding:24px;}
body.dark-mode .card:hover{border-color:#4B5A6E;}
body.dark-mode .section-title{padding-bottom:12px;margin-bottom:18px;border-bottom:1.5px solid var(--line);}
body.dark-mode .section-title .num{background:var(--blue-pale);color:var(--blue);}
body.dark-mode .section-title h2{color:var(--ink);}
body.dark-mode .settings-group h3{color:var(--blue);border-inline-start-color:var(--blue);}

/* ---------- عناصر الإدخال: Select / Input / Checkbox / Radio / Multi-Select ---------- */
body.dark-mode .field label{color:var(--steel);}
body.dark-mode .field input[type=number], body.dark-mode .field input[type=text], body.dark-mode .field select{
  background:#161E2B;color:var(--ink);border:1.5px solid var(--line);
}
body.dark-mode .field input::placeholder{color:#6B7280;}
body.dark-mode .field input:hover, body.dark-mode .field select:hover{border-color:#4B5A6E;}
body.dark-mode .field input:focus, body.dark-mode .field select:focus{
  background:#1A2432;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.25);
}
body.dark-mode select{color-scheme:dark;}
body.dark-mode input[type=checkbox], body.dark-mode input[type=radio]{accent-color:var(--blue);}
body.dark-mode .seg, body.dark-mode .seg3{border-color:var(--line);}
body.dark-mode .seg button, body.dark-mode .seg3 button{background:#161E2B;color:var(--steel);border-inline-start-color:var(--line);}
body.dark-mode .seg button:hover, body.dark-mode .seg3 button:hover{background:#1F2937;color:var(--ink);}
body.dark-mode .seg button.on, body.dark-mode .seg3 button.on{background:var(--blue);color:#fff;}
body.dark-mode .typecard{background:#161E2B;border-color:var(--line);}
body.dark-mode .typecard:hover{border-color:var(--blue);box-shadow:0 4px 14px -4px rgba(59,130,246,.35);}
body.dark-mode .typecard.on{background:var(--blue-pale);box-shadow:0 0 0 2px var(--blue) inset;}
body.dark-mode .typecard .lbl{color:var(--ink);}
body.dark-mode .btn-primary{box-shadow:0 4px 16px -4px rgba(59,130,246,.5);}
body.dark-mode .btn-primary:hover{box-shadow:0 10px 26px -6px rgba(59,130,246,.65);}
body.dark-mode .btn-secondary{background:#161E2B;border-color:var(--blue);color:var(--blue);}
body.dark-mode .btn-secondary:hover{background:var(--blue-pale);}
body.dark-mode .save-bar{background:var(--white);border-color:var(--line);}

/* ---------- الفلاتر (filter-bar / select) — خلفية أغمق قليلاً، حدود واضحة، Glow أزرق عند Hover ---------- */
body.dark-mode .filter-bar{background:#161E2B;border:1.5px solid var(--line);}
body.dark-mode .filter-label{color:var(--steel);}
body.dark-mode .filter-group select, body.dark-mode .filter-group input{
  background:#1F2937;color:var(--ink);border:1.5px solid var(--line);
}
body.dark-mode .filter-group select:hover, body.dark-mode .filter-group input:hover{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15);}
body.dark-mode .filter-group select:focus, body.dark-mode .filter-group input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.3);}

/* ---------- القائمة المنسدلة متعددة الاختيار (Multi-Select) — تصميم حديث ---------- */
body.dark-mode .msd-toggle{background:#1F2937;color:var(--ink);border:1.5px solid var(--line);}
body.dark-mode .msd-toggle:hover{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15);}
body.dark-mode .msd-panel{background:#1F2937;border:1.5px solid var(--line);box-shadow:0 12px 32px -8px rgba(0,0,0,.65);}
body.dark-mode .msd-search{background:#161E2B;color:var(--ink);border-color:var(--line);}
body.dark-mode .msd-option{color:var(--ink);}
body.dark-mode .msd-option:hover{background:#283244;}

/* ---------- شرائح المحرك (Motor Chips) ---------- */
body.dark-mode .motor-chip:hover{border-color:var(--blue);}

/* ---------- بطاقات الموديل (Model Cards) والبدائل (Alt Cards) ---------- */
body.dark-mode .model-card{background:#1A2331;border-color:var(--line);}
body.dark-mode .model-card:hover{border-color:#4B5A6E;}
body.dark-mode .mc-header{border-color:var(--line);}
body.dark-mode .alt-card{background:#1A2331;border-color:var(--line);}
body.dark-mode .alt-card:hover{border-color:var(--blue);box-shadow:0 6px 18px -6px rgba(59,130,246,.35);}
body.dark-mode .alt-card .nm{color:var(--ink);}
body.dark-mode .alt-card .rk{color:var(--muted);}

/* ---------- الجداول ---------- */
body.dark-mode table.qh th, body.dark-mode table.qh td{border-color:var(--line);}
body.dark-mode table.qh th{background:#161E2B;color:var(--ink);}
body.dark-mode table.qh td{color:var(--steel);}
body.dark-mode table.qh td.op{background:var(--blue-pale);color:var(--blue);}
body.dark-mode table.qh td.zone-good{background:var(--ok-bg);color:var(--ok);}
body.dark-mode table.qh th.zone-good-th{background:#0F3324;}
body.dark-mode .ref-row:hover{background:#1A2331!important;}

/* ---------- شرائح النتائج والبحث السريع ---------- */
body.dark-mode .search-result-row{background:#1A2331;border-color:var(--line);}
body.dark-mode .search-result-row:hover{border-color:var(--blue);background:var(--blue-pale);}
body.dark-mode .search-box input{background:#161E2B;color:var(--ink);border-color:var(--line);}
body.dark-mode .search-box input:focus{box-shadow:0 0 0 3px rgba(59,130,246,.25);}
body.dark-mode .tag-pump{background:var(--blue-pale);color:#93C5FD;}
body.dark-mode .tag-motor{background:#2E1F42;color:#C4A6F0;}
body.dark-mode .tag-surface{background:var(--ok-bg);color:var(--ok);}
body.dark-mode .tag-well{background:#3A2A10;color:#F0B366;}
body.dark-mode .tag-armoire{background:#1E2A42;color:#8FB0EE;}
body.dark-mode .tag-generatrice{background:#3B1A1A;color:#F0A0A0;}
body.dark-mode .tag-dirty{background:#332A1E;color:#D3B27E;}
body.dark-mode .tag-monomulti{background:#0F332F;color:#5FCFC2;}
body.dark-mode .tag-misc{background:#251F3A;color:#B3A2E8;}

/* ---------- عناصر عامة أخرى ---------- */
body.dark-mode .spec-box{background:#161E2B;}
body.dark-mode .spec-box .k{color:var(--muted);}
body.dark-mode .spec-box .v{color:var(--ink);}
body.dark-mode .pump-name{color:var(--ink);}
body.dark-mode .hint{color:var(--muted);}
body.dark-mode .small{color:var(--muted);}
body.dark-mode .empty{color:var(--muted);}
body.dark-mode .warn-note{background:var(--warn-bg);color:#FBD38D;border-color:#5A4413;}
body.dark-mode .toast{background:#1F2937;border:1px solid var(--line);box-shadow:0 10px 30px -10px rgba(0,0,0,.7);}
body.dark-mode .match-badge.match-high{background:var(--ok-bg);color:var(--ok);}
body.dark-mode .match-badge.match-mid{background:var(--warn-bg);color:var(--warn);}
body.dark-mode .match-badge.match-low{background:var(--bad-bg);color:var(--bad);}

/* ---------- منحنى الأداء (SVG Chart) ---------- */
body.dark-mode .chart-wrap svg{background:#161E2B!important;border-color:var(--line)!important;}
body.dark-mode .chart-wrap svg line[stroke="#E4EBF2"]{stroke:#2A3444!important;}
body.dark-mode .chart-wrap svg line[stroke="#B9C6D4"]{stroke:#4B5A6E!important;}
body.dark-mode .chart-wrap svg line[stroke="#0B2A4A"]{stroke:#93C5FD!important;}
body.dark-mode .chart-wrap svg text[fill="#5B7285"]{fill:#9CA3AF!important;}
body.dark-mode .chart-wrap svg text[fill="#0B2A4A"]{fill:#F9FAFB!important;}
body.dark-mode .chart-wrap svg circle[stroke="#fff"]{stroke:#161E2B!important;}

/* ---------- نافذة حاسبة HMT المنبثقة (Modal) ---------- */
/* تُغلق فقط بزر ✕ أو Esc — لا إغلاق بالضغط خارجها. تتمركز فوق كل العناصر مع Overlay خفيف. */
#hmtCalcOverlay{
  position:fixed;inset:0;background:rgba(15,23,32,.45);
  z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:20px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  animation:hmtOverlayIn .18s ease-out;
}
#hmtCalcOverlay.closing{animation:hmtOverlayOut .16s ease-in forwards;}
#hmtCalcBox{
  background:var(--white);border-radius:16px;width:100%;max-width:430px;
  padding:20px 22px;box-shadow:0 24px 60px -12px rgba(0,0,0,.45);
  max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);
  display:flex;flex-direction:column;
  animation:hmtBoxIn .22s cubic-bezier(.2,.9,.3,1.1);
}
#hmtCalcOverlay.closing #hmtCalcBox{animation:hmtBoxOut .16s ease-in forwards;}
#hmtCalcOverlay.no-anim, #hmtCalcOverlay.no-anim #hmtCalcBox{animation:none;}
.hmt-modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-shrink:0;user-select:none;-webkit-user-select:none;}
.hmt-modal-head h3{margin:0;color:var(--navy);font-size:17px;}
@media(hover:hover) and (pointer:fine){ .hmt-modal-head{cursor:move;} }
.hmt-modal-close{
  background:var(--steel-light);border:none;width:38px;height:38px;border-radius:10px;
  font-size:17px;cursor:pointer;color:var(--muted);line-height:1;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.hmt-modal-close:hover{background:var(--bad-bg);color:var(--bad);}
.hmt-modal-body{overflow-y:auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:2px;-webkit-overflow-scrolling:touch;}
.hmt-modal-body .field{max-width:100%;}
.hmt-modal-body .field input{width:100%;min-height:44px;font-size:15px;}
.hmt-actions{display:flex;gap:8px;flex-shrink:0;}
.hmt-actions .btn-primary{flex:1;min-height:46px;}
.hmt-actions .btn-secondary{min-height:46px;white-space:nowrap;}
@keyframes hmtOverlayIn{from{opacity:0;}to{opacity:1;}}
/* ============================================================
   🔐 Login Gate — الواجهة الرئيسية تبقى ظاهرة خلف النافذة بشفافية/Blur خفيفين، والبطاقة تظهر بـ fade+scale بسيط */
body.auth-locked #app{
  filter:blur(6px) brightness(.97);
  pointer-events:none;
  user-select:none;
  transition:filter .25s ease;
}
#authGate:empty{display:none;}
#authOverlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(11,42,74,.45);
  display:flex;align-items:center;justify-content:center;padding:20px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  animation:hmtOverlayIn .2s ease-out;
}
#authCard{
  width:100%;max-width:340px;
  background:var(--white);
  border-radius:18px;
  padding:28px 26px 24px;
  box-shadow:0 28px 70px -14px rgba(11,42,74,.5);
  text-align:center;
  animation:authCardIn .28s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes authCardIn{from{opacity:0;transform:scale(.94) translateY(10px);}to{opacity:1;transform:scale(1) translateY(0);}}
@keyframes authShake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-4px);}
  40%,60%{transform:translateX(4px);}
}
#authCard.auth-shake{animation:authCardIn .28s cubic-bezier(.2,.9,.3,1.1), authShake .45s ease-in-out;}
.auth-logo{width:56px;height:56px;object-fit:contain;margin:0 auto 8px;display:block;}
.auth-sitename{font-family:'Tajawal';font-weight:800;font-size:13px;color:var(--steel);letter-spacing:.02em;margin-bottom:14px;}
.auth-title{font-family:'Tajawal';font-weight:900;font-size:18px;color:var(--navy);margin:0 0 16px;}
.auth-label{display:block;text-align:start;font-family:'Tajawal';font-weight:700;font-size:12.5px;color:var(--navy);margin-bottom:6px;}
.auth-password-row{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:10px;padding:2px 4px 2px 8px;background:var(--card-2);}
.auth-input{
  flex:1;border:none;outline:none;background:transparent;
  font-family:'IBM Plex Mono';font-size:14px;color:var(--navy);
  padding:9px 6px;direction:ltr;text-align:start;
}
.auth-toggle-pw{
  border:none;background:none;cursor:pointer;font-size:16px;
  padding:6px 8px;border-radius:8px;flex-shrink:0;
}
.auth-toggle-pw:hover{background:var(--steel-light);}
.auth-error{
  margin-top:10px;font-family:'Tajawal';font-weight:700;font-size:12.5px;
  color:var(--bad);background:var(--bad-bg);border-radius:8px;padding:7px 10px;
}
.auth-submit-btn{
  width:100%;margin-top:16px;padding:11px 12px;border:none;border-radius:10px;
  background:var(--blue-deep);color:#fff;font-family:'Tajawal';font-weight:800;font-size:14.5px;
  cursor:pointer;box-shadow:0 8px 20px -6px rgba(15,79,176,.55);
  transition:filter .15s;
}
.auth-submit-btn:hover{filter:brightness(1.08);}
body.dark-mode #authCard{background:var(--white);}
body.dark-mode .auth-password-row{background:var(--card-2,#101724);border-color:var(--line);}
body.dark-mode .auth-input{color:var(--navy);}
@media(max-width:480px){
  #authCard{max-width:100%;padding:24px 20px 20px;}
}
@keyframes hmtOverlayOut{from{opacity:1;}to{opacity:0;}}
@keyframes hmtBoxIn{from{opacity:0;transform:translateY(16px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes hmtBoxOut{from{opacity:1;}to{opacity:0;transform:translateY(10px) scale(.97);}}
body.hmt-modal-open{overflow:hidden;}
/* على الهاتف: النافذة تتمركز دائماً في منتصف الشاشة، لا يخرج أي جزء منها خارج الحدود مهما كان حجم الهاتف،
   ومع المحتوى الطويل أو ظهور لوحة المفاتيح يعمل Scroll داخلي (max-height بوحدة dvh تتبع الشاشة الفعلية) */
@media(max-width:640px){
  #hmtCalcOverlay{align-items:center;justify-content:center;padding:10px;}
  #hmtCalcBox{margin:auto;width:calc(100vw - 20px);max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);padding:16px;border-radius:14px;}
  .hmt-modal-body .field input{min-height:48px;font-size:16px;} /* 16px يمنع التكبير التلقائي في iOS عند التركيز */
  .hmt-actions .btn-primary,.hmt-actions .btn-secondary{min-height:48px;font-size:15px;}
}
body.mobile-mode #hmtCalcOverlay{align-items:center;justify-content:center;padding:10px;}
body.mobile-mode #hmtCalcBox{margin:auto;width:calc(100vw - 20px);max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);padding:16px;border-radius:14px;}
body.mobile-mode .hmt-modal-body .field input{min-height:48px;font-size:16px;}
body.mobile-mode .hmt-actions .btn-primary, body.mobile-mode .hmt-actions .btn-secondary{min-height:48px;font-size:15px;}
/* أي إزاحة سحب متبقية من وضع الكمبيوتر تُلغى على الهاتف حتى تبقى النافذة في المنتصف تماماً */
@media(max-width:640px){ #hmtCalcBox{transform:none !important;} }
body.mobile-mode #hmtCalcBox{transform:none !important;}
body.dark-mode #hmtCalcBox{background:var(--white);}
body.dark-mode #hmtCalcOverlay{background:rgba(0,0,0,.65);}
body.dark-mode .hmt-modal-close{background:#161E2B;}
body.dark-mode .hmt-modal-close:hover{background:var(--bad-bg);color:var(--bad);}

/* ---------- سجل البحث الذكي (Search History) ---------- */
/* قائمة منسدلة عائمة واحدة تُعاد تهيئتها لكل حقل بحث عند التركيز عليه — تعمل على الكمبيوتر والهاتف وفي الوضع الليلي */
#searchHistoryDropdown{
  position:fixed;z-index:1200;background:var(--white);border:1.5px solid var(--line);
  border-radius:12px;box-shadow:0 14px 40px -8px rgba(11,42,74,.28);
  overflow:hidden;display:none;flex-direction:column;
  font-family:'Tajawal',sans-serif;direction:inherit;text-align:start;
  animation:shFadeIn .14s ease-out;
}
#searchHistoryDropdown.open{display:flex;}
@keyframes shFadeIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.sh-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;min-height:0;padding:4px 0;}
.sh-section-title{display:flex;align-items:center;gap:6px;padding:8px 12px 4px;font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.3px;}
.sh-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;transition:background .12s;min-height:42px;}
.sh-item:hover, .sh-item.kb-active{background:var(--blue-pale);}
.sh-item .sh-ic{flex-shrink:0;font-size:13px;opacity:.75;}
.sh-item .sh-q{flex:1;min-width:0;font-weight:700;color:var(--navy);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;unicode-bidi:isolate;text-align:start;font-family:'IBM Plex Mono',monospace;}
.sh-item .sh-count{flex-shrink:0;font-size:10.5px;color:var(--muted);background:var(--steel-light);border-radius:20px;padding:2px 8px;font-weight:700;font-family:'IBM Plex Mono',monospace;direction:ltr;}
.sh-item .sh-del{flex-shrink:0;background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:.12s;padding:0;}
.sh-item .sh-del:hover{background:var(--bad-bg);color:var(--bad);}
.sh-footer{border-top:1px solid var(--line);padding:5px;display:flex;justify-content:center;flex-shrink:0;}
.sh-clear-all{background:none;border:none;color:var(--bad);font-family:'Tajawal';font-size:12px;font-weight:700;cursor:pointer;padding:7px 14px;border-radius:8px;transition:.12s;min-height:36px;}
.sh-clear-all:hover{background:var(--bad-bg);}
body.dark-mode #searchHistoryDropdown{background:var(--card-2);box-shadow:0 14px 40px -8px rgba(0,0,0,.6);}
body.dark-mode .sh-item .sh-count{background:#111827;}
@media(max-width:640px){
  .sh-item{min-height:46px;padding:10px 12px;}
  .sh-item .sh-q{font-size:13.5px;}
  .sh-item .sh-del{width:38px;height:38px;font-size:14px;}
}
body.mobile-mode .sh-item{min-height:46px;padding:10px 12px;}
body.mobile-mode .sh-item .sh-del{width:38px;height:38px;font-size:14px;}

/* 🌍 مبدّل اللغة */
.theme-toggle{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#EAF2FF;padding:6px 9px;border-radius:8px;cursor:pointer;font-size:13px;transition:.15s;flex:none;}
.theme-toggle:hover{background:rgba(255,255,255,.18);}

/* ============================= تحسين العرض للهاتف (Mobile Mode) ============================= */
body.mobile-mode .app{padding:10px 8px 40px;max-width:100%;}
body.mobile-mode .card{padding:14px;border-radius:12px;}
body.mobile-mode .card + .card{margin-top:12px;}
body.mobile-mode .grid{grid-template-columns:1fr !important;gap:12px;}
body.mobile-mode .result-hero{grid-template-columns:1fr !important;}
body.mobile-mode .specs{grid-template-columns:1fr 1fr !important;gap:10px;}
body.mobile-mode .typegrid{grid-template-columns:1fr 1fr !important;}
body.mobile-mode .alt-grid{grid-template-columns:1fr !important;}
/* ============================= هيدر الهاتف المستقل (صفّان منفصلان) — لا يؤثر على نسخة سطح المكتب ============================= */
.mobile-header{display:none;}
body.mobile-mode .topbar-outer{display:none;}
body.mobile-mode .mobile-header{
  display:block;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  position:sticky;top:0;z-index:60;
  background:linear-gradient(135deg,var(--navy) 0%, var(--navy-2) 55%, var(--blue-deep) 100%);
  box-shadow:0 6px 18px -8px rgba(11,42,74,.45);
  margin-bottom:18px;
}
/* الصف الأول: الشعار + اللغة + الوضع الليلي — ثابت تماماً، بلا سكرول، بلا حركة */
body.mobile-mode .mh-row1{
  direction:ltr;display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:58px;padding:0 14px;color:#fff;
}
body.mobile-mode .mh-row1 .brand-mark img{height:24px;}
body.mobile-mode .mh-row1 .nav-utility{display:flex;align-items:center;gap:8px;flex:none;}
/* الصف الثاني: أزرار التنقل فقط — الوحيد القابل للسحب أفقياً (Scroll + Snap) */
body.mobile-mode .mh-row2{
  direction:ltr;
  border-top:1px solid rgba(255,255,255,.12);
  height:48px;display:flex;align-items:center;
}
body.mobile-mode .mh-nav{
  display:flex;align-items:center;gap:8px;height:100%;width:100%;
  flex-wrap:nowrap;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:0 14px;justify-self:auto;
}
body.mobile-mode .mh-nav::-webkit-scrollbar{display:none;}
body.mobile-mode .mh-nav button{
  scroll-snap-align:start;flex:none;
  padding:7px 13px;font-size:12.5px;
}
/* مسافة أول وآخر زر عن حافة الشاشة (تُطبَّق كـ padding داخل الحاوية القابلة للسحب) */
body.mobile-mode .mh-nav{padding-inline-start:14px;padding-inline-end:14px;}
body.mobile-mode .lang-trigger{font-size:12px;padding:7px 9px;}
body.mobile-mode .btn-primary{width:100%;padding:16px 20px;font-size:16px;}
body.mobile-mode .btn-secondary{padding:13px 18px;font-size:14.5px;min-height:44px;}
body.mobile-mode .field input, body.mobile-mode .field select{padding:14px 14px;font-size:16px;min-height:48px;}
body.mobile-mode .field label{font-size:13.5px;margin-bottom:8px;}
body.mobile-mode .seg button, body.mobile-mode .seg3 button{padding:14px 8px;font-size:14px;min-height:46px;}
body.mobile-mode .typecard{padding:18px 10px;min-height:70px;}
body.mobile-mode .typecard .ic{font-size:26px;}
body.mobile-mode .typecard .lbl{font-size:13.5px;}
body.mobile-mode .pump-name{font-size:21px;}
body.mobile-mode .section-title h2{font-size:16.5px;}
body.mobile-mode .spec-box{padding:12px 14px;}
body.mobile-mode .spec-box .v{font-size:17px;}
body.mobile-mode table.qh{font-size:11.5px;}
body.mobile-mode table.qh th, body.mobile-mode table.qh td{padding:8px 6px;}
body.mobile-mode .filter-bar{flex-direction:column;align-items:stretch;gap:10px;padding:14px;}
body.mobile-mode .filter-group{flex-wrap:wrap;width:100%;}
body.mobile-mode .filter-group select, body.mobile-mode .filter-group input{min-height:44px;font-size:15px;flex:1;}
body.mobile-mode .filter-label{font-size:13px;}
body.mobile-mode .alt-card{padding:16px;}
body.mobile-mode .search-result-row{padding:14px 16px;flex-wrap:wrap;gap:8px;}
body.mobile-mode .chart-wrap, body.mobile-mode div[style*="overflow-x"]{overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* في وضع الهاتف: أي جدول عريض (جدول العائلة/الأداء) يبقى قابلاً للتمرير أفقياً بدل الخروج عن الشاشة */
body.mobile-mode table.qh{min-width:520px;}

/* ============================= الصفحة الرئيسية (Homepage) ============================= */
@keyframes psaFadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

.hero-section{
  position:relative;overflow:visible;isolation:isolate;
  background:linear-gradient(160deg,#ffffff 0%,#ffffff 55%,var(--blue-pale) 100%);
  border:1px solid rgba(220,228,236,.8);
  border-radius:28px;padding:56px 40px;text-align:center;
  box-shadow:0 24px 60px -24px rgba(15,30,46,.22), 0 2px 8px -2px rgba(15,30,46,.06);
  animation:psaFadeUp .5s ease both;
}
/* لمسة زجاجية خفيفة جداً على البطاقة نفسها (وليست صندوقاً منفصلاً داخلها) */
.hero-section::before{
  content:'';position:absolute;inset:0;border-radius:28px;pointer-events:none;z-index:0;
  background:linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 35%);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
/* رسوم زخرفية حقيقية (مضخة يسار / تدفق ماء يمين) بشفافية منخفضة جداً — خلف المحتوى تماماً، وتمتد قليلاً خارج حافة البطاقة لإحساس بالعمق */
.hero-pump-deco{
  position:absolute;inset-inline-start:-34px;top:50%;
  width:min(360px,42%);height:auto;opacity:.18;pointer-events:none;z-index:0;filter:saturate(1.15);
  transform:translateY(-50%);transition:transform .5s cubic-bezier(.2,.7,.3,1);will-change:transform;
}
.hero-water-deco{
  position:absolute;inset-inline-end:-40px;top:50%;
  width:min(440px,52%);height:auto;opacity:.18;pointer-events:none;z-index:0;filter:saturate(1.15);
  transform:translateY(-50%);transition:transform .5s cubic-bezier(.2,.7,.3,1);will-change:transform;
}
/* زخارف تكميلية خفيفة جداً: خطوط هندسية + دوائر شفافة + خطوط موجية */
.hero-fx{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;}
.hero-fx circle{fill:none;stroke:var(--blue);stroke-width:1;opacity:.18;}
.hero-fx circle.solid{fill:var(--blue);stroke:none;opacity:.14;}
.hero-fx path{fill:none;stroke:var(--blue);stroke-width:1;opacity:.14;}
.hero-fx line{stroke:var(--navy);stroke-width:1;opacity:.08;}
/* طبقة الماء التفاعلية: خطّا موجة ينحنيان بلطف نحو المؤشر + تموّجات دائرية (Ripple) تظهر وتختفي — تبقى خفيفة جداً عمداً */
.hero-water-fx{position:absolute;inset-inline-end:-20px;top:50%;transform:translateY(-50%);width:min(480px,56%);height:220px;pointer-events:none;z-index:0;overflow:visible;}
.water-wave-line{display:none;}
.water-wave-line.w2{stroke:var(--navy);stroke-width:1.2;opacity:.16;}
.water-ripple{
  position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;border:1.5px solid var(--blue);pointer-events:none;z-index:0;
  opacity:.32;transform:scale(0);
  animation:waterRippleAnim 1s ease-out forwards;
}
@keyframes waterRippleAnim{
  0%{transform:scale(0);opacity:.32;}
  100%{transform:scale(8);opacity:0;}
}
/* محتوى مركزي عادي — جزء من البطاقة نفسها، وليس صندوقاً مستقلاً بخلفية/ظل/حدود خاصة به */
.hero-content{position:relative;z-index:1;max-width:640px;margin:0 auto;}
.hero-logo{
  display:block;margin:0 auto 20px;width:min(440px,86%);height:auto;position:relative;z-index:1;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);will-change:transform;
}
.hero-logo-dark{display:none;}
body.dark-mode .hero-logo-light{display:none;}
body.dark-mode .hero-logo-dark{display:block;}
.hero-title{position:relative;z-index:1;font-size:clamp(23px,3.6vw,33px);font-weight:900;color:var(--navy);margin:0 0 6px;}
.hero-sub{position:relative;z-index:1;font-size:14.5px;color:var(--steel);margin:0 0 26px;}
.hero-actions{position:relative;z-index:1;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.hero-btn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:12px;font-family:'Tajawal';
  font-weight:800;font-size:14.5px;cursor:pointer;transition:.15s;border:1.5px solid transparent;
}
.hero-btn svg{width:18px;height:18px;stroke:currentColor;}
.hero-btn.primary{background:linear-gradient(135deg,var(--blue) 0%, var(--blue-deep) 100%);color:#fff;box-shadow:0 8px 18px -8px rgba(29,111,224,.55);}
.hero-btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 22px -8px rgba(29,111,224,.65);}
.hero-btn.outline{background:var(--white);color:var(--blue-deep);border-color:var(--blue);}
.hero-btn.outline:hover{transform:translateY(-2px);background:var(--blue-pale);}
body.dark-mode .hero-section{background:linear-gradient(160deg,var(--white) 0%,var(--white) 55%,var(--blue-pale) 100%);border-color:var(--line);}
body.dark-mode .hero-section::before{background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 35%);}


.service-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:18px;
}
.service-card{
  background:var(--white);border:1px solid var(--line);border-radius:14px;padding:18px 14px;text-align:center;
  cursor:pointer;transition:.18s;animation:psaFadeUp .55s ease both;
}
.service-card:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 10px 22px -10px rgba(29,111,224,.35);}
.service-card .sc-ic{
  width:44px;height:44px;border-radius:12px;background:var(--blue-pale);color:var(--blue-deep);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;transition:.18s;
}
.service-card .sc-ic svg{width:22px;height:22px;stroke:currentColor;}
.service-card:hover .sc-ic{background:var(--blue-deep);color:#fff;}
.service-card .sc-title{font-size:14px;font-weight:800;color:var(--navy);margin:0 0 4px;}
.service-card .sc-desc{font-size:11.5px;color:var(--steel);line-height:1.5;min-height:32px;}
.service-card .sc-arrow{margin-top:8px;opacity:0;transform:translateY(-4px);transition:.18s;color:var(--blue);font-size:15px;}
.service-card:hover .sc-arrow{opacity:1;transform:translateY(0);}
@media(max-width:980px){.service-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.service-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:380px){.service-grid{grid-template-columns:1fr;}}
@media(max-width:860px){
  .hero-pump-deco{width:min(220px,38%);opacity:.08;}
  .hero-water-deco{width:min(260px,46%);opacity:.08;}
  .hero-section{padding:38px 22px;}
}
@media(max-width:560px){
  .hero-pump-deco,.hero-water-deco{display:none;}
}

.trust-bar{
  margin-top:18px;border-radius:16px;padding:22px 20px;
  background:linear-gradient(135deg,var(--navy) 0%, var(--navy-2) 55%, var(--blue-deep) 100%);
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;color:#fff;
  animation:psaFadeUp .6s ease both;
}
.trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;}
.trust-item .ti-ic{
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;
}
.trust-item .ti-ic svg{width:19px;height:19px;stroke:#fff;}
.trust-item .ti-title{font-size:13px;font-weight:800;}
.trust-item .ti-desc{font-size:11.5px;color:#CBDCF3;line-height:1.5;}
@media(max-width:640px){.trust-bar{grid-template-columns:repeat(2,1fr);row-gap:26px;}}

body.dark-mode .hero-section{background:var(--white);border-color:var(--line);}
body.dark-mode .hero-title{color:var(--navy);}
body.dark-mode .service-card{background:var(--white);border-color:var(--line);}
body.dark-mode .service-card .sc-ic{background:var(--blue-pale);color:var(--blue);}
body.dark-mode .service-card:hover .sc-ic{background:var(--blue);color:#0B1220;}
body.dark-mode .trust-bar{background:linear-gradient(135deg,#1F2937 0%, #172032 60%, #111827 100%);}
body.mobile-mode .service-grid{grid-template-columns:repeat(2,1fr);}
body.mobile-mode .trust-bar{grid-template-columns:repeat(2,1fr);row-gap:22px;}

/* ============================= صفحة حول النظام (About) ============================= */
.about-hero{display:flex;align-items:center;gap:16px;margin-bottom:6px;}
.about-hero img{height:40px;width:auto;}
.about-list{margin:0;padding-inline-start:20px;color:var(--steel);font-size:13.5px;line-height:1.9;}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px;}
@media(max-width:760px){.about-grid{grid-template-columns:1fr;}}
.about-box{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:16px;}
.about-box h3{margin:0 0 6px;font-size:13.5px;color:var(--navy);}
.about-box p{margin:0;font-size:12.5px;color:var(--steel);line-height:1.7;}

/* ============================= تبويبا الدليل التعليمي: دليل اختيار المضخات / الإنفوجرافيك التعليمية ============================= */
.hg-tabs{display:flex;gap:8px;flex-wrap:wrap;}
.hg-tab{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:11px;
  background:var(--blue-pale);border:1.5px solid transparent;color:var(--navy);
  font-family:'Tajawal';font-weight:800;font-size:13.5px;cursor:pointer;transition:.15s;
}
.hg-tab:hover{background:#DCEBFF;}
.hg-tab.active{background:linear-gradient(135deg,var(--blue) 0%, var(--blue-deep) 100%);color:#fff;box-shadow:0 6px 16px -6px rgba(29,111,224,.5);}
body.dark-mode .hg-tab{background:var(--card-2);color:var(--steel);}
body.dark-mode .hg-tab.active{color:#fff;}

.infographic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:6px;}
@media(max-width:760px){.infographic-grid{grid-template-columns:1fr;}}
.infographic-card{
  background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:.18s;display:flex;flex-direction:column;
}
.infographic-card:hover{border-color:var(--blue);box-shadow:0 10px 26px -12px rgba(29,111,224,.3);transform:translateY(-2px);}
.ig-thumb{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--blue-pale);}
.ig-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ig-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.ig-title{font-weight:900;font-size:15px;color:var(--navy);}
.ig-desc{font-size:12.5px;color:var(--steel);margin-bottom:2px;}
.ig-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--steel);flex:1;}
.ig-points li{color:var(--ink);}
.ig-view-btn{margin-top:10px;align-self:flex-start;font-size:13px;padding:9px 20px;}

.ig-soon{margin-top:22px;padding-top:18px;border-top:1px dashed var(--line);}
.ig-soon-title{font-weight:900;font-size:14px;color:var(--navy);margin-bottom:10px;}
.ig-soon-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 20px;}
@media(max-width:640px){.ig-soon-list{grid-template-columns:1fr;}}
.ig-soon-list li{font-size:12.5px;color:var(--steel);padding-inline-start:18px;position:relative;}
.ig-soon-list li::before{content:'•';position:absolute;inset-inline-start:0;color:var(--blue);}

/* نافذة معاينة الإنفوجرافيك (Modal) بحجم كامل مع أزرار تكبير/تحميل/طباعة */
.ig-modal-overlay{
  position:fixed;inset:0;background:rgba(11,20,32,.72);z-index:500;
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:shFadeIn .18s ease both;
}
.ig-modal-box{
  background:var(--white);border-radius:18px;max-width:min(920px,94vw);max-height:92vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);
}
.ig-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);}
.ig-modal-title{font-weight:900;font-size:14.5px;color:var(--navy);}
.ig-modal-actions{display:flex;gap:6px;}
.ig-modal-btn{
  background:var(--blue-pale);border:none;color:var(--blue-deep);width:36px;height:36px;border-radius:9px;
  font-size:15px;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;
}
.ig-modal-btn:hover{background:var(--blue);color:#fff;}
.ig-modal-btn.ig-modal-close{background:#FDEAEA;color:#C23A3A;}
.ig-modal-btn.ig-modal-close:hover{background:#C23A3A;color:#fff;}
.ig-modal-body{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:18px;background:var(--steel-light);}
.ig-modal-body img{max-width:100%;max-height:72vh;display:block;border-radius:8px;transition:transform .2s ease;cursor:zoom-in;}
.ig-modal-body.zoomed{cursor:zoom-out;}
.ig-modal-body.zoomed img{max-width:none;max-height:none;transform:scale(1.6);cursor:zoom-out;}
body.dark-mode .infographic-card{background:var(--white);}
body.dark-mode .ig-modal-box{background:var(--white);}
body.dark-mode .ig-modal-body{background:var(--card-2);}
/* مبدّل "نقطة التشغيل المطلوبة / بيانات العائلة الكاملة" — يمتد بعرض كامل ويُصبح عمودياً على الهاتف
   حتى لا ينكسر النص أو يفيض خارج الشاشة على الشاشات الضيقة. */
.spec-view-toggle{width:fit-content;max-width:100%;}
@media(max-width:640px){
  .spec-view-toggle{width:100% !important;flex-direction:column;}
  .spec-view-toggle button{white-space:normal !important;text-align:center;}
}

/* ============================================================================================
   🖼️ واجهة "اختر فئة المضخات أولاً" داخل قسم حساب HMT — 5 Cards احترافية بدل المساحة البيضاء الفارغة
   السابقة. تصميم بصري فقط؛ لا علاقة له بأي منطق اختيار فئة (يبقى نفسه تماماً عبر data-ref-cat-select).
   ============================================================================================ */
.hmt-cat-wrap{
  position:relative; margin-top:18px; padding:26px 20px 22px; border-radius:calc(var(--radius) + 4px);
  overflow:hidden; background:linear-gradient(180deg,var(--blue-pale) 0%, var(--white) 62%);
  border:1px solid var(--line);
  animation:hmtCatFadeIn .45s ease both;
  transition:opacity .24s ease, transform .24s ease;
}
.hmt-cat-wrap.hmt-cat-leaving{ opacity:0; transform:translateY(-10px) scale(.98); pointer-events:none; }
/* لمسات مائية خفيفة جداً في الخلفية — موجات SVG هادئة، بلا مبالغة */
.hmt-cat-wrap::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0,180 C200,220 300,120 500,150 C700,180 800,90 1000,120 C1100,135 1150,150 1200,140 L1200,0 L0,0 Z' fill='%231D6FE0' fill-opacity='0.05'/%3E%3Cpath d='M0,260 C220,290 320,220 520,240 C720,260 820,200 1020,220 C1120,230 1160,240 1200,235 L1200,300 L0,300 Z' fill='%230B2A4A' fill-opacity='0.035'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:cover; background-position:top center;
}
.hmt-cat-head{position:relative;text-align:center;margin-bottom:20px;}
.hmt-cat-badge{
  width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--white);box-shadow:0 4px 14px -4px rgba(29,111,224,.4);font-size:17px;margin-bottom:8px;
}
.hmt-cat-head h3{margin:2px 0 6px;color:var(--navy);font-size:20px;font-weight:800;}
.hmt-cat-head p{margin:0;color:var(--steel);font-size:13.5px;}
.hmt-cat-grid{
  position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
}
@media(max-width:1050px){ .hmt-cat-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:680px){ .hmt-cat-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:400px){ .hmt-cat-grid{grid-template-columns:1fr;} }

.hmt-cat-card{
  background:var(--white); border:1.5px solid var(--line); border-radius:16px; overflow:hidden;
  cursor:pointer; text-align:start; display:flex; flex-direction:column;
  box-shadow:0 3px 12px -7px rgba(11,42,74,.22);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation:hmtCatCardIn .4s ease both;
}
.hmt-cat-card:hover{ transform:translateY(-4px); box-shadow:0 10px 22px -10px rgba(29,111,224,.38); border-color:var(--blue); }
.hmt-cat-card:active{ transform:translateY(-1px); }
.hmt-cat-card .hmt-cat-img{
  position:relative; width:100%; aspect-ratio:16/13; background:var(--steel-light); overflow:hidden;
}
.hmt-cat-card .hmt-cat-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.hmt-cat-card:hover .hmt-cat-img img{ transform:scale(1.06); }
.hmt-cat-card .hmt-cat-info{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.hmt-cat-card .hmt-cat-info-row{ display:flex; align-items:center; gap:9px; }
.hmt-cat-card .hmt-cat-ic{
  flex:0 0 auto; width:34px;height:34px;border-radius:50%; background:var(--blue-pale); color:var(--blue-deep);
  display:flex;align-items:center;justify-content:center; font-size:15px;
}
.hmt-cat-card .hmt-cat-txt{ flex:1; min-width:0; }
.hmt-cat-card .hmt-cat-txt .nm{ font-weight:800; color:var(--navy); font-size:13.5px; line-height:1.3; }
.hmt-cat-card .hmt-cat-txt .en{ color:var(--steel); font-size:10.5px; margin-top:1px; }
.hmt-cat-card .hmt-cat-arrow{ flex:0 0 auto; color:var(--blue); font-size:15px; font-weight:800; }
.hmt-cat-card .dsc{ color:var(--steel); font-size:11px; line-height:1.55; }
@keyframes hmtCatFadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
@keyframes hmtCatCardIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.hmt-cat-card:nth-child(1){animation-delay:.02s;} .hmt-cat-card:nth-child(2){animation-delay:.07s;}
.hmt-cat-card:nth-child(3){animation-delay:.12s;} .hmt-cat-card:nth-child(4){animation-delay:.17s;}
.hmt-cat-card:nth-child(5){animation-delay:.22s;}
body.dark-mode .hmt-cat-wrap{ background:linear-gradient(180deg, rgba(29,111,224,.10) 0%, var(--white) 62%); }
body.dark-mode .hmt-cat-card{ background:var(--white); }
body.dark-mode .hmt-cat-card .hmt-cat-img{ background:var(--card-2); }
@media(prefers-reduced-motion:reduce){
  .hmt-cat-wrap, .hmt-cat-card{ animation:none; }
  .hmt-cat-card:hover{ transform:none; }
}