:root {
  /* colour */
  --paper: #edf1ee;
  --surface: #ffffff;
  --ink: #1b2a35;
  --ink-2: #4b5c66;
  --ink-3: #75848c;
  --line: #d2dbd6;
  --line-soft: #e3e9e5;
  --signal: #0f7b69;
  --signal-soft: #d9eee8;
  --warn: #8f5c00;
  --warn-soft: #f5e9cf;
  --fail: #ad3a2e;
  --fail-soft: #f6dfda;
  --focus: #1f64d6;

  /* type: one family across Latin, Arabic and code */
  --sans: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --fs-1: 13px;  /* small, labels */
  --fs-2: 15px;  /* body */
  --fs-3: 18px;  /* h2 */
  --fs-4: 22px;  /* h1 on phones, stats */
  --fs-5: 28px;  /* headline, h1 */
  --fs-6: 40px;  /* marketing h2 */
  --fs-7: 56px;  /* marketing hero */
  --lh-body: 1.55;
  --tracking-tight: -0.015em;

  /* space */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --radius-s: 4px;
  --radius-m: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141c21;
    --surface: #1b252b;
    --ink: #e4ebe7;
    --ink-2: #a9b7b0;
    --ink-3: #7f8e88;
    --line: #2e3c43;
    --line-soft: #243138;
    --signal: #3fbfa5;
    --signal-soft: #173a34;
    --warn: #e0ad4a;
    --warn-soft: #3a2f17;
    --fail: #f07a6c;
    --fail-soft: #43221e;
    --focus: #7aa7ff;
    color-scheme: dark;
  }
}
/* Arabic: more line height, no negative letter spacing (it breaks joined letters). */
:root:lang(ar) { --lh-body: 1.75; --tracking-tight: 0; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-2)/var(--lh-body) var(--sans);
  font-feature-settings: "tnum" 1;
}
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--signal); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 600; }
h1 { font-size: 26px; letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-3); }
h3 { font-size: var(--fs-2); }
p { margin: 0; }
code, .mono { font-family: var(--mono); font-size: var(--fs-1); }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-1); }
.sr-only { position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.shell > * { min-width: 0; }
.side {
  border-inline-end: 1px solid var(--line);
  padding: var(--sp-5) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-5);
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; padding: 0 var(--sp-2); text-decoration: none; color: inherit; }
.brand-mark { width: 22px; height: 22px; display: block; }
.store { padding: var(--sp-3) var(--sp-2); border-block: 1px solid var(--line); }
.store-name { font-weight: 600; overflow-wrap: anywhere; }
.store-meta { color: var(--ink-2); font-size: var(--fs-1); margin-top: var(--sp-1); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { text-decoration: none; padding: 7px var(--sp-2); border-radius: var(--radius-s); color: var(--ink-2); }
.nav a:hover { background: var(--line-soft); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--signal); }
[dir="rtl"] .nav a[aria-current="page"] { box-shadow: inset -2px 0 0 var(--signal); }
.side-foot { margin-top: auto; padding: 0 var(--sp-2); font-size: var(--fs-1); color: var(--ink-2); display: grid; gap: var(--sp-2); }
.side-user { overflow-wrap: anywhere; }
.side-foot form { display: inline; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; }
.main { padding: 36px 44px var(--sp-8); max-width: 1120px; width: 100%; min-width: 0; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); margin-bottom: 28px; flex-wrap: wrap; }
.page-head p { margin-top: 6px; color: var(--ink-2); max-width: 64ch; }

