/* ==========================================================================
   Appservices — the account web app (auth and dashboard documents)
   1 tokens · 2 base · 3 components · 4 auth layout · 5 dashboard layout · 6 pages · 7 RTL · 8 responsive · 9 motion
   Logical properties only: Arabic and Urdu (dir=rtl) mirror themselves. No inline style anywhere (the CSP).
   ========================================================================== */

/* 0 ─ Fonts: the landing's self-hosted files (web/static/site/assets/fonts, SIL OFL), each named after its
   content and so cached for good under /assets/fonts/ ───────────────────────────────────────────── */
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-400-6010e7fd.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-500-90aef64f.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-600-16734a5a.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-arabic-arabic-700-04c730b4.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "Inter"; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/inter-latin-ext-400-700-34b9c504.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/inter-latin-400-700-3100e775.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 500 600; font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-500-600-83c005d4.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600 800; font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext-600-800-38e3b8fd.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600 800; font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-600-800-153fc85b.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* 1 ─ Tokens: the app's names on tokens.css (linked first; D-244), values unchanged; light, dark (the night
   primitives), and the system's choice ─────────────────────────────────────────────────────────────────────── */
:root {
  --brand: var(--as-brand-600); --brand-600: var(--as-brand-700); --brand-700: var(--as-brand-800);
  --brand-100: var(--as-brand-100); --brand-50: var(--as-brand-50);
  --ink: var(--as-neutral-950); --ink-2: var(--as-neutral-800); --muted: var(--as-neutral-600);
  --line: var(--as-neutral-150); --line-2: var(--as-neutral-200);
  --bg: var(--as-neutral-50); --surface: var(--as-neutral-0); --surface-2: var(--as-neutral-75);
  --ok: var(--as-ok-600); --ok-bg: var(--as-ok-50); --warn: var(--as-warn-700); --warn-bg: var(--as-warn-50);
  --danger: var(--as-danger-600); --danger-bg: var(--as-danger-50);
  --info-bg: var(--as-info-50);
  --font: var(--as-font-body);
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;   /* its own */
  --font-ar: var(--as-font-arabic);
  --font-mono: var(--as-font-mono);
  --r-s: var(--as-radius-10); --r: var(--as-radius-14); --r-l: var(--as-radius-20);
  --sh-s: var(--as-shadow-card-s);
  --sh: var(--as-shadow-card-m);
  --sp-1: var(--as-space-1); --sp-2: var(--as-space-2); --sp-3: var(--as-space-3); --sp-4: var(--as-space-4);
  --sp-5: var(--as-space-5); --sp-6: var(--as-space-6);
  --z-header: var(--as-z-header); --z-dialog: var(--as-z-dialog); --z-toast: var(--as-z-toast);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ink: var(--as-night-100); --ink-2: var(--as-night-200); --muted: var(--as-night-300);
  --line: var(--as-night-700); --line-2: var(--as-night-600);
  --bg: var(--as-night-950); --surface: var(--as-night-900); --surface-2: var(--as-night-800);
  --brand: var(--as-night-brand); --brand-600: var(--as-brand-400); --brand-700: var(--as-brand-500);
  --brand-100: var(--as-night-750); --brand-50: var(--as-night-850);
  --ok: var(--as-ok-300); --ok-bg: var(--as-ok-950); --warn: var(--as-warn-300); --warn-bg: var(--as-warn-950);
  --danger: var(--as-danger-300); --danger-bg: var(--as-danger-950);
  --info-bg: var(--as-night-850);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: var(--as-night-100); --ink-2: var(--as-night-200); --muted: var(--as-night-300);
    --line: var(--as-night-700); --line-2: var(--as-night-600);
    --bg: var(--as-night-950); --surface: var(--as-night-900); --surface-2: var(--as-night-800);
    --brand: var(--as-night-brand); --brand-600: var(--as-brand-400); --brand-700: var(--as-brand-500);
    --brand-100: var(--as-night-750); --brand-50: var(--as-night-850);
    --ok: var(--as-ok-300); --ok-bg: var(--as-ok-950); --warn: var(--as-warn-300); --warn-bg: var(--as-warn-950);
    --danger: var(--as-danger-300); --danger-bg: var(--as-danger-950);
    --info-bg: var(--as-night-850);
    color-scheme: dark;
  }
}

