:root{
  --brand:#0d9488; --brand-dk:#0b7268; --brand-dker:#095c54; --brand-soft:#e7f5f3;
  --ok:#0ab39c; --warn:#f7b84b; --danger:#f06548; --info:#299cdb;
  --bg:#f3f3f9; --panel:#fff; --ink:#212529; --muted:#878a99;
  --line:#e9ebec; --nav:#1c2b3a; --nav-ink:#abb9c7; --nav-on:#fff;
  --radius:.5rem; --shadow:0 1px 2px rgba(56,65,74,.15);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'IBM Plex Sans Arabic',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14.5px;line-height:1.9;font-weight:400;
}
a{color:var(--brand-dk);text-decoration:none}
a:hover{color:var(--brand);text-decoration:underline}
code,kbd{font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:.85em;direction:ltr;display:inline-block}
code{background:#eff2f7;color:#405189;padding:.1em .4em;border-radius:4px}

/* ── shell ── */
.wrap{display:flex;min-height:100vh}
.side{width:260px;flex:0 0 260px;background:var(--nav);position:sticky;top:0;height:100vh;overflow-y:auto;padding-bottom:2rem}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{background:#2d4356;border-radius:3px}
.brand{display:flex;align-items:center;gap:.65rem;padding:1.05rem 1.25rem;border-bottom:1px solid #2a3b4d;position:sticky;top:0;background:var(--nav);z-index:2}
.brand img{width:38px;height:38px;border-radius:9px;flex-shrink:0;background:#fff;padding:2px}
.brand b{display:block;color:#fff;font-size:.95rem;font-weight:600;line-height:1.35}
.brand span{display:block;color:#7f93a8;font-size:.7rem;font-weight:400}
.sgroup{padding:1rem 1.25rem .3rem;color:#6b8198;font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.side a{display:flex;align-items:center;gap:.6rem;padding:.47rem 1.25rem;color:var(--nav-ink);font-size:.86rem;font-weight:400;border-inline-start:3px solid transparent}
.side a:hover{color:var(--nav-on);background:#22364a;text-decoration:none}
.side a.on{color:var(--nav-on);background:#22364a;border-inline-start-color:var(--brand);font-weight:600}
.side a i{font-size:1rem;opacity:.85;font-style:normal}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{background:var(--panel);border-bottom:1px solid var(--line);padding:.72rem 1.5rem;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:5;box-shadow:var(--shadow)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);padding:.25rem .55rem;font-size:1.15rem;cursor:pointer;color:var(--ink)}
.crumb{color:var(--muted);font-size:.8rem;flex:1;min-width:0}
.crumb b{color:var(--ink);font-weight:600}
.gohome{font-size:.8rem;font-weight:600;white-space:nowrap;background:var(--brand);color:#fff;padding:.32rem .8rem;border-radius:var(--radius)}
.gohome:hover{background:var(--brand-dk);color:#fff;text-decoration:none}
.content{padding:1.8rem 2rem 3.5rem;max-width:880px;width:100%}

h1{font-size:1.6rem;font-weight:600;margin:0 0 .35rem;color:var(--ink);line-height:1.45}
.lede{color:var(--muted);font-size:.95rem;margin:0 0 1.9rem}
h2{font-size:1.12rem;font-weight:600;margin:2.1rem 0 .7rem;padding-top:1.2rem;border-top:1px solid var(--line);color:var(--ink)}
h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
h3{font-size:.97rem;font-weight:600;margin:1.4rem 0 .35rem;color:var(--brand-dk)}
p{margin:0 0 .85rem}
ul,ol{margin:0 0 1rem;padding-inline-start:1.35rem}
li{margin-bottom:.3rem}
strong,b{font-weight:600}

/* ── cards (Velzon style: white, hairline, soft shadow) ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.85rem;margin:0 0 1.5rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.05rem;box-shadow:var(--shadow);display:block}
.card:hover{text-decoration:none;box-shadow:0 5px 18px rgba(56,65,74,.13);border-color:var(--brand)}
.card b{display:block;color:var(--ink);font-size:.95rem;font-weight:600;margin-bottom:.15rem}
.card span{color:var(--muted);font-size:.82rem;display:block;line-height:1.65}
.card .ico{width:40px;height:40px;border-radius:var(--radius);background:var(--brand-soft);color:var(--brand-dk);display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin-bottom:.6rem;font-style:normal}

table{width:100%;border-collapse:collapse;margin:0 0 1.2rem;font-size:.86rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
th,td{padding:.55rem .75rem;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#f3f6f9;font-weight:600;color:var(--ink);font-size:.8rem}
tr:last-child td{border-bottom:0}
.tscroll{overflow-x:auto}

.note{border:1px solid var(--line);border-inline-start:3px solid var(--brand);background:var(--panel);border-radius:var(--radius);padding:.75rem .95rem;margin:0 0 1.1rem;font-size:.87rem;box-shadow:var(--shadow)}
.note.warn{border-inline-start-color:var(--warn);background:#fffbf3}
.note.danger{border-inline-start-color:var(--danger);background:#fef4f2}
.note.ok{border-inline-start-color:var(--ok);background:#f0fbf8}
.note b{display:block;margin-bottom:.1rem;font-weight:600}

pre{background:var(--nav);color:#d3dde7;padding:.85rem 1rem;border-radius:var(--radius);overflow-x:auto;direction:ltr;text-align:left;font-size:.8rem;line-height:1.65;margin:0 0 1.2rem}
pre code{background:none;color:inherit;padding:0;display:block}

.pill{display:inline-block;font-size:.68rem;font-weight:600;padding:.1rem .48rem;border-radius:4px;background:var(--brand-soft);color:var(--brand-dk)}
.pill.soon{background:#fff3da;color:#b4841c}
.pill.off{background:#fde8e4;color:#c0392b}

.foot{margin-top:auto;border-top:1px solid var(--line);background:var(--panel);padding:.95rem 2rem;color:var(--muted);font-size:.78rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@media (max-width:900px){
  .side{position:fixed;inset-inline-start:0;top:0;transform:translateX(100%);transition:transform .2s;z-index:40;box-shadow:-8px 0 28px rgba(0,0,0,.22)}
  .side.open{transform:none !important}
  .burger{display:block}
  .content{padding:1.3rem 1rem 2.5rem}
  .foot{padding:1rem}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:35;display:none}
  .scrim.on{display:block}
}