/* language switch: three plain links, the current one marked */
.lang-switch { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-1); }
.lang-switch a { color: var(--ink-2); text-decoration: none; padding: 2px 0; border-bottom: 1px solid transparent; }
.lang-switch a:hover { color: var(--ink); border-bottom-color: var(--line); }
.lang-switch a[aria-current="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--signal); }

.banner { padding: 10px 14px; border-radius: var(--radius-s); margin-bottom: 20px; font-size: 14px; display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.banner.info { background: var(--signal-soft); }
.banner.warn { background: var(--warn-soft); }
.banner.fail { background: var(--fail-soft); }
.banner form { margin: 0; }

/* ---------- auth pages ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.auth-side { padding: var(--sp-7); display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6); border-inline-end: 1px solid var(--line); }
.auth-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.auth-top .brand { padding: 0; }
.auth-side .lede { font-size: 30px; line-height: 1.3; font-weight: 500; letter-spacing: var(--tracking-tight); max-width: 18ch; }
.auth-side .flow { margin-top: var(--sp-6); }
.auth-form { padding: var(--sp-7); display: flex; align-items: center; }
.auth-form > div { width: 100%; max-width: 420px; }
.auth-form h1 { margin-bottom: 6px; }
.auth-form .sub { color: var(--ink-2); margin-bottom: var(--sp-5); }

/* signal flow illustration on the auth page (always drawn left to right: store → Meta) */
.flow svg { width: 100%; max-width: 380px; height: auto; display: block; }
.flow .lane { stroke: var(--line); stroke-width: 2; fill: none; }
.flow .pulse { stroke: var(--signal); stroke-width: 2; fill: none; stroke-dasharray: 6 18; animation: travel 2.4s linear infinite; }
.flow .node { fill: var(--surface); stroke: var(--line); }
.flow text { font: 500 12px var(--sans); fill: var(--ink-2); }
@keyframes travel { to { stroke-dashoffset: -48; } }
@media (prefers-reduced-motion: reduce) { .flow .pulse { animation: none; } }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.field.grow { margin: 0; flex: 1; min-width: 220px; }
.field label, .label { font-size: var(--fs-1); font-weight: 600; }
.field .hint { font-size: var(--fs-1); color: var(--ink-2); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
input[type=text], input[type=email], input[type=password], input[type=url], select, textarea {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 9px 11px; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin-bottom: var(--sp-4); }
.check input { margin-top: var(--sp-1); }
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2); justify-content: center;
  font: 600 14px var(--sans); padding: 9px var(--sp-4); border-radius: var(--radius-s); min-height: 40px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--signal); color: #fff; }
.btn.primary:disabled { opacity: 0.45; cursor: not-allowed; background: var(--ink); color: var(--paper); }
.btn.quiet { background: transparent; border-color: var(--line); color: var(--ink); }
.btn.quiet:hover { border-color: var(--ink-2); color: var(--ink); }
.btn.danger { background: transparent; border-color: var(--fail); color: var(--fail); }
.btn.danger:hover { background: var(--fail-soft); }
.btn.small { padding: 5px 10px; font-size: var(--fs-1); min-height: 32px; }
.btn.full { width: 100%; }
.align-end { align-self: flex-end; }
.actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.form-error { background: var(--fail-soft); color: var(--ink); padding: 10px var(--sp-3); border-radius: var(--radius-s); margin-bottom: var(--sp-4); font-size: 14px; }
.after { margin-top: 20px; font-size: 14px; color: var(--ink-2); }
.after-form { margin-top: var(--sp-3); }

/* ---------- status bits ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px var(--sp-2); border-radius: 999px; background: var(--line-soft); color: var(--ink-2); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.active { background: var(--signal-soft); color: var(--signal); }
.pill.pending { background: var(--warn-soft); color: var(--warn); }
.pill.paused, .pill.rejected { background: var(--fail-soft); color: var(--fail); }
.pill.test { background: var(--warn-soft); color: var(--warn); }

.ids { display: inline-flex; gap: var(--sp-1); flex-wrap: wrap; }
.id { font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: var(--radius-s); border: 1px solid var(--line); color: var(--ink-3); }
.id.on { border-color: transparent; background: var(--signal-soft); color: var(--signal); }
.state { font-weight: 600; font-size: var(--fs-1); display: inline-flex; gap: 6px; align-items: center; }
.state.ok { color: var(--signal); }
.state.error { color: var(--fail); }

/* ---------- overview ---------- */
.headline { font-size: var(--fs-5); line-height: 1.3; font-weight: 400; letter-spacing: var(--tracking-tight); max-width: 30ch; }
.headline strong { font-weight: 600; }
.headline .bad { color: var(--fail); font-weight: 600; }
.section { margin-top: 44px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin-bottom: 14px; flex-wrap: wrap; }
.section-head p { color: var(--ink-2); font-size: 14px; }

.strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 150px; margin-top: 28px; padding-bottom: var(--sp-1); border-bottom: 1px solid var(--line); }
.day { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 2px; position: relative; }
.day .ok { background: var(--signal); border-radius: 3px 3px 0 0; min-height: 2px; }
.day .err { background: var(--fail); border-radius: 3px 3px 0 0; }
.day .ok + .err, .day .err + .ok { border-radius: 0; }
.strip-labels { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: var(--sp-2); font-size: 12px; color: var(--ink-2); }
.strip-labels span b { display: block; color: var(--ink); font-weight: 600; font-size: var(--fs-1); }

