@charset "utf-8";
/*
 * Дизайн-система хаба. Один файл на все страницы: цвета, размеры и
 * начертания заданы переменными в :root, и больше нигде цвета не пишутся.
 *
 * Шрифты подключаются со своего сервера — см. fonts/fonts.css. Кириллицы
 * в Public Sans нет вовсе, поэтому русский текст рисуется запасным
 * гротеском: ровно так же, как в утверждённом макете.
 */
@import url('fonts/fonts.css');

/* ============================================================
   ХАБ VybeCRM — дизайн-система «Пульт»
   Один файл на все страницы. Правила:
   · тёмная тема — основная, светлая — полный аналог;
   · всё держится на 1px границах и контрасте, без теней и градиентов;
   · цифры, версии, коды, время — только моноширинным;
   · углы почти прямые (2-3px): интерфейс инструмента, не приложения.
   Меняете вид — меняйте только переменные в :root / [data-theme].
   ============================================================ */

:root {
  /* — тёмная (основная) — */
  --canvas:#101722; --surface:#182230; --surface-2:#202e40; --tint-3:#2b3c52; --side:#182230;
  --line:#2c3b50; --line-strong:#40516a; --line-hard:#62738c;
  /*
   * Приглушённый текст держит норму доступности, а не «выглядит тише».
   *
   * Было #6d747e: 3.97 на карточке и 3.77 на подкрашенной строке — ниже
   * 4.5. Повторная приёмка 17.09.2026 отметила это как нечитаемость
   * второстепенных подписей, и она права. #8b929c даёт 5.97 / 5.67 / 5.15
   * на всех трёх подложках и остаётся приглушённым.
   */
  --ink:#edf2fa; --ink-soft:#c2cede; --faint:#a0afc3;
  --brand:#ea580c; --brand-ink:#fb923c; --on-brand:#0a0b0d;
  --brand-soft:rgba(234,88,12,.14); --brand-soft-2:rgba(234,88,12,.26);
  --ok:#3fbf87; --warn:#e0a33a; --bad:#f0655a; --info:#5aa9f0;
  --ok-soft:rgba(63,191,135,.13); --warn-soft:rgba(224,163,58,.13);
  --bad-soft:rgba(240,101,90,.13); --info-soft:rgba(90,169,240,.13);
  --ring:0 0 0 2px var(--canvas), 0 0 0 4px var(--brand);
  --grid-line:rgba(255,255,255,.028);

  --radius:14px; --radius-s:8px;
  --nav-w:15.75rem; --nav-w-min:3.5rem; --header-h:60px;
  --sans:'Public Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
:root[data-theme="light"] {
  --canvas:#f4f5f8; --surface:#ffffff; --surface-2:#f0f2f6; --tint-3:#e8ecf3; --side:#ffffff;
  --line:#e2e7ef; --line-strong:#cbd3e0; --line-hard:#9aa9bf;
  /* то же для светлой: было 4.08 и 3.70, стало 6.16 / 5.60 / 4.88 */
  --ink:#1d2638; --ink-soft:#465269; --faint:#606c80;
  --brand:#c2410c; --brand-ink:#a5350a; --on-brand:#fff8f4;
  --brand-soft:rgba(194,65,12,.10); --brand-soft-2:rgba(194,65,12,.20);
  --ok:#136f4e; --warn:#8a5a0c; --bad:#a72d22; --info:#1d5f9e;
  --ok-soft:rgba(19,111,78,.10); --warn-soft:rgba(138,90,12,.11);
  --bad-soft:rgba(167,45,34,.09); --info-soft:rgba(29,95,158,.10);
  --ring:0 0 0 2px var(--canvas), 0 0 0 4px var(--brand);
  --grid-line:rgba(20,18,14,.035);
  color-scheme:light;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--canvas); color:var(--ink);
  font:14px/1.45 var(--sans); -webkit-font-smoothing:antialiased;
  font-feature-settings:'cv05','ss01';
}
/* Слабая сетка на полотне — «миллиметровка» пульта, читается только краем глаза. */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
}
a { color:var(--brand-ink); text-decoration:none; }
a:hover { color:var(--brand-ink); text-decoration:underline; text-underline-offset:2px; }
:focus-visible { outline:0; box-shadow:var(--ring); }
::selection { background:var(--brand-soft-2); color:var(--ink); }
strong,b { font-weight:650; }
hr { border:0; border-top:1px solid var(--line); margin:16px 0; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line-strong); border:3px solid var(--canvas); }
::-webkit-scrollbar-thumb:hover { background:var(--line-hard); }

/* мелкие утилиты */
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; }
.nowrap { white-space:nowrap; font-family:var(--mono); }
.muted { color:var(--faint); }
.grow { flex:1 1 auto; min-width:0; }
.mt { margin-top:14px; }
.right { text-align:right; }
/* подписи-капслоки: 10.5px читались только вблизи, поднято до 11.5 */
.caps { font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:650; color:var(--faint); font-family:var(--mono); }
[hidden] { display:none !important; }

/* ============================================================
   1. Оболочка
   ============================================================ */
.shell { display:flex; min-height:100vh; position:relative; z-index:1; }

.side {
  flex:0 0 var(--nav-w); width:var(--nav-w);
  background:var(--side); border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow:hidden;
  transition:flex-basis .18s var(--ease), width .18s var(--ease);
}
.side .mark {
  display:flex; align-items:center; gap:9px; font-weight:700; font-size:13px;
  height:var(--header-h); padding:0 12px; flex:0 0 auto; color:var(--ink);
  letter-spacing:.02em; text-transform:uppercase; border-bottom:1px solid var(--line);
  font-family:var(--mono);
}
.side .mark:hover { text-decoration:none; }
.side .mark .logo {
  width:26px; height:26px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--brand); color:var(--on-brand); border-radius:var(--radius-s);
}
.side .mark .sub { color:var(--faint); font-weight:400; }
.side .mark .name { white-space:nowrap; overflow:hidden; }

.side-scroll { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:8px 8px 12px; }
.nav-group { display:flex; flex-direction:column; gap:1px; margin-bottom:10px; }
.nav-title {
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--faint); padding:10px 10px 5px; font-family:var(--mono); white-space:nowrap;
}
.side nav a {
  position:relative; display:flex; align-items:center; gap:10px; height:32px; padding:0 10px;
  border-radius:var(--radius-s); color:var(--ink-soft); font-size:13.5px; font-weight:500;
  white-space:nowrap; transition:background .1s, color .1s;
}
.side nav a > span:not(.nav-n) { overflow:hidden; text-overflow:ellipsis; }
.side nav a:hover { background:var(--surface-2); color:var(--ink); text-decoration:none; }
.side nav a.on { background:var(--brand-soft); color:var(--brand-ink); font-weight:650; }
.side nav a.on::before {
  content:''; position:absolute; left:-8px; top:4px; bottom:4px; width:2px; background:var(--brand);
}
.side nav a svg { flex:0 0 auto; opacity:.65; }
.side nav a:hover svg, .side nav a.on svg { opacity:1; }
.nav-n {
  margin-left:auto; min-width:17px; text-align:center; padding:0 4px;
  background:var(--brand); color:var(--on-brand); border-radius:var(--radius-s);
  font:650 10.5px/16px var(--mono); font-variant-numeric:tabular-nums;
}
.nav-n.quiet { background:var(--tint-3); color:var(--ink-soft); }

