/* PicSeller 2.0 — стили модуля «Библиотека» (js/screens/library.js): Материалы (#/materials), Бренд-кит (#/brand), Шаблоны (#/templates).
   Классы только с префиксом lb-; цвета интерфейса — только токены base.css (тёмная тема работает сама).
   Отрисовки Art — «изображения», их цвета не зависят от темы.
   Module "library" styles. lb- prefix only; UI colours come from base.css tokens, Art renders keep their own colours. */

/* ==================================================================
   1. Общее / Shared
   ================================================================== */
.lb { min-width: 0; }
.lb-head > div:first-child { flex: 1 1 420px; }
.lb-head > .page-actions { flex: 0 1 auto; max-width: 100%; }
.lb-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.lb-count {
  display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 9px; margin-left: 12px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2);
  font: 700 14px/1 var(--font); color: var(--ink-2); letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.lb-tabs { margin: -6px 0 20px; }
.lb-tabs .tab .i { color: var(--muted); }
.lb-tabs .tab.is-on .i { color: var(--primary); }
.lb-tabs .tab.is-on .tab-count { background: var(--primary-soft); color: var(--primary); }
.lb-n { margin-left: 2px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .lb-n, .seg [aria-pressed="true"] .lb-n { color: inherit; opacity: .72; }
.lb-flabel { font: 600 12px/1.2 var(--font); color: var(--muted); white-space: nowrap; }
.lb-lead { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.lb-mt { margin-top: 14px; }
.lb-grow { flex: 1 1 auto; }
.lb-center { justify-content: center; }
.lb-only-m { display: none !important; }
.btn.is-on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.lb-plain-list { margin: 0 0 12px; padding-left: 20px; font-size: 14px; }
@media (max-width: 899px) {
  .lb-only-m { display: inline-flex !important; }
  .lb-hide-m { display: none !important; }
}
@media (max-width: 599px) {
  .lb-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; }
  .lb-head > div:first-child { display: contents; }
  .lb-head .page-title { grid-column: 1; grid-row: 1; }
  .lb-head .page-sub { grid-column: 1 / -1; grid-row: 2; margin-top: 0; font-size: 14px; }
  .lb-head > .page-actions { grid-column: 2; grid-row: 1; }
  .lb-head.lb-bhead { display: flex; gap: 14px; }
  .lb-head.lb-bhead > div:first-child { display: flex; }
  .lb-head.lb-bhead .page-sub { margin-top: 4px; }
  .lb-hide-xs { display: none !important; }
  .lb-tabs { margin: -2px -16px 16px; padding: 0 12px; }
  .lb-tabs .tab { padding: 0 9px; gap: 5px; }
  .lb-tabs .tab .i { display: none; }
}

/* Превью-сцена: отрисовки Art на мягкой подложке / preview stage for Art renders */
.lb-pv {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--surface) 70%, transparent), transparent 70%),
    var(--surface-2);
}
.lb-pv-in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8.5% 8%; }
.lb-shot {
  position: relative; display: block; flex: none; overflow: hidden; border-radius: 6px; background: #f7f3ec;
  box-shadow: 0 1px 2px rgba(18, 30, 24, .12), 0 6px 18px rgba(18, 30, 24, .14);
}
.lb-shot > svg { display: block; width: 100%; height: 100%; }
.lb-shot-main { height: 100%; aspect-ratio: 3 / 4; }
.lb-shot-main.is-sq { aspect-ratio: 1 / 1; }
.lb-pv-side { display: flex; flex-direction: column; gap: 8px; height: 100%; justify-content: center; }
.lb-shot-mini { height: calc((100% - 8px) / 2); aspect-ratio: 3 / 4; border-radius: 4px; }
.lb-shot-wide { width: 100%; aspect-ratio: 16 / 9; }
.lb-shot-stack {
  box-shadow:
    0 1px 2px rgba(18, 30, 24, .12), 0 6px 18px rgba(18, 30, 24, .12),
    0 7px 0 -3px var(--surface), 0 7px 0 -2px var(--line-2),
    0 14px 0 -7px var(--surface), 0 14px 0 -6px var(--line-2);
}
.lb-shot.is-pending { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.lb-shot-skel {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 45%, var(--surface-2) 65%); background-size: 400% 100%;
  animation: shimmer 1.6s ease infinite;
}
.lb-pv-sm { width: 76px; flex: none; border-radius: 10px; }
.lb-pv-sm .lb-pv-in { padding: 7px; }
.lb-pv-xs { width: 60px; flex: none; border-radius: 8px; }
.lb-pv-xs .lb-pv-in { padding: 5px; }
.lb-pv-sm .lb-shot, .lb-pv-xs .lb-shot { border-radius: 3px; box-shadow: 0 1px 3px rgba(18, 30, 24, .18); }

/* Флажок выбора / selection checkbox */
.lb-check { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; cursor: pointer; }
.lb-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); cursor: pointer; }

/* ==================================================================
   2. Материалы / Materials
   ================================================================== */