.meters { display: grid; gap: 14px; max-width: 720px; }
.meter { display: grid; grid-template-columns: 170px 1fr 52px; gap: var(--sp-4); align-items: center; }
.meter-name { font-weight: 600; font-size: 14px; }
.meter-name span { display: block; font-weight: 400; color: var(--ink-2); font-size: 12.5px; }
.meter-track { height: 10px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.meter-fill { height: 100%; background: var(--signal); border-radius: 999px; }
.meter-fill.low { background: var(--warn); }
.meter-val { text-align: end; font-weight: 600; }
.score { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.score b { font-size: 34px; font-weight: 600; letter-spacing: var(--tracking-tight); }
.score span { color: var(--ink-2); font-size: 14px; }

/* ---------- tables ---------- */
.table-wrap { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: start; font-weight: 600; font-size: 12.5px; color: var(--ink-2); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: end; }
tr.fresh td { animation: fresh 2s ease-out; }
@keyframes fresh { from { background: var(--signal-soft); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { tr.fresh td { animation: none; } }
.err-text { color: var(--fail); font-size: var(--fs-1); margin-top: var(--sp-1); min-width: 220px; max-width: 60ch; }
.empty { padding: 36px 20px; text-align: center; color: var(--ink-2); }
.empty strong { display: block; color: var(--ink); margin-bottom: var(--sp-1); }
.filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters select { width: auto; }
.live { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-1); color: var(--ink-2); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 var(--signal); animation: beat 2s infinite; }
.live.off i { background: var(--ink-3); animation: none; }
@keyframes beat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 50%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .live i { animation: none; } }

/* ---------- setup ---------- */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; max-width: 780px; }
.step { position: relative; padding-block-end: 36px; padding-inline-start: 52px; counter-increment: step; min-width: 0; }
.step-body, .code { min-width: 0; max-width: 100%; }
.step::before {
  content: counter(step); position: absolute; inset-inline-start: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 600; font-size: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
}
.step::after { content: ""; position: absolute; inset-inline-start: 15.5px; top: 38px; bottom: 6px; width: 1px; background: var(--line); }
.step:last-child::after { display: none; }
.step.done::before { content: "✓"; background: var(--signal); border-color: var(--signal); color: #fff; }
.step.waiting::before { border-color: var(--warn); color: var(--warn); }
.step h2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 5px; }
.step > p { color: var(--ink-2); margin: 6px 0 14px; max-width: 64ch; }
.step-body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 18px; }
.step-body ol, .step-body ul { margin: 0 0 14px; padding-inline-start: 20px; }
.step-body li { margin-bottom: 6px; }
.tip { margin-bottom: var(--sp-2); }
.tag { font-size: 12px; font-weight: 600; padding: 2px var(--sp-2); border-radius: 999px; }
.tag.done { background: var(--signal-soft); color: var(--signal); }
.tag.waiting { background: var(--warn-soft); color: var(--warn); }

.code { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); margin: 10px 0 14px; }
.code pre { margin: 0; padding: var(--sp-3) 14px; max-height: 220px; overflow: auto; font: 12.5px/1.5 var(--mono); white-space: pre; }
.code .copy { position: absolute; top: var(--sp-2); inset-inline-end: var(--sp-2); }
/* Prose meant to be copied (e.g. a WhatsApp message): wraps, uses the text font. */
.code.prose-copy pre { white-space: pre-wrap; font: var(--fs-2)/var(--lh-body) var(--sans); padding-inline-end: 84px; max-height: none; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--sp-4); font-size: 14px; margin: var(--sp-2) 0 14px; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.ghl-values { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px var(--sp-4) 2px; margin: var(--sp-2) 0 18px; }
.ghl-values h3 { margin: 0 0 var(--sp-1); }
.ghl-values .code pre { white-space: pre-wrap; overflow-wrap: anywhere; padding-inline-end: 72px; }

