/* =====================================================================
   EstaheHub — Enhancement layer (Wave 1: design foundation)
   Additive stylesheet loaded AFTER styles.css. Equal-specificity rules
   win by source order, so this upgrades the look without touching the
   12.5k-line base. Scope: design tokens, console shell, KPI cards, data
   tables, toolbars, badges, charts, and staff-shell mobile adaptivity.
   ===================================================================== */

/* ---------- 1. Design tokens ---------------------------------------- */
:root {
  /* Refined accent + semantic palette */
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-soft: #eaf1ff;
  --accent-ring: rgba(37, 99, 235, 0.16);
  --success: #12855a;
  --success-soft: #e5f6ee;
  --warning: #b45309;
  --warning-soft: #fdf1de;
  --danger: #dc2626;
  --danger-soft: #fdeaea;
  --info: #0e7490;
  --info-soft: #e3f5f9;

  /* Neutral surfaces */
  --ink: #131722;
  --ink-2: #3b4354;
  --muted: #6b7280;
  --line: #e3e7ee;
  --line-strong: #d3d9e3;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --soft: #f3f5f9;
  --soft-2: #e9edf4;
  --canvas: #f1f4f9;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Radius scale */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(19, 23, 34, 0.06);
  --shadow-sm: 0 2px 8px rgba(19, 23, 34, 0.07);
  --shadow-md: 0 10px 28px rgba(19, 23, 34, 0.10);
  --shadow-lg: 0 24px 60px rgba(19, 23, 34, 0.16);
}

/* ---------- 2. Console shell (admin / moderator / account) ---------- */
.account-shell {
  gap: var(--sp-5);
}

.account-shell.staff-shell {
  grid-template-columns: minmax(232px, 268px) minmax(0, 1fr);
}

