/* AXAMIL design base (7.2.19).
 * The single source of visual truth for every page: tokens (colour, radius,
 * shadow, type) and the shared components (buttons, form controls, tables,
 * cards, badges, popups). Page stylesheets are loaded inside
 * `@layer legacy`, so these unlayered rules always win over them; page files
 * keep only layout. Dark mode: html[data-theme="dark"].
 */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --brand: #2459f0;
  --brand-600: #1c49d1;
  --brand-soft: rgba(36, 89, 240, .10);
  --brand-ring: rgba(36, 89, 240, .28);
  --on-brand: #ffffff;

  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface2: #f6f8fc;
  --surface-3: #eef2f8;
  --line: #e2e8f1;
  --line-strong: #cfd8e5;
  --text: #13213a;
  --muted: #64748b;
  --muted2: #8a97ab;

  --success: #15924f;  --success-soft: rgba(21, 146, 79, .12);
  --warning: #c27806;  --warning-soft: rgba(194, 120, 6, .14);
  --danger:  #d43c3c;  --danger-soft:  rgba(212, 60, 60, .11);
  --info:    #0e7fb8;  --info-soft:    rgba(14, 127, 184, .12);
  --accent: var(--brand);
  --accent2: var(--brand-600);
  --primary: var(--brand);

  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;
  --radius: var(--r-lg);
  --radius-sm: var(--r-sm);

  --sh-1: 0 1px 2px rgba(16, 24, 40, .06);
  --sh-2: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .06);
  --sh-3: 0 24px 64px rgba(16, 24, 40, .22);
  --shadow-sm: var(--sh-1);
  --shadow: var(--sh-2);
  --shadow-hover: var(--sh-2);
  --ring: 0 0 0 3px var(--brand-ring);

  /* Fonts come from the typography settings (app.js / portal.js set
     --font-fa, --font-heading-fa, --font-en, --font-heading-en). */
  --ax-font-body: var(--font-fa, "IRANSansX"), var(--font-en, "Inter"), Tahoma, Arial, sans-serif;
  --ax-font-heading: var(--font-heading-fa, "Peyda"), var(--font-heading-en, "Inter"), Tahoma, Arial, sans-serif;
  --ax-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --control-h: 42px;
  --btn-h: 40px;
  --btn-h-sm: 34px;
}

html[data-theme="dark"], html[data-mode="dark"] {
  color-scheme: dark;
  --brand: #5b86ff;
  --brand-600: #7b9dff;
  --brand-soft: rgba(91, 134, 255, .16);
  --brand-ring: rgba(91, 134, 255, .35);
  --on-brand: #ffffff;

  --bg: #0b1322;
  --surface: #121c2f;
  --surface-solid: #121c2f;
  --surface2: #172338;
  --surface-3: #1d2b44;
  --line: #24334d;
  --line-strong: #31425f;
  --text: #e7edf7;
  --muted: #9aa8c0;
  --muted2: #7b8aa4;

  --success: #3ccb7f;  --success-soft: rgba(60, 203, 127, .16);
  --warning: #f0a83a;  --warning-soft: rgba(240, 168, 58, .16);
  --danger:  #ff6b6b;  --danger-soft:  rgba(255, 107, 107, .15);
  --info:    #4cb8ef;  --info-soft:    rgba(76, 184, 239, .15);

  --sh-1: 0 1px 2px rgba(0, 0, 0, .35);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .28);
  --sh-3: 0 28px 72px rgba(0, 0, 0, .55);
}

/* ---------- type ---------- */
html, body { background: var(--bg); color: var(--text); }
body, input, select, textarea, button { font-family: var(--ax-font-body); }
h1, h2, h3, h4, h5, h6,
.page-title, .section-title, .card-title, .panel-title, .dialog-title,
.view-title, .hero-title, [class*="-title"]:is(h1, h2, h3, h4, strong) {
  font-family: var(--ax-font-heading);
  color: var(--text);
  letter-spacing: 0;
}
code, kbd, pre, samp, .mono { font-family: var(--ax-font-mono); }
::selection { background: var(--brand-soft); }
:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: var(--btn-h);
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: 600 14px/1.2 var(--ax-font-body);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:hover { background: var(--surface2); border-color: color-mix(in srgb, var(--brand) 35%, var(--line-strong)); }
.btn:focus-visible { box-shadow: var(--ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn.primary, .btn-primary {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 12px color-mix(in srgb, var(--brand) 28%, transparent);
}
.btn.primary:hover, .btn-primary:hover { background: var(--brand-600); border-color: var(--brand-600); }
.btn.secondary { background: var(--brand-soft); border-color: transparent; color: var(--brand); box-shadow: none; }
.btn.secondary:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
.btn.ghost:hover { background: var(--surface2); color: var(--text); }
.btn.danger { background: var(--surface); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.danger.primary { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.active, .btn[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }

/* icon-only and compact contexts */
.btn:has(> svg:only-child), .btn.icon, .btn.icon-btn {
  width: var(--btn-h-sm); min-width: var(--btn-h-sm); min-height: var(--btn-h-sm); padding: 0;
}
table .btn, .table-actions-inline .btn, .dialog-actions .btn.small, .btn.small, .btn.sm {
  min-height: var(--btn-h-sm); padding: 0 12px; font-size: 13px; border-radius: var(--r-sm);
}
table .btn:has(> svg:only-child) { width: var(--btn-h-sm); padding: 0; }

/* ---------- form controls ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.switch),
select, textarea {
  min-height: var(--control-h);
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background-color: var(--surface);
  color: var(--text);
  font: 400 14px/1.4 var(--ax-font-body);
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
textarea { padding: 10px 12px; min-height: 96px; }
input::placeholder, textarea::placeholder { color: var(--muted2); opacity: 1; }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  border-color: var(--brand); box-shadow: var(--ring); outline: none;
}
input:disabled, select:disabled, textarea:disabled { background-color: var(--surface2); color: var(--muted); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
label { color: var(--text); }
fieldset { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface2); }
legend { color: var(--muted); font-weight: 600; font-size: 13px; padding: 0 6px; }

/* ---------- cards ---------- */
.card, .panel, .metric, .table-panel, .stat-card, .summary-card, .dialog-card, .modal-card,
.c7215-service, .settings-card, .chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  color: var(--text);
}

/* ---------- tables ---------- */
table { border-collapse: separate; border-spacing: 0; color: var(--text); }
thead th, table > tr:first-child > th {
  background: var(--surface2);
  color: var(--muted);
  font: 600 12.5px/1.3 var(--ax-font-body);
  text-align: start;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* Last-row trim is for real tables only; account rows rendered as cards keep
   their section dividers (the last card used to lose all of them). */
tbody tr:last-child:not([data-account-id]) td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface2) 70%, transparent); }

/* ---------- badges ---------- */
.pill, .badge, .chip, .status-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 24px; padding: 0 10px;
  border-radius: var(--r-pill);
  font: 600 12px/1 var(--ax-font-body);
  border: 1px solid transparent;
}
.pill.good, .pill.active, .badge.success, .pill.success { background: var(--success-soft); color: var(--success); }
.pill.warn, .pill.pending, .badge.warning, .pill.warning { background: var(--warning-soft); color: var(--warning); }
.pill.bad, .pill.expired, .pill.closed, .badge.danger, .pill.danger { background: var(--danger-soft); color: var(--danger); }

/* ---------- popups ---------- */
dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-3);
  overflow: auto;
}
dialog::backdrop { background: rgba(10, 18, 34, .48); backdrop-filter: blur(3px); }
dialog > form, dialog > .dialog-card, dialog > .modal-card { border: 0; box-shadow: none; border-radius: inherit; }
.dialog-head, .dialog-header640, .modal-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 24px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.dialog-head h2, .dialog-head h3, .dialog-header640 h2, .modal-top h2, .modal-top h3 {
  margin: 0; font: 700 18px/1.35 var(--ax-font-heading);
}
.dialog-subtitle, .dialog-head p, .modal-top p { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.dialog-body640, .modal-body { padding: 20px 24px; }
.dialog-actions, .dialog-footer640 {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface2);
}
.dialog-close, .modal-close, .s7212-dialog-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; min-height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--muted); box-shadow: none;
}
.dialog-close:hover, .modal-close:hover, .s7212-dialog-close:hover { background: var(--surface2); color: var(--text); }

@media (max-width: 640px) {
  dialog { max-width: 100vw; max-height: 100dvh; width: 100vw; border-radius: var(--r-xl) var(--r-xl) 0 0; margin: auto 0 0; }
  .dialog-head, .dialog-header640, .modal-top, .dialog-body640, .modal-body, .dialog-actions, .dialog-footer640 { padding-inline: 16px; }
}

/* ---------- select chevron (appearance reset needs our own arrow) ---------- */
select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: left 12px center;
  padding-left: 36px;
}
[dir="ltr"] select:not([multiple]):not([size]) { background-position: right 12px center; padding-left: 12px; padding-right: 36px; }

/* ---------- dark sidebar controls ---------- */
.sidebar input:not([type="checkbox"]):not([type="radio"]), .side input:not([type="checkbox"]):not([type="radio"]), .side-nav input:not([type="checkbox"]):not([type="radio"]) {
  background-color: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  color: #e7edf7;
}
.sidebar input::placeholder, .side input::placeholder, .side-nav input::placeholder { color: rgba(231, 237, 247, .6); }

/* ---------- every popup system shares one geometry ---------- */
/* Admin editors (article.panel.editor-panel), the notification modal and the
   login overlay are shown like native dialogs: centred, same width scale,
   same radius/shadow and the same backdrop. */
