/* Wasett portal — shared styles (same tokens as the operator screen) */
:root{
  /* «النور الهادئ» — نفسُ الأسماء، قيمُ اللوحةِ الجديدة (Soft.dc.html) */
  --navy:#6D4AC9; --navy-2:#523397; --amber:#A25D14; --amber-2:#9A5712;
  --green:#1C7C60; --blue:#3869C9; --red:#C0392B; --purple:#6D4AC9;
  --ink:#211C33; --muted:#6A6382;
  --line:#EFEAFA; --bg:#FAF8FF;
  --card:#FFFFFF; --soft:#F7F4FF;
  --gl:#FFFFFF; --gl2:#F7F4FF;
  --glb:#EFEAFA; --glb2:#E4DDF5;
  --vio:#6D4AC9; --vio2:#6D4AC9; --blu:#3869C9; --blu2:#3869C9;
  --mnt:#1C7C60; --mnt2:#1C7C60; --tx:#211C33; --tx2:#5C5473; --tx3:#6A6382;}
html{color-scheme:light}
*{box-sizing:border-box}
/* الهالاتُ نفسُها التي خلفَ الصفحةِ العامّة، ساكنةً هنا: شاشةُ عملٍ تُقرأُ
   ساعةً، والحركةُ خلفَ الجدولِ تُتعِبُ العينَ ولا تُفيدُها. وطبقةٌ سالبةٌ
   على body لا وسمٌ يُضافُ في كلِّ صفحة. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(520px 520px at 92% -6%, rgba(230,222,255,.75), transparent 64%),
    radial-gradient(440px 440px at -8% 42%, rgba(217,242,233,.8), transparent 64%),
    radial-gradient(420px 420px at 96% 88%, rgba(255,231,214,.7), transparent 64%)}
html,body{margin:0;padding:0}
body{font-family:"Alexandria",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif;font-weight:300;background:var(--bg);color:var(--ink);
     font-size:15px;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--blue)}
header.top{background:rgba(250,248,255,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid #EBE6F7;color:var(--ink);padding:0 24px;display:flex;align-items:center;gap:18px;min-height:62px;
           position:sticky;top:0;z-index:20;}
header.top .brand{font-size:23px;font-weight:600;letter-spacing:.2px;white-space:nowrap;text-decoration:none;color:#211C33;display:inline-flex;align-items:center;gap:8px}
/* الاسمُ بلونٍ واحدٍ في كلِّ باب. كان هنا ‎var(--amber)‎ وحدَه بينما تَكتبُه
   الصفحةُ العامّةُ وصفحةُ الدخولِ حِبراً — فاختلفَ الاسمُ بينَ صفحةٍ وصفحة،
   وكان الكهرمانيُّ على خلفيّةِ «النور الهادئ» ٣٫٩ إلى ١: دونَ الحدّ. */
header.top .brand span{color:#211C33}
/* the handshake — the same mark as the deck cover, on every door */
.brand img.logo{height:30px;width:auto;display:inline-block;vertical-align:middle}
.topbar .brand{display:inline-flex;align-items:center;gap:8px}
header.top .role{font-size:12.5px;color:var(--tx3);margin-inline-start:-8px;white-space:nowrap}
nav.tabs{display:flex;gap:2px;flex-wrap:wrap;margin-inline-start:auto}
nav.tabs a{color:var(--tx2);text-decoration:none;padding:10px 16px;border-radius:999px;font-size:14.5px;font-weight:400;opacity:1}
nav.tabs a:hover{background:var(--soft);color:var(--ink)}
nav.tabs a.on{background:var(--vio);color:#fff}
.userbox{display:flex;align-items:center;gap:10px;font-size:13px}
.bell{position:relative;background:none;border:0;color:#211C33;cursor:pointer;font-size:18px;padding:6px 8px;border-radius:8px}
.bell:hover{background:var(--soft)}
.bell .n{position:absolute;top:0;inset-inline-end:0;background:var(--red);color:#fff;border-radius:999px;font-size:10px;
         font-weight:800;padding:0 5px;line-height:16px}
main.wrap{max-width:1180px;width:100%;margin:24px auto 60px;padding:0 20px;flex:1}
footer.foot{background:transparent;border-top:1px solid #EBE6F7;color:var(--tx3);font-size:12.5px;padding:18px 24px;text-align:center}
footer.foot a{color:var(--vio2);text-decoration:none}
h1{font-size:24px;margin:0 0 6px}
h2{font-size:17px;margin:0 0 4px}
h3{font-size:15px;margin:0 0 6px}
.hint{color:var(--muted);font-size:13px;margin:0 0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:0 10px 34px rgba(33,28,51,.05);padding:20px 22px;margin-bottom:16px}
.card.tight{padding:14px 16px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr} nav.tabs a{padding:8px 10px;font-size:13px}}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:0 0 16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 26px rgba(33,28,51,.04);padding:14px 16px}
.stat .k{font-size:12px;color:var(--muted);font-weight:600}
.stat .v{font-size:22px;font-weight:800;margin-top:2px;direction:ltr;text-align:end;font-variant-numeric:tabular-nums}
.stat .v small{font-size:12px;color:var(--muted);font-weight:600}
.stat.accent{border-color:#F0D9A6;background:#FFF0E2}
.stat.accent .v{color:#A25D14}
/* an amount the company is already behind on — the tile a lender reads first */
.stat.bad{border-color:#F5C6C0;background:#FDECEA}
.stat.bad .v{color:#C0392B}
.stat.good{border-color:#BFE3D2;background:#E2F6EE}
.stat.good .v{color:#1C7C60}
.stat.blue{border-color:#CADDF0;background:#EAF1FB}
.stat.blue .v{color:#3869C9}
label{display:block;font-size:13px;font-weight:500;margin-bottom:5px;color:var(--tx2)}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid #EFEAFA;border-radius:8px;font:inherit;font-size:14px;background:#fff;
  color:var(--ink);-webkit-text-fill-color:var(--ink);caret-color:var(--vio2)}
/* والإكمالُ التلقائيُّ في كروم يَفرِضُ سطحَه ونصَّه بأسلوبِه هو: أزرقُ
   فاتحٌ ونصٌّ أسود. يُغطّى بظلٍّ داخليٍّ داكنٍ ويُفرَضُ لونُ النصّ. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  transition:background-color 9999s ease-out 0s}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--vio2);outline-offset:-1px;border-color:var(--vio2);background:#fff}
input::placeholder,textarea::placeholder{color:var(--tx3)}
/* قائمةُ select تُرسَمُ بألوانِ النظام، فتَخرُجُ خياراتُها بيضاءَ على أبيض */
select option{background:#fff;color:var(--ink)}
::selection{background:#EFE9FF}
input[type=checkbox]{width:auto;margin-inline-end:6px;accent-color:var(--vio);-webkit-text-fill-color:initial}
.field{margin-bottom:12px}
/* Latin digits always: the page is lang="ar" and an Arabic font's `locl`
   feature would otherwise draw 0-9 as ٠-٩, so the same date reads
   ٠١/٠٣/٢٠٢٦ here and 01/03/2026 on the next machine. */
.num,.mono,.dt{font-feature-settings:"locl" 0;font-variant-numeric:lining-nums tabular-nums}
.dt{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.num{direction:ltr;text-align:start;font-variant-numeric:tabular-nums;white-space:nowrap;unicode-bidi:embed}
[dir=rtl] .num{text-align:left}
button,.btn{font:inherit;font-weight:500;border:0;border-radius:999px;padding:11px 26px;cursor:pointer;background:var(--vio);color:#fff;
            text-decoration:none;display:inline-block;line-height:1.4;
            box-shadow:0 10px 30px rgba(109,74,201,.24);transition:transform .16s,box-shadow .16s,background .16s}
button:hover,.btn:hover{background:var(--navy-2);transform:translateY(-1px);box-shadow:0 14px 32px rgba(109,74,201,.22)} button:disabled{opacity:.5;cursor:default}
.btn.ghost,button.ghost{background:#fff;color:var(--ink);border:1px solid var(--glb2);box-shadow:none}
.btn.ghost:hover,button.ghost:hover{background:var(--soft);box-shadow:none}
.btn.go,button.go{background:var(--green);color:#fff;box-shadow:0 10px 26px rgba(31,138,107,.24)}
.btn.amber,button.amber{background:var(--amber);color:#fff;box-shadow:0 10px 26px rgba(184,106,23,.24)}
.btn.danger,button.danger{background:var(--red);color:#fff;box-shadow:0 10px 26px rgba(192,57,43,.24)}
.btn.sm,button.sm{padding:6px 12px;font-size:13px;border-radius:7px}
.btn.link,button.link{background:none;color:var(--blu2);padding:0;border:0;font-weight:500;box-shadow:none}
.btn.link:hover,button.link:hover{transform:none;box-shadow:none;text-decoration:underline}
.chip{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.ok{background:#E2F6EE;color:var(--green)} .no{background:#FDECEA;color:var(--red)}
.wait{background:#FFF0E2;color:#A25D14} .info{background:#EAF1FB;color:var(--blue)} .grey{background:#F2EFFA;color:var(--tx2)}
.violet{background:#EFE9FF;color:var(--purple)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
th{background:#fff;font-size:12px;color:var(--tx3);font-weight:500;letter-spacing:.2px}
tr.click{cursor:pointer} tr.click:hover td{background:#fff}
.tablewrap{overflow-x:auto}
.empty{color:var(--muted);text-align:center;padding:28px 10px;font-size:14px}
.flag{background:#FFF7EE;border:1px solid #F3E2CB;border-radius:8px;padding:10px 12px;font-size:13px;color:#A25D14;margin-bottom:12px}
.err{background:#FDECEA;border:1px solid #F5C6C0;color:#C0392B;border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:12px;line-height:1.7}
.proof{background:#E2F6EE;border:1px solid #BFE3D2;color:#1C7C60;border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:12px;line-height:1.7}
.note{background:#EAF1FB;border:1px solid #CADDF0;color:#3869C9;border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:12px;line-height:1.7}
.hide{display:none!important}
/* زرُّ الواتساب — نفسُ شكلِه في الصفحةِ العامّة، في كلِّ لوحة.
   وأخضرُ واتسابَ يبقى أخضرَ واتساب: لونُ الزرِّ جزءٌ من التعرُّفِ عليه،
   ولو صُبغ ببنفسجيِّ المنصّةِ لَصار زرّاً مجهولاً. */
.wa{position:fixed;bottom:22px;inset-inline-end:22px;z-index:60;
    /* أخضرُ واتساب نفسُه ورمزُه أبيض: العلامةُ كما يَعرفُها الناس. */
    width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;
    display:flex;align-items:center;justify-content:center;text-decoration:none;
    box-shadow:0 12px 32px rgba(37,211,102,.46);transition:transform .18s,box-shadow .18s}
.wa:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(37,211,102,.6)}
/* و#toast يقفُ في الزاويةِ المقابلة، فلا يَتزاحمان */
.spin{display:inline-block;width:14px;height:14px;border:2px solid #EBE6F7;border-top-color:currentColor;border-radius:50%;
      animation:sp .8s linear infinite;vertical-align:-2px;margin-inline-end:6px}
@keyframes sp{to{transform:rotate(360deg)}}
/* stepper */
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 18px}
.steps .s{flex:1;min-width:110px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12.5px;color:var(--muted);text-align:center}
.steps .s.done{border-color:#BFE3D2;background:#E2F6EE;color:var(--green);font-weight:700}
.steps .s.now{border-color:var(--vio);background:#EFE9FF;color:var(--vio);font-weight:800}
.steps .s.bad{border-color:#F5C6C0;background:#FDECEA;color:var(--red);font-weight:700}
/* documents */
.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
/* A checklist has sections, and the screen shows them: the group's name runs
   across the whole grid with its own count beside it, so a contractor can see
   at a glance which of the five are done. */
.docgroup{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;
  margin:10px 0 -4px;padding-bottom:5px;border-bottom:1px solid #CADDF0}
.docgroup .t{font-weight:800;font-size:13px;color:var(--ink)}
.docgroup:first-child{margin-top:0}
/* The projects list, filled in place of an uploaded spreadsheet. */
/* ثلاثُ حالاتٍ للصفّ، وكانت ثلاثةَ ألوان: سليمٌ، ورقمٌ لا يُمكِنُ أن يصحّ،
   ورقمٌ يَحتاجُ سبباً. وقعَتِ الثلاثةُ على لونٍ واحدٍ بعدَ التحويل، فصارَ
   المشروعُ المُشكِلُ لا يُفرَّقُ من السليمِ على الشاشة. وعادَ الفرق، ومعه
   شريطٌ على الحافّةِ يُرى من طَرَفِ العينِ قبلَ أن يُقرأَ سطر. */
.projrow{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;
  background:#fff;border-inline-start:4px solid var(--line)}
.projrow.bad{border-color:#F5C6C0;background:#FDECEA;border-inline-start-color:#C0392B}
.derived{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;padding-top:10px;
  border-top:1px dashed #CADDF0;font-size:12.5px;color:var(--muted)}
.derived b{color:var(--ink);font-weight:700}
.derived.bad{border-top-color:#F5C6C0}
.drop{border:1.5px dashed var(--glb2);border-radius:12px;padding:14px;background:var(--gl);backdrop-filter:blur(12px);transition:.15s;position:relative}
.drop.has{border-style:solid;border-color:var(--green);background:#E2F6EE}
.drop.req::after{content:"مطلوب";position:absolute;top:8px;inset-inline-start:10px;font-size:10.5px;font-weight:800;color:#3869C9;background:#EAF1FB;padding:1px 7px;border-radius:999px}
.drop.has.req::after{content:"مستوفٍ";color:var(--green);background:#E2F6EE}
[dir=ltr] .drop.req::after{content:"Required"} [dir=ltr] .drop.has.req::after{content:"Complete"}
.drop .t{font-weight:700;font-size:14px;margin-top:6px} .drop .d{font-size:12px;color:var(--muted);margin-top:3px;min-height:16px}
.drop ul{list-style:none;margin:8px 0 0;padding:0;font-size:12.5px}
.drop li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-top:1px dashed #EFEAFA;align-items:center}
.drop li a{color:var(--blue);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop input[type=file]{display:none}
.drop .pick{margin-top:8px}
/* لوحةٌ أُجيب عنها: تبقى ظاهرة ليرى العميل ما قاله، وتفقد نبرة السؤال. */
.docwarn.answered{border-color:#BFE3D2;background:#E2F6EE}
.docwarn.answered .t{color:var(--green)}

/* سؤالٌ على صفّ مشروع: ليس خطأً في رقم بل رقمٌ يحتاج سبباً. كهرماني كلوحة
   المستندات، لأنه من جنسها — النظام يسأل والعميل يجيب والملف يمضي. */
.projrow.asked{border-color:#F0D9A6;background:#FFF0E2;border-inline-start-color:#C98A33}
/* عقد المشروع، على صفّه — see paintContract */
.pcontract{margin-top:10px;border-top:1px dashed #EFEAFA;padding-top:8px}
.pcontract .t{font-weight:600;font-size:12.5px;color:var(--tx2);margin-bottom:2px}
.pcontract.missing .t{color:#3869C9}
.pcontract ul.pdocs{margin:4px 0 0;padding:0;list-style:none;font-size:12.5px}
.pcontract ul.pdocs li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:3px 0;border-top:1px dashed #EFEAFA}
/* ========================================================================
   الطريقُ السريعُ إلى قائمةِ المشاريع — خطوتان تُرَيانِ من بعيد.
   «something very very clear to grab the client's eye» — ٢٨ أكتوبر ٢٠٢٦
   ====================================================================== */
.twoway{display:flex;align-items:stretch;gap:14px;margin:16px 0 8px;
  background:linear-gradient(135deg,#F3EEFF 0%,#EAF1FB 100%);
  border:1px solid #DCD2F6;border-radius:18px;padding:16px}
.twoway .step{flex:1;display:flex;align-items:center;gap:12px;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:13px 15px;
  box-shadow:0 6px 18px rgba(33,28,51,.05)}
.twoway .n{flex:0 0 32px;height:32px;border-radius:50%;background:var(--vio);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.twoway .tx{flex:1;min-width:0}
.twoway .tx b{display:block;font-size:14.5px;color:var(--ink);font-weight:700;line-height:1.5}
.twoway .tx span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.55}
.twoway .arrow{display:flex;align-items:center;justify-content:center;
  color:var(--vio);font-size:24px;font-weight:800;flex:0 0 22px}
.twoway .btn,.twoway button{padding:10px 18px;font-size:13.5px}
.orline{text-align:center;font-size:12.5px;color:var(--muted);margin:0 0 12px}
/* وعلى الجوّال تَنزِلُ الخطوتان تحتَ بعضِهما والسهمُ يَدورُ معهما */
@media(max-width:760px){
  .twoway{flex-direction:column;gap:10px}
  .twoway .arrow{transform:rotate(-90deg);flex:0 0 auto;height:18px}
}
.projask{margin-top:10px;border-top:1px dashed #EFEAFA;padding-top:8px}
.projask.hide{display:none}
.projask ul{margin:0 0 6px;padding:0;list-style:none;font-size:12.5px;color:#A25D14}
/* علامة الاستفهام تأتي بعد الجملة لا قبلها — فالسؤال يُقرأ ثم يُستفهم عنه،
   وعلامةٌ في أوّل السطر تبدو رمزَ تعداد لا علامةَ سؤال. */
.projask li{padding:2px 0;line-height:1.55}
.projask li::after{content:"\061F";font-weight:800}
/* ملفٌّ لم يُقرأْ منه حرف — لا أخضرَ ولا أحمر. رمادي.
   THE GREEN CARD AND THE GREEN «Complete» BADGE WERE SHOWN OVER AN AUDITED
   FINANCIAL STATEMENT SITTING IN THE COMMERCIAL-REGISTRATION SLOT, because the
   file was an image, nothing could read it, and the verdict said pass. The
   colour is not decoration here: it is the sentence the eye reads first, and
   it was saying «checked» about a file nobody checked.
   Grey is the whole point — the same grey the risk dashboard paints an
   unmeasured appetite line, for the same reason. Green is a claim; grey is the
   absence of one. These rules come BEFORE .warned so that a slot holding both
   an unread file and a questioned one wears the louder badge. */
.drop.has.unverified{border-color:#CADDF0;background:#EAF1FB}
.drop.has.req.unverified::after{content:"لم يُتحقَّق";color:#3869C9;background:#fff}
[dir=ltr] .drop.has.req.unverified::after{content:"Not verified"}
.drop .small.unread{color:#3869C9;background:#fff;border-radius:8px;padding:7px 9px;line-height:1.55}

/* the amber slot badge also covers a slot still owed a partner's articles */
.drop.has.req.warned::after{content:"بحاجة إلى سبب"}
[dir=ltr] .drop.has.req.warned::after{content:"Needs a reason"}
/* …AND A SLOT STILL OWED A DOCUMENT IS A DIFFERENT THING FROM ONE WHOSE FILE
   WAS QUESTIONED. «بحاجة إلى سبب» asks the client to explain what he uploaded;
   «ينقص» tells him something is not there yet. Wearing one badge for both made
   the second unreadable — see the corporate partners on the articles slot. */
.drop.has.req.owing::after{content:"ينقص";color:#3869C9;background:#EAF1FB}
[dir=ltr] .drop.has.req.owing::after{content:"Missing"}
.projask textarea{width:100%;font:inherit;font-size:13px;padding:8px 10px;border:1px solid #E6CBA4;border-radius:8px;background:#fff;resize:vertical}
/* المستندات الداعمة لصفّ مشروع — قائمة ملفات لا قائمة شروط */
.projask ul.pdocs{margin:6px 0 0;padding:0;list-style:none;font-size:12.5px}
.projask ul.pdocs li{display:flex;gap:8px;align-items:center;padding:3px 0;border-top:1px dashed #EFEAFA}
.projask ul.pdocs a{color:var(--blue);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.projask .said{font-size:12.5px;color:var(--muted);background:#F7F4FF;border-radius:8px;padding:8px 10px}

/* ما يطلبه النظام من كل مستند، معروضاً للعميل قبل أن يرفع. قائمةُ شروطٍ لا
   قائمةُ ملفات، فلها شكلها الخاص: لا خطّ فاصل بين البنود ولا توزيعٌ على
   الطرفين — وإلا قرأها بوصفها ملفات مرفوعة. */
.drop ul.asks{margin:8px 0 0;padding:0;font-size:12px;color:var(--muted)}
.drop ul.asks li{display:block;border-top:0;padding:2px 0 2px 0;position:relative;padding-inline-start:14px;line-height:1.55}
.drop ul.asks li::before{content:"‹";position:absolute;inset-inline-start:0;color:var(--blue);font-weight:800}
[dir=ltr] .drop ul.asks li::before{content:"›"}

/* timeline */
.tl{list-style:none;margin:0;padding:0;border-inline-start:2px solid var(--line)}
.tl li{position:relative;padding:2px 0 12px 0;padding-inline-start:16px;font-size:13px}
.tl li::before{content:"";position:absolute;inset-inline-start:-7px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--blue);border:2px solid #EFEAFA}
.tl .t{color:var(--muted);font-size:11.5px;direction:ltr;display:inline-block}
/* rules */
.rules td:first-child{width:28px}
.rule-ok{color:var(--green);font-weight:800} .rule-no{color:var(--red);font-weight:800}
/* toast + modal */
#toast{position:fixed;bottom:22px;inset-inline-start:22px;z-index:99;display:flex;flex-direction:column;gap:8px}
.toast{background:#211C33;color:#fff;padding:12px 18px;border-radius:14px;font-size:13.5px;box-shadow:0 12px 32px rgba(33,28,51,.22);max-width:420px}
.toast.bad{background:#C0392B}
.toast.good{background:#1C7C60}
.modal-bg{position:fixed;inset:0;background:rgba(33,28,51,.34);backdrop-filter:blur(3px);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:#fff;border:1px solid var(--line);border-radius:22px;max-width:640px;width:100%;max-height:90vh;overflow:auto;padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.verdict{border-radius:14px;padding:18px 22px;margin-bottom:16px;color:#211C33;border:1px solid var(--glb)}
/* أبيضُ على أخضرَ فاتحٍ نسبتُه ١٫٨ إلى ١ — يُقرأُ بالكاد. فالغلالةُ تَحمِلُ
   اللونَ والنصُّ يَبقى فاتحاً فوقَ الداكن. */
.verdict.pass{background:#E2F6EE;border-color:#BFE3D2}
.verdict.pass h2{color:#1C7C60}
.verdict.fail{background:#FDECEA;border-color:#F5C6C0}
.verdict.fail h2{color:#C0392B}
.verdict.awaiting_documents{background:#EAF1FB;border-color:#CADDF0;color:#211C33}
.verdict.awaiting_documents h2{color:#3869C9}
.verdict h2{font-size:22px;margin:0 0 4px;color:inherit} .verdict p{margin:0;opacity:.92;font-size:14px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13.5px}
.kv b{color:var(--tx3);font-weight:500}
.copy{font-family:Consolas,monospace;direction:ltr;text-align:left;background:#F2EFFA;border-radius:8px;padding:8px 10px;font-size:13px;word-break:break-all}
.bar{height:8px;background:#EFEAFA;border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--green)}
.pill-list{display:flex;gap:6px;flex-wrap:wrap}
.pill-list label{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:600;cursor:pointer;background:#fff;margin:0}
.pill-list input{margin:0}
.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:22px 0 10px}
.section-title h2{margin:0}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.mono{font-family:Consolas,monospace;direction:ltr;unicode-bidi:embed}

/* A FILE THE THREE-PAGE SCREEN QUESTIONED — kept, not refused.
   Amber, never red: the upload succeeded and the client is being asked a
   question, not told to go away. See src/policy.js screenUpload. */
/* لوحةُ سؤالٍ عن مستند. كانت كهرمانيّةً فجعلَها محوِّلي زرقاءَ كـ‎.note‎
   تماماً — فصارَ السؤالُ يُشبِهُ الملاحظةَ العابرة، ولا يُميَّزُ منها. */
.docwarn{margin-top:8px;padding:10px 12px;border-radius:10px;
  background:#FFF0E2;border:1px solid #F0D9A6;color:#A25D14;font-size:13px}
.docwarn .t{font-weight:700;margin-bottom:4px}
.docwarn ul{margin:0 0 8px;padding-inline-start:18px}
.docwarn textarea{width:100%;margin:4px 0 6px;font:inherit;padding:6px 8px;
  border:1px solid #E6CBA4;border-radius:8px;background:#fff}
/* a slot carrying a questioned file, or still owed a document, is not
   "Complete" — see docwarn and the partner articles on the AOA slot */

/* --- شريط تفعيل البريد ---------------------------------------------------
   كهرمانيٌّ لا أحمر: الحسابُ سليمٌ وليس فيه عطل، وإنّما بقيت خطوةٌ واحدة.
   والأحمرُ في هذه المنصّةِ محجوزٌ لِما يُرَدّ. */
.verifybar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#FFF0E2;border-bottom:1px solid #F0D9A6;color:#8A4F12;
  padding:11px 20px;font-size:14px;font-weight:500}
.verifybar button{background:#A25D14;color:#fff;border:0;border-radius:999px;
  padding:7px 14px;font:inherit;font-size:13px;cursor:pointer}
.verifybar button:disabled{opacity:.5;cursor:default}

/* ===========================================================================
   لوحةُ العميل — «i want to get better shape and more simple and clear»
   ---------------------------------------------------------------------------
   الشاشةُ كانت تَعرضُ سبعَ عشرةَ بطاقةً دفعةً واحدة، متساوياتٍ في الثِّقَلِ
   البصريّ، وفوقَ كلِّ واحدةٍ شروطُها الثلاثةُ أو الأربعة. وثلاثةٌ منها فقط
   تُقدَّمُ بها الطلب — والعميلُ لا يعرفُ ذلك، فيرى جداراً ويُغلِق.
   ولم يُحذَفْ شيء. أُجِّل: المطلوبُ أوّلاً، والبقيّةُ مطويّةٌ تُفتَحُ بضغطة،
   والشروطُ خلفَ سطرٍ صغير — وتُفتَحُ وحدَها حين يكونُ في الخانةِ إشكال.
   =========================================================================== */

/* شريطُ التقدّم: رقمٌ واحدٌ يُقرأُ من بعيد، لا أربعةُ كسورٍ رماديّة */
.prog2{margin:2px 0 18px}
.prog2 .bar{height:9px;border-radius:999px;background:#EAF1FB;overflow:hidden}
.prog2 .bar i{display:block;height:100%;border-radius:999px;background:var(--green);
  transition:width .45s cubic-bezier(.4,0,.2,1)}
.prog2 .bar i.part{background:var(--amber)}
.prog2 .lab{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-bottom:7px;font-size:13.5px;flex-wrap:wrap}
.prog2 .lab b{font-size:15px}
.prog2 .lab .r{color:var(--muted);font-size:12.5px}

/* الكتلةُ الأولى: ما يُقدَّمُ به الطلبُ فعلاً */
.firstthree{border:1px solid #CADDF0;background:#EAF1FB;border-radius:14px;
  padding:16px 16px 6px;margin:0 0 18px}
.firstthree > .t{font-weight:800;font-size:14.5px;color:#3869C9;margin:0 0 3px}
.firstthree > .d{font-size:13px;color:var(--muted);margin:0 0 14px;line-height:1.7}
.firstthree.done{border-color:#BFE3D2;background:#E2F6EE}
/* بطاقةٌ داخلَ حقلٍ ملوَّن: سطحُها يُرسَمُ لا يُستَعار */
.firstthree .drop,.fold .drop{background:#fff}
.firstthree.done > .t{color:var(--green)}

/* مجموعةٌ تُطوى. والعنوانُ زرٌّ — لا سطرٌ يُظَنُّ أنّه زينة */
.fold{grid-column:1/-1;margin:14px 0 0}
.fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:#fff;font-weight:800;font-size:13.5px;color:var(--ink)}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary:hover{border-color:#CADDF0;background:#EAF1FB}
.fold > summary .caret{transition:transform .2s;color:var(--muted);font-size:11px}
.fold[open] > summary .caret{transform:rotate(90deg)}
[dir=rtl] .fold > summary .caret{transform:scaleX(-1)}
[dir=rtl] .fold[open] > summary .caret{transform:scaleX(-1) rotate(90deg)}
.fold > summary .n{margin-inline-start:auto;font-weight:700;font-size:12.5px;color:var(--muted)}
.fold > summary .n.ok{color:var(--green)}
.fold > summary .n.warn{color:#3869C9}
.fold .inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:12px;padding:14px 2px 2px}

/* البطاقاتُ متساويةُ الارتفاعِ وزرُّها في القاع — فلا تبقى فجواتٌ في الشبكة.
   و margin-top:auto على محورِ العمودِ الرئيسيّ لا يُلغي التمدّد، بخلافِ
   margin:auto على المحورِ العرضيّ الذي أطاحَ بأقسامِ الصفحةِ العامّةِ مرّة. */
.drop{display:flex;flex-direction:column}
.drop > .pick, .drop > button.pick{margin-top:auto}

/* الشروطُ خلفَ سطرٍ صغير */
.drop details.asksfold{margin:2px 0 8px}
.drop details.asksfold > summary{list-style:none;cursor:pointer;font-size:12px;
  color:var(--blue);font-weight:700;padding:2px 0}
.drop details.asksfold > summary::-webkit-details-marker{display:none}
.drop details.asksfold ul.asks{margin-top:6px}

@media(max-width:760px){
  .fold .inner{grid-template-columns:1fr}
  .firstthree{padding:14px 13px 4px}
}

/* أوّلُ شاشةٍ بعدَ التسجيل: دعوةٌ واحدةٌ واضحة، لا سطرٌ رماديٌّ في فراغ */
.start{text-align:center;padding:34px 20px 30px}
.start h3{font-size:19px;margin:0 0 6px;color:var(--ink)}
.start > p{color:var(--muted);margin:0 0 16px;font-size:14.5px}
.start ul{list-style:none;margin:0 auto 22px;padding:0;max-width:430px;text-align:start}
.start li{padding:10px 14px;border:1px solid var(--line);border-radius:10px;
  background:#EAF1FB;margin-bottom:8px;font-weight:600;font-size:14px;
  display:flex;align-items:center;gap:10px}
.start li::before{content:"";flex:0 0 9px;height:9px;border-radius:50%;background:var(--amber)}
.start .btn, .start button{padding:12px 26px;font-size:15px}
.start p.fine{color:var(--muted);font-size:12.5px;margin:18px auto 0;max-width:480px;line-height:1.75}

/* الترويسةُ على عرضِ الجوال.
   ---------------------------------------------------------------------------
   header.top صفٌّ مرنٌ بلا flex-wrap، فعلى ٣٩٠ بكسلاً كان صندوقُ المستخدم
   يَخرجُ من الشاشةِ تسعةً وأربعين بكسلاً: زرُّ الخروجِ واسمُ المستخدمِ
   والجرسُ خارجَ الحافّة، لا يُرى ولا يُضغَط. وأكثرُ من يُسجّلُ في منصّةٍ
   كهذه يُسجّلُ من جواله. */
@media(max-width:760px){
  header.top{flex-wrap:wrap;padding:10px 14px;gap:10px 12px;row-gap:8px}
  header.top .role{display:none}
  nav.tabs{order:3;width:100%;margin-inline-start:0;
    overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  nav.tabs::-webkit-scrollbar{display:none}
  nav.tabs a{white-space:nowrap}
  .userbox{margin-inline-start:auto;gap:7px;font-size:12px}
  .userbox > span{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}