:root{
  --ink:#12241D; --ink-2:#3C5147; --ink-3:#6B7F75;
  --g-900:#0C3327; --g-800:#124434; --g-700:#175C46; --g-600:#1E7A5C; --g-500:#2A9B76;
  --g-100:#DCEDE5; --g-050:#EEF6F1;
  --gold:#A9822F; --gold-l:#D9B96A; --gold-050:#F6EFDC;
  --sand:#E7DCC4; --ivory:#FBF8F1; --paper:#FFFFFF;
  --red:#9E2A2B; --red-l:#F3DFDF; --amber:#B57A11; --amber-l:#FAEFD8;
  --ok:#1E7A5C; --ok-l:#DFF0E8;
  --line:#E2DCCC; --line-2:#CFC6AE;
  --shadow:0 1px 2px rgba(18,36,29,.06), 0 8px 24px -14px rgba(18,36,29,.28);
  --nav-w:288px;
  --f-head:"Noto Kufi Arabic","Tajawal","Segoe UI",Tahoma,Arial,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Noto Kufi Arabic","Segoe UI",Tahoma,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ivory); color:var(--ink); font-family:var(--f-body);
  font-size:15px; line-height:1.85; -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1100px 420px at 100% -8%, rgba(30,122,92,.09), transparent 60%),
    radial-gradient(760px 340px at -10% 4%, rgba(169,130,47,.09), transparent 62%);
}
h1,h2,h3,h4{font-family:var(--f-head); color:var(--g-900); margin:0; line-height:1.5; font-weight:600}
p{margin:0 0 .8em}
a{color:var(--g-700)}
.num{font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:embed; display:inline-block}
::selection{background:var(--g-100)}

