/* ============================================================================
   Golden Host — مساحة التسويق
   الهيكل والمقاسات من tokens.css في حزمة التسليم.
   اللوحة أُعيد ضبطها على تشبّع منخفض ودرجات ورقية دافئة — شاشة عمل يومي
   تُقرأ ساعات، لا صفحة تسويقية تُرى دقيقة.
   ============================================================================ */

/* خطوط ثمانية — من ملفاتها الرسمية ومخدومة من خادمنا.
   ثمانية نفسها تبني هويتها على **السيريف** في العناوين والـSans في الواجهة،
   فهذا ما نتبعه: Serif Display للعنوان الكبير، Serif Text للعناوين المتوسطة،
   و Sans لكل ما هو زرّ وحقل ورقم — لأن السيريف يفقد وضوحه تحت 16px.
   ⚠ الترخيص يمنع إعادة نشر الملفات؛ التطبيق مغلق خلف تسجيل دخول. */
@font-face{font-family:'Thmanyah Sans';font-weight:300;font-display:swap;
  src:url('fonts/thmanyahsans-Light.woff2') format('woff2')}
@font-face{font-family:'Thmanyah Sans';font-weight:400;font-display:swap;
  src:url('fonts/thmanyahsans-Regular.woff2') format('woff2')}
@font-face{font-family:'Thmanyah Sans';font-weight:500 600;font-display:swap;
  src:url('fonts/thmanyahsans-Medium.woff2') format('woff2')}
@font-face{font-family:'Thmanyah Sans';font-weight:700;font-display:swap;
  src:url('fonts/thmanyahsans-Bold.woff2') format('woff2')}
@font-face{font-family:'Thmanyah Sans';font-weight:900;font-display:swap;
  src:url('fonts/thmanyahsans-Black.woff2') format('woff2')}

@font-face{font-family:'Thmanyah Serif';font-weight:400;font-display:swap;
  src:url('fonts/thmanyahseriftext-Regular.woff2') format('woff2')}
@font-face{font-family:'Thmanyah Serif';font-weight:500 600;font-display:swap;
  src:url('fonts/thmanyahseriftext-Medium.woff2') format('woff2')}
@font-face{font-family:'Thmanyah Serif';font-weight:700 900;font-display:swap;
  src:url('fonts/thmanyahseriftext-Bold.woff2') format('woff2')}

@font-face{font-family:'Thmanyah Display';font-weight:500 600;font-display:swap;
  src:url('fonts/thmanyahserifdisplay-Medium.woff2') format('woff2')}
@font-face{font-family:'Thmanyah Display';font-weight:700 900;font-display:swap;
  src:url('fonts/thmanyahserifdisplay-Bold.woff2') format('woff2')}

:root{
  --font:'Thmanyah Sans',system-ui,sans-serif;
  --serif:'Thmanyah Serif','Thmanyah Sans',serif;
  --display:'Thmanyah Display','Thmanyah Serif',serif;

  --ink:#0d0d0e; --accent:#c8632b; --navy:#0d0d0e; --magenta:#c8632b; --pink:#c8632b; --violet:#7a8c7f;
  --bg:#efebe4; --surface:#fff; --sub:#faf8f3; --mute:#eee9df; --badge:#ebe5d9;
  --border:#e0d9cc; --border-l:#ebe5da; --divider:#efe9de; --dashed:#ddd7ca;
  --head-border:#e2dbcd; --dot:#e0dacd;
  --text:#0d0d0e; --body:#3a3b37; --muted:#7a8c7f; --faint:#6e6f68; --meta:#6e6f68;

  --ok-bg:#eaf1ec; --ok:#2e6b4f; --ok-s:#2e6b4f;
  --late-bg:#fbeeea; --late:#b3261e;
  --warn-bg:#f7f1e3; --warn-soft:#fbf7ee; --warn-border:#e6dcc3; --warn:#8a6a1f;
  --disabled:#ded9cd;
  --wa:#2e6b4f; --wa-bg:#eaf1ec; --wa-border:#d3e2d8; --wa-fg:#2e6b4f;

  --sh-card:0 1px 2px rgba(11,11,12,.05), 0 6px 16px -14px rgba(11,11,12,.30);
  --sh-hover:0 2px 4px rgba(11,11,12,.06), 0 12px 24px -16px rgba(11,11,12,.35);
  --sh-cta:0 6px 16px -12px rgba(11,11,12,.5);
  --sh-modal:0 24px 60px -28px rgba(11,11,12,.45);
  --max:1060px; --shell:100%; --rail:230px;
}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
html,body{margin:0;padding:0;background:var(--bg);font-family:var(--font);color:var(--body);font-size:15.5px;line-height:1.8}
body{direction:rtl}
[dir="ltr"]{direction:ltr;text-align:left}
button,input,textarea,select{font-family:inherit}
a{color:var(--magenta);text-decoration:none}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#d6d0c2;border-radius:9px}

@keyframes rvUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rvPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes rvPopIn{0%{opacity:0;transform:scale(.82)}60%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes rvDash{to{stroke-dashoffset:-28}}
@keyframes rvGlow{0%{box-shadow:0 0 0 0 rgba(168,70,126,.20)}70%{box-shadow:0 0 0 10px rgba(168,70,126,0)}100%{box-shadow:0 0 0 0 rgba(168,70,126,0)}}
@keyframes rvFlame{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(3deg)}}
@keyframes rvConfetti{0%{opacity:0;transform:translateY(-6px) rotate(0)}25%{opacity:1}100%{opacity:0;transform:translateY(38px) rotate(220deg)}}
.rise{animation:rvUp .35s ease both}
.lift{transition:transform .18s ease,box-shadow .18s ease}
.lift:hover{transform:translateY(-3px);box-shadow:var(--sh-hover)}
.btn{transition:transform .14s ease,filter .14s ease;cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce),print{*{animation:none!important;transition:none!important}}

