/* --------------------------------------------------------------------------
   الرموز — ثلاث حالات لا اثنتان
   للزائر ثلاث حالات: اختيار صريح «نهاري»، اختيار صريح «ليلي»، أو ترك الأمر
   للنظام (وهي الحالة الافتراضية التي لا تضع أي سمة على الجذر). لذلك:
   `:root` المجرّدة تحمل النهاري كاملاً، والاستعلام يقلبه إلى ليلي ما لم يكن
   الاختيار الصريح نهارياً، والسمة الصريحة تتقدّم على الاثنين.
   لا يُعرَّف لون داخل استعلام أو سمة فقط — وإلا ظهر نصّ وضعٍ على أرضية الآخر.
   -------------------------------------------------------------------------- */
:root{
  color-scheme: light dark;

  /* ---- الأسطح: نهاري، حجر جيري دافئ يناسب العمارة النجدية ---- */
  --ink:        #F7F4EE;
  --surface:    #FFFFFF;
  --surface-2:  #F1ECE2;
  --surface-3:  #E8E1D3;

  /* ---- الذهب النهاري ----
     قِيست هذه القيم على البكسل المركّب فعلياً (الصورة + الحجاب) لا على لون
     مفترض. القيمة السابقة #8B6B2A أعطت 4.44:1 فوق سماء الصورة — تحت الحد
     بفارق ضئيل لا يُرى بالعين ويسقط في التدقيق.
     --gold-deep يحمل السطر اللاتيني الصغير، فيجب أن يكون أغمق لا أفتح. ---- */
  --gold-hi:    #5E4713;   /* 8.6:1 — التوكيد والتمرير */
  --gold:       #7A5C22;   /* 5.5:1 فوق الصورة · 6.4:1 على الأرضية */
  --gold-deep:  #6B5119;   /* طرف التدرّج */
  --gold-text:  #6B5119;   /* 6.8:1 — ذهب مخصّص للنصّ الصغير */
  --gold-soft:  rgba(139,107,42,.09);
  --gold-line:  rgba(139,107,42,.30);
  --gold-grad:  linear-gradient(135deg,#A98B45 0%,#8B6B2A 45%,#5E4713 100%);

  /* ---- النص ---- */
  --text:       #17140E;
  --text-2:     #4A443A;
  --muted:      #6B655A;

  --line:       #E2DCCF;
  --line-2:     #CFC7B6;

  --ok:         #1F7A55;
  --warn:       #8A5D0C;
  --danger:     #A63A28;
  --danger-bg:  rgba(166,58,40,.08);

  --on-gold:    #FFFDF8;   /* النص فوق الأسطح الذهبية */
  --hero-image: url("../img/hero-day.620a634c416d.webp");
  /* الحجاب النهاري أكثف من الليلي عمداً: سماء الصورة أفتح من أرضية الصفحة،
     فالنص الذهبي فوقها يسقط دون حد التباين لو اكتُفي بحجاب خفيف. */
  --hero-veil:  linear-gradient(180deg, rgba(247,244,238,.90) 0%, rgba(247,244,238,.68) 40%,
                                        rgba(247,244,238,.40) 72%, var(--ink) 100%);
  --texture:    radial-gradient(1200px 600px at 50% -10%, rgba(139,107,42,.07), transparent 70%),
                radial-gradient(800px 400px at 100% 100%, rgba(139,107,42,.05), transparent 70%);
  --shadow:     0 1px 2px rgba(23,20,14,.06), 0 16px 40px -26px rgba(23,20,14,.34);

  /* ---- ثوابت لا تتغيّر بين الوضعين ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-pill: 999px;
  --ring: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold);
  --t-fast: 160ms; --t: 220ms; --ease: cubic-bezier(.2,.7,.3,1);
  --header-h: 68px;
}

/* الرموز الليلية — تُعرَّف مرة وتُستدعى من موضعين */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#0A0A0B; --surface:#121215; --surface-2:#17171B; --surface-3:#1E1E23;
    --gold-hi:#F2DFAE; --gold:#C9A44C; --gold-deep:#8B6B2A; --gold-text:#B08F3F; --gold-text:#B08F3F;
    --gold-soft:rgba(201,164,76,.10); --gold-line:rgba(201,164,76,.26);
    --gold-grad:linear-gradient(135deg,#F2DFAE 0%,#C9A44C 45%,#8B6B2A 100%);
    --text:#EDE9E1; --text-2:#B4AFA5; --muted:#8A857C;
    --line:#26262B; --line-2:#33333A;
    --ok:#6FBF9A; --warn:#D9A441; --danger:#E0705C; --danger-bg:rgba(224,112,92,.10);
    --on-gold:#0A0A0B;
    --hero-image:url("../img/hero-night.ede673ee97c8.webp");
    --hero-veil:linear-gradient(180deg, rgba(10,10,11,.86) 0%, rgba(10,10,11,.58) 38%,
                                        rgba(10,10,11,.28) 70%, var(--ink) 100%);
    --texture:radial-gradient(1200px 600px at 50% -10%, rgba(201,164,76,.07), transparent 70%),
              radial-gradient(800px 400px at 100% 100%, rgba(201,164,76,.04), transparent 70%);
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -24px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ink:#0A0A0B; --surface:#121215; --surface-2:#17171B; --surface-3:#1E1E23;
  --gold-hi:#F2DFAE; --gold:#C9A44C; --gold-deep:#8B6B2A; --gold-text:#B08F3F;
  --gold-soft:rgba(201,164,76,.10); --gold-line:rgba(201,164,76,.26);
  --gold-grad:linear-gradient(135deg,#F2DFAE 0%,#C9A44C 45%,#8B6B2A 100%);
  --text:#EDE9E1; --text-2:#B4AFA5; --muted:#8A857C;
  --line:#26262B; --line-2:#33333A;
  --ok:#6FBF9A; --warn:#D9A441; --danger:#E0705C; --danger-bg:rgba(224,112,92,.10);
  --on-gold:#0A0A0B;
  --hero-image:url("../img/hero-night.ede673ee97c8.webp");
  --hero-veil:linear-gradient(180deg, rgba(10,10,11,.86) 0%, rgba(10,10,11,.58) 38%,
                                      rgba(10,10,11,.28) 70%, var(--ink) 100%);
  --texture:radial-gradient(1200px 600px at 50% -10%, rgba(201,164,76,.07), transparent 70%),
            radial-gradient(800px 400px at 100% 100%, rgba(201,164,76,.04), transparent 70%);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -24px rgba(0,0,0,.9);
}

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

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  min-height:100dvh;
  direction:rtl;
  background:var(--ink);
  color:var(--text);
  font-family:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* نسيج خافت يمنع الأسود المسطّح من أن يبدو رخيصاً */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:var(--texture);
}
body > *{ position:relative; z-index:1 }

h1,h2,h3,h4{
  font-family:"Reem Kufi","IBM Plex Sans Arabic",sans-serif;
  font-weight:600; line-height:1.35; margin:0; text-wrap:balance;
  letter-spacing:-.005em;
}
p{ margin:0 }
a{ color:var(--gold); text-decoration:none; transition:color var(--t-fast) var(--ease) }
a:hover{ color:var(--gold-hi) }

:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--r-sm) }

