/* ==========================================================================
   Сообщество — макеты community/submit, talk, talk-new, talk-topic.
   Префиксы: cm- общее, sb- «Прислать предложение», tk- лента обсуждений,
   tn- новая тема, tp- тема. Цвета — только токены (тёмная тема сама).
   ПК ≥1200, промежуточный 768–1199, телефон <768.
   ========================================================================== */

/* --- общее ---------------------------------------------------------------- */
.cm { --cm-top: 126px; }                 /* липкие блоки — под шапкой (62 + 48 + зазор) */
.cm-pill {
  margin: 0; display: inline-flex; align-self: flex-start; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px 0 10px; border-radius: var(--r-32);
  background: var(--surface-2); color: var(--text-2); font-size: 14px; font-weight: 600;
}
.cm-pill svg { color: var(--text-3); }
.cm-pill--brand { background: var(--brand-bg); color: var(--brand-text); }
.cm-pill--brand svg { color: var(--brand-text); }
.cm-tl {
  display: inline-flex; align-items: center; gap: var(--sp-8); min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--brand-text);
  transition: color var(--dur-hover) var(--ease-std);
}
.cm-tl:hover { color: var(--link-hover); }
.cm-tl__arr { display: flex; transition: transform var(--dur-hover) var(--ease-std); }
.cm-tl:hover .cm-tl__arr { transform: translateX(3px); }
.cm-num {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--text); color: var(--bg);
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: var(--ls-display);
}
/* метка типа темы: вопрос — зелёная, ищу товар — тёплая, разбор — серая */
.cm-kind {
  height: 26px; padding: 0 10px 0 8px; border-radius: var(--r-8); flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 13px; font-weight: 600; line-height: 1;
}
.cm-kind--question { background: var(--brand-bg); color: var(--brand-on-bg); }
.cm-kind--question svg { color: var(--brand-text); }
.cm-kind--search { background: var(--warm-bg); color: var(--warm-on-bg); }
.cm-kind--search svg { color: var(--warm-big); }
.cm-kind--review { background: var(--surface-3); color: var(--text); }
.cm-kind--review svg { color: var(--text-2); }
/* аватар-монограмма ника: три спокойных цвета по номеру автора */
.cm-ava {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1;
  background: var(--warm-bg); color: var(--warm-on-bg);
}
.cm-ava--1 { background: var(--brand-bg); color: var(--brand-on-bg); }
.cm-ava--2 { background: var(--surface-3); color: var(--text-2); }
/* плашка сообщения: зелёная (готово), красная (ошибка), жёлтая (почта) */
@keyframes cm-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes cm-shake {
  0%, 100% { transform: none; } 20% { transform: translateX(-3px) rotate(-6deg); } 40% { transform: translateX(3px) rotate(6deg); }
  60% { transform: translateX(-2px); } 80% { transform: translateX(2px); }
}
@keyframes cm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cm-pop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes cm-send { 0%, 70%, 100% { transform: none; } 80% { transform: translate(3px, -3px); } 90% { transform: translate(-1px, 1px); } }
@keyframes cm-bubble { 0% { opacity: 0; transform: scale(.8); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes cm-dot {
  0%, 100% { opacity: 1; transform: none; } 20%, 60% { opacity: .25; transform: none; }
  40%, 80% { opacity: 1; transform: translateY(-1.5px); }
}
.cm-shake { display: flex; animation: cm-shake .5s var(--ease-std) .6s 1 both; }
/* пустое место: пузырь с точками набора (один цикл) */
.cm-bubble { transform-origin: 30% 70%; animation: cm-bubble .5s var(--ease-out) .3s both; }
.cm-bubble .cm-dot { transform-box: fill-box; transform-origin: 50% 50%; animation: cm-dot 1.6s var(--ease-std) .8s 1 both; }
.cm-bubble .cm-dot--2 { animation-delay: .98s; }
.cm-bubble .cm-dot--3 { animation-delay: 1.16s; }

/* ==========================================================================
   Прислать предложение (/submit)
   ========================================================================== */
.sb { padding-block: var(--sp-48) 72px; }
.sb-wrap { display: flex; flex-direction: column; gap: var(--sp-48); }
.sb-crumbs { display: none; }
.sb-p-m, .sb-cap-m { display: none; }

/* первый экран: текст слева, три шага справа */
.sb-hero { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: var(--sp-64); align-items: center; }
.sb-hero__text { display: flex; flex-direction: column; gap: var(--sp-20); align-items: flex-start; min-width: 0; }
.sb-hero__h { margin: 0; font-size: 48px; }
.sb-hero__lead { margin: 0; max-width: 600px; }
.sb-steps { display: flex; flex-direction: column; gap: var(--sp-10); }
.sb-step-card { display: flex; gap: var(--sp-16); align-items: flex-start; padding: 18px 20px; border-radius: var(--r-16); background: var(--surface-2); }
.sb-step-card__n {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--text); color: var(--bg); font-size: 15px; font-weight: 700;
}
.sb-step-card__t { display: flex; flex-direction: column; gap: var(--sp-4); font-size: 15px; line-height: 1.45; color: var(--text-2); }
.sb-step-card__t b { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--text); }
.sb-step-card--go { background: var(--brand-bg); }
.sb-step-card--go .sb-step-card__n { background: var(--brand); color: var(--on-accent); }
.sb-step-card--go .sb-step-card__t, .sb-step-card--go .sb-step-card__t b { color: var(--brand-on-bg); }
.sb-steps-m { display: none; }

/* сетка: слева плашка и форма, справа липкие правила */
.sb-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-20) var(--sp-40);
  grid-template-areas: "form rules"; align-items: start;
}
.sb-grid:has(> .sb-notice) { grid-template-areas: "notice rules" "form rules"; grid-template-rows: auto 1fr; }
.sb-notice { grid-area: notice; min-width: 0; }
.sb-form { grid-area: form; min-width: 0; }
.sb-rules { grid-area: rules; }

