/* ═══════════════════════════════════════════════════════════════
   BORDADA — v2 design system (shadcn-inspired, accent #2fac66)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Design tokens ─────────────────────────────────────────── */

:root {
  /* Brand */
  --accent:           #2fac66;
  --accent-hover:     #299958;
  --accent-pressed:   #23854c;
  --accent-soft:      rgba(47, 172, 102, 0.10);
  --accent-ring:      rgba(47, 172, 102, 0.30);

  /* Neutrals (light theme defaults) */
  --bg:               #ffffff;
  --bg-subtle:        #f8f9fa;
  --bg-input:         #f5f6f7;
  --bg-card:          #ffffff;
  --bg-hover:         #f1f3f5;
  --bg-overlay:       rgba(15, 18, 23, 0.55);

  --text-primary:     #0f1217;
  --text-secondary:   #4b5260;
  --text-muted:       #8a909d;
  --text-on-accent:   #ffffff;

  --border:           #e8eaee;
  --border-strong:    #d6d9df;
  --border-color:     var(--border); /* legacy alias */

  --danger:           #dc2626;
  --danger-soft:      rgba(220, 38, 38, 0.10);
  --warn:             #d97706;
  --warn-soft:        rgba(217, 119, 6, 0.12);
  --info:             #2563eb;
  --info-soft:        rgba(37, 99, 235, 0.10);
  --success:          var(--accent);
  --success-soft:     var(--accent-soft);

  /* Radius scale */
  --radius-sm:        6px;
  --radius:           10px;
  --radius-lg:        14px;
  --radius-xl:        18px;
  --card-radius:      var(--radius-lg);

  /* Shadow scale (very subtle, shadcn-ish) */
  --shadow-xs:        0 1px 0 rgba(15, 18, 23, 0.04);
  --shadow-sm:        0 1px 2px rgba(15, 18, 23, 0.06);
  --shadow-md:        0 4px 12px rgba(15, 18, 23, 0.08);
  --shadow-lg:        0 12px 32px rgba(15, 18, 23, 0.12);
  --ring:             0 0 0 3px var(--accent-ring);

  /* Spacing scale (consistent) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  --header-h:  56px;
  --sidebar-w: 248px;

  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --bg:               #0b0d10;
  --bg-subtle:        #0f1216;
  --bg-input:         #15191e;
  --bg-card:          #11141a;
  --bg-hover:         #1a1f26;
  --bg-overlay:       rgba(0, 0, 0, 0.65);

  --text-primary:     #f5f7fa;
  --text-secondary:   #b3bac4;
  --text-muted:       #6b727d;

  --border:           #1f242b;
  --border-strong:    #2a313a;

  --accent-soft:      rgba(47, 172, 102, 0.14);
  --accent-ring:      rgba(47, 172, 102, 0.35);

  --shadow-xs:        0 1px 0 rgba(0, 0, 0, 0.25);
  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md:        0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg:        0 16px 40px rgba(0, 0, 0, 0.55);
}

/* ── 2. Reset & base ──────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Резервируем место под вертикальную полосу прокрутки всегда, чтобы layout
     не «скакал» при переходах между короткими и длинными страницами.
     overflow-y: scroll — кросс-браузерный, scrollbar-gutter — для современных. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-subtle);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

button { font-family: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

img { max-width: 100%; height: auto; display: block; }

input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 24px; line-height: 1.25; }
h2 { font-size: 20px; line-height: 1.3; }
h3 { font-size: 17px; line-height: 1.35; }
p  { margin: 0; }

::selection { background: var(--accent-soft); color: var(--text-primary); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid var(--bg-subtle); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── 3. Header ────────────────────────────────────────────────── */

.brd-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /* Бар шапки тянется на всю ширину (фон + бордер), а содержимое выравнивается
     с .brd-layout (max-width 1280px, centered). Padding слева/справа динамически
     добавляет смещение, равное margin-у layout, плюс базовый отступ 24px. */
  padding: 0 max(var(--space-6), calc((100% - 1280px) / 2 + var(--space-6)));
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .brd-header { background: rgba(11, 13, 16, 0.82); }

.brd-header__logo { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.brd-header__logo svg { height: 26px; width: auto; }
.brd-header__logo:hover { opacity: .85; }

.brd-header__search {
  flex: 1 1 auto;
  max-width: 520px;
  position: relative;
}

.brd-header__search input,
.brd-header__search .brd-input {
  width: 100%;
  height: 38px;
  padding: 0 var(--space-3) 0 36px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.brd-header__search input:focus,
.brd-header__search .brd-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: var(--ring);
}

.brd-header__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.brd-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

.brd-header__icon {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-secondary);
  transition: background .15s, color .15s, border-color .15s;
}
.brd-header__icon:hover { background: var(--bg-hover); color: var(--text-primary); }

.brd-header__wallet-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.brd-header__wallet-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.brd-header__balance { color: var(--accent, #2fac66); font-variant-numeric: tabular-nums; }
.brd-header__balance:empty { display: none; }

.brd-header__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── 4. Layout (sidebar + content) ────────────────────────────── */

.brd-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: var(--space-6);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-6);
}

.brd-content {
  min-width: 0;
  max-width: 920px;
  width: 100%;
}

.brd-sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
  align-self: start;
  max-height: calc(100vh - var(--header-h) - var(--space-12));
  overflow-y: auto;
  padding-right: var(--space-2);
}

.brd-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: 40;
}
.brd-sidebar-overlay--open { display: block; }

.brd-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.brd-nav__item { margin: 0; }

.brd-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.brd-nav__link:hover { background: var(--bg-hover); color: var(--text-primary); }
.brd-nav__link.active,
.brd-nav__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

.brd-nav__link svg { flex-shrink: 0; opacity: .85; }

/* Красный кружок «есть непросмотренные изменения» рядом с пунктом
   «Мои покупки» / «Мои продажи». Без числа — просто индикатор. */
.brd-nav__dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ef4444;
  margin-left: auto;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--bg-card);
}

.brd-nav__heading {
  padding: var(--space-4) var(--space-3) var(--space-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.brd-nav__divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-3) 0;
}

/* ── 5. Section headers ───────────────────────────────────────── */

.brd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.brd-section-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-primary);
}

.brd-section-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 var(--space-3);
  text-transform: none;
}

/* ── 6. Buttons ───────────────────────────────────────────────── */

.brd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 var(--space-4);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s, transform .05s;
  user-select: none;
  white-space: nowrap;
}
.brd-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); }
.brd-btn:active { transform: translateY(1px); }
.brd-btn:focus-visible { outline: none; box-shadow: var(--ring); }

.brd-btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}
.brd-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); }
.brd-btn--primary:active { background: var(--accent-pressed); border-color: var(--accent-pressed); }

.brd-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.brd-btn--ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

.brd-btn--danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.brd-btn--danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

.brd-btn--outline {
  background: var(--bg-card);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.brd-btn--outline:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); }

.brd-btn--icon {
  width: 32px;
  padding: 0;
  flex-shrink: 0;
}
.brd-btn--icon svg { width: 16px; height: 16px; }

.brd-btn--sm { height: 32px; padding: 0 var(--space-3); font-size: 13px; border-radius: var(--radius-sm); }
.brd-btn--sm.brd-btn--icon { width: 32px; padding: 0; }
.brd-btn--lg { height: 44px; padding: 0 var(--space-5); font-size: 15px; }

/* ── 7. Form controls ─────────────────────────────────────────── */

.brd-input,
.brd-textarea,
.brd-select {
  width: 100%;
  height: 38px;
  padding: 0 var(--space-3);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.brd-textarea { min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.brd-input::placeholder,
.brd-textarea::placeholder { color: var(--text-muted); }

.brd-input:focus,
.brd-textarea:focus,
.brd-select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: var(--ring);
}

.brd-input--sm { height: 32px; font-size: 13px; padding: 0 10px; border-radius: var(--radius-sm); }

.brd-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.brd-form { max-width: 460px; margin: 0 auto; }
.brd-form-group { margin-bottom: var(--space-4); }
.brd-form-footer { margin-top: var(--space-5); display: flex; justify-content: flex-end; gap: var(--space-2); }

/* Auth layout (login/signup/forgot/reset) */
.brd-auth-body {
  background: var(--bg-subtle);
  min-height: 100vh;
}
.brd-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
}

.brd-form-card {
  width: 100%;
  max-width: 400px;
  margin: 0;
  padding: var(--space-8);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.brd-form-card__logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.brd-form-card__logo svg {
  height: 28px;
  width: auto;
}
.brd-form-card__title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 var(--space-6);
  letter-spacing: -0.015em;
}
.brd-form-card__hint {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  margin: -8px 0 var(--space-5);
  line-height: 1.5;
}
.brd-form-card .brd-alert { margin-bottom: var(--space-4); }
.brd-form-card .brd-form-footer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  justify-content: center;
  font-size: 13px;
  color: var(--text-secondary);
}
.brd-form-card .brd-form-footer a { color: var(--accent); font-weight: 500; }

select.brd-input,
select.brd-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* Toggle */
.brd-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--border-strong);
  position: relative;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.brd-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .18s;
}
.brd-toggle:checked { background: var(--accent); }
.brd-toggle:checked::after { transform: translateX(16px); }

/* ── 8. Card (universal) ──────────────────────────────────────── */

.brd-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--space-5);
  transition: border-color .15s, box-shadow .15s;
  margin-bottom: var(--space-4);
}
.brd-card:hover { border-color: var(--border-strong); }

.brd-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: 13px;
}
.brd-card__author { font-weight: 600; color: var(--text-primary); }
.brd-card__author:hover { color: var(--accent); }
.brd-card__meta { color: var(--text-muted); font-size: 13px; }
.brd-card__meta:hover { color: var(--text-secondary); }
.brd-card__title { font-size: 16px; font-weight: 700; margin: 0 0 var(--space-2); color: var(--text-primary); }
.brd-card__body { color: var(--text-primary); line-height: 1.55; }
.brd-card__footer {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
}
.brd-card__footer a { color: var(--text-muted); }
.brd-card__footer a:hover { color: var(--accent); }

/* Post card — clickable wrapper */
.brd-post-card { position: relative; cursor: pointer; }
.brd-post-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }

/* Невидимая ссылка-перекрытие — делает всю карточку кликабельной (открывает пост) */
.brd-post-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}
/* Элементы, которые должны быть кликабельны отдельно (автор, прикреплёнка, реакции) */
.brd-post-card__layer { position: relative; z-index: 1; }
.brd-post-card .brd-card__title,
.brd-post-card .brd-card__body { position: relative; z-index: 0; pointer-events: none; }

.brd-post-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.brd-post-card__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.brd-post-card__action:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.brd-post-card__action svg { color: var(--text-muted); transition: color .12s; }
.brd-post-card__action:hover svg { color: var(--text-secondary); }
.brd-post-card__action--static { cursor: default; }

.brd-post-card__react:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.brd-post-card__react:hover svg { color: var(--accent); }

/* Post-card attached listing */
.brd-card__attachment {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.brd-card__attachment:hover { border-color: var(--accent); background: var(--bg-hover); }
.brd-card__attachment-img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-card);
}
.brd-card__attachment-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--text-muted);
}
.brd-card__attachment-body { min-width: 0; flex: 1; }
.brd-card__attachment-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
}
.brd-card__attachment-price { color: var(--accent); margin-top: 4px; font-size: 14px; font-weight: 700; }

/* ── 9. Listing card (catalog) ────────────────────────────────── */

.brd-listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

.brd-listing-card {
  position: relative;
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.brd-listing-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.brd-listing-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--bg-input);
}
.brd-listing-card__img-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 32px;
}

.brd-listing-card__body { padding: var(--space-3) var(--space-3) 14px; }
.brd-listing-card__price {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.brd-listing-card__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.7em;
}
.brd-listing-card__meta { font-size: 12px; color: var(--text-muted); }

/* Safe-deal badge — сплошной фиолетовый щит в левом верхнем углу фото
   карточки листинга. Видно с первого взгляда что листинг принимает оплату
   через эскроу. Цвет #a900ff — фирменный (как кнопка «Безопасная сделка»). */
.brd-listing-card__safe-deal {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #a900ff;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(169, 0, 255, .35);
  z-index: 1;
}
.brd-listing-card__safe-deal svg { width: 18px; height: 18px; }

/* ── Listing card: LIST variant (Avito-style горизонтальная карточка) ── */

.brd-listing-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.brd-listing-card--list {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
  padding: var(--space-3);
  overflow: visible;
}
.brd-listing-card--list .brd-listing-card__photo {
  flex: 0 0 220px;
  width: 220px;
  height: 220px;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--bg-input);
}
.brd-listing-card--list .brd-listing-card__img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.brd-listing-card--list .brd-listing-card__img-placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.brd-listing-card--list .brd-listing-card__body {
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.brd-listing-card--list .brd-listing-card__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  min-height: 0;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.brd-listing-card--list .brd-listing-card__price {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.brd-listing-card--list .brd-listing-card__meta {
  font-size: 13px;
  color: var(--text-secondary);
}
.brd-listing-card--list .brd-listing-card__desc {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.brd-listing-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0;
}
.brd-listing-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}
.brd-listing-card__badge--condition {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
}
.brd-listing-card__badge--safe-deal {
  background: #a900ff;
  color: #fff;
}
.brd-listing-card__badge--safe-deal svg { width: 12px; height: 12px; }
.brd-listing-card__badge--promoted {
  background: var(--bg-input);
  color: var(--text-muted);
}

/* На узких экранах list-карточка визуально откатывается к сетке-вертикали:
   фото сверху, текст снизу, описание скрыто. Родительский .brd-listing-list
   сохраняет flex-column как был; индивидуальная карточка теряет
   row-направление. Совпадает с поведением .brd-listing-grid на 960px. */
@media (max-width: 960px) {
  .brd-listing-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .brd-listing-card--list { flex-direction: column; padding: 0; gap: 0; }
  .brd-listing-card--list .brd-listing-card__photo {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    border-radius: 0;
  }
  .brd-listing-card--list .brd-listing-card__body {
    padding: var(--space-3) var(--space-3) 14px;
    gap: 4px;
  }
  .brd-listing-card--list .brd-listing-card__title { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
  .brd-listing-card--list .brd-listing-card__price { font-size: 16px; }
  .brd-listing-card--list .brd-listing-card__desc { display: none; }
  .brd-listing-card--list .brd-listing-card__badges { gap: 4px; }
}

/* View toggle (list/grid) */
.brd-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
}
.brd-view-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--text-muted);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.brd-view-toggle__btn:hover { color: var(--text-primary); background: var(--bg-input); }
.brd-view-toggle__btn--active { color: var(--text-primary); background: var(--bg-input); }
.brd-view-toggle__btn svg { width: 16px; height: 16px; }
.brd-view-toggle__btn + .brd-view-toggle__btn { border-left: 1px solid var(--border); }

/* Favorite heart */
.brd-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: color .15s, background .15s, transform .12s, box-shadow .15s, border-color .15s;
}
.brd-fav:hover {
  color: var(--danger);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transform: scale(1.08);
}
.brd-fav:active { transform: scale(.94); }
.brd-fav--active {
  color: var(--danger);
  background: #fff;
  border-color: rgba(220, 38, 38, 0.35);
  animation: brd-fav-pop .25s ease-out;
}
@keyframes brd-fav-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
[data-theme="dark"] .brd-fav {
  background: rgba(20, 22, 27, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .brd-fav:hover,
[data-theme="dark"] .brd-fav--active { background: rgba(20, 22, 27, 0.95); }

.brd-fav--lg {
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  font-size: 22px;
}

/* ── 10. Category tiles (home) ────────────────────────────────── */

.brd-cat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
}

.brd-cat-tile {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 88px;
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color .15s, background .15s, transform .12s;
  overflow: hidden;
}
.brd-cat-tile:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text-primary);
}
.brd-cat-tile__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  flex: 1;
  letter-spacing: -0.005em;
}
.brd-cat-tile__icon {
  font-size: 64px;
  line-height: 1;
  flex-shrink: 0;
  opacity: .9;
  position: absolute;
  right: -6px;
  bottom: -11px;
}
.brd-cat-tile--crypto {
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-card));
  border-color: var(--accent);
}
.brd-cat-tile--crypto .brd-cat-tile__name {
  color: var(--accent);
}
.brd-cat-tile--crypto:hover {
  background: var(--accent-soft);
}

/* Crypto landing hero — заголовок страницы /crypto. */
.brd-crypto-hero {
  margin: 0 0 var(--space-4);
}

/* ── 11. Recommendations (horizontal scroll) ──────────────────── */

.brd-recs { margin: 0 0 var(--space-8); }
.brd-recs__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.brd-recs__title { font-size: 18px; font-weight: 700; margin: 0; }
.brd-recs__all { font-size: 13px; color: var(--accent); font-weight: 500; }
.brd-recs__all:hover { text-decoration: underline; }

.brd-recs__scroll {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.brd-recs__item { flex: 0 0 220px; scroll-snap-align: start; }

/* ── 11b. New Listings accordion ─────────────────────────────── */
.brd-new-listings-wrap { position: relative; margin: 0 0 var(--space-6); }
.brd-new-listings__summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); user-select: none; }
.brd-new-listings__summary::-webkit-details-marker { display: none; }
.brd-new-listings__summary::after {
  /* SVG-chevron «вниз» (острие смотрит вниз) как base-состояние = свёрнуто.
     При [open] поворачиваем на 180° → острие смотрит вверх. */
  content: "";
  width: 12px;
  height: 12px;
  background-color: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  transition: transform 0.15s ease;
}
.brd-new-listings[open] .brd-new-listings__summary::after { transform: rotate(180deg); }
.brd-new-listings__summary:hover::after { background-color: var(--text-primary); }
.brd-new-listings__all { position: absolute; top: 2px; right: 0; font-size: 14px; color: var(--accent); text-decoration: none; }
.brd-new-listings__all:hover { text-decoration: underline; }

/* ── 12. City heading + category heading ──────────────────────── */

.brd-city-heading {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-5);
  color: var(--text-primary);
}
.brd-city-link {
  color: var(--accent);
  border-bottom: 1px dashed var(--accent);
  cursor: pointer;
}
.brd-city-link:hover { color: var(--accent-hover); border-color: var(--accent-hover); }

.brd-category-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 var(--space-5);
  font-size: 22px;
  letter-spacing: -0.015em;
}
.brd-category-heading__sep { color: var(--text-muted); }

/* ── 13. Breadcrumbs ──────────────────────────────────────────── */

.brd-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--space-4);
  font-size: 13px;
  color: var(--text-muted);
}
.brd-breadcrumbs a { color: var(--text-muted); }
.brd-breadcrumbs a:hover { color: var(--accent); }
.brd-breadcrumbs__sep { color: var(--text-muted); opacity: .6; }
.brd-breadcrumbs span:last-child:not(.brd-breadcrumbs__sep) { color: var(--text-primary); font-weight: 500; }

/* ── 14. Empty / CTA ──────────────────────────────────────────── */

.brd-empty {
  padding: var(--space-6);
  background: var(--bg-card);
  border: 1px dashed var(--border-strong);
  border-radius: var(--card-radius);
  color: var(--text-secondary);
  text-align: center;
  font-size: 14px;
}
.brd-empty a { color: var(--accent); font-weight: 500; }

.brd-feed-loadmore { display: flex; justify-content: center; margin: 20px 0 8px; }
.brd-feed-loadmore .brd-btn { min-width: 220px; }
.brd-feed-loadmore .brd-btn:disabled { opacity: .55; cursor: default; }

.brd-post-spa-back { margin: 0 0 12px; }
.brd-post-spa-back .brd-btn { display: inline-flex; align-items: center; gap: 6px; }

/* Wallet popover в шапке: показывает баланс и CTA «Перейти в кошелёк».
   Селектор с двумя классами — `.brd-dropdown__menu` ниже в файле ставит
   `padding: 6px`, без специфичности он бы выиграл каскад.
   `display` намеренно не трогаем — им управляет `dropdown.js` (CSS `display:none`
   по умолчанию + inline `display:block` при открытии после портала в body).
   Интервалы между элементами держим через margin, а не flex/gap. */
