:root{
  --primary:#1E293B; --secondary:#334155; --accent:#2563EB; --accent-soft:#E8EFFD;
  --bg:#F8FAFC; --fg:#0F172A; --muted:#F1F2F3; --border:#E4E5E7;
  --ok:#15803D; --ok-soft:#E7F5EC; --warn:#B45309; --warn-soft:#FDF3E3;
  --danger:#DC2626; --danger-soft:#FDECEC; --violet:#6D28D9; --violet-soft:#F1EBFD;
  --ink:#0F172A; --ink-2:#1E293B; --ink-3:#334155;
  --glass:rgba(255,255,255,.72); --glass-brd:rgba(15,23,42,.08);
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --sh-1:0 1px 2px rgba(15,23,42,.06), 0 8px 24px -12px rgba(15,23,42,.18);
  --sh-2:0 20px 50px -20px rgba(15,23,42,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-h:'Noto Naskh Arabic',serif; --font-b:'Noto Sans Arabic',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-b);
  font-weight:400; line-height:1.75; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-h); font-weight:700; line-height:1.3; margin:0}
p{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
ul,ol{margin:0; padding:0; list-style:none}
table{border-collapse:collapse; width:100%}
.muted{color:#64748B; font-size:.9rem}
.ic{width:1.05em; height:1.05em; stroke-width:1.75; flex:none}
.container{width:min(1240px,92vw); margin-inline:auto}
.skip{position:absolute; inset-inline-start:-9999px}
.skip:focus{inset-inline-start:1rem; top:1rem; background:#fff; padding:.5rem 1rem; z-index:99}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:40; backdrop-filter:blur(16px) saturate(140%);
  background:rgba(15,23,42,.82); border-bottom:1px solid rgba(255,255,255,.08)}
.nav-inner{width:min(1240px,92vw); margin-inline:auto; display:flex; align-items:center; gap:1.25rem;
  padding:.7rem 0; color:#F8FAFC; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:.65rem; margin-inline-end:auto}
.brand-mark{width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--accent),#60A5FA); box-shadow:0 6px 18px -8px rgba(37,99,235,.9)}
.brand-mark svg{width:20px; height:20px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linejoin:round}
.brand-text{display:flex; flex-direction:column; line-height:1.25}
.brand-text strong{font-family:var(--font-h); font-size:1.05rem}
.brand-text small{color:#94A3B8; font-size:.72rem}
.nav-links{display:flex; gap:.25rem; flex-wrap:wrap}
.nav-links a{padding:.45rem .8rem; border-radius:999px; font-size:.86rem; color:#CBD5E1; transition:all .22s var(--ease)}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,.1); transform:translateY(-1px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:1px solid transparent;
  border-radius:999px; padding:.72rem 1.35rem; font-size:.9rem; font-weight:500; cursor:pointer;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease)}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 10px 24px -12px rgba(37,99,235,.85)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(37,99,235,.95)}
.btn-ghost{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.22)}
.btn-ghost:hover{background:rgba(255,255,255,.16); transform:translateY(-2px)}
.btn-sm{padding:.5rem 1rem; font-size:.82rem}
.panel .btn-ghost{background:#fff; color:var(--secondary); border-color:var(--border)}
.panel .btn-ghost:hover{background:var(--muted)}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; color:#F8FAFC; padding:4.5rem 0 3.5rem;
  background:radial-gradient(900px 420px at 85% -10%,#1D4ED8 0%,transparent 60%),
             linear-gradient(165deg,#0B1220 0%,#111C31 55%,#0F172A 100%)}
.hero-glow{position:absolute; inset:auto -10% -40% 40%; height:420px;
  background:radial-gradient(closest-side,rgba(37,99,235,.35),transparent); filter:blur(10px)}
.hero-inner{position:relative; display:flex; flex-direction:column; gap:1.1rem}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start; font-size:.8rem;
  padding:.4rem .9rem; border-radius:999px; background:rgba(96,165,250,.14); color:#BFDBFE;
  border:1px solid rgba(96,165,250,.32)}
.hero h1{font-size:clamp(2.1rem,5vw,3.6rem); letter-spacing:-.01em}
.hero h1 span{color:#93C5FD; font-weight:500}
.lead{max-width:64ch; color:#CBD5E1; font-size:clamp(.95rem,1.4vw,1.05rem)}
.hero-actions{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.4rem}

/* ---------- kpis ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:.85rem; margin-top:1.4rem}
.kpi{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md);
  padding:.95rem 1.05rem; backdrop-filter:blur(10px); transition:transform .25s var(--ease), border-color .25s}
.kpi:hover{transform:translateY(-3px); border-color:rgba(147,197,253,.45)}
.kpi b{display:block; font-family:var(--font-h); font-size:clamp(1.6rem,3vw,2.1rem); line-height:1.1}
.kpi span{font-size:.8rem; color:#94A3B8}
.kpi .kpi-ic{width:26px; height:26px; border-radius:9px; display:grid; place-items:center; margin-bottom:.4rem;
  background:rgba(96,165,250,.18); color:#BFDBFE}

/* ---------- tabs ---------- */
.tabs{position:sticky; top:58px; z-index:35; display:flex; gap:.4rem; overflow-x:auto; padding:.7rem 4vw;
  background:rgba(248,250,252,.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:1px solid transparent; background:transparent; color:#475569; padding:.5rem 1rem;
  border-radius:999px; font-size:.87rem; white-space:nowrap; display:inline-flex; align-items:center; gap:.45rem;
  transition:all .22s var(--ease)}
.tabs button:hover{background:#fff; color:var(--primary); box-shadow:var(--sh-1)}
.tabs button[aria-selected="true"]{background:var(--primary); color:#fff; box-shadow:var(--sh-1)}

/* ---------- panels ---------- */
.panel{padding:3rem 0 1rem; display:none}
.panel.active{display:block; animation:fadeUp .5s var(--ease) both}
.panel-head{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem}
.panel-head h2{font-size:clamp(1.4rem,2.6vw,1.9rem); display:flex; align-items:center; gap:.55rem}
.panel-head h2 .ic{color:var(--accent)}
.panel-head p{margin-top:.35rem; max-width:70ch}
.card{background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--r-lg);
  padding:1.3rem; backdrop-filter:blur(12px); box-shadow:var(--sh-1)}
.card h3{font-size:1.02rem; margin-bottom:.9rem; color:var(--primary)}
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.1rem; margin-bottom:1.4rem}
.badge{display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .7rem; border-radius:999px;
  font-size:.78rem; font-weight:500; white-space:nowrap}
.badge-soft{background:var(--accent-soft); color:#1D4ED8}
.badge-ok{background:var(--ok-soft); color:var(--ok)}
.badge-warn{background:var(--warn-soft); color:var(--warn)}
.badge-danger{background:var(--danger-soft); color:var(--danger)}
.badge-neutral{background:var(--muted); color:var(--secondary)}
.badge-violet{background:var(--violet-soft); color:var(--violet)}

/* ---------- toolbar ---------- */
.toolbar{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem}
.field{display:flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--border);
  border-radius:var(--r-sm); padding:.5rem .8rem; transition:border-color .2s, box-shadow .2s}
.field:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.field.grow{flex:1 1 300px}
.field .ic{color:#94A3B8}
.field input,.field select{border:0; outline:0; background:transparent; font:inherit; font-size:.88rem;
  color:var(--fg); width:100%; min-width:120px}
.field select{cursor:pointer}

/* ---------- tables ---------- */
.table-wrap{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); overflow:auto;
  box-shadow:var(--sh-1); max-height:70vh}
.tbl{min-width:900px; font-size:.86rem}
.tbl thead th{position:sticky; top:0; z-index:2; background:#F8FAFC; color:var(--secondary);
  font-weight:500; font-size:.8rem; text-align:right; padding:.75rem .8rem; border-bottom:1px solid var(--border);
  white-space:nowrap}
.tbl tbody td{padding:.7rem .8rem; border-bottom:1px solid #F1F5F9; vertical-align:middle}
.tbl tbody tr{transition:background .18s var(--ease)}
.tbl tbody tr:hover{background:#F8FAFC}
.tbl tbody tr.clickable{cursor:pointer}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .title-cell{min-width:280px; font-weight:500; color:var(--primary)}
.tbl .ref{color:#64748B; font-size:.78rem; direction:ltr; text-align:right; display:block}
.tbl-compact{min-width:820px}
.dot{display:inline-block; width:7px; height:7px; border-radius:50%; margin-inline-end:.4rem; vertical-align:middle}
.empty{padding:2rem; text-align:center; color:#94A3B8; display:flex; align-items:center; justify-content:center; gap:.5rem}
.num{direction:ltr; display:inline-block; font-variant-numeric:tabular-nums}

/* ---------- charts ---------- */
.bars{display:flex; flex-direction:column; gap:.7rem}
.bar-row{display:grid; grid-template-columns:1fr auto; gap:.4rem .6rem; align-items:center}
.bar-row .lbl{font-size:.84rem; color:var(--secondary)}
.bar-row .val{font-size:.82rem; color:#64748B; font-variant-numeric:tabular-nums}
.bar-track{grid-column:1/-1; height:9px; background:var(--muted); border-radius:999px; overflow:hidden}
.bar-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,#2563EB,#60A5FA);
  animation:grow .9s var(--ease) both}
.bars-alt .bar-fill{background:linear-gradient(90deg,#6D28D9,#A78BFA)}
.donut-wrap{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; justify-content:center}
.donut{position:relative; width:168px; height:168px; border-radius:50%; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.05)}
.donut-hole{width:96px; height:96px; border-radius:50%; background:#fff; display:grid; place-items:center;
  font-family:var(--font-h); font-size:1.5rem; color:var(--primary)}
.legend{display:flex; flex-direction:column; gap:.45rem; font-size:.85rem}
.legend li{display:flex; align-items:center; gap:.5rem; color:var(--secondary)}

/* ---------- verification ---------- */
.verify-summary{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; justify-content:space-between;
  margin-bottom:1.1rem; background:linear-gradient(135deg,#0F172A,#1E293B); color:#F1F5F9; border:0}
.verify-summary .vs-num{font-family:var(--font-h); font-size:clamp(1.8rem,4vw,2.6rem); line-height:1}
.verify-summary .vs-num span{color:#6EE7B7}
.verify-summary p{color:#94A3B8; font-size:.88rem}
.vs-bar{flex:1 1 220px; height:10px; background:rgba(255,255,255,.14); border-radius:999px; overflow:hidden}
.vs-bar i{display:block; height:100%; background:linear-gradient(90deg,#34D399,#6EE7B7)}
.verify-list{display:flex; flex-direction:column; gap:.7rem}
.vitem{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  transition:box-shadow .24s var(--ease), transform .24s var(--ease)}
.vitem:hover{box-shadow:var(--sh-1); transform:translateY(-2px)}
.vhead{display:flex; align-items:center; gap:.9rem; padding:.95rem 1.1rem; cursor:pointer; flex-wrap:wrap}
.vhead .vtitle{font-weight:500; color:var(--primary); flex:1 1 240px}
.vhead .vmeta{font-size:.78rem; color:#94A3B8; display:flex; gap:.8rem; flex-wrap:wrap}
.vbody{padding:0 1.1rem 1.1rem; display:none; border-top:1px solid #F1F5F9; margin-top:.2rem}
.vitem.open .vbody{display:block; animation:fadeUp .35s var(--ease) both}
.excerpt{background:#F8FAFC; border:1px dashed var(--border); border-radius:var(--r-sm); padding:.75rem .9rem;
  font-size:.82rem; color:var(--secondary); margin:.85rem 0; line-height:1.9; word-break:break-word}
.checks{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.45rem; margin-top:.4rem}
.check{display:flex; align-items:center; justify-content:space-between; gap:.6rem; background:#fff;
  border:1px solid var(--border); border-radius:var(--r-sm); padding:.5rem .7rem; font-size:.8rem}
.check span{color:#64748B}
.check b{color:var(--primary); font-weight:500}

/* ---------- metrics / scenarios / lists ---------- */
.metric-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; margin-bottom:1.4rem}
.metric{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:1.1rem;
  box-shadow:var(--sh-1); transition:transform .24s var(--ease)}
.metric:hover{transform:translateY(-3px)}
.metric .m-ic{width:30px; height:30px; border-radius:10px; display:grid; place-items:center; margin-bottom:.6rem;
  background:var(--accent-soft); color:#1D4ED8}
.metric b{font-family:var(--font-h); font-size:clamp(1.5rem,3vw,2rem); display:block; color:var(--primary)}
.metric span{font-size:.82rem; color:#64748B}
.scen-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin-top:1.4rem}
.scen-card{background:linear-gradient(160deg,#FFFFFF,#F8FAFC); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:1.15rem; box-shadow:var(--sh-1); transition:transform .24s var(--ease)}
.scen-card:hover{transform:translateY(-3px)}
.scen-card h4{font-size:1rem; color:var(--primary); margin-bottom:.6rem}
.scen-card dl{display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; font-size:.83rem; color:#64748B; margin:0}
.scen-card dt{color:#94A3B8}
.scen-card dd{margin:0; color:var(--secondary); font-weight:500}
.chip-groups{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; margin-bottom:1.4rem}
.chip-group .card>h3{font-size:.95rem}
.chips{display:flex; flex-wrap:wrap; gap:.4rem}
.chip{background:var(--muted); color:var(--secondary); border:1px solid var(--border); border-radius:999px;
  padding:.28rem .7rem; font-size:.78rem; transition:all .2s var(--ease)}
.chip:hover{background:var(--accent-soft); color:#1D4ED8; border-color:#BFDBFE}
.guide{counter-reset:step; display:flex; flex-direction:column; gap:.6rem}
.guide li{counter-increment:step; display:flex; gap:.75rem; font-size:.88rem; color:var(--secondary);
  padding-bottom:.6rem; border-bottom:1px dashed #E2E8F0}
.guide li:last-child{border-bottom:0; padding-bottom:0}
.guide li::before{content:counter(step,arabic-indic); flex:none; width:24px; height:24px; border-radius:50%;
  background:var(--primary); color:#fff; display:grid; place-items:center; font-size:.72rem}

/* ---------- drawer + toast ---------- */
.drawer-scrim{position:fixed; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(3px); z-index:60;
  animation:fade .25s var(--ease) both}
.drawer{position:fixed; inset-block:0; inset-inline-start:0; width:min(520px,94vw); background:#fff; z-index:61;
  box-shadow:var(--sh-2); padding:1.4rem; overflow-y:auto; animation:slideIn .35s var(--ease) both}
.drawer h3{font-size:1.15rem; color:var(--primary); margin-bottom:.3rem}
.drawer .d-close{position:absolute; inset-inline-end:1rem; top:1rem; border:0; background:var(--muted);
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:var(--secondary)}
.drawer .d-close:hover{background:#E2E8F0}
.dl{display:grid; grid-template-columns:auto 1fr; gap:.5rem .9rem; margin:1rem 0; font-size:.85rem}
.dl dt{color:#94A3B8}
.dl dd{margin:0; color:var(--primary); word-break:break-word}
.d-section{margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--border)}
.d-section h4{font-size:.92rem; color:var(--secondary); margin-bottom:.5rem}
.toast-stack{position:fixed; inset-block-end:1.2rem; inset-inline-start:1.2rem; z-index:70; display:flex;
  flex-direction:column; gap:.5rem}
.toast{background:var(--ink); color:#F8FAFC; border-radius:var(--r-md); padding:.7rem 1rem; font-size:.85rem;
  display:flex; align-items:center; gap:.55rem; box-shadow:var(--sh-2); animation:fadeUp .3s var(--ease) both}
.toast.ok{background:#065F46}
.footer{background:var(--ink); color:#CBD5E1; margin-top:3rem; padding:2.2rem 0}
.footer-inner{display:flex; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; align-items:center}
.footer strong{font-family:var(--font-h); color:#fff; font-size:1rem}
.footer .muted{color:#94A3B8; margin-top:.3rem}
.footer-links{display:flex; gap:1rem; flex-wrap:wrap; font-size:.86rem}
.footer-links a{display:inline-flex; align-items:center; gap:.4rem; color:#CBD5E1; transition:color .2s}
.footer-links a:hover{color:#93C5FD}

@keyframes fadeUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0} to{opacity:1}}
@keyframes slideIn{from{transform:translateX(-100%)} to{transform:none}}
@keyframes grow{from{width:0}}

@media (max-width:900px){
  .nav-links{order:3; width:100%; justify-content:flex-start}
  .tabs{top:56px}
  .hero{padding:3rem 0 2.5rem}
  .panel{padding:2.2rem 0 1rem}
  .table-wrap{max-height:none}
}
@media (max-width:560px){
  .nav-inner{gap:.6rem}
  .brand-text small{display:none}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .verify-summary{align-items:flex-start}
}