*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sand-50);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh);
  min-block-size: 100vh;
  overflow-x: hidden;
}
html[lang="ar"] body, html[lang="ar"] * { letter-spacing: 0; font-style: normal; }
h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.3; margin: 0 0 .4em; color: var(--ink-900); }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); }
p { margin: 0 0 .8em; }
a { color: var(--water); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--brass-400); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
bdi { unicode-bidi: isolate; }
svg.icon { inline-size: 1.25em; block-size: 1.25em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.2em; }
html[dir="rtl"] .icon-dir { transform: scaleX(-1); }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--ink-500); }
.small { font-size: var(--fs-small); }
.tiny { font-size: var(--fs-tiny); }
.serif { font-family: var(--font-serif); }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.grow { flex: 1 1 auto; }

/* ---------- app shell ---------- */
#app { min-block-size: 100vh; }
.topbar {
  position: fixed; inset-block-start: 0; inset-inline: 0; block-size: var(--topbar-h); z-index: 50;
  display: flex; align-items: center; gap: 14px; padding-inline: 20px;
  background: var(--ink-900); color: var(--sand-50);
  border-block-end: 3px solid var(--brass-500);
}
.wordmark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; font-family: var(--font-serif); white-space: nowrap; }
.wordmark .wm-ar { font-size: 24px; font-weight: 700; color: var(--brass-400); }
.wordmark .wm-en { font-size: 17px; opacity: .92; }
.stepper { display: flex; align-items: center; gap: 4px; margin-inline-start: 8px; min-inline-size: 0; }
.stepper a {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; text-decoration: none;
  color: var(--sand-200); font-size: 14px; line-height: 1.2; border: 1px solid transparent; white-space: nowrap;
}
.stepper a .num { display: inline-grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 12px; }
.stepper a .lbl { display: none; }
.stepper a[aria-current="page"] { background: var(--brass-500); color: var(--ink-900); }
.stepper a[aria-current="page"] .lbl { display: inline; }
.stepper a[aria-current="page"] .num { background: rgba(0,0,0,.18); }
.stepper a:hover:not([aria-current]) { border-color: var(--brass-500); }
.stepper .sep { inline-size: 1px; block-size: 20px; background: rgba(255,255,255,.2); margin-inline: 4px; }
.topbar .spacer { flex: 1 1 auto; }
.badge-proto {
  font-size: 13px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--brass-500); color: var(--brass-400); white-space: nowrap;
}
.badge-mode { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.08); border: 0; color: var(--sand-50); white-space: nowrap; }
.badge-mode .dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--idle); }
.badge-mode[data-mode="live"] .dot { background: #4cc272; box-shadow: 0 0 0 3px rgba(76,194,114,.25); }
.lang-toggle { display: inline-flex; border: 1px solid var(--brass-500); border-radius: 999px; overflow: hidden; background: transparent; padding: 0; }
.lang-toggle span { padding: 3px 12px; font-size: 15px; color: var(--sand-200); }
.lang-toggle span.on { background: var(--brass-500); color: var(--ink-900); font-weight: 700; }
.tray-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid rgba(255,255,255,.25); color: var(--sand-50); border-radius: 999px; padding: 4px 12px; font-size: 14px; white-space: nowrap; }
.tray-btn .count { min-inline-size: 22px; block-size: 22px; padding-inline: 6px; border-radius: 999px; background: var(--brass-500); color: var(--ink-900); display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; }
.tray-btn.bump .count { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.35); } }

.app-main {
  padding-block-start: calc(var(--topbar-h) + 24px);
  padding-block-end: calc(var(--strip-h) + 24px);
  padding-inline: var(--gutter);
  max-inline-size: 1360px; margin-inline: auto;
  min-block-size: calc(100vh - 0px);
}
.app-footer {
  margin-block-start: 40px; padding-block: 16px; border-block-start: 1px solid var(--sand-300);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: var(--fs-small); color: var(--ink-500);
}
.app-footer .amg { font-weight: 700; color: var(--ink-700); }
.link-btn { background: none; border: 0; padding: 0; color: var(--water); text-decoration: underline; font-size: inherit; }