/* Sidebar → refined navigation rail */
.account-sidebar {
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-color: var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.account-sidebar-head strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.account-menu-group > span {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.09em;
}

.account-menu-item {
  position: relative;
  min-height: 50px;
  padding: 9px 11px 9px 13px;
  border-radius: var(--r-sm);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.account-menu-item::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 3px;
  height: 0;
  transform: translateY(-50%);
  border-radius: 3px;
  background: var(--accent);
  transition: height 0.18s ease;
}
.account-menu-item:hover,
.account-menu-item:focus-visible {
  background: var(--surface-2);
  border-color: var(--line);
}
.account-menu-item.active {
  background: var(--accent-soft);
  border-color: transparent;
}
.account-menu-item.active::before { height: 22px; }
.account-menu-item.active strong { color: var(--accent-strong); }
.account-menu-item strong { font-size: 13px; font-weight: 700; }
.account-menu-item small { color: var(--muted); font-size: 11px; }

/* Content column gets an app-canvas feel */
.account-content { gap: var(--sp-5); }

/* Panels → softer premium cards */
.workspace-panel,
.account-block,
.staff-panel,
.admin-chart-panel {
  border-color: var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.workspace-panel { padding: var(--sp-5); gap: var(--sp-4); }

/* Section header inside panels */
.workspace-panel-header,
.admin-block-head,
.admin-chart-head {
  align-items: center;
}
.workspace-panel h2 { font-size: 19px; letter-spacing: -0.015em; }
.workspace-panel h3,
.admin-block-head h3,
.admin-chart-head h3 { font-size: 15px; letter-spacing: -0.01em; }

/* ---------- 3. KPI stat cards --------------------------------------- */
/* Make the metric grid fluid so it always fills the width and wraps. */
.metric-grid,
.metric-grid.three,
.metric-grid.four {
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: var(--sp-3);
}

/* Seller "Мои объявления" summary: keep the 4 stat plates as a fixed 2-column grid
   at every viewport (overrides the fluid auto-fit rule above and the base media rules). */
.seller-listings-summary .metric-grid,
.seller-listings-summary .metric-grid.four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric {
  position: relative;
  display: grid;
  gap: 3px;
  align-content: start;
  min-height: 84px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow 0.16s ease, transform 0.06s ease, border-color 0.16s ease;
}
.metric::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--accent), var(--accent-strong));
  opacity: 0.85;
}
.metric:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.metric strong {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.metric span {
  order: -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Tone variants (opt-in via extra class on .metric) */
.metric.tone-success::after { background: linear-gradient(var(--success), #0c6b48); }
.metric.tone-warning::after { background: linear-gradient(var(--warning), #92400e); }
.metric.tone-danger::after  { background: linear-gradient(var(--danger), #b91c1c); }
.metric.tone-info::after    { background: linear-gradient(var(--info), #0b5f74); }
.metric.tone-neutral::after { background: var(--line-strong); }

/* Delta / trend chip (used by upgraded metric markup, Wave 2) */
.metric-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  padding: 2px 7px;
  width: max-content;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.metric-delta.up { color: var(--success); background: var(--success-soft); }
.metric-delta.down { color: var(--danger); background: var(--danger-soft); }
.metric-delta.flat { color: var(--muted); background: var(--soft); }
.metric-spark { margin-top: 6px; }
.metric-spark svg { display: block; width: 100%; height: 34px; overflow: visible; }

/* ---------- 4. Badges / chips / pills ------------------------------- */
.eh-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.eh-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.eh-badge.na::before { display: none; }
.eh-badge.ok { color: var(--success); background: var(--success-soft); }
.eh-badge.warn { color: var(--warning); background: var(--warning-soft); }
.eh-badge.bad { color: var(--danger); background: var(--danger-soft); }
.eh-badge.info { color: var(--info); background: var(--info-soft); }
.eh-badge.accent { color: var(--accent-strong); background: var(--accent-soft); }
.eh-badge.muted { color: var(--ink-2); background: var(--soft-2); }

/* ---------- 5. Data table ------------------------------------------- */
.data-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 14px;
  text-align: left;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table thead th.sortable { cursor: pointer; user-select: none; }
.data-table thead th.sortable:hover { color: var(--ink); }
.data-table thead th .sort-caret { opacity: 0.4; margin-left: 4px; }
.data-table thead th.sorted .sort-caret { opacity: 1; color: var(--accent); }
.data-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.12s ease; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table tbody tr.clickable { cursor: pointer; }
.data-table td .cell-main { color: var(--ink); font-weight: 700; }
.data-table td .cell-sub { color: var(--muted); font-size: 11.5px; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Pagination footer */
.eh-pager {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  justify-content: space-between;
  padding: 4px 2px;
  color: var(--muted);
  font-size: 12.5px;
}
.eh-pager .pager-btns { display: inline-flex; gap: 6px; }
.eh-pager button {
  min-width: 34px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.eh-pager button:hover:not(:disabled) { background: var(--surface-2); border-color: var(--accent); color: var(--accent-strong); }
.eh-pager button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.eh-pager button:disabled { opacity: 0.45; cursor: default; }

/* ---------- 6. Toolbar / segmented controls ------------------------- */
.eh-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.eh-toolbar .spacer { flex: 1 1 auto; }

.staff-filter-tabs button,
.admin-chart-tabs button {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 12.5px;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.staff-filter-tabs button:hover,
.admin-chart-tabs button:hover { border-color: var(--accent); color: var(--accent-strong); }
.staff-filter-tabs button.active,
.admin-chart-tabs button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---------- 7. Chart surfaces --------------------------------------- */
.admin-chart-panel { background: var(--surface); padding: var(--sp-5); gap: var(--sp-4); }
.admin-chart-totals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}
.admin-chart-total {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}
.admin-chart-total i { width: 9px; height: 9px; border-radius: 3px; align-self: center; }
.admin-chart-total span { color: var(--muted); font-size: 12px; font-weight: 600; }
.admin-chart-total strong { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.eh-chart {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-4);
  box-shadow: var(--shadow-xs);
}
.eh-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.eh-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: var(--sp-3);
  font-size: 12px;
  color: var(--ink-2);
}
.eh-chart-legend span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.eh-chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.eh-chart .grid line { stroke: var(--line); stroke-width: 1; }
.eh-chart text { fill: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.eh-chart .series-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.eh-chart .series-dot { stroke: #fff; stroke-width: 1.5; }
.eh-chart .hoverable:hover .series-dot { r: 4.5; }

/* ---------- 8. Empty states & skeletons ----------------------------- */
.eh-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.eh-empty .eh-empty-icon { font-size: 26px; opacity: 0.6; }
.eh-empty strong { color: var(--ink-2); font-size: 14px; }

.eh-skeleton {
  border-radius: 8px;
  background: linear-gradient(100deg, var(--soft) 30%, var(--soft-2) 50%, var(--soft) 70%);
  background-size: 200% 100%;
  animation: eh-shimmer 1.2s ease-in-out infinite;
}
@keyframes eh-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .eh-skeleton { animation: none; } }

/* ---------- 9. Section header / page title -------------------------- */
.eh-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3) var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.eh-page-head .titles { display: grid; gap: 3px; }
.eh-page-head h2 { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.eh-page-head .sub { color: var(--muted); font-size: 12.5px; }
.eh-page-head .actions { margin-left: auto; display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ---------- 10. Staff-shell MOBILE adaptivity ----------------------- */
/* The base stylesheet excludes .staff-shell from the mobile drawer flow
   (:not(.staff-shell)). Add explicit rules so admin/moderator collapse
   gracefully on phones instead of a crushed 230px rail. */
@media (max-width: 900px) {
  .account-shell.staff-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--sp-3);
  }
  /* Compact single-row chip bar instead of a tall 6-group rail.
     Non-sticky on mobile to avoid overlapping panel content. */
  .account-shell.staff-shell .account-sidebar {
    position: static !important;
    z-index: 5;
    display: flex !important;
    flex-flow: row nowrap;
    align-items: center;
    gap: 6px;
    height: 58px;
    min-height: 58px;
    max-height: 58px;
    padding: 8px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-shadow: var(--shadow-sm);
    border-radius: var(--r-md);
  }
  .account-shell.staff-shell .account-sidebar::-webkit-scrollbar { display: none; }
  .staff-shell .account-sidebar-head { display: none; }
  .staff-shell .account-menu-group { display: contents; }
  .staff-shell .account-menu-group > span {
    align-self: center;
    flex: 0 0 auto;
    margin: 0 2px 0 6px;
    padding-left: 8px;
    border-left: 1px solid var(--line);
    color: var(--muted);
    font-size: 9.5px;
  }
  .staff-shell .account-menu-group:first-of-type > span { border-left: none; padding-left: 0; margin-left: 0; }
  .staff-shell .account-menu-item {
    flex: 0 0 auto;
    min-height: 38px;
    min-width: max-content;
    padding: 8px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
  }
  .staff-shell .account-menu-item strong { font-size: 12.5px; }
  .staff-shell .account-menu-item small { display: none; }
  .staff-shell .account-menu-item::before { display: none; }
  .staff-shell .account-menu-item.active { background: var(--accent); border-color: var(--accent); }
  .staff-shell .account-menu-item.active strong { color: #fff; }
  /* Profile sub-tabs must not fight the sticky nav bar on mobile. */
  .admin-profile-tabs { position: static !important; top: auto !important; }
}

@media (max-width: 720px) {
  .admin-overview-grid,
  .admin-chart-grid { grid-template-columns: minmax(0, 1fr); }
  .staff-search-row { grid-template-columns: minmax(0, 1fr); }
  .staff-conversation-workspace,
  .admin-conversation-workspace { grid-template-columns: minmax(0, 1fr) !important; }
  .metric strong { font-size: 23px; }
  .workspace-panel { padding: var(--sp-4); }
}

/* ---------- 10b. Admin user profile — tabs, no nested scroll -------- */
/* Neutralise the fixed-height + inner-scroll cages so the page flows to
   its natural end (fixes "scroll inside scroll"). */
.admin-profile-panel,
.admin-users-panel {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.admin-profile-panel .admin-user-profile-grid,
.admin-users-panel .admin-user-table,
.admin-profile-wide .staff-order-stack,
.staff-order-stack {
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
}

.admin-profile-identity {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2) 0 var(--sp-3);
}
.admin-profile-identity-text { display: grid; gap: 6px; min-width: 0; }
.admin-profile-identity-text h2 { margin: 0; font-size: 21px; letter-spacing: -0.02em; }
.admin-profile-identity-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }

.admin-profile-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.admin-profile-tabs { position: sticky; top: 66px; z-index: 4; padding: 6px 0; background: var(--surface); }
.admin-profile-tabs .tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--soft-2);
  color: var(--ink-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  vertical-align: middle;
}
.admin-profile-tabs button.active .tab-count { background: rgba(255, 255, 255, 0.28); color: #fff; }
.admin-profile-tab-hint { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.admin-profile-tabpanel { display: grid; gap: var(--sp-4); }

.admin-profile-overview-grid,
.admin-profile-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-4);
  align-items: start;
}
.profile-form-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.admin-profile-account-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); }
.admin-profile-listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--sp-3); }

/* Clean profile listing cards — thumbnail + info + wrapping actions, no overlap. */
.admin-profile-listing-grid .admin-profile-listing-row {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 12px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-xs);
  align-items: start !important;
}
.admin-profile-listing-grid .admin-profile-listing-row:hover { border-color: var(--line-strong) !important; box-shadow: var(--shadow-sm); }
.admin-profile-listing-grid .admin-profile-listing-row > img {
  width: 92px !important;
  height: 92px !important;
  min-height: 0 !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}
.admin-profile-listing-grid .admin-profile-listing-row .seller-listing-info {
  min-width: 0 !important;
  display: grid !important;
  gap: 8px !important;
}
.admin-profile-listing-grid .admin-profile-listing-row .seller-listing-head strong { display: block; overflow: hidden; text-overflow: ellipsis; }
.admin-profile-listing-grid .admin-profile-listing-row .seller-listing-meta {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--muted);
  font-size: 12px;
}
.admin-profile-listing-grid .admin-profile-listing-row .inline-actions.staff-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  position: static !important;
  margin-top: 2px;
}
.admin-profile-listing-grid .admin-profile-listing-row .inline-actions .small-action {
  flex: 0 0 auto !important;
  min-height: 32px !important;
  width: auto !important;
}

.admin-kv { display: grid; gap: 10px; margin: 0; }
.admin-kv > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.admin-kv dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.admin-kv dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 600; word-break: break-word; }
.admin-kv dd.wrap { font-weight: 500; color: var(--ink-2); }

/* Audit timeline */
.eh-audit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.eh-audit-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.eh-audit-row:last-child { border-bottom: none; }
.eh-audit-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; justify-self: center; }
.eh-audit-dot.ok { background: var(--success); }
.eh-audit-dot.bad { background: var(--danger); }
.eh-audit-dot.warn { background: var(--warning); }
.eh-audit-dot.info { background: var(--accent); }
.eh-audit-body { display: grid; gap: 2px; }
.eh-audit-body strong { font-size: 13.5px; color: var(--ink); }
.eh-audit-reason { color: var(--ink-2); font-size: 12.5px; }
.eh-audit-meta { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .admin-profile-tabs { top: 56px; }
  .admin-profile-listing-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 10c. Admin users list — responsive rows ---------------- */
@media (max-width: 760px) {
  .admin-users-panel .admin-user-table { grid-auto-rows: auto !important; gap: 10px; }
  .admin-users-panel .admin-user-row {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: var(--r-md);
  }
  .admin-users-panel .admin-user-row-button {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon name"
      "icon meta"
      "stats stats" !important;
    gap: 4px 10px !important;
    align-items: start !important;
    height: auto !important;
  }
  .admin-user-row-button > .admin-status-icon { grid-area: icon; align-self: center; }
  .admin-user-row-button > .admin-user-main { grid-area: name; }
  .admin-user-row-button > .admin-user-meta { grid-area: meta; }
  .admin-user-row-button > .admin-user-stats { grid-area: stats; margin-top: 4px; }
  .admin-user-row-button > .admin-user-open-hint { display: none; }
  .admin-user-main strong,
  .admin-user-main span,
  .admin-user-meta span,
  .admin-user-meta small { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  .admin-user-stats span {
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 11px;
    font-weight: 700;
  }
  .admin-user-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
  }
  .admin-user-actions .small-action { min-height: 40px; }

  /* Compact search toolbar: full-width input, two half-width buttons. */
  .staff-search-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .staff-search-row > input { flex: 1 1 100%; min-height: 42px; }
  .staff-search-row > .small-action { flex: 1 1 calc(50% - 4px); min-height: 40px; justify-content: center; }
}

/* ---------- 10d. Mobile filters — single expanded sheet ------------- */
/* Neutralise the two-level fullscreen drill-down: every group becomes an
   inline accordion section inside ONE scrollable sheet, with a single
   sticky "Показать N" apply button. */
@media (max-width: 960px) {
  /* Sheet chrome */
  body.mobile-filters-expanded .search-band {
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    right: 0 !important;
    left: 0 !important;
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 84px) !important;
    overflow: hidden !important;
  }
  body.mobile-filters-expanded .search-form {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Un-hide sibling groups the drill-down hides; keep every group inline. */
  body.mobile-filters-expanded .search-form > * { display: block !important; }
  body.mobile-filters-expanded .search-form > .map-search-toggle,
  body.mobile-filters-expanded .search-form > .mobile-filter-toggle,
  body.mobile-filters-expanded .search-form > .search-sort { display: none !important; }

  /* Open group = inline section, never fixed/fullscreen. */
  body.mobile-filters-expanded .search-form .filter-menu,
  body.mobile-filters-expanded .search-form .filter-menu[open] {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
    grid-template-rows: none !important;
  }
  body.mobile-filters-expanded .search-form .filter-menu[open] > summary {
    position: relative !important;
    height: auto !important;
    min-height: 46px !important;
    padding: 11px 40px 11px 14px !important;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: var(--r-md) var(--r-md) 0 0 !important;
    background: var(--surface-2) !important;
    font-weight: 800 !important;
  }
  body.mobile-filters-expanded .search-form .filter-menu[open] > summary::before { content: none !important; }
  body.mobile-filters-expanded .search-form .filter-menu > summary::after {
    content: "" !important;
    position: absolute !important;
    right: 16px !important;
    top: 18px !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid var(--muted) !important;
    border-bottom: 2px solid var(--muted) !important;
    transform: rotate(45deg) !important;
    transition: transform 0.15s ease;
  }
  body.mobile-filters-expanded .search-form .filter-menu[open] > summary::after { transform: rotate(-135deg) !important; top: 21px !important; }

  body.mobile-filters-expanded .search-form .filter-menu[open] > .filter-popover {
    position: static !important;
    z-index: auto !important;
    display: grid !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    overflow: visible !important;
    border: none !important;
    border-radius: 0 0 var(--r-md) var(--r-md) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* One apply, no per-group ✓; keep per-group reset. */
  body.mobile-filters-expanded .filter-apply { display: none !important; }
  body.mobile-filters-expanded .filter-actions { position: static !important; padding: 6px 0 0 !important; box-shadow: none !important; background: transparent !important; justify-content: flex-start !important; }

  /* Sticky footer apply button — reuses the form submit. */
  body.mobile-filters-expanded .search-form .search-submit {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 6;
    order: 999;
    width: 100% !important;
    min-height: 50px !important;
    margin: 6px 0 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 -8px 22px rgba(15, 23, 42, 0.12);
    font-size: 15px !important;
    font-weight: 800 !important;
  }
  /* Sheet header (drag handle) */
  body.mobile-filters-expanded .search-band::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--line-strong);
  }
}

/* ---------- 10e. Kill admin "scroll-in-scroll" cages ---------------- */
/* Root cause: in staff mode the whole .workspace is locked to the viewport
   height with overflow:hidden, forcing every panel to add its own inner
   scrollbar. Let the page scroll as ONE surface instead. */
body[data-view="portal"][data-portal-mode="admin"] .workspace-grid,
body[data-view="portal"][data-portal-mode="admin"] .workspace,
body[data-view="portal"][data-portal-mode="moderator"] .workspace-grid,
body[data-view="portal"][data-portal-mode="moderator"] .workspace {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
/* The staff panel was a flex column sized to fill the (removed) viewport
   cage; without it, flex-grow children collapse to height 0 and spill their
   rows over following content. Make it normal block flow so children size to
   their content and stack cleanly. */
.staff-panel { display: block !important; }
.staff-panel > * + * { margin-top: var(--sp-4); }
.staff-order-stack,
.admin-active-promotion-list,
.admin-user-table { flex: 0 0 auto !important; }

/* Per-panel inner-scroll cages → flow to the natural page end. */
.staff-panel,
.staff-content,
.staff-order-stack,
.admin-user-table,
.admin-users-panel,
.admin-profile-panel,
.admin-profile-panel .admin-user-profile-grid,
.staff-conversation-list,
.staff-conversation-thread,
.admin-conversation-thread,
.admin-conversation-list,
.staff-listings-panel,
.admin-ads-panel {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}
/* Chat/conversation threads may keep a sane bounded scroll (very long
   threads shouldn't stretch the page infinitely), but never a tiny cage. */
.staff-conversation-thread,
.admin-conversation-thread {
  max-height: 70vh !important;
  overflow-y: auto !important;
}

/* ---------- 10f. Active-promotions rows — clean cards --------------- */
.admin-active-promotion-list .admin-promotion-row {
  display: grid !important;
  grid-template-columns: 100px minmax(0, 1fr) !important;
  gap: 14px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 14px !important;
  align-items: start !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-xs);
}
.admin-active-promotion-list .admin-promotion-row > img {
  width: 100px !important;
  height: 100px !important;
  min-height: 0 !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}
.admin-active-promotion-list .admin-promotion-row .seller-listing-info,
.admin-profile-listing-grid .admin-profile-listing-row .seller-listing-info {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
  gap: 10px !important;
}
.admin-active-promotion-list .admin-promotion-row .seller-listing-info > *,
.admin-profile-listing-grid .admin-profile-listing-row .seller-listing-info > * {
  grid-area: auto !important;
  min-width: 0;
}
.admin-active-promotion-list .admin-promotion-row .seller-listing-meta {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--muted);
  font-size: 12px;
}
.admin-active-promotion-list .admin-promotion-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  position: static !important;
  padding: 10px 0 0 !important;
  margin-top: 2px;
  border-top: 1px solid var(--line);
}
.admin-active-promotion-list .admin-promotion-actions > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.admin-active-promotion-list .admin-promotion-actions select {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 100%;
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 0 10px;
}
.admin-active-promotion-list .admin-promotion-actions .small-action { flex: 0 0 auto; min-height: 38px; }
.admin-active-promotion-list .admin-promotion-row .staff-actions { overflow: visible !important; }

