/* ══════════════════════════════════════════════════════════════
   PECAN — نظام التصميم
   الرموز أولاً: كل لون ومسافة وحجم يُشتق من رمز، لا من قيمة مكتوبة.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ── الأسطح ── */
  --bg:#F4F6F9;
  --surface:#FFFFFF;
  --surface-2:#F8FAFC;
  --surface-3:#EFF3F7;
  --overlay:rgba(9,17,25,.42);

  /* ── الحدود ── */
  --line:#DCE4EB;
  --line-soft:#EAEFF4;
  --line-strong:#C2CFDA;

  /* ── النص ── */
  --ink:#0E1A24;
  --ink-2:#3A4E60;
  --muted:#6B8093;
  --faint:#93A6B5;
  --on-brand:#FFFFFF;

  /* ── الهوية ── */
  --brand:#2E6FB8;
  --brand-hi:#215893;
  --brand-soft:#E8F0F9;
  --brand-line:#BFD6EC;
  --brand-grad:linear-gradient(135deg,#5A79C8,#2E8FD0);
  --topbar:#0E2233;
  --topbar-ink:#C9D9E6;
  --topbar-ink-2:#7F9AB0;

  /* ── الدلالة (منفصلة عن الهوية) ── */
  --ok:#0B6E4F;      --ok-bg:#E4F2EC;    --ok-line:#B9DFCE;
  --warn:#8A5A00;    --warn-bg:#F9F0DE;  --warn-line:#EBD6A8;
  --crit:#A33427;    --crit-bg:#F9EAE7;  --crit-line:#EEC5BD;
  --info:#1E5F92;    --info-bg:#E8F1F8;  --info-line:#C3DAEC;

  /* ── الشكل ── */
  --r-sm:5px; --r:8px; --r-lg:12px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(14,26,36,.06);
  --sh-2:0 1px 3px rgba(14,26,36,.07), 0 6px 20px rgba(14,26,36,.05);
  --sh-3:0 12px 34px rgba(14,26,36,.14), 0 2px 8px rgba(14,26,36,.08);
  --ring:0 0 0 3px rgba(46,111,184,.18);

  /* ── الكثافة (تتبدّل مع data-density) ── */
  --row-y:10px;
  --cell-x:14px;
  --fs:14.5px;
  --fs-table:13.5px;
  --gap:16px;
  --card-p:20px;

  /* ── سلّم المسافات ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  /* ── سلّم العناوين ── */
  --fs-h1:23px; --fs-h2:15px; --fs-sm:12.5px; --fs-xs:11.5px;

  /* ── الحركة ── */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:.16s;

  /* توافق مع أسماء قديمة */
  --panel:var(--surface);
  --line-2:var(--line-soft);
  --bad:var(--crit); --bad-bg:var(--crit-bg);
  --radius:var(--r);
  --shadow:var(--sh-1);
}

:root[data-density="compact"]{
  --row-y:5px; --cell-x:10px; --fs:13.5px; --fs-table:12.8px;
  --gap:12px; --card-p:14px;
}

