/* Media Publish — design system.
   RTL-first, dark by default, one accent variable the user can retint live. */

@font-face{font-family:Zain;src:url(/static/fonts/Zain-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Zain;src:url(/static/fonts/Zain-Bold.ttf) format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Alexandria;src:url(/static/fonts/Alexandria-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Alexandria;src:url(/static/fonts/Alexandria-Bold.ttf) format('truetype');font-weight:700;font-display:swap}

:root{
  --accent:#22C08A;
  /* الأسطح الممتلئة تُشتقّ من اللون لا تساويه: نصٌّ أسود على أخضر نعناعي
     يقرأ خشناً ورخيصاً، والأبيض عليه لا يقرأ أصلاً (٢٫٢:١). فالمزج بثلث
     أسود-أخضر يُنزل اللمعان حتى يمرّ الأبيض عند ٤٫٧:١، ويبقى الاشتقاق —
     لا قيمة ثابتة — لأن اللون يغيّره كل عضو من ملفه الشخصي: أي لون يختاره
     يُعتّم بالقاعدة نفسها فيبقى نصّ الأزرار مقروءاً بلا استثناء.
     و`--accent` الأصلي يبقى كما هو للحدود وحلقات التركيز والتظليل. */
  --accent-solid:color-mix(in srgb, var(--accent) 65%, #04150F);
  --accent-ink:#FFFFFF;
  --bg:#0D1117;
  --bg-2:#151B24;
  --surface:#1A212B;
  --surface-2:#222A36;
  --line:#2C3542;
  --line-2:#3B4756;
  --line-3:#4C5A6B;
  --surface-3:#28313E;
  --ink:#E9EDF2;
  --ink-2:#AEB8C4;
  --muted:#7C8896;
  --danger:#E5484D;
  --warn:#E0A33E;
  --ok:#3DBE8B;
  --info:#5B9DE0;
  --r:10px;
  /* خطّا الواجهة مفتوحا الترخيص (SIL OFL): Alexandria للمتن وZain للعناوين.
     هذا قرار ترخيصي لا جمالي — المنتج مستقلّ، فلا يجوز أن يحمل خطّاً مملوكاً
     لمؤسسة أخرى مهما كانت صلاحية من بناه فيها. وخطوط القوالب التي تُحرق على
     الفيديو شيء آخر تماماً: تأتي من أصول كل مؤسسة على حدة، فيبقى الترخيص
     مسألة إعداد لدى المشترك لا التزاماً مثبَّتاً في المنتج. */
  --body:Alexandria,"Segoe UI",system-ui,sans-serif;
  --display:Zain,Alexandria,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --bg:#F2F4F7; --bg-2:#E9ECF1; --surface:#FFFFFF; --surface-2:#F5F7FA;
  --line:#DEE3EA; --line-2:#C7CFDA; --line-3:#AEB9C7; --surface-3:#EDF1F6; --ink:#161B22; --ink-2:#414B58; --muted:#6B7684;
  --accent-ink:#FFFFFF; --shadow:0 8px 24px rgba(16,24,40,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:14px;line-height:1.7;
  direction:rtl;text-align:right;-webkit-font-smoothing:antialiased;
}
/* التتبّع (letter-spacing) يتبع الحجم: النص الكبير يحتاج تضييقاً لأن الحروف
   تتباعد بصرياً كلما كبرت، والصغير يحتاج توسيعاً طفيفاً ليُقرأ. قيمة واحدة
   لكل المقاسات تكون خاطئة في أحدها حتماً. */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0}
h1{font-size:1.35rem;line-height:1.2;letter-spacing:-.014em}
h2{font-size:1.15rem;line-height:1.25;letter-spacing:-.01em}
h3{font-size:1rem;line-height:1.35;letter-spacing:-.006em}
h4{font-size:.9rem;line-height:1.4;letter-spacing:-.002em;font-weight:600}
.display{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.08;letter-spacing:-.022em}
.eyebrow{font-size:.688rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}
a{color:var(--accent);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------- shell ---------------- */
.shell{display:grid;grid-template-columns:244px 1fr;min-height:100vh}
.side{grid-column:1;grid-row:1}
.main{grid-column:2;grid-row:1}
/* نقطة الانكسار عند ٧٨٠ لا ٩٠٠: عند عرض ٩٠٠ يبقى للمحتوى ٦٥٦ بكسل بعد
   القائمة — أوسع من أن نطويها فوقه ونجبر القارئ على التمرير قبل أن يرى شيئاً. */
@media(max-width:780px){
  .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .side{grid-column:1;grid-row:1}
  .main{grid-column:1;grid-row:2}
}
.side{
  background:var(--bg-2);border-inline-end:1px solid var(--line);
  padding:16px 12px;position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:4px;
}
@media(max-width:780px){.side{position:static;height:auto}}
.brand{display:flex;align-items:center;gap:10px;padding:8px 10px 18px}
.brand b{font-family:var(--display);font-size:22px;letter-spacing:-.01em}
.brand small{color:var(--muted);font-size:11px;display:block;margin-top:-4px}
.navlink{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  color:var(--ink-2);cursor:pointer;position:relative;border:0;background:none;
  width:100%;text-align:right;
}
.navlink:hover{background:var(--surface);color:var(--ink)}
.navlink.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--ink)}
.navlink.on::before{content:"";position:absolute;inset-inline-start:-7px;top:8px;bottom:8px;width:3px;background:var(--accent);border-radius:2px}
.navlink svg{width:15px;height:15px;flex:none;opacity:.75}
.navgroup{margin-top:6px}
.navsub{padding-inline-start:22px;display:flex;flex-direction:column;gap:2px}
.navsub .navlink{padding:7px 12px;font-size:13px}
.nav-sep{height:1px;background:var(--line);margin:10px 6px}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{
  display:flex;align-items:center;gap:14px;padding:12px 20px;
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--bg-2) 72%,transparent);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.topbar h1{font-size:19px}
.topbar .sub{color:var(--muted);font-size:12px;margin-top:-2px}
.topbar .spacer{flex:1}
.iconbtn{
  width:32px;height:32px;display:grid;place-items:center;border-radius:8px;
  background:transparent;border:1px solid transparent;cursor:pointer;color:var(--muted);
  transition:background .14s ease,color .14s ease,transform .1s ease-out;
}
.iconbtn:active{transform:scale(.94)}
.iconbtn:hover{background:var(--surface);color:var(--ink)}
.iconbtn svg{width:16px;height:16px}
.badge-dot{position:relative}
.badge-dot[data-n]:not([data-n="0"])::after{
  content:attr(data-n);position:absolute;top:2px;inset-inline-start:2px;
  background:var(--danger);color:#fff;border-radius:9px;font-size:10px;
  min-width:16px;height:16px;display:grid;place-items:center;padding:0 4px;font-family:var(--mono);
}
/* فراغ سفلي يكفي زرّ البلاغ العائم: آخر صفّ في أي صفحة يجب أن يبقى قابلاً
   للضغط، لا محجوباً خلف زر ثابت. */