.settings { display: grid; gap: 36px; max-width: 760px; }
.settings section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 22px; }
.settings h2 { margin-bottom: var(--sp-1); }
.settings section > p { color: var(--ink-2); margin-bottom: 18px; font-size: 14px; }

.prose { max-width: 70ch; }
.prose h2 { margin: var(--sp-6) 0 10px; }
.prose p, .prose li { color: var(--ink); }
.prose p { margin-bottom: var(--sp-3); }
.prose ol, .prose ul { padding-inline-start: 22px; margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }

.stat-row { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: 28px; }
.stat-row div { font-size: 14px; color: var(--ink-2); }
.stat-row b { display: block; font-size: var(--fs-4); color: var(--ink); font-weight: 600; }
.flag { color: var(--fail); font-weight: 600; font-size: var(--fs-1); }
.reject-form { display: flex; gap: 6px; margin-top: var(--sp-2); }
.reject-form input { padding: 5px var(--sp-2); font-size: var(--fs-1); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-2) var(--sp-4); }
.settings section.danger { border-color: var(--fail); }
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.reset-link { margin-top: 14px; }
details.diy > summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
details.diy[open] > summary { margin-bottom: 14px; color: var(--ink); }

/* ---------- phase 3: health, period, progress, support, events ---------- */
.nowrap { white-space: nowrap; }

.health { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: 18px 20px; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface); margin-bottom: 28px; border-inline-start-width: 4px; }
.health-main { display: flex; gap: 14px; align-items: flex-start; }
.health h2 { font-size: var(--fs-3); }
.health p { margin-top: var(--sp-1); color: var(--ink-2); max-width: 70ch; }
.health .health-last { margin-top: 6px; }
.health-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--ink-3); }
.health-healthy { border-inline-start-color: var(--signal); }
.health-healthy .health-dot { background: var(--signal); box-shadow: 0 0 0 4px var(--signal-soft); }
.health-attention { border-inline-start-color: var(--warn); }
.health-attention .health-dot { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.health-broken { border-inline-start-color: var(--fail); background: color-mix(in srgb, var(--fail-soft) 45%, var(--surface)); }
.health-broken .health-dot { background: var(--fail); box-shadow: 0 0 0 4px var(--fail-soft); }
.health-waiting { border-inline-start-color: var(--ink-3); }

.overview-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
.headline-link { text-decoration: none; }
.headline-link:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; background: var(--surface); flex: none; }
.segmented a { padding: 6px 12px; font-size: var(--fs-1); text-decoration: none; color: var(--ink-2); border-inline-start: 1px solid var(--line); }
.segmented a:first-child { border-inline-start: 0; }
.segmented a:hover { color: var(--ink); background: var(--line-soft); }
.segmented a[aria-current="true"] { background: var(--ink); color: var(--paper); font-weight: 600; }
.strip, .strip-labels { grid-template-columns: repeat(var(--bars, 7), minmax(0, 1fr)); }
.strip-labels { overflow: hidden; }
.strip-labels span { white-space: nowrap; }

.progress { display: flex; align-items: center; gap: var(--sp-3); margin: -8px 0 24px; max-width: 780px; font-size: var(--fs-1); color: var(--ink-2); }
.progress-track { flex: 1; height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.progress-fill { height: 100%; background: var(--signal); border-radius: 999px; }
.support-box { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; max-width: 780px; padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--line); border-radius: var(--radius-m); margin-bottom: 28px; }
.prose .support-box { margin-top: var(--sp-3); }

.search { display: flex; gap: 6px; }
.search input { width: 180px; }
.ev-detail td { background: var(--paper); }
.ev-detail .kv { margin: var(--sp-1) 0; }
.ev-toggle-cell { text-align: end; }
.live.paused i { background: var(--ink-3); animation: none; }

