/* لوحة تحكّم برو · التنسيق.
   نفس لغة الموقع: برتقالي #F97316، نهاري فقط، RTL أساساً، لا حافّة حادّة،
   وكل الأرقام إنكليزية. لكن الكثافة أعلى: هذي أداة عمل يفتحها المالك
   كل يوم على حاسبة، لا صفحة تسويق تُقرأ مرّة. */
:root{
  --o50:#FFF5EB; --o100:#FFE5CC; --o200:#FFCB9E; --o300:#FFAB66;
  --o500:#F97316; --o600:#E65400; --o700:#BD3C00; --o800:#992B00;
  --o-btn:#EB5600;
  --ground:#FAF8F6; --surface:#FFFFFF; --raised:#F3EEEA;
  --ink:#141110; --muted:#5D544F; --faint:#736962;
  --line:#E4DCD6; --line-2:#EFE8E3;
  --ok:#0F6E52; --ok-bg:#E7F4EF; --warn:#8A5A00; --warn-bg:#FFF4E0;
  --bad:#A8341A; --bad-bg:#FDECE8;
  --ar:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --mo:"IBM Plex Mono",ui-monospace,monospace;
  --r-s:8px; --r-m:14px; --r-l:20px; --r-f:999px;
  --t:150ms; --ease:cubic-bezier(.16,1,.3,1);
  --sh-1:0 1px 2px rgba(64,26,4,.05);
  --sh-2:0 1px 2px rgba(64,26,4,.05),0 8px 20px -12px rgba(64,26,4,.18);
  --shell:1280px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{background:var(--ground);color:var(--ink);font-family:var(--ar);
  font-size:15px;line-height:1.7;font-synthesis-weight:none}
body *{letter-spacing:0}                    /* التباعد يفكّ الوصل بالعربية */
h1,h2,h3{line-height:1.3;font-weight:700}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* الأرقام: إنكليزية بخانات ثابتة حتى تصطفّ الأعمدة، وبلا مونوسبيس
   على أي عنصر يحمل حرفاً عربياً — يكسر الوصل. */
.num{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
:where(a,button,input,select,textarea):focus-visible{
  outline:2.5px solid var(--o700);outline-offset:2px;border-radius:var(--r-s)}

/* ═══ الأزرار ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:40px;padding-inline:1rem;border-radius:var(--r-s);border:1px solid transparent;
  font-family:inherit;font-size:.9rem;font-weight:700;line-height:1.24;cursor:pointer;
  transition:background var(--t),border-color var(--t),transform var(--t)}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--o-btn);color:#fff;box-shadow:var(--sh-1)}
.btn-p:hover{background:#F55E00}
.btn-s{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-s:hover{border-color:var(--o300);color:var(--o700)}
.btn-d{background:transparent;border-color:var(--line);color:var(--bad)}
.btn-d:hover{background:var(--bad-bg)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn-sm{min-height:32px;padding-inline:.7rem;font-size:.82rem}

/* ═══ الحقول ═══ */
.f{display:flex;flex-direction:column;gap:.3rem}
.f label{font-size:.82rem;font-weight:700;color:var(--muted)}
.inp{width:100%;min-height:42px;padding:.5rem .75rem;border-radius:var(--r-s);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-family:inherit;font-size:.92rem;line-height:1.5;transition:border-color var(--t)}
.inp:focus{border-color:var(--o500);outline:none;box-shadow:0 0 0 3px var(--o50)}
textarea.inp{min-height:88px;resize:vertical}
.hint{font-size:.76rem;color:var(--faint);line-height:1.6}

/* ═══ شاشة الدخول ═══ */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:1.5rem}
.login-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:1.75rem;box-shadow:var(--sh-2);
  display:flex;flex-direction:column;gap:1rem}
.login-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.55rem;
  margin-bottom:.25rem}
.login-head img{width:56px;height:56px;border-radius:14px;padding:8px;
  background:var(--surface);border:1px solid var(--line)}
.login-head h1{font-size:1.15rem}
.login-head p{font-size:.82rem;color:var(--faint)}
.pw{position:relative}
.pw .inp{padding-inline-end:2.9rem}
.pw button{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border:0;background:transparent;color:var(--faint);
  cursor:pointer;border-radius:var(--r-s);font-size:.78rem;font-weight:700}
.err{background:var(--bad-bg);color:var(--bad);border-radius:var(--r-s);
  padding:.55rem .8rem;font-size:.85rem;line-height:1.6}
.remember{display:flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--muted);
  cursor:pointer;min-height:40px}
.remember input{width:18px;height:18px;accent-color:var(--o-btn);cursor:pointer}

/* ═══ الهيكل ═══ */
.top{position:sticky;top:0;z-index:40;background:rgba(250,248,246,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:var(--shell);margin-inline:auto;height:58px;display:flex;
  align-items:center;gap:1rem;padding-inline:1.25rem}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:.92rem}