.brd-dropdown__menu.brd-wallet-popover {
  min-width: 280px;
  padding: 20px 22px 18px;
}
.brd-wallet-popover__label {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.brd-wallet-popover__balance {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.15;
  margin-bottom: 18px;
}
.brd-wallet-popover__currency {
  font-size: 18px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-left: 2px;
}
.brd-wallet-popover__cta { width: 100%; }

/* Страница сделки /orders/:id. Двухколоночный layout: слева — карточка
   листинга + действия, справа — чат. На мобиле колонки складываются. */
.brd-order { padding: 16px 0; }
.brd-order__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.brd-order__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) { .brd-order__grid { grid-template-columns: 1fr; } }

.brd-order__listing { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.brd-order__thumb {
  width: 100%; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden;
  background: var(--bg-input); display: flex; align-items: center; justify-content: center;
}
.brd-order__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brd-order__title { font-size: 18px; font-weight: 600; }
.brd-order__title a { color: var(--text-primary); text-decoration: none; }
.brd-order__title a:hover { color: var(--accent); }

.brd-order__rows { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.brd-order__row { display: flex; justify-content: space-between; font-size: 14px; }
.brd-order__row--muted { color: var(--text-muted); font-size: 13px; }
.brd-order__row--total { font-weight: 600; font-size: 16px; padding-top: 4px; border-top: 1px dashed var(--border); }

.brd-order__parties { display: flex; flex-direction: column; gap: 8px; }
.brd-order__party { display: flex; justify-content: space-between; font-size: 14px; }
.brd-order__party-label { color: var(--text-muted); }

.brd-order__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.brd-order__actions .brd-order-action { margin: 0; }
.brd-order__hint {
  margin-top: 4px; padding: 10px 12px; border-radius: 8px;
  background: var(--bg-input); color: var(--text-secondary);
  font-size: 13px; line-height: 1.4;
}

.brd-order__chat { padding: 0; display: flex; flex-direction: column; min-height: 400px; max-height: 700px; }
.brd-order__chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.brd-order__chat-conn { font-size: 12px; color: var(--text-muted); }
.brd-order__chat-messages {
  flex: 1; overflow-y: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.brd-order__chat-form {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 12px 16px; border-top: 1px solid var(--border);
}
.brd-order__chat-form textarea { flex: 1; resize: vertical; min-height: 38px; max-height: 160px; }
.brd-order__chat-closed { padding: 14px 16px; color: var(--text-muted); font-size: 13px; text-align: center; border-top: 1px solid var(--border); }

.brd-order__msg {
  max-width: 80%;
  padding: 8px 12px; border-radius: 12px;
  font-size: 14px; line-height: 1.4;
  word-wrap: break-word;
}
.brd-order__msg--mine { align-self: flex-end; background: var(--accent-soft); color: var(--accent); border-bottom-right-radius: 4px; }
.brd-order__msg--their { align-self: flex-start; background: var(--bg-input); color: var(--text-primary); border-bottom-left-radius: 4px; }
.brd-order__msg-body { white-space: pre-wrap; }
.brd-order__msg-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Условия доставки на странице сделки. Состояния:
   1) форма — продавец заполняет; 2) digest — отображение зафиксированных
   условий; 3) edit (внутри <details>) — продавец переоформляет. */
.brd-order__delivery {
  margin-top: 12px;
  padding: 14px; border-radius: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}
.brd-order__delivery-head { display: flex; align-items: center; justify-content: space-between; }
.brd-order__delivery-digest {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
}
.brd-order__delivery-row { display: flex; gap: 12px; font-size: 14px; align-items: flex-start; }
.brd-order__delivery-label { color: var(--text-muted); min-width: 110px; flex-shrink: 0; }
.brd-order__delivery-value { color: var(--text-primary); }
.brd-order__delivery-notes { white-space: pre-wrap; }
.brd-order__delivery-form { display: flex; flex-direction: column; gap: 10px; }
.brd-order__delivery-form .brd-form-row { display: flex; flex-direction: column; gap: 6px; }
.brd-order__delivery-edit summary { cursor: pointer; font-size: 13px; }
.brd-order__delivery-edit[open] summary { margin-bottom: 8px; }

/* Просрочка отгрузки — красная плашка над кнопками покупателя. */
.brd-order__overdue {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.25);
  color: #ef4444;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}
.brd-btn--danger {
  background: #ef4444; color: #fff; border-color: #ef4444;
}
.brd-btn--danger:hover { background: #dc2626; border-color: #dc2626; color: #fff; }

/* Кнопка «Безопасная сделка» — фирменный фиолетовый, выделена как ключевое CTA
   на странице листинга. Цвет фиксированный (не из var) — намеренный акцент. */
.brd-btn--safe-deal {
  background: #a900ff; color: #fff; border-color: #a900ff;
}
.brd-btn--safe-deal:hover {
  background: #9a00e6; border-color: #9a00e6; color: #fff;
}
.brd-btn--safe-deal:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(169, 0, 255, .35);
}

/* Flatpickr — переоформление под нашу дарк-тему (shadcn-like).
   Селекторы строятся вокруг `.flatpickr-calendar` которое флатпикр кладёт
   в <body>. Используем CSS-переменные сайта чтобы менялось с темой. */
.flatpickr-calendar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  color: var(--text-primary);
  border-radius: var(--radius);
  font-family: inherit;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { display: none; }
.flatpickr-months,
.flatpickr-months .flatpickr-month {
  background: transparent;
  color: var(--text-primary);
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: var(--text-secondary);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--accent);
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--text-primary);
  background: transparent;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: var(--bg-card);
  color: var(--text-primary);
}
.flatpickr-weekdays { background: transparent; }
.flatpickr-weekday {
  color: var(--text-muted);
  background: transparent;
  font-weight: 500;
}
.flatpickr-day {
  color: var(--text-primary);
  border-radius: 6px;
  border-color: transparent;
}
.flatpickr-day:hover { background: var(--bg-hover); border-color: transparent; }
.flatpickr-day.today {
  border-color: var(--accent);
}
.flatpickr-day.today:hover { background: var(--bg-hover); color: var(--accent); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--text-muted);
  opacity: .4;
}
.brd-order__delivery code {
  background: var(--bg-card); padding: 2px 6px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
}

.brd-order__delivered-banner {
  background: rgba(47,172,102,.08);
  border: 1px solid rgba(47,172,102,.3);
  color: var(--accent);
  padding: 10px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500;
}

/* Модераторская очередь /mod/orders/delivery-claims */
.brd-claims { display: flex; flex-direction: column; gap: 14px; }
.brd-claim { padding: 14px; }
.brd-claim__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.brd-claim__title { font-size: 16px; font-weight: 600; color: var(--text-primary); text-decoration: none; }
.brd-claim__title:hover { color: var(--accent); }
.brd-claim__grid { display: grid; grid-template-columns: 240px 1fr; gap: 14px; }
@media (max-width: 700px) { .brd-claim__grid { grid-template-columns: 1fr; } }
.brd-claim__shot img {
  width: 100%; max-height: 320px; object-fit: contain;
  background: var(--bg-input); border-radius: 8px; cursor: zoom-in;
}
.brd-claim__info { display: flex; flex-direction: column; gap: 6px; }
.brd-claim__row { display: flex; gap: 12px; font-size: 14px; }
.brd-claim__label { color: var(--text-muted); min-width: 96px; }
.brd-claim__note {
  margin-top: 4px; padding: 8px 10px;
  background: var(--bg-input); border-radius: 6px;
  font-size: 13px; white-space: pre-wrap;
}
.brd-claim__actions { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; flex-wrap: wrap; }
.brd-claim__reject summary { list-style: none; cursor: pointer; }
.brd-claim__reject summary::-webkit-details-marker { display: none; }
.brd-claim__reject[open] summary { margin-bottom: 6px; }
.brd-claim__reject-form { display: flex; flex-direction: column; gap: 6px; min-width: 280px; }

/* Плитки способов оплаты в форме листинга.
   Layout: иконка слева в квадрате 40×40, рядом title/descr. Кастомный
   чекбокс в правом верхнем углу — квадрат accent-цвета с галочкой. */
.brd-payment-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.brd-payment-tile {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 14px 14px 12px;
  padding-right: 38px; /* запас под чекбокс */
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.brd-payment-tile:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.brd-payment-tile--active {
  border-color: var(--accent);
  background: rgba(47,172,102,.06);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
/* Прячем нативный input, оставляем доступным для фокуса через клавиатуру. */
.brd-payment-tile__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* Кастомный чекбокс-квадрат. */
.brd-payment-tile__check {
  position: absolute;
  top: 12px; right: 12px;
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background .12s, border-color .12s, color .12s;
}
.brd-payment-tile__check svg { width: 14px; height: 14px; }
.brd-payment-tile--active .brd-payment-tile__check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.brd-payment-tile__input:focus-visible + .brd-payment-tile__check {
  box-shadow: 0 0 0 3px rgba(47,172,102,.25);
}
/* Иконка способа оплаты в квадрате слева. */
.brd-payment-tile__icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--bg-input);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
}
.brd-payment-tile--active .brd-payment-tile__icon {
  background: rgba(47,172,102,.12);
  color: var(--accent);
}
.brd-payment-tile__body { display: flex; flex-direction: column; min-width: 0; }
.brd-payment-tile__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.brd-payment-tile__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.25;
}
.brd-payment-tile__descr {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
}
/* Condition tiles — состояние товара. Стилистика как payment-tiles, но без
   иконки (стрелка только check-маркером справа). Радио вместо чекбокса. */
.brd-condition-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.brd-condition-tile {
  position: relative;
  display: flex;
  align-items: center;
  padding: 14px 38px 14px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.brd-condition-tile:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.brd-condition-tile--active {
  border-color: var(--accent);
  background: rgba(47,172,102,.06);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.brd-condition-tile__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.brd-condition-tile__check {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background .12s, border-color .12s, color .12s;
}
.brd-condition-tile__check svg { width: 14px; height: 14px; }
.brd-condition-tile--active .brd-condition-tile__check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.brd-condition-tile__input:focus-visible + .brd-condition-tile__check {
  box-shadow: 0 0 0 3px rgba(47,172,102,.25);
}
.brd-condition-tile__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.25;
}

.brd-payment-tile__commission-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
}
.brd-payment-tile__commission-pill:empty { display: none; }

