/* Панель сотрудника. Палитра — та же, что у сайта (web/app.css, брендбук):
   числа продублированы здесь намеренно, потому что панель — отдельная страница
   с отдельной отдачей (nginx /admin/), и тянуть три тысячи строк гостевых
   стилей ради переменных значило бы нести с собой всю раскладку сайта. Шрифты —
   те же файлы с гостевого /assets/. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-cyrillic-wght.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-wght.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
/* Палитра — у платформы (platform.css): там и прежние имена (`--gold`, `--cream`…), и тёмная тема. */
* { box-sizing: border-box; }
/* Атрибут `hidden` прячет ВСЁ, чем бы оно ни рисовалось. Браузер прячет его
   своим правилом `display: none`, но любое наше правило с `display` (кнопки —
   `inline-block`, `label.check` и `.field` — `flex`) перебивает его, и
   «спрятанное» остаётся на экране. Так было 12.09.2026: с «Всем гостям» под
   выбором висела кнопка «Проверить номера», и нажатие на неё требовало ввести
   номер (владелец: «пишет какую-то ерунду, мол введите хоть 1 номер телефона»).
   Одно правило на всю панель вместо заплаток у каждого блока. */
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--page);
}
h1 { font-size: 24px; margin: 0 0 12px; font-weight: 600; }
h2 { font-size: 17px; margin: 22px 0 8px; font-weight: 600; }
h3 { font-size: 15px; margin: 0 0 4px; font-weight: 600; }
a { color: var(--gold); }
code { background: var(--cream); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
pre { white-space: pre-wrap; font-family: inherit; margin: 0; }

/* ── раскладка: сайдбар слева, содержимое справа ─────────────────────────── */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.side {
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
    overflow-y: auto;
}
/* До входа сайдбара нет, а сетка из двух колонок оставалась — и карточка
   входа ложилась в узкую колонку сайдбара у левого края (владелец 10.09.2026:
   «что это за панель входа?»). Без сайдбара содержимое занимает обе колонки. */
.side[hidden] + .main { grid-column: 1 / -1; }
/* На ПК меню — колонкой, как было: обёртка не мешает раскладке, кнопки ☰ нет. */

.menubtn{ display: none; }
/* Содержимое не распирает страницу (этап 32): широкая таблица листается внутри себя. */
.main { min-width: 0; }
.brand { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); }
.brand .logo { width: 120px; }
/* Имя заведения вместо знака — пока своего знака нет (27.09.2026). */

.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav a{
  display: block;
  padding: 7px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
}
.sidenav a:hover{ background: var(--cream); }
/* Белый на фирменном цвете — НЕ ТЕМА: это не оттенок бренда, а требование
   читаемости. Сочетание стережёт сохранение темы: белый на акценте обязан
   держать контраст 3 (`shushu_common.theme.palette.complaints`). */
.sidenav a.current { background: var(--gold); color: var(--on-accent); }

.who { font-weight: 600; padding: 4px 12px 8px; }
/* Без предела ширины: на широком экране редактор с двумя колонками обязан
   занять всё место, а не оставлять треть экрана пустой (владелец 10.09.2026:
   «сколько справа пустого места, нехорошо же»). Узкие карточки — вход,
   главная, состояние — ограничивает сам `.card`. */
.main { padding: 28px 32px; }
/* Телефон: сайдбар становится шапкой с разделами в строку, таблицы листаются
   по горизонтали, действия переносятся (владелец 10.09.2026: «адаптировать
   под мобильную версию»). */
@media (max-width: 900px) {
  /* Телефон (этап 32; владелец 14.09.2026: «адаптировать под мобильные устройства»):
     шапка «знак · раздел · ☰» липнет к верху, разделы выезжают списком под ней. */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: sticky; top: 0; z-index: 30; height: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 8px 12px; gap: 10px; flex-direction: row; flex-wrap: nowrap; align-items: center; }
  .brand .logo { width: 72px; }
  
  
  .menubtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 10px; border: 1.5px solid var(--gold); background: none; color: var(--gold); font-size: 20px; flex: 0 0 auto; }
  
  
  .sidenav { flex-direction: column; gap: 2px; }
  .sidenav a{ padding: 11px 12px; font-size: 16px; }
  
  .who { padding: 4px 12px; font-size: 14px; }
  .main { padding: 12px; }
  .card { padding: 16px 14px; min-width: 0; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .tabs a { white-space: nowrap; }
  /* Шапка не вытягивается на коротких страницах: строки сетки — по содержимому. */
  .shell { grid-template-rows: auto 1fr; }
  /* Таблица — стопкой карточек: строка — карточка, у значения подпись колонки (её ставит
     app.js). Листать вбок на телефоне неудобно, а кнопки в конце строки не видны вовсе. */
  table.grid { display: block; width: 100%; white-space: normal; }
  table.grid thead { display: none; }
  table.grid tbody, table.grid tr { display: block; }
  table.grid tr { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; background: var(--card); }
  table.grid td { display: block; border: 0; padding: 3px 0; }
  table.grid td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); }
  table.grid td:first-child[data-label]::before { display: none; }
  table.grid td input, table.grid td select { width: 100%; }
  .actions input.datetext, .actions input[type="number"] { width: 100%; }
  .actions button, .actions .button { width: 100%; }
  .row > input, .row > select { flex-basis: 100%; }
  .editor-preview { position: static; max-height: none; }
}

/* Предпросмотры чужих приложений (.tg*, .notif-card) — своими токенами (`--tg-*`, platform.css): Telegram наших
   цветов не знает, поэтому это его светлая или тёмная тема, а не тема панели.

   ── карточки, формы ──────────────────────────────────────────────── */
