/* ==========================================================================
   AXON design system — RTL, Vazirmatn, design tokens. One file for the whole
   platform (public site + panels). Sections: tokens · base · layout · components ·
   marketing blocks · panel · utilities · dark · print.
   ========================================================================== */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn.woff2?v=33") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ink & paper */
  --ax-ink: #0E1116;
  --ax-ink-2: #1B2029;
  --ax-text: #1B2029;
  --ax-muted: #5C6675;
  --ax-muted-2: #8A94A3;
  --ax-paper: #FFFFFF;
  --ax-surface: #F5F7FA;
  --ax-surface-2: #EDF0F5;
  --ax-line: #DCE1E8;
  --ax-line-2: #C9D0DA;
  /* brand */
  --ax-brand: #2E5BFF;
  --ax-brand-600: #2449D6;
  --ax-brand-700: #1C3AAD;
  --ax-brand-100: #E9EEFF;
  --ax-brand-50: #F3F6FF;
  --ax-brand-ink: #14224F;
  /* status */
  --ax-success: #168A54;
  --ax-success-100: #E3F5EC;
  --ax-success-ink: #0C5A36;
  --ax-error: #C8362B;
  --ax-error-100: #FCE9E7;
  --ax-error-ink: #7E1F18;
  --ax-pending: #B7791F;
  --ax-pending-100: #FBF1DC;
  --ax-pending-ink: #6E4711;
  --ax-info: #2E5BFF;
  --ax-info-100: #E9EEFF;
  /* dark panel (calculator output, hero mock) */
  --ax-dark: #0E1116;
  --ax-dark-2: #161B24;
  --ax-dark-line: #2A323E;
  --ax-dark-text: #E8ECF2;
  --ax-dark-muted: #98A2B3;
  /* shape */
  --ax-radius-s: 6px;
  --ax-radius-m: 10px;
  --ax-radius-l: 16px;
  --ax-radius-xl: 24px;
  --ax-shadow-s: 0 1px 2px rgba(14,17,22,.06), 0 1px 1px rgba(14,17,22,.04);
  --ax-shadow-m: 0 6px 24px -8px rgba(14,17,22,.14), 0 2px 6px rgba(14,17,22,.05);
  --ax-shadow-l: 0 24px 60px -20px rgba(14,17,22,.25);
  /* type */
  --ax-font: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --ax-fs-xs: .75rem;
  --ax-fs-sm: .875rem;
  --ax-fs-md: 1rem;
  --ax-fs-lg: 1.125rem;
  --ax-fs-xl: 1.375rem;
  --ax-fs-2xl: 1.75rem;
  --ax-fs-3xl: 2.25rem;
  --ax-fs-4xl: 3rem;
  /* layout */
  --ax-container: 1200px;
  --ax-gutter: 20px;
  --ax-header-h: 68px;
  --ax-sidebar-w: 260px;

  /* spacing scale + panel-specific radii (Wave 12A — tenant panel visual polish; used by the
     panel's newer components — module cards, tier/voice grids, plan/pack cards, save-bar — and
     by voice.css) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --radius-card: 14px;
  --radius-ctl: 10px;
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ax-header-h) + 16px); }
body {
  margin: 0; font-family: var(--ax-font); font-size: var(--ax-fs-md); line-height: 1.75; color: var(--ax-text);
  background: var(--ax-paper); direction: rtl; text-align: right;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 0; font-variant-numeric: tabular-nums;
}
img, svg, video { max-width: 100%; display: block; }
a { color: var(--ax-brand-600); text-decoration: none; }
a:hover { color: var(--ax-brand-700); }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.3; font-weight: 800; color: var(--ax-ink); letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); }
h3 { font-size: var(--ax-fs-xl); font-weight: 700; }
h4 { font-size: var(--ax-fs-lg); font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
small, .small { font-size: var(--ax-fs-sm); }
strong, b { font-weight: 700; }
code, .code, [dir="ltr"].mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; }
.ltr { direction: ltr; unicode-bidi: isolate; text-align: left; }
.num { font-variant-numeric: tabular-nums; }
hr { border: 0; border-top: 1px solid var(--ax-line); margin: 24px 0; }
::selection { background: var(--ax-brand-100); color: var(--ax-brand-ink); }
:focus-visible { outline: 3px solid var(--ax-brand); outline-offset: 2px; border-radius: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -60px; right: 16px; background: var(--ax-ink); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 1000; }
.skip-link:focus { top: 12px; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--ax-container); margin-inline: auto; padding-inline: var(--ax-gutter); }
.container-sm { max-width: 820px; }
.section { padding-block: clamp(48px, 5vw + 24px, 96px); }
.section-sm { padding-block: clamp(32px, 3vw + 16px, 56px); }
.section-surface { background: var(--ax-surface); }
.section-head { max-width: 720px; margin-bottom: clamp(24px, 3vw, 40px); }
.section-head p { color: var(--ax-muted); font-size: var(--ax-fs-lg); }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row-between { justify-content: space-between; }
.gap-s { gap: 8px; } .gap-l { gap: 24px; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.text-muted { color: var(--ax-muted); }
.text-center { text-align: center; }
.text-sm { font-size: var(--ax-fs-sm); } .text-xs { font-size: var(--ax-fs-xs); } .text-lg { font-size: var(--ax-fs-lg); }
.text-success { color: var(--ax-success-ink); } .text-error { color: var(--ax-error-ink); } .text-pending { color: var(--ax-pending-ink); } .text-brand { color: var(--ax-brand-600); }
.w-full { width: 100%; }
.hidden { display: none !important; }
@media (max-width: 760px) { .hide-mobile { display: none !important; } }
@media (min-width: 761px) { .hide-desktop { display: none !important; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: var(--ax-radius-m); border: 1px solid transparent; font-weight: 700; font-size: var(--ax-fs-md); line-height: 1;
  cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .08s, box-shadow .15s; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--ax-ink); color: #fff; border-color: var(--ax-ink); }
.btn-primary:hover { background: #000; color: #fff; }
.btn-brand { background: var(--ax-brand); color: #fff; border-color: var(--ax-brand); box-shadow: 0 6px 16px -6px rgba(46,91,255,.55); }
.btn-brand:hover { background: var(--ax-brand-600); color: #fff; }
.btn-secondary { background: var(--ax-paper); color: var(--ax-ink); border-color: var(--ax-line-2); }
.btn-secondary:hover { border-color: var(--ax-ink); color: var(--ax-ink); }
.btn-ghost { background: transparent; color: var(--ax-ink); border-color: transparent; }
.btn-ghost:hover { background: var(--ax-surface); color: var(--ax-ink); }
.btn-soft { background: var(--ax-brand-100); color: var(--ax-brand-700); border-color: transparent; }
.btn-soft:hover { background: #dbe4ff; color: var(--ax-brand-700); }
.btn-danger { background: var(--ax-error-100); color: var(--ax-error-ink); border-color: transparent; }
.btn-danger:hover { background: #f8d7d3; color: var(--ax-error-ink); }
.btn-success { background: var(--ax-success); color: #fff; border-color: var(--ax-success); }
.btn-lg { min-height: 52px; padding: 0 28px; font-size: var(--ax-fs-lg); border-radius: 12px; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: var(--ax-fs-sm); border-radius: 8px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn-secondary.is-loading::after, .btn-ghost.is-loading::after { border-color: rgba(14,17,22,.25); border-top-color: var(--ax-ink); }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-link { background: none; border: 0; padding: 0; min-height: 0; color: var(--ax-brand-600); font-weight: 600; }
.btn-link:hover { text-decoration: underline; }
.btn-link svg, svg.inline, a > svg:not([class]), p > svg { width: 1em; height: 1em; vertical-align: -.15em; display: inline-block; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label, .label { font-weight: 700; font-size: var(--ax-fs-sm); color: var(--ax-ink); }
.field .hint { color: var(--ax-muted); font-size: var(--ax-fs-sm); }
.field .error { color: var(--ax-error-ink); font-size: var(--ax-fs-sm); font-weight: 600; }
.input, select.input, textarea.input {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--ax-line-2); border-radius: var(--ax-radius-m); background: var(--ax-paper);
  transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
textarea.input { min-height: 120px; resize: vertical; line-height: 1.7; }
.input:focus { outline: none; border-color: var(--ax-brand); box-shadow: 0 0 0 3px var(--ax-brand-100); }
.input.is-invalid { border-color: var(--ax-error); }
.input[dir="ltr"] { text-align: left; }
.input-lg { min-height: 56px; font-size: var(--ax-fs-lg); }
select.input { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6675' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: left 12px center; padding-left: 36px; }
.input-group { display: flex; gap: 8px; }
.input-group .input { flex: 1; }

/* Native <input type="file">: the outer box already gets the usual .input border/radius/
   background, but its internal picker button is a separate UA-drawn control that .input's
   own rules (appearance:none etc.) can't reach — it stays the raw OS-grey "Choose File"
   square next to plain black "No file chosen" text, the one unstyled native control on this
   page. ::file-selector-button is the standard hook; ::-webkit-file-upload-button is the
   same thing under its pre-standard name for older Safari/Chrome — both set together is a
   no-op in engines that only support one. Styled to match .btn/.btn-sm (ink fill, white
   text, same radius/weight), with a dark-theme flip mirroring .btn-primary's above. */
