/* XO design system. Tokens and rules: docs/STYLE_GUIDE.md (kept in sync with
   docs/mockups/ui-kit.html). One file to keep requests low on slow networks.
   Logical properties throughout: inline-start is the right side in RTL.
   Strict CSP: no inline styles anywhere, so every state is a class or a
   data-* attribute, and meter geometry lives in SVG attributes. */

@font-face {
  font-family: "IRANSansX";
  src: url("../fonts/IRANSansXVF.af5e22a7e56b.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;
  --ground: #EDF0F2;
  --surface: #FFFFFF;
  --surface-2: #F5F7F9;
  --ink: #15212B;
  --muted: #56636E;
  --line: #DCE2E7;
  --field: #C5CED6;
  --primary: #2346A0;
  --primary-hover: #1B3984;
  --primary-soft: #E4EAF7;
  --on-primary: #FFFFFF;
  --saffron: #B57A0C;
  --saffron-soft: #FBF1DC;
  --saffron-ink: #7A5205;
  --ok: #1F8A4C;
  --ok-soft: #E1F3E8;
  --ok-ink: #17693A;
  --warn: #D2690F;
  --warn-soft: #FCEBDC;
  --warn-ink: #8A4508;
  --bad: #C62F35;
  --bad-soft: #FBE4E5;
  --bad-ink: #A3242A;
  --track: #DCE1E6;
  --sidebar: #15212B;
  --sidebar-ink: #B9C4CE;
  --focus: #8FA7E6;
  --shadow: 0 1px 2px rgba(21, 33, 43, .06), 0 8px 24px rgba(21, 33, 43, .08);
  --overlay: rgba(12, 18, 26, .48);

  --r-sec: 24px;
  --r-card: 20px;
  --r-ctl: 12px;
  --r-sm: 10px;
  --r-pill: 999px;

  --page-pad: clamp(16px, 3vw, 40px);
  --side-w: 248px;
  --side-w-col: 68px;
  --gap-edge: 12px;
  --appbar-h: 60px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0F1620;
    --surface: #17212C;
    --surface-2: #1C2834;
    --ink: #E6ECF1;
    --muted: #93A1AD;
    --line: #263443;
    --field: #3A4A5A;
    --primary: #8AA4F0;
    --primary-hover: #A3B8F4;
    --primary-soft: #1E2B4D;
    --on-primary: #0F1620;
    --saffron: #E7B04A;
    --saffron-soft: #3A2D10;
    --saffron-ink: #F2CD82;
    --ok: #3DBE74;
    --ok-soft: #123322;
    --ok-ink: #7FDCA5;
    --warn: #F0954A;
    --warn-soft: #3A2410;
    --warn-ink: #F7BE8E;
    --bad: #F06A6E;
    --bad-soft: #3A1517;
    --bad-ink: #F7A2A5;
    --track: #2A3846;
    --sidebar: #0B1118;
    --sidebar-ink: #93A1AD;
    --focus: #5E79C9;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --overlay: rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0F1620;
  --surface: #17212C;
  --surface-2: #1C2834;
  --ink: #E6ECF1;
  --muted: #93A1AD;
  --line: #263443;
  --field: #3A4A5A;
  --primary: #8AA4F0;
  --primary-hover: #A3B8F4;
  --primary-soft: #1E2B4D;
  --on-primary: #0F1620;
  --saffron: #E7B04A;
  --saffron-soft: #3A2D10;
  --saffron-ink: #F2CD82;
  --ok: #3DBE74;
  --ok-soft: #123322;
  --ok-ink: #7FDCA5;
  --warn: #F0954A;
  --warn-soft: #3A2410;
  --warn-ink: #F7BE8E;
  --bad: #F06A6E;
  --bad-soft: #3A1517;
  --bad-ink: #F7A2A5;
  --track: #2A3846;
  --sidebar: #0B1118;
  --sidebar-ink: #93A1AD;
  --focus: #5E79C9;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --overlay: rgba(0, 0, 0, .6);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* the visible height: Firefox's and Chrome's toolbars are not counted (owner, 2026-11-11) */
  font-family: "IRANSansX", Tahoma, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
/* A text link in the kit's style (.btn.link): never the browser's underlined default.
   Every <a> carries a class (apps/core/tests/test_ui_compliance.py). */
.link { color: var(--primary); font-weight: 600; text-decoration: none; border-radius: 6px; }
.link:hover { color: var(--primary-hover); text-decoration: underline; }
.img-link { display: inline-block; border-radius: var(--r-sm); text-decoration: none; }

/* Everything that is not a text control: a visible outline. Text controls
   use the soft colored shadow instead (see Fields). */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.icon { flex: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ltr { direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--muted); }
.caption { font-size: 12px; font-weight: 500; color: var(--muted); }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ---------- Overlay scrollbars (static/js/scrollbars.js toggles .sb-on) ---------- */

html, .scroll, .sel__list, .table-wrap, .dialog, .side__nav {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .3s;
}
html.sb-on, .sb-on { scrollbar-color: color-mix(in srgb, var(--muted) 55%, transparent) transparent; }
.scroll:hover, .sel__list:hover, .table-wrap:hover, .dialog:hover, .side__nav:hover {
  scrollbar-color: color-mix(in srgb, var(--muted) 40%, transparent) transparent;
}
@supports not (scrollbar-color: red blue) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
  .sb-on::-webkit-scrollbar-thumb, html.sb-on::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--muted) 55%, transparent); }
}

/* ---------- Type ---------- */

.page-title { font-size: 28px; font-weight: 800; line-height: 1.5; }
.section-title { font-size: 18px; font-weight: 800; line-height: 1.6; }
.remaining { font-size: 44px; font-weight: 850; letter-spacing: -1px; line-height: 1.1; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn--compact { height: 40px; padding: 0 14px; }
.btn--block { width: 100%; }
.btn--icon { width: 44px; padding: 0; }
.btn--icon.btn--compact { width: 40px; }

.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn--soft { background: var(--primary-soft); color: var(--primary); }
.btn--soft:hover { color: var(--primary-hover); }
.btn--ghost { border-color: var(--field); color: var(--ink); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn--success { background: var(--ok); color: #FFFFFF; }
.btn--danger { background: var(--bad-soft); color: var(--bad-ink); }
.btn--danger-solid { background: var(--bad); color: #FFFFFF; }
.btn--danger-outline { border-color: var(--bad); color: var(--bad-ink); background: transparent; }
.btn--danger-outline:hover { background: var(--bad-soft); color: var(--bad-ink); }
.btn--wrap { height: auto; min-height: 44px; padding-block: 8px; white-space: normal; line-height: 1.5; text-align: center; }
.btn--saffron { background: var(--saffron-soft); color: var(--saffron-ink); }
.btn--link { height: auto; padding: 0; color: var(--primary); }
.btn--link:hover { color: var(--primary-hover); text-decoration: underline; }

/* ---------- Fields ---------- */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field__label .opt { color: var(--muted); font-weight: 500; }
.field__hint { font-size: 12px; font-weight: 500; color: var(--muted); }
.field__error { font-size: 12px; font-weight: 600; color: var(--bad); }

/* .ctl is the visible box; the input inside it is borderless. --rc is the
   ring color: primary by default, bad on error, ok on success. */
.ctl {
  --rc: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--field);
  border-radius: var(--r-ctl);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.ctl:focus-within { border-color: var(--rc); box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 20%, transparent); }
.ctl input, .ctl select {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
}
.ctl input:focus-visible, .ctl select:focus-visible { outline: none; }
.ctl input::placeholder { color: var(--muted); opacity: .8; }
.ctl > .icon { color: var(--muted); }
.ctl__pre { color: var(--muted); font-size: 13px; padding-inline-end: 8px; border-inline-end: 1px solid var(--line); }
/* A fixed unit after the value («تومان», apps.core.forms.MoneyField). */
.ctl__suffix { flex: none; color: var(--muted); font-size: 13px; font-weight: 600; padding-inline-start: 8px; border-inline-start: 1px solid var(--line); }
/* A fixed prefix of a left-to-right value («IR» before the Sheba digits). */
.ctl--ltr { direction: ltr; }
.ctl--ltr .ctl__pre { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; color: var(--ink); }
.field--error .ctl, .ctl--error { --rc: var(--bad); border-color: var(--bad); }
.field--ok .ctl { --rc: var(--ok); border-color: var(--ok); }
.ctl--disabled { background: var(--surface-2); opacity: .7; }

/* Show / hide on every password field (static/js/password-toggle.js, owner 2026-11-09). */
.pw-toggle { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-inline-end: -6px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, background .15s; }
.pw-toggle:hover { color: var(--ink); background: var(--surface-2); }
.pw-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.pw-toggle .pw-toggle__slash { opacity: 0; transition: opacity .15s; }
.pw-toggle.is-shown { color: var(--primary); }
.pw-toggle.is-shown .pw-toggle__slash { opacity: 1; }

/* The mobile number (static/js/phone.js, owner 2026-11-09): 11 slots in groups of 4-3-4, centred, under one
   transparent input that takes the typing; the next slot is underlined in the ring color, a count at the end. */
.ctl--phone { position: relative; }
.phone { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.phone__slots { display: flex; gap: clamp(5px, 1.6vw, 10px); direction: ltr; pointer-events: none; }
.phone__group { display: flex; gap: clamp(2px, .6vw, 4px); }
.phone__slot { position: relative; display: grid; place-items: center; width: clamp(13px, 4.2vw, 19px); height: 28px; border-bottom: 2px solid var(--line); font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1; transition: border-color .15s; }
.phone__slot.is-filled { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.ctl--phone.is-focused .phone__slot.is-next { border-color: var(--rc); }
.ctl--phone.is-focused .phone__slot.is-next::after { content: ""; width: 2px; height: 18px; border-radius: 1px; background: var(--rc); animation: phone-caret 1s steps(1) infinite; }
.ctl--phone.is-complete .phone__slot { border-color: var(--ok); }
@keyframes phone-caret { 50% { opacity: 0; } }
/* The real input: on top of the slots, its own text and caret invisible (autofill too). */
.ctl.ctl--phone input[data-phone] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; font-size: 16px; text-align: center; letter-spacing: .4em; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; background: transparent; cursor: text; }
.ctl--phone input[data-phone]::selection { background: transparent; }
.ctl--phone input[data-phone]:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--surface) inset; }
.phone__count { flex: none; min-width: 34px; font-size: 12px; font-weight: 700; color: var(--muted); text-align: end; }
.phone__count.is-complete { color: var(--ok); }
@media (max-width: 360px) { .phone__count { display: none; } }
@media (prefers-reduced-motion: reduce) { .ctl--phone.is-focused .phone__slot.is-next::after { animation: none; } }
/* The welcome's two steps on the auth card. */
.steps--auth { margin: 4px 0 2px; }

.textarea {
  --rc: var(--primary);
  width: 100%;
  min-height: 110px;
  max-height: 60vh;
  /* No native resize grip (owner, 2026-10-23): the box grows with its text
     (field-sizing, or static/js/textarea.js where that is missing). */
  resize: none;
  field-sizing: content;
  contain: inline-size; /* a long line grows the box downward; it never widens the page */
  padding: 10px 12px;
  border: 1px solid var(--field);
  border-radius: var(--r-ctl);
  background: var(--surface);
  font-size: 15px;
  line-height: 1.8;
  transition: border-color .15s, box-shadow .15s;
}
.textarea:focus, .textarea:focus-visible { outline: none; border-color: var(--rc); box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 20%, transparent); }
.field--error .textarea { --rc: var(--bad); border-color: var(--bad); }

/* Honeypot: off-screen for people, still in the DOM for bots. */
/* The honeypot: out of sight and out of the tab order, without lying outside the page (nothing wider than the viewport). */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.form-errors { display: flex; flex-direction: column; gap: 4px; }

/* Captcha */
.captcha { display: flex; align-items: stretch; gap: 8px; }
.captcha__img { width: 160px; height: 52px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #F5F7F9; flex: none; }
.captcha__img img { width: 100%; height: 100%; border-radius: inherit; }
.captcha .ctl { flex: 1; }

/* ---------- Switch, radio, segmented control ---------- */

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track {
  position: relative;
  flex: none;
  width: 42px; height: 24px;
  border-radius: var(--r-pill);
  background: var(--track);
  transition: background-color .15s;
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 3px; inset-inline-start: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: inset-inline-start .15s;
}
.switch input:checked + .switch__track { background: var(--primary); }
.switch input:checked + .switch__track::after { inset-inline-start: 21px; }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch input:disabled + .switch__track { opacity: .5; }

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-ctl);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.seg__opt { position: relative; }
.seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg__opt span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.seg__opt input:checked + span { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); font-weight: 700; }
.seg__opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
.seg__opt input:disabled + span { opacity: .45; cursor: not-allowed; }