/* ── الوضع الداكن ── */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1116;
    --surface:#131C24;
    --surface-2:#18232C;
    --surface-3:#1E2B35;
    --overlay:rgba(0,0,0,.62);
    --line:#25333F;
    --line-soft:#1D2831;
    --line-strong:#334655;
    --ink:#E7EEF4;
    --ink-2:#B4C4D1;
    --muted:#8299AB;
    --faint:#67808F;
    --brand:#6FAAE6;
    --brand-hi:#8FC0F0;
    --brand-soft:#16293B;
    --brand-line:#26445E;
    --topbar:#0A121A;
    --topbar-ink:#B7C9D7;
    --topbar-ink-2:#6E8698;
    --ok:#5FCFA4;      --ok-bg:#10281F;   --ok-line:#1F4636;
    --warn:#E0B25F;    --warn-bg:#2A2113;  --warn-line:#4A3A1B;
    --crit:#EE8C7E;    --crit-bg:#2C1815;  --crit-line:#4E2A24;
    --info:#7DB6E4;    --info-bg:#13232F;  --info-line:#234358;
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 1px 3px rgba(0,0,0,.45), 0 8px 22px rgba(0,0,0,.32);
    --sh-3:0 14px 40px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
    --ring:0 0 0 3px rgba(111,170,230,.24);
  }
}
:root[data-theme="dark"]{
  --bg:#0B1116;
  --surface:#131C24;
  --surface-2:#18232C;
  --surface-3:#1E2B35;
  --overlay:rgba(0,0,0,.62);
  --line:#25333F;
  --line-soft:#1D2831;
  --line-strong:#334655;
  --ink:#E7EEF4;
  --ink-2:#B4C4D1;
  --muted:#8299AB;
  --faint:#67808F;
  --brand:#6FAAE6;
  --brand-hi:#8FC0F0;
  --brand-soft:#16293B;
  --brand-line:#26445E;
  --topbar:#0A121A;
  --topbar-ink:#B7C9D7;
  --topbar-ink-2:#6E8698;
  --ok:#5FCFA4;      --ok-bg:#10281F;   --ok-line:#1F4636;
  --warn:#E0B25F;    --warn-bg:#2A2113;  --warn-line:#4A3A1B;
  --crit:#EE8C7E;    --crit-bg:#2C1815;  --crit-line:#4E2A24;
  --info:#7DB6E4;    --info-bg:#13232F;  --info-line:#234358;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 1px 3px rgba(0,0,0,.45), 0 8px 22px rgba(0,0,0,.32);
  --sh-3:0 14px 40px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --ring:0 0 0 3px rgba(111,170,230,.24);
}

/* ══════════ الأساس ══════════ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  font-size:var(--fs); line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-hi)}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--r-sm)}
::selection{background:var(--brand-soft); color:var(--ink)}
.mono{font-family:"IBM Plex Mono","SF Mono",monospace}

/* ══════════ الشريط العلوي ══════════ */
.topbar{
  height:56px; background:var(--topbar); display:flex; align-items:center;
  padding:0 16px; gap:14px; position:sticky; top:0; z-index:60;
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 1px 12px rgba(0,0,0,.18);
}
.brand{display:flex; align-items:center; flex-shrink:0; padding-inline-end:2px}

/* ══════════ قفل الهوية: الاسم وتحته وصف المنتج ══════════ */
.lockup{
  display:inline-flex; flex-direction:column; align-items:center;
  direction:ltr; line-height:1; gap:3px; user-select:none;
}
.lockup-name{
  font-family:Montserrat,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:800; font-size:22px; letter-spacing:.02em;
  background:var(--lockup-grad,linear-gradient(90deg,#4A72C4 0%,#4189D4 42%,#29B6E8 70%,#22BDEE 100%));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lockup-sub{
  font-family:Montserrat,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:700; font-size:8.4px; letter-spacing:.135em;
  color:var(--lockup-sub,var(--topbar-ink-2)); white-space:nowrap;
}
.lockup.lg{gap:8px}
.lockup.lg .lockup-name{font-size:46px}
.lockup.lg .lockup-sub{font-size:14.5px; letter-spacing:.15em; color:var(--ink-2)}

.brand-sep{width:1px; height:20px; background:rgba(255,255,255,.16)}
.brand-firm{
  color:var(--topbar-ink-2); font-size:12.5px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px;
}
.crumbs{
  flex:1; min-width:0; color:var(--topbar-ink-2); font-size:12.5px;
  display:flex; align-items:center; gap:7px; overflow:hidden; white-space:nowrap;
}
.crumbs a{color:var(--topbar-ink)}
.crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.45}

.tool{
  display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 10px;
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-sm);
  color:var(--topbar-ink); background:transparent; cursor:pointer;
  font:inherit; font-size:12.5px; transition:background .14s,border-color .14s,color .14s;
}
.tool:hover{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.3)}
.tool kbd{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; padding:1px 5px;
  border:1px solid rgba(255,255,255,.2); border-radius:3px; color:var(--topbar-ink-2);
}
.tool.search{min-width:210px; justify-content:space-between}

