:root{
  --navy:#22262B;
  --navy-2:#2C3238;
  --navy-3:#3A4048;
  /* خلفية كحلي ثابتة (أزرار/فقاعات رسايل) — --navy نفسه بيتقلب لون نص فاتح في الوضع الليلي */
  --navy-fill:#22262B;
  --amber:#E85D1F;
  --amber-dark:#B24D12;
  --cream:#F5F4F2;
  --cream-2:#EAE8E4;
  --paper:#FFFFFF;
  --ink:#22262B;
  --ink-soft:#6B6860;
  --ink-faint:#9A968E;
  --line:#DEDBD3;
  --green:#2E8B57;
  --green-bg:#E4F2E9;
  --rust:#C0642E;
  --rust-bg:#FBEBE0;
  --red:#C0392B;
  --shadow: 0 1px 2px rgba(34,38,43,0.08), 0 6px 20px rgba(34,38,43,0.10);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Tajawal', sans-serif;
  background: repeating-linear-gradient(0deg, #E9E4D6 0px, #E9E4D6 1px, #EFEAE0 1px, #EFEAE0 40px),
              repeating-linear-gradient(90deg, #E9E4D6 0px, #E9E4D6 1px, #EFEAE0 1px, #EFEAE0 40px);
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding: 32px 12px;
  color:var(--ink);
}
.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em; }

/* ===== phone shell ===== */
.phone{
  width:390px; max-width:100%;
  background: var(--navy);
  border-radius: 44px;
  padding: 14px;
  box-shadow: 0 30px 60px rgba(19,32,56,0.35), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.screen{
  background: var(--cream);
  border-radius: 32px;
  overflow:hidden;
  height: 780px;
  display:flex;
  flex-direction:column;
  position:relative;
}
.statusbar{
  height: 30px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 26px;
  font-size:12px; font-weight:700; color:var(--navy);
  flex-shrink:0;
}

/* أزرار الخريطة العائمة (بنك الثوابت): position:fixed دايمًا على الشاشة
   الحقيقية للمتصفح — عمدًا مش absolute ولا مربوطة بـ transform على .screen.
   السبب: .screen حجمها 780px ثابت على الديسكتوب، ولو نافذة المتصفح الفعلية
   أقصر من كده الصفحة كلها بتحتاج سكرول، وأي عنصر absolute (مربوط بمكانه جوه
   الصفحة) بيقع تحت الطيّة معاها. position:fixed مالوش الحساسية دي أبدًا —
   ثابت على الشاشة الفعلية بغض النظر عن طول الصفحة أو موضع السكرول. الحيلة
   القديمة (transform على .screen) كانت بتحل مشكلة المحاذاة مع إطار الموبايل
   على الديسكتوب، بس كانت بتحط الزراير في نفس طبقة تستيك خرائط Leaflet
   فتختفي وراها بعد الزووم — التضحية بمحاذاة إطار الديسكتوب الوهمي (تجميلي
   بس) أفضل بكتير من رجوع أي من المشكلتين التانيين. */
/* لازم يبقى أعلى من z-index الداخلي بتاع Leaflet نفسه (البلاطات/الماركرز/
   التولتيبات وصلة لـ 700) وإلا الخريطة بترسم فوق الزرار وبيختفي وراها */
.cp-map-fab{ position:absolute; bottom:14px; z-index:1000; }

.cad-tool-btn{ width:40px; height:40px; border-radius:50%; padding:0; font-size:17px; box-shadow:var(--shadow); background:var(--paper); }
.cad-tool-btn.on{ background:var(--amber) !important; color:#fff; }
.cad-layer-row{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); font-size:12px; color:var(--navy); }
.cad-layer-row:last-child{ border-bottom:none; }
.cad-layer-swatch{ width:12px; height:12px; border-radius:3px; flex:0 0 auto; border:1px solid rgba(0,0,0,0.15); }
.cad-layer-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cp-marker-icon{ background:none; border:none; }
.cp-marker-wrap{ position:relative; }
.cp-marker-label{
  position:absolute; bottom:44px; left:50%; transform:translateX(-50%);
  background:var(--paper); color:#D32F2F;
  border:1px solid var(--line); border-radius:6px;
  padding:2px 7px; font-size:11px; font-weight:700;
  white-space:nowrap;
  box-shadow:0 1px 4px rgba(0,0,0,0.15);
}

.cp-zone-label-icon{ background:none; border:none; }
.cp-zone-label{
  position:absolute; left:50%; transform:translateX(-50%);
  color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px;
  white-space:nowrap; box-shadow:0 1px 4px rgba(0,0,0,0.25);
}

/* On a real phone screen, drop the desktop "device mockup" chrome
   and let the app fill the whole viewport like a real installed app. */
@media (max-width: 480px){
  body{ padding:0; align-items:stretch; min-height:100dvh; }
  .phone{ width:100%; max-width:100%; border-radius:0; padding:0; box-shadow:none; }
  .screen{ height:100dvh; border-radius:0; }
  .statusbar{ display:none; }
}
.app-header{
  /* env(safe-area-inset-top) بيكون 0 على المتصفح العادي (مفيش تأثير هنا)، بس
     على تطبيق الأندرويد الحقيقي بيرجع ارتفاع status bar/الشق (notch) الحقيقي
     لو الـ WebView بيرسم تحته (edge-to-edge) — من غيره الأيقونات (الإشعارات
     وتغيير اللغة) بتطلع واقفة تحت الساعة/البطارية مباشرة وتبان "واقفة فوق خالص" */
  padding: calc(10px + env(safe-area-inset-top)) 18px 14px;
  flex-shrink:0;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.brand-row{
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:8px; }
.brand-mark{
  width:46px; height:46px; border-radius:12px; background:transparent;
  display:flex; align-items:center; justify-content:center;
  color:var(--amber); font-size:11px; font-weight:700; letter-spacing:0.02em;
  flex-shrink:0; background-size:contain !important; background-repeat:no-repeat; background-position:center;
}
.home-logo{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:10px 0 18px;
}
.home-logo img, .home-logo .logo-img{
  width:210px; height:210px; background-size:contain; background-repeat:no-repeat; background-position:center;
  border-radius:24px;
}
.home-logo.auth-logo .logo-img{
  width:190px; height:190px;
}
.brand-name{ font-weight:900; font-size:17px; color:var(--navy); }
.brand-tag{ font-size:10px; color:var(--ink-faint); margin-top:-2px; }

.content{
  flex:1;
  overflow-y:auto;
  padding: 14px 16px 18px;
  -ms-overflow-style:none; scrollbar-width:none;
}
.content::-webkit-scrollbar{ display:none; }

.page{ display:none; animation: pageIn .24s ease-out; }
@keyframes pageIn{ from{ opacity:0; transform:translateX(-14px); } to{ opacity:1; transform:none; } }
html[dir="ltr"] .page{ animation-name: pageInLtr; }
@keyframes pageInLtr{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:none; } }

/* جارٍ التحميل: نقطة ليزر بتمسح على خط — transform بس فخفيفة */
.sv-loading{ position:relative; padding-top:22px !important; }
.sv-loading::before{ content:""; position:absolute; top:6px; left:50%; width:64px; margin-left:-32px; height:2px; border-radius:2px; background:var(--line); }
.sv-loading::after{ content:""; position:absolute; top:3px; left:50%; margin-left:-32px; width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px var(--amber); animation:svScan .9s ease-in-out infinite alternate; }
@keyframes svScan{ to{ transform:translateX(56px); } }

/* الصفحات الفاضية: رسم خطي لتوتال ستيشن على حامل فوق الجملة (mask عشان ياخد لون الثيم) */
.sv-empty::before, .cm-empty::before{
  content:""; display:block; width:56px; height:56px; margin:0 auto 10px; background:var(--ink-faint); opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='19' y='8' width='18' height='20' rx='3'/%3E%3Ccircle cx='28' cy='15' r='4'/%3E%3Cpath d='M22 23h12M24 28v3h8v-3M28 31v4M28 35 16 53M28 35l12 18M28 35v18'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='19' y='8' width='18' height='20' rx='3'/%3E%3Ccircle cx='28' cy='15' r='4'/%3E%3Cpath d='M22 23h12M24 28v3h8v-3M28 31v4M28 35 16 53M28 35l12 18M28 35v18'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cm-empty-small::before{ width:40px; height:40px; }
@media (prefers-reduced-motion: reduce){ .page, .sv-loading::after{ animation:none !important; } }
.page.active{ display:block; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

/* ===== bottom nav ===== */
.bottomnav{
  flex-shrink:0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  display:flex;
  padding: 8px 6px 12px;
}
.nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  cursor:pointer; color:var(--ink-faint); font-size:11.5px; font-weight:700;
  padding:3px 0; border:none; background:none; font-family:inherit;
}
.nav-item.on{ color:var(--navy); }
.nav-item.on .nav-ico{ background:var(--amber); color:#fff; animation:navPop .28s ease-out; }
.nav-ico{
  width:30px; height:24px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:12px;
  color:var(--ink-faint);
}
.nav-ico svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
@keyframes navPop{ from{ transform:scale(.82); } to{ transform:scale(1); } }

/* ===== مشهد متحرك أعلى صفحات الخدمات (SVG + حركات CSS transform/opacity بس — خفيف على أي موبايل،
   وبيقف لوحده لما الصفحة تتقفل لأن الصفحات المخفية display:none) ===== */
.hub-scene{ height:118px; border-radius:16px; overflow:hidden; margin:0 0 14px; background:linear-gradient(160deg,#1B2430,#0F1419); border:1px solid rgba(255,255,255,.06); }
.hub-scene svg{ width:100%; height:100%; display:block; direction:ltr; }
.hub-scene .hs-hud{ font:600 8px 'IBM Plex Mono',ui-monospace,monospace; fill:#8C98A6; letter-spacing:.06em; }
.hub-scene .hs-hud-a{ fill:#F06A2C; } .hub-scene .hs-hud-g{ fill:#4CC38A; } .hub-scene .hs-hud-b{ fill:#4FA3FF; }
.hs-turn,.hs-mer,.hs-ring{ transform-box:fill-box; transform-origin:center; }
/* steps() = حوالي ١٢ صورة في الثانية بدل ٦٠: الحركة لسه باينة ناعمة على المشهد الصغير ده،
   والمتصفح مابيعيدش الرسم غير لما القيمة تتغير — وفّرت أغلب استهلاك المعالج على الإيمليتور */
.hs-turn{ animation:hsTurn 4s steps(48) infinite; }
.hs-mer{ animation:hsMer 6s steps(72) infinite; }
.hs-ring{ animation:hsRing 1.8s steps(22) infinite; }
.hs-travel{ animation:hsTravel 1.8s steps(22) infinite; }
.hs-blink{ animation:hsBlink 2.4s steps(29) infinite; }
.hs-bob{ animation:hsBob 3s steps(36) infinite; }
.hs-up{ animation:hsUp 3.6s steps(43) infinite; }
.hs-down{ animation:hsDown 3.6s steps(43) infinite; }
.hs-cone{ animation:hsCone 2.4s steps(29) infinite; }
.hs-scan{ animation:hsScan 2.6s steps(31) infinite alternate; }
@keyframes hsTurn{ 50%{ transform:scaleX(.8); } }
@keyframes hsMer{ from{ transform:scaleX(1); } to{ transform:scaleX(-1); } }
@keyframes hsRing{ from{ transform:scale(1); opacity:.8; } to{ transform:scale(2.6); opacity:0; } }
@keyframes hsTravel{ 0%{ transform:translate(0,0); opacity:0; } 15%,85%{ opacity:1; } 100%{ transform:translate(var(--dx),var(--dy)); opacity:0; } }
@keyframes hsBlink{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
@keyframes hsBob{ 50%{ transform:translateY(-3px); } }
@keyframes hsUp{ 50%{ transform:translateY(-6px); } }
@keyframes hsDown{ 50%{ transform:translateY(6px); } }
@keyframes hsCone{ 0%,100%{ opacity:.08; } 50%{ opacity:.2; } }
@keyframes hsScan{ from{ transform:translateY(24px); } to{ transform:translateY(108px); } }
@media (prefers-reduced-motion: reduce){ .hub-scene *, .nav-ico{ animation:none !important; } }

/* ===== شاشة الفتح ===== */
.boot-splash{ position:fixed; inset:0; z-index:99999; background:#0F1419; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; transition:opacity .4s ease; }
.boot-splash.bs-done{ opacity:0; pointer-events:none; }
.bs-logo{ position:relative; width:150px; height:150px; border-radius:30px; overflow:hidden; background:#F5F1EA; box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 18px 50px rgba(0,0,0,.45); }
.bs-logo img{ position:absolute; inset:11%; width:78%; height:78%; }
.bs-scan{ position:absolute; left:-10%; right:-10%; top:0; height:3px; background:#F06A2C; box-shadow:0 0 12px 2px rgba(240,106,44,.7); animation:bsScan 1.1s ease-in-out infinite alternate; }
@keyframes bsScan{ from{ transform:translateY(8px); } to{ transform:translateY(140px); } }
.bs-tag{ font:600 10px 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.3em; color:#8C98A6; direction:ltr; }

/* ===== هيكل مؤقت لكروت الإعلانات (لمعة بـ transform بس) ===== */
.sk-card{ pointer-events:none; }
.sk{ position:relative; overflow:hidden; background:var(--line); border-radius:8px; }
.sk::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform:translateX(-100%); animation:skShine 1.3s ease-in-out infinite; }
html[data-theme="dark"] .sk::after{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }
.sk-line{ height:10px; margin:9px 0 0; width:85%; }
.sk-line.sk-short{ width:55%; margin-top:7px; }
.sk-line.sk-price{ width:40%; height:12px; margin-top:10px; }
@keyframes skShine{ to{ transform:translateX(100%); } }
html[dir="rtl"] .sk::after{ animation-direction:reverse; }

/* ===== كارت الهوية في صفحة حسابي (غامق في الوضعين زي مشاهد الخدمات) ===== */
.profile-idcard{ position:relative; margin:0 0 16px; padding:12px 14px 14px; border-radius:18px; overflow:hidden; color:#E8ECF1;
  background:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/20px 20px, linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/20px 20px, linear-gradient(160deg,#1B2430,#0F1419);
  border:1px solid rgba(255,255,255,.07); }
.profile-idcard::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#F06A2C,#F2C66D 50%,#4FA3FF); }
.pid-strip{ display:flex; justify-content:space-between; align-items:center; direction:ltr; font:600 9px 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.18em; color:#8C98A6; margin-bottom:10px; }
.pid-dot{ width:7px; height:7px; border-radius:50%; background:#4CC38A; box-shadow:0 0 6px #4CC38A; }
.profile-idcard #profileName{ color:#fff !important; }
.profile-idcard #profileAccountType{ color:#A3ADB9 !important; }
.profile-idcard .stat3{ margin-bottom:0; }
.profile-idcard .stat3 > div{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.09); }
.profile-idcard .stat3 div div{ background:none; border:0; padding:0; border-radius:0; }
.profile-idcard .stat-num{ color:#fff; }
.profile-idcard .stat-lbl{ color:#8C98A6; }

/* رسمة الجهاز مكان الصورة (إعلان/طلب/مكتب من غير صورة) — شبكة خفيفة زي ورق الرسم الهندسي */
.item-thumb-art{ color:var(--ink-faint); background:linear-gradient(var(--line) 1px, transparent 1px) 0 0/14px 14px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/14px 14px, var(--cream-2) !important; }
.device-art{ width:58px; height:58px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#equipDetailThumb .device-art{ width:110px; height:110px; }
.device-art .da-acc{ stroke:var(--amber); }
.device-art circle.da-acc[r="1.6"], .device-art circle.da-acc[r="2.6"]{ fill:var(--amber); }

/* الأرقام بخط هندسي (الأرقام العربية بترجع لخط Tajawal لوحدها لأن الخط ده مافيهوش أرقام عربي) */
.item-price, .stat-num, .gis-coord-val{ font-family:'IBM Plex Mono','Tajawal',monospace; letter-spacing:-.01em; }

/* علامة نقطة رصد (مثلث برتقالي) جنب عناوين الأقسام */
.section-label::before{ content:""; display:inline-block; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid var(--amber); margin-inline-end:7px; vertical-align:1px; }

/* السحب للتحديث: فقاعة ميزان */
.ptr-wrap{ position:sticky; top:0; height:0; z-index:6; display:flex; justify-content:center; pointer-events:none; }
.ptr{ margin-top:0; transform:translateY(-48px); opacity:0; transition:opacity .15s; width:46px; height:46px; border-radius:50%; background:var(--paper); border:1px solid var(--line); box-shadow:0 6px 16px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; }
.ptr-vial{ position:relative; width:30px; height:10px; border-radius:6px; border:1.6px solid var(--ink-faint); background:linear-gradient(90deg, transparent 13px, var(--ink-faint) 13px, var(--ink-faint) 14.6px, transparent 14.6px); }
.ptr-bubble{ position:absolute; top:1px; left:50%; width:8px; height:5px; margin-left:-4px; border-radius:4px; background:var(--amber); transition:transform .08s linear; }
.ptr.ptr-ready .ptr-vial, .ptr.ptr-busy .ptr-vial{ border-color:var(--green); }
.ptr.ptr-busy .ptr-bubble{ animation:ptrPulse .7s ease-in-out infinite alternate; }
@keyframes ptrPulse{ from{ opacity:.35; } to{ opacity:1; } }

/* تعريف أول مرة */
.onboarding{ position:fixed; inset:0; z-index:99990; background:var(--cream); display:flex; flex-direction:column; padding:max(16px, env(safe-area-inset-top)) 0 max(18px, env(safe-area-inset-bottom)); transition:opacity .3s; }
.onboarding.ob-done{ opacity:0; pointer-events:none; }
.ob-skip{ align-self:flex-end; margin:0 16px; background:none; border:0; color:var(--ink-soft); font:700 13px inherit; font-family:inherit; padding:8px; cursor:pointer; }
.ob-track{ flex:1; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.ob-track::-webkit-scrollbar{ display:none; }
.ob-slide{ flex:0 0 100%; scroll-snap-align:center; display:flex; flex-direction:column; justify-content:center; padding:0 22px; }
.ob-slide .hub-scene{ height:auto; aspect-ratio:340/118; margin-bottom:26px; }
.ob-title{ font-size:21px; font-weight:900; color:var(--navy); margin-bottom:10px; }
.ob-text{ font-size:14px; line-height:1.9; color:var(--ink-soft); }
.ob-foot{ display:flex; align-items:center; justify-content:space-between; padding:0 22px; gap:12px; }
.ob-foot .btn{ min-width:130px; }
.ob-dots{ display:flex; gap:6px; }
.ob-dot{ width:7px; height:7px; border-radius:4px; background:var(--line); transition:width .2s, background .2s; }
.ob-dot.on{ width:20px; background:var(--amber); }

/* اسم الخدمة الصغير بالإنجليزي تحت كل خدمة */
.home-service-tile .hst-sub{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:9.5px; font-weight:600; letter-spacing:.08em; color:var(--ink-faint); }

/* ===== typography helpers ===== */
h1.title{ font-size:20px; font-weight:900; color:var(--navy); margin-bottom:4px; }
.subtitle{ font-size:12.5px; color:var(--ink-soft); margin-bottom:16px; }
.eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.1em; color:var(--amber-dark); font-weight:700; text-transform:uppercase; margin-bottom:6px; }
.section-label{ font-size:13px; font-weight:700; color:var(--navy); margin: 18px 0 10px; }

/* ===== controls ===== */
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.icon-btn{
  width:34px; height:34px; border-radius:10px; background:var(--paper);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--navy); font-size:15px;
}
.page-title{ font-size:15px; font-weight:900; color:var(--navy); }

.search-row{ position:relative; margin-bottom:12px; }
.search-row input{
  width:100%; padding:11px 40px 11px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--paper); font-family:inherit; font-size:13px; color:var(--ink); text-align:right;
}
.search-row input::placeholder{ color:var(--ink-faint); }
.search-ico{ position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--ink-faint); font-size:14px; }

.chip-row{ display:flex; gap:7px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px; }
.chip{
  white-space:nowrap; font-size:12px; font-weight:700; padding:7px 15px; border-radius:20px;
  background:var(--paper); border:1px solid var(--line); color:var(--ink-soft); cursor:pointer; flex-shrink:0;
}
.chip.on{ background:var(--amber); color:#fff; border-color:var(--amber); }

.btn{
  font-family:inherit; font-size:13px; font-weight:700; border-radius:12px; border:1px solid var(--line);
  background:var(--paper); color:var(--navy); padding:10px 14px; cursor:pointer; text-align:center;
}
.btn-primary{ background:var(--amber); color:#fff; border-color:var(--amber); }
.btn-primary:active{ opacity:0.9; }
.btn-block{ width:100%; }
.btn-row{ display:flex; gap:8px; }
.btn-row .btn{ flex:1; }

/* ===== cards ===== */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:12px;
  box-shadow: var(--shadow);
}
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.item-card{ cursor:pointer; position:relative; }
.item-thumb{
  height:88px; border-radius:12px; background:var(--cream-2);
  display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--navy-3);
  margin-bottom:8px; border:1px solid var(--line);
}
.badge{ display:inline-block; font-size:10px; font-weight:800; padding:3px 9px; border-radius:20px; }
.badge-rent{ background:var(--green-bg); color:var(--green); }
.badge-sale{ background:var(--rust-bg); color:var(--rust); }
.badge-verified{ background:var(--green-bg); color:var(--green); }
.badge-neutral{ background:var(--cream-2); color:var(--ink-soft); }
.item-name{ font-size:12.5px; font-weight:700; margin:7px 0 2px; color:var(--navy); }
.item-loc{ font-size:11px; color:var(--ink-soft); margin-bottom:5px; }
.item-price{ font-size:13.5px; font-weight:900; color:var(--navy); }

.avatar{
  width:38px; height:38px; border-radius:50%; background:var(--navy-fill);
  display:flex; align-items:center; justify-content:center; color:var(--amber);
  font-weight:800; font-size:13px; flex-shrink:0;
}

.list-row{ display:flex; align-items:center; gap:10px; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:10px; margin-bottom:9px; }
/* الصفحة الرئيسية: الخدمات الأربعة جنب بعض ٢×٢ */
.home-services-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.home-service-tile{ display:flex; flex-direction:column; gap:4px; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px 10px; cursor:pointer; min-width:0; }
.home-service-tile:active{ transform:scale(.98); }
.home-service-tile .hst-icon{ font-size:22px; line-height:1; margin-bottom:2px; }
.home-service-tile .hst-title{ font-size:13px; font-weight:700; color:var(--navy); line-height:1.35; }
.home-service-tile .hst-sub{ font-size:10.5px; font-weight:700; color:var(--ink-soft); letter-spacing:0.6px; margin-top:2px; }
.home-service-tile .hst-sub:empty{ display:none; }
.home-service-tile .hst-desc{ font-size:11px; color:var(--ink-soft); line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.delete-ico{ font-size:15px; color:var(--rust); cursor:pointer; padding:2px 4px; flex-shrink:0; }
.edit-ico{ font-size:15px; color:var(--ink-soft); cursor:pointer; padding:2px 4px; flex-shrink:0; }

.chat-wrap{ display:flex; flex-direction:column; height:100%; }
.chat-messages{ min-height:340px; max-height:55vh; overflow-y:auto; padding:4px 2px 10px; display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.msg{ max-width:78%; padding:9px 13px; border-radius:16px; font-size:12.5px; line-height:1.6; }
.msg.in{ align-self:flex-start; background:var(--paper); border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:4px; }
.msg.out{ align-self:flex-end; background:var(--navy-fill); color:#fff; border-bottom-right-radius:4px; }
.msg-time{ font-size:9.5px; color:var(--ink-faint); margin-top:3px; display:block; }
.msg.out .msg-time{ color:rgba(255,255,255,0.6); }
.chat-input-row{ display:flex; gap:8px; align-items:center; padding-top:8px; border-top:1px solid var(--line); }
.chat-input-row input{ flex:1; border-radius:20px; padding:10px 16px; }
.chat-send-btn{ width:38px; height:38px; border-radius:50%; background:var(--amber); color:#fff; border:none; font-size:15px; cursor:pointer; flex-shrink:0; }

.chat-menu-wrap{ position:relative; }
.chat-menu-dropdown{
  position:absolute; top:40px; left:0; background:var(--paper); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.14); overflow:hidden; z-index:50; min-width:170px;
}
.chat-menu-dropdown .menu-item{ padding:11px 14px; font-size:12.5px; font-weight:700; color:var(--navy); cursor:pointer; white-space:nowrap; }
.chat-menu-dropdown .menu-item:active{ background:var(--cream-2); }
.chat-menu-dropdown .menu-item.danger{ color:var(--rust); }
.chat-blocked-banner{ background:var(--rust-bg); color:var(--rust); font-size:11.5px; font-weight:700; text-align:center; padding:9px 10px; border-radius:10px; margin-bottom:10px; }

.field-label{ font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; display:block; }
select, textarea, input[type=text], input[type=date], input[type=password]{
  width:100%; padding:10px 12px; border-radius:11px; border:1px solid var(--line);
  background:var(--paper); font-family:inherit; font-size:13px; color:var(--ink); text-align:right;
}
textarea{ min-height:64px; resize:none; }
.field-gap{ margin-bottom:13px; }

.password-field{ position:relative; }
.password-field input{ padding-left:36px; }
.password-toggle{ position:absolute; left:4px; top:50%; transform:translateY(-50%); width:28px; height:28px; background:none; border:none; padding:0; cursor:pointer; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; border-radius:8px; }
.password-toggle:active{ background:var(--cream-2); }
.password-toggle svg{ width:17px; height:17px; }

.info-box{ background:var(--navy-fill); color:#fff; border-radius:14px; padding:12px 14px; font-size:12px; line-height:1.7; margin-bottom:14px; display:flex; gap:9px; }
.info-box.light{ background:var(--cream-2); color:var(--ink-soft); }
.info-box i{ color:var(--amber); flex-shrink:0; margin-top:1px; }

table.rows{ width:100%; font-size:12.5px; border-collapse:collapse; }
table.rows td{ padding:6px 0; color:var(--ink-soft); }
table.rows td:last-child{ text-align:left; color:var(--ink); font-weight:700; }
table.rows tr.total td{ border-top:1px solid var(--line); padding-top:11px; font-weight:900; color:var(--navy); font-size:14.5px; }

.stat3{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
.stat3 div{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:9px 4px; text-align:center; }
.stat-num{ font-size:16px; font-weight:900; color:var(--navy); }
.stat-lbl{ font-size:10px; color:var(--ink-soft); margin-top:2px; }

.tag{ font-size:11px; font-weight:700; background:var(--cream-2); color:var(--ink-soft); border-radius:20px; padding:5px 12px; border:1px solid var(--line); }

.check-row{ display:flex; align-items:center; gap:9px; font-size:12.5px; padding:9px 0; border-bottom:1px solid var(--line); }
.check-row input{ width:16px; height:16px; accent-color: var(--navy); }

.photo-slot{ height:70px; border-radius:12px; border:1.5px dashed var(--ink-faint); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:10.5px; color:var(--ink-soft); background:var(--paper); }
.photo-slot.done{ border:1px solid var(--green); background:var(--green-bg); color:var(--green); }

.offer-card{ border-radius:16px; padding:12px; margin-bottom:10px; background:var(--paper); border:1px solid var(--line); }
.offer-card.best{ border:2px solid var(--amber); }

.stars{ color:var(--amber-dark); font-size:11px; }

/* toast for demo interactions */
#toast{
  position:absolute; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--navy-fill); color:#fff; padding:10px 18px; border-radius:30px; font-size:12px; font-weight:700;
  opacity:0; transition:all .25s ease; pointer-events:none; white-space:nowrap; z-index:50;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.upload-row{ display:flex; align-items:center; gap:10px; border:1.5px dashed var(--ink-faint); border-radius:13px; padding:12px; margin-bottom:9px; }
.job-type-card.on, .worktype-card.on, .account-type-card.on{ border:2px solid var(--amber) !important; }

/* ===== تطبيق أندرويد (Capacitor): ملء الشاشة دايمًا — تابلت/تصغير نافذة/موبايل أفقي كانت بتظهر
   "إطار موبايل" 390×780 ثابت وشريط حالة وهمي. أندرويد ١٥+ (targetSdk 35+) بيرسم الـ WebView تحت
   شريط التنقل (edge-to-edge) — فلازم الشريط السفلي والتوست يعوّضوا ارتفاعه ===== */
html.native-app body{ padding:0; align-items:stretch; min-height:100dvh; }
html.native-app .phone{ width:100%; max-width:640px; margin:0 auto; border-radius:0; padding:0; box-shadow:none; }
html.native-app .screen{ height:100dvh; border-radius:0; }
html.native-app .statusbar{ display:none; }
.bottomnav{ padding-bottom: calc(12px + max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px))); }
#toast{ bottom: calc(90px + max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px))); }

/* وضع الزائر — js/19-guest-mode.js */
.guest-prompt-overlay{ position:fixed; inset:0; background:rgba(16,24,40,0.55); display:none; align-items:flex-end; justify-content:center; z-index:5000; padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
.guest-prompt-overlay.show{ display:flex; }
.guest-prompt-card{ background:var(--paper, #fff); border-radius:18px; padding:22px 18px 14px; width:100%; max-width:420px; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,0.25); }
.guest-prompt-icon{ font-size:30px; margin-bottom:6px; }
.guest-prompt-title{ font-size:16px; font-weight:800; color:var(--navy); margin-bottom:6px; }
.guest-prompt-text{ font-size:12.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:16px; }
.guest-prompt-later{ margin-top:12px; font-size:12px; color:var(--ink-soft); cursor:pointer; padding:6px; }
.guest-preview-banner{ background:#FFF4E5; border:1px solid #F3C98B; color:#8A4B08; border-radius:10px; padding:9px 12px; font-size:12px; font-weight:700; margin-bottom:12px; cursor:pointer; text-align:center; }
.guest-cta{ background:linear-gradient(135deg, #FFF4E5, #FDEBDD); border:1px solid #F3C98B; border-radius:14px; padding:14px; margin-bottom:14px; }
.guest-cta-title{ font-size:14px; font-weight:800; color:var(--navy); margin-bottom:4px; }
.guest-cta-text{ font-size:12px; color:var(--ink-soft); line-height:1.6; margin-bottom:10px; }
.guest-header-login{ font-size:12px; padding:7px 14px; border-radius:10px; }
.guest-browse-link{ color:var(--navy); font-weight:700; font-size:12.5px; cursor:pointer; text-decoration:underline; }

/* عارض الكاد — أدوات إضافية */
.cad-extra-bar{ display:flex; flex-wrap:wrap; gap:6px; padding:10px 12px; border:1px solid var(--line); border-top:none; background:var(--paper); }
.cad-extra-bar .btn{ font-size:11.5px; padding:7px 10px; }
.cad-panel{ border:1px solid var(--line); border-top:none; background:var(--paper); padding:10px 12px; max-height:240px; overflow-y:auto; }
.cad-search-row{ padding:8px 4px; border-bottom:1px solid var(--line); font-size:12px; color:var(--navy); cursor:pointer; overflow-wrap:anywhere; }
.cad-search-row:last-child{ border-bottom:none; }
.cad-block-row{ display:flex; justify-content:space-between; gap:10px; padding:6px 2px; border-bottom:1px solid var(--line); font-size:12px; color:var(--navy); }
.cad-block-row span{ overflow-wrap:anywhere; min-width:0; }
.cad-block-row:last-child{ border-bottom:none; }
.cad-layer-isolate{ font-size:10.5px; padding:4px 8px; margin-inline-start:auto; }
.cad-search-row{ display:flex; justify-content:space-between; gap:10px; }
.cad-search-layer{ color:var(--ink-soft); font-size:11px; flex-shrink:0; }

.cad-layer-swatch-btn{ cursor:pointer; outline:1px solid var(--line); }
.cad-layer-palette{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 4px 10px; border-bottom:1px solid var(--line); align-items:center; }
.cad-palette-color{ width:26px; height:26px; border-radius:50%; border:2px solid var(--paper); box-shadow:0 0 0 1px var(--line); padding:0; cursor:pointer; }

/* بحث عن مكان على خريطة الثوابت */
.cp-place-search{ display:flex; gap:6px; margin-bottom:8px; }
.cp-place-search input{ flex:1; min-width:0; }
.cp-place-results{ border:1px solid var(--line); border-radius:10px; background:var(--paper); margin-bottom:8px; max-height:220px; overflow-y:auto; }
.cp-place-row{ padding:9px 10px; border-bottom:1px solid var(--line); font-size:12px; color:var(--navy); cursor:pointer; overflow-wrap:anywhere; }
.cp-place-row:last-child{ border-bottom:none; }

/* إعلان وظيفة خارجي (سيرفو وسيط نشر بس) */
.badge-external-job{ background:#EAF1FB; color:#1E5BB8; margin-inline-start:4px; }
.external-job-box{ margin-bottom:14px; border:1px solid #C9DAF3; background:#F4F8FE; }
.external-job-title{ font-size:13px; font-weight:800; color:var(--navy); }
.external-job-note{ font-size:11.5px; color:var(--ink-soft); line-height:1.8; margin-top:4px; }
.external-job-source{ font-size:11.5px; color:var(--navy); font-weight:700; margin-top:6px; }

/* زرار + في صفحة "اعرض" — كان صغير ورمادي ومستخدمين قالوا مش شايفينه */
.add-equip-btn{ width:44px; height:44px; border-radius:12px; background:var(--amber); border-color:var(--amber); color:#fff; font-size:30px; font-weight:900; line-height:1; box-shadow:0 4px 12px rgba(232,93,31,.35); }
.add-equip-btn:active{ transform:scale(.94); }

/* الجديد من آخر زيارة */
.badge-new{ position:absolute; top:8px; right:8px; background:var(--amber); color:#fff; font-weight:800; box-shadow:0 2px 6px rgba(232,93,31,.3); z-index:1; }
.whats-new-banner{ background:#FFF1E8; border:1px solid #F5C3A6; color:var(--amber-dark, #B5441A); font-size:12.5px; font-weight:800; border-radius:12px; padding:10px 12px; margin-bottom:12px; cursor:pointer; }

/* ===== خدمات GIS ===== */
.gis-layer-row{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; margin-bottom:8px; background:var(--paper); }
.gis-layer-row input[type=checkbox]{ width:18px; height:18px; flex:none; }
.gis-swatch{ width:14px; height:14px; border-radius:4px; flex:none; border:1px solid rgba(0,0,0,.25); }
.gis-layer-name{ font-size:13px; font-weight:700; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gis-layer-meta{ font-size:11px; color:var(--ink-soft); }
.gis-mini-btn{ width:34px; height:34px; padding:0; font-size:14px; flex:none; }
.gis-table{ border-collapse:collapse; font-size:11px; min-width:100%; }
.gis-table th, .gis-table td{ border-bottom:1px solid var(--line); padding:6px 8px; white-space:nowrap; text-align:start; }
.gis-table th{ position:sticky; top:0; background:var(--cream-2); color:var(--navy); font-weight:700; }
.gis-table tbody tr{ cursor:pointer; }
.gis-table tbody tr:active{ background:var(--cream-2); }
.gis-check{ display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--ink); margin-bottom:10px; line-height:1.6; }
.gis-check input{ margin-top:3px; width:16px; height:16px; flex:none; }
.gis-fab.on{ background:var(--amber) !important; color:#fff; }
.gis-tool-card{ border:1px solid var(--line); border-radius:14px; padding:12px; margin-bottom:10px; background:var(--paper); box-shadow:var(--shadow); }
.gis-tool-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; font-weight:800; color:var(--navy); margin-bottom:8px; }
.gis-tool-head span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gis-tool-big{ font-size:20px; font-weight:900; color:var(--navy); line-height:1.4; }
.gis-tool-line{ font-size:12px; color:var(--ink-soft); line-height:1.7; }
.gis-tool-hint{ font-size:12px; color:var(--ink-soft); padding:4px 0; }
.gis-inside-row{ cursor:pointer; padding:6px 0; border-bottom:1px dashed var(--line); }
.gis-inside-row:last-of-type{ border-bottom:none; }
.gis-arrow{ width:52px; height:52px; border-radius:50%; background:#2F80ED; color:#fff; font-size:28px; display:flex; align-items:center; justify-content:center; flex:none; transition:transform .4s ease; }
.gis-target-pin{ font-size:24px; line-height:30px; text-align:center; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.cad-manual-pt{ display:flex; align-items:center; gap:8px; font-size:11.5px; padding:6px 8px; border:1px solid var(--line); border-radius:10px; margin-bottom:6px; background:var(--cream-2); }
.gis-quick-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.gis-chip-btn{ flex:1; font-size:12px; padding:9px 6px; }
.gis-chip-btn.on{ background:var(--amber); color:#fff; border-color:var(--amber); }
.gis-search-row{ display:flex; flex-direction:column; gap:2px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; margin-bottom:6px; cursor:pointer; background:var(--paper); font-size:12px; }
.gis-search-row b{ color:var(--navy); font-size:12.5px; }
.gis-search-row span{ color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gis-coord-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px dashed var(--line); }
.gis-coord-row:last-of-type{ border-bottom:none; }
.gis-coord-val{ font-size:13px; font-weight:700; color:var(--navy); text-align:start; }
.gis-pop{ font-family:inherit; font-size:12px; }
.gis-pop-title{ font-weight:800; font-size:13.5px; color:var(--navy); text-align:right; unicode-bidi:plaintext; overflow-wrap:anywhere; padding-inline-end:14px; }
html[dir="ltr"] .gis-pop-title{ text-align:left; }
.gis-pop-sub{ font-size:11px; color:var(--ink-soft); margin-bottom:6px; text-align:right; unicode-bidi:plaintext; }
html[dir="ltr"] .gis-pop-sub{ text-align:left; }
.gis-pop-body{ max-height:230px; overflow-y:auto; overflow-x:hidden; }
.gis-pop-body table{ border-collapse:collapse; width:100%; table-layout:fixed; }
.gis-pop-body col.k{ width:38%; }
.gis-pop-k{ color:var(--ink-soft); padding:3px 0; padding-inline-end:8px; vertical-align:top; overflow-wrap:anywhere; text-align:right; }
html[dir="ltr"] .gis-pop-k{ text-align:left; }
.gis-pop-v{ padding:3px 0; color:var(--ink); overflow-wrap:anywhere; unicode-bidi:plaintext; text-align:right; vertical-align:top; }
html[dir="ltr"] .gis-pop-v{ text-align:left; }
.gis-pop-v.strong{ font-weight:700; color:var(--navy); }
.gis-pop-sep{ padding-top:8px; font-size:11px; font-weight:700; color:var(--ink-soft); border-bottom:1px solid var(--line); text-align:right; }
html[dir="ltr"] .gis-pop-sep{ text-align:left; }
.gis-pop-actions{ display:flex; gap:6px; margin-top:10px; }
.gis-pop-actions .btn{ flex:1; padding:8px 4px; font-size:12px; white-space:nowrap; }
.gis-text-label{ background:none; border:none; }
.gis-text-label span{ display:inline-block; white-space:nowrap; font-size:11px; font-weight:700; transform-origin:0 0; text-shadow:0 0 3px #000, 0 0 2px #000; unicode-bidi:plaintext; }
.gis-pt-name span{ transform:translate(7px, -16px); }
.gis-labels-off .gis-text-label{ display:none; }
.gis-poly-name{ direction:ltr; }
.gis-poly-name span{ position:absolute; left:0; top:0; transform:translate(-50%,-50%); color:#fff; font-size:12px; font-weight:900; text-shadow:0 0 3px #000, 0 0 2px #000, 0 0 1px #000; }
.gis-sheet-text span{ color:#EDEDED !important; font-weight:500; font-size:10px; opacity:.85; }
/* أدوات GIS — التحرير والرفع الميداني */
.gis-field-start{ margin:-4px 0 12px; border:1.5px dashed var(--amber); color:var(--navy); font-weight:800; }
.gis-edit-card{ border-color:var(--amber); }
.gis-edit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.gis-edit-grid label{ display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:700; color:var(--ink-soft); min-width:0; }
.gis-edit-grid label.wide, .gis-edit-grid .wide{ grid-column:1 / -1; }
.gis-edit-grid input{ font-size:13px; padding:8px; min-width:0; }
.gis-pop-edit{ margin-top:6px; padding:7px; font-size:12px; border-color:var(--amber); color:var(--navy); font-weight:800; }
.gis-danger-btn{ color:var(--rust); border-color:var(--rust-bg); }
.gis-new-pin{ width:30px; height:30px; border-radius:50%; background:#E85D1F; color:#fff; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:900; line-height:1; }
.gis-picking{ cursor:crosshair; }
.gis-draw-stats{ margin-top:8px; padding:8px 10px; border-radius:10px; background:var(--cream, #FBF7EF); }
.gis-undo-btn{ font-size:12px; padding:8px; border-style:dashed; color:var(--navy); font-weight:800; }

/* زرار "شاهد شرح الخدمة" — بيظهر بس لو الأدمن حط لينك فيديو للخدمة */
.service-video-btn{display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; padding:8px 14px 8px 12px; border:1px solid var(--amber); border-radius:999px; background:var(--paper); color:var(--amber-dark); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;}
.service-video-btn:active{background:var(--rust-bg);}
.service-video-btn .svb-play{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--amber); color:#fff; font-size:9px; padding-inline-start:2px; box-sizing:border-box;}

/* خدمات GNSS */
.home-service-tile.hst-wide{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:12px; }
.home-service-tile.hst-wide .hst-icon{ margin-bottom:0; }
.gnss-formats{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:8px 12px; }
.gnss-formats summary{ font-size:12.5px; font-weight:700; color:var(--navy); cursor:pointer; }
.gnss-formats-body{ font-size:11.5px; color:var(--ink-soft); line-height:1.8; margin-top:6px; white-space:pre-line; }
.gnss-summary{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:12px; line-height:1.9; color:var(--ink); }
.gnss-summary b{ color:var(--navy); }

/* بوصلة القبلة */
.qibla-status{ text-align:center; font-size:13px; font-weight:700; color:var(--navy); min-height:20px; margin:4px 0 8px; }
.qibla-status.qibla-ok{ color:#1F8A4C; }
.qibla-dial-wrap{ max-width:300px; margin:0 auto; border-radius:50%; transition:box-shadow .25s; }
.qibla-dial-wrap.qibla-aligned{ box-shadow:0 0 0 4px rgba(31,138,76,.35), 0 0 22px rgba(31,138,76,.45); }
.qibla-svg{ width:100%; height:auto; display:block; }
.qd-ring{ fill:var(--navy); }
.qd-face{ fill:var(--paper); }
.qd-major{ stroke:var(--navy); stroke-width:2; }
.qd-minor{ stroke:var(--ink-faint); stroke-width:1; }
.qd-num{ font-size:10px; fill:var(--ink-soft); text-anchor:middle; dominant-baseline:central; font-family:sans-serif; }
.qd-card{ font-size:15px; font-weight:800; fill:var(--navy); text-anchor:middle; dominant-baseline:central; }
.qd-card.qd-north{ fill:#D93A1E; }
.qd-inter{ font-size:10px; font-weight:700; fill:var(--ink-soft); text-anchor:middle; dominant-baseline:central; }
.qd-qline{ stroke:#1F8A4C; stroke-width:3; stroke-linecap:round; }
.qd-kbg{ fill:#1F8A4C; }
.qd-kaaba{ font-size:16px; text-anchor:middle; }
.qd-hub{ fill:var(--navy); }
.qd-pointer{ fill:#D93A1E; }
.qibla-info{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:12.5px; line-height:1.9; color:var(--ink); margin-top:14px; }
.qibla-info b{ color:var(--navy); }

/* Reality Capture — عارض سحابة النقاط */
.pc-canvas-wrap{ position:relative; height:62vh; min-height:300px; border-radius:12px; overflow:hidden; background:#1b2433; touch-action:none; }
.pc-canvas{ width:100% !important; height:100% !important; display:block; }
.pc-view-btns{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:8px; z-index:2; }
.pc-view-btns .cp-map-fab{ position:static; }
.pc-result{ background:var(--paper); border:1px solid var(--line); border-top:none; padding:8px 10px; font-size:12px; line-height:1.8; color:var(--navy); min-height:18px; text-align:center; }

/* DTM تقريبي */
.dtm-accuracy{ background:#FFF6E0; border:1px solid #F0C36D; color:#7A5200; border-radius:10px; padding:8px 10px; font-size:11.5px; line-height:1.75; margin-bottom:10px; }
.dtm-map-wrap{ position:relative; height:52vh; min-height:280px; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.dtm-map{ position:absolute; inset:0; }
.dtm-map-btns{ position:absolute; top:10px; right:10px; z-index:500; display:flex; flex-direction:column; gap:8px; }
.dtm-map-btns .cp-map-fab{ position:static; }
.dtm-hint{ text-align:center; font-size:12px; font-weight:700; color:var(--navy); margin:6px 0; min-height:16px; }
.dtm-vlabel{ background:rgba(0,0,0,.65); color:#fff; border:none; box-shadow:none; font-size:10px; padding:1px 5px; }
.dtm-note{ font-size:11.5px; color:#7A5200; margin-bottom:8px; }
.dtm-stats{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:12.5px; line-height:1.9; color:var(--ink); }
.dtm-stats b, .dtm-verts b{ color:var(--navy); }
.dtm-legend{ display:flex; align-items:center; gap:8px; font-size:11px; margin:10px 0; direction:ltr; }
.dtm-legend-bar{ flex:1; height:10px; border-radius:5px; background:linear-gradient(to right, rgb(30,90,200), rgb(0,180,210), rgb(70,190,80), rgb(245,215,50), rgb(200,50,40)); }
.dtm-verts{ font-size:12px; }
.dtm-verts table{ width:100%; border-collapse:collapse; margin-top:4px; }
.dtm-verts th, .dtm-verts td{ border:1px solid var(--line); padding:3px 6px; text-align:center; }

/* ============ مجتمع SURVO ============ */
.cm-topbar-link{ cursor:pointer; font-size:12px; font-weight:700; color:var(--navy); white-space:nowrap; }
.cm-card,.cm-post,.cm-answer{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px; margin-bottom:10px; }
.cm-card{ cursor:pointer; }
.cm-card:active{ background:var(--cream-2); }
.cm-card-top{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:6px; }
.cm-cat{ font-size:10.5px; font-weight:700; color:var(--ink-soft); background:var(--cream-2); border-radius:20px; padding:2px 9px; }
.cm-solved{ font-size:10.5px; font-weight:700; color:var(--green); background:var(--green-bg); border-radius:20px; padding:2px 9px; }
.cm-hidden{ font-size:10.5px; font-weight:700; color:var(--red); background:var(--rust-bg); border-radius:20px; padding:2px 9px; }
.cm-title{ font-size:14px; font-weight:800; color:var(--navy); line-height:1.45; }
.cm-post-title{ font-size:16px; font-weight:800; color:var(--navy); line-height:1.5; margin-bottom:6px; }
.cm-excerpt{ font-size:12px; color:var(--ink-soft); margin-top:4px; line-height:1.6; white-space:pre-wrap; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cm-has-image{ font-size:11px; color:var(--ink-faint); margin-top:4px; }
.cm-card-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:9px; gap:8px; }
.cm-answers-count{ font-size:12px; font-weight:700; color:var(--ink-soft); white-space:nowrap; }
.cm-author{ display:flex; align-items:center; gap:6px; min-width:0; font-size:11.5px; }
.cm-avatar{ width:24px; height:24px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.cm-avatar-letter{ display:inline-flex; align-items:center; justify-content:center; background:var(--navy-fill); color:#fff; font-weight:700; font-size:11px; }
.cm-author-name{ font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-verified{ color:var(--green); font-size:11px; }
.cm-time{ color:var(--ink-faint); white-space:nowrap; }
.cm-body{ font-size:13px; color:var(--ink); line-height:1.75; margin-top:9px; white-space:pre-wrap; word-break:break-word; }
.cm-image{ display:block; max-width:100%; max-height:320px; border-radius:10px; margin-top:10px; border:1px solid var(--line); cursor:zoom-in; }
.cm-actions{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:10px; font-size:12px; }
.cm-link{ cursor:pointer; color:var(--ink-soft); font-weight:700; }
.cm-danger{ color:var(--red); }
.cm-accept-link{ color:var(--green); }
.cm-like{ cursor:pointer; border:1px solid var(--line); border-radius:20px; padding:3px 11px; color:var(--ink-soft); }
.cm-like.on{ background:var(--navy-fill); border-color:var(--navy-fill); color:#fff; }
.cm-like-static{ cursor:default; }
.cm-answer-accepted{ border-color:var(--green); box-shadow:0 0 0 1px var(--green) inset; }
.cm-accepted-badge{ font-size:11px; font-weight:800; color:var(--green); margin-bottom:6px; }
.cm-hint{ font-size:11.5px; color:var(--ink-soft); margin:-4px 0 10px; }
.cm-empty{ text-align:center; color:var(--ink-soft); font-size:13px; padding:28px 10px; }
.cm-empty-small{ padding:14px 10px; }
.cm-answer-form{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.cm-answer-form textarea{ width:100%; box-sizing:border-box; }
.cm-attach-row{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.cm-attach-btn{ font-size:12px; padding:7px 12px; cursor:pointer; }
.cm-upload-status{ font-size:12px; color:var(--ink-soft); }
.cm-img-preview{ position:relative; display:inline-block; margin-top:8px; }
.cm-img-preview img{ max-width:160px; max-height:120px; border-radius:8px; border:1px solid var(--line); display:block; }
.cm-img-remove{ position:absolute; top:-8px; left:-8px; width:22px; height:22px; border-radius:50%; background:var(--red); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* ============ حساب الكميات ============ */
.vol-status{ font-size:11.5px; margin:4px 0 10px; line-height:1.6; }
.vol-error{ color:var(--red); }
.vol-stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.vol-stat{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:10px; }
.vol-stat-label{ font-size:11px; font-weight:700; color:var(--ink-soft); }
.vol-stat-value{ font-size:17px; font-weight:800; color:var(--navy); margin-top:2px; direction:ltr; text-align:right; }
.vol-stat-value small{ font-size:11px; font-weight:700; color:var(--ink-soft); }
.vol-stat.vol-cut{ border-color:#DC2626; background:#FEF2F2; }
.vol-stat.vol-cut .vol-stat-value{ color:#B91C1C; }
.vol-stat.vol-fill{ border-color:#2563EB; background:#EFF6FF; }
.vol-stat.vol-fill .vol-stat-value{ color:#1D4ED8; }
.vol-sub{ font-size:11.5px; color:var(--ink-soft); line-height:1.8; margin:8px 0; }
.vol-canvas{ display:block; width:100%; background:var(--paper); border:1px solid var(--line); border-radius:12px; margin-top:6px; }
.vol-legend{ display:flex; flex-wrap:wrap; gap:14px; font-size:11.5px; color:var(--ink-soft); margin-top:6px; align-items:center; }
.vol-legend > span{ display:inline-flex; align-items:center; gap:5px; }
.vol-sw{ display:inline-block; width:12px; height:12px; border-radius:3px; }
.vol-sw-cut{ background:rgba(220,38,38,0.8); }
.vol-sw-fill{ background:rgba(37,99,235,0.8); }

/* ===== مشهد الرئيسية ثلاثي الأبعاد (js/32-home-hero.js): درون + GNSS + ليزر سكانر ===== */
.home-hero{ position:relative; height:200px; border-radius:18px; overflow:hidden; background:#1B2430; margin:2px 0 16px; }
.home-hero canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.home-hero-hud{ position:absolute; top:10px; left:12px; right:12px; display:flex; justify-content:space-between; gap:6px; direction:ltr; font-family:'IBM Plex Mono',monospace; font-size:10px; color:rgba(255,255,255,.78); pointer-events:none; }
.home-hero-hud b{ color:#F06A2C; font-weight:500; }
.home-hero-rec{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#F06A2C; margin-right:5px; animation:heroBlink 1.2s infinite; }
@keyframes heroBlink{ 50%{ opacity:.2; } }
/* لو الموبايل مايدعمش WebGL خالص: اللوجو بيرجع مكانه زي الأول */
.home-hero.no-webgl{ display:none; }


/* ===== الوضع الليلي (js/31-theme.js) — بيقلب متغيرات الألوان، ومعاها الألوان الثابتة القليلة
   المكتوبة جوه الصفحات والسكريبتات (اتجمعت بالبحث في index.html و js/*.js) ===== */
html[data-theme="dark"]{
  color-scheme:dark;
  --navy:#E8ECF1; --navy-2:#C9D1DA; --navy-3:#8C98A6; --navy-fill:#2C3846;
  --amber-dark:#FF8A50;
  --cream:#0F1419; --cream-2:#1C2530; --paper:#18202A;
  --ink:#E8ECF1; --ink-soft:#A3ADB9; --ink-faint:#7A8592; --line:#2A3542;
  --green:#4CC38A; --green-bg:#16301F; --rust:#F08A55; --rust-bg:#2B1D16; --red:#F0645A;
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 6px 20px rgba(0,0,0,0.35);
}
html[data-theme="dark"] body{ background:#0A0E12; }
html[data-theme="dark"] .phone{ background:#05080B; }
html[data-theme="dark"] .home-hero{ background:#0A0F15; }
html[data-theme="dark"] .guest-cta{ background:#241A13; border-color:#5A3A22; }
html[data-theme="dark"] .guest-preview-banner,
html[data-theme="dark"] .whats-new-banner{ background:#2A1E14; border-color:#5A3A22; color:#FFB27A; }
html[data-theme="dark"] .badge-external-job{ background:#182B44; color:#8DB8F2; }
html[data-theme="dark"] .external-job-box{ background:#141F2D; border-color:#253A55; }
html[data-theme="dark"] .dtm-accuracy{ background:#2A2210; border-color:#5C4A1C; color:#F2C66D; }
html[data-theme="dark"] .dtm-note{ color:#F2C66D; }
html[data-theme="dark"] .vol-stat.vol-cut{ background:#2B1416; border-color:#7A2B2B; }
html[data-theme="dark"] .vol-stat.vol-cut .vol-stat-value{ color:#FF8A8A; }
html[data-theme="dark"] .vol-stat.vol-fill{ background:#132238; border-color:#2D4F8A; }
html[data-theme="dark"] .vol-stat.vol-fill .vol-stat-value{ color:#8DB8F2; }
html[data-theme="dark"] .qibla-status.qibla-ok{ color:#4CC38A; }
html[data-theme="dark"] .cp-marker-label{ color:#FF7A7A; }
html[data-theme="dark"] .gis-draw-stats{ background:var(--cream-2); }
html[data-theme="dark"] .guest-prompt-card{ background:var(--paper); }
/* خلفيات فاتحة مكتوبة inline في الصفحات والكروت اللي بتتبني بالسكريبت */
html[data-theme="dark"] [style*="background:#fff;"], html[data-theme="dark"] [style*="background:#fff\""],
html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background:#FFF"],
html[data-theme="dark"] [style*="background:white"]{ background:var(--paper) !important; }
/* شريط نتيجة القياس تحت لوحة الكاد (كان أبيض ونصه فاتح في الليلي فالنتيجة مش باينة) */
html[data-theme="dark"] [style*="background:rgba(255,255,255,0.92)"]{ background:rgba(24,32,42,0.94) !important; }
html[data-theme="dark"] [style*="background:#FCEFDD"], html[data-theme="dark"] [style*="background:#FFF3D6"]{ background:#2A2112 !important; }
html[data-theme="dark"] [style*="background:#FDECEA"], html[data-theme="dark"] [style*="background:#FDE3E3"],
html[data-theme="dark"] [style*="background:#FCEAEA"]{ background:#2B1618 !important; }
html[data-theme="dark"] [style*="background:#E9F7EF"], html[data-theme="dark"] [style*="background:#E7F8EF"]{ background:#14281D !important; }
html[data-theme="dark"] [style*="background:#E9EEF7"]{ background:#162235 !important; }
html[data-theme="dark"] [style*="color:#a06a00"]{ color:#F2C66D !important; }
html[data-theme="dark"] [style*="border-color:#B7E8CC"]{ border-color:#2E5A40 !important; }
/* الخرايط والرسومات (Leaflet/الكاد) بتفضل بألوانها — بس عناصر تحكم Leaflet نفسها تبقى غامقة */
html[data-theme="dark"] .leaflet-bar a, html[data-theme="dark"] .leaflet-control-layers{ background:var(--paper); color:var(--ink); border-color:var(--line); }
html[data-theme="dark"] .leaflet-popup-content-wrapper, html[data-theme="dark"] .leaflet-popup-tip{ background:var(--paper); color:var(--ink); }
.theme-toggle-btn svg{ width:18px; height:18px; display:block; }

/* ===== مشهد شاشة الدخول (js/36-login-hero.js): كرة أرضية + أقمار GNSS، واللوجو صغير تحتها ===== */
.login-hero{ position:relative; height:210px; border-radius:18px; overflow:hidden; background:#1B2430; margin:6px 0 0; }
.login-hero canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.login-hero.no-webgl, .login-hero.no-webgl + .login-logo-badge{ display:none; }
html[data-theme="dark"] .login-hero{ background:#0A0F15; }
.login-logo-badge{ display:flex; justify-content:center; margin:-38px 0 8px; position:relative; }
.login-logo-badge .logo-img{ width:76px; height:76px; border-radius:20px; background-size:contain; background-repeat:no-repeat; background-position:center; box-shadow:0 6px 18px rgba(0,0,0,.35); }