/* کلاک بات — shadcn dark minimal (no gradient / no glow) */
:root {
  color-scheme: dark;
  --background: #09090b;
  --foreground: #fafafa;
  --card: #09090b;
  --card-fg: #fafafa;
  --control-bg: #18181b;
  --control-bg-hover: #27272a;
  --muted: #27272a;
  --muted-fg: #a1a1aa;
  /* Placeholder / example text inside inputs — muted in both themes */
  --placeholder: #71717a;
  --border: #27272a;
  --input: #27272a;
  --ring: #d4d4d8;
  --primary: #3b82f6;
  --primary-fg: #60a5fa;
  --secondary: #27272a;
  --secondary-fg: #fafafa;
  --destructive: #ef4444;
  --destructive-fg: #f87171;
  --ok: #22c55e;
  --ok-fg: #4ade80;
  --warn: #eab308;
  --warn-fg: #facc15;
  --caution: #f97316;
  --caution-fg: #fb923c;
  --info: #3b82f6;
  --info-fg: #60a5fa;
  --brand: #f97316;
  --brand-fg: #fb923c;
  /* Bot / PG solid chrome — no gradient borders */
  --bot-line: #e08a3c;
  --pg-line: #3d8fd1;
  --bot-fill: color-mix(in srgb, var(--bot-line) 12%, transparent);
  --pg-fill: color-mix(in srgb, var(--pg-line) 12%, transparent);
  /* Motion — visible but calm */
  --motion-fast: 180ms;
  --motion-med: 280ms;
  --motion-slow: 380ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  /* Radius policy:
     --radius          → cards, panels, textareas, upload tiles, wide multi-line boxes
     --control-radius  → buttons, single-line fields, tabs, shortcuts, nav chips (pill)
     --menu-radius     → opened dropdown panels (not pill)
     --menu-item-radius→ items inside those menus */
  --radius: 20px;
  --control-radius: 999px;
  --menu-radius: 16px;
  --menu-item-radius: 10px;
  --side-w: 248px;
  /* Mobile drawer width. Capped at 78vw so the fixed drawer never covers 80% of
     the viewport width — that is the threshold above which Safari 26+ starts
     tinting its bottom bar with the drawer's own background (invariant E). */
  --drawer-w: min(300px, 78vw);
  /* Drawer dim — painted by .side-backdrop::before, never by the fixed box */
  --side-dim: rgba(0, 0, 0, 0.55);
  --topbar-h: 52px;
  --btn-h: 36px;
  /* Spacing scale — 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 */
  --space-0: 4px;
  --space-1: 8px;
  --space-1_5: 12px;
  --space-2: 16px;
  --space-2_5: 20px;
  --space-3: 24px;
  --space-4: 32px;
  --space-4_5: 40px;
  --space-5: 48px;
  --space-6: 64px;
  --card-pad: var(--space-2);
  --section-gap: var(--space-3);
  /* Equal space above & below page title+icon (bot and PasarGuard identical) */
  --page-title-gap: var(--space-3);
  /* Air below BOTH footers — owned by the footer boxes (padding-bottom),
     never by .side / .main (that dual path split separator Y when one foot grew). */
  --foot-gap: var(--space-2);
  --control-gap: var(--space-1);
  --stack-gap: var(--space-2);
  --title-size: 14px;
  /* Form controls MUST stay ≥16px forever — iOS Safari zooms any focused field under 16px.
     Do not set input/select/textarea font-size to --title-size or any value < 16px. */
  --control-fs: 16px;
  /* Notch / status bar / home indicator (PWA + iOS Safari) */
  --safe-top: env(safe-area-inset-top, 0px);
  /* Extra top breathing room on mobile topbar (safe-area alone feels tight) */
  --safe-top-extra: 0px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* ONE bottom inset for .site-footer + .side-foot (never double-stack on parents) */
  --bottom-inset: calc(var(--foot-gap) + var(--safe-bottom));
  /* Content band above --bottom-inset (padding-top + 28px control row + gap).
     Footers lock min=max to footer-bar-h + bottom-inset so separator tops share
     one Y on desktop browser, mobile browser, and PWA. */
  --footer-bar-h: calc(var(--page-title-gap) + 28px + var(--space-1));
  /* Single UI typeface — no secondary families in the web panel */
  --font: "Vazirmatn", sans-serif;

  --bg: var(--background);
  --bg-card: #0c0c0e;
  --bg-muted: var(--muted);
  --bg-hover: #1c1c1f;
  --text: var(--foreground);
  --accent: var(--brand);
  --accent-fg: var(--brand-fg);
  --accent-soft: rgba(249, 115, 22, 0.12);
  --danger: var(--destructive);
  --r: var(--radius);
  --r-sm: 10px;
  --r-control: var(--control-radius);
  /* Table header — milder than --muted so dark theme is less bright */
  --table-head-bg: color-mix(in srgb, var(--muted) 42%, var(--bg-card));
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  width: 100%;
  /* background-color + background: WebKit overscroll/canvas samples these.
     Missing color-scheme:dark left a WHITE strip under short dark pages. */
  background-color: var(--background);
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}
html[data-theme="dark"] {
  color-scheme: dark;
}
a { color: var(--foreground); text-decoration: none; }
a:hover { opacity: 0.8; }
.muted { color: var(--muted-fg); }

/* Global: text must never paint outside its chrome — truncate with … */
.page-title > span,
.page-title > strong,
.brand strong,
.topbar-brand strong,
.nav a,
.dnd-item > span:not(.dnd-actions),
.svc-item-title strong,
.ui-switch-copy strong,
.notify-meta strong,
.home-conn-k,
.home-conn-cap,
.progress-meta > span,
.progress-meta > strong,
th, td:not(.col-actions) {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}
th, td:not(.col-actions),
.page-title > span,
.page-title > strong,
.brand strong,
.topbar-brand strong,
.nav a,
.dnd-item > span:not(.dnd-actions),
.home-conn-k,
.home-conn-cap,
.progress-meta > span,
.progress-meta > strong {
  white-space: nowrap;
}
td.col-actions {
  overflow: visible;
  max-width: none;
}
/* Multi-line copy stays inside the box via wrapping, not overflow */
p, li, .hint, .flash, .flash-copy, label, small.muted,
.ui-switch-copy small, .notify-meta small {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

* { scrollbar-width: thin; scrollbar-color: #3f3f46 transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 999px; }

/* —— Shell: desktop = main + sidebar (physical right for RTL content) —— */
.shell {
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-w);
  grid-template-areas: "main side";
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  width: 100%;
  background: var(--background);
  overflow: hidden;
  /* Single owner of the notch insets on desktop/tablet layout: .side and .main
     must not add --safe-top again or the two would stack. */
  padding-top: var(--safe-top);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}
.side, .main { direction: rtl; }
.topbar { direction: ltr; }

.side {
  grid-area: side;
  width: var(--side-w);
  height: 100%;
  max-height: 100dvh;
  position: relative;
  top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  /* --safe-top is owned by .shell — never re-add it here.
     Bottom inset lives on .side-foot only (same path as .site-footer). */
  padding: var(--space-2) var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 30;
}
/* Inner slide shell — desktop is a plain flex column; mobile animates transform. */
.side-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
}
.main {
  grid-area: main;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100dvh;
  /* Top chrome: --page-title-gap. Bottom inset lives on .site-footer only. */
  padding: var(--page-title-gap) var(--space-4) 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}
.main-body {
  /* flex-shrink:0 — long pages must grow so .main scrolls content+footer together.
     flex-shrink:1 + min-height:0 pinned the footer over overflowing content. */
  flex: 1 0 auto;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* Equal to .main padding-top — space before footer border matches top air */
  padding-bottom: var(--page-title-gap);
}
/* Content→footer air = only .main-body padding-bottom (--page-title-gap).
   Zero trailing margin on the last *content* node (skip script/style/template
   so pages with inline scripts match dashboard spacing). */
.main-body > :last-child {
  margin-bottom: 0;
}
.main-body > :nth-last-child(1 of :not(script):not(style):not(template)) {
  margin-bottom: 0;
}
.main-body > :nth-last-child(1 of :not(script):not(style):not(template)) .card:last-child,
.main-body > :nth-last-child(1 of :not(script):not(style):not(template)) .card-flush:last-child {
  margin-bottom: 0;
}
/* Dashboard wraps panels in .home-dash — zero the inner last block so
   content→footer equals one --page-title-gap, not 2× */
.home-dash > :last-child {
  margin-bottom: 0;
}
/* PG / reseller overview: home-panels is usually the last content block */
.main-body > .home-panels:last-child {
  margin-bottom: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-1) var(--space-1);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}
a.brand:hover,
a.topbar-brand:hover {
  opacity: 1;
  color: inherit;
  text-decoration: none;
}
a.brand:focus-visible,
a.topbar-brand:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--bot-line) 55%, transparent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.brand-logo {
  display: inline-flex;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  /* Soft square chrome — not the larger card --radius */
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #f97316;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.brand strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.brand small { color: var(--muted-fg); font-size: 11px; }
.brand-ver-line {
  display: flex;
  align-items: center;
  /* Same gap as .topbar-version so dot↔version == version↔badge */
  gap: var(--space-1);
  margin-top: var(--space-0);
  font-size: 11px;
  color: var(--muted-fg);
  font-variant-numeric: tabular-nums;
}
.brand-ver-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.brand-ver-dot-ok { background: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2); }
.brand-ver-dot-warn { background: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); }
.channel-badge {
  display: inline-flex;
  align-items: center;
  /* Spacing comes only from parent flex gap (matches brand-ver-dot ↔ version). */
  margin: 0;
  padding: 0.1em 0.45em;
  border-radius: var(--r-sm, 4px);
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--muted-fg);
  background: color-mix(in srgb, var(--border) 35%, transparent);
  white-space: nowrap;
}
.channel-badge-main {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.12);
}
.channel-badge-dev {
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.12);
}
html[data-theme="light"] .channel-badge-main {
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.1);
}
html[data-theme="light"] .channel-badge-dev {
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(245, 158, 11, 0.12);
}


.side-nav { display: flex; flex-direction: column; gap: 0; flex: 1; }
.nav-section {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  /* Tiny air so hover/active boxes don’t touch */
  gap: var(--space-0);
}
.nav-label {
  padding: var(--space-1);
  font-size: var(--title-size);
  font-weight: 600;
  color: var(--muted-fg);
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  padding: var(--space-1);
  border-radius: var(--control-radius);
  color: var(--muted-fg);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  transition:
    background var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}
.nav-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--motion-fast) var(--ease-out);
}
.nav-item:hover { background: var(--bg-hover); color: var(--foreground); opacity: 1; }
.nav-item:active { transform: scale(0.97); }
.nav-item.active {
  background: var(--muted);
  color: var(--foreground);
  border-color: transparent;
  font-weight: 600;
}
.nav-item-label {
  display: flex;
  align-items: center;
  gap: var(--space-0);
  flex: 1 1 auto;
  min-width: 0;
}
.nav-item-label > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22);
  flex: 0 0 auto;
  /* Opposite side of the title: left in RTL, right in LTR */
  margin-inline-start: auto;
}
/* Risk indicator beside user name in lists */
.cell-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-0);
  max-width: 100%;
  min-width: 0;
}
.cell-name-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  min-width: 0;
}
.cell-name-text {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.cell-name-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-0);
  max-width: 100%;
}
.cell-name-tags > .badge {
  flex: 0 0 auto;
}
.cell-name-primary > .alert-dot {
  flex: 0 0 auto;
}
.badge.badge-risk {
  flex: 0 0 auto;
  color: var(--warn-fg, #fde047);
  background: color-mix(in srgb, var(--warn, #eab308) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn, #eab308) 38%, transparent);
}
/* Entity alert (expiring / low volume) — orange dot only */
.alert-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f97316;
  box-shadow: 0 0 0 2px color-mix(in srgb, #f97316 28%, transparent);
  flex: 0 0 auto;
}
/* Staff color tag — small circle beside list names */
.color-tag-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--tag-color, #64748b);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tag-color, #64748b) 28%, transparent);
  flex: 0 0 auto;
}
.cell-name-primary > .color-tag-dot {
  flex: 0 0 auto;
}
.color-tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}
.color-tag-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  background: color-mix(in srgb, var(--surface, #111) 88%, transparent);
  cursor: pointer;
  user-select: none;
}
.color-tag-option input {
  /* Keep in layout for reliable form submit (WebKit drops zero-size radios). */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.color-tag-option.is-selected,
.color-tag-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--tag-color, var(--brand, #f97316)) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tag-color, var(--brand, #f97316)) 35%, transparent);
}
.badge.badge-risk-tag {
  font-size: 11px;
  padding: 2px 8px;
  line-height: 1.35;
  border: 1px solid color-mix(in srgb, var(--tag-color, #64748b) 45%, transparent);
  background: color-mix(in srgb, var(--tag-color, #64748b) 16%, transparent);
  color: inherit;
}
.color-tag-swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--tag-color, #64748b);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tag-color, #64748b) 28%, transparent);
  flex: 0 0 auto;
}
.color-tag-swatch--none {
  background: transparent;
  border: 1.5px dashed color-mix(in srgb, var(--muted, #94a3b8) 70%, transparent);
  box-shadow: none;
}
.color-tag-label {
  font-size: 12px;
  line-height: 1.2;
  color: var(--text, inherit);
}
/* Tag filter sits in the search row, physical-left of the search button
   (between the button and the card edge), same height as the button. */
.color-tag-toolbar {
  display: none; /* legacy; filter now lives in .search-bar--with-tag */
}
.color-tag-select-wrap {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
  height: var(--btn-h);
  min-height: var(--btn-h);
  margin: 0;
  /* Must stay capsule even when .is-tagged paints bg on the wrap
     (inner toggle border becomes transparent — wrap shape is what you see). */
  border-radius: var(--control-radius);
  overflow: hidden;
  box-sizing: border-box;
}
.color-tag-select-wrap > .ui-select,
.color-tag-select-wrap > select.color-tag-select {
  width: auto;
  min-width: 7.5rem;
  max-width: min(12rem, 42vw);
  margin-top: 0;
  height: 100%;
  min-height: 100%;
}
.color-tag-select-wrap .ui-select {
  height: 100%;
}
.color-tag-select-wrap .ui-select-toggle {
  min-width: 7.5rem;
  height: 100%;
  min-height: 100%;
  display: inline-flex;
  align-items: center;
  padding-block: 0;
  box-sizing: border-box;
}
/* Selected tag: paint the whole control with tag color (no separate dot). */
.color-tag-select-wrap.is-tagged {
  background: color-mix(in srgb, var(--tag-color, #22c55e) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag-color, #22c55e) 55%, transparent);
  border-radius: var(--control-radius);
}
.color-tag-select-wrap.is-tagged > select.color-tag-select,
.color-tag-select-wrap.is-tagged .ui-select-toggle {
  background: transparent;
  border-color: transparent;
  border-radius: var(--control-radius);
  color: var(--tag-color, #22c55e);
  font-weight: 600;
}
.color-tag-select-wrap.is-tagged .ui-select-label {
  color: var(--tag-color, #22c55e);
  font-weight: 600;
}
/* Option text tinted to match each tag's circle color (native select). */
.color-tag-select option[data-tag-color] {
  color: var(--opt-color, inherit);
  font-weight: 600;
}
.ui-select-menu button.color-tag-menu-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}
.ui-select-menu button.color-tag-menu-option .color-tag-swatch {
  width: 10px;
  height: 10px;
}
.ui-select-menu button.color-tag-menu-option .color-tag-menu-label {
  font-weight: 600;
}
.search-bar--with-tag {
  flex-wrap: nowrap;
  align-items: center;
}
.search-bar--with-tag > .color-tag-select-wrap {
  order: 3; /* after field + search button → physical left in RTL row */
  align-self: center;
}
.search-bar--with-tag > .search-bar-field {
  order: 1;
}
.search-bar--with-tag > .btn {
  order: 2;
  align-self: center;
}
html[data-theme="light"] .color-tag-option {
  background: color-mix(in srgb, #fff 92%, var(--border, #e2e8f0));
}
html[data-theme="light"] .color-tag-select-wrap.is-tagged {
  background: color-mix(in srgb, var(--tag-color, #22c55e) 18%, #fff);
}
.badge.badge-inline {
  font-size: 11px;
  padding: 2px 8px;
  line-height: 1.35;
  flex: 0 0 auto;
}
.users-ops-overview {
  margin-bottom: var(--section-gap);
}
.users-ops-overview .home-panel {
  height: auto;
}
.users-ops-stats {
  flex: 0 0 auto;
}
.users-ops-stats > .stat {
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.users-ops-stats > .stat:hover {
  background: rgba(255, 255, 255, 0.06);
}
.users-ops-stats > .stat.is-active {
  border-color: color-mix(in srgb, var(--accent, #38bdf8) 45%, var(--border));
  background: color-mix(in srgb, var(--accent, #38bdf8) 10%, transparent);
}
/* Users table — service / volume / expiry always-visible separate columns */
.users-ops-table .col-svc {
  min-width: 10rem;
  vertical-align: middle;
}
.users-ops-table .col-vol {
  min-width: 6rem;
  vertical-align: middle;
}
.users-ops-table .col-exp {
  min-width: 7.5rem;
  vertical-align: middle;
}
.users-ops-table .col-name {
  min-width: 6.5rem;
  vertical-align: middle;
}
.users-svc-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  min-width: 0;
  font-weight: 500;
  vertical-align: middle;
}
.users-svc-name-text {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Alert cue = dot only (no orange cell tint). Select vertically centered in row. */
.users-svc-select-wrap {
  display: flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}
.users-svc-select-wrap .ui-select,
.users-svc-ui.ui-select {
  margin-top: 0;
  width: 100%;
  max-width: 100%;
}
.users-svc-select-wrap .users-svc-select {
  width: 100%;
  max-width: 100%;
}
.ui-select-menu.users-svc-boxed {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  padding: var(--space-0);
}
.ui-select-menu.users-svc-boxed button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  border: 1px solid var(--border);
  background: var(--control-bg, var(--bg-elevated, var(--bg-card)));
  color: var(--muted-fg);
  border-radius: var(--menu-item-radius);
  min-height: 36px;
  padding: 6px var(--space-1);
  white-space: normal;
  text-align: right;
  line-height: 1.35;
}
.users-svc-menu-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: inherit;
}
.ui-select-toggle .alert-dot {
  flex: 0 0 auto;
}
.ui-select-menu.users-svc-boxed button:hover {
  background: var(--control-bg-hover, var(--bg-hover));
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--border) 70%, var(--foreground));
}
.ui-select-menu.users-svc-boxed button.active {
  background: color-mix(in srgb, var(--accent, #38bdf8) 12%, transparent);
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--accent, #38bdf8) 40%, var(--border));
  font-weight: 600;
}
.users-row.is-focus > td {
  background: color-mix(in srgb, var(--accent, #38bdf8) 12%, transparent);
}
a.cell-user-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--muted-fg) 35%, transparent);
}
a.cell-user-link:hover {
  color: var(--foreground);
  border-bottom-color: var(--foreground);
}

.side-foot {
  margin-top: 0;
  padding-top: var(--page-title-gap);
  /* Same inset owner as .site-footer — desktop/mobile/PWA one path */
  padding-bottom: var(--bottom-inset);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  flex-shrink: 0;
  /* Lock height so identity wrap cannot push separator off the shared Y */
  min-height: calc(var(--footer-bar-h) + var(--bottom-inset));
  max-height: calc(var(--footer-bar-h) + var(--bottom-inset));
  overflow: hidden;
  box-sizing: border-box;
}
.side-foot-user {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  flex: 1;
  flex-wrap: nowrap;
}
/* Multi-line identity blows the locked footer height — keep a single row */
.side-foot .identity-chips,
.side-foot .identity-pg-role {
  display: none;
}
.side-foot-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.identity-pg-role {
  font-size: 10px;
  color: var(--muted-fg);
  line-height: 1.3;
  direction: ltr;
  unicode-bidi: isolate;
}
.identity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.identity-chip {
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted-fg);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
}
tr.principal-row-l2 td:first-child {
  padding-inline-start: 1.5rem;
}
.side-foot-name {
  font-size: 12px;
  color: var(--muted-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.logout-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--destructive-fg) !important;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  /* Match .btn-star height so side-foot & site-footer share one baseline */
  height: 28px;
  min-height: 28px;
  padding: 0 var(--space-1);
  box-sizing: border-box;
  border-radius: var(--control-radius);
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.1);
}
.logout-form { margin: 0; display: inline-flex; }
.logout-link:hover { background: rgba(239, 68, 68, 0.18); opacity: 1; }
.logout-link .nav-ico { width: 14px; height: 14px; }

/* visibility helpers — toggled in breakpoints */
.mobile-only { display: none !important; }

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--page-title-gap);
  flex-wrap: wrap;
}
/* Title + action button must stay ONE row. flex:1 1 auto on the title
   wrapper was growing to full width and pushing .actions onto a second
   row — that alone added ~button height + gap under the title and made
   PasarGuard look much looser than bot list pages. */
.page-head:has(> .actions),
.page-head:has(> .page-head-actions),
.page-head:has(> .btn),
.page-head:has(> .inbox-reset-form) {
  flex-wrap: nowrap;
}
/* Legacy .pg-head wrapper — PG pages now use plain .page-head like bot
   (section nav lives in the sidebar). Keep rules harmless if any remnant markup appears. */
.pg-head {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.pg-head > .pg-tabs,
.pg-head > .section-tabs {
  margin-bottom: 0;
  padding-bottom: 0;
}
.pg-head > .page-head {
  margin-bottom: var(--page-title-gap);
}
.page-head--stack {
  flex-direction: column;
  align-items: stretch;
}
.page-title-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-1);
  width: 100%;
}
.page-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.page-title-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-4_5);
  height: var(--space-4_5);
  flex: 0 0 auto;
  outline: none;
  box-shadow: none;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--bot-line) 55%, var(--border));
  background: var(--bg-card);
  color: var(--bot-line);
  animation: page-title-ico-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.page-title-ico svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.page-title-ico--pg {
  border-color: color-mix(in srgb, var(--pg-line) 55%, var(--border));
  background: var(--bg-card);
  color: var(--pg-line);
}
.page-title-ico--neutral {
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-fg);
}
.page-head h1,
.page-title h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  animation: page-title-text-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.page-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-inline-start: var(--space-1);
  align-self: center;
  border-radius: var(--control-radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--muted-fg);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out);
}
.page-help-btn:hover {
  color: var(--brand-fg);
  border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
  background: color-mix(in srgb, var(--brand) 12%, var(--bg-card));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}
@keyframes page-title-ico-in {
  from { opacity: 0; transform: scale(0.78) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes page-title-text-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-title-ico,
  .page-head h1,
  .page-title h1 { animation: none; }
  .ui-modal-backdrop,
  .ui-modal-panel,
  .ui-modal.open.is-closing .ui-modal-backdrop,
  .ui-modal.open.is-closing .ui-modal-panel,
  .flash {
    animation: none !important;
    transition: none !important;
  }
  .btn, a.btn, .btn-sm, a.btn-sm,
  .nav-item, .icon-btn,
  .section-tabs a, .section-tabs .tab-btn,
  .side-backdrop,
  .side-panel,
  .ui-switch-track::after {
    transition: none !important;
  }
  .btn:active:not(:disabled), a.btn:active,
  .nav-item:active, .icon-btn:active,
  .section-tabs a:active, .section-tabs .tab-btn:active {
    transform: none;
  }
}
.page-head p {
  margin: var(--space-0) 0 0;
  color: #71717a;
  font-size: 13px;
  font-weight: 400;
  max-width: 36rem;
  line-height: 1.5;
}

.grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--section-gap);
  width: 100%;
}
.stat, .card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 100%;
  min-width: 0;
}
.stat {
  padding: var(--space-2);
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-1);
  text-align: right;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
.stat-top {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  justify-content: flex-start;
  max-width: 100%;
  overflow: hidden;
}
.stat-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--muted);
  color: var(--muted-fg);
}
.stat-ico svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stat span { color: var(--muted-fg); font-size: 12px; font-weight: 500; line-height: 1.5; }
.stat-top > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.stat strong,
.stat .stat-value {
  font-size: clamp(12px, 2.6vw, 20px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}
.stat .stat-value[dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}
.stat small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.card {
  padding: var(--card-pad);
  margin-bottom: var(--section-gap);
  width: 100%;
  /* visible — overflow clip/hidden traps position:fixed kebab and paints a ghost square */
  overflow: visible;
  box-sizing: border-box;
}
/* Equal edge inset: flex gap instead of trailing child margins (hidden last
   siblings like #upd-ops used to leave a fat bottom gap). */
.card:not(.card-flush) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}
.card:not(.card-flush) > * {
  margin-top: 0;
  margin-bottom: 0;
}
.card.card-flush {
  padding: 0;
  /* Clip table thead/body to the card’s rounded frame */
  overflow: hidden;
}
/* Flush card title row with optional trailing action (e.g. clear history) */
.card.card-flush > .card-flush-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--card-pad) var(--card-pad) var(--space-1);
  margin: 0;
}
.card.card-flush > .card-flush-head > h2 {
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.card.card-flush > .card-flush-head > .actions,
.card.card-flush > .card-flush-head > form {
  margin: 0;
  flex: 0 0 auto;
}
/* Subsection titles inside flush cards (e.g. reseller plan groups) */
.card.card-flush > h3,
.card > h3.card-subhead {
  margin: var(--space-3) 0 var(--space-1);
  padding: 0 var(--card-pad);
  font-size: var(--title-size);
  font-weight: 600;
  line-height: 1.5;
}
.card.card-flush > h3:first-child,
.card > h3.card-subhead:first-child {
  margin-top: var(--space-2);
}
.card:not(.card-flush) > h3.card-subhead {
  padding: 0;
}
.card h2 {
  margin: 0;
  font-size: var(--title-size);
  font-weight: 600;
  line-height: 1.5;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card > p.muted, .card > .hint, .update-card-caption {
  margin: 0;
  line-height: 1.5;
  font-size: 12px;
  color: #71717a;
  font-weight: 400;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Title + caption are one unit — pull caption toward title */
.card h2 + p.muted,
.card h2 + .hint,
.card h2 + .update-card-caption {
  margin-top: calc(-1 * var(--space-1));
}
/* Keep next-card titles from colliding with previous card captions/fields */
.card + .card {
  margin-top: 0;
}
.card + .card > h2 {
  margin-top: 0;
}
/* Safety net for non-flex / nested padded boxes */
.card > :last-child,
.stat > :last-child,
.settings-card > :last-child,
.dnd-card > :last-child,
.image-setting > :last-child,
.support-row > :last-child,
.upload-box > :last-child,
.update-meta-box > :last-child,
.update-meta > div > :last-child,
.ui-modal-panel > :last-child,
.ui-modal-scroll > :last-child,
.home-conn-card > :last-child,
.home-dash > .card > :last-child,
.auth-form > :last-child {
  margin-bottom: 0;
}
/* Settings cells: spacing comes from grid gap, not label margins */
.setting-item > label,
.setting-item > .force-channels,
.setting-item > .image-setting,
.setting-item > .toggle-row,
.setting-item > .ui-switch-row {
  margin-bottom: 0;
}
.card > .settings-grid,
.card > .notify-list,
.card > .ui-switch-list,
.card > .support-list,
.card > .dnd-cols,
.card > .form-stack,
.card > .form-row,
.card > .checks,
.card > .btn-color-grid,
.settings-card > .settings-grid,
.settings-card > .notify-list,
.settings-card > .ui-switch-list,
.settings-card > .support-list,
.settings-card > .dnd-cols,
.settings-card > .form-stack,
.settings-card > .btn-color-grid {
  margin-bottom: 0;
}
.form-stack > label,
.form-stack > .form-field,
.form-stack > .form-row,
.support-fields > label {
  margin-bottom: 0;
}

.dash-cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--section-gap);
  width: 100%;
  align-items: start;
}
.dash-cols > .card { margin-bottom: 0; }
/* Dashboard tables: hug viewport. Global `table { min-width: 560px }` plus a
   later 50% first-column rule made `#` eat half the card. */
.dash-cols table {
  min-width: 0;
  width: 100%;
  table-layout: auto;
}
.dash-cols .table-compact th.col-id,
.dash-cols .table-compact td.col-id {
  width: 1%;
  max-width: none;
  white-space: nowrap;
  padding-inline: var(--space-2);
}

label {
  display: block;
  margin: 0 0 var(--space-2);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
}
/* Labels that wrap a real control: stack title → control → hint (below box) */
label:has(> input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"])),
label:has(> select),
label:has(> .ui-select),
label:has(> textarea),
label:has(> .pw-field) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
label > small.muted,
.hint {
  display: block;
  margin-top: var(--space-1);
  margin-bottom: 0;
  font-size: 11px;
  color: var(--muted-fg);
  font-weight: 400;
  line-height: 1.5;
}
/* Force help under the input/select/textarea even if HTML still has it under the title */
label:has(> input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]), > select, > .ui-select, > textarea, > .pw-field) > small.muted,
.form-field > small.muted {
  order: 10;
  margin-top: var(--space-1);
  margin-bottom: 0;
}
label:has(> input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]), > select, > .ui-select, > textarea, > .pw-field) > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
label:has(> select) > select,
label:has(> .ui-select) > .ui-select,
label:has(> textarea) > textarea,
label:has(> .pw-field) > .pw-field,
.form-field > input,
.form-field > select,
.form-field > .ui-select,
.form-field > textarea,
.form-field > .pw-field {
  order: 5;
}
/* Image / upload settings: hint below the upload box (layout + chrome merged) */
.image-setting {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--card-pad);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-sizing: border-box;
}
.image-setting > strong { order: 1; margin: 0; }
.image-setting > small.muted {
  order: 10;
  margin: 0;
}
.image-setting > .image-preview { order: 4; margin: 0; }
.image-setting > .file-label,
.image-setting > label.file-label,
.image-setting > label.upload-box { order: 5; }
.image-setting > .ap-photo-row { order: 12; margin: 0; }

