/* ===========================================================
   نوتة عقارية — أنماط الواجهة
   مستخرجة من حزمة التصميم: اتجاه 1a «دفتر الحساب» · شعار 2a «القيد»
   إطار الجوال 360×740 · حشوة أفقية 20px · فواصل 1px
   =========================================================== */

:root{
  /* الأرض والورق */
  --canvas:#E4E2DA;
  --paper:#F7F5EF;
  --field:#FFFDF7;
  --band:#F2EFE6;

  /* الحبر */
  --ink:#1F2419;
  --ink-on:#F7F5EF;
  --body:#3A3E32;
  --body2:#4A4C40;
  --muted:#6E6B5E;
  /* رُفع تباين الخافتين ليجتازا معيار AA (4.5:1) على الورق: كانا 3.3 و2.4
     وهما لون الشروح والعدّادات والتواريخ (مراجعة 2026-09-20) */
  --muted2:#726F60;
  --faint:#747160;
  --disabled:#B0AB98;
  /* لون العدّادات والأرقام المساعدة: كان `--disabled` (2.1:1) وهو لون
     العناصر المعطّلة لا لون نصّ يُقرأ (مراجعة 2026-09-20) */
  --count:#747160;

  /* الزيتوني */
  --olive:#4A5A33;
  --olive-dark:#2C3620;
  --olive-light:#A8BE7A;

  /* الكهرماني (محجوز / تنبيه) */
  --amber:#A6742A;
  --amber-bg:#FBF3E6;
  --amber-bd:#E4C9A4;
  --amber-tx:#7A5A21;

  /* الأحمر (مباع / خطأ) */
  --red:#8A3B2E;
  --red-bg:#FAEFEC;
  --red-bd:#E0B9AE;
  --red-tx:#6E2C22;
  --red-tx2:#7A4238;
  --red-mono:#A6786E;
  --red-btn-bd:#C99C90;

  /* الخطوط الفاصلة */
  --line:#E4E0D2;
  --line-soft:#EDEAE0;
  --bd:#DCD8C9;
  --bd2:#D7D3C4;
  --dash:#B5B0A0;
  --dash2:#C6C0AC;
  --chip-bg:#EAE7DA;
  --skel:#E4E0D2;
  --skel2:#EAE6D8;

  /* الخطوط */
  --f-sans:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-kufi:"Noto Kufi Arabic", var(--f-sans);
  /* «IBM Plex Sans Arabic» بعد المونو مباشرةً: المونو بلا حروف عربية،
     فأي كلمة عربية داخل عنصر مونو كانت تقع على خطّ النظام (Geeza على
     الآيفون) فتبدو غريبة عن بقيّة الواجهة (ملاحظة الجوال 2026-09-21) */
  --f-mono:"IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* المقاسات */
  --px:20px;          /* الحشوة الأفقية */
  --r-btn:10px;       /* زوايا الأزرار والبطاقات */
  --r-chip:8px;       /* زوايا الأقراص */
  --r-phone:26px;
}

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

html,body{ height:100%; }
body{
  margin:0;
  background:var(--canvas);
  font-family:var(--f-sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; text-align:inherit; }
input,textarea{ background:none; border:0; }
input:focus,textarea:focus,button:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--olive); outline-offset:2px; border-radius:4px; }

/* ---------- المسرح وإطار الجوال ---------- */
#stage{
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px;
}
#phone{
  width:360px; height:740px;
  background:var(--paper);
  border:1px solid var(--bd2);
  border-radius:var(--r-phone);
  overflow:hidden;
  display:flex; flex-direction:column;
  position:relative;
  box-shadow:0 18px 44px rgba(31,36,25,.10);
}
/* حتى 999 بكسل يملأ التطبيق الشاشة بلا إطار: كان الحدّ 719 فيظهر بين 720
   و999 (اللوح، أو نافذة متصفح بنصف شاشة) إطار جوال 360×740 وسط صفحة
   فارغة — ومن 1000 فما فوق يبدأ تخطيط الويب (مراجعة 2026-09-20) */
@media (max-width:999px), (max-height:800px){
  #stage{ padding:0; align-items:stretch; }
  #phone{
    width:100%; height:100dvh; max-width:none;
    border:0; border-radius:0; box-shadow:none;
  }
}
/* شريط تمرير خفي على الأجهزة اللمسية */
@media (pointer:coarse){
  .body{ scrollbar-width:none; }
  .body::-webkit-scrollbar{ width:0; height:0; }
}
#app{ flex:1; display:flex; flex-direction:column; min-height:0; position:relative; }

/* بلا أدوات مراجعة (?dev=0 أو DEV_TOOLS_DEFAULT=false): يختفي زرّ المبدّل
   وشريط الساعة الوهميّ، وتنتقل مسافة أعلى الشاشة إلى الإطار نفسه */
body.no-dev #devToggle, body.no-dev #devPanel{ display:none !important; }
body.no-dev .statusbar{ display:none; }
body.no-dev #phone{ padding-top:env(safe-area-inset-top); }

/* ---------- شريط الحالة ---------- */
.statusbar{
  display:flex; justify-content:space-between;
  padding:12px var(--px) 6px;
  font-size:12px; color:var(--muted);
  font-family:var(--f-mono);
  flex:none;
  padding-top:max(12px, env(safe-area-inset-top));
}