/* 2 ─ Base ─────────────────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font); }
:lang(ar) body, :lang(ur) body, body:lang(ar), body:lang(ur) { font-family: var(--font-ar); }
:lang(ur) body, body:lang(ur) { line-height: 1.8; }
a { color: var(--brand); }
a:hover { color: var(--brand-700); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--sp-2); font-family: var(--font-display); }
:lang(ar) :is(h1, h2, h3), :lang(ur) :is(h1, h2, h3) { font-family: var(--font-ar); }
h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 15px; }
p { margin: 0 0 var(--sp-3); }
code, .mono { font-family: var(--font-mono); font-size: .92em; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: var(--sp-3); inset-block-start: -60px; z-index: 100;
             background: var(--surface); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s); }
.skip-link:focus { inset-block-start: var(--sp-3); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.boot { color: var(--muted); padding: var(--sp-6); text-align: center; }
[hidden] { display: none !important; }

/* 3 ─ Components ───────────────────────────────────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 40px;
       padding: 0 var(--sp-4); border-radius: var(--r-s); border: 1px solid transparent; font: inherit;
       font-weight: 600; cursor: pointer; background: var(--brand); color: #fff; text-decoration: none; }
.btn:hover { background: var(--brand-700); color: #fff; }
.btn.secondary { background: var(--surface); color: var(--brand); border-color: var(--line-2); }
.btn.secondary:hover { background: var(--brand-50); color: var(--brand-700); }
.btn.ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.danger { background: var(--danger); }
.btn.danger.secondary { background: var(--surface); color: var(--danger); border-color: var(--line-2); }
.btn.small { min-height: 32px; padding: 0 var(--sp-3); font-size: 13px; }
.btn.block { width: 100%; }
.btn { white-space: nowrap; }
.btn:disabled, .btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.row.end { justify-content: flex-end; }
.stack > * + * { margin-block-start: var(--sp-3); }

.field { margin-block-end: var(--sp-4); }
.field label, .field .label { display: block; font-weight: 600; font-size: 14px; margin-block-end: var(--sp-1); }
.field .hint { color: var(--muted); font-size: 13px; margin: var(--sp-1) 0 0; }
.field .err { color: var(--danger); font-size: 13px; margin: var(--sp-1) 0 0; }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], select {
  width: 100%; min-height: 42px; padding: 0 var(--sp-3); border: 1px solid var(--line-2); border-radius: var(--r-s);
  background: var(--surface); color: var(--ink); font: inherit; }
input:focus, select:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
input[aria-invalid="true"] { border-color: var(--danger); }
.check { display: flex; gap: var(--sp-2); align-items: flex-start; margin-block-end: var(--sp-3); }
.check input { margin-block-start: 4px; }
.pw-row { display: flex; gap: var(--sp-2); }
.pw-row input { flex: 1; }
.code-input { font-family: var(--font-mono); letter-spacing: .3em; text-align: center; font-size: 20px;
              max-width: 240px; }
.form-narrow { max-width: 480px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-5);
        box-shadow: var(--sh-s); }
.card + .card, .grid + .card, .card + .grid, .alert + .grid, .card + .alert { margin-block-start: var(--sp-4); }
.grid > .card { margin-block-start: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
             margin-block-end: var(--sp-3); flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv + p, .kv + .row, .kv + a { margin-block-start: var(--sp-3); }
.kv + a { display: inline-block; }

.badge { display: inline-block; padding: 2px var(--sp-2); border-radius: 999px; font-size: 12px; font-weight: 700;
         background: var(--surface-2); color: var(--muted); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.danger { background: var(--danger-bg); color: var(--danger); }
.badge.info { background: var(--info-bg); color: var(--brand); }

.alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-s); margin-block-end: var(--sp-4);
         background: var(--info-bg); color: var(--ink-2); }
.alert.error { background: var(--danger-bg); color: var(--danger); }
.alert.warn { background: var(--warn-bg); color: var(--warn); }
.alert.ok { background: var(--ok-bg); color: var(--ok); }

.meter { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--brand); width: 0; }
.meter > span.w0 { width: 0; } .meter > span.w10 { width: 10%; } .meter > span.w20 { width: 20%; }
.meter > span.w30 { width: 30%; } .meter > span.w40 { width: 40%; } .meter > span.w50 { width: 50%; }
.meter > span.w60 { width: 60%; } .meter > span.w70 { width: 70%; } .meter > span.w80 { width: 80%; }
.meter > span.w90 { width: 90%; } .meter > span.w100 { width: 100%; background: var(--warn); }

.secret { display: flex; gap: var(--sp-2); align-items: stretch; }
.secret code { flex: 1; padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--brand); border-radius: var(--r-s);
               background: var(--brand-50); word-break: break-all; user-select: all; direction: ltr;
               unicode-bidi: isolate; text-align: start; }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); padding: 0;
         list-style: none; font-family: var(--font-mono); direction: ltr; }
.codes li { padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-s); text-align: center; }
.qr-box { display: block; width: max-content; padding: var(--sp-2); background: #fff; border-radius: var(--r-s);
          border: 1px solid var(--line); margin-block-end: var(--sp-3); }
svg.qr { display: block; width: 200px; height: 200px; }
pre { margin: 0 0 var(--sp-3); padding: var(--sp-3); background: var(--surface-2); border-radius: var(--r-s);
      overflow-x: auto; white-space: pre; }

table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { text-align: start; padding: var(--sp-2) var(--sp-3); border-block-end: 1px solid var(--line);
                               vertical-align: top; }
table.data th { color: var(--muted); font-size: 13px; font-weight: 600; }
.table-wrap { overflow-x: auto; }

dialog.modal { border: 1px solid var(--line); border-radius: var(--r-l); padding: 0; width: min(480px, 92vw);
               background: var(--surface); color: var(--ink); box-shadow: var(--sh); }
dialog.modal::backdrop { background: rgba(5, 11, 30, .55); }
.modal-body { padding: var(--sp-5); }
.modal-foot { display: flex; gap: var(--sp-2); justify-content: flex-end; padding: var(--sp-3) var(--sp-5);
              border-block-start: 1px solid var(--line); }
.toasts { position: fixed; inset-block-end: var(--sp-4); inset-inline-end: var(--sp-4); z-index: var(--z-toast);
          display: grid; gap: var(--sp-2); }
.toast { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-s); background: var(--ink); color: var(--surface);
         box-shadow: var(--sh); max-width: 360px; }
.toast.error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }
.toast.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok); }

/* 4 ─ Auth document ─────────────────────────────────────────────────────────────────────────────────────────── */
body.auth { display: grid; place-items: center; padding: var(--sp-5) var(--sp-4); }
.auth-main { width: 100%; max-width: 440px; }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
             padding: var(--sp-6) var(--sp-5); box-shadow: var(--sh); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 800; color: var(--brand);
         letter-spacing: .01em; text-decoration: none; font-size: 17px; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--brand); color: #fff;
              display: inline-grid; place-items: center; font-weight: 800; }
