/* ==========================================================================
   Панель владельца — дизайн-система.
   Порядок: токены → база → компоненты (кнопки, чипы, карточки, поля,
   таблицы) → каркас (сайдбар, topbar, таббар) → экраны.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- токены сайта --- */
  --bg: #F7F7F8;
  --surface: #FFFFFF;
  --surface-2: #EFEFF2;
  --ink: #0A0A0D;
  --ink-2: #5B5B66;
  --ink-3: #6B6B76; /* контраст ≥4.5:1 на --bg/--surface/--surface-2 (WCAG AA, axe color-contrast) */
  --line: rgba(10, 10, 13, .08);
  --line-2: rgba(10, 10, 13, .14);
  --dark: #0A0A0F;
  --on-dark: #F4F4F6;
  --on-dark-2: rgba(244, 244, 246, .62);
  --accent: #5B4CFF;
  --grad: linear-gradient(135deg, #1B1150 0%, #3B2BD9 38%, #7C5CFF 70%, #C9B8FF 100%);
  --glow: rgba(91, 76, 255, .35);
  --shadow-1: 0 8px 30px rgba(10, 10, 13, .06);
  --shadow-2: 0 24px 70px rgba(10, 10, 13, .10);
  --shadow-glow: 0 40px 100px -30px rgba(91, 76, 255, .35);
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 12px;
  --r-sm: 10px;
  --r-pill: 999px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* --- тона статусов --- */
  --accent-bg: #5B4CFF14;
  --ok: #1F9D67;
  --ok-bg: #1F9D6714;
  --warn: #C77700;
  --warn-ink: #9A5B00; /* тёмный тон предупреждения для мелкого текста: контраст >= 4.5:1 */
  --warn-bg: #F5B94226;
  --danger: #D64545;
  --danger-bg: #D6454514;
  --ok-ink: #167A50; /* тёмный тон успеха для мелкого текста: контраст >= 4.5:1 */
  --danger-ink: #B83232; /* тёмный тон ошибки для текста кнопок/подписей: контраст >= 4.5:1 */

  /* --- метрики каркаса --- */
  --sidebar-w: 248px;
  --topbar-h: 72px;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .num, .display {
  font-family: 'Inter Tight', Inter, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  letter-spacing: -.03em;
  font-weight: 600;
  margin: 0;
}

h1 { font-size: 27px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

p { margin: 0; }

a { color: inherit; }

.num {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.empty { color: var(--ink-3); font-size: 14px; padding: 18px 2px; }
.empty-loading { text-align: center; padding: 48px 20px; }

/* Единая рамка фокуса с клавиатуры: кнопки, ссылки, поля и кликабельные строки */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* У полей ввода своя подсветка фокуса (box-shadow ниже) — вторую рамку не рисуем */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
.drawer-title:focus-visible { outline-offset: 4px; }

/* Плашка вместо «Загрузка…», когда запрос упал (см. errorNode в panel.js) */
.load-error {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
}

/* Текстовая кнопка-ссылка («снять все / выбрать все») */
.link-btn {
  border: none;
  background: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:hover { color: var(--ink); }

/* Пока открыта шторка, фон не прокручивается */
body.drawer-open { overflow: hidden; }
.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mono {
  font-family: ui-monospace, 'JetBrains Mono', SF Mono, Menlo, monospace;
}
[hidden] { display: none !important; }
tr[hidden] { display: none !important; }

/* ==========================================================================
   Кнопки
   ========================================================================== */

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out),
              box-shadow .2s var(--ease-out), transform .2s var(--ease-out), opacity .2s var(--ease-out);
}
.btn:disabled { opacity: .45; pointer-events: none; }

/* primary — чёрная капсула */
.btn-primary { background: var(--dark); color: var(--on-dark); }
.btn-primary:hover { background: #22222B; }

/* secondary — белая капсула с рамкой */
.btn-ghost { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line-2); }

/* акцентная кнопка живёт только на градиентной карточке */
.btn-on-grad {
  background: #fff;
  color: #1B1150;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(10, 10, 13, .18);
}
.btn-on-grad:hover { background: #F4F2FF; transform: translateY(-1px); }

.btn-quiet {
  background: transparent;
  color: var(--ink-2);
  height: 36px;
  padding: 0 12px;
  font-weight: 400;
}
.btn-quiet:hover { background: var(--surface-2); color: var(--ink); }

.btn-danger { background: var(--danger-bg); color: var(--danger-ink); }
.btn-danger:hover { background: #D6454524; }

.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 50px; padding: 0 26px; font-size: 15px; }
.btn-block { width: 100%; }

/* круглая кнопка-иконка (⋯, ×, стрелки недели) */
.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border-color: var(--line-2);
  color: var(--ink-2);
  background: var(--surface);
}
.btn-icon:hover { background: var(--surface-2); color: var(--ink); }
.btn-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.link-btn {
  border: none;
  background: none;
  padding: 0;
  color: var(--ink-3);
  font-size: 13px;
  cursor: pointer;
  transition: color .2s var(--ease-out);
}
.link-btn:hover { color: var(--ink); }

/* ==========================================================================
   Чипы статусов и дельты
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px 0 9px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--ink-2);
}
.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.chip-accent { background: var(--accent-bg); color: var(--accent); }
.chip-ok { background: var(--ok-bg); color: var(--ok); }
.chip-warn { background: var(--warn-bg); color: var(--warn); }
.chip-mute { background: var(--surface-2); color: var(--ink-3); }
.chip-danger { background: var(--danger-bg); color: var(--danger); }

/* Чип статуса с подсказкой: фокусируется, по нажатию/фокусу показывает .status-tip (adapt.js). */
.chip-hint { cursor: help; }
.chip-hint:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.status-tip {
  position: fixed;
  left: var(--tip-x, 12px);
  top: var(--tip-y, 12px);
  z-index: 130;
  max-width: min(280px, calc(100vw - 24px));
  padding: 9px 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 400;
  pointer-events: none;
  animation: view-in .16s var(--ease-out) both;
}
.status-tip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .status-tip { animation: none; }
}
/* На телефоне зона касания чипа — 44px по высоте, внешний вид прежний */
@media (max-width: 480px) {
  .chip-hint { position: relative; }
  .chip-hint::after { content: ""; position: absolute; inset: -9px -6px; }
}

/* чип без точки — на градиентной карточке */
.chip-glass {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  height: 28px;
  padding: 0 13px;
  font-size: 12px;
  letter-spacing: .01em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.chip-glass::before { display: none; }

.delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  color: var(--ink-3);
}
.delta-up { background: var(--ok-bg); color: var(--ok); }
.delta-down { background: var(--danger-bg); color: var(--danger); }

/* ==========================================================================
   Аватары
   ========================================================================== */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.avatar-grad { background: var(--grad); color: #fff; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }

/* ==========================================================================
   Карточки
   ========================================================================== */

.card {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  padding: 24px 26px;
}
.card-hover { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card-flush { padding: 24px 8px 8px; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.card-flush .card-head { padding: 0 18px; }
.card-head-sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; }

/* градиентная карточка — единственный яркий акцент на экране */
.grad-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--grad);
  color: #fff;
  box-shadow: var(--shadow-glow);
  padding: 28px;
}
.grad-card::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 184, 255, .6), transparent 68%);
  pointer-events: none;
}
.grad-card > * { position: relative; z-index: 1; }
/* Свечение градиентной карточки не должно ложиться на плитки ниже: карточка — отдельный контекст с z-index 0 */
.grad-card { z-index: 0; }

/* ==========================================================================
   Поля ввода
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: 7px; }
.field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.field-hint { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

input, select, textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 14px;
  outline: none;
  transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
textarea {
  height: auto;
  min-height: 88px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  background: var(--surface);
  box-shadow: 0 0 0 3px #5B4CFF33;
}
input[type="date"] { padding-right: 10px; }

input.is-draft, textarea.is-draft {
  background: var(--accent-bg);
  box-shadow: 0 0 0 1.5px var(--accent) inset;
}

.draft-badge {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--accent);
}

/* «Найдено на сайте — проверьте»: метка и действия под контактным полем профиля и мастера (П26) */
input.is-site-unchecked, textarea.is-site-unchecked { box-shadow: 0 0 0 1.5px var(--warn) inset; }
.site-check {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-top: 6px;
}
.site-check[hidden] { display: none; }
.site-check-label { font-size: 12.5px; color: var(--warn-ink); line-height: 1.4; flex: 1 1 200px; min-width: 0; }
.site-check-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) {
  .site-check-actions { width: 100%; }
  .site-check-actions .site-check-btn { flex: 1 1 0; min-height: 44px; }
}

.form { display: flex; flex-direction: column; gap: 18px; }
.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }

.error {
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-size: 13px;
}

.draft-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--accent-bg);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-size: 13px;
  margin-bottom: 18px;
}

/* ==========================================================================
   Сегментированный контрол
   ========================================================================== */

.seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg-item {
  border: none;
  background: transparent;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.seg-item:hover { color: var(--ink); }
.seg-item.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(10, 10, 13, .08);
}

/* ==========================================================================
   Таблицы и строки-списки
   ========================================================================== */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  padding: 0 14px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.table td {
  padding: 0 14px;
  height: 56px;
  font-size: 14px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.table tbody tr:first-child td { border-top: 1px solid var(--line); }
/* Растягиваемая колонка (текст заявки): занимает остаток ширины, лишнее — в многоточие, без горизонтального скролла */
.table td.td-grow { width: 100%; max-width: 0; }
.table td.td-grow .ellipsis { max-width: none; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--surface-2); }
.table tr.clickable:hover td:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.table tr.clickable:hover td:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.cell-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cell-title { font-weight: 500; }
.cell-sub { font-size: 12.5px; color: var(--ink-3); }
.cell-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.actions-cell { display: flex; gap: 8px; justify-content: flex-end; }
.nowrap { white-space: nowrap; }

/* строки-списки (брони/заявки на «Сегодня», детали) */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-radius: var(--r-lg);
  transition: background-color .2s var(--ease-out);
}
.row + .row { box-shadow: 0 -1px 0 var(--line); }
.row.clickable { cursor: pointer; }
.row.clickable:hover { background: var(--surface-2); box-shadow: none; }
.row-flush { padding-left: 0; padding-right: 0; }
.row-body { flex: 1 1 auto; min-width: 0; }
.row-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-aside { display: flex; align-items: center; gap: 10px; flex: none; }

/* Узкие экраны: боковая часть строки (чипы, переключатели, кнопки) уходит на вторую строку, текст переносится */
@media (max-width: 900px) {
  .row { flex-wrap: wrap; }
  .row-aside { flex-basis: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .row-title, .row-sub { white-space: normal; }
}

/* Счёт + раскрывающийся список актов (SPEC §18.5): обёртка заменяет счёт как прямого потомка .rows,
   поэтому разделитель между счетами переносится на неё, а не на вложенный .row. */
.row-group + .row-group { box-shadow: 0 -1px 0 var(--line); }
.invoice-acts { padding: 0 18px 12px 32px; }
.invoice-acts .rows { background: var(--surface-2); border-radius: var(--r-lg); }
.invoice-acts .row + .row { box-shadow: 0 -1px 0 var(--line); }
@media (max-width: 900px) {
  .invoice-acts { padding-left: 18px; }
}

/* Черновики ресурсов из базы знаний (SPEC §13.1) */
.resource-drafts { margin-top: 18px; }
.draft-selection { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.draft-check { display: flex; align-items: center; gap: 12px; cursor: pointer; flex: 1 1 auto; min-width: 0; }
.draft-check > div { flex: 1 1 auto; min-width: 0; }
.draft-check input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; flex: none; }
.draft-fields { display: flex; gap: 14px; flex: none; }
.draft-fields .field { gap: 4px; }
.draft-fields .field-label { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.draft-fields input { width: 96px; }
@media (max-width: 900px) {
  .draft-fields { flex-basis: 100%; padding-left: 32px; }
}

/* ==========================================================================
   Каркас: сайдбар, topbar, таббар
   ========================================================================== */

.screen.is-hidden { display: none !important; }

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 16px 18px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Сайдбар — колонка фиксированной высоты (весь экран), меню длиннее экрана: прокручивается он весь, а не сжимается
   его содержимое. Без flex: none промо-карточка (overflow: hidden → min-height: 0) сжималась до высоты кнопки и
   обрезала заголовок и текст, налезая на «Выйти». */
.sidebar > * { flex-shrink: 0; }

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px 22px;
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark {
  font-size: 15px;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1 0 auto; }
/* Тонкий разделитель групп меню: работа / помощник / аккаунт. */
.nav-sep { height: 1px; margin: 8px 12px; background: var(--line); flex: none; }
/* Заголовок секции меню (Работа / Каталог / Настройка бота / Аккаунт / Помощь). */
.nav-title {
  flex: none;
  margin: 14px 12px 4px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Заголовок — кнопка сворачивания секции (Q-0403): шеврон справа, свёрнутые ссылки прячет .nav-folded. */
button.nav-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 24px);
  padding: 4px 0;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
button.nav-title::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--ease-out);
}
button.nav-title[aria-expanded="false"]::after { transform: translateX(-2px) rotate(-45deg); }
button.nav-title:hover { color: var(--ink-2); }
button.nav-title:focus-visible { border-radius: var(--r-sm); } /* обводку даёт общий :focus-visible */
.nav-link.nav-folded:not(.active) { display: none; }
@media (prefers-reduced-motion: reduce) {
  button.nav-title::after { transition: none; }
}
.nav-title:first-child { margin-top: 0; }
.nav-title[hidden] { display: none; }
button.nav-link { border: none; background: none; font-family: inherit; cursor: pointer; }
.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.nav-link:hover { color: var(--ink); }
/* Наведение — легче активного пункта (у активного фон --surface-2 и акцентная полоса слева): иначе курсор
   над «Профилем» выглядел как второй активный пункт. */
