/* Jost — геометрический гротеск той же породы, что Century Gothic из
   фирменного стиля. Сам Century Gothic лицензионный, а политика
   безопасности приложения (default-src 'self') не пускает чужие шрифтовые
   сервисы: файл можно отдавать только со своего домена. Jost под свободной
   лицензией OFL, поэтому лежит в public/fonts — там же и текст лицензии.

   Переменное начертание: один файл на весь диапазон 400–700, три набора
   символов вместо одного файла на всё — кириллица весит 10 КБ, и латинские
   наборы телефону сотрудника грузить незачем. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jost-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Фирменный стиль: чёрная обводка, белый фон, плоские цвета и цветная
     плашка, сдвинутая из-под контура. Цвета сняты пипеткой с айдентики. */
  --ink: #000000;
  --paper: #ffffff;
  --brand: #1a5dff;
  --brand-deep: #1346bf;
  --brand-pale: #94c2ff;
  --cyan: #99fffd;
  --cyan-pale: #d3fffd;
  --yellow: #fffc61;
  --yellow-pale: #f8ffd0;
  --pink: #ff4a9c;
  --pink-pale: #ff7aac;
  --green: #12ff25;
  --green-pale: #c9ff92;
  --orange: #ffae63;

  /* Конструкция. Толщина снята с иллюстрации: 5 px при ширине кадра 1920,
     то есть около 1,3% от размера предмета — на плитке это 3 px. */
  --line: 3px;
  --shift: 4px;

  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f7f7f7;
  --border: #e2e2e2;
  --text: #000000;
  --text-dim: #3f3f3f;
  --accent: #1a5dff;
  --accent-2: #ff4a9c;
  --action: #1a5dff;
  --action-press: #1346bf;
  --danger: #ff4a9c;

  /* Цвет плашки у раздела. Второе значение — заливка значка. */
  --kitchen-bg: #fffc61; --kitchen-fg: #000000;
  --bar-bg: #99fffd;     --bar-fg: #000000;
  --global-bg: #94c2ff;  --global-fg: #000000;
  --tests-bg: #12ff25;   --tests-fg: #000000;
  --courses-bg: #ff4a9c; --courses-fg: #000000;
  --feed-bg: #1a5dff;    --feed-fg: #000000;
  --admin-bg: #ffae63;   --admin-fg: #000000;
  --shifts-bg: #1a5dff;  --shifts-fg: #000000;

  /* Значки особенностей блюда */
  --hot-bg: #ff7aac;     --hot-fg: #000000;
  --veg-bg: #c9ff92;     --veg-fg: #000000;
  --vegan-bg: #99fffd;   --vegan-fg: #000000;
  --lean-bg: #94c2ff;    --lean-fg: #000000;
  --allergen-bg: #ffae63; --allergen-fg: #000000;

  /* Полоса под жестом «домой» и строка состояния. */
  --system-bar: #ffffff;

  --radius-lg: 14px;
  --radius-md: 12px;
  --radius-sm: 8px;
  font-size: 17px;
}


* { box-sizing: border-box; }

*, *::before, *::after {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
input, textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* Полоса под жестом «домой» в полноэкранном режиме.
   Красит её не приложение, а система — по фону корневого элемента. Фон на
   html уже стоял, и всё равно оставалась чёрная полоска: система смотрит
   на непрозрачный цвет фона документа, а градиент на #app до неё не
   доходит. Поэтому цвет задан отдельной переменной и продублирован на
   html, body и мета-теге: какой бы из трёх способов ни выбрала система,
   она возьмёт один и тот же цвет. */
html {
  background: var(--system-bar);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Jost', 'Century Gothic', 'Futura', system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  /* dvh, а не vh: на телефоне панели браузера появляются и прячутся, и
     100vh оставляет пустую полосу внизу. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Отступ снизу учитывает полоску жеста «домой»: без него содержимое
     упирается прямо в неё. */
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  /* Ровная заливка без градиента: в фирменном стиле плоские цвета.
     Прежнее значение ссылалось на --bg-blob-1 из старой палитры — токена
     больше нет, а значит и всё свойство было невалидным, и фона у #app не
     было вовсе. Держался он только на body. */
  background: var(--bg);
}

/* Цвет берётся из токена, а не числом: прежний rgba(238,241,238,.88) —
   это старый зеленоватый фон, он пережил смену палитры и висел серой
   полосой поверх белого. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding: 16px 18px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar h1 {
  font-size: 20px;
  margin: 0;
  flex: 1;
  font-weight: 700;
  letter-spacing: -.01em;
}
.back-btn, .settings-btn {
  border: none;
  font-size: 17px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.back-btn { background: var(--bar-fg); color: #fff; }
/* Стрелка рисуется линиями: текстовый символ «←» сидит на базовой линии
   шрифта, из-за чего в кружке выглядел смещённым вниз и слишком тонким. */
.back-btn svg { width: 19px; height: 19px; display: block; }
.settings-btn { background: var(--tests-fg); color: #fff; font-size: 20px; font-weight: 700; line-height: 1; }
.topbar-spacer { width: 36px; height: 36px; flex-shrink: 0; }

.content { padding: 6px 14px 16px; flex: 1; }

.breadcrumbs {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-bottom: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
}

/* ---------- Home header ---------- */
.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Приветствие ближе к сетке: между ними было заметное пустое поле. */
  padding: 14px 14px 2px;
}
/* 1.08, а не 1: у заглавных «Й» и «Ё» есть надстрочный знак, и на плотной
   строке он налезает на строку выше — в «ПРИВЕТ, АЛЕКСЕЙ» это было видно. */
.greeting {
  font-size: 26px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.15;
}
.greeting .sub {
  font-size: 14px; color: var(--text-dim); font-weight: 500;
  margin-top: 6px; text-transform: none; letter-spacing: 0;
}
/* Кружки в шапке живут по общему правилу: чёрный контур и цветная плашка,
   выехавшая из-под него. Тень здесь не мягкая и не размытая — это плоское
   пятно, как в айдентике. */
/* Фото лежит отдельным слоем поверх фона, а не тянется свойствами вроде
   height: 100% — те в гибком контейнере разрешаются не всегда, и аватарка
   показывалась обрезанной. Размер задан вместе с рамкой (border-box),
   поэтому кольцо ровно круглое при любом снимке. */
.avatar-circle {
  position: relative;
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: var(--line) solid var(--ink);
  background: var(--brand-pale);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: var(--shift) var(--shift) 0 var(--brand);
  overflow: hidden;
}
.avatar-circle img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-large {
  box-sizing: border-box;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  border: var(--line) solid var(--ink);
  box-shadow: var(--shift) var(--shift) 0 var(--brand);
  background: var(--brand-pale);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.avatar-large img { width: 100%; height: 100%; object-fit: cover; }

.profile-menu { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.profile-menu-item {
  box-sizing: border-box;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 15px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
/* Значок, название, значение и стрелка — четырьмя колонками. Раньше всё
   лежало в одной строке через неразрывные пробелы, и строки не совпадали
   между собой. */
.profile-menu-item { gap: 12px; text-align: left; }
.profile-menu-item .menu-icon {
  width: 21px; height: 21px; flex: 0 0 auto;
  color: var(--text-dim);
}
.profile-menu-item .menu-label { flex: 1; min-width: 0; }
.profile-menu-item .menu-value {
  flex: 0 1 auto; min-width: 0;
  font-weight: 500; color: var(--text-dim); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-menu-item.danger .menu-icon { color: var(--danger); }
.profile-menu-item .chev { color: var(--text-dim); font-size: 19px; flex: 0 0 auto; }
.profile-menu-item.danger { color: var(--ink); border-color: var(--ink); background: var(--pink-pale); }
.profile-menu-item.danger .chev { color: var(--danger); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,18,14,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;
}
.modal-card {
  box-sizing: border-box;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shift) var(--shift) 0 var(--ink);
}
.modal-title { font-size: 18px; font-weight: 800; margin-bottom: 4px; letter-spacing: -.01em; }
.section-heading {
  font-size: 18px;
  font-weight: 700;
  margin: 18px 0 12px;
  letter-spacing: -.01em;
}

/* ---------- Big colorful home tiles ---------- */
.grid {
  display: grid;
  /* minmax(0, 1fr), а не 1fr: иначе колонка не может стать уже своего
     содержимого, и одна длинная строка в превью ленты распирает сетку за
     край экрана — появляется горизонтальная прокрутка. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Строки заданы явно: половинные плитки должны быть ровно вполовину
     обычной, а лента — во всю их пару. Автовысота этого не даёт. */
  grid-auto-rows: minmax(0, auto);
  gap: 12px;
}
/* Курсы и тесты вдвое ниже обычной плитки, лента занимает их пару по
   вертикали: она вытянутая и позже покажет начало последних записей.
   Высота половинок задана жёстко — иначе содержимое распирает их и
   «половина» перестаёт быть половиной. */
/* Одна разметка на все плитки: значок слева сверху, название с подписью
   слева снизу, кружок перехода в правом нижнем углу. Раньше половинки
   стояли строкой, у «Базы» и «Команды» название было мельче, и экран
   читался как собранный из разных деталей. */
.tile.tile-half {
  min-height: 0;
  /* Считано, а не на глаз: рамка 2×2,7 + поля 2×12 + значок 34 + зазор 12
     + название 22 + подпись 22 ≈ 120. На 104 подпись упиралась в рамку. */
  height: 120px;
  padding: 12px;
}
.tile.tile-half .tile-icon { width: 34px; height: 34px; }
.tile.tile-half .tile-bottom { margin: 0; padding: 0; flex: 1; align-items: center; }



.tile.tile-tall { grid-row: span 2; }

/* Нижний ряд той же высоты, что и верхний: разной высоты ряды выглядят
   как сбитая вёрстка. */
.tile[data-type="global"], .tile[data-type="team"] {
  min-height: 0;
  height: 132px;
  padding: 12px;
}
.tile[data-type="global"] .sub, .tile[data-type="team"] .sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Плитка — белая, с чёрным контуром и цветной плашкой, выехавшей вправо-вниз.
   Цвет плашки — единственное, чем разделы отличаются друг от друга, поэтому
   экран читается как один предмет, а не как набор разноцветных карточек.
   overflow здесь не нужен и вреден: он обрезал бы саму плашку. */
.tile {
  position: relative;
  min-width: 0;
  /* На десятую тоньше общей линии: у плитки периметр большой, и на нём
     та же толщина смотрится тяжелее, чем на кружке или поле ввода. */
  border: 2.7px solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--paper);
  color: var(--ink);
  padding: 12px;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
  min-height: 126px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Нажатие «вдавливает» плитку в её плашку — движение на те же 5 px, на
   которые плашка и сдвинута. */
.tile:active {
  transform: translate(var(--shift), var(--shift));
  box-shadow: 0 0 0 var(--ink);
}
.tile[data-type="kitchen"] { box-shadow: var(--shift) var(--shift) 0 var(--kitchen-bg); }
.tile[data-type="bar"] { box-shadow: var(--shift) var(--shift) 0 var(--bar-bg); }
.tile[data-type="global"] { box-shadow: var(--shift) var(--shift) 0 var(--global-bg); }
.tile[data-type="tests"] { box-shadow: var(--shift) var(--shift) 0 var(--tests-bg); }
.tile[data-type="courses"] { box-shadow: var(--shift) var(--shift) 0 var(--courses-bg); }
.tile[data-type="feed"] { box-shadow: var(--shift) var(--shift) 0 var(--feed-bg); }
.tile[data-type="team"] { box-shadow: var(--shift) var(--shift) 0 var(--admin-bg); }
.tile[data-type="shifts"] { box-shadow: var(--shift) var(--shift) 0 var(--shifts-bg); }
.tile .tile-icon {
  display: block;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.tile .tile-icon svg { display: block; width: 100%; height: 100%; }
.tile-bottom {
  margin-top: auto;
  padding-top: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.tile-text { display: flex; flex-direction: column; min-width: 0; }
.tile .name {
  display: block; font-weight: 700; font-size: 23px; color: var(--ink);
  text-transform: uppercase; letter-spacing: .005em; line-height: .95;
}
.tile .sub {
  display: block; font-size: 12px; margin-top: 6px; color: var(--text-dim);
  font-weight: 500; line-height: 1.3;
}
/* Стрелка внутри — рисунок, а не текстовый символ ↗. У символа своя базовая
   линия, и отцентрировать его в круге невозможно: он всегда сидел выше и
   левее середины.
   
   Кружок вынут из потока и прижат к углу: в строке он растягивал подпись и
   съедал место у названия. Текст от него отделён отступом справа — иначе
   длинное название уезжало бы под кружок. */
.tile .arrow-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2.2px solid var(--ink);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex-shrink: 0;
}
.tile .arrow-badge svg { display: block; width: 13px; height: 13px; stroke-width: 5.4; }
.tile .tile-text { padding-right: 24px; }
.tile.subcat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  min-height: 92px;
  padding: 16px;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.tile.subcat-tile .emoji { background: var(--surface-soft); }

/* ---------- Card list (photo-style) ---------- */
.card-list { display: flex; flex-direction: column; gap: 14px; }
/* Карточке тень положена: это главный предмет экрана, их немного, и
   берут их целиком. overflow нужен, чтобы фото не вылезало из скруглений,
   но тень он не режет — она рисуется снаружи. */
.card-item {
  background: var(--paper);
  border: 2.7px solid var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shift) var(--shift) 0 var(--brand-pale);
  transition: transform .1s ease, box-shadow .1s ease;
}
.card-item:active {
  transform: translate(var(--shift), var(--shift));
  box-shadow: 0 0 0 var(--ink);
}
.card-photo {
  width: 100%;
  height: 132px;
  object-fit: cover;
  display: block;
  background: var(--surface-soft);
}
.card-photo-placeholder {
  width: 100%;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
}
.card-item-body { padding: 14px; }
.card-item .name {
  font-weight: 700; font-size: 19px; margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: .005em; line-height: 1.05;
}
.card-item .desc { font-size: 14px; color: var(--text-dim); line-height: 1.45; }
.tags { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
}
.tag.allergen { color: var(--danger); background: #fbe6e4; }

/* ---------- Card detail ---------- */
.card-photo-wrap {
  position: relative;
  box-sizing: border-box;
  border: 2.7px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shift) var(--shift) 0 var(--brand-pale);
  overflow: hidden;
  margin-bottom: 22px;
  cursor: pointer;
}
.card-detail-photo {
  width: 100%;
  height: 286px;
  object-fit: cover;
  display: block;
}
.card-detail-photo-placeholder {
  width: 100%;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 58px;
}
.card-photo-hint {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.5), transparent);
  pointer-events: none;
}

.card-action-menu {
  position: fixed;
  top: 60px;
  right: 18px;
  box-sizing: border-box;
  background: var(--paper);
  border: 2.7px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shift) var(--shift) 0 var(--ink);
  overflow: hidden;
  z-index: 150;
  min-width: 220px;
}
.card-action-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.card-action-item:last-child { border-bottom: none; }
.card-action-item.danger { color: var(--danger); }

.card-detail .name {
  font-size: 30px; font-weight: 700; margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: .005em; line-height: 1.02;
}
.card-detail .desc { font-size: 16px; line-height: 1.6; color: var(--text); margin-bottom: 22px; }
.field { margin-bottom: 16px; }
/* Название поля — мелким и вразрядку: оно служебное, а значение главное.
   Раньше подпись была крупнее значения и спорила с ним. */
.field .label {
  font-size: 11.5px; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 6px; font-weight: 700;
}
.field .value { font-size: 16px; font-weight: 500; line-height: 1.55; }
.allergen-underline {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--danger);
  text-underline-offset: 3px;
  font-weight: 600;
}