input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
  -webkit-text-fill-color: var(--placeholder);
  font-size: inherit;
  font-weight: 400;
  opacity: 1;
  text-align: right;
  direction: rtl;
}
/* LTR fields: type LTR, but keep placeholder example right-aligned + muted */
input[dir="ltr"]::placeholder,
textarea[dir="ltr"]::placeholder {
  direction: rtl;
  text-align: right;
  color: var(--placeholder);
  -webkit-text-fill-color: var(--placeholder);
}
input[dir="ltr"],
textarea[dir="ltr"] {
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
}
/* Login / setup auth boxes: same contract (value + placeholder on the right) */
.auth-form input[dir="ltr"],
.auth-form textarea[dir="ltr"],
.auth-form .pw-field input {
  text-align: right;
}
.auth-form input[dir="ltr"]::placeholder,
.auth-form textarea[dir="ltr"]::placeholder,
.auth-form .pw-field input::placeholder {
  text-align: right;
  direction: rtl;
  color: var(--placeholder);
  -webkit-text-fill-color: var(--placeholder);
}
/* Number / search / all text controls: force physical right (browser UA often left-biases) */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not(.num-stepper-input),
textarea {
  text-align: right;
}
input[type="number"] {
  direction: rtl;
}
input[type="number"]::placeholder {
  direction: rtl;
  text-align: right;
  color: var(--placeholder);
  -webkit-text-fill-color: var(--placeholder);
}
/* Firefox */
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: var(--placeholder);
  opacity: 1;
  text-align: right;
  direction: rtl;
}
/* CRITICAL: keep ≥16px — iOS/Android Safari zoom on focus if smaller. Never use --title-size here. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
select,
textarea,
[contenteditable="true"] {
  font-size: var(--control-fs) !important;
}
input, select, textarea {
  width: 100%;
  margin-top: var(--space-1);
  background-color: var(--control-bg);
  color: var(--foreground);
  border: 1px solid var(--input);
  /* Single-line controls are pill; multi-line / wide editors override below */
  border-radius: var(--control-radius);
  font-family: inherit;
  font-size: var(--control-fs);
  font-weight: 400;
  line-height: 1.25;
  height: var(--btn-h);
  min-height: var(--btn-h);
  box-sizing: border-box;
}
input:hover, select:hover, textarea:hover,
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible,
input:active, select:active, textarea:active {
  border-radius: var(--control-radius);
}
/* Symmetric padding for text fields only — select keeps asymmetric room for chevron */
input {
  padding: 0 var(--space-2);
}
/* Wide / multi-line editors — same corner language as cards, never full pill */
textarea,
select[multiple],
select[size]:not([size="1"]),
[contenteditable="true"] {
  border-radius: var(--radius);
}
textarea:hover,
textarea:focus,
textarea:focus-visible,
textarea:active,
select[multiple]:hover,
select[multiple]:focus,
select[multiple]:focus-visible,
select[multiple]:active,
select[size]:not([size="1"]):hover,
select[size]:not([size="1"]):focus,
select[size]:not([size="1"]):focus-visible,
select[size]:not([size="1"]):active,
[contenteditable="true"]:hover,
[contenteditable="true"]:focus,
[contenteditable="true"]:focus-visible,
[contenteditable="true"]:active {
  border-radius: var(--radius);
}
textarea {
  height: auto;
  min-height: 96px;
  padding: var(--space-1) var(--space-2);
  line-height: 1.5;
  resize: vertical;
}
[contenteditable="true"] {
  font-size: var(--control-fs);
}
input:focus, select:focus, textarea:focus, button:focus, a:focus {
  outline: none;
}
/* Box-shadow ring follows border-radius (Android/WebKit outline is often a sharp rect). */
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 45%, transparent);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: #3f3f46;
}

select {
  appearance: none;
  -webkit-appearance: none;
  /* Panel is RTL: value text on the right; up/down chevron on the opposite (physical left).
     Chevron inset matches title inset (space-2); end padding clears the 14px icon. */
  padding-inline-start: var(--space-2);
  padding-inline-end: calc(var(--space-2) + 14px);
  background-color: var(--control-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.5 6L8 3l3.5 3' stroke='%23a1a1aa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.5 10L8 13l3.5-3' stroke='%23a1a1aa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: left var(--space-2) center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select option { background: #18181b; color: var(--foreground); font-weight: 400; }
.actions select, select.select-sm {
  width: auto; min-width: 110px; min-height: var(--btn-h); margin: 0;
  padding-block: var(--space-1);
  padding-inline-start: var(--space-1);
  padding-inline-end: calc(var(--space-1) + 12px);
  font-size: var(--control-fs);
  font-weight: 400;
  background-position: left var(--space-1) center;
  background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.5 6L8 3l3.5 3' stroke='%23a1a1aa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.5 10L8 13l3.5-3' stroke='%23a1a1aa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

/* Custom select (non-native popup) — matches theme / kebab menus */
.ui-select {
  position: relative;
  display: block;
  width: 100%;
  margin-top: var(--space-1);
}
.ui-select-sm,
.actions .ui-select {
  width: auto;
  min-width: 110px;
  margin-top: 0;
  display: inline-block;
  vertical-align: middle;
}
.ui-select-native {
  /* Hard-hide: opacity/clip alone still lets iOS open native pickers via <label>.
     Value is mirrored to a normal hidden input (data-ui-select-mirror) so WebKit
     cannot drop the display:none select from form payloads. */
  display: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.ui-select-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1);
  width: 100%;
  height: var(--btn-h);
  min-height: var(--btn-h);
  /* Symmetric insets: caret edge gap = title edge gap */
  padding-inline-start: var(--space-2);
  padding-inline-end: var(--space-2);
  box-sizing: border-box;
  border-radius: var(--control-radius);
  border: 1px solid var(--input);
  background: var(--control-bg);
  color: var(--foreground);
  font: inherit;
  font-size: var(--control-fs) !important;
  font-weight: 400;
  line-height: 1;
  text-align: right;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Lock radius on every interaction state — some Android browsers square :active/:focus. */
.ui-select-toggle:hover,
.ui-select-toggle:focus,
.ui-select-toggle:focus-visible,
.ui-select-toggle:active,
.ui-select.open .ui-select-toggle {
  border-radius: var(--control-radius);
}
.ui-select-sm .ui-select-toggle,
.actions .ui-select .ui-select-toggle {
  padding-inline-start: var(--space-1);
  padding-inline-end: var(--space-1);
  min-width: 110px;
}
.ui-select-toggle:hover { background: var(--control-bg-hover); }
.ui-select.open .ui-select-toggle {
  border-color: #3f3f46;
  background: var(--control-bg-hover);
}
.ui-select-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 45%, transparent);
}
.ui-select.is-disabled .ui-select-toggle,
.ui-select-toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ui-select-label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  align-self: stretch;
  /* Match toggle: avoid tall em-box / inherited title styles pushing glyphs up */
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: 1;
  text-align: right;
}
.ui-select-label.is-placeholder {
  color: var(--placeholder);
}
.ui-select-caret {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-inline-start: auto;
  align-self: center;
  display: block;
  stroke: var(--muted-fg);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}
.ui-select-sm .ui-select-caret { width: 12px; height: 12px; }
.ui-select-menu {
  position: absolute;
  z-index: 3400;
  /* Fallback gap before JS places (must match UI_SELECT_GAP = 8) */
  top: calc(100% + var(--space-1));
  bottom: auto;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: min(280px, 50vh);
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-1);
  border-radius: var(--menu-radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated, var(--bg-card));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
  min-width: 100%;
}
/* JS ports menu to body + sets top/left. Only clear horizontal RTL insets —
   never `inset: auto !important` (that overrides inline top/left and sticks the menu). */
.ui-select-menu.is-fixed-pos,
.ui-select-menu.is-ported {
  inset-inline: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  right: auto !important;
  min-width: 0 !important;
}
/* Absolute drop-up only when NOT JS-ported */
.ui-select.drop-up .ui-select-menu:not(.is-fixed-pos):not(.is-ported) {
  top: auto;
  bottom: calc(100% + var(--space-1));
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45);
}
body > .ui-select-menu.is-ported[data-drop-up="1"] {
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45);
}
.ui-select-menu[hidden] { display: none !important; }
.ui-select-menu button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 36px;
  padding: 0 var(--space-1);
  border: 0;
  border-radius: var(--menu-item-radius);
  background: transparent;
  color: var(--muted-fg);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  text-align: right;
  cursor: pointer;
}
.ui-select-menu button:hover,
.ui-select-menu button:focus,
.ui-select-menu button:focus-visible,
.ui-select-menu button:active,
.ui-select-menu button.active {
  border-radius: var(--menu-item-radius);
}
.ui-select-menu button:hover {
  background: var(--bg-hover);
  color: var(--foreground);
}
.ui-select-menu button.active {
  background: var(--muted);
  color: var(--foreground);
  font-weight: 600;
}
.ui-select-menu button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 40%, transparent);
}
.ui-select-menu button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  align-items: start;
}
.form-row > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* form-field already spaces title→control via gap; don't double-offset custom selects */
.form-field > .ui-select,
label.form-field > .ui-select,
.form-row .form-field > .ui-select {
  margin-top: 0;
}
.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.search-bar-field {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  min-width: 0;
}
.search-bar input {
  margin-top: 0;
  height: var(--btn-h);
  min-height: var(--btn-h);
}
.search-bar .btn {
  flex: 0 0 auto;
  height: var(--btn-h);
  min-height: var(--btn-h);
  align-self: center;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
}
.form-field-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-fg);
}
.form-field > label,
.form-row label {
  margin: 0;
}
.form-field input,
.form-field select,
.form-field textarea,
.form-row input,
.form-row select {
  margin-top: 0;
}
/* Custom Persian validation — red border + message (replaces English HTML5 tooltips) */
.form-field.is-invalid > input,
.form-field.is-invalid > select,
.form-field.is-invalid > textarea,
.form-field.is-invalid > .pw-field input,
.form-field.is-invalid > .ui-select,
label.form-field.is-invalid > input,
label.form-field.is-invalid > select,
label.form-field.is-invalid > textarea,
.pw-field.is-invalid input,
.image-setting.is-invalid input,
.image-setting.is-invalid .file-label,
.image-setting.is-invalid .upload-box,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--destructive) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--destructive) 35%, transparent);
}
.field-error {
  display: block;
  margin: 0;
  order: 20;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--destructive-fg);
}
.template-variable-feedback {
  order: 6;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  margin-top: var(--space-1);
  font-weight: 400;
}
.template-variable-feedback[hidden],
.template-variable-error[hidden] { display: none; }
.template-variable-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-width: 0;
}
.template-variable-token {
  max-width: 100%;
  padding: 3px 6px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
  unicode-bidi: isolate;
}
.template-variable-token.is-valid {
  color: var(--ok-fg);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}
.template-variable-token.is-invalid {
  color: var(--destructive-fg);
  border-color: color-mix(in srgb, var(--destructive) 40%, transparent);
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
}
.template-variable-error {
  display: block;
  margin: 0;
  color: var(--destructive-fg);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
input.template-variable-invalid,
textarea.template-variable-invalid {
  border-color: var(--destructive) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--destructive) 35%, transparent);
}
.checks { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); }
.checks label {
  display: inline-flex; align-items: center; gap: var(--space-1); margin: 0;
  color: var(--foreground); font-weight: 500; font-size: 13px;
}
.checks input { width: auto; min-height: 0; margin: 0; }

/* —— iOS / shadcn switch —— */
.ui-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 26px;
  flex: 0 0 auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Travel = inner track width − thumb − 2×pad (border eats 2px of 44). */
  --sw-thumb: 20px;
  --sw-pad: 3px;
  --sw-travel: 16px;
}
.ui-switch-sm {
  width: 44px;
  height: 26px;
}
.ui-switch input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  min-height: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
}
.ui-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #3f3f46;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  pointer-events: none;
  overflow: hidden;
}
.ui-switch-track::after {
  content: "";
  position: absolute;
  top: 50%;
  /* Physical left + translateX keeps the thumb on the compositor (no inset thrash). */
  left: var(--sw-pad);
  width: var(--sw-thumb);
  height: var(--sw-thumb);
  border-radius: 999px;
  background: #fafafa;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ui-switch-sm .ui-switch-track::after {
  width: var(--sw-thumb);
  height: var(--sw-thumb);
}
.ui-switch input:checked + .ui-switch-track {
  background: #16a34a;
  border-color: transparent;
}
.ui-switch input:checked + .ui-switch-track::after {
  transform: translateY(-50%) translateX(var(--sw-travel));
}
.ui-switch-sm input:checked + .ui-switch-track::after {
  transform: translateY(-50%) translateX(var(--sw-travel));
}
.ui-switch input:active + .ui-switch-track::after {
  transform: translateY(-50%) scaleX(1.06);
}
.ui-switch input:checked:active + .ui-switch-track::after {
  transform: translateY(-50%) translateX(var(--sw-travel)) scaleX(1.06);
}
/* RTL: thumb starts on the inline-start (right) edge */
[dir="rtl"] .ui-switch-track::after,
html[dir="rtl"] .ui-switch-track::after {
  left: auto;
  right: var(--sw-pad);
  transform: translateY(-50%);
}
[dir="rtl"] .ui-switch input:checked + .ui-switch-track::after,
html[dir="rtl"] .ui-switch input:checked + .ui-switch-track::after,
[dir="rtl"] .ui-switch-sm input:checked + .ui-switch-track::after,
html[dir="rtl"] .ui-switch-sm input:checked + .ui-switch-track::after {
  transform: translateY(-50%) translateX(calc(-1 * var(--sw-travel)));
}
[dir="rtl"] .ui-switch input:active + .ui-switch-track::after,
html[dir="rtl"] .ui-switch input:active + .ui-switch-track::after {
  transform: translateY(-50%) scaleX(1.06);
}
[dir="rtl"] .ui-switch input:checked:active + .ui-switch-track::after,
html[dir="rtl"] .ui-switch input:checked:active + .ui-switch-track::after {
  transform: translateY(-50%) translateX(calc(-1 * var(--sw-travel))) scaleX(1.06);
}
.ui-switch input:focus-visible + .ui-switch-track {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.28);
}
.ui-switch input:disabled + .ui-switch-track {
  opacity: 0.45;
  cursor: not-allowed;
}

.ui-switch-row,
.toggle-row,
.notify-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
  padding: var(--card-pad);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  min-height: 58px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ui-switch-row:hover,
.toggle-row:hover,
.notify-row:hover,
.ui-switch-row:focus-within,
.toggle-row:focus-within,
.notify-row:focus-within {
  background: var(--bg-hover, rgba(255, 255, 255, 0.06));
  border-color: var(--border);
}
.ui-switch-row:active,
.toggle-row:active,
.notify-row:active {
  background: var(--bg-hover, rgba(255, 255, 255, 0.08));
  border-color: var(--border);
}
.ui-switch-copy,
.notify-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 auto;
}
.ui-switch-copy strong,
.toggle-row strong,
.notify-meta strong {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--foreground);
}
.ui-switch-copy small,
.toggle-row small.muted,
.notify-meta small {
  margin: 0;
  line-height: 1.5;
  color: var(--muted-fg);
  font-size: 12px;
  font-weight: 400;
}

.ui-switch-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-1) 0 var(--space-3);
}
.ui-switch-list + .ui-switch-list {
  margin-top: var(--space-1);
}
/* Parent gap owns vertical rhythm — don't stack list margins inside stacks/cards */
.form-stack > .ui-switch-list,
.card > .ui-switch-list,
.settings-card > .ui-switch-list,
.form-field > .ui-switch-list {
  margin: 0;
}
.form-field > .ui-switch-grid {
  margin-top: 0;
}
.ui-switch-section {
  margin: var(--space-3) 0 var(--space-1);
}
.ui-switch-section-title {
  display: block;
  margin: 0 0 var(--space-1);
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}
.ui-switch-section-hint {
  margin: 0 0 var(--space-2);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-fg);
}

.ui-switch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-1);
  margin-top: var(--space-1);
}
.ui-switch-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2);
  min-height: 48px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ui-switch-chip:hover,
.ui-switch-chip:focus-within {
  background: var(--bg-hover, rgba(255, 255, 255, 0.06));
  border-color: var(--border);
}
.ui-switch-chip:active {
  background: var(--bg-hover, rgba(255, 255, 255, 0.08));
  border-color: var(--border);
}
.ui-switch-chip .ui-switch-copy strong {
  font-size: 12.5px;
  font-weight: 550;
  word-break: break-word;
}

/* legacy .checks → switch-friendly layout when mixed */
.checks.ui-switch-grid,
.checks:has(.ui-switch-chip) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-1);
}

.btn, a.btn, .btn-sm, a.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: var(--btn-h);
  min-height: var(--btn-h);
  padding: 0 var(--space-2);
  border-radius: var(--control-radius);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
  text-decoration: none !important;
  color: var(--info-fg) !important;
  border: 1px solid rgba(59, 130, 246, 0.42);
  background: rgba(59, 130, 246, 0.12);
  box-sizing: border-box;
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}
.btn:hover, a.btn:hover {
  background: rgba(59, 130, 246, 0.2);
  opacity: 1;
  transform: translateY(-1px);
}
.btn:active:not(:disabled), a.btn:active {
  transform: scale(0.96) translateY(0);
}
.btn:disabled, button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Secondary / shortcuts — سفید خنثی */
.btn-ghost,
a.btn.btn-ghost {
  color: var(--foreground) !important;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 500;
}
.btn-ghost:hover,
a.btn.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--foreground) !important;
  opacity: 1;
  transform: translateY(-1px);
}
.btn-danger {
  color: var(--destructive-fg) !important;
  border: 1px solid rgba(239, 68, 68, 0.42);
  background: rgba(239, 68, 68, 0.12);
  font-weight: 550;
}
.btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
  opacity: 1;
  transform: translateY(-1px);
}
.btn-ok {
  color: var(--ok-fg) !important;
  border: 1px solid rgba(34, 197, 94, 0.42);
  background: rgba(34, 197, 94, 0.12);
  font-weight: 550;
}
.btn-ok:hover {
  background: rgba(34, 197, 94, 0.2);
  opacity: 1;
  transform: translateY(-1px);
}
.btn-warn {
  color: var(--warn-fg) !important;
  border: 1px solid rgba(234, 179, 8, 0.42);
  background: rgba(234, 179, 8, 0.12);
  font-weight: 550;
}
.btn-warn:hover {
  background: rgba(234, 179, 8, 0.2);
  opacity: 1;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--btn-h); height: var(--btn-h); min-height: var(--btn-h);
  padding: 0;
  border-radius: var(--control-radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--foreground);
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.09);
}
.icon-btn:active {
  transform: scale(0.94);
}
.icon-btn .ico {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn.icon-move {
  color: var(--foreground);
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.04);
}
.icon-btn.icon-fixed {
  /* Same footprint/colors as up/down; non-interactive lock stand-in */
  color: var(--foreground);
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  cursor: default;
  opacity: 0.85;
}
.icon-btn.icon-fixed:hover { filter: none; }
.icon-btn.icon-add {
  color: var(--ok-fg);
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.1);
}
.icon-btn.icon-remove {
  color: var(--destructive-fg);
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.1);
}
.icon-btn:hover { filter: brightness(1.12); opacity: 1; }
.icon-btn:disabled { opacity: 0.35; cursor: default; }

.actions {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  align-items: center;
}
/* Keep header actions on the title row (don't inherit .actions margin-top).
   Width hugs label like «افزودن نماینده» — never stretch short titles. */
.page-head > .actions,
.page-head > .page-head-actions,
.page-head > .btn,
.page-head > a.btn,
.page-head > .inbox-reset-form {
  margin-top: 0;
  flex: 0 0 auto;
  align-self: center;
  width: auto;
  max-width: 100%;
}
.page-head-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  max-width: min(100%, 62vw);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.page-head > .btn,
.page-head > a.btn,
.page-head > .actions > .btn,
.page-head > .actions > a.btn,
.page-head > .page-head-actions > .btn,
.page-head > .page-head-actions > a.btn,
.page-head > .actions > form > .btn,
.page-head > .page-head-actions > form > .btn {
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  /* Same horizontal inset as «افزودن نماینده» (.btn default) */
  padding-inline: var(--space-2);
  box-sizing: border-box;
}
.page-head > .actions > form,
.page-head > .page-head-actions > form {
  display: flex;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  margin: 0;
}
.page-head > div:has(> .page-title) {
  flex: 1 1 0%;
  min-width: 0;
}
.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-1);
}
.quick-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  min-height: var(--btn-h);
  padding: 0 var(--space-2);
  border-radius: var(--control-radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--foreground);
  font-weight: 500;
  font-size: 13px;
  text-align: center;
}
.quick-links a:hover { background: rgba(255, 255, 255, 0.09); opacity: 1; }

.table-wrap {
  display: block;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  width: 100%;
  position: relative;
  /* Clip thead/row paints to the rounded frame (no broken corners on hover/scroll) */
  isolation: isolate;
}
.card > .table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  /* Pull flush to card content edges under the title */
  margin-top: 0;
}
.card.card-flush > .table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
  /* Radius + overflow on the SAME box so sticky thead cannot square-paint past corners */
  overflow: auto;
  max-width: 100%;
}
.card.card-flush > .table-wrap:first-child {
  border-start-start-radius: var(--radius);
  border-start-end-radius: var(--radius);
}
.card.card-flush > .table-wrap:last-child {
  border-end-start-radius: var(--radius);
  border-end-end-radius: var(--radius);
}
.card.card-flush > h2 { padding: var(--card-pad) var(--card-pad) var(--space-1); margin: 0; }
/* Flush search under an in-card title: tight top (title already has --card-pad).
   When search is the first child (no in-card title), use full --card-pad so
   users / finance / pg-users match titled cards like resellers. */
.card.card-flush > .search-bar {
  padding: var(--space-1) var(--card-pad) 0;
  margin-bottom: var(--space-2);
}
.card.card-flush > .search-bar:first-child {
  padding-top: var(--card-pad);
}
.card.card-flush > p.muted,
.card.card-flush > .card-flush-note {
  padding: var(--space-2) var(--card-pad) var(--card-pad);
  margin: 0;
  font-size: 12px;
}
/* Caption under flush title: tight to h2, light bottom before next block */
.card.card-flush > h2 + p.muted,
.card.card-flush > h2 + .update-card-caption,
.card.card-flush > .card-flush-head + p.muted {
  padding: 0 var(--card-pad) var(--space-2);
  margin-top: calc(-1 * var(--space-1));
}
.card.card-flush > .flash {
  margin: 0 var(--card-pad) var(--space-2);
}
.card.card-flush > .checks {
  padding: var(--space-1) var(--card-pad) var(--space-2);
}
.card.card-flush > .table-wrap table th:first-child,
.card.card-flush > .table-wrap table td:first-child { padding-inline-start: var(--space-2); }
.card.card-flush > .table-wrap table th:last-child,
.card.card-flush > .table-wrap table td:last-child { padding-inline-end: var(--space-2); }

table {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}
th, td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--border);
  text-align: right;
  vertical-align: middle;
  font-size: 13px;
}
th {
  /* Match .card h2 / panel section titles */
  color: var(--foreground);
  font-size: var(--title-size);
  font-weight: 600;
  line-height: 1.5;
  background: var(--table-head-bg);
  white-space: nowrap;
}
th[data-sort-type] {
  cursor: pointer;
  user-select: none;
  padding-inline-end: 1.15rem;
  position: relative;
}
/* Sort icons: Lucide-style chevron-up-down (idle) / chevron-up / chevron-down */
th[data-sort-type]::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.2rem;
  top: 50%;
  width: 0.875rem;
  height: 0.875rem;
  transform: translateY(-50%);
  opacity: 0.38;
  pointer-events: none;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
th[data-sort-type]:hover::after {
  opacity: 0.62;
}
th[data-sort-type][aria-sort="ascending"]::after {
  opacity: 0.85;
  border: none;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}
th[data-sort-type][aria-sort="descending"]::after {
  opacity: 0.85;
  border: none;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
th[data-sort-type]:hover {
  color: var(--accent, var(--foreground));
}
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--border);
}
/* Keep header corners inside the rounded table/card frame (RTL-aware) */
.table-wrap > table > thead > tr > th:first-child {
  border-start-start-radius: calc(var(--radius) - 1px);
}
.table-wrap > table > thead > tr > th:last-child {
  border-start-end-radius: calc(var(--radius) - 1px);
}
/* Flush: no inner border — match full card radius; clip comes from .table-wrap overflow */
.card.card-flush > .table-wrap:first-child > table > thead > tr > th:first-child {
  border-start-start-radius: var(--radius);
}
.card.card-flush > .table-wrap:first-child > table > thead > tr > th:last-child {
  border-start-end-radius: var(--radius);
}
.card.card-flush > .table-wrap:not(:first-child) > table > thead > tr > th:first-child,
.card.card-flush > .table-wrap:not(:first-child) > table > thead > tr > th:last-child {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}
tbody tr:hover td {
  background: color-mix(in srgb, var(--muted-fg) 8%, transparent);
}
tr:last-child td { border-bottom: 0; }
.mono { font-family: var(--font); font-size: 12px; font-variant-numeric: tabular-nums; }
input.mono, textarea.mono, select.mono { font-size: var(--control-fs); }

/* Unified chip tags — compact, soft, one rhythm for badge / ver / role */
.badge,
.role-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 20px;
  padding: 0 var(--space-1);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted-fg);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  vertical-align: middle;
}
.badge {
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted-fg);
  border-color: rgba(255, 255, 255, 0.08);
}
.badge.ok, .badge.active, .badge.approved, .badge.delivered, .badge.answered,
.badge.connected, .badge.healthy {
  background: rgba(34, 197, 94, 0.1);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.22);
}
.badge.warn, .badge.pending, .badge.awaiting, .badge.open,
.badge.connecting {
  background: rgba(234, 179, 8, 0.1);
  color: #fde047;
  border-color: rgba(234, 179, 8, 0.22);
}
.badge.danger, .badge.bad, .badge.rejected, .badge.blocked, .badge.cancelled, .badge.failed,
.badge.error, .badge.unhealthy {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.22);
}
.badge.info, .badge.paid,
.badge.role-reseller {
  background: rgba(59, 130, 246, 0.1);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.22);
}
.badge.role-admin {
  background: rgba(255, 255, 255, 0.06);
  color: var(--foreground);
  border-color: rgba(255, 255, 255, 0.12);
}
.badge.role-user, .badge.fixed, .badge.neutral {
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted-fg);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Status column: chips sit in a row when there is room, wrap with a real gap. */
.status-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  max-width: 100%;
}
.status-tags .badge {
  margin: 0;
  flex: 0 1 auto;
}
@media (min-width: 1101px) {
  .status-tags {
    flex-wrap: nowrap;
    width: max-content;
  }
}