/* Tom Select — override под нашу тему (shadcn-like, dark по умолчанию).
   Tom Select создаёт обёртку .ts-wrapper рядом с <select>. Делаем её
   визуально неотличимой от .brd-input/.brd-select по высоте, border, focus. */
.ts-wrapper {
  /* Снимаем дефолтный фон/бордер обёртки — они дают «хвостики» по углам
     потому что внутренний .ts-control имеет border-radius. */
  background: transparent;
  border: 0;
  padding: 0;
}
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  min-height: 38px;
  padding: 6px 36px 6px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 14px;
  box-shadow: none;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.ts-wrapper.focus .ts-control {
  border-color: var(--accent);
  background: var(--bg-input) !important;
  box-shadow: var(--ring);
  outline: none;
}
/* Tom Select вставляет inline-style background-color: white на input/item
   при фокусе. Перебиваем — фон должен наследоваться от контрола, а цвет
   текста — от темы (light/dark переключаются через CSS-переменные). */
.ts-wrapper .ts-control *,
.ts-wrapper .ts-control > input,
.ts-wrapper .ts-control .item {
  background: transparent !important;
  background-color: transparent !important;
}
.ts-wrapper .ts-control > input,
.ts-wrapper .ts-control .item,
.ts-wrapper .ts-control > .placeholder {
  color: var(--text-primary) !important;
}
.ts-wrapper .ts-control > input::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}
.ts-wrapper .ts-control > input {
  color: var(--text-primary) !important;
  background: transparent !important;
  caret-color: var(--text-primary);
}
.ts-wrapper .ts-control > input::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}
.ts-wrapper .ts-control .item { color: var(--text-primary); }
.ts-wrapper .ts-control > .placeholder { color: var(--text-muted); opacity: 1; }
/* Стрелка-каретка справа */
.ts-wrapper.single .ts-control:after {
  border-color: var(--text-muted) transparent transparent transparent !important;
  right: 14px !important;
}
.ts-wrapper.single.dropdown-active .ts-control:after {
  border-color: transparent transparent var(--text-muted) transparent !important;
}
/* Выпадающий список. !important перебивает дефолтный белый фон Tom Select. */
.ts-dropdown {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-primary);
}
.ts-dropdown .ts-dropdown-content { padding: 4px; }
.ts-dropdown .option {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-primary);
  background: transparent;
  opacity: 1;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}
.ts-dropdown .option.selected {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 600;
}
/* Дефолтное правило Tom Select делает выбранный item полу-прозрачным,
   из-за чего весь список текста выглядит как «исчезающий». Возвращаем opacity. */
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .item { opacity: 1 !important; }
.ts-dropdown .no-results {
  padding: 10px 12px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}
.ts-wrapper input::placeholder { color: var(--text-muted); }
.brd-payment-tile__info {
  display: inline-block;
  margin-top: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  align-self: flex-start;
}
.brd-payment-tile__info:hover { color: var(--accent-strong, var(--accent)); }

/* Шаги в модалке «О безопасной сделке» */
.brd-modal--lg .brd-modal__section { max-width: 520px; }
.brd-safe-deal-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.brd-safe-deal-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.brd-safe-deal-steps__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(47,172,102,.10);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.brd-safe-deal-steps__icon svg { width: 18px; height: 18px; }

/* Способы оплаты в основной части страницы листинга — крупные чипы
   с иконкой, названием и подсказкой. Видно с первого взгляда что
   принимает продавец. */
.brd-detail-payments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.brd-detail-payment {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: border-color .12s, background .12s;
}
.brd-detail-payment:hover { border-color: var(--border-strong); }
.brd-detail-payment__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
}
.brd-detail-payment__icon svg { width: 20px; height: 20px; }
.brd-detail-payment__body { display: flex; flex-direction: column; min-width: 0; }
.brd-detail-payment__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}
.brd-detail-payment__descr {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
}
/* Safe deal — фирменный фиолетовый акцент (как кнопка на сайдбаре). */
.brd-detail-payment--safe {
  background: rgba(169, 0, 255, .06);
  border-color: rgba(169, 0, 255, .35);
}
.brd-detail-payment--safe .brd-detail-payment__icon {
  background: rgba(169, 0, 255, .12);
  color: #a900ff;
}

.brd-empty-cta {
  background: var(--bg-card);
  border: 1px dashed var(--border-strong);
  border-radius: var(--card-radius);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  margin: var(--space-2) 0 var(--space-6);
}
.brd-empty-cta__icon { font-size: 44px; line-height: 1; margin-bottom: var(--space-3); opacity: .55; }
.brd-empty-cta__title { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--text-primary); }
.brd-empty-cta__text {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 440px;
  margin: 0 auto var(--space-5);
  line-height: 1.5;
}

/* ── 15. Modal ────────────────────────────────────────────────── */

.brd-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: 1000;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  overflow-y: auto;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.brd-modal-overlay.active { display: flex; align-items: center; }

.brd-modal {
  width: 100%;
  max-width: 480px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: brd-modal-in .18s ease-out;
}
@keyframes brd-modal-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.brd-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-3);
}
.brd-modal__title { font-size: 17px; font-weight: 700; margin: 0; }
.brd-modal__close {
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brd-modal__close:hover { background: var(--bg-hover); color: var(--text-primary); }

.brd-modal__section { padding: var(--space-3) var(--space-5); }
.brd-modal__section-title { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.brd-modal__section-value { font-size: 14px; color: var(--text-primary); }

.brd-modal__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.brd-modal__row-label { font-size: 14px; color: var(--text-primary); }

.brd-modal__divider { height: 1px; background: var(--border); margin: var(--space-2) 0; }

.brd-modal__password-grid { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.brd-modal__password-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

/* City picker modal */
.brd-modal--city { display: flex; flex-direction: column; max-height: min(80vh, 640px); }
.brd-city-popular-wrap { border-bottom: 1px solid var(--border); }
.brd-city-list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-2);
  max-height: 280px;
  overflow-y: auto;
}
.brd-city-list--search { padding: 8px var(--space-3) var(--space-3); max-height: 320px; }
.brd-city-item {
  padding: 9px var(--space-5);
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  margin: 1px var(--space-3);
  transition: background .1s;
}
.brd-city-list--search .brd-city-item { margin: 1px 0; padding-left: 10px; padding-right: 10px; }
.brd-city-item:hover { background: var(--bg-hover); }
.brd-city-item--active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.brd-city-empty { padding: var(--space-4) var(--space-5); font-size: 13px; color: var(--text-muted); text-align: center; }

/* ── 16. Dropdown ─────────────────────────────────────────────── */

.brd-dropdown { position: relative; }
.brd-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 14px;
}
.brd-dropdown__trigger:hover { background: var(--bg-hover); color: var(--text-primary); }

.brd-dropdown__menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 100;
  animation: brd-modal-in .12s ease-out;
}
.brd-dropdown.active .brd-dropdown__menu { display: block; }

.brd-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.brd-dropdown__item:hover { background: var(--bg-hover); color: var(--text-primary); }
.brd-dropdown__item svg { color: var(--text-muted); flex-shrink: 0; }

.brd-dropdown__divider { height: 1px; background: var(--border); margin: 6px -6px; }

/* ── 17. Badge / pill / alert / table ─────────────────────────── */

.brd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--bg-input);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.brd-badge--success { background: var(--success-soft); color: var(--accent); border-color: transparent; }
.brd-badge--warn,
.brd-badge--warning { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.brd-badge--danger,
.brd-badge--error { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.brd-badge--info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.brd-badge--muted { background: var(--bg-input); color: var(--text-muted); border-color: transparent; }

.brd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-secondary);
}
.brd-pill--clickable { cursor: pointer; transition: background .12s, border-color .12s; }
.brd-pill--clickable:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); }

.brd-alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: 14px;
  margin-bottom: var(--space-3);
  border: 1px solid transparent;
}
.brd-alert--success { background: var(--success-soft); color: var(--accent); border-color: var(--accent); }
.brd-alert--error,
.brd-alert--danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.brd-alert--warn,
.brd-alert--warning { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.brd-alert--info    { background: var(--info-soft); color: var(--info); border-color: var(--info); }
.brd-alert strong   { color: inherit; }
/* Текстовые ссылки внутри алерта подхватывают его цвет и подчёркиваются.
   Кнопки (`.brd-btn`) внутри алерта — это полноценный CTA, у них собственный
   цвет фона/текста, унаследованный цвет/подчёркивание бы их сломали. */
.brd-alert a:not(.brd-btn) { color: inherit; text-decoration: underline; }
.brd-alert .brd-btn { text-decoration: none; }

.brd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.brd-table th, .brd-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.brd-table th { font-weight: 600; color: var(--text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.brd-table tr:hover td { background: var(--bg-hover); }

/* ── 18. Search form (filters bar) ────────────────────────────── */

.brd-search-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  margin-bottom: var(--space-5);
}
.brd-search-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
}

/* ── 19. Pagination ───────────────────────────────────────────── */

.brd-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-6) 0;
}
.brd-pagination a, .brd-pagination__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
}
.brd-pagination a:hover { background: var(--bg-hover); color: var(--text-primary); }
.brd-pagination__current { background: var(--bg-subtle); color: var(--text-primary); border-color: var(--border-strong); font-weight: 600; }

/* ── 20. Detail layout ────────────────────────────────────────── */

.brd-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-4);
}
.brd-detail__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }

/* Header: title + action row (favorite). */
.brd-detail__header { display: flex; flex-direction: column; gap: var(--space-3); }
.brd-detail__title { font-size: 28px; font-weight: 700; color: var(--text-primary); margin: 0; line-height: 1.2; }
.brd-detail__header-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.brd-detail__fav { gap: 6px; }
.brd-detail__fav svg { width: 16px; height: 16px; }
.brd-detail__fav--active { color: var(--accent); }
.brd-detail__fav--active svg { fill: var(--accent); }