.fab {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 50%;
  transform: translateX(220px);
  /* Сплошной цвет, а не градиент: кнопка одна на экране, и переливаться
     ей незачем. Тот же оттенок, что у главной кнопки, — действие одного
     рода. */
  background: var(--action);
  color: #fff;
  border: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  font-size: 26px;
  cursor: pointer;
  z-index: 20;
  transition: transform .15s ease;
}
.fab.open { transform: translateX(220px) rotate(45deg); }
@media (max-width: 520px) {
  .fab { right: 22px; transform: none; }
  .fab.open { transform: rotate(45deg); }
}

.fab-menu {
  position: fixed;
  bottom: 92px;
  right: 50%;
  transform: translateX(220px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 20;
}
@media (max-width: 520px) {
  .fab-menu { right: 22px; transform: none; }
}
.fab-pill {
  border: none;
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.fab-pill.pill-card { background: var(--tests-fg); }
.fab-pill.pill-folder { background: var(--admin-fg); }

.btn {
  display: inline-block;
  box-sizing: border-box;
  background: var(--action);
  color: var(--paper);
  border: var(--line) solid var(--ink);
  box-shadow: var(--shift) var(--shift) 0 var(--ink);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  transition: transform .1s ease, box-shadow .1s ease;
}
/* Нажатие вдавливает кнопку в её тень — то же движение, что у плиток. */
.btn:active {
  transform: translate(var(--shift), var(--shift));
  box-shadow: 0 0 0 var(--ink);
}
/* Второстепенная кнопка тоже цветная — текстом: белый прямоугольник с
   тёмными буквами читается как карточка, а не как кнопка. */
.btn.secondary {
  background: var(--paper);
  color: var(--ink);
  border: var(--line) solid var(--ink);
}
.btn.full { width: 100%; }
.btn.danger { background: var(--danger); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:not(:disabled):active { background: var(--action-press); }
.btn.secondary:not(:disabled):active { background: var(--surface-soft); }
.btn.danger:not(:disabled):active { background: #b8453c; }

/* Кнопки подряд не должны слипаться. Правило общее, а не по экранам:
   иначе каждый новый экран заводит свой отступ и где-нибудь его забывает. */
.btn + .btn,
.btn.full + .btn.full { margin-top: 10px; }
.builder-row .btn + .btn,
.modal-actions .btn + .btn,
.section-buttons .btn + .btn,
.ai-actions .btn + .btn { margin-top: 0; }

label.form-label { display: block; font-size: 14px; color: var(--text-dim); font-weight: 600; margin: 14px 0 6px; }
/* Перечислять типы полей по одному нельзя: стоило добавить type=email —
   и поле выпало из оформления. Исключаем то, что оформляется отдельно. */
input:not([type=checkbox]):not([type=radio]):not([type=file]),
textarea, select {
  box-sizing: border-box;
  width: 100%;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  color: var(--text);
  padding: 12px 13px;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-family: inherit;
}
/* Выделение полем фокуса — той же плашкой со смещением, что и везде. Мягкое
   свечение выпадало бы из плоского стиля. */
/* Галочки и переключатели сюда не входят: плашка со смещением вокруг
   квадратика в 20 px выглядела синей обводкой при каждом нажатии. */
input:not([type=checkbox]):not([type=radio]):focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: var(--shift) var(--shift) 0 var(--brand);
}
textarea { min-height: 90px; resize: vertical; }

.password-field-wrap { position: relative; }

.ai-box {
  background: var(--yellow-pale);
  border: none;
  border-radius: var(--radius-lg);
  padding: 16px;
  margin: 16px 0;
}
.ai-box .title { font-weight: 800; font-size: 14px; margin-bottom: 8px; color: #7a5a10; }

.role-switch { display: flex; gap: 8px; margin-bottom: 16px; }
.role-switch .btn { flex: 1; }

.quiz-q {
  background: var(--paper); border: 2.7px solid var(--ink);
  border-radius: var(--radius-lg); padding: 16px; margin-bottom: 14px;
}
/* Вопрос — главный текст на экране, а был серым и мельче ответов. */
.quiz-q .prompt {
  font-size: 17px; font-weight: 600; margin-bottom: 14px; color: var(--ink);
  line-height: 1.35;
}
.quiz-option {
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  color: var(--ink);
  padding: 11px 13px;
  border-radius: var(--radius-md);
  margin-bottom: 9px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
}
/* Выбранный ответ ещё не проверен. Красить его зелёным нельзя: человек
   решит, что уже ответил верно. Поэтому выбранный — голубой и вдавленный,
   верный — зелёный, неверный — розовый. К цвету добавлен знак: на цвет
   одному из двенадцати мужчин полагаться нельзя. */
.quiz-option.selected {
  background: var(--cyan-pale);
  box-shadow: inset 3px 3px 0 var(--cyan);
  font-weight: 700;
}
.quiz-option.correct { background: var(--green-pale); font-weight: 700; }
.quiz-option.correct::after { content: ' ✓'; font-weight: 700; }
.quiz-option.wrong { background: var(--pink-pale); }
.quiz-option.wrong::after { content: ' ✕'; font-weight: 700; }

table.results { width: 100%; border-collapse: collapse; font-size: 14px; }
table.results th, table.results td { text-align: left; padding: 10px 6px; border-bottom: 2px solid var(--ink); }
table.results th { color: var(--text-dim); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }

.empty-state { text-align: center; color: var(--text-dim); padding: 40px 20px; font-size: 15px; }

.checkbox-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  box-sizing: border-box;
  background: var(--paper); border: 2.5px solid var(--ink);
  border-radius: var(--radius-md); margin-bottom: 8px;
}
/* Та же галочка, что и на входе: своя, без системной синевы и обводок. */
.checkbox-row input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  box-sizing: border-box; position: relative;
  width: 20px; height: 20px; flex-shrink: 0; margin: 0;
  border: 2px solid var(--ink); border-radius: 5px;
  background: var(--paper); cursor: pointer;
}
.checkbox-row input[type=checkbox]::after {
  content: ''; position: absolute; left: 4.75px; top: .84px;
  width: 4px; height: 9px; border: solid var(--ink);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0); transition: transform .12s ease;
}
.checkbox-row input[type=checkbox]:checked::after { transform: rotate(45deg) scale(1); }

.field-error { color: var(--danger); font-size: 13px; margin-top: 6px; min-height: 14px; font-weight: 500; }

/* На входе верхняя полоса пустая: ни заголовка, ни кнопки «назад».
   Убираем её совсем — иначе это просто полоса над логотипом. */
#app:has(.login-wrap) .topbar { display: none; }
#app:has(.login-wrap) .content { padding-top: 0; padding-bottom: 0; }
/* Отступ под жест «домой» здесь не нужен: экран и так по центру, а лишние
   28 px превращали его в прокручиваемый. */
#app:has(.login-wrap) { padding-bottom: 0; }

/* Блок входа стоит по центру экрана и не прокручивается: здесь нечего
   листать, а уехавший вверх логотип выглядит как недогруженная страница.
   dvh, а не vh: на телефоне панели браузера появляются и прячутся. */
.login-wrap {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Поля и кнопка короче по бокам, чем остальные экраны. */
  padding-inline: 26px;
}
/* Логотип — тот же знак, что на заставке и на иконке приложения: слово в
   скруглённом квадрате с чёрным контуром и тенью со смещением. Раньше здесь
   лежала картинка brand-logo.png со старым оформлением. */
.login-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 21px;
  box-shadow: var(--shift) var(--shift) 0 var(--ink);
  padding: 15px 31px 20px;
  font-weight: 700;
  font-size: 58px;
  line-height: 1;
  letter-spacing: -.005em;
}

