:root{
  --sidebar:#16233c; --sidebar-hover:#22375c; --sidebar-text:#b9c6d8; --sidebar-muted:#7e93b3;
  --accent:#1a5c3a; --accent-soft:#eaf5ef; --accent-bright:#7fd8ac;
  --bg:#f2f4f7; --surface:#ffffff; --surface-2:#f5f7fa;
  --text:#16233c; --text-2:#55606d; --text-3:#8a96a3;
  --line:#e6ebf1; --line-2:#d7dee6;
  --danger:#a32d2d; --danger-bg:#fcebeb; --warn:#854f0b; --warn-bg:#faeeda;
  --info:#0c447c; --info-bg:#e6f1fb; --ok:#0f6e56; --ok-bg:#e1f5ee;
  --radius:9px; --shadow:0 1px 3px rgba(16,35,60,.06);
}
[data-theme="dark"]{
  --bg:#0d1522; --surface:#141f30; --surface-2:#1a2740;
  --text:#e8eef6; --text-2:#9fb0c6; --text-3:#6e8099;
  --line:#22314a; --line-2:#2c405f;
  --accent:#4bbd85; --accent-soft:#152c22;
  --danger:#f09595; --danger-bg:#2e1618; --warn:#efbf6a; --warn-bg:#2e2314;
  --info:#85b7eb; --info-bg:#14243a; --ok:#7fd8ac; --ok-bg:#132a22;
  --shadow:0 1px 3px rgba(0,0,0,.3);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',-apple-system,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased}
.app{display:flex;min-height:100vh}

/* sidebar */
.sb{width:206px;flex:none;background:var(--sidebar);padding:14px 10px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;transition:width .18s ease}
.sb.mini{width:62px}
/* Логотип стоит по центру, а кнопка сворачивания выведена из потока, иначе
   она смещала бы его вбок. */
.sb-top{position:relative;display:flex;align-items:center;justify-content:center;
  padding:10px 8px 14px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.07)}
.sb-top img{height:48px;width:auto;flex:none;opacity:.95}
.sb-toggle{position:absolute;right:2px;top:50%;transform:translateY(-50%);
  color:var(--sidebar-muted);cursor:pointer;display:flex;font-size:18px;flex:none}
.sb.mini .nav-label,.sb.mini .sb-user-info,.sb.mini .sub{display:none}
/* В узком меню логотип меньше, а кнопка уходит под него: рядом они не влезают. */
.sb.mini .sb-top{flex-direction:column;gap:8px;padding:4px 0 16px}
.sb.mini .sb-top img{height:34px}
.sb.mini .sb-toggle{position:static;transform:none}
/* Поиск по всей базе. Живёт над меню, поэтому доступен с любого экрана. */
.sb-search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);
  border-radius:8px;padding:0 10px;margin-bottom:8px}