.content{padding:22px 22px 84px;max-width:1180px;width:100%;margin:0 auto;flex:1}

/* impersonation */
.impersonate{
  background:color-mix(in srgb,var(--warn) 18%,var(--bg));
  border-bottom:1px solid color-mix(in srgb,var(--warn) 45%,transparent);
  color:var(--warn);padding:8px 20px;display:flex;align-items:center;gap:12px;font-size:13px;
}
.impersonate .spacer{flex:1}

/* ---------------- primitives ---------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card + .card{margin-top:14px}
.card h3{font-size:16px;margin-bottom:4px}
.card .hint{color:var(--muted);font-size:12.5px;margin:0 0 14px}
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.spacer{flex:1}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 15px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--ink);cursor:pointer;font-size:13.5px;
  transition:background .14s ease,border-color .14s ease,transform .1s ease-out;white-space:nowrap;
}
.btn:hover{border-color:var(--line-3);background:var(--surface-3)}
/* الاستجابة عند الضغط لا عند الإفلات — انتظار `click` يجعل الزر يبدو ميتاً. */
.btn:active{transform:scale(.972)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.primary{background:var(--accent-solid);border-color:var(--accent-solid);color:var(--accent-ink);font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn svg{width:14px;height:14px;opacity:.9}

label.f{display:block;margin-bottom:12px}
label.f > span{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:5px}
label.f > .note{color:var(--muted);font-size:11.5px;margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],select,textarea{
  width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--bg-2);color:var(--ink);
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
textarea{min-height:84px;resize:vertical;line-height:1.7}
input[type=range]{width:100%;accent-color:var(--accent)}
input[type=color]{width:38px;height:30px;padding:2px;border-radius:6px;border:1px solid var(--line-2);background:var(--bg-2);cursor:pointer}
input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}

.chip{
  padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--surface-2);cursor:pointer;font-size:12.5px;user-select:none;
}
.chip.on{background:var(--accent-solid);border-color:var(--accent-solid);color:var(--accent-ink);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:7px}

.pill{padding:3px 10px;border-radius:999px;font-size:11.5px;border:1px solid transparent;white-space:nowrap}
.pill.ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.pill.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.pill.err{background:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger)}
.pill.mut{background:var(--surface-2);color:var(--muted)}
.pill.info{background:color-mix(in srgb,var(--info) 18%,transparent);color:var(--info)}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-size:12px;font-weight:600}
tbody tr:hover{background:var(--surface-2)}
.tw{overflow-x:auto}

