/* ══════════════════════════════════════════════════════════════
   رموز التصميم — منقولة بالحرف من app-DFUk1G1v.css في الـbuild الرسمي
   الأساس shadcn/ui بلوحة neutral. اللون المشبَّع الوحيد في النظام كله
   هو حلقة التركيز #3b82f6 — كل حاجة تانية رمادي/أسود.
   ══════════════════════════════════════════════════════════════ */

/* ── سلّم المقياس — مستخرَج من الـbuild الرسمي ──────────────────
   وحدة المسافة 0.25rem = 4px، وكل المسافات مضاعفاتها.
   سلّم الخط: 12 · 14 · 16 · 18 · 20 · 24 · 30 بارتفاعات سطر محددة.
   نسختي الأولى كانت 13/12.5/11.5/10.5 — مقاسات وسط عشوائية خلّت
   الواجهة تبان لوحة إدارة مضغوطة بدل منتج. */
:root{
  --s:.25rem;
  --t-xs:.75rem;   --lh-xs:1.333;
  --t-sm:.875rem;  --lh-sm:1.428;
  --t-md:1rem;     --lh-md:1.5;
  --t-lg:1.125rem; --lh-lg:1.555;
  --t-xl:1.25rem;  --lh-xl:1.4;
  --t-2xl:1.5rem;  --lh-2xl:1.333;
  --t-3xl:1.875rem;--lh-3xl:1.2;
  --h-sm:2.25rem;  /* 36 */
  --h-md:2.5rem;   /* 40 */
  --h-lg:2.75rem;  /* 44 */
}
:root{
  /* منقولة حرفيًا من .dcx في Dashboard-DiLBou-P.css بتاع المرجع.
     المهم هنا إن الكانفس مش أبيض — أوف-وايت دافي، والبطاقات بيضا فوقه. */
  --bg:#FFFFFF; --card:#FFFFFF; --ink:#0A0A0A; --muted:#737373; --line:#EDEDED;
  --hover:#F5F5F5; --input:#E5E5E5; --ring:#D4D4D4;
  --faint:#A3A3A3;            /* عناوين الحقول الصغيرة */
  --accent:#171717; --accent-fg:#FAFAFA; --accent-soft:#F5F5F5;
  --secondary:#F5F5F5; --secondary-fg:#171717;
  --pos:#16A34A; --neg:#DC2626; --warn:#F59E0B;
  --pos-bg:#F0FDF4; --neg-bg:#FEF2F2; --warn-bg:#FFFBEB;
  --warn-line:rgba(245,158,11,.18);
  /* القائمة الجانبية لها رموزها المنفصلة في المرجع */
  --sb:#fafafa; --sb-fg:#3f3f46; --sb-line:#e8e8e8;
  --sb-hover:#f0f0f0; --sb-hover-fg:#4d4d4d; --sb-active:#ffffff; --sb-ring:#3b82f6;
  /* لوحة الرسوم الباردة */
  --c1:#2662d9; --c2:#2a9d90; --c3:#274754; --c4:#af57db; --c5:#e23670;
  --r:.5rem; --r-xs:.125rem; --r-xl:.75rem; --r-2xl:1rem;
  /* البطاقة عندهم نصف قطرها 16 ومالهاش حد — الحد جاي من الظل نفسه */
  --r-card:12px;
  --sh-sm:0 1px 2px 0 #0000000d;
  --sh:0 1px 3px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
  --sh-md:0 4px 24px rgba(0,0,0,.09), 0 0 0 1px rgba(0,0,0,.04);
}
/* داكن shadcn — الافتراضي لكل الصفحات ما عدا اللوحة */
html[data-theme=dark]{
  --bg:#0A0A0A; --card:#0A0A0A; --ink:#FAFAFA; --muted:#A3A3A3; --line:#262626;
  --hover:#262626; --input:#262626; --ring:#525252; --faint:#737373;
  --accent:#FAFAFA; --accent-fg:#171717; --accent-soft:#262626;
  --secondary:#262626; --secondary-fg:#FAFAFA;
  --pos:#22C55E; --neg:#F87171; --warn:#FBBF24;
  --pos-bg:rgba(34,197,94,.1); --neg-bg:rgba(248,113,113,.1); --warn-bg:rgba(251,191,36,.08);
  --warn-line:rgba(251,191,36,.22);
  --sb:#18181B; --sb-fg:#D4D4D8; --sb-line:#27272A;
  --sb-hover:#27272A; --sb-hover-fg:#FAFAFA; --sb-active:#27272A;
  --sh:0 1px 3px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05);
  --sh-md:0 4px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:var(--t-md)/var(--lh-md) "Instrument Sans",ui-sans-serif,system-ui,-apple-system,"SF Arabic","Segoe UI",Tahoma,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.shell{display:flex;min-height:100vh}