/* плашка над формой */
.sb-msg {
  display: flex; gap: var(--sp-16); align-items: center; padding: 18px 20px; border-radius: var(--r-16);
  background: var(--surface-2); border: 1px solid var(--line); animation: cm-drop .4s var(--ease-out) .2s both;
}
.sb-msg--risk { background: var(--risk-bg); border-color: var(--risk-border); }
.sb-msg__ic {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text-2);
}
.sb-msg--risk .sb-msg__ic { color: var(--risk); }
.sb-msg__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); font-size: 16px; line-height: 1.5; color: var(--text); }
.sb-msg__h { font-size: 17px; font-weight: 700; line-height: 1.35; }
.sb-msg__no { color: var(--risk); }
.sb-msg__sub { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.sb-msg__act { margin: 0; display: flex; flex-shrink: 0; }
.sb-msg__btn { --btn-h: 44px; flex-shrink: 0; font-size: 15px; }

/* форма-карточка */
.sb-form {
  margin: 0; display: flex; flex-direction: column; gap: 28px; padding: var(--sp-32);
  border: 1px solid var(--line); border-radius: var(--r-18); background: var(--surface);
}
.sb-form__hr { background: var(--line-soft); }
.sb-sec { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sb-sec--fields { gap: 22px; }
.sb-sec__head { display: flex; gap: 14px; align-items: flex-start; }
.sb-num {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--text); color: var(--bg); font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: var(--ls-display);
}
.sb-sec__ht { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.sb-sec__h { margin: 0; font-family: var(--font); letter-spacing: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.sb-sec__p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }

/* шаг 1: фирменное поле с жёсткой тенью, «Подтянуть» внутри */
.sb-url { display: flex; flex-direction: column; gap: var(--sp-10); }
.sb-urlrow { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.sb-big {
  grid-area: 1 / 1; display: flex; align-items: center; gap: var(--sp-12); height: 64px;
  padding: 0 252px 0 18px; border: 2px solid var(--text); border-radius: var(--r-16);
  background: var(--surface); box-shadow: 0 6px 0 var(--text); color: var(--text-3);
  transition: box-shadow .18s var(--ease-std), transform .18s var(--ease-std), border-color .18s var(--ease-std);
}
.sb-big:focus-within { border-color: var(--brand); box-shadow: 0 4px 0 var(--brand); transform: translateY(2px); }
.sb-big.is-error { border-color: var(--risk); box-shadow: 0 6px 0 var(--risk); }
.sb-big input {
  flex: 1 1 auto; width: 0; min-width: 0; height: 56px; padding: 0; border: 0; outline: none; background: transparent;
  font-size: 17px; color: var(--text); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.sb-big input::placeholder { color: var(--placeholder); }
.sb-big input:focus-visible { outline: none; }
.sb-pull {
  grid-area: 1 / 1; justify-self: end; margin-right: 8px; width: 232px; --btn-h: 48px; border-radius: 11px;
  font-size: 16px; font-weight: 700; position: relative; z-index: 1;
}
.sb-pull:focus-within, .sb-urlrow:focus-within .sb-pull { transform: translateY(2px); }
.sb-pull__ic { display: flex; }
.sb-pull__spin, .sb-send__spin { display: none; }
.sb-pull[aria-busy="true"] .sb-pull__ic, .sb-send[aria-busy="true"] .sb-send__ic { display: none; }
.sb-pull[aria-busy="true"] .sb-pull__spin, .sb-send[aria-busy="true"] .sb-send__spin { display: block; }
@keyframes sb-twinkle { 0%, 100% { transform: none; } 50% { transform: scale(1.18) rotate(12deg); } }
.sb-twinkle { transform-origin: 50% 50%; animation: sb-twinkle 2.4s var(--ease-std) 1.2s 2; }
.sb-url-err { margin: 6px 0 0; display: flex; align-items: flex-start; gap: var(--sp-8); font-size: 14px; line-height: 1.45; color: var(--risk); }
.sb-pulling { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-3); }
.sb-found { margin-top: 6px; display: flex; align-items: center; gap: var(--sp-12); flex-wrap: wrap; }
.sb-shop {
  display: inline-flex; align-items: center; gap: var(--sp-8); height: 36px; padding: 0 12px 0 6px; border-radius: var(--r-pill);
  background: var(--brand-bg); color: var(--brand-on-bg); font-size: 15px; animation: cm-pop .4s var(--ease-out) .5s both;
}
.sb-shop b { color: var(--text); }
.sb-shop img { width: 24px; height: 24px; border-radius: 7px; object-fit: contain; background: var(--photo-tile); }
.sb-shop__mono {
  width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  background: var(--text); color: var(--bg); font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.sb-shop svg { color: var(--brand-text); }
.sb-draw path { stroke-dasharray: 1; animation: cm-draw .5s var(--ease-out) .8s both; }
.sb-got-line { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.sb-got-line > svg { color: var(--brand-text); }
.sb-got-line b { color: var(--text); }
.sb-got-line__miss { color: var(--warn-text); }
.sb-hint { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-3); }

/* шаг 2: поле слева, «что смотрит модератор» справа */
.sb-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; align-items: start; }
.sb-row--head { align-items: end; }
.sb-row__cap { font-size: 13px; font-weight: 700; color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; padding-left: 18px; }
.sb-note {
  margin: 0; padding: 30px 0 0 16px; border-left: 2px solid var(--line); display: flex; gap: var(--sp-8);
  font-size: 14px; line-height: 1.45; color: var(--text-3);
}
.sb-note svg { flex-shrink: 0; margin-top: 1px; }
.sb-label { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; min-height: 22px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--text-2); }
.sb-label svg { color: var(--text-3); }
.sb-label.is-error { color: var(--risk); }
.sb-got {
  display: inline-flex; align-items: center; gap: var(--sp-4); height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--brand-bg); color: var(--brand-on-bg); font-size: 13px; font-weight: 600;
  animation: cm-pop .4s var(--ease-out) .9s both;
}
.sb-label .sb-got svg { color: var(--brand-text); }
.sb-in { font-size: 16px; }
.sb-in--lg { height: 52px; font-size: 17px; font-weight: 600; }
.sb-in--code { font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.sb-in[aria-invalid="true"], .select[aria-invalid="true"] { border-width: 2px; padding: 0 13px; }
.sb-ta { min-height: 104px; font-size: 16px; }
.sb-ta--sm { min-height: 80px; }
.sb-form .select { font-size: 16px; }
@keyframes sb-flash { 0%, 30% { background-color: var(--brand-bg); } 100% { background-color: var(--surface); } }
.sb-flash { animation: sb-flash 1.2s var(--ease-std) .9s both; }
.sb-ferr { font-weight: 600; }

/* тип + промокод; без кода — одна колонка и строка «код не сохраняем» */
.sb-kc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16); align-items: start; }
.sb-kc.is-nocode { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); }
.sb-kinds { display: none; margin: 0; padding: 0; border: 0; min-width: 0; }
.sb-code[hidden], .sb-fold[hidden] { display: none; }
.sb-fold {
  margin: 0; display: flex; align-items: center; gap: var(--sp-10); padding: 12px 14px; border-radius: var(--r-12);
  background: var(--surface-2); font-size: 14px; line-height: 1.45; color: var(--text-2);
  animation: cm-drop .22s var(--ease-std) both;
}
.sb-fold svg { color: var(--text-3); flex-shrink: 0; }
.sb-nums { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 164px; gap: var(--sp-12); align-items: start; }
.sb-in--date { padding-right: 10px; }

/* кнопка отправки */
.sb-submit { display: flex; align-items: center; gap: var(--sp-20); }
.sb-send { flex-shrink: 0; padding: 0 24px; gap: var(--sp-10); }
.sb-send__ic { display: flex; animation: cm-send 2.4s var(--ease-std) 1.4s 2; }
.sb-submit__cap { font-size: 14px; line-height: 1.5; color: var(--text-3); }

/* правила — спокойная липкая карточка справа */
.sb-rules {
  position: sticky; top: var(--cm-top); align-self: start;
  display: flex; flex-direction: column; gap: 22px; padding: 28px; border-radius: var(--r-20);
  border: 1px solid var(--line); background: var(--surface);
}
.sb-rules__h { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.2; letter-spacing: var(--ls-display); }
.sb-acc { display: none; }
.sb-rules__body { display: flex; flex-direction: column; gap: 22px; }
.sb-rules__list { display: flex; flex-direction: column; gap: 18px; }
.sb-rules__list li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.sb-rules__list b { font-weight: 700; color: var(--text); }
.sb-rules__ic {
  width: 36px; height: 36px; border-radius: var(--r-10); flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text);
}
.sb-rules__ic--no { background: var(--risk-bg); color: var(--risk); }
.sb-rules__hr { background: var(--line-soft); }

/* промежуточный: правила над формой, пометки модератора — под полями */
@media (max-width: 1199px) {
  .sb-hero { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-40); }
  .sb-hero__h { font-size: 40px; }
  .sb-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-20) var(--sp-24); }
  .sb-form { padding: var(--sp-24); }
  .sb-big { padding-right: 18px; }
  .sb-urlrow { gap: var(--sp-16); }
  .sb-pull { grid-area: 2 / 1; justify-self: stretch; margin: 0; width: auto; }
  .sb-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .sb-row__cap { display: none; }
  .sb-note { padding: 0; border: 0; font-size: 13px; line-height: 1.4; }
  .sb-note svg { display: none; }
  .sb-rules { padding: var(--sp-24); }
  .sb-rules__h { font-size: 22px; }
  .sb-p-d { display: none; }
  .sb-p-m { display: inline; }
}
@media (max-width: 1023px) {
  .sb-hero { grid-template-columns: minmax(0, 1fr); }
  .sb-steps { flex-direction: row; }
  .sb-step-card { flex: 1 1 0; }
  .sb-grid, .sb-grid:has(> .sb-notice) { display: flex; flex-direction: column; gap: 28px; }
  .sb-rules { position: static; }
}