/* Gallery */
.brd-detail__gallery { display: flex; flex-direction: column; gap: var(--space-3); }
.brd-detail__photo-main {
  aspect-ratio: 4/3;
  background: var(--bg-input);
  border-radius: var(--card-radius);
  overflow: hidden;
  cursor: zoom-in;
}
.brd-detail__photo-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brd-detail__photo-main--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  cursor: default;
}
.brd-detail__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
.brd-detail__thumb {
  aspect-ratio: 1;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s;
}
.brd-detail__thumb:hover { border-color: var(--border-strong); }
.brd-detail__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sections (chars, description) */
.brd-detail__section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--space-5);
}
.brd-detail__section-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0 0 var(--space-4); }
.brd-detail__attrs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-6);
  row-gap: var(--space-3);
  margin: 0;
  font-size: 14px;
}
.brd-detail__attrs dt { color: var(--text-muted); }
.brd-detail__attrs dd { margin: 0; color: var(--text-primary); }
.brd-detail__description { font-size: 14px; line-height: 1.6; color: var(--text-primary); white-space: pre-wrap; }

/* Footer meta (id, date, views, report) */
.brd-detail__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.brd-detail__meta-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.brd-detail__meta-sep { color: var(--text-muted); opacity: .5; }

/* Sticky aside: price card + seller card */
.brd-detail__aside { min-width: 0; }
.brd-detail__sticky { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.brd-detail__pricecard { margin-bottom: 0; }
.brd-detail__price { font-size: 28px; font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-4); line-height: 1.1; }
.brd-detail__phone-revealed { font-size: 20px; font-weight: 600; color: var(--text-primary); padding: 12px; background: var(--bg-subtle); border-radius: var(--radius-sm); text-align: center; }

/* Seller card */
.brd-detail__seller { margin-bottom: 0; padding: var(--space-4); }
.brd-detail__seller-link { display: flex; gap: var(--space-3); text-decoration: none; color: inherit; align-items: center; }
.brd-detail__seller-link:hover .brd-detail__seller-name { color: var(--accent); }
.brd-detail__seller-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.brd-detail__seller-info { min-width: 0; }
.brd-detail__seller-name { font-weight: 600; color: var(--text-primary); font-size: 15px; transition: color .12s; }
.brd-detail__seller-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.brd-detail__seller-row { display: flex; gap: 8px; align-items: center; margin-top: var(--space-3); font-size: 13px; color: var(--text-muted); }
.brd-detail__seller-row svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── 21. Profile ──────────────────────────────────────────────── */

.brd-profile, .brd-pub-profile__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.brd-profile__avatar,
.brd-profile__avatar--placeholder,
.brd-pub-profile__avatar,
.brd-pub-profile__avatar--placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.brd-profile__avatar-wrap, .brd-pub-profile__avatar-wrap { position: relative; }
.brd-profile__avatar-edit {
  position: absolute;
  bottom: 0; right: 0;
  width: 28px; height: 28px;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--bg);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
}
.brd-pub-profile__bio { color: var(--text-secondary); margin-top: 6px; line-height: 1.55; }
.brd-pub-profile__meta { color: var(--text-muted); font-size: 13px; margin-top: 4px; }

/* ── 22. Chat ─────────────────────────────────────────────────── */

.brd-chat {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  overflow: hidden;
  height: calc(100vh - var(--header-h) - var(--space-12));
  min-height: 480px;
}

/* Roster (left column) */
.brd-chat__roster {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.brd-chat__roster-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.brd-chat__roster-title { font-size: 15px; font-weight: 700; margin: 0; }
.brd-chat__dialogs { flex: 1; overflow-y: auto; min-height: 0; }
.brd-chat__dialog {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.brd-chat__dialog:hover { background: var(--bg-hover); }
.brd-chat__dialog--active { background: var(--accent-soft); }
.brd-chat__dialog-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}
.brd-chat__dialog-username {
  font-weight: 600; color: var(--text-primary); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brd-chat__dialog-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.brd-chat__dialog-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}
.brd-chat__dialog-subject {
  font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.brd-chat__dialog-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}

.brd-chat__new-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.brd-chat__new-actions { display: flex; gap: var(--space-2); }
.brd-chat__new-form .brd-input,
.brd-chat__new-form .brd-textarea { width: 100%; }

/* Viewport (right column) */
.brd-chat__viewport {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}

.brd-chat__placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--text-muted);
  text-align: center;
}
.brd-chat__placeholder svg { opacity: .5; }
.brd-chat__placeholder p { margin: 0; font-size: 14px; }

/* Active conversation — JS sets style.display = 'flex' */
.brd-chat__active {
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.brd-chat__vp-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-card);
}
.brd-chat__back {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 18px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: none;  /* mobile-only */
}
.brd-chat__back:hover { background: var(--bg-hover); color: var(--text-primary); }
.brd-chat__vp-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brd-chat__vp-username { font-weight: 700; font-size: 15px; color: var(--text-primary); }
.brd-chat__vp-subject {
  font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.brd-chat__messages {
  flex: 1;
  padding: var(--space-4);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  background: var(--bg-subtle);
}

.brd-chat__msg {
  max-width: 70%;
  align-self: flex-start;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
}
.brd-chat__msg--mine {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.brd-chat__msg-body { white-space: pre-wrap; }
.brd-chat__msg-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; opacity: .7; }
.brd-chat__msg-time { display: inline; font-size: 11px; opacity: .8; }
.brd-chat__msg-img { display: block; max-width: 240px; max-height: 240px; border-radius: var(--radius-sm); margin-top: 6px; }
.brd-chat__msg-reply {
  background: rgba(0,0,0,0.06);
  border-left: 2px solid var(--accent);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 4px;
}
.brd-chat__msg--mine .brd-chat__msg-reply { background: rgba(255,255,255,0.18); border-left-color: #fff; }

/* Sender (bottom message input) */
.brd-chat__sender {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.brd-chat__sender textarea,
.brd-chat__sender .brd-input {
  flex: 1;
  min-height: 38px;
  height: 38px;
  max-height: 120px;
  resize: none;
  padding: 8px 12px;
}
.brd-chat__attach {
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.brd-chat__attach:hover { background: var(--bg-hover); color: var(--text-primary); }

.brd-chat__error,
.brd-chat__loading {
  padding: var(--space-3);
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.brd-chat__error { color: var(--danger); }

.brd-chat__quote {
  padding: 6px 10px;
  background: var(--bg-input);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--text-secondary);
}
.brd-chat__quote-author { font-weight: 600; color: var(--accent); }

/* ── 23. Notifications ────────────────────────────────────────── */

.brd-notifications { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius); overflow: hidden; }
.brd-notifications__header { padding: var(--space-4); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.brd-notifications__list { display: flex; flex-direction: column; }
/* Quota-блок на форме создания объявления: бейдж + текст. */
.brd-quota {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--card-radius);
}
/* Атрибут [hidden] по умолчанию = display:none, но любой `.brd-quota`
   с display:flex его перебивает по специфичности. Возвращаем приоритет. */
.brd-quota[hidden] { display: none; }
.brd-quota__text { flex: 1; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.brd-paid-badge {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 5px solid currentColor;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}
.brd-paid-badge--danger { color: var(--danger); }
.brd-paid-badge--warn   { color: var(--warn); }
.brd-paid-badge--ok     { color: var(--accent); }

.brd-link { color: var(--accent); text-decoration: none; }
.brd-link:hover { text-decoration: underline; }
.brd-btn[disabled], .brd-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Promotion: жёлтая подсветка цены (когда listing.price_highlight_until > NOW). */
.brd-price-highlight {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
  background: #ffe66b;
  color: #1a1a1a;
}

/* Dropdown menu — shadcn-like. Управляется JS через .open класс. */
.brd-dropdown { position: relative; display: inline-block; }
.brd-dropdown__menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
  padding: 4px;
  z-index: 1000;
}
.brd-dropdown.open .brd-dropdown__menu { display: block; }
.brd-dropdown__item {
  display: flex;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.brd-dropdown__item:hover { background: var(--bg-hover); }
.brd-dropdown__item--danger { color: var(--danger); }
.brd-dropdown__item--danger:hover { background: var(--danger-soft); }
.brd-dropdown__sep { height: 1px; background: var(--border); margin: 4px 0; }

.brd-mylistings__stats { display: flex; gap: var(--space-4); margin-top: 8px; font-size: 13px; color: var(--text-muted); }
.brd-mylistings__stats span { display: inline-flex; gap: 6px; align-items: center; }
.brd-mylistings__stats svg { width: 14px; height: 14px; flex-shrink: 0; }
.brd-mylistings__meta-sep { color: var(--text-muted); opacity: .6; padding: 0 2px; }

.brd-stats__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }
.brd-stats__cell { padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: 10px; background: var(--bg-subtle); }
.brd-stats__label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.brd-stats__value { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-top: 2px; }
.brd-stats__spark { width: 100%; height: 28px; display: block; margin-top: 4px; }

.brd-notif { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); display: flex; gap: var(--space-3); align-items: flex-start; position: relative; }
.brd-notif:last-child { border-bottom: none; }
.brd-notif--unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--border-strong); }
.brd-notif--unread.brd-notif--success::before, .brd-notif--unread:has(.brd-notif__icon--success)::before { background: var(--success); }
.brd-notif--unread:has(.brd-notif__icon--warn)::before    { background: var(--warn); }
.brd-notif--unread:has(.brd-notif__icon--danger)::before  { background: var(--danger); }
.brd-notif--unread:has(.brd-notif__icon--info)::before    { background: var(--info); }
.brd-notif__icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.brd-notif__icon svg { width: 18px; height: 18px; }
.brd-notif__icon--success { background: var(--success); }
.brd-notif__icon--warn    { background: var(--warn); }
.brd-notif__icon--danger  { background: var(--danger); }
.brd-notif__icon--info    { background: var(--info); }
.brd-notif__body { flex: 1; min-width: 0; }
.brd-notif__entity { font-size: 13px; margin-bottom: 4px; }
.brd-notif__entity-label { color: var(--text-muted); margin-right: 4px; }
.brd-notif__entity-title { color: var(--text-primary); font-weight: 600; }
a.brd-notif__entity-title { color: var(--accent); text-decoration: none; }
a.brd-notif__entity-title:hover { text-decoration: underline; }
.brd-notif__text { color: var(--text-primary); font-size: 14px; }
.brd-notif__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.brd-notif__time { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ── 24. My listings / favorites ──────────────────────────────── */

.brd-mylistings { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius); }
.brd-mylistings__header { padding: var(--space-4); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.brd-mylistings__list { display: flex; flex-direction: column; }
.brd-mylistings__item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.brd-mylistings__item:last-child { border-bottom: none; }
.brd-mylistings__thumb,
.brd-mylistings__thumb-placeholder {
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.brd-mylistings__info { flex: 1; min-width: 0; }
.brd-mylistings__title { font-weight: 600; color: var(--text-primary); font-size: 15px; display: inline-block; text-decoration: none; }
.brd-mylistings__title:hover { color: var(--accent); }
.brd-mylistings__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.brd-mylistings__actions { display: flex; gap: var(--space-2); align-items: center; flex-shrink: 0; align-self: center; }

.brd-favorites { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }

/* ── 25. Wallet ───────────────────────────────────────────────── */

.brd-wallet-card {
  background: linear-gradient(135deg, var(--accent), var(--accent-pressed));
  color: #fff;
  border-radius: var(--card-radius);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}
.brd-wallet-card__label { font-size: 12px; opacity: .8; text-transform: uppercase; letter-spacing: 0.06em; }
.brd-wallet-card__balance { font-size: 32px; font-weight: 700; margin-top: 6px; letter-spacing: -0.02em; }
.brd-wallet-card__currency { font-size: 16px; opacity: .85; margin-left: 4px; }
.brd-tx-list { display: flex; flex-direction: column; }
.brd-tx-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.brd-tx-item__desc { font-weight: 500; }
.brd-tx-item__type { font-size: 12px; color: var(--text-muted); }
.brd-tx-item__amount { font-weight: 700; }
.brd-tx--plus { color: var(--accent); }
.brd-tx--minus { color: var(--danger); }

/* ── 26. Admin / moderation ───────────────────────────────────── */

.brd-admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.brd-admin-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--space-4);
}
.brd-admin-stat__num { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.brd-admin-stat__label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.brd-admin-stat--link { display: block; color: inherit; transition: border-color .12s, background .12s; }
.brd-admin-stat--link:hover { border-color: var(--accent); background: var(--bg-hover); }
.brd-admin-stat--link:hover .brd-admin-stat__label { color: var(--accent); }
.brd-admin-users { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius); overflow: hidden; }
.brd-admin-user { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); align-items: center; }
.brd-admin-user__info { flex: 1; }