/* Карточки — во всю ширину области (владелец 10.09.2026: «сколько расстояния
   до правого края свободного»); узкая — только форма входа. */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
}
.card.login { max-width: 560px; }
.login { margin: 12vh auto 0; width: 100%; }
@media (max-width: 900px) { .login { margin-top: 4vh; } }
.lead { color: var(--muted); margin: 0 0 16px; }
.fineprint { font-size: 13px; color: var(--muted); }
.fineprint.gone { color: var(--gold2); }
.muted { color: var(--muted); }
.good { color: var(--ok); }
.bad { color: var(--err); }
/* Жёлтая строка (сотрудники по клиентам 2б-2): не сбой, а то, что стоит поправить. */
.warn { color: var(--warn); }
.draft { color: var(--gold); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.back { display: inline-block; margin-bottom: 8px; font-size: 14px; }
.field { display: block; margin: 10px 0; }
.field-name { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
input, select, textarea {
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  margin: 4px 0;
}
input[type="file"] { border: 0; padding: 0; background: none; }
input[type="number"] { width: auto; }
textarea { resize: vertical; }
button, .button {
  display: inline-block;
  padding: 11px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--on-accent);
  background: linear-gradient(110deg, var(--gold) 25%, var(--shine) 48%, var(--gold2) 65%, var(--gold) 85%);
  background-size: 220% 100%;
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--dark) 20%, transparent);
  cursor: pointer;
  text-decoration: none;
  margin: 6px 6px 6px 0;
}
button:disabled { opacity: 0.5; cursor: default; }
.small { padding: 8px 14px; font-size: 14px; }
.ghost { background: none; border: 1.5px solid var(--gold); color: var(--gold); box-shadow: none; }
.danger { background: var(--err); }
.x { background: none; border: 0; box-shadow: none; color: var(--muted); padding: 2px 6px; margin: 0; font-size: 14px; }
.x:hover { color: var(--ink); }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.row > input, .row > select { width: auto; flex: 1 1 160px; }
.segs { display: inline-flex; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; margin: 6px 0; }
.seg { background: none; border: 0; box-shadow: none; color: var(--muted); margin: 0; border-radius: 0; padding: 8px 12px; font-size: 14px; }
.seg.chosen { background: var(--gold); color: var(--on-accent); }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 16px; }
.tabs a { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); text-decoration: none; color: var(--ink); background: var(--card); }
.tabs a.chosen { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
/* Карточка настройки — во весь ряд во всех вкладках, как карточки сообщений (этап 31):
   слева что это и пояснения, справа значение и правка. */
.settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* Поле текста — широкое, образец справа — по ширине пузыря (владелец 13.09.2026:
   «виджет для ввода текста расширить»). Карточка сообщения — во всю строку, а
   не в полстроки, как прочие настройки: в половине места поле текста рядом с
   пузырём сжималось до слова в строке. */

.msg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 20px; margin: 8px 0; }
.msg-text textarea { width: 100%; min-height: 120px; }
/* Нижняя строка карточки: «Журнал правок» слева, кнопки текста справа. */

