/* ---- app.css ---- */
/* Кабинет Проект-Менеджер — светлая blueprint дизайн-система.
   Белые карточки на холодно-серой канве, navy-акцент, янтарь — warning/like.
   Шрифты: Onest (UI/дисплей) · JetBrains Mono (цифры/коды). Едины со схематикой. */

:root {
  /* Светлая дизайн-система Project Manager (Onest + JetBrains Mono).
     Структура — navy/холодные серые на белом; акцент действий — сигнальный янтарь. */
  --bg: #F2F4F7;           /* канва приложения (gray-100) */
  --bg-raise: #F8FAFC;     /* утопленные/вложенные поверхности (gray-50) */
  --bg-card: #FFFFFF;      /* карточки и панели */
  --line: #E4E7EC;         /* hairline-граница (gray-200) */
  --line-bright: #D0D5DD;  /* граница поярче (gray-300) */
  --ink: #14181F;          /* основной текст (gray-900) */
  --ink-dim: #475467;      /* вторичный текст (gray-600) */
  --ink-faint: #98A2B3;    /* приглушённый (gray-400) */
  --navy: #00357F;         /* фирменный blueprint-navy */
  --accent: #0A4DA6;       /* интерактив (navy-400) */
  --amber: #E08A00;        /* сигнальный акцент действий + warning */
  --amber-deep: #C2790C;
  --blue: #0A4DA6;         /* ссылки/инфо = navy */
  --green: #1F9D57;        /* готово/прибыль */
  --red: #D92D20;          /* блок/возврат */
  --violet: #6941C6;       /* на приёмке / мастер */
  /* фирменная триада двойной цены */
  --client: #0A4DA6;       /* цена клиента — синий */
  --client-soft: #EAF1FB;
  --master: #6941C6;       /* цена мастера — фиолетовый */
  --master-soft: #F1ECFB;
  --margin: #1A7D49;       /* маржа — зелёный */
  --margin-soft: #ECFAF1;
  --surface-sunken: #F8FAFC;
  --mono: "JetBrains Mono", monospace;
  --disp: "Onest", sans-serif;
  --body: "Onest", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Иконки (инлайн-SVG, Lucide-стиль) */
.ic { display: inline-block; vertical-align: -0.15em; flex: none; }
.rating .ic, .crown .ic, .skill-tag .ic { fill: currentColor; stroke: none; vertical-align: -0.1em; }
.og-icon { color: var(--amber); display: inline-flex; }
.og-act { display: inline-flex; align-items: center; gap: 4px; }
.og-act.icon-only { padding: 5px 8px; }
.p-edit { display: inline-flex; align-items: center; }
.btn-tr .ic, .act .ic { vertical-align: -0.15em; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Блюпринт-сетка на всём фоне */
#bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,53,127,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,53,127,.035) 1px, transparent 1px),
    linear-gradient(rgba(0,53,127,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,53,127,.06) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 100%);
}
#app { position: relative; z-index: 1; min-height: 100%; }

::selection { background: rgba(10,77,166,.16); }
a { color: var(--blue); text-decoration: none; }
button { font-family: var(--body); cursor: pointer; }

/* ---------- Логин ---------- */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
}
.login-card {
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, var(--bg-card), var(--bg-raise));
  border: 1px solid var(--line-bright);
  border-radius: 18px;
  padding: 44px 40px 36px;
  position: relative;
  box-shadow: 0 12px 40px rgba(16,24,40,.12);
  animation: rise .5s cubic-bezier(.2,.9,.3,1) both;
}
.login-card::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--navy), transparent);
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

.brand-mark {
  font-family: var(--disp); font-weight: 800; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy);
  display: flex; align-items: center; gap: 10px;
}
.brand-mark::before {
  /* знак — тот же, что на сайте и в документах */
  content: ""; width: 28px; height: 28px; flex: none;
  background: url(/assets/mark-navy.svg) center / contain no-repeat;
}
/* Лого на форме входа — кликабельно, ведёт на главную витрину */
.brand-link { cursor: pointer; transition: opacity .15s; text-decoration: none; align-self: flex-start; }
.brand-link:hover { opacity: .65; }
.login-sub b { color: var(--navy); font-weight: 700; }
.login-card h1 {
  font-family: var(--disp); font-weight: 600; font-size: 26px;
  margin: 22px 0 6px; letter-spacing: -.01em;
}
.login-sub { color: var(--ink-dim); font-size: 14px; margin-bottom: 30px; }

.field { margin-bottom: 16px; }
/* шаблоны веток работ галочками (новый проект, запуск производства) */
.tpl-pick { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; border: 1px solid var(--line-bright);
  border-radius: 10px; background: var(--bg-card); }
.field label.tpl-pick-i { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 13px; font-size: 14px;
  font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.field label.tpl-pick-i + label.tpl-pick-i { border-top: 1px solid var(--line); }
.field label.tpl-pick-i:hover { background: var(--surface-sunken); }
.field .tpl-pick-i input[type=checkbox] { flex: none; width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--accent);
  cursor: pointer; }
.tpl-pick-i .l { flex: 1 1 auto; min-width: 0; }
.tpl-pick-i .n { flex: none; font-size: 12.5px; font-weight: 500; color: var(--ink-faint); }
.tpl-pick-hint { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--ink-faint); }
.field label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 7px;
}
.field input {
  width: 100%; background: var(--bg); border: 1px solid var(--line-bright);
  border-radius: 10px; padding: 13px 15px; color: var(--ink);
  font-family: var(--body); font-size: 15px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.15); }

.btn-primary {
  width: 100%; background: var(--accent); color: #fff; border: none;
  border-radius: 10px; padding: 14px; font-weight: 800; font-size: 15px;
  letter-spacing: .02em; margin-top: 8px;
  transition: transform .12s, box-shadow .2s, background .15s;
  box-shadow: 0 6px 16px rgba(10,77,166,.25);
}
.btn-primary:hover { background: var(--navy); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.login-error {
  background: rgba(217,45,32,.07); border: 1px solid rgba(217,45,32,.3);
  color: #B42318; border-radius: 10px; padding: 11px 14px;
  font-size: 13.5px; margin-bottom: 16px;
}

/* ---------- Каркас ---------- */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 0 28px; height: 60px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.88); backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 50;
}
.topbar .brand-mark { font-size: 11px; }
.topbar .ws {
  font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px;
}
.topbar .spacer { flex: 1; }
.topbar .user { font-size: 13.5px; color: var(--ink-dim); }
.topbar .user b { color: var(--ink); font-weight: 700; }
.btn-ghost {
  background: none; border: 1px solid var(--line-bright); color: var(--ink-dim);
  border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 600;
  transition: color .15s, border-color .15s;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-faint); }

/* рабочая область занимает экран: широкий монитор — шире таблицы, доски и карточки, а не пустые поля по бокам;
   предел — чтобы на сверхшироком мониторе строки не растягивались бесконечно */
.page { max-width: 1920px; margin: 0 auto; padding: 24px 24px 72px; }
.page-head { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h2 {
  font-family: var(--disp); font-weight: 600; font-size: 30px; letter-spacing: -.01em;
}
.page-head .crumb { color: var(--ink-faint); font-size: 13px; margin-bottom: 6px; }
.page-head .crumb a { color: var(--ink-dim); }
.page-head .spacer { flex: 1; }

/* ---------- Шапка сделки: статус+прогресс сверху, действия «по полочкам» ---------- */
.page-head.deal-head { margin-bottom: 16px; }
.deal-meta { display: flex; align-items: center; gap: 14px; }
.deal-prog { display: flex; align-items: center; gap: 9px; }
.deal-prog .bar { width: 96px; height: 6px; border-radius: 99px; background: var(--line-bright); overflow: hidden; }
.deal-prog .bar i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #3b82f6); transition: width .4s ease; }
.deal-prog .pctn { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink-dim); }

.deal-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.tool-group {
  display: flex; align-items: center; gap: 3px;
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: 12px; padding: 5px 7px 5px 13px;
}
.tool-group > .lbl {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); margin-right: 5px; white-space: nowrap; user-select: none;
}
.t-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--ink-dim); background: transparent; border: 1px solid transparent;
  white-space: nowrap; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s, transform .12s;
}
.t-btn .ic { color: currentColor; opacity: .85; }
.t-btn:hover { color: var(--accent); background: var(--bg-card);
  border-color: var(--line-bright); box-shadow: 0 1px 3px rgba(16,36,61,.06); }
.t-btn:hover .ic { opacity: 1; }
.t-btn:active { transform: translateY(1px); }
@media (max-width: 760px) { .tool-group { flex-wrap: wrap; } }
.tool-group[hidden] { display: none; }   /* группа, в которой сотруднику не открыта ни одна кнопка */

.btn-amber {
  background: var(--accent); color: #fff; border: none; border-radius: 9px;
  padding: 11px 20px; font-weight: 800; font-size: 14px;
  box-shadow: 0 4px 14px rgba(10,77,166,.22);
  transition: transform .12s, background .15s;
}
.btn-amber:hover { background: var(--navy); transform: translateY(-1px); }

/* ---------- Проекты ---------- */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.proj-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px;
  display: block; color: var(--ink);
  transition: border-color .15s, transform .15s, box-shadow .2s;
  animation: rise .4s both;
}
.proj-card:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(16,24,40,.12);
}
.proj-card .deal {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint);
}
.proj-card h3 { font-size: 17px; font-weight: 800; margin: 6px 0 14px; }
.proj-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }

.chip {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 10px; border: 1px solid;
}
.chip.draft       { color: var(--ink-dim);   border-color: var(--line-bright); background: var(--bg-raise); }
.chip.active, .chip.in_progress { color: var(--amber-deep); border-color: rgba(224,138,0,.4);  background: rgba(224,138,0,.09); }
.chip.on_hold, .chip.paused { color: var(--amber-deep); border-color: rgba(224,138,0,.4); background: rgba(224,138,0,.09); }
.chip.blocked     { color: var(--red);       border-color: rgba(217,45,32,.4); background: rgba(217,45,32,.07); }
.chip.done, .chip.accepted { color: var(--green); border-color: rgba(31,157,87,.4); background: rgba(31,157,87,.09); }
.chip.cancelled, .chip.rejected { color: var(--red); border-color: rgba(217,45,32,.4); }
.chip.not_started { color: var(--ink-dim);   border-color: var(--line-bright); }
.chip.ready_to_start { color: var(--accent); border-color: rgba(10,77,166,.4); background: rgba(10,77,166,.07); }
.chip.on_review   { color: var(--violet);    border-color: rgba(105,65,198,.4); background: rgba(105,65,198,.08); }

.progress {
  height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; position: relative;
}
.progress > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber));
  transition: width .5s cubic-bezier(.2,.9,.3,1);
}
.proj-card .pct {
  font-family: var(--mono); font-size: 12px; color: var(--ink-dim); margin-top: 8px;
  display: flex; justify-content: space-between;
}

.empty {
  border: 1px dashed var(--line-bright); border-radius: 16px;
  padding: 60px 30px; text-align: center; color: var(--ink-dim);
}
.empty b { color: var(--ink); }

/* ---------- Граф веток ---------- */
.branches { display: flex; flex-direction: column; gap: 22px; }
.branch {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; animation: rise .4s both;
}
.branch-head {
  display: flex; align-items: center; gap: 14px; padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.branch-head .lane-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.branch-head h4 { font-size: 15.5px; font-weight: 800; }
.branch-head .type {
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
}
.branch-head .blocking {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber); border: 1px solid rgba(255,176,0,.35); border-radius: 5px; padding: 2px 7px;
}
.branch-head .spacer { flex: 1; }
.branch-head .progress { width: 130px; }
.branch-head .pctn { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); width: 42px; text-align: right; }

/* Дорожка этапов как git-граф */
.stages {
  display: flex; gap: 0; padding: 26px 22px 20px; overflow-x: auto; position: relative;
}
.stage {
  min-width: 200px; position: relative; padding: 0 14px 0 0;
}
.stage::before { /* линия дорожки */
  content: ""; position: absolute; top: 9px; left: 28px; right: -8px; height: 2px;
  background: var(--line-bright);
}
.stage:last-child::before { display: none; }
.stage .node {
  width: 20px; height: 20px; border-radius: 50%; position: relative; z-index: 1;
  border: 3px solid var(--line-bright); background: var(--bg-card);
  margin-bottom: 12px; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.stage .node:hover { transform: scale(1.2); }
.stage.s-done .node        { border-color: var(--green); background: var(--green); }
.stage.s-in_progress .node { border-color: var(--amber); background: var(--amber); animation: pulse 2s infinite; }
.stage.s-on_review .node   { border-color: var(--violet); background: var(--violet); }
.stage.s-ready_to_start .node { border-color: var(--accent); }
.stage.s-blocked .node     { border-color: var(--red); background: var(--red); }
.stage.s-cancelled .node   { border-color: var(--ink-faint); }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(224,138,0,.4); }
  50%     { box-shadow: 0 0 0 8px rgba(224,138,0,0); }
}
.stage-card {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 11px; padding: 13px 15px; margin-right: 4px;
  cursor: pointer; transition: border-color .15s, transform .15s;
}
.stage-card:hover { border-color: var(--ink-faint); transform: translateY(-2px); }
.stage-card .nm { font-weight: 700; font-size: 14px; margin-bottom: 7px; }
.stage-card .deps {
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-top: 8px;
  display: flex; align-items: center; gap: 5px;
}
.stage-card .deps::before { content: "⤓"; color: var(--amber); }
.stage-card .sub-count { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-top: 6px; }

.add-stage {
  min-width: 46px; height: 46px; align-self: flex-start; margin-top: 28px;
  border: 1px dashed var(--line-bright); border-radius: 11px; background: none;
  color: var(--ink-faint); font-size: 22px; line-height: 1;
  transition: color .15s, border-color .15s;
}
.add-stage:hover { color: var(--amber); border-color: var(--accent); }

.add-branch {
  border: 1px dashed var(--line-bright); border-radius: 14px; background: none;
  color: var(--ink-dim); padding: 20px; font-size: 14.5px; font-weight: 700; width: 100%;
  transition: color .15s, border-color .15s;
}
.add-branch:hover { color: var(--amber); border-color: var(--accent); }

/* ---------- Drawer этапа ---------- */
.drawer-veil {
  position: fixed; inset: 0; background: rgba(0,21,61,.35); backdrop-filter: blur(2px);
  z-index: 90; animation: fade .2s both;
}
@keyframes fade { from { opacity: 0; } }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 94vw); z-index: 91;
  background: var(--bg-card); border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(16,24,40,.10);
  padding: 30px 28px; overflow-y: auto;
  animation: slide .25s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.drawer h3 { font-family: var(--disp); font-weight: 600; font-size: 19px; margin: 14px 0 4px; }
.drawer .muted { color: var(--ink-faint); font-size: 12.5px; font-family: var(--mono); }
.drawer-close {
  position: absolute; top: 18px; right: 20px; background: none; border: none;
  color: var(--ink-faint); font-size: 22px;
}
.drawer-close:hover { color: var(--ink); }
.drawer .sec {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin: 26px 0 10px;
}
.transitions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-tr {
  background: var(--bg-card); border: 1px solid var(--line-bright); color: var(--ink);
  border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700;
  transition: border-color .15s, background .15s;
}
.btn-tr:hover { border-color: var(--accent); }
.substage {
  display: flex; align-items: center; gap: 11px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; margin-bottom: 8px;
}
.substage { flex-wrap: wrap; gap: 6px 10px; }
.ss-top { display: flex; align-items: center; gap: 11px; }
.ss-master { margin-top: 8px; padding-left: 20px; }
.ss-person { display: inline-flex; align-items: center; gap: 8px; }
.act.ghost { color: var(--ink-faint); border-style: dashed; display: inline-flex; align-items: center; gap: 4px; }
.act.ghost:hover { color: var(--amber); border-color: var(--accent); }
.substage .st-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-bright); flex: none; }
.substage.s-in_progress .st-dot { background: var(--green); }
.substage.s-done .st-dot { background: var(--violet); }
.substage.s-accepted .st-dot { background: var(--blue); }
.substage.s-rejected .st-dot { background: var(--red); }
.substage .nm { flex: 1 1 150px; min-width: 0; font-size: 13.5px; font-weight: 600; }
.act {
  background: none; border: 1px solid var(--line-bright); color: var(--ink-dim);
  border-radius: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 9px;
  white-space: nowrap;
}
.act:hover { color: var(--amber); border-color: var(--accent); }
.act.danger:hover { color: var(--red); border-color: var(--red); }
.inline-add { display: flex; gap: 8px; margin-top: 10px; }
.inline-add input {
  flex: 1; background: var(--bg); border: 1px solid var(--line-bright); border-radius: 8px;
  padding: 9px 12px; color: var(--ink); font-size: 13.5px; outline: none;
}
.inline-add input:focus { border-color: var(--accent); }
.inline-add button {
  background: var(--bg-card); border: 1px solid var(--line-bright); color: var(--ink);
  border-radius: 8px; padding: 0 16px; font-weight: 800;
}

/* ---------- Модалка ---------- */
.modal-veil {
  position: fixed; inset: 0; background: rgba(0,21,61,.4); z-index: 95;
  display: grid; place-items: center; padding: 20px; animation: fade .2s both;
}
.modal {
  width: 100%; max-width: 460px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 16px; padding: 30px;
  box-shadow: 0 24px 60px rgba(16,24,40,.18); animation: rise .3s both;
}
.modal h3 { font-family: var(--disp); font-weight: 600; font-size: 19px; margin-bottom: 22px; }
.modal .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal select {
  width: 100%; background: var(--bg); border: 1px solid var(--line-bright);
  border-radius: 10px; padding: 12px 14px; color: var(--ink); font-family: var(--body);
  font-size: 14.5px; outline: none;
}
.modal .check { display: flex; gap: 10px; align-items: center; margin: 4px 0 14px; font-size: 14px; color: var(--ink-dim); }
.modal .check input { accent-color: var(--amber); width: 16px; height: 16px; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--ink); border: 1px solid var(--ink); color: #fff;
  border-radius: 10px; padding: 12px 22px; font-size: 14px; font-weight: 600; z-index: 99;
  box-shadow: 0 18px 40px rgba(16,24,40,.28); animation: rise .25s both;
}
.toast.err { border-color: var(--red); }

.loading { text-align: center; color: var(--ink-faint); padding: 70px 0; font-family: var(--mono); font-size: 13px; }

/* ---------- Навигация ---------- */
.nav { display: flex; gap: 4px; margin-left: 12px; position: relative; }
.nav a {
  color: var(--ink-dim); font-size: 13.5px; font-weight: 700;
  padding: 7px 14px; border-radius: 8px; transition: color .2s;
  position: relative; z-index: 1;
}
.nav a:hover { color: var(--ink); }
.nav a.on { color: var(--accent); background: none; }
.nav .slide-pill { background: rgba(10,77,166,.10); }

/* Плавная «пилюля» выделения (сегмент-контролы как на iOS): едет за активным пунктом.
   Геометрию между перерисовками помнит slidePill() в app.js. */
.slide-pill {
  position: absolute; left: 0; top: 0; z-index: 0; opacity: 0;
  border-radius: 8px; pointer-events: none;
  transition: transform .34s cubic-bezier(.34,1.32,.5,1),
              width .34s cubic-bezier(.34,1.32,.5,1), height .2s ease;
}

/* ---------- Автоматизация ---------- */
.auto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
@media (max-width: 940px) { .auto-grid { grid-template-columns: 1fr; } }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sec-head h3 { font-family: var(--disp); font-weight: 600; font-size: 17px; }
.sec-sub { color: var(--ink-dim); font-size: 13px; margin-bottom: 16px; line-height: 1.5; }
.btn-amber.sm { padding: 7px 13px; font-size: 12.5px; }
.btn-ghost.sm { padding: 6px 12px; font-size: 12.5px; margin-top: 8px; }

.row-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 12px; padding: 15px 17px; margin-bottom: 10px;
  animation: rise .35s both;
}
.row-card.off { opacity: .45; }
.row-card .rc-main { flex: 1; min-width: 0; }
.row-card b { font-size: 14.5px; }
.muted-mono { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.tpl-chain { font-size: 12.5px; color: var(--ink-dim); margin-top: 7px; }
.rule-code {
  font-family: var(--mono); font-size: 13px; color: var(--amber);
  background: rgba(255,176,0,.08); border: 1px solid rgba(255,176,0,.25);
  border-radius: 6px; padding: 2px 8px;
}
.act-del, .act-toggle {
  background: none; border: 1px solid var(--line-bright); color: var(--ink-faint);
  border-radius: 7px; font-size: 12px; font-weight: 700; padding: 4px 10px; flex: none;
}
.act-del:hover { color: var(--red); border-color: var(--red); }
.danger-zone {
  margin-top: 70px; padding: 16px 20px;
  border: 1px dashed rgba(255,93,93,.3); border-radius: 12px;
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
  color: var(--ink-faint); font-size: 12.5px;
}
.danger-zone button { flex: none; }
.btn-ghost.danger { color: var(--red); border-color: rgba(217,45,32,.35); }
.btn-ghost.danger:hover { color: var(--red); border-color: var(--red); }
.substage .act.danger:hover { color: var(--red); border-color: var(--red); }
.act-toggle:hover { color: var(--amber); border-color: var(--accent); }
.empty.sm { padding: 28px 20px; font-size: 13.5px; }

.tpl-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.tpl-row input {
  background: var(--bg); border: 1px solid var(--line-bright); border-radius: 8px;
  padding: 9px 11px; color: var(--ink); font-size: 13px; outline: none;
}
.tpl-row input:focus { border-color: var(--accent); }
.tpl-row .ts-name { flex: 1.1; }
.tpl-row .ts-subs { flex: 1.6; }
.tpl-row .check.sm { margin: 0; font-size: 14px; color: var(--amber); gap: 5px; }

/* ---------- Сотрудники ---------- */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.staff-card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; animation: rise .35s both;
  transition: border-color .15s;
}
.staff-card:hover { border-color: var(--line-bright); }
.sc-head { display: flex; align-items: center; gap: 12px; }
.sc-ava {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--navy));
}
.sc-ava.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.sc-id { min-width: 0; }
.sc-id b { font-size: 15px; display: block; }
.rating { font-family: var(--mono); font-size: 12.5px; color: var(--amber); }
.sc-skills { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; }
.skill-tag {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line-bright); color: var(--ink-dim);
}
.skill-tag.liked { color: var(--amber); border-color: rgba(255,176,0,.4); background: rgba(255,176,0,.07); }
.sc-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.flag { font-size: 11px; color: var(--ink-dim); }
.flag.amo { color: var(--green); }
.btn-ghost.xs { padding: 5px 11px; font-size: 12px; }
.act-del.xs { padding: 3px 8px; }

.skill-matrix { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.skill-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 8px; font-size: 13.5px;
}
.skill-row:hover { background: var(--bg-raise); }
.skill-toggles { display: flex; gap: 14px; }
.skill-toggles .check.sm { font-size: 12.5px; color: var(--ink-dim); margin: 0; }

.assigned-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 8px;
}
.assigned-row .nm { font-size: 13.5px; font-weight: 600; }
.assigned-row .ar-id { display: flex; flex-direction: column; line-height: 1.3; }
.sc-ava.grp { background: linear-gradient(135deg, var(--blue), #2d6fb8); color: #fff; }
.assign-tabs { display: flex; gap: 4px; margin-bottom: 14px; background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 9px; padding: 3px; }
.at-tab { flex: 1; background: none; border: none; color: var(--ink-dim); font-size: 13px; font-weight: 700; padding: 8px; border-radius: 6px; }
.at-tab.on { color: #fff; background: var(--accent); }
.assign-pick .ar-id { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.roster-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 7px;
}
.roster-row .ar-id { display: flex; flex-direction: column; line-height: 1.3; }
.roster-row .nm { font-size: 13.5px; font-weight: 600; }
.roster-group { border: 1px solid var(--line); border-radius: 11px; padding: 8px; margin-bottom: 9px; }
.rg-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.rg-head .og-icon { color: var(--blue); }
.rg-head b { font-size: 13.5px; }
.roster-group .roster-row { background: var(--bg-raise); margin-bottom: 5px; }
.assign-pick {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--bg-card); border: 1px solid var(--line-bright);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; color: var(--ink);
  transition: border-color .15s;
}
.assign-pick:hover { border-color: var(--accent); }
.assign-pick .nm { flex: 1; font-size: 13.5px; font-weight: 600; }

/* ---------- Переключатель вида ---------- */
/* Вкладки раздела (например, «Сотрудники» / «Пользователи»): подчёркнутые, под заголовком */
.pg-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: -4px 0 16px; overflow-x: auto; scrollbar-width: none; }
.pg-tabs::-webkit-scrollbar { display: none; }
.pg-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px 11px; font-size: 14px; font-weight: 700;
  color: var(--ink-dim); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; }
.pg-tabs a:hover { color: var(--ink); }
.pg-tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
.pg-tabs .n { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--ink-faint); }
.staff-users-hint { font-size: 13px; color: var(--ink-dim); margin: -4px 0 14px; max-width: 760px; }
.view-toggle { display: flex; gap: 2px; background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 9px; padding: 3px; position: relative; }
.view-toggle a { font-size: 13px; font-weight: 700; color: var(--ink-dim); padding: 6px 14px; border-radius: 6px; position: relative; z-index: 1; transition: color .2s; }
.view-toggle a.on { color: #fff; background: none; }
.view-toggle .slide-pill { background: var(--accent); border-radius: 6px; box-shadow: 0 1px 3px rgba(10,77,166,.35); }

/* ---------- Грейд-чип ---------- */
.grade-chip {
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 6px;
  color: var(--gc, #8b99a8); border: 1px solid var(--gc, #8b99a8);
  background: color-mix(in srgb, var(--gc, #8b99a8) 12%, transparent);
  white-space: nowrap;
}

/* ---------- Оргструктура (дерево) ---------- */
.org-tree { display: flex; flex-direction: column; gap: 14px; }
.org-group {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 13px;
  overflow: hidden; animation: rise .35s both;
}
.org-group.unassigned { margin-top: 22px; border-style: dashed; background: transparent; }
.og-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.og-icon { font-size: 17px; }
.og-name { font-size: 15.5px; }
.og-type {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); border: 1px solid var(--line-bright); border-radius: 5px; padding: 2px 7px;
}
.og-count { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }
.og-act {
  background: none; border: 1px solid var(--line-bright); color: var(--ink-dim);
  border-radius: 7px; font-size: 12px; font-weight: 700; padding: 5px 10px;
  transition: color .15s, border-color .15s;
}
.og-act:hover { color: var(--amber); border-color: var(--accent); }
.og-members { padding: 6px 10px; }
.og-empty { padding: 14px 18px; color: var(--ink-faint); font-size: 12.5px; font-family: var(--mono); }
.og-children { padding: 4px 10px 12px 26px; border-left: 2px solid var(--line); margin-left: 24px; }

.person {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px; transition: background .12s;
}
.person:hover { background: var(--bg-raise); }
.person .p-name { font-size: 13.5px; font-weight: 600; }
.person .crown { color: var(--amber); font-size: 12px; }
.person .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.person .dot.ok { background: var(--green); }
.person .dot.busy { background: var(--amber); }
.person .p-edit {
  background: none; border: none; color: var(--ink-faint); font-size: 13px; padding: 2px 6px;
}
.person .p-edit:hover { color: var(--amber); }

.grades-list { display: flex; flex-direction: column; gap: 8px; }
.grade-manage {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 9px; padding: 9px 13px;
}

/* ============================================================
   АДАПТИВ — планшет и телефон (десктоп-first, оверрайды снизу).
   Веб-кабинет; нативка (React Native) — отдельным приложением.
   ============================================================ */
@media (max-width: 860px) {
  .page { padding: 26px 18px 64px; }
  .page-head h2 { font-size: 25px; }
  .branch-head .progress { width: 96px; }
}

@media (max-width: 640px) {
  /* --- Топбар: марка-логотип + скролл-меню + «Выйти»; сабдомен и имя прячем --- */
  .topbar { gap: 8px; padding: 0 12px; height: 54px; }
  .topbar .ws, .topbar .user { display: none; }
  .topbar .spacer { display: none; }
  .topbar .brand-mark { font-size: 0; gap: 0; flex: none; }      /* остаётся только глиф-марка ::before */
  .nav { margin-left: 2px; flex: 1; min-width: 0; gap: 2px;
         overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 7px 10px; font-size: 13px; white-space: nowrap; }
  .nav a.on { background: rgba(10,77,166,.10); }                  /* пилюля едет криво при скролле — заменяем фоном */
  .nav .slide-pill { display: none; }
  .btn-ghost { padding: 7px 11px; }

  /* --- Страница / заголовки --- */
  .page { padding: 16px 13px 56px; }
  .page-head { gap: 12px; margin-bottom: 20px; }
  .page-head h2 { font-size: 22px; }
  .page-head .crumb { font-size: 12px; }

  /* --- Шапка сделки --- */
  .page-head.deal-head { margin-bottom: 14px; }
  .deal-meta { flex-wrap: wrap; gap: 8px; }
  .deal-toolbar { gap: 8px; margin-bottom: 20px; }
  .tool-group { flex-wrap: wrap; width: 100%; }
  .tool-group > .lbl { width: 100%; margin: 0 0 2px; }

  /* --- Сетки карточек в одну колонку --- */
  .proj-grid, .staff-grid { grid-template-columns: 1fr; gap: 12px; }
  .proj-card { padding: 18px; }
  .staff-card { padding: 16px; }

  /* --- Ветки/этапы --- */
  .branch-head { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .branch-head h4 { font-size: 15px; }
  .branch-head .progress { width: 100%; order: 9; }
  .branch-head .pctn { order: 8; }
  .stages { padding: 18px 14px 16px; }

  /* --- Модалки/формы под палец --- */
  .modal { padding: 22px 18px; border-radius: 14px; }
  .modal h3 { font-size: 18px; margin-bottom: 16px; }
  .modal .row2 { grid-template-columns: 1fr; }
  .modal .actions { flex-direction: column-reverse; }
  .modal .actions > * { width: 100%; }
  .login-card { padding: 34px 24px 28px; border-radius: 16px; }

  /* --- Любая таблица: горизонтальный скролл вместо разрыва страницы --- */
  .page table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* --- Прочее --- */
  .danger-zone { flex-wrap: wrap; gap: 10px; }
  .sec-head { flex-wrap: wrap; gap: 8px; }
  .toast { left: 12px; right: 12px; bottom: 16px; transform: none; text-align: center; }
  .drawer { padding: 26px 18px; }
  .btn-amber { padding: 11px 16px; }
}

/* ============================================================
   Правки аудита 12.10.2026
   ============================================================ */
/* Распорка работала только в шапке и заголовках: в строках исполнителей и
   участников кнопки «заменить / снять» прилипали к имени вместо правого края */
.spacer { flex: 1; }

/* Высокая форма (карточка сотрудника) уходила за экран ноутбука без прокрутки */
.modal-veil { overflow-y: auto; }
.modal { max-height: calc(100vh - 40px); overflow-y: auto; }

button:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field input:focus-visible, .modal select:focus-visible, .inline-add input:focus-visible { outline: none; }

/* Шторка этапа: главное действие и сроки */
.btn-tr.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-tr.primary:hover { filter: brightness(1.08); }
.btn-tr.quiet { border-color: transparent; background: none; color: var(--ink-faint); }
.btn-tr.quiet:hover { color: var(--red); border-color: transparent; }
.stage-dates-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stage-dates-edit label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ink-dim); }
.stage-dates-edit input {
  background: var(--bg); border: 1px solid var(--line-bright); border-radius: 8px;
  padding: 8px 10px; color: var(--ink); font-family: var(--body); font-size: 13.5px; min-width: 0;
}
.stage-dates-edit input:focus { border-color: var(--accent); outline: none; }
.drawer .hint { font-size: 12px; color: var(--ink-faint); margin-top: 7px; }
.stage-card .stage-dates { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); margin-top: 6px; }
.stage-card .stage-dates.late { color: var(--red); font-weight: 600; }
.stage-card .deps::before { content: none; }

@media (max-width: 640px) {
  .modal { max-height: calc(100vh - 24px); }
  .modal-veil { padding: 12px; }
}

@media (max-width: 640px) {
  /* Широкий предпросмотр документа и сетка календаря растягивали всю страницу вбок */
  #app { overflow-x: clip; }
  /* Меню прокручивается вбок — затухание справа подсказывает, что пункты есть ещё */
  .nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
         mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); padding-right: 22px; }
}

/* Кнопки-значки 18–19 px по высоте не попадались пальцем: увеличиваем зону нажатия */
.t-edit-mini, .person .p-edit { min-width: 30px; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Раздел не открылся: сообщение и «Повторить» (app.js, «Актуальность экрана») ---------- */
.route-fail { line-height: 1.6; }
.route-fail .route-retry { margin-top: 16px; }
.empty.sm.route-fail .route-retry, .btn-ghost.sm.route-retry { margin: 0 0 0 10px; vertical-align: baseline; }
.empty > .btn-ghost.sm.route-retry { display: block; margin: 14px auto 0; }

/* ---------- Локальные данные: нет связи, черновик формы ---------- */
.offline-chip {
  position: fixed; left: 50%; top: 8px; transform: translateX(-50%); z-index: 120;
  background: #7a4b00; color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 6px 14px; border-radius: 999px; box-shadow: 0 6px 18px rgba(16,24,40,.25); white-space: nowrap;
}
.draft-note {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: -10px 0 16px; padding: 8px 12px; border-radius: 9px;
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.35);
  font-size: 12.5px; color: var(--ink);
}
.draft-note button { border: none; background: none; color: var(--accent); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 0; flex: none; }
/* Доска проектов — одна бесшовная плашка: у крайней колонки нет разделителя */
.fn-board > .fn-col:last-child { border-right: none !important; }

/* счётчик непрочитанного на пункте меню */
.nav-n {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font: 700 11px/1 var(--body); font-style: normal;
}
/* Части телефонной оболочки на компьютере скрыты. Правило стоит и здесь, а не только в mobile.css:
   если тот файл не загрузился (обрыв связи, перезапуск сервера), панель разделов не должна
   вываливаться внизу страницы голыми ссылками. mobile.css подключён позже и на телефоне её включает. */
.tabbar, .tb-back, .tb-title, .tb-acct { display: none; }
.tabbar a { position: relative; }
.tabbar a .nav-n { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; min-width: 18px; height: 18px; font-size: 10px; }
@media (min-width: 641px) and (max-width: 1100px) { .side__nav a { position: relative; } .side__nav a .nav-n { position: absolute; top: 4px; right: 8px; } }

.proj-money:empty { display: none; }
.proj-money { margin: 0 0 16px; }

/* ============================================================
   Боковая панель разделов (компьютер и планшет). Телефон — нижняя панель из mobile.css.
   ============================================================ */
.side { display: none; }
@media (min-width: 641px) {
  :root { --side-w: 236px; }
  body.has-side .topbar { display: none; }
  body.has-side #app { padding-left: var(--side-w); }
  .side {
    display: flex; flex-direction: column; gap: 6px;
    position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; width: var(--side-w);
    padding: 16px 12px 12px; overflow-y: auto; scrollbar-width: thin;
    background: var(--bg-card); border-right: 1px solid var(--line);
  }
  .side__brand {
    display: flex; align-items: center; gap: 10px; padding: 2px 8px 16px;
    font: 800 18px var(--disp); letter-spacing: -.01em; color: var(--navy);
  }
  .side__brand img { height: 34px; width: auto; flex: none; }   /* знак не квадратный — только высота */
  .side__brand b { color: var(--accent); font-weight: 800; }
  .side__nav { flex: 1; display: flex; flex-direction: column; gap: 16px; }
  .side__cap {
    padding: 0 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .side__nav a {
    display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 10px; border-radius: 10px;
    color: var(--ink-dim); font-size: 14.5px; font-weight: 600; white-space: nowrap;
    transition: background .12s, color .12s;
  }
  .side__nav a span { overflow: hidden; text-overflow: ellipsis; }
  .side__nav a .s { display: none; }
  .side__nav a:hover { background: var(--bg-raise); color: var(--ink); }
  .side__nav a.on { background: rgba(10,77,166,.10); color: var(--accent); }
  .side__user {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; margin-top: 8px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raise); text-align: left;
  }
  .side__user:hover { border-color: var(--line-bright); }
  .side__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .side__who b { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side__who span { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* окна и шторки центрируются по рабочей области, а не под панелью */
  body.has-side .toast { left: calc(50% + var(--side-w) / 2); }
}
/* Планшет: узкая панель — значок с короткой подписью */
@media (min-width: 641px) and (max-width: 1100px) {
  :root { --side-w: 84px; }
  .side { padding: 12px 6px 10px; align-items: stretch; gap: 4px; }
  .side__brand { justify-content: center; padding: 2px 0 10px; }
  .side__brand span, .side__cap, .side__who { display: none; }
  .side__nav { gap: 8px; }
  .side__group + .side__group { border-top: 1px solid var(--line); padding-top: 8px; }
  .side__nav a {
    flex-direction: column; justify-content: center; gap: 3px; height: 56px; padding: 0 2px;
    font-size: 11px; font-weight: 600; text-align: center;
  }
  .side__nav a span { max-width: 100%; }
  .side__nav a .f { display: none; }
  .side__nav a .s { display: block; }
  .side__user { justify-content: center; padding: 8px 0; border: none; background: none; min-height: 48px; }
}

/* Календарь на планшете: событие в сетке месяца — под палец */
@media (pointer: coarse) and (min-width: 641px) { .cal-ev { min-height: 34px; } }

/* ---- automation.css ---- */
/* Автоматизация — сценарии, галерея, редактор (схема / список шагов), настройки шага,
   журнал запусков. Цвета и шрифты — переменные кабинета (app.css), без своих палитр.
   Узкий экран: всё в одну колонку, поля ввода 16 px (без авто-зума на телефоне),
   всё нажимаемое — не меньше 44 px. */

/* ---------- Общие мелочи раздела ---------- */
.au-ic { display: inline-block; flex: none; vertical-align: -0.18em; }
.au-muted { color: var(--ink-faint); }
.au-text { font-size: 14.5px; line-height: 1.55; color: var(--ink-dim); }
.au-link {
  background: none; border: none; padding: 0; font: inherit; color: var(--accent);
  font-weight: 600; cursor: pointer; text-align: left;
  display: inline-flex; align-items: center; gap: 6px;
}
.au-link:hover { text-decoration: underline; }
.au-link.danger { color: var(--red); }
.au-btn.danger {
  background: var(--red); color: #fff; border: none; border-radius: 9px;
  padding: 11px 20px; font-weight: 800; font-size: 14px;
}
.au-btn.danger:hover { filter: brightness(.94); }
.au-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 9px; padding: 0;
  background: none; border: 1px solid transparent; color: var(--ink-dim);
  transition: background .12s, color .12s, border-color .12s;
}
.au-iconbtn:hover { background: var(--surface-sunken); color: var(--ink); border-color: var(--line); }
.au-iconbtn.danger:hover { color: var(--red); border-color: rgba(217,45,32,.4); }
.au-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.au-sep {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 16px;
  font-size: 12px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em;
}
.au-sep::before, .au-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn-amber.sm, .btn-ghost.sm { display: inline-flex; align-items: center; gap: 6px; }
.page .btn-ghost.sm { margin-top: 0; }

/* Информационная полоса: amoCRM, замечания, несохранённые правки */
.au-strip {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--line); border-left: 3px solid var(--ink-faint);
  border-radius: 12px; padding: 13px 16px; margin-bottom: 16px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-dim);
}
.au-strip > .au-ic { margin-top: 2px; color: var(--ink-faint); }
.au-strip > div { flex: 1; min-width: 220px; }
.au-strip b { color: var(--ink); }
.au-strip .btn-ghost, .au-strip .btn-amber { flex: none; align-self: center; }
.au-strip.ok { border-left-color: var(--green); }
.au-strip.ok > .au-ic { color: var(--green); }
.au-strip.warn { border-left-color: var(--amber); background: rgba(224,138,0,.06); }
.au-strip.warn > .au-ic { color: var(--amber-deep); }
.au-strip.bad { border-left-color: var(--red); background: rgba(217,45,32,.05); }
.au-strip.bad > .au-ic { color: var(--red); }
.fe-problems { margin: 6px 0 0; padding: 0; list-style: none; }
.fe-problems li { padding: 2px 0; }
.fe-problems .au-link { color: #B42318; font-weight: 500; }

/* ---------- Вкладки раздела ---------- */
.auto-tabs {
  display: flex; gap: 3px; padding: 3px; margin-bottom: 22px;
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: 10px; width: fit-content; max-width: 100%;
  overflow-x: auto; scrollbar-width: none;
}
.auto-tabs::-webkit-scrollbar { display: none; }
.auto-tab {
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 8px 16px; font-size: 13.5px; font-weight: 700; color: var(--ink-dim);
  font-family: var(--body); white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.auto-tab:hover { color: var(--ink); }
.auto-tab.on {
  color: var(--accent); background: var(--bg-card); border-color: var(--line-bright);
  box-shadow: 0 1px 2px rgba(16,24,40,.12);
}

/* ---------- Карточки сценариев ---------- */
.flow-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(16,24,40,.05);
  transition: border-color .15s, box-shadow .2s;
  animation: rise .4s both;
}
.flow-card:hover { border-color: var(--line-bright); box-shadow: 0 6px 18px rgba(16,24,40,.09); }
.flow-card .fc-body { flex: 1; min-width: 0; cursor: pointer; border-radius: 8px; }
.flow-card .fc-name { font-weight: 700; font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fc-state {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faint); border: 1px solid var(--line-bright); border-radius: 999px; padding: 1px 8px;
}
.fc-state.on { color: var(--green); border-color: rgba(31,157,87,.4); background: rgba(31,157,87,.08); }
.flow-card.off .fc-name { color: var(--ink-dim); }
.fc-line { font-size: 13px; color: var(--ink-dim); margin-top: 4px; line-height: 1.45; }
.fc-line b {
  display: inline-block; min-width: 46px; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.fc-arrow { color: var(--ink-faint); }
.flow-card .fc-meta {
  display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 8px;
  font-size: 12px; color: var(--ink-faint);
}
.fc-problem { color: #B42318; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.fc-last.bad { color: #B42318; }
.fc-last.warn { color: var(--amber-deep); }
.flow-card .fc-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.au-empty { margin-bottom: 8px; }

/* Переключатель «включён / выключен» */
.flow-toggle { position: relative; display: inline-flex; flex: none; cursor: pointer; padding: 11px 2px; }
.flow-toggle input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.flow-toggle input:disabled { cursor: default; }
.flow-toggle .ft-slider {
  width: 40px; height: 22px; border-radius: 999px;
  background: var(--line-bright); transition: background .18s; position: relative;
}
.flow-toggle .ft-slider::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.3);
  transition: transform .18s;
}
.flow-toggle input:checked + .ft-slider { background: var(--green); }
.flow-toggle input:checked + .ft-slider::after { transform: translateX(18px); }
.flow-toggle input:focus-visible + .ft-slider { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Галерея готовых сценариев ---------- */
.gal-head { margin-top: 34px; }
.gal-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.gal-chip {
  background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 999px;
  padding: 6px 13px; font-size: 12.5px; font-weight: 600; color: var(--ink-dim);
}
.gal-chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.gal-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.gal-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 16px;
  transition: border-color .15s, box-shadow .2s;
}
.gal-card:hover { border-color: var(--line-bright); box-shadow: 0 6px 18px rgba(16,24,40,.08); }
.gal-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.gal-cat { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.gal-amo {
  font-size: 11px; font-weight: 700; color: var(--violet);
  border: 1px solid rgba(105,65,198,.35); background: var(--master-soft); border-radius: 999px; padding: 1px 8px;
  white-space: nowrap; text-transform: none; letter-spacing: 0;
}
.gal-amo.off { color: var(--amber-deep); border-color: rgba(224,138,0,.4); background: rgba(224,138,0,.09); }
.gal-title { font-weight: 700; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.gal-desc { font-size: 13px; line-height: 1.5; color: var(--ink-dim); flex: 1; }
.gal-steps { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.gal-step {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 7px; background: var(--surface-sunken); border: 1px solid var(--line); color: var(--ink-dim);
}
.gal-step.trig { color: var(--amber-deep); background: rgba(224,138,0,.09); border-color: rgba(224,138,0,.3); }
.gal-arrow { color: var(--ink-faint); font-size: 12px; }
.gal-add { align-self: flex-start; margin-top: 4px; }
.nf-row { display: flex; gap: 8px; }
.nf-row input { flex: 1; min-width: 0; }

/* ---------- Окна: лист, шторка, меню ---------- */
.au-veil {
  position: fixed; inset: 0; z-index: 96; background: rgba(0,21,61,.4);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fade .18s both;
}
.au-veil.side { justify-content: flex-end; padding: 0; }
.au-sheet {
  display: flex; flex-direction: column; width: 100%; max-width: 480px;
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(16,24,40,.2); animation: rise .25s both;
}
.au-sheet.wide { max-width: 780px; }
.au-sheet.confirm { max-width: 420px; }
.au-veil.side .au-sheet {
  max-width: 500px; height: 100%; max-height: none; border-radius: 0; border: none;
  border-left: 1px solid var(--line); animation: slide .25s cubic-bezier(.2,.9,.3,1) both;
}
.au-sheet-h {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 22px 12px;
}
.au-sheet-t { min-width: 0; }
.au-sheet-h h3, .pn-head h3 { font-family: var(--disp); font-weight: 600; font-size: 19px; line-height: 1.3; margin-top: 2px; }
.au-x {
  flex: none; width: 36px; height: 36px; margin: -6px -8px 0 0; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--ink-faint);
}
.au-x:hover { background: var(--surface-sunken); color: var(--ink); }
.au-sheet-b { padding: 4px 22px 20px; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.au-sheet-f {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding: 14px 22px; border-top: 1px solid var(--line);
}
.au-menu {
  position: absolute; z-index: 97; min-width: 220px; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(16,24,40,.2); animation: rise .14s both;
}
.au-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px;
  background: none; border: none; border-radius: 8px; padding: 8px 10px;
  font-size: 14px; font-weight: 600; color: var(--ink); text-align: left;
}
.au-menu button:hover { background: var(--surface-sunken); }
.au-menu button.danger { color: var(--red); }

/* ---------- Поля форм ---------- */
.au-field { margin-bottom: 16px; min-width: 0; }
.au-field > label:not(.au-check), .au-row2 .au-field > label:not(.au-check) {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-dim); margin-bottom: 6px;
}
.au-field .req { color: var(--red); font-style: normal; }
.au-field input:not([type="checkbox"]):not([type="radio"]), .au-field select, .au-field textarea,
.hist-filter select, .pal-search input, .tpl-row input {
  width: 100%; min-height: 42px; background: var(--bg); border: 1px solid var(--line-bright);
  border-radius: 9px; padding: 9px 12px; color: var(--ink);
  font-family: var(--body); font-size: 14.5px; outline: none; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.au-field textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.au-field input:focus, .au-field select:focus, .au-field textarea:focus, .vf-edit:focus,
.hist-filter select:focus, .pal-search input:focus, .tg:focus-within {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.12); outline: none;
}
.au-field select:disabled { opacity: .6; }
.au-field.invalid input:not([type="checkbox"]), .au-field.invalid select, .au-field.invalid .vf-edit,
.au-field.invalid .ev-pick, .au-field.invalid .tg { border-color: var(--red); }
.au-err { font-size: 12.5px; color: #B42318; margin-top: 5px; font-weight: 600; }
.au-hint { font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; margin-top: 6px; }
.au-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.au-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.au-field .au-inline input[type="number"] { width: 132px; flex: none; }
.au-field .au-inline select { width: auto; flex: 1; min-width: 120px; }
.au-field .au-inline input[type="date"] { width: auto; flex: 1; min-width: 150px; }
.au-suffix { font-size: 13px; color: var(--ink-faint); }
.au-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.au-check {
  display: flex; align-items: flex-start; gap: 10px; min-height: 30px; cursor: pointer;
  font-size: 14px; color: var(--ink); line-height: 1.45;
}
.au-check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.au-note {
  display: flex; gap: 9px; align-items: flex-start; margin: 0 0 14px;
  background: rgba(224,138,0,.07); border: 1px solid rgba(224,138,0,.3); border-radius: 10px;
  padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--ink-dim);
}
.au-note > .au-ic { color: var(--amber-deep); margin-top: 2px; }
.au-note.plain { background: var(--surface-sunken); border-color: var(--line); display: block; }
.au-field .au-note { margin: 8px 0 0; }
.au-note a { font-weight: 600; white-space: nowrap; }

/* список галочек (шаблоны, варианты поля) */
.ck-list { display: flex; flex-direction: column; gap: 6px; }
.ck-item {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 44px;
  background: var(--bg);
}
.ck-item:hover { border-color: var(--line-bright); }
.ck-item input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.ck-item span { min-width: 0; font-size: 14px; }
.ck-item b { display: block; font-weight: 600; }
.ck-item small { display: block; font-size: 12px; color: var(--ink-faint); line-height: 1.45; margin-top: 2px; }
.ck-list.tight .ck-item { padding: 8px 10px; }

/* поля сделки amoCRM (повторяющиеся строки) */
.af { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.af-row {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px;
  background: var(--surface-sunken);
}
.af-top { display: flex; gap: 6px; align-items: center; }
.af-top select { flex: 1; min-width: 0; }
.af-val { margin-top: 8px; }
.af-wait { font-size: 13px; padding: 4px 2px; }

/* теги */
.tg {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 42px;
  background: var(--bg); border: 1px solid var(--line-bright); border-radius: 9px; padding: 6px 8px;
  cursor: text; transition: border-color .15s, box-shadow .15s;
}
.tg-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  background: var(--client-soft); color: var(--navy); border-radius: 7px;
  padding: 3px 4px 3px 9px; font-size: 13px; font-weight: 600;
}
.tg-chip button {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  background: none; border: none; border-radius: 5px; color: inherit; opacity: .6; padding: 0;
}
.tg-chip button { position: relative; }
.tg-chip button::before { content: ""; position: absolute; inset: -8px -6px; }
.tg-chip button:hover { opacity: 1; background: rgba(0,53,127,.1); }
.au-field .tg .tg-in {
  flex: 1; min-width: 120px; min-height: 28px; border: none !important; box-shadow: none !important;
  background: none; padding: 2px 4px;
}

/* текст с подстановками */
.vf-edit {
  min-height: 42px; background: var(--bg); border: 1px solid var(--line-bright);
  border-radius: 9px; padding: 9px 12px; color: var(--ink);
  font-family: var(--body); font-size: 14.5px; line-height: 1.6; outline: none;
  white-space: pre-wrap; overflow-wrap: anywhere; cursor: text;
  transition: border-color .15s, box-shadow .15s;
}
.vf.multi .vf-edit { min-height: 92px; }
.vf-edit.is-empty::before, .vf-edit:empty::before { content: attr(data-ph); color: var(--ink-faint); pointer-events: none; }
.vchip {
  display: inline-block; background: var(--client-soft); color: var(--navy);
  border: 1px solid rgba(10,77,166,.25); border-radius: 6px; padding: 0 7px; margin: 0 1px;
  font-size: .92em; font-weight: 600; line-height: 1.5; white-space: nowrap; user-select: all;
}
.vchip.sm { font-size: .88em; padding: 0 5px; border-radius: 5px; line-height: 1.4; }
.vf-bar { display: flex; margin-top: 6px; }
.vf-bar[hidden] { display: none; }
.vf-add {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px;
  background: none; border: 1px dashed var(--line-bright); border-radius: 8px; padding: 4px 10px;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
}
.vf-add:hover { border-color: var(--accent); background: var(--client-soft); }
.vf-prev { font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; margin-top: 6px; overflow-wrap: anywhere; }
.vp-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; width: 100%;
  min-height: 44px; background: none; border: none; border-radius: 9px; padding: 9px 10px; text-align: left;
}
.vp-item:hover { background: var(--surface-sunken); }
.vp-item b { font-size: 14px; font-weight: 600; color: var(--ink); }
.vp-item small { font-size: 12.5px; color: var(--ink-faint); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }

/* ---------- Выбор шага / события ---------- */
.pal-search { position: relative; margin-bottom: 14px; }
.pal-search .au-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); }
.pal-search input { padding-left: 36px; }
.pal-group { margin-bottom: 14px; }
.pal-gh {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); padding: 4px 2px 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pal-item {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 48px;
  background: none; border: 1px solid transparent; border-radius: 10px; padding: 9px 10px;
  text-align: left; color: var(--ink);
}
.pal-item:hover { background: var(--surface-sunken); border-color: var(--line); }
.pal-item.on { border-color: var(--accent); background: var(--client-soft); }
.pal-item[hidden], .pal-group[hidden], .tp-item[hidden] { display: none; }
.pal-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 9px; background: var(--surface-sunken); color: var(--ink-dim);
}
.pal-ic.g-cabinet { color: var(--accent); background: var(--client-soft); }
.pal-ic.g-amo { color: var(--violet); background: var(--master-soft); }
.pal-ic.g-trigger { color: var(--amber-deep); background: rgba(224,138,0,.1); }
.pal-t { min-width: 0; }
.pal-t b { display: block; font-size: 14.5px; font-weight: 600; }
.pal-t small { display: block; font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; margin-top: 2px; }
.ev-pick {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; text-align: left;
  background: var(--bg); border: 1px solid var(--line-bright); border-radius: 10px; padding: 9px 12px; color: var(--ink);
}
.ev-pick:hover { border-color: var(--accent); }
.ev-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 9px; color: var(--amber-deep); background: rgba(224,138,0,.1);
}
.ev-t { flex: 1; min-width: 0; }
.ev-t b { display: block; font-size: 14.5px; font-weight: 600; }
.ev-t small { display: block; font-size: 12px; color: var(--ink-faint); }
.ev-ch { font-size: 12.5px; font-weight: 700; color: var(--accent); flex: none; }

/* ---------- Редактор: шапка ---------- */
.fe-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.fe-back { flex: none; }
.fe-name {
  flex: 1 1 260px; min-width: 0; max-width: 680px;
  font-family: var(--disp); font-weight: 600; font-size: 19px; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 6px 10px; outline: none; transition: border-color .15s, background .15s;
}
.fe-name:hover { border-color: var(--line); }
.fe-name:focus { border-color: var(--accent); background: var(--bg-card); }
.fe-top .spacer { flex: 1 1 0; }
.fe-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: none; }
#fe-state { font-size: 13px; font-weight: 700; color: var(--ink-faint); min-width: 74px; }
#fe-state.on { color: var(--green); }
#fe-save { flex: none; }
#fe-save.idle { background: var(--surface-sunken); color: var(--ink-faint); box-shadow: none; border: 1px solid var(--line); opacity: 1; }

.fe-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.fe-main.with-side { grid-template-columns: minmax(0, 1fr) 400px; }
.fe-side {
  position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 6px 18px rgba(16,24,40,.07); overscroll-behavior: contain;
}
.fe-side[hidden] { display: none; }
.pn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 18px 20px 8px; }
.fe-side .pn-body { padding: 4px 20px 20px; }
.pn-hint { font-size: 13px; line-height: 1.55; color: var(--ink-dim); margin: 0 0 16px; }
.pn-form { border: none; padding: 0; margin: 0; min-width: 0; }
.pn-p { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.pn-p.bad { color: #B42318; }
.pn-p.warn { color: var(--amber-deep); }
.pn-p .au-ic { margin-top: 2px; }
.pn-del { margin-top: 10px; min-height: 36px; }

/* ---------- Схема сценария (широкий экран) ---------- */
.flow-wrap.canvas {
  position: relative; overflow: auto;
  border: 1px solid var(--line); border-radius: 14px; background-color: var(--bg-raise);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
  height: calc(100vh - 250px); min-height: 440px;
}
.flow-canvas { position: relative; margin: 0 auto; }
.flow-svg { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }
.flow-edge { fill: none; stroke: var(--line-bright); stroke-width: 2; }
.flow-edge.yes { stroke: rgba(31,157,87,.55); }
.flow-edge.no { stroke: rgba(217,45,32,.45); }
.flow-edge.ghost { stroke-dasharray: 4 5; }

.flow-node {
  background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 12px;
  border-left: 4px solid var(--ink-faint); box-shadow: 0 2px 6px rgba(16,24,40,.07);
  cursor: pointer; padding: 10px 12px 10px 12px; text-align: left;
  transition: box-shadow .15s, border-color .15s, transform .12s;
}
.flow-wrap.canvas .flow-node { position: absolute; z-index: 3; overflow: hidden; }
.flow-node:hover { box-shadow: 0 8px 22px rgba(16,24,40,.14); }
.flow-node.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.22), 0 8px 22px rgba(16,24,40,.12); }
.flow-node.bad { border-color: rgba(217,45,32,.55); }
.flow-node.g-trigger { border-left-color: var(--amber); }
.flow-node.g-cabinet { border-left-color: var(--accent); }
.flow-node.g-amo { border-left-color: var(--violet); }
.flow-node.g-condition { border-left-color: var(--ink-dim); }
.flow-node.g-delay, .flow-node.g-stop, .flow-node.g-notify { border-left-color: var(--ink-faint); }
.fn-head { display: flex; align-items: center; gap: 7px; min-height: 22px; }
.fn-icon { display: inline-flex; flex: none; color: var(--ink-dim); }
.g-trigger .fn-icon { color: var(--amber-deep); }
.g-cabinet .fn-icon { color: var(--accent); }
.g-amo .fn-icon { color: var(--violet); }
.fn-kicker {
  flex: 1; min-width: 0; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.fn-title { font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--ink); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-summary {
  font-size: 12.5px; line-height: 1.45; color: var(--ink-dim); margin-top: 3px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fn-problem {
  display: flex; align-items: center; gap: 5px; margin-top: 4px;
  font-size: 12px; font-weight: 600; color: #B42318;
}
.fn-problem span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fn-problem.warn { color: var(--amber-deep); font-weight: 500; }
.node-del {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: -3px -5px -3px 0; border: none; border-radius: 7px;
  background: transparent; color: var(--ink-faint); padding: 0; opacity: 0; transition: opacity .12s;
}
.node-del::before { content: ""; position: absolute; inset: -9px; }
.flow-node:hover .node-del, .flow-node:focus-within .node-del, .flow-node.selected .node-del { opacity: 1; }
.node-del:hover { color: var(--red); background: rgba(217,45,32,.08); }

.flow-plus {
  position: absolute; z-index: 4; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; padding: 0;
  background: var(--bg-card); border: 1.5px solid var(--line-bright); color: var(--ink-dim);
  box-shadow: 0 1px 3px rgba(16,24,40,.12);
  transition: border-color .12s, color .12s, transform .1s;
}
.flow-plus::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.flow-plus:hover { border-color: var(--accent); color: var(--accent); transform: translate(-50%, -50%) scale(1.1); }
.flow-blabel {
  position: absolute; z-index: 4; transform: translate(-50%, 0);
  font-size: 11px; font-weight: 800; padding: 1px 9px; border-radius: 999px; background: var(--bg-card);
}
.flow-blabel.static { position: static; transform: none; }
.flow-blabel.yes { color: var(--green); border: 1px solid rgba(31,157,87,.4); }
.flow-blabel.no { color: var(--red); border: 1px solid rgba(217,45,32,.4); }
.flow-slot {
  position: absolute; z-index: 4; transform: translate(-50%, 0);
  display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px;
}
.flow-addstep {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; white-space: nowrap;
  background: var(--bg-card); border: 1.5px dashed var(--line-bright); border-radius: 10px;
  padding: 6px 14px; font-size: 13px; font-weight: 700; color: var(--ink-dim);
}
.flow-addstep.tail { position: absolute; z-index: 4; transform: translate(-50%, 0); }
.flow-addstep:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Список шагов (узкий экран) ---------- */
.flow-wrap.list { border: none; background: none; height: auto; min-height: 0; overflow: visible; }
.fl-list { display: flex; flex-direction: column; align-items: stretch; max-width: 620px; margin: 0 auto; }
.fl-item { position: relative; padding: 12px 14px; }
.fl-item .fn-title { white-space: normal; }
.fl-item .fn-summary { -webkit-line-clamp: 3; font-size: 13px; }
.fl-item .fn-problem span { white-space: normal; }
.fl-item .node-del { opacity: 1; width: 36px; height: 36px; margin: -8px -8px -8px 0; }
.fl-conn { position: relative; height: 44px; display: flex; align-items: center; justify-content: center; }
.fl-conn::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--line-bright); }
.fl-conn.tail { height: 18px; }
.fl-add {
  position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--ink-dim);
}
.fl-add::before {
  content: ""; position: absolute; inset: 7px; border-radius: 50%; z-index: -1;
  background: var(--bg-card); border: 1.5px solid var(--line-bright); box-shadow: 0 1px 3px rgba(16,24,40,.12);
}
.fl-add:active::before { border-color: var(--accent); }
.fl-addtail {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px;
  background: none; border: 1.5px dashed var(--line-bright); border-radius: 12px;
  font-size: 14px; font-weight: 700; color: var(--ink-dim);
}
.fl-addtail:hover, .fl-addtail:active { border-color: var(--accent); color: var(--accent); }
.fl-branches { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.fl-branch { border-left: 3px solid var(--line-bright); border-radius: 0 12px 12px 0; padding: 4px 0 4px 12px; }
.fl-branch.yes { border-left-color: rgba(31,157,87,.6); }
.fl-branch.no { border-left-color: rgba(217,45,32,.5); }
.fl-branch-h { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }
.fl-branch.yes > .fl-branch-h { color: var(--green); }
.fl-branch.no > .fl-branch-h { color: var(--red); }
.fl-branch > .fl-conn:first-of-type { height: 28px; }
.fl-branch > .fl-conn.tail:first-of-type { height: 8px; }
.fl-branch > .fl-conn.tail:first-of-type::before { display: none; }

/* ---------- Журнал запусков ---------- */
.hist-filter { display: flex; gap: 12px 18px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.hist-filter select { width: auto; min-width: 220px; max-width: 100%; }
.run-card { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); margin-bottom: 8px; overflow: hidden; }
.run-head {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  background: none; border: none; padding: 10px 14px; text-align: left; color: var(--ink);
}
.run-head:hover { background: var(--surface-sunken); }
.rh-main { flex: 1; min-width: 0; }
.rh-main b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-main small { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 1px; }
.rh-chev { color: var(--ink-faint); display: inline-flex; transition: transform .15s; }
.run-card.open .rh-chev { transform: rotate(90deg); }
.run-chip {
  flex: none; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; border: 1px solid;
  white-space: nowrap;
}
.run-chip.good { color: var(--green); border-color: rgba(31,157,87,.4); background: rgba(31,157,87,.09); }
.run-chip.warn { color: var(--amber-deep); border-color: rgba(224,138,0,.4); background: rgba(224,138,0,.09); }
.run-chip.bad { color: var(--red); border-color: rgba(217,45,32,.4); background: rgba(217,45,32,.07); }
.run-chip.wait { color: var(--accent); border-color: rgba(10,77,166,.4); background: rgba(10,77,166,.07); }
.run-log { padding: 14px 16px 16px; border-top: 1px solid var(--line); background: var(--surface-sunken); }
.run-log[hidden] { display: none; }
.run-none { font-size: 13.5px; }
.run-steps { list-style: none; margin: 0; padding: 0; }
.rs { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.rs:last-child { padding-bottom: 0; }
.rs::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--line-bright); }
.rs:last-child::before { display: none; }
.rs-ic {
  flex: none; width: 24px; height: 24px; border-radius: 50%; position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--ink-faint);
}
.rs.ok .rs-ic { background: var(--green); }
.rs.skipped .rs-ic { background: var(--amber); }
.rs.error .rs-ic { background: var(--red); }
.rs.wait .rs-ic { background: var(--accent); }
.rs-body { flex: 1; min-width: 0; }
.rs-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.rs-title em { font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--amber-deep); }
.rs.error .rs-title em { color: var(--red); }
.rs-title time { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-faint); }
.rs-text { font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); margin-top: 2px; overflow-wrap: anywhere; }
.rs-details { margin: 6px 0 0; padding: 0 0 0 16px; font-size: 12.5px; line-height: 1.55; color: var(--ink-dim); overflow-wrap: anywhere; }
.rs-tech { margin-top: 6px; font-size: 12px; color: var(--ink-faint); }
.rs-tech summary { cursor: pointer; padding: 4px 0; }
.rs-tech pre {
  margin: 4px 0 0; padding: 10px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--ink-dim);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto;
}
.tr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13.5px; color: var(--ink-dim); }

/* проверка: выбор проекта и режима */
.tp-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; margin-bottom: 16px; }
.tp-item, .tp-mode {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer; min-height: 48px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg);
}
.tp-item:hover, .tp-mode:hover { border-color: var(--line-bright); }
.tp-item input, .tp-mode input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.tp-item span, .tp-mode span { min-width: 0; }
.tp-item b, .tp-mode b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.tp-item small, .tp-mode small { display: block; font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; margin-top: 1px; }
.tp-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-mode.on { border-color: var(--accent); background: var(--client-soft); }
.tp-mode.off { opacity: .6; cursor: default; }

/* шаблоны веток: строка этапа */
.tpl-row { align-items: stretch; }
.tpl-row .au-iconbtn { align-self: center; }
.rule-code { margin-left: 4px; }
.row-card .flow-toggle { margin: -8px 0; }

/* ============================================================
   Планшет и телефон
   ============================================================ */
@media (max-width: 1100px) {
  .fe-main.with-side { grid-template-columns: minmax(0, 1fr) 360px; }
}
/* сенсорные устройства: крестик шага и «+» видны и достаточно крупные */
@media (pointer: coarse) {
  .node-del { opacity: 1; width: 36px; height: 36px; margin: -8px -9px -8px 0; }
  .flow-plus { width: 36px; height: 36px; }
  .flow-addstep { min-height: 44px; }
  .au-iconbtn, .au-x { width: 44px; height: 44px; }
  .gal-chip { min-height: 44px; padding: 8px 16px; }
  .auto-tab { padding: 11px 16px; }
  .au-link { min-height: 44px; }
  .rs-tech summary { padding: 12px 0; }
  .btn-amber.sm, .btn-ghost.sm { min-height: 44px; padding-left: 14px; padding-right: 14px; }
  .vf-add { min-height: 40px; }
  .tg-chip button { width: 30px; height: 30px; }
}
@media (max-width: 900px) {
  .fe-side { display: none; }
  .fe-top {
    position: sticky; top: 54px; z-index: 40; margin: -16px -13px 14px; padding: 10px 13px;
    background: rgba(242,244,247,.94); backdrop-filter: blur(10px); gap: 8px;
  }
  .fe-top .spacer { display: none; }
  .fe-back { order: 1; }
  .fe-switch { order: 2; margin-left: auto; }
  .fe-name { order: 3; flex: 1 1 100%; max-width: none; font-size: 18px; background: var(--bg-card); border-color: var(--line); }
  #fe-test { order: 4; }
  #fe-more { order: 5; }
  #fe-save { order: 6; flex: 1; justify-content: center; }
  .au-veil.side .au-sheet { max-width: none; border-left: none; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .fe-top { top: 60px; margin: -26px -18px 16px; padding: 12px 18px; }
}
@media (max-width: 640px) {
  .auto-tabs { width: 100%; }
  .auto-tab { flex: 1 0 auto; text-align: center; padding: 11px 14px; min-height: 44px; }
  .flow-card { flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; padding: 12px 14px; }
  .flow-card .fc-body { flex: 1 1 calc(100% - 60px); }
  .flow-card .fc-actions { flex: 1 1 100%; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
  .gal-grid { grid-template-columns: 1fr; }
  .gal-add { align-self: stretch; justify-content: center; }
  .gal-chip { min-height: 44px; padding: 8px 16px; }
  .au-link { min-height: 44px; }
  .rs-tech summary { padding: 12px 0; }
  .au-strip .btn-ghost, .au-strip .btn-amber { width: 100%; justify-content: center; }
  .hist-filter select { width: 100%; }
  .nf-row { flex-direction: column; }

  /* окна — снизу на всю ширину; настройки шага — на весь экран */
  .au-veil { padding: 0; align-items: flex-end; }
  .au-sheet, .au-sheet.wide, .au-sheet.confirm {
    max-width: none; max-height: 92vh; max-height: 92dvh;
    border-radius: 18px 18px 0 0; border: none; animation: sheetup .22s cubic-bezier(.2,.9,.3,1) both;
  }
  .au-veil.side .au-sheet { max-height: none; height: 100%; height: 100dvh; border-radius: 0; animation: sheetup .22s cubic-bezier(.2,.9,.3,1) both; }
  .au-sheet-h { padding: 16px 16px 10px; }
  .au-sheet-b { padding: 4px 16px 18px; }
  .au-sheet-f { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); flex-direction: column-reverse; }
  .au-sheet-f > * { width: 100%; min-height: 48px; justify-content: center; }
  .au-x { width: 44px; height: 44px; margin: -8px -8px 0 0; }
  .au-menu { left: 8px !important; right: 8px; }
  .au-menu button { min-height: 48px; font-size: 15px; }

  /* поля: 16 px — телефон не увеличивает страницу при вводе; высота под палец */
  .au-field input:not([type="checkbox"]):not([type="radio"]), .au-field select, .au-field textarea,
  .hist-filter select, .pal-search input, .tpl-row input, .vf-edit, .fe-name, .au-field .tg .tg-in {
    font-size: 16px; min-height: 46px;
  }
  .au-field .tg .tg-in { min-height: 32px; }
  .tg { min-height: 46px; }
  .au-row2, .au-pair, .tp-modes { grid-template-columns: 1fr; }
  .au-check { min-height: 44px; align-items: center; }
  .au-check input, .ck-item input, .tp-item input, .tp-mode input { width: 22px; height: 22px; margin-top: 0; }
  .ck-item, .tp-item, .tp-mode { align-items: center; }
  .au-iconbtn { width: 44px; height: 44px; }
  .vf-add { min-height: 44px; font-size: 13.5px; }
  .tg-chip { font-size: 14px; padding: 5px 4px 5px 10px; }
  .tg-chip button { width: 30px; height: 30px; }
  .btn-amber.sm, .btn-ghost.sm { min-height: 44px; padding-left: 14px; padding-right: 14px; font-size: 13.5px; }
  .fe-switch { min-height: 44px; }
  .tpl-row { flex-wrap: wrap; }
  .tpl-row .ts-name, .tpl-row .ts-subs { flex: 1 1 100%; }
  .rs-title time { margin-left: 0; }
  .tp-list { max-height: 38vh; }
}
@keyframes sheetup { from { transform: translateY(28px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .au-veil, .au-sheet, .au-menu, .flow-card { animation: none !important; }
}

/* ---- analytics.css ---- */
/* Раздел «Аналитика» — деньги, производство, маржа и исполнители.
   Только переменные кабинета (app.css) + несколько своих цветов для графиков.
   Все классы с префиксом an-, чужие экраны не затрагиваются. Телефон и планшет — снизу файла. */

.an {
  /* Состояния денег на графиках (проверены на различимость, в т.ч. при дальтонизме) */
  --an-paid: #1A7D49;      /* оплачено */
  --an-exp: #0A4DA6;       /* ожидается в срок */
  --an-over: #D92D20;      /* просрочено */
  --an-week: #E08A00;      /* на этой неделе */
  --an-later: #199E9E;     /* позже этого месяца */
  --an-none: #98A2B3;      /* без срока / не разложено */
  --an-master: #6941C6;    /* работа мастеров */
  --an-grid: #EAECF0;
  --an-shadow: 0 1px 3px rgba(16,24,40,.06);
  --an-hatch: repeating-linear-gradient(135deg, #C6CCD6 0 2px, #EEF0F4 2px 6px);
  display: block;
}

/* ---------- Шапка: вкладки и период ---------- */
.an-head { margin-bottom: 18px; align-items: flex-end; }
.an-tabs {
  display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-sunken);
  border: 1px solid var(--line); border-radius: 11px; max-width: 100%;
}
.an-tab {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 15px; border-radius: 8px; border: 1px solid transparent; background: transparent;
  font-family: var(--body); font-size: 13.5px; font-weight: 700; color: var(--ink-dim);
  text-decoration: none; transition: color .12s, background .12s, border-color .12s;
}
.an-tab:hover { color: var(--ink); }
.an-tab.on {
  color: var(--accent); background: var(--bg-card); border-color: var(--line-bright);
  box-shadow: 0 1px 2px rgba(16,24,40,.12);
}
.an-tab svg { flex: none; }

.an-bar {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  margin-bottom: 20px; padding: 10px 12px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--an-shadow);
}
.an-bar-lbl {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
  padding-left: 4px;
}
.an-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 9px; }
.an-seg button {
  border: none; background: transparent; border-radius: 6px; padding: 6px 13px;
  font-family: var(--body); font-size: 13px; font-weight: 700; color: var(--ink-dim); white-space: nowrap;
}
.an-seg button:hover { color: var(--ink); }
.an-seg button.on { background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(10,77,166,.35); }
.an-step { display: inline-flex; align-items: center; gap: 2px; }
.an-step button {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-bright); background: var(--bg-card);
  color: var(--ink-dim); display: inline-flex; align-items: center; justify-content: center;
}
.an-step button:hover { color: var(--accent); border-color: var(--accent); }
.an-step b { min-width: 148px; text-align: center; font-size: 14px; font-weight: 700; color: var(--ink); padding: 0 6px; }
.an-link {
  border: none; background: none; padding: 4px 2px; color: var(--accent);
  font-family: var(--body); font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.an-link:hover { text-decoration: underline; }
.an-custom { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.an-custom input, .an-search {
  background: var(--bg); border: 1px solid var(--line-bright); border-radius: 8px;
  padding: 7px 10px; color: var(--ink); font-family: var(--body); font-size: 14px; outline: none; min-width: 0;
}
.an-custom input:focus, .an-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.15); }
.an-cmp { margin-left: auto; font-size: 12.5px; color: var(--ink-faint); }
.an-cmp b { color: var(--ink-dim); font-weight: 600; }

/* ---------- Сетка страницы ---------- */
.an-body { display: flex; flex-direction: column; gap: 18px; transition: opacity .15s; }
.an-body.stale { opacity: .55; pointer-events: none; }
.an-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.an-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.an-card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px; box-shadow: var(--an-shadow); min-width: 0;
}
.an-card-h { display: flex; align-items: flex-start; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 16px; }
.an-card-h h3 { font-family: var(--disp); font-size: 16.5px; font-weight: 700; letter-spacing: -.005em; color: var(--ink); line-height: 1.3; }
.an-card-h .sub { font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; line-height: 1.45; }
.an-card-h .grow { flex: 1 1 220px; min-width: 0; }
.an-card-h .tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.an-eyebrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
}
.an-eyebrow i { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-dim); font-size: 12.5px; }
.an-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.an-muted { color: var(--ink-faint); }
.an-empty {
  padding: 26px 18px; text-align: center; color: var(--ink-dim); font-size: 13.5px; line-height: 1.6;
  border: 1px dashed var(--line-bright); border-radius: 12px; background: var(--surface-sunken);
}
.an-empty b { color: var(--ink); }

/* «Как считается» */
.an-how { margin-top: 14px; font-size: 12.5px; color: var(--ink-dim); line-height: 1.6; }
.an-how summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; list-style: none;
  color: var(--accent); font-weight: 700; padding: 4px 0;
}
.an-how summary::-webkit-details-marker { display: none; }
.an-how summary::before { content: "?"; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; }
.an-how[open] summary { margin-bottom: 6px; }
.an-how ul { margin: 0 0 0 18px; }
.an-how li { margin-bottom: 3px; }
.an-how b { color: var(--ink); font-weight: 600; }

/* ---------- Главный блок «Ждёт оплаты» ---------- */
.an-hero { padding: 24px 26px 20px; position: relative; overflow: hidden; }
.an-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--navy); }
.an-hero-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 22px 28px; align-items: end; }
.an-hero-val {
  font-family: var(--mono); font-weight: 700; font-size: 42px; line-height: 1.05; letter-spacing: -.035em;
  color: var(--ink); margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.an-hero-sub { font-size: 13.5px; color: var(--ink-dim); margin-top: 8px; }

.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.an-kpis.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.an-kpis.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.an-kpis.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* восемь плиток (сделки): два ровных ряда по четыре, а не семь и одна */
.an-kpis.n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.an-kpi {
  display: flex; flex-direction: column; gap: 7px; text-align: left; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  font-family: var(--body); color: var(--ink); box-shadow: var(--an-shadow);
  transition: border-color .12s, box-shadow .15s, transform .12s;
}
button.an-kpi { cursor: pointer; }
button.an-kpi:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(16,24,40,.10); transform: translateY(-1px); }
button.an-kpi.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.14); }
.an-kpi .l {
  display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-dim); line-height: 1.3;
}
.an-kpi .l::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--tone, var(--ink-faint)); flex: none; }
.an-kpi .v { font-family: var(--mono); font-weight: 700; font-size: 23px; line-height: 1.1; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-kpi .v.count { font-size: 30px; }
/* шесть плиток в ряд: на обычном мониторе сумма в миллионы не помещалась и обрезалась многоточием */
@media (min-width: 1101px) {
  .an-kpis.n6 .an-kpi .v:not(.count) { font-size: clamp(16px, 1.32vw, 23px); }
  /* три плитки рядом с главной суммой: семизначная сумма на ноутбуке стояла впритык */
  .an-hero .an-kpi .v:not(.count) { font-size: clamp(16px, 1.45vw, 23px); }
}
.an-kpi .s { font-size: 12px; color: var(--ink-dim); line-height: 1.4; }
.an-kpi .s b { color: var(--ink); font-weight: 600; }
.an-kpi.flat { box-shadow: none; background: var(--surface-sunken); }
.an-kpi.alarm .v { color: var(--an-over); }
.t-red { --tone: var(--an-over); } .t-amber { --tone: var(--an-week); } .t-blue { --tone: var(--an-exp); }
.t-green { --tone: var(--an-paid); } .t-violet { --tone: var(--an-master); } .t-teal { --tone: var(--an-later); }
.t-gray { --tone: var(--an-none); } .t-navy { --tone: var(--navy); }

/* изменение к прошлому периоду */
.an-delta {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; background: var(--surface-sunken); color: var(--ink-dim); border: 1px solid var(--line);
}
.an-kpi > .an-delta { align-self: flex-start; }
.an-kpi > .an-meter { align-self: stretch; }
.an-delta.up { color: var(--an-paid); background: var(--margin-soft); border-color: rgba(26,125,73,.25); }
.an-delta.down { color: #B42318; background: rgba(217,45,32,.07); border-color: rgba(217,45,32,.25); }

/* ---------- Полосы: разбивка, проект, метр ---------- */
.an-split { margin-top: 22px; }
.an-track { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; background: var(--an-grid); }
.an-track > i { display: block; min-width: 3px; height: 100%; }
.an-track > i:first-child { border-radius: 6px 0 0 6px; }
.an-track > i:last-child { border-radius: 0 6px 6px 0; }
.an-track > i:only-child { border-radius: 6px; }
.an-track.thin { height: 8px; }
.an-track.empty { background: var(--an-grid); }
.c-paid { background: var(--an-paid); } .c-exp { background: var(--an-exp); } .c-over { background: var(--an-over); }
.c-week { background: var(--an-week); } .c-later { background: var(--an-later); } .c-master { background: var(--an-master); }
.c-none { background: var(--an-hatch); } .c-gray { background: #C6CCD6; }
.an-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.an-leg {
  display: inline-flex; align-items: center; gap: 8px; text-align: left;
  border: 1px solid var(--line); background: var(--bg-card); border-radius: 10px; padding: 7px 12px 7px 10px;
  font-family: var(--body); font-size: 12.5px; color: var(--ink-dim); line-height: 1.3;
}
button.an-leg { cursor: pointer; transition: border-color .12s, background .12s; }
button.an-leg:hover { border-color: var(--accent); }
button.an-leg.on { border-color: var(--accent); background: var(--client-soft); }
.an-leg .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.an-leg .tx { display: flex; flex-direction: column; min-width: 0; }
.an-leg b { font-family: var(--mono); font-weight: 700; color: var(--ink); font-size: 13px; white-space: nowrap; }
.an-leg.plain { border: none; padding: 0; background: none; }
.an-meter { height: 8px; border-radius: 4px; background: #D6E3F5; overflow: hidden; }
.an-meter > i { display: block; height: 100%; border-radius: 4px; background: var(--an-exp); }
.an-meter.green { background: #CFE8DA; } .an-meter.green > i { background: var(--an-paid); }
.an-meter.gray { background: var(--an-grid); } .an-meter.gray > i { background: #7B8799; }

/* ---------- График поступлений ---------- */
.an-chart { position: relative; width: 100%; }
.an-chart svg { display: block; width: 100%; overflow: visible; }
.an-chart text { font-family: var(--mono); font-size: 11px; fill: var(--ink-faint); }
.an-chart text.xl.cur { fill: var(--ink); font-weight: 700; }
.an-chart text.val { fill: var(--ink-dim); font-weight: 600; }
.an-chart .grid { stroke: var(--an-grid); stroke-width: 1; }
.an-chart .base { stroke: var(--line-bright); stroke-width: 1; }
.an-chart .hit { fill: transparent; cursor: pointer; outline: none; }
.an-chart .slot.hover .band, .an-chart .slot:focus-within .band { fill: rgba(10,77,166,.06); }
.an-chart .band { fill: transparent; }
.an-chart .band.cur { fill: rgba(10,77,166,.035); }
.an-tip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 190px; max-width: 260px;
  background: var(--ink); color: #fff; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 12px 30px rgba(16,24,40,.28); opacity: 0; transition: opacity .1s;
}
.an-tip.show { opacity: 1; }
.an-tip .t { font-weight: 700; margin-bottom: 4px; }
.an-tip .r { display: flex; align-items: center; gap: 8px; }
.an-tip .r i { width: 10px; height: 3px; border-radius: 2px; flex: none; }
.an-tip .r span { color: rgba(255,255,255,.72); flex: 1; }
.an-tip .r b { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.an-tip .h { margin-top: 5px; color: rgba(255,255,255,.6); font-size: 11.5px; }
.an-tails { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12.5px; color: var(--ink-dim); }
.an-tails b { font-family: var(--mono); color: var(--ink); font-weight: 700; }

/* ---------- Фильтры-чипы ---------- */
.an-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.an-chip {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  border: 1px solid var(--line-bright); background: var(--bg-card); border-radius: 999px; padding: 6px 12px;
  font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--ink-dim);
  transition: border-color .12s, color .12s, background .12s;
}
.an-chip:hover { border-color: var(--accent); color: var(--ink); }
.an-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.an-chip em { font-style: normal; font-family: var(--mono); font-size: 11.5px; font-weight: 700; opacity: .75; }
.an-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--ink-faint)); }
.an-chip.on .dot { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }

/* ---------- Списки: строка-таблица на широком экране, карточка на узком ---------- */
.an-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
/* вкладка «Сделки»: на телефоне строка складывается в две */
@media (max-width: 640px) {
  .an-row.g-stage { grid-template-columns: minmax(0, 1fr) auto !important; }
  .an-row.g-stage > span:nth-child(3) { grid-column: 1 / -1; order: 3; }
  .an-row.g-stage > span:nth-child(2) { display: none; }
  .an-row.g-wait { grid-template-columns: 1fr 1fr !important; }
  .an-row.g-wait > span:nth-child(1), .an-row.g-wait > span:nth-child(2) { grid-column: 1 / -1; }
  .an-row.g-wait > span:nth-child(3) { text-align: left !important; }
}
.an-row, .an-hrow { display: grid; gap: 4px 16px; align-items: center; padding: 11px 16px; }
.an-hrow {
  background: var(--surface-sunken); font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint); padding-top: 9px; padding-bottom: 9px;
}
.an-row { border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13.5px; transition: background .1s; min-height: 48px; }
a.an-row:hover, button.an-row:hover { background: var(--surface-sunken); }
button.an-row { width: 100%; text-align: left; border-left: none; border-right: none; border-bottom: none; background: none; font-family: var(--body); cursor: pointer; }
.an-row .nm { font-weight: 600; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.an-row .dim { color: var(--ink-dim); font-size: 12.5px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.an-row .amt { font-family: var(--mono); font-weight: 700; font-size: 14px; white-space: nowrap; text-align: right; color: var(--navy); }
.an-row .r, .an-hrow .r { text-align: right; }
.an-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1.5px solid var(--line-bright); background: var(--surface-sunken); padding: 11px 16px; font-size: 13px; font-weight: 700;
}
.an-foot b { font-family: var(--mono); }
.an-more { display: block; width: 100%; border: none; border-top: 1px solid var(--line); background: var(--bg-card);
  padding: 12px; font-family: var(--body); font-size: 13px; font-weight: 700; color: var(--accent); cursor: pointer; }
.an-more:hover { background: var(--surface-sunken); }

/* сетки колонок под разные списки */
.g-pay { grid-template-columns: 172px minmax(0, 1.25fr) minmax(0, 1fr) 96px 150px;
  grid-template-areas: "due project stage share amount"; }
.g-pay > .a-due { grid-area: due; } .g-pay > .a-project { grid-area: project; } .g-pay > .a-stage { grid-area: stage; }
.g-pay > .a-share { grid-area: share; } .g-pay > .a-amount { grid-area: amount; }
.g-work { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr) 150px 172px minmax(0, .9fr);
  grid-template-areas: "stage project status dates exec"; }
.g-work > .a-stage { grid-area: stage; } .g-work > .a-project { grid-area: project; } .g-work > .a-status { grid-area: status; }
.g-work > .a-dates { grid-area: dates; } .g-work > .a-exec { grid-area: exec; }
.g-act { grid-template-columns: 110px minmax(0, 1.3fr) 130px 130px 130px 130px;
  grid-template-areas: "num project status total paid owed"; }
.g-act > .a-num { grid-area: num; } .g-act > .a-project { grid-area: project; } .g-act > .a-status { grid-area: status; }
.g-act > .a-total { grid-area: total; } .g-act > .a-paid { grid-area: paid; } .g-act > .a-owed { grid-area: owed; }

/* подписи срока */
.an-due { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.an-due .dt { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.an-tag {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-bright); color: var(--ink-dim); background: var(--surface-sunken);
}
.an-tag.red { color: #B42318; border-color: rgba(217,45,32,.35); background: rgba(217,45,32,.07); }
.an-tag.amber { color: #93570A; border-color: rgba(224,138,0,.4); background: rgba(224,138,0,.10); }
.an-tag.blue { color: var(--accent); border-color: rgba(10,77,166,.3); background: var(--client-soft); }
.an-tag.green { color: var(--an-paid); border-color: rgba(26,125,73,.3); background: var(--margin-soft); }
.an-tag.violet { color: var(--an-master); border-color: rgba(105,65,198,.3); background: var(--master-soft); }

/* ---------- Проекты: полоса «договор → оплачено → ожидается → просрочено» ---------- */
.an-proj { display: block; padding: 14px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .1s; }
.an-proj:first-child { border-top: none; }
a.an-proj:hover { background: var(--surface-sunken); }
.an-proj-h { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 9px; }
.an-proj-h .nm { font-weight: 700; font-size: 14px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.an-proj-h .tot { margin-left: auto; font-family: var(--mono); font-weight: 700; font-size: 14px; white-space: nowrap; }
.an-proj-h .tot small { font-family: var(--body); font-weight: 500; font-size: 12px; color: var(--ink-faint); margin-right: 6px; }
.an-proj-n { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 9px; font-size: 12.5px; color: var(--ink-dim); }
.an-proj-n span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.an-proj-n i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.an-proj-n b { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.an-proj-n .warn b { color: #B42318; }

/* ---------- Что проверить / что делать ---------- */
.an-issue, .an-todo {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-top: 1px solid var(--line);
  color: var(--ink); text-decoration: none; transition: background .1s; min-height: 48px;
}
.an-issue:first-child, .an-todo:first-child { border-top: none; }
a.an-issue:hover, a.an-todo:hover { background: var(--surface-sunken); }
.an-ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-sunken); color: var(--ink-dim); border: 1px solid var(--line);
}
.an-ico.red { background: rgba(217,45,32,.08); color: var(--an-over); border-color: rgba(217,45,32,.22); }
.an-ico.amber { background: rgba(224,138,0,.10); color: #B26E00; border-color: rgba(224,138,0,.3); }
.an-ico.blue { background: var(--client-soft); color: var(--accent); border-color: rgba(10,77,166,.2); }
.an-ico.violet { background: var(--master-soft); color: var(--an-master); border-color: rgba(105,65,198,.22); }
.an-ico.green { background: var(--margin-soft); color: var(--an-paid); border-color: rgba(26,125,73,.22); }
.an-issue .tx, .an-todo .tx { flex: 1; min-width: 0; }
.an-issue .tx > span, .an-todo .tx > span { display: block; }
.an-issue .tx > br, .an-todo .tx > br { display: none; }
.an-issue .tt, .an-todo .tt { font-size: 13.5px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.an-issue .ss, .an-todo .ss { font-size: 12.5px; color: var(--ink-dim); line-height: 1.45; margin-top: 1px; overflow-wrap: anywhere; }
.an-issue .am, .an-todo .am { font-family: var(--mono); font-weight: 700; font-size: 13.5px; white-space: nowrap; color: var(--ink); padding-top: 2px; }
.an-group-h {
  padding: 9px 16px; background: var(--surface-sunken); border-top: 1px solid var(--line);
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
  display: flex; justify-content: space-between; gap: 10px;
}
.an-group-h:first-child { border-top: none; }

/* ---------- Работа сделана — оплаты нет ---------- */
.an-gap { padding: 14px 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px 24px; align-items: center;
  color: var(--ink); text-decoration: none; }
.an-gap:first-child { border-top: none; }
a.an-gap:hover { background: var(--surface-sunken); }
.an-gap .nm { font-weight: 700; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.an-gap .dim { font-size: 12.5px; color: var(--ink-dim); margin-top: 3px; line-height: 1.45; }
.an-pair { display: grid; grid-template-columns: 108px minmax(0, 1fr) 46px; gap: 5px 10px; align-items: center; font-size: 12px; color: var(--ink-dim); }
.an-pair b { font-family: var(--mono); font-weight: 700; color: var(--ink); text-align: right; }

/* ---------- Маржа / загрузка ---------- */
.an-mrow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) 132px 132px 84px; gap: 4px 16px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13.5px; min-height: 48px; }
a.an-mrow:hover { background: var(--surface-sunken); }
.an-mrow .pc { font-family: var(--mono); font-weight: 700; text-align: right; white-space: nowrap; }
.an-mrow .pc.low { color: #93570A; } .an-mrow .pc.neg { color: #B42318; }
.an-lrow { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 150px; gap: 4px 16px; align-items: center;
  width: 100%; text-align: left; padding: 11px 16px; border: none; border-top: 1px solid var(--line); background: none;
  font-family: var(--body); color: var(--ink); font-size: 13.5px; cursor: pointer; min-height: 48px; }
.an-lrow:first-child { border-top: none; }
.an-lrow:hover { background: var(--surface-sunken); }
.an-lrow .cnt { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-dim); }
.an-lrow .cnt b { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.an-lbar { display: flex; gap: 2px; height: 14px; align-items: stretch; }
.an-lbar > i { display: block; border-radius: 0 4px 4px 0; min-width: 4px; }
.an-lbar > i + i { border-radius: 4px; }

/* ---------- Список за цифрой (выезжает справа, на телефоне — снизу) ---------- */
.an-veil { position: fixed; inset: 0; z-index: 92; background: rgba(0,21,61,.36); backdrop-filter: blur(2px); animation: fade .2s both; }
.an-sheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 96vw); background: var(--bg-card);
  border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(16,24,40,.12);
  display: flex; flex-direction: column; animation: slide .25s cubic-bezier(.2,.9,.3,1) both;
}
.an-sheet-h { padding: 22px 24px 14px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; }
.an-sheet-h h3 { font-family: var(--disp); font-size: 18px; font-weight: 700; line-height: 1.3; }
.an-sheet-h .sub { font-size: 12.5px; color: var(--ink-dim); margin-top: 3px; line-height: 1.45; }
.an-sheet-h .tot { font-family: var(--mono); font-weight: 700; font-size: 20px; margin-top: 8px; letter-spacing: -.02em; }
.an-x { margin-left: auto; flex: none; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line-bright);
  background: var(--bg-card); color: var(--ink-dim); display: inline-flex; align-items: center; justify-content: center; }
.an-x:hover { color: var(--ink); border-color: var(--ink-faint); }
.an-sheet-b { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.an-sheet-b .an-row { padding-left: 24px; padding-right: 24px; }
.an-sheet-b .an-empty { margin: 20px 24px; }
/* в выезжающем списке всегда «карточная» раскладка */
.an-sheet .g-pay { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "project amount" "stage amount" "due share"; }
.an-sheet .g-work { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "stage status" "project project" "dates dates" "exec exec"; }
.an-sheet .g-act { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "project owed" "num status" "total paid"; }
.an-sheet .g-pay > .a-share, .an-sheet .g-act > .a-paid, .an-sheet .g-act > .a-owed { text-align: right; }
.an-sheet .an-due { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.an-sheet .lbl { display: inline; }
.an-narrow { display: none; }
.lbl { display: none; color: var(--ink-faint); font-family: var(--body); font-weight: 500; font-size: 12px; margin-right: 5px; }

/* ---------- Компактные виджеты для других экранов (PMAnalyticsWidgets) ---------- */
.an-w { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--an-shadow); }
.an-w-h { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.an-w-h b { font-size: 13.5px; font-weight: 700; }
.an-w-h a { margin-left: auto; font-size: 12.5px; font-weight: 700; }
.an-w-next { margin-top: 10px; font-size: 12.5px; color: var(--ink-dim); }
.an-w-next b { color: var(--ink); font-family: var(--mono); }

/* ============================================================
   Планшет и телефон
   ============================================================ */
@media (max-width: 1100px) {
  .an-cols { grid-template-columns: 1fr; }
  .an-kpis.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-kpis.n4, .an-kpis.n8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-hero-top { grid-template-columns: 1fr; align-items: start; }
  .g-pay { grid-template-columns: 160px minmax(0, 1.2fr) minmax(0, 1fr) 140px;
    grid-template-areas: "due project stage amount" "due project stage share"; }
  .g-pay > .a-share { text-align: right; }
  .an-hrow.g-pay { grid-template-areas: "due project stage amount"; }
  .an-hrow.g-pay > .a-share { display: none; }
  .g-work { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 150px 172px;
    grid-template-areas: "stage project status dates" "exec exec exec exec"; }
  .an-hrow.g-work { grid-template-areas: "stage project status dates"; }
  .an-hrow.g-work > .a-exec { display: none; }
  .g-work > .a-exec:empty { display: none; }
  .g-act { grid-template-columns: 96px minmax(0, 1fr) 120px 120px 120px;
    grid-template-areas: "num project total paid owed" "num status total paid owed"; }
  .an-hrow.g-act { grid-template-areas: "num project total paid owed"; }
  .an-hrow.g-act > .a-status { display: none; }
  .an-mrow { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 124px 84px; }
  .an-mrow > .a-master { display: none; }
}

@media (max-width: 760px) {
  .an-head { gap: 12px; }
  .an-tabs { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .an-tabs::-webkit-scrollbar { display: none; }
  .an-tab { flex: 1 0 auto; justify-content: center; min-height: 44px; padding: 8px 14px; }
  .an-bar { padding: 10px; gap: 10px; }
  .an-bar-lbl { display: none; }
  .an-seg { display: flex; width: 100%; }
  .an-seg button { flex: 1; min-height: 44px; padding: 6px 4px; }
  .an-step { width: 100%; }
  .an-step button { width: 44px; height: 44px; flex: none; }
  .an-step b { flex: 1; min-width: 0; }
  .an-custom { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .an-custom input { font-size: 16px; min-height: 44px; width: 100%; }
  .an-custom .an-go { grid-column: 1 / -1; min-height: 44px; }
  .an-custom > span { display: none; }
  .an-cmp { margin-left: 0; width: 100%; }
  .an-search { font-size: 16px; min-height: 44px; width: 100%; }

  .an-card { padding: 16px 14px; border-radius: 13px; }
  .an-hero { padding: 18px 16px 16px 18px; }
  .an-hero-val { font-size: 32px; }
  .an-kpis, .an-kpis.n3, .an-kpis.n4, .an-kpis.n6, .an-kpis.n8 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .an-kpis.n3 > :first-child:nth-last-child(3) { grid-column: 1 / -1; }
  .an-kpi { padding: 12px 13px; min-height: 44px; }
  .an-kpi .v { font-size: 19px; }
  .an-kpi .v.count { font-size: 26px; }
  .an-legend { gap: 6px; }
  button.an-leg { flex: 1 1 100%; min-height: 44px; }
  button.an-leg .tx { flex: 1; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
  .an-leg.plain { margin-right: 6px; }
  .an-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px; }
  .an-chips::-webkit-scrollbar { display: none; }
  .an-chip { min-height: 44px; padding: 8px 14px; flex: none; }
  .an-card-h .tools { width: 100%; flex-wrap: nowrap; }
  .an-card-h .tools .an-seg { flex: 1; width: auto; min-width: 0; }
  .an-card-h .tools .an-link { flex: none; white-space: nowrap; }
  .an-link { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
  .an-how summary { min-height: 44px; }
  .an-more { min-height: 48px; }

  /* таблицы → карточки */
  .an-hrow { display: none; }
  .an-row { padding: 13px 14px; gap: 5px 12px; }
  .g-pay { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "project amount" "stage amount" "due share"; }
  .g-pay > .a-share { text-align: right; }
  .g-work { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "stage status" "project project" "dates dates" "exec exec"; }
  .g-act { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "project owed" "num status" "total paid"; }
  .g-act > .a-paid, .g-act > .a-owed { text-align: right; }
  .an-due { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
  .lbl { display: inline; }
  .an-foot { padding: 12px 14px; }
  .an-proj { padding: 14px; }
  .an-proj-h .tot { margin-left: 0; width: 100%; }
  .an-issue, .an-todo { padding: 12px 14px; }
  .an-gap { grid-template-columns: 1fr; padding: 14px; }
  .an-mrow { grid-template-columns: minmax(0, 1fr) auto; padding: 13px 14px; }
  .an-mrow > .a-bar { grid-column: 1 / -1; order: 5; }
  .an-mrow > .a-margin { display: none; }
  .an-narrow { display: inline; }
  .an-lrow { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; }
  .an-lrow > .an-lbar { grid-column: 1 / -1; order: 5; }

  .an-sheet { top: auto; left: 0; width: 100%; max-height: 88vh; border-left: none; border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0; animation: an-up .25s cubic-bezier(.2,.9,.3,1) both; }
  .an-sheet-h { padding: 18px 16px 12px; }
  .an-sheet-b .an-row { padding-left: 16px; padding-right: 16px; }
  .an-x { width: 44px; height: 44px; }
}
@keyframes an-up { from { transform: translateY(40px); opacity: 0; } }

/* палец вместо мыши: зоны нажатия не меньше 44 px и на планшете */
@media (pointer: coarse) {
  .an-tab, .an-chip, button.an-leg, .an-link, .an-how summary { min-height: 44px; }
  .an-seg button { min-height: 44px; }
  .an-step button { width: 44px; height: 44px; }
  .an-custom input, .an-search { font-size: 16px; min-height: 44px; }
}

@media print {
  .an-bar, .an-tabs, .an-how, .an-more { display: none !important; }
  .an-card { box-shadow: none; break-inside: avoid; }
}

/* ============================================================
   Шапка кабинета на средних ширинах (общая, не только аналитика)
   С пунктом «Аналитика» меню стало шире: на экранах уже ~1300 px шапка распирала
   страницу вбок (на планшетах 768–1024 это было и до него). Здесь — страховка,
   чтобы раздел не вносил горизонтальную прокрутку. При слиянии блок стоит
   перенести в app.css рядом с правилами .topbar.
   ============================================================ */
@media (min-width: 641px) and (max-width: 1320px) {
  .topbar .ws { display: none; }
}
@media (min-width: 641px) and (max-width: 1200px) {
  .topbar { gap: 12px; padding: 0 18px; }
  .topbar .brand-mark { font-size: 0; gap: 0; flex: none; }   /* остаётся знак-логотип */
  .topbar .spacer { display: none; }
  .topbar .nav {
    flex: 1 1 0; min-width: 0; margin-left: 4px; padding-right: 22px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  }
  .topbar .nav::-webkit-scrollbar { display: none; }
  .topbar .nav a { flex: none; white-space: nowrap; }
  .topbar .nav a.on { background: rgba(10,77,166,.10); }      /* как на телефоне: пилюля при прокрутке едет криво */
  .topbar .nav .slide-pill { display: none; }
  .topbar .user { flex: none; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .btn-ghost { flex: none; }
}

/* ---- content.css ---- */
/* Справочные модули кабинета: материалы, база знаний, шаблоны сообщений, наборы работ,
   предложенные работы. Здесь только то, чего нет в app.css; цвета, кнопки (.btn-amber,
   .btn-ghost), чипы статусов (.chip), поля (.field), пустые состояния (.empty) и окна
   (.modal) — общие. Все классы с префиксом ct-. */

/* ---------- Панель над списком: поиск и фильтры ---------- */
.ct-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 16px; }
.ct-search { position: relative; flex: 1 1 260px; min-width: 0; max-width: 460px; }
.ct-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }
.ct-search input {
  width: 100%; height: 42px; padding: 0 12px 0 38px; border: 1px solid var(--line-bright); border-radius: 10px;
  background: var(--bg-card); color: var(--ink); font: 15px var(--body); outline: none;
}
.ct-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.12); }

.ct-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; min-width: 0; }
.ct-chips::-webkit-scrollbar { display: none; }
.ct-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 13px;
  border: 1px solid var(--line-bright); border-radius: 999px; background: var(--bg-card);
  color: var(--ink-dim); font: 600 13px var(--body); white-space: nowrap;
}
.ct-chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.ct-chip.on { color: var(--accent); border-color: var(--accent); background: var(--client-soft); }
.ct-chip i { font: 500 11.5px var(--mono); font-style: normal; opacity: .75; }

/* Переключатель из двух-трёх пунктов */
.ct-seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 10px; max-width: 100%; }
.ct-seg button, .ct-seg a {
  border: 1px solid transparent; background: none; border-radius: 8px; padding: 7px 13px;
  font: 600 13px var(--body); color: var(--ink-dim); white-space: nowrap;
}
.ct-seg .on { color: var(--accent); background: var(--bg-card); border-color: var(--line-bright); box-shadow: 0 1px 2px rgba(16,24,40,.12); }

/* ---------- Карточка-список ---------- */
.ct-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 3px rgba(16,24,40,.06); overflow: hidden; }
.ct-card + .ct-card { margin-top: 14px; }
.ct-card-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface-sunken);
  border-bottom: 1px solid var(--line); font: 700 11.5px var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--accent);
}
.ct-card-head span { font: 500 12px var(--mono); color: var(--ink-faint); letter-spacing: 0; }
.ct-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line); min-width: 0; }
.ct-row:first-child, .ct-card-head + .ct-row { border-top: none; }
.ct-row.tap { cursor: pointer; }
.ct-row.tap:hover { background: var(--bg-raise); }
.ct-row.dim { opacity: .55; }
.ct-main { flex: 1; min-width: 0; }
.ct-title { font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
.ct-sub { font-size: 12px; color: var(--ink-faint); margin-top: 2px; overflow-wrap: anywhere; }
.ct-sub b { color: var(--ink-dim); font-weight: 600; }
.ct-num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-prices { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; font-size: 13px; }
.ct-prices .lbl { font: 600 10px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-right: 6px; }
.ct-client { color: var(--client); font-weight: 600; }
.ct-master { color: var(--master); }
.ct-margin { color: var(--margin); }
.ct-note { font-size: 12.5px; color: var(--ink-dim); margin-top: 4px; }
.ct-hint { font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; }
.ct-go { color: var(--ink-faint); display: inline-flex; flex: none; }
.ct-link { background: none; border: none; padding: 0; color: var(--accent); font: 600 13px var(--body); cursor: pointer; }
.ct-link:hover { text-decoration: underline; }

/* Цена, которую можно поправить прямо в списке */
.ct-price-btn { border: 1px dashed transparent; background: none; border-radius: 6px; padding: 2px 6px; font: inherit; color: inherit; }
.ct-price-btn:hover { border-color: var(--line-bright); background: var(--bg-raise); }
.ct-price-input { width: 96px; height: 30px; padding: 0 8px; border: 1px solid var(--accent); border-radius: 6px; font: 13px var(--mono); text-align: right; outline: none; color: var(--ink); background: var(--bg-card); }

.ct-thumb {
  width: 44px; height: 44px; flex: none; border-radius: 9px; object-fit: cover; background: var(--surface-sunken);
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-faint);
}
.ct-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none;
  border: 1px solid transparent; border-radius: 9px; background: none; color: var(--ink-faint);
}
.ct-icon-btn:hover { color: var(--accent); border-color: var(--line-bright); background: var(--bg-card); }
.ct-icon-btn.danger:hover { color: var(--red); }

/* Строка спецификации объекта: отметка · название · статус · сумма */
.ct-srow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(86px, auto); align-items: center; gap: 4px 12px; padding: 11px 16px; border-top: 1px solid var(--line); }
.ct-card-head + .ct-srow { border-top: none; }
.ct-srow.done .ct-title { color: var(--ink-dim); }
.ct-srow .ct-main:hover .ct-title { color: var(--accent); }

/* ---------- Итоги (спецификация объекта) ---------- */
.ct-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ct-stat { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.ct-stat .k { font: 700 11px var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.ct-stat .v { font: 600 21px var(--mono); margin-top: 5px; color: var(--ink); white-space: nowrap; }
.ct-stat .s { font-size: 12px; color: var(--ink-dim); margin-top: 3px; }
.ct-stat.ok .v { color: var(--green); }
.ct-stat.todo .v { color: var(--amber-deep); }
.ct-stat .progress { margin-top: 9px; }
.ct-stat .progress > i { background: linear-gradient(90deg, #17804a, var(--green)); }

/* Статус закупки */
.ct-status {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; flex: none;
  border: 1px solid var(--line-bright); border-radius: 999px; background: var(--bg-card);
  font: 700 11.5px var(--body); letter-spacing: .03em; color: var(--ink-dim); white-space: nowrap;
}
.ct-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
button.ct-status:hover { border-color: currentColor; }
.ct-status.need { color: var(--amber-deep); border-color: rgba(224,138,0,.4); background: rgba(224,138,0,.08); }
.ct-status.ordered { color: var(--accent); border-color: rgba(10,77,166,.35); background: var(--client-soft); }
.ct-status.bought { color: var(--green); border-color: rgba(31,157,87,.4); background: rgba(31,157,87,.08); }
.ct-status.onsite { color: var(--violet); border-color: rgba(105,65,198,.35); background: var(--master-soft); }
.ct-status.pending { color: var(--amber-deep); border-color: rgba(224,138,0,.4); background: rgba(224,138,0,.08); }
.ct-status.accepted { color: var(--green); border-color: rgba(31,157,87,.4); background: rgba(31,157,87,.08); }
.ct-status.rejected { color: var(--red); border-color: rgba(217,45,32,.35); background: rgba(217,45,32,.06); }
.ct-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font: 600 11px var(--body); color: var(--ink-dim); background: var(--surface-sunken); border: 1px solid var(--line); white-space: nowrap; }
.ct-tag.client { color: var(--violet); background: var(--master-soft); border-color: rgba(105,65,198,.25); }

/* Круглая отметка «куплено» */
.ct-check {
  width: 30px; height: 30px; flex: none; border-radius: 50%; border: 2px solid var(--line-bright);
  background: var(--bg-card); color: transparent; display: grid; place-items: center; padding: 0;
}
.ct-check:hover { border-color: var(--green); }
.ct-check.on { background: var(--green); border-color: var(--green); color: #fff; }
.ct-check:disabled { opacity: 1; cursor: default; }

/* Выбор из нескольких крупных вариантов в окне (статус закупки и т. п.) */
.ct-options { display: grid; gap: 8px; }
.ct-options button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; text-align: left;
  border: 1px solid var(--line-bright); border-radius: 10px; background: var(--bg-card); font: 600 14.5px var(--body); color: var(--ink);
}
.ct-options button:hover, .ct-options button.on { border-color: var(--accent); background: var(--client-soft); }

/* ---------- Формы: то, чего нет у .field в app.css ---------- */
.ct-form .field textarea, .ct-form .field select, .ct-input {
  width: 100%; background: var(--bg); border: 1px solid var(--line-bright); border-radius: 10px;
  padding: 12px 14px; color: var(--ink); font: 15px var(--body); outline: none;
}
.ct-form .field textarea { min-height: 110px; resize: vertical; line-height: 1.5; display: block; }
.ct-form .field textarea:focus, .ct-form .field select:focus, .ct-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.15); }
.ct-form .field .ct-under { font-size: 12px; color: var(--ink-faint); margin-top: 6px; }
.modal.ct-wide { max-width: 660px; }
.modal .ct-row3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; }
.modal .ct-danger { margin-right: auto; }
.ct-stepper { display: flex; align-items: stretch; gap: 6px; }
.ct-stepper button { width: 46px; flex: none; border: 1px solid var(--line-bright); border-radius: 10px; background: var(--bg-card); font: 600 20px var(--body); color: var(--ink-dim); }
.ct-stepper button:hover { border-color: var(--accent); color: var(--accent); }
.ct-stepper input { text-align: center; font-family: var(--mono); }
.ct-photo { display: flex; align-items: center; gap: 12px; }
.ct-photo .ct-thumb { width: 64px; height: 64px; }
.ct-pick { max-height: min(46vh, 380px); overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.ct-pick .ct-row { padding: 9px 12px; }
.ct-pick .ct-row.on { background: var(--client-soft); }
.ct-pick-empty { padding: 22px 14px; text-align: center; color: var(--ink-faint); font-size: 13px; }
.ct-qty { width: 74px; height: 36px; padding: 0 8px; border: 1px solid var(--line-bright); border-radius: 8px; font: 14px var(--mono); text-align: center; outline: none; background: var(--bg-card); color: var(--ink); flex: none; }
.ct-qty:focus { border-color: var(--accent); }
.ct-x { font: 500 12.5px var(--mono); color: var(--ink-faint); flex: none; }

.empty .ct-empty-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 20px; }
.ct-sec { font: 700 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 22px 0 10px; }
.ct-sec:first-child { margin-top: 0; }

/* Кнопка добавления под большим пальцем — только на телефоне */
.ct-fab { display: none; }

/* ---------- Сетка карточек (наборы работ, предложения) ---------- */
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.ct-panel { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 3px rgba(16,24,40,.06); padding: 16px 18px; min-width: 0; }
.ct-panel h3 { font: 600 16px var(--disp); color: var(--ink); overflow-wrap: anywhere; }
.ct-panel-head { display: flex; align-items: flex-start; gap: 10px; }
.ct-panel-head > :first-child { flex: 1; min-width: 0; }
.ct-priceline { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 8px; font: 500 12.5px var(--mono); color: var(--ink-dim); }
.ct-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ct-actions .btn-amber { padding: 9px 16px; font-size: 13.5px; box-shadow: none; }
.ct-actions .btn-ghost { padding: 9px 14px; }
.ct-lines { margin-top: 12px; border-top: 1px solid var(--line); }
.ct-line { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ct-line:last-child { border-bottom: none; }
.ct-line .nm { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ct-line.off .nm { color: var(--ink-faint); text-decoration: line-through; }
.ct-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; margin-top: 10px; }
.ct-kv dt { color: var(--ink-faint); }
.ct-kv dd { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

/* ---------- База знаний ---------- */
.ct-kb { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; }
.ct-kb-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 76px; }
.ct-kb-nav button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none;
  border-radius: 8px; padding: 9px 12px; font: 600 13.5px var(--body); color: var(--ink-dim);
}
.ct-kb-nav button:hover { background: var(--bg-card); color: var(--ink); }
.ct-kb-nav button.on { background: var(--client-soft); color: var(--accent); }
.ct-kb-nav button span { margin-left: auto; font: 500 11.5px var(--mono); color: var(--ink-faint); }
.ct-kb-nav .ct-link { padding: 9px 12px; text-align: left; }
.ct-kb-item { display: block; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--ink); }
.ct-kb-item:first-child { border-top: none; }
.ct-kb-item:hover { background: var(--bg-raise); }
.ct-kb-item h4 { font: 600 15.5px var(--disp); display: flex; align-items: center; gap: 7px; }
.ct-kb-item h4 svg { color: var(--amber); flex: none; }
.ct-kb-item p { font-size: 13.5px; color: var(--ink-dim); margin-top: 4px; line-height: 1.5; overflow-wrap: anywhere; }
.ct-kb-item .meta, .ct-article-meta { font-size: 12px; color: var(--ink-faint); margin-top: 6px; }

.ct-article { max-width: 760px; }
.ct-article-body { font-size: 16px; line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; }
.ct-article-body > :first-child { margin-top: 0; }
.ct-article-body h2 { font: 600 22px var(--disp); margin: 28px 0 10px; line-height: 1.3; }
.ct-article-body h3 { font: 600 18px var(--disp); margin: 24px 0 8px; line-height: 1.3; }
.ct-article-body h4 { font: 700 15.5px var(--body); margin: 20px 0 6px; }
.ct-article-body p { margin: 0 0 14px; }
.ct-article-body ul, .ct-article-body ol { margin: 0 0 14px; padding-left: 24px; }
.ct-article-body li { margin-bottom: 6px; }
.ct-article-body a { text-decoration: underline; text-underline-offset: 2px; }
.ct-article-body blockquote { margin: 0 0 14px; padding: 12px 16px; border-left: 3px solid var(--amber); background: rgba(224,138,0,.07); border-radius: 0 10px 10px 0; }
.ct-article-body hr { border: none; border-top: 1px solid var(--line-bright); margin: 22px 0; }
.ct-article-body img { display: block; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); margin: 4px 0 14px; }
.ct-video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 20px; border-radius: 12px; overflow: hidden; background: #0b1730; }
.ct-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ct-video-link { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 11px 16px; border: 1px solid var(--line-bright); border-radius: 10px; background: var(--bg-card); font-weight: 600; }

.ct-editor { max-width: 860px; }
.ct-editor-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ct-editor-tools button { min-width: 40px; height: 38px; padding: 0 11px; border: 1px solid var(--line-bright); border-radius: 8px; background: var(--bg-card); font: 600 13px var(--body); color: var(--ink-dim); }
.ct-editor-tools button:hover { color: var(--accent); border-color: var(--accent); }
.ct-editor textarea.ct-body { min-height: 340px; font-size: 15.5px; background: var(--bg-card); }
.ct-preview { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-card); padding: 18px 20px; min-height: 340px; }
.ct-editor-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.ct-check-line { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-dim); }
.ct-check-line input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------- Шаблоны сообщений ---------- */
.ct-two { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 22px; align-items: start; }
.ct-tpl { display: block; width: 100%; text-align: left; border: none; background: none; padding: 13px 16px; border-top: 1px solid var(--line); color: var(--ink); }
.ct-tpl:first-child { border-top: none; }
.ct-tpl:hover { background: var(--bg-raise); }
.ct-tpl.on { background: var(--client-soft); box-shadow: inset 3px 0 0 var(--accent); }
.ct-tpl p { font-size: 12.5px; color: var(--ink-dim); margin-top: 3px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-tpl .tags { display: flex; gap: 6px; margin-top: 7px; }
.ct-bench { position: sticky; top: 76px; }
.ct-bubble-wrap { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-top: 14px; }
.ct-bubble {
  max-width: 520px; background: #E7F6E1; border-radius: 4px 14px 14px 14px; padding: 11px 14px; font-size: 14.5px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; color: #14181F; box-shadow: 0 1px 1px rgba(16,24,40,.08);
}
.ct-bubble.email { background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px; max-width: none; }
.ct-bubble .subj { display: block; font-weight: 700; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.ct-bubble mark { background: none; color: inherit; border-bottom: 2px dashed var(--amber); padding: 0 1px; }
.ct-bubble mark.miss { background: rgba(224,138,0,.18); border-radius: 4px; border-bottom: none; padding: 1px 4px; color: var(--amber-deep); font-weight: 600; }
.ct-meter { font: 500 12px var(--mono); color: var(--ink-faint); margin-top: 9px; }
.ct-vars { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-var { border: 1px solid rgba(10,77,166,.25); background: var(--client-soft); color: var(--accent); border-radius: 7px; padding: 6px 10px; font: 600 12.5px var(--body); }
.ct-var:hover { border-color: var(--accent); }
.ct-fill { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 12px; margin-top: 12px; }
.ct-fill label { display: block; font: 600 11.5px var(--body); color: var(--ink-faint); margin-bottom: 4px; }
.ct-fill input, .ct-fill select { width: 100%; height: 40px; padding: 0 11px; border: 1px solid var(--line-bright); border-radius: 9px; background: var(--bg-card); font: 14px var(--body); color: var(--ink); outline: none; }
.ct-fill input:focus, .ct-fill select:focus { border-color: var(--accent); }
.ct-fill input.miss { border-color: rgba(224,138,0,.6); background: rgba(224,138,0,.05); }
.ct-back { display: none; }

/* ---------- Планшет и телефон ---------- */
@media (max-width: 900px) {
  .ct-kb { grid-template-columns: 1fr; gap: 12px; }
  .ct-kb-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; padding-bottom: 2px; }
  .ct-kb-nav::-webkit-scrollbar { display: none; }
  .ct-kb-nav button { width: auto; flex: none; white-space: nowrap; border: 1px solid var(--line-bright); border-radius: 999px; background: var(--bg-card); padding: 7px 13px; font-size: 13px; }
  .ct-kb-nav button.on { border-color: var(--accent); }
  .ct-kb-nav button span { margin-left: 2px; }
  .ct-kb-nav .ct-link { flex: none; white-space: nowrap; }
  .ct-two { grid-template-columns: 1fr; }
  .ct-two[data-pane="detail"] > .ct-pane-list, .ct-two[data-pane="list"] > .ct-pane-detail { display: none; }
  .ct-bench { position: static; }
  .ct-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; }
}
@media (max-width: 640px) {
  .ct-search { max-width: none; flex-basis: 100%; }
  .ct-search input { height: 44px; font-size: 16px; }   /* 16px — iOS не увеличивает страницу при вводе */
  .ct-form .field textarea, .ct-form .field select, .ct-input, .ct-fill input, .ct-fill select, .ct-qty, .ct-price-input { font-size: 16px; }
  .ct-row { padding: 12px 13px; gap: 10px; }
  /* строка с ценами: на телефоне цены уходят второй строкой, название не сжимается */
  .ct-row.stack { flex-wrap: wrap; }
  .ct-row.stack .ct-main { flex: 1 1 60%; }
  .ct-row.stack .ct-prices { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 2px 18px; }
  .ct-row.stack .ct-thumb + .ct-main + .ct-prices { padding-left: 54px; }
  .ct-row.stack .ct-go { display: none; }
  .ct-srow { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "check main main" ". status sum"; padding: 12px 13px; gap: 8px 10px; }
  .ct-srow .ct-check { grid-area: check; align-self: start; }
  .ct-srow .ct-main { grid-area: main; }
  .ct-srow .ct-status { grid-area: status; justify-self: start; }
  .ct-srow .ct-prices { grid-area: sum; }
  .ct-card-head { padding: 9px 13px; }
  .ct-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ct-stat { padding: 11px 12px; }
  .ct-stat .v { font-size: 17px; }
  .ct-stat.full { grid-column: 1 / -1; }
  .modal .row2.ct-pair { grid-template-columns: 1fr 1fr; }      /* короткие поля остаются парой и на телефоне */
  .modal .row2.ct-pair.q { grid-template-columns: 1.5fr 1fr; }
  .ct-stepper button { width: 40px; }
  .modal .ct-row3 { grid-template-columns: 1fr 1fr; }
  .modal .ct-row3 > :first-child { grid-column: 1 / -1; }
  .modal .ct-danger { margin-right: 0; }
  .ct-status { min-height: 34px; }
  .ct-check { width: 34px; height: 34px; }
  .ct-panel { padding: 14px; }
  .ct-actions > * { flex: 1 1 auto; }
  .ct-article-body { font-size: 16.5px; }
  .ct-article-body h2 { font-size: 20px; }
  .ct-preview { padding: 14px; }
  .ct-editor-foot .btn-amber { flex: 1; }
  .ct-fill { grid-template-columns: 1fr; }
  .ct-head-add { display: none; }
  .ct-fab {
    display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 14px; bottom: 16px; z-index: 40;
    height: 52px; padding: 0 20px; border: none; border-radius: 26px; background: var(--accent); color: #fff;
    font: 800 15px var(--body); box-shadow: 0 10px 24px rgba(10,77,166,.35);
  }
  .ct-has-fab { padding-bottom: 76px; }
}

/* ---- accounting.css ---- */
/* Раздел «Бухгалтерия» (#/accounting). Опирается на переменные кабинета из app.css.
   Широкие таблицы на узком экране превращаются в карточки; поля ввода — 16 px,
   всё нажимаемое — не меньше 44 px по высоте. */

.acc { display: flex; flex-direction: column; gap: 18px; }
.acc .acc-head { margin-bottom: 0; align-items: center; }
.acc-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Вкладки раздела ---------- */
.acc-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.acc-tabs::-webkit-scrollbar { display: none; }
.acc-tabs a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-size: 14px; font-weight: 600; color: var(--ink-dim); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.acc-tabs a:hover { color: var(--ink); }
.acc-tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
.acc-subtabs { display: flex; gap: 8px; flex-wrap: wrap; }
.acc-subtabs a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-bright); background: var(--bg-card); color: var(--ink-dim);
  font-size: 13.5px; font-weight: 600;
}
.acc-subtabs a.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Кнопки ---------- */
.acc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px;
  padding: 0 14px; border-radius: 9px; border: 1px solid var(--line-bright); background: var(--bg-card);
  color: var(--ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.acc-btn:hover { border-color: var(--accent); color: var(--accent); }
.acc-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.acc-btn.primary:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.acc-btn.sm { min-height: 34px; padding: 0 11px; font-size: 12.5px; }
/* быстрые кнопки печати: длинное название документа переносится, а не уходит за край экрана */
.acc-quick .acc-btn { max-width: 100%; height: auto; white-space: normal; text-align: left; line-height: 1.3; padding-top: 7px; padding-bottom: 7px; }
.acc-btn.danger:hover { border-color: var(--red); color: var(--red); }
.acc-btn svg { flex: none; }
.acc-link { color: var(--accent); font-weight: 600; cursor: pointer; background: none; border: none; padding: 0; font-size: inherit; text-align: left; }

/* ---------- Панели, плитки показателей ---------- */
.acc-panel {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16,24,40,.06);
}
.acc-panel > header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.acc-panel > header h3 { font-size: 15px; font-weight: 700; margin: 0; }
.acc-panel > header .sub { font-size: 12.5px; color: var(--ink-faint); }
.acc-panel > .body { padding: 16px 18px; }
.acc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.acc-kpi {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.acc-kpi .l { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.acc-kpi .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
.acc-kpi .s { font-size: 12px; color: var(--ink-faint); line-height: 1.35; }
.acc-kpi.good .v { color: var(--margin); }
.acc-kpi.warn .v { color: var(--amber-deep); }
.acc-kpi.bad .v { color: var(--red); }

/* ---------- Фильтры и период ---------- */
.acc-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.acc-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); min-width: 0; }
.acc-filters select, .acc-filters input {
  min-height: 40px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line-bright);
  background: var(--bg-card); color: var(--ink); font-family: var(--body); font-size: 14px;
  font-weight: 500; letter-spacing: 0; text-transform: none; max-width: 100%; outline: none;
}
.acc-filters select:focus, .acc-filters input:focus { border-color: var(--accent); }
.acc-period { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acc-period .seg { display: inline-flex; border: 1px solid var(--line-bright); border-radius: 9px; overflow: hidden; background: var(--bg-card); }
.acc-period .seg button { min-height: 40px; padding: 0 13px; border: none; background: none; color: var(--ink-dim); font-size: 13.5px; font-weight: 600; }
.acc-period .seg button.on { background: var(--accent); color: #fff; }
.acc-period .lbl { font-weight: 700; font-size: 14.5px; min-width: 128px; text-align: center; }
.acc-period .pnav { width: 40px; padding: 0; flex: none; }

/* ---------- Таблицы → карточки ---------- */
.acc-tablewrap { overflow-x: auto; }
.page table.acc-t { width: 100%; border-collapse: collapse; font-size: 13.5px; display: table; }
.acc-t th {
  text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); background: var(--surface-sunken); white-space: nowrap;
}
.acc-t td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.acc-t .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc-t .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc-t .act { text-align: right; white-space: nowrap; }
/* «Объект» в кассе: строка названия не переносится — иначе одна операция растягивалась на 4–5 строк */
.acc-t td.obj { width: 22%; max-width: 1px; }      /* max-width у ячейки — чтобы многоточие сработало */
.acc-t td.note { width: 28%; }
.acc-t td.auth { white-space: nowrap; }
.acc-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.acc-t tfoot td { font-weight: 700; background: var(--surface-sunken); border-top: 1.5px solid var(--line-bright); }
.acc-t tr.clickable { cursor: pointer; }
.acc-t tr.clickable:hover td { background: var(--bg-raise); }
.acc-t tr.cancelled td { color: var(--ink-faint); }
.acc-t tr.cancelled td.num, .acc-t tr.cancelled td.main { text-decoration: line-through; }
.acc-t tr.virtual td { background: rgba(224,138,0,.06); }
.acc-t .dim { color: var(--ink-faint); font-size: 12.5px; }
.acc-t .main { font-weight: 600; color: var(--ink); }
.acc-t select { min-height: 34px; border-radius: 8px; border: 1px solid var(--line-bright); background: var(--bg-card); padding: 0 8px; font-family: var(--body); font-size: 13px; color: var(--ink); max-width: 190px; }
.acc-in { color: var(--margin); }
.acc-out { color: var(--red); }
.acc-empty { padding: 30px 18px; text-align: center; color: var(--ink-faint); font-size: 13.5px; line-height: 1.5; }
.acc-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 2px 9px; border: 1px solid var(--line-bright); color: var(--ink-dim); white-space: nowrap; }
.acc-tag.issued { color: var(--accent); border-color: rgba(10,77,166,.4); background: rgba(10,77,166,.07); }
.acc-tag.signed { color: var(--violet); border-color: rgba(105,65,198,.4); background: rgba(105,65,198,.08); }
.acc-tag.paid { color: var(--green); border-color: rgba(31,157,87,.4); background: rgba(31,157,87,.09); }
.acc-tag.cancelled { color: var(--red); border-color: rgba(217,45,32,.35); }
.acc-tag.warn { color: var(--amber-deep); border-color: rgba(224,138,0,.4); background: rgba(224,138,0,.09); }

/* ---------- Подсказки и предупреждения ---------- */
.acc-note { font-size: 13px; line-height: 1.5; color: var(--ink-dim); background: var(--bg-raise); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; }
.acc-note.warn { background: rgba(224,138,0,.09); border-color: rgba(224,138,0,.35); color: var(--ink); }
.acc-note b { color: var(--ink); }
.acc-foot { font-size: 12px; color: var(--ink-faint); line-height: 1.5; max-width: 860px; }
.acc-hint { font-size: 12px; color: var(--ink-faint); margin-top: 5px; line-height: 1.4; }

/* ---------- Кассы ---------- */
.acc-cash { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.acc-cash .c { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; font-family: var(--body); color: var(--ink); min-height: 44px; }
.acc-cash .c.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.12); }
.acc-cash .c.off { opacity: .55; }
.acc-cash .n { font-weight: 700; font-size: 14px; }
.acc-cash .o { font-size: 12px; color: var(--ink-faint); }
.acc-cash .b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 19px; margin-top: 4px; }

/* ---------- Карточки заказчиков и юрлиц ---------- */
.acc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.acc-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; font-family: var(--body); color: var(--ink); transition: border-color .15s; }
.acc-card:hover, .acc-card.on { border-color: var(--accent); }
.acc-card .t { font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.acc-card .m { font-size: 12.5px; color: var(--ink-dim); line-height: 1.45; overflow-wrap: anywhere; }

/* ---------- Формы ---------- */
.acc-form .field { margin-bottom: 14px; }
.acc-form input, .acc-form select, .acc-form textarea, .acc-grid input, .acc-grid select, .acc-grid textarea {
  width: 100%; min-height: 44px; font-size: 16px; font-family: var(--body); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-bright); border-radius: 10px; padding: 10px 13px; outline: none;
}
.acc-form textarea, .acc-grid textarea { min-height: 76px; resize: vertical; line-height: 1.4; }
.acc-form input:focus, .acc-form select:focus, .acc-form textarea:focus,
.acc-grid input:focus, .acc-grid select:focus, .acc-grid textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.15); }
.acc-form .check input, .acc-grid .check input { width: 20px; min-height: 20px; height: 20px; padding: 0; }
.acc-form .check, .acc-grid .check { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 14px; color: var(--ink-dim); margin: 0 0 8px; }
.acc-form .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line-bright); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.acc-form .seg button { min-height: 44px; border: none; background: var(--bg); color: var(--ink-dim); font-size: 14px; font-weight: 600; }
.acc-form .seg button.on { background: var(--accent); color: #fff; }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 16px; }
.acc-grid .wide { grid-column: 1 / -1; }
.acc-grid h4 { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin: 14px 0 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.acc-grid h4:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.modal:has(.acc-form) { max-width: 560px; }
.modal:has(.acc-form) .actions button { min-height: 44px; }

/* ---------- Нумерация документов: список видов и окно, где номер собирают из частей ---------- */
.acc-numlist { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-card); }
.acc-numrow {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 8px 14px;
  background: none; border: none; border-top: 1px solid var(--line); font-family: var(--body);
  font-size: 14px; color: var(--ink); text-align: left;
}
.acc-numrow:first-child { border-top: none; }
button.acc-numrow:hover { background: var(--bg-raise); }
button.acc-numrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.acc-numrow .t { flex: 1; min-width: 0; font-weight: 600; line-height: 1.35; }
.acc-numrow .n { flex: 0 0 220px; min-width: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; overflow-wrap: anywhere; }
.acc-numrow .go { flex: 0 0 104px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--accent); font-size: 13px; font-weight: 600; white-space: nowrap; }
.acc-numrow.head { min-height: 0; padding: 9px 14px; background: var(--surface-sunken); }
.acc-numrow.head span { font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }

.acc-num-doc { position: relative; z-index: 2; margin: -12px 0 14px; font-size: 13.5px; line-height: 1.4; color: var(--ink-dim); }
/* Пример номера всегда на виду: прилипает к верху окна, пока листают настройки. Прилипает он
   ниже верхнего поля окна, поэтому сплошная тень вверх закрывает то, что проезжает над ним
   (название документа стоит выше тени — z-index у .acc-num-doc). */
.acc-num-ex {
  position: sticky; top: 0; z-index: 1; display: flex; flex-direction: column; gap: 3px;
  margin-bottom: 16px; padding: 11px 14px 12px; border-radius: 12px;
  background: #EEF4FC; border: 1px solid rgba(10,77,166,.22); box-shadow: 0 -30px 0 var(--bg-card);
}
.acc-num-ex .l { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.acc-num-ex .v { min-height: 29px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--navy); overflow-wrap: anywhere; }
.modal:has(.acc-num-ex) { scroll-padding-top: 96px; }
.acc-num-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-num-presets button {
  min-width: 48px; min-height: 44px; max-width: 100%; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--line-bright);
  background: var(--bg); color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 600; overflow-wrap: anywhere;
}
.acc-num-presets button:hover { border-color: var(--accent); color: var(--accent); }
.acc-num-presets button.on { border-color: var(--accent); background: rgba(10,77,166,.08); color: var(--accent); }
.acc-num .seg { margin-bottom: 0; }
.acc-num .seg button { min-width: 0; padding: 0 4px; }
.acc-num .seg button + button { border-left: 1px solid var(--line-bright); }
.acc-num .seg button.on + button, .acc-num .seg button.on { border-left-color: var(--accent); }
.acc-num .seg.two button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; padding: 6px 4px; line-height: 1.15; }
.acc-num .seg.two b { font-family: var(--mono); font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.acc-num .seg.two i { font-style: normal; font-size: 11.5px; font-weight: 600; }
.acc-num .seg.two [data-ns] b { font-size: 20px; line-height: 1; }
.acc-switch { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0 0 14px; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink); cursor: pointer; align-self: end; }
.acc-form .acc-switch input { position: absolute; left: 0; top: 50%; width: 46px; height: 28px; min-height: 0; margin: -14px 0 0; padding: 0; opacity: 0; cursor: pointer; }
.acc-switch .tr { flex: none; position: relative; width: 46px; height: 28px; border-radius: 999px; background: var(--line-bright); transition: background .15s; }
.acc-switch .tr::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.25); transition: transform .15s; }
.acc-switch input:checked + .tr { background: var(--accent); }
.acc-switch input:checked + .tr::after { transform: translateX(18px); }
.acc-switch input:focus-visible + .tr { box-shadow: 0 0 0 3px rgba(10,77,166,.22); }
.acc-switch .dim { display: block; font-size: 12px; font-weight: 500; color: var(--ink-faint); }
.acc-num-custom { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 14px; border-radius: 12px; border: 1px dashed var(--line-bright); background: var(--bg-raise); }
.acc-num-custom .h { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.acc-num-custom .h b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.acc-num-custom p { font-size: 13px; line-height: 1.45; color: var(--ink-dim); }
.acc-num-back { margin: -4px 0 12px; }
.acc-num-back .acc-link { min-height: 44px; }

/* ---------- Предпросмотр документа ---------- */
.acc-doc { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
.acc-doc .side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; }
.acc-doc .sheet { min-width: 0; overflow-x: auto; }
.acc-doc .side .acc-btn { width: 100%; min-height: 44px; }

@media (max-width: 900px) {
  .acc-doc { grid-template-columns: 1fr; }
  .acc-doc .side { position: static; }
}

@media (max-width: 720px) {
  .acc { gap: 14px; }
  .acc-btn { min-height: 44px; }
  .acc-btn.sm { min-height: 44px; padding: 0 14px; font-size: 13.5px; }
  .acc-subtabs a { min-height: 44px; }
  .acc-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .acc-kpi { padding: 12px 13px; }
  .acc-kpi .v { font-size: 16px; }
  .acc-kpi .l { font-size: 10.5px; }
  .acc-filters { gap: 8px; }
  .acc-filters label { flex: 1 1 46%; }
  .acc-filters select, .acc-filters input { min-height: 44px; font-size: 16px; width: 100%; }
  .acc-period { width: 100%; justify-content: space-between; }
  .acc-period .seg button, .acc-period .pnav { min-height: 44px; }
  .acc-period .pnav { width: 44px; }
  .acc-period .lbl { flex: 1; min-width: 0; }
  .acc-period .seg { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .acc-panel > header { padding: 12px 14px; }
  .acc-panel > .body { padding: 14px; }

  /* таблица → стопка карточек: шапка скрыта, подпись колонки берётся из data-label */
  .acc-tablewrap { overflow-x: visible; }
  .page table.acc-t, .acc-t tbody, .acc-t tfoot { display: block; width: 100%; }
  .acc-t thead { display: none; }
  .acc-t tr { display: block; padding: 12px 14px; border-top: 1px solid var(--line); }
  .acc-t tbody tr:first-child { border-top: none; }
  .acc-t td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 3px 0; border: none; text-align: right; white-space: normal; }
  .acc-t td::before { content: attr(data-label); flex: none; max-width: 46%; text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); font-family: var(--body); }
  .acc-t td.main { display: block; text-align: left; font-size: 14.5px; padding-bottom: 6px; }
  .acc-t td.main::before, .acc-t td.act::before { content: none; }
  .acc-t td.act { justify-content: flex-end; padding-top: 8px; flex-wrap: wrap; }
  .acc-t td:empty, .acc-t td.skip { display: none; }
  .acc-t tfoot tr { background: var(--surface-sunken); }
  .acc-t tfoot td { background: none; border: none; }
  .acc-t select { min-height: 44px; font-size: 16px; max-width: 60%; }
  .acc-t tr.clickable:hover td { background: none; }
}

@media (max-width: 330px) {
  .acc-kpis { grid-template-columns: 1fr; }
}
/* телефон: таблицы — карточками, названию объекта есть где переноситься */
@media (max-width: 720px) {
  /* нумерация: название документа — строкой, под ним следующий номер и «Настроить» */
  .acc-numrow { flex-wrap: wrap; gap: 2px 12px; padding: 10px 14px; }
  .acc-numrow.head { display: none; }
  .acc-numrow.head + .acc-numrow { border-top: none; }
  .acc-numrow .t { flex: 1 1 100%; }
  .acc-numrow .n { flex: 1 1 0; }
  .acc-numrow .n::before { content: "следующий № "; font-family: var(--body); font-size: 12px; font-weight: 500; color: var(--ink-faint); }
  .acc-numrow .go { flex: none; min-height: 30px; }
  .acc-num-ex .v { font-size: 22px; }
  .acc-t td.obj, .acc-t td.note { width: auto; max-width: none; }
  .acc-t td.obj .acc-clip { white-space: normal; }
  .acc-t td.note .acc-clamp2 { display: block; }
  .acc-t td.auth { white-space: normal; }
}

/* ---- crm.css ---- */
/* CRM: сделки, клиенты, звонки и встречи. Только то, чего нет в app.css;
   цвета и шрифты — переменные кабинета. Десктоп-first, ниже — планшет и телефон. */

/* ---------- общее ---------- */
.page.crm-wide { max-width: none; padding: 22px 24px 24px; }
.crm-screen { display: flex; flex-direction: column; height: calc(100dvh - 60px - 46px); min-height: 440px; }
.crm-screen.as-list, body.has-side .crm-screen.as-list { height: auto; min-height: 0; }
/* с боковой панелью разделов верхней полосы нет — её высота достаётся доске */
@media (min-width: 641px) { body.has-side .crm-screen { height: calc(100dvh - 46px); } }
@media (min-width: 641px) and (max-width: 860px) { body.has-side .crm-screen { height: calc(100dvh - 36px); } }
#crm-main { flex: 1; min-height: 0; display: flex; flex-direction: column; transition: opacity .12s; }
#crm-main.crm-busy { opacity: .5; pointer-events: none; }
.crm-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.crm-head h2 { font-family: var(--disp); font-weight: 600; font-size: 26px; letter-spacing: -.01em; }
.crm-head .spacer { flex: 1; }
.crm-head-acts { display: flex; gap: 10px; align-items: center; }
.crm-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.crm-dim { color: var(--ink-dim); }
.crm-faint { color: var(--ink-faint); }
/* файлы объекта: фильтр по источнику, пометка источника, маленькая копия фото */
.crm-file-src { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
/* [fields] вкладка группы полей amoCRM: значение без правки — текстом на высоте поля */
.crm-ro { min-height: 38px; display: flex; align-items: center; font-size: 14px; line-height: 1.35; color: var(--ink);
  overflow-wrap: anywhere; }
.crm-amo-fields { align-items: start; }
.crm-f-grp { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--ink-faint); }
.crm-amo-fields .crm-f .cpp-cb { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
  color: var(--ink); cursor: pointer; }
.crm-amo-fields .crm-f .cpp-cb input[type=checkbox] { width: 18px; height: 18px; flex: none; padding: 0; margin: 0;
  accent-color: var(--accent); cursor: pointer; }
.crm-file-from { color: var(--ink-dim); font-weight: 600; }
.crm-file-th { flex: none; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--bg-raise);
  border: 1px solid var(--line); }
.crm-file-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* [fields] ленту закрыло правило поля: видна только история этапов */
.crm-feed-closed { font-size: 12.5px; line-height: 1.45; padding: 0 0 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line, #E3E7ED); }
.crm-ic { display: inline-block; vertical-align: -.16em; flex: none; }

/* разделы CRM: сделки · клиенты · звонки и встречи */
.crm-sub { display: flex; gap: 2px; background: var(--bg-card); border: 1px solid var(--line-bright);
  border-radius: 10px; padding: 3px; }
.crm-sub a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  color: var(--ink-dim); padding: 6px 13px; border-radius: 7px; white-space: nowrap; }
.crm-sub a:hover { color: var(--ink); }
.crm-sub a.on { color: #fff; background: var(--accent); }
.crm-sub .n { font-family: var(--mono); font-size: 11px; font-weight: 700; background: var(--red); color: #fff;
  border-radius: 99px; padding: 0 6px; line-height: 17px; }

.crm-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-card);
  border: 1px solid var(--line-bright); color: var(--ink-dim); border-radius: 9px; padding: 8px 13px;
  font-size: 13px; font-weight: 600; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.crm-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.crm-btn.on { color: var(--accent); border-color: var(--accent); background: var(--client-soft); }
.crm-btn .n { font-family: var(--mono); font-size: 11px; background: var(--accent); color: #fff; border-radius: 99px;
  padding: 0 6px; line-height: 17px; }
.crm-btn.danger:hover { color: var(--red); border-color: var(--red); }
.crm-btn.icon { padding: 8px 10px; }
.crm-link { background: none; border: none; color: var(--accent); font-weight: 600; font-size: 13px; padding: 0; }
.crm-link:hover { text-decoration: underline; }

.crm-input, .crm-select { background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 9px;
  padding: 8px 12px; color: var(--ink); font-family: var(--body); font-size: 14px; outline: none; min-width: 0;
  transition: border-color .15s, box-shadow .15s; }
.crm-input:focus, .crm-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.13); }
.crm-search { position: relative; flex: 1 1 180px; max-width: 320px; min-width: 150px; }
.crm-search .crm-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-faint);
  pointer-events: none; }
.crm-search input { width: 100%; padding-left: 34px; height: 38px; }

.crm-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.crm-toolbar .spacer { flex: 1; }
.crm-pipes { display: flex; gap: 2px; background: var(--bg-card); border: 1px solid var(--line-bright);
  border-radius: 10px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.crm-pipes::-webkit-scrollbar { display: none; }
.crm-pipes button { border: none; background: none; font-size: 13px; font-weight: 700; color: var(--ink-dim);
  padding: 6px 12px; border-radius: 7px; white-space: nowrap; }
.crm-pipes button.on { background: var(--navy); color: #fff; }
.crm-totals { font-size: 13px; color: var(--ink-faint); white-space: nowrap; }
.crm-totals b { color: var(--ink); font-family: var(--mono); font-weight: 600; }
.crm-totals b.sum { color: var(--client); }
/* выбор воронки: кнопка с названием и числом сделок, по нажатию — список */
.crm-pp { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; height: 38px; padding: 0 10px 0 12px;
  background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 10px; color: var(--ink);
  font-size: 13.5px; font-weight: 700; transition: border-color .15s, box-shadow .15s; }
.crm-pp:hover { border-color: var(--ink-faint); }
.crm-pp[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.13); }
.crm-pp .cap { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.crm-pp .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-pp .cnt { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-dim); background: var(--surface-sunken);
  border-radius: 99px; padding: 1px 9px; flex: none; }
.crm-pp > .crm-ic { color: var(--ink-faint); margin-left: auto; }

/* окошко у кнопки: список воронок, действия с этапом, набор цветов */
.crm-pop { position: absolute; z-index: 98; box-sizing: border-box; max-width: calc(100vw - 16px); max-height: min(70vh, 460px);
  overflow-y: auto; background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 12px; padding: 6px;
  box-shadow: 0 16px 40px rgba(16,24,40,.18); animation: fade .12s both; }
.crm-pop.colors { padding: 12px; width: 344px; }
.crm-mi { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: none;
  border-radius: 8px; padding: 9px 10px; color: var(--ink); font-family: var(--body); font-size: 14px; font-weight: 600; cursor: pointer; }
.crm-mi:hover, .crm-mi:focus-visible { background: var(--surface-sunken); outline: none; }
.crm-mi:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.crm-mi.cur { color: var(--accent); }
.crm-mi.danger { color: var(--red); }
.crm-mi:disabled { color: var(--ink-faint); cursor: default; background: none; }
.crm-mi > .crm-ic { color: var(--ink-faint); }
.crm-mi.danger > .crm-ic { color: inherit; }
.crm-mi .lb { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.crm-mi .lb small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-dim); }
.crm-mi:disabled .lb small { color: var(--ink-faint); }
.crm-mi .hint { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-dim); background: var(--surface-sunken);
  border-radius: 99px; padding: 1px 9px; flex: none; }
.crm-mi .tick { color: var(--accent); flex: none; display: inline-flex; }
.crm-mi .dot { width: 10px; height: 10px; border-radius: 99px; background: var(--sc); flex: none; }
.crm-mi-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.crm-mi-cap { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding: 8px 10px 4px; }
/* то же самое в шторке на телефоне */
.crm-sheet .crm-pop-body.menu .crm-mi { border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; margin-bottom: 6px; font-size: 15px; }
.crm-sheet .crm-pop-body.menu .crm-mi-sep { margin: 10px 0; }

/* наборы фильтров и включённые условия */
.crm-saved { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -2px 0 10px; }
.crm-saved .f { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line-bright); background: var(--bg-card); border-radius: 99px; padding: 5px 12px;
  color: var(--ink-dim); white-space: nowrap; transition: color .12s, border-color .12s, background .12s; }
.crm-saved .f:hover { color: var(--ink); border-color: var(--ink-faint); }
.crm-saved .f.on { border-color: var(--accent); color: var(--accent); background: var(--client-soft); }
.crm-saved .f .crm-ic { color: var(--amber); fill: currentColor; }
.crm-saved .crm-link { margin-left: 6px; font-size: 12.5px; white-space: nowrap; }
.crm-active { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -2px 0 10px; }
.crm-active[hidden] { display: none; }
.crm-fchip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; font-size: 12.5px; font-weight: 600; color: var(--accent);
  background: var(--client-soft); border: 1px solid rgba(10,77,166,.3); border-radius: 8px; padding: 0 2px 0 10px; min-height: 28px; }
.crm-fchip button { border: none; background: none; color: inherit; opacity: .65; font-size: 17px; line-height: 1; width: 26px;
  height: 26px; border-radius: 6px; flex: none; }
.crm-fchip button:hover { opacity: 1; background: rgba(10,77,166,.1); }
.crm-active .crm-link { margin-left: 6px; font-size: 12.5px; }
.crm-hint { font-size: 12.5px; line-height: 1.45; color: var(--ink-dim); margin: 8px 0 0; }
.crm-group > h4 + .crm-hint { margin: -4px 0 10px; }
.crm-frow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.crm-frow .crm-select { flex: 1 1 180px; width: auto; }
.crm-chip { cursor: pointer; }
.crm-setrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.crm-setrow:last-child { border-bottom: none; }
.crm-setrow .star { width: 36px; height: 36px; flex: none; border: none; background: none; border-radius: 9px; color: var(--line-bright);
  display: grid; place-items: center; }
.crm-setrow .star:hover { background: var(--surface-sunken); color: var(--amber); }
.crm-setrow .star.on { color: var(--amber); }
.crm-setrow .star.on .crm-ic { fill: currentColor; }
.crm-setrow .nm { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.crm-setrow span.nm small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-dim); }
.crm-setrow .sh { flex: none; font-size: 13px; padding: 0; white-space: nowrap; }

/* ---------- доска ----------
   Листается целиком: вниз — все этапы разом, вбок — между этапами. Шапки колонок прилипают
   к верху, полоса прокрутки вбок всегда у нижнего края окна. */
.crm-stabs { display: none; }
/* Доска — серый лоток, этап — дорожка с лёгким оттенком своего цвета, сделка — белая карточка:
   три уровня заметно разные, карточки не сливаются ни с колонкой, ни друг с другом */
.crm-board { flex: 1; min-height: 0; overflow: auto; background: #E9EDF2; border: 1px solid var(--line);
  border-radius: 14px; overscroll-behavior: contain; }
.crm-board-in { display: flex; gap: 10px; width: max-content; min-width: 100%; min-height: 100%; padding: 10px;
  box-sizing: border-box; }
.crm-col { --lane: color-mix(in srgb, var(--sc, #98A2B3) 8%, #F5F7FA); flex: 0 0 276px; min-width: 0;
  display: flex; flex-direction: column; background: var(--lane); border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(16,24,40,.05); }
.crm-col:last-child { flex-grow: 1; }
.crm-col.off { display: none; }
.crm-col-head { position: sticky; top: 0; z-index: 2; flex: none; padding: 10px 12px 8px; background: var(--lane);
  border-radius: 12px 12px 0 0; }
/* полоска цвета этапа; бледному цвету ободок потемнее — иначе на светлой дорожке её не видно */
.crm-col-head::before { content: ""; display: block; height: 4px; border-radius: 99px; margin-bottom: 9px;
  background: var(--sc, var(--ink-faint)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sct, transparent) 30%, transparent); }
.crm-col-head .r1 { display: flex; align-items: center; gap: 8px; }
.crm-col-head .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--sc); flex: none; }
.crm-col-head .nm { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-col-head .cnt { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-dim);
  background: var(--bg-card); border-radius: 99px; padding: 1px 9px; box-shadow: 0 0 0 1px rgba(16,24,40,.06); }
.crm-col-head .add { border: none; background: none; color: var(--ink-faint); padding: 2px 4px; border-radius: 6px;
  font-size: 17px; line-height: 1; }
.crm-col-head .add:hover { color: var(--accent); background: var(--client-soft); }
.crm-col-head .sum { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; padding-left: 16px; min-height: 17px; }
.crm-col-body { flex: 1; padding: 2px 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.crm-col.drop { --lane: var(--client-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.crm-col.drop .crm-col-head { background: var(--client-soft); }
.crm-col-empty { padding: 16px 8px; text-align: center; color: var(--ink-faint); font-size: 12px;
  border: 1px dashed color-mix(in srgb, var(--sct, #98A2B3) 30%, var(--line-bright)); border-radius: 10px; }
.crm-more { flex: none; border: 1px dashed var(--line-bright); background: rgba(255,255,255,.55); border-radius: 10px; color: var(--accent);
  font-family: var(--body); font-size: 12.5px; font-weight: 600; padding: 9px 8px; }
.crm-more:hover { border-color: var(--accent); background: var(--client-soft); }
/* доску тянут мышью: зажатым колесом или левой кнопкой за пустое место */
.crm-board.crm-panning, .fn-board.crm-panning { cursor: grabbing; user-select: none; -webkit-user-select: none; scroll-snap-type: none !important; }
.crm-board.crm-panning *, .fn-board.crm-panning * { cursor: grabbing !important; }
/* точка цвета этапа видна и на белом: у светлого цвета появляется ободок потемнее */
.crm-col-head .dot, .crm-opt .dot, .crm-chip .dot, .crm-stbtn .dot, .crm-stabs .dot, .crm-mi .dot {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sct, transparent) 55%, transparent); }

.crm-card { position: relative; display: block; flex: none; min-width: 0; background: var(--bg-card); border: 1px solid #DCE1E8;
  border-radius: 10px; padding: 11px 12px; color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.07);
  transition: box-shadow .12s, border-color .12s, transform .12s; cursor: pointer; }
.crm-card:hover { border-color: var(--line-bright); box-shadow: 0 6px 16px rgba(16,24,40,.12); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .crm-card:hover { transform: none; } }
.crm-card.dragging { opacity: .45; }
.crm-card.late { border-left: 3px solid var(--red); padding-left: 9px; }
.crm-card .ttl { font-weight: 650; font-size: 13.5px; line-height: 1.35; padding-right: 26px; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crm-card .ttl:hover { color: var(--accent); }
.crm-card .who { font-size: 12px; color: var(--ink-dim); margin-top: 4px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.crm-card .adr { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-card .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.crm-card .foot { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; margin-top: 9px; padding-top: 8px;
  border-top: 1px solid var(--line); }
.crm-card .foot .todo-box { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }
.crm-card .sum { font-family: var(--mono); font-weight: 700; font-size: 12.5px; color: var(--client); white-space: nowrap; }
.crm-card .sum.zero { font-weight: 500; font-size: 11px; color: var(--ink-faint); }
.crm-card .num { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.crm-card .mv { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: none; background: none;
  color: var(--ink-faint); border-radius: 7px; display: grid; place-items: center; opacity: 0; transition: opacity .12s; }
.crm-card:hover .mv, .crm-card .mv:focus-visible { opacity: 1; }
.crm-card .mv:hover { background: var(--surface-sunken); color: var(--accent); }
@media (hover: none) { .crm-card .mv { opacity: 1; } }

/* Цвет метки и этапа задаёт человек, он бывает почти белым. Сам цвет — в лёгкую заливку,
   текст и обводка — в тот же оттенок, затемнённый до читаемого (--tct / --sct считает crm.js). */
.crm-tag { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 5px; white-space: nowrap;
  color: var(--tct, var(--tc, #667085)); background: var(--surface-sunken); border: 1px solid var(--line-bright);
  background: color-mix(in srgb, var(--tc, #667085) 14%, transparent);
  border-color: color-mix(in srgb, var(--tct, var(--tc, #667085)) 34%, transparent); }
.crm-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 2px 10px; border-radius: 99px; color: var(--scf, var(--sct, #344054));
  background: var(--scb, var(--sc, #E4E7EC)); border: 1px solid transparent;
  border-color: color-mix(in srgb, var(--sct, #667085) 28%, transparent); }
.crm-ava { width: 22px; height: 22px; border-radius: 99px; background: var(--client-soft); color: var(--accent);
  font-size: 9.5px; font-weight: 800; display: inline-grid; place-items: center; flex: none; margin-left: -5px;
  border: 1.5px solid var(--bg-card); }
.crm-ava:first-child { margin-left: 0; }
.crm-ava.ext { background: var(--surface-sunken); color: var(--ink-dim); }
.crm-todo { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: 10.5px;
  font-weight: 600; color: var(--ink-faint); white-space: nowrap; }
.crm-todo.late { color: #fff; background: var(--red); border-radius: 99px; padding: 0 7px; line-height: 17px; }
.crm-todo.none { color: var(--amber-deep); }
.crm-warn { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--amber-deep);
  background: rgba(224,138,0,.1); border: 1px solid rgba(224,138,0,.35); border-radius: 6px; padding: 1px 7px; }

/* ---------- список ---------- */
.crm-list { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.crm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.crm-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-sunken);
  white-space: nowrap; }
.crm-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.crm-table tr:last-child td { border-bottom: none; }
.crm-table tbody tr { cursor: pointer; transition: background .1s; }
.crm-table tbody tr:hover { background: var(--bg-raise); }
.crm-table .r { text-align: right; }
.crm-table .t1 { font-weight: 600; color: var(--ink); }
.crm-table .t2 { font-size: 12px; color: var(--ink-faint); }
.crm-table a { color: inherit; }
.crm-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px; font-size: 13px;
  color: var(--ink-faint); }
.crm-rows { display: none; }

/* ---------- шторка (выбор этапа, фильтры) ---------- */
.crm-veil { position: fixed; inset: 0; z-index: 96; background: rgba(0,21,61,.4); display: grid; place-items: center;
  padding: 20px; animation: fade .18s both; }
.crm-sheet { width: 100%; max-width: 480px; max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 24px 60px rgba(16,24,40,.2);
  animation: rise .25s both; }
.crm-sheet.wide { max-width: 620px; }
.crm-sheet-title { font-family: var(--disp); font-weight: 600; font-size: 18px; margin-bottom: 4px; display: flex;
  align-items: center; gap: 10px; }
.crm-sheet-title .x { margin-left: auto; border: none; background: none; color: var(--ink-faint); font-size: 22px; line-height: 1; padding: 0 4px; }
.crm-sheet-sub { color: var(--ink-dim); font-size: 13px; margin-bottom: 14px; }
.crm-sheet .sec { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin: 16px 0 8px; }
.crm-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; margin-bottom: 6px; color: var(--ink);
  font-size: 14px; font-weight: 600; transition: border-color .12s, background .12s; }
.crm-opt:hover { border-color: var(--accent); }
.crm-opt.cur { background: var(--surface-sunken); border-color: var(--line-bright); }
.crm-opt .dot { width: 10px; height: 10px; border-radius: 99px; background: var(--sc, var(--ink-faint)); flex: none; }
.crm-opt .hint { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--ink-faint); }
.crm-sheet .acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.crm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-chip { border: 1px solid var(--line-bright); background: var(--bg-card); color: var(--ink-dim); font-size: 12.5px;
  font-weight: 600; border-radius: 99px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px; }
.crm-chip.on { border-color: var(--accent); background: var(--client-soft); color: var(--accent); }
.crm-chip .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--sc, var(--ink-faint)); }
.crm-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); padding: 5px 0; cursor: pointer; }
.crm-check input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.crm-lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 5px; }
.modal .crm-input, .modal .crm-select, .crm-sheet .crm-input, .crm-sheet .crm-select { width: 100%; background: var(--bg);
  padding: 11px 13px; border-radius: 10px; }
.modal textarea.crm-input, .crm-sheet textarea.crm-input { resize: vertical; min-height: 74px; line-height: 1.45; }
.modal .crm-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal .crm-seg, .crm-sheet .crm-seg { display: flex; gap: 2px; background: var(--bg); border: 1px solid var(--line-bright);
  border-radius: 10px; padding: 3px; margin-bottom: 16px; }
.crm-seg button { flex: 1; border: none; background: none; font-size: 13px; font-weight: 700; color: var(--ink-dim);
  padding: 8px 6px; border-radius: 7px; }
.crm-seg button.on { background: var(--accent); color: #fff; }

/* ---------- карточка сделки ---------- */
.crm-deal-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.crm-deal-head .main { flex: 1 1 380px; min-width: 0; }
.crm-deal-head .crumb { color: var(--ink-faint); font-size: 13px; margin-bottom: 4px; }
.crm-deal-head .crumb a { color: var(--ink-dim); }
.crm-title { width: 100%; font-family: var(--disp); font-weight: 600; font-size: 26px; letter-spacing: -.01em;
  color: var(--ink); border: 1px solid transparent; background: transparent; border-radius: 9px; padding: 2px 8px;
  margin-left: -9px; outline: none; display: block; resize: none; overflow: hidden; line-height: 1.2; }
.page textarea.crm-title { min-height: 0; }   /* на телефоне у полей-абзацев своя высота, названию она не нужна */
.crm-title:hover { border-color: var(--line-bright); }
.crm-title:focus { border-color: var(--accent); background: var(--bg-card); }
.crm-deal-head .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 13px;
  color: var(--ink-dim); }
.crm-stbtn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-bright);
  border-color: color-mix(in srgb, var(--sct, var(--sc)) 45%, transparent);
  background: color-mix(in srgb, var(--sc) 12%, var(--bg-card)); color: var(--ink); font-weight: 700; font-size: 14px;
  border-radius: 10px; padding: 9px 14px; }
.crm-stbtn .dot { width: 10px; height: 10px; border-radius: 99px; background: var(--sc); flex: none; }
.crm-stbtn:hover { border-color: var(--sct, var(--sc)); }

.crm-steps { display: flex; gap: 3px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.crm-steps::-webkit-scrollbar { display: none; }
.crm-steps button { flex: 1 1 0; min-width: 84px; border: none; background: var(--line); color: var(--ink-dim);
  font-size: 11.5px; font-weight: 700; padding: 7px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: filter .12s, background .12s; }
.crm-steps button:first-child { border-radius: 8px 0 0 8px; }
.crm-steps button:last-child { border-radius: 0 8px 8px 0; }
.crm-steps button.done { background: color-mix(in srgb, var(--sc) 30%, var(--bg-card)); color: var(--ink); }
/* текущий шаг залит цветом этапа: на светлой заливке текст тёмный, на тёмной — белый (--scf) */
.crm-steps button.cur { background: var(--scb, var(--sc)); color: var(--scf, #fff); }
.crm-steps button:hover { filter: brightness(.95); }
.crm-steps button:disabled { opacity: 1; cursor: default; filter: none; }

.crm-money { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.crm-money .m { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.crm-money .m span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); }
.crm-money .m b { display: block; font-family: var(--mono); font-size: 18px; font-weight: 700; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-money .m small { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.crm-money .m.main b { color: var(--client); }
.crm-money .m.paid b { color: var(--margin); }

.crm-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
/* ноутбук: лента чуть уже — карточке хватает места на навигацию слева и поля в две колонки */
@media (min-width: 1101px) and (max-width: 1360px) { .crm-cols { grid-template-columns: minmax(0, 1fr) 320px; } }
/* широкий монитор: ленте — чуть просторнее */
@media (min-width: 1700px) { .crm-cols { grid-template-columns: minmax(0, 1fr) 420px; } }
.crm-panel { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; }
.crm-tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--line); overflow-x: auto;
  scrollbar-width: none; }
.crm-tabs::-webkit-scrollbar { display: none; }
.crm-tabs button { border: none; background: none; font-size: 13.5px; font-weight: 700; color: var(--ink-dim);
  padding: 9px 13px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.crm-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.crm-tabs button .n { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-left: 4px; }
.crm-tabs button .n.late { color: #fff; background: var(--red); border-radius: 99px; padding: 0 6px; }
.crm-tabs .only-narrow { display: none; }
.crm-tab-body { padding: 16px 18px 18px; }

/* ---------- карточка сделки: навигация слева ----------
   разделы сделки, всё по объекту (ссылками на экраны проекта) и группы полей amoCRM */
.crm-dcard { container: dcard / inline-size; }
.crm-dcard-in { display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: start; }
.crm-cnav { align-self: stretch; min-width: 0; border-right: 1px solid var(--line); padding: 10px 8px 16px; }
.crm-cnav-pick { display: none; }
/* список едет вместе с прокруткой длинного «Основного»; не помещается по высоте — листается сам */
.crm-cnav-list { position: sticky; top: 76px; max-height: calc(100dvh - 92px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; }
.crm-cnav-sec { display: flex; flex-direction: column; gap: 1px; }
.crm-cnav-sec + .crm-cnav-sec { margin-top: 14px; }
.crm-cnav-h { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
  padding: 4px 10px 5px; }
.crm-cnav-h .nc { text-transform: none; letter-spacing: .02em; }
.crm-cnav-i { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 6px 10px; border: 0;
  border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.25;
  text-align: left; text-decoration: none; cursor: pointer; }
.crm-cnav-i .l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-cnav-i .v, .crm-cnav-i .n { flex: none; font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--ink-faint);
  margin: 0; }
.crm-cnav-i .n.late, .crm-cnav-i .late { color: #fff; background: var(--red); border-radius: 99px; padding: 0 6px; line-height: 17px; }
.crm-cnav-i:hover { background: var(--surface-sunken); color: var(--ink); }
.crm-cnav-i.on, .crm-cnav-i.on:hover { background: var(--navy, #0F1E36); color: #fff; }
.crm-cnav-i.on .v, .crm-cnav-i.on .n { color: rgba(255,255,255,.78); }
.crm-cnav-i.go { font-weight: 500; }
.crm-cnav-i.cta .v { font-family: var(--body); font-size: 12.5px; font-weight: 700; color: var(--accent); }
.crm-cnav-i.off { color: var(--ink-faint); cursor: default; }
.crm-cnav-i.off:hover { background: none; color: var(--ink-faint); }
.crm-cnav-q.crm-input { height: 34px; margin: 2px 0 6px; padding: 0 10px; font-size: 13.5px; }
.crm-cnav-more { border: 0; background: none; padding: 6px 10px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--accent); text-align: left; cursor: pointer; }
.crm-cnav-more:hover { text-decoration: underline; }
.crm-cnav-empty { display: flex; flex-direction: column; gap: 1px; }
/* название группы amoCRM бывает длинным — в две строки, а не обрывом */
.crm-cnav-i[data-t^="amo:"] .l { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere; }
.crm-cnav-empty .crm-cnav-i { color: var(--ink-dim); font-weight: 500; }
.crm-cnav-empty .crm-cnav-i.on { color: #fff; }
.crm-cnav .only-narrow { display: none; }
/* [card-layout] подгруппы полей amoCRM: свой заголовок, линия между подгруппами, колонки по выбору */
.crm-tab-body { container: dtab / inline-size; }
.crm-fsub + .crm-fsub { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.crm-fsub > h5 { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); }
.crm-fsub > .crm-fields + .crm-stages, .crm-fsub > .crm-stages + .crm-fields { margin-top: 12px; }
.crm-fields.c1 { grid-template-columns: minmax(0, 1fr); }
.crm-fields.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crm-fields.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crm-fields.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* этапы строками: слева номер, справа одни и те же поля в одном порядке — колонки совпадают */
.crm-stage { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 10px 0;
  border-top: 1px dashed var(--line); }
.crm-stage:first-child { border-top: 0; padding-top: 0; }
.crm-stage-n { padding-top: 27px; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.crm-stage .crm-fields { grid-template-columns: repeat(auto-fill, minmax(max(128px, calc((100% - (var(--k) - 1) * 14px) / var(--k))), 1fr)); }
.crm-gap { visibility: hidden; }
@container dtab (max-width: 620px) {
  .crm-fields.c3, .crm-fields.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container dtab (max-width: 460px) {
  .crm-fields.c2, .crm-fields.c3, .crm-fields.c4 { grid-template-columns: minmax(0, 1fr); }
  .crm-stage { grid-template-columns: minmax(0, 1fr); }
  .crm-stage-n { padding-top: 0; margin-bottom: 6px; }
  .crm-gap { display: none; }
}
.crm-amo-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crm-linkbtn { margin-left: 10px; border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--accent); cursor: pointer; }
.crm-linkbtn:hover { text-decoration: underline; }
.crm-btn.main { background: var(--accent); border-color: var(--accent); color: #fff; }
.crm-btn.main:hover { background: var(--navy, #0F1E36); border-color: var(--navy, #0F1E36); color: #fff; }

/* [card-layout] редактор расположения */
.crm-lay { display: flex; flex-direction: column; gap: 12px; }
.crm-lay-top h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--ink); }
.crm-lay-note { font-size: 13px; line-height: 1.5; color: var(--ink-dim); max-width: 760px; }
.crm-lay-secs { display: flex; flex-direction: column; gap: 10px; }
.crm-lay-sec { border: 1px solid var(--line-bright); border-radius: 12px; background: var(--bg-card); }
.crm-lay-sec.hid { border-style: dashed; background: var(--surface-sunken); }
.crm-lay-sh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.crm-lay-sh .sp { flex: 1 1 auto; }
.crm-lay-sh b { font-size: 13.5px; color: var(--ink); }
.crm-lay-sh .crm-faint { font-size: 12.5px; }
.crm-lay-title.crm-input { flex: 1 1 220px; min-width: 0; height: 36px; padding: 0 10px; font-size: 14px; font-weight: 600; }
.crm-lay-cols.crm-input { flex: 0 0 auto; width: auto; height: 36px; padding: 0 8px; font-size: 13px; }
.crm-lay-sh .crm-btn { padding: 6px 10px; font-size: 12.5px; }
.crm-lay-items { display: flex; flex-wrap: wrap; gap: 6px; min-height: 52px; padding: 10px 12px; align-content: flex-start; }
.crm-lay-items:empty::before { content: 'Перетащите сюда поля'; align-self: center; font-size: 12.5px; color: var(--ink-faint); }
.crm-lay-chip { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line-bright); background: var(--bg-card); font-size: 13px; font-weight: 600; color: var(--ink);
  cursor: grab; user-select: none; }
.crm-lay-chip .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-lay-chip .t { flex: none; font-size: 11px; font-weight: 500; color: var(--ink-faint); }
.crm-lay-chip:hover { border-color: var(--accent); }
.crm-lay-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.crm-lay-chip.drag { opacity: .45; }
.crm-lay-chip.picked { border-color: var(--accent); background: var(--client-soft); box-shadow: 0 0 0 2px var(--accent); }
.crm-lay-foot { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
/* группа полей amoCRM: название и «Все / Заполненные / Пустые» */
.crm-amo-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.crm-amo-top h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.crm-amo-show { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-bright); border-radius: 10px;
  background: var(--bg); }
.crm-amo-show button { border: 0; background: none; padding: 5px 10px; border-radius: 7px; font: inherit; font-size: 12.5px;
  font-weight: 600; color: var(--ink-dim); cursor: pointer; white-space: nowrap; }
.crm-amo-show button .n { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.crm-amo-show button.on { background: var(--bg-card); color: var(--ink); box-shadow: 0 1px 2px rgba(16,36,61,.12); }
/* узкая карточка (телефон, планшет, ноутбук с лентой справа): кнопка «все разделы», список раскрывается под ней */
@container dcard (max-width: 640px) {
  .crm-dcard-in { grid-template-columns: minmax(0, 1fr); }
  .crm-cnav { border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; }
  .crm-cnav-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 42px;
    padding: 6px 12px; border: 1px solid var(--line-bright); border-radius: 10px; background: var(--bg-card); color: var(--ink);
    font: inherit; font-size: 14.5px; font-weight: 700; text-align: left; cursor: pointer; }
  .crm-cnav-pick .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .crm-cnav-pick .h { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600;
    color: var(--ink-faint); }
  .crm-cnav-pick[aria-expanded="true"] .h svg { transform: rotate(180deg); }
  .crm-cnav-list { position: static; display: none; max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; padding: 8px 0 2px; }
  .crm-cnav-list.open { display: block; }
  .crm-cnav-i { min-height: 40px; }
}
.crm-side { position: sticky; top: 76px; }
.crm-side-title { font-size: 14px; font-weight: 700; color: var(--ink); padding: 13px 16px 12px;
  border-bottom: 1px solid var(--line); }
.crm-side .crm-feed { padding: 14px 14px 16px; max-height: calc(100dvh - 150px); overflow-y: auto; }

.crm-group { margin-bottom: 20px; }
.crm-group:last-child { margin-bottom: 0; }
.crm-group > h4 { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 10px; }
.crm-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; align-items: end; }
.crm-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; }
.crm-f.w2 { grid-column: span 2; }
.crm-f.full { grid-column: 1 / -1; }
.crm-f > span { font-size: 12px; color: var(--ink-dim); }
.crm-f input, .crm-f select, .crm-f textarea { width: 100%; background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; color: var(--ink); font-family: var(--body); font-size: 14px; outline: none;
  min-width: 0; transition: border-color .15s, background .15s, box-shadow .15s; }
.crm-f textarea { resize: vertical; min-height: 70px; line-height: 1.45; }
.crm-f input:hover, .crm-f select:hover, .crm-f textarea:hover { border-color: var(--line-bright); }
.crm-f input:focus, .crm-f select:focus, .crm-f textarea:focus { border-color: var(--accent); background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(10,77,166,.12); }
.crm-f input:disabled, .crm-f select:disabled, .crm-f textarea:disabled { opacity: 1; color: var(--ink); background: transparent;
  border-color: transparent; padding-left: 0; -webkit-text-fill-color: var(--ink); }
.crm-f.mono input { font-family: var(--mono); }
.crm-f.saved::after { content: "сохранено"; position: absolute; right: 2px; top: 1px; font-size: 10.5px; font-weight: 700;
  color: var(--green); animation: fade .2s both; }
.crm-f.err input, .crm-f.err select, .crm-f.err textarea { border-color: var(--red); }
.crm-flags { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.crm-kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; font-size: 13px; }
.crm-kv dt { color: var(--ink-faint); }
.crm-kv dd { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.crm-tagedit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crm-tagedit .crm-tag { font-size: 12px; padding: 3px 4px 3px 9px; display: inline-flex; align-items: center; gap: 3px; }
.crm-tagedit .crm-tag button { border: none; background: none; color: inherit; opacity: .6; font-size: 14px; line-height: 1; padding: 0 3px; }
.crm-tagedit .crm-tag button:hover { opacity: 1; }
.crm-tagedit input { width: 150px; background: var(--surface-sunken); border: 1px dashed var(--line-bright); border-radius: 7px;
  padding: 5px 9px; font-size: 13px; font-family: var(--body); outline: none; }
.crm-tagedit input:focus { border-style: solid; border-color: var(--accent); }

/* клиенты сделки, дела, файлы — общие строки */
.crm-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.crm-row:last-child { border-bottom: none; }
.crm-row .body { flex: 1; min-width: 0; }
.crm-row .nm { font-weight: 600; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.crm-row .nm a { color: inherit; }
.crm-row .nm a:hover { color: var(--accent); }
.crm-row .sub { font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.crm-row .sub a { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
.crm-row .sub a[href^="tel:"] { white-space: nowrap; }
.crm-row .sub > * { min-width: 0; }
.crm-row .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.crm-row .acts .crm-btn { padding: 6px 10px; font-size: 12.5px; }
.crm-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(10,77,166,.35); background: var(--client-soft); border-radius: 5px; padding: 1px 6px; }
.crm-kind { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: var(--client-soft); color: var(--accent); }
/* значок задачи — цвета её типа (справочник «Типы задач»); просрочено, сделано, отменено — поверх */
.crm-kind[style] { color: var(--sct, var(--accent)); background: var(--client-soft);
  background: color-mix(in srgb, var(--sc, var(--accent)) 13%, var(--bg-card)); }
.crm-kind.late { background: rgba(217,45,32,.1); color: var(--red); }
.crm-kind.done { background: var(--margin-soft); color: var(--margin); }
.crm-kind.cancelled { background: var(--surface-sunken); color: var(--ink-faint); }
.crm-when { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.crm-when.late { color: var(--red); }
.crm-row.muted .nm { color: var(--ink-dim); font-weight: 500; }
.crm-row.cancelled .nm { text-decoration: line-through; }
.crm-result { font-size: 13px; color: var(--ink); background: var(--surface-sunken); border-radius: 8px; padding: 6px 10px;
  margin-top: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-addbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }

/* лента */
.crm-compose { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.crm-compose textarea { width: 100%; min-height: 62px; resize: vertical; background: var(--surface-sunken);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-family: var(--body); font-size: 14px;
  color: var(--ink); outline: none; line-height: 1.45; }
.crm-compose textarea:focus { border-color: var(--accent); background: var(--bg-card); }
.crm-compose .btn-amber { align-self: flex-end; padding: 8px 16px; font-size: 13px; }
/* Лента: комментарий — облачко рядом с аватаром автора; история (этапы, служебное, звонки) — короткая
   строка со значком, без облачка; дни разделены подписью */
.crm-evs { display: flex; flex-direction: column; gap: 14px; }
.crm-ev { font-size: 13.5px; min-width: 0; }
.crm-ev .h { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-faint); margin-bottom: 5px; min-width: 0; }
.crm-ev .h b { color: var(--ink); font-size: 13px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-ev .h .t { margin-left: auto; font-family: var(--mono); font-size: 11px; white-space: nowrap; flex: none; }
.crm-ev .h .vb { white-space: nowrap; }
.crm-ev .av { width: 24px; height: 24px; border-radius: 99px; flex: none; display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 800; background: var(--client-soft); color: var(--accent); }
.crm-ev .av.ic { background: var(--bg-card); color: var(--ink-dim); box-shadow: inset 0 0 0 1px var(--line-bright); }
.crm-ev .src { flex: none; font-size: 10.5px; font-weight: 700; color: var(--ink-dim); background: var(--surface-sunken);
  border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; line-height: 16px; }
.crm-ev.cm .txt { margin-left: 32px; padding: 9px 12px; background: #F3F5F8; border: 1px solid var(--line);
  border-radius: 3px 12px 12px 12px; line-height: 1.5; }
.crm-ev.status .txt, .crm-ev.sys .txt { margin-left: 32px; }
.crm-ev .txt.clamp { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.crm-ev .more { margin: 4px 0 0 32px; }
.crm-fday { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--ink-faint); }
.crm-fday::before, .crm-fday::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.crm-ev .h button { border: none; background: none; color: var(--ink-faint); font-size: 14px; line-height: 1; padding: 0 2px; }
.crm-ev .h button:hover { color: var(--red); }
.crm-ev .txt { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.crm-ev.sys .txt, .crm-ev.status .txt { color: var(--ink-dim); font-size: 13px; }
.crm-ev .mv { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--ink-faint); }
.crm-ev .why { color: var(--red); font-weight: 600; }

/* файлы */
.crm-drop { border: 1px dashed var(--line-bright); border-radius: 11px; padding: 14px; text-align: center; color: var(--ink-dim);
  font-size: 13px; margin-bottom: 8px; cursor: pointer; transition: border-color .12s, background .12s; }
.crm-drop:hover, .crm-drop.over { border-color: var(--accent); background: var(--client-soft); color: var(--accent); }
.crm-file-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-sunken); color: var(--ink-dim);
  display: grid; place-items: center; flex: none; font-size: 9.5px; font-weight: 800; font-family: var(--mono); text-transform: uppercase; }
.crm-file-ic.photo { background: var(--margin-soft); color: var(--margin); }
.crm-file-ic.video { background: var(--master-soft); color: var(--violet); }

/* ---------- клиенты ---------- */
.crm-client-ava { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none;
  font-weight: 800; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--navy)); }
.crm-client-ava.company { background: linear-gradient(135deg, #6941C6, #42307D); }
.crm-client-ava.ip { background: linear-gradient(135deg, #1F9D57, #14653A); }
.crm-client-ava.lg { width: 52px; height: 52px; border-radius: 15px; font-size: 18px; }
.crm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.crm-phone-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.crm-phone-row input { min-width: 0; }
.crm-phone-row .p { flex: 1.3; }
.crm-phone-row .l { flex: 1; }
.crm-phone-row button { flex: none; border: none; background: none; color: var(--ink-faint); font-size: 18px; padding: 0 4px; }
.crm-phone-row button:hover { color: var(--red); }
.crm-dup { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.crm-dup label { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; cursor: pointer; }
.crm-dup input { margin-top: 3px; accent-color: var(--accent); }

/* ---------- звонки и встречи ---------- */
.crm-day { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  padding: 16px 18px 6px; display: flex; align-items: center; gap: 10px; }
.crm-day.late { color: var(--red); }
.crm-day .n { font-family: var(--mono); font-weight: 600; letter-spacing: 0; }
.crm-plan .crm-row { padding: 12px 18px; }

/* ---------- настройки воронок ---------- */
.crm-set { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
.crm-set-cap { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
  margin: 2px 0 8px 4px; }
.crm-set-panel { padding: 18px 20px; scroll-margin-top: 70px; }
.crm-set-top { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.crm-set-name { flex: 1 1 260px; min-width: 0; display: block; }
.crm-set-top .crm-f { flex: 0 1 200px; }
.crm-ttl-in { display: block; width: 100%; font-family: var(--disp); font-weight: 600; font-size: 21px; letter-spacing: -.01em;
  color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 3px 8px; margin-left: -9px;
  outline: none; text-overflow: ellipsis; transition: border-color .15s, background .15s; }
.crm-ttl-in:hover { border-color: var(--line-bright); }
.crm-ttl-in:focus { border-color: var(--accent); background: var(--bg-card); box-shadow: 0 0 0 3px rgba(10,77,166,.12); }
.crm-set-foot { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); padding-top: 14px; margin-top: 20px; }
.crm-set-foot .crm-faint { font-size: 12.5px; flex: 1 1 260px; }
.crm-set-warn { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; font-weight: 600; color: var(--amber-deep);
  background: rgba(224,138,0,.09); border: 1px solid rgba(224,138,0,.35); border-radius: 10px; padding: 9px 12px; margin: 0 0 10px; }
.crm-set-warn .crm-ic { margin-top: 2px; }
.crm-set-empty { border: 1px dashed var(--line-bright); border-radius: 11px; padding: 18px; text-align: center; color: var(--ink-dim);
  font-size: 13.5px; }
.crm-addrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.crm-addrow .crm-input { flex: 1 1 220px; }
.crm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* список, строки которого перетаскивают за ручку */
.crm-sort { position: relative; display: flex; flex-direction: column; gap: 6px; }
.crm-sort.sorting > [data-id] { transition: transform .16s cubic-bezier(.2,.8,.2,1); }
.crm-sort > [data-id].drag { position: relative; z-index: 3; transition: none; box-shadow: 0 12px 28px rgba(16,24,40,.2);
  border-color: var(--accent); background: var(--bg-card); }
.crm-slot { position: absolute; left: 0; right: 0; border: 2px dashed var(--accent); border-radius: 11px;
  background: var(--client-soft); pointer-events: none; z-index: 0; }
.crm-grip { flex: none; width: 30px; height: 34px; display: grid; place-items: center; border: none; background: none; border-radius: 8px;
  color: var(--ink-faint); cursor: grab; touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.crm-grip:hover { color: var(--ink-dim); background: var(--surface-sunken); }
.crm-grip:focus-visible { outline: none; color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.crm-grip .crm-ic { fill: currentColor; }
body.crm-sorting { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.crm-sorting * { cursor: grabbing !important; }

/* воронки */
.crm-prow { display: flex; align-items: center; gap: 2px; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 11px; padding: 3px 4px; }
.crm-prow.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.crm-prow .pick { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; border: none; background: none;
  border-radius: 8px; padding: 6px 8px; color: var(--ink); font-family: var(--body); }
.crm-prow .pick:hover { background: var(--surface-sunken); }
.crm-prow .pick .nm { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-prow .pick .sub { font-size: 12px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-prow.on .pick .nm { color: var(--accent); }

/* этапы */
.crm-strow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 11px; padding: 4px 6px; }
.crm-strow.fresh { animation: crm-fresh 1.6s ease-out both; }
@keyframes crm-fresh { from { background: var(--client-soft); border-color: var(--accent); } }
.crm-strow .sw { width: 26px; height: 26px; border-radius: 99px; border: 3px solid var(--bg-card); background: var(--sc); flex: none; padding: 0;
  box-shadow: 0 0 0 1px var(--line-bright); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sct, var(--line-bright)) 55%, var(--line-bright)); }
.crm-strow .sw:hover, .crm-strow .sw[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--accent); }
.crm-strow .mid { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crm-strow input.nm { flex: 1 1 130px; min-width: 0; border: 1px solid transparent; background: none; font-size: 14px; font-weight: 600;
  font-family: var(--body); color: var(--ink); padding: 6px 8px; border-radius: 8px; outline: none; text-overflow: ellipsis; }
.crm-strow input.nm:hover { border-color: var(--line-bright); }
.crm-strow input.nm:focus { border-color: var(--accent); background: var(--bg-card); box-shadow: 0 0 0 3px rgba(10,77,166,.12); }
.crm-strow .cnt { flex: none; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-dim); background: var(--surface-sunken);
  border-radius: 99px; padding: 1px 9px; }
.crm-strow .more { flex: none; width: 32px; height: 34px; border: none; background: none; border-radius: 8px; color: var(--ink-faint);
  display: grid; place-items: center; }
.crm-strow .more:hover, .crm-strow .more[aria-expanded="true"] { background: var(--surface-sunken); color: var(--ink); }
.crm-strow .more .crm-ic { fill: currentColor; }
.crm-strow .reasons { flex: 1 1 100%; padding: 2px 6px 8px 38px; }
.crm-strow .reasons textarea { width: 100%; min-height: 84px; }
.crm-strow .reasons .crm-hint { margin: 0 0 6px; }
.crm-kindb { flex: none; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.crm-kindb.won { color: var(--margin); background: var(--margin-soft); border: 1px solid rgba(26,125,73,.3); }
.crm-kindb.lost { color: #B42318; background: rgba(217,45,32,.07); border: 1px solid rgba(217,45,32,.28); }
.crm-kindb.first { color: var(--ink-dim); background: var(--surface-sunken); border: 1px solid var(--line-bright); }
.crm-kindb.amo { color: var(--accent); background: var(--client-soft); border: 1px solid rgba(10,77,166,.28); }

/* типы задач: выбор в форме, кнопки в карточках, окно «Типы задач» */
.crm-kic { display: inline-flex; color: var(--sct, currentColor); }
.crm-types .crm-chip { padding: 6px 12px; }
.crm-types .crm-chip.on { color: var(--sct, var(--accent)); border-color: var(--sct, var(--accent));
  background: var(--client-soft); background: color-mix(in srgb, var(--sc, var(--accent)) 12%, var(--bg-card)); }
.crm-ttrow .tt-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; border: none; display: grid; place-items: center;
  color: var(--sct, var(--accent)); background: var(--client-soft); background: color-mix(in srgb, var(--sc, var(--accent)) 14%, var(--bg-card)); }
.crm-ttrow .tt-ic:not(:disabled):hover, .crm-ttrow .tt-ic[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--accent); }
.crm-ttrow .tt-ic:disabled { opacity: 1; cursor: default; }
.crm-ttrow.off .mid input.nm { color: var(--ink-faint); }
.crm-ttrow.off .tt-ic { filter: grayscale(1); opacity: .6; }
.crm-ttrow input.nm:disabled { opacity: 1; -webkit-text-fill-color: var(--ink); }
.crm-iconset { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.crm-iconset button { height: 34px; min-width: 0; border-radius: 9px; border: 1px solid var(--line-bright); background: var(--bg-card);
  color: var(--ink-dim); display: grid; place-items: center; cursor: pointer; }
.crm-iconset button:hover, .crm-iconset button:focus-visible { border-color: var(--ink-faint); color: var(--ink); outline: none; }
.crm-iconset button.on { border-color: var(--accent); color: var(--accent); background: var(--client-soft); box-shadow: 0 0 0 1px var(--accent); }
.crm-ttamo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.crm-ttamo .crm-hint { margin: 0; flex: 1 1 260px; }
.crm-sheet .crm-set-warn { margin-top: 10px; }

/* набор цветов */
.crm-palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.crm-palette button { height: 34px; min-width: 0; border-radius: 10px; border: 3px solid var(--bg-card); background: var(--sc); padding: 0;
  box-shadow: 0 0 0 1px var(--line-bright); cursor: pointer; }
.crm-palette button:hover, .crm-palette button:focus-visible { box-shadow: 0 0 0 2px var(--ink-faint); outline: none; }
.crm-palette button.on { box-shadow: 0 0 0 2px var(--ink); }
.crm-own { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.crm-own input[type=color] { width: 40px; height: 32px; padding: 0; border: 1px solid var(--line-bright); border-radius: 8px; background: none; cursor: pointer; }
.crm-own.on input[type=color] { box-shadow: 0 0 0 2px var(--ink); }


/* ============ планшет ============ */
@media (max-width: 1100px) {
  .crm-cols { grid-template-columns: minmax(0, 1fr); }
  .crm-side { display: none; }
  .crm-tabs .only-narrow { display: inline-block; }
  .crm-cnav .only-narrow { display: flex; }
  .crm-set { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .page.crm-wide { padding: 16px 16px 20px; }
  .crm-screen { height: calc(100dvh - 60px - 36px); }
  .crm-col { flex-basis: 262px; }
  .crm-two { grid-template-columns: minmax(0, 1fr); }
  .crm-money { grid-template-columns: repeat(2, 1fr); }
  /* итог в две строки — умещается рядом с поиском и фильтрами */
  .crm-totals { text-align: right; font-size: 12px; line-height: 1.35; white-space: normal; }
  .crm-totals .sep { display: none; }
  .crm-totals .sum { display: block; }
}

/* ============ телефон ============ */
@media (max-width: 640px) {
  .page.crm-wide { padding: 12px 12px 56px; }
  .crm-screen { height: auto; min-height: 0; display: block; }
  .crm-head { gap: 10px; margin-bottom: 10px; }
  .crm-head h2 { font-size: 21px; }
  .crm-sub { order: 5; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .crm-sub::-webkit-scrollbar { display: none; }
  .crm-sub a { flex: 1; justify-content: center; padding: 8px 10px; }
  .crm-toolbar { gap: 8px; }
  .crm-search { flex: 1 1 100%; max-width: none; order: -1; }
  .crm-search input { height: 42px; font-size: 16px; }
  .crm-toolbar .spacer { display: none; }
  #cl-type, #pl-range { flex: 1 1 100%; }
  .crm-pp { flex: 1 1 100%; height: 44px; font-size: 15px; }
  .crm-active { margin-bottom: 8px; }
  .crm-fchip { min-height: 36px; }
  .crm-fchip button { width: 32px; height: 34px; }
  .crm-saved .f { padding: 8px 13px; }
  .crm-saved .crm-link { flex: none; padding: 8px 4px; }
  #cl-type button, #pl-range button { flex: 1; }
  .crm-pipes button { padding: 8px 12px; }
  .crm-totals { flex: 1 1 0; min-width: 0; }
  .crm-saved { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -2px -12px 10px; padding: 0 12px; }
  .crm-saved::-webkit-scrollbar { display: none; }
  .crm-saved .f { flex: none; }
  .crm-btn { padding: 9px 13px; }

  /* доска: этапы — лентой сверху, на экране одна колонка во всю ширину, листается страницей */
  .crm-stabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 10px; padding: 2px 12px;
    position: sticky; top: 54px; z-index: 5; background: var(--bg); }
  .crm-stabs::-webkit-scrollbar { display: none; }
  .crm-stabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-bright);
    background: var(--bg-card); color: var(--ink-dim); font-size: 13px; font-weight: 700; border-radius: 99px; padding: 8px 13px; }
  .crm-stabs button .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--sc); }
  .crm-stabs button .n { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--ink-faint); }
  .crm-stabs button.on { border-color: var(--sct, var(--sc)); color: var(--ink); background: color-mix(in srgb, var(--sc) 12%, var(--bg-card)); }
  .crm-board { display: block; overflow: visible; background: none; border: none; box-shadow: none; border-radius: 0; }
  .crm-board-in { display: block; width: auto; min-width: 0; min-height: 0; padding: 0; }
  .crm-col { display: none; border: none; background: none; box-shadow: none; border-radius: 0; }
  .crm-col-head::before { display: none; }
  .crm-col.on { display: block; }
  .crm-col-head { position: static; padding: 0 2px 8px; border-top: none; border-bottom: none; background: none; }
  .crm-more { width: 100%; padding: 12px 8px; font-size: 13.5px; }
  .crm-col-head .nm, .crm-col-head .dot, .crm-col-head .cnt { display: none; }
  .crm-col-head .sum { padding-left: 0; margin-top: 0; font-size: 12.5px; }
  .crm-col-head .r1 { float: right; }
  .crm-col-head .add { font-size: 13px; font-weight: 700; color: var(--accent); }
  .crm-col-head .add::after { content: " сделка"; }
  .crm-col-body { padding: 0; gap: 9px; }
  .crm-card { padding: 12px 13px; border-radius: 12px; }
  .crm-card .ttl { font-size: 14.5px; padding-right: 34px; }
  .crm-card .who { font-size: 13px; }
  .crm-card .adr { font-size: 12.5px; }
  .crm-card .sum { font-size: 14px; }
  .crm-card .mv { width: 36px; height: 36px; top: 5px; right: 4px; }

  /* список: строки-карточки вместо таблицы */
  .crm-list { background: none; border: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .crm-table { display: none !important; }
  .crm-rows { display: flex; flex-direction: column; gap: 9px; }
  .crm-rows .crm-card .st { margin-top: 7px; }

  /* шторка выезжает снизу */
  .crm-veil { place-items: end center; padding: 0; }
  .crm-sheet, .crm-sheet.wide { max-width: none; border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + var(--safe-b, env(safe-area-inset-bottom)));
    max-height: 88dvh; animation: crm-up .24s cubic-bezier(.2,.9,.3,1) both; }
  .crm-opt { padding: 14px; font-size: 15px; }
  .crm-sheet .acts { flex-direction: column-reverse; }
  .crm-sheet .acts > * { width: 100%; justify-content: center; }
  .crm-grid2, .modal .crm-f2 { grid-template-columns: 1fr; }
  .modal .crm-input, .modal .crm-select, .crm-sheet .crm-input, .crm-sheet .crm-select { font-size: 16px; }

  /* карточка сделки */
  .crm-title { font-size: 21px; margin-left: -7px; padding: 2px 6px; }
  .crm-deal-head { gap: 10px; }
  .crm-deal-head .main { flex: 1 1 0; }
  .crm-deal-head > .btn-amber { flex: 1 1 100%; }
  .crm-head-acts { flex: 1 1 100%; }
  .crm-head-acts > * { flex: 1; justify-content: center; }
  /* карточка клиента: сначала сделки и дела, потом анкета */
  .crm-two > .crm-panel:last-child { order: -1; }
  .crm-phone-row { flex-wrap: wrap; }
  .crm-phone-row .p { flex: 1 1 0; }
  .crm-phone-row .l { order: 5; flex: 1 1 100%; }
  .crm-stbtn { width: 100%; justify-content: flex-start; padding: 12px 14px; }
  .crm-stbtn .chev { margin-left: auto; }
  .crm-steps { display: none; }
  .crm-money { gap: 8px; }
  .crm-money .m { padding: 10px 12px; }
  .crm-money .m b { font-size: 15.5px; }
  .crm-deal-head .meta #cd-st { display: none; }
  .crm-tab-body { padding: 14px 13px 16px; }
  .crm-cnav-q.crm-input { font-size: 16px; height: 40px; }
  .crm-tabs button { padding: 11px 12px 12px; }
  .crm-fields { grid-template-columns: 1fr 1fr; gap: 10px; }
  .crm-f.w2 { grid-column: 1 / -1; }
  .crm-f input, .crm-f select, .crm-f textarea { font-size: 16px; padding: 10px 11px; }
  .crm-row { flex-wrap: wrap; }
  .crm-row .acts { width: 100%; justify-content: flex-start; padding-left: 45px; }
  .crm-row .acts .crm-btn { padding: 8px 10px; font-size: 12.5px; }
  .crm-plan .crm-row { padding: 12px 13px; }
  .crm-day { padding: 14px 13px 4px; }
  .crm-compose textarea { font-size: 16px; }
  /* настройки воронок */
  .crm-set-panel { padding: 14px 12px; }
  .crm-ttl-in { font-size: 19px; }
  .crm-set-top .crm-f { flex: 1 1 100%; }
  .crm-strow { padding: 4px; gap: 4px; }
  .crm-strow .reasons { padding-left: 6px; }
  .crm-addrow .crm-btn { flex: 1 1 100%; justify-content: center; }
  .crm-set-foot .crm-btn { flex: 1 1 100%; justify-content: center; }
  .crm-sheet .crm-pop-body.colors .crm-palette { gap: 10px; }
  .crm-setrow { flex-wrap: wrap; }
  .crm-setrow .nm { flex: 1 1 60%; }
}
@media (min-width: 641px) { .crm-stbtn { display: none; } }
@keyframes crm-up { from { transform: translateY(40px); opacity: 0; } }

/* Планшет и другие сенсорные экраны шире телефона: кнопки под палец, а не под курсор */
@media (pointer: coarse) {
  .crm-grip { width: 40px; height: 40px; }
  .crm-ttrow .tt-ic { width: 40px; height: 40px; }
  .crm-iconset button { height: 38px; }
  .crm-addbar .crm-btn { min-height: 40px; }
  .crm-strow .sw { width: 36px; height: 36px; border-width: 5px; }
  .crm-strow .more { width: 40px; height: 40px; }
  .crm-prow .pick { min-height: 44px; justify-content: center; }
  .crm-mi { min-height: 44px; }
  .crm-palette button { min-height: 36px; }
  .crm-pop.colors { width: 384px; }
  .crm-own input[type=color] { width: 48px; height: 40px; }
  .crm-saved .f { min-height: 36px; }
  .crm-fchip { min-height: 36px; }
  .crm-fchip button { width: 32px; height: 34px; }
  .crm-more { min-height: 40px; }
  .crm-setrow .star { width: 40px; height: 40px; }
  /* на сенсорном экране колонка доски встаёт ровно при листании вбок */
  .crm-board { scroll-snap-type: x proximity; }
  .crm-col { scroll-snap-align: start; }
}
@media (pointer: coarse) and (min-width: 641px) {
  .crm-pipes button { min-height: 40px; padding-left: 14px; padding-right: 14px; }
  .crm-pp { height: 42px; }
  .crm-col-head .add, .crm-card .mv { min-width: 36px; min-height: 36px; }
  .crm-btn { min-height: 40px; }
  .crm-st { min-height: 34px; }
  .crm-steps button { min-height: 40px; }
  .crm-phone-row button { min-width: 36px; min-height: 36px; }
  .crm-link { padding-top: 8px; padding-bottom: 8px; }
}

/* ---- billing.css ---- */
/* Подписка и тариф (billing.js, классы bl-*) и раздел «Управление сервисом» (platform.js, pf-*).
   Опирается на переменные кабинета из app.css и общие блоки бухгалтерии (acc-panel, acc-btn,
   acc-tag, acc-form). Сначала телефон: одна колонка, поля 16 px, нажимаемое — от 44 px;
   лестница тарифов и таблицы разворачиваются вширь там, где для них есть место. */

/* ============================================================
   Полоса в кабинете: срок подходит к концу / только просмотр
   ============================================================ */
.bl-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  padding: 10px 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink);
  border-bottom: 1px solid var(--line-bright);
}
.bl-banner.is-warn { background: #FFF5E0; border-bottom-color: rgba(224,138,0,.4); }
.bl-banner.is-stop { background: #FDECEA; border-bottom-color: rgba(217,45,32,.35); }
.bl-banner__text { flex: 1 1 260px; min-width: 0; }
.bl-banner__go {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 16px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700;
}
.bl-banner__go:hover { background: var(--navy); }
.bl-banner__x {
  flex: none; width: 44px; height: 44px; margin: 0 -8px 0 auto; border: none; background: none;
  border-radius: 10px; font-size: 24px; line-height: 1; color: var(--ink-dim);
}
.bl-banner__x:hover { background: rgba(16,24,40,.06); color: var(--ink); }

.bl-blocked {
  max-width: 560px; margin: 8vh auto 0; padding: 28px 22px; text-align: center;
  background: var(--bg-card); border: 1px solid var(--line-bright); border-top: 4px solid var(--red);
  border-radius: 14px;
}
.bl-blocked h2 { font: 700 22px/1.25 var(--disp); margin-bottom: 10px; }
.bl-blocked p { font-size: 14.5px; color: var(--ink-dim); line-height: 1.55; }
.bl-blocked__sub { margin-top: 10px; font-size: 13px !important; color: var(--ink-faint) !important; }

/* ============================================================
   Экран тарифа
   ============================================================ */
.bl, .bl-cfg { display: flex; flex-direction: column; gap: 12px; }
.bl-loading { padding: 30px 0; text-align: center; color: var(--ink-faint); font-size: 13.5px; }
.bl-h { margin: 14px 0 0; font: 700 15px/1.3 var(--disp); color: var(--ink); }
.bl-h span { margin-left: 8px; font: 500 12.5px var(--body); color: var(--ink-faint); }

/* значок «ступени» — уровень тарифа */
.bl-stairs { flex: none; }
.bl-stairs rect { fill: var(--line-bright); }
.bl-stairs rect.on { fill: var(--accent); }

.bl-head {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px;
  background: var(--bg-raise); border: 1px solid var(--line); border-left: 4px solid var(--green);
  border-radius: 12px;
}
.bl-head.is-warn { border-left-color: var(--amber); }
.bl-head.is-stop { border-left-color: var(--red); }
.bl-head > .bl-stairs { width: 38px; height: 32px; margin-top: 3px; }
.bl-head__main { min-width: 0; }
.bl-head__title { font: 700 21px/1.2 var(--disp); letter-spacing: -.01em; }
.bl-head__line { margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--ink-dim); }
.bl-head.is-stop .bl-head__line { color: var(--ink); }
.bl-head__money { margin-top: 6px; font-size: 13px; color: var(--ink-dim); }

.bl-req {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 13px 16px; border: 1px solid var(--line-bright); border-radius: 12px;
}
.bl-req.is-new { background: rgba(10,77,166,.05); border-color: rgba(10,77,166,.3); }
.bl-req.is-no { background: rgba(217,45,32,.05); border-color: rgba(217,45,32,.3); }
.bl-req.is-yes { background: rgba(31,157,87,.06); border-color: rgba(31,157,87,.35); }
.bl-req__t { font-weight: 700; font-size: 14.5px; }
.bl-req__b { font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); }
.bl-req .btn-ghost.sm { margin-top: 4px; background: var(--bg-card); }

/* занятое место */
.bl-use { display: grid; grid-template-columns: 1fr; gap: 10px; }
.bl-meter { padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.bl-meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bl-meter__top span { font-size: 13px; font-weight: 600; color: var(--ink-dim); }
.bl-meter__top b { font: 700 14.5px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.bl-meter__track { height: 8px; margin-top: 9px; border-radius: 99px; background: var(--surface-sunken); border: 1px solid var(--line); overflow: hidden; }
.bl-meter__track i { display: block; height: 100%; min-width: 2px; border-radius: 99px; background: var(--green); transition: width .35s ease; }
.bl-meter.is-near .bl-meter__track i { background: var(--amber); }
.bl-meter.is-full .bl-meter__track i { background: var(--red); }
.bl-meter.is-full .bl-meter__top b { color: var(--red); }
.bl-meter__note { margin-top: 7px; font-size: 12px; line-height: 1.4; color: var(--ink-faint); }
.bl-usenote, .bl-how { font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); max-width: 720px; }

/* лестница тарифов: на телефоне — строки, шире — настоящие ступени */
.bl-ladder { display: grid; grid-template-columns: 1fr; gap: 8px; }
.bl-step {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline;
  min-height: 64px; padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--bg-card); color: var(--ink); font-family: var(--body);
  border: 1px solid var(--line-bright); border-left: 4px solid var(--line-bright); border-radius: 12px;
  transition: border-color .15s, background .15s;
}
/* у кнопок кабинета «выключено» = полупрозрачно; ступень-справка должна читаться */
.bl-step:disabled { cursor: default; color: var(--ink); opacity: 1; }
.bl-step:not(:disabled):hover { border-color: var(--accent); }
.bl-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bl-step.is-sel { border-color: var(--accent); background: rgba(10,77,166,.05); box-shadow: inset 0 0 0 1px var(--accent); }
.bl-step__name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font: 700 15.5px var(--disp); }
.bl-step__tag {
  font: 600 11.5px var(--body); color: var(--margin); background: var(--margin-soft);
  border-radius: 99px; padding: 2px 9px;
}
.bl-step__price { font: 700 15.5px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.bl-step__price small { font: 500 12px var(--body); color: var(--ink-dim); }
.bl-step__lims { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--ink-dim); }

/* дополнения */
.bl-addons { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); overflow: hidden; }
.bl-addon { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 12px 10px 14px; }
.bl-addon + .bl-addon { border-top: 1px solid var(--line); }
.bl-addon__t b { display: block; font-size: 14.5px; font-weight: 600; }
.bl-addon__t span { display: block; font-size: 12.5px; color: var(--ink-dim); line-height: 1.4; }
.bl-addon__sum { grid-column: 1; font: 600 13px var(--mono); color: var(--margin); }
.bl-addon__sum:empty { display: none; }
.bl-stepper {
  grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center;
  border: 1px solid var(--line-bright); border-radius: 10px; background: var(--bg-card); overflow: hidden;
}
.bl-stepper button { width: 46px; height: 44px; border: none; background: none; font-size: 21px; line-height: 1; color: var(--accent); }
.bl-stepper button:hover:not(:disabled) { background: var(--bg-raise); }
.bl-stepper button:disabled { color: var(--ink-faint); cursor: default; }
.bl-stepper button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bl-stepper output { min-width: 34px; text-align: center; font: 700 15px var(--mono); font-variant-numeric: tabular-nums; }

/* срок */
.bl-period {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border: 1px solid var(--line-bright); border-radius: 10px; overflow: hidden; background: var(--bg-card);
}
.bl-period button { min-height: 46px; padding: 0 14px; border: none; background: none; color: var(--ink-dim); font: 600 14.5px var(--body); }
.bl-period button + button { border-left: 1px solid var(--line-bright); }
.bl-period button.on { background: var(--accent); color: #fff; }
.bl-period i { font-style: normal; font-weight: 700; margin-left: 6px; color: var(--margin); }
.bl-period button.on i { color: #fff; }

.bl-result { display: flex; flex-wrap: wrap; gap: 3px 16px; margin-top: 2px; font-size: 13.5px; color: var(--ink-dim); }
.bl-result b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.bl-fit {
  margin-top: 8px; padding: 10px 13px; font-size: 13px; line-height: 1.5; color: var(--ink);
  background: rgba(224,138,0,.09); border: 1px solid rgba(224,138,0,.35); border-radius: 10px;
}
.bl-comment { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.bl-comment span { font-size: 13px; font-weight: 600; color: var(--ink-dim); }
.bl-comment textarea, .pf-form textarea {
  width: 100%; min-height: 64px; padding: 10px 13px; resize: vertical; outline: none;
  font: 400 15px/1.45 var(--body); color: var(--ink);
  background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 10px;
}
.bl-comment textarea:focus, .pf-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.15); }

.bl-total {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 12px 10px 14px;
  background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 12px;
  position: sticky; bottom: calc(var(--tabbar-h, 58px) + var(--safe-b, 0px) + 8px); z-index: 5;
  box-shadow: 0 8px 24px rgba(16,24,40,.14);
}
body.kb-open .bl-total { position: static; box-shadow: none; }
.bl-total__sum { grid-column: 1; grid-row: 1; min-width: 0; font: 700 20px/1.15 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.bl-total__note { grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; color: var(--ink-dim); line-height: 1.4; }
.bl-total .btn-amber { grid-column: 2; grid-row: 1; min-height: 48px; padding-left: 16px; padding-right: 16px; }

@media (min-width: 641px) {
  .bl-banner { padding: 10px 28px; }
  .bl-use { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bl-meter__top { flex-direction: column; align-items: flex-start; gap: 2px; }
  .bl-addon { grid-template-columns: minmax(0, 1fr) 96px auto; }
  .bl-addon__sum { grid-column: 2; text-align: right; }
  .bl-stepper { grid-column: 3; grid-row: 1; }
  .bl-period { align-self: flex-start; min-width: 320px; }
  .bl-total { position: static; box-shadow: none; padding: 14px 16px; gap: 2px 18px; }
  .bl-total__sum { font-size: 24px; align-self: end; }
  .bl-total__note { grid-column: 1; align-self: start; }
  .bl-total .btn-amber { grid-row: 1 / span 2; padding-left: 22px; padding-right: 22px; }
}

/* ступени: каждый следующий тариф выше предыдущего, низ общий. Все ступени тянутся до низа
   ряда, а верх каждой опущен отступом — лестница держится при любом переносе строк внутри */
@media (min-width: 700px) {
  .bl-ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; align-items: stretch; padding-top: 12px; }
  .bl-step {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px;
    padding: 16px 14px 16px; margin-left: -1px; border-radius: 10px 10px 0 0;
    border: 1px solid var(--line-bright); border-top: 3px solid var(--line-bright);
  }
  .bl-step:first-child { margin-left: 0; border-bottom-left-radius: 10px; }
  .bl-step:last-child { border-bottom-right-radius: 10px; }
  .bl-step:nth-child(1) { margin-top: 66px; }
  .bl-step:nth-child(2) { margin-top: 44px; }
  .bl-step:nth-child(3) { margin-top: 22px; }
  .bl-step.is-static { background: var(--bg-raise); }
  .bl-step__tag { position: absolute; top: -12px; left: 12px; border: 1px solid rgba(26,125,73,.35); }
  .bl-step:not(:disabled):hover { border-color: var(--line-bright); border-top-color: var(--accent); }
  .bl-step.is-sel { z-index: 1; border-color: var(--accent); border-top-color: var(--accent); }
  .bl-step__price { text-align: left; font-size: 17px; white-space: normal; }
  .bl-step__price small { display: block; margin-top: 1px; }
  .bl-step__lims { flex-direction: column; gap: 3px; font-size: 12.5px; line-height: 1.35; }
}

/* ============================================================
   Управление сервисом
   ============================================================ */
.pf { display: flex; flex-direction: column; gap: 16px; }
.pf .page-head { margin-bottom: 0; }
.pf-dim { color: var(--ink-faint); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.pf-badge {
  margin-left: 7px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff; font: 700 11.5px var(--mono);
}
#pf-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.pf-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-tools #pf-q { grid-column: 1 / -1; }
.pf-input {
  width: 100%; min-height: 44px; padding: 0 12px; outline: none; min-width: 0;
  font: 500 15px var(--body); color: var(--ink);
  background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 10px;
}
.pf-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.15); }
.pf-input:disabled { background: var(--surface-sunken); color: var(--ink-faint); }

.pf-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px 2px; }
.pf-chips::-webkit-scrollbar { display: none; }
.pf-chips button {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-bright); border-radius: 99px; background: var(--bg-card);
  color: var(--ink-dim); font: 600 13.5px var(--body); white-space: nowrap;
}
.pf-chips button b { font: 600 12px var(--mono); color: var(--ink-faint); }
.pf-chips button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pf-chips button.on b { color: rgba(255,255,255,.8); }

/* список пространств: карточки, на широком экране — строки с общими колонками */
.pf-list { display: flex; flex-direction: column; gap: 10px; }
.pf-list__head { display: none; }
.pf-row {
  display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; color: var(--ink);
  transition: border-color .15s;
}
.pf-row:hover { border-color: var(--accent); }
.pf-row.is-stop { border-left: 4px solid var(--red); }
.pf-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-row__co b { font-size: 15.5px; font-weight: 700; overflow-wrap: anywhere; }
.pf-row__co .acc-tag { align-self: flex-start; margin-top: 4px; }
.pf-row__own > span:first-child { font-size: 14px; font-weight: 600; }
.pf-plan { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; }
.pf-state { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.pf-row__dates { font-size: 12.5px; color: var(--ink-faint); }
.pf-row__dates > span { overflow-wrap: anywhere; }

.pf-mini {
  position: relative; display: flex; justify-content: space-between; gap: 10px; align-items: center;
  min-height: 22px; padding: 1px 8px; border-radius: 6px; overflow: hidden;
  background: var(--surface-sunken); font-size: 12.5px;
}
.pf-mini i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(31,157,87,.2); }
.pf-mini.is-near i { background: rgba(224,138,0,.26); }
.pf-mini.is-full i { background: rgba(217,45,32,.22); }
.pf-mini em, .pf-mini b { position: relative; font-style: normal; }
.pf-mini em { color: var(--ink-dim); }
.pf-mini b { font: 600 12px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-more { text-align: center; font-size: 13px; color: var(--ink-faint); padding: 6px 0; }
.pf-more .acc-btn { min-height: 44px; }

/* карточка пространства */
.pf-back { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 14px; }
.pf-card-head { display: flex; flex-direction: column; gap: 5px; }
.pf-card-head h2 { font: 600 26px/1.2 var(--disp); letter-spacing: -.01em; overflow-wrap: anywhere; }
.pf-contact { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: 14.5px; }
.pf-contact a, .pf-contact span { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; overflow-wrap: anywhere; }
.pf-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 14px; }
.pf-sub .pf-plan b { font: 700 18px var(--disp); }
.pf-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.pf-actions .acc-btn { min-height: 44px; white-space: normal; text-align: center; line-height: 1.2; }
.pf-actions .acc-btn:disabled { opacity: .5; cursor: default; }
.pf-actions .acc-btn:disabled:hover { border-color: var(--line-bright); color: var(--ink); }
.pf .acc-panel > .body { display: flex; flex-direction: column; gap: 0; }
.pf .acc-panel > .body > .bl-use { margin: 0; }

/* заявки */
.pf-reqs { display: flex; flex-direction: column; gap: 10px; }
.pf-req { display: flex; flex-direction: column; gap: 7px; padding: 14px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; }
.acc-panel .pf-req { padding: 12px 0; border: none; border-radius: 0; }
.acc-panel .pf-req + .pf-req { border-top: 1px solid var(--line); }
.acc-panel .pf-req:first-child { padding-top: 0; }
.acc-panel .pf-req:last-child { padding-bottom: 0; }
.pf-req__head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.pf-req__head a b { font-size: 15.5px; }
.pf-req__date { margin-left: auto; }
.pf-req__what { font-size: 14.5px; line-height: 1.45; }
.pf-req__what b { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-req__who { font-size: 13px; line-height: 1.5; color: var(--ink-dim); overflow-wrap: anywhere; }
.pf-req__comment { padding: 9px 12px; font-size: 13.5px; line-height: 1.5; background: var(--bg-raise); border-left: 3px solid var(--line-bright); border-radius: 0 8px 8px 0; overflow-wrap: anywhere; }
.pf-req__act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.pf-req__act .acc-btn { min-height: 44px; }

/* окна действий */
.pf-form .seg { margin-bottom: 10px; }
.pf-form input[hidden] { display: none; }
.pf-lim { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pf-radio { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pf-radio label {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--line-bright); border-radius: 10px; background: var(--bg-card);
}
.pf-radio label:has(input:checked) { border-color: var(--accent); background: rgba(10,77,166,.05); }
.pf-form .pf-radio input { width: 20px; min-height: 20px; height: 20px; padding: 0; flex: none; accent-color: var(--accent); }
.pf-radio span { display: flex; flex-direction: column; line-height: 1.3; }
.pf-radio b { font-size: 14.5px; font-weight: 600; }
.pf-radio i { font-style: normal; font-size: 12.5px; color: var(--ink-dim); }

/* цены */
.pf-prices { gap: 0 !important; }
.pf-prow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px 0; }
.pf-prow + .pf-prow { border-top: 1px solid var(--line); }
.pf-prow:first-child { padding-top: 0; }
.pf-prow:last-child { padding-bottom: 0; }
.pf-prow__name { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; font-size: 15px; }
.pf-prow label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pf-prow label span { font-size: 12.5px; font-weight: 600; color: var(--ink-dim); line-height: 1.3; }
.pf-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pf-savebar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.pf-savebar .btn-amber, .pf-savebar .btn-ghost { min-height: 46px; }

/* журнал */
.pf-log { display: flex; flex-direction: column; }
.pf-ev { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 11px 0; }
.pf-ev + .pf-ev { border-top: 1px solid var(--line); }
.pf-ev:first-child { padding-top: 0; }
.pf-ev:last-child { padding-bottom: 0; }
.pf-ev__when { font: 500 12px var(--mono); color: var(--ink-faint); }
.pf-ev__what { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.pf-ev__note { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-dim); }
.pf-ev__who { font-size: 12.5px; color: var(--ink-faint); overflow-wrap: anywhere; }

/* ссылки в строке текста: зона нажатия больше самой строки, вёрстка не сдвигается */
.pf-ev__what a, .pf-req__head a { display: inline-block; padding: 13px 4px; margin: -13px -4px; font-weight: 600; }

@media (max-width: 640px) {
  /* название раздела уже стоит в верхней панели */
  body[data-route="platform"] .pf > .page-head { display: none; }
  .pf-savebar > * { flex: 1 1 100%; }
}

@media (min-width: 900px) {
  .pf-tools { grid-template-columns: minmax(0, 1fr) 190px 220px; }
  .pf-tools #pf-q { grid-column: auto; }
}

@media (min-width: 641px) {
  .pf-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .pf-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 20px; padding: 14px 16px; }
  .pf-row__dates { grid-column: 1 / -1; flex-direction: row !important; gap: 4px 18px !important; flex-wrap: wrap; }
  .pf-actions { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .pf-req__act { display: flex; }
  .pf-lim { grid-template-columns: 1fr 1fr; }
  .pf-prow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pf-prow.is-addon { grid-template-columns: repeat(2, minmax(0, 240px)); }
  .pf-ev { grid-template-columns: 132px minmax(0, 1fr) minmax(0, 200px); gap: 14px; align-items: baseline; }
  .pf-ev__who { text-align: right; }
}

/* мышь и большой экран: нажимаемое может быть компактнее, чем под палец */
@media (min-width: 1101px) {
  .bl-banner__go { min-height: 36px; }
  .bl-banner__x { width: 36px; height: 36px; }
  .pf-chips button { min-height: 38px; }
  .pf-contact a, .pf-contact span { min-height: 32px; }
}

@media (min-width: 1180px) {
  .pf-list { gap: 0; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .pf-list__head, .pf-row {
    display: grid; align-items: start; gap: 16px; padding: 12px 16px;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, 1.1fr) minmax(0, 1.15fr) minmax(0, .95fr);
  }
  .pf-list__head { padding: 10px 16px; background: var(--surface-sunken); font-size: 12.5px; font-weight: 600; color: var(--ink-dim); }
  .pf-row { border: none; border-top: 1px solid var(--line); border-radius: 0; }
  .pf-row:hover { background: var(--bg-raise); }
  .pf-row.is-stop { border-left: none; box-shadow: inset 4px 0 0 var(--red); }
  .pf-row__dates { grid-column: auto; flex-direction: column !important; gap: 2px !important; }
  .pf-prow { grid-template-columns: 170px repeat(4, minmax(0, 1fr)); align-items: end; }
  .pf-prow.is-addon { grid-template-columns: 170px repeat(2, minmax(0, 220px)); }
  .pf-prow__name { grid-column: auto; padding-bottom: 12px; }
}

/* ---- site-leads.css ---- */
/* Заявки с сайта (#/integrations/site, site-leads.js). Только своё: все классы с приставкой sl-,
   цвета и шрифты — переменные кабинета. Сначала телефон (375 px), шире — в конце файла. */

.sl-wrap { max-width: 960px; min-width: 0; }
.sl-ic { display: inline-block; vertical-align: -.16em; flex: none; }

.sl-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; margin-bottom: 18px; }
.sl-head .t { flex: 1 1 260px; min-width: 0; }
.sl-head h2 { font-family: var(--disp); font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; }
.sl-head p { color: var(--ink-dim); font-size: 14px; line-height: 1.5; margin-top: 6px; max-width: 640px; }
.sl-head .btn-amber { flex: 1 1 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* ---------- кнопки и поля экрана ---------- */
.sl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px;
  background: var(--bg-card); border: 1px solid var(--line-bright); color: var(--ink-dim); border-radius: 10px;
  padding: 9px 14px; font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s; }
.sl-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.sl-btn.on { color: var(--accent); border-color: var(--accent); background: var(--client-soft); }
.sl-btn.danger { color: var(--red); border-color: rgba(217,45,32,.35); }
.sl-btn.danger:hover { border-color: var(--red); }
.sl-btn[disabled] { opacity: .55; cursor: default; }
.sl-link { display: inline-flex; align-items: center; background: none; border: none; color: var(--accent);
  font-weight: 600; font-size: 14px; padding: 12px 0; min-height: 44px; text-align: left; }
.sl-link:hover { text-decoration: underline; }
.sl-link.danger { color: var(--red); }

.sl-form .field select, .sl-form .field textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line-bright); border-radius: 10px;
  padding: 12px 14px; color: var(--ink); font-family: var(--body); font-size: 16px; outline: none; min-height: 48px;
}
.sl-form .field input { font-size: 16px; }
.sl-form .field textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
.sl-form .field select:focus, .sl-form .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.15); }
.sl-form .hint { font-size: 13px; color: var(--ink-faint); line-height: 1.45; margin-top: 6px; }
.sl-form .pair { display: grid; grid-template-columns: 1fr; gap: 0; }
.sl-form .more { display: flex; flex-direction: column; margin-top: 6px; border-top: 1px dashed var(--line-bright); padding-top: 6px; }

/* окно источника чуть шире обычного: в нём два списка в ряд */
.modal.sl-modal { max-width: 540px; }

/* выбор «откуда заявки»: три крупные строки */
.sl-kinds { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; }
.sl-kinds label { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--line-bright); border-radius: 12px; background: var(--bg); }
.sl-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.sl-kinds label:has(input:checked) { border-color: var(--accent); background: var(--client-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.sl-kinds label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(10,77,166,.2); }
.sl-kinds b { display: block; font-size: 14.5px; color: var(--ink); }
.sl-kinds span span { display: block; font-size: 12.5px; color: var(--ink-dim); line-height: 1.35; }

.sl-kind-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--client-soft); color: var(--accent); }

/* ---------- пусто: с чего начать ---------- */
.sl-start { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sl-start button { display: flex; align-items: flex-start; gap: 14px; text-align: left; width: 100%;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 16px;
  box-shadow: 0 1px 3px rgba(16,24,40,.06); transition: border-color .15s, box-shadow .15s, transform .15s; }
.sl-start button:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(16,24,40,.10); }
.sl-start b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 3px; }
.sl-start span span { display: block; font-size: 13.5px; color: var(--ink-dim); line-height: 1.45; }
.sl-start em { display: inline-block; margin-top: 10px; font-style: normal; font-weight: 700; font-size: 14px; color: var(--accent); }
.sl-how { margin-top: 18px; padding: 14px 16px; border: 1px dashed var(--line-bright); border-radius: 14px;
  color: var(--ink-dim); font-size: 13.5px; line-height: 1.55; }
.sl-how b { color: var(--ink); }

/* ---------- источник ---------- */
.sl-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(16,24,40,.06); min-width: 0; }
.sl-card.open { border-color: var(--line-bright); box-shadow: 0 6px 20px rgba(16,24,40,.08); }
.sl-top { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 14px 14px 10px; }
.sl-name { font-weight: 700; font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; }
.sl-kind { font-size: 12.5px; color: var(--ink-faint); }
.sl-card.off .sl-name { color: var(--ink-dim); }
.sl-card.off .sl-kind-ic { background: var(--surface-sunken); color: var(--ink-faint); }
.sl-target { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; overflow-wrap: anywhere; margin-top: 4px; }
.sl-target .st { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.sl-target .st i { width: 8px; height: 8px; border-radius: 99px; background: var(--sc, var(--ink-faint)); flex: none; }
.sl-tag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--ink-dim); background: var(--surface-sunken);
  border: 1px solid var(--line); border-radius: 99px; padding: 1px 9px; margin: 2px 2px 0 0; }
.sl-note { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; padding: 9px 11px;
  border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--amber-deep);
  background: rgba(224,138,0,.09); border: 1px solid rgba(224,138,0,.32); }
.sl-note.off { color: var(--ink-dim); background: var(--surface-sunken); border-color: var(--line); }

/* выключатель: зона нажатия 44 px */
.sl-switch { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; min-width: 52px;
  min-height: 44px; cursor: pointer; }
.sl-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sl-switch i { width: 46px; height: 28px; border-radius: 99px; background: var(--line-bright); position: relative;
  transition: background .18s; flex: none; }
.sl-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.3); transition: transform .18s; }
.sl-switch input:checked + i { background: var(--green); }
.sl-switch input:checked + i::after { transform: translateX(18px); }
.sl-switch input:focus-visible + i { box-shadow: 0 0 0 3px rgba(10,77,166,.25); }

.sl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.sl-stats div { padding: 9px 4px; text-align: center; min-width: 0; }
.sl-stats div + div { border-left: 1px solid var(--line); }
.sl-stats b { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; color: var(--ink); }
.sl-stats b.ok { color: var(--green); }
.sl-stats b.zero { color: var(--ink-faint); font-weight: 500; }
.sl-stats span { display: block; font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-last { padding: 8px 14px 0; font-size: 12.5px; color: var(--ink-faint); }

.sl-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px 14px; }
.sl-acts .sl-btn { min-width: 0; padding-left: 8px; padding-right: 8px; }

/* ---------- раскрытая часть: подключение и журнал ---------- */
.sl-body { border-top: 1px solid var(--line); padding: 14px; background: var(--bg-raise); border-radius: 0 0 14px 14px; min-width: 0; }
.sl-sec { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 8px; }
.sl-sec + .sl-dim { margin-top: -2px; }
.sl-dim { color: var(--ink-dim); font-size: 13.5px; line-height: 1.5; }
.sl-url { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.sl-url code, .sl-code { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: var(--ink);
  background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 10px; padding: 11px 12px;
  overflow-wrap: anywhere; min-width: 0; }
.sl-url code { display: block; user-select: all; }
.sl-code { display: block; white-space: pre-wrap; margin: 8px 0; tab-size: 2; }
.sl-seg { display: flex; gap: 2px; background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 12px;
  padding: 3px; margin: 18px 0 12px; }
.sl-seg button { flex: 1 1 0; min-width: 0; min-height: 44px; border: none; background: none; border-radius: 9px;
  font-size: 13px; font-weight: 700; color: var(--ink-dim); padding: 4px 6px; line-height: 1.2; }
.sl-seg button.on { background: var(--accent); color: #fff; }
.sl-steps { list-style: none; counter-reset: sl; margin: 0; padding: 0; }
.sl-steps > li { counter-increment: sl; position: relative; padding: 0 0 14px 40px; font-size: 14.5px; line-height: 1.55;
  color: var(--ink); min-width: 0; }
.sl-steps > li::before { content: counter(sl); position: absolute; left: 0; top: -2px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--client-soft); color: var(--accent); font: 700 13px/28px var(--mono); text-align: center; }
.sl-steps > li:last-child { padding-bottom: 0; }
.sl-steps b { font-weight: 700; }
.sl-steps .path { font-weight: 700; color: var(--navy); }
.sl-steps .sub { display: block; color: var(--ink-dim); font-size: 13.5px; margin-top: 3px; }
.sl-steps .sl-btn { margin-top: 8px; }
.sl-tech { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); }
.sl-tech summary { cursor: pointer; padding: 12px 14px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--ink-dim);
  display: flex; align-items: center; }
.sl-tech[open] summary { border-bottom: 1px solid var(--line); color: var(--ink); }
.sl-tech .in { padding: 12px 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); }
.sl-tech .in p + p { margin-top: 8px; }
.sl-tech .in b { color: var(--ink); }

/* журнал */
.sl-jhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 4px; }
.sl-jhead .sl-sec { margin: 0; flex: 1 1 100%; }
.sl-row { padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.sl-row:last-of-type { border-bottom: none; }
.sl-row .h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sl-row time { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }
.sl-res { font-size: 12px; font-weight: 700; border-radius: 99px; padding: 2px 10px; border: 1px solid; white-space: nowrap; }
.sl-res.created { color: var(--green); border-color: rgba(31,157,87,.4); background: rgba(31,157,87,.09); }
.sl-res.duplicate { color: var(--amber-deep); border-color: rgba(224,138,0,.4); background: rgba(224,138,0,.09); }
.sl-res.rejected { color: var(--red); border-color: rgba(217,45,32,.4); background: rgba(217,45,32,.07); }
.sl-res.ping, .sl-res.check { color: var(--accent); border-color: rgba(10,77,166,.35); background: rgba(10,77,166,.07); }
.sl-row .who { font-weight: 600; font-size: 14.5px; margin-top: 6px; overflow-wrap: anywhere; }
.sl-row .msg { font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; margin-top: 3px; overflow-wrap: anywhere; }
.sl-row .ra { display: flex; flex-wrap: wrap; gap: 0 18px; }
.sl-kv { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 8px; padding: 10px 12px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; line-height: 1.5; }
.sl-kv dt { color: var(--ink-faint); font-size: 12px; margin-top: 8px; overflow-wrap: anywhere; }
.sl-kv dt:first-child { margin-top: 0; }
.sl-kv dd { color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.sl-empty { padding: 22px 12px; text-align: center; color: var(--ink-dim); font-size: 14px; line-height: 1.5;
  border: 1px dashed var(--line-bright); border-radius: 12px; background: var(--bg-card); }

/* итог проверки (в окне) */
.sl-result { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; margin-bottom: 14px;
  font-size: 14.5px; line-height: 1.5; }
.sl-result.ok { color: #14532d; background: rgba(31,157,87,.10); border: 1px solid rgba(31,157,87,.35); }
.sl-result.bad { color: #7a1b14; background: rgba(217,45,32,.07); border: 1px solid rgba(217,45,32,.35); }
.sl-result b { display: block; }
.sl-next { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.sl-next li { margin: 0 0 6px 18px; }

/* ---------- планшет и компьютер ---------- */
@media (min-width: 641px) {
  .sl-head h2 { font-size: 26px; }
  .sl-head .btn-amber { flex: 0 0 auto; min-height: 44px; }
  .sl-form .pair { grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .sl-start { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sl-start button { flex-direction: column; height: 100%; }
  .sl-top { padding: 16px 18px 12px; }
  .sl-last { padding: 8px 18px 0; }
  .sl-acts { display: flex; flex-wrap: wrap; padding: 12px 18px 16px; }
  .sl-acts .sl-btn { padding-left: 14px; padding-right: 14px; }
  .sl-body { padding: 18px; }
  .sl-url { flex-direction: row; align-items: stretch; }
  .sl-url code { flex: 1 1 auto; }
  .sl-url .sl-btn { flex: none; }
  .sl-seg { display: inline-flex; }
  .sl-seg button { flex: 0 0 auto; padding: 4px 16px; }
  .sl-kv { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 6px 14px; }
  .sl-kv dt { margin-top: 0; font-size: 13px; }
  .sl-jhead .sl-sec { flex: 1 1 auto; }
}
/* компьютер с мышью: кнопки компактнее (на планшете зоны нажатия остаются 44 px) */
@media (min-width: 1101px) {
  .sl-form .field select, .sl-form .field textarea, .sl-form .field input { font-size: 15px; }
  .sl-acts .sl-btn { min-height: 40px; }
  .sl-seg button { min-height: 38px; }
  .sl-link { padding: 6px 0; min-height: 32px; }
}
@media (min-width: 900px) {
  /* счётчики встают в строку с названием */
  .sl-card > .sl-row1 { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
  .sl-stats { border-top: none; border-bottom: none; border-left: 1px solid var(--line); grid-template-columns: repeat(4, 96px); align-content: center; }
  .sl-card > .sl-row1 + .sl-last { border-top: 1px solid var(--line); padding-top: 10px; }
}
/* в окне создания/правки на телефоне поля — в размер пальца */
@media (max-width: 640px) {
  .modal .sl-form .field { margin-bottom: 14px; }
}

/* ---- allchat.css ---- */
/* Мессенджеры: переписка в карточке, экран «Чаты», экран подключения. Только то, чего нет
   в app.css и crm.css; цвета и шрифты — переменные кабинета. Сначала компьютер, ниже —
   планшет и телефон (на телефоне открытая переписка занимает весь экран, поле ввода стоит
   над клавиатурой по --vvh/--vvt из app.js). */

.ac-ic { display: inline-block; vertical-align: -.16em; flex: none; }

/* ---------- мелкие части ---------- */
.ac-type { display: inline-block; width: 9px; height: 9px; border-radius: 99px; background: var(--ink-faint);
  flex: none; margin-right: 6px; vertical-align: .02em; }
.ac-type.ac-wa { background: #25A55B; }
.ac-type.ac-tg { background: #2F8FD8; }
.ac-type.ac-ig { background: linear-gradient(135deg, #F7A23B, #D6336C 55%, #7B3FD1); }
.ac-type.ac-mx { background: #6941C6; }
.ac-type.lg { width: 38px; height: 38px; border-radius: 12px; margin: 0; }

.ac-ava { position: relative; width: 40px; height: 40px; border-radius: 99px; flex: none; display: grid;
  place-items: center; background: var(--client-soft); color: var(--accent); font-weight: 700; font-size: 14px;
  overflow: hidden; letter-spacing: -.01em; }
.ac-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* значок непрочитанного на карточке сделки и в строке списка */
.ac-badge { display: inline-flex; align-items: center; gap: 3px; background: #1F9D57; color: #fff; border-radius: 99px;
  padding: 0 7px 0 6px; line-height: 17px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; }
.ac-badge[hidden] { display: none; }
.ac-badge i { font-style: normal; }
.crm-table .ac-badge { margin-left: 6px; vertical-align: 1px; }

.ac-hint { border: 1px dashed var(--line-bright); border-radius: 14px; padding: 28px 22px; text-align: center;
  color: var(--ink-dim); font-size: 14px; line-height: 1.55; }
.ac-hint b { color: var(--ink); }
.ac-hint > div { margin-top: 14px; }
.ac-hint .btn-amber { display: inline-block; }
.ac-hint.flat { border: none; padding: 14px 4px; text-align: left; }
.ac-load { padding: 40px 16px; text-align: center; color: var(--ink-faint); font-size: 13.5px; }
.ac-fine { font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; margin-top: 10px; }
.ac-strip { border-radius: 10px; padding: 10px 14px; font-size: 13.5px; line-height: 1.45; margin-bottom: 12px;
  background: #FFF6E5; color: #7A4B00; border: 1px solid #F3D9A4; }
.ac-strip.bad { background: #FEF1F0; color: #99231A; border-color: #F6C9C5; }
.ac-strip .crm-link { margin-left: 6px; }

/* ---------- переписка ---------- */
.ac-switch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ac-switch .crm-chip b { font-family: var(--mono); font-size: 11px; color: #fff; background: #1F9D57; border-radius: 99px;
  padding: 0 6px; line-height: 16px; }
.ac-switch .crm-link { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }

.ac-chat { position: relative; display: flex; flex-direction: column; height: min(64vh, 640px); min-height: 380px;
  background: var(--bg-raise); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ac-chat-head { display: flex; align-items: center; gap: 11px; padding: 10px 14px; background: var(--bg-card);
  border-bottom: 1px solid var(--line); flex: none; min-width: 0; }
.ac-chat-head .who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ac-chat-head .who b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-chat-head .who b a { color: inherit; }
.ac-chat-head .who b a:hover { color: var(--accent); }
.ac-chat-head .who span { font-size: 12.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-deal { display: inline-flex; align-items: center; gap: 6px; max-width: 40%; font-size: 12.5px; font-weight: 600;
  color: var(--ink-dim); border: 1px solid var(--line-bright); border-radius: 9px; padding: 6px 10px; flex: none; }
.ac-deal span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-deal:hover { color: var(--accent); border-color: var(--accent); }
.ac-chat .ac-back { display: none; }
.ac-note { padding: 8px 14px; font-size: 12.5px; line-height: 1.45; background: var(--surface-sunken);
  color: var(--ink-dim); border-bottom: 1px solid var(--line); }
.ac-note.warn { background: #FFF6E5; color: #7A4B00; }
.ac-note a { font-weight: 700; color: inherit; text-decoration: underline; }

.ac-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 10px; display: flex; flex-direction: column;
  gap: 5px; overscroll-behavior: contain; scrollbar-width: thin; outline: none; }
.ac-empty { margin: auto; color: var(--ink-faint); font-size: 13.5px; }
.ac-more { align-self: center; border: 1px solid var(--line-bright); background: var(--bg-card); color: var(--ink-dim);
  font-size: 12.5px; font-weight: 600; border-radius: 99px; padding: 6px 14px; margin-bottom: 6px; }
.ac-day { align-self: center; margin: 8px 0 4px; }
.ac-day span { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 99px; padding: 2px 11px; }
.ac-msg { display: flex; flex-direction: column; max-width: min(78%, 540px); align-self: flex-start; align-items: flex-start; }
.ac-msg.out { align-self: flex-end; align-items: flex-end; }
.ac-bubble { background: var(--bg-card); border: 1px solid var(--line); border-radius: 15px 15px 15px 5px;
  padding: 8px 12px 5px; font-size: 14.5px; line-height: 1.42; min-width: 74px; max-width: 100%; }
.ac-msg.out .ac-bubble { background: #E4EEFB; border-color: #CADCF5; border-radius: 15px 15px 5px 15px; }
.ac-msg.failed .ac-bubble { background: #FEF1F0; border-color: #F6C9C5; }
.ac-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ac-text a { color: var(--accent); text-decoration: underline; }
.ac-meta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 2px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.ac-meta .who { font-family: var(--body); font-size: 11px; margin-right: auto; padding-right: 8px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.ac-tick { display: inline-flex; color: var(--ink-faint); }
.ac-tick.read { color: var(--accent); }
.ac-tick.failed { color: var(--red); }
.ac-fail { font-size: 12px; color: var(--red); margin-top: 3px; text-align: right; line-height: 1.4; max-width: 100%; }
.ac-fail .acts { display: inline-flex; gap: 12px; margin-left: 8px; }
.ac-fail button { border: none; background: none; color: var(--accent); font-weight: 700; font-size: 12px; padding: 0; }
.ac-img { display: block; margin: -2px -6px 5px; border-radius: 11px; overflow: hidden; background: var(--surface-sunken); }
.ac-img img { display: block; max-width: 100%; max-height: 300px; min-height: 60px; min-width: 120px; object-fit: cover; }
.ac-audio { display: block; width: 240px; max-width: 100%; height: 38px; margin-bottom: 4px; }
.ac-file { display: flex; align-items: center; gap: 9px; color: var(--ink); margin-bottom: 4px; min-width: 0; }
.ac-file > .ac-ic { color: var(--accent); }
.ac-file span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ac-file b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.ac-file small { font-size: 11.5px; color: var(--ink-faint); }
.ac-file.off { opacity: .7; }
.ac-newpill { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 2; border: none;
  background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700; border-radius: 99px; padding: 7px 14px;
  box-shadow: 0 6px 18px rgba(16,24,40,.22); display: inline-flex; align-items: center; gap: 5px; }
.ac-newpill[hidden] { display: none; }

.ac-attach { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--bg-card);
  border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-dim); flex: none; }
.ac-attach[hidden] { display: none; }
.ac-attach span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-attach b { color: var(--ink); font-weight: 600; }
.ac-attach button { border: none; background: none; color: var(--ink-faint); width: 32px; height: 32px; display: grid;
  place-items: center; border-radius: 8px; }
.ac-compose { display: flex; align-items: flex-end; gap: 4px; padding: 8px; background: var(--bg-card);
  border-top: 1px solid var(--line); flex: none; }
.ac-compose textarea { flex: 1; min-width: 0; resize: none; border: 1px solid var(--line-bright); border-radius: 13px;
  background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.35;
  padding: 10px 13px; min-height: 44px; max-height: 132px; outline: none; margin: 0 4px; }
.ac-compose textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.12); }
.ac-ibtn { width: 44px; height: 44px; border: none; background: none; border-radius: 12px; color: var(--ink-dim);
  display: grid; place-items: center; flex: none; }
.ac-ibtn:hover { background: var(--surface-sunken); color: var(--accent); }
.ac-send { width: 44px; height: 44px; border: none; border-radius: 13px; background: var(--accent); color: #fff;
  display: grid; place-items: center; flex: none; }
.ac-send:hover { background: var(--navy); }
.ac-readonly { padding: 12px 14px; font-size: 13px; color: var(--ink-faint); text-align: center; background: var(--bg-card);
  border-top: 1px solid var(--line); flex: none; }

.ac-tpl { align-items: flex-start; }
.ac-tpl span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ac-tpl small { font-weight: 400; font-size: 12.5px; color: var(--ink-dim); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- строка переписки ---------- */
.ac-rows { display: flex; flex-direction: column; }
.ac-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: none; background: none;
  padding: 10px 12px; border-radius: 12px; color: var(--ink); min-height: 64px; }
.ac-row:hover { background: var(--surface-sunken); }
.ac-row.on { background: var(--client-soft); }
.ac-row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ac-row .r1, .ac-row .r2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ac-row .r1 b { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-row.waiting .r1 b { font-weight: 800; }
.ac-row time { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); flex: none; }
.ac-row .txt { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-row.waiting .txt { color: var(--ink); }
.ac-row .n { font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 700; color: #fff; background: #1F9D57;
  border-radius: 99px; min-width: 19px; text-align: center; padding: 0 6px; line-height: 19px; flex: none; }
.ac-row .wait { width: 9px; height: 9px; border-radius: 99px; background: var(--amber); flex: none; }
.ac-row .r3 { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-row .r3.none { font-style: italic; }

/* ---------- экран «Чаты» ---------- */
.ac-screen { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; height: calc(100dvh - 46px); min-height: 440px; }
.ac-list-pane { display: flex; flex-direction: column; min-height: 0; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 8px 8px; }
.ac-list-pane .crm-head { padding: 0 8px; margin-bottom: 10px; }
.ac-list-pane .crm-head h2 { font-size: 22px; }
.ac-search { flex: none; margin: 0 8px 10px; min-width: 0; }
.ac-search .ac-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-faint);
  pointer-events: none; }
.ac-filters { flex: none; padding: 0 8px 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ac-filters::-webkit-scrollbar { display: none; }
.ac-filters .crm-chip { white-space: nowrap; flex: none; }
.ac-filters .crm-chip b { font-family: var(--mono); font-size: 11px; }
.ac-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.ac-chat-pane { min-width: 0; min-height: 0; display: flex; }
.ac-chat-pane > .ac-chat { flex: 1; height: auto; min-height: 0; border-radius: 14px; }
.ac-pane-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--ink-faint); font-size: 14px; border: 1px dashed var(--line-bright); border-radius: 14px; }

/* ---------- экран подключения ---------- */
.ac-lead { color: var(--ink-dim); font-size: 14.5px; max-width: 720px; margin: -6px 0 18px; line-height: 1.5; }
.ac-sec { padding: 18px 20px; margin-bottom: 16px; }
.ac-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ac-sec-head h3 { font-family: var(--disp); font-weight: 600; font-size: 17px; flex: 1; }
.ac-sec-head .btn-amber { display: inline-flex; align-items: center; gap: 6px; }
.ac-ch { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ac-ch .body { flex: 1 1 220px; min-width: 0; }
.ac-ch .nm { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ac-ch .sub { font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; }
.ac-ch .sub.err { color: var(--red); }
.ac-ch .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ac-state { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 99px;
  padding: 2px 9px; background: var(--surface-sunken); color: var(--ink-dim); white-space: nowrap; }
.ac-state.ok { background: var(--margin-soft); color: var(--margin); }
.ac-state.wait { background: #FFF6E5; color: #8A5800; }
.ac-state.bad { background: #FEF1F0; color: #B42318; }
.ac-memo { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; font-size: 13.5px; color: var(--ink-dim); }
.ac-memo summary { cursor: pointer; font-weight: 700; color: var(--accent); min-height: 28px; }
.ac-memo ul { margin: 8px 0 0 18px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.ac-memo b { color: var(--ink); }
.ac-money { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.ac-money > div { display: flex; flex-direction: column; gap: 2px; }
.ac-money span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.ac-money b { font-family: var(--mono); font-size: 21px; font-weight: 700; }
.ac-money .go { margin-left: auto; }
.ac-journal { display: flex; flex-direction: column; }
.ac-jrow { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.ac-jrow time { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); }
.ac-jrow b { font-weight: 600; display: block; }
.ac-jrow span { color: var(--ink-dim); font-size: 12.5px; overflow-wrap: anywhere; }
.ac-jrow i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--margin); white-space: nowrap; }
.ac-jrow.ignored i { color: var(--ink-faint); }
.ac-jrow.error i, .ac-jrow.rejected i { color: var(--red); }
.ac-jrow.error span { color: #99231A; }

.ac-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; margin-bottom: 16px; }
.ac-types button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  border: 1px solid var(--line-bright); background: var(--bg-card); border-radius: 12px; padding: 12px; color: var(--ink); min-height: 96px; }
.ac-types button.on { border-color: var(--accent); background: var(--client-soft); box-shadow: 0 0 0 2px rgba(10,77,166,.14); }
.ac-types button:disabled { opacity: .55; }
.ac-types b { font-size: 14px; }
.ac-types small { font-size: 11.5px; color: var(--ink-faint); }
.ac-qr { display: grid; place-items: center; min-height: 256px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 14px; padding: 8px; }
.ac-qr img { width: 240px; height: 240px; image-rendering: pixelated; border-radius: 6px; background: #fff; }
.ac-steps { text-align: center; font-size: 13.5px; color: var(--ink-dim); margin-top: 12px; line-height: 1.5; }
.ac-code { text-align: center; font-family: var(--mono); font-size: 34px; font-weight: 700; letter-spacing: .08em;
  padding: 28px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; }
.ac-done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 10px; color: var(--margin); text-align: center; }
.ac-done b { color: var(--ink); font-size: 17px; }
.ac-done span { color: var(--ink-dim); font-size: 13.5px; }

/* ---------- планшет: одна колонка — либо список, либо переписка ---------- */
@media (max-width: 1100px) {
  .ac-screen { grid-template-columns: 300px minmax(0, 1fr); height: calc(100dvh - 36px); }
}
@media (max-width: 860px) {
  .ac-screen { grid-template-columns: minmax(0, 1fr); }
  .ac-screen .ac-chat-pane { display: none; }
  .ac-screen.has-open .ac-list-pane { display: none; }
  .ac-screen.has-open .ac-chat-pane { display: flex; }
  .ac-chat.full .ac-back { display: grid; margin-left: -8px; }
  .ac-deal { max-width: 34%; }
}

/* ---------- телефон ---------- */
@media (max-width: 640px) {
  .ac-screen { display: block; height: auto; min-height: 0; }
  .ac-list-pane { background: none; border: none; border-radius: 0; padding: 0; }
  .ac-list-pane .crm-head, .ac-search, .ac-filters { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
  .ac-list { overflow: visible; margin: 0 -8px; }
  .ac-row { padding: 11px 10px; min-height: 68px; }
  .ac-filters .crm-chip { padding: 9px 14px; font-size: 13.5px; min-height: 44px; }
  .ac-list-pane .crm-head .crm-btn.icon { min-width: 44px; min-height: 44px; justify-content: center; }
  .ac-switch .crm-chip, .ac-rows + div .crm-btn { min-height: 44px; }
  .ac-search { order: 0; flex: none; }
  .ac-search input { height: 44px; font-size: 16px; }

  /* открытая переписка — на весь видимый экран, поверх верхней и нижней панелей;
     высота = видимая область, поэтому поле ввода всегда стоит прямо над клавиатурой */
  .ac-screen.has-open .ac-chat-pane { position: fixed; z-index: 70; left: 0; right: 0; top: var(--vvt, 0px);
    height: var(--vvh, 100dvh); background: var(--bg); }
  .ac-chat-pane > .ac-chat { border: none; border-radius: 0; }
  .ac-chat.full .ac-chat-head { padding: calc(6px + var(--safe-t)) 10px 6px 8px; gap: 8px; }
  .ac-chat.full .ac-back { margin-left: -2px; color: var(--accent); }
  .ac-chat.full .ac-chat-head .who b a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .ac-chat.full .ac-compose { padding-bottom: calc(8px + var(--safe-b)); }
  body.kb-open .ac-chat.full .ac-compose { padding-bottom: 8px; }
  body.kb-open .ac-chat.full .ac-chat-head { padding-top: 6px; }
  .ac-chat.full .ac-readonly { padding-bottom: calc(12px + var(--safe-b)); }
  body:has(.ac-screen.has-open) { overflow: hidden; }
  /* подсказки не должны закрывать поле ввода — показываем их под шапкой переписки */
  body:has(.ac-screen.has-open) .toast { top: calc(var(--vvt, 0px) + var(--safe-t) + 64px); bottom: auto !important; }
  .ac-deal { padding: 0; width: 44px; height: 44px; justify-content: center; border-radius: 12px; }
  .ac-deal span { display: none; }
  .page .ac-compose textarea { min-height: 44px; }  /* общий минимум высоты полей телефона здесь лишний */
  .ac-msgs { padding: 12px 10px 8px; }
  .ac-msg { max-width: 86%; }
  .ac-bubble { font-size: 15.5px; }
  .ac-fail button { min-height: 32px; padding: 0 2px; font-size: 13px; }
  .ac-more { min-height: 40px; }

  .ac-rows { margin: 0 -6px; }
  .ac-hint { padding: 22px 14px; }
  .ac-sec { padding: 16px 14px; }
  .ac-ch .acts { width: 100%; }
  .ac-ch .acts > * { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .ac-sec-head .btn-amber, .ac-sec-head .crm-btn { min-height: 44px; }
  .ac-money { gap: 16px 24px; }
  .ac-money .go { margin-left: 0; width: 100%; }
  .ac-money .go .crm-btn { width: 100%; justify-content: center; min-height: 44px; }
  .ac-jrow { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .ac-jrow time { grid-column: 1 / -1; }
  .ac-types { grid-template-columns: 1fr 1fr; }
  .ac-code { font-size: 28px; }
  #ac-set .crm-fields { grid-template-columns: 1fr; }
  #ac-set .crm-fields select { font-size: 16px; min-height: 44px; }
  .ac-memo summary { min-height: 44px; display: flex; align-items: center; gap: 6px; }
  .ac-memo summary::before { content: "▸"; }
  .ac-memo[open] summary::before { content: "▾"; }
}

/* тарифы каналов, способы оплаты, последние пополнения */
.ac-money small { font-size: 11.5px; color: var(--ink-faint); }
.ac-plans-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ac-plan-i { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface-sunken); }
.ac-plan-i b { font-size: 14px; color: var(--ink); }
.ac-plan-i span { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.ac-plan-i small { font-size: 12px; color: var(--ink-faint); }
.ac-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.ac-plans button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--line-bright); border-radius: 10px; background: var(--bg-card); font: inherit; color: var(--ink); cursor: pointer; }
.ac-plans button b { font-size: 14px; }
.ac-plans button span { font-family: var(--mono); font-size: 13px; }
.ac-plans button small { font-size: 12px; color: var(--ink-faint); }
.ac-plans button.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--client-soft); }
.ac-pmethods { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; margin: 12px 0 14px; border: 1px solid var(--line-bright);
  border-radius: 10px; background: var(--bg); }
.ac-pmethods button { flex: 1 1 auto; border: 0; background: none; padding: 8px 10px; border-radius: 7px; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--ink-dim); cursor: pointer; white-space: nowrap; }
.ac-pmethods button.on { background: var(--bg-card); color: var(--ink); box-shadow: 0 1px 2px rgba(16,36,61,.12); }
.ac-pmethods button:disabled { cursor: default; }
.ac-req { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 4px 0 10px; font-size: 13.5px; }
.ac-req > div { display: contents; }
.ac-req span { color: var(--ink-faint); }
.ac-req b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; user-select: all; }
.ac-pays { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.ac-pays-h { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.ac-pay { display: grid; grid-template-columns: 90px 110px minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 12px; padding: 6px 0;
  font-size: 13.5px; border-bottom: 1px solid var(--line); }
.ac-pay:last-child { border-bottom: 0; }
.ac-pay time { color: var(--ink-faint); font-family: var(--mono); font-size: 12.5px; }
.ac-pay b { font-family: var(--mono); }
.ac-pay span { color: var(--ink-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-pay i { font-style: normal; font-size: 12.5px; color: var(--ink-faint); }
.ac-pay i.paid { color: var(--green, #1E8E5A); }
.ac-pay i.canceled { color: var(--red); }
@media (max-width: 640px) {
  .ac-pay { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ac-pay span { grid-column: 1 / 3; grid-row: 2; }
  .ac-pay em, .ac-pay .crm-link { grid-column: 3; grid-row: 2; justify-self: end; }
}

/* «Как это работает»: живой пример, снимки, как пользоваться */
.ac-how { container: achow / inline-size; }
/* свёрнутые заголовки: сам блок, его пункты и каждый сценарий; знак раскрытия — шеврон справа */
details.ac-how { padding: 0; }
.ac-how summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ac-how summary::-webkit-details-marker { display: none; }
.ac-how summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint); transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.ac-how details[open] > summary::after, details.ac-how[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
details.ac-how > summary { padding: 16px 20px; font-family: var(--disp); font-weight: 600; font-size: 17px; color: var(--ink); }
.ac-how-in { padding: 0 20px 18px; }
.ac-fold { border-top: 1px solid var(--line); }
.ac-fold > summary { padding: 13px 0; font-size: 14.5px; font-weight: 700; color: var(--ink); min-height: 24px; }
.ac-fold > summary:hover, .ac-use > summary:hover { color: var(--accent); }
.ac-fold[open] > summary { padding-bottom: 12px; }
.ac-fold > .ac-demo, .ac-fold > .ac-shots, .ac-fold > .ac-uses { margin-bottom: 16px; }
.ac-fold > .ac-demo-cap { margin: -4px 2px 16px; }
.ac-use > summary { padding: 8px 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.ac-use > p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); }
.ac-how-lead { margin: 0 0 12px; max-width: 820px; font-size: 14.5px; line-height: 1.55; color: var(--ink-dim); }
.ac-demo { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: stretch; }
.ph-label { margin: 0 0 6px 2px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.ac-demo-ph .ph-screen { display: flex; flex-direction: column; height: 400px; border: 1px solid var(--line-bright); border-radius: 26px;
  background: var(--surface-sunken); overflow: hidden; box-shadow: 0 8px 24px rgba(16,36,61,.08); }
.ph-top { display: flex; align-items: center; gap: 9px; padding: 12px 14px; background: var(--bg-card); border-bottom: 1px solid var(--line); }
.ph-top .ac-ava { width: 32px; height: 32px; font-size: 11.5px; }
.ph-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ph-who b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-who small { font-size: 11.5px; color: var(--ink-faint); }
.ph-msgs { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px; }
.ph-b { max-width: 86%; padding: 7px 10px 5px; border-radius: 13px; font-size: 12.5px; line-height: 1.4; background: var(--bg-card);
  border: 1px solid var(--line); align-self: flex-start; animation: ac-pop .28s ease-out; }
.ph-b.me { align-self: flex-end; background: #E7F6E1; border-color: #CFE9C4; color: #14181F; }
.ph-b time { display: block; text-align: right; font-family: var(--mono); font-size: 10px; color: var(--ink-faint); margin-top: 1px; }
.ph-typing { align-self: flex-end; display: inline-flex; gap: 4px; padding: 9px 11px; border-radius: 13px; background: #E7F6E1; }
.ph-typing i { width: 6px; height: 6px; border-radius: 99px; background: #6E9B62; animation: ac-dot 1s infinite ease-in-out; }
.ph-typing i:nth-child(2) { animation-delay: .15s; }
.ph-typing i:nth-child(3) { animation-delay: .3s; }
.ph-bar { margin: 8px; padding: 9px 12px; border-radius: 99px; background: var(--bg-card); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-faint); }
.ac-demo-crm .cw { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 400px; border: 1px solid var(--line-bright);
  border-radius: 14px; background: var(--bg-card); overflow: hidden; box-shadow: 0 8px 24px rgba(16,36,61,.08); }
.cw-list { border-right: 1px solid var(--line); overflow: hidden; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.cw-list .ac-row { padding: 8px; border-radius: 10px; }
.cw-list .ac-row .ac-ava { width: 34px; height: 34px; font-size: 12px; }
.cw-list .ac-row.new { animation: ac-pop .3s ease-out; }
.cw-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface-sunken); }
.cw-head { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 8px 12px; background: var(--bg-card); border-bottom: 1px solid var(--line); }
.cw-head:empty { visibility: hidden; }
.cw-head .ac-ava { width: 32px; height: 32px; font-size: 11.5px; }
.cw-head .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; flex: 1; }
.cw-head .who b { font-size: 13.5px; }
.cw-head .who small { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-deal { flex: none; max-width: 48%; padding: 5px 9px; border: 1px solid var(--line-bright); border-radius: 9px; font-size: 11.5px;
  color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: ac-pop .3s ease-out; }
.cw-msgs { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px; }
.cw-msgs .ac-msg { max-width: 86%; animation: ac-pop .28s ease-out; }
.cw-msgs .ac-bubble { font-size: 12.5px; padding: 7px 10px 5px; }
.cw-empty { margin: auto; font-size: 12.5px; color: var(--ink-faint); }
.cw-compose { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--bg-card); border-top: 1px solid var(--line); }
.cw-in { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line-bright); border-radius: 11px; background: var(--surface-sunken);
  font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; }
.cw-in.typed { color: var(--ink); white-space: normal; max-height: 3.2em; overflow: hidden; }
.cw-send { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--accent); color: #fff; }
.ac-demo-cap { min-height: 1.6em; margin: 12px 2px 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.ac-shots { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 16px 18px; align-items: start; }
.ac-shots figure { margin: 0; }
.ac-shots a { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-card);
  box-shadow: 0 4px 14px rgba(16,36,61,.06); }
.ac-shots figure.ph a { border-radius: 20px; }
.ac-shots img { display: block; width: 100%; height: auto; }
.ac-shots figcaption { margin-top: 7px; font-size: 13px; line-height: 1.45; color: var(--ink-dim); }
.ac-uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 28px; align-items: start; }
@keyframes ac-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes ac-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@container achow (max-width: 760px) {
  .ac-demo { grid-template-columns: minmax(0, 1fr); }
  .ac-demo-ph { max-width: 320px; }
  .ac-demo-ph .ph-screen { height: 300px; }
  .ac-demo-crm .cw { grid-template-columns: minmax(0, 1fr); height: 360px; }
  .cw-list { display: none; }
  .ac-shots { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ac-shots figure.wide { grid-column: 1 / -1; }
  .ac-uses { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ph-b, .cw-msgs .ac-msg, .cw-list .ac-row.new, .cw-deal { animation: none; }
  .ph-typing i { animation: none; }
}

/* ---- object-chat.css ---- */
/* [object-chat] Чат команды и фотоотчёт объекта. Только то, чего нет в app.css; цвета и шрифты —
   переменные кабинета. Сначала компьютер (чат и фотоотчёт рядом), ниже — планшет (вкладки) и
   телефон: экран занимает всю видимую область, строка ввода стоит над клавиатурой и над
   системными кнопками (--vvh/--vvt из app.js, --safe-b из mobile.css). */

.oc-ic { display: inline-block; vertical-align: -.16em; flex: none; }

/* ---------- входы с других экранов ---------- */
.oc-n { display: inline-block; font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 700; color: #fff;
  background: #1F9D57; border-radius: 99px; min-width: 19px; text-align: center; padding: 0 6px; line-height: 19px; flex: none; }
.oc-n[hidden] { display: none; }
.oc-chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; min-width: 34px; padding: 0 8px;
  border: 1px solid var(--line-bright); border-radius: 99px; background: var(--bg-card); color: var(--ink-dim);
  cursor: pointer; flex: none; vertical-align: middle; }
.oc-chip:hover { color: var(--accent); border-color: var(--accent); }
.oc-chip:has(.oc-n:not([hidden])) { color: #17794A; border-color: rgba(31,157,87,.5); background: #F0FAF4; }
.oc-enter { display: flex; align-items: center; gap: 14px; max-width: 620px; margin: 0 0 18px; padding: 13px 14px 13px 13px;
  background: linear-gradient(120deg, #F3F8FF 0%, #E8F1FF 52%, #F6F9FF 100%);
  border: 1px solid #D3E1F8; border-radius: 16px; color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 2px rgba(16,24,40,.05), inset 0 1px 0 rgba(255,255,255,.7);
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.oc-enter:hover { border-color: var(--accent); box-shadow: 0 10px 24px -10px rgba(10,77,166,.42); transform: translateY(-1px); }
.oc-enter:active { transform: none; }
.oc-enter-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; flex: none;
  background: #fff; border: 1px solid #DBE6FA; box-shadow: 0 3px 8px -2px rgba(10,77,166,.16); }
.oc-enter-svg { width: 34px; height: 34px; display: block; }
.oc-enter-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.oc-enter-txt b { font: 700 16px var(--disp); letter-spacing: -.01em; }
.oc-enter-txt i { font-style: normal; font-size: 12.5px; color: var(--ink-dim); }
.oc-enter .oc-n { font-size: 12px; min-width: 24px; height: 24px; line-height: 24px; padding: 0 7px; border-radius: 12px; text-align: center; }
.oc-enter-go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--accent); color: #fff; box-shadow: 0 4px 10px -3px rgba(10,77,166,.55); transition: transform .15s; }
.oc-enter:hover .oc-enter-go { transform: translateX(2px); }
.oc-stage-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.oc-stage-acts .btn-ghost { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; }

/* ---------- каркас экрана ---------- */
.page:has(> .oc-screen) { padding-top: 20px; padding-bottom: 20px; }
.oc-screen { display: flex; flex-direction: column; height: calc(100dvh - 40px); min-height: 420px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.oc-load { margin: auto; padding: 40px 16px; text-align: center; color: var(--ink-faint); font-size: 13.5px; line-height: 1.5; }
.oc-load b { color: var(--ink-dim); font-weight: 600; }
.oc-load .btn-ghost { display: inline-flex; align-items: center; min-height: 40px; }
.oc-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 8px; border-bottom: 1px solid var(--line); flex: none; min-width: 0; }
.oc-back { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--ink-dim); flex: none; }
.oc-back:hover { background: var(--surface-sunken); color: var(--accent); }
.oc-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.oc-title b { font: 700 16px var(--disp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-title span { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-tabs, .oc-seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: 10px; flex: none; }
.oc-tabs button, .oc-seg button { border: 1px solid transparent; background: none; padding: 0 16px; min-height: 34px; border-radius: 8px;
  font: 600 13.5px var(--body); color: var(--ink-dim); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; }
.oc-tabs button.on, .oc-seg button.on { background: var(--bg-card); color: var(--accent); border-color: var(--line-bright);
  box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.oc-count { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.oc-count:empty { display: none; }
.oc-body { flex: 1; min-height: 0; display: flex; }
.oc-chat { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg-raise); }
.oc-chat.drop { outline: 2px dashed var(--accent); outline-offset: -6px; }
.oc-gallery { display: none; flex: 1; min-width: 0; min-height: 0; overflow-y: auto; background: var(--bg-card); scrollbar-width: thin;
  overscroll-behavior: contain; }
.oc-screen.tab-photos .oc-chat { display: none; }
.oc-screen.tab-photos .oc-gallery { display: block; }
@media (min-width: 1101px) {
  .oc-tabs { display: none; }
  .oc-screen .oc-chat, .oc-screen.tab-photos .oc-chat { display: flex; }
  .oc-screen .oc-gallery, .oc-screen.tab-photos .oc-gallery { display: block; flex: 0 0 384px; border-left: 1px solid var(--line); }
}

/* ---------- закреплённое ---------- */
.oc-pinned[hidden] { display: none; }
.oc-pin-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 12px 6px 14px; text-align: left;
  border: none; border-bottom: 1px solid #F3D9A4; background: #FFF9EC; color: var(--ink); }
.oc-pin-btn > .oc-ic:first-child { color: var(--amber-deep); }
.oc-pin-btn > .oc-ic:last-child { color: var(--ink-faint); }
.oc-pin-btn span { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.oc-pin-btn b { font-size: 11.5px; font-weight: 700; color: var(--amber-deep); }
.oc-pin-btn i { font-style: normal; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-sheet-h { font: 600 18px var(--disp); margin: 2px 6px 12px; }
.oc-pin-item { padding: 10px 6px; border-top: 1px solid var(--line); }
.oc-pin-who { font-size: 12px; color: var(--ink-faint); margin-bottom: 3px; }
.oc-pin-item .btn-ghost.sm { min-height: 36px; }

/* ---------- лента ---------- */
.oc-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 6px;
  overscroll-behavior: contain; scrollbar-width: thin; outline: none; }
.oc-empty { margin: auto; max-width: 330px; padding: 24px 12px; display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center; color: var(--ink-faint); font-size: 13.5px; line-height: 1.5; }
.oc-empty b { color: var(--ink-dim); font-size: 15.5px; font-weight: 700; }
.oc-more { align-self: center; border: 1px solid var(--line-bright); background: var(--bg-card); color: var(--ink-dim);
  font: 600 12.5px var(--body); border-radius: 99px; padding: 0 16px; min-height: 36px; margin: 0 auto 6px; display: block; }
.oc-day { align-self: center; margin: 8px 0 4px; }
.oc-day span { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 99px; padding: 2px 11px; }
.oc-sys { align-self: center; max-width: 92%; display: flex; align-items: baseline; gap: 8px; margin: 3px 0; padding: 4px 13px;
  font-size: 12.5px; line-height: 1.4; color: var(--ink-dim); background: rgba(16,24,40,.055); border-radius: 12px; text-align: center; }
.oc-sys time { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); flex: none; }
.oc-msg { display: flex; align-items: flex-end; gap: 8px; max-width: min(82%, 580px); align-self: flex-start; }
.oc-msg.out { align-self: flex-end; }
.oc-ava { width: 32px; height: 32px; border-radius: 99px; flex: none; display: grid; place-items: center; background: var(--client-soft);
  color: var(--accent); font-weight: 700; font-size: 12px; letter-spacing: -.01em; }
.oc-bubble { min-width: 0; max-width: 100%; background: var(--bg-card); border: 1px solid var(--line); border-radius: 15px 15px 15px 5px;
  padding: 8px 12px 3px; font-size: 14.5px; line-height: 1.42; }
.oc-msg.out .oc-bubble { background: #E4EEFB; border-color: #CADCF5; border-radius: 15px 15px 5px 15px; }
.oc-msg.failed .oc-bubble { background: #FEF1F0; border-color: #F6C9C5; }
.oc-msg.sending .oc-bubble { opacity: .78; }
.oc-who { display: flex; align-items: baseline; gap: 7px; margin-bottom: 2px; min-width: 0; }
.oc-who b { font-size: 12.5px; font-weight: 700; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-who span { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.oc-tag { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 1px 0 4px; padding: 1px 9px 1px 7px;
  font-size: 11.5px; font-weight: 600; color: var(--violet); background: var(--master-soft); border-radius: 99px; }
.oc-tag span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-grid { display: grid; gap: 3px; width: min(330px, 62vw); max-width: 100%; margin: 2px 0 6px; border-radius: 11px; overflow: hidden; }
.oc-grid.n1 { grid-template-columns: 1fr; width: min(300px, 62vw); }
.oc-grid.n2 { grid-template-columns: 1fr 1fr; }
.oc-grid.n3 { grid-template-columns: repeat(3, 1fr); }
.oc-tile { position: relative; display: block; min-width: 0; padding: 0; border: none; background: var(--surface-sunken);
  aspect-ratio: 1; overflow: hidden; cursor: zoom-in; }
.oc-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.oc-tile img:not([src]) { visibility: hidden; }
.oc-tile.bad::after { content: "не загрузилось"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 11px; color: var(--ink-faint); }
.oc-file { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 46px; margin: 2px 0 5px; padding: 6px 10px;
  text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raise); color: var(--ink); }
.oc-msg.out .oc-file { background: rgba(255,255,255,.6); border-color: #CADCF5; }
.oc-file > .oc-ic { color: var(--accent); }
.oc-file span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.oc-file b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.oc-file small { font-size: 11.5px; color: var(--ink-faint); }
.oc-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.oc-text a { color: var(--accent); text-decoration: underline; }
.oc-meta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-height: 26px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.oc-note { font-family: var(--body); font-size: 11.5px; }
.oc-pinmark { color: var(--amber-deep); display: inline-flex; }
.oc-act { width: 32px; height: 32px; margin: -3px -8px -3px 0; border: none; background: none; border-radius: 8px;
  color: var(--ink-faint); display: grid; place-items: center; flex: none; }
.oc-act:hover { background: rgba(16,24,40,.07); color: var(--ink); }
.oc-fail { align-self: flex-end; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 10px;
  max-width: 92%; font-size: 12.5px; line-height: 1.4; color: var(--red); }
.oc-fail .acts { display: inline-flex; gap: 6px; }
.oc-fail button { border: none; background: none; color: var(--accent); font: 700 13px var(--body); min-height: 34px; padding: 0 6px; }
.oc-newpill { position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); z-index: 2; border: none; min-height: 36px;
  background: var(--navy); color: #fff; font: 700 12.5px var(--body); border-radius: 99px; padding: 0 15px;
  box-shadow: 0 6px 18px rgba(16,24,40,.22); display: inline-flex; align-items: center; gap: 5px; }
.oc-newpill[hidden] { display: none; }

/* ---------- строка ввода ---------- */
.oc-tray { display: flex; gap: 8px; padding: 8px 12px; overflow-x: auto; background: var(--bg-card); border-top: 1px solid var(--line);
  flex: none; scrollbar-width: none; }
.oc-tray[hidden] { display: none; }
.oc-pick { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; flex: none;
  background: var(--surface-sunken); border: 1px solid var(--line); }
.oc-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-pick.doc { width: auto; max-width: 210px; display: flex; align-items: center; gap: 7px; padding: 0 40px 0 10px; color: var(--accent); }
.oc-pick.doc i { font-style: normal; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-pick button { position: absolute; top: 0; right: 0; width: 32px; height: 32px; border: none; background: none; color: #fff;
  display: grid; place-items: center; }
.oc-pick button .oc-ic { background: rgba(16,24,40,.62); border-radius: 99px; padding: 3px; width: 20px; height: 20px; }
.oc-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px 0; background: var(--bg-card); border-top: 1px solid var(--line);
  flex: none; min-width: 0; }
.oc-stage { display: inline-flex; align-items: center; gap: 4px; min-width: 0; flex: 0 1 auto; height: 36px; padding: 0 4px 0 11px;
  border: 1px solid var(--line-bright); border-radius: 99px; color: var(--ink-dim); background: var(--bg-card); }
.oc-stage select { min-width: 0; max-width: 100%; height: 34px; border: none; background: none; outline: none; cursor: pointer;
  font: 600 13px var(--body); color: inherit; text-overflow: ellipsis; padding: 0 4px; }
.oc-stage.on { border-color: var(--violet); color: var(--violet); background: var(--master-soft); }
.oc-stage:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.12); }
.oc-quick { margin-left: auto; flex: none; height: 36px; padding: 0 15px; border: 1px solid var(--line-bright); border-radius: 99px;
  background: var(--bg-card); color: var(--ink-dim); font: 600 13px var(--body); }
.oc-quick:hover { color: var(--accent); border-color: var(--accent); }
.oc-compose { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px 10px; background: var(--bg-card); flex: none; }
.oc-compose textarea { flex: 1; min-width: 0; resize: none; border: 1px solid var(--line-bright); border-radius: 13px;
  background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.35;
  padding: 10px 13px; min-height: 44px; max-height: 132px; outline: none; }
.oc-compose textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.12); }
.oc-cam { height: 44px; padding: 0 15px; border: none; border-radius: 13px; background: var(--amber); color: #fff; flex: none;
  display: inline-flex; align-items: center; gap: 8px; font: 700 14px var(--body); white-space: nowrap; }
.oc-cam:hover { background: var(--amber-deep); }
.oc-ibtn { width: 44px; height: 44px; border: none; background: none; border-radius: 12px; color: var(--ink-dim);
  display: grid; place-items: center; flex: none; }
.oc-ibtn:hover { background: var(--surface-sunken); color: var(--accent); }
.oc-send { width: 44px; height: 44px; border: none; border-radius: 13px; background: var(--accent); color: #fff;
  display: grid; place-items: center; flex: none; }
.oc-send:hover { background: var(--navy); }
.oc-readonly { padding: 13px 14px; font-size: 13px; line-height: 1.45; color: var(--ink-faint); text-align: center;
  background: var(--bg-card); border-top: 1px solid var(--line); flex: none; }

/* ---------- фотоотчёт ---------- */
.oc-g-in { padding: 14px; display: flex; flex-direction: column; min-height: 100%; }
.oc-g-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.oc-g-title { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.oc-g-title b { font: 700 16px var(--disp); }
.oc-g-title span { font-size: 12.5px; color: var(--ink-faint); }
.oc-g-shoot { height: 40px; padding: 0 14px; border: none; border-radius: 11px; background: var(--amber); color: #fff;
  display: inline-flex; align-items: center; gap: 7px; font: 700 13.5px var(--body); flex: none; }
.oc-g-shoot:hover { background: var(--amber-deep); }
.oc-g-cap { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 2px; font: 700 14.5px var(--disp); color: var(--ink); }
.oc-g-cap span { min-width: 0; }
.oc-g-cap small { display: block; font: 500 12px var(--body); color: var(--ink-faint); }
.oc-g-cap i { font-style: normal; font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--ink-faint); }
.oc-g-day { margin: 8px 0 6px; font-size: 12px; font-weight: 600; color: var(--ink-faint); }
.oc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 4px; }
.oc-tiles .oc-tile { border-radius: 8px; }
.oc-g-in > .oc-more { margin-top: 16px; }

/* ---------- просмотр фото во весь экран ---------- */
.oc-viewer { position: fixed; z-index: 200; left: 0; right: 0; top: var(--vvt, 0px); height: var(--vvh, 100dvh);
  background: #0B0F17; color: #fff; display: flex; flex-direction: column; touch-action: pan-y; }
.oc-viewer [hidden] { display: none !important; }
.oc-v-top { display: flex; align-items: center; gap: 8px; padding: calc(8px + var(--safe-t, 0px)) 8px 8px; flex: none; }
.oc-v-count { flex: 1; text-align: center; font: 600 13.5px var(--mono); color: rgba(255,255,255,.75); }
.oc-v-btn { width: 44px; height: 44px; border: none; border-radius: 12px; background: rgba(255,255,255,.10); color: #fff;
  display: grid; place-items: center; flex: none; }
.oc-v-btn:hover { background: rgba(255,255,255,.2); }
.oc-v-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 4px; }
.oc-v-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; transition: filter .15s; }
.oc-v-stage img.wait { filter: blur(6px); }
.oc-v-stage img:not([src]) { visibility: hidden; }
.oc-v-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 64px; border: none; border-radius: 12px;
  background: rgba(255,255,255,.10); color: #fff; display: grid; place-items: center; }
.oc-v-nav:hover { background: rgba(255,255,255,.22); }
.oc-v-nav.prev { left: 10px; }
.oc-v-nav.next { right: 10px; }
.oc-v-cap { flex: none; padding: 10px 16px calc(14px + var(--safe-b, 0px)); text-align: center; font-size: 14px; line-height: 1.45;
  max-height: 30%; overflow-y: auto; }
.oc-v-cap p { margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.oc-v-cap span { font-size: 12.5px; color: rgba(255,255,255,.65); }

/* ---------- планшет ---------- */
@media (max-width: 1100px) {
  .oc-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ---------- телефон ---------- */
@media (max-width: 640px) {
  .oc-chip { height: 36px; min-width: 40px; }
  .oc-enter { max-width: none; margin-bottom: 14px; }
  .oc-stage-acts .btn-ghost { flex: 1 1 0; min-height: 46px; justify-content: center; }

  /* экран объекта — на всю видимую область, поверх верхней и нижней панелей кабинета;
     высота = видимая область, поэтому строка ввода всегда стоит прямо над клавиатурой */
  .oc-screen { position: fixed; z-index: 70; left: 0; right: 0; top: var(--vvt, 0px); height: var(--vvh, 100dvh);
    min-height: 0; border: none; border-radius: 0; }
  body:has(.oc-screen) { overflow: hidden; }
  /* подсказки не должны закрывать строку ввода — показываем их под шапкой */
  body:has(.oc-screen) .toast { top: calc(var(--vvt, 0px) + var(--safe-t) + 108px); bottom: auto !important; }
  .oc-head { flex-wrap: wrap; gap: 6px 4px; padding: calc(6px + var(--safe-t)) 10px 8px 4px; }
  .oc-back { width: 44px; height: 44px; color: var(--accent); }
  .oc-title b { font-size: 15.5px; }
  .oc-tabs { flex: 1 1 100%; margin-left: 6px; }
  .oc-tabs button { flex: 1; min-height: 38px; }
  body.kb-open .oc-head { padding-top: 6px; }
  body.kb-open .oc-tabs { display: none; }          /* клавиатура открыта — место отдаём ленте */
  .oc-msgs { padding: 12px 10px 8px; }
  .oc-msg { max-width: 90%; }
  .oc-bubble { font-size: 15.5px; }
  .oc-grid, .oc-grid.n1 { width: min(300px, 66vw); }
  .oc-more { min-height: 40px; }
  .oc-newpill { bottom: 140px; min-height: 40px; }
  .oc-bar { padding: 8px 10px 0; }
  .page .oc-stage { height: 40px; }
  .page .oc-stage select { min-height: 38px; height: 38px; font-size: 16px; }   /* 16 px — без авто-увеличения iOS */
  .oc-quick { height: 40px; }
  .oc-compose { padding: 8px 8px calc(8px + var(--safe-b)); gap: 4px; }
  body.kb-open .oc-compose { padding-bottom: 8px; }
  .page .oc-compose textarea { min-height: 44px; }   /* общий минимум высоты полей телефона здесь лишний */
  .oc-cam { width: 48px; padding: 0; justify-content: center; }
  .oc-cam span { display: none; }
  .oc-readonly { padding-bottom: calc(13px + var(--safe-b)); }
  .oc-g-in { padding: 12px 10px calc(16px + var(--safe-b)); }
  .oc-g-shoot { height: 44px; flex: 1 1 100%; justify-content: center; }
  .oc-seg button { min-height: 38px; }
  .oc-tiles { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .oc-v-nav { display: none; }                       /* на телефоне листают пальцем */
  .oc-pin-item .btn-ghost.sm { min-height: 44px; }
}

/* ---- telephony.css ---- */
/* [telephony] Телефония: экран подключения, журнал звонков, карточка «Звонит…», меню «Позвонить»
   и запись о звонке в ленте. Только то, чего нет в app.css и crm.css; цвета и шрифты —
   переменные кабинета. Сначала компьютер, ниже — планшет и телефон. */

.tel-ic { display: inline-block; vertical-align: -.16em; flex: none; }
.tel-fine { font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; }
.tel-p { font-size: 14px; color: var(--ink-dim); line-height: 1.55; margin: 0 0 12px; max-width: 760px; }
.tel-lead { margin: -14px 0 18px; max-width: 760px; font-size: 14px; line-height: 1.55; color: var(--ink-dim); }

/* ---------- экран подключения ---------- */
.tel-sec { padding: 18px 20px; margin-bottom: 14px; }
.tel-sec h3 { font-family: var(--disp); font-size: 17px; font-weight: 600; margin: 0 0 10px; display: flex;
  align-items: center; gap: 10px; flex-wrap: wrap; }
.tel-sec__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tel-acts { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.tel-sec > .tel-acts { margin-top: 14px; }
.tel-state { font-family: var(--body); font-size: 12px; font-weight: 700; border-radius: 99px; padding: 2px 10px;
  background: var(--surface-sunken); color: var(--ink-dim); border: 1px solid var(--line); white-space: nowrap; }
.tel-state.ok { background: #ECFAF1; color: #17713F; border-color: #BFE8D0; }
.tel-state.wait { background: #FFF6E5; color: #7A4B00; border-color: #F3D9A4; }
.tel-note { border-radius: 10px; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; margin: 0 0 12px;
  background: var(--surface-sunken); color: var(--ink-dim); border: 1px solid var(--line); }
.tel-note.warn { background: #FFF6E5; color: #7A4B00; border-color: #F3D9A4; }
.tel-note.ok { background: #ECFAF1; color: #17603A; border-color: #BFE8D0; }
#tel-set > .tel-note { margin-bottom: 14px; }
.tel-hint { border: 1px dashed var(--line-bright); border-radius: 12px; padding: 16px 16px; color: var(--ink-dim);
  font-size: 13.5px; line-height: 1.5; }
.tel-list-plain { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5;
  color: var(--ink-dim); max-width: 780px; }
.tel-list-plain b { color: var(--ink); }

.tel-provs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; margin-bottom: 14px; }
.tel-prov { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column;
  gap: 8px; background: var(--bg-raise); }
.tel-prov b { font-size: 15.5px; }
.tel-prov p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); flex: 1; }
.tel-prov .btn-amber { align-self: flex-start; margin-top: 4px; }

.tel-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; margin-bottom: 12px; }
.tel-copy > span { grid-column: 1 / -1; font-size: 12px; color: var(--ink-dim); }
.tel-copy code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 12px; overflow-wrap: anywhere; user-select: all; min-width: 0; }
#tel-rotate { min-height: 34px; }
.tel-steps { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.tel-steps summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--accent); min-height: 30px; }
.tel-steps ol { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 9px; font-size: 14px; line-height: 1.55;
  color: var(--ink-dim); max-width: 820px; }
.tel-steps li b { color: var(--ink); }

.tel-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px 14px;
  align-items: start; margin-bottom: 4px; }
.tel-fields[hidden], .tel-f[hidden] { display: none; }
.tel-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tel-f.full { grid-column: 1 / -1; }
.tel-f > span { font-size: 12px; color: var(--ink-dim); }
.tel-f > span i { font-style: normal; color: var(--ink-faint); }
.tel-f input, .tel-f select, .tel-f textarea { width: 100%; background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 11px; font-family: var(--body); font-size: 14px; color: var(--ink); outline: none; min-height: 40px; }
.tel-f textarea { font-family: var(--mono); font-size: 13px; resize: vertical; line-height: 1.45; }
.tel-f input:focus, .tel-f select:focus, .tel-f textarea:focus { border-color: var(--accent); background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(10,77,166,.12); }
.tel-f small { font-size: 12px; color: var(--ink-faint); line-height: 1.45; }
.tel-check { display: flex; align-items: center; gap: 9px; font-size: 14px; padding: 6px 0 10px; cursor: pointer; min-height: 34px; }
.tel-check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

.tel-ext { display: grid; gap: 8px; margin-bottom: 4px; }
.tel-ext__head, .tel-ext__row { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1.2fr) 40px; gap: 8px; align-items: center; }
.tel-ext__head { font-size: 12px; color: var(--ink-dim); }
.tel-ext__row .crm-input, .tel-ext__row .crm-select { width: 100%; min-width: 0; }

.tel-journal { display: grid; }
.tel-jrow { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.tel-jrow:last-child { border-bottom: none; }
.tel-jrow time { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.tel-jrow div { min-width: 0; display: flex; flex-direction: column; }
.tel-jrow div span { color: var(--ink-dim); overflow-wrap: anywhere; }
.tel-jrow i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--green); white-space: nowrap; }
.tel-jrow.duplicate i, .tel-jrow.ignored i { color: var(--ink-faint); }
.tel-jrow.rejected i, .tel-jrow.error i { color: var(--red); }

/* ---------- журнал звонков ---------- */
.tel-switch { display: inline-flex; gap: 2px; background: var(--bg-card); border: 1px solid var(--line-bright);
  border-radius: 10px; padding: 3px; margin: 0 0 14px; }
.tel-switch a { font-size: 13px; font-weight: 700; color: var(--ink-dim); padding: 7px 14px; border-radius: 7px; white-space: nowrap; }
.tel-switch a:hover { color: var(--ink); }
.tel-switch a.on { background: var(--navy); color: #fff; }

.tel-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tel-tools #tel-q { flex: 1; min-width: 180px; max-width: 320px; }
.tel-pills { display: flex; gap: 2px; background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 10px;
  padding: 3px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tel-pills::-webkit-scrollbar { display: none; }
.tel-pills button { border: none; background: none; font-size: 13px; font-weight: 700; color: var(--ink-dim);
  padding: 7px 12px; border-radius: 7px; white-space: nowrap; min-height: 32px; }
.tel-pills button.on { background: var(--navy); color: #fff; }
.tel-own { display: inline-flex; gap: 8px; align-items: center; }
.tel-own[hidden], .tel-tools select[hidden] { display: none; }

.tel-sums { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.tel-sum { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; min-width: 0; }
.tel-sum span { display: block; font-size: 12px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tel-sum b { font-family: var(--mono); font-size: 18px; font-weight: 600; white-space: nowrap; }
.tel-sum.is-bad b { color: var(--red); }

.tel-list { padding: 4px 18px; }
.tel-load { padding: 40px 16px; text-align: center; color: var(--ink-faint); font-size: 13.5px; }
.tel-more { text-align: center; padding: 12px 0 14px; }
.tel-row { display: grid; grid-template-columns: 34px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.1fr) 104px;
  gap: 4px 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.tel-list.has-acts .tel-row { grid-template-columns: 34px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.1fr) 104px 214px; }
.tel-list:not(.has-acts) .tel-row__acts { display: none; }
.tel-row:last-of-type { border-bottom: none; }
.tel-row__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--client-soft); color: var(--accent); }
.tel-row.is-bad .tel-row__ic { background: #FEF1F0; color: var(--red); }
.tel-row.is-dim .tel-row__ic { background: var(--surface-sunken); color: var(--ink-faint); }
.tel-row.is-live .tel-row__ic { background: #ECFAF1; color: var(--green); }
.tel-row__main { min-width: 0; }
.tel-row__who { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.tel-row__who a { color: inherit; }
.tel-row__who a:hover { color: var(--accent); }
.tel-row__sub { font-size: 12.5px; color: var(--ink-dim); display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 1px; }
.tel-row__sub a { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
.tel-num { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.tel-tag { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; color: #17713F; background: #ECFAF1;
  border-radius: 99px; padding: 1px 8px; vertical-align: 1px; white-space: nowrap; }
.tel-row__res { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.35; }
.tel-row__res b { font-weight: 600; }
.tel-row__res span { color: var(--ink-dim); font-family: var(--mono); font-size: 12px; }
.tel-row.is-bad .tel-row__res b { color: var(--red); }
.tel-row__staff { font-size: 13px; color: var(--ink-dim); min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; }
.tel-row__when { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.tel-row__acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.tel-btn { padding: 6px 10px; font-size: 12.5px; white-space: nowrap; }
.tel-row__rec { grid-column: 2 / -1; }
.tel-row__rec:empty { display: none; }
.tel-audio { display: block; width: min(100%, 420px); height: 40px; margin-top: 6px; }

/* ---------- запись о звонке в ленте сделки и клиента ---------- */
.crm-ev.tel-ev .tel-ev__ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  margin-right: 7px; vertical-align: -5px; background: var(--client-soft); color: var(--accent); }
.tel-ev__acts { margin-left: 32px; }
.crm-ev.tel-ev.is-missed .tel-ev__ic { background: #FEF1F0; color: var(--red); }
.crm-ev.tel-ev.is-missed .txt { color: var(--red); font-weight: 600; }
.crm-ev.tel-ev.is-failed .tel-ev__ic { background: var(--surface-sunken); color: var(--ink-faint); }
.tel-ev__acts { margin-top: 6px; }
.tel-play { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-bright); background: var(--bg-card);
  color: var(--accent); font-size: 12.5px; font-weight: 700; border-radius: 99px; padding: 5px 12px; min-height: 32px; }
.tel-play:hover { border-color: var(--accent); }
.tel-play[hidden] { display: none; }

/* ---------- меню «Позвонить» у номера телефона ---------- */
.tel-menu { position: fixed; z-index: 97; width: min(300px, calc(100vw - 16px)); background: var(--bg-card);
  border: 1px solid var(--line-bright); border-radius: 13px; box-shadow: 0 14px 36px rgba(16,24,40,.2); padding: 6px; }
.tel-menu__num { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); padding: 6px 10px 4px; }
.tel-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: none;
  border-radius: 9px; padding: 9px 10px; color: var(--ink); font-size: 14px; min-height: 44px; }
.tel-menu button:hover, .tel-menu button:focus-visible { background: var(--surface-sunken); outline: none; }
.tel-menu button span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.tel-menu button b { font-weight: 600; }
.tel-menu button i { font-style: normal; font-size: 12px; color: var(--ink-faint); }
.tel-menu__go .tel-ic { color: var(--green); }

/* ---------- карточка «Звонит…» ---------- */
.tel-pop { position: fixed; right: 18px; bottom: 18px; z-index: 94; display: grid; gap: 10px; width: min(360px, calc(100vw - 24px));
  pointer-events: none; }
.tel-card { pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; background: var(--bg-card);
  border: 1px solid var(--line-bright); border-left: 4px solid var(--green); border-radius: 14px; padding: 13px 12px 13px 14px;
  box-shadow: 0 16px 40px rgba(16,24,40,.22); animation: tel-in .22s both; }
.tel-card.is-talk { border-left-color: var(--accent); }
@keyframes tel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tel-card__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: #ECFAF1; color: var(--green); animation: tel-ring 1.4s ease-in-out infinite; }
.tel-card.is-talk .tel-card__ic { background: var(--client-soft); color: var(--accent); animation: none; }
@keyframes tel-ring { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-12deg); } 20% { transform: rotate(12deg); }
  30% { transform: rotate(-8deg); } 40% { transform: rotate(8deg); } 50% { transform: rotate(0); } }
.tel-card__body { flex: 1; min-width: 0; }
.tel-card__head { font-size: 12px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.tel-card__who { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; line-height: 1.3; margin-top: 1px; }
.tel-card__sub { font-size: 12.5px; color: var(--ink-dim); overflow-wrap: anywhere; margin-top: 2px; }
.tel-card__go { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 13.5px; font-weight: 700;
  color: var(--accent); min-height: 32px; }
.tel-card__x { border: none; background: none; color: var(--ink-faint); width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; flex: none; margin: -6px -4px 0 0; }
.tel-card__x:hover { background: var(--surface-sunken); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .tel-card, .tel-card__ic { animation: none; } }

/* ---------- планшет ---------- */
@media (max-width: 1100px) {
  .tel-sums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tel-row, .tel-list.has-acts .tel-row { grid-template-columns: 34px minmax(0, 1.5fr) minmax(0, 1fr) 96px; }
  .tel-list.has-acts .tel-row { grid-template-columns: 34px minmax(0, 1.5fr) minmax(0, 1fr) 96px 214px; }
  .tel-row__staff { grid-column: 2 / 4; grid-row: 2; flex-direction: row; gap: 10px; font-size: 12.5px; }
}

/* ---------- телефон ---------- */
@media (max-width: 640px) {
  .tel-lead { margin-top: -6px; }
  .tel-sec { padding: 15px 14px; }
  .tel-sec__head { flex-direction: column; align-items: stretch; }
  .tel-acts .crm-btn, .tel-acts .btn-amber { min-height: 40px; }
  .tel-copy { grid-template-columns: minmax(0, 1fr); }
  .tel-copy .crm-btn { justify-self: start; min-height: 40px; }
  .tel-ext__head { display: none; }
  .tel-ext__row { grid-template-columns: 92px minmax(0, 1fr) 44px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .tel-ext__row [data-x="user_id"] { grid-column: 1 / 3; grid-row: 2; }
  .tel-ext__row [data-del] { grid-row: 1 / 3; align-self: start; min-height: 40px; }
  .tel-jrow { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .tel-jrow time { grid-column: 1 / -1; }

  .tel-switch { display: flex; }
  .tel-switch a { flex: 1; text-align: center; padding: 9px 8px; }
  .tel-tools { gap: 8px; }
  .tel-tools #tel-q { max-width: none; flex-basis: 100%; order: 5; }
  .tel-tools .crm-select { flex: 1; min-width: 0; }
  .tel-pills { flex-basis: 100%; }
  .tel-pills button { flex: 1; min-height: 38px; padding: 7px 8px; }
  .tel-own { flex-basis: 100%; }
  .tel-own .crm-input { flex: 1; min-width: 0; }
  .tel-sums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tel-sum { padding: 9px 12px; }
  .tel-sum b { font-size: 16px; }
  .tel-list { padding: 2px 12px; }
  .tel-row, .tel-list.has-acts .tel-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 3px 10px; align-items: start; }
  .tel-row__main { grid-column: 2; }
  .tel-row__when { grid-column: 3; grid-row: 1; text-align: right; padding-top: 2px; }
  .tel-row__res { grid-column: 2 / -1; grid-row: 2; flex-direction: row; gap: 8px; align-items: baseline; }
  .tel-row__staff { grid-column: 2 / -1; grid-row: 3; }
  .tel-row__acts { grid-column: 2 / -1; grid-row: 4; justify-content: flex-start; margin-top: 4px; }
  .tel-row__acts .tel-btn { min-height: 38px; padding: 8px 12px; }
  .tel-row__rec { grid-column: 1 / -1; }
  .tel-play { min-height: 36px; }

  /* карточка звонка — над нижней панелью разделов */
  .tel-pop { right: 12px; left: 12px; width: auto; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- account-deletion.css ---- */
/* Удаление учётной записи и пространства (account-deletion.js, классы ad-*).
   Опирается на переменные и окна кабинета из app.css / mobile.css: на телефоне окно — лист
   снизу, кнопки прибиты к низу и остаются над клавиатурой. */

.modal.ad-modal { max-width: 540px; }
.ad-modal h3 { margin-bottom: 14px; }
.ad-loading { padding: 18px 0; text-align: center; color: var(--ink-faint); font-size: 13.5px; }
.ad-text { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.ad-hint { margin: 6px 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--ink-faint); }
/* что именно ввести для подтверждения — обычными буквами, над полем (подпись поля — прописными) */
.ad-type { margin: 0 0 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink-dim); overflow-wrap: anywhere; }
.ad-type b { color: var(--ink); font-family: var(--mono); font-weight: 600; }

/* «что удалится / что останется / когда» — три коротких пункта */
.ad-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ad-list li {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raise);
  font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); overflow-wrap: anywhere;
}
.ad-list li b { color: var(--ink); }

.ad-modal .field select {
  width: 100%; background: var(--bg); border: 1px solid var(--line-bright); border-radius: 10px;
  padding: 12px 14px; color: var(--ink); font-family: var(--body); font-size: 15px; outline: none;
}
.ad-err { min-height: 0; font-size: 13.5px; line-height: 1.45; color: var(--red); }
.ad-err:not(:empty) { margin: 0 0 4px; padding: 9px 12px; border-radius: 10px; background: #FDECEA; }

/* Выбор владельца: два крупных пункта, опасный — отдельно и с красной полосой */
.ad-choice { display: flex; flex-direction: column; gap: 10px; margin: 0 0 6px; }
.ad-choice label {
  display: flex; gap: 12px; align-items: flex-start; min-height: 56px; padding: 12px 14px;
  border: 1px solid var(--line-bright); border-radius: 12px; cursor: pointer; background: var(--bg-card);
}
.ad-choice label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.12); }
.ad-choice label.is-danger { margin-top: 8px; border-left: 4px solid var(--red); }
.ad-choice label.is-danger:has(input:checked) { border-color: var(--red); box-shadow: 0 0 0 3px rgba(217,45,32,.12); }
.ad-choice input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.ad-choice label.is-danger input { accent-color: var(--red); }
.ad-choice span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ad-choice b { font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.ad-choice i { font-style: normal; font-size: 13px; line-height: 1.45; color: var(--ink-dim); }

/* Опасная кнопка: сплошная красная, подпись — что именно будет удалено */
.ad-danger {
  background: var(--red); color: #fff; border: 1px solid var(--red); border-radius: 9px;
  padding: 11px 18px; font: 800 14px/1.3 var(--body); white-space: normal; text-align: center;
  cursor: pointer; transition: background .15s, opacity .15s;
}
.ad-danger:hover { background: #B42318; border-color: #B42318; }
.ad-danger:disabled, .ad-modal .btn-amber:disabled { opacity: .45; cursor: default; }
.ad-danger:disabled:hover { background: var(--red); border-color: var(--red); }
/* отмена — слева, опасное действие — справа и отделено */
.ad-modal .actions { align-items: stretch; gap: 14px; }
.ad-modal .actions .btn-ghost { flex: none; }

/* Экран «Пространство будет удалено» */
.ad-wait {
  min-height: 100dvh; display: flex; align-items: flex-start; justify-content: center;
  padding: calc(16px + var(--safe-t, 0px)) 16px calc(24px + var(--safe-b, 0px));
}
.ad-wait__card { width: 100%; }
.ad-wait__card h2 { overflow-wrap: anywhere; }
.ad-wait__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.ad-wait__actions button { min-height: 46px; padding: 0 22px; font-size: 14.5px; }
.ad-wait .ad-err:not(:empty) { margin-top: 14px; }

/* Настройки → Профиль: блок удаления отделён от остального */
.ad-profile { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.ad-profile p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); max-width: 620px; }
.ad-profile .btn-ghost.danger { min-height: 40px; }
/* Лист профиля: удаление — ниже выхода, через черту */
.sm-item.ad-sheet-item { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; font-weight: 500; font-size: 14px; }

/* Управление сервисом: пространство на удалении — действия прямо в предупреждении */
.pf-deleting { display: flex; flex-direction: column; gap: 4px; }
.pf-deleting .pf-actions { margin-top: 10px; max-width: 460px; }
.pf-deleting .acc-btn.danger { color: var(--red); border-color: rgba(217,45,32,.4); }

@media (max-width: 640px) {
  /* на телефоне кнопки друг под другом: опасная — сверху, «Отмена» — в самом низу, под пальцем */
  .ad-modal .actions { flex-direction: column !important; flex-wrap: nowrap !important; gap: 8px; }
  .ad-modal .actions > * { flex: none !important; width: 100% !important; min-height: 48px; }
  .ad-modal .actions .ad-danger { order: -1; }
  .ad-wait__actions { flex-direction: column; }
  .ad-wait__actions button { width: 100%; min-height: 48px; }
  .ad-wait { padding-top: calc(24px + var(--safe-t, 0px)); }
}

/* ---- access.css ---- */
/* [fields] Доступ к полям: маска «по запросу» с кнопкой «Показать» (field-access.js)
   и экран «Настройки → Роли и доступы» (access.js). Только переменные кабинета. */

/* ---------- маска и кнопка «Показать» — в любом месте кабинета ---------- */
.pm-mask { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ink-dim); white-space: nowrap; max-width: 100%; }
.pm-mask .pm-mask-v { overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
.pm-mask.open { color: var(--ink); white-space: normal; }
.pm-mask-none { color: var(--ink-faint); font-family: var(--body); }
.pm-reveal { font: 600 11.5px/1 var(--body); color: var(--accent); background: rgba(10,77,166,.07);
  border: 1px solid rgba(10,77,166,.22); border-radius: 999px; padding: 4px 9px; cursor: pointer; flex: none; letter-spacing: 0; }
.pm-reveal:hover { background: rgba(10,77,166,.13); }
.pm-reveal:disabled { opacity: .55; cursor: progress; }
.pm-reveal-req { margin-left: 8px; text-transform: none; vertical-align: 1px; }
.pm-lock { display: inline-flex; color: var(--ink-faint); margin-left: 5px; vertical-align: -1px; }
.crm-phone-mask { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 4px 3px 10px;
  border: 1px solid var(--line-bright); border-radius: 999px; background: var(--bg-card); color: var(--ink-dim); max-width: 100%; }
.crm-masked-list { display: flex; flex-direction: column; gap: 8px; }
.crm-masked-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.crm-masked-val { min-height: 40px; display: flex; align-items: center; }

/* ---------- экран «Роли и доступы» ---------- */
.acc2 { display: flex; flex-direction: column; gap: 14px; }
.acc2-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; padding: 6px 0; }
.acc2-note svg { flex: none; margin-top: 1px; }
.acc2-tabs { display: flex; gap: 4px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 11px;
  overflow-x: auto; scrollbar-width: none; }
.acc2-tabs::-webkit-scrollbar { display: none; }
.acc2-tabs button { display: inline-flex; align-items: center; gap: 7px; flex: 1 0 auto; justify-content: center; border: none; background: none;
  font: 600 13px/1 var(--body); color: var(--ink-dim); padding: 10px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.acc2-tabs button:hover { color: var(--ink); }
.acc2-tabs button.on { background: var(--bg-card); color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.acc2-tabs button.on svg { color: var(--accent); }
.acc2-tabs .short { display: none; }

/* без overflow: hidden — иначе полоса «Сохранить роль» не прилипает к низу экрана */
.acc2-roles { display: grid; grid-template-columns: 236px minmax(0, 1fr); border: 1px solid var(--line); border-radius: 12px; }
.acc2-rail { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--surface-sunken); border-right: 1px solid var(--line); min-width: 0;
  border-radius: 12px 0 0 12px; }
.acc2-rail-list { display: flex; flex-direction: column; gap: 4px; }
.acc2-role { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 9px 10px; border: 1px solid transparent; border-radius: 9px;
  background: none; cursor: pointer; font: 500 13.5px/1.2 var(--body); color: var(--ink-dim); }
.acc2-role:hover { background: var(--bg-card); }
.acc2-role.on { background: var(--bg-card); border-color: var(--line-bright); color: var(--ink); box-shadow: 0 1px 3px rgba(16,24,40,.06); font-weight: 600; }
.acc2-role .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc2-role .sys { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); flex: none; }
.acc2-role .cnt { display: inline-flex; align-items: center; gap: 3px; font: 600 11px/1 var(--mono); color: var(--ink-faint); background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 7px; flex: none; }
.acc2-role.on .cnt { color: var(--accent); border-color: var(--line-bright); }
.acc2-new { display: flex; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line-bright); }
.acc2-input { height: 38px; padding: 0 11px; border: 1px solid var(--line-bright); border-radius: 8px; font: 14px var(--body); color: var(--ink);
  background: var(--bg-card); outline: none; min-width: 0; box-sizing: border-box; }
.acc2-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.12); }
.acc2-new .acc2-input { flex: 1; }
.acc2-iconbtn { display: inline-flex; align-items: center; justify-content: center; padding: 0 11px; margin: 0; min-width: 40px; }

.acc2-pane { padding: 16px 20px 0; min-width: 0; display: flex; flex-direction: column; }
.acc2-rolehd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acc2-rolehd h4 { font: 600 16px/1.2 var(--disp); color: var(--ink); margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.acc2-rolename { font-weight: 600; max-width: 300px; flex: 1 1 200px; }
.acc2-sys { font: 600 9.5px/1 var(--body); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); background: var(--surface-sunken);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 7px; }
.acc2-spacer { flex: 1; }
.acc2-copy { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-dim); border: 1px solid var(--line-bright);
  border-radius: 8px; padding: 0 4px 0 10px; height: 34px; background: var(--bg-card); }
.acc2-copy select { border: none; background: none; font: 600 12.5px var(--body); color: var(--accent); height: 30px; cursor: pointer; outline: none; max-width: 150px; }
.acc2-trash { background: none; border: 1px solid var(--line-bright); color: var(--ink-faint); border-radius: 8px; height: 34px; width: 36px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.acc2-trash:hover { color: var(--red); border-color: var(--red); }
.acc2-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.acc2-badge.ok { color: var(--green); background: rgba(31,157,87,.10); border: 1px solid rgba(31,157,87,.35); }
.acc2-people { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-dim); margin: 8px 0 2px; line-height: 1.4; }
.acc2-people svg { flex: none; color: var(--ink-faint); }

.acc2-sub { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin: 12px 0 14px; overflow-x: auto; scrollbar-width: none; }
.acc2-sub button { background: none; border: none; border-bottom: 2px solid transparent; padding: 9px 0 10px; font: 600 13.5px/1 var(--body);
  color: var(--ink-dim); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; margin-bottom: -1px; }
.acc2-sub button b { font: 600 11px/1 var(--mono); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 999px; padding: 3px 7px; color: var(--ink-faint); }
.acc2-sub button.on { color: var(--ink); border-bottom-color: var(--accent); }
.acc2-sub button.on b { color: var(--accent); }

.acc2-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.acc2-search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 11px; border: 1px solid var(--line-bright);
  border-radius: 9px; background: var(--bg-card); color: var(--ink-faint); min-width: 0; }
.acc2-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.12); }
.acc2-search input { border: none; outline: none; background: none; flex: 1; min-width: 0; font: 14px var(--body); color: var(--ink); }
.acc2-legend { display: flex; gap: 12px; font-size: 11px; color: var(--ink-faint); flex-wrap: wrap; }
.acc2-legend .inf { position: relative; padding-left: 13px; }
.acc2-legend .inf::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 999px; }
.acc2 .inf.high::before, .acc2-rl .inf.high { background: var(--red); }
.acc2 .inf.med::before, .acc2-rl .inf.med { background: var(--amber); }
.acc2 .inf.low::before, .acc2-rl .inf.low { background: var(--line-bright); }

.acc2-grp { border: 1px solid var(--line); border-radius: 11px; background: var(--bg-card); margin-bottom: 10px; overflow: hidden; }
.acc2-grp-hd { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; background: var(--surface-sunken); flex-wrap: wrap; }
.acc2-grp-tg { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font: 600 13.5px/1.2 var(--body);
  color: var(--ink); padding: 4px; text-align: left; }
.acc2-grp-tg svg { color: var(--ink-faint); transition: transform .15s; flex: none; }
.acc2-grp.open .acc2-grp-tg svg { transform: rotate(90deg); }
.acc2-grp-n { font: 600 11px/1 var(--mono); color: var(--ink-faint); }
.acc2-grp-n.some { color: var(--accent); }
.acc2-grp-all { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-faint); }
.acc2-grp-all button { font: 600 11.5px/1 var(--body); color: var(--ink-dim); background: var(--bg-card); border: 1px solid var(--line-bright);
  border-radius: 7px; padding: 6px 9px; cursor: pointer; }
.acc2-grp-all button:hover { color: var(--accent); border-color: var(--accent); }
.acc2-rows { display: none; }
.acc2-grp.open .acc2-rows { display: block; }
.acc2-grp:not(.open) .acc2-grp-hd { border-bottom: none; }
.acc2-grp.open .acc2-grp-hd { border-bottom: 1px solid var(--line); }
.acc2-row, .acc2-frow { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--line); }
.acc2-rows .acc2-row:first-child { border-top: none; }
.acc2-rl, .acc2-fl { flex: 1; min-width: 0; }
.acc2-rl .t, .acc2-fl .t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink); font-weight: 500; }
.acc2-rl .inf { width: 8px; height: 8px; border-radius: 999px; flex: none; display: inline-block; }
.acc2-rl .d, .acc2-fl .d { font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; line-height: 1.35; }

.acc2-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 9px; flex: none; }
.acc2-seg button { font: 600 12px/1 var(--body); color: var(--ink-dim); background: none; border: none; border-radius: 7px; padding: 8px 11px;
  cursor: pointer; white-space: nowrap; transition: background .14s, color .14s; }
.acc2-seg button:hover:not(:disabled) { color: var(--ink); }
.acc2-seg button.on { background: var(--bg-card); box-shadow: 0 1px 2px rgba(16,24,40,.14); color: var(--ink); }
.acc2-seg button[data-v="own"].on { color: var(--amber-deep); }
.acc2-seg button[data-v="all"].on, .acc2-seg button[data-v="yes"].on { color: var(--accent); }
.acc2-seg button:disabled { color: var(--line-bright); cursor: not-allowed; }
.acc2-lv button.lv-hidden.on { color: var(--red); }
.acc2-lv button.lv-request.on { color: var(--amber-deep); }
.acc2-lv button.lv-view.on { color: var(--accent); }
.acc2-lv button.lv-edit.on { color: var(--green); }

.acc2-ents { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.acc2-ents button { display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1 var(--body); color: var(--ink-dim); background: var(--bg-card);
  border: 1px solid var(--line-bright); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.acc2-ents button.on { color: #fff; background: var(--navy); border-color: var(--navy); }
.acc2-ents button b { font: 600 10.5px/1 var(--mono); background: var(--amber); color: #fff; border-radius: 999px; padding: 3px 6px; }
.acc2-banner { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--ink-dim); background: var(--client-soft);
  border: 1px solid rgba(10,77,166,.18); border-radius: 9px; padding: 9px 12px; margin-bottom: 12px; }
.acc2-banner.warn { background: rgba(224,138,0,.08); border-color: rgba(224,138,0,.3); }
.acc2-banner svg { flex: none; margin-top: 1px; }
.acc2-mass { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.acc2-mass .lbl { font-size: 11.5px; color: var(--ink-faint); margin-right: 2px; }
.acc2-chip { font: 600 12px/1 var(--body); color: var(--ink-dim); background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 999px;
  padding: 7px 11px; cursor: pointer; }
.acc2-chip:hover { color: var(--accent); border-color: var(--accent); }
.acc2-fgrp { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; margin-bottom: 10px; background: var(--bg-card); }
.acc2-fgrp-hd .nm { flex: 1; min-width: 0; }
.acc2-gl { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; text-transform: none; letter-spacing: 0; font-weight: 500; }
.acc2-gl .cap { font-size: 12px; color: var(--ink-faint); }
.acc2-seg.sm button { min-height: 28px; padding: 0 8px; font-size: 11.5px; }
.acc2-gclr { border: none; background: none; color: var(--ink-faint); font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 6px; cursor: pointer; }
.acc2-gclr:hover { color: var(--red); background: var(--surface-sunken); }
.acc2-fgrp-hd { font: 600 11.5px/1 var(--body); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); padding: 10px 14px;
  background: var(--surface-sunken); }
.acc2-fgrp-hd { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-height: 20px; }
.acc2-frow.limited { background: linear-gradient(90deg, rgba(224,138,0,.06), transparent 60%); }
.acc2-tag { font: 600 10px/1 var(--body); border-radius: 999px; padding: 3px 7px; text-transform: none; letter-spacing: 0; font-style: normal; }
.acc2-tag.pd { color: var(--violet); background: var(--master-soft); }
.acc2-tag.cu { color: var(--ink-dim); background: var(--surface-sunken); border: 1px solid var(--line); }
.acc2-tag.pr { color: var(--amber-deep); background: rgba(224,138,0,.1); margin-left: 6px; }
.acc2-capnote { font-size: 11px; color: var(--ink-faint); font-weight: 400; }
.acc2-hint { display: flex; gap: 7px; align-items: flex-start; font-size: 11.5px; color: var(--ink-faint); line-height: 1.45; margin: 4px 0 12px; }
.acc2-hint svg { flex: none; margin-top: 1px; }

.acc2-save { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px -20px 0; padding: 12px 20px;
  border-top: 1px solid var(--line); background: var(--bg-card); z-index: 2; border-radius: 0 0 12px 0; }
.acc2-save .btn-amber, .acc2-save .btn-ghost { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.acc2-dirty { flex: 1; font-size: 12px; color: var(--amber-deep); min-width: 120px; }

/* ---------- «Кто что видит» ---------- */
.acc2-legend2 { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.acc2-lvb { display: inline-flex; align-items: center; font: 600 11px/1 var(--body); border-radius: 999px; padding: 5px 9px; }
.acc2-lvb.lv-edit, .acc2-dot.lv-edit { color: var(--green); background: rgba(31,157,87,.10); }
.acc2-lvb.lv-view, .acc2-dot.lv-view { color: var(--accent); background: var(--client-soft); }
.acc2-lvb.lv-request, .acc2-dot.lv-request { color: var(--amber-deep); background: rgba(224,138,0,.12); }
.acc2-lvb.lv-hidden, .acc2-dot.lv-hidden { color: var(--red); background: rgba(217,45,32,.08); }
.acc2-matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-card); -webkit-overflow-scrolling: touch; }
.acc2-matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.acc2-matrix th, .acc2-matrix td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.acc2-matrix thead th { font: 600 11.5px/1.2 var(--body); color: var(--ink-dim); background: var(--surface-sunken); position: sticky; top: 0; vertical-align: bottom; }
.acc2-matrix thead th span { display: block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; margin: 0 auto; }
.acc2-matrix thead th small { display: inline-flex; align-items: center; gap: 2px; font: 600 10px/1 var(--mono); color: var(--ink-faint); margin-top: 4px; }
.acc2-matrix th.f { text-align: left; position: sticky; left: 0; background: var(--bg-card); z-index: 1; min-width: 170px; max-width: 220px; white-space: normal; }
.acc2-matrix thead th.f { background: var(--surface-sunken); z-index: 2; }
.acc2-matrix th.f button { background: none; border: none; padding: 0; font: 500 12.5px/1.3 var(--body); color: var(--ink); cursor: pointer; text-align: left; }
.acc2-matrix tr.g td { text-align: left; font: 600 10.5px/1 var(--body); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint);
  background: var(--surface-sunken); padding: 8px 10px; }
.acc2-matrix tbody tr[data-who] { cursor: pointer; }
.acc2-matrix tbody tr[data-who]:hover td, .acc2-matrix tbody tr[data-who]:hover th { background: var(--surface-sunken); }
.acc2-matrix tr.sel td, .acc2-matrix tr.sel th { background: var(--client-soft) !important; }
.acc2-dot { display: inline-block; font: 600 10.5px/1 var(--body); border-radius: 6px; padding: 4px 6px; }
#acc2-whodetail { margin-top: 14px; }
.acc2-whobox h5 { font: 600 14.5px/1.3 var(--disp); color: var(--ink); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc2-whogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.acc2-who { border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; background: var(--bg-card); }
.acc2-who .h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.acc2-who .h b { font: 600 12px/1 var(--mono); color: var(--ink-dim); }
.acc2-who ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.acc2-who li { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--ink); }
.acc2-who li .c { font: 600 10.5px/1 var(--mono); color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 2px 6px; }
.acc2-who li .w { font-size: 11px; color: var(--ink-faint); }
.acc2-who li .p { flex-basis: 100%; font-size: 11.5px; color: var(--ink-dim); }

/* ---------- журнал показов ---------- */
.acc2-logf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; margin-bottom: 10px; }
.acc2-logf label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); min-width: 0; }
.acc2-logf label.w { grid-column: span 2; }
.acc2-logf select, .acc2-logf input { height: 38px; padding: 0 10px; border: 1px solid var(--line-bright); border-radius: 8px; font: 14px var(--body);
  color: var(--ink); background: var(--bg-card); text-transform: none; letter-spacing: 0; min-width: 0; width: 100%; box-sizing: border-box; }
.acc2-logsum { font-size: 12.5px; color: var(--ink-dim); margin-bottom: 8px; min-height: 16px; }
.acc2-log { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--bg-card); }
.acc2-log-h, .acc2-log-r { display: grid; grid-template-columns: 128px minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px;
  padding: 9px 14px; align-items: baseline; font-size: 13px; }
.acc2-log-h { background: var(--surface-sunken); font: 600 11px/1.2 var(--body); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); }
.acc2-log-r { border-top: 1px solid var(--line); }
.acc2-log-r .when { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }
.acc2-log-r .where { color: var(--ink-dim); font-size: 12.5px; }
.acc2-log-r span { min-width: 0; overflow-wrap: anywhere; }
.acc2-more { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 12.5px; color: var(--ink-faint); }
.acc2-more .btn-ghost { margin: 0; }
.acc2-empty { font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; padding: 18px; border: 1px dashed var(--line-bright); border-radius: 11px;
  background: var(--surface-sunken); }

/* ---------- телефон и узкие экраны ---------- */
@media (max-width: 760px) {
  .acc2-roles { grid-template-columns: 1fr; border: none; border-radius: 0; }
  .acc2-rail { border-right: none; border: 1px solid var(--line); border-radius: 11px; padding: 8px; }
  .acc2-rail-list { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; padding-bottom: 2px; }
  .acc2-rail-list::-webkit-scrollbar { display: none; }
  .acc2-role { width: auto; flex: none; padding: 8px 10px; }
  .acc2-role .nm { overflow: visible; }
  .acc2-new { margin-top: 6px; padding-top: 8px; }
  .acc2-pane { padding: 14px 0 0; }
  .acc2-rolehd h4 { font-size: 15px; }
  .acc2-copy { flex: 1 1 auto; }
  .acc2-copy select { max-width: none; flex: 1; }
  .acc2-row, .acc2-frow { flex-direction: column; align-items: stretch; gap: 8px; padding: 11px 12px; }
  .acc2-seg { display: flex; width: 100%; }
  .acc2-seg button { flex: 1 1 0; padding: 10px 4px; min-height: 40px; font-size: 12px; }
  .acc2-grp-all { margin-left: 0; width: 100%; }
  .acc2-grp-all button { flex: 1; padding: 9px 6px; }
  .acc2-grp-all .lbl { flex: none; }
  .acc2-save { margin: 6px 0 0; padding: 10px 12px; bottom: calc(var(--tabbar-h, 58px) + var(--safe-b, 0px) + 6px);
    border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 20px rgba(16,24,40,.12); }
  .acc2-save:not(:has(.acc2-dirty:not(:empty))) { position: static; box-shadow: none; }
  .acc2-tabs .full { display: none; }
  .acc2-tabs .short { display: inline; }
  .acc2-mass { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -2px; padding: 0 2px 2px; }
  .acc2-mass::-webkit-scrollbar { display: none; }
  .acc2-mass .lbl { display: none; }
  .acc2-chip { flex: none; }
  .acc2-logf { grid-template-columns: 1fr 1fr; gap: 8px; }
  .acc2-logf label.w { grid-column: 1 / -1; }
  .acc2-save .btn-amber { flex: 1; justify-content: center; }
  .acc2-tabs button { padding: 10px 10px; font-size: 12.5px; }
  .acc2-log-h { display: none; }
  .acc2-log-r { grid-template-columns: 1fr auto; grid-template-areas: "who when" "what what" "whose where"; row-gap: 4px; }
  .acc2-log-r .who { grid-area: who; font-weight: 600; }
  .acc2-log-r .when { grid-area: when; }
  .acc2-log-r .what { grid-area: what; }
  .acc2-log-r .whose { grid-area: whose; }
  .acc2-log-r .where { grid-area: where; text-align: right; }
  .acc2-matrix th.f { min-width: 130px; }
}

/* карточка раздела настроек обрезает содержимое по скруглению — и вместе с ним «липкую» полосу
   сохранения; у экрана ролей обрезать нечего */
.pm-sys-sec:has(.acc2) { overflow: visible; }

/* сенсорный экран (телефон, планшет): кнопки не ниже 32 px — по ним попадают пальцем */
@media (pointer: coarse), (max-width: 900px) {
  .pm-reveal { min-height: 32px; padding: 6px 12px; font-size: 12.5px; }
  .acc2-grp-tg { min-height: 36px; }
  .acc2-seg button, .acc2-grp-all button, .acc2-chip, .acc2-ents button, .acc2-role, .acc2-tabs button,
  .acc2-sub button, .acc2-matrix th.f button { min-height: 36px; }
  .acc2-matrix th.f button { display: inline-flex; align-items: center; }
  .acc2-copy select { min-height: 32px; }
}

/* ---- amo-sync.css ---- */
/* [amo-sync] «Настройки → amoCRM → Синхронизация сделок» и значок «amoCRM» у сделок */

.amos-status { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-sunken, #F2F4F7); }
.amos-dot { width: 10px; height: 10px; border-radius: 999px; margin-top: 5px; flex: none; background: var(--ink-faint); }
.amos-status.ok .amos-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(31,157,87,.15); }
.amos-status.busy .amos-dot { background: var(--accent); animation: amos-pulse 1.4s ease-in-out infinite; }
.amos-status.warn { border-color: rgba(224,138,0,.4); background: rgba(224,138,0,.07); }
.amos-status.warn .amos-dot { background: var(--amber-deep, #B54708); }
@keyframes amos-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(10,77,166,.35); } 50% { box-shadow: 0 0 0 6px rgba(10,77,166,0); } }
@media (prefers-reduced-motion: reduce) { .amos-status.busy .amos-dot { animation: none; } }
.amos-st-body { min-width: 0; flex: 1; }
.amos-st-line { font-size: 13.5px; color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }
.amos-sub { font-size: 12.5px; color: var(--ink-dim); line-height: 1.45; margin-top: 3px; overflow-wrap: anywhere; }
.amos-errtext { color: var(--amber-deep, #B54708); display: flex; gap: 6px; align-items: flex-start; }
.amos-prog { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 9px 0 2px; }
.amos-prog i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s ease; }

.amos-pipes { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.amos-pipe { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); cursor: pointer; min-height: 48px; box-sizing: border-box; }
.amos-pipe.on { border-color: rgba(10,77,166,.35); background: rgba(10,77,166,.03); }
.amos-pipe input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.amos-sw { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--line-bright); flex: none; transition: background .2s; }
.amos-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
.amos-pipe input:checked + .amos-sw { background: var(--accent); }
.amos-pipe input:checked + .amos-sw::after { transform: translateX(16px); }
.amos-pipe input:focus-visible + .amos-sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.amos-pipe input:disabled + .amos-sw { opacity: .55; }
.amos-pn { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.amos-pn b { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.amos-pn small { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.amos-keep { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.amos-pipe.on .amos-keep { color: var(--accent); font-weight: 600; }

.amos-modes { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.amos-modes legend { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); margin-bottom: 6px; padding: 0; }
.amos-mode { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink); min-height: 34px; cursor: pointer; }
.amos-mode input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.amos-stop { color: var(--red, #C2410C) !important; }
.amos-fields { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding: 10px 14px; border: 1px dashed var(--line-bright); border-radius: 10px; font-size: 13px; color: var(--ink-dim); }
.amos-fields > span { display: inline-flex; gap: 7px; align-items: center; min-width: 0; }
.amos-how { margin-top: 14px; align-items: flex-start; }
.amos-err { margin-top: 6px; align-items: flex-start; }

/* окно «Поля amoCRM → поля программы» */
.modal.amos-modal { max-width: 640px; }
.modal .amos-search { width: 100%; box-sizing: border-box; }
.amos-only { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-dim); margin: 8px 0 4px; cursor: pointer; }
.amos-flist { display: flex; flex-direction: column; }
/* название группы полей amoCRM (вкладки её карточки) над её полями */
.amos-fgroup { font-size: 13.5px; font-weight: 700; color: var(--ink); padding: 16px 0 6px; border-bottom: 2px solid var(--line-bright); }
.amos-fgroup:first-child { padding-top: 4px; }
.amos-frow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 210px); gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.amos-fname { min-width: 0; }
.amos-fname b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.amos-fname small { font-size: 11.5px; color: var(--ink-faint); }
.modal .amos-frow select { padding: 8px 10px; font-size: 13px; border-radius: 8px; }
.amos-fixed { font-size: 12.5px; color: var(--ink-dim); }
@media (max-width: 560px) {
  .amos-frow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .amos-keep { display: none; }
}

/* значок «amoCRM» у сделки: на доске, в списке и в карточке */
.crm-amo { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 5px; color: var(--accent); background: rgba(10,77,166,.08); border: 1px solid rgba(10,77,166,.22); text-decoration: none; white-space: nowrap; }
a.crm-amo:hover { background: rgba(10,77,166,.14); }
.crm-amo-head { font-size: 12px; padding: 3px 9px; }
.crm-amo-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-dim); line-height: 1.45; padding: 9px 12px; margin-bottom: 14px; border-radius: 10px; background: rgba(10,77,166,.05); border: 1px solid rgba(10,77,166,.15); }
.crm-amo-lock { display: inline-flex; color: var(--accent); margin-left: 5px; vertical-align: -1px; }
.crm-card.pending { opacity: .6; }
.crm-amo-x { width: 100%; box-sizing: border-box; border: 1px solid var(--line-bright); border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 13px; color: var(--ink); background: var(--bg-card); }
.crm-amo-x:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.12); }
.crm-amo-x.err { border-color: var(--red, #D92D20); }
.crm-money .m .crm-amo-edit { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; }

/* ---- payroll.css ---- */
/* [payroll] Раздел «Выплаты» (#/payroll) и вкладка «Выплаты» в карточке сделки.
   Цвета и шрифты — переменные кабинета (app.css). Строки выплат на широком экране — таблица
   с правкой в ячейках, уже 1180 px — карточки; на сенсорном экране всё нажимаемое — от 40 px. */

.pr { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pr [hidden] { display: none !important; }
.pr .pr-headline { margin-bottom: 0; align-items: center; }
.pr-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- вкладки раздела ---------- */
.pr-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.pr-tabs::-webkit-scrollbar { display: none; }
.pr-tabs a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  font-size: 14px; font-weight: 600; color: var(--ink-dim); white-space: nowrap; border-bottom: 2px solid transparent;
  margin-bottom: -1px; }
.pr-tabs a:hover { color: var(--ink); }
.pr-tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
.pr-tabs a:last-child:not(:first-child) { margin-left: auto; }

/* ---------- кнопки ---------- */
.pr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px;
  border-radius: 9px; border: 1px solid var(--line-bright); background: var(--bg-card); color: var(--ink);
  font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.pr-btn:hover { border-color: var(--accent); color: var(--accent); }
.pr-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pr-btn.primary:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.pr-btn.sm { min-height: 32px; padding: 0 11px; font-size: 12.5px; }
.pr-btn.ghost { border-color: transparent; background: none; color: var(--ink-dim); }
.pr-btn.danger:hover { color: var(--red); border-color: var(--red); }
.pr-btn:disabled { opacity: .55; cursor: default; }
.pr > .pr-btn { align-self: flex-start; }
.pr-ib { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none;
  border: 1px solid transparent; border-radius: 8px; background: none; color: var(--ink-faint); cursor: pointer; }
.pr-ib:hover { color: var(--accent); border-color: var(--line-bright); background: var(--bg-card); }
.pr-ib.danger:hover { color: var(--red); border-color: rgba(217,45,32,.35); }
.pr-ib.add { color: var(--accent); border-color: var(--line-bright); background: var(--bg-card); }
.pr-link { color: var(--accent); font-weight: 600; font-size: 13px; }

/* ---------- состояние сохранения ---------- */
.pr-save { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-faint);
  max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-save::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.pr-save:empty { display: none; }
.pr-save.busy { color: var(--amber-deep); }
.pr-save.busy::before { background: var(--amber); animation: pr-pulse .9s ease-in-out infinite; }
.pr-save.err { color: var(--red); }
.pr-save.err::before { background: var(--red); }
@keyframes pr-pulse { 50% { opacity: .3; } }

/* ---------- отборы ---------- */
.pr-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.pr-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint); min-width: 0; flex: 0 1 auto; }
.pr-filters label.grow { flex: 1 1 200px; }
.pr-filters select, .pr-filters input { min-height: 38px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line-bright);
  background: var(--bg-card); color: var(--ink); font-family: var(--body); font-size: 14px; font-weight: 500; letter-spacing: 0;
  text-transform: none; max-width: 100%; outline: none; }
.pr-filters select { max-width: 220px; }
.pr-filters select:focus, .pr-filters input:focus { border-color: var(--accent); }
.pr-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pr-chips a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-bright); background: var(--bg-card); color: var(--ink-dim); font-size: 13px; font-weight: 600; }
.pr-chips a.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- показатели ---------- */
.pr-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pr-kpi { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pr-kpi .l { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-dim); }
.pr-kpi .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 19px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-kpi .s { font-size: 12px; color: var(--ink-faint); }
.pr-kpi.tone-acc .v { color: var(--accent); }
.pr-kpi.tone-due .v { color: var(--amber-deep); }
.pr-kpi.tone-paid .v { color: var(--margin); }

.pr-panel { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 3px rgba(16,24,40,.06); min-width: 0; }
/* таблица строк меряет себя, а не окно: рядом боковое меню, и при ширине окна 1200–1400 px колонки
   уезжали за край */
#pr-lines { container: prlines / inline-size; }
.pr-panel > header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.pr-panel > header h3 { font-size: 15px; font-weight: 700; margin: 0; }
.pr-panel > header .sub { font-size: 12.5px; color: var(--ink-faint); }
.pr-empty { padding: 26px 18px; text-align: center; color: var(--ink-faint); font-size: 13.5px; line-height: 1.5; }
.pr-note { font-size: 13px; line-height: 1.5; color: var(--ink-dim); }
.pr-note.warn { background: rgba(224,138,0,.09); border: 1px solid rgba(224,138,0,.35); border-radius: 10px; padding: 10px 13px; color: var(--ink); }
.pr-foot, .pr-intro { font-size: 12.5px; color: var(--ink-faint); line-height: 1.55; max-width: 900px; }
.pr-intro { color: var(--ink-dim); font-size: 13.5px; }
.pr-more { display: block; width: 100%; min-height: 40px; border: none; border-top: 1px solid var(--line); background: var(--bg-raise);
  color: var(--accent); font-weight: 600; font-size: 13.5px; cursor: pointer; }

/* ---------- массовые действия ---------- */
.pr-bulk { position: sticky; top: 8px; z-index: 6; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--navy); color: #fff; border-radius: 12px; padding: 8px 10px 8px 16px; box-shadow: 0 8px 24px rgba(0,30,80,.22); }
.pr-bulk .spacer { flex: 1; }
.pr-bulk span { font-size: 13px; opacity: .85; }
.pr-bulk .pr-btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.pr-bulk .pr-btn:hover { background: rgba(255,255,255,.18); color: #fff; border-color: #fff; }
.pr-bulk .pr-btn.primary { background: #fff; color: var(--navy); border-color: #fff; }

/* ---------- строки выплат: таблица ---------- */
.pr-grid { --pr-cols: minmax(140px, 1.3fr) minmax(120px, 1.1fr) 112px 132px 120px 120px 104px minmax(100px, .9fr) 64px; }
.pr-grid.sel { --pr-cols: 28px minmax(140px, 1.3fr) minmax(120px, 1.1fr) 112px 132px 120px 120px 104px minmax(100px, .9fr) 64px; }
/* ячейки — по верхнему краю: под именем и суммой бывает вторая строка (роль, «по схеме»), и при
   выравнивании по центру остальные поля съезжали ниже имени */
.pr-row { display: grid; grid-template-columns: var(--pr-cols); gap: 4px; align-items: start; padding: 6px 10px;
  border-top: 1px solid var(--line); min-width: 0; }
.pr-row > .pr-sel, .pr-row > .pr-acts { min-height: 32px; align-items: center; }
.pr-row.pr-head { border-top: none; background: var(--surface-sunken); font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); padding-top: 9px; padding-bottom: 9px; border-radius: 12px 12px 0 0; }
.pr-row.pr-head { align-items: center; }
.pr-row.pr-head > .pr-c:not(.pr-sel) { padding: 0 8px; }   /* над текстом полей: у них рамка 1 + отступ 7 */
.pr-row.pr-head .pr-amt { text-align: right; }
.pr-row.helper { background: var(--bg-raise); }
.pr-row.helper .pr-who { padding-left: 16px; position: relative; }
.pr-row.helper .pr-who::after { content: "↳"; position: absolute; left: 2px; top: 7px; color: var(--ink-faint); font-size: 13px; }
.pr-row.st-paid { background: linear-gradient(90deg, rgba(31,157,87,.05), transparent 60%); }
.pr-c { min-width: 0; display: flex; flex-direction: column; gap: 1px; border-radius: 7px; transition: background .2s, box-shadow .2s; }
.pr-c > small { font-size: 11px; color: var(--ink-faint); padding: 0 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-c input:not([type=checkbox]), .pr-c select { width: 100%; min-width: 0; height: 32px; border: 1px solid transparent; border-radius: 7px;
  background-color: transparent; padding: 0 7px; color: var(--ink); font-family: var(--body); font-size: 13.5px; outline: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s; }
/* только цвет фона: «background» целиком сбрасывал размер и место точки статуса, и при наведении
   она растягивалась на всё поле синим пятном */
.pr-c input:not([type=checkbox]):hover, .pr-c select:hover { border-color: var(--line-bright); background-color: var(--bg-card); }
.pr-c input:not([type=checkbox]):focus, .pr-c select:focus { border-color: var(--accent); background-color: var(--bg-card); box-shadow: 0 0 0 3px rgba(10,77,166,.12); }
.pr-c input[type=date] { font-family: var(--mono); font-size: 12.5px; padding-right: 2px; }
/* пустая дата — бледной подсказкой, а не чёрным «дд.мм.гггг» */
.pr-c input[type=date]:invalid::-webkit-datetime-edit { color: var(--ink-faint); opacity: .7; }
.pr-c input[type=date]:invalid:focus::-webkit-datetime-edit { opacity: 1; }
.pr-c .pr-num, .pr-amt input { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.pr-amt > small { text-align: right; }
.pr-ro { display: block; padding: 0 7px; font-size: 13.5px; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-ro.pr-num { text-align: right; }
.pr-ro.neg, .pr-amt input.neg { color: var(--red); }
.pr-dash { color: var(--ink-faint); }
.pr-sel { display: flex; align-items: center; justify-content: center; }
.pr-sel input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.pr-acts { flex-direction: row; justify-content: flex-end; gap: 2px; }
.pr-c.pr-memo { gap: 3px; }
.pr-badges { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 7px; }
.pr-badges:empty { display: none; }
.pr-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; line-height: 17px; padding: 0 7px;
  border-radius: 999px; border: 1px solid var(--line-bright); color: var(--ink-dim); background: var(--bg-card); white-space: nowrap; }
.pr-badge.warn { color: var(--amber-deep); border-color: rgba(224,138,0,.45); background: rgba(224,138,0,.08); }
.pr-badge.ok { color: var(--margin); border-color: rgba(31,157,87,.4); background: rgba(31,157,87,.07); }
.pr-badge.dim { color: var(--ink-faint); border-style: dashed; }
.pr-badge.act { color: var(--accent); border-color: rgba(10,77,166,.4); cursor: pointer; font-family: var(--body); }
.pr-share { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-faint); padding: 0 7px; }
.pr-share input:not([type=checkbox]) { width: 64px; height: 26px; text-align: right; font-family: var(--mono); }

/* статус строки: цвет текста и точка */
.pr-st { font-weight: 700; }
select.pr-st { padding-left: 22px !important; background-repeat: no-repeat; background-position: 8px 50%; background-size: 8px 8px; }
select.pr-st.tone-acc { color: var(--accent); background-image: radial-gradient(circle, var(--accent) 60%, transparent 62%); }
select.pr-st.tone-due { color: var(--amber-deep); background-image: radial-gradient(circle, var(--amber) 60%, transparent 62%); }
select.pr-st.tone-paid { color: var(--margin); background-image: radial-gradient(circle, var(--green) 60%, transparent 62%); }
span.pr-st { display: inline-flex; align-items: center; gap: 6px; padding: 0 7px; font-size: 13px; line-height: 32px; white-space: nowrap; }
span.pr-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex: none; }
span.pr-st.tone-acc { color: var(--accent); }
span.pr-st.tone-acc::before { background: var(--accent); }
span.pr-st.tone-due { color: var(--amber-deep); }
span.pr-st.tone-due::before { background: var(--amber); }
span.pr-st.tone-paid { color: var(--margin); }
span.pr-st.tone-paid::before { background: var(--green); }

/* ячейка сохраняется / сохранилась / не сохранилась */
.pr-c.pr-busy, label.pr-busy { background: rgba(224,138,0,.10); }
.pr-c.pr-ok, label.pr-ok { background: rgba(31,157,87,.12); }
.pr-c.pr-err, label.pr-err, input.pr-err { box-shadow: inset 0 0 0 1.5px var(--red); }

/* ---------- шапка сделки над её строками ---------- */
.pr-deal { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 10px 12px 9px;
  border-top: 1.5px solid var(--line-bright); background: var(--surface-sunken); }
.pr-grid > .pr-deal:first-of-type { border-top-width: 1px; }
.pr-deal .pr-sel { width: 28px; }
.pr-deal-t { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pr-deal-t > a, .pr-deal-t > b { font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-deal-t > a:hover { color: var(--accent); }
.pr-deal-m { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: 12px; color: var(--ink-dim); }
.pr-deal-f, .pr-card-info { display: flex; align-items: flex-end; gap: 8px 12px; flex-wrap: wrap; }
.pr-deal-f label, .pr-card-info label { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint); border-radius: 8px; min-width: 0; }
.pr-deal-f label > span, .pr-card-info label > span:not(.pr-chat) { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); line-height: 32px; }
.pr-deal-f select, .pr-deal-f input, .pr-card-info select, .pr-card-info input { height: 32px; border: 1px solid var(--line-bright); border-radius: 8px;
  background: var(--bg-card); padding: 0 8px; color: var(--ink); font-family: var(--body); font-size: 13px; outline: none; min-width: 0;
  letter-spacing: 0; text-transform: none; font-weight: 500; }
.pr-deal-f input[type=date], .pr-card-info input[type=date] { font-family: var(--mono); font-size: 12.5px; }
.pr-deal-f select:focus, .pr-deal-f input:focus, .pr-card-info select:focus, .pr-card-info input:focus { border-color: var(--accent); }
.pr-deal-f label.chat input, .pr-card-info label.chat input { width: 200px; }
.pr-deal-f a, .pr-card-info a { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; line-height: 32px; }
.pr-chat { display: inline-flex; align-items: center; gap: 4px; }
.pr-chat .pr-ib { line-height: 1; }

/* ---------- оклад ---------- */
.pr-sal { display: flex; flex-direction: column; }
.pr-sal-r { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--line); }
.pr-sal-r:first-child { border-top: none; }
.pr-sal-r .nm { flex: 1 1 200px; font-weight: 600; min-width: 0; }
.pr-sal-r .nm small { color: var(--ink-faint); font-weight: 500; }
.pr-sal-r .am { display: flex; flex-direction: column; font-family: var(--mono); font-weight: 700; font-size: 14px; text-align: right; }
.pr-sal-r .am small { font-family: var(--body); font-weight: 500; font-size: 11.5px; color: var(--ink-faint); }
.pr-sal-add { padding: 10px 16px; border-top: 1px solid var(--line); }
.pr-hist { font-size: 13px; color: var(--ink-dim); display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.pr-hist b { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }

/* ---------- итого по людям ---------- */
.pr-sum { display: flex; flex-direction: column; }
.pr-sum-r { display: grid; grid-template-columns: minmax(170px, 1.6fr) repeat(8, minmax(0, 1fr)); gap: 8px; align-items: center;
  padding: 10px 16px; border-top: 1px solid var(--line); color: var(--ink); font-size: 13.5px; }
.pr-sum-r > span:not(.nm) { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pr-sum-r .nm { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pr-sum-r .nm small { font-weight: 500; color: var(--amber-deep); }
.pr-sum-r .b { font-weight: 700; }
.pr-sum-r .tone-due { color: var(--amber-deep); }
.pr-sum-r .tone-paid { color: var(--margin); }
a.pr-sum-r:hover { background: var(--bg-raise); }
.pr-sum-r.head { border-top: none; background: var(--surface-sunken); font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint); border-radius: 12px 12px 0 0; }
.pr-sum-r.head > span { font-family: var(--body); white-space: normal; line-height: 1.3; }
.pr-sum-r.foot { font-weight: 700; background: var(--surface-sunken); border-top: 1.5px solid var(--line-bright); border-radius: 0 0 12px 12px; }

/* ---------- мои выплаты ---------- */
.pr-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 14px 16px; }
.pr-month { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px;
  color: var(--ink); font-size: 12.5px; background: var(--bg-card); }
.pr-month:hover, .pr-month.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.10); }
.pr-month b { font-size: 14px; text-transform: capitalize; }
.pr-month span { font-family: var(--mono); color: var(--ink-dim); }
.pr-month .tone-acc { color: var(--accent); }
.pr-month .tone-due { color: var(--amber-deep); }
.pr-month .tone-paid { color: var(--margin); }
.pr-mine { display: flex; flex-direction: column; }
.pr-mine-r { display: grid; grid-template-columns: minmax(0, 1fr) 130px 140px 150px; gap: 10px; align-items: center; padding: 9px 16px;
  border-top: 1px solid var(--line); font-size: 13.5px; }
.pr-mine-r:first-child { border-top: none; }
.pr-mine-r .t { min-width: 0; font-weight: 600; }
.pr-mine-r .t small { display: block; font-weight: 500; color: var(--ink-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-mine-r .a { font-family: var(--mono); font-weight: 700; text-align: right; }
.pr-mine-r .d { font-size: 12.5px; color: var(--ink-dim); }

/* ---------- схемы выплат ---------- */
.pr-scheme { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.pr-scheme-h, .pr-item { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.pr-scheme label, .pr-item label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint); min-width: 0; }
.pr-scheme label.grow { flex: 1 1 240px; }
.pr-scheme label.on, .pr-item label.on { flex-direction: row; align-items: center; gap: 7px; text-transform: none; letter-spacing: 0;
  font-size: 13px; color: var(--ink); min-height: 38px; }
.pr-scheme input:not([type=checkbox]), .pr-scheme select { min-height: 38px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line-bright);
  background: var(--bg-card); color: var(--ink); font-family: var(--body); font-size: 14px; text-transform: none; letter-spacing: 0;
  outline: none; max-width: 100%; min-width: 0; }
.pr-scheme input:focus, .pr-scheme select:focus { border-color: var(--accent); }
.pr-scheme input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); }
.pr-items { display: flex; flex-direction: column; gap: 8px; }
.pr-item { padding: 10px 12px; background: var(--bg-raise); border: 1px solid var(--line); border-radius: 10px; }
.pr-item label.nm { flex: 1 1 160px; }
.pr-item label.val { width: 120px; }
.pr-item label.fld { flex: 1 1 220px; }
.pr-item select[data-i="trigger"] { max-width: 280px; }
.pr-item .pr-ib { align-self: center; }
.pr-scheme-f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pr-scheme-f .spacer { flex: 1; }

/* ---------- форма в окне ---------- */
.pr-form .field { margin-bottom: 14px; }
.pr-form .field input, .pr-form .field select { width: 100%; min-height: 44px; font-size: 16px; border: 1px solid var(--line-bright);
  border-radius: 10px; padding: 0 12px; background: var(--bg); color: var(--ink); font-family: var(--body); }
.pr-form .check { margin: 4px 0 12px; }
.pr-form .pr-note { margin-bottom: 12px; }

/* ---------- вкладка «Выплаты» в карточке сделки ---------- */
.pr-in-card { gap: 12px; }
.pr-card-sch { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--ink-dim); background: var(--bg-raise);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.pr-card-sch i { color: var(--amber-deep); font-style: normal; }
.pr-card-lines { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pr-card-lines > .crm-faint { padding: 10px 12px !important; }
.pr-card-f { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.pr-card-t { font-size: 12.5px; color: var(--ink-dim); font-family: var(--mono); }
/* в узкой колонке карточки строка — две строки ячеек */
.pr-grid.compact { --pr-cols: minmax(130px, 1.3fr) minmax(100px, 1fr) 110px 122px 64px; }
.pr-grid.compact .pr-head { display: none; }
.pr-grid.compact .pr-row { grid-template-areas: "who what amt st acts" "due paid mon note note"; row-gap: 2px; padding-top: 6px; padding-bottom: 6px; }
.pr-grid.compact .pr-row:first-of-type { border-top: none; }
.pr-grid.compact .pr-who { grid-area: who; }
.pr-grid.compact .pr-what { grid-area: what; }
.pr-grid.compact .pr-amt { grid-area: amt; }
.pr-grid.compact .pr-stc { grid-area: st; }
.pr-grid.compact .pr-due { grid-area: due; }
.pr-grid.compact .pr-paid { grid-area: paid; }
.pr-grid.compact .pr-mon { grid-area: mon; }
.pr-grid.compact .pr-memo { grid-area: note; }
.pr-grid.compact .pr-acts { grid-area: acts; }
.pr-grid.compact :is(.pr-due, .pr-paid, .pr-mon)::before { content: attr(data-l); font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); padding: 0 7px; }

/* ---------- таблица вмещается: поля шапки сделки — под колонками строк ---------- */
@container prlines (min-width: 1100px) {
  .pr-grid:not(.compact) > .pr-deal { display: grid; grid-template-columns: var(--pr-cols); column-gap: 4px; row-gap: 6px;
    align-items: end; padding: 10px 10px 9px; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-f { display: contents; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-f label { letter-spacing: .03em; white-space: nowrap; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-f input, .pr-grid:not(.compact) > .pr-deal .pr-deal-f select { width: 100%; }
  .pr-grid:not(.compact) > .pr-deal .pr-chat { display: flex; align-items: center; gap: 4px; }
  .pr-grid:not(.compact) > .pr-deal .pr-chat input { flex: 1 1 auto; }
  .pr-grid:not(.compact) > .pr-deal > .pr-sel { align-self: center; justify-self: center; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-t { grid-column: 1 / span 3; align-self: center; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-f > label:nth-child(1) { grid-column: 4; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-f > label:nth-child(2) { grid-column: 5; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-f > label:nth-child(3) { grid-column: 6; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-f > label.chat { grid-column: 7 / span 2; }
  .pr-grid:not(.compact) > .pr-deal .pr-deal-f > .add { grid-column: 9; justify-self: end; }
  .pr-grid.sel:not(.compact) > .pr-deal .pr-deal-t { grid-column: 2 / span 3; }
  .pr-grid.sel:not(.compact) > .pr-deal .pr-deal-f > label:nth-child(1) { grid-column: 5; }
  .pr-grid.sel:not(.compact) > .pr-deal .pr-deal-f > label:nth-child(2) { grid-column: 6; }
  .pr-grid.sel:not(.compact) > .pr-deal .pr-deal-f > label:nth-child(3) { grid-column: 7; }
  .pr-grid.sel:not(.compact) > .pr-deal .pr-deal-f > label.chat { grid-column: 8 / span 2; }
  .pr-grid.sel:not(.compact) > .pr-deal .pr-deal-f > .add { grid-column: 10; }
}

/* ---------- таблица не вмещается в строку (700–1099 px): строка — в две линии ---------- */
@container prlines (max-width: 1099px) {
  .pr-grid .pr-head { display: none; }
  .pr-grid:not(.compact) { --pr-cols: minmax(130px, 1.3fr) minmax(100px, 1fr) 112px 132px 64px; }
  .pr-grid.sel:not(.compact) { --pr-cols: 28px minmax(130px, 1.3fr) minmax(100px, 1fr) 112px 132px 64px; }
  .pr-grid:not(.compact) .pr-row { grid-template-areas: "who what amt st acts" "due paid mon note note"; row-gap: 4px;
    padding-top: 8px; padding-bottom: 8px; }
  .pr-grid.sel:not(.compact) .pr-row { grid-template-areas: "sel who what amt st acts" ". due paid mon note note"; }
  .pr-grid:not(.compact) .pr-row > .pr-sel { grid-area: sel; }
  .pr-grid:not(.compact) .pr-who { grid-area: who; }
  .pr-grid:not(.compact) .pr-what { grid-area: what; }
  .pr-grid:not(.compact) .pr-amt { grid-area: amt; }
  .pr-grid:not(.compact) .pr-stc { grid-area: st; }
  .pr-grid:not(.compact) .pr-due { grid-area: due; }
  .pr-grid:not(.compact) .pr-paid { grid-area: paid; }
  .pr-grid:not(.compact) .pr-mon { grid-area: mon; }
  .pr-grid:not(.compact) .pr-memo { grid-area: note; }
  .pr-grid:not(.compact) .pr-acts { grid-area: acts; }
  .pr-grid:not(.compact) :is(.pr-due, .pr-paid, .pr-mon, .pr-memo)::before { content: attr(data-l); font-size: 10px;
    font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); padding: 0 8px; }
  .pr-row.helper { border-left: 3px solid var(--line-bright); }
}

/* ---------- узкая таблица (уже 700 px): строки — карточки ---------- */
@container prlines (max-width: 699px) {
  .pr-grid:not(.compact) .pr-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 12px; position: relative;
    grid-template-areas: "who amt" "what st" "due paid" "mon mon" "note note" "acts acts"; }
  .pr-grid:not(.compact) .pr-what { grid-area: what; }
  .pr-grid:not(.compact) .pr-stc { grid-area: st; }
  .pr-grid:not(.compact) .pr-due { grid-area: due; }
  .pr-grid:not(.compact) .pr-paid { grid-area: paid; }
  .pr-grid:not(.compact) .pr-mon { grid-area: mon; }
  .pr-grid:not(.compact).sel .pr-row { padding-left: 40px;
    grid-template-areas: "who amt" "what st" "due paid" "mon mon" "note note" "acts acts"; }
  .pr-grid:not(.compact) .pr-row > .pr-sel { position: absolute; left: 8px; top: 12px; width: 28px; height: 28px; grid-area: auto; }
  .pr-grid:not(.compact) .pr-who { grid-area: who; }
  .pr-grid:not(.compact) .pr-amt { grid-area: amt; }
  .pr-grid:not(.compact) .pr-memo { grid-area: note; }
  .pr-grid:not(.compact) .pr-acts { grid-area: acts; }
  .pr-grid:not(.compact) .pr-acts:empty { display: none; }
  .pr-grid:not(.compact) .pr-c:not(.pr-sel):not(.pr-acts)::before { content: attr(data-l); font-size: 10px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ink-faint); padding: 0 7px; }
  .pr-grid .pr-c input:not([type=checkbox]), .pr-grid .pr-c select { border-color: var(--line); background-color: var(--bg-card); }
  .pr-row.helper { border-left: 3px solid var(--line-bright); }
  .pr-deal .pr-sel { width: 28px; height: 28px; }
}

/* ---------- уже 1180 px: итоги по людям — карточками, поля — с рамкой ---------- */
@media (max-width: 1179px) {
  .pr-grid .pr-c input:not([type=checkbox]), .pr-grid .pr-c select { border-color: var(--line); background-color: var(--bg-card); }
  .pr-sum-r { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .pr-sum-r .nm { grid-column: 1 / -1; font-size: 14.5px; }
  .pr-sum-r.head { display: none; }
  .pr-sum-r > span:not(.nm) { display: flex; justify-content: space-between; gap: 8px; }
  .pr-sum-r > span:not(.nm)::before { content: attr(data-l); font-family: var(--body); color: var(--ink-faint); font-size: 12px; font-weight: 500; }
}

/* ---------- сенсорный экран: зоны нажатия ---------- */
@media (max-width: 1100px), (pointer: coarse) {
  .pr-ib { width: 40px; height: 40px; }
  .pr-btn, .pr-btn.sm { min-height: 40px; }
  .pr-chips a { min-height: 40px; }
  .pr-badge.act { min-height: 34px; padding: 0 12px; }
  .pr-c input:not([type=checkbox]), .pr-c select, .pr-deal-f select, .pr-deal-f input, .pr-card-info select, .pr-card-info input { height: 44px; }
  .pr-share input:not([type=checkbox]) { height: 40px; width: 80px; }
  .pr-sel input { width: 22px; height: 22px; }
}

/* ---------- телефон ---------- */
@media (max-width: 640px) {
  .pr .pr-headline { align-items: flex-start; }
  .pr-actions { width: 100%; justify-content: flex-start; }
  .pr-save { max-width: 100%; }
  .pr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-filters label, .pr-filters label.grow { flex: 1 1 calc(50% - 5px); }
  .pr-filters select { max-width: none; width: 100%; }
  .pr-deal-f, .pr-card-info { width: 100%; }
  .pr-deal-f label, .pr-card-info label { flex: 1 1 calc(50% - 6px); }
  .pr-deal-f label.chat, .pr-card-info label.chat { flex-basis: 100%; }
  .pr-deal-f label.chat input, .pr-card-info label.chat input { width: 100%; flex: 1; }
  .pr-chat { width: 100%; }
  .pr-grid.compact .pr-row { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "who amt" "what st" "due paid" "mon mon" "note note" "acts acts"; gap: 6px 10px; padding: 10px 12px; }
  .pr-grid.compact .pr-row.helper { border-left: 3px solid var(--line-bright); }
  .pr-grid.compact .pr-c:not(.pr-acts)::before { content: attr(data-l); font-size: 10px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ink-faint); padding: 0 7px; }
  .pr-grid.compact .pr-c input:not([type=checkbox]), .pr-grid.compact .pr-c select { border-color: var(--line); background-color: var(--bg-card); }
  .pr-grid.compact .pr-acts:empty { display: none; }
  .pr-sum-r { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pr-mine-r { grid-template-columns: minmax(0, 1fr) auto; }
  .pr-mine-r .d { grid-column: 1 / -1; }
  .pr-item label, .pr-item label.nm, .pr-item label.fld, .pr-item label.val { flex: 1 1 100%; width: auto; }
  .pr-item select[data-i="trigger"] { max-width: none; }
  .pr-bulk { top: auto; bottom: calc(70px + var(--safe-b, 0px)); position: sticky; }
  .pr-tabs a:last-child:not(:first-child) { margin-left: 0; }
}

/* ---- deal-stages.css ---- */
/* [stages] Время на этапах: «на этапе с …» в карточке сделки, дни на карточке доски,
   история этапов в окне и вкладка «Время на этапах» в «Аналитике». Переменные — app.css. */

/* карточка сделки: «на этапе с 15.10 · 3 дн.» */
.stg-since { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-bright); background: var(--bg-card);
  color: var(--ink-dim); font-family: var(--body); font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 2px 10px;
  cursor: pointer; white-space: nowrap; }
.stg-since:hover { color: var(--accent); border-color: var(--accent); }

/* карточка доски: дней на этапе */
.stg-days { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; }
.stg-days.long { color: var(--amber-deep); font-weight: 700; }

/* окно «История этапов» */
.stg-hist { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.stg-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 72px; gap: 10px; align-items: center; padding: 8px 4px;
  border-bottom: 1px solid var(--line); font-size: 13.5px; }
.stg-row:last-child { border-bottom: none; }
.stg-row .dot { width: 10px; height: 10px; border-radius: 50%; }
.stg-row .nm { font-weight: 600; min-width: 0; }
.stg-row .nm small { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink-faint); }
.stg-row .when { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.stg-row b { font-family: var(--mono); text-align: right; white-space: nowrap; }
.stg-row.cur { background: var(--bg-raise); border-radius: 8px; }
.stg-note { font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; margin-top: 10px; }

/* вкладка «Время на этапах» */
.stg-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.stg-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint); min-width: 0; }
.stg-filters select, .stg-filters input { min-height: 38px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line-bright);
  background: var(--bg-card); color: var(--ink); font-family: var(--body); font-size: 14px; font-weight: 500; letter-spacing: 0;
  text-transform: none; outline: none; max-width: 240px; min-width: 0; }
.stg-filters input { width: 110px; }
.stg-filters select:focus, .stg-filters input:focus { border-color: var(--accent); }

.stg-table { display: flex; flex-direction: column; }
.stg-tr { display: grid; grid-template-columns: minmax(160px, 1.6fr) 90px minmax(140px, 1.2fr) 100px minmax(150px, 1.2fr); gap: 12px;
  align-items: center; padding: 9px 4px; border-top: 1px solid var(--line); font-size: 13.5px; }
.stg-tr.head { border-top: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.stg-tr .nm { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.stg-tr .nm i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.stg-tr .nm em { font-style: normal; }
.stg-tr .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; display: flex; flex-direction: column; gap: 4px; }
.stg-tr small { color: var(--ink-faint); font-weight: 500; }
.stg-tr .bar { display: block; height: 6px; border-radius: 4px; background: var(--surface-sunken); overflow: hidden; }
.stg-tr .bar i { display: block; height: 100%; border-radius: 4px; opacity: .85; }

.stg-stuck { display: flex; flex-direction: column; }
.stg-srow { display: grid; grid-template-columns: minmax(0, 1fr) auto 150px; gap: 12px; align-items: center; padding: 10px 4px;
  border-top: 1px solid var(--line); color: var(--ink); font-size: 13.5px; }
.stg-srow:first-child { border-top: none; }
.stg-srow:hover { background: var(--bg-raise); }
.stg-srow .t { min-width: 0; }
.stg-srow .t small { display: block; color: var(--ink-faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stg-srow .d { font-family: var(--mono); font-weight: 700; text-align: right; color: var(--amber-deep); display: flex; flex-direction: column; }
.stg-srow .d small { font-family: var(--body); font-weight: 500; color: var(--ink-faint); font-size: 11.5px; }

@media (max-width: 1100px), (pointer: coarse) {
  .stg-since { min-height: 34px; padding: 4px 12px; }
}
@media (max-width: 760px) {
  .stg-tr.head { display: none; }
  .stg-tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 10px 4px; }
  .stg-tr .nm { grid-column: 1 / -1; }
  .stg-tr > span[data-l]::before { content: attr(data-l); display: block; font-family: var(--body); font-size: 10.5px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
  .stg-srow { grid-template-columns: minmax(0, 1fr) auto; }
  .stg-srow .crm-st { grid-row: 2; justify-self: start; }
  .stg-srow .d { grid-row: 1 / span 2; grid-column: 2; }
  .stg-filters label { flex: 1 1 calc(50% - 5px); }
  .stg-filters select, .stg-filters input { max-width: none; width: 100%; }
}

/* ---- crm-people.css ---- */
/* [crm-people] Люди в сделках: роли в сделке, «Взять себе», люди в полях amoCRM, ссылка для входа,
   поля amoCRM в карточке сделки, «Интеграции → Telegram». */

.modal.cpp-modal { max-width: 560px; }
.modal.cpp-modal.cpp-wide { max-width: 680px; }
.cpp-sub { margin: -12px 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); }
.cpp-faint { color: var(--ink-faint); font-size: 13px; }
.cpp-empty { font-size: 13.5px; color: var(--ink-faint); padding: 10px 0; }
.cpp-ib { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-card); color: var(--ink-dim); cursor: pointer; padding: 0; }
.cpp-ib:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cpp-ib:disabled { opacity: .35; cursor: default; }
.cpp-del:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.cpp-warn { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 9px 11px; border-radius: 10px;
  background: rgba(224,138,0,.09); color: var(--amber-deep); font-size: 12.5px; line-height: 1.45; }
.cpp-lbl { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cpp-lbl > span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

/* роли в сделке */
.cpp-roles { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cpp-role { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cpp-role .crm-input { flex: 1 1 auto; min-width: 0; }
.cpp-role small { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.cpp-ord { display: inline-flex; gap: 4px; flex: none; }
.cpp-addrow { display: flex; gap: 8px; align-items: center; }
.cpp-addrow .crm-input { flex: 1 1 auto; min-width: 0; }
.cpp-addrow .btn-ghost { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* «Взять себе» */
.cpp-rule { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: var(--bg-raise); }
.cpp-rule-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 10px; }
.cpp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cpp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line-bright); border-radius: 999px;
  font: 500 13px var(--body); color: var(--ink); background: var(--bg-card); cursor: pointer; user-select: none; max-width: 100%; }
.cpp-chip.sm { padding: 4px 9px; font-size: 12.5px; }
.cpp-chip.on { border-color: var(--accent); background: rgba(10,77,166,.07); color: var(--accent); font-weight: 600; }
.cpp-chip input { margin: 0; }
#cpp-rule-add { display: inline-flex; align-items: center; gap: 6px; }

/* люди в полях amoCRM */
.cpp-ptools { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.cpp-ptools .crm-input { flex: 1 1 220px; min-width: 0; }
.cpp-ptools .btn-ghost { display: inline-flex; align-items: center; gap: 6px; }
.cpp-plist { display: flex; flex-direction: column; }
.cpp-pfield { border-bottom: 1px solid var(--line); padding: 10px 0; }
.cpp-pfield.on { background: linear-gradient(90deg, rgba(10,77,166,.04), transparent); }
.cpp-prow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 230px); gap: 10px; align-items: center; }
.cpp-pname { min-width: 0; }
.cpp-pname b { display: block; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.cpp-pname small { font-size: 11.5px; color: var(--ink-faint); }
.modal .cpp-prow select, .modal .cpp-enum select, .modal .cpp-rule select, .modal .cpp-emptysel select { padding: 8px 10px; font-size: 13px; border-radius: 8px; }
.cpp-enums { margin: 8px 0 0 12px; padding-left: 12px; border-left: 2px solid var(--line-bright); display: flex; flex-direction: column; gap: 6px; }
.cpp-enum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 210px); gap: 10px; align-items: center; }
.cpp-ev { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.cpp-ev small { display: block; font-size: 11px; color: var(--green); }
.cpp-emptysel { margin-top: 6px; }

/* ссылка для входа */
.cpp-link { display: flex; flex-direction: column; gap: 8px; }
.cpp-lstate { font-size: 13.5px; color: var(--ink-dim); }
.cpp-on { color: var(--green); font-weight: 700; }
.cpp-lurl { display: flex; gap: 8px; min-width: 0; }
.cpp-lurl input { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 12.5px; }
.cpp-lurl .btn-ghost, .cpp-lacts .btn-ghost { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cpp-lacts { display: flex; gap: 8px; flex-wrap: wrap; }

/* поля amoCRM в карточке сделки */
.cpp-url { color: var(--accent); overflow-wrap: anywhere; text-decoration: none; }
.cpp-url:hover { text-decoration: underline; }
.cpp-multi { display: flex; flex-wrap: wrap; gap: 5px; }
.cpp-cb { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.cpp-urlbox { display: flex; gap: 6px; align-items: center; min-width: 0; }
.cpp-urlbox input { flex: 1 1 auto; min-width: 0; }
.crm-kv dd select.crm-amo-x, .crm-kv dd textarea.crm-amo-x { width: 100%; box-sizing: border-box; }
.cpp-fill { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.cpp-claim { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.crm-free { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: var(--green); background: rgba(31,157,87,.1); border: 1px solid rgba(31,157,87,.28); }
.crm-claimbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(31,157,87,.3); background: rgba(31,157,87,.06); font-size: 13.5px; color: var(--ink-dim); }
.crm-claimbar span { flex: 1 1 220px; min-width: 0; }

/* «Интеграции → Telegram» */
.tg-lead { margin: 0 0 16px; max-width: 760px; font-size: 14px; line-height: 1.55; color: var(--ink-dim); }
.tg-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.tg-bot { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card); flex-wrap: wrap; }
.tg-ava { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: rgba(34,158,217,.12); color: #1C8AC4; flex: none; }
.tg-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tg-main b { font-size: 15px; overflow-wrap: anywhere; }
.tg-main small { font-size: 12.5px; color: var(--ink-faint); overflow-wrap: anywhere; }
.tg-err { color: var(--red) !important; }
.tg-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.tg-acts .btn-ghost { display: inline-flex; align-items: center; gap: 6px; }
.tg-how { max-width: 760px; }
.tg-chats { display: flex; flex-direction: column; gap: 8px; }
.tg-chat { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tg-chat b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.tg-chat small { font-size: 12px; color: var(--ink-faint); }
.tg-ids { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-dim); }
.tg-ids code { font-family: var(--mono); font-size: 12.5px; background: var(--bg-raise); padding: 2px 6px; border-radius: 6px; }
.pal-ic.g-messages { color: #1C8AC4; background: rgba(34,158,217,.12); }
.au-tgcheck { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.au-tgcheck .au-tgres { font-size: 12.5px; }
.au-tgcheck .au-tgres.ok { color: var(--green); }
.au-tgcheck .au-tgres.bad { color: var(--red); }

@media (max-width: 640px) {
  .page-head:has(> #cs-roles) > div:first-child { flex: 1 1 100%; }
  .page-head > #cs-roles, .page-head > #cs-claim { flex: 1 1 40%; min-height: 44px; }
  .cpp-rule-top { grid-template-columns: minmax(0, 1fr) auto; }
  .cpp-rule-top .cpp-lbl:nth-child(2) { grid-column: 1 / 2; grid-row: 2; }
  .cpp-prow, .cpp-enum { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cpp-enums { margin-left: 4px; padding-left: 8px; }
  .cpp-role small { display: none; }
  .tg-acts { width: 100%; }
}

/* ---- templates.css ---- */
/* [templates] «Настройки → Готовые шаблоны» (templates.js, классы gt-*) и предложение
   «С чего начнём?» над экраном нового пространства. Сначала телефон: одна колонка, нажимаемое —
   от 40 px; карточки шаблонов встают в две колонки там, где для них есть место. */

/* ============================================================
   «С чего начнём?» — над экраном, пока владелец не выбрал шаблон или не пропустил
   ============================================================ */
.gt-offer { max-width: 1240px; margin: 0 auto; padding: 12px 14px 0; box-sizing: border-box; }
.gt-offer + .page { padding-top: 16px; }
.gt-offer__card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 16px;
  border: 1px solid rgba(10,77,166,.22); border-radius: 14px;
  background: linear-gradient(135deg, rgba(10,77,166,.07), rgba(10,77,166,.02) 60%), var(--bg-card);
  box-shadow: 0 1px 3px rgba(16,24,40,.06);
}
.gt-offer__text { flex: 1 1 320px; min-width: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); }
.gt-offer__text b { display: block; font-family: var(--disp); font-size: 16px; color: var(--ink); margin-bottom: 2px; }
.gt-offer__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.gt-offer__pick {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--line-bright); border-radius: 10px; background: var(--bg-card);
  font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.gt-offer__pick:hover { border-color: var(--accent); color: var(--accent); }
.gt-offer__pick.is-rec { border-color: var(--accent); background: var(--accent); color: #fff; }
.gt-offer__pick.is-rec:hover { background: var(--navy); color: #fff; }
.gt-offer__skip {
  min-height: 40px; padding: 0 12px; border: none; background: none; border-radius: 10px;
  font: 600 13.5px var(--body); color: var(--ink-dim); cursor: pointer;
}
.gt-offer__skip:hover { background: rgba(16,24,40,.06); color: var(--ink); }

/* ============================================================
   Экран шаблонов
   ============================================================ */
.gt-intro { font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); margin: 0 0 16px; }
.gt-note { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-faint); line-height: 1.45; }
.gt-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .gt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gt-card {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card);
}
.gt-card.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.12); }
.gt-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.gt-card__head h4 { margin: 0; font-family: var(--disp); font-size: 16px; font-weight: 600; color: var(--ink); }
.gt-badge {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  color: var(--accent); background: rgba(10,77,166,.08); border: 1px solid rgba(10,77,166,.25); white-space: nowrap;
}
.gt-badge.ok { color: var(--green); background: rgba(31,157,87,.09); border-color: rgba(31,157,87,.35); }
.gt-card__about { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.gt-card__sum { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-faint); }
.gt-more { font-size: 13px; }
.gt-more > summary {
  display: inline-flex; align-items: center; min-height: 36px; cursor: pointer; color: var(--accent); font-weight: 600;
}
.gt-more__body { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 2px; }
.gt-more__cap { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.gt-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.gt-chip {
  display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: 12px; color: var(--ink-dim);
  background: var(--surface-sunken); border: 1px solid var(--line); max-width: 100%; overflow-wrap: anywhere;
}
.gt-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.gt-list li { margin-bottom: 3px; overflow-wrap: anywhere; }
.gt-list small { color: var(--ink-faint); font-size: 12px; }
.gt-card__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }
.gt-card__foot .btn-amber, .gt-card__foot .btn-ghost { min-height: 40px; }

/* выбранный шаблон: воронка, предпросмотр, «Применить» */
.gt-panel {
  margin-top: 16px; padding: 16px; border: 1px solid var(--line-bright); border-radius: 14px; background: var(--bg-raise, var(--bg-card));
  scroll-margin-top: 16px;
}
.gt-panel h4 { margin: 0 0 4px; font-family: var(--disp); font-size: 17px; font-weight: 600; color: var(--ink); }
.gt-panel__sub { margin: 0 0 14px; font-size: 13px; color: var(--ink-dim); line-height: 1.5; }
.gt-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-width: 520px; }
.gt-field > label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); }
.gt-field select {
  min-height: 42px; padding: 0 12px; border: 1px solid var(--line-bright); border-radius: 9px; background: var(--bg-card);
  font: 15px var(--body); color: var(--ink); width: 100%; box-sizing: border-box; min-width: 0;
}
.gt-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.12); }
.gt-sec { border-top: 1px solid var(--line); padding: 10px 0; }
.gt-sec:first-of-type { border-top: none; }
.gt-sec__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.gt-sec__head b { font-size: 13.5px; color: var(--ink); }
.gt-sec__head a { font-size: 12.5px; color: var(--accent); }
.gt-row { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; min-width: 0; }
.gt-st {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 82px; padding: 2px 8px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; box-sizing: border-box; margin-top: 1px;
}
.gt-st.add { color: var(--green); background: rgba(31,157,87,.10); border: 1px solid rgba(31,157,87,.35); }
.gt-st.have { color: var(--ink-faint); background: var(--surface-sunken); border: 1px solid var(--line); }
.gt-st.skip { color: var(--amber-deep); background: rgba(224,138,0,.10); border: 1px solid rgba(224,138,0,.35); }
.gt-row__text { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; white-space: pre-line; }
.gt-row.is-have .gt-row__text { color: var(--ink-dim); }
.gt-row__note { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-faint); }
.gt-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.gt-foot__sum { flex: 1 1 220px; min-width: 0; font-size: 13px; color: var(--ink-dim); line-height: 1.45; }
.gt-foot .btn-amber, .gt-foot .btn-ghost { min-height: 42px; }
.gt-foot .btn-amber:disabled { opacity: .55; cursor: default; transform: none; }

/* после применения: что добавили и где донастроить */
.gt-done h4 { display: flex; align-items: center; gap: 8px; }
.gt-done h4 svg { color: var(--green); flex: none; }
.gt-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.gt-links a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--line-bright); border-radius: 10px; background: var(--bg-card); color: var(--ink);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.gt-links a:hover { border-color: var(--accent); color: var(--accent); }

@media (min-width: 641px) {
  .gt-offer { padding: 16px 28px 0; }
  .gt-panel { padding: 18px 20px; }
}
@media (max-width: 640px) {
  .gt-offer__acts { width: 100%; }
  .gt-offer__pick { flex: 1 1 calc(50% - 4px); justify-content: center; white-space: normal; text-align: center; line-height: 1.25; }
  .gt-offer__skip { flex: 1 1 100%; }
  .gt-row { gap: 8px; }
  .gt-st { min-width: 72px; padding: 2px 6px; font-size: 11px; }
  .gt-foot .btn-amber, .gt-foot .btn-ghost { flex: 1 1 100%; }
}

/* ---- mobile.css ---- */
/* Кабинет на телефоне и планшете.
   Подключается последним и только переопределяет: десктоп (шире 1100 px) этот файл не трогает,
   кроме нескольких общих мелочей в самом начале.

   Пороги:  телефон  — до 640 px (нижняя панель разделов, окна-листы снизу, таблицы карточками);
            планшет  — 641–1100 px (верхнее меню, две колонки, крупные зоны нажатия).

   Экраны-модули рисуют разметку строками с инлайн-стилями, поэтому здесь много !important:
   иначе правило из файла не перебьёт style="…". Крючки — классы вида .fn-*, .wz-*, .m-*. */

:root {
  --tabbar-h: 58px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ---------- Общие элементы оболочки (скрыты на десктопе) ---------- */
.tabbar, .tb-back, .tb-title, .tb-acct { display: none; }

/* Шторка этапа: шапка с крестиком остаётся на виду при прокрутке */
.drawer-head {
  position: sticky; top: -30px; z-index: 3; margin: -30px -28px 0; padding: 24px 20px 10px 28px;
  display: flex; align-items: flex-start; gap: 12px; background: var(--bg-card);
}
.drawer-head .dh-title { flex: 1; min-width: 0; }
.drawer-head h3 { margin: 4px 0 0; }
.drawer .drawer-close {
  position: static; flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0;
}
.drawer .drawer-close:hover { background: var(--bg-raise); }
.drawer-head + .chip { display: inline-block; margin-top: 6px; }

/* Галочка внутри .field наследовала вид подписи поля (капс, разрядка) */
.field label.check { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px; }

/* Список этапов с галочками в окне «Новый этап» */
.dep-list { border: 1px solid var(--line-bright); border-radius: 10px; background: var(--bg); padding: 2px 12px; max-height: 216px; overflow-y: auto; }
.field .dep-list .dep-row {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 9px 0; cursor: pointer;
  font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.field .dep-list .dep-row + .dep-row { border-top: 1px solid var(--line); }
.field .dep-list .dep-row input { width: 18px; height: 18px; padding: 0; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.dep-row span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.dep-row b { font-weight: 600; }
.dep-row i { font-style: normal; font-size: 12px; color: var(--ink-faint); }
.dep-none { padding: 12px 0; font-size: 13px; color: var(--ink-faint); }

/* Лист «Ещё» / профиль */
.modal.sheet-menu { max-width: 380px; padding: 18px; }
.sm-user { display: flex; align-items: center; gap: 12px; padding: 6px 6px 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.sm-who { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.sm-who b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-who span { font-size: 12.5px; color: var(--ink-dim); overflow-wrap: anywhere; }
.sm-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 10px;
  border: none; background: none; border-radius: 10px; text-align: left;
  font: 600 15px var(--body); color: var(--ink); cursor: pointer;
}
.sm-item > span { flex: 1; }
.sm-item > .ic:first-child { color: var(--ink-dim); }
.sm-item > .ic:last-child { color: var(--ink-faint); }
.sm-item:hover, .sm-item.on { background: var(--bg-raise); }
.sm-item.on, .sm-item.on > .ic:first-child { color: var(--accent); }
.sm-item.danger, .sm-item.danger > .ic:first-child { color: var(--red); }
.modal.sheet-menu .actions { margin-top: 10px; }

/* ============================================================
   ПЛАНШЕТ И ТЕЛЕФОН (до 1100 px)
   ============================================================ */
@media (max-width: 1100px) {
  /* Верхняя панель не помещалась: страница получала прокрутку вбок на всех экранах.
     Поддомен и имя уходят в кнопку профиля (инициалы), меню занимает освободившееся место. */
  .topbar { gap: 12px; padding: 0 16px; }
  .topbar .ws, .topbar .user, .topbar #logout { display: none; }
  .topbar .nav { margin-left: 4px; min-width: 0; }
  .tb-acct {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-bright);
    background: var(--bg-card); color: var(--navy); font: 800 13px var(--body); letter-spacing: .02em;
  }
  .tb-acct:hover { border-color: var(--accent); }

  /* Мелкий текст инлайн-стилей модулей (10–11.5 px) на сенсорном экране не читается */
  [style*="font-size:9px"], [style*="font-size:9.5px"],
  [style*="font-size:10px"], [style*="font-size:10.5px"], [style*="font-size:11px"], [style*="font-size:11.5px"],
  [style*="font-size: 10px"], [style*="font-size: 10.5px"], [style*="font-size: 11px"], [style*="font-size: 11.5px"] {
    font-size: 12px !important;
  }
  .chip, .field label, .tool-group > .lbl, .branch-head .type, .branch-head .blocking, .stage-card .deps,
  .stage-card .sub-count, .stage-card .stage-dates, .drawer .sec, .muted-mono, .flag, .grade-chip, .og-type,
  .skill-tag, .act, .proj-card .deal, .sc-ava.sm { font-size: 12px; }
  .chip { letter-spacing: .04em; }
  .drawer .sec { letter-spacing: .1em; }

  /* Зоны нажатия: общие кнопки кабинета */
  .btn-ghost, .btn-amber, .btn-tr, .og-act, .act-del, .act-toggle, .act, .at-tab, .view-toggle a,
  .inline-add button, .t-btn { min-height: 44px; }
  .og-act.icon-only { min-width: 44px; padding: 0; }
  .drawer .drawer-close { width: 44px; height: 44px; }
  .inline-add button { min-width: 44px; }
  /* «Крошки»: ссылки в строку текста — увеличиваем зону нажатия, не сдвигая вёрстку */
  .crumb a { display: inline-block; padding: 13px 6px; margin: -13px -6px; }
  /* Поля ввода и списки на страницах */
  .page input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  .page select { min-height: 44px; }
  .btn-ghost, .btn-amber, .btn-tr, .og-act, .act, .act-del, .act-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .act, .act-del, .act-toggle, .og-act { padding-left: 12px; padding-right: 12px; }
  .act-del { min-width: 44px; font-size: 18px; line-height: 1; }
  .person .p-edit, .t-edit-mini { min-width: 44px; min-height: 44px; }
  .inline-add input, .stage-dates-edit input { min-height: 44px; }
  .modal .check input, .check input { width: 20px; height: 20px; }
  .modal .check, .skill-toggles .check.sm { min-height: 44px; }
}

/* На сенсорных экранах любого размера поля не должны вызывать авто-зум iOS */
@media (max-width: 640px), (pointer: coarse) and (max-width: 1100px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea { font-size: 16px !important; }
}

/* ============================================================
   ПЛАНШЕТ (641–1100 px)
   ============================================================ */
@media (min-width: 641px) and (max-width: 1100px) {
  .topbar .brand-mark { font-size: 0; gap: 0; flex: none; }   /* остаётся знак */
  .nav a { padding: 11px 12px; display: inline-flex; align-items: center; min-height: 44px; }
  .page { padding: 24px 20px 64px; }
  .drawer { width: min(480px, 70vw); }
}
@media (min-width: 641px) and (max-width: 760px) {
  .nav a { padding: 11px 9px; font-size: 13px; white-space: nowrap; flex: none; }
  /* на самых узких планшетах шесть разделов не помещаются — меню листается вбок, страница не шире экрана */
  .topbar .nav { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
  .topbar .nav::-webkit-scrollbar { display: none; }
  .topbar .spacer { display: none; }
}

/* ============================================================
   ТЕЛЕФОН (до 640 px)
   ============================================================ */
@media (max-width: 640px) {
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: rgba(10,77,166,.12); }

  /* --- Верхняя панель: знак + название раздела, на вложенных экранах — «Назад» --- */
  .topbar { height: calc(50px + var(--safe-t)); padding: var(--safe-t) 12px 0 14px; gap: 10px; }
  .topbar .nav, .topbar .tb-acct { display: none; }
  .topbar .brand-mark { font-size: 0; gap: 0; flex: none; }
  .topbar .tb-title { display: block; font: 700 16px var(--disp); color: var(--ink); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar.nested { padding-left: 4px; }
  .topbar.nested .brand-mark { display: none; }
  .topbar.nested .tb-title { color: var(--ink-faint); font-weight: 600; font-size: 14px; margin-left: auto; padding-right: 4px; }
  .topbar.nested .spacer { display: none; }
  .tb-back {
    display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 12px 0 6px; margin: 0;
    border: none; background: none; border-radius: 10px; color: var(--accent); font: 600 16px var(--body);
  }
  .tb-back:active { background: rgba(10,77,166,.08); }
  /* «Назад» теперь всегда в верхней панели — дубли на самих экранах и «крошки» убираем */
  .page [data-nav-back] { display: none !important; }
  .page-head .crumb { display: none; }

  /* --- Нижняя панель разделов --- */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: calc(var(--tabbar-h) + var(--safe-b)); padding: 0 4px var(--safe-b);
    background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(16,24,40,.06);
  }
  .tabbar > * {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; border: none; background: none; padding: 0 2px; color: var(--ink-faint);
    font: 600 12px var(--body); letter-spacing: -.01em; position: relative;
  }
  .tabbar > * > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar > .on { color: var(--accent); }
  .tabbar > .on::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; margin-left: -14px;
    border-radius: 0 0 3px 3px; background: var(--accent);
  }
  .tabbar > *:active { background: rgba(10,77,166,.06); }
  body.kb-open .tabbar { display: none; }           /* клавиатура открыта — панель не мешает */
  body[data-route="wizard"] .tabbar { display: none; }  /* мастер сметы ведёт своя нижняя панель */

  .page { padding: 14px 14px calc(var(--tabbar-h) + var(--safe-b) + 28px); }
  body.kb-open .page { padding-bottom: 24px; }
  .page-head { gap: 10px 12px; margin-bottom: 16px; align-items: center; }
  .page-head h2 { font-size: 22px; line-height: 1.25; }
  .toast { bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px); z-index: 130; }
  body.kb-open .toast, body[data-route="wizard"] .toast { bottom: 84px; }
  .offline-chip { top: calc(var(--safe-t) + 56px); font-size: 12px; }

  /* --- Зоны нажатия 44 px --- */
  .btn-ghost, .btn-amber, .btn-tr, .og-act, .act-del, .act-toggle, .act, .at-tab, .view-toggle a,
  .inline-add button, .t-btn, .btn-ghost.sm, .btn-ghost.xs, .btn-amber.sm { min-height: 44px; }
  .btn-ghost.sm, .btn-ghost.xs, .btn-amber.sm { font-size: 13.5px; padding-left: 14px; padding-right: 14px; margin-top: 0; }
  .act { font-size: 13px; }
  .act-del { min-width: 44px; }
  .person .p-edit, .t-edit-mini { min-width: 44px; min-height: 44px; }
  .inline-add button { min-width: 48px; font-size: 18px; }
  .field input, .modal select { padding: 12px 14px; min-height: 48px; }
  .view-toggle { width: 100%; }
  .view-toggle a { flex: 1; display: inline-flex; align-items: center; justify-content: center; }

  /* --- Окна: лист снизу, кнопки всегда на виду над клавиатурой --- */
  .modal-veil {
    inset: auto 0 auto 0; top: var(--vvt, 0px); height: var(--vvh, 100dvh);
    padding: 0; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  }
  .modal {
    width: 100%; max-width: none !important; max-height: calc(var(--vvh, 100dvh) - 20px - var(--safe-t)) !important;
    border-radius: 18px 18px 0 0; border-bottom: none; padding: 22px 16px 0;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    animation: sheet-up .26s cubic-bezier(.2,.9,.3,1) both; position: relative;
  }
  .modal::before {   /* «ручка» листа */
    content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px;
    border-radius: 4px; background: var(--line-bright);
  }
  .modal h3 { font-size: 18px; margin-bottom: 16px; padding-right: 4px; }
  .modal .row2 { grid-template-columns: 1fr !important; gap: 0 !important; }
  .modal .row2.keep2 { grid-template-columns: 1fr 1fr !important; gap: 0 10px !important; align-items: end; }
  .modal .row2:not(.keep2) > div:not(.field) + div:not(.field) { margin-top: 14px; }
  .modal .actions {
    position: sticky; bottom: 0; z-index: 2; margin: 16px -16px 0 !important; padding: 10px 16px calc(10px + var(--safe-b));
    background: var(--bg-card); border-top: 1px solid var(--line);
    display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px;
  }
  .modal .actions > * { flex: 1 1 40%; width: auto; min-height: 48px; margin: 0; }
  .modal .actions > .spacer { display: none; }
  .modal .actions > .btn-amber { order: 5; }        /* главное действие — справа, под большим пальцем */
  .modal.sheet-menu { padding: 22px 12px 0; }
  .modal.sheet-menu .actions { margin: 8px -12px 0 !important; padding-left: 12px; padding-right: 12px; }
  body.kb-open .modal .actions { padding-bottom: 10px; }
  .skill-matrix { max-height: none; }
  .skill-row { flex-wrap: wrap; gap: 4px 10px; padding: 6px 8px; }

  /* --- Шторка этапа: на весь экран, действие «что дальше» прибито к низу --- */
  .drawer-veil { backdrop-filter: none; }
  .drawer {
    width: 100vw; border-left: none; padding: 20px 16px 0; display: flex; flex-direction: column;
    overscroll-behavior: contain; animation: sheet-up .26s cubic-bezier(.2,.9,.3,1) both;
  }
  .drawer > * { flex: none; }
  body.kb-open .drawer { bottom: var(--kb, 0px); }
  .drawer-head { top: -20px; margin: -20px -16px 0; padding: calc(14px + var(--safe-t)) 8px 10px 16px; border-bottom: 1px solid var(--line); }
  .drawer .drawer-close { width: 44px; height: 44px; background: var(--bg-raise); color: var(--ink-dim); }
  .drawer-head + .chip { align-self: flex-start; margin-top: 14px; }
  .drawer .sec { margin: 22px 0 10px; }
  .drawer-next {
    order: 99; position: sticky; bottom: 0; z-index: 3; margin: 22px -16px 0;
    padding: 10px 16px calc(10px + var(--safe-b)); background: var(--bg-card);
    border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(16,24,40,.06);
  }
  .drawer-next .sec { display: none; }
  .drawer-next .transitions { gap: 8px; }
  .drawer-next .btn-tr { flex: 1 1 auto; min-height: 48px; font-size: 14px; }
  .drawer-next .btn-tr.primary { flex: 1 1 100%; order: -1; font-size: 15px; }
  .drawer-next .muted { font-size: 12.5px; }
  .drawer #reopen-stage { margin: 8px 0 0 !important; width: 100%; }
  .stage-dates-edit input { font-size: 16px; padding: 10px; }
  .substage { padding: 10px 12px; gap: 8px 10px; }
  .substage .nm { flex: 1 1 100%; font-size: 14.5px; }
  .substage .st-dot { margin-right: -2px; }
  .substage .act.danger, .act[data-del-sub] { min-width: 44px; padding: 0; font-size: 18px; }
  .substage .nm { order: 0; flex-basis: calc(100% - 24px); }
  .assigned-row, .roster-row { flex-wrap: wrap; padding: 8px 10px; }
  .assigned-row .ar-id, .roster-row .ar-id { flex: 1; min-width: 0; }
  .drawer .assigned-row > .ar-id { flex: 1 1 calc(100% - 46px); }
  .drawer .assigned-row > .act { flex: 1 1 auto; }
  .assigned-row > .muted-mono:empty { display: none; }
  .ap-scope { min-height: 44px; }
  .ap-scopes { flex-wrap: wrap; }
  .assign-list { max-height: none !important; }
  .dep-list { max-height: none; }
  .field .dep-list .dep-row { padding: 12px 0; font-size: 15px; }
  .field .dep-list .dep-row input { width: 22px; height: 22px; margin-top: 0; }
  .assigned-row > .spacer, .roster-row > .spacer { display: none; }
  .rg-head { flex-wrap: wrap; }
  .assign-pick { min-height: 52px; flex-wrap: wrap; row-gap: 0; }
  .assign-pick > .nm { flex: 1 1 60%; }
  .assign-pick > .muted-mono { flex: 1 1 100%; padding-left: 38px; margin-top: -6px; }
  #ac-regen { min-width: 48px; }
  .assign-pick .muted-mono { margin-top: 0; }
  #assign-stage, #add-participant { width: 100%; }
}
@keyframes sheet-up { from { transform: translateY(28px); opacity: 0; } }
@media (max-width: 350px) {
  .tabbar > * { font-size: 11px; }
}

/* Заголовок периода календаря: capitalize делал «12–18 Октября 2026, Вторник» */
.cal-period { text-transform: none !important; }
.cal-period::first-letter { text-transform: uppercase; }

/* Поле поиска: родной вид iOS (скругление, тень) ломал общий стиль полей */
input[type=search] { -webkit-appearance: none; appearance: none; }

/* ============================================================
   ТАБЛИЦЫ → КАРТОЧКИ (телефон)
   table.m-stack: строка становится карточкой, ячейки — строками «подпись — значение».
   Классы ячеек: .m-title (заголовок карточки), .m-half (две в ряд), .m-wide (на всю ширину
   без подписи), .m-end (значение справа), .m-acts (кнопки), .m-hide (не показывать);
   подпись берётся из data-l. Строка-заголовок группы — tr.m-group.
   ============================================================ */
@media (max-width: 640px) {
  .page table.m-stack, table.m-stack { display: block; min-width: 0 !important; width: 100% !important; overflow: visible; }
  table.m-stack > thead { display: none; }
  table.m-stack > tbody { display: block; }
  table.m-stack > tbody > tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 13px 14px;
    border-top: 1px solid var(--line);
  }
  table.m-stack > tbody > tr:first-child { border-top: none; }
  table.m-stack > tbody > tr > td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1 1 100%;
    min-width: 0; width: auto !important; padding: 0 !important; text-align: left !important;
    white-space: normal !important; border: none !important;
  }
  table.m-stack td[data-l]::before {
    content: attr(data-l); flex: none; font: 500 12.5px var(--body); color: var(--ink-faint);
    letter-spacing: 0; text-transform: none;
  }
  table.m-stack td.m-title { display: block; font-size: 15px; }
  table.m-stack td.m-half { flex: 1 1 40%; justify-content: flex-start; }
  table.m-stack td.m-half.m-end, table.m-stack td.m-end { justify-content: flex-end; }
  table.m-stack td.m-wide { display: block; }
  table.m-stack td.m-hide, table.m-stack tr.m-hide { display: none !important; }
  table.m-stack td.m-acts { justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
  table.m-stack tr.m-group { padding: 10px 14px; background: var(--surface-sunken); }
  table.m-stack tr.m-group > td { display: block; }
  table.m-stack tr.m-total { background: var(--surface-sunken); }
  /* обёртки таблиц с собственной прокруткой больше не нужны */
  .m-stack-wrap { overflow: visible !important; }
}

/* ============================================================
   ПРОЕКТЫ: воронка и список
   ============================================================ */
@media (max-width: 1100px) {
  #fn-search { height: 44px !important; }
}
@media (max-width: 640px) {
  /* название раздела уже стоит в верхней панели */
  body[data-route="funnel"] .page-head h2, body[data-route="projects"] .page-head h2,
  body[data-route="staff"] .page-head h2, body[data-route="hr"] .page-head h2,
  body[data-route="settings"] .page-head h2, body[data-route="automation"] .page-head h2 { display: none; }
  /* в шапке страницы не осталось ничего, кроме скрытого заголовка, — убираем и её отступ */
  body:is([data-route="hr"], [data-route="settings"], [data-route="automation"], [data-route="staff"], [data-route="funnel"], [data-route="projects"])
    .page-head:not(:has(> :not(:first-child):not(.spacer))) { display: none; }

  .pv-toggle { display: flex !important; flex: 1 1 100%; }
  .pv-seg { flex: 1; min-height: 44px; font-size: 14px !important; }
  .page-head > .btn-amber { flex: 1 1 100%; min-height: 48px; font-size: 15px; }
  .page-head > .btn-ghost { flex: 1 1 auto; }
  .page-head > .spacer { display: none; }

  /* Воронка: вместо пяти колонок с прокруткой вбок — столбик разделов по статусам */
  .fn-wrap { display: block !important; height: auto !important; min-height: 0 !important; }
  .fn-bar { gap: 10px !important; margin-bottom: 12px !important; }
  .fn-stats { order: 2; gap: 6px 14px !important; font-size: 13px !important; width: 100%; }
  .fn-search { margin: 0 !important; width: 100%; order: 1; }
  #fn-search { width: 100% !important; max-width: none !important; height: 46px !important; }
  .fn-board { display: block !important; overflow: visible !important; padding: 0 !important; background: none !important;
    border: none !important; }
  .fn-col {
    width: auto !important; min-width: 0 !important; height: auto !important; display: block !important;
    border-right: none !important; margin-bottom: 10px;
  }
  .fn-col:last-child { margin-bottom: 0; }
  .fn-col .fn-strip { display: none; }
  .fn-col-head { padding: 6px 12px 6px 4px !important; border-bottom: none !important; }
  .fn-col-head > div + div { padding: 0 0 6px 44px !important; margin-top: -6px !important; }
  .fn-collapse { width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0 !important; }
  .fn-col-head span[style*="font-size:13px"] { font-size: 15px !important; }
  .fn-col-body { overflow: visible !important; padding: 2px 12px 14px !important; gap: 10px !important; }
  .fn-col-min .fn-expand {
    flex-direction: row !important; align-items: center !important; gap: 10px !important;
    padding: 0 14px 0 14px !important; min-height: 50px;
  }
  .fn-col-min .fn-expand span { writing-mode: horizontal-tb !important; transform: none !important; }
  .fn-col-min .fn-expand span:nth-child(2) { font-size: 15px !important; }
  .fn-col-min .fn-expand span:last-child { margin-left: auto; font-size: 13px !important; }
  .fn-card { padding: 13px 14px !important; border-radius: 11px !important; }
  .fn-card > div:first-child { font-size: 15px !important; }
  .fn-card span[style*="font-size:12.5px"] { font-size: 14px !important; }
  .fn-more { min-height: 46px; font-size: 14px !important; }

  /* Список проектов карточками */
  .pl-row { cursor: pointer; }
  body[data-route="projects"] .page-head > .chip { display: none; }
  .pl-row .m-title > div:first-child { font-size: 15.5px !important; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  /* Планшет: доска листается вбок, колонка «прилипает» к краю */
  .fn-board { scroll-snap-type: x mandatory !important; }
  .fn-col:not(.fn-col-min) { min-width: 280px !important; }
  .fn-col-min { width: 52px !important; }
  /* Редактор сметы: суммы и количества не переносятся на вторую строку */
  .est-table td { padding-left: 10px !important; padding-right: 10px !important; }
  .est-table td.e-price, .est-table td.e-sum, .est-table .qty-cell { white-space: nowrap; }
  .fn-card { padding: 12px 13px !important; }
  .fn-card > div:first-child { font-size: 14px !important; }
  .fn-collapse { align-items: center; justify-content: center; margin: -10px -4px -10px -12px; }
}

/* ============================================================
   ПРОЕКТ: панель разделов, ветки, этапы
   ============================================================ */
@media (max-width: 1100px) {
  .t-btn { padding: 9px 12px; font-size: 13.5px; }
  .add-stage { min-width: 52px; height: 52px; }
  .stage .node { width: 22px; height: 22px; }
}
@media (max-width: 640px) {
  .deal-head { align-items: flex-start !important; }
  .deal-head h2 { font-size: 20px; }
  .deal-meta { width: 100%; justify-content: space-between; }
  .deal-prog { flex: 1; justify-content: flex-end; }
  .deal-prog .bar { width: auto; flex: 1; max-width: 180px; }
  .deal-prog .pctn { font-size: 13px; }

  /* Одиннадцать ссылок занимали целый экран — плитки по четыре в ряд */
  .deal-toolbar { gap: 8px; margin-bottom: 18px; }
  .tool-group {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; width: 100%;
    padding: 8px 6px 6px; border-radius: 14px;
  }
  .tool-group > .lbl { grid-column: 1 / -1; margin: 0 0 2px 6px; }
  .t-btn {
    flex-direction: column; gap: 5px; padding: 8px 2px; min-height: 58px; font-size: 12px; line-height: 1.2;
    white-space: normal; text-align: center; justify-content: flex-start; border-radius: 10px;
  }
  .t-btn .ic { width: 22px; height: 22px; color: var(--accent); opacity: 1; }
  .t-btn:active { background: var(--bg-card); }

  /* Шапка ветки: название и удаление — первой строкой, статусы — второй, прогресс — третьей */
  .branch { border-radius: 14px; }
  .branch-head { gap: 8px 10px; padding: 12px 8px 12px 14px; }
  .branch-head .lane-dot { order: -3; }
  .branch-head h4 { order: -3; flex: 1 1 calc(100% - 80px); min-width: 0; font-size: 16px; line-height: 1.3; }
  .branch-head:not(:has(.act-del)) h4 { flex-basis: calc(100% - 30px); }
  .branch-head .act-del { order: -2; border-color: transparent; color: var(--ink-faint); }
  .branch-head .type { margin-left: 21px; }
  .branch-head .spacer { flex: 1 1 100%; height: 0; order: 5; }
  .branch-head .progress { order: 9; flex: 1; width: auto; margin-left: 21px; }
  .branch-head .pctn { order: 10; width: auto; padding-right: 8px; font-size: 13px; }
  .branch-head:not(:has(.act-del)) { padding-right: 14px; }

  /* Этапы — вертикальной лентой: не нужно листать вбок, видно всю ветку сразу */
  .stages { flex-direction: column; overflow: visible; padding: 14px 12px 12px 14px; }
  .stage { min-width: 0; padding: 0 0 12px 34px; }
  .stage::before { top: 22px; bottom: -8px; left: 10px; right: auto; width: 2px; height: auto; }
  .stage:last-of-type::before { display: none; }
  .stage .node { position: absolute; left: 0; top: 14px; margin: 0; }
  .stage .node::after { content: ""; position: absolute; inset: -12px; }   /* зона нажатия */
  .stage-card {
    margin: 0; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px;
    align-items: start; background: var(--bg-raise);
  }
  .stage-card:hover { transform: none; }
  .stage-card .nm { margin: 0; font-size: 15px; line-height: 1.3; }
  .stage-card .chip { grid-column: 2; grid-row: 1; white-space: nowrap; }
  .stage-card .sub-count, .stage-card .stage-dates, .stage-card .deps { margin-top: 2px; }
  .stage-card .deps { grid-column: 1 / -1; }
  .add-stage { width: 100%; min-width: 0; height: 46px; margin: 0; font-size: 20px; }
  .add-stage::after { content: " этап"; font-size: 14px; font-weight: 600; vertical-align: 2px; }
  .add-branch { padding: 16px; min-height: 52px; }
  .danger-zone { margin-top: 36px; }
  .danger-zone button { width: 100%; }
}

/* ============================================================
   ОБЩИЕ КРЮЧКИ ЭКРАНОВ-МОДУЛЕЙ
   .scr-head — шапка экрана (заголовок + действия); .m-float-main — главное действие,
   на телефоне прибитое над нижней панелью; .pm-ovl/.pm-sheet — окна модулей (задачи,
   замеры), на телефоне — лист снизу; .card-acts — ряд действий карточки.
   ============================================================ */
.m-only, .doc-note-m { display: none; }

@media (max-width: 1100px) {
  .t-filter, .m-status, .m-del, .t-status, .t-del, .gen-preset, .bm-skill, .doc-fmt, .wz-rtab, .cal-mode,
  .docref-noop, .pm-acc-mass .mq, .pv-seg, .bm-free { min-height: 44px; }
  .t-filter, .m-status, .m-del, .t-status, .t-del, .gen-preset, .bm-skill, .doc-fmt, .docref-noop { padding-left: 14px !important; padding-right: 14px !important; }
  .cal-navbtn { width: 44px !important; height: 44px !important; }
  #cal-today { min-height: 44px; }
  .row-del, #room-add, .wz-room-edit, .wz-room-del, .pay-toggle, .pay-del, .pl-edit, .pl-cat-add, .pl-cat-edit, .pl-cat-del,
  .hrd-del-val, .hrd-del-dict, .fn-collapse { width: 44px !important; height: 44px !important; }
  .page .qty-cell { min-height: 44px !important; min-width: 64px !important; }
  .page .est-topbar button { min-height: 44px !important; }
  .g-toggle > * { min-height: 44px; }
  .wi-row { min-height: 44px; }
  /* В сетке месяца название события — не кнопка: нажатие по ячейке открывает день целиком */
  .cal-cell:not(.cal-cell-m) > .cal-ev { pointer-events: none; }
  .cal-more { min-height: 28px; }
  .cal-cell > div > .cal-ev { min-height: 44px; }   /* события в колонках недели */
  #bm-target { height: 44px !important; }
  body .pm-acc-new #pm-acc-add { min-width: 44px; justify-content: center; }
  .wi-row input, .tf-mck { width: 20px !important; height: 20px !important; }
}

@media (max-width: 640px) {
  .m-only { display: inline; }
  .m-hide-phone { display: none !important; }
  .empty { padding: 34px 18px; border-radius: 14px; }

  /* Поля: высота под палец (шрифт 16 px задан выше — без авто-зума iOS) */
  .page input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  .page select, .modal input:not([type=checkbox]):not([type=radio]):not([type=file]), .modal select,
  .pm-sheet input:not([type=checkbox]):not([type=radio]), .pm-sheet select { min-height: 46px; }
  .modal textarea, .pm-sheet textarea, .page textarea { min-height: 78px; }

  /* --- Шапка экрана --- */
  .scr-head { flex-wrap: wrap !important; gap: 10px 12px !important; }
  .scr-title { flex: 1 1 100%; }
  .scr-head h2 { font-size: 22px !important; line-height: 1.25 !important; white-space: normal !important; max-width: none !important; }
  .scr-name { max-width: none !important; white-space: normal !important; }
  .scr-head > .btn-amber { flex: 1 1 100%; min-height: 48px; font-size: 15px; justify-content: center; }
  .scr-head > .btn-ghost { flex: 1 1 auto; justify-content: center; }
  .scr-head > span[style*="flex:1"], .scr-head > .spacer, .scr-head > .chip { display: none; }
  .scr-title .crumb { display: none; }

  /* --- Главное действие экрана — всегда под большим пальцем --- */
  .m-float-main {
    position: fixed !important; left: 14px; right: 14px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 10px);
    z-index: 55; width: auto !important; min-height: 52px; justify-content: center; flex: none !important;
    font-size: 15.5px !important; border-radius: 14px !important; box-shadow: 0 10px 28px rgba(10,77,166,.36) !important;
  }
  body.kb-open .m-float-main { bottom: calc(var(--kb, 0px) + 10px); }
  .page:has(.m-float-main) { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 96px); }

  /* --- Плитки итогов --- */
  .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .kpi-grid > *, .est-kpi > * { padding: 12px !important; gap: 8px !important; min-width: 0 !important; }
  .kpi-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi-grid [style*="font-size:26px"], .est-kpi [style*="font-size:26px"] { font-size: 19px !important; letter-spacing: -.02em !important; }
  .kpi-grid span[style*="white-space:nowrap"], .est-kpi span[style*="white-space:nowrap"] { white-space: normal !important; }

  /* --- Ряд действий карточки --- */
  .card-acts { gap: 8px !important; }
  .card-acts > button { min-height: 44px; flex: 1 1 auto; justify-content: center; font-size: 13px !important; padding: 0 14px !important; }
  .card-acts > .spacer { display: none; }
  .card-acts > .ca-label { flex: 1 1 100%; }
  .chip-scroll { flex-wrap: nowrap !important; overflow-x: auto; margin: 0 -14px; padding: 0 14px 2px; scrollbar-width: none; }
  .chip-scroll::-webkit-scrollbar { display: none; }
  .t-filter { min-height: 44px; flex: none; font-size: 13.5px !important; padding: 0 15px !important; }

  /* --- Окна модулей: лист снизу --- */
  .pm-ovl { align-items: flex-end !important; padding: 0 !important; top: var(--vvt, 0px) !important; bottom: auto !important; height: var(--vvh, 100dvh); }
  .pm-sheet {
    max-width: none !important; max-height: calc(var(--vvh, 100dvh) - 20px - var(--safe-t)) !important;
    border-radius: 18px 18px 0 0 !important; border-bottom: none !important; padding: 22px 16px 0 !important;
    overscroll-behavior: contain; animation: sheet-up .26s cubic-bezier(.2,.9,.3,1) both;
  }
  .pm-sheet-acts {
    position: sticky; bottom: 0; z-index: 2; margin: 18px -16px 0 !important;
    padding: 10px 16px calc(10px + var(--safe-b)); background: var(--bg-card); border-top: 1px solid var(--line);
  }
  body.kb-open .pm-sheet-acts { padding-bottom: 10px; }
  .pm-sheet-acts > button { flex: 1; min-height: 48px; justify-content: center; }
  .pm-row2 { flex-wrap: wrap; }
  .pm-row2 > div { flex: 1 1 140px !important; min-width: 0; }
  .tf-pick { min-height: 50px; }
  #tf-mlist { max-height: none !important; }

  /* --- Ещё о таблицах-карточках --- */
  table.m-stack td.m-auto { flex: 0 0 auto; }
  table.m-stack td.m-push { margin-left: auto; }
  table.m-stack td.m-order2 { order: 2; }
  table.m-stack td.m-order3, table.m-stack td.m-acts { order: 3; }
  table.m-stack td.m-big, table.m-stack td.m-big > * { font-size: 15.5px !important; }
  table.m-stack td:empty { display: none; }
  table.m-stack td.m-acts button { min-height: 44px; min-width: 44px; }

  /* ============ Сотрудники ============ */
  .staff-filter { gap: 8px !important; }
  .sf-search { flex: 1 1 100% !important; max-width: none !important; min-width: 0 !important; }
  #staff-search, #staff-fstatus, #staff-fgrade, #staff-fposition { height: 46px !important; }
  #staff-fstatus, #staff-fgrade { flex: 1 1 40%; min-width: 0; }
  #staff-fposition { flex: 1 1 100%; min-width: 0; max-width: none !important; font-size: 16px !important; }
  .staff-filter > .chip { display: none; }
  .staff-filter > .btn-ghost { flex: 1 1 100%; }
  .staff-table .m-title .sc-ava.sm { width: 40px; height: 40px; border-radius: 11px; font-size: 13px; }
  .staff-table .m-title > div > div > div:first-child { font-size: 15.5px !important; }
  .staff-table .m-acts { justify-content: flex-start; }
  .staff-table .m-acts .btn-ghost { flex: 1 1 auto; }
  body[data-route="staff"] .page-head > .btn-ghost { flex: 1 1 30%; }

  .org-tree { gap: 12px; }
  .og-head { flex-wrap: wrap; gap: 8px; padding: 12px 10px 10px 14px; }
  .og-name { flex: 1 1 calc(100% - 44px); font-size: 16px; line-height: 1.3; }
  .og-head > .spacer { flex: 1 1 100%; height: 0; }
  .og-act { flex: 1 1 auto; }
  .og-act.icon-only, .og-head .act-del { flex: 0 0 44px; padding: 0; }
  .og-children { padding: 4px 6px 10px 8px; margin-left: 10px; }
  .og-members { padding: 4px 6px; }
  .person { flex-wrap: wrap; gap: 2px 10px; padding: 6px; }
  .person .p-name { flex: 1 1 0; min-width: 0; font-size: 14.5px; }
  .person > .spacer { order: 2; flex: 1 1 100%; height: 0; }
  .person .grade-chip { order: 3; margin-left: 38px; }
  .person .muted-mono { order: 3; margin: 0; align-self: center; }
  .person .dot { margin-left: auto; }

  /* ============ Задачи / замеры ============ */
  .t-card { padding: 14px !important; }
  .t-open { min-width: 0 !important; flex: 1 1 100% !important; }

  /* ============ Календарь ============ */
  .cal-root { gap: 14px !important; }
  .cal-title { display: none !important; }
  .cal-head { gap: 10px !important; margin-bottom: 0 !important; }
  .cal-head > .spacer { display: none; }
  .cal-nav { width: 100%; }
  .cal-period { flex: 1; min-width: 0 !important; font-size: 15px !important; }
  .cal-modes { display: flex !important; width: 100%; }
  .cal-mode { flex: 1; justify-content: center; min-height: 44px; padding: 0 4px !important; font-size: 13.5px !important; }
  .cal-mode svg { display: none; }
  .cal-body > div:has(.cal-cell-m) { padding: 6px !important; }
  .cal-agenda { padding: 2px 14px 10px !important; }
  .cal-ag-group { flex-direction: column; gap: 8px !important; padding: 12px 0 !important; }
  .cal-ag-group:first-child { border-top: none !important; }
  .cal-ag-date { width: auto !important; text-align: left !important; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .cal-ag-date > div { margin-top: 0 !important; font-size: 13px !important; }
  .cal-ag-date > div:first-child { font-size: 20px !important; }
  .cal-ev { min-height: 44px; }
  .cal-ev b { font-size: 14.5px !important; }
  .cal-legend { gap: 8px 14px !important; }

  /* ============ Акты / оплаты ============ */
  .scr-sub { margin: -8px 0 14px !important; }
  .panel-card { padding: 14px !important; margin-bottom: 14px !important; border-radius: 14px !important; }
  .panel-head { flex-wrap: wrap; }
  .panel-head > .act-new { flex: 1 1 100%; margin-top: 8px; min-height: 46px; justify-content: center; font-size: 14px; }
  .panel-head > span[style*="flex:1"] { display: none; }
  .acts-table > tbody > tr { padding-left: 0 !important; padding-right: 0 !important; }
  .acts-table td { border-top: none !important; }
  .pay-toggle, .pay-del { height: 44px !important; min-width: 44px; width: auto !important; border-radius: 10px !important; }
  .pay-toggle { flex: 1; gap: 6px; padding: 0 14px !important; font: 600 13.5px var(--body); }
  .pay-del { flex: none; font-size: 20px !important; margin-left: 0 !important; }
  .pay-toggle[data-paid="0"] { color: var(--ink-dim) !important; }
  .gen-preset { min-height: 44px; font-size: 13px !important; padding: 0 16px !important; }

  /* ============ Гант ============ */
  .g-title { flex-wrap: wrap; }
  .g-toggle { display: flex !important; align-self: stretch !important; }
  .g-toggle > * { flex: 1; justify-content: center; min-height: 44px; }
  .g-summary { grid-template-columns: 1fr !important; }

  /* ============ Подбор бригады ============ */
  .bm-target-badge { display: none; }
  #bm-target { height: 48px !important; }
  .bm-free { height: 44px !important; }
  .bm-free input { width: 20px !important; height: 20px !important; }
  .bm-skill { min-height: 44px; padding: 0 14px !important; font-size: 13px !important; }
  .bm-card { gap: 12px !important; padding: 14px !important; align-items: flex-start !important; }
  .bm-info { min-width: 0 !important; flex: 1 1 calc(100% - 62px) !important; }
  .bm-load { flex: 1 1 0 !important; width: auto !important; }
  .bm-match { width: auto !important; flex: 0 0 auto !important; text-align: right !important; }
  .bm-assign { flex: 1 1 100% !important; min-height: 48px; justify-content: center; }

  /* ============ Документы ============ */
  .doc-root { gap: 14px !important; padding-bottom: 72px; }
  .doc-grid { gap: 14px !important; }
  .doc-side { gap: 12px !important; }
  .doc-side > div:not(.doc-actions):not(.doc-note-m) { padding: 14px !important; }
  .doc-tpls { gap: 8px !important; }
  .doc-tpl { padding: 10px !important; align-items: center !important; gap: 10px !important; min-height: 60px; }
  .doc-tpl > span:first-child { width: 34px !important; height: 34px !important; }
  .doc-tpl-desc, .doc-tpl-rec { display: none !important; }
  .doc-tpl-top b { font-size: 13.5px !important; line-height: 1.25; }
  .doc-fmts { margin-top: 12px !important; padding-top: 12px !important; }
  .doc-fmt { min-height: 44px; padding: 0 18px !important; font-size: 13px !important; }
  .doc-actions {
    position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--safe-b)); z-index: 55;
    flex-direction: row !important; align-items: center; gap: 8px !important; padding: 8px 12px !important;
    border-radius: 0 !important; border-width: 1px 0 0 !important; box-shadow: 0 -6px 18px rgba(16,24,40,.08) !important;
  }
  body.kb-open .doc-actions { display: none !important; }
  .doc-actions-2 { display: contents !important; }
  #doc-download { flex: 1.5 1 0; width: auto !important; min-height: 48px; }
  #doc-send { flex: 1 1 0 !important; min-height: 48px; padding: 0 8px !important; }
  #doc-print { flex: 0 0 48px !important; min-height: 48px; padding: 0 !important; }
  .doc-print-t, .doc-send-t, .doc-actions .doc-note { display: none; }
  .doc-note-m { display: block; }
  .kp-paper { padding: 22px 16px !important; }
  .kp-paper h1 { font-size: 20px !important; }

  /* ============ Настройки сметы ============ */
  .set-card-head { flex-wrap: wrap; padding: 13px 14px !important; }
  .set-card-head > span[style*="flex:1"] { display: none; }
  .set-card-head .btn-ghost { flex: 1 1 100%; justify-content: center; }
  .set-margin { flex-wrap: wrap; }
  .set-toggle { min-height: 44px; align-items: center !important; }

  /* ============ Редактор сметы ============ */
  .est-topbar { gap: 8px !important; }
  .est-titlebox { flex: 1 1 100%; flex-wrap: wrap; }
  .est-title { white-space: normal !important; max-width: none !important; font-size: 20px !important; line-height: 1.25; }
  .est-topbar > span[style*="flex:1"] { display: none; }
  .page .est-topbar button { min-height: 44px !important; flex: 1 1 40%; justify-content: center; padding-left: 10px !important; padding-right: 10px !important; }
  .page .est-topbar #est-del { flex: 0 0 auto; }
  .est-split { border-radius: 14px !important; overflow: visible !important; }
  .est-rail { padding: 10px 12px !important; border-radius: 14px 14px 0 0; }
  #room-add { width: 44px !important; height: 44px !important; border-radius: 10px !important; }
  .est-main { padding: 14px 12px !important; overflow: visible !important; }
  .est-roomhead { gap: 6px 12px !important; margin-bottom: 8px !important; }
  .est-geom { flex-wrap: wrap; gap: 4px 14px !important; flex: 1 1 100%; font-size: 12.5px !important; }
  .est-roomhead > span[style*="flex:1"] { display: none; }
  .pm-switch { min-height: 44px; }
  .page table.est-table, table.est-table > tbody { display: block; width: 100%; overflow: visible; }
  table.est-table > thead { display: none; }
  table.est-table tr {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) 44px; align-items: center; gap: 6px 10px;
    grid-template-areas: "name name name del" "dep dep dep dep" "qty price sum sum"; padding: 12px 0 12px 2px;
  }
  table.est-table > tbody > tr:first-child { border-top: none !important; }
  table.est-table td { display: block; padding: 0 !important; width: auto !important; text-align: left !important; }
  table.est-table td:empty { display: none; }
  table.est-table td[colspan] { grid-column: 1 / -1; padding: 22px 0 !important; text-align: center !important; }
  table.est-table td.e-name { grid-area: name; font-size: 15px; line-height: 1.3; }
  table.est-table td.e-dep { grid-area: dep; margin-top: -4px; }
  table.est-table td.e-qty { grid-area: qty; }
  table.est-table td.e-price { grid-area: price; white-space: nowrap; }
  table.est-table td.e-price::before { content: "× "; color: var(--ink-faint); }
  table.est-table td.e-sum { grid-area: sum; text-align: right !important; font-size: 15.5px !important; white-space: nowrap; padding-right: 12px !important; }
  table.est-table td.e-del { grid-area: del; }
  .row-del { width: 44px !important; height: 44px !important; border: none !important; background: none !important; font-size: 22px !important; }
  .page .qty-cell {
    min-height: 44px !important; min-width: 88px !important; padding: 0 12px !important; font-size: 14px !important;
    border: 1px solid var(--line-bright) !important; border-radius: 9px !important; background: var(--bg-card) !important;
  }
  .qty-edit { width: 112px !important; min-height: 42px; text-align: left !important; border-radius: 9px !important; padding: 0 12px !important; }
  table.est-table tr.e-total { grid-template-areas: "name name sum sum"; margin: 0 -12px; padding: 14px 12px !important; border-radius: 0 0 14px 14px; }
  .est-addwrap { margin: 0 !important; height: 0; }
  .wi-list { max-height: none !important; margin: 0 !important; }
  .wi-row { min-height: 48px; padding: 6px 2px !important; font-size: 14.5px !important; }

  /* ============ Мастер сметы ============ */
  .wz-root { padding-bottom: 84px; }
  .wz-root:has(#wz-open) { padding-bottom: 148px; }
  .wz-head h2 { font-size: 20px !important; }
  .wz-head .scr-name { max-width: 82vw !important; }
  .wz-stepswrap { padding: 12px 0 14px !important; margin-bottom: 16px !important; }
  .wz-steps { flex-wrap: nowrap !important; }
  .wz-step:not(.cur) .wz-step-l { display: none; }
  .wz-step-l { font-size: 14.5px !important; }
  .wz-step > span:first-child { width: 30px !important; height: 30px !important; }
  .wz-step-sep { flex: 1 1 8px !important; width: auto !important; min-width: 6px; margin: 0 8px !important; }
  .wz-body h2 { font-size: 20px !important; }
  .wz-grid2 { gap: 14px 12px !important; }
  .wz-grid2 > label:has(select) { grid-column: 1 / -1; }
  .wz-foot {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; margin: 0 !important; flex-wrap: wrap; gap: 8px !important;
    padding: 10px 14px calc(10px + var(--safe-b)) !important; background: rgba(255,255,255,.97);
    border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(16,24,40,.07);
  }
  body.kb-open .wz-foot { bottom: var(--kb, 0px); padding-bottom: 10px !important; }
  .wz-foot > span[style*="flex:1"] { display: none; }
  .wz-foot > button { min-height: 50px; justify-content: center; font-size: 15px; }
  .wz-foot > .btn-ghost { flex: 0 1 auto; }
  .wz-foot > .btn-amber { flex: 2 1 0; }
  .wz-foot > #wz-open { order: -1; flex: 1 1 100%; }
  .wz-foot > #wz-kp { flex: 1 1 0; }
  .wz-room { flex-wrap: wrap; gap: 8px 12px !important; padding: 12px !important; }
  .wz-room-main { flex: 1 1 calc(100% - 60px) !important; }
  .wz-room-main > div:first-child { white-space: normal !important; }
  .wz-room-area { flex: 1 1 0 !important; text-align: left !important; display: flex; flex-wrap: wrap; gap: 2px 12px; padding-left: 52px; }
  .wz-room-edit, .wz-room-del { width: 44px !important; height: 44px !important; border-radius: 10px !important; }
  #wz-room-add { min-height: 52px; }
  .wz-rtabs { flex-wrap: nowrap !important; overflow-x: auto; margin: 0 -14px 14px !important; padding: 0 14px 2px; scrollbar-width: none; }
  .wz-rtabs::-webkit-scrollbar { display: none; }
  .wz-rtab { min-height: 44px; flex: none; font-size: 14px !important; padding: 0 16px !important; }
  .wz-geo-grid { gap: 14px !important; }
  .wz-geo-grid > div:first-child { padding: 14px !important; }
  .wz-works-wrap { overflow: visible !important; }
  .page table.wz-works, table.wz-works > tbody { display: block; min-width: 0 !important; width: 100% !important; overflow: visible; }
  table.wz-works > thead { display: none; }
  table.wz-works tr.wz-wgroup, table.wz-works tr.wz-wgroup > td { display: block; }
  table.wz-works tr.wz-wrow {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px;
    grid-template-areas: "chk name name sum" "chk dep qty price"; padding: 11px 12px; min-height: 60px;
  }
  table.wz-works tr.wz-wrow > td { display: block; padding: 0 !important; width: auto !important; text-align: left !important; }
  tr.wz-wrow > td:nth-child(1) { grid-area: chk; }
  tr.wz-wrow > td:nth-child(1) > span { width: 24px !important; height: 24px !important; border-radius: 7px !important; }
  tr.wz-wrow > td:nth-child(2) { grid-area: name; font-size: 14.5px; line-height: 1.3; }
  tr.wz-wrow > td:nth-child(3) { grid-area: dep; }
  tr.wz-wrow > td:nth-child(4) { grid-area: qty; white-space: nowrap; }
  tr.wz-wrow > td:nth-child(5) { grid-area: price; white-space: nowrap; }
  tr.wz-wrow > td:nth-child(5)::before { content: "× "; color: var(--ink-faint); }
  tr.wz-wrow > td:nth-child(6) { grid-area: sum; text-align: right !important; font-size: 14.5px !important; white-space: nowrap; }
  .wz-works-total { flex-wrap: wrap; }
  .wz-exist { min-height: 60px; }

  /* ============ Прайс-лист ============ */
  .pl-search { flex: 1 1 100%; order: 3; }
  #pl-search { width: 100% !important; height: 46px !important; }
  body[data-route="pricelist"] .page-head > .btn-ghost { order: 4; flex: 0 0 auto; }
  body[data-route="pricelist"] .page-head > .btn-amber { order: 5; flex: 1 1 0; white-space: nowrap; }

  /* ============ Справочники ============ */
  .hrd-nav { min-height: 64px; }
  .hrd-cat-toggle { min-height: 54px; }
  .hrd-cat-toggle > span[style*="margin-left:auto"] { display: none; }
  .hrd-cat-toggle > span[style*="font-size:13.5px"] { font-size: 15px !important; flex: 1; }
  .hrd-val { min-height: 44px; padding: 6px 6px 6px 14px !important; }
  .hrd-val span[style*="font-size:13px"] { font-size: 14.5px !important; white-space: normal !important; }
  .hrd-del-val, .hrd-del-dict, .pl-cat-edit, .pl-cat-del { width: 44px !important; height: 44px !important; font-size: 20px !important; }
  .hrd-add, .hrd-more, .hrd-add-dict { min-height: 48px; font-size: 14px !important; }
  .docref-noop { min-height: 44px; font-size: 13.5px !important; padding: 0 14px !important; }

  /* ============ Вход ============ */
  .login-wrap { min-height: 100dvh; padding: max(7vh, 24px) 16px 24px; place-items: start center; }
  .login-card { padding: 28px 20px 24px; }
  .login-card h1 { font-size: 24px; }
  .login-sub { margin-bottom: 22px; }
  .btn-primary { min-height: 52px; font-size: 16px; }
}

/* Документы на планшете в портрете: настройки двумя колонками, лист — на всю ширину */
@media (min-width: 641px) and (max-width: 900px) {
  .doc-grid { grid-template-columns: 1fr !important; }
  .doc-tpls { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .doc-tpl { flex-direction: column; gap: 8px !important; }
  .doc-tpl-desc, .doc-tpl-rec { display: none !important; }
  .doc-tpl-top { align-items: flex-start !important; }
  .doc-actions { flex-direction: row !important; flex-wrap: wrap; align-items: center; }
  #doc-download { width: auto !important; flex: 1 1 200px; }
  .doc-actions-2 { flex: 2 1 320px; }
  .doc-actions .doc-note { flex: 1 1 100%; }
  .kp-paper { max-width: 680px !important; }

  /* Сотрудники: таблица из семи колонок не помещается — карточки в две колонки */
  .m-stack-wrap:has(> .staff-table) { overflow: visible !important; }
  table.staff-table { display: block; min-width: 0 !important; }
  table.staff-table > thead { display: none; }
  table.staff-table > tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table.staff-table > tbody > tr {
    display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 8px 10px; padding: 14px;
    border-top: 1px solid var(--line) !important; border-right: 1px solid var(--line);
  }
  table.staff-table > tbody > tr:nth-child(2n) { border-right: none; }
  table.staff-table > tbody > tr > td {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1 1 100%; min-width: 0;
    padding: 0 !important; text-align: left !important; white-space: normal !important; width: auto !important;
  }
  table.staff-table td[data-l]::before { content: attr(data-l); font: 500 12.5px var(--body); color: var(--ink-faint); flex: none; }
  table.staff-table td.m-title { display: block; }
  table.staff-table td.m-auto { flex: 0 0 auto; }
  table.staff-table td.m-push { margin-left: auto; }
  table.staff-table td.m-wide { display: block; }
  table.staff-table td.m-order2 { order: 2; }
  table.staff-table td.m-acts { order: 3; justify-content: flex-start; margin-top: auto; }
  table.staff-table td.m-hide { display: none !important; }
  .staff-table .m-acts .btn-ghost { flex: 1 1 auto; }
  .staff-table .m-title .sc-ava.sm { width: 38px; height: 38px; border-radius: 10px; font-size: 13px; }
}

/* ============================================================
   СИСТЕМНЫЕ НАСТРОЙКИ (стили модуля вставляются в <head> позже этого файла,
   поэтому селекторы усилены префиксом body)
   ============================================================ */
@media (max-width: 1100px) {
  body .pm-sys-input, body .pm-sys-select { height: 44px; }
  body .pm-set-rail a, body .pm-acc-role { min-height: 44px; }
  body .pm-seg .sg { min-height: 44px; padding: 0 14px; font-size: 13px; }
  body .pm-acc-mass .mq { padding: 0 12px; font-size: 12.5px; }
  body .pm-sw { width: 52px; height: 32px; }
  body .pm-sw .kn { width: 26px; height: 26px; }
  body .pm-sw.on .kn { left: 22px; }
  body .pm-sw::after { content: ""; position: absolute; inset: -7px -4px; }
  body .pm-sys-cp { min-height: 44px; padding: 0 12px; font-size: 13px; }
  body .pm-acc-trash { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  body .pm-acc-role .sys, body .pm-acc-syslbl, body .pm-sub-badge-cur, body .pm-acc-legend, body .pm-acc-mass,
  body .pm-acc-rl .rl-desc, body .pm-sys-field > label, body .pm-sys-subhead, body .pm-sub-plan .pl,
  body .pm-sys-hook .hk-lbl, body .pm-acc-role .cnt { font-size: 12px; }
  body .pm-acc-new .pm-sys-input { height: 44px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  body .pm-acc-row { flex-wrap: wrap; gap: 8px 14px; }
  body .pm-acc-rl { flex: 1 1 230px; }
  body .pm-acc-rc { margin-left: auto; }
  .pay-table td.m-big, .pay-table td.m-title { white-space: nowrap; }
  body .pm-set { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body .pm-set-rail { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
}
@media (max-width: 640px) {
  body .pm-set { gap: 12px; grid-template-columns: minmax(0, 1fr); }
  body .pm-set > * { min-width: 0; }
  body .pm-sys-hook .hk-url { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; order: 2; }
  body .pm-sys-hook .pm-sys-cp { order: 3; min-height: 44px; }
  body .pm-set-rail {
    position: sticky; top: calc(50px + var(--safe-t)); z-index: 20; margin: -14px -14px 0; padding: 8px 14px;
    background: var(--bg); scrollbar-width: none; border-bottom: 1px solid var(--line);
  }
  body .pm-set-rail::-webkit-scrollbar { display: none; }
  body .pm-set-rail a { min-height: 44px; padding: 0 14px; font-size: 14px; flex: none; }
  body .pm-sys-wrap { gap: 16px; }
  body .pm-sys-sec, body .pm-acc { overflow: clip; }
  body .pm-sys-sec > .pm-sys-head { padding: 13px 14px; }
  body .pm-sys-sec > .pm-sys-body { padding: 14px; }
  body .pm-sys-input, body .pm-sys-select { height: 48px; }
  body .pm-sys-save { margin-top: 14px; }
  body .pm-sys-save > button, body .pm-sys-actions > button { width: 100%; min-height: 48px; justify-content: center; }
  body .pm-sys-hook { flex-wrap: wrap; gap: 6px 10px; }
  body .pm-sys-hook .hk-lbl { width: auto; flex: 1 1 100%; }
  body .pm-sys-kv { grid-template-columns: 1fr; gap: 2px 0; }
  body .pm-sys-kv .k { margin-top: 8px; white-space: normal; }
  body .pm-acc-pane { padding: 14px 12px; }
  body .pm-acc-rolehd > span[style*="flex:1"] { display: none; }
  body .pm-acc-rolehd #pm-acc-rolename { max-width: none !important; flex: 1 1 0; min-width: 0; }
  body .pm-acc-legend { flex-wrap: wrap; gap: 6px 12px; flex: 1 1 100%; }
  body .pm-acc-grp-head { gap: 8px 10px; }
  body .pm-acc-mass { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; }
  body .pm-acc-mass .mq { min-height: 44px; flex: 1 1 auto; }
  body .pm-acc-row { flex-wrap: wrap; gap: 8px 12px; padding: 12px; }
  body .pm-acc-rl { flex: 1 1 170px; }
  body .pm-acc-rl .rl-lbl { font-size: 14.5px; }
  body .pm-acc-rc { margin-left: auto; }
  body .pm-seg .sg { min-height: 44px; }
  body .pm-acc-savebar {
    position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px); z-index: 5; flex-wrap: wrap; gap: 8px;
    margin: 14px -4px 0; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--line-bright);
    border-radius: 12px; box-shadow: 0 8px 24px rgba(16,24,40,.14);
  }
  body .pm-acc-savebar > button { flex: 1 1 100%; min-height: 48px; justify-content: center; }
  /* пока менять нечего, панель не висит поверх списка прав */
  body .pm-acc-savebar:has(> button:disabled) { position: static; border: none; box-shadow: none; padding: 14px 0 0; margin: 14px 0 0; border-top: 1px solid var(--line); border-radius: 0; }
  body .pm-acc-new #pm-acc-add { min-width: 48px; justify-content: center; }
  body .pm-sub-cur .plan-meta { margin-left: 0; text-align: left; flex: 1 1 100%; }
  body .pm-sub-plans { grid-template-columns: 1fr 1fr; }
  body .pm-sub-plan > button { min-height: 44px; }
}