/* ---------- 10g. DESKTOP staff sidebar — size to menu, don't stretch -- */
/* After removing the viewport cage the content can be very tall; the sidebar
   grid column must NOT stretch to that height (it was blowing menu items up
   to hundreds of px and scattering the menu). Keep it content-sized + sticky. */
@media (min-width: 901px) {
  /* The base stylesheet caged the shell (height:100%; overflow:hidden) for an
     old internal-scroll layout. That overflow made the shell the sidebar's
     sticky scroll-container, so `position:sticky` broke: the menu picked up a
     spurious +68px offset on any tall section (Все объявления / Статистика) and
     scrolled away entirely. Releasing the cage restores a working sticky rail
     AND a consistent top across every section. */
  .account-shell.staff-shell {
    align-items: start !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  .account-shell.staff-shell .account-sidebar {
    align-self: start !important;
    height: max-content !important;
    max-height: none !important;      /* no internal scroll */
    overflow: visible !important;
    position: sticky !important;
    top: 68px !important;
    align-content: start !important;
    gap: 5px !important;
    padding: 10px !important;
  }
  .account-shell.staff-shell .account-sidebar-head { padding-bottom: 8px !important; }
  .account-shell.staff-shell .account-sidebar-head strong { font-size: 13px !important; }
  .account-shell.staff-shell .account-menu-group {
    align-content: start !important;
    height: max-content !important;
    gap: 1px !important;
  }
  .account-shell.staff-shell .account-menu-group > span {
    margin: 3px 0 1px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.1em !important;
  }
  /* Compact, tidy menu buttons — one line, no hint subtitle, tight spacing. */
  .account-shell.staff-shell .account-menu-item {
    align-self: start !important;
    height: auto !important;
    min-height: 30px !important;
    padding: 6px 10px !important;
    gap: 0 !important;
  }
  .account-shell.staff-shell .account-menu-item strong { font-size: 12.5px !important; }
  .account-shell.staff-shell .account-menu-item small { display: none !important; }
  /* Non-staff account shell (seller cabinet) — same guard, keep hints. */
  .account-shell:not(.staff-shell) .account-sidebar {
    align-self: start !important;
    height: max-content !important;
  }
}

/* ---------- 10h. Admin listing cards — tidy buttons & rhythm -------- */
/* Replace loud multi-colour filled pills with consistent, quiet outline
   buttons + subtle tone coding. Applies to profile & promotion cards. */
.admin-profile-listing-grid .admin-profile-listing-row .inline-actions .small-action,
.admin-active-promotion-list .admin-promotion-row .inline-actions .small-action {
  min-height: 30px !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--surface) !important;
  color: var(--ink-2) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.admin-profile-listing-grid .admin-profile-listing-row .inline-actions .small-action:hover,
.admin-active-promotion-list .admin-promotion-row .inline-actions .small-action:hover {
  background: var(--surface-2) !important;
  border-color: var(--accent) !important;
  color: var(--accent-strong) !important;
}
.admin-profile-listing-grid .admin-profile-listing-row .inline-actions .small-action.danger,
.admin-active-promotion-list .admin-promotion-row .inline-actions .small-action.danger {
  color: var(--danger) !important;
}
.admin-profile-listing-grid .admin-profile-listing-row .inline-actions .small-action.danger:hover,
.admin-active-promotion-list .admin-promotion-row .inline-actions .small-action.danger:hover {
  background: var(--danger-soft) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}
.admin-profile-listing-grid .admin-profile-listing-row .inline-actions .small-action.premium,
.admin-profile-listing-grid .admin-profile-listing-row .inline-actions .small-action.boost,
.admin-active-promotion-list .admin-promotion-row .inline-actions .small-action.boost {
  color: var(--accent-strong) !important;
  border-color: var(--accent-soft) !important;
  background: var(--accent-soft) !important;
}

/* Card typography / rhythm */
.admin-profile-listing-grid .admin-profile-listing-row .seller-listing-head strong,
.admin-active-promotion-list .admin-promotion-row .seller-listing-head strong {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.admin-profile-listing-grid .admin-promotion-row .listing-code,
.admin-active-promotion-list .admin-promotion-row .listing-code,
.admin-profile-listing-grid .admin-profile-listing-row .listing-code {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.admin-profile-listing-grid .admin-profile-listing-row .seller-status,
.admin-active-promotion-list .admin-promotion-row .seller-status {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 11px;
  font-weight: 700;
  width: max-content;
}

/* ---------- 10i. Inline section search ------------------------------ */
.eh-inline-search { margin-bottom: 4px; }
.eh-inline-search input {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  font-size: 13.5px;
  color: var(--ink);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.eh-inline-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ---------- 10j. Dashboard breakdown bars --------------------------- */
.admin-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-4);
}
.eh-breakdown { display: grid; gap: 10px; }
.eh-bd-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 74px; gap: 10px; align-items: center; }
.eh-bd-label { color: var(--ink-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eh-bd-track { height: 10px; border-radius: 999px; background: var(--soft-2); overflow: hidden; }
.eh-bd-track > i { display: block; height: 100%; border-radius: 999px; min-width: 4px; transition: width 0.4s ease; }
.eh-bd-val { text-align: right; font-size: 13px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.eh-bd-val em { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--muted); }
@media (max-width: 720px) { .eh-bd-row { grid-template-columns: 96px minmax(0,1fr) 60px; } }

/* ---------- 10k. Home listing card — price hierarchy ---------------- */
/* Keep the MAIN price the clear focus; price/m² is a quiet, semi-transparent
   secondary line (no pill, low contrast) so it never competes. */
.listing-card .price-main { font-weight: 820; color: var(--ink); }
.price-per-sqm {
  display: block;
  margin-top: 1px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  opacity: 0.62;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 10l. Map open (desktop) — pin filters under the header --- */
/* When the map is open, keep the search/filter bar stuck to the header so
   filters stay reachable while the map (below it) is browsed. */
@media (min-width: 761px) {
  body:has(.content-grid.map-open) .search-band {
    position: sticky;
    top: 54px;
    z-index: 15;
    box-shadow: 0 8px 18px rgba(19, 23, 34, 0.07);
  }
}

/* ---------- 10m. Desktop "Найти" CTA + drop the count line ---------- */
@media (min-width: 761px) {
  /* Remove the standalone "229 объектов" toolbar so map/cards rise to the top
     (the count now lives on the Найти button). */
  .results-toolbar { display: none !important; }

  /* Give the submit its own content-sized column so the CTA has room. */
  .search-band .search-form {
    grid-template-columns:
      86px minmax(150px, 1.08fr) minmax(112px, 0.7fr) minmax(120px, 0.76fr)
      minmax(126px, 0.8fr) minmax(108px, 0.66fr) minmax(120px, 0.72fr)
      42px minmax(128px, max-content) !important;
  }

  /* Polished primary search CTA. */
  .search-form .search-submit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, #3b74ff, var(--accent-strong)) !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
  }
  .search-form .search-submit::before { font-size: 15px; opacity: 0.95; }
  .search-form .search-submit:hover {
    filter: brightness(1.06);
    box-shadow: 0 9px 22px rgba(37, 99, 235, 0.36);
  }
  .search-form .search-submit:active { transform: translateY(1px); }
  .search-form .search-submit .search-label { font-weight: 800; }
  .search-form .search-submit .search-count {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 21px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
}

/* ---------- 10n. Home card — clear owner / verified badges ---------- */
.card-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.5;
  white-space: nowrap;
}
.card-badge.verified { color: var(--success); background: var(--success-soft); }
.card-badge.owner-owner { color: var(--accent-strong); background: var(--accent-soft); }
.card-badge.owner-agency { color: var(--ink-2); background: var(--soft-2); }
.card-badge.owner-developer { color: var(--warning); background: var(--warning-soft); }

/* ---------- 10o. Listing skeletons (perceived speed) ---------------- */
.skeleton-card { pointer-events: none; }
.skeleton-card .skel-image { width: 100%; aspect-ratio: 3 / 2; border-radius: 10px; }
.skeleton-card .listing-body { display: grid; gap: 9px; padding-top: 10px; }
.skeleton-card .skel-line { height: 13px; border-radius: 6px; }
.skeleton-card .skel-line.w40 { width: 40%; }
.skeleton-card .skel-line.w50 { width: 50%; }
.skeleton-card .skel-line.w70 { width: 70%; }
.skeleton-card .skel-line.w90 { width: 90%; }

/* ---------- 10p. Keep the bottom nav in the user cabinet (mobile) ---- */
/* The base hid it for ALL portal views; keep it in the user cabinet/profile
   (hide only in the staff admin/moderator consoles). */
@media (max-width: 760px) {
  body[data-view="portal"]:not([data-portal-mode="admin"]):not([data-portal-mode="moderator"]) .mobile-bottom-nav {
    display: grid !important;
  }
  body[data-view="portal"]:not([data-portal-mode="admin"]):not([data-portal-mode="moderator"]) .workspace {
    padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
  }
}

/* ---------- 10q. Transactions — readable rows ----------------------- */
.eh-txn-list { display: grid; gap: 8px; }
.eh-txn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.eh-txn-main { display: grid; gap: 2px; min-width: 0; }
.eh-txn-main > strong { font-size: 13.5px; color: var(--ink); }
.eh-txn-listing { color: var(--ink-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eh-txn-meta { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.eh-txn-side { display: grid; justify-items: end; gap: 4px; flex: 0 0 auto; }
.eh-txn-amount { font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- 10r. "Thank you for purchase" promo dialog -------------- */
.promotion-success-dialog {
  border: 0;
  border-radius: var(--r-xl);
  padding: 0;
  max-width: 440px;
  width: calc(100% - 32px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.promotion-success-dialog::backdrop { background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(3px); }
.promotion-success-dialog .close-dialog {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.promo-thanks { display: grid; gap: 0; padding: 0; }
.promo-thanks-hero {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 30px 26px 24px;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, #3b74ff, var(--accent-strong) 70%);
}
.promo-thanks-check {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.12);
  font-size: 30px;
  font-weight: 900;
  animation: promo-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes promo-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .promo-thanks-check { animation: none; } }
.promo-thanks-hero h2 { margin: 6px 0 0; font-size: 22px; letter-spacing: -0.02em; }
.promo-thanks-hero p { margin: 0; font-size: 14px; line-height: 1.5; opacity: 0.95; }
.promo-thanks-hero strong { font-weight: 800; }
.promo-thanks-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 22px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.promo-thanks-card img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.promo-thanks-card span { display: grid; gap: 2px; min-width: 0; }
.promo-thanks-card strong { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promo-thanks-card small { color: var(--muted); font-size: 12px; }
.promo-thanks-note { margin: 12px 22px 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.promo-thanks .message-dialog-actions { display: flex; gap: 10px; padding: 18px 22px 22px; }
.promo-thanks .message-dialog-actions .primary { flex: 1; min-height: 44px; border-radius: 11px; }
.promo-thanks .message-dialog-actions .ghost { flex: 1; min-height: 44px; border-radius: 11px; }

/* ---------- 10s. Copy-code button in admin profile listing rows ------- */
.listing-code-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: -2px 7px -2px 5px;
  padding: 0;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2, var(--surface));
  color: var(--muted, #6b7280);
  cursor: pointer;
  flex: 0 0 auto;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease, transform 0.1s ease;
}
.listing-code-copy:hover,
.listing-code-copy:focus-visible {
  color: var(--accent-strong, var(--accent));
  border-color: var(--accent);
  background: var(--surface);
  outline: none;
}
.listing-code-copy:active { transform: scale(0.92); }
.listing-code-copy svg { display: block; }

/* ---------- 10t. Moderation-decision dialog — tone by action ---------- */
.moderation-decision-dialog .message-dialog-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.moderation-decision-dialog .message-dialog-badge::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
/* Reject → red, re-moderation → amber, unpublish → orange */
.moderation-decision-dialog[data-decision="reject"] .message-dialog-badge { background: #fdecec; color: #c0392b; }
.moderation-decision-dialog[data-decision="remoderation"] .message-dialog-badge { background: #fef3e2; color: #b9770e; }
.moderation-decision-dialog[data-decision="unpublish"] .message-dialog-badge { background: #fff1e6; color: #cf6a1a; }
.moderation-decision-dialog[data-decision="unpublish"] .primary { background: #cf6a1a; border-color: #cf6a1a; }
.moderation-decision-dialog[data-decision="unpublish"] .primary:hover { background: #b95c12; border-color: #b95c12; }
@media (prefers-color-scheme: dark) {
  .moderation-decision-dialog[data-decision="reject"] .message-dialog-badge { background: rgba(192,57,43,0.18); color: #ff8a7a; }
  .moderation-decision-dialog[data-decision="remoderation"] .message-dialog-badge { background: rgba(185,119,14,0.18); color: #f2b45a; }
  .moderation-decision-dialog[data-decision="unpublish"] .message-dialog-badge { background: rgba(207,106,26,0.2); color: #f6a866; }
}

/* ---------- 11. Misc polish ----------------------------------------- */
.small-action {
  border-radius: 999px;
  font-weight: 700;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.list-line { line-height: 1.4; }
::selection { background: var(--accent-ring); }

/* ---------- 12. Profile avatar uploader ----------------------------- */
.account-avatar-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 2px 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  background: var(--surface-2, #f6f7f9);
}
/* .account-profile-panel .compact-form label forces every form label into a
   16px/40px grid — override it for our two <label>-based controls (higher
   specificity + later source order win). */
.account-avatar-row label.account-avatar-preview {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  cursor: pointer;
  display: block;
  grid-template-rows: none;
  line-height: 0;
}
.account-avatar-img,
.account-avatar-preview .seller-avatar {
  width: 84px;
  height: 84px;
}
.account-avatar-img { display: block; }
.account-avatar-preview .seller-avatar {
  font-size: 30px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--surface, #fff), 0 0 0 4px var(--line, #e5e7eb);
}
.account-avatar-cam {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent, #2563eb);
  color: #fff;
  box-shadow: 0 0 0 2.5px var(--surface, #fff);
  transition: transform 0.12s ease, filter 0.14s ease;
}
.account-avatar-preview:hover .account-avatar-cam { transform: scale(1.08); filter: brightness(1.06); }
.account-avatar-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.account-avatar-title { font-weight: 700; font-size: 14px; color: var(--ink, #0f172a); }
.account-avatar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.account-avatar-row label.account-avatar-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  grid-template-rows: none;
  padding: 9px 15px;
  border-radius: 10px;
  background: var(--accent, #2563eb);
  color: #fff;
  border: 1px solid var(--accent, #2563eb);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.account-avatar-upload:hover { background: var(--accent-strong, #1d4ed8); border-color: var(--accent-strong, #1d4ed8); }
.account-avatar-upload svg { display: block; }
.account-avatar-remove {
  padding: 9px 13px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--line, #e5e7eb);
  color: var(--muted, #6b7280);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.account-avatar-remove:hover { color: #dc2626; border-color: #dc2626; background: rgba(220, 38, 38, 0.06); }
.account-avatar-hint { font-size: 12px; color: var(--muted, #6b7280); }
.account-avatar-status { font-size: 12px; font-weight: 600; color: var(--accent-strong, var(--accent, #2563eb)); }
.account-avatar-status:empty { display: none; }
@media (max-width: 480px) {
  .account-avatar-row { gap: 14px; padding: 12px; }
  .account-avatar-preview,
  .account-avatar-img,
  .account-avatar-preview .seller-avatar { width: 72px; height: 72px; }
}

/* ---------- 13. Listing-card 2-line title clip fix ------------------ */
/* Two causes: (a) the h2's own line-clamp box gave Cyrillic descenders (р/у/д,
   e.g. "двором") too little room; (b) more importantly, `.listing-head` was
   capped at max-height:92px, but the price block grew to 3 lines (price +
   ≈USD + price/m²) ≈54px, so 54 + a 2-line title (44px) overflowed and the
   head clipped the title's last line. Give the h2 descender room AND raise the
   desktop head cap into the free space that already sits above `.card-tags`
   (tags are bottom-pinned, so this doesn't push them out). Mobile is untouched
   — its shorter head already shows 2 lines cleanly. */
.listing-card h2 {
  line-height: 1.3;
  padding-bottom: 3px;
}
@media (min-width: 761px) {
  .listing-head { max-height: 110px; }
}

/* ---------- 14. Detail summary feature tags — desktop scroller ------- */
/* Base rule clipped overflowing amenity tags ("Кондиционер"…) under the
   container's right border via flex-nowrap + overflow:hidden. Turn the row
   into a horizontal scroller on desktop (mobile already does this <=760px). */
@media (min-width: 761px) {
  .detail-summary {
    grid-template-rows: auto auto auto minmax(0, 40px) auto minmax(220px, 1fr);
  }
  .detail-summary .tags {
    flex-wrap: nowrap;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scroll-padding-inline: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(29, 78, 216, 0.44) transparent;
    overscroll-behavior-x: contain;
  }
  .detail-summary .tags .tag {
    flex: 0 0 auto;
    max-width: none;
  }
  .detail-summary .tags::-webkit-scrollbar { height: 6px; }
  .detail-summary .tags::-webkit-scrollbar-track { background: transparent; }
  .detail-summary .tags::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(29, 78, 216, 0.40); }
}

/* ---------- 15. Restore-hidden header icon (next to the bell) --------- */
/* Reuses .account-bell for identical icon-button + badge styling; tint the
   count badge with the accent so it reads as a counter, not a red alert. */
.reset-hidden-bell em { background: var(--accent); }