/* телефон */
@media (max-width: 767px) {
  .sb { padding-block: var(--sp-12) 0; }
  .sb-wrap { gap: 28px; }
  .sb-crumbs { display: block; margin-bottom: -18px; }
  .sb-hero { gap: 14px; }
  .sb-hero__text { gap: 14px; }
  .sb-hero__h { font-size: 30px; line-height: 1.15; }
  .sb-hero__lead { font-size: 16px; }
  .sb-hero__me { display: none; }
  .sb-steps { display: none; }
  .sb-steps-m { display: flex; flex-direction: column; gap: var(--sp-10); padding: 12px; border-radius: var(--r-14); background: var(--surface-2); }
  .sb-steps-m ol { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
  .sb-steps-m li { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; }
  .sb-steps-m li svg { color: var(--placeholder); margin-left: 2px; }
  .sb-steps-m__n {
    width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--text); color: var(--bg); font-size: 13px; font-weight: 700;
  }
  .sb-steps-m__n--go { background: var(--brand); color: var(--on-accent); }
  .sb-steps-m p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
  .sb-steps-m b { color: var(--text); font-weight: 600; }

  .sb-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: var(--sp-12); padding: var(--sp-16); }
  .sb-msg__ic { width: 40px; height: 40px; }
  .sb-msg__act, .sb-msg > .sb-msg__btn { grid-column: 1 / -1; }
  .sb-msg__btn { --btn-h: 48px; width: 100%; justify-content: center; }

  /* правила — аккордеон */
  .sb-rules { padding: 0; gap: 0; border-radius: var(--r-16); overflow: hidden; }
  .sb-rules__title { display: none; }
  .sb-acc {
    width: 100%; min-height: 64px; padding: 10px 16px; border: 0; background: var(--surface);
    display: flex; align-items: center; gap: var(--sp-12); text-align: left; color: var(--text);
    font-family: var(--font); letter-spacing: 0; cursor: pointer;
    transition: background-color var(--dur-hover) var(--ease-std);
  }
  .sb-acc:hover { background: var(--surface-quiet); }
  .sb-acc__ic { width: 36px; height: 36px; border-radius: var(--r-10); background: var(--brand-bg); color: var(--brand-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .sb-acc__t { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
  .sb-acc__title { font-size: 16px; font-weight: 700; line-height: 1.3; }
  .sb-acc__sub { font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb-acc__chev { display: flex; transition: transform var(--dur-menu) var(--ease-std); }
  .sb-acc[aria-expanded="true"] .sb-acc__chev { transform: rotate(180deg); }
  .sb-rules__body { padding: 4px 16px 16px; gap: var(--sp-16); }
  .js .sb-rules:not(.is-open) .sb-rules__body { display: none; }
  .sb-rules.is-open .sb-rules__body { animation: cm-drop .22s var(--ease-std) both; }
  .sb-rules__list { gap: 14px; }

  /* форма без карточки: шаг 1 — карточка, шаг 2 — поля */
  .sb-form { padding: 0; border: 0; border-radius: 0; background: transparent; gap: 28px; }
  .sb-form__hr { display: none; }
  .sb-sec--url { padding: var(--sp-16); border: 1px solid var(--line); border-radius: var(--r-18); background: var(--surface); gap: 14px; }
  .sb-sec--url .sb-sec__p { display: none; }
  .sb-sec__h { font-size: 17px; }
  .sb-sec--fields { gap: var(--sp-20); }
  .sb-big { height: 56px; padding: 0 14px; border-radius: var(--r-14); box-shadow: 0 5px 0 var(--text); gap: var(--sp-10); }
  .sb-big svg { width: 20px; height: 20px; }
  .sb-big:focus-within { box-shadow: 0 5px 0 var(--brand); transform: none; }
  .sb-big.is-error { box-shadow: 0 5px 0 var(--risk); }
  .sb-big input { font-size: 16px; height: 48px; }
  .sb-urlrow { gap: 14px; }
  .sb-pull { border-radius: var(--r-12); }
  .sb-in--lg { height: 48px; font-size: 16px; }

  /* тип — плитки вместо списка (скрипт включает их и выключает список) */
  .js .sb-kind-select { display: none; }
  .js .sb-kinds { display: block; }
  .sb-kc, .sb-kc.is-nocode { grid-template-columns: minmax(0, 1fr); gap: var(--sp-20); }
  .sb-kinds legend { padding: 0; margin: 0 0 var(--sp-8); }
  .sb-kinds__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
  .sb-opt {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 72px; padding: 9px 5px; border-radius: var(--r-12); border: 1px solid var(--field-border); background: var(--surface);
    font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center; color: var(--text); cursor: pointer;
    transition: border-color var(--dur-hover) var(--ease-std), background-color var(--dur-hover) var(--ease-std);
  }
  .sb-opt svg { color: var(--text-2); }
  .sb-opt:hover { border-color: var(--text); }
  .sb-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
  .sb-opt:has(input:checked) { border: 2px solid var(--brand); padding: 8px 4px; background: var(--brand-bg); }
  .sb-opt:has(input:checked) svg { color: var(--brand-text); }
  .sb-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  .sb-nums { grid-template-columns: minmax(0, 1fr); gap: var(--sp-20); }
  .sb-ta { min-height: 128px; }
  .sb-ta--sm { min-height: 80px; }

  /* липкая отправка внизу */
  .sb-submit {
    position: sticky; bottom: 0; z-index: 5; margin: 0 calc(-1 * var(--gutter)); padding: 12px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
    flex-direction: column; align-items: stretch; gap: var(--sp-4);
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(22,24,29,.08);
  }
  .sb-send { --btn-h: 52px; width: 100%; justify-content: center; font-size: 17px; }
  .sb-cap-d { display: none; }
  .sb-cap-m { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); }
  .sb-submit__cap a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
}

/* ==========================================================================
   Обсуждения — лента тем (/talk)
   ========================================================================== */
.tk { padding-block: 28px 72px; }
.tk-wrap { display: flex; flex-direction: column; }
.tk-crumbs { order: 0; }
.tk-hero { order: 1; margin-top: var(--sp-20); display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: center; }
.tk-flash { order: 2; margin-top: var(--sp-48); }
.tk-filters { order: 3; margin-top: var(--sp-48); }
.tk-flash ~ .tk-filters { margin-top: var(--sp-24); }
.tk-list, .tk-empty { order: 4; margin-top: var(--sp-24); }
.tk-pager { order: 5; margin-top: var(--sp-40); }

.tk-hero__main { display: flex; flex-direction: column; gap: var(--sp-16); align-items: flex-start; min-width: 0; }
.tk-hero__h { margin: 0; font-size: 46px; }
.tk-hero__lead { margin: 0; max-width: 600px; }
.tk-hero__act { padding-top: var(--sp-8); display: flex; align-items: center; gap: var(--sp-16); }
.tk-hero__cap { font-size: 14px; line-height: 1.4; color: var(--text-3); }
.tk-new { flex-shrink: 0; padding: 0 22px 0 18px; }
.tk-plus { transition: transform .18s var(--ease-std); }
.tk-new:hover .tk-plus, .tk-new:focus-visible .tk-plus { transform: rotate(90deg); }
.tk-how { display: flex; flex-direction: column; gap: 14px; padding: 24px 26px; border-radius: var(--r-20); background: var(--surface-quiet); border: 1px solid var(--line-soft); }
.tk-how__h { margin: 0; display: flex; align-items: center; gap: var(--sp-8); font-size: 16px; font-weight: 700; line-height: 1.3; }
.tk-how__h svg { color: var(--brand-text); }
.tk-how__list { display: flex; flex-direction: column; gap: var(--sp-12); }
.tk-how__list li { display: flex; align-items: flex-start; gap: var(--sp-12); font-size: 15px; line-height: 1.45; }
.tk-how__list li > span:last-child { padding-top: 7px; }
.tk-how__ic { width: 36px; height: 36px; border-radius: var(--r-10); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--brand-bg); color: var(--brand-text); }
.tk-how__ic--warm { background: var(--warm-bg); color: var(--warm-text); }

/* плашка «Тема удалена»: спускается, галочка рисуется, полоска-таймер 5 с; наведение и фокус — пауза */
@keyframes tk-flash-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes tk-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.tk-flash {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--sp-12);
  min-height: 60px; padding: 8px 8px 8px 12px; border-radius: var(--r-14);
  background: var(--brand-bg); border: 1px solid var(--brand-track);
  animation: tk-flash-in .5s var(--ease-out) .2s both;
  transition: opacity .2s var(--ease-std), transform .2s var(--ease-std);
}
.tk-flash.is-out { opacity: 0; transform: translateY(-6px); }
.tk-flash__ic { width: 36px; height: 36px; border-radius: var(--r-10); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--brand-text); }
.tk-flash__ic path { stroke-dasharray: 1; animation: cm-draw .45s var(--ease-out) .55s both; }
.tk-flash__t { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--brand-on-bg); }
.tk-flash__x {
  width: 44px; height: 44px; border: 0; border-radius: var(--r-10); padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: transparent; color: var(--brand-on-bg); cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-std);
}
.tk-flash__x:hover { background: var(--brand-bg-hover); }
.tk-flash__timer {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand); opacity: .45;
  transform-origin: left center; animation: tk-timer 5s linear .7s both;
}
.tk-flash:hover .tk-flash__timer, .tk-flash:focus-within .tk-flash__timer { animation-play-state: paused; }

/* фильтры: чипы типа и сегменты порядка в одну строку */
.tk-filters {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-32);
  padding: var(--sp-16) 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.tk-filter { display: flex; align-items: center; gap: var(--sp-12); min-width: 0; }