.brd-mod-list { display: flex; flex-direction: column; gap: var(--space-3); }
.brd-mod-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--space-4);
}
.brd-mod-card__header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.brd-mod-card__type { font-size: 12px; padding: 2px 8px; background: var(--bg-input); border-radius: 999px; color: var(--text-secondary); }
.brd-mod-card__reporter { font-size: 12px; color: var(--text-muted); }
.brd-mod-card__time { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.brd-mod-card__reason { font-weight: 600; }
.brd-mod-card__desc { color: var(--text-secondary); margin-top: 4px; }
.brd-mod-card__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }

/* ── 27. Comments / reactions ─────────────────────────────────── */

/* ── Comments section (post page) ─────────────────────────────── */

.brd-comments { margin-top: var(--space-6); }

.brd-comments__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.brd-comments__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}
.brd-comments__count {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 2px 8px;
  border-radius: 999px;
}

.brd-comment-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color .15s, box-shadow .15s;
}
.brd-comment-form:focus-within {
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.brd-comment-form__input {
  border: none;
  background: transparent;
  padding: 0;
  resize: vertical;
  min-height: 80px;
  font-size: 14px;
  line-height: 1.55;
}
.brd-comment-form__input:focus { outline: none; box-shadow: none; background: transparent; border: none; }
.brd-comment-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.brd-comment-form__hint { font-size: 12px; color: var(--text-muted); }

.brd-comments__login-hint {
  padding: var(--space-4);
  text-align: center;
  background: var(--bg-card);
  border: 1px dashed var(--border-strong);
  border-radius: var(--card-radius);
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.brd-comments__empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px dashed var(--border-strong);
  border-radius: var(--card-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.brd-comments__empty svg { opacity: .4; }
.brd-comments__empty p { font-size: 14px; }

.brd-comments__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.brd-comment {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.brd-comment:last-child { border-bottom: none; }

.brd-comment__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  overflow: hidden;
  text-decoration: none;
}
.brd-comment__avatar img { width: 100%; height: 100%; object-fit: cover; }
.brd-comment__avatar:hover { opacity: .85; }

.brd-comment__body { flex: 1; min-width: 0; }

.brd-comment__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: 4px;
}
.brd-comment__author {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
  text-decoration: none;
}
.brd-comment__author:hover { color: var(--accent); }
.brd-comment__time { font-size: 12px; color: var(--text-muted); }
.brd-comment__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Comment actions — single line: Ответить · 😂1 · 😊 */
.brd-comment__actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 4px; position: relative;
}
.brd-comment__reactions { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.brd-comment__reactions:empty { display: none; }
.brd-comment__reply-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--text-muted); font-size: 12px; font-weight: 500;
  transition: color .15s;
}
.brd-comment__reply-btn:hover { color: var(--accent); }
.brd-comment__react-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--text-muted); display: inline-flex; align-items: center;
  transition: color .15s; font-size: 14px;
}
.brd-comment__react-btn:hover { color: var(--text-primary); }

/* Threaded replies (1 level) */
.brd-comment__replies {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.brd-comment--reply {
  border-left: 2px solid var(--accent-soft);
  border-bottom: none;
  padding: var(--space-2) 0 var(--space-2) 12px;
}
.brd-comment--reply:hover { border-left-color: var(--accent); }

/* Reply indicator in form */
.brd-comment-reply-indicator {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; margin-bottom: 8px;
  background: var(--accent-soft); border-radius: 8px;
  font-size: 12px; color: var(--text-secondary);
}
.brd-comment-reply-indicator strong { color: var(--accent); }
.brd-comment-reply-indicator__close {
  background: none; border: none; cursor: pointer;
  font-size: 16px; color: var(--text-muted); padding: 0 0 0 8px;
}
.brd-comment-reply-indicator__close:hover { color: var(--text-primary); }

/* Small pills for comments */
.brd-pill--sm { font-size: 11px; padding: 2px 6px; gap: 3px; }

.brd-comment-form-legacy { margin: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.brd-reactions-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0; position: relative; z-index: 2; }
.brd-post-card__reactions-area { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; flex: 1; }

/* Emoji picker popover (панелька реакций как на SHKAF) */
.brd-emoji-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
  z-index: 100;
  animation: brd-modal-in .14s ease-out;
}
.brd-emoji-picker__btn {
  font-size: 22px;
  padding: 4px;
  cursor: pointer;
  border-radius: 8px;
  border: none;
  background: none;
  transition: transform .15s;
  font-family: 'Noto Color Emoji', sans-serif;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.brd-emoji-picker__btn:hover {
  transform: scale(1.3);
  background: var(--bg-hover);
}

/* ── 28. Suggest dropdown (header search) ─────────────────────── */

.brd-suggest {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 60;
}
.brd-suggest:empty { display: none !important; }
.brd-suggest__item {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .1s;
}
.brd-suggest__item:hover { background: var(--bg-hover); }
.brd-suggest__title { font-weight: 500; font-size: 14px; color: var(--text-primary); }
.brd-suggest__price { font-size: 12px; color: var(--accent); margin-top: 2px; }

/* ── 29. Upload zone ──────────────────────────────────────────── */

.brd-upload-zone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--card-radius);
  padding: var(--space-8);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  color: var(--text-secondary);
}
.brd-upload-zone:hover,
.brd-upload-zone--drag { border-color: var(--accent); background: var(--accent-soft); color: var(--text-primary); }
.brd-upload-zone__hint { 
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
 }
.brd-upload-zone__sub { font-size: 12px; color: var(--text-muted); }

.brd-upload-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.brd-upload-preview {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-input);
}
.brd-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.brd-upload-preview__remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 24px; height: 24px;
  border: none;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.brd-upload-preview--loading::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.6);
}

/* ── 30. Lightbox ─────────────────────────────────────────────── */

.brd-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
}
.brd-lightbox--open { display: flex; }
.brd-lightbox__img { max-width: 90vw; max-height: 90vh; border-radius: var(--radius-sm); }
.brd-lightbox__close, .brd-lightbox__prev, .brd-lightbox__next {
  position: absolute;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
}
.brd-lightbox__close { top: 20px; right: 20px; }
.brd-lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.brd-lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
.brd-lightbox__counter { position: absolute; top: 20px; left: 20px; color: #fff; font-size: 13px; }
.brd-gallery-thumb { cursor: zoom-in; border-radius: var(--radius); overflow: hidden; }

/* ── 31. Burger / mobile ──────────────────────────────────────── */

.brd-burger {
  display: none;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-secondary);
  align-items: center;
  justify-content: center;
}
.brd-burger:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ── 32. Utility / misc ───────────────────────────────────────── */

.brd-link { color: var(--accent); text-decoration: none; }
.brd-link:hover { text-decoration: underline; }
.brd-city { font-weight: 600; }

/* ── 33. Responsive ───────────────────────────────────────────── */

@media (max-width: 960px) {
  .brd-layout { grid-template-columns: 1fr; padding: var(--space-4); gap: var(--space-4); }
  .brd-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-height: 100vh;
    background: var(--bg);
    padding: var(--space-6) var(--space-4);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .25s ease;
    border-right: 1px solid var(--border);
  }
  .brd-sidebar--open { transform: translateX(0); }
  .brd-burger { display: inline-flex; }
  .brd-header__search { display: none; }
  .brd-detail { grid-template-columns: 1fr; }
  .brd-chat { grid-template-columns: 1fr; height: calc(100vh - var(--header-h) - var(--space-8)); }
  .brd-chat__viewport { display: none; }
  .brd-chat--active .brd-chat__roster { display: none; }
  .brd-chat--active .brd-chat__viewport { display: flex; }
  .brd-chat--active .brd-chat__back { display: inline-flex; }
  .brd-cat-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .brd-listing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .brd-header { padding: 0 var(--space-3) !important; }
  .brd-header__actions .brd-btn:not(.brd-header__icon) span { display: none; }
  .brd-cat-tiles { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .brd-cat-tile { min-height: 76px; padding: var(--space-3); border-radius: var(--radius); }
  .brd-cat-tile__icon { font-size: 24px; }
  .brd-cat-tile__name { font-size: 13px; }
  .brd-listing-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .brd-recs__item { flex-basis: 160px; }
  .brd-city-heading, .brd-category-heading { font-size: 18px; }
  .brd-section-title { font-size: 16px; }
}

