/* ============================================================== */
/* Barterly Polish Suite — Wave 8.1 Round 6                       */
/* Микро-интеракции, анимации, focus styles, View Transitions,    */
/* skeleton loaders, scroll-driven animations, A11y improvements. */
/* ============================================================== */

/* ============================================================
 * 1. View Transitions (поддерживаемые браузеры)
 * ============================================================ */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: 200ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
}
::view-transition-new(root) {
  animation: 320ms cubic-bezier(0, 0, 0.2, 1) both fade-in;
}
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Theme toggle: circular reveal */
html.vt-theme::view-transition-old(root) {
  animation: none;
  mix-blend-mode: normal;
}
html.vt-theme::view-transition-new(root) {
  animation: 480ms cubic-bezier(0.4, 0, 0.2, 1) both vt-circle-reveal;
}
@keyframes vt-circle-reveal {
  from {
    clip-path: circle(0 at var(--vt-theme-cx, 50vw) var(--vt-theme-cy, 50vh));
  }
  to {
    clip-path: circle(150vmax at var(--vt-theme-cx, 50vw) var(--vt-theme-cy, 50vh));
  }
}

/* ============================================================
 * 2. Reveal animations (scroll-triggered)
 * ============================================================ */
.reveal,
[data-reveal],
.w7-fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible,
.reveal.reveal-in,
[data-reveal].is-visible,
.w7-fade-in.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger via custom property on parent. */
[data-stagger] > * {
  --stagger-base: 0ms;
  transition-delay: calc(var(--stagger-base) + var(--stagger-i, 0) * 80ms);
}

/* Variants */
[data-reveal="left"]  { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="zoom"]  { transform: scale(0.94); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible,
[data-reveal="zoom"].is-visible { transform: none; }

/* Reduce motion: всё мгновенно. */
@media (prefers-reduced-motion: reduce) {
  .reveal, [data-reveal], .w7-fade-in {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}
.rm-reduce ::view-transition-old(root),
.rm-reduce ::view-transition-new(root) { animation: none !important; }

/* ============================================================
 * 3. Header scroll states (полировка)
 * ============================================================ */
.site-header {
  transition: background 200ms ease, backdrop-filter 200ms ease,
              border-color 200ms ease, transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
              padding 200ms ease;
}
.site-header.is-scrolled {
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background: rgba(250, 250, 246, 0.78);
  border-bottom-color: rgba(11, 11, 15, 0.08);
}
.theme-dark .site-header.is-scrolled {
  background: rgba(10, 10, 12, 0.78);
  border-bottom-color: rgba(250, 250, 246, 0.08);
}
.site-header.is-shrunk { padding-top: 4px; padding-bottom: 4px; }
.site-header.is-hidden { transform: translateY(-100%); }

/* ============================================================
 * 4. Buttons / interactive polish
 * ============================================================ */
.btn-primary, .btn-secondary, .btn-lime,
.w7-btn, .nav-cta, .nav-link, .nav-link-ghost {
  transition: background-color 180ms ease, color 180ms ease,
              transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 180ms ease, border-color 180ms ease;
  will-change: transform;
}
.btn-primary:active, .btn-secondary:active, .btn-lime:active,
.w7-btn:active, .nav-cta:active {
  transform: translateY(1px) scale(0.98);
}

/* Ripple-on-click for [data-ripple] elements (declarative). */
[data-ripple] { position: relative; overflow: hidden; }
[data-ripple]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%),
              currentColor 0%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}
[data-ripple]:active::after { opacity: 0.18; transition: none; }

/* ============================================================
 * 5. Focus-visible (a11y polish)
 * Видимый фокус только при keyboard nav, скрыт на mouse click.
 * ============================================================ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid #5B21B6;
  outline-offset: 2px;
  border-radius: 6px;
}
.theme-dark :focus-visible {
  outline-color: #C8FF00;
}
button:focus-visible, a:focus-visible, .nav-cta:focus-visible {
  outline-offset: 3px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #5B21B6;
  outline-offset: 1px;
}

/* ============================================================
 * 6. Skip-link (a11y)
 * ============================================================ */
/* [DEVIN-FIX r16] Skip-link: hidden by default, only shown on keyboard
   focus (`:focus-visible`). Mouse-click focus does NOT reveal it.
   Uses `clip-path` to fully hide — transform-only hide allowed the link
   to flash on initial paint in some browsers. */
[data-skip-link],
.skip-link {
  position: fixed !important;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 18px;
  background: #C8FF00;
  color: #0A0A0C;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  border: 2px solid #0A0A0C;
  /* keep in DOM for screen readers / keyboard nav, but visually clipped */
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  transition: clip-path 0s, width 0s, height 0s;
}
[data-skip-link]:focus-visible,
.skip-link:focus-visible {
  clip-path: none;
  width: auto;
  height: auto;
  overflow: visible;
  outline: none;
}

/* ============================================================
 * 6.4. Generic <details> chevron indicator
 * [DEVIN-FIX r16] /faq page used <details class="card-pad"> with
 * `list-none` and no custom marker, so closed items showed no
 * expand affordance \u2014 users (e.g. on \u00abСколько стоит?\u00bb)
 * thought there was no answer. Add a default rotating chevron.
 * ============================================================ */
details.card-pad > summary {
  position: relative;
  padding-right: 32px;
}
details.card-pad > summary::-webkit-details-marker { display: none; }
details.card-pad > summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-75%) rotate(45deg);
  opacity: 0.6;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease;
}
details.card-pad[open] > summary::after {
  transform: translateY(-25%) rotate(-135deg);
  opacity: 1;
}
details.card-pad > summary:hover::after { opacity: 1; }

/* ============================================================
 * 6.5. Native checkbox/radio visibility (esp. dark theme)
 * [DEVIN-FIX r16] On dark backgrounds the system-default checkbox
 * border is barely visible (e.g. /signup consent). Force a visible
 * accent + outline on both themes.
 * ============================================================ */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #5B21B6;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.theme-dark input[type="checkbox"],
.theme-dark input[type="radio"] {
  accent-color: #C8FF00;
  outline: 1px solid rgba(250, 250, 246, 0.55);
  outline-offset: 1px;
  border-radius: 3px;
  background: rgba(250, 250, 246, 0.08);
}
.theme-dark input[type="checkbox"]:checked,
.theme-dark input[type="radio"]:checked {
  outline-color: #C8FF00;
}
.theme-dark input[type="checkbox"]:focus-visible,
.theme-dark input[type="radio"]:focus-visible {
  outline: 2px solid #C8FF00;
  outline-offset: 2px;
}

/* [DEVIN-FIX r17.6] /signup ПД-consent чекбокс. До этого `.bx-consent-row`
   был просто <label> без флекс-раскладки → крошечный нативный чекбокс
   плотно прилегал к тексту, и текст ссылок налезал на бокс. */
.bx-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bl-text, #2A2A2E);
}
.theme-dark .bx-consent-row { color: #D4D4D8; }
.bx-consent-cb {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
  margin: 2px 0 0;
}
.bx-consent-text { flex: 1; min-width: 0; }
.bx-consent-text a { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
 * 7. Form validation states
 * ============================================================ */
input.is-invalid, textarea.is-invalid, select.is-invalid {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
input.is-valid, textarea.is-valid, select.is-valid {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.10);
}

/* ============================================================
 * 8. Spotlight effect (hover)
 * ============================================================ */
.spotlight {
  position: relative;
  isolation: isolate;
}
.spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle 280px at var(--mx, 50%) var(--my, 50%),
              rgba(200, 255, 0, 0.10), transparent 70%);
  opacity: 0;
  transition: opacity 240ms ease;
  z-index: 0;
}
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

/* ============================================================
 * 9. Skeleton loaders
 * ============================================================ */