.brand img{width:34px;height:34px;border-radius:9px;padding:4px;
  background:var(--surface);border:1px solid var(--line)}
.nav{display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none;flex:1}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:.45rem .8rem;border-radius:var(--r-f);font-size:.88rem;font-weight:600;
  color:var(--muted);white-space:nowrap;transition:background var(--t),color var(--t)}
.nav a:hover{background:var(--raised);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--o-btn);color:#fff}
.shell{max-width:var(--shell);margin-inline:auto;padding:1.5rem 1.25rem 4rem}
.page-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.page-head h1{font-size:1.4rem;flex:1;min-width:min(100%,14rem)}

/* ═══ البطاقات والشبكات ═══ */
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:1rem 1.1rem;box-shadow:var(--sh-1)}
.card h3{font-size:.84rem;color:var(--faint);font-weight:700;margin-bottom:.3rem}
.card .big{font-size:1.9rem;font-weight:700;line-height:1.15;color:var(--ink)}
.card .sub{font-size:.78rem;color:var(--faint);margin-top:.15rem}

/* شريط الحضور الحيّ: أول ما تقع عليه العين */
.live-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:linear-gradient(100deg,var(--o50),var(--surface) 70%);
  border:1px solid var(--o200);border-radius:var(--r-m);padding:1rem 1.25rem;
  margin-bottom:1.25rem}
.live-bar .n{font-size:2.6rem;font-weight:700;line-height:1;color:var(--o700)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ok);flex-shrink:0;
  box-shadow:0 0 0 3px rgba(15,110,82,.16);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.dot{animation:none}}

/* ═══ الجداول ═══ */
.tw{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;box-shadow:var(--sh-1)}
.tscroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:start;font-weight:700;font-size:.78rem;color:var(--faint);
  padding:.65rem .9rem;background:var(--raised);white-space:nowrap;
  border-bottom:1px solid var(--line)}