.side .foot { flex:0 0 auto; padding:8px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.side .me { display:flex; align-items:center; gap:9px; min-width:0; padding:0 2px; }
.avatar {
  width:28px; height:28px; flex:0 0 auto; border-radius:var(--radius-s);
  display:grid; place-items:center; font:700 11px var(--mono);
  background:var(--brand-soft-2); color:var(--brand-ink);
}
.side .who { color:var(--ink); font-weight:650; font-size:13px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side .who-sub { color:var(--faint); font-size:11.5px; display:flex; gap:8px; }
.side .who-sub a { color:var(--faint); }
.side .who-sub a:hover { color:var(--brand-ink); text-decoration:none; }
.foot-line { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.side .ver { font:11px var(--mono); color:var(--faint); white-space:nowrap; }

.theme { display:flex; gap:1px; padding:2px; border:1px solid var(--line); background:var(--surface-2); }
.theme button {
  all:unset; cursor:pointer; width:28px; height:22px; display:grid; place-items:center; color:var(--faint);
  transition:background .1s,color .1s;
}
.theme button:hover { color:var(--ink); background:var(--tint-3); }
.theme button.on { background:var(--brand-soft); color:var(--brand-ink); }
.theme button:focus-visible { box-shadow:var(--ring); }

/* свёрнутый сайдбар — только иконки */
.side-toggle {
  all:unset; cursor:pointer; display:grid; place-items:center; width:26px; height:26px;
  color:var(--faint); border:1px solid transparent; margin-left:auto;
}
.side-toggle:hover { color:var(--ink); background:var(--surface-2); border-color:var(--line); }
.side-toggle:focus-visible { box-shadow:var(--ring); }
html[data-side="min"] .side { flex-basis:var(--nav-w-min); width:var(--nav-w-min); }
html[data-side="min"] .side .mark .name,
html[data-side="min"] .side .mark .sub,
html[data-side="min"] .nav-title,
html[data-side="min"] .side nav a > span:not(.nav-n),
html[data-side="min"] .side .me > div,
html[data-side="min"] .side .ver,
html[data-side="min"] .theme button:not(.on) { display:none; }
html[data-side="min"] .side .mark { justify-content:center; padding:0; }
html[data-side="min"] .side nav a { justify-content:center; padding:0; }
html[data-side="min"] .nav-group { margin-bottom:6px; padding-top:6px; border-top:1px solid var(--line); }
html[data-side="min"] .nav-group:first-child { border-top:0; padding-top:0; }
html[data-side="min"] .nav-n { position:absolute; top:1px; right:1px; margin:0; min-width:0; padding:0 3px; font-size:9px; line-height:12px; }
html[data-side="min"] .side .foot { align-items:center; }
html[data-side="min"] .foot-line { flex-direction:column; }
html[data-side="min"] .side .me { justify-content:center; }
html[data-side="min"] .side-toggle { margin:0; }
/* подсказка с названием при свёрнутом меню */
html[data-side="min"] .side nav a::after {
  content:attr(data-name); position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%) translateX(-4px);
  background:var(--tint-3); color:var(--ink); border:1px solid var(--line-strong);
  padding:4px 8px; font-size:12px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .12s, transform .12s; z-index:60;
}
html[data-side="min"] .side nav a:hover::after { opacity:1; transform:translateY(-50%); }

/* ============================================================
   2. Верхняя строка
   ============================================================ */
.pane { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.top {
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:10px;
  height:var(--header-h); padding:0 16px; flex:0 0 auto;
  background:color-mix(in srgb,var(--canvas) 88%,transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.top .where { display:flex; align-items:center; gap:7px; min-width:0; font:11.5px var(--mono); color:var(--faint); text-transform:uppercase; letter-spacing:.08em; }
.top .where b { color:var(--ink); font-weight:650; white-space:nowrap; }
.top .where .sep { opacity:.45; }
.top .tools { margin-left:auto; display:flex; align-items:center; gap:8px; }

/* поле поиска, которое на деле открывает палитру */
.searchbox {
  display:flex; align-items:center; gap:8px; cursor:text;
  height:30px; padding:0 8px 0 10px; min-width:15rem;
  background:var(--surface); border:1px solid var(--line); color:var(--faint);
  font-size:13px; transition:border-color .12s,color .12s; white-space:nowrap;
}
.searchbox:hover { border-color:var(--line-strong); color:var(--ink-soft); }
.searchbox svg { flex:0 0 auto; }
.searchbox .kbd { margin-left:auto; }
.kbd {
  display:inline-flex; align-items:center; gap:2px; padding:1px 5px; min-width:18px; justify-content:center;
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--faint);
  font:600 10.5px/16px var(--mono); border-radius:2px;
}
.icon-btn {
  all:unset; cursor:pointer; position:relative; display:grid; place-items:center;
  width:30px; height:30px; color:var(--ink-soft); border:1px solid var(--line); background:var(--surface);
  transition:color .12s,border-color .12s,background .12s;
}
.icon-btn:hover { color:var(--ink); border-color:var(--line-strong); background:var(--surface-2); }
.icon-btn:focus-visible { box-shadow:var(--ring); }
.icon-btn.on { color:var(--brand-ink); border-color:var(--brand); background:var(--brand-soft); }
.icon-btn .badge {
  position:absolute; top:-5px; right:-5px; min-width:15px; padding:0 3px;
  background:var(--brand); color:var(--on-brand); font:700 9.5px/14px var(--mono);
  border-radius:2px; text-align:center;
}
.site-link { font:12px var(--mono); color:var(--ink-soft); text-decoration:none; padding:4px 6px; border-radius:var(--radius-s); white-space:nowrap; }
.site-link:hover { color:var(--ink); background:var(--surface-2); }
.burger { display:none; cursor:pointer; color:var(--ink); padding:5px; line-height:0; border:1px solid var(--line); background:var(--surface); }
.burger:hover { background:var(--surface-2); }

/* ============================================================
   3. Страница: заголовки, секции
   ============================================================ */
main { margin:0; padding:20px 16px 56px; max-width:1560px; width:100%; }
main > * { animation:rise .3s var(--ease) both; }
main > *:nth-child(2) { animation-delay:.03s; }
main > *:nth-child(3) { animation-delay:.06s; }
main > *:nth-child(4) { animation-delay:.09s; }
main > *:nth-child(n+5) { animation-delay:.12s; }
@keyframes rise { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

h1 { font-size:20px; margin:0 0 3px; letter-spacing:-.015em; font-weight:700; line-height:1.15; }
h2 { font-size:12px; margin:0 0 12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-family:var(--mono); }
h2.section { margin:20px 0 8px; }
.page-head { display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; margin-bottom:18px; }
.page-head .grow { flex:1 1 20rem; }
.page-head .hint { margin:0; }
.page-head .actions { display:flex; gap:6px; flex-wrap:wrap; }
.hint { color:var(--faint); font-size:12.5px; margin:0 0 16px; max-width:64rem; text-wrap:pretty; }
h1 + .hint { margin-bottom:18px; }

section {
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; margin-bottom:14px;
}
section > h2:first-child { margin-top:0; }
.sec-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.sec-head h2 { margin:0; }
.sec-head .tools { margin-left:auto; display:flex; gap:6px; align-items:center; }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(26rem,100%),1fr)); gap:14px; align-items:start; margin-bottom:14px; }
.cols > section { margin-bottom:0; }
.cols.wide { grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin-bottom:12px; }
.card.fresh { border-left:2px solid var(--brand); }
.card.warn-card { border-color:color-mix(in srgb,var(--warn) 45%,var(--line)); }
.card-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; }

/* ============================================================
   4. Таблицы
   ============================================================ */
.table-wrap { overflow-x:auto; margin:0 -16px; padding:0 16px; }
table { width:100%; border-collapse:collapse; }
th {
  position:sticky; top:0; z-index:2; text-align:left; white-space:nowrap;
  font:650 10.5px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase; color:var(--faint);
  padding:9px 10px; background:var(--surface); border-bottom:1px solid var(--line-strong);
}
th.num, td.num, th.right, td.right { text-align:right; }
td { padding:9px 10px; font-size:13.5px; vertical-align:middle; border-top:1px solid var(--line); }
thead + tbody tr:first-child td { border-top:0; }
tbody tr { transition:background .1s; }
tbody tr:hover { background:var(--surface-2); }
tbody tr.picked { background:var(--brand-soft); }
tbody tr.dim { opacity:.5; }
td:first-child, th:first-child { padding-left:4px; }
td:last-child, th:last-child { padding-right:4px; }
th[data-sort] { cursor:pointer; user-select:none; }
th[data-sort]:hover { color:var(--ink); }
th[data-sort]::after { content:'↕'; opacity:.35; margin-left:5px; }
th[data-sort][aria-sort="ascending"]::after { content:'↑'; opacity:1; color:var(--brand-ink); }
th[data-sort][aria-sort="descending"]::after { content:'↓'; opacity:1; color:var(--brand-ink); }
th.pickcol, td.pickcol { width:30px; padding-right:0; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; vertical-align:1px; }
.row-acts { display:flex; gap:5px; justify-content:flex-end; opacity:.5; transition:opacity .12s; }
tr:hover .row-acts, .row-acts:focus-within { opacity:1; }

/* панель массовых действий */
.bulkbar {
  position:sticky; bottom:12px; z-index:25; margin:12px 0 0;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 12px; background:var(--tint-3); border:1px solid var(--line-hard);
  border-radius:var(--radius); animation:rise .18s var(--ease) both;
}
.bulkbar .n { font:650 12px var(--mono); color:var(--brand-ink); }
.bulkbar .sp { flex:1 1 auto; }

/* ============================================================
   5. Формы и кнопки
   ============================================================ */
input,select,textarea {
  font:inherit; font-size:13.5px; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line-strong); border-radius:var(--radius-s); padding:7px 10px; width:100%;
  transition:border-color .12s,box-shadow .12s,background .12s;
}
input:hover,select:hover,textarea:hover { border-color:var(--line-hard); }
input:focus,select:focus,textarea:focus { border-color:var(--brand); background:var(--surface); box-shadow:0 0 0 3px var(--brand-soft); outline:0; }
input::placeholder,textarea::placeholder { color:var(--faint); }
input[type=checkbox],input[type=radio] { width:15px; height:15px; padding:0; accent-color:var(--brand); vertical-align:-2px; }
input[type=search] { font-family:var(--sans); }
input.mono,input[type=number] { font-family:var(--mono); }
textarea { min-height:3rem; resize:vertical; line-height:1.5; font-family:var(--sans); }
select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%); background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%; background-size:5px 5px; background-repeat:no-repeat; padding-right:26px; }
td select { min-width:8rem; }
/*
 * Подпись к полю.
 *
 * В хабе подпись пишется двумя способами: отдельно над полем
 * (`<label>…</label><input>`) и обёрткой вокруг него
 * (`<label class="field"><span>…</span><select>`). Во втором случае
 * отступ у самой подписи-обёртки уходит ПОД поле, а между текстом и полем
 * не оставалось ничего — подпись лежала на рамке. Поэтому отступ задан и
 * подписи, и первому куску текста внутри обёртки.
 */