.flash {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius);
  padding: var(--space-2);
  margin: 0 0 var(--section-gap);
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
  background: var(--bg-card);
  text-align: start;
  animation: flash-in var(--motion-med) var(--ease-out) both;
}
/* Author .flash { display:flex } would otherwise override UA [hidden] on login */
.flash[hidden] {
  display: none !important;
}
/* Same trap: .form-field { display:flex } beats UA [hidden] — never show gated fields */
.form-field[hidden],
#confirm-reason-slot[hidden],
#create-reseller-fields[hidden],
.create-reseller-fields[hidden] {
  display: none !important;
}
/* Nested reseller options keep the same vertical rhythm as .form-stack */
.form-stack > .create-reseller-fields,
#create-reseller-fields.create-reseller-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}
.form-stack > .create-reseller-fields > .ui-switch-section,
#create-reseller-fields.create-reseller-fields > .ui-switch-section {
  margin: 0;
}
.form-stack > .create-reseller-fields > .ui-switch-list,
#create-reseller-fields.create-reseller-fields > .ui-switch-list {
  margin: 0;
}
.flash > .flash-copy,
.flash > .home-update-copy,
.flash > .dash-bot-setup-inner {
  min-width: 0;
  flex: 1 1 auto;
  align-self: center;
}
.flash > .btn,
.flash > a.btn {
  flex: 0 0 auto;
  align-self: center;
}
.flash.ok { background: rgba(34, 197, 94, 0.1); color: #86efac; border-color: rgba(34, 197, 94, 0.28); }
.flash.err { background: rgba(239, 68, 68, 0.1); color: #fca5a5; border-color: rgba(239, 68, 68, 0.28); }
.flash.warn { background: rgba(234, 179, 8, 0.1); color: #fde047; border-color: rgba(234, 179, 8, 0.28); }

/* Icon box — same footprint as .stat-ico; shape encodes severity */
.flash.ok::before,
.flash.warn::before,
.flash.err::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}
/* Green: square + check */
.flash.ok::before {
  background-color: rgba(34, 197, 94, 0.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386efac' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M8 12.2l2.8 2.8L16.5 9'/%3E%3C/svg%3E");
}
/* Yellow: triangle + ! */
.flash.warn::before {
  background-color: rgba(234, 179, 8, 0.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fde047' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8L21 19.2H3L12 3.8z'/%3E%3Cpath d='M12 9.2v5'/%3E%3Ccircle cx='12' cy='16.6' r='0.9' fill='%23fde047' stroke='none'/%3E%3C/svg%3E");
}
/* Red: circle + X */
.flash.err::before {
  background-color: rgba(239, 68, 68, 0.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E");
}
.flash-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  min-width: 0;
}
.confirm-message {
  margin: 0;
  line-height: 1.6;
}
.muted-list {
  margin: 0;
  padding-inline-start: var(--space-2);
}
.home-balance {
  margin: var(--space-1) 0 0;
  font-size: 1.35rem;
}
.home-balance + .flash {
  margin-top: var(--space-2);
}
.stack-mt {
  margin-top: var(--space-2);
}
.stack-mt-section {
  margin-top: var(--section-gap);
}
/* Auth / modal stacks already own gap — zero child chrome margins */
.auth-form > .flash,
.auth-form > .error,
.auth-form > .auth-restart-hint,
.auth-panel > .flash {
  margin: 0;
}
.form-stack > p.muted {
  margin: 0;
}
.ui-modal-panel > p.muted {
  margin: 0 0 var(--space-2);
}
.flash-copy strong {
  font-size: 13px;
  font-weight: 650;
  color: inherit;
}
.flash-copy span,
.flash-copy .muted {
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.92;
  color: inherit;
}
/* Captions inside flash boxes match the box severity color (not muted gray) */
.flash .muted,
.flash small.muted,
.flash p.muted,
.flash span.muted,
.flash .home-update-copy .muted,
.flash .dash-bot-setup-inner .muted {
  color: inherit;
}

.auth-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(var(--space-3) + var(--safe-top)) calc(var(--space-2) + var(--safe-right)) calc(var(--space-3) + var(--safe-bottom)) calc(var(--space-2) + var(--safe-left));
  background: var(--background);
}
.auth-wrap--atmo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.auth-atmosphere {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.auth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.55;
  will-change: transform;
}
.auth-orb-a {
  width: min(52vw, 420px);
  height: min(52vw, 420px);
  top: -12%;
  inset-inline-end: -8%;
  background: color-mix(in srgb, var(--primary) 34%, transparent);
  animation: panel-status-drift-a 14s var(--ease-standard, ease) infinite alternate;
}
.auth-orb-b {
  width: min(42vw, 320px);
  height: min(42vw, 320px);
  bottom: 8%;
  inset-inline-start: -10%;
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  animation: panel-status-drift-b 18s var(--ease-standard, ease) infinite alternate;
}
.auth-grid {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(color-mix(in srgb, var(--border) 80%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--border) 80%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 20%, transparent 75%);
}
html[data-theme="light"] .auth-orb { opacity: 0.35; }
html[data-theme="light"] .auth-grid { opacity: 0.35; }

.auth-panel {
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.auth-panel--stage {
  position: relative;
  width: min(100%, 26.5rem);
  animation: panel-status-in 480ms var(--ease-out, ease) both;
}
.auth-brand { text-align: center; }
.auth-brand .brand-logo {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  margin: 0 auto var(--space-2);
  box-shadow: 0 0 0 1px var(--border);
  animation: panel-status-in 520ms var(--ease-out, ease) 80ms both;
}
.auth-brand h1 {
  line-height: 1.25;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--brand-fg);
}
.auth-brand p {
  margin: var(--space-0) 0 0;
  color: var(--muted-fg);
  font-size: 13px;
  line-height: 1.5;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
}
/* Atmospheric login card — same language as status pages, no top accent line */
.auth-form--card {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--foreground) 4%, transparent),
    0 24px 48px -28px color-mix(in srgb, #000 55%, transparent);
  animation: panel-status-card-in 560ms var(--ease-out, ease) 60ms both;
}
html[data-theme="light"] .auth-form--card {
  background: color-mix(in srgb, var(--bg-card) 96%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--foreground) 4%, transparent),
    0 28px 50px -30px color-mix(in srgb, #000 18%, transparent);
}
/* Detect WebKit autofill without showing a visual flash */
.auth-form--card input:-webkit-autofill {
  animation-name: auth-autofill-mark;
  animation-duration: 0.01s;
}
@keyframes auth-autofill-mark {
  from { opacity: 0.99; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-panel--stage,
  .auth-brand .brand-logo,
  .auth-form--card,
  .auth-orb {
    animation: none !important;
  }
}
.auth-form[hidden],
.setup-step[hidden] {
  display: none !important;
}
.auth-form label { margin: 0; }
.auth-form .btn { width: 100%; height: var(--btn-h); margin-top: var(--space-1); }
.pw-field {
  position: relative;
  display: block;
  margin-top: var(--space-1);
}
.pw-field input {
  width: 100%;
  margin-top: 0;
  padding-inline-end: var(--space-5);
}
.pw-toggle {
  position: absolute;
  inset-inline-end: var(--space-1);
  top: 0;
  bottom: 0;
  width: 36px;
  height: var(--btn-h);
  margin-block: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted-fg);
  cursor: pointer;
  padding: 0;
  transform: none;
}
.pw-toggle:hover,
.pw-toggle:focus-visible {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  outline: none;
}
.pw-ico {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pw-toggle.is-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 22px;
  height: 1.8px;
  margin: auto;
  background: currentColor;
  border-radius: 1px;
  transform: rotate(-40deg);
  pointer-events: none;
}
.auth-foot { text-align: center; color: var(--muted-fg); font-size: 12px; }

.setup-panel { width: min(460px, 100%); }
.setup-title { margin: 0; font-size: 1.05rem; }
.setup-lead, .setup-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.setup-hint { text-align: start; font-size: 12px; }
.setup-actions {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-1);
}
.setup-actions .btn { width: auto; flex: 1; margin-top: 0; }
.setup-actions .btn-ghost { flex: 0 0 auto; min-width: 88px; }
.setup-progress {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
}
.setup-progress span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
  border: 1px solid var(--border);
}
.setup-progress span.done {
  background: color-mix(in srgb, var(--foreground) 32%, transparent);
}
.setup-progress span.current {
  background: var(--foreground);
  border-color: var(--foreground);
}
.setup-progress[hidden],
.setup-probe[hidden] {
  display: none !important;
}
.setup-probe {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.setup-probe-bar {
  height: 4px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  overflow: hidden;
}
.setup-probe-bar i {
  display: block;
  height: 100%;
  width: 8%;
  border-radius: inherit;
  background: var(--foreground);
  transition: width 0.35s ease;
}
.setup-probe-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.setup-probe-steps li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 13px;
  color: var(--muted-fg);
}
.setup-probe-steps li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid var(--border);
}
.setup-probe-steps li.is-on { color: var(--foreground); }
.setup-probe-steps li.is-on::before {
  background: var(--foreground);
  border-color: var(--foreground);
}
.setup-probe-steps li.is-done { color: var(--foreground); }
.setup-probe-steps li.is-done::before {
  background: rgba(255, 255, 255, 0.45);
  border-color: transparent;
}
.setup-audit {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.setup-audit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}
.setup-audit-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 0.2em 0.55em;
  border-radius: 99px;
  border: 1px solid var(--border);
}
.setup-audit-badge.is-owner {
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.28);
}
.setup-audit-badge.is-limited {
  background: rgba(234, 179, 8, 0.12);
  color: #fde047;
  border-color: rgba(234, 179, 8, 0.28);
}
.setup-audit-user {
  font-size: 12px;
}
.setup-audit-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.setup-audit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-0);
}
.setup-audit-empty { margin: 0; font-size: 13px; }
.setup-audit-kvs {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.setup-audit-kvs > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 13px;
}
.setup-audit-kvs dt { color: var(--muted-fg); }
.setup-audit-kvs dd { margin: 0; font-weight: 600; }
.setup-audit-limits {
  margin-top: var(--space-1);
}
.pg-limit-board {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pg-limit-board .home-periods-head {
  margin: 0;
}
.pg-limit-constraints {
  margin-top: var(--space-1);
}
.setup-audit-flags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  font-size: 13px;
}
.setup-audit-flags li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}
.setup-audit-flags li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 0.45em;
  flex: 0 0 auto;
  border-radius: 50%;
}
.setup-audit-flags li.is-yes::before { background: #4ade80; }
.setup-audit-flags li.is-no::before { background: #facc15; }
.setup-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.setup-copy-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.setup-copy-block code {
  display: block;
  font-size: 12px;
  word-break: break-all;
  line-height: 1.5;
  padding: var(--space-1);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
}
.setup-copy-btn {
  width: 100%;
  margin: 0;
}
/* Keep ".env" as one LTR token inside RTL flash copy (flex must not split it) */
.flash-copy code.env-fname,
code.env-fname {
  unicode-bidi: isolate;
  direction: ltr;
  white-space: nowrap;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
  padding: 0 0.2em;
}
/* Auth/form error blocks only — never override compact .badge chips */
.error:not(.badge) {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: var(--radius);
  padding: var(--space-2);
  margin-bottom: var(--section-gap);
  font-size: 13px;
  text-align: center;
}

.site-footer {
  margin-top: auto;
  padding-top: var(--page-title-gap);
  /* Same inset owner as .side-foot — desktop/mobile/PWA one path */
  padding-bottom: var(--bottom-inset);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  color: var(--muted-fg);
  font-size: 12px;
  line-height: 1.25;
  flex: 0 0 auto;
  flex-shrink: 0;
  /* Match .side-foot locked box so both separator tops sit on one line */
  min-height: calc(var(--footer-bar-h) + var(--bottom-inset));
  max-height: calc(var(--footer-bar-h) + var(--bottom-inset));
  overflow: hidden;
  box-sizing: border-box;
}
.site-footer a { color: var(--muted-fg); text-decoration: none; }
.site-footer a:hover { color: var(--primary); }
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}
.footer-actions { display: flex; align-items: center; gap: var(--space-1); }
.btn-star,
a.btn.btn-star {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--brand-fg) !important;
  border: 1px solid rgba(249, 115, 22, 0.42);
  background: rgba(249, 115, 22, 0.12);
  border-radius: var(--control-radius);
  padding: 0 var(--space-1);
  height: 28px;
  min-height: 28px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  box-sizing: border-box;
}
.btn-star:hover,
a.btn.btn-star:hover {
  background: rgba(249, 115, 22, 0.2);
  color: var(--brand-fg) !important;
  opacity: 1;
  filter: none;
}
.btn-star svg { width: 14px; height: 14px; flex: 0 0 auto; }
.btn-star-gh { opacity: 0.9; }
.btn.is-copied,
.btn.btn-ok.is-copied {
  color: var(--ok-fg) !important;
  border-color: rgba(34, 197, 94, 0.42);
  background: rgba(34, 197, 94, 0.12);
}


.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--section-gap);
}
.setting-item.full { grid-column: 1 / -1; }
.settings-card { margin-bottom: var(--section-gap); scroll-margin-top: var(--section-gap); }
.settings-main {
  display: flex;
  flex-direction: column;
  /* Same card→card rhythm as .settings-layout (preview ↔ first card = --stack-gap) */
  gap: var(--stack-gap);
}
/* Parent gap owns vertical rhythm — zero child margins to avoid gap+margin stacking */
.settings-main > .card,
.settings-main > .settings-card,
.settings-main > form,
.settings-main > .flash,
.settings-main > .actions,
.settings-main > .sticky-actions {
  margin-top: 0;
  margin-bottom: 0;
}
.settings-form,
form.settings-form,
.menu-layout-form {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  margin: 0;
}
.settings-domain-stack {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  margin: 0;
}
.settings-domain-stack > .settings-form,
.settings-domain-stack > form.settings-form {
  margin: 0;
}
.settings-form > .card,
.settings-form > .settings-card,
.settings-form > .flash,
.settings-form > .actions,
.settings-form > .sticky-actions,
form.settings-form > .card,
form.settings-form > .settings-card,
form.settings-form > .flash,
form.settings-form > .actions,
form.settings-form > .sticky-actions,
.menu-layout-form > .card,
.menu-layout-form > .dnd-card,
.menu-layout-form > .actions,
.menu-layout-form > .sticky-actions,
.menu-layout-form > .flash {
  margin-top: 0;
  margin-bottom: 0;
}
.menu-layout-intro { margin-bottom: 0; }
.dnd-card { margin: 0; }
/* Nested cards: never stack .card { margin-bottom } on top of .dnd-cols gap
   (mobile re-applies margin-bottom: section-gap on every .card). */
.dnd-cols > .card,
.dnd-cols > .dnd-card {
  margin-top: 0;
  margin-bottom: 0;
}

.image-preview {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
.image-preview img {
  max-width: 160px; max-height: 160px; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--border);
}
.file-label { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; font-size: 13px; }
.file-label input[type="file"] {
  padding: var(--space-1);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: #09090b;
}
.upload-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 132px;
  margin-top: var(--space-1);
  padding: var(--card-pad);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--background);
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  transition: border-color .15s ease, background .15s ease;
}
.upload-box:hover,
.upload-box:focus-within {
  border-color: rgba(249, 115, 22, 0.45);
  background: var(--background);
}
/* Inside the body-colored image chrome, dashed box gets a slight contrast lift */
.image-setting .upload-box,
.image-setting .upload-box:hover,
.image-setting .upload-box:focus-within {
  background: color-mix(in srgb, var(--muted) 42%, var(--background));
}
.upload-box input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  border: 0;
  background: transparent;
  font-size: 0;
}
.upload-box-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--control-radius);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 55%, var(--background));
  color: var(--brand-fg);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
}
.image-setting .upload-box-plus {
  background: color-mix(in srgb, var(--muted) 72%, var(--background));
}
.upload-box-title {
  font-size: var(--title-size);
  font-weight: 600;
  color: var(--foreground);
}
.upload-box-hint,
.upload-box-name {
  font-size: 12px;
  line-height: 1.5;
  max-width: 100%;
  word-break: break-word;
}
.upload-box.has-file .upload-box-name {
  color: var(--ok-fg);
}
.upload-box-progress {
  display: block;
  width: min(220px, 80%);
  height: 6px;
  margin-top: var(--space-1);
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 70%, var(--border));
  overflow: hidden;
}
.upload-box-progress[hidden] { display: none !important; }
.upload-box-progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ea580c, #f97316);
  transition: width .12s linear;
}
.upload-box.is-uploading {
  pointer-events: none;
  opacity: 0.92;
}
.upload-toast {
  position: fixed;
  z-index: 5000;
  inset-inline: var(--space-2);
  bottom: calc(var(--space-3) + var(--safe-bottom, 0px));
  max-width: 420px;
  margin-inline: auto;
  left: 0;
  right: 0;
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: color-mix(in srgb, var(--bg-elevated, var(--bg-card)) 92%, #166534);
  color: var(--ok-fg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  animation: upload-toast-in .22s ease both;
}
@keyframes upload-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.menu-layout-mode {
  margin-top: var(--space-1);
}
/* Direct title only — never `.setting-item span` (that also hits
   `.ui-select-label` inside the toggle and breaks vertical centering:
   display:block + margin-bottom + muted 12px overrode the control). */
.menu-layout-mode .setting-item > span:not(.ui-select-label) {
  display: block;
  font-size: 12px;
  color: var(--muted-fg);
  margin-bottom: var(--space-1);
}
.file-label.upload-box {
  gap: var(--space-1);
  font-size: inherit;
}

.force-channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}
.force-channels-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
}
.force-channels-title {
  display: block;
  font-size: var(--title-size);
  font-weight: 600;
  line-height: 1.5;
  color: var(--foreground);
}
.force-channels-help {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}
.force-channels-list {
  display: grid;
  /* Slightly roomier cards on wide settings panes (mobile stays 1fr below) */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-2);
  width: 100%;
  align-items: stretch;
}
.force-channel-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  justify-content: space-between;
  min-height: 168px;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-sizing: border-box;
}
.force-channel-title-wrap,
.force-channel-id-wrap,
.force-channel-link-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}
.force-channel-id-wrap {
  flex: 1 1 auto;
}
.force-channel-title-wrap .force-channel-title,
.force-channel-id-wrap .force-channel-id,
.force-channel-link-wrap .force-channel-link {
  width: 100%;
  margin-top: var(--space-1);
}
.force-channel-title-wrap .muted,
.force-channel-title-wrap small.muted,
.force-channel-id-wrap .muted,
.force-channel-id-wrap small.muted,
.force-channel-link-wrap .muted,
.force-channel-link-wrap small.muted {
  margin-top: var(--space-1);
  font-size: 11px;
  font-weight: 400;
}
.force-channel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  margin-top: auto;
}
.force-channel-req {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1) !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: var(--btn-h);
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--foreground) !important;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.force-channel-req .ui-switch { margin-inline-start: var(--space-1); flex: 0 0 auto; }
.force-channel-actions {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  flex: 0 0 auto;
}
/* shadcn-style dashed “add” tile beside (mobile: below) channel cards */
.force-channel-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 168px;
  width: 100%;
  padding: var(--space-2);
  box-sizing: border-box;
  border: 1px dashed color-mix(in srgb, var(--muted-fg) 45%, var(--border));
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted-fg);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.force-channel-add:hover {
  background: var(--bg-hover);
  border-color: var(--muted-fg);
  color: var(--foreground);
  opacity: 1;
}
.force-channel-add-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1px dashed color-mix(in srgb, var(--muted-fg) 45%, var(--border));
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.force-channel-add:hover .force-channel-add-plus {
  border-color: currentColor;
}
@media (max-width: 720px) {
  .force-channels-list {
    grid-template-columns: 1fr;
  }
}

.field-hint-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-0);
  width: 100%;
  text-align: right;
  margin-top: var(--space-1);
  font-size: 11px;
  line-height: 1.5;
}
.field-hint-stack > span {
  display: block;
  width: 100%;
  text-align: right;
}
.field-hint-stack code {
  font-size: 11px;
  word-break: break-all;
}
.broadcast-snippet {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notify-form { margin: 0; }
.notify-list { display: flex; flex-direction: column; gap: var(--space-1); }

.support-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.support-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--card-pad);
  align-items: flex-end;
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
}
.support-fields {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(160px, 1.4fr) 88px auto;
  gap: var(--space-1) var(--space-2);
  flex: 1 1 420px;
  align-items: end;
}
.support-fields label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.86rem;
  color: var(--text-muted);
}
.support-fields input[type="text"],
.support-fields input[type="number"],
.support-fields input:not([type]) {
  width: 100%;
}
.support-enabled {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) !important;
  padding: var(--space-1) var(--space-2) !important;
  margin: 0;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--foreground) !important;
}
.support-enabled .ui-switch { margin-inline-start: auto; }
.support-enabled > span:not(.ui-switch) {
  font-size: 13px;
  font-weight: 550;
}
.support-actions {
  display: flex;
  gap: var(--space-1);
  flex: 0 0 auto;
  padding-bottom: var(--space-1);
}
@media (max-width: 860px) {
  .support-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .support-fields { grid-template-columns: 1fr; }
  .support-actions { width: 100%; }
  .support-actions .btn { flex: 1; }
}

.naming-preview {
  margin-top: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  background: var(--muted);
  font-size: 0.95rem;
}
.naming-preview .mono { letter-spacing: 0.02em; }
.plan-naming-block {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
/* Higher specificity than .ui-modal-panel h3 { margin: 0 } so title isn't stuck to the rule */
.plan-naming-block .plan-naming-title,
.ui-modal-panel .plan-naming-block .plan-naming-title {
  margin: 0 0 var(--space-1);
  font-size: var(--title-size);
  font-weight: 600;
  line-height: 1.25;
}
.plan-naming-preview { margin-top: var(--space-1); }

.sticky-actions {
  /* Under-card primary actions: spacing comes from parent flex gap
     (--section-gap) or the preceding card's margin-bottom — never both. */
  position: static;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
  margin: 0;
  z-index: auto;
}
/* Legacy: if a save row is still nested in a card, pull it out of the card pad */
.card > .actions.sticky-actions,
.card > form > .actions.sticky-actions:last-child {
  margin-top: var(--space-2);
  margin-inline: calc(-1 * var(--card-pad));
  margin-bottom: calc(-1 * var(--card-pad));
  padding: var(--space-2) var(--card-pad) var(--card-pad);
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.settings-form > .actions.sticky-actions,
.menu-layout-form > .actions.sticky-actions,
form.settings-form > .actions.sticky-actions,
.settings-main > .actions.sticky-actions,
.settings-main > .update-actions,
.settings-main > .actions {
  margin: 0;
}
/* Inside cards keep the same non-floating layout */
.card .sticky-actions,
.settings-card .sticky-actions {
  position: static;
  z-index: auto;
}
.menu-layout-form > .dnd-cols {
  margin: 0;
}
.dnd-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Same token as settings-layout / settings-main card stacks */
  gap: var(--stack-gap);
  width: 100%;
}
.dnd-list {
  list-style: none;
  margin: 0;
  padding: var(--space-1);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--muted);
}
.dnd-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2);
  min-height: 56px;
  cursor: grab;
}
.dnd-item.is-dragging {
  opacity: 0.55;
  cursor: grabbing;
}
.dnd-item .dnd-actions .icon-btn {
  cursor: pointer;
}
.dnd-item .meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.dnd-item .meta strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.dnd-item .meta .muted {
  font-size: 12px;
  line-height: 1.5;
}
.dnd-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  flex: 0 0 auto;
  margin-inline-start: auto;
  padding-inline-start: var(--space-1);
}
.pool-empty {
  padding: var(--space-2) var(--space-1);
  text-align: center;
  color: var(--muted-fg);
  font-size: 12px;
}

.section-tabs {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  /* Match title→tabs gap (.page-head margin-bottom / --page-title-gap) */
  margin-bottom: var(--page-title-gap);
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
}
/* Match bot pages: first content block after header stack hugs the chrome */
.section-tabs + .card,
.section-tabs + .flash,
.section-tabs + .home-panels,
.section-tabs + .pg-admin-head,
.pg-head + .card,
.pg-head + .flash,
.pg-head + .home-panels,
.pg-head + .pg-admin-head {
  margin-top: 0;
}
.section-tabs a,
.section-tabs .tab-btn {
  display: inline-flex;
  align-items: center;
  height: var(--btn-h);
  padding: 0 var(--space-2);
  border-radius: var(--control-radius);
  color: var(--muted-fg);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  /* No translate/scale — transforms leave a ghost gap above tabs until scroll repaint */
  transition:
    background var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}
.section-tabs a:hover,
.section-tabs .tab-btn:hover { color: var(--foreground); background: rgba(255, 255, 255, 0.07); opacity: 1; }
.section-tabs a:active,
.section-tabs .tab-btn:active { background: rgba(255, 255, 255, 0.1); }
.section-tabs a.active,
.section-tabs .tab-btn.active {
  background: rgba(249, 115, 22, 0.12);
  color: var(--brand-fg);
  border: 1px solid rgba(249, 115, 22, 0.42);
  font-weight: 600;
}
.section-tabs a.active:hover,
.section-tabs .tab-btn.active:hover {
  background: rgba(249, 115, 22, 0.2);
  color: var(--brand-fg);
  opacity: 1;
}
.section-tabs a.active:active,
.section-tabs .tab-btn.active:active {
  background: rgba(249, 115, 22, 0.24);
}

/* Domain settings modals (finance / support / loyalty)
   Outer panel clips to radius before JS; with scroll-shell the inner scroll
   owns chrome + radius (same split as .ui-modal-panel[data-scroll-shell]). */
.settings-modal-panel {
  display: flex;
  flex-direction: column;
  max-height: min(84vh, 900px);
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.settings-modal-panel[data-scroll-shell="1"] {
  overflow: hidden;
}
.settings-modal-panel .ui-modal-scroll > .ui-modal-head,
.settings-modal-panel > .ui-modal-head {
  flex: 0 0 auto;
}
.settings-modal-flash {
  flex: 0 0 auto;
  /* Vertical air owned by .ui-modal-scroll gap when shell is present */
  margin: 0;
}
.settings-modal-flash .flash {
  margin: 0;
}
.settings-modal-panel:not([data-scroll-shell="1"]) > .settings-modal-flash {
  margin-bottom: var(--space-2);
}
.settings-modal-panel .ui-modal-scroll > .modal-section-tabs,
.settings-modal-panel > .modal-section-tabs {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  max-width: 100%;
  /* Vertical rhythm owned by .ui-modal-scroll gap when shell is present */
  margin-bottom: 0;
  padding-bottom: var(--space-0);
}
.settings-modal-panel .ui-modal-scroll > .modal-section-tabs .tab-btn,
.settings-modal-panel > .modal-section-tabs .tab-btn {
  flex: 0 0 auto;
}
/* Fallback when scroll shell not yet wrapped: keep a little air under tabs */
.settings-modal-panel:not([data-scroll-shell="1"]) > .modal-section-tabs {
  margin-bottom: var(--space-2);
}
.settings-modal-body {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  padding-bottom: 0;
}
.settings-modal-body .settings-card {
  margin-top: 0;
}
.settings-modal-body .settings-card + .settings-card {
  margin-top: var(--space-3);
}
.modal-tab-panel[hidden] {
  display: none !important;
}

/* Update page helpers */
.update-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  min-width: 0;
  width: 100%;
}
.update-meta-versions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  min-width: 0;
  width: 100%;
}
.update-meta-box {
  padding: var(--card-pad);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.update-meta-box.update-meta-ok {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.28);
  color: #86efac;
}
.update-meta-box.update-meta-ok .muted { color: #86efac; }
.update-meta-box.update-meta-ok strong { color: #86efac; }
.update-meta-box.update-meta-err {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.28);
  color: #fca5a5;
}
.update-meta-box.update-meta-err .muted { color: #fca5a5; }
.update-meta-box.update-meta-err strong { color: #fca5a5; }
.update-meta .muted {
  display: block;
  font-size: 11px;
  margin-bottom: var(--space-1);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.update-meta strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
}

/* Security tab — right-align helper copy inside cards */
#identity-help,
#security-credentials-form .settings-card {
  text-align: right;
}
#security-credentials-form .setting-item > label {
  text-align: right;
  align-items: stretch;
}
#security-credentials-form .update-card-caption,
#security-credentials-form .setting-item label > small.muted,
#identity-help .muted-list,
#identity-help .muted-list li {
  display: block;
  width: 100%;
  text-align: right;
  direction: rtl;
  unicode-bidi: plaintext;
  align-self: stretch;
}

.progress-wrap { margin: var(--space-1) 0 var(--space-2); }
.progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--muted);
  border: 1px solid var(--border);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--brand);
  transition: width .3s ease;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Bot & connection settings — status strip + webhook switch */
.bot-conn-overview > .bot-conn-row {
  margin-top: 0;
}
.bot-conn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  width: 100%;
  min-width: 0;
}
.bot-conn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--btn-h);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
}
.bot-conn.is-ok {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--border));
  background: rgba(34, 197, 94, 0.06);
}
.bot-conn.is-err {
  border-color: color-mix(in srgb, var(--destructive) 35%, var(--border));
  background: rgba(239, 68, 68, 0.06);
}
.bot-conn.is-neutral {
  background: rgba(255, 255, 255, 0.04);
}
.bot-conn-ico {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted-fg);
}
.bot-conn.is-ok .bot-conn-ico { color: var(--ok); }
.bot-conn.is-err .bot-conn-ico { color: var(--destructive); }
.bot-conn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.bot-conn-k {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.35;
}
.bot-conn-cap {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.bot-conn-badge {
  margin-inline-start: auto;
  flex: 0 0 auto;
}
.bot-mode-switch-list {
  margin: 0;
}
.settings-card > .bot-mode-switch-list {
  margin: 0;
}
.bot-webhook-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.bot-webhook-block[hidden] {
  display: none !important;
}
.bot-webhook-block > .ssl-subhead {
  margin: 0;
}
.bot-webhook-block > .update-card-caption {
  margin: calc(-1 * var(--space-1)) 0 0;
}
.bot-webhook-preview {
  margin: 0;
}
.bot-webhook-block > .settings-grid {
  margin: 0;
}
/* Legacy radio mode cards (kept for compatibility) */
.bot-update-mode {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}
.bot-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
}
.bot-mode-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  min-width: 0;
}
.bot-mode-option:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
}
.bot-mode-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--border));
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.bot-mode-option input {
  margin-top: 3px;
  flex: 0 0 auto;
}
.bot-mode-option span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bot-mode-option strong {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
  color: var(--foreground);
}
.bot-mode-option small.muted {
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 720px) {
  .bot-conn-row,
  .bot-mode-grid {
    grid-template-columns: 1fr;
  }
  .bot-conn {
    min-height: 52px;
    padding: var(--space-2);
  }
  .bot-mode-option {
    padding: var(--space-2);
  }
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
  color: var(--muted-fg);
  font-size: 12px;
  line-height: 1.5;
}