/* ── الرأس ─────────────────────────────────────────────────────────────── */
.top{background:var(--navy);color:#fff}
.top-in{max-width:none;margin:0;padding:13px 26px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo{flex:none;display:flex;align-items:center;justify-content:center;line-height:0}
.top-t{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.top-t b{font-size:14px;font-weight:700}
.top-t span{font-size:10.5px;color:#a9b8ac}
.bar{position:sticky;top:0;z-index:20;background:rgba(243,242,238,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--head-border)}
.bar-in{max-width:none;margin:0;padding:12px 26px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.avatar{flex:none;width:36px;height:36px;border-radius:11px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700}
.avatar.mg{background:var(--magenta)}
.crumb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.crumb b{font-size:15.5px;font-weight:700;color:var(--text)}
.crumb span{font-size:11px;color:var(--muted)}
/* الهيكل: شريط المعاينة على اليمين (بداية السطر في RTL) والمحتوى بجانبه.
   الشريط ملتصق أثناء التمرير فلا يضيع منه التبديل بين الحسابات. */
.shell{max-width:none;width:100%;margin:0;display:flex;align-items:flex-start;gap:20px;padding:18px 26px 70px}
.wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
.rail{flex:none;width:var(--rail);position:sticky;top:72px;display:flex;flex-direction:column;gap:7px;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:var(--sh-card)}
.rail-h{font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--faint);padding:2px 4px 4px}
.rail-i{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border-radius:11px;
  border:1px solid transparent;background:transparent;text-align:right;cursor:pointer}
.rail-i:hover{background:var(--sub)}
.rail-i.on{background:var(--sub);border-color:var(--border);box-shadow:inset 3px 0 0 0 var(--magenta)}
.rail-av{flex:none;width:30px;height:30px;border-radius:9px;background:var(--badge);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.rail-i.on .rail-av{background:var(--navy);color:#fff}
.rail-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.rail-t b{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-t span{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-n{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:7px;background:var(--late-bg);color:var(--late);
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700}
.rail-note{font-size:9.5px;line-height:1.7;color:var(--faint);padding:6px 5px 2px;border-top:1px solid var(--divider);margin-top:4px}
/* شريط تنبيه دائم: من السهل جداً أن تنسى أنك داخل حساب غيرك */
.asbar{background:var(--warn-bg);border-bottom:1px solid var(--warn-border);color:var(--warn)}
.asbar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:9px 18px;font-size:12px;font-weight:600}
.asbar button{padding:6px 13px;border:1px solid var(--warn-border);border-radius:9px;background:#fff;
  color:var(--warn);font-size:11.5px;font-weight:700}
@media(max-width:960px){
  /* الجوال كان يمتدّ أعرض من الشاشة: `.shell` تحمل align-items:flex-start،
     وقلبُها إلى عمود يجعل `.wrap` تنكمش على محتواها فتتمدّد لأعرض ابنٍ فيها
     وتفقد `.scroll-x` قيدَها. القياس: ٩٦٨px على شاشة ٣٧٥ — ٢٫٦ ضعف. */
  .shell{flex-direction:column;gap:12px;align-items:stretch}
  .wrap,.rail{min-width:0;max-width:100%}
  .rail{width:100%;position:static;flex-direction:row;overflow-x:auto;align-items:center}
  .rail-h,.rail-note{display:none}
  .rail-i{width:auto;flex:none}
}

/* ── عناصر عامة ────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:18px}
.pad{padding:18px 20px}
.h{font-size:16.5px;font-weight:700;color:var(--text)}
.sub{font-size:12.5px;color:var(--muted);line-height:1.7}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.col{display:flex;flex-direction:column}
.chip{flex:none;padding:8px 13px;border-radius:999px;cursor:pointer;font-size:12.5px;font-weight:600;white-space:nowrap;border:1px solid var(--border);background:#fff;color:var(--body)}
.chip.on{border-color:var(--navy);background:var(--navy);color:#fff}
.chip.dark{border:1px solid rgba(255,255,255,.28);background:transparent;color:#a9b8ac}
.chip.dark.on{border-color:#fff;background:#fff;color:var(--navy)}
.pill{padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700}
.pill.dept{background:var(--navy);color:#fff}
.pill.due{background:var(--badge);color:var(--muted)}
.pill.due.late{background:var(--late-bg);color:var(--late)}
.cta{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(100deg,var(--navy),var(--magenta));color:#fff;font-size:14px;font-weight:700;cursor:pointer;box-shadow:var(--sh-cta)}
.cta[disabled]{background:var(--disabled);color:var(--muted);cursor:not-allowed;box-shadow:none}
.ghost{padding:11px 15px;border:1px solid var(--dashed);border-radius:10px;background:#fff;color:var(--navy);font-size:13px;font-weight:700;cursor:pointer}
.wa-btn{display:flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--wa-border);border-radius:8px;background:var(--wa-bg);color:var(--ok);font-size:10.5px;font-weight:700;cursor:pointer}
.inp,.ta{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:11px;font-size:14.5px;color:var(--text);outline:none;background:#fff}
.ta{line-height:1.85;resize:none}
.inp:focus,.ta:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,114,171,.16)}
.lbl{font-size:12.5px;font-weight:600;color:var(--body)}
.step{font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--faint)}
.msg{padding:12px 15px;border-radius:11px;font-size:13px;font-weight:600}
.msg.bad{background:var(--late-bg);color:var(--late)}
.msg.good{background:var(--ok-bg);color:var(--ok)}
.empty{padding:34px 22px;text-align:center;font-size:12.5px;color:var(--muted);background:var(--sub);border-radius:13px}

/* ── لوحة المدير ───────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:12px}
.stat{background:#fff;border:1px solid var(--border);border-radius:15px;padding:16px 18px;display:flex;flex-direction:column;gap:5px}
.stat b{font-size:26px;font-weight:700;line-height:1}
.stat span{font-size:11px;color:var(--muted);font-weight:700}
.stat i{font-size:11px;color:var(--muted);font-style:normal}
table{width:100%;min-width:640px;border-collapse:collapse}
th{padding:12px 14px;text-align:right;font-size:12px;font-weight:700;color:var(--muted);background:var(--sub)}
td{padding:13px 14px;font-size:13.5px;color:var(--body);border-top:1px solid var(--divider)}
.scroll-x{overflow-x:auto}

/* ── لوحة المسار ───────────────────────────────────────────────────────── */
.canvas{position:relative;width:100%;min-width:820px;aspect-ratio:928/250;background-image:radial-gradient(var(--dot) 1.1px,transparent 1.1px);background-size:19px 19px;border-radius:13px}
.canvas.emp{min-width:760px}
.canvas svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.node{position:absolute;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:12px;background:#fff;border:1px solid var(--border);cursor:pointer;text-align:right;box-shadow:0 6px 16px -12px rgba(36,30,122,.32)}
.node.on{border:2px solid var(--navy);box-shadow:var(--sh-hover)}
.node.hot{border:1.5px solid var(--magenta);animation:rvGlow 2.6s ease-out infinite}
.node .ic{flex:none;width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.node .tx{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.node .tx b{font-size:11px;font-weight:700;line-height:1.3;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.node .tx span{font-size:9px;line-height:1.3;color:var(--meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.node .cnt{position:absolute;top:-8px;left:-6px;min-width:21px;height:21px;padding:0 5px;border-radius:7px;color:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700}
.node .pin{position:absolute;top:-9px;right:10px;padding:2px 8px;border-radius:999px;color:#fff;font-size:9px;font-weight:700;white-space:nowrap}
.node.mine{background:var(--late-bg);border:2px solid var(--magenta);flex-direction:column;justify-content:center;gap:4px;animation:rvGlow 2.6s ease-out infinite}
.node.plain{cursor:default;flex-direction:column;justify-content:center;gap:4px;text-align:center}
.node.plain .tx{align-items:center}

/* ── بطاقات المهام ─────────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,196px),1fr));gap:13px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:15px;padding:19px 20px;border-radius:18px;cursor:pointer;text-align:right;background:#fff;border:1px solid var(--border);box-shadow:var(--sh-card)}
.tile.on{background:#f0ede5;border:2px solid var(--navy);box-shadow:0 14px 30px -18px rgba(36,30,122,.55)}
.tile .ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
.tile .n{font-size:30px;font-weight:700;line-height:1;letter-spacing:-.02em}
.tile b{font-size:16px;font-weight:700;color:var(--text)}
.tile span{font-size:12px;color:var(--muted)}
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.task{display:flex;flex-direction:column;gap:11px;padding:17px 18px;border-radius:16px;background:#fff;border:1px solid var(--border);box-shadow:var(--sh-card);border-right:4px solid var(--violet);animation:rvUp .3s ease both}
.task.late{border-right-color:var(--magenta)}
.task.done{border-right-color:var(--ok-s)}
.task .title{border:none;background:none;padding:0;text-align:right;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.task .title b{font-size:16.5px;font-weight:700;line-height:1.6;color:var(--text)}
.task .title span{font-size:10.5px;font-weight:700;color:var(--magenta)}
.why{padding:13px 15px;background:var(--sub);border-right:3px solid var(--violet);border-radius:10px;font-size:13.5px;line-height:1.85;color:var(--body)}
.why b{color:var(--text)}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.spec{padding:9px 11px;border:1px solid var(--border-l);border-radius:9px;display:flex;flex-direction:column;gap:2px;min-width:0}
.spec span{font-size:11.5px;font-weight:600;color:var(--faint)}
.spec b{font-size:13px;font-weight:600;color:var(--body)}
.drop{display:flex;align-items:center;gap:6px;max-width:100%;padding:5px 10px;border:1px solid var(--border-l);border-radius:999px;background:var(--sub);font-size:10.5px;font-weight:600;color:var(--text)}
.drop em{font-style:normal;color:var(--magenta);font-weight:700}
.warn{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:10px;font-size:10.5px;line-height:1.7;font-weight:600;color:var(--warn)}
.cheer{position:relative;overflow:hidden;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;background:var(--ok-bg);border:1px solid #d3e2d8;font-size:11.5px;font-weight:700;color:var(--ok);animation:rvPopIn .4s cubic-bezier(.3,1.4,.5,1) both}
.open-cta{width:100%;padding:13px;border:none;border-radius:11px;font-size:13px;font-weight:700;cursor:pointer;background:var(--mute);color:var(--body)}
.open-cta.ready{background:linear-gradient(100deg,var(--navy),var(--magenta));color:#fff;box-shadow:var(--sh-cta)}
.open-cta.done{background:var(--ok-bg);color:var(--ok)}
.open-cta.blocked{background:var(--warn-bg);color:var(--warn)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid var(--divider);font-size:12px;color:var(--muted)}
.foot b{font-size:11.5px;font-weight:700;color:var(--magenta)}

/* ── لوحة النقاط ───────────────────────────────────────────────────────── */
.hero{background:var(--navy);border-radius:20px;padding:22px 24px;color:#fff;display:flex;align-items:center;gap:18px;flex-wrap:wrap;position:relative;overflow:hidden}
/* الزخرفة الدائرية خلف الأسطح الكحلية — مطلقة دائماً، وإلا دفعت المحتوى
   بارتفاعها الكامل وتركت فراغاً في الصفحة. */
.deco{position:absolute;pointer-events:none;top:-120px;left:-80px;opacity:.28}
.hero .deco{width:260px;height:260px}
.hero .t{position:relative;flex:1;min-width:220px;display:flex;flex-direction:column;gap:7px}
.hero .kicker{font-size:11px;font-weight:700;letter-spacing:.14em;color:#dce5de}
.hero h1{margin:0;font-size:23px;font-weight:700;line-height:1.4}
.hero .rl{font-size:12.5px;line-height:1.8;color:#a9b8ac}
.hero .box{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:15px 20px;background:rgba(255,255,255,.09);border-radius:13px}
.hero .box b{font-size:27px;font-weight:700;line-height:1}
.hero .box span{font-size:10.5px;color:#a9b8ac}
.score{position:relative;overflow:hidden;background:var(--navy);border-radius:18px;padding:20px 22px;display:flex;flex-direction:column;gap:16px;color:#fff}
.score .deco{top:auto;bottom:-150px;left:-70px;width:280px;height:280px;opacity:.3}
.trophy{padding:6px 12px;border-radius:999px;font-size:11px;font-weight:700;background:rgba(255,255,255,.07);color:#a9b8ac;border:1px solid rgba(255,255,255,.14)}
.trophy.on{background:rgba(245,184,220,.18);color:#dce5de;border-color:rgba(245,184,220,.45);animation:rvPopIn .45s cubic-bezier(.3,1.4,.5,1) both}

/* ── النوافذ ───────────────────────────────────────────────────────────── */
.veil{position:fixed;inset:0;background:rgba(28,24,60,.46);z-index:44}
.modal-w{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;padding:16px;pointer-events:none}
.modal{pointer-events:auto;width:min(760px,95vw);max-height:calc(100vh - 32px);overflow-y:auto;background:#fff;border-radius:20px;box-shadow:var(--sh-modal);display:flex;flex-direction:column;animation:rvPop .25s ease both}
.modal-h{flex:none;padding:20px 24px;background:var(--navy);color:#fff;border-radius:20px 20px 0 0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;position:relative;overflow:hidden}
.modal-h .deco{top:-92px;left:-60px;width:190px;height:190px;opacity:.3}
.modal-h h2{margin:0;font-size:21px;font-weight:700;line-height:1.45}
.modal-h .meta{font-size:12.5px;color:#a9b8ac}
.x{position:relative;flex:none;width:32px;height:32px;border:none;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:14px;cursor:pointer}
.modal-b{flex:1;padding:20px 24px;display:flex;flex-direction:column;gap:18px}
.modal-f{flex:none;padding:18px 24px 22px;background:var(--sub);border-top:1px solid var(--divider);border-radius:0 0 20px 20px;display:flex;flex-direction:column;gap:12px}
.deliver-box{padding:14px;background:var(--sub);border:1px dashed var(--dashed);border-radius:12px;display:flex;flex-direction:column;gap:11px}
.file-row{display:flex;align-items:center;gap:9px;padding:9px 11px;background:#fff;border:1px solid var(--border-l);border-radius:9px}
.file-row .ic{flex:none;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:var(--badge);color:var(--violet)}
.file-row b{flex:1;min-width:0;font-size:11.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm{flex:none;width:22px;height:22px;border:none;border-radius:7px;background:var(--badge);color:var(--faint);font-size:11px;cursor:pointer}

/* ── سلسلة التسليم في نافذة المهمة الجديدة ───────────────────────────── */
.chain{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;padding:13px;background:var(--sub);border:1px solid var(--border-l);border-radius:12px}
.chain-step{flex:1;min-width:118px;display:flex;flex-direction:column;gap:3px;padding:9px 11px;border-radius:10px;background:#fff;border:1px solid var(--border-l);text-align:center}
.chain-step.on{border:2px solid var(--magenta);background:var(--late-bg)}
.chain-step .rolen{font-size:10px;font-weight:700;color:var(--faint)}
.chain-step b{font-size:12px;font-weight:700;color:var(--text)}
.chain-step span{font-size:10px;color:var(--meta)}
.chain-step.none b{color:var(--late)}
.arrowx{flex:none;align-self:center;padding:0 6px;color:var(--violet);font-size:14px;font-weight:700}

/* ── الدخول ────────────────────────────────────────────────────────────── */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--navy)}
.login .box{width:min(400px,94vw);background:#fff;border-radius:20px;padding:30px 28px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--sh-modal)}
.login h1{margin:0;font-size:20px;font-weight:700;color:var(--text)}
.login p{margin:0;font-size:12px;color:var(--muted)}

@media(max-width:560px){
  .shell{padding:14px 12px 60px}
  .specs{grid-template-columns:1fr}
  .modal-b,.modal-f,.modal-h{padding-left:16px;padding-right:16px}
  button,.chip,.tile{min-height:44px}
}

/* ── لوحة مسار المهمة داخل النافذة ─────────────────────────────────────── */
.task-canvas{min-width:660px}
.tnode{position:absolute;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:12px;
  background:#fff;border:1px solid var(--border);text-align:right;font-family:inherit;
  box-shadow:0 6px 16px -13px rgba(58,52,40,.4);transition:transform .15s ease,box-shadow .15s ease}
.tnode .ic{flex:none;width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.tnode .tx{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.tnode .tx b{font-size:11.5px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tnode .tx span{font-size:9.5px;line-height:1.3;color:var(--meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tnode .pin{position:absolute;top:-9px;right:10px;padding:2px 8px;border-radius:999px;color:#fff;font-size:9px;font-weight:700;white-space:nowrap}
.tnode.done{background:var(--sub);border-color:var(--border)}
.tnode.now{border:2px solid var(--magenta);background:var(--late-bg);animation:rvGlow 2.6s ease-out infinite}
.tnode.target{border:1.5px dashed var(--warn-border);background:var(--warn-soft);cursor:pointer}
.tnode.target:hover{transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(122,100,51,.5)}
.tnode.chosen{border:2px solid var(--warn);background:var(--warn-soft)}
.flow-note{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;background:var(--sub);
  border-radius:11px;font-size:12px;line-height:1.8}
.flow-note .dot{flex:none;width:6px;height:6px;margin-top:8px;border-radius:999px;background:var(--magenta)}

/* ── لوحة ارتفاع الرصيد ────────────────────────────────────────────────── */
.cheer-box{pointer-events:auto;width:min(430px,92vw);background:#fff;border-radius:20px;padding:0 22px 22px;
  box-shadow:var(--sh-modal);display:flex;flex-direction:column;gap:13px;align-items:center;text-align:center;
  animation:rvPopIn .45s cubic-bezier(.3,1.35,.5,1) both}
.cheer-top{position:relative;width:calc(100% + 44px);margin:0 -22px;padding:24px 22px 18px;overflow:hidden;
  background:var(--navy);color:#fff;border-radius:20px 20px 0 0;display:flex;flex-direction:column;align-items:center;gap:7px}
.cheer-top b{font-size:17px;font-weight:700}
.cheer-sub{font-size:11.5px;line-height:1.7;color:#a9b8ac}
.cheer-em{font-size:34px;display:inline-block;animation:rvPopIn .5s cubic-bezier(.3,1.5,.5,1) .1s both}
.conf{position:absolute;top:2px;font-size:13px;animation:rvConfetti 1.5s ease-out both}
.cheer-num{display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap;padding-top:4px}
.cheer-num .old{font-size:16px;font-weight:700;color:var(--faint);text-decoration:line-through}
.cheer-num .arw{color:var(--violet);font-size:14px}
.cheer-num .new{font-size:34px;font-weight:700;line-height:1;color:var(--magenta);
  animation:rvPopIn .5s cubic-bezier(.3,1.6,.5,1) .22s both}
.cheer-num .unit{font-size:12px;color:var(--muted)}
.cheer-num .plus{padding:3px 9px;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-size:11.5px;font-weight:700}
.cheer-bar{width:100%;height:9px;border-radius:6px;background:var(--mute);overflow:hidden}
.cheer-bar span{display:block;height:9px;border-radius:6px;background:linear-gradient(90deg,var(--violet),var(--magenta));
  transition:width .8s cubic-bezier(.3,.9,.3,1)}
.cheer-week{font-size:11.5px;color:var(--muted)}
.cheer-lv{padding:6px 14px;border-radius:999px;background:var(--mute);color:var(--body);font-size:12px;font-weight:700}
.cheer-lv.up{background:var(--late-bg);color:var(--late);animation:rvPopIn .5s cubic-bezier(.3,1.5,.5,1) .35s both}

.cellin{padding:8px 10px;font-size:13px;min-width:96px}
td .sub{display:block;font-size:10px;color:var(--late)}

/* ── لوحة الترتيب ──────────────────────────────────────────────────────── */
.lead{position:relative;display:flex;flex-direction:column;gap:7px;padding:13px 14px;
  background:rgba(255,255,255,.07);border-radius:13px}
.lead-h{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:#a9b8ac}
.lead-r{display:flex;align-items:center;gap:10px}
.lead-r.me .lead-nm{color:#fff;font-weight:700}
.lead-n{flex:none;width:19px;height:19px;border-radius:6px;background:rgba(255,255,255,.12);
  color:#dce5de;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.lead-r.me .lead-n{background:#dce5de;color:var(--ink)}
.lead-nm{flex:none;width:150px;font-size:11.5px;color:#a9b8ac;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-b{flex:1;min-width:40px;height:7px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden}
.lead-b span{display:block;height:7px;border-radius:5px;background:linear-gradient(90deg,#dce5de,var(--ink));
  transition:width .7s cubic-bezier(.3,.9,.3,1)}
.lead-p{flex:none;min-width:26px;text-align:left;font-size:11.5px;font-weight:700;color:#fff}

/* ── صفوف الجدول القابلة للضغط ─────────────────────────────────────────── */
.clickrow{cursor:pointer;transition:background .14s ease}
.clickrow:hover{background:var(--sub)}
.clickrow.late td:first-child{box-shadow:inset 3px 0 0 0 var(--magenta)}
.clickrow.late{background:#fdf5f2}
.clickrow.late:hover{background:#fbeee9}

/* ── جدول دفعة المهام ──────────────────────────────────────────────────── */
.bhead,.brow{display:flex;align-items:center;gap:7px}
.bhead{padding:0 2px 2px;font-size:10.5px;font-weight:700;color:var(--faint)}
.brow{padding:5px 2px;border-radius:10px}
.brow:hover{background:var(--sub)}
.bn{flex:none;width:20px;text-align:center;font-size:11px;font-weight:700;color:var(--faint)}
.cheer-why{font-size:11.5px;line-height:1.8;color:var(--muted);padding:0 6px}

.tile.alarm{border:1.5px solid #ecd3cb;background:#fdf5f2}
.tile.alarm.on{border:2px solid var(--late)}

/* ── سلسلة مسار المهمة ─────────────────────────────────────────────────── */
.flowline{display:flex;align-items:center;gap:0;min-width:max-content;padding:26px 14px 20px;
  background-image:radial-gradient(var(--dot) 1.1px,transparent 1.1px);background-size:19px 19px;border-radius:13px}
/* الشارة تعوم فوق العقدة — بلا هذا السطر صارت عنصراً في الصفّ يغطّي الاسم */
.fnode .pin{position:absolute;top:-10px;right:12px;z-index:2;padding:2px 9px;border-radius:999px;
  color:#fff;font-size:9px;font-weight:700;white-space:nowrap;box-shadow:0 4px 10px -6px rgba(46,42,55,.6)}
.fnode{position:relative;display:flex;align-items:center;gap:8px;min-width:142px;max-width:196px;
  padding:9px 11px;border-radius:12px;background:#fff;border:1px solid var(--border);
  box-shadow:0 6px 16px -13px rgba(58,52,40,.4)}
.fnode .fic{flex:none;width:24px;height:24px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;background:var(--badge);color:var(--violet)}
.fnode .ftx{min-width:0;display:flex;flex-direction:column;gap:1px}
.fnode .ftx b{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnode .ftx span{font-size:10.5px;color:var(--meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnode.done{background:var(--sub);border-color:var(--border)}
.fnode.done .fic{background:var(--mute);color:var(--violet)}
.fnode.now{border:2px solid var(--magenta);background:var(--late-bg);animation:rvGlow 2.6s ease-out infinite}
.fnode.now .fic{background:#eee8dd;color:var(--magenta)}
.fnode.wait{opacity:.62}
.fnode.gate{min-width:112px;background:var(--warn-soft);border-color:var(--warn-border)}
.fnode.gate .fic{background:#f2e7cf;color:var(--warn)}
.fnode.gate.done{background:#f4f6f1;border-color:#dbe3d4}
.fnode.gate.done .fic{background:var(--ok-bg);color:var(--ok)}
.fnode.end{min-width:104px}
.farrow{flex:none;width:26px;height:2px;margin:0 4px;border-radius:2px;background:var(--edge,#cbc5b7)}
.farrow.done{background:var(--violet)}
.farrow.wait{background:#e3ded2}

/* ── بنّاء المسار ──────────────────────────────────────────────────────── */
.rchain{display:flex;align-items:center;gap:0;flex-wrap:wrap;padding:11px;background:var(--sub);
  border:1px solid var(--border-l);border-radius:12px}
.rstep{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:10px;background:#fff;
  border:1px solid var(--border);max-width:190px}
.rstep b{font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rstep span.col span{font-size:9.5px;color:var(--meta)}
.rn{flex:none;width:19px;height:19px;border-radius:6px;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.rgate{display:flex;align-items:center;padding:5px 9px;margin:0 6px;border-radius:999px;
  background:var(--warn-soft);border:1px dashed var(--warn-border);color:var(--warn);
  font-size:10px;font-weight:700;white-space:nowrap}
.rend{padding:6px 11px;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-size:10.5px;font-weight:700}

/* ── صندوق الاعتماد ────────────────────────────────────────────────────── */
.approve{display:flex;flex-direction:column;gap:10px;padding:13px;background:var(--warn-soft);
  border:1px solid var(--warn-border);border-radius:12px}
.approve b{font-size:12.5px;color:var(--warn)}
.card.rev{border-right:4px solid var(--warn)}
.card.rev.late{border-right-color:var(--magenta)}
.scratch{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--border-l);
  border-radius:11px;background:var(--sub);font-size:12px;color:var(--body);cursor:pointer}
.scratch input{width:17px;height:17px;accent-color:var(--navy);cursor:pointer}

/* ── النقاط والبونص ────────────────────────────────────────────────────── */
.pill.w{background:var(--badge);color:var(--violet)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.bonus-on{padding:10px 12px;border-radius:11px;background:rgba(159,227,189,.18);
  border:1px solid rgba(159,227,189,.45);color:#e9f1eb;font-size:12px;font-weight:700;line-height:1.8}
.rules{position:relative;font-size:10.5px;line-height:1.9;color:#a6a79f;padding:2px 4px}
.pbar{display:block;height:9px;border-radius:5px;background:var(--mute);overflow:hidden}
.pbar span{display:block;height:9px;border-radius:5px;background:linear-gradient(90deg,#cbb3d6,var(--magenta))}

/* ── كشف النقاط ────────────────────────────────────────────────────────── */
.ledger{position:relative;display:flex;flex-direction:column;gap:8px;padding:13px 14px;
  background:rgba(255,255,255,.07);border-radius:13px}
.led-empty{font-size:11.5px;color:#a9b8ac}
.led-r{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.05)}
.led-r.pen{background:rgba(255,190,190,.10)}
.led-d{flex:none;font-size:10px;color:#a6a79f;min-width:38px}
.led-t{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.led-tags{flex:none;display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.led-g{padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.10);color:#a9b8ac;font-size:9.5px;font-weight:600;white-space:nowrap}
.led-p{flex:none;min-width:30px;text-align:left;font-size:13px;font-weight:700;color:#dce5de}
.led-r.pen .led-p{color:#d8a08e}
@media(max-width:620px){.led-tags{display:none}}

/* ── بطاقات الإحصاء القابلة للضغط ──────────────────────────────────────── */
.stat{cursor:pointer;text-align:right;font-family:inherit;transition:transform .15s ease,box-shadow .15s ease}
.stat:hover{transform:translateY(-2px);box-shadow:var(--sh-hover)}
.stat.on{box-shadow:inset 0 0 0 2px var(--navy)}

/* ── سطر الحالة في رأس المهمة ──────────────────────────────────────────── */
.state{display:flex;flex-direction:column;gap:6px;padding:13px 15px;border-radius:12px;font-size:13px;line-height:1.8}
.state b{font-size:14px;font-weight:700}
.state.go{background:#f0ede5;color:var(--ink);border:1px solid var(--border)}
.state.ok{background:var(--ok-bg);color:var(--ok);border:1px solid #d3e2d8}
.state.wait{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-border)}
.state.warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border)}
.state.bad{background:var(--late-bg);color:var(--late);border:1px solid #eed5cd}
.state-btn{align-self:flex-start;margin-top:4px;padding:9px 15px;border:1px solid currentColor;
  border-radius:10px;background:#fff;color:inherit;font-size:12.5px;font-weight:700}

/* ── بانر الترجيع ──────────────────────────────────────────────────────── */
.reject{display:flex;flex-direction:column;gap:7px;padding:14px 16px;border-radius:12px;
  background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn)}
.reject b{font-size:14px;font-weight:700}
.reject-why{font-size:14px;font-weight:600;line-height:1.85;color:var(--warn);
  padding:9px 12px;background:#fff;border-radius:9px}

/* ── أعمال الفريق ──────────────────────────────────────────────────────── */
.crew{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px}
.crew-c{display:flex;flex-direction:column;gap:10px;padding:15px 16px;border-radius:16px;background:#fff;
  border:1px solid var(--border);box-shadow:var(--sh-card);text-align:right;font-family:inherit;cursor:pointer}
.crew-c.late{border-color:#ecd3cb;box-shadow:inset 3px 0 0 0 var(--magenta),var(--sh-card)}
.crew-c.on{border:2px solid var(--navy)}
.crew-h{display:flex;align-items:center;gap:10px;min-width:0}
.crew-av{flex:none;width:36px;height:36px;border-radius:11px;background:var(--badge);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700}
.crew-c.late .crew-av{background:var(--late-bg);color:var(--late)}
.crew-h b{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crew-h .sub{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crew-n{display:flex;gap:7px}
.cn{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;
  border-radius:10px;background:var(--sub)}
.cn b{font-size:19px;font-weight:700;line-height:1;color:var(--text)}
.cn span{font-size:9.5px;color:var(--muted)}
.cn.bad{background:var(--late-bg)}
.cn.bad b{color:var(--late)}
.crew-now{font-size:11.5px;line-height:1.7;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── نافذة «وش سوّى» ───────────────────────────────────────────────────── */
.fnode.open{cursor:pointer}
.fnode.open:hover{transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(46,42,99,.5)}
.peek-sub{display:flex;flex-direction:column;gap:7px;padding:13px 15px;border-radius:12px;
  background:var(--sub);border:1px solid var(--border-l)}
.peek-sub b{font-size:13px;color:var(--text)}
.peek-note{padding:11px 13px;background:#fff;border-right:3px solid var(--violet);border-radius:10px;
  font-size:13.5px;line-height:1.85;color:var(--body)}

/* ── خريطة الشغل (عُقدها أشخاص) ────────────────────────────────────────── */
.wflow{display:flex;align-items:flex-start;gap:0;min-width:max-content;padding:26px 14px 18px;
  background-image:radial-gradient(var(--dot) 1.1px,transparent 1.1px);background-size:19px 19px;border-radius:13px}
.wflow-t{font-size:14.5px;font-weight:700;color:var(--text)}
.wcol{display:flex;flex-direction:column;gap:8px;min-width:150px}
.wcol-h{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--faint);text-align:center;
  padding:3px 8px;border-radius:999px;background:#fff;border:1px solid var(--border)}
.wnode{position:relative;display:flex;flex-direction:column;gap:5px;padding:11px 12px;border-radius:13px;
  background:#fff;border:1px solid var(--border);text-align:right;font-family:inherit;cursor:pointer;
  box-shadow:0 6px 16px -13px rgba(58,52,40,.4)}
.wnode:hover{transform:translateY(-2px)}
.wnode.on{border:2px solid var(--navy)}
.wnode.late{border-color:#ecd3cb;background:#fdf5f2}
.wnode.idle{opacity:.72}
.wnode.stuck{border:2px solid var(--magenta);animation:rvGlow 2.6s ease-out infinite}
.wnode .pin{position:absolute;top:-10px;right:10px;z-index:2;padding:2px 9px;border-radius:999px;
  color:#fff;font-size:9px;font-weight:700;white-space:nowrap}
.wn-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wn-av{flex:none;width:26px;height:26px;border-radius:8px;background:var(--badge);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.wnode.late .wn-av{background:var(--late-bg);color:var(--late)}
.wn-num{font-size:21px;font-weight:700;line-height:1;color:var(--text)}
.wnode.late .wn-num{color:var(--late)}
.wnode b{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.wn-sub{font-size:10px;color:var(--muted)}
.wnode.late .wn-sub{color:var(--late)}

/* ── كشف النقاط (بطاقة بيضاء) ──────────────────────────────────────────── */
.led-total{font-size:26px;font-weight:700;color:var(--magenta);line-height:1}
.lrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;
  background:var(--sub);border:1px solid var(--border-l)}
.lrow.pen{background:var(--late-bg);border-color:#eed5cd}
.lrow-d{flex:none;font-size:11px;color:var(--faint);min-width:42px}
.lrow-t{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow-tags{flex:none;display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.lrow-g{padding:3px 9px;border-radius:999px;background:#fff;border:1px solid var(--border);
  color:var(--muted);font-size:10.5px;font-weight:600;white-space:nowrap}
.lrow-p{flex:none;min-width:42px;text-align:center;padding:5px 8px;border-radius:9px;
  background:var(--ok-bg);color:var(--ok);font-size:14px;font-weight:700}
.lrow.pen .lrow-p{background:var(--late-bg);color:var(--late)}
.lrules{font-size:11.5px;line-height:1.9;color:var(--faint);padding-top:4px;border-top:1px solid var(--divider)}
@media(max-width:700px){.lrow-tags{display:none}}


/* ── الإشارة: الطينيّ يميّز «الآن» و«المطلوب» ─────────────────────────── */
.cta{background:linear-gradient(100deg,var(--ink),#232326)}
.chip.on{background:var(--ink);border-color:var(--ink)}
.fnode.now,.tnode.now,.wnode.stuck{border-color:var(--accent)!important}
.fnode.now,.tnode.now{background:#fdf3ec}
.fnode.now .pin,.tnode.now .pin,.wnode.stuck .pin{background:var(--accent)!important}
.task .title span{color:var(--accent)}
.foot b{color:var(--accent)}
.rail-i.on{box-shadow:inset 3px 0 0 0 var(--accent)}
.tile.on{border-color:var(--ink)}
.stat.on{box-shadow:inset 0 0 0 2px var(--ink)}
.led-total,.goal-total{color:var(--ink)}
.lrow-p{background:#eef3ef;color:#2e6b4f}
.crew-c.late{box-shadow:inset 3px 0 0 0 var(--late),var(--sh-card)}
.need.go{background:#f2f0ea;color:#0d0d0e}
.state.go{background:#f2f0ea;color:#0d0d0e;border-color:#e5e0d6}
@keyframes rvGlow{0%{box-shadow:0 0 0 0 rgba(194,112,61,.30)}70%{box-shadow:0 0 0 10px rgba(194,112,61,0)}100%{box-shadow:0 0 0 0 rgba(194,112,61,0)}}

/* ════════════════════════════════════════════════════════════════════════
   ضبط اللون — كتلة سوداء واحدة لا ثلاث
   الأسود مرساة الصفحة: الرأس والأزرار الأساسية والشارات. أمّا اللوحات
   الكبيرة (الترحيب والنقاط) فكانت كتلتين سوداوين متتاليتين تُثقلان الشاشة،
   فصارت الأولى متدرّجة قصيرة والثانية بيضاء برقمٍ أسود وحلقة برتقالية.
   ════════════════════════════════════════════════════════════════════════ */
.hero{background:linear-gradient(115deg,#121212 0%,#1e1b16 62%,#2b2118 100%);padding:20px 22px}
.hero h1{font-size:21px}
.hero .box{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12)}

/* لوحة النقاط: بيضاء — الرقم هو البطل لا الخلفية */
.score{background:#fff;color:var(--body);border:1px solid var(--border);box-shadow:var(--sh-card)}
.score .deco{opacity:.06}
.score .h{color:var(--text)!important}
.score .pill{background:var(--mute);color:var(--text)}
.score b{color:var(--text)}
.score .trophy{background:var(--sub);color:var(--muted);border:1px solid var(--border)}
.score .trophy.on{background:#fdf1e8;color:#8a3f12;border-color:#f0d5bf}
.score .bonus-on{background:#eef5f0;border:1px solid #cfe3d6;color:#1f5c3d}

/* البطاقات تُقرأ أسرع */
.task:hover,.crew-c:hover,.goal:hover{box-shadow:var(--sh-hover)}

/* البرتقالي يشتغل فعلاً: اليوم، والتقدّم، والرقم */
.tile.on{border-color:var(--accent);background:#fdf7f2}
.tile.alarm{border-color:#f0cfc7;background:#fdf3f1}
.tile.alarm.on{border-color:var(--late)}
.cta{background:#121212}
.cta:hover{background:#242424}
.pill.dept{background:#121212}
.chip.on{background:#121212;border-color:#121212}
.goal-bar span{background:var(--accent)}
.lrow-p{background:#fdf1e8;color:#8a3f12}
.led-total{color:var(--accent)}

/* الشاشات العريضة: أعمدة أكثر بدل بطاقات ممطوطة */
@media(min-width:1700px){
  .list,.crew,.goals{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .shell{padding-left:34px;padding-right:34px}
}
@media(max-width:620px){.shell{padding:14px 12px 60px}.top-in,.bar-in{padding-left:14px;padding-right:14px}}

/* ══════════════════════════════════════════════════════════════════════
   الجهات والعملاء — اللون علامةُ ملكيّةٍ لا زينة
   الشريطُ الأيمن على البطاقة يأخذ لونَ الجهة، فيفرز الموظّفُ عشرَ مهامٍ
   بنظرةٍ واحدة قبل أن يقرأ عنواناً واحداً.
   ══════════════════════════════════════════════════════════════════════ */
.task{border-right-color:var(--tone,var(--accent))}
.org-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:10.5px;font-weight:700;border:1px solid transparent;white-space:nowrap}
.org-chip i{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.org-chip.big{font-size:11.5px;padding:4px 11px;background:rgba(255,255,255,.16)!important;
  color:#fff!important;border-color:rgba(255,255,255,.25)!important}
.org-chip.big i{box-shadow:0 0 0 2px rgba(255,255,255,.35)}

/* لوحة الهويّة داخل المهمّة */
.idp{border:1px solid var(--border);border-right:4px solid var(--tone);border-radius:14px;overflow:hidden}
.idp-h{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:11px 14px;background:none;border:0;cursor:pointer;font:inherit;text-align:right;color:var(--text)}
.idp-h b{font-size:13px}
.idp-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.idp-warn{background:var(--late);color:#fff;border-radius:999px;padding:2px 8px;font-size:10px;font-weight:700}
.idp-b{display:flex;flex-direction:column;gap:11px;padding:0 14px 14px}
.idp-t{font-size:10.5px;font-weight:700;color:var(--muted)}
.idp-p{font-size:12.5px;color:var(--body);line-height:1.85}
.idp-miss{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:11px;
  background:#fff;border:1px solid var(--late);color:var(--late)}
.idp-miss b{font-size:12.5px}
.idp-miss span{font-size:12px;color:var(--body)}
.idp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px}
.idp-grid>div{display:flex;flex-direction:column;gap:2px;background:#fff;border-radius:10px;padding:8px 10px}
.idp-grid span{font-size:10px;color:var(--muted)}
.idp-grid b{font-size:12px}
.idp-chips{display:flex;flex-wrap:wrap;gap:5px}
.idp-chips span{background:#fff;border:1px solid var(--border);border-radius:8px;padding:4px 9px;font-size:11px}
.sw{display:inline-flex;align-items:flex-end;justify-content:center;width:64px;height:38px;
  border-radius:9px;border:1px solid rgba(0,0,0,.12);padding-bottom:3px}
.sw em{font-size:8.5px;font-style:normal;font-weight:700;background:rgba(255,255,255,.9);
  color:#111;border-radius:4px;padding:1px 4px}
.idp-font{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--border);
  border-radius:9px;padding:7px 11px;font-size:11.5px}
.idp-do{font-size:12px;color:var(--ok);line-height:1.75}
.idp-dont{font-size:12px;color:var(--late);line-height:1.75;font-weight:600}
.idp-note{font-size:11.5px;color:var(--body);background:#fff;border-radius:10px;padding:9px 11px;line-height:1.8}

/* مختار الجهة عند الرفع */
.org-pick{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:11px;
  border:1.5px solid var(--border);background:#fff;cursor:pointer;font:inherit;font-size:12.5px;
  font-weight:600;color:var(--text);transition:.14s}
.org-pick i{width:9px;height:9px;border-radius:50%}
.org-pick:hover{border-color:var(--tone)}
.org-pick.on{border-color:var(--tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 18%,transparent)}
.org-pick.sm{padding:7px 11px;font-size:11.5px}

/* شاشة العملاء */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.cl-own{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:right;
  padding:16px 17px;border-radius:15px;border:1px solid var(--border);border-right:4px solid var(--tone);
  cursor:pointer}
.cl-own b{font-size:14.5px}
.cl-own-n{font-size:26px;font-weight:800;line-height:1.2;color:var(--tone)}
.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.cl-card{display:flex;flex-direction:column;gap:9px;padding:15px 16px;border-radius:14px;
  background:var(--sub);border:1px solid var(--border);border-right:4px solid var(--tone)}
.cl-card b{font-size:13.5px}
.cl-amt{font-size:12px;font-weight:700;color:var(--tone);white-space:nowrap}
.cl-intake{display:flex;flex-wrap:wrap;gap:5px}
.cl-i{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:9px;
  border:1px solid var(--border);background:#fff;cursor:pointer;font:inherit;font-size:11px;
  color:var(--muted)}
.cl-i em{font-style:normal;font-weight:800}
.cl-i.got{border-color:var(--ok);color:var(--ok);background:#f2f8f5}
.cl-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:10.5px;color:var(--muted)}
.cl-meta .bad{color:var(--late);font-weight:700}
.cl-note{font-size:11.5px;color:var(--body);line-height:1.8;background:#fff;border-radius:9px;padding:8px 10px}
.btn.sm{padding:7px 13px;font-size:11.5px;border-radius:10px}

/* الخصم في الكشف */
.lrow.pen{border-color:var(--late)}
.lrow.pen .lrow-p{color:var(--late)}

/* الوسام غير المستحقّ: يُقرأ مقفلاً لا ممنوحاً — كان يبدو محقّقاً وهو لم يتحقّق */
.trophy.off{opacity:.5;border-style:dashed}
.score .trophy.off{background:transparent;color:var(--muted);border-color:var(--border)}
.modal-h .x+.x,.modal-h .row .x{flex:0 0 auto}

/* التأخير في سطر — لا جدار أحمر فوق البريف */
.late-line{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:9px 13px;border-radius:11px;border:1px solid var(--border);background:var(--sub);
  font:inherit;font-size:12px;font-weight:600;color:var(--body);cursor:pointer;text-align:right}
.late-line em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.late-line.bad{border-color:var(--late);color:var(--late);background:#fdf1f0}
.late-line.bad em{color:var(--late)}
.late-line.ok{border-color:var(--ok);color:var(--ok);background:#f2f8f5;cursor:default}
.late-line.ok em{color:var(--body);font-weight:400;overflow:hidden;text-overflow:ellipsis}

/* الهويّة مطويّة: سطرٌ لا لوحة */
.idp{background:#fff!important}
.idp-h{padding:9px 13px}
.idp-h b{font-size:12.5px;font-weight:700}

/* المشروع سلسلة تُقرأ مرحلةً مرحلة، لا فلترُ جدول */
.cl-prog{display:flex;align-items:center;gap:9px;width:100%;padding:8px 11px;border-radius:10px;
  border:1px solid var(--border);background:#fff;cursor:pointer;font:inherit;text-align:right}
.cl-bar{flex:1;height:7px;border-radius:5px;background:var(--mute);overflow:hidden;display:block}
.cl-bar i{display:block;height:7px;border-radius:5px}
.cl-prog b{font-size:11.5px;color:var(--text)}
.cl-prog em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.proj{display:flex;flex-direction:column;gap:4px}
.proj-row{display:flex;align-items:center;gap:9px;width:100%;padding:8px 11px;border-radius:9px;
  border:1px solid var(--border);background:#fff;cursor:pointer;font:inherit;font-size:11.5px;
  text-align:right;color:var(--text)}
.proj-row:hover{border-color:var(--tone)}
.proj-row em{font-style:normal;font-weight:800;font-size:10px;width:18px;height:18px;flex:0 0 auto;
  border-radius:50%;background:var(--mute);color:var(--muted);display:grid;place-items:center}
.proj-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.proj-w{font-size:10.5px;color:var(--muted);white-space:nowrap}
.proj-d{font-size:10px;color:var(--muted);white-space:nowrap}
.proj-row.late{border-color:var(--late)}
.proj-row.late .proj-d{color:var(--late);font-weight:700}
.proj-row.done{opacity:.6}
.proj-row.done em{background:#e4efe9;color:var(--ok)}
.proj-row.done .proj-t{text-decoration:line-through}

/* اختيار أصحاب المسار — مجمّعون بالمرحلة، لا صفٌّ واحدٌ يقصّ آخرَ الأسماء */
.rpick{display:flex;flex-direction:column;gap:9px;max-height:230px;overflow-y:auto;
  padding:11px;border-radius:12px;background:var(--sub);border:1px solid var(--border)}
.rpick-g{display:flex;flex-direction:column;gap:5px}
.rpick-k{font-size:10px;font-weight:800;color:var(--muted)}
.rpick-us{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr));gap:6px}
.rpick-u{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:10px;
  border:1px solid var(--border);background:#fff;cursor:pointer;font:inherit;text-align:right;
  color:var(--text);min-width:0;transition:.12s}
.rpick-u:hover{border-color:var(--accent)}
.rpick-u.on{border-color:var(--accent);background:#fdf3e9}
.rpick-u i{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-style:normal;font-size:9.5px;font-weight:700}
.rpick-u b{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.rpick-u span span{font-size:9.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;display:block}
.rpick-u em{flex:0 0 auto;font-style:normal;font-size:9.5px;font-weight:800;color:var(--accent);
  background:#fdf3e9;border-radius:999px;min-width:17px;height:17px;display:grid;place-items:center}
.rmv{display:flex;gap:2px;flex:0 0 auto}
.rmv button{width:19px;height:19px;border-radius:6px;border:1px solid var(--border);background:#fff;
  cursor:pointer;font:inherit;font-size:12px;line-height:1;color:var(--muted);padding:0}
.rmv button:hover{border-color:var(--accent);color:var(--accent)}
.rgate.skip{background:transparent;border-style:dashed;color:var(--muted);font-weight:400}

/* شريط الجهة فوق العنوان — أوّل ما يحتاجه المصمّم: لمن أصمّم؟ */
.brandbar{display:flex;align-items:center;gap:10px;padding:7px 11px 7px 8px;border-radius:12px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-right:3px solid var(--tone);align-self:flex-start;max-width:100%;
  box-shadow:inset 0 0 0 100px rgba(0,0,0,.08)}
.bb-logo{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:#fff;
  display:grid;place-items:center;padding:4px}
.bb-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.brandbar b{font-size:13.5px;color:#fff;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brandbar em{font-style:normal;font-size:10.5px;color:rgba(255,255,255,.7);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* الشركات الثلاث — صفٌّ متساوٍ، لا اثنتان وغائبة */
.org-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.org-card{display:flex;flex-direction:column;gap:11px;align-items:stretch;text-align:right;
  padding:16px 17px;border-radius:15px;background:#fff;border:1px solid var(--border);
  border-right:4px solid var(--tone);cursor:pointer;transition:.14s}
.org-card:hover{box-shadow:var(--sh-card)}
.org-card.on{box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 20%,transparent)}
.org-card-h{display:flex;align-items:center;gap:10px;min-width:0}
.org-card-logo{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:var(--sub);
  display:grid;place-items:center;padding:5px}
.org-card-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.org-card-h b{font-size:15px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org-card-n{display:flex;gap:18px}
.org-card-n>span{display:flex;flex-direction:column;gap:1px}
.org-card-n b{font-size:23px;font-weight:800;line-height:1.15;color:var(--tone)}
.org-card-n em{font-style:normal;font-size:10px;color:var(--muted)}
.org-card-n .bad b{color:var(--late)}
.org-card-f{font-size:10.5px;color:var(--muted);padding-top:8px;border-top:1px solid var(--divider)}

/* بطاقة العميل — ترتيبٌ ثابت: مين · العقد · الناقص · الشغل · الأفعال */
.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:13px}
.cl-card{display:flex;flex-direction:column;gap:11px;padding:16px 17px;border-radius:15px;
  background:#fff;border:1px solid var(--border);border-right:4px solid var(--tone)}
.cl-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cl-top b{font-size:14px;line-height:1.5}
.cl-unpaid{font-size:10px;font-weight:700;color:#fff;background:var(--late);
  border-radius:999px;padding:2px 8px;white-space:nowrap}
.cl-lbl{font-size:10.5px;font-weight:700;color:var(--muted)}
.cl-act{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:10px;border-top:1px solid var(--divider)}

/* حذف المهمة — ✕ صغير لا يسرق النظر، ويحمرّ عند لمسه */
.task-x,.proj-x{flex:0 0 auto;width:24px;height:24px;border-radius:7px;border:1px solid var(--border);
  background:#fff;color:var(--muted);cursor:pointer;font:inherit;font-size:11px;line-height:1;
  padding:0;opacity:.45;transition:.14s}
.task:hover .task-x,.proj-row:hover .proj-x{opacity:1}
.task-x:hover,.proj-x:hover{border-color:var(--late);color:var(--late);background:#fdf1f0;opacity:1}
.proj-x{width:22px;height:22px;font-size:10px}

/* سطر سُجّل أثناء معاينة: يبقى في الكشف معلَّماً، ولا يُحتسب */
.lrow-g.acted{background:#f0ecfb;color:#6d3fa0;border-color:#ddd2f4}
.lrow-p.zero{color:var(--muted);font-weight:600;font-size:10px}

/* ============================================================================
   طبقة الفخامة — Editorial Luxury
   ============================================================================
   الشاشة كانت صحيحةً وظيفيّاً وفقيرةً بصريّاً: كلُّ سطحٍ مربّعٌ أبيضُ بحدٍّ
   رماديٍّ ١px، والحدُّ الرماديُّ هو أوّلُ ما يجعل الواجهةَ تبدو قالباً. فما
   تغيّر هنا لونٌ ولا خط — بقي الأسودُ وثمانية كما اعتمدهما ماجد — بل **مادّةُ
   السطح**:

   الحدُّ يُستبدَل بحلقةٍ شعريّةٍ وظلٍّ محيطٍ منتشر، فيصير السطحُ لوحاً يطفو
   لا مستطيلاً مرسوماً. والأقطارُ تكبر فتصير مربّعاتٍ مستديرةً لا صناديق.
   والفراغُ يتضاعف. والعناوينُ تنتقل إلى **سيريف ثمانية** — وهي هويّة ثمانية
   نفسِها: سيريف للعنوان وسانس للواجهة.

   ولا حركةَ خطّيّة: كلُّ انتقالٍ على منحنى فيزيائيٍّ واحد.
   ============================================================================ */

:root{
  /* الحلقةُ الشعريّة تحلّ محلّ الحدّ، والظلُّ منتشرٌ لا قاسٍ */
  --ring:0 0 0 1px rgba(28,24,18,.055);
  --ring-s:0 0 0 1px rgba(28,24,18,.04);
  --lift:0 1px 2px rgba(28,24,18,.03), 0 10px 30px -18px rgba(28,24,18,.22);
  --lift-2:0 2px 4px rgba(28,24,18,.04), 0 22px 48px -26px rgba(28,24,18,.30);
  --gloss:inset 0 1px 0 rgba(255,255,255,.9);
  --ease:cubic-bezier(.32,.72,0,1);
  --r-lg:22px; --r-md:16px; --r-sm:12px;
}

/* حبيبةٌ ورقيّة ثابتة — تكسر نظافةَ الشاشة الرقميّة بلا أن تُرى.
   مثبّتةٌ ولا تستقبل النقر، فلا تُعيد الرسمَ مع التمرير. */
body::after{content:'';position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── السطوح ──────────────────────────────────────────────────────────────── */
.card,.stat,.tile,.task,.score,.crew-c,.org-card,.cl-card,.goal,.rail{
  border-color:transparent;
  box-shadow:var(--ring),var(--lift),var(--gloss);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.card{border-radius:var(--r-lg)}
.stat{border-radius:var(--r-lg);padding:20px 22px;gap:6px}
.task{border-radius:var(--r-lg);padding:20px 21px;gap:13px}
.tile,.org-card,.cl-card,.goal{border-radius:var(--r-lg)}
.score{border-radius:var(--r-lg)}
.crew-c{border-radius:var(--r-md)}
.rail{border-radius:var(--r-lg);padding:14px}

.stat:hover,.tile:hover,.org-card:hover,.crew-c:hover{
  box-shadow:var(--ring),var(--lift-2),var(--gloss);transform:translateY(-1px)}
.task:hover{box-shadow:var(--ring),var(--lift-2),var(--gloss)}

/* الشريطُ الملوّن كان خطّاً مطليّاً بعرض ٤px. صار حافّةً مضيئةً تتلاشى —
   تُقرأ كضوءٍ على حرف اللوح لا كعلامةِ تلوين. */
.task,.org-card,.cl-card{border-right:0}
.task{background:linear-gradient(to left,color-mix(in srgb,var(--tone,var(--accent)) 9%,#fff) 0 5px,
  color-mix(in srgb,var(--tone,var(--accent)) 2.5%,#fff) 5px 62px,#fff 62px)}
.org-card,.cl-card{background:linear-gradient(to left,color-mix(in srgb,var(--tone) 11%,#fff) 0 5px,
  color-mix(in srgb,var(--tone) 3%,#fff) 5px 70px,#fff 70px)}
.crew-c.late{box-shadow:inset 3px 0 0 0 var(--late),var(--ring),var(--lift),var(--gloss)}

/* ── الطباعة: السيريف للعناوين، وهي هويّة ثمانية ─────────────────────────── */
.h{font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.5}
.modal-h h2,.hero h2{font-family:var(--display);letter-spacing:-.02em}
.sub{font-size:12px;letter-spacing:.005em}
/* الترويسة الصغيرة: علامةٌ مجهريّةٌ لا عنوانٌ عاديّ */
.step{font-size:9.5px;font-weight:700;letter-spacing:.22em;color:var(--muted);
  display:inline-flex;align-items:center;gap:8px}
.step::after{content:'';flex:1;height:1px;background:var(--divider);min-width:28px}
/* الأرقام بعرضٍ ثابتٍ فلا ترقص الأعمدة، ومشدودةٌ فتبدو منحوتة */
.stat b,.score b,.crew-n b,.cn b,.org-card-n b,.led-total,.cl-own-n,td b{
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}

/* ── الضوابط ─────────────────────────────────────────────────────────────── */
.chip{border-color:transparent;box-shadow:var(--ring-s);padding:9px 15px;
  transition:box-shadow .4s var(--ease),transform .4s var(--ease),background .4s var(--ease)}
.chip:hover{box-shadow:var(--ring),var(--lift)}
.chip.on{box-shadow:var(--ring),0 4px 12px -6px rgba(28,24,18,.35)}
.btn:active{transform:scale(.985)}
.inp,.ta{border-color:transparent;box-shadow:var(--ring-s) ,inset 0 1px 2px rgba(28,24,18,.035);
  border-radius:var(--r-sm);padding:13px 15px;transition:box-shadow .4s var(--ease)}
.inp:focus,.ta:focus{box-shadow:0 0 0 1px var(--accent),0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.cta{border-radius:14px;padding:15px;letter-spacing:-.01em;
  box-shadow:var(--sh-cta),inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.cta:hover:not(:disabled){box-shadow:0 10px 26px -14px rgba(11,11,12,.6),inset 0 1px 0 rgba(255,255,255,.18)}

/* ── الفراغ يتنفّس ───────────────────────────────────────────────────────── */
.shell{gap:26px;padding:24px 34px 90px}
.wrap{gap:22px}
.stats,.list,.cl-grid,.org-cards{gap:16px}
.pad{padding:22px 24px}
.modal{border-radius:26px}
.modal-h{border-radius:26px 26px 0 0;padding:24px 26px}
.hero{border-radius:var(--r-lg);padding:26px 28px}

/* الصندوق المتقطّع كان يبدو حقلاً ناقصاً — صار لوحاً غائراً داخل اللوح */
.deliver-box{border:0;border-radius:var(--r-md);background:var(--sub);
  box-shadow:inset 0 0 0 1px rgba(28,24,18,.05),inset 0 2px 6px -4px rgba(28,24,18,.16)}
.state,.idp,.late-line,.proj-row,.cl-prog,.rpick,.rpick-u,.org-pick,.cl-i{
  border-color:transparent;box-shadow:var(--ring-s)}
.state{border-radius:var(--r-md);padding:15px 17px}
.idp{border-right:0;border-radius:var(--r-md);
  box-shadow:var(--ring-s),inset 3px 0 0 0 color-mix(in srgb,var(--tone) 55%,transparent)}
.proj-row,.cl-prog{border-radius:var(--r-sm)}
.proj-row:hover{box-shadow:var(--ring),var(--lift)}

/* الجدول: بلا حدود، الفصلُ بالفراغ واللون */
table{border-collapse:separate;border-spacing:0}
th{background:transparent;border-bottom:1px solid var(--divider);letter-spacing:.06em;
  font-size:10.5px;text-transform:none;padding:14px 16px}
td{padding:15px 16px}
tbody tr{transition:background .4s var(--ease)}
tbody tr:hover{background:var(--sub)}

@media(max-width:960px){ .shell{padding:16px 14px 70px;gap:14px} .pad{padding:18px 18px} }

/* ── تصحيحُ ما كشفه الفحص الحيّ ───────────────────────────────────────────
   ١. الشبكات كانت تُخلّف **صفوفاً يتيمة**: خمسُ إحصائياتٍ تنزل ٤+١، وثلاثُ
      شركاتٍ تنزل ٢+١ — والفراغُ الناتج يُقرأ عطلاً لا تنفّساً. فالحدُّ الأدنى
      للعمود يُخفَّض حتى تسع الصفَّ كاملاً قبل أن ينكسر.
   ٢. الحلقةُ الشعريّة كانت خافتةً جدّاً على خلفيّةٍ كريميّة، فذابت حوافُّ
      اللوح وصارت البطاقةُ بقعةً باهتة. الفخامةُ حافّةٌ دقيقةٌ تُرى، لا حافّةٌ
      غائبة.
   ------------------------------------------------------------------------ */
:root{
  --ring:0 0 0 1px rgba(28,24,18,.085);
  --ring-s:0 0 0 1px rgba(28,24,18,.07);
  --lift:0 1px 1px rgba(28,24,18,.04), 0 12px 28px -20px rgba(28,24,18,.30);
  --lift-2:0 2px 3px rgba(28,24,18,.05), 0 24px 44px -26px rgba(28,24,18,.38);
}
.stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,144px),1fr));gap:13px}
.org-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,218px),1fr))}
.cl-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.list,.crew,.goals{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}

/* الإحصائيّة: الرقمُ هو البطل، والوصفُ يخدمه ولا ينافسه */
.stat{padding:17px 18px;gap:3px}
.stat span:first-of-type{font-size:11px;letter-spacing:.02em;color:var(--muted)}
.stat b{font-size:27px;line-height:1.15;font-weight:800}
.stat i{font-size:10.5px;font-style:normal;color:var(--faint);opacity:.85}

/* صفُّ التبويبات كان ينكسر صفّين بلا ترتيب — صار شريطاً واحداً يُمرَّر */
.wrap > .row[style*="overflowX"]{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;
  scrollbar-width:none}
.wrap > .row[style*="overflowX"]::-webkit-scrollbar{display:none}

/* الترويسة: أقلُّ ارتفاعاً وأكثفُ حضوراً */
.top-in{padding-top:14px;padding-bottom:14px}
.bar-in{padding-top:12px;padding-bottom:12px}

/* صفُّ التبويبات: شريطٌ واحدٌ يُمرَّر، لا صفّان ينكسران بصفٍّ يتيم.
   ويُخفى مقبضُ التمرير — الشريطُ يُقرأ حافّةً مستمرّةً لا عنصرَ نافذة. */
.tabs-row{flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:2px 2px 5px;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
  mask-image:linear-gradient(to left,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%)}
.tabs-row::-webkit-scrollbar{display:none}

/* الترويسة السوداء: تدرّجٌ دافئٌ خفيفٌ وحافّةٌ مضيئة، بدل مستطيلٍ مصمت */
.top{background:linear-gradient(160deg,#121212 0%,#181613 55%,#1d1813 100%);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)}
.bar{box-shadow:inset 0 -1px 0 var(--divider)}

/* الشارةُ النشطة تُقرأ من بعيد */
.chip.on{background:var(--ink);border-color:transparent;color:#fff;
  box-shadow:0 0 0 1px var(--ink),0 6px 16px -10px rgba(11,11,12,.55)}

/* الجوّال: خمسُ إحصائيّاتٍ في عمودَين تُخلّف واحدةً يتيمةً بنصف صفّ فارغ.
   الأخيرةُ تمتدّ الصفَّ كاملاً فيُقفَل الشكل. وصفُّ الترويسة يُكدَّس بدل أن
   يتشابك عنوانُه مع أزراره. */
@media(max-width:620px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats > :last-child:nth-child(odd){grid-column:1 / -1}
  .bar-in{flex-direction:column;align-items:stretch;gap:12px}
  .bar-in .row{justify-content:flex-start}
  .h{font-size:17.5px}
  .modal{border-radius:20px;max-height:calc(100dvh - 20px)}
  .modal-h{border-radius:20px 20px 0 0;padding:18px 18px}
}

/* شريط الإدارة داخل المهمّة — أدواتٌ لا زينة: صفٌّ واحدٌ محايدٌ فوق المسار */
.adminbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;
  border-radius:var(--r-md);background:var(--sub);box-shadow:var(--ring-s)}
.ab-k{font-size:9.5px;font-weight:800;letter-spacing:.2em;color:var(--muted);
  padding:3px 9px;border-radius:999px;background:#fff;box-shadow:var(--ring-s)}
.ab-f{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)}
.ab-f input,.ab-f select{font:inherit;font-size:12px;color:var(--text);padding:7px 10px;
  border:0;border-radius:9px;background:#fff;box-shadow:var(--ring-s);outline:none;
  max-width:170px;transition:box-shadow .4s var(--ease)}
.ab-f input:focus,.ab-f select:focus{box-shadow:0 0 0 1px var(--accent),
  0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.ab-quick{display:flex;gap:5px}
.ab-quick button{font:inherit;font-size:11px;font-weight:600;color:var(--body);cursor:pointer;
  padding:7px 11px;border:0;border-radius:9px;background:#fff;box-shadow:var(--ring-s);
  transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.ab-quick button:hover{box-shadow:var(--ring),var(--lift)}
.ab-quick button:active{transform:scale(.97)}

/* ── بطاقة الإحصائيّة: رقمٌ واحدٌ يُقرأ، لا عنصران متباعدان ────────────────
   كان العنوانُ أعلى اليمين والرقمُ أقصى اليسار — مسافةُ عينٍ كاملةٌ بينهما،
   والخطُّ العلويُّ ٣px يكسر استدارةَ الزاوية فتبدو البطاقةُ مقصوصةً من فوق. */
.stat{position:relative;padding:16px 18px 15px;gap:2px;align-items:flex-start;overflow:hidden}
.stat::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(to bottom,transparent,var(--tone),transparent);opacity:.55}
.stat-top{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--muted)}
.stat-dot{width:6px;height:6px;border-radius:50%;background:var(--tone);flex:0 0 auto}
.stat b{font-size:30px;font-weight:800;line-height:1.1;color:var(--tone);margin-top:2px}
.stat em{font-style:normal;font-size:10.5px;color:var(--faint)}
.stat.on{box-shadow:0 0 0 1px var(--tone),var(--lift-2),var(--gloss)}

/* ── صفّ البطاقة العلويّ: أربعةُ عناصرَ بارتفاعٍ واحدٍ ومسافةٍ واحدة ───────
   كانت الشارةُ طويلةً («برانديزر · أعمال معبر») فتزاحم القسمَ والتاريخَ
   وزرَّ الحذف، وكلٌّ منها بارتفاعٍ مختلف. */
.task > .between:first-child{gap:8px;align-items:center}
.task .org-chip,.task .pill{height:24px;display:inline-flex;align-items:center;
  padding:0 10px;font-size:10.5px;line-height:1;border-radius:999px}
.task .org-chip{max-width:180px;overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis;font-weight:700}
.task .pill.dept{background:var(--mute);color:var(--body)}
.task .pill.due{background:var(--sub);color:var(--muted);box-shadow:var(--ring-s)}
.task .pill.due.late{background:var(--late-bg);color:var(--late);box-shadow:none}
.task-x{width:24px;height:24px}

@media(max-width:620px){
  .task .org-chip{max-width:120px}
  .stat b{font-size:25px}
}

/* ── شريط الشهر: الوحدة التي تُدار بها الأقسام فعلاً ────────────────────── */
.monthbar{display:flex;align-items:center;gap:12px;padding:4px 2px}
.mb-k{font-size:9.5px;font-weight:800;letter-spacing:.2em;color:var(--muted);flex:0 0 auto}
.mb-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.mb-row::-webkit-scrollbar{display:none}
.mb-i{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  border:0;background:#fff;box-shadow:var(--ring-s);cursor:pointer;font:inherit;font-size:12.5px;
  font-weight:600;color:var(--body);white-space:nowrap;transition:box-shadow .4s var(--ease)}
.mb-i em{font-style:normal;font-size:10px;font-weight:700;color:var(--muted);
  background:var(--mute);border-radius:999px;padding:1px 7px}
.mb-i:hover{box-shadow:var(--ring),var(--lift)}
.mb-i.now{box-shadow:0 0 0 1px var(--accent)}
.mb-i.on{background:var(--ink);color:#fff;box-shadow:0 6px 16px -10px rgba(11,11,12,.55)}
.mb-i.on em{background:rgba(255,255,255,.16);color:#fff}

/* ── المقسّم المدمج: ترشيحٌ تابعٌ لا ملاحةٌ منافسة ──────────────────────── */
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--mute)}
.seg-i{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
  border:0;background:transparent;cursor:pointer;font:inherit;font-size:11.5px;font-weight:600;
  color:var(--muted);white-space:nowrap;transition:background .4s var(--ease),color .4s var(--ease)}
.seg-i em{font-style:normal;font-size:9.5px;font-weight:800;color:var(--late)}
.seg-i:hover{color:var(--text)}
.seg-i.on{background:#fff;color:var(--text);box-shadow:var(--ring-s),0 1px 2px rgba(28,24,18,.06)}

/* ── رحلة العميل: أين وقف مشروعه ────────────────────────────────────────── */
.jflow{display:flex;align-items:stretch;gap:0;min-width:max-content;padding:4px 2px 8px}
.jn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:126px;
  padding:11px 13px;border-radius:13px;border:0;background:#fff;box-shadow:var(--ring-s);
  cursor:pointer;font:inherit;text-align:right;transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.jn:hover{box-shadow:var(--ring),var(--lift);transform:translateY(-1px)}
.jn-ic{width:21px;height:21px;border-radius:7px;display:grid;place-items:center;
  font-size:10.5px;font-weight:800;background:var(--mute);color:var(--muted)}
.jn-t{font-size:12px;font-weight:700;color:var(--text)}
.jn-n{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.jn.done .jn-ic{background:#e4efe9;color:var(--ok)}
.jn.done .jn-t{color:var(--muted)}
.jn.now{box-shadow:0 0 0 1.5px var(--accent),var(--lift)}
.jn.now .jn-ic{background:var(--accent);color:#fff}
.jn.wait{opacity:.62}
.jn.late .jn-n{color:var(--late);font-weight:700}
.jn.late .jn-ic{background:var(--late-bg);color:var(--late)}
.jn-link{align-self:center;width:22px;height:2px;border-radius:2px;flex:0 0 auto;
  background:var(--dot)}
.jn-link.done{background:linear-gradient(to left,var(--ok),var(--dot))}

/* ============================================================================
   تصحيحُ الوضع — واجهةُ عمل لا صفحةُ عرض
   ============================================================================
   الطبقةُ السابقة عاملت الشاشةَ كصفحةٍ تُرى دقيقة: سيريفٌ للعناوين، وحركةٌ
   بطيئةٌ ٥٠٠ms، ودخولٌ متدرّجٌ لكلّ لوح. وهذي شاشةُ **عمل** تُفتح ثماني ساعات
   ويُنجَز فيها فعل — والمعيارُ فيها الألفةُ المكتسَبة لا الدهشة:

   • **عائلةٌ واحدة.** الواجهةُ لا تحتاج اقتران عرضٍ ونصّ؛ السيريفُ في زرٍّ
     أو ترويسةِ جدولٍ يقرأه الموظّف «غريباً» بلا سبب.
   • **الحركةُ ١٥٠–٢٢٠ms** وتنقل حالةً لا تُزيّن. والمستخدمُ في تدفّق، لا
     ينتظر رقصةَ دخول — فحركاتُ التحميل المتدرّجة تسقط.
   • **التباينُ أرضيّةٌ لا ذوق:** الرماديُّ الزيتونيُّ كان ٣٫٥٧:١ على الأبيض
     و٣٫٠٠:١ على الخلفية — دون ٤٫٥ في كلِّ موضع. أُغمِق في نفس عائلته.
   • **أسطحُ المتصفّح تُلوَّن:** التحديد، ومؤشّر الكتابة، وشريط التمرير،
     وحلقةُ التركيز. هذي أرخصُ إشارةٍ إلى أنّ الواجهةَ بُنيت لا جُمّعت.
   ============================================================================ */

:root{
  /* ٥٫٤٧:١ على الأبيض · ٤٫٦١:١ على الخلفية — يعبُر في كلّ موضع */
  --muted:#5a6e61;
  --faint:#5f6159;
  /* البرتقاليُّ يبقى للأسطح والحدود، وله نسخةٌ أغمق للنصّ وحده */
  --accent-ink:#9e4a1c;
  --ease:cubic-bezier(.22,.61,.36,1);
  --t:180ms;
}

/* عائلةٌ واحدة: السيريفُ يخرج من الواجهة */
.h,.modal-h h2,.hero h2,h2,h3{font-family:var(--font)}
.h{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.6}
.modal-h h2{font-size:19px;font-weight:700;letter-spacing:-.015em}

/* الحركة: سريعةٌ وتنقل حالة */
*,*::before,*::after{transition-duration:var(--t)!important;transition-timing-function:var(--ease)!important}
.rise,.task,.card,.stat,.cl-card,.org-card,.crew-c,.tile,.score{animation:none!important}
.modal{animation-duration:160ms!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* الترويسةُ الصغيرة: عنوانٌ لا لافتة — بلا تباعدٍ مبالغٍ ولا خيطٍ بعده */
.step{font-size:11.5px;font-weight:700;letter-spacing:0;color:var(--muted);display:block}
.step::after{content:none}

/* الحوافُّ الملوّنة تنزل إلى شعرة: اللونُ يكفيه نقطةُ الشارة */
.task,.org-card,.cl-card{background:#fff!important}
.task{box-shadow:var(--ring),var(--lift),var(--gloss),inset -1px 0 0 0 var(--tone,var(--accent))}
.org-card,.cl-card{box-shadow:var(--ring),var(--lift),var(--gloss),inset -1px 0 0 0 var(--tone)}
.stat::before{content:none}
.idp{box-shadow:var(--ring-s),inset -1px 0 0 0 var(--tone)}

/* أسطحُ المتصفّح — ما لم نرسمه يحمل التصميمَ أيضاً */
::selection{background:#e8ddcf;color:var(--ink)}
html{caret-color:var(--accent-ink);scrollbar-width:thin;scrollbar-color:#cfc7b8 transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cfc7b8;border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#bdb4a3}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:8px}
a{text-underline-offset:3px;text-decoration-thickness:1px}

/* الأيقونة: مرسومةٌ بسماكةٍ واحدة، تقف على خطّ النصّ وترث لونه */
.ic{flex:0 0 auto;display:inline-block;vertical-align:-.18em}
.trophy .ic,.cl-i .ic,.seg-i .ic{vertical-align:-.15em}

/* النصُّ البرتقاليّ يأخذ النسخة العابرة للتباين */
.stat b,.jn-n,.mb-i em,.need.bad,.late-line.bad{color:inherit}
.stat b[style*="c8632b"],.cta.warn{color:var(--accent-ink)}

/* ── كشف النقاط: جدولٌ تُصطفّ أرقامُه ─────────────────────────────────────
   كان صفّاً مرناً: النقاطُ آخرَه فتتباعد الوسومُ في الوسط، والأرقامُ لا
   تقع تحت بعضها، والسالبُ ينقلب فيُقرأ «٣-» = ثلاثة. صار أربعةَ أعمدةٍ
   ثابتة، والرقمُ أوّلاً لأنّه سببُ قراءة السطر. */
.lr{display:grid;grid-template-columns:52px 1fr auto 64px;align-items:center;gap:12px;
  width:100%;padding:9px 12px;border-radius:10px;border:0;background:var(--sub);
  box-shadow:var(--ring-s);font:inherit;text-align:right;color:var(--body);cursor:pointer}
.lr:disabled{cursor:default}
.lr:not(:disabled):hover{box-shadow:var(--ring),var(--lift)}
.lr-p{font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;letter-spacing:-.02em;
  text-align:center;padding:4px 0;border-radius:8px;background:#e9f0ea;color:var(--ok)}
.lr-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;font-weight:600;color:var(--text)}
.lr-s{font-size:10.5px;color:var(--muted);white-space:nowrap;
  padding:3px 9px;border-radius:999px;background:#fff;box-shadow:var(--ring-s)}
.lr-d{font-size:10.5px;color:var(--faint);text-align:left;font-variant-numeric:tabular-nums;
  white-space:nowrap}

.lr.pen{background:var(--late-bg);box-shadow:0 0 0 1px #eed5cd}
.lr.pen .lr-p{background:#f7dcd7;color:var(--late)}
.lr.pen .lr-s{color:var(--late)}
.lr.acted .lr-p{background:var(--mute);color:var(--muted)}
.lr.acted .lr-s{color:#6d3fa0;background:#f4f0fd}

.led-total{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.lrules{font-size:11.5px;line-height:2;color:var(--muted);padding-top:10px;
  border-top:1px solid var(--divider);display:block}
.lrules b{font-variant-numeric:tabular-nums;color:var(--ok);font-weight:800}
.lrules b.neg{color:var(--late)}

@media(max-width:620px){
  .lr{grid-template-columns:46px 1fr auto;gap:9px}
  .lr-d{display:none}
}

/* عدّاد الطول: يقول كم بقي قبل ما يقصّ الجوّال، ويحمرّ عند التجاوز */
.cnt{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.cnt.over b{color:var(--late)}
.inp.bad,.ta.bad{box-shadow:0 0 0 1px var(--late)}
.wa-btn.off{opacity:.45}
.ghost.btn{padding:14px;border-radius:14px;border:0;background:var(--mute);color:var(--body);
  font:inherit;font-weight:600;cursor:pointer}
.ghost.btn:hover{background:var(--badge)}

/* «اعرض المزيد»: الجدول يفتح على ٤٨ بطاقة ويُمدّ بالطلب */
.more{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:14px;border-radius:var(--r-md);border:0;background:#fff;box-shadow:var(--ring-s);
  font:inherit;font-size:13px;font-weight:700;color:var(--text);cursor:pointer}
.more:hover{box-shadow:var(--ring),var(--lift)}
.more em{font-style:normal;font-size:10.5px;font-weight:500;color:var(--muted)}

/* «المسار»: العُقد تُمرَّر أفقياً ولا تفيض على الصفحة */
.wflow,.jflow{max-width:100%}
.scroll-x{overflow-x:auto;scrollbar-width:thin}
.fnode,.wnode{min-width:0}
.ftx b,.ftx span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:130px}