.sidebar .nav-link:not(.active):hover { background: color-mix(in srgb, var(--surface-2) 35%, transparent); }
.nav-link.active { background: var(--surface-2); color: var(--ink); }
.nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.nav-icon { display: flex; flex: none; width: 19px; height: 19px; }
.nav-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nav-text { flex: 1 1 auto; }
.nav-count {
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}
.nav-count[hidden] { display: none !important; }

/* Роли (§15.2): manager/viewer не видят разделы, доступные только владельцу. «Настройки» (040c)
   хранит и «Быстрые ответы» — их видит вся команда (viewer список, manager+ правка, SPEC §4.8),
   поэтому у этой ссылки класса .nav-restricted нет вовсе (public/panel/index.html), в отличие от
   «Каналов», «Команды» и «Подписки» — без override-правила, которое включало бы её обратно (п. B
   ревью 040g). */
body.role-manager .nav-restricted,
body.role-viewer .nav-restricted { display: none; }

/* viewer видит всё, но ничего не может изменить: кнопки записи (data-write, см. panel.js) скрываем
   так же, как исторически скрывали .btn-primary/.btn-danger — сервер всё равно ответит 403, но
   кнопку, ведущую в тупик, лучше не показывать. Переключатели (input) не прячем, а гасим — иначе
   viewer не увидит, включена ли интеграция. Реально выключает их JS (панель.js, disableWriteInputs,
   002 п.7): элементу ставится настоящий атрибут disabled, а не только pointer-events — иначе
   клавиатура (Tab + Space) всё ещё могла переключить чекбокс. */
body.role-viewer .btn-primary,
body.role-viewer .btn-danger,
body.role-viewer button[data-write] { display: none; }
body.role-viewer input[data-write] { opacity: .45; }
body.role-viewer input[data-write]:disabled { cursor: not-allowed; }

/* Сценарий тенанта (SPEC §17): lead — без броней и ресурсов, вместо ресурсов «Вопросы клиенту». */
.nav-scenario-lead { display: none; }
body.scenario-lead .nav-scenario-lead { display: flex; }
body.scenario-lead .nav-scenario-rental { display: none; }