.skeleton {
  background: linear-gradient(90deg, #ECECE6 0%, #F5F5F0 50%, #ECECE6 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s linear infinite;
  border-radius: 6px;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}
.theme-dark .skeleton {
  background: linear-gradient(90deg, #1F1F22 0%, #2A2A2D 50%, #1F1F22 100%);
}
@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ============================================================
 * 10. Toast notifications (window.barterlyToast)
 * ============================================================ */
.bx-toast-root {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.bx-toast {
  pointer-events: auto;
  padding: 12px 16px;
  border-radius: 12px;
  background: #0A0A0C;
  color: #FAFAF6;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 12px 36px rgba(11, 11, 15, 0.18), 0 2px 8px rgba(11, 11, 15, 0.12);
  border: 1px solid rgba(250, 250, 246, 0.10);
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 280ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 360px;
}
.bx-toast.is-in { opacity: 1; transform: translateX(0); }
.bx-toast.is-out { opacity: 0; transform: translateX(40px); }
.bx-toast-success { background: #059669; }
.bx-toast-error   { background: #DC2626; }
.bx-toast-warning { background: #D97706; }
.bx-toast-info    { background: #0A0A0C; }

/* ============================================================
 * 11. Connection-aware: slow-2g — отключаем тяжёлые эффекты
 * ============================================================ */
.net-slow * {
  animation-duration: 0ms !important;
  transition-duration: 0ms !important;
}
.net-slow .spotlight::before,
.net-slow .skeleton {
  animation: none !important;
  background: none !important;
}

/* ============================================================
 * 12. Container queries для responsive cards
 * ============================================================ */
@supports (container-type: inline-size) {
  .w7-card, .help-card, [data-card-link] {
    container-type: inline-size;
  }
}

/* ============================================================
 * 13. Smooth scroll (если не отключено reduce-motion)
 * ============================================================ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================
 * 14. Selection styling
 * ============================================================ */
::selection { background: #C8FF00; color: #0A0A0C; }
.theme-dark ::selection { background: #C8FF00; color: #0A0A0C; }

/* ============================================================
 * 15. Print styles (для документов)
 * ============================================================ */
@media print {
  .site-header, .w8-static-footer, .w8-footer, .w7-announce,
  ._w2-footer, .bx-toast-root, [data-pwa-install], #barterly-cookie {
    display: none !important;
  }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; font-size: 90%; opacity: .7; }
}

/* ============================================================
 * 16. Content visibility для off-screen sections (perf)
 * ============================================================ */
.w7-section, [data-section] {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* ============================================================
 * 17. Smooth image loading (fade-in once loaded)
 * ============================================================ */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 360ms ease;
}
img[loading="lazy"].is-loaded,
img[loading="lazy"]:is([src]) {
  opacity: 1;
}

/* ============================================================
 * 18. Misc polish
 * ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  /* [DEVIN-FIX r15] clip:rect deprecated → clip-path:inset(50%). */
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Smooth dropdown/menu open */
[data-collapsible] {
  overflow: hidden;
  transition: grid-template-rows 240ms cubic-bezier(0.4, 0, 0.2, 1);
  display: grid;
  grid-template-rows: 0fr;
}
[data-collapsible] > * { min-height: 0; }
[data-collapsible][data-open="true"] { grid-template-rows: 1fr; }

/* PWA install prompt button (hidden by default) */
[data-pwa-install][hidden] { display: none !important; }
[data-pwa-install] {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 50;
  padding: 12px 18px;
  background: #C8FF00;
  color: #0A0A0C;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  border-radius: 999px;
  border: 2px solid #0A0A0C;
  box-shadow: 0 8px 24px rgba(11, 11, 15, 0.18);
  cursor: pointer;
  transition: transform 200ms ease;
}
[data-pwa-install]:hover { transform: translateY(-2px); }

/* ============================================================
 * R7 OVERRIDES — комплексная полировка по фидбеку:
 * dark-theme CTA, sticky widgets, header search, форма логина,
 * Telegram-кнопка, dashboard stat-карты, glow blobs containment.
 * ============================================================ */

/* === 7.1 Dark-theme CTA: бренд-lime вместо bone-белого === */
.theme-dark .nav-cta {
  background: #C8FF00 !important;
  color: #0A0A0C !important;
  border-color: #C8FF00 !important;
  font-weight: 600;
}
.theme-dark .nav-cta:hover {
  background: #B5E600 !important;
  border-color: #B5E600 !important;
  color: #0A0A0C !important;
  transform: translateY(-1px);
}

/* dashboard "+ Создать оффер" / brand-page CTAs and similar */
.theme-dark .btn-primary {
  background: #C8FF00 !important;
  color: #0A0A0C !important;
  border-color: #C8FF00 !important;
}
.theme-dark .btn-primary:hover {
  background: #B5E600 !important;
  border-color: #B5E600 !important;
  color: #0A0A0C !important;
}
.theme-dark .btn-secondary {
  border-color: rgba(250,250,246,0.45);
  color: #FAFAF6;
}
.theme-dark .btn-secondary:hover {
  background: rgba(250,250,246,0.06);
  border-color: #FAFAF6;
  color: #FAFAF6;
}

/* === 7.2 Search button: filled и кликабельный (R8: ярче, заметнее) === */
.nav-search {
  background: rgba(11, 11, 15, 0.05) !important;
  border: 1px solid rgba(11, 11, 15, 0.12) !important;
  box-shadow: 0 1px 2px rgba(11, 11, 15, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.18s ease !important;
}
.nav-search:hover {
  background: rgba(11, 11, 15, 0.08) !important;
  border-color: #0A0A0C !important;
  transform: translateY(-1px);
}
.theme-dark .nav-search {
  background: rgba(250, 250, 246, 0.06) !important;
  border-color: rgba(250, 250, 246, 0.18) !important;
}
.theme-dark .nav-search:hover {
  background: rgba(250, 250, 246, 0.12) !important;
  border-color: #C8FF00 !important;
  color: #FAFAF6 !important;
}
.theme-dark .nav-search kbd {
  background: rgba(250, 250, 246, 0.08);
  border-color: rgba(250, 250, 246, 0.22);
  color: rgba(250, 250, 246, 0.7);
}

/* nav-icon-btn (theme toggle, notification bell) — match the search filled-bg */
.nav-icon-btn {
  background: rgba(11, 11, 15, 0.04) !important;
  transition: all 0.18s ease;
}
.nav-icon-btn:hover {
  background: rgba(11, 11, 15, 0.08) !important;
  transform: translateY(-1px);
}
.theme-dark .nav-icon-btn {
  background: rgba(250, 250, 246, 0.06) !important;
}
.theme-dark .nav-icon-btn:hover {
  background: rgba(250, 250, 246, 0.12) !important;
  border-color: #C8FF00 !important;
  color: #FAFAF6 !important;
}

/* === 7.3 Card-pad form: контраст и ритм в dark-theme === */
.theme-dark .card-pad {
  background: #15151A;
  border-color: rgba(250, 250, 246, 0.08);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}
.theme-dark .card-pad input,
.theme-dark .card-pad select,
.theme-dark .card-pad textarea {
  background: rgba(11, 11, 15, 0.55);
  border-color: rgba(250, 250, 246, 0.12);
  color: #FAFAF6;
}
.theme-dark .card-pad input:focus,
.theme-dark .card-pad select:focus,
.theme-dark .card-pad textarea:focus {
  border-color: #C8FF00;
  box-shadow: 0 0 0 3px rgba(200, 255, 0, 0.18);
}
.theme-dark .card-pad input::placeholder {
  color: rgba(250, 250, 246, 0.35);
}
.theme-dark .card-pad label {
  color: rgba(250, 250, 246, 0.55);
}

/* Login submit button override on dark theme — lime брендовая */
.theme-dark .card-pad .btn-primary {
  background: #C8FF00;
  color: #0A0A0C;
  border-color: #C8FF00;
}

/* Dashboard «+ Создать оффер» (.qa-primary) — lime instead of bone */
.theme-dark .dash-hero .qa-primary {
  background: #C8FF00 !important;
  color: #0A0A0C !important;
  border-color: #C8FF00 !important;
}
.theme-dark .dash-hero .qa-primary:hover {
  background: #B5E600 !important;
  border-color: #B5E600 !important;
}

/* === 7.4 Telegram кнопка — единый стиль с CTA === */
.btn-tg-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #0A0A0C;
  color: #FAFAF6;
  border: 1px solid #0A0A0C;
  text-decoration: none;
}
.btn-tg-brand:hover {
  background: #5B21B6;
  border-color: #5B21B6;
  color: #FAFAF6;
  transform: translateY(-1px);
}
.btn-tg-brand svg { width: 18px; height: 18px; }
.theme-dark .btn-tg-brand {
  background: #C8FF00;
  color: #0A0A0C;
  border-color: #C8FF00;
}
.theme-dark .btn-tg-brand:hover {
  background: #B5E600;
  border-color: #B5E600;
  color: #0A0A0C;
}

/* === 7.5 Live ticker: показывать только на главной + landing === */
/* По умолчанию скрыт; показывается только когда body имеет marker class */
#barterly-pulse { display: none !important; }
body[data-route="home"] #barterly-pulse,
body[data-route="landing"] #barterly-pulse,
body[data-page-public="1"] #barterly-pulse {
  display: block !important;
}
/* На очень узких экранах (≤ 768px) тикер всегда скрыт даже на главной */
@media (max-width: 768px) {
  body #barterly-pulse { display: none !important; }
}

/* === 7.6 Support FAB: компактный круг, label — sr-only === */
.support-fab .support-fab-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}
.support-fab {
  width: 52px !important;
  height: 52px !important;
  overflow: visible !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 940 !important;
}
.support-fab svg {
  width: 22px;
  height: 22px;
}
/* Скрыть close-glyph по умолчанию (показывает app.js при открытии панели) */
.support-fab .support-fab-glyph-close { display: none; }
.support-fab[aria-expanded="true"] .support-fab-glyph-chat { display: none; }
.support-fab[aria-expanded="true"] .support-fab-glyph-close { display: inline-block; }

/* === 7.7 Dashboard stat-карточки: усилить border на dark === */
.theme-dark .kpi-card,
.theme-dark .dashboard-card,
.theme-dark .stat-card,
.theme-dark .dash-stat,
.theme-dark .w7-card,
.theme-dark .help-card {
  background: #15151A;
  border-color: rgba(250, 250, 246, 0.1);
}
.theme-dark .kpi-card:hover,
.theme-dark .dashboard-card:hover,
.theme-dark .stat-card:hover,
.theme-dark .dash-stat:hover,
.theme-dark .w7-card:hover {
  border-color: rgba(200, 255, 0, 0.4);
  box-shadow: 0 18px 38px -16px rgba(200, 255, 0, 0.12);
}

/* === 7.8 Hero glow blobs containment — не текут за viewport === */
section, .container-narrow, .container-wide, main {
  overflow-x: clip;
}
/* Но не блокируем sticky/dropdown потомков: используем clip-path вместо overflow */
.site-header, .w8-static-footer, header, footer { overflow: visible; }

/* === 7.9 Min-height for main: чтобы dashboard не схлопывался === */
main, ._w2-main, [role="main"] {
  min-height: calc(100vh - 240px);
}

/* === 7.10 Footer marquee — читаемые цвета на обеих темах === */
.w8-static-footer__marquee-item .text-stroke-white {
  -webkit-text-stroke: 1px #FAFAF6;
  color: transparent;
}
.theme-dark .w8-static-footer__marquee-item .text-stroke-white {
  -webkit-text-stroke: 1px rgba(250,250,246,0.85);
}
.w8-static-footer__marquee-item .text-brand-400 { color: #C8FF00; }
.w8-static-footer__marquee-item .text-plasma-400 { color: #A78BFA; }
.theme-dark .w8-static-footer__marquee-item .text-plasma-400 { color: #C4B5FD; }

/* === 7.11 Hide bug-fab fully (на случай если localStorage уже выставлен) === */
.bug-fab[hidden],
body:not([data-bug-enabled]) .bug-fab {
  /* Только если bug-enabled маркер не выставлен через JS — оставляем .bug-fab отображённым,
     потому что кнопка добавляется в DOM только когда _bxBugEnabled() = true (см. app.js r7).
     Это правило служит как страховка для случаев, когда CSS грузится раньше JS. */
}
/* === 7.12 Smooth focus-visible с приоритетом на dark theme === */
.theme-dark :focus-visible {
  outline-color: #C8FF00 !important;
}

/* === 7.13 Tighten container padding on small screens === */
@media (max-width: 640px) {
  .container-narrow, .container-wide {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* === 7.14 Dark theme: link colors in body text ===
   [DEVIN-FIX r9] Исключаем семейство Wave 8.1 кнопок .w7-btn (primary/secondary/ghost),
   .w7-card__link, .w8-static-footer__cta-* и .skip-link.
   Дополнительно оборачиваем `:not(...)`-цепочку в `:where(...)`, чтобы собственная
   специфичность правила была 0,1,1 (а не 0,20,1) — иначе оно перебивало
   `.theme-dark .nav-primary a` и красило все nav-ссылки в lime. */
.theme-dark a:where(:not(.btn-primary):not(.btn-secondary):not(.btn-lime):not(.btn-ghost):not(.nav-cta):not(.nav-cta-ghost):not(.nav-link):not(.nav-link-ghost):not(.nav-search):not(.nav-icon-btn):not(.support-fab):not(.btn-tg-brand):not(.w7-btn):not(.w7-btn--primary):not(.w7-btn--secondary):not(.w7-btn--ghost):not(.w7-card__link):not(.w8-static-footer__cta-lime):not(.w8-static-footer__cta-ghost):not(.w8-static-footer__brand-link):not(.skip-link)) {
  color: #C8FF00;
}
.theme-dark a:where(:not(.btn-primary):not(.btn-secondary):not(.btn-lime):not(.btn-ghost):not(.nav-cta):not(.nav-cta-ghost):not(.nav-link):not(.nav-link-ghost):not(.nav-search):not(.nav-icon-btn):not(.support-fab):not(.btn-tg-brand):not(.w7-btn):not(.w7-btn--primary):not(.w7-btn--secondary):not(.w7-btn--ghost):not(.w7-card__link):not(.w8-static-footer__cta-lime):not(.w8-static-footer__cta-ghost):not(.w8-static-footer__brand-link):not(.skip-link)):hover {
  color: #FFFFFF;
}

/* [DEVIN-FIX r9] Hardening: явно прописываем color через --_btn-fg,
   чтобы будущий generic-link-color override не сломал контраст. */
.theme-dark .w7-btn,
.theme-dark .w7-btn--primary,
.theme-dark .w7-btn--secondary,
.theme-dark .w7-btn--ghost { color: var(--_btn-fg); }

/* [DEVIN-FIX r9] Та же проблема с навигацией/футером в тёмной теме:
   широкое правило `.theme-dark a:not(...)` выше выигрывало по специфичности
   у `.theme-dark .nav-primary a`. Возвращаем дизайнерские цвета явным образом. */
.theme-dark .site-header .nav-primary a,
.theme-dark .site-header .nav-brand,
.theme-dark .site-header .nav-brand .brand-text,
.theme-dark .mobile-menu-panel a,
.theme-dark .w8-static-footer a:not(.w8-static-footer__cta-lime):not(.w8-static-footer__cta-ghost):not(.w8-static-footer__brand-link),
.theme-dark .cmdk-footer-brand,
.theme-dark .breadcrumbs a,
.theme-dark ._w2-breadcrumbs a {
  color: rgba(250, 250, 246, 0.7);
}
.theme-dark .site-header .nav-primary a:hover,
.theme-dark .site-header .nav-primary a.is-active,
.theme-dark .site-header .nav-brand:hover,
.theme-dark .mobile-menu-panel a:hover,
.theme-dark .w8-static-footer a:hover {
  color: #FAFAF6;
}

/* [DEVIN-FIX r9] Mobile header: «Войти» + «Регистрация →» уходят за вьюпорт
   на 375px. На <=640px прячем «Войти» (он есть в бургер-меню), а CTA
   ужимаем по padding'ам. На <=420px CTA тоже уезжает в бургер. */
@media (max-width: 640px) {
  .site-header .nav-link-ghost { display: none; }
  .site-header .nav-cta { padding: 0 12px; font-size: .82rem; }
  .site-header .nav-utils { gap: 6px; }
}
@media (max-width: 420px) {
  .site-header .nav-cta { display: none; }
  .nav-brand .nav-beta { display: none; }
}

/* === 7.15 Body padding-bottom: убираем 36px-void.
 * Включаем 36px ТОЛЬКО когда ticker реально в DOM (worker pages with home+public).
 * На static index.html без ticker — 0px. */
body { padding-bottom: 0 !important; }
@media (min-width: 769px) {
  body:has(#barterly-pulse) { padding-bottom: 36px !important; }
}

/* ============================================================
 * R8 — Command Palette (search) redesign
 * Bigger, more prominent, sleeker animations.
 * ============================================================ */
#barterly-cmdk[data-cmdk="root"] {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  display: block;
}
#barterly-cmdk[data-open="true"] { pointer-events: auto; }

#barterly-cmdk .cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(11, 11, 15, 0.55);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
#barterly-cmdk[data-open="true"] .cmdk-overlay {
  opacity: 1;
  pointer-events: auto;
}
.theme-dark #barterly-cmdk .cmdk-overlay {
  background: rgba(0, 0, 0, 0.7);
}

/* === Panel — increased size, modern shadow === */
#barterly-cmdk .cmdk-panel {
  position: fixed;
  top: 14vh;
  left: 50%;
  transform: translateX(-50%) translateY(-12px) scale(0.96);
  z-index: 10002;
  width: 680px !important;
  max-width: min(92vw, 680px) !important;
  background: #FFFFFF;
  border: 1px solid rgba(11, 11, 15, 0.06);
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(11, 11, 15, 0.04),
    0 32px 80px -20px rgba(11, 11, 15, 0.35),
    0 16px 48px -16px rgba(91, 33, 182, 0.18);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 240ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 72vh;
}
#barterly-cmdk[data-open="true"] .cmdk-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.theme-dark #barterly-cmdk .cmdk-panel {
  background: #15151A;
  border-color: rgba(250, 250, 246, 0.08);
  box-shadow:
    0 0 0 1px rgba(200, 255, 0, 0.05),
    0 32px 80px -20px rgba(0, 0, 0, 0.7),
    0 16px 48px -16px rgba(200, 255, 0, 0.08);
}

/* === Header — taller, larger input === */
#barterly-cmdk .cmdk-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(11, 11, 15, 0.06);
}
.theme-dark #barterly-cmdk .cmdk-header {
  border-bottom-color: rgba(250, 250, 246, 0.08);
}
#barterly-cmdk .cmdk-icon {
  flex-shrink: 0;
  width: 22px !important;
  height: 22px !important;
  color: #5B21B6;
}
.theme-dark #barterly-cmdk .cmdk-icon { color: #C8FF00; }

#barterly-cmdk .cmdk-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 0;
  border: none;
  background: transparent;
  font-family: 'Space Grotesk', 'Inter Tight', sans-serif;
  font-size: 1.18rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #0A0A0C;
  outline: none;
}
.theme-dark #barterly-cmdk .cmdk-input { color: #FAFAF6; }
#barterly-cmdk .cmdk-input::placeholder {
  color: rgba(11, 11, 15, 0.35);
  font-weight: 400;
}
.theme-dark #barterly-cmdk .cmdk-input::placeholder {
  color: rgba(250, 250, 246, 0.35);
}