/* ── السايدبار ── */
aside{width:244px;flex:none;background:var(--sb);color:var(--sb-fg);border-inline-start:1px solid var(--sb-line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brandbox{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center}
.logo{width:32px;height:32px;border-radius:var(--r);background:var(--accent);color:var(--accent-fg);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;flex:none}
.brandbox b{font-size:13.5px;display:block;line-height:1.3}
.brandbox small{color:var(--muted);font-size:11px}
.tenant{margin:10px 12px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;
  display:flex;align-items:center;gap:9px}
.tenant .av{width:26px;height:26px;border-radius:7px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.tenant b{font-size:12.5px;display:block;line-height:1.2}
.tenant small{color:var(--muted);font-size:10.5px}
.search{margin:0 12px 6px;position:relative}
.search input{width:100%;height:30px;padding:0 32px 0 10px;border:1px solid var(--input);border-radius:6px;
  font-size:var(--t-xs);
  background:var(--card);color:var(--ink);font-family:inherit}
.search svg{position:absolute;inset-inline-end:9px;top:8px;opacity:.45}
nav{padding:8px;flex:1}
.grp{color:var(--muted);font-size:var(--t-xs);font-weight:500;letter-spacing:normal;
  padding:18px 8px 6px;text-transform:none;opacity:.7}
nav a{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 8px;border-radius:6px;
  color:var(--sb-fg);font-size:var(--t-sm);font-weight:500;margin-bottom:2px;line-height:1.3}

nav a.on{background:var(--sb-active);color:var(--ink);font-weight:600;box-shadow:var(--sh-sm)}
nav a:hover{background:var(--sb-hover);color:var(--sb-hover-fg)}
nav a:focus-visible{outline:2px solid var(--sb-ring);outline-offset:1px}
nav a .ic{width:17px;text-align:center;opacity:.75;font-size:14px}
nav a .badge{margin-inline-start:auto;font-size:10.5px;font-weight:700;background:var(--bg);
  border:1px solid var(--line);border-radius:99px;padding:1px 7px;color:var(--muted)}
.sidefoot{border-top:1px solid var(--line);padding:11px 14px;display:flex;gap:9px;align-items:center}
.sidefoot b{font-size:12px;display:block}.sidefoot small{color:var(--muted);font-size:10.5px}

/* ── الشريط العلوي ── */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
header{height:64px;background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;padding:0 20px;position:sticky;top:0;z-index:9}
header .ttl{font-weight:600;font-size:var(--t-sm)}
header .sp{flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;
  padding:4px 11px;font-size:12px;font-weight:600;background:var(--bg)}
.chip .dot{width:6px;height:6px;border-radius:99px;background:var(--pos)}
.iconbtn{width:28px;height:28px;border-radius:6px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:14px}
.iconbtn:hover{background:var(--hover)}

/* ── المحتوى ── */
main{padding:24px 28px 80px;max-width:1400px;width:100%}
.phead{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px}
.phead h1{font-size:20px;margin:0 0 3px;font-weight:800;letter-spacing:-.3px}
.phead p{margin:0;color:var(--muted);font-size:13px}
h2{font-size:var(--t-lg);line-height:27px;margin:0;font-weight:700;color:var(--ink)}
.sub{color:var(--muted)}
.grid{display:grid;gap:16px}
.g5{grid-template-columns:repeat(5,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1180px){.g5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.g5,.g4,.g3{grid-template-columns:repeat(2,1fr)}aside{display:none}}
@media(max-width:600px){.g5,.g4,.g3,.g2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:20px;box-shadow:var(--sh-sm)}
/* ترويسة بطاقة — المرجع: border-b bg-muted/20 px-5 py-4 */
.card>h3:first-child{margin:-20px -20px 16px;padding:14px 20px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--hover) 55%,transparent);font-size:var(--t-sm);font-weight:600;
  border-radius:var(--r-xl) var(--r-xl) 0 0}
.card.p0{padding:0;overflow:hidden}
.kpi .l{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.3px}
.kpi .v{font-size:25px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.6px}
.kpi .d{font-size:11.5px;margin-top:2px;color:var(--muted)}
.spark{margin-top:8px;display:block}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm);line-height:var(--lh-sm)}
th{text-align:start;color:var(--muted);font-weight:500;font-size:var(--t-xs);
  letter-spacing:normal;height:40px;padding:0 16px;vertical-align:middle;
  border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--hover)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.up{color:var(--pos)}.dn{color:var(--neg)}.mut{color:var(--muted)}