/* الأرقام في الأعمدة والأسعار تُصفّ عمودياً */
.n,.num,td.n,.kpi .v,.card-price,.detail-price{ font-variant-numeric:tabular-nums }

code,.mono{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.88em;
  direction:ltr; unicode-bidi:isolate;
}

/* سطر لاتيني بأسلوب الشعار: منسّق ومتباعد */
/* الأولوية مرفوعة عمداً: `.site-footer p` أعلى تحديداً وكان يبتلع اللون،
   فيظهر السطر اللاتيني بلون النصّ الخافت بدل الذهب. */
.latin,.site-footer p.latin{
  font-family:"Cinzel",Georgia,serif; letter-spacing:.28em;
  text-transform:uppercase; font-size:11px; color:var(--gold-text);
}

.container{ max-width:1240px; margin-inline:auto; padding-inline:var(--s5) }

.skip-link{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:100;
  background:var(--gold); color:var(--on-gold); padding:var(--s3) var(--s5);
  font-weight:600; border-radius:0 0 var(--r) var(--r);
}
.skip-link:focus{ inset-inline-start:var(--s5) }

/* ==========================================================================
   الرأس
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  min-height:var(--header-h);
  display:flex; align-items:center; gap:var(--s5);
  padding-block:var(--s3); flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:var(--s3); min-height:44px }
.brand-mark{ width:38px; height:38px; flex:none; display:block }
.brand-text{ display:flex; flex-direction:column; line-height:1.15 }
.brand-name{ font-family:"Reem Kufi",sans-serif; font-size:18px; color:var(--text) }
/* ٨٫٥ بكسل حرفٌ صغير جداً — رُفع إلى ٩٫٥ وأُعطي ذهب النصّ القارئ */
.brand-sub{ font-family:"Cinzel",Georgia,serif; font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-text); margin-top:2px }