td{padding:.7rem .9rem;border-bottom:1px solid var(--line-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer;transition:background var(--t)}
tbody tr:hover{background:var(--o50)}
tbody tr.flat{cursor:default}
tbody tr.flat:hover{background:transparent}

/* ═══ الحبّات ═══ */
.pill{display:inline-flex;align-items:center;gap:.3rem;border-radius:var(--r-f);
  padding:.16rem .6rem;font-size:.75rem;font-weight:700;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.mut{background:var(--raised);color:var(--muted)}
.pill.hot{background:var(--o-btn);color:#fff}

/* ═══ النافذة ═══ */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(20,17,16,.42);
  backdrop-filter:blur(2px);display:grid;place-items:center;padding:1.25rem}
.modal{width:min(560px,100%);max-height:86dvh;overflow-y:auto;background:var(--surface);
  border-radius:var(--r-l);box-shadow:0 24px 60px -20px rgba(20,17,16,.4);
  padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.modal h2{font-size:1.1rem}
.modal-foot{display:flex;gap:.6rem;justify-content:flex-start;margin-top:.25rem}

/* ═══ بروفايل الطالب ═══ */
.prof{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:1024px){.prof{grid-template-columns:320px 1fr;align-items:start}}
.prof-side{display:flex;flex-direction:column;gap:1rem;position:sticky;top:74px}
@media(max-width:1023px){.prof-side{position:static}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.4rem .9rem;font-size:.86rem}
.kv dt{color:var(--faint);white-space:nowrap}
.kv dd{font-weight:600;word-break:break-word}
.sec{display:flex;flex-direction:column;gap:.7rem}
.sec-head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.sec-head h2{font-size:1.02rem;flex:1}
.empty{text-align:center;padding:2rem 1rem;color:var(--faint);font-size:.88rem;
  background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-m)}

/* العدّ التنازلي: الرقم الذي يراه الطالب أيضاً، فيقرأه المالك بعينه */
.countdown{font-variant-numeric:lining-nums tabular-nums;font-weight:700;color:var(--o700)}
.countdown.soon{color:var(--bad)}
.countdown.none{color:var(--ok)}

/* ═══ الإشعار ═══ */
.toast{position:fixed;inset-block-end:1.25rem;inset-inline-start:50%;z-index:80;
  transform:translate(50%,1rem);opacity:0;transition:opacity var(--t),transform var(--t) var(--ease);
  background:var(--ink);color:#fff;border-radius:var(--r-f);
  padding:.6rem 1.1rem;font-size:.88rem;font-weight:600;box-shadow:var(--sh-2);max-width:90vw}
.toast.in{opacity:1;transform:translate(50%,0)}
.toast.bad{background:var(--bad)}

.spin{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line);
  border-top-color:var(--o500);animation:sp .7s linear infinite;margin:2rem auto}
@keyframes sp{to{transform:rotate(360deg)}}

/* الطباعة: المالك يطبع قائمة طلاب أو تقرير مروّج */
@media print{
  .top,.toast,.btn,.scrim{display:none!important}
  body{background:#fff}
  .card,.tw{box-shadow:none;border-color:#ccc}
}

/* ══════════════════════════════════════════════════════════════════════════
   الطبقة الثانية · «مقصورة القيادة»
   كل ما تحتاجه الشاشات: الطلبات · المحتوى · الأسعار · الأعمال · الكورسات ·
   الوظائف · النمو. المبدأ: الجدول هو المحرِّر، وشريط النشر يجيب على السؤال
   الوحيد الذي يسأله المالك بعد كل تعديل — «طلع بالموقع؟».
   لا وضع ليلي · لا حافّة حادّة · خصائص منطقية · أرقام إنكليزية.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --rail:200px;              /* عرض الشريط الجانبي الفرعي */
  --pub-h:56px;              /* ارتفاع شريط النشر */
  --sel:#FFF1E3;             /* خلفية الصفّ المختار */
  --grid-line:#EDE6E1;       /* فاصل صفوف الجدول المحرَّر: أخفت من --line */
  --sh-pop:0 18px 44px -18px rgba(20,17,16,.30),0 2px 6px rgba(64,26,4,.06);
}

/* عرض أوسع للشاشات الكثيفة (الأسعار، الأعمال، الكورسات، الوظائف، الطلبات).
   لا يبدّل .shell بل يضيف بديلاً يُطلب صراحةً بـshell.classList.add('wide'). */
.shell.wide{max-width:1600px}
body.has-pub .shell{padding-bottom:calc(var(--pub-h) + 2.5rem)}
body.has-pub .toast{inset-block-end:calc(var(--pub-h) + 1rem)}

/* ═══ 1 · الهيكل ذو الشريط الفرعي ═══
   الشريط بالـinline-start = يمين الشاشة بالعربية: أوّل ما تقع عليه العين. */
/* ‏:not(.fgrid) لأن .fgrid.two شبكة حقول لا هيكل صفحة — بلا هذا الاستثناء
   يتسرّب gap الهيكل وalign-items إلى كل بطاقة فيها حقلان. */
.two:not(.fgrid){display:grid;gap:1.25rem;
  grid-template-columns:var(--rail) minmax(0,1fr);align-items:start}
@media(max-width:900px){.two:not(.fgrid){grid-template-columns:1fr}}
.rail{display:flex;flex-direction:column;gap:.15rem;position:sticky;top:74px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:.4rem;box-shadow:var(--sh-1)}
@media(max-width:900px){
  .rail{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
}
.rail button{display:flex;align-items:center;gap:.5rem;width:100%;
  min-height:38px;padding:.4rem .7rem;border:0;border-radius:var(--r-s);
  background:transparent;color:var(--muted);font-family:inherit;font-size:.88rem;
  font-weight:600;text-align:start;cursor:pointer;white-space:nowrap;
  transition:background var(--t),color var(--t)}
.rail button:hover{background:var(--raised);color:var(--ink)}
.rail button[aria-selected="true"],
.rail button[aria-current="true"]{background:var(--o50);color:var(--o700)}
.rail .cnt{margin-inline-start:auto;font-size:.74rem;color:var(--faint);
  font-variant-numeric:lining-nums tabular-nums}
.rail button[aria-selected="true"] .cnt{color:var(--o600)}
.rail hr{border:0;border-top:1px solid var(--line-2);margin:.35rem .3rem}

/* ═══ 2 · شريط الأدوات المثبّت ═══
   بحث + فلاتر + إجراءات، يلتصق تحت الترويسة فلا يضيع عند التمرير. */
.bar{position:sticky;top:58px;z-index:30;display:flex;align-items:center;
  gap:.6rem;flex-wrap:wrap;padding:.7rem 0;margin-bottom:.75rem;
  background:var(--ground);border-bottom:1px solid var(--line)}
.bar .grow{flex:1;min-width:1rem}
.bar .inp{min-height:36px;font-size:.88rem}
.bar .sep{width:1px;align-self:stretch;min-height:22px;background:var(--line);
  margin-inline:.2rem;border-radius:1px}
.grow{flex:1;min-width:1rem}
.sep{width:1px;align-self:stretch;min-height:22px;background:var(--line);
  margin-inline:.2rem;border-radius:1px}

/* شريط تقسيم (فلتر الحالة، مدى التاريخ، مقياس المنحنى) */
.seg{display:inline-flex;background:var(--raised);border-radius:var(--r-f);
  padding:3px;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{min-height:30px;padding-inline:.75rem;border:0;border-radius:var(--r-f);
  background:transparent;color:var(--muted);font-family:inherit;font-size:.82rem;
  font-weight:700;cursor:pointer;white-space:nowrap;
  transition:background var(--t),color var(--t)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"],
.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);
  box-shadow:var(--sh-1)}
.seg .n{font-variant-numeric:lining-nums tabular-nums;opacity:.65;
  margin-inline-start:.3rem;font-size:.76rem}

/* ═══ 3 · الجدول القابل للتحرير — قلب اللوحة ═══
   الخانة نفسها حقل: بلا حدود حتى تمرّ عليها، فالشاشة هادئة والتحرير على نقرة. */
.grid{--pad:.35rem}
.grid table{font-size:.86rem}
.grid th{padding:.5rem .6rem}
.grid td{padding:var(--pad) .35rem;border-bottom:1px solid var(--grid-line)}
/* صفوف الجدول المحرَّر ليست روابط: لا مؤشّر يد ولا تلوين كامل عند المرور. */
.grid tbody tr{cursor:default}
.grid tbody tr:hover{background:transparent}
.grid tbody tr:hover .ce{border-color:var(--line-2)}
.grid tbody tr.on{background:var(--sel)}
.grid tbody tr:focus-within{background:var(--o50)}
/* ترويسة ثابتة تعمل فعلاً: فقط حين يُطلب ارتفاع محدود للحاوية.
   بلا .tall تبقى الترويسة عادية بدل وعدٍ لا يتحقّق. */
.tscroll.tall{max-height:min(62dvh,640px);overflow-y:auto}
.tscroll.tall th{position:sticky;top:0;z-index:2;
  box-shadow:inset 0 -1px 0 var(--line)}

/* الحقل داخل الخانة */
.ce{width:100%;min-height:32px;padding:.28rem .5rem;
  border:1px solid transparent;border-radius:var(--r-s);
  background:transparent;color:var(--ink);font-family:inherit;font-size:.86rem;
  line-height:1.35;transition:border-color var(--t),background var(--t),box-shadow var(--t)}
.ce:hover{border-color:var(--line)}
.ce:focus{background:var(--surface);border-color:var(--o500);outline:none;
  box-shadow:0 0 0 3px var(--o50)}
.ce::placeholder{color:var(--faint);opacity:.7}
textarea.ce{min-height:32px;resize:vertical;line-height:1.45;display:block}
select.ce{cursor:pointer;padding-inline-end:1.3rem}
.ce.n{font-variant-numeric:lining-nums tabular-nums;max-width:9rem}
.ce.n2{max-width:6rem}
/* حالات الحفظ: علامة رفيعة على حافّة البدء لا تزحزح شيئاً */
.ce.busy{box-shadow:inset 2px 0 0 var(--o500)}
[dir="rtl"] .ce.busy{box-shadow:inset -2px 0 0 var(--o500)}
.ce.done{animation:ceok 1.1s var(--ease)}
@keyframes ceok{0%{background:var(--ok-bg)}100%{background:transparent}}
.ce.bad{border-color:var(--bad);background:var(--bad-bg)}
.ce[readonly],.ce[disabled]{color:var(--faint);cursor:not-allowed}
.ce[readonly]:hover,.ce[disabled]:hover{border-color:transparent}
@media(prefers-reduced-motion:reduce){.ce.done{animation:none}}

/* عمود الحالة الرفيع بأول كل صفّ */
.st{width:14px;padding-inline:.3rem!important}
.dotst{display:block;width:7px;height:7px;border-radius:50%;background:transparent;
  transition:background var(--t)}
.dotst.busy{background:var(--o500)}
.dotst.done{background:var(--ok)}
.dotst.bad{background:var(--bad)}

/* عمود التأشير بالطلبات */
.ckcol{width:34px;padding-inline:.45rem!important;text-align:center}
.ckx{width:17px;height:17px;accent-color:var(--o-btn);cursor:pointer;
  border-radius:4px;vertical-align:middle}

/* أزرار الصفّ: مخفيّة حتى المرور أو التركيز — تبقى الشاشة نظيفة،
   وتظهر للوحة المفاتيح أيضاً لا للفأرة وحدها. */
.rowbar{display:flex;gap:.25rem;justify-content:flex-end;align-items:center;
  opacity:0;transition:opacity var(--t)}
tr:hover .rowbar,tr:focus-within .rowbar,
.rec:hover .rowbar,.rec:focus-within .rowbar,
.node:hover .rowbar,.node:focus-within .rowbar,
.leaf:hover .rowbar,.leaf:focus-within .rowbar{opacity:1}
@media(hover:none){.rowbar{opacity:1}}
.ico{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;
  border:1px solid transparent;border-radius:var(--r-s);background:transparent;
  color:var(--faint);font-family:inherit;font-size:.9rem;font-weight:700;
  line-height:1;cursor:pointer;flex-shrink:0;
  transition:background var(--t),color var(--t),border-color var(--t)}
button.ico:hover,a.ico:hover{background:var(--raised);color:var(--ink);
  border-color:var(--line)}
.ico.danger{color:var(--bad)}
.ico.danger:hover{background:var(--bad-bg);color:var(--bad);border-color:#F5CFC6}
.ico[disabled]{opacity:.4;cursor:not-allowed}
span.ico{cursor:inherit}

/* ═══ 4 · المفتاح (switch) ═══ */
.sw{position:relative;display:inline-flex;align-items:center;gap:.45rem;
  cursor:pointer;font-size:.82rem;color:var(--muted);user-select:none}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw i{width:38px;height:22px;border-radius:var(--r-f);background:var(--line);
  flex-shrink:0;position:relative;transition:background var(--t)}
.sw i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;
  width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease)}
.sw input:checked + i{background:var(--o-btn)}
[dir="rtl"] .sw input:checked + i::after{transform:translateX(-16px)}
[dir="ltr"] .sw input:checked + i::after{transform:translateX(16px)}
.sw input:focus-visible + i{outline:2.5px solid var(--o700);outline-offset:2px}
.sw input:disabled + i{opacity:.45}
.sw input:disabled ~ span{opacity:.55}
.sw input:disabled{cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.sw i::after{transition:none}}

/* ═══ 5 · محرّر المصفوفات النصّية (text[]) ═══
   features · need · plus · day · give · ask · before_pts · after_pts · built · tags */
.chips{display:flex;flex-wrap:wrap;gap:.35rem;padding:.35rem;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);
  min-height:42px;align-items:flex-start}
.chips:focus-within{border-color:var(--o500);box-shadow:0 0 0 3px var(--o50)}
.chip{display:inline-flex;align-items:center;gap:.3rem;max-width:100%;
  background:var(--raised);border:0;border-radius:var(--r-f);
  padding-block:.2rem;padding-inline:.65rem .3rem;
  font-family:inherit;font-size:.8rem;line-height:1.3;color:var(--ink)}
.chip > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22rem}
.chip button{width:18px;height:18px;border:0;border-radius:50%;background:transparent;
  color:var(--faint);cursor:pointer;font-size:.8rem;line-height:1;flex-shrink:0;
  font-family:inherit}