/* SSL progress */
.ssl-progress {
  margin: 0 0 var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.ssl-progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  font-size: 12px;
  color: var(--muted-fg);
  margin-bottom: var(--space-1);
}
.ssl-progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}
.ssl-progress-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--brand);
  transition: width 0.35s ease;
}
.ssl-pre {
  display: block;
  max-height: 220px;
  overflow: auto;
  white-space: pre;
  font-family: var(--font);
  font-size: 11px;
  direction: ltr;
  text-align: left;
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--muted);
  margin: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.ssl-status-line {
  margin: 0;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ssl-status-line code,
.ssl-status-code,
.ssl-status-link {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.ssl-status-code { margin-inline-start: var(--space-1); }
.ssl-subhead {
  margin: 0;
  font-size: var(--title-size);
  font-weight: 600;
  line-height: 1.5;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.update-steps {
  list-style: none;
  margin: 0 0 var(--space-1);
  padding: 0;
  display: grid;
  gap: 0;
}
.update-steps li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius);
  color: var(--muted-fg);
  font-size: 13px;
  border: 0;
  background: transparent;
}
.update-steps li.done { color: var(--foreground); }
.update-steps li.current {
  color: var(--brand-fg);
  background: transparent;
  font-weight: 600;
}
.update-steps li.current .step-dot {
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}
.step-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.update-log {
  margin-top: var(--space-2);
  max-height: 200px;
  overflow: auto;
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted-fg);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  direction: ltr;
  text-align: left;
}
.update-actions { margin: 0; }
.update-ops[hidden] { display: none !important; }
.update-ops .progress-wrap { margin-top: var(--space-1); margin-bottom: var(--space-2); }
.update-stay-warn {
  margin: 0 0 var(--space-2);
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
}
.rollback-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-end;
  margin: 0;
  min-width: 0;
  width: 100%;
}
.update-channel-row {
  margin: 0 0 var(--space-1);
}
.update-channel-hint {
  margin: 0 0 var(--space-2);
  font-size: 12px;
  line-height: 1.5;
}
.rollback-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  color: var(--muted-fg);
}
.rollback-field select {
  width: 100%;
  margin-top: 0;
  /* RTL panel: value on the right (start), chevron on the opposite (physical left) */
  direction: rtl;
  text-align: right;
  text-align-last: right;
  padding-left: var(--space-4);
  padding-right: var(--space-2);
  background-position: left var(--space-2) center;
}
.rollback-row > .btn {
  flex: 0 0 auto;
  align-self: flex-end;
}
@media (max-width: 560px) {
  .rollback-row > .btn { width: 100%; }
}
.snap-list { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-1); }
.snap-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.snap-row strong { display: block; font-size: 13px; }
.snap-row small { color: var(--muted-fg); font-size: 12px; }

/* Topbar + hamburger (mobile) — fixed so it always stays on screen while scrolling */
.topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  height: calc(var(--topbar-h) + var(--safe-top));
  padding: var(--safe-top) var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  width: 100%;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.topbar-brand .brand-logo {
  width: var(--btn-h);
  height: var(--btn-h);
  border-radius: var(--r-sm);
}
.topbar-brand-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.topbar-brand strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  line-height: 1.25;
}
.topbar-version {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 11px;
  color: var(--muted-fg);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.menu-toggle {
  width: var(--btn-h);
  height: var(--btn-h);
  /* Same soft square as v4.3.10 — not pill / not card radius */
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--bot-line) 40%, var(--border));
  background: transparent;
  color: var(--bot-line);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  padding: 0;
  flex: 0 0 auto;
  margin-inline-start: auto;
}
.burger {
  width: 16px;
  height: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.burger i {
  display: block;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
}
.side-backdrop {
  /* Always in the tree — toggling display killed the opacity fade and forced
     a style recalc. Visibility + opacity stay compositor-friendly. */
  display: block;
  visibility: hidden;
  position: fixed;
  /* Full-bleed dim + tap-to-close. Must NOT use touch-action:none: that is a
     functional scroll lock covering the viewport, and iOS Safari then expands
     its bottom toolbar and will not retract it after the drawer closes
     (usually scrollY===0, so nothing scrolls to collapse chrome). Tap still
     fires with the default touch-action; page may scroll under the dim — that
     is what keeps the toolbar honest. */
  inset: 0;
  /* NO background/backdrop-filter on this fixed box — see ::before below. */
  background: transparent;
  z-index: 45;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-med) var(--ease-standard),
    visibility 0s linear var(--motion-med);
  overscroll-behavior: contain;
}
/* Dim on a pseudo-element so the fixed box itself stays transparent to Safari
   26's edge sampler (it freezes the last sampled colour when a candidate goes
   away). Secondary to the scroll-lock rule above. */
.side-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--side-dim);
}
.side-backdrop.show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--motion-med) var(--ease-standard),
    visibility 0s linear 0s;
}

/* Top safe inset extras — keep on :root (bare props inside @media are dropped). */
@media (max-width: 900px) {
  :root {
    --safe-top-extra: 16px;
    --safe-top: calc(env(safe-area-inset-top, 0px) + var(--safe-top-extra));
  }
}
/* Installed PWA / fullscreen: more air under Dynamic Island / status bar. */
@media (display-mode: standalone),
       (display-mode: fullscreen),
       (display-mode: window-controls-overlay) {
  :root {
    --safe-top-extra: 24px;
    --safe-top: calc(env(safe-area-inset-top, 0px) + var(--safe-top-extra));
  }
}

/* —— Mobile layout: toolbar + hamburger drawer —— */
@media (max-width: 900px) {
  .desk-only { display: none !important; }
  .topbar.mobile-only { display: flex !important; }

  /*
    Mobile geometry — ONE model.

      A) The document stays the vertical scroller AND stays gesture-scrollable
         while overlays are open. Never lock scrolling via html/body overflow,
         and never via a full-viewport touch-action:none overlay either — both
         expand iOS Safari's bottom toolbar and leave a solid short strip after
         close. Backdrop is dim + tap-to-close only.

      B) Fill height is 100svh (never dvh/lvh — they reflow while chrome moves).

      C) ONE bottom-inset owner (all viewports): both footers use
         padding-bottom:var(--bottom-inset) plus locked
         min/max-height: calc(var(--footer-bar-h) + var(--bottom-inset)).
         .side / .main / .shell never add bottom safe/foot padding.

      D) .side / .side-backdrop are position:fixed to the viewport. html/body/
         .shell must not become scroll containers (that would steal the fixed CB).

      E) Fixed overlays that touch a viewport edge keep their own background
         transparent and paint on an absolute child (tint freeze on Safari 26).
  */
  html:has(.shell) {
    height: auto;
    min-height: 100%;
    min-height: 100svh;
    overflow-x: visible;
    overflow-y: visible;
    background-color: var(--background);
    background: var(--background);
  }
  html:has(.shell) body {
    min-height: 100%;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow-x: visible;
    overflow-y: visible;
    background-color: var(--background);
    background: var(--background);
  }

  .shell {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-areas: none;
    flex: 1 0 auto;
    /* Fills the visible viewport on short pages — see invariant B. */
    min-height: 100%;
    min-height: 100svh;
    height: auto;
    max-height: none;
    overflow-x: visible;
    overflow-y: visible;
    padding-top: calc(var(--topbar-h) + var(--safe-top));
    /* No padding-bottom safe-area here — that empty strip WAS the visible bottom gap.
       Safe-area lives inside --bottom-inset on the footers only. */
    padding-bottom: 0;
    background-color: var(--background);
    background: var(--background);
  }

  .topbar { display: flex; }

  .menu-toggle {
    position: relative;
    z-index: 60;
    /* Cancels the 300ms tap delay; pairs with pointerup in panel.js so a tap
       during momentum scroll still opens the drawer (click alone waits for settle). */
    touch-action: manipulation;
  }
  /* Ported ui-select / kebab menus use inline z-index ~5000 (above modals).
     When the drawer is open, raise shell chrome above those leftovers so the
     sidebar never paints under an open dropdown (JS also closes menus on open).

     Raise the whole `.topbar` — not only `.menu-toggle`. Toggle lives inside
     topbar's stacking context (z-index 55); bumping the button alone cannot
     escape it, so the drawer at 5200 covered the header. Keep topbar above
     the drawer so header + hamburger stay flush with the shell. */
  body.nav-open .side-backdrop {
    z-index: 5100;
  }
  body.nav-open .side {
    z-index: 5200;
  }
  body.nav-open .topbar {
    z-index: 5300;
  }

  .side {
    position: fixed;
    top: calc(var(--topbar-h) + var(--safe-top));
    bottom: 0;
    width: var(--drawer-w);
    height: auto;
    max-height: none;
    z-index: 50;
    left: auto;
    /* Shell stays docked at `right: 0` (tracks viewport bottom on WebKit).
       Slide is on `.side-panel` via transform — avoids layout thrash from
       animating `right` while keeping the fixed box untransformed. */
    right: 0;
    transition: none;
    border-left: none;
    border-top: none;
    grid-area: unset;
    display: flex !important;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    overscroll-behavior-y: contain;
    box-sizing: border-box;
    /* Transparent shell — paint lives on `.side-panel` (Safari edge sampler). */
    background-color: transparent;
    background: transparent;
  }
  /* Light theme must not re-paint the fixed shell white while the drawer is closed. */
  html[data-theme="light"] .side {
    background-color: transparent;
    background: transparent;
  }
  .side-panel {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
    padding-top: var(--space-2);
    padding-inline: var(--space-2);
    padding-bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    background-color: var(--bg-card);
    background: var(--bg-card);
    transform: translate3d(calc(100% + 24px), 0, 0);
    transition: transform 0.22s var(--ease-standard);
    will-change: transform;
  }
  .side.open .side-panel {
    transform: translate3d(0, 0, 0);
  }
  .side:not(.open) {
    pointer-events: none;
  }
  /* Reinforces the global one-path footer lock (base .side-foot / .site-footer). */
  .side .side-foot {
    flex-shrink: 0;
    padding-bottom: var(--bottom-inset);
    min-height: calc(var(--footer-bar-h) + var(--bottom-inset));
    max-height: calc(var(--footer-bar-h) + var(--bottom-inset));
    overflow: hidden;
  }
  .side .side-foot-user { flex-wrap: nowrap; }
  .side .side-foot-name,
  .side .side-foot-identity {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  /* chips/pg-role already hidden globally on .side-foot */

  /* Instant close on navigation — disable slide so PWA paints closed before unload */
  html.ios .side.side-nav-closing .side-panel {
    transition: none !important;
  }

  .main {
    height: auto;
    max-height: none;
    flex: 1 0 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    /* Bottom inset lives on .site-footer only — never here (that split separators). */
    padding: var(--page-title-gap) var(--space-2) 0;
    overflow-x: clip;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    background-color: var(--background);
    background: var(--background);
  }
  .main-body { flex: 0 0 auto; padding-bottom: var(--page-title-gap); }
  .site-footer {
    flex-direction: row;
    flex-wrap: nowrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: auto;
    padding-top: var(--page-title-gap);
    padding-bottom: var(--bottom-inset);
    gap: var(--space-1);
    min-height: calc(var(--footer-bar-h) + var(--bottom-inset));
    max-height: calc(var(--footer-bar-h) + var(--bottom-inset));
    overflow: hidden;
  }
  .footer-meta { justify-content: center; }
  .footer-actions { justify-content: center; }
  .page-head { margin-bottom: var(--page-title-gap); gap: var(--space-2); align-items: center; }
  /* Keep stacked heads full-width — do not inherit align-items:center above */
  .page-head.page-head--stack { align-items: stretch; }
  /* Title actions stay on the same row, opposite the title (inline-start / left in RTL) */
  .page-head:has(> .actions),
  .page-head:has(> .btn),
  .page-head:has(> .page-head-actions),
  .page-head:has(> a.btn) {
    flex-wrap: nowrap;
    align-items: center;
  }
  .page-head > .actions,
  .page-head > .page-head-actions,
  .page-head > .btn,
  .page-head > a.btn {
    width: auto;
    flex: 0 0 auto;
    margin-top: 0;
    max-width: 100%;
  }
  /* Match direct «افزودن نماینده» sizing — content width, not equal-column stretch.
     Many actions (plans): keep one row and scroll horizontally — never wrap the
     title/icon onto a second line or shove the page title. */
  .page-head > .actions,
  .page-head > .page-head-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    width: auto;
    max-width: min(100%, 58vw);
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }
  .page-head > .actions > .btn,
  .page-head > .actions > a.btn,
  .page-head > .actions > form,
  .page-head > .page-head-actions > .btn,
  .page-head > .page-head-actions > a.btn,
  .page-head > .page-head-actions > form {
    width: auto;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
  }
  .page-head > .actions > form,
  .page-head > .page-head-actions > form {
    display: flex;
  }
  .page-head > .actions > form > .btn,
  .page-head > .page-head-actions > form > .btn {
    width: auto;
    justify-content: center;
    padding-inline: var(--space-2);
  }
  .page-head > .page-head-actions > form {
    display: flex;
    min-width: 0;
    max-width: 100%;
  }
  .page-head > .btn,
  .page-head > a.btn {
    width: auto;
    max-width: 100%;
    justify-content: center;
    padding-inline: var(--space-2);
  }
  .pg-head {
    margin-top: 0;
    margin-bottom: 0;
    gap: 0;
  }
  .pg-head > .pg-tabs,
  .pg-head > .section-tabs { margin-bottom: 0; padding-bottom: 0; }
  .pg-head > .page-head { margin-bottom: var(--page-title-gap); }
  .page-title { gap: var(--space-1); }
  .page-title-ico { width: 34px; height: 34px; border-radius: 14px; }
  .page-title-ico svg { width: 17px; height: 17px; }
  .page-head h1,
  .page-title h1 { font-size: 18px; }
  .page-head p { font-size: 12px; margin-top: var(--space-0); }
  .ui-modal-head h1,
  .ui-modal-head h2,
  .ui-modal-head h3,
  .ui-modal-panel > h1,
  .ui-modal-panel > h2,
  .ui-modal-panel > h3 { font-size: 18px; }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--section-gap);
  }
  .stat { min-height: 72px; padding: var(--space-2); }
  .stat strong { font-size: 18px; }
  .dash-cols { grid-template-columns: 1fr; gap: var(--section-gap); }
  .card { padding: var(--card-pad); margin-bottom: var(--section-gap); }
  /* Gap-owned stacks: parent gap only — kill mobile .card margin so active↔pool
     and layout↔menu match preview↔layout (--stack-gap), not gap+margin. */
  .settings-main > .card,
  .settings-main > .settings-card,
  .settings-form > .card,
  .settings-form > .settings-card,
  form.settings-form > .card,
  form.settings-form > .settings-card,
  .menu-layout-form > .card,
  .menu-layout-form > .dnd-card,
  .dnd-cols > .card,
  .dnd-cols > .dnd-card,
  .dash-cols > .card,
  .settings-layout > .tg-preview-slot > .card,
  .settings-layout > .tg-preview-slot > .settings-card,
  .settings-layout > .tg-preview-slot > .tg-preview-card {
    margin-bottom: 0;
  }
  .settings-grid, .dnd-cols { grid-template-columns: 1fr; }
  .quick-links { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .quick-links a { height: var(--btn-h); min-height: var(--btn-h); }

  /* Horizontal tables: prefer no scroll; kebab menus handle dense actions */
  .table-wrap {
    margin-inline: 0;
    width: 100%;
    border-radius: var(--radius);
  }
  .table-wrap.is-scrollable {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .card > .table-wrap,
  .card.card-flush > .table-wrap {
    margin-inline: 0;
    width: 100%;
  }
  .table-wrap.is-scrollable::after {
    display: none;
  }
  table { min-width: 0; }
  th, td { padding: var(--space-2); font-size: 13px; }
  th { font-size: var(--title-size); }

  .section-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .section-tabs.is-scrollable {
    mask-image: linear-gradient(to left, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .section-tabs a,
  .section-tabs .tab-btn {
    flex: 0 0 auto;
    height: var(--btn-h);
    min-height: var(--btn-h);
  }

  .sticky-actions { margin: 0; width: 100%; }

  .notify-row { flex-direction: row; }
  .actions { gap: var(--space-1); }
  .topbar .btn {
    height: var(--btn-h);
    min-height: var(--btn-h);
    padding: 0 var(--space-1);
    font-size: 12px;
  }
  td .actions {
    max-width: none;
    flex-wrap: wrap;
    overflow: visible;
  }
  td .actions .btn,
  td .actions button,
  .actions .btn,
  .actions button,
  .actions a.btn {
    height: var(--btn-h);
    min-height: var(--btn-h);
    flex: 0 0 auto;
  }

  /* Primary action rows: max 2 buttons per row on mobile (e.g. SSL 2×2).
     Lone odd last button spans full width. */
  .sticky-actions,
  .form-stack > .actions,
  .settings-form > .actions,
  .settings-form .sticky-actions,
  .card > .actions,
  .settings-card > .actions,
  .edit-section > .actions,
  .ui-modal-panel > .actions,
  .ui-modal-panel .form-stack > .actions,
  .update-actions,
  .tg-preview-gate > .actions,
  .tg-preview-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1);
  }
  .sticky-actions > .btn,
  .sticky-actions > a.btn,
  .sticky-actions > button,
  .sticky-actions > form,
  .form-stack > .actions > .btn,
  .form-stack > .actions > a.btn,
  .form-stack > .actions > button,
  .form-stack > .actions > form,
  .settings-form > .actions > .btn,
  .settings-form > .actions > a.btn,
  .settings-form > .actions > button,
  .settings-form .sticky-actions > .btn,
  .settings-form .sticky-actions > a.btn,
  .settings-form .sticky-actions > button,
  .card > .actions > .btn,
  .card > .actions > a.btn,
  .settings-card > .actions > .btn,
  .edit-section > .actions > .btn,
  .ui-modal-panel .form-stack > .actions > .btn,
  .ui-modal-panel .form-stack > .actions > button,
  .ui-modal-panel .form-stack > .actions > a.btn,
  .update-actions > .btn,
  .update-actions > a.btn,
  .update-actions > button,
  .tg-preview-gate > .actions > .btn,
  .tg-preview-toolbar > .btn,
  .tg-preview-toolbar > .tg-preview-close-btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: center;
  }
  .sticky-actions > :last-child:nth-child(odd),
  .form-stack > .actions > :last-child:nth-child(odd),
  .settings-form > .actions > :last-child:nth-child(odd),
  .settings-form .sticky-actions > :last-child:nth-child(odd),
  .card > .actions > :last-child:nth-child(odd),
  .settings-card > .actions > :last-child:nth-child(odd),
  .edit-section > .actions > :last-child:nth-child(odd),
  .ui-modal-panel > .actions > :last-child:nth-child(odd),
  .ui-modal-panel .form-stack > .actions > :last-child:nth-child(odd),
  .update-actions > :last-child:nth-child(odd),
  .tg-preview-gate > .actions > :last-child:nth-child(odd),
  .tg-preview-toolbar > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .sticky-actions > form,
  .form-stack > .actions > form,
  .settings-form > .actions > form {
    display: flex;
    min-width: 0;
    max-width: 100%;
  }
  .sticky-actions > form > .btn,
  .form-stack > .actions > form > .btn,
  .settings-form > .actions > form > .btn {
    width: 100%;
    justify-content: center;
  }

  /* Search stays input + button on one row (previous size) */
  .search-bar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
  }
  .search-bar-field {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .search-bar .btn,
  .search-bar button {
    width: auto;
    flex: 0 0 auto;
    align-self: flex-end;
  }
  .user-edit-inline-row {
    flex-direction: column;
    align-items: stretch;
  }
  .user-edit-inline-row > .btn,
  .user-edit-inline-row > button,
  .user-edit-inline-row > a.btn {
    width: 100%;
    justify-content: center;
  }
  .user-edit-inline-row > .user-edit-grow,
  .user-edit-inline-row > .form-field {
    width: 100%;
    flex: 1 1 auto;
  }
  .ticket-status-form {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .ticket-status-form .form-field {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }
  .ticket-status-form > .btn,
  .ticket-status-form > button,
  .ticket-status-form select,
  .ticket-status-form .ui-select {
    width: 100%;
    max-width: 100%;
    display: block;
  }
  .ticket-status-form .ui-select-toggle {
    width: 100%;
  }
  .ticket-status-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ticket-close-form,
  .ticket-status-actions > .ticket-close-form {
    width: 100%;
    margin-inline-start: 0;
  }
  .ticket-close-form > .btn,
  .ticket-close-form > button {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 901px) {
  .mobile-only { display: none !important; }
  .side-backdrop,
  .side-backdrop.show { display: none !important; pointer-events: none !important; }
  /* Desktop only: .main / .side are the scrollers here (the root never scrolls),
     so freezing them while a modal is open is safe. On mobile the root IS the
     scroller and locking anything in that chain breaks Safari's toolbar. */
  body.modal-open .main,
  body.modal-open .side {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
  }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .quick-links { grid-template-columns: 1fr 1fr; }
}

/* —— Settings hub + Telegram live preview —— */
.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* stack-gap matches card→card rhythm; section-gap was stacking with card margin */
  gap: var(--stack-gap);
  align-items: start;
}
/* Two-column only while preview is open (lazy mount) */
.settings-layout.has-preview {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: var(--section-gap);
}
.settings-main { min-width: 0; }
.settings-tabs { margin-bottom: var(--page-title-gap); }

.tg-preview-slot { min-width: 0; }
.settings-layout > .tg-preview-slot > .card,
.settings-layout > .tg-preview-slot > .settings-card,
.settings-layout > .tg-preview-slot > .tg-preview-card {
  margin-bottom: 0;
}
.tg-preview-gate {
  margin-bottom: 0;
}
.tg-preview-gate .actions {
  margin-top: var(--space-1);
  justify-content: flex-start;
}
.tg-preview-toolbar {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-1);
  width: 100%;
}
.tg-preview-toolbar .btn,
.tg-preview-toolbar .tg-preview-close-btn {
  width: 100%;
  justify-content: center;
}
/* Sticky phone mock only when the live panel is open */
.settings-layout.has-preview .tg-preview-wrap {
  position: sticky;
  top: var(--space-1);
  align-self: start;
}
.tg-preview-wrap {
  position: relative;
  top: auto;
  align-self: start;
}
.tg-preview {
  --tg-bg: #0e1621;
  --tg-panel: #17212b;
  --tg-bubble: #182533;
  --tg-key: #2b5278;
  --tg-key-hover: #3a6a9a;
  --tg-text: #e4ecf2;
  --tg-muted: #7f91a4;
  direction: rtl;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(43, 82, 120, 0.35), transparent 55%),
    linear-gradient(165deg, #0b121a 0%, var(--tg-bg) 48%, #0a1018 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  color: var(--tg-text);
  font-family: var(--font);
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
.tg-top {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: rgba(23, 33, 43, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}
.tg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #5b9bd5, #2b5278);
  font-weight: 700;
  font-size: 14px;
  flex: 0 0 auto;
}
.tg-top strong { display: block; font-size: 13px; line-height: 1.25; }
.tg-top small { color: var(--tg-muted); font-size: 11px; }
.tg-chat {
  flex: 1 1 auto;
  padding: var(--space-2) var(--space-2) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 18px 18px;
  overflow: auto;
  min-height: 260px;
}
.tg-bubble {
  max-width: 92%;
  padding: var(--space-1) var(--space-2);
  border-radius: 18px 18px 6px 18px;
  background: var(--tg-bubble);
  border: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  animation: tg-in .28s ease both;
}
.tg-bubble.bot { align-self: flex-start; }
.tg-qr-card {
  align-self: flex-start;
  max-width: 220px;
  background: var(--tg-bubble);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  overflow: hidden;
  animation: tg-in .32s ease both;
}
.tg-qr-box {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(0deg, #111 0 8px, #1a1a1a 8px 16px),
    repeating-linear-gradient(90deg, #111 0 8px, #1a1a1a 8px 16px);
  color: #9ec5e8;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 18px;
  position: relative;
  overflow: hidden;
}
.tg-qr-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.tg-qr-box.has-bg {
  background: #0e1621;
}
.tg-qr-box.has-bg::after {
  inset: 22%;
  border-radius: 12px;
  z-index: 1;
  background:
    #fff
    linear-gradient(#111, #111) center/38% 3px no-repeat,
    linear-gradient(#111, #111) center/3px 38% no-repeat;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.tg-qr-fake {
  position: relative;
  z-index: 1;
}
.tg-qr-box::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 3px solid #d7e7f5;
  box-shadow: inset 0 0 0 8px #0e1621;
  background:
    linear-gradient(#d7e7f5, #d7e7f5) center/40% 3px no-repeat,
    linear-gradient(#d7e7f5, #d7e7f5) center/3px 40% no-repeat;
  z-index: 1;
}
.tg-qr-box.has-bg .tg-qr-fake { display: none; }
.tg-qr-cap {
  padding: var(--space-1);
  font-size: 11px;
  line-height: 1.5;
  color: var(--tg-text);
  white-space: pre-wrap;
  word-break: break-word;
}
.tg-keys,
.tg-reply-kb {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-1_5) var(--space-1);
  background: rgba(23, 33, 43, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
  animation: tg-in .34s ease both;
}
.tg-key-row {
  display: flex;
  gap: var(--space-1);
}
.tg-key-home .tg-key:not([data-tone]),
.tg-key-home .tg-key[data-tone=""] {
  background: linear-gradient(180deg, #3d6f9a, #2a4f72);
}
.tg-key {
  flex: 1 1 0;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #356891, var(--tg-key));
  color: #f2f7fb;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: var(--space-1) var(--space-0);
  min-height: 34px;
  cursor: default;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.tg-composer {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: rgba(23, 33, 43, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--tg-muted);
  font-size: 12px;
  flex: 0 0 auto;
}
.tg-composer-ph { flex: 1 1 auto; }
.tg-kb-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: default;
  padding: 0;
}
.tg-kb-grid {
  width: 16px;
  height: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--space-0);
}
.tg-kb-grid::before,
.tg-kb-grid::after {
  content: "";
  background: var(--tg-muted);
  border-radius: 1px;
  grid-column: 1;
}
.tg-kb-grid::before { grid-row: 1; box-shadow: 9px 0 0 var(--tg-muted); }
.tg-kb-grid::after { grid-row: 2; box-shadow: 9px 0 0 var(--tg-muted); }
.tg-preview-hint { margin: var(--space-1) var(--space-1) 0; font-size: 12px; }

/* —— Bot appearance / profile live preview —— */
.tg-preview-profile {
  min-height: 560px;
}
.tg-profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2) var(--space-2);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(91, 155, 213, 0.28), transparent 60%),
    rgba(23, 33, 43, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}
.tg-profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #5b9bd5, #2b5278);
  font-size: 34px;
  font-weight: 700;
  margin-bottom: var(--space-1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.tg-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tg-profile-hero strong {
  font-size: 17px;
  line-height: 1.25;
}
.tg-profile-hero small {
  color: var(--tg-muted);
  font-size: 12px;
}
.tg-profile-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  margin-top: var(--space-1);
  padding: 0 var(--space-1);
  border-radius: 999px;
  border: 1px solid rgba(142, 182, 216, 0.22);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  color: #8eb6d8;
  background: rgba(43, 82, 120, 0.35);
}
.tg-profile-about {
  padding: var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(23, 33, 43, 0.55);
}
.tg-profile-about-label {
  font-size: 11px;
  color: var(--tg-muted);
  margin-bottom: var(--space-1);
}
.tg-profile-about-text {
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--tg-text);
}
.tg-chat-empty {
  min-height: 160px;
  justify-content: center;
  align-items: center;
}
.tg-empty-center {
  text-align: center;
  max-width: 86%;
  animation: tg-in .3s ease both;
}
.tg-empty-center strong {
  display: block;
  font-size: 14px;
  margin-bottom: var(--space-1);
}
.tg-empty-center p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tg-muted);
  white-space: pre-wrap;
  word-break: break-word;
}
.ap-photo-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  flex-wrap: wrap;
}
.ap-photo-thumb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}

@keyframes tg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
  .settings-layout.has-preview {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-layout.has-preview .tg-preview-wrap {
    position: relative;
    top: 0;
  }
  .tg-preview-slot {
    order: -1;
  }
  .tg-preview { min-height: 360px; }
}