.tk-filter__l { font-size: 13px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.tk-kinds { display: flex; gap: var(--sp-8); }
.tk-chip { border-radius: var(--r-12); padding: 0 14px 0 12px; gap: 7px; }
.tk-chip svg { color: var(--text-2); }
.tk-chip--question svg { color: var(--brand-text); }
.tk-chip--search svg { color: var(--warm-big); }
.tk-chip[aria-current] svg { color: currentColor; }
@keyframes tk-pop { from { transform: scale(.9); opacity: .3; } to { transform: none; opacity: 1; } }
.tk-chip[aria-current], .tk-sort[aria-current] { animation: tk-pop .24s var(--ease-out) .4s both; }
.tk-sorts { flex-shrink: 0; }
.tk-sorts > a { height: 38px; padding: 0 12px; font-size: 14px; gap: 6px; display: flex; align-items: center; }
.tk-sort svg { color: var(--text-3); }
.tk-sort--active[aria-current] svg { color: var(--warm-big); }

/* список: строка целиком — ссылка на тему (растянутая ссылка заголовка), ник поверх */
.tk-thead, .tk-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) 120px 200px; gap: var(--sp-24); }
.tk-thead { padding: 0 16px 10px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text-3); }
.tk-row {
  position: relative; align-items: center; padding: 18px 16px; border-bottom: 1px solid var(--line-soft);
  transition: background-color var(--dur-hover) var(--ease-std);
}
.tk-row:hover { background: var(--surface-quiet); }
.tk-row:has(.tk-cover:focus-visible) { box-shadow: inset 0 0 0 3px var(--focus); }
.tk-cnt {
  width: 84px; height: 64px; border-radius: var(--r-12); display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1.5px dashed var(--field-border); color: var(--text-2); line-height: 1.1;
}
.tk-cnt.is-on { border: 0; background: var(--brand-bg); color: var(--brand-on-bg); }
.tk-cnt__n { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: var(--ls-display); }
.tk-cnt.is-on .tk-cnt__n { color: var(--brand-text); }
.tk-cnt__w { font-size: 13px; }
.tk-main { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
.tk-t { order: 2; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; }
.tk-cover { color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--dur-hover) var(--ease-std); }
.tk-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tk-cover:focus-visible { outline: none; }
.tk-row:hover .tk-cover { color: var(--brand-text); }
.tk-by { order: 1; display: flex; align-items: center; gap: var(--sp-10); font-size: 14px; min-width: 0; }
.tk-by__from { color: var(--text-3); }
.tk-nick { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-weight: 600; font-size: 14px; white-space: nowrap; min-width: 0; }
a.tk-nick:hover { color: var(--brand-text); }
.tk-nick--m { display: none; }
.tk-stats { display: contents; }
.tk-score { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-score svg { color: var(--text-3); }
.tk-score.is-high { color: var(--brand-on-bg); font-weight: 600; }
.tk-score.is-high svg { color: var(--brand-text); }
.tk-last { display: inline-flex; align-items: center; gap: var(--sp-8); font-size: 14px; color: var(--text-2); white-space: nowrap; }
.tk-last.is-fresh { color: var(--brand-on-bg); }
.tk-last--new { gap: 7px; color: var(--text-3); }
.tk-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--field-border); }
.is-fresh .tk-dot { background: var(--trust-good); }
@keyframes tk-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(11,122,66,.35); } 60% { box-shadow: 0 0 0 6px rgba(11,122,66,0); } }
.tk-live { animation: tk-pulse 2.4s var(--ease-std) 1.2s 3; }

/* страницы: номера, стрелки */
.tk-pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-8); }
.tk-pg {
  min-width: 44px; height: 44px; padding: 0 6px; border-radius: var(--r-12); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-hover) var(--ease-std), border-color var(--dur-hover) var(--ease-std);
}
a.tk-pg:hover { background: var(--surface-2); border-color: var(--line-field); color: var(--text); }
.tk-pg.is-on { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 700; }
.tk-pg.is-off { background: var(--surface-quiet); border: 1px dashed var(--line-total); color: var(--placeholder); }
.tk-pg__r { transition: transform var(--dur-hover) var(--ease-std); }
a.tk-pg:hover .tk-pg__r { transform: translateX(3px); }
.tk-pg-gap { width: 20px; text-align: center; color: var(--text-3); font-size: 15px; }

/* пустая лента */
.tk-empty {
  border: 1.5px dashed var(--line-total); border-radius: var(--r-20); padding: 56px 40px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-16);
}
.tk-empty__art { width: 98px; height: 98px; border-radius: 50%; background: var(--brand-bg); color: var(--brand-text); display: inline-flex; align-items: center; justify-content: center; }
.tk-empty__t { display: flex; flex-direction: column; gap: var(--sp-10); align-items: center; padding-top: var(--sp-8); }
.tk-empty__h { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.2; letter-spacing: var(--ls-display); }
.tk-empty__p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text-2); }
.tk-empty__act { padding-top: var(--sp-12); }

/* липкая «Новая тема» — только телефон, показывает скрипт */
.tk-sticky { display: none; }

@media (max-width: 1199px) {
  .tk-hero { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-40); }
  .tk-hero__h { font-size: 40px; }
  .tk-filters { flex-wrap: wrap; gap: var(--sp-12) var(--sp-24); }
  .tk-thead, .tk-row { grid-template-columns: 72px minmax(0, 1fr) 96px 150px; gap: var(--sp-16); }
  .tk-cnt { width: 72px; }
}
@media (max-width: 1023px) {
  .tk-hero { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
  .tk-hero__cap { max-width: 320px; }
}

@media (max-width: 767px) {
  .tk { padding-block: 4px 40px; }
  .tk-flash { order: 1; margin-top: var(--sp-4); }
  .tk-hero { order: 2; margin-top: var(--sp-16); gap: 14px; }
  .tk-crumbs + .tk-hero { margin-top: var(--sp-4); }
  .tk-filters, .tk-flash ~ .tk-filters { margin-top: 28px; }
  .tk-list, .tk-empty { margin-top: 28px; }
  .tk-pager { margin-top: 28px; }
  .tk-hero__main { gap: 14px; }
  .tk-hero .cm-pill { height: 28px; font-size: 13px; }
  .tk-hero__h { font-size: 30px; line-height: 1.14; }
  .tk-hero__lead { font-size: 16px; }
  .tk-hero__act { padding-top: 0; width: 100%; }
  .tk-hero__act .tk-new { width: 100%; justify-content: center; }
  .tk-hero__cap { display: none; }
  .tk-how { margin-top: 6px; padding: 18px; }

  .tk-filters { flex-direction: column; align-items: stretch; gap: var(--sp-16); padding: 0; border: 0; }
  .tk-filter { flex-direction: column; align-items: stretch; gap: var(--sp-8); }
  .tk-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
  .tk-chip { height: 44px; font-size: 15px; min-width: 0; }
  .tk-sorts > a { flex: 1 1 auto; height: 44px; padding: 0 8px; justify-content: center; min-width: 0; }

  .tk-thead { display: none; }
  .tk-rows { display: flex; flex-direction: column; gap: var(--sp-10); }
  .tk-row {
    grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-8) var(--sp-12); align-items: start;
    padding: 14px; border: 1px solid var(--line); border-radius: var(--r-16); background: var(--surface);
    transition: border-color var(--dur-hover) var(--ease-std), box-shadow var(--dur-hover) var(--ease-std);
  }
  .tk-row:hover { background: var(--surface); border-color: var(--line-field); box-shadow: 0 10px 28px rgba(22,24,29,.08); }
  .tk-cnt { width: 56px; height: 56px; grid-row: 1 / span 2; }
  .tk-cnt__n { font-size: 18px; }
  .tk-t { font-size: 17px; }
  .tk-cover { -webkit-line-clamp: 3; }
  .tk-by__from, .tk-nick--d { display: none; }
  .tk-stats { grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4) var(--sp-10); font-size: 14px; line-height: 1.4; }
  .tk-nick--m { display: inline-flex; min-height: 44px; margin: -8px 0; }
  .tk-nick--m .cm-ava { width: 22px; height: 22px; font-size: 11px; }
  .tk-score { font-size: 14px; gap: 5px; }
  .tk-last, .tk-last--new { font-size: 14px; }

  .tk-pager { justify-content: space-between; gap: var(--sp-4); }
  .tk-empty { padding: 40px 20px 24px; gap: 14px; border-radius: var(--r-18); }
  .tk-empty__art { width: 84px; height: 84px; }
  .tk-empty__art svg { width: 44px; height: 44px; }
  .tk-empty__h { font-size: 24px; }
  .tk-empty__p { font-size: 16px; }
  .tk-empty__act { width: 100%; padding-top: var(--sp-10); }
  .tk-empty__act .tk-new { width: 100%; justify-content: center; }

  @keyframes tk-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  .tk-sticky:not([hidden]) {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(22,24,29,.08);
    animation: tk-up .2s var(--ease-out) both;
  }
  .tk-sticky .tk-new { justify-content: center; }
}

/* ==========================================================================
   Новая тема (/talk/new)
   ========================================================================== */
.tn { padding-block: 40px 88px; }
.tn-wrap { max-width: calc(760px + 2 * var(--gutter)); display: flex; flex-direction: column; gap: var(--sp-32); }
.tn-head { display: flex; flex-direction: column; gap: 18px; }
.tn-back { display: none; }
.tn-head__t { display: flex; flex-direction: column; gap: var(--sp-10); }
.tn-h1 { margin: 0; font-size: 46px; }
.tn-lead { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text-2); }
.tn-lead__m, .tn-legend__m, .tn-grow-note, .tn-rules-m, .tn-stamp__m { display: none; }