.msg-preview { display: flex; flex-direction: column; gap: 6px; }
.tg-bubble { max-width: 360px; background: var(--tg-bubble); color: var(--ink); border-radius: 12px 12px 12px 4px; padding: 8px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.tg-bubble-from { font-size: 13px; font-weight: 600; color: var(--gold); margin-bottom: 2px; }
.tg-bubble-text { white-space: pre-wrap; font-size: 14px; line-height: 1.4; }

@media (max-width: 800px) { .msg-grid { grid-template-columns: 1fr; } }
.history { padding-left: 18px; margin: 6px 0; font-size: 14px; }
.facts div { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.facts dt { flex: 1; color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
table.grid { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
table.grid th { text-align: left; color: var(--muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--border); }
table.grid td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.clickable tr:hover td { background: var(--cream); cursor: pointer; }
tr.disabled td { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--cream); border-radius: 999px; padding: 6px 10px; font-size: 14px; }
/* Поле даты и времени отправки (этап 28): поле, строка «= 01.12.2026, через 30 дней»,
   быстрые кнопки-«фишки» под ним. Фишка — кнопка, но тихая: главная кнопка экрана
   одна, и десяток золотых рядом с полем даты её бы заглушил. */
.datefield, .sendtime { display: flex; flex-direction: column; gap: 6px; }
.datefield .row, .send-later .row { align-items: center; gap: 10px; flex-wrap: wrap; }
.date-readout { color: var(--muted); }
/* Поле даты дд.мм.гггг и кнопка календаря рядом; сам календарь браузера спрятан
   и открывается кнопкой. Правила — через .dateinput: иначе `.actions button`
   растянул бы кнопку на телефоне во всю строку. */
.dateinput { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.datetext { width: 9.5em; font-variant-numeric: tabular-nums; }
.datetext[aria-invalid] { border-color: var(--err); }
.dateinput .calbtn { align-self: stretch; width: auto; min-height: 0; margin: 4px 0; padding: 0 9px; display: inline-flex; align-items: center; color: var(--muted); background: none; border: 1px solid var(--border); border-radius: 8px; box-shadow: none; cursor: pointer; }
.dateinput .datepicker { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
button.chip {
  background: var(--cream); color: var(--gold); border: 1px solid var(--border);
  box-shadow: none; padding: 4px 10px; font-size: 13px; font-weight: 500; margin: 0; border-radius: 999px;
}
button.chip:hover:not(:disabled) { border-color: var(--gold); }
.send-later { display: flex; flex-direction: column; gap: 6px; padding-left: 22px; }
.invite code { display: inline-block; margin: 6px 0; }

.blocks { display: flex; flex-direction: column; gap: 10px; }
.block { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--card); }
.block .tools { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.block .kind { flex: 1; font-size: 13px; color: var(--muted); }
.addbar { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0; }
.thumb { max-width: 160px; border-radius: 8px; display: block; margin-bottom: 6px; }
.tg { background: var(--tg-page); border-radius: 14px; padding: 14px 16px; font-size: 15px; }
.tgbuttons { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tgbtn { background: var(--tg-button); border-radius: 8px; padding: 8px; text-align: center; color: var(--tg-link); }
/* Правая колонка липнет к верху, но НЕ выше окна: предпросмотр с фото и
   видео длиннее экрана, и прилипшая колонка без своей прокрутки обрезалась бы
   снизу (владелец 10.09.2026: «некорректно размер правой части ставится»). */
.editor-preview { position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow: auto; padding-right: 4px; }
.editor-preview h2:first-child { margin-top: 0; }
/* Ряд кнопок — без своего фона (этап 31; владелец 14.09.2026: «какая-то полоса странная
   под кнопкой сохранить»): плашка под одной кнопкой читалась как поломка. */
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
.actions button, .actions .button { margin: 0; }
.actions input.datetext, .actions input[type="number"] { margin: 0; width: 150px; }
.status { margin: 0 0 6px; font-weight: 600; }
.delivery { margin: 0 0 12px; font-size: 14px; }
.kindnote { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.tg-photos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tg-photos img { max-width: 160px; max-height: 120px; border-radius: 8px; object-fit: cover; }
.tg-att { font-size: 14px; margin: 4px 0; }
.tg-text { white-space: pre-wrap; word-wrap: break-word; }
.tg-text a { color: var(--tg-link); }
.tg-text code { background: var(--tg-code); }

.pub-poll-q { margin: 0 0 10px; font-weight: 600; }

.pollresults { margin: 0 0 12px; font-size: 14px; }
.pollresults:empty { display: none; }
.pollrow { margin: 6px 0; }
.pollrow-label { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 3px; }
.pollbar { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.pollbar > i { display: block; height: 100%; background: var(--gold); border-radius: 4px; }
.block .row { display: flex; gap: 6px; }
.block .row select { flex: 1; min-width: 0; }
label.check { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 6px 0; }
label.check input { width: auto; margin: 0; }

/* ── всплывашка ─────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  max-width: 520px;
  width: calc(100% - 32px);
  padding: 12px 16px;
  /* Обратными цветами платформы (как в platform.css): прежние «тёмный» и «кремовый» в тёмной теме сходились — тёмный
     текст на тёмном (аудит части 9). */
  background: var(--ink);
  color: var(--panel);
  border: 1px solid var(--v-mid);
  border-radius: 12px;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--dark) 35%, transparent);
  font-size: 14px;
  z-index: 10;
}
.toast-error { border-color: var(--err); }

/* ── сегменты: правила отбора полями по перечню ─────────────────────────── */
.rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; margin: 10px 0; }

label.check.channel { align-items: flex-start; }
label.check.channel .fineprint { display: block; margin: 0; }

.guest .facts dd { font-weight: 500; }
.pointsbox .row input { margin: 0; }
.pointsbox .row input[type="number"] { width: 120px; }
.pointsbox .row input:not([type]) { flex: 1; min-width: 200px; }
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: var(--cream); }
.journal-more td { background: var(--cream); padding: 10px 14px; }
.journal-details .facts.details div { padding: 4px 0; }
.journal-details .facts.details dd { font-weight: 500; word-break: break-all; }
.journal-details .button { display: inline-block; margin-top: 8px; }
.counter { font-weight: 400; color: var(--muted); font-size: 12px; }
.counter.bad { color: var(--err); font-weight: 600; }
.linkpick select, .linkpick input { margin: 0; flex: 1; min-width: 0; }
.notif-card { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--panel); max-width: 360px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--dark) 12%, transparent); }
.notif-card .notif-app { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.notif-card b { display: block; margin-bottom: 4px; }
.notif-card p { margin: 0 0 6px; line-height: 1.4; }

/* Редактор вариантов строками и вопросы опроса-страницы (этап 24). */
.optrow { display: flex; align-items: center; gap: 2px; margin: 4px 0; }
.optrow input { flex: 1; min-width: 0; margin: 0; }
.addopt { margin: 4px 0 0; }
.question .qhead { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.question .qhead select { width: auto; margin: 0; }
.surveyresults { margin: 0 0 12px; font-size: 14px; }
.surveyresults:empty { display: none; }
.surveyresults .texts { margin: 4px 0 10px 0; padding: 0; list-style: none; }
.surveyresults .texts li { padding: 4px 8px; margin: 3px 0; border-left: 3px solid var(--border); }
.surveyresults .texts .when { color: var(--muted); font-size: 12px; margin-left: 6px; }

/* Документы с редакциями (этап 24): текст и черновой просмотр рядом. */

.previewbox { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; max-height: 480px; overflow: auto; background: var(--card); font-size: 14px; }
.legalpreview h2, .legalpreview h3, .legalpreview h4 { margin: 10px 0 6px; }
.legalpreview blockquote { margin: 6px 0; padding: 4px 10px; border-left: 3px solid var(--gold); color: var(--muted); }

/* Окно «С уведомлением» внутри новости и опроса (этап 25). */
.notif-box { border: 1px dashed var(--border); border-radius: 12px; padding: 8px 12px; margin: 10px 0; }
.notif-toggle { margin: 0; }
/* «С уведомлением» — одной строкой; пояснение переносится рядом (в узкой колонке купона подпись ломалась). */
.notif-toggle b { flex: none; white-space: nowrap; }
.notif-window { margin-top: 8px; }
/* Баллы к уведомлению (этап 27): секция внутри окна — пунктир по-своему, чтобы
   сотрудник видел, что это деньги, а не текст. */
.points-box { border: 1px dashed var(--gold); border-radius: 10px; padding: 8px 12px; margin: 10px 0 0; }
.points-window { margin-top: 6px; }
/* Пробная отправка (этап 28): свой блок внизу окна, исход — строкой на канал. */
.trial-box { border: 1px dashed var(--border); border-radius: 10px; padding: 8px 12px; margin: 10px 0 0; background: color-mix(in srgb, var(--gold) 6%, transparent); }
.trial-box .row { align-items: center; gap: 10px; flex-wrap: wrap; }
.trial-box input[type="tel"] { max-width: 220px; }
.trial-lines { margin: 4px 0 0; padding-left: 18px; }
.trial-lines li { margin: 2px 0; }

/* Купон (этап 27): предпросмотр карточки, как в кабинете гостя. */
.coupon-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; text-align: center; }
.coupon-preview p { margin: 0; }
.coupon-preview-qr { width: 120px; height: 120px; display: grid; place-items: center; border: 2px dashed var(--border); border-radius: 8px; font-size: 12px; color: var(--muted); }
.coupon-preview-number { font-size: 20px; letter-spacing: 0.08em; font-weight: 700; }

/* ── сегмент (этап 28): фраза, дерево условий, живой счёт, первые гости ─── */
.segment-phrase { font-size: 18px; line-height: 1.45; margin: 12px 0 8px; padding: 12px 14px; border-radius: 12px; background: var(--cream); }
.tree { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 14px; }
.tree-head { align-items: center; gap: 8px; }
.tree .cond { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.tree .cond-phrase { flex: 1 1 200px; }
.tree .rule-number { width: 110px; }
.tree .group { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px dashed var(--gold); border-radius: 12px; margin-left: 12px; }
.segment-count .status { font-size: 16px; }
.sample-list { columns: 2; column-gap: 24px; padding-left: 18px; margin: 6px 0 0; }
.sample-list li { break-inside: avoid; margin: 2px 0; }
@media (max-width: 800px) { .sample-list { columns: 1; } }

/* ── программы и категории (этап 28, шаг 5) ─────────────────────────────── */
.new-row td { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.join-box { padding-left: 22px; border-left: 2px solid var(--border); margin: 6px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.programme-editor h2 { margin-top: 18px; }

/* История операций в карточке гостя (владелец 13.09.2026): фильтры строкой над
   таблицей, заголовки «Когда» и «Сумма» — кнопки сортировки. */
.historyfilters { align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.historyfilters select { width: auto; flex: 0 0 auto; margin: 0; }
.historyfilters .period { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.tablewrap { overflow-x: auto; }
.history-table td { vertical-align: top; }
.history-table .fineprint { margin: 2px 0 0; }
th button.sorthead { width: auto; min-height: 0; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }

/* Сообщение после опроса (этап 29): поля одно под другим, образец — пузырём. */
.after-message { display: flex; flex-direction: column; gap: 6px; }
.after-message .row { gap: 14px; flex-wrap: wrap; }
.after-preview { margin-top: 4px; }
/* Срок баллов опроса — число дней, а не строка текста. */
.lifetime-box .row { align-items: center; gap: 10px; }
.lifetime-box input.lifetime-days { width: 8em; flex: 0 0 auto; }

/* Как программа выглядит у гостя (этап 29): имя и знак в одну строку, образец чипом. */

.face-preview { display: inline-block; }

/* Условия программы там, где их здесь не правят (этап 31): текстом, а не заблокированным
   полем; кнопка «Изменить в «Новых условиях»» — обводкой, заметная, но не громкая. */
.term-value { font-weight: 600; }

.terms-change { margin-top: 4px; }

/* Связка между условиями сегмента (этап 31): «И» / «ИЛИ» словом между строками. */
.join { display: inline-block; align-self: flex-start; margin: 2px 0 2px 14px; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
.join-all { background: var(--cream); color: var(--ink); }
.join-any { background: color-mix(in srgb, var(--gold) 18%, var(--panel)); color: var(--gold); }
.segment-summary { margin: 14px 0 6px; padding: 10px 14px; border-left: 3px solid var(--gold); background: var(--card); border-radius: 8px; }
.segment-summary .segment-phrase { margin: 0; }
.min-age { gap: 8px; align-items: center; margin-top: 6px; }
.min-age input { width: 80px; margin: 0; }

/* Мёртвые письма (этап 31). */

.letters { margin-top: 18px; }
.letter-actions { white-space: nowrap; }
.letter-actions .button, .letter-actions button { margin: 0 6px 0 0; }
.letter-reason { font-size: 13px; color: var(--muted); max-width: 420px; }
.dead-summary { font-weight: 600; }

/* Условие, которое сейчас не действует (этап 32): серым и без цифры. */
.term-row-off td { color: var(--muted); }
.term-row-off b { color: var(--muted); }
.term-value.term-off { font-weight: 400; font-style: italic; color: var(--muted); }

/* Объявление пакета «Новые условия» (этап 32): поля слева, «как увидит Гость» справа. */
.announcement-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 20px; align-items: start; }
@media (max-width: 900px) { .announcement-grid { grid-template-columns: 1fr; } }
.announcement-text { width: 100%; }
.announcement-preview b { display: block; margin-bottom: 6px; }
.announcement-preview p { margin: 0 0 8px; }
/* Условия программы в «Новых условиях» (дополнение этапа 32): что поменяется и текст целиком. */
.offer-full, .offer-words { margin-top: 10px; }
.offer-full summary, .offer-words summary { cursor: pointer; color: var(--muted); }
.offer-full .previewbox, .offer-now .previewbox { margin-top: 8px; }
.offer-now { margin-top: 10px; }
.offer-now summary { cursor: pointer; color: var(--muted); }
/* Поменявшееся в условиях (этап 33) — подсветкой, как маркером по бумаге. */
.legalpreview mark { background: color-mix(in srgb, var(--gold) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.terms-when { margin: 6px 0 14px; }
.offer-complaint { color: var(--err); font-weight: 600; }
.announcement-sent { margin: 12px 0; max-width: 520px; }

/* ── экран «Оформление» (18.09.2026) ─────────────────────────────────────── */
/* Цвета здесь — только переменные: экран, который сам покрашен числом, врал бы
   о том, что показывает. Предпросмотр красится переменными НА ОБЁРТКЕ: внутри
   обычные классы панели, поэтому вторая вёрстка не нужна. */
.colourrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.colourrow input[type='color'] {
  flex: 0 0 auto;
  width: 46px;
  height: 34px;
  padding: 2px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
}
.colourrow .colourwords { flex: 1 1 auto; min-width: 0; }
.colourrow .colourwords b { display: block; font-size: 14px; font-weight: 600; }
.colourrow .hex { flex: 0 0 8.5em; margin: 0; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.themeswitch { align-items: flex-start; gap: 10px; }
.themeswitch b { display: block; font-size: 14px; }
.themenotes p { margin: 4px 0; font-size: 14px; }
/* Вкладки частей суток и часы границ (21.09.2026): утро, день и вечер правятся теми же
   полями, что и дневная палитра, — владелец: «почему он идёт отдельно». */
.hours { align-items: flex-end; gap: 14px; margin: 10px 0 2px; }
.hourfield { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.hourfield input.hour { width: 5em; margin: 0; text-align: center; font-variant-numeric: tabular-nums; }

/* Знак и значок вкладки: рядом с полем видно то, что загружено, и в том размере, в каком
   это увидят. Значок нарочно маленький — на вкладке он такой и есть. */
.picture { margin: 10px 0 14px; }
.picture > b { display: block; font-size: 14px; }
.picture .row { align-items: center; gap: 10px; }
.picture .logoshot { height: 38px; width: auto; max-width: 180px; }
.picture .iconshot { width: 24px; height: 24px; object-fit: contain; }

/* Рамка предпросмотра: внутри живут стили САЙТА, поэтому панели её красить нечем и незачем.
   Высота задана числом — страница в ней показывается куском, а не целиком. */
.themeframe {
  display: block;
  width: 100%;
  height: 680px;
  border: 0;
  background: var(--panel);
}
.extended .colourrow .hex { flex: 0 0 8.5em; }

/* Меню группами (23.09.2026): подпись группы — тихая, чтобы не спорить с разделами. */

/* Главная: цифры карточками, «требует внимания» — списком со ссылками. */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 16px 0; }
.figure { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--panel); }
.figure b { display: block; font-size: 28px; line-height: 1.1; }
.figure span { color: var(--muted); font-size: 14px; }
.attention { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.attention a { display: block; padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: 10px; text-decoration: none; color: var(--ink); }

/* Строки сообщений — карточками. */
.message-row { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.message-row a { font-weight: 600; }
.message-row .when { color: var(--muted); font-size: 14px; }

/* Глазик у скрытых полей (27.09.2026): кнопка внутри поля справа; держите — видно введённое. */
.secret { position: relative; display: block; }
.secret > input { width: 100%; padding-right: 42px; box-sizing: border-box; }
.secret > button.eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; margin: 0; padding: 5px; border: none; border-radius: 8px;
  background: none; box-shadow: none; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.secret > button.eye:hover, .secret > button.eye[aria-pressed="true"] { color: var(--ink); background: var(--card); }
.secret > button.eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* «Точки» (Р72): часы работы по дням. День — строка «Пн · вид · промежутки»; на телефоне — стопкой. */

.places .hours-now { font-weight: 600; }
.hours-weekday { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--border); }
.hours-word { font-weight: 600; padding-top: 12px; }
.hours-day .segs { flex-wrap: wrap; }
.hours-pair select.hours-time { width: auto; flex: 0 0 auto; }
.hours-date { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }

/* Кухня точки (Р284, ordering.js): готовка и пример на сейчас — две строки вплотную под полем. */
.prow .ctl p.kitchen-line { margin: 0; }

/* Часы приёма заказов по дням (Р244, вид — Р257, Р259; order_hours.js): неделя таблицей в своей рамке — узко
   листается вбок она, а не страница. Клетка в две строки: время и откуда оно. Не заданная — серым, пунктиром («10:00–
   23:00 · как в пн»), нажали — своё время полем и «↺» вернуть. Над таблицей — «Сейчас …», под ней — «Как увидит Гость». */
.prow.oh-week { grid-template-columns: minmax(0, 1fr); }
.oh-scroll { overflow-x: auto; max-width: 100%; container-type: inline-size; }
.oh-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.oh-table th, .oh-table td { padding: 6px 5px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
.oh-table tbody th, .oh-table td.oh-hall { padding-top: 11px; }
.oh-table thead th { color: var(--ink); font-weight: 600; font-size: 12.5px; white-space: normal; vertical-align: bottom; }
.oh-table thead tr.oh-group th[colspan] { border-bottom: 0; padding-bottom: 0; }
.oh-table thead tr.oh-sub th { color: var(--muted); font-weight: 500; }
.oh-box { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.oh-cell { display: inline-flex; gap: 4px; align-items: center; }
.prow .ctl .oh-table input.oh-time { width: 58px; max-width: 58px; margin: 0; padding: 4px 6px; font-variant-numeric: tabular-nums; }
/* Р275 (1): «до» курьеров шире — пустое значит «пока не развезут», это и видно; к скольки развезут — в «i» рядом. */
.prow .ctl .oh-table input.oh-time.oh-open { width: 124px; max-width: 124px; }
.oh-table input.oh-open::placeholder { font-size: 12px; }
/* И400: строка-следствие под днём — во всю ширину таблицы, мелким; черта — под ней, а не между днём и ею. Узко таблица
   листается в рамке, а строка — шириной рамки и у её левого края: читается без прокрутки вбок. На ПК — одной линией,
   куски через « · » не рвутся; узко — мельче и переносится между словами (время от своего слова не отрывается). */
.oh-table tbody tr[data-day] > th, .oh-table tbody tr[data-day] > td { border-bottom: 0; }
.oh-table tr.oh-follow td { padding: 0 5px 9px; white-space: normal; }
.oh-follow-text { position: sticky; left: 5px; width: calc(100cqw - 10px); color: var(--muted); font-size: 12px; line-height: 1.4; }
.oh-part, .oh-nb { white-space: nowrap; }
@container (max-width: 520px) {
  .oh-table tr.oh-follow td { padding-inline: 0; }
  .oh-follow-text { left: 0; width: 100cqw; padding-left: 5px; font-size: 11px; }
  .oh-part { white-space: normal; }
}
.oh-as, .oh-since { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: 0; padding: 4px 8px; border: 1px dashed var(--border); border-radius: 6px; background: transparent; box-shadow: none; color: var(--muted); font-size: 14px; text-align: left; line-height: 1.25; }
.oh-since { border-color: transparent; padding-inline: 0; }
.oh-at { font-variant-numeric: tabular-nums; }
.oh-from { font-size: 12px; }
.oh-back { margin: 0; padding: 0 2px; border: 0; background: transparent; box-shadow: none; color: var(--muted); font-size: 12px; min-height: 0; }
.oh-back:hover, .oh-as:hover { color: var(--ink); }
.oh-now { margin: 0 0 8px; font-size: 14px; line-height: 1.45; }
.oh-guest { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; line-height: 1.45; }
.oh-guest ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.oh-guest li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; }
.oh-guest time { grid-row: span 2; font-weight: 600; font-variant-numeric: tabular-nums; }
.oh-guest span { color: var(--muted); }
.oh-note { margin: 4px 0 0; font-size: 12.5px; }
.oh-foot { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; }

/* Адрес для Гостей (владелец 06.10.2026): заголовок — как у места на карте; длинный адрес из пульта переносится. */

@media (max-width: 520px) { .hours-weekday { grid-template-columns: 1fr; gap: 2px; } .hours-word { padding-top: 0; } }

/* ── Главная сайта (новая витрина, часть 4): первый экран и баннеры ─────────
   Карточка баннера — как у Гостя в карусели: картинка или тёмная плита цвета темы, слова, срок;
   справа (на телефоне — снизу) кнопки порядка и правки. Окно баннера — родное `<dialog>` поверх
   экрана, не шире окна телефона. */
.sitehome .segs, .sitehome-dialog .segs { flex-wrap: wrap; }
.sitehome-said { margin: 4px 0 0; font-size: 14px; }
.sitehome-file .row { align-items: flex-start; }
/* Поле файла — по себе, а не во всю строку: «× убрать» стоит рядом с ним, а не у края карточки. */
.sitehome .picture .row > input[type="file"], .sitehome-dialog .picture .row > input[type="file"] { flex: 0 1 auto; width: auto; max-width: 100%; }
.sitehome-video { width: 240px; max-width: 100%; border-radius: 10px; background: var(--dark); }
.sitehome-shot { width: 160px; max-width: 100%; height: auto; border-radius: 10px; }
.sitehome-words { max-width: 760px; }
/* Значок Яндекса в панели (Р173) — окно своего размера, как у Гостей: не растягивается и не сжимается. */
.sitehome-badge-box { margin: 6px 0; }
.sitehome-badge { display: block; flex: none; border: 0; border-radius: 6px; background: transparent; }
.sitehome-banners { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.sitehome-banner {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}
.sitehome-banner.complained { border-color: var(--err); box-shadow: 0 0 0 2px color-mix(in srgb, var(--err) 25%, transparent); }
.sitehome-thumb { width: 120px; height: 80px; object-fit: cover; border-radius: 10px; display: block; }
/* Баннер без картинки — тёмная карточка, как у Гостя: цвета постоянные, в обеих темах одни (аудит части 9). */
.sitehome-thumb.dark { display: flex; align-items: flex-end; padding: 8px; background: var(--navy); color: var(--on-navy); font-size: 12px; font-weight: 600; }
.sitehome-banner-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sitehome-banner-title, .sitehome-where { overflow-wrap: anywhere; }
.sitehome-mark { color: var(--err); font-weight: 600; font-size: 13px; }
.sitehome-banner-tools { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.sitehome-banner-tools button, .sitehome-adders button { margin: 0; }
.sitehome-adders { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 640px) {
  .sitehome-banner { grid-template-columns: 88px minmax(0, 1fr); }
  .sitehome-thumb { width: 88px; height: 60px; }
  .sitehome-banner-tools { grid-column: 1 / -1; justify-content: flex-start; }
}
.sitehome-dialog {
  width: min(640px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  color: var(--ink);
}
.sitehome-dialog::backdrop { background: color-mix(in srgb, var(--dark) 45%, transparent); }
.sitehome-dialog h2 { margin-top: 0; }
.sitehome-dates { display: flex; flex-wrap: wrap; gap: 0 16px; }
.sitehome-dates .field { flex: 1 1 220px; min-width: 0; margin: 6px 0 0; }
.sitehome-news { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.sitehome-news label.check { align-items: flex-start; }
.sitehome-news label.check input { margin-top: 4px; }

/* ── Акция (новая витрина, часть 5а): обложка, акция iiko, карточка как на сайте ─────────────
   Карточка предпросмотра повторяет карточку списка «Акции» сайта: фото 16:10 → плашка срока →
   заголовок → выдержка. Пометки (прошла, скрыта iiko) — цветом ошибки, как пометки баннеров. */
.promo-cover { width: 160px; max-width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; display: block; }
.vacancy-cover { width: auto; max-width: 240px; max-height: 200px; aspect-ratio: auto; object-fit: contain; background: var(--cream); }
.promo-iiko .row { justify-content: space-between; margin: 0; }
.promo-iiko .row button { margin: 0; }
.promo-campaigns { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.promo-campaigns label.check { align-items: flex-start; }
.promo-campaigns label.check input { margin-top: 4px; }
.promo-campaigns label.check > span { min-width: 0; overflow-wrap: anywhere; }
.promo-on { color: var(--ok); font-weight: 600; font-size: 13px; }
.promo-off { color: var(--err); font-weight: 600; font-size: 13px; }
.promo-term { margin: 6px 0 0; font-weight: 600; }
.promo-mark { display: block; color: var(--err); font-weight: 600; font-size: 13px; }
.promo-card { max-width: 360px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--card); }
.promo-card-cover { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.promo-card-cover.empty { display: flex; align-items: center; justify-content: center; background: var(--cream); color: var(--muted); font-size: 14px; }
.promo-card-words { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.promo-pill { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--cream); color: var(--ink); font-size: 12px; font-weight: 600; }
.promo-card-title { font-size: 16px; overflow-wrap: anywhere; }
.promo-card-excerpt { margin: 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }

/* ── Вакансия (новая витрина, часть 5б): зарплата «от–до», списки строками, строка как на сайте ──────
   Строка предпросмотра повторяет строку списка «Вакансии» сайта: название, место, график — слева, оплата —
   справа жирно и без переноса; на телефоне оплата — под строкой. */
.vacancy-salary { display: flex; flex-wrap: wrap; gap: 0 16px; }
.vacancy-salary label { display: flex; align-items: center; gap: 8px; flex: 1 1 180px; min-width: 0; }
.vacancy-salary input { flex: 1 1 auto; }
.vacancy-lines { display: flex; flex-direction: column; gap: 2px; }
.vacancy-line-tools { display: flex; align-items: center; gap: 2px; }
.vacancy-line-tools input { flex: 1 1 auto; margin: 2px 0; }
.vacancy-line .counter { display: block; }
.vacancy-list > button { margin: 6px 0 0; }
.vacancy-row { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; max-width: 560px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.vacancy-row-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vacancy-row-title { font-size: 16px; overflow-wrap: anywhere; }
.vacancy-row-place, .vacancy-row-schedule { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.vacancy-row-pay { white-space: nowrap; }
@media (max-width: 640px) {
  .vacancy-row { flex-direction: column; gap: 4px; }
  .vacancy-row-pay { white-space: normal; }
}

/* «Журнал» (часть 7): строка о скрытой части ленты. */
.journal-hidden { display: grid; gap: 4px; padding: 10px 14px; border-radius: var(--r-md); background: var(--warn-bg); }
.journal-hidden ul { margin: 0; padding-left: 18px; }

/* «Состояние» (часть 7): области карточками в две колонки, узко — одна. */
.health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 18px; align-items: start; }
.health .facts dd { overflow-wrap: anywhere; }

/* «Роли и права» (часть 7): таблица «право × роль». */
table.roles-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
table.roles-table th { padding: 8px 6px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 500; text-align: left; }
table.roles-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); }
.roles-table td.center, .roles-table th.center { text-align: center; }
.roles-swipe { display: none; margin: 6px 0 0; }
@media (max-width: 600px) { .roles-swipe { display: block; } }
.roles-notes { margin: 6px 0; padding-left: 18px; display: grid; gap: 6px; color: var(--muted); }

/* «Сотрудники» (часть 7): список слева, карточка справа — шире, в ней таблица прав; узко — по очереди. */
.people-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 18px; align-items: start; }
.people-split > * { min-width: 0; }
@media (max-width: 1180px) {
  .people-split { grid-template-columns: minmax(0, 1fr); }
  .people-split[data-open=card] > .pane:first-child { display: none; }
  .people-split[data-open=list] > .people-none { display: none; }
}
.people-list tr[aria-current=true] td { background: var(--cream); }
/* «Команда → Курьеры» (часть 3а-1; макет views-couriers.js, Р299–Р300): список слева, карточка курьера справа; на ПК
   список вровень с карточкой (её высоту он не раздувает — `contain: size`) и прокручивается внутри, шапка таблицы стоит;
   узко — одной колонкой, как у «Сотрудников». */
.couriers-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 18px; align-items: stretch; }
.couriers-split > * { min-width: 0; }
.couriers-split > .pane:first-child { contain: size; min-height: 320px; display: flex; flex-direction: column; }
.couriers-split > .pane:first-child > .pane-b { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; }
.couriers-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.couriers-list th { position: sticky; top: 0; z-index: 1; background: var(--panel); }
@media (max-width: 1180px) {
  .couriers-split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .couriers-split > .pane:first-child { contain: none; min-height: 0; }
}
.couriers-list tr[aria-current=true] td { background: var(--cream); }
.couriers-name { font-weight: 600; overflow-wrap: anywhere; display: block; }
.couriers-phone { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; display: block; }
.couriers-nophone, .couriers-hidden { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12.5px; background: var(--warn-bg); color: var(--warn); }
.couriers-points { display: grid; gap: 3px; justify-items: start; }
.couriers-points > span, .couriers-list td:nth-child(3) { white-space: nowrap; }
.couriers-mode { padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--soft); color: var(--muted); }
.couriers-mode.is-own { color: var(--accent); }
.couriers-number { width: 190px; max-width: 100%; }
/* «Назначать курьера — за [60] мин до «готов к»» (Р351-1): число между словами; узко — слова переносятся, поле не
   вылезает. */
.couriers-assign { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; justify-self: start; max-width: 100%; }
.couriers-number.couriers-minutes { width: 96px; }
/* Правила точки для курьеров («Кухня и курьеры», Р391): минуты — узким полем с «мин» рядом */
.point-minutes { width: 96px; max-width: 100%; }
.point-minutes-line { display: inline-flex; align-items: center; gap: 8px; }
.couriers-pick { display: grid; gap: 4px; justify-items: start; }
.couriers-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.couriers-link code { overflow-wrap: anywhere; font-size: 13px; }
/* Подложку код рисует себе сам (светлая «бумага» в любой теме) — сканер читает его и в тёмной панели. */
.couriers-qr { width: 132px; height: 132px; margin-top: 8px; border-radius: 8px; }
.couriers-head { margin-top: 6px; }
.couriers-synced { font-size: 13px; }
.couriers-synced.bad { color: var(--err); }
.readonly-note.couriers-warn { background: var(--warn-bg); color: var(--ink); }
/* Правки нескольких курьеров (Р324-1, И603; макет views-couriers.js, сцены r324): у изменённого — «изменено» и серым
   курсивом, каким станет, было — мелко; записанный этим «Сохранить», пока другой не записался, — «записано». Полоса слева —
   у первой ячейки строки таблицы (у строки таблицы своей тени нет); на телефоне строка — карточкой, полоса — у неё. */
.couriers-changed, .couriers-saved { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12.5px; }
.couriers-changed { background: var(--warn-bg); color: var(--warn); }
.couriers-saved { background: var(--ok-bg); color: var(--ok); }
.couriers-cell { display: grid; gap: 2px; justify-items: start; }
.couriers-will { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; font-style: italic; }
.couriers-was { display: block; color: var(--muted); font-size: 12px; }
.couriers-list tr.changed, .couriers-list tr.saved-now { box-shadow: none; }
.couriers-list tr.changed > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.couriers-list tr.saved-now > td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
@media (max-width: 900px) {
  .couriers-list tr.changed { box-shadow: inset 3px 0 0 var(--warn); }
  .couriers-list tr.saved-now { box-shadow: inset 3px 0 0 var(--ok); }
  .couriers-list tr.changed > td:first-child, .couriers-list tr.saved-now > td:first-child { box-shadow: none; }
}
.couriers-closed td { overflow-wrap: anywhere; }
.couriers-iiko { display: grid; gap: 2px; }
.people-name { font-weight: 600; overflow-wrap: anywhere; }
.people-entry.is-invited { color: var(--warn); }
.people-entry.is-disabled { color: var(--err); }
.people-card .back { justify-self: start; }
.people-card .invite code { overflow-wrap: anywhere; }
.people-card .check-line { flex-wrap: nowrap; align-items: flex-start; }
.people-card .check-line > span { min-width: 0; }
.people-card select[name=add_role] { width: auto; max-width: 100%; }
table.people-rights { width: 100%; border-collapse: collapse; font-size: 14px; }
table.people-rights th { padding: 6px 4px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 500; text-align: center; }
table.people-rights th:first-child { text-align: left; }
table.people-rights td { padding: 7px 4px; border-bottom: 1px solid var(--border); vertical-align: middle; overflow-wrap: anywhere; }
table.people-rights td.center { text-align: center; }
table.people-rights input { width: auto; margin: 0; }
table.people-rights td[data-label="Итог"] { white-space: nowrap; overflow-wrap: normal; }
table.people-rights .short { display: none; }
@media (max-width: 600px) {
  table.people-rights .long { display: none; }
  table.people-rights .short { display: inline; }
  table.people-rights th, table.people-rights td { padding-inline: 3px; }
}

/* «Отклики» (часть 6): список слева, отклик справа; узко — по очереди: список или отклик с «← Все отклики». */
.hiring-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.hiring-split > * { min-width: 0; }
.hiring-card .back { justify-self: start; }
/* Резюме — кнопкой по словам; на телефоне — во всю ширину, как кнопки ниже. */
@media (min-width: 601px) { .hiring-card .pane-b > a.button { justify-self: start; } }
@media (max-width: 1180px) {
  .hiring-split { grid-template-columns: minmax(0, 1fr); }
  .hiring-split[data-open=card] > .pane:first-child { display: none; }
  .hiring-split[data-open=list] > .hiring-none { display: none; }
}
.hiring-filter select { max-width: 420px; }
.hiring-list tr[aria-current=true] td { background: var(--cream); }
.hiring-list tr[aria-current=true] .hiring-name { text-decoration: none; }
.hiring-name, .hiring h1, .hiring .facts dd { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.hiring-new { padding: 1px 8px; border-radius: 999px; background: var(--gold); color: var(--on-accent); font-size: 12px; font-weight: 600; white-space: nowrap; }
.hiring-vacancy { overflow-wrap: anywhere; }
.hiring-when { white-space: nowrap; }
.hiring-card h2 { overflow-wrap: anywhere; }
.hiring-phone { white-space: nowrap; }
.hiring-about { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 760px; }

/* ── «О нас» (новая витрина, часть 5в): вкладка «Главной сайта» с текстами брендов ──────────────────
   Фото бренда и галерея — целиком, как их увидит Гость (не обрезанными), на подложке темы. Строки фактов,
   абзацев и галереи — с кнопками порядка справа; на телефоне поля фактов встают друг под другом. */
.sitehome-pane > h2:first-child { margin-top: 8px; }
.sitehome-brands { margin: 4px 0 10px; }
.sitehome-about-note { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 6px 0 10px; }
.sitehome-about-note p { margin: 0; }
.sitehome-about-note button { margin: 0; }
.sitehome-about-story { max-width: 760px; }
.sitehome-whole { display: block; width: auto; height: auto; max-width: 100%; max-height: 240px; object-fit: contain; border-radius: 10px; background: var(--cream); }
.sitehome-about-list .fineprint { margin: 0 0 6px; }
.sitehome-list { display: flex; flex-direction: column; gap: 6px; }
.sitehome-line { display: flex; gap: 8px; align-items: flex-end; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); min-width: 0; }
.sitehome-line > :first-child { flex: 1 1 auto; min-width: 0; }
.sitehome-line .field { margin: 0; }
.sitehome-row-tools { display: flex; flex: 0 0 auto; gap: 2px; }
.sitehome-fact { display: flex; flex-wrap: wrap; gap: 0 8px; }
.sitehome-fact > .field:first-child { flex: 0 1 140px; min-width: 96px; }
.sitehome-fact > .field:last-child { flex: 1 1 200px; min-width: 0; }
/* Галерея — плитками, а не строками: фото целиком на подложке 4:3, кнопки — под ним. */
.sitehome-gallery.sitehome-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 8px; }
.sitehome-gallery .sitehome-line { flex-direction: column; align-items: stretch; gap: 4px; }
.sitehome-gallery .sitehome-row-tools { justify-content: flex-end; }
.sitehome-gallery-shot { width: 100%; max-height: none; aspect-ratio: 4 / 3; }
.sitehome-about-list > button { margin: 6px 0 0; }
@media (max-width: 640px) {
  .sitehome-line { flex-direction: column; align-items: stretch; }
  .sitehome-row-tools { justify-content: flex-end; }
}

/* Зоны доставки точки (заказы, шаг 6.3): кнопки загрузки строкой, зона — строкой полей, на узком — переносом. */

.file-pick { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.file-pick input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zone-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.zone-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; padding: 8px 0; border-bottom: 1px solid var(--border); }
.zone-row b { flex: 1 1 100%; }
.zone-row input[type="number"] { width: 110px; }