input[type="file"].input { display: flex; align-items: center; gap: 12px; padding: 7px 10px; color: var(--ax-muted); font-size: var(--ax-fs-sm); }
input[type="file"].input::file-selector-button, input[type="file"].input::-webkit-file-upload-button {
  -webkit-appearance: none; appearance: none; border: 0; border-radius: var(--ax-radius-m);
  background: var(--ax-ink); color: #fff; font-weight: 700; font-size: var(--ax-fs-sm);
  padding: 0 16px; min-height: 34px; cursor: pointer; transition: background .15s;
}
input[type="file"].input::file-selector-button:hover, input[type="file"].input::-webkit-file-upload-button:hover { background: #000; }
[data-theme="dark"] input[type="file"].input::file-selector-button, [data-theme="dark"] input[type="file"].input::-webkit-file-upload-button { background: #fff; color: #0E1116; }
[data-theme="dark"] input[type="file"].input::file-selector-button:hover, [data-theme="dark"] input[type="file"].input::-webkit-file-upload-button:hover { background: var(--ax-ink-2); }

.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: var(--ax-fs-sm); }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ax-brand); flex: none; }
.otp-input { letter-spacing: .6em; font-size: 1.6rem; text-align: center; font-weight: 700; direction: ltr; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--ax-line-2); border-radius: 999px; font-size: var(--ax-fs-sm); font-weight: 600; background: var(--ax-paper); cursor: pointer; transition: all .15s; }
.choice input:checked + span { background: var(--ax-ink); color: #fff; border-color: var(--ax-ink); }
.choice input:focus-visible + span { outline: 3px solid var(--ax-brand); outline-offset: 2px; }
/* .choices.is-cards: multi-line variant (label + description) — .choice span is a single-line pill by default,
   whose inline-flex row direction makes a bold label + wrapped <small> description overlap instead of stack. */
.choices.is-cards { display: grid; gap: 10px; }
.choices.is-cards .choice span { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 0; border-radius: var(--ax-radius-l); padding: 14px 16px; white-space: normal; text-align: right; }
.choices.is-cards .choice small { display: block; margin-top: 4px; white-space: normal; font-weight: 400; }
.choices.is-cards .choice input:checked + span small { color: inherit; opacity: .8; }
.range { width: 100%; accent-color: var(--ax-brand); height: 32px; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch .ui { width: 44px; height: 26px; border-radius: 999px; background: var(--ax-line-2); position: relative; transition: background .15s; flex: none; }
.switch .ui::after { content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: var(--ax-shadow-s); }
.switch input:checked + .ui { background: var(--ax-success); }
.switch input:checked + .ui::after { transform: translateX(-18px); }

/* ---------- cards & surfaces ---------- */
.card { background: var(--ax-paper); border: 1px solid var(--ax-line); border-radius: var(--ax-radius-l); padding: 24px; box-shadow: var(--ax-shadow-s); }
.card-sm { padding: 16px; border-radius: var(--ax-radius-m); }
.card-flat { box-shadow: none; }
.card-surface { background: var(--ax-surface); border-color: transparent; box-shadow: none; }
.card-accent { border-color: var(--ax-brand); background: var(--ax-brand-50); }
.card-good { border-color: #b9e3cc; background: var(--ax-success-100); }
.card-warn { border-color: #f0d9a8; background: var(--ax-pending-100); }
.card-bad { border-color: #f1c2bc; background: var(--ax-error-100); }
.card-dark { background: var(--ax-dark); color: var(--ax-dark-text); border-color: var(--ax-dark); }
.card-dark h2, .card-dark h3, .card-dark h4 { color: #fff; }
.card-dark .text-muted { color: var(--ax-dark-muted); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.card-head h2, .card-head h3 { margin: 0; }
.lead { color: var(--ax-muted); font-size: var(--ax-fs-lg); }

/* ---------- pills & status ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: var(--ax-fs-xs); font-weight: 700; line-height: 1; background: var(--ax-surface-2); color: var(--ax-muted); white-space: nowrap; }
.pill svg, .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pill-ok { background: var(--ax-success-100); color: var(--ax-success-ink); }
.pill-error { background: var(--ax-error-100); color: var(--ax-error-ink); }
.pill-pending, .pill-warning { background: var(--ax-pending-100); color: var(--ax-pending-ink); }
.pill-info { background: var(--ax-info-100); color: var(--ax-brand-700); }
.pill-ink { background: var(--ax-ink); color: #fff; }
.pill-lg { min-height: 32px; padding: 0 14px; font-size: var(--ax-fs-sm); }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ax-brand); color: #fff; font-size: 11px; font-weight: 700; }

/* ---------- alerts / flash ---------- */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--ax-radius-m); border: 1px solid transparent; font-size: var(--ax-fs-sm); margin-bottom: 16px; }
.alert svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.alert-success { background: var(--ax-success-100); color: var(--ax-success-ink); border-color: #b9e3cc; }
.alert-error { background: var(--ax-error-100); color: var(--ax-error-ink); border-color: #f1c2bc; }
.alert-warning { background: var(--ax-pending-100); color: var(--ax-pending-ink); border-color: #f0d9a8; }
.alert-info { background: var(--ax-info-100); color: var(--ax-brand-ink); border-color: #cbd7ff; }
.alert .alert-body { flex: 1; }
.alert .alert-close { background: none; border: 0; color: inherit; opacity: .6; padding: 0; line-height: 1; font-size: 18px; }
.flash-stack { position: fixed; bottom: 20px; right: 20px; left: 20px; z-index: 900; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.flash-stack .alert { pointer-events: auto; box-shadow: var(--ax-shadow-m); max-width: 480px; margin-inline-start: auto; margin-bottom: 0; animation: rise .3s ease; }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.debug-code { border: 1px dashed var(--ax-pending); background: var(--ax-pending-100); color: var(--ax-pending-ink); padding: 12px 14px; border-radius: var(--ax-radius-m); font-size: var(--ax-fs-sm); }
.debug-code b { font-size: 1.4rem; letter-spacing: .3em; direction: ltr; display: inline-block; }

/* ---------- tables ---------- */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--ax-line); border-radius: var(--ax-radius-l);
  background-color: var(--ax-paper); background-repeat: no-repeat;
  /* horizontal-scroll affordance: "cover" layers (local attachment, scroll with the table) sit
     exactly at the true left/right edge of the full (overflowing) content and mask the "shadow"
     layers (scroll attachment, pinned to the wrap's own edges) whenever that side is already
     fully scrolled into view — so a fade only shows on an edge that still has more to scroll to. */
  background-image:
    linear-gradient(to right, var(--ax-paper) 40%, rgba(0, 0, 0, 0)),
    linear-gradient(to left, var(--ax-paper) 40%, rgba(0, 0, 0, 0)),
    linear-gradient(to right, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
    linear-gradient(to left, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-size: 26px 100%, 26px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
  scrollbar-width: thin; scrollbar-color: var(--ax-line-2) transparent;
}
.table-wrap::-webkit-scrollbar { height: 6px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--ax-line-2); border-radius: 999px; }
table.table { width: 100%; border-collapse: collapse; font-size: var(--ax-fs-sm); }
.table th, .table td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--ax-line); vertical-align: middle; }
.table th { background: var(--ax-surface); font-weight: 700; color: var(--ax-muted); font-size: var(--ax-fs-xs); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--ax-brand-50); }
.table td.num, .table th.num, .table td.ltr, .table th.ltr { font-variant-numeric: tabular-nums; }
.table .empty { text-align: center; color: var(--ax-muted); padding: 40px 16px; }
.table .empty .btn { margin-top: var(--sp-3); }
.table .row-error td { background: #fff7f6; }
/* calls table "خلاصه" column: without a floor, auto table-layout squeezes this long-text column
   down to the width of its longest unbreakable word (other columns are short, unbreakable
   numerics that claim their full width first) — one word per line, very tall rows. A min-width
   lets it wrap normally across a handful of lines; .table-wrap's horizontal scroll (with the fade
   affordance below) handles the rest on narrow viewports. */
.table td.col-summary, .table th.col-summary { min-width: 200px; max-width: 320px; white-space: normal; overflow-wrap: break-word; word-break: normal; }
/* clamp long text to 2 lines with an ellipsis instead of wrapping the row tall; reused by the
   campaigns table's name cell. */
.text-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* contacts table "name & note" inline-edit form: dedicated class instead of touching the
   generic `.row` (used across many unrelated forms). flex-wrap:nowrap moved here from an
   inline style so the mobile override below can actually win over it. */
.contact-note-form { flex-wrap: nowrap; }
@media (max-width: 760px) {
  .table-cards table, .table-cards thead, .table-cards tbody, .table-cards tr, .table-cards td { display: block; }
  .table-cards thead { display: none; }
  .table-cards tr { border-bottom: 1px solid var(--ax-line); padding: 8px 0; }
  .table-cards td { border: 0; padding: 4px 14px; display: flex; justify-content: space-between; gap: 12px; }
  .table-cards td::before { content: attr(data-th); color: var(--ax-muted); font-size: var(--ax-fs-xs); font-weight: 700; flex: none; }
  .table-cards td.td-full { display: block; }
  .table-cards td.td-full::before { display: block; margin-bottom: 4px; }
  /* Bug fix (2026-10): at mobile width, nowrap + no min-width let the two inline inputs get
     crushed to ~20px blank pills next to the save button. Stack name/note inputs one per
     line, full width, with the save button on its own line below — comfortably tappable
     and the table-wrap's existing horizontal scroll (L266) covers any resulting column growth. */
  .contact-note-form { flex-direction: column; align-items: stretch; min-width: 0; }
  .contact-note-form .input { min-width: 150px; }
  .contact-note-form .btn { align-self: flex-start; }
}

/* ---------- kpi / stats ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--ax-paper); border: 1px solid var(--ax-line); border-radius: var(--ax-radius-l); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-height: 96px; position: relative; }
.kpi .kpi-label { color: var(--ax-muted); font-size: var(--ax-fs-xs); font-weight: 700; }
.kpi .kpi-value { font-size: var(--ax-fs-2xl); font-weight: 800; color: var(--ax-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .kpi-hint { color: var(--ax-muted); font-size: var(--ax-fs-xs); }
.kpi.is-ok { border-color: #b9e3cc; } .kpi.is-ok .kpi-value { color: var(--ax-success-ink); }
.kpi.is-bad { border-color: #f1c2bc; } .kpi.is-bad .kpi-value { color: var(--ax-error-ink); }
.kpi.is-warn { border-color: #f0d9a8; } .kpi.is-warn .kpi-value { color: var(--ax-pending-ink); }
.kpi.is-brand { background: var(--ax-brand-50); border-color: #cbd7ff; }
a.kpi:hover { border-color: var(--ax-ink); }
.kpi .kpi-icon { position: absolute; top: 14px; left: 14px; width: 28px; height: 28px; color: var(--ax-muted-2); }

/* ---------- tabs / pills nav ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ax-line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 12px 16px; font-weight: 700; color: var(--ax-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; background: none; border-top: 0; border-inline: 0; }
.tab:hover { color: var(--ax-ink); }
.tab.is-active, .tab[aria-selected="true"] { color: var(--ax-ink); border-bottom-color: var(--ax-ink); }
.tab svg { width: 16px; height: 16px; vertical-align: -3px; }
.tab .count { display: inline-block; margin-inline-start: 6px; font-size: var(--ax-fs-xs); background: var(--ax-surface-2); color: var(--ax-muted); border-radius: 999px; padding: 0 7px; }
.tab.is-active .count { background: var(--ax-ink); color: #fff; }
.tab-panel[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ax-line-2); background: var(--ax-paper); font-size: var(--ax-fs-sm); font-weight: 600; color: var(--ax-ink); }
.chip.is-active { background: var(--ax-ink); color: #fff; border-color: var(--ax-ink); }
.chip:hover { border-color: var(--ax-ink); }

/* ---------- accordion (details) ---------- */
.acc { border: 1px solid var(--ax-line); border-radius: var(--ax-radius-l); background: var(--ax-paper); }
.acc details { border-bottom: 1px solid var(--ax-line); }
.acc details:last-child { border-bottom: 0; }
.acc summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--ax-muted); flex: none; transition: transform .2s; font-weight: 400; }
.acc details[open] summary::after { content: "−"; }
.acc .acc-body { padding: 0 20px 18px; color: var(--ax-muted); }
.acc .acc-body p:last-child { margin: 0; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.step { position: relative; padding: 24px 20px 20px; background: var(--ax-paper); border: 1px solid var(--ax-line); border-radius: var(--ax-radius-l); }
.step .step-n { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ax-ink); color: #fff; font-weight: 800; margin-bottom: 12px; }
.step h3 { font-size: var(--ax-fs-lg); margin-bottom: 4px; }
.step p { color: var(--ax-muted); font-size: var(--ax-fs-sm); margin: 0; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--ax-line); border-radius: var(--ax-radius-m); background: var(--ax-paper); }
.checklist li .ck { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ax-line-2); flex: none; display: grid; place-items: center; margin-top: 2px; }
.checklist li.is-done { background: var(--ax-success-100); border-color: #b9e3cc; }
.checklist li.is-done .ck { background: var(--ax-success); border-color: var(--ax-success); color: #fff; }
.checklist li.is-current { border-color: var(--ax-brand); box-shadow: 0 0 0 3px var(--ax-brand-100); }
.checklist li .ck svg { width: 14px; height: 14px; }
.checklist .ck-body { flex: 1; }
.checklist .ck-body b { display: block; }
.checklist .ck-body small { color: var(--ax-muted); }

/* ---------- header (public) ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.is-stuck { border-bottom-color: var(--ax-line); box-shadow: 0 4px 20px -12px rgba(14,17,22,.15); }
.site-header .bar { height: var(--ax-header-h); display: flex; align-items: center; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ax-ink); font-weight: 800; }
.logo img { height: 34px; width: auto; }
.logo .logo-mark { height: 30px; display: none; }
.nav { display: flex; align-items: center; gap: 4px; margin-inline-end: auto; }
.nav > a, .nav > .nav-item > button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; font-weight: 600; color: var(--ax-ink-2); background: none; border: 0; font-size: var(--ax-fs-sm); }
.nav > a:hover, .nav > .nav-item > button:hover { background: var(--ax-surface); }
.nav-item { position: relative; }
.nav-item > button svg { width: 16px; height: 16px; transition: transform .15s; }
.nav-item.is-open > button svg { transform: rotate(180deg); }
.mega { position: absolute; top: calc(100% + 10px); right: 0; width: min(760px, calc(100vw - 40px)); background: var(--ax-paper); border: 1px solid var(--ax-line); border-radius: var(--ax-radius-l); box-shadow: var(--ax-shadow-l); padding: 14px; display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; z-index: 110; }
.nav-item.is-open .mega { display: grid; }
.mega a { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; color: var(--ax-ink); }
.mega a:hover { background: var(--ax-surface); }
.mega a b { font-size: var(--ax-fs-sm); }
.mega a span { color: var(--ax-muted); font-size: var(--ax-fs-xs); line-height: 1.6; }
.mega a .cost { margin-top: auto; font-size: var(--ax-fs-xs); font-weight: 700; color: var(--ax-brand-700); background: var(--ax-brand-50); padding: 4px 8px; border-radius: 6px; align-self: flex-start; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--ax-line); border-radius: 10px; background: var(--ax-paper); place-items: center; }
.burger svg { width: 22px; height: 22px; }
.mobile-nav { display: none; }
@media (max-width: 960px) {
  .nav, .header-actions .hide-mobile { display: none; }
  .burger { display: grid; margin-inline-start: auto; }
  .mobile-nav { position: fixed; inset: var(--ax-header-h) 0 0 0; background: var(--ax-paper); z-index: 99; padding: 16px var(--ax-gutter) 100px; overflow-y: auto; }
  .mobile-nav.is-open { display: block; }
  .mobile-nav a.mn { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--ax-line); color: var(--ax-ink); font-weight: 700; }
  .mobile-nav .mn-sub { padding: 8px 4px 16px; display: flex; flex-direction: column; gap: 4px; }
  .mobile-nav .mn-sub a { padding: 10px 12px; border-radius: 10px; color: var(--ax-ink); background: var(--ax-surface); font-size: var(--ax-fs-sm); display: flex; flex-direction: column; gap: 2px; }
  .mobile-nav .mn-sub a span { color: var(--ax-muted); font-size: var(--ax-fs-xs); }
  body.nav-open { overflow: hidden; }
}

/* header contact slots — render only when the settings hold a real value */
.hdr-contact { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; color: var(--ax-ink-2); font-size: var(--ax-fs-sm); font-weight: 700; }
.hdr-contact:hover { background: var(--ax-surface); color: var(--ax-brand-700); }
.hdr-contact svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 1100px) { .hdr-contact span { display: none; } }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta { position: fixed; bottom: 0; right: 0; left: 0; z-index: 90; padding: 10px var(--ax-gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border-top: 1px solid var(--ax-line); display: none; gap: 8px; transform: translateY(110%); transition: transform .25s; }
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { flex: 1; }
@media (max-width: 760px) { .sticky-cta { display: flex; } body.has-sticky-cta { padding-bottom: 76px; } }

/* ---------- footer ---------- */
.site-footer { background: var(--ax-ink); color: var(--ax-dark-muted); padding: 56px 0 32px; margin-top: 0; }
.site-footer a { color: #cbd2dc; }
.site-footer a:hover { color: #fff; }
.site-footer h4 { color: #fff; font-size: var(--ax-fs-sm); margin-bottom: 14px; text-transform: none; letter-spacing: .02em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--ax-fs-sm); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 30px; margin-bottom: 14px; }
.footer-bottom { border-top: 1px solid var(--ax-dark-line); margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--ax-fs-xs); }
.social { display: flex; gap: 10px; margin-top: 14px; }
.social a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--ax-dark-line); display: grid; place-items: center; }
.social a svg { width: 18px; height: 18px; }
.social a:hover { border-color: #fff; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(40px, 5vw + 16px, 88px) 0 clamp(40px, 4vw, 72px); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 420px at 85% -10%, var(--ax-brand-100), transparent 60%), radial-gradient(600px 300px at 10% 110%, #eef1f6, transparent 60%); pointer-events: none; }
.hero .container { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero .container > * { min-width: 0; }
@media (max-width: 960px) { .hero .container { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(1.9rem, 1.1rem + 3vw, 3.4rem); line-height: 1.2; margin-bottom: 16px; }
.hero h1 em { font-style: normal; color: var(--ax-brand); position: relative; white-space: nowrap; }
.hero .sub { font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); color: var(--ax-muted); max-width: 560px; margin-bottom: 24px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; color: var(--ax-ink-2); font-size: var(--ax-fs-sm); font-weight: 600; }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { width: 18px; height: 18px; color: var(--ax-success); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ax-fs-xs); font-weight: 700; color: var(--ax-brand-700); background: var(--ax-brand-50); border: 1px solid #d7e0ff; border-radius: 999px; padding: 6px 12px; margin-bottom: 16px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ax-brand); box-shadow: 0 0 0 4px var(--ax-brand-100); }

/* ---------- media / demo player ---------- */
.media { position: relative; border-radius: var(--ax-radius-xl); overflow: hidden; background: var(--ax-dark); box-shadow: var(--ax-shadow-l); aspect-ratio: 16 / 10; }
.media video, .media iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.media .play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(14,17,22,.1), rgba(14,17,22,.55)); color: #fff; border: 0; cursor: pointer; width: 100%; }
.media .play .play-btn { width: 68px; height: 68px; border-radius: 50%; background: #fff; color: var(--ax-ink); display: grid; place-items: center; box-shadow: var(--ax-shadow-l); transition: transform .15s; }
.media .play:hover .play-btn { transform: scale(1.06); }
.media .play .play-btn svg { width: 26px; height: 26px; margin-inline-start: 4px; }
.media .play .cap { position: absolute; bottom: 14px; right: 16px; font-size: var(--ax-fs-sm); font-weight: 600; background: rgba(14,17,22,.6); padding: 6px 10px; border-radius: 8px; }

/* ---------- simulated panel (live preview) ---------- */
.sim { background: var(--ax-dark); color: var(--ax-dark-text); border-radius: var(--ax-radius-xl); padding: 18px; box-shadow: var(--ax-shadow-l); position: relative; overflow: hidden; }
.sim::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 200px at 80% 0%, rgba(46,91,255,.25), transparent 70%); pointer-events: none; }
.sim-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; position: relative; }
.sim-top .dots { display: flex; gap: 6px; }
.sim-top .dots i { width: 10px; height: 10px; border-radius: 50%; background: #2A323E; display: block; }
.sim-top .sim-title { font-size: var(--ax-fs-xs); color: var(--ax-dark-muted); margin-inline-start: auto; }
.sim-log { background: var(--ax-dark-2); border: 1px solid var(--ax-dark-line); border-radius: 12px; overflow: hidden; position: relative; }
.sim-log-head { display: grid; grid-template-columns: 1.6fr 1fr .8fr .6fr; gap: 8px; padding: 8px 12px; font-size: 11px; color: var(--ax-dark-muted); border-bottom: 1px solid var(--ax-dark-line); }
.sim-row { display: grid; grid-template-columns: 1.6fr 1fr .8fr .6fr; gap: 8px; padding: 10px 12px; font-size: 12px; border-bottom: 1px solid rgba(42,50,62,.6); align-items: center; opacity: 0; transform: translateY(6px); animation: simIn .35s ease forwards; }
.sim-row:last-child { border-bottom: 0; }
.sim-row .st { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.sim-row .st i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.sim-row .st.ok { color: #4ade80; } .sim-row .st.err { color: #f87171; } .sim-row .st.pend { color: #fbbf24; }
.sim-row .st.need { color: var(--ax-dark-muted); }   /* deliberate hand-back, not a failure */
.sim-row .st.need i { background: var(--ax-dark-muted); }
.sim-row .st.pend i { animation: pulse 1s infinite; }
.sim-row .tk { font-variant-numeric: tabular-nums; text-align: left; direction: ltr; }
.sim-row .tk.zero { color: #f87171; font-weight: 800; }
.sim-row .mut { color: var(--ax-dark-muted); font-size: 11px; }
@keyframes simIn { to { opacity: 1; transform: none; } }
@keyframes pulse { 50% { opacity: .3; } }
.sim-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 11px; color: var(--ax-dark-muted); position: relative; }
.sim-foot b { color: #fff; }
.sim.is-light { background: var(--ax-paper); color: var(--ax-text); border: 1px solid var(--ax-line); box-shadow: var(--ax-shadow-m); }
.sim-chat { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--ax-dark-2); border: 1px solid var(--ax-dark-line); border-radius: 12px; min-height: 250px; position: relative; }
.bubble { max-width: 85%; padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.7; opacity: 0; animation: simIn .35s ease forwards; }
.bubble.user { background: var(--ax-brand); color: #fff; align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.bot { background: #222935; color: var(--ax-dark-text); align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble .pcard { display: flex; gap: 10px; align-items: center; margin-top: 8px; padding: 8px; background: #0E1116; border: 1px solid var(--ax-dark-line); border-radius: 10px; }
.bubble .pcard .img { width: 44px; height: 44px; border-radius: 8px; background: linear-gradient(135deg, #2E5BFF, #7C3AED); flex: none; }
.bubble .pcard b { display: block; font-size: 12px; }
.bubble .pcard small { color: var(--ax-dark-muted); }
.bubble .pcard .add { margin-inline-start: auto; background: #fff; color: var(--ax-ink); font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.typing { display: inline-flex; gap: 3px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ax-dark-muted); animation: pulse 1s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }

/* ---------- solution cards ---------- */
.sol-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--ax-line); border-radius: var(--ax-radius-xl); background: var(--ax-paper); transition: border-color .15s, box-shadow .15s, transform .15s; height: 100%; }
.sol-card:hover { border-color: var(--ax-ink); box-shadow: var(--ax-shadow-m); transform: translateY(-2px); }
.sol-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--ax-brand-50); color: var(--ax-brand); display: grid; place-items: center; border: 1px solid #d7e0ff; }
.sol-icon svg { width: 26px; height: 26px; }
.sol-card h3 { font-size: var(--ax-fs-xl); margin: 0; }
.sol-card p { color: var(--ax-muted); margin: 0; flex: 1; }
.cost-box { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--ax-surface); border: 1px dashed var(--ax-line-2); font-size: var(--ax-fs-sm); font-weight: 700; color: var(--ax-ink); }
.cost-box svg { width: 18px; height: 18px; color: var(--ax-brand); flex: none; }
.cost-box .soon { color: var(--ax-muted); font-weight: 600; }
.cost-box small { display: block; font-weight: 500; color: var(--ax-muted); }
.sol-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sol-actions .btn { flex: 1; }

/* ---------- before / after ---------- */
.ba { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 960px) { .ba { grid-template-columns: 1fr; } }
.ba-box { padding: 20px; border-radius: var(--ax-radius-l); border: 1px solid var(--ax-line); background: var(--ax-paper); }
.ba-box .ba-tag { display: inline-block; font-size: var(--ax-fs-xs); font-weight: 800; padding: 4px 10px; border-radius: 6px; margin-bottom: 10px; }
.ba-before .ba-tag { background: var(--ax-error-100); color: var(--ax-error-ink); }
.ba-after .ba-tag { background: var(--ax-success-100); color: var(--ax-success-ink); }
.ba-box .big { font-size: var(--ax-fs-2xl); font-weight: 800; line-height: 1.2; }
.ba-box p { color: var(--ax-muted); margin: 6px 0 0; font-size: var(--ax-fs-sm); }

/* ---------- calculator ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--ax-radius-xl); overflow: hidden; border: 1px solid var(--ax-line); box-shadow: var(--ax-shadow-m); }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
.calc-in { padding: 28px; background: var(--ax-paper); }
.calc-out { padding: 28px; background: var(--ax-dark); color: var(--ax-dark-text); display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.calc-out::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 220px at 90% -10%, rgba(46,91,255,.35), transparent 70%); pointer-events: none; }
.calc-out > * { position: relative; }
.calc-out .co-label { color: var(--ax-dark-muted); font-size: var(--ax-fs-sm); font-weight: 700; }
.calc-out .co-value { font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.6rem); font-weight: 800; color: #fff; line-height: 1.25; font-variant-numeric: tabular-nums; text-wrap: balance; }
.calc-out .co-value small { display: block; font-size: .42em; color: var(--ax-dark-muted); font-weight: 700; margin-top: 4px; }
.calc-out .co-formula { font-size: var(--ax-fs-sm); color: var(--ax-dark-muted); background: rgba(255,255,255,.05); border: 1px solid var(--ax-dark-line); border-radius: 10px; padding: 10px 12px; }
.calc-out .co-plan { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: var(--ax-dark-2); border: 1px solid var(--ax-dark-line); }
.calc-out .co-plan b { color: #fff; font-size: var(--ax-fs-lg); }
.calc-out .co-plan small { color: var(--ax-dark-muted); display: block; }
.calc-out .co-plan s { color: var(--ax-dark-muted); font-weight: 500; font-size: var(--ax-fs-sm); margin-inline-end: 6px; }
.calc-out .co-note { font-size: var(--ax-fs-xs); color: var(--ax-dark-muted); display: flex; gap: 6px; align-items: center; }
.calc-out .co-note svg { width: 16px; height: 16px; color: #4ade80; }
.calc-out .btn-primary { background: #fff; color: var(--ax-ink); border-color: #fff; }
.calc-out .btn-primary:hover { background: var(--ax-brand-100); }
.calc-out .co-trial { font-size: var(--ax-fs-xs); color: var(--ax-dark-muted); }
.calc-out .co-sub { font-size: var(--ax-fs-sm); font-weight: 700; color: var(--ax-dark-muted); font-variant-numeric: tabular-nums; margin-top: -8px; }
.calc-out .co-sub:empty { display: none; }
.calc-out .co-hint { font-size: var(--ax-fs-xs); color: var(--ax-dark-muted); line-height: 1.6; }
.range-row { display: flex; align-items: center; gap: 12px; }
.range-row .input { width: 110px; text-align: center; font-weight: 700; direction: ltr; }
.calc-in .field { margin-bottom: 20px; }

/* ---------- panel preview (marketing) ---------- */
.pp { display: grid; grid-template-columns: 220px 1fr; border: 1px solid var(--ax-line); border-radius: var(--ax-radius-xl); overflow: hidden; background: var(--ax-paper); box-shadow: var(--ax-shadow-m); }
@media (max-width: 760px) { .pp { grid-template-columns: 1fr; } .pp-side { display: none; } }
.pp-side { background: var(--ax-surface); border-inline-start: 1px solid var(--ax-line); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.pp-side a { padding: 10px 12px; border-radius: 10px; color: var(--ax-ink-2); font-size: var(--ax-fs-sm); font-weight: 600; display: flex; gap: 10px; align-items: center; }
.pp-side a svg { width: 18px; height: 18px; color: var(--ax-muted); }
.pp-side a.is-active { background: var(--ax-paper); color: var(--ax-ink); box-shadow: var(--ax-shadow-s); }
.pp-main { padding: 18px; }

/* ---------- pricing / plans ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--ax-line); border-radius: var(--ax-radius-xl); background: var(--ax-paper); transition: border-color .15s, box-shadow .15s; }
.plan:hover { border-color: var(--ax-ink); }
.plan.is-suggested { border-color: var(--ax-brand); box-shadow: 0 0 0 3px var(--ax-brand-100); }
.plan .plan-tag { position: absolute; top: -12px; right: 18px; background: var(--ax-brand); color: #fff; font-size: var(--ax-fs-xs); font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.plan .plan-tokens { font-size: var(--ax-fs-3xl); font-weight: 800; line-height: 1; color: var(--ax-ink); font-variant-numeric: tabular-nums; }
.plan .plan-unit { color: var(--ax-muted); font-size: var(--ax-fs-sm); font-weight: 700; }
.plan .plan-price { font-size: var(--ax-fs-xl); font-weight: 800; margin-top: 8px; }
.plan .plan-price s { color: var(--ax-muted); font-weight: 500; font-size: var(--ax-fs-sm); margin-inline-end: 8px; }
.plan .plan-sale-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--ax-error-100); color: var(--ax-error-ink); font-size: var(--ax-fs-xs); font-weight: 800; padding: 2px 8px; border-radius: 999px; margin-inline-end: 8px; vertical-align: middle; }
.plan .plan-sale-tag svg { width: 12px; height: 12px; }
.plan .plan-per { color: var(--ax-muted); font-size: var(--ax-fs-xs); }
.plan .plan-covers { font-size: var(--ax-fs-sm); color: var(--ax-muted); border-top: 1px dashed var(--ax-line); padding-top: 10px; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.plan .btn { margin-top: auto; }
.plan.is-selectable { cursor: pointer; }
.plan.is-selected { border-color: var(--ax-ink); background: var(--ax-brand-50); box-shadow: 0 0 0 3px var(--ax-brand-100); }

/* e-namad / trust seal slot (footer) — empty setting ⇒ nothing renders */
.footer-trust { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 18px 0 0; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.12); }
.footer-trust img { max-height: 90px; width: auto; background: #fff; border-radius: 8px; padding: 4px; }

/* ---------- hero: "one product, from publish to sale" ----------
   One <ol> rendered two ways: a cross-fading deck (motion allowed) and a static
   strip (prefers-reduced-motion). The captions are never duplicated in the DOM. */
.hero-micro { font-size: var(--ax-fs-sm); color: var(--ax-muted); font-weight: 600; margin: 0; }
.hero-flow { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.hf-label { display: flex; align-items: center; gap: 8px; font-size: var(--ax-fs-xs); color: var(--ax-muted); font-weight: 600; }
.hf-badge { background: var(--ax-pending-100); color: var(--ax-pending-ink); border-radius: 6px; padding: 3px 8px; font-weight: 800; }
/* min-width:0 — aspect-ratio + min-height would otherwise give this an automatic
   minimum width of 264 × 1.6 = 422px and blow out the grid at 390px */
.hf-frame { position: relative; width: 100%; min-width: 0; aspect-ratio: 16 / 10; min-height: 264px; border-radius: var(--ax-radius-xl); background: var(--ax-dark); box-shadow: var(--ax-shadow-l); overflow: hidden; padding: clamp(20px, 3vw, 32px); display: grid; grid-template-rows: 1fr auto; }
.hf-frame::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 260px at 85% -10%, rgba(46,91,255,.4), transparent 70%); pointer-events: none; }
.hf-list { position: relative; margin: 0; padding: 0; list-style: none; display: grid; }
/* every step shares one grid cell, so the tallest caption sets the height once */
.hf-step { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease; pointer-events: none; }
.hf-step.is-on { opacity: 1; transform: none; }
.hf-step .hf-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hf-step .hf-ic { width: 60px; height: 60px; flex: none; border-radius: 18px; display: grid; place-items: center; background: rgba(46,91,255,.16); border: 1px solid rgba(46,91,255,.45); color: #9db4ff; }
.hf-step .hf-ic svg { width: 30px; height: 30px; }
.hf-step .hf-cap { color: #fff; font-size: clamp(1rem, .92rem + .5vw, 1.35rem); font-weight: 700; line-height: 1.5; text-wrap: balance; }
.hf-rail { position: relative; display: flex; gap: 6px; align-items: center; }
.hf-rail i { height: 4px; flex: 1; border-radius: 999px; background: var(--ax-dark-line); transition: background .4s ease; }
.hf-rail i.is-on { background: var(--ax-brand); }

/* «به‌زودی» badge — anywhere a not-yet-released product is named */
.soon-badge { display: inline-block; margin-inline-start: 6px; padding: 2px 8px; border-radius: 999px; background: var(--ax-pending-100); color: var(--ax-pending-ink); font-size: var(--ax-fs-xs); font-weight: 800; line-height: 1.6; }
.mega .soon-badge, .mn-sub .soon-badge, .fn-chips .soon-badge { vertical-align: middle; }

/* "who it is for" line under a product hero */
.sol-audience { display: inline-flex; align-items: center; gap: 8px; margin: -8px 0 20px; font-size: var(--ax-fs-sm); font-weight: 700; color: var(--ax-brand-700); background: var(--ax-brand-50); border: 1px solid #d7e0ff; border-radius: 999px; padding: 7px 14px; }
.sol-audience svg { width: 16px; height: 16px; flex: none; }

/* ---------- funnel section (homepage #solutions) ---------- */
.fn-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; counter-reset: none; }
.fn-rail li { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n label" "n problem"; gap: 2px 10px; align-items: center; padding: 14px 16px; border-radius: var(--ax-radius-l); background: var(--ax-surface); border: 1px solid var(--ax-line); }
.fn-rail .fn-n { grid-area: n; width: 28px; height: 28px; border-radius: 50%; background: var(--ax-ink); color: #fff; font-weight: 800; font-size: var(--ax-fs-sm); display: grid; place-items: center; }
.fn-rail b { grid-area: label; font-size: var(--ax-fs-md); }
.fn-rail .fn-p { grid-area: problem; color: var(--ax-muted); font-size: var(--ax-fs-xs); line-height: 1.5; }
@media (max-width: 760px) { .fn-rail { grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px; } }
.fn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fn-chip { font-size: var(--ax-fs-xs); font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--ax-brand-50); color: var(--ax-brand-700); border: 1px solid #d7e0ff; }
.fn-card { gap: 12px; }
.fn-manual { display: flex; align-items: center; gap: 8px; margin: 0 !important; flex: none !important; font-size: var(--ax-fs-sm); font-weight: 600; color: var(--ax-muted) !important; background: var(--ax-surface); border-radius: 10px; padding: 10px 12px; }
.fn-manual svg { width: 18px; height: 18px; flex: none; color: var(--ax-muted-2); }
.cost-box.cost-manual { font-weight: 600; color: var(--ax-muted); background: var(--ax-paper); }
.cost-box.cost-manual svg { color: var(--ax-muted-2); }
.fn-benefit { display: flex; align-items: center; gap: 8px; margin: 0 !important; flex: none !important; font-size: var(--ax-fs-sm); font-weight: 700; color: var(--ax-success-ink) !important; background: var(--ax-success-100); border-radius: 10px; padding: 10px 12px; }
.fn-benefit svg { width: 18px; height: 18px; flex: none; color: var(--ax-success); }

/* ---------- testimonials (behind setting show_testimonials) ---------- */
.tst-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tst { margin: 0; padding: 22px; border-radius: var(--ax-radius-l); background: var(--ax-paper); border: 1px solid var(--ax-line); display: flex; flex-direction: column; gap: 14px; }
.tst blockquote { margin: 0; font-size: var(--ax-fs-md); line-height: 1.8; color: var(--ax-ink-2); }
.tst figcaption { display: flex; flex-direction: column; gap: 2px; font-size: var(--ax-fs-sm); }
.tst figcaption b { color: var(--ax-ink); }
.tst figcaption span { color: var(--ax-muted); font-size: var(--ax-fs-xs); }
.tst-metric { align-self: flex-start; font-weight: 800; color: var(--ax-success-ink); background: var(--ax-success-100); border-radius: 6px; padding: 3px 8px; margin-bottom: 4px; }

/* ---------- misc marketing ---------- */
.counter-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.counter-band.counter-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .counter-band.counter-3 { grid-template-columns: 1fr; } }
.counter { text-align: center; padding: 18px 12px; border-radius: var(--ax-radius-l); background: var(--ax-paper); border: 1px solid var(--ax-line); }
.counter .cv { font-size: var(--ax-fs-2xl); font-weight: 800; color: var(--ax-ink); font-variant-numeric: tabular-nums; }
.counter .cl { color: var(--ax-muted); font-size: var(--ax-fs-sm); }
.feature { display: flex; gap: 14px; align-items: flex-start; }
.feature .f-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--ax-brand-50); color: var(--ax-brand); display: grid; place-items: center; flex: none; border: 1px solid #d7e0ff; }
.feature .f-ic svg { width: 20px; height: 20px; }
.feature h4 { margin: 0 0 4px; font-size: var(--ax-fs-md); }
.feature p { color: var(--ax-muted); font-size: var(--ax-fs-sm); margin: 0; }
.cta-band { background: var(--ax-ink); color: #fff; border-radius: var(--ax-radius-xl); padding: clamp(32px, 4vw, 56px); text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 50% 120%, rgba(46,91,255,.4), transparent 70%); pointer-events: none; }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--ax-dark-muted); font-size: var(--ax-fs-lg); }
.cta-band .btn-primary { background: #fff; color: var(--ax-ink); border-color: #fff; }
.cta-band .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.cta-band .btn-secondary:hover { border-color: #fff; }
.prose { max-width: 760px; }
.prose h2 { margin-top: 2em; font-size: var(--ax-fs-xl); }
.prose h3 { margin-top: 1.6em; font-size: var(--ax-fs-lg); }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li { margin-bottom: .4em; }
.prose img { border-radius: var(--ax-radius-l); border: 1px solid var(--ax-line); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--ax-fs-sm); }
.prose th, .prose td { border: 1px solid var(--ax-line); padding: 8px 10px; text-align: right; }
.prose th { background: var(--ax-surface); }
.prose pre { background: var(--ax-ink); color: #fff; padding: 14px; border-radius: 10px; overflow-x: auto; direction: ltr; text-align: left; font-size: var(--ax-fs-sm); }
.prose code:not(pre code) { background: var(--ax-surface-2); padding: 2px 6px; border-radius: 4px; direction: ltr; unicode-bidi: embed; }
.prose blockquote { margin: 1.2em 0; padding: 12px 16px; border-inline-start: 3px solid var(--ax-brand); background: var(--ax-brand-50); border-radius: 0 10px 10px 0; color: var(--ax-ink-2); }
.toc { position: sticky; top: calc(var(--ax-header-h) + 16px); font-size: var(--ax-fs-sm); }
.toc a { display: block; padding: 6px 10px; color: var(--ax-muted); border-inline-start: 2px solid var(--ax-line); }
.toc a:hover, .toc a.is-active { color: var(--ax-ink); border-color: var(--ax-ink); }
.docs-layout { display: grid; grid-template-columns: 240px 1fr; gap: 40px; }
@media (max-width: 860px) { .docs-layout { grid-template-columns: 1fr; } .toc { position: static; } }
.compat { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.compat div { padding: 14px; border: 1px solid var(--ax-line); border-radius: 12px; background: var(--ax-paper); }
.compat div small { display: block; color: var(--ax-muted); font-size: var(--ax-fs-xs); }
.compat div b { font-size: var(--ax-fs-lg); }
.breadcrumb { display: flex; gap: 8px; font-size: var(--ax-fs-sm); color: var(--ax-muted); margin-bottom: 12px; flex-wrap: wrap; }
.breadcrumb a { color: var(--ax-muted); }
.breadcrumb a:hover { color: var(--ax-ink); }
.dl-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--ax-muted); font-size: var(--ax-fs-sm); }
.dl-meta b { color: var(--ax-ink); }
.empty { text-align: center; padding: 48px 20px; color: var(--ax-muted); border: 1px dashed var(--ax-line-2); border-radius: var(--ax-radius-l); background: var(--ax-paper); }
.empty svg { width: 44px; height: 44px; margin: 0 auto 12px; color: var(--ax-muted-2); }
.empty h3 { color: var(--ax-ink); font-size: var(--ax-fs-lg); margin-bottom: 6px; }
.empty p { margin-bottom: 16px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ax-brand-100); color: var(--ax-brand-700); display: grid; place-items: center; font-weight: 800; font-size: var(--ax-fs-sm); flex: none; }

/* ---------- auth pages ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-main { display: flex; flex-direction: column; padding: 24px var(--ax-gutter); }
.auth-card { width: 100%; max-width: 440px; margin: auto; }
.auth-card h1 { font-size: var(--ax-fs-2xl); margin-bottom: 8px; }
.auth-card .lead { font-size: var(--ax-fs-md); margin-bottom: 24px; }
.auth-side { background: var(--ax-ink); color: var(--ax-dark-text); padding: 48px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.auth-side::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 400px at 20% 20%, rgba(46,91,255,.35), transparent 70%); }
.auth-side > * { position: relative; }
.auth-side h2 { color: #fff; }
.auth-side ul { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 12px; color: #cbd2dc; }
.auth-side li { display: flex; gap: 10px; align-items: flex-start; }
.auth-side li svg { width: 20px; height: 20px; color: #4ade80; flex: none; margin-top: 3px; }
.auth-top { display: flex; justify-content: space-between; align-items: center; }
/* Mobile override MUST come after the .auth-side base rule above: both are single-class
   selectors (equal specificity), so with the override first (as it used to be) the later,
   unconditional `display: flex` on .auth-side always won the cascade tie and the panel never
   actually hid on mobile — same "later rule wins at equal specificity" trap documented near
   .panel-page [hidden] below. Keeping this last is what makes it win. */
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-side { display: none; } }

/* ---------- panel layout ---------- */
/* UA default `[hidden] { display: none }` is author-overridable: any panel component rule that
   sets `display` on the same element (`.grid`, `.row`, …) wins over it even at equal specificity,
   because author CSS always beats the UA stylesheet regardless of selector weight — same bug class
   as the copilot typing indicator/drawer fix below. Module sub-settings (`.module-card-sub.grid`)
   hit this: toggling a module off left its `hidden` attribute set but the card stayed visible.
   Force `[hidden]` to win everywhere inside the panel instead of patching each component. */
.panel-page [hidden] { display: none !important; }
.panel { min-height: 100vh; display: grid; grid-template-columns: auto 1fr; background: var(--ax-surface); }
@media (max-width: 960px) { .panel { grid-template-columns: 1fr; } }
/* `auto` (not a fixed track) so the rail-collapse below can just change .sidebar's own width —
   Wave 56 (brief-56-flow-ux.md #3) — and the grid column follows it with no JS touching .panel. */
.sidebar { width: var(--ax-sidebar-w); background: var(--ax-paper); border-inline-start: 1px solid var(--ax-line); position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; transition: width .16s; }
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }
.sidebar-backdrop { display: none; }
@media (max-width: 960px) { .sidebar { position: fixed; inset: 0 auto 0 0; right: 0; left: auto; width: min(320px, 85vw); z-index: 120; transform: translateX(105%); transition: transform .25s; box-shadow: var(--ax-shadow-l); } .sidebar.is-open { transform: none; } .sidebar-backdrop.is-open { display: block; position: fixed; inset: 0; background: rgba(14,17,22,.4); z-index: 119; } }
.sidebar .logo { padding: 6px 8px 14px; }
.sidebar .sb-group { font-size: var(--ax-fs-xs); font-weight: 700; color: var(--ax-muted-2); padding: 14px 10px 6px; }
.sidebar a.sb, .sidebar summary.sb { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ax-ink-2); font-weight: 600; font-size: var(--ax-fs-sm); }
.sidebar a.sb svg, .sidebar summary.sb svg { width: 20px; height: 20px; color: var(--ax-muted); flex: none; }
.sidebar a.sb:hover, .sidebar summary.sb:hover { background: var(--ax-surface); }
.sidebar a.sb.is-active { background: var(--ax-ink); color: #fff; }
.sidebar a.sb.is-active svg { color: #fff; }
/* Wave 12F — the tenant panel is monochrome; badge counts/tags inside it (sidebar nav count,
   billing's «پرفروش‌ترین» plan tag) go ink instead of the shared site-wide .badge's brand
   blue, which stays as-is for admin/marketing use outside the panel. */
.sidebar a.sb .badge { margin-inline-start: auto; }
/* Wave 12J — «تماس ورودی»/«تماس خروجی» as expandable parent rows: the row itself is a <summary
   class="sb"> (identical look to a plain .sb item, incl. hover/svg rules above), followed by a
   <div class="sb-children"> of ordinary .sb links. No .is-active pill on the parent — only a
   bold hint when a child is active (never both the pill and the bold hint at once since the
   parent carries no href of its own). */
.sidebar details.sb-parent { display: flex; flex-direction: column; }
.sidebar details.sb-parent > summary { list-style: none; cursor: pointer; user-select: none; }
.sidebar details.sb-parent > summary::-webkit-details-marker { display: none; }
.sidebar summary.sb .sb-chev { width: 14px; height: 14px; margin-inline-start: auto; color: var(--ax-muted); transition: transform .15s; flex: none; }
.sidebar details.sb-parent[open] > summary .sb-chev { transform: rotate(180deg); }
.sidebar summary.sb.sb-has-active { font-weight: 800; color: var(--ax-ink); }
.sidebar summary.sb.sb-has-active svg:first-child { color: var(--ax-ink); opacity: 1; }
.sidebar .sb-children { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; padding-inline-start: 14px; }
.sidebar .sb-children a.sb { font-size: 13px; }
.panel-page .badge { background: var(--ax-ink); color: #fff; }

/* ---- Wave 56 (brief-56-flow-ux.md #3): main nav collapses to a 56px icon rail while the flow
   panel is open (owner: «وقتی فلوچارت باز می‌شه، بهتره سایدبار راست و چپ بسته شن»). Desktop
   only (min-width:961px matches the sidebar's own 960px mobile cutoff above) — the mobile
   off-canvas sidebar is untouched either way. `body.is-flow-open` is toggled by copilot.js
   (openFlowpane/closeFlowpane); `.is-rail-pinned-open` by the chevron below, click-only, never
   remembered. Tooltips on every icon are the plain `title` attribute panel.php now sets. ---- */
.sb-rail-pin { display: none; }
@media (min-width: 961px) {
  body.is-flow-open .sidebar:not(.is-rail-pinned-open) { width: 56px; padding-inline: 8px; }
  body.is-flow-open .sidebar:not(.is-rail-pinned-open) .sb-rail-pin {
    display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    margin: 0 auto 4px; border: 1px solid var(--ax-line); border-radius: 8px; background: var(--ax-paper);
    color: var(--ax-muted); cursor: pointer;
  }
  body.is-flow-open .sidebar:not(.is-rail-pinned-open) .sb-rail-pin svg { width: 14px; height: 14px; }
  body.is-flow-open .sidebar:not(.is-rail-pinned-open) .sb-rail-pin:hover { border-color: var(--ax-ink); color: var(--ax-ink); }
  body.is-flow-open .sidebar:not(.is-rail-pinned-open) .logo { justify-content: center; padding-inline: 0; }
  body.is-flow-open .sidebar:not(.is-rail-pinned-open) .logo img { display: none; }
  body.is-flow-open .sidebar:not(.is-rail-pinned-open) .logo-mark-rail {
    display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border-radius: 8px; background: var(--ax-ink); color: #fff; font-weight: 800; font-size: 13px;
  }
  [data-theme="dark"] body.is-flow-open .sidebar:not(.is-rail-pinned-open) .logo-mark-rail { background: #fff; color: #0E1116; }
  body.is-flow-open .sidebar:not(.is-rail-pinned-open) .sb-group { display: none; }
  body.is-flow-open .sidebar:not(.is-rail-pinned-open) a.sb,
  body.is-flow-open .sidebar:not(.is-rail-pinned-open) summary.sb { justify-content: center; padding: 10px 0; gap: 0; }
  body.is-flow-open .sidebar:not(.is-rail-pinned-open) .sb-label,
  body.is-flow-open .sidebar:not(.is-rail-pinned-open) .sb-chev,
  body.is-flow-open .sidebar:not(.is-rail-pinned-open) a.sb .badge { display: none; }
  /* flatten: children render as plain icon rows, same look as top-level items (no indent) —
     <details> stays [open] in the markup already, so .sb-children was always visible; this
     just drops the nested look. */
  body.is-flow-open .sidebar:not(.is-rail-pinned-open) .sb-children { padding-inline-start: 0; }
  body.is-flow-open .sidebar:not(.is-rail-pinned-open) .sb-user > div:not(.avatar),
  body.is-flow-open .sidebar:not(.is-rail-pinned-open) .sb-bottom form { display: none; }
  body.is-flow-open .sidebar:not(.is-rail-pinned-open) .sb-user { justify-content: center; padding-inline: 0; }
}
.logo-mark-rail { display: none; }
/* topbar credit pill (the sidebar itself carries no credit mini-card — just the user block
   below); kept from the sidebar redesign since it's a genuinely useful addition. */
.credit-pill { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--ax-surface); color: var(--ax-ink); font-weight: 700; font-size: var(--ax-fs-sm); white-space: nowrap; }
.credit-pill b { font-variant-numeric: tabular-nums; }
[data-theme="dark"] .credit-pill { background: var(--ax-surface-2); }
.sidebar .sb-bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ax-line); }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.sb-user b { font-size: var(--ax-fs-sm); display: block; }
.sb-user small { color: var(--ax-muted); font-size: var(--ax-fs-xs); }
.panel-main { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 clamp(16px, 2vw, 32px); background: var(--ax-paper); border-bottom: 1px solid var(--ax-line); position: sticky; top: 0; z-index: 50; }
@media (max-width: 760px) { .topbar { gap: 8px; padding-inline: 12px; } }
.topbar h1 { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ax-fs-lg); margin: 0; }
.topbar .tb-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ax-line); background: var(--ax-paper); display: grid; place-items: center; position: relative; color: var(--ax-ink); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .badge { position: absolute; top: -6px; left: -6px; }
.icon-btn:hover { border-color: var(--ax-ink); }
/* sidebar toggle must appear whenever the sidebar itself goes off-canvas (960px, see .panel below) —
   not at the generic .hide-desktop 761px cutoff, or 761-960px viewports (e.g. phones in landscape)
   get no way to open the nav */
[data-sidebar-toggle] { display: none; }
@media (max-width: 960px) { [data-sidebar-toggle] { display: grid; } }
.panel-body { padding: clamp(16px, 2vw, 32px); display: flex; flex-direction: column; gap: 20px; }
/* Wave 17 — /app/copilot: the full-bleed chat page. panel.php adds this class when
   $page['full_bleed'] is set; it strips .panel-body's own padding/gap entirely (the chat
   fills the exact remaining height itself — no page scroll, only .copilot-messages scrolls)
   and switches it from a flex COLUMN of stacked cards to a plain block, since its one child
   (.copilot-shell) manages its own internal layout. 64px below = .topbar's fixed height. */
/* Wave 54 (brief-54-flow-panel.md): `is-full-bleed` is used ONLY by the copilot page (the sole
   controller setting `full_bleed` is Copilot::page()). The side flow panel (`.copilot-flowpane`)
   and the thread list (`.copilot-threads`) both live INSIDE `.copilot-shell` itself (a flex ROW,
   see `.copilot-shell` below) — `.copilot-shell` is the single element views/app/copilot.php
   renders as $content here, so it alone needs to sit flush and fill the available height;
   nothing about that requires THIS wrapper to be a row too.
   Bugfix (2026-10-13, brief-59 follow-up): this WAS `flex-direction: row`, which is only correct
   when `.copilot-shell` is the sole child. Once the voice-health banner (`.voice-health-banner`)
   is also rendered here (panel.php, ABOVE $content in document order), a row direction placed it
   beside the chat as a tall side column instead of a strip on top. Column is correct for both
   cases: with no banner, a single flex child behaves the same either way; with a banner, column
   stacks it above `.copilot-shell` — and since `.copilot-shell` already sets its own
   `min-height: 0`, it still shrinks to exactly the remaining height (flex-shrink does the work;
   see `.voice-health-banner`'s `flex: none` below, which keeps the banner itself from shrinking). */
.panel-body.is-full-bleed { padding: 0; display: flex; flex-direction: column; gap: 0; height: calc(100vh - 64px); overflow: hidden; }
.panel-body.is-full-bleed > .copilot-shell { flex: 1 1 auto; min-width: 0; height: 100%; }
/* Wave 59 (brief-59-voice-health.md): one-line "سیما degraded" strip. Monochrome per house rule —
   muted grey surface/border, no color accents. `svg{width/height:18px}` fixes the bug where the
   bare icon() SVG (no width/height attribute anywhere) rendered at the browser's unsized-SVG
   fallback (effectively huge). `flex: none` keeps this from being shrunk by its full-bleed-page
   flex parent (see `.panel-body.is-full-bleed` above) — `.copilot-shell` absorbs 100% of that. */
.voice-health-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--ax-line); border-radius: 12px; background: var(--ax-surface); flex: none; }
.voice-health-banner svg { width: 18px; height: 18px; flex: none; }
.panel-body.is-full-bleed > .voice-health-banner { margin: 16px 24px 0; }
/* Admin-support "log in as this tenant" banner (panel.php, $supportAdminId). Same shell as
   .voice-health-banner above — flex row, same padding/gap/radius, flex: none under the full-bleed
   layout for the same reason — but solid black/white (literal #0E1116/#fff, NOT var(--ax-ink):
   that token flips to near-white in [data-theme="dark"] below, same as .btn-primary's own
   dark-mode override, so the var alone would go white-on-white there) instead of the muted grey
   surface/border, so it reads as the one banner that must never be missed and looks identical in
   both themes. Still strictly monochrome per house rule: no color accent, just ink inverted. */
.support-session-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid #0E1116; border-radius: 12px; background: #0E1116; color: #fff; flex: none; }
.support-session-banner-msg { display: flex; align-items: center; gap: 10px; }
.support-session-banner svg { width: 18px; height: 18px; flex: none; }
.support-session-banner .btn-ghost { color: #fff; }
.support-session-banner .btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.panel-body.is-full-bleed > .support-session-banner { margin: 16px 24px 0; }
/* Wave 59 fix: views/components/copilot.php's own in-thread note (`.copilot-health-note`, page +
   drawer modes) carries the same bug — same unsized icon, no flex row to keep it on one line.
   Smaller icon than the banner (16px) since this note sits inline above the messages, not as its
   own bordered strip. */
.copilot-health-note { display: flex; align-items: center; gap: 6px; }
.copilot-health-note svg { width: 16px; height: 16px; flex: none; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
/* single-column form pages (agent/business/…): the card holding the form, capped so a 2-3 field
   form doesn't stretch to the full 1120px panel-body width. */
.form-narrow { max-width: 720px; }
/* two-column "list + form" pages (knowledge, services, orders, …): list gets the bigger share. */
.grid-list-form { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 900px) { .grid-list-form { grid-template-columns: 1fr; } }
.page-head h1 { font-size: var(--ax-fs-2xl); margin: 0; }
.page-head p { color: var(--ax-muted); margin: 4px 0 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar .input { min-height: 40px; width: auto; }
.toolbar .btn { min-height: 40px; }
.site-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--ax-line); border-radius: var(--ax-radius-l); background: var(--ax-paper); transition: border-color .15s; }
.site-row:hover { border-color: var(--ax-ink); }
.site-row .site-fav { width: 40px; height: 40px; border-radius: 10px; background: var(--ax-surface); display: grid; place-items: center; font-weight: 800; color: var(--ax-brand); flex: none; }
.site-row .site-name { min-width: 0; flex: 1 1 140px; overflow: hidden; }
.site-row .site-name b { display: block; direction: ltr; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-row .site-name small { color: var(--ax-muted); }
.site-row .site-bal { margin-inline-start: auto; text-align: left; flex: none; }
.site-row .site-bal b { display: block; font-size: var(--ax-fs-lg); font-variant-numeric: tabular-nums; }
.site-row .site-bal small { color: var(--ax-muted); font-size: var(--ax-fs-xs); }
/* domain (unbreakable LTR string) + product dots + balance no longer fit on one line on
   real phone widths once a site has a few active products — the row overflowed horizontally.
   site-name now shrinks/ellipsizes, and below 480px the product dots drop to their own line. */
@media (max-width: 480px) {
  .site-row { flex-wrap: wrap; }
  .site-row .site-bal { order: 2; }
  .site-row .prod-dots { order: 3; flex: 0 0 100%; margin-inline-start: 54px; margin-top: 2px; }
}
.prod-dots { display: flex; gap: 6px; }
.prod-dot { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--ax-surface-2); color: var(--ax-muted-2); }
.prod-dot.is-on { background: var(--ax-success-100); color: var(--ax-success); }
.prod-dot svg { width: 14px; height: 14px; }
.op-row { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--ax-line); font-size: var(--ax-fs-sm); }
.op-row:last-child { border-bottom: 0; }
.op-row .op-st { width: 10px; height: 10px; border-radius: 50%; }
.op-row .op-st.ok { background: var(--ax-success); } .op-row .op-st.error { background: var(--ax-error); } .op-row .op-st.warning { background: var(--ax-pending); }
.op-row .op-title b { display: block; }
.op-row .op-title small { color: var(--ax-muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.op-row .op-tok { font-weight: 800; font-variant-numeric: tabular-nums; direction: ltr; }
.op-row .op-tok.zero { color: var(--ax-error-ink); }
.op-row .op-at { color: var(--ax-muted); font-size: var(--ax-fs-xs); white-space: nowrap; }
@media (max-width: 600px) { .op-row { grid-template-columns: 16px 1fr auto; } .op-row .op-at { grid-column: 2 / -1; } }
.bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding: 8px 0; }
.bar-chart .bar { flex: 1; background: var(--ax-brand-100); border-radius: 4px 4px 0 0; position: relative; min-width: 4px; }
.bar-chart .bar > i { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 4px 4px 0 0; }
.bar-chart .bar:hover { outline: 2px solid var(--ax-ink); }
.bar-chart .bar[title] { cursor: help; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--ax-fs-xs); color: var(--ax-muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: middle; }
/* usage-chart colours, one per product slug (`c-<slug>`); add a line when a product is added */
.c-price-stock { background: #2E5BFF; } .c-seo { background: #16A34A; } .c-content { background: #7C3AED; }
.c-chatbot { background: #0EA5E9; } .c-wallet { background: #94A3B8; }
.c-price { background: #2E5BFF; }   /* legacy alias */
.timeline { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--ax-line); }
.timeline li { position: relative; padding: 0 20px 18px; }
.timeline li::before { content: ""; position: absolute; right: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--ax-paper); border: 2px solid var(--ax-brand); }
.timeline li small { display: block; color: var(--ax-muted); font-size: var(--ax-fs-xs); }
.msg { padding: 12px 14px; border-radius: 12px; background: var(--ax-surface); max-width: 80%; font-size: var(--ax-fs-sm); }
.msg.is-staff { background: var(--ax-brand-50); border: 1px solid #d7e0ff; margin-inline-start: auto; }
.msg small { display: block; color: var(--ax-muted); font-size: var(--ax-fs-xs); margin-top: 6px; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kanban-col { background: var(--ax-surface-2); border-radius: var(--ax-radius-l); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.kanban-col h4 { font-size: var(--ax-fs-xs); color: var(--ax-muted); margin: 4px 6px 6px; display: flex; justify-content: space-between; }
.lead-card { background: var(--ax-paper); border: 1px solid var(--ax-line); border-radius: 12px; padding: 10px 12px; font-size: var(--ax-fs-sm); display: block; color: var(--ax-ink); }
.lead-card b { display: block; }
.lead-card small { color: var(--ax-muted); display: block; font-size: var(--ax-fs-xs); }
.lead-card.is-due { border-color: var(--ax-error); }
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.pagination a, .pagination span { min-width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--ax-line); color: var(--ax-ink); padding: 0 8px; font-size: var(--ax-fs-sm); }
.pagination .is-active { background: var(--ax-ink); color: #fff; border-color: var(--ax-ink); }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: var(--ax-fs-sm); margin: 0; }
.dl dt { color: var(--ax-muted); }
.dl dd { margin: 0; font-weight: 600; }
.copy-field { display: flex; gap: 6px; }
.copy-field .input { direction: ltr; text-align: left; font-family: ui-monospace, monospace; font-size: var(--ax-fs-sm); }
/* the shared number on the line page: it's the one thing on that page a tenant actually needs to
   read out loud or copy, so it gets real size instead of the default compact copy-field. */
.copy-field.is-lg .input { font-size: var(--ax-fs-2xl); font-weight: 800; min-height: 56px; letter-spacing: .02em; }

/* ---------- dashboard hero row (setup checklist + stat tiles, equal height) ---------- */
.dash-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .dash-row { grid-template-columns: 1fr; } }
.setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); }
@media (max-width: 560px) { .setup-grid { grid-template-columns: 1fr; } }
.setup-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; color: inherit; text-decoration: none; font-size: var(--ax-fs-sm); font-weight: 600; }
.setup-row:hover { color: var(--ax-ink); }
/* Done = ink check + muted text, no strike-through (the line-through read as "broken", not
   "done"). Pending = hollow circle + normal (inherited) text — monochrome throughout, so the
   dot no longer borrows --ax-success green for either state. */
.setup-row.is-done { color: var(--ax-muted); }
.setup-dot { flex: none; width: 18px; text-align: center; color: var(--ax-muted-2); }
.setup-row.is-done .setup-dot { color: var(--ax-ink); }
.dash-stats { display: flex; flex-direction: column; }
.stat-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--ax-line); }
.stat-row:last-child { border-bottom: 0; }
.stat-row small { flex: 1; min-width: 0; }
.stat-row .stat-num { font-size: var(--ax-fs-xl); font-weight: 800; color: var(--ax-ink); font-variant-numeric: tabular-nums; }
.stat-row a { flex: none; font-size: var(--ax-fs-sm); font-weight: 600; }

/* ---------- module cards (settings/modules) ---------- */
.module-grid { align-items: start; }
.module-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.module-card-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
/* THE bug this wave fixes: icon() returns a bare <svg> with no width/height attributes, so with
   no sizing rule at all it falls back to the browser's intrinsic replaced-element size (300×150) —
   hundreds of px, exactly as reported. */
.module-icon { flex: none; width: 36px; height: 36px; border-radius: var(--radius-ctl); background: var(--ax-surface); color: var(--ax-ink); display: grid; place-items: center; }
/* belt-and-suspenders: the bug was a completely unsized <svg> (icon() emits no width/height
   attributes), so constrain it both on the wrapper (.module-icon, which also gives it the
   circular badge background) and directly on .module-card svg in case a future edit nests an
   icon() call anywhere else inside the card without going through .module-icon. */
.module-card svg { width: 20px; height: 20px; }
.module-icon svg { width: 20px; height: 20px; }
.module-card-body { flex: 1; min-width: 0; }
.module-card-body b { display: block; margin-bottom: 2px; }
.module-switch { flex: none; margin-top: 2px; }
.module-card-sub { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--ax-line); }
.modules-save-bar { margin-top: var(--sp-4); }
/* reservation acceptance window ("12:00 تا 23:00"): the generic `.row` wraps at `flex-wrap:wrap`,
   which let the two time inputs + «تا» break onto separate lines inside the narrow grid-3 column —
   force one line explicitly and give the inputs a fixed width instead of relying on inline styles. */
.time-range { display: flex; flex-wrap: nowrap; gap: var(--sp-2); align-items: center; }
.time-range .input { width: 110px; flex: none; }
/* support-module lead-field rows (checkbox + two text inputs): dedicated classes instead of
   touching the generic `.row`/`.check` (used across many unrelated forms). flex-wrap:nowrap
   and the key-input's max-width move here from inline styles so the mobile override below
   can actually win over them. */
.lead-field-row { flex-wrap: nowrap; }
.lead-field-row .check { flex: none; }
.lead-key-input { max-width: 150px; }
@media (max-width: 960px) {
  /* Bug fix (2026-10): nowrap squeezed checkbox + two inputs onto one line, hard-clipping
     placeholders (e.g. "برچسب فار..."). Stack the checkbox+«الزامی» label on its own row
     above, then each input full width on its own row — the label's own flex layout keeps
     the checkbox and its text visually paired regardless of this reordering. */
  .lead-field-row { flex-wrap: wrap; }
  .lead-field-row .check { order: -1; flex: 1 1 100%; }
  .lead-field-row .input { flex: 1 1 100%; min-width: 0; }
  .lead-key-input { max-width: none; }
}

/* ---------- collapsible scenario card (test-call-out) ---------- */
.scenario-card summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--sp-2); }
.scenario-card summary h3 { margin: 0; }
.scenario-card summary::-webkit-details-marker { display: none; }
.scenario-card summary::after { content: ""; width: 7px; height: 7px; margin-inline-start: auto; border-inline-end: 1.5px solid var(--ax-muted); border-bottom: 1.5px solid var(--ax-muted); transform: rotate(45deg); transition: transform .15s; flex: none; }
.scenario-card[open] summary::after { transform: rotate(-135deg); }

/* ---------- voice settings (next wave — CSS ready now) ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3); }
@media (max-width: 640px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-grid .choice span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; min-height: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-card); white-space: normal; text-align: right; border-width: 1px; }
.tier-grid .choice input:checked + span { background: var(--ax-surface); color: var(--ax-ink); border-color: var(--ax-ink); }
.tier-grid .choice .tier-hint { color: var(--ax-muted); font-size: var(--ax-fs-xs); font-weight: 400; }
.tier-grid .choice .tier-mult { align-self: flex-start; margin-inline-start: auto; }
.voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-2); }
.voice-grid .choice span { display: flex; align-items: center; gap: 8px; width: 100%; }
.voice-grid .choice .voice-play { flex: none; width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 999px; }
/* at <=480px two 180px auto-fill columns still fit inside the panel-body's narrowed content width,
   so the pills stayed two-up instead of one-up like every other grid on the page (Wave 12C mobile pass). */
@media (max-width: 480px) { .voice-grid { grid-template-columns: 1fr; } }
.progress { height: 8px; background: var(--ax-surface-2); border-radius: 999px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--ax-ink); border-radius: 999px; }
.progress.is-low i { background: var(--ax-error); }
.skeleton { background: linear-gradient(90deg, var(--ax-surface-2) 25%, var(--ax-surface) 50%, var(--ax-surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; min-height: 1em; }
@keyframes shimmer { to { background-position: -200% 0; } }
dialog.modal { border: 0; border-radius: var(--ax-radius-l); padding: 0; max-width: min(520px, calc(100vw - 32px)); width: 100%; box-shadow: var(--ax-shadow-l); }
dialog.modal::backdrop { background: rgba(14,17,22,.5); }
dialog.modal .modal-body { padding: 24px; }
dialog.modal h3 { margin-top: 0; }
.tooltip { position: relative; cursor: help; border-bottom: 1px dotted var(--ax-muted); }

/* ---------- dark theme (panels) ---------- */
[data-theme="dark"] {
  --ax-paper: #12161D; --ax-surface: #0E1116; --ax-surface-2: #1B2129; --ax-line: #262D38; --ax-line-2: #313A47;
  --ax-text: #E8ECF2; --ax-ink: #F3F5F8; --ax-ink-2: #D5DAE1; --ax-muted: #98A2B3; --ax-muted-2: #6B7585;
  --ax-brand-100: #1D2A55; --ax-brand-50: #161E38; --ax-brand-ink: #C7D2FE; --ax-brand-600: #6B8AFF; --ax-brand-700: #8CA3FF;
  --ax-success-100: #10301F; --ax-success-ink: #86EFAC; --ax-error-100: #3A1613; --ax-error-ink: #FCA5A5; --ax-pending-100: #3A2A0E; --ax-pending-ink: #FCD34D; --ax-info-100: #1D2A55;
  --ax-shadow-s: none; --ax-shadow-m: 0 8px 30px -12px rgba(0,0,0,.6);
  color-scheme: dark;
}
[data-theme="dark"] .btn-primary { background: #fff; color: #0E1116; border-color: #fff; }
[data-theme="dark"] .btn-primary:hover { background: #dfe6ff; }
[data-theme="dark"] .sidebar a.sb.is-active { background: #fff; color: #0E1116; }
[data-theme="dark"] .sidebar a.sb.is-active svg { color: #0E1116; }
[data-theme="dark"] .pill-ink { background: #fff; color: #0E1116; }
[data-theme="dark"] .card-good { border-color: #1f5a3a; } [data-theme="dark"] .card-bad { border-color: #6b2a24; } [data-theme="dark"] .card-warn { border-color: #6b4d15; } [data-theme="dark"] .card-accent { border-color: var(--ax-brand); }
[data-theme="dark"] .table tbody tr:hover td { background: var(--ax-surface-2); }
[data-theme="dark"] .table .row-error td { background: #22161a; }
[data-theme="dark"] .kpi.is-ok { border-color: #1f5a3a; } [data-theme="dark"] .kpi.is-bad { border-color: #6b2a24; } [data-theme="dark"] .kpi.is-warn { border-color: #6b4d15; }
[data-theme="dark"] .checklist li.is-done { border-color: #1f5a3a; }
[data-theme="dark"] .alert-success { border-color: #1f5a3a; } [data-theme="dark"] .alert-error { border-color: #6b2a24; } [data-theme="dark"] .alert-warning { border-color: #6b4d15; } [data-theme="dark"] .alert-info { border-color: #2f3f7a; }
[data-theme="dark"] .chip.is-active, [data-theme="dark"] .choice input:checked + span, [data-theme="dark"] .copilot-msg-user .copilot-bubble, [data-theme="dark"] .copilot-fab, [data-theme="dark"] .copilot-send, [data-theme="dark"] .panel-page .badge { background: #fff; color: #0E1116; border-color: #fff; }
/* .tier-grid opts out of the generic "selected = inverted fill" look above (same specificity,
   so it must be [data-theme="dark"]-qualified too, not just rely on source order) — selected
   stays a grey ink-tinted card, never a black/white fill, per the voice-tiers design
   (recolored from brand to ink in Wave 12F). */
[data-theme="dark"] .tier-grid .choice input:checked + span { background: var(--ax-surface-2); color: var(--ax-ink); border-color: var(--ax-ink); }
[data-theme="dark"] .topbar, [data-theme="dark"] .sidebar { background: #12161D; }
[data-theme="dark"] .msg.is-staff { border-color: #2f3f7a; }
[data-theme="dark"] .sim.is-light { background: var(--ax-paper); }
[data-theme="dark"] .debug-code { border-color: var(--ax-pending); }

/* ---------- panel monochrome follow-up (ink/grey overrides for rules shared
   with marketing/admin pages) ----------
   The rules below (`.input:focus` ~L198, the global `:focus-visible` ~L119,
   `.choice input:focus-visible + span` ~L213, `.check input`/`.range`
   ~L206/220, `.table tbody tr:hover td` ~L277, `.avatar` ~L666, `.btn-soft`
   ~L171-172) stay brand-blue as-is because marketing/admin pages still use
   them. Inside the tenant panel (`.panel-page` on <body>) they go ink/grey
   per the monochrome panel language — scoped here, base rules untouched.
   `.chip`/`.progress`/`.btn-primary` are already ink-based (no blue variant
   to fix) and `.badge` already has a panel-scoped override above
   (L725 / L927) — nothing further needed for those. */
.panel-page .input:focus, .panel-page textarea:focus, .panel-page select:focus { border-color: var(--ax-ink); box-shadow: 0 0 0 3px rgba(14,17,22,.1); }
[data-theme="dark"] .panel-page .input:focus, [data-theme="dark"] .panel-page textarea:focus, [data-theme="dark"] .panel-page select:focus { box-shadow: 0 0 0 3px rgba(243,245,248,.1); }
.panel-page :focus-visible { outline: 2px solid var(--ax-ink); outline-offset: 2px; }
.panel-page .choice input:focus-visible + * { outline: 2px solid var(--ax-ink); outline-offset: 2px; }
.panel-page .check input, .panel-page .range, .panel-page .range input, .panel-page input[type="checkbox"], .panel-page input[type="radio"] { accent-color: var(--ax-ink); }
/* `.switch` is only used by the modules page today (settings-modules.php's
   `.module-switch`); scoped generically so any future panel switch follows
   the same monochrome rule instead of the shared `--ax-success` green. Dark
   checked state uses `--ax-muted` rather than the ink token (which flips to
   near-white in dark mode) so the always-white knob stays visible on it. */
.panel-page .switch input:checked + .ui { background: var(--ax-ink); }
[data-theme="dark"] .panel-page .switch input:checked + .ui { background: var(--ax-muted); }
.panel-page .table tbody tr:hover td { background: var(--ax-surface); }
[data-theme="dark"] .panel-page .table tbody tr:hover td { background: var(--ax-surface-2); }
.panel-page .avatar { background: var(--ax-ink); color: var(--ax-paper); }
[data-theme="dark"] .panel-page .avatar { background: var(--ax-paper); color: var(--ax-ink); }
.panel-page .btn-soft { background: var(--ax-surface-2); color: var(--ax-ink); }
.panel-page .btn-soft:hover { background: var(--ax-line); color: var(--ax-ink); }

/* ---------- print ---------- */
@media print { .site-header, .site-footer, .sticky-cta, .sidebar, .topbar, .btn, .flash-stack { display: none !important; } .panel { grid-template-columns: 1fr; } body { background: #fff; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .sim-row, .bubble { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  /* the deck becomes a plain list: no stacking, no fading, no dark frame */
  .hero-flow .hf-frame { aspect-ratio: auto; min-height: 0; background: none; box-shadow: none; padding: 0; display: block; overflow: visible; }
  .hero-flow .hf-frame::before { display: none; }
  .hero-flow .hf-rail { display: none; }
  .hero-flow .hf-list { display: grid; gap: 8px; }
  .hero-flow .hf-step { grid-area: auto; flex-direction: row; align-items: flex-start; gap: 12px; opacity: 1; transform: none; pointer-events: auto; padding: 12px 14px; border-radius: var(--ax-radius-m); background: var(--ax-surface); border: 1px solid var(--ax-line); }
  .hero-flow .hf-step .hf-n { position: static; width: 24px; height: 24px; clip: auto; overflow: visible; border-radius: 50%; background: var(--ax-brand); color: #fff; font-size: var(--ax-fs-xs); font-weight: 800; display: grid; place-items: center; flex: none; }
  .hero-flow .hf-step .hf-ic { width: auto; height: auto; background: none; border: 0; color: var(--ax-brand); border-radius: 0; }
  .hero-flow .hf-step .hf-ic svg { width: 20px; height: 20px; }
  .hero-flow .hf-step .hf-cap { font-size: var(--ax-fs-sm); font-weight: 600; color: var(--ax-ink-2); }
}

/* ==========================================================================
   OBJECTS — 2026-09-27 de-genericize pass.
   Every visual slot on the public site shows a specific thing (a product row,
   a spec table, a price change, a search result, a chat bubble) instead of a
   glyph. These are the shared pieces; the palette, radii and type stay as-is.
   Second accent: the existing «نمونهٔ نمایشی» amber, now used systematically
   for timestamps, price deltas and highlights (--ax-warm*).
   ========================================================================== */
:root {
  --ax-warm: #B7791F;
  --ax-warm-100: #FBF1DC;
  --ax-warm-ink: #6E4711;
  --ax-warm-tint: rgba(183,121,31,.08);
  --ax-brand-tint: rgba(46,91,255,.08);
  --ax-brand-tint-line: rgba(46,91,255,.16);
}
/* icons that survive sit on an 8 % tint, never bare on white */
.sol-icon, .feature .f-ic, .cost-box svg { background: var(--ax-brand-tint); }
.sol-icon, .feature .f-ic { border-color: var(--ax-brand-tint-line); }
.cost-box svg { width: 28px; height: 28px; padding: 5px; border-radius: 8px; }
.cost-box.cost-manual svg { background: var(--ax-warm-tint); color: var(--ax-warm); }

/* timestamps, deltas, highlights */
.ob-ts { color: var(--ax-warm-ink); background: var(--ax-warm-100); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ob-delta { color: var(--ax-warm-ink); background: var(--ax-warm-100); font-weight: 800; font-size: 12px; padding: 2px 7px; border-radius: 6px; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.ob-hl { background: var(--ax-warm-100); color: var(--ax-warm-ink); border-radius: 4px; padding: 0 4px; }
.ob-label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ax-fs-xs); font-weight: 700; color: var(--ax-muted); }
.ob-label .hf-badge { font-size: 11px; }

/* a light "window" any fragment can sit in — on white sections and inside dark stages alike */
.ob-win { background: var(--ax-paper); border: 1px solid var(--ax-line); border-radius: 14px; overflow: hidden; box-shadow: var(--ax-shadow-s); color: var(--ax-text); text-align: right; direction: rtl; min-width: 0; }
.ob-win-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ax-surface); border-bottom: 1px solid var(--ax-line); font-size: 11px; color: var(--ax-muted); font-weight: 700; }
.ob-win-head .dots { display: flex; gap: 5px; }
.ob-win-head .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ax-line-2); display: block; }
.ob-win-head .url { margin-inline-start: auto; direction: ltr; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 500; color: var(--ax-muted); }
.ob-win-body { padding: 12px; }
.ob-win-body.p0 { padding: 0; }
.ob-win img.ob-shot { width: 100%; height: auto; display: block; }

/* WooCommerce-style product row */
.ob-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--ax-line); font-size: var(--ax-fs-sm); }
.ob-row:last-child { border-bottom: 0; }
.ob-thumb { width: 44px; height: 44px; border-radius: 8px; background: var(--ax-surface); object-fit: contain; display: block; border: 1px solid var(--ax-line); }
.ob-thumb.lg { width: 64px; height: 64px; }
.ob-row .ob-name { font-weight: 700; color: var(--ax-ink); line-height: 1.5; display: block; }
.ob-row .ob-meta { color: var(--ax-muted); font-size: 11px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.ob-row .ob-meta .sku { direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ob-price { text-align: left; direction: rtl; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ob-price b { display: block; font-size: var(--ax-fs-md); color: var(--ax-ink); }
.ob-price s { display: block; color: var(--ax-muted); font-size: 11px; font-weight: 500; }
.ob-price small { color: var(--ax-muted); font-size: 11px; }
.ob-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--ax-surface-2); color: var(--ax-muted); white-space: nowrap; line-height: 1.6; }
.ob-chip.ok { background: var(--ax-success-100); color: var(--ax-success-ink); }
.ob-chip.warm { background: var(--ax-warm-100); color: var(--ax-warm-ink); }
.ob-chip.brand { background: var(--ax-brand-100); color: var(--ax-brand-700); }
.ob-chip.err { background: var(--ax-error-100); color: var(--ax-error-ink); }
.ob-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }

/* spec table (WooCommerce "مشخصات فنی") */
.ob-spec { width: 100%; border-collapse: collapse; font-size: var(--ax-fs-sm); }
.ob-spec th, .ob-spec td { padding: 7px 10px; border-bottom: 1px solid var(--ax-line); text-align: right; vertical-align: top; }
.ob-spec th { width: 38%; color: var(--ax-muted); font-weight: 600; background: var(--ax-surface); font-size: var(--ax-fs-xs); }
.ob-spec tr:last-child th, .ob-spec tr:last-child td { border-bottom: 0; }
.ob-spec td b { font-weight: 700; }
.ob-src { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 11px; color: var(--ax-muted); border-top: 1px solid var(--ax-line); background: var(--ax-surface); }
.ob-src .ltr { font-family: ui-monospace, Menlo, Consolas, monospace; }
.ob-empty { margin: 0; padding: 10px 12px; border: 1px dashed var(--ax-line-2); border-radius: 10px; background: var(--ax-warm-100); color: var(--ax-warm-ink); font-size: var(--ax-fs-xs); font-weight: 700; }
.ob-empty small { display: block; font-weight: 500; color: var(--ax-warm-ink); opacity: .85; }

/* price change (one product, before → after) */
.ob-pc { display: grid; grid-template-columns: 44px 1fr; gap: 10px 12px; align-items: center; padding: 12px; }
.ob-pc .ob-name { font-weight: 700; font-size: var(--ax-fs-sm); color: var(--ax-ink); display: block; }
.ob-pc .ob-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ob-pc .ob-line s { color: var(--ax-muted); font-size: var(--ax-fs-xs); }
.ob-pc .ob-line b { font-size: var(--ax-fs-lg); color: var(--ax-ink); }
.ob-pc .ob-line .arrow { color: var(--ax-muted); }
.ob-pc .ob-foot { grid-column: 1 / -1; display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; font-size: 11px; color: var(--ax-muted); border-top: 1px dashed var(--ax-line); padding-top: 8px; }
.ob-pc .ob-foot .ok { color: var(--ax-success-ink); font-weight: 700; }

/* marketplace listing (ترب-style) */
.ob-list { padding: 12px; font-size: var(--ax-fs-sm); }
.ob-list .ob-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ob-list .ob-top .mk { font-weight: 800; color: var(--ax-ink); }
.ob-list .ob-top .mk-tag { font-size: 11px; color: var(--ax-muted); }
.ob-list .ob-seller { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--ax-line); font-size: var(--ax-fs-xs); color: var(--ax-muted); }
.ob-list .ob-seller.you { color: var(--ax-ink); font-weight: 700; background: var(--ax-brand-50); margin: 0 -12px; padding-inline: 12px; }
.ob-list .ob-seller .rk { width: 22px; height: 22px; border-radius: 50%; background: var(--ax-surface-2); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--ax-muted); }
.ob-list .ob-seller.you .rk { background: var(--ax-ink); color: #fff; }
.ob-list .ob-seller .pr { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Google result */
.ob-serp { padding: 12px 14px; font-size: var(--ax-fs-sm); }
.ob-serp .ob-url { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ax-muted); margin-bottom: 2px; }
.ob-serp .ob-url .fav { width: 22px; height: 22px; border-radius: 50%; background: var(--ax-surface-2); display: grid; place-items: center; font-weight: 800; font-size: 11px; color: var(--ax-ink); flex: none; }
.ob-serp .ob-url .ltr { font-family: inherit; }
.ob-serp .ob-title { color: #1a0dab; font-size: var(--ax-fs-md); font-weight: 600; line-height: 1.4; display: block; margin: 2px 0 4px; }
.ob-serp .ob-rich { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ax-muted); margin-bottom: 4px; }
.ob-serp .ob-rich .stars { color: var(--ax-warm); letter-spacing: 1px; direction: ltr; unicode-bidi: isolate; }
.ob-serp .ob-rich .instock { color: var(--ax-success-ink); font-weight: 700; }
.ob-serp .ob-desc { color: var(--ax-ink-2); font-size: 12px; line-height: 1.7; margin: 0; }
.ob-serp .ob-desc.faded { color: var(--ax-muted); }
.ob-serp .ob-miss { display: inline-block; margin-top: 6px; font-size: 11px; color: var(--ax-error-ink); background: var(--ax-error-100); padding: 2px 8px; border-radius: 6px; }

/* chat bubbles (light) */
.ob-chat { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--ax-surface); }
.ob-chat .b { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.7; }
.ob-chat .b.user { align-self: flex-start; background: var(--ax-brand); color: #fff; border-bottom-left-radius: 4px; }
.ob-chat .b.bot { align-self: flex-end; background: var(--ax-paper); color: var(--ax-text); border: 1px solid var(--ax-line); border-bottom-right-radius: 4px; }
.ob-chat .b .ob-ts { margin-inline-start: 6px; }
.ob-chat .pcard { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; margin-top: 8px; padding: 8px; background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: 10px; }
.ob-chat .pcard .ob-thumb { width: 40px; height: 40px; }
.ob-chat .pcard b { display: block; font-size: 12px; line-height: 1.4; }
.ob-chat .pcard small { color: var(--ax-muted); font-size: 11px; }
.ob-chat .pcard .add { background: var(--ax-ink); color: #fff; font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.ob-chat .sys { align-self: center; font-size: 11px; color: var(--ax-success-ink); background: var(--ax-success-100); padding: 3px 10px; border-radius: 999px; font-weight: 700; }

/* an unanswered product question (WooCommerce comment row) */
.ob-q { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px; font-size: var(--ax-fs-sm); align-items: start; }
.ob-q .av { width: 34px; height: 34px; border-radius: 50%; background: var(--ax-surface-2); color: var(--ax-ink); display: grid; place-items: center; font-weight: 800; font-size: var(--ax-fs-sm); }
.ob-q .who { font-size: 11px; color: var(--ax-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ob-q .txt { margin: 2px 0 0; color: var(--ax-ink); line-height: 1.7; }
.ob-q .ans { grid-column: 2; margin-top: 6px; padding: 8px 10px; border-inline-start: 3px solid var(--ax-success); background: var(--ax-success-100); border-radius: 0 8px 8px 0; font-size: 12px; color: var(--ax-success-ink); }
.ob-q .noans { grid-column: 2; margin-top: 6px; font-size: 11px; color: var(--ax-error-ink); background: var(--ax-error-100); padding: 3px 8px; border-radius: 6px; justify-self: start; }

/* product page fragment — the same page, bare and filled */
.ob-page { padding: 14px; display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; }
.ob-page .ob-thumb.page { width: 96px; height: 96px; border-radius: 12px; }
.ob-page .crumbs { font-size: 11px; color: var(--ax-muted); display: flex; gap: 6px; }
.ob-page .crumbs .ob-chip { font-size: 10px; }
.ob-page h5 { margin: 4px 0 6px; font-size: var(--ax-fs-md); line-height: 1.4; color: var(--ax-ink); }
.ob-page .pbox { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.ob-page .pbox b { font-size: var(--ax-fs-lg); }
.ob-page .pbox s { color: var(--ax-muted-2); font-size: 12px; }
.ob-page .kv { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ob-page .kv span { border: 1px solid var(--ax-line); border-radius: 8px; padding: 3px 8px; font-size: 11px; color: var(--ax-ink-2); background: var(--ax-paper); }
.ob-page .kv span small { color: var(--ax-muted); margin-inline-start: 4px; }
.ob-page p.desc { font-size: 12px; color: var(--ax-ink-2); line-height: 1.7; margin: 0; }
.ob-page .ob-empty { margin-top: 2px; }
@media (max-width: 480px) { .ob-page { grid-template-columns: 64px 1fr; } .ob-page .ob-thumb.page { width: 64px; height: 64px; } }

/* WordPress "بارگذاری افزونه" dialog */
.ob-wp { padding: 14px; font-size: var(--ax-fs-sm); }
.ob-wp .path { font-size: 11px; color: var(--ax-muted); margin-bottom: 8px; }
.ob-wp .drop { border: 2px dashed var(--ax-line-2); border-radius: 10px; padding: 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; background: var(--ax-surface); }
.ob-wp .file { direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--ax-ink); font-weight: 700; text-align: left; }
.ob-wp .file small { display: block; color: var(--ax-muted); font-weight: 500; }
.ob-wp .zipic { width: 36px; height: 36px; border-radius: 8px; background: var(--ax-brand-tint); color: var(--ax-brand); display: grid; place-items: center; }
.ob-wp .zipic svg { width: 18px; height: 18px; }
.ob-wp .btnwp { background: #2271b1; color: #fff; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 4px; white-space: nowrap; }
.ob-wp .after { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--ax-success-ink); }

/* activity log (3 lines, rolling) */
.ob-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ob-log li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--ax-paper); border: 1px solid var(--ax-line); font-size: var(--ax-fs-sm); animation: simIn .4s ease; }
.ob-log li .t { color: var(--ax-warm-ink); background: var(--ax-warm-100); font-weight: 800; font-size: 11px; padding: 2px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.ob-log li .x { color: var(--ax-ink-2); }
.ob-log li .x b { color: var(--ax-ink); font-weight: 700; }
.ob-log li .x .ob-chip { margin-inline-start: 6px; }
.counter-log { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .counter-log { grid-template-columns: 1fr; } }
.counter-log .counter-band { grid-template-columns: 1fr; gap: 10px; }
.counter-log .counter { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: right; padding: 14px 18px; }
.counter-log .counter .cv { font-size: var(--ax-fs-2xl); }

/* marketplace strip under the hero — wordmarks set in type, no fake logos */
.mk-strip { border-block: 1px solid var(--ax-line); background: var(--ax-paper); }
.mk-strip .container { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; padding-block: 14px; }
.mk-strip .mk-lead { font-size: var(--ax-fs-xs); color: var(--ax-muted); font-weight: 700; margin: 0; }
.mk-strip .mk-list { display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; margin-inline-start: auto; }
.mk-strip .mk { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--ax-fs-md); color: var(--ax-ink); letter-spacing: -.01em; }
.mk-strip .mk i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.mk-strip .mk.is-soon { color: var(--ax-muted); font-weight: 700; }
.mk-strip .mk .soon-badge { margin-inline-start: 2px; }
@media (max-width: 640px) { .mk-strip .mk-list { margin-inline-start: 0; gap: 8px 16px; } .mk-strip .mk { font-size: var(--ax-fs-sm); } }

/* bento: the #solutions grid — first product wide, the rest narrow */
.fn-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.fn-bento > * { grid-column: span 6; }
.fn-bento > :nth-child(1) { grid-column: span 8; }
.fn-bento > :nth-child(2) { grid-column: span 4; }
.fn-bento > :nth-child(n+5) { grid-column: span 4; }
@media (max-width: 960px) { .fn-bento > *, .fn-bento > :nth-child(n) { grid-column: span 6; } .fn-bento > :nth-child(1) { grid-column: span 12; } }
@media (max-width: 640px) { .fn-bento > *, .fn-bento > :nth-child(n) { grid-column: span 12; } }
.fn-card .ob-win { margin: 2px 0 4px; }
.fn-card.is-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px 24px; align-content: start; }
.fn-card.is-wide > .fn-chips, .fn-card.is-wide > h3, .fn-card.is-wide > p, .fn-card.is-wide > .fn-manual, .fn-card.is-wide > .fn-benefit, .fn-card.is-wide > .sol-actions { grid-column: 1; }
.fn-card.is-wide > .ob-win { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
@media (max-width: 960px) { .fn-card.is-wide { display: flex; } .fn-card.is-wide > .ob-win { grid-column: auto; } }

/* the #how section: numbered column + one real picture (or the upload dialog) */
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 860px) { .how-grid { grid-template-columns: 1fr; } }
.how-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.how-list li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ax-line); align-items: start; }
.how-list li:last-child { border-bottom: 0; }
.how-list .step-n { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ax-ink); color: #fff; font-weight: 800; }
.how-list h3 { font-size: var(--ax-fs-lg); margin: 4px 0 4px; }
.how-list p { color: var(--ax-muted); font-size: var(--ax-fs-sm); margin: 0; }
.how-list p .ltr { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; background: var(--ax-surface-2); padding: 1px 6px; border-radius: 4px; }
.how-photo { position: relative; border-radius: var(--ax-radius-xl); overflow: hidden; border: 1px solid var(--ax-line); background: var(--ax-surface); box-shadow: var(--ax-shadow-m); }
.how-photo img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.how-photo figcaption { position: absolute; bottom: 12px; right: 12px; background: rgba(14,17,22,.75); color: #fff; font-size: var(--ax-fs-xs); padding: 6px 10px; border-radius: 8px; }

/* before / after as objects (same thing, two states) */
.ba-obj { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 640px) { .ba-obj { grid-template-columns: 1fr; } }
.ba-obj > div > .ba-tag { display: inline-block; font-size: var(--ax-fs-xs); font-weight: 800; padding: 4px 10px; border-radius: 6px; margin-bottom: 8px; }
.ba-obj .ba-before .ba-tag { background: var(--ax-error-100); color: var(--ax-error-ink); }
.ba-obj .ba-after .ba-tag { background: var(--ax-success-100); color: var(--ax-success-ink); }
.ba-obj .ba-cap { font-size: var(--ax-fs-xs); color: var(--ax-muted); margin: 8px 2px 0; line-height: 1.6; }

/* one-line quote band */
.quote-band { text-align: center; padding-block: clamp(36px, 5vw, 72px); }
.quote-band blockquote { margin: 0 auto; max-width: 820px; font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem); font-weight: 800; line-height: 1.5; color: var(--ax-ink); letter-spacing: -.01em; text-wrap: balance; }
.quote-band blockquote .qm { color: var(--ax-warm); }
.quote-band .qcap { margin: 14px 0 0; color: var(--ax-muted); font-size: var(--ax-fs-sm); }
.quote-band .qcap b { color: var(--ax-ink); }

/* partner band: one real workspace */
.ws-card .ob-win { margin-top: 12px; display: block; }
.ob-win .ob-win-body.p0 .ob-win-body { padding: 0; }
.ob-split { border-top: 1px solid var(--ax-line); }
.ws-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; }
.ws-row .ws-fav { width: 40px; height: 40px; border-radius: 10px; background: #0F5E4B; color: #fff; display: grid; place-items: center; font-weight: 800; }
.ws-row b { display: block; }
.ws-row small { color: var(--ax-muted); }
.ws-row .ltr { direction: ltr; unicode-bidi: isolate; }
.ws-plugs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* hero deck: light windows pinned on the dark stage */
.hf-step .ob-win { width: 100%; max-width: 520px; box-shadow: var(--ax-shadow-l); }
.hf-step .hf-cap { font-size: clamp(.95rem, .9rem + .3vw, 1.1rem); }
.hf-frame { aspect-ratio: auto; min-height: 380px; }
.hf-step { gap: 14px; }
@media (max-width: 960px) { .hf-frame { min-height: 340px; } }
@media (prefers-reduced-motion: reduce) { .hero-flow .hf-frame { min-height: 0; } .hero-flow .hf-step .ob-win { max-width: none; box-shadow: none; } .hero-flow .hf-step { flex-direction: column; } }

/* docs index cards carry the real file, not a glyph */
.doc-file { display: flex; align-items: center; gap: 10px; font-size: var(--ax-fs-xs); color: var(--ax-muted); }
.doc-file .ltr { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--ax-surface-2); padding: 2px 6px; border-radius: 4px; color: var(--ax-ink); }
.doc-path { font-size: var(--ax-fs-xs); color: var(--ax-muted); display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.doc-path span { background: var(--ax-surface); border: 1px solid var(--ax-line); border-radius: 6px; padding: 1px 8px; color: var(--ax-ink-2); }

/* blog cards: date, reading time, first line */
.post-meta { display: flex; gap: 8px 14px; flex-wrap: wrap; font-size: var(--ax-fs-xs); color: var(--ax-muted); align-items: center; }
.post-lead { color: var(--ax-ink-2); font-size: var(--ax-fs-sm); border-inline-start: 3px solid var(--ax-warm); padding-inline-start: 10px; margin: 0; line-height: 1.7; }
/* inline icons inside object fragments are decorations, never full-width */
.ob-win svg, .ob-src svg, .ob-pc .ob-foot svg, .ob-wp .after svg, .ob-log svg { width: 14px; height: 14px; flex: none; display: inline-block; vertical-align: -.15em; }
.ob-wp .zipic svg { width: 18px; height: 18px; }
/* product hero: the object on top, the four results as plain bold-led lines beneath */
.hero .hero-flow .hf-label { margin: 0; }
.res-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.res-list li { font-size: var(--ax-fs-sm); color: var(--ax-muted); line-height: 1.7; padding-inline-start: 14px; position: relative; }
.res-list li::before { content: ""; position: absolute; right: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--ax-warm); }
.res-list li b { color: var(--ax-ink); }
/* real op-log rows reused inside narrow marketing cards: wrap instead of clipping the token column */
.card .op-row { grid-template-columns: 16px minmax(0, 1fr) auto; padding: 10px 12px; font-size: var(--ax-fs-xs); }
.card .op-row .op-title { min-width: 0; }
.card .op-row .op-title small { white-space: normal; max-width: none; }
.card .op-row .op-at { grid-column: 2 / -1; }

/* links inside muted running text carry an underline (brand blue vs muted grey is only 1.2:1) */
.section-head p a, .qcap a, .ba-cap a, p.text-muted a, .lead a, .ws-card p a, .prose p a { text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   READABILITY — 2026-09-27 (homepage only). Larger, fewer, lighter.
   Body 17px, every fragment at least 14px, two dark blocks on the page.
   ========================================================================== */
.page-home { --ax-fs-md: 1.0625rem; }
.page-home .section-head p, .page-home .lead { font-size: 1.1875rem; }
.page-home .hero .sub { max-width: 600px; }
.page-home .hero-micro { font-size: var(--ax-fs-md); }
.hero-one .container { align-items: center; }
.hero-static { display: flex; flex-direction: column; gap: 10px; }
.hero-static .hero-note { margin: 0; }
/* the large fragment size */
.ob-lg .ob-row, .ob-lg .ob-pc, .ob-lg .ob-list, .ob-lg .ob-wp { font-size: var(--ax-fs-md); }
.ob-lg .ob-row { grid-template-columns: 56px 1fr auto; padding: 14px 16px; }
.ob-lg .ob-pc { grid-template-columns: 56px 1fr; padding: 16px; }
.ob-lg .ob-list { padding: 14px 16px; }
.ob-lg .ob-thumb { width: 56px; height: 56px; }
.ob-lg .ob-row .ob-meta, .ob-lg .ob-pc .ob-foot, .ob-lg .ob-list .ob-seller, .ob-lg .ob-list .ob-top .mk-tag, .ob-lg .ob-price s, .ob-lg .ob-price small, .ob-lg .ob-pc .ob-line s, .ob-lg .ob-wp .path, .ob-lg .ob-wp .file small, .ob-lg .ob-wp .after { font-size: var(--ax-fs-sm); }
.ob-lg .ob-ts, .ob-lg .ob-chip, .ob-lg .ob-delta, .ob-lg .ob-win-head { font-size: var(--ax-fs-xs); }
.ob-lg .ob-win-head { padding: 10px 14px; }
.ob-lg .ob-pc .ob-line b { font-size: var(--ax-fs-xl); }
.ob-lg .ob-price b { font-size: var(--ax-fs-lg); }
.ob-lg .ob-list .ob-seller { grid-template-columns: 28px 1fr auto; padding: 9px 0; }
.ob-lg .ob-list .ob-seller .rk { width: 26px; height: 26px; font-size: var(--ax-fs-xs); }
.ob-lg .ob-list .ob-seller.you { margin: 0 -16px; padding-inline: 16px; }
.ob-lg .ob-wp .file { font-size: var(--ax-fs-sm); }
/* the "also" row */
.also { padding-block: clamp(24px, 3vw, 44px); border-bottom: 1px solid var(--ax-line); }
.also-lead { font-weight: 700; color: var(--ax-ink); margin: 0 0 14px; font-size: var(--ax-fs-lg); }
.also-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.also-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--ax-line); border-radius: var(--ax-radius-l); background: var(--ax-paper); color: var(--ax-text); transition: border-color .15s; }
.also-card:hover { border-color: var(--ax-ink); color: var(--ax-text); }
.also-card h3 { font-size: var(--ax-fs-lg); margin: 0; }
.also-card p { color: var(--ax-muted); font-size: var(--ax-fs-md); margin: 0; flex: 1; line-height: 1.7; }
@media (max-width: 860px) { .also-grid { grid-template-columns: 1fr; } }
/* three steps, each with one picture */
.how3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
.how3 > div { display: flex; flex-direction: column; gap: 12px; }
.how3 .step-n { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ax-ink); color: #fff; font-weight: 800; font-size: var(--ax-fs-lg); }
.how3 h3 { font-size: var(--ax-fs-xl); margin: 0; }
.how3 p { color: var(--ax-muted); margin: 0; min-height: 3.4em; }
.how3 .ob-win { margin-top: 4px; }
@media (max-width: 960px) { .how3 { grid-template-columns: 1fr; gap: 32px; } .how3 p { min-height: 0; } }
.page-home .how-list h3 { font-size: var(--ax-fs-xl); }
.page-home .how-list p { font-size: var(--ax-fs-md); }
.page-home .acc summary { font-size: var(--ax-fs-lg); }
.page-home .mk-strip .mk { font-size: var(--ax-fs-lg); }
.page-home #demo .ob-win { display: block; }
/* narrow columns: product row stacks price under the name instead of squeezing the title */
.how3 .ob-row { grid-template-columns: 56px minmax(0, 1fr); }
.how3 .ob-row .ob-price { grid-column: 2; text-align: right; }
.how3 .ob-row .ob-price b { display: inline; }
.ob-row .ob-meta span { white-space: nowrap; }
/* product pages follow the homepage's readability rules */
.page-solution { --ax-fs-md: 1.0625rem; }
.page-solution .section-head p, .page-solution .lead { font-size: 1.1875rem; }
.page-solution .hero .sub { max-width: 600px; }
.page-solution .how-list h3 { font-size: var(--ax-fs-xl); }
.page-solution .how-list p { font-size: var(--ax-fs-md); }
.page-solution .acc summary { font-size: var(--ax-fs-lg); }
.page-solution .feature h4 { font-size: var(--ax-fs-lg); }
.page-solution .feature p { font-size: var(--ax-fs-md); }
.res-list-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
@media (max-width: 760px) { .res-list-row { grid-template-columns: 1fr; } }
.cost-card .cost-big { font-size: var(--ax-fs-3xl); font-weight: 800; line-height: 1.2; color: var(--ax-ink); }
.cost-card .cost-unit { color: var(--ax-muted); font-weight: 700; margin-bottom: 12px; }
.cost-card .cost-lines { margin: 0 0 12px; padding-inline-start: 1.2em; color: var(--ax-ink-2); }
.cost-card .cost-lines li { margin-bottom: 6px; }
.cost-card p a { text-decoration: underline; }
.ob-audit { padding: 6px 0; }
.ob-audit-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--ax-line); font-size: var(--ax-fs-md); }
.ob-audit-row:last-child { border-bottom: 0; }
.ob-lg .ob-audit-row .ob-chip { font-size: var(--ax-fs-xs); }
.ob-lg .ob-page { padding: 16px; grid-template-columns: 96px 1fr; }
.ob-lg .ob-page h5 { font-size: var(--ax-fs-lg); }
.ob-lg .ob-page .pbox b { font-size: var(--ax-fs-xl); }
.ob-lg .ob-page .kv span, .ob-lg .ob-page p.desc, .ob-lg .ob-page .ob-empty { font-size: var(--ax-fs-sm); }
.ob-lg .ob-spec { font-size: var(--ax-fs-md); }
.ob-lg .ob-spec th { font-size: var(--ax-fs-sm); }
.ob-lg .ob-src { font-size: var(--ax-fs-sm); }
.ob-lg .ob-serp { padding: 14px 16px; }
.ob-lg .ob-serp .ob-title { font-size: var(--ax-fs-lg); }
.ob-lg .ob-serp .ob-desc, .ob-lg .ob-serp .ob-rich, .ob-lg .ob-serp .ob-url { font-size: var(--ax-fs-sm); }
.ob-lg .ob-serp .ob-miss { font-size: var(--ax-fs-xs); }
.ob-lg .ob-chat .b { font-size: var(--ax-fs-md); }
.ob-lg .ob-chat .pcard b { font-size: var(--ax-fs-sm); }
.ob-lg .ob-q { padding: 14px 16px; font-size: var(--ax-fs-md); }
.ob-lg .ob-q .who, .ob-lg .ob-q .ans { font-size: var(--ax-fs-sm); }
.ob-lg .ob-q .noans { font-size: var(--ax-fs-xs); }
.page-solution .hero .hero-static .ob-win { max-width: none; }
.cost-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px 40px; align-items: center; }
.cost-card .cost-lines { margin: 0; }
@media (max-width: 760px) { .cost-card { grid-template-columns: 1fr; } }
/* real screenshots: soft frame, no fake chrome around the real chrome */
.ob-real .ob-win-body { background: var(--ax-surface); }
.ob-real .ob-shot { width: 100%; height: auto; display: block; }
.ob-real.ob-tall .ob-shot { max-height: 520px; object-fit: cover; object-position: top; }
.ob-caption { font-size: var(--ax-fs-xs); color: var(--ax-muted); margin: 6px 2px 0; }
/* "how it works" as rows: text beside one large real picture — admin and marketplace screens need width */
.how-rows { display: grid; gap: clamp(28px, 4vw, 48px); }
.how-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 20px 40px; align-items: center; }
.how-row .step-n { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ax-ink); color: #fff; font-weight: 800; font-size: var(--ax-fs-lg); margin-bottom: 10px; }
.how-row h3 { font-size: var(--ax-fs-xl); margin: 0 0 8px; }
.how-row p { color: var(--ax-muted); margin: 0; }
.how-row .ob-caption { margin-top: 8px; }
@media (max-width: 860px) { .how-row { grid-template-columns: 1fr; } }
.ob-real.ob-fit .ob-shot { max-height: 560px; object-fit: cover; object-position: top; }

/* ===== ADMIN: MARKETPLACE (products, categories) ===== */
.pf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.pf-side { position: sticky; top: 84px; display: grid; gap: 16px; }
.pf-main { display: grid; gap: 16px; }
.pf-group > summary { cursor: pointer; font-weight: 800; font-size: var(--ax-fs-lg); list-style: none; display: flex; align-items: center; gap: 10px; }
.pf-group > summary::-webkit-details-marker { display: none; }
.pf-group > summary::before { content: ""; width: 8px; height: 8px; border-inline-end: 2px solid var(--ax-muted); border-bottom: 2px solid var(--ax-muted); transform: rotate(-45deg); transition: transform .15s; flex: none; }
.pf-group[open] > summary::before { transform: rotate(45deg); }
.pf-group[open] > summary { margin-bottom: 16px; }
.pf-h { margin: 20px 0 10px; font-size: var(--ax-fs-md); }
.pf-h:first-of-type { margin-top: 0; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.field.is-dim { opacity: .45; }
.ltr-code { font-family: var(--ax-mono, ui-monospace, Menlo, monospace); font-size: 13px; line-height: 1.7; }
.repeater .rep-row { position: relative; padding: 16px; margin-bottom: 10px; }
.repeater .rep-row .field { margin-bottom: 8px; }
.repeater .rep-del { position: absolute; top: 8px; inset-inline-end: 8px; }
.icon-preview { width: 44px; height: 44px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--pl-soft, var(--ax-surface-2)); color: var(--pl, var(--ax-ink)); flex: none; }
.icon-preview svg { width: 22px; height: 22px; }
.pl-cell { display: flex; align-items: center; gap: 10px; }
.pl-ic { width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--pl-soft, var(--ax-surface-2)); color: var(--pl, var(--ax-ink)); flex: none; }
.pl-ic svg { width: 18px; height: 18px; }
.pl-ic img { width: 22px; height: 22px; object-fit: contain; }
.serp { border: 1px solid var(--ax-line); border-radius: var(--ax-radius); padding: 12px 14px; background: var(--ax-paper); }
.serp-t { color: #1a0dab; font-size: 18px; font-weight: 600; }
.serp-u { color: var(--ax-muted); font-size: 12px; margin: 2px 0 4px; }
.serp-d { font-size: 13px; color: var(--ax-ink-2, var(--ax-ink)); }
.media-box { border: 1px dashed var(--ax-line-2); border-radius: var(--ax-radius); padding: 14px; }
.media-thumb { border-radius: 8px; border: 1px solid var(--ax-line); background: var(--ax-surface-2); object-fit: contain; }
.media-thumb.sq { width: 64px; height: 64px; }
.media-thumb.wide { width: 180px; height: 94px; object-fit: cover; }
.shots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.shot { border: 1px solid var(--ax-line); border-radius: var(--ax-radius); padding: 8px; display: grid; gap: 6px; background: var(--ax-paper); }
.shot img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 6px; background: var(--ax-surface-2); }

.rte { border: 1px solid var(--ax-line-2); border-radius: var(--ax-radius-m); overflow: hidden; background: var(--ax-paper); transition: border-color .15s, box-shadow .15s; }
.rte:focus-within { border-color: var(--ax-brand); box-shadow: 0 0 0 3px var(--ax-brand-100); }
.rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; background: var(--ax-surface); border-bottom: 1px solid var(--ax-line); }
.rte-btn { min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: var(--ax-radius-s); background: transparent; color: var(--ax-ink-2); font: inherit; font-weight: 700; font-size: var(--ax-fs-sm); cursor: pointer; }
.rte-btn:hover { background: var(--ax-surface-2); }
.rte-btn:disabled { opacity: .4; cursor: default; }
.rte-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--ax-line-2); }
.rte-body { min-height: 260px; max-height: 560px; overflow: auto; border: 0; border-radius: 0; line-height: 1.9; }
.rte-body:focus { outline: none; box-shadow: none; }
.rte-body p { margin: 0 0 12px; }
.rte-body p:last-child { margin-bottom: 0; }
.rte-body h2, .rte-body h3, .rte-body h4 { margin: 22px 0 10px; }
.rte-body ul, .rte-body ol { margin: 0 0 12px; padding-inline-start: 24px; }
.rte-body blockquote { margin: 0 0 12px; padding: 4px 16px; border-inline-start: 3px solid var(--ax-brand); color: var(--ax-muted); }
.rte-body img { max-width: 100%; border-radius: 8px; }
.rte-body a { color: var(--ax-brand-600); text-decoration: underline; }
.input-sm { min-height: 34px; font-size: var(--ax-fs-sm); padding: 4px 10px; }
.cat-row { border-top: 1px solid var(--ax-line); }
.cat-sum { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; list-style: none; }
.cat-sum::-webkit-details-marker { display: none; }
.cat-sum .num { margin-inline-start: auto; }
.cat-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--ax-surface-2); flex: none; }
.cat-ic svg { width: 16px; height: 16px; }
.cat-form { padding: 4px 12px 14px; }
@media (max-width: 1100px) { .pf-layout { grid-template-columns: 1fr; } .pf-side { position: static; } }
@media (max-width: 720px) { .span-2, .span-3 { grid-column: span 1; } .grid-3 .span-2 { grid-column: span 1; } }
/* licences (panel) */
.lic-item .pl-cell a { color: var(--ax-ink); }