@media (max-width: 900px) {
  .tg-preview { min-height: 320px; border-radius: 18px; }
  .tg-preview-gate .actions,
  .tg-preview-toolbar {
    display: flex;
    width: 100%;
  }
  .tg-preview-gate .actions .btn,
  .tg-preview-toolbar .btn,
  .tg-preview-close-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Panel split: Home / Bot / PasarGuard (+ help button below) ── */
.nav-section-bot,
.nav-section-pg,
.nav-section-home {
  margin-top: var(--space-2);
  padding: var(--space-1);
  border-radius: var(--radius);
  gap: var(--space-0);
  background: transparent;
  /* Instant collapsed/open fill — transitioning background flashed the tinted
     collapsed color for --motion-fast on every accordion open/close. */
  transition: none;
}
.nav-section-home {
  margin-top: var(--space-1);
  border: 1px solid var(--border);
  background: transparent;
}
/* Closed: soft tinted fill. Open: border only (transparent fill). */
.nav-section-home.is-collapsed {
  background: color-mix(in srgb, var(--muted-fg) 8%, transparent);
}
.nav-section-home:not(.is-collapsed) {
  background: transparent;
}
.nav-section-home:first-child { margin-top: var(--space-1); }
.nav-label-home {
  color: var(--foreground);
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Accordion title: capsule only while pressing (and hover on desktop) — never sticky open/closed */
.nav-section-home > .nav-label-toggle:active {
  background: color-mix(in srgb, var(--muted-fg) 12%, var(--muted));
  border-color: var(--border);
  color: var(--foreground);
}
@media (hover: hover) and (pointer: fine) {
  .nav-section-home > .nav-label-toggle:hover {
    background: color-mix(in srgb, var(--muted-fg) 12%, var(--muted));
    border-color: var(--border);
    color: var(--foreground);
  }
}
.nav-item-home.active {
  background: var(--muted);
  border-color: transparent;
  color: var(--foreground);
}
.nav-item-home:hover {
  background: color-mix(in srgb, var(--muted-fg) 12%, var(--muted));
  border-color: var(--border);
  color: var(--foreground);
}
.nav-section-bot:first-child { margin-top: var(--space-1); }
.nav-section-bot {
  border: 1px solid color-mix(in srgb, var(--bot-line) 38%, var(--border));
  background: transparent;
}
.nav-section-bot.is-collapsed {
  background: color-mix(in srgb, var(--bot-line) 10%, transparent);
}
.nav-section-bot:not(.is-collapsed) {
  background: transparent;
}
.nav-section-pg {
  border: 1px solid color-mix(in srgb, var(--pg-line) 35%, var(--border));
  background: transparent;
}
.nav-section-pg.is-collapsed {
  background: color-mix(in srgb, var(--pg-line) 10%, transparent);
}
.nav-section-pg:not(.is-collapsed) {
  background: transparent;
}
.nav-label-bot {
  color: var(--bot-line);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nav-label-pg {
  color: var(--pg-line);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nav-section-bot .nav-ico { color: var(--bot-line); }
.nav-section-pg .nav-ico { color: var(--pg-line); }
/* Accordion title: capsule only while pressing (and hover on desktop) — never sticky open/closed */
.nav-section-bot > .nav-label-toggle:active {
  background: color-mix(in srgb, var(--bot-line) 12%, transparent);
  border-color: color-mix(in srgb, var(--bot-line) 40%, transparent);
  color: var(--bot-line);
}
.nav-section-pg > .nav-label-toggle:active {
  background: color-mix(in srgb, var(--pg-line) 12%, transparent);
  border-color: color-mix(in srgb, var(--pg-line) 40%, transparent);
  color: var(--pg-line);
}
@media (hover: hover) and (pointer: fine) {
  .nav-section-bot > .nav-label-toggle:hover {
    background: color-mix(in srgb, var(--bot-line) 12%, transparent);
    border-color: color-mix(in srgb, var(--bot-line) 40%, transparent);
    color: var(--bot-line);
  }
  .nav-section-pg > .nav-label-toggle:hover {
    background: color-mix(in srgb, var(--pg-line) 12%, transparent);
    border-color: color-mix(in srgb, var(--pg-line) 40%, transparent);
    color: var(--pg-line);
  }
}
.nav-item-bot.active,
.nav-item-bot.active:hover {
  background: var(--bot-fill);
  border-color: transparent;
  color: var(--foreground);
}
.nav-item-bot.active .nav-ico { color: var(--bot-line); }
.nav-item-bot:hover {
  background: color-mix(in srgb, var(--bot-line) 8%, transparent);
  border-color: color-mix(in srgb, var(--bot-line) 36%, transparent);
  color: var(--foreground);
}
.nav-item-pg.active,
.nav-item-pg.active:hover {
  background: var(--pg-fill);
  border-color: transparent;
  color: var(--foreground);
}
.nav-item-pg.active .nav-ico { color: var(--pg-line); }
.nav-item-pg:hover {
  background: color-mix(in srgb, var(--pg-line) 8%, transparent);
  border-color: color-mix(in srgb, var(--pg-line) 36%, transparent);
  color: var(--foreground);
}

/* Help — bottom sidebar chip, same language as «فعال» status tags */
.side-help-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  /* Equal air above/below — never margin-top:auto (collapses when nav grows).
     .side-nav already flex:1 so the chip stays above the footer. */
  margin-top: var(--space-1);
  margin-bottom: var(--space-1);
  min-height: 36px;
  padding: 0 var(--space-2);
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.22);
  background: rgba(34, 197, 94, 0.1);
  color: #86efac;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}
.side-help-btn .nav-ico {
  width: 16px;
  height: 16px;
  color: inherit;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.side-help-btn:hover {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.36);
  color: #86efac;
  opacity: 1;
  text-decoration: none;
}
.side-help-btn:focus-visible {
  outline: 2px solid rgba(34, 197, 94, 0.45);
  outline-offset: 2px;
}
.side-help-btn.is-active,
.side-help-btn.is-active:hover {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.4);
  color: #86efac;
}

/* ── Modals (ported to body; above sidebar/topbar/kebab) ── */
/* No scroll lock on html/body — see invariant A in the mobile block. The modal
   backdrop covers the viewport and owns touch containment, and panel.js blocks
   wheel/touch that lands outside the open modal. */
.ui-modal {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-3) + var(--safe-top)) calc(var(--space-3) + var(--safe-right)) calc(var(--space-3) + var(--safe-bottom)) calc(var(--space-3) + var(--safe-left));
  direction: rtl;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* contain — trap overscroll inside modal chrome; none killed edge bounce */
  overscroll-behavior: contain;
}
/* Confirm must paint above edit/user modals when both are open (stacked delete).
   Inline z-index from bringModalToFront raises further; this is the CSS floor. */
#modal-confirm,
.ui-modal.open.is-front {
  z-index: 4600;
}
.ui-modal.open.is-stack:not(.is-front) {
  z-index: 4000;
}
.ui-modal[hidden] { display: none !important; }
.ui-modal.open { display: flex; }
.ui-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  /* No backdrop-filter — blur during open/close was a major compositor hitch. */
  touch-action: none;
  opacity: 0;
  animation: ui-modal-backdrop-in var(--motion-med) var(--ease-out) forwards;
}
.ui-modal-panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(84vh, 900px);
  /* Own the rounded frame — overflow + radius on this box (see keyframes below). */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  animation: ui-modal-in var(--motion-med) var(--ease-out) both;
  /* Lock typography so body-port + mobile text inflation cannot enlarge copy */
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--foreground);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/*
  Corner sliver fix (brand/bot tint peeking at top corners):
  WebKit/Android fail to clip overflow+border-radius on a box that also runs a
  *transform* open animation. The previous workaround moved chrome onto
  .ui-modal-scroll and left the outer panel transparent — some devices still
  showed a warm square sliver. Open/close motion is opacity-only now, so the
  outer panel can keep opaque chrome + overflow:hidden + radius reliably.
  .ui-modal-scroll only owns scrolling (and equal vertical padding/gap).
*/
.ui-modal-panel[data-scroll-shell="1"] {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg-card);
  isolation: isolate;
}
.ui-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  /* Stretch to panel edges so the scrollbar sits on the chrome edge,
     still clipped by the panel's border-radius (fixes Android square overflow). */
  margin: calc(-1 * var(--space-3));
  padding: var(--space-3);
  box-sizing: border-box;
}
.ui-modal-panel[data-scroll-shell="1"] > .ui-modal-scroll {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  /* Parent panel clips the curve; this box only scrolls. */
  overflow-x: hidden;
  overflow-y: auto;
  /* Equal air above the title and below the last block */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  box-sizing: border-box;
}
.ui-modal-panel-lg { width: min(720px, 100%); }
.ui-modal-panel-xl {
  width: min(720px, 100%);
  overflow: hidden;
}
.ui-modal-panel-xl[data-scroll-shell="1"] {
  overflow: hidden;
}
.edit-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.edit-section {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  min-width: 0;
}
.edit-section:first-child,
.edit-section.edit-section--identity {
  border-top: 0;
  padding-top: 0;
}
.edit-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  margin-bottom: var(--space-2);
}
.edit-section-head h3,
.edit-section h3,
.edit-section h4,
.edit-section-sub {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}
.edit-section-sub {
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}
.wallet-tx-block {
  display: flex;
  flex-direction: column;
  /* Match .edit-section-head → content (space-2), not a looser space-3 */
  gap: var(--space-2);
  margin-top: var(--space-3);
  min-width: 0;
}
.wallet-tx-block:first-child {
  margin-top: 0;
}
.wallet-tx-block .edit-section-sub,
.wallet-tx-block .edit-section-head {
  margin: 0;
}
.wallet-tx-block .edit-section-head {
  margin-bottom: 0;
}
.wallet-tx-block .edit-section-head .edit-section-sub {
  margin: 0;
}
.wallet-tx-caption,
.wallet-tx-block > .muted {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}
/* Loose sibling caption (legacy): pull toward title like card h2 + caption */
.wallet-tx-block > .edit-section-sub + .wallet-tx-caption,
.wallet-tx-block > .edit-section-sub + .muted {
  margin-top: calc(-1 * var(--space-1));
}
.edit-section-head .muted,
.edit-section-head p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}
.user-edit-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.user-edit-name {
  margin: 0 0 var(--space-0);
  font-size: 1.05rem;
}
.user-edit-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-0) var(--space-1);
  margin: 0;
  font-size: 12px;
}
.user-edit-wallet-pill {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-0);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated, var(--control-bg));
  min-width: 7.5rem;
  text-align: right;
  box-sizing: border-box;
}
.user-edit-wallet-pill span,
.user-edit-wallet-pill strong {
  display: block;
  width: 100%;
  text-align: right;
}
.user-edit-wallet-pill span {
  font-size: 11px;
}
.user-edit-wallet-pill strong {
  font-size: 0.95rem;
}
/* Numeric pills: isolate digits; Persian unit stays on the visual left via RTL */
.user-edit-wallet-pill[dir="ltr"] strong,
.user-edit-wallet-pill .num-ratio {
  direction: rtl;
  unicode-bidi: isolate;
  text-align: right;
  line-height: 1.35;
}
.user-edit-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  min-width: 0;
}
.user-edit-fields--2 {
  grid-template-columns: 1fr 1fr;
}
.user-edit-inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
}
.user-edit-grow {
  flex: 1 1 10rem;
  min-width: 0;
}
.user-edit-actions {
  margin-top: 0;
}
.user-edit-empty {
  margin: 0;
}
/* Services — wallet-pill stats + form rhythm matching other edit sections */
.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
}
.svc-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.svc-item:last-child { border-bottom: 0; }
.svc-item-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.svc-item-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.svc-item-title strong {
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.svc-item-id {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}
.svc-item-err {
  margin: 0;
  font-size: 12px;
}
.svc-stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  min-width: 0;
}
.svc-stat-pill {
  align-items: stretch;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: right;
}
.svc-stat-pill strong {
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: right;
}
.svc-item-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.svc-item-ops {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  min-width: 0;
}
.svc-item-ops .form-stack {
  gap: var(--space-2);
  margin: 0;
}
.svc-item-ops .user-edit-actions {
  margin-top: 0;
}
/* Byte / ratio amounts (حجم، رم، …):
   Logical string stays «1.12 / 10 گیگ» (unit once, after numbers).
   Presentation is RTL so the Persian unit sits on the visual LEFT of the
   LTR number run — never force dir=ltr on the whole cell (that put گیگ on
   the right and, with display:inline-block on <td>, broke row separators). */
.num-ratio,
.byte-size {
  direction: rtl;
  unicode-bidi: isolate;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
span.num-ratio,
span.byte-size,
b.num-ratio,
strong.num-ratio,
small.num-ratio {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  line-height: 1.35;
  white-space: nowrap;
}
/* Table cells must remain table-cell — inline-block on <td> clips through borders */
td.num-ratio,
td.byte-size {
  display: table-cell;
  vertical-align: middle;
  direction: rtl;
  text-align: right;
  line-height: 1.35;
}
.byte-stack {
  display: flex;
  flex-direction: column;
  /* RTL: flex-start = inline-start = visual right */
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-0);
  min-width: 0;
  width: 100%;
  line-height: 1.35;
}
.byte-stack > .byte-size,
.byte-stack > .num-ratio,
.byte-stack > .reseller-quota-line,
.byte-stack > .reseller-quota-life {
  display: block;
  max-width: 100%;
  line-height: 1.35;
  white-space: nowrap;
}
.payg-meta {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: right;
}
.payg-meta li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-0) var(--space-1_5);
  text-align: right;
}
.payg-meta-label {
  font-size: 12px;
  color: var(--muted-fg);
}
.payg-meta-value {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}
.payg-help {
  margin: 0 0 var(--space-2);
  font-size: 12px;
  line-height: 1.45;
}
.payg-lifetime-note,
.reseller-pg-admin-line {
  margin: var(--space-2) 0 0;
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}
.wallet-tx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Reseller list: keep volume/users on one line — no mid-unit wrapping */
.reseller-quota-th {
  min-width: 6.5rem;
}
.reseller-quota-cell {
  min-width: 6.5rem;
  vertical-align: middle;
  text-align: right;
  direction: rtl;
  line-height: 1.35;
}
/* Volume stack — RTL so «گیگ» sits left of LTR numbers; right-aligned column */
.reseller-quota {
  display: flex;
  flex-direction: column;
  /* RTL: flex-start = visual right (was flex-end → stuck left) */
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-0);
  min-width: 6.5rem;
  width: 100%;
  text-align: right;
  direction: rtl;
  line-height: 1.35;
}
.reseller-quota-line {
  display: block;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  text-align: right;
  direction: rtl;
  unicode-bidi: isolate;
}
.reseller-quota-life {
  display: block;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.3;
  text-align: right;
  direction: rtl;
  unicode-bidi: isolate;
}
.wallet-tx-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-1_5);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.wallet-tx-item:last-child {
  border-bottom: 0;
}
.wallet-tx-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  min-width: 0;
}
.wallet-tx-amount {
  font-weight: 700;
  font-size: 0.95rem;
}
.wallet-tx-amount.is-credit { color: #16a34a; }
.wallet-tx-amount.is-debit { color: #dc2626; }
.wallet-tx-reason {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.wallet-tx-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-0);
  flex: 0 0 auto;
  font-size: 12px;
  text-align: end;
}
@media (min-width: 560px) {
  .user-edit-fields:not(.user-edit-fields--2) {
    grid-template-columns: 1fr 1fr;
  }
}
/* legacy helpers kept for reseller edit body if reused */
.svc-ops {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-end;
}
.svc-ops .svc-renew {
  flex: 1 1 16rem;
  min-width: 0;
}
.svc-ops .svc-extend {
  flex: 1 1 12rem;
  min-width: 0;
}
.table-wrap-visible {
  overflow: visible;
}
.ui-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  /* Gap to body comes from .ui-modal-scroll flex gap — keep outer pad symmetric */
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}
/* Fallback before panel.js wraps .ui-modal-scroll */
.ui-modal-panel:not([data-scroll-shell="1"]) > .ui-modal-head {
  margin-bottom: var(--space-3);
}
.ui-modal-head > .icon-btn,
.ui-modal-head > a.icon-btn {
  /* Optical align with the icon-box (not the caption line) */
  margin-top: 6px;
  flex: 0 0 auto;
}
.modal-title {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1_5);
  min-width: 0;
  flex: 1 1 auto;
}
.modal-title .page-title-ico {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 16px;
}
.modal-title .page-title-ico svg {
  width: 20px;
  height: 20px;
}
.modal-title-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  min-width: 0;
  flex: 1 1 auto;
}
.modal-title-caption {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted-fg);
}
/* Modal chrome title matches page titles (not the tiny section --title-size) */
.ui-modal-head h1,
.ui-modal-head h2,
.ui-modal-head h3,
.modal-title h1,
.modal-title h2,
.modal-title h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--foreground);
}
.ui-modal-panel > h1,
.ui-modal-panel > h2,
.ui-modal-panel > h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--foreground);
}
.ui-modal-panel p,
.ui-modal-panel .muted {
  font-size: 13px;
  line-height: 1.5;
}
.ui-modal-panel small,
.ui-modal-panel small.muted,
.ui-modal-panel .muted small {
  font-size: 12px;
  line-height: 1.5;
}
.ui-modal-panel label,
.ui-modal-panel .form-field {
  font-size: 13px;
}
.ui-modal-panel .btn,
.ui-modal-panel a.btn,
.ui-modal-panel .btn-sm,
.ui-modal-panel a.btn-sm {
  font-size: 13px;
}
.ui-modal-panel .ui-switch-copy strong,
.ui-modal-panel .ui-switch-section-title,
.ui-modal-panel strong {
  font-size: 13px;
}
.ui-modal-panel .ui-switch-copy small,
.ui-modal-panel .ui-switch-section-hint {
  font-size: 12px;
}
.ui-modal-head .icon-btn {
  flex: 0 0 auto;
  font-size: 0; /* avoid oversized × glyph from system fonts */
  line-height: 0;
}
.ui-modal-head .icon-btn .ico {
  width: 16px;
  height: 16px;
}
@keyframes ui-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ui-modal-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
/* Opacity-only — transform on this box broke border-radius clipping (corner sliver). */
@keyframes ui-modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ui-modal-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
.ui-modal.open.is-closing {
  pointer-events: none;
}
.ui-modal.open.is-closing .ui-modal-backdrop {
  animation: ui-modal-backdrop-out var(--motion-fast) var(--ease-in) forwards;
}
.ui-modal.open.is-closing .ui-modal-panel {
  animation: ui-modal-out var(--motion-fast) var(--ease-in) forwards;
}
@media (max-width: 640px) {
  .ui-modal {
    padding: calc(var(--space-2) + var(--safe-top)) calc(var(--space-2) + var(--safe-right)) calc(var(--space-2) + var(--safe-bottom)) calc(var(--space-2) + var(--safe-left));
    align-items: center;
  }
  .ui-modal-panel {
    width: 100%;
    max-height: 86vh;
    border-radius: var(--radius);
    font-size: 14px;
  }
}

/* —— Modal layout polish (desktop / tablet only; mobile keeps stacked flow) —— */
@media (min-width: 641px) {
  /* Never leave a 3-track auto-fit row inside modals — always 2 cols max */
  .ui-modal-panel .form-row,
  .ui-modal-panel .pay-dest-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .ui-modal-panel .ui-switch-grid,
  .ui-modal-panel .checks.ui-switch-grid,
  .ui-modal-panel .checks:has(.ui-switch-chip) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .ui-modal-panel .btn-color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .ui-modal-panel .settings-grid {
    width: 100%;
  }
  /* Trailing lone cell in a 2-col settings grid should span full width */
  .ui-modal-panel .settings-grid > .setting-item:last-child:nth-child(odd):not(.full) {
    grid-column: 1 / -1;
  }
}

/* Block fields + color pickers stretch the modal chrome (no 320px orphan chips) */
.ui-modal-panel .form-field,
.ui-modal-panel .form-row,
.ui-modal-panel .form-stack,
.ui-modal-panel .ui-switch-grid,
.ui-modal-panel .plan-color-field,
.ui-modal-panel .btn-color-grid,
.ui-modal-panel .settings-grid,
.ui-modal-panel .pay-dest-list,
.ui-modal-panel .pay-dest-row,
.ui-modal-panel .pay-dest-fields,
.ui-modal-panel .pay-dest-color,
.ui-modal-panel .support-fields,
.ui-modal-panel .supports-fields-grid,
.ui-modal-panel .item-color-field {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.ui-modal-panel .btn-color-card,
.ui-modal-panel .btn-color-card.plan-color-card,
.ui-modal-panel .pay-dest-color .plan-color-card,
.ui-modal-panel .item-color-field .plan-color-card,
.ui-modal-panel .support-fields .item-color-field .plan-color-card,
.ui-modal-panel .supports-fields-grid .item-color-field .plan-color-card {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.ui-modal-panel .setting-item {
  min-width: 0;
  width: 100%;
}
.ui-modal-panel .setting-item > label,
.ui-modal-panel .setting-item > .plan-color-field,
.ui-modal-panel .setting-item > .pay-dest-list,
.ui-modal-panel .setting-item > .image-setting,
.ui-modal-panel .setting-item > .force-channels {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.ui-modal-panel .setting-item.full {
  grid-column: 1 / -1;
}

/* —— Reseller PG meters —— */
.stat small { display: block; margin-top: var(--space-1); font-size: 11px; line-height: 1.25; }
.meter {
  margin-top: var(--space-1);
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.meter > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f59e0b, #ea580c);
}

/* —— Compact tables + mobile kebab / desktop «عملیات» actions —— */
.table-compact { min-width: 0; }
.table-compact th,
.table-compact td {
  padding: var(--space-2);
}
/* Stable actions column — opening kebab must never stretch the row */
.table-compact tbody td {
  vertical-align: middle;
  box-sizing: border-box;
}
.table-compact tbody td.reseller-quota-cell {
  /* Keep multi-line volume (traffic + Σ) inside the row — never clip separators */
  overflow: visible;
  padding-block: var(--space-2);
}
.table-compact tbody td.col-actions {
  height: 48px;
  min-height: 48px;
  max-height: 48px;
}
.cell-tight { white-space: nowrap; }
/* Compact ID / status / amount — leave room for names & long text */
th.col-id,
td.col-id {
  width: 1%;
  max-width: 4.5rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
th.col-status,
td.col-status,
th.col-amount,
td.col-amount,
th.col-time,
td.col-time,
th.col-type,
td.col-type {
  width: 1%;
  white-space: nowrap;
}
th.col-name,
td.col-name,
th.col-user,
td.col-user,
th.col-text,
td.col-text,
th.col-subject,
td.col-subject,
th.col-address,
td.col-address {
  width: auto;
  min-width: 7rem;
  max-width: 22rem;
}
.col-actions { width: 1%; white-space: nowrap; text-align: end; vertical-align: middle; }
.row-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  max-width: 100%;
  z-index: 0;
  height: var(--btn-h);
  min-height: var(--btn-h);
  max-height: var(--btn-h);
  overflow: visible;
}
.row-actions-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--control-radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--foreground);
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.row-actions-toggle--label {
  width: auto;
  min-width: 0;
  padding: 0 var(--space-2);
  height: var(--btn-h);
  min-height: var(--btn-h);
}
.row-actions-toggle--label .ico-caret {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}
.row-actions-toggle .ico { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.row-actions-menu {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-1);
  justify-content: flex-end;
  max-width: 100%;
  position: relative;
  z-index: 0;
}
.row-actions-menu > * {
  position: relative;
  flex: 0 0 auto;
  z-index: 0;
}
.row-actions-menu form { margin: 0; }
/* Inline desktop actions stay one row tall — never wrap into tall cells */
.row-actions-menu .btn,
.row-actions-menu button,
.row-actions-menu a.btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.row-actions-menu .btn-sm,
.row-actions-menu a.btn.btn-sm,
.row-actions-menu button.btn-sm {
  height: 32px;
  min-height: 32px;
  padding: 0 var(--space-2);
  font-size: 12px;
}
/* Operations menu: neutral actions; keep warn/danger colored */
.row-actions-menu .btn:not(.btn-danger):not(.btn-warn),
.row-actions-menu a.btn:not(.btn-danger):not(.btn-warn),
.row-actions-menu button.btn:not(.btn-danger):not(.btn-warn) {
  color: var(--foreground) !important;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 500;
}
.row-actions-menu .btn:not(.btn-danger):not(.btn-warn):hover,
.row-actions-menu a.btn:not(.btn-danger):not(.btn-warn):hover,
.row-actions-menu button.btn:not(.btn-danger):not(.btn-warn):hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--foreground) !important;
  opacity: 1;
}
.row-actions-menu .ui-select,
.row-actions-stack .ui-select {
  width: auto;
  min-width: 110px;
  max-width: 160px;
  margin-top: 0;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
}
.row-actions-menu .ui-select-toggle {
  height: 32px;
  min-height: 32px;
  font-size: 13px !important;
}
/* Nested open select must paint above sibling kebab actions */
.row-actions-menu .ui-select.open,
.row-actions-menu .row-actions-stack:has(.ui-select.open),
.row-actions-menu > *:has(.ui-select.open) {
  z-index: 5;
}

/* Default: kebab-stable (no FOUC). Inline only when JS adds .allow-inline-actions */
.row-actions-toggle--icon { display: inline-flex; }
.row-actions-toggle--label { display: none; }
.row-actions-menu:not(.is-ported) {
  display: none !important;
  position: static !important;
  inset: auto !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* Kebab: mobile/small-tablet media + overflow-driven .force-kebab */
@media (max-width: 1100px) {
  .col-hide-sm { display: none !important; }
  table,
  .table-compact { min-width: 0 !important; }
  th, td { padding: var(--space-2); font-size: 13px; }
  th { font-size: var(--title-size); }
  .reseller-quota-th,
  .reseller-quota-cell,
  .reseller-quota {
    min-width: 7.5rem;
  }
  .reseller-quota-line {
    font-size: 12px;
  }
  .grid { gap: var(--space-2); }
  .stat { min-height: 64px; padding: var(--space-2); }
  .card { padding: var(--card-pad); }
  .card.card-flush > h2 { padding: var(--space-2) var(--space-2) var(--space-1); }
  .card.card-flush > .table-wrap table th:first-child,
  .card.card-flush > .table-wrap table td:first-child { padding-inline-start: var(--space-1); }
  .card.card-flush > .table-wrap table th:last-child,
  .card.card-flush > .table-wrap table td:last-child { padding-inline-end: var(--space-1); }
  .table-wrap {
    margin-inline: 0;
    width: 100%;
  }
  .table-wrap.is-scrollable::after { display: none; }

  .row-actions-toggle--icon { display: inline-flex; }
  .row-actions-toggle--label { display: none !important; }
  /* In-cell menu must be fully inert — NO bg/border/padding/fixed box.
     Any chrome here paints a ghost square over adjacent cells (volume, …).
     Only body-ported .is-ported receives visual styles. */
  .row-actions-menu:not(.is-ported) {
    display: none !important;
    position: static !important;
    inset: auto !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }
  td .actions {
    max-width: none;
    overflow: visible;
  }
}

/* Any viewport: collapse row actions when the table would scroll horizontally */
.table-wrap.force-kebab .row-actions-toggle--icon { display: none; }
.table-wrap.force-kebab .row-actions-toggle--label { display: inline-flex; }
.table-wrap.force-kebab .row-actions-menu:not(.is-ported) {
  /* Same as mobile: inert in-cell — chrome only on body overlay */
  display: none !important;
  position: static !important;
  inset: auto !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
.table-wrap.force-kebab td .actions {
  max-width: none;
  overflow: visible;
}
.table-wrap.force-kebab.is-scrollable::after { display: none; }

/* Desktop wide + single short action: restore inline buttons (no kebab) */
@media (min-width: 1101px) {
  .table-wrap.allow-inline-actions:not(.force-kebab) .row-actions-toggle {
    display: none !important;
  }
  .table-wrap.allow-inline-actions:not(.force-kebab) .row-actions-menu:not(.is-ported) {
    display: inline-flex !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }
}

/* On narrow viewports prefer icon kebab even when force-kebab is on */
@media (max-width: 1100px) {
  .table-wrap.force-kebab .row-actions-toggle--icon { display: inline-flex; }
  .table-wrap.force-kebab .row-actions-toggle--label { display: none !important; }
  .table-wrap.allow-inline-actions .row-actions-toggle--icon { display: inline-flex !important; }
  .table-wrap.allow-inline-actions .row-actions-toggle--label { display: none !important; }
  .table-wrap.allow-inline-actions .row-actions-menu:not(.is-ported) {
    display: none !important;
  }
}

/* Body-ported kebab: keep full single-column layout (ancestor .force-kebab is lost) */
.row-actions-menu.is-ported {
  display: flex !important;
  position: fixed !important;
  /* Floor above .ui-modal (4000); JS raises further when a modal is open. */
  z-index: 5000;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: var(--space-1);
  padding: var(--space-1);
  min-width: 168px;
  max-width: min(260px, calc(100vw - 16px));
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: var(--menu-radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated, var(--bg-card));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}
.row-actions-menu.is-ported .row-actions-stack {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  align-items: stretch !important;
  gap: var(--space-1);
}
.row-actions-menu.is-ported .btn,
.row-actions-menu.is-ported button,
.row-actions-menu.is-ported select,
.row-actions-menu.is-ported a.btn,
.row-actions-menu.is-ported form {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  justify-content: center;
}

@media (max-width: 560px) {
}
@media (max-width: 420px) {
}


.role-tag { font-size: 11px; }
.role-tag-admin {
  background: rgba(249, 115, 22, 0.1);
  color: #fdba74;
  border-color: rgba(249, 115, 22, 0.22);
}
.role-tag-reseller {
  background: rgba(59, 130, 246, 0.1);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.22);
}
.role-tag-pg {
  background: rgba(34, 197, 94, 0.1);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.22);
}
.role-tag-owner {
  background: rgba(249, 115, 22, 0.1);
  color: #fdba74;
  border-color: rgba(249, 115, 22, 0.22);
}
.role-tag-principal {
  background: rgba(168, 85, 247, 0.1);
  color: #d8b4fe;
  border-color: rgba(168, 85, 247, 0.22);
}