@media (max-width: 700px) {
  /* events table becomes stacked cards */
  .events-table thead { display: none; }
  .events-table, .events-table tbody, .events-table tr, .events-table td { display: block; width: 100%; }
  .events-table tr.ev-row { border-bottom: 1px solid var(--line); padding: var(--sp-2) 0; }
  .events-table td { border: 0; padding: 6px var(--sp-4); display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--sp-3); text-align: start; }
  .events-table td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--ink-2); }
  .events-table td.num { text-align: start; }
  .events-table td.ev-toggle-cell { display: block; text-align: start; }
  .events-table td.ev-toggle-cell::before, .events-table .ev-detail td::before, .events-table .empty::before { content: none; }
  .events-table .ev-detail td, .events-table .empty { display: block; }
  .events-table .err-text { min-width: 0; }
  .search { width: 100%; }
  .search input { width: auto; flex: 1; }
  .overview-head .segmented { order: -1; }
}

.tag:not(.done):not(.waiting) { background: var(--line-soft); color: var(--ink-2); }
.dns-table { margin: 10px 0 4px; }
.dns-table td { white-space: nowrap; }

/* admin: tabs and attention reasons */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); margin: -8px 0 28px; overflow-x: auto; }
.tabs a { padding: 10px 14px; text-decoration: none; color: var(--ink-2); font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--signal); }
.tabs a.tab-danger[aria-current="page"] { border-bottom-color: var(--fail); }
.reasons { display: flex; gap: 6px; flex-wrap: wrap; }
.reason { font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); }

/* ---------- landing page ---------- */
body.lp { --hero-bg: #1b2a35; --hero-ink: #edf1ee; --hero-ink-2: rgba(237, 241, 238, 0.74); --hero-line: rgba(237, 241, 238, 0.16); --bright: #3fbfa5; --hot: #f07a6c; --code-bg: #0f181d; }
@media (prefers-color-scheme: dark) { body.lp { --hero-bg: #0b1216; --code-bg: #0b1216; } }
.lp-wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--sp-5); }
.lp-narrow { max-width: 820px; }

.lp-header { position: sticky; top: 0; z-index: 10; background: var(--hero-bg); color: var(--hero-ink); border-bottom: 1px solid var(--hero-line); }
.lp-header-row { display: flex; align-items: center; gap: var(--sp-5); min-height: 64px; }
.lp-brand { padding: 0; color: var(--hero-ink); }
.lp-nav { display: flex; gap: var(--sp-5); margin-inline-start: var(--sp-4); }
.lp-nav a, .lp-signin { color: var(--hero-ink-2); text-decoration: none; font-size: 14px; }
.lp-nav a:hover, .lp-signin:hover { color: var(--hero-ink); }
.lp-header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-4); }
.lp-header .lang-switch a, .lp-final .lang-switch a { color: var(--hero-ink-2); }
.lp-header .lang-switch a[aria-current="true"] { color: var(--hero-ink); border-bottom-color: var(--bright); }