/* test-call voice tab (WebRTC sandbox) */
.tc-voice-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.tc-voice-status .pill-pending .dot, .tc-voice-status .pill-info .dot { animation: pulse 1.2s infinite; }
#tc-voice-transcript { min-height: 72px; border-radius: var(--ax-radius-m); }
.lic-grid { align-items: start; }

/* ---------- copilot («دستیار راه‌اندازی», wave 5C; header reworked to the shared card-head
   look in wave 12K — see brief-12k-copilot-style.md) ---------- */
.copilot { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--ax-paper); }
.copilot-head { padding: 10px 14px; border-bottom: 1px solid var(--ax-line); flex: none; }
/* Same .card-head row every other card uses (h3 at the inline-start, actions at the
   inline-end) — just scoped to margin:0 since .copilot-head already supplies the padding. */
.copilot-head .card-head { margin-bottom: 0; flex-wrap: wrap; }
.copilot-head h3 { display: flex; align-items: center; gap: 6px; }
.copilot-head h3 svg { width: 18px; height: 18px; color: var(--ax-muted); flex: none; }
/* Actions group: nowrap + min-width:0 on the select is what keeps everything on one row down
   to the 440px drawer width; the whole group wraps under the title (.card-head above) only if
   it still doesn't fit (e.g. drawer mode's extra «بستن» button). */