.pill{display:inline-block;padding:2px 8px;border-radius:99px;font-size:10.5px;font-weight:700;white-space:nowrap}
.p-ok{background:rgba(15,157,88,.13);color:var(--pos)}
.p-bad{background:rgba(217,48,37,.13);color:var(--neg)}
.p-warn{background:rgba(232,163,61,.16);color:var(--warn)}
.p-mut{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.p-acc{background:var(--accent-soft);color:var(--accent)}
.thumb{width:36px;height:36px;border-radius:8px;object-fit:cover;background:var(--bg);border:1px solid var(--line)}
.nm{display:block;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{text-align:center;color:var(--muted);padding:44px 12px;font-size:13px}
.bar{height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:9px}
.bar i{display:block;height:100%;background:var(--ink)}
form.f{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
input,select{background:transparent;border:1px solid var(--input);color:var(--ink);
  border-radius:6px;height:30px;font-family:inherit;font-size:var(--t-xs);
  padding:0 10px;line-height:1}
button{background:var(--accent);color:var(--accent-fg);border:0;border-radius:6px;
  height:28px;padding:0 12px;font-family:inherit;font-size:var(--t-xs);font-weight:500;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;line-height:1}
button.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
button.ghost:hover{color:var(--ink);background:var(--hover)}
.vs{display:flex;align-items:center;gap:10px}
.vs .side{flex:1;min-width:0}.vs .st{font-size:10.5px;color:var(--muted);font-weight:600}
.vs .pr{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums}
.note{background:var(--accent-soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  font-size:12px;display:flex;gap:10px;margin-bottom:16px}
/* مودال معلومات الصفحة */
dialog{border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);
  max-width:520px;width:92%;padding:0}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog .dh{padding:16px 18px 10px;border-bottom:1px solid var(--line);font-weight:800;font-size:15px}
dialog .db{padding:14px 18px 18px;max-height:60vh;overflow:auto}
dialog .db h4{margin:14px 0 4px;font-size:12px;color:var(--muted);font-weight:700}
dialog .db h4:first-child{margin-top:0}
dialog .db p,dialog .db li{font-size:13px;line-height:1.65;margin:0 0 6px}
dialog .db ul{margin:0;padding-inline-start:18px}
dialog .df{padding:0 18px 16px;text-align:end}
.subgrp{display:flex;align-items:center;gap:7px;color:var(--ink);font-size:11.5px;font-weight:700;
  padding:11px 9px 4px;opacity:.85}
.subgrp .ic{opacity:.6;font-size:12px}
nav a{padding-inline-start:9px}
nav a .ic{font-size:13px}
nav a.lock{opacity:.45;cursor:default}
nav a.lock:hover{background:transparent}
nav a .badge{font-size:10px}
/* شريط الأدوات */
.toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px;
  padding-bottom:13px;border-bottom:1px solid var(--line)}
.toolbar .sp{flex:1}
.segs{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:2px}

.segs a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
a.chip:hover{background:var(--hover)}
/* شريط الإنسايت */
.insight{display:flex;gap:11px;align-items:center;background:rgba(232,163,61,.10);
  border:1px solid rgba(232,163,61,.28);border-radius:13px;padding:13px 15px;margin-bottom:22px;font-size:13px}
.insight>span:first-child{font-size:17px}
.insight>div{flex:1;line-height:1.7}
/* القنوات */
.channels{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:8px}
.chan{text-align:center;display:block}
.chan b{display:block;font-size:15px;font-weight:800;margin-top:7px;font-variant-numeric:tabular-nums}
.chan small{display:block;color:var(--muted);font-size:11px}
.chan.off{opacity:.42}
.ring{width:56px;height:56px;border-radius:50%;border:2.5px solid var(--ink);display:grid;
  place-items:center;font-size:20px;font-weight:800;color:var(--ink);margin:0 auto;background:var(--card)}
.ring.sm{width:32px;height:32px;font-size:13px;border-width:2px;margin:0}
.chan.off .ring{border-color:var(--line);color:var(--muted);font-size:17px}
/* إحصاءات مصغّرة */
.ministats{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:11px;
  padding-top:11px;border-top:1px solid var(--line)}
.ministats b{display:block;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.ministats small{color:var(--muted);font-size:10px}
.cardhd{padding:10px 13px;border-bottom:1px solid var(--line);font-size:11.5px;font-weight:700}
.cardhd.up{color:var(--pos)} .cardhd.dn{color:var(--neg)}

/* قصّ التعليقات الطويلة على 3 سطور مع إظهار الكامل في tooltip */
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
        overflow:hidden;line-height:1.55;max-height:4.65em;cursor:help}

/* ── أنماط منقولة من المرجع ────────────────────────────────── */
/* ترويسة الصفحة: شارة صغيرة فوق، عنوان سؤال، وصف تحته */
.phead{margin:2px 0 14px}
.phead .badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);background:var(--hover);
  padding:3px 9px;border-radius:99px;margin-bottom:7px}
.phead h1{font-size:22px;font-weight:800;margin:0 0 4px;line-height:1.25}
.phead p{margin:0;color:var(--muted);font-size:13px;max-width:70ch}

/* عنوان قسم: سؤال + سطر وصفي بحروف كبيرة تحته */
.shead{margin:22px 0 8px}
.shead h2{font-size:16px;font-weight:700;margin:0}
.shead .sub{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-top:2px}

/* بطاقة KPI بنمط المرجع */
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2xl);
  padding:13px 15px;box-shadow:var(--sh-sm)}
.kpi .lbl{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kpi .val{font-size:24px;font-weight:900;line-height:1.15;margin-top:3px}
.kpi .dlt{font-size:11px;font-weight:600;margin-top:2px}
.kpi .dlt.up{color:var(--pos)} .kpi .dlt.dn{color:var(--neg)}
.kpi .note{font-size:10.5px;color:var(--muted);margin-top:2px}

/* شريط نسب مكدّس */
.stack{display:flex;height:9px;border-radius:99px;overflow:hidden;background:var(--hover);margin:8px 0 6px}
.stack i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11.5px;color:var(--muted)}
.legend b{color:var(--ink);font-weight:700}
.legend .sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-inline-end:5px}