#barterly-cmdk .cmdk-kbd,
#barterly-cmdk kbd {
  flex-shrink: 0;
  padding: 4px 9px;
  background: #F1F1ED;
  border: 1px solid rgba(11, 11, 15, 0.08);
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  color: rgba(11, 11, 15, 0.55);
  line-height: 1;
}
.theme-dark #barterly-cmdk .cmdk-kbd,
.theme-dark #barterly-cmdk kbd {
  background: rgba(250, 250, 246, 0.08);
  border-color: rgba(250, 250, 246, 0.1);
  color: rgba(250, 250, 246, 0.65);
}

/* === Body — scroll area === */
#barterly-cmdk .cmdk-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(11, 11, 15, 0.16) transparent;
}
.theme-dark #barterly-cmdk .cmdk-body {
  scrollbar-color: rgba(250, 250, 246, 0.16) transparent;
}
#barterly-cmdk .cmdk-body::-webkit-scrollbar { width: 6px; }
#barterly-cmdk .cmdk-body::-webkit-scrollbar-thumb {
  background: rgba(11, 11, 15, 0.16);
  border-radius: 3px;
}
.theme-dark #barterly-cmdk .cmdk-body::-webkit-scrollbar-thumb {
  background: rgba(250, 250, 246, 0.16);
}