.usermenu{display:flex; align-items:center; gap:9px; flex-shrink:0}
.avatar{
  width:29px; height:29px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-grad); color:#fff; font-weight:700; font-size:13px;
}
.uinfo{display:flex; flex-direction:column; line-height:1.25}
.uinfo b{color:#fff; font-size:12.5px; font-weight:600}
.uinfo span{color:var(--topbar-ink-2); font-size:11px}

/* ══════════ الهيكل ══════════ */
.shell{display:flex; min-height:calc(100vh - 56px)}
.side{
  width:222px; background:var(--surface); border-inline-start:1px solid var(--line);
  padding:14px 0; flex-shrink:0; position:sticky; top:56px;
  height:calc(100vh - 56px); overflow-y:auto;
}
.side a{
  display:flex; align-items:center; gap:11px; color:var(--ink-2);
  margin:1px 10px; padding:8px 12px; font-size:14px; font-weight:500;
  border-radius:var(--r); position:relative;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.side a:hover{background:var(--surface-3); color:var(--ink)}
.side a.on{background:var(--brand-soft); color:var(--brand); font-weight:600}
.side a.on::before{
  content:""; position:absolute; inset-inline-end:-10px; top:50%;
  width:3px; height:20px; margin-top:-10px; border-radius:3px 0 0 3px;
  background:var(--brand);
}
.side a.on .ic{opacity:1}
.side-sep{height:1px; background:var(--line-soft); margin:10px 16px}
.side-label{
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); padding:14px 22px 6px;
}
.ic{
  width:16px; height:16px; flex-shrink:0; background:currentColor; opacity:.8;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
}
.ic-home{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11l9-8 9 8v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E")}
.ic-users{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-8 9a8 8 0 0 1 16 0z'/%3E%3C/svg%3E")}
.ic-file{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l6 6v14H6z'/%3E%3C/svg%3E")}
.ic-book{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h13a3 3 0 0 1 3 3v15H7a3 3 0 0 1-3-3z'/%3E%3C/svg%3E")}
.ic-gear{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9 4l2 2-2 3-3-1-2 1-1 3h-4l-1-3-2-1-3 1-2-3 2-2-2-2 2-3 3 1 2-1 1-3h4l1 3 2 1 3-1 2 3z'/%3E%3C/svg%3E")}
.ic-log{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v3H4zm0 6h16v3H4zm0 6h10v3H4z'/%3E%3C/svg%3E")}
main{flex:1; min-width:0; padding:22px 28px 64px; max-width:1480px; margin-inline:auto; width:100%}

/* ══════════ ترويسة الصفحة ══════════ */
.page-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:var(--sp-5);
  padding-bottom:var(--sp-4); border-bottom:1px solid var(--line-soft);
}
.page-head h1{margin:0; font-size:var(--fs-h1); font-weight:700; letter-spacing:-.3px; line-height:1.32}
.page-head p{margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.7; max-width:78ch}
.page-head .eyebrow{
  display:block; font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); margin-bottom:5px;
}
.actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* ══════════ البطاقات ══════════ */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1); margin-bottom:var(--gap);
  overflow:hidden;
}
.card>h2{
  margin:0; padding:13px var(--card-p); font-size:var(--fs-h2); font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--line-soft); display:flex; align-items:center;
  gap:10px; justify-content:space-between; background:var(--surface-2);
  letter-spacing:-.15px;
}
.card>h2 .note{font-weight:400}
.card .body{padding:var(--card-p)}
.grid{display:grid; gap:var(--gap)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}

/* ══════════ مؤشرات ══════════ */
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 18px; box-shadow:var(--sh-1); position:relative; overflow:hidden;
  transition:box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.kpi:hover{box-shadow:var(--sh-2); border-color:var(--line-strong)}
.kpi b{
  display:block; font-size:27px; font-weight:700; line-height:1.25;
  font-variant-numeric:tabular-nums; letter-spacing:-.6px; color:var(--ink);
}
.kpi span{font-size:12.5px; color:var(--muted); display:block; margin-top:3px; line-height:1.6}
.kpi.accent b{
  background:var(--brand-grad); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}

/* ══════════ النماذج ══════════ */
label{display:block; font-size:12.5px; color:var(--ink-2); margin-bottom:4px; font-weight:600}
input[type=text],input[type=number],input[type=email],input[type=password],
input[type=date],select,textarea{
  width:100%; padding:7px 11px; border:1px solid var(--line);
  border-radius:var(--r-sm); font-size:14px; font-family:inherit;
  background:var(--surface); color:var(--ink);
  transition:border-color .14s, box-shadow .14s;
}
input[type=file]{font-size:13px; color:var(--ink-2)}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--brand); box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{min-height:120px; line-height:1.9; resize:vertical}
.field{margin-bottom:12px}
.field .hint{font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.6}

/* ══════════ الأزرار ══════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid transparent; cursor:pointer; min-height:36px;
  background:var(--brand); color:var(--on-brand);
  padding:8px 17px; border-radius:var(--r);
  font-size:14px; font-family:inherit; font-weight:600; line-height:1.4;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease), transform .05s;
  white-space:nowrap; box-shadow:var(--sh-1);
}
.btn:hover{background:var(--brand-hi); color:var(--on-brand); box-shadow:var(--sh-2)}
.btn:active{transform:translateY(1px); box-shadow:var(--sh-1)}
.btn:focus-visible{box-shadow:var(--ring)}
.btn[disabled],.btn.disabled{opacity:.42; pointer-events:none; box-shadow:none}
.btn.ghost{background:var(--surface); color:var(--ink-2); border-color:var(--line); box-shadow:none}
.btn.ghost:hover{background:var(--surface-3); color:var(--ink); border-color:var(--line-strong); box-shadow:var(--sh-1)}
.btn.sm{padding:4px 12px; font-size:12.5px; min-height:29px}
.btn.danger{background:var(--surface); color:var(--crit); border-color:var(--crit-line)}
.btn.danger:hover{background:var(--crit-bg); color:var(--crit)}

/* ══════════ الجداول ══════════ */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:var(--fs-table)}
thead th{
  background:var(--surface-2); color:var(--muted);
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
  text-align:start; padding:10px var(--cell-x);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{padding:var(--row-y) var(--cell-x); border-bottom:1px solid var(--line-soft); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--dur) var(--ease)}