.site-nav{ display:flex; gap:var(--s1); flex-wrap:wrap }
.site-nav a{
  color:var(--text-2); font-size:15px; padding:var(--s2) var(--s3);
  border-radius:var(--r-sm); min-height:44px; display:inline-flex; align-items:center;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.site-nav a:hover{ color:var(--gold-hi); background:var(--gold-soft) }
.site-nav a[aria-current="page"]{ color:var(--gold) }

.header-tools{ margin-inline-start:auto; display:flex; align-items:center; gap:var(--s3) }

.mode-switch{
  display:flex; border:1px solid var(--line-2); border-radius:var(--r-pill);
  overflow:hidden; background:var(--surface);
}
.mode-switch button{
  border:0; background:transparent; color:var(--text-2);
  padding:var(--s2) var(--s4); min-height:36px;
  font-family:inherit; font-size:13px; cursor:pointer; white-space:nowrap;
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
.mode-switch button:hover{ color:var(--gold-hi) }
.mode-switch button.is-active{ background:var(--gold-grad); color:var(--on-gold); font-weight:600 }

.icon-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-sm); color:var(--text-2);
  /* التصفير إلزامي: الصنف يُستعمل على <a> و<button> معاً، والزرّ يرث خلفية
     المتصفّح الرمادية الفاتحة فيظهر مربّعاً أبيض في الوضع الليلي. */
  background:transparent; border:0; padding:0; margin:0;
  font:inherit; cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.icon-btn:hover{ color:var(--gold-hi); background:var(--gold-soft) }
.icon-btn svg{ width:20px; height:20px }
.badge-count{
  position:absolute; top:5px; inset-inline-start:5px;
  min-width:17px; height:17px; padding-inline:4px; border-radius:var(--r-pill);
  background:var(--gold); color:var(--on-gold); font-size:10.5px; font-weight:700;
  display:grid; place-items:center; font-variant-numeric:tabular-nums;
  border:2px solid var(--ink);
}

/* ==========================================================================
   الأزرار
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:44px; padding:var(--s3) var(--s5);
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--surface); color:var(--text);
  font-family:"Reem Kufi",sans-serif; font-size:15px; cursor:pointer;
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease),
             color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover{ border-color:var(--gold); color:var(--gold-hi); background:var(--surface-3) }
.btn:active{ transform:scale(.985) }
.btn svg{ width:18px; height:18px }

.btn-primary{
  background:var(--gold-grad); border-color:transparent; color:var(--on-gold); font-weight:600;
}
.btn-primary:hover{ color:var(--on-gold); filter:brightness(1.08) }
.btn-ghost{ background:transparent; border-color:var(--line-2) }
.btn-outline{ background:transparent; border-color:var(--gold); color:var(--gold) }
.btn-danger{ color:var(--danger); border-color:var(--danger) }
.btn-danger:hover{ background:var(--danger-bg); color:var(--danger) }
.btn-small{ min-height:34px; padding:var(--s1) var(--s3); font-size:13px }
/* على أجهزة اللمس لا يوجد زرّ «صغير»: الحد الأدنى ٤٤ بكسل مهما كان الدور
   البصري للزر. التصغير هنا يخصّ الفأرة وحدها. */
@media (pointer: coarse){
  .btn-small{ min-height:44px; padding-inline:var(--s4) }
  .mode-switch button{ min-height:44px }
}
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none }
.inline-form{ display:inline-block; margin:0 }

/* ==========================================================================
   الواجهة الرئيسية
   ========================================================================== */