.editor-panel:not(.hidden) {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(960px, calc(100vw - 32px));
  height: fit-content;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  z-index: 1200;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: 0 0 0 100vmax rgba(10, 18, 34, .48), var(--sh-3);
}
.editor-panel > :first-child { padding: 20px 24px; border-bottom: 1px solid var(--line); }
.editor-panel h3 { font: 700 18px/1.35 var(--ax-font-heading); margin: 0; }
.notification-modal:not(.hidden), .auth-overlay.active {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center; padding: 16px;
  background: rgba(10, 18, 34, .48); backdrop-filter: blur(3px);
}
.notification-modal-card, .auth-overlay.active > :first-child {
  width: min(640px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
}
.notification-modal-top { padding: 20px 24px; border-bottom: 1px solid var(--line); }
.notification-modal-body { padding: 20px 24px; }
@media (max-width: 640px) {
  .editor-panel:not(.hidden) { width: 100vw; max-height: 100dvh; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; }
}

/* ---------- phone header: one calm row of equal icon buttons ---------- */
@media (max-width: 760px) {
  header.top, header.topbar {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    padding-block: 14px 12px;
  }
  header.top .top-actions, header.topbar .top-actions {
    order: -1;
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 6px;
    width: 100%; min-height: 44px; padding: 0 0 8px; margin: 0;
    border-bottom: 1px solid var(--line);
  }
  /* Information that the page already shows elsewhere. */
  header.top .m727-clock, header.top .session-chip, header.top a.portal-mobile-action,
  header.topbar .health-pill, header.topbar .breadcrumb { display: none !important; }
  /* Every header control: the same 38px rounded square. */
  header.top .top-actions > :is(button, a), header.topbar .top-actions > :is(button, a) {
    flex: none; width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface); color: var(--text); box-shadow: none;
    font: 700 12px/1 var(--ax-font-body); position: relative;
  }
  header.top .user-chip .user-chip-copy, header.topbar .user-chip .user-chip-copy { display: none; }
  header.top .user-chip .avatar, header.topbar .user-chip .avatar { width: 24px; height: 24px; margin: 0; background: transparent; }
  header.top .m728-head-link small, header.topbar .m728-head-link small {
    position: absolute; top: -6px; inset-inline-end: -6px; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: var(--r-pill); background: var(--danger); color: #fff; font: 700 10px/18px var(--ax-font-body); text-align: center;
  }
  /* Log out sits apart at the far end, as an icon. */
  /* Order: who you are and what is new first; settings and exit at the far end. */
  header.top .user-chip, header.topbar .user-chip { order: 1; }
  header.top .m728-head-link, header.topbar .m728-head-link { order: 2; }
  header.top .lang-btn, header.topbar #langBtn { order: 3; margin-inline-start: auto; }
  header.topbar #themeBtn { order: 4; }
  header.top #mobileLogout, header.topbar #logoutBtn {
    order: 5; color: transparent; overflow: hidden; white-space: nowrap;
    justify-content: flex-start; padding-inline-start: 9px; font-size: 1px;
  }
  header.top #mobileLogout > *, header.topbar #logoutBtn > * { display: none; }
  header.top #mobileLogout::before, header.topbar #logoutBtn::before {
    content: ""; flex: none; width: 18px; height: 18px; background: var(--danger);
    -webkit-mask: 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='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: 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='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* Page title: compact, no eyebrow. */
  header.top .top-copy, header.topbar .title-wrap { display: flex; align-items: center; gap: 10px; min-height: 0; }
  header.top .top-copy .eyebrow { display: none; }
  header.top .top-copy h1, header.topbar .title-wrap h1 { font: 800 20px/1.3 var(--ax-font-heading); margin: 0; }
  header.top .m728-section-icon { width: 34px; height: 34px; border-radius: var(--r-md); }
  header.top .m728-section-icon svg { width: 20px; height: 20px; }
}

/* ---------- popup sizes per device (desktop / tablet / phone) ----------
   Every popup has an explicit width so none stretches across the screen.
   Default = compact form; the wide set holds tables, grids or long editors. */
