:root {
  /* palette — Notion paper */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F7F6F3;
  --hover: #EFEEEC;
  --ink: #37352F;
  --ink-soft: #5A584F;
  --muted: #9B9A93;
  --muted-soft: #BFBEB7;
  --rule: rgba(55, 53, 47, 0.09);
  --rule-strong: rgba(55, 53, 47, 0.16);
  --accent: #2383E2;
  --danger: #C8483B;

  /* month-grid shading — weekend, out-of-month, and both at once */
  --cal-we: #F9F8F5;
  --cal-off: #F4F3EF;
  --cal-off-we: #EFEEE9;

  /* legacy aliases (still used elsewhere in this file) */
  --border: var(--rule);
  --text: var(--ink);

  /* density / layout */
  --side-w: 248px;
  --pad-x: 32px;
  --pad-y: 18px;
  --side-item-h: 28px;
  --row-h: 116px;

  /* type */
  --display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: 'DM Serif Display', 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --t-display-xl: 56px;
  --t-display: 32px;
  --t-display-sm: 22px;
  --t-h1: 22px;
  --t-h2: 16px;
  --t-body: 14px;
  --t-small: 12px;
  --t-micro: 11px;

  /* Радиусы: карточка/кнопка — 6, поле/чип — 4. Крупнее было у прежней
     «объёмной» темы; бумага не гнётся, и скруглять её сильнее нечем. */
  --radius-lg: 8px;
  --radius-md: 6px;
  --radius: 6px;
  --radius-sm: 4px;

  /* Тень здесь означает «лежит поверх»: модал, меню, панель. Кнопки и строки
     ничего не перекрывают, поэтому у них тени нет — их отделяет линия. */
  --shadow-modal: 0 8px 32px rgba(0,0,0,0.18);
  --shadow-menu:  0 8px 24px rgba(0,0,0,0.12);
  --shadow-panel: 0 8px 40px rgba(0,0,0,0.14);
  --shadow-card:  0 1px 4px rgba(0,0,0,0.04);
  --focus-ring:   0 0 0 2px rgba(35,131,226,0.18);

  /* Размер пальца. Держится токеном, а не числом на месте, потому что это
     единственная величина здесь, которая задана не вкусом, а рукой: 44px —
     та цифра, ниже которой промахиваются, и она одинакова для крестика на
     теге и для кнопки «Сохранить». */
  --tap: 44px;

  /* Значок «Пользователи» для узкого топбара, где кнопка остаётся без подписи.
     Лежит токеном, потому что в самом правиле это нечитаемая строка в сто
     символов; та же обводка 2px, что у соседних значков в разметке. */
  --ico-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center / 17px no-repeat;
}