/* ===== Admin nav (горизонтальные табы поверх админ-страниц) ===== */
.brd-admin-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-4); padding: var(--space-2); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius); }
.brd-admin-nav__link { padding: 6px 12px; border-radius: 6px; font-size: 13px; color: var(--text-secondary); text-decoration: none; transition: background 0.12s, color 0.12s; }
.brd-admin-nav__link:hover { background: var(--bg-hover); color: var(--text-primary); }
.brd-admin-nav__link--active { background: var(--accent); color: #fff; }
.brd-admin-nav__link--active:hover { background: var(--accent); color: #fff; }
.brd-admin-tree { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius); }
.brd-admin-tree__row { display: flex; align-items: center; gap: var(--space-2); padding: 8px var(--space-3); border-bottom: 1px solid var(--border); }
.brd-admin-tree__row:last-child { border-bottom: none; }
.brd-admin-tree__name { flex: 1; }
.brd-admin-tree__actions { display: flex; gap: 6px; }
.brd-admin-form-row { display: flex; gap: var(--space-2); align-items: end; flex-wrap: wrap; }
.brd-admin-form-row .brd-form-group { margin-bottom: 0; flex: 1; min-width: 160px; }

/* ===== Moderator cabinet (минимальный кабинет модератора) ===== */
/* Кабинет модератора (/mod/*). Стилизуется через те же токены, что и
   основной UI, поэтому переключение data-theme работает автоматически. */
.brd-mod-body { background: var(--bg-subtle); color: var(--text-primary); min-height: 100vh; }

/* Theme toggle: одна кнопка с двумя SVG. В светлой теме — луна (предложение
   переключить на тёмную), в тёмной — солнце. Управляется data-theme. */
.brd-theme-toggle .brd-theme-toggle__sun { display: none; }
.brd-theme-toggle .brd-theme-toggle__moon { display: block; }
[data-theme="dark"] .brd-theme-toggle .brd-theme-toggle__sun { display: block; }
[data-theme="dark"] .brd-theme-toggle .brd-theme-toggle__moon { display: none; }
.brd-mod-header {
    display: flex; align-items: center; gap: var(--space-4);
    padding: 10px var(--space-4);
    background: var(--bg-card); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 50;
}
.brd-mod-header__brand { display: flex; align-items: center; gap: 8px; }
.brd-mod-header__logo {
    width: 28px; height: 28px; border-radius: 6px;
    background: var(--accent); color: #fff; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}
.brd-mod-header__title { font-weight: 700; font-size: 14px; }
.brd-mod-header__nav { display: flex; gap: 6px; flex: 1; margin-left: var(--space-3); flex-wrap: wrap; }
.brd-mod-header__link {
    padding: 6px 12px; border-radius: 6px; font-size: 13px;
    color: var(--text-secondary); text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.brd-mod-header__link:hover { background: var(--bg-hover); color: var(--text-primary); }
.brd-mod-header__link--active { background: var(--accent); color: #fff; }
.brd-mod-header__link--active:hover { background: var(--accent); color: #fff; }
.brd-mod-header__user { display: flex; align-items: center; gap: 8px; }
.brd-mod-header__username { font-size: 13px; color: var(--text-secondary); }
.brd-mod-content { max-width: 1280px; margin: 0 auto; padding: var(--space-4); }
@media (max-width: 768px) {
    .brd-mod-header { flex-wrap: wrap; gap: var(--space-2); }
    .brd-mod-header__nav { order: 3; flex-basis: 100%; margin-left: 0; }
}

/* ===== Error pages (404 / 403 / 500 / 429 / 405) ===== */
.brd-error { max-width: 560px; margin: 60px auto; text-align: center; padding: var(--space-4); }
.brd-error__code {
    font-size: 96px; font-weight: 800; letter-spacing: -0.04em;
    color: var(--accent); line-height: 1; margin-bottom: 12px;
}
.brd-error__title { font-size: 22px; font-weight: 700; margin: 0 0 12px; color: var(--text-primary); }
.brd-error__msg { font-size: 15px; color: var(--text-secondary); margin: 0 0 24px; line-height: 1.5; }
.brd-error__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 600px) {
    .brd-error__code { font-size: 72px; }
}

/* ===== Tabs (used on /my/listings) ===== */
.brd-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.brd-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    font-weight: 500;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
}
.brd-tab:hover { color: var(--text-primary); background: var(--bg-subtle); }
.brd-tab--active { color: var(--accent); border-bottom-color: var(--accent); }
.brd-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--bg-subtle);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}
.brd-tab--active .brd-tab__count { background: var(--accent-soft); color: var(--accent); }

/* ===== Post photo gallery (used in PostCard) ===== */
.brd-post-photos {
    display: grid;
    gap: 4px;
    margin: 10px 0;
    border-radius: 10px;
    overflow: hidden;
    max-height: 420px;
}
.brd-post-photos__item {
    display: block;
    position: relative;
    background: var(--bg-subtle);
    overflow: hidden;
    min-height: 0;
}
.brd-post-photos__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.brd-post-photos--1 { grid-template-columns: 1fr; aspect-ratio: 16 / 9; }
.brd-post-photos--2 { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; }
.brd-post-photos--3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 16 / 10;
}
.brd-post-photos--3 .brd-post-photos__item:first-child {
    grid-row: span 2;
}
.brd-post-photos--4 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    aspect-ratio: 4 / 3;
}
.brd-post-photos--4 .brd-post-photos__item:first-child {
    grid-row: span 3;
}
.brd-post-photos--5 {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 16 / 9;
}
.brd-post-photos--5 .brd-post-photos__item:first-child {
    grid-row: span 2;
}
@media (max-width: 600px) {
    .brd-post-photos { max-height: 280px; }
}