.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.stat .k{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:8px}
.stat .v{font-family:var(--display);font-size:30px;font-weight:700;margin-top:6px;line-height:1}
.stat .d{color:var(--muted);font-size:11.5px;margin-top:2px}

.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty h4{color:var(--ink-2);margin-bottom:6px;font-size:15px}

.note{border-inline-start:3px solid var(--accent);background:var(--surface);padding:12px 14px;border-radius:0 8px 8px 0;font-size:13px}
.note.warn{border-inline-start-color:var(--warn);color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--surface))}
.note.err{border-inline-start-color:var(--danger);color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--surface))}
.note.ok{border-inline-start-color:var(--ok)}

/* modal */
.backdrop{position:fixed;inset:0;background:rgba(3,6,10,.62);display:grid;place-items:center;z-index:100;padding:20px}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);width:min(560px,100%);max-height:88vh;overflow:auto}
.modal header{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.modal header h3{font-size:17px}
.modal .body{padding:18px 20px}
.modal footer{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-start}
.modal.wide{width:min(940px,100%)}

/* dropdown */
.menu{position:absolute;top:44px;inset-inline-start:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:230px;z-index:60;overflow:hidden}
.menu button,.menu a{display:flex;width:100%;gap:9px;align-items:center;padding:9px 13px;background:none;border:0;cursor:pointer;color:var(--ink);font-size:13.5px;text-align:right}
.menu button:hover,.menu a:hover{background:var(--surface-2)}
.menu .sep{height:1px;background:var(--line)}

/* toast */
#toasts{position:fixed;bottom:18px;inset-inline-start:18px;display:flex;flex-direction:column;gap:8px;z-index:300}
.toast{background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--accent);border-radius:8px;padding:11px 15px;box-shadow:var(--shadow);max-width:400px;font-size:13px;animation:slide .18s ease-out}
.toast.err{border-inline-start-color:var(--danger)}
.toast.warn{border-inline-start-color:var(--warn)}
@keyframes slide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.toast{animation:none}}

/* report button */
.report-fab{position:fixed;bottom:18px;inset-inline-end:18px;z-index:200}
/* الرسائل فوق زرّ البلاغ لا تحته: عنصران في الركن نفسه أحدهما يحجب الآخر. */
#toasts{inset-inline-start:auto;inset-inline-end:18px;bottom:70px}

/* ---------------- editor ---------------- */
.editor{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:20px;align-items:start}
@media(max-width:1000px){.editor{grid-template-columns:1fr}}
.stage{position:sticky;top:78px}

/* ---------------------------------------------------------------------------
   لوحة صفحة المشروع محدودةٌ بارتفاع الشاشة لا بعرض عمودها.

   العمود الأيسر `1fr`، واللوحة رأسية (٩:١٦). فعلى شاشةٍ عريضة يصير عرض العمود
   تسعمئة بكسل، ويصير ارتفاع اللوحة ألفاً وستّمئة — أطول من الشاشة بثلاثة
   أضعاف. المحرّر عندها لا يرى أعلى الريل وأسفله معاً، فيمرّر الصفحة صعوداً
   ونزولاً مع كل تعديل موضع.

   والحلّ عرضٌ مشتقٌّ من الارتفاع المتاح لا من عرض العمود:

       العرض = min(عرض العمود، الارتفاع المتاح × نسبة اللوحة)

   لماذا لا `max-height` وحدها؟ لأن صندوقاً كتليّاً بعرضٍ تلقائي يملأ حاويته
   ثم تحدّد `aspect-ratio` ارتفاعه؛ و`max-height` تقصّ الارتفاع ولا تعيد حساب
   العرض — فتخرج لوحةٌ مقصوصة لا لوحةٌ أصغر.

   و`--ar` تكتبها `syncAspectFrame` من نسبة الريل نفسها لا من ٩:١٦ مفترضة:
   القالب قد يكون ١:١ أو ٤:٥ أو ١٦:٩، وثبتُ النسبة هنا يكسر الثلاثة. */
.stage .canvas-wrap{
  width:min(100%, calc((100dvh - var(--stage-chrome, 168px)) * var(--ar, 0.5625)));
  margin-inline:auto}
@media(max-width:1000px){
  /* بعمودٍ واحد لم تعد اللوحة تزاحم لوحة التحكم على الشاشة، والعرض الكامل
     أنفع من ارتفاعٍ محجوز لشيء تحتها. */
  .stage .canvas-wrap{width:100%}
}