.copilot-head-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.copilot-thread-select { min-height: 32px; height: 32px; padding: 0 8px; font-size: var(--ax-fs-sm); flex: 1 1 auto; min-width: 0; cursor: pointer; }
/* Kept for renameThread()'s current-name default/sync — the select itself (dblclick) is the
   visible rename target now, so this no longer needs to take up its own row space. */
.copilot-thread-title { display: none; }
.copilot-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; background: var(--ax-surface); }
/* The welcome hint used to live in a tinted sub-header strip; it's now this empty-state line
   inside the messages area, shown only while the thread has nothing but its one local welcome
   message (copilot.js toggles `.is-welcome-only` — see updateEmptyHint()). */
.copilot-messages.is-welcome-only::after { content: 'بگو چه می‌خواهی؛ من تنظیم می‌کنم.'; display: block; text-align: center; margin-top: 10px; font-size: var(--ax-fs-sm); color: var(--ax-muted); }
.copilot-msg { max-width: 78%; display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-4); }
.copilot-msg:first-child { margin-top: 0; }
.copilot-msg-user + .copilot-msg-user, .copilot-msg-assistant + .copilot-msg-assistant, .copilot-msg-system + .copilot-msg-system { margin-top: var(--sp-2); }
/* RTL: "start" is the right edge — assistant (the dastiar speaking) sits there like a normal RTL
   reading flow; the user's own messages sit on the left, ink-filled. */