/* плашки: ошибка ведёт к полю, почта — переслать письмо */
.tn-msg {
  display: flex; gap: var(--sp-12); align-items: flex-start; padding: 16px 20px; border-radius: var(--r-14);
  animation: cm-drop .45s var(--ease-out) .2s both;
}
.tn-msg--risk { background: var(--risk-bg); border: 1px solid var(--risk-border); }
.tn-msg--risk .tn-msg__ic { color: var(--risk); padding-top: 2px; }
.tn-msg--warn { align-items: center; gap: 14px; padding: 14px 16px 14px 20px; background: var(--warn-bg); border: 1px solid var(--warn-line); }
.tn-msg--warn .tn-msg__ic { color: var(--warn-text-2); }
@keyframes tn-env { 0%, 100% { transform: none; } 30% { transform: translateY(-2px) rotate(-6deg); } 60% { transform: rotate(4deg); } }
.tn-env { display: flex; animation: tn-env 1.2s var(--ease-std) .8s 2 both; }
.tn-msg__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 1.5; color: var(--text); }
.tn-msg__no { color: var(--risk); }
.tn-msg__sub { font-size: 15px; color: var(--text-2); }
.tn-jump {
  align-self: flex-start; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; margin: 2px 0 -8px -10px;
  border-radius: var(--r-10); font-size: 15px; font-weight: 700; color: var(--risk);
  transition: background-color var(--dur-hover) var(--ease-std);
}
.tn-jump:hover { background: var(--risk-track); color: var(--risk); }
.tn-msg__act { margin: 0; display: flex; flex-shrink: 0; }
.tn-resend { --btn-h: 44px; font-size: 15px; font-weight: 700; border-color: var(--warn); color: var(--warn-text); background: var(--surface); }
.tn-resend:hover { border-color: var(--warn-text); color: var(--warn-text); background: var(--surface); }

/* форма */
.tn-form { margin: 0; display: flex; flex-direction: column; gap: 28px; }
.tn-card { display: flex; flex-direction: column; gap: 28px; padding: var(--sp-32); border: 1px solid var(--line); border-radius: var(--r-18); background: var(--surface); }
.tn-hr { background: var(--line-soft); }
.tn-kinds { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-12); }
.tn-legend { padding: 0; margin-bottom: var(--sp-12); font-size: 16px; font-weight: 700; color: var(--text); }
.tn-kinds__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-12); }
.tn-kind {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-10); min-width: 0;
  min-height: 140px; padding: 20px 12px 16px; border-radius: var(--r-14); border: 2px solid var(--line);
  background: var(--surface); text-align: center; cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-std), background-color var(--dur-hover) var(--ease-std);
}
.tn-kind:hover { border-color: var(--text); }
.tn-kind:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.tn-kind__ic { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tn-kind--question .tn-kind__ic { background: var(--brand-bg); color: var(--brand-text); }
.tn-kind--search .tn-kind__ic { background: var(--warm-bg); color: var(--warm-big); }
.tn-kind--review .tn-kind__ic { background: var(--surface-3); color: var(--text-2); }
.tn-kind__t { display: flex; flex-direction: column; gap: 2px; }
.tn-kind__title { font-size: 17px; font-weight: 700; color: var(--text); }
.tn-kind__d { font-size: 14px; line-height: 1.4; color: var(--text-3); }
.tn-kind:has(input:checked) { border-color: var(--brand); background: var(--brand-bg); }
.tn-kind:has(input:checked):hover { border-color: var(--brand); }
.tn-kind:has(input:checked) .tn-kind__title, .tn-kind:has(input:checked) .tn-kind__d { color: var(--brand-on-bg); }
.tn-kind:has(input:checked) .tn-kind__ic { background: var(--surface); }
@keyframes tn-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.tn-kind:has(input:checked) .tn-kind__ic { animation: tn-pulse .3s var(--ease-std) .5s 1 both; }
.tn-kinds[aria-invalid="true"] .tn-kind { border-color: var(--risk); }
.tn-tagline { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8); font-size: 15px; color: var(--text-3); }
@keyframes tn-tag { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tn-tag { height: 28px; font-weight: 700; animation: tn-tag .24s var(--ease-out) .4s both; }
.tn-tag.is-new { animation: tn-tag .24s var(--ease-out) both; }

.tn-field { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
.tn-field__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); min-width: 0; }
.tn-label { display: flex; align-items: center; gap: var(--sp-8); font-size: 16px; font-weight: 700; color: var(--text); }
.tn-label svg { color: var(--brand-text); }
.tn-label.is-error, .tn-label.is-error svg { color: var(--risk); }
.tn-cnt {
  font-size: 13px; font-weight: 600; color: var(--text-3); padding: 0; border-radius: var(--r-8);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: color .18s var(--ease-std), background-color .18s var(--ease-std);
}
.tn-cnt.is-warn { color: var(--warn-text); background: var(--warn-bg); padding: 3px 8px; box-shadow: inset 0 0 0 1px var(--warn-line); }
.tn-cnt.is-error { color: var(--risk); background: var(--risk-bg); padding: 3px 8px; }
.tn-in { font-size: 17px; resize: none; }
.tn-in--title { height: 52px; min-height: 52px; padding: 13px 14px; line-height: 1.4; overflow: hidden; }
.tn-in--title:focus { padding: 12px 13px; }
.tn-in--body { height: 212px; min-height: 212px; }
.tn-in[aria-invalid="true"] { border-width: 2px; }
.tn-ferr { margin: 0; display: flex; gap: var(--sp-8); align-items: flex-start; font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--risk); }
.tn-ferr svg { flex-shrink: 0; margin-top: 1px; }

/* строка публикации «впечатывается» жёсткой тенью */
@keyframes tn-stamp {
  0% { opacity: 0; transform: translateY(-10px); box-shadow: 0 0 0 var(--text); }
  60% { opacity: 1; transform: translateY(2px); box-shadow: 0 2px 0 var(--text); }
  100% { opacity: 1; transform: none; box-shadow: 0 6px 0 var(--text); }
}
.tn-stamp {
  display: flex; align-items: center; gap: var(--sp-24); padding: 16px 16px 16px 24px; border-radius: var(--r-18);
  border: 2px solid var(--text); box-shadow: 0 6px 0 var(--text); background: var(--surface);
  animation: tn-stamp .6s var(--ease-out) .5s both;
}
.tn-stamp__t, .tn-stamp__m, .tn-rules-m { margin: 0; flex: 1 1 auto; min-width: 0; gap: var(--sp-10); align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.tn-stamp__t { display: flex; }
.tn-stamp__t svg, .tn-stamp__m svg, .tn-rules-m svg { color: var(--text-3); flex-shrink: 0; margin-top: 2px; }
.tn-pub { flex-shrink: 0; padding: 0 24px; gap: var(--sp-10); }
.tn-send { display: flex; animation: cm-send 2.4s var(--ease-std) 1.4s 2; }
.tn-spin { display: none; }
.tn-pub[aria-busy="true"] { background: var(--brand-hover); border-color: var(--brand-hover); }
.tn-pub[aria-busy="true"] .tn-send { display: none; }
.tn-pub[aria-busy="true"] .tn-spin { display: block; }

@media (max-width: 767px) {
  .tn { padding-block: 12px 40px; }
  .tn-wrap { gap: 28px; }
  .tn-head { gap: var(--sp-12); }
  .tn-crumbs { display: none; }
  .tn-back { align-self: flex-start; display: flex; align-items: center; gap: var(--sp-8); min-height: 44px; padding-right: 6px; font-size: 16px; font-weight: 600; color: var(--text); }
  .tn-back:hover { color: var(--brand-text); }
  .tn-head__t { gap: var(--sp-8); }
  .tn-h1 { font-size: 28px; line-height: 1.15; }
  .tn-lead { font-size: 16px; }
  .tn-lead__m, .tn-legend__m { display: inline; }
  .tn-msg { padding: 14px 16px; }
  .tn-msg--warn { flex-wrap: wrap; }
  .tn-msg__act, .tn-resend { width: 100%; }
  .tn-resend { --btn-h: 48px; justify-content: center; }

  .tn-card { padding: 0; border: 0; border-radius: 0; background: transparent; gap: var(--sp-20); }
  .tn-hr { display: none; }
  .tn-legend { font-size: 15px; }
  .tn-kinds__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .tn-kind { flex-direction: row; align-items: center; gap: var(--sp-12); min-height: 64px; padding: 10px 14px 10px 10px; text-align: left; }
  .tn-kind__ic { width: 40px; height: 40px; }
  .tn-kind__title { font-size: 16px; line-height: 1.3; }
  .tn-tagline { font-size: 14px; line-height: 1.4; }
  .tn-label { font-size: 15px; }
  .tn-in { font-size: 16px; }
  .tn-in--title { height: 80px; min-height: 80px; line-height: 1.5; padding: 12px 14px; }
  .tn-in--title:focus { padding: 11px 13px; }
  .tn-in--body { height: 168px; min-height: 168px; }
  .tn-grow-note { display: block; font-size: 13px; color: var(--text-3); }
  .tn-rules-m { display: flex; font-size: 14px; color: var(--text-2); }
  .tn-stamp { flex-direction: column; align-items: stretch; gap: var(--sp-12); padding: 14px; }
  .tn-stamp__t { display: none; }
  .tn-stamp__m { display: flex; font-size: 14px; }
  .tn-pub { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Тема обсуждения (/talk/{id}-{slug})
   ========================================================================== */
.tp { padding-block: 28px 64px; }
.tp-wrap { display: flex; flex-direction: column; gap: var(--sp-24); }

/* крошки: «Обсуждения › Вопрос»; на телефоне — «← Обсуждения · Вопрос» */
.tp-crumbs ol { display: flex; align-items: center; gap: var(--sp-8); min-height: 32px; font-size: 15px; font-weight: 500; }
.tp-crumbs li { display: flex; align-items: center; }
.tp-cr { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); transition: color var(--dur-hover) var(--ease-std); }
.tp-cr:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.tp-cr svg { color: var(--text-3); }
.tp-cr__back, .tp-cr__dot { display: none; }
.tp-cr__sep { color: var(--placeholder); }
.tp-cr__sep svg { color: var(--placeholder); }

.tp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-64); align-items: start; }
.tp-col { display: flex; flex-direction: column; gap: var(--sp-40); min-width: 0; }