.canvas-wrap{background:#000;border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative;aspect-ratio:9/16}
.canvas{position:absolute;inset:0;transform-origin:top right}
.canvas video,.canvas img.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.layer{position:absolute;inset:0;pointer-events:none}
.layer .el{position:absolute;pointer-events:auto;cursor:move;display:flex;align-items:center;justify-content:flex-end;white-space:pre}
.layer .el.sel{outline:2px solid var(--accent);outline-offset:2px}
.layer .guides{position:absolute;inset:0;pointer-events:none;opacity:.55}
.player{display:flex;align-items:center;gap:10px;margin-top:10px}
.player .time{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.scrub{flex:1;accent-color:var(--accent)}

.tabs{display:flex;gap:6px;flex-wrap:wrap;position:sticky;top:62px;background:var(--bg);padding:8px 0;z-index:20}
.tab{padding:6px 13px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface-2);cursor:pointer;font-size:13px}
.tab.on{background:var(--accent-solid);border-color:var(--accent-solid);color:var(--accent-ink);font-weight:600}

.acc{border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-bottom:10px;overflow:hidden}
.acc > summary{padding:12px 15px;cursor:pointer;display:flex;align-items:center;gap:10px;list-style:none;user-select:none}
.acc > summary::-webkit-details-marker{display:none}
.acc > summary b{font-family:var(--display);font-size:15px;font-weight:700}
.acc > summary .sum{color:var(--muted);font-size:12px;margin-inline-start:auto;font-family:var(--mono)}
.acc[open] > summary{border-bottom:1px solid var(--line)}
.acc .inner{padding:15px}
.acc.locked > summary{opacity:.6;cursor:not-allowed}

.field-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.stepper button{width:28px;height:30px;background:var(--surface-2);border:0;cursor:pointer;color:var(--ink)}
.stepper button:hover{background:var(--line)}
.stepper input{width:56px;text-align:center;border:0;background:transparent;padding:5px 0;font-family:var(--mono)}
.eye{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--line-2);cursor:pointer;background:var(--surface-2);color:var(--muted)}
.eye.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.seg button{padding:6px 12px;background:var(--surface-2);border:0;cursor:pointer;color:var(--ink-2);font-size:12.5px}
.seg button.on{background:var(--accent-solid);color:var(--accent-ink);font-weight:600}