.web-access-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-start;
}
.web-access-cell .row-actions {
  flex-wrap: wrap;
  gap: var(--space-1);
}

.pg-admin-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
}
.pg-admin-name {
  font-size: 1.15rem;
  font-weight: 700;
}
.row-actions-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}
.row-actions-menu .row-actions-stack .btn { width: 100%; }
/* Desktop inline actions only — never when the kebab popover is open/ported */
@media (min-width: 1101px) {
  .row-actions-menu:not(.is-ported) .row-actions-stack {
    flex-direction: row;
    align-items: center;
    width: auto;
  }
}
.table-wrap.force-kebab .row-actions-stack,
.row-actions-menu.is-ported .row-actions-stack {
  flex-direction: column !important;
  width: 100% !important;
  align-items: stretch;
}

/* —— Theme switcher (sidebar top) —— */
.side-theme {
  position: relative;
  /* Air below theme control → separator = same as theme control → brand line above
     (brand margin-bottom + .side gap ≈ --space-2) */
  padding: 0 0 var(--space-2);
  /* + .side gap (--space-1) ⇒ --space-2 between separator and first nav box */
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
}
/* Cancel stacked margin under theme line (gap from .side already = padding-bottom) */
.side-nav > .nav-section:first-child,
.side-nav > .nav-section-home:first-child,
.side-nav > .nav-section-bot:first-child,
.side-nav > .nav-section-pg:first-child {
  margin-top: 0;
}
.side-theme-btn {
  position: relative;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1);
  min-height: 36px;
  padding: 0 var(--space-1);
  border-radius: var(--control-radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--foreground);
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.side-theme-btn:hover {
  background: var(--bg-hover);
}
.side-theme.open .side-theme-btn {
  background: var(--muted);
  border-color: transparent;
}
.side-theme-main {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1);
  min-width: 0;
}
.side-theme-ico,
.side-theme-caret,
.side-theme-menu svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.side-theme-text {
  line-height: 1;
  white-space: nowrap;
}
.side-theme-caret {
  /* Opposite the label (inline-end / physical left in RTL) — not over the text */
  margin-inline-start: auto;
  width: 13px;
  height: 13px;
  opacity: 0.65;
  flex-shrink: 0;
}
.side-theme.open .side-theme-caret {
  opacity: 1;
}
.side-theme-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% - var(--space-0));
  /* Same width as theme button / sidebar nav boxes */
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-1);
  border-radius: var(--menu-radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}
.side-theme-menu[hidden] { display: none !important; }
.side-theme-menu button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  min-height: 34px;
  padding: 0 var(--space-1);
  border: 0;
  border-radius: var(--menu-item-radius);
  background: transparent;
  color: var(--muted-fg);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.side-theme-menu button:hover {
  background: var(--bg-hover);
  color: var(--foreground);
}
.side-theme-menu button.active {
  background: var(--muted);
  color: var(--foreground);
  font-weight: 600;
}

/* —— Light theme —— */
html[data-theme="light"] {
  color-scheme: light;
  --background: #fafafa;
  --foreground: #18181b;
  --card: #ffffff;
  --card-fg: #18181b;
  --control-bg: #ffffff;
  --control-bg-hover: #f4f4f5;
  --muted: #f4f4f5;
  --muted-fg: #71717a;
  /* Lighter than body muted so examples stay visibly soft on white controls */
  --placeholder: #a1a1aa;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: #a1a1aa;
  --primary: #2563eb;
  --primary-fg: #1d4ed8;
  --secondary: #f4f4f5;
  --secondary-fg: #18181b;
  --destructive: #dc2626;
  --destructive-fg: #b91c1c;
  --ok: #16a34a;
  --ok-fg: #15803d;
  --warn: #ca8a04;
  --warn-fg: #a16207;
  --caution: #ea580c;
  --caution-fg: #c2410c;
  --info: #2563eb;
  --info-fg: #1d4ed8;
  --brand: #ea580c;
  --brand-fg: #c2410c;
  --bot-line: #ea580c;
  --pg-line: #2563eb;
  --bot-fill: color-mix(in srgb, var(--bot-line) 8%, transparent);
  --pg-fill: color-mix(in srgb, var(--pg-line) 8%, transparent);
  --bg: var(--background);
  --bg-card: #ffffff;
  --bg-muted: var(--muted);
  --bg-hover: #f4f4f5;
  --text: var(--foreground);
  --accent: var(--brand);
  --accent-fg: var(--brand-fg);
  --accent-soft: rgba(234, 88, 12, 0.10);
  --danger: var(--destructive);
  --side-dim: rgba(0, 0, 0, 0.32);
  --table-head-bg: color-mix(in srgb, var(--muted) 72%, var(--bg-card));
}
html[data-theme="light"] * { scrollbar-color: #d4d4d8 transparent; }
html[data-theme="light"] *::-webkit-scrollbar-thumb { background: #d4d4d8; }

html[data-theme="light"] .topbar {
  background: #ffffff;
}
/* Do NOT set background on .side here. Desktop already paints via
   `.side { background: var(--bg-card) }` (--bg-card is #fff in light).
   An unscoped `html[data-theme=light] .side { background:#fff }` has higher
   specificity than the mobile `.side { background:transparent }` shell and
   the same specificity as the mobile light override — coming later in the
   file it wins and leaves a drawer-width white slab over the page while the
   menu is closed (v8.8.1–v8.8.2). Paint for the open drawer stays on
   `.side-panel` (var(--bg-card)). */

html[data-theme="light"] .stat,
html[data-theme="light"] .card,
html[data-theme="light"] .ui-switch-row,
html[data-theme="light"] .toggle-row,
html[data-theme="light"] .notify-row,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] .update-meta {
  background: var(--bg-card);
  border-color: var(--border);
}
html[data-theme="light"] .ui-switch-chip {
  background: var(--bg-card);
  border-color: var(--border);
}
html[data-theme="light"] .ui-switch-row:hover,
html[data-theme="light"] .toggle-row:hover,
html[data-theme="light"] .notify-row:hover,
html[data-theme="light"] .ui-switch-row:focus-within,
html[data-theme="light"] .toggle-row:focus-within,
html[data-theme="light"] .notify-row:focus-within,
html[data-theme="light"] .ui-switch-chip:hover,
html[data-theme="light"] .ui-switch-chip:focus-within {
  background: var(--bg-hover);
  border-color: var(--border);
}
html[data-theme="light"] .ui-switch-row:active,
html[data-theme="light"] .toggle-row:active,
html[data-theme="light"] .notify-row:active,
html[data-theme="light"] .ui-switch-chip:active {
  background: var(--muted);
  border-color: var(--border);
}
/* Overlay kebab only — never paint a card box behind inline desktop actions */
html[data-theme="light"] .row-actions-menu.is-ported {
  background: var(--bg-card);
  border-color: var(--border);
}
html[data-theme="light"] .update-meta-box.update-meta-ok {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(22, 163, 74, 0.35);
  color: #15803d;
}
html[data-theme="light"] .update-meta-box.update-meta-ok .muted,
html[data-theme="light"] .update-meta-box.update-meta-ok strong { color: #15803d; }
html[data-theme="light"] .update-meta-box.update-meta-err {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(220, 38, 38, 0.35);
  color: #b91c1c;
}
html[data-theme="light"] .update-meta-box.update-meta-err .muted,
html[data-theme="light"] .update-meta-box.update-meta-err strong { color: #b91c1c; }
html[data-theme="light"] .nav-item:hover { background: var(--bg-hover); }
html[data-theme="light"] .nav-item.active {
  background: var(--muted);
  color: var(--foreground);
}
/* Web-panel box stays colorless (border only) — never share backdrop fill */
html[data-theme="light"] .nav-section-home {
  border-color: var(--border);
}
html[data-theme="light"] .nav-section-home.is-collapsed {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}
html[data-theme="light"] .nav-section-home:not(.is-collapsed) {
  background: transparent;
}
html[data-theme="light"] .ui-modal-backdrop {
  background: rgba(0, 0, 0, 0.28);
}
html[data-theme="light"] .ui-modal-panel {
  background: var(--bg-card);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
}
html[data-theme="light"] .ui-modal-panel[data-scroll-shell="1"] {
  background: var(--bg-card);
}
html[data-theme="light"] .ui-modal-panel[data-scroll-shell="1"] > .ui-modal-scroll {
  background: transparent;
}
html[data-theme="light"] .nav-label-home { color: var(--foreground); }
/* Neutral select/hover for the border-only home box (no brand tint) */
html[data-theme="light"] .nav-item-home.active,
html[data-theme="light"] .nav-item-home.active:hover {
  background: color-mix(in srgb, var(--foreground) 7%, transparent);
  border-color: transparent;
  color: var(--foreground);
}
html[data-theme="light"] .nav-item-home:hover {
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  border-color: var(--border);
  color: var(--foreground);
}
html[data-theme="light"] .nav-section-bot {
  border-color: color-mix(in srgb, var(--bot-line) 28%, var(--border));
}
html[data-theme="light"] .nav-section-bot.is-collapsed {
  background: color-mix(in srgb, var(--bot-line) 8%, transparent);
}
html[data-theme="light"] .nav-section-bot:not(.is-collapsed) {
  background: transparent;
}
html[data-theme="light"] .nav-section-pg {
  border-color: color-mix(in srgb, var(--pg-line) 28%, var(--border));
}
html[data-theme="light"] .nav-section-pg.is-collapsed {
  background: color-mix(in srgb, var(--pg-line) 8%, transparent);
}
html[data-theme="light"] .nav-section-pg:not(.is-collapsed) {
  background: transparent;
}
html[data-theme="light"] .nav-label-bot,
html[data-theme="light"] .nav-section-bot .nav-ico { color: var(--bot-line); }
html[data-theme="light"] .nav-label-pg,
html[data-theme="light"] .nav-section-pg .nav-ico { color: var(--pg-line); }
html[data-theme="light"] .side-help-btn {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.22);
}
html[data-theme="light"] .side-help-btn:hover,
html[data-theme="light"] .side-help-btn.is-active,
html[data-theme="light"] .side-help-btn.is-active:hover {
  background: rgba(22, 163, 74, 0.16);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.36);
}
html[data-theme="light"] .nav-item-bot.active,
html[data-theme="light"] .nav-item-bot.active:hover {
  background: var(--bot-fill);
  border-color: transparent;
  color: var(--foreground);
}
html[data-theme="light"] .nav-item-bot:hover {
  background: color-mix(in srgb, var(--bot-line) 6%, transparent);
  border-color: color-mix(in srgb, var(--bot-line) 28%, transparent);
  color: var(--foreground);
}
html[data-theme="light"] .nav-item-pg.active,
html[data-theme="light"] .nav-item-pg.active:hover {
  background: var(--pg-fill);
  border-color: transparent;
  color: var(--foreground);
}
html[data-theme="light"] .nav-item-pg:hover {
  background: color-mix(in srgb, var(--pg-line) 6%, transparent);
  border-color: color-mix(in srgb, var(--pg-line) 28%, transparent);
  color: var(--foreground);
}

/* Primary/action buttons: same blue-tint language as dark */
html[data-theme="light"] .btn,
html[data-theme="light"] a.btn,
html[data-theme="light"] .btn-sm,
html[data-theme="light"] a.btn-sm {
  color: #1d4ed8 !important;
  border-color: rgba(37, 99, 235, 0.38);
  background: rgba(37, 99, 235, 0.10);
}
html[data-theme="light"] .btn:hover,
html[data-theme="light"] a.btn:hover {
  background: rgba(37, 99, 235, 0.16);
}
/* Ghost: subtle dark-on-light (not white) */
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] a.btn.btn-ghost {
  color: var(--foreground) !important;
  border-color: var(--border);
  background: rgba(24, 24, 27, 0.03);
}
html[data-theme="light"] .btn-ghost:hover,
html[data-theme="light"] a.btn.btn-ghost:hover {
  background: rgba(24, 24, 27, 0.06);
  color: var(--foreground) !important;
}
html[data-theme="light"] .btn-danger {
  color: #b91c1c !important;
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.08);
}
html[data-theme="light"] .btn-danger:hover { background: rgba(220, 38, 38, 0.14); }
html[data-theme="light"] .btn-ok {
  color: #15803d !important;
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.08);
}
html[data-theme="light"] .btn-ok:hover { background: rgba(22, 163, 74, 0.14); }
html[data-theme="light"] .btn-warn {
  color: #a16207 !important;
  border-color: rgba(202, 138, 4, 0.4);
  background: rgba(234, 179, 8, 0.12);
}
html[data-theme="light"] .btn-warn:hover { background: rgba(234, 179, 8, 0.2); }

html[data-theme="light"] .icon-btn,
html[data-theme="light"] .icon-btn.icon-move,
html[data-theme="light"] .icon-btn.icon-fixed {
  background: rgba(24, 24, 27, 0.03);
  border-color: var(--border);
  color: var(--foreground);
}
html[data-theme="light"] .icon-btn.icon-add {
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.08);
}
html[data-theme="light"] .icon-btn.icon-remove {
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.08);
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background-color: var(--control-bg);
  color: var(--foreground);
  border-color: var(--border);
  font-size: var(--control-fs);
}
html[data-theme="light"] select {
  background-color: var(--control-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.5 6L8 3l3.5 3' stroke='%2371717a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.5 10L8 13l3.5-3' stroke='%2371717a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: left var(--space-2) center;
}
html[data-theme="light"] .actions select,
html[data-theme="light"] select.select-sm {
  background-position: left var(--space-1) center;
  background-size: 12px 12px;
}
html[data-theme="light"] select option { background: #ffffff; color: #18181b; }
html[data-theme="light"] .ui-select-toggle {
  background: var(--control-bg);
  color: var(--foreground);
  border-color: var(--border);
}
html[data-theme="light"] .ui-select.open .ui-select-toggle,
html[data-theme="light"] .ui-select-toggle:hover {
  background: var(--control-bg-hover);
}
html[data-theme="light"] .ui-select-menu {
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(24, 24, 27, 0.14);
}
html[data-theme="light"] .row-actions-toggle {
  background: #ffffff;
}
html[data-theme="light"] .flash.ok {
  background: rgba(22, 163, 74, 0.1);
  border-color: rgba(22, 163, 74, 0.28);
  color: #15803d;
}
html[data-theme="light"] .flash.err {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.28);
  color: #b91c1c;
}
html[data-theme="light"] .flash.warn {
  background: rgba(202, 138, 4, 0.1);
  border-color: rgba(202, 138, 4, 0.28);
  color: #a16207;
}
html[data-theme="light"] .flash.ok::before {
  background-color: rgba(22, 163, 74, 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M8 12.2l2.8 2.8L16.5 9'/%3E%3C/svg%3E");
}
html[data-theme="light"] .flash.warn::before {
  background-color: rgba(202, 138, 4, 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a16207' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8L21 19.2H3L12 3.8z'/%3E%3Cpath d='M12 9.2v5'/%3E%3Ccircle cx='12' cy='16.6' r='0.9' fill='%23a16207' stroke='none'/%3E%3C/svg%3E");
}
html[data-theme="light"] .flash.err::before {
  background-color: rgba(220, 38, 38, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E");
}
html[data-theme="light"] .quick-links a,
html[data-theme="light"] .section-tabs a,
html[data-theme="light"] .section-tabs .tab-btn {
  background: rgba(24, 24, 27, 0.03);
  border-color: var(--border);
  color: var(--muted-fg);
}
html[data-theme="light"] .quick-links a:hover,
html[data-theme="light"] .section-tabs a:hover,
html[data-theme="light"] .section-tabs .tab-btn:hover {
  background: rgba(24, 24, 27, 0.06);
  color: var(--foreground);
}
html[data-theme="light"] .section-tabs a.active,
html[data-theme="light"] .section-tabs .tab-btn.active {
  background: rgba(249, 115, 22, 0.12);
  color: #c2410c;
  border-color: rgba(249, 115, 22, 0.42);
}
html[data-theme="light"] .section-tabs a.active:hover,
html[data-theme="light"] .section-tabs .tab-btn.active:hover {
  background: rgba(249, 115, 22, 0.18);
  color: #c2410c;
}
html[data-theme="light"] .btn-star {
  color: #c2410c !important;
  border-color: rgba(249, 115, 22, 0.42);
  background: rgba(249, 115, 22, 0.1);
}
html[data-theme="light"] .btn-star:hover {
  background: rgba(249, 115, 22, 0.16);
  color: #c2410c !important;
}
html[data-theme="light"] .upload-box {
  background: var(--background);
}
html[data-theme="light"] .upload-box:hover,
html[data-theme="light"] .upload-box:focus-within {
  background: var(--background);
  border-color: rgba(249, 115, 22, 0.4);
}
html[data-theme="light"] .image-setting {
  background: var(--background);
}
html[data-theme="light"] .image-setting .upload-box,
html[data-theme="light"] .image-setting .upload-box:hover,
html[data-theme="light"] .image-setting .upload-box:focus-within {
  background: color-mix(in srgb, var(--muted) 65%, var(--background));
}
html[data-theme="light"] .upload-box-plus {
  background: color-mix(in srgb, var(--muted) 70%, var(--background));
  color: #c2410c;
}
html[data-theme="light"] .image-setting .upload-box-plus {
  background: color-mix(in srgb, var(--muted) 88%, #000 4%);
}
html[data-theme="light"] .upload-box.has-file .upload-box-name {
  color: #15803d;
}
html[data-theme="light"] .stat-ico { background: var(--muted); color: var(--muted-fg); }
html[data-theme="light"] .page-title-ico {
  background: #fff;
  border-color: color-mix(in srgb, var(--bot-line) 40%, var(--border));
  color: var(--bot-line);
}
html[data-theme="light"] .page-title-ico--pg {
  background: #fff;
  border-color: color-mix(in srgb, var(--pg-line) 40%, var(--border));
  color: var(--pg-line);
}
html[data-theme="light"] .page-title-ico--neutral {
  background: #f4f4f5;
  border: 1px solid var(--border);
  color: #52525b;
}
html[data-theme="light"] .logout-link {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.3);
}
html[data-theme="light"] .ui-switch-track {
  background: #d4d4d8;
  border-color: #d4d4d8;
}
html[data-theme="light"] .side-theme-btn {
  background: rgba(24, 24, 27, 0.03);
}
html[data-theme="light"] .side-theme-btn:hover,
html[data-theme="light"] .side-theme.open .side-theme-btn {
  background: var(--muted);
}
html[data-theme="light"] .side-theme-menu {
  box-shadow: 0 12px 28px rgba(24, 24, 27, 0.12);
}
html[data-theme="light"] .auth-wrap {
  background: var(--background);
}
html[data-theme="light"] .auth-panel:not(.auth-panel--stage) {
  background: var(--bg-card);
}
html[data-theme="light"] th { color: var(--foreground); }

/* Badges / tags — readable on light surfaces (same compact chip metrics) */
html[data-theme="light"] .badge,
html[data-theme="light"] .role-tag {
  border-color: rgba(24, 24, 27, 0.1);
  background: rgba(24, 24, 27, 0.04);
  color: var(--muted-fg);
}
html[data-theme="light"] .badge.ok,
html[data-theme="light"] .badge.active,
html[data-theme="light"] .badge.approved,
html[data-theme="light"] .badge.delivered,
html[data-theme="light"] .badge.answered,
html[data-theme="light"] .badge.connected,
html[data-theme="light"] .badge.healthy {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.22);
}
html[data-theme="light"] .badge.warn,
html[data-theme="light"] .badge.pending,
html[data-theme="light"] .badge.awaiting,
html[data-theme="light"] .badge.open,
html[data-theme="light"] .badge.connecting {
  background: rgba(202, 138, 4, 0.1);
  color: #a16207;
  border-color: rgba(202, 138, 4, 0.22);
}
html[data-theme="light"] .badge.danger,
html[data-theme="light"] .badge.bad,
html[data-theme="light"] .badge.rejected,
html[data-theme="light"] .badge.blocked,
html[data-theme="light"] .badge.cancelled,
html[data-theme="light"] .badge.failed,
html[data-theme="light"] .badge.error,
html[data-theme="light"] .badge.unhealthy {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.22);
}
html[data-theme="light"] .badge.info,
html[data-theme="light"] .badge.paid,
html[data-theme="light"] .badge.role-reseller,
html[data-theme="light"] .role-tag-reseller {
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.22);
}
html[data-theme="light"] .badge.role-admin {
  background: rgba(24, 24, 27, 0.06);
  color: var(--foreground);
  border-color: rgba(24, 24, 27, 0.12);
}
html[data-theme="light"] .role-tag-admin {
  background: rgba(234, 88, 12, 0.1);
  color: #c2410c;
  border-color: rgba(234, 88, 12, 0.22);
}
html[data-theme="light"] .role-tag-pg {
  background: rgba(22, 163, 74, 0.08);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.22);
}
html[data-theme="light"] .role-tag-owner {
  background: rgba(234, 88, 12, 0.1);
  color: #c2410c;
  border-color: rgba(234, 88, 12, 0.22);
}
html[data-theme="light"] .role-tag-principal {
  background: rgba(126, 34, 206, 0.08);
  color: #7e22ce;
  border-color: rgba(126, 34, 206, 0.22);
}
html[data-theme="light"] .identity-chip {
  border-color: rgba(24, 24, 27, 0.1);
  background: rgba(24, 24, 27, 0.04);
}
html[data-theme="light"] .setup-progress span {
  background: rgba(24, 24, 27, 0.12);
}
html[data-theme="light"] .setup-progress span.done {
  background: rgba(24, 24, 27, 0.35);
}
html[data-theme="light"] .setup-probe-bar {
  background: rgba(24, 24, 27, 0.08);
}
html[data-theme="light"] .setup-probe-steps li::before {
  background: rgba(24, 24, 27, 0.12);
}
html[data-theme="light"] .setup-probe-steps li.is-done::before {
  background: rgba(24, 24, 27, 0.4);
}
html[data-theme="light"] .setup-audit {
  background: rgba(24, 24, 27, 0.02);
}
html[data-theme="light"] .setup-audit-badge.is-owner {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.22);
}
html[data-theme="light"] .setup-audit-badge.is-limited {
  background: rgba(202, 138, 4, 0.1);
  color: #a16207;
  border-color: rgba(202, 138, 4, 0.22);
}

/* —— Overall home dashboard —— */
.home-update-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--section-gap);
}
.home-update-banner::before {
  align-self: center;
}
.home-update-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 auto;
}
.home-update-copy strong { font-size: 13px; font-weight: 600; color: inherit; }
.home-update-copy .muted { font-size: 12px; color: inherit; }
.home-top {
  margin-bottom: var(--section-gap);
}
.pg-nodes-live {
  margin-bottom: var(--section-gap);
}
.pg-live-rates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--section-gap);
  width: 100%;
}
.pg-live-rate {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--card-pad);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  min-width: 0;
  box-sizing: border-box;
}
.pg-live-rate-top {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  justify-content: flex-start;
  color: var(--muted-fg);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.pg-metric-val {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.28em;
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--foreground);
  max-width: 100%;
}
/*
  Rate / byte values — same principle as .byte-size:
  logical «200 کیلوبایت/ثانیه»; number on the visual RIGHT, unit on the LEFT.
  Never force dir=ltr on the whole value (that puts the unit at the right edge).
*/
.pg-metric-val-rate,
.pg-live-rate .pg-metric-val-rate,
.pg-node-metric .pg-metric-val-rate {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap !important;
  justify-content: flex-start; /* RTL: pack from the right */
  align-items: baseline;
  gap: 0.35em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  direction: rtl;
  unicode-bidi: isolate;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg-metric-val-rate .pg-metric-num,
.pg-live-rate .pg-metric-val-rate .pg-metric-num,
.pg-node-metric .pg-metric-val-rate .pg-metric-num {
  display: block;
  direction: ltr;
  unicode-bidi: isolate;
  flex: 0 0 auto;
  order: 0;
  margin: 0;
}
.pg-metric-val-rate .pg-metric-unit,
.pg-live-rate .pg-metric-val-rate .pg-metric-unit,
.pg-node-metric .pg-metric-val-rate .pg-metric-unit {
  display: block;
  direction: rtl;
  unicode-bidi: isolate;
  flex: 0 1 auto;
  order: 0;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg-live-rate .pg-metric-val {
  font-size: 22px;
}
.pg-metric-num {
  font-size: 1em;
  font-weight: 700;
}
.pg-metric-unit {
  font-size: 0.52em;
  font-weight: 550;
  letter-spacing: 0;
  color: var(--muted-fg);
  line-height: 1.2;
}
.pg-live-rate > small.muted {
  font-size: 11px;
  line-height: 1.3;
  text-align: right;
  width: 100%;
}
.pg-node-board {
  width: 100%;
  min-width: 0;
}
.pg-node-board-empty {
  margin: 0;
}
/* Node picker tabs — settings-tab chrome, PG blue active (not brand orange) */
.pg-node-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-0);
  width: 100%;
  max-width: 100%;
}
.pg-node-tabs .tab-btn {
  flex: 0 0 auto;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pg-node-tabs .tab-btn.active,
.pg-node-tabs .tab-btn.active:hover,
.pg-node-tabs .tab-btn.active:active {
  background: color-mix(in srgb, #3d8fd1 18%, transparent);
  color: #8ec5ef;
  border-color: color-mix(in srgb, #3d8fd1 42%, var(--border));
  font-weight: 600;
}
html[data-theme="light"] .pg-node-tabs .tab-btn.active,
html[data-theme="light"] .pg-node-tabs .tab-btn.active:hover,
html[data-theme="light"] .pg-node-tabs .tab-btn.active:active {
  background: color-mix(in srgb, #3d8fd1 14%, #fff);
  color: #1d4ed8;
  border-color: color-mix(in srgb, #3d8fd1 40%, var(--border));
}
.pg-node-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: 0;
  width: 100%;
  min-width: 0;
}
.pg-node-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm, 12px);
  /* Same chrome as dashboard .home-period sales boxes */
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.pg-node-tile[hidden] {
  display: none !important;
}
.pg-node-tile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}
.pg-node-tile-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pg-node-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pg-node-id {
  font-size: 11px;
}
.pg-node-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
}
.pg-node-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-1) var(--space-1_5);
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 35%, var(--bg-card));
  box-sizing: border-box;
}
/* CPU + RAM share a row on wide viewports */
.pg-node-metric-res {
  grid-column: auto;
}
.pg-node-metric-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1);
  min-width: 0;
}
.pg-node-metric > span,
.pg-node-metric-head > span:first-child {
  color: var(--muted-fg);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}