.hero{
  position:relative; isolation:isolate;
  padding-block:clamp(56px,9vw,110px) clamp(72px,11vw,140px);
  margin-bottom:var(--s6);
  border-bottom:1px solid var(--line);
}
/* استبدال الرسم بصورة حقيقية: بدّل الرابط في السطر التالي فقط */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:var(--hero-image, url("../img/hero-skyline.0bb02afed897.svg"));
  background-size:cover; background-position:center bottom;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--hero-veil);
}
.hero-inner{ display:flex; flex-direction:column; gap:var(--s4); max-width:760px }
.hero .eyebrow{
  font-family:"Cinzel",Georgia,serif; font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold);
}
.hero h1{ font-size:clamp(30px,5.4vw,54px); line-height:1.22 }
.hero h1 .accent{
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.hero-lede{ color:var(--text-2); font-size:clamp(15px,1.9vw,18px); max-width:56ch }

.rule{ display:flex; align-items:center; gap:var(--s3); color:var(--gold-deep) }
.rule::before,.rule::after{ content:""; height:1px; background:var(--gold-line); flex:1 }

.search-bar{
  display:flex; gap:var(--s2); max-width:660px; margin-top:var(--s2);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--gold-line);
  border-radius:var(--r-lg); padding:var(--s2);
  transition:border-color var(--t) var(--ease);
}
.search-bar:focus-within{ border-color:var(--gold) }
.search-bar input{
  flex:1; min-width:0; min-height:44px; padding:var(--s3) var(--s4);
  border:0; background:transparent; color:var(--text);
  font-family:inherit; font-size:16px;
}
.search-bar input::placeholder{ color:var(--muted) }
.search-bar input:focus{ outline:none }

.hero-stats{ display:flex; gap:var(--s6); flex-wrap:wrap; margin-top:var(--s3) }
.hero-stat{ display:flex; flex-direction:column }
.hero-stat .v{ font-family:"Reem Kufi",sans-serif; font-size:24px; color:var(--gold);
  font-variant-numeric:tabular-nums }
.hero-stat .k{ font-size:12.5px; color:var(--muted) }

/* ==========================================================================
   الأقسام والبطاقات
   ========================================================================== */
.strip{ padding-block:var(--s6); display:flex; flex-direction:column; gap:var(--s5) }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s4); flex-wrap:wrap }
.section-head h2{ font-size:clamp(20px,2.6vw,26px) }
.section-head .sub{ color:var(--muted); font-size:14px; margin-top:2px }

.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:var(--s4) }

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.card:hover{ border-color:var(--gold-line); transform:translateY(-3px); box-shadow:var(--shadow) }
.card-link{ display:block; color:inherit }
.card-media{
  aspect-ratio:16/10; position:relative;
  background:
    linear-gradient(180deg, rgba(201,164,76,.06), transparent 60%),
    var(--surface-2);
  display:grid; place-items:center;
}
.card-media img{ width:100%; height:100%; object-fit:cover; display:block }
.card-media .placeholder{ width:56px; height:56px; opacity:.32 }
.badge{
  position:absolute; top:var(--s3); font-size:11.5px; padding:3px var(--s3);
  border-radius:var(--r-pill); font-weight:600; letter-spacing:.02em;
}
.badge-featured{ inset-inline-end:var(--s3); background:var(--gold-grad); color:var(--on-gold) }
.badge-verified{
  inset-inline-start:var(--s3); background:color-mix(in srgb, var(--surface) 84%, transparent);
  border:1px solid var(--gold-line); color:var(--gold);
  display:inline-flex; align-items:center; gap:4px;
}
.badge-verified svg{ width:12px; height:12px }

.card-body{ padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2) }
.card-body h3{ font-size:16.5px; line-height:1.45 }
.card-price{ margin:0; color:var(--gold); font-size:19px; font-weight:600;
  font-family:"Reem Kufi",sans-serif }
.card-price small{ font-size:12px; color:var(--muted); font-weight:400 }
.card-meta{ margin:0; font-size:13.5px; color:var(--text-2); display:flex;
  flex-wrap:wrap; gap:var(--s1) var(--s3) }
.card-loc,.card-ref{ margin:0; font-size:12.5px; color:var(--muted) }
.card-foot{ border-top:1px solid var(--line); padding-top:var(--s2); margin-top:var(--s1);
  display:flex; justify-content:space-between; align-items:center; gap:var(--s2) }

.empty{
  color:var(--muted); border:1px dashed var(--line-2); border-radius:var(--r-lg);
  padding:var(--s7) var(--s5); text-align:center; grid-column:1/-1;
}

/* ==========================================================================
   النماذج
   ========================================================================== */
.stack-form{ display:flex; flex-direction:column; gap:var(--s4); max-width:540px }
.grid-form{ max-width:none; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--s4) }
.grid-form .wizard-actions{ grid-column:1/-1 }