dialog, .editor-panel:not(.hidden), .notification-modal-card { --popup-w: 560px; }
dialog:is(#mediaLibraryDialog, #deltaResourceDialog, #deltaCorrectionDialog, #portalAccountGenerationDialog,
          #customerServiceCheckoutDialog, #resellerCustomerEditDialog, #creditInvoiceDialog, #networkInterfaceDialog, #policyParamDialog),
.editor-panel:not(.hidden) { --popup-w: 920px; }

/* Desktop */
@media (min-width: 1024px) {
  dialog, .editor-panel:not(.hidden) {
    width: min(var(--popup-w), calc(100vw - 64px));
    max-width: min(var(--popup-w), calc(100vw - 64px));
    max-height: calc(100dvh - 64px);
    margin: auto;
    border-radius: var(--r-xl);
  }
  .notification-modal-card { width: min(var(--popup-w), 100%); }
}
/* Tablet */
@media (min-width: 641px) and (max-width: 1023px) {
  dialog, .editor-panel:not(.hidden) {
    width: min(var(--popup-w), 720px, calc(100vw - 48px));
    max-width: min(var(--popup-w), 720px, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
    margin: auto;
    border-radius: var(--r-xl);
  }
}
/* Phone: a sheet from the bottom edge */
@media (max-width: 640px) {
  dialog, .editor-panel:not(.hidden) {
    width: 100vw; max-width: 100vw; max-height: calc(100dvh - 24px);
    margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
}

/* ---------- themed alert / confirm / prompt (ui-dialog7221.js) ---------- */
dialog.ax-dialog7221 { --popup-w: 440px; }
.ax-dialog7221 .dialog-header640 h2 { font-size: 17px; }
.ax-dialog7221 .ax-dialog7221-message { margin: 0; font-size: 14px; line-height: 1.8; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.ax-dialog7221 .ax-dialog7221-input { display: block; width: 100%; margin-top: 14px; }
.ax-dialog7221 textarea.ax-dialog7221-input { min-height: 84px; resize: vertical; }
.ax-dialog7221 .ax-dialog7221-count { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; text-align: end; }
.ax-dialog7221 .dialog-footer640 { justify-content: flex-start; }
.ax-dialog7221 .dialog-footer640 .btn { min-width: 96px; }
@media (max-width: 640px) {
  .ax-dialog7221 .dialog-footer640 { flex-direction: column-reverse; align-items: stretch; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .ax-dialog7221 .dialog-footer640 .btn { width: 100%; }
}
/* the browser's own search-field clear mark looked like a stray symbol */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* ---------- customer account cards (My accounts) ---------- */
.customer-service-accounts-table tr[data-account-id] > td:first-child {
  padding-block: 0 14px;
  padding-inline: 46px 0;
  background-position: right 0 top 0;
  background-size: 32px;
}
html[dir="ltr"] .customer-service-accounts-table tr[data-account-id] > td:first-child { background-position: left 0 top 0; }
.customer-service-accounts-table tr[data-account-id] > td:first-child::before { min-height: 16px; line-height: 16px; }
.acct-user7221 { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.acct-user7221 > strong { font-size: 18px; line-height: 1.4; color: var(--brand); overflow-wrap: anywhere; min-width: 0; }
.btn.acct-copy7221 {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 28px; height: 28px; padding: 0 9px;
  font-size: 12px; font-weight: 600; border-radius: var(--r-sm);
}
.btn.acct-copy7221::before {
  content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: 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%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: 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%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.customer-label7219 { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: nowrap; min-width: 0; }
.customer-label-text7219 { font-size: 12px; line-height: 1.6; color: var(--muted); min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-label-text7219[data-empty] { opacity: .7; font-style: normal; }
.btn.customer-label-edit7219 { flex: none; min-height: 24px; height: 24px; padding: 0 8px; font-size: 11px; font-weight: 600; border-radius: var(--r-sm); box-shadow: none; }

/* ---------- admin sign-in (7.2.22) ----------
   Security: until sign-in completes nothing of the admin panel is painted.
   index.html starts with body.admin-auth-locked630 and hideAuth() removes it
   only after /auth/me or login succeeded. The overlay itself is opaque. */
body.admin-auth-locked630 { overflow: hidden; }
body.admin-auth-locked630 > :not(#authModal):not(#toast):not(script):not(.ax-dialog7221) { visibility: hidden !important; }
#authModal.auth-overlay.active {
  background: var(--bg); backdrop-filter: none;
  overflow-y: auto; padding: 32px 16px;
}
/* Same single card as the reseller sign-in page. */
#authModal .auth-window {
  position: relative; display: block; width: min(560px, 100%); max-width: 560px;
  min-height: 0; height: auto; max-height: none; overflow: visible;
  margin: auto; padding: 40px 40px 32px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-3);
}
#authModal .auth-art { display: block; position: static; min-height: 0; padding: 0; background: none; color: var(--text); }
#authModal .auth-art::before, #authModal .auth-art::after, #authModal .auth-art-copy, #authModal .auth-art-footer { display: none; }
#authModal .auth-art-brand { justify-content: center; gap: 10px; margin-bottom: 22px; }
#authModal .auth-art-brand strong { font: 800 20px/1.3 var(--ax-font-heading); letter-spacing: .02em; color: var(--text); }
#authModal .auth-art-brand span { color: var(--muted); font-size: 12px; }
#authModal .auth-art-brand .brandmark { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand); font: 800 20px/1 var(--ax-font-heading); box-shadow: none; }
#authModal .auth-art-brand .brandmark img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
#authModal .auth-card {
  display: block; position: static; min-height: 0; padding: 0;
  background: none; border: 0; box-shadow: none; color: var(--text); text-align: center;
}
#authModal .auth-tools { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; display: flex; gap: 6px; margin: 0; }
#authModal .auth-tools .icon-btn { width: 36px; height: 36px; min-height: 36px; padding: 0; }
#authModal .auth-pane { display: flex; flex-direction: column; gap: 14px; width: 100%; }
#authModal .auth-pane.hidden { display: none; }
#authModal .auth-pane .eyebrow {
  align-self: center; display: inline-flex; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface2); color: var(--muted);
  font: 700 12px/1.4 var(--ax-font-body); letter-spacing: 0; text-transform: none;
}
#authModal .auth-pane h2 { margin: 2px 0 0; font: 800 28px/1.35 var(--ax-font-heading); color: var(--text); }
#authModal .auth-pane > p { margin: -4px 0 8px; color: var(--muted); font-size: 14px; line-height: 1.8; }
#authModal .auth-pane label { display: flex; flex-direction: column; gap: 8px; text-align: center; font-size: 13px; font-weight: 600; color: var(--text); }
#authModal .auth-pane input:not([type="checkbox"]):not([type="radio"]) { width: 100%; min-height: 46px; text-align: start; }
#authModal .auth-pane .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#authModal .auth-pane .primary.wide, #authModal #loginBtn, #authModal #setupBtn { width: 100%; min-height: 48px; margin-top: 6px; font-size: 15px; }
#authModal .auth-pane .error { min-height: 0; color: var(--danger); font-size: 13px; }
@media (max-width: 640px) {
  #authModal.auth-overlay.active { padding: 16px; place-items: start center; }
  #authModal .auth-window { padding: 64px 20px 24px; }
  #authModal .auth-pane h2 { font-size: 24px; }
  #authModal .auth-pane .form-grid { grid-template-columns: 1fr; }
}

/* ---------- account search + reservations under an account (7.2.22) ---------- */
.acct-search7222 { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; flex-wrap: wrap; }
.acct-search7222.hidden { display: none; }
.acct-search-field7222 { position: relative; flex: 1 1 320px; max-width: 460px; }
.acct-search-field7222 input { width: 100%; min-height: 42px; }
.acct-search-field7222::before {
  content: ""; position: absolute; inset-inline-start: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%);
  background: var(--muted); pointer-events: none;
  -webkit-mask: 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'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: 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'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.acct-search7222 small { color: var(--muted); font-size: 12px; }
.acct-search-empty7222 { text-align: center; color: var(--muted); padding: 28px 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.acct-reserved7222 { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.acct-reserved-item7222 {
  display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
  padding: 3px 8px; border: 1px dashed color-mix(in srgb, var(--brand) 35%, var(--line)); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--brand-soft) 55%, transparent); font-size: 11px; line-height: 1.6; color: var(--text);
}
.acct-reserved-tag7222 { flex: none; color: var(--brand); font-weight: 700; }
.acct-reserved-name7222 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.acct-reserved-meta7222 { flex: none; color: var(--muted); margin-inline-start: auto; }
@media (max-width: 640px) {
  .acct-search-field7222 { max-width: none; flex-basis: 100%; }
}

/* ---------- profile e-mail row (7.2.22) ----------
   In the stacked phone layout the old flex-basis (180px) became the input's
   height; the field keeps a normal control height on every device. */
.profile-email-form { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.profile-email-form input { flex: 1 1 220px; min-width: 0; height: 42px; min-height: 42px; max-height: 42px; }
.profile-email-form .btn { flex: none; min-height: 42px; }
@media (max-width: 640px) {
  .profile-email-form { flex-direction: column; align-items: stretch; }
  .profile-email-form input { flex: none; width: 100%; }
  .profile-email-form .btn { width: 100%; }
}
.table-pagination select, .pager-size select { min-width: 68px; }
#sessionsPageInfo, .table-pagination [id$="PageInfo"] { white-space: nowrap; }

/* ---------- ticket notifications (7.2.22) ---------- */
.nav .nav-badge.ticket-badge7222 {
  display: inline-flex; align-items: center; justify-content: center; margin-inline-start: auto;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
.ticket-alert7222 {
  position: fixed; z-index: 1300; inset-inline: 0; top: 14px; margin: 0 auto; width: max-content; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; min-height: 0;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); box-shadow: var(--sh-3);
  font: 600 13px/1.6 var(--ax-font-body); cursor: pointer;
  transform: translateY(-140%); opacity: 0; transition: transform .25s ease, opacity .25s ease; pointer-events: none;
}
.ticket-alert7222::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: none; }
.ticket-alert7222.show { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .ticket-alert7222 { transition: none; } }

/* ---------- search fields with an icon inside (7.2.23) ----------
   The icon sits at the inline start of these fields; the text must start
   after it. The selector outranks the generic control rule above, and the
   legacy .ui-control640 inline padding is no longer !important. */
:is(.acct-search-field7222, #locations .c7215-country-search) > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.switch) {
  padding-inline-start: 42px; padding-inline-end: 12px;
}

/* 7.2.31: unstable connections report */
.unstable-panel7231 h4 { margin: 18px 0 8px; font-size: 14px; }
.unstable-panel7231 .panel-head-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.unstable-panel7231 .panel-head-actions label { display: grid; gap: 4px; font-size: 12px; }
.unstable-panel7231 .panel-head-actions input { width: 96px; }
.unstable-panel7231 .cards.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.unstable-table7231 td small { display: block; color: var(--muted); font-size: 11px; }
.unstable-rate7231 { white-space: nowrap; }
.unstable-rate7231 strong { margin-inline-start: 8px; font-size: 12px; }
.unstable-bar7231 { display: inline-block; vertical-align: middle; width: 90px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--line) 70%, transparent); overflow: hidden; }
.unstable-bar7231 i { display: block; height: 100%; width: var(--p); background: var(--bad); border-radius: inherit; }
@media (max-width: 720px) {
  .unstable-panel7231 .cards.three { grid-template-columns: 1fr; }
  .unstable-bar7231 { width: 56px; }
}

/* 7.2.32: clickable account filters, connection pill, renewal list, reserved services */
#services > .s7212-page-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
button.s7212-page-stat { font: inherit; text-align: start; cursor: pointer; width: 100%; transition: border-color .15s, box-shadow .15s; }
button.s7212-page-stat:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--m-line)); }
button.s7212-page-stat:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
button.s7212-page-stat[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
button.s7212-page-stat[data-filter7232="closed"] > svg { color: var(--danger); background: var(--danger-soft); }

.conn-pill7232 { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; border: 1px solid transparent; }
.conn-pill7232 i { width: 9px; height: 9px; border-radius: 50%; flex: none; background: currentColor; }
.conn-pill7232 b { font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }
.conn-pill7232.on { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.conn-pill7232.on i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
.conn-pill7232.off { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }

.reserved-count7232 { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; background: color-mix(in srgb, var(--brand) 12%, transparent); }
.reseller-account-service .reserved-count7232 { display: table; white-space: nowrap; font-size: 10.5px; }

.d7232-due-list { gap: 2px; }
.d7214-reminder.d7232-due-row { width: 100%; font: inherit; color: inherit; text-align: start; background: none; border: 0; border-bottom: 1px solid var(--m-line); border-radius: 0; cursor: default; padding: 10px 4px; }
button.d7232-due-row { cursor: pointer; }
button.d7232-due-row:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
button.d7232-due-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.d7232-due-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.d7232-due-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.d7232-due-owner { font-size: 13px; color: var(--m-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d7232-due-meta { display: flex; align-items: center; gap: 6px; color: var(--m-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d7232-due-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.d7232-due-side .d7214-badge { font-size: 13px; font-weight: 750; padding: 5px 12px; }
.d7214-badge.bad { background: var(--danger-soft); color: var(--danger); }
.d7232-due-traffic { color: var(--m-ink); font-size: 12px; font-weight: 650; }
.d7232-link { cursor: pointer; border-radius: var(--r-md); }
.d7232-link:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.d7232-link:focus-visible { outline: 2px solid var(--brand); }

.c7232-reserved { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 10px 12px; margin-top: 4px; border: 1px dashed color-mix(in srgb, var(--brand) 45%, var(--m-line)); border-radius: var(--r-md); background: color-mix(in srgb, var(--brand) 5%, transparent); }
.c7232-reserved-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c7232-reserved-copy strong { font-size: 14px; color: var(--m-ink); }
.c7232-reserved-copy small { color: var(--m-muted); font-size: 11px; }
.c7232-reserved-action { flex: none; }
tr.flash7232 > td { animation: flash7232 1.8s ease-out; }
@keyframes flash7232 { from { background: color-mix(in srgb, var(--brand) 18%, transparent); } to { background: transparent; } }

@media (max-width: 1100px) { #services > .s7212-page-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .c7232-reserved { flex-direction: column; align-items: stretch; }
  .d7232-due-side .d7214-badge { font-size: 12px; padding: 4px 10px; }
}
.a7214-reseller { --a7214-devices: 104px; --a7214-account: 170px; }
.a7214-accounts .conn-pill7232 { font-size: 11px; padding: 3px 8px; gap: 5px; }
/* 7.2.32: account name and password read right-to-left with the rest of the Persian row */
html[dir=rtl] .a7214-accounts .reseller-account-username,
html[dir=rtl] body.workspace7214 table.a7214-accounts .reseller-account-username > strong { text-align: right; }
html[dir=rtl] .a7214-accounts .reseller-vpn-secret6312 { direction: rtl; justify-content: flex-start; }
html[dir=rtl] .a7214-accounts .reseller-vpn-secret-value6312 { direction: ltr; unicode-bidi: isolate; }

/* =====================================================================
   7.2.42 design: one look for every page of the customer and reseller
   panels (the same language as the website plugin). Order:
     1. account card        5. stat tiles
     2. account lists       6. tables
     3. usage bar           7. popups
     4. panels, headings    8. narrow places, phone
                            9. tabs
                           10. stat tiles, quiet icons; usage summary order
   ===================================================================== */

/* 1. account card (cards7242.js) */
.c7242 { border: 1px solid var(--line); border-inline-start: 4px solid var(--success); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-2); overflow: hidden; }
.c7242.wait { border-inline-start-color: var(--info); }
.c7242.off { border-inline-start-color: var(--muted2); }
.c7242.bad { border-inline-start-color: var(--danger); }
.c7242 > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1.7fr) 230px minmax(0, .9fr) minmax(0, .9fr); align-items: center; gap: 14px; padding: 15px 18px; cursor: pointer; background: linear-gradient(135deg, var(--surface2), var(--surface)); }
.c7242 > summary::-webkit-details-marker { display: none; }
.c7242[open] > summary { border-bottom: 1px solid var(--line); }
.c7242-tog { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: 16px; line-height: 1; }
.c7242-tog::before { content: "+"; }
.c7242[open] .c7242-tog::before { content: "\2212"; }
.c7242-name { display: grid; gap: 2px; min-width: 0; }
.c7242-name strong { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 16px/1.5 var(--ax-font-mono); color: var(--text); }
.c7242-name strong em { font: 600 11px/1.6 var(--ax-font-body); font-style: normal; color: var(--muted); padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-3); white-space: nowrap; }
.c7242-name small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c7242-name .c7242-who { color: var(--text); font-weight: 600; }
.c7242-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.c7242-badge, .c7242-conn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill); font-size: 11px; font-weight: 800; white-space: nowrap; }
.c7242-badge { background: var(--success-soft); color: var(--success); }
.c7242.wait .c7242-badge { background: var(--info-soft); color: var(--info); }
.c7242.off .c7242-badge { background: var(--surface-3); color: var(--muted); }
.c7242.bad .c7242-badge { background: var(--danger-soft); color: var(--danger); }
.c7242-conn { background: var(--surface-3); color: var(--muted); }
.c7242-conn i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.c7242-conn.on { background: var(--success-soft); color: var(--success); }
.c7242-conn.on i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); }
.c7242-meta small { display: block; color: var(--muted2); font-size: 11px; }
.c7242-meta b { color: var(--text); font-size: 14px; }
.c7242-mini { min-width: 0; }
.c7242-mini b { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c7242-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; padding: 20px; }
.c7242-body h4 { margin: 0 0 12px; font: 700 14px/1.4 var(--ax-font-heading); color: var(--text); }
.c7242-cred { display: grid; gap: 10px; }
.c7242-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface2); }
.c7242-row > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.c7242-row:is(.password-reveal, .reseller-vpn-secret6312) { display: grid; width: 100%; max-width: none; box-sizing: border-box; justify-content: stretch; }
.c7242-row code { min-width: 110px; }
.c7242-row code { min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: 600 14px var(--ax-font-mono); text-align: left; overflow: hidden; text-overflow: ellipsis; }
.c7242-row .btn { min-height: 34px; height: 34px; padding: 0 12px; font-size: 12px; }
/* buttons share fixed columns in every row, so the copy buttons line up */
.c7242-row > span { grid-column: 1; grid-row: 1; }
.c7242-row > code { grid-column: 2; grid-row: 1; }
.c7242-row > .c7242-pwchange { grid-column: 3; grid-row: 1; }
.c7242-row > .c7242-pw { grid-column: 4; grid-row: 1; }
.c7242-row > .c7242-copy { grid-column: 5; grid-row: 1; }
.c7242-row:not(:has(.c7242-pw)) > code { grid-column: 2 / 5; }
.c7242-note { margin-top: 12px; padding: 11px 14px; border-radius: var(--r-md); background: var(--info-soft); color: var(--text); font-size: 12px; line-height: 1.9; }
.c7242-cap { display: flex; justify-content: space-between; gap: 10px; margin: 8px 0 12px; color: var(--muted); font-size: 12px; }
.c7242-cap b { color: var(--text); }
.c7242-split { margin: 0 0 14px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--brand-soft); color: var(--muted); font-size: 12px; line-height: 1.9; }
.c7242-split b { color: var(--text); }
.c7242-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.c7242-stats div { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.c7242-stats dt { color: var(--muted); font-size: 11px; }
.c7242-stats dd { margin: 4px 0 0; color: var(--text); font-weight: 800; font-size: 14px; }
.c7242-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.c7242-acts .btn { gap: 8px; min-width: 150px; height: 44px; padding: 0 18px; }
.c7242 .c7232-reserved { margin-top: 12px; }

/* 2. account lists: the cards stand in for the table rows they mirror */
.c7242-list { display: grid; gap: 14px; min-width: 0; }
#vpnCards604.c7242-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.c7242-list { container-type: inline-size; }
.c7242-hosted { display: none !important; }
.c7242-empty { padding: 26px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface2); color: var(--muted); text-align: center; }