.cap-row{border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:7px;background:var(--bg-2)}
.cap-row.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg-2))}
.cap-row .t{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.cap-row .t input{width:74px;padding:3px 6px;font-size:11.5px}
.cap-row textarea{min-height:38px;margin-top:6px;font-size:13px}

.savestate{font-size:12px;color:var(--muted);font-family:var(--mono)}
.savestate.dirty{color:var(--warn)}
.savestate.saved{color:var(--ok)}

.matrix{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.matrix figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.matrix img{width:100%;display:block;aspect-ratio:9/16;object-fit:cover;background:#000}
/* لقطة معرض القوالب: SVG مضمّن لا صورة — نفس المقاس ونفس النسبة. */
.matrix > figure > div > svg{width:100%;display:block;aspect-ratio:9/16;background:#000}
.matrix figcaption{padding:9px 11px;font-size:12.5px;display:flex;align-items:center;gap:8px}

.skel{background:linear-gradient(90deg,var(--surface),var(--surface-2),var(--surface));background-size:200% 100%;animation:sk 1.1s infinite;border-radius:8px}
@keyframes sk{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skel{animation:none}}


/* ---------------- avatar ---------------- */
.avatar{
  display:grid;place-items:center;flex:none;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 18%,var(--surface-2));
  color:var(--accent);font-family:var(--display);font-weight:700;
  line-height:1;user-select:none;overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.sm{width:28px;height:28px;font-size:12px}
.avatar.md{width:40px;height:40px;font-size:16px}
.avatar.lg{width:56px;height:56px;font-size:21px}

/* ---------------- page header ---------------- */
/* رأس موحّد لكل صفحة: هوية الصفحة يميناً وأفعالها يساراً، بمقاس ثابت
   لا يتغيّر من صفحة لأخرى — الاتساق هو ما يجعل التنقّل قابلاً للتوقّع. */
.page-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.page-head .t{min-width:0}
.page-head h2{margin-bottom:2px}
.page-head p{color:var(--muted);font-size:12.5px;margin:0}
.page-head .acts{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------------- definition rows ---------------- */
/* صفوف «تسمية ← قيمة» بدل شبكة بطاقات لكل حقل: القراءة أسرع والمسح البصري
   عمودي واحد. */
/* ---------------------------------------------------------- لوحة المنصّة
   ثلاثة أنماط لا أكثر، وكلّها امتدادٌ لما في الورقة: صفّ قائمة، وزوجُ
   «تسمية/قيمة»، وحقلٌ في نموذج. لوحةٌ جديدة لا تستحقّ لغةً بصرية جديدة. */
.kvs{display:flex;flex-wrap:wrap;gap:18px}
.kvs .kv{display:flex;flex-direction:column;gap:2px}
.kvs .kv .k{color:var(--muted);font-size:12px}
.kvs .kv b{font-size:16px}
.listrow{gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.listrow:last-child{border-bottom:0}
.fld{display:flex;flex-direction:column;gap:5px;padding:7px 0}
.fld > span{color:var(--muted);font-size:12.5px}

.rows{display:flex;flex-direction:column}
.rows .r{display:flex;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.rows .r:last-child{border-bottom:0}
.rows .r > .k{color:var(--muted);font-size:12.5px;width:120px;flex:none}
.rows .r > .v{flex:1;min-width:0;font-size:13.5px}
.rows .r > .a{margin-inline-start:auto}
@media(max-width:560px){
  .rows .r{flex-direction:column;align-items:stretch;gap:6px}
  .rows .r > .k{width:auto}
}

/* ---------------- segmented control ---------------- */
.segmented{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);
  border-radius:9px;padding:2px;gap:2px}
.segmented button{padding:5px 13px;border:0;border-radius:7px;background:transparent;
  color:var(--muted);cursor:pointer;font-size:12.5px;transition:background .14s ease,color .14s ease}
.segmented button.on{background:var(--surface);color:var(--ink);font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.18)}

/* ---------------- accessibility preferences ---------------- */
/* حركة أقل لا تعني بلا تغذية راجعة — تعني تلاشياً بدل انزلاق، وبلا تجاوز. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .btn:active,.iconbtn:active{transform:none}
}
@media (prefers-reduced-transparency: reduce){
  .topbar{background:var(--bg-2);backdrop-filter:none;-webkit-backdrop-filter:none}
  .backdrop{background:rgba(3,6,10,.92)}
}
@media (prefers-contrast: more){
  :root{--line:#4A5666;--line-2:#67748A;--muted:#98A4B4}
  .btn,.card,.modal,.menu{border-color:var(--line-2)}
}

/* ---------------- الرادار ---------------- */
/* بطاقة الرادار: صورة فوق، ثم عنوان وسطر «لماذا هو رائج»، ثم أسبابه، والفعل
   الأساسي في الأسفل دائماً — الترتيب نفسه في كل بطاقة مهما اختلف المصدر،
   فالمسح البصري لعشرين بطاقة يبقى ممكناً. */
.radar-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.rcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column}
.rcard .thumb{aspect-ratio:16/9;background:var(--surface-2);position:relative;overflow:hidden}
.rcard .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rcard .thumb .ph{width:100%;height:100%;display:grid;place-items:center;color:var(--muted);
  font-size:12px;text-align:center;padding:10px}
.rcard .thumb .src{position:absolute;top:8px;inset-inline-start:8px;background:rgba(3,6,10,.72);
  color:#fff;border-radius:999px;padding:3px 9px;font-size:11px}
.rcard .b{padding:13px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.rcard h4{font-size:14.5px;line-height:1.35;margin:0}
.rcard .why{color:var(--ink-2);font-size:12.5px;line-height:1.5}
.rcard .rmeta{color:var(--muted);font-size:11.5px;display:flex;flex-wrap:wrap;gap:6px;
  align-items:center;font-family:var(--mono)}
.rcard .acts{margin-top:auto;display:flex;gap:8px;align-items:center;padding-top:4px}
/* زرّ «+» مربّع بلا كلمة: الفعل الثانوي بجانب «ما القصة؟» — يأخذ حجم أيقونة
   لا حجم جملة، فلا يزاحم القراءةَ التي هي غرض الرادار. */
.rcard .rcard-add{width:34px;min-width:34px;padding:0;display:grid;place-items:center}
.rcard .rcard-add svg{width:16px;height:16px}

/* مؤشّر الدرجة: شريط هادئ لا رقم صارخ — الدرجة ترتيب نسبي لا حكم مطلق،
   والرقم يبقى متاحاً في التلميح لمن يريده. */
.score{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);
  font-family:var(--mono)}
.score .track{width:52px;height:5px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.score .fill{height:100%;background:var(--accent);border-radius:999px}

.radar-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.srcline{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.tabrow{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);
  border-radius:10px;padding:13px 14px;background:var(--surface);margin-bottom:10px}
.tabrow .hd{display:flex;align-items:center;gap:9px}
.tabrow .hd input[type=text]{max-width:220px}
/* منتقي الدولة عنصر في شريط لا حقل نموذج: `select` في هذه الواجهة عرضه كامل
   افتراضياً، وهنا يجب أن يأخذ قدر نصّه. */
.radar-bar select{width:auto;min-width:150px}

/* ---------------- الرئيسية: اختصارات ---------------- */
/* الصفحة الأولى سؤالها واحد: «ماذا تريد أن تفعل؟». فالاختصارات هي المحتوى،
   لا زينة فوقه — ولذلك تأتي أولاً وتأخذ الوزن البصري، والأرقام تنزل تحتها
   إلى صفّ واحد خفيف. وكل بطاقة تحمل سطر سببها: بطاقة تظهر بلا سبب تدرّب
   المستخدم على تجاهل المكان كلّه. */
.shortcuts{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
  margin-bottom:22px}
.sc{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:right;
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--ink);cursor:pointer;
  transition:border-color .14s ease,background .14s ease,transform .1s ease-out}
.sc:hover{border-color:var(--line-3);background:var(--surface-2)}
.sc:active{transform:scale(.985)}
.sc .ic{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;
  background:var(--surface-2);color:var(--ink-2)}
.sc .ic svg{width:16px;height:16px}
.sc .t{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}
.sc .t b{font-family:var(--display);font-size:14px;font-weight:700;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc .t span{color:var(--muted);font-size:11.5px;line-height:1.5}
.sc.key{background:color-mix(in srgb,var(--accent) 10%,var(--surface));
  border-color:color-mix(in srgb,var(--accent) 42%,transparent)}
.sc.key:hover{background:color-mix(in srgb,var(--accent) 15%,var(--surface))}
.sc.key .ic{background:var(--accent-solid);color:var(--accent-ink)}
.sc.alert{border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.sc.alert .ic{background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger)}
.sc.due .ic{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}

/* الأرقام مرجع لا عنوان: صفّ واحد خفيف بدل أربع بطاقات بأرقام ٣٠ بكسل. */
.tally{display:flex;flex-wrap:wrap;gap:12px 30px;padding:14px 16px}
.tally .n{display:flex;flex-direction:column;gap:1px}
.tally .n b{font-family:var(--display);font-size:19px;font-weight:700;line-height:1.15}
.tally .n span{color:var(--muted);font-size:11.5px}

/* صفّ مشروع في «أحدث المشاريع» */
.plist{display:flex;flex-direction:column}
.plist button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 4px;
  background:none;border:0;border-top:1px solid var(--line);cursor:pointer;
  color:var(--ink);text-align:right;font-size:13px}
.plist button:first-child{border-top:0}
.plist button:hover{background:var(--surface-2)}
.plist .nm{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.plist .mt{color:var(--muted);font-size:11.5px;white-space:nowrap}
@media(max-width:560px){.plist .mt.when{display:none}}

/* نتائج البحث في التفريغات: صفٌّ لكل مقطع مطابق — الزمن أولاً ثم النصّ.
   الزمن بخطّ أحادي وبعرض ثابت فتصطفّ الطوابع رأسياً وتُقرأ كعمود. */
.hits{display:flex;flex-direction:column}
.hit{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:right;
  padding:9px 6px;background:none;border:0;border-top:1px solid var(--line);
  cursor:pointer;color:var(--ink);font-size:13px;line-height:1.75}
.hit:first-child{border-top:0}
.hit:hover{background:var(--surface-2)}
.hit .at{flex:none;min-width:46px;font-family:var(--mono);font-size:11.5px;
  color:var(--muted);padding-top:3px}
.hit .snip{flex:1;min-width:0}
/* التظليل بخلفية لا بلون خطّ: العربية تُقرأ بالكتلة، ولونٌ وحده يضيع في سطر. */
.hit .hl{background:color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:3px;padding:1px 2px;font-weight:700}

/* ═══════════════════════════════ مصمّم القالب — تخطيط ثابت بلا تمرير ═══
   الشكوى التي وُلد منها هذا التخطيط: «لا أريد النزول لأسفل القائمة لتعديل شيء
   ثم أعود للأعلى لأشاهد ما عدّلته». الجواب بنيوي لا تجميلي: الصفحة كلها بارتفاع
   الشاشة، والتمرير يقع **داخل عمودَي اللوحات** وحدهما، فاللوحة (المعاينة) لا
   تغادر مرأى العين أبداً مهما طال ما يعدّله المدير.

   الأعمدة من اليمين (RTL): العناصر وخصائصها · اللوحة · الأقسام العامة. الأقرب
   إلى بداية القراءة هو الأكثر لمساً. */
body.designing{overflow:hidden}
body.designing .shell{min-height:0;height:100dvh}
body.designing .main{height:100dvh;overflow:hidden}
body.designing .content{padding:0;max-width:none;min-height:0;overflow:hidden}

.dsg{display:flex;flex-direction:column;gap:0;height:100%;min-height:0}
.dsg-body{flex:1;min-height:0;display:grid;gap:0;
  grid-template-columns:minmax(300px,330px) minmax(0,1fr) minmax(280px,320px)}
.dsg-col{min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px 12px 64px;
  background:var(--bg-2);display:flex;flex-direction:column;gap:10px}
.dsg-col.right{border-inline-start:1px solid var(--line)}
.dsg-col.left{border-inline-end:1px solid var(--line)}
/* بين ١٠٥٠ و١٤٢٠ نضيّق العمودين قبل أن نضيّق اللوحة: اللوحة هي موضوع الشاشة،
   وعمودُ لوحاتٍ أعرض بعشرين بكسلاً لا يساوي معاينةً أضيق بأربعين. */
@media(max-width:1420px){
  .dsg-body{grid-template-columns:minmax(268px,290px) minmax(0,1fr) minmax(248px,272px)}
  .dsg-col{padding:10px 9px 60px}
}
/* تحت ١٠٥٠ بكسل يعود التخطيط إلى عمود واحد يتمرّر: عمودان بعرض ٣٠٠ لا يتركان
   للّوحة ما يكفي، ومعاينةٌ بعرض ١٢٠ بكسل ليست معاينة. */
@media(max-width:1050px){
  body.designing{overflow:auto}
  body.designing .main,body.designing .shell{height:auto}
  body.designing .content{overflow:visible}
  .dsg{height:auto}
  .dsg-body{grid-template-columns:1fr}
  .dsg-col{overflow:visible;padding-bottom:12px}
  /* اللوحة تلتصق أعلى الصفحة بارتفاعٍ صريح: بلا ارتفاع ينهار صفّ الشبكة على
     محتواه فتصير المعاينة مئة بكسل. */
  .dsg-stage{position:sticky;top:0;z-index:5;background:var(--bg);
    height:min(62vh,560px);border-bottom:1px solid var(--line)}
}

/* شريط الأدوات: صفٌّ واحد يحمل كل ما لا يخصّ عنصراً بعينه. */
.dsg-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:7px 10px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.dsg-bar .nm{width:150px;padding:6px 10px;font-size:13px}
.dsg-bar .sep{width:1px;height:22px;background:var(--line);flex:none}
@media(max-width:1520px){.dsg-bar .hide-sm{display:none}}

.dsg-stage{min-width:0;min-height:0;display:grid;gap:8px;
  grid-template-rows:minmax(0,1fr) auto;padding:12px;background:var(--bg)}
.dsg-stage .canvas-wrap{aspect-ratio:auto;align-self:center;justify-self:center}

/* طبقة التحرير فوق اللوحة: مقابض ومربّعات إمساك وخطوط محاذاة. مرسومة بإحداثيات
   اللوحة نفسها ومقيسة بمقياسها، فما تراه العين فوق العنصر هو رقم الخادم لا
   تقديرٌ ثانٍ. */
.dsg-ov{position:absolute;inset:0;transform-origin:top right;pointer-events:none;
  user-select:none;-webkit-user-select:none}
.dsg-hit{position:absolute;pointer-events:auto;cursor:grab;touch-action:none}
.dsg-hit.drag{cursor:grabbing}
.dsg-hit:hover{outline:1px dashed color-mix(in srgb,var(--accent) 60%,transparent)}
.dsg-sel{position:absolute;pointer-events:none;outline:2px solid var(--accent)}
.dsg-sel.out{outline-color:var(--warn)}
/* التحديد المتعدّد: كل عنصر بإطاره، والرفاق أخفّ من الرئيس، وإطار الإحاطة
   المتقطّع حوله كلّه هو ما تُمسك منه المقابض. */
.dsg-sel.sec{outline-style:dashed;opacity:.75}
.dsg-bb{position:absolute;pointer-events:none;
  outline:2px dashed color-mix(in srgb,var(--accent) 70%,transparent)}
.dsg-back{position:absolute;inset:0;pointer-events:auto;touch-action:none}
.dsg-marq{position:absolute;pointer-events:none;
  border:1.5px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent)}
.dsg-hit.on{cursor:move}
.dsg-h{position:absolute;pointer-events:auto;background:var(--accent);
  border:1px solid #fff;border-radius:2px;touch-action:none}
.dsg-g{position:absolute;background:var(--accent);pointer-events:none;opacity:.9}
.dsg-edit{position:absolute;z-index:8;padding:6px 8px;border-radius:6px;
  border:1px solid var(--accent);background:var(--surface);color:var(--ink);
  font-size:13px;line-height:1.6;resize:none;min-height:34px;box-shadow:var(--shadow)}

/* صفوف لوحة العناصر: عين للإظهار، واسم، وملخّص حيّ. */
.dsg-rows{display:flex;flex-direction:column;gap:2px}
.dsg-row{display:flex;align-items:center;gap:8px;width:100%;text-align:right;
  padding:7px 9px;border-radius:8px;border:1px solid transparent;background:none;
  color:var(--ink);cursor:pointer;font-size:13px}
.dsg-row:hover{background:var(--surface)}
/* الرئيس في تحديدٍ متعدّد يُعلَّم بشريطٍ جانبي: لوحة الخصائص المشتركة تكتب في
   الكلّ، لكن المغنطة أثناء السحب تُحسب عليه هو. */
.dsg-row.lead{box-shadow:inset 3px 0 0 var(--accent)}
.dsg-row.on{background:color-mix(in srgb,var(--accent) 15%,transparent);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.dsg-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsg-row .mt{color:var(--muted);font-size:11px;font-family:var(--mono);flex:none}
.dsg-row .ey{width:24px;height:24px;flex:none;display:grid;place-items:center;
  border-radius:6px;border:0;background:none;color:var(--muted);cursor:pointer}
.dsg-row .ey:hover{background:var(--surface-2);color:var(--ink)}
.dsg-row .ey.on{color:var(--accent)}
.dsg-row .ey svg{width:14px;height:14px}
.dsg-row.bad .nm{color:var(--warn)}

/* لوحةٌ منسدلة تُركَّب على `body` لا داخل العمود: العمود يتمرّر بـ`overflow`
   فيقصّ أي منسدلة تخرج عنه، وقائمةُ ألوانٍ مقصوصة أسوأ من غيابها. */
.dsg-pop{position:fixed;z-index:400;background:var(--surface);
  border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow);
  padding:8px;min-width:210px;max-width:280px;max-height:60vh;overflow:auto}
.dsg-pop .it{display:flex;align-items:center;gap:9px;width:100%;text-align:right;
  padding:7px 9px;border:0;border-radius:7px;background:none;color:var(--ink);
  cursor:pointer;font-size:13px}
.dsg-pop .it:hover{background:var(--surface-2)}
.dsg-pop .it.on{background:color-mix(in srgb,var(--accent) 16%,transparent);font-weight:600}
.dsg-pop .sw{width:15px;height:15px;border-radius:4px;flex:none;
  border:1px solid var(--line-2)}
.dsg-pop .sep{height:1px;background:var(--line);margin:6px 2px}
.dsg-pick{display:flex;align-items:center;gap:8px;width:100%;text-align:right;
  padding:7px 10px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--bg-2);color:var(--ink);cursor:pointer;font-size:13px}
.dsg-pick:hover{border-color:var(--line-3)}
.dsg-pick .sw{width:15px;height:15px;border-radius:4px;flex:none;border:1px solid var(--line-2)}
.dsg-pick .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsg-pick .cv{color:var(--muted);font-size:11px;font-family:var(--mono)}

/* شريط ملاحظات المحرّك تحت اللوحة: يبقى ظاهراً دائماً ولا يزيح المعاينة —
   ارتفاعه محدود وله تمريره. */
.dsg-warn{max-height:84px;overflow:auto;background:color-mix(in srgb,var(--warn) 14%,var(--bg-2));
  border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);
  border-radius:9px;padding:7px 10px;font-size:11.5px;line-height:1.65;color:var(--warn)}

.dsg-sec{border:1px solid var(--line);border-radius:10px;background:var(--surface);
  overflow:hidden}
.dsg-sec > summary{padding:9px 12px;cursor:pointer;display:flex;align-items:center;
  gap:9px;list-style:none;user-select:none;font-size:13.5px}
.dsg-sec > summary::-webkit-details-marker{display:none}
.dsg-sec > summary b{font-family:var(--display);font-size:14px}
.dsg-sec > summary .sum{color:var(--muted);font-size:11.5px;font-family:var(--mono);
  margin-inline-start:auto}
.dsg-sec[open] > summary{border-bottom:1px solid var(--line)}
.dsg-sec .inner{padding:12px}
.dsg-sec .inner label.f{margin-bottom:9px}
.dsg-ttl{font-size:11px;letter-spacing:.04em;color:var(--muted);font-weight:600;
  padding:2px 4px 0}

/* ── معاينة إصدارٍ سابق (نافذة «الإصدارات») ──
   نفس `.canvas-wrap` بعرضٍ محدود: `paintLayout` يقيس `wrap.clientWidth` ويصغّر
   اللوحة إليه، فحاويةٌ بلا عرضٍ صريح داخل نافذةٍ عريضة تُخرج معاينةً بحجم
   الشاشة. ونسبة الأبعاد تُضبط من القالب نفسه في JS لأنها ليست ٩:١٦ دائماً. */
.dsg-vpv-wrap { width: min(300px, 62vw); margin-inline: auto; }