/* ---------- هيكل الشاشة ---------- */
.screen{ flex:1; display:flex; flex-direction:column; min-height:0; }
.head{ flex:none; border-bottom:1px solid var(--ink); padding:8px var(--px) 14px; display:flex; flex-direction:column; gap:12px; }
.head--bar{ padding:6px var(--px) 12px; flex-direction:row; align-items:center; justify-content:space-between; gap:10px; }
.body{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.body::-webkit-scrollbar{ width:5px; }
.body::-webkit-scrollbar-thumb{ background:var(--bd); border-radius:3px; }
.foot{
  flex:none; border-top:1px solid var(--ink); background:var(--band);
  padding:12px var(--px) 20px;
  padding-bottom:max(20px, env(safe-area-inset-bottom));
}

.mono{ font-family:var(--f-mono); }
.kufi{ font-family:var(--f-kufi); font-weight:700; }
.muted{ color:var(--muted); }
.muted2{ color:var(--muted2); }
.center{ text-align:center; }
.row{ display:flex; align-items:center; }
.between{ display:flex; align-items:center; justify-content:space-between; }
.col{ display:flex; flex-direction:column; }
.grow{ flex:1; min-width:0; }
.nowrap{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- الشعار ---------- */
.mark{
  border:2px solid var(--ink); border-radius:5px;
  display:flex; flex-direction:column; justify-content:center;
  gap:3px; padding-inline-start:4.5px; box-sizing:border-box;
  width:26px; height:26px; flex:none;
}
.mark i{ display:block; height:2.5px; background:var(--ink); }
.mark i:nth-child(1){ width:14px; }
.mark i:nth-child(2){ width:10px; background:var(--olive); }
.mark i:nth-child(3){ width:6px; }
.mark--lg{ width:44px; height:44px; border-width:2.5px; border-radius:6px; gap:5px; padding-inline-start:7px; }
.mark--lg i{ height:3.5px; }
.mark--lg i:nth-child(1){ width:24px; }
.mark--lg i:nth-child(2){ width:17px; }
.mark--lg i:nth-child(3){ width:11px; }
.mark--sm{ width:22px; height:22px; border-width:1.8px; gap:2.5px; padding-inline-start:4px; }
.mark--sm i{ height:2px; }
.mark--sm i:nth-child(1){ width:11px; }
.mark--sm i:nth-child(2){ width:8px; }
.mark--sm i:nth-child(3){ width:5px; }

/* ---------- العناوين ---------- */
.h1{ font-size:23px; font-weight:600; }
.h2{ font-size:22px; font-weight:600; }
.h3{ font-size:20px; font-weight:600; }
.h4{ font-size:18px; font-weight:600; }
.title-bar{ font-size:16px; font-weight:600; }
/* عناوين الخانات: الحروف العربية تتّصل، فلا تباعد بينها ولا خطّ لاتيني.
   كان `letter-spacing:.12em` مع خطّ المونو يفصل حروف «اسم المخطط» و«رقم
   القطعة» و«المدينة» فتبدو متقطّعة على الجوال (ملاحظة المستخدم 2026-09-21) */
/* وحجمها 12.5 ولونها أغمق: كانت 11.5 بلون خافت فتبدو صغيرة باهتة على
   شاشة اللابتوب (ملاحظة المستخدم 2026-09-21) */
.label{
  font-family:var(--f-sans); font-size:12.5px; font-weight:600; letter-spacing:0;
  color:var(--muted);
}
.label--wide{ letter-spacing:0; }
/* نجمة الحقل المطلوب: حلّت محلّ كلمة «مطلوب» بعد عنوان الخانة
   (بطلب المستخدم 2026-09-22) — علامة واحدة مختصرة تُقرأ بلمحة،
   ومعها `aria-label` ليسمعها قارئ الشاشة كلمةً لا رمزًا. */
.req{ color:var(--red); font-weight:700; font-size:1.15em; line-height:1; margin-inline-start:3px; }
.sec-label{ font-family:var(--f-sans); font-size:12.5px; font-weight:600; letter-spacing:0; color:var(--muted); padding:16px var(--px) 8px; }

/* ---------- الأزرار ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-btn); padding:12px 16px;
  font-size:13.5px; font-weight:500; line-height:1.2;
  transition:transform .06s ease, opacity .15s ease, background .15s ease;
  user-select:none;
}
.btn:active:not(:disabled){ transform:scale(.985); }
.btn--dark{ background:var(--ink); color:var(--ink-on); font-weight:600; }
.btn--olive{ background:var(--olive); color:var(--ink-on); font-weight:600; }
.btn--ghost{ border:1px solid var(--ink); color:var(--ink); }
.btn--soft{ border:1px solid var(--bd); color:var(--body2); }
.btn--red{ background:var(--red); color:var(--red-bg); font-weight:600; border-radius:9px; padding:10px 16px; font-size:13px; }
.btn--redghost{ border:1px solid var(--red-btn-bd); color:var(--red-tx); border-radius:9px; padding:10px 16px; font-size:13px; }
.btn--lg{ padding:15px 0; font-size:15px; font-weight:600; width:100%; }
.btn--block{ width:100%; }
.btn:disabled{ background:var(--disabled); color:var(--paper); border-color:var(--bd); cursor:not-allowed; }
.btn--ghost:disabled, .btn--soft:disabled{ background:transparent; color:var(--disabled); border-color:var(--bd); }
.btn--busy{ pointer-events:none; opacity:.85; }
.linkish{ color:var(--olive); border-bottom:1px solid var(--olive); font-size:12.5px; display:inline-block; line-height:1.5; }
.link{ color:var(--olive); font-size:13px; }
.link--danger{ color:var(--red); }

/* دوّار التحميل */
.spin{
  width:13px; height:13px; border:2px solid var(--bd); border-top-color:var(--olive);
  border-radius:50%; animation:spin .75s linear infinite; flex:none;
}
.spin--onDark{ border-color:rgba(247,245,239,.35); border-top-color:var(--paper); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- الأقراص (chips) ---------- */
.chips{ display:flex; gap:7px; flex-wrap:wrap; }
.chip{
  font-size:12.5px; padding:6px 12px; border-radius:var(--r-chip);
  border:1px solid var(--bd); background:transparent; color:var(--ink);
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.chip[aria-pressed="true"], .chip.is-on{ background:var(--ink); color:var(--ink-on); border-color:var(--ink); }
.chip--olive.is-on, .chip--olive[aria-pressed="true"]{ background:var(--olive); border-color:var(--olive); color:var(--ink-on); }
.chip--dashed{ border:1px dashed var(--dash); color:var(--muted); }
.chip--big{ padding:7px 13px; }

/* ---------- شريط التصفية: ثلاث قوائم منسدلة ----------
   حلّ محلّ ثلاثة صفوف من الخانات في «عروضي» (بطلب المستخدم 2026-09-22):
   الصفوف كانت تأخذ من الشاشة قبل أول عرض، والقائمة تُبقي الخيارات كلها
   في متناول ضغطة واحدة. كل زرّ: اسم الخانة فوق، والمختار تحته. */
.fbar{ display:flex; gap:8px; align-items:stretch; }
.fbtn{
  flex:1 1 0; min-width:0; text-align:start;
  display:flex; flex-direction:column; gap:1px;
  border:1px solid var(--bd); border-radius:var(--r-chip); background:var(--field);
  padding:6px 9px;
  transition:border-color .12s ease, color .12s ease;
}
.fbtn__l{ font-family:var(--f-sans); font-size:11px; font-weight:600; color:var(--muted2); }
.fbtn__v{
  font-family:var(--f-sans); font-size:13px; font-weight:600; color:var(--ink);
  display:flex; align-items:baseline; gap:4px; min-width:0;
}
/* الاسم وحده يُقصّ عند الطول («مستشفى أو مركز صحي»)، والعدّاد والسهم
   يبقيان ظاهرين دائمًا فلا يضيع أحدهما خارج الزرّ */
.fbtn__t{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fbtn__n{ flex:none; font-family:var(--f-mono); font-size:11px; color:var(--count); font-weight:500; }
.fbtn__c{ flex:none; margin-inline-start:auto; font-size:10px; color:var(--muted2); }
.fbtn--on{ border-color:var(--olive); border-width:1.5px; padding:5.5px 8.5px; }
.fbtn--on .fbtn__v{ color:var(--olive); }
.fbtn:disabled{ color:var(--disabled); }
.fbtn:disabled .fbtn__v, .fbtn:disabled .fbtn__l{ color:var(--disabled); }
.chip--flat{ background:var(--chip-bg); border-color:var(--chip-bg); color:var(--body2); font-size:11.5px; padding:5px 10px; border-radius:7px; }
.chip--lock{ border:1px dashed var(--dash); opacity:.5; }
/* قرص صغير يجلس بمحاذاة عنوان الحقل — «ماسيمت» و«ماله حد» */
.chip--sm{ font-size:11.5px; padding:3px 9px; border-radius:7px; }

/* تذييل النافذة السفلية يبقى ملتصقًا بالأسفل مهما طال محتواها */
.sheet__foot{
  position:sticky; bottom:0; margin-top:auto;
  display:flex; flex-direction:column; gap:10px;
  padding-top:12px; margin-inline:calc(-1 * var(--px)); padding-inline:var(--px);
  background:var(--paper); border-top:1px solid var(--line);
}

/* ---------- شريط البحث المتقدّم ---------- */
.advbar{
  display:flex; align-items:center; gap:8px; width:100%;
  border:1px dashed var(--dash); border-radius:9px;
  padding:7px 11px; font-size:12.5px; color:var(--muted);
  background:transparent; text-align:start;
}
.advbar--on{ border-style:solid; border-color:var(--olive); color:var(--ink); background:var(--field); }
.advbar__ic{ font-size:14px; flex:none; opacity:.8; }
.advbar__txt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.advbar__x{ flex:none; font-size:12px; color:var(--muted); padding:0 2px; }

/* شريط وضع الاختيار (اختيار عرض أو طلب لتسجيل صفقته) */
.pickbar{
  flex:none; display:flex; align-items:center; gap:9px;
  padding:9px var(--px); font-size:12.5px;
  background:var(--ink); color:var(--ink-on);
}
.pickbar__t{ flex:1; min-width:0; }
.pickbar__b{ color:var(--ink-on); opacity:.85; text-decoration:underline; text-underline-offset:3px; font-size:12px; }
.pickbar__x{ color:var(--ink-on); opacity:.7; font-size:13px; padding:0 2px; }

/* ---------- صفقاتي: لوحة الإنجاز والقائمة ---------- */
.dealhero{ display:flex; align-items:center; gap:14px; }
.dealhero__main{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.dealhero__num{ font-size:29px; font-weight:500; line-height:1.1; letter-spacing:-.01em; }
.dealhero__note{
  font-size:12px; line-height:1.6; color:var(--muted);
  border-inline-start:2px solid var(--bd); padding-inline-start:9px;
}
.dealhero__note.is-done{ border-inline-start-color:var(--olive); color:var(--olive); }

/* حلقة هدف الشهر: التقدّم مرسوم بتدرّج مخروطي حول قرص ورقي */
.dealring{
  position:relative; flex:none; width:74px; height:74px; border-radius:50%;
  background:conic-gradient(var(--olive) var(--deg), var(--bd) 0);
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease;
}
.dealring:active{ transform:scale(.96); }
.dealring--done{ background:conic-gradient(var(--olive) 360deg, var(--olive) 0); }
.dealring__in{
  width:60px; height:60px; border-radius:50%; background:var(--band);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
}
.dealring__n{ font-size:15px; font-weight:600; line-height:1; }
.dealring__g{ font-size:10.5px; opacity:.55; }
.dealring__t{ font-size:9.5px; color:var(--muted2); }

/* شريط العمولات المستحقة */
.dealdue{
  display:flex; align-items:center; gap:9px; width:100%;
  border:1px solid var(--amber-bd); background:var(--amber-bg); color:var(--amber-tx);
  border-radius:9px; padding:9px 12px; font-size:12.5px; text-align:start;
}
.dealdue__l{ flex:1; min-width:0; }
.dealdue__v{ font-weight:600; font-size:14px; }

/* شاشة الباقات: البطاقات لا تنكمش داخل المحتوى المتمرّر — انكماشها كان
   يقصّ أزرار الاشتراك فتبدو الشاشة كأنها لا تعمل */
.plansbody{ padding:14px var(--px); display:flex; flex-direction:column; gap:12px; }
.plansbody > *{ flex:none; }

/* شريط استهلاك حدّ الباقة */
.quota{ height:5px; border-radius:3px; background:var(--bd); overflow:hidden; }
.quota i{ display:block; height:100%; background:var(--olive); border-radius:3px; }

/* أعلى «صفقاتي» داخل المحتوى المتمرّر — فتتّسع الشاشة للصفقات عند النزول */
.dealtop{ display:flex; flex-direction:column; gap:11px; padding:12px var(--px); }
/* صفّ التصفية يلتصق بأعلى المحتوى، فيبقى في متناولك مهما نزلت */
.dealtabs{
  position:sticky; top:0; z-index:4;
  background:var(--paper); padding:6px var(--px) 10px;
  border-bottom:1px solid var(--line);
}

/* ---------- التقويم داخل المنصّة ---------- */
.dp{ border:1px solid var(--bd); border-radius:11px; padding:10px; background:var(--field); }
/* شبكة ثابتة: السهمان في مكانهما مهما طال اسم الشهر */
.dp__bar{ display:grid; grid-template-columns:32px 1fr 32px; align-items:center; gap:8px; padding:2px 2px 8px; }
.dp__mid{ display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; }
.dp__title{ font-size:14px; font-weight:600; }
/* اسم الشهر والسنة أزرارٌ تفتح اختيارًا سريعًا */
.dp__pick{
  font-size:14px; font-weight:600; color:var(--body);
  padding:5px 9px; border-radius:8px; border:1px solid var(--bd); background:var(--paper);
  white-space:nowrap;
}
.dp__pick:active{ background:var(--band); }
/* شبكة الأشهر والسنوات */
.dp__cells{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding-top:2px; }
.dp__cell{
  height:46px; border-radius:9px; background:var(--paper); border:1px solid transparent;
  font-size:13px; color:var(--body); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
}
.dp__cell i{ font-style:normal; font-size:10px; color:var(--muted2); }
.dp__cell.is-sel{ background:var(--ink); color:var(--ink-on); }
.dp__cell.is-sel i{ color:var(--ink-on); opacity:.7; }
.dp__nav{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--bd);
  background:var(--paper); font-size:15px; line-height:1; color:var(--body);
}
.dp__nav:active{ background:var(--band); }
.dp__week{
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
  font-size:10.5px; color:var(--muted2); text-align:center; padding-bottom:4px;
}
.dp__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.dp__day{
  height:38px; border-radius:9px; font-size:13.5px; color:var(--body);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:var(--paper); border:1px solid transparent;
}
.dp__day i{ font-style:normal; font-size:9.5px; color:var(--muted2); }
.dp__day:disabled{ color:var(--disabled); background:transparent; }
.dp__day.is-today{ border-color:var(--olive); }
.dp__day.is-sel{ background:var(--ink); color:var(--ink-on); }
.dp__day.is-sel i{ color:var(--ink-on); opacity:.7; }

/* معاينة رسالة المشاركة النصّية */
.sharetxt{
  white-space:pre-wrap; font-size:12.5px; line-height:1.85; color:var(--body);
  background:var(--field); border:1px solid var(--bd); border-radius:10px;
  padding:12px; max-height:46vh; overflow-y:auto;
}
.sharethumb{ width:64px; height:48px; object-fit:cover; border-radius:7px; flex:none; border:1px solid var(--bd); }

/* زرّ العين بجانب الإجمالي في «صفقاتي» */
.eyebtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:7px; color:var(--muted);
  align-self:center; flex:none; transition:background .12s ease, color .12s ease;
}
.eyebtn svg{ width:15px; height:15px; }
.eyebtn:active{ background:var(--band); }
.eyebtn[aria-pressed="true"]{ color:var(--body2); }

/* بطاقة «دفع عمولة التطبيق»: تشرح القاعدة وتعرض المستحق وتفتح الحاسبة */
.commcard{
  display:flex; flex-direction:column; gap:8px; width:100%;
  border:1px solid var(--bd); background:var(--field);
  border-radius:10px; padding:11px 12px; text-align:start;
}
.commcard--due{ border-color:var(--amber-bd); background:var(--amber-bg); color:var(--amber-tx); }

/* عنوان الشهر في القائمة */
.deal__share{ color:var(--olive); white-space:nowrap; }
/* اسم من أتمّ الصفقة: لا ينكمش ولا يُقصّ — هو المعلومة المقصودة */
.deal__by{ font-weight:600; white-space:nowrap; flex:none; }
.dealhero__share{ color:var(--olive); }
.deal__month{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:14px var(--px) 7px; font-size:11.5px; color:var(--muted2);
  letter-spacing:0;                 /* اسم الشهر عربي: لا تباعد بين حروفه */
}

/* سطر الصفقة */
.deal{
  display:flex; gap:11px; width:100%; text-align:start;
  padding:12px var(--px); border-bottom:1px solid var(--line);
}
.deal:active{ background:var(--field); }
.deal__kind{
  flex:none; align-self:flex-start; margin-top:2px;
  font-size:10.5px; padding:3px 7px; border-radius:6px; line-height:1;
}
.deal__kind--sale{ background:var(--ink); color:var(--ink-on); }
.deal__kind--rent{ background:var(--chip-bg); color:var(--body2); }
.deal__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.deal__top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.deal__title{
  font-size:14.5px; font-weight:600; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.deal__amount{ font-size:14px; font-weight:500; flex:none; }
.deal__meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.deal__meta .deal__status{ margin-inline-start:auto; flex:none; white-space:nowrap; }
.deal__tag{ font-size:10px; padding:2px 6px; }

/* ---------- عروض - طلبات: اللوحة العامة ---------- */
.control--search{ margin-top:2px; }
.mrow{
  display:flex; gap:11px; padding:13px var(--px);
  border-bottom:1px solid var(--line); width:100%; text-align:start;
  transition:background .12s ease;
}
.mrow:active{ background:var(--band); }
.mrow__kind{
  flex:none; align-self:flex-start; font-size:11px; font-weight:600;
  border-radius:6px; padding:3px 7px; min-width:34px; text-align:center;
}
.mrow__kind--off{ background:var(--ink); color:#fff; }
.mrow__kind--req{ background:var(--chip-bg); color:var(--body2); border:1px solid var(--bd); }
.mrow__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
/* العنوان ثم الأرقام ثم الناشر، كلٌّ في سطره: أسطر العروض والطلبات تطول
   (مدى ميزانية ومدى مساحة)، فوضعها جنب العنوان يخنقه */
.mrow__title{ font-size:14.5px; font-weight:600; line-height:1.35; min-width:0; }
/* لا نستخدم الخط الأحادي هنا: السطر يخلط أرقامًا بكلمات عربية («من… إلى…»)
   والخط الأحادي يباعد الحروف العربية فيتشتّت السطر */
.mrow__fig{ font-size:12.5px; color:var(--body2); min-width:0; font-variant-numeric:tabular-nums; }
.mrow__meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.mrow__by{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mrow__ago{ margin-inline-start:auto; flex:none; white-space:nowrap; color:var(--muted2); }

/* ---------- عارض لوحات المخطط: تدوير وتكبير ---------- */
.shview{
  position:relative; overflow:hidden; touch-action:none;
  width:100%; height:54vh; min-height:240px;
  border-radius:10px; background:var(--band);
  display:flex; align-items:center; justify-content:center;
}
.shview img{
  max-width:100%; max-height:100%; object-fit:contain;
  transform-origin:center center;
  transition:transform .16s cubic-bezier(.2,.8,.3,1);
  will-change:transform; user-select:none; -webkit-user-drag:none;
}
.shview--zoom{ cursor:grab; }
.shview--zoom:active{ cursor:grabbing; }
.shview--zoom img{ transition:none; }
/* عند التكبير العالي نُبقي التنعيم — الخطوط الرفيعة تبدو أنظف من التقطيع */
.shview img{ image-rendering:auto; }

/* شارة نوع اللوحة (PDF) على المصغّرة */
.sheet-tag{
  position:absolute; inset-inline-start:4px; bottom:4px;
  background:var(--ink); color:var(--ink-on);
  font-size:9.5px; padding:2px 5px; border-radius:4px; letter-spacing:0;
}

/* ---------- نجمة تمييز العرض ---------- */
.star{ color:var(--disabled); font-size:13px; line-height:1; transition:color .12s ease, transform .12s ease; }
.star--on{ color:var(--amber); }
.star--btn{ font-size:17px; padding:2px 4px; }
.star--btn:active{ transform:scale(.86); }

/* صف أقراص أفقي قابل للتمرير (لقوائم الأنواع الطويلة) */
.chips--scroll{
  display:flex; flex-wrap:nowrap; gap:7px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin-inline:calc(-1 * var(--px)); padding-inline:var(--px);
  scroll-padding-inline:var(--px);
}
.chips--scroll::-webkit-scrollbar{ height:0; width:0; }
.chips--scroll > .chip{ flex:none; white-space:nowrap; }

/* ---------- المجزّئ (segmented) ---------- */
.seg{ display:flex; border:1px solid var(--bd); border-radius:var(--r-chip); overflow:hidden; font-size:12.5px; }
.seg button{ flex:1; text-align:center; padding:7px 0; border-inline-start:1px solid var(--bd); transition:background .14s ease, color .14s ease; }
.seg button:first-child{ border-inline-start:0; }
.seg button[aria-pressed="true"]{ background:var(--ink); color:var(--ink-on); }
.seg--tall button{ padding:8px 0; }
/* عدّاد صغير داخل خانة التبويب */
.seg__n{ font-family:var(--f-mono); font-size:11px; opacity:.5; margin-inline-start:4px; }
.seg button[aria-pressed="true"] .seg__n{ opacity:.72; }
/* عدّاد صغير داخل القرص */
.chip__n{ font-family:var(--f-mono); font-size:10.5px; opacity:.5; margin-inline-start:5px; }
.chip[aria-pressed="true"] .chip__n{ opacity:.72; }
.seg--muted button:not([aria-pressed="true"]){ color:var(--disabled); }
/* مجزّئ يزيد عن عرض الشاشة: يُمرَّر أفقيًا بدل أن تنضغط خاناته */
.seg--scroll{ overflow-x:auto; scrollbar-width:none; }
.seg--scroll::-webkit-scrollbar{ display:none; }
.seg--scroll button{ flex:0 0 auto; padding-inline:11px; white-space:nowrap; }
/* مجزّئ مصغّر (مبدّل القائمة/الخريطة) */
.seg--mini{ flex:none; width:auto; border-radius:7px; font-size:11.5px; }
.seg--mini button{ flex:none; padding:5px 11px; }

/* ---------- الحقول ---------- */
.field{ display:flex; flex-direction:column; gap:8px; }
.control{
  border:1px solid var(--bd); border-radius:var(--r-chip); background:var(--field);
  padding:10px 11px; font-size:13px; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.control input, .control textarea{ width:100%; padding:0; }
.control:focus-within{ border-color:var(--ink); border-width:1.5px; padding:9.5px 10.5px; }
.control--strong{ border:1.5px solid var(--ink); padding:9.5px 10.5px; }
.control--mono input, .control--mono{ font-family:var(--f-mono); font-size:14px; }
.control--area{ align-items:flex-start; min-height:62px; padding:11px; font-size:13px; line-height:1.7; }
.control--area textarea{ resize:none; line-height:1.7; font-size:13px; min-height:40px; }
.control--err{ border-color:var(--red); border-width:1.5px; padding:9.5px 10.5px; }
.control .caret{ color:var(--muted2); flex:none; }
.hint{ font-size:12px; color:var(--muted2); }
/* زرّ نصّي داخل سطر تلميح — يبدو كرابط لا كزرّ */
.linkb{ color:var(--olive); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.err{ font-size:12px; color:var(--red); }
input::placeholder, textarea::placeholder{ color:var(--muted2); opacity:1; }

/* المفتاح */
.switch{
  width:42px; height:24px; border-radius:13px; background:var(--bd);
  padding:3px; box-sizing:border-box; display:flex; justify-content:flex-end;
  flex:none; transition:background .16s ease;
}
.switch b{ display:block; width:18px; height:18px; border-radius:50%; background:var(--paper); transition:transform .16s ease; }
.switch[aria-checked="true"]{ background:var(--olive); justify-content:flex-start; }

/* خانات رمز التحقق */
.otp{
  flex:1 1 0; min-width:0; width:0; height:60px;
  border:1.5px solid var(--bd); border-radius:10px; background:var(--field);
  text-align:center; font-size:24px; font-family:var(--f-mono);
  transition:border-color .12s ease;
}

/* مربع الاختيار */
.check{
  width:20px; height:20px; border:2px solid var(--ink); border-radius:5px; flex:none;
  display:flex; align-items:center; justify-content:center; color:transparent; font-size:12px;
  transition:background .12s ease;
}
.check[aria-checked="true"]{ background:var(--ink); color:var(--ink-on); }
.check--sm{ width:19px; height:19px; }

/* زر الاختيار */
.radio{ width:18px; height:18px; border-radius:50%; border:2px solid var(--dash2); flex:none; display:flex; align-items:center; justify-content:center; }
.radio[aria-checked="true"]{ border-color:var(--olive); }
.radio[aria-checked="true"]::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--olive); }

/* ---------- سطور القيود ---------- */
.entry{
  display:flex; gap:12px; padding:13px var(--px);
  border-bottom:1px solid var(--line); width:100%;
  transition:background .12s ease;
}
.entry:active{ background:var(--band); }
.entry__no{ font-family:var(--f-mono); font-size:11px; color:var(--faint); padding-top:3px; width:26px; flex:none; }
.entry__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.entry__top{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
/* العنوان يبقى سطرًا واحدًا عادةً، ويلتفّ إلى سطرين للأنواع الطويلة
   بدل قطع اسم الحي (مثل «مستشفى أو مركز صحي للإيجار · المونسية») */
.entry__title{
  font-size:14.5px; font-weight:600; line-height:1.35;
  flex:1 1 auto; min-width:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
}
.entry__price{ font-family:var(--f-mono); font-size:14px; font-weight:500; flex:none; }
/* «ما له حد» نصّ لا رقم: بخط الواجهة لا بخط الأرقام حتى لا يبدو ممطوطًا */
.entry__price--txt{ font-family:inherit; font-size:12.5px; font-weight:500; color:var(--muted); letter-spacing:0; }
.entry__meta{ display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); }
.entry__meta span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.entry--sold .entry__title{ text-decoration:line-through; }
.entry--dim{ opacity:.55; }

.st-avail{ color:var(--olive); }
.st-held{ color:var(--amber); }
.st-sold{ color:var(--red); }
.sq{ display:inline-block; width:8px; height:8px; flex:none; }
.sq--avail{ background:var(--olive); }
.sq--held{ background:var(--amber); }
.sq--sold{ background:var(--red); }

/* ---------- الشريط السفلي ---------- */
.tabbar{
  flex:none; display:flex; align-items:stretch; justify-content:space-between;
  padding:6px 8px; padding-bottom:max(12px, env(safe-area-inset-bottom));
  border-top:1px solid var(--ink); background:var(--band);
}
/* منطقة اللمس كاملة: كل خانة زرٌّ يملأ ارتفاع الشريط ولا يقلّ عن 44 بكسل،
   وكان المضغوط منها 40×31 فقط (مراجعة 2026-09-20) */
.tabbar button{
  /* `1 1 auto` لا `1`: المساحة الزائدة تُوزَّع بالتساوي وتبقى كل خانة على
     سطر واحد — «عروض - طلبات» كانت تنكسر سطرين مع العرض المتساوي */
  flex:1 1 auto; min-height:44px; white-space:nowrap;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:12.5px; color:var(--muted); padding:6px 2px;
}
.tabbar button[aria-current="page"]{ color:var(--ink); font-weight:600; }
/* زرّ الإضافة الدائري في الشريط السفلي */


/* ---------- الصور ---------- */
.photos{
  display:flex; gap:8px; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin-inline:calc(-1 * var(--px)); padding-inline:var(--px); padding-block:2px;
}
.photos::-webkit-scrollbar{ height:0; width:0; }
.photo-wrap{ position:relative; flex:none; }
.photo{
  display:block; width:104px; height:78px; object-fit:cover;
  border-radius:9px; border:1px solid var(--bd); background:var(--band);
}
.photo--lg{ width:132px; height:96px; }
.photo-del{
  position:absolute; top:5px; inset-inline-end:5px;
  width:21px; height:21px; border-radius:50%;
  background:rgba(31,36,25,.74); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1;
}
.photo-cover{
  position:absolute; bottom:5px; inset-inline-start:5px;
  background:rgba(31,36,25,.74); color:var(--paper);
  font-size:10px; padding:2px 6px; border-radius:5px;
}
.photo-add{
  width:104px; height:78px; flex:none;
  border:1.5px dashed var(--dash2); border-radius:9px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--muted); font-size:11.5px; background:transparent;
}
.photo-add span:first-child{ font-size:19px; line-height:1; color:var(--olive); }
.photo-add:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------- زر الإضافة العائم (+) ---------- */
/* أيقونة في الترويسة (البحث الشامل) */
.icon-btn{
  width:30px; height:30px; border:1px solid var(--bd); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--body2); background:var(--field); flex:none;
}
.icon-btn:active{ transform:scale(.94); }
.fab-add{
  position:absolute; z-index:12;
  inset-inline-end:20px;
  bottom:calc(76px + env(safe-area-inset-bottom));
  width:52px; height:52px; border-radius:50%;
  background:var(--ink); color:var(--ink-on);
  display:flex; align-items:center; justify-content:center;
  font-size:27px; font-weight:300; line-height:1; padding-bottom:3px;
  box-shadow:0 6px 18px rgba(31,36,25,.30);
  transition:transform .09s ease, background .15s ease;
}
.fab-add:active{ transform:scale(.93); }
.fab-add:disabled{ background:var(--disabled); color:var(--paper); box-shadow:none; cursor:not-allowed; }

/* ---------- البطاقات والتنبيهات ---------- */
.card{ border:1px solid var(--bd); background:var(--field); border-radius:var(--r-btn); padding:14px; display:flex; flex-direction:column; gap:11px; }
.note{ border-radius:var(--r-btn); padding:12px 13px; display:flex; gap:10px; align-items:flex-start; font-size:12.5px; line-height:1.7; }
.note--amber{ border:1px solid var(--amber-bd); background:var(--amber-bg); color:var(--amber-tx); }
.note--amber .dot{ width:7px; height:7px; background:var(--amber); margin-top:6px; flex:none; }
.note--red{ border:1px solid var(--red-bd); background:var(--red-bg); color:var(--red-tx2); }
.note--red .dot{ width:8px; height:8px; background:var(--red); margin-top:6px; flex:none; }

/* جدول الخصائص */
.spec{ border-bottom:1px solid var(--line); }
.spec__row{ display:flex; border-bottom:1px solid var(--line-soft); }
.spec__row:last-child{ border-bottom:0; }
.spec__k{ flex:1; padding:9px var(--px); font-size:12px; color:var(--muted); border-inline-end:1px solid var(--line-soft); }
.spec__v{ flex:1; padding:9px var(--px); font-family:var(--f-mono); font-size:13.5px; }

/* الأقسام داخل الجسم */
.sect{ padding:13px var(--px); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:9px; }
.sect--tight{ padding:11px var(--px); }
.sect--row{ flex-direction:row; gap:11px; }
.sect--last{ border-bottom:0; }
.listrow{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px var(--px); border-top:1px solid var(--line); width:100%; }
.listrow:active{ background:var(--band); }
.chevron{ color:var(--disabled); }

/* الصورة الرمزية */
.avatar{ border-radius:50%; background:var(--chip-bg); display:flex; align-items:center; justify-content:center; color:var(--body2); flex:none; }

/* ---------- النوافذ السفلية والحوارات ---------- */
.scrim{ position:absolute; inset:0; background:rgba(31,36,25,.42); animation:fade .18s ease; z-index:20; }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
.sheet{
  position:absolute; inset-inline:0; bottom:0; z-index:21;
  background:var(--paper); border-top:1px solid var(--ink);
  border-radius:16px 16px 0 0; padding:16px var(--px) 22px;
  padding-bottom:max(22px, env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:15px;
  max-height:88%; overflow-y:auto;
  animation:rise .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes rise{ from{ transform:translateY(100%) } to{ transform:translateY(0) } }
/* صفوف نافذة الاختيار بالبحث (المدن والأحياء) */
.pick{
  display:flex; width:100%; justify-content:space-between; align-items:center; gap:10px;
  padding:11px 10px; border-radius:9px; text-align:start; border:1px solid transparent;
}
.pick:hover{ background:var(--band); }
.pick--on{ background:var(--ink); color:var(--ink-on); }
.pick--on .muted2{ color:var(--ink-on); opacity:.7; }
.pick--new{ border:1px dashed var(--dash); color:var(--olive); }
.sheet__grip{ width:44px; height:4px; border-radius:2px; background:var(--bd); align-self:center; flex:none; }
/* تعتيم الخلفية خلف النافذة السفلية بالشفافية وحدها.
   كان `filter: blur()` يُجبر المتصفح على رسم الشاشة كلها في طبقة واحدة،
   فيتأخّر فتح النافذة على القوائم الطويلة والشاشات الكبيرة
   (شكوى المستخدم في 2026-09-16). والتعتيم مع الحجاب يكفي بصريًّا. */
.blurred{ opacity:.55; pointer-events:none; }
.scrim{ position:absolute; }

/* ---------- الحالة الفارغة ---------- */
.empty{ flex:1; padding:0 32px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; text-align:center; }
.empty__art{
  width:112px; height:112px; border:1.5px dashed var(--dash2); border-radius:12px;
  display:flex; flex-direction:column; justify-content:center; gap:9px; padding-inline-start:24px; box-sizing:border-box;
}
.empty__art i{ display:block; height:4px; background:var(--bd); }
.empty__art i:nth-child(1){ width:44px; }
.empty__art i:nth-child(2){ width:30px; }
.empty__art i:nth-child(3){ width:18px; }

/* ---------- الهياكل العظمية ---------- */
.sk{ border-radius:3px; background:var(--skel); animation:pulse 1.3s ease-in-out infinite; }
.sk--soft{ background:var(--skel2); }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }

/* ---------- الخريطة ---------- */
.map{
  position:relative; overflow:hidden;
  background:repeating-linear-gradient(135deg,#EFEBDD 0 9px,#F5F2E7 9px 18px);
}
.map__grid{ position:absolute; inset:0; background-image:linear-gradient(#E7E2D2 1px,transparent 1px),linear-gradient(90deg,#E7E2D2 1px,transparent 1px); background-size:44px 44px; }
.map__road-v{ position:absolute; top:0; bottom:0; width:14px; background:#EAE5D4; }
.map__road-h{ position:absolute; inset-inline:0; height:18px; background:#EAE5D4; }
.pin{ width:18px; height:18px; background:var(--red); border-radius:50% 50% 50% 0; transform:rotate(-45deg); }
.pin--sm{ width:12px; height:12px; }
.map__zoom{ position:absolute; top:14px; left:16px; display:flex; flex-direction:column; gap:1px; border:1px solid var(--bd2); border-radius:8px; overflow:hidden; background:var(--paper); }
.map__zoom button{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.map__zoom button:first-child{ border-bottom:1px solid var(--line); }
/* زرّ «موقعي الحالي» أسفل أزرار التكبير */
.map__me{
  position:absolute; top:96px; left:16px;
  width:36px; height:36px; border-radius:9px;
  border:1px solid var(--bd2); background:var(--paper); color:var(--body);
  display:flex; align-items:center; justify-content:center;
}
.map__me:active{ background:var(--band); }
/* نقطة الموقع الحالي: دائرة زرقاء بهالة نابضة */
.mydot{ position:absolute; transform:translate(50%,-50%); z-index:3; pointer-events:none; }
/* في خرائط القوائم تُحسب المواضع من اليسار */
.mydot--l{ transform:translate(-50%,-50%); }
.mydot b{
  display:block; width:13px; height:13px; border-radius:50%;
  background:#2F6FDB; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.28);
}
.mydot i{
  position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%; background:rgba(47,111,219,.18);
  animation:mypulse 2s ease-out infinite;
}
@keyframes mypulse{
  0%{ transform:translate(-50%,-50%) scale(.6); opacity:.9 }
  100%{ transform:translate(-50%,-50%) scale(1.5); opacity:0 }
}

/* ---------- عرض الخريطة في «عروضي» ---------- */
.body--map{ overflow:hidden !important; display:flex; flex-direction:column; }
.mapview{ flex:1; position:relative; min-height:0; overflow:hidden; }

/* دبوس عرض على الخريطة */
.mpin{ position:absolute; transform:translate(-50%,-100%); padding:5px; z-index:2; line-height:0; }
.mpin__d{
  display:block; width:15px; height:15px;
  border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  border:1.5px solid var(--paper);
  box-shadow:0 1px 3px rgba(31,36,25,.32);
  transition:width .12s ease, height .12s ease;
}
.mpin.is-on{ z-index:4; }
.mpin.is-on .mpin__d{ width:22px; height:22px; border-width:2px; }
/* دبوس المخطط: مربّع مائل يفرّقه عن دبابيس العروض والطلبات المستديرة */
.mpin__sq{
  width:12px; height:12px; display:block; transform:rotate(45deg);
  border:1.5px solid var(--paper); box-shadow:0 1px 4px rgba(31,36,25,.35);
}
.mpin--scheme.is-on .mpin__sq{ width:20px; height:20px; border-width:2px; }

/* شارة عدد العروض على الخريطة */
.mapview__badge{
  position:absolute; top:12px; inset-inline-start:16px; z-index:3;
  background:var(--paper); border:1px solid var(--bd2); border-radius:8px;
  padding:6px 10px; font-size:11.5px; color:var(--muted);
  box-shadow:0 2px 8px rgba(31,36,25,.10);
}

/* ---------- ترويسة تنطوي عند النزول (لوحة «عروض - طلبات») ----------
   الفلاتر الطويلة تختفي حين ينزل المستخدم في القائمة فيتّسع المعروض،
   وتعود كاملةً بالصعود إلى أعلى القائمة. (بطلب المستخدم في 2026-09-17) */
.head--slim .foldable{ display:none; }
.headexp{
  display:none; align-self:flex-start;
  border:1px solid var(--bd); border-radius:8px; background:var(--field);
  padding:6px 11px; font-size:12px; color:var(--muted);
}
.head--slim .headexp{ display:block; }

/* وسم «مطابق» في لوحة «عروض - طلبات»: منشور يناسب عرضًا أو طلبًا عندك */
.pill--match{ background:var(--olive); color:var(--ink-on); }
.mrow--match{ border-inline-start:3px solid var(--olive); }
.mpin--match .mpin__d{ box-shadow:0 0 0 3px rgba(74,90,51,.30), 0 1px 4px rgba(0,0,0,.25); }

/* ---------- نافذة النشر السريع في «عروض - طلبات» ---------- */
.publist{
  display:flex; flex-direction:column;
  border:1px solid var(--bd); border-radius:10px; overflow:hidden auto;
  max-height:46vh; -webkit-overflow-scrolling:touch;
}
.pubrow{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-bottom:1px solid var(--line); background:var(--paper);
}
.pubrow:last-child{ border-bottom:0; }
.pubrow--off{ background:var(--band); }

/* دليل ألوان الدبابيس في لوحة «عروض - طلبات»: العرض زيتوني والطلب كهرماني */
.mapview__legend{
  position:absolute; top:48px; inset-inline-start:16px; z-index:3;
  display:flex; gap:10px; align-items:center;
  background:var(--paper); border:1px solid var(--bd2); border-radius:8px;
  padding:6px 10px; font-size:11.5px; color:var(--muted);
  box-shadow:0 2px 8px rgba(31,36,25,.10);
}
.mapview__legend span{ display:flex; gap:5px; align-items:center; }
.mapview__legend i{ width:9px; height:9px; border-radius:50%; display:block; }

/* بطاقة العرض المحدَّد أسفل الخريطة */
.mapview__card{
  position:absolute; bottom:12px; inset-inline:var(--px); z-index:5;
  background:var(--paper); border:1px solid var(--bd2); border-radius:10px;
  padding:12px 13px; display:flex; flex-direction:column; gap:7px;
  box-shadow:0 6px 20px rgba(31,36,25,.16);
  animation:rise .18s cubic-bezier(.2,.8,.3,1);
  text-align:start; width:calc(100% - (2 * var(--px)));
}
.mapview__hint{
  position:absolute; bottom:14px; inset-inline:var(--px); z-index:3;
  text-align:center; font-size:12px; color:var(--muted2);
}

/* ---------- الشريط العلوي (عدم الاتصال) ---------- */
.offline{ background:var(--ink); color:var(--ink-on); padding:9px var(--px); display:flex; align-items:center; gap:9px; font-size:12.5px; flex:none; }
.offline i{ width:7px; height:7px; background:#E0B36A; flex:none; }

/* ---------- القائمة المنسدلة ---------- */
.menu{
  position:absolute; z-index:40; background:var(--paper);
  border:1px solid var(--ink); border-radius:var(--r-btn);
  padding:5px; min-width:150px; max-height:230px; overflow-y:auto;
  box-shadow:0 10px 26px rgba(31,36,25,.18);
  animation:pop .13s ease;
}
@keyframes pop{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:translateY(0) } }
.menu button{ display:flex; width:100%; justify-content:space-between; gap:10px; align-items:center; padding:9px 10px; font-size:13px; border-radius:7px; }
.menu button:hover{ background:var(--band); }
.menu button[aria-selected="true"]{ background:var(--ink); color:var(--ink-on); }

/* ---------- الرسائل الطائرة ---------- */
#toasts{
  position:fixed; z-index:120; inset-inline:0; bottom:26px;
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none;
}
.toast{
  background:var(--ink); color:var(--ink-on); border-radius:var(--r-btn);
  padding:11px 16px; font-size:13px; max-width:320px;
  display:flex; align-items:center; gap:9px;
  box-shadow:0 8px 22px rgba(31,36,25,.28);
  animation:toastIn .22s ease;
}
.toast--err{ background:var(--red); }
.toast--ok::before{ content:"✓"; font-size:12px; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:translateY(0) } }
.toast.out{ animation:toastOut .22s ease forwards; }
@keyframes toastOut{ to{ opacity:0; transform:translateY(8px) } }

/* ---------- مبدّل حالات التطوير ---------- */
#devToggle{
  position:fixed; z-index:100; inset-inline-start:14px; bottom:14px;
  width:38px; height:38px; border-radius:50%;
  background:var(--ink); color:var(--ink-on);
  display:flex; align-items:center; justify-content:center; font-size:17px;
  box-shadow:0 6px 18px rgba(31,36,25,.3);
}
#devPanel[hidden]{ display:none !important; }
#devPanel{
  position:fixed; z-index:101; inset-inline-start:14px; bottom:60px;
  width:270px; max-height:76dvh; overflow-y:auto;
  background:var(--paper); border:1.5px solid var(--ink); border-radius:12px;
  padding:14px; display:flex; flex-direction:column; gap:12px;
  box-shadow:0 14px 34px rgba(31,36,25,.26); font-size:12.5px;
}
#devPanel h4{ margin:0; font-size:13.5px; font-weight:600; }
#devPanel .dev-sec{ display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); padding-top:10px; }
#devPanel .dev-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
#devPanel .dev-btn{ border:1px solid var(--bd); border-radius:8px; padding:7px 9px; font-size:12px; text-align:center; }
#devPanel .dev-btn:hover{ background:var(--band); }
#devPanel .dev-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }

/* الشاشة الكاملة داخل الإطار (الصفحة العامة) */
.brandbar{ padding:7px var(--px) 11px; border-bottom:1px solid var(--ink); display:flex; align-items:center; justify-content:space-between; background:var(--band); flex:none; }

/* أدوات صغيرة */
.divider{ height:1px; background:var(--line); }
.divider--strong{ height:1px; background:var(--bd); }
.pill{ font-size:11px; background:var(--olive); color:var(--ink-on); padding:3px 8px; border-radius:6px; }
.pill--ink{ background:var(--ink); }
/* شارة نوع الحساب «مكتب»: رمادي دافئ لا زيتوني — الزيتوني صار لوسم «مطابق»
   في لوحة «عروض - طلبات» فتشابها (ملاحظة المستخدم في 2026-09-18) */
.pill--office{ background:var(--muted); color:var(--ink-on); }
.pill--out{ background:transparent; border:1px solid var(--bd); color:var(--body2); font-size:11.5px; padding:4px 9px; }
.stack{ display:flex; flex-direction:column; }
.gap6{ gap:6px } .gap8{ gap:8px } .gap9{ gap:9px } .gap10{ gap:10px } .gap11{ gap:11px } .gap12{ gap:12px } .gap14{ gap:14px }
.fs11{ font-size:11px } .fs115{ font-size:11.5px } .fs12{ font-size:12px } .fs125{ font-size:12.5px }
.fs13{ font-size:13px } .fs135{ font-size:13.5px } .fs14{ font-size:14px } .fs145{ font-size:14.5px } .fs15{ font-size:15px }
.fs17{ font-size:17px } .fs18{ font-size:18px } .fs21{ font-size:21px } .fs27{ font-size:27px }
.w600{ font-weight:600 } .w500{ font-weight:500 }
.lh17{ line-height:1.7 } .lh175{ line-height:1.75 } .lh18{ line-height:1.8 }
.pad{ padding:13px var(--px); }
.padx{ padding-inline:var(--px); }
.mt{ margin-top:16px } .mtb{ margin:16px var(--px) 0; }

/* حركة الانتقال بين الشاشات */
.screen{ animation:screenIn .18s ease; }
@keyframes screenIn{ from{ opacity:.35 } to{ opacity:1 } }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}


/* ---------- تجاوزات الجوال (تأتي أخيرًا لتفوز بترتيب المصدر) ---------- */
@media (max-width:999px), (max-height:800px){
  /* لا يحجب مبدّل التطوير الشريط السفلي على الجوال */
  #devToggle{
    bottom:calc(76px + env(safe-area-inset-bottom));
    width:34px; height:34px; font-size:15px; opacity:.92;
  }
  #devPanel{
    bottom:calc(116px + env(safe-area-inset-bottom));
    max-height:60dvh; width:min(270px, calc(100vw - 28px));
  }
}

.sidenav{ display:none; }       /* التنقّل الجانبي لنسخة الويب وحدها */

/* ===========================================================
   نسخة الويب على اللابتوب (قرار المستخدم في 2026-09-16)
   نفس الحساب ونفس البيانات — يتغيّر التخطيط لا المزايا:
   الشريط السفلي يصير قائمة جانبية، والمحتوى في عمود مريح في الوسط.
   =========================================================== */
@media (min-width:1000px) and (min-height:600px){
  /* التطبيق لوحٌ واحد في وسط الصفحة: على الشاشة العريضة يبقى مضبوطًا
     ولا تتباعد أطرافه، والفراغ حوله خلفيةُ صفحة مقصودة لا فراغًا منسيًّا
     (تصحيح بملاحظة المستخدم في 2026-09-16) */
  #stage{ padding:0; align-items:stretch; justify-content:center; background:var(--band); }
  #phone{
    width:min(1240px, 100%); max-width:none; height:100dvh;
    border:0; border-inline:1px solid var(--bd2); border-radius:0;
    box-shadow:0 0 44px rgba(31,36,25,.07);
  }
  /* التنقّل الجانبي ثابت لكل الشاشات — حتى تفاصيل العرض والطلب */
  .tabbar{ display:none; }
  .sidenav{
    position:absolute; inset-block:0; inset-inline-start:0; width:214px;
    display:flex; flex-direction:column; align-items:stretch; gap:3px;
    padding:22px 14px 20px; border-inline-end:1px solid var(--ink);
    background:var(--band); z-index:15;
  }
  .sidenav__brand{
    font-family:var(--f-kufi); font-size:15px; color:var(--ink);
    padding:4px 12px 16px;
  }
  .sidenav button{
    text-align:start; font-size:14px; color:var(--muted);
    padding:11px 12px; border-radius:10px;
  }
  .sidenav button:hover{ background:rgba(255,255,255,.45); }
  .sidenav button[aria-current="page"]{ background:var(--paper); color:var(--ink); font-weight:600; }
  .sidenav__acct{ margin-top:auto; }
  #app{ padding-inline-start:214px; }
  /* عمود المحتوى يملأ اللوح إلا هامشًا لطيفًا */
  .head, .foot{ padding-inline:max(var(--px), calc((100% - 940px) / 2)); }
  .body:not(.body--map){ padding-inline:max(0px, calc((100% - 940px) / 2)); }
  .fab-add{ inset-inline-end:max(20px, calc((100% - 940px) / 2 + 20px)); bottom:28px; }
  /* على اللابتوب النافذة حوارٌ في وسط الشاشة لا ورقةً تصعد من أسفلها —
     فهو المتوقَّع في المتصفّح، وأسرع في الظهور (ملاحظة المستخدم 2026-09-16) */
  .sheet{
    inset-inline-start:214px; inset-inline-end:0;
    max-width:620px; margin-inline:auto;
    top:50%; bottom:auto; transform:translateY(-50%);
    border-radius:16px; border:1px solid var(--ink);
    max-height:84%; animation:dlg .16s ease;
  }
  @keyframes dlg{
    from{ opacity:0; transform:translateY(calc(-50% + 12px)); }
    to{ opacity:1; transform:translateY(-50%); }
  }
  /* الخريطة على اللابتوب: لوحٌ مؤطَّر داخل عمود المحتوى — كانت تمتدّ إلى حافة
     النافذة بلا إطار فتبدو مقصوصة من الأسفل (ملاحظة المستخدم 2026-09-17) */
  .body--map{
    padding:14px max(var(--px), calc((100% - 940px) / 2)) 20px;
    overflow:hidden !important;
  }
  .body--map .mapview{
    border:1px solid var(--bd2); border-radius:14px;
    box-shadow:0 2px 10px rgba(31,36,25,.05);
  }
  .statusbar{ display:none; }        /* شريط ساعة الجوال لا معنى له على اللابتوب */
  /* الشاشة أبعد عن العين على اللابتوب، فالعناوين خطوةً أكبر (2026-09-21) */
  .label, .sec-label{ font-size:13px; }
  .hint{ font-size:12.5px; }
  /* أسماء الحقول في جدول تفاصيل العرض (سعر السوم · سعر البيع · المساحة…) */
  .spec__k{ font-size:13px; }
  .spec__v{ font-size:14px; }
}

/* ===========================================================
   خانات الإدخال على الجوال: 16 بكسل فما فوق
   -----------------------------------------------------------
   سفاري على الآيفون يُقرّب الشاشة تلقائيًا كلما ضُغطت خانة خطّها أصغر من
   16 بكسل، فتكبر الصفحة ولا تعود كما كانت وتختفي بقيّة الخانات — وخانات
   التطبيق كانت 13 و14 بكسل (ملاحظة المستخدم على الجوال 2026-09-21).
   نرفعها إلى 16 على الأجهزة اللمسية وفي تخطيط الجوال وحدهما، فيبقى
   مظهر نسخة اللابتوب كما هو. (خانات رمز التحقق أكبر أصلًا فتُستثنى.)
   =========================================================== */
@media (pointer:coarse), (max-width:999px){
  input:not(.otp), textarea, select{ font-size:16px; }
  .control input:not(.otp), .control textarea,
  .control--mono input, .control--mono,
  .control--area, .control--area textarea{ font-size:16px; }
  /* الحقل الذي يُكتب فيه لا يختفي خلف لوحة المفاتيح عند تمريره إلى الرؤية */
  input, textarea{ scroll-margin-block:90px; }
}