/* 3. usage bar (colour from cards7242.js: blue, then amber and red after 70% used) */
.c7242-bar { position: relative; display: block; height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.c7242-bar.big { height: 9px; }
.c7242-bar > span { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; transition: width .4s ease; }

/* 4. panels and headings: a soft header band, as on the account card */
.panel, .card, .settings-card, .chart-card, .table-panel { background: linear-gradient(180deg, color-mix(in srgb, var(--surface2) 85%, var(--surface)) 0, var(--surface) 92px); }
.panel-title-row, .m728-panel-heading { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }

/* 5. stat tiles */
.stat-card, .metric, .m728-kpi, .s7212-page-stat { border: 1px solid var(--line); border-inline-start: 4px solid var(--brand); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--surface2), var(--surface)); box-shadow: var(--sh-1); }

/* 6. tables */
/* one solid band for the whole header row: per-cell backgrounds showed seams and looked
   cut off where a wide table scrolls under its rounded frame */
thead, thead tr { background: var(--surface2); }
thead th, table > tr:first-child > th { background: var(--surface2); background-image: none; color: var(--muted); }
html:not(#_t7242a):not(#_t7242b) body :is(thead th, table > tr:first-child > th) { background-color: var(--surface2); background-image: none; }
html:not(#_t7242a):not(#_t7242b) body thead th.billed718 { background-color: var(--surface2); }
html:not(#_t7242a):not(#_t7242b) body thead th :is(button, .table-sort-head, .ui-sortable-column652, span) { background: transparent; box-shadow: none; border-color: transparent; }

/* 7. popups: the same header band and accent as the account card */
dialog { border-top: 4px solid var(--brand); }
.dialog-head, .dialog-header640, .modal-top { background: linear-gradient(135deg, var(--surface2), var(--surface)); }

/* 8. narrow places (home column, popups) and phone: the card follows its own width */
@container (max-width: 860px) {
  .c7242 > summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; }
  .c7242-meta, .c7242-mini { grid-column: 2 / -1; }
  .c7242-meta { display: flex; gap: 8px; align-items: baseline; }
  .c7242-body { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .c7242 > summary { grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; padding: 13px; }
  .c7242-state, .c7242-meta, .c7242-mini { grid-column: 2 / -1; }
  .c7242-body { grid-template-columns: 1fr; gap: 20px; padding: 14px; }
  .c7242-row { grid-template-columns: 1fr auto auto auto; }
  .c7242-row > span { grid-column: 1 / -1; grid-row: 1; }
  .c7242-row > code, .c7242-row:not(:has(.c7242-pw)) > code { grid-column: 1 / -1; grid-row: 2; }
  .c7242-row > .c7242-pwchange { grid-column: 2; grid-row: 3; }
  .c7242-row > .c7242-pw { grid-column: 3; grid-row: 3; }
  .c7242-row > .c7242-copy { grid-column: 4; grid-row: 3; }
  .c7242-acts .btn { flex: 1 1 100%; }
}

/* 9. tabs: one tab strip everywhere (folder tabs on a soft band; the active tab is
   raised and carries a rounded accent bar on its bottom edge, like the card accent) */
:is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px;
  margin: 0 0 16px; padding: 8px 10px 0;
  border: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface2); box-shadow: inset 0 -1px 0 var(--line);
}
:is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) > :is(button, a, [role="tab"]) {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; margin: 0 0 -1px; padding: 0 20px;
  border: 1px solid transparent; border-bottom: 0; border-radius: var(--r-md) var(--r-md) 0 0;
  background: transparent; color: var(--muted); box-shadow: none;
  font: 600 14px/1.2 var(--ax-font-body); text-decoration: none; cursor: pointer;
}
:is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) > :is(button, a, [role="tab"]):hover { color: var(--text); background: color-mix(in srgb, var(--surface) 55%, transparent); }
:is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) > :is([aria-pressed="true"], [aria-selected="true"], .active) {
  background: var(--surface); border-color: var(--line); color: var(--text);
}
:is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) > :is([aria-pressed="true"], [aria-selected="true"], .active) :is(span, svg) { color: var(--text); }
:is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) > :is([aria-pressed="true"], [aria-selected="true"], .active)::after {
  content: ""; position: absolute; inset-inline: 22%; bottom: 0; height: 2.5px; border-radius: 3px 3px 0 0; background: var(--brand);
}
:is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  :is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) { flex-wrap: wrap; overflow: visible; row-gap: 2px; }
  :is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) > :is(button, a, [role="tab"]) { flex: none; padding: 0 14px; }
}

/* 9b. tabs, final say: page stylesheets style these buttons with long selectors, so this
   block carries two id-weight :not() guards. Active tab: plain surface, dark text, square
   bottom corners resting on the line, and a thin rounded accent bar centred on its edge. */
