*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100%; background: var(--bg); background-image: var(--bg-canvas); background-attachment: fixed;
  color: var(--text); font-family: var(--font-ar); font-size: var(--fs-md); line-height: 1.55; -webkit-font-smoothing: antialiased;
  transition: background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}
html[lang="en"] body { font-family: var(--font-en); }
/* Alexandria sits tall — Arabic running text needs a little more leading than Inter does */
html[lang="ar"] body { line-height: 1.68; letter-spacing: 0; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.4; }
/* Headings are 600, not 700 — at these sizes bold reads as loud rather than important, and the size step is
   what carries the hierarchy. Only the hero numbers on the dashboard go heavier. */
h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-semi); letter-spacing: -.011em; line-height: var(--lh-tight); }
h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-md); }
p { margin: 0; }
a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-strong); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
svg.ic { width: 18px; height: 18px; flex: none; }
/* Used by JS to show and hide blocks. It has to beat whatever display the element already had. */
.hidden { display: none !important; }
::selection { background: var(--brand-soft); color: var(--brand-ink); }
:focus-visible { outline: none; box-shadow: var(--ring); }
[hidden] { display: none !important; }
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); } .muted-2 { color: var(--text-2); } .small { font-size: var(--fs-sm); } .xs { font-size: var(--fs-xs); }
.truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row { display: flex; align-items: center; gap: var(--sp-2); } .row-wrap { flex-wrap: wrap; } .col { display: flex; flex-direction: column; gap: var(--sp-2); }
.between { justify-content: space-between; } .grow { flex: 1 1 auto; min-width: 0; } .center { justify-content: center; }
.gap-1 { gap: var(--sp-1); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mb-4 { margin-bottom: var(--sp-4); }
.hide-sm { } @media (max-width: 900px) { .hide-sm { display: none !important; } }
.grid { display: grid; gap: var(--sp-4); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: var(--r-sm); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[dir="rtl"] .flip { transform: scaleX(-1); }
.ltr { direction: ltr; unicode-bidi: isolate; } .rtl { direction: rtl; }