/* لوحتان متجاورتان (المنشور مقابل الموقع) */
.vs{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media(max-width:760px){.vs{grid-template-columns:1fr}}
.vs .pane{border:1px solid var(--line);border-radius:var(--r-xl);padding:12px;background:var(--card)}
.vs .pane .cap{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.strike{text-decoration:line-through;color:var(--muted);font-size:12px;margin-inline-start:6px}
/* ── مجموعات القائمة القابلة للطي (نمط المرجع) ── */
.subgrp{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:0 8px;margin:6px 0 2px;
  background:none;border:0;border-radius:6px;color:var(--sb-fg);font-family:inherit;
  font-size:var(--t-sm);font-weight:500;cursor:pointer;text-align:start;box-shadow:none;line-height:1.3}
.subgrp:hover{background:var(--sb-hover);color:var(--sb-hover-fg)}
.subgrp.on{color:var(--ink)}
.subgrp .chev{margin-inline-start:auto;opacity:.5;transition:transform .15s;display:inline-block}
.subgrp[aria-expanded="true"] .chev{transform:rotate(90deg)}
html[dir=rtl] .subgrp .chev{transform:rotate(180deg)}
html[dir=rtl] .subgrp[aria-expanded="true"] .chev{transform:rotate(90deg)}
nav .sub{padding-inline-start:10px;padding-block:2px;margin-inline-start:14px;
  border-inline-start:1px solid var(--sb-line);display:flex;flex-direction:column;gap:4px}
.badge.lockb{opacity:.5;font-size:10px}
nav .badge{margin-inline-start:auto;font-size:10px;font-weight:600;border-radius:99px;
  padding:1px 8px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}

/* ── الطباعة / حفظ PDF ──────────────────────────────────────
   المرجع فيه «Export PDF» على كل صفحة. إحنا من غير أي مكتبة،
   فالزر بينادي print() والأنماط دي بتحوّل الصفحة لورقة A4 نضيفة. */
@media print{
  @page{size:A4 landscape;margin:10mm}
  aside,header,.toolbar,.noprint,dialog,.iconbtn,form.f,button{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  .shell{display:block}
  .main{margin:0!important;width:100%!important}
  main{padding:0!important;max-width:none!important}
  .card,.kpi{break-inside:avoid;box-shadow:none!important;border:1px solid #ddd!important}
  table{font-size:9.5px!important;width:100%!important}
  th{background:#f2f2f2!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  tr{break-inside:avoid}
  .pill{border:1px solid #bbb;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .clamp3{-webkit-line-clamp:unset;max-height:none;overflow:visible}
  a{text-decoration:none;color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8px;color:#666}
  .grid{display:grid!important}
  .phead{border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:10px}
  /* رأس وتذييل الورقة */
  .printhead{display:block!important}
}
.printhead{display:none}
.segbtn{border:0;border-radius:0;padding:5px 12px;font-family:inherit;font-size:11.5px;font-weight:700;
  cursor:pointer;box-shadow:none}
.segbtn:hover{filter:brightness(.95)}

/* ── KPI بمقاس المرجع: لابل 10px بتتبّع واسع، وقيمة bold مش black ── */
.kpi .lbl{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);line-height:1.3}
.kpi .val{font-size:var(--t-2xl);line-height:var(--lh-2xl);font-weight:700;margin-top:4px}
.kpi{padding:16px 20px}
.kpi .note{font-size:var(--t-xs);line-height:var(--lh-xs);color:var(--muted);margin-top:4px}
.kpi .dlt{font-size:var(--t-xs);font-weight:600;margin-top:4px}
/* مبدّل مقطعي — المرجع: inline-flex rounded-lg border bg-muted/40 p-0.5 */
.segs{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:var(--r);
  background:color-mix(in srgb,var(--hover) 60%,transparent);padding:2px}
.segs a{padding:5px 12px;border-radius:calc(var(--r) - 2px);font-size:var(--t-xs);font-weight:500;
  color:var(--muted)}
.segs a.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:var(--sh-sm)}

/* ── بطاقة المحفظة في القائمة (المرجع: mx-2 mb-2 rounded-xl border bg-muted/40 p-3) ── */
.wallet-card{margin:0 8px 8px;padding:12px;border:1px solid var(--sb-line);border-radius:var(--r-xl);
  background:color-mix(in srgb,var(--sb-hover) 60%,transparent)}
.wallet-card .row{display:flex;align-items:center;justify-content:space-between;
  font-size:var(--t-xs);line-height:1.5}
.wallet-card .row+.row{margin-top:4px;color:var(--muted)}
.wallet-card .chipmini{background:var(--card);border-radius:var(--r);padding:1px 8px;font-size:10px}
.wallet-card .upg{display:flex;align-items:center;justify-content:space-between;margin-top:12px;
  padding:8px 12px;border:1px solid var(--sb-line);border-radius:var(--r);background:var(--card);
  font-size:var(--t-sm);font-weight:500}
.wallet-card .upg:hover{background:var(--sb-hover)}

/* ── مقاسات مقاسة حيًّا من المرجع ─────────────────────────── */
.sub{font-size:var(--t-sm);line-height:20px;color:var(--muted);margin-top:4px}
.shead{margin:36px 0 14px}
.shead h2{font-size:var(--t-lg);line-height:27px;font-weight:700}
.shead .sub{font-size:var(--t-sm);line-height:20px;color:var(--muted);
  margin-top:4px;text-transform:none;letter-spacing:normal;font-weight:400}
/* المبدّل: إطار 3px بنصف قطر 8، والزر 28/12 */
.segs{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:8px;
  background:var(--hover);padding:3px}
.segs a{height:28px;display:inline-flex;align-items:center;padding:0 12px;border-radius:6px;
  font-size:var(--t-xs);font-weight:500;color:var(--muted)}
.segs a.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-sm)}
/* الشرائح والأزرار الثانوية بنفس المقاس */
.chip{height:28px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;
  border:1px solid var(--line);border-radius:6px;font-size:var(--t-xs);font-weight:500;
  background:var(--card);color:var(--ink)}
.chip.on{background:var(--accent);color:var(--accent-fg);border-color:transparent}
/* ترويسة الصفحة */
.phead h1{font-size:var(--t-2xl);line-height:var(--lh-2xl);font-weight:700;margin:0 0 4px}
.phead p{font-size:var(--t-sm);line-height:20px;color:var(--muted);margin:0;max-width:72ch}

/* ═══════════════════════════════════════════════════════════════
   طبقة مطابقة للمرجع — منقولة رقم برقم من
   ref/build/Dashboard-DiLBou-P.css (الكلاس .dcx وتوابعه).
   بتيجي آخر الملف عشان تكسب على أي قاعدة أقدم متضاربة.
   ═══════════════════════════════════════════════════════════════ */
body{-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--ink)}

/* ── البطاقة: نصف قطر 16، من غير حد، الحد بييجي من الظل ── */
.card,.kpi{background:var(--card);border:0;border-radius:var(--r-card);box-shadow:var(--sh)}
.card{padding:20px}
.card.p0{padding:0;overflow:hidden}
.card>h3:first-child{margin:-20px -20px 16px;padding:14px 20px;border:0;
  border-bottom:1px solid var(--line);background:transparent;
  font-size:var(--t-sm);font-weight:600;color:var(--ink);
  border-radius:var(--r-card) var(--r-card) 0 0}

/* ── الحيّز والمسافات: جسم 28px وفاصل 32px بين الأقسام ── */
main{padding:28px 28px 80px;display:flex;flex-direction:column;gap:32px;max-width:1400px;width:100%}
@media(max-width:760px){main{padding:20px 16px 64px;gap:26px}}
main>*{margin-block:0}
.grid{display:grid;gap:20px}
.g4{gap:16px}

/* ── السلّم الطباعي ── */
.phead h1,h1{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.25;margin:0}
h2,.shead h2{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:27px;margin:0}
.sub,.phead p,.shead .sub{font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:4px;
  font-weight:400;letter-spacing:normal;text-transform:none}
.lbl,.kpi .lbl,.kpi .l{font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
.hint{font-size:11.5px;color:var(--muted);opacity:.75;margin-top:6px;display:inline-flex;align-items:center}

/* ترويسة صف: عنوان يسار ورابط «الكل» يمين على نفس خط الأساس */
.rowhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.showall{font-size:12px;color:var(--muted);background:transparent;border:0;cursor:pointer;
  padding:4px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;height:auto}
.showall:hover{background:var(--hover);color:var(--ink)}

/* ── أرقام الـKPI ── */
.kpi{padding:18px 22px}
.kpi .val,.kpi .v{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--ink);line-height:1;margin:0 0 8px}
.kpi .dlt,.kpi .d{font-size:11.5px;font-weight:600;margin-top:0}

/* ── الحبّة (الفرق ±) ── */
.pill{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:99px;
  font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;border:0}
.p-ok,.pill.up{background:var(--pos-bg);color:var(--pos)}
.p-bad,.pill.dn{background:var(--neg-bg);color:var(--neg)}
.p-warn{background:var(--warn-bg);color:var(--warn)}
.p-mut{background:var(--hover);color:var(--muted)}
.p-acc{background:var(--accent-soft);color:var(--ink)}

/* ── المبدّل ── */
.segs{display:inline-flex;background:var(--hover);border-radius:8px;padding:3px;gap:2px;
  border:1px solid var(--line)}
.segs a{height:28px;display:inline-flex;align-items:center;padding:0 12px;border-radius:6px;
  border:0;font-size:12px;font-weight:500;background:transparent;color:var(--muted);
  white-space:nowrap;transition:all .15s}
.segs a.on{background:var(--card);color:var(--ink);font-weight:500;box-shadow:0 1px 3px #0000001a}

/* ── الأزرار ── */
.iconbtn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;border:1px solid var(--line);background:var(--card);cursor:pointer;
  color:var(--muted);transition:background .15s;font-size:14px}
.iconbtn:hover{background:var(--hover);color:var(--ink)}
button.ghost,.chip{height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--line);
  background:var(--card);cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);
  white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
  transition:background .15s,color .15s}