#barterly-cmdk .cmdk-section {
  padding: 6px 0 10px;
}
#barterly-cmdk .cmdk-section-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(11, 11, 15, 0.45);
  padding: 6px 12px 8px;
}
.theme-dark #barterly-cmdk .cmdk-section-title {
  color: rgba(250, 250, 246, 0.45);
}

#barterly-cmdk .cmdk-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
  margin-bottom: 2px;
}
#barterly-cmdk .cmdk-item:hover,
#barterly-cmdk .cmdk-item[aria-selected="true"],
#barterly-cmdk .cmdk-item.is-active {
  background: rgba(200, 255, 0, 0.12);
  transform: translateX(2px);
}
.theme-dark #barterly-cmdk .cmdk-item:hover,
.theme-dark #barterly-cmdk .cmdk-item[aria-selected="true"],
.theme-dark #barterly-cmdk .cmdk-item.is-active {
  background: rgba(200, 255, 0, 0.08);
}
#barterly-cmdk .cmdk-item-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: rgba(11, 11, 15, 0.04);
  border-radius: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: rgba(11, 11, 15, 0.7);
}
.theme-dark #barterly-cmdk .cmdk-item-icon {
  background: rgba(250, 250, 246, 0.06);
  color: rgba(250, 250, 246, 0.7);
}
#barterly-cmdk .cmdk-item-icon.lime {
  background: #C8FF00;
  color: #0A0A0C;
}
#barterly-cmdk .cmdk-item-body {
  flex: 1 1 auto;
  min-width: 0;
}
#barterly-cmdk .cmdk-item-title {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #0A0A0C;
  margin-bottom: 2px;
  letter-spacing: -0.005em;
}
.theme-dark #barterly-cmdk .cmdk-item-title { color: #FAFAF6; }
#barterly-cmdk .cmdk-item-sub {
  font-size: 12.5px;
  color: rgba(11, 11, 15, 0.5);
  line-height: 1.35;
}
.theme-dark #barterly-cmdk .cmdk-item-sub {
  color: rgba(250, 250, 246, 0.5);
}
#barterly-cmdk .cmdk-item-shortcut,
#barterly-cmdk .cmdk-item-hint {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(11, 11, 15, 0.4);
}
.theme-dark #barterly-cmdk .cmdk-item-shortcut,
.theme-dark #barterly-cmdk .cmdk-item-hint {
  color: rgba(250, 250, 246, 0.4);
}
#barterly-cmdk .cmdk-mark {
  background: rgba(200, 255, 0, 0.4);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}

/* === Footer of cmdk panel — полный редизайн (R8.1) === */
#barterly-cmdk .cmdk-footer {
  flex-shrink: 0;
  padding: 14px 20px;
  border-top: 1px solid rgba(11, 11, 15, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(11, 11, 15, 0.55);
  background:
    linear-gradient(0deg, rgba(91, 33, 182, 0.025), rgba(91, 33, 182, 0)),
    rgba(11, 11, 15, 0.015);
}
.theme-dark #barterly-cmdk .cmdk-footer {
  border-top-color: rgba(250, 250, 246, 0.08);
  color: rgba(250, 250, 246, 0.55);
  background:
    linear-gradient(0deg, rgba(200, 255, 0, 0.03), rgba(200, 255, 0, 0)),
    rgba(0, 0, 0, 0.25);
}
#barterly-cmdk .cmdk-footer-hints {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
#barterly-cmdk .cmdk-footer span,
#barterly-cmdk .cmdk-footer-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
#barterly-cmdk .cmdk-footer kbd {
  /* override smaller kbd sizing for footer */
  padding: 3px 7px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  background: rgba(11, 11, 15, 0.04) !important;
  border: 1px solid rgba(11, 11, 15, 0.06) !important;
  color: rgba(11, 11, 15, 0.7) !important;
  box-shadow: 0 1px 0 rgba(11, 11, 15, 0.04);
  min-width: 18px;
  text-align: center;
  line-height: 1;
}
.theme-dark #barterly-cmdk .cmdk-footer kbd {
  background: rgba(250, 250, 246, 0.06) !important;
  border-color: rgba(250, 250, 246, 0.08) !important;
  color: rgba(250, 250, 246, 0.7) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
#barterly-cmdk .cmdk-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Grotesk', 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: -0.005em;
  color: rgba(11, 11, 15, 0.6);
  text-decoration: none;
}
#barterly-cmdk .cmdk-footer-brand:hover {
  color: #5B21B6;
}
.theme-dark #barterly-cmdk .cmdk-footer-brand {
  color: rgba(250, 250, 246, 0.6);
}
.theme-dark #barterly-cmdk .cmdk-footer-brand:hover {
  color: #C8FF00;
}
#barterly-cmdk .cmdk-footer-brand-mark {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(135deg, #5B21B6, #C8FF00);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0;
  flex-shrink: 0;
}

/* Adaptive: на узких mobile скрываем второстепенные подсказки */
@media (max-width: 540px) {
  #barterly-cmdk .cmdk-footer { padding: 12px 16px; gap: 8px; }
  #barterly-cmdk .cmdk-footer-hints { gap: 8px; }
  #barterly-cmdk .cmdk-footer-hint--secondary { display: none; }
}