/* Кнопка входа — оранжевая (выбрана из вариантов 21.09.2026), а не синяя:
   синий занят логотипом, и рядом с ним синяя кнопка сливалась в одно пятно.
   Чёрный текст: на оранжевом белый читается плохо. */
.login-wrap .btn {
  background: var(--orange);
  color: var(--ink);
}
/* Нажатие — вдавливанием в тень, как у всех кнопок, без смены цвета:
   общее правило красило бы её в синий. */
.login-wrap .btn:not(:disabled):active { background: var(--orange); }

/* ===================================================================
   Этап 0: новые элементы интерфейса
   =================================================================== */

/* Кликабельные блоки стали <button> — иначе до них нельзя добраться
   с клавиатуры и их не читают программы экранного доступа.
   Сбрасываем то, что браузер навязывает кнопкам. */
/* Сброс кнопочного вида — но БЕЗ border и padding.
   
   Эти два свойства здесь уже дважды съедали оформление: браузерное правило
   для button перебивается по классу, а вот «button.класс» перебивает
   обычный «.класс», и чёрный контур молча пропадал — сначала у аватарки в
   шапке, потом у пунктов профиля. Отступы и рамку каждый элемент задаёт
   сам. */
button.avatar-large,
button.profile-menu-item {
  font-family: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
button.avatar-large { padding: 0; }
button.profile-menu-item {
  width: 100%;
  text-align: left;
  padding: 15px;
  border: 2.5px solid var(--ink);
  font-size: 15px;
  font-weight: 700;
}
button.profile-menu-item.danger { border-color: var(--ink); }

/* Видимый фокус: без него навигация с клавиатуры вслепую. */
:where(button, input, select, textarea, a):focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* Плавное появление экрана — приложение не должно «моргать» как сайт. */
.content { animation: screen-in .22s ease-out both; }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- всплывающее уведомление вместо alert() --- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  max-width: min(420px, calc(100vw - 32px));
  /* Чёрный — цвет контуров всей айдентики, поэтому сообщение и здесь
     выглядит частью приложения. Прежде тут была тёмная бирюза из старой
     палитры, ради той же цели. */
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  padding: 12px 18px;
  border-radius: 12px;
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 100;
  text-align: center;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* --- модальные окна --- */
.modal-text { font-size: 14px; color: var(--text-dim); margin: 8px 0 0; line-height: 1.5; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions .btn { flex: 1; }

/* --- пояснительная плашка (например, «только для чтения») --- */
.notice {
  background: var(--yellow-pale);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  padding: 11px 13px;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}

/* --- формы --- */
.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 500;
  cursor: pointer;
}
/* Своя галочка вместо системной: та рисуется синим цветом операционной
   системы и при выборе обводится собственной рамкой — в плоском стиле с
   чёрным контуром это выглядит чужеродно. Здесь пустой квадрат с чёрной
   рамкой, а при выборе — чёрная галочка внутри, и никаких обводок. */
.checkbox-inline input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--paper);
  cursor: pointer;
}
.checkbox-inline input[type=checkbox]::after {
  content: '';
  position: absolute;
  /* Знак повёрнут на 45°, и центр его рамки не совпадает с центром самой
     галочки: при left: 6px / top: 2px она сидела на 1,2 px правее и ниже
     центра квадрата. Отступы посчитаны так, чтобы центр видимого знака
     пришёлся ровно в центр (8, 8) внутренней области. */
  left: 4.75px;
  top: .84px;
  width: 4px;
  height: 9px;
  border: solid var(--ink);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .12s ease;
}
.checkbox-inline input[type=checkbox]:checked::after { transform: rotate(45deg) scale(1); }
.checkbox-inline input[type=checkbox]:focus:not(:focus-visible) { outline: none; }
/* С клавиатуры фокус нужен — иначе не видно, где ты. Чёрным, как контуры. */
.checkbox-inline input[type=checkbox]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.check-list { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }

.panel {
  box-sizing: border-box;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 15px;
}
.panel-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }

/* --- экран входа --- */
.login-logo { text-align: center; margin: 0 0 32px; }
.login-wrap .btn.full { margin-top: 18px; }

/* --- профиль --- */
.profile-top { text-align: center; padding-top: 4px; }
.profile-name { font-size: 19px; font-weight: 700; margin-top: 14px; }
.profile-role { font-size: 13px; color: var(--text-dim); margin-top: 2px; }

/* --- ИИ-помощник --- */
.ai-hint { font-size: 13px; color: var(--text-dim); margin: 0 0 8px; line-height: 1.45; }
.ai-actions { display: flex; gap: 8px; margin-top: 8px; }
.ai-actions .btn { flex: 1; }
.ai-actions .btn.mic { flex: 0 0 auto; padding-left: 16px; padding-right: 16px; }

/* Правка описания: кнопки рядом с полем, а не во всю ширину — это
   вспомогательное действие, а не главное на экране. */
.ai-actions.inline { margin: -4px 0 4px; }
.ai-actions.inline .btn { flex: 0 0 auto; }
.btn.small { padding: 8px 14px; font-size: 13px; border-radius: 12px; }

/* Подпись о том, что модель не подключена: заметная, но не тревожная —
   приложение работает, просто помощник проще. */