.field{ display:flex; flex-direction:column; gap:var(--s2) }
.field label{ font-size:13.5px; color:var(--text-2); font-weight:600 }
.field .req{ color:var(--gold); margin-inline-start:3px }
.field input[type=text],.field input[type=search],.field input[type=email],
.field input[type=password],.field input[type=number],.field input[type=tel],
.field input[type=file],.field select,.field textarea,
.filters input,.filters select{
  width:100%; min-height:44px; padding:var(--s3) var(--s4);
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--surface-2); color:var(--text);
  font-family:inherit; font-size:16px;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.field textarea{ resize:vertical; line-height:1.7 }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--line-2) }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gold); background:var(--surface-3);
}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:left 18px top 50%, left 13px top 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  padding-inline-start:var(--s7);
}
.field ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s2) }
.field ul li label{
  display:flex; align-items:center; gap:var(--s2); font-weight:400;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:var(--s2) var(--s4); min-height:40px; cursor:pointer;
  background:var(--surface-2); transition:border-color var(--t-fast) var(--ease);
}
.field ul li label:hover{ border-color:var(--gold-line) }
.field ul li input:checked + span,
.field ul li label:has(input:checked){ border-color:var(--gold); color:var(--gold) }
.field-help{ margin:0; font-size:12.5px; color:var(--muted) }
.field-error{ margin:0; font-size:13px; color:var(--danger) }
.field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:var(--danger) }
.form-errors,.errorlist{
  border:1px solid var(--danger); background:var(--danger-bg);
  border-radius:var(--r); padding:var(--s3) var(--s4); font-size:14px;
  color:var(--danger); list-style:none; margin:0;
}
.hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

.flash{ list-style:none; margin:0 0 var(--s5); padding:0;
  display:flex; flex-direction:column; gap:var(--s2) }
.flash li{
  padding:var(--s3) var(--s4); border-radius:var(--r); font-size:14.5px;
  border:1px solid var(--line); border-inline-start:3px solid var(--line-2);
  background:var(--surface); display:flex; gap:var(--s2); align-items:flex-start;
}
.flash-success{ border-inline-start-color:var(--ok) !important }
.flash-error{ border-inline-start-color:var(--danger) !important; color:var(--danger) }
.flash-warning{ border-inline-start-color:var(--warn) !important }

/* ==========================================================================
   الدخول
   ========================================================================== */
.auth{ display:flex; justify-content:center; padding-block:var(--s8) }
.auth-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6); max-width:480px; width:100%;
  display:flex; flex-direction:column; gap:var(--s4);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.auth-card::before{
  content:""; position:absolute; inset-inline:0; top:0; height:2px; background:var(--gold-grad);
}
.auth-card h1{ font-size:25px }
.auth-lede{ margin:0; color:var(--text-2); font-size:15px }
.auth-note{ margin:0; font-size:13px; color:var(--muted) }

/* ==========================================================================
   اللوحة
   ========================================================================== */
.dash{ display:grid; grid-template-columns:212px minmax(0,1fr);
  gap:var(--s7); padding-block:var(--s6) }
.dash-nav{ display:flex; flex-direction:column; gap:2px; position:sticky;
  top:calc(var(--header-h) + var(--s4)); align-self:start }
.dash-nav a{
  padding:var(--s3) var(--s4); border-radius:var(--r); color:var(--text-2);
  font-size:14.5px; min-height:44px; display:flex; align-items:center; gap:var(--s2);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dash-nav a:hover{ background:var(--surface-2); color:var(--gold-hi) }
.dash-nav a.on{ background:var(--gold-soft); color:var(--gold); font-weight:600;
  box-shadow:inset 2px 0 0 var(--gold) }
.dash-cta{ margin-top:var(--s3); border:1px dashed var(--gold-line);
  justify-content:center; color:var(--gold) !important }
.dash-main{ min-width:0; display:flex; flex-direction:column; gap:var(--s6) }
.dash-main h1{ font-size:26px }

.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--s3) }
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s4) var(--s5); display:flex; flex-direction:column; gap:2px;
  position:relative; overflow:hidden;
}
.kpi::after{ content:""; position:absolute; inset-block:0; inset-inline-end:0;
  width:2px; background:var(--gold-grad); opacity:.55 }
.kpi .v{ font-family:"Reem Kufi",sans-serif; font-size:29px; color:var(--gold); line-height:1.2 }
.kpi .k{ font-size:13px; color:var(--muted) }