.sb-search i{color:var(--sidebar-muted);font-size:16px;flex:none}
.sb-search input{background:none;border:none;color:#eaf1f8;font-size:13px;padding:9px 0;width:100%}
.sb-search input::placeholder{color:var(--sidebar-muted)}
.sb-search input:focus{border:none;outline:none}
.sb.mini .sb-search{padding:0;justify-content:center}
.sb.mini .sb-search input{display:none}

.nav{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;color:var(--sidebar-text);font-size:13.5px;cursor:pointer;white-space:nowrap;border:none;background:none;width:100%;text-align:left;font-family:inherit}
a.nav,a.sub{text-decoration:none}
a.nav:hover,a.sub:hover{text-decoration:none}
.sub{display:block}
.nav:hover{background:rgba(255,255,255,.05);color:#fff}
.nav.on{background:var(--sidebar-hover);color:#fff}
.nav i{font-size:18px;flex:none}
.nav.on i{color:var(--accent-bright)}
.nav-badge{margin-left:auto;background:#e2604f;color:#fff;font-size:11px;border-radius:9px;padding:1px 6px;font-weight:500}
.sb.mini .nav{justify-content:center;padding:9px 0}
.sb.mini .nav-badge{display:none}
.sub{padding:3px 0 3px 39px;color:var(--sidebar-text);font-size:12.5px;line-height:2;cursor:pointer;border-radius:6px}
.sub:hover{color:#fff}
.sub.on{color:var(--accent-bright)}
.sb-user{margin-top:auto;border-top:1px solid var(--line-2);padding-top:11px;display:flex;align-items:center;gap:10px}
.sb-ava{width:28px;height:28px;border-radius:50%;background:var(--sidebar-hover);color:var(--accent-bright);font-size:11px;display:flex;align-items:center;justify-content:center;flex:none}
.sb-user-info{line-height:1.3;overflow:hidden}
.sb-user-info b{font-size:12.5px;color:#eaf1f8;font-weight:400;display:block}
.sb-user-info span{font-size:11px;color:var(--sidebar-muted)}

/* main */
.main{flex:1;min-width:0;padding:20px 24px 40px}
.page-head{display:flex;align-items:center;gap:11px;margin-bottom:16px;flex-wrap:wrap}
h1{font-size:21px;font-weight:500}
.spacer{margin-left:auto}

/* controls */
.btn{border:1px solid var(--line-2);background:var(--surface);color:var(--text);border-radius:var(--radius);padding:7px 13px;font-size:12.5px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{border-color:var(--text-3)}
.btn.primary{background:var(--sidebar);color:#fff;border-color:var(--sidebar)}
.btn.go{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn.danger:hover{opacity:.9}
.btn.icon{padding:7px 10px}
.btn:disabled{opacity:.45;cursor:default}
.chip{border:1px solid var(--line-2);color:var(--text-2);border-radius:20px;padding:5px 13px;font-size:12px;cursor:pointer;background:var(--surface);font-family:inherit;white-space:nowrap}
.chip.on{background:var(--sidebar);color:#fff;border-color:var(--sidebar)}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
input,select,textarea{font-family:inherit;font-size:13px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);border-radius:var(--radius);padding:8px 11px;outline:none;width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
/* Правило выше растягивает поля во всю ширину, и галочка превращалась
   в широкий прямоугольник. Флажкам и переключателям это не нужно. */
input[type=checkbox],input[type=radio]{width:auto;min-width:0;padding:0;border:0;
  background:none;accent-color:var(--accent);vertical-align:middle}
.search{max-width:260px}

/* cards, metrics */
.card{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:15px 17px;box-shadow:var(--shadow)}
.metrics{display:grid;gap:11px;margin-bottom:15px}
.m{background:var(--surface-2);border-radius:var(--radius);padding:12px 14px}
.m b{display:block;font-size:11.5px;color:var(--text-2);font-weight:400}
.m span{font-size:21px;color:var(--text);display:block;margin-top:2px}
.m small{font-size:10.5px;color:var(--text-3)}
.m.good{background:var(--accent-soft)}
.m.good b,.m.good span,.m.good small{color:var(--accent)}

/* table */
.tbl{background:var(--surface);border:1px solid var(--line);border-radius:11px;overflow:hidden;box-shadow:var(--shadow)}
.tr{display:flex;gap:10px;padding:11px 14px;border-top:1px solid var(--line);font-size:12.5px;align-items:center}
.tr:first-child{border-top:none}
.th{background:var(--surface-2);font-size:10.5px;color:var(--text-2);padding:9px 14px;border:none}
/* Строки списков это настоящие ссылки: работает Cmd+клик в новой вкладке
   и копирование адреса. Внешне должны выглядеть как обычные строки. */
.tr.row{cursor:pointer}
a.tr{color:inherit;text-decoration:none}
a.tr:hover{text-decoration:none}
.tr.row:hover{background:var(--surface-2)}
.tr.alert{background:var(--danger-bg)}
/* Длинные ссылки Stripe вылезали за карточку в соседнюю колонку. */
.sub2{font-size:10.5px;color:var(--text-3);margin-top:2px;overflow-wrap:anywhere;word-break:break-word}
.link{color:var(--text);text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* badges */
.b{font-size:10.5px;border-radius:6px;padding:2px 8px;display:inline-block;white-space:nowrap}
.b.ok{background:var(--ok-bg);color:var(--ok)}
.b.info{background:var(--info-bg);color:var(--info)}
.b.warn{background:var(--warn-bg);color:var(--warn)}
.b.dang{background:var(--danger-bg);color:var(--danger)}
.b.mute{background:var(--surface-2);color:var(--text-2)}

/* detail sections */
.sec{border:1px solid var(--line);border-radius:11px;background:var(--surface);margin-bottom:13px;box-shadow:var(--shadow)}
.sec-h{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;user-select:none}
/* Заголовок несворачиваемого раздела не кликается, значит и рука не нужна. */
.sec.fixed > .sec-h{cursor:default}
.sec-h i.lead{font-size:18px;color:var(--accent)}
.sec-t{font-size:11.5px;color:var(--accent);letter-spacing:.9px}
/* Подпись рядом с названием раздела: в свёрнутом виде по ней понятно,
   что внутри, и открывать не нужно. */
.sec-sub{font-size:11.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.sec-h .chev{margin-left:auto;color:var(--text-3);font-size:17px}
.sec-b{padding:0 16px 15px}
.sec.closed .sec-b{display:none}
/* Заглядывание в свёрнутый раздел. Открытому оно не нужно: там всё то же
   самое, только целиком. */
.sec-peek{display:none;padding:0 16px 13px;cursor:pointer}
.sec.closed .sec-peek{display:block}
.peek-note{font-size:11.5px;color:var(--text-3);padding-top:7px}
.peek-bad{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--radius);
  background:var(--warn-bg);color:var(--warn);margin-bottom:2px}
.peek-facts{display:flex;gap:20px;flex-wrap:wrap}
.peek-facts b{display:block;font-size:11px;color:var(--text-2);font-weight:400}
.peek-facts span{font-size:12.5px}
.peek-chips{display:flex;gap:6px;flex-wrap:wrap}
.peek-chip{border:1px solid var(--line-2);border-radius:20px;padding:3px 10px;font-size:11.5px}
/* Подсветка на секунду после прыжка по кнопке сверху: глаз находит блок сразу. */
.sec.flash{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft,rgba(29,158,117,.16))}

/* Колонки карточки тянутся на одну высоту, а последний блок в каждой
   растягивается до низа. Поэтому пустоты под короткой колонкой не остаётся
   при любом наполнении сделки. */
.detail > div{display:flex;flex-direction:column}
.detail > div > .sec:last-child{flex:1;display:flex;flex-direction:column;min-height:0}
.detail > div > .sec:last-child > .sec-b{flex:1;display:flex;flex-direction:column;min-height:0}
.detail > div > .sec.closed:last-child{flex:0}

/* Лента событий прокручивается внутри блока. Высота блока задана сеткой,
   поэтому подгрузка истории ничего не двигает на странице. */
div[id^="act-"]{flex:1;min-height:120px;max-height:430px;overflow:auto}
.notes-panel{margin-top:14px}
/* Автоотправка. Нижняя часть на месте всегда, меняется только яркость,
   поэтому блок не скачет при клике по галочке. */
.fu-auto{border-top:1px solid var(--line);margin-top:11px;padding-top:10px}
.fu-auto-top{display:flex;gap:9px;align-items:center;font-size:12.5px;cursor:pointer}
.fu-auto-top input{width:15px;height:15px;margin:0;flex:0 0 auto}
.fu-auto-body{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px;
  opacity:.45;transition:opacity .12s}
.fu-auto-note{margin-top:6px;opacity:.45;transition:opacity .12s}
.fu-auto.on .fu-auto-body,.fu-auto.on .fu-auto-note{opacity:1}

/* Автозаполнение Chrome красит поле своим фоном, и тёмный поиск в меню
   становился белым пятном. Заливку перебиваем внутренней тенью: обычным
   background её не перекрыть, браузер рисует свою поверх. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--surface) inset;
  box-shadow:0 0 0 1000px var(--surface) inset;
  transition:background-color 9999s ease-in-out 0s}
.sb-search input:-webkit-autofill,
.sb-search input:-webkit-autofill:hover,
.sb-search input:-webkit-autofill:focus{
  -webkit-text-fill-color:#eaf1f8;
  -webkit-box-shadow:0 0 0 1000px #1e2d49 inset;
  box-shadow:0 0 0 1000px #1e2d49 inset}
/* Крестик очистки у type=search в тёмном меню рисуется чёрным по тёмному. */
.sb-search input::-webkit-search-cancel-button{-webkit-appearance:none;
  height:13px;width:13px;cursor:pointer;
  background:var(--sidebar-muted);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat}

/* Экран входа. Живёт поверх всего и появляется раньше приложения: до ответа
   сервера показывать разделы нечестно, данных в них всё равно нет.

   Цвета фирменные и их всего два: тёмно-синий и белый. Зелёный акцент,
   который используется внутри CRM для денег, сюда намеренно не заходит:
   на входе нечего подсвечивать, а лишний цвет удешевляет вид. */
#gate{position:fixed;inset:0;z-index:400;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--surface)}

/* Левая половина: синее полотно с логотипом. Мягкие круги дают глубину,
   но остаются в тех же двух цветах, это просто белый под малой прозрачностью. */
.gate-brand{position:relative;overflow:hidden;background:#16233c;
  display:flex;align-items:center;justify-content:center;padding:40px}
.gate-brand::before,.gate-brand::after{content:'';position:absolute;border-radius:50%;
  background:rgba(255,255,255,.045);pointer-events:none}
.gate-brand::before{width:560px;height:560px;left:-190px;bottom:-230px}
.gate-brand::after{width:320px;height:320px;right:-90px;top:-110px;
  background:rgba(255,255,255,.03)}
.gate-brand-in{position:relative;text-align:center;max-width:340px}
.gate-mark{width:118px;height:auto;margin-bottom:22px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.gate-name{font-size:26px;color:#fff;letter-spacing:.2px}
.gate-tag{font-size:13.5px;color:rgba(255,255,255,.62);margin-top:9px;line-height:1.6}
.gate-ids{font-size:11.5px;color:rgba(255,255,255,.38);margin-top:26px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}

/* Правая половина: белая, с формой по центру. */
.gate-form{display:flex;align-items:center;justify-content:center;padding:40px 24px;
  background:var(--surface)}
.gate-card{width:min(340px,100%)}
.gate-title{font-size:23px;color:#16233c}
.gate-sub{font-size:12.5px;color:var(--text-3);margin:6px 0 26px;line-height:1.55}
.gate-l{display:block;font-size:11px;color:var(--text-2);margin-bottom:5px}
#gate input{width:100%;padding:11px 13px;font-size:13.5px;
  border:1px solid var(--line-2);border-radius:9px;background:var(--surface)}
/* Внутри CRM фокус зелёный, здесь синий: на входе фирменных цветов два. */
#gate input:focus{border-color:#16233c;outline:none;
  box-shadow:0 0 0 3px rgba(22,35,60,.09)}
.gate-btn{width:100%;margin-top:20px;padding:12px;font-family:inherit;font-size:13.5px;
  color:#fff;background:#16233c;border:1px solid #16233c;border-radius:9px;cursor:pointer}
.gate-btn:hover{background:#22375c;border-color:#22375c}
.gate-btn:active{transform:translateY(1px)}
.gate-btn:disabled{opacity:.55;cursor:default}
.gate-err{margin-top:14px;font-size:12px;color:var(--danger);
  background:var(--danger-bg);border-radius:8px;padding:9px 11px;line-height:1.5}
.gate-note{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);
  font-size:11px;color:var(--text-3);line-height:1.55}

/* На телефоне синее полотно ужимается в шапку, иначе форма уезжает за экран. */
@media(max-width:820px){
  #gate{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .gate-brand{padding:30px 24px}
  .gate-mark{width:66px;margin-bottom:14px}
  .gate-name{font-size:20px}
  .gate-tag{font-size:12.5px;margin-top:6px}
  .gate-ids{display:none}
  .gate-form{padding:30px 24px}
}
/* В тёмной теме белая половина была бы вспышкой в глаза. */
[data-theme="dark"] #gate{background:var(--bg)}
[data-theme="dark"] .gate-form{background:var(--bg)}
[data-theme="dark"] .gate-title{color:var(--text)}
[data-theme="dark"] .gate-btn{background:#22375c;border-color:#2c405f}
[data-theme="dark"] #gate input:focus{border-color:#7e93b3;
  box-shadow:0 0 0 3px rgba(126,147,179,.16)}

/* Редактор шаблонов: слева список текстов, справа сам текст.
   Пункты списка это настоящие кнопки, а не строки: раньше они выглядели
   как обычный текст, и было непонятно, что по ним вообще кликают. */
.tpl-wrap{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px;margin-top:8px}
.tpl-list{border-right:1px solid var(--line);padding-right:12px}
.tpl-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  font-family:inherit;font-size:12.5px;color:var(--text);
  padding:8px 10px;margin-bottom:5px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--surface);cursor:pointer;user-select:none}
.tpl-item i{font-size:15px;color:var(--text-3);flex:none}
.tpl-item:hover{border-color:var(--text-3);background:var(--surface-2)}
.tpl-item:active{transform:translateY(1px)}
.tpl-item.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.tpl-item.on i{color:var(--accent)}
@media(max-width:900px){.tpl-wrap{grid-template-columns:1fr}
  .tpl-list{border-right:none;border-bottom:1px solid var(--line);padding:0 0 8px}}

.note-input{width:100%;min-height:56px;resize:vertical;font:inherit;font-size:13px;line-height:1.6;
  padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text)}
.note-input:focus{outline:none;border-color:var(--accent)}
.note-row{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)}
.note-ava{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:11px;background:var(--surface-2);color:var(--accent)}
.note-body{font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.note-row .btn.danger{opacity:0;transition:opacity .12s}
.note-row:hover .btn.danger{opacity:1}
.kv{display:flex;justify-content:space-between;font-size:13px;padding:5px 0}
.kv span:last-child{color:var(--text)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.detail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px}

/* timeline / steps */
.steps{display:flex;align-items:center;background:var(--surface-2);border-radius:10px;padding:13px 15px;margin-bottom:15px}
.step{flex:1;text-align:center}
.dot{width:22px;height:22px;border-radius:50%;background:var(--line-2);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:13px}
.dot.done{background:var(--accent)}
.dot.now{background:#185fa5}
.step b{display:block;font-size:11px;font-weight:400;margin-top:4px}
.step small{font-size:10.5px;color:var(--text-3)}
.bar{flex:1;height:2px;background:var(--line)}
.bar.done{background:var(--accent)}

.row{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:none}
.grow{flex:1;min-width:0}
.note{background:var(--surface-2);border-radius:var(--radius);padding:10px 12px;font-size:12.5px;color:var(--text-2);line-height:1.6}
.empty{padding:40px;text-align:center;color:var(--text-3);font-size:13px}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:11.5px}
@media(max-width:900px){.detail{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)!important}}
/* ============ телефон ============
   Ниже 820px это телефон. Ничего не прячем из данных: меняется только то,
   как они разложены. Второго интерфейса нет намеренно, иначе каждую правку
   пришлось бы делать дважды, и версии со временем разъехались бы. */

/* Верхняя полоса. На широком экране её нет вообще. */
.topbar{display:none}
.sb-backdrop{display:none}

@media(max-width:820px){
  /* Полоса прижата к верху и уходит под вырез экрана. */
  .topbar{display:flex;align-items:center;gap:6px;position:fixed;top:0;left:0;right:0;
    z-index:180;background:var(--sidebar);color:#fff;
    height:calc(52px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 6px 0}
  .tb-btn{width:42px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;
    background:none;border:none;color:#fff;font-size:22px;cursor:pointer;border-radius:9px}
  .tb-btn:active{background:rgba(255,255,255,.10)}
  .tb-title{flex:1;min-width:0;text-align:center;font-size:15px;color:#fff;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .app{display:block}

  /* Меню становится шторкой. Скрываем сдвигом, а не display:none, чтобы
     появление было плавным и не дёргало разметку. */
  .sb{position:fixed;top:0;bottom:0;left:0;width:272px;height:100dvh;z-index:220;
    transform:translateX(-100%);transition:transform .22s ease;
    padding-top:calc(14px + env(safe-area-inset-top))}
  .sb.open{transform:none}
  .sb.mini{width:272px}
  .sb.mini .nav-label,.sb.mini .sb-user-info,.sb.mini .sub{display:block}
  .sb.mini .sb-top{flex-direction:row}
  .sb.mini .sb-top img{height:48px}
  .sb.mini .sb-search input{display:block}
  /* Свернуть меню на телефоне нечего: оно и так спрятано. */
  .sb-toggle{display:none}
  .sb-backdrop{display:block;position:fixed;inset:0;z-index:210;
    background:rgba(10,20,35,.45);opacity:0;pointer-events:none;transition:opacity .22s ease}
  .sb-backdrop.on{opacity:1;pointer-events:auto}

  .main{padding:calc(64px + env(safe-area-inset-top)) 13px calc(28px + env(safe-area-inset-bottom))}

  h1{font-size:19px}
  .page-head{gap:8px;margin-bottom:13px}
  /* Кнопка на весь ряд выглядит нелепо, но и мельче 38px палец не берёт. */
  .page-head .btn{padding:9px 12px;min-height:38px}

  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}
  .m span{font-size:18px}

  /* Таблица на семь колонок в телефон не влезает никак. Строка становится
     карточкой: первая колонка занимает всю ширину, остальные встают под ней
     и переносятся. Ширины в разметке заданы прямо в атрибуте style, поэтому
     перебить их можно только через !important. */
  .tbl .tr.th{display:none}
  .tbl .tr{flex-wrap:wrap;gap:5px 10px;align-items:baseline;padding:12px 13px}
  .tbl .tr > div{width:auto!important;flex:0 0 auto!important;text-align:left!important}
  .tbl .tr > div:first-child{flex:1 0 100%!important;margin-bottom:2px}
  .tbl .tr > div:empty{display:none}

  /* Карточка сделки в одну колонку, разделы шире. */
  .detail{grid-template-columns:1fr;gap:11px}
  .sec-h{padding:13px 14px}
  .sec-b{padding:0 14px 14px}
  .grid2,.grid3{grid-template-columns:1fr}

  /* Safari увеличивает страницу, если поле мельче 16px. Отсюда прыжки
     масштаба при каждом тапе в поле ввода. */
  input,select,textarea{font-size:16px}
  .btn,.chip{min-height:36px}
  .chips{gap:6px}

  /* Боковые панели редактирования на телефоне идут во весь экран. */
  #editBack > div{width:100%!important;padding-top:env(safe-area-inset-top)}

  /* Длинные строки маршрутов и адресов не должны распирать карточку. */
  .tbl .tr,.row,.kv{overflow-wrap:anywhere}
}

/* Совсем узкие экраны: метрики в один столбец, иначе цифры режутся. */
@media(max-width:400px){
  .metrics{grid-template-columns:1fr!important}
}

/* Запущено с домашнего экрана: адресной строки нет, снизу полоска жестов. */
@media(display-mode:standalone){
  .main{padding-bottom:calc(34px + env(safe-area-inset-bottom))}
}