/* Cores / RAM meta — same num→unit RTL placement as rates (not dir=ltr). */
.pg-node-metric-meta {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.22em;
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 65%;
  direction: rtl;
  unicode-bidi: isolate;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pg-node-metric-meta .pg-metric-num {
  direction: ltr;
  unicode-bidi: isolate;
  flex: 0 0 auto;
  font-weight: 650;
  white-space: nowrap;
}
.pg-node-metric-meta .pg-metric-num .pg-metric-sep {
  opacity: 0.55;
  font-weight: 600;
}
.pg-node-metric-meta .pg-metric-unit {
  direction: rtl;
  unicode-bidi: isolate;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.92em;
  font-weight: 550;
  color: var(--muted-fg);
}
.pg-node-metric .pg-metric-val {
  font-size: 16px;
}
.pg-node-metric .pg-metric-val-rate {
  /* Beat any inherited direction from parent metric / tile */
  align-self: stretch;
}
.pg-node-meter {
  --p: 0;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 22px;
}
.pg-node-meter-track {
  position: relative;
  flex: 1 1 auto;
  height: 22px;
  border-radius: 999px;
  /* Same track tone as .home-gauge-track */
  background: color-mix(in srgb, var(--muted-fg) 18%, transparent);
  border: 1px solid var(--border);
  overflow: hidden;
}
.pg-node-meter-fill {
  display: block;
  height: 100%;
  width: calc(var(--p) * 1%);
  max-width: 100%;
  border-radius: inherit;
  background: var(--ok-fg);
  /* Full opacity — must match .home-gauge-val stroke tones exactly */
  opacity: 1;
  transition: width .35s ease, background .25s ease;
}
/* Same tone ladder as host gauge rings (.home-gauge-*) */
.pg-node-meter-ok .pg-node-meter-fill { background: var(--ok-fg); }
.pg-node-meter-warn .pg-node-meter-fill { background: var(--warn-fg); }
.pg-node-meter-caution .pg-node-meter-fill { background: var(--caution-fg, #fb923c); }
.pg-node-meter-err .pg-node-meter-fill { background: var(--destructive-fg); }
.pg-node-meter-neutral .pg-node-meter-fill {
  background: var(--muted-fg);
}
/* Percent on the bar — flip to white when fill covers center (no text-shadow halo) */
.pg-node-meter-pct {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--foreground);
  text-shadow: none;
  pointer-events: none;
  line-height: 1;
  z-index: 1;
}
html[data-theme="dark"] .pg-node-meter-pct {
  color: #fff;
}
html[data-theme="light"] .pg-node-meter-pct.pg-node-meter-pct-on-fill {
  color: #fff;
}
html[data-theme="light"] .pg-node-tile {
  background: rgba(0, 0, 0, 0.02);
}
html[data-theme="light"] .pg-node-metric {
  background: color-mix(in srgb, var(--muted) 40%, #fff);
}
.home-gauges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--section-gap);
  width: 100%;
  max-width: none;
}
.home-gauge {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  padding: var(--card-pad);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  min-height: 0;
  height: auto;
  box-sizing: border-box;
  overflow: hidden;
  direction: ltr; /* ring left, title block on the right */
}
.home-gauge-ring {
  --p: 0;
  position: relative;
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
}
.home-gauge-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.home-gauge-track,
.home-gauge-val {
  fill: none;
  stroke-width: 8;
}
.home-gauge-track { stroke: color-mix(in srgb, var(--muted-fg) 18%, transparent); }
.home-gauge-val {
  stroke: var(--ok-fg);
  stroke-linecap: round;
  stroke-dasharray: var(--p) 100;
  transition: stroke-dasharray .6s ease, stroke .25s ease;
}
.home-gauge-warn .home-gauge-val { stroke: var(--warn-fg); }
.home-gauge-caution .home-gauge-val { stroke: var(--caution-fg, #fb923c); }
.home-gauge-err .home-gauge-val { stroke: var(--destructive-fg); }
.home-gauge-neutral .home-gauge-val { stroke: var(--muted-fg); }

/* PG quota — exhausted: clean red border only (no shadow/gradient) */
.home-gauge.is-exhausted {
  border-color: var(--destructive-fg);
}
.pg-quota-top { margin-bottom: var(--section-gap); }
.pg-quota-gauges-embed { margin-top: var(--space-2); }
.pg-quota-banner {
  align-items: flex-start;
}
.home-gauge-meta > small.muted {
  font-size: 12px;
  line-height: 1.3;
}
.home-gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
}
.home-gauge-center strong {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}
.home-gauge-center span {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-fg);
  letter-spacing: 0.06em;
}
.home-gauge-meta {
  text-align: start; /* with direction:rtl → physical right, opposite the ring */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 auto;
  direction: rtl;
}
.home-gauge-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.25;
}
/* LTR used/total: pin to physical right even when the line wraps */
.home-gauge-meta [dir="ltr"],
.home-gauge-meta .num-ratio {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: right;
  direction: rtl;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}
.home-gauge-meta .mono,
.home-gauge-meta .muted { font-size: 12px; }

.dash-bot-setup {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: start;
  padding: var(--card-pad);
}
.dash-bot-setup::before {
  margin-top: var(--space-0);
}
.dash-bot-setup-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  max-width: 28rem;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}
.dash-bot-setup-inner strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: inherit;
}
.dash-bot-setup-inner .muted {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: inherit;
}
.dash-bot-setup-inner .btn {
  margin-top: var(--space-1);
}

.home-panel-pg .home-panel-grid > .stat {
  min-height: 96px;
  height: 96px;
  max-height: 96px;
  text-align: right;
  align-items: stretch;
  overflow: hidden;
  box-sizing: border-box;
  gap: var(--space-1);
  justify-content: space-between;
  padding: var(--space-2);
}
.home-panel-pg .home-panel-grid > .stat strong,
.home-panel-pg .home-panel-grid > .stat .stat-value,
.home-panel-pg .home-panel-grid > .stat small {
  text-align: right;
}
.home-panel-pg .home-panel-grid > .stat small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: var(--space-1);
}
.pg-admin-name-inline {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 10rem;
}
.home-panel-title > .badge {
  flex: 0 0 auto;
}

.home-conn-card { margin-bottom: var(--section-gap); }
.home-dash > .card,
.home-conn-card {
  padding: var(--card-pad);
}

/* —— Home portals (bot orange / PG blue) —— */
.home-portal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--section-gap);
}
.home-portal {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 72px;
  padding: var(--space-2) var(--card-pad);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  text-decoration: none !important;
  color: inherit !important;
  box-sizing: border-box;
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}
.home-portal:hover { transform: translateY(-1px); }
.home-portal:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent);
}
.home-portal-bot {
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--bot-line) 42%, var(--border));
}
.home-portal-bot:hover {
  background: color-mix(in srgb, var(--muted) 35%, var(--bg-card));
  border-color: color-mix(in srgb, var(--bot-line) 55%, var(--border));
}
.home-portal-bot:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bot-line) 55%, transparent);
}
.home-portal-pg {
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--pg-line) 42%, var(--border));
}
.home-portal-pg:hover {
  background: color-mix(in srgb, var(--muted) 35%, var(--bg-card));
  border-color: color-mix(in srgb, var(--pg-line) 55%, var(--border));
}
.home-portal-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: transparent;
  border: 1px solid transparent;
}
.home-portal-bot .home-portal-ico {
  color: var(--bot-line);
  border-color: color-mix(in srgb, var(--bot-line) 40%, var(--border));
}
.home-portal-pg .home-portal-ico {
  color: var(--pg-line);
  border-color: color-mix(in srgb, var(--pg-line) 40%, var(--border));
}
.home-portal-ico svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-portal-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.home-portal-copy strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.home-portal-copy .muted {
  font-size: 12px;
  line-height: 1.35;
}
.home-portal-go {
  flex: 0 0 auto;
  align-self: center;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  line-height: 0;
  opacity: 0.55;
  color: inherit;
}
.home-portal-go svg {
  width: 16px;
  height: 16px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-portal-bot .home-portal-go { color: var(--bot-line); }
.home-portal-pg .home-portal-go { color: var(--pg-line); }

/* —— Period sales —— */
.home-periods-card {
  margin-bottom: var(--section-gap);
  container-type: inline-size;
  container-name: home-periods;
}
.home-periods-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-2);
}
.home-periods-head h2 {
  margin: 0;
  font-size: var(--title-size);
  font-weight: 600;
}
.home-periods-head .muted {
  margin: 0;
  font-size: 12px;
}
/* Mobile 1 → medium 2 → tablet/desktop 3 (container width, not viewport) */
.home-period-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
@container home-periods (min-width: 520px) {
  .home-period-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container home-periods (min-width: 820px) {
  .home-period-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Fallback when container queries unavailable */
@supports not (container-type: inline-size) {
  .home-period-grid {
    grid-template-columns: 1fr;
  }
  @media (min-width: 640px) {
    .home-period-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .home-period-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}
.home-period {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
}
.home-period-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-fg);
  padding-bottom: var(--space-0);
  border-bottom: 1px solid var(--border);
}
.home-period-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-2);
  margin: 0;
}
.home-period-metrics > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.home-period-metrics dt {
  margin: 0;
  font-size: 11px;
  color: var(--muted-fg);
  font-weight: 500;
}
.home-period-metrics dd {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.home-action-empty {
  margin: 0;
  font-size: 13px;
}
html[data-theme="light"] .home-portal-bot {
  background: #fff;
  border-color: color-mix(in srgb, var(--bot-line) 36%, var(--border));
}
html[data-theme="light"] .home-portal-pg {
  background: #fff;
  border-color: color-mix(in srgb, var(--pg-line) 36%, var(--border));
}
html[data-theme="light"] .home-portal-bot:hover {
  background: #fafafa;
  border-color: color-mix(in srgb, var(--bot-line) 48%, var(--border));
}
html[data-theme="light"] .home-portal-pg:hover {
  background: #fafafa;
  border-color: color-mix(in srgb, var(--pg-line) 48%, var(--border));
}
html[data-theme="light"] .home-period {
  background: rgba(0, 0, 0, 0.02);
}
@media (max-width: 560px) {
  /* Portals stay side-by-side on mobile (first row) */
  .home-portal-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1);
  }
  .home-portal {
    min-height: 64px;
    padding: var(--space-1_5) var(--space-1_5);
    gap: var(--space-1);
  }
  .home-portal-ico {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }
  .home-portal-ico svg {
    width: 17px;
    height: 17px;
  }
  .home-portal-copy strong {
    font-size: 12.5px;
  }
  .home-portal-copy .muted {
    display: none;
  }
}

.home-dash > .card > h2,
.home-conn-card > h2 {
  margin: 0;
  font-size: var(--title-size);
  font-weight: 600;
}
.home-conn-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-1);
}
.home-conn-row:has(> .home-conn:only-child) {
  grid-template-columns: 1fr;
}
.home-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  justify-content: flex-end;
}
.backup-health-tag {
  margin-inline-start: var(--space-1);
  vertical-align: middle;
  font-size: 0.75rem;
}