.chip button:hover{background:var(--bad-bg);color:var(--bad)}
.chips input{flex:1;min-width:7rem;min-height:26px;border:0;background:transparent;
  font-family:inherit;font-size:.84rem;color:var(--ink);outline:none;padding:0 .3rem}
.chips.pick{gap:.4rem}
.chips.pick .chip{cursor:pointer;background:transparent;border:1px solid var(--line);
  padding-inline:.7rem;transition:background var(--t),border-color var(--t),color var(--t)}
.chips.pick .chip:hover{border-color:var(--o300)}
.chips.pick .chip[aria-pressed="true"]{background:var(--o50);border-color:var(--o300);
  color:var(--o700);font-weight:700}

/* ═══ 6 · السحب لإعادة الترتيب ═══ */
.drag{display:grid;place-items:center;width:24px;height:28px;padding:0;
  border:0;border-radius:var(--r-s);background:transparent;color:var(--line);
  font-family:inherit;font-size:.95rem;line-height:1;cursor:grab;touch-action:none}
.drag:hover{color:var(--faint);background:var(--raised)}
.drag:active{cursor:grabbing}
.dragging{opacity:.4}
.dropline{height:3px;border-radius:2px;background:var(--o-btn);margin-block:-1px;
  box-shadow:0 0 0 1px var(--surface)}