label { display:block; font:650 10.5px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin:0 0 8px; }
label:has(> input:not([type=checkbox]):not([type=radio]), > select, > textarea) > span:first-child { display:block; margin-bottom:8px; }
label.field > span:first-child { display:block; margin-bottom:8px; }
/* Обёртка подписи не должна добавлять свой отступ под полем: интервалы между полями задаёт форма. */
label:has(> input:not([type=checkbox]):not([type=radio]), > select, > textarea) { margin-bottom:0; }
.field { margin-bottom:16px; }
.stack > label.field { margin-bottom:0; }
.field .help { font-size:11.5px; color:var(--faint); margin-top:4px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.row > * { flex:1 1 180px; }
input[type=file] { background:none; border:1px dashed var(--line-strong); padding:8px; font-size:12.5px; color:var(--ink-soft); }
input[type=file]::file-selector-button { font:650 12px var(--mono); cursor:pointer; margin-right:10px; background:var(--tint-3); color:var(--ink); border:1px solid var(--line-strong); border-radius:2px; padding:5px 9px; }
.check { display:inline-flex; align-items:center; gap:7px; margin:0; font-size:13px; color:var(--ink); cursor:pointer; text-transform:none; letter-spacing:0; font-family:var(--sans); font-weight:400; }

button,.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font:650 12.5px/1 var(--mono); letter-spacing:.03em; cursor:pointer; white-space:nowrap;
  background:var(--brand); color:var(--on-brand); border:1px solid var(--brand);
  border-radius:var(--radius-s); padding:8px 13px;
  transition:background .12s,border-color .12s,color .12s,transform .06s;
}
button:hover,.btn:hover { background:var(--brand-ink); border-color:var(--brand-ink); text-decoration:none; color:var(--on-brand); }
button:active,.btn:active { transform:translateY(1px); }
button.ghost,.btn.ghost { background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
button.ghost:hover,.btn.ghost:hover { background:var(--surface-2); border-color:var(--line-hard); color:var(--ink); }
button.quiet,.btn.quiet { background:transparent; color:var(--ink-soft); border-color:transparent; }
button.quiet:hover,.btn.quiet:hover { background:var(--surface-2); color:var(--ink); }
button.danger,.btn.danger { background:transparent; color:var(--bad); border-color:color-mix(in srgb,var(--bad) 45%,transparent); }
button.danger:hover,.btn.danger:hover { background:var(--bad-soft); color:var(--bad); border-color:var(--bad); }
button.small,.btn.small { padding:5px 9px; font-size:11.5px; }
button:disabled,.btn:disabled { opacity:.45; cursor:default; transform:none; }
form.inline { display:inline-flex; gap:6px; align-items:center; margin:0; }
form.pull { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; }
form.pull .field { margin:0; min-width:9rem; }
form.pull > .muted { padding-bottom:9px; }
.stack { display:flex; flex-direction:column; gap:16px; }
.stack > button,.stack > .btn { align-self:flex-start; }

/* сегменты-переключатели */
.seg { display:inline-flex; border:1px solid var(--line); background:var(--surface-2); padding:2px; gap:1px; }
.seg > * {
  all:unset; cursor:pointer; padding:5px 10px; font:600 11.5px var(--mono); color:var(--faint);
  text-transform:uppercase; letter-spacing:.06em; transition:background .1s,color .1s;
  white-space:nowrap; text-align:center;
}
.seg { flex-wrap:wrap; max-width:100%; }
@media (max-width:520px) { .seg > * { padding:5px 8px; font-size:10.5px; letter-spacing:.03em; } }
.seg > *:hover { color:var(--ink); background:var(--tint-3); text-decoration:none; }
.seg > .on { background:var(--brand-soft); color:var(--brand-ink); }

/* ============================================================
   6. Метки, фишки, сообщения
   ============================================================ */
.pill {
  display:inline-flex; align-items:center; gap:5px; padding:2px 7px;
  border:1px solid currentColor; border-radius:2px;
  font:650 10.5px/15px var(--mono); letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; vertical-align:1px;
}
.pill::before { content:''; width:5px; height:5px; background:currentColor; }
.pill.ok { color:var(--ok); background:var(--ok-soft); }
.pill.warn { color:var(--warn); background:var(--warn-soft); }
.pill.bad { color:var(--bad); background:var(--bad-soft); }
.pill.brand { color:var(--brand-ink); background:var(--brand-soft); }
.pill.info { color:var(--info); background:var(--info-soft); }
.pill.muted { color:var(--faint); background:var(--surface-2); }
.pill.plain::before { display:none; }
.tag { display:inline-block; padding:2px 6px; font:500 11.5px var(--mono); background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); border-radius:2px; vertical-align:1px; }
.company { display:inline-flex; align-items:center; gap:5px; padding:2px 7px; font:650 11.5px var(--mono); background:var(--brand-soft); color:var(--brand-ink); border-radius:2px; }
.chips { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px; }
.chip {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:5px 10px;
  font:500 12.5px var(--sans); background:var(--surface-2); color:var(--ink-soft);
  border:1px solid var(--line); border-radius:var(--radius-s); transition:background .1s,color .1s,border-color .1s;
}
.chip:hover { background:var(--tint-3); color:var(--ink); text-decoration:none; }
.chip.on { background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand); font-weight:650; }
.chip-n { font:11px var(--mono); opacity:.7; }
code {
  font:12.5px var(--mono); background:var(--surface-2); color:var(--ink-soft);
  border:1px solid var(--line); border-radius:2px; padding:1px 5px;
}
.note {
  display:flex; gap:10px; align-items:flex-start; padding:10px 12px; font-size:13px; margin-bottom:14px;
  border:1px solid transparent; border-left-width:2px; border-radius:var(--radius-s);
}
.note.ok { background:var(--ok-soft); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 35%,transparent); border-left-color:var(--ok); }
.note.bad { background:var(--bad-soft); color:var(--bad); border-color:color-mix(in srgb,var(--bad) 35%,transparent); border-left-color:var(--bad); }
.note.warn { background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 35%,transparent); border-left-color:var(--warn); }
.note.info { background:var(--info-soft); color:var(--info); border-color:color-mix(in srgb,var(--info) 35%,transparent); border-left-color:var(--info); }
.note a { color:inherit; text-decoration:underline; }
/*
 * Внутри цветной плашки серый прямоугольник кода разрывает фразу на куски:
 * читается не предложение, а чередование подложек. Оставляем только контур
 * в цвете самой плашки.
 */