.panel{ display:flex; flex-direction:column; gap:var(--s3) }
.panel-head{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); flex-wrap:wrap }
.panel-head h1,.panel-head h2{ font-size:20px; margin:0 }
.filters{ display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center }
.filters input,.filters select{ width:auto; min-width:150px }

/* ==========================================================================
   الجداول
   ========================================================================== */
.tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface) }
table{ border-collapse:collapse; width:100%; min-width:620px; font-size:14.5px }
thead th{
  text-align:start; font-size:12.5px; color:var(--muted); font-weight:600;
  letter-spacing:.04em; background:var(--surface-2);
  padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{ padding:var(--s3) var(--s4); border-bottom:1px solid var(--line);
  color:var(--text-2); vertical-align:top }
tbody tr:last-child td{ border-bottom:0 }
tbody tr:hover td{ background:var(--surface-2) }
td.n{ white-space:nowrap; color:var(--gold); font-weight:500 }
td.actions{ display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center; font-size:13.5px }
.muted{ color:var(--muted) }

.pill{
  display:inline-flex; align-items:center; gap:4px; font-size:12px;
  padding:2px var(--s3); border-radius:var(--r-pill);
  border:1px solid var(--line-2); color:var(--text-2);
  white-space:nowrap; background:var(--surface-2);
}
.pill-active{ border-color:var(--ok); color:var(--ok); background:rgba(111,191,154,.10) }
.pill-pending{ border-color:var(--warn); color:var(--warn); background:rgba(217,164,65,.10) }
.pill-rejected,.pill-expired{ border-color:var(--danger); color:var(--danger); background:var(--danger-bg) }
.pill-draft{ border-color:var(--line-2); color:var(--muted) }

/* ==========================================================================
   المعالج والوسائط
   ========================================================================== */
.wizard-steps{ list-style:none; display:flex; gap:var(--s2); margin:0; padding:0; flex-wrap:wrap }
.wizard-steps li{
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s4); border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:13.5px; color:var(--muted); background:var(--surface);
}
.wizard-steps li span{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-3); font-size:12px; flex:none;
}
.wizard-steps li.done{ color:var(--gold); border-color:var(--gold-line) }
.wizard-steps li.done span{ background:var(--gold-grad); color:var(--on-gold); font-weight:700 }
.wizard-actions{ display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; margin-top:var(--s2) }
.wizard-form{ max-width:580px }
.note-inline{
  border:1px solid var(--gold-line); background:var(--gold-soft);
  border-radius:var(--r); padding:var(--s3) var(--s4); font-size:14.5px; color:var(--text-2);
}

.media-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--s4) }
.media-item{ margin:0; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:var(--surface) }
.media-item.is-cover{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) }
.media-item img{ width:100%; height:132px; object-fit:cover; display:block }
.media-placeholder{ height:132px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--muted); font-size:13px }
.media-item figcaption{ padding:var(--s2) var(--s3); display:flex; flex-wrap:wrap;
  gap:var(--s2); align-items:center }

/* ==========================================================================
   صفحة العقار
   ========================================================================== */
.detail-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px;
  gap:var(--s7); padding-block:var(--s6); align-items:start }
.detail{ display:flex; flex-direction:column; gap:var(--s5); max-width:none }
.detail-head{ display:flex; flex-direction:column; gap:var(--s2) }
.detail-head h1{ font-size:clamp(23px,3.2vw,33px) }
.detail-loc{ margin:0; color:var(--muted); font-size:14.5px }
.detail-price{
  margin:var(--s1) 0 0; font-family:"Reem Kufi",sans-serif;
  font-size:clamp(26px,3.6vw,34px);
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  display:flex; align-items:baseline; gap:var(--s2); flex-wrap:wrap;
}
.detail-price small{ font-size:15px; color:var(--muted);
  -webkit-text-fill-color:var(--muted) }
.detail-price .ppsm{
  font-family:"IBM Plex Sans Arabic",sans-serif; font-size:13px; color:var(--gold);
  -webkit-text-fill-color:var(--gold);
  border:1px solid var(--gold-line); border-radius:var(--r-pill); padding:2px var(--s3);
}
.badge-inline{ align-self:flex-start; font-size:12px; padding:3px var(--s3);
  border-radius:var(--r-pill); background:var(--gold-grad); color:var(--on-gold); font-weight:600 }