.lp .btn { min-height: 46px; padding: 11px 20px; font-size: 15px; }
.lp .btn.small { min-height: 36px; padding: 7px 14px; font-size: 14px; }
.lp-btn-signal { background: var(--bright); color: #0b1216; }
.lp-btn-signal:hover { background: #5fd3bb; color: #0b1216; }
.lp-btn-ghost { background: transparent; color: var(--hero-ink); border-color: var(--hero-line); }
.lp-btn-ghost:hover { border-color: var(--hero-ink-2); color: var(--hero-ink); }
.lp-btn-light { background: var(--hero-ink); color: #1b2a35; }
.lp-btn-light:hover { background: #fff; color: #1b2a35; }

.lp-hero { background: var(--hero-bg); color: var(--hero-ink); padding: 72px 0 96px; }
.lp-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.lp-h1 { font-size: clamp(36px, 5.2vw, var(--fs-7)); line-height: 1.04; font-weight: 600; letter-spacing: -0.03em; margin: 0; max-width: 15ch; }
.lp-lede { font-size: 18px; line-height: 1.6; color: var(--hero-ink-2); margin-top: var(--sp-5); max-width: 56ch; }
.lp-cta-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }
.lp-note { font-size: 14px; color: var(--hero-ink-2); margin-top: var(--sp-4); }
:root:lang(ar) .lp-h1 { letter-spacing: 0; line-height: 1.35; }

.lp-diagram { margin: 0; }
.lp-diagram svg { width: 100%; height: auto; display: block; }
.lp-diagram text { font: 500 13px var(--sans); fill: var(--hero-ink-2); }
.lp-diagram .lp-cap { font-weight: 600; fill: var(--hero-ink); font-size: 13.5px; }
.lp-diagram .lp-muted, .lp-diagram .lp-block-label { fill: var(--hot); font-size: 12.5px; }
.lp-diagram .lp-good { fill: var(--bright); font-size: 12.5px; }
.lp-diagram .lp-on { fill: var(--hero-ink); font-weight: 600; }
.lp-diagram .lp-hub-label { fill: var(--bright); font-weight: 600; }
.lp-node { fill: rgba(237, 241, 238, 0.05); stroke: var(--hero-line); }
.lp-node-on { stroke: var(--bright); }
.lp-lane { stroke: var(--hero-line); stroke-width: 2; fill: none; }
.lp-dead { stroke-dasharray: 3 7; }
.lp-block { stroke: var(--hot); stroke-width: 3; stroke-linecap: round; }
.lp-hub { fill: var(--bright); }
.lp-pulse { stroke: var(--bright); stroke-width: 2.5; fill: none; stroke-dasharray: 7 22; animation: lp-travel 2.2s linear infinite; }
.lp-pulse-short { stroke: var(--bright); }
.lp-pulse-late { animation-delay: -1.1s; }
@keyframes lp-travel { to { stroke-dashoffset: -58; } }
@media (prefers-reduced-motion: reduce) { .lp-pulse { animation: none; } }

.lp-section { padding: 88px 0; scroll-margin-top: 64px; }
.lp-alt { background: var(--surface); border-block: 1px solid var(--line); }
.lp-h2 { font-size: clamp(28px, 3.4vw, var(--fs-6)); line-height: 1.15; font-weight: 600; letter-spacing: var(--tracking-tight); max-width: 24ch; margin: 0; }
.lp-intro { font-size: 17px; color: var(--ink-2); margin-top: var(--sp-3); max-width: 60ch; }
.lp-section h3 { font-size: 17px; line-height: 1.35; }
.lp-section p { color: var(--ink-2); }

.lp-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 40px; }
.lp-col { border-top: 2px solid var(--ink); padding-top: var(--sp-4); }
.lp-col p { margin-top: var(--sp-2); }
.lp-callout { margin-top: var(--sp-7); max-width: 72ch; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-inline-start: 3px solid var(--signal); border-radius: var(--radius-m); }
.lp-callout p { margin-top: var(--sp-2); }

.lp-fixes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: 36px; }
.lp-fix { display: flex; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--paper); }
.lp-fix p { margin-top: 6px; }
.lp-x { color: var(--fail); font-weight: 700; line-height: 1.5; }
.lp-fix-risky { border-color: var(--fail); background: var(--fail-soft); }
.lp-fix-risky p { color: var(--ink); }
.lp-risk { display: inline-block; font-size: 12px; font-weight: 600; color: var(--fail); border: 1px solid var(--fail); border-radius: 999px; padding: 0 var(--sp-2); margin-inline-start: 6px; vertical-align: 2px; }

.lp-steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: lp-step; }
.lp-steps li { counter-increment: lp-step; border-top: 2px solid var(--signal); padding-top: var(--sp-4); }
.lp-steps li::before { content: counter(lp-step); display: block; font-size: 28px; font-weight: 600; color: var(--signal); line-height: 1; margin-bottom: var(--sp-3); }
.lp-steps p { margin-top: var(--sp-2); }
.lp-where { display: inline-block; margin-top: 14px; font-size: var(--fs-1); color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }

.lp-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: var(--sp-6); }
.lp-code { background: var(--code-bg); border-radius: 10px; overflow: hidden; min-width: 0; }
.lp-code-head { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid rgba(237, 241, 238, 0.1); color: var(--hero-ink, #edf1ee); font-size: 14px; }
.lp-code-head span { color: rgba(237, 241, 238, 0.62); font-size: var(--fs-1); }
.lp-code-bad .lp-code-head span { color: #f6b3aa; }
.lp-code-good .lp-code-head span { color: #9fe3d4; }
.lp-code pre { margin: 0; padding: var(--sp-4) 0; font: 13px/1.75 var(--mono); color: #c9d6d0; overflow-x: auto; }
.lp-line { display: block; padding: 0 var(--sp-4); white-space: pre; }
.lp-line-bad { background: rgba(240, 122, 108, 0.14); color: #f6b3aa; box-shadow: inset 3px 0 0 #f07a6c; }
.lp-line-good { background: rgba(63, 191, 165, 0.12); color: #9fe3d4; box-shadow: inset 3px 0 0 #3fbfa5; }
.lp-foot { font-size: 14px; color: var(--ink-2); margin-top: 14px; }

.lp-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.lp-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.lp-checks li { position: relative; padding-inline-start: 30px; }
.lp-checks li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 0; color: var(--signal); font-weight: 700; }
.lp-checks strong { display: block; }
.lp-checks span { display: block; color: var(--ink-2); }
.lp-checks-tight { gap: 10px; }
.lp-checks-tight span { color: var(--ink); }

.lp-pricing { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; margin-top: var(--sp-6); align-items: start; }
.lp-price-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px; display: grid; gap: 20px; }
.lp-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lp-price b { color: var(--ink); font-size: 48px; font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 1; }
.lp-price span { color: var(--ink-2); }
.lp-fit { display: grid; gap: 28px; }
.lp-fit h3 { margin-bottom: var(--sp-3); }
.lp-nos { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lp-nos li { position: relative; padding-inline-start: 30px; }
.lp-nos li::before { content: "✕"; position: absolute; inset-inline-start: 0; top: 0; color: var(--fail); font-weight: 700; }

.lp-faq { margin-top: 28px; border-top: 1px solid var(--line); }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--sp-4); padding: 18px 0; font-weight: 600; font-size: 17px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--ink-2); font-weight: 400; font-size: 22px; line-height: 1; }
.lp-faq details[open] summary::after { content: "–"; }
.lp-faq details p { padding-bottom: 20px; max-width: 70ch; color: var(--ink-2); }

.lp-final { background: var(--hero-bg); color: var(--hero-ink); padding: 88px 0; }
.lp-final .lp-lede { margin-bottom: var(--sp-6); }
.lp-footer { padding: var(--sp-6) 0 var(--sp-7); font-size: 14px; color: var(--ink-2); }
.lp-footer-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.lp-footer-row .lang-switch { margin-inline-start: auto; }
.lp-disclaimer { font-size: 12.5px; color: var(--ink-3); margin-top: var(--sp-3); }

@media (max-width: 900px) {
  .lp-nav { display: none; }
  .lp-signin { display: none; }
  .lp-header-actions { gap: var(--sp-3); }
  .lp-hero { padding: 40px 0 56px; }
  .lp-hero-grid, .lp-split, .lp-pricing, .lp-compare { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .lp-cols3, .lp-fixes { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-section, .lp-final { padding: 56px 0; }
  .lp-wrap { padding-inline: var(--sp-4); }
}
@media (max-width: 560px) {
  .lp-steps { grid-template-columns: minmax(0, 1fr); }
  .lp-header .lang-switch { display: none; }
  .lp-lede { font-size: 16.5px; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; height: auto; border-inline-end: 0; border-bottom: 1px solid var(--line); padding: var(--sp-4); gap: var(--sp-3); }
  .nav { flex-direction: row; overflow-x: auto; }
  .nav a { white-space: nowrap; }
  .nav a[aria-current="page"], [dir="rtl"] .nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--signal); }
  .side-foot { margin-top: 0; }
  .main { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .auth { grid-template-columns: 1fr; }
  .auth-side { border-inline-end: 0; border-bottom: 1px solid var(--line); padding: 28px var(--sp-4); }
  .auth-side .lede { font-size: var(--fs-4); }
  .auth-side .flow { display: none; }
  .auth-form { padding: 28px var(--sp-4); }
  .row { grid-template-columns: 1fr; }
  .headline { font-size: var(--fs-4); }
  .meter { grid-template-columns: 1fr 52px; }
  .meter-name { grid-column: 1 / -1; }
  .step { padding-inline-start: 44px; }
  .strip { gap: 5px; }
}