/* ---------- shell ---------- */
.shell{display:flex; min-height:100vh; position:relative; z-index:1}
.side{
  width:var(--nav-w); flex:0 0 var(--nav-w); position:sticky; top:0; height:100vh;
  background:linear-gradient(180deg,var(--g-900),#0A2A20 60%,#08241B);
  color:#DDEBE4; display:flex; flex-direction:column; border-inline-start:3px solid var(--gold);
}
.brand{padding:20px 20px 16px; border-bottom:1px solid rgba(255,255,255,.1)}
.brand .seal{display:flex; align-items:center; gap:11px}
.brand .seal svg{flex:0 0 auto}
.brand .t1{font-family:var(--f-head); font-size:15px; font-weight:700; color:#fff; line-height:1.45}
.brand .t2{font-size:11.5px; color:var(--gold-l); letter-spacing:.2px; margin-top:2px}
.navsearch{padding:12px 16px 8px}
.navsearch input{
  width:100%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  color:#fff; border-radius:9px; padding:9px 12px; font-family:var(--f-body); font-size:13px;
}
.navsearch input::placeholder{color:rgba(255,255,255,.68)}
.navsearch input:focus{outline:2px solid var(--gold-l); outline-offset:1px}
.nav{overflow-y:auto; flex:1; padding:6px 10px 22px}
.nav::-webkit-scrollbar{width:7px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); border-radius:9px}
.nav .grp{font-size:10.5px; letter-spacing:1.4px; color:rgba(217,185,106,.85); padding:15px 12px 6px; font-family:var(--f-head)}
.nav a{
  display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:8px;
  color:#CFE0D8; text-decoration:none; font-size:13.5px; line-height:1.4; margin-bottom:1px;
}
.nav a .idx{font-size:10.5px; color:rgba(255,255,255,.38); min-width:17px; text-align:center; font-variant-numeric:tabular-nums}
.nav a:hover{background:rgba(255,255,255,.08); color:#fff}
.nav a.on{background:var(--gold); color:#25200E; font-weight:600}
.nav a.on .idx{color:#5C4C18}
.nav a.hidden{display:none}
.nav .empty{padding:12px; font-size:12.5px; color:rgba(255,255,255,.55)}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  display:none; position:sticky; top:0; z-index:60; background:var(--g-900); color:#fff;
  padding:10px 14px; align-items:center; gap:12px; border-bottom:2px solid var(--gold);
}
.topbar .tt{font-family:var(--f-head); font-size:13.5px; font-weight:600}
.burger{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:8px; padding:7px 10px; cursor:pointer}
.wrap{padding:34px 40px 90px; max-width:1220px; width:100%; margin:0 auto}
.scrim{display:none}

/* ---------- section ---------- */
.sec{display:none; animation:in .34s ease both}
.sec.on{display:block}
@keyframes in{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.sec{animation:none}}
.sec-head{margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.sec-head .eyebrow{font-size:12px; color:var(--gold); font-family:var(--f-head); margin-bottom:4px}
.sec-head h2{font-size:25px; letter-spacing:-.2px}
.sec-head .sub{color:var(--ink-2); font-size:14px; margin-top:6px; max-width:76ch}
h3.blk{font-size:17.5px; margin:30px 0 12px; padding-inline-start:12px; border-inline-start:4px solid var(--gold)}
h4.blk{font-size:15px; margin:20px 0 9px; color:var(--g-800)}

.card{background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:20px 22px; box-shadow:var(--shadow); margin-bottom:18px}
.card.tight{padding:15px 17px}
.grid{display:grid; gap:16px}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ---------- alerts ---------- */
.alert{border-radius:12px; padding:15px 18px; margin-bottom:18px; border:1px solid; font-size:14.2px; line-height:1.8}
.alert b{font-weight:600}
.a-key{background:linear-gradient(90deg,#F7EDD6,#FBF6EA); border-color:var(--gold-l); border-inline-start:5px solid var(--gold)}
.a-red{background:var(--red-l); border-color:#E3B9B9; border-inline-start:5px solid var(--red); color:#5F1516}
.a-note{background:var(--g-050); border-color:#C9E2D6; border-inline-start:5px solid var(--g-600)}
.a-warn{background:var(--amber-l); border-color:#EBD5A6; border-inline-start:5px solid var(--amber); color:#5C3D06}
.quote{border-inline-start:4px solid var(--g-500); background:var(--g-050); padding:13px 17px; border-radius:0 11px 11px 0; margin:14px 0; color:var(--ink-2); font-size:14px}

/* ---------- KPI ---------- */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.kpi{
  background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:16px 17px;
  position:relative; overflow:hidden; box-shadow:var(--shadow); cursor:help;
}
.kpi::after{content:""; position:absolute; inset-block:0; inset-inline-start:0; width:4px; background:var(--g-600)}
.kpi.bad::after{background:var(--red)} .kpi.warn::after{background:var(--amber)} .kpi.gold::after{background:var(--gold)}
.kpi .lab{font-size:12.5px; color:var(--ink-3); font-family:var(--f-head); line-height:1.5; min-height:34px}
.kpi .val{font-family:var(--f-head); font-size:26px; font-weight:700; color:var(--g-900); letter-spacing:-.5px; margin:3px 0 1px}
.kpi.bad .val{color:var(--red)}
.kpi .unit{font-size:12px; color:var(--ink-3)}
.kpi .tip{
  position:absolute; inset-inline:8px; bottom:8px; background:var(--g-900); color:#EAF2ED; border-radius:9px;
  padding:11px 13px; font-size:11.8px; line-height:1.65; opacity:0; transform:translateY(6px); pointer-events:none;
  transition:.18s; z-index:5; box-shadow:0 10px 26px -8px rgba(0,0,0,.5)
}
.kpi:hover .tip,.kpi:focus-within .tip{opacity:1; transform:none}
.kpi .tip b{color:var(--gold-l); font-weight:600}

/* ---------- tables ---------- */
.tw{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--paper); box-shadow:var(--shadow); margin-bottom:16px}
table{border-collapse:collapse; width:100%; font-size:13.4px; min-width:600px}
.tw.sm table{min-width:0}
thead th{
  background:var(--g-800); color:#EAF3EE; font-family:var(--f-head); font-weight:500; font-size:12.5px;
  padding:10px 12px; text-align:start; position:sticky; top:0; white-space:nowrap
}
tbody td{padding:9px 12px; border-top:1px solid var(--line); vertical-align:top; line-height:1.7}
tbody tr:nth-child(even){background:#FCFAF5}
tbody tr:hover{background:var(--g-050)}
tfoot td{padding:10px 12px; border-top:2px solid var(--line-2); background:var(--gold-050); font-weight:600}
td.n,th.n{text-align:start; font-variant-numeric:tabular-nums; direction:ltr; white-space:nowrap}
td.neg{color:var(--red)}
.tsum{font-size:12.3px; color:var(--ink-3); margin:-8px 0 16px}

/* ---------- badges / dots ---------- */
.b{display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px; font-family:var(--f-head); white-space:nowrap; border:1px solid}
.b-red{background:var(--red-l); color:#7C1D1E; border-color:#E0B4B4}
.b-amb{background:var(--amber-l); color:#6B4708; border-color:#E9D2A0}
.b-grn{background:var(--ok-l); color:#14513C; border-color:#B9DDCC}
.b-gld{background:var(--gold-050); color:#6B5217; border-color:#E4D2A4}
.b-gry{background:#F0EEE7; color:#5C6660; border-color:#DFDACB}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-inline-end:6px; vertical-align:middle}
.d-red{background:var(--red)} .d-amb{background:var(--amber)} .d-grn{background:var(--ok)} .d-gry{background:#B7B3A6}
.na{color:var(--ink-3); font-style:normal; font-size:12.5px}

/* ---------- gap hero ---------- */
.hero{
  background:linear-gradient(155deg,var(--g-900) 0%,#0E3A2C 46%,#123F30 100%);
  color:#E9F2EE; border-radius:16px; padding:30px 32px; margin-bottom:20px; position:relative; overflow:hidden;
  border:1px solid #0A2A20;
}
.hero::before{
  content:""; position:absolute; inset-block:0; inset-inline-end:0; width:38%;
  background:radial-gradient(circle at 80% 20%, rgba(217,185,106,.22), transparent 62%);
}
.hero h1{color:#fff; font-size:27px; line-height:1.45; position:relative; letter-spacing:-.3px}
.hero .h-sub{color:var(--gold-l); font-size:14.5px; margin-top:5px; font-family:var(--f-head)}
.hero .h-tag{
  display:inline-block; margin-top:14px; background:rgba(217,185,106,.16); border:1px solid rgba(217,185,106,.45);
  color:#F0E2BC; border-radius:999px; padding:5px 15px; font-size:12.5px; font-family:var(--f-head)
}
.gapviz{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:22px 24px; box-shadow:var(--shadow); margin-bottom:18px}
.gaprow{margin-bottom:15px}
.gaprow .gl{display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; margin-bottom:6px; gap:10px; flex-wrap:wrap}
.gaprow .gl .gv{font-family:var(--f-head); font-weight:700; font-size:16px; font-variant-numeric:tabular-nums; direction:ltr}
.bar{height:30px; background:#F1EEE5; border-radius:7px; overflow:hidden; border:1px solid var(--line)}
.bar span{display:block; height:100%; border-radius:6px 0 0 6px; transition:width 1.1s cubic-bezier(.2,.8,.25,1)}
.bar span.full{background:linear-gradient(90deg,var(--g-700),var(--g-500))}
.bar span.act{background:linear-gradient(90deg,#8C1F20,var(--red))}
.bar span.gap{background:repeating-linear-gradient(135deg,#B98A2B,#B98A2B 9px,#CFA243 9px,#CFA243 18px)}

/* ---------- controls ---------- */
.seg{display:inline-flex; background:#F1EEE5; border:1px solid var(--line); border-radius:11px; padding:4px; gap:4px; flex-wrap:wrap}
.seg button{
  border:0; background:transparent; font-family:var(--f-head); font-size:13.5px; padding:8px 17px;
  border-radius:8px; cursor:pointer; color:var(--ink-2)
}
.seg button:hover{background:#E7E2D5}
.seg button.on{background:var(--g-700); color:#fff; box-shadow:0 2px 7px -2px rgba(23,92,70,.6)}
.seg button.on.sc-b{background:#1F5FA8} .seg button.on.sc-g{background:var(--g-600)} .seg button.on.sc-r{background:var(--red)}
input[type=range]{width:100%; accent-color:var(--g-600)}
select,input[type=text],input[type=search]{
  font-family:var(--f-body); font-size:13.5px; padding:8px 11px; border:1px solid var(--line-2);
  border-radius:9px; background:var(--paper); color:var(--ink)
}
select:focus,input:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--g-600); outline-offset:2px}
.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:13px}
.filters label{font-size:12.5px; color:var(--ink-3); font-family:var(--f-head)}

/* ---------- timeline ---------- */
.tl{position:relative; padding-inline-start:0}
.tl .ph{display:grid; grid-template-columns:52px 1fr; gap:16px; margin-bottom:6px}
.tl .mk{display:flex; flex-direction:column; align-items:center}
.tl .mk .n{
  width:40px; height:40px; border-radius:50%; background:var(--g-700); color:#fff; display:grid; place-items:center;
  font-family:var(--f-head); font-weight:700; font-size:15px; flex:0 0 auto; border:3px solid var(--g-100)
}
.tl .mk .ln{flex:1; width:2px; background:linear-gradient(180deg,var(--g-100),var(--line)); margin:5px 0}
.tl .ph:last-child .ln{display:none}
.tl .bd{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:15px 18px; margin-bottom:14px; box-shadow:var(--shadow)}
.tl .bd h4{margin:0 0 3px; font-size:15.5px}
.tl .bd .meta{font-size:12px; color:var(--gold); font-family:var(--f-head); margin-bottom:8px}
.tl .bd ul{margin:8px 0 0; padding-inline-start:18px; font-size:13.5px}
.tl .bd li{margin-bottom:5px}
.mini{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; margin-top:11px; padding-top:11px; border-top:1px dashed var(--line-2)}
.mini div{font-size:12.3px} .mini b{display:block; color:var(--ink-3); font-weight:500; font-size:11.3px; font-family:var(--f-head)}

/* ---------- decision cards ---------- */
.dcards{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.dc{background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:16px 18px; box-shadow:var(--shadow); position:relative}
.dc.first{border:1.5px solid var(--gold); background:linear-gradient(180deg,#FEFBF3,#fff)}
.dc .hd{display:flex; align-items:flex-start; gap:11px; margin-bottom:9px}
.dc .no{width:31px; height:31px; flex:0 0 auto; border-radius:9px; background:var(--g-800); color:#fff; display:grid; place-items:center; font-family:var(--f-head); font-weight:700; font-size:14px}
.dc.first .no{background:var(--gold); color:#2B2107}
.dc .ti{font-family:var(--f-head); font-size:14.5px; font-weight:600; color:var(--g-900); line-height:1.6}
.dc .rows{display:grid; gap:6px; font-size:12.8px; margin-top:9px; padding-top:9px; border-top:1px solid var(--line)}
.dc .rows div{display:flex; gap:8px}
.dc .rows b{color:var(--ink-3); font-weight:500; min-width:74px; font-family:var(--f-head); font-size:12px}

/* ---------- status control ---------- */
.st{border:1px solid var(--line-2); background:#F7F5EE; border-radius:8px; padding:3px 11px; font-size:12px;
  cursor:pointer; font-family:var(--f-head); color:var(--ink-2); white-space:nowrap}
.st[data-s="1"]{background:var(--amber-l); border-color:#E9D2A0; color:#6B4708}
.st[data-s="2"]{background:var(--ok-l); border-color:#B9DDCC; color:#14513C}
.st[data-s="3"]{background:var(--red-l); border-color:#E0B4B4; color:#7C1D1E}

/* ---------- charts ---------- */
.chart{background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:18px 20px; box-shadow:var(--shadow); margin-bottom:18px}
.chart .ch{font-family:var(--f-head); font-size:15px; color:var(--g-900); font-weight:600}
.chart .cd{font-size:12.5px; color:var(--ink-3); margin:3px 0 13px}
.chart .cf{font-size:11.5px; color:var(--ink-3); margin-top:11px; padding-top:9px; border-top:1px solid var(--line)}
.chart svg{width:100%; height:auto; display:block; overflow:visible}
.lg{display:flex; gap:14px; flex-wrap:wrap; font-size:12.3px; margin-top:9px}
.lg i{width:11px; height:11px; border-radius:3px; display:inline-block; margin-inline-end:5px; vertical-align:-1px}

/* ---------- flow / leak map ---------- */
.flow{display:grid; grid-template-columns:1fr; gap:0}
.fstep{display:grid; grid-template-columns:160px 1fr; gap:0; border:1px solid var(--line); border-radius:12px; background:var(--paper); margin-bottom:9px; overflow:hidden; box-shadow:var(--shadow)}
.fstep .fl{background:var(--g-050); padding:13px 15px; border-inline-end:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; gap:4px}
.fstep.hot .fl{background:var(--red-l)}
.fstep .fl .fn{font-family:var(--f-head); font-size:11px; color:var(--ink-3)}
.fstep .fl .ft{font-family:var(--f-head); font-size:14px; font-weight:600; color:var(--g-900)}
.fstep.hot .fl .ft{color:var(--red)}
.fstep .fr{padding:12px 16px; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:11px}
.fstep .fr div{font-size:12.7px; line-height:1.65}
.fstep .fr b{display:block; font-size:11px; color:var(--ink-3); font-family:var(--f-head); font-weight:500}

/* ---------- matrix ---------- */
.mtx{position:relative; background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:20px; box-shadow:var(--shadow)}
.mplot{position:relative; height:470px; border-inline-end:2px solid var(--line-2); border-bottom:2px solid var(--line-2); margin:8px 34px 34px 8px; background:
  linear-gradient(to right, rgba(158,42,43,.05), transparent 55%),
  linear-gradient(to top, transparent 45%, rgba(30,122,92,.05))}
.mplot .pt{position:absolute; transform:translate(50%,50%); background:var(--paper); border:2px solid var(--g-600); color:var(--g-900);
  border-radius:999px; padding:4px 11px; font-size:11.8px; font-family:var(--f-head); white-space:nowrap; cursor:default; box-shadow:var(--shadow)}
.mplot .pt.crit{border-color:var(--red); background:var(--red-l); color:#7C1D1E; font-weight:600}
.mplot .pt.mid{border-color:var(--amber); background:var(--amber-l); color:#6B4708}
.mplot .pt:hover{z-index:9; transform:translate(50%,50%) scale(1.06)}
.mx-lab{font-size:12px; color:var(--ink-3); font-family:var(--f-head)}

/* ---------- ops board ---------- */
.board{display:grid; grid-template-columns:repeat(3,1fr); gap:13px}
.bcol{background:var(--paper); border:1px solid var(--line); border-radius:13px; overflow:hidden; box-shadow:var(--shadow)}
.bcol h4{padding:11px 15px; font-size:13.5px; color:#fff; margin:0}
.bcol.r h4{background:var(--red)} .bcol.a h4{background:var(--amber)} .bcol.g h4{background:var(--ok)}
.bcol ul{margin:0; padding:11px 15px 14px; list-style:none}
.bcol li{font-size:13px; padding:7px 0; border-bottom:1px dashed var(--line); line-height:1.65}
.bcol li:last-child{border:0}
.orgchart{display:flex; flex-direction:column; align-items:center; gap:0; padding:6px 0}
.onode{background:var(--g-800); color:#fff; border-radius:10px; padding:9px 20px; font-family:var(--f-head); font-size:13.5px; text-align:center; box-shadow:var(--shadow)}
.onode.l2{background:var(--g-700)} .onode.l3{background:var(--g-600)} .onode.l4{background:var(--paper); color:var(--g-900); border:1.5px solid var(--g-500)}
.oline{width:2px; height:17px; background:var(--line-2)}
.orow{display:flex; gap:9px; flex-wrap:wrap; justify-content:center}

/* ---------- form template ---------- */
.blank{color:var(--line-2); letter-spacing:2px}
.foot{border-top:1px solid var(--line); background:#F6F2E9; padding:26px 40px; font-size:12.8px; color:var(--ink-2)}
.foot b{color:var(--g-900)}
.foot .fr{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; max-width:1220px; margin:0 auto}
.srconly{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------- responsive ---------- */
@media (max-width:1120px){ .g4{grid-template-columns:repeat(2,1fr)} .kpis{grid-template-columns:repeat(2,1fr)} }
@media (max-width:980px){
  .side{position:fixed; z-index:80; inset-block:0; inset-inline-end:0; transform:translateX(100%); transition:transform .26s ease}
  html[dir=rtl] .side{transform:translateX(-100%)}
  body.open .side{transform:none !important}
  .topbar{display:flex}
  .scrim{display:block; position:fixed; inset:0; background:rgba(10,30,24,.5); opacity:0; pointer-events:none; transition:.24s; z-index:70}
  body.open .scrim{opacity:1; pointer-events:auto}
  .wrap{padding:20px 16px 80px}
  .g2,.g3,.g4,.dcards,.board{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .sec-head h2{font-size:21px}
  .hero{padding:22px 20px} .hero h1{font-size:21px}
  .fstep{grid-template-columns:1fr} .fstep .fl{border-inline-end:0; border-bottom:1px solid var(--line)}
  .foot{padding:22px 16px}
}
@media (max-width:560px){
  .kpis{grid-template-columns:1fr}
  .card{padding:15px 15px}
  .mplot{height:380px; margin-inline-start:0}
}
@media print{.side,.topbar{display:none} .sec{display:block !important}}