/* сообщение о действии: липнет под шапкой (после голоса страница открывается на ответе) */
.tp-flash {
  position: sticky; top: var(--cm-top); z-index: 6;
  display: flex; align-items: center; gap: var(--sp-12); padding: 6px 6px 6px 14px; border-radius: var(--r-14);
  background: var(--brand-bg); border: 1px solid var(--brand-bg); color: var(--brand-on-bg);
  box-shadow: 0 8px 24px rgba(22,24,29,.06);
  animation: cm-drop .42s var(--ease-out) .2s both;
}
.tp-flash--risk { background: var(--risk-bg); border-color: var(--risk-border); color: var(--risk); }
.tp-flash--risk .tp-flash__ic { animation: cm-shake .32s var(--ease-std) .7s both; }
.tp-flash__ic { width: 32px; height: 32px; border-radius: var(--r-10); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--brand-text); }
.tp-flash--risk .tp-flash__ic { color: var(--risk); }
.tp-flash__t { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.4; }
.tp-flash__x {
  width: 44px; height: 44px; border: 0; border-radius: var(--r-10); padding: 0; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: transparent; color: inherit;
  transition: background-color var(--dur-hover) var(--ease-std);
}
.tp-flash__x:hover { background: var(--brand-bg-hover); }
.tp-flash--risk .tp-flash__x:hover { background: var(--risk-track); }

/* тема: бейдж, крупный заголовок, автор, текст 18 px, голос и жалоба */
.tp-post { display: flex; flex-direction: column; gap: 18px; }
.tp-kind { align-self: flex-start; height: 30px; padding: 0 12px 0 10px; border-radius: var(--r-32); font-size: 14px; }
.tp-h1 { margin: 0; font-size: 46px; line-height: 1.14; }
.tp-h1.is-hidden { color: var(--text-2); }
.tp-meta { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8); font-size: 15px; color: var(--text-3); }
.tp-meta__t { display: inline-flex; align-items: center; gap: 5px; }
.tp-ava { width: 36px; height: 36px; font-size: 13px; }
.tp-ava--post { width: 32px; height: 32px; }
.tp-nick { color: var(--text); font-weight: 700; }
a.tp-nick:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.tp-body { display: flex; flex-direction: column; gap: 14px; max-width: 780px; padding-top: var(--sp-4); font-size: 18px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.tp-body p { margin: 0; }
.tp-hidden {
  margin: 0; display: flex; align-items: flex-start; gap: var(--sp-12); padding: 16px 18px; border-radius: var(--r-14);
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-text); font-size: 16px; line-height: 1.5;
}
.tp-hidden svg { color: var(--warn-text-2); flex-shrink: 0; margin-top: 2px; }

/* действия */
.tp-acts { position: relative; display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; }
.tp-acts--post { gap: var(--sp-12); padding-top: 18px; border-top: 1px solid var(--line-soft); }
.tp-grow { flex: 1 1 auto; }
.tp-acts:not(.tp-acts--post) .tp-grow { display: none; }
.tp-sep { width: 1px; height: 20px; background: var(--line); }

.tp-vote { margin: 0; display: flex; align-items: center; gap: var(--sp-8); }
.tp-vb {
  height: 40px; padding: 0 12px; border-radius: var(--r-10); border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-std), border-color var(--dur-hover) var(--ease-std), transform var(--dur-hover) var(--ease-std);
}
.tp-vb svg { color: var(--text-2); }
.tp-vb:hover { background: var(--surface-2); }
.tp-vb:active { transform: scale(.97); }
.tp-vb--yes.is-on { border: 1.5px solid var(--brand); background: var(--brand-bg); color: var(--brand-on-bg); }
.tp-vb--yes.is-on svg { color: var(--brand-on-bg); }
.tp-vb--yes.is-on:hover { background: var(--brand-bg-hover); }
.tp-vb--no.is-on { border: 1.5px solid var(--risk); background: var(--risk-bg); color: var(--risk); }
.tp-vb--no.is-on svg { color: var(--risk); }
.tp-vn { min-width: 20px; text-align: center; font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
/* тема: единый сегмент «Полезно · N · Нет» */
.tp-vote--post { gap: 0; height: 44px; border: 1px solid var(--line-total); border-radius: var(--r-12); overflow: hidden; }
.tp-vote--post .tp-vb { height: 100%; border: 0; border-radius: 0; padding: 0 14px; font-size: 15px; font-weight: 700; gap: var(--sp-8); }
.tp-vote--post .tp-vb--yes.is-on { border: 0; color: var(--brand-text); }
.tp-vote--post .tp-vb--yes.is-on svg { color: var(--brand-text); }
.tp-vote--post .tp-vb--no.is-on { border: 0; }
.tp-vote--post .tp-vn { height: 100%; padding: 0 12px; display: flex; align-items: center; border-left: 1px solid var(--line-total); border-right: 1px solid var(--line-total); font-size: 16px; }
@keyframes tp-hop { 0%, 100% { transform: none; } 30% { transform: translateY(-5px) rotate(-14deg); } 55% { transform: rotate(4deg); } 75% { transform: rotate(-3deg); } }
.tp-r:target .tp-hop, .tp-post .tp-hop { transform-origin: 40% 80%; animation: tp-hop .64s var(--ease-out) .6s 1 both; }
.tp-score { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 14px; color: var(--text-3); white-space: nowrap; }
.tp-acts--post .tp-score { min-height: 44px; font-size: 15px; }

.tp-act {
  height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-10); background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--text-2);
  transition: background-color var(--dur-hover) var(--ease-std);
}
.tp-act:hover { background: var(--surface-2); color: var(--text-2); }
.tp-act[aria-expanded="true"] { background: var(--brand-bg); color: var(--brand-on-bg); }
.tp-act--del, .tp-act--del:hover { color: var(--risk); }
.tp-act--del[aria-expanded="true"] { background: var(--risk-bg); color: var(--risk); }
.tp-more--post .tp-act { height: 44px; padding: 0 12px; font-size: 15px; gap: var(--sp-8); }
.tp-more__btn { display: none; }
.tp-more, .tp-menu { display: contents; }
.tp-menu__f { margin: 0; display: flex; }
.tp-menu__cap { display: none; }

/* подтверждение удаления */
.tp-del {
  margin: 0; display: flex; align-items: center; gap: var(--sp-12); padding: 12px 12px 12px 16px; border-radius: var(--r-14); background: var(--risk-bg);
  transform-origin: top; animation: tp-open .24s var(--ease-std) both;
}
.tp-del[hidden] { display: none; }
.tp-del__q { flex: 1 1 auto; display: flex; align-items: center; gap: var(--sp-8); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--risk); }
.tp-del__q svg { flex-shrink: 0; }
.tp-del__btns { display: flex; gap: var(--sp-8); }
.tp-del__no, .tp-del__ok { --btn-h: 44px; font-size: 15px; }
.tp-del__ok { background: var(--risk); border-color: var(--risk); color: var(--bg); font-weight: 700; }
.tp-del__ok:hover { background: var(--risk); border-color: var(--risk); color: var(--bg); filter: brightness(.88); }
@keyframes tp-open { from { opacity: 0; transform: translateY(-6px) scaleY(.92); } to { opacity: 1; transform: none; } }