/* === Recent searches in panel === */
#barterly-cmdk .cmdk-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 4px;
}
#barterly-cmdk .cmdk-section-action {
  background: transparent;
  border: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(11, 11, 15, 0.4);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 140ms ease, background 140ms ease;
}
#barterly-cmdk .cmdk-section-action:hover {
  color: #0A0A0C;
  background: rgba(11, 11, 15, 0.04);
}
.theme-dark #barterly-cmdk .cmdk-section-action {
  color: rgba(250, 250, 246, 0.4);
}
.theme-dark #barterly-cmdk .cmdk-section-action:hover {
  color: #FAFAF6;
  background: rgba(250, 250, 246, 0.06);
}
#barterly-cmdk .cmdk-recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  color: rgba(11, 11, 15, 0.7);
  transition: background 140ms ease;
}
#barterly-cmdk .cmdk-recent-item:hover {
  background: rgba(11, 11, 15, 0.04);
}
.theme-dark #barterly-cmdk .cmdk-recent-item {
  color: rgba(250, 250, 246, 0.7);
}
.theme-dark #barterly-cmdk .cmdk-recent-item:hover {
  background: rgba(250, 250, 246, 0.06);
}
#barterly-cmdk .cmdk-recent-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: rgba(11, 11, 15, 0.35);
}
.theme-dark #barterly-cmdk .cmdk-recent-icon {
  color: rgba(250, 250, 246, 0.35);
}
#barterly-cmdk .cmdk-recent-q {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === Empty state === */
#barterly-cmdk .cmdk-empty {
  padding: 40px 20px;
  text-align: center;
  color: rgba(11, 11, 15, 0.45);
  font-size: 13.5px;
  line-height: 1.5;
}
.theme-dark #barterly-cmdk .cmdk-empty {
  color: rgba(250, 250, 246, 0.45);
}
#barterly-cmdk .cmdk-empty strong {
  color: #0A0A0C;
  font-weight: 600;
}
.theme-dark #barterly-cmdk .cmdk-empty strong { color: #FAFAF6; }

/* === Mobile-first responsive === */
@media (max-width: 640px) {
  #barterly-cmdk .cmdk-panel {
    top: 8vh !important;
    width: 94vw !important;
    max-width: 94vw !important;
    border-radius: 18px;
  }
  #barterly-cmdk .cmdk-header { padding: 16px 18px; }
  #barterly-cmdk .cmdk-input { font-size: 1.05rem; }
}

/* ============================================================
 * R8 — Static index.html dashboard-style void fix:
 * для страниц через worker — main wrapper minimum height
 * [DEVIN-FIX r10] Старое правило `body[data-route="auth"] > div:not(...)` было
 * слишком широким: оно ловило служебные div'ы (.scroll-progress, .w7-announce)
 * и контейнеры внутри `<header>` (.container-wide.nav-row), раздувало их до
 * 620px каждый и хоронило всё содержимое страницы под огромным «пустым»
 * пространством (видно на /about, /login, /тарифы и т.д.).
 *
 * Sticky-footer уже реализован через `<main class="min-h-[calc(100vh-260px)]">`
 * в Layout JSX, поэтому раздавать min-height по всему body не нужно. Здесь
 * оставляем только базовый bg для тёмной/светлой темы и подкрепляем
 * min-height на самом <main>, если Tailwind-утилита не сматчилась.
 * ============================================================ */