body.dark, [data-theme="noir"] {
  --bg: #191919;
  --surface: #1F1F1F;
  --surface-2: #2A2A2A;
  --hover: #2F2F2F;
  --ink: #E6E6E5;
  --ink-soft: #B8B8B5;
  --muted: #8B8B85;
  --muted-soft: #5A5A55;
  --rule: rgba(255, 255, 255, 0.07);
  --rule-strong: rgba(255, 255, 255, 0.13);
  --accent: #5BA0E0;
  --danger: #E66F61;
  --cal-we: #222222;
  --cal-off: #262626;
  --cal-off-we: #2A2A2A;
  --shadow-modal: 0 8px 32px rgba(0,0,0,0.55);
  --shadow-menu:  0 8px 24px rgba(0,0,0,0.45);
  --shadow-panel: 0 8px 40px rgba(0,0,0,0.5);
  --shadow-card:  0 1px 4px rgba(0,0,0,0.35);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Серая вспышка во всю строку на каждом касании — то, из-за чего интерфейс
   читается как страница, а не как приложение: iOS рисует её по границам
   элемента с обработчиком, а здесь обработчик висит на строке целиком. Гасим
   её здесь, а нажатие показываем сами — `:active` ниже, в мобильном блоке. */
* { -webkit-tap-highlight-color: transparent; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; padding: 0; transition: background .3s ease; }
body.theme-switching *, body.theme-switching *::before, body.theme-switching *::after { transition: none !important; }
.hidden { display: none !important; }

/* ── ВХОД ──
   Одна страница вместо прежних двух панелей с заставкой и «въездом» формы:
   человек пришёл ввести логин, а не смотреть анимацию, и вторая кнопка
   «Войти», открывавшая форму, стоила ему лишнего шага каждый рабочий день. */
.login-screen {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* Марка размером в пол-экрана, но на пяти процентах непрозрачности: фон, с
   которого нечего читать, и потому он не спорит с формой. */
.login-watermark {
  position: absolute; left: -160px; bottom: -140px;
  width: 620px; opacity: .05;
  pointer-events: none; user-select: none;
}
body.dark .login-watermark { filter: invert(1); opacity: .07; }

.login-top {
  position: absolute; top: 0; left: 0; right: 0; height: 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 24px; border-bottom: 1px solid var(--rule);
}
.login-lockup { height: 22px; width: auto; display: block; }
body.dark .login-lockup { filter: invert(1); }
.login-tagline {
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}

.login-col { position: relative; z-index: 2; width: 100%; max-width: 340px; padding: 0 20px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.modal-eyebrow {
  font-size: 11px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 1px;
}
.login-form-h {
  font-size: 32px; line-height: 1.1; letter-spacing: -0.02em;
  font-weight: 700; color: var(--ink); font-family: var(--display);
}
.login-sub { font-size: 14px; line-height: 1.5; color: var(--muted); margin-bottom: 14px; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field label, .login-field label {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--muted);
}
.field input, .field select,
.login-field input {
  height: 34px; padding: 0 10px;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.field input:focus, .field select:focus,
.login-field input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.field input::placeholder,
.login-field input::placeholder { color: var(--muted-soft); }
.login-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 0; }
/* Пустая строка ошибки не должна раздвигать форму: место под неё берётся
   тогда, когда есть что сказать. */
.login-error { font-size: 12px; color: var(--danger); margin-top: -6px; }
.login-error:empty { display: none; }
/* «Письмо уже в пути» is not an error and must not read as one. */
.login-error.ok { color: var(--muted); }

.login-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 11px; color: var(--muted-soft);
}
.login-alt {
  padding: 0; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 11px; color: var(--muted-soft);
}
.login-alt:hover { color: var(--ink); }

.btn-primary {
  width: 100%; height: 38px; margin-top: 6px;
  background: var(--ink); color: var(--bg);
  border: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: filter .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary:hover { filter: brightness(1.15); }
.btn-primary .arr { display: inline-block; transition: transform .18s ease; }
.btn-primary:hover .arr { transform: translateX(4px); }
.btn-enter { /* alias kept for backwards compat */ }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .login-screen, .login-screen * { animation: none !important; transition: none !important; }
}
@media (max-width: 640px) {
  /* Водяной знак на телефоне занимает половину экрана и ничего не сообщает. */
  .login-watermark { display: none; }
  .login-col { max-width: 420px; padding: 0 22px; }
  .login-form-h { font-size: 28px; }
  /* Поля под палец; 16px, иначе iOS зумит страницу на фокусе. */
  .login-field input { height: 48px; font-size: 16px; }
  .btn-primary { height: 48px; font-size: 15px; }
  /* «Забыли пароль?» — 13 пикселей высотой, и это единственная дверь для
     того, кто уже не может войти. Растёт область нажатия, а не надпись. */
  .login-alt { padding: 12px 4px; }
}

/* ── APP SHELL ── */
.app {
  display: grid;
  grid-template-columns: var(--side-w, 248px) 1fr;
  /* dvh, не vh: на iOS `100vh` — это высота с убранными панелями браузера,
     поэтому при показанных панелях документ выше экрана, и оболочка, которая
     сама ничего не скроллит, всё равно резинится под пальцем вместе с топбаром.
     `vh` остаётся строкой выше как запас для браузера, не знающего `dvh`. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  border-radius: 0;
  border: none;
  box-shadow: none;
  transition: grid-template-columns .26s cubic-bezier(.65,0,.2,1);
}
.app.sidebar-hidden { grid-template-columns: 0 1fr; }
.app.sidebar-hidden .sidebar { width: 0; padding: 0; border-right-color: transparent; overflow: hidden; }
.app[data-density="compact"] { --row-h: 100px; --side-item-h: 26px; --pad-x: 24px; }

/* ── SIDEBAR ── */
.sidebar {
  background: var(--surface-2);
  border-right: 1px solid var(--rule, rgba(55,53,47,0.09));
  padding: 0 8px 12px;
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
  transition: width 0.2s ease, padding 0.2s ease, border-color 0.2s ease;
  min-width: 0;
}
#sidebar-body { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.side-foot {
  flex-shrink: 0;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--rule, rgba(55,53,47,0.09));
}
.side-foot-user {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: var(--radius, 6px);
  cursor: pointer;
}
.side-foot-user:hover { background: var(--hover, #EFEEEC); }
.side-foot-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #fff;
  flex-shrink: 0;
}
.side-foot-info { min-width: 0; flex: 1; }
.side-foot-name {
  font-size: 13px; font-weight: 500; color: var(--ink, #37352F);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
.side-foot-role {
  font-size: 11px; color: var(--muted, #9B9A93);
  line-height: 1.2; margin-top: 1px;
}

/* Шапка сайдбара — 64px и линия снизу: логотип стоит в своей полосе, а не в
   одном ряду с навигацией, иначе он читается как первый её пункт. */
/* Полоса логотипа ровно той же высоты, что топбар: линия под ней и линия под
   «Расписанием» — это одна горизонтальная линия через весь экран. Стоило ей
   разойтись на десяток пикселей, как весь верх выглядел собранным на глаз. */
.brand {
  display: flex; align-items: center;
  height: 52px; flex-shrink: 0;
  margin: 0 -8px 8px; padding: 0 16px;
  border-bottom: 1px solid var(--rule, rgba(55,53,47,0.09));
  cursor: pointer; border-left: none; border-right: none; border-top: none;
  background: transparent; width: calc(100% + 16px); text-align: left;
}
.brand-lockup {
  height: 28px; width: auto; display: block;
  /* Знак нарисован цветом ink по прозрачному фону: в тёмной теме его
     достаточно вывернуть, отдельного файла для неё не нужно. */
}
body.dark .brand-lockup { filter: invert(1); }

/* primary nav */
.nav-list { display: flex; flex-direction: column; gap: 1px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 0 10px; height: 32px; border: none;
  background: transparent; text-align: left; width: 100%;
  font-size: 13.5px; color: var(--ink, #37352F);
  border-radius: var(--radius-sm, 4px); cursor: pointer;
  transition: background .12s; white-space: nowrap;
  font-family: inherit; position: relative;
  /* The primary nav entries are <a href> so that the browser can open them in a
     tab and copy their address; nothing about them should look like body text. */
  text-decoration: none;
}
.nav-item:hover { background: var(--hover, #EFEEEC); }
/* Активный пункт — заливка, а не обводка с тенью: в плоской теме приподнятая
   строка читается как кнопка, которую ещё не нажали. */
.nav-item.active { background: var(--hover, #EFEEEC); font-weight: 500; }
.nav-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-item .nav-ic {
  width: 16px; height: 16px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft, #5A584F);
}
.nav-item .nav-ic svg { width: 16px; height: 16px; }
.nav-item.active .nav-ic { color: var(--ink, #37352F); }

/* keep old .logo for any leftover */
.logo { display: none; }

.sidebar-section, .side-section { display: flex; flex-direction: column; gap: 1px; margin-top: 12px; }
.sidebar-section h4, .side-section h4 {
  padding: 6px 10px 4px;
  font-size: 11px; letter-spacing: 0.05em;
  color: var(--muted, #9B9A93);
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  display: flex; align-items: center; justify-content: space-between;
}
.model-list { display: flex; flex-direction: column; gap: 0; }
.model-item {
  display: flex; align-items: center; gap: 9px;
  padding: 0 9px;
  height: var(--side-item-h, 28px);
  border: none; background: transparent;
  text-align: left; width: 100%;
  font-size: 13.5px; color: var(--ink-soft, #5A584F);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: background .1s, color .1s;
  white-space: nowrap; overflow: hidden;
  font-family: inherit;
}
.model-item:hover { background: var(--hover, #EFEEEC); }
.model-item.active {
  background: var(--hover, #EFEEEC); color: var(--ink, #37352F); font-weight: 500;
}
.model-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0;
}
/* The two "всё сразу" swatches. They used to be gradients written inline next
   to dots whose colour comes from the database, which left the sidebar with a
   style attribute that was a literal in one branch and data in the other — and
   only one of those can go through _cssColor. Here they are neither. */
.model-dot-all-models {
  background: linear-gradient(135deg,#C8A882 0%,#C8A882 33%,#8BA89B 33%,#8BA89B 66%,#B08BB5 66%);
}
.model-dot-all-statuses {
  background: linear-gradient(135deg,#3AB06A 0%,#3AB06A 33%,#D97706 33%,#D97706 66%,#3B82F6 66%);
}
.view-count {
  margin-left: auto;
  font-size: 12px; color: var(--muted, #9B9A93);
  font-variant-numeric: tabular-nums;
  background: transparent; padding: 0 4px; border-radius: 0;
}

/* Manage-statuses gear in the sidebar section header */
.sb-add-btn {
  border: none; background: transparent; cursor: pointer;
  width: 20px; height: 20px; border-radius: var(--radius-sm, 4px);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; color: var(--muted, #9B9A93);
  padding: 0; font-family: inherit;
  transition: background .1s, color .1s;
}
.sb-add-btn:hover { background: var(--hover, #EFEEEC); color: var(--ink, #37352F); }

/* ── Status manager modal ── */
.stm-modal { width: 460px; }
.stm-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.stm-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px; border-radius: var(--radius-md, 8px);
  border: 1px solid transparent;
  background: var(--surface, #fff);
  transition: border-color .1s, box-shadow .1s, opacity .1s;
}
.stm-row.dragging { opacity: 0.4; }
.stm-row.drop-above { box-shadow: 0 -2px 0 var(--accent, #2563EB); }
.stm-row.drop-below { box-shadow: 0 2px 0 var(--accent, #2563EB); }
.stm-drag {
  cursor: grab; color: var(--muted, #9B9A93); font-size: 13px;
  letter-spacing: -2px; user-select: none; flex-shrink: 0; padding: 0 2px;
}
.stm-color {
  position: relative; width: 24px; height: 24px; border-radius: 50%;
  flex-shrink: 0; cursor: pointer; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10) inset;
}
.stm-color input[type="color"] {
  position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px);
  border: none; padding: 0; background: transparent; cursor: pointer; opacity: 0;
}
.stm-name {
  flex: 1; min-width: 0;
  padding: 6px 9px; font-size: 14px; font-family: inherit;
  color: var(--ink, #37352F);
  background: var(--bg, #FCFCFA);
  border: 1px solid var(--rule, rgba(55,53,47,0.14));
  border-radius: var(--radius-sm, 5px); outline: none;
}
.stm-name:focus { border-color: var(--accent, #2563EB); }
.stm-count {
  font-size: 12px; color: var(--muted, #9B9A93);
  font-variant-numeric: tabular-nums; min-width: 20px; text-align: right;
}
.stm-del {
  border: none; background: transparent; cursor: pointer;
  width: 26px; height: 26px; border-radius: var(--radius-sm, 5px);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--muted, #9B9A93); flex-shrink: 0;
  transition: background .1s, color .1s;
}
.stm-del:hover { background: rgba(239,68,68,0.14); color: #EF4444; }
.stm-add {
  display: flex; align-items: center; gap: 9px;
  padding-top: 14px; border-top: 1px solid var(--rule, rgba(55,53,47,0.10));
}
.stm-add-btn {
  padding: 7px 14px; font-size: 13px; font-family: inherit; font-weight: 500;
  border: none; border-radius: var(--radius-sm, 5px); cursor: pointer;
  background: var(--ink, #37352F); color: #fff; flex-shrink: 0;
}
.stm-add-btn:hover { opacity: 0.9; }

/* Списки в форме события — та же оболочка, что у статусов: строка, счётчик,
   корзина. Отличие одно и оно по делу — значение здесь не правится на месте,
   потому что переименование в справочнике не переименует его в событиях. */
.stm-group + .stm-group { margin-top: 20px; }
.stm-group-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted, #9B9A93); margin-bottom: 8px;
}
.stm-static {
  flex: 1; min-width: 0; padding: 6px 2px;
  font-size: 14px; color: var(--ink, #37352F); overflow-wrap: anywhere;
}
.stm-empty { font-size: 13px; color: var(--muted, #9B9A93); padding: 2px 2px 4px; }

.model-profile {
  display: flex; flex-direction: column;
  gap: 8px; padding: 10px;
  margin: 4px 4px 8px;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--rule, rgba(55,53,47,0.09));
  border-radius: var(--radius, 6px);
}
.model-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 13px; font-weight: 600; color: #fff;
}
.model-profile-name {
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 14px; font-weight: 600; line-height: 1.2;
  color: var(--ink, #37352F);
}
.model-stats { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.model-stat {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--ink-soft, #5A584F);
}
.model-stat-label { color: var(--muted, #9B9A93); }
.model-stat-value { font-weight: 600; font-variant-numeric: tabular-nums; }

.upcoming-list { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.upcoming-item {
  padding: 6px 8px; border-radius: var(--radius-sm, 4px);
  background: transparent;
  border-left: 2px solid var(--rule-strong, rgba(55,53,47,0.16));
}
.upcoming-item-date {
  font-size: 11px; color: var(--muted, #9B9A93);
  margin-bottom: 2px; font-variant-numeric: tabular-nums;
}
.upcoming-item-title { font-size: 12px; font-weight: 500; color: var(--ink, #37352F); }

/* ── MAIN ── */
.main {
  display: flex; flex-direction: column;
  overflow: hidden; min-width: 0;
  position: relative;
  background: var(--bg, #FFFFFF);
}

/* ── TOPBAR ── */
.topbar {
  display: flex; align-items: center;
  padding: 0 24px 0 18px;
  border-bottom: 1px solid var(--rule, rgba(55,53,47,0.09));
  gap: 8px; height: 52px;
  background: var(--bg, #FFFFFF);
  flex-shrink: 0;
  position: relative; /* positioning context for the mobile search overlay */
}
.topbar-crumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--muted, #9B9A93);
  flex-shrink: 0;
}
.topbar-crumb .it {
  font-weight: 500; color: var(--ink, #37352F);
  padding: 3px 6px; border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}
.topbar-crumb .it:hover { background: var(--hover, #EFEEEC); }
.topbar-crumb .sep { color: var(--muted-soft, #BFBEB7); }
.topbar-spacer { flex: 1; }

.tb-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--ink-soft, #5A584F);
  border-radius: var(--radius-sm, 4px);
  display: inline-flex; align-items: center;
  gap: 5px; height: 28px; flex-shrink: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.tb-btn:hover { background: var(--hover, #EFEEEC); color: var(--ink, #37352F); }
.tb-btn.icon {
  padding: 0; width: 28px;
  justify-content: center; font-size: 15px;
}
.tb-btn.icon svg { width: 16px; height: 16px; display: block; }
.hamburger-btn { font-size: 15px; }

/* live clock chip */
.now-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; font-size: 12.5px; color: var(--ink-soft, #5A584F);
  font-variant-numeric: tabular-nums;
  padding: 0 10px; white-space: nowrap;
  flex-shrink: 0; /* never squish into neighbouring icons */
  background: none; border: 0; border-radius: 14px; font-family: inherit;
}
.now-chip:hover { background: var(--hover, #F2F1EE); }
/* Часы рядом со временем: чип открывает мировые часы, и это должно быть видно
   до того, как по нему щёлкнут наугад. */
.now-ico { width: 13px; height: 13px; color: var(--muted, #9B9A93); }
.now-chip .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #3AB06A;
  box-shadow: 0 0 0 0 rgba(58,176,106,0.5);
  animation: nowpulse 2.6s ease-out infinite;
}
.now-chip .cap { text-transform: capitalize; }

/* World clocks — revealed on hover (desktop) or tap (mobile) over the date/time. */
.now-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.now-chip { cursor: pointer; }
.world-clocks-pop {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 190px; padding: 6px;
  background: var(--bg, #fff); border: 1px solid var(--rule-strong, #E9E8E5);
  border-radius: var(--radius, 8px); box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.world-clocks-pop.open { display: block; }
@media (hover: hover) { .now-wrap:hover .world-clocks-pop { display: block; } }
.world-clocks-pop .wc-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 5px 8px; border-radius: var(--radius, 6px);
  font-size: 13px; color: var(--ink, #37352F); font-variant-numeric: tabular-nums;
}
.world-clocks-pop .wc-item:hover { background: var(--hover, #F2F1EE); }
.world-clocks-pop .wc-city { color: var(--muted, #8B8680); }
.world-clocks-pop .wc-time { font-weight: 500; }
@keyframes nowpulse {
  0%   { box-shadow: 0 0 0 0 rgba(58,176,106,0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(58,176,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(58,176,106,0); }
}

/* search with icon */
.search-wrap { position: relative; display: flex; align-items: center; flex: 0 1 260px; min-width: 190px; }
.search-wrap .search-ic {
  position: absolute; left: 9px; width: 14px; height: 14px;
  color: var(--muted, #9B9A93); pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.search-wrap .search-ic svg { width: 14px; height: 14px; display: block; }

/* "+ Событие" CTA */
.btn-new {
  background: var(--ink, #37352F); color: var(--bg, #FFFFFF);
  border: none; padding: 0 12px; height: 30px;
  font-size: 13px; font-weight: 600;
  border-radius: 15px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: filter .14s, transform .14s, box-shadow .14s; font-family: inherit; flex-shrink: 0;
}
.btn-new:hover { filter: brightness(1.15); }
.btn-new svg { display: block; }

/* mobile-only search affordances (hidden on desktop) */
.search-toggle { display: none; }
.search-close {
  display: none;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted, #9B9A93); font-size: 15px; line-height: 1;
  padding: 6px 8px; margin-left: 2px; flex-shrink: 0;
}

/* legacy topbar-btn alias */
.topbar-btn {
  background: transparent; border: 1px solid transparent;
  padding: 4px 8px; font-size: 13px;
  color: var(--ink-soft, #5A584F);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer; height: 28px;
  font-family: inherit;
}
.topbar-btn:hover { background: var(--hover, #EFEEEC); color: var(--ink, #37352F); }

/* search */
.search-input {
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  padding: 0 52px 0 28px;
  font-family: inherit; font-size: 13px;
  color: var(--ink, #37352F);
  width: 100%; height: 30px;
  outline: none; border-radius: var(--radius-sm, 4px);
  transition: border-color .15s, box-shadow .15s;
}
.search-input:focus {
  border-color: var(--accent, #2383E2);
  box-shadow: var(--focus-ring, 0 0 0 2px rgba(35,131,226,0.18));
}

/* ── KBD atom + ⌘K hint pill (v7) ── */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 19px; padding: 0 5px;
  font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--muted);
  background: var(--surface-2);
  border: 1px solid color-mix(in oklch, var(--rule-strong) 70%, transparent);
  border-radius: 5px;
  box-shadow: 0 1px 0 color-mix(in oklch, var(--rule-strong) 50%, transparent);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.kbd-hint {
  display: inline-flex; align-items: center; gap: 3px;
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  cursor: pointer; pointer-events: auto;
  background: transparent; border: none; padding: 0;
}
.kbd-hint .kbd { background: var(--bg); }

/* ── COMMAND PALETTE (⌘K) ── */
.cmd-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 14vh 20px 20px;
  background: color-mix(in oklch, var(--ink) 28%, transparent);
  backdrop-filter: blur(4px) saturate(1.1);
  -webkit-backdrop-filter: blur(4px) saturate(1.1);
  animation: cmdFade .14s ease;
}
@keyframes cmdFade { from { opacity: 0; } to { opacity: 1; } }
.cmd-panel {
  width: min(560px, 94vw); max-height: 64vh;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow-modal); overflow: hidden;
  transform-origin: top center; animation: cmdRise .2s cubic-bezier(.22,.61,.36,1);
}
@keyframes cmdRise { from { opacity: 0; transform: translateY(-12px) scale(.985); } to { opacity: 1; transform: none; } }
.cmd-search { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; border-bottom: 1px solid var(--rule); position: relative; flex-shrink: 0; }
.cmd-search-ic { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; display: inline-flex; }
.cmd-search-ic svg { width: 16px; height: 16px; }
.cmd-input { flex: 1; border: none; background: transparent; outline: none; font-size: 14.5px; color: var(--ink); font-weight: 400; font-family: inherit; }
.cmd-input::placeholder { color: var(--muted); }
.cmd-list { overflow-y: auto; padding: 6px; min-height: 0; }
.cmd-empty { padding: 30px 10px; text-align: center; color: var(--muted); font-size: 13.5px; }
.cmd-group { margin-bottom: 2px; }
.cmd-group-h { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 9px 10px 4px; }
.cmd-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  border: none; background: transparent; text-align: left;
  height: 36px; padding: 0 10px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background .08s; font-family: inherit;
}
.cmd-row.active { background: var(--hover); }
/* Иконка команды без подложки: в списке из десяти строк десять серых квадратов
   читаются как сетка, а не как иконки. */
.cmd-ic {
  width: 16px; height: 16px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  font-size: 11px; font-weight: 700;
}
.cmd-ic svg { width: 16px; height: 16px; }
.cmd-row.active .cmd-ic { color: var(--ink); }
.cmd-label {
  flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); font-weight: 400;
  display: flex; align-items: baseline; gap: 8px; overflow: hidden;
}
.cmd-sub { font-size: 12px; color: var(--muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-row .kbd { opacity: 0; transition: opacity .1s; }
.cmd-row.active .kbd { opacity: 1; }
.cmd-foot { display: flex; align-items: center; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--rule); flex-shrink: 0; background: var(--surface-2); }
.cmd-foot span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .cmd-overlay, .cmd-panel { animation: none !important; }
}
.search-input::placeholder { color: var(--muted, #9B9A93); }

.user-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted, #9B9A93);
  padding: 0 6px;
}
.user-badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* ── PAGE HEAD (title row) ── */
.page-head {
  padding: 26px var(--pad-x, 24px) 14px;
  display: flex; align-items: center;
  gap: 16px; flex-shrink: 0;
}
.page-head-l { display: flex; flex-direction: column; gap: 6px; }
.page-head-title { display: flex; align-items: baseline; gap: 12px; }
.page-head-title h1 {
  font-family: var(--display, 'Inter', sans-serif);
  font-size: 34px;
  font-weight: 700; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink, #37352F);
  margin: 0;
  cursor: pointer;
}
.page-head-title h1:hover { color: var(--ink-soft, #5A584F); }
/* Год того же кегля, что и месяц, но приглушённый: «Август 2026» — одна
   строка, в которой спрашивают месяц, а год лишь уточняет. */
.page-head-title .yr {
  font-size: 34px; font-weight: 600; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--muted, #9B9A93);
  font-variant-numeric: tabular-nums;
}
[data-type="editorial"] .page-head-title h1 { font-weight: 400; }

.month-nav { display: flex; gap: 2px; align-items: center; margin-left: 6px; }
.icon-btn {
  width: 26px; height: 26px; border: none;
  background: transparent;
  border-radius: var(--radius-sm, 4px);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft, #5A584F);
  font-size: 16px; cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--hover, #EFEEEC); color: var(--ink, #37352F); }
.nav-btn { /* legacy */
  width: 28px; height: 28px; border-radius: var(--radius-sm, 4px);
  border: none; background: transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft, #5A584F); font-size: 14px; line-height: 1;
}
.nav-btn:hover { background: var(--hover, #EFEEEC); color: var(--ink, #37352F); }
.today-btn {
  border: 1px solid var(--rule-strong);
  background: var(--bg, #FFFFFF);
  padding: 0 14px; font-size: 12.5px;
  color: var(--ink-soft, #5A584F);
  border-radius: 14px;
  font-weight: 500; height: 28px;
  cursor: pointer; font-family: inherit; margin-left: 4px;
  transition: background .14s, color .14s;
}
.today-btn:hover { background: var(--hover, #EFEEEC); color: var(--ink, #37352F); }
.page-head-spacer { flex: 1; }
.head-stat {
  font-size: 13px; color: var(--muted, #9B9A93);
  display: inline-flex; align-items: center; gap: 6px;
}
.head-stat b { color: var(--ink, #37352F); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Hide calendar-only sidebar sections (Вид/Статус) when not in calendar mode.
   Документооборот was left out of this list when it was added and showed the
   calendar's filters over a table of visas; Финансы is here from the start. */
body.mode-db .sb-cal-only,
body.mode-mail .sb-cal-only,
body.mode-docs .sb-cal-only,
body.mode-finance .sb-cal-only,
body.mode-wiki .sb-cal-only { display: none !important; }

/* Hide topbar search (incl. ⌘K hint pill) outside Schedule */
body.mode-db .search-wrap,
body.mode-mail .search-wrap,
body.mode-docs .search-wrap,
body.mode-finance .search-wrap,
body.mode-wiki .search-wrap { display: none !important; }

/* ── VIEW TOGGLE (pill chips · v6) ── */
.view-toggle {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--rule, rgba(55,53,47,0.09));
  padding: 8px var(--pad-x, 24px) 10px;
  margin-top: 4px;
  background: transparent;
  border-radius: 0;
  flex-shrink: 0;
}
.view-toggle button, .vt-btn {
  border: 1px solid transparent; background: transparent;
  height: 34px; padding: 0 14px; font-size: 13px;
  color: var(--muted, #9B9A93);
  margin-bottom: 0;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; font-family: inherit;
  white-space: nowrap;
  box-shadow: none;
  border-radius: 999px;
  transition: background .14s, color .14s, box-shadow .14s, border-color .14s;
}
.view-toggle button .ic, .vt-btn .ic { font-size: 13px; color: var(--muted, #9B9A93); display: inline-flex; align-items: center; }
.view-toggle button .ic svg, .vt-btn .ic svg { width: 15px; height: 15px; display: block; }
.view-toggle button.active, .vt-btn.active {
  color: var(--bg);
  border-color: var(--ink);
  background: var(--ink, #37352F);
  font-weight: 600;
}
.view-toggle button, .vt-btn { border-radius: 17px; }
.view-toggle button.active .ic, .vt-btn.active .ic { color: var(--bg); }
.view-toggle button:not(.active):hover, .vt-btn:not(.active):hover { color: var(--ink, #37352F); background: var(--hover); }
.vt-underline { display: none !important; }

body[data-role="model"] #vt-list,
body[data-role="model"] #vt-year,
body[data-role="model"] #vt-kanban,
body[data-role="model"] #vt-timeline { display: none !important; }

/* ── CONTENT AREA ── */
.content-area { flex: 1; display: flex; overflow: hidden; }
.views-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* ── MONTH VIEW ── */
.cal-container {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 0 var(--pad-x) var(--pad-x);
  background: var(--bg);
}
.day-headers {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: sticky; top: 0; z-index: 10; flex-shrink: 0;
}
.day-header {
  padding: 8px 10px; text-align: left;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  border-right: 1px solid var(--rule);
}
.day-header:last-child { border-right: none; }

/* Week-row grid · v6 — fixed cells */
.cal-grid {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}

.cal-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  position: relative;
}

/* ── Multi-day bars overlay (month view) ── */
.cal-bars {
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 4;
  padding: 0 2px;
}
.cal-bar {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  display: flex; align-items: center; gap: 7px;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--ev-bg, var(--surface-2));
  color: var(--ev-text, var(--ink));
  border: none;
  border-left: 3px solid var(--ev-accent, var(--rule-strong));
  transition: left 0.16s cubic-bezier(.22,.61,.36,1),
              width 0.16s cubic-bezier(.22,.61,.36,1),
              filter .14s;
  animation: barIn 0.16s ease both;
}
.cal-bar:hover { filter: brightness(0.97); }
.cal-bar .ev-head { flex-shrink: 0; }
.cal-bar .ev-foot { flex-shrink: 0; }
.cal-bar .ev-title-main { flex: 0 1 auto; }
.cal-bar .ev-title-main { flex: none; }
@keyframes barIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.cal-bar.cont-l { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; }
.cal-bar.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cell-bars-spacer { flex-shrink: 0; pointer-events: none; }

.day-cell {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 6px 8px 8px;
  cursor: pointer;
  background: var(--bg);
  transition: background .08s;
  display: flex; flex-direction: column; gap: 2px;
  min-height: var(--row-h, 116px);
  position: relative;
}
/* Four shades, weakest signal first: a weekend is tinted, a day outside the
   month the header names is greyed and its number muted. The two stack, so a
   weekend in a neighbouring month reads as the quietest cell on the grid. */
.day-cell.weekend { background: var(--cal-we); }
.day-cell.off-month { background: var(--cal-off); }
.day-cell.off-month.weekend { background: var(--cal-off-we); }
.day-cell.off-month .day-num { color: var(--muted-soft); }
.day-cell.off-month .day-month { color: var(--muted-soft); }
/* Doubled class so hover and selection outrank the two-class shading above. */
.day-cell.day-cell:hover { background: var(--hover); }
.day-cell.day-cell.selected { background: var(--hover); }

.day-num {
  font-size: 13px; color: var(--ink-soft);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: space-between;
  gap: 5px; height: 22px;
  margin-bottom: 2px;
}
.today-badge {
  min-width: 22px; height: 22px; padding: 0 7px;
  background: var(--ink); color: var(--bg);
  border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.day-add-btn {
  width: 20px; height: 20px; border-radius: var(--radius-sm);
  border: none; background: transparent; cursor: pointer;
  font-size: 14px; color: var(--muted); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .1s, background .1s; flex-shrink: 0;
  font-family: inherit;
}
.day-cell:hover .day-add-btn { opacity: 1; }
.day-add-btn:hover { background: var(--hover); color: var(--ink); }

/* ── Drag & drop ── */
.ev-card[draggable="true"],
.week-event[draggable="true"] { cursor: grab; }
.ev-card.dragging,
.week-event.dragging { opacity: 0.35; }
.day-cell.drag-over,
.week-col-body.drag-over {
  background: rgba(55,53,47,0.04) !important;
  outline: 2px dashed rgba(55,53,47,0.18);
  outline-offset: -3px;
}
body.dark .day-cell.drag-over,
body.dark .week-col-body.drag-over {
  background: rgba(255,255,255,0.05) !important;
  outline-color: rgba(255,255,255,0.18);
}

/* ── Event resize handle ── */
.ev-resize-handle {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 8px;
  cursor: ew-resize;
  opacity: 0;
  background: transparent;
  z-index: 3;
  transition: opacity .12s, background .12s;
}
.ev-card:hover > .ev-resize-handle,
.wk-allday-bar:hover > .ev-resize-handle { opacity: 1; }
.ev-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%; right: 2px;
  width: 3px; height: 14px;
  margin-top: -7px;
  border-radius: 2px;
  background: var(--rule-strong);
}
.ev-resize-handle:hover { background: rgba(35,131,226,0.10); }
.ev-resize-handle:hover::after { background: var(--accent); }
.ev-resize-handle-bar { width: 6px; }
.ev-resize-handle-bar::after { height: 10px; margin-top: -5px; }
body.resizing-ev,
body.resizing-ev * { cursor: ew-resize !important; user-select: none; }
/* While resizing, event cards must not intercept the pointer — otherwise the
   stretched bar sits on top of the cells beneath it and the cursor can never
   reach an earlier day to shrink the span. Let elementFromPoint hit the cell. */
body.resizing-ev .cal-bar,
body.resizing-ev .ev-card { pointer-events: none !important; }
.day-cell.resize-target,
.wk-col.resize-target {
  background: rgba(35,131,226,0.10) !important;
  outline: 2px dashed var(--accent);
  outline-offset: -3px;
}
body.dark .day-cell.resize-target,
body.dark .wk-col.resize-target {
  background: rgba(80,160,255,0.14) !important;
}

/* ── Карточка события ──
   Заливка — цвет статуса, слева полоса того же статуса, текст — тёмный тон из
   той же тройки. Цвет здесь несёт смысл целиком: «подтверждено» и «опцион»
   должны различаться с другого конца комнаты, а не по подписи мелким шрифтом. */
.ev-card {
  position: relative;
  background: var(--ev-bg, var(--surface-2));
  color: var(--ev-text, var(--ink));
  border: none;
  border-left: 3px solid var(--ev-accent, var(--rule-strong));
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  overflow: hidden; box-sizing: border-box;
  cursor: pointer; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 4px;
  transition: filter .14s;
}
.ev-card:hover { filter: brightness(0.97); }
/* Неделя даёт каждому событию втрое больше места, чем месяц, и заливка во всю
   карточку там из акцента превращается в фон экрана: остаётся белая карточка
   с полосой статуса слева. */
.ev-card.ev-plain {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ev-accent, var(--rule-strong));
  border-radius: var(--radius);
  padding: 9px 10px; gap: 5px;
}
.ev-card.ev-plain:hover { filter: none; background: var(--hover); }
.ev-card.ev-plain .ev-agency { color: var(--muted); opacity: 1; }
/* Поездка — единственное событие, которое живёт неделями; пунктир отличает её
   от джоба, не тратя на это ни цвета, ни строки. */
.ev-card.ev-multiday { border-left-style: dashed; }

.ev-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ev-model-name {
  font-size: 11px; font-weight: 400; color: inherit; opacity: .7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* footer row: status + agency */
.ev-foot { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.ev-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; white-space: nowrap; flex-shrink: 0;
}
.ev-status .ev-dot { width: 6px; height: 6px; }

/* ── Date range tag for multi-day events ── */
.ev-date-range {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Shared inner content ── */
.ev-title {
  font-size: 12px; font-weight: 500; color: var(--ink);
  display: flex; align-items: center; gap: 4px;
  overflow: hidden; line-height: 1.3;
}
.ev-page-icon { font-size: 11px; opacity: 0.4; flex-shrink: 0; line-height: 1; }
.ev-title-main {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
  font-size: 12.5px; font-weight: 600; color: inherit;
  line-height: 1.3; letter-spacing: -0.01em;
}
.ev-model-prefix { font-weight: 400; color: var(--muted); font-size: 11px; }
.ev-title-dot { color: var(--muted-soft); font-weight: 400; }

.ev-status-row {
  display: flex; align-items: center;
  overflow: hidden;
}
.ev-status-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 500;
  background: var(--bg); color: var(--ink);
  white-space: nowrap; overflow: hidden; max-width: 100%;
}
.ev-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ev-status-lbl {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ev-agencies {
  display: flex; gap: 3px; flex-wrap: nowrap;
  overflow: hidden;
}
/* Агентство — не чип, а приписка: в карточке уже есть цвет статуса и точка,
   третья заливка рядом превращает её в мозаику. */
.ev-agency {
  font-size: 11px; font-weight: 400; color: inherit; opacity: .6;
  background: none; padding: 0;
  white-space: nowrap; max-width: 130px;
  overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0;
}

.ev-jobrow { overflow: hidden; }
.ev-job-chip {
  font-size: 11px; font-weight: 400;
  background: none; color: inherit; opacity: .55;
  padding: 0;
  white-space: nowrap; display: inline-block;
}


/* ── TIMELINE VIEW ── */
.timeline-container { flex: 1; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); }
.tl-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* Header */
.tl-head-row {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.tl-corner {
  flex-shrink: 0;
  border-right: 1px solid var(--rule);
  background: var(--bg);
}
.tl-head-outer { flex: 1; overflow: hidden; }
.tl-head-inner { display: flex; }
.tl-day-hd {
  flex-shrink: 0; text-align: center;
  border-right: 1px solid var(--rule);
  padding: 10px 2px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.tl-day-hd.tl-we { background: var(--surface-2); }
.tl-day-hd.tl-tod-hd { background: transparent; }
.tl-dnum { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.tl-dnum.tl-tod-num {
  background: var(--accent); color: #fff;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.tl-day-hd small {
  font-size: 10px; color: var(--muted);
  letter-spacing: 0; text-transform: none;
}
.tl-day-hd.tl-tod-hd small { color: var(--accent); }

/* Body */
.tl-body-row { display: flex; flex: 1; overflow: hidden; }
.tl-name-col {
  flex-shrink: 0; overflow: hidden;
  border-right: 1px solid var(--rule);
  background: var(--bg);
}
.tl-name-cell {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--rule);
}
.tl-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 11px;
  font-weight: 600; color: #fff;
}
.tl-name-txt {
  font-size: 13px; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Events area */
.tl-ev-outer { flex: 1; overflow: auto; }
.tl-ev-row { position: relative; border-bottom: 1px solid var(--rule); flex-shrink: 0; }
.tl-bg-col {
  position: absolute; top: 0; bottom: 0;
  border-right: 1px solid var(--rule);
}
.tl-bg-col.tl-we-bg { background: var(--surface-2); }
.tl-bg-col.tl-tod-bg {
  background: transparent;
  border-left: 2px solid var(--accent);
}

/* Event bars */
.tl-ev-bar {
  position: absolute; border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px; font-weight: 500;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: grab; user-select: none;
  transition: filter 0.15s;
}
.tl-ev-bar:hover { filter: brightness(0.92); }
.tl-ev-bar:active { cursor: grabbing; }

/* ── KANBAN VIEW ── */
.kanban-container {
  flex: 1; overflow-x: auto; overflow-y: hidden;
  background: var(--bg);
}
.kanban-board {
  display: flex; gap: 12px;
  padding: 0 var(--pad-x) var(--pad-x);
  height: 100%;
  align-items: flex-start; min-width: min-content;
  box-sizing: border-box;
}
.kb-col {
  width: 280px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--surface-2);
  border-radius: var(--radius);
  border: none;
  max-height: 100%; overflow: hidden;
  padding: 10px;
  gap: 6px;
}
.kb-col-header {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 6px; flex-shrink: 0;
}
.kb-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.kb-col-title { font-size: 13px; font-weight: 600; flex: 1; color: var(--ink); }
.kb-col-count {
  font-size: 12px; color: var(--muted);
  background: transparent; padding: 0; border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.kb-col-body {
  flex: 1; overflow-y: auto;
  padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 80px;
}
.kb-col-body.drag-over {
  background: var(--hover);
  outline: 2px dashed var(--rule-strong); outline-offset: -4px;
  border-radius: var(--radius-sm);
}
.kb-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: grab;
  transition: border-color .12s, box-shadow .12s;
  flex-shrink: 0;
  position: relative;
}
.kb-card-del {
  position: absolute;
  top: 4px;
  right: 4px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
  line-height: 1;
}
.kb-card:hover .kb-card-del { opacity: 1; }
.kb-card-del:hover { background: var(--danger, #FEE2E2); color: #991B1B; }
.kb-card:hover { border-color: var(--rule-strong); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.kb-card.dragging { opacity: 0.35; }
.kb-card-title {
  font-size: 13px; font-weight: 500; color: var(--ink);
  margin-bottom: 5px; line-height: 1.35;
}
.kb-card-meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.kb-card-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.kb-empty { font-size: 12px; color: var(--muted); padding: 8px 4px; text-align: center; }

/* ── YEAR VIEW ── */
.year-container {
  flex: 1; overflow-y: auto;
  padding: 0 var(--pad-x) var(--pad-x);
  background: var(--bg);
}
.year-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.year-month {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.year-month:hover { border-color: var(--rule-strong); background: var(--surface-2); }
.year-month-title {
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink); margin-bottom: 10px;
}
.year-mini-headers {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.year-mini-headers span {
  text-align: center; font-size: 10px; font-weight: 500;
  color: var(--muted); text-transform: none; letter-spacing: 0;
}
.year-mini-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.year-day {
  text-align: center; font-size: 10px; color: var(--muted);
  padding: 2px 0; line-height: 1.7; border-radius: 3px;
  position: relative;
  font-variant-numeric: tabular-nums;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.year-day.today {
  background: var(--accent); color: #fff;
  font-weight: 600;
}
.year-day.has-ev { color: var(--ink); font-weight: 500; }
.year-day.has-ev::after {
  content: ''; position: absolute;
  bottom: 1px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--dot, var(--accent));
}
.year-day.today.has-ev::after { background: #fff; }

/* ── WEEK VIEW ── */
.week-container {
  flex: 1; overflow-y: auto;
  /* The sheet is dragged sideways to turn the page (`WeekSwipe`): visible would
     let that pull open a horizontal scrollbar, and `pan-y` tells a touchscreen
     the sideways half of the gesture is ours while up and down stays its own. */
  overflow-x: hidden; touch-action: pan-y;
  display: flex; flex-direction: column;
  padding: 0 var(--pad-x) var(--pad-x);
  background: var(--bg);
}
.wk-inner { display: flex; flex-direction: column; min-height: 100%; }
/* Only while the pointer is down: a grid that says "grab me" all the time reads
   as something other than the seven days you click to add a shoot. */
.week-container.wk-dragging { cursor: grabbing; user-select: none; }
.week-container.wk-dragging .wk-col:hover { background: var(--bg); }

.wk-header {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: sticky; top: 0; z-index: 6;
}
.wk-day-hd {
  padding: 10px 12px 8px; text-align: left;
  border-right: 1px solid var(--rule);
}
.wk-day-hd:last-child { border-right: none; }
.wk-today-hd { background: transparent; }
.wk-hd-name {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--muted); margin-bottom: 4px;
}
.wk-today-hd .wk-hd-name { color: var(--accent); }
.wk-hd-date { margin-bottom: 5px; line-height: 1; }
.wk-date-num {
  font-size: 18px; font-weight: 600;
  font-family: inherit; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wk-today-hd .wk-date-num { color: var(--accent); }
.wk-today-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; font-size: 13px;
  background: var(--accent); color: #fff; border-radius: 50%;
  font-weight: 700;
}
.wk-hd-meta {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 5px; min-height: 20px;
}
.wk-count {
  font-size: 11px; color: var(--muted);
  background: transparent; padding: 0; border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.wk-day-hd:hover .day-add-btn { opacity: 1 !important; }

/* Multi-day (all-day) bar row */
.wk-allday {
  position: relative; flex-shrink: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  overflow: hidden;
}
.wk-allday-bar {
  position: absolute; border-radius: var(--radius-sm);
  padding: 3px 8px; font-size: 12px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; display: flex; align-items: center; gap: 5px;
  box-shadow: none;
  transition: filter 0.12s;
}
.wk-allday-bar:hover { filter: brightness(0.97); }
.wk-allday-bar.cont-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.wk-allday-bar.cont-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Single-day columns */
.wk-body {
  display: grid; grid-template-columns: repeat(7, 1fr);
  flex: 1;
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
.wk-col {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 6px 5px; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  min-height: 160px; transition: background .08s;
  background: var(--bg);
}
.wk-col:hover { background: var(--surface-2); }
.wk-today-col { background: transparent; }
.wk-today-col:hover { background: var(--surface-2); }

/* ── LIST VIEW ── */
.list-container {
  flex: 1; overflow-y: auto;
  padding: 0 var(--pad-x) 80px;
  background: var(--bg);
}
#list-body { max-width: 1100px; }
.list-group { margin-bottom: 36px; }
.list-group-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--rule);
}
.list-group-dot {
  width: 10px; height: 10px; border-radius: 3px;
  flex-shrink: 0;
}
.list-group-name {
  font-family: var(--display);
  font-size: 18px; font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.list-group-count {
  font-size: 12px; color: var(--muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.list-item {
  display: flex; align-items: center; gap: 16px;
  padding: 8px;
  border-bottom: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  margin: 0 -8px;
  cursor: pointer;
  transition: background .08s;
}
.list-item:hover { background: var(--surface-2); }
.list-item:last-child { border-bottom: none; }
.list-item-date {
  width: 110px; font-size: 13px; font-weight: 500;
  color: var(--ink); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.list-item-title { font-size: 14px; color: var(--ink); flex: 1; }
.list-item-badge {
  padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 500;
  background: var(--surface-2); color: var(--ink-soft);
}
.list-item-del {
  padding: 3px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--rule); background: transparent;
  cursor: pointer; font-size: 11px; color: var(--muted);
  transition: all 0.15s; opacity: 0;
}
.list-item:hover .list-item-del { opacity: 1; }
.list-item-del:hover { background: var(--hover); color: var(--danger); border-color: var(--danger); }
.list-empty { font-size: 13px; color: var(--muted); padding: 8px 0; }

/* ── SIDE PANEL ── */
.side-panel {
  width: 0; flex-shrink: 0; overflow: hidden;
  border-left: 1px solid transparent; background: var(--bg);
  transition: width .3s cubic-bezier(.5,0,.2,1), border-color .3s cubic-bezier(.5,0,.2,1);
}
/* Событию хватает колонки: свойства там — «Status», «Date», «Booker», и
   растянутые на полэкрана они превращают панель в поле пустоты справа. */
.side-panel.open { width: min(520px, 92vw); border-left-color: var(--rule); }
/* Карточка модели шире событийной: в ней два десятка полей, вкладки и таблицы.
   Но не во весь экран — список слева остаётся на месте, потому что модели
   смотрят подряд: открыл одну, вернулся к сетке глазами, открыл следующую. */
body.mode-db .side-panel.open { width: min(1080px, 78vw); }
.side-panel-inner {
  width: 100%; height: 100%; overflow-y: auto;
  padding: 0 0 64px;
}

/* ── NOTION-STYLE EVENT CARD ── */
.spn { display: flex; flex-direction: column; }

/* Top toolbar: collapse button + delete */
.spn-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 4px; gap: 8px; flex-shrink: 0;
}
.spn-collapse-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 15px; padding: 4px 8px;
  border-radius: 5px; transition: background 0.1s; line-height: 1;
  display: flex; align-items: center; letter-spacing: -1px;
}
.spn-collapse-btn:hover { background: var(--bg); color: var(--text); }
.spn-dup-btn {
  width: 26px; height: 26px; background: none; border: none; cursor: pointer;
  border-radius: 5px; font-size: 15px; display: flex; align-items: center; justify-content: center;
  transition: background 0.1s; opacity: 0.45;
}
.spn-dup-btn:hover { background: var(--bg); opacity: 1; }
.spn-del-btn {
  width: 26px; height: 26px; background: none; border: none; cursor: pointer;
  border-radius: 5px; font-size: 13px; display: flex; align-items: center; justify-content: center;
  transition: background 0.1s; opacity: 0.45;
}
.spn-del-btn:hover { background: var(--hover); opacity: 1; }


/* Title */
/* Заголовок события — засечками: это имя работы, а не подпись к полю, и
   единственное место панели, где текст крупнее интерфейса. */
.spn-title {
  font-family: var(--serif); font-size: 30px; font-weight: 400;
  line-height: 1.2; padding: 0 24px 14px; color: var(--text);
  outline: none; word-break: break-word;
}
.spn-title-editable:hover { background: var(--surface-2); border-radius: 4px; }
.spn-title-editable:focus { background: var(--surface-2); border-radius: 4px; }

/* Properties grid */
.spn-props { display: flex; flex-direction: column; padding: 0 20px; }
.spn-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 4px; border-bottom: none; min-height: 32px;
  border-radius: 4px;
}
.spn-row:hover { background: var(--surface-2); }
.spn-label {
  width: 130px; flex-shrink: 0; font-size: 13px; color: var(--muted);
  padding-top: 4px; font-weight: 400;
}
.spn-val {
  flex: 1; font-size: 13px; color: var(--text); display: flex;
  align-items: center; flex-wrap: wrap; gap: 5px; padding-top: 2px;
}
.spn-muted { color: var(--muted); font-size: 13px; }
.spn-empty { color: var(--muted); font-size: 13px; }

/* «Свободна ли ты?» — the asking and the answer, inside the event panel. */
.spn-avail { font-size: 13px; }
.spn-avail-answer { font-weight: 500; }
.spn-avail.avail-free .spn-avail-answer { color: #1E6640; }
.spn-avail.avail-busy .spn-avail-answer { color: #991B1B; }
.spn-avail-note { margin-top: 3px; color: var(--ink); opacity: .85; }
.spn-avail-meta { margin-top: 3px; color: var(--muted); font-size: 12px; }
.spn-avail-link { display: flex; gap: 4px; align-items: center; margin-top: 6px; }
.spn-avail-input { flex: 1; min-width: 0; padding: 5px 8px; font-size: 12px;
  border: 1px solid var(--rule, rgba(55,53,47,0.12)); border-radius: 6px;
  background: var(--surface, #fff); color: var(--ink); }
.spn-avail-btn { margin-top: 4px; padding: 5px 10px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--rule, rgba(55,53,47,0.12)); border-radius: 6px;
  background: var(--surface, #fff); color: var(--ink); font-family: inherit; }
.spn-avail-btn:hover { background: var(--hover, #EFEEEC); }
/* Работа в учёте, заведённая из этого события. Кнопка, а не ссылка: ведёт она
   на другой экран того же приложения, адреса у раздела учёта работ нет. */
.spn-work-link { padding: 0; font-size: 13px; cursor: pointer; text-align: left;
  border: 0; background: none; color: var(--ink); font-family: inherit;
  border-bottom: 1px solid var(--rule, rgba(55,53,47,0.24)); }
.spn-work-link:hover { color: var(--accent); }
.spn-icon-btn { flex: none; width: 26px; height: 26px; cursor: pointer; font-size: 12px;
  border: 1px solid var(--rule, rgba(55,53,47,0.12)); border-radius: 6px;
  background: var(--surface, #fff); color: var(--ink); }
.spn-icon-btn:hover { background: var(--hover, #EFEEEC); }
.spn-icon-danger:hover { background: #FEE2E2; color: #991B1B; }

/* Status tag with dot */
.spn-status-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: filter 0.15s; user-select: none;
}
.spn-status-tag:hover { filter: brightness(0.94); }
.spn-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Date display chip + inline edit inputs */
.spn-date-chip {
  font-size: 13px; color: var(--text);
  border-radius: 4px; padding: 2px 4px; display: inline-block;
}
.spn-date-chip-edit { cursor: pointer; }
.spn-date-chip-edit:hover { background: var(--bg); }

.spn-dates { gap: 6px; align-items: center; }
.spn-date-in {
  border: none; background: none; outline: none; font-family: inherit;
  font-size: 13px; color: var(--text); padding: 2px 4px; cursor: pointer;
  border-radius: 4px; transition: background 0.1s;
}
.spn-date-in:hover, .spn-date-in:focus { background: var(--bg); }
.spn-arrow { color: var(--muted); font-size: 12px; }

/* Tag inputs */
.spn-tags-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.spn-tag {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--bg); border-radius: 4px; padding: 2px 7px;
  font-size: 12px; color: var(--text);
}
.spn-tag-del {
  background: none; border: none; cursor: pointer; font-size: 13px;
  color: var(--muted); padding: 0; line-height: 1; display: flex; align-items: center;
}
.spn-tag-del:hover { color: var(--danger); }
.spn-tag-input {
  border: none; outline: none; background: none; font-family: inherit;
  font-size: 13px; color: var(--text); width: 80px; padding: 2px 4px;
}
.spn-tag-input::placeholder { color: var(--muted); }

/* Text inputs in rows */
.spn-text-in {
  border: none; background: none; outline: none; font-family: inherit;
  font-size: 13px; color: var(--text); width: 100%; padding: 2px 4px;
  border-radius: 4px; transition: background 0.1s;
}
.spn-text-in:hover, .spn-text-in:focus { background: var(--bg); }
.spn-text-in::placeholder { color: var(--muted); }

.spn-job-tag {
  display: inline-flex; align-items: center; gap: 3px;
  border-radius: 4px; padding: 2px 8px; font-size: 12px; font-weight: 500;
}
.spn-job-in { width: 120px; }

/* Add property button */
.spn-add-prop {
  margin: 6px 20px 0; padding: 5px 8px; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--muted);
  border-radius: 4px; text-align: left; transition: background 0.1s; width: calc(100% - 40px);
}
.spn-add-prop:hover { background: var(--bg); color: var(--text); }

.spn-divider { height: 1px; background: var(--border); margin: 20px 24px 0; }

/* Comments */
.spn-comments { padding: 18px 24px 0; }
.spn-section-title {
  font-size: 11px; font-weight: 500; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
.spn-comment-input-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.spn-avatar-sm {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #fff; font-family: var(--display);
}
.spn-comment-in {
  flex: 1; border: 1px solid var(--border); background: var(--bg);
  border-radius: 6px; outline: none; font-family: inherit;
  font-size: 13px; color: var(--text);
  padding: 7px 12px; transition: border-color 0.15s;
}
.spn-comment-in:focus { border-color: rgba(55,53,47,0.3); background: #fff; }
.spn-comment-in::placeholder { color: var(--muted); }
.spn-comments-list { display: flex; flex-direction: column; gap: 14px; }
.spn-comment { display: flex; gap: 10px; }
.spn-comment-body { flex: 1; }
.spn-comment-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.spn-comment-author { font-size: 12px; font-weight: 500; }
.spn-comment-time { font-size: 11px; color: var(--muted); }
.spn-comment-text { font-size: 13px; line-height: 1.5; }

/* Description */
.spn-desc-section { padding: 18px 24px 0; }
.spn-desc {
  width: 100%; min-height: 120px; border: none; background: none; outline: none; resize: none;
  font-family: inherit; font-size: 14px; line-height: 1.65; color: var(--text);
  padding: 4px; border-radius: 4px; transition: background 0.1s;
}
.spn-desc:hover, .spn-desc:focus { background: var(--bg); }
.spn-desc::placeholder { color: var(--muted); }
.spn-desc-ro { font-size: 14px; line-height: 1.65; color: var(--text); padding: 4px; }

/* Status dropdown menu */
.spn-status-menu {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 500; min-width: 170px; overflow: hidden;
}
.spn-status-opt {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  font-size: 13px; cursor: pointer; transition: background 0.1s;
}
.spn-status-opt:hover { background: var(--bg); }

/* ── MODALS ── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(15,15,15,0.30); z-index: 400;
  align-items: center; justify-content: center;
  animation: modal-fadein .15s;
}
@keyframes modal-fadein { from { opacity: 0; } to { opacity: 1; } }
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 24px;
  width: 420px; max-width: 92vw;
  max-height: 90vh; overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  position: relative;
  animation: modal-rise .18s;
}
@keyframes modal-rise { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal h3 {
  font-family: var(--display);
  font-size: 22px; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 4px;
}
.modal-date {
  font-size: 13px; color: var(--muted);
  margin-bottom: 18px;
}
.modal-form { display: flex; flex-direction: column; gap: 12px; }
.modal-form label {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0; color: var(--muted);
  text-transform: none; display: block; margin-bottom: 4px;
}
.modal-form input, .modal-form select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px;
  outline: none;
  transition: border-color .1s, box-shadow .1s;
  height: 32px;
}
.modal-form input:focus, .modal-form select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(35,131,226,0.18);
}
.modal-form-row { display: flex; gap: 10px; }
.modal-form-row > div { min-width: 0; }
.modal-hint { color: var(--muted); font-weight: 400; font-size: 11px; }
.modal-tags-wrap {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  border-radius: var(--radius-sm);
  min-height: 32px; align-items: center;
}
.modal-tags { display: contents; }
.modal-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--hover); color: var(--ink);
  border-radius: 4px; padding: 2px 6px;
  font-size: 12px; line-height: 1.4;
}
.modal-tag-del {
  background: transparent; border: 0; color: var(--muted);
  cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1;
}
.modal-tag-del:hover { color: var(--ink); }
.modal-tag-input {
  flex: 1; min-width: 100px;
  border: 0 !important; background: transparent !important;
  padding: 2px 0 !important; height: 22px !important;
  outline: none;
}
.modal-tag-input:focus { box-shadow: none !important; }

/* ── Create-able tag picker (event form: Type of job / agency / booker) ── */
.tagpick { position: relative; }
.tagpick-box {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 6px 8px; min-height: 32px;
  border: 1px solid var(--rule-strong); background: var(--surface); border-radius: var(--radius-sm);
}
.tagpick-chips { display: contents; }
.tagpick-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--hover); color: var(--ink);
  border-radius: 4px; padding: 2px 6px; font-size: 12px; line-height: 1.4;
}
.tagpick-x { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; }
.tagpick-x:hover { color: var(--ink); }
.modal-form .tagpick-input {
  flex: 1; min-width: 90px; width: auto;
  border: 0; background: transparent; padding: 2px 0; height: 22px; box-shadow: none;
}
.modal-form .tagpick-input:focus { box-shadow: none; border: 0; }
.tagpick-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  max-height: 220px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px;
}
.tagpick-menu.hidden { display: none; }
.tagpick-opt { padding: 6px 8px; border-radius: 4px; font-size: 13px; cursor: pointer; }
.tagpick-opt:hover { background: var(--hover); }
.tagpick-create { color: var(--accent); }
.tagpick-manage {
  margin-top: 4px; padding: 6px 8px; border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--muted); cursor: pointer;
}
.tagpick-manage:hover { color: var(--ink); }

/* ── Event notes textarea + file attachments ── */
.modal-textarea {
  width: 100%; padding: 8px 10px; min-height: 84px; resize: vertical;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink);
  border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; line-height: 1.5; outline: none;
}
.modal-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(35,131,226,0.18); }
.ev-files-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ev-file-chip, .spn-file-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--hover); border-radius: 4px; padding: 2px 6px; font-size: 12px; max-width: 100%;
}
.ev-file-chip a, .spn-file-chip a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-file-chip a:hover, .spn-file-chip a:hover { text-decoration: underline; }
.ev-file-x { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; }
.modal-file-add, .spn-file-add {
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  padding: 5px 10px; font-size: 12px; color: var(--ink); cursor: pointer; font-family: inherit;
}
.modal-file-add:hover, .spn-file-add:hover { background: var(--hover); }
.modal-actions { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }
.modal-actions .btn-primary { flex: 0 0 auto; width: auto; padding: 7px 14px; height: 32px; }
.modal-actions .btn-cancel { padding: 7px 14px; height: 32px; }
.btn-cancel {
  background: var(--bg);
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
  padding: 7px 14px;
  font-family: inherit;
  font-size: 13px; font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .1s;
}
.btn-cancel:hover { background: var(--hover); color: var(--ink); }
.modal-error {
  font-size: 12px; color: var(--danger);
  min-height: 18px; margin-top: 6px;
}
.detail-close, .modal-close {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: none;
  cursor: pointer;
  font-size: 16px; color: var(--muted);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
}
.detail-close:hover, .modal-close:hover { background: var(--hover); color: var(--ink); }
.modal-title {
  font-size: 18px; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--ink);
  margin-bottom: 14px;
}
.modal-input {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px;
  outline: none; height: 32px;
}
.modal-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(35,131,226,0.18); }

/* ── USERS MODAL ── */
/* Шапка со счётчиком отделена линией и не уезжает: список сотрудников и форма
   под ним прокручиваются вместе, а «Пользователи · 6 сотрудников» должно
   оставаться на месте — по нему и понимают, сколько мест занято. */
.users-modal {
  width: 620px; padding: 0;
  max-height: 86vh; display: flex; flex-direction: column;
}
.users-head {
  flex-shrink: 0; display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--rule);
}
.users-head-t { flex: 1; min-width: 0; }
.users-modal h3 { margin-bottom: 0; font-size: 19px; }
.users-count { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.users-body { flex: 1; overflow-y: auto; padding: 10px 14px 18px; }
.users-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}

.user-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 8px; border-radius: var(--radius-sm);
}
.user-row:hover { background: var(--surface-2); }
.user-row-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; font-weight: 600;
}
.user-row-info { flex: 1; min-width: 0; }
/* Обрезается так же, как логин под ним. Без этого длинное имя не сжимало
   строку, а вылезало из своей ячейки и рисовалось поверх чипа роли — то есть
   ровно поверх ответа на вопрос, кому что видно. */
.user-row-name {
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-row-login {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Роль — чип, а не подпись под именем: в строке её ищут глазами, чтобы понять,
   кому что видно, и цвет здесь несёт то же, что нёс раньше цветной текст. */
.user-role-chip {
  flex-shrink: 0; padding: 3px 9px; border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 11.5px; font-weight: 500;
}
.user-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.user-row-actions .icon-btn {
  width: auto; height: auto;
  padding: 4px 9px;
  border: 1px solid var(--rule, var(--border));
  border-radius: var(--radius-sm, 5px);
  background: transparent;
  font-size: 11px; line-height: 1.4;
  color: var(--muted);
  white-space: nowrap;
}
.user-row-actions .icon-btn:hover { background: var(--hover); color: var(--ink, var(--text)); }
.user-row-actions .icon-btn.danger:hover {
  background: var(--hover); color: var(--danger, #D95F5F);
  border-color: var(--danger, #D95F5F);
}
/* Форма нового сотрудника: поля парами, потому что их шесть и в столбик они
   растягивают модал вдвое. Подписи в самих полях — каждое называется одним
   словом, и строка «Логин» над полем шириной в это же слово ничего не добавляет. */
#add-user-form { padding: 0 8px; }
.nu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nu-grid input, .nu-grid select {
  width: 100%; height: 34px; padding: 0 10px;
  border: 1px solid var(--rule-strong);
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 13px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.nu-grid input:focus, .nu-grid select:focus {
  border-color: var(--accent); box-shadow: var(--focus-ring);
}
.nu-color-label { margin: 14px 0 8px; font-size: 12px; color: var(--muted); }
.nu-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.nu-create { width: auto; height: 34px; margin-top: 0; padding: 0 16px; font-size: 13px; }
.nu-hint { font-size: 12px; color: var(--muted); }

.color-grid { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 6px; }
.color-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  cursor: pointer;
  box-shadow: none;
  transition: transform .12s, box-shadow .12s;
}
.color-swatch:hover { transform: scale(1.15); }
/* Кольцо, а не рамка: рамка съедает два пикселя самого цвета, и выбранный
   кружок оказывается меньше остальных. */
.color-swatch.selected { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.form-divider { height: 1px; background: var(--rule); margin: 10px 8px; }
.sub-label {
  font-size: 12px; color: var(--muted);
  font-weight: 500; margin-bottom: 4px;
}

/* Одноразовая ссылка приглашения: адрес и кнопка «Скопировать» в одной
   строке. `.btn-primary` здесь перебивается — сама по себе она во всю ширину
   и с отступом сверху, а тут стоит рядом с полем. */
/* `.sub-label` объявлен в файле дважды, и побеждает второй — с `uppercase`.
   Для ярлыка вроде «Цвет» это верно, а здесь классом набраны два предложения:
   кому ссылка, до какого числа действует и что показана она один раз. Капсом
   это перестаёт читаться ровно там, где читать обязательно. Правим по месту —
   у класса есть законные употребления, и он не наш. */
#nu-invite .sub-label {
  text-transform: none; letter-spacing: 0; font-size: 12.5px; line-height: 1.45;
}

.invite-copy { display: flex; align-items: stretch; gap: 8px; margin-top: 6px; }
.invite-copy input { flex: 1; min-width: 0; }
.invite-copy .btn-primary {
  width: auto; margin-top: 0; padding: 0 14px; flex-shrink: 0;
}

/* ── Permissions panel ── */
.perm-panel {
  margin: 0 0 8px 42px;
  padding: 10px 12px;
  background: var(--bg); border-radius: 8px;
  border: 1px solid var(--border);
}
.perm-role-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.perm-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.perm-select, .perm-input {
  flex: 1; padding: 4px 8px; border: 1px solid var(--border);
  border-radius: 6px; font-family: inherit;
  font-size: 12px; background: var(--surface); color: var(--text); outline: none;
}
.perm-input:focus { border-color: var(--accent); }
.perm-err { font-size: 11px; color: var(--danger, #D95F5F); margin: -4px 0 8px; }
.perm-err:empty { display: none; }
.perm-checks { display: flex; flex-direction: column; gap: 6px; }
.perm-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text); cursor: pointer;
}
.perm-check input { cursor: pointer; accent-color: #2563EB; }
.perm-self { font-size: 11px; color: var(--muted); font-weight: 400; }
.sub-label { font-size: 11px; color: var(--muted); margin-bottom: 6px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; }

/* ── Event tooltip ── */
.ev-tooltip {
  position: fixed; z-index: 600;
  background: #1C1C1C; color: #F0F0F0;
  border-radius: 8px; padding: 10px 14px;
  font-family: inherit;
  min-width: 160px; max-width: 240px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.28);
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.12s;
}
.ev-tooltip.visible { opacity: 1; visibility: visible; }
.ev-tt-title { font-weight: 600; font-size: 13px; margin-bottom: 7px; color: #fff; }
.ev-tt-meta { font-size: 11.5px; color: rgba(255,255,255,0.6); margin-bottom: 3px; }

/* ── Inline quick create ── */
.quick-create-wrap {
  padding: 3px 2px;
}
.quick-create-in {
  width: 100%; padding: 5px 8px;
  border: 1.5px solid rgba(55,53,47,0.25); border-radius: 6px;
  font-family: inherit; font-size: 13px;
  color: var(--text); background: #fff;
  outline: none; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.quick-create-in::placeholder { color: var(--muted); }

/* ── Day event count badge ── */
.day-ev-count {
  font-size: 10px; color: var(--muted);
  margin-right: auto;
  background: rgba(55,53,47,0.05);
  padding: 1px 5px; border-radius: 8px;
  line-height: 1.4; pointer-events: none;
}

/* ── Save toast ── */
.save-toast {
  position: fixed; bottom: 24px; right: 24px;
  background: #1A1A1A; color: #fff;
  padding: 8px 16px; border-radius: 8px;
  font-size: 13px; font-family: inherit;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.18s, transform 0.18s;
  pointer-events: none; z-index: 1000;
}
.save-toast.visible { opacity: 1; transform: translateY(0); }

/* ── Month picker ── */
.month-picker {
  position: fixed; z-index: 600;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  width: 224px;
}
.mp-year-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.mp-year { font-family: var(--display); font-size: 18px; }
.mp-nav-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 20px; line-height: 1;
  padding: 2px 8px; border-radius: 4px; transition: background 0.1s;
}
.mp-nav-btn:hover { background: var(--bg); color: var(--text); }
.mp-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.mp-month-btn {
  padding: 7px 4px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--text);
  border-radius: 6px; transition: background 0.1s; text-align: center;
}
.mp-month-btn:hover { background: var(--bg); }
.mp-month-btn.active { background: var(--text); color: #fff; font-weight: 600; }

/* ── Dark theme ── */
body.dark {
  --bg: #1E1E1E;
  --surface: #262626;
  --border: rgba(255,255,255,0.08);
  --text: #E8E8E5;
  --muted: #7A7A76;
}
/* Пастель статуса на тёмном фоне светится; в noir от неё остаётся полоса
   слева и подмешанный в подложку тон — тот же смысл, та же тройка цветов. */
body.dark .ev-card,
body.dark .cal-bar {
  background: color-mix(in oklch, var(--ev-accent, #888) 22%, #232323);
  color: var(--ink);
}
body.dark .ev-card:hover,
body.dark .cal-bar:hover { filter: brightness(1.14); }
body.dark .tl-ev-bar { opacity: 0.88; }
body.dark .ev-title { color: #E0E0DC; }
body.dark .ev-model-prefix { color: #888; }
body.dark .day-cell { background: var(--surface); }
body.dark .day-cell:hover { background: #2E2E2E; }
body.dark .day-cell.other-month { background: var(--bg); }
body.dark .day-cell.selected { background: #323232; }
body.dark .day-cell,
body.dark .cal-week,
body.dark .day-headers,
body.dark .day-header { border-color: rgba(255,255,255,0.05); }
body.dark .day-num { color: #888; }
body.dark .login-card,
body.dark .modal { background: var(--surface); }
body.dark .modal-form input,
body.dark .modal-form select,
body.dark .search-input,
body.dark .quick-create-in,
body.dark .spn-comment-in { background: #333; border-color: rgba(255,255,255,0.1); color: var(--text); }
body.dark .spn-title,
body.dark .spn-desc,
body.dark .spn-desc-ro,
body.dark .spn-text-in { color: var(--text); }
body.dark .spn-desc:hover,
body.dark .spn-desc:focus,
body.dark .spn-text-in:hover,
body.dark .spn-text-in:focus { background: rgba(255,255,255,0.04); }
body.dark .week-event { filter: brightness(0.8) saturate(0.9); }
body.dark .mp-month-btn.active { background: #E8E8E5; color: #1E1E1E; }
#pw-modal-inner { width: 320px; max-width: 100%; }
body.dark .spn-status-menu {
  background: var(--surface); border-color: var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
body.dark .spn-status-opt:hover { background: rgba(255,255,255,0.06); }

/* spinner */
.spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══ HAMBURGER & BACKDROP ══ */
.hamburger-btn {
  display: flex;
  width: 36px; height: 36px; flex-shrink: 0;
  align-items: center; justify-content: center;
  background: none; border: none;
  cursor: pointer; font-size: 18px; color: var(--muted);
  border-radius: 6px; transition: color 0.15s, background 0.15s;
}
.hamburger-btn:hover { background: var(--bg); color: var(--text); }
.sidebar-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.35); z-index: 149;
}
.sidebar-backdrop.visible { display: block; }

/* Desktop: hide mobile-only elements */
.vt-short { display: none; }
.day-dots { display: none !important; }

/* ── Day Sheet (тап по дню на мобильном) ── */
.day-sheet { display: none; position: fixed; inset: 0; z-index: 300; }
.day-sheet.visible { display: block; }
.ds-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.ds-panel {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--surface); border-radius: 18px 18px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  max-height: 78vh; display: flex; flex-direction: column;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.15);
}
.ds-handle {
  width: 40px; height: 4px; background: var(--border);
  border-radius: 2px; margin: 12px auto 4px; flex-shrink: 0;
}
.ds-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ds-date { font-family: var(--display); font-size: 19px; }
.ds-add-btn {
  padding: 0 18px; height: 40px; background: var(--text); color: #fff;
  border: none; border-radius: 8px; font-family: inherit;
  font-size: 14px; font-weight: 500; cursor: pointer;
}
.ds-list { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; padding: 4px 0 8px; }
.ds-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; min-height: 60px; cursor: pointer;
}
.ds-item:active { background: var(--bg); }
.ds-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ds-item-body { flex: 1; min-width: 0; }
.ds-item-title {
  font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-item-meta { font-size: 12px; color: var(--muted); }
.ds-arrow { color: var(--muted); font-size: 20px; flex-shrink: 0; }
.ds-empty { padding: 28px 20px; text-align: center; font-size: 15px; color: var(--muted); }
body.dark .ds-panel { background: var(--surface); }

/* ══ MEDIUM (≤ 1000px) — free up topbar room before mobile layout ══ */
/* The sidebar is still shown down to 768px, so it eats width and the topbar
   would otherwise overflow. Drop the non-essential clock + search here. */
@media (max-width: 1000px) {
  /* Compact the clock to a tappable icon (date is already in the page head);
     tapping it opens the world-clocks menu. */
  .now-chip .cap, .now-chip .pulse { display: none; }
  .now-chip .now-ico { display: block; }
  /* The topbar clips overflow, so an absolutely-positioned popover gets cut off.
     Pin it to the viewport instead so the full list is always visible. */
  .world-clocks-pop {
    position: fixed; top: 62px; right: 10px; left: auto; min-width: 172px;
  }
  .search-wrap { display: none; }       /* collapsed; lupa toggles it open */
  .search-toggle { display: inline-flex; }

  /* Expanded search: overlay the whole topbar with a full-width field */
  .topbar.search-open .search-wrap {
    display: flex;
    position: absolute; inset: 0;
    padding: 6px 10px; gap: 4px;
    background: var(--bg, #FFFFFF); z-index: 40;
  }
  .topbar.search-open .search-input {
    display: block; width: 100%; flex: 1 1 auto;
  }
  .topbar.search-open .kbd-hint { display: none; }
  .topbar.search-open .search-close { display: inline-flex; align-items: center; }
}

/* ══ MOBILE (≤ 768px) ══ */
@media (max-width: 768px) {

  /* Fast tap, no double-tap zoom */
  button, a, [onclick] { touch-action: manipulation; }
  /* Fill the screen edge-to-edge — the 16px desktop frame wastes space here. */
  body { overflow-x: hidden; padding: 0; }
  .app { border: 0; border-radius: 0; }

  :root { --pad-x: 18px; }

  /* App grid: collapse sidebar column — sidebar is position:fixed overlay */
  .app { grid-template-columns: 1fr !important; }
  .main { min-width: 0; }

  /* ── Sidebar → fixed 80% overlay ── */
  .sidebar {
    position: fixed; top: 0; bottom: 0;
    left: calc(-80vw - 4px); width: 80vw; max-width: 300px;
    z-index: 150; transition: left 0.25s ease; box-shadow: none;
  }
  .sidebar.mobile-open { left: 0; box-shadow: 4px 0 28px rgba(0,0,0,0.22); }
  .hamburger-btn { display: flex !important; }

  /* ── Topbar ── single row, icon-only actions ── */
  .topbar {
    padding: 6px 10px; gap: 4px; min-height: 48px;
    flex-wrap: nowrap; overflow: hidden;
  }
  .topbar-crumb { font-size: 13px; min-width: 0; flex-shrink: 1; overflow: hidden; }
  .topbar-crumb .it { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-spacer { flex: 1; }
  .search-input { display: none; }
  .user-badge { display: none; }
  /* Compact "Пользователи" / "Выйти" */
  .tb-btn { padding: 4px 8px; font-size: 12px; flex-shrink: 0; }
  .tb-btn.icon { width: 36px; height: 36px; }
  #users-btn { padding: 4px 6px; font-size: 11px; }

  /* ── Page head (title row) ── */
  .page-head { padding: 16px var(--pad-x) 10px; gap: 8px; }
  .page-head-title { gap: 6px; flex-wrap: wrap; }
  .page-head-title h1 {
    font-size: 24px; letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .month-nav { margin-left: 0; }
  .today-btn { height: 32px; padding: 0 10px; font-size: 12px; }

  /* ── View toggle — horizontal scroll if needed ── */
  .view-toggle {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding: 0 var(--pad-x);
    flex-wrap: nowrap;
  }
  .view-toggle::-webkit-scrollbar { display: none; }
  .vt-btn { flex-shrink: 0; padding: 8px 10px; font-size: 12px; white-space: nowrap; }

  /* ── Calendar — make sure it fills width ── */
  .cal-container { padding: 0 8px 8px; }
  .cal-grid { width: 100%; }
  .day-headers { padding: 0; }

  /* ── Month calendar — dots mode ── */
  .day-cell { min-height: 52px; padding: 4px 3px 5px; gap: 0; }
  .day-num { height: 22px; font-size: 12px; }
  .day-ev-count { display: none; }
  .day-add-btn { display: none; }
  .ev-card { display: none; }
  .day-dots {
    display: flex !important; flex-wrap: wrap;
    gap: 3px; padding: 2px 1px 0;
  }
  .day-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

  /* ── Week view — swipe navigation ── */
  .week-container { overflow: hidden; touch-action: pan-y; }
  .wk-inner { min-width: unset; }
  .wk-allday { display: none; }
  .wk-day-hd { padding: 6px 2px 5px; }
  .wk-hd-name { font-size: 9px; }
  .wk-date-num { font-size: 18px; }
  .wk-today-num { width: 28px; height: 28px; font-size: 13px; }
  .wk-hd-meta { display: none; }
  .wk-col { padding: 5px 3px; min-height: 120px; cursor: pointer; }
  .wk-col .ev-card { display: none; }
  .wk-col .day-dots { display: flex !important; padding: 0; }

  /* ── Year view ── */
  .year-container { padding: 12px; }
  .year-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* ── Kanban ── */
  .kanban-container { overflow-x: auto; }
  .kanban-board { padding: 12px; gap: 10px; }
  .kb-col { width: 240px; }

  /* ── List view ── */
  .list-container { padding: 14px var(--pad-x) 80px; }
  .list-group { margin-bottom: 28px; }
  .list-group-header { padding: 10px 4px; }
  .list-item { flex-wrap: wrap; gap: 8px; padding: 12px 4px; margin: 0; }
  .list-item-date { width: auto; font-size: 12px; }
  .list-item-title { font-size: 15px; flex-basis: 100%; order: -1; }
  .list-item-del { opacity: 1; height: 40px; padding: 0 14px; }

  /* ── Side panel → full screen с кнопкой Назад ── */
  .side-panel.open {
    position: fixed; inset: 0; z-index: 160;
    width: 100% !important; border-left: none;
  }
  .side-panel-inner { width: 100% !important; }
  .spn-collapse-btn { font-size: 0; width: auto; padding: 0 12px; min-height: 44px; }
  .spn-collapse-btn::before { content: '← Назад'; font-size: 14px; font-weight: 500; color: var(--text); letter-spacing: 0; }
  .spn-close-btn { width: 44px; height: 44px; }
  .mdb-detail-toolbar { padding: 6px 8px; }
  .spn-dup-btn, .spn-del-btn { width: 44px; height: 44px; }
  .spn-title { font-size: 22px; padding: 0 16px 12px; }
  .spn-props { padding: 0 12px; }
  .spn-row { min-height: 48px; padding: 6px 4px; }
  .spn-label { width: 110px; }
  .spn-toolbar { padding: 8px 8px 4px; }

  /* ── Модалки → полный экран снизу ── */
  .modal-overlay { align-items: flex-end; }
  .modal {
    width: 100vw !important; max-width: 100vw !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 92dvh; overflow-y: auto;
    padding: 20px 16px 20px;
  }
  /* iOS Safari: padding-bottom игнорируется в overflow:auto — используем ::after */
  .modal::after { content: ''; display: block; height: env(safe-area-inset-bottom, 0px); }
  .users-modal { width: 100vw !important; max-width: 100vw !important; }

  /* font-size ≥ 16px — iOS Safari не зумит поле при фокусе */
  input, select, textarea { font-size: 16px !important; }
  .modal-form input, .modal-form select { padding: 13px 14px; min-height: 48px; }
  .login-field input { min-height: 48px; padding: 12px 14px; }
  .btn-primary, .btn-enter { min-height: 50px; font-size: 15px; }
  .btn-cancel { min-height: 50px; padding: 0 20px; }

  /* Цветовые свотчи — крупнее */
  .color-swatch { width: 32px; height: 32px; }
  .color-grid { gap: 10px; }
  /* Пары полей на телефоне становятся столбиком, иначе в каждом помещается
     половина слова. */
  .nu-grid { grid-template-columns: 1fr; }
  .users-modal { width: 100%; }

  /* Пикер месяца */
  .month-picker { width: calc(100vw - 24px); left: 12px !important; }

  /* iOS Safari: экран входа скроллится, когда клавиатура закрывает форму. */
  .login-screen { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* Тост */
  .save-toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: 16px; }
}

/* ══ Убираем hover на тач-устройствах ══ */
@media (hover: none) {
  .ev-card:hover { box-shadow: 0 1px 2px rgba(0,0,0,0.06); border-color: #E8E8E8; }
  .day-cell:hover { background: var(--surface); }
  .day-cell.other-month:hover { background: #F9F9F7; }
  body.dark .day-cell:hover { background: var(--surface); }
  body.dark .day-cell.other-month:hover { background: var(--bg); }
  .model-item:hover { background: transparent; }
  .model-item.active { background: var(--bg); }
  .kb-card:hover { box-shadow: none; border-color: var(--border); }
  .year-month:hover { box-shadow: none; border-color: var(--border); }
  .topbar-btn:hover { background: none; color: var(--muted); }
  .nav-btn:hover { background: none; color: var(--muted); }
  .today-btn:hover { background: none; }
  .tl-ev-bar:hover { opacity: 1; transform: none; }
  .vt-btn:hover { background: none; color: var(--muted); }
  .vt-btn.active { background: var(--surface); color: var(--text); }
}

/* ══ DARK + MOBILE ══ */
body.dark .sidebar.mobile-open { box-shadow: 4px 0 28px rgba(0,0,0,0.5); }

/* ══ CHAT (handoff v5 — floating dock) ══ */
/* Local pad var for chat surfaces (dock uses 18px, full-page uses --pad-x) */
.chat-panel { --chat-pad-x: 18px; }

.chat-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 70;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-menu);
  transition: filter 0.15s, transform 0.18s cubic-bezier(.22,.61,.36,1), opacity 0.15s;
}
.chat-fab:hover { filter: brightness(1.12); transform: scale(1.07); }
.chat-fab svg { width: 22px; height: 22px; }
body.chat-open .chat-fab { transform: scale(.92); opacity: .9; }
body.chat-open .chat-fab .chat-unread { display: none; }
.chat-unread {
  display: none; position: absolute; top: -3px; right: -3px;
  min-width: 19px; height: 19px; border-radius: 10px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700;
  align-items: center; justify-content: center; padding: 0 5px;
  border: 2px solid var(--bg);
}

/* Dock panel */
.chat-panel {
  position: fixed; bottom: 88px; right: 24px; z-index: 69;
  width: min(540px, calc(100vw - 40px)); height: min(480px, calc(100vh - 130px));
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow-panel);
  display: flex; overflow: hidden;
  opacity: 0; pointer-events: none;
  transform: translateY(16px) scale(.97); transform-origin: bottom right;
  transition: opacity .22s cubic-bezier(.22,.61,.36,1), transform .22s cubic-bezier(.22,.61,.36,1);
}
.chat-panel.visible {
  opacity: 1; pointer-events: all; transform: none;
  animation: dockRise .22s cubic-bezier(.22,.61,.36,1);
}
@keyframes dockRise { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

/* Threads column */
.chat-sidebar {
  width: 194px; flex-shrink: 0; border-right: 1px solid var(--rule);
  background: var(--surface-2);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg);
}
.chat-conv-list {
  flex: 1; overflow-y: auto;
  padding: 8px; display: flex; flex-direction: column; gap: 1px;
}
.chat-conv-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background 0.1s; border: none; background: transparent;
  width: 100%; text-align: left;
}
.chat-conv-item:hover { background: var(--surface-2); }
.chat-conv-item.active { background: var(--hover); }
.chat-conv-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #fff; position: relative;
}
.chat-conv-avatar.group {
  background: #8BA89B;
  font-size: 14px;
}
/* Group member-count badge (.grp) — bottom-right pip on avatar */
.chat-conv-avatar .grp {
  position: absolute; right: -2px; bottom: -2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; border: 1.5px solid var(--surface-2);
}
.chat-conv-info { flex: 1; min-width: 0; }
.chat-conv-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-conv-name {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.chat-conv-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.chat-conv-last {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.chat-conv-badge {
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 600; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.chat-new-row {
  display: flex; gap: 6px; padding: 8px;
  border-top: 1px solid var(--rule); flex-shrink: 0;
}
.chat-new-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 6px; border-radius: var(--radius-sm); border: 1px solid var(--rule-strong);
  background: var(--surface); cursor: pointer; font-size: 12px; color: var(--ink-soft);
  transition: background 0.1s, color .1s;
}
.chat-new-btn:hover { background: var(--surface-2); color: var(--ink); }

/* Conversation pane */
.chat-view { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; background: var(--bg); }
.chat-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--rule); flex-shrink: 0;
}
.chat-back-btn {
  display: none; background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--muted); padding: 0 4px; line-height: 1;
}
.chat-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-title {
  font-size: 15px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-view-sub {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none;
}
.chat-menu-btn {
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  color: var(--muted); font-size: 18px; padding: 4px 8px; line-height: 1;
  border-radius: var(--radius-sm); transition: background 0.1s, color .1s;
  letter-spacing: 1px;
}
.chat-menu-btn:hover { background: var(--hover); color: var(--ink); }
.chat-close-btn {
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  color: var(--muted); font-size: 16px; padding: 4px 8px;
  border-radius: var(--radius-sm); transition: background 0.1s, color .1s;
}
.chat-close-btn:hover { background: var(--hover); color: var(--ink); }
.chat-dropdown {
  position: absolute; top: 50px; right: 16px; z-index: 210;
  background: var(--bg); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow-menu);
  min-width: 200px; padding: 4px; display: none;
}
.chat-dropdown.open { display: block; }
.chat-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 13px; color: var(--ink); border: none; background: none;
  width: 100%; text-align: left; transition: background 0.1s;
}
.chat-dd-item:hover { background: var(--hover); }
.chat-dd-item.danger { color: var(--danger); }
.chat-dd-item.danger:hover { background: var(--hover); }
.chat-dd-sep { height: 1px; background: var(--rule); margin: 4px 0; }

/* Messages area */
.chat-messages {
  flex: 1; overflow-y: auto; padding: 20px var(--chat-pad-x);
  display: flex; flex-direction: column; gap: 12px;
}
.chat-msg {
  display: flex; gap: 9px; align-items: flex-end;
  max-width: 74%; margin-top: 0;
  animation: msgIn .26s cubic-bezier(.22,.61,.36,1) backwards;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.chat-msg.same-author { margin-top: -6px; }
.chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #fff; align-self: flex-end;
}
.chat-msg.same-author .chat-avatar { visibility: hidden; }
.chat-bubble { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.chat-msg.mine .chat-bubble { align-items: flex-end; }
.chat-name {
  font-size: 11px; color: var(--ink-soft); padding: 0 4px 0 4px;
  font-weight: 600;
}
.chat-text {
  background: var(--surface-2); color: var(--ink);
  border-radius: 14px;
  padding: 8px 13px; font-size: 13.5px; line-height: 1.45;
  word-break: break-word;
}
.chat-msg.mine .chat-text {
  background: var(--ink); color: var(--bg);
  border-radius: 14px;
}
.chat-msg.same-author .chat-text,
.chat-msg.mine.same-author .chat-text { border-radius: 14px; }
.chat-time { font-size: 10px; color: var(--muted); padding: 0 4px; margin-top: 3px; text-align: right; }
.chat-msg.mine .chat-time { color: color-mix(in oklch, var(--bg) 60%, transparent); }
.chat-empty { font-size: 13px; color: var(--muted); text-align: center; margin: auto; padding: 20px; }

/* Input bar */
.chat-input-row {
  display: flex; align-items: center; gap: 9px;
  padding: 12px var(--chat-pad-x);
  border-top: 1px solid var(--rule); flex-shrink: 0;
}
.chat-input {
  flex: 1; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--rule-strong); background: var(--surface);
  font-size: 14px; color: var(--ink); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.chat-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.chat-send-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  border: none; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: filter 0.15s;
}
.chat-send-btn:hover { filter: brightness(1.12); }
.chat-send-btn svg { width: 17px; height: 17px; }

@media (prefers-reduced-motion: reduce) {
  .chat-panel, .chat-msg, .chat-fab { animation: none !important; transition-duration: .001ms !important; }
}
.chat-msg-actions {
  display: none; flex-direction: row; gap: 2px;
  align-self: center; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.chat-msg:hover .chat-msg-actions { display: flex; }
.chat-msg-act {
  background: none; border: none; cursor: pointer;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--muted); transition: background 0.1s;
}
.chat-msg-act:hover { background: var(--bg); color: var(--text); }
.chat-msg-act-del:hover { background: var(--hover); color: var(--danger); }
.chat-view { position: relative; }

/* Reply quote inside bubble */
.chat-reply-quote {
  border-left: 2px solid var(--text); padding: 3px 8px; margin-bottom: 4px;
  background: rgba(0,0,0,0.04); border-radius: 4px;
  cursor: pointer; transition: background 0.1s;
  max-width: 200px;
}
.chat-reply-quote:hover { background: rgba(0,0,0,0.07); }
.chat-msg.mine .chat-reply-quote { border-left-color: var(--surface); background: rgba(255,255,255,0.12); }
.chat-reply-quote .chat-reply-name { font-size: 11px; font-weight: 600; opacity: 0.85; }
.chat-reply-quote .chat-reply-text { font-size: 11px; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Reply bar above input */
.chat-reply-bar {
  display: none; align-items: center; gap: 8px;
  padding: 8px 12px; border-top: 1px solid var(--border);
  background: var(--bg);
}
.chat-reply-bar.open { display: flex; }
.chat-reply-bar-info { flex: 1; min-width: 0; border-left: 2px solid var(--text); padding-left: 8px; }
.chat-reply-bar .chat-reply-name { font-size: 11px; font-weight: 600; }
.chat-reply-bar .chat-reply-text { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-reply-cancel {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 14px; padding: 4px 6px; border-radius: 4px;
}
.chat-reply-cancel:hover { background: var(--surface); color: var(--text); }

/* Reactions */
.chat-reactions { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.chat-reaction {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 2px 7px; font-size: 11px;
  cursor: pointer; transition: background 0.1s, border-color 0.1s;
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--text);
}
.chat-reaction:hover { background: var(--surface); }
.chat-reaction.mine { background: var(--text); color: var(--surface); border-color: var(--text); }
.chat-msg.mine .chat-reactions { justify-content: flex-end; }

/* Emoji picker popup */
.chat-emoji-pop {
  position: fixed; z-index: 250;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 6px;
  display: flex; gap: 2px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.chat-emoji-btn {
  background: none; border: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 17px; transition: transform 0.1s, background 0.1s;
  display: flex; align-items: center; justify-content: center;
}
.chat-emoji-btn:hover { background: var(--bg); transform: scale(1.18); }

/* Read checkmarks */
.chat-meta { display: flex; align-items: baseline; gap: 4px; padding: 0 10px; justify-content: flex-end; }
.chat-msg.mine .chat-meta { justify-content: flex-end; }
.chat-msg:not(.mine) .chat-meta { justify-content: flex-start; }
.chat-time { font-size: 10px; color: var(--muted); padding: 0; }
.chat-read { font-size: 11px; color: var(--muted); letter-spacing: -2px; }
.chat-msg.mine .chat-read { color: rgba(255,255,255,0.65); }

/* Flash on jump-to-message */
.chat-msg-flash .chat-text { animation: chat-flash 1.2s ease; }
@keyframes chat-flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  30% { box-shadow: 0 0 0 4px rgba(59,130,246,0.4); }
}

/* Hide FAB while chat panel is open */
body.chat-open .chat-fab { display: none; }
.chat-date-divider {
  text-align: center; font-size: 11px; color: var(--muted); position: relative; margin: 4px 0;
}
.chat-date-divider::before, .chat-date-divider::after {
  content: ''; position: absolute; top: 50%; width: 28%; height: 1px; background: var(--border);
}
.chat-date-divider::before { left: 0; }
.chat-date-divider::after { right: 0; }

/* New DM/Group modal */
.chat-new-overlay { z-index: 300; }
.chat-new-modal { width: 320px; max-height: 420px; overflow-y: auto; }
.chat-new-user-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; max-height: 220px; overflow-y: auto; }
.chat-new-user-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  transition: background 0.1s; user-select: none;
}
.chat-new-user-item:hover { background: var(--bg); }
.chat-new-user-item.selected { background: var(--bg); }
.chat-new-check {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, border-color 0.1s;
}
.chat-new-user-item.selected .chat-new-check { background: var(--text); border-color: var(--text); color: var(--surface); font-size: 11px; }

@media (max-width: 768px) {
  /* FAB — чуть выше нижней безопасной зоны */
  .chat-fab {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    right: 18px;
    width: 50px; height: 50px;
  }
  .chat-fab svg { width: 20px; height: 20px; }
  .chat-fab .chat-unread { top: -4px; right: -4px; }

  /* Док → bottom-sheet на всю ширину */
  .chat-panel {
    --chat-pad-x: 14px;
    right: 0; bottom: 0; left: 0;
    width: 100vw; height: 88dvh;
    max-width: 100vw;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    border-left: none; border-right: none;
    flex-direction: column;
    transform-origin: bottom center;
  }
  .chat-panel.visible { animation: dockRiseMobile .24s cubic-bezier(.22,.61,.36,1); }
  @keyframes dockRiseMobile {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }

  /* Список тредов = весь экран; пейн уезжает поверх */
  .chat-sidebar { width: 100%; height: 100%; border-right: none; }
  .chat-conv-list { padding: 6px; }
  .chat-conv-item { padding: 10px 9px; }
  .chat-conv-avatar { width: 40px; height: 40px; font-size: 13px; }
  .chat-conv-name { font-size: 14.5px; }
  .chat-conv-last { font-size: 12.5px; }

  .chat-view {
    position: absolute; inset: 0;
    background: var(--bg);
    transform: translateX(100%);
    transition: transform .24s cubic-bezier(.22,.61,.36,1);
    z-index: 2;
  }
  .chat-view.mobile-open { transform: translateX(0); }
  .chat-back-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; transition: background .12s; }
  .chat-back-btn:hover, .chat-back-btn:active { background: var(--hover); color: var(--ink); }

  /* Шапка диалога — крупнее под палец */
  .chat-header { padding: 10px 12px; gap: 8px; }
  .chat-title { font-size: 15.5px; }
  .chat-view-sub { font-size: 12px; }
  .chat-menu-btn, .chat-close-btn { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

  /* Сообщения — больше пузырь, безопасные отступы */
  .chat-messages { padding: 14px var(--chat-pad-x); gap: 10px; }
  .chat-msg { max-width: 86%; }
  .chat-text { font-size: 14px; padding: 9px 13px; }

  /* Инпут — поверх клавиатуры, без зума iOS */
  .chat-input-row {
    padding: 10px var(--chat-pad-x) calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .chat-input { font-size: 16px !important; padding: 10px 14px; }
  .chat-send-btn { width: 42px; height: 42px; }
  .chat-send-btn svg { width: 18px; height: 18px; }
}

/* ── Models DB v4 — мобильные доводки ── */
@media (max-width: 768px) {
  /* Toolbar was overflowing: left group (title + view toggle + «Колонки») and
     right group (＋Модель + Заявки) together exceed the phone width and overlapped.
     Drop the redundant title (we're already in the models tab) and let the row
     wrap so the action buttons fall to a second line instead of stacking. */
  .mdb-toolbar { padding: 12px var(--pad-x) 8px; flex-wrap: wrap; row-gap: 8px; }
  .mdb-toolbar-title { display: none; }
  .mdb-toolbar-left { flex: 1 1 auto; }
  #mdb-apps-slot { flex-shrink: 0; }
  .mdb-wrap { padding: 4px var(--pad-x) 24px; }
  .mdb-grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .mdb-initial { font-size: 52px; top: 6px; right: 12px; }
  .mdb-body { padding: 10px 12px 12px; }
  .mdb-card-name { font-size: 14px; }
  .mdb-agency { font-size: 11px; }
  .mdb-chip { font-size: 10.5px; padding: 2px 7px; }
}
@media (max-width: 480px) {
  .mdb-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mdb-initial { font-size: 46px; }
  .mdb-card-name { font-size: 13.5px; }
}
@media (max-width: 360px) {
  .mdb-grid { grid-template-columns: 1fr; }
  .mdb-cover { aspect-ratio: 3 / 2; }
}

/* ── Brand button & sidebar nav ── */
.brand.brand-btn {
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font: inherit;
}
.brand.brand-btn:hover { background: var(--hover, #EFEEEC); }

.nav-section {
  display: flex; flex-direction: column;
  margin: 2px 0 6px;
  padding: 0 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 0 8px;
  height: var(--side-item-h, 28px);
  border: 0; background: transparent;
  text-align: left;
  font: inherit;
  font-size: 14px;
  color: var(--ink-soft, #5A584F);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: background .08s;
  text-decoration: none;   /* see the note above: these entries are links */
}
.nav-item:hover { background: var(--hover, #EFEEEC); }
.nav-item.active { background: var(--hover, #EFEEEC); color: var(--ink, #37352F); font-weight: 500; }
.nav-item-ico {
  width: 16px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--muted, #9B9A93);
  font-size: 12px;
}
.nav-item.active .nav-item-ico { color: var(--ink, #37352F); }
.nav-item-label { flex: 1; }

/* ── Models DB view ── */
/* ══ MODELS DB — card grid (handoff v4) ══ */
.mdb-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--surface, #fff);
  position: relative;
}
.mdb-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 4px var(--pad-x, 32px) var(--pad-x, 32px);
}
/* Wraps instead of letting the action buttons ride over the left group once the
   open side panel squeezes the list column. */
.mdb-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad-x, 32px) 10px;
  flex-shrink: 0;
  flex-wrap: wrap; gap: 8px 12px;
}
.mdb-toolbar-title {
  font-size: 13px; color: var(--muted, #9B9A93);
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.mdb-toolbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
#mdb-apps-slot { flex-shrink: 0; }
.mdb-view-toggle {
  display: flex; gap: 2px; flex-shrink: 0;
  padding: 2px;
  background: var(--surface-2, #F7F6F3);
  border-radius: var(--radius, 6px);
}
.mdb-view-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 24px;
  border: 0; border-radius: 4px;
  background: transparent;
  color: var(--muted, #9B9A93);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.mdb-view-btn svg { fill: currentColor; }
.mdb-view-btn:hover { color: var(--ink, #37352F); }
.mdb-view-btn.active {
  background: var(--surface, #fff);
  color: var(--ink, #37352F);
  box-shadow: 0 1px 2px rgba(55,53,47,.10);
}

/* List view */
.mdb-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule, rgba(55,53,47,.09));
  border-radius: var(--radius, 6px);
  background: var(--surface, #fff);
}
.mdb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mdb-table th {
  text-align: left; font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted, #9B9A93);
  background: var(--surface-2);
  padding: 9px 14px;
  border-bottom: 1px solid var(--rule, rgba(55,53,47,.09));
  white-space: nowrap;
}
.mdb-table td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--rule, rgba(55,53,47,.06));
  color: var(--ink, #37352F);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mdb-table tbody tr:last-child td { border-bottom: 0; }
/* Trailing spacer soaks up leftover width so the real columns pack tightly to
   the left instead of the name column ballooning with empty space. */
.mdb-table .mdb-col-sp { width: 100%; padding: 0; border-bottom: 0; }
.mdb-row { cursor: pointer; transition: background .12s; }
.mdb-row:hover { background: var(--hover, #FAF9F7); }
.mdb-row.active { background: var(--surface-2, #F2F1EE); }
.mdb-row-name { display: flex; align-items: center; gap: 9px; font-weight: 500; }
.mdb-row-thumb { flex-shrink: 0; }
.mdb-row-img, .mdb-row-ini {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.mdb-col-email a, .mdb-col-mobile a { color: var(--muted, #6B6862); text-decoration: none; }
.mdb-col-email a:hover, .mdb-col-mobile a:hover { color: var(--ink, #37352F); text-decoration: underline; }

/* Copy shortcuts inside a table row: icon-only, revealed on hover. */
.mdb-row-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mdb-row-copy {
  display: inline-flex; gap: 4px; margin-left: 2px;
  opacity: 0; transition: opacity .12s;
}
.mdb-row:hover .mdb-row-copy,
.mdb-row-copy:focus-within { opacity: 1; }
/* Touch devices never hover — keep the copy buttons permanently visible there. */
@media (hover: none) {
  .mdb-row-copy { opacity: 1; }
}
.mdb-copy-btn-sm {
  padding: 4px; gap: 0;
  background: var(--surface-2, #F2F1EE);
  box-shadow: none;
}
.mdb-copy-btn-sm:hover { background: var(--surface, #fff); }

/* Column picker */
.mdb-cols-wrap { position: relative; display: flex; }
.mdb-cols-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  border: 1px solid var(--rule, rgba(55,53,47,.09));
  border-radius: var(--radius, 6px);
  background: var(--surface, #fff);
  color: var(--muted, #6B6862);
  font: inherit; font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.mdb-cols-btn svg { fill: currentColor; }
.mdb-cols-btn:hover { color: var(--ink, #37352F); background: var(--hover, #EFEEEC); }
.mdb-cols-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 170px;
  padding: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--rule, rgba(55,53,47,.12));
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.13);
}
.mdb-cols-menu.hidden { display: none; }
.mdb-cols-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 5px;
  font-size: 13px; color: var(--ink, #37352F);
  cursor: pointer;
}
.mdb-cols-item:hover { background: var(--hover, #F7F6F3); }
.mdb-cols-item input { cursor: pointer; margin: 0; }

/* URL field with an "open" affordance */
.mdb-linkfield { display: flex; align-items: center; gap: 4px; }
.mdb-linkfield .mdb-input { flex: 1; min-width: 0; }
.mdb-link-open {
  flex-shrink: 0;
  padding: 4px 6px; border-radius: 4px;
  color: var(--muted, #9B9A93);
  text-decoration: none; font-size: 13px;
}
.mdb-link-open:hover { background: var(--hover, #EFEEEC); color: var(--ink, #37352F); }
.mdb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 14px;
}
.mdb-empty { padding: 24px; color: var(--muted, #9B9A93); font-size: 13px; }
.mdb-empty-val { color: var(--muted, #9B9A93); }

/* Card */
.mdb-card {
  background: var(--surface, #fff);
  border: 1px solid var(--rule, rgba(55,53,47,.09));
  border-radius: var(--radius, 6px);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .14s, box-shadow .14s, transform .14s;
  display: flex; flex-direction: column;
}
.mdb-card:hover {
  border-color: var(--rule-strong, rgba(55,53,47,.16));
  box-shadow: 0 4px 18px rgba(55,53,47,.07);
  transform: translateY(-2px);
}
.mdb-card.active {
  border-color: var(--ink, #37352F);
  box-shadow: 0 4px 18px rgba(55,53,47,.10);
}
.mdb-cover {
  aspect-ratio: 4 / 5;
  position: relative;
  display: flex; align-items: flex-end;
  padding: 12px;
  background: linear-gradient(160deg, var(--mc-light, #F5EDE0), var(--mc, #C8A882));
  overflow: hidden;
}
.mdb-cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.mdb-initial {
  font-family: var(--serif, 'DM Serif Display', Georgia, serif);
  font-size: 64px; line-height: .8;
  color: rgba(20, 18, 14, .55);
  position: absolute; top: 8px; right: 14px;
  pointer-events: none;
  z-index: 1;
}
.mdb-ph {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 9px, rgba(255,255,255,.18) 9px 10px);
  pointer-events: none;
  z-index: 1;
}
.mdb-status {
  position: relative; z-index: 2;
}
/* «Параметры» и «Контакты» кладут в буфер то, что букер каждый день
   перепечатывает в переписку с клиентом, поэтому они стоят на самой плитке, а
   не в карточке: за ними не идут вглубь, ими пользуются на бегу.

   На обложке — молочная подложка: под ними бывает лицо, и сплошная плашка
   закрыла бы ровно то, ради чего плитку и открыли. В тулбаре карточки те же
   две кнопки выглядят как соседние, обычной кнопкой. */
.mdb-copy-bar {
  position: absolute; top: 8px; left: 8px; right: 8px;
  display: flex; flex-wrap: wrap; gap: 6px;
  z-index: 3;
}
.mdb-copy-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px;
  border: 1px solid var(--rule); border-radius: var(--radius-sm, 4px);
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit; font-size: 11.5px; font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.mdb-copy-bar .mdb-copy-btn {
  border-color: transparent;
  background: rgba(255,255,255,.82);
  color: #37352F;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mdb-copy-btn svg { fill: currentColor; opacity: .65; }
.mdb-copy-btn:hover { background: var(--hover); color: var(--ink); }
.mdb-copy-bar .mdb-copy-btn:hover { background: #fff; }
.mdb-body { padding: 12px 14px 14px; }
.mdb-card-name {
  font-size: 15px; font-weight: 600;
  color: var(--ink, #37352F);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mdb-agency {
  font-size: 12px; color: var(--muted, #9B9A93);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.mdb-email-link {
  display: block; text-decoration: none; cursor: pointer;
  color: var(--muted, #9B9A93);
}
a.mdb-email-link:hover { color: var(--ink, #37352F); text-decoration: underline; }
.mdb-meta {
  display: flex; flex-wrap: wrap;
  gap: 5px 6px;
  margin-top: 11px;
}
.mdb-chip {
  font-size: 11px; color: var(--ink-soft, #5A584F);
  background: var(--surface-2, #F7F6F3);
  padding: 2px 8px;
  border-radius: var(--radius-sm, 4px);
  font-variant-numeric: tabular-nums;
}
/* Card stats: plain text, no grey boxes. */
.mdb-meta { gap: 4px 12px; }
.mdb-meta .mdb-chip {
  background: none; padding: 0;
  color: var(--muted, #9B9A93); font-size: 12px;
}

/* ── MODELS DB — profile editor (rendered inside side-panel) ── */
.mdb-detail { padding: 0; overflow: visible; }
.mdb-detail-inner { max-width: 1080px; margin: 0 auto; padding: 0 34px 40px; }

.mdb-head { display: flex; align-items: center; gap: 18px; margin: 8px 0 22px; }
/* Avatar and its add/remove button stack in a column so "Убрать фото" sits
   directly under the photo instead of floating next to the name. */
.mdb-avatar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.mdb-avatar {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 600;
  flex-shrink: 0; overflow: hidden;
}
.mdb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mdb-avatar[onclick] { cursor: pointer; }
.mdb-avatar-cam {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; background: rgba(0,0,0,0.42); color: #fff;
  opacity: 0; transition: opacity .15s;
}
.mdb-avatar[onclick]:hover .mdb-avatar-cam { opacity: 1; }
/* Empty avatar keeps a faint camera cue so it reads as "tap to add" — hover
   isn't available on touch devices. Avatars that already have a photo stay clean
   until hovered. */
.mdb-avatar[onclick]:not(.has-img) .mdb-avatar-cam { opacity: 0.5; background: rgba(0,0,0,0.28); }
.mdb-avatar.has-img:not(:hover) .mdb-avatar-cam { opacity: 0; }
.mdb-avatar-add {
  width: fit-content;
  background: var(--surface, #fff); border: 1px solid var(--border, #E9E8E5);
  border-radius: 6px; padding: 4px 10px;
  font-size: 11px; color: var(--ink, #37352F); cursor: pointer; white-space: nowrap;
}
.mdb-avatar-add:hover { background: var(--hover, #EFEEEC); }
.mdb-avatar-remove {
  width: fit-content;
  background: none; border: none; padding: 0;
  font-size: 11px; color: var(--muted, #8B8680); cursor: pointer;
  text-decoration: underline;
}
.mdb-avatar-remove:hover { color: var(--danger, #C0392B); }
.mdb-name {
  font-family: var(--serif, 'DM Serif Display', Georgia, serif);
  font-size: 34px; font-weight: 400; line-height: 1.1; margin: 0;
  color: var(--ink, #37352F);
  letter-spacing: -0.01em;
}
/* The name is editable in place: an input that reads as the heading until touched. */
.mdb-name-input {
  flex: 1 1 160px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  padding: 2px 6px;
  margin-left: -6px;
  outline: none;
}
.mdb-name-input:hover { border-color: var(--border, #E9E8E5); }
.mdb-name-input:focus { border-color: var(--ink, #37352F); background: var(--surface, #fff); }

.mdb-select { cursor: pointer; appearance: auto; }
.mdb-select.mdb-empty-val { color: var(--muted, #9B9A93); }

/* Анкета в одну колонку. Две читаются зигзагом: сетка раскладывает поля по
   строкам, и «Рост» оказывается справа от «Статуса», а не под ним, — глазу
   приходится держать в голове, где закончилась левая половина. */
.mdb-props {
  display: flex;
  flex-direction: column;
  max-width: 620px;
}
.mdb-prop {
  display: grid;
  grid-template-columns: minmax(110px, 140px) 1fr;
  align-items: start;
  gap: 10px;
  padding: 3px 0;
  min-height: 36px;
  border-bottom: 1px solid var(--rule);
}
.mdb-prop-l {
  color: var(--muted, #9B9A93);
  font-size: 13px;
  padding-top: 8px;
}
.mdb-prop-v { font-size: 13.5px; color: var(--ink, #37352F); min-width: 0; overflow-wrap: anywhere; }
.mdb-val { display: inline-block; padding: 6px 4px; }
.mdb-input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 6px 8px;
  border-radius: 4px;
  font: inherit;
  color: inherit;
  outline: none;
  font-size: 14px;
}
.mdb-input:hover { border-color: var(--border, #E9E8E5); }
.mdb-input:focus { border-color: var(--ink, #37352F); background: var(--surface, #fff); }
.mdb-textarea { resize: vertical; min-height: 32px; line-height: 1.4; }

.mdb-file { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.mdb-file-link {
  padding: 6px 4px;
  color: var(--ink, #37352F);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mdb-file-link:hover { color: var(--accent, #C8A882); }
.mdb-file-actions { display: inline-flex; gap: 4px; margin-left: auto; }

/* Compact square icon buttons (passport replace/delete, share copy/revoke) that
   sit tight to the right of a link instead of full-width text buttons. */
.mdb-icon-btn {
  flex-shrink: 0;
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #E9E8E5); border-radius: 6px;
  background: var(--surface, #fff); cursor: pointer;
  font-size: 13px; line-height: 1; color: var(--ink, #37352F);
}
.mdb-icon-btn:hover { background: var(--hover, #EFEEEC); }
.mdb-icon-danger:hover { border-color: var(--danger, #C0392B); color: var(--danger, #C0392B); }

/* Close (×) button pinned to the top-right of the model panel, stays visible
   while the profile scrolls. */
.mdb-detail-toolbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--bg);
  padding: 14px 22px 6px;
}

.mdb-toolbar-left-slot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mdb-edit-btn { padding: 6px 14px; font-size: 13px; }
.mdb-editing-badge {
  font-size: 12px; font-weight: 600; color: var(--accent, #C8A882);
  background: var(--surface-2, #F7F6F3); border: 1px solid var(--rule-strong, #E9E8E5);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.spn-close-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 6px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
}
.spn-close-btn:hover { background: var(--surface-2, #EFEEEC); color: var(--text); }

/* Save sits at the very end of the profile, in normal flow — not floating
   over the fields as you scroll. */
.mdb-save-bar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 4px 8px;
  margin-top: 8px;
  border-top: 1px solid var(--border, #E9E8E5);
}
.mdb-btn {
  padding: 6px 12px;
  border: 1px solid var(--border, #E9E8E5);
  background: var(--surface, #fff);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.mdb-btn:hover { background: var(--hover, #EFEEEC); }
.mdb-btn:disabled { opacity: .6; cursor: default; }
.mdb-btn-danger { color: var(--danger, #C0392B); }
.mdb-btn-primary {
  background: var(--ink, #37352F);
  border-color: var(--ink, #37352F);
  color: #fff;
  padding: 8px 20px;
}
.mdb-btn-primary:hover { background: #000; }
.mdb-btn-primary:disabled:hover { background: var(--ink, #37352F); }

/* public calendar share block */
.mdb-share {
  margin: 0 4px 16px;
  padding: 12px 14px;
  border: 1px solid var(--rule, rgba(55,53,47,0.09));
  border-radius: var(--radius, 8px);
  background: var(--surface-2, #F7F6F3);
}
.mdb-share-h { font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.mdb-share-row { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.mdb-share-input {
  flex: 1 1 auto; min-width: 0;
  padding: 6px 10px; font-size: 13px;
  border: 1px solid var(--rule-strong, #E9E8E5); border-radius: 6px;
  background: var(--surface, #fff); color: var(--ink);
}
.mdb-share-hint { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* ── Books / materials (shareable galleries) ── */
.mdb-books { margin: 20px 4px 8px; padding-top: 18px; border-top: 1px solid var(--rule, rgba(55,53,47,0.09)); }
.mdb-books-loading { font-size: 13px; color: var(--muted); }
.mdb-books-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mdb-books-h { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.mdb-book-new { padding: 6px 12px; font-size: 13px; }
.mdb-books-empty { font-size: 13px; color: var(--muted); line-height: 1.5;
  padding: 14px; border: 1px dashed var(--rule-strong, #E9E8E5); border-radius: var(--radius, 8px); }

.mdb-book { border: 1px solid var(--rule-strong, #E9E8E5); border-radius: var(--radius, 8px);
  padding: 12px; margin-bottom: 12px; background: var(--surface, #fff); }
.mdb-book-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mdb-book-title { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600;
  padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); }
.mdb-book-title:hover { border-color: var(--rule-strong, #E9E8E5); }
.mdb-book-title:focus { outline: none; border-color: var(--accent, #C8A882); background: var(--surface, #fff); }
.mdb-book-title-static { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600;
  padding: 5px 2px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdb-book-empty-note { font-size: 12px; color: var(--muted); padding: 2px 2px 8px; }

.mdb-book-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 6px; margin-bottom: 10px; }
.mdb-book-thumb { position: relative; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden;
  background: var(--hover, #EFEEEC); }
.mdb-book-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mdb-book-thumb-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,0.62); color: #fff; font-size: 13px;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 120ms; }
.mdb-book-thumb:hover .mdb-book-thumb-del { opacity: 1; }

.mdb-book-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mdb-book-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 3px 4px 3px 9px; font-size: 12px; border: 1px solid var(--rule-strong, #E9E8E5);
  border-radius: 14px; background: var(--surface-2, #F7F6F3); }
.mdb-book-chip a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 200px; }
.mdb-book-chip a:hover { text-decoration: underline; }
.mdb-book-chip-del { border: 0; background: none; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px; }
.mdb-book-chip-del:hover { color: #C0392B; }

.mdb-book-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mdb-book-add { padding: 5px 11px; font-size: 12.5px; border: 1px solid var(--rule-strong, #E9E8E5);
  border-radius: 6px; background: var(--surface, #fff); color: var(--ink); cursor: pointer;
  transition: background 120ms; }
.mdb-book-add:hover { background: var(--hover, #EFEEEC); }

.mdb-book-pdf { margin-bottom: 10px; }
.mdb-book-pdf-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  font-size: 13px; text-decoration: none; }
.mdb-book-sharebar { border-top: 1px dashed var(--rule, rgba(55,53,47,0.09)); padding-top: 10px; }
.mdb-book-share.on { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.mdb-book-share-btn { padding: 6px 12px; font-size: 13px; }
a.mdb-icon-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.mdb-book-views-btn { margin-top: 8px; padding: 2px 0; border: 0; background: none;
  font: inherit; font-size: 12px; color: var(--muted, #787066); cursor: pointer; }
.mdb-book-views-btn:hover { color: var(--ink); }
.mdb-book-views-none { margin-top: 8px; font-size: 12px; color: var(--muted, #787066); }
.mdb-book-views[hidden] { display: none; }
.mdb-book-views { margin-top: 6px; max-height: 220px; overflow-y: auto; }
.mdb-book-views-row { display: flex; gap: 10px; justify-content: space-between;
  padding: 3px 0; font-size: 12px; color: var(--muted, #787066); }
/* The address is the only way to tell one client from another, so it must not
   be the thing that wraps when the row is narrow. */
.mdb-book-views-ip { flex: none; font-variant-numeric: tabular-nums; }
.mdb-book-views-more { opacity: 0.7; }

@media (max-width: 720px) {
  /* Сетка карточек берёт значения из mobile-блока выше; здесь — только панель профиля */
  .mdb-prop { grid-template-columns: 1fr; gap: 2px; }
  .mdb-name { font-size: 22px; }
  .mdb-book-thumbs { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
}

/* ── Plavnost: view enter + card stagger (handoff Part 5) ── */
@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.view-anim { animation: viewIn .32s cubic-bezier(.22,.61,.36,1); }

@keyframes evIn {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.stagger-ev { opacity: 0; animation: evIn .34s cubic-bezier(.22,.61,.36,1) forwards; }

@media (prefers-reduced-motion: reduce) {
  .view-anim, .stagger-ev { animation: none !important; opacity: 1 !important; transform: none !important; }
  .side-panel, .app { transition-duration: .001ms !important; }
}

/* ── Wiki view ── */
.wiki-container {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
}
.wiki-list {
  border-right: 1px solid var(--rule);
  overflow-y: auto;
  padding: 12px 8px;
  background: var(--surface-2);
}
.wiki-list-head {
  padding: 4px 6px 12px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 10px;
}
.wiki-new-btn {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.wiki-new-btn:hover { background: var(--hover); }

.wiki-cats { display: flex; flex-direction: column; gap: 14px; }
.wiki-cat-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 4px 8px 4px 6px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius);
  user-select: none;
}
.wiki-cat-h:hover { background: var(--hover); color: var(--ink); }
.wiki-cat-h:hover .wiki-cat-plus { opacity: 1; }
.wiki-cat-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-cat-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; font-size: 14px;
  color: var(--ink);
  font-weight: 900;
  transition: transform 120ms;
  flex-shrink: 0;
}
.wiki-cat-caret.open { transform: rotate(90deg); }
.wiki-cat-caret:hover { background: var(--hover); border-radius: 3px; }
.wiki-cat-h.active { background: var(--surface-2, #F2F1EE); color: var(--ink); }

/* Section-as-page: table of contents */
.wiki-toc-wrap { margin-top: 8px; }
.wiki-toc { list-style: none; margin: 8px 0 0; padding: 0; }
.wiki-toc ul { list-style: none; margin: 2px 0 2px 18px; padding: 0; border-left: 1px solid var(--rule, rgba(55,53,47,.09)); }
.wiki-toc li { margin: 1px 0; }
.wiki-toc-link {
  display: inline-block; padding: 5px 8px; border-radius: var(--radius, 6px);
  color: var(--accent, #2383E2); cursor: pointer; font-size: 15px; line-height: 1.35;
  text-decoration: none;
}
.wiki-toc-link:hover { background: var(--hover); text-decoration: underline; }
.wiki-toc-empty { color: var(--muted); font-size: 14px; padding: 8px 0; }
.wiki-cat-plus {
  border: 0; background: transparent;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink);
  font-size: 20px; line-height: 1;
  font-weight: 900;
  padding: 0;
  opacity: 0.65;
  flex-shrink: 0;
  transition: background 120ms, color 120ms, opacity 120ms;
}
.wiki-cat-plus:hover {
  background: var(--ink);
  color: var(--surface);
  opacity: 1;
}
.wiki-cat-empty {
  font-size: 12px;
  color: var(--muted-soft);
  padding: 4px 10px;
}
.wiki-row {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 5px 10px;
  border: 0; background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left; font: inherit;
  margin-bottom: 1px;
  color: var(--ink);
}
.wiki-row:hover { background: var(--hover); }
.wiki-row.active { background: var(--hover); font-weight: 600; }
.wiki-row-title {
  font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}

/* Per-row tools: add a sub-page, or grab the row to move it. */
.wiki-row-plus, .wiki-row-grip {
  flex-shrink: 0;
  opacity: 0;
  border: 0; background: transparent; padding: 0;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  border-radius: 3px;
  transition: opacity .12s, background .12s, color .12s;
}
.wiki-row-plus { font-size: 14px; line-height: 1; cursor: pointer; }
.wiki-row-grip { font-size: 11px; cursor: grab; letter-spacing: -1px; }
.wiki-row:hover .wiki-row-plus,
.wiki-row:hover .wiki-row-grip { opacity: .65; }
.wiki-row-plus:hover, .wiki-row-grip:hover { opacity: 1 !important; background: var(--rule); color: var(--ink); }
.wiki-row.dragging { opacity: .45; }

/* Drop feedback: a line beside the row, or a frame around it when nesting. */
.wiki-row.drop-into { box-shadow: inset 0 0 0 2px var(--accent, #C8A882); background: var(--hover); }
.wiki-row.drop-before, .wiki-row.drop-after { position: relative; }
.wiki-row.drop-before::before, .wiki-row.drop-after::after {
  content: ''; position: absolute; left: 6px; right: 6px; height: 2px;
  background: var(--accent, #C8A882); border-radius: 2px;
}
.wiki-row.drop-before::before { top: -1px; }
.wiki-row.drop-after::after { bottom: -1px; }
.wiki-cat-h.drop-into { box-shadow: inset 0 0 0 2px var(--accent, #C8A882); }
.wiki-caret {
  border: 0; background: transparent;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--muted);
  font-size: 10px;
  transition: transform 120ms;
  flex-shrink: 0;
  padding: 0;
}
.wiki-caret:hover { color: var(--ink); }
.wiki-caret.open { transform: rotate(90deg); }
.wiki-caret-spacer { width: 16px; height: 16px; flex-shrink: 0; }
.wiki-shared-dot {
  color: var(--accent, #2563EB);
  font-size: 10px;
  line-height: 1;
}

/* Breadcrumbs above the title */
.wiki-crumbs {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
  display: flex; flex-wrap: wrap; align-items: center;
}
.wiki-crumb {
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
}
.wiki-crumb:hover { color: var(--ink); text-decoration: underline; }
.wiki-crumb-sep { margin: 0 6px; opacity: 0.5; }

/* Children list (auto overview at bottom of parent article) */
.wiki-children {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.wiki-children-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 12px;
}
.wiki-children-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.wiki-child-card {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms;
}
.wiki-child-card:hover { background: var(--hover); }
.wiki-child-title { font-weight: 500; }

/* Share block */
.wiki-share-block {
  margin-top: 40px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2, var(--surface));
}
.wiki-share-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 10px;
}
.wiki-share-row {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.wiki-share-input {
  flex: 1; min-width: 240px;
  padding: 7px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.wiki-share-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}
.wiki-share-warn {
  font-size: 12px;
  color: var(--danger);
  margin-top: 8px;
}
.wiki-shared-dot.dead { color: var(--muted); }

.wiki-detail {
  overflow-y: auto;
  padding: 32px 48px 64px;
}
.wiki-detail-inner { max-width: 760px; margin: 0 auto; }
.wiki-empty { padding: 24px; color: var(--muted); font-size: 13px; }

.wiki-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.wiki-meta { display: flex; align-items: center; gap: 10px; }
.wiki-cat-tag {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 2px 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.wiki-date { font-size: 12px; color: var(--muted); }
.wiki-actions { display: flex; gap: 6px; }
.wiki-btn {
  padding: 6px 12px;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.wiki-btn:hover { background: var(--hover); }
.wiki-btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}
.wiki-btn-primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.wiki-btn-danger { color: var(--danger); border-color: var(--rule-strong); }
.wiki-btn-danger:hover { background: var(--hover); }

.wiki-title {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 24px;
  font-weight: 400;
}

.wiki-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}
.wiki-body h1, .wiki-body h2, .wiki-body h3,
.wiki-body h4, .wiki-body h5, .wiki-body h6 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.25;
  margin: 28px 0 10px;
  letter-spacing: -0.01em;
}
.wiki-body h1 { font-size: 30px; }
.wiki-body h2 { font-size: 24px; }
.wiki-body h3 { font-size: 19px; }
.wiki-body h4 { font-size: 16px; }
.wiki-body p { margin: 10px 0; }
.wiki-body img, .wiki-quill .ql-editor img {
  max-width: 100%; height: auto;
  border-radius: var(--radius-md);
  display: block; margin: 14px 0;
}

/* ── Free photo board (view mode) ── */
.wiki-body .wiki-board { position: relative; width: 100%; max-width: 100%; margin: 18px 0; }
.wiki-body .wiki-board img {
  position: absolute; margin: 0; max-width: none; height: auto;
  border-radius: var(--radius-md);
}

/* ── Free photo board (editor) ── */
.wiki-body ul, .wiki-body ol { margin: 10px 0 10px 22px; }
.wiki-body li { margin: 4px 0; }
.wiki-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.wiki-body strong { font-weight: 600; }
.wiki-body em { font-style: italic; }
.wiki-body code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
}
.wiki-body pre {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 14px;
  overflow-x: auto;
  margin: 14px 0;
}
.wiki-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 13px;
}
.wiki-body blockquote {
  border-left: 3px solid var(--rule-strong);
  padding: 4px 0 4px 14px;
  margin: 14px 0;
  color: var(--ink-soft);
  font-style: italic;
}
.wiki-body hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 24px 0;
}
.wiki-body img { max-width: 100%; border-radius: var(--radius); }

/* Editor */
.wiki-editor .wiki-input {
  width: 100%;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  outline: none;
}
.wiki-editor .wiki-input:focus { border-color: var(--ink); }
.wiki-cat-select { width: auto; min-width: 160px; padding: 6px 10px; font-size: 13px; }
.wiki-title-input {
  font-family: var(--serif);
  font-size: 28px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.wiki-content-input {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  min-height: 460px;
  resize: vertical;
}
.wiki-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

/* ── Wiki: list head with two buttons ── */
.wiki-new-btn-secondary {
  background: var(--surface, #fff);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
}
.wiki-new-btn-secondary:hover { background: var(--hover); }
.wiki-cat-lock { font-size: 11px; opacity: 0.6; }

/* ── Wiki sections manager modal ── */
.wiki-sections-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 500;
  align-items: flex-start; justify-content: center;
  padding: 60px 16px 24px;
  overflow-y: auto;
}
.wiki-sections-overlay.open { display: flex; }
.wiki-sections-modal {
  width: 100%; max-width: 640px;
  background: var(--surface, #fff);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.28);
  padding: 22px 24px 20px;
}
.wiki-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.wiki-sec-title { font-size: 18px; font-weight: 600; }
.wiki-sec-list { display: flex; flex-direction: column; gap: 8px; }
.wiki-sec-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2, var(--surface));
}
.wiki-sec-row-editing {
  display: block;
  border-color: var(--rule-strong);
}
.wiki-sec-label-strong { font-weight: 600; margin-bottom: 10px; }
.wiki-sec-label { font-weight: 500; }
.wiki-sec-mode { font-size: 12px; color: var(--muted); }
.wiki-sec-actions { display: flex; gap: 6px; }
.wiki-sec-lock { opacity: 0.6; }
.wiki-sec-editor { display: flex; flex-direction: column; gap: 12px; }
.wiki-sec-field label {
  display: block; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.wiki-sec-vis { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.wiki-sec-vis label { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0; }
.wiki-sec-members {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--surface);
}
.wiki-sec-member {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: var(--radius);
  font-size: 13px; color: var(--ink);
  cursor: pointer;
}
.wiki-sec-member:hover { background: var(--hover); }
.wiki-sec-member-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.wiki-sec-empty { color: var(--muted); font-size: 12px; padding: 6px; }
.wiki-sec-actions-row { display: flex; justify-content: flex-end; gap: 6px; }
.wiki-sec-footer { margin-top: 14px; }
.wiki-sec-new { width: 100%; }

/* ── Quill WYSIWYG (Wiki editor) ── */
.wiki-quill { background: var(--surface); position: relative; }

/* draggable images inside the editor */
.wiki-quill .ql-editor img { cursor: grab; }
.wiki-quill .ql-editor img:active { cursor: grabbing; }
/* File links are movable too — same grab affordance as photos. */
.wiki-quill .ql-editor a[href^="/uploads/"] { cursor: grab; }
.wiki-quill .ql-editor .wiki-dragging { opacity: .4; }
body.wiki-drag-move, body.wiki-drag-move * { cursor: grabbing !important; user-select: none !important; }
/* Where the photo/file will land */
.wiki-drop-caret {
  position: absolute; z-index: 25;
  height: 2px; border-radius: 2px;
  background: var(--accent);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5);
}

/* image resize frame */
.wiki-img-frame {
  position: absolute; z-index: 20;
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.6);
}
.wiki-img-handle {
  position: absolute; right: -7px; bottom: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
  cursor: nwse-resize; pointer-events: auto;
}
.wiki-img-size {
  position: absolute; left: 0; top: -24px;
  background: var(--ink); color: var(--bg);
  font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
/* alignment toolbar on the selected image */
.wiki-img-tools {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 2px; pointer-events: auto;
  background: var(--ink); border-radius: 8px; padding: 3px;
  box-shadow: var(--shadow-menu);
}
.wiki-img-tools button {
  width: 26px; height: 22px; border: none; border-radius: 5px;
  background: transparent; color: var(--bg); cursor: pointer;
  font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.wiki-img-tools button:hover { background: rgba(255,255,255,0.18); }
.wiki-img-tools button.on { background: var(--accent); color: #fff; }

/* image float alignment (editor + reader) */
.wiki-body img.wiki-img-left,
.wiki-quill .ql-editor img.wiki-img-left {
  float: left; margin: 6px 18px 10px 0; max-width: 55%;
}
.wiki-body img.wiki-img-right,
.wiki-quill .ql-editor img.wiki-img-right {
  float: right; margin: 6px 0 10px 18px; max-width: 55%;
}
.wiki-body img.wiki-img-center,
.wiki-quill .ql-editor img.wiki-img-center {
  display: block; float: none; margin: 14px auto;
}
/* keep floats from bleeding past the article / onto the board */
.wiki-body::after, .wiki-quill .ql-editor::after { content: ""; display: block; clear: both; }
.wiki-body .wiki-board { clear: both; }

/* free (absolute) image positioning over the text */
.wiki-quill .ql-editor, .wiki-body { position: relative; }
.wiki-body img.wiki-img-free,
.wiki-quill .ql-editor img.wiki-img-free {
  position: absolute; float: none; z-index: 3; margin: 0;
}
.wiki-quill .ql-editor img.wiki-img-free { cursor: move; }
.wiki-quill .ql-toolbar {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 0;
  background: var(--surface-2, var(--surface));
}
.wiki-quill .ql-container {
  border: 1px solid var(--rule-strong);
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: inherit;
  font-size: 15px;
  min-height: 420px;
  background: var(--surface);
  color: var(--ink);
}
/* Left padding leaves room for the block handle to sit outside the text. */
.wiki-quill .ql-editor { min-height: 420px; line-height: 1.6; padding: 16px 18px 16px 34px; }
.wiki-blk-handle {
  position: absolute; z-index: 15;
  width: 18px; height: 20px;
  display: none; align-items: center; justify-content: center;
  border: 0; padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px; line-height: 1; letter-spacing: -1px;
  border-radius: 3px;
  cursor: grab;
  opacity: .5;
  transition: opacity .1s, background .1s, color .1s;
}
.wiki-blk-handle:hover { opacity: 1; background: var(--rule); color: var(--ink); }
.wiki-blk-handle:active { cursor: grabbing; }
.wiki-quill .ql-editor .wiki-blk-dragging { opacity: .4; }
.wiki-quill .ql-editor.ql-blank::before { color: var(--muted); font-style: normal; }
.wiki-quill .ql-stroke { stroke: var(--ink); }
.wiki-quill .ql-fill   { fill: var(--ink); }
.wiki-quill .ql-picker { color: var(--ink); }
.wiki-quill .ql-picker-options { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); }
.wiki-quill .ql-snow.ql-toolbar button:hover .ql-stroke,
.wiki-quill .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--accent, #2563EB); }
.wiki-quill .ql-snow.ql-toolbar button:hover .ql-fill,
.wiki-quill .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--accent, #2563EB); }
.wiki-quill .ql-editor blockquote {
  border-left: 3px solid var(--rule-strong);
  padding-left: 12px;
  color: var(--muted);
  margin: 1em 0;
}
.wiki-quill .ql-editor pre,
.wiki-quill .ql-editor .ql-code-block-container {
  background: var(--hover);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Render wiki body the same way both views see headings/lists/etc */
.wiki-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.wiki-body blockquote {
  border-left: 3px solid var(--rule-strong);
  padding-left: 12px;
  color: var(--muted);
  margin: 1em 0;
}

.wiki-mobile-close { display: none; }

@media (max-width: 720px) {
  /* Master-detail: one pane fills the screen at a time. */
  .wiki-container { grid-template-columns: 1fr; grid-auto-rows: 100%; }
  .wiki-list { max-height: none; border-right: none; }
  .wiki-detail { display: none; padding: 20px 20px 48px; position: relative; }
  .wiki-container.show-detail .wiki-list { display: none; }
  .wiki-container.show-detail .wiki-detail { display: block; }
  .wiki-title { font-size: 28px; }
  .wiki-head { flex-direction: column; align-items: flex-start; }
  .wiki-actions { flex-wrap: wrap; }
  .wiki-detail-inner { position: relative; }
  .wiki-mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 14px auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
  }
  .wiki-mobile-close:active { background: var(--surface-2); }

  /* Editor: pin Отмена / Сохранить to a bottom bar instead of the top */
  .wiki-editor { padding-bottom: 76px; }
  .wiki-editor .wiki-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: flex; flex-wrap: nowrap; gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bg); border-top: 1px solid var(--rule);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
  }
  .wiki-editor .wiki-actions .wiki-btn {
    flex: 1; display: flex; align-items: center; justify-content: center;
    height: 42px; font-size: 15px;
  }
  /* Chat launcher would sit over the Сохранить button while editing */
  body.wiki-editing .chat-fab { display: none; }
}

/* ══ MODELS DB — applications button + queue modal ══ */
.mdb-list-head { display: none; }
.mdb-apps-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background 120ms, border-color 120ms;
  height: 30px; line-height: 1;
}
.mdb-apps-btn:hover { background: var(--hover); border-color: var(--ink); }
#mdb-apps-slot { display: inline-flex; align-items: center; gap: 8px; }
/* primary "add model" button */
.mdb-add-btn { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mdb-add-btn:hover { background: var(--ink-soft, #5A584F); border-color: var(--ink-soft, #5A584F); }
.mdb-apps-ico { font-size: 14px; }
.mdb-apps-badge {
  display: none; margin-left: auto;
  background: var(--ink); color: var(--surface);
  border-radius: 999px; padding: 2px 8px;
  font-size: 11px; font-weight: 700; min-width: 18px;
  align-items: center; justify-content: center;
}

/* Apps modal */
.apps-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 18, 14, 0.45);
  display: none; align-items: flex-start; justify-content: center;
  padding: 60px 20px 40px; overflow-y: auto;
  z-index: 1500;
}
.apps-overlay.open { display: flex; }
.apps-modal {
  background: var(--surface); border-radius: 12px;
  max-width: 820px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  border: 1px solid var(--rule);
  padding: 24px 26px 28px;
}
.apps-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.apps-h h2 {
  font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 26px;
  margin: 0; letter-spacing: -0.01em;
}
.apps-close {
  background: transparent; border: 0; font-size: 20px; line-height: 1;
  cursor: pointer; color: var(--muted); padding: 4px 8px; border-radius: var(--radius);
}
.apps-close:hover { background: var(--hover); color: var(--ink); }

.apps-section { margin-top: 22px; }
.apps-section-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.apps-section-h h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); font-weight: 600; margin: 0;
}
.apps-count {
  background: var(--rule); color: var(--ink);
  font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 1px 8px;
}

/* `--paper` — токен из apply.html, публичной анкеты со своим набором цветов;
   здесь его не объявляет никто, поэтому `background` не применялся вовсе, а не
   брал что-то похожее. */
.apps-invite-form {
  display: flex; gap: 10px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 10px;
}
.apps-input {
  font: inherit; font-size: 14px;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
  border-radius: var(--radius); padding: 8px 10px; width: 100%;
  transition: border-color 120ms;
}
.apps-input:focus { outline: none; border-color: var(--ink); }
.apps-url-input { font-family: 'JetBrains Mono', monospace; font-size: 12px; margin-top: 8px; }

.apps-btn {
  font: inherit; font-size: 13px; font-weight: 500;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 7px 12px; cursor: pointer; white-space: nowrap;
  transition: background 120ms, border-color 120ms;
}
.apps-btn:hover { background: var(--hover); border-color: var(--ink); }
.apps-btn-primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.apps-btn-primary:hover { background: #000; }
.apps-btn-danger { color: var(--danger, #B05050); }
.apps-btn-danger:hover { background: rgba(176,80,80,0.08); border-color: var(--danger, #B05050); }

.apps-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 12px 14px;
  margin-bottom: 10px;
}
.apps-card-pending { border-color: var(--ink); }
.apps-card-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.apps-card-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apps-card-meta { font-size: 12px; color: var(--muted); }
.apps-card-actions { display: flex; gap: 8px; }
.apps-card-foot { margin-top: 10px; font-size: 12px; }
.apps-card-foot a { color: var(--muted); text-decoration: none; }
.apps-card-foot a:hover { color: var(--ink); text-decoration: underline; }

.apps-status {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 999px;
  background: var(--rule); color: var(--ink);
}
.apps-st-invited   { background: #E8E5DE; color: #6B6862; }
.apps-st-submitted { background: #FFEDC9; color: #8A5A00; }
.apps-st-accepted  { background: #DCEFD6; color: #2D6A2D; }
.apps-st-rejected  { background: #F4D9D5; color: #8A2A2A; }

.apps-dl {
  margin-top: 12px;
  display: grid; grid-template-columns: 160px 1fr; gap: 4px 14px;
  font-size: 13px;
}
.apps-dl-k { color: var(--muted); }
.apps-dl-v { color: var(--ink); word-break: break-word; }

.apps-empty {
  font-size: 13px; color: var(--muted-soft);
  padding: 14px 0;
}

.apps-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--surface);
  font-size: 13px; padding: 10px 16px; border-radius: var(--radius);
  opacity: 0; pointer-events: none; z-index: 2000;
  transition: opacity 200ms, transform 200ms;
}
.apps-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) {
  .apps-invite-form { flex-direction: column; }
  .apps-dl { grid-template-columns: 1fr; }
  .apps-dl-k { font-weight: 600; }
}

/* Apps: admin language toggle for new invite */
.apps-lang-toggle {
  display: inline-flex; background: var(--surface); border: 1px solid var(--rule);
  border-radius: 999px; padding: 2px; align-items: center; flex-shrink: 0;
}
.apps-lang-toggle button {
  border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; color: var(--muted); cursor: pointer;
  letter-spacing: 0.04em; transition: background 120ms, color 120ms;
}
.apps-lang-toggle button.active { background: var(--ink); color: var(--surface); }

/* ── Model media library ── */
.mdb-media { margin-top: 22px; }
.mdb-media.mdb-drop { outline: 2px dashed #C8A882; outline-offset: 4px; border-radius: 8px; }
.mdb-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; margin-top: 10px; }
.mdb-media-cell { position: relative; aspect-ratio: 3/4; border-radius: 6px; overflow: hidden; background: color-mix(in oklch, var(--ink) 6%, var(--bg)); cursor: zoom-in; }
.mdb-media-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mdb-media-acts { position: absolute; top: 4px; right: 4px; display: none; gap: 4px; }
.mdb-media-cell:hover .mdb-media-acts { display: flex; }
.mdb-media-acts .mdb-icon-btn { background: color-mix(in oklch, var(--bg) 92%, transparent); }

/* Видео модели. Плеер родной, браузерный: свои кнопки означали бы свой
   полноэкранный режим, свою перемотку и свой айфон — а нативные controls уже
   умеют и картинку-в-картинке, и скорость, и жесты. Размер задаётся сеткой,
   пропорции — самим файлом (проходка вертикальная, интро горизонтальное). */
.mdb-vid-head { margin-top: 24px; }
.mdb-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 10px; }
.mdb-vid { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.mdb-vid-el { width: 100%; max-height: 420px; display: block; background: #000; }
.mdb-vid-fail { padding: 14px 16px; font-size: 13px; color: var(--muted); }
.mdb-vid-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--rule); }
.mdb-vid-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdb-vid-hint { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.mdb-vpick-list { padding: 10px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.mdb-vpick-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; cursor: pointer; }
.mdb-vpick-row.sel { border-color: #C8A882; background: color-mix(in oklch, #C8A882 12%, var(--surface)); }
.mdb-vpick-row.used { opacity: .5; cursor: default; }
.mdb-vpick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdb-vpick-size { font-size: 12px; color: var(--muted); }

/* Upload progress toast */
.mdb-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 16px; border-radius: 8px; font-size: 13px; z-index: 4000; box-shadow: 0 6px 20px rgba(0,0,0,.2); }

/* Lightbox */
.mdb-lb { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; z-index: 4100; }
.mdb-lb.open { display: flex; }
.mdb-lb-img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 6px; }
.mdb-lb-x, .mdb-lb-prev, .mdb-lb-next { position: absolute; background: none; border: none; color: #fff; font-size: 28px; cursor: pointer; padding: 10px 16px; opacity: .8; z-index: 1; }
.mdb-lb-x:hover, .mdb-lb-prev:hover, .mdb-lb-next:hover { opacity: 1; }
.mdb-lb-x { top: 8px; right: 12px; }
.mdb-lb-prev { left: 4px; top: 50%; transform: translateY(-50%); font-size: 44px; }
.mdb-lb-next { right: 4px; top: 50%; transform: translateY(-50%); font-size: 44px; }
.mdb-lb-count { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; opacity: .8; }

/* Photo picker overlay */
.mdb-ovl { position: fixed; inset: 0; background: rgba(15,15,15,.30); display: flex; align-items: center; justify-content: center; z-index: 4050; padding: 36px; }
.mdb-ovl-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); width: min(720px, 100%); max-height: 86vh; display: flex; flex-direction: column; box-shadow: var(--shadow-modal); animation: rise .18s ease; }
.mdb-ovl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 20px; font-size: 18px; font-weight: 700; border-bottom: 1px solid var(--rule); }
.mdb-ovl-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--rule); background: var(--surface-2); }
.mdb-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; padding: 14px 16px; overflow-y: auto; }
.mdb-pick-cell { position: relative; aspect-ratio: 3/4; border-radius: 6px; overflow: hidden; cursor: pointer; outline: 2px solid transparent; }
.mdb-pick-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mdb-pick-cell.sel { outline-color: #C8A882; }
.mdb-pick-cell.used { opacity: .45; cursor: default; }
.mdb-pick-mark { position: absolute; top: 4px; left: 4px; background: color-mix(in oklch, var(--bg) 92%, transparent); border-radius: 6px; font-size: 11px; padding: 2px 6px; }
.mdb-book-thumb img { cursor: zoom-in; }
.mdb-book-thumb[draggable="true"] { cursor: grab; }

/* Small confirm/prompt dialog (native dialogs are blocked in embedded browsers) */
.mdb-ovl-sm { width: min(420px, 100%); }
.mdb-ovl-body { padding: 18px 16px 6px; font-size: 14px; line-height: 1.5; white-space: pre-line; }
.mdb-ovl-input { width: 100%; margin-top: 10px; }

/* Model panel tabs: Инфо | Медиа | Буки */
.mdb-tabs { display: flex; gap: 10px; margin: 20px 0 20px; border-bottom: 1px solid var(--rule); overflow-x: auto; }
.mdb-tab { background: none; border: none; padding: 8px 10px 10px; font-size: 14px; cursor: pointer; color: var(--text); opacity: .55; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; white-space: nowrap; }
.mdb-tab:hover { opacity: .85; }
.mdb-tab.active { opacity: 1; font-weight: 600; border-bottom-color: var(--ink); }

/* ══ Документооборот (Docs / Finance) ══ */
/* Финансы и Документооборот — два отдельных экрана с одинаковой рамкой. */
.docs-container,
.fin-container { flex: 1; min-height: 0; overflow-y: auto; padding: 8px var(--pad-x, 32px) 64px; }
.docs-head { margin-bottom: 8px; }
.docs-title { font-size: 22px; font-weight: 700; margin: 4px 0 12px; }
.docs-tabs { margin-top: 0; }
.docs-body { margin-top: 8px; }
.docs-loading, .docs-empty { color: var(--muted, #999); padding: 24px 4px; font-size: 14px; }
.docs-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.docs-filter { max-width: 200px; }
.docs-warn { background: color-mix(in oklch, #E5A50A 18%, var(--bg)); border: 1px solid color-mix(in oklch, #E5A50A 45%, transparent); color: var(--text); padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; }

/* Finance summary cards */
.fin-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }
.fin-card { background: color-mix(in oklch, var(--ink) 4%, var(--bg)); border: 1px solid color-mix(in oklch, var(--ink) 10%, transparent); border-radius: 10px; padding: 12px 16px; min-width: 190px; }
.fin-card-cur { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--muted, #999); margin-bottom: 6px; }
.fin-row { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; padding: 2px 0; }
.fin-row.fin-total { border-top: 1px solid color-mix(in oklch, var(--ink) 12%, transparent); margin-top: 4px; padding-top: 6px; font-weight: 600; }
.fin-pos { color: #16A34A; }
.fin-neg { color: #DC2626; }

/* Счёт модели: «сколько мы должны человеку» рядом с «сколько человек принёс
   агентству». Рамка, фон и заголовок нужны не для красоты — без них два блока
   карточек с крупным итогом внизу читаются как один, и читают верхний. */
.fin-ledger { margin: 18px 0 4px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid color-mix(in oklch, var(--ink) 14%, transparent);
  background: color-mix(in oklch, var(--ink) 2%, var(--bg)); }
.fin-ledger-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.fin-ledger-head .mdb-btn { margin-left: auto; }
.fin-ledger .docs-hint { margin-bottom: 12px; }
.fin-ledger .docs-empty { padding: 8px 4px 12px; }
.fin-card-ledger { background: var(--bg); }

/* Tables (shared by finance + documents) */
.docs-table-wrap { overflow-x: auto; border: 1px solid color-mix(in oklch, var(--ink) 10%, transparent); border-radius: 10px; }
.docs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.docs-table th {
  text-align: left; font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted, #999); background: var(--surface-2);
  padding: 9px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.docs-table td { padding: 10px 12px; border-bottom: 1px solid color-mix(in oklch, var(--ink) 7%, transparent); vertical-align: top; }
.docs-table tr:last-child td { border-bottom: none; }
.fin-td-date, .fin-td-amt { white-space: nowrap; }
.fin-td-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-td-note { color: var(--muted, #999); max-width: 240px; }
.fin-kind { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.fin-kind-income { background: color-mix(in oklch, #16A34A 16%, var(--bg)); color: #16A34A; }
.fin-kind-expense { background: color-mix(in oklch, #DC2626 14%, var(--bg)); color: #DC2626; }
.fin-kind-payout { background: color-mix(in oklch, #E5A50A 18%, var(--bg)); color: #B45309; }
.doc-cat { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; background: color-mix(in oklch, var(--ink) 8%, var(--bg)); }
.doc-note { color: var(--muted, #999); font-size: 12px; margin-top: 2px; }
.doc-exp-soon { color: #B45309; font-weight: 600; }
.doc-exp-over { color: #DC2626; font-weight: 600; }

/* Modal form rows */
.docs-form { padding: 14px 16px; display: grid; gap: 10px; max-height: 70vh; overflow-y: auto; }
.docs-f { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; font-size: 13px; }
.docs-f > span:first-child { color: var(--muted, #999); }
.docs-f .mdb-input { width: 100%; }
.doc-file-pick { display: flex; align-items: center; gap: 8px; }
.doc-file-name { font-size: 12px; color: var(--muted, #999); }

/* Model-page docs tab reuses .mdb-docs container */
.mdb-docs { margin-top: 16px; }

/* Model-page "Поездки" tab: one card per season, conditions above what it
   actually brought in. The two are separated by the card border on purpose —
   a guarantee is a promise, not money that arrived. */
.mdb-placements { margin-top: 16px; }
.pl-card {
  border: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 12px;
}
.pl-head { display: flex; align-items: flex-start; gap: 12px; }
.pl-head > div:first-child { flex: 1; min-width: 0; }
.pl-title { font-size: 15px; font-weight: 600; }
.pl-where { font-weight: 400; color: var(--muted, #999); }
.pl-line { font-size: 13px; margin-top: 6px; }
.pl-line > span { color: var(--muted, #999); margin-right: 6px; }
.pl-nomoney { font-size: 12px; color: var(--muted, #999); margin-top: 10px; }

/* Finance commission extras */
.fin-comm-preview { font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-td-rate { white-space: nowrap; color: var(--muted, #999); }

/* Finance analytics: period control, KPIs, month bars, model table */
.fin-period { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.fin-mode { display: inline-flex; gap: 2px; background: color-mix(in oklch, var(--ink) 6%, var(--bg)); border-radius: 8px; padding: 3px; }
.fin-mode-btn { background: none; border: none; padding: 6px 12px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--text); font-family: inherit; }
.fin-mode-btn.active { background: var(--bg); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.fin-nav { display: inline-flex; align-items: center; gap: 8px; }
.fin-nav-btn { background: none; border: 1px solid color-mix(in oklch, var(--ink) 14%, transparent); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; color: var(--text); font-size: 16px; line-height: 1; }
.fin-nav-btn:hover { background: color-mix(in oklch, var(--ink) 6%, var(--bg)); }
.fin-nav-label { font-weight: 600; font-size: 14px; min-width: 90px; text-align: center; }

.fin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 6px; }
.fin-kpi { background: color-mix(in oklch, var(--ink) 4%, var(--bg)); border: 1px solid color-mix(in oklch, var(--ink) 10%, transparent); border-radius: 10px; padding: 12px 14px; }
.fin-kpi-strong { border-color: color-mix(in oklch, var(--ink) 22%, transparent); }
.fin-kpi-l { font-size: 12px; color: var(--muted, #999); margin-bottom: 4px; }
.fin-kpi-v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fin-base-note { font-size: 12px; color: var(--muted, #999); margin-bottom: 14px; }

.fin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 720px) { .fin-two-col { grid-template-columns: 1fr; } }
.fin-block { margin-top: 16px; }
.fin-block-h { font-size: 13px; font-weight: 600; color: var(--muted, #999); margin-bottom: 8px; }
.fin-bars { display: flex; flex-direction: column; gap: 6px; }
.fin-bar-row { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 8px; font-size: 12px; }
.fin-bar-lbl { color: var(--muted, #999); white-space: nowrap; }
.fin-bar-track { height: 14px; background: color-mix(in oklch, var(--ink) 7%, var(--bg)); border-radius: 4px; overflow: hidden; }
.fin-bar-fill { display: block; height: 100%; background: #16A34A; border-radius: 4px; min-width: 2px; }
.fin-bar-val { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Operating expenses block header */
.fin-exp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 22px 0 8px; }

/* ── Планирование поступлений ───────────────────────────────────────────── */

/* Sub-navigation between the finance sections. */
.fin-subnav { display: flex; gap: 2px; margin-bottom: 14px; border-bottom: 1px solid var(--rule, color-mix(in oklch, var(--ink) 12%, transparent)); }
.fin-subnav-btn {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 14px; margin-bottom: -1px; font-size: 13px; cursor: pointer;
  color: var(--muted, #999); font-family: inherit;
}
.fin-subnav-btn:hover { color: var(--text); }
.fin-subnav-btn.active { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }

.fin-kpis-cash { margin-top: 4px; }
.fin-link { color: var(--text); text-decoration: underline; cursor: pointer; margin-left: 6px; }

/* Forecast bars: confirmed money sits solid at the left, expected money is
   hatched behind it, so the certain part of a quarter reads at a glance. */
.fin-fc { display: flex; flex-direction: column; gap: 6px; }
.fin-fc-row { display: grid; grid-template-columns: 92px 1fr auto 24px; align-items: center; gap: 10px; font-size: 12px; }
.fin-fc-lbl { color: var(--muted, #999); white-space: nowrap; }
.fin-fc-track { display: flex; height: 16px; background: color-mix(in oklch, var(--ink) 7%, var(--bg)); border-radius: 4px; overflow: hidden; }
.fin-fc-conf { display: block; height: 100%; background: #16A34A; }
.fin-fc-exp { display: block; height: 100%; background: repeating-linear-gradient(135deg, color-mix(in oklch, #16A34A 45%, var(--bg)) 0 5px, color-mix(in oklch, #16A34A 22%, var(--bg)) 5px 10px); }
.fin-fc-val { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.fin-fc-cnt { color: var(--muted, #999); text-align: right; font-variant-numeric: tabular-nums; }
.fin-fc-over .fin-fc-lbl { color: #DC2626; font-weight: 600; }
.fin-fc-over .fin-fc-conf { background: #DC2626; }
.fin-fc-over .fin-fc-exp { background: repeating-linear-gradient(135deg, color-mix(in oklch, #DC2626 45%, var(--bg)) 0 5px, color-mix(in oklch, #DC2626 22%, var(--bg)) 5px 10px); }

.fin-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 11px; color: var(--muted, #999); }
.fin-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.fin-dot-conf { background: #16A34A; }
.fin-dot-exp { background: repeating-linear-gradient(135deg, color-mix(in oklch, #16A34A 45%, var(--bg)) 0 4px, color-mix(in oklch, #16A34A 22%, var(--bg)) 4px 8px); }

.fin-rc-sum { font-size: 13px; color: var(--muted, #999); margin-bottom: 8px; }
.fin-rc-sum b { color: var(--text); font-variant-numeric: tabular-nums; }

/* Payment / receivable status chips. */
.fin-chip { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.fin-st-exp  { background: color-mix(in oklch, var(--ink) 8%, var(--bg)); color: var(--muted, #999); }
.fin-st-conf { background: color-mix(in oklch, #3B82F6 16%, var(--bg)); color: #2563EB; }
.fin-st-part { background: color-mix(in oklch, #E5A50A 20%, var(--bg)); color: #B45309; }
.fin-st-paid { background: color-mix(in oklch, #16A34A 16%, var(--bg)); color: #16A34A; }
.fin-st-off  { background: color-mix(in oklch, #DC2626 12%, var(--bg)); color: #DC2626; }

.fin-tr-over td { background: color-mix(in oklch, #DC2626 5%, transparent); }
.fin-tr-arch { opacity: .55; }
.fin-overdue { font-size: 11px; color: #DC2626; margin-top: 2px; }
.fin-alloc { font-size: 12px; color: var(--muted, #999); }
.fin-td-act { white-space: nowrap; }

/* Marks the overview as fact-only, so the missing work-log money reads as a
   deliberate exclusion rather than a gap. */
.fin-fact-note {
  font-size: 12px; color: var(--muted, #999); line-height: 1.5; margin-bottom: 14px;
  padding-left: 10px; border-left: 2px solid color-mix(in oklch, var(--ink) 16%, transparent);
}
/* Something needs the user's attention but isn't an error. */
.fin-warn-note {
  font-size: 12px; line-height: 1.5; margin: 10px 0 14px; padding: 9px 12px; border-radius: 8px;
  background: color-mix(in oklch, #E5A50A 12%, var(--bg)); color: #92400E;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.fin-warn-note .fin-link { color: inherit; }

/* Forecast figure inside a fact card: visibly set apart, never part of the sum. */
.fin-row-plan {
  margin-top: 6px; padding-top: 6px; opacity: .7;
  border-top: 1px dashed color-mix(in oklch, var(--ink) 18%, transparent);
}

.fin-models { max-width: 220px; }
.fin-model-chip {
  display: inline-block; padding: 1px 7px; margin: 1px 3px 1px 0; border-radius: 5px;
  font-size: 11px; background: color-mix(in oklch, var(--ink) 8%, var(--bg)); white-space: nowrap;
}
.fin-tr-click { cursor: pointer; }
.fin-tr-click:hover td { background: color-mix(in oklch, var(--ink) 4%, transparent); }

.fin-st-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0 10px; }
.fin-st-title { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 9px; }

.fin-recon { font-size: 12px; padding: 8px 12px; border-radius: 8px; margin-bottom: 6px; }
.fin-recon-ok  { background: color-mix(in oklch, #16A34A 10%, var(--bg)); color: #16A34A; }
.fin-recon-bad { background: color-mix(in oklch, #E5A50A 14%, var(--bg)); color: #B45309; }

.docs-hint { font-size: 12px; color: var(--muted, #999); line-height: 1.45; }
.docs-check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); }
.docs-check input { margin: 0; }
.mdb-btn-sm { padding: 4px 10px; font-size: 12px; }

/* Оплата стейтмента в один клик — зелёная, чтобы не путать с ＄ (форма платежа) */
.fin-icon-ok:hover { border-color: var(--ok, #2E7D32); color: var(--ok, #2E7D32); }
.mdb-btn-ok {
  border-color: var(--ok, #2E7D32);
  color: var(--ok, #2E7D32);
}
.mdb-btn-ok:hover { background: var(--ok, #2E7D32); color: #fff; }

/* ── SETTINGS ── */
/* Настройки по макету — 860×640: семь вкладок и строки «лейбл — контрол»
   в колонке шириной 560 переносились в две строки каждая. */
.set-card { width: min(860px, 100%); height: min(640px, 100%); }
.set-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--rule);
}
.set-head h3 { font-size: 18px; font-weight: 700; margin: 0; }

/* Вкладки стоят между шапкой и телом, а не внутри тела: карточка — колонка, и
   прокручивается в ней только .set-body. Внутри неё панель вкладок уезжала бы
   вверх ровно тогда, когда до неё есть дело, — на длинной «Системе».
   Горизонтальная прокрутка вместо переноса: семь вкладок в две строки на
   телефоне съедают треть карточки, а сама лента листается пальцем. */
.set-tabs {
  display: flex; gap: 2px; padding: 0 12px; flex-shrink: 0;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--rule);
}
.set-tabs::-webkit-scrollbar { display: none; }
.set-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 12px 10px; margin-bottom: -1px; white-space: nowrap;
  font-size: 13.5px; font-family: inherit; cursor: pointer; color: var(--muted, #999);
}
.set-tab:hover { color: var(--text); }
.set-tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }

.set-body { overflow-y: auto; padding: 4px 18px 18px; }

.set-group { padding-top: 18px; }
.set-group + .set-group { border-top: 1px solid var(--rule); margin-top: 18px; }
.set-group-title {
  /* Wrapping rather than squeezing: the note is a whole clause, and a title
     broken across three lines to make room for it is how «Мой почтовый ящик»
     read on a phone. */
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.set-group-note { font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted-soft); }

.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px 0;
}
.set-label { font-size: 13px; font-weight: 500; min-width: 0; }
.set-hint {
  display: block; font-size: 11px; font-weight: 400; color: var(--muted);
  margin-top: 2px; line-height: 1.35;
}
.set-input { width: 280px; max-width: 100%; flex-shrink: 0; }

.set-seg {
  display: flex; flex-shrink: 0;
  border: 1px solid var(--rule); border-radius: var(--radius-md, 6px);
  overflow: hidden; background: var(--surface-2);
}
.set-seg-btn {
  border: none; background: none; cursor: pointer;
  padding: 5px 11px; font: inherit; font-size: 12px;
  color: var(--muted); white-space: nowrap;
  transition: background .1s, color .1s;
}
.set-seg-btn + .set-seg-btn { border-left: 1px solid var(--rule); }
.set-seg-btn:hover { color: var(--ink); }
.set-seg-btn.active { background: var(--bg); color: var(--ink); font-weight: 500; }

.set-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding-top: 14px; margin-top: 4px;
}

/* ── Мой профиль и доступ ──
   One group with two halves — who you are, and how you get in — separated by a
   heading rather than split into two groups: both are «про меня» and a rule
   between them would read as the same boundary that divides mine from the
   agency's, which is the one distinction this screen is built on. */
.set-sub-title {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 16px 0 2px; padding-top: 12px;
  border-top: 1px dashed var(--rule);
}
.set-input-tiny { min-width: 0; width: 72px; text-align: center; }

/* Swatches wrap: sixteen of them never fit beside a label on a phone, and a
   colour picker that scrolls sideways is one nobody scrolls. */
.set-swatches { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 60%; }
.set-swatch {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; padding: 0;
  transition: transform .1s, border-color .1s;
}
.set-swatch:hover { transform: scale(1.12); }
.set-swatch.active { border-color: var(--ink); }

/* Ссылки на экраны, которые настраиваются в другом месте. Кнопки в столбик на
   узком экране: три подписи в строку — это горизонтальная прокрутка карточки,
   а её здесь быть не должно. */
.set-row-links { align-items: flex-start; }
.set-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.set-status { font-size: 12px; color: var(--muted); }
.set-status-err { color: var(--danger, #C0392B); }
/* A stale or failed backup has to be legible at a glance, not read for. */
.set-hint-bad { color: var(--danger, #C0392B); font-weight: 500; }

/* Ответ на строку слева, когда менять его нечем: тариф, дата оплаты, «занято 4
   из 5». Стоит там же, где в соседних строках стоит поле или переключатель, —
   иначе читаемое и настраиваемое выглядят как разные экраны. Красным — то, во
   что уже упёрлись: строка про исчерпанный лимит и есть объяснение отказа,
   который человек увидит на кнопке. */
.set-value {
  font-size: 13px; font-weight: 500; text-align: right; flex-shrink: 0;
  max-width: 55%; color: var(--ink);
}
.set-value-bad { color: var(--danger, #C0392B); }

/* ── Мой почтовый ящик ──
   A form rather than a row of toggles, because connecting a mailbox is one
   deliberate action with four fields in it. Stacked full width: on a phone
   these are the hardest inputs in the app to type into, and an application
   password is pasted rather than typed only when it fits on the screen. */
.set-mbx-body { display: flex; flex-direction: column; gap: 10px; }
.set-mbx-field { display: flex; flex-direction: column; gap: 4px; }
.set-mbx-field > span { font-size: 11px; color: var(--muted); }
.set-mbx-field .mdb-input { width: 100%; }
.set-mbx-grid { display: grid; grid-template-columns: 1fr 90px; gap: 10px; }

/* Three states with three different next moves — working, worth a look, and
   broken — so the block is coloured rather than uniformly grey. One variable
   per tone, set on the block and read by everything inside it, because the
   same three colours also mark whether a password is stored. */
.set-tone-ok   { --tone: #2E7D32; }
.set-tone-warn { --tone: #B45309; }
.set-tone-bad  { --tone: var(--danger, #C0392B); }
body.dark .set-tone-ok   { --tone: #6FBF73; }
body.dark .set-tone-warn { --tone: #E0A106; }

/* The standing answer to "does my mail work". It sits at the top of the panel
   while «Проверить» sits at the bottom of it, so it has to be findable after a
   scroll rather than blend into the hints around it. */
.set-mbx-state {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; line-height: 1.45; color: var(--muted);
  padding: 10px 12px;
  border: 1px solid var(--rule); border-left: 3px solid var(--tone, var(--rule-strong));
  border-radius: var(--radius-md, 6px);
  background: var(--surface-2);
}
.set-mbx-state-title { font-size: 13px; font-weight: 600; color: var(--tone, var(--ink)); }
.set-mbx-state-check { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--rule-strong); }

/* Whether a password is stored — a statement, not a hint, because the field
   above it is empty in both cases. Settled reads grey rather than green: the
   block above is already green when the mail works, and this is the smaller
   of the two facts. */
.set-mbx-secret {
  font-size: 12px; line-height: 1.4; font-weight: 500;
  margin: -4px 0 2px; color: var(--tone, var(--muted));
}
.set-mbx-secret.set-tone-ok { font-weight: 400; color: var(--muted); }

/* Open by default whenever there is no working password, folded away once
   there is: the two Yandex 360 mistakes it heads off are made once each. */
.set-mbx-help {
  font-size: 11px; line-height: 1.5; color: var(--muted);
  border: 1px solid var(--rule); border-radius: var(--radius-md, 6px);
  padding: 9px 12px;
}
.set-mbx-help > summary { cursor: pointer; font-size: 12px; font-weight: 500; color: var(--ink); }
.set-mbx-help p { margin: 8px 0 0; }
.set-mbx-help ol { margin: 8px 0 0; padding-left: 17px; }
.set-mbx-help li { margin-top: 6px; }
.set-mbx-help b { color: var(--ink); font-weight: 600; }
.set-mbx-warn {
  font-size: 12px; line-height: 1.4; padding: 9px 11px;
  border: 1px solid var(--danger, #C0392B); border-radius: var(--radius-md, 6px);
  color: var(--danger, #C0392B);
}
.set-mbx-warn code { font-family: ui-monospace, monospace; font-size: 11px; }
.set-mbx-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  flex-wrap: wrap; padding-top: 4px;
}
.set-mbx-foot .set-status { margin-right: auto; }

/* ── Поддержка и вопросы ──
   Тон закрытого обращения — тот же серый, что у всего неактивного: закрытый
   вопрос не «в порядке» и не «требует внимания», он просто больше не ждёт. */
.set-tone-mute { --tone: var(--muted); }

/* Часы работы — первое, что видно на вкладке, и единственное, что видно до
   всякой переписки. Цветная полоса слева, как у состояния ящика: тот же вопрос
   «сейчас всё хорошо или нет», заданный про нас. */
.set-sup-hours {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; line-height: 1.45; color: var(--muted);
  padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid var(--rule); border-left: 3px solid var(--tone, var(--rule-strong));
  border-radius: var(--radius-md, 6px);
  background: var(--surface-2);
}
.set-sup-hours b { font-size: 13px; font-weight: 600; color: var(--tone, var(--ink)); }

.set-sup-new-row { padding-bottom: 6px; }
.set-sup-text { width: 100%; margin-top: 8px; resize: vertical; font-family: inherit; }
.set-sup-empty { display: block; padding: 10px 0; }

.set-sup-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
/* Строка списка — кнопка целиком, а не текст со ссылкой: попасть пальцем в
   заголовок обращения на телефоне иначе можно только со второго раза. */
.set-sup-item {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: 9px 11px; text-align: left; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: var(--radius-md, 6px); font-family: inherit;
}
.set-sup-item:hover { border-color: var(--rule-strong); }
/* Непрочитанный ответ — жирная тема плюс метка слева. Одного жирного мало:
   на сером фоне карточки он читается как «просто заголовок». */
.set-sup-item.unread { border-left: 3px solid var(--accent); }
.set-sup-item.unread .set-sup-subj { font-weight: 600; }
.set-sup-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.set-sup-subj { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.set-sup-meta { font-size: 11px; color: var(--muted-soft); }
.set-sup-badge {
  flex-shrink: 0; font-size: 11px; font-weight: 500; color: var(--tone, var(--muted));
}

.set-sup-back {
  background: none; border: none; padding: 0; margin-bottom: 10px;
  font-size: 12px; font-family: inherit; color: var(--muted); cursor: pointer;
}
.set-sup-back:hover { color: var(--text); }
.set-sup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.set-sup-head .set-sup-subj { font-size: 14px; font-weight: 600; }

.set-sup-thread { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
/* Наши реплики и их — разным фоном и разным отступом. Одинаково выглядящая
   переписка читается как один длинный текст, в котором непонятно, где ответ. */
.set-sup-msg {
  padding: 8px 11px; border-radius: var(--radius-md, 6px);
  font-size: 13px; line-height: 1.5;
}
.set-sup-msg.us { background: var(--surface-2); margin-left: 24px; }
.set-sup-msg.them { background: var(--surface-2); margin-right: 24px; border-left: 3px solid var(--accent); }
.set-sup-msg-who {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 3px;
}
.set-sup-msg-who span { font-weight: 400; color: var(--muted-soft); }
/* Текст обращения приходит от человека и переносится как есть: перенос строки,
   которым он разделил «что делал» и «что увидел», — часть сообщения. */
.set-sup-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }

/* Ответы свёрнуты: справочник читают не подряд, а по одному вопросу. При
   поиске раскрываются все найденные — искали-то как раз ответ. */
.set-faq-item {
  border-bottom: 1px solid var(--rule); padding: 9px 0;
}
.set-faq-item > summary {
  cursor: pointer; font-size: 13px; line-height: 1.45; color: var(--ink);
  list-style-position: outside;
}
.set-faq-a { font-size: 12px; line-height: 1.6; color: var(--muted); padding: 2px 0 4px 2px; }
.set-faq-a p { margin: 7px 0 0; }
.set-faq-foot { display: block; margin-top: 16px; }

.side-foot-gear {
  flex-shrink: 0; width: 15px; height: 15px; color: var(--muted-soft);
  opacity: 0; transition: opacity .12s;
}
.side-foot-gear svg { width: 100%; height: 100%; display: block; }
.side-foot-user:hover .side-foot-gear { opacity: 1; }

/* Calendar density — the month grid's minimum row height. */
body[data-density="compact"] { --row-h: 88px; }
body[data-density="roomy"]   { --row-h: 152px; }

@media (max-width: 640px) {
  .set-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .set-input { width: 100%; }
  .set-seg-btn { flex: 1; }
}

/* ── MONTH STREAM ── */
/* The month grid scrolls continuously, so no cell is "another month" any more.
   The 1st carries its month name instead, and gets a heavier top rule — that
   pair is what marks a boundary as it goes past. */
.day-month {
  margin-left: 5px; font-size: 11px; font-weight: 600;
  color: var(--ink-soft); text-transform: lowercase;
}
.day-cell.month-start { box-shadow: inset 0 2px 0 var(--rule-strong); }
.day-cell.month-start .day-num { color: var(--ink); font-weight: 600; }

.day-flash { animation: dayFlash .8s ease-out; }
@keyframes dayFlash {
  0%, 55% { background: color-mix(in oklch, var(--accent, #3B82F6) 14%, transparent); }
  100%    { background: transparent; }
}

/* Sidebar counts line up in a column: the name takes the slack and truncates,
   the number keeps a fixed width so single and double digits share an edge. */
.model-item-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.view-count {
  flex-shrink: 0; min-width: 20px; text-align: right; padding: 0;
}

/* ── Money change log ── */
.fin-audit-chg {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 12px; line-height: 1.7;
}
.fin-audit-field { color: var(--muted); font-family: var(--mono, ui-monospace, monospace); font-size: 11px; }
.fin-audit-from { color: var(--muted); text-decoration: line-through; }
.fin-audit-arrow { color: var(--muted-soft); }
.fin-audit-to { color: var(--ink); font-weight: 500; }

/* ── Почта ──
   Same two-pane shape as the Wiki: the conversations on the left, the open one
   on the right, and one pane at a time once the screen is too narrow for both. */
.mail-container {
  display: grid;
  grid-template-columns: 400px 1fr;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
}
.mail-list {
  display: flex; flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--rule);
  background: var(--surface-2);
}
.mail-list-head { padding: 12px 12px 10px; border-bottom: 1px solid var(--rule); }
.mail-boxes { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.mail-box {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid transparent; border-radius: var(--radius);
  background: none; font: inherit; font-size: 13px; color: var(--ink-soft);
  cursor: pointer;
}
.mail-box:hover { background: var(--hover); }
.mail-box.active { background: var(--surface); border-color: var(--rule-strong); color: var(--ink); font-weight: 600; }
.mail-box-n { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mail-search {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--surface); font: inherit; font-size: 13px; color: var(--ink);
}
/* The second axis under the search: whose mail is the row above, what kind of
   mail is this one. Quieter than the boxes on purpose — it narrows a list
   rather than choosing one. */
.mail-views { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.mail-view {
  padding: 4px 9px; border: 1px solid var(--rule); border-radius: 999px;
  background: none; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer;
}
.mail-view:hover { background: var(--hover); color: var(--ink-soft); }
.mail-view.active { background: var(--surface); border-color: var(--rule-strong); color: var(--ink); }
.mail-sync {
  margin-top: 8px; padding: 6px 10px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--surface); font: inherit; font-size: 12px; color: var(--ink-soft); cursor: pointer;
}
.mail-sync:hover { background: var(--hover); }
.mail-note { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }
/* Shown in place of a wiki article when DOMPurify did not load — see 08-wiki.js */
.wiki-note { margin-bottom: 10px; font-size: 12px; line-height: 1.5; color: #B45309; }
.wiki-raw { white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.6; }
.mail-note-warn { color: #B45309; }

.mail-threads { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.mail-row {
  display: block; width: 100%; text-align: left;
  padding: 9px 10px; margin-bottom: 2px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: none; font: inherit; color: var(--ink); cursor: pointer;
}
.mail-row:hover { background: var(--hover); }
.mail-row.active { background: var(--surface); border-color: var(--rule-strong); }
.mail-row-top { display: flex; align-items: baseline; gap: 8px; }
.mail-row-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.mail-row-date { flex-shrink: 0; font-size: 11px; color: var(--muted); }
.mail-row-subj {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-count {
  flex-shrink: 0; font-size: 11px; color: var(--muted);
  border: 1px solid var(--rule-strong); border-radius: 8px; padding: 0 5px;
}
.mail-clip { flex-shrink: 0; font-size: 11px; }
.mail-row-prev {
  font-size: 12px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-row-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.mail-tag {
  font-size: 11px; padding: 1px 6px; border-radius: 6px;
  background: color-mix(in oklch, var(--ink) 7%, var(--bg)); color: var(--ink-soft);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-tag-staff { background: color-mix(in oklch, var(--accent) 16%, var(--bg)); color: var(--ink); }
.mail-tag-model { background: color-mix(in oklch, #8BA89B 30%, var(--bg)); }
/* A letter nobody owns is the one that gets forgotten — it reads as a warning. */
.mail-tag-none { background: color-mix(in oklch, #E5A50A 24%, var(--bg)); color: #7A4E00; }
.mail-tag-manual { background: none; color: var(--muted); }

.mail-detail { min-height: 0; overflow-y: auto; padding: 24px 32px 64px; }
.mail-detail-inner { max-width: 780px; }
.mail-empty { color: var(--muted); padding: 48px 8px; font-size: 14px; }
.mail-subject { font-size: 24px; font-weight: 700; margin: 0 0 4px; line-height: 1.25; }
.mail-thread-meta { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.mail-letter {
  border: 1px solid var(--rule); border-radius: var(--radius-md);
  background: var(--surface); margin-bottom: 10px; overflow: hidden;
}
.mail-letter.open { border-color: var(--rule-strong); }
.mail-letter-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 14px; cursor: pointer;
}
.mail-letter-head:hover { background: var(--hover); }
.mail-letter-who { font-size: 13px; font-weight: 600; }
.mail-letter-to { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mail-letter-date { flex-shrink: 0; font-size: 12px; color: var(--muted); white-space: nowrap; }
.mail-attr {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 14px; border-top: 1px solid var(--rule); background: var(--surface-2);
}
.mail-attr-l { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mail-attr-edit {
  margin-left: auto; background: none; border: none; padding: 2px 4px;
  font: inherit; font-size: 12px; color: var(--accent); cursor: pointer;
}
.mail-body { padding: 14px; font-size: 14px; line-height: 1.6; overflow-x: auto; }
.mail-body img, .mail-body table { max-width: 100%; }
.mail-body a { color: var(--accent); }
.mail-text { font: inherit; white-space: pre-wrap; word-break: break-word; margin: 0; }
.mail-empty-body { color: var(--muted); font-size: 13px; }
.mail-att { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; }
.mail-att-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font-size: 12px; color: var(--ink); text-decoration: none;
}
.mail-att-item:hover { background: var(--hover); }
.mail-att-size { color: var(--muted); }
.mail-att-gone { border-style: dashed; color: var(--muted); }
/* The name is the control in all three states — a link once the bytes are
   here, a button while they are still in the mailbox — so it has to look the
   same either way or the same file appears to be two different things. */
.mail-att-name {
  padding: 0; border: 0; background: none; font: inherit; font-size: 12px;
  color: var(--ink); text-decoration: none; cursor: pointer;
}
.mail-att-name:disabled { color: var(--muted); cursor: default; }
/* Dotted, because the file is described and not present: the row is a promise
   the mail server has to keep, not a document sitting on this disk. */
.mail-att-off { border-style: dotted; }
.mail-att-keep {
  padding: 0 2px; border: 0; background: none;
  font-size: 13px; line-height: 1; color: var(--muted); cursor: pointer;
}
.mail-att-keep:hover { color: var(--ink); }
.mail-att-keep.on { color: #B45309; }
.mail-letter-acts { display: flex; gap: 8px; padding: 0 14px 14px; }
.mail-letter-acts .mdb-btn { text-decoration: none; }
.mail-mobile-close { display: none; }

@media (max-width: 720px) {
  .mail-container { grid-template-columns: 1fr; grid-auto-rows: 100%; }
  .mail-detail { display: none; padding: 16px 16px 48px; }
  .mail-container.show-detail .mail-list { display: none; }
  .mail-container.show-detail .mail-detail { display: block; }
  .mail-mobile-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin-bottom: 8px;
    border: 1px solid var(--rule-strong); border-radius: var(--radius);
    background: var(--surface); color: var(--ink); font-size: 15px; cursor: pointer;
  }
  .mail-subject { font-size: 20px; }
}

/* ── Сверка прогноза с фактом ─────────────────────────────────────────────
   Отчёт, а не проводка: цифры двух реестров стоят рядом и нигде не
   складываются, поэтому подписи при числах мелкие и приглушённые — они
   поясняют, что именно сравнивается, а не спорят за внимание с самим числом. */
.fin-rec-cnt { font-size: 11px; color: var(--muted, #999); font-weight: 400; }
.fin-rec-ok  { font-size: 11px; color: #16A34A; margin-top: 2px; }

/* ── Поиск и фильтры на экране моделей ────────────────────────────────────
   Панель стоит между тулбаром и списком и рассчитана на то, что контролов в
   ней много: шесть диапазонов, три списка и поиск не встают в строку ни на
   одном экране, поэтому строка переносится, а не сжимает поля до нечитаемых.
   Числовые поля узкие намеренно — в них по три цифры, и широкое поле рядом с
   «от/до» читается как место для фразы. */
.mdb-filters { padding: 0 var(--pad-x, 32px) 8px; flex-shrink: 0; }
.mdb-filters-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.mdb-f-search, .mdb-f-num, .mdb-f-sel {
  border: 1px solid var(--rule, rgba(55,53,47,.12));
  border-radius: var(--radius, 6px);
  background: var(--surface, #fff);
  color: var(--ink, #37352F);
  font: inherit; font-size: 12.5px;
  padding: 5px 8px;
}
.mdb-f-search { flex: 1 1 180px; min-width: 140px; max-width: 260px; }
.mdb-f-num { width: 62px; }
.mdb-f-sel { max-width: 160px; }
.mdb-f-search:focus, .mdb-f-num:focus, .mdb-f-sel:focus {
  outline: none; border-color: var(--accent, #C8A882);
}
.mdb-f-range { display: inline-flex; align-items: center; gap: 4px; }
.mdb-f-lbl { font-size: 11.5px; color: var(--muted, #9B9A93); white-space: nowrap; }
.mdb-filters-foot { display: flex; align-items: center; gap: 10px; padding-top: 6px; }
.mdb-f-found { font-size: 11.5px; color: var(--muted, #9B9A93); }
.mdb-f-reset {
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 11.5px; color: var(--accent, #2383E2);
  cursor: pointer; text-decoration: underline;
}
.mdb-f-reset.hidden { display: none; }
@media (max-width: 720px) {
  .mdb-filters { padding: 0 var(--pad-x, 16px) 6px; }
  .mdb-f-search { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ОТДЕЛКА

   Секция стоит последней намеренно: она поправляет правила из блоков выше —
   тех, что писались под мышь и широкий экран, — а при равной специфичности
   спор решает порядок. Держать её одним куском, а не растаскивать по местам,
   стоит по той же причине, по которой её вообще пришлось писать: телефон
   проверяется целиком и разом, экран за экраном, и ответ на такую проверку
   ищется в одном месте, а не по пяти тысячам строк.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Касание вместо наведения ──
   На тач-устройстве `:hover` не наступает никогда — он либо не срабатывает
   вовсе, либо залипает после тапа. В файле 200 правил с `:hover` и три с
   `:active`, и это, а не вёрстка, — главная причина, по которой продукт на
   телефоне ощущается неживым: нажатие ничем не отвечает. Отклик даём здесь
   один раз на общие классы, а не на каждый экран отдельно. */
@media (hover: none) {
  .tb-btn:active, .icon-btn:active, .mdb-btn:active, .mdb-icon-btn:active,
  .fin-nav-btn:active, .vt-btn:active, .nav-btn:active, .today-btn:active,
  .set-row:active, .mdb-row:active, .list-item:active, .mail-row:active,
  .model-item:active, .day-cell:active, .fin-subnav-btn:active,
  .mdb-tab:active, .set-tab:active, .wiki-row:active {
    background: var(--hover);
  }
  .btn-primary:active, .btn-new:active, .mdb-btn-primary:active { filter: brightness(1.35); }
  .ev-card:active, .cal-bar:active, .kb-card:active, .pkg-card:active,
  .year-month:active, .mdb-card:active { filter: brightness(0.94); }

  /* Кнопки, которые видно только под курсором, на телефоне не существуют:
     удалить фотографию модели, ответить на сообщение, добавить подстраницу.
     Каждая из них — единственный способ сделать своё действие, и на тач-
     устройстве этого способа не было вовсе. Образец рядом: `.mdb-row-copy` и
     `.list-item-del` открыты так же и давно. */
  .mdb-media-acts { display: flex; }
  .chat-msg-actions { opacity: 1; }
  .mdb-book-thumb-del, .wiki-row-plus, .wiki-row-grip, .wiki-cat-plus, .kb-card-del {
    opacity: 1;
  }

  /* Выбранная модель в боковом списке красилась в `--bg` — то есть в белое на
     почти белом `--surface-2`, и выбор переставал быть виден. Правило писалось
     до нынешней палитры, когда фон списка был другим. */
  .model-item.active { background: var(--hover); }
}

/* ══ ТЕЛЕФОН (≤ 768px) ══ */
@media (max-width: 768px) {

  /* Вырез и домашняя полоса. `env(safe-area-inset-*)` до сих пор ничего не
     значил: ни одна страница не объявляла `viewport-fit=cover`, без которого
     iOS сам отступает от выреза и все шесть обращений к `env()` дают ноль.
     Теперь объявляет — и отступы надо расставить по-настоящему. */
  .topbar { padding-left: max(10px, env(safe-area-inset-left));
            padding-right: max(10px, env(safe-area-inset-right)); }
  .sidebar { padding-left: max(8px, env(safe-area-inset-left));
             padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .chat-fab { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

  /* Скролл внутренней панели, докрутившись до края, продолжался прокруткой
     всей оболочки: список писем дотягивал до конца — и уезжал топбар. */
  .mail-list, .mail-detail, .wiki-detail, .wiki-list, .fin-container,
  .mdb-wrap, .chat-messages, .set-body, .list-container, .docs-container,
  .pkg-container, .side-panel-inner, .mdb-detail {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Топбар ──
     Шесть кнопок, и «Пользователи» словами — это 95 пикселей из 370: вместе с
     остальными строка не помещалась, «Выйти» обрезалось, а имени экрана не
     оставалось вовсе. Боковое меню на телефоне спрятано, и человек переставал
     видеть, где находится.

     Значок рисуем маской, а не разметкой: кнопка в index.html — это текст без
     `<svg>`, а прятать её целиком нельзя (управление коллегами больше ниоткуда
     не открывается). Маска даёт ту же обводку, что у соседних значков, и
     красится `currentColor`, поэтому тему держит сама. */
  #users-btn {
    font-size: 0; width: var(--tap); padding: 0; justify-content: center;
  }
  #users-btn::before {
    content: ''; width: 17px; height: 17px; background: currentColor;
    -webkit-mask: var(--ico-users); mask: var(--ico-users);
  }
  /* «+ Событие» подписью — ещё 150 пикселей, из-за которых обрезалось «Выйти».
     Значок в кнопке свой и размечен инлайновым размером, поэтому `font-size: 0`
     гасит подпись, не трогая его: остаётся круглая кнопка с плюсом — то, чем
     главное действие и выглядит на телефоне. */
  .btn-new { font-size: 0; width: var(--tap); padding: 0; gap: 0; border-radius: 50%; }
  .topbar-crumb { font-size: 14px; font-weight: 600; }
  .tb-btn { height: var(--tap); }
  .tb-btn.icon { width: var(--tap); height: var(--tap); }
  .topbar { min-height: 52px; }

  /* ── Пальцем, а не курсором ──
     Двадцать шесть пикселей — это стрелка «предыдущий месяц», кнопка в каждой
     ячейке финансовой таблицы и крестик на теге. Мимо такого промахиваются.
     Растим область нажатия, а не саму кнопку: рисунок остаётся прежним. */
  .icon-btn, .mdb-icon-btn, .fin-nav-btn, .mdb-view-btn, .sb-add-btn,
  .stm-del, .wiki-caret, .set-swatch, .chat-msg-act, .mail-att-keep {
    position: relative;
  }
  .icon-btn::after, .mdb-icon-btn::after, .fin-nav-btn::after,
  .mdb-view-btn::after, .sb-add-btn::after, .stm-del::after,
  .wiki-caret::after, .set-swatch::after, .chat-msg-act::after,
  .mail-att-keep::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: var(--tap); height: var(--tap); transform: translate(-50%, -50%);
  }
  .mdb-btn, .mdb-btn-sm, .btn-new, .fin-subnav-btn, .vt-btn { min-height: 40px; }

  /* ── Общий диалог формы ──
     За ним 49 форм: все финансы, карточка модели, пакеты, поездки, документы.
     Мобильного вида у него не было ни одного, и на телефоне он оставался
     диалогом по центру с полями в 156 пикселей — при том что соседний
     `.modal` календаря давно открывается снизу во всю ширину. Приводим к нему:
     две системы диалогов терпимы, две разные — на телефоне нет. */
  .mdb-ovl { padding: 0; align-items: flex-end; }
  .mdb-ovl-card {
    width: 100%; max-width: 100%;
    border-radius: 18px 18px 0 0; border-bottom: 0;
    max-height: 92dvh;
  }
  .mdb-ovl-head { padding: 14px 16px; font-size: 17px; }
  .mdb-ovl-foot {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }
  .mdb-ovl-foot .mdb-btn { flex: 1; justify-content: center; min-height: 48px; }
  .docs-form { padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); max-height: none; }
  /* Подпись над полем, а не слева от него: в колонке 120px помещается «Контр…»,
     а полю остаётся меньше половины экрана. */
  .docs-f { grid-template-columns: 1fr; align-items: stretch; gap: 5px; }
  .docs-f > span:first-child { font-size: 12px; }
  .docs-f .mdb-input, .docs-f select, .docs-f input { min-height: 46px; }

  /* ── Карточка модели ──
     34px по каждому краю — это 68 пикселей из 390, отданные полю. Экран,
     который букер держит открытым весь день. */
  .mdb-detail-inner { padding: 0 var(--pad-x) 40px; }

  /* Плавающая кнопка чата стоит поверх последней строки списка. Там, где
     запас уже был (`.list-container`, `.pkg-container`), это видно; здесь его
     забыли. */
  .mdb-wrap, .mail-detail, .wiki-detail, .fin-container, .docs-container {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  /* Многодневная полоса события вылезала за последнюю колонку сетки: ширина
     считается по числу дней, а на телефоне колонка вчетверо у́же. */
  .cal-bars { overflow: hidden; }
  .cal-bar { font-size: 11px; }

  /* Доска канбана листается по колонке, а не останавливается посередине. */
  .kanban-board { scroll-snap-type: x mandatory; }
  .kb-col { scroll-snap-align: start; }

  /* Затемнение под боковым меню появлялось мгновенно, пока само меню
     выезжало четверть секунды. */
  .sidebar-backdrop {
    display: block; opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .sidebar-backdrop.visible { opacity: 1; pointer-events: auto; }

  /* Настройки: строка распадается на две, но значение осталось прижатым
     вправо — подпись у левого края, значение у правого, связи между ними не
     видно. */
  .set-value, .set-links, .set-swatches { text-align: left; justify-content: flex-start; }
  .set-swatches { max-width: none; }

  /* ── Строка сотрудника ──
     Аватар, имя, чип роли и три кнопки словами — это 328 пикселей из 346, и
     имени оставалось восемнадцать: оно обрезалось в «Антон», а логин — в «@…»,
     то есть строка переставала отвечать на оба вопроса, ради которых её
     читают. Кнопки уходят на свою строку и делят её поровну: у них одинаковый
     вес, и панелью они читаются лучше, чем хвостом за обрезанным именем. */
  .user-row {
    flex-wrap: wrap; padding: 10px 6px;
    border-bottom: 1px solid var(--rule);
  }
  .user-row:last-of-type { border-bottom: 0; }
  /* Отступ под аватар — кнопки встают под именем, а не под картинкой: 30
     пикселей аватара плюс зазор строки. Он вычитается из базиса, иначе строка
     кнопок — это 100% плюс отступ, то есть ровно на отступ шире своей строки. */
  .user-row-actions { flex: 1 0 calc(100% - 41px); gap: 8px; margin-left: 41px; }
  .user-row-actions .icon-btn {
    flex: 1; justify-content: center; min-height: 40px; font-size: 12px;
  }

  /* Кнопка встаёт под адресом во всю ширину: рядом с полем ей остаётся сотня
     пикселей, а это единственное действие, ради которого экран открывали, —
     ссылка показывается один раз, и не скопировав её, сотрудника заводят
     заново. */
  .invite-copy { flex-wrap: wrap; }
  .invite-copy .btn-primary { flex: 1 0 100%; }
}

/* ══ УЗКИЙ ЭКРАН (≤ 720px) — таблицы, почта, финансы ══ */
@media (max-width: 720px) {

  /* ── Ряды вкладок ──
     Семь вкладок финансов — это около 650 пикселей в колонке шириной 354.
     Флекс-элементы не сжимаются у́же своего содержимого, поэтому ряд не просто
     обрезался: он растягивал `.fin-container`, у которого `overflow-y: auto`,
     а значит вычисленный `overflow-x: auto` — и вбок ехал весь экран финансов
     целиком. Прокрутка ряда лечит и обрезку, и это. */
  .fin-subnav {
    overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .fin-subnav::-webkit-scrollbar { display: none; }
  .fin-subnav-btn { flex-shrink: 0; white-space: nowrap; }

  /* ── Почта ──
     Мобильный вид у почты был, но не работал: колонка `1fr` — это
     `minmax(auto, 1fr)`, а `auto` не даёт треку стать у́же самого длинного
     слова внутри. Список писем держал 627 пикселей в экране на 390, и адрес
     с темой обрезались справа. Лечится не вёрсткой, а `minmax(0, 1fr)`. */
  .mail-container { grid-template-columns: minmax(0, 1fr); }
  .mail-list, .mail-detail { min-width: 0; }
  .mail-row-subj, .mail-row-prev { min-width: 0; }
  .mail-mobile-close { width: var(--tap); height: var(--tap); }
  /* Письмо приходит с чужой вёрсткой — таблицей на 700 пикселей в том числе.
     У картинок ограничение уже стоит, у таблиц его забыли. */
  .mail-body table, .wiki-body table { max-width: 100%; display: block; overflow-x: auto; }

  /* ── Таблица → карточки ──
     Двенадцать колонок в 354 пикселя показывают две с половиной, и строка
     читается боковой прокруткой по одной. Поэтому на телефоне строка перестаёт
     быть строкой: каждая ячейка получает свою подпись из шапки (её проставляет
     `labelTableCells` в 04-ui.js) и встаёт в столбик, а строка становится
     карточкой. Прокрутки не остаётся вовсе — читать нечего вбок. */
  .docs-table-wrap { overflow: visible; border: 0; border-radius: 0; }
  .docs-table, .docs-table tbody, .docs-table tr, .docs-table td { display: block; }
  .docs-table thead { display: none; }
  .docs-table { font-size: 14px; }
  .docs-table tr {
    margin-bottom: 10px; padding: 4px 2px 2px;
    border: 1px solid var(--rule-strong); border-radius: var(--radius-lg);
    background: var(--surface);
  }
  .docs-table td {
    display: grid; grid-template-columns: 11ch minmax(0, 1fr);
    gap: 10px; align-items: baseline;
    padding: 7px 12px; border-bottom: 1px solid var(--rule);
  }
  .docs-table tr td:last-child { border-bottom: 0; }
  .docs-table td::before {
    content: attr(data-label);
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); overflow-wrap: anywhere;
  }
  /* Ячейка без подписи — это колонка кнопок: у неё пустой `<th>`. Подписать её
     нечем, а строкой на кнопку она растянула бы карточку вчетверо — кнопок в
     строке бывает три. `inline-flex` сводит их в одну панель внизу карточки:
     соседние ячейки встают в строку, потому что сама строка здесь `block`. */
  .docs-table td[data-label=""] {
    display: inline-flex; align-items: center;
    padding: 8px 6px; border-bottom: 0;
  }
  .docs-table td[data-label=""]::before { display: none; }
  .fin-td-note { max-width: none; }
  /* Подытог и «ничего не найдено» идут через colspan, подписей у них нет —
     они остаются обычной строкой во всю ширину. */
  .docs-table td[colspan] { grid-template-columns: 1fr; }
  .docs-table td[colspan]::before { display: none; }

  /* Сводка обзора вставала в две колонки по 172 пикселя, а «677 608,70 RUB»
     в них не помещается — сумма переносилась на вторую строку, отрываясь от
     своей валюты, и третья карточка оставляла дыру рядом с собой. В столбик
     число помещается целиком, и читать сводку сверху вниз всё равно
     привычнее, чем зигзагом. */
  .fin-kpis { grid-template-columns: 1fr; }
  .fin-kpi { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .fin-kpi-l { margin-bottom: 0; }
  .fin-kpi-v { font-size: 19px; white-space: nowrap; }
  .fin-card { min-width: 0; flex: 1 1 100%; }
}

/* Таймлайн на телефоне остаётся нечитаемым, и починить его отсюда нечем:
   `TL_DAY_W` и `TL_NAME_W` — числа в 02-calendar.js, до которых media query
   не достаёт, поэтому из тридцати одного дня видно пять. Клипается он честно
   (`.tl-head-outer { overflow: hidden }`), вбок экран не едет — то есть это
   не поломка вёрстки, а вкладка, которую надо переписать на токены ширины.
   Прятать её отсюда не стали: какие экраны показывать на телефоне — вопрос
   не оформления. */