/* =========================================================================
   SEETO — Бренд-центр
   Общие стили раздела /brand. Собраны поверх существующей дизайн-системы
   (design-system/tokens.css, primitives.css, components.css) — новых
   примитивных токенов здесь не заводится, только композиция bh-* блоков
   и несколько локальных переменных для сетки раздела.
   ========================================================================= */

:root {
  --bh-sidebar-width: 264px;
  --bh-content-max: 760px;
  --bh-topbar-height: 64px;
  --bh-gap: var(--seeto-space-24);
  --bh-good: var(--seeto-color-state-success);
  --bh-bad: var(--seeto-color-state-error);
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
}

body.bh-body {
  background: var(--seeto-bg-base);
  color: var(--seeto-text-primary);
  font-family: var(--seeto-font-card);
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
}

.bh-skip-link {
  background: var(--seeto-color-neutral-0);
  border-radius: var(--seeto-radius-2);
  color: var(--seeto-text-on-light);
  left: var(--seeto-space-8);
  padding: var(--seeto-space-4) var(--seeto-space-8);
  position: absolute;
  top: -60px;
  transition: top var(--seeto-motion-fast) ease;
  z-index: 100;
}

.bh-skip-link:focus {
  top: var(--seeto-space-8);
}

img {
  max-width: 100%;
}

/* ---------------------------------------------------------------------
   Топ-бар — связывает бренд-центр с основным продуктом SEETO
   --------------------------------------------------------------------- */

.bh-topbar {
  background: rgba(10, 10, 11, 0.86);
  backdrop-filter: blur(var(--seeto-blur-glass-md));
  -webkit-backdrop-filter: blur(var(--seeto-blur-glass-md));
  border-bottom: 1px solid var(--seeto-border-soft);
  block-size: var(--bh-topbar-height);
  display: flex;
  position: sticky;
  top: 0;
  z-index: var(--seeto-z-navigation);
}

.bh-topbar__inner {
  align-items: center;
  display: flex;
  gap: var(--seeto-space-8);
  inline-size: 100%;
  margin-inline: auto;
  max-width: 1200px;
  overflow: hidden;
  padding-inline: var(--seeto-space-16);
}