tbody tr:hover td{background:var(--surface-2)}
td.num,th.num{text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap}
td.money,th.money{
  text-align:end; font-variant-numeric:tabular-nums; white-space:nowrap;
  font-feature-settings:"tnum"; letter-spacing:-.2px;
}
tr.group td{background:var(--surface-3); font-weight:700; color:var(--ink)}
tr.total td{font-weight:700; border-top:1px solid var(--line-strong)}
tr.flag td{background:var(--crit-bg)}

/* ══════════ الشارات ══════════ */
.chip{
  display:inline-flex; align-items:center; gap:4px; border-radius:var(--r-pill);
  padding:2px 9px; font-size:11.5px; font-weight:600; line-height:1.7;
  background:var(--surface-3); color:var(--ink-2); white-space:nowrap;
}
.chip.ok{background:var(--ok-bg); color:var(--ok)}
.chip.bad{background:var(--crit-bg); color:var(--crit)}
.chip.warn{background:var(--warn-bg); color:var(--warn)}
.chip.info{background:var(--info-bg); color:var(--info)}
.dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0}

/* ══════════ التنبيهات ══════════ */
.alert{
  padding:12px 15px; border-radius:var(--r); font-size:13.5px; margin-bottom:14px;
  border:1px solid transparent; border-inline-start-width:3px;
  display:flex; gap:9px; align-items:flex-start; line-height:1.7;
}
.alert.ok{background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok)}
.alert.bad{background:var(--crit-bg); border-color:var(--crit-line); color:var(--crit)}
.alert.warn{background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn)}
.alert.info{background:var(--info-bg); border-color:var(--info-line); color:var(--info)}
.alert a{color:inherit; text-decoration:underline; text-underline-offset:2px}