.note code { background:none; border-color:color-mix(in srgb,currentColor 30%,transparent); color:inherit; }
/* Команду не вплетаем в текст: её копируют целиком, а не читают. */
.note-do {
  display:block; margin-top:8px; padding:7px 10px; font:12.5px var(--mono);
  background:color-mix(in srgb,currentColor 8%,transparent);
  border:1px solid color-mix(in srgb,currentColor 22%,transparent);
  border-radius:var(--radius-s); user-select:all;
}
.note-text { display:block; }
.note-text b { display:block; margin-bottom:2px; }
.blank { text-align:center; padding:28px 14px; color:var(--faint); }
.blank strong { display:block; color:var(--ink); font-size:14px; margin-bottom:4px; }
.blank .btn { margin-top:12px; }
.empty { color:var(--faint); text-align:center; padding:14px 0; font-size:13px; }
.facts { display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:10px; }
.facts > div { display:flex; flex-direction:column; gap:1px; font:11px var(--mono); color:var(--faint); text-transform:uppercase; letter-spacing:.08em; }
.facts b { font:650 14px var(--mono); color:var(--ink); text-transform:none; letter-spacing:0; }

/* ============================================================
   7. Плитки сводки + графики
   ============================================================ */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-bottom:14px; }
/* Что именно нарисовано на графике: «обращений: 3» и линия под ним — разные величины. */
.spark-t { margin-top:2px; font-size:11px; color:var(--faint); }
/* одна и та же подпись двумя длинами: на телефоне места меньше, а смысл тот же */
.narrow-only { display:none; }
/* Спокойно — строкой, а не карточкой во весь первый экран. */
.calm { margin:0 0 14px; color:var(--faint); font-size:13px; }
.tile {
  position:relative; display:block; color:inherit; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px;
  transition:border-color .14s,transform .14s,background .14s;
}
a.tile:hover { text-decoration:none; border-color:var(--brand); transform:translateY(-2px); }
a.tile::after { content:'→'; position:absolute; top:11px; right:12px; color:var(--faint); opacity:0; transform:translateX(-4px); transition:opacity .14s,transform .14s; font-family:var(--mono); }
a.tile:hover::after { opacity:1; transform:none; color:var(--brand-ink); }
.tile-t { font:650 10.5px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:7px; }
.tile-t svg { opacity:.6; }
.tile-v { font:700 26px/1.1 var(--mono); margin:9px 0 3px; letter-spacing:-.02em; }
.tile-v small { font-size:14px; color:var(--faint); font-weight:400; white-space:nowrap; }
.tile-s { color:var(--faint); font-size:12px; }
section .tile-v { font-size:19px; }
.tile.attn { border-color:color-mix(in srgb,var(--warn) 50%,transparent); }
.tile.attn .tile-s { color:var(--warn); }
.tile.hot { border-color:color-mix(in srgb,var(--bad) 50%,transparent); }
.tile.hot .tile-s { color:var(--bad); }
.tile .spark { margin-top:8px; display:block; width:100%; height:34px; }
.trend { display:inline-flex; align-items:center; gap:3px; font:650 11px var(--mono); padding:1px 5px; border-radius:2px; }
.trend.up { color:var(--ok); background:var(--ok-soft); }
.trend.down { color:var(--bad); background:var(--bad-soft); }
.trend.flat { color:var(--faint); background:var(--surface-2); }
.bar { height:5px; background:var(--surface-2); overflow:hidden; margin-top:9px; border-radius:1px; }
.bar span { display:block; height:100%; transition:width .5s var(--ease); }

/* столбиковый график */
.chart { display:block; width:100%; height:150px; }
.chart-legend { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:10px; font:11px var(--mono); color:var(--faint); text-transform:uppercase; letter-spacing:.07em; }
.chart-legend i { display:inline-block; width:8px; height:8px; margin-right:5px; vertical-align:0; }
.spark-path { animation:draw 1s var(--ease) both; }
@keyframes draw { from{stroke-dashoffset:1} to{stroke-dashoffset:0} }

/* требует внимания */
.attn-list { display:flex; flex-direction:column; }
.attn-item {
  display:flex; align-items:center; gap:10px; padding:9px 6px; color:inherit;
  border-top:1px solid var(--line); transition:background .1s,padding-left .12s;
}
.attn-item:first-child { border-top:0; }
.attn-item:hover { text-decoration:none; background:var(--surface-2); padding-left:12px; }
.attn-item .pill { flex:0 0 auto; }
.attn-item .t { flex:1 1 auto; min-width:0; font-size:13.5px; }
.attn-item .go { color:var(--faint); font:11.5px var(--mono); flex:0 0 auto; }
.attn-item:hover .go { color:var(--brand-ink); }

/* ============================================================
   8. Ход работы (сборка версии)
   ============================================================ */
.work { display:flex; flex-direction:column; gap:9px; }
.work .bar { height:6px; }
.work .bar i { display:block; height:100%; background:var(--brand); transition:width .4s var(--ease); }
.work .bar.run i { background:repeating-linear-gradient(90deg,var(--brand) 0 8px,color-mix(in srgb,var(--brand) 35%,transparent) 8px 16px); background-size:16px 100%; animation:crawl .7s linear infinite; }
@keyframes crawl { from{background-position:16px 0} to{background-position:0 0} }
.work .steps { display:flex; flex-wrap:wrap; align-items:center; gap:6px 0; }
/* стрелка между этапами: видно, что это цепочка, а не набор меток; пройденная — зелёная */
.work .steps span { position:relative; }
.work .steps span + span { margin-left:22px; }
.work .steps span + span::before { content:'→'; position:absolute; left:-17px; top:50%; transform:translateY(-50%); font:400 13px var(--sans); letter-spacing:0; color:var(--faint); }
.work .steps span.done + span::before { color:var(--ok); }
.work .steps span { font:600 11px var(--mono); padding:3px 8px; background:var(--surface-2); color:var(--faint); border:1px solid var(--line); text-transform:uppercase; letter-spacing:.05em; }
.work .steps span.done { background:var(--ok-soft); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 35%,transparent); }
.work .steps span.now { background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand); }
.work .clock { font-family:var(--mono); }
.work-log {
  font:12px/1.6 var(--mono); background:var(--canvas); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:10px 12px; max-height:14rem; overflow:auto; color:var(--ink-soft); white-space:pre-wrap;
}
.work-log b { color:var(--brand-ink); font-weight:500; }

/* створки */
details.fold { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:14px; }
details.fold > summary { cursor:pointer; padding:12px 16px; font:650 12px var(--mono); text-transform:uppercase; letter-spacing:.08em; list-style:none; display:flex; align-items:center; gap:8px; }
details.fold > summary:hover { background:var(--surface-2); }
details.fold[open] > summary { border-bottom:1px solid var(--line); }
details.fold > summary::-webkit-details-marker { display:none; }
details.fold > summary::after { content:'+'; margin-left:auto; color:var(--faint); font-size:15px; }
details.fold[open] > summary::after { content:'–'; }
details.fold > .fold-body { padding:16px; }
details.work > summary,.talk > summary,.inst-edit > summary {
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; font:600 11.5px var(--mono); text-transform:uppercase; letter-spacing:.06em;
  background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); border-radius:var(--radius-s);
}
details.work > summary::-webkit-details-marker,.talk > summary::-webkit-details-marker,.inst-edit > summary::-webkit-details-marker { display:none; }
details.work > summary:hover,.talk > summary:hover,.inst-edit > summary:hover { background:var(--tint-3); color:var(--ink); }
details.work[open] > summary,.inst-edit[open] > summary { background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand); }