.lb-callout { margin-bottom: 18px; }
.lb-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 4px; }
.lb-chiprow { display: flex; gap: 8px; min-width: 0; flex-wrap: wrap; }
.lb-tools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lb-search { width: 240px; }
.lb-search > .i { left: 11px; }
.lb-search > .input { padding-left: 34px; }
.lb-fbtn { position: relative; width: 40px; padding: 0; }
.lb-fbtn .count { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 12px; border: 2px solid var(--bg); box-sizing: content-box; }
.lb-filterbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px;
  margin: 8px 0 20px; padding: 10px 0 14px; border-bottom: 1px solid var(--line);
}
.lb-fsel { display: inline-flex; align-items: center; gap: 8px; }
.lb-fsel .select { width: 210px; }
.lb-fgroup { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 899px) {
  .lb-toolbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; margin-bottom: 16px; }
  .lb-tools { width: 100%; }
  .lb-search { flex: 1 1 auto; width: auto; }
  .lb-tools .btn-sm, .lb-tools .seg { flex: none; }
  .lb-chiprow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -24px; padding: 2px 24px; }
  .lb-chiprow::-webkit-scrollbar { display: none; }
  .lb-chiprow > .chip { flex: none; }
}
@media (max-width: 599px) {
  .lb-chiprow { margin: 0 -16px; padding: 2px 16px; }
}

/* Панель массовых действий / Bulk action bar */
.lb-bulk {
  position: sticky; top: calc(var(--top-h) + 10px); z-index: 15;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 8px 10px 8px 8px;
  border-radius: 14px; background: var(--toast-bg); color: var(--toast-fg); box-shadow: var(--shadow-3);
  animation: popIn .16s ease;
}
.lb-bulk .btn-ghost { --btn-fg: var(--toast-fg); --btn-bg-h: color-mix(in srgb, var(--toast-fg) 12%, transparent); }
.lb-bulk .btn-primary { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-bg-h: var(--accent-2); }
.lb-bulk .btn:disabled { opacity: .45; }
.lb-bulk-n { font: 700 14px/1.2 var(--font); padding: 0 6px; }
.lb-bulk-acts { display: flex; gap: 8px; }
@media (max-width: 599px) {
  .lb-bulk { padding: 8px; }
  .lb-bulk-acts { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lb-bulk-acts .btn { padding: 0 8px; }
}

/* Сетка карточек материалов / Material grid */
.lb-mgrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 244px), 1fr)); }
.lb-mc { position: relative; display: flex; flex-direction: column; overflow: hidden; transition: border-color .15s, box-shadow .2s, transform .2s; }
.lb-mc:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.lb-mc.is-sel { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.lb-mc:has(.lb-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.lb-mc .lb-link:focus-visible { outline: none; }
.lb-mc-pv { border-bottom: 1px solid var(--line); }
.lb-mc-badges { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; min-width: 0; pointer-events: none; }
.lb-mc-type {
  display: inline-flex; min-width: 0; align-items: center; gap: 5px; max-width: calc(100% - 20px);
  height: 24px; padding: 0 9px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--ink-2); box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 600 12px/1 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-mc-type .i { color: var(--muted); }
.lb-mc-new { flex: none; box-shadow: var(--shadow-1); }
.lb-mc.is-building .lb-mc-badges { display: none; }
.lb-build {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; display: flex; flex-direction: column; gap: 6px;
  padding: 9px 11px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--shadow-2); pointer-events: none;
}
.lb-build-top { display: flex; align-items: center; gap: 8px; font: 600 13px/1.2 var(--font); color: var(--info); }
.lb-build-top .spinner { width: 14px; height: 14px; }
.lb-build-pct { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-build .progress > i { background: var(--info); }
.lb-build-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: var(--muted); }
.lb-mc-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 15px; min-width: 0; }
.lb-mc-title { margin: 0; font: 700 15px/1.32 var(--font-head); letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-link { color: var(--ink); text-decoration: none; }
.lb-link:hover { color: var(--primary); }
.lb-mc .lb-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.lb-mc-prod { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--muted); }
.lb-reason { display: flex; align-items: flex-start; gap: 6px; margin: 0; font: 500 12.5px/1.4 var(--font); }
.lb-reason .i { flex: none; margin-top: 1px; }
.lb-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.lb-mc-meta { margin: auto 0 0; padding-top: 2px; font-size: 12px; color: var(--muted); }
.lb-mc .lb-check {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow-1);
  opacity: 0; transition: opacity .12s;
}
.lb-mc .lb-more {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  --btn-bg: color-mix(in srgb, var(--surface) 92%, transparent); --btn-bd: transparent; box-shadow: var(--shadow-1);
  opacity: 0; transition: opacity .12s;
}
.lb-mc:hover .lb-check, .lb-mc:hover .lb-more, .lb-mc:focus-within .lb-check, .lb-mc:focus-within .lb-more,
.lb-mc .lb-more[aria-expanded="true"], .is-selecting .lb-mc .lb-check, .lb-mc.is-sel .lb-check { opacity: 1; }
@media (hover: none) { .lb-mc .lb-more { opacity: 1; } }
@media (max-width: 599px) {
  .lb-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .lb-pv-series .lb-pv-side { display: none; }
  .lb-mc .lb-pv-in { padding: 9% 12%; }
  .lb-mc-body { padding: 10px 11px 12px; gap: 5px; }
  .lb-mc-title { font-size: 14px; }
  .lb-mc-prod { font-size: 12px; }
  .lb-mc-badges { left: 7px; right: 7px; bottom: 7px; }
  .lb-mc-type { display: none; }
  .lb-mc .lb-more { top: 6px; right: 6px; width: 30px; height: 30px; }
  .lb-mc .lb-check { top: 6px; left: 6px; }
  .lb-build { left: 6px; right: 6px; bottom: 6px; padding: 7px 8px; }
  .lb-build-sub { display: none; }
}