.specs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:var(--s4); margin:0; padding:var(--s5); border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--surface) }
.specs > div{ display:flex; flex-direction:column; gap:2px }
.specs dt{ font-size:12.5px; color:var(--muted) }
.specs dd{ margin:0; font-weight:600; color:var(--text) }
.detail-desc{ color:var(--text-2); max-width:68ch }
.detail-desc p{ margin:0 0 var(--s3) }
.qr{ margin:0; display:flex; flex-direction:column; gap:var(--s2); align-items:flex-start }
.qr img{ background:#fff; padding:var(--s2); border-radius:var(--r) }
.qr figcaption{ font-size:13px; color:var(--muted) }

.contact-panel{
  position:sticky; top:calc(var(--header-h) + var(--s4));
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s4);
  box-shadow:var(--shadow); overflow:hidden;
}
.contact-panel::before{ content:""; position:absolute; inset-inline:0; top:0; height:2px;
  background:var(--gold-grad) }
.contact-panel h2{ font-size:18px }
.contact-panel h3{ font-family:"IBM Plex Sans Arabic",sans-serif; font-size:15px;
  font-weight:600; color:var(--text-2) }
.reveal{ display:flex; flex-direction:column; gap:var(--s3) }
.phone-line{
  font-family:"IBM Plex Mono",monospace; font-size:21px; letter-spacing:.05em;
  color:var(--gold); text-align:center; padding:var(--s3);
  border:1px solid var(--gold-line); border-radius:var(--r);
  background:var(--surface-2); margin:0; display:block; min-height:44px;
}
.phone-line.masked{ color:var(--muted); user-select:none }
.reveal-form{ margin:0 }
.reveal-form .btn{ width:100% }
.reveal-note{ margin:0; font-size:12.5px; color:var(--muted); text-align:center }
.reveal-note.is-error{ color:var(--danger) }
.btn-whatsapp{ width:100%; border-color:var(--gold); color:var(--gold) }
.panel-sep{ border:0; border-top:1px solid var(--line); margin:0 }
.lead-form{ max-width:none; gap:var(--s3) }
.lead-actions{ display:flex; gap:var(--s2); flex-wrap:wrap }
.lead-actions .btn{ flex:1; white-space:nowrap }
.panel-note{ margin:0; font-size:12px; color:var(--muted); line-height:1.7 }
.compare-btn{ width:100% }

/* ==========================================================================
   الحي والمقارنة
   ========================================================================== */
.hood{ padding-block:var(--s6); display:flex; flex-direction:column; gap:var(--s6) }
.hood-head{ display:flex; flex-direction:column; gap:var(--s2) }
.hood-head h1{ font-size:clamp(26px,3.8vw,38px) }
.hood-lede{ margin:0; color:var(--text-2) }
.hood-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:var(--s3); margin-top:var(--s5) }
.hood-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s4); display:flex; flex-direction:column; gap:2px; min-height:44px;
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.hood-card:hover{ border-color:var(--gold-line); transform:translateY(-2px) }
.hood-name{ font-family:"Reem Kufi",sans-serif; font-size:16px; color:var(--text) }
.hood-count{ font-size:13px; color:var(--muted) }
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2) }
.chip-tag{ border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:var(--s1) var(--s3); font-size:13px; color:var(--text-2); background:var(--surface) }

table.compare th[scope=row]{ text-align:start; font-weight:600; color:var(--text);
  background:var(--surface-2); font-size:13.5px; white-space:nowrap }
table.compare thead th{ vertical-align:top; min-width:170px }
table.compare thead th a{ display:block; font-family:"Reem Kufi",sans-serif;
  color:var(--text); margin-bottom:3px }
.row-differs td{ background:var(--gold-soft) }
td.is-best{ color:var(--gold); font-weight:600 }
td.is-best::after{ content:"✓"; margin-inline-start:6px; color:var(--gold) }

/* ==========================================================================
   الإشعارات
   ========================================================================== */
.notif-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s3) }
.notif{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s4) var(--s5); display:flex; gap:var(--s4);
  align-items:flex-start; justify-content:space-between;
}
.notif.is-unread{ border-inline-start:3px solid var(--gold) }
.notif-body{ display:flex; flex-direction:column; gap:var(--s1); min-width:0 }
.notif-body h2{ font-size:16px }
.notif-body p{ margin:0; font-size:14.5px; color:var(--text-2) }
.notif-meta{ font-size:12.5px; color:var(--muted); display:flex; gap:var(--s2);
  align-items:center; flex-wrap:wrap }