/* dir=rtl (panel.php's <html dir="rtl">): inside this column flex container, the cross-axis
   flex-start is the RIGHT edge and flex-end is the LEFT edge (cross-start/end follow the
   container's inline-start/end, same as text direction) — so the USER's own bubbles (right)
   use flex-start and the ASSISTANT's (left) use flex-end. Wave 12L: this was backwards. */
.copilot-msg-assistant { align-self: flex-end; }
.copilot-msg-user { align-self: flex-start; }
/* text-muted (added in the markup, copilot.js systemRowHtml()) already supplies the color. */
.copilot-msg-system { align-self: center; max-width: 92%; text-align: center; font-size: 12px; padding: 2px 4px; }
/* Plain card radius everywhere (var(--ax-radius-l)) — no chat-bubble tail corner, same panel
   language as every other surface (wave 12K). */
.copilot-bubble { padding: 10px 12px; border-radius: var(--ax-radius-l); font-size: 13px; line-height: 1.8; transition: none; }
/* Wave 15 (brief-15-stream-cards.md): while streaming, copilot.js writes raw deltas straight
   into the bubble via textContent (no <p>/<ul> wrapping yet) — pre-wrap keeps the line breaks
   the model actually sent instead of collapsing them like normal text flow would. Dropped again
   once `.copilot-live` is removed (finalizeLive()), when the markdown-lite <p>/<ul> rendering
   takes over and supplies its own spacing. */