/* Список / List view */
.lb-mlist { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.lb-mrow {
  position: relative; display: grid; align-items: center; gap: 14px; padding: 10px 16px; min-width: 0;
  grid-template-columns: 30px 76px minmax(0, 1fr) 128px 150px 130px 72px 118px 32px;
  border-bottom: 1px solid var(--line);
}
.lb-mrow:last-child { border-bottom: 0; }
.lb-mrow:not(.lb-mrow-head):hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.lb-mrow.is-sel { background: color-mix(in srgb, var(--primary-soft) 70%, transparent); }
.lb-mrow-head { padding-top: 9px; padding-bottom: 9px; background: var(--surface-2); font: 600 12px/1.3 var(--font); color: var(--muted); }
.lb-mrow-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lb-mrow-title { font: 700 14.5px/1.3 var(--font-head); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lb-mrow-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lb-mrow-type { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.lb-mrow-type .i { color: var(--muted); }
.lb-mrow-ver, .lb-mrow-date { font-size: 13px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-mrow-mob { display: none; }
.lb-mrow .lb-more { --btn-bd: transparent; --btn-bg: transparent; }
.lb-mrow:not(.lb-mrow-head) .lb-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.lb-mrow .lb-check, .lb-mrow .lb-more { position: relative; z-index: 2; }
.lb-mrow:has(.lb-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.lb-mrow .lb-link:focus-visible { outline: none; }
@media (max-width: 1199px) {
  .lb-mrow { grid-template-columns: 30px 76px minmax(0, 1fr) 140px 130px 110px 32px; }
  .lb-mrow-type, .lb-mrow-ver { display: none; }
}
@media (max-width: 899px) {
  .lb-mrow { grid-template-columns: 30px 64px minmax(0, 1fr) 32px; gap: 10px; padding: 10px 12px; align-items: start; }
  .lb-mrow-head, .lb-mrow-ch, .lb-mrow-st, .lb-mrow-date { display: none; }
  .lb-mrow-check, .lb-mrow .lb-pv, .lb-mrow-more { align-self: center; }
  .lb-mrow .lb-pv-sm { width: 64px; }
  .lb-mrow-mob { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; margin-top: 3px; }
  .lb-mrow-mdate { font-size: 12px; color: var(--muted); }
}
@media (max-width: 599px) {
  .lb-mrow { grid-template-columns: 26px 56px minmax(0, 1fr) 32px; gap: 8px; padding: 10px 8px 10px 6px; }
  .lb-mrow .lb-pv-sm { width: 56px; }
  .lb-mrow-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; }
  .lb-mrow .lb-check { width: 26px; }
}

/* Корзина / Trash */
.lb-trash-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.lb-trash-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--ink-2); }
.lb-trash-note .i { flex: none; color: var(--muted); }
.lb-danger-ghost { --btn-fg: var(--err); --btn-bg-h: var(--err-bg); }
.lb-trash { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.lb-trow { display: grid; grid-template-columns: 76px minmax(0, 1fr) 230px auto; gap: 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.lb-trow:last-child { border-bottom: 0; }
.lb-trow .lb-pv { opacity: .78; }
.lb-trow-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lb-trow-title { font: 700 14.5px/1.3 var(--font-head); color: var(--ink); }
.lb-trow-sub { font-size: 12.5px; color: var(--muted); }
.lb-trow-pub { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--info); }
.lb-trow-when { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--ink-2); }
.lb-trow-act { display: flex; align-items: center; gap: 4px; }
@media (max-width: 899px) {
  .lb-trow { grid-template-columns: 64px minmax(0, 1fr); gap: 6px 12px; align-items: start; padding: 12px; }
  .lb-trow .lb-pv-sm { width: 64px; grid-row: span 3; }
  .lb-trow-when, .lb-trow-act { grid-column: 2; }
  .lb-trow-act { margin-top: 4px; }
}

/* Окна материалов / Material dialogs */
.lb-foot { align-items: center; }
.lb-foot[hidden] { display: none; }
.lb-foot-note { margin-right: auto; font-size: 13px; color: var(--muted); }
.lb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.lb-step { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.35; color: var(--muted); }
.lb-step.is-done { color: var(--ink-2); }
.lb-step.is-now { color: var(--ink); font-weight: 600; }
.lb-step-ic { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; }
.lb-step.is-done .lb-step-ic { background: var(--ok-bg); color: var(--ok); }
.lb-step.is-now .lb-step-ic { color: var(--primary); }
.lb-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.lb-run { display: flex; flex-direction: column; gap: 18px; padding: 2px 0 6px; }
.lb-ri-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lb-ri { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.lb-ri.has-changes { border-color: color-mix(in srgb, var(--info) 30%, var(--line)); }
.lb-ri-head { display: flex; align-items: center; gap: 12px; }
.lb-ri-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-ri-title { font: 700 14px/1.3 var(--font-head); color: var(--ink); }
.lb-ri-sub { font-size: 12.5px; color: var(--muted); }
.lb-chgs { list-style: none; margin: 10px 0 0; padding: 10px 0 0 72px; border-top: 1px dashed var(--line-2); display: flex; flex-direction: column; gap: 8px; }
.lb-chg { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; }
.lb-chg > .i { flex: none; margin-top: 2px; color: var(--info); }
.lb-chg.is-note > .i { color: var(--warn); }
.lb-chg-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.lb-was { color: var(--muted); }
.lb-now { font-weight: 700; color: var(--ok); }
.lb-chg-note { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.lb-radios { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.lb-legend-t { display: block; margin: 0 0 8px; padding: 0; font: 600 13px/1.3 var(--font); color: var(--ink-2); }
.lb-radio { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .12s, background-color .12s; }
.lb-radio:hover { border-color: var(--line-2); }
.lb-radio:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); box-shadow: 0 0 0 1px var(--primary); }
.lb-radio input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.lb-radio-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-radio-main b { font-size: 14px; color: var(--ink); }
.lb-radio-main span { font-size: 12.5px; color: var(--muted); }
.lb-radio-n { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.lb-dl-names { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.lb-dl-names .lb-legend-t { margin: 0; }
.lb-dl-files { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-dl-files code { font-size: 12.5px; }
.lb-dfilters { display: flex; flex-direction: column; gap: 16px; }
.lb-dfilters .lb-fgroup, .lb-dfilters .lb-fsel { flex-direction: column; align-items: stretch; gap: 8px; }
.lb-dfilters .lb-fsel .select { width: 100%; }
@media (max-width: 599px) {
  .lb-chgs { padding-left: 0; }
  .lb-ri-head .badge { display: none; }
}

/* ==================================================================
   3. Бренд-кит / Brand kit
   ================================================================== */
.lb-bhead-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.lb-bmark { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 18px; box-shadow: var(--shadow-2); }
.lb-bstate { display: flex; align-items: flex-start; gap: 8px; margin: -6px 0 20px; padding: 10px 14px; border-radius: var(--r); font-size: 13.5px; line-height: 1.45; }
.lb-bstate .i { flex: none; margin-top: 1px; }
.lb-bstate.is-ok { background: var(--ok-bg); color: var(--ok); }
.lb-bstate.is-warn { background: var(--warn-bg); color: var(--warn); }
.lb-bk { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.lb-bk-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.lb-bk-aside { min-width: 0; }
@media (min-width: 1200px) {
  .lb-bk { grid-template-columns: minmax(0, 1fr) 420px; }
  .lb-bk-main { grid-column: 1; grid-row: 1; }
  .lb-bk-aside { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--top-h) + 20px); }
}
.lb-sec { padding: 22px 24px 24px; }
.lb-sec-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.lb-sec-title { margin: 0; font: 700 18px/1.3 var(--font-head); color: var(--ink); }
.lb-sec-sub { margin: 4px 0 0; max-width: 560px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.lb-sub-title { margin: 22px 0 10px; font: 700 14px/1.3 var(--font-head); color: var(--ink); }
@media (max-width: 599px) {
  .lb-sec { padding: 16px; }
  .lb-bhead-main { align-items: flex-start; gap: 12px; }
  .lb-bmark { width: 44px; height: 44px; border-radius: 13px; margin-top: 2px; }
  .lb-bmark svg { width: 24px; height: 24px; }
}

/* Логотип / Logo */
.lb-logos { display: grid; grid-template-columns: 1.15fr 1.15fr .8fr; gap: 12px; }
.lb-logo { display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; }
.lb-logo-art { display: grid; place-items: center; height: 116px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
.lb-logo-mark .lb-logo-art { border-style: dashed; }
.lb-logo figcaption { font-size: 12.5px; color: var(--muted); }
.lb-lockup { display: inline-flex; align-items: center; gap: 10px; font-size: 32px; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.lb-lockup svg { flex: none; }
.lb-logo-markbox { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 18px; box-shadow: var(--shadow-1); overflow: hidden; }
.lb-logo-markbox img { width: 80%; height: 80%; object-fit: contain; }
.lb-logo-img { max-width: 78%; max-height: 64px; object-fit: contain; }
.lb-logo-img.is-inverted, .lb-logo-pv img.is-inverted { filter: brightness(0) invert(1); }
@media (max-width: 599px) {
  .lb-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-logo-mark { grid-column: 1 / -1; }
  .lb-logo-mark .lb-logo-art { height: 92px; }
  .lb-logo-art { height: 96px; }
  .lb-lockup { font-size: 25px; gap: 8px; }
  .lb-lockup svg { width: 30px; height: 30px; }
}

/* Цвета / Colours */
.lb-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.lb-sw {
  display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; text-align: left;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.lb-sw:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.lb-sw.is-on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.lb-sw-chip { display: flex; align-items: flex-end; justify-content: space-between; height: 78px; padding: 9px 10px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06); }
.lb-sw-aa { font: 600 21px/1 var(--font-brand-head); }
.lb-sw-edit { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #1f2622; }
.lb-sw-info { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px 10px; min-width: 0; }
.lb-sw-role { font: 700 12px/1.2 var(--font); color: var(--muted); }
.lb-sw-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 14px/1.25 var(--font-head); color: var(--ink); }
.lb-sw-hex { font: 500 12px/1.2 var(--mono); color: var(--ink-2); }
.lb-cedit { margin-top: 14px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.lb-cedit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 12px; }
.lb-cedit-head b { font: 700 14.5px/1.3 var(--font-head); color: var(--ink); }
.lb-cedit-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; }
.lb-cpick { position: relative; display: block; flex: none; width: 56px; height: 56px; border-radius: 14px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), var(--shadow-1); cursor: pointer; }
.lb-cpick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.lb-cpick:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.lb-cpick::after { content: ''; position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6b62' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center no-repeat; box-shadow: var(--shadow-1); pointer-events: none; }
.lb-hex { width: 124px; }
.lb-hex .input { font-family: var(--mono); text-transform: uppercase; letter-spacing: .02em; }
.lb-sugg { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.lb-dots { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-dot { width: 30px; height: 30px; flex: none; padding: 0; border: 3px solid var(--surface); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; transition: transform .1s; }
.lb-dot:hover { transform: scale(1.08); }
.lb-dot.is-on { box-shadow: 0 0 0 2px var(--primary); }
.lb-dots-static { flex-wrap: nowrap; gap: 0; vertical-align: middle; }
.lb-dots-static .lb-dot { width: 24px; height: 24px; margin-left: -6px; border-width: 2px; cursor: default; }
.lb-dots-static .lb-dot:first-child { margin-left: 0; }
.lb-dots-static .lb-dot:hover { transform: none; }
.lb-pairs { list-style: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
.lb-pair { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.lb-pair:last-child { border-bottom: 0; }
.lb-pair-pv { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 50px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); line-height: 1; }
.lb-pair-pv b { font: 700 19px/1 var(--font-brand-head); }
.lb-pair-pv span { margin-top: 4px; font: 500 12px/1 var(--font-brand); }
.lb-pair-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-pair-txt b { font-size: 14px; color: var(--ink); }
.lb-pair-txt span { font-size: 12.5px; color: var(--muted); }
.lb-pair-txt .lb-pair-tip { color: var(--warn); }
.lb-pair-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.lb-ratio { font-variant-numeric: tabular-nums; }
.lb-pair-fix { --btn-fg: var(--primary); }
@media (max-width: 599px) {
  .lb-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .lb-sw-chip { height: 62px; }
  .lb-cedit { padding: 12px; }
  .lb-pair { grid-template-columns: 58px minmax(0, 1fr); gap: 8px 12px; padding: 10px 12px; }
  .lb-pair-end { grid-column: 2; align-items: flex-start; }
  .lb-pair-pv { height: 46px; }
}

/* Шрифты / Fonts */
.lb-fslots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lb-fslot { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.lb-fslot-k { font: 700 12px/1.2 var(--font); color: var(--muted); }
.lb-fslot-name { font: 700 15px/1.25 var(--font-head); color: var(--ink); }
.lb-fslot-head { margin: 4px 0 2px; font-size: 27px; font-weight: 600; line-height: 1.15; color: var(--ink); }
.lb-fslot-text { margin: 4px 0 2px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.lb-flag { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/1.3 var(--font); color: var(--ok); }
.lb-fonts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lb-font { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.lb-font.is-used { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); background: color-mix(in srgb, var(--primary-soft) 40%, var(--surface)); }
.lb-font-top { display: flex; flex-direction: column; gap: 2px; }
.lb-font-top b { font-size: 14px; color: var(--ink); }
.lb-font-top span { font-size: 12px; color: var(--muted); }
.lb-font-sample { margin: 2px 0; font-size: 21px; font-weight: 500; line-height: 1.22; color: var(--ink); overflow-wrap: anywhere; }
.lb-font-act { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 6px; }
.lb-font-use { align-self: flex-start; max-width: 100%; }
.lb-font-use > button[aria-pressed="true"] { color: var(--primary); }
@media (max-width: 1199px) and (min-width: 900px) { .lb-fonts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .lb-fslots { grid-template-columns: minmax(0, 1fr); }
  .lb-fonts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lb-font { padding: 12px; }
  .lb-font-sample { font-size: 17px; }
  .lb-font-use { align-self: stretch; }
  .lb-font-use > button { flex: 1 1 0; padding: 0 6px; }
}

/* Сетка карточек и тон / Grid and tone */
.lb-grids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lb-gridopt, .lb-tone {
  position: relative; display: grid; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); cursor: pointer; transition: border-color .12s, box-shadow .12s, background-color .12s;
}
.lb-gridopt { grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 14px; }
.lb-gridopt:hover, .lb-tone:hover { border-color: var(--line-2); }
.lb-gridopt.is-on, .lb-tone.is-on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface)); }
.lb-gridopt:focus-within, .lb-tone:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.lb-gridopt .lb-shot { width: 84px; aspect-ratio: 3 / 4; }
.lb-gridopt-txt { display: flex; flex-direction: column; gap: 3px; padding-right: 26px; }
.lb-gridopt-txt b { font: 700 14.5px/1.3 var(--font-head); color: var(--ink); }
.lb-gridopt-txt span { font-size: 13px; color: var(--muted); }
.lb-radio-mark { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--line-2); border-radius: 50%; color: transparent; background: var(--surface); }
.lb-gridopt .lb-radio-mark { position: absolute; top: 10px; right: 10px; }
.is-on > .lb-radio-mark, .is-on .lb-tone-head .lb-radio-mark { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.lb-tones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lb-tone { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.lb-tone-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lb-tone-head b { font: 700 14.5px/1.3 var(--font-head); color: var(--ink); }
.lb-tone-about { font-size: 12.5px; color: var(--muted); }
.lb-tone-q { margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font: 400 14px/1.5 var(--font-brand); color: var(--ink); }
.lb-tone.is-on .lb-tone-q { background: var(--surface); }
.lb-tone-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; }
.lb-tone-facts .lb-flabel { margin-right: 2px; }
.lb-tone-facts .chip .i { color: var(--ok); }
.lb-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.lb-rule-list, .lb-ex-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.45; }
.lb-rule-list li { display: flex; gap: 8px; color: var(--ink-2); }
.lb-rule-list .i { flex: none; margin-top: 2px; color: var(--ok); }
.lb-ex-list li { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.lb-ex-bad, .lb-ex-good { display: flex; align-items: flex-start; gap: 6px; }
.lb-ex-bad { color: var(--muted); }
.lb-ex-bad .i { flex: none; margin-top: 2px; color: var(--err); }
.lb-ex-good { color: var(--ink); }
.lb-ex-good .i { flex: none; margin-top: 2px; color: var(--ok); }
@media (max-width: 899px) { .lb-tones { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  .lb-grids { grid-template-columns: minmax(0, 1fr); }
  .lb-rules { grid-template-columns: minmax(0, 1fr); }
}

/* Живые образцы / Live samples */
.lb-samples { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1); }
.lb-samples-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.lb-samples-head .lb-sec-title { font-size: 16px; }
.lb-live { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--font); color: var(--ok); }
.lb-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); animation: pulse 1.8s ease-in-out infinite; }
.lb-samples-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 12px; align-items: start; }
.lb-sample { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.lb-sample figcaption { font-size: 12px; color: var(--muted); }
.lb-sample-site { grid-column: 1 / -1; }
.lb-site { position: relative; aspect-ratio: 1280 / 740; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #f7f3ec; }
.lb-site .sitepv {
  --sp-moss: var(--lb-sp-moss, #2F5D46); --sp-moss-2: var(--lb-sp-moss2, #24493A); --sp-clay: var(--lb-sp-clay, #E9E2D4);
  --sp-terra: var(--lb-sp-terra, #C46A3E); --sp-ink: var(--lb-sp-ink, #1F2622); --sp-milk: var(--lb-sp-milk, #F7F3EC);
  font-family: var(--lb-sp-text, 'Golos Text'), sans-serif;
}
.lb-site .sp-h1, .lb-site .sp-h2, .lb-site .sp-logo { font-family: var(--lb-sp-head, 'Lora'), serif; }
.lb-site .sp-btn, .lb-site .sp-eyebrow, .lb-site .sp-lead { font-family: var(--lb-sp-text, 'Golos Text'), sans-serif; }
.lb-sample-card .lb-shot { width: 100%; aspect-ratio: 3 / 4; }
.lb-logo-ov { position: absolute; width: auto; max-width: 46%; object-fit: contain; object-position: left center; pointer-events: none; }
.lb-logo-ov-card { left: 7.5%; top: 4.7%; height: 4%; }
.lb-logo-ov-slide { left: 6%; top: 8.6%; height: 5.4%; }
.lb-logo-ov-site { display: block; height: 40px; width: auto; }
.lb-sample-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lb-sample-slide .lb-shot { width: 100%; aspect-ratio: 16 / 9; }
.lb-legend { display: flex; flex-direction: column; gap: 9px; padding: 11px 12px; border-radius: 10px; background: var(--surface-2); }
.lb-legend-dots { display: flex; }
.lb-legend-dot { width: 24px; height: 24px; margin-left: -6px; border: 2px solid var(--surface-2); border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.lb-legend-dot:first-child { margin-left: 0; }
.lb-legend-fonts { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; line-height: 1.3; color: var(--ink); }
@media (max-width: 1199px) {
  .lb-samples-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, .62fr) minmax(0, .95fr); }
  .lb-sample-site { grid-column: auto; }
}
@media (max-width: 599px) {
  .lb-samples { padding: 14px 0 12px; }
  .lb-samples-head { padding: 0 14px; }
  .lb-samples-grid { display: flex; gap: 10px; overflow-x: auto; padding: 0 14px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .lb-samples-grid::-webkit-scrollbar { display: none; }
  .lb-samples-grid > * { scroll-snap-align: start; flex: none; }
  .lb-sample-site { width: 78%; }
  .lb-sample-card { width: 38%; }
  .lb-sample-col { width: 64%; }
}

/* Окна бренда / Brand dialogs */
.lb-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 16px; text-align: center;
  border: 1.5px dashed var(--line-2); border-radius: 14px; background: var(--surface-2); cursor: pointer;
  transition: border-color .12s, background-color .12s;
}
.lb-drop:hover, .lb-drop.is-over { border-color: var(--primary); background: var(--primary-soft); }
.lb-drop:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.lb-drop b { font-size: 14.5px; color: var(--ink); }
.lb-drop > span:last-child { font-size: 12.5px; color: var(--muted); }
.lb-drop-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 4px; border-radius: 14px; background: var(--surface); color: var(--primary); box-shadow: var(--shadow-1); }
.lb-logo-pv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.lb-logo-pv-tile { display: grid; place-items: center; height: 100px; border: 1px solid var(--line); border-radius: 12px; }
.lb-logo-pv-tile img { max-width: 80%; max-height: 60px; object-fit: contain; }
.lb-file-line { display: flex; align-items: center; gap: 8px; margin: 10px 0 12px; font-size: 13px; color: var(--ink-2); }
.lb-imp-seg { margin: 0 0 16px; }
.lb-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.lb-imp-files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.lb-imp-files:empty { display: none; }
.lb-imp-file { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.lb-imp-file .lb-shot { width: 100%; aspect-ratio: 3 / 4; }
.lb-imp-file img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; box-shadow: var(--shadow-1); }
.lb-imp-file figcaption { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 12px; color: var(--ink-2); min-width: 0; }
.lb-imp-src { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.lb-imp-src .i { color: var(--primary); }
.lb-offers { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lb-offer { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .12s, background-color .12s; }
.lb-offer.is-on { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); background: color-mix(in srgb, var(--primary-soft) 38%, var(--surface)); }
.lb-offer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.lb-offer-head b { font: 700 15px/1.3 var(--font-head); color: var(--ink); }
.lb-offer-head .seg, .lb-offer-head .badge { margin-left: auto; }
.lb-offer-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.lb-offer-why { margin: 8px 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.lb-offer-cmp { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.lb-offer-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lb-offer-side.is-next .lb-flabel { color: var(--primary); }
.lb-offer-arrow { display: inline-flex; color: var(--muted); }
.lb-ofont { display: flex; flex-direction: column; gap: 1px; color: var(--ink); }
.lb-ofont span:first-child { font-size: 20px; font-weight: 600; line-height: 1.2; }
.lb-ofont span:last-child { font-size: 14px; color: var(--ink-2); }
.lb-ogrid { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.lb-ogrid .lb-shot { width: 66px; aspect-ratio: 3 / 4; border-radius: 4px; }
.lb-ovoice { display: flex; flex-direction: column; gap: 2px; max-width: 270px; }
.lb-ovoice b { font-size: 13.5px; color: var(--ink); }
.lb-ovoice span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.lb-diff, .lb-scope { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.lb-diff li, .lb-scope li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.lb-diff li > .i, .lb-scope li > .i { flex: none; margin-top: 2px; color: var(--primary); }
.lb-diff b, .lb-scope b { color: var(--ink); }
.lb-diff .lb-dots-static { margin: 0 2px; }
.lb-diff-none { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; color: var(--ok); }
.lb-diff-none .i { flex: none; margin-top: 2px; }
.lb-apply-thumbs { display: flex; gap: 8px; margin-top: 16px; overflow: hidden; }
@media (max-width: 599px) {
  .lb-offer { padding: 12px; }
  .lb-offer-head .seg { margin-left: 0; width: 100%; }
  .lb-offer-head .seg > button { flex: 1 1 0; }
  .lb-apply-thumbs .lb-pv:nth-child(n+5) { display: none; }
}

/* ==================================================================
   4. Шаблоны / Templates
   ================================================================== */
.lb-ttop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; }
.lb-tfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.lb-chiprow-sm { gap: 6px; }
.lb-tnote { display: flex; align-items: center; gap: 8px; margin: -6px 0 16px; font-size: 13.5px; color: var(--ink-2); }
.lb-tnote .i { flex: none; color: var(--info); }
.lb-tgrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); }
.lb-tc { position: relative; overflow: hidden; transition: border-color .15s, box-shadow .2s, transform .2s; }
.lb-tc:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.lb-tc-open { display: flex; flex-direction: column; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lb-tc-open:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-l); }
.lb-tc-pv { border-bottom: 1px solid var(--line); }
.lb-tc-mine { position: absolute; top: 10px; left: 10px; box-shadow: var(--shadow-1); }
.lb-pv-site { position: absolute; left: 8%; right: 8%; top: 9%; bottom: 0; overflow: hidden; border-radius: 8px 8px 0 0; box-shadow: 0 1px 2px rgba(18, 30, 24, .12), 0 6px 18px rgba(18, 30, 24, .14); background: #f7f3ec; }
.lb-tc-body { display: flex; flex-direction: column; gap: 4px; padding: 13px 15px 15px; min-width: 0; }
.lb-tc-title { display: flex; align-items: center; gap: 6px; min-width: 0; font: 700 15px/1.3 var(--font-head); color: var(--ink); }
.lb-tc-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lb-lock { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
.lb-tc-meta { font-size: 12.5px; color: var(--ink-2); }
.lb-tc-fields { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
@media (max-width: 899px) {
  .lb-tfilters { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  .lb-tfilters .lb-fgroup { flex-direction: column; align-items: flex-start; gap: 6px; }
  .lb-tfilters .lb-chiprow { width: calc(100% + 48px); }
}
@media (max-width: 599px) {
  .lb-tfilters { gap: 8px; }
  .lb-tfilters .lb-fgroup { flex-direction: row; align-items: center; gap: 8px; }
  .lb-tfilters .lb-fgroup > .lb-flabel { flex: none; width: 74px; }
  .lb-tfilters .lb-chiprow { flex: 1 1 auto; width: auto; margin: 0 -16px 0 0; padding: 2px 16px 2px 0; }
  .lb-tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .lb-tc-body { padding: 10px 11px 12px; }
  .lb-tc-title { font-size: 14px; }
  .lb-tc-fields { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lb-tseg { width: 100%; }
  .lb-tseg > button { flex: 1 1 0; }
}

/* Окно шаблона / Template window */
.lb-tm { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.lb-tm-stagewrap { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lb-tm-stage {
  position: relative; display: flex; align-items: center; justify-content: center; height: 452px; padding: 22px 60px; overflow: hidden;
  border-radius: 16px; background: radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, var(--surface) 60%, transparent), transparent 70%), var(--surface-2);
}
.lb-tm-view { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; }
.lb-tm-frame { overflow: hidden; border-radius: 8px; background: #f7f3ec; box-shadow: 0 2px 4px rgba(18, 30, 24, .12), 0 18px 44px rgba(18, 30, 24, .18); }
.lb-tm-frame > svg { display: block; width: 100%; height: 100%; }
.is-tall > .lb-tm-frame { height: 100%; aspect-ratio: 3 / 4; }
.is-sq > .lb-tm-frame { height: min(100%, 360px); aspect-ratio: 1 / 1; }
.is-story > .lb-tm-frame { height: 100%; aspect-ratio: 9 / 16; }
.is-wide > .lb-tm-frame { width: 100%; max-height: 100%; aspect-ratio: 16 / 9; }
.is-site > .lb-tm-frame { width: 100%; max-height: 100%; background: transparent; box-shadow: none; border-radius: 14px; }
.is-phone > .lb-tm-frame { width: 214px; height: 100%; background: transparent; box-shadow: none; border-radius: 34px; }
.lb-tm-nav { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); border-radius: 50%; box-shadow: var(--shadow-2); }
.lb-tm-nav:active { transform: translateY(-50%); }
.lb-tm-prev { left: 12px; }
.lb-tm-next { right: 12px; }
.lb-tm-cap { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
.lb-tm-strip { display: flex; justify-content: center; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.lb-tm-th {
  display: flex; flex-direction: column; align-items: center; gap: 5px; flex: none; width: 88px; padding: 6px 4px 5px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.lb-tm-th:hover { border-color: var(--line-2); }
.lb-tm-th.is-on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); color: var(--ink); }
.lb-tm-th-art { display: block; overflow: hidden; border-radius: 3px; box-shadow: 0 1px 3px rgba(18, 30, 24, .18); }
.lb-tm-th-art > svg { display: block; width: 100%; height: 100%; }
.lb-tm-th.is-tall .lb-tm-th-art { width: 42px; aspect-ratio: 3 / 4; }
.lb-tm-th.is-sq .lb-tm-th-art { width: 52px; aspect-ratio: 1 / 1; }
.lb-tm-th.is-story .lb-tm-th-art { width: 32px; aspect-ratio: 9 / 16; }
.lb-tm-th.is-wide { width: 104px; }
.lb-tm-th.is-wide .lb-tm-th-art { width: 92px; aspect-ratio: 16 / 9; }
.lb-tm-th-ic { display: grid; place-items: center; width: 52px; height: 40px; border-radius: 8px; background: var(--surface-2); color: var(--primary); }
.lb-tm-th-l { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.lb-tm-info { display: flex; flex-direction: column; min-width: 0; }
.lb-tm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-tm-about { margin: 12px 0 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.lb-tm-opts { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 8px 0 2px; }
.lb-tm-opt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lb-tm-opt .select { width: 200px; max-width: 100%; }
.lb-tm-fields { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.lb-tm-fields li { display: flex; align-items: baseline; gap: 10px; }
.lb-tm-fields b { color: var(--ink); }
.lb-role { display: inline-flex; justify-content: center; flex: none; min-width: 92px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--info-bg); color: var(--info); font: 600 12px/1.25 var(--font); }
.lb-tm-lock { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.lb-tm-lock .i { flex: none; margin-top: 1px; color: var(--ink); }
.lb-tm-lock b { color: var(--ink); }
.lb-tm-sizes { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 0; font-size: 13px; color: var(--ink-2); }
@media (max-width: 899px) {
  .lb-tm { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lb-tm-stage { height: 360px; padding: 18px 52px; }
  .lb-tm-strip { justify-content: flex-start; }
}
@media (max-width: 599px) {
  .lb-tm-stage { height: 300px; padding: 14px 44px; border-radius: 14px; }
  .lb-tm-nav { width: 36px; height: 36px; }
  .lb-tm-prev { left: 6px; }
  .lb-tm-next { right: 6px; }
  .is-phone > .lb-tm-frame { width: 160px; }
  .lb-role { min-width: 80px; }
  .lb-tm-fields li { flex-direction: column; gap: 4px; }
}