/* вкладки */
.tabs { display:flex; flex-wrap:wrap; gap:1px; border-bottom:1px solid var(--line); margin:0 0 16px; }
.tabs > a { padding:8px 13px; font:600 12px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--faint); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs > a:hover { color:var(--ink); text-decoration:none; background:var(--surface-2); }
.tabs > a.on { color:var(--brand-ink); border-bottom-color:var(--brand); }

/* страницы списка */
.pager { display:flex; flex-wrap:wrap; gap:4px; margin:14px 0 0; }
.pager a,.pager span { min-width:30px; text-align:center; padding:5px 8px; border:1px solid var(--line); font:12px var(--mono); color:var(--ink-soft); border-radius:2px; }
.pager a:hover { border-color:var(--brand); color:var(--brand-ink); text-decoration:none; }
.pager .on { background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:700; }
.pager .dots { border:0; color:var(--faint); min-width:0; }

/* ============================================================
   9. Окна, палитра, уведомления, тосты, подсказки
   ============================================================ */
dialog.sheet {
  width:min(46rem,94vw); border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--surface); color:var(--ink); padding:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
dialog.sheet::backdrop { background:rgba(6,7,9,.7); backdrop-filter:blur(2px); }
dialog[open] { animation:pop .16s var(--ease) both; }
@keyframes pop { from{opacity:0; transform:translateY(8px) scale(.99)} to{opacity:1; transform:none} }
dialog.sheet textarea { min-height:20rem; font-size:13.5px; line-height:1.55; }
dialog.sheet textarea[data-grow] { min-height:6rem; overflow:hidden; resize:none; }
/*
 * Заметка в карточке клиента — обычное поле на три строки.
 * Общее правило выше растит любую textarea в окне до двадцати строк: оно
 * писалось под текст к версии, а здесь давало поле в пол-экрана.
 */
dialog.sheet .inst-edit textarea { min-height:5rem; }
/* в окне места хватает: подписи не обрезаем многоточием, а переносим */
dialog.sheet .kv .v { white-space:normal; }
.sheet-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.sheet-head h2 { margin:0; }
.sheet-foot { display:flex; gap:8px; align-items:center; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }

/* командная палитра */
.cmdk { position:fixed; inset:0; z-index:80; display:none; }
.cmdk[open],.cmdk.open { display:block; }
.cmdk-back { position:absolute; inset:0; background:rgba(6,7,9,.72); backdrop-filter:blur(3px); animation:fade .12s both; }
@keyframes fade { from{opacity:0} to{opacity:1} }
.cmdk-box {
  position:relative; margin:8vh auto 0; width:min(41rem,94vw);
  background:var(--surface); border:1px solid var(--line-hard); border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(0,0,0,.55); overflow:hidden; animation:pop .16s var(--ease) both;
}
.cmdk-in { display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid var(--line); }
.cmdk-in svg { color:var(--faint); flex:0 0 auto; }
.cmdk-in input { border:0; background:none; padding:0; font-size:15px; box-shadow:none !important; }
.cmdk-list { max-height:min(56vh,26rem); overflow-y:auto; padding:6px; }
.cmdk-grp { font:650 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); padding:9px 8px 5px; }
.cmdk-it {
  display:flex; align-items:center; gap:10px; padding:8px 9px; color:var(--ink-soft);
  border-radius:var(--radius-s); cursor:pointer; font-size:13.5px;
}
.cmdk-it:hover { text-decoration:none; }
.cmdk-it .ico { flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line); color:var(--faint); }
.cmdk-it .t { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmdk-it .sub { color:var(--faint); font:11px var(--mono); }
.cmdk-it.cur { background:var(--brand-soft); color:var(--ink); }
.cmdk-it.cur .ico { background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.cmdk-foot { display:flex; align-items:center; gap:12px; padding:8px 12px; border-top:1px solid var(--line); background:var(--surface-2); font:11px var(--mono); color:var(--faint); }
.cmdk-foot span { display:inline-flex; align-items:center; gap:5px; }
.cmdk-empty { padding:26px; text-align:center; color:var(--faint); font-size:13px; }

/* центр уведомлений */
.notif {
  position:absolute; top:calc(var(--header-h) - 6px); right:16px; z-index:70; width:min(24rem,94vw);
  background:var(--surface); border:1px solid var(--line-hard); border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(0,0,0,.5); animation:pop .14s var(--ease) both;
}
.notif-head { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); }
.notif-head h2 { margin:0; }
.notif-list { max-height:min(60vh,28rem); overflow-y:auto; }
/*
 * Строка уведомления: значок слева, справа заголовок и под ним подпись.
 * Заголовок и подпись — блоки, а не строчные элементы: у строчных отступ
 * сверху не работает, и «6 мин назад» приклеивалось к концу заголовка.
 */
.notif-it { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); color:var(--ink-soft); }
.notif-it:last-child { border-bottom:0; }
.notif-it:hover { background:var(--surface-2); text-decoration:none; }
/* Значок — кружок без рамки: квадрат в рамке читался как пустой флажок. */
.notif-it .ico { flex:0 0 auto; width:26px; height:26px; margin-top:1px; display:grid; place-items:center; border-radius:50%; background:var(--surface-2); }
/* Новое отмечено полоской слева, а не рамкой вокруг значка. */
.notif-it.new { background:var(--brand-soft); box-shadow:inset 3px 0 0 var(--brand); }
.notif-it.new .ico { background:var(--surface); color:var(--brand-ink); }
.notif-it .grow { min-width:0; display:flex; flex-direction:column; gap:4px; }
.notif-it .t { display:block; font-size:13.5px; color:var(--ink); line-height:1.35; }
.notif-it .w { display:block; font:10.5px var(--mono); color:var(--faint); text-transform:uppercase; letter-spacing:.07em; }
.notif-foot { padding:10px 14px; border-top:1px solid var(--line); background:var(--surface-2); display:flex; gap:10px; align-items:center; border-radius:0 0 var(--radius) var(--radius); }

/* тосты */
.toasts { position:fixed; z-index:90; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.toast-pop {
  display:flex; align-items:center; gap:9px; max-width:24rem;
  padding:9px 12px; background:var(--tint-3); border:1px solid var(--line-hard); border-left:2px solid var(--brand);
  border-radius:var(--radius-s); font-size:13px; color:var(--ink); animation:slidein .2s var(--ease) both;
}
.toast-pop.ok { border-left-color:var(--ok); }
.toast-pop.bad { border-left-color:var(--bad); }
.toast-pop.out { animation:slideout .18s var(--ease) both; }
@keyframes slidein { from{opacity:0; transform:translateX(16px)} to{opacity:1; transform:none} }
@keyframes slideout { to{opacity:0; transform:translateX(16px)} }
.toast { margin:0 0 14px; }

/* онбординг-подсказки */
.coach-mask { position:fixed; inset:0; z-index:85; background:rgba(6,7,9,.62); animation:fade .15s both; }
.coach-hole { position:fixed; z-index:86; border:2px solid var(--brand); border-radius:var(--radius-s); box-shadow:0 0 0 9999px rgba(6,7,9,.62); transition:all .25s var(--ease); pointer-events:none; }
.coach-tip {
  position:fixed; z-index:87; width:min(20rem,90vw); background:var(--surface);
  border:1px solid var(--line-hard); border-radius:var(--radius); padding:13px 14px;
  box-shadow:0 20px 50px rgba(0,0,0,.5); animation:pop .18s var(--ease) both;
}
.coach-tip .step { font:650 10.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--brand-ink); }
.coach-tip h3 { font-size:14.5px; margin:6px 0 5px; font-weight:700; }
.coach-tip p { margin:0; font-size:13px; color:var(--ink-soft); line-height:1.45; text-wrap:pretty; }
.coach-tip .acts { display:flex; align-items:center; gap:8px; margin-top:12px; }
.coach-tip .acts .sp { flex:1 1 auto; }

/* ============================================================
   10. Вход
   ============================================================ */