.demo-banner{
  background:var(--gold-grad); color:var(--on-gold); text-align:center;
  padding:var(--s2) var(--s4); font-size:13.5px; font-weight:600; line-height:1.6;
}

.results-count{ color:var(--muted); font-size:14.5px; margin:0 }
.more{ align-self:flex-start }

/* ==========================================================================
   التذييل
   ========================================================================== */
.site-footer{ border-top:1px solid var(--line); background:var(--surface);
  margin-top:var(--s8); padding-block:var(--s6) }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s6);
  padding-bottom:var(--s5); border-bottom:1px solid var(--line) }
.footer-brand{ display:flex; flex-direction:column; gap:var(--s3) }
.footer-brand .brand{ pointer-events:none }
.footer-col h3{ font-family:"Reem Kufi",sans-serif; font-size:14px; color:var(--text);
  margin-bottom:var(--s3) }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:var(--s2) }
.footer-col a{ color:var(--text-2); font-size:14px }
.footer-col a:hover{ color:var(--gold) }
.footer-legal{ padding-top:var(--s4); display:flex; flex-direction:column; gap:var(--s2) }
.site-footer p{ margin:0; color:var(--muted); font-size:13px }
.disclaimer{ max-width:82ch; line-height:1.8 }

/* ==========================================================================
   الحركة — تُحترم تفضيلات تقليلها
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  .reveal-on-scroll{ opacity:0; transform:translateY(14px);
    transition:opacity 420ms var(--ease), transform 420ms var(--ease) }
  .reveal-on-scroll.is-in{ opacity:1; transform:none }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ==========================================================================
   الاستجابة — ٣٧٥ / ٧٦٨ / ١٠٢٤ / ١٤٤٠
   ========================================================================== */
@media (max-width:1024px){
  .detail-layout{ grid-template-columns:minmax(0,1fr) }
  .contact-panel{ position:static }
  .footer-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:860px){
  .dash{ grid-template-columns:minmax(0,1fr); gap:var(--s5) }
  .dash-nav{ position:static; flex-direction:row; flex-wrap:wrap }
  .dash-nav a{ flex:1 1 auto; justify-content:center }
}
@media (max-width:768px){
  .header-inner{ gap:var(--s3) }
  /* سطر واحد يُمرَّر أفقياً بدل سطرين: الالتفاف يبتلع نصف الشاشة الأولى */
  .site-nav{
    order:3; width:100%; flex-wrap:nowrap; overflow-x:auto;
    padding-bottom:var(--s1); scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(to left, transparent 0, #000 24px);
  }
  .site-nav::-webkit-scrollbar{ display:none }
  .site-nav a{ white-space:nowrap; flex:none }
  .header-tools{ margin-inline-start:auto }
  .mode-switch{ display:none }
  .hero-stats{ gap:var(--s5) }
  .footer-grid{ grid-template-columns:1fr; gap:var(--s5) }
}
@media (max-width:480px){
  .container{ padding-inline:var(--s4) }
  .auth-card{ padding:var(--s5) }
  .cards{ grid-template-columns:1fr }
  .lead-actions .btn{ flex:1 1 100% }
}

@media print{
  .site-header,.site-footer,.contact-panel,.dash-nav{ display:none }
  body{ background:#fff; color:#000 }
}

/* ==========================================================================
   مبدّل الوضع
   الأيقونة تعرض ما سينتقل إليه المستخدم لا ما هو فيه: في النهاري يظهر القمر
   (اضغط لتُظلم)، وفي الليلي تظهر الشمس. عرض الحالة الراهنة يربك.
   ========================================================================== */
.theme-toggle .i-dark{ display:block }
.theme-toggle .i-light{ display:none }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .i-dark{ display:none }
  :root:not([data-theme="light"]) .theme-toggle .i-light{ display:block }
}
:root[data-theme="dark"] .theme-toggle .i-dark{ display:none }
:root[data-theme="dark"] .theme-toggle .i-light{ display:block }

.credit{ font-size:12px; color:var(--muted); line-height:1.8; max-width:82ch }
.credit a{ color:var(--gold) }

/* الصورة تُحمَّل من الرمز، ونسبتها محجوزة فلا تقفز الصفحة عند وصولها */
.hero::before{ background-image:var(--hero-image) }