/* ══════════ شريط المراحل ══════════ */
.stages{
  display:flex; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin-bottom:var(--gap); box-shadow:var(--sh-1);
}
.stages .st{
  flex:1; padding:12px 12px; font-size:12.5px; font-weight:600; color:var(--muted);
  text-align:center; background:var(--surface-2); position:relative;
}
.stages .st.done{color:var(--ok); background:var(--ok-bg)}
.stages .st.on{color:var(--on-brand); background:var(--brand)}
.stages .st + .st{border-inline-start:1px solid var(--line)}
.stages .st.done::after,.stages .st.on::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:2px;
  background:currentColor; opacity:.5;
}
.stages .st.on::after{background:var(--on-brand); opacity:.85}

/* ══════════ التبويبات ══════════ */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:16px; flex-wrap:wrap}
.tabs a{
  padding:8px 15px; font-size:13.5px; font-weight:600; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabs a:hover{color:var(--ink-2)}
.tabs a.on{color:var(--brand); border-bottom-color:var(--brand)}

/* شريط تنقل الشاشات — يتميّز عن تبويبات التصفية داخل الشاشة */
.tabs.nav{gap:3px; margin-bottom:var(--sp-5); background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:5px; flex-wrap:wrap}
.tabs.nav a{
  border:0; margin-bottom:0; padding:7px 13px; font-size:13px; border-radius:var(--r);
  color:var(--ink-2); transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tabs.nav a:hover{background:var(--surface-3); color:var(--ink)}
.tabs.nav a.on{background:var(--surface); color:var(--brand); box-shadow:var(--sh-1); font-weight:600}

/* ══════════ شريط البحث والتصفية ══════════ */
.searchbar{margin:0 auto var(--sp-5); max-width:940px}
.sb-box{
  display:flex; align-items:center; gap:6px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 6px 5px 14px;
  box-shadow:var(--sh-1); transition:box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.sb-box:focus-within{border-color:var(--brand); box-shadow:var(--ring)}
.sb-ic{
  width:17px; height:17px; flex-shrink:0; margin-inline-start:4px; background:var(--faint);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 1 0 4.9 14.3l5.4 5.4 1.4-1.4-5.4-5.4A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 1 0 4.9 14.3l5.4 5.4 1.4-1.4-5.4-5.4A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/%3E%3C/svg%3E");
}
.sb-box input[type=search]{
  flex:1; min-width:120px; border:0; background:transparent; padding:7px 4px;
  font-size:14px; color:var(--ink);
}
.sb-box input[type=search]:focus{box-shadow:none}
.sb-box select{
  width:auto; min-width:118px; border:0; background:var(--surface-3); color:var(--ink-2);
  border-radius:var(--r-pill); padding:6px 12px; font-size:12.5px; font-weight:600;
  cursor:pointer;
}
.sb-box select:focus{box-shadow:none; background:var(--brand-soft); color:var(--brand)}
.sb-box .btn{border-radius:var(--r-pill); min-height:31px}
.sb-meta{
  display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap;
  margin-top:9px; font-size:12.5px; color:var(--muted);
}
.sb-meta b{color:var(--ink-2)}
.sb-meta a{color:var(--brand)}
.sb-dl{font-weight:600}

/* ══════════ شريط حالة الاشتراك ══════════ */
.trialbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--info-bg); border:1px solid var(--info-line); color:var(--info);
  border-radius:var(--r); padding:10px 15px; margin-bottom:var(--sp-4); font-size:13px;
  line-height:1.7;
}
.trialbar.warn{background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn)}
.trialbar.bad{background:var(--crit-bg); border-color:var(--crit-line); color:var(--crit)}
.trialbar span{color:inherit; opacity:.92}
.trialbar a{color:inherit; text-decoration:underline; text-underline-offset:2px;
  margin-inline-start:auto; font-weight:600}

.codebox{
  font-family:"IBM Plex Mono","SF Mono",monospace; font-size:30px; font-weight:600;
  letter-spacing:14px; text-indent:14px; text-align:center; padding:14px 10px;
  direction:ltr; unicode-bidi:isolate;
}