.seg--block { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.seg--block .seg__opt span { justify-content: center; width: 100%; min-height: 42px; }
.seg__opt--ok input:checked + span { color: var(--ok-ink, var(--ok)); background: var(--ok-soft); box-shadow: none; }
.seg__opt--bad input:checked + span { color: var(--bad-ink); background: var(--bad-soft); box-shadow: none; }

/* A search box with its main action beside it; stacked on phones (owner, 2026-11-11). */
.search-bar { display: flex; align-items: stretch; gap: 10px; }
.search-bar__form { flex: 1 1 auto; display: flex; gap: 8px; min-width: 0; margin: 0; }
.search-bar__form .ctl { flex: 1 1 auto; min-width: 0; }
.search-bar > .btn { flex: none; }
@media (max-width: 600px) { .search-bar { flex-direction: column; } .search-bar > .btn { width: 100%; } }

/* «مشتری‌ها» as cards (owner, 2026-11-11): name and number; «بیشتر» opens the rest. */
.cust-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; }
.cust { gap: 12px; padding: 16px; }
.cust__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cust__avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.cust__who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.cust__name { font-weight: 800; overflow-wrap: anywhere; }
.cust__phone { font-size: 13px; color: var(--muted); text-align: start; }
.cust__chips { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cust__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cust__actions > .btn, .cust__actions > form { flex: 1 1 auto; margin: 0; }
.cust__actions > form > .btn { width: 100%; }
.cust__more > summary { min-height: 40px; }
.cust__kv { margin: 4px 0 12px; font-size: 13px; }
.cust__kv dd { overflow-wrap: anywhere; }

/* Buttons in a table's action cell, never touching (owner, 2026-11-11). */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row-actions > form { margin: 0; }
.linked-user { display: inline-flex; align-items: flex-start; gap: 6px; }
.linked-user .icon { flex: none; margin-top: 3px; color: var(--ok); }

.choice-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.choice-row:last-child { border-bottom: 0; }
.choice-row[inert] { opacity: .45; }
/* Collapsible sections (static/js/fold.js) */
fieldset.stack { border: 0; padding: 0; margin: 0; min-width: 0; }
.fold > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; list-style: none; min-height: 28px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:focus-visible { outline: 2px solid var(--primary, currentColor); outline-offset: 4px; border-radius: 6px; }
.fold__title { font-weight: 700; flex: 1 1 auto; min-width: 0; }
.fold__arrow { flex: none; transition: transform .15s; color: var(--muted, inherit); display: inline-flex; }
.fold[open] > summary .fold__arrow { transform: rotate(180deg); }
.fold[open] > summary { margin-bottom: 14px; }
.fold--nested { border-top: 1px solid var(--line); padding-top: 12px; }

/* ---------- Custom select (static/js/select.js) ---------- */

.sel { position: relative; --rc: var(--primary); }
.sel > select { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--field); border-radius: var(--r-ctl); background: var(--surface); }
.sel.is-enhanced > select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.sel__btn {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--field);
  border-radius: var(--r-ctl);
  background: var(--surface);
  cursor: pointer;
  text-align: start;
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
.sel__btn:focus-visible { outline: none; }
.sel__btn:focus-visible, .sel.is-open .sel__btn { border-color: var(--rc); box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 20%, transparent); }
.sel__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel__value.is-placeholder { color: var(--muted); }
.sel__chev { color: var(--muted); transition: transform .2s; }
.sel.is-open .sel__chev { transform: rotate(180deg); }
.sel__pop {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline: 0;
  z-index: 45;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  animation: pop-in .14s ease-out;
}
.sel__pop.is-up { top: auto; bottom: calc(100% + 6px); }
.sel__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 10px;
  margin-bottom: 6px;
  border: 1px solid var(--rc);
  border-radius: var(--r-sm);
  color: var(--muted);
  box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 20%, transparent);
}
.sel__search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 14px; color: var(--ink); }
.sel__list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; outline: none; }
.sel__opt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; font-size: 14px; }
.sel__opt .sel__check { margin-inline-start: auto; color: var(--primary); opacity: 0; }
.sel__opt[aria-selected="true"] { font-weight: 700; }
.sel__opt[aria-selected="true"] .sel__check { opacity: 1; }
.sel__opt.is-active, .sel__opt:hover { background: var(--surface-2); }
.sel__opt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.sel__empty { padding: 12px; text-align: center; color: var(--muted); font-size: 13px; }
.field--error .sel, .sel:has(> select[aria-invalid="true"]) { --rc: var(--bad); }
.field--error .sel__btn, .field--error .sel > select { border-color: var(--bad); }
.sel__btn:disabled { background: var(--surface-2); opacity: .7; cursor: not-allowed; }
/* Without JS the native select keeps the kit's box; with JS it is hidden. */
.sel > select { color: var(--ink); font-size: 15px; }
.sel > select:focus-visible { outline: none; border-color: var(--rc); box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 20%, transparent); }
.sel--inline { min-width: 190px; }
.sel--multi > select { height: auto; min-height: 120px; padding: 6px; }
/* Multi-select: a checkbox per option; the list stays open while options are toggled. */
.sel--multi .sel__opt .sel__check { opacity: 1; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--field); border-radius: 6px; color: transparent; }
.sel--multi .sel__opt[aria-selected="true"] { font-weight: 600; }
.sel--multi .sel__opt[aria-selected="true"] .sel__check { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.sel--multi .sel__check .icon { width: 16px; height: 16px; }

@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- OTP (static/js/otp.js) ---------- */

.otp { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; direction: ltr; width: 100%; }
.otp__box {
  --rc: var(--primary);
  width: 100%;
  min-width: 0;
  height: 58px;
  padding: 0;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  border: 1px solid var(--field);
  border-radius: 14px;
  background: var(--surface);
  caret-color: var(--primary);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.otp__box:focus, .otp__box:focus-visible { outline: none; border-color: var(--rc); box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 20%, transparent); }
.otp__box.is-filled { border-color: var(--primary); background: var(--primary-soft); }
.otp.is-error .otp__box { --rc: var(--bad); border-color: var(--bad); background: var(--bad-soft); animation: shake .35s; }
.otp.is-ok .otp__box { --rc: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.otp-field.is-enhanced .ctl { display: none; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@media (max-width: 400px) { .otp { gap: 8px; } .otp__box { height: 56px; } }

.resend { text-align: center; font-size: 13px; color: var(--muted); }

/* ---------- Chips and badges ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.chip--ok { background: var(--ok-soft); color: var(--ok-ink); }
.chip--warn { background: var(--warn-soft); color: var(--warn-ink); }
.chip--bad { background: var(--bad-soft); color: var(--bad-ink); }
.chip--saffron { background: var(--saffron-soft); color: var(--saffron-ink); }
.chip--primary { background: var(--primary-soft); color: var(--primary); }
.chip--neutral { background: var(--surface-2); color: var(--muted); }

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  background: var(--bad);
  color: #FFFFFF;
}

/* ---------- Surfaces ---------- */

.section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sec);
  padding: 32px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px;
}
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card__title { font-size: 17px; font-weight: 700; line-height: 1.6; }
.card__meta { font-size: 12px; font-weight: 500; color: var(--muted); }
.card__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.card__actions .btn { flex: none; }
.card__actions .btn:not(.btn--icon) { flex: 1 1 auto; min-width: 0; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 18px;
}

.stack { display: flex; flex-direction: column; gap: 18px; }
.stack--tight { gap: 10px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.row--center { justify-content: center; }
.row--between { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 18px; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; font-weight: 600; }

/* ---------- Banner and toast ---------- */

.banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--r-card);
  font-weight: 500;
}
.banner > .icon { margin-top: 3px; }
.banner--info { background: var(--primary-soft); color: var(--primary); }
.banner--ok { background: var(--ok-soft); color: var(--ok-ink); }
.banner--warn { background: var(--warn-soft); color: var(--warn-ink); }
.banner--bad { background: var(--bad-soft); color: var(--bad-ink); }
.banner__text { flex: 1; color: var(--ink); }
.banner__action { flex: none; }

.toast {
  position: fixed;
  inset-inline: 0;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 80;
  margin-inline: auto;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: var(--r-ctl);
  background: var(--ink);
  color: var(--surface);
  font-weight: 600;
  box-shadow: var(--shadow);
  animation: pop-in .15s ease-out;
}

/* ---------- Dialog (static/js/dialog.js) ---------- */