.auth-top { display: flex; justify-content: space-between; align-items: center; margin-block-end: var(--sp-5); }
.auth-foot { margin-block-start: var(--sp-4); text-align: center; color: var(--muted); font-size: 14px; }
.auth-forgot { margin-block: calc(-1 * var(--sp-2)) var(--sp-4); text-align: end; font-size: 14px; }
.turnstile { margin-block-end: var(--sp-4); min-height: 65px; }
.lang-select { width: auto; min-height: 32px; font-size: 13px; }

/* 5 ─ Dashboard document ────────────────────────────────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
          min-height: 56px; padding: var(--sp-2) var(--sp-5); background: var(--surface);
          border-block-end: 1px solid var(--line); position: sticky; inset-block-start: 0; z-index: var(--z-header); }
.topbar .row { flex-wrap: nowrap; }
.sidebar { padding: var(--sp-4) var(--sp-3); border-inline-end: 1px solid var(--line); background: var(--surface); }
.nav { display: grid; gap: var(--sp-1); }
.nav a { display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s); color: var(--ink-2);
         text-decoration: none; font-weight: 600; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--brand-50); color: var(--brand); }
.main { padding: var(--sp-5); max-width: 1100px; width: 100%; min-width: 0; } /* a grid item: no wider than its track */
.page-head { margin-block-end: var(--sp-4); }
.page-head p { color: var(--muted); }
.menu-btn { display: none; }
.user-menu { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: nowrap; min-width: 0; }