/* ===== Listing expiry progress (used in /my/listings and listing page) ===== */
.brd-expiry {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.brd-expiry__bar {
    width: 100%;
    height: 6px;
    /* --bg-subtle на светлой теме видим, на тёмной почти сливается с карточкой.
       Контрастная rgba-подложка работает на обоих фонах. */
    background: rgba(127, 127, 127, 0.22);
    border-radius: 999px;
    overflow: hidden;
}
[data-theme="dark"] .brd-expiry__bar {
    background: rgba(255, 255, 255, 0.10);
}
.brd-expiry__fill {
    height: 100%;
    transition: width .3s ease, background-color .3s ease;
    border-radius: inherit;
}
.brd-expiry__label {
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
/* Зелёный → жёлтый → красный.
   Цвета подобраны так, чтобы быть различимыми и на светлой, и на тёмной теме
   (для warn используем сатуратный yellow, не оранжевый — он раньше тонул в
   тексте). */
.brd-expiry--ok      .brd-expiry__fill { background: #22c55e; }
.brd-expiry--warn    .brd-expiry__fill { background: #eab308; }
.brd-expiry--danger  .brd-expiry__fill { background: #ef4444; }
.brd-expiry--expired .brd-expiry__fill { background: #ef4444; }
.brd-expiry--ok      .brd-expiry__label { color: #16a34a; font-weight: 500; }
.brd-expiry--warn    .brd-expiry__label { color: #ca8a04; font-weight: 500; }
.brd-expiry--danger  .brd-expiry__label,
.brd-expiry--expired .brd-expiry__label { color: #ef4444; font-weight: 600; }
[data-theme="dark"] .brd-expiry--ok    .brd-expiry__label { color: #4ade80; }
[data-theme="dark"] .brd-expiry--warn  .brd-expiry__label { color: #facc15; }
[data-theme="dark"] .brd-expiry--danger .brd-expiry__label,
[data-theme="dark"] .brd-expiry--expired .brd-expiry__label { color: #f87171; }

/* Compact variant for /my/listings cards: тоньше полоса, меньше шрифт. */
.brd-expiry--compact { margin-top: 6px; max-width: 280px; }
.brd-expiry--compact .brd-expiry__bar { height: 4px; }
.brd-expiry--compact .brd-expiry__label { font-size: 11px; }

/* AI auto-fill button and progress */
.brd-ai-fill { margin: 8px 0 0; }
.brd-ai-fill__progress {
  padding: 10px 14px; border-radius: 8px;
  background: rgba(35,171,103,0.1); color: rgb(35,171,103);
  font-size: 14px; font-weight: 500;
  animation: brd-ai-pulse 1.5s ease-in-out infinite;
}
@keyframes brd-ai-pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* Subcategory tiles */
.brd-subcategories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.brd-subcategories__item {
  display: inline-block;
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.brd-subcategories__item:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Category attribute filters */
.brd-category-filters {
  margin: 12px 0 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.brd-category-filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 14px;
}
.brd-category-filters__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brd-category-filters__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.brd-category-filters__range {
  display: flex;
  gap: 6px;
}
.brd-category-filters__range .brd-input {
  width: 50%;
}
.brd-category-filters__checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}
.brd-category-filters__submit {
  margin-top: 12px;
}
.brd-select--sm {
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
@media (max-width: 600px) {
  .brd-category-filters__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Orders / Escrow ── */
.brd-myorders { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius); }
.brd-myorders__header { padding: var(--space-4); border-bottom: 1px solid var(--border); }
.brd-myorders__list { display: flex; flex-direction: column; }
.brd-myorders__item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.brd-myorders__item:last-child { border-bottom: none; }
.brd-myorders__thumb,
.brd-myorders__thumb-placeholder {
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  overflow: hidden;
}
.brd-myorders__thumb img { width: 100%; height: 100%; object-fit: cover; }
.brd-myorders__info { flex: 1; min-width: 0; }
.brd-myorders__title { font-weight: 600; color: var(--text-primary); font-size: 15px; }
.brd-myorders__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.brd-myorders__meta-sep { color: var(--text-muted); opacity: .6; padding: 0 2px; }
.brd-myorders__price { font-weight: 600; font-size: 14px; margin-top: 4px; color: var(--text-primary); }
.brd-myorders__actions { display: flex; gap: var(--space-2); align-items: center; flex-shrink: 0; align-self: center; }
.brd-order-action { display: inline; }
.brd-btn--danger-text { color: var(--danger) !important; }

.brd-buy-info { margin-bottom:12px; }
.brd-buy-info__row { display:flex; justify-content:space-between; padding:4px 0; font-size:14px; }
.brd-buy-info__total { font-weight:700; font-size:15px; border-top:1px solid var(--border); padding-top:8px; margin-top:4px; }
.brd-buy-reserved { text-align:center; padding:12px; color:var(--warning); font-weight:600; }

/* === Admin: «скрыть пост из ленты» (только админам) ====================== */
.brd-post-card { position: relative; }
.brd-post-card__admin-hide {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, background .12s, color .12s, border-color .12s;
  z-index: 2;
}
.brd-post-card:hover .brd-post-card__admin-hide,
.brd-post-card__admin-hide:focus-visible { opacity: 1; }
.brd-post-card__admin-hide:hover {
  background: var(--danger-soft, rgba(220,53,69,.12));
  border-color: var(--danger, #dc3545);
  color: var(--danger, #dc3545);
}
.brd-post-card__admin-hide:disabled,
.brd-post-card__admin-hide.is-loading { opacity: .6; cursor: progress; }
@media (hover: none) {
  /* На тач-устройствах :hover не работает — оставляем кнопку видимой постоянно. */
  .brd-post-card__admin-hide { opacity: .85; }
}

/* === Admin: страница /admin/hidden-posts ================================= */
.brd-admin-hidden { display: flex; flex-direction: column; gap: var(--space-3); }
.brd-admin-hidden__item { padding: 16px; }
.brd-admin-hidden__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: flex-start;
  flex-wrap: wrap;
}

/* === Баннер «пост скрыт админом» (виден только админу на странице поста) ===*/
.brd-post-hidden-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 0 16px;
  background: var(--danger-soft, rgba(220,53,69,.12));
  border: 1px solid var(--danger, #dc3545);
  border-radius: 10px;
  color: var(--danger, #dc3545);
}
.brd-post-hidden-banner svg { flex-shrink: 0; margin-top: 1px; }
.brd-post-hidden-banner__text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; }
.brd-post-hidden-banner__text strong { color: var(--danger, #dc3545); }
.brd-post-hidden-banner__text span { color: var(--text-secondary); }
.brd-post-hidden-banner__text a { color: var(--danger, #dc3545); text-decoration: underline; }

/* === Премодерация постов (Sprint 8) ====================================== */
/* Плашка статуса в углу карточки. Видна только автору. */
.brd-post-card__status {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  pointer-events: auto;
  z-index: 2;
}
.brd-post-card__status svg { flex-shrink: 0; }
.brd-post-card__status--pending {
  background: rgba(47, 172, 102, .12);
  color: var(--accent, #2fac66);
  border: 1px solid rgba(47, 172, 102, .35);
}
.brd-post-card__status--rejected {
  background: var(--danger-soft, rgba(220, 53, 69, .12));
  color: var(--danger, #dc3545);
  border: 1px solid rgba(220, 53, 69, .35);
}

/* Полноразмерный баннер на странице поста. */
.brd-post-status-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 0 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1.4;
}
.brd-post-status-banner svg { flex-shrink: 0; margin-top: 1px; }
.brd-post-status-banner strong { display: block; margin-bottom: 2px; font-weight: 600; }
.brd-post-status-banner--pending {
  background: rgba(47, 172, 102, .08);
  border-color: rgba(47, 172, 102, .35);
  color: var(--accent, #2fac66);
}
.brd-post-status-banner--rejected {
  background: var(--danger-soft, rgba(220, 53, 69, .1));
  border-color: rgba(220, 53, 69, .4);
  color: var(--danger, #dc3545);
}
.brd-post-status-banner--pending > div,
.brd-post-status-banner--rejected > div { color: var(--text-secondary); }
.brd-post-status-banner--pending > div strong,
.brd-post-status-banner--rejected > div strong { color: inherit; }

/* === Top progress bar для SPA-навигации в пост ============================ */
/* Полоска фиксирована поверх всего, включая шапку (z-index выше шапки). */
.brd-spa-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #2fac66 0%, #4dd391 100%);
  box-shadow: 0 0 8px rgba(47, 172, 102, .6);
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  border-radius: 0 2px 2px 0;
}

/* === Маркетинговые кампании ============================================== */

/* Сигнап-баннер бонуса */
.brd-signup-bonus-banner {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(47,172,102,.12), rgba(47,172,102,.04));
  border: 1px solid var(--accent, #2fac66);
  border-radius: 12px;
}
.brd-signup-bonus-banner__emoji { font-size: 28px; line-height: 1; }
.brd-signup-bonus-banner__text { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.brd-signup-bonus-banner__text strong { color: var(--accent, #2fac66); font-size: 20px; font-weight: 700; }
.brd-signup-bonus-banner__hint { font-size: 12px; color: var(--text-secondary); }

/* Общая таблица для админ-кабинетов (универсальная) */
.brd-table {
  width: 100%; border-collapse: collapse;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--card-radius);
  overflow: hidden;
}
.brd-table th, .brd-table td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.brd-table thead th { background: var(--bg-input); color: var(--text-secondary); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.brd-table tbody tr:last-child td { border-bottom: none; }
.brd-table__num { text-align: right; font-variant-numeric: tabular-nums; }

/* KPI tiles */
.brd-campaign-kpi {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.brd-kpi { padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }
.brd-kpi__label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.brd-kpi__value { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.brd-kpi__hint  { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Воронка */
.brd-funnel__step { margin-bottom: 14px; }
.brd-funnel__step:last-child { margin-bottom: 0; }
.brd-funnel__head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.brd-funnel__label { color: var(--text-secondary); font-weight: 500; }
.brd-funnel__val   { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.brd-funnel__bar {
  width: 100%; height: 8px; background: var(--bg-input); border-radius: 4px; overflow: hidden;
}
.brd-funnel__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #2fac66), #4dd391);
  border-radius: 4px;
  transition: width .35s ease-out;
}
.brd-funnel__pct { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* Chart container */
.brd-chart { width: 100%; color: var(--text-secondary); }
.brd-chart-legend {
  display: flex; gap: 18px; font-size: 12px; color: var(--text-muted); margin-top: 6px; padding-left: 36px;
}
.brd-chart-legend__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.brd-chart-legend__dot--clicks  { background: #2fac66; }
.brd-chart-legend__dot--signups { background: #a900ff; }

/* Top sources */
.brd-campaign-sources { list-style: none; padding: 0; margin: 0; counter-reset: src; }
.brd-campaign-sources li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.brd-campaign-sources li:last-child { border-bottom: none; }
.brd-campaign-sources__src {
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary);
}
.brd-campaign-sources__count { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* === Bonus credit UI ===================================================== */

/* Маленькая «i» в кружке для подсказки про бонус (открывает модалку) */
.brd-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  margin-left: 4px; padding: 0;
  background: white;
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 10px; font-weight: 700; font-family: ui-serif, Georgia, serif;
  font-style: italic;
  cursor: pointer;
  vertical-align: middle;
}

/* Bonus-строка в popover'е шапки */
.brd-wallet-popover__bonus {
  display: flex; justify-content: space-between; align-items: center;
  margin: 5px 0 15px; padding: 10px 12px;
  background: var(--accent-soft, rgba(47,172,102,.10));
  border-radius: 8px;
  font-size: 13px;
}
.brd-wallet-popover__bonus-label { color: var(--text-secondary); display: inline-flex; align-items: center; }
.brd-wallet-popover__bonus-value { font-weight: 700; color: var(--accent, #2fac66); font-variant-numeric: tabular-nums; }

/* Bonus-блок на странице /wallet, под основным балансом */
.brd-wallet-card__bonus {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid #ffffff38;
  font-size: 14px;
}
.brd-wallet-card__bonus-label { color: white; display: inline-flex; align-items: center; }
.brd-wallet-card__bonus-value { font-weight: 700; color: white; font-variant-numeric: tabular-nums; }

/* ── Category Compact Toolbar (C1005) ─────────────────────────── */

.brd-category-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.brd-category-toolbar__subcats {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.brd-category-toolbar__subcats::-webkit-scrollbar { display: none; }

.brd-pill--sm {
  display: inline-block;
  padding: 4px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.brd-pill--sm:hover,
.brd-pill--sm.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

.brd-category-toolbar__form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.brd-category-toolbar__form input[type="search"] {
  flex: 1;
  min-width: 140px;
}
.brd-category-toolbar__price {
  width: 90px;
}
.brd-category-toolbar__form select {
  width: auto;
  min-width: 90px;
}

/* --- Listing card in chat --- */
.brd-chat__listing-card {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  margin: 4px 0;
  border-radius: 10px;
  background: rgba(0,0,0,.04);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
  max-width: 340px;
}
.brd-chat__listing-card:hover { background: rgba(0,0,0,.08); }
.brd-chat__card-img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.brd-chat__card-noimg {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.brd-chat__card-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.brd-chat__card-title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brd-chat__card-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent, #2e7d32);
  margin-top: 2px;
}

html[data-theme="dark"] .brd-chat__listing-card { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .brd-chat__listing-card:hover { background: rgba(255,255,255,.10); }
html[data-theme="dark"] .brd-chat__card-noimg { background: rgba(255,255,255,.08); }

.brd-search-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .brd-category-toolbar__form input[type="search"] {
    flex-basis: 100%;
  }
  .brd-category-toolbar__price {
    width: calc(50% - 3px);
  }
}

/* Spinner */
.brd-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border, #333);
  border-top-color: var(--accent, #26ac67);
  border-radius: 50%;
  animation: brd-spin .6s linear infinite;
}
@keyframes brd-spin { to { transform: rotate(360deg); } }