.dropline-row{background:transparent!important}
.dropline-row td{padding:0!important;border:0!important}
.sortable [data-pos]{transition:background var(--t)}

/* ═══ 7 · اللوح الجانبي (تفاصيل الطلب / المتقدّم) ═══
   يُحرَّك بـinset-inline-end لا بـtransform: transform فيزيائيّ فينقلب بالـRTL. */
.sheet-scrim{position:fixed;inset:0;z-index:55;background:rgba(20,17,16,.28);
  backdrop-filter:blur(2px);opacity:0;transition:opacity var(--t)}
.sheet-scrim.in{opacity:1}
.sheet{position:fixed;inset-block:0;inset-inline-end:min(-560px,-100%);
  z-index:56;width:min(560px,100%);background:var(--surface);
  border-start-start-radius:var(--r-l);border-end-start-radius:var(--r-l);
  box-shadow:var(--sh-pop);display:flex;flex-direction:column;
  transition:inset-inline-end var(--t) var(--ease)}
.sheet.in{inset-inline-end:0}
.sheet-head{display:flex;align-items:center;gap:.7rem;padding:1rem 1.25rem;
  border-bottom:1px solid var(--line);flex-shrink:0}
.sheet-head h2{font-size:1.02rem;flex:1;min-width:0}
.sheet-body{flex:1;overflow-y:auto;padding:1.25rem;display:flex;
  flex-direction:column;gap:1rem}