/* 6 ─ Pages ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.steps { counter-reset: step; padding: 0; list-style: none; }
.steps li { counter-increment: step; position: relative; padding-inline-start: 40px; margin-block-end: var(--sp-3); }
.steps li::before { content: counter(step); position: absolute; inset-inline-start: 0; inset-block-start: 0;
                    width: 28px; height: 28px; border-radius: 50%; background: var(--brand-50); color: var(--brand);
                    display: grid; place-items: center; font-weight: 700; }
.product { display: flex; flex-direction: column; gap: var(--sp-2); }
.event-fail { color: var(--danger); }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding-block: var(--sp-3); border-block-end: 1px solid var(--line); }
.list > li:last-child { border-block-end: 0; }
.item { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.item-main { min-width: 0; flex: 1 1 260px; }
.item-main > div + div { margin-block-start: 2px; }
.steps li > p { margin-block-end: var(--sp-2); }
.card.checkup { border-color: var(--brand); }               /* the security check-up: first on the overview */
.checklist .check { margin: 0; }
.checklist + .btn { margin-block-start: var(--sp-3); }
/* P6 PR-7: the Terms box (registration, setup, Buy) and the overview's notice (pages/terms.js) */
.terms-box .check { margin: 0; }
.terms-box .check label { font-weight: 400; margin: 0; }
.card.terms-notice { border-color: var(--brand); }
/* P3: notification preferences (notifPrefs.js) — a table; on phones each row a card (section 8) */
table.prefs th[scope="row"] { color: var(--ink); font-size: 15px; font-weight: 600; }
table.prefs td { min-width: 180px; }
.pref-select { min-width: 160px; }
.pref-now { margin: var(--sp-1) 0 0; }
/* P3: the Telegram page (telegram.js) — the pairing card: the button, the bot's name, the state; the QR beside */
.pairing { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-start; }
.pairing-main { flex: 1 1 280px; min-width: 0; }
.pairing-main > .btn { margin-block-end: var(--sp-3); }
/* P4 PR-9b: the Plans page, a purchase request, the "I have paid" dialog */
.plan { display: flex; flex-direction: column; gap: var(--sp-2); }
.plan .card-head { flex-wrap: wrap; }
.plan .btn.block { margin-block-start: auto; }
.plan-current { border-color: var(--brand); }
.plan-price { margin: 0; font-size: 22px; font-weight: 800; }
.plan-features { margin: 0; padding-inline-start: var(--sp-5); }
.card.purchase { border-color: var(--brand); }
.card.purchase .kv + .row { margin-block-start: var(--sp-3); }
textarea { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-2); border-radius: var(--r-s);
  background: var(--surface); color: var(--ink); font: inherit; resize: vertical; }
textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.staged { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); width: 96px; }
.stage img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--r-s); background: var(--surface-2); }
.stage-failed .small { color: var(--danger); }
.official-bot { overflow-wrap: anywhere; }
.countdown { margin-block-start: var(--sp-2); }
.link-state .alert { margin-block-end: var(--sp-2); }
/* P5 PR-8b: the announcements bell, the Announcements page, the overview's latest news and promotion card */
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px;
        height: 36px; border-radius: 999px; color: var(--ink-2); }