button.ghost:hover,a.chip:hover{background:var(--hover);color:var(--ink)}
.chip.on{background:var(--accent);color:var(--accent-fg);border-color:transparent}
button{height:32px;padding:0 12px;border-radius:8px;font-size:12px;font-weight:600}
input,select{height:30px;padding:0 10px;border-radius:7px;font-size:12px;
  border:1px solid var(--line);background:var(--card);color:var(--ink)}
input::placeholder{color:var(--faint)}
input:focus,select:focus{outline:2px solid var(--ring);outline-offset:-1px}

/* ── شريط الأدوات: لاصق زي .dcx-controls ── */
.toolbar{position:sticky;top:64px;z-index:8;background:var(--bg);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 28px;margin:-28px -28px 0}
@media(max-width:760px){.toolbar{padding:10px 16px;margin:-20px -16px 0;top:64px}}

/* ── شريط الإنسايت بالدرجة الدافية ── */
.insight{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:13px;
  padding:13px 15px;font-size:13px;color:var(--ink)}

/* ── الجداول جوّه بطاقة ── */
table{font-size:13.5px}
th{color:var(--faint);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  height:40px;padding:0 16px;border-bottom:1px solid var(--line)}
td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink)}
tbody tr:hover{background:var(--hover)}
.empty{color:var(--muted);font-size:13.5px}

/* ── الترويسة والقائمة ── */
header{height:64px;padding:0 16px;background:var(--bg);border-bottom:1px solid var(--line)}
aside{width:244px;background:var(--bg);border-inline-end:1px solid var(--line)}
nav a.on{background:var(--card);color:var(--ink);font-weight:500;box-shadow:var(--sh-sm)}
.note,dialog{border-radius:var(--r-card)}
dialog{border:0;box-shadow:var(--sh-md)}