.theme-dark body, body { background: var(--bl-bg, #FAFAF6); }
.theme-dark body { background: var(--bl-ink-900, #0A0A0C); }

/* Sticky-footer fallback: гарантированно тянем <main> до низа экрана.
   Используем `body[data-page]` (его проставляет Layout JSX любому SSR-роуту),
   чтобы правило не задевало статическую главную (она использует `data-route`,
   у неё свой `<main id="main">`). */
body[data-page] > main {
  min-height: calc(100vh - 260px);
}

/* Hide cookie banner overlap with content */
#barterly-cookie {
  z-index: 60 !important;
  margin-bottom: 0;
}

/* ============================================================
 * R8 — Glow blob containment:
 * overflow-x: clip на body, чтобы blobs не leak'али горизонтально.
 * Не ставим на html — это может сломать sticky-header.
 * ============================================================ */
body { overflow-x: clip; }

/* ============================================================
 * [DEVIN-FIX r10] Pricing — отсутствующие классы для /тарифы
 * В components.css есть .pricing-card / .pricing-hero / .pricing-faq-item,
 * но НЕТ .pricing-cards-section, .pricing-compare-*, .pricing-cta-*,
 * .pricing-faq-section / -head / -grid / -q. Из-за этого таблица
 * сравнения «Что входит в каждый план» отрисовывается как голая HTML
 * без рамок и сеток (видно на скриншоте пользователя), а CTA-секция и
 * FAQ-секция не имеют отступов.
 * ============================================================ */
.pricing-cards-section { margin-block: clamp(48px, 7vw, 88px); }

.pricing-compare-section {
  margin-block: clamp(48px, 7vw, 96px);
}
.pricing-compare-head {
  text-align: center;
  margin-bottom: 32px;
}
.pricing-compare-title,
.pricing-cta-title {
  font-family: var(--bl-font-display, 'Space Grotesk', sans-serif);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.025em;
  color: var(--bl-ink-900, #0A0A0C);
  margin: 8px 0 0;
}
.theme-dark .pricing-compare-title,
.theme-dark .pricing-cta-title { color: var(--bl-ink-50, #FAFAF6); }

.pricing-compare-table {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--bl-ink-200, #E2E2DC);
  border-radius: 18px;
  background: var(--bl-bg-elev, #FFFFFF);
}
.theme-dark .pricing-compare-table {
  border-color: var(--bl-ink-700, #34343A);
  background: var(--bl-ink-800, #1F1F23);
}
.pricing-compare-table > table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  color: var(--bl-ink-800, #1F1F23);
}
.theme-dark .pricing-compare-table > table { color: var(--bl-ink-100, #E8E8E2); }
.pricing-compare-table thead th {
  background: var(--bl-ink-50, #FAFAF6);
  padding: 14px 18px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bl-ink-700, #2C2C30);
  border-bottom: 1px solid var(--bl-ink-200, #E2E2DC);
  text-align: center;
}
.theme-dark .pricing-compare-table thead th {
  background: var(--bl-ink-900, #0A0A0C);
  color: var(--bl-ink-200, #E2E2DC);
  border-bottom-color: var(--bl-ink-700, #34343A);
}
.pricing-compare-table thead th.is-highlight {
  color: var(--bl-ink-900, #0A0A0C);
  background: var(--bl-lime, #C8FF00);
  border-bottom-color: var(--bl-ink-900, #0A0A0C);
}
.pricing-compare-table tbody td {
  padding: 14px 18px;
  text-align: center;
  border-top: 1px solid var(--bl-ink-100, #EFEFE9);
  vertical-align: middle;
}
.theme-dark .pricing-compare-table tbody td { border-top-color: var(--bl-ink-700, #34343A); }
.pricing-compare-table tbody tr:first-child td { border-top: 0; }
.pricing-compare-table .text-left { text-align: left; font-weight: 500; }
.pricing-compare-table td.is-highlight {
  background: rgba(200, 255, 0, 0.08);
  font-weight: 700;
}
.theme-dark .pricing-compare-table td.is-highlight {
  background: rgba(200, 255, 0, 0.12);
}

.pricing-faq-section { margin-block: clamp(48px, 7vw, 96px); }
.pricing-faq-head { text-align: center; margin-bottom: 32px; }
.pricing-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px 56px;
  /* [DEVIN-FIX r17.5] align-items: start — иначе закрытый <details> в одной
     row растягивался на высоту открытого соседа и показывал пустой блок. */
  align-items: start;
  max-width: 920px;
  margin: 0 auto;
}
.pricing-faq-q {
  font-family: var(--bl-font-display, 'Space Grotesk', sans-serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--bl-ink-900, #0A0A0C);
}
.theme-dark .pricing-faq-q { color: var(--bl-ink-50, #FAFAF6); }

/* [DEVIN-FIX r17.5] cta-section bottom-margin сокращён с clamp(64,9vw,120px)
   до clamp(24,3vw,48px) — был большой пустой блок перед footer-marquee. */
.pricing-cta-section { margin-block: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 48px); }
.pricing-cta-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--bl-ink-200, #E2E2DC);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--bl-ink-50, #FAFAF6) 0%, var(--bl-bg-elev, #FFFFFF) 100%);
}
.theme-dark .pricing-cta-card {
  border-color: var(--bl-ink-700, #34343A);
  background: linear-gradient(135deg, var(--bl-ink-800, #1F1F23) 0%, var(--bl-ink-900, #0A0A0C) 100%);
}
.pricing-cta-text { flex: 1 1 320px; }
.pricing-cta-sub {
  margin: 8px 0 0;
  color: var(--bl-ink-600, #4B4B4F);
  font-size: 16px;
}
.theme-dark .pricing-cta-sub { color: var(--bl-ink-300, #C8C8C2); }
.pricing-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Mobile: убираем horizontal padding в полосах, чтобы таблица не упиралась */
@media (max-width: 720px) {
  .pricing-compare-table thead th,
  .pricing-compare-table tbody td { padding: 10px 8px; font-size: 13px; }
  .pricing-cta-card { flex-direction: column; align-items: flex-start; }
}

/* Pricing rubles & policy helpers (тоже встречаются в HTML) */
.pricing-rubles { color: var(--bl-ink-700, #2C2C30); font-weight: 500; }
.theme-dark .pricing-rubles { color: var(--bl-ink-200, #E2E2DC); }
.pricing-policy {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--bl-ink-500, #6E6E72);
}
.theme-dark .pricing-policy { color: var(--bl-ink-400, #9C9C9F); }

/* ============================================================
 * [DEVIN-FIX r17] AI Match panel — overlay для match-viz
 * Появляется по клику на ноду (бренд или блогер).
 * Грузит /api/ai/match (Workers AI Llama 3.1) и рисует разбор.
 * ============================================================ */
.match-viz {
  position: relative;
  height: clamp(360px, 56vw, 540px);
  border-radius: var(--bl-r-xl, 24px);
  overflow: hidden;
  background: color-mix(in srgb, var(--bl-bg-soft, #F0F0EA) 70%, transparent);
  border: 1px solid var(--bl-border, rgba(10,10,12,0.08));
}
.match-viz canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
.match-viz canvas:active { cursor: grabbing; }
.match-viz-tip {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  padding: 8px 12px;
  border-radius: var(--bl-r, 12px);
  background: var(--bl-card-bg, #fff);
  color: var(--bl-text);
  box-shadow: var(--bl-card-shadow);
  font-size: 13px;
  transform: translate(8px, 8px);
  opacity: 0;
  transition: opacity .12s var(--bl-ease, cubic-bezier(0.16,1,0.3,1));
  z-index: 5;
  white-space: nowrap;
}
.match-viz-tip[data-show="true"] { opacity: 1; }
.match-viz-legend {
  position: absolute;
  bottom: 12px; left: 12px;
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--bl-text-soft, #52525B);
  background: color-mix(in srgb, var(--bl-card-bg, #fff) 80%, transparent);
  padding: 6px 10px;
  border-radius: var(--bl-r-sm, 8px);
  z-index: 4;
}
.match-viz-legend i {
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 5px;
  vertical-align: middle;
  background: #0B0B0F;
}
.match-viz-legend i.brand { border-radius: 0; }
.match-viz-legend i.blogger { border-radius: 50%; }

.match-viz-onboarding {
  position: absolute;
  inset: 16px 16px auto auto;
  max-width: 320px;
  padding: 18px 20px;
  background: var(--bl-card-bg, #fff);
  border: 1px solid var(--bl-border-strong);
  border-radius: var(--bl-r-lg, 16px);
  box-shadow: var(--bl-card-shadow-hover);
  font-size: 14px;
  z-index: 6;
  transition: opacity .25s var(--bl-ease), transform .25s var(--bl-ease);
}
.match-viz-onboarding[data-show="false"] {
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
}
.match-viz-onboarding-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bl-text-muted);
  margin-bottom: 4px;
}
.match-viz-onboarding-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px;
}
.match-viz-onboarding-steps { margin: 0 0 16px; padding: 0; list-style: none; }
.match-viz-onboarding-steps li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0;
  line-height: 1.4;
}
.match-viz-onboarding-num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bl-accent);
  color: var(--bl-accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.match-viz-tutorial {
  position: absolute;
  bottom: 56px; right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bl-accent);
  color: var(--bl-accent-text);
  padding: 8px 14px;
  border-radius: var(--bl-r-full, 9999px);
  font-size: 13px;
  font-weight: 600;
  z-index: 5;
  transition: opacity .25s var(--bl-ease);
}
.match-viz-tutorial[data-show="false"] {
  opacity: 0;
  pointer-events: none;
}
.match-viz-tutorial-arrow::before { content: "→"; }

/* AI panel */
.match-viz-ai-panel {
  position: absolute;
  inset: auto 16px 16px auto;
  width: min(420px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  background: var(--bl-card-bg, #fff);
  border: 1px solid var(--bl-border-strong);
  border-radius: var(--bl-r-xl, 24px);
  box-shadow: var(--bl-card-shadow-hover);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 7;
  transform: translateY(0);
  transition: opacity .25s var(--bl-ease), transform .25s var(--bl-ease);
}
.match-viz-ai-panel[data-show="false"] {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
}
.match-viz-ai-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bl-border);
}
.match-viz-ai-panel__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--bl-r-full);
  background: var(--bl-accent);
  color: var(--bl-accent-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.match-viz-ai-panel__title {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.match-viz-ai-panel__title > * { min-width: 0; }
.match-viz-ai-panel__source {
  display: inline-flex;
  height: 20px;
  padding: 0 8px;
  align-items: center;
  border-radius: var(--bl-r-full);
  font-size: 11px;
  font-weight: 500;
  background: color-mix(in srgb, var(--bl-violet) 14%, transparent);
  color: var(--bl-violet);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.theme-dark .match-viz-ai-panel__source {
  background: color-mix(in srgb, var(--bl-lime) 18%, transparent);
  color: var(--bl-lime);
}
.match-viz-ai-panel__source[data-source="heuristic"] {
  background: color-mix(in srgb, var(--bl-amber) 18%, transparent);
  color: #92400E;
}
.theme-dark .match-viz-ai-panel__source[data-source="heuristic"] {
  background: color-mix(in srgb, var(--bl-amber) 22%, transparent);
  color: var(--bl-amber);
}
.match-viz-ai-panel__close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--bl-text-soft);
  background: transparent;
  cursor: pointer;
  transition: background .15s var(--bl-ease);
  flex-shrink: 0;
}
.match-viz-ai-panel__close:hover { background: var(--bl-bg-soft); color: var(--bl-text); }
.match-viz-ai-panel__close:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }

.match-viz-ai-panel__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 14px 16px 16px;
  font-size: 13px;
  line-height: 1.5;
}
.match-viz-ai-panel__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bl-text-soft);
  font-size: 13px;
  padding: 16px 0;
}
.match-viz-ai-panel__loading::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: bl-spin 0.8s linear infinite;
}
@keyframes bl-spin { to { transform: rotate(1turn); } }

.match-viz-ai-panel__error {
  padding: 12px;
  border-radius: var(--bl-r);
  background: color-mix(in srgb, var(--bl-red) 10%, transparent);
  color: var(--bl-red);
  font-size: 13px;
}
.match-viz-ai-panel__score-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.match-viz-ai-panel__score {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 8px 14px;
  border-radius: var(--bl-r-lg);
  font-family: var(--bl-font-display, 'Space Grotesk', system-ui, sans-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  background: var(--bl-bg-soft);
  color: var(--bl-text);
}
.match-viz-ai-panel__score small { font-size: 13px; opacity: 0.5; font-weight: 500; }
.match-viz-ai-panel__score.is-strong { background: color-mix(in srgb, var(--bl-emerald) 18%, transparent); color: #065F46; }
.match-viz-ai-panel__score.is-good   { background: color-mix(in srgb, var(--bl-lime) 28%, transparent);   color: #4D7C0F; }
.match-viz-ai-panel__score.is-medium { background: color-mix(in srgb, var(--bl-amber) 22%, transparent);  color: #92400E; }
.match-viz-ai-panel__score.is-weak   { background: color-mix(in srgb, var(--bl-red) 14%, transparent);    color: #991B1B; }
.theme-dark .match-viz-ai-panel__score.is-strong { color: var(--bl-emerald); }
.theme-dark .match-viz-ai-panel__score.is-good   { color: var(--bl-lime); }
.theme-dark .match-viz-ai-panel__score.is-medium { color: var(--bl-amber); }
.theme-dark .match-viz-ai-panel__score.is-weak   { color: #FCA5A5; }
.match-viz-ai-panel__score-label { font-size: 14px; font-weight: 600; }

.match-viz-ai-panel__section { margin-top: 12px; }
.match-viz-ai-panel__section h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bl-text-muted);
  margin: 0 0 6px;
  font-weight: 600;
}
.match-viz-ai-panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.match-viz-ai-panel__list li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
}
.match-viz-ai-panel__list.is-pos li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--bl-emerald);
  font-weight: 700;
}
.match-viz-ai-panel__list.is-neg li::before {
  content: "⚠";
  position: absolute;
  left: 0; top: 0;
}
.match-viz-ai-panel__fmt {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--bl-r-sm);
  background: var(--bl-bg-soft);
  font-size: 13px;
  font-weight: 500;
}
.match-viz-ai-panel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.match-viz-ai-panel__chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--bl-r-full);
  background: color-mix(in srgb, var(--bl-violet) 12%, transparent);
  color: var(--bl-violet);
  font-size: 12px;
  font-weight: 500;
}
.theme-dark .match-viz-ai-panel__chip {
  background: color-mix(in srgb, var(--bl-lime) 16%, transparent);
  color: var(--bl-lime);
}

@media (max-width: 540px) {
  .match-viz-ai-panel {
    width: calc(100% - 16px);
    inset: auto 8px 8px 8px;
  }
  .match-viz-onboarding {
    inset: 8px 8px auto 8px;
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .match-viz-ai-panel,
  .match-viz-onboarding,
  .match-viz-tutorial,
  .match-viz-tip { transition: none; }
  .match-viz-ai-panel__loading::before { animation: none; }
}

/* ============================================================
 * [DEVIN-FIX r17.2] Hero декомпозиция — H1 + 1 CTA + visual demo.
 * Лид/доп. CTA/meta-stats унесены в .w7-hero-support ниже fold.
 * ============================================================ */
.w7-hero--lean {
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(40px, 6vw, 80px);
}
.w7-hero--lean .w7-hero__h1 {
  margin-top: 0;
}
.w7-hero__cta-row--single {
  display: flex;
  margin-top: 28px;
}
.w7-hero__cta-row--single .w7-btn {
  min-width: 280px;
  justify-content: center;
}
@media (max-width: 640px) {
  .w7-hero__cta-row--single .w7-btn { min-width: 100%; }
}

.w7-hero-support {
  padding: clamp(32px, 5vw, 56px) 0;
  border-top: 1px solid var(--bl-border, rgba(10,10,12,0.08));
}
.theme-dark .w7-hero-support {
  border-top-color: rgba(250,250,246,0.08);
}
.w7-hero-support__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: end;
  margin-top: 16px;
}
@media (max-width: 768px) {
  .w7-hero-support__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.w7-hero-support .w7-hero__lead {
  margin: 0;
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.6;
  /* [DEVIN-FIX r17.4] поднят контраст лида над fold:
     light: 52->2A; dark: ink-300 (#C8C8C2) -> #E4E4E7. */
  color: #2A2A2E;
}
.theme-dark .w7-hero-support .w7-hero__lead { color: #E4E4E7; }
.w7-hero__cta-row--secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}
@media (max-width: 768px) {
  .w7-hero__cta-row--secondary { justify-content: flex-start; }
}
.w7-hero-support .w7-hero__meta {
  margin-top: 28px;
}

/* ============================================================
 * [DEVIN-FIX r17.2] Dark-theme second layer:
 * .pricing-cta-card и .match-viz-onboarding фон сливался с body.
 * Делаем чуть светлее и добавляем рамку для отделения.
 * ============================================================ */
.theme-dark .pricing-cta-card {
  background: color-mix(in srgb, var(--bl-bg, #0A0A0C) 70%, var(--bl-ink-100, #FAFAF6) 6%);
  border: 1px solid rgba(250, 250, 246, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.theme-dark .pricing-cta-card::before {
  /* Дополнительный градиент-overlay для глубины */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(91, 33, 182, 0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.theme-dark .pricing-cta-card > * { position: relative; z-index: 1; }

.theme-dark .match-viz-onboarding {
  background: color-mix(in srgb, var(--bl-bg, #0A0A0C) 60%, var(--bl-ink-100, #FAFAF6) 8%);
  border: 1px solid rgba(250, 250, 246, 0.14);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.theme-dark .match-viz-onboarding-eyebrow { color: rgba(200, 255, 0, 0.8); }
.theme-dark .match-viz-onboarding-title { color: #FAFAF6; }
.theme-dark .match-viz-onboarding-steps li { color: var(--bl-ink-300, #C8C8C2); }

/* match-viz canvas-area: тоже добавим second-layer на тёмной теме */
.theme-dark .match-viz {
  background: color-mix(in srgb, var(--bl-bg, #0A0A0C) 80%, var(--bl-ink-100, #FAFAF6) 4%);
  border: 1px solid rgba(250, 250, 246, 0.1);
}

/* ============================================================
 * [DEVIN-FIX r17.2] announce-bar marquee: на мобильном замедляем,
 * на reduce-motion — выключаем (уже есть в styles.css, но дублируем
 * с !important для гарантии).
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .marquee-row-slow,
  .w7-announce .marquee-row-slow,
  .w8-static-footer__marquee-row { animation: none !important; }
  /* Также fade-in анимации входа, скролл-driven и тд — выключены */
  .w7-fade-in { animation: none !important; opacity: 1 !important; transform: none !important; }
}
@media (max-width: 640px) {
  /* На мобильном замедляем маркизу с 60s до 120s — глаза не устают. */
  .marquee-row-slow {
    animation-duration: 120s;
  }
}

/* ============================================================
 * [DEVIN-FIX r17.7] /profile form layout — раньше .profile-grid /
 * .profile-field / .profile-card НЕ имели CSS, инпуты получали
 * системный фон (тёмно-серый) на light-теме, label «наезжал» на input.
 * ============================================================ */
.profile-card {
  display: block;
  padding: 24px clamp(16px, 2vw, 28px);
  border-radius: 16px;
  background: var(--bl-surface, #FFFFFF);
  border: 1px solid var(--bl-border, rgba(10,10,12,.10));
  margin-bottom: 24px;
}
.theme-dark .profile-card {
  background: color-mix(in srgb, #FFFFFF 6%, transparent);
  border-color: rgba(250,250,246,.12);
}
.profile-card h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--bl-ink-900, #0A0A0C);
}
.theme-dark .profile-card h2 { color: #FAFAF6; }
.profile-card .hint {
  color: var(--bl-ink-600, #4B4B4F);
  font-size: 13px;
  margin: 0 0 18px;
}
.theme-dark .profile-card .hint { color: #C4C4C8; }
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 20px;
  margin-top: 4px;
}
.profile-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.profile-field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bl-ink-700, #3F3F46);
  text-transform: uppercase;
}
.theme-dark .profile-field label { color: #D4D4D8; }
.profile-field input,
.profile-field select,
.profile-field textarea {
  width: 100%;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--bl-ink-900, #0A0A0C);
  background: #FFFFFF;
  border: 1.5px solid var(--bl-border, rgba(10,10,12,.16));
  border-radius: 10px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.profile-field textarea {
  min-height: 88px;
  resize: vertical;
}
.profile-field input:focus,
.profile-field select:focus,
.profile-field textarea:focus {
  border-color: var(--bl-violet, #5B21B6);
  box-shadow: 0 0 0 3px rgba(91,33,182,.12);
}
.profile-field input:disabled {
  background: rgba(10,10,12,.04);
  color: var(--bl-ink-500, #71717A);
  cursor: not-allowed;
}
.theme-dark .profile-field input,
.theme-dark .profile-field select,
.theme-dark .profile-field textarea {
  background: color-mix(in srgb, #FFFFFF 4%, transparent);
  border-color: rgba(250,250,246,.16);
  color: #FAFAF6;
}
.theme-dark .profile-field input::placeholder,
.theme-dark .profile-field textarea::placeholder { color: #71717A; }
.theme-dark .profile-field input:focus,
.theme-dark .profile-field select:focus,
.theme-dark .profile-field textarea:focus {
  border-color: var(--bl-lime, #C8FF00);
  box-shadow: 0 0 0 3px rgba(200,255,0,.18);
}
.theme-dark .profile-field input:disabled {
  background: rgba(250,250,246,.04);
  color: #71717A;
}
.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed rgba(10,10,12,.08);
}
.theme-dark .profile-actions { border-top-color: rgba(250,250,246,.10); }

/* .profile-row used in security/billing tabs (label + control side by side) */
.profile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(10,10,12,.08);
}
.profile-row:last-child { border-bottom: 0; }
.theme-dark .profile-row { border-bottom-color: rgba(250,250,246,.10); }

/* /profile тэбы (chips) */
.profile-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bl-ink-700, #3F3F46);
  background: transparent;
  border: 1.5px solid transparent;
  text-decoration: none;
  margin: 0 4px 8px 0;
}
.profile-tab:hover {
  background: rgba(10,10,12,.04);
  border-color: rgba(10,10,12,.10);
}
.profile-tab.is-active {
  background: var(--bl-ink-900, #0A0A0C);
  color: #FAFAF6;
  border-color: var(--bl-ink-900, #0A0A0C);
}
.theme-dark .profile-tab { color: #D4D4D8; }
.theme-dark .profile-tab:hover {
  background: rgba(250,250,246,.06);
  border-color: rgba(250,250,246,.14);
}
.theme-dark .profile-tab.is-active {
  background: var(--bl-lime, #C8FF00);
  color: #0A0A0C;
  border-color: var(--bl-lime, #C8FF00);
}

/* media-kit grid (другая вкладка профиля) */
.media-kit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 4px;
}
.media-kit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--bl-border, rgba(10,10,12,.10));
  border-radius: 12px;
  background: var(--bl-surface, #FFFFFF);
}
.media-kit-item input {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid rgba(10,10,12,.10);
  outline: none;
  color: inherit;
}
.media-kit-item input:focus { border-bottom-color: var(--bl-violet, #5B21B6); }
.theme-dark .media-kit-item {
  background: color-mix(in srgb, #FFFFFF 4%, transparent);
  border-color: rgba(250,250,246,.12);
  color: #FAFAF6;
}
.theme-dark .media-kit-item input { border-bottom-color: rgba(250,250,246,.18); }
.theme-dark .media-kit-item input:focus { border-bottom-color: var(--bl-lime, #C8FF00); }

/* [DEVIN-FIX r17.7] inline error states для форм (новые сделки, signup и т.д.) */
.field.has-error textarea,
.field.has-error input,
.field.has-error select {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.10) !important;
}
.field-error {
  margin-top: 6px;
  font-size: 12px;
  color: #DC2626;
  line-height: 1.4;
}
.theme-dark .field-error { color: #FCA5A5; }
.alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.alert-danger {
  background: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.32);
  color: #B91C1C;
}
.theme-dark .alert-danger {
  background: rgba(220,38,38,.12);
  border-color: rgba(252,165,165,.36);
  color: #FCA5A5;
}

/* ===========================================================
   [DEVIN-FIX r17.9] In-app notifications: dropdown + toast popups
   Колокольчик в шапке = <details class="nav-notif">.
   Toast стек в правом нижнем углу для всплывающих уведомлений.
   =========================================================== */
.nav-notif { position: relative; }
.nav-notif > summary { list-style: none; cursor: pointer; position: relative; }
.nav-notif > summary::-webkit-details-marker { display: none; }
.nav-notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: #DC2626; color: #FFFFFF;
  font-size: 10px; font-weight: 800; line-height: 16px;
  text-align: center;
  border: 2px solid var(--bl-bg, #FAFAF6);
  box-sizing: content-box;
}
.theme-dark .nav-notif-badge { border-color: var(--bl-bg, #0B0B0F); }
.nav-notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: min(360px, calc(100vw - 32px));
  max-height: 480px;
  display: flex; flex-direction: column;
  background: var(--bl-surface, #FFFFFF);
  border: 1px solid var(--bl-border, rgba(11,11,15,.12));
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(11,11,15,.12);
  z-index: 60;
  overflow: hidden;
}
.theme-dark .nav-notif-panel {
  background: color-mix(in srgb, #FAFAF6 8%, #0B0B0F 92%);
  border-color: rgba(250,250,246,.16);
  box-shadow: 0 12px 40px rgba(0,0,0,.40);
}
.nav-notif-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bl-border, rgba(11,11,15,.08));
}
.theme-dark .nav-notif-head { border-bottom-color: rgba(250,250,246,.10); }
.nav-notif-title { font-weight: 700; font-size: 14px; flex: 1; }
.nav-notif-mark {
  appearance: none; background: transparent; border: 0;
  font-size: 12px; font-weight: 600; color: var(--bl-violet, #5B21B6);
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.nav-notif-mark:hover { background: rgba(91,33,182,.08); }
.theme-dark .nav-notif-mark { color: var(--bl-lime, #C8FF00); }
.theme-dark .nav-notif-mark:hover { background: rgba(200,255,0,.10); }
.nav-notif-list {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto; flex: 1;
}
.nav-notif-list > li {
  display: flex; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bl-border, rgba(11,11,15,.06));
  font-size: 13px; line-height: 1.45;
  cursor: pointer;
  transition: background-color .12s ease;
}
.theme-dark .nav-notif-list > li { border-bottom-color: rgba(250,250,246,.06); }
.nav-notif-list > li:last-child { border-bottom: 0; }
.nav-notif-list > li:hover { background: rgba(11,11,15,.04); }
.theme-dark .nav-notif-list > li:hover { background: rgba(250,250,246,.06); }
.nav-notif-list > li.is-unread { background: rgba(91,33,182,.04); }
.theme-dark .nav-notif-list > li.is-unread { background: rgba(200,255,0,.06); }
.nav-notif-empty {
  padding: 24px 16px; text-align: center;
  color: var(--bl-ink-500, #71717A); font-size: 13px;
  cursor: default !important;
}
.nav-notif-empty:hover { background: transparent !important; }
.nav-notif-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(91,33,182,.08);
  font-size: 16px;
}
.theme-dark .nav-notif-icon { background: rgba(200,255,0,.10); }
.nav-notif-body { flex: 1; min-width: 0; }
.nav-notif-name { font-weight: 700; font-size: 13px; }
.nav-notif-text { color: var(--bl-ink-700, #3F3F46); margin-top: 2px; font-size: 12px; }
.theme-dark .nav-notif-text { color: #C4C4C8; }
.nav-notif-time { font-size: 11px; color: var(--bl-ink-500, #71717A); margin-top: 4px; }
.nav-notif-foot {
  display: block;
  padding: 10px 16px;
  text-align: center;
  font-size: 12px; font-weight: 600;
  color: var(--bl-violet, #5B21B6);
  text-decoration: none;
  border-top: 1px solid var(--bl-border, rgba(11,11,15,.08));
  background: rgba(11,11,15,.02);
}
.theme-dark .nav-notif-foot {
  color: var(--bl-lime, #C8FF00);
  border-top-color: rgba(250,250,246,.10);
  background: rgba(250,250,246,.04);
}
.nav-notif-foot:hover { background: rgba(11,11,15,.04); text-decoration: underline; }
.theme-dark .nav-notif-foot:hover { background: rgba(250,250,246,.08); }

/* Toast popup stack — bottom-right corner */
.notif-toast-stack {
  position: fixed; bottom: 80px; right: 20px;
  z-index: 9999;
  display: flex; flex-direction: column-reverse; gap: 10px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 40px));
}
.notif-toast {
  pointer-events: auto;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  background: var(--bl-surface, #FFFFFF);
  border: 1px solid var(--bl-border, rgba(11,11,15,.12));
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(11,11,15,.12);
  animation: notif-toast-in .25s cubic-bezier(.2,.8,.2,1) both;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.notif-toast.is-leaving { animation: notif-toast-out .2s ease both; }
.theme-dark .notif-toast {
  background: color-mix(in srgb, #FAFAF6 10%, #0B0B0F 90%);
  border-color: rgba(250,250,246,.18);
  box-shadow: 0 8px 24px rgba(0,0,0,.40);
  color: #FAFAF6;
}
.notif-toast-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(91,33,182,.10);
  font-size: 16px;
}
.theme-dark .notif-toast-icon { background: rgba(200,255,0,.14); }
.notif-toast-body { flex: 1; min-width: 0; }
.notif-toast-title { font-weight: 700; font-size: 13px; line-height: 1.3; }
.notif-toast-text {
  font-size: 12px; line-height: 1.4; margin-top: 3px;
  color: var(--bl-ink-700, #3F3F46);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.theme-dark .notif-toast-text { color: #C4C4C8; }
.notif-toast-close {
  appearance: none; background: transparent; border: 0;
  width: 22px; height: 22px; flex-shrink: 0; padding: 0;
  cursor: pointer; opacity: .55;
  font-size: 14px; line-height: 22px; text-align: center;
  color: inherit;
}
.notif-toast-close:hover { opacity: 1; }
@keyframes notif-toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes notif-toast-out {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(40px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .notif-toast, .notif-toast.is-leaving { animation: none; }
}