/* ══════════ بطاقة خطة الاشتراك ══════════ */
.planbox{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:18px;
  background:var(--surface-2); display:flex; flex-direction:column; gap:6px;
}
.planbox.on{border-color:var(--brand-line); background:var(--brand-soft)}
.planbox > b{font-size:15.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.planbox .price{font-size:26px; font-weight:700; letter-spacing:-.5px;
  font-variant-numeric:tabular-nums; color:var(--brand)}
.planbox .price span{font-size:13px; font-weight:600; color:var(--muted)}
.planbox .note{flex:1; margin:0}
.planbox details summary{cursor:pointer; font-size:13.5px; font-weight:600;
  color:var(--brand); padding:6px 0}
.planbox .field{margin-bottom:8px}

/* ══════════ كتل النصوص ══════════ */
.blk{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); margin-bottom:10px}
.blk .bh{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 14px; border-bottom:1px solid var(--line-soft); background:var(--surface-2);
}
.blk .bt{font-weight:600; font-size:14px}
.blk .bb{
  padding:11px 14px; white-space:pre-wrap; font-size:13.5px; color:var(--ink-2);
  line-height:1.95; max-height:130px; overflow:hidden; position:relative;
}
.blk .bb.open{max-height:none}
.blk .bb::after{content:""; position:absolute; inset:auto 0 0 0; height:34px;
  background:linear-gradient(transparent,var(--surface))}
.blk .bb.open::after{display:none}
.more{display:block; padding:5px 14px 10px; font-size:12.5px; color:var(--brand); cursor:pointer}
.var{
  background:var(--brand-soft); color:var(--brand); border-radius:4px;
  padding:1px 6px; font-size:12.5px; font-weight:600;
}

/* ══════════ لوحة الأوامر ══════════ */
.cmdk-back{
  position:fixed; inset:0; background:var(--overlay); z-index:100;
  display:none; align-items:flex-start; justify-content:center; padding-top:11vh;
}
.cmdk-back.open{display:flex}
.cmdk{
  width:min(620px,92vw); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-3); overflow:hidden;
}
.cmdk input{
  width:100%; border:0; border-bottom:1px solid var(--line); border-radius:0;
  padding:15px 18px; font-size:16px; background:transparent;
}
.cmdk input:focus{box-shadow:none; border-color:var(--line)}
.cmdk-list{max-height:min(56vh,420px); overflow-y:auto; padding:6px}
.cmdk-group{
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); padding:9px 12px 5px;
}
.cmdk-item{
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  border-radius:var(--r-sm); cursor:pointer; font-size:14px; color:var(--ink);
}
.cmdk-item:hover,.cmdk-item.sel{background:var(--brand-soft); color:var(--brand)}
.cmdk-item .meta{margin-inline-start:auto; font-size:11.5px; color:var(--muted)}
.cmdk-item.sel .meta{color:var(--brand)}
.cmdk-empty{padding:26px 18px; text-align:center; color:var(--muted); font-size:13.5px}
.cmdk-foot{
  border-top:1px solid var(--line-soft); padding:8px 14px; display:flex; gap:16px;
  font-size:11.5px; color:var(--faint); background:var(--surface-2);
}
.cmdk-foot kbd{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; padding:1px 5px;
  border:1px solid var(--line); border-radius:3px; color:var(--muted);
}

/* ══════════ شاشة منقسمة ══════════ */
.split{display:grid; gap:var(--gap); grid-template-columns:1fr; align-items:start}
@media (min-width:1180px){ .split.has-aside{grid-template-columns:minmax(0,1fr) 400px} }
.aside-panel{position:sticky; top:74px}

/* ══════════ حالات وأدوات ══════════ */
.note{font-size:12.5px; color:var(--muted); line-height:1.7}
.rowflex{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.sep{height:1px; background:var(--line); margin:14px 0}
.right{text-align:end}
.empty{text-align:center; padding:52px 24px; color:var(--muted); font-size:13.5px; line-height:1.8}
.empty b{display:block; color:var(--ink); font-size:16px; margin-bottom:6px; font-weight:600}
.empty .btn{margin-top:14px}
.toolbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:10px var(--card-p); background:var(--surface-2); border-bottom:1px solid var(--line-soft);
}
.toolbar .grow{flex:1; min-width:150px}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.seg button{
  border:0; background:var(--surface); color:var(--ink-2); font:inherit; font-size:12.5px;
  padding:5px 11px; cursor:pointer;
}
.seg button + button{border-inline-start:1px solid var(--line)}
.seg button.on{background:var(--brand-soft); color:var(--brand); font-weight:600}