.dialog {
  width: min(460px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.dialog::backdrop { background: var(--overlay); }
.dialog__title { font-size: 18px; font-weight: 800; }
@media (max-width: 600px) {
  .dialog { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 22px 22px 0 0; }
}

/* A no-JS confirmation page drawn like the dialog. */
.confirm { max-width: 520px; margin-inline: auto; }
/* «حساب من» (owner, 2026-11-11): the whole width on phones, a comfortable column on wide screens. */
.account { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 860px; }
.account__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.account__row > .caption { margin: 0; flex: 1 1 260px; }
.account__fields { display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.danger-zone { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.danger-zone .card__title { color: var(--bad-ink); }
.danger-zone__head { display: flex; align-items: center; gap: 10px; color: var(--bad); }
.danger-list { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; }
.btn--danger { border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
[data-delete-form]:not(:has([data-delete-ack]:checked)) [data-delete-submit] { opacity: .5; pointer-events: none; }
.confirm__list { margin: 0; padding-inline-start: 20px; }

/* SMS auto-approval (Phase 7): the pairing QR next to its address and code; long
   codes, hashes and SMS bodies wrap instead of widening the page. */
.aa-pair { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.aa-pair .qr { width: 220px; height: 220px; background: #fff; }
.aa-code, .aa-hash { overflow-wrap: anywhere; word-break: break-all; }
.table td.aa-wrap { white-space: normal; min-width: 160px; max-width: 280px; }
.aa-body { white-space: normal; overflow-wrap: anywhere; margin: 0; line-height: 1.9; }
@media (max-width: 600px) {
  .aa-pair { grid-template-columns: 1fr; }
  .aa-pair .qr { width: min(240px, 100%); height: auto; aspect-ratio: 1; margin-inline: auto; }
}

/* ---------- Usage ring and time bar (geometry is computed server-side) ---------- */

.usage { display: flex; align-items: center; gap: 18px; }
.usage__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.usage .remaining { font-size: 36px; }
.usage-row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.usage-row b { color: var(--ink); font-weight: 700; }

.ring { position: relative; flex: none; width: 112px; height: 112px; }
.ring svg { width: 100%; height: 100%; }
.ring__track { fill: none; stroke: var(--track); }
.ring__value { fill: none; stroke: var(--ok); stroke-linecap: round; transition: stroke-dashoffset .5s ease, stroke .2s; }
.ring[data-s="warn"] .ring__value { stroke: var(--warn); }
.ring[data-s="bad"] .ring__value { stroke: var(--bad); }
.ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.ring__center b { font-size: 26px; font-weight: 850; letter-spacing: -.5px; }
.ring__center small { font-size: 11px; color: var(--muted); }
.ring[data-s="bad"] .ring__center b { color: var(--bad); }

.tbar { display: block; width: 100%; height: 8px; overflow: visible; }
.tbar__track { fill: var(--track); }
.tbar__fill { fill: var(--ok); transition: width .3s ease; }
.tbar[data-s="warn"] .tbar__fill { fill: var(--warn); }
.tbar[data-s="bad"] .tbar__fill { fill: var(--bad); }

@media (max-width: 360px) { .usage { flex-direction: column; align-items: stretch; } .usage .ring { align-self: center; } }

/* ---------- Tables and pager ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 12px 16px; text-align: start; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th { font-size: 12px; font-weight: 600; color: var(--muted); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
/* Phones (owner, 2026-10-29, a kit rule for every data table): one card per row, each cell a
   «label: value» line (data-label from static/js/tables.js), the cell with buttons last, its
   buttons full width. Nothing scrolls sideways. */
@media (max-width: 767.98px) {
  .table-wrap { overflow: visible; border: 0; border-radius: 0; background: none; }
  .table, .table tbody, .table tfoot { display: block; width: 100%; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table tbody, .table tfoot { display: flex; flex-direction: column; gap: 10px; }
  .table tfoot { margin-top: 10px; }
  .table tr { display: flex; flex-direction: column; padding: 4px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
  .table tbody tr:hover { background: var(--surface); }
  .table th, .table td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 0; white-space: normal; overflow-wrap: anywhere; text-align: end; border-bottom: 1px dashed var(--line); }
  .table tr > :last-child { border-bottom: 0; }
  .table td[data-label]::before { content: attr(data-label); flex: none; max-width: 45%; color: var(--muted); font-size: 12px; font-weight: 600; text-align: start; }
  .table td > * { min-width: 0; max-width: 100%; }
  .table td .chip { height: auto; min-height: 26px; padding-block: 4px; white-space: normal; line-height: 1.5; }
  .table td.table__actions { order: 99; display: block; padding-top: 12px; border-bottom: 0; text-align: start; }
  .table td.table__actions::before { content: none; }
  .table td.table__actions .row, .table td.table__actions > div { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .table td.table__actions form { display: block; }
  .table td.table__actions .btn { width: 100%; }
  .table tr.is-problem td { background: none; }
  .table tr.is-problem { background: color-mix(in srgb, var(--bad-soft) 45%, var(--surface)); }
}

.pager { display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.pager__nums { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pager__item {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background-color .15s, border-color .15s, color .15s;
}
a.pager__item:hover { border-color: var(--primary); color: var(--primary); }
.pager__step { padding: 0 14px; }
.pager__item.is-off { opacity: .45; cursor: default; }
.pager [aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pager__gap { min-width: 20px; text-align: center; color: var(--muted); font-weight: 700; }
@media (max-width: 420px) { .pager__step { flex: 1 1 40%; order: 2; } .pager__nums { order: 1; flex-basis: 100%; } }

.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 16px; text-align: center; color: var(--muted); }
.empty .icon { color: var(--primary); }

/* Codes shown once (recovery codes, temporary password). */
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.codes li, .secret {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px dashed var(--field);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  direction: ltr;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  word-break: break-all;
}
.qr { width: 200px; height: 200px; border-radius: var(--r-ctl); border: 1px solid var(--line); }

/* Plain text links (tables, help text): the kit's link style. */
.link-out { color: var(--primary); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.link-out:hover { color: var(--primary-hover); text-decoration: underline; }

/* ---------- App shell ---------- */

/* Rows: the app bar, then the page; the sidebar spans both. Fixed rows (auto 1fr): a short
   page never stretches the header (owner, 2026-10-29). */
.shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--gap-edge);
  min-height: 100vh;
  min-height: 100dvh;
}

/* Floating, collapsible sidebar (static/js/sidebar.js; state in the "sidebar" cookie): a card
   --gap-edge from the top, the bottom and the screen edge, exactly the viewport's height less
   both gaps, sticky, its nav scrolling inside (owner, 2026-10-29). Margins, not the shell's
   padding: card and gaps add up to the viewport, so it never makes the page taller. Not
   clipped (overflow visible): the collapse toggle sits half outside its edge. */
.side {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  position: sticky;
  top: var(--gap-edge);
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: var(--side-w);
  height: calc(100vh - 2 * var(--gap-edge));
  height: calc(100dvh - 2 * var(--gap-edge));
  margin-block: var(--gap-edge);
  margin-inline-start: var(--gap-edge);
  padding: 14px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  transition: width .22s ease;
}
.side__top { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; }
.brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--primary); text-decoration: none; }
.brand__logo { width: 34px; height: 21px; flex: none; color: var(--primary); }
/* A shop's own logo (white-label): fixed height, its own aspect ratio. */
.brand__logo.brand__img { width: auto; max-width: 128px; height: 32px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.brand__name { color: var(--ink); font-size: 15px; font-weight: 800; white-space: nowrap; }
.brand__role { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.side__btn {
  flex: none;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.side__btn:hover { background: var(--surface-2); color: var(--ink); }
.side__collapse .icon { transform: rotate(180deg); transition: transform .22s; }
/* The collapse toggle (owner, 2026-10-29): a 28px circle centred on the card's inner edge
   (half on the card, half in the gap), level with the logo row, in the same place expanded
   or collapsed. 25px = the card's 10px padding + 1px border + half the circle. */
.side__collapse {
  position: absolute;
  top: 50%;
  inset-inline-end: -25px;
  z-index: 1;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--shadow);
  transform: translateY(-50%);
}
.side__collapse:hover { background: var(--surface); border-color: var(--primary); color: var(--primary); }
.side__collapse .icon { width: 16px; height: 16px; }
.side__nav { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.nav-group { display: flex; flex-direction: column; gap: 4px; }
.nav-group__title { padding: 0 12px 2px; font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--r-ctl);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.nav-item .badge { margin-inline-start: auto; }
.side__foot { display: flex; align-items: center; gap: 10px; padding: 10px 6px 2px; border-top: 1px solid var(--line); }
.side__user { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.side__user b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side__user span { font-size: 12px; color: var(--muted); }
.side__foot form { display: contents; }

/* Collapsed: icons only, a tooltip (sidebar.js) on hover and focus. Desktop only: on phones
   the sidebar is the drawer, always expanded, whatever the saved preference (owner, 2026-10-28). */
@media (min-width: 768px) {
  .side.is-collapsed { width: var(--side-w-col); }
  .side.is-collapsed .nav-group__title, .side.is-collapsed .brand__text, .side.is-collapsed .side__user { display: none; }
  /* The label stays the link's accessible name; the tooltip (sidebar.js) shows it on hover and focus. */
  .side.is-collapsed .nav-item__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .side.is-collapsed .brand { justify-content: center; }
  .side.is-collapsed .side__collapse .icon { transform: none; }
  .side.is-collapsed .nav-item { justify-content: center; padding: 0; }
  .side.is-collapsed .nav-group + .nav-group { border-top: 1px solid var(--line); padding-top: 12px; }
  .side.is-collapsed .nav-item .badge { position: absolute; top: 4px; inset-inline-end: 4px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
  .side.is-collapsed .side__foot { flex-direction: column; justify-content: center; }
}

/* The collapsed rail's tooltip: one element on <body>, placed by sidebar.js (fixed, so the
   rail's own scrolling never clips it). */
.side-tip { position: fixed; z-index: 70; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow); pointer-events: none; }

.main { grid-column: 2; grid-row: 2; min-width: 0; padding: 4px clamp(12px, 2vw, 28px) 40px; }
.content { width: 100%; max-width: 1180px; margin-inline: auto; display: flex; flex-direction: column; gap: 22px; }

.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.topbar__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Floating mobile tab bar (customer). */
.tabbar { display: none; }
/* Mobile navigation (below 768px): app bar, drawer, bottom sheet, backdrop. */
.side__close, .sheet-host, .drawer-backdrop { display: none; }
/* The app bar (partials/appbar.html): every panel's one header, var(--appbar-h) tall and sticky.
   From 768px it holds only the actions, over the content column. */
.appbar {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--appbar-h);
  min-width: 0;
  overflow: hidden;
  padding: 0 clamp(12px, 2vw, 28px);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.appbar__end { flex: none; display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
@media (min-width: 768px) { .appbar > .appbar__btn, .appbar > .brand { display: none; } }
html.is-locked, html.is-locked body { overflow: hidden; overscroll-behavior: none; }
/* A modal dialog never scrolls the page behind it (owner, 2026-11-11: «تغییر نام» scrolled the page). */
html:has(dialog[open]:modal) { overflow: hidden; }
/* Above the on-screen keyboard (static/js/dialog.js sets --kb on browsers that only shrink the visual viewport). */
@media (max-width: 600px) { .dialog[open] { margin-bottom: var(--kb, 0px); max-height: calc(100dvh - var(--kb, 0px) - 16px); transition: margin-bottom .15s ease-out; } }
@keyframes xo-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .side, .sheet, .drawer-backdrop { transition: none !important; animation: none !important; }
}

/* Mobile header for the staff layouts (the sidebar becomes a top card). */
@media (max-width: 767.98px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 0; }
  .main { grid-column: 1; padding: 16px 16px 40px; }

  .shell--customer .side { display: none; }
  .shell--customer .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  .tabbar {
    position: fixed;
    inset-inline: var(--gap-edge);
    bottom: calc(var(--gap-edge) + env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    padding: 6px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(15, 22, 32, .16);
  }
  .tab {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 0;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
  }
  .tab[aria-current="page"] { color: var(--primary); font-weight: 700; background: var(--primary-soft); }
  .tab .badge { position: absolute; top: 2px; inset-inline-end: calc(50% - 22px); min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }

  /* Staff (owner, 2026-10-28): an app bar on top; the sidebar is an off-canvas
     drawer from the right (static/js/drawer.js), always expanded. */
  .appbar {
    grid-column: 1;
    height: calc(var(--appbar-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 12px 0;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-bottom: 1px solid var(--line);
  }
  .appbar .brand { flex: 1 1 auto; }
  .appbar .brand__role { display: none; }
  .appbar .brand__name { overflow: hidden; text-overflow: ellipsis; }
  .appbar__end { gap: 4px; }
  .appbar .area-switch .btn { padding-inline: 10px; }
  .appbar__btn { flex: none; }
  .appbar .bell { width: 44px; height: 44px; border: 1px solid var(--field); border-radius: var(--r-ctl); color: var(--ink); }
  .appbar .bell:hover { background: none; border-color: var(--primary); color: var(--primary); }
  .shell--admin .side {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    z-index: 60;
    margin: 0;
    width: min(320px, 86vw);
    height: 100vh;
    height: 100dvh;
    padding: calc(14px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
    border-start-end-radius: var(--r-card);
    border-end-end-radius: var(--r-card);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .26s ease, visibility 0s linear .26s;
  }
  .shell--admin .side.is-open { transform: none; visibility: visible; transition: transform .26s ease; }
  /* One scroll for the whole panel: the nav and the foot (user, theme, logout) under it. */
  .shell--admin .side__nav { flex: none; overflow: visible; }
  .shell--admin .side__foot { margin-top: auto; }
  .shell--admin .side__collapse { display: none; }
  .shell--admin .side__close { display: grid; width: 44px; height: 44px; }
  .shell--admin .nav-item { height: 46px; }

  /* Customer: «بیشتر» opens a bottom sheet with every other item. */
  .sheet-host { display: block; }
  .sheet {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 86dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 14px calc(16px + env(safe-area-inset-bottom));
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 36px rgba(15, 22, 32, .2);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform .26s ease, visibility 0s linear .26s;
  }
  .sheet.is-open, .sheet:target { transform: none; visibility: visible; transition: transform .26s ease; }
  .sheet__head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 14px; }
  .sheet__grip { position: absolute; top: 0; inset-inline: 0; margin-inline: auto; width: 40px; height: 4px; border-radius: 4px; background: var(--line); }
  .sheet__title { margin: 0; font-size: 17px; font-weight: 800; }
  .sheet__head .side__btn { width: 44px; height: 44px; }
  .sheet__nav { display: flex; flex-direction: column; gap: 2px; }
  .sheet__nav .nav-item { height: 48px; }
  .sheet__switch .btn { width: 100%; }
  .sheet__foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
  .sheet__foot form { display: contents; }

  .drawer-backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: block;
    background: rgba(10, 14, 22, .42);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: xo-fade .2s ease;
  }

  .remaining { font-size: 48px; }
  .usage .remaining { font-size: 40px; }
  .section { padding: 22px; }
  .page-title { font-size: 24px; }
}

/* ---------- Auth pages ---------- */

.auth { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 28px 16px; }
.auth__card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.auth__brand { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.auth__brand .brand__logo { width: 72px; }
.auth__brand .brand__logo.brand__img { width: auto; max-width: 220px; height: 64px; }
.auth__name { font-size: 15px; font-weight: 800; }
.auth__title { font-size: 20px; font-weight: 800; text-align: center; }
.auth__sub { text-align: center; color: var(--muted); }
.auth__links { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; }
.auth__foot { display: flex; justify-content: center; }
/* In the narrow card a banner's action goes under its text. */
.auth .banner { flex-wrap: wrap; }
.auth .banner__text { min-width: calc(100% - 40px); }
.auth .banner__action { margin-inline-start: 34px; }

/* ---------- Apex ---------- */

.apex { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 28px var(--page-pad); text-align: center; }
.apex__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 460px; }
.apex .brand__logo { width: 120px; }

/* ---------- Error pages (templates/errors/, static/js/error-page.js) ---------- */

.err-top { position: fixed; inset: 16px 16px auto; z-index: 5; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.err-top > * { pointer-events: auto; }
.err-top__brand { display: flex; align-items: center; gap: 10px; color: var(--primary); text-decoration: none; }
.err-top__brand .brand__logo { width: 40px; }
.err-top__brand b { color: var(--ink); font-size: 15px; font-weight: 800; white-space: nowrap; }
.err { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 96px 16px 40px; }
.err__card { width: min(520px, 100%); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.err__title { font-size: clamp(22px, 5vw, 28px); font-weight: 850; }
.err__text { max-width: 420px; color: var(--muted); font-size: 15px; }
.err__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.err__help { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--muted); font-size: 13px; text-align: start; }
.err__help .icon { flex: none; color: var(--primary); }
.err__help code, .err__ref code { direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, Menlo, Consolas, monospace; }
.err__help code { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); color: var(--ink); font-size: 12px; }
.err__ref { font-size: 12px; color: var(--muted); }
.err__ref code { color: var(--ink); font-weight: 700; user-select: all; }

/* The ring's geometry lives in SVG attributes; only the tone is a class. */
.err-ring { --c: var(--primary); position: relative; width: min(240px, 62vw); aspect-ratio: 1; }
.err-ring[data-tone="warn"] { --c: var(--warn); }
.err-ring[data-tone="saffron"] { --c: var(--saffron); }
.err-ring[data-tone="bad"] { --c: var(--bad); }
.err-ring > svg { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.err-ring circle { fill: none; stroke-linecap: round; }
.err-ring__track { stroke: var(--track); stroke-width: 2; }
.err-ring__arc { stroke: var(--c); stroke-width: 3.5; }
.err-ring__arc--b { opacity: .45; }
.err-ring__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.err-ring__c b { font-size: clamp(46px, 14vw, 64px); font-weight: 900; letter-spacing: -1px; color: var(--c); }
.err-ring__c small { margin-top: 4px; font-size: 12px; color: var(--muted); }

/* ---------- Panel pages (templates/panel/) ---------- */

.sub-title { font-size: 14px; font-weight: 700; }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 18px; align-items: start; }
.status-list { display: flex; flex-direction: column; margin: 0; }
.status-list__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-block-start: 1px solid var(--line); }
.status-list__row:first-child { border-block-start: 0; padding-top: 0; }
.status-list dt { color: var(--muted); font-size: 13px; flex: none; }
.status-list dd { margin: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.tone-ok { color: var(--ok-ink); }
.tone-bad { color: var(--bad-ink); }
.tone-neutral { color: var(--ink); }
.tone-warn { color: var(--warn-ink); }
.tone-muted { color: var(--muted); }

/* Backup destinations (templates/backups/): fields shown by the card's own choices, no JS. */
.dest-other { display: none; }
.sms-dedicated { display: none; }
.sms-send:has(input[name="send_mode"][value="dedicated"]:checked) .sms-dedicated { display: flex; }
.dest:has(select[name$="-datacenter"] option[value="other"]:checked) .dest-other { display: grid; }
.dest .mode-protected { display: none; }
.dest:has(input[name$="-mode"][value="protected"]:checked) .mode-protected { display: flex; }
.dest:has(input[name$="-mode"][value="protected"]:checked) .mode-simple { display: none; }
.bk-list { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.state-link { display: inline-flex; margin-inline-end: 8px; text-decoration: none; border-radius: 99px; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* Checkbox and radio (kit .chk) */
.chk { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; font-size: 14px; cursor: pointer; }
.chk input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid var(--field); border-radius: 7px; background: var(--surface); cursor: pointer; transition: background .15s, border-color .15s; }
.chk input::after { content: ""; width: 10px; height: 6px; border: 2.5px solid var(--on-primary); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.chk input:checked { background: var(--primary); border-color: var(--primary); }
.chk input:checked::after { opacity: 1; }
.chk input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- SMS pattern texts ---------- */

.pattern-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pattern { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); }
.pattern__text { white-space: pre-line; font-size: 13px; color: var(--muted); }

/* ---------- Theme toggle ---------- */

.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__sun { display: block; }
}

/* ---------- Config card and styleguide bits ---------- */

.stat { display: flex; align-items: center; gap: 12px; }
.stat__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-ctl); background: var(--primary-soft); color: var(--primary); }
.stat__icon--saffron { background: var(--saffron-soft); color: var(--saffron); }
.stat__label { font-size: 12px; font-weight: 500; color: var(--muted); }
.stat__value { font-size: 16px; font-weight: 800; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.swatch { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.swatch__chip { height: 48px; border-radius: var(--r-ctl); border: 1px solid var(--line); }
.sw-ground { background: var(--ground); } .sw-surface { background: var(--surface); }
.sw-ink { background: var(--ink); } .sw-muted { background: var(--muted); }
.sw-primary { background: var(--primary); } .sw-primary-soft { background: var(--primary-soft); }
.sw-saffron { background: var(--saffron); } .sw-saffron-soft { background: var(--saffron-soft); }
.sw-ok { background: var(--ok); } .sw-warn { background: var(--warn); }
.sw-bad { background: var(--bad); } .sw-track { background: var(--track); }

/* ---------- «تأیید خودکار»: one group per method; the picker of site users ---------- */
.aa-group { display: flex; flex-direction: column; gap: 16px; padding-inline-start: 12px; border-inline-start: 3px solid var(--primary); }
.aa-group__head { background: var(--primary-soft); }
@media (max-width: 600px) { .aa-group { padding-inline-start: 8px; } }
.filter-row .btn { height: auto; min-height: 40px; padding-block: 8px; white-space: normal; }
.dialog--picker { width: min(520px, calc(100vw - 32px)); }
.picker { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.picker__pick { width: 100%; height: auto; padding-block: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; text-align: start; }
.picker__pick .caption { overflow-wrap: anywhere; }

/* ---------- First-login wizard (/manage/setup/) ---------- */
.wizard { min-height: 100dvh; max-width: 760px; margin-inline: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.wizard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wizard__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; min-width: 0; }
.wizard__now { display: none; }
.wizard__nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.wizard__forward { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
.wizard__sample { font-size: 20px; font-weight: 800; }
@media (max-width: 600px) {
  .wizard .steps li span { display: none; }
  .wizard__now { display: block; text-align: center; font-weight: 700; }
}

/* ---------- Buying: steps, products, cart, plan cards, summary (Phase 3) ---------- */

.steps { display: flex; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; }
.steps li::before { counter-increment: s; content: counter(s, persian); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 2px solid var(--line); font-weight: 800; color: var(--muted); z-index: 1; }
.steps li::after { content: ""; position: absolute; top: 15px; inset-inline-start: 50%; width: 100%; height: 2px; background: var(--line); }
.steps li:last-child::after { display: none; }
.steps li.is-done::before { content: "✓"; background: var(--ok); border-color: var(--ok); color: #FFFFFF; }
.steps li.is-done::after { background: var(--ok); }
.steps li.is-cur { color: var(--primary); }
.steps li.is-cur::before { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

.cart-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
/* Plan cards (owner, 2026-10-28): volume, time and devices as big numbers with icons,
   the price large (before → after on a discount), a clear «افزودن به سبد»; equal heights. */
.prods { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); grid-auto-rows: 1fr; }
.prod { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); transition: border-color .15s; min-width: 0; }
.prod:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.prod.is-in { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); }
.prod.is-off { opacity: .6; }
.prod__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.prod__name { font-size: 16px; font-weight: 800; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.prod__head .chip { flex: none; }
.prod__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.prod__fact { display: flex; align-items: center; gap: 10px; }
.prod__fact > .icon { flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.prod__fact-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; line-height: 1.3; }
.prod__fact-value { font-size: 24px; font-weight: 900; letter-spacing: -.3px; color: var(--ink); font-variant-numeric: tabular-nums; }
.prod__fact-unit { font-size: 14px; font-weight: 700; color: var(--ink); }
.prod__fact-word { font-size: 16px; font-weight: 800; color: var(--ink); }
.prod__fact-text small { flex-basis: 100%; font-size: 12px; color: var(--muted); }
/* The price sits at the end (left in RTL), the name and the facts at the start (owner, 2026-11-11). */
.prod__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 8px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); }
.prod__now { font-size: 26px; font-weight: 900; letter-spacing: -.3px; color: var(--ink); font-variant-numeric: tabular-nums; }
.prod__price small { font-size: 13px; font-weight: 700; color: var(--muted); }
.prod__old { flex-basis: 100%; text-align: end; font-size: 14px; color: var(--muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.prod__act form { margin: 0; }
/* «به سبد خرید اضافه شد» (owner, 2026-11-11). */
.cart-added__head { display: flex; align-items: center; gap: 12px; }
.cart-added__head .dialog__title { margin: 0; }
.cart-added__head .caption { margin: 0; }
.cart-added__tick { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); animation: added-pop .45s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes added-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.cart-added__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); }
.cart-added__price { flex: none; }
.cart-added__sum { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; }
.cart-added__actions { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.cart-added__actions .btn { min-height: 46px; }
@media (prefers-reduced-motion: reduce) { .cart-added__tick { animation: none; } }
/* Renewal: the shop's plan cards, one picked (a radio inside each card). */
.prod--pick { cursor: pointer; position: relative; }
.prod--pick.is-off { cursor: not-allowed; }
.prod--pick:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); box-shadow: 0 0 0 1px var(--primary); }
.prod--pick:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.prod__radio { flex: none; width: 22px; height: 22px; border: 2px solid var(--field); border-radius: 50%; background: var(--surface); transition: border-color .15s, border-width .15s; }
.prod--pick:has(input:checked) .prod__radio { border: 7px solid var(--primary); }
.prod__head .prod__radio { margin-inline-start: auto; }
.prod__head:has(.prod__off) .prod__radio { margin-inline-start: 0; }
.prod__fact-plus { font-size: 22px; font-weight: 900; color: var(--primary); }
.prod__act .qty { height: 44px; }
.prod__act .btn { min-height: 44px; }

.qty { display: flex; align-items: center; justify-content: space-between; height: 36px; border: 1px solid var(--primary); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
.qty form { display: contents; }
.qty button { width: 40px; height: 100%; border: 0; background: transparent; color: var(--primary); cursor: pointer; display: grid; place-items: center; }
.qty button:hover { background: var(--primary-soft); }
.qty button:disabled { opacity: .4; cursor: not-allowed; }
.qty button.is-remove { color: var(--bad); }
.qty button.is-remove:hover { background: var(--bad-soft); }
.qty output { font-weight: 800; font-size: 15px; }

.cart { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; }
.cart__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cart__close { display: none; }
.cart-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.cart-line { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.cart-line__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.cart-line__text small { color: var(--muted); font-size: 12px; }
.cart-line__text small .icon { vertical-align: -3px; margin-inline-end: 4px; }
.th-icon { display: inline-flex; align-items: center; gap: 4px; }
.cart-line .qty { height: 32px; width: 96px; flex: none; }
.cart-line .qty button { width: 30px; }
.cart-btn { position: relative; flex: none; }
.cart-btn .badge { position: absolute; top: -4px; inset-inline-end: -4px; background: var(--primary); color: var(--on-primary); }
.cart-btn.is-bump { animation: cart-bump .35s; }
@keyframes cart-bump { 40% { transform: scale(1.15); } }
.cart-backdrop { display: none; }
.cart-bar { display: none; }

.sum { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.sum > div { display: flex; justify-content: space-between; gap: 12px; }
.sum .is-disc { color: var(--ok); }
.sum .is-total { border-block-start: 1px dashed var(--line); padding-top: 10px; font-size: 17px; font-weight: 850; }
.sum__old { font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: line-through; }
.cart-line__price { display: flex; gap: 6px; align-items: baseline; font-size: 13px; }
.cart-line__price s { color: var(--muted); font-size: 12px; }

.plans { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.plan { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 2px solid var(--line); border-radius: 16px; cursor: pointer; background: var(--surface); transition: border-color .15s; }
.plan:hover { border-color: var(--field); }
.plan input { position: absolute; opacity: 0; pointer-events: none; }
.plan:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.plan:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.plan b { font-size: 16px; font-weight: 800; }
.plan.is-off { opacity: .55; cursor: not-allowed; }

.pay-choice { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

@media (max-width: 860px) {
  .cart-grid { grid-template-columns: minmax(0, 1fr); }
  /* The cart becomes a drawer: opened by the header button (static/js/cart.js), or #cart without JS. */
  .cart { position: fixed; z-index: 60; top: 0; bottom: 0; inset-inline-end: 0; width: min(400px, 100%); border-radius: 0; overflow-y: auto; visibility: hidden; transform: translateX(-24px); opacity: 0; transition: opacity .2s, transform .2s, visibility .2s; }
  .cart:target, .cart.is-open { visibility: visible; transform: none; opacity: 1; }
  .cart:target ~ .cart-backdrop, .cart.is-open ~ .cart-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: var(--overlay); }
  .cart-list { max-height: none; }
  .cart__close { display: inline-flex; }
  .cart-bar { display: flex; position: sticky; bottom: calc(var(--gap-edge) + 84px + env(safe-area-inset-bottom)); z-index: 30; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 10px; border-radius: var(--r-card); background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow); text-decoration: none; font-weight: 700; }
}
@media (max-width: 600px) {
  .cart { top: auto; width: 100%; max-height: 85vh; border-radius: 22px 22px 0 0; transform: translateY(24px); padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* ---------- Bank card (receipt step; colors per bank: apps/billing/banks.py) ---------- */

.bcard { --b1: #1F3B4D; --b2: #3E6A80; --bink: #FFFFFF; --bline: rgba(255, 255, 255, .28); container-type: inline-size; position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 1.586; width: 100%; max-width: 540px; border-radius: 24px; padding: clamp(16px, 5cqi, 28px); color: var(--bink); background: linear-gradient(135deg, var(--b1), var(--b2)); box-shadow: 0 18px 36px -16px color-mix(in srgb, var(--b1) 70%, transparent); display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
/* Text on the card: white or dark, from the bank colors' WCAG contrast (apps.billing.banks.ink). */
.bcard[data-ink="dark"] { --bink: #0F1620; --bline: rgba(15, 22, 32, .26); }
/* Two thin decorative circle outlines in a corner. */
.bcard::before, .bcard::after { content: ""; position: absolute; border-radius: 50%; border: 1.5px solid var(--bline); z-index: -1; pointer-events: none; }
.bcard::before { width: 62cqi; aspect-ratio: 1; top: -30cqi; inset-inline-start: -18cqi; }
.bcard::after { width: 42cqi; aspect-ratio: 1; top: -17cqi; inset-inline-start: -4cqi; }
.bcard[data-bank="melli"], .bc-letter[data-bank="melli"] { --b1: #0B3A6B; --b2: #1F6FB2; }
.bcard[data-bank="sepah"], .bc-letter[data-bank="sepah"] { --b1: #0F3D7A; --b2: #E2A325; }
.bcard[data-bank="mellat"], .bc-letter[data-bank="mellat"] { --b1: #8A1426; --b2: #D23A4E; }
.bcard[data-bank="saderat"], .bc-letter[data-bank="saderat"] { --b1: #173A7A; --b2: #3C6FD1; }
.bcard[data-bank="tejarat"], .bc-letter[data-bank="tejarat"] { --b1: #0E3B66; --b2: #2A82C9; }
.bcard[data-bank="keshavarzi"], .bc-letter[data-bank="keshavarzi"] { --b1: #1E5631; --b2: #58A15D; }
.bcard[data-bank="maskan"], .bc-letter[data-bank="maskan"] { --b1: #9A3412; --b2: #E07B39; }
.bcard[data-bank="postbank"], .bc-letter[data-bank="postbank"] { --b1: #14532D; --b2: #3FA34D; }
.bcard[data-bank="tosee_taavon"], .bc-letter[data-bank="tosee_taavon"] { --b1: #0F5257; --b2: #2BA59B; }
.bcard[data-bank="refah"], .bc-letter[data-bank="refah"] { --b1: #1F3A93; --b2: #4F7BE0; }
.bcard[data-bank="saman"], .bc-letter[data-bank="saman"] { --b1: #06607A; --b2: #1BA6C9; }
.bcard[data-bank="blu"], .bc-letter[data-bank="blu"] { --b1: #1440C8; --b2: #3A86FF; }
.bcard[data-bank="pasargad"], .bc-letter[data-bank="pasargad"] { --b1: #2B2B2B; --b2: #B08D3A; }
.bcard[data-bank="parsian"], .bc-letter[data-bank="parsian"] { --b1: #5C1A1A; --b2: #B8483E; }
.bcard[data-bank="eghtesad_novin"], .bc-letter[data-bank="eghtesad_novin"] { --b1: #4A1D6B; --b2: #8E4CC2; }
.bcard[data-bank="shahr"], .bc-letter[data-bank="shahr"] { --b1: #7A1F2B; --b2: #C9414F; }
.bcard[data-bank="dey"], .bc-letter[data-bank="dey"] { --b1: #0B4F6C; --b2: #1B98B4; }
.bcard[data-bank="sina"], .bc-letter[data-bank="sina"] { --b1: #103A6B; --b2: #3A7CC2; }
.bcard[data-bank="sarmayeh"], .bc-letter[data-bank="sarmayeh"] { --b1: #2E2A5A; --b2: #5D58A8; }
.bcard[data-bank="karafarin"], .bc-letter[data-bank="karafarin"] { --b1: #14532D; --b2: #2F9E6E; }
.bcard[data-bank="ayandeh"], .bc-letter[data-bank="ayandeh"] { --b1: #5B2C06; --b2: #C26E1C; }
.bcard[data-bank="gardeshgari"], .bc-letter[data-bank="gardeshgari"] { --b1: #0F4C5C; --b2: #E07A2E; }
.bcard[data-bank="iranzamin"], .bc-letter[data-bank="iranzamin"] { --b1: #3B1F5E; --b2: #7E57C2; }
.bcard[data-bank="khavarmianeh"], .bc-letter[data-bank="khavarmianeh"] { --b1: #3E2723; --b2: #A1887F; }
.bcard[data-bank="resalat"], .bc-letter[data-bank="resalat"] { --b1: #0D4D3A; --b2: #26A17B; }
.bcard[data-bank="mehr_iran"], .bc-letter[data-bank="mehr_iran"] { --b1: #1B5E20; --b2: #66BB6A; }
.bcard[data-bank="sanat_madan"], .bc-letter[data-bank="sanat_madan"] { --b1: #263238; --b2: #607D8B; }
.bcard[data-bank="tosee_saderat"], .bc-letter[data-bank="tosee_saderat"] { --b1: #1A3C6E; --b2: #4FA3D9; }
.bcard[data-bank="iran_venezuela"], .bc-letter[data-bank="iran_venezuela"] { --b1: #4A148C; --b2: #C62828; }
.bcard[data-bank="melal"], .bc-letter[data-bank="melal"] { --b1: #0D3B66; --b2: #3E8ED0; }
.bcard[data-bank="noor"], .bc-letter[data-bank="noor"] { --b1: #5D4037; --b2: #FFB300; }
.bcard[data-bank="tosee"], .bc-letter[data-bank="tosee"] { --b1: #1A237E; --b2: #5C6BC0; }
.bcard[data-bank="other"], .bc-letter[data-bank="other"] { --b1: #1F3B4D; --b2: #3E6A80; }
.bc-top { display: flex; justify-content: space-between; align-items: center; }
.bc-bank { display: flex; align-items: center; gap: 10px; font-size: clamp(14px, 3.4cqi, 18px); }
.bc-logo { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #FFFFFF; display: grid; place-items: center; padding: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
/* No logo: a circle in the bank's color with its first letter, on a white ring (stands out on its own card). */
.bc-letter { --b1: #1F3B4D; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--b1); color: #FFFFFF; font-weight: 850; font-size: 19px; line-height: 1; box-shadow: 0 0 0 2px #FFFFFF, 0 2px 6px rgba(0, 0, 0, .18); }
/* The logo fits a 30×30 box inside the 40 px badge, aspect kept, whatever its shape (owner, 2026-10-28). */
.bc-logo img { display: block; width: 30px; height: 30px; max-width: 30px; max-height: 30px; object-fit: contain; }
.bc-mid { display: flex; flex-direction: column; gap: 4px; }
.bc-label { font-size: clamp(11px, 2.4cqi, 13px); font-weight: 600; opacity: .8; }
.bc-num { all: unset; cursor: pointer; direction: ltr; display: flex; justify-content: space-between; gap: 8px; font-size: 7.6cqi; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; border-radius: 8px; padding: 4px 2px; }
.bcard[data-ink="light"] .bc-num { text-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.bc-num:focus-visible { outline: 2px solid var(--bink); outline-offset: 4px; }
.bc-num:hover { background: color-mix(in srgb, var(--bink) 10%, transparent); }
.bc-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.bc-foot small { display: block; font-size: 11px; opacity: .8; }
.bc-foot b { font-size: clamp(14px, 3.2cqi, 17px); }
/* A white «کپی شماره» button: the bank color as its text, readable on any card. */
.bc-copy { flex: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 12px; background: #FFFFFF; color: color-mix(in srgb, var(--b1) 85%, #000); font: inherit; font-size: 14px; font-weight: 750; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .3); }
.bc-copy:hover { background: #F2F4F7; }
.bc-copy .icon { color: inherit; }
.bcard--mini { max-width: 240px; padding: 12px 14px; border-radius: 14px; }
.bcard--mini .bc-logo, .bcard--mini .bc-letter { width: 28px; height: 28px; font-size: 14px; border-radius: 9px; padding: 3px; }
.bcard--mini .bc-logo img { width: 22px; height: 22px; max-width: 22px; max-height: 22px; }
.bcard--mini .bc-letter { border-radius: 50%; }
.bcard--mini .bc-bank { font-size: 12px; }
.bcard--mini .bc-foot b { font-size: 12px; }

/* ---------- Receipt upload and review ---------- */

.drop { position: relative; border: 2px dashed var(--field); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; background: var(--surface); }
.drop:hover, .drop.is-over, .drop:focus-within { border-color: var(--primary); background: var(--primary-soft); }
.drop b { font-size: 15px; }
.drop small { color: var(--muted); font-size: 12px; }
.drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.drop--compact { padding: 16px; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
.drop--compact small { flex-basis: 100%; }
.drop .icon { color: var(--primary); }
.prev { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; }
.prev img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.prev div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.prev span { font-size: 12px; color: var(--muted); }
.receipt-img { display: block; width: 100%; max-width: 520px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.receipt-flags { display: flex; flex-wrap: wrap; gap: 6px; }

.line-list { display: flex; flex-direction: column; gap: 8px; }
.line-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.line-row__text { display: flex; flex-direction: column; min-width: 0; }
.line-row__text small { color: var(--muted); font-size: 12px; }
.money { font-weight: 800; white-space: nowrap; }
.table tr.is-problem td { background: color-mix(in srgb, var(--bad-soft) 45%, transparent); }

/* static/js/swap.js marks the button of a form being sent. */
[aria-busy="true"] { opacity: .7; cursor: progress; }
/* The upload bar of forms that send a file (static/js/swap.js). */
.upload-progress { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.upload-progress progress { flex: 1; min-width: 0; height: 8px; appearance: none; border: 0; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.upload-progress progress::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
.upload-progress progress::-webkit-progress-value { background: var(--primary); border-radius: 999px; }
.upload-progress progress::-moz-progress-bar { background: var(--primary); border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Plan form (templates/manage/_plan_form.html): fields follow the expiry mode, no JS. */
/* The reseller builder (resellers/create.html) shows its fields by expiry mode. */
.plan-form .when-volume, .plan-form .when-purchase, .plan-form .when-first-use, .plan-form .when-timed, .plan-form .when-timed-block { display: none; }
.plan-form:has(input[name="expiry_mode"][value="purchase"]:checked) .when-timed-block,
.plan-form:has(input[name="expiry_mode"][value="first_use"]:checked) .when-timed-block { display: block; }
.plan-form:has(input[name="expiry_mode"][value="volume"]:checked) .when-volume { display: block; }
.plan-form:has(input[name="expiry_mode"][value="purchase"]:checked) .when-purchase { display: block; }
.plan-form:has(input[name="expiry_mode"][value="first_use"]:checked) .when-first-use { display: block; }
.plan-form:has(input[name="expiry_mode"][value="purchase"]:checked) .when-timed,
.plan-form:has(input[name="expiry_mode"][value="first_use"]:checked) .when-timed { display: grid; }
/* Plan form (owner, 2026-11-06): «شروع زمان» only with a duration, its hint follows the choice;
   «نامحدود» greys its field; the extra GB price only while «حجم اضافه» is on. */
.plan-edit .when-first-use, .plan-edit .when-purchase { display: none; }
.plan-edit:has(input[name="expiry_mode"][value="first_use"]:checked) .when-first-use,
.plan-edit:has(input[name="expiry_mode"][value="purchase"]:checked) .when-purchase { display: block; }
.plan-edit:has(input[name="duration_unlimited"]:checked) .when-timed { display: none; }
.plan-edit:not(:has(input[name="extra_enabled"]:checked)) .when-extra { display: none; }
.plan-edit:not(:has(input[name="renew_enabled"]:checked)) .when-renew { display: none; }
.unl-field__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; }
.unl-field__head .chk { min-height: 0; font-size: 13px; }
.unl-field:has(input[name$="_unlimited"]:checked) .unl-field__ctl { opacity: .45; pointer-events: none; }
.svc-row { display: flex; flex-direction: column; gap: 4px; padding-block: 10px; border-top: 1px solid var(--line); }
.form-group > legend + .svc-row { border-top: 0; padding-top: 0; }
.svc-row .field__hint { margin: 0; padding-inline-start: 2px; }
.svc-row--extra, .svc-row--renew { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px 18px; align-items: start; }
.tpl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tpl-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* The config card's «تغییر اسم» (templates/partials/config_card.html): a disclosure, no JS. */
.rename summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.rename summary::-webkit-details-marker { display: none; }
.rename[open] summary { margin-block-end: 10px; }
.rename .ctl { flex: 1 1 160px; }

/* Live validation (static/js/validate.js): the normalised value under a field. */
.field__preview { color: var(--ink); }

/* The real error behind a failed panel test (superadmin only). */
.tech { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 10px 14px; font-size: 13px; }
.tech summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.tech__text { margin: 8px 0 0; overflow-wrap: anywhere; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }


/* The config card's subscription link, QR and "open in app" (templates/partials/config_card.html). */
.sub { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.sub__label { font-size: 12px; font-weight: 600; color: var(--muted); }
.sub__more summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--primary); list-style: none; }
.sub__more summary::-webkit-details-marker { display: none; }
.sub__more[open] summary { margin-block-end: 10px; }
.sub__apps { display: flex; flex-wrap: wrap; gap: 8px; }
.sub .qr { display: block; background: #fff; }

/* The card form: «اسم بانک» only for «سایر» (no JS needed). */
[data-bank-form] .when-other-bank { display: none; }
[data-bank-form]:has(select[name="bank"] option[value="other"]:checked) .when-other-bank { display: block; }

/* Config card (2026-10-22): the usage ring and large remaining volume (ui-kit), the sync line, modals. */
.config-card__name { min-width: 0; }
.config-card--ended { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.config-card__cta { align-items: center; flex-wrap: wrap; }
.config-card__cta .btn { margin-inline-start: auto; }
.config-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px dashed var(--line); padding-top: 10px; }
.config-card__foot > .caption { margin: 0; line-height: 1.5; }
.config-card__foot > form { display: flex; margin: 0; }
.config-card__foot .btn--link { display: inline-flex; align-items: center; gap: 4px; min-height: 0; line-height: 1.5; font-size: 13px; }
.config-card.is-refreshing [data-config-refresh] .icon { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.app-list { display: flex; flex-direction: column; gap: 8px; }
.app-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; font-weight: 700; }
.app-link:hover, .app-link:focus-visible { border-color: var(--primary); color: var(--primary); }

/* «آموزش و دانلود اپ» (owner, 2026-10-28): a platform switch of four equal tiles, then one
   card per app (download links, «افزودن کانفیگ», the steps folded in <details>). Mobile first. */
.platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.platforms__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 4px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; text-align: center; }
.platforms__item:hover { color: var(--ink); border-color: var(--field); }
.platforms__item[aria-current="page"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 800; }
.topics { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.topic-card { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); text-decoration: none; }
.topic-card:hover { border-color: var(--field); }
.topic-card[aria-current="page"] { background: var(--primary-soft); border-color: var(--primary); }
.topic-card__icon { flex: none; display: grid; place-items: center; color: var(--primary); }
.topic-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.7; }
.topic-card__body small { color: var(--muted); font-size: 12px; }
.topic-card--primary { min-height: 96px; padding: 18px; }
.topic-card--primary .topic-card__body b { font-size: 16px; }
.guide-app__head .card__title { display: flex; align-items: center; gap: 8px; }
.guide-app__meta { font-weight: 500; font-size: 13px; opacity: .9; }
.guide-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.guide-images__item { display: block; border-radius: var(--r-ctl); overflow: hidden; border: 1px solid var(--line); }
.guide-images__item img { display: block; width: 100%; height: auto; }
/* ---------- the guides' video player ---------- */
.vp { position: relative; width: 100%; max-width: 720px; margin-inline: auto; aspect-ratio: 16 / 9; background: #0b0f14; border-radius: var(--r-ctl); overflow: hidden; color: #fff; outline-offset: 2px; }
.vp:fullscreen { max-width: none; border-radius: 0; aspect-ratio: auto; }
.vp__video { display: block; width: 100%; height: 100%; object-fit: contain; }
.vp__big { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; }
.vp__big:hover { background: rgba(0, 0, 0, .7); }
.vp__icon-pause, .vp__icon-muted { display: none; }
.vp.is-playing .vp__icon-pause, .vp.is-muted .vp__icon-muted { display: inline-flex; }
.vp.is-playing .vp__icon-play, .vp.is-muted .vp__icon-sound { display: none; }
.vp__icon-play, .vp__icon-pause, .vp__icon-sound, .vp__icon-muted { align-items: center; justify-content: center; }
.vp.is-playing .vp__big { opacity: 0; }
.vp.is-playing:hover .vp__big, .vp.is-playing:focus-within .vp__big { opacity: 1; }
.vp__bar { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: center; gap: 4px; padding: 4px 6px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.vp__btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; }
.vp__btn:hover { background: rgba(255, 255, 255, .15); }
.vp__btn--text { font: inherit; font-size: 13px; font-weight: 700; direction: ltr; }
.vp__seek { --vp-fill: 0%; flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; padding: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; direction: ltr; }
.vp__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #fff var(--vp-fill), rgba(255, 255, 255, .35) var(--vp-fill)); }
.vp__seek::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #fff var(--vp-fill), rgba(255, 255, 255, .35) var(--vp-fill)); }
.vp__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; }
.vp__seek::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }
.vp__time { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; }
.vp__loading { position: absolute; inset: 0; display: none; place-items: center; pointer-events: none; }
.vp[data-state="loading"] .vp__loading { display: grid; }
.vp[data-state="loading"] .vp__big { display: none; }
.vp__spinner { width: 40px; height: 40px; border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: vp-spin .9s linear infinite; }
@keyframes vp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vp__spinner { animation-duration: 3s; } }
.vp__error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; background: rgba(0, 0, 0, .8); text-align: center; }
.vp__error[hidden] { display: none; }
@media (max-width: 420px) {
  .vp__bar { gap: 0; padding: 2px; }
  .vp__btn { width: 38px; height: 44px; }
  .vp__time { font-size: 11px; }
}
.guide { display: flex; flex-direction: column; gap: 14px; }
.guide__title { font-size: 15px; font-weight: 800; color: var(--muted); }
.guide-app { gap: 12px; padding: 18px; }
.guide-app__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.guide-app__text { color: var(--muted); font-size: 14px; line-height: 1.9; }
.guide-app__links { display: grid; gap: 8px; }
.guide-app .btn { min-height: 44px; height: auto; padding-block: 10px; white-space: normal; text-align: center; line-height: 1.5; }
.guide-open > summary { list-style: none; }
.guide-open > summary::-webkit-details-marker { display: none; }
.guide-open[open] > summary { margin-bottom: 10px; }
.guide-steps { border-top: 1px dashed var(--line); padding-top: 10px; }
.guide-steps > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--ink); list-style: none; }
.guide-steps > summary::-webkit-details-marker { display: none; }
/* A chevron: down when folded, up when open (physical borders: the same in RTL). */
.guide-steps > summary::after { content: ""; width: 8px; height: 8px; margin-inline-start: auto; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.guide-steps[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.guide-steps ol { counter-reset: step; display: flex; flex-direction: column; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.guide-steps li { counter-increment: step; position: relative; padding-inline-start: 36px; line-height: 1.9; font-size: 14px; overflow-wrap: anywhere; }
.guide-steps li::before { content: counter(step, persian); position: absolute; inset-inline-start: 0; top: 2px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 800; }
.guide-admin__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.guide-admin__head .card__title { display: flex; align-items: center; gap: 8px; }
.guide-admin__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.guide-admin__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.guide-admin__info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; flex: 1 1 220px; }
.guide-admin__facts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.guide-admin__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-admin__actions form { display: contents; }
@media (min-width: 768px) {
  .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-card--primary { grid-column: 1 / -1; }
  .platforms { display: flex; flex-wrap: wrap; }
  .platforms__item { flex-direction: row; min-height: 44px; padding: 8px 18px; gap: 8px; font-size: 14px; }
  .guide-app__links { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
.qr--big { width: min(260px, 70vw); height: auto; aspect-ratio: 1; margin-inline: auto; display: block; background: #fff; }
/* Modals: a blurred backdrop (native <dialog>: focus stays inside, Esc closes; static/js/dialog.js: backdrop click). */
.dialog::backdrop { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.usage-row > span { display: inline-flex; align-items: center; gap: 6px; }
.usage-row > span { white-space: nowrap; }
.usage-row > b { text-align: end; }
/* Config card actions wrap instead of squeezing (390 px phones). */
/* Config card actions (owner, 2026-10-28): two stacked full-width subscription
   buttons, then labelled rows of equal-width buttons; a third item that does not
   fit (360px) wraps to its own full-width row. Touch targets at least 44px. */
/* Owner, 2026-11-11: two buttons side by side (copy + QR, then renew + extra); one alone takes the row. */
.sub__buttons { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr)); }
.sub__buttons > .btn { min-height: 44px; min-width: 0; padding-inline: 10px; }
.config-actions__row > form { flex: 1 1 128px; min-width: 0; margin: 0; }
.config-actions__row > form .btn { min-height: 44px; height: auto; white-space: normal; }
.config-card__next { color: var(--primary); align-items: flex-start; }
.config-card__next .icon { flex: none; margin-top: 2px; }
/* «کپی لینک» → «کپی شد» with a tick, green for a moment (static/js/copy.js). */
.copy-ico { display: inline-grid; flex: none; }
.copy-ico > .icon { grid-area: 1 / 1; transition: transform .25s cubic-bezier(.2, .9, .3, 1.4), opacity .2s; }
.copy-ico > .icon + .icon { opacity: 0; transform: scale(.3) rotate(-45deg); }
[data-copy] { transition: background-color .25s, color .25s, border-color .25s, transform .15s; }
[data-copy]:active { transform: scale(.97); }
[data-copy].is-copied { background: var(--ok); border-color: var(--ok); color: #FFFFFF; animation: copy-pop .45s cubic-bezier(.2, .9, .3, 1.4); }
[data-copy].is-copied .copy-ico > .icon:first-child { opacity: 0; transform: scale(.3) rotate(45deg); }
[data-copy].is-copied .copy-ico > .icon + .icon { opacity: 1; transform: none; }
[data-copy].is-copied [data-copy-label] { animation: copy-text .3s ease-out; }
@keyframes copy-pop { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes copy-text { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { [data-copy].is-copied, [data-copy].is-copied [data-copy-label] { animation: none; } .copy-ico > .icon { transition: none; } }
.config-actions { display: flex; flex-direction: column; gap: 8px; }
.config-actions__row { display: flex; flex-wrap: wrap; gap: 8px; }
.config-actions__row > .btn { flex: 1 1 128px; min-width: 0; height: auto; min-height: 44px; padding: 8px 10px; white-space: normal; line-height: 1.35; text-align: center; }
.card__meta .ltr { white-space: nowrap; unicode-bidi: isolate; }
/* Support tickets (Phase 5a): the conversation, internal notes, attachments. */
.thread { display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: min(640px, 92%); padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); align-self: flex-start; }
.msg--mine { align-self: flex-end; background: var(--primary-soft); border-color: transparent; }
.msg--internal { align-self: stretch; max-width: none; background: var(--saffron-soft); border: 1px dashed var(--saffron-ink); }
.msg--system { align-self: center; background: transparent; border: 0; color: var(--muted); font-size: 13px; padding: 4px 8px; }
.msg__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.msg__meta b { color: var(--ink); font-weight: 700; }
.msg__body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9; }
.msg__files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.msg__files img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.msg__gone { font-size: 12px; color: var(--muted); }
.ticket-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .ticket-grid { grid-template-columns: 1fr; } }
.canned-list { display: flex; flex-wrap: wrap; gap: 6px; }
.attach-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.ticket-row--unread td:first-child { font-weight: 800; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); margin-inline-end: 6px; vertical-align: middle; }
/* The bell (Phase 5b): a small row above every signed-in page's title. */
.bellbar { display: flex; justify-content: flex-end; }
.area-switch { margin: 0; }
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; color: var(--muted); }
.bell:hover, .bell:focus-visible { background: var(--surface-2); color: var(--ink); }
.bell .badge { position: absolute; top: 2px; inset-inline-end: 0; }
.auth__status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-inline-end: auto; }
.inbox-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.inbox-item:last-child { border-bottom: 0; }
.inbox-item--unread .inbox-item__title { font-weight: 800; }
.inbox-item__text { flex: 1; min-width: 0; }
.inbox-item__text p { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.timeline { display: flex; flex-direction: column; gap: 10px; border-inline-start: 2px solid var(--line); padding-inline-start: 14px; }
.timeline__item small { color: var(--muted); }
/* The public «وضعیت شبکه» page: the error pages' layout, with the incidents below. */
.status-page { display: flex; flex-direction: column; align-items: center; gap: 18px; min-height: 0; }
.status-page > .card, .status-history { width: min(720px, 100%); }
.status-incident__head, .status-incident > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.status-incident > summary { cursor: pointer; list-style: none; }
.status-incident > summary::-webkit-details-marker { display: none; }
.status-incident[open] > summary { margin-bottom: 12px; }
.err-ring[data-tone="ok"] { --c: var(--ok); }
.err-ring__c .icon { color: var(--c); }
.check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }

/* Report charts (apps/ops/charts.py): one series, thin bars on a recessive axis. */
.chart { display: block; width: 100%; height: auto; direction: ltr; overflow: visible; }
.chart__bar { fill: color-mix(in srgb, var(--primary) 70%, var(--surface)); }
.chart__bar.is-last { fill: var(--primary); }
.chart__hit { fill: transparent; }
.chart__col:hover .chart__bar { fill: var(--primary-hover); }
.chart__axis { stroke: var(--line); stroke-width: 1; }
.chart__grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.chart__label { fill: var(--muted); font-size: 11px; font-family: inherit; }

/* KPI tiles on the superadmin reports: a label, one big number, an optional unit line. */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.kpi__label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.kpi__label .icon { color: var(--primary); flex: none; }
.kpi__value { font-size: 22px; font-weight: 850; line-height: 1.3; overflow-wrap: anywhere; }
.kpi__sub { font-size: 12px; color: var(--muted); }

/* Marketing (Phase 5c): a campaign banner with its countdown pill, the code field
   with its «اعمال» button, the live audience line under a code's rules. */
.banner--promo { background: var(--saffron-soft); color: var(--saffron-ink); align-items: center; flex-wrap: wrap; }
.banner--promo .banner__text { flex: 1 1 220px; }
.cd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700; white-space: nowrap; border: 1px solid var(--line); }
.cd-pill .icon { color: var(--saffron); }
.cd-pill__label { font-weight: 600; color: var(--muted); }
.cd-pill__time { font-variant-numeric: tabular-nums; }
.cd-pill.is-ended .cd-pill__time { opacity: .5; }
.promo-field__row { display: flex; gap: 8px; align-items: stretch; }
.promo-field__row .ctl { flex: 1; min-width: 0; }
.promo-field__ok { display: flex; align-items: center; gap: 6px; color: var(--ok-ink); }
.audience { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r-card); background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.audience [data-audience-count] { flex: 1 1 200px; }

/* Wallet (2026-10-24): the balance on top, then a clear ledger; the top-up page's preset chips. */
.wallet-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.wallet-hero__balance { display: flex; flex-direction: column; gap: 4px; }
.wallet-hero__money { font-size: clamp(28px, 7vw, 38px); font-weight: 900; line-height: 1.2; }
.wallet-hero__money small { font-size: 15px; font-weight: 600; color: var(--muted); margin-inline-start: 6px; }
.wallet-hero__open { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.ledger { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.ledger__row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.ledger__row + .ledger__row { border-top: 1px solid var(--line); }
.ledger__icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.ledger__icon.is-credit { background: var(--ok-soft); color: var(--ok-ink); }
.ledger__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ledger__text small, .ledger__money small { color: var(--muted); font-size: 12px; }
.ledger__money { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { appearance: none; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); border-radius: var(--r-pill); padding: 9px 16px; font: inherit; font-weight: 750; cursor: pointer; min-height: 44px; }
.chip-btn small { font-weight: 600; color: var(--muted); }
.chip-btn:hover { border-color: var(--primary); }
.chip-btn[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
@media (max-width: 520px) { .chips { display: grid; grid-template-columns: 1fr 1fr; } }

/* The card-to-card page (owner, 2026-10-24; templates/customer/_pay_step.html). Mobile
   first: one column (amount, card, Sheba, form, the summary collapsed) with a sticky
   «ثبت رسید» bar above the tab bar; from 900px two columns, the amount and the card
   on the right (first in RTL), the summary and the form on the left. */
.pay { display: flex; flex-direction: column; gap: 18px; }
.pay__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pay__timer { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: min(100%, 220px); }
.pay__timer .caption { margin: 0; }
.pay__timer.is-low .cd-pill { border-color: var(--warn); color: var(--warn-ink); }
.pay__timer.is-ended .cd-pill { border-color: var(--bad); color: var(--bad-ink); }
.pay__bar { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 4px; border: 0; border-radius: 999px; overflow: hidden; background: var(--surface-2); color: var(--primary); }
.pay__bar::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
.pay__bar::-webkit-progress-value { background: var(--primary); border-radius: 999px; }
.pay__bar::-moz-progress-bar { background: var(--primary); border-radius: 999px; }
.pay__timer.is-low .pay__bar::-webkit-progress-value { background: var(--warn); }
.pay__timer.is-low .pay__bar::-moz-progress-bar { background: var(--warn); }
.pay__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.pay__back { align-self: flex-start; margin-bottom: -6px; }
/* One column: the amount box, the card, the Sheba row and the note share one width (owner, 2026-10-28). */
.pay__money { display: flex; flex-direction: column; gap: 14px; min-width: 0; width: 100%; max-width: 540px; }
.pay__money > * { width: 100%; max-width: none; }
.pay-amount { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 16px 18px; border-radius: var(--r-card); background: var(--primary-soft); }
.pay-amount__label { flex-basis: 100%; font-size: 13px; font-weight: 600; color: var(--muted); }
.pay-amount__value { font-size: clamp(32px, 9vw, 46px); font-weight: 900; letter-spacing: -.5px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pay-amount__value small { font-size: 16px; font-weight: 700; color: var(--muted); margin-inline-start: 8px; letter-spacing: 0; }
.pay-sheba { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; max-width: 540px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); }
.pay-sheba > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-sheba b { font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pay-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; max-width: 540px; font-size: 13px; color: var(--muted); }
.pay-note .icon { flex: none; color: var(--primary); margin-top: 2px; }
/* «پرداخت با تأیید خودکار»: the exact-amount warning stands out (owner, 2026-10-30). */
.pay-note--warn { color: var(--text); font-weight: 600; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--warn-soft); }
.pay-note--warn .icon { color: var(--warn); }
/* Its long Persian labels wrap instead of widening a 360px page. */
[data-autopay] .pay__form .btn, [data-switch-auto] .btn { height: auto; min-height: 44px; padding-block: 8px; white-space: normal; text-align: center; line-height: 1.5; max-width: 100%; }
.pay__summary--wide { display: none; }
/* Closed, it is only its summary line: no gap or padding under it (owner, 2026-11-11). */
.pay__summary--narrow { display: block; padding: 0; gap: 0; }
.pay__fallback { margin: 0; }
.pay__summary-toggle { display: flex; align-items: center; gap: 8px; padding: 14px 16px; cursor: pointer; list-style: none; font-weight: 700; }
.pay__summary-toggle::-webkit-details-marker { display: none; }
.pay__summary-toggle span { flex: 1; }
.pay__summary-toggle .icon { transition: transform .2s; }
.pay__summary--narrow[open] .pay__summary-toggle .icon { transform: rotate(180deg); }
.pay__summary--narrow > :not(summary) { margin: 0 16px 16px; }
.or-sep { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 700; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pay-more { border-top: 1px solid var(--line); padding-top: 12px; }
.pay-more > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--primary); list-style: none; padding: 6px 0; }
.pay-more > summary::-webkit-details-marker { display: none; }
.pay-more[open] > summary { margin-bottom: 10px; }
.pay-more > .field + .field { margin-top: 12px; }
.pay__bar-sticky { position: sticky; bottom: calc(var(--gap-edge) + 84px + env(safe-area-inset-bottom)); z-index: 30; }
.pay__bar-sticky .btn { box-shadow: var(--shadow); min-height: 52px; }
.pay__submit-inline { display: none; }
.pay__links { justify-content: flex-start; }
@media (min-width: 768px) {
  .pay__bar-sticky { display: none; }
  .pay__submit-inline { display: flex; }
}
@media (min-width: 900px) {
  .pay__grid { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); grid-template-areas: "money summary" "money form"; align-items: start; gap: 20px 28px; }
  .pay__money { grid-area: money; position: sticky; top: 16px; }
  .pay__summary--wide { display: block; grid-area: summary; }
  .pay__summary--narrow { display: none; }
  .pay__form { grid-area: form; }
}

/* «لوگوی بانک‌ها» (superadmin): one card per bank with its mini card, status and upload. */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.logo-row { display: flex; flex-direction: column; gap: 12px; }
.logo-row__head { display: flex; gap: 12px; align-items: flex-start; }
.logo-row__head .bcard--mini { flex: none; width: 150px; }
.logo-row__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.logo-row__form { display: flex; flex-direction: column; gap: 8px; }

/* Trials and invites (Phase 5c). */
.trial-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.trial-card__text { display: flex; gap: 12px; align-items: flex-start; flex: 1 1 260px; }
.trial-card__text > .icon { color: var(--primary); flex: none; }
.trial-card__text .card__title { margin: 0 0 4px; }
.invite-link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 14px; }

/* AJAX navigation (owner, 2026-10-28): a thin bar at the top while a page loads. */
.xo-progress { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 1000; block-size: 3px; inline-size: 0;
  background: var(--primary); opacity: 0; pointer-events: none; }
.xo-progress.is-loading { opacity: 1; animation: xo-progress 8s cubic-bezier(.1, .7, .3, 1) forwards; }
.xo-progress.is-done { inline-size: 100%; opacity: 0; transition: inline-size .15s ease-out, opacity .3s ease-in .15s; }
@keyframes xo-progress { from { inline-size: 0; } 10% { inline-size: 35%; } to { inline-size: 90%; } }
@media (prefers-reduced-motion: reduce) { .xo-progress.is-loading { animation: none; inline-size: 60%; } .xo-progress.is-done { transition: none; } }
main h1[tabindex="-1"]:focus { outline: none; }

/* UX pass (owner, 2026-11-06). */
.form-group > legend { padding: 0; margin-bottom: 4px; }
.unit-pair { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 8px; align-items: start; }
.trial-form .when-first-use, .trial-form .when-purchase, .trial-form .when-auto, .trial-form .when-approval { display: none; }
.trial-form:has(input[name="expiry_mode"][value="first_use"]:checked) .when-first-use,
.trial-form:has(input[name="expiry_mode"][value="purchase"]:checked) .when-purchase,
.trial-form:has(input[name="trial_verify"][value="mobile"]:checked) .when-auto,
.trial-form:has(input[name="trial_verify"][value="approval"]:checked) .when-approval { display: block; }
.table tr.row-highlight > td { background: var(--primary-soft); }
.table tr.row-highlight > td:first-child { box-shadow: inset -3px 0 0 var(--primary); }
/* «کانفیگ‌های من»: big cards or a compact list (static/js/configs.js keeps the choice in localStorage).
   In the compact view the big cards stay in the page as display: contents with only their dialogs, which
   the rows' menus open. Without JS only the big cards show. */
.view-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); }
.view-switch[hidden] { display: none; }
.view-switch .btn--icon { width: 40px; height: 40px; }
.view-switch .btn[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); }
.config-compact { display: none; }
.config-views.is-compact .config-compact { display: flex; flex-direction: column; gap: 10px; }
.config-views.is-compact .config-big { display: block; }
.config-views.is-compact .config-big > * { display: contents; }
.config-views.is-compact .config-big > * > :not(dialog) { display: none; }
.config-card__chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.config-card .config-more > summary { min-height: 44px; }
.config-card .config-more .config-actions { padding-bottom: 2px; }
.config-ended { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 14px 18px; background: var(--surface-2); box-shadow: none; color: var(--muted); }
.config-ended__text b { color: var(--ink); font-weight: 700; }
.cards > .config-ended { grid-column: 1 / -1; }
.config-row { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
.config-row[data-row-menu] { cursor: pointer; transition: border-color .15s, background-color .15s; }
.config-row[data-row-menu]:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.config-row[data-row-menu]:active { background: var(--surface-2); }
.config-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.config-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.config-row__name { font-weight: 800; min-width: 0; overflow-wrap: anywhere; }
.config-row--ended { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.config-row__menu { flex: none; }
.config-menu { padding: 12px 14px 16px; }
.config-menu__head { position: relative; padding-top: 12px; margin-bottom: 6px; }
.config-menu__title { margin: 0; font-size: 16px; font-weight: 800; }
.config-menu__list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--r-ctl);
  background: none; color: var(--ink); font: inherit; font-weight: 600; text-align: start; text-decoration: none; cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); }
.menu-item .icon { color: var(--muted); flex: none; }
.config-menu .sheet__grip { display: none; }
@media (max-width: 600px) { .config-menu .sheet__grip { display: block; } }
@media (min-width: 601px) {
  .config-menu.is-popover { position: fixed; margin: 0; width: 260px; padding: 8px; }
  .config-menu.is-popover::backdrop { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .config-menu.is-popover .config-menu__head, .config-menu.is-popover > [data-dialog-close] { display: none; }
  .config-menu.is-popover .config-menu__list { margin: 0; }
}
/* Options with a help line (kit .chk as a radio inside a bordered choice). */
.chk--radio input { border-radius: 50%; }
.chk--radio input::after { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--on-primary); transform: none; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.choice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); }
.choice input { margin-top: 2px; }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.choice__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice__text .field__hint { margin: 0; }
/* Bank card tiles: the card as wide as the column; labels on the right, amounts on the left. */
.card-tiles .bcard--mini { max-width: none; }
.card-tile { display: flex; flex-direction: column; gap: 12px; }
.card-tile--off { opacity: .75; }
.card-tile__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.card-tile__edit { margin-inline-start: auto; }
.stat-list { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.stat-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.stat-list dt { color: var(--muted); font-size: 13px; text-align: start; }
.stat-list dd { margin: 0; font-weight: 700; text-align: end; white-space: nowrap; }
.cap-meter .caption { margin: 4px 0 0; }
[data-bank-pick][hidden] { display: none; }
/* Domains (owner, 2026-11-06): one compact row per domain, ⋮ opens its records; the add field and its button on one line. */
.domain-list { padding: 0; overflow: hidden; }
.domain-list__empty { padding: 14px 18px; margin: 0; }
.domain-row + .domain-row { border-top: 1px solid var(--line); }
.domain-row__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; }
.domain-row__name { font-weight: 800; overflow-wrap: anywhere; min-width: 0; }
.domain-row__chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.domain-row__actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.domain-row__actions form { display: contents; }
.domain-row__panel { padding: 4px 14px 14px; border-top: 1px dashed var(--line); background: var(--surface-2); }
.domain-row__panel[hidden] { display: none; }
.domain-row__panel .table-wrap { background: var(--surface); }
.records-table td { vertical-align: middle; }
.records-table .rec-val { overflow-wrap: anywhere; }
.inline-add { display: flex; gap: 8px; align-items: stretch; }
.inline-add > .ctl { flex: 1 1 auto; min-width: 0; }
.inline-add > .btn { flex: none; height: 46px; }
.domain-add.section { padding-block: 16px; }
/* The bell's dropdown (static/js/bell.js). */
.bellbar { position: relative; }
.bell-menu { position: fixed; z-index: 70; width: 360px; max-height: min(70vh, 520px); overflow-y: auto;
  overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.bell-menu[hidden] { display: none; }
.bell-menu__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.bell-menu__head form { display: contents; }
.bell-menu__list { list-style: none; margin: 0; padding: 4px; }
.bell-menu__list form { margin: 0; }
.bell-item { display: flex; align-items: flex-start; gap: 6px; width: 100%; padding: 10px; border: 0; border-radius: var(--r-ctl); background: none;
  color: var(--ink); font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.bell-item:hover, .bell-item:focus-visible { background: var(--surface-2); }
.bell-item .dot { margin-top: 7px; flex: none; }
.bell-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bell-item__title { font-size: 14px; overflow-wrap: anywhere; }
.bell-item--unread .bell-item__title { font-weight: 700; }
.bell-item__go { color: var(--primary); font-size: 13px; font-weight: 600; }
.bell-menu__empty { padding: 18px 14px; margin: 0; }
.bell-menu__all { display: block; padding: 10px 14px; border-top: 1px solid var(--line); text-align: center; }
@media (max-width: 767px) {
  .bell-menu { inset-inline: 8px; width: auto; }
}
.choice-list { display: flex; flex-direction: column; gap: 8px; }
.shop-state .when-managed { display: none; }
.shop-state:has(input[name="state"][value="managed"]:checked) .when-managed, .dialog:has(input[name="state"][value="managed"]:checked) .when-managed { display: block; }
.dialog .when-managed { display: none; }
/* @ux-end */

/* Icons inside a button always take the button's own text color, in every
   variant and theme. Context rules above (.empty .icon, .drop .icon,
   .err__help .icon, .ctl > .icon) color decorative icons; inside a button they
   painted the "+" in the button's background color (2026-10-21). This rule must
   stay last: apps/core/tests/test_css.py checks that. */
.btn .icon, .btn:hover .icon { color: inherit; }

/* A customer's new password (owner, 2026-11-08): strength bar and ticks. */
.pw-meter { display: grid; gap: 6px; margin-top: 8px; }
.pw-meter__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pw-meter__bar span { height: 5px; border-radius: 3px; background: var(--line); transition: background .15s; }
.pw-meter[data-level="1"] .pw-meter__bar span:nth-child(-n+1) { background: var(--bad, #d64545); }
.pw-meter[data-level="2"] .pw-meter__bar span:nth-child(-n+2) { background: var(--warn, #d99a1c); }
.pw-meter[data-level="3"] .pw-meter__bar span:nth-child(-n+3) { background: var(--primary); }
.pw-meter[data-level="4"] .pw-meter__bar span { background: var(--ok, #2e9e62); }
.pw-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .85rem; color: var(--muted, inherit); }
.pw-rules li { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.pw-rules li::before { content: "○"; flex: none; width: 1em; text-align: center; }
.pw-rules li.is-ok { color: var(--ok, #2e9e62); }
.pw-rules li.is-ok::before { content: "✓"; font-weight: 700; }
.dialog--gate:not([open]) { display: none; }
.dialog--gate[open]:not(:modal) { position: static; margin: 16px auto; max-width: 480px; }

/* The config's name opens «تغییر نام» (owner, 2026-11-09). */
.config-card__rename { color: inherit; text-decoration: none; cursor: pointer; }
.config-card__rename:hover, .config-card__rename:focus-visible { text-decoration: underline dotted; text-underline-offset: 4px; }
/* A shop's logo: a small radius everywhere it shows (owner, 2026-11-09). */
.brand__logo.brand__img { border-radius: 8px; }
/* Stars after a closed ticket. */
.stars { display: inline-flex; gap: 2px; direction: ltr; }
.stars__btn { background: none; border: 0; padding: 4px; min-width: 44px; min-height: 44px; font-size: 26px; line-height: 1; color: var(--saffron); cursor: pointer; border-radius: 8px; }
.stars__btn:hover, .stars__btn:focus-visible { background: var(--saffron-soft); }
.stars-shown { color: var(--saffron); letter-spacing: 1px; direction: ltr; display: inline-block; }

/* The notify bots a shop admin opens (templates/adminnotify/prefs.html, owner 2026-11-09). */
.bot-links { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.bot-link { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s; }
.bot-link:hover { border-color: var(--primary); background: var(--primary-soft); }
.bot-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.bot-link__lead { color: var(--primary); flex: none; }
.bot-link__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bot-link__name { font-size: 13px; font-weight: 700; }
.bot-link__id { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; text-align: start; }
.bot-link__go { color: var(--muted); flex: none; }