/* ЧЕКЛАП CRM — оформление по брендбуку.
Источник: Figma «ЧЕКЛАП new (Copy)» → фрейм Fundamentals.
Все значения ниже помечены: [брендбук] — взято дословно,
[производное] — вычислено из брендбучных, [вне брендбука] — придумано
здесь, потому что в брендбуке этого нет. Последние стоит показать дизайнеру.
Правило брендбука о парах соблюдается буквально:
можно — Чернила+Белый, Чернила+Молочный, Чернила+Розовый,
Белый+Фуксия, Белый+Кобальт, Белый+Пудра, Белый+Небо
нельзя — Белый+Розовый, Чернила+Небо, Чернила+Пудра, всё с Орхидеей
Две «можно»-пары не проходят по контрасту на мелком тексте: Белый+Пудра
даёт 2.43, Белый+Небо — 3.10 при норме 4.5. Значит они задуманы для
крупной типографики, и мелкий текст в них здесь не набирается. */
/* Фирменный шрифт брендбука — Gordita, лежит в static/fonts/.
Четыре начертания ровно под те насыщенности, что просит вёрстка:
Regular 400, Medium 500, Bold 700, Black 900. Кириллица полная во всех —
проверено по таблице cmap, все 66 русских букв на месте.
Формат .otf, а не .woff2, намеренно. Сжатие в woff2 потребовало бы
fontTools и brotli, то есть pip и виртуального окружения, — а вся затея
этого приложения в том, что ставить нечего и ломаться нечему. Выигрыш от
сжатия здесь всё равно нулевой: страницы отдаёт 127.0.0.1, сети между
шрифтом и браузером нет. 690 КБ по петле — это миллисекунды.
Курсив не подключён: в интерфейсе он не встречается. Понадобится —
Gordita Italic всех насыщенностей лежит в загрузках Марии. */
@font-face{font-family:Gordita;font-style:normal;font-weight:400;font-display:swap;
src:url("/static/fonts/gordita-regular.otf") format("opentype")}
@font-face{font-family:Gordita;font-style:normal;font-weight:500;font-display:swap;
src:url("/static/fonts/gordita-medium.otf") format("opentype")}
@font-face{font-family:Gordita;font-style:normal;font-weight:700;font-display:swap;
src:url("/static/fonts/gordita-bold.otf") format("opentype")}
@font-face{font-family:Gordita;font-style:normal;font-weight:900;font-display:swap;
src:url("/static/fonts/gordita-black.otf") format("opentype")}
:root{
/* ---- палитра брендбука, дословно ---------------------------------- */
--fuchsia:#C7248F; /* Акценты/CTA */
--ink:#13152A; /* Чернила: текст */
--milk:#F8F5F1; /* Молочный: фон */
--white:#FFFFFF; /* Инверт. текст */
--powder:#DF8CC0; /* Мягкие акценты */
--pink:#FFEAF8; /* Светлые блоки */
--cobalt:#1951B5; /* Экспертность */
--sky:#7293CD; /* Инфографика */
--graphite:#3A3D4F; /* Основной текст */
--steel:#6F7387; /* Второстепенный */
--mist:#9A9FB2; /* Приглушённый */
/* ---- роли цветов в интерфейсе ------------------------------------- */
--bg:var(--milk);
--card:var(--white);
--heading:var(--ink);
--body:var(--graphite);
--muted:var(--steel);
--accent:var(--fuchsia);
--accent-soft:var(--pink);
--link:var(--cobalt);
/* Заливка акцента отделена от акцентного ТЕКСТА: на тёмной теме текстом
работает Пудра, а заливкой обязана остаться Фуксия — «Белый + Пудра»
даёт 2.43, и надпись на кнопке пропадает. «Белый + Фуксия» — 5.15. */
--accent-fill:var(--fuchsia);
--on-accent:var(--white);
/* Вторая поверхность: серые чипы и бейдж администратора. Отдельный токен,
иначе на тёмной теме они остались бы молочно-белыми заплатками. */
--surface-2:var(--milk);
--surface-2-ink:var(--steel);
/* [производное] Чернила 12% в Молочном — тёплая волосяная линия под фон,
холодный серый рядом с молочным выглядел бы грязным. */
--line:#DDDAD9;
/* [производное] Туман на белом даёт 2.63 — для текста мало. Поэтому он
живёт только в плейсхолдерах и выключенных состояниях. */
--placeholder:var(--mist);
/* ---- статусы: [вне брендбука] --------------------------------------
Брендбук — маркетинговый, в нём нет «успех / внимание / просрочено».
Взять фуксию под «плохо» нельзя: она уже значит «нажми сюда». Подобраны
приглушённые тона той же холодной температуры, все ≥4.5 на подложке. */
--ok:#12735A; --ok-soft:#E3F1EC; --ok-line:#BFDCD2;
--warn:#9A6206; --warn-soft:#FBF0DB; --warn-line:#EAD6AC;
--bad:#C0271A; --bad-soft:#FBE9E7; --bad-line:#F0C6C1;
/* ---- скругления: [брендбук] карточки крупные, теги и кнопки — пилюли */
--r-card:20px; --r-tile:16px; --r-field:12px; --r-pill:999px;
/* ---- типографическая лестница брендбука ---------------------------- */
--fs-kpi:32px; --lh-kpi:40px; /* H2 32/40 Bold */
--fs-h1:20px; --lh-h1:24px; /* H3 20/24 Bold */
--fs-intro:20px; --lh-intro:26px; /* Intro 20/26 Medium */
--fs-body:14px; --lh-body:19px; /* Body 14/19 Medium */
--fs-cap:12px; --lh-cap:18px; /* Caption 12/18 Regular*/
--fs-act:16px; --lh-act:16px; /* Action 16/16 Medium */
/* [производное] В брендбуке между Action 16 и H3 20 пусто, а плотному
экрану нужен подзаголовок секции. Ставим 16/22 Bold. */
--fs-h2:16px; --lh-h2:22px;
/* [брендбук] Display — заголовок экрана и публичной страницы. На сайте
checklap.ru все заголовки секций набраны Black; в CRM это единственное
место, где он уместен: один раз на экран. */
--fs-display:28px; --lh-display:32px;
/* [производное] Край карточки — Чернила 6% в Молочном: не рамка, а шов.
На сайте карточки без обводки, но там они крупные и редкие; на экране
с десятком карточек шов удерживает сетку (как в TailAdmin). */
--card-line:#ECE8E4;
--shadow:0 1px 2px rgba(19,21,42,.04);
--font:Gordita,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
/* Тёмная тема — [вне брендбука], выведена из него: земля Чернила, текст
Молочный, акцент Пудра (фуксия на чернилах слишком тёмная для текста,
но как заливка кнопки с белым текстом остаётся собой). */
@media (prefers-color-scheme:dark){
:root{
--bg:#13152A; --card:#25273A; --heading:var(--milk); --body:#DCD9E4;
--muted:var(--mist); --line:#3C3D4E; --card-line:#3C3D4E;
--accent:var(--powder); --accent-soft:#33203A; --link:var(--sky);
--accent-fill:var(--fuchsia); --on-accent:var(--white);
--surface-2:#33364C; --surface-2-ink:#B9BDCC;
--shadow:none;
--ok-soft:#16302A; --ok-line:#255043;
--warn-soft:#302713; --warn-line:#544527;
--bad-soft:#331C1A; --bad-line:#5A2C27;
--ok:#5FBF9E; --warn:#D8A24A; --bad:#EE8375;
}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--body);
font:500 var(--fs-body)/calc(var(--lh-body)/var(--fs-body)) var(--font);
-webkit-font-smoothing:antialiased;
/* У Gordita цифры по умолчанию пропорциональные, и единица уже остальных
почти вдвое: 430 против 767 единиц ширины. В колонке дат и телефонов
столбик поехал бы зубцами. Табличные цифры в шрифте есть (tnum в GSUB),
включаем их на весь документ: это CRM, почти каждая цифра здесь —
данные в столбик, а не число в тексте. */
font-variant-numeric:tabular-nums}
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:700;
color:var(--heading);margin:0 0 6px;letter-spacing:-.2px}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700;
color:var(--heading);margin:28px 0 10px}
.sub{color:var(--muted);font-size:var(--fs-cap);line-height:var(--lh-cap);
font-weight:400;margin:0 0 18px;max-width:78ch}
/* ------------------------------------------------------------- каркас
Левое меню + светлое поле с белыми карточками — как в TailAdmin и Materio
(решение Марии, 23.09.2026: «нравятся их дашборды»). Оттуда взята
компоновка и пластика: иконки в меню, иконка в плитке, тихие рамки,
мягкая тень. Цвета остались брендбучными — фуксия, а не их синий. */
body.shell{display:flex;min-height:100vh}
.side{width:240px;flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;
background:var(--card);border-right:1px solid var(--line);padding:14px 12px 20px}
.brand{display:flex;align-items:center;gap:8px;padding:8px 10px 18px;
font-weight:700;font-size:18px;color:var(--heading);letter-spacing:-.2px}
/* Знак из брендбука — та же лапа, что в логотипе, перекрашивается currentColor */
.brand .paw{width:20px;height:18px;color:var(--accent);flex:none}
.brand .wordmark{text-transform:lowercase}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
color:var(--body);font-size:var(--fs-body);font-weight:500;line-height:20px}
.side nav a svg,.side nav a .ico{width:20px;height:20px;flex:none;color:var(--muted)}
.side nav a svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side nav a .ico{background:currentColor;
-webkit-mask:url("/static/logo-paw.svg") no-repeat center/contain;
mask:url("/static/logo-paw.svg") no-repeat center/contain}
.side nav a:hover{background:var(--surface-2);color:var(--heading);text-decoration:none}
.side nav a.on{background:var(--accent-soft);color:var(--accent);font-weight:700}
.side nav a.on svg,.side nav a.on .ico{color:var(--accent)}
.side nav .cnt{margin-left:auto;font-style:normal;font-size:11px}
.side nav .grp{display:block;margin:16px 12px 6px;font-size:11px;font-weight:700;
letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
header.top{background:var(--card);border-bottom:1px solid var(--line);padding:0 24px;
min-height:56px;display:flex;align-items:center;position:sticky;top:0;z-index:10}
.who{margin-left:auto;display:flex;align-items:center;gap:9px;
color:var(--muted);font-size:var(--fs-cap)}
.who-name{color:var(--body)}
/* Телефон: меню становится верхней полосой с прокруткой — экран
администратора живёт на телефоне, и левая колонка съела бы его целиком. */
@media (max-width:900px){
body.shell{display:block}
.side{width:auto;height:auto;position:sticky;display:flex;align-items:center;gap:4px;
padding:6px 10px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;
overflow-y:hidden;-webkit-overflow-scrolling:touch}
.brand{padding:6px 8px 6px 2px}
.side nav{flex-direction:row;gap:2px;flex:1}
.side nav a{padding:7px 10px;white-space:nowrap;font-size:var(--fs-cap)}
.side nav .grp{display:none}
header.top{padding:0 14px;min-height:38px;position:static}
.who{padding:0}
}
/* Бейдж роли. Заливка — не украшение: насыщенный цвет ровно у тех трёх
ролей, что просят PIN (главврач, управляющий, директор), светлый — у тех,
кто входит свободно. Граница допуска видна, не читая надписи.
Все сочетания — из списка разрешённых пар. Пудра и Небо здесь не годятся:
белым по ним 2.43 и 3.10 при норме 4.5 для мелкого текста. */
.role-badge{display:inline-block;border-radius:var(--r-pill);padding:3px 10px;
font-size:11px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.role-director{background:var(--ink);color:var(--white)} /* Чернила + Белый */
.role-owner {background:var(--fuchsia);color:var(--white)} /* Белый + Фуксия */
.role-head_vet{background:var(--cobalt);color:var(--white)} /* Белый + Кобальт */
.role-vet {background:var(--pink);color:var(--ink)} /* Чернила + Розовый */
.role-admin {background:var(--surface-2);color:var(--heading);box-shadow:inset 0 0 0 1px var(--line)}
main{width:100%;max-width:1240px;margin:0 auto;padding:22px 24px 60px}
/* --------------------------------------------------------------- блоки */
/* Карточка: тихая рамка и тень в одну единицу — как у шаблонов, где карточка
отделена от поля не цветом, а едва заметным краем. */
.card{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-card);
padding:20px 22px;margin-bottom:16px;box-shadow:var(--shadow)}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* align-items:start — иначе короткая карточка растягивается до высоты
соседней и снизу зияет пустое поле в пол-экрана. */
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start}
.tile{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-tile);
padding:18px;box-shadow:var(--shadow)}
/* Иконка плитки — в тонированном квадрате, как в TailAdmin и Materio. Всегда
один и тот же квадрат, меняется только знак: плитки читаются как ряд. */
.tile .ic{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);
color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.tile .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.tile .ic .paw{width:22px;height:20px;background:currentColor;
-webkit-mask:url("/static/logo-paw.svg") no-repeat center/contain;
mask:url("/static/logo-paw.svg") no-repeat center/contain}
/* Плитка внутри карточки: белое на белом пропало бы, берём молочный. */
.card .tile{background:var(--surface-2);border-color:transparent}
/* Цифра — H2 брендбука: 32/40 Bold. Это самый крупный кегль в CRM: сюда
человек смотрит первым делом, всё остальное — пояснение к ней. */
.tile .n{font-size:var(--fs-kpi);line-height:var(--lh-kpi);font-weight:700;
color:var(--heading);letter-spacing:-1px}
.tile .l{color:var(--muted);font-size:var(--fs-cap);line-height:var(--lh-cap);margin-top:2px}
.tile .h{color:var(--muted);font-size:var(--fs-cap);line-height:var(--lh-cap);
margin-top:8px;font-weight:400}
.banner{border-radius:var(--r-tile);padding:11px 16px;margin-bottom:16px;
font-size:var(--fs-body);border:1px solid}
.banner.ok{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.banner.warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.banner.bad{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad)}
.banner b{font-weight:700}
/* -------------------------------------------------------------- таблицы */
table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
th{text-align:left;color:var(--muted);font-weight:700;font-size:11px;
text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;
border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
/* Розовый — «светлые блоки» брендбука; текст в строке остаётся Чернилами,
это разрешённая пара. */
tbody tr:hover{background:var(--accent-soft)}
.num{text-align:right}
.wrap{overflow-x:auto}
/* Приоритеты. p3 — Кобальт («экспертность»), p4 — Стальной. Небо, хоть и
названо цветом инфографики, белым текстом на 12px не читается (3.10),
поэтому остаётся заливкам графиков, а не подписям. */
.p{display:inline-block;min-width:26px;text-align:center;border-radius:var(--r-pill);
padding:2px 8px;font-size:11px;font-weight:700;color:var(--white)}
.p1{background:var(--bad)} .p2{background:var(--warn)}
.p3{background:var(--cobalt)} .p4{background:var(--steel)}
.tag{display:inline-block;background:var(--accent-soft);color:var(--ink);
border-radius:var(--r-pill);padding:3px 10px;font-size:var(--fs-cap);
font-weight:500;white-space:nowrap}
.tag.grey{background:var(--surface-2);color:var(--surface-2-ink);box-shadow:inset 0 0 0 1px var(--line)}
.tag.red{background:var(--bad-soft);color:var(--bad)}
.muted{color:var(--muted)}
.small{font-size:var(--fs-cap);line-height:var(--lh-cap)}
/* ---------------------------------------------------------------- формы */
label{display:block;font-size:var(--fs-cap);color:var(--muted);margin:14px 0 5px;font-weight:500}
input[type=text],input[type=date],input[type=number],input[type=password],select,textarea{
width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-field);
background:var(--card);color:var(--body);font:500 var(--fs-body)/1.4 var(--font)}
::placeholder{color:var(--placeholder)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;
border-color:transparent}
input.err{border-color:var(--bad);background:var(--bad-soft)}
textarea{min-height:64px;resize:vertical}
.row{display:flex;gap:12px;flex-wrap:wrap} .row>*{flex:1;min-width:160px}
.check{display:flex;align-items:center;gap:8px;margin-top:14px}
.check input{width:auto} .check label{margin:0;color:var(--body)}
button,.btn{background:var(--accent-fill);color:var(--on-accent);border:0;border-radius:var(--r-pill);
padding:11px 22px;font:500 var(--fs-act)/var(--lh-act) var(--font);
cursor:pointer;display:inline-block}
button:hover,.btn:hover{background:var(--ink);text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{background:var(--accent-soft);color:var(--ink)}
.btn.small,button.small{padding:6px 14px;font-size:13px;line-height:16px}
/* Action 16/16 из брендбука — размер призыва на посадочной. В таблице задач
таких кнопок десятки подряд, и в полный рост они забивают строки. Внутри
ячейки кнопка автоматически становится компактной. */
td button,td .btn{padding:7px 15px;font-size:13px;line-height:16px}
.actions{margin-top:20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* ------------------------------------------------------- экран «Кто вы?» */
.who-form{max-width:560px}
/* -------------------------------------------------------------- прочее */
.timeline{list-style:none;padding:0;margin:0}
.timeline li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.timeline .d{color:var(--muted);font-size:var(--fs-cap);min-width:88px}
.timeline .k{min-width:92px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filters a{box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-pill);
padding:5px 14px;font-size:var(--fs-cap);color:var(--body)}
.filters a:hover{background:var(--surface-2);text-decoration:none}
.filters a.on{background:var(--accent-fill);color:var(--on-accent);box-shadow:none;font-weight:700}
.done-row{opacity:.35;transition:opacity .2s}
/* Лапа из логотипа. Маска, а не : цвет берётся из currentColor, значит
знак сам перекрашивается в тёмной теме и не остаётся ярко-розовым. */
.brand{text-decoration:none}
.brand:hover{text-decoration:none}
.brand .paw{background:currentColor;
-webkit-mask:url("/static/logo-paw.svg") no-repeat center/contain;
mask:url("/static/logo-paw.svg") no-repeat center/contain}
/* Кнопка «выйти» в шапке: форма, потому что выход — это POST, а не ссылка,
но выглядеть должна как соседняя ссылка «сменить». [вне брендбука] */
form.inline{display:inline;margin:0}
button.link{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline}
button.link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
/* ------------------------------------------------- паттерны с checklap.ru
Сайт клиники (Tilda, тот же брендбук) даёт три приёма, которых в CRM не
было: пилюля-надзаголовок над секцией («когда нужно обратиться»),
фуксиевая плитка-ссылка со стрелкой в кружке («Чек-апы →») и заголовок
экрана начертанием Black. Здесь они и живут. */
/* Надзаголовок секции. Белый + Кобальт — разрешённая пара, 12px Medium
на кобальте даёт 6.9. Строчные — как на сайте. */
/* Раньше — кобальтовая пилюля с сайта. Со сменой каркаса на «белые карточки
на тихом поле» пилюля стала самым громким пятном экрана; теперь это
подпись капителью, как подписи разделов в меню. */
.eyebrow{display:inline-block;color:var(--muted);font-size:11px;line-height:16px;
font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.eyebrow.pink,.eyebrow.ink{color:var(--muted)}
.eyebrow + h1,.eyebrow + h2{margin-top:6px}
/* Заголовок экрана — Display 28/32 Black, один на страницу. */
h1.display{font-size:var(--fs-display);line-height:var(--lh-display);
font-weight:900;letter-spacing:-.5px;margin:0 0 8px}
/* Плитка-действие: цифра — это не отчёт, а очередь, и на неё нажимают.
Была фуксиевой плиткой с сайта; в новом каркасе она такая же белая, как
соседи, а «нажми» говорят стрелка в углу и рамка на наведении. */
a.tile{display:block;color:inherit;text-decoration:none}
a.tile:hover{text-decoration:none}
.tile.act{position:relative;padding-right:56px;transition:border-color .15s,box-shadow .15s}
.tile.act:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tile.act::after{content:"";position:absolute;top:18px;right:16px;width:28px;height:28px;
border-radius:50%;background:var(--accent-soft);
background-image:url("data:image/svg+xml;utf8,");
background-size:16px;background-position:center;background-repeat:no-repeat}
/* Лапа в углу карточки — как на карточках «Приезжайте натощак». Не
информация, а подпись бренда, поэтому Пудра и мелко. */
.card.pawed{position:relative}
.card.pawed::after{content:"";position:absolute;top:18px;right:20px;width:18px;height:16px;
background:var(--powder);opacity:.9;
-webkit-mask:url("/static/logo-paw.svg") no-repeat center/contain;
mask:url("/static/logo-paw.svg") no-repeat center/contain}
/* Шапка секции: надзаголовок, заголовок и пояснение одним блоком. */
.sec-head{margin-bottom:12px}
.sec-head h2{margin:0 0 4px}
.sec-head .sub{margin-bottom:0}
/* ------------------------------------------------- публичные страницы
Анкета и её «спасибо» / «ссылка не работает». Их видит владелец питомца
с телефона, и выглядеть они должны как страница сайта клиники, а не как
экран внутренней программы: логотип с подписью, надзаголовок, крупный
заголовок, белые карточки на молочном, одна фуксиевая кнопка. */
.pub{max-width:640px;margin:0 auto;padding:0 16px 40px}
.pub-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:16px 0 22px}
.pub-brand{display:flex;align-items:center;gap:9px;color:var(--heading);text-decoration:none}
.pub-brand:hover{text-decoration:none}
.pub-brand .paw{width:26px;height:23px;background:var(--accent);flex:none;
-webkit-mask:url("/static/logo-paw.svg") no-repeat center/contain;
mask:url("/static/logo-paw.svg") no-repeat center/contain}
.pub-brand .wordmark{display:block;font-weight:900;font-size:22px;line-height:22px;
letter-spacing:-.4px;text-transform:lowercase}
.pub-brand .tagline{display:block;font-size:8px;line-height:10px;letter-spacing:1.4px;
text-transform:uppercase;color:var(--muted);font-weight:500;margin-top:2px}
.pub-top .addr{font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--muted);
text-align:right;font-weight:400}
.pub-top .addr a{color:var(--heading);font-weight:700}
.pub .hero{margin-bottom:16px}
.pub .hero .sub{font-size:var(--fs-body);line-height:var(--lh-body);margin:0}
.pub .pet{display:inline-flex;align-items:center;gap:6px;background:var(--card);
border-radius:var(--r-pill);padding:5px 12px 5px 8px;font-weight:700;color:var(--heading);
font-size:var(--fs-body);margin-top:10px;box-shadow:inset 0 0 0 1px var(--card-line)}
.pub .pet::before{content:"";width:14px;height:13px;background:var(--accent);
-webkit-mask:url("/static/logo-paw.svg") no-repeat center/contain;
mask:url("/static/logo-paw.svg") no-repeat center/contain}
/* Вводный текст — розовая карточка с чернилами: разрешённая пара, и это
ровно тот блок, который на сайте стоит перед списком симптомов. */
.pub .intro{background:var(--accent-soft);color:var(--heading);border-radius:var(--r-card);
padding:16px 18px;font-size:15px;line-height:21px;font-weight:500;margin-bottom:14px}
/* Вопросы: одна белая карточка, между вопросами волосяная линия, номер в
розовом кружке — чтобы на телефоне было видно, где заканчивается один
вопрос и начинается другой. */
.pub .qcard{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-card);
padding:4px 18px;counter-reset:q}
.pub .q{padding:18px 0;border-bottom:1px solid var(--line);margin:0}
.pub .q:last-child{border-bottom:0}
.pub .q label{display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:21px;
font-weight:700;color:var(--heading);margin:0 0 10px}
.pub .q label::before{counter-increment:q;content:counter(q);flex:none;width:22px;height:22px;
border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:12px;
line-height:22px;text-align:center;font-weight:700;margin-top:-1px}
.pub .q .req{color:var(--accent);font-weight:900;margin-left:2px}
.pub .q input[type=text],.pub .q input[type=number],.pub .q textarea,.pub .q select{
font-size:16px;line-height:1.4;padding:12px 14px;background:var(--bg);
border:1px solid var(--line);border-radius:var(--r-field);width:100%}
.pub .q textarea{min-height:96px}
.pub .q select{appearance:none;-webkit-appearance:none;padding-right:40px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.pub .q .hint{font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--muted);
margin-top:6px;font-weight:400}
.pub .submit{margin-top:16px}
.pub .submit button{width:100%;padding:16px 22px;font-size:17px;line-height:20px;font-weight:700}
.pub .submit .note{font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--muted);
text-align:center;margin:12px 0 0;font-weight:400}
/* Итоговая карточка «спасибо» / «недоступно»: заголовок Display и текст,
без баннера — баннер это про свежесть данных внутри CRM. */
.pub .result{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-card);
padding:22px 20px}
.pub .result h1{margin:8px 0 10px}
.pub .result p{margin:0 0 10px;font-size:15px;line-height:21px}
.pub .result p:last-child{margin-bottom:0}
.pub .result p.small{font-size:var(--fs-cap);line-height:var(--lh-cap);font-weight:400}
.pub-foot{margin-top:28px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--muted);font-weight:400}
.pub-foot a{color:var(--muted)}
/* ------------------------------------------------------------- звонки
Пропущенные — очередь на сегодня, поэтому строка звонка это не ячейки
таблицы, а карточка с крупным номером и одной фуксиевой кнопкой. Таблица
остаётся для истории, где читают, а не действуют. */
.call-list{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.call{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;align-items:center;
background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-tile);
padding:14px 18px}
.call .when{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-cap);
line-height:var(--lh-cap);color:var(--muted);font-weight:400}
.call .when b{color:var(--heading);font-weight:700;font-size:var(--fs-body);line-height:var(--lh-body)}
.call .main{display:flex;flex-direction:column;gap:3px;min-width:0}
.call .phone{font-size:18px;line-height:22px;font-weight:700;color:var(--heading);
letter-spacing:-.2px;display:inline-flex;align-items:center;gap:8px}
.call .phone a{color:inherit}
.call .caller{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--body);
display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.call .caller .muted{font-weight:400}
.call .acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* Направление звонка — стрелка в кружке: входящий вниз-влево, исходящий
вверх-вправо, пропущенный — красный. Цвет из статусов, форма — из сайта. */
.dir{display:inline-block;width:22px;height:22px;border-radius:50%;flex:none;
vertical-align:middle;background-color:var(--surface-2);
-webkit-mask:none;mask:none;background-repeat:no-repeat;background-position:center;
background-size:13px}
.dir.in{background-image:url("data:image/svg+xml;utf8,");background-color:var(--ok-soft)}
.dir.out{background-image:url("data:image/svg+xml;utf8,");background-color:#E6ECF8}
.dir.miss{background-image:url("data:image/svg+xml;utf8,");background-color:var(--bad-soft)}
.dir.none{background-image:url("data:image/svg+xml;utf8,")}
td .dir{margin-right:6px}
/* Пустая очередь — не серая строка в таблице, а спокойная карточка. */
.empty{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-tile);
padding:22px 20px;display:flex;align-items:center;gap:14px;color:var(--muted);
font-size:var(--fs-body);line-height:var(--lh-body);margin-bottom:24px}
.empty::before{content:"";flex:none;width:28px;height:25px;background:var(--powder);
-webkit-mask:url("/static/logo-paw.svg") no-repeat center/contain;
mask:url("/static/logo-paw.svg") no-repeat center/contain}
.empty b{color:var(--heading)}
/* Шапка экрана с кнопкой справа: заголовок слева, действие справа. */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
flex-wrap:wrap;margin-bottom:6px}
.page-head .sub{margin-bottom:0}
.page-head .acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:4px}
/* Карточка клиента на экране «кто звонит»: имя крупно, факты пилюлями. */
.person{margin-bottom:12px}
.person h2{margin:0 0 6px;font-size:var(--fs-h1);line-height:var(--lh-h1)}
.person .facts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.person table td:first-child{padding-left:0}
@media (max-width:640px){
.call{grid-template-columns:1fr;gap:8px}
.call .when{flex-direction:row;gap:8px;align-items:baseline}
.call .acts{justify-content:flex-start}
.call .acts .btn,.call .acts button{flex:1;text-align:center}
}
/* ---- тексты сообщений: раскрывающийся блок в задаче и на звонках ---- */
details.msg{margin:0 0 8px}
details.msg summary{cursor:pointer;font-size:13px;color:var(--accent,#c2186b);user-select:none}
details.msg[open] summary{margin-bottom:6px}
details.msg textarea,.tpl textarea{width:100%;font:inherit;font-size:14px;line-height:1.4;resize:vertical}
details.msg .script,.script{white-space:pre-line;margin-top:8px;padding:8px 10px;border-left:3px solid var(--line,#ddd);color:var(--muted,#666)}
.tpl{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){.tpl{grid-template-columns:1fr}}
.rate{font-variant-numeric:tabular-nums}
.rate.bad{color:var(--bad,#b3261e);font-weight:600}
.rate.warn{color:var(--warn,#b26a00);font-weight:600}
/* .rate.ok использовался в /pnl раньше, чем появилось это правило —
не хватало ровно одной строки, и плюсовые отклонения плана читались
обычным текстом вместо зелёного. */
.rate.ok{color:var(--ok,#12735a);font-weight:600}
/* ---------------------------------------------------------- мини-графики
Сводка: строка тренда в плитке и полоска доли в таблице. Ни то, ни другое
не самостоятельный график — это довесок к уже показанному числу, поэтому
оба тише самого числа: линия и полоска тоньше и глуше акцента карточек. */
/* Спарклайн под большой цифрой плитки: форма месяцев, без осей и подписей —
само число уже стоит крупно строкой выше. */
.spark{display:block;margin-top:10px;overflow:visible}
.spark polyline{fill:none;stroke:var(--steel);stroke-width:2;
stroke-linejoin:round;stroke-linecap:round}
.spark circle{fill:var(--accent)}
/* Полоска доли в ячейке таблицы: число и полоска рядом, полоска — не второй
источник значения, а его силуэт. Скруглён только правый край (кончик
данных), левый стоит на базовой линии, как у любого столбца из brendbuka. */
.barcell{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.barcell .bv{font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.barcell .bt{width:64px;height:6px;border-radius:3px;background:var(--line);
overflow:hidden;flex:none}
.barcell .bf{display:block;height:100%;background:var(--accent);
border-radius:0 3px 3px 0}
/* Воронка «контакты → записались» под тремя плитками 30 дней. Один оттенок
в двух ступенях светлоты — это порядок этапов, а не разные сущности:
пришедшие входят в контактировавших, второй цвет не должен спорить за
идентичность с первым. */
.funnel{margin-top:14px}
.funnel .frow{display:flex;justify-content:space-between;font-size:var(--fs-cap);
color:var(--muted);margin:10px 0 4px}
.funnel .frow:first-child{margin-top:0}
.funnel .frow b{color:var(--heading);font-weight:700;font-variant-numeric:tabular-nums}
.funnel .ftrack{height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.funnel .ffill{display:block;height:100%;border-radius:0 5px 5px 0}
.funnel .ffill.contacts{background:var(--accent-soft);width:100%}
.funnel .ffill.booked{background:var(--accent)}
/* ------------------------------------------------------------ графики
Столбики, площадной и круговой индикатор на сводке. Разметка — SVG в
dashboard.html, координаты — app/charts.py. Всё красится переменными:
тёмная тема получается без второго набора цветов. */
.charts{align-items:stretch}
.chart{display:block;width:100%;height:auto;overflow:visible;
font-family:var(--font);font-size:11px}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .tick,.chart .lbl{fill:var(--muted);font-weight:500}
.chart .bar rect{fill:var(--accent);opacity:.55;transition:opacity .15s}
.chart .bar.cur rect{opacity:1}
.chart .bar:hover rect{opacity:1}
.chart.area .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart.area .g0{stop-color:var(--accent);stop-opacity:.22}
.chart.area .g1{stop-color:var(--accent);stop-opacity:0}
.chart.area .pt circle{fill:var(--accent);stroke:var(--card);stroke-width:2}
.chart.area .pt:hover circle{r:6}
.gauge-card{display:flex;flex-direction:column}
.gauge-wrap{position:relative;text-align:center;padding:6px 0 0}
.gauge{width:180px;max-width:100%;height:auto;display:block;margin:0 auto}
.gauge path{fill:none;stroke-linecap:round}
.gauge .track{stroke:var(--surface-2);stroke-width:14}
.gauge .fill{stroke:var(--accent);stroke-width:14}
.gauge .fill.ok{stroke:var(--ok)}
.gauge-n{font-size:var(--fs-kpi);line-height:var(--lh-kpi);font-weight:700;color:var(--heading);
letter-spacing:-1px;margin-top:-30px}
.gauge-l{font-size:var(--fs-cap);color:var(--body);margin-top:2px}
.gauge-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto;
padding-top:16px;border-top:1px solid var(--line);text-align:center}
.gauge-foot .k{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
.gauge-foot b{color:var(--heading)}
/* Лента «Недавнее» — как «Recent activity» в Lably: точка, строка, дата. */
.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
.feed li:last-child{border-bottom:0}
.feed .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:6px}
.feed li.vet .dot{background:var(--cobalt)}
.feed .txt{flex:1;min-width:0}
.feed .when{flex:none;white-space:nowrap}
/* Ссылки на справочники со страницы «Данные из Vetmanager»: это навигация,
а не сноска, поэтому размер основного текста и заметные отступы. */
.ref-nav{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:14px 0 18px;
font-size:var(--fs-body);line-height:var(--lh-body)}
.ref-nav a{font-weight:600;text-decoration:none;border-bottom:1px solid transparent}
.ref-nav a:hover{border-bottom-color:currentColor}
/* Кнопка «Назад» на страницах справочников: со справочника попадают по
ссылке, и без неё приходится искать дорогу обратно через меню. */
.back{margin:0 0 10px}
.back a{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:8px;
text-decoration:none;font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--muted)}
.back a:hover{color:var(--text);border-color:var(--text)}
/* «Кто лечится в ЧЕКЛАП»: обезличенный портрет базы. Классы с префиксом
pst- повторяют блок сайта, но на токенах CRM, чтобы страница жила в теме. */
.pst-meta{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.pst-meta .chip{font-size:12px;padding:4px 10px;border:1px solid var(--line);background:var(--card);
color:var(--body);border-radius:999px}
.pst-meta .chip b{font-weight:600;color:var(--heading)}
.pst-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:16px}
.pst-kpi .tile .l{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pst-kpi .tile .h{font-size:12.5px;color:var(--muted)}
.pst-kpi .tile.hi{background:var(--ink);border-color:var(--ink);color:var(--white)}
.pst-kpi .tile.hi .l,.pst-kpi .tile.hi .h{color:rgba(255,255,255,.7)}
.pst-kpi .tile.hi .n{color:var(--white)}
.pst-eb{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.card .pst-eb+h2{margin-top:0}
.pst-stack{display:flex;height:34px;border-radius:8px;overflow:hidden;gap:2px;margin:12px 0 8px}
.pst-stack .sg{display:flex;align-items:center;justify-content:center;min-width:0;color:var(--white);font-size:12px;font-weight:600}
.pst-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--body)}
.pst-legend .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.pst-pan{border:1px solid var(--line);border-radius:var(--r-tile);padding:14px 16px;background:var(--card)}
.pst-pan .ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.pst-pan h3{margin:0;font-size:15px}
.pst-hist{display:flex;align-items:flex-end;gap:3px;height:120px}
.pst-hist .hb{flex:1;min-height:2px;border-radius:3px 3px 0 0;position:relative;opacity:.9}
.pst-hist .hb span{position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:10px;color:var(--muted)}
.pst-hx{display:flex;gap:3px;margin-top:4px}
.pst-hx div{flex:1;text-align:center;font-size:10px;color:var(--muted)}
.pst-pure{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:12px 0 16px}
.pst-pure>div{border:1px solid var(--line);border-radius:var(--r-tile);padding:14px 16px;background:var(--card)}
.pst-pure .l{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pst-pure .big{font-size:34px;font-weight:700;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pst-pure .h{font-size:12.5px;color:var(--muted)}
.pst-bars .r{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:5px 0}
.pst-bars .r .l{font-size:13px;color:var(--body)}
.pst-bars .r .v{font-size:13px;font-weight:600;color:var(--heading)}
.pst-bars .r .v small{font-weight:400;color:var(--muted);margin-left:6px}
.pst-bars .r .tr{grid-column:1/-1;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.pst-bars .r .f{height:100%;border-radius:3px}
.pst-bars .r.muted .l,.pst-bars .r.muted .v{color:var(--muted)}
.pst-bars .r.muted .f{opacity:.45}
.pst-scroll{overflow-x:auto}
.pst-scroll>div{min-width:640px}
.pst-cols{display:flex;align-items:flex-end;gap:4px;height:160px;padding-top:18px}
.pst-cols .col{flex:1;min-height:2px;background:var(--fuchsia);border-radius:4px 4px 0 0;position:relative}
.pst-cols .col.part{background:repeating-linear-gradient(135deg,var(--fuchsia) 0 4px,var(--pink) 4px 8px)}
.pst-cols .col span{position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:10px;color:var(--muted)}
.pst-cx{display:flex;gap:4px;margin-top:4px}
.pst-cx div{flex:1;text-align:center;font-size:10px;line-height:1.3;color:var(--muted)}
/* Вход по логину и паролю, сотрудники, журнал входов (29.09.2026). */
.who-form input[type=text],.who-form input[type=password]{max-width:360px}
.login-error{color:var(--bad);font-weight:700;margin:6px 0 0}
.login-note{background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:var(--r-field);padding:10px 12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}
.issued{background:var(--ok-soft);border-color:var(--ok-line)}
.issued-table td{padding:6px 14px 6px 0;border:0}
.big-pass{font-size:22px;letter-spacing:.08em;color:var(--heading)}
.chip-s{display:inline-block;font-size:11px;line-height:16px;padding:1px 8px;border-radius:var(--r-pill);
background:var(--surface-2);color:var(--surface-2-ink);font-weight:600;vertical-align:1px}
.chip-s.ok{background:var(--ok-soft);color:var(--ok)}
.chip-s.warn{background:var(--warn-soft);color:var(--warn)}
.chip-s.bad{background:var(--bad-soft);color:var(--bad)}
.user-add{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
.user-add label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-cap);color:var(--muted);margin:0}
.user-add input,.user-add select{min-width:180px}
.actions-cell{white-space:nowrap}
.actions-cell form+form{margin-left:6px}
.log-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.log-filter input[type=text]{min-width:260px}
.log-table tr.row-bad td{background:var(--bad-soft)}
.log-table tr.row-warn td{background:var(--warn-soft)}
.nowrap{white-space:nowrap}
/* Входящие лиды (29.09.2026). */
.lead-new summary{cursor:pointer;list-style:none;padding:2px 0}
.lead-new summary::-webkit-details-marker{display:none}
.lead-new[open] summary{margin-bottom:14px}
.lead-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px 14px;align-items:end}
.lead-form label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-cap);color:var(--muted);margin:0}
.lead-form label.wide,.lead-form .wide{grid-column:1/-1}
.lead-form label.check{flex-direction:row;align-items:center;gap:8px;color:var(--body)}
.lead-form textarea{width:100%}
.lead-table tr.row-new td{background:var(--warn-soft)}
/* Касса (29.09.2026). */
.cash-table td,.cash-table th{padding:6px 7px;font-size:13px}
.cash-table tr.st-bad td{background:var(--bad-soft)}
.cash-table tr.st-ok td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.cash-table tr.future td{color:var(--placeholder)}
.num.neg,b.neg{color:var(--bad);font-weight:700}
.num.warn{color:var(--warn);font-weight:700}
tr.strike td{text-decoration:line-through}
.tile.bad-tile{background:var(--bad-soft);border-color:var(--bad-line)}
.tile.ok-tile{background:var(--ok-soft);border-color:var(--ok-line)}
.tile.warn-tile{background:var(--warn-soft);border-color:var(--warn-line)}