.login-wrap { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); position:relative; z-index:1; }
.login-side { border-right:1px solid var(--line); padding:40px; display:flex; flex-direction:column; gap:22px; background:var(--side); }
.login-side .mark { display:flex; align-items:center; gap:10px; font:700 14px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--ink); }
.login-side .mark .logo { width:30px; height:30px; display:grid; place-items:center; background:var(--brand); color:var(--on-brand); border-radius:var(--radius-s); }
.login-pitch { margin-top:auto; display:flex; flex-direction:column; gap:14px; max-width:30rem; }
.login-side .big { font-size:clamp(24px,3.2vw,34px); line-height:1.15; letter-spacing:-.02em; font-weight:700; margin:0; }
.login-lead { margin:0; font-size:15px; line-height:1.55; color:var(--ink-soft); }
.reset-steps { margin:0 0 12px; padding-left:20px; display:flex; flex-direction:column; gap:6px; }
.login-side .big em { font-style:normal; color:var(--brand-ink); }
.login-stats { display:flex; flex-wrap:wrap; gap:10px 26px; padding-top:18px; border-top:1px solid var(--line); }
.login-stats div { font:11px var(--mono); text-transform:uppercase; letter-spacing:.09em; color:var(--faint); }
.login-stats b { display:block; font:700 20px var(--mono); color:var(--ink); letter-spacing:-.01em; margin-bottom:2px; text-transform:none; }
.login-form { display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.login { width:min(23rem,100%); }
.login h1 { font-size:19px; margin-bottom:6px; }
.login .hint { margin-bottom:20px; }
.login .btn,.login button { width:100%; }
.login-foot { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); font:11.5px var(--mono); color:var(--faint); display:flex; gap:10px; flex-wrap:wrap; }
.code-in { display:flex; gap:8px; }
.code-in input { text-align:center; font:700 20px var(--mono); letter-spacing:.1em; padding:10px 4px; }

/* ============================================================
   11. Обращения: рабочее место
   ============================================================ */
main.full { padding:0; max-width:none; display:flex; flex-direction:column; min-height:calc(100vh - var(--header-h)); animation:none; }
main.full > * { animation:none; }
.room { display:grid; grid-template-columns:21rem minmax(0,1fr) 16.5rem; height:calc(100vh - var(--header-h)); min-height:0; }
.room > * { min-width:0; }
.dialogs { display:flex; flex-direction:column; min-height:0; background:var(--surface); border-right:1px solid var(--line); }
.dialogs-search { display:flex; gap:6px; padding:10px 10px 8px; align-items:center; }
.dialogs-search input[type=search] { flex:1 1 auto; min-width:0; }
.dialogs .tabs { border:0; padding:0 10px 8px; margin:0; gap:2px; }
.tab { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; font:600 11.5px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); border:1px solid transparent; }
.tab:hover { background:var(--surface-2); text-decoration:none; color:var(--ink); }
.tab.on { background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand); }
.tab-n { font:11px var(--mono); opacity:.75; }
.dialogs-from { padding:0 10px 8px; }
.dialogs-from select { font-size:12.5px; padding:5px 9px; }
.dialogs-list { flex:1 1 auto; overflow-y:auto; min-height:0; border-top:1px solid var(--line); }
.dialog { display:flex; gap:9px; padding:10px 10px 10px 12px; color:var(--ink-soft); border-bottom:1px solid var(--line); position:relative; }
.dialog:hover { background:var(--surface-2); text-decoration:none; }
.dialog.on { background:var(--brand-soft); }
.dialog.on::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--brand); }
.dialog-kind { flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line); color:var(--faint); margin-top:1px; }
.dialog.on .dialog-kind { color:var(--brand-ink); border-color:var(--brand); }
.dialog-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.dialog-top { display:flex; align-items:center; gap:6px; font:10.5px var(--mono); color:var(--faint); text-transform:uppercase; letter-spacing:.06em; min-width:0; }
.dialog-code { font-weight:650; color:var(--ink-soft); }
.dialog-company { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dialog-when { margin-left:auto; white-space:nowrap; }
.dialog-title { color:var(--ink); font-weight:550; font-size:13px; line-height:1.3; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
.dialog.unseen .dialog-title { font-weight:700; }
.dialog-last { font-size:11.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dialog-foot { display:flex; align-items:center; gap:6px; margin-top:2px; }
/* разделитель в полосе вкладок: два отбора рядом, но вопросы разные */
.tabs-sep { width:1px; height:18px; margin:0 6px; background:var(--line); align-self:center; }
.turn { font:650 10.5px var(--mono); color:var(--warn); text-transform:uppercase; }
/* ждут дольше срока из настроек — это уже не «в работе», а «мы забыли» */
.turn.late { color:var(--bad); }
/* ход клиента — спокойный цвет: это состояние «ничего не требуется» */
.turn.theirs { color:var(--faint); }
.dialog-new { width:7px; height:7px; background:var(--brand); margin-left:auto; flex:0 0 auto; }
.dialogs-empty { color:var(--faint); font-size:12.5px; text-align:center; padding:26px 12px; }
.back { display:none; }

.thread-pane { min-height:0; display:flex; flex-direction:column; background:var(--canvas); }
.thread { display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
.thread-head { padding:12px 18px 10px; background:var(--surface); border-bottom:1px solid var(--line); flex:0 0 auto; }
.thread-top { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font:11.5px var(--mono); color:var(--faint); }
.thread-when { margin-left:auto; }
.thread-title { font-size:16px; margin:8px 0 10px; font-weight:700; letter-spacing:-.01em; line-height:1.3; text-transform:none; font-family:var(--sans); color:var(--ink); }
.thread-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.kind { display:inline-flex; align-items:center; gap:5px; font:11.5px var(--mono); color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }
.kind svg { color:var(--faint); }
.thread-body { flex:1 1 auto; overflow-y:auto; min-height:0; padding:16px 18px; display:flex; flex-direction:column; gap:8px; }
.chat { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.thread-body .chat { margin:0; }
.msg { font-size:13.5px; border:1px solid var(--line); border-radius:var(--radius-s); padding:9px 11px; background:var(--surface-2); max-width:44rem; min-width:12rem; }
.msg.ours { background:var(--brand-soft); border-color:color-mix(in srgb,var(--brand) 35%,transparent); align-self:flex-end; }
.msg.note { background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 35%,transparent); border-left:2px solid var(--warn); align-self:flex-end; }
.msg.first { max-width:50rem; background:var(--surface); }
.msg-who { font:11px var(--mono); color:var(--faint); margin-bottom:4px; display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; text-transform:uppercase; letter-spacing:.06em; }
.msg.ours .msg-who { color:var(--brand-ink); font-weight:650; }
.msg-text { white-space:pre-wrap; word-wrap:break-word; line-height:1.5; }
/*
 * Действия над своей репликой: «изменить» и «убрать».
 *
 * Раньше они появлялись только при наведении и были почти невидимы —
 * убрать собственную заметку не догадывались вовсе. Теперь видны всегда,
 * но приглушённо: при наведении на сообщение становятся отчётливыми.
 */
.msg-acts { margin-left:auto; display:inline-flex; align-items:baseline; gap:8px; opacity:.5; transition:opacity .12s; }
.msg:hover .msg-acts,.msg-acts:focus-within { opacity:1; }
.msg-edit { font-size:11px; }
.msg-del {
  border:0; background:none; padding:0; cursor:pointer;
  font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--faint);
}
.msg-del:hover { color:var(--bad); text-decoration:underline; }
.msg-edit summary { cursor:pointer; list-style:none; color:var(--faint); }
.msg-edit summary::-webkit-details-marker { display:none; }
.msg-edit summary:hover { color:var(--ink); }
.msg-edit textarea { margin:6px 0; font-size:13px; }
.errs { margin-top:10px; }
.errs > summary { cursor:pointer; font:11.5px var(--mono); color:var(--faint); list-style:none; display:inline-flex; gap:5px; text-transform:uppercase; letter-spacing:.06em; }
.errs > summary::-webkit-details-marker { display:none; }
.errs > summary::before { content:'▸'; }
.errs[open] > summary::before { content:'▾'; }
.errs > summary:hover { color:var(--ink); }
.errs > div { margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.errs code { display:block; white-space:pre-wrap; word-break:break-word; color:var(--bad); font-size:11.5px; padding:6px 9px; background:var(--canvas); }
.composer { flex:0 0 auto; margin:0; padding:10px 18px 14px; background:var(--surface); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.composer textarea { min-height:4.25rem; }
.composer .line { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.composer select { width:auto; min-width:9rem; font-size:12.5px; padding:6px 9px; }
.switch { display:inline-flex; align-items:center; gap:7px; margin:0; cursor:pointer; font:600 11.5px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); padding:5px 9px; border:1px solid var(--line); background:var(--surface-2); }
.switch:has(input:checked) { background:var(--warn-soft); color:var(--warn); border-color:var(--warn); }
.switch input { width:13px; height:13px; margin:0; }
.canned { display:flex; gap:5px; flex-wrap:wrap; }
.canned button { background:var(--surface-2); color:var(--ink-soft); border-color:var(--line); font-size:11px; padding:4px 8px; }
.canned button:hover { background:var(--tint-3); color:var(--ink); border-color:var(--line-strong); }

.rail { min-height:0; overflow-y:auto; padding:14px 15px; background:var(--surface); border-left:1px solid var(--line); font-size:13px; }
.rail h3 { font:650 10px var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin:0 0 9px; }
.rail h3:not(:first-child) { margin-top:20px; }
.fact { margin-bottom:9px; }
.fact .k { font:10.5px var(--mono); color:var(--faint); text-transform:uppercase; letter-spacing:.07em; }
.fact .v { color:var(--ink); font-weight:500; margin-top:1px; word-break:break-word; font-family:var(--mono); font-size:12.5px; }
.report-text { margin:0; white-space:pre-wrap; }
.report-text.clamped { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:8; line-clamp:8; overflow:hidden; }
.more-t { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
.more-t:checked + .report-text.clamped { -webkit-line-clamp:unset; line-clamp:unset; overflow:visible; }
.more { cursor:pointer; display:inline-block; margin:8px 0 0; padding:4px 9px; font:600 11px var(--mono); text-transform:uppercase; letter-spacing:.06em; background:var(--surface-2); color:var(--faint); border:1px solid var(--line); }
.more:hover { background:var(--tint-3); color:var(--ink); }
.more::after { content:'Читать целиком'; }
.more-t:checked ~ .more::after { content:'Свернуть'; }
.more[hidden] { display:none; }
.files { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.file { display:flex; flex-direction:column; gap:1px; padding:7px 10px; font-size:12.5px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft); max-width:20rem; }
.file:hover { background:var(--tint-3); text-decoration:none; }
.file-n { color:var(--ink); font-weight:650; word-break:break-all; }
.file .muted { font:11px var(--mono); }

/* ============================================================
   12. Документация
   ============================================================ */
.docs { display:grid; grid-template-columns:17rem minmax(0,1fr); gap:18px; align-items:start; }
.docs-nav {
  display:flex; flex-direction:column; gap:1px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:8px; position:sticky; top:calc(var(--header-h) + 18px);
  max-height:calc(100vh - var(--header-h) - 36px); overflow:auto;
}
.docs-nav a { padding:6px 9px; color:var(--ink-soft); font-size:13px; border-radius:var(--radius-s); }
.docs-nav a:hover { background:var(--surface-2); text-decoration:none; color:var(--ink); }
.docs-nav a.on { background:var(--brand-soft); color:var(--brand-ink); font-weight:650; }
.docs-group { padding:11px 9px 4px; font:650 10px var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--faint); }
.prose { max-width:none; }
.prose h2 { font-size:17px; margin:22px 0 9px; text-transform:none; letter-spacing:-.01em; color:var(--ink); font-family:var(--sans); }
.prose h3 { font-size:14.5px; margin:16px 0 7px; font-weight:700; }
.prose h4 { font-size:13px; margin:13px 0 5px; font-weight:700; }
.prose p { margin:0 0 9px; line-height:1.6; color:var(--ink-soft); max-width:70ch; }
.prose ul,.prose ol { margin:0 0 11px; padding-left:19px; color:var(--ink-soft); }
.prose li { margin:0 0 4px; line-height:1.55; }
.prose pre { background:var(--canvas); border:1px solid var(--line); border-radius:var(--radius-s); padding:11px 13px; overflow-x:auto; font:12.5px/1.5 var(--mono); margin:0 0 11px; }
.prose pre code { border:0; background:none; padding:0; }
.prose table { margin:0 0 12px; }
.prose blockquote { margin:0 0 11px; padding:8px 12px; border-left:2px solid var(--brand); background:var(--surface-2); color:var(--ink-soft); font-size:13px; }
.reading { position:fixed; top:0; left:0; height:2px; background:var(--brand); z-index:40; transition:width .1s linear; }

/* ============================================================
   13. Установки
   ============================================================ */
.filter { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.filter input { flex:1 1 15rem; max-width:26rem; }
.filter .chips { margin:0; }
.inst { display:flex; flex-direction:column; gap:10px; }
.inst-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 15px; transition:border-color .12s; }
.inst-card:hover { border-color:var(--line-strong); }
.inst-card.alert { border-left:2px solid var(--bad); }
.inst-card[hidden] { display:none; }
.inst-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.inst-head .name { font-size:14.5px; font-weight:700; letter-spacing:-.01em; }
.inst-head .id { color:var(--faint); font:11px var(--mono); margin-left:auto; }
/* кнопка «Карточка клиента» уходит вправо и не толкает метки */
.inst-head > .chip { margin-left:auto; }
.kv { display:grid; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)); gap:9px 16px; margin-top:12px; }
/*
 * Четыре факта на карточке копии — ровно по четверти ширины.
 * С `auto-fit` они растягивались на всю строку и расползались по экрану:
 * между «Версия» и «Подписка» оказывалось полполосы пустоты.
 */
.kv.four { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:52rem; }
@media (max-width:760px) { .kv.four { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.kv > div { min-width:0; }
.kv .k { font:650 10px var(--mono); letter-spacing:.11em; text-transform:uppercase; color:var(--faint); }
.kv .v { font:550 13.5px var(--mono); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kv .v.warn { color:var(--warn); }
.kv .v.bad { color:var(--bad); }
.kv .v.ok { color:var(--ok); }
.kv .v .muted { font-weight:400; }
.inst-note { margin-top:10px; font-size:13px; color:var(--ink-soft); padding:8px 11px; background:var(--surface-2); border-left:2px solid var(--tint-3); white-space:pre-wrap; }
.inst-edit { margin-top:10px; }
.cab-line { margin-top:10px; font-size:13px; color:var(--ink-soft); display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.cab-line b { color:var(--ink); font-weight:600; }
.cab-block { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.cab-block h3 { margin:0 0 4px; font-size:14px; }
.cab-pay { margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); }
.cab-pay .note, .cab-pay .hint { margin:0 0 4px; }
/* кабинет без копии — клиент на пути: рамка пунктиром, пока копии нет */
.inst-card.cab-card { border-style:dashed; }
.inst-edit .form { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.inst-edit .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr)); gap:10px 12px; }
.inst-edit .grid .field { margin:0; }
.inst-edit .wide { grid-column:1/-1; }
.inst-edit .foot-line { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; justify-content:flex-start; }
.inst-empty { text-align:center; color:var(--faint); padding:24px; }
.cl-title { font-weight:650; margin-bottom:2px; }
.cl-text { font-size:13px; line-height:1.5; color:var(--ink-soft); }

/* ============================================================
   14. Узкие экраны
   ============================================================ */
@media (max-width:1360px) {
  .room { grid-template-columns:19rem minmax(0,1fr); }
  .rail { display:none; }
}
@media (max-width:1180px) {
  .cols.wide { grid-template-columns:1fr; }
}
@media (max-width:1080px) {
  .room { grid-template-columns:1fr; }
  .room.picked .dialogs { display:none; }
  .room.picked .back { display:inline-flex; }
  .room:not(.picked) .thread-pane { display:none; }
  .dialogs { border-right:0; }
}
@media (max-width:960px) {
  .login-wrap { grid-template-columns:1fr; }
  .login-side { border-right:0; border-bottom:1px solid var(--line); padding:24px; gap:16px; }
  .login-side .big { font-size:22px; margin-top:8px; }
  .login-form { padding:26px 20px 40px; }
}
@media (max-width:900px) {
  .side {
    position:fixed; z-index:50; top:0; left:0; height:100vh; width:min(17rem,84vw); flex-basis:auto;
    transform:translateX(-101%); transition:transform .22s var(--ease); border-right:1px solid var(--line-strong);
  }
  html[data-drawer="on"] .side { transform:none; box-shadow:0 0 0 100vmax rgba(6,7,9,.55); }
  html[data-side="min"] .side { width:min(17rem,84vw); }
  html[data-side="min"] .side .mark .name,html[data-side="min"] .nav-title,
  html[data-side="min"] .side nav a > span:not(.nav-n),html[data-side="min"] .side .me > div,
  html[data-side="min"] .side .ver { display:block; }
  html[data-side="min"] .side nav a { justify-content:flex-start; padding:0 10px; }
  html[data-side="min"] .side .mark { justify-content:flex-start; padding:0 12px; }
  html[data-side="min"] .nav-group { border-top:0; padding-top:0; margin-bottom:10px; }
  html[data-side="min"] .nav-n { position:static; font-size:10.5px; line-height:16px; margin-left:auto; padding:0 4px; }
  .side-toggle { display:none; }
  .burger { display:block; }
  .top { padding:0 12px; gap:8px; }
  .searchbox { min-width:0; flex:1 1 auto; }
  .searchbox .kbd,.top .site-link { display:none; }
  .top .where { display:none; }
  main { padding:14px 12px 44px; }
  h1 { font-size:18px; }
  section { padding:13px; }
  .table-wrap { margin:0 -13px; padding:0 13px; }
  table.cards,table.cards tbody,table.cards tr,table.cards td { display:block; width:100%; }
  table.cards thead { display:none; }
  table.cards tr { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-s); padding:11px 12px; margin-bottom:8px; }
  table.cards tbody tr:hover { background:var(--surface-2); }
  /*
   * Подпись поля — сбоку, а не отдельной строкой сверху.
   *
   * Строка на подпись и строка на значение превращали одну копию в пять
   * экранных строк: список из восьми копий занимал три экрана. Пара
   * «подпись — значение» в одной строке читается так же и втрое короче.
   */
  table.cards td { display:flex; gap:10px; align-items:baseline; padding:3px 0; text-align:left; border:0; }
  table.cards td::before { content:attr(data-label); flex:0 0 5.5rem; font:650 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
  table.cards td:not([data-label])::before { display:none; }
  table.cards td.num { text-align:left; }
  td select { min-width:0; }
  .row > * { flex:1 1 100%; }
  /*
   * На телефоне числа — компактной сеткой, а не столбиком высоких карточек.
   * Четыре карточки занимали почти весь первый экран, и проблемные копии
   * с обращениями оказывались ниже — хотя именно ради них сюда заходят.
   */
  .tiles { grid-template-columns:1fr 1fr; gap:8px; }
  .tile { padding:10px 12px; }
  .tile-v { font-size:19px; margin:5px 0 2px; }
  .tile .spark { height:22px; margin-top:5px; }
  /*
   * Подпись под графиком на телефоне остаётся.
   *
   * Прятали её ради места — и возвращали ровно ту неоднозначность, из-за
   * которой подпись появилась: число над линией это открытые обращения, а
   * линия — новые по дням. График без объяснения читается как история того
   * же числа. Короткий вариант подписи задан в разметке.
   */
  /* 11px — нижняя граница читаемого текста по docs/UI-RULES.md, мельче нельзя */
  .spark-t { font-size:11px; line-height:1.3; }
  .wide-only { display:none; }
  .narrow-only { display:inline; }
  .docs { grid-template-columns:1fr; }
  .docs-nav { position:static; max-height:13rem; }
  .room { grid-template-columns:1fr; height:auto; min-height:calc(100vh - var(--header-h)); }
  .room.picked .dialogs { display:none; }
  .room.picked .back { display:inline-flex; }
  .room:not(.picked) .thread-pane { display:none; }
  .dialogs { border-right:0; }
  .dialogs-list,.thread-body { overflow:visible; }
  .thread-head,.thread-body,.composer { padding-left:12px; padding-right:12px; }
  .notif { right:8px; left:8px; width:auto; }
  .toasts { left:12px; right:12px; align-items:stretch; }
  .toast-pop { max-width:none; }
  .bulkbar { bottom:8px; }
}
/* даже на самом узком держим две колонки: столбик из четырёх плиток — это экран без работы */
@media (max-width:440px) { .inst-head .id { display:none; } }
@media print {
  .side,.top,.toasts,.cmdk,.notif,.bulkbar { display:none !important; }
  body::before { display:none; }
  main { padding:0; }
  section,.card { break-inside:avoid; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001s !important; transition-duration:.001s !important; } }

/* строка действий над таблицей: держится справа, не спорит с заголовком */
.sec-actions { display:flex; justify-content:flex-end; margin:-4px 0 10px; }

/* Напоминание о недельном выпуске: заметно, но не пугает — это срок, а не авария. */
.weekly-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin:0;padding:10px 22px;background:var(--warn-soft);
  border-bottom:1px solid var(--line);font-size:13px;color:var(--ink)}
.weekly-bar .weekly-day{font-weight:600}
.weekly-bar a{margin-left:auto;font-weight:600;color:var(--brand-ink);text-decoration:none;
  border-bottom:1px solid currentColor}
.weekly-bar a:hover{opacity:.8}
.weekly-bar a+.weekly-close{margin-left:0}
.weekly-close{margin-left:auto;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:8px;background:transparent;color:var(--ink-soft);font-size:18px;line-height:1;cursor:pointer}
.weekly-close:hover{background:var(--surface-2);color:var(--ink)}
/* За день до выпуска и в сам день — тон построже: срок уже не «когда-нибудь». */
.weekly-bar.urgent{background:var(--bad-soft);border-bottom-color:var(--bad)}

/* Дорожки «С чего начать»: номер шага слева, пояснение под действием. */
.howto{margin:0;padding:0;list-style:none;counter-reset:howto}
.howto li{counter-increment:howto;position:relative;padding:0 0 14px 34px}
.howto li:last-child{padding-bottom:0}
.howto li::before{content:counter(howto);position:absolute;left:0;top:0;
  width:22px;height:22px;border-radius:50%;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--ink-soft)}
.howto b{display:block;font-weight:600;font-size:14px}
.howto .muted{display:block;margin-top:2px;font-size:13px}

/* Окно «точно?» — своё, а не браузерное: тот же голос, что у всей страницы. */
.ask-back{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);padding:20px}
.ask{width:min(26rem,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:20px;box-shadow:0 18px 48px rgba(0,0,0,.28)}
.ask-text{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--ink)}
.ask-buttons{display:flex;gap:8px;justify-content:flex-end}
.ask-buttons button{min-width:7rem}

/* Общая рабочая система CRM и хаба; оранжевый остаётся акцентом выпуска. */
body::before { display: none; }
.side .mark { font-family: var(--sans); font-size: 16px; text-transform: none; letter-spacing: -.02em; }
.side-scroll { padding: 14px 12px; }
.side nav a { height: 38px; border-radius: 9px; }
.side nav a.on::before { display: none; }
.nav-title { font-family: var(--sans); letter-spacing: .06em; font-size: 11px; padding-top: 16px; }
main h1 { font-size: 28px; letter-spacing: -.035em; font-weight: 650; }
main h2 { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 16px; }
button, .btn { border-radius: 9px; min-height: 36px; font-family: var(--sans); }
input, select, textarea { border-radius: 9px; }
.tiles { gap: 16px; }
.tile { border-radius: 14px; }
.card { border-radius: 14px; }
th { font-family: var(--sans); font-size: 11px; }
td { padding-block: 13px; }
@media(max-width:600px) {
 main h1 { font-size: 24px; }
 .tiles { gap: 10px; }
 .side nav a { min-height: 44px; }
}

.tile-t { font:600 12px/1.4 var(--sans); text-transform:none; letter-spacing:0; }
.tile-v { font-size:30px; }

/* ---------- Счета кабинета (карточка клиента) ---------- */
.cab-pay h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.inv { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.inv-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 13px; }
.inv .hint { margin: 6px 0; }
.inv-fix { margin-top: 8px; }
.inv-fix > summary { cursor: pointer; font-size: 12.5px; color: var(--faint); }
.inv-waiting { border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; }
.inv-waiting h2 { margin: 0 0 6px; font-size: 15px; }
.inv-waiting ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.inv-waiting li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; }