.ai-hint.warn {
  color: #7a5a10;
  background: rgba(255, 255, 255, .55);
  border-radius: 10px;
  padding: 8px 10px;
}
.btn.mic.listening { background: var(--danger); color: #fff; border-color: var(--danger); }

/* --- тесты --- */
.quiz-score {
  background: var(--yellow);
  border: 2.7px solid var(--ink);
  box-shadow: var(--shift) var(--shift) 0 var(--ink);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-align: center;
  margin-bottom: 18px;
}
.quiz-option:disabled { cursor: default; opacity: 1; }

/* --- прочее --- */
.card-item.static { cursor: default; }
/* Широкая таблица прокручивается внутри себя, а не тянет вбок весь экран. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===================================================================
   Этап 1: вкладки и сообщения об ошибках
   =================================================================== */

.tabs {
  display: flex;
  gap: 6px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 16px;
}
.tab {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dim);
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.tab.active { background: var(--surface); color: var(--text); }
.tab-badge {
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bug-item .desc { white-space: pre-wrap; color: var(--text); margin-top: 4px; }
/* Решённые приглушаем, но оставляем на виду — чтобы было понятно,
   что сообщение не потерялось, а обработано. */
.bug-item.done { opacity: .55; }
.bug-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-dim);
}
.bug-toggle {
  border: 1px solid var(--border);
  background: var(--surface-soft);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}

/* ===================================================================
   Раздел «Команда»: список сотрудников, карточка, история результатов
   =================================================================== */