.bell:hover { background: var(--surface-2); color: var(--ink); }
.bell-icon { width: 20px; height: 20px; fill: currentColor; }
.bell-count { position: absolute; inset-block-start: 0; inset-inline-end: -4px; min-width: 18px; height: 18px;
              padding: 0 4px; border-radius: 999px; background: var(--danger); color: var(--surface); font-size: 11px;
              font-weight: 700; line-height: 18px; text-align: center; }
.filters { margin-block-end: var(--sp-4); }
.filters .btn[aria-pressed="true"] { background: var(--brand-50); color: var(--brand); border-color: var(--brand); }
.ann-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-block-end: var(--sp-1); }
.ann-title { font-size: 16px; margin: 0 0 var(--sp-1); }
.ann.unread .ann-title { color: var(--brand); }
.ann-summary { margin-block-end: var(--sp-2); }
.ann-body { margin-block: var(--sp-2); overflow-wrap: anywhere; }
.ann-text h3, .ann-text h4 { margin-block: var(--sp-3) var(--sp-2); }
.ann-text ul, .ann-text ol, .ann-links { margin: 0 0 var(--sp-3); padding-inline-start: var(--sp-5); }
.ann-media, .promo-image { display: block; max-width: 100%; height: auto; border-radius: var(--r-s);
                           background: var(--surface-2); }
.ann-gallery { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
               margin-block-end: var(--sp-3); }
.video-link { position: relative; display: inline-block; max-width: 100%; margin-block-end: var(--sp-2); }
.video-link.bare .play-badge { position: static; }
.play-badge { position: absolute; inset-inline-start: var(--sp-2); inset-block-end: var(--sp-2);
              padding: 2px var(--sp-2); border-radius: 999px; background: var(--ink); color: var(--surface);
              font-size: 13px; font-weight: 700; }
.grid + .grid { margin-block-start: var(--sp-4); }
.card.promo { border-color: var(--brand); display: flex; flex-direction: column; gap: var(--sp-2); }
.card.promo > p { margin: 0; }
.card.promo > .btn { align-self: flex-start; }
.promo-price del { color: var(--muted); }
.promo-price strong { font-size: 18px; }
/* an item's own texts carry its lang (not the card around them): its script's font, whatever the page's language */
:is(.ann, .latest, .promo) [lang]:is(:lang(ar), :lang(ur)) { font-family: var(--font-ar); }
:is(.ann, .latest, .promo) [lang]:lang(ur) { line-height: 1.8; }

/* 7 ─ RTL: logical properties do the rest; keys, codes and addresses stay left-to-right ─────────────────────── */
[dir="rtl"] .codes, [dir="rtl"] .secret code { direction: ltr; }

/* 8 ─ Responsive ────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .topbar { padding: var(--sp-2) var(--sp-3); }
  .user-menu .who { display: none; }
  .sidebar { display: none; position: fixed; inset-block: 56px 0; inset-inline-start: 0; width: 260px;
             z-index: var(--z-header); box-shadow: var(--sh); overflow-y: auto; }
  .sidebar.open { display: block; }
  .menu-btn { display: inline-flex; }
  .main { padding: var(--sp-4); }
  .card { padding: var(--sp-4); }
  .kv { grid-template-columns: 1fr; }
  .kv dt { margin-block-start: var(--sp-2); }
}

@media (max-width: 600px) {
  .qr-for-phone { display: none; }               /* "scan this on a phone" — on the phone itself */
}
@media (max-width: 560px) {                       /* the preferences: one card per category, its selects stacked */
  table.prefs, table.prefs tbody, table.prefs tr, table.prefs th, table.prefs td { display: block; width: 100%; }
  table.prefs thead { display: none; }
  table.prefs tr { border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--sp-2) var(--sp-3);
                   margin-block-end: var(--sp-3); }
  table.prefs th[scope="row"], table.prefs td { border: 0; padding-inline: 0; min-width: 0; }
  table.prefs td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 13px;
                           font-weight: 600; margin-block-end: var(--sp-1); }
  .pref-select { min-width: 0; }
}
@media (max-width: 480px) {
  .brand-text { display: none; }
  .auth-top .brand-text { display: inline; }
}

/* 9 ─ Motion ────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }