:root{--ink:#0f1923;--mid:#334155;--muted:#64748b;--paper:#f8fafc;--white:#fff;--rule:#e2e8f0;--gold:#c8960c;--gold-bg:#fef9e7;--blue:#1e40af;--blue-lt:#dbeafe;--green:#065f46;--green-lt:#dcfce7;--red:#991b1b;--red-lt:#fee2e2;--amber:#92400e;--amber-lt:#fef3c7;--purple:#6b21a8;--purple-lt:#f3e8ff;--fh:'Tajawal',sans-serif;--fb:'IBM Plex Sans Arabic',sans-serif}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--paper);color:var(--ink);line-height:1.75}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* NAV */
.nav{background:var(--ink);position:sticky;top:0;z-index:999;border-bottom:3px solid var(--gold)}
.ni{max-width:1100px;margin:0 auto;padding:13px 20px;display:flex;justify-content:space-between;align-items:center}
.logo{font-family:var(--fh);font-size:1.45rem;font-weight:900;color:#fff}
.nl{display:flex;list-style:none;gap:4px}
.nl a{color:rgba(255,255,255,.8);padding:8px 13px;border-radius:6px;font-weight:600;font-size:.86rem;transition:.2s}
.nl a:hover,.nl a.on{background:var(--gold);color:var(--ink)}
.hbg{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.hbg span{width:24px;height:2px;background:#fff;display:block}

/* BREADCRUMB */
.bc{background:#fff;border-bottom:1px solid var(--rule);padding:10px 0}
.bcr{display:flex;align-items:center;gap:7px;font-size:.81rem;color:var(--muted);flex-wrap:wrap}
.bcr a{color:var(--blue);font-weight:600}.bcr a:hover{text-decoration:underline}

/* ARTICLE PAGE */
.art-pg{padding:44px 0 72px}
.art-grid{display:grid;grid-template-columns:1fr 280px;gap:44px;align-items:start}
.art-cat{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:20px;font-size:.76rem;font-weight:800;margin-bottom:12px}
.cat-b{background:var(--blue-lt);color:var(--blue)}.cat-s{background:var(--purple-lt);color:var(--purple)}
.cat-a{background:var(--amber-lt);color:var(--amber)}.cat-r{background:var(--red-lt);color:var(--red)}
.cat-f{background:var(--green-lt);color:var(--green)}.cat-st{background:var(--green-lt);color:var(--green)}
.art-h1{font-family:var(--fh);font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:900;line-height:1.25;margin-bottom:15px}
.art-meta{display:flex;gap:14px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:24px}
.am{font-size:.81rem;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:5px}
.hero-img{width:100%;height:270px;overflow:hidden;border-radius:12px;margin-bottom:28px;position:relative}
.hero-img img{width:100%;height:100%;object-fit:cover}

/* CONTENT */
.art-body{color:var(--mid);font-size:.97rem;line-height:1.9}
.art-body h2{font-family:var(--fh);font-size:1.35rem;font-weight:900;color:var(--ink);margin:32px 0 12px;padding-bottom:9px;border-bottom:2px solid var(--rule)}
.art-body h3{font-family:var(--fh);font-size:1.08rem;font-weight:800;color:var(--ink);margin:22px 0 10px}
.art-body p{margin-bottom:14px}
.art-body ul,.art-body ol{margin:10px 0 14px 20px}
.art-body li{margin-bottom:8px;line-height:1.8}
.art-body strong{color:var(--ink);font-weight:800}
.hb{background:var(--gold-bg);border-right:4px solid var(--gold);padding:15px 18px;border-radius:8px;margin:20px 0;font-size:.93rem;line-height:1.8}
.ib{background:var(--blue-lt);border-right:4px solid var(--blue);padding:15px 18px;border-radius:8px;margin:20px 0;font-size:.93rem;line-height:1.8}
.wb{background:var(--red-lt);border-right:4px solid #dc2626;padding:15px 18px;border-radius:8px;margin:20px 0;font-size:.91rem;line-height:1.75}
.gb{background:var(--green-lt);border-right:4px solid #16a34a;padding:15px 18px;border-radius:8px;margin:20px 0;font-size:.93rem;line-height:1.8}
.tw{overflow-x:auto;margin:20px 0}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{background:var(--ink);color:#fff;padding:11px 14px;text-align:right;font-family:var(--fh);font-weight:700}
td{padding:10px 14px;border-bottom:1px solid var(--rule)}
tr:nth-child(even) td{background:#f8fafc}
tr:hover td{background:var(--blue-lt)}
.steps{counter-reset:step;display:flex;flex-direction:column;gap:0;margin:20px 0}
.step{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule);align-items:flex-start}
.step:last-child{border-bottom:none}
.sn{background:var(--ink);color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.83rem;flex-shrink:0;margin-top:3px}
.st{flex:1}.st strong{display:block;font-family:var(--fh);font-weight:800;margin-bottom:3px;color:var(--ink)}
.disc{background:var(--gold-bg);border:1px solid #e8c44c;border-radius:9px;padding:15px 18px;margin-top:32px;font-size:.81rem;color:#7a5f00;line-height:1.7}
.next-art{background:linear-gradient(135deg,#0a1628,#1e3a5f);border-radius:12px;padding:24px;color:#fff;margin-top:36px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.na-sub{display:block;font-size:.78rem;color:rgba(255,255,255,.58);margin-bottom:5px}
.na-t{font-family:var(--fh);font-size:1.02rem;font-weight:900;line-height:1.3}
.na-btn{background:var(--gold);color:var(--ink);padding:10px 20px;border-radius:8px;font-family:var(--fh);font-weight:800;white-space:nowrap;font-size:.87rem;flex-shrink:0;border:none;cursor:pointer}

/* SIDEBAR */
.sb{position:sticky;top:80px}
.wg{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:19px;margin-bottom:20px}
.wt{font-family:var(--fh);font-size:.95rem;font-weight:900;padding-bottom:10px;border-bottom:2px solid var(--ink);margin-bottom:15px}
.toc{list-style:none}.toc li{padding:6px 0;border-bottom:1px solid var(--rule);font-size:.84rem}
.toc li:last-child{border-bottom:none}.toc a{color:var(--blue);font-weight:600}
.toc a:hover{text-decoration:underline}
.rls{display:flex;flex-direction:column;gap:0}
.rl{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--rule);align-items:flex-start}
.rl:last-child{border-bottom:none}
.rl-icon{font-size:1.3rem;flex-shrink:0;margin-top:1px}
.rl-t{font-size:.83rem;font-weight:700;color:var(--mid);line-height:1.4}
.rl:hover .rl-t{color:var(--blue)}
.lvl{padding:3px 9px;border-radius:11px;font-size:.71rem;font-weight:800;display:inline-block;margin-top:4px}
.lvl-b{background:var(--green-lt);color:var(--green)}.lvl-m{background:var(--amber-lt);color:var(--amber)}.lvl-a{background:var(--red-lt);color:var(--red)}

/* FOOTER */
footer{background:var(--ink);color:#fff;padding:44px 0 22px;margin-top:56px}
.fg{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;margin-bottom:28px}
.fl{font-family:var(--fh);font-size:1.3rem;font-weight:900;margin-bottom:9px}
.fd{color:rgba(255,255,255,.58);font-size:.84rem;line-height:1.65}
.fc h4{font-size:.88rem;font-weight:800;margin-bottom:12px;color:var(--gold)}
.fl-l{list-style:none}.fl-l li{margin-bottom:7px}
.fl-l a{color:rgba(255,255,255,.58);font-size:.83rem;transition:.2s}
.fl-l a:hover{color:var(--gold)}
.fb{border-top:1px solid rgba(255,255,255,.1);padding-top:18px;text-align:center;font-size:.77rem;color:rgba(255,255,255,.42)}
.fw{background:rgba(200,150,12,.12);border:1px solid rgba(200,150,12,.28);padding:10px 14px;border-radius:7px;margin-top:10px;color:#f0c040;font-size:.77rem;line-height:1.6}

@media(max-width:880px){.art-grid{grid-template-columns:1fr}.sb{position:static}.next-art{flex-direction:column}.fg{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.hero-img{height:200px}.fg{grid-template-columns:1fr}.nl{display:none;position:absolute;top:60px;left:0;right:0;background:var(--ink);flex-direction:column;padding:13px;z-index:999}.nl.on{display:flex}.hbg{display:flex}}