/* ЭТОТ ФАЙЛ — ЗЕРКАЛО ТОКЕНОВ КАБИНЕТА.
Источник правды: 08_Приложение/app/static/css/tokens.css.
Правим ТАМ и копируем сюда, иначе сайт и кабинет разъедутся:
cp 08_Приложение/app/static/css/tokens.css 07_Лендинг/assets/tokens.css
Синхронизировано 03.09.2026. */
/* ════════════════════════════════════════════════════════════════════
«БЕРЕГ» · кабинет терапевта — ДИЗАЙН-ТОКЕНЫ И БАЗОВЫЕ КОМПОНЕНТЫ
v2 · 26.07.2026 · после аудита
Основа: v1 «Ясное небо» + правки аудита 05 (визуальный язык).
ЕДИНСТВЕННЫЙ источник цветов и компонентов для всех экранов прототипа.
Ни одного сырого HEX в разметке экранов — только переменные и классы.
Нужен новый компонент → сначала сюда.
★ ПАЛИТРА (28.08.2026, решение Артёма): ЗЕЛЁНОГО В ПРОДУКТЕ НЕТ.
Ровно четыре цвета, у каждого один смысл:
СИНИЙ — действия И подтверждение (оплачено, проведено, достигнуто)
ЯНТАРЬ — нужно внимание (не оплачено, ждёт итога, давно не был)
КИРПИЧ — риск клиента и необратимые действия
СЕРЫЙ — нейтральное (запланировано, отменено, архив)
Токены --success-* означают «подтверждено» и указывают на СИНИЙ —
не возвращать им зелёные значения. Новый цвет в продукт не вводить.
ПРАВИЛА v2 (обязательны для каждой страницы):
· Поверхности белые/канвас; цветных заливок фона нет. Исключений ровно
два, оба осознанные: .risk-badge-acute (острый риск клиента) и
.fin-row.is-waiting — строка денег, которая ещё не подтверждена.
Второе нужно потому, что «ждёт подтверждения» — не свойство записи,
а состояние всего раздела: такие строки должны считываться пачкой,
не по одной. Третьего исключения не заводить.
· Статусы = точка 6px + текст (.status). Заливных пилюль в строках нет.
· Голубой = только primary-CTA (1 на экран), активная навигация,
ссылки и МАКСИМУМ 1 .panel-info на экран.
· Риск-палитра (янтарь/кирпич) — только риск и просрочка.
Категории и направления цветом НЕ кодируются (.tag нейтральный).
· Типографика: ровно 9 целых кеглей 11/12/13/14/15/16/18/22/28,
только через --fs-*; 700 — только h1/h2/.stat-num; 800 не существует;
вторичное — размером и цветом, не жирностью.
· Иконки: только спрайт icons.svg (viewBox 24, stroke 1.5,
currentColor), класс .icon; размеры 16/20/24. НОЛЬ эмодзи в UI.
· Воздух: карточка 24px, зазор сеток 16px, ритм строк 12px;
вертикальные отступы — только шкала --sp-*.
════════════════════════════════════════════════════════════════════ */
:root{
color-scheme: light; /* MVP — только светлая тема; защита от auto-dark браузеров */
/* ══════════════════════════════════════════════════════════════
ПОВЕРХНОСТИ · шкала партнёрской ДС, перекрашенная в «небо»
══════════════════════════════════════════════════════════════ */
--bg: #F4F8FC; /* фон приложения */
--surf: #FFFFFF; /* карточки, панели, сайдбар */
--surf-2: #F1F6FB; /* вложенные блоки, зебра, hover-строки */
--surf-3: #E5EEF7; /* нажатое, скелетоны, треки */
--ink: #16243B; /* инверсные плашки: тёмные карточки, тултипы, тосты */
--ink-2: #1F3252; /* hover тёмной заливки */
--line: rgba(16, 42, 67, 0.08);
--line-2: rgba(16, 42, 67, 0.12);
--line-3: rgba(16, 42, 67, 0.20);
/* ══════════════════════════════════════════════════════════════
ТЕКСТ · сине-графитовая шкала, БЕЗ чистого чёрного
══════════════════════════════════════════════════════════════ */
--t-1: #16243B; /* заголовки, ключевые цифры */
--t-2: #33404F; /* основной текст */
--t-3: #5D7186; /* подписи, меты (5,0:1 на белом) */
--t-4: #64788D; /* микро-капсы, плейсхолдеры (4,57:1 на белом — AA).
Прежний #6C8095 давал 4,07 и норму не проходил. */
--t-inv: #EAF1F9; /* текст на --ink */
/* ══════════════════════════════════════════════════════════════
АКЦЕНТ · фирменное «небо» «Берега» (структура — как у партнёрки)
══════════════════════════════════════════════════════════════ */
--acc: #3577C8; /* заливки кнопок и индикаторов */
--acc-h: #2C64A8; /* hover заливки */
--acc-d: #245488; /* активное нажатие */
--acc-ink: #2C64A8; /* синий ТЕКСТ на белом (6,0:1) */
--acc-soft: #5B93D6; /* заливки прогресса, точки, вторая ступень */
--acc-sk: rgba(53, 119, 200, 0.10);
--acc-sk-2: rgba(53, 119, 200, 0.16);
--acc-bd: rgba(53, 119, 200, 0.32);
--acc-glow: rgba(53, 119, 200, 0.30);
--acc-bright: #8CBBEC; /* акцент на тёмных поверхностях */
--on-acc: #FFFFFF; /* текст на синей заливке */
/* ══════════════════════════════════════════════════════════════
СЕМАНТИКА · ТРИ ЦВЕТА, ЗЕЛЁНОГО НЕТ (28.08.2026, решение Артёма)
СИНИЙ — норма и подтверждение: оплачено, проведено, достигнуто.
Это же основной цвет действий, поэтому здоровое состояние
практики окрашено фирменным цветом, а не отдельным.
ЯНТАРЬ — нужно внимание: не оплачено, ждёт итога, давно не был.
КИРПИЧ — риск клиента и необратимые действия.
СЕРЫЙ — нейтральное: запланировано, отменено, архив.
Правило: цвет = сигнал. Если элемент ничего не требует и ничем не
примечателен — он серый.
══════════════════════════════════════════════════════════════ */
/* «Подтверждено» — синий. Имена --success-* сохранены ради шаблонов:
они означают «успех», а не «зелёный». */
--success: #2C64A8;
--success-ink: #2C64A8;
--success-sk: rgba(53, 119, 200, 0.10);
--success-sk-2: rgba(53, 119, 200, 0.16);
/* «Нейтральное» — запланировано, отменено, архив */
--neutral: #7A8CA0;
--neutral-ink: #5D7186;
--neutral-sk: rgba(93, 113, 134, 0.10);
--warn: #8F5E15;
--warn-ink: #8A5A14;
--warn-bright: #C98A2E; /* янтарные заливки, точки, иконки */
--warn-sk: rgba(201, 138, 46, 0.13);
--warn-sk-2: rgba(201, 138, 46, 0.20);
--danger: #C0392B;
--danger-ink: #B3392F;
--danger-sk: rgba(192, 57, 43, 0.09);
--danger-sk-2: rgba(192, 57, 43, 0.15);
/* Тёплая плашка (поощрение: ДЗ клиентов, SOS-экран) */
--warm-bg: #FBF3E4;
--warm-border: #F0E5CC;
--warm-ink: #7E5117;
--warm-track: #F2E4C6;
/* ══════════════════════════════════════════════════════════════
РАДИУСЫ · шкала партнёрской ДС (концентрические)
══════════════════════════════════════════════════════════════ */
--r-1: 10px; /* кнопки, инпуты, бейджи-квадраты, пункты меню */
--r-2: 14px; /* вложенные плашки, поповеры, иконки-плашки */
--r-3: 20px; /* карточки и плитки бенто */
--r-4: 26px; /* модалки, hero-плитки */
--r-pill: 999px;
/* ══════════════════════════════════════════════════════════════
ТЕНИ · слоистая elevation партнёрки в синем тоне «Берега»
══════════════════════════════════════════════════════════════ */
--ev-1: 0 1px 2px rgba(16,42,67,.05);
--ev-2: 0 1px 2px rgba(16,42,67,.04), 0 4px 14px rgba(16,42,67,.06);
--ev-3: 0 2px 6px rgba(16,42,67,.06), 0 14px 34px rgba(16,42,67,.10);
--ev-4: 0 4px 12px rgba(16,42,67,.08), 0 20px 44px rgba(16,42,67,.13);
--ev-5: 0 8px 20px rgba(16,42,67,.10), 0 32px 80px rgba(16,42,67,.22);
--ev-brand: 0 6px 20px rgba(53,119,200,.30);
--ev-warm: 0 6px 20px rgba(201,138,46,.26);
/* ══════════════════════════════════════════════════════════════
ОТСТУПЫ · 4px-сетка
══════════════════════════════════════════════════════════════ */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
--s-6: 24px; --s-7: 28px; --s-8: 32px; --s-9: 40px; --s-10: 48px;
--s-12: 64px;
--gap: 16px; /* бенто-зазор (десктоп) */
--gap-mobile: 12px;
/* ══════════════════════════════════════════════════════════════
ТИПОГРАФИКА · пара из кабинета партнёра STOFORY B2B
Montserrat — дисплей: заголовки страниц, имена, крупные цифры
Inter — интерфейс и текст
Оба self-hosted (сабсеты latin+cyrillic), НЕ Google Fonts CDN.
══════════════════════════════════════════════════════════════ */
--font-display: 'Montserrat', -apple-system, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
--font-ui: 'Inter', -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
--font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;
/* ШКАЛА КЕГЛЕЙ — ровно 9 целых значений: 11/12/13/14/15/16/18/22/28.
Половинных пикселей НЕ существует. font-size мимо токенов — баг. */
--fs-xs: 11px; /* микро-капсы card-label, легенды */
--fs-sm: 12px; /* меты, подписи, счётчики */
--fs-base: 13px; /* лейблы, бейджи, хинты, мелкие кнопки */
--fs-md: 14px; /* интерфейс: кнопки, навигация, таблицы */
--fs-body: 15px; /* текст для чтения (аудитория 40+) */
--fs-lg: 16px; /* заголовки внутри карточек */
--fs-xl: 18px; /* заголовки плиток и модалок */
--fs-2xl: 22px; /* имя клиента, крупные подзаголовки */
--fs-3xl: 28px; /* заголовок страницы, крупные цифры */
--fw-normal: 400; --fw-medium: 500; --fw-semibold: 600;
--fw-bold: 700; --fw-extrabold: 800;
--lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.6;
--ls-tight: -0.02em; --ls-caps: 0.08em;
/* ══════════════════════════════════════════════════════════════
ДВИЖЕНИЕ · партнёрские кривые (в т.ч. пружина для нажатий)
══════════════════════════════════════════════════════════════ */
--ease: cubic-bezier(.22,.68,.34,1);
--spring: cubic-bezier(.34,1.4,.44,1);
--dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
/* ══════════════════════════════════════════════════════════════
КАРКАС
══════════════════════════════════════════════════════════════ */
--sidebar-w: 244px;
--topbar-h: 64px;
--content-max: 1280px;
/* ══════════════════════════════════════════════════════════════
СОВМЕСТИМОСТЬ · старые имена токенов «Берега» ссылаются на новые.
Не использовать в новом коде — только чтобы не переписывать
8 800 строк шаблонов. Новый код пишем на токенах выше.
══════════════════════════════════════════════════════════════ */
--bg-canvas: var(--bg);
--bg-surface: var(--surf);
--bg-info-tint: var(--acc-sk);
--bg-info-hover: var(--acc-sk-2);
--bg-selected: var(--acc-sk);
--bg-hover: var(--surf-2);
--primary-600: var(--acc-ink);
--primary-500: var(--acc);
--primary-400: var(--acc-soft);
--primary-100: #D6E6F7;
--text-primary: var(--t-1);
--text-body: var(--t-2);
--text-secondary: var(--t-3);
--text-muted: var(--t-4);
--border-hairline: var(--line);
--border-divider: var(--line);
--border-strong: var(--line-3);
--success-text: var(--success); --success-bg: #E8F1FB; --success-border: #C6DDF5;
--warning-text: var(--warn); --warning-bg: #FDF3E1; --warning-border: #F0DCB4;
--warning-dot: var(--warn-bright);
--danger-text: var(--danger-ink); --danger-bg: #FBECEA; --danger-border: #F2C9C4;
--danger-solid: var(--danger);
--control-off: #C7D4E2;
--radius-s: var(--r-1);
--radius-m: var(--r-2);
--radius-l: var(--r-3);
--radius-xl: var(--r-4);
--radius-pill: var(--r-pill);
--shadow-card: var(--ev-2);
--shadow-hover: var(--ev-3);
--shadow-modal: var(--ev-5);
--shadow-btn: var(--ev-brand);
--sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px;
--sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px;
--font-heading: var(--font-display);
--font-body: var(--font-ui);
--fs-micro: var(--fs-xs);
--fs-caption: var(--fs-sm);
--fs-label: var(--fs-base);
--fs-small: var(--fs-md);
--fs-h4: var(--fs-lg);
--fs-h3: var(--fs-xl);
--fs-h2: var(--fs-2xl);
--fs-h1: var(--fs-3xl);
--fs-stat: var(--fs-3xl);
--transition: var(--dur-2) var(--ease);
--transition-slow: var(--dur-3) var(--ease);
}
/* ════════════════════════════════════════════════════════════════════
БАЗА
════════════════════════════════════════════════════════════════════ */
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
font-family: var(--font-ui);
font-size: var(--fs-md); line-height: var(--lh-normal);
color: var(--t-2);
background:
radial-gradient(1100px 420px at 88% -120px, rgba(53,119,200,.08), transparent 70%),
linear-gradient(180deg, #F1F7FD 0%, var(--bg) 360px);
background-attachment: fixed;
background-color: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Ссылки по умолчанию без подчёркивания: в кабинете почти каждая ссылка —
это плитка, карточка или пункт меню, а не слово в тексте. Там, где ссылка
стоит внутри абзаца, её роль берёт на себя класс .link с бортиком снизу.
Без этого правила каждый новый компонент приезжает с подчёркиванием
и выглядит как список ошибок. */
a{ text-decoration:none; color: inherit; }
button{ font-family: inherit; cursor:pointer; }
input,select,textarea{ font-family: inherit; }
ul,ol{ list-style:none; }
img,svg{ max-width:100%; }
::selection{ background: var(--primary-100); color: var(--text-primary); }
h1,h2,h3,h4{
font-family: var(--font-display);
color: var(--t-1);
letter-spacing: var(--ls-tight); line-height: var(--lh-snug);
}
h1{ font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); }
h2{ font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); }
h3{ font-size: var(--fs-xl); font-weight: var(--fw-bold); }
h4{ font-size: var(--fs-lg); font-weight: var(--fw-bold); }
/* Деньги и время — ВСЕГДА табличные цифры */
.num{ font-variant-numeric: tabular-nums; }
/* Текстовая ссылка в контенте */
.link{
color: var(--acc-ink); text-decoration:none; font-weight: var(--fw-medium);
border-bottom:1px solid var(--acc-bd);
transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.link:hover{ border-color: var(--acc); color: var(--acc-h); }
/* ════════════════════════════════════════════════════════════════════
ИКОНКИ · единственный источник — спрайт icons.svg (инлайнится один
раз в начале body). Использование:
Разрешённые размеры: 16 (в строках и статусах) · 20 (навигация,
кнопки) · 24 (пустые состояния, cta-icon). stroke задан в символе,
в CSS страниц stroke-width не пишется.
════════════════════════════════════════════════════════════════════ */
.icon{
display:block; flex:none;
width:20px; height:20px;
fill:none; stroke:currentColor; stroke-width:1.5;
stroke-linecap:round; stroke-linejoin:round;
}
.icon-16{ width:16px; height:16px; }
.icon-24{ width:24px; height:24px; }
/* ════════════════════════════════════════════════════════════════════
ФОКУС-КОЛЬЦО (единое: 2px primary, offset 2px)
════════════════════════════════════════════════════════════════════ */
a:focus-visible, button:focus-visible, [role="tab"]:focus-visible,
[tabindex]:focus-visible{
outline: 2px solid var(--acc);
outline-offset: 2px;
border-radius: var(--r-1);
}
::selection{ background: var(--acc-sk-2); color: var(--t-1); }
/* ════════════════════════════════════════════════════════════════════
КАРКАС ПРИЛОЖЕНИЯ
.app > .sidebar + .main > .main-inner
════════════════════════════════════════════════════════════════════ */
.app{ display:flex; min-height:100vh; }
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
/* Снизу оставлено место под кнопку «Маяка»: она висит поверх страницы,
и без запаса последняя кнопка формы оказывалась под ней навсегда —
отскроллить её было некуда. */
.main-inner{
width:100%; max-width: calc(var(--content-max) + 56px);
margin:0 auto; padding: 26px 28px 96px;
}
.page-head .page-date{ margin-top:3px; font-size:var(--fs-body); color:var(--text-secondary); }
/* ════════════════════════════════════════════════════════════════════
САЙДБАР — общий каркас навигации «Берег»
Разметка-эталон:
════════════════════════════════════════════════════════════════════ */
.sidebar{
width: var(--sidebar-w); flex:none;
background: var(--bg-surface);
border-right:1px solid var(--line);
display:flex; flex-direction:column;
padding:20px 12px 12px;
position:sticky; top:0; height:100vh; z-index:40;
}
.logo{ display:flex; align-items:center; gap:10px; padding:0 10px; }
.logo-mark{
width:34px; height:34px; flex:none; border-radius: var(--r-1);
background:linear-gradient(135deg, #5B93D6 0%, var(--acc) 55%, #245488 100%);
color: var(--on-acc);
display:grid; place-items:center;
font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size:17px;
box-shadow: var(--ev-brand);
}
.logo-name{
font-family: var(--font-display);
font-weight: var(--fw-extrabold); font-size:16px; color: var(--t-1);
letter-spacing:.02em; line-height:1.2;
}
.logo-sub{
font-size: var(--fs-xs); color: var(--t-4); margin-top:1px;
font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform:uppercase;
}
.sidebar-nav{ margin-top:22px; display:flex; flex-direction:column; gap:2px; flex:1; }
.sidebar-nav a{
position:relative;
display:flex; align-items:center; gap:11px;
padding:10px 12px; border-radius: var(--r-1);
color: var(--t-2); text-decoration:none;
font-size: var(--fs-md); font-weight: var(--fw-medium);
transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.sidebar-nav a svg{
width:19px; height:19px; flex:none; stroke-width:1.8;
color: var(--t-3); transition: color var(--dur-1);
}
.sidebar-nav a:hover{ background: var(--surf-2); color: var(--t-1); }
.sidebar-nav a.active{
background: var(--acc-sk); color: var(--acc-ink); font-weight: var(--fw-semibold);
}
.sidebar-nav a.active svg{ color: var(--acc-ink); }
/* ════════════════════════════════════════════════════════════════════
БЕНТО-ГРИД И КАРТОЧКИ
3 колонки; плитки 3 размеров: 1×1 (.card), 2×1 (.span2), 3×1 (.span3).
1 плитка = 1 смысл. Размер плитки = приоритет информации.
════════════════════════════════════════════════════════════════════ */
.bento{
display:grid;
grid-template-columns: repeat(6, minmax(0,1fr));
gap: var(--gap);
}
.bento > *{ min-width:0; }
/* Старые модификаторы «Берега» на 3-колоночной логике = 2 и 3 доли из 6 */
.span2{ grid-column: span 4; }
.span3{ grid-column: span 6; }
.bento > .card{ grid-column: span 2; }
.bento > .card.span2{ grid-column: span 4; }
.bento > .card.span3{ grid-column: span 6; }
/* Плитки в терминах партнёрской ДС */
.b-hero{ grid-column: span 3; grid-row: span 2; }
.b-half{ grid-column: span 3; }
.b-wide{ grid-column: span 4; }
.b-tall{ grid-row: span 2; }
.b-full{ grid-column: 1 / -1; }
@media (max-width:1100px){
.bento{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.span2,.span3,.b-hero,.b-half,.b-wide,.b-full,
.bento > .card,.bento > .card.span2,.bento > .card.span3{ grid-column: span 2; }
.b-hero,.b-tall{ grid-row: auto; }
}
@media (max-width:720px){
.bento{ grid-template-columns:1fr; gap: var(--gap-mobile); }
.span2,.span3,.b-hero,.b-half,.b-wide,.b-full,
.bento > .card,.bento > .card.span2,.bento > .card.span3{ grid-column: span 1; }
}
.card{
background: var(--surf);
border:1px solid var(--line);
border-radius: var(--r-3);
box-shadow: var(--ev-2);
padding:20px 22px;
display:flex; flex-direction:column; min-width:0;
transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease);
}
.card-flat{ box-shadow:none; }
/* ── АКЦЕНТНАЯ ПЛИТКА · «небо» заливкой (герой бенто, 1 на экран) ── */
.card-accent{
background: linear-gradient(135deg, #2C64A8 0%, var(--acc) 55%, #5B93D6 100%);
border-color: transparent; color: var(--on-acc);
box-shadow: var(--ev-brand), var(--ev-2);
}
.card-accent h1,.card-accent h2,.card-accent h3,.card-accent h4,
.card-accent .stat-num{ color: var(--on-acc); }
.card-accent .card-label{ color: rgba(255,255,255,.72); }
.card-accent .stat-cap,.card-accent p,.card-accent .muted{ color: rgba(255,255,255,.82); }
/* ── ТЁМНАЯ ПЛИТКА · «ink» для служебных сводок ── */
.card-ink{ background: var(--ink); border-color:transparent; color: var(--t-inv); }
.card-ink h1,.card-ink h2,.card-ink h3,.card-ink h4,
.card-ink .stat-num{ color: var(--t-inv); }
.card-ink .card-label{ color: rgba(234,241,249,.55); }
.card-ink .stat-cap,.card-ink p,.card-ink .muted{ color: rgba(234,241,249,.72); }
/* ── ТЁПЛАЯ ПЛИТКА · поощрение (ДЗ клиентов) ── */
.card-warm{ background: var(--warm-bg); border-color: var(--warm-border); }
.card-warm .card-label{ color: var(--warm-ink); }
/* Интерактивная карточка — мягко приподнимается */
.card-clickable{
transition: box-shadow var(--transition-slow), transform var(--transition-slow),
border-color var(--transition-slow);
cursor:pointer;
}
.card-clickable:hover{
transform:translateY(-2px);
box-shadow: var(--ev-3);
border-color: var(--line-2);
}
.card-clickable:active{ transform:translateY(-1px) scale(.996); }
/* Каскадное появление плиток бенто — тихое, 1–3 карточка с задержкой */
@media (prefers-reduced-motion: no-preference){
@keyframes bento-in{
from{ opacity:0; transform:translateY(10px); }
to{ opacity:1; transform:none; }
}
.bento > .card{ animation:bento-in .35s ease-out backwards; }
.bento > .card:nth-child(2){ animation-delay:.04s; }
.bento > .card:nth-child(3){ animation-delay:.08s; }
.bento > .card:nth-child(4){ animation-delay:.12s; }
.bento > .card:nth-child(5){ animation-delay:.16s; }
.bento > .card:nth-child(n+6){ animation-delay:.2s; }
}
.card-head{
display:flex; align-items:center; justify-content:space-between;
gap:12px; margin-bottom:14px;
}
.card-label{
font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--t-4);
letter-spacing: var(--ls-caps); text-transform:uppercase;
}
.card-meta{ font-size: var(--fs-base); color: var(--t-3); }
.card-title{
font-family: var(--font-display); font-size: var(--fs-lg);
font-weight: var(--fw-bold); color: var(--t-1);
}
/* CTA-плитка v2: БЕЛАЯ карточка (заливки нет — правило «один акцент»).
Акцент несут только иконка в голубом квадратике и кнопка
(secondary, если на экране уже есть btn-primary). */
.card-cta{ background:var(--bg-surface); border-color:var(--border-hairline); }
.card-cta .cta-icon{
width:38px; height:38px; border-radius:var(--radius-m);
background:var(--bg-info-tint); color:var(--primary-600);
display:flex; align-items:center; justify-content:center;
}
.card-cta .cta-icon svg{ width:20px; height:20px; }
.card-cta h3{ margin-top:14px; font-size:var(--fs-h4); font-weight:600; }
.card-cta p{ margin-top:5px; margin-bottom:16px; font-size:var(--fs-small); color:var(--text-body); }
.card-cta .btn{ margin-top:auto; align-self:flex-start; }
/* Крупная цифра на плитке (деньги, счётчики) */
.stat-num{
font-family: var(--font-display);
font-size: clamp(24px, 2.4vw, 32px); font-weight: var(--fw-extrabold);
color: var(--t-1);
letter-spacing: var(--ls-tight); line-height: var(--lh-tight);
font-variant-numeric: tabular-nums;
}
.stat-num-sm{ font-size: var(--fs-2xl); }
.stat-cap{ font-size: var(--fs-base); color: var(--t-3); margin-top:2px; }
/* Дельта под цифрой (рост/падение/без изменений) */
.stat-delta{
font-size: var(--fs-sm); font-weight: var(--fw-semibold);
display:inline-flex; align-items:center; gap:3px; margin-top:4px;
}
.stat-delta.up{ color: var(--success-ink); }
.stat-delta.down{ color: var(--danger-ink); }
.stat-delta.flat{ color: var(--t-4); }
/* Ряд KPI-плиток над списком (как «Финансы» партнёрки) */
.kpi-row{
display:grid; gap: var(--gap);
grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
margin-bottom: var(--s-5);
}
.kpi-row .card{ padding:16px 18px; gap:2px; }
/* ════════════════════════════════════════════════════════════════════
КНОПКИ · .btn + .btn-primary / .btn-secondary / .btn-ghost / .btn-danger
.btn-primary — ОДИН на экран (правило одного акцента).
.btn-danger — ТОЛЬКО необратимые действия (удаление). Не для отмены.
════════════════════════════════════════════════════════════════════ */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
font-size: var(--fs-md); font-weight: var(--fw-semibold);
border-radius: var(--r-1); border:1px solid transparent;
padding:9px 16px; white-space:nowrap; user-select:none;
transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
transform var(--dur-1) var(--spring);
}
.btn svg{ width:16px; height:16px; flex:none; stroke-width:2; }
.btn:active{ transform:scale(.97); }
.btn-primary{ background: var(--acc); color: var(--on-acc); box-shadow: var(--ev-brand); }
.btn-primary:hover{ background: var(--acc-h); }
/* Мягкая — тонированная заливка акцентом, без бордера */
.btn-secondary{ background: var(--acc-sk); border-color:transparent; color: var(--acc-ink); }
.btn-secondary:hover{ background: var(--acc-sk-2); }
/* Призрачная — белая поверхность с бортом (второе действие в шапке) */
.btn-ghost{
background: var(--surf); border-color: var(--line-2); color: var(--t-2);
box-shadow: var(--ev-1);
}
.btn-ghost:hover{ background: var(--surf-2); border-color: var(--line-3); color: var(--t-1); }
/* Тёмная — редкое «второе главное» действие */
.btn-dark{ background: var(--ink); color: var(--t-inv); }
.btn-dark:hover{ background: var(--ink-2); }
.btn-danger{ background: var(--danger-sk); border-color:transparent; color: var(--danger-ink); }
.btn-danger:hover{ background: var(--danger-sk-2); }
/* Кнопки поверх акцентной плитки */
.btn-on-accent{ background: rgba(255,255,255,.95); color: var(--acc-h); }
.btn-on-accent:hover{ background:#FFFFFF; }
.btn-on-accent-ghost{ background: rgba(255,255,255,.18); color: var(--on-acc); }
.btn-on-accent-ghost:hover{ background: rgba(255,255,255,.28); }
.btn-sm{ padding:6px 11px; font-size: var(--fs-base); border-radius:8px; }
.btn-lg{ padding:12px 22px; font-size: var(--fs-lg); border-radius: var(--r-2); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; }
/* Иконочная кнопка (шапка, строки списков) */
.icon-btn{
position:relative; width:38px; height:38px; border-radius: var(--r-1);
display:grid; place-items:center;
background: var(--surf); border:1px solid var(--line-2);
color: var(--t-2); box-shadow: var(--ev-1);
transition: border-color var(--dur-1), background var(--dur-1), color var(--dur-1);
}
.icon-btn:hover{ border-color: var(--line-3); background: var(--surf-2); color: var(--t-1); }
.icon-btn svg{ width:18px; height:18px; stroke-width:1.8; }
/* ════════════════════════════════════════════════════════════════════
СТАТУСЫ · .status — ЕДИНСТВЕННЫЙ способ показывать состояние строки
(оплата, выполнено, пакет, ожидание). Точка 6px + текст; цвет только
у точки и текста. БЕЗ заливки, БЕЗ бордера, БЕЗ пилюль.
Разметка-эталон:
Оплачено
Не оплачено
Пакет · 3 из 5
Архив
════════════════════════════════════════════════════════════════════ */
.status{
display:inline-flex; align-items:center; gap:7px;
font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--t-3);
white-space:nowrap;
}
.status i{
width:6px; height:6px; border-radius:50%; background:var(--border-strong); flex:none;
box-shadow:0 0 0 3px rgba(201,214,229,.25);
}
.status-ok i{ box-shadow:0 0 0 3px rgba(53,119,200,.16); }
.status-wait i{ box-shadow:0 0 0 3px rgba(201,138,46,.16); }
.status-info i{ box-shadow:0 0 0 3px rgba(91,147,214,.18); }
.status-ok { color: var(--success-ink); } .status-ok i { background: var(--success); }
.status-wait{ color: var(--warn-ink); } .status-wait i{ background: var(--warn-bright); }
.status-info{ color: var(--acc-ink); } .status-info i{ background: var(--acc-soft); }
.status-risk{ color: var(--danger-ink); } .status-risk i{ background: var(--danger); }
/* ════════════════════════════════════════════════════════════════════
БЕЙДЖ · .badge — нейтральная пилюля БЕЗ заливки цветом.
ТОЛЬКО для редких пометок вне статусной логики: «архив», «скоро».
Статусы → .status. Риск → .risk-badge. Цветных бейджей в v2 нет.
════════════════════════════════════════════════════════════════════ */
.badge{
display:inline-flex; align-items:center; gap:5px;
font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height:1.5;
border-radius: var(--r-pill);
padding:3px 9px; white-space:nowrap;
color: var(--t-3); background: var(--surf-2);
border:1px solid transparent;
}
.badge-blue { background: var(--acc-sk); color: var(--acc-ink); }
.badge-ok,
.badge-green{ background: var(--success-sk); color: var(--success-ink); } /* подтверждено — синий */
.badge-neutral{ background: var(--neutral-sk); color: var(--neutral-ink); }
.badge-amber{ background: var(--warn-sk); color: var(--warn-ink); }
.badge-red { background: var(--danger-sk); color: var(--danger-ink); }
.badge-gray { background: var(--surf-2); color: var(--t-3); }
.badge-ink { background: var(--ink); color: var(--t-inv); }
.badge-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
/* ════════════════════════════════════════════════════════════════════
РИСК-БЕЙДЖ · .risk-badge — сохранён из v1 без изменений (он хорош).
3 уровня: нейтральный → наблюдение (янтарь) → острое состояние (кирпич).
Форма: белая поверхность + ЛЕВЫЙ БОРДЕР 3px. Всегда с источником и датой.
Разметка-эталон:
Наблюдениеотмечено 12.07 · GAD-7 = 11
════════════════════════════════════════════════════════════════════ */
.risk-badge{
display:inline-flex; align-items:baseline; gap:8px;
padding:6px 12px 6px 10px;
background:var(--bg-surface);
border:1px solid var(--border-hairline);
border-left:3px solid var(--border-strong); /* нейтральный уровень по умолчанию */
border-radius:var(--radius-s);
white-space:nowrap;
}
.risk-badge b{ font-size:var(--fs-label); font-weight:600; color:var(--text-secondary); }
.risk-badge .risk-meta{ font-size:var(--fs-caption); color:var(--text-secondary); }
.risk-badge-watch{ border-left-color:var(--warning-dot); }
.risk-badge-watch b{ color:var(--warning-text); }
.risk-badge-acute{ background:var(--danger-bg); border-color:var(--danger-border); border-left-color:var(--danger-text); }
.risk-badge-acute b{ color:var(--danger-text); }
/* ════════════════════════════════════════════════════════════════════
ПЛАШКИ · .panel-info (голубая) и .panel-warm (тёплая)
.panel-info — МАКСИМУМ ОДНА НА ЭКРАН. Заметки терапевта,
«на прошлой сессии», единственная подсказка экрана.
.panel-warm — РОВНО 2 места в продукте: «Сегодня → ДЗ клиентов»
и SOS-экран клиента. Больше нигде.
Радиус 12 — концентрично внутри плитки 16.
════════════════════════════════════════════════════════════════════ */
.panel-info, .panel-warm{
border-radius: var(--r-2);
padding:14px 16px;
border:1px solid;
}
.panel-info{ background: var(--acc-sk); border-color: var(--acc-bd); }
.panel-warm{ background: var(--warm-bg); border-color: var(--warm-border); }
.panel-label{
font-size: var(--fs-xs); font-weight: var(--fw-semibold); margin-bottom:4px;
letter-spacing: var(--ls-caps); text-transform:uppercase;
}
.panel-info .panel-label{ color: var(--acc-ink); }
.panel-warm .panel-label{ color: var(--warm-ink); }
.panel-info p, .panel-warm p{ font-size: var(--fs-body); color: var(--t-2); }
/* ════════════════════════════════════════════════════════════════════
ТЕГИ · .tag — НЕЙТРАЛЬНЫЙ: серый текст + hairline-бордер, без заливки.
Темы запроса, направления техник, метки. Категории цветом НЕ кодируются
(6-цветной палитры направлений в v2 не существует).
.is-selected — только выбранный фильтр-фасет.
════════════════════════════════════════════════════════════════════ */
.tag{
display:inline-flex; align-items:center; gap:7px;
font-size: var(--fs-base); font-weight: var(--fw-medium); line-height:1.5;
border-radius: var(--r-pill);
padding:7px 13px; white-space:nowrap;
background: var(--surf); color: var(--t-2);
border:1px solid var(--line-2);
transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
color var(--dur-1) var(--ease), transform var(--dur-1) var(--spring);
user-select:none;
}
.tag.is-selected{
background: var(--ink); border-color: var(--ink); color: var(--t-inv);
font-weight: var(--fw-semibold);
}
button.tag:hover:not(.is-selected){ border-color: var(--line-3); color: var(--t-1); }
button.tag:active{ transform:scale(.97); }
.tag-n{
font-size: var(--fs-xs); color: var(--t-4);
font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
.tag.is-selected .tag-n{ color: rgba(234,241,249,.62); }
/* Плотный ряд фильтров */
.tags{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
/* ════════════════════════════════════════════════════════════════════
ТАБЫ · .tabs > .tab (aria-selected="true|false")
════════════════════════════════════════════════════════════════════ */
.tabs{
display:inline-flex; gap:2px; padding:3px;
background: var(--surf-2);
border:1px solid transparent;
border-radius: var(--r-1);
}
.tab{
border:0; background:transparent;
font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--t-3);
padding:6px 13px; border-radius:8px;
transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.tab:hover{ color: var(--t-1); }
.tab[aria-selected="true"], .tab[aria-current="page"]{
background: var(--surf); color: var(--t-1); font-weight: var(--fw-semibold);
box-shadow: var(--ev-1);
}
/* ════════════════════════════════════════════════════════════════════
ПРОГРЕСС-БАР · .bar > i (ширина инлайн-стилем) · .bar-warm — в тёплой плашке
════════════════════════════════════════════════════════════════════ */
.bar{
height:8px; border-radius: var(--r-pill);
background: var(--surf-3); overflow:hidden;
margin:14px 0 4px;
}
.bar i{
display:block; height:100%; border-radius: var(--r-pill);
background: linear-gradient(90deg, var(--acc-soft), var(--acc));
transition: width var(--dur-3) var(--ease);
}
.bar-warm{ background: var(--warm-track); }
/* Тонкий вариант — доля внутри строки списка, без легенды и подписи */
.bar-thin{ height:3px; margin:2px 0 0; }
.bar-warm i{ background: linear-gradient(90deg, #E0A94C, var(--warn-bright)); }
.bar-ok i{ background: linear-gradient(90deg, var(--acc-soft), var(--acc)); }
.bar-legend{ font-size: var(--fs-sm); color: var(--t-3); }
/* ════════════════════════════════════════════════════════════════════
СПИСКИ-СТРОКИ · .list > .list-row (сессии, «требует внимания» и т.п.)
Ритм строк — 12px по вертикали.
════════════════════════════════════════════════════════════════════ */
.list{ display:flex; flex-direction:column; }
.list-row{
display:flex; align-items:center; gap:12px;
padding:12px 2px;
}
.list-row + .list-row{ border-top:1px solid var(--line); }
.list-row .row-time{
width:56px; flex:none;
font-family: var(--font-display);
font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--t-1);
font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight);
}
.list-row .row-name{ font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--t-1); }
.list-row .row-text{ flex:1; min-width:0; font-size: var(--fs-md); color: var(--t-2); }
.list-row .row-sub{ font-size: var(--fs-base); color: var(--t-3); }
/* Иконка-плашка слева в строке списка (как логотипы в заказах партнёрки) */
.row-ic{
width:38px; height:38px; flex:none; border-radius: var(--r-2);
display:grid; place-items:center;
background: var(--acc-sk); color: var(--acc-ink);
}
.row-ic svg{ width:19px; height:19px; }
.row-ic-warm{ background: var(--warn-sk); color: var(--warn-ink); }
.row-ic-ok{ background: var(--success-sk); color: var(--success-ink); }
.row-ic-neutral{ background: var(--neutral-sk); color: var(--neutral-ink); }
.row-ic-risk{ background: var(--danger-sk); color: var(--danger-ink); }
.row-ic-gray{ background: var(--surf-2); color: var(--t-3); }
/* Янтарная точка-индикатор строки («требует внимания») — 6px, как в .status */
.row-dot{ width:6px; height:6px; border-radius:50%; background:var(--warning-dot); flex:none; }
/* ════════════════════════════════════════════════════════════════════
КЛИКАБЕЛЬНАЯ СТРОКА · .clickable-row
v2: строки списков и таблиц открывают карточку САМИ — кнопок
«Открыть» в строках не существует. Вешается на .list-row / tr.
════════════════════════════════════════════════════════════════════ */
.clickable-row{ cursor:pointer; transition: background var(--dur-1) var(--ease); }
.clickable-row:hover{ background: var(--surf-2); }
.clickable-row:focus-visible{ outline:2px solid var(--acc); outline-offset:-2px; }
/* ════════════════════════════════════════════════════════════════════
ТАБЛИЦА · .table-wrap > table.table (строки с hover)
════════════════════════════════════════════════════════════════════ */
.table-wrap{
background: var(--surf);
border:1px solid var(--line);
border-radius: var(--r-3);
box-shadow: var(--ev-2);
overflow-x:auto;
}
.table{ width:100%; border-collapse:collapse; font-size: var(--fs-md); }
.table th{
text-align:left; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
color: var(--t-4); letter-spacing: var(--ls-caps); text-transform:uppercase;
padding:11px 16px;
border-bottom:1px solid var(--line);
white-space:nowrap;
}
.table td{
padding:13px 16px;
border-bottom:1px solid var(--line);
color: var(--t-2); vertical-align:middle;
}
.table tbody tr:last-child td{ border-bottom:none; }
.table tbody tr{ transition: background var(--dur-1) var(--ease); }
.table tbody tr:hover{ background: var(--surf-2); }
.table tbody tr.is-selected{ background: var(--acc-sk); }
.table .cell-name{ font-weight: var(--fw-semibold); color: var(--t-1); }
/* Правые колонки с числами выравнивать по правому краю: */
.table .cell-num{ text-align:right; }
/* ════════════════════════════════════════════════════════════════════
ФОРМЫ · .field > .field-label + .input/.select + .field-hint/.field-error
Ошибки: кирпичный бордер + inline-текст у поля. НИКОГДА красные плашки.
════════════════════════════════════════════════════════════════════ */
.field{ display:flex; flex-direction:column; gap:6px; }
.field-label{ font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--t-2); }
.field-hint{ font-size: var(--fs-sm); color: var(--t-4); }
.field-error{ font-size: var(--fs-base); color: var(--danger-ink); }
.input, .select, .textarea{
width:100%;
font-size: var(--fs-body); color: var(--t-1);
background: var(--surf);
border:1px solid var(--line-2);
border-radius: var(--r-1);
padding:9px 12px;
appearance:none;
transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.input::placeholder, .textarea::placeholder{ color: var(--t-4); }
.input:hover, .select:hover, .textarea:hover{ border-color: var(--line-3); }
.input:focus, .select:focus, .textarea:focus{
outline:none;
border-color: var(--acc);
box-shadow:0 0 0 3px var(--acc-sk-2);
}
/* Состояние ошибки: .is-error или aria-invalid="true" */
.input.is-error, .input[aria-invalid="true"],
.select.is-error, .select[aria-invalid="true"],
.textarea.is-error, .textarea[aria-invalid="true"]{
border-color: var(--danger);
}
.input.is-error:focus, .input[aria-invalid="true"]:focus{
box-shadow:0 0 0 3px var(--danger-sk-2);
}
/* Поле с иконкой поиска слева */
.input-ic{ position:relative; }
.input-ic > svg{
position:absolute; left:12px; top:50%; transform:translateY(-50%);
width:16px; height:16px; color: var(--t-4); pointer-events:none;
}
.input-ic .input{ padding-left:36px; }
.textarea{ min-height:88px; resize:vertical; line-height:1.5; }
.select{
appearance:none;
padding-right:34px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236C8095' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 12px center;
}
/* Тумблер · */
.toggle{
position:relative;
display:inline-flex; align-items:center; gap:10px;
cursor:pointer; font-size: var(--fs-md); color: var(--t-2);
}
.toggle input{ position:absolute; opacity:0; width:1px; height:1px; }
.toggle-track{
position:relative; width:40px; height:23px; flex:none;
border-radius: var(--r-pill);
background: var(--control-off);
transition: background var(--dur-2) var(--ease);
}
.toggle-track::after{
content:""; position:absolute; top:2.5px; left:2.5px;
width:18px; height:18px; border-radius:50%;
background:#FFFFFF; box-shadow: var(--ev-1);
transition: transform var(--dur-2) var(--spring);
}
.toggle input:checked + .toggle-track{ background: var(--acc); }
.toggle input:checked + .toggle-track::after{ transform:translateX(17px); }
.toggle input:focus-visible + .toggle-track{
outline:2px solid var(--acc); outline-offset:2px;
}
/* ════════════════════════════════════════════════════════════════════
ПУСТОЕ СОСТОЯНИЕ · .empty-state
Формула v2: иконка спрайта (24px, muted, в тихом кружке 40px)
+ 1 фраза почему пусто (+ опционально 1 CTA).
БЕЗ эмодзи, без восклицаний, без «Нет данных».
Разметка-эталон:
На сегодня сессий больше нет
════════════════════════════════════════════════════════════════════ */
.empty-state{
display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; padding:26px 16px 18px;
}
.empty-state-icon{
width:52px; height:52px; border-radius: var(--r-2);
background: var(--surf-2); color: var(--t-4);
display:grid; place-items:center;
}
.empty-state-icon svg{ width:24px; height:24px; stroke-width:1.6; }
.empty-state-title{
margin-top:14px; font-family: var(--font-display);
font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--t-1);
}
.empty-state-text{
margin-top:5px; font-size: var(--fs-md); color: var(--t-3);
max-width:380px; margin-inline:auto;
}
.empty-state .btn{ margin-top:14px; }
/* ════════════════════════════════════════════════════════════════════
АВАТАР · .avatar (44px) · .avatar-s (34px)
════════════════════════════════════════════════════════════════════ */
.avatar{
width:44px; height:44px; border-radius: var(--r-2); flex:none;
background: linear-gradient(140deg, #E7F0FB 0%, #CFE2F6 100%);
border:1px solid rgba(53,119,200,.16);
color: var(--acc-ink);
display:grid; place-items:center;
font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg);
}
.avatar-s{ width:32px; height:32px; border-radius:9px; font-size: var(--fs-base); }
.avatar-l{ width:56px; height:56px; border-radius: var(--r-2); font-size: var(--fs-2xl); }
/* Разделитель */
.divider{ border:0; height:1px; background: var(--line); }
/* Только для скринридера: подписи таблиц и пояснения, которые на экране
были бы лишним шумом, а на слух — единственной опорой */
.sr-only{
position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* ════════════════════════════════════════════════════════════════════
ТОСТ · .toast — подтверждение выполненного действия, внизу по центру.
Создаётся и управляется функцией toast(text) из demo.js.
════════════════════════════════════════════════════════════════════ */
.toast{
position:fixed; left:50%; bottom:28px;
transform:translateX(-50%) translateY(8px);
background: var(--ink); color: var(--t-inv);
font-size: var(--fs-md); font-weight: var(--fw-medium);
padding:13px 20px; border-radius: var(--r-2);
box-shadow: var(--ev-4);
opacity:0; pointer-events:none; white-space:nowrap;
transition: opacity var(--transition-slow), transform var(--transition-slow);
z-index:1000;
}
.toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }
/* ════════════════════════════════════════════════════════════════════
ДЕМО-РЕЖИМ · body.demo (управляется demo.js, localStorage 'bereg_demo')
.demo-hide — чувствительный блок (красная зона, журнал, доходы):
при body.demo содержимое размыто blur(6px) + подпись поверх.
Вешать на блочный контейнер; голые текстовые узлы demo.js сам
оборачивает в span, чтобы блюр их накрыл.
Имена клиентов маскируются НЕ этим классом, а атрибутом
data-name (см. demo.js).
════════════════════════════════════════════════════════════════════ */
body.demo .demo-hide{ position:relative; }
body.demo .demo-hide > *{
filter:blur(6px);
pointer-events:none; user-select:none;
}
body.demo .demo-hide::after{
content:"скрыто в режиме демонстрации";
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
font-size:var(--fs-caption); font-weight:500; color:var(--text-secondary);
text-align:center;
}
/* Тумблер демо-режима (рендерится demo.js в шапку страницы) */
.demo-toggle > span:last-child{
font-size:var(--fs-label); font-weight:500; color:var(--text-secondary);
}
/* ════════════════════════════════════════════════════════════════════
АДАПТИВ (страховочные брейкпоинты; прототип десктоп-first 1280–1440)
════════════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
.main-inner{ padding:22px 22px 92px; }
}
@media (max-width:720px){
.main-inner{ padding:18px 16px 88px; }
.kpi-row{ grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: var(--gap-mobile); }
}
|