html:not(#_t7242a):not(#_t7242b) body :is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; padding: 8px 10px 0; border: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface2); box-shadow: inset 0 -1px 0 var(--line); }
html:not(#_t7242a):not(#_t7242b) body :is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) > :is(button, a, [role="tab"]) { position: relative; min-height: 46px; margin: 0 0 -1px; padding: 0 20px; border: 1px solid transparent; border-bottom: 0; --ui-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0; background: transparent; color: var(--muted); box-shadow: none; font-weight: 600; }
html:not(#_t7242a):not(#_t7242b) body :is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) > :is([aria-pressed="true"], [aria-selected="true"], .active) { background: var(--surface); color: var(--text); border-color: var(--line); border-bottom: 0; font-weight: 700; }
html:not(#_t7242a):not(#_t7242b) body :is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) > :is([aria-pressed="true"], [aria-selected="true"], .active)::after { content: ""; position: absolute; inset-inline: 22%; bottom: 0; height: 2.5px; border-radius: 3px 3px 0 0; background: var(--brand); }
html:not(#_t7242a):not(#_t7242b) body :is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) > :is([aria-pressed="true"], [aria-selected="true"], .active) :is(span, svg) { color: inherit; }
html:not(#_t7242a):not(#_t7242b) body :is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) > :is([aria-pressed="true"], [aria-selected="true"], .active) svg { color: var(--muted); }
/* 7.2.50: a tab strip never scrolls; tabs that do not fit wrap to a second row */
html:not(#_t7242a):not(#_t7242b) body :is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) { overflow: visible; flex-wrap: wrap; }
@media (max-width: 640px) {
  html:not(#_t7242a):not(#_t7242b) body :is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) { flex-wrap: wrap; overflow: visible; row-gap: 2px; }
  html:not(#_t7242a):not(#_t7242b) body :is(.portal-sections611, .report-tabs, .customer-editor-tabs6314, .fw-tabs, .delta-tabs, .system-section-tabs, .builder-locale-tabs, .builder-side-tabs, .builder-tabs, #snTabs, .section-navigation, .ui-tabs, .font-filter-tabs) > :is(button, a, [role="tab"]) { flex: none; padding: 0 14px; }
}

/* 10. stat tiles: icons sit bare on the tile (no chip), the accent bar is on the
   reading-start edge (right in Persian), and in the usage summary the charged total,
   the figure that matters, comes last and spans the row */
html:not(#_t7242a):not(#_t7242b) body :is(.s7212-page-stat > svg, .stat-card .stat-icon, .metric .metric-icon, .m728-kpi .m728-kpi-icon, .m728-kpi > svg) { background: transparent; padding: 0; border-radius: 0; box-shadow: none; }
html:not(#_t7242a):not(#_t7242b) body .s7212-page-stat > svg { width: 28px; height: 28px; }
html:not(#_t7242a):not(#_t7242b) body :is(.stat-card, .metric, .m728-kpi, .s7212-page-stat) { border-width: 1px; border-inline-start: 4px solid var(--brand); }
html:not(#_t7242a):not(#_t7242b) body #accountUsageSummary > .billed718 { order: 99; grid-column: 1 / -1; }
@media (min-width: 1100px) {
  html:not(#_t7242a):not(#_t7242b) body #accountUsageSummary { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
  html:not(#_t7242a):not(#_t7242b) body #accountUsageSummary > span { flex-direction: column; justify-content: space-between; gap: 4px; min-height: 0; height: auto; padding: 9px 11px; font-size: 11px; line-height: 1.6; color: var(--muted); }
  html:not(#_t7242a):not(#_t7242b) body #accountUsageSummary > span b { font-size: 14px; color: var(--text); }
  html:not(#_t7242a):not(#_t7242b) body #accountUsageSummary > .billed718 { grid-column: auto; }
}

/* 10b. usage table: fits its frame on desktop (headers may wrap to two lines) so no column
   is cut off; the charged column keeps only its accent line, no lighter background */
@media (min-width: 1100px) {
  html:not(#_t7242a):not(#_t7242b) body table:has(#accountUsageBody) { width: 100%; table-layout: auto; }
  html:not(#_t7242a):not(#_t7242b) body table:has(#accountUsageBody) :is(th, td) { white-space: nowrap; padding-inline: 7px; line-height: 1.5; vertical-align: middle; }
  html:not(#_t7242a):not(#_t7242b) body table:has(#accountUsageBody) th { font-size: 11px; letter-spacing: -.1px; }
}
html:not(#_t7242a):not(#_t7242b) body table:has(#accountUsageBody) thead th.billed718 { background: var(--surface2); }

/* 6b. every list table fills its frame, so the header band reaches the rounded edges.
   No reserved scrollbar gutter: it left an empty strip beside the header (half-drawn band);
   frames that really scroll still show a thin scrollbar. */
html:not(#_t7242a):not(#_t7242b) body :is(.table-wrap, .table-scroll, .table-panel) > table { min-width: 100%; border-spacing: 0; }
html:not(#_t7242a):not(#_t7242b) body :is(.table-wrap, .table-scroll) { overflow: auto; scrollbar-gutter: auto; scrollbar-width: thin; border-radius: var(--r-lg); background: var(--surface); }
html:not(#_t7242a):not(#_t7242b) body :is(.table-wrap, .table-scroll) > table > thead > tr > th:first-child { border-start-start-radius: var(--r-lg); }
html:not(#_t7242a):not(#_t7242b) body :is(.table-wrap, .table-scroll) > table > thead > tr > th:last-child { border-start-end-radius: var(--r-lg); }

/* 6c. sort arrows stay out of the way: headers still sort on click, and only the column
   that is currently sorted shows its arrow */
html:not(#_t7242a):not(#_t7242b) body th:not([aria-sort="ascending"]):not([aria-sort="descending"]) :is(.ui-table-sort-indicator, .table-sort-icon) { display: none; }
html:not(#_t7242a):not(#_t7242b) body th:not([aria-sort="ascending"]):not([aria-sort="descending"]) > .ui-table-sort-indicator { display: none; }

/* 10c. admin home tiles: five in one row on desktop (users, accounts, representatives,
   services, tickets), all counted on the server */
@media (min-width: 1100px) { html:not(#_t7242a):not(#_t7242b) body .m729-overview-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* 6d. row actions in a table stay on one line, aligned to the row's end (left in Persian) */
html:not(#_t7242a):not(#_t7242b) body td > :is(.a218-ticket-actions, .table-actions-inline, .table-actions, .row-actions, .ticket-actions) { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
html:not(#_t7242a):not(#_t7242b) body td:has(> :is(.a218-ticket-actions, .table-actions-inline, .table-actions, .row-actions, .ticket-actions)) { white-space: nowrap; width: 1%; }

/* status chips in tables never break across two lines */
html:not(#_t7242a):not(#_t7242b) body td .status-chip { white-space: nowrap; }

/* 10d. dashboard rows share one column grid, so card edges line up from row to row:
   admin two equal columns in both rows; reseller three columns, with the newest
   accounts list spanning two under the account cards */
@media (min-width: 1100px) {
  html:not(#_t7242a):not(#_t7242b) body.admin611 #dashboard :is(.d7214-insights, .m729-overview-grid) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  html:not(#_t7242a):not(#_t7242b) body:not(.admin611) #overview .d7214-insights.d7214-three, html:not(#_t7242a):not(#_t7242b) body:not(.admin611) #overview .d7214-reseller-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  html:not(#_t7242a):not(#_t7242b) body:not(.admin611) #overview .d7214-reseller-lists > #resellerNewest7242 { grid-column: span 2; }
  html:not(#_t7242a):not(#_t7242b) body :is(.d7214-insights, .m729-overview-grid, .d7214-reseller-lists) > * { margin: 0; min-width: 0; }
}

/* 10e. account donut: room for six digits (555,555) inside the ring */
html:not(#_t7242a):not(#_t7242b) body .d7214-donut { width: 150px; height: 150px; flex: none; }
html:not(#_t7242a):not(#_t7242b) body .d7214-donut-label strong { font-size: 20px; line-height: 1.3; letter-spacing: -.3px; }
html:not(#_t7242a):not(#_t7242b) body .d7214-donut-label small { font-size: 11px; }
@media (max-width: 640px) { html:not(#_t7242a):not(#_t7242b) body .d7214-donut { width: 136px; height: 136px; } }

/* ===================================================================
   11. 7.2.42 refinements (approval round 2)
   =================================================================== */

/* 11a. account-status list beside the donut: straight dividers that run to the ring, one dot column */
html:not(#_t7242a):not(#_t7242b) body .d7214-health-chart { grid-template-columns: 150px minmax(0, 1fr); gap: 0; }
@media (max-width: 640px) { html:not(#_t7242a):not(#_t7242b) body .d7214-health-chart { grid-template-columns: 136px minmax(0, 1fr); } }
html:not(#_t7242a):not(#_t7242b) body .d7214-health-chart > .d7214-donut { margin: 0; }
html:not(#_t7242a):not(#_t7242b) body .d7214-legend > div { border-radius: 0; padding: 11px 4px 11px 4px; padding-inline-start: 22px; box-shadow: none; outline-offset: -2px; }
html:not(#_t7242a):not(#_t7242b) body .d7214-legend > div.d7232-link:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }
html:not(#_t7242a):not(#_t7242b) body .d7214-legend dt { font-size: 12.5px; gap: 9px; }
html:not(#_t7242a):not(#_t7242b) body .d7214-legend dt::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--brand); }
html:not(#_t7242a):not(#_t7242b) body .d7214-legend-active dt::before { background: var(--ok, #16a34a); }
html:not(#_t7242a):not(#_t7242b) body .d7214-legend-attention dt::before { background: var(--warn, #f59e0b); }
html:not(#_t7242a):not(#_t7242b) body .d7214-legend dd { font-size: 16px; min-width: 3ch; text-align: end; }

/* 11b. stat tiles: icon first, centred, with label and number stacked beside it */
html:not(#_t7242a):not(#_t7242b) body .s7212-page-stat { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
html[dir="rtl"]:not(#_t7242a):not(#_t7242b) body :is(.stat-card, .metric, .m728-kpi, .s7212-page-stat) { direction: rtl; }
html[dir="ltr"]:not(#_t7242a):not(#_t7242b) body :is(.stat-card, .metric, .m728-kpi, .s7212-page-stat) { direction: ltr; }
html:not(#_t7242a):not(#_t7242b) body .s7212-page-stat > svg { order: -1; flex: none; width: 26px; height: 26px; margin: 0; }
html:not(#_t7242a):not(#_t7242b) body .s7212-page-stat > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: start; }
html:not(#_t7242a):not(#_t7242b) body .s7212-page-stat > div > span { font-size: 12px; color: var(--muted); white-space: nowrap; }
html:not(#_t7242a):not(#_t7242b) body .s7212-page-stat > div > strong { font-size: 20px; line-height: 1.2; }

/* 11c. portal header: one quiet toolbar */
html:not(#_t7242a):not(#_t7242b) body .top .top-actions { display: flex; align-items: center; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--sh-1); }
html:not(#_t7242a):not(#_t7242b) body .top .top-actions > :is(.btn, a.btn, button.btn) { height: 38px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 11px; background: transparent; box-shadow: none; font-size: 13px; font-weight: 600; color: var(--text); }
html:not(#_t7242a):not(#_t7242b) body .top .top-actions > :is(.btn, .m728-head-link):hover { background: color-mix(in srgb, var(--brand) 8%, transparent); }
html:not(#_t7242a):not(#_t7242b) body .top .top-actions > .m728-head-link { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 11px; background: transparent; box-shadow: none; color: var(--text); }
html:not(#_t7242a):not(#_t7242b) body .top .top-actions > .m728-head-link svg { width: 19px; height: 19px; }
html:not(#_t7242a):not(#_t7242b) body .top .top-actions > .m728-user-chip { order: -1; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 6px 0 12px; border: 0; border-radius: 11px; background: color-mix(in srgb, var(--brand) 7%, transparent); box-shadow: none; }
html:not(#_t7242a):not(#_t7242b) body .top .top-actions > .m728-user-chip .avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; }
html:not(#_t7242a):not(#_t7242b) body .top .top-actions > .m728-user-chip .avatar svg { width: 16px; height: 16px; }
html:not(#_t7242a):not(#_t7242b) body .top .top-actions > .m728-user-chip strong { font-size: 13px; line-height: 1.2; }
html:not(#_t7242a):not(#_t7242b) body .top .top-actions > .m728-user-chip small { font-size: 11px; color: var(--muted); }
html:not(#_t7242a):not(#_t7242b) body .top .top-actions > .m728-user-chip + * { margin-inline-start: 4px; }
html:not(#_t7242a):not(#_t7242b) body .top .top-actions > .m728-head-link:first-of-type { margin-inline-start: 2px; }

/* 11d. ticket thread as a conversation: my messages on the start side, the other side's on the end side */
html:not(#_t7242a):not(#_t7242b) body :is(#ticketThread, #ticketAdminThread) { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface2); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; }
html:not(#_t7242a):not(#_t7242b) body .ticket-message { max-width: min(78%, 720px); margin: 0; padding: 10px 14px 9px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: none; }
html:not(#_t7242a):not(#_t7242b) body .ticket-message p { margin: 4px 0 0; white-space: pre-wrap; line-height: 1.85; font-size: 13px; }
html:not(#_t7242a):not(#_t7242b) body .ticket-message-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
html:not(#_t7242a):not(#_t7242b) body .ticket-message-head strong { font-size: 12px; }
html:not(#_t7242a):not(#_t7242b) body .ticket-message-head time { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
/* mine = sent by the signed-in user (portal: same user id; admin panel: staff messages) */
html:not(#_t7242a):not(#_t7242b) body .ticket-message.mine { align-self: flex-start; border-color: transparent; background: var(--brand); color: #fff; border-start-start-radius: 6px; }
html:not(#_t7242a):not(#_t7242b) body .ticket-message.mine :is(strong, time, p) { color: #fff; }
html:not(#_t7242a):not(#_t7242b) body .ticket-message.mine time { opacity: .8; }
html:not(#_t7242a):not(#_t7242b) body .ticket-message.theirs { align-self: flex-end; border-end-start-radius: 18px; border-start-end-radius: 6px; }

/* 11e. account management dialog: roomy on desktop */
@media (min-width: 1024px) {
  html:not(#_t7242a):not(#_t7242b) body #resellerCustomerDetails6312 { width: min(1080px, 92vw); max-width: none; }
  html:not(#_t7242a):not(#_t7242b) body .account-dialog716 { width: min(1080px, 92vw); max-width: none; }
}

/* 11f. login rows: the password row follows the page direction like the username row */
html:not(#_t7242a):not(#_t7242b) body .c7242-row:is(.password-reveal, .reseller-vpn-secret6312) { direction: inherit; }
html:not(#_t7242a):not(#_t7242b) body .c7242-row > code { direction: ltr; unicode-bidi: isolate; }

/* 11g. header user chip: role label first (start side), then the person's full name, on one line */
html:not(#_t7242a):not(#_t7242b) body .top .top-actions > .m728-user-chip .user-chip-copy { display: flex; flex-direction: row; align-items: center; gap: 8px; }
html:not(#_t7242a):not(#_t7242b) body .top .top-actions > .m728-user-chip .user-chip-copy small { order: -1; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); font-size: 11px; font-weight: 700; line-height: 1.6; }
html:not(#_t7242a):not(#_t7242b) body .top .top-actions > .m728-user-chip .user-chip-copy strong { white-space: nowrap; }

/* 11h. account management dialog (7.2.43): the expanded-card layout */
html:not(#_t7242a):not(#_t7242b) body .ad7243 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 22px; align-items: start; }
html:not(#_t7242a):not(#_t7242b) body .ad7243 h3 { margin: 0 0 12px; font-size: 14px; font-weight: 800; }
html:not(#_t7242a):not(#_t7242b) body .ad7243-login { display: grid; gap: 10px; }
html:not(#_t7242a):not(#_t7242b) body .ad7243-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed var(--line-strong, var(--line)); border-radius: var(--r-md); background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
html:not(#_t7242a):not(#_t7242b) body .ad7243-label { flex: 0 0 74px; color: var(--muted); font-size: 12px; font-weight: 700; }
html:not(#_t7242a):not(#_t7242b) body .ad7243-value { flex: 1 1 auto; min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: 600 14px var(--ax-font-mono, ui-monospace, monospace); direction: ltr; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:not(#_t7242a):not(#_t7242b) body .ad7243-row .btn { flex: none; min-height: 36px; height: 36px; padding: 0 14px; font-size: 12.5px; }
html:not(#_t7242a):not(#_t7242b) body .ad7243-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface2); color: var(--muted); font-size: 12px; }
html:not(#_t7242a):not(#_t7242b) body .ad7243-owner { color: var(--text); font-weight: 700; }
html:not(#_t7242a):not(#_t7242b) body .ad7243-usage .account-facts716 { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html:not(#_t7242a):not(#_t7242b) body .ad7243-usage .account-facts716 > div { grid-column: auto; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
html:not(#_t7242a):not(#_t7242b) body .ad7243-usage .account-facts716 > div:has(.account-traffic-bar, .traffic-bar, progress) { grid-column: 1 / -1; }
html:not(#_t7242a):not(#_t7242b) body .ad7243-usage .account-facts716 dt { font-size: 11.5px; color: var(--muted); }
html:not(#_t7242a):not(#_t7242b) body .ad7243-usage .account-facts716 dd { margin: 4px 0 0; font-size: 14px; font-weight: 700; }
html:not(#_t7242a):not(#_t7242b) body .ad7243-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
html:not(#_t7242a):not(#_t7242b) body .ad7243-actions .btn { min-height: 40px; padding: 0 16px; }
@media (max-width: 860px) { html:not(#_t7242a):not(#_t7242b) body .ad7243 { grid-template-columns: 1fr; } }

/* 11i. admin page load (7.2.44): hidden until the session check and first load finish (app.js bootReveal7244) */
html.ax-boot7244 { background: var(--bg, #f4f7fb); }
/* 7.2.48: opacity, not only visibility: the menu icons (.workspace-icon612) force
   visibility: visible !important and showed through; a child cannot undo its parent's opacity. */
html.ax-boot7244 body { visibility: hidden; opacity: 0 !important; pointer-events: none; }
html.ax-boot7244::after { content: ''; position: fixed; inset: 50% auto auto 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 3px solid color-mix(in srgb, var(--brand, #0b6bff) 20%, transparent); border-top-color: var(--brand, #0b6bff); border-radius: 50%; animation: axBoot7244 .8s linear infinite; }
@keyframes axBoot7244 { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html.ax-boot7244::after { animation-duration: 2.4s; } }

/* 11j. admin "service and credit" account box: name and service on top, the actions below in an
   even two-column grid (same size, nothing cut off); an odd last button takes the full row.
   The legacy button rule fixes font and padding with !important, so the grid gives them room. */
html:not(#_t7242a):not(#_t7242b) body .ui-sales-account > header { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
html:not(#_t7242a):not(#_t7242b) body .ui-sales-account > header > div:first-child { min-width: 0; }
html:not(#_t7242a):not(#_t7242b) body .ui-sales-account > header > div:first-child small { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:not(#_t7242a):not(#_t7242b) body .ui-sales-account .table-actions-inline { --ui-control: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; overflow: visible; padding: 0; margin: 0; }
html:not(#_t7242a):not(#_t7242b) body .ui-sales-account .table-actions-inline > :is(button, .btn, a) { width: 100%; min-width: 0; height: 40px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: none; }
html:not(#_t7242a):not(#_t7242b) body .ui-sales-account .table-actions-inline > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* 11k. ownership transfer row: the action button matches the fields' height and bottom line */
html:not(#_t7242a):not(#_t7242b) body .ownership-transfer-grid { align-items: end; }
html:not(#_t7242a):not(#_t7242b) body .ownership-transfer-grid :is(input, select) { height: 44px; min-height: 44px; box-sizing: border-box; }
html:not(#_t7242a):not(#_t7242b) body .ownership-transfer-action { align-self: end; height: 44px; min-height: 44px; margin: 0; padding: 0 18px; box-sizing: border-box; border-radius: var(--r-md); white-space: nowrap; }

/* 11l. admin user form, panel password: field, show and generate on one line; the hint sits small under the field.
   The legacy row is flex (row wrap, !important), so the hint takes its own line, indented under the field. */
html:not(#_t7242a):not(#_t7242b) body label:has(> #uGeneratePassword) > span:first-child { flex: 0 0 110px; }
html:not(#_t7242a):not(#_t7242b) body label:has(> #uGeneratePassword) > .ax-password-field { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; }
html:not(#_t7242a):not(#_t7242b) body label:has(> #uGeneratePassword) > .ax-password-field > input { flex: 1 1 auto; min-width: 0; height: 44px; box-sizing: border-box; }
html:not(#_t7242a):not(#_t7242b) body label:has(> #uGeneratePassword) :is(.ax-password-toggle, #uGeneratePassword) { flex: none; height: 44px; min-height: 44px; margin: 0; padding: 0 14px; box-sizing: border-box; border-radius: var(--r-md); font-size: 13px; white-space: nowrap; box-shadow: none; }
html:not(#_t7242a):not(#_t7242b) body label:has(> #uGeneratePassword) > small { flex: 0 0 100%; margin: -4px 0 0; padding-inline-start: calc(110px + 12px); font-size: 11px; font-weight: 500; color: var(--muted); box-sizing: border-box; }
/* 11m. resellers table, users column: two quiet lines, number then label, numbers in one column */
html:not(#_t7242a):not(#_t7242b) body #resellers .reseller-relation-stack { display: grid; grid-template-columns: max-content max-content; justify-content: start; column-gap: 6px; row-gap: 3px; align-items: baseline; }
html:not(#_t7242a):not(#_t7242b) body #resellers .reseller-stat-pill { display: contents; }
html:not(#_t7242a):not(#_t7242b) body #resellers .reseller-stat-pill b { display: block; min-width: 2.2ch; padding: 0; border-radius: 0; background: none; font-size: 14px; font-weight: 800; line-height: 1.5; text-align: end; font-variant-numeric: tabular-nums; }
html:not(#_t7242a):not(#_t7242b) body #resellers .reseller-stat-pill span { font-size: 12px; color: var(--muted); opacity: 1; line-height: 1.5; white-space: nowrap; }

/* 11n. table row actions everywhere: one height, centred on one line; icon-only buttons are square */
html:not(#_t7242a):not(#_t7242b) body td :is(button, a.btn, .btn) { box-sizing: border-box; min-height: 32px; height: 32px; margin-block: 0; padding-block: 0; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; line-height: 1; border-radius: 9px; font-size: 12px; white-space: nowrap; }
html:not(#_t7242a):not(#_t7242b) body td :is(button, a.btn, .btn):has(> svg:only-child) { width: 32px; min-width: 32px; padding-inline: 0; }
html:not(#_t7242a):not(#_t7242b) body td :is(button, a.btn, .btn) > svg { width: 16px; height: 16px; }
html:not(#_t7242a):not(#_t7242b) body td:has(> :is(button, .btn) + :is(button, .btn)) { white-space: nowrap; }
html:not(#_t7242a):not(#_t7242b) body td > :is(button, .btn) + :is(button, .btn) { margin-inline-start: 6px; }

/* 11o. downloads / files editor: a two-line card with even padding.
   Line 1: reorder handle, Persian and English name, remove. Line 2 (under the names): version and upload, or the link address.
   The reorder handle lives inside .training-file-labels721 (training715.js attachTrainingOrder). */
html:not(#_t7242a):not(#_t7242b) body .training-file-table-head { display: none; }
html:not(#_t7242a):not(#_t7242b) body .training-file-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px; column-gap: 12px; row-gap: 12px; align-items: end; padding: 16px; }
html:not(#_t7242a):not(#_t7242b) body .training-file-row .training-file-labels721 { grid-column: 1 / 3; grid-row: 1; display: grid; grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; align-items: end; }
html:not(#_t7242a):not(#_t7242b) body .training-file-row .training-file-remove { grid-column: 3; grid-row: 1; align-self: end; }
html:not(#_t7242a):not(#_t7242b) body .training-file-row .training-file-version-field { grid-column: 1; grid-row: 2; padding-inline-start: 54px; box-sizing: border-box; min-width: 0; }
html:not(#_t7242a):not(#_t7242b) body .training-file-row .training-file-upload-field { grid-column: 2 / 4; grid-row: 2; display: flex; align-items: center; gap: 12px; min-height: 42px; }
html:not(#_t7242a):not(#_t7242b) body .training-file-row .training-link-address { grid-column: 1 / 3; grid-row: 2; padding-inline-start: 54px; box-sizing: border-box; min-width: 0; }
html:not(#_t7242a):not(#_t7242b) body .training-file-row .training-file-status { grid-column: 1 / -1; grid-row: 3; margin: -4px 0 0; padding-inline-start: 54px; font-size: 11px; color: var(--muted); }
html:not(#_t7242a):not(#_t7242b) body .training-file-row .training-file-status:empty { display: none; }
html:not(#_t7242a):not(#_t7242b) body .training-file-row :is(.training-file-field, .training-link-address, .training-file-labels721 > label) { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-block: 0; }
html:not(#_t7242a):not(#_t7242b) body .training-file-row :is(.training-file-field, .training-link-address, .training-file-labels721 > label) > span,
html:not(#_t7242a):not(#_t7242b) body .training-file-row .training-file-mobile-label { display: block; margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
html:not(#_t7242a):not(#_t7242b) body .training-file-row :is(input:not([type="file"]), select) { width: 100%; height: 42px; min-height: 42px; box-sizing: border-box; font-size: 13px; }
html:not(#_t7242a):not(#_t7242b) body .training-file-row :is(button, .training-file-upload) { height: 42px; min-height: 42px; box-sizing: border-box; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; border-radius: var(--r-md); font-size: 13px; white-space: nowrap; box-shadow: none; }
html:not(#_t7242a):not(#_t7242b) body .training-file-row :is(.training-file-remove, .training-file-labels721 > button) { width: 42px; min-width: 42px; padding: 0; }
html:not(#_t7242a):not(#_t7242b) body .training-file-row .training-file-preview { font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) {
  html:not(#_t7242a):not(#_t7242b) body .training-file-row { grid-template-columns: minmax(0, 1fr) 42px; }
  html:not(#_t7242a):not(#_t7242b) body .training-file-row .training-file-labels721 { grid-column: 1; grid-template-columns: 42px minmax(0, 1fr); row-gap: 10px; }
  html:not(#_t7242a):not(#_t7242b) body .training-file-row .training-file-labels721 > label:last-child { grid-column: 2; }
  html:not(#_t7242a):not(#_t7242b) body .training-file-row :is(.training-file-version-field, .training-link-address) { grid-column: 1 / -1; grid-row: 2; margin-inline-start: 0; }
  html:not(#_t7242a):not(#_t7242b) body .training-file-row .training-file-upload-field { grid-column: 1 / -1; grid-row: 3; }
  html:not(#_t7242a):not(#_t7242b) body .training-file-row .training-file-status { grid-row: 4; padding-inline-start: 0; }
}

/* 11p. sortable table headers: same colour and weight as plain headers (the wallet list showed them washed out) */
html:not(#_t7242a):not(#_t7242b) body thead th :is(button, [role="button"], .table-sort, .sort-button) { color: inherit; opacity: 1; font: inherit; background: transparent; border: 0; box-shadow: none; padding: 0; }
html:not(#_t7242a):not(#_t7242b) body thead th { color: var(--muted); }

html:not(#_t7242a):not(#_t7242b) body .table-sort-head span:not(.table-sort-icon) { opacity: 1; font-size: inherit; }
html:not(#_t7242a):not(#_t7242b) body #billing .aw218-table col.aw218-currency-col { width: 92px; }

/* 11q. wallet list owner cell: name (company) on the first line, panel username and mobile under it */
html:not(#_t7242a):not(#_t7242b) body .aw218-owner { display: flex; align-items: center; gap: 10px; min-width: 0; }
html:not(#_t7242a):not(#_t7242b) body .aw218-owner > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html:not(#_t7242a):not(#_t7242b) body .aw218-owner strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
html:not(#_t7242a):not(#_t7242b) body .aw218-owner bdi { font-size: 11.5px; color: var(--muted); white-space: nowrap; text-align: start; }
html:not(#_t7242a):not(#_t7242b) body .training-file-row .training-file-labels721 > button { grid-column: 1; grid-row: 1; align-self: end; }
html:not(#_t7242a):not(#_t7242b) body thead th :is(button, .table-sort-head) span:not(.table-sort-icon) { color: inherit; }
html:not(#_t7242a):not(#_t7242b) body thead th { white-space: nowrap; }

/* 11r. finance tables (payments, credit ledger): compact reference and status so the service name fits without side scrolling */
html:not(#_t7242a):not(#_t7242b) body .ledger-ref7244 { white-space: nowrap; font-size: 12px; }
html:not(#_t7242a):not(#_t7242b) body .ledger-ref7244 > span { color: var(--muted); margin-inline-end: 6px; }
html:not(#_t7242a):not(#_t7242b) body .ledger-ref7244 > bdi { font-size: 11.5px; }
html:not(#_t7242a):not(#_t7242b) body #paymentTransactionsBody td:nth-child(8) .mono { display: inline-block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-size: 11.5px; direction: ltr; }
html:not(#_t7242a):not(#_t7242b) body #paymentTransactionsBody td:nth-child(6),
html:not(#_t7242a):not(#_t7242b) body #paymentTransactionsBody td:nth-child(7) { width: 1%; white-space: nowrap; }
html:not(#_t7242a):not(#_t7242b) body #paymentTransactionsBody td:nth-child(3) { min-width: 260px; }
html:not(#_t7242a):not(#_t7242b) body #paymentTransactionsBody td:nth-child(4) { white-space: nowrap; }
html:not(#_t7242a):not(#_t7242b) body :is(#paymentTransactionsBody, #billingLedgerBody) td { padding-inline: 10px; }
html:not(#_t7242a):not(#_t7242b) body thead th :is(button, .table-sort-head) { font-size: inherit; font-weight: inherit; -webkit-text-fill-color: currentColor; }
html:not(#_t7242a):not(#_t7242b) body thead th :is(button, .table-sort-head) span { -webkit-text-fill-color: currentColor; }
html:not(#_t7242a):not(#_t7242b) body .form-grid.two:has(#uGeneratePassword) { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
html:not(#_t7242a):not(#_t7242b) body label:has(> #uGeneratePassword) > .ax-password-field { min-width: 180px; }

/* 11s. pagers under a table: one frame — square where they meet, rounded only at the outer bottom */
html:not(#_t7242a):not(#_t7242b) body :is(.table-scroll, .aw218-scroll, .table-wrap):has(+ :is(.table-pager, .auto-table-pager)) { border-end-start-radius: 0; border-end-end-radius: 0; margin-bottom: 0; }
html:not(#_t7242a):not(#_t7242b) body :is(.table-scroll, .aw218-scroll, .table-wrap) + :is(.table-pager, .auto-table-pager) { margin-top: 0; border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: var(--r-lg); border-end-end-radius: var(--r-lg); }

/* 11t. unstable connections toolbar: fields and buttons on one baseline, same height */
html:not(#_t7242a):not(#_t7242b) body .unstable-panel7231 .panel-head-actions { align-items: flex-end; gap: 10px; }
html:not(#_t7242a):not(#_t7242b) body .unstable-panel7231 .panel-head-actions label { margin: 0; }
html:not(#_t7242a):not(#_t7242b) body .unstable-panel7231 .panel-head-actions :is(select, input, button) { box-sizing: border-box; height: 44px; min-height: 44px; margin: 0; }
html:not(#_t7242a):not(#_t7242b) body .unstable-panel7231 .panel-head-actions button { display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; white-space: nowrap; }

/* 11u. reports tiles: label and number only (the hint repeated the label and was cut off) */
html:not(#_t7242a):not(#_t7242b) body #reports .reports-metric { height: auto; min-height: 0; }
html:not(#_t7242a):not(#_t7242b) body #reports .reports-metric > small { display: none; }

/* 11v. user lists (admin and reseller): opening a user's accounts must not move the columns.
   The inner account list does not size the outer table; it scrolls inside its own frame. */
html:not(#_t7242a):not(#_t7242b) body .account-detail718 > .account-list715 { contain: inline-size; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: auto; }

/* 11w. admin lists fit their frame on desktop (7.2.49): the last row action was hidden past the frame
   edge in Users, RADIUS accounts and VISPs. The old minimum widths now read --ax-table-min7249
   (admin-app.css); phones and touch screens keep the old minimum and scroll sideways. */
@media (min-width: 821px) and (pointer: fine) {
  /* users: the name column takes what is left; the actions column has a fixed width */
  html:not(#_t7242a):not(#_t7242b) body #users table.m7213-users-table { --ax-table-min7249: 1060px; --u7213-status: 76px; }
  html:not(#_t7242a):not(#_t7242b) body #users table.m7213-users-table > thead > tr > th:nth-child(1) { width: auto; }
  html:not(#_t7242a):not(#_t7242b) body #users table.m7213-users-table > thead > tr > th:nth-child(7) { width: 414px; }
  html:not(#_t7242a):not(#_t7242b) body #usersBody > tr > td:last-child { padding-inline: 6px; }
  /* RADIUS accounts: one line for the connection header */
  html:not(#_t7242a):not(#_t7242b) body #subscriptions table.a7214-accounts { --ax-table-min7249: 1060px; }
  html:not(#_t7242a):not(#_t7242b) body #subscriptions table.a7214-accounts > thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 821px) and (max-width: 1419px) and (pointer: fine) {
  /* narrower desktops: "service and credit" shows its icon only (the name stays in the tooltip) */
  html:not(#_t7242a):not(#_t7242b) body #users table.m7213-users-table { --ax-table-min7249: 940px; --u7249-labeled: 30px; }
  html:not(#_t7242a):not(#_t7242b) body #users table.m7213-users-table > thead > tr > th:nth-child(7) { width: 336px; }
  html:not(#_t7242a):not(#_t7242b) body #usersBody .m7213-action-label { display: none; }
  html:not(#_t7242a):not(#_t7242b) body #subscriptions table.a7214-accounts { --ax-table-min7249: 940px; }
}
/* VISPs: the actions column is wide enough for its four buttons */
html:not(#_t7242a):not(#_t7242b) body .visp-table > thead th:last-child { width: 290px; }

/* 11x. phone bottom bar (7.2.49, design-system.js): four sections and «بیشتر», each an equal share
   of the bar, one-line labels. «بیشتر» opens a sheet with every section. */
@media (max-width: 820px) {
  html:not(#_t7242a):not(#_t7242b) body :is(aside.sidebar, aside.side) :is(nav.nav-group, nav.side-nav) { display: contents; }
  html:not(#_t7242a):not(#_t7242b) body :is(aside.sidebar, aside.side) > :is(.nav-group-label, .side-label, .side-user, .spacer, .side-bottom) { display: none; }
  html:not(#_t7242a):not(#_t7242b) body :is(aside.sidebar, aside.side) { overflow: hidden; justify-content: stretch; gap: 4px; }
  html:not(#_t7242a):not(#_t7242b) body :is(aside.sidebar, aside.side) { --navbar-flex7249: 1 1 0; --navbar-w7249: auto; --navbar-min7249: 0px; --navbar-max7249: none; }
  html:not(#_t7242a):not(#_t7242b) body :is(aside.sidebar, aside.side) :is(nav > .nav[data-view], nav > .nav-submenu-wrap, .navmore7249) { flex: 1 1 0; min-width: 0; width: auto; max-width: none; }
  html:not(#_t7242a):not(#_t7242b) body :is(aside.sidebar, aside.side) :is(.nav[data-view], .navmore7249) span:not(.nav-icon):not(.nav-ico) { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.4; }
  html:not(#_t7242a):not(#_t7242b) body :is(aside.sidebar, aside.side) .nav[data-view] { padding-block: 4px; }
  html:not(#_t7242a):not(#_t7242b) body :is(aside.sidebar, aside.side) .nav[data-short7249] > span:not(.nav-icon):not(.nav-ico) { display: none; }
  html:not(#_t7242a):not(#_t7242b) body :is(aside.sidebar, aside.side) .nav[data-short7249]::after { content: attr(data-short7249); display: block; flex: 0 0 auto; position: static; inset: auto; width: auto; height: auto; min-height: 0; max-height: none; background: none; border: 0; transform: none; max-width: none; overflow: visible; white-space: nowrap; font-size: 11px; line-height: 1.4; }
  html:not(#_t7242a):not(#_t7242b) body .navmore7249 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 6px 2px; border: 0; border-radius: 12px; background: transparent; color: #c9d7e9; font: inherit; font-weight: 700; cursor: pointer; }
  html:not(#_t7242a):not(#_t7242b) body .navmore7249[hidden] { display: none; }
  html:not(#_t7242a):not(#_t7242b) body .navmore7249 > svg { width: 22px; height: 22px; }
  html:not(#_t7242a):not(#_t7242b) body .navmore7249:is(.active, [aria-expanded="true"]) { background: var(--brand); color: #fff; }
}
/* the sheet: rises from the bar, every section as an icon tile, three to a row */
.navsheet7249 { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: flex-end; background: rgba(9, 16, 30, .45); }
.navsheet7249[hidden] { display: none; }
.navsheet7249-panel { box-sizing: border-box; width: 100%; max-height: 78vh; overflow: auto; padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: var(--surface-solid); color: var(--text); box-shadow: 0 -10px 30px rgba(9, 16, 30, .18); }
.navsheet7249-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 15px; }
.navsheet7249-close { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface2); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; }
.navsheet7249-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.navsheet7249-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-height: 84px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface2); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; line-height: 1.45; text-align: center; cursor: pointer; }
.navsheet7249-item.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.navsheet7249-item :is(.nav-icon, .nav-ico) { display: grid; place-items: center; width: 34px; height: 34px; }
.navsheet7249-item :is(.nav-icon, .nav-ico) img { width: 26px; height: 26px; }

/* 11y. SafeNET support page (portal, 7.2.50): a clear way back to the panel, at the end of the header */
.sn-standalone > header .sn-back7250 { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700; text-decoration: none; }
.sn-standalone > header .sn-back7250:hover { border-color: var(--brand); color: var(--brand); }
.sn-standalone > header .sn-back7250 svg { width: 16px; height: 16px; }
/* the customer's name under the account in the SafeNET ticket list */
.sn-ticket-name7250 { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }

/* 11z. website connector (admin, 7.2.53): a website with no VISP for its customers is shown in red */
.site-visp-missing7253 { color: var(--danger); font-weight: 700; }

/* 12. reseller panel (7.2.54)
   a. the user's name once: the header chip (it opens the account settings); no sidebar card, no
      «پنل name» line over the page title
   b. one «خروج» and one «وب‌سایت»: in the sidebar on desktop, in the header on phones
   c. home: «وضعیت حساب‌ها» beside «تمدید سریع» (credit is in the tiles above)
   d. customers list: «مشاهده», «مدیریت» and a ⋯ menu
   e. «حساب‌های جدید»: a row is a button, so its text was centred; it starts at the row start */
html:not(#_t7242a):not(#_t7242b) body.portal611 header.top .eyebrow { display: none; }
@media (min-width: 821px) {
  html:not(#_t7242a):not(#_t7242b) body.portal611 aside.side > .side-user { display: none; }
  html:not(#_t7242a):not(#_t7242b) body.portal611 header.top .portal-mobile-action { display: none !important; }
}
/* c. home */
@media (min-width: 1100px) {
  html:not(#_t7242a):not(#_t7242b) body:not(.admin611) #overview .d7214-insights.d7254-reseller { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 16px; align-items: stretch; }
}
html:not(#_t7242a):not(#_t7242b) body .quick-renew-btn7254 { background: var(--warning); border-color: var(--warning); color: #fff; font-weight: 800; }
html:not(#_t7242a):not(#_t7242b) body .quick-renew-btn7254:hover { background: color-mix(in srgb, var(--warning) 86%, #000); }
html:not(#_t7242a):not(#_t7242b) body .d7254-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 2px 0 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface2); }
html:not(#_t7242a):not(#_t7242b) body .d7254-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
html:not(#_t7242a):not(#_t7242b) body .d7254-tab b { min-width: 22px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--muted); font-size: 11px; text-align: center; }
html:not(#_t7242a):not(#_t7242b) body .d7254-tab[aria-selected="true"] { background: var(--surface-solid); color: var(--text); box-shadow: var(--sh-1); }
html:not(#_t7242a):not(#_t7242b) body .d7254-tab[aria-selected="true"] b { background: var(--brand); color: #fff; }
html:not(#_t7242a):not(#_t7242b) body .d7254-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
html:not(#_t7242a):not(#_t7242b) body .d7254-list { gap: 0; }
html:not(#_t7242a):not(#_t7242b) body .d7254-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
html:not(#_t7242a):not(#_t7242b) body .d7254-row:last-of-type { border-bottom: 0; }
html:not(#_t7242a):not(#_t7242b) body .d7254-open { flex: 1; min-width: 0; min-height: 0; height: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 3px; box-shadow: none; padding: 4px; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
html:not(#_t7242a):not(#_t7242b) body .d7254-open:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
html:not(#_t7242a):not(#_t7242b) body .d7254-open:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
html:not(#_t7242a):not(#_t7242b) body .d7254-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
html:not(#_t7242a):not(#_t7242b) body .d7254-side .d7214-badge { font-size: 12px; font-weight: 750; padding: 4px 10px; white-space: nowrap; }
html:not(#_t7242a):not(#_t7242b) body .d7254-renew { flex: none; min-height: 34px; padding: 0 16px; border-radius: var(--r-sm); font-weight: 800; }
html:not(#_t7242a):not(#_t7242b) body .d7254-quick.d7254-flash { animation: d7254-flash 1.4s ease-out; }
@keyframes d7254-flash { 0%, 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 55%, transparent); } 100% { box-shadow: var(--sh-1); } }
@media (prefers-reduced-motion: reduce) { html:not(#_t7242a):not(#_t7242b) body .d7254-quick.d7254-flash { animation: none; } }
@media (max-width: 640px) {
  html:not(#_t7242a):not(#_t7242b) body .d7254-row { flex-wrap: wrap; }
  html:not(#_t7242a):not(#_t7242b) body .d7254-open { flex-basis: 100%; }
  html:not(#_t7242a):not(#_t7242b) body .d7254-side { flex-direction: row; align-items: center; margin-inline-end: auto; }
}
/* d. customers list */
html:not(#_t7242a):not(#_t7242b) body .customer-row-actions7254 { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }
html:not(#_t7242a):not(#_t7242b) body .customer-row-actions7254 > .btn { min-height: 34px; padding: 0 14px; white-space: nowrap; }
html:not(#_t7242a):not(#_t7242b) body .row-more7254 { position: relative; flex: none; }
html:not(#_t7242a):not(#_t7242b) body .row-more-toggle7254.btn { width: 34px; min-width: 34px; min-height: 34px; padding: 0; font-size: 18px; line-height: 1; letter-spacing: 1px; }
html:not(#_t7242a):not(#_t7242b) body .row-more-menu7254 { z-index: 2147482000; min-width: 190px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-solid); box-shadow: 0 14px 34px rgba(9, 16, 30, .18); }
html:not(#_t7242a):not(#_t7242b) body .row-more-menu7254[hidden] { display: none; }
html:not(#_t7242a):not(#_t7242b) body .row-more-menu7254 > button { display: block; width: 100%; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 650; text-align: start; cursor: pointer; }
html:not(#_t7242a):not(#_t7242b) body .row-more-menu7254 > button:hover:not([disabled]), html:not(#_t7242a):not(#_t7242b) body .row-more-menu7254 > button:focus-visible { background: var(--surface2); outline: none; }
html:not(#_t7242a):not(#_t7242b) body .row-more-menu7254 > button.danger { color: var(--danger); }
html:not(#_t7242a):not(#_t7242b) body .row-more-menu7254 .row-more-note7254 { display: block; margin-top: -4px; padding-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.4; }
html:not(#_t7242a):not(#_t7242b) body .row-more-menu7254 > button[disabled] { opacity: .45; cursor: not-allowed; }
/* e. newest accounts */
html:not(#_t7242a):not(#_t7242b) body button.d7242-newest-row { width: 100%; font: inherit; color: inherit; text-align: start; }
html:not(#_t7242a):not(#_t7242b) body button.d7242-newest-row > div { align-items: flex-start; }
html:not(#_t7242a):not(#_t7242b) body button.d7242-newest-row > div > small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 13. account dialogs (7.2.56)
   a. the dialog keeps its inner space (a dialog reset had set it to 0, so text touched the edge)
   b. traffic purchase: two pay buttons side by side, customer wallet and reseller credit */
html:not(#_t7242a):not(#_t7242b) body dialog.account-dialog716 { padding: clamp(16px, 3vw, 28px); }
html:not(#_t7242a):not(#_t7242b) body .traffic-pay7256 { display: flex; flex-wrap: wrap; gap: 8px; }
html:not(#_t7242a):not(#_t7242b) body .traffic-pay7256 > .btn { flex: 1 1 180px; }