.copilot-live .copilot-bubble { white-space: pre-wrap; }
.copilot-msg-user .copilot-bubble { background: var(--ax-ink); color: var(--ax-paper); }
.copilot-msg-assistant .copilot-bubble { background: var(--ax-paper); color: var(--ax-text); border: 1px solid var(--ax-line); }
.copilot-ts { display: block; font-size: 11px; color: var(--ax-muted-2); margin-top: 2px; opacity: 0; transition: opacity .15s; }
.copilot-msg:hover .copilot-ts, .copilot-msg:focus-within .copilot-ts { opacity: 1; }
.copilot-msg-user .copilot-ts { text-align: right; } .copilot-msg-assistant .copilot-ts { text-align: left; }
.copilot-bubble p { margin: 0 0 6px; }
.copilot-bubble p:last-child { margin-bottom: 0; }
.copilot-bubble ul { margin: 0 0 6px; padding-inline-start: 20px; }
.copilot-bubble ul:last-child { margin-bottom: 0; }
.copilot-bubble a { color: inherit; text-decoration: underline; }
.copilot-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; width: 100%; }
/* Confirm is the one card type that still gets a boxed look — a real nested .card.card-sm
   (same primitive as a module card, a stat card, …) instead of a bespoke box (wave 12K). */
.copilot-mcard-confirm h4 { margin: 0 0 4px; font-size: 14px; }
.copilot-mcard-confirm > p { margin: 0 0 10px; }
.copilot-mcard-confirm .pill { margin-top: 2px; }
.copilot-mcard-confirm.is-danger { border-color: #f1c2bc; }
/* the soft light-mode pink above has no dark counterpart — on the dark card surface it would
   read as a near-invisible/wrong-toned line instead of a danger accent, so point dark mode at
   the error-ink token that's already tuned to read against dark surfaces (Wave 12C dark-mode pass). */
[data-theme="dark"] .copilot-mcard-confirm.is-danger { border-color: var(--ax-error-ink); }
.copilot-mcard-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Barchin wave B3 (brief-B3-copilot-lead-sourcing.md §2): `connect` card — same boxed look as
   .copilot-mcard-confirm above (monochrome: black button, no color accent). */
.copilot-mcard-connect h4 { margin: 0 0 4px; font-size: 14px; }
.copilot-mcard-connect > p { margin: 0 0 10px; }
.copilot-mcard-connect.is-done .pill { margin-top: 2px; }
.copilot-consent { font-size: 12px; margin-bottom: 8px; }
/* Links/uploads are now plain .btn.btn-ghost.btn-sm elements directly inside .copilot-cards,
   which stretches flex children full-width by default — pull them back to their own size. */
.copilot-mcard-link, .copilot-mcard-upload { align-self: flex-start; }
/* Stats: the real .table class, just sized down to fit a message card (wave 12K). */
.copilot-mcard-stats { width: 100%; }
.copilot-mcard-stats b { display: block; margin-bottom: 4px; font-size: 13px; }
.copilot-mcard-stats table.table { font-size: 12px; }
.copilot-mcard-stats .table td { padding: 4px 0; border-bottom: 1px solid var(--ax-line); }
.copilot-mcard-stats .table tr:last-child td { border-bottom: 0; }
.copilot-mcard-stats .table td:first-child { color: var(--ax-muted); }
/* Wave 28 (brief-28-chat-polish.md): the compact one-liner alternative to .copilot-mcard-stats
   for a small add_contacts batch — a single muted line, no box/table. */
.copilot-mcard-note { width: 100%; margin: 0; font-size: 12px; }
/* Wave 31 (brief-31-test3-fixes.md item A): a confirm card whose 30-minute window ran out with
   nobody clicking either button — same one-liner treatment as .copilot-mcard-note above, no box. */
.copilot-mcard-expired { width: 100%; margin: 0; font-size: 12px; }
.copilot-mcard-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* `choices` card (Wave 12M) — clickable engine/voice picker, same card-ish look as .tier-grid/
   .voice-grid on /app/voice (border, radius, padding) but built from real <button>s instead of
   radio+label (so a plain ▶ sample button can sit as its own sibling button, never nested
   inside another button) and rendered entirely client-side from the Card JSON. */
.copilot-mcard-choices h4 { margin: 0 0 8px; font-size: 14px; }
/* Wave 22: `kind:'engine'|'voice'` legacy cards only exist in old threads now (the live flow
   below renders one combined `engine_voice` picker instead) — still laid out in the same
   side-by-side compact grid as the new picker, not a tall single column, so an old open card
   doesn't take the whole screen either. */
.copilot-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.copilot-choice-row { display: flex; align-items: stretch; gap: 8px; }
.copilot-choice-item { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--ax-line-2); border-radius: var(--radius-card); background: var(--ax-paper); color: var(--ax-text); text-align: right; cursor: pointer; font: inherit; transition: all .15s; }
.copilot-choice-item:hover:not(:disabled) { border-color: var(--ax-ink); }
.copilot-choice-item:focus-visible { outline: 2px solid var(--ax-ink); outline-offset: 2px; }
.copilot-choice-item.is-selected { background: var(--ax-ink); color: #fff; border-color: var(--ax-ink); }
[data-theme="dark"] .copilot-choice-item.is-selected { background: #fff; color: #0E1116; border-color: #fff; }
.copilot-choice-item:disabled { cursor: default; }
.copilot-mcard-choices.is-done .copilot-choice-item:not(.is-selected) { opacity: .5; }
.copilot-choice-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.copilot-choice-main b { font-size: 13px; }
.copilot-choice-main small { font-size: 12px; font-weight: 400; color: inherit; opacity: .75; }
.copilot-choice-meta { flex: none; font-size: 11px; color: inherit; opacity: .75; white-space: nowrap; }
.copilot-choice-check { flex: none; width: 16px; height: 16px; }
.copilot-mcard-choices .pill { margin-top: 10px; }

/* Wave 22 — combined engine+voice picker card (`choices` / kind:'engine_voice'): one compact
   card instead of two tall ones, picks staged LOCALLY and sent only on تأیید (see copilot.js
   engineVoicePickerHtml()/onPickEngine()/onPickVoice()/onPickerConfirm()). Black & white only,
   same selected-state treatment as .copilot-choice-item.is-selected above. */
.copilot-picker-engines { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.copilot-pick { border: 1px solid var(--ax-line-2); border-radius: var(--radius-card); background: var(--ax-paper); color: var(--ax-text); padding: 8px 10px; text-align: right; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.copilot-pick b { font-size: 13px; }
.copilot-pick small { font-size: 11px; opacity: .75; }
.copilot-pick:hover:not(:disabled) { border-color: var(--ax-ink); }
.copilot-pick:focus-visible { outline: 2px solid var(--ax-ink); outline-offset: 2px; }
.copilot-pick:disabled { cursor: default; }
.copilot-pick[aria-pressed="true"] { background: var(--ax-ink); color: #fff; border-color: var(--ax-ink); }
[data-theme="dark"] .copilot-pick[aria-pressed="true"] { background: #fff; color: #0E1116; border-color: #fff; }
.copilot-picker-voices { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
/* Wave 55 (brief-55-voice-pill.md, owner: «دکمه پخش خارج از باکسشه») — the ROW is now the pill
   (border/radius/background live here, overflow:hidden clips both children to the rounded
   shape) so the ▶ sample button sits INSIDE the voice box instead of as a separate ghost
   button beside it. Both inner buttons go borderless/transparent (see below) and a 1px
   divider on .voice-play stands in for the old row `gap`. */
.copilot-picker-voice-row { display: flex; align-items: stretch; min-height: 40px; border: 1px solid var(--ax-line); border-radius: 999px; background: var(--ax-surface); overflow: hidden; transition: background .15s, border-color .15s; }
.copilot-picker-voice-row:hover:not(.is-selected) { background: var(--ax-surface-2); }
.copilot-picker-voice-row .copilot-pick-voice { flex: 1 1 auto; justify-content: center; align-items: center; text-align: center; font-size: 13px; border: 0; border-radius: 0; background: transparent; padding: 8px 12px; }
.copilot-picker-voice-row .copilot-pick-voice:focus-visible { outline: 2px solid var(--ax-ink); outline-offset: -2px; }
.copilot-picker-voice-row .voice-play { flex: none; width: 40px; border: 0; border-radius: 0; background: transparent; border-inline-start: 1px solid var(--ax-line); }
.copilot-picker-voice-row .voice-play:focus-visible { outline: 2px solid var(--ax-ink); outline-offset: -2px; }
/* Selected row = the same black/white pill the engine tiles use (`.copilot-pick[aria-pressed]`
   above) — now painted on the row so the whole pill (incl. the play button) inverts together.
   Inner buttons just inherit `color` from the row; the divider softens to a translucent line
   on the inverted background instead of the flat line color. */
.copilot-picker-voice-row.is-selected { background: var(--ax-ink); border-color: var(--ax-ink); color: #fff; }
.copilot-picker-voice-row.is-selected .copilot-pick-voice,
.copilot-picker-voice-row.is-selected .voice-play { color: inherit; }
.copilot-picker-voice-row.is-selected .voice-play { border-inline-start-color: rgba(255, 255, 255, .25); }
.copilot-picker-voice-row.is-selected .voice-play.is-playing { background: rgba(255, 255, 255, .22); color: #fff; }
[data-theme="dark"] .copilot-picker-voice-row.is-selected { background: #fff; border-color: #fff; color: #0E1116; }
[data-theme="dark"] .copilot-picker-voice-row.is-selected .voice-play { border-inline-start-color: rgba(14, 17, 22, .25); }
[data-theme="dark"] .copilot-picker-voice-row.is-selected .voice-play.is-playing { background: rgba(14, 17, 22, .18); color: #0E1116; }
.copilot-picker-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.copilot-picker-hint { font-size: 12px; }
.copilot-picker.is-busy { opacity: .6; pointer-events: none; }
.copilot-picker .pill { margin-top: 8px; }
@media (max-width: 640px) {
  .copilot-picker-engines { grid-template-columns: repeat(2, 1fr); }
}

/* Wave 22b (brief-22b-picker-supersede.md) — once a different choice was confirmed, an open
   engine_voice picker (is-superseded, collapsed by copilot.js like is-done but without the pill)
   and a legacy engine/voice card's now-always-disabled items both stop looking actionable. */
.copilot-picker.is-superseded .copilot-pick-engine, .copilot-mcard-choices .copilot-choice-item:disabled { opacity: .6; cursor: default; }
/* Wave 55: the voice row's pill chrome now lives on `.copilot-picker-voice-row` itself (not on
   `.copilot-pick-voice`), so dimming has to target the row or the superseded row would keep its
   full-strength black/white pill background while only its text faded — mismatching the
   muted look every other superseded tile gets. */
.copilot-picker.is-superseded .copilot-picker-voice-row { opacity: .6; }
.copilot-picker.is-superseded .copilot-pick-voice, .copilot-picker.is-superseded .voice-play { cursor: default; }
.copilot-picker-note { font-size: 12px; color: var(--ax-muted); margin-top: 6px; }

/* Wave 51 (brief-51-structured-proposal.md) — `proposal` card: the scenario/first_message
   text is DATA now, rendered as a real card instead of ever appearing as prose in a bubble.
   Black & white only, same card-ish look as .copilot-mcard-choices above; the scenario block
   gets its own inner scroll so a long multi-branch scenario never pushes the تأیید متن button
   off-screen. */
.copilot-mcard-proposal h4 { margin: 0 0 8px; font-size: 14px; }
.copilot-proposal-label { margin: 10px 0 4px; font-size: 11px; text-transform: none; }
.copilot-proposal-label:first-of-type { margin-top: 0; }
.copilot-proposal-scenario { max-height: 320px; overflow-y: auto; border: 1px solid var(--ax-line-2); border-radius: var(--radius-card); padding: var(--sp-3); background: var(--ax-surface); font-size: 13px; line-height: 1.8; }
.copilot-proposal-scenario p { margin: 0 0 6px; }
.copilot-proposal-scenario p:last-child { margin-bottom: 0; }
.copilot-proposal-labels { margin: 8px 0 0; font-size: 12px; }
.copilot-mcard-proposal .copilot-mcard-actions { margin-top: 10px; }
.copilot-mcard-proposal .pill { margin-top: 10px; }
.copilot-mcard-proposal.is-superseded { opacity: .6; }

/* Wave 52 (brief-52-flowchart.md) — the proposal card's structured `steps` render as a vertical
   flowchart instead of the Wave-51 plain scenario block (kept as-is, above, for a text-only
   `steps:null` fallback proposal). Monochrome throughout — same panel rule as everything else
   in this file: `.pill` (grey) for the end/outcome tags, `var(--ax-ink)` for the step-number
   dot and every focus/hover accent, never a brand/success/error color. */
.cp-flow { display: flex; flex-direction: column; margin: 10px 0; }
.cp-flow-step { display: flex; gap: 10px; position: relative; padding-bottom: 16px; border-radius: var(--radius-card); transition: background .2s; }
.cp-flow-step:last-child { padding-bottom: 0; }
.cp-flow-marker { flex: none; display: flex; flex-direction: column; align-items: center; }
.cp-flow-num { width: 22px; height: 22px; border-radius: 50%; background: var(--ax-ink); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
[data-theme="dark"] .cp-flow-num { background: #fff; color: #0E1116; }
/* The thin connector joining consecutive step boxes — a flex-grow spacer inside the marker
   column fills exactly the gap between this step's number and the next one's. */
.cp-flow-step:not(:last-child) .cp-flow-marker::after { content: ''; flex: 1 1 auto; width: 2px; min-height: 8px; margin: 3px 0; background: var(--ax-line-2); }
.cp-flow-content { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.cp-flow-title { font-size: 11px; margin-bottom: 4px; }
.cp-flow-say { font-size: 13px; line-height: 1.8; margin-bottom: 4px; }
.cp-flow-say-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cp-flow-more { display: inline-block; margin-top: 2px; font-size: 12px; }
.cp-flow-ask { font-size: 13px; line-height: 1.8; margin-bottom: 4px; }
.cp-flow-ask b { font-weight: 700; }
.cp-flow-branches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.cp-flow-branch { border: 1px solid var(--ax-line-2); border-radius: 999px; background: var(--ax-surface); color: var(--ax-text); font: inherit; font-size: 12px; padding: 4px 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.cp-flow-branch:hover { border-color: var(--ax-ink); }
.cp-flow-branch:focus-visible { outline: 2px solid var(--ax-ink); outline-offset: 2px; }
.cp-flow-add-branch, .cp-flow-add-step { border-style: dashed; color: var(--ax-muted); }
.cp-flow-add-step { margin-top: 8px; }
.cp-flow-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cp-flow-tags .pill { margin-top: 0; }
/* Plain muted text button, not a `.btn` — sits at the end of the branch-chip row
   (.cp-flow-branches) so it never reads as a heading-weight action of its own. */
.cp-flow-del-step { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 12px; color: var(--ax-muted); cursor: pointer; }
.cp-flow-del-step:hover { color: var(--ax-text); text-decoration: underline; }
.cp-flow-step-err, .cp-flow-field-err, .cp-flow-card-err { font-size: 12px; margin: 6px 0 0; }
/* Inline edit affordances: a click-to-edit field/placeholder gets the pointer + a faint hover
   border so it reads as editable without any color accent; the edit form itself reuses the
   sitewide `.input` primitive, just sized down to sit comfortably inside a message card. */
[data-flow-field] { cursor: text; border: 1px dashed transparent; border-radius: 6px; padding: 2px 4px; margin: -2px -4px 2px; transition: border-color .15s; }
[data-flow-field]:hover { border-color: var(--ax-line-2); }
.cp-flow-edit-input, .cp-flow-edit-select { min-height: 36px; padding: 6px 10px; font-size: 13px; margin-bottom: 6px; }
textarea.cp-flow-edit-input { min-height: 72px; line-height: 1.7; resize: vertical; }
.cp-flow-edit-input:focus, .cp-flow-edit-select:focus { outline: none; border-color: var(--ax-ink); box-shadow: none; }
.cp-flow-edit-actions { display: flex; gap: 8px; margin-bottom: 4px; }
.cp-flow-branch-edit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cp-flow-branch-edit .cp-flow-edit-input { width: 160px; margin-bottom: 0; }
.cp-flow-branch-edit .cp-flow-edit-select { width: auto; margin-bottom: 0; }
.cp-flow-advisories { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.cp-flow-advisories p { font-size: 12px; margin: 0; }
.cp-flow-suggestions { margin-top: 10px; border-top: 1px solid var(--ax-line); padding-top: 10px; }
.cp-flow-suggestions-title { margin: 0 0 6px; font-size: 12px; }
.cp-flow-suggestion { margin-bottom: 10px; }
.cp-flow-suggestion-text { margin: 0 0 6px; font-size: 12px; }
.cp-flow-suggestion-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cp-flow-suggestion-target { min-height: 36px; padding: 6px 10px; font-size: 12px; width: auto; }
.cp-flow-toggle-rendered { margin-top: 10px; }
.cp-flow-rendered { margin-top: 8px; white-space: pre-wrap; font: inherit; font-size: 12px; line-height: 1.8; border: 1px solid var(--ax-line-2); border-radius: var(--radius-card); padding: var(--sp-3); background: var(--ax-surface); max-height: 320px; overflow-y: auto; }
.copilot-mcard-proposal.is-busy { opacity: .7; pointer-events: none; }
/* Branch-chip click target flash (B1: "scroll to + flash the target box") — a brief grey wash
   that fades back out on its own (copilot.js adds/removes `.is-flash` around a 1s timeout); no
   color, just the existing surface-2 grey. */
@keyframes cp-flow-flash-fade { from { background: var(--ax-surface-2); } to { background: transparent; } }
.cp-flow-step.is-flash { animation: cp-flow-flash-fade 1s ease; }
@media (max-width: 640px) {
  .cp-flow-branch-edit .cp-flow-edit-input, .cp-flow-branch-edit .cp-flow-edit-select { width: 100%; }
}
/* Wave 54 (brief-54-flow-panel.md item B2): the compact proposal card shown once the side panel
   exists — first message (unchanged markup above) + this one summary line + the existing
   actions row (تأیید متن / باز کردن فلوچارت, see proposalCardHtml()). */
.copilot-proposal-compact { margin: 6px 0 0; font-size: 13px; }

/* ==========================================================================
   Wave 54 (brief-54-flow-panel.md) — the flowchart as a real side panel + tree view,
   shared between the chat page's panel and the campaign page's read-only embed (flowchart.js).
   Monochrome throughout: ink/grey/white only, exactly like the Wave 52 block just above — no
   blue anywhere in this module (panel design rule); the one red the save-error line borrows
   already exists site-wide (--ax-error-ink/100, same as every other error pill).
   ========================================================================== */

/* ---- the panel itself (.copilot-flowpane, chat page only) ---- */
.copilot-flowpane {
  flex: 0 0 46%;
  width: 46%;
  min-width: 380px;
  max-width: 70%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--ax-paper);
  border-inline-end: 1px solid var(--ax-line);
  /* Visually docked between the chat column and the main nav (owner: «سمت راست چت») —
     `order` (not DOM position) decides the side, so this works whether Agent A's markup lands
     the <aside> as a sibling of .copilot-shell or nested inside it (both are flex rows here —
     see .panel-body.is-full-bleed and .copilot-shell above). Flip to the other side anywhere
     in the app by adding/removing the single `.is-left` class below — nothing else to touch. */
  order: -1;
}
.copilot-flowpane[hidden] { display: none; }
.copilot-flowpane.is-left { order: 1; border-inline-end: 0; border-inline-start: 1px solid var(--ax-line); }
[data-copilot="page"] { position: relative; } /* positioning context for the reopen pill below */

/* «فلوچارت» reopen pill — brief: "top-left corner of the messages area (RTL: visually at the
   start of the row)" = inset-inline-start, which resolves to the screen-right edge under RTL. */
.cp-reopen-flow { position: absolute; top: 14px; inset-inline-start: 16px; z-index: 5; background: var(--ax-paper); cursor: pointer; }
.cp-reopen-flow:hover { background: var(--ax-surface-2); }

.cpf-resize { position: absolute; top: 0; bottom: 0; inset-inline-end: -3px; width: 7px; cursor: col-resize; z-index: 3; }
.copilot-flowpane.is-left .cpf-resize { inset-inline-end: auto; inset-inline-start: -3px; }
.cpf-resize:hover, body.is-resizing-flowpane .cpf-resize { background: var(--ax-line-2); }
body.is-resizing-flowpane { cursor: col-resize; user-select: none; }

.cpf-head { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--ax-line); }
.cpf-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cpf-title b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpf-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cpf-close { flex: none; width: 30px; height: 30px; border: 0; background: none; color: var(--ax-muted); font-size: 18px; line-height: 1; border-radius: 8px; cursor: pointer; }
.cpf-close:hover { background: var(--ax-surface-2); color: var(--ax-ink); }
.cpf-err { margin: 0; padding: 0 16px; font-size: 12px; }
.cpf-err:not([hidden]) { padding: 8px 16px; color: var(--ax-error-ink); background: var(--ax-error-100); }

@media (max-width: 900px) {
  /* Mobile: full-screen overlay (brief) — !important beats the resize handle's inline px
     width/flex-basis (copilot.js) without needing JS to know about this breakpoint at all. */
  .copilot-flowpane {
    position: fixed !important; inset: 0 !important; width: 100% !important; max-width: 100% !important;
    height: 100% !important; flex-basis: auto !important; order: 0 !important; z-index: 260; border: 0 !important;
  }
  .cpf-resize { display: none; }
}

/* ---- shared tree canvas (chat panel's own mount point AND campaign.php's read-only embed) ---- */
.cp-flow-canvas { position: relative; background: var(--ax-surface); border-radius: var(--radius-card); overflow: hidden; height: 60vh; min-height: 420px; }
.cp-flow-canvas.cpf-canvas { flex: 1 1 auto; height: auto; min-height: 0; border-radius: 0; background: var(--ax-paper); }
.cp-flow-empty { padding: var(--sp-3); margin: 0; }
.cp-flow-save-err { margin: 0; padding: 8px var(--sp-3); color: var(--ax-error-ink); background: var(--ax-error-100); }

.cp-tree-wrap { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; }
.cp-tree-viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; cursor: grab; touch-action: none; }
.cp-tree-viewport:focus-visible { outline: none; } /* own nodes/popovers show their own focus rings */
.cp-tree-viewport.is-panning { cursor: grabbing; }
.cp-tree-layer { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.cp-tree-layer.is-animating { transition: transform .12s ease; } /* Wave 56: buttons animate 120ms (brief #1) */
@media (prefers-reduced-motion: reduce) { .cp-tree-layer.is-animating { transition: none; } }
.cp-tree-edges { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.cp-edge-path { fill: none; stroke: var(--ax-line-2); stroke-width: 1.5; }
.cp-edge-path.is-loop { stroke-dasharray: 5 4; }
.cp-edge-path.is-hl { stroke: var(--ax-ink); stroke-width: 2; } /* Wave 56 #2: hovering its label or either node */
[data-theme="dark"] .cp-edge-path.is-hl { stroke: #fff; }
.cp-edge-arrow-fill { fill: var(--ax-line-2); }
.cp-tree-pop-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.cp-tree-pop-layer > .cp-popover { pointer-events: auto; }

.cp-tree-toolbar { position: absolute; bottom: 12px; inset-inline-end: 12px; display: flex; align-items: center; gap: 2px; background: var(--ax-paper); border: 1px solid var(--ax-line); border-radius: 999px; padding: 4px; box-shadow: var(--ax-shadow-s); z-index: 2; }
.cp-tree-toolbar button { border: 0; background: none; min-width: 32px; height: 30px; border-radius: 999px; font: inherit; font-size: 12px; color: var(--ax-ink); cursor: pointer; padding: 0 10px; }
.cp-tree-toolbar button:hover { background: var(--ax-surface-2); }
.cp-tree-zoom-label { min-width: 40px; text-align: center; font-size: 11px; color: var(--ax-muted); user-select: none; } /* Wave 56 #1: current zoom, Persian digits */

/* ---- node boxes ---- */
.cp-node { position: absolute; width: 260px; background: var(--ax-paper); border: 1px solid var(--ax-line); border-radius: var(--radius-card); padding: 12px; box-shadow: var(--ax-shadow-s); font-size: 13px; }
.cp-node.is-end { border-color: var(--ax-ink); }
[data-theme="dark"] .cp-node.is-end { border-color: #fff; }
.cp-node.is-unreachable { opacity: .55; border-style: dashed; }
.cp-node.is-flash { animation: cp-flow-flash-fade 1s ease; }
.cp-node.is-busy { opacity: .6; pointer-events: none; }
.cp-node-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.cp-node-num { width: 20px; height: 20px; border-radius: 50%; background: var(--ax-ink); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
[data-theme="dark"] .cp-node-num { background: #fff; color: #0E1116; }
.cp-node-title { flex: 1 1 auto; min-width: 0; font-size: 11px; color: var(--ax-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-node-menu-btn { flex: none; border: 0; background: none; color: var(--ax-muted); width: 22px; height: 22px; border-radius: 6px; cursor: pointer; line-height: 1; font-size: 15px; }
.cp-node-menu-btn:hover { background: var(--ax-surface-2); color: var(--ax-ink); }
.cp-node-say { font-size: 12px; line-height: 1.7; margin-bottom: 4px; cursor: text; }
.cp-node-say-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cp-node-more { font-size: 11px; display: inline-block; margin-top: 2px; }
.cp-node-ask { font-size: 12px; line-height: 1.7; margin-bottom: 4px; cursor: text; }
.cp-node-ask b { font-weight: 700; }
.cp-node-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cp-node-tags .pill { min-height: 20px; font-size: 10px; padding: 0 8px; }
.cp-node-err { font-size: 11px; margin: 4px 0 0; }
[data-cp-field] { cursor: pointer; border-radius: 6px; margin: -2px -4px; padding: 2px 4px; }
[data-cp-field]:hover { background: var(--ax-surface-2); }

.cp-node-callouts { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.cp-node-callouts:empty { display: none; }
.cp-callout { border: 1px solid var(--ax-line); border-radius: 8px; padding: 6px 8px; background: var(--ax-surface); }
.cp-callout p { margin: 0 0 4px; font-size: 11px; color: var(--ax-muted); }
.cp-callout .btn { margin-top: 0; }

.cp-edge-label { position: absolute; transform: translate(-50%, -50%); border: 1px solid var(--ax-line-2); border-radius: 999px; background: var(--ax-paper); color: var(--ax-text); font: inherit; font-size: 11px; padding: 3px 10px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; z-index: 1; }
.cp-edge-label:hover { border-color: var(--ax-ink); }

/* ---- edit popovers (fixed-scale overlay — NOT inside the zoomed/panned layer) ---- */
.cp-popover { position: absolute; z-index: 5; background: var(--ax-paper); border: 1px solid var(--ax-line-2); border-radius: var(--radius-ctl); box-shadow: var(--ax-shadow-m); padding: 10px; display: flex; flex-direction: column; gap: 6px; width: 260px; }
.cp-popover-input, .cp-popover-select { min-height: 36px; padding: 6px 10px; font-size: 13px; }
textarea.cp-popover-input { min-height: 72px; line-height: 1.7; resize: vertical; }
.cp-popover-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-popover-err { font-size: 11px; margin: 0; }
.cp-node-menu-pop { width: 220px; }
.cp-menu-item { display: flex; align-items: center; gap: 6px; border: 0; background: none; text-align: inherit; padding: 6px 2px; font: inherit; font-size: 13px; color: var(--ax-text); cursor: pointer; border-radius: 6px; }
.cp-menu-item:hover { background: var(--ax-surface-2); }
.cp-menu-outcome { flex-direction: column; align-items: stretch; gap: 4px; cursor: default; }
.cp-menu-outcome:hover { background: none; }

/* ---- global (step:null) advisories/suggestions footer, below the pannable tree ---- */
.cp-flow-global { flex: none; border-top: 1px solid var(--ax-line); padding: var(--sp-3); max-height: 160px; overflow-y: auto; background: var(--ax-paper); }
.cp-flow-global-advisory { font-size: 12px; margin: 0 0 4px; }
.cp-flow-global-title { font-size: 11px; margin: 0 0 6px; }

.copilot-sys-note { align-self: center; font-size: 12px; color: var(--ax-error-ink); background: var(--ax-error-100); padding: 4px 10px; border-radius: 999px; }
.copilot-typing { display: flex; align-items: center; gap: 6px; padding: 0 14px 8px; font-size: 12px; color: var(--ax-muted); flex: none; background: var(--ax-surface); }
/* Wave 46 (brief-46-checklist.md §5) — campaign checklist progress strip, shown above the
   composer only while a campaign flow is active (hidden otherwise via the shared [hidden] rule
   above). Monochrome, one line: muted text + the existing .pill for the step count — no color
   accents (panel design rule). */
.copilot-progress { display: flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 12px; color: var(--ax-muted); border-top: 1px solid var(--ax-line); background: var(--ax-paper); flex: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.copilot-progress b { color: var(--ax-text); font-weight: 600; }
.copilot-progress .pill { flex: none; }
.copilot-shell .copilot-progress { padding-inline: 24px; }
/* Streaming reply (wave 7): a blinking caret after the in-progress assistant bubble's text,
   and the small "🔎 در حال …" status line shown under it while a tool call is running. */
.copilot-live .copilot-bubble::after { content: ''; display: inline-block; width: 7px; height: 14px; margin-inline-start: 2px; vertical-align: -2px; background: currentColor; opacity: .55; animation: copilot-caret-blink 1s step-end infinite; }
@keyframes copilot-caret-blink { 50% { opacity: 0; } }
/* Wave 15: one persistent node per turn now (copilot.js reuses/moves it instead of
   inserting+removing it for every tool call in a multi-tool turn) — a fixed height means
   blanking its text between tool calls (hideToolText()) reserves the same space instead of
   the line collapsing and popping back, which used to shift everything above it on each
   tool start/done. */
.copilot-tool-status { align-self: flex-end; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ax-muted); padding: 2px 4px; min-height: 20px; box-sizing: border-box; }
/* [hidden] has the same specificity as the class rules above, and author CSS beats the UA
   default `[hidden]{display:none}` regardless of specificity — so any `.copilot-*` element the
   JS toggles via the `hidden` property/attribute needs this to actually disappear. */
.copilot [hidden], .copilot-drawer[hidden], .copilot-fab[hidden] { display: none !important; }
.copilot-msg.is-error .copilot-bubble { opacity: .7; }
.copilot-send-error { align-self: flex-start; margin: 0; border: 0; background: none; padding: 0; font-size: 11px; line-height: 1.6; color: var(--ax-error-ink); cursor: pointer; text-decoration: underline; }
.copilot-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ax-line); background: var(--ax-paper); flex: none; }
/* Attach (📎) is a plain .btn.btn-ghost.btn-sm now — no bespoke button rule needed. .copilot-text
   carries the real .input class too; this just re-tunes size/radius for the composer row.
   Wave 13 (brief-13-campaign-edit.md): the selector below used to be the bare class `.copilot-text`
   (specificity 0,0,1,0) — LOWER than `textarea.input` above (0,0,1,1, element+class), which actually
   won on min-height regardless of source order, rendering the composer at the generic textarea's
   120px instead of one line. Qualified as `textarea.copilot-text` now so the specificity actually
   ties with `textarea.input`, and this rule — declared later in the file — wins the tie. Starts at
   one line (~40px, matches the markup's rows="1") and grows up to ~4 rows; copilot.js's autoGrow()
   already caps growth at this same 100px. */
textarea.copilot-text { flex: 1; resize: none; border: 1px solid var(--ax-line-2); border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 13px; max-height: 100px; min-height: 40px; line-height: 1.6; background: var(--ax-paper); color: var(--ax-text); }
.copilot-text:focus { outline: 2px solid var(--ax-ink); outline-offset: 2px; border-color: var(--ax-ink); }
.copilot-text:disabled { opacity: .6; }
/* iOS Safari auto-zooms the page on focusing any input/textarea under 16px — this was the
   only form control on the site below that threshold, and it's exactly what a visitor taps
   first on the post-login default page. Mobile-only override so the desktop composer (tuned
   above, see the Wave 13 note) keeps its compact 13px/40px sizing. */
@media (max-width: 960px) { textarea.copilot-text { font-size: 16px; } }
/* Send is the real .btn-primary (already ink-filled, already dark-mode aware) — just squared
   off into an icon-only button; no color override needed any more (wave 12K). */
.copilot-send { flex: none; min-height: 38px; width: 38px; height: 38px; padding: 0; border-radius: 12px; box-shadow: none; }
.copilot-send svg { width: 16px; height: 16px; }
.copilot-foot { padding: 2px 14px 10px; text-align: left; direction: ltr; flex: none; }

/* floating action button + drawer (RTL: bottom-left) */
.copilot-fab { position: fixed; bottom: 24px; left: 24px; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--ax-ink); color: #fff; display: grid; place-items: center; box-shadow: var(--ax-shadow-l); z-index: 200; cursor: pointer; transition: transform .15s; }
.copilot-fab:hover { transform: translateY(-2px); }
.copilot-fab svg { width: 22px; height: 22px; }
.copilot-drawer { position: fixed; inset: 0 auto 0 0; left: 0; right: auto; width: 440px; max-width: 92vw; background: var(--ax-paper); box-shadow: var(--ax-shadow-l); z-index: 210; transform: translateX(-105%); transition: transform .25s; display: flex; }
.copilot-drawer.is-open { transform: none; }
.copilot-drawer .copilot { width: 100%; }
.copilot-close { flex: none; }

/* ==========================================================================
   Wave 17 — /app/copilot full-bleed page: a left-edge thread list (RTL: the
   screen's true left edge, since the sidebar owns the right) + a plain, borderless
   conversation column. Monochrome throughout — grey tint for the active thread, never blue.
   ========================================================================== */
.copilot-shell { display: flex; height: 100%; min-height: 0; background: var(--ax-paper); }
/* DOM order is (conversation, thread list) — under dir=rtl that puts the conversation at the
   inline-start (screen-right) and the list last, at the screen's left edge, per the brief. */
.copilot-shell .copilot { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; border-radius: 0; box-shadow: none; background: var(--ax-paper); }
/* No boxed card around the conversation any more — messages/composer/footer each center at a
   chat-width column instead of stretching full width, same "paper" background throughout.
   Wave 18 (owner: «فضای خالی اضافه سمت راست و چپ چت باکس وجود داره» — on a ~2000px-wide
   screen the old 820px cap left huge empty margins either side of the column): widened to
   1120px (~85% of the available area once the 260px thread list is subtracted) with its own
   32px side padding on .copilot-messages so text doesn't run to the column's own edges;
   .copilot-composer/.copilot-foot share the same max-width so the input bar lines up under
   the messages instead of looking narrower. Bubbles capped tighter (72%, was the global 78%
   from .copilot-msg) so a line doesn't stretch uncomfortably wide at 1120px. Scoped to
   .copilot-shell only — card mode (plain .copilot) and the drawer (.copilot-drawer .copilot)
   keep their original narrower width untouched. */
/* Owner (2026-10-12, third pass): «چت باید از راست به منو راست بچسبه و از چپ به ساید بار چپ
   بچسبه» — no centered cap at all any more; the column is the full width between the thread
   list and the nav, with only its own 24px breathing room inside. */
.copilot-shell .copilot-messages,
.copilot-shell .copilot-composer,
.copilot-shell .copilot-foot { width: 100%; max-width: none; margin-inline: 0; }
.copilot-shell .copilot-messages { padding-inline: 24px; }
.copilot-shell .copilot-msg { max-width: 72%; }
/* Owner (2026-10-12): «هنوز یه فاصله اضافه وجود داره» — the 72% cap on assistant rows left an
   empty ~28% band beside every assistant message and confirm card (assistant sits on the left
   in RTL, so the band was on the right). Assistant rows and their cards may now use the whole
   column; short replies still size to their content because the row is a flex item aligned to
   one side, not stretched. User bubbles keep the 72% cap. */
.copilot-shell .copilot-msg-assistant { max-width: 100%; }
/* Quiet, thin scrollbar for the messages column — the owner's screenshot showed the browser's
   default dark, thick scrollbar sitting right on the column's left edge. Firefox via the
   standard properties, Chrome/Safari/Edge via the legacy ::-webkit-scrollbar pseudo-elements;
   both are harmless no-ops in browsers that don't support them. */
.copilot-shell .copilot-messages { scrollbar-width: thin; scrollbar-color: var(--ax-line) transparent; }
.copilot-shell .copilot-messages::-webkit-scrollbar { width: 6px; }
.copilot-shell .copilot-messages::-webkit-scrollbar-track { background: transparent; }
.copilot-shell .copilot-messages::-webkit-scrollbar-thumb { background: var(--ax-line); border-radius: 999px; }
.copilot-shell .copilot-head { flex: none; padding: 0; border-bottom: 0; display: none; }

.copilot-threads { flex: none; width: 260px; border-right: 1px solid var(--ax-line); background: var(--ax-paper); display: flex; flex-direction: column; gap: 10px; padding: 14px 10px; overflow-y: auto; }
.copilot-thread-groups { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.copilot-thread-group-label { font-size: var(--ax-fs-xs); font-weight: 700; color: var(--ax-muted-2); padding: 12px 8px 4px; }
.copilot-thread-group-label:first-child { padding-top: 4px; }
.copilot-thread-row { display: flex; align-items: center; gap: 2px; border-radius: 10px; }
.copilot-thread-row:hover, .copilot-thread-row:focus-within { background: var(--ax-surface); }
.copilot-thread-row.is-active { background: var(--ax-surface-2); }
.copilot-thread-open { flex: 1 1 auto; min-width: 0; text-align: right; background: none; border: 0; padding: 9px 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ax-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.copilot-thread-row.is-active .copilot-thread-open { color: var(--ax-ink); font-weight: 700; }
.copilot-thread-actions { flex: none; display: flex; align-items: center; gap: 2px; padding-inline-end: 4px; opacity: 0; transition: opacity .1s; }
.copilot-thread-row:hover .copilot-thread-actions, .copilot-thread-row:focus-within .copilot-thread-actions { opacity: 1; }
.copilot-thread-action { flex: none; width: 26px; height: 26px; border: 0; border-radius: 7px; background: none; color: var(--ax-muted); display: grid; place-items: center; cursor: pointer; }
.copilot-thread-action svg { width: 14px; height: 14px; }
.copilot-thread-action:hover { background: var(--ax-surface-2); color: var(--ax-ink); }
/* Wave 28 (brief-28-chat-polish.md): archived threads collapse into this at the bottom of the
   list instead of sitting inside امروز/دیروز/قبل‌تر next to open ones — same muted/12px look as
   .copilot-thread-group-label, so it reads as just another (collapsible) group header. */
.copilot-thread-archive { margin-top: 2px; }
.copilot-thread-archive > summary { font-size: var(--ax-fs-xs); font-weight: 700; color: var(--ax-muted-2); padding: 12px 8px 4px; cursor: pointer; list-style: none; }
.copilot-thread-archive > summary::-webkit-details-marker { display: none; }
.copilot-thread-archive[open] > summary { padding-bottom: 8px; }
.copilot-threads-empty { padding: 8px; margin: 0; }
.copilot-threads-toggle { display: none; }
.copilot-threads-backdrop { display: none; }
.copilot-threads { transition: width .16s; }
@media (prefers-reduced-motion: reduce) { .copilot-threads { transition: none; } }

/* ---- Wave 56 (brief-56-flow-ux.md #3): the thread list collapses to a 48px rail the same way
   the main nav does, while the flow panel is open — desktop only (min-width:901px matches the
   900px mobile cutoff for .copilot-threads below; the mobile off-canvas drawer is untouched).
   Same two controls («گفتگوی جدید»/«گفتگوها») in both states — rail mode just hides their text
   and turns «گفتگوها» into a flyout trigger for the SAME .copilot-thread-groups markup
   (copilot.js toggles .is-rail-flyout-open; no duplicate list markup). ---- */
.ct-rail-pin, .ct-rail-list-btn { display: none; }
@media (min-width: 901px) {
  body.is-flow-open .copilot-threads:not(.is-rail-pinned-open) { width: 48px; padding-inline: 6px; align-items: center; position: relative; }
  body.is-flow-open .copilot-threads:not(.is-rail-pinned-open) .ct-rail-pin {
    display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; align-self: center;
    border: 1px solid var(--ax-line); border-radius: 8px; background: var(--ax-paper); color: var(--ax-muted); cursor: pointer;
  }
  body.is-flow-open .copilot-threads:not(.is-rail-pinned-open) .ct-rail-pin svg { width: 14px; height: 14px; }
  body.is-flow-open .copilot-threads:not(.is-rail-pinned-open) .ct-rail-pin:hover { border-color: var(--ax-ink); color: var(--ax-ink); }
  body.is-flow-open .copilot-threads:not(.is-rail-pinned-open) [data-copilot-new] {
    width: 36px; height: 36px; min-height: 0; padding: 0; align-self: center; border-radius: 8px;
  }
  body.is-flow-open .copilot-threads:not(.is-rail-pinned-open) .ct-label { display: none; }
  body.is-flow-open .copilot-threads:not(.is-rail-pinned-open) .ct-rail-list-btn {
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; align-self: center;
    border: 0; border-radius: 8px; background: none; color: var(--ax-muted); cursor: pointer;
  }
  body.is-flow-open .copilot-threads:not(.is-rail-pinned-open) .ct-rail-list-btn svg { width: 18px; height: 18px; }
  body.is-flow-open .copilot-threads:not(.is-rail-pinned-open) .ct-rail-list-btn:hover { background: var(--ax-surface-2); color: var(--ax-ink); }
  /* collapsed by default — only the flyout (below) or the pin (full rail) show the list */
  body.is-flow-open .copilot-threads:not(.is-rail-pinned-open) .copilot-thread-groups { display: none; }
  body.is-flow-open .copilot-threads.is-rail-flyout-open:not(.is-rail-pinned-open) .copilot-thread-groups {
    /* .copilot-threads sits at the screen's physical left edge (see the Wave 17 note on
       .copilot-threads above) regardless of the page's own RTL flow, so this uses a plain
       physical `left`, not a logical inset, to open the flyout toward the chat column. */
    display: flex; position: absolute; left: 54px; top: 14px; width: 260px; max-height: calc(100vh - 28px);
    background: var(--ax-paper); border: 1px solid var(--ax-line); border-radius: var(--radius-card); box-shadow: var(--ax-shadow-m);
    padding: 8px; z-index: 145;
  }
}
/* brief #3: "the chat column and the panel share the freed width ... the chat gets the rest,
   min 360px" — already automatic (flex:1 1 auto on .copilot, the panel keeps its own
   remembered width), this is just the floor. */
.copilot-shell .copilot { min-width: 360px; }

/* Large, centered greeting on a brand-new thread (nothing but the local welcome message yet) —
   the chips become big pills instead of the compact inline ones used everywhere else. */
[data-copilot="page"] .copilot-messages.is-welcome-only { justify-content: center; }
[data-copilot="page"] .copilot-messages.is-welcome-only::after { display: none; }
[data-copilot="page"] .copilot-messages.is-welcome-only .copilot-msg-assistant { align-self: center; max-width: 640px; text-align: center; }
[data-copilot="page"] .copilot-messages.is-welcome-only .copilot-msg-assistant .copilot-bubble { background: none; border: 0; padding: 0; font-size: 22px; font-weight: 700; line-height: 1.6; }
[data-copilot="page"] .copilot-messages.is-welcome-only .copilot-ts { display: none; }
[data-copilot="page"] .copilot-messages.is-welcome-only .copilot-cards { align-items: center; }
[data-copilot="page"] .copilot-messages.is-welcome-only .copilot-mcard-chips { justify-content: center; gap: 10px; margin-top: 14px; }
[data-copilot="page"] .copilot-messages.is-welcome-only .copilot-mcard-chips .chip { min-height: 44px; padding: 0 20px; font-size: 14px; }

@media (max-width: 900px) {
  .copilot-threads-toggle { display: inline-flex; }
  .copilot-shell .copilot-head { display: flex; padding: 8px 14px; border-bottom: 1px solid var(--ax-line); }
  .copilot-threads { position: fixed; inset: 0 auto 0 0; left: 0; right: auto; top: 64px; height: calc(100vh - 64px); width: min(300px, 85vw); z-index: 140; transform: translateX(-105%); transition: transform .2s; box-shadow: var(--ax-shadow-l); }
  .copilot-threads.is-open { transform: none; }
  .copilot-threads-backdrop.is-open { display: block; position: fixed; inset: 64px 0 0 0; background: rgba(14,17,22,.4); z-index: 130; }
}

@media (max-width: 640px) {
  .copilot-drawer { width: 100%; max-width: 100%; }
  .copilot-fab { bottom: 16px; left: 16px; }
}

/* /app/sms: the credit-pack rows put their "خرید" button on screen-left (first flex child
   sits at the RTL start/right, so the button — second child — lands at the end/left) — the
   same corner the copilot-fab occupies on mobile. Padding under the list doesn't help here;
   the fab is position:fixed, so it overlaps whatever row happens to fall in its reserved
   bottom-left zone regardless of scroll position, and this page is often short enough that
   more than one row does. Mirror just this card's rows on mobile so the button sits on the
   opposite (right) side from the fab instead — verified (DOM rects) against .copilot-fab at
   390x844, no other page uses .sms-pack-card so this can't affect anything else. */
@media (max-width: 960px) {
  .sms-pack-card .row { flex-direction: row-reverse; }
}

/* ==========================================================================
   Wave 12B — voice settings + billing page redesign.
   ========================================================================== */
/* .stat was used across several pages (billing, campaign, dashboard) with no sizing rule of
   its own — just a bare <b> at body text size. Billing needs a genuinely "big number" look
   (balance, plan price, pack price), so give the number real weight/size and let whatever
   trailing unit text follows it (" تومان / ماه", " دقیقه", …) stay at normal small size —
   exactly the "price large, unit small" shape the design calls for. */
.stat { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.stat b { font-size: var(--ax-fs-2xl); font-weight: 800; color: var(--ax-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }

/* tier-grid: small engine-family label under the one-line hint (see .tier-hint), distinct from
   the hint's muted body-size text — this is the tiny "which backend" tag. */
.tier-grid .choice .tier-fam { color: var(--ax-muted-2); font-size: var(--ax-fs-xs); font-weight: 600; }

/* voice-grid: playing state for the inline ▶/⏸ sample button (voice-settings.js toggles this
   class and swaps the icon markup while a sample plays). */
.voice-play.is-playing { background: var(--ax-ink); color: #fff; border-color: var(--ax-ink); }
[data-theme="dark"] .voice-play.is-playing { background: #fff; color: #0E1116; }

/* sticky bottom save bar (voice settings; any other long single-form page can reuse it) —
   bleeds to the parent .card's edges and pins to the viewport bottom while the form scrolls.
   Wave 16: top margin bumped 16px -> 20px to match the rest of this wave's card-to-card gap
   (see .panel-body form > .card + .card below); kept here since this is the bar's own rule. */
.save-bar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: 20px -24px -24px; padding: var(--sp-3) 24px; background: var(--ax-paper); border-top: 1px solid var(--ax-line); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.save-bar .hint { margin: 0; }

/* billing: plan cards — equal height (grid already stretches rows), CTA pinned to the bottom
   so a 2-bullet plan and a 5-bullet plan still line up their buttons. "Raised" featured card
   gets a 2px ink border + shadow + a small lift above the others (desktop only — a lifted card
   in a single-column mobile stack would just look misaligned). */
.plan-card { display: flex; flex-direction: column; }
.plan-card .plan-features { flex: 1; }
.plan-card .plan-cta { margin-top: auto; padding-top: var(--sp-2); }
.plan-card.is-featured { border: 2px solid var(--ax-ink); box-shadow: var(--ax-shadow-m); }
@media (min-width: 641px) { .plan-card.is-featured { transform: translateY(-6px); } }

/* billing: plan feature bullets as a short check-list instead of a plain <ul>. */
.feat-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; color: var(--ax-muted); font-size: var(--ax-fs-sm); }
.feat-list li { display: flex; align-items: flex-start; gap: 8px; }
.feat-list li::before { content: "✓"; color: var(--ax-success); font-weight: 800; flex: none; line-height: 1.5; }

/* billing: minute-pack cards (and, next wave, the SMS packs on /app/sms — same component,
   same class, so that page can adopt it without new CSS). */
.pack-card { text-align: center; }
.pack-card .stat { justify-content: center; }
.pack-card .btn { margin-top: var(--sp-2); }

/* ==========================================================================
   Wave 16 — card spacing inside forms (owner: «فاصله بین باکس‌ها خیلی کمه»).
   .panel-body already gives its own DIRECT children a 20px gap (see .panel-body above), and a
   .grid wrapper already carries its own 20px `gap` (see .grid above) — both already space any
   cards that sit directly under one of those two. The gap this wave fixes is the one neither
   covers: consecutive <div class="card"> siblings placed directly inside a <form> (itself a
   direct child of .panel-body) with no .grid/.panel-body gap mechanism between them — they
   just touch, borders doubling up to ~4px. Two coverage paths, audited page-by-page via the
   dispatch harness (uid=1) against the real rendered HTML, not guessed from the PHP source:
     1) .card siblings directly inside such a <form> — covered generically below, no markup
        change needed. This is the voice page's shape (`form > .card + .card`, 3 cards) and
        is the only one of the 9 audited pages that actually has this shape.
     2) a page where cards sit inside some other wrapper that isn't a .grid and isn't itself
        .panel-body's direct child — add class="stack" to that wrapper. .stack already exists
        above (site-wide utility, gap:16px, used throughout MAIN's own app/partner/admin
        views) — rather than change that shared rule, its gap is bumped to 20px only inside
        .panel-body so nothing outside the tenant panel is affected. None of the 9 pages
        audited this wave needed it (each already resolves via path 1, a .grid, or being a
        direct .panel-body child, or simply has no adjacent-card pair at all) — kept here as
        the documented fallback for a future page shaped that way. */
.panel-body form > .card + .card,
.panel-body form > .card + .save-bar {
  margin-top: 20px;
}
.panel-body .stack {
  gap: 20px;
}

/* Wave 16 — sticky .save-bar bottom padding (voice page). The bar is position:sticky and pins
   to the viewport bottom while its containing <form> scrolls; without extra room below it, a
   short viewport can leave the stuck bar flush against the form's own end with no breathing
   space once scrolled all the way down. padding-bottom below is the bar's own rendered height
   (44px button + 12px*2 padding + 1px top border ≈ 69px, rounded up) so the form always has
   room to keep scrolling a little further before the bar settles into its static position.
   :has() scopes this to forms that actually contain a .save-bar (voice.php today) without
   touching voice.php itself, and without padding every other panel form that has none. */
.panel-body form:has(.save-bar) {
  padding-bottom: 70px;
}