.person-list { display: flex; flex-direction: column; gap: 10px; }
.person-row {
  box-sizing: border-box;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.person-row:active { background: var(--surface-soft); }
.person-row .person-text { flex: 1; min-width: 0; }
.person-row .name { font-size: 15px; font-weight: 700; }
.person-row .desc { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.person-row .chev { color: var(--text-dim); font-size: 19px; flex-shrink: 0; }

.person-avatar, .person-avatar-large {
  box-sizing: border-box;
  border: 2.2px solid var(--ink);
  border-radius: 50%;
  background: var(--brand-pale);
  color: var(--ink);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.person-avatar { width: 42px; height: 42px; font-size: 14px; }
.person-avatar-large { width: 88px; height: 88px; font-size: 28px; margin: 0 auto; }
.person-avatar img, .person-avatar-large img { width: 100%; height: 100%; object-fit: cover; }

.list-hint {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 14px;
  /* Под кнопкой «+» — чтобы она не закрывала подсказку. */
  padding-bottom: 60px;
}

/* --- карточка сотрудника --- */
.person-header { text-align: center; padding: 4px 0 20px; }
.person-header .person-name { font-size: 19px; font-weight: 700; margin-top: 12px; }
.person-header .person-role { font-size: 14px; color: var(--text-dim); margin-top: 3px; }
.person-header .person-login { font-size: 12px; color: var(--text-dim); margin-top: 6px; }

.stat-row { display: flex; gap: 10px; }
.stat-box {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: center;
}
.stat-box b { display: block; font-size: 24px; font-weight: 700; line-height: 1.2; }
.stat-box span { display: block; font-size: 12px; color: var(--text-dim); margin-top: 4px; }

/* Слабый результат должен быть заметен без чтения цифр. */
[data-level="good"] { color: var(--bar-fg); }
[data-level="mid"]  { color: var(--tests-fg); }
[data-level="low"]  { color: var(--danger); }
[data-level="none"] { color: var(--text-dim); }

.attempt-list { display: flex; flex-direction: column; gap: 8px; }
.attempt-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.attempt-row .attempt-text { flex: 1; min-width: 0; }
.attempt-row .name { font-size: 14px; font-weight: 600; }
.attempt-row .desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.score-badge {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- счётчик непрочитанных на кнопке в шапке --- */
.settings-btn { position: relative; }
.btn-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* ===================================================================
   Этап 2: приглашения, статусы аккаунтов, тариф
   =================================================================== */

/* --- экраны без входа: приглашение и восстановление пароля --- */
.onboard-intro {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 22px;
}
.onboard-intro b { color: var(--text); }
.onboard-intro.compact { text-align: left; margin-bottom: 18px; font-size: 14px; }

.hint { font-size: 12px; color: var(--text-dim); margin-top: 8px; }

.notice-ok, .notice-error {
  border-radius: var(--radius-md);
  padding: 16px;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.notice-ok { background: var(--bar-bg); color: var(--bar-fg); }
.notice-error { background: #fbe6e4; color: var(--danger); }

/* Ссылка-кнопка под формой входа. */
.link-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  padding: 8px;
}

/* --- места по тарифу --- */
.seat-bar {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 14px;
}
/* Когда мест не осталось, это должно быть видно до попытки пригласить. */
.seat-bar[data-full="1"] { background: #fbe6e4; border-color: rgba(213,84,74,.3); color: var(--danger); }

/* --- статус аккаунта --- */
.status-chip {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.status-chip[data-status="invited"] { background: var(--tests-bg); color: var(--tests-fg); }
.status-chip[data-status="disabled"] { background: var(--surface-soft); color: var(--text-dim); }
.status-chip.standalone { margin-top: 10px; }
/* Отключённых приглушаем, но оставляем на виду: их результаты сохранены. */
.person-row.muted { opacity: .6; }

.person-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }

/* --- ссылка приглашения, когда почта не настроена --- */
.copy-box {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-top: 12px;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  word-break: break-all;
  /* Ссылку нужно уметь выделить пальцем — общий запрет выделения снимаем. */
  -webkit-user-select: text;
  user-select: text;
}

/* ===================================================================
   Этап 3: особенности блюда значками, галочки в стиле приложения
   =================================================================== */

/* --- овальные значки особенностей --- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0 4px;
}
.chip-row.compact { gap: 5px; margin: 6px 0 0; }

.chip-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 9px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: var(--chip-bg, var(--surface-soft));
  color: var(--chip-fg, var(--text-dim));
  border: 2px solid var(--ink);
}
.chip-mark svg { width: 15px; height: 15px; flex-shrink: 0; }

.chip-mark[data-tone="hot"]      { --chip-bg: var(--hot-bg);      --chip-fg: var(--hot-fg); }
.chip-mark[data-tone="veg"]      { --chip-bg: var(--veg-bg);      --chip-fg: var(--veg-fg); }
.chip-mark[data-tone="vegan"]    { --chip-bg: var(--vegan-bg);    --chip-fg: var(--vegan-fg); }
.chip-mark[data-tone="lean"]     { --chip-bg: var(--lean-bg);     --chip-fg: var(--lean-fg); }
.chip-mark[data-tone="allergen"] { --chip-bg: var(--allergen-bg); --chip-fg: var(--allergen-fg); }

/* В списке карточек значки мельче: там важнее название и фото. */
.chip-row.compact .chip-mark { font-size: 11.5px; padding: 4px 9px 4px 7px; gap: 4px; }
.chip-row.compact .chip-mark svg { width: 13px; height: 13px; }

/* --- галочка в стиле приложения --- */
.check-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 13px 14px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}
.check-card input[type=checkbox] {
  /* Системная галочка выглядит чужеродно и по-разному в разных браузерах. */
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  flex-shrink: 0;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  position: relative;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.check-card input[type=checkbox]::after {
  content: "";
  position: absolute;
  /* Центр знака — в центре квадрата (10, 10), см. .checkbox-inline. */
  left: 6.25px;
  top: 1.98px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .15s ease;
}
.check-card input[type=checkbox]:checked {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.check-card input[type=checkbox]:checked::after { transform: rotate(45deg) scale(1); }

/* Отмеченная особенность окрашивается в свой цвет — видно, что выбрано. */
.check-card[data-tone] .check-icon { display: flex; width: 20px; height: 20px; color: var(--text-dim); }
.check-card[data-tone] .check-icon svg { width: 20px; height: 20px; }
.check-card.on[data-tone="hot"]   { background: var(--hot-bg);   border-color: var(--hot-fg); }
.check-card.on[data-tone="veg"]   { background: var(--veg-bg);   border-color: var(--veg-fg); }
.check-card.on[data-tone="vegan"] { background: var(--vegan-bg); border-color: var(--vegan-fg); }
.check-card.on[data-tone="lean"]  { background: var(--lean-bg);  border-color: var(--lean-fg); }
.check-card.on[data-tone="hot"]   .check-icon { color: var(--hot-fg); }
.check-card.on[data-tone="veg"]   .check-icon { color: var(--veg-fg); }
.check-card.on[data-tone="vegan"] .check-icon { color: var(--vegan-fg); }
.check-card.on[data-tone="lean"]  .check-icon { color: var(--lean-fg); }

.check-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

/* --- выбор фото при создании карточки --- */
.photo-picker {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
}
.photo-picker .big { font-size: 30px; }
.photo-picker img { width: 100%; height: 100%; object-fit: cover; }
.photo-actions { display: flex; gap: 10px; margin-top: 10px; }
.photo-actions .btn { flex: 1; }

/* ===================================================================
   Этап 3: перенос из Базы знаний, свои папки, ссылки на статьи
   =================================================================== */

/* --- режим выбора карточек --- */
/* Галочка лежит поверх фото и не занимает места в потоке: иначе включение
   режима выбора сдвигало бы всё содержимое карточки вбок. */
.photo-slot { position: relative; display: block; flex-shrink: 0; }
.pick-mark {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.card-item.picked { border-color: var(--accent-2); background: #f0faf7; }
.card-item.picked .pick-mark { background: var(--accent-2); border-color: #fff; }

/* Лёгкое покачивание: подсказывает, что карточки сейчас выбирают, а не
   открывают. Останавливается у тех, кто просил уменьшить движение. */
@keyframes pick-wobble {
  0%, 100% { transform: rotate(-0.6deg); }
  50%      { transform: rotate(0.6deg); }
}
.card-item.selectable { animation: pick-wobble 1.1s ease-in-out infinite; }
.card-item.selectable:nth-child(even) { animation-delay: .28s; }
.card-item.picked { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .card-item.selectable { animation: none; }
}

/* Панель поверх содержимого: отсюда переносят отмеченное. */
.copy-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 40;
}
.copy-count { font-size: 14px; font-weight: 700; color: var(--text-dim); flex: 1; }
.copy-bar .btn { flex: 0 0 auto; }
.copy-bar .btn:disabled { opacity: .45; }

/* Своя папка внутри общей базы отличается от общей. */
.subcat-tile.own { border: 1px solid var(--accent-2); }

/* --- выбор папки для переноса --- */
.target-list { max-height: 46vh; overflow-y: auto; margin-top: 12px; }
.target-group { margin-bottom: 14px; }
.target-root {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.target-item {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 6px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.target-item:active { background: var(--surface); }

/* --- ссылки на статьи --- */
.link-list { display: flex; flex-direction: column; gap: 8px; }
.link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--global-bg);
  color: var(--global-fg);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.link-arrow { font-size: 17px; opacity: .7; flex-shrink: 0; }

/* --- редактор ссылок в форме --- */
.link-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.link-row .link-title { flex: 0 0 34%; }
.link-row .link-url { flex: 1; min-width: 0; }
.link-remove {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 15px;
  cursor: pointer;
}

/* ===================================================================
   Словарь терминов: подсветка в описаниях и всплывающее окно
   =================================================================== */

/* Термин в тексте — тонкая волнистая линия, не выбивающаяся из чтения.
   Цвет другой, чем у аллергенов: там предупреждение, здесь подсказка. */
.term-link {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--accent-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.term-link:active { background: var(--bar-bg); border-radius: 3px; }

/* Абзацы описания. */
.card-detail .desc p { margin: 0 0 10px; }
.card-detail .desc p:last-child { margin-bottom: 0; }

/* --- окно термина --- */
.term-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.term-photo {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}
.term-photo.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  background: var(--global-bg);
}
.term-name { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }

.term-body {
  max-height: 46vh;
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}
.term-body p { margin: 0 0 12px; }
.term-body p:first-child { font-weight: 600; }
.term-body p:last-child { margin-bottom: 0; }

/* ===================================================================
   Папки, словарь, поиск, кнопки главного экрана
   =================================================================== */

/* --- список папок вместо одинаковых плиток --- */
.folder-list { display: flex; flex-direction: column; gap: 10px; }
/* Тени у строк списка нет намеренно: пятнадцать папок — это пятнадцать
   смещённых плашек, и экран превращается в рябь. Приём остаётся чёрным
   контуром, а цвет уходит в значок слева. */
.folder-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  font-family: inherit;
  cursor: pointer;
  transition: transform .1s ease;
}
.folder-row:active { transform: translate(2px, 2px); }
.folder-row:active { background: var(--surface-soft); }

.folder-icon {
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  border: 2.2px solid var(--ink);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--tone-bg, var(--surface-soft));
  color: var(--tone-fg, var(--text-dim));
}
.folder-icon svg { width: 24px; height: 24px; }

/* Длинное название переносится на вторую строку и обрезается, а не вылезает
   за край: раньше оно просто не помещалось в плитку. */
.folder-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.folder-name {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.folder-sub { font-size: 12.5px; color: var(--text-dim); font-weight: 500; }
.folder-row .chev { color: var(--text-dim); font-size: 19px; flex-shrink: 0; }

/* Свои папки разноцветные, общие — нейтральные: сразу видно, где чьё. */
.folder-row[data-tone="kitchen"] { --tone-bg: var(--kitchen-bg); --tone-fg: var(--kitchen-fg); }
.folder-row[data-tone="bar"]     { --tone-bg: var(--bar-bg);     --tone-fg: var(--bar-fg); }
.folder-row[data-tone="global"]  { --tone-bg: var(--global-bg);  --tone-fg: var(--global-fg); }
.folder-row[data-tone="tests"]   { --tone-bg: var(--tests-bg);   --tone-fg: var(--tests-fg); }
.folder-row[data-tone="admin"]   { --tone-bg: var(--admin-bg);   --tone-fg: var(--admin-fg); }
.folder-row[data-tone="veg"]     { --tone-bg: var(--veg-bg);     --tone-fg: var(--veg-fg); }
.folder-row[data-tone="lean"]    { --tone-bg: var(--lean-bg);    --tone-fg: var(--lean-fg); }
.folder-row[data-tone="shared"]  { --tone-bg: var(--surface-soft); --tone-fg: var(--text-dim); }

/* --- словарь: компактные строки вместо крупных карточек --- */
.term-list { display: flex; flex-direction: column; gap: 8px; }
.term-row {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  cursor: pointer;
  transition: transform .1s ease;
}
.term-row:active { transform: translate(2px, 2px); }
.term-row:active { background: var(--surface-soft); }
.term-badge {
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  border: 2.2px solid var(--ink);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  flex-shrink: 0;
  background: var(--tone-bg, var(--surface-soft));
}
.term-badge[data-tone="kitchen"] { --tone-bg: var(--kitchen-bg); }
.term-badge[data-tone="bar"]     { --tone-bg: var(--bar-bg); }
.term-badge[data-tone="global"]  { --tone-bg: var(--global-bg); }
.term-badge[data-tone="tests"]   { --tone-bg: var(--tests-bg); }
.term-badge[data-tone="admin"]   { --tone-bg: var(--admin-bg); }
.term-badge[data-tone="veg"]     { --tone-bg: var(--veg-bg); }
.term-badge[data-tone="lean"]    { --tone-bg: var(--lean-bg); }

.term-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.term-title { font-size: 15.5px; font-weight: 700; }
/* Ровно две строки начала описания: иначе строки разной высоты и список
   выглядит рваным. */
.term-preview {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- кнопки в шапке главного экрана --- */
.home-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.icon-btn {
  /* Один размер с аватаркой: два кружка рядом разного размера читаются
     как ошибка вёрстки. */
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: var(--line) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--shift) var(--shift) 0 var(--cyan);
}
.icon-btn svg { width: 20px; height: 20px; stroke-width: 2.8; }
/* Нажатие вдавливает кружок в его плашку — то же движение, что у плиток. */
.icon-btn:active, .avatar-circle:active {
  transform: translate(var(--shift), var(--shift));
  box-shadow: 0 0 0 var(--ink);
}

/* Сетка разделов опущена — приветствие получает воздух. */
.content > .grid:first-child { margin-top: 2%; }

/* --- поиск --- */
.search-results { max-height: 44vh; overflow-y: auto; margin-top: 12px; }
.search-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  margin-bottom: 6px;
  font-family: inherit;
  cursor: pointer;
}
.search-photo {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.search-photo.placeholder { display: flex; align-items: center; justify-content: center; font-size: 20px; }
.search-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.search-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-where { font-size: 12px; color: var(--text-dim); }

/* Кнопки в столбик — когда вариантов больше двух и они разной важности. */
.modal-column { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* ---------- Курсы ---------- */

.course-list { display: flex; flex-direction: column; gap: 10px; }

.course-row {
  display: flex; align-items: center; gap: 12px;
  box-sizing: border-box;
  background: var(--paper); border: 2.7px solid var(--ink);
  border-radius: var(--radius-lg); padding: 12px; cursor: pointer;
  text-align: left; width: 100%;
  box-shadow: var(--shift) var(--shift) 0 var(--courses-bg);
  transition: transform .1s ease, box-shadow .1s ease;
}
.course-row:active {
  transform: translate(var(--shift), var(--shift));
  box-shadow: 0 0 0 var(--ink);
}
.course-row:active { transform: scale(.99); }

.course-cover {
  position: relative; flex: 0 0 auto; box-sizing: border-box;
  width: 54px; height: 54px; border-radius: 11px; overflow: hidden;
  border: 2.2px solid var(--ink);
  background: var(--courses-bg); display: grid; place-items: center;
}
.course-cover img { width: 100%; height: 100%; object-fit: cover; }
.course-emoji { font-size: 24px; }

.course-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.course-title {
  font-weight: 700; font-size: 17px;
  text-transform: uppercase; letter-spacing: .005em; line-height: 1.1;
}
/* Описание курса — до трёх строк. Одна обрезанная строка успевала сказать
   только начало первого предложения, и списком курсов нельзя было
   пользоваться, не открывая каждый. */
.course-sub {
  font-size: 13px; color: var(--text-dim); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-stat {
  font-size: 12.5px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.course-meta { font-size: 12px; color: var(--text-dim); font-weight: 600; }

.tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; vertical-align: 1px; margin-left: 4px;
}
.tag.draft { background: #eceee9; color: #6b7166; }
.tag.assigned { background: #ffe9d6; color: #a8570f; }

/* Дедлайн: важно не «когда», а «сколько осталось». */
.due { font-size: 12.5px; font-weight: 600; }
.due.calm { color: var(--text-dim); }
.due.soon { color: #a8570f; }
.due.late { color: #b0362b; }

.course-progress { display: flex; align-items: center; gap: 8px; }
.progress-track {
  flex: 1; box-sizing: border-box; height: 12px; border-radius: 6px;
  border: 2px solid var(--ink); background: var(--paper); overflow: hidden;
}
/* Плоская заливка вместо градиента: в фирменном стиле градиентов нет. */
.progress-fill {
  display: block; height: 100%;
  background: var(--green);
  transition: width .35s ease;
}
.course-progress .percent {
  font-size: 12px; font-weight: 700; color: var(--text-dim);
  font-variant-numeric: tabular-nums; min-width: 34px; text-align: right;
}
.course-progress.big { margin-top: 0; }
.course-progress.big .progress-track { height: 9px; border-radius: 5px; }

/* ---------- чтение курса ---------- */

/* В шапке осталась одна шкала прохождения, поэтому рамки и подложки нет:
   обводить полоску прогресса не во что. */
.course-head { margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }

.section-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  font-size: 11.5px; color: var(--text-dim); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px;
}
/* «Прочитан» — не просто зелёный текст, а отметка: её ищут глазами,
   листая разделы. */
.read-mark {
  color: var(--ink); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em;
  border: 2px solid var(--ink); border-radius: 20px;
  background: var(--green-pale); padding: 2px 8px;
}

.article {
  background: var(--paper); border: 2.7px solid var(--ink);
  border-radius: var(--radius-lg); padding: 16px;
}
.article-title { font-size: 18px; font-weight: 800; line-height: 1.3; margin-bottom: 10px; }
.article-photo { width: 100%; border-radius: 12px; margin-bottom: 12px; display: block; }
.article-body p { font-size: 15.5px; line-height: 1.62; margin: 0 0 12px; }
.article-body p:last-child { margin-bottom: 0; }

.section-buttons { display: flex; gap: 10px; margin-top: 14px; }
.section-buttons .btn { flex: 1; }

/* Кнопка завершения не должна прилипать к «Дальше»: соседями они не
   являются, поэтому общее правило .btn + .btn их не разводит. */
.course-finish { margin-top: 14px; }


/* ---------- сборка курса ---------- */

.section-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.section-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px;
}
.section-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
  background: #eef0ee; color: var(--text-dim);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.section-name { flex: 1; min-width: 0; font-size: 14.5px; cursor: pointer; }
.section-move, .section-del {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-soft);
  font-size: 13px; cursor: pointer; color: var(--text-dim);
}
.section-move:disabled { opacity: .35; cursor: default; }
.section-del { color: #b0362b; }

.builder-row { display: flex; gap: 10px; margin: 14px 0; }
.builder-row .btn { flex: 1; }

.assign-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.assign-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px; font-size: 14px;
}
.assign-state { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.assign-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.check-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14.5px; }
.check-row .dim { color: var(--text-dim); font-size: 12.5px; }
.photo-picker.small { min-height: 90px; }

/* ---------- Живые квизы ---------- */

/* Объявление о квизе: должно бросаться в глаза, но не пугать. */
.live-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper);
  border: 2.7px solid var(--ink);
  box-shadow: var(--shift) var(--shift) 0 var(--pink);
  border-radius: var(--radius-lg);
  padding: 13px 15px; margin-bottom: 14px;
  font-weight: 700; font-size: 14.5px; color: #9c4a1a;
  cursor: pointer;
}
.live-banner .dot {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: #e0492f; animation: live-pulse 1.6s ease-in-out infinite;
}
.live-banner span:nth-child(2) { flex: 1; min-width: 0; }
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  .live-banner .dot { animation: none; }
}

/* Сцена квиза — то, на что смотрит вся смена разом, и единственное на
   экране. Плашка здесь уместна: объект один. */
.quiz-stage {
  background: var(--paper); border: 2.7px solid var(--ink);
  box-shadow: var(--shift) var(--shift) 0 var(--brand);
  border-radius: var(--radius-lg); padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.quiz-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-dim);
}
.quiz-title { font-size: 21px; font-weight: 800; line-height: 1.2; }
.quiz-note { font-size: 13.5px; color: var(--text-dim); }

/* Отсчёт перед стартом: одна большая цифра и ничего лишнего. */
.quiz-stage.countdown { align-items: center; text-align: center; padding: 40px 18px; }
.quiz-count {
  font-size: 88px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--accent);
}

.quiz-people { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz-person {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface-soft); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 11px 5px 6px;
  font-size: 11px; font-weight: 800; color: var(--text-dim);
}
.quiz-person > span { font-size: 13px; font-weight: 600; color: var(--text); }

.quiz-waiting {
  text-align: center; font-size: 13.5px; color: var(--text-dim);
  padding: 10px 0;
}

.quiz-topline {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--text-dim); font-weight: 600;
}
/* Отсчёт — цифра, на которую смотрят под давлением: крупная, в рамке и с
   табличными цифрами, чтобы не дёргалась при смене разряда. */
.quiz-timer {
  font-size: 22px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: center;
  box-sizing: border-box; min-width: 54px;
  border: 2.5px solid var(--ink); border-radius: 10px;
  background: var(--yellow); padding: 3px 9px;
}
.quiz-timebar {
  box-sizing: border-box; height: 12px; border-radius: 6px;
  border: 2px solid var(--ink); background: var(--paper); overflow: hidden;
}
.quiz-timefill {
  display: block; height: 100%; border-radius: 3px;
  background: var(--pink);
  /* Линейно, а не с ускорением: полоса показывает время, а не эффект. */
  transition: width .25s linear;
}

.quiz-prompt { font-size: 18px; font-weight: 700; line-height: 1.35; margin-top: 4px; }
.quiz-options { display: flex; flex-direction: column; gap: 9px; }
.quiz-options .quiz-option {
  width: 100%; text-align: left;
  background: var(--surface-soft); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 14px 16px;
  font-size: 15.5px; font-family: inherit; color: var(--text); cursor: pointer;
}
.quiz-options .quiz-option.selected {
  background: var(--cyan-pale); box-shadow: inset 3px 3px 0 var(--cyan); font-weight: 700;
}
.quiz-options .quiz-option:disabled { cursor: default; opacity: .75; }
.quiz-options .quiz-option.selected:disabled { opacity: 1; }

/* ---------- итоги ---------- */

.leaderboard { display: flex; flex-direction: column; gap: 6px; }
/* Строка лидерборда — список, поэтому без плашки: двадцать смещённых
   плашек подряд читаются как рябь. Контур и место в строке хватает. */
.leader-row {
  display: flex; align-items: center; gap: 12px; box-sizing: border-box;
  background: var(--paper); border: 2.5px solid var(--ink);
  border-radius: var(--radius-md); padding: 10px 13px;
}
/* Свою строку видно сразу — её и ищут в списке первой. */
.leader-row.me { background: #fff6e6; border-color: var(--accent); font-weight: 700; }
.leader-place { flex: 0 0 auto; width: 26px; font-size: 16px; text-align: center; }
.leader-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.leader-score { font-variant-numeric: tabular-nums; font-weight: 800; }

.review-list { display: flex; flex-direction: column; gap: 8px; }
.review-item {
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: 12px; padding: 11px 14px; background: var(--surface-soft);
  display: flex; flex-direction: column; gap: 3px;
}
.review-item.ok { border-left-color: #3f9d6a; }
.review-item.no { border-left-color: #d5544a; }
.review-prompt { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.review-answer, .review-correct { font-size: 13px; color: var(--text-dim); }
.review-answer .dim { color: var(--text-dim); }

/* ---------- правка вопросов ---------- */

.quiz-edit-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.quiz-edit-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.quiz-edit-head { display: flex; justify-content: space-between; align-items: center; }
.q-option { display: flex; align-items: center; gap: 10px; }
.q-option input[type=radio] { flex: 0 0 auto; width: 20px; height: 20px; accent-color: #3f9d6a; }
.q-option .q-option-text { flex: 1; min-width: 0; margin: 0; }

/* ---------- Сводка по команде и награды ---------- */

/* Сводка стоит первой на экране: смысл раздела — за минуту понять,
   кому назначить дообучение. */
.team-summary {
  display: flex; flex-direction: column; gap: 2px;
  border-radius: 14px; padding: 12px 15px; margin-bottom: 12px;
  background: #e8f4ec; border: 1px solid #c3e0cf; color: #2f6b4a;
}
.team-summary[data-alarm="1"] { background: #fdeceb; border-color: #f0c9c4; color: #9c3327; }
.team-summary b { font-size: 15px; }
.team-summary span { font-size: 12.5px; opacity: .85; }

.person-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.mark {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 6px;
  background: var(--surface-soft); color: var(--text-dim);
}
.mark.late { background: #fdeceb; color: #b0362b; }
.mark.soon { background: #fdf0dc; color: #a8570f; }
.mark.score[data-level="good"] { background: #e2f0dc; color: #3d7a2e; }
.mark.score[data-level="mid"]  { background: #fdf0dc; color: #a8570f; }
.mark.score[data-level="low"]  { background: #fdeceb; color: #b0362b; }

.stat-box b .of { font-size: .6em; font-weight: 600; color: var(--text-dim); }

.course-history { display: flex; flex-direction: column; gap: 8px; }
.course-history-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 11px 14px; cursor: pointer;
}
.course-history-row.late { border-left: 4px solid #d5544a; }
.course-history-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.course-history-text .name { font-size: 14.5px; font-weight: 600; }
.course-history-text .desc { font-size: 12.5px; color: var(--text-dim); }

.award-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.award-item {
  display: flex; align-items: center; gap: 12px; box-sizing: border-box;
  background: var(--yellow-pale); border: 2.2px solid var(--ink);
  border-radius: var(--radius-md); padding: 10px 12px;
}
.award-emoji { font-size: 22px; flex: 0 0 auto; line-height: 1; }
.award-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.award-title { font-size: 14.5px; font-weight: 700; }
.award-note { font-size: 13px; }
.award-meta { font-size: 11.5px; color: var(--text-dim); }
.award-del {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim); font-size: 12px; cursor: pointer;
}

.award-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.award-choice {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1.5px solid var(--border); border-radius: 12px;
  padding: 10px 4px; cursor: pointer;
  font-size: 11.5px; text-align: center; color: var(--text-dim);
}
.award-choice.on { border-color: var(--accent); background: #fff6e6; color: var(--text); font-weight: 700; }
.award-choice input { display: none; }

/* Подзаголовок внутри статьи курса и выделения в тексте. */
.article-sub {
  font-size: 16px; font-weight: 800; line-height: 1.3;
  margin: 18px 0 8px;
}
.article-body p:first-child + .article-sub,
.article-sub:first-child { margin-top: 0; }
.article-body b { font-weight: 800; }
/* Подчёркивание волной уже занято терминами словаря — здесь ровная линия
   с отступом, иначе два разных смысла читались бы одинаково. */
.article-body u {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}

/* Общий курс: заведение его проходит, но не правит. */
.tag.shared { background: #e7e1f8; color: #5f45cd; }

/* ---------- Лента заведения ---------- */

.feed { display: flex; flex-direction: column; gap: 12px; }

/* Запись — предмет, который читают целиком, поэтому плашка положена.
   Цвет синий, как у плитки «Лента» на главном. */
.post {
  background: var(--paper); border: 2.7px solid var(--ink);
  box-shadow: var(--shift) var(--shift) 0 var(--feed-bg);
  border-radius: var(--radius-lg); padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
/* Автоматические записи отличаются полосой слева: их не писал человек,
   и это должно быть видно, не читая текста. */
.post[data-kind="award"] { border-left: 4px solid var(--accent); }
.post[data-kind="course"] { border-left: 4px solid var(--courses-fg); }
.post[data-kind="birthday"] { border-left: 4px solid var(--feed-fg); }

.post-head { display: flex; align-items: center; gap: 10px; }
/* flex, а не grid. У grid с place-items: center картинка не растягивалась:
   height: 100% не разрешался (площадка сетки для этого недостаточно
   определённа), а stretch к картинкам не применяется вовсе — у них своя
   пропорция. Вертикальное фото 200x300 получало 38x57 в кружке 38x38, и
   из-под обрезки была видна только верхняя половина лица. У аватарки в
   профиле тот же кружок собран на flex и работает — приводим к нему. */
.post-avatar, .post-icon {
  flex: 0 0 auto; box-sizing: border-box; width: 38px; height: 38px;
  border: 2.2px solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 13px; font-weight: 700;
  background: var(--brand-pale); color: var(--ink);
}
/* stretch обязателен. Контейнер — grid с place-items: center (так по
   центру стоят инициалы, когда фото нет), а центрированный элемент сетки
   не растягивается: height: 100% у него не разрешается, и картинка
   получала собственную высоту по пропорции. Вертикальное фото 200x300
   становилось 38x57 в кружке 38x38 — из-под обрезки была видна верхняя
   половина, и аватарка выглядела уехавшей. */
.post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-icon { background: var(--surface-soft); font-size: 19px; }
.post-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.post-name { font-size: 14.5px; font-weight: 700; }
.post-when { font-size: 12px; color: var(--text-dim); }

.post-text { font-size: 15px; line-height: 1.5; }
.post-photo { width: 100%; border-radius: 12px; display: block; }

/* ---------- Бусты ---------- */
/* Вместо шести смайликов со счётчиками и отдельной ленты сообщений — одна
   строка коротких одобрений с лицами. Счётчика нет намеренно: «шесть
   человек поставили огонёк» ничего не говорит, а «Мария: жду» говорит. */
.boost-row { display: flex; flex-wrap: wrap; gap: 6px; }
.boost-row:empty { display: none; }
.boost {
  display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid var(--ink); background: var(--paper);
  border-radius: 999px; padding: 3px 10px 3px 3px;
  font-size: 14px; line-height: 1.2; max-width: 100%;
}
.boost.mine { border-color: var(--accent-2); background: #eaf5f2; }
.boost-avatar {
  box-sizing: border-box; width: 24px; height: 24px; flex: 0 0 auto;
  border: 2px solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 10px; font-weight: 700;
  background: var(--cyan); color: var(--ink);
}
.boost-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Длинный буст переносится, а не растягивает строку: перенесённые из
   прежних сообщений бывают в несколько раз длиннее нынешнего предела. */
.boost-text { min-width: 0; overflow-wrap: anywhere; }
.boost-del {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  color: var(--text-dim); font-size: 11px; padding: 0 0 0 2px;
}

.boost-add { display: flex; flex-direction: column; gap: 7px; }
/* Подсказки прокручиваются вбок: их семь, и в строку на телефоне они не
   помещаются, а перенос ломал бы порядок. */
.boost-quick {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
}
.boost-quick::-webkit-scrollbar { display: none; }
.boost-suggest {
  flex: 0 0 auto; border: 2px solid var(--ink); background: var(--paper);
  border-radius: 999px; padding: 6px 12px;
  font-size: 14px; font-family: inherit; cursor: pointer; line-height: 1;
  color: var(--ink); font-weight: 600;
}
.boost-suggest:active { background: var(--yellow); }
.boost-suggest:active { background: var(--surface-soft); transform: scale(.96); }

.boost-form { display: flex; gap: 8px; align-items: center; }
.boost-form .boost-input {
  flex: 1; min-width: 0; margin: 0;
  padding: 9px 13px; font-size: 14px; border-radius: 999px;
}
.boost-send {
  flex: 0 0 auto; box-sizing: border-box; width: 36px; height: 36px;
  border-radius: 50%; border: 2.2px solid var(--ink);
  background: var(--pink); color: var(--ink);
  font-size: 17px; font-weight: 700; cursor: pointer;
}

/* ---------- Напоминание о днях рождения ---------- */

.birthday-box {
  background: #fff4f7; border: 1px solid #f3d3dd;
  border-radius: 16px; padding: 13px 15px; margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.birthday-title { font-size: 15px; font-weight: 800; color: var(--feed-fg); }
.birthday-list { display: flex; flex-direction: column; gap: 6px; }
.birthday-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid #f3d3dd;
  border-radius: 12px; padding: 8px 11px; cursor: pointer;
  width: 100%; text-align: left; font-family: inherit;
}
.birthday-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.birthday-text .name { font-size: 14.5px; font-weight: 600; }
.birthday-text .desc { font-size: 12.5px; color: var(--text-dim); }
.birthday-hint { font-size: 12px; color: var(--text-dim); }
.person-avatar.small { width: 32px; height: 32px; font-size: 11px; }

/* ---------- Знакомство при первом входе ---------- */

.welcome { display: flex; flex-direction: column; align-items: center; text-align: center; }
.welcome-title { font-size: 21px; font-weight: 800; margin-top: 8px; }
.welcome-intro {
  font-size: 14.5px; color: var(--text-dim); line-height: 1.5;
  margin: 8px 0 20px; max-width: 34ch;
}
.welcome .avatar-large { margin-bottom: 6px; }
.welcome .form-label, .welcome .ai-hint, .welcome .field-error { align-self: stretch; text-align: left; }
.welcome .btn { align-self: stretch; }

.birthday-fields { display: flex; gap: 10px; width: 100%; }
.birthday-fields select { flex: 1; min-width: 0; }

/* Пункт профиля со значением справа. */
.profile-menu-item .dim { color: var(--text-dim); font-weight: 500; }

/* ---------- Работа без сети ---------- */

/* Плашка снизу: наверху её перекрыл бы заголовок экрана, а прятать её
   совсем нельзя — человек должен понимать, почему данные вчерашние. */
.offline-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(520px, 100%);
  background: #4a4741;
  color: #fff;
  font-size: 12.5px;
  text-align: center;
  padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
  z-index: 90;
}

.modal-text.warn {
  background: #fdf0dc; color: #8a5a12;
  border-radius: 10px; padding: 10px 12px;
}
.modal-text.dim { color: var(--text-dim); font-size: 13px; }

/* Начало последних записей на плитке «Лента». Две строки, каждая в одну
   строку с многоточием: плитка показывает, что в смене происходит, а не
   пересказывает запись. */
/* Есть живые записи — подпись «новости и поздравления» лишняя: она
   пересказывает то, что видно строчкой выше, и распирает плитку. */
.tile:has(.feed-preview) .sub { display: none; }

.feed-preview {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.feed-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.feed-who {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  flex: none;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
}
.feed-line:nth-child(2) .feed-who { background: var(--yellow); }
.feed-text {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-dim);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Смены ---------- */
/* Плитка во всю ширину: подпись у неё важнее названия — там ближайшая
   смена, и ради неё раздел можно не открывать. */
.tile.tile-wide {
  grid-column: span 2;
  min-height: 0;
  height: 120px;
  padding: 12px;
}
.tile.tile-wide .tile-icon { width: 34px; height: 34px; }

.week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 14px;
}
.week-label { font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.week-arrow {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.week-arrow:active { transform: scale(.94); }

.shift-day { margin-bottom: 16px; }
.shift-day-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 7px;
}
.shift-day.today .shift-day-head { color: var(--action); }
.tag.today-tag { background: var(--bar-bg); color: var(--bar-fg); }
.tag.mine-tag { background: var(--courses-bg); color: var(--courses-fg); margin-left: 6px; }

.shift-row {
  display: flex;
  align-items: center;
  gap: 11px;
  box-sizing: border-box;
  background: var(--paper);
  border: 2.2px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  margin-bottom: 8px;
  cursor: pointer;
}
.shift-row:active { transform: scale(.99); }
/* Свою смену видно с одного взгляда: в графике из десяти строк искать себя
   по имени — лишняя работа. */
.shift-row.mine { box-shadow: inset 0 0 0 2px var(--accent-2); }
.shift-avatar {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  overflow: hidden;
}
.shift-avatar img { width: 100%; height: 100%; object-fit: cover; }
.shift-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.shift-name { font-weight: 700; font-size: 15px; }
.shift-note, .shift-swap { font-size: 13px; color: var(--text-dim); }
.shift-swap { color: var(--accent); font-weight: 600; }
.shift-time {
  text-align: right;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.shift-overnight {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
}
.shift-empty {
  font-size: 14px;
  color: var(--text-dim);
  padding: 0 13px;
}
/* Выходной занимает строку, а не блок: неделя, начатая в четверг, иначе
   открывалась бы половиной экрана пустоты, которую надо пролистать. */
.shift-day.empty { margin-bottom: 9px; }
.shift-day.empty .shift-day-head { margin-bottom: 1px; }

/* Просьбы наверху экрана: это единственное здесь, что требует ответа. */
.swap-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.swap-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.swap-title { font-weight: 800; font-size: 15px; }
.swap-when { font-size: 14px; color: var(--text-dim); margin-top: 2px; }
.swap-message { font-size: 14px; margin-top: 5px; }
.swap-actions { display: flex; gap: 8px; margin-top: 11px; }
.swap-actions .btn { flex: 1; }

.time-pair { display: flex; gap: 10px; }
.time-pair > div { flex: 1; }

/* ---------- Поиск ---------- */
/* Окно поиска прижимается к верху, а отступ сверху задаёт search.js: он
   ставит окно по центру того, что осталось от экрана после клавиатуры.
   Обычное выравнивание по центру считает от всего экрана и прячет поле
   ввода под клавиатуру. */
.modal-overlay.search-overlay {
  align-items: flex-start;
  padding-top: max(14px, env(safe-area-inset-top));
}
.search-group {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  margin: 10px 0 4px;
}
.search-group:first-child { margin-top: 2px; }
.search-photo.folder-mark { background: var(--surface-soft); }

/* Полоса под жестом «домой».
   Три способа сразу, потому что разные системы красят её по-разному:
   мета-тег theme-color, фон корневого элемента и эта полоска поверх
   содержимого. Там, где отступа под жест нет, высота равна нулю и полоска
   ничего не занимает. */
.system-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: env(safe-area-inset-bottom);
  background: var(--system-bar);
  z-index: 300;
  pointer-events: none;
}

/* ---------- Текст с оформлением ---------- */
/* Классы собираются в doc.js из закрытых списков: в разметку не попадает
   ни одного значения от человека, кроме самого текста, и тот экранирован. */
.rt-b { font-weight: 800; }
.rt-i { font-style: italic; }
.rt-u { text-decoration: underline; text-underline-offset: 2px; }
.rt-s { text-decoration: line-through; }
.rt-u.rt-s { text-decoration: underline line-through; }

.rt-f-sans { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.rt-f-serif { font-family: Georgia, "Times New Roman", serif; }
.rt-f-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .94em; }
.rt-f-display { font-family: "Futura", "Trebuchet MS", "Segoe UI", sans-serif; letter-spacing: -.01em; }
.rt-f-hand { font-family: "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive; }

.rt-z-lg { font-size: 1.22em; }
.rt-z-xl { font-size: 1.5em; line-height: 1.3; }

/* Выделение цветом: небольшой отступ и скругление, чтобы это читалось как
   маркер по бумаге, а не как заливка ячейки таблицы. */
.rt-h-yellow, .rt-h-green, .rt-h-pink, .rt-h-blue {
  padding: .06em .22em; border-radius: 4px; box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.rt-h-yellow { background: #ffe9a8; }
.rt-h-green { background: #cdeccf; }
.rt-h-pink { background: #ffd6e0; }
.rt-h-blue { background: #cfe4fb; }

.rt-body h2 { font-size: 21px; font-weight: 800; line-height: 1.25; margin: 18px 0 8px; }
.rt-body h3 { font-size: 17px; font-weight: 800; line-height: 1.3; margin: 16px 0 6px; }
.rt-body h2:first-child, .rt-body h3:first-child, .rt-body p:first-child { margin-top: 0; }
.rt-body p { font-size: 15.5px; line-height: 1.62; margin: 0 0 12px; }
.rt-body blockquote {
  margin: 0 0 12px; padding: 2px 0 2px 14px;
  border-left: 3px solid var(--accent); color: var(--text-dim);
  font-style: italic;
}
/* «Важно» — не цитата и не абзац: это то, что нельзя пропустить. */
.rt-note {
  margin: 0 0 12px; padding: 11px 13px; border-radius: 12px;
  background: #fff6e2; border: 1px solid #f0dcb4;
  font-size: 15px; line-height: 1.55;
}
.rt-list { margin: 0 0 12px; padding-left: 22px; }
.rt-list li { font-size: 15.5px; line-height: 1.6; margin-bottom: 4px; }
.rt-divider {
  border: none; border-top: 1px solid var(--border); margin: 18px 0;
}
.rt-figure { margin: 0 0 14px; }
.rt-figure img { width: 100%; border-radius: 12px; display: block; }
.rt-figure figcaption {
  font-size: 13px; color: var(--text-dim); margin-top: 6px; text-align: center;
}

/* ---------- Панель редактора ---------- */

.rt-editor {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); overflow: hidden;
}
.rt-toolbar {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
}
/* Панель в три ряда, каждый прокручивается вбок: на экране шириной 360
   двенадцать кнопок в один ряд не помещаются, а перенос ломал бы порядок
   и кнопки прыгали бы при каждом переключении. */
.rt-row {
  display: flex; gap: 6px; align-items: center;
  overflow-x: auto; scrollbar-width: none;
}
.rt-row::-webkit-scrollbar { display: none; }

.rt-tool {
  flex: 0 0 auto; min-width: 34px; height: 32px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font-size: 13px; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.rt-tool:active { background: var(--surface-soft); transform: scale(.96); }
.rt-tool sup { font-size: 9px; }

.rt-select {
  flex: 0 0 auto; height: 32px; padding: 0 8px; margin: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font-size: 13px; font-family: inherit;
}
.rt-swatches { display: inline-flex; gap: 4px; flex: 0 0 auto; align-items: center; }
.rt-swatch {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.12); cursor: pointer; padding: 0;
}
.rt-swatch-off {
  background: var(--surface); color: var(--text-dim); font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}

.rt-surface {
  padding: 14px; min-height: 180px; outline: none;
  font-size: 15.5px; line-height: 1.62;
}
/* Подсказка вместо пустоты: пустое поле без единого слова выглядит как
   поломка, а не как приглашение писать. */
.rt-surface:empty::before,
.rt-surface > p:only-child:empty::before {
  content: attr(data-placeholder); color: var(--text-dim);
}
.rt-surface figcaption:empty::before {
  content: attr(data-placeholder); color: var(--text-dim);
}
.rt-surface .rt-figure { position: relative; }

/* ---------- Обрезка фотографии ---------- */

.crop-stage {
  position: relative; margin: 10px 0; border-radius: 12px; overflow: hidden;
  background: #1c1c1c; touch-action: none; user-select: none;
}
.crop-stage img { width: 100%; display: block; }
.crop-box {
  position: absolute; box-sizing: border-box;
  border: 2px solid #fff; border-radius: 4px;
  /* Затемнение вокруг рамки одной тенью: четыре отдельных накладки на
     каждую сторону пришлось бы двигать вместе с рамкой. */
  box-shadow: 0 0 0 9999px rgba(0,0,0,.5);
  cursor: move;
}
.crop-handle {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.crop-nw { left: -13px; top: -13px; cursor: nwse-resize; }
.crop-ne { right: -13px; top: -13px; cursor: nesw-resize; }
.crop-sw { left: -13px; bottom: -13px; cursor: nesw-resize; }
.crop-se { right: -13px; bottom: -13px; cursor: nwse-resize; }
.crop-tools { display: flex; gap: 8px; }
.crop-tools .btn { flex: 1; padding: 9px 6px; font-size: 14px; }

/* ---------- О приложении ---------- */
/* Список «что показывает телефон». Значения моноширинным и по правому
   краю: их сравнивают между собой и переписывают в переписку. */
.about-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; margin: 12px 0;
}
.about-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 11px; font-size: 13.5px;
  border-bottom: 1px solid var(--border);
}
.about-row:last-child { border-bottom: none; }
.about-row span { color: var(--text-dim); flex: 0 0 auto; }
.about-row b {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; font-weight: 600; text-align: right;
  overflow-wrap: anywhere; min-width: 0;
}

/* ---------- Сервер (только для операторов) ---------- */
/* Что приедет с обновлением: короткий хеш и тема коммита. */
.server-commits {
  list-style: none; margin: 8px 0 0; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  max-height: 180px; overflow-y: auto;
}
.server-commits li {
  padding: 7px 11px; font-size: 13px; line-height: 1.4;
  border-bottom: 1px solid var(--border);
}
.server-commits li:last-child { border-bottom: none; }
.server-commits code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--text-dim); margin-right: 4px;
}
.server-log { margin-top: 12px; font-size: 13px; }
.server-log summary { cursor: pointer; color: var(--text-dim); }
.server-log pre {
  margin: 8px 0 0; padding: 10px; max-height: 220px; overflow: auto;
  background: var(--surface-soft); border-radius: var(--radius-sm);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.45; white-space: pre-wrap;
}