.home-action-card {
  margin-bottom: var(--section-gap);
}
.home-action-card h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--title-size);
  font-weight: 600;
}
.home-action-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.home-action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  transition: background var(--motion-fast) var(--ease-standard);
}
.home-action-item-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.home-action-item-link:hover {
  color: inherit;
}
.inbox-dismiss-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.inbox-alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.inbox-alert-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
}
.inbox-dismiss-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.inbox-dismiss-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1_5);
  width: 100%;
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--muted, #18181b) 55%, transparent);
  cursor: pointer;
  text-align: start;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.inbox-dismiss-option:hover {
  border-color: color-mix(in srgb, var(--foreground) 22%, var(--border));
}
.inbox-dismiss-option:has(input:checked),
.inbox-dismiss-option.is-selected {
  border-color: color-mix(in srgb, #f97316 55%, var(--border));
  background: color-mix(in srgb, #f97316 10%, transparent);
}
/* Visually hidden but still in the accessibility tree — avoid 0×0 radios
   (mobile WebKit has dropped those from form payloads before). Mode is also
   mirrored to #inbox-dismiss-mode and posted via panelSubmitFormPost. */
.inbox-dismiss-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 1;
  pointer-events: none;
}
.inbox-dismiss-radio {
  display: inline-flex;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--muted-fg) 45%, var(--border));
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}
.inbox-dismiss-option:has(input:checked) .inbox-dismiss-radio,
.inbox-dismiss-option.is-selected .inbox-dismiss-radio {
  border-color: #f97316;
  box-shadow: inset 0 0 0 4px #f97316;
}
.inbox-dismiss-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.inbox-dismiss-copy strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground);
}
.inbox-dismiss-copy small {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted-fg);
}
#form-inbox-dismiss .actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  margin-top: var(--space-1);
}
#form-inbox-dismiss .actions .btn {
  width: 100%;
  justify-content: center;
}
.home-action-leading {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 auto;
}
.home-action-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--muted-fg);
}
.home-action-ico svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-action-item.tone-warn .home-action-ico { color: var(--warn-fg); }
.home-action-item.tone-err .home-action-ico { color: var(--destructive-fg); }
.home-action-item:hover,
.home-action-item-link:hover {
  background: rgba(255, 255, 255, 0.07);
}
.home-action-item-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent);
}
.home-action-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.home-action-copy strong {
  font-size: 13px;
  font-weight: 600;
}
.home-action-item.tone-err {
  border-color: color-mix(in srgb, var(--danger, #ef4444) 35%, var(--border));
}
.home-action-item.tone-warn {
  border-color: color-mix(in srgb, var(--warn, #f59e0b) 35%, var(--border));
}
@media (max-width: 640px) {
  .home-panel-actions {
    width: auto;
    justify-content: flex-end;
  }
  .home-panel-actions .btn {
    flex: 0 0 auto;
    width: auto;
    justify-content: center;
  }
}
.home-conn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--btn-h);
  min-height: var(--btn-h);
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
}
.home-conn:hover {
  background: rgba(255, 255, 255, 0.09);
  opacity: 1;
}
.home-conn-ico {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted-fg);
}
.home-conn-text {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.home-conn-k {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.25;
  flex: 0 0 auto;
}
.home-conn-cap {
  font-size: 12px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.home-conn-badge {
  margin-inline-start: auto;
  flex: 0 0 auto;
}

.home-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--section-gap);
  /* Match .card margin-bottom so پنل ربات → دسترسی سریع equals other box gaps */
  margin-bottom: var(--section-gap);
  align-items: stretch;
}
.home-panel {
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  border-radius: var(--radius);
  min-width: 0;
  /* Hug content — height:100% stretched short pages and left a tall empty
     slab between node tiles and the footer on PG overview. */
  height: auto;
  align-self: start;
  width: 100%;
}
.home-panel-bot {
  border: 1px solid color-mix(in srgb, #e08a3c 38%, var(--border));
  background: transparent;
}
.home-panel-pg {
  border: 1px solid color-mix(in srgb, #3d8fd1 35%, var(--border));
  background: transparent;
}
.home-panel-bot .home-panel-grid > .stat {
  border-color: color-mix(in srgb, #e08a3c 22%, var(--border));
}
.home-panel-pg .home-panel-grid > .stat {
  border-color: color-mix(in srgb, #3d8fd1 22%, var(--border));
}
.home-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  padding: 0;
  flex: 0 0 auto;
}
.home-panel-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.home-panel-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-panel-h {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-panel-bot .home-panel-ico,
.home-panel-bot .home-panel-h { color: #f0b27a; }
.home-panel-pg .home-panel-ico,
.home-panel-pg .home-panel-h { color: #8ec5ef; }
.home-panel-bot .btn,
.home-panel-bot a.btn {
  color: #f0b27a !important;
  border-color: color-mix(in srgb, #e08a3c 45%, transparent);
  background: color-mix(in srgb, #e08a3c 16%, transparent);
}
.home-panel-bot .btn:hover,
.home-panel-bot a.btn:hover {
  background: color-mix(in srgb, #e08a3c 26%, transparent);
  opacity: 1;
}
.home-panel-pg .btn,
.home-panel-pg a.btn {
  color: #8ec5ef !important;
  border-color: color-mix(in srgb, #3d8fd1 45%, transparent);
  background: color-mix(in srgb, #3d8fd1 16%, transparent);
}
.home-panel-pg .btn:hover,
.home-panel-pg a.btn:hover {
  background: color-mix(in srgb, #3d8fd1 26%, transparent);
  opacity: 1;
}
.home-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  align-content: start;
}
.home-panel-grid > .stat {
  margin: 0;
  height: 96px;
  min-height: 96px;
  max-height: 96px;
  padding: var(--space-2);
  overflow: hidden;
  box-sizing: border-box;
  text-align: right;
  align-items: stretch;
  gap: var(--space-1);
  justify-content: flex-start;
  max-width: 100%;
}
.home-panel-grid > .stat .stat-top {
  min-width: 0;
  justify-content: flex-start;
}
.home-panel-grid > .stat .stat-top > span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-panel-grid > .stat strong,
.home-panel-grid > .stat .stat-value {
  display: block;
  font-size: clamp(12px, 2.4vw, 18px);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  margin-top: auto;
  width: 100%;
  max-width: 100%;
}
.home-panel-grid > .stat .stat-value[dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}
.home-panel-grid > .stat small {
  display: block;
  margin-top: var(--space-1);
  font-size: 11px;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-panel-pg .home-panel-grid > .stat {
  height: 96px;
  min-height: 96px;
  max-height: 96px;
  justify-content: space-between;
  padding: var(--space-2);
}
.home-panel-pg .home-panel-grid > .stat strong,
.home-panel-pg .home-panel-grid > .stat .stat-value {
  margin-top: 0;
}

html[data-theme="light"] .home-conn {
  background: #fff;
}
html[data-theme="light"] .home-conn:hover {
  background: var(--bg-hover);
}
html[data-theme="light"] .bot-conn {
  background: #fff;
}
html[data-theme="light"] .bot-conn.is-ok {
  background: rgba(34, 197, 94, 0.08);
}
html[data-theme="light"] .bot-conn.is-err {
  background: rgba(239, 68, 68, 0.08);
}
html[data-theme="light"] .bot-conn.is-neutral {
  background: #fff;
}
html[data-theme="light"] .home-panel-bot {
  border-color: color-mix(in srgb, #ea580c 28%, var(--border));
  background: transparent;
}
html[data-theme="light"] .home-panel-pg {
  border-color: color-mix(in srgb, #2563eb 28%, var(--border));
  background: transparent;
}
html[data-theme="light"] .home-panel-bot .home-panel-grid > .stat {
  border-color: color-mix(in srgb, #ea580c 22%, var(--border));
}
html[data-theme="light"] .home-panel-pg .home-panel-grid > .stat {
  border-color: color-mix(in srgb, #2563eb 22%, var(--border));
}
html[data-theme="light"] .home-panel-bot .home-panel-ico,
html[data-theme="light"] .home-panel-bot .home-panel-h { color: #c2410c; }
html[data-theme="light"] .home-panel-pg .home-panel-ico,
html[data-theme="light"] .home-panel-pg .home-panel-h { color: #1d4ed8; }
html[data-theme="light"] .home-panel-bot .btn,
html[data-theme="light"] .home-panel-bot a.btn {
  color: #c2410c !important;
  border-color: color-mix(in srgb, #ea580c 36%, transparent);
  background: color-mix(in srgb, #ea580c 12%, transparent);
}
html[data-theme="light"] .home-panel-bot .btn:hover,
html[data-theme="light"] .home-panel-bot a.btn:hover {
  background: color-mix(in srgb, #ea580c 18%, transparent);
}
html[data-theme="light"] .home-panel-pg .btn,
html[data-theme="light"] .home-panel-pg a.btn {
  color: #1d4ed8 !important;
  border-color: color-mix(in srgb, #2563eb 36%, transparent);
  background: color-mix(in srgb, #2563eb 12%, transparent);
}
html[data-theme="light"] .home-gauge.is-exhausted {
  border-color: var(--destructive-fg);
}

@media (max-width: 1100px) {
  .home-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .home-gauges { gap: var(--space-1); }
  .pg-live-rates { gap: var(--space-1); }
  .pg-live-rate .pg-metric-val { font-size: 18px; }
  .pg-node-metrics { grid-template-columns: 1fr 1fr; }
  .pg-node-metric-res { grid-column: 1 / -1; }
  .home-gauge {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-1);
    padding: var(--space-2);
    min-height: 168px;
    height: 168px;
  }
  .home-gauge-meta {
    text-align: center;
    align-items: center;
  }
  .home-gauge-meta [dir="ltr"],
  .home-gauge-meta .num-ratio {
    text-align: center;
  }
  .home-gauge-ring { width: 96px; height: 96px; }
  .home-gauge-center strong { font-size: 20px; }

  /* PG users/traffic: keep side-by-side in modals/lists; room for used/remain text */
  .pg-quota-gauges {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  .pg-quota-gauges .home-gauge {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: start;
    gap: var(--space-2);
    padding: var(--space-2);
    min-height: 0;
    height: auto;
    min-width: 0;
  }
  .pg-quota-gauges .home-gauge-ring {
    width: 64px;
    height: 64px;
    align-self: center;
  }
  .pg-quota-gauges .home-gauge-center strong { font-size: 15px; }
  .pg-quota-gauges .home-gauge-center span { font-size: 10px; }
  .pg-quota-gauges .home-gauge-meta {
    text-align: center;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: var(--space-0);
  }
  .pg-quota-gauges .home-gauge-meta [dir="ltr"],
  .pg-quota-gauges .home-gauge-meta .num-ratio {
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 11px;
    line-height: 1.35;
    max-width: 100%;
  }
  .pg-quota-gauges .home-gauge-meta small {
    overflow-wrap: anywhere;
    font-size: 11px;
    line-height: 1.35;
  }
  /* Inside edit modals: give gauges full width of the panel */
  .edit-modal-body .pg-quota-gauges-embed {
    width: 100%;
  }
}
@media (max-width: 560px) {
  .home-conn-row { grid-template-columns: 1fr; }
  .home-panel-grid { grid-template-columns: 1fr 1fr; }
  /* Very narrow: still 2-col but denser; avoid stacking that wastes vertical space */
  .edit-modal-body .pg-quota-gauges {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1);
  }
}

/* Changelog sits under the update flash inside the same card */
.update-changelog {
  margin: 0;
  padding: var(--card-pad);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.update-changelog-title {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}
.update-changelog-block + .update-changelog-block {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.update-changelog-ver {
  display: inline-block;
  margin-bottom: var(--space-1);
  font-size: 13px;
  font-weight: 600;
}
.update-changelog-list {
  margin: 0;
  padding: 0 var(--space-2) 0 0;
  list-style: disc;
}
.update-changelog-list li {
  margin: 0 0 var(--space-1);
  font-size: 13px;
  line-height: 1.5;
  color: var(--foreground);
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.update-changelog-list li:last-child { margin-bottom: 0; }

/* —— Internal panel tickets —— */
.page-sub {
  margin: var(--space-1) 0 0;
  font-size: 13px;
}
.section-title {
  margin: var(--section-gap) 0 var(--space-1);
  font-size: 15px;
  font-weight: 600;
}
.ticket-tg-section { margin-top: var(--section-gap); }
.ticket-tg-section .page-sub { margin-bottom: var(--space-2); }
tr.is-unread td { background: rgba(234, 179, 8, 0.06); }
/* Alias — same rhythm as .actions (modals must not invent a second footer scale) */
.ui-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  margin-top: var(--space-2);
}
.ticket-view-sub {
  margin: var(--space-1) 0 0;
  font-size: 13px;
}
.ticket-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  margin-bottom: var(--space-2);
}
.ticket-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: min(42vh, 360px);
  overflow: auto;
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.ticket-msg {
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.ticket-msg--owner {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.06);
}
.ticket-msg--opener {
  border-color: rgba(59, 130, 246, 0.22);
  background: rgba(59, 130, 246, 0.06);
}
.ticket-msg-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: baseline;
  margin-bottom: var(--space-1);
  font-size: 12px;
}
.ticket-msg-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.55;
}
.ticket-reply { margin-top: var(--space-1); }
.ticket-closed-note { margin: var(--space-2) 0; }
.ticket-status-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end; /* RTL: left side */
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.ticket-status-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.ticket-status-form .form-field { margin: 0; min-width: 160px; flex: 1; }
.ticket-close-form {
  display: flex;
  margin: 0;
  margin-inline-start: auto; /* RTL: pin close to the left */
}
.ticket-close-form > .btn,
.ticket-close-form > button {
  margin: 0;
}
html[data-theme="light"] .ticket-thread {
  background: rgba(0, 0, 0, 0.02);
}
html[data-theme="light"] .ticket-msg--owner {
  background: rgba(34, 197, 94, 0.08);
}
html[data-theme="light"] .ticket-msg--opener {
  background: rgba(59, 130, 246, 0.08);
}
html[data-theme="light"] tr.is-unread td {
  background: rgba(234, 179, 8, 0.08);
}
.ticket-attach {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  padding: var(--space-0) var(--space-1);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--foreground);
  font-size: 12px;
  text-decoration: none;
  max-width: 100%;
}
.ticket-attach:hover { background: var(--bg-hover); }
.ticket-attach .ico {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ticket-attach span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme="light"] .nav-dot {
  background: #d97706;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.18);
}
html[data-theme="light"] .alert-dot {
  background: #ea580c;
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.2);
}
html[data-theme="light"] .users-ops-stats > .stat:hover {
  background: rgba(0, 0, 0, 0.03);
}
html[data-theme="light"] .users-row.is-focus > td {
  background: color-mix(in srgb, var(--accent, #0284c7) 10%, transparent);
}
html[data-theme="light"] .ticket-attach {
  background: rgba(0, 0, 0, 0.02);
}

/* —— باشگاه مشتریان —— */
.loyalty-overview {
  margin-bottom: var(--section-gap);
}
.loyalty-overview .home-panel {
  height: auto;
}
.loyalty-overview .home-panel-grid {
  flex: 0 0 auto;
}
/* Top referrers: equal columns (user | invite count) */
.col-count {
  width: 50%;
  white-space: nowrap;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.table-compact th.col-count,
.table-compact td.col-count {
  width: 50%;
  padding-inline: var(--space-2);
}
.loyalty-referrers .table-compact th:not(.col-count):first-child,
.loyalty-referrers .table-compact td:not(.col-count):first-child {
  width: 50%;
}
.home-panel-neutral {
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.home-panel-neutral .home-panel-ico,
.home-panel-neutral .home-panel-h {
  color: var(--foreground);
}
html[data-theme="light"] .home-panel-neutral {
  border-color: var(--border);
  background: var(--bg-card);
}
html[data-theme="light"] .home-panel-neutral .home-panel-ico,
html[data-theme="light"] .home-panel-neutral .home-panel-h {
  color: var(--foreground);
}
.settings-modal-body .loyalty-stack {
  gap: var(--space-2);
}
.settings-modal-body .loyalty-stack > .card,
.settings-modal-body .loyalty-stack > .settings-card {
  margin-bottom: 0;
}
.loyalty-stack {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}
.loyalty-stack > .card,
.loyalty-stack > .settings-card {
  margin-bottom: 0;
}
.loyalty-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  flex-wrap: wrap;
}
.loyalty-editor-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  min-width: 0;
}
.loyalty-editor-title > strong {
  font-size: var(--title-size);
  font-weight: 600;
}
.loyalty-editor-danger {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.loyalty-editor-danger > .actions {
  margin: 0;
}
.loyalty-editor-danger .btn {
  width: 100%;
  justify-content: center;
}
.loyalty-tier-readonly {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--card-pad);
}
.loyalty-tier-readonly > strong {
  font-size: var(--title-size);
  font-weight: 600;
}
.section-tabs + .loyalty-overview,
.section-tabs + .loyalty-stack {
  margin-top: 0;
}

@keyframes flash-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* —— Shell-first widget loading (centered, design-token spinner) —— */
.panel-widgets-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: min(52vh, 28rem);
  padding: var(--section-gap) var(--space-2);
  box-sizing: border-box;
  animation: panel-widgets-loading-in var(--motion-med) var(--ease-out) both;
}
.panel-widgets-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  max-width: 18rem;
}
.panel-widgets-loading-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
}
.panel-load-clock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
}
.panel-load-clock-face {
  position: relative;
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--pg-line) 42%, var(--border));
  background: color-mix(in srgb, var(--bg-card, var(--card, #18181b)) 88%, transparent);
  box-sizing: border-box;
}
.panel-load-clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  margin-left: -1px;
  transform-origin: 50% 100%;
  border-radius: 1px;
  background: var(--pg-line);
}
.panel-load-clock-hour {
  height: 28%;
  animation: panel-load-clock-hour 8s linear infinite;
}
.panel-load-clock-minute {
  height: 40%;
  background: color-mix(in srgb, var(--foreground) 78%, var(--pg-line));
  animation: panel-load-clock-minute 2s linear infinite;
}
.panel-load-clock-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--foreground);
}
@keyframes panel-load-clock-hour {
  to { transform: rotate(360deg); }
}
@keyframes panel-load-clock-minute {
  to { transform: rotate(360deg); }
}
.panel-widgets-loading-ring {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--pg-line) 28%, var(--border));
  border-top-color: var(--pg-line);
  animation: panel-widgets-spin 0.85s linear infinite;
}
.panel-widgets-loading-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--foreground);
}
.panel-widgets-loading-cap {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}
@keyframes panel-widgets-spin {
  to { transform: rotate(360deg); }
}
@keyframes panel-widgets-loading-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .panel-widgets-loading,
  .panel-widgets-loading-ring,
  .panel-load-clock-hour,
  .panel-load-clock-minute {
    animation: none;
  }
}

/* —— Navigation clock (fixed; light matte; no geometry change) —— */
.panel-nav-clock {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  /* Matte lives on the pseudo-element, not on this fixed box — invariant E */
  background: transparent;
  opacity: 0;
  visibility: hidden;
}
.panel-nav-clock::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Behind the clock face: this box is positioned, so without a negative
     z-index it would paint over the in-flow dial. The fixed parent is a
     stacking context (z-index: 200), so -1 stays inside the overlay. */
  z-index: -1;
  /* Light matte — not the deleted full-page veil/skeleton system */
  background: color-mix(in srgb, var(--background, #09090b) 72%, transparent);
}
/* Revealed immediately by JS removing [hidden]. Do NOT use CSS animation-delay:
   WebKit freezes animation timelines when MPA navigation starts. Do NOT delay
   with setTimeout — slow navigations unload before the timer fires. */
.panel-nav-clock:not([hidden]) {
  opacity: 1;
  visibility: visible;
}
.panel-nav-clock .panel-load-clock {
  width: 3rem;
  height: 3rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.panel-nav-clock .panel-load-clock-face {
  width: 2.5rem;
  height: 2.5rem;
  background: color-mix(in srgb, var(--bg-card, var(--card, #18181b)) 92%, transparent);
}

/* —— List pagination (heavy tables) —— */
.list-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.list-pager-meta {
  margin: 0;
  font-size: 12px;
  color: var(--muted-fg);
  font-variant-numeric: tabular-nums;
}
.list-pager-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.list-pager-actions .btn[aria-disabled="true"],
.list-pager-actions .btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* —— Telegram button color settings (settings → رنگبندی) —— */
/* Section heads: same title↔caption unit as .card h2 + .update-card-caption */
.btn-color-section-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  /* Form uses gap: section-gap — pull toward the group cards BELOW */
  margin: 0 0 calc(var(--space-2) - var(--section-gap));
  min-width: 0;
}
/* Extra top gap beyond form section-gap — clearer boundary from previous card
   (same idea as .edit-section / .edit-section-sub / .card-subhead space-3 rhythm) */
.settings-card + .btn-color-section-head,
.card + .btn-color-section-head {
  margin-top: var(--space-2);
}
.btn-color-section-head > h2 {
  margin: 0;
  font-size: var(--title-size);
  font-weight: 600;
  line-height: 1.5;
  color: var(--foreground);
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.btn-color-section-head > .update-card-caption,
.btn-color-section-head > p.muted {
  margin: 0;
  /* Same pull as .card h2 + .update-card-caption (net title↔caption = space-1) */
  margin-top: calc(-1 * var(--space-1));
  line-height: 1.5;
  font-size: 12px;
  color: var(--muted-fg);
  font-weight: 400;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.btn-color-section-head + .settings-card,
.btn-color-section-head + .card {
  margin-top: 0;
}
.btn-color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--section-gap);
  margin: 0;
}
.btn-color-card {
  margin: 0;
  padding: var(--card-pad);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.btn-color-label {
  display: block;
  margin: 0;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.btn-color-card > .ui-select {
  margin-top: 0;
  width: 100%;
}
.btn-color-card select.btn-color-select {
  width: 100%;
}

/* Plan create/edit — air between tone select and hint caption */
.plan-color-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}
.plan-color-field .plan-color-hint {
  margin: 0;
}

/* Tone-aware select — chip / hamburger-tag look */
.btn-color-card .ui-select[data-tone] .ui-select-toggle {
  border-radius: 999px;
  font-weight: 500;
  justify-content: space-between;
  gap: var(--space-1);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-color-card .ui-select[data-tone] .ui-select-toggle:hover,
.btn-color-card .ui-select[data-tone] .ui-select-toggle:focus,
.btn-color-card .ui-select[data-tone] .ui-select-toggle:focus-visible,
.btn-color-card .ui-select[data-tone] .ui-select-toggle:active,
.btn-color-card .ui-select[data-tone].open .ui-select-toggle {
  border-radius: 999px;
}
.btn-color-card .ui-select[data-tone] .ui-select-toggle::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: currentColor;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent);
}
.btn-color-card .ui-select[data-tone="default"] .ui-select-toggle {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--muted-fg);
}
.btn-color-card .ui-select[data-tone="primary"] .ui-select-toggle {
  background: rgba(42, 171, 238, 0.16);
  border-color: rgba(42, 171, 238, 0.38);
  color: #7dd3fc;
}
.btn-color-card .ui-select[data-tone="success"] .ui-select-toggle {
  background: rgba(49, 181, 69, 0.16);
  border-color: rgba(49, 181, 69, 0.38);
  color: #86efac;
}
.btn-color-card .ui-select[data-tone="danger"] .ui-select-toggle {
  background: rgba(229, 57, 53, 0.16);
  border-color: rgba(229, 57, 53, 0.38);
  color: #fca5a5;
}
.btn-color-card .ui-select[data-tone] .ui-select-caret {
  stroke: currentColor;
  opacity: 0.85;
}
.btn-color-card .ui-select[data-tone].open .ui-select-toggle,
.btn-color-card .ui-select[data-tone] .ui-select-toggle:hover {
  filter: brightness(1.06);
}

/* Menu options — same chip tones */
.ui-select-menu button[data-tone] {
  border-radius: 999px;
  margin: 2px 6px;
  width: calc(100% - 12px);
  justify-content: flex-start;
  gap: var(--space-1);
  font-weight: 500;
}
.ui-select-menu button[data-tone]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: currentColor;
}
.ui-select-menu button[data-tone="default"] {
  color: var(--muted-fg);
}
.ui-select-menu button[data-tone="primary"] {
  color: #7dd3fc;
}
.ui-select-menu button[data-tone="success"] {
  color: #86efac;
}
.ui-select-menu button[data-tone="danger"] {
  color: #fca5a5;
}
.ui-select-menu button[data-tone="default"].active,
.ui-select-menu button[data-tone="default"]:hover {
  background: rgba(255, 255, 255, 0.06);
}
.ui-select-menu button[data-tone="primary"].active,
.ui-select-menu button[data-tone="primary"]:hover {
  background: rgba(42, 171, 238, 0.14);
}
.ui-select-menu button[data-tone="success"].active,
.ui-select-menu button[data-tone="success"]:hover {
  background: rgba(49, 181, 69, 0.14);
}
.ui-select-menu button[data-tone="danger"].active,
.ui-select-menu button[data-tone="danger"]:hover {
  background: rgba(229, 57, 53, 0.14);
}

html[data-theme="light"] .btn-color-card .ui-select[data-tone="default"] .ui-select-toggle {
  background: rgba(24, 24, 27, 0.04);
  border-color: rgba(24, 24, 27, 0.12);
  color: #52525b;
}
html[data-theme="light"] .btn-color-card .ui-select[data-tone="primary"] .ui-select-toggle {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.32);
  color: #0369a1;
}
html[data-theme="light"] .btn-color-card .ui-select[data-tone="success"] .ui-select-toggle {
  background: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.32);
  color: #15803d;
}
html[data-theme="light"] .btn-color-card .ui-select[data-tone="danger"] .ui-select-toggle {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.28);
  color: #b91c1c;
}
html[data-theme="light"] .ui-select-menu button[data-tone="default"] { color: #52525b; }
html[data-theme="light"] .ui-select-menu button[data-tone="primary"] { color: #0369a1; }
html[data-theme="light"] .ui-select-menu button[data-tone="success"] { color: #15803d; }
html[data-theme="light"] .ui-select-menu button[data-tone="danger"] { color: #b91c1c; }
html[data-theme="light"] .ui-select-menu button[data-tone="default"].active,
html[data-theme="light"] .ui-select-menu button[data-tone="default"]:hover {
  background: rgba(24, 24, 27, 0.06);
}
html[data-theme="light"] .ui-select-menu button[data-tone="primary"].active,
html[data-theme="light"] .ui-select-menu button[data-tone="primary"]:hover {
  background: rgba(14, 165, 233, 0.12);
}
html[data-theme="light"] .ui-select-menu button[data-tone="success"].active,
html[data-theme="light"] .ui-select-menu button[data-tone="success"]:hover {
  background: rgba(22, 163, 74, 0.12);
}
html[data-theme="light"] .ui-select-menu button[data-tone="danger"].active,
html[data-theme="light"] .ui-select-menu button[data-tone="danger"]:hover {
  background: rgba(220, 38, 38, 0.1);
}

@media (min-width: 768px) {
  .btn-color-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .btn-color-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* —— Funnel / رفتار کاربر —— */
.funnel-panel-home { margin-top: var(--section-gap); }
.funnel-panel-caption {
  margin: 0 0 var(--space-2);
  font-size: 12px;
  line-height: 1.45;
}

/* —— Finance receipt thumb —— */
.receipt-thumb-link {
  display: inline-block;
  margin-top: var(--space-1);
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  line-height: 0;
  vertical-align: middle;
  background: transparent;
  cursor: pointer;
}
.receipt-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  display: block;
  background: var(--background);
  border-radius: 11px;
}

/* —— Telegram preview button tones (Bot API colors) —— */
.tg-key[data-tone="default"] {
  background: linear-gradient(180deg, #5a6570, #3d4650);
  color: #f4f6f8;
}
.tg-key[data-tone="primary"] {
  background: linear-gradient(180deg, #3d8fd4, #2472b8);
  color: #f2f7fb;
}
.tg-key[data-tone="success"] {
  background: linear-gradient(180deg, #3fad6e, #2a8f55);
  color: #f2fbf5;
}
.tg-key[data-tone="danger"] {
  background: linear-gradient(180deg, #e05a5a, #c43d3d);
  color: #fff6f6;
}
.tg-key-home .tg-key[data-tone="default"] {
  background: linear-gradient(180deg, #5a6570, #3d4650);
}

.tg-scene-label {
  font-size: 11px;
  margin-bottom: 6px;
  opacity: 0.85;
}
.tg-inline-kb {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 10px 8px;
  max-width: min(100%, 320px);
  align-self: flex-start;
}
.tg-inline-row {
  display: flex;
  gap: 4px;
}
.tg-inline-key {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #356891, var(--tg-key));
  color: #f2f7fb;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  min-height: 32px;
  cursor: default;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.tg-inline-key[data-tone="default"] {
  background: linear-gradient(180deg, #5a6570, #3d4650);
  color: #f4f6f8;
}
.tg-inline-key[data-tone="primary"] {
  background: linear-gradient(180deg, #3d8fd4, #2472b8);
}
.tg-inline-key[data-tone="success"] {
  background: linear-gradient(180deg, #3fad6e, #2a8f55);
}
.tg-inline-key[data-tone="danger"] {
  background: linear-gradient(180deg, #e05a5a, #c43d3d);
}
.tg-key.is-focus,
.tg-inline-key.is-focus {
  outline: 2px solid color-mix(in srgb, var(--primary) 70%, white);
  outline-offset: 1px;
}


/* —— Receipt image modal —— */
.ui-modal-panel-receipt {
  width: min(520px, calc(100vw - 2 * var(--space-3)));
  max-width: 520px;
}
.receipt-modal-body {
  padding: var(--space-2) var(--space-3) var(--space-3);
}
.receipt-modal-frame {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--background);
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 200px;
  max-height: min(70vh, 640px);
}
.receipt-modal-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(70vh, 640px);
  object-fit: contain;
  border-radius: calc(var(--radius) - 2px);
}


/* Gift / category / addon modals — recent list under create form */
.gift-codes-recent-title,
#modal-plan-categories .gift-codes-recent-title,
#modal-service-addons .gift-codes-recent-title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--foreground);
}
.form-stack + .gift-codes-recent-title,
#modal-gift-codes .form-stack + .gift-codes-recent-title,
#modal-plan-categories .form-stack + .gift-codes-recent-title,
#modal-service-addons .form-stack + .gift-codes-recent-title {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* Tables inside modals: grow with content; modal (.ui-modal-scroll) scrolls —
   never clamp to a leftover flex slot with internal vertical scroll. */
/* Tables inside modals: grow with content; modal (.ui-modal-scroll) scrolls —
   never clamp to a leftover flex slot with internal vertical scroll.
   flex-shrink:0 is required — overflow:auto flex items otherwise get
   automatic min-size 0 and become nested scrollers. */
.ui-modal-scroll > .table-wrap,
.ui-modal-panel .table-wrap {
  flex: 0 0 auto;
  flex-shrink: 0;
  align-self: stretch;
  height: auto;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}
.ui-modal-scroll > .plan-cat-list,
.ui-modal-panel .plan-cat-list {
  flex: 0 0 auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.ui-modal-scroll > .plan-cat-list > .gift-codes-recent-title {
  margin: 0;
  padding-top: 0;
  border-top: 0;
}
.form-stack.plan-cat-form + .plan-cat-list {
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* —— Message variables catalog (panel-aligned compact tables) —— */
.msg-vars-stack {
  display: grid;
  gap: var(--section-gap);
}
.msg-vars-token-cell {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
}
.msg-vars-token-box {
  display: inline-flex;
  align-items: center;
  height: var(--btn-h);
  padding: 0 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--background);
  color: var(--foreground);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.msg-vars-alias {
  display: inline;
  margin-inline-start: 0.35rem;
  font-size: 12px;
}
.msg-vars-alias code {
  font-size: 11px;
}
@media (max-width: 720px) {
  .msg-vars-token-cell {
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
  }
  .msg-vars-token-cell .btn {
    flex: 0 0 auto;
  }
}

/* —— Payment destination lists (multi card/gateway/crypto) —— */
.pay-dest-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  grid-column: 1 / -1;
}
.pay-dest-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pay-dest-title {
  font-size: 14px;
  font-weight: 600;
}
.pay-dest-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.pay-dest-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
}
.pay-dest-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-1);
  width: 100%;
}
.pay-dest-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.pay-dest-fields input {
  width: 100%;
}
.pay-dest-remove-btn {
  width: 100%;
  justify-content: center;
}
.pay-dest-add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted-fg);
  cursor: pointer;
  width: 100%;
}
.pay-dest-add-row:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  color: var(--foreground);
}

.pay-dest-color {
  grid-column: 1 / -1;
}
.pay-dest-color .plan-color-card {
  max-width: 320px;
}
/* Inside modals, color chips must stretch with the row (not a 320px orphan) */
.ui-modal-panel .pay-dest-color .plan-color-card {
  max-width: none;
  width: 100%;
}

.supports-fields-grid .supports-enabled-field {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) !important;
  padding: var(--space-1) var(--space-2) !important;
  margin: 0;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--foreground) !important;
}
.supports-fields-grid .supports-enabled-field > span:not(.ui-switch) {
  font-size: 13px;
  font-weight: 550;
}
.supports-editor-list {
  margin-top: var(--space-1);
}

.support-fields .item-color-field {
  grid-column: 1 / -1;
}
.support-fields .item-color-field .plan-color-card {
  max-width: 320px;
}
.ui-modal-panel .support-fields .item-color-field .plan-color-card {
  max-width: none;
  width: 100%;
}

/* —— Colors tab (section-tabs, accordions, dynamic summary) —— */
.colors-page-tabs {
  margin-bottom: 0;
}
.colors-tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.colors-tab-panel[hidden] {
  display: none !important;
}
.colors-tab-caption {
  margin: 0;
  font-size: 13px;
}
.colors-groups-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
/* Kill .card flex/gap/padding — those push summary content off true center */
.colors-groups-stack > .colors-group-details.card,
details.colors-group-details.card {
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}
.colors-group-details > summary.colors-group-summary {
  display: block;
  list-style: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.colors-group-details > summary.colors-group-summary::-webkit-details-marker,
.colors-group-details > summary.colors-group-summary::marker {
  display: none;
  content: "";
}
/* Inner wrapper: Safari/WebKit ignores flex/grid on <summary> itself */
.colors-group-summary-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: stretch;
  column-gap: var(--space-2);
  min-height: 44px;
  height: 44px;
  padding: 0 var(--card-pad);
  box-sizing: border-box;
  width: 100%;
}
.colors-group-summary-inner h2 {
  margin: 0;
  padding: 0;
  font-size: var(--title-size);
  font-weight: 600;
  line-height: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: center;
}
.colors-group-chevron {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-fg);
  align-self: center;
  box-sizing: border-box;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.colors-chevron-ico {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}
.colors-group-details[open] > summary .colors-group-chevron {
  border-color: rgba(249, 115, 22, 0.42);
  color: var(--brand-fg);
}
.colors-group-details[open] > summary .colors-chevron-ico {
  transform: rotate(180deg);
}
.colors-group-grid {
  padding: 0 var(--card-pad) var(--card-pad);
  gap: var(--space-2);
  margin: 0;
}
.colors-dynamic-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.colors-dynamic-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-1) var(--space-2);
  align-items: center;
  padding: var(--space-1_5) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
}
.colors-dynamic-title {
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.colors-dynamic-link {
  font-size: 12px;
  white-space: nowrap;
}

.inbox-reset-form {
  margin: 0;
  flex: 0 0 auto;
}
.inbox-tools-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.inbox-tools-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.inbox-tools-copy strong {
  font-size: 14px;
  font-weight: 600;
}
.inbox-tools-copy .muted {
  font-size: 12px;
}
.inbox-reset-form .btn {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .inbox-tools-card {
    flex-direction: column;
    align-items: stretch;
  }
  .inbox-reset-form .btn {
    width: 100%;
    justify-content: center;
  }
}

/* —— Table bulk selection ——
   Circle on the RIGHT (first col in RTL). Diameter = .badge min-height (20px).
   Root cause of off-center: global `label { margin-bottom }` on .table-select-*. */
th.col-select,
td.col-select {
  width: 36px;
  min-width: 36px;
  max-width: 40px;
  padding: 0 !important;
  text-align: center;
  vertical-align: middle !important;
}
.table-select-all,
.table-select-row {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  height: 100%;
  min-height: 48px;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: 400;
  line-height: 0;
}
thead th.col-select .table-select-all {
  min-height: 40px;
  height: 100%;
}
.table-bulk-check {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid color-mix(in srgb, var(--foreground) 32%, var(--border));
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  box-sizing: border-box;
  display: block;
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}
.table-bulk-check:hover {
  border-color: rgba(249, 115, 22, 0.55);
}
.table-bulk-check:focus-visible {
  outline: 2px solid rgba(249, 115, 22, 0.45);
  outline-offset: 2px;
}
.table-bulk-check:checked {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--background) 82%, transparent);
}
.table-bulk-check:indeterminate {
  border-color: var(--brand);
  background: rgba(249, 115, 22, 0.35);
}
tbody tr.is-bulk-selected {
  background: rgba(249, 115, 22, 0.08);
}
tbody tr.is-bulk-selected:hover {
  background: rgba(249, 115, 22, 0.12);
}
.table-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-1_5) var(--space-2);
  border-bottom: 1px solid var(--border);
  background: rgba(249, 115, 22, 0.08);
}
.table-bulk-bar[hidden] {
  display: none !important;
}
.table-bulk-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.table-bulk-op {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
}
.table-bulk-op[hidden] {
  display: none !important;
}
.table-bulk-op-label {
  line-height: 1.2;
}
.table-bulk-op-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  width: auto;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* Vazirmatn Persian digits sit optically low in small circles */
  transform: translateY(-0.5px);
  box-sizing: border-box;
  border: 1px solid var(--border);
}
/* Tonal pills — mirror each bulk button variant (not one shared gray disk) */
.table-bulk-op.btn-ghost .table-bulk-op-count {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--muted-fg);
}
.table-bulk-op.btn-ok .table-bulk-op-count {
  background: rgba(34, 197, 94, 0.22);
  border-color: rgba(34, 197, 94, 0.42);
  color: var(--ok-fg);
}
.table-bulk-op.btn-warn .table-bulk-op-count {
  background: rgba(234, 179, 8, 0.22);
  border-color: rgba(234, 179, 8, 0.42);
  color: var(--warn-fg);
}
.table-bulk-op.btn-danger .table-bulk-op-count {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.42);
  color: var(--destructive-fg);
}
html[data-theme="light"] .table-bulk-op.btn-ghost .table-bulk-op-count {
  background: rgba(24, 24, 27, 0.05);
  border-color: rgba(24, 24, 27, 0.12);
  color: var(--muted-fg);
}
html[data-theme="light"] .table-bulk-op.btn-ok .table-bulk-op-count {
  background: rgba(22, 163, 74, 0.14);
  border-color: rgba(22, 163, 74, 0.35);
  color: #15803d;
}
html[data-theme="light"] .table-bulk-op.btn-warn .table-bulk-op-count {
  background: rgba(234, 179, 8, 0.18);
  border-color: rgba(202, 138, 4, 0.4);
  color: #a16207;
}
html[data-theme="light"] .table-bulk-op.btn-danger .table-bulk-op-count {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.35);
  color: #b91c1c;
}

/* Capsule numeric stepper — outer pill, circular ± inside, centered value */
.num-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--btn-h);
  min-height: var(--btn-h);
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--control-bg);
  box-sizing: border-box;
  unicode-bidi: isolate;
}
.num-stepper-btn {
  flex: 0 0 auto;
  width: calc(var(--btn-h) - 6px);
  min-width: calc(var(--btn-h) - 6px);
  height: calc(var(--btn-h) - 6px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
  color: var(--muted-fg);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--motion-fast, 180ms) ease, background var(--motion-fast, 180ms) ease;
}
.num-stepper-btn:hover {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 12%, transparent);
}
.num-stepper-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 1px;
  z-index: 1;
}
/* Beat global input[dir=ltr] { text-align: right } — value must stay centered */
.num-stepper .num-stepper-input,
.form-field > .num-stepper > .num-stepper-input,
input.num-stepper-input[dir="ltr"] {
  flex: 1 1 auto;
  width: 4.5rem;
  min-width: 3rem;
  height: calc(var(--btn-h) - 6px);
  margin: 0;
  padding: 0 0.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--foreground);
  direction: ltr;
  text-align: center;
  text-align-last: center;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  line-height: calc(var(--btn-h) - 6px);
  box-shadow: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.num-stepper .num-stepper-input:focus,
.form-field > .num-stepper > .num-stepper-input:focus,
input.num-stepper-input[dir="ltr"]:focus {
  outline: none;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-radius: 8px;
}
.form-field > .num-stepper {
  width: 100%;
  order: 5;
}
.form-field.is-invalid > .num-stepper {
  border-color: var(--destructive);
}
html[data-theme="light"] .num-stepper-btn {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}
html[data-theme="light"] .num-stepper-btn:hover {
  background: color-mix(in srgb, var(--foreground) 10%, transparent);
}

/* Standalone status pages (404 / 500) — panel card language, atmospheric stage */
.panel-status-body {
  margin: 0;
  min-height: 100dvh;
  background: var(--background);
  color: var(--foreground);
  font-family: "Vazirmatn", sans-serif;
}
.panel-status {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-3);
  padding: max(var(--space-3), env(safe-area-inset-top))
    max(var(--space-3), env(safe-area-inset-right))
    max(var(--space-3), env(safe-area-inset-bottom))
    max(var(--space-3), env(safe-area-inset-left));
  box-sizing: border-box;
  overflow: hidden;
}
.panel-status-atmosphere {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.panel-status-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.55;
  will-change: transform;
}
.panel-status-orb-a {
  width: min(52vw, 420px);
  height: min(52vw, 420px);
  top: -12%;
  inset-inline-end: -8%;
  background: color-mix(in srgb, var(--primary) 34%, transparent);
  animation: panel-status-drift-a 14s var(--ease-standard, ease) infinite alternate;
}
.panel-status-orb-b {
  width: min(42vw, 320px);
  height: min(42vw, 320px);
  bottom: 8%;
  inset-inline-start: -10%;
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  animation: panel-status-drift-b 18s var(--ease-standard, ease) infinite alternate;
}
.panel-status[data-status="500"] .panel-status-orb-a {
  background: color-mix(in srgb, var(--destructive) 28%, transparent);
}
.panel-status[data-status="500"] .panel-status-orb-b {
  background: color-mix(in srgb, var(--caution) 18%, transparent);
}
.panel-status-grid {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(color-mix(in srgb, var(--border) 80%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--border) 80%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 20%, transparent 75%);
}
html[data-theme="light"] .panel-status-orb { opacity: 0.35; }
html[data-theme="light"] .panel-status-grid { opacity: 0.35; }

.panel-status-brand {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  animation: panel-status-in 480ms var(--ease-out, ease) both;
}
.panel-status-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--border);
}
.panel-status-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.panel-status-brand-text strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.panel-status-brand-text .muted { font-size: 12px; }

.panel-status-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block: var(--space-2);
}
.panel-status-card {
  position: relative;
  width: min(100%, 26.5rem);
  padding: var(--space-4) var(--space-3) var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--foreground) 4%, transparent),
    0 24px 48px -28px color-mix(in srgb, #000 55%, transparent);
  animation: panel-status-card-in 560ms var(--ease-out, ease) 60ms both;
}
html[data-theme="light"] .panel-status-card {
  background: color-mix(in srgb, var(--bg-card) 96%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--foreground) 4%, transparent),
    0 28px 50px -30px color-mix(in srgb, #000 18%, transparent);
}
.panel-status-card-accent {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary) 15%, transparent),
    var(--primary-fg, var(--primary)) 45%,
    color-mix(in srgb, var(--brand) 70%, var(--primary)) 100%
  );
}
.panel-status[data-status="500"] .panel-status-card-accent {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--destructive) 20%, transparent),
    var(--destructive-fg, var(--destructive)) 50%,
    color-mix(in srgb, var(--caution) 75%, var(--destructive)) 100%
  );
}
.panel-status-watermark {
  position: absolute;
  inset-inline-end: -0.15em;
  top: -0.12em;
  margin: 0;
  font-size: clamp(5.5rem, 28vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: color-mix(in srgb, var(--foreground) 5.5%, transparent);
  font-variant-numeric: tabular-nums;
  user-select: none;
  pointer-events: none;
  animation: panel-status-mark 700ms var(--ease-out, ease) 120ms both;
}
.panel-status[data-status="500"] .panel-status-watermark {
  color: color-mix(in srgb, var(--destructive) 9%, transparent);
}
.panel-status[data-status="404"] .panel-status-watermark {
  color: color-mix(in srgb, var(--primary) 10%, transparent);
}

.panel-status-badge {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-2);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary) 12%, var(--control-bg));
  color: var(--primary-fg, var(--primary));
  animation: panel-status-in 520ms var(--ease-out, ease) 140ms both;
}
.panel-status[data-status="500"] .panel-status-badge {
  background: color-mix(in srgb, var(--destructive) 12%, var(--control-bg));
  color: var(--destructive-fg, var(--destructive));
  border-color: color-mix(in srgb, var(--destructive) 28%, var(--border));
}
.panel-status[data-status="404"] .panel-status-badge {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}
.panel-status-badge-ico {
  width: 26px;
  height: 26px;
}

.panel-status-kicker {
  margin: 0 0 var(--space-0);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.panel-status-title {
  position: relative;
  margin: 0 0 var(--space-1);
  font-size: clamp(1.35rem, 4.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  max-width: 16ch;
}
.panel-status-msg {
  position: relative;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  max-width: 28ch;
}
.panel-status--guided .panel-status-card {
  width: min(100%, 32rem);
}
.panel-status--guided .panel-status-title {
  max-width: none;
}
.panel-status--guided .panel-status-msg {
  max-width: none;
}
.panel-status[data-status="403"] .panel-status-orb-a {
  background: color-mix(in srgb, var(--caution, var(--primary)) 26%, transparent);
}
.panel-status[data-status="403"] .panel-status-card-accent {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--caution, var(--primary)) 18%, transparent),
    var(--primary-fg, var(--primary)) 50%,
    color-mix(in srgb, var(--brand) 70%, var(--primary)) 100%
  );
}
.panel-status[data-status="403"] .panel-status-badge {
  background: color-mix(in srgb, var(--caution, var(--primary)) 12%, var(--control-bg));
  color: var(--primary-fg, var(--primary));
  border-color: color-mix(in srgb, var(--caution, var(--primary)) 28%, var(--border));
}
.panel-status[data-status="403"] .panel-status-watermark {
  color: color-mix(in srgb, var(--caution, var(--primary)) 10%, transparent);
}
.panel-status-guide {
  position: relative;
  margin-top: var(--space-2_5);
  padding-top: var(--space-2_5);
  border-top: 1px solid var(--border);
  animation: panel-status-in 520ms var(--ease-out, ease) 180ms both;
}
.panel-status-guide-title {
  margin: 0 0 var(--space-1_5);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.panel-status-guide-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1_5);
}
.panel-status-guide-steps > li {
  margin: 0;
  padding: var(--space-1_5);
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--control-bg) 88%, transparent);
}
.panel-status-guide-step-title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.panel-status-guide-step-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted-fg, var(--muted));
}
.panel-status-guide-step-body code,
.panel-status-guide-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--foreground) 5%, var(--control-bg));
  color: var(--foreground);
}
.panel-status-code {
  margin: var(--space-1) 0 0;
  padding: 0.7rem 0.85rem;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--foreground) 4%, var(--control-bg));
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
}
.panel-status-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--foreground);
  white-space: pre;
}
.panel-status-guide-note {
  margin: var(--space-1_5) 0 0;
  font-size: 12.5px;
  line-height: 1.7;
}
.panel-status-ref {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: var(--space-2) 0 0;
  padding: 0.35rem 0.7rem;
  border-radius: var(--control-radius);
  border: 1px solid var(--border);
  background: var(--control-bg);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--foreground);
}
.panel-status-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding-top: var(--space-2_5);
  border-top: 1px solid var(--border);
}
.panel-status-actions .btn {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 7.5rem;
}
.panel-status-foot {
  font-size: 12px;
  line-height: 1.6;
  max-width: 26.5rem;
  margin-inline: auto;
  width: 100%;
  text-align: center;
  animation: panel-status-in 520ms var(--ease-out, ease) 220ms both;
}

@keyframes panel-status-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes panel-status-card-in {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes panel-status-mark {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes panel-status-drift-a {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-18px, 22px, 0); }
}
@keyframes panel-status-drift-b {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(20px, -16px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .panel-status-brand,
  .panel-status-card,
  .panel-status-badge,
  .panel-status-watermark,
  .panel-status-foot,
  .panel-status-orb {
    animation: none !important;
  }
}