.sidebar-promo {
  flex: none;
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--grad);
  color: #fff;
  box-shadow: 0 18px 40px -22px var(--glow);
  position: relative;
  overflow: hidden;
}
.sidebar-promo::after {
  content: "";
  position: absolute;
  top: -50px; right: -40px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 184, 255, .6), transparent 70%);
}
.sidebar-promo > * { position: relative; z-index: 1; }
.promo-title { font-family: 'Inter Tight', Inter, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.promo-text { font-size: 12.5px; color: rgba(255, 255, 255, .74); margin: 6px 0 14px; line-height: 1.45; }
.sidebar-foot { display: flex; flex: none; justify-content: center; padding-top: 12px; }

/* Низкий десктопный экран (1440×900 и ниже): уплотнённое меню, чтобы сайдбар помещался без прокрутки (Q-0403).
   Плотность — только по высоте окна; на высоких экранах прежние размеры. Прокрутка остаётся запасным вариантом. */
@media (min-width: 901px) and (max-height: 1000px) {
  .sidebar { gap: 6px; padding: 18px 16px 12px; }
  .brand { padding-bottom: 10px; }
  .nav { gap: 1px; }
  .nav-title { margin: 8px 12px 2px; }
  .nav-title:first-child { margin-top: 0; }
  .sidebar .nav-link { height: 34px; }
  .sidebar-promo { padding: 12px 14px; }
  .sidebar-promo .promo-text { display: none; }
  .promo-title { margin-bottom: 8px; }
  .sidebar-foot { padding-top: 4px; }
}

/* Full HD (1920×1080): полное меню с промо-блоком выше окна (1184px) — тот же уплотнённый вариант, что для 1440×900. */
@media (min-width: 901px) and (min-height: 1001px) and (max-height: 1200px) {
  .sidebar { gap: 6px; padding: 18px 16px 12px; }
  .brand { padding-bottom: 10px; }
  .nav { gap: 1px; }
  .nav-title { margin: 8px 12px 2px; }
  .nav-title:first-child { margin-top: 0; }
  .sidebar .nav-link { height: 34px; }
  .sidebar-promo { padding: 12px 14px; }
  .sidebar-promo .promo-text { display: none; }
  .promo-title { margin-bottom: 8px; }
  .sidebar-foot { padding-top: 4px; }
}

.main { margin-left: var(--sidebar-w); min-height: 100vh; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--topbar-h);
  padding: 0 34px;
  background: rgba(247, 247, 248, .86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.search {
  position: relative;
  flex: 1 1 auto;
  max-width: 460px;
}
.search svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  stroke: var(--ink-3);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  pointer-events: none;
}
.search input {
  height: 42px;
  padding: 0 56px 0 42px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.search input:focus { box-shadow: inset 0 0 0 1px transparent, 0 0 0 3px #5B4CFF33; }
.kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 24px;
  pointer-events: none;
}
.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
/* Приветствие/название экрана — показывается вместо поиска там, где искать нечего */
.topbar-greet {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.topbar-greet[hidden], .search[hidden] { display: none; }
/* Название раздела (setTopbarText без opts / pageHead): на столе слева в шапке, на мобильном шапка как была (см. @media 900px). */
.topbar-greet-desk { flex: 0 0 auto; max-width: 40%; font-size: 17px; font-weight: 600; }
/* Хлебные крошки вложенной страницы («Подключения › amoCRM»): название страницы стоит крупно в самой странице,
   поэтому в topbar только путь; на «Сегодня» вместо них приветствие, на остальных экранах topbar пуст. */
.topbar-crumbs { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.topbar-crumb { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
a.topbar-crumb:hover { color: var(--ink); text-decoration: underline; }
a.topbar-crumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.topbar-crumb-sep { color: var(--ink-3); }
.topbar-crumb-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 500; }
.tenant-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view { padding: 30px 34px 90px; max-width: 1280px; }
/* Без fill-mode (не "both"): после окончания анимации transform возвращается к буквальному none, а не
   к завершающей матрице keyframe — matrix(1,0,0,1,0,0) (визуально то же самое) создаёт новый
   containing block для потомков с position:fixed. Инбокс на мобильном ставит .inbox-screen.has-open
   в fixed относительно вьюпорта (public/panel/inbox.css) — с "both" он оказывался зафиксирован
   относительно .view-inner и съезжал на её отступ от топбара (п. C ревью 040g, 84 px). */
.view-inner { animation: view-in .26s var(--ease-out); }
/* Экраны со списком: карточка таблицы растягивается до низа окна */
.view-inner.view-fill { display: flex; flex-direction: column; min-height: calc(100vh - 64px - 120px); }
.view-fill .card-fill { flex: 1 1 auto; }
/* Пусто, загрузка или ошибка (нет таблицы) — карточка по размеру содержимого, а не на весь экран */
.view-fill .card-fill:not(:has(.table)) { flex: 0 0 auto; }
@keyframes view-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.page-head-sub { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; }
/* Рабочие экраны на столе (список/доска во всю высоту: «Диалоги», «Заявки», «Клиенты», «Ресурсы», CRM): название раздела уже слева
   в шапке, поэтому крупный заголовок страницы не занимает ~110px. Без кнопок в заголовке он остаётся только для скринридера
   (h1 + подзаголовок), с кнопками — строка с кнопками справа, заголовок и подзаголовок визуально скрыты. Мобильный — как был. */
@media (min-width: 901px) {
  .view-fill > .page-head,
  .crm-screen > .page-head { margin-bottom: 14px; justify-content: flex-end; }
  .view-fill > .page-head > div:first-child:not(.page-tools),
  .crm-screen > .page-head > div:first-child:not(.page-tools),
  .view-fill > .page-head:not(:has(.page-tools)),
  .crm-screen > .page-head:not(:has(.page-tools)) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
.page-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Вкладки внутри раздела («Помощник»): сегментированный контрол под заголовком. */
.page-tabs { margin: -6px 0 20px; max-width: 100%; }

/* Подвал панели со ссылками на документы — под содержимым каждого экрана */
.panel-footer { padding: 4px 34px 28px; }
.panel-footer .auth-doc-links { margin-top: 0; border-top: none; padding-top: 0; }

.tabbar { display: none; }

/* ==========================================================================
   Сетка экранов
   ========================================================================== */

.mt-18 { margin-top: 18px; }
/* «Возможный дубль» в узкой колонке «Клиент» диалога: подписи колонок переносятся по словам, а не по буквам. */
.inbox-client-dup { margin-top: 12px; }
.inbox-client-dup .crm-fields-cmp thead th { overflow-wrap: normal; word-break: normal; padding-left: 4px; padding-right: 4px; }
.inbox-client-dup .crm-fields-cmp th,
.inbox-client-dup .crm-fields-cmp td { padding: 6px 4px; font-size: 12.5px; }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.grid + .grid { margin-top: 20px; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-12 { grid-column: span 12; }

/* ==========================================================================
   «Сегодня»: hero, KPI, диаграмма
   ========================================================================== */

.hero { display: flex; flex-direction: column; height: 100%; min-height: 236px; }
.hero-title {
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.03em;
  margin: 18px 0 10px;
}
.hero-sub { font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.hero-actions { margin-top: auto; padding-top: 22px; }

.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.kpi { display: flex; flex-direction: column; gap: 10px; min-height: 108px; position: relative; z-index: 1; }
.kpi.clickable { cursor: pointer; }
.kpi.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kpi-label { font-size: 13px; color: var(--ink-2); }
.kpi-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kpi-value {
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 42px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.kpi-foot { font-size: 12px; color: var(--ink-3); margin-top: auto; }

.bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 26px 6px 0;
}
.bar-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
/* Столбец открывает шторку дня — ведёт себя как кнопка */
.bar-col.clickable { cursor: pointer; }
.bar-slot { position: relative; width: 100%; height: 150px; display: flex; align-items: flex-end; }
.bar {
  width: 100%;
  height: var(--h, 6px);
  min-height: 6px;
  border-radius: 10px;
  background: var(--surface-2);
  transition: background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.bar-col:hover .bar { transform: scaleY(1.02); transform-origin: bottom; }
.bar-col.is-max .bar { background: var(--accent); }
.bar-col.is-today .bar { background: #5B4CFF4D; }
.bar-col.is-max.is-today .bar { background: var(--accent); }
.bar-tip {
  position: absolute;
  left: 50%;
  bottom: calc(var(--h, 6px) + 10px);
  transform: translateX(-50%);
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--dark);
  color: var(--on-dark);
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .18s var(--ease-out);
  pointer-events: none;
}
.bar-col.is-max .bar-tip, .bar-col:hover .bar-tip { opacity: 1; }
.bar-day { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-col.is-today .bar-day { color: var(--accent); font-weight: 500; }

/* ==========================================================================
   Недельная сетка броней
   ========================================================================== */

.grid-wrap { overflow-x: auto; }
.week-grid { table-layout: fixed; min-width: 880px; width: 100%; border-collapse: separate; border-spacing: 0; }
.week-grid th { padding: 0 8px 12px; text-align: center; }
.week-grid th:first-child { text-align: left; width: 168px; }
.week-grid td {
  height: auto;
  min-height: 64px;
  padding: 8px;
  vertical-align: top;
  border-top: 1px solid var(--line);
}
.week-grid td:first-child {
  vertical-align: middle;
  font-weight: 500;
  font-size: 14px;
  padding-left: 14px;
}
/* Название ресурса остаётся видимым при горизонтальной прокрутке сетки. */
.week-grid th:first-child, .week-grid td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
}
.week-grid .is-today { background: #5B4CFF0F; }
.week-grid th.is-today { color: var(--accent); font-weight: 600; background: transparent; }
.week-grid th.is-today .day-num { color: var(--accent); }
.day-head { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.day-name { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.day-num { font-family: 'Inter Tight', Inter, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }

.bk {
  display: block;
  width: 100%;
  border: none;
  text-align: left;
  border-radius: var(--r-pill);
  padding: 6px 12px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.bk:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.bk-accent { background: var(--accent-bg); color: var(--accent); }
.bk-ok { background: var(--ok-bg); color: var(--ok); }
.bk-warn { background: var(--warn-bg); color: var(--warn); }
.bk-mute { background: var(--surface-2); color: var(--ink-3); text-decoration: line-through; }
.bk-danger { background: var(--danger-bg); color: var(--danger); }

/* ==========================================================================
   Выезжающая панель деталей и меню
   ========================================================================== */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(10, 10, 13, .28);
  animation: fade-in .2s var(--ease-out);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 460px;
  max-width: 100vw;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  animation: drawer-in .28s var(--ease-out);
}
@keyframes drawer-in {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}
.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 26px 26px 16px;
}
.drawer-title { font-family: 'Inter Tight', Inter, sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.drawer-sub { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 0 26px 26px; }
.drawer-foot {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 18px 26px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.drawer-foot .btn { flex: 1 1 140px; }

.block { margin-top: 24px; }
.block-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.facts { display: flex; flex-direction: column; gap: 10px; }
.fact { display: flex; gap: 14px; font-size: 14px; }
.fact-key { color: var(--ink-3); flex: none; width: 118px; }
.fact-val { color: var(--ink); word-break: break-word; }

.dialog { display: flex; flex-direction: column; gap: 10px; }
.dialog-msg {
  border-radius: var(--r-lg);
  padding: 12px 14px;
  background: var(--surface-2);
  max-width: 92%;
}
.dialog-msg.dialog-assistant { background: #5B4CFF0F; align-self: flex-end; }
.dialog-role { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.dialog-text { white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.dialog-time { display: block; font-size: 11px; color: var(--ink-3); margin-top: 6px; }

/* Плавающий виджет поддержки (z-index выше меню) перекрывает пункты меню «Ещё» на узких экранах. */
body.menu-open #apz-widget-host { visibility: hidden; pointer-events: none; }

.menu {
  position: fixed;
  left: var(--menu-x, auto);
  top: var(--menu-y, auto);
  z-index: 120;
  min-width: 208px;
  padding: 8px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  border: 1px solid var(--line);
  animation: view-in .16s var(--ease-out) both;
  /* «Ещё» с секциями длиннее экрана 360×640 — прокручивается внутри, а не уезжает за край. */
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-heading {
  padding: 10px 12px 4px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.menu-heading:first-child { padding-top: 4px; }
.menu-item {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s var(--ease-out);
}
.menu-item:hover { background: var(--surface-2); }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }

/* ==========================================================================
   Настройки
   ========================================================================== */

.settings { display: flex; flex-direction: column; gap: 20px; max-width: 980px; }
.settings input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
.set-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.set-row:first-of-type { border-top: none; padding-top: 6px; }
.set-side-title { font-size: 14px; font-weight: 500; }
.set-side-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: 4px; }

/* «Напоминания клиентам» в настройках (П28): редактор шаблона и превью сообщения */
.rem-editor { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rem-editor .field-hint { margin: 0; }
.rem-preview {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-width: 0;
}
.rem-preview:empty::before { content: "Пример появится после загрузки"; color: var(--ink-3); }

.code-block {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, 'JetBrains Mono', SF Mono, Menlo, monospace;
  margin: 0;
}

/* ==========================================================================
   FAQ (#/faq)
   ========================================================================== */

.faq-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.faq-stat { display: flex; flex-direction: column; gap: 6px; }
.faq-stats-caption { font-size: 12.5px; color: var(--ink-2); margin-top: 16px; }

/* ==========================================================================
   Мастер настройки (#/setup)
   ========================================================================== */

.setup-progress-wrap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.setup-progress-label { font-size: 13.5px; color: var(--ink-2); }
.setup-progress-bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.setup-progress-fill {
  height: 100%;
  width: var(--w, 0%);
  border-radius: var(--r-pill);
  background: var(--grad);
  transition: width .3s var(--ease-out);
}

.setup-steps { display: flex; flex-direction: column; gap: 14px; }
.setup-step { padding: 0; overflow: hidden; }
.setup-step-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  cursor: pointer;
}
.setup-step-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.setup-step-circle.is-done { background: var(--accent); color: #fff; }
.setup-step-circle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.setup-step-title { flex: 1 1 auto; font-weight: 500; }
.setup-step-toggle svg { transition: transform .2s var(--ease-out); }
.setup-step-toggle.is-open svg { transform: rotate(180deg); }
.setup-step-body { padding: 0 24px 24px; }
.setup-step-body[hidden] { display: none; }

.setup-scenario-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.setup-scenario-card {
  text-align: left;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.setup-scenario-card:hover { background: var(--surface-2); }
.setup-scenario-card.is-active { border-color: var(--accent); background: var(--accent-bg); }
.setup-scenario-title { font-weight: 500; margin-bottom: 4px; }
.setup-scenario-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

.setup-material-row { display: flex; align-items: center; gap: 10px; }
.setup-material-row input { flex: 1 1 auto; }

.setup-step-body input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }

@media (max-width: 900px) {
  .setup-scenario-pick { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Превью тем виджета (виджет чата / чат вместо формы, ТЗ 037)
   ========================================================================== */

.widget-theme-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.widget-theme-card { text-align: center; padding: 14px; }
.widget-theme-card .setup-scenario-title { margin-bottom: 0; font-size: 13px; }
/* Фиксированная высота подписи — у «Обычного» и «Адаптивного» разный по длине текст,
   без min-height карточки в паре были бы разной высоты. */
.widget-theme-card .setup-scenario-text { margin-top: 4px; min-height: 34px; }

/* Мини-макет «страница сайта + виджет» вместо радуги полос: шапка страницы, образец шрифта,
   пара строк контента и сам виджет — плавающая кнопка в углу (floating) или окно чата на
   месте формы (inline, см. widgetThemePreview в panel.js). */
.widget-theme-preview {
  position: relative;
  height: 68px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 10px 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.widget-theme-preview .wtp-head {
  position: absolute;
  left: 12px;
  top: 10px;
  width: 36%;
  height: 7px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.widget-theme-preview .wtp-sample {
  position: absolute;
  right: 12px;
  top: 6px;
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-3);
}
.widget-theme-preview .wtp-line {
  position: absolute;
  left: 12px;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-2);
}
.widget-theme-preview .wtp-line-a { top: 27px; width: 58%; }
.widget-theme-preview .wtp-line-b { top: 38px; width: 36%; }

/* floating: кнопка-пузырь в углу превью, с иконкой чата */
.widget-theme-preview .wtp-fab {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  box-shadow: var(--shadow-1);
}
.widget-theme-preview .wtp-fab svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* inline: окно чата на месте формы — две реплики вместо полей ввода */
.widget-theme-preview .wtp-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 24px;
  bottom: 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
}
.widget-theme-preview .wtp-bubble { height: 7px; border-radius: 4px; }
.widget-theme-preview .wtp-bubble-bot { align-self: flex-start; width: 62%; background: var(--surface); border: 1px solid var(--line); }
.widget-theme-preview .wtp-bubble-user { align-self: flex-end; width: 42%; background: var(--accent); }

/* Адаптивная тема: шапка страницы и сам виджет окрашены в условный фирменный цвет САЙТА, не в
   акцент LeadSync (--accent) — заметно другой, спокойный тон, иначе превью читается как «тёмная
   тема», а не как подстройка. --wtp-site — не токен панели: намеренное исключение, значение
   показывает чужой бренд, панель не красится в него нигде, кроме этого демо-превью. Шрифт «Aa» —
   с засечками (имитация шрифта сайта); связку шапка→виджет показывает пунктирная дуга (wtp-arc),
   это единственный акцент перехода — без доп. halo, чтобы не перегружать превью. */
.widget-theme-preview-adaptive { --wtp-site: #0F766E; }
.widget-theme-preview-adaptive .wtp-head { background: var(--wtp-site); }
.widget-theme-preview-adaptive .wtp-sample {
  color: var(--wtp-site);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
}
.widget-theme-preview-adaptive .wtp-fab { background: var(--wtp-site); box-shadow: var(--shadow-1); }
.widget-theme-preview-adaptive .wtp-bubble-user { background: var(--wtp-site); }
/* position:absolute, а не flex-элемент — иначе третья строка в узкой панели выталкивает реплики
   за пределы её высоты (панель рядом не растёт, высота превью фиксированная) и видимый изумрудный
   пузырь реплики пользователя почти исчезает. */
.wtp-panel-font {
  position: absolute;
  top: 5px;
  right: 7px;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: var(--wtp-site, var(--ink-3));
}
.wtp-arc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wtp-arc path { fill: none; stroke: var(--wtp-site, var(--ink-3)); stroke-width: 1.4; stroke-dasharray: 2.5 3; opacity: .55; }

@media (max-width: 900px) {
  .widget-theme-pick { grid-template-columns: 1fr; }
}

.widget-auto-color { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; cursor: pointer; font-size: 13.5px; }
.widget-auto-color input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }

input[type="color"] { width: 64px; height: 44px; padding: 4px; cursor: pointer; }
input[type="color"]:disabled { opacity: .45; cursor: not-allowed; }

.segmented { display: inline-flex; background: var(--surface-2); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.segmented-btn {
  border: none;
  background: transparent;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.segmented-btn.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* ==========================================================================
   «Чат вместо формы» (шаг «Сайт»)
   ========================================================================== */

.ic-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 14px; }
.ic-points { display: flex; flex-direction: column; gap: 12px; }
.ic-point-title { font-size: 14px; font-weight: 500; }
.ic-point-text { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

.ic-scheme {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr);
  gap: 8px;
  align-items: center;
  background: var(--surface-2);
  border-radius: var(--r-lg);
  padding: 14px;
}
.ic-arrow { font-size: 20px; color: var(--accent); line-height: 1; }
.ic-pane {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px;
  min-width: 0;
}
.ic-pane-title { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.ic-bar { height: 14px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); }
.ic-bar-tall { height: 26px; }
.ic-btn {
  align-self: flex-start;
  margin-top: 2px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--ink-3);
  color: var(--surface);
  font-size: 11px;
}
.ic-pane-chat { border-color: var(--accent); }
.ic-bubble { font-size: 11.5px; line-height: 1.35; padding: 6px 9px; border-radius: 10px; max-width: 92%; }
.ic-bubble-bot { align-self: flex-start; background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 3px; }
.ic-bubble-user { align-self: flex-end; background: var(--accent-bg); color: var(--accent); border-bottom-right-radius: 3px; }

.ic-toggle { margin-bottom: 8px; }
.ic-toggle .chip { margin-left: 4px; }
.ic-height-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ic-height-row input { width: 120px; }
.ic-platforms { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.ic-platforms .field-hint { margin: 0; }
.ic-check {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.ic-check .field-hint { flex: 1 1 220px; min-width: 0; }

/* Вкладка «Виджет чата»: вводные пункты, раскрывающиеся справки, быстрые действия, селекторы. */
.widget-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; margin-bottom: 16px; }
.widget-details { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.widget-details > summary { cursor: pointer; font-size: 14px; font-weight: 500; min-height: 24px; }
.widget-details > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.widget-details[open] > summary { margin-bottom: 8px; }
.widget-details .code-block { margin: 8px 0; overflow-x: auto; }
.widget-quick { display: flex; flex-direction: column; gap: 8px; }
.widget-quick-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.widget-quick-on { flex: 0 0 110px; }
.widget-quick-row input[type="text"] { flex: 1 1 180px; min-width: 0; }
.widget-quick-row input:disabled { opacity: .45; cursor: not-allowed; }
.widget-selectors { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 900px) {
  .ic-intro { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ic-scheme { grid-template-columns: 1fr; }
  .ic-arrow { justify-self: center; transform: rotate(90deg); }
}

/* ==========================================================================
   Расход токенов (#/subscription)
   ========================================================================== */

.usage-bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.usage-bar-fill {
  height: 100%;
  width: var(--w, 0%);
  border-radius: var(--r-pill);
  background: var(--grad);
  transition: width .3s var(--ease-out), background-color .2s var(--ease-out);
}
.usage-bar-fill.is-warn { background: var(--warn); }
.usage-bar-fill.is-danger { background: var(--danger); }

/* ==========================================================================
   Экран входа
   ========================================================================== */

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at 50% -20%, #5B4CFF14, transparent 60%),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 420px;
  padding: 34px 34px 32px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  animation: view-in .3s var(--ease-out) both;
}
.login-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--grad);
  box-shadow: 0 12px 30px -10px var(--glow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  margin-bottom: 20px;
}
.login-card h1 { font-size: 26px; margin-bottom: 8px; }
.login-hint { color: var(--ink-2); font-size: 13px; line-height: 1.55; margin-bottom: 24px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-tenants-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* Ссылка «Забыли пароль?» в одной строке с подписью поля */
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.field-label-link { font-size: 12.5px; color: var(--accent); text-decoration: none; }
.field-label-link:hover { text-decoration: underline; }

/* Приглашение зарегистрироваться под формой входа: появляется, только когда known signup_enabled */
.login-signup-invite {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
  animation: fade-in .25s var(--ease-out) both;
}
.login-divider { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 12px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }

/* Скрытая ссылка входа по ключу — внизу карточки, маленькая и малозаметная */
.login-key-toggle { margin-top: 20px; text-align: center; }
.login-key-toggle .link-btn + .link-btn { margin-left: 4px; }

/* Ссылки на юридические документы — на экранах входа/регистрации и в подвале панели */
.auth-doc-links {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  font-size: 12px;
}
.auth-doc-links a { color: var(--ink-3); }
.auth-doc-links a:hover { color: var(--accent); }

/* ==========================================================================
   Регистрация (#/signup): двухколоночный экран
   ========================================================================== */

.signup-screen {
  min-height: 100vh;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% -20%, #5B4CFF14, transparent 60%),
    var(--bg);
}
.signup-shell {
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px;
  align-items: stretch;
  animation: view-in .3s var(--ease-out) both;
}
.signup-hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px 32px;
}
.signup-hero-title {
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.03em;
  margin: 0;
}
.signup-hero-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.signup-hero-points li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .86);
}
.signup-hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  opacity: .8;
}
.signup-trial-badge { align-self: flex-start; margin-top: auto; }
.signup-form-panel {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  padding: 34px;
}
.signup-form-panel h1 { font-size: 24px; margin-bottom: 6px; }

@media (max-width: 900px) {
  .signup-shell { grid-template-columns: 1fr; }
  .signup-hero { padding: 22px 20px; border-radius: var(--r-lg); gap: 12px; }
  .signup-hero-title { font-size: 22px; }
  .signup-hero-points { display: none; }
  .signup-form-panel { padding: 24px; border-radius: var(--r-lg); }
}

/* Поле-пароль с кнопкой показать/скрыть */
.password-field { position: relative; }
.password-field input { padding-right: 46px; }
.password-toggle {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.password-toggle:hover { background: var(--surface-2); color: var(--ink); }
.password-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Зона нажатия >= 40px и на десктопе: визуал 34px, невидимая подложка шире */
.password-toggle::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; }
.password-toggle-slash { display: none; }
.password-toggle.is-shown .password-toggle-slash { display: inline; }

/* Индикатор надёжности пароля: три деления */
.password-strength { display: flex; gap: 6px; margin-top: 2px; }
.password-strength-seg { flex: 1 1 0; height: 4px; border-radius: var(--r-pill); background: var(--surface-2); transition: background-color .2s var(--ease-out); }
.password-strength-seg.is-weak { background: var(--danger); }
.password-strength-seg.is-medium { background: var(--warn); }
.password-strength-seg.is-strong { background: var(--ok); }

/* Чекбокс согласия с политикой */
.check-field { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
.check-field input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; flex: none; }
.check-field a { color: var(--accent); }

/* Ошибка конкретного поля — под ним, не тостом */
.field-error { color: var(--danger); font-size: 12.5px; line-height: 1.4; }
.error a { color: inherit; text-decoration: underline; font-weight: 500; }

/* Блок «Яндекс Календарь» в Каналы → Интеграции */
.ycal { display: flex; flex-direction: column; gap: 10px; max-width: 980px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); min-width: 0; }
.ycal p { margin: 0; overflow-wrap: anywhere; }
.ycal-status { font-size: 14px; color: var(--ink); line-height: 1.45; }
.ycal-form { display: flex; flex-direction: column; gap: 12px; max-width: 520px; min-width: 0; }
.ycal-steps { margin: 0; padding-left: 20px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.ycal-warn { padding: 10px 12px; border-radius: var(--r-md); background: var(--warn-bg); color: var(--ink); font-size: 12.5px; line-height: 1.45; }
.ycal-pick { display: flex; flex-direction: column; gap: 12px; }
/* Кнопки блока — высота касания не меньше 44px (btn-sm у Google в других местах не трогаем) */
.ycal .btn.btn-sm { height: auto; min-height: 44px; }
/* Разделитель после блока Яндекса (на широком экране блок — последний в Интеграциях) */
.ycal { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
@media (max-width: 600px) {
  .ycal .page-tools { flex-direction: column; align-items: stretch; }
  .ycal .page-tools .btn { width: 100%; }
}

/* Общая утилита «видно только скринридерам»: подписи для доступности и поле-ловушка от ботов (.hp-field) */
.visually-hidden, .hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Баннер подтверждения e-mail
   ========================================================================== */

.verify-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 34px;
  background: var(--accent-bg);
  border-bottom: 1px solid var(--line);
}
.verify-banner-text { font-size: 13.5px; color: var(--ink); }
/* Режим «info» (остаток пробного): формы нет, крестик уезжает вправо. */
.verify-banner[data-mode="info"] .verify-banner-text { margin-right: auto; }
.verify-banner-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.verify-banner-code {
  width: 116px;
  height: 38px;
  text-align: center;
  letter-spacing: .3em;
  font-variant-numeric: tabular-nums;
}
.verify-banner-error { flex-basis: 100%; color: var(--danger); font-size: 12.5px; }
/* Крестик не сжимается flex-контейнером: касание ≥44 px на любой ширине */
.verify-banner .btn-icon { min-width: 44px; min-height: 44px; flex-shrink: 0; }
@media (max-width: 900px) {
  /* Компактно: крестик — в правом верхнем углу, форма и ссылка — одной строкой */
  .verify-banner { position: relative; padding: 10px 16px; gap: 8px; min-height: 54px; }
  .verify-banner-text { flex: 1 1 100%; padding-right: 44px; }
  .verify-banner[data-mode="info"] .verify-banner-text { flex: 1 1 auto; }
  .verify-banner #verify-banner-close { position: absolute; top: 5px; right: 8px; }
  .verify-banner-form { margin-left: 0; width: 100%; flex-wrap: nowrap; gap: 10px; }
  .verify-banner-code { width: 96px; height: 44px; flex-shrink: 0; }
  .verify-banner .btn { flex-shrink: 0; }
  .verify-banner .link-btn { flex: 1 1 0; min-width: 0; text-align: left; line-height: 1.25; }
  .verify-banner .link-btn, .verify-banner .btn { min-height: 44px; }
  .verify-banner[data-mode="info"] { flex-wrap: nowrap; }
}

/* Слот баннеров (#banner-dock, panel.js): показан один баннер, остальные ждут за счётчиком «Ещё N».
   Фон и нижняя линия — у слота, а не у баннеров: так смена баннера не дёргает раскладку. */
.banner-dock {
  display: flex;
  align-items: center;
  background: var(--accent-bg);
  border-bottom: 1px solid var(--line);
}
.banner-dock[hidden] { display: none; }
.banner-dock[data-tone="warn"] { background: var(--warn-bg); }
.banner-dock > .verify-banner,
.banner-dock > .push-hint,
.banner-dock > .trial-banner {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.banner-dock > .trial-banner { padding: 12px 34px; }
.banner-dock > .banner-queued { display: none !important; }
.banner-dock-more { flex: none; margin-right: 30px; white-space: nowrap; }
.banner-dock-more[hidden] { display: none; }
@media (max-width: 900px) {
  .banner-dock { flex-wrap: wrap; }
  .banner-dock > .verify-banner,
  .banner-dock > .push-hint,
  .banner-dock > .trial-banner { flex: 1 1 100%; }
  .banner-dock > .trial-banner { padding: 10px 16px; }
  .banner-dock-more { margin: 0 12px 6px auto; min-height: 44px; }
}
body.wizard-open .banner-dock > .trial-banner { display: none; }

/* ==========================================================================
   Тосты
   ========================================================================== */

.toast-container {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1000;
  width: 100%;
  max-width: 380px;
  padding: 0 16px;
}
.toast {
  background: var(--dark);
  color: var(--on-dark);
  border-radius: var(--r-pill);
  padding: 12px 20px;
  font-size: 13px;
  box-shadow: var(--shadow-2);
  transition: opacity .24s var(--ease-out), transform .24s var(--ease-out);
}
.toast-error { background: var(--danger); color: #fff; }
.toast-hide { opacity: 0; transform: translateY(8px); }
/* Узкий экран: шторка — нижний лист с кнопками в подвале; тост поднимаем выше подвала (высоту выставляет panel.js в --drawer-footer-h), чтобы не перекрывать кнопки */
@media (max-width: 900px) {
  body.drawer-open .toast-container { bottom: calc(var(--drawer-footer-h, 94px) + 16px + env(safe-area-inset-bottom, 0px)); }
}

/* CSP без 'unsafe-inline' в style-src (П126): панель не использует атрибут style и el.style.<свойство> —
   разовые значения задаются классами, динамические — CSS-переменными через style.setProperty('--x', v). */
.u-hidden { display: none !important; }
.toast-clickable { cursor: pointer; }
.scroll-margin-topbar { scroll-margin-top: calc(var(--topbar-h, 72px) + 24px); }
body.scroll-pad { padding-bottom: 70vh; }
.qr-img { background: #fff; padding: 8px; border-radius: 8px; }
.unit-select-narrow { width: 96px !important; }
.res-shift-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.res-shift-row .res-shift-label { flex: 1 1 160px; min-width: 0; }

/* Узкий график: подписи дней через одну, чтобы не наезжали друг на друга */
@media (max-width: 1100px) {
  .bar-col:nth-child(even) .bar-label { visibility: hidden; }
}

/* ==========================================================================
   Мобильная раскладка
   ========================================================================== */

@media (max-width: 900px) {
  .sidebar { display: none; }
  .main { margin-left: 0; }

  .topbar { padding: 0 16px; height: 64px; gap: 10px; }
  .search { max-width: none; }
  .topbar-greet-desk { display: none; }
  .search .kbd { display: none; }
  .search input { padding-right: 16px; }
  .tenant-name { display: none; }

  .view { padding: 20px 16px 110px; }
  .panel-footer { padding: 0 16px calc(28px + 70px + env(safe-area-inset-bottom)); }

  .grid { gap: 16px; }
  .col-4, .col-5, .col-6, .col-7 { grid-column: span 12; }
  .kpi-grid { gap: 16px; }
  html, body { overflow-x: hidden; }
  .card { padding: 20px; border-radius: var(--r-lg); }
  .card-flush { padding: 20px 4px 4px; }
  .card-flush .card-head { padding: 0 14px; }
  .grad-card { padding: 24px; border-radius: var(--r-lg); }
  .hero-title { font-size: 26px; }

  /* Шаги мастера: .card выше задаёт 20px, но у шага отступы — у шапки и тела */
  .setup-step { padding: 0; }
  .setup-step-head { padding: 16px 18px; gap: 12px; }
  .setup-step-body { padding: 0 18px 18px; }
  .view-inner.view-fill { min-height: calc(100vh - 64px - 110px - 36px); }

  /* Таблицы (кроме сетки броней) — стопка карточек: подпись из data-label, которую ставит labelTable() */
  .table-wrap { overflow-x: visible; }
  .table:not(.week-grid) thead { display: none; }
  .table:not(.week-grid), .table:not(.week-grid) tbody, .table:not(.week-grid) tr { display: block; width: 100%; }
  .table:not(.week-grid) tr { padding: 14px 16px; }
  .table:not(.week-grid) tr + tr { box-shadow: 0 -1px 0 var(--line); }
  .table:not(.week-grid) tbody tr:first-child td { border-top: 0; }
  .table:not(.week-grid) td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    height: auto;
    border: 0;
    text-align: left;
    min-width: 0;
  }
  .table:not(.week-grid) td::before {
    content: attr(data-label);
    color: var(--ink-3);
    font-size: 12.5px;
    flex: none;
  }
  .table:not(.week-grid) td:first-child { font-weight: 500; padding-bottom: 8px; }
  .table:not(.week-grid) td:first-child::before, .table:not(.week-grid) td:not([data-label])::before { content: none; }
  .table:not(.week-grid) td:empty, .table:not(.week-grid) td[data-empty] { display: none; }
  .table:not(.week-grid) td.td-grow { width: auto; max-width: none; flex-direction: column; align-items: flex-start; gap: 4px; }
  .table:not(.week-grid) td.td-grow .ellipsis { white-space: normal; overflow: visible; text-overflow: clip; }
  .table:not(.week-grid) td > * { min-width: 0; }
  .table tr.clickable:hover td { background: transparent; border-radius: 0; }
  .table tr.clickable:hover { background: var(--surface-2); }

  .set-row { grid-template-columns: 1fr; gap: 12px; }

  .drawer { width: 100vw; top: auto; height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0; animation: sheet-in .28s var(--ease-out); }
  @keyframes sheet-in {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
  }

  .tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    height: 70px;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
  .tabbar .nav-link {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    height: auto;
    padding: 8px 2px;
    border-radius: 0;
    background: none;
    font-size: 10.5px;
    font-weight: 500;
  }
  .tabbar .nav-link.active { color: var(--accent); background: none; }
  .tabbar .nav-link.active::before { display: none; }
  .tabbar .nav-text { flex: none; }
  .tabbar .nav-icon { width: 21px; height: 21px; }
  .tabbar .nav-count {
    position: absolute;
    top: 4px;
    left: 50%;
    margin-left: 4px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 10.5px;
    background: var(--accent);
    color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card-hover:hover, .bk:hover, .btn-on-grad:hover { transform: none; }
}

/* Индикатор ожидания: три точки, мигающие по очереди */
.draft-waiting { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13.5px; padding: 12px 0; }
.dots { display: inline-flex; gap: 4px; align-items: center; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .25; animation: dot-blink 1.2s infinite ease-in-out; }
.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dot-blink { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* Опасный пункт меню (удаление) */
.menu-item-danger { color: var(--danger); }

/* ==========================================================================
   Мастер после регистрации (#/welcome, SPEC §16.5) — полноэкранный, без бокового меню
   ========================================================================== */

body.wizard-open .sidebar,
body.wizard-open .topbar,
body.wizard-open .tabbar,
body.wizard-open #readonly-banner,
body.wizard-open .panel-footer { display: none !important; }
body.wizard-open .main { margin-left: 0; display: flex; flex-direction: column; }
/* Баннер подтверждения e-mail остаётся видимым в мастере (Q-0020); мастер добирает остаток высоты без лишней прокрутки. */
body.wizard-open .main > .wizard { flex: 1 1 auto; min-height: 0; }
body.wizard-open .view { padding: 0; max-width: none; }

/* Токены мастера: светлая тема — токены панели как есть; тёмная — кинематографичный режим (--dark, фиолетовое свечение).
   Тема ставится скриптом атрибутом data-theme (выбор владельца или системная), см. wzApplyTheme. */
.wizard {
  --wz-glass: rgba(255, 255, 255, .72);
  --wz-glass-edge: rgba(255, 255, 255, .7);
  --wz-bar: rgba(247, 247, 248, .84);
  --wz-ring: rgba(91, 76, 255, .22);
  --wz-on-accent: #fff;
  --wz-accent-ink: #4A3BE8; /* акцент для текста на --accent-bg: контраст >= 4.5:1 */
  --wz-spring: cubic-bezier(.34, 1.4, .64, 1);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink); /* токены тёмной темы переопределены здесь, а body унаследовал бы цвет светлой */
}
.wizard[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0A0F;
  --surface: #15151D;
  --surface-2: #1E1E29;
  --ink: #F4F4F6;
  --ink-2: rgba(244, 244, 246, .74);
  --ink-3: rgba(244, 244, 246, .62);
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --accent: #8E81FF;
  --accent-bg: rgba(142, 129, 255, .16);
  --glow: rgba(142, 129, 255, .38);
  --ok: #3DD598;
  --ok-bg: rgba(61, 213, 152, .14);
  --ok-ink: #5BE3A9;
  --warn: #F5B942;
  --warn-ink: #F5B942;
  --warn-bg: rgba(245, 185, 66, .14);
  --danger: #FF6B6B;
  --danger-ink: #FF8E8E;
  --danger-bg: rgba(255, 107, 107, .14);
  --shadow-1: 0 8px 30px rgba(0, 0, 0, .4);
  --shadow-2: 0 30px 80px rgba(0, 0, 0, .55);
  --wz-glass: rgba(21, 21, 29, .62);
  --wz-glass-edge: rgba(255, 255, 255, .08);
  --wz-bar: rgba(10, 10, 15, .8);
  --wz-ring: rgba(142, 129, 255, .38);
  --wz-on-accent: #0A0A0F;
  --wz-accent-ink: #A399FF;
}
html:has(body.wizard-open.wizard-dark),
body.wizard-open.wizard-dark { background: #0A0A0F; }

/* Мягкие цветные «облака» за контентом — размытые радиальные пятна, медленный дрейф (transform) */
.wizard::before {
  content: "";
  position: absolute;
  inset: -6% -4% auto;
  height: 90%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52% 46% at 14% 4%, rgba(201, 184, 255, .55), transparent 72%),
    radial-gradient(44% 40% at 92% 18%, rgba(255, 214, 190, .42), transparent 72%);
  animation: wz-drift 28s ease-in-out infinite alternate;
}
.wizard[data-theme="dark"]::before {
  background:
    radial-gradient(60% 52% at 50% -8%, rgba(91, 76, 255, .36), transparent 72%),
    radial-gradient(38% 36% at 92% 70%, rgba(124, 92, 255, .16), transparent 72%);
}
@keyframes wz-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(0, -2.5%, 0) scale(1.06); }
}

.wizard-head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 36px 6px;
  flex-wrap: wrap;
}
.wizard-brand {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.wizard-brand-mark {
  font-size: 15px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Прогресс: микро-подпись в моно + тонкая шкала из семи сегментов, заливка растёт по scaleX */
.wizard-progress { display: flex; flex-direction: column; gap: 9px; flex: 0 1 360px; min-width: 160px; }
.wizard-progress-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.wizard-progress-dots { display: flex; gap: 5px; }
.wizard-dot { position: relative; flex: 1 1 0; height: 3px; border-radius: var(--r-pill); background: var(--line-2); overflow: visible; }
.wizard-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #B9A8FF);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s var(--ease-out);
}
.wizard-dot.is-active::after { transform: scaleX(1); }
.wizard-dot.is-current::after { box-shadow: 0 0 12px var(--glow); }
.wizard-head-tools { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.wizard-exit { flex: none; white-space: nowrap; min-height: 44px; }
.wizard-theme {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), transform .45s var(--wz-spring);
}
.wizard-theme svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wizard-theme:hover { background: var(--surface-2); color: var(--ink); }
.wizard-theme:active { transform: scale(.9); }
.wizard-theme[aria-pressed="true"] { color: var(--accent); background: var(--accent-bg); }

.wizard-body { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 56px; padding: 28px 36px 64px; max-width: 1160px; margin: 0 auto; width: 100%; flex: 1 1 auto; }

/* Навигатор шагов — вертикальная нить с точками: пройденное залито, текущее светится */
.wizard-nav { position: sticky; top: 28px; display: flex; flex-direction: column; gap: 0; width: 184px; flex: none; padding-top: 18px; }
.wizard-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  border: none;
  background: none;
  text-align: left;
  padding: 8px 6px;
  min-height: 42px;
  border-radius: var(--r-md);
  font: inherit;
  font-size: 14px;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .25s var(--ease-out), transform .45s var(--wz-spring);
}
.wizard-nav-item:disabled { cursor: default; }
.wizard-nav-item.is-upcoming { opacity: .62; }
.wizard-nav-item.is-current { color: var(--ink); font-weight: 600; }
.wizard-nav-item.is-done, .wizard-nav-item.is-skipped { color: var(--ink-2); }
.wizard-nav-item:not(:disabled):hover { color: var(--ink); transform: translateX(3px); }
.wizard-nav-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink-3);
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.wizard-nav-item:not(:last-child) .wizard-nav-circle::after {
  content: "";
  position: absolute;
  top: calc(100% + 1px);
  left: calc(50% - .5px);
  width: 1px;
  height: 14px;
  background: var(--line-2);
}
.wizard-nav-item.is-done:not(:last-child) .wizard-nav-circle::after { background: var(--accent); }
.wizard-nav-circle svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wizard-nav-item.is-done .wizard-nav-circle { background: var(--accent); color: var(--wz-on-accent); box-shadow: none; }
.wizard-nav-item.is-current .wizard-nav-circle { background: var(--accent); color: var(--wz-on-accent); box-shadow: 0 0 0 5px var(--accent-bg), 0 0 22px var(--glow); }

.wizard-stage { position: relative; flex: 1 1 auto; min-width: 0; max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }

/* Стеклянная поверхность шага: огромный заголовок, воздух, одна мысль на экран */
.wizard-card {
  min-height: 360px;
  padding: 48px 52px 44px;
  background: var(--wz-glass);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  backdrop-filter: blur(28px) saturate(1.5);
  box-shadow: var(--shadow-2), inset 0 1px 0 var(--wz-glass-edge), inset 0 0 0 1px var(--line);
}
.wizard-card > h2:first-child {
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
  overflow-wrap: break-word;
  margin: 0 0 14px;
}
.wizard-step-enter { animation: wz-in-fwd .75s var(--wz-spring) backwards; }
.wizard-step-enter[data-dir="back"] { animation-name: wz-in-back; }
@keyframes wz-in-fwd {
  from { opacity: 0; transform: translate3d(44px, 0, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes wz-in-back {
  from { opacity: 0; transform: translate3d(-44px, 0, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes wz-fade { from { opacity: 0; } to { opacity: 1; } }

.wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wizard-actions-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Кнопки мастера: крупные «пилюли», пружинный отклик на нажатие, шеврон «вперёд» у основной */
.wizard .btn { min-height: 44px; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .3s var(--ease-out), transform .45s var(--wz-spring), opacity .2s var(--ease-out); }
.wizard .btn:not(:disabled):active { transform: scale(.96); }
.wizard .btn-primary { background: var(--dark); color: var(--on-dark); }
.wizard[data-theme="dark"] .btn-primary { background: var(--on-dark); color: var(--dark); }
.wizard .btn-primary:hover { background: #22222B; }
.wizard[data-theme="dark"] .btn-primary:hover { background: #fff; }
.wizard .wizard-primary { height: 52px; padding: 0 30px; font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.wizard .wizard-primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 14px 38px -10px var(--glow); }
.wizard .wizard-primary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateX(-2px) rotate(45deg);
  transition: transform .45s var(--wz-spring);
}
.wizard .wizard-primary:not(:disabled):hover::after { transform: translateX(2px) rotate(45deg); }
.wizard .btn-ghost { background: transparent; }
.wizard .btn-ghost:hover { background: var(--surface-2); }
.wizard .btn-quiet { height: 44px; }

/* Поля: высокий хит-таргет, подпись подсвечивается вместе с фокусом, кольцо расходится плавно */
.wizard input:not([type="checkbox"]):not([type="radio"]), .wizard select { height: 52px; padding: 0 16px; border-radius: 14px; font-size: 15px; }
.wizard select { padding-right: 38px; background-position: calc(100% - 19px) 23px, calc(100% - 14px) 23px; }
.wizard textarea { min-height: 120px; padding: 14px 16px; border-radius: 14px; font-size: 15px; }
.wizard input:not([type="checkbox"]):not([type="radio"]):focus, .wizard select:focus, .wizard textarea:focus {
  background: var(--surface);
  box-shadow: 0 0 0 1.5px var(--accent) inset, 0 0 0 5px var(--wz-ring);
}
.wizard .field-label { transition: color .25s var(--ease-out); }
.wizard .field:focus-within .field-label { color: var(--accent); }
.wizard .field { gap: 8px; }

/* Ошибка шага: мягкое появление и одно покачивание; aria-live стоит на самом узле */
.wizard .error { border-radius: 14px; border-left: 3px solid var(--danger); padding: 12px 16px; font-size: 13.5px; color: var(--danger-ink); }
.wizard .error:not([hidden]) { animation: wz-pop .4s var(--ease-out) backwards; }
.wizard .error.is-shake { animation: wz-shake .45s var(--ease-out); }
@keyframes wz-pop { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes wz-shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-6px, 0, 0); }
  45% { transform: translate3d(5px, 0, 0); }
  70% { transform: translate3d(-3px, 0, 0); }
}

/* Ожидание данных: пульсирующая точка вместо плоской строки */
.wizard .empty-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 96px 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.wizard .empty-loading::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--glow);
  animation: wz-pulse 1.4s var(--ease-out) infinite;
}
@keyframes wz-pulse {
  0% { transform: scale(.8); box-shadow: 0 0 0 0 var(--glow); }
  70% { transform: scale(1); box-shadow: 0 0 0 14px transparent; }
  100% { transform: scale(.8); box-shadow: 0 0 0 0 transparent; }
}
/* Оборачивает .wizard-actions: ошибка «Назад»/сохранения шага (§002 п.5) видна над кнопками,
   а не только тостом. */
.wizard-footer { display: flex; flex-direction: column; gap: 12px; }
.wizard-footer .error { margin: 0; }

.wizard-lead { color: var(--ink-2); font-size: 17px; line-height: 1.5; max-width: 56ch; margin: 6px 0 30px; text-wrap: pretty; }
.wizard-hint { font-size: 12.5px; color: var(--ink-3); margin: 0 0 8px; }

.wizard-toggle { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; margin: 0 -12px 12px; border-radius: var(--r-md); font-size: 14.5px; cursor: pointer; transition: background-color .2s var(--ease-out); }
.wizard-toggle:hover { background: var(--surface-2); }
.wizard-toggle input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); cursor: pointer; transition: transform .45s var(--wz-spring); }
.wizard-toggle input:active { transform: scale(.82); }
.wizard-toggle-sm { font-size: 12.5px; gap: 6px; margin-bottom: 0; white-space: nowrap; }

/* Прогресс анализа сайта — запасной вариант, если magic.js недоступен */
.wizard-progress-steps { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.wizard-progress-step { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 14px; }
.wizard-progress-step.is-active { color: var(--ink); font-weight: 500; }
.wizard-progress-step.is-done { color: var(--ok); }
.wizard-progress-step-icon {
  width: 20px; height: 20px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--surface-2);
}
.wizard-progress-step.is-done .wizard-progress-step-icon { background: var(--ok-bg); color: var(--ok); }
.wizard-progress-step-icon svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Шаг «Отрасль»: hero-карточка решения + сетка отраслей */
.wizard-hero-title {
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 14px 0 8px;
}
.wizard-hero-text { font-size: 13.5px; color: rgba(255, 255, 255, .85); line-height: 1.5; margin: 0; }
.wizard-hero-scenario { margin-top: 8px; font-weight: 500; color: #fff; }
.wizard-quotes { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.wizard-quote { font-size: 12.5px; color: rgba(255, 255, 255, .7); font-style: italic; }
.wizard-warning-list { margin: 16px 0 0; padding-left: 18px; color: var(--warn-ink); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.wizard-vertical-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 10px; }
.wizard-vertical-card { text-align: left; }
@media (max-width: 900px) {
  .wizard-vertical-grid { grid-template-columns: 1fr; }
}

.wizard-question-row .row-aside { gap: 6px; flex-wrap: nowrap; }

/* Шаг «Предложение»: колонки Цена/За/Кол-во не зависят от подсказки — она отдельной строкой под рядом */
.wizard .draft-fields { align-items: flex-start; }
.wizard .draft-fields input[inputmode="decimal"] { width: 120px; } /* «не указана» помещается целиком */
.wizard-offer-row { flex-wrap: wrap; }
.wizard-offer-hint { flex: 1 1 100%; order: 1; margin: -4px 0 0; padding-left: 32px; }
.wizard-offer-row > .btn-icon { align-self: center; }

/* Шаг «Голос»: форма + живое превью */
.wizard-voice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
.wizard-voice-form { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.wizard-voice-preview { position: sticky; top: 20px; align-self: start; }
@media (max-width: 900px) {
  .wizard-voice-layout { grid-template-columns: 1fr; }
  .wizard-voice-preview { position: static; margin-top: 8px; }
}
.wizard-chat-preview { background: var(--surface-2); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.wizard-chat-msg { max-width: 88%; padding: 10px 14px; border-radius: var(--r-lg); font-size: 13.5px; line-height: 1.4; background: var(--surface); }
.wizard-chat-msg { overflow-wrap: anywhere; }
.wizard-voice-note { margin: 10px 0 0; }
.wizard-chat-assistant { align-self: flex-start; }
.wizard-chat-user { align-self: flex-end; background: var(--accent-bg); color: var(--wz-accent-ink); }
.wizard-faq-row { cursor: pointer; align-items: flex-start; gap: 12px; }
.wizard-faq-row input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--accent); flex: none; cursor: pointer; }
/* Разделитель строк — box-shadow: при скруглении он загибался на концах и «обрезал» список; последний ответ — с запасом снизу. */
.wizard-faq-row { border-radius: 0; }
.wizard-faq-row:last-child { padding-bottom: 18px; }
.wizard-voice-form { padding-bottom: 6px; }

/* Шаг «Проверка»: тестовый чат */
.wizard-suggestions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.wizard-suggestion { cursor: pointer; border: none; min-height: 44px; }
.wizard-test-chat { max-height: 320px; overflow-y: auto; padding: 4px 2px; margin-bottom: 14px; }
.wizard-test-form { display: flex; gap: 10px; }
.wizard-test-form input { flex: 1 1 auto; }

/* Карточка «Продолжить настройку» на «Сегодня» */
.wizard-continue-card { padding: 24px; }
.wizard-continue-title { font-family: 'Inter Tight', Inter, sans-serif; font-size: 19px; font-weight: 500; margin: 14px 0 6px; }
/* Карточка светлая (единственный градиент на экране — hero), поэтому текст и полоса — в тёмной палитре. */
.wizard-continue-sub { font-size: 13px; color: var(--ink-2); margin-bottom: 14px; }
.wizard-continue-bar { background: var(--surface-2); }
.wizard-continue-bar .setup-progress-fill { background: var(--grad); }
.wizard-continue-card .hero-actions { margin-top: 16px; }

/* Баннер состояния триала на «Сегодня» (SPEC §16.8) */
.trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 18px;
}
.trial-banner-limited { background: var(--accent-bg); }
.trial-banner-denied { background: var(--warn-bg); }
.trial-banner-warn { background: var(--warn-bg); }
.trial-banner-danger { background: var(--danger-bg); }
.trial-banner-accent { background: var(--accent-bg); }
/* «Клиенты ждут ответа» на «Сегодня» (040c) — тот же тон, что бейдж «Нужен человек» в инбоксе. */
.trial-banner-inbox { background: var(--warn-bg); }
/* «Без ответа: N → Разобрать» на «Сегодня» (М42). */
.trial-banner-gaps { background: var(--accent-bg); }
.trial-banner-body { min-width: 220px; }
.trial-banner-text { font-size: 14px; font-weight: 500; color: var(--ink); }
.trial-banner-sub { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.trial-banner-actions { display: flex; align-items: center; gap: 8px; flex: none; }
@media (max-width: 640px) {
  .trial-banner { flex-direction: column; align-items: stretch; }
  .trial-banner-actions { justify-content: flex-end; }
}

/* ==========================================================================
   Карточка «Первые шаги» на «Сегодня» (SPEC §12, ROADMAP этап 8 шаг 2)
   ========================================================================== */

.first-steps-card {
  overflow: hidden;
  /* Отступ сверху/снизу — как у соседних .grid-рядов (.grid + .grid, см. выше): карточка обычно стоит
     между hero-рядом и рядом графиков, соседние блочные margin схлопываются с margin-bottom заголовка
     экрана и друг с другом, лишнего удвоения не даёт. */
  margin: 20px 0;
  max-height: var(--fs-h, none);
  transition: max-height .38s var(--ease-out), opacity .3s var(--ease-out), margin .38s var(--ease-out), padding .38s var(--ease-out);
}
.first-steps-card.is-collapsing { opacity: 0; max-height: 0 !important; margin: 0 !important; padding-top: 0; padding-bottom: 0; }

.fs-head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.fs-ring { position: relative; width: 56px; height: 56px; flex: none; }
.fs-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fs-ring circle { fill: none; stroke-width: 4; }
.fs-ring-track { stroke: var(--surface-2); }
.fs-ring-fg { stroke: var(--accent); stroke-dasharray: var(--fs-c, none); stroke-dashoffset: var(--fs-o, 0); stroke-linecap: round; transition: stroke .25s var(--ease-out); }
.fs-ring-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  white-space: nowrap; line-height: 1; font-variant-numeric: tabular-nums;
}
.fs-ring-num-cur { font-family: 'Inter Tight', Inter, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.fs-ring-num-total { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
.fs-head-text { flex: 1 1 auto; min-width: 0; }
.fs-title { font-family: 'Inter Tight', Inter, sans-serif; font-size: 18px; font-weight: 600; }
.fs-sub { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.fs-close { flex: none; }

.fs-rows { display: flex; flex-direction: column; margin-top: 8px; }
/* Колонки совпадают с шапкой: кружок стоит по центру кольца (56px), текст шага — под текстом заголовка. */
.fs-row { display: flex; align-items: center; gap: 33px; padding: 13px 0 13px 17px; transition: opacity .2s var(--ease-out); }
.fs-row + .fs-row { box-shadow: 0 -1px 0 var(--line); }
.fs-row.is-done .fs-row-body { opacity: .58; }
/* Кружок-индикатор: обводка --line в покое, --ink-3 на ховере строки, мягкая заливка акцентом + галочка при done. */
.fs-row-ind {
  position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 1.5px solid rgba(10, 10, 13, .18); background: var(--surface);
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
/* До выполнения галочка полностью скрыта: иначе dashoffset с круглым концом штриха рисует точку в центре. */
.fs-row:not(.is-done) .fs-row-check { opacity: 0; }
.fs-row-check { transition: opacity .2s var(--ease-out); }
.fs-row:hover .fs-row-ind { border-color: var(--ink-3); }
.fs-row.is-done .fs-row-ind { border-color: transparent; background: var(--accent-bg); }
.fs-row-check {
  position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%);
}
.fs-row-check path {
  fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .45s var(--ease-out);
}
.fs-row.is-done .fs-row-check path { stroke-dashoffset: 0; }
.fs-row-ind.fs-bounce { animation: fs-bounce .45s var(--ease-out); }
.fs-row-body { flex: 1 1 auto; min-width: 0; }
.fs-row-title { font-size: 14px; font-weight: 500; }
.fs-row-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.fs-row-aside { flex: none; width: 196px; display: flex; justify-content: center; }
.fs-row-aside .btn { width: 100%; }
.fs-row-open {
  font-size: 13px; color: var(--ink-2); text-decoration: none; cursor: pointer;
  border: none; background: none; padding: 0; font: inherit; font-size: 13px;
}
.fs-row-open:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

@keyframes fs-bounce {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* Финал: все 5 шагов пройдены — короткая сцена, тонкое акцентное эхо на карточке и явная кнопка «Скрыть» */
.fs-celebrate-actions { margin-top: 10px; display: flex; justify-content: flex-end; }
.first-steps-card.is-celebrating .fs-title { color: var(--accent); }
.first-steps-card.is-celebrating {
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--accent), 0 30px 70px -40px var(--glow);
}

.fs-confetti { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 2; }
.fs-confetti-piece {
  position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 2px;
  background: var(--accent); opacity: 0;
  animation: fs-confetti .95s var(--ease-out) forwards;
  animation-delay: var(--dl, 0ms);
}
@keyframes fs-confetti {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(.5); }
}

/* Чип-заместитель на месте свёрнутой карточки, в шапке «Сегодня» */
.fs-chip { cursor: pointer; border: none; }

/* Короткая подсветка целевого элемента после перехода по кнопке шага (виджет/FAQ/команда) */
.apz-cta-highlight {
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-1);
  transition: box-shadow .25s var(--ease-out);
  border-radius: var(--r-xl);
}

@media (max-width: 900px) {
  /* Сетка «иконка | текст», кнопка шага — отдельной строкой на всю ширину под текстом; иконка никогда не остаётся одна. */
  .fs-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: start; padding: 13px 4px; }
  .fs-row-ind { margin-top: 1px; }
  .fs-row-aside { grid-column: 1 / -1; width: auto; }
  /* Готовый шаг: «Открыть» — справа в строке заголовка. */
  .fs-row-inline-aside { grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; }
  .fs-row-inline-aside .fs-row-aside { grid-column: auto; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .first-steps-card { transition: opacity .15s linear; }
  .fs-ring-fg { transition: none; }
  .fs-row-check path { transition: none; }
  .fs-row-ind.fs-bounce { animation: none; }
  .fs-confetti-piece { display: none; }
}

/* ==========================================================================
   Единое пустое состояние списков (Заявки/FAQ/База знаний/Команда/Брони/Ресурсы)
   ========================================================================== */

.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 48px 20px; }
.empty-state-icon {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent-bg); margin-bottom: 6px;
}
.empty-state-icon svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.empty-state-title { font-family: 'Inter Tight', Inter, sans-serif; font-size: 15px; font-weight: 600; color: var(--ink); }
.empty-state-text { font-size: 13px; color: var(--ink-2); max-width: 320px; line-height: 1.5; }
.empty-state-actions { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* Вложенный блок внутри карточки со своим заголовком: меньше отступы и знак */
.empty-state-compact { padding: 24px 12px; }
.empty-state-compact .empty-state-icon { width: 44px; height: 44px; }
.empty-state-compact .empty-state-icon svg { width: 20px; height: 20px; }
/* Пометка «пусто» во вложенном списке: без знака и кнопки */
/* Карточка-виджет на «Сегодня»: по левому краю заголовка, без знака */
.empty-state-widget { align-items: flex-start; text-align: left; padding: 2px 18px 14px; gap: 4px; }
.empty-state-widget.empty-state-plain { padding-left: 0; padding-right: 0; }
.empty-state-widget .empty-state-icon { display: none; }
.empty-state-widget .empty-state-title { font-size: 14px; }
.empty-state-widget .empty-state-text { max-width: none; }
.empty-state-widget .empty-state-actions { margin-top: 8px; justify-content: flex-start; }
.empty-state-note { padding: 20px 12px; gap: 4px; }
.empty-state-note .empty-state-icon { display: none; }
.empty-state-note .empty-state-title { font-size: 14px; font-weight: 400; color: var(--ink-3); }

@media (max-width: 900px) {
  .wizard-head { padding: 12px 16px 4px; gap: 4px 12px; }
  /* Бренд слева, тема и «выйти» справа, шкала прогресса — отдельной строкой на всю ширину */
  .wizard-brand { flex: 1 1 0; }
  .wizard-head-tools { flex: none; }
  .wizard-progress { order: 3; flex: 1 1 100%; max-width: none; }
  .wizard-body { flex-direction: column; padding: 12px 16px 180px; gap: 16px; }
  .wizard-nav { display: none; }
  .wizard-stage { width: 100%; }
  .wizard-card { min-height: 0; padding: 30px 22px 28px; }
  .wizard-lead { font-size: 16px; margin-bottom: 24px; }
  .wizard-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--wz-bar);
    padding: 14px 16px;
    margin: 0 -16px -96px;
    border-top: 1px solid var(--line);
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
}

/* Спокойная версия: без движения и размытия — короткий фейд карточки, шкала и кнопки без пружины.
   !important нужен, чтобы пересилить общее «.001ms» выше: фейд всё же виден. */
@media (prefers-reduced-motion: reduce) {
  .wizard::before { animation: none; }
  .wizard .wizard-card.wizard-step-enter { animation: wz-fade .2s linear backwards !important; animation-duration: .2s !important; }
  .wizard .error.is-shake, .wizard .error:not([hidden]) { animation: none !important; }
  .wizard .empty-loading::before { animation: none !important; }
  .wizard-dot::after { transition: none; }
  .wizard .btn:not(:disabled):active,
  .wizard .wizard-primary:not(:disabled):hover,
  .wizard-nav-item:not(:disabled):hover,
  .wizard-theme:active,
  .wizard-toggle input:active { transform: none; }
  .wizard .wizard-primary::after, .wizard .wizard-primary:not(:disabled):hover::after { transition: none; transform: translateX(-2px) rotate(45deg); }
}

/* ==========================================================================
   Режим «только чтение» после окончания подписки (SPEC §18.3)
   ========================================================================== */

/* Кнопки/переключатели изменения данных (data-write, см. panel.js) гаснут, пока подписка не продлена.
   /admin/subscription/* разрешён всегда — на кнопках «Тарифов» и «Подписки» атрибута нет специально. */
body.read-only [data-write] {
  pointer-events: none;
  opacity: .45;
}

.readonly-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 34px;
  background: var(--warn-bg);
  border-bottom: 1px solid var(--line);
}
.readonly-banner-text { font-size: 13.5px; color: var(--ink); font-weight: 500; }
@media (max-width: 900px) {
  .readonly-banner { padding: 12px 16px; }
}

/* ==========================================================================
   «Тарифы» (SPEC §18.1)
   ========================================================================== */

.plans-page { max-width: 1120px; }

.plan-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.plan-status-text { font-family: 'Inter Tight', Inter, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  position: relative;
  border: 1px solid transparent;
}
.plan-card.is-recommended { border-color: var(--accent); }
.plan-card.is-current { border-color: var(--line-2); }
.plan-badge { position: absolute; top: -13px; left: 24px; }
.plan-title { font-size: 19px; }
.plan-price { display: flex; align-items: baseline; gap: 4px; }
.plan-price-num { font-family: 'Inter Tight', Inter, sans-serif; font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
.plan-price-period { font-size: 14px; color: var(--ink-3); }
.plan-summary { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.plan-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink); }
.plan-features svg { width: 16px; height: 16px; flex: none; margin-top: 2px; stroke: var(--ok); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan-dialogs { font-size: 14px; font-weight: 600; color: var(--ink); }

/* «Докупить диалоги»: три пакета в ряд, на узком экране — столбиком */
.package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.package-card { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line-2); }
.package-title { font-size: 17px; }
.package-card .btn-block { width: 100%; margin-top: auto; }
.row-value { font-size: 14px; font-weight: 600; color: var(--ink); }
.page-back { margin: 0 0 8px; font-size: 13px; }
@media (max-width: 760px) {
  .package-grid { grid-template-columns: 1fr; }
}
.plan-addons { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-cta { margin-top: auto; padding-top: 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.plan-cta .btn-block { width: 100%; }

@media (max-width: 640px) {
  .plan-status { flex-direction: column; align-items: flex-start; }
}

.plan-features .plan-limit { color: var(--ink-3); }
.plan-limit-dash { display: inline-flex; width: 18px; justify-content: center; color: var(--ink-3); }

/* ==========================================================================
   Центр уведомлений: колокольчик в шапке и настройки доставки (ТЗ 034b)
   ========================================================================== */

.bell-btn { position: relative; }
.bell-btn[hidden] { display: none; }
.bell-btn.is-open { background: var(--surface-2); color: var(--ink); }
.bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.bell-badge[hidden] { display: none; }

/* Смена кабинета в шапке (П47): кнопка видна, только если кабинетов больше одного */
.tenant-switch { position: relative; display: flex; align-items: center; gap: 4px; }
.tenant-switch-btn[hidden], .new-business-btn[hidden] { display: none; }
/* «Новый бизнес» (П183): при одном кабинете — отдельная кнопка «+», при нескольких — последний пункт меню. */
.tenant-menu-new { border-top: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); margin-top: 4px; color: var(--accent); font-weight: 500; }
body.service-tariff .usage-buy { display: none; }
.new-business-info { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.new-business-info strong { display: block; color: var(--ink); margin-bottom: 4px; }
.tenant-switch-btn.is-open { background: var(--surface-2); color: var(--ink); }
.tenant-menu {
  position: absolute;
  z-index: 110;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  max-width: calc(100vw - 32px);
  max-height: min(420px, calc(100vh - var(--topbar-h) - 24px));
  overflow-y: auto;
  padding: 6px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  animation: view-in .16s var(--ease-out) both;
}
.tenant-menu[hidden] { display: none; }
.tenant-menu-title { padding: 8px 10px 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.tenant-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.tenant-menu-item:hover, .tenant-menu-item:focus-visible { background: var(--surface-2); }
.tenant-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tenant-menu-item.is-current { font-weight: 600; }
.tenant-menu-item.is-current::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: -2px;
}
.tenant-menu-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-menu-badge {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.tenant-menu-badge[hidden] { display: none; }
@media (max-width: 900px) {
  .btn-icon.tenant-switch-btn, .btn-icon.new-business-btn { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .tenant-menu { animation: none; }
}

.notif-panel {
  position: fixed;
  z-index: 110;
  top: calc(var(--topbar-h) - 8px);
  right: 34px;
  width: 400px;
  max-height: min(580px, calc(100vh - var(--topbar-h) - 24px));
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  animation: view-in .16s var(--ease-out) both;
}
.notif-panel[hidden] { display: none; }
.notif-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px 12px;
  box-shadow: 0 1px 0 var(--line);
}
.notif-title { flex: 1 1 auto; font-family: 'Inter Tight', Inter, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.notif-close { display: none; }
.notif-list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 18px;
  border: none;
  background: none;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s var(--ease-out);
}
.notif-item + .notif-item { box-shadow: 0 -1px 0 var(--line); }
.notif-item:hover { background: var(--surface-2); }
.notif-item.is-unread { background: var(--accent-bg); }
.notif-item.is-unread:hover { background: var(--surface-2); }
.notif-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
}
.notif-ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.notif-ic-success { background: var(--ok-bg); color: var(--ok); }
.notif-ic-warning { background: var(--warn-bg); color: var(--warn); }
.notif-ic-critical { background: var(--danger-bg); color: var(--danger); }
.notif-main { flex: 1 1 auto; min-width: 0; }
.notif-item-title { font-size: 14px; font-weight: 500; line-height: 1.35; word-break: break-word; }
.notif-item.is-unread .notif-item-title { font-weight: 600; }
.notif-item-body { font-size: 13px; color: var(--ink-2); line-height: 1.4; margin-top: 2px; word-break: break-word; }
.notif-item-time { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.notif-unread-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.notif-more { display: flex; justify-content: center; padding: 10px 18px 14px; }
.notif-error { padding: 24px 18px; text-align: center; font-size: 13px; color: var(--ink-2); }
.notif-error .btn { margin-top: 10px; }

/* Настройки уведомлений: категория × каналы */
.np-head, .np-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px 96px; gap: 12px; align-items: center; }
.np-head { padding: 0 2px 8px; font-size: 12px; color: var(--ink-3); box-shadow: 0 1px 0 var(--line); }
.np-head > span:not(:first-child), .np-cell { text-align: center; }
.np-row { padding: 14px 2px; }
.np-row + .np-row { box-shadow: 0 -1px 0 var(--line); }
.np-name { font-size: 14px; font-weight: 500; }
.np-desc { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.np-cell { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.np-cell label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.np-cell-label { display: none; }
.np-note { font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.4; }
.np-tg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.np-tg-info { flex: 1 1 220px; min-width: 0; }
.np-tg-title { font-size: 14px; font-weight: 500; }
.np-tg-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; word-break: break-word; }
.np-wide .np-head, .np-wide .np-row { grid-template-columns: minmax(0, 1fr) 72px repeat(5, 72px); gap: 8px; }
.np-group { padding: 18px 2px 6px; box-shadow: 0 -1px 0 var(--line); }
.np-group:first-of-type { box-shadow: none; }
.np-group-title { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); }
.np-sub { font-size: 14px; font-weight: 600; margin: 22px 0 4px; }
.np-digest { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.np-digest-item { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); min-width: 150px; }
.np-sound, .np-quiet { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.np-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; cursor: pointer; }
.np-range { display: flex; align-items: center; gap: 12px; width: min(100%, 360px); }
.np-range input[type="range"] { flex: 1 1 auto; min-width: 0; padding: 0; height: 44px; accent-color: var(--accent); }
.np-range-value { min-width: 42px; text-align: right; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.np-quiet-range { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.np-quiet-range input[type="time"] { width: 120px; flex: none; }
.np-test-result { margin-top: 14px; }
.np-test-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.np-test-list .is-ok strong { color: var(--ok); }
.np-test-list .is-fail strong { color: var(--danger, #c0392b); }

/* Матрица П101 (профиль): событие × канал. 1440 — таблица; до 700px — карточка на событие, 2 колонки каналов. */
.np-mx-scroll { overflow-x: auto; margin-top: 4px; }
.np-mx-table { width: 100%; border-collapse: collapse; }
.np-mx-table th { padding: 0 8px 8px; font-size: 12px; font-weight: 500; color: var(--ink-3); text-align: center; box-shadow: 0 1px 0 var(--line); }
.np-mx-table th:first-child { text-align: left; padding-left: 2px; }
.np-mx-table td { padding: 14px 8px; vertical-align: middle; }
.np-mx-row + .np-mx-row td { box-shadow: 0 -1px 0 var(--line); }
.np-mx-table .np-info { padding-left: 2px; }
.np-mx-table .np-cell { display: table-cell; width: 84px; text-align: center; }
.np-mx-table .np-cell label { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.np-mx-table .np-cell .np-cell-label { display: none; }
.np-mx-table .np-cell input:disabled { cursor: not-allowed; }
.np-mx-table .np-cell input:disabled + .np-cell-label { color: var(--ink-3); }
.np-mx-period { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.np-mx-period select { width: auto; min-height: 36px; }
@media (max-width: 700px) {
  .np-mx-table, .np-mx-table tbody { display: block; }
  .np-mx-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .np-mx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 14px 2px; }
  .np-mx-row + .np-mx-row { box-shadow: 0 -1px 0 var(--line); }
  .np-mx-row + .np-mx-row td { box-shadow: none; }
  .np-mx-table td { padding: 0; }
  .np-mx-table .np-info { grid-column: 1 / -1; padding: 0 0 6px; }
  .np-mx-table .np-cell { width: auto; text-align: left; }
  .np-mx-table .np-cell label { justify-content: flex-start; gap: 8px; }
  .np-mx-table .np-cell .np-cell-label { display: inline; }
  .np-mx-period { flex-wrap: wrap; }
}
.notif-settings { flex: none; }

@media (max-width: 900px) {
  .notif-panel {
    top: 0; right: 0; bottom: 0; left: 0;
    width: auto;
    max-height: none;
    border-radius: 0;
    border: none;
    padding-bottom: env(safe-area-inset-bottom);
    animation: sheet-in .28s var(--ease-out);
  }
  .notif-head { padding-top: calc(14px + env(safe-area-inset-top)); flex-wrap: wrap; row-gap: 6px; }
  /* Q-0200: зона касания 44×44, кнопка не сжимается соседями в шапке, значок по центру. */
  .notif-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 44px; min-height: 44px; }
  /* На 390 заголовок, «Настроить», «Прочитать все» и «×» в одну строку не помещаются (кнопку закрытия
     выталкивало за край): первая строка — заголовок и «×», вторая — кнопки. */
  .notif-head > .notif-title { order: 0; flex: 1 1 calc(100% - 52px); min-width: 0; }
  .notif-head > .notif-close { order: 1; }
  .notif-head > .btn-sm { order: 2; }
  .notif-item { padding: 14px 16px; }

  .np-head { display: none; }
  .np-row { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .np-wide .np-head, .np-wide .np-row { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .np-row .np-info { grid-column: 1 / -1; }
  .np-cell { justify-content: flex-start; text-align: left; }
  .np-cell-label { display: inline; }
  .np-cell-panel { display: none; }
  /* Зона касания ≥ 44px (Q-0189): подпись с галочкой и маленькие кнопки раздела «Уведомления» */
  .np-row .np-cell label { min-height: 44px; min-width: 44px; padding: 0 4px; margin: 0 -4px; }
  .np-tg .btn-sm, .np-sound .btn-sm, .np-test-actions .btn-sm, .np-back.btn-sm { height: auto; min-height: 44px; }
}

/* ==========================================================================
   Правки по аудиту вёрстки (ТЗ 035, волна 1)
   ========================================================================== */

/* Заголовок шторки получает фокус программно — рамка нужна только интерактивным элементам */
.drawer-title:focus, .drawer-title:focus-visible { outline: none; }

/* Поле, на которое пожаловался сервер или клиентская проверка */
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-bg);
}

/* Затенение края у прокручиваемых блоков (сегменты, недельная сетка) */
.fade-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.fade-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
.fade-left.fade-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }

/* viewer не переключает сегменты, меняющие данные */
body.role-viewer .seg[data-write] { pointer-events: none; opacity: .55; }

/* Карточка «Продолжить настройку» не липнет к блоку ниже */
.wizard-continue-card { margin-bottom: 20px; }

/* Подписанный тумблер (FAQ) */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--ink-2); min-height: 40px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch-track { position: relative; flex: none; width: 36px; height: 20px; border-radius: var(--r-pill); background: var(--line-2); transition: background-color .2s var(--ease-out); }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(10, 10, 13, .2); transition: transform .2s var(--ease-out); }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: .5; }
.switch-text { min-width: 66px; }

/* Списки в карточках: строки начинаются там же, где заголовок карточки; разделитель — прямая линия */
.card:not(.card-flush) > .rows > .row,
.card:not(.card-flush) > .row,
.card:not(.card-flush) > div > .row { padding-left: 0; padding-right: 0; border-radius: 0; }
.card .row.clickable:hover { border-radius: var(--r-md); }
.card-flush .rows > .row { padding-left: 18px; padding-right: 18px; border-radius: 0; }

/* Массовые действия над заявками */
.row-check { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; flex: none; margin: 0; }
.row-check-hit { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 40px; cursor: pointer; flex: none; }
.bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 18px 8px; }
.bulk-all { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.bulk-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bulk-actions[hidden] { display: none; }
.bulk-count { font-size: 13px; font-weight: 500; color: var(--ink); }
.bulk-bar.has-selection { background: var(--accent-bg); border-radius: var(--r-md); margin: 0 10px 8px; padding: 6px 8px; }
.table tr.is-selected td { background: var(--accent-bg); }

/* Оплата: «Счёт для ООО/ИП» в активном состоянии выглядит как обычная кнопка */
.btn-invoice:not(:disabled) { color: var(--ink); border-color: var(--line-2); }

@media (max-width: 900px) {
  /* Заявки: «⋯» в строке с заголовком, сообщение — не больше трёх строк */
  .table.table-leads:not(.week-grid) tr { position: relative; }
  .table.table-leads:not(.week-grid) td:first-child { padding-right: 48px; }
  .table.table-leads:not(.week-grid) td:last-child { position: absolute; top: 6px; right: 6px; padding: 0; width: auto; }
  .table.table-leads:not(.week-grid) td.td-grow .ellipsis {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
    overflow: hidden; white-space: normal;
  }
  .bulk-bar { padding: 0 14px 8px; }

  /* Длинные e-mail и названия переносятся, а не растягивают карточку */
  .table:not(.week-grid) td { overflow-wrap: anywhere; word-break: break-word; }

  /* Цели касания >= 40px: расширяем невидимой зоной, визуал не раздуваем */
  /* .password-toggle сюда не входит: он position:absolute внутри .password-field (relative сдвигал глаз под поле) */
  .seg-item, .btn-sm, .segmented-btn, .fs-chip, .wizard-exit { position: relative; }
  .seg-item::after, .btn-sm::after, .segmented-btn::after, .fs-chip::after {
    content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: max(100%, 42px); transform: translateY(-50%);
  }
  .btn-icon, .bell-btn { width: 40px; height: 40px; }
  .password-toggle { min-width: 40px; min-height: 40px; }
  .wizard .wizard-exit { min-height: 44px; }
  .link-btn, .field-label-link, .auth-doc-links a, .legal-links-row a {
    display: inline-flex; align-items: center; min-height: 40px;
  }
  .field-label-link { margin: -8px 0; }
  .auth-doc-links { gap: 0 14px; }
  label:has(> input[type="checkbox"]), .check-field, .wizard-toggle, .draft-check { min-height: 40px; align-items: center; }

  /* Вход: длинная кнопка переносится, а не вылезает */
  .btn-block { height: auto; min-height: 50px; padding-top: 8px; padding-bottom: 8px; white-space: normal; text-align: center; line-height: 1.3; }

  /* Сегменты ролей в «Команде» — вертикальный список на всю ширину */
  .team-roles .seg { display: flex; flex-direction: column; align-items: stretch; width: 100%; border-radius: var(--r-md); overflow: visible; }
  .team-roles .seg-item { width: 100%; text-align: center; border-radius: var(--r-sm); }

  /* График «Сегодня»: подписи через 5, столбики шире, tooltip по тапу/фокусу */
  .bars { gap: 3px; padding-left: 0; padding-right: 0; }
  .bar-day { font-size: 10px; }
  .bar-col:not(:nth-child(5n+1)):not(:last-child) .bar-day { visibility: hidden; }
  .bar-col:last-child .bar-day { text-align: right; }
  .bar-col:focus .bar-tip, .bar-col:active .bar-tip, .bar-col:focus-visible .bar-tip { opacity: 1; }
  .bar-col { min-height: 44px; }

  /* Брони: недельная сетка — явная прокрутка с затенением края, узкая колонка ресурсов, чипы >= 40px */
  .week-grid { min-width: 640px; }
  .week-grid th:first-child { width: 104px; }
  .week-grid td:first-child { font-size: 12.5px; padding-left: 10px; padding-right: 6px; overflow-wrap: break-word; word-break: normal; hyphens: auto; }
  .week-grid td { padding: 6px 4px; }
  .bk { min-height: 40px; }

  /* Мастер: нижняя панель прижата к низу, кнопки в одну строку */
  .wizard-footer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    background: var(--wz-bar); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); gap: 8px;
  }
  .wizard .wizard-primary { height: 50px; }
  .wizard-actions { position: static; margin: 0; padding: 0; border: 0; background: none; flex-wrap: wrap; gap: 8px; min-width: 0; }
  /* Обёртка правой группы растворяется: «Назад» и «Пропустить» делят первую строку поровну, основная кнопка — вторая строка */
  .wizard-actions-right { display: contents; }
  .wizard-actions .btn { padding: 0 14px; white-space: nowrap; max-width: 100%; }
  .wizard-actions .btn:not(.btn-primary) { flex: 1 1 calc(50% - 4px); min-width: 0; }
  /* Длинная подпись («Применить и продолжить») не вылезает за экран: кнопка тянется на всю строку и при нужде переносит текст */
  .wizard-actions-right .btn-primary { order: 3; flex: 1 1 100%; min-width: 0; white-space: normal; }
  /* Шаг «Голос»: переключатели умещаются в ширину карточки, кнопки делят строку поровну */
  .wizard-voice-form .segmented { display: flex; flex-wrap: wrap; max-width: 100%; border-radius: var(--r-md); }
  .wizard-voice-form .segmented-btn { flex: 1 1 auto; min-width: 0; padding: 8px 10px; }
  .wizard .segmented-btn { min-height: 44px; }
  .wizard .draft-check { min-height: 44px; }
  .wizard .wizard-offer-row > .btn-icon { width: 44px; height: 44px; order: 2; }
  .wizard-offer-hint { margin: 0; padding-left: 32px; }
  .wizard-toggle { margin: 14px 0 16px; }
}

@media (max-width: 900px) {
  /* Карточки-строки внутри обычной карточки начинаются на одной линии с её заголовком */
  .card:not(.card-flush) .table:not(.week-grid) tr { padding-left: 0; padding-right: 0; }
}
@media (max-width: 900px) {
  .table:not(.week-grid) tr.is-selected { background: var(--accent-bg); border-radius: var(--r-md); }
  .table:not(.week-grid) tr.is-selected td { background: transparent; }
}

/* «Тарифы»: спокойная плашка оплаченного текущего тарифа */
.plan-current-note { margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--ok-bg); color: var(--ok); font-size: 13.5px; font-weight: 500; text-align: center; }
.plan-cta .link-btn { align-self: center; }

/* ---------- Справка (#/help, public/panel/help.js) ---------- */
.topbar-help {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.topbar-help:hover { color: var(--accent); }

.help-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.help-card { position: relative; padding: 20px 22px; }
.help-card-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
.help-card-link { color: var(--ink); text-decoration: none; }
/* Вся карточка кликабельна через растянутую ссылку заголовка: один фокус-стоп на статью. */
.help-card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-xl); }
.help-card-link:focus-visible { outline: none; }
.help-card-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.help-card:hover .help-card-link { color: var(--accent); }
.help-card-summary { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

.help-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 8px; font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.help-back:hover { color: var(--accent); }

.help-article { max-width: 760px; font-size: 15px; line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; }
.help-article h1 { font-size: 26px; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 14px; }
.help-article h2 { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; margin: 28px 0 10px; }
.help-article h3 { font-size: 16px; margin: 20px 0 8px; }
.help-article p { margin: 0 0 12px; }
.help-article ul, .help-article ol { margin: 0 0 14px; padding-left: 22px; }
.help-article li { margin: 0 0 6px; }
.help-article a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.help-article code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); }

.help-contact { max-width: 760px; margin-top: 20px; }
.help-contact h2 { font-size: 17px; margin: 0 0 6px; }
.help-contact-text { margin: 0 0 14px; font-size: 14px; color: var(--ink-2); }
.help-contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.help-contact-mail { color: var(--accent); font-size: 14px; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .help-list { grid-template-columns: 1fr; gap: 12px; }
  .help-article h1 { font-size: 22px; }
  .help-contact-actions .btn, .help-contact-mail { min-height: 44px; display: inline-flex; align-items: center; }
  .help-card-link::after { border-radius: var(--r-lg); }
  .topbar-help { min-height: 44px; padding: 0 4px; }
}

/* ==========================================================================
   Фото позиции (153): миниатюра в таблице и блок «Фото» в форме
   ========================================================================== */

.res-thumb {
  width: 40px;
  height: 40px;
  flex: none;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.res-photo-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.res-photo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  flex: none;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.res-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-photo-empty { font-size: 12.5px; color: var(--ink-3); }
.res-photo-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.res-photo-caption { font-size: 12.5px; color: var(--ink-2); }
.res-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.res-photo-input { display: none; }

/* Файлы в знаниях помощника (Помощник → Знания → «Файлы») */
.kfile-input { display: none; }
.kfiles-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kfiles-meta .field-hint { flex: 1 1 260px; min-width: 0; }
.kfiles-preview { margin-top: 18px; }
.kfiles-warning { margin-top: 10px; padding: 8px 12px; border-radius: var(--r-md); background: var(--warn-bg); color: var(--warn); font-size: 13.5px; }
.kfiles-chunks { margin-top: 12px; }
.kfiles-chunk { padding: 6px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.kfiles-chunk + .kfiles-chunk { border-top: 1px solid var(--line); }
.kfiles-unsure { margin-left: 8px; }
.kfiles-preview .table-wrap { margin-top: 12px; }
.kfiles-preview .field-hint { margin-top: 8px; }

/* Свой бот (П35): Каналы → Telegram и Max */
.tbot { display: flex; flex-direction: column; gap: 12px; max-width: 980px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); min-width: 0; }
.tbot p { margin: 0; overflow-wrap: anywhere; }
.tbot-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tbot-title, .tbot-channel { margin: 0; }
.tbot-head .link-btn { color: var(--ink-2); }
.tbot-owner { display: flex; flex-direction: column; gap: 8px; }
.tbot-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.tbot-steps { margin: 0; padding-left: 20px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.tbot-form { max-width: 520px; min-width: 0; }
.tbot-form input { width: 100%; box-sizing: border-box; }
.tbot-status { font-size: 14px; line-height: 1.45; }
.tbot-ok { color: var(--ink); }
.tbot-name { font-weight: 600; }
/* Кабинет в очереди на удаление (задача 109): экран поверх панели с датой и отменой. */
.deletion-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--bg);
}
.deletion-screen .card { width: 100%; max-width: 520px; }

.tbot-card .form-actions { flex-wrap: wrap; }
@media (max-width: 480px) {
  .tbot-card { padding: 12px; }
  .tbot-card .btn { width: 100%; min-height: 44px; }
}

/* «Режим работы» в настройках (П31): неделя, особые дни, праздники РФ, недоступность позиции */
.sched-week-wrap, .sched-week, .sched-specials, .sched-block { min-width: 0; }
.sched-week { display: flex; flex-direction: column; }
.sched-day {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 16px; align-items: start;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.sched-day:first-child { border-top: 0; padding-top: 0; }
.sched-day-name { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; min-height: 40px; cursor: pointer; }
.sched-day-main { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.sched-day.is-off .sched-day-name { color: var(--ink-2); font-weight: 400; }
.sched-off { font-size: 13px; color: var(--ink-3); line-height: 40px; }
.sched-times, .unavail-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sched-times[hidden], .sched-breaks[hidden], .sched-off[hidden] { display: none; }
.sched-dash { color: var(--ink-3); }
input.sched-time { width: 96px; flex: none; text-align: center; }
.sched-breaks { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sched-break { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sched-break-label { font-size: 12.5px; color: var(--ink-2); min-width: 64px; }
.sched-block { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.sched-block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.sched-block-head > div:first-child { flex: 1 1 260px; min-width: 0; }
.sched-block-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.sched-table .cell-main input[type="checkbox"], .sched-table th input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; flex: none; }
.sched-table th .cell-main { font-weight: inherit; }
.sched-holidays { display: flex; flex-direction: column; margin-bottom: 12px; }
.sched-holiday { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.sched-holiday:first-child { border-top: 0; }
.sched-holiday-main { min-width: 0; flex: 1 1 200px; }
.sched-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sched-dates > * { min-width: 0; }
.sched-checklist { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); }
.sched-checklist[hidden] { display: none; }
.unavail-list { display: flex; flex-direction: column; gap: 6px; }
.unavail-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.unavail-text { min-width: 0; overflow-wrap: anywhere; }
.unavail-form input[type="date"] { flex: 1 1 130px; min-width: 0; }
.cal-busy { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.cal-busy .field-hint { margin: 0; }
@media (max-width: 900px) {
  .sched-day { grid-template-columns: 1fr; gap: 4px; }
  .sched-dates { grid-template-columns: 1fr; }
  .sched-block-tools { width: 100%; }
  .sched-block-tools .btn { flex: 1 1 auto; min-height: 44px; }
  .sched-holiday > .btn { flex: 1 1 100%; min-height: 44px; }
  input.sched-time { flex: 1 1 88px; width: auto; max-width: 140px; }
}
/* Режим работы: тап-цели 44px на узких экранах */
@media (max-width: 480px) {
  .sched-form .btn-sm, .sched-day-main .btn-sm,
  .sched-table [data-special-edit], .sched-table [data-special-delete],
  .sched-block > .btn-sm { min-height: 44px; }
}


/* Передача человеку из-за сбоя модели (Q-0257): бейдж причины и возраст в списке диалогов, строка на «Сегодня».
   Селектор с родителем — чтобы перебить фон .inbox-badge из inbox.css, который подключён позже. */
.inbox-row-badges .inbox-badge-provider { background: var(--warn-bg); color: var(--warn-ink); }
.inbox-row-badges .inbox-badge-age { font-variant-numeric: tabular-nums; }
.waiting-provider { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.waiting-provider-age { font-variant-numeric: tabular-nums; }

/* «Каналы» на узком экране (Q-0271): вкладки — лента с горизонтальной прокруткой, не вылезают за край и не ломают строку.
   Прокручивается сам .seg (на нём стоит затенение краёв edgeFade). */
.page-tabs { min-width: 0; }
.page-tabs .seg { max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
@media (max-width: 600px) {
  .page-tabs-scroll .seg { display: flex; width: 100%; scroll-snap-type: x proximity; }
  .page-tabs-scroll .seg-item { flex: 0 0 auto; min-height: 44px; scroll-snap-align: start; }
  /* Флажок «Представляться помощником» с подписью: зона касания 44px, подпись переносится */
  .introduce-toggle { min-height: 44px; align-items: center; }
}

/* Подсказка у блока «Смены» (Q-0266 п.3): почему смен нет или что будет, если их не задать */
.res-shifts-hint { margin: 0 0 12px; }

/* П129 (D-08): «Пробелы» и «Вопросы недели» — вопросы разделены линией, а не сплошным столбцом */
.gap-item { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.gap-item:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* П129 (D-05): тап-цели ≥44px на телефоне для мелких кнопок и сегментов; на десктопе размеры прежние */
@media (max-width: 480px) {
  .btn-sm, .seg-item, .segmented-btn { min-height: 44px; }
}

/* П192: подсказка у кнопки в живом превью виджета */
.wlp-teaser {
  max-width: 220px;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.wlp-teaser[hidden] { display: none; }
.wlp-teaser small { display: block; color: var(--ink-3); font-size: 11.5px; }
.wlp-stage.is-left .wlp-teaser { align-self: flex-start; }