/* ══════════ الدخول ══════════ */
.auth{
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(820px 420px at 50% -8%, rgba(62,154,216,.20) 0%, transparent 70%),
    radial-gradient(1200px 620px at 50% 0%, #16324a 0%, #0A1420 66%);
}
.auth .box{
  background:var(--surface); border-radius:18px; padding:36px 34px; width:410px;
  box-shadow:0 30px 80px rgba(0,0,0,.46); border:1px solid var(--line);
}
.auth .logo{text-align:center; margin-bottom:14px}
.auth h1{font-size:19px; margin:0 0 3px; text-align:center}
.auth p.sub{color:var(--muted); font-size:13px; text-align:center; margin:0 0 22px}
.auth .btn{width:100%; margin-top:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
@media (max-width:860px){
  .side{width:56px}
  .side a span{display:none}
  .side-label{display:none}
  main{padding:16px 14px 44px}
  .tool.search{min-width:0}
  .tool.search .lbl{display:none}
}

/* ══════════ الرسوم البيانية ══════════ */
:root{ --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --grid:#E6ECF2; --axis:#C2CFDA; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --s1:#3987e5; --s2:#d95926; --s3:#199e70;
    --grid:#1F2B35; --axis:#334655; }
}
:root[data-theme="dark"]{ --s1:#3987e5; --s2:#d95926; --s3:#199e70;
  --grid:#1F2B35; --axis:#334655; }

.chart{display:block; overflow:visible}
.chart .grid{stroke:var(--grid); stroke-width:1}
.chart .axis{stroke:var(--axis); stroke-width:1}
.chart .cat{fill:var(--ink-2); font-size:12.5px; font-weight:600;
  font-family:"IBM Plex Sans Arabic",sans-serif}
.chart .val{fill:var(--muted); font-size:11.5px; font-variant-numeric:tabular-nums;
  font-family:"IBM Plex Sans Arabic",sans-serif}
.chart .seg{fill:#fff; font-size:12px; font-weight:600;
  font-family:"IBM Plex Sans Arabic",sans-serif}
.legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-size:12.5px; color:var(--ink-2)}
.legend .lg{display:inline-flex; align-items:center; gap:6px}
.legend .lg i{width:11px; height:11px; border-radius:3px; display:inline-block}

.ratio-row{display:grid; grid-template-columns:1fr auto auto auto; gap:10px;
  align-items:center; padding:8px 0; border-bottom:1px solid var(--line-soft)}
.ratio-row:last-child{border-bottom:0}
.ratio-row .nm{font-size:13.5px; font-weight:600}
.ratio-row .hint{font-size:11.5px; color:var(--muted); font-weight:400; display:block}
.ratio-row .v{font-variant-numeric:tabular-nums; font-size:14.5px; font-weight:700;
  min-width:96px; text-align:end}
.ratio-row .pv{font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--muted);
  min-width:88px; text-align:end}
.trend{font-size:11.5px; font-weight:700; min-width:26px; text-align:center}
.trend.good{color:var(--ok)} .trend.bad{color:var(--crit)}
/* ألوان السلاسل — بترتيب ثابت لا يُعاد توزيعه عند تغيّر عدد السلاسل */
.chart .s1{fill:var(--s1)} .chart .s2{fill:var(--s2)} .chart .s3{fill:var(--s3)}
.legend .lg i.s1{background:var(--s1)}
.legend .lg i.s2{background:var(--s2)}
.legend .lg i.s3{background:var(--s3)}
.ratio-row{align-items:start; padding:12px 0}
.ratio-row .nm{line-height:1.55}
.ratio-row .mean{display:block; font-size:12.5px; color:var(--ink-2); font-weight:400;
  line-height:1.8; margin-top:4px; max-width:62ch}
.ratio-row .v,.ratio-row .pv{padding-top:2px}