/* ── مقاسات مقاسة حيًّا من الشِل بتاع المرجع ── */
aside{width:255px;background:#FAFAFA;border-inline-end:1px solid #EDEDED}
html[data-theme=dark] aside{background:var(--sb);border-inline-end-color:var(--sb-line)}
header{background:#FFFFFF;border-bottom:1px solid #EDEDED}
html[data-theme=dark] header{background:var(--card);border-bottom-color:var(--line)}
/* عنصر القائمة الرئيسي عندهم 48px بوزن عادي، والفرعي 32px */
nav a{min-height:48px;padding:8px;border-radius:6px;font-size:14px;font-weight:400;
  color:#3F3F46;line-height:1.3}
html[data-theme=dark] nav a{color:var(--sb-fg)}
nav .sub a{min-height:32px;font-size:13.5px}
nav a.on{background:#FFFFFF;color:#18181A;font-weight:500;box-shadow:var(--sh-sm)}
html[data-theme=dark] nav a.on{background:var(--sb-active);color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════
   مكوّنات الأقسام — منقولة من ref/build/Dashboard-DIFUk.css بنفس
   أسماء الكلاسات بتاعة المرجع. الرموز مترجمة لرموزنا:
   --surface→--card · --s2→--hover · --t1→--ink · --t2→--muted
   --t3→--faint · --border→--line · --insight-border→--warn-line
   ═══════════════════════════════════════════════════════════════ */

/* ── صفّ القنوات (الحلقات) ── */
.badge-row{display:flex;gap:24px;overflow-x:auto;padding-bottom:4px}
.badge{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;
  background:transparent;border:none;padding:0;flex-shrink:0;transition:all .2s;height:auto}
.badge-ring{width:70px;height:70px;border-radius:50%;padding:3px}
.badge-inner{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--card)}
.badge-foll{font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
  text-align:center;white-space:nowrap}
.badge-name{font-size:11px;color:var(--faint);text-align:center;white-space:nowrap;
  max-width:140px;overflow:hidden;text-overflow:ellipsis}

/* ── إجماليات التفاعل أسفل بطاقة ── */
.eng-totals{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);padding:16px 22px}
.eng-val{font-size:20px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}

/* ── شريط أفضل المنشورات ── */
.top-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px}
.top-strip-item{flex:0 0 auto;width:110px;text-align:center;cursor:pointer;background:none;
  border:none;padding:0;height:auto}
.top-strip-thumb{position:relative;width:110px;height:110px;border-radius:10px;
  background:var(--hover) center/cover no-repeat;overflow:hidden}
.top-strip-no-img{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--faint)}
.top-strip-rank{position:absolute;top:6px;inset-inline-start:6px;background:#0009;color:#fff;font-size:10px;
  font-weight:700;padding:2px 6px;border-radius:4px}
.top-strip-eng{font-size:11px;font-weight:700;color:var(--ink);margin-top:6px;
  display:flex;align-items:center;justify-content:center;gap:3px}
.top-strip-plat{font-size:10px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── تبويبات الجمهور ── */
.aud-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.aud-tabs{display:flex;gap:4px}
.aud-tab{height:auto;padding:6px 14px;border-radius:8px;font-size:12px;font-weight:600;
  color:var(--muted);background:transparent;border:1px solid transparent;cursor:pointer;transition:all .15s}
.aud-tab:hover{background:var(--hover)}
.aud-tab.active{background:var(--card);border-color:var(--line);color:var(--ink);box-shadow:var(--sh)}
.aud-best-time{display:flex;align-items:center;gap:6px;margin-top:10px;padding:8px 12px;
  background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:8px;
  font-size:13px;font-weight:700;color:var(--ink)}

/* ── داخل/خارج المتابعين ── */
.fu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.fu-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;
  border-radius:10px;background:var(--hover)}
.fu-icon{font-size:18px;color:var(--faint)}
.fu-pos .fu-icon{color:var(--pos)} .fu-neg .fu-icon{color:var(--neg)} .fu-net .fu-icon{color:var(--warn)}
.fu-val{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.fu-lbl{font-size:11px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}

/* ── صف بطاقات مختصرة ── */
.ps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.ps-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px;
  background:var(--card);border-radius:14px;box-shadow:var(--sh)}
.ps-icon{font-size:20px}
.ps-val{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.ps-lbl{font-size:11px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}

/* ── بطاقة مقارنة حساب ── */
.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cmp-card{padding:20px;text-align:start;border:none;cursor:pointer;display:flex;
  flex-direction:column;gap:14px;transition:transform .15s;background:var(--card);
  border-radius:var(--r-card);box-shadow:var(--sh);height:auto}
.cmp-card:hover{transform:translateY(-2px)}
.cmp-head{display:flex;align-items:center;gap:10px;min-width:0}
.cmp-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0}
.cmp-name{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-handle{font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-foll{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cmp-foll-val{font-size:28px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  color:var(--ink);line-height:1}
.cmp-spark{height:44px;width:100%}
.cmp-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 8px;
  border-top:1px solid var(--line);padding-top:12px}
.cmp-stat-v{font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.cmp-stat-l{font-size:10px;color:var(--faint);margin-top:2px}
.cmp-mix{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:12px}
.cmp-mix-donut{width:54px;height:54px;flex-shrink:0}
.cmp-mix-legend{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.cmp-mix-item{display:flex;align-items:center;gap:6px;font-size:11px}
.cmp-mix-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.cmp-mix-name{color:var(--muted);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-mix-cnt{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* ── تكديس المنصّات ── */
.plat-stack{display:flex;flex-direction:column;gap:22px}
.plat-section-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.plat-chip{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0}
.plat-section-name{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
.plat-count{min-width:26px;height:24px;padding:0 9px;border-radius:99px;background:var(--hover);
  color:var(--muted);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;justify-content:center;gap:3px;flex-shrink:0}
.plat-line{flex:1;height:1px;background:var(--line)}

/* ── شبكة المنشورات ── */
.posts-block{border-inline-start:3px solid var(--line);padding-inline-start:14px}
.posts-block.good{border-color:var(--pos)} .posts-block.bad{border-color:var(--neg)}
.posts-sub{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  color:var(--muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em}
.posts-sub-good{color:var(--pos)} .posts-sub-bad{color:var(--neg)}
.post-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.post-card{border-radius:12px;overflow:hidden;background:var(--card);border:none;cursor:pointer;
  text-align:start;box-shadow:var(--sh);width:100%;display:flex;flex-direction:column;
  transition:transform .15s;height:auto;padding:0}
.post-card:hover{transform:translateY(-2px)}
.post-card.dim{opacity:.86}
.post-thumb{height:150px;position:relative;width:100%;display:flex;align-items:center;
  justify-content:center;overflow:hidden;background:var(--hover)}
.post-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-thumb-grad{position:absolute;bottom:0;left:0;right:0;height:55%;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}
.post-type{position:absolute;top:8px;inset-inline-start:8px;background:#ffffffeb;border-radius:5px;
  padding:2px 8px;font-size:10px;font-weight:700;color:#18181A}
.post-plat{position:absolute;top:8px;inset-inline-end:8px;width:22px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px #0000004d}
.post-info{padding:10px 12px 12px;flex:1;display:flex;flex-direction:column;gap:6px}
.post-handle{font-size:10px;color:var(--faint);font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.post-cap{font-size:12.5px;color:var(--ink);line-height:1.45;font-weight:500;overflow:hidden;
  max-height:2.9em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.post-date{font-size:11px;color:var(--faint);margin-top:auto}
.post-stats{display:flex;gap:10px;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.post-stats span{display:flex;align-items:center;gap:3px}

/* ── شريط الإنسايت ── */
.insight-strip{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:10px;
  background:var(--warn-bg);border:1px solid var(--warn-line)}
.insight-strip-icon{font-size:14px;color:var(--warn);flex-shrink:0}
.insight-strip-text{font-size:13px;font-weight:600;color:var(--ink);line-height:1.45;flex:1;min-width:0}
.insight-strip-period{font-size:11px;color:var(--faint);white-space:nowrap;flex-shrink:0}

@media(max-width:1180px){.post-grid{grid-template-columns:repeat(3,1fr)}.compare-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
  .post-grid,.ps-row{grid-template-columns:repeat(2,1fr)}
  .aud-grid,.compare-grid,.fu-grid{grid-template-columns:1fr}
}
.cmp-spark svg,.cmp-spark .spark{width:100%;height:44px;display:block}
/* شريط الأدوات أول عنصر في main، فبيملأ العرض كامل زي .dcx-controls */
main>.toolbar:first-of-type{margin:-28px -28px 0}
.phead{margin:0}
main>.printhead{margin:-28px -28px 0;padding:0 28px}


/* ═══════════════════════════════════════════════════════════════
   المرجع فيه نظامين تصميم، مش واحد — اتأكدت من ده بقياس صفحتَي
   /app/dashboard و/app/benchmark حيًّا:

   • اللوحة لوحدها ملفوفة في .dcx: كانفس أوف-وايت دافي، بطاقات
     من غير حد بنصف قطر 16 والحد جاي من الظل، ونص #18181A.
   • باقي الصفحات shadcn عادي: كانفس أبيض، بطاقة بحد #EDEDED
     ونصف قطر 12، ونص #0A0A0A.

   فالافتراضي فوق هو shadcn، والكتلة دي بتشغّل طبقة .dcx على
   اللوحة بس عن طريق data-page على الـbody.
   ═══════════════════════════════════════════════════════════════ */
body[data-page="dashboard"]{
  --bg:#F6F6F3; --card:#FFFFFF; --ink:#18181A; --muted:#64646A; --line:#E2E2DC;
  --hover:#F0F0EC; --input:#E2E2DC; --ring:#D4D4CE; --faint:#A8A8B0;
  --accent:#18181A; --accent-fg:#FFFFFF; --accent-soft:#F0F0EC;
  --secondary:#F0F0EC; --secondary-fg:#18181A;
  --r-card:16px;
}
/* داكن .dcx — اللوحة بس، منقول من .dark .dcx عندهم */
html[data-theme=dark] body[data-page="dashboard"]{
  --bg:#0B0B0C; --card:#141416; --ink:#F2F2EE; --muted:#88889A; --line:#2C2C32;
  --hover:#1C1C1F; --input:#2C2C32; --ring:#2C2C32; --faint:#505060;
  --accent:#F2F2EE; --accent-fg:#0B0B0C; --accent-soft:#1C1C1F;
  --secondary:#1C1C1F; --secondary-fg:#F2F2EE;
  --sb:#0B0B0C; --sb-fg:#88889A; --sb-line:#2C2C32;
  --sb-hover:#1C1C1F; --sb-hover-fg:#F2F2EE; --sb-active:#1C1C1F;
}
/* البطاقة بدون حد على اللوحة، وبحد في كل مكان تاني */
.card,.kpi{border:1px solid var(--line);box-shadow:none}
body[data-page="dashboard"] .card,
body[data-page="dashboard"] .kpi,
body[data-page="dashboard"] .cmp-card,
body[data-page="dashboard"] .post-card,
body[data-page="dashboard"] .ps-card{border:0;box-shadow:var(--sh)}
/* ترويسة الشِل بتفضل بيضا فوق الكانفس الدافي */
body[data-page="dashboard"] header{background:#FFFFFF}
html[data-theme=dark] body[data-page="dashboard"] header{background:var(--card)}

/* ═══════════════════════════════════════════════════════════════
   سلّم صفحات shadcn — مقاس من /app/benchmark حيًّا.
   الصفحات دي أكتف بكتير من اللوحة: العنوان 18/700 مش 22/800،
   والرقم البارز 16/900 (text-base font-black) مش 26/800، وعناوين
   الحقول 10/600 uppercase. الكتلة دي هي الافتراضي، واللوحة
   بترجّع مقاساتها الأكبر في الكتلة اللي بعدها.
   ═══════════════════════════════════════════════════════════════ */
.phead h1,h1{font-size:18px;font-weight:700;letter-spacing:normal;line-height:1.55;color:var(--ink)}
.phead p{font-size:12px;font-weight:400;line-height:1.5;color:var(--muted);margin-top:4px}
h2,.shead h2{font-size:14px;font-weight:600;letter-spacing:normal;line-height:1.43;color:var(--ink)}
.sub,.shead .sub{font-size:12px;font-weight:400;line-height:1.5;color:var(--muted);
  margin-top:4px;text-transform:none;letter-spacing:normal}
.shead{margin:0}
.lbl,.kpi .lbl,.kpi .l{font-size:10px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.kpi{padding:16px}
.kpi .val,.kpi .v{display:block;font-size:16px;font-weight:900;letter-spacing:normal;
  font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.2;margin:4px 0 0}
.kpi .dlt,.kpi .d,.kpi .note{font-size:10px;font-weight:400;color:var(--muted);margin-top:2px}
.kpi .dlt.up{color:var(--pos);font-weight:600} .kpi .dlt.dn{color:var(--neg);font-weight:600}
/* رقم البطل (الدرجة الإجمالية وأمثالها) — text-4xl font-black عندهم */
.hero-num{font-size:36px;font-weight:900;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
table{font-size:12px}
th{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);height:36px;padding:0 12px}
td{font-size:12px;padding:10px 12px;color:var(--ink)}
.empty{font-size:12px}
.pill{font-size:10px;font-weight:700;padding:2px 7px}
.note{font-size:12px;line-height:1.5}

/* اللوحة بترجع لسلّمها الأوسع (.dcx) — مقاس من /app/dashboard */
body[data-page="dashboard"] .phead h1,body[data-page="dashboard"] h1{
  font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
body[data-page="dashboard"] .phead p{font-size:13.5px;line-height:1.5}
body[data-page="dashboard"] h2,body[data-page="dashboard"] .shead h2{
  font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:27px}
body[data-page="dashboard"] .sub,body[data-page="dashboard"] .shead .sub{
  font-size:13.5px;line-height:1.5}
body[data-page="dashboard"] .lbl,body[data-page="dashboard"] .kpi .lbl,
body[data-page="dashboard"] .kpi .l{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--faint)}
body[data-page="dashboard"] .kpi{padding:18px 22px}
body[data-page="dashboard"] .kpi .val,body[data-page="dashboard"] .kpi .v{
  font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1;margin:0 0 8px}
body[data-page="dashboard"] .kpi .dlt,body[data-page="dashboard"] .kpi .d{font-size:11.5px;font-weight:600}
body[data-page="dashboard"] table{font-size:13.5px}
body[data-page="dashboard"] th{font-size:11px;font-weight:700;letter-spacing:.06em;
  color:var(--faint);height:40px;padding:0 16px}
body[data-page="dashboard"] td{font-size:13.5px;padding:12px 16px}
body[data-page="dashboard"] .pill{font-size:11.5px;font-weight:600;padding:3px 8px}

/* ── الإنبوكس: ثلاث أعمدة زي المرجع ─────────────────────── */
.inbox{display:grid;grid-template-columns:330px 1fr 260px;gap:14px;align-items:start;
  height:calc(100vh - 210px);min-height:520px}
@media(max-width:1280px){.inbox{grid-template-columns:300px 1fr}.ibx-ctx{display:none}}
@media(max-width:900px){.inbox{grid-template-columns:1fr;height:auto}}
.ibx-list{overflow-y:auto;height:100%}
.ibx-row{display:block;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.ibx-row:hover{background:var(--hover)}
.ibx-row.on{background:var(--hover);box-shadow:inset 3px 0 0 var(--ink)}
html[dir=rtl] .ibx-row.on{box-shadow:inset -3px 0 0 var(--ink)}
.ibx-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ibx-head b{font-size:13px}
.ibx-sub{font-size:11.5px;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ibx-last{font-size:12px;color:var(--ink);margin-top:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ibx-meta{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:10.5px}
.ibx-thread{display:flex;flex-direction:column;height:100%;overflow:hidden}
.ibx-tophdr{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.ibx-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:74%}
.msg.in{align-self:flex-start}
.msg.out{align-self:flex-end}
.msg-b{padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.55;
  background:var(--hover);color:var(--ink)}
.msg.out .msg-b{background:var(--accent);color:var(--accent-fg)}
.msg-m{font-size:10.5px;color:var(--faint);margin-top:4px;display:flex;align-items:center;gap:6px}
.msg.out .msg-m{justify-content:flex-end}
.ibx-reply{padding:12px 16px;border-top:1px solid var(--line);flex-shrink:0}
.ibx-canned{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.ibx-ctx{height:100%;overflow-y:auto}