/* ответы: заголовок и порядок */
.tp-replies { display: flex; flex-direction: column; gap: var(--sp-24); }
.tp-rhead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); flex-wrap: wrap; min-height: 44px; }
.tp-rh { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.2; letter-spacing: var(--ls-display); white-space: nowrap; }
.tp-rh__n { color: var(--text-3); }
.tp-sorts { display: flex; align-items: center; gap: var(--sp-8); }
.tp-sorts__l { font-size: 14px; color: var(--text-3); padding-right: var(--sp-4); }
.tp-sort {
  height: 40px; padding: 0 14px; border-radius: var(--r-10); border: 1px solid var(--line); background: var(--surface);
  display: inline-flex; align-items: center; gap: var(--sp-8); white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--text);
  transition: background-color var(--dur-hover) var(--ease-std);
}
.tp-sort svg { color: var(--text-2); }
.tp-sort:hover { background: var(--surface-2); color: var(--text); }
.tp-sort.is-on { background: var(--text); border-color: var(--text); color: var(--bg); }
.tp-sort.is-on svg { color: var(--bg); }
@keyframes tp-fill { from { background: var(--surface); color: var(--text); } to { background: var(--text); color: var(--bg); } }
.tp-sort.is-on { animation: tp-fill .4s var(--ease-out) .5s both; }
.tp-sort__m { display: none; }

/* поле ответа */
.tp-comp { margin: 0; display: flex; flex-direction: column; padding: var(--sp-24); border: 1px solid var(--line); border-radius: var(--r-18); background: var(--surface); }
.tp-comp__open, .tp-comp__close { display: none; }
.tp-comp__body { display: flex; flex-direction: column; gap: var(--sp-10); }
.tp-ta { min-height: 120px; font-size: 16px; }
.tp-ta--sm { min-height: 88px; }
.tp-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); }
.tp-foot__btns { display: flex; gap: var(--sp-8); }
.tp-cnt { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tp-cnt.is-warn { color: var(--warn-text); }
.tp-send { font-weight: 700; }
.tp-note { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--r-16); background: var(--surface-2); }
.tp-note__ic { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--text); color: var(--bg); }
.tp-note__t { flex: 1 1 auto; min-width: 0; font-size: 16px; line-height: 1.5; color: var(--text); text-wrap: balance; }
.tp-note__t a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.tp-note__btn { --btn-h: 44px; flex-shrink: 0; font-size: 15px; font-weight: 700; }
.tp-note--warn { background: var(--warn-bg); border: 1px solid var(--warn-line); }
.tp-note--warn .tp-note__ic { background: var(--surface); color: var(--warn-text-2); }
.tp-note__act { margin: 0; display: flex; flex-shrink: 0; }
.tp-resend { --btn-h: 44px; font-size: 15px; font-weight: 700; border-color: var(--warn); color: var(--warn-text); }
.tp-resend:hover { border-color: var(--warn-text); color: var(--warn-text); background: var(--surface); }

/* ветки: линия слева показывает, кто кому отвечает */
.tp-thread { display: flex; flex-direction: column; gap: 28px; }
.tp-li--sep { border-top: 1px solid var(--line-soft); padding-top: 28px; }
.tp-r { display: flex; flex-direction: column; gap: var(--sp-20); }
.tp-r__box { display: flex; gap: 14px; align-items: flex-start; border-radius: var(--r-14); }
@keyframes tp-hl { from { background: var(--brand-bg-hover); } to { background: transparent; } }
.tp-r:target > .tp-r__box { margin: -12px; padding: 12px; animation: tp-hl 1.5s var(--ease-std) .6s both; }
.tp-r__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-8); }
.tp-r__head { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; min-height: 24px; }
.tp-r__head .tp-nick { font-size: 16px; }
.tp-tag { height: 24px; padding: 0 8px; border-radius: var(--r-8); display: inline-flex; align-items: center; gap: var(--sp-4); white-space: nowrap; font-size: 13px; font-weight: 600; }
.tp-tag--me { background: var(--brand-bg); color: var(--brand-on-bg); }
.tp-tag--author { background: var(--warm-bg); color: var(--warm-on-bg); }
.tp-tag--author svg { color: var(--warm-text); }
.tp-tag--to { display: none; background: var(--surface-3); color: var(--text-2); }
.tp-when { font-size: 14px; color: var(--text-3); white-space: nowrap; }
.tp-r__body { display: flex; flex-direction: column; gap: var(--sp-8); font-size: 16px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.tp-r__body p { margin: 0; }
.tp-kids { margin: 0 0 0 17px; padding: 0 0 0 31px; border-left: 2px solid var(--line-soft); display: flex; flex-direction: column; gap: var(--sp-24); }
.tp-r__gone { display: flex; gap: 14px; align-items: center; font-size: 15px; line-height: 1.5; color: var(--text-3); font-style: italic; }
.tp-gone__ic { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px dashed var(--field-border); color: var(--text-3); }
.tp-rf {
  margin: 0; display: flex; flex-direction: column; gap: var(--sp-8); padding: 14px 16px; border-radius: var(--r-14); background: var(--surface-2);
  transform-origin: top; animation: tp-open .24s var(--ease-std) both;
}
.tp-rf[hidden] { display: none; }
/* без скрипта: формы ответа и удаления открыты сразу, кнопки-переключатели не нужны */
html:not(.js) .tp-rf[hidden], html:not(.js) .tp-del[hidden] { display: flex; }
html:not(.js) [data-tp-reply], html:not(.js) [data-tp-del], html:not(.js) [data-tp-rf-cancel], html:not(.js) [data-tp-del-cancel] { display: none; }

/* пусто */
.tp-empty {
  border: 1.5px dashed var(--line-total); border-radius: var(--r-20); padding: 48px 40px 44px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-16);
}
.tp-empty__art { width: 88px; height: 88px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-bg); color: var(--brand-text); }
.tp-empty__t { display: flex; flex-direction: column; gap: var(--sp-8); align-items: center; padding-top: 6px; }
.tp-empty__h { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.25; letter-spacing: var(--ls-display); }
.tp-empty__p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-2); }
.tp-empty__btn { margin-top: var(--sp-8); padding: 0 22px 0 18px; }
.tp-empty__ic { transition: transform .18s var(--ease-std); }
.tp-empty__btn:hover .tp-empty__ic { transform: translateY(-2px); }
.tp-empty--closed { flex-direction: row; text-align: left; gap: 14px; padding: 24px 28px; border-radius: var(--r-20); background: var(--surface-quiet); }
.tp-empty--closed .tp-empty__art { width: 44px; height: 44px; background: var(--surface-3); color: var(--text-3); }
.tp-empty--closed .tp-empty__t { align-items: flex-start; gap: 2px; padding: 0; }
.tp-empty--closed .tp-empty__h { font-family: var(--font); font-size: 16px; font-weight: 700; letter-spacing: 0; color: var(--text-2); }
.tp-empty--closed .tp-empty__p { font-size: 14px; line-height: 1.45; color: var(--text-3); }

/* справа: «У вас другой случай?» и другие разделы */
.tp-side { position: sticky; top: var(--cm-top); display: flex; flex-direction: column; gap: var(--sp-20); }
.tp-case { position: relative; overflow: hidden; border-radius: var(--r-22); padding: 22px 22px 0; display: flex; flex-direction: column; gap: var(--sp-12); }
.tp-case__h { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--text); }
.tp-case__p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--warm-dark); }
.tp-case__btn { --btn-h: 44px; align-self: flex-start; padding: 0 16px 0 14px; font-size: 15px; font-weight: 700; }
.tp-case__cat { display: flex; justify-content: flex-end; margin: -8px 0 -10px; }
.tp-others { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-20); }
.tp-others__h { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--text-3); }
.tp-row {
  display: flex; align-items: center; gap: var(--sp-10); min-height: 44px; padding: 0 10px; margin: 0 -10px; border-radius: var(--r-10);
  color: var(--text); font-size: 15px; font-weight: 600; transition: background-color var(--dur-hover) var(--ease-std), color var(--dur-hover) var(--ease-std);
}
.tp-row span { flex: 1 1 auto; }
.tp-row svg { color: var(--text-3); }
.tp-row svg:last-child { color: var(--placeholder); }
.tp-row:hover { background: var(--surface-2); color: var(--brand-text); }

@media (max-width: 1199px) {
  .tp-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sp-40); }
  .tp-h1 { font-size: 38px; }
}
@media (max-width: 1023px) {
  .tp-grid { grid-template-columns: minmax(0, 1fr); }
  .tp-side { display: none; }
}