.bh-topbar__product {
  align-items: center;
  color: var(--seeto-text-secondary);
  display: flex;
  flex: 0 1 auto;
  font-size: var(--seeto-type-body-small-size);
  gap: var(--seeto-space-6);
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bh-topbar__product svg {
  flex: 0 0 auto;
}

.bh-topbar__product:hover {
  color: var(--seeto-text-primary);
}

.bh-topbar__product svg {
  block-size: 14px;
  inline-size: 14px;
  transform: rotate(180deg);
}

.bh-topbar__divider {
  background: var(--seeto-border-soft);
  block-size: 24px;
  flex: 0 0 auto;
  inline-size: 1px;
}

.bh-topbar__brand {
  align-items: center;
  color: var(--seeto-text-primary);
  display: flex;
  flex: 0 0 auto;
  gap: var(--seeto-space-6);
  text-decoration: none;
}

.bh-topbar__mark {
  block-size: 18px;
  display: block;
  flex: 0 0 auto;
  inline-size: 18px;
}

.bh-topbar__mark path {
  fill: var(--seeto-color-neutral-0);
}

.bh-topbar__label {
  font-family: var(--seeto-font-card-extended);
  font-size: var(--seeto-type-body-small-size);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.bh-topbar__spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.bh-topbar__search {
  flex: 0 0 auto;
  position: relative;
}

.bh-topbar__search-input {
  background: var(--seeto-input-bg);
  border: 1px solid var(--seeto-input-border);
  border-radius: var(--seeto-radius-pill);
  color: var(--seeto-input-text);
  font-family: var(--seeto-font-card);
  font-size: var(--seeto-type-body-small-size);
  inline-size: 200px;
  min-block-size: 36px;
  padding: 0 var(--seeto-space-12);
  transition: inline-size var(--seeto-motion-fast) ease, border-color var(--seeto-motion-fast) ease;
}

.bh-topbar__search-input::placeholder {
  color: var(--seeto-input-placeholder);
}

.bh-topbar__search-input:focus {
  border-color: var(--seeto-input-focus);
  inline-size: 260px;
  outline: none;
}

.bh-topbar__results {
  background: var(--seeto-bg-surface-1);
  border: 1px solid var(--seeto-border-soft);
  border-radius: var(--seeto-radius-4);
  box-shadow: var(--seeto-shadow-card);
  display: none;
  inset-inline-end: 0;
  margin-top: var(--seeto-space-4);
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--seeto-space-4);
  position: absolute;
  top: 100%;
  width: 340px;
  z-index: var(--seeto-z-menu);
}

.bh-topbar__results[data-open="true"] {
  display: block;
}

.bh-topbar__result {
  border-radius: var(--seeto-radius-2);
  color: var(--seeto-text-primary);
  display: block;
  padding: var(--seeto-space-6) var(--seeto-space-8);
  text-decoration: none;
}

.bh-topbar__result:hover,
.bh-topbar__result:focus-visible {
  background: var(--seeto-bg-surface-2);
}

.bh-topbar__result strong {
  display: block;
  font-family: var(--seeto-font-card-extended);
  font-size: var(--seeto-type-body-small-size);
}

.bh-topbar__result span {
  color: var(--seeto-text-tertiary);
  display: block;
  font-size: var(--seeto-type-caption-size);
  margin-top: 2px;
}

.bh-topbar__result-empty {
  color: var(--seeto-text-tertiary);
  font-size: var(--seeto-type-body-small-size);
  padding: var(--seeto-space-8);
}

.bh-topbar__nav-toggle {
  align-items: center;
  background: var(--seeto-bg-surface-1);
  border: 1px solid var(--seeto-border-soft);
  border-radius: var(--seeto-radius-2);
  color: var(--seeto-text-primary);
  display: none;
  flex: 0 0 auto;
  gap: var(--seeto-space-4);
  min-block-size: 36px;
  padding: 0 var(--seeto-space-10);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .bh-topbar__nav-toggle {
    display: inline-flex;
  }
}

@media (max-width: 640px) {
  .bh-topbar__product span {
    display: none;
  }

  .bh-topbar__divider {
    display: none;
  }

  .bh-topbar__search {
    display: none;
  }
}

@media (max-width: 360px) {
  .bh-topbar__label {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   Оболочка страницы: сайдбар + контент
   --------------------------------------------------------------------- */

.bh-shell {
  display: grid;
  gap: var(--bh-gap);
  grid-template-columns: var(--bh-sidebar-width) minmax(0, 1fr);
  margin-inline: auto;
  max-width: 1200px;
  padding: var(--seeto-space-24) var(--seeto-space-16) var(--seeto-space-32);
}

@media (max-width: 1023px) {
  .bh-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------
   Локальное меню бренд-раздела
   --------------------------------------------------------------------- */

.bh-sidebar {
  align-self: start;
  position: sticky;
  top: calc(var(--bh-topbar-height) + var(--seeto-space-16));
}

@media (max-width: 1023px) {
  .bh-sidebar {
    background: var(--seeto-bg-surface-1);
    border-bottom: 1px solid var(--seeto-border-soft);
    inset: var(--bh-topbar-height) 0 auto 0;
    max-height: calc(100dvh - var(--bh-topbar-height));
    overflow-y: auto;
    padding: var(--seeto-space-16);
    position: fixed;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--seeto-motion-fast) ease, transform var(--seeto-motion-fast) ease;
    z-index: var(--seeto-z-menu);
  }

  .bh-sidebar[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.bh-nav-group + .bh-nav-group {
  margin-top: var(--seeto-space-16);
}

.bh-nav-group__title {
  color: var(--seeto-text-muted);
  font-family: var(--seeto-font-card-extended);
  font-size: var(--seeto-type-caption-size);
  letter-spacing: 0.08em;
  margin: 0 0 var(--seeto-space-6) var(--seeto-space-8);
  text-transform: uppercase;
}

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

.bh-nav-link {
  border-radius: var(--seeto-radius-2);
  color: var(--seeto-text-secondary);
  display: block;
  font-size: var(--seeto-type-body-small-size);
  padding: var(--seeto-space-6) var(--seeto-space-8);
  text-decoration: none;
}

.bh-nav-link:hover {
  background: var(--seeto-bg-surface-1);
  color: var(--seeto-text-primary);
}

.bh-nav-link[aria-current="page"] {
  background: var(--seeto-bg-surface-2);
  color: var(--seeto-text-primary);
  font-weight: 600;
  position: relative;
}

.bh-nav-link[aria-current="page"]::before {
  background: var(--seeto-color-accent-rose);
  block-size: 14px;
  border-radius: var(--seeto-radius-pill);
  content: "";
  inline-size: 3px;
  inset-inline-start: -1px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.bh-sidebar__kit {
  border-top: 1px solid var(--seeto-border-soft);
  margin-top: var(--seeto-space-16);
  padding-top: var(--seeto-space-16);
}

/* ---------------------------------------------------------------------
   Контент
   --------------------------------------------------------------------- */

.bh-content {
  min-width: 0;
}

.bh-breadcrumbs {
  align-items: center;
  color: var(--seeto-text-tertiary);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--seeto-type-caption-size);
  gap: var(--seeto-space-4);
  margin: 0 0 var(--seeto-space-16);
}

.bh-breadcrumbs a {
  color: var(--seeto-text-tertiary);
  text-decoration: none;
}

.bh-breadcrumbs a:hover {
  color: var(--seeto-text-primary);
}

.bh-breadcrumbs [aria-current="page"] {
  color: var(--seeto-text-secondary);
}

.bh-hero {
  max-width: var(--bh-content-max);
}

.bh-eyebrow {
  align-items: center;
  color: var(--seeto-text-accent);
  display: flex;
  font-family: var(--seeto-font-card-extended);
  font-size: var(--seeto-type-caption-size);
  gap: var(--seeto-space-6);
  letter-spacing: 0.08em;
  margin: 0 0 var(--seeto-space-8);
  text-transform: uppercase;
}

.bh-hero h1 {
  font-family: var(--seeto-font-display);
  font-size: clamp(28px, 4vw, var(--seeto-type-display-title-size));
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0 0 var(--seeto-space-12);
  text-transform: uppercase;
}

.bh-hero__lede {
  color: var(--seeto-text-secondary);
  font-size: var(--seeto-type-body-large-size);
  line-height: var(--seeto-type-body-large-line);
  margin: 0 0 var(--seeto-space-16);
}

.bh-meta-row {
  align-items: center;
  color: var(--seeto-text-tertiary);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--seeto-type-body-small-size);
  gap: var(--seeto-space-12);
  margin-bottom: var(--seeto-space-20);
}

.bh-meta-row time {
  color: var(--seeto-text-secondary);
}

.bh-status {
  align-items: center;
  border-radius: var(--seeto-radius-pill);
  display: inline-flex;
  font-family: var(--seeto-font-card-extended);
  font-size: var(--seeto-type-caption-size);
  gap: 6px;
  padding: 3px 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bh-status::before {
  block-size: 6px;
  border-radius: 50%;
  content: "";
  inline-size: 6px;
}

.bh-status[data-status="published"] {
  background: rgba(102, 200, 137, 0.14);
  color: var(--bh-good);
}

.bh-status[data-status="published"]::before {
  background: var(--bh-good);
}

.bh-status[data-status="updating"] {
  background: rgba(212, 177, 109, 0.16);
  color: var(--seeto-color-state-warning);
}

.bh-status[data-status="updating"]::before {
  background: var(--seeto-color-state-warning);
}

.bh-status[data-status="draft"] {
  background: var(--seeto-bg-surface-1);
  color: var(--seeto-text-muted);
}

.bh-status[data-status="draft"]::before {
  background: var(--seeto-text-muted);
}

.bh-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seeto-space-10);
  margin-bottom: var(--seeto-space-8);
}

/* Sections */

.bh-section {
  border-top: 1px solid var(--seeto-border-soft);
  margin-top: var(--seeto-space-24);
  max-width: var(--bh-content-max);
  padding-top: var(--seeto-space-24);
}

.bh-section--wide {
  max-width: none;
}

.bh-section h2 {
  font-family: var(--seeto-font-display);
  font-size: var(--seeto-type-heading-2-size);
  font-weight: 900;
  letter-spacing: 0;
  line-height: var(--seeto-type-heading-2-line);
  margin: 0 0 var(--seeto-space-8);
  text-transform: uppercase;
}

.bh-section h3 {
  font-family: var(--seeto-font-card-extended);
  font-size: 17px;
  font-weight: 700;
  margin: var(--seeto-space-16) 0 var(--seeto-space-6);
}

.bh-section p {
  color: var(--seeto-text-secondary);
  font-size: var(--seeto-type-body-base-size);
  line-height: var(--seeto-type-body-base-line);
  margin: 0 0 var(--seeto-space-12);
}

.bh-section ul,
.bh-section ol {
  color: var(--seeto-text-secondary);
  font-size: var(--seeto-type-body-base-size);
  line-height: var(--seeto-type-body-base-line);
  margin: 0 0 var(--seeto-space-12);
  padding-inline-start: 1.2em;
}

.bh-section li + li {
  margin-top: var(--seeto-space-4);
}

.bh-section strong {
  color: var(--seeto-text-primary);
}

.bh-section a {
  color: var(--seeto-link-default);
}

.bh-section a:hover {
  color: var(--seeto-link-hover);
}

/* Quick-access grid (home) */

.bh-quick-grid {
  display: grid;
  gap: var(--seeto-space-10);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .bh-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.bh-quick-link {
  align-items: flex-start;
  background: var(--seeto-bg-surface-1);
  border: 1px solid var(--seeto-border-soft);
  border-radius: var(--seeto-radius-4);
  color: var(--seeto-text-primary);
  display: flex;
  flex-direction: column;
  gap: var(--seeto-space-6);
  padding: var(--seeto-space-12);
  text-decoration: none;
  transition: border-color var(--seeto-motion-fast) ease, transform var(--seeto-motion-fast) var(--seeto-motion-ease-standard);
}

.bh-quick-link:hover {
  border-color: var(--seeto-border-strong);
  transform: translateY(-2px);
}

.bh-quick-link strong {
  font-family: var(--seeto-font-card-extended);
  font-size: var(--seeto-type-body-small-size);
}

.bh-quick-link span {
  color: var(--seeto-text-tertiary);
  font-size: var(--seeto-type-caption-size);
}

/* Sitemap cards */

.bh-card-grid {
  display: grid;
  gap: var(--seeto-space-12);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .bh-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .bh-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bh-card {
  background: var(--seeto-bg-card-muted);
  border: 1px solid var(--seeto-border-soft);
  border-radius: var(--seeto-radius-5);
  color: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
}

.bh-card__media {
  align-items: center;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--bh-card-accent, var(--seeto-color-accent-rose)) 55%, transparent), transparent 60%),
    var(--seeto-bg-surface-2);
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.bh-card__media img {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}

.bh-card__monogram {
  color: color-mix(in srgb, var(--bh-card-accent, var(--seeto-color-accent-rose)) 82%, white 18%);
  font-family: var(--seeto-font-display);
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 0;
  opacity: 0.9;
  text-transform: uppercase;
}

.bh-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--seeto-space-6);
  padding: var(--seeto-space-12);
}

.bh-card__body h3 {
  font-family: var(--seeto-font-display);
  font-size: 16px;
  letter-spacing: 0;
  margin: 0;
  text-transform: uppercase;
}

.bh-card__body p {
  color: var(--seeto-text-tertiary);
  flex: 1 1 auto;
  font-size: var(--seeto-type-body-small-size);
  line-height: var(--seeto-type-body-small-line);
  margin: 0;
}

.bh-card__foot {
  align-items: center;
  color: var(--seeto-text-muted);
  display: flex;
  font-size: var(--seeto-type-caption-size);
  justify-content: space-between;
  margin-top: var(--seeto-space-4);
}

/* Do / Don't grid */

.bh-compare {
  display: grid;
  gap: var(--seeto-space-12);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: var(--seeto-space-12) 0;
}

@media (max-width: 640px) {
  .bh-compare {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bh-compare__item {
  border-radius: var(--seeto-radius-4);
  padding: var(--seeto-space-12);
}

.bh-compare__item[data-ok="true"] {
  background: rgba(102, 200, 137, 0.08);
  border: 1px solid rgba(102, 200, 137, 0.32);
}

.bh-compare__item[data-ok="false"] {
  background: rgba(231, 93, 113, 0.08);
  border: 1px solid rgba(231, 93, 113, 0.32);
}

.bh-compare__label {
  align-items: center;
  display: flex;
  font-family: var(--seeto-font-card-extended);
  font-size: var(--seeto-type-caption-size);
  gap: 6px;
  letter-spacing: 0.04em;
  margin-bottom: var(--seeto-space-6);
  text-transform: uppercase;
}

.bh-compare__item[data-ok="true"] .bh-compare__label {
  color: var(--bh-good);
}

.bh-compare__item[data-ok="false"] .bh-compare__label {
  color: var(--bh-bad);
}

.bh-compare__item p {
  color: var(--seeto-text-secondary);
  font-size: var(--seeto-type-body-small-size);
  line-height: var(--seeto-type-body-small-line);
  margin: 0;
}

.bh-compare__item figure {
  margin: 0 0 var(--seeto-space-8);
}

.bh-compare__item img {
  border-radius: var(--seeto-radius-2);
  display: block;
  width: 100%;
}

/* Swatches / colors */

.bh-swatch-grid {
  display: grid;
  gap: var(--seeto-space-10);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.bh-swatch {
  background: var(--seeto-bg-surface-1);
  border: 1px solid var(--seeto-border-soft);
  border-radius: var(--seeto-radius-4);
  overflow: hidden;
}

.bh-swatch__chip {
  block-size: 72px;
}

.bh-swatch__body {
  padding: var(--seeto-space-8) var(--seeto-space-10) var(--seeto-space-10);
}

.bh-swatch__name {
  font-family: var(--seeto-font-card-extended);
  font-size: var(--seeto-type-body-small-size);
  font-weight: 700;
}

.bh-swatch__role {
  color: var(--seeto-text-tertiary);
  font-size: var(--seeto-type-caption-size);
  margin: 2px 0 var(--seeto-space-8);
}

.bh-copy-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bh-copy {
  align-items: center;
  background: transparent;
  border: 1px solid var(--seeto-border-soft);
  border-radius: var(--seeto-radius-1);
  color: var(--seeto-text-secondary);
  cursor: pointer;
  display: flex;
  font-family: "SF Mono", "Menlo", ui-monospace, monospace;
  font-size: 12px;
  justify-content: space-between;
  padding: 4px 8px;
  text-align: left;
  width: 100%;
}

.bh-copy:hover {
  border-color: var(--seeto-border-strong);
  color: var(--seeto-text-primary);
}

.bh-copy[data-copied="true"] {
  border-color: var(--bh-good);
  color: var(--bh-good);
}

.bh-copy__icon {
  flex: 0 0 auto;
  font-size: 11px;
  opacity: 0.6;
}

/* Tables */

.bh-table-wrap {
  overflow-x: auto;
}

.bh-table {
  border-collapse: collapse;
  font-size: var(--seeto-type-body-small-size);
  width: 100%;
}

.bh-table caption {
  caption-side: top;
  color: var(--seeto-text-muted);
  font-size: var(--seeto-type-caption-size);
  text-align: left;
  margin-bottom: var(--seeto-space-6);
}

.bh-table th,
.bh-table td {
  border-bottom: 1px solid var(--seeto-border-soft);
  padding: var(--seeto-space-8) var(--seeto-space-10);
  text-align: left;
  vertical-align: middle;
}

.bh-table th {
  color: var(--seeto-text-muted);
  font-family: var(--seeto-font-card-extended);
  font-size: var(--seeto-type-caption-size);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bh-table td {
  color: var(--seeto-text-secondary);
}

.bh-table code {
  color: var(--seeto-text-primary);
}

/* Type specimens */

.bh-specimen {
  border-bottom: 1px solid var(--seeto-border-soft);
  padding: var(--seeto-space-16) 0;
}

.bh-specimen__meta {
  color: var(--seeto-text-tertiary);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--seeto-type-caption-size);
  gap: var(--seeto-space-10);
  margin-bottom: var(--seeto-space-6);
}

.bh-specimen__sample {
  color: var(--seeto-text-primary);
  margin: 0;
}

/* Spacing scale bars */

.bh-scale-row {
  align-items: center;
  border-bottom: 1px solid var(--seeto-border-soft);
  display: flex;
  gap: var(--seeto-space-12);
  padding: var(--seeto-space-6) 0;
}

.bh-scale-row__bar {
  background: var(--seeto-color-accent-rose);
  block-size: 10px;
  border-radius: 2px;
}

.bh-scale-row__name {
  color: var(--seeto-text-secondary);
  flex: 0 0 140px;
  font-size: var(--seeto-type-body-small-size);
}

.bh-scale-row__value {
  color: var(--seeto-text-muted);
  flex: 0 0 60px;
  font-size: var(--seeto-type-caption-size);
  text-align: right;
}

/* Code block */

.bh-code {
  background: var(--seeto-bg-surface-1);
  border: 1px solid var(--seeto-border-soft);
  border-radius: var(--seeto-radius-3);
  color: var(--seeto-text-secondary);
  font-family: "SF Mono", "Menlo", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 var(--seeto-space-12);
  overflow-x: auto;
  padding: var(--seeto-space-12);
  white-space: pre;
}

/* Component preview frame */

.bh-preview {
  background: var(--seeto-bg-surface-1);
  border: 1px solid var(--seeto-border-soft);
  border-radius: var(--seeto-radius-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--seeto-space-12);
  padding: var(--seeto-space-16);
}

.bh-preview[data-bg="light"] {
  background: var(--seeto-bg-surface-light);
}

.bh-toggle-bg {
  align-items: center;
  display: inline-flex;
  gap: var(--seeto-space-6);
  margin-bottom: var(--seeto-space-8);
}

/* Assets library */

.bh-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seeto-space-6);
  margin-bottom: var(--seeto-space-16);
}

.bh-filter {
  background: var(--seeto-chip-bg);
  border: 1px solid var(--seeto-chip-border);
  border-radius: var(--seeto-radius-pill);
  color: var(--seeto-chip-text);
  cursor: pointer;
  font-size: var(--seeto-type-caption-size);
  padding: 6px 12px;
}

.bh-filter[aria-pressed="true"] {
  background: var(--seeto-chip-active-bg);
  border-color: var(--seeto-chip-active-bg);
  color: var(--seeto-chip-active-text);
}

.bh-asset-grid {
  display: grid;
  gap: var(--seeto-space-12);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
  .bh-asset-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bh-asset-card {
  background: var(--seeto-bg-surface-1);
  border: 1px solid var(--seeto-border-soft);
  border-radius: var(--seeto-radius-4);
  display: flex;
  flex-direction: column;
  gap: var(--seeto-space-8);
  padding: var(--seeto-space-12);
}

.bh-asset-card__top {
  display: flex;
  gap: var(--seeto-space-6);
  justify-content: space-between;
}

.bh-asset-card__name {
  font-family: var(--seeto-font-card-extended);
  font-size: var(--seeto-type-body-small-size);
  font-weight: 700;
}

.bh-asset-card__format {
  background: var(--seeto-bg-surface-2);
  border-radius: var(--seeto-radius-1);
  color: var(--seeto-text-tertiary);
  font-size: 11px;
  padding: 2px 6px;
  white-space: nowrap;
}

.bh-asset-card__meta {
  color: var(--seeto-text-tertiary);
  font-size: var(--seeto-type-caption-size);
  line-height: 1.5;
  margin: 0;
}

.bh-asset-card__meta b {
  color: var(--seeto-text-secondary);
  font-weight: 600;
}

.bh-asset-card__foot {
  align-items: center;
  display: flex;
  gap: var(--seeto-space-8);
  justify-content: space-between;
  margin-top: auto;
}

.bh-pending {
  color: var(--seeto-color-state-warning);
  font-size: var(--seeto-type-caption-size);
}

.bh-empty-state {
  color: var(--seeto-text-tertiary);
  font-size: var(--seeto-type-body-small-size);
  padding: var(--seeto-space-16) 0;
}

/* Changelog */

.bh-changelog-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bh-changelog-item {
  border-inline-start: 2px solid var(--seeto-border-soft);
  padding: 0 0 var(--seeto-space-16) var(--seeto-space-16);
  position: relative;
}

.bh-changelog-item::before {
  background: var(--seeto-color-accent-rose);
  block-size: 9px;
  border-radius: 50%;
  content: "";
  inline-size: 9px;
  inset-inline-start: -5.5px;
  position: absolute;
  top: 4px;
}

.bh-changelog-item__head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--seeto-space-8);
  margin-bottom: 4px;
}

.bh-changelog-item__date {
  color: var(--seeto-text-tertiary);
  font-size: var(--seeto-type-caption-size);
}

.bh-changelog-item__version {
  color: var(--seeto-text-muted);
  font-family: "SF Mono", "Menlo", ui-monospace, monospace;
  font-size: 11px;
}

.bh-changelog-item__section {
  background: var(--seeto-bg-surface-2);
  border-radius: var(--seeto-radius-1);
  color: var(--seeto-text-secondary);
  font-size: 11px;
  padding: 1px 8px;
}

.bh-changelog-item__desc {
  color: var(--seeto-text-secondary);
  font-size: var(--seeto-type-body-small-size);
  line-height: var(--seeto-type-body-small-line);
  margin: 0 0 4px;
}

.bh-changelog-item a {
  color: var(--seeto-link-default);
  font-size: var(--seeto-type-caption-size);
}

.bh-changelog-item__owner {
  color: var(--seeto-text-muted);
  font-size: 11px;
}

/* Related links + contact */

.bh-related {
  margin-top: var(--seeto-space-24);
}

.bh-related-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seeto-space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bh-related-list a {
  background: var(--seeto-bg-surface-1);
  border: 1px solid var(--seeto-border-soft);
  border-radius: var(--seeto-radius-pill);
  color: var(--seeto-text-primary);
  display: inline-block;
  font-size: var(--seeto-type-body-small-size);
  padding: 6px 14px;
  text-decoration: none;
}

.bh-related-list a:hover {
  border-color: var(--seeto-border-strong);
}

.bh-contact {
  background: var(--seeto-bg-surface-1);
  border-radius: var(--seeto-radius-5);
  margin-top: var(--seeto-space-24);
  padding: var(--seeto-space-16);
}

.bh-contact h2 {
  font-family: var(--seeto-font-display);
  font-size: 18px;
  margin: 0 0 var(--seeto-space-6);
  text-transform: uppercase;
}

.bh-contact p {
  color: var(--seeto-text-secondary);
  font-size: var(--seeto-type-body-small-size);
  margin: 0 0 var(--seeto-space-10);
}

.bh-contact__telegram-link {
  align-items: center;
  color: var(--seeto-text-primary);
  display: inline-flex;
  font-weight: 600;
  gap: var(--seeto-space-4);
  text-decoration: none;
}

.bh-contact__telegram-link:hover {
  text-decoration: underline;
}

.bh-contact__telegram-icon {
  background: #229ed9;
  border-radius: 50%;
  flex: none;
  height: 28px;
  padding: 6px;
  width: 28px;
}

/* Footer */

.bh-footer {
  border-top: 1px solid var(--seeto-border-soft);
  color: var(--seeto-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--seeto-type-caption-size);
  gap: var(--seeto-space-4) var(--seeto-space-10);
  justify-content: space-between;
  margin-inline: auto;
  max-width: 1200px;
  padding: var(--seeto-space-16);
}

.bh-footer p {
  margin: 0;
}

.bh-footer a {
  color: var(--seeto-text-muted);
}

.bh-footer a:hover {
  color: var(--seeto-text-secondary);
}

.bh-footer__rotator {
  font-style: italic;
  opacity: 1;
  text-align: right;
  transition: opacity 0.22s ease;
}

.bh-footer__rotator.is-fading {
  opacity: 0;
}

@media (max-width: 640px) {
  .bh-footer {
    flex-direction: column;
  }

  .bh-footer__rotator {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bh-footer__rotator {
    transition: none;
  }
}

/* Utility */

.bh-vh {
  block-size: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .bh-quick-link,
  .bh-sidebar,
  .bh-topbar__search-input {
    transition: none !important;
  }
}