.sheet-foot{padding:.85rem 1.25rem;border-top:1px solid var(--line);
  display:flex;gap:.5rem;flex-wrap:wrap;flex-shrink:0;background:var(--raised)}
@media(prefers-reduced-motion:reduce){.sheet{transition:none}}

/* ═══ 8 · شريط النشر — جواب سؤال «طلع بالموقع؟» ═══
   يختفي كلّياً حين لا شيء معلّق، فوجوده وحده إشارة. */
.pub{position:fixed;inset-block-end:0;inset-inline:0;z-index:45;
  min-height:var(--pub-h);display:flex;align-items:center;
  padding:.6rem 1.25rem;background:var(--surface);
  border-top:1px solid var(--o200);
  box-shadow:0 -6px 24px -14px rgba(64,26,4,.28)}
.pub .in{max-width:var(--shell);margin-inline:auto;width:100%;
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.pub strong{font-size:.9rem}
.pub .why{font-size:.78rem;color:var(--faint);line-height:1.5}
.pub .pages{display:flex;gap:.3rem;flex-wrap:wrap}
.pub .btn{margin-inline-start:auto}
.pub.alarm{border-top-color:var(--bad);background:var(--bad-bg)}
.pub.alarm strong{color:var(--bad)}
.pub.clean{border-top-color:var(--line)}
.pub[hidden]{display:none}
.pubdot{width:9px;height:9px;border-radius:50%;background:var(--o500);
  box-shadow:0 0 0 3px rgba(249,115,22,.18);flex-shrink:0;
  animation:pulse 2.4s ease-in-out infinite}
.pub.clean .pubdot{background:var(--ok);box-shadow:0 0 0 3px rgba(15,110,82,.16);
  animation:none}
.pub.alarm .pubdot{background:var(--bad);box-shadow:0 0 0 3px rgba(168,52,26,.18)}
@media(prefers-reduced-motion:reduce){.pubdot{animation:none}}

/* ═══ 9 · شريط التراجع ═══
   ملاحظة: بعض الشاشات تسمّي شريط التقدّم .bar وأخرى .undo-bar أو .uprog،
   فالثلاثة مُعرَّفة هنا، ونقض .bar المثبّت صريح حتى لا يتسرّب إليه
   position:sticky ولا border-bottom ولا margin. */
.undo{position:fixed;inset-block-end:calc(var(--pub-h) + 1rem);
  inset-inline-start:50%;transform:translate(50%,1rem);z-index:75;opacity:0;
  transition:opacity var(--t),transform var(--t) var(--ease);
  display:flex;align-items:center;gap:.85rem;background:var(--ink);color:#fff;
  border-radius:var(--r-f);padding-block:.5rem;padding-inline:1.1rem .6rem;
  box-shadow:var(--sh-2);font-size:.86rem;max-width:92vw}
[dir="ltr"] .undo{transform:translate(-50%,1rem);padding-inline:.6rem 1.1rem}
.undo.in{transform:translate(50%,0);opacity:1}
[dir="ltr"] .undo.in{transform:translate(-50%,0)}
.undo button{border:0;border-radius:var(--r-f);background:rgba(255,255,255,.14);
  color:#fff;font-family:inherit;font-size:.82rem;font-weight:700;
  padding:.3rem .8rem;min-height:30px;cursor:pointer;white-space:nowrap}
.undo button:hover{background:rgba(255,255,255,.26)}
.undo .bar,.undo .undo-bar,.undo .uprog{
  position:static;display:block;width:34px;height:3px;flex-shrink:0;
  padding:0;margin:0;border:0;border-radius:2px;
  background:rgba(255,255,255,.25);overflow:hidden;z-index:auto}
.undo .bar > i,.undo .undo-bar > i,.undo .uprog > i{
  display:block;height:100%;background:#fff;border-radius:2px;
  transform-origin:100% 50%;animation:drain 8s linear forwards}
[dir="ltr"] .undo .bar > i,[dir="ltr"] .undo .undo-bar > i,
[dir="ltr"] .undo .uprog > i{transform-origin:0 50%}
@keyframes drain{to{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){
  .undo{transition:none}
  .undo .bar > i,.undo .undo-bar > i,.undo .uprog > i{animation:none}
}

/* ═══ 10 · الصور والرفع ═══ */
.drop{display:grid;place-items:center;gap:.4rem;min-height:132px;padding:1rem;
  border:2px dashed var(--line);border-radius:var(--r-m);background:var(--surface);
  color:var(--faint);font-size:.86rem;text-align:center;cursor:pointer;
  transition:border-color var(--t),background var(--t),color var(--t)}
.drop:hover,.drop.over{border-color:var(--o300);background:var(--o50);color:var(--o700)}
.drop b{color:var(--ink);font-size:.92rem}
.mgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.mcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;display:flex;flex-direction:column;padding:0;
  font-family:inherit;text-align:start;color:inherit;cursor:pointer;
  transition:border-color var(--t),box-shadow var(--t)}
.mcard:hover{border-color:var(--o300)}
.mcard .ph{aspect-ratio:16/10;background:var(--raised) center/cover no-repeat;
  border-bottom:1px solid var(--line-2)}
.mcard .mb{padding:.5rem .6rem;display:flex;flex-direction:column;gap:.3rem;
  min-width:0}
.mcard .k{font-size:.76rem;color:var(--faint);word-break:break-all;
  font-variant-numeric:lining-nums tabular-nums;line-height:1.35}
.mcard.on{border-color:var(--o500);box-shadow:0 0 0 3px var(--o50)}
.thumb{width:64px;height:64px;border-radius:var(--r-s);border:1px solid var(--line);
  background:var(--raised) center/cover no-repeat;flex-shrink:0}
.prog{height:6px;border-radius:3px;background:var(--line-2);overflow:hidden}
.prog > i{display:block;height:100%;border-radius:3px;background:var(--o-btn);
  width:0;transition:width 180ms linear}

/* ═══ 11 · المقاعد والمقاييس ═══ */
.meter{height:8px;border-radius:4px;background:var(--line-2);overflow:hidden;
  display:flex;min-width:88px}
.meter > i{display:block;height:100%}
.meter .taken{background:var(--o-btn)}
.meter .res{background:var(--o200)}
.meter-l{font-size:.74rem;color:var(--faint);
  font-variant-numeric:lining-nums tabular-nums;line-height:1.5}

/* ═══ 12 · قراءة المنحنى (شاشة النمو) ═══ */
.chart-read{font-size:.9rem;color:var(--muted);min-height:1.6em;
  font-variant-numeric:lining-nums tabular-nums;line-height:1.5}
.chart-read strong{color:var(--ink);font-size:1.05rem}

/* ═══ 13 · الشجرة (خدمة ← باقة · كورس ← وحدة ← محاضرة) ═══ */
.tree{display:flex;flex-direction:column;gap:.5rem}
.node{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden}
.node > .nh{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.5rem .65rem;background:var(--raised);border-bottom:1px solid var(--line-2)}
.node > .nb{padding:.35rem .5rem .5rem;display:flex;flex-direction:column;gap:.25rem}
.leaf{display:flex;align-items:center;gap:.5rem;padding:.3rem .45rem;
  border-radius:var(--r-s);transition:background var(--t)}
.leaf:hover{background:var(--o50)}
.leaf .t{flex:1;min-width:0}
.mono-n{font-variant-numeric:lining-nums tabular-nums;font-size:.8rem;color:var(--faint)}

/* عنوان قابل للطيّ (بطاقة وظيفة) */
.jtitle{display:flex;align-items:center;gap:.5rem;width:100%;min-height:38px;
  padding:.35rem .1rem;border:0;background:transparent;color:var(--ink);
  font-family:inherit;font-size:.96rem;font-weight:700;text-align:start;
  cursor:pointer;border-radius:var(--r-s)}
.jtitle:hover{color:var(--o700)}
.jtitle strong{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ═══ 14 · بطاقة سجلّ عريضة (باقة، مشروع، وظيفة) ═══ */
.rec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:.75rem;
  padding:.9rem 1rem}
.rec.pop{border-color:var(--o300);box-shadow:0 0 0 3px var(--o50),var(--sh-1)}
.rec.dragging{opacity:.4}
.rec-h{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.rec-h .ce{flex:1;min-width:9rem;font-weight:700;font-size:.94rem}
.rec-body{display:flex;flex-direction:column;gap:.75rem}
.fgrid{display:grid;gap:.75rem 1rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.fgrid.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.frow{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.frow > label{font-size:.76rem;font-weight:700;color:var(--faint)}
.frow .ce{border-color:var(--line-2);background:var(--surface)}
.cnt-l{font-size:.72rem;color:var(--faint);text-align:end;
  font-variant-numeric:lining-nums tabular-nums}
.cnt-l.over{color:var(--bad);font-weight:700}

/* سطر معاينة نصّ الموقع كما سيقرأه الزبون */
.preview{background:var(--o50);border:1px solid var(--o100);border-radius:var(--r-s);
  padding:.45rem .7rem;font-size:.86rem;color:var(--o800);line-height:1.6}
.preview.safe{background:var(--surface);border-color:var(--line);color:var(--ink)}
.preview.safe p{margin-block:.4rem}
.preview.safe ul,.preview.safe ol{margin-inline-start:1.2rem;margin-block:.4rem}
.preview.safe li{margin-block:.15rem}
.preview.safe a{color:var(--o700);text-decoration:underline}

/* نصّ طويل كتبه الزبون (وصف الطلب، رسالة المتقدّم) */
.msg{background:var(--raised);border:1px solid var(--line-2);border-radius:var(--r-m);
  padding:.7rem .85rem;font-size:.88rem;line-height:1.8;white-space:pre-wrap;
  overflow-wrap:anywhere}

/* ═══ 15 · اللون (باقة، خدمة) ═══ */
.swatch{display:inline-block;width:20px;height:20px;border-radius:6px;
  border:1px solid var(--line);flex-shrink:0;
  background-image:linear-gradient(45deg,var(--line-2) 25%,transparent 25%,
    transparent 75%,var(--line-2) 75%),
    linear-gradient(45deg,var(--line-2) 25%,transparent 25%,
    transparent 75%,var(--line-2) 75%);
  background-size:8px 8px;background-position:0 0,4px 4px}
.swatch-pick{width:34px;height:32px;padding:2px;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--surface);cursor:pointer;flex-shrink:0}
.swatch-pick::-webkit-color-swatch-wrapper{padding:0}
.swatch-pick::-webkit-color-swatch{border:0;border-radius:6px}
.swatch-pick::-moz-color-swatch{border:0;border-radius:6px}

/* ═══ 16 · التنبيهات داخل الصفحة ═══ */
.band{display:flex;align-items:flex-start;gap:.55rem;flex-wrap:wrap;
  border-radius:var(--r-m);padding:.65rem .85rem;font-size:.84rem;line-height:1.7}
.band.warn{background:var(--warn-bg);color:var(--warn);border:1px solid #F2DFB8}
.band.bad{background:var(--bad-bg);color:var(--bad);border:1px solid #F5CFC6}
.band.ok{background:var(--ok-bg);color:var(--ok);border:1px solid #C9E5DA}
.band.info{background:var(--raised);color:var(--muted);border:1px solid var(--line)}
.band b{font-weight:700}
.band .btn{margin-inline-start:auto}

/* ═══ 17 · التحميل: هيكل عظمي لا دوّامة ═══
   الدوّامة تقول «انتظر»، والهيكل يقول «هذا شكل ما سيصل» فيقلّ الارتجاف. */
.sk{border-radius:var(--r-s);height:14px;
  background:linear-gradient(90deg,var(--line-2) 0%,var(--raised) 45%,var(--line-2) 90%);
  background-size:220% 100%;animation:shim 1.3s linear infinite}
.sk.row{height:34px;margin-block:.25rem}
.sk.card{height:96px;border-radius:var(--r-m)}
@keyframes shim{to{background-position:-220% 0}}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}

/* حالة فارغة بفعل، لا بجملة يتيمة */
.empty.act{display:flex;flex-direction:column;align-items:center;gap:.7rem;
  padding:2.6rem 1.25rem}
.empty.act b{font-size:.98rem;color:var(--ink);font-weight:700}
.empty.act p{max-width:34rem;line-height:1.7}

/* ═══ 18 · تفاصيل صغيرة ═══ */
.row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.row.tight{gap:.3rem}
.stack{display:flex;flex-direction:column;gap:1rem;min-width:0}
.stack.lg{gap:1.5rem}
.pill.draft{background:#EDEAFE;color:#4A3AA8}
.pill.live{background:var(--ok-bg);color:var(--ok)}
.pill.wip{background:var(--warn-bg);color:var(--warn)}
.copy{cursor:pointer;border:0;background:transparent;color:var(--faint);
  font-family:inherit;font-size:.76rem;font-weight:700;border-radius:var(--r-s);
  padding:.15rem .4rem}
.copy:hover{background:var(--raised);color:var(--o700)}
.linkish{color:var(--o700);text-decoration:underline;overflow-wrap:anywhere}
.muted{color:var(--faint)}
.tiny{font-size:.74rem;line-height:1.6}
.nowrap{white-space:nowrap}
.grid td .row{flex-wrap:nowrap}

/* حقول الأرقام: بلا أسهم زيادة/نقصان — تُضغط سهواً على الأسعار */
input.ce.n{text-align:start}
input.ce::-webkit-outer-spin-button,
input.ce::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type="number"].ce{-moz-appearance:textfield;appearance:textfield}

/* تأكيد الحذف: يُكتب اسم السجلّ بدل نقرة «متأكد؟» تُضغط بلا قراءة */
.danger-box{display:flex;flex-direction:column;gap:.6rem;
  background:var(--bad-bg);border:1px solid #F5CFC6;border-radius:var(--r-m);
  padding:.8rem .9rem}
.danger-box b{color:var(--bad)}
.danger-box .inp{border-color:#F5CFC6;background:var(--surface)}

/* الطباعة: أضف الجديد لما هو مخفيّ أصلاً */
@media print{
  .rail,.bar,.pub,.undo,.sheet,.sheet-scrim,.rowbar,.drag,.seg{display:none!important}
  .two{display:block}
  .ce{border-color:transparent!important;background:transparent!important}
  .rec,.node,.mcard{box-shadow:none;border-color:#ccc;break-inside:avoid}
}