@media (max-width: 767px) {
  .cm { --cm-top: 72px; }
  .tp { padding-block: 8px 40px; }
  .tp:has(.tp-comp, .tp-note--guest) { padding-bottom: 120px; }
  .tp-wrap { gap: 20px; }
  .tp-crumbs ol { gap: var(--sp-4); }
  .tp-crumbs li:first-child .tp-cr { color: var(--text); gap: var(--sp-8); padding-right: 4px; }
  .tp-cr { min-height: 44px; }
  .tp-cr__back { display: block; color: var(--text); transition: transform var(--dur-hover) var(--ease-std); }
  .tp-cr:hover .tp-cr__back { transform: translateX(-3px); }
  .tp-cr__chev { display: none; }
  .tp-cr__dot { display: inline; color: var(--placeholder); }
  .tp-cr--kind { padding: 0 4px; }
  .tp-col { gap: 28px; }
  .tp-post { gap: 14px; }
  .tp-h1 { font-size: 28px; line-height: 1.15; }
  .tp-meta { font-size: 14px; }
  .tp-meta .tp-nick { font-size: 15px; }
  .tp-body { font-size: 16px; line-height: 1.55; }
  .tp-acts--post { gap: var(--sp-8); padding-top: 14px; flex-wrap: nowrap; }

  /* голос — пилюля из двух круглых кнопок, подписи только для диктора */
  .tp-vote, .tp-vote--post { gap: 0; height: 44px; border: 1px solid var(--line-total); border-radius: var(--r-32); background: var(--surface); overflow: visible; flex-shrink: 0; }
  .tp-vote .tp-vb, .tp-vote--post .tp-vb { width: 44px; height: 42px; padding: 0; border: 0; border-radius: var(--r-32); justify-content: center; background: transparent; }
  .tp-vote .tp-vb svg { width: 18px; height: 18px; }
  .tp-vl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tp-vote .tp-vb--yes.is-on, .tp-vote--post .tp-vb--yes.is-on { border: 0; background: var(--brand-bg); }
  .tp-vote .tp-vb--yes.is-on svg { color: var(--brand-text); }
  .tp-vote .tp-vb--no.is-on, .tp-vote--post .tp-vb--no.is-on { border: 0; background: var(--risk-bg); }
  .tp-vote .tp-vn, .tp-vote--post .tp-vn { min-width: 22px; height: auto; padding: 0 2px; border: 0; font-size: 15px; }
  .tp-vn.is-pos { color: var(--brand-text); }
  .tp-vn.is-neg { color: var(--risk); }
  @keyframes tp-glow { 0% { box-shadow: 0 0 0 0 rgba(11,122,66,.35); } 100% { box-shadow: 0 0 0 8px rgba(11,122,66,0); } }
  .tp-r:target .tp-vb--yes.is-on { animation: tp-glow .9s var(--ease-std) .35s 1; }

  /* «Ещё»: меню с жалобой / удалением */
  .tp-more { display: block; position: relative; flex-shrink: 0; }
  .tp-more__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 0;
    border: 1px solid transparent; border-radius: var(--r-12); background: transparent; color: var(--text-2); cursor: pointer;
    font-size: 14px; font-weight: 600; transition: background-color var(--dur-hover) var(--ease-std);
  }
  .tp-more--post .tp-more__btn { width: auto; padding: 0 12px 0 10px; }
  .tp-more__btn:hover { background: var(--surface-2); }
  .tp-more__btn[aria-expanded="true"] { border-color: var(--line-total); background: var(--surface-2); }
  .tp-menu {
    display: none; position: absolute; right: 0; top: 50px; z-index: 8; width: 232px; padding: 6px; border-radius: var(--r-14);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-menu); flex-direction: column; gap: 2px;
  }
  @keyframes tp-menu { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
  .tp-more.is-open .tp-menu { display: flex; transform-origin: top right; animation: tp-menu .2s var(--ease-out) both; }
  html:not(.js) .tp-more__btn { display: none; }
  html:not(.js) .tp-menu { display: flex; position: static; width: auto; padding: 0; border: 0; box-shadow: none; background: transparent; }
  .tp-menu__f { width: 100%; }
  .tp-menu .tp-act { width: 100%; height: 44px; padding: 0 12px; gap: var(--sp-10); font-size: 15px; color: var(--text); }
  .tp-menu .tp-act svg { color: var(--text-2); }
  .tp-menu .tp-act--del, .tp-menu .tp-act--del svg { color: var(--risk); }
  .tp-menu__cap { display: block; font-size: 13px; line-height: 1.4; color: var(--text-3); padding: 0 12px 6px; }
  .tp-del { flex-direction: column; align-items: stretch; padding: 14px 16px; }
  .tp-del__q { font-size: 15px; }
  .tp-del__btns > * { flex: 1 1 0; }

  .tp-rhead { gap: var(--sp-12); }
  .tp-rh { font-size: 22px; }
  .tp-sorts { gap: 6px; }
  .tp-sorts__l, .tp-sort svg, .tp-sort__d { display: none; }
  .tp-sort__m { display: inline; }
  .tp-sort { height: 44px; padding: 0 10px; font-size: 14px; }
  .tp-rhead { flex-wrap: nowrap; gap: var(--sp-8); }
  .tp-sorts { flex-shrink: 0; }

  .tp-thread { gap: var(--sp-20); }
  .tp-li--sep { padding-top: var(--sp-20); }
  .tp-r { gap: var(--sp-16); }
  .tp-r__box { gap: var(--sp-10); }
  .tp-r:target > .tp-r__box { margin: -8px; padding: 8px; }
  .tp-ava { width: 28px; height: 28px; }
  .tp-ava--post { width: 32px; height: 32px; }
  .tp-r__main { gap: 6px; }
  .tp-r__head { gap: 6px 8px; }
  .tp-r__head .tp-nick { font-size: 15px; }
  .tp-when { font-size: 13px; }
  .tp-tag--to { display: inline-flex; }
  .tp-acts { gap: var(--sp-4); margin-left: -2px; flex-wrap: nowrap; min-width: 0; }
  .tp-sep { display: none; }
  .tp-acts:not(.tp-acts--post) .tp-grow { display: block; }
  .tp-act--reply { height: 44px; }
  .tp-score { min-height: 44px; }
  .tp-kids { margin-left: 13px; padding-left: 12px; gap: var(--sp-20); }
  .tp-kids--flat { margin: 0; padding: 0; border: 0; }
  .tp-r__gone { gap: var(--sp-10); min-height: 28px; font-size: 15px; }
  .tp-gone__ic { width: 28px; height: 28px; }
  .tp-gone__ic svg { width: 14px; height: 14px; }

  .tp-empty { padding: 32px 20px 24px; gap: 14px; border-radius: var(--r-18); }
  .tp-empty__art { width: 72px; height: 72px; }
  .tp-empty__h { font-size: 20px; }
  .tp-empty__p { font-size: 16px; }
  .tp-empty__btn { width: 100%; justify-content: center; }
  .tp-empty--closed { padding: 18px; }

  /* панель ответа внизу; над клавиатурой — по высоте из visualViewport (--vg-kb) */
  @keyframes tp-sheet { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  .tp-comp, .tp-note--guest {
    position: fixed; left: 0; right: 0; bottom: var(--vg-kb, 0px); z-index: 40;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid var(--line); border-radius: 0;
    background: var(--surface); box-shadow: 0 -8px 24px rgba(22,24,29,.08);
    animation: tp-sheet .24s var(--ease-out) .4s both;
  }
  .tp-comp__open {
    display: flex; align-items: center; gap: var(--sp-10); width: 100%; height: 44px; padding: 0 14px; border-radius: var(--r-12);
    border: 1px solid var(--input-border); background: var(--surface); color: var(--text-3); font-size: 16px; text-align: left; cursor: text;
    transition: border-color var(--dur-hover) var(--ease-std);
  }
  .tp-comp__open:hover { border-color: var(--brand); }
  .js .tp-comp:not(.is-open) .tp-comp__body { display: none; }
  .tp-comp.is-open .tp-comp__open, html:not(.js) .tp-comp__open { display: none; }
  .tp-comp__close { display: inline-flex; }
  .tp-comp .tp-ta { min-height: 96px; max-height: 40vh; }
  .tp-note--guest { flex-direction: column; align-items: stretch; gap: var(--sp-10); padding-top: 12px; }
  .tp-note--guest .tp-note__ic { display: none; }
  .tp-note--guest .tp-note__t { font-size: 15px; line-height: 1.45; color: var(--text-2); }
  .tp-note__btn { --btn-h: 48px; justify-content: center; }
  .tp-note--warn { flex-wrap: wrap; }
  .tp-note__act, .tp-resend { width: 100%; justify-content: center; }
}

/* заголовки-подписи блоков — Onest, не Unbounded (h2 по умолчанию берёт шрифт заголовков) */
.tk-how__h, .tp-case__h, .tp-others__h, .tk-t, .sb-sec__h { font-family: var(--font); letter-spacing: 0; }