/* =====================================================================
Plativi — дизайн-система личного кабинета и операторского интерфейса
Описание классов и разметки: docs/lk/design-system.md
CSP: только внешние файлы. Никаких inline-стилей в шаблонах.
===================================================================== */
/* ---------- 0. Шрифт (self-host, OFL) ---------- */
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("fonts/manrope-cyrillic.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("fonts/manrope-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("fonts/manrope-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- 1. Токены ---------- */
:root {
color-scheme: dark;
/* Слои фона: от «стола» к приподнятым поверхностям */
--bg: oklch(14% .02 255);
--bg-side: oklch(16.5% .022 255);
--surface: oklch(18.5% .02 255);
--surface-2: oklch(21.5% .02 255);
--surface-3: oklch(24.5% .02 255);
--sunken: oklch(12.5% .02 255);
--line: oklch(28% .02 255);
--line-2: oklch(35% .024 255);
/* Текст */
--fg: oklch(97% .006 240);
--fg-2: oklch(87% .012 245);
--muted: oklch(70% .02 255);
--faint: oklch(62% .02 255);
/* Бренд */
--brand: oklch(72% .17 155);
--brand-hi: oklch(78% .16 155);
--brand-ink: oklch(18% .035 160);
--cyan: oklch(78% .13 210);
--cyan-hi: oklch(84% .11 210);
--cyan-ink: oklch(18% .035 220);
/* Семантика */
--ok: oklch(77% .15 155);
--err: oklch(56% .2 25); /* белый текст на сплошной красной кнопке — 4.85:1 (AA) */
--err-fg: oklch(80% .12 25);
--warn: oklch(82% .15 80);
--info: var(--cyan);
/* Акцент интерфейса (оператор меняет на циан) */
--accent: var(--brand);
--accent-hi: var(--brand-hi);
--accent-ink: var(--brand-ink);
--focus: oklch(86% .12 205);
/* Радиусы: чем крупнее объект, тем больше радиус */
--r-xs: 6px;
--r-s: 8px;
--r-m: 10px;
--r-l: 14px;
--r-xl: 18px;
/* Отступы (4-пиксельная сетка) */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
/* Типографика */
--font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
--t-xs: 12px; --t-s: 13px; --t-m: 15px; --t-l: 17px;
--t-xl: 20px; --t-2xl: 24px; --t-3xl: 30px; --t-4xl: 40px;
--control-h: 44px;
--control-h-sm: 36px;
--sidebar-w: 256px;
--page-max: 1240px;
--shadow-pop: 0 18px 50px -12px oklch(5% .02 255 / .7), 0 0 0 1px var(--line-2);
--ease: cubic-bezier(.2, .7, .2, 1);
/* Роли цвета, которые в светлой теме расходятся с «заливкой» (раздел «Темы» в design-system.md).
В тёмной теме равны прежним значениям — тёмная тема от них не меняется. */
--accent-fg: var(--accent); /* акцент как текст/иконка/тонкая линия на поверхности */
--brand-fg: var(--brand-hi); /* зелёный текст (роль «Владелец», строки в коде, «Защищённое поле») */
--cyan-fg: var(--cyan-hi); /* циановый текст вне ссылок (роль «Администратор») */
--link: var(--cyan); /* текст ссылок */
--link-hi: var(--cyan-hi);
--warn-fg: var(--warn); /* жёлтый текст: «Требует сверки», счётчик в меню */
--warn-ink: oklch(20% .04 80); /* галочка на жёлтой заливке */
--err-hi: oklch(52% .2 25); /* hover сплошной красной кнопки (темнее — контраст растёт) */
--on-err: oklch(98% .01 25); /* текст на красной заливке */
--op-accent-fg: var(--cyan);
--op-bg-side: oklch(17% .03 225);
--field: var(--sunken); /* фон полей ввода, чекбоксов */
--field-off: var(--surface); /* фон выключенного поля */
--control-line: oklch(50% .025 255); /* рамка полей, чекбоксов, радио — 3.4:1 к фону поля (WCAG 1.4.11) */
--control-line-hi: oklch(42% .025 255);
--btn-hover: oklch(28% .02 255);
--seg-on: var(--surface-3); /* выбранный сегмент (.seg, .theme-switch) */
--seg-on-shadow: 0 1px 0 oklch(40% .02 255) inset;
--scrim: oklch(8% .02 255 / .6); /* подложка под выезжающим меню */
--scrim-dialog: oklch(8% .02 255 / .72);
--vault-field: oklch(10.5% .02 255);
--vault-ph: oklch(45% .02 255);
--badge-mix: 80%; /* доля цвета статуса в тексте бейджа (остальное — --fg) */
--ink-soft: 75%; /* приглушённый текст на акцентной заливке */
--chevron: url("data:image/svg+xml,");
}
/* LIGHT-TOKENS:BEGIN — три одинаковых блока: явный выбор, системная тема, печать.
Меняете значение — меняйте во всех трёх (проверка: docs/lk/design-system.md, «Темы»). */
:root[data-theme="light"] {
color-scheme: light;
/* Слои: холодная «бумага ведомости» → белые карточки */
--bg: oklch(97.3% .005 250);
--bg-side: oklch(95.4% .008 250);
--surface: oklch(100% 0 0);
--surface-2: oklch(98.4% .004 250);
--surface-3: oklch(94.6% .008 250);
--sunken: oklch(96.6% .006 250);
--line: oklch(90.5% .009 250);
--line-2: oklch(84% .012 250);
/* Текст */
--fg: oklch(22% .02 255);
--fg-2: oklch(35% .02 255);
--muted: oklch(47.5% .02 255);
--faint: oklch(52% .018 255);
/* Бренд: заливка темнее на 9 L, чтобы кнопка держала 3:1 к фону; текст — отдельным токеном */
--brand: oklch(63% .165 152);
--brand-hi: oklch(59% .16 152);
--brand-ink: oklch(18% .035 160);
--brand-fg: oklch(48% .13 152);
--cyan: oklch(63.5% .12 218);
--cyan-hi: oklch(59.5% .115 220);
--cyan-ink: oklch(18% .035 220);
--cyan-fg: oklch(47% .1 228);
--link: oklch(48% .115 235);
--link-hi: oklch(40% .11 240);
/* Семантика: цвета «для текста», заливки из них же */
--ok: oklch(50% .13 152);
--err: oklch(55% .2 27);
--err-fg: oklch(50% .19 27);
--err-hi: oklch(49% .19 27);
--on-err: oklch(99% .005 25);
--warn: oklch(56% .13 65);
--warn-fg: oklch(48% .115 62);
--warn-ink: oklch(99% .005 80);
--info: oklch(50% .1 232);
--accent-fg: var(--brand-fg);
--op-accent-fg: var(--cyan-fg);
--op-bg-side: oklch(95% .016 220);
--focus: oklch(50% .15 245);
/* Контролы */
--field: oklch(100% 0 0);
--field-off: var(--surface-3);
--control-line: oklch(63% .02 255);
--control-line-hi: oklch(45% .02 255);
--btn-hover: oklch(91.5% .01 250);
--seg-on: var(--surface);
--seg-on-shadow: 0 1px 2px oklch(30% .03 255 / .16), 0 0 0 1px var(--line-2);
--scrim: oklch(25% .03 255 / .38);
--scrim-dialog: oklch(25% .03 255 / .5);
--vault-field: oklch(100% 0 0);
--vault-ph: oklch(52% .018 255);
--badge-mix: 62%;
--ink-soft: 90%;
--chevron: url("data:image/svg+xml,");
--shadow-pop: 0 18px 44px -14px oklch(30% .04 255 / .28), 0 0 0 1px var(--line-2);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
color-scheme: light;
/* Слои: холодная «бумага ведомости» → белые карточки */
--bg: oklch(97.3% .005 250);
--bg-side: oklch(95.4% .008 250);
--surface: oklch(100% 0 0);
--surface-2: oklch(98.4% .004 250);
--surface-3: oklch(94.6% .008 250);
--sunken: oklch(96.6% .006 250);
--line: oklch(90.5% .009 250);
--line-2: oklch(84% .012 250);
/* Текст */
--fg: oklch(22% .02 255);
--fg-2: oklch(35% .02 255);
--muted: oklch(47.5% .02 255);
--faint: oklch(52% .018 255);
/* Бренд: заливка темнее на 9 L, чтобы кнопка держала 3:1 к фону; текст — отдельным токеном */
--brand: oklch(63% .165 152);
--brand-hi: oklch(59% .16 152);
--brand-ink: oklch(18% .035 160);
--brand-fg: oklch(48% .13 152);
--cyan: oklch(63.5% .12 218);
--cyan-hi: oklch(59.5% .115 220);
--cyan-ink: oklch(18% .035 220);
--cyan-fg: oklch(47% .1 228);
--link: oklch(48% .115 235);
--link-hi: oklch(40% .11 240);
/* Семантика: цвета «для текста», заливки из них же */
--ok: oklch(50% .13 152);
--err: oklch(55% .2 27);
--err-fg: oklch(50% .19 27);
--err-hi: oklch(49% .19 27);
--on-err: oklch(99% .005 25);
--warn: oklch(56% .13 65);
--warn-fg: oklch(48% .115 62);
--warn-ink: oklch(99% .005 80);
--info: oklch(50% .1 232);
--accent-fg: var(--brand-fg);
--op-accent-fg: var(--cyan-fg);
--op-bg-side: oklch(95% .016 220);
--focus: oklch(50% .15 245);
/* Контролы */
--field: oklch(100% 0 0);
--field-off: var(--surface-3);
--control-line: oklch(63% .02 255);
--control-line-hi: oklch(45% .02 255);
--btn-hover: oklch(91.5% .01 250);
--seg-on: var(--surface);
--seg-on-shadow: 0 1px 2px oklch(30% .03 255 / .16), 0 0 0 1px var(--line-2);
--scrim: oklch(25% .03 255 / .38);
--scrim-dialog: oklch(25% .03 255 / .5);
--vault-field: oklch(100% 0 0);
--vault-ph: oklch(52% .018 255);
--badge-mix: 62%;
--ink-soft: 90%;
--chevron: url("data:image/svg+xml,");
--shadow-pop: 0 18px 44px -14px oklch(30% .04 255 / .28), 0 0 0 1px var(--line-2);
}
}
/* LIGHT-TOKENS:END */
/* ---------- 2. База ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font: 400 var(--t-m)/1.5 var(--font);
font-feature-settings: "cv01", "ss01";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: -.012em; }
h1 { font-size: var(--t-3xl); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); }
p { margin: 0 0 var(--s-3); max-width: 72ch; }
p:last-child { margin-bottom: 0; }
a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--link) 40%, transparent); text-underline-offset: .18em; }
a:hover { color: var(--link-hi); text-decoration-color: currentColor; }
small { font-size: var(--t-s); }
hr, .sep { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
code, kbd, samp, pre { font-family: var(--mono); font-size: .92em; }
::selection { background: color-mix(in oklab, var(--brand) 40%, transparent); color: var(--fg); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
.sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: var(--s-3); top: -60px; z-index: 100;
background: var(--fg); color: var(--bg); padding: var(--s-2) var(--s-4);
border-radius: var(--r-s); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--s-3); }
/* ---------- 3. Иконки (маска data:URI, цвет = currentColor) ---------- */
.i {
display: inline-block; flex: none;
width: 20px; height: 20px;
background-color: currentColor;
-webkit-mask: var(--i) center / contain no-repeat;
mask: var(--i) center / contain no-repeat;
}
.i--sm { width: 16px; height: 16px; }
.i--lg { width: 24px; height: 24px; }
.i--xl { width: 32px; height: 32px; }
.i--home { --i: url("data:image/svg+xml,"); }
.i--send { --i: url("data:image/svg+xml,"); }
.i--list { --i: url("data:image/svg+xml,"); }
.i--stack { --i: url("data:image/svg+xml,"); }
.i--upload { --i: url("data:image/svg+xml,"); }
.i--download{ --i: url("data:image/svg+xml,"); }
.i--pin { --i: url("data:image/svg+xml,"); }
.i--users { --i: url("data:image/svg+xml,"); }
.i--user { --i: url("data:image/svg+xml,"); }
.i--clock { --i: url("data:image/svg+xml,"); }
.i--key { --i: url("data:image/svg+xml,"); }
.i--building{ --i: url("data:image/svg+xml,"); }
.i--logout { --i: url("data:image/svg+xml,"); }
.i--plus { --i: url("data:image/svg+xml,"); }
.i--search { --i: url("data:image/svg+xml,"); }
.i--copy { --i: url("data:image/svg+xml,"); }
.i--check { --i: url("data:image/svg+xml,"); }
.i--x { --i: url("data:image/svg+xml,"); }
.i--alert { --i: url("data:image/svg+xml,"); }
.i--info { --i: url("data:image/svg+xml,"); }
.i--ok { --i: url("data:image/svg+xml,"); }
.i--err { --i: url("data:image/svg+xml,"); }
.i--lock { --i: url("data:image/svg+xml,"); }
.i--card { --i: url("data:image/svg+xml,"); }
.i--shield { --i: url("data:image/svg+xml,"); }
.i--calendar{ --i: url("data:image/svg+xml,"); }
.i--file { --i: url("data:image/svg+xml,"); }
.i--refresh { --i: url("data:image/svg+xml,"); }
.i--ban { --i: url("data:image/svg+xml,"); }
.i--eye { --i: url("data:image/svg+xml,"); }
.i--sliders { --i: url("data:image/svg+xml,"); }
.i--inbox { --i: url("data:image/svg+xml,"); }
.i--code { --i: url("data:image/svg+xml,"); }
.i--id { --i: url("data:image/svg+xml,"); }
.i--menu { --i: url("data:image/svg+xml,"); }
.i--more { --i: url("data:image/svg+xml,"); }
.i--chev-r { --i: url("data:image/svg+xml,"); }
.i--chev-l { --i: url("data:image/svg+xml,"); }
.i--chev-d { --i: url("data:image/svg+xml,"); }
.i--sort { --i: url("data:image/svg+xml,"); }
.i--sort-up { --i: url("data:image/svg+xml,"); }
.i--sort-down{ --i: url("data:image/svg+xml,"); }
.i--grid { --i: url("data:image/svg+xml,"); }
.i--edit { --i: url("data:image/svg+xml,"); }
/* ---------- 4. Оболочка приложения ---------- */
.app {
min-height: 100vh;
display: grid;
grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
grid-template-areas: "side main";
}
.app--bare { display: block; }
.topbar { display: none; }
.tabbar { display: none; }
.nav-backdrop { display: none; }
.sidebar {
grid-area: side;
position: sticky; top: 0;
height: 100vh;
display: flex; flex-direction: column;
background: var(--bg-side);
border-right: 1px solid var(--line);
overflow-y: auto;
overscroll-behavior: contain;
}
.sidebar__brand {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
padding: var(--s-5) var(--s-5) var(--s-4);
}
.sidebar .sidebar__close { display: none; }
.brand { display: inline-flex; align-items: center; color: var(--fg); text-decoration: none; }
.brand:hover { color: var(--fg); }
.brand__logo { height: 30px; width: auto; }
/* Блок организации (переключатель) */
.org {
margin: 0 var(--s-3) var(--s-3);
padding: var(--s-3);
border-radius: var(--r-l);
background: var(--surface);
border: 1px solid var(--line);
display: grid; gap: 2px;
color: inherit; text-decoration: none;
}
a.org:hover { border-color: var(--line-2); color: inherit; }
.org__name { font-weight: 700; font-size: var(--t-m); line-height: 1.25; overflow-wrap: anywhere; }
.org__meta { font-size: var(--t-s); color: var(--muted); font-variant-numeric: tabular-nums; }
.org__status { margin-top: var(--s-2); display: flex; flex-wrap: wrap; gap: 4px; }
/* Навигация */
.nav { padding: var(--s-2) var(--s-3); display: grid; gap: var(--s-4); flex: 1; align-content: start; }
.nav__group { display: grid; gap: 2px; }
.nav__title { padding: 0 var(--s-3) var(--s-1); font-size: var(--t-xs); font-weight: 600; color: var(--faint); }
.nav__link {
position: relative;
display: flex; align-items: center; gap: var(--s-3);
min-height: 40px;
padding: var(--s-2) var(--s-3);
border-radius: var(--r-m);
color: var(--fg-2);
font-weight: 600; font-size: 14.5px;
text-decoration: none;
}
.nav__link .i { color: var(--muted); }
.nav__link:hover { background: var(--surface); color: var(--fg); }
.nav__link[aria-current="page"] {
background: color-mix(in oklab, var(--accent) 13%, var(--bg-side));
color: var(--fg);
}
.nav__link[aria-current="page"] .i { color: var(--accent-fg); }
.nav__link[aria-current="page"]::before {
content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
border-radius: 0 3px 3px 0; background: var(--accent-fg);
}
.nav__count {
margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px;
display: inline-grid; place-items: center;
border-radius: var(--r-xs);
background: var(--surface-3); color: var(--fg-2);
font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.nav__count--alert { background: color-mix(in oklab, var(--warn) 22%, var(--bg-side)); color: var(--warn-fg); }
.sidebar__foot {
border-top: 1px solid var(--line);
padding: var(--s-3);
display: flex; align-items: center; gap: var(--s-2);
}
.user { display: flex; align-items: center; gap: var(--s-3); min-width: 0; flex: 1; }
.user__text { display: grid; min-width: 0; }
.user__name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user__role { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
flex: none; width: 36px; height: 36px; border-radius: 50%;
display: grid; place-items: center;
background: var(--surface-3); color: var(--fg);
font-weight: 800; font-size: 13px; letter-spacing: .02em;
border: 1px solid var(--line-2);
}
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }
/* Основная колонка */
.main {
grid-area: main;
min-width: 0;
padding: var(--s-8) var(--s-10) var(--s-12);
}
.page { max-width: var(--page-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.tabs { min-width: 0; }
.page--narrow { max-width: 880px; }
.page--form { max-width: 1080px; }
/* Заголовок страницы */
.page-head {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
gap: var(--s-4) var(--s-6);
}
.page-head__main { display: grid; gap: var(--s-2); min-width: 0; }
.page-head__title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
.page-head__sub { color: var(--muted); font-size: var(--t-m); max-width: 72ch; margin: 0; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* Хлебные крошки */
.crumbs { font-size: var(--t-s); color: var(--muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-2); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--s-2); }
.crumbs li + li::before {
content: ""; width: 12px; height: 12px; background: var(--faint);
-webkit-mask: url("data:image/svg+xml,") center / contain no-repeat;
mask: url("data:image/svg+xml,") center / contain no-repeat;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--fg-2); }
/* Секции и сетки */
.section { display: grid; gap: var(--s-4); min-width: 0; }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.section__title { font-size: var(--t-xl); }
.section__sub { color: var(--muted); font-size: var(--t-s); margin: 0; }
.section__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.grid { display: grid; gap: var(--s-4); min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.grid--aside { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: var(--s-6); }
.grid--aside-l { grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: var(--s-6); }
.stack { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.stack--s { gap: var(--s-2); }
.stack--l { gap: var(--s-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.cluster--between { justify-content: space-between; }
.sticky { position: sticky; top: var(--s-6); }
/* ---------- 5. Типографика данных ---------- */
.num, .amount, td.num, th.num { font-variant-numeric: tabular-nums lining-nums; }
.mono { font-family: var(--mono); font-size: .92em; font-weight: 500; letter-spacing: 0; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.strong { font-weight: 700; color: var(--fg); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.text-right { text-align: right; }
.text-s { font-size: var(--t-s); }
.text-xs { font-size: var(--t-xs); }
.lead { font-size: var(--t-l); color: var(--fg-2); }
.c-ok { color: var(--ok); }
.c-err { color: var(--err-fg); }
.c-warn { color: var(--warn-fg); }
.c-info { color: var(--info); }
/* Сумма: рубли — жирно, копейки и знак — тише. Главный типографский приём системы. */
.amount { font-weight: 700; white-space: nowrap; letter-spacing: -.01em; }
.amount__frac { color: var(--muted); font-weight: 600; }
.amount__cur { color: var(--muted); font-weight: 600; margin-left: .18em; }
.amount--neg { color: var(--err-fg); }
.amount--xl { font-size: var(--t-4xl); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.amount--xl .amount__frac, .amount--xl .amount__cur { font-size: .58em; letter-spacing: -.01em; font-weight: 700; }
.amount--l { font-size: var(--t-3xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.amount--l .amount__frac, .amount--l .amount__cur { font-size: .62em; font-weight: 700; }
.amount--m { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em; }
/* ---------- 6. Кнопки ---------- */
.btn {
--btn-bg: var(--surface-3);
--btn-fg: var(--fg);
--btn-bd: var(--line-2);
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
min-height: var(--control-h);
padding: 0 var(--s-5);
border: 1px solid var(--btn-bd);
border-radius: var(--r-m);
background: var(--btn-bg);
color: var(--btn-fg);
font: 700 14.5px/1.1 var(--font);
letter-spacing: -.005em;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn:hover { --btn-bg: var(--btn-hover); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); --btn-bd: transparent; }
.btn--primary:hover { --btn-bg: var(--accent-hi); }
.btn--secondary { --btn-bg: var(--surface-2); --btn-bd: var(--line-2); }
.btn--secondary:hover { --btn-bg: var(--surface-3); }
.btn--ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--fg-2); }
.btn--ghost:hover { --btn-bg: var(--surface-2); --btn-fg: var(--fg); }
.btn--danger { --btn-bg: color-mix(in oklab, var(--err) 18%, var(--surface)); --btn-fg: var(--err-fg); --btn-bd: color-mix(in oklab, var(--err) 45%, var(--line)); }
.btn--danger:hover { --btn-bg: var(--err); --btn-fg: var(--on-err); --btn-bd: transparent; }
.btn--danger-solid { --btn-bg: var(--err); --btn-fg: var(--on-err); --btn-bd: transparent; }
.btn--danger-solid:hover { --btn-bg: var(--err-hi); }
.btn--link { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--link); padding: 0 var(--s-1); min-height: 32px; text-decoration: underline; text-underline-offset: .2em; }
.btn--link:hover { --btn-bg: transparent; --btn-fg: var(--link-hi); }
.btn--sm { min-height: var(--control-h-sm); padding: 0 var(--s-3); font-size: 13.5px; border-radius: var(--r-s); }
.btn--lg { min-height: 52px; padding: 0 var(--s-6); font-size: var(--t-l); border-radius: var(--r-l); }
.btn--block { width: 100%; }
.btn--icon { padding: 0; width: var(--control-h); }
.btn--icon.btn--sm { width: var(--control-h-sm); }
.btn[disabled], .btn[aria-disabled="true"] {
--btn-bg: var(--surface-2); --btn-fg: var(--faint); --btn-bd: var(--line);
cursor: not-allowed; transform: none;
}
.btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
content: ""; position: absolute; inset: 0; margin: auto;
width: 18px; height: 18px; border-radius: 50%;
border: 2.5px solid var(--btn-fg); border-right-color: transparent;
animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.btn-row--end { justify-content: flex-end; }
/* ---------- 7. Поля ввода ---------- */
.form { display: grid; gap: var(--s-5); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid__wide { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; padding-top: var(--s-2); }
.form-actions__note { color: var(--muted); font-size: var(--t-s); }
.fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-4); min-width: 0; }
.fieldset__legend { padding: 0; font-weight: 700; font-size: var(--t-l); margin-bottom: var(--s-1); display: flex; gap: var(--s-3); align-items: center; }
.fieldset__step {
width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center;
background: var(--surface-3); color: var(--fg-2); font-size: var(--t-s); font-weight: 800;
font-variant-numeric: tabular-nums;
}
.fieldset__desc { color: var(--muted); font-size: var(--t-s); margin: calc(var(--s-2) * -1) 0 0; }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field__label { font-weight: 600; font-size: 14px; color: var(--fg-2); display: flex; gap: var(--s-2); align-items: baseline; justify-content: space-between; }
.field__opt { font-weight: 500; color: var(--faint); font-size: var(--t-xs); }
.field__hint { font-size: var(--t-s); color: var(--muted); margin: 0; }
.field__error {
display: flex; gap: 6px; align-items: flex-start;
font-size: var(--t-s); color: var(--err-fg); font-weight: 600; margin: 0;
}
.field__error::before {
content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; background: currentColor;
-webkit-mask: url("data:image/svg+xml,") center / contain no-repeat;
mask: url("data:image/svg+xml,") center / contain no-repeat;
}
.input, .select, .textarea {
width: 100%;
min-height: var(--control-h);
padding: 10px 14px;
border: 1px solid var(--control-line);
border-radius: var(--r-m);
background: var(--field);
color: var(--fg);
font: 500 var(--t-m)/1.35 var(--font);
font-variant-numeric: tabular-nums;
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--faint); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--control-line-hi); }
.input:focus, .select:focus, .textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"], .field.is-invalid .input {
border-color: var(--err);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--err) 18%, transparent);
}
.input[disabled], .select[disabled], .textarea[disabled], .input[readonly] {
background: var(--field-off); color: var(--muted); cursor: not-allowed;
}
.input[readonly] { cursor: default; }
.input--mono { font-family: var(--mono); font-size: 14.5px; letter-spacing: .02em; }
.input--sm { min-height: var(--control-h-sm); padding: 6px 10px; font-size: 14px; border-radius: var(--r-s); }
.input--xl { min-height: 60px; font-size: var(--t-3xl); font-weight: 800; letter-spacing: -.02em; padding: 8px 16px; }
.input--otp {
min-height: 64px; text-align: center;
font-size: 30px; font-weight: 800; letter-spacing: .5em; padding-left: calc(14px + .5em);
font-variant-numeric: tabular-nums;
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.select {
appearance: none; -webkit-appearance: none;
padding-right: 40px;
background-image: var(--chevron);
background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
cursor: pointer;
}
.select option { background: var(--surface-2); color: var(--fg); }
/* Поле с приставкой/суффиксом (₽, поиск) */
.input-affix { position: relative; display: flex; align-items: center; min-width: 0; }
.input-affix > .input { flex: 1; }
.input-affix__text, .input-affix__icon {
position: absolute; top: 0; bottom: 0; display: flex; align-items: center;
color: var(--muted); pointer-events: none; font-weight: 700;
}
.input-affix__text { right: 14px; }
.input-affix__icon { left: 13px; }
.input-affix--suffix > .input { padding-right: 40px; }
.input-affix--prefix > .input { padding-left: 42px; }
.input-affix--xl .input-affix__text { font-size: var(--t-2xl); right: 18px; }
.input-affix--xl > .input { padding-right: 52px; }
/* Чекбокс и радио */
.check {
display: flex; align-items: flex-start; gap: var(--s-3);
min-height: var(--control-h); padding: 10px 0;
cursor: pointer; font-size: var(--t-m); color: var(--fg-2); line-height: 1.4;
}
.check__text { display: grid; gap: 2px; }
.check__hint { font-size: var(--t-s); color: var(--muted); }
.checkbox, .radio {
appearance: none; -webkit-appearance: none; flex: none;
width: 22px; height: 22px; margin: 0;
border: 1.5px solid var(--control-line); background: var(--field);
border-radius: 6px; display: grid; place-content: center; cursor: pointer;
transition: background-color .12s var(--ease), border-color .12s var(--ease);
}
.radio { border-radius: 50%; }
.checkbox::after {
content: ""; width: 14px; height: 14px; background: var(--accent-ink); transform: scale(0);
-webkit-mask: url("data:image/svg+xml,") center / contain no-repeat;
mask: url("data:image/svg+xml,") center / contain no-repeat;
}
.radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-ink); transform: scale(0); }
.checkbox:checked, .radio:checked { background: var(--accent); border-color: var(--accent); }
.checkbox:checked::after, .radio:checked::after { transform: scale(1); }
.checkbox:hover, .radio:hover { border-color: var(--muted); }
.checkbox[disabled], .radio[disabled] { opacity: .5; cursor: not-allowed; }
/* Переключатель */
.switch {
display: flex; align-items: center; gap: var(--s-3);
min-height: var(--control-h); cursor: pointer; position: relative;
font-size: var(--t-m); color: var(--fg-2);
}
.switch__input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.switch__track {
flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px;
background: var(--surface-3); border: 1px solid var(--line-2);
transition: background-color .15s var(--ease);
}
.switch__track::after {
content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
background: var(--muted); transition: transform .18s var(--ease), background-color .15s var(--ease);
}
.switch__input:checked + .switch__track { background: var(--accent); border-color: transparent; }
.switch__input:checked + .switch__track::after { transform: translateX(18px); background: var(--accent-ink); }
.switch__input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch__input[disabled] + .switch__track { opacity: .5; }
.switch__text { display: grid; gap: 1px; }
.switch__hint { font-size: var(--t-s); color: var(--muted); }
/* Загрузка файла */
.dropzone {
position: relative;
display: grid; justify-items: center; gap: var(--s-2); text-align: center;
padding: var(--s-8) var(--s-5);
border: 1.5px dashed var(--line-2);
border-radius: var(--r-l);
background: color-mix(in oklab, var(--surface) 60%, var(--bg));
color: var(--fg-2);
cursor: pointer;
transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 7%, var(--bg)); }
.dropzone:focus-within { border-color: var(--accent); outline: 2px solid var(--focus); outline-offset: 2px; }
.dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone__icon {
width: 48px; height: 48px; border-radius: var(--r-l); display: grid; place-items: center;
background: var(--surface-3); color: var(--accent-fg);
}
.dropzone__title { font-weight: 700; font-size: var(--t-l); color: var(--fg); }
.dropzone__hint { font-size: var(--t-s); color: var(--muted); }
.dropzone__file {
display: inline-flex; align-items: center; gap: var(--s-2);
padding: 6px 12px; border-radius: var(--r-s); background: var(--surface-3);
font-weight: 600; font-size: 14px; color: var(--fg);
}
.dropzone__file:empty { display: none; }
.dropzone--compact { padding: var(--s-5); grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: var(--s-4); }
.dropzone--compact .dropzone__icon { grid-row: span 2; }
/* ---------- 8. Карточки и панели ---------- */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-l);
min-width: 0;
}
.card__head {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4);
padding: var(--s-4) var(--s-5);
border-bottom: 1px solid var(--line);
}
.card__title { font-size: var(--t-l); font-weight: 700; display: flex; align-items: center; gap: var(--s-2); }
.card__sub { color: var(--muted); font-size: var(--t-s); margin: 2px 0 0; }
.card__body { padding: var(--s-5); display: grid; gap: var(--s-4); min-width: 0; }
.card__foot {
display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; justify-content: space-between;
padding: var(--s-3) var(--s-5);
border-top: 1px solid var(--line);
background: color-mix(in oklab, var(--surface) 50%, var(--bg));
border-radius: 0 0 var(--r-l) var(--r-l);
}
.card--flush > .card__body { padding: 0; }
.card__body > .btn { justify-self: start; }
.card--raised { background: var(--surface-2); }
.card--quiet { background: transparent; }
.card--accent { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
.card--danger { border-color: color-mix(in oklab, var(--err) 45%, var(--line)); }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--line-2); background: var(--surface-2); }
/* Плитки быстрых действий */
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s-3); }
.quick__item {
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3);
min-height: 64px; padding: var(--s-3) var(--s-4);
border-radius: var(--r-l); border: 1px solid var(--line);
background: var(--surface); color: var(--fg); text-decoration: none;
}
.quick__item:hover { background: var(--surface-2); border-color: var(--line-2); color: var(--fg); }
.quick__icon { width: 40px; height: 40px; border-radius: var(--r-m); display: grid; place-items: center; background: var(--surface-3); color: var(--accent-fg); }
.quick__item--primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.quick__item--primary:hover { background: var(--accent-hi); color: var(--accent-ink); }
.quick__item--primary .quick__icon { background: color-mix(in oklab, var(--accent-ink) 14%, transparent); color: var(--accent-ink); }
.quick__title { font-weight: 700; font-size: var(--t-m); }
.quick__sub { font-size: var(--t-s); color: var(--muted); }
.quick__item--primary .quick__sub { color: color-mix(in oklab, var(--accent-ink) var(--ink-soft), transparent); }
/* ---------- 9. KPI: единая «ведомость», а не россыпь карточек ---------- */
.kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--r-l);
overflow: hidden;
}
.kpi { background: var(--surface); padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.kpi__label { font-size: var(--t-s); font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: var(--s-2); }
.kpi__value { font-size: var(--t-3xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi__value .amount__frac, .kpi__value .amount__cur { font-size: .6em; }
.kpi__meta { font-size: var(--t-s); color: var(--muted); }
.kpi__meta .num { color: var(--fg-2); font-weight: 600; }
.kpi--err .kpi__value { color: var(--err-fg); }
.kpi--warn .kpi__value { color: var(--warn-fg); }
.kpi--na .kpi__value { color: var(--faint); }
/* Остаток: банк ещё не отдаёт — пунктир = «данных нет» */
.balance {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-4) var(--s-5);
padding: var(--s-5);
border-radius: var(--r-l);
border: 1.5px dashed var(--line-2);
background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in oklab, var(--surface) 70%, transparent) 10px 11px), var(--bg);
}
.balance__icon { width: 44px; height: 44px; border-radius: var(--r-m); display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.balance__body { display: grid; gap: 2px; min-width: 0; }
.balance__label { font-size: var(--t-s); color: var(--muted); font-weight: 600; }
.balance__value { font-size: var(--t-2xl); font-weight: 800; color: var(--faint); letter-spacing: -.02em; }
.balance__text { font-size: var(--t-s); color: var(--muted); margin: 0; max-width: 64ch; }
.balance--known { border-style: solid; background: var(--surface); }
.balance--known .balance__value { color: var(--fg); }
/* ---------- 10. Бейджи статусов (форма значка + цвет) ---------- */
.badge {
--b: var(--muted);
display: inline-flex; align-items: center; gap: 7px;
height: 26px; padding: 0 10px 0 9px;
border-radius: var(--r-xs);
background: color-mix(in oklab, var(--b) 14%, transparent);
color: color-mix(in oklab, var(--b) var(--badge-mix), var(--fg));
font-size: 12.5px; font-weight: 700; line-height: 1;
white-space: nowrap;
vertical-align: middle;
}
.badge::before {
content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
background: currentColor;
}
.badge--plain::before { display: none; }
.badge--lg { height: 30px; font-size: 13.5px; padding: 0 12px 0 11px; }
/* Выплаты */
.badge--created { --b: var(--fg-2); }
.badge--created::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.badge--sent { --b: var(--info); }
.badge--sent::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1.6px currentColor; }
.badge--done { --b: var(--ok); }
.badge--refused { --b: var(--err); color: var(--err-fg); }
.badge--refused::before, .badge--rejected::before {
border-radius: 0; width: 9px; height: 9px;
-webkit-mask: url("data:image/svg+xml,") center / contain no-repeat;
mask: url("data:image/svg+xml,") center / contain no-repeat;
}
.badge--recon { --b: var(--warn); }
.badge--recon::before { border-radius: 1px; width: 7px; height: 7px; transform: rotate(45deg); }
/* Организации */
.badge--draft { --b: var(--muted); }
.badge--draft::before { background: transparent; box-shadow: inset 0 0 0 1.6px currentColor; }
.badge--review { --b: var(--warn); }
.badge--review::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1.6px currentColor; }
.badge--active { --b: var(--ok); }
.badge--rejected { --b: var(--err); color: var(--err-fg); }
.badge--blocked { --b: var(--err); background: var(--err); color: var(--on-err); }
.badge--blocked::before { border-radius: 1.5px; }
/* Нейтральные */
.badge--ok { --b: var(--ok); }
.badge--warn { --b: var(--warn); }
.badge--err { --b: var(--err); color: var(--err-fg); }
.badge--info { --b: var(--info); }
.badge--neutral { --b: var(--muted); }
.badge--neutral::before { display: none; }
.badge--mode-test { --b: var(--warn); }
.badge--mode-test::before { border-radius: 1px; background: repeating-linear-gradient(135deg, currentColor 0 2px, transparent 2px 4px); width: 10px; height: 10px; }
.badge--mode-live { --b: var(--ok); }
/* Тег роли */
.role {
display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
border-radius: var(--r-xs); border: 1px solid var(--line-2);
font-size: var(--t-xs); font-weight: 700; color: var(--fg-2); white-space: nowrap;
}
.role--owner { border-color: color-mix(in oklab, var(--brand) 55%, var(--line)); color: var(--brand-fg); }
.role--admin { border-color: color-mix(in oklab, var(--cyan) 55%, var(--line)); color: var(--cyan-fg); }
.chip {
display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
border-radius: var(--r-xs); background: var(--surface-3); color: var(--fg-2);
font-size: var(--t-s); font-weight: 600; white-space: nowrap;
}
/* ---------- 11. Флеш-сообщения и предупреждения ---------- */
.flash {
--f: var(--info);
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: start;
padding: var(--s-3) var(--s-4);
border-radius: var(--r-m);
border: 1px solid color-mix(in oklab, var(--f) 40%, var(--line));
background: color-mix(in oklab, var(--f) 9%, var(--bg));
color: var(--fg-2);
font-size: 14.5px;
}
.flash::before {
content: ""; width: 20px; height: 20px; margin-top: 1px; background: var(--f);
-webkit-mask: var(--fi) center / contain no-repeat; mask: var(--fi) center / contain no-repeat;
}
.flash__body { display: grid; gap: 2px; min-width: 0; }
.flash__title { font-weight: 700; color: var(--fg); }
.flash__text { margin: 0; }
.flash__close { margin: -6px -8px -6px 0; }
.flash--ok { --f: var(--ok); --fi: url("data:image/svg+xml,"); }
.flash--err { --f: var(--err); --fi: url("data:image/svg+xml,"); }
.flash--warn { --f: var(--warn); --fi: url("data:image/svg+xml,"); }
.flash--info { --f: var(--info); --fi: url("data:image/svg+xml,"); }
.flash--err .flash__title { color: var(--err-fg); }
.flash:not(:has(.flash__close)) { grid-template-columns: auto minmax(0, 1fr); }
/* Предупреждение проверки карты: требует осознанного решения */
.verify {
border-radius: var(--r-l);
border: 1px solid color-mix(in oklab, var(--warn) 55%, var(--line));
background: color-mix(in oklab, var(--warn) 8%, var(--surface));
overflow: hidden;
}
.verify__head {
display: flex; gap: var(--s-3); align-items: flex-start;
padding: var(--s-4) var(--s-5);
}
.verify__head .i { color: var(--warn); margin-top: 2px; }
.verify__title { font-weight: 800; font-size: var(--t-l); color: var(--fg); }
.verify__text { color: var(--fg-2); font-size: 14.5px; margin: 4px 0 0; }
.verify__list { margin: var(--s-2) 0 0; padding-left: 1.1em; color: var(--fg-2); font-size: 14px; }
.verify__list li + li { margin-top: 4px; }
.verify__confirm {
padding: var(--s-2) var(--s-5);
border-top: 1px dashed color-mix(in oklab, var(--warn) 45%, var(--line));
background: color-mix(in oklab, var(--warn) 5%, var(--bg));
}
.verify__confirm .check { color: var(--fg); font-weight: 600; }
.verify__confirm .checkbox:checked { background: var(--warn); border-color: var(--warn); }
.verify__confirm .checkbox::after { background: var(--warn-ink); }
/* ---------- 12. Таблица данных ---------- */
.table-wrap { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
width: 100%; border-collapse: separate; border-spacing: 0;
font-size: 14.5px;
font-variant-numeric: tabular-nums;
}
.table th, .table td { padding: 12px var(--s-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.table thead th {
font-size: var(--t-s); font-weight: 600; color: var(--muted);
white-space: nowrap; background: color-mix(in oklab, var(--surface) 55%, var(--bg));
padding-top: 10px; padding-bottom: 10px;
}
.card .table thead th:first-child { border-top-left-radius: calc(var(--r-l) - 1px); }
.card .table thead th:last-child { border-top-right-radius: calc(var(--r-l) - 1px); }
.table tbody tr:hover td { background: color-mix(in oklab, var(--surface-2) 70%, transparent); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; white-space: nowrap; }
.table .col-act { width: 1%; white-space: nowrap; text-align: right; }
.table .col-check { width: 1%; padding-right: 0; }
.table__primary { font-weight: 700; color: var(--fg); text-decoration: none; }
a.table__primary:hover { color: var(--link-hi); text-decoration: underline; }
.table__sub { display: block; font-size: var(--t-s); color: var(--muted); margin-top: 2px; }
.table tfoot td, .table tfoot th {
border-top: 1px solid var(--line-2); border-bottom: 0;
background: color-mix(in oklab, var(--surface-2) 80%, var(--bg));
font-weight: 700; color: var(--fg);
}
.card .table tfoot tr:last-child > :first-child { border-bottom-left-radius: calc(var(--r-l) - 1px); }
.card .table tfoot tr:last-child > :last-child { border-bottom-right-radius: calc(var(--r-l) - 1px); }
.table--compact th, .table--compact td { padding-top: 8px; padding-bottom: 8px; }
/* Сортируемые заголовки: ссылка-заголовок, aria-sort на th */
.th-sort {
display: inline-flex; align-items: center; gap: 4px;
color: inherit; text-decoration: none; margin: -6px -6px; padding: 6px; border-radius: var(--r-xs);
}
.th-sort:hover { color: var(--fg); background: var(--surface-3); }
.th-sort::after {
content: ""; width: 14px; height: 14px; background: currentColor; opacity: .45;
-webkit-mask: url("data:image/svg+xml,") center / contain no-repeat;
mask: url("data:image/svg+xml,") center / contain no-repeat;
}
th[aria-sort] .th-sort { color: var(--fg); }
th[aria-sort] .th-sort::after { opacity: 1; color: var(--accent-fg); }
th[aria-sort="ascending"] .th-sort::after {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
th[aria-sort="descending"] .th-sort::after {
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}
/* Строки реестра с ошибкой/предупреждением */
.table tr.is-error td { background: color-mix(in oklab, var(--err) 7%, transparent); }
.table tr.is-error td:first-child { box-shadow: inset 3px 0 0 var(--err); }
.table tr.is-warn td { background: color-mix(in oklab, var(--warn) 5%, transparent); }
.table tr.is-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.table tr.is-muted td { color: var(--faint); }
.table tr.is-muted .amount, .table tr.is-muted .table__primary { color: var(--faint); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--faint) 60%, transparent); }
.cell-error, .cell-warn { display: flex; gap: 6px; align-items: flex-start; font-size: var(--t-s); font-weight: 600; margin-top: 4px; }
.cell-error { color: var(--err-fg); }
.cell-warn { color: var(--warn-fg); }
.cell-error::before, .cell-warn::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; background: currentColor; border-radius: 50%; }
.cell-warn::before { border-radius: 1px; transform: rotate(45deg); width: 7px; height: 7px; }
td .is-bad { color: var(--err-fg); text-decoration: underline wavy color-mix(in oklab, var(--err) 70%, transparent); text-underline-offset: 3px; }
/* Пагинация и мета под таблицей */
.table-foot {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line);
font-size: var(--t-s); color: var(--muted);
}
.pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager__link {
min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--r-s);
display: inline-flex; align-items: center; justify-content: center;
color: var(--fg-2); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pager__link:hover { background: var(--surface-3); color: var(--fg); }
.pager__link[aria-current="page"] { background: var(--surface-3); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); }
.pager__link[aria-disabled="true"] { color: var(--faint); pointer-events: none; }
.pager__gap { color: var(--faint); padding: 0 4px; }
/* Пустое состояние */
.empty {
display: grid; justify-items: center; text-align: center; gap: var(--s-2);
padding: var(--s-10) var(--s-5);
}
.empty__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); margin-bottom: var(--s-2); }
.empty__title { font-weight: 700; font-size: var(--t-l); }
.empty__text { color: var(--muted); max-width: 46ch; margin: 0; }
.empty .btn-row { margin-top: var(--s-3); justify-content: center; }
/* ---------- 13. Фильтры, сегменты, поиск ---------- */
.filters {
display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-4);
padding: var(--s-4);
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
}
.filters__group { display: grid; gap: 6px; min-width: 0; }
.filters__label { font-size: var(--t-s); font-weight: 600; color: var(--muted); }
.filters__range { display: flex; align-items: center; gap: var(--s-2); }
.filters__range .input { width: 150px; }
.filters .select { min-width: 180px; }
.filters__actions { display: flex; gap: var(--s-2); margin-left: auto; }
.js .js-hide { display: none !important; }
.no-js-only { display: none; }
html:not(.js) .no-js-only { display: initial; }
/* Сегментированный выбор (радио): пресеты периода, статусы */
.seg {
display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px;
background: var(--sunken); border: 1px solid var(--line-2); border-radius: var(--r-m);
}
.seg__item { position: relative; display: inline-flex; }
.seg__input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg__label, a.seg__label {
display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s-3);
border-radius: 7px; color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap;
text-decoration: none; cursor: pointer;
}
.seg__label:hover { color: var(--fg); }
.seg__input:checked + .seg__label, a.seg__label[aria-current="true"], a.seg__label[aria-current="page"] {
background: var(--seg-on); color: var(--fg); box-shadow: var(--seg-on-shadow);
}
.seg__input:focus-visible + .seg__label { outline: 2px solid var(--focus); outline-offset: 1px; }
.seg__count { font-variant-numeric: tabular-nums; color: var(--faint); font-weight: 700; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.toolbar__search { flex: 1 1 280px; max-width: 420px; }
.toolbar__end { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
/* ---------- 14. Вкладки ---------- */
.tabs__list {
display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line);
overflow-x: auto; scrollbar-width: none; margin: 0; padding: 0; list-style: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
position: relative; display: inline-flex; align-items: center; gap: var(--s-2);
min-height: 44px; padding: 0 var(--s-3);
color: var(--muted); font-weight: 700; font-size: 14.5px; text-decoration: none; white-space: nowrap;
border: 0; background: none; cursor: pointer; font-family: inherit;
}
.tabs__tab:hover { color: var(--fg); }
.tabs__tab[aria-selected="true"], .tabs__tab[aria-current="page"] { color: var(--fg); }
.tabs__tab[aria-selected="true"]::after, .tabs__tab[aria-current="page"]::after {
content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent-fg);
}
.tabs__count { font-size: var(--t-xs); font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.tabs__panel { padding-top: var(--s-5); }
.tabs__panel[hidden] { display: none; }
/* ---------- 15. Описание-список (реквизиты) ---------- */
.dl { margin: 0; display: grid; }
.dl > div {
display: grid; grid-template-columns: minmax(140px, 38%) minmax(0, 1fr); gap: var(--s-4);
padding: 10px 0; border-bottom: 1px solid var(--line);
}
.dl > div:first-child { padding-top: 0; }
.dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.dl dt { color: var(--muted); font-size: 14px; }
.dl dd { margin: 0; color: var(--fg); font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 4px var(--s-2); align-items: center; }
.dl--stacked > div { grid-template-columns: 1fr; gap: 2px; }
.dl--cols { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); column-gap: var(--s-6); }
.dl--cols { margin: -10px 0 -11px; overflow: hidden; }
.dl--cols > div { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; align-content: start; }
.dl--cols > div:first-child { padding-top: 10px; }
.dl--cols > div:last-child { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
/* ---------- 16. Шаги / чек-лист подключения ---------- */
.progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); font-size: var(--t-s); color: var(--muted); }
.progress-head strong { color: var(--fg); font-size: var(--t-m); }
.progress, .meter {
appearance: none; -webkit-appearance: none;
display: block; width: 100%; height: 8px; border: 0; border-radius: 4px;
background: var(--surface-3); overflow: hidden; color: var(--accent-fg);
}
.progress::-webkit-progress-bar { background: var(--surface-3); border-radius: 4px; }
.progress::-webkit-progress-value { background: var(--accent-fg); border-radius: 4px; }
.progress::-moz-progress-bar { background: var(--accent-fg); border-radius: 4px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; }
.checklist__item {
position: relative;
display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s-3); align-items: start;
padding: var(--s-3) 0;
}
.checklist__item + .checklist__item, .checklist > li + li { border-top: 1px solid var(--line); }
label.checklist__item { cursor: pointer; }
.checklist__mark {
width: 28px; height: 28px; border-radius: 50%;
display: grid; place-items: center;
border: 1.5px solid var(--line-2); color: var(--faint);
font-size: var(--t-s); font-weight: 800; font-variant-numeric: tabular-nums;
}
.checklist__body { display: grid; gap: 2px; min-width: 0; padding-top: 3px; }
.checklist__title { font-weight: 700; }
.checklist__text { font-size: var(--t-s); color: var(--muted); }
.checklist__aside { padding-top: 2px; }
.checklist__item.is-done .checklist__mark { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-size: 0; }
.checklist__item.is-done .checklist__mark::after {
content: ""; width: 15px; height: 15px; background: currentColor;
-webkit-mask: url("data:image/svg+xml,") center / contain no-repeat;
mask: url("data:image/svg+xml,") center / contain no-repeat;
}
.checklist__item.is-done .checklist__title { color: var(--fg-2); }
.checklist__item.is-current .checklist__mark { border-color: var(--accent-fg); color: var(--accent-fg); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent); }
.checklist__item.is-blocked .checklist__mark { border-color: var(--err); color: var(--err-fg); }
/* Чек-лист с отметкой оператором: label > input.checkbox вместо __mark */
.checklist__item > .checkbox { margin: 3px 3px 0; }
/* Горизонтальные шаги мастера */
.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-2); counter-reset: step; flex-wrap: wrap; }
.steps__item {
counter-increment: step;
display: inline-flex; align-items: center; gap: var(--s-2);
font-size: 14px; font-weight: 600; color: var(--muted);
}
.steps__item::before {
content: counter(step); width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center;
border: 1.5px solid var(--line-2); font-size: var(--t-xs); font-weight: 800;
}
.steps__item + .steps__item { padding-left: var(--s-2); }
.steps__item + .steps__item::after { order: -1; content: ""; width: 20px; height: 1px; background: var(--line-2); margin-right: var(--s-1); }
.steps__item.is-done { color: var(--fg-2); }
.steps__item.is-done::before { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.steps__item.is-current { color: var(--fg); }
.steps__item.is-current::before { border-color: var(--accent-fg); color: var(--accent-fg); }
/* ---------- 17. Лимиты (meter) ---------- */
.limit { display: grid; gap: 8px; min-width: 0; }
.limit__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.limit__label { font-size: var(--t-s); color: var(--muted); font-weight: 600; }
.limit__value { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.limit__value .faint { font-weight: 600; }
.limit__meta { font-size: var(--t-s); color: var(--muted); font-variant-numeric: tabular-nums; }
.limit__meta strong { color: var(--fg); }
/* : зелёный → жёлтый → красный по мере расхода */
.meter::-webkit-meter-bar { background: var(--surface-3); border: 0; border-radius: 4px; height: 8px; }
.meter::-webkit-meter-optimum-value { background: var(--accent-fg); border-radius: 4px; }
.meter::-webkit-meter-suboptimum-value { background: var(--warn); border-radius: 4px; }
.meter::-webkit-meter-even-less-good-value { background: var(--err); border-radius: 4px; }
.meter::-moz-meter-bar { background: var(--accent-fg); border-radius: 4px; }
.meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--warn); }
.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--err); }
.meter--thick, .meter--thick::-webkit-meter-bar { height: 12px; border-radius: 6px; }
.meter--cyan::-webkit-meter-optimum-value { background: var(--info); }
.meter--cyan::-moz-meter-bar { background: var(--info); }
/* Разбивка по точкам: горизонтальные бары */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.bars__row {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--s-4); align-items: baseline;
}
.bars__name { font-weight: 600; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars__name a { color: var(--fg); text-decoration: none; }
.bars__name a:hover { text-decoration: underline; }
.bars__value { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.bars__meter { grid-column: 1 / -1; }
.bars__meta { grid-column: 1 / -1; font-size: var(--t-s); color: var(--muted); font-variant-numeric: tabular-nums; margin-top: -2px; }
/* ---------- 18. Маска карты ---------- */
.pan { display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pan__digits { font-family: var(--mono); font-size: .95em; letter-spacing: .04em; color: var(--fg); }
.pan__dots { color: var(--faint); letter-spacing: -.08em; margin-right: .35em; font-size: .9em; }
.pan__ps {
display: inline-grid; place-items: center; min-width: 38px; height: 22px; padding: 0 5px;
border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: .02em; line-height: 1;
background: var(--surface-3); color: var(--fg-2); border: 1px solid var(--line-2);
}
.pan__ps--mir { background: oklch(55% .14 155); color: oklch(98% .01 155); border-color: transparent; }
.pan__ps--visa { background: oklch(40% .14 265); color: oklch(97% .01 265); border-color: transparent; font-style: italic; }
.pan__ps--mc { background: oklch(30% .02 255); color: oklch(85% .12 60); border-color: transparent; }
.pan--lg .pan__digits { font-size: var(--t-xl); font-weight: 600; }
.pan--lg .pan__ps { height: 26px; min-width: 46px; font-size: 11px; }
/* ---------- 19. Секрет / код ---------- */
.secret {
border-radius: var(--r-l);
border: 1px solid color-mix(in oklab, var(--accent) 50%, var(--line));
background: color-mix(in oklab, var(--accent) 6%, var(--surface));
padding: var(--s-5);
display: grid; gap: var(--s-3);
}
.secret__head { display: flex; gap: var(--s-3); align-items: flex-start; }
.secret__head .i { color: var(--accent-fg); margin-top: 2px; }
.secret__title { font-weight: 800; font-size: var(--t-l); }
.secret__text { color: var(--fg-2); font-size: 14px; margin: 2px 0 0; }
.secret__row { display: flex; gap: var(--s-2); align-items: stretch; min-width: 0; }
.secret__value {
flex: 1; min-width: 0;
display: flex; align-items: center;
padding: 10px 14px; min-height: var(--control-h);
border-radius: var(--r-m); background: var(--sunken); border: 1px solid var(--line-2);
font-family: var(--mono); font-size: 14px; color: var(--fg); overflow-wrap: anywhere; word-break: break-all;
user-select: all;
}
.code {
position: relative;
margin: 0;
padding: var(--s-4) var(--s-5);
border-radius: var(--r-m);
background: var(--sunken);
border: 1px solid var(--line);
font: 13.5px/1.6 var(--mono);
color: var(--fg-2);
overflow-x: auto;
white-space: pre;
tab-size: 2;
}
.code-block { position: relative; min-width: 0; }
.code-block > .btn { position: absolute; top: 8px; right: 8px; z-index: 1; }
.code-block > .code { padding-right: 112px; }
.code .tok-k { color: var(--info); }
.code .tok-s { color: var(--brand-fg); }
.code .tok-c { color: var(--faint); }
code.inline, .kbd {
padding: 2px 6px; border-radius: 5px; background: var(--surface-3); color: var(--fg); font-size: .88em;
overflow-wrap: anywhere;
}
.copy-ok { color: var(--ok) !important; }
/* ---------- 20. Таймлайн статусов ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.timeline__item {
--t: var(--line-2);
position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-3);
padding-bottom: var(--s-5);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; border-radius: 1px;
background: var(--line);
}
.timeline__item:last-child::before { display: none; }
.timeline__dot {
width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
display: grid; place-items: center;
border: 2px solid var(--t); background: var(--bg);
}
.timeline__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--t); }
.timeline__body { display: grid; gap: 2px; min-width: 0; }
.timeline__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-3); }
.timeline__title { font-weight: 700; }
.timeline__time { font-size: var(--t-s); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline__text { font-size: 14px; color: var(--fg-2); margin: 0; }
.timeline__note { font-size: var(--t-s); color: var(--muted); }
.timeline__item.is-done { --t: var(--ok); }
.timeline__item.is-done::before { background: color-mix(in oklab, var(--ok) 45%, var(--line)); }
.timeline__item.is-sent { --t: var(--info); }
.timeline__item.is-warn { --t: var(--warn); }
.timeline__item.is-fail { --t: var(--err); }
.timeline__item.is-fail .timeline__title { color: var(--err-fg); }
.timeline__item.is-pending .timeline__dot { border-style: dashed; }
.timeline__item.is-pending .timeline__dot::after { display: none; }
.timeline__item.is-pending .timeline__title { color: var(--muted); }
/* Причина отказа — человеческим языком */
.reason {
display: grid; gap: var(--s-2);
padding: var(--s-4) var(--s-5);
border-radius: var(--r-l);
background: color-mix(in oklab, var(--err) 9%, var(--surface));
border: 1px solid color-mix(in oklab, var(--err) 40%, var(--line));
}
.reason__title { font-weight: 800; font-size: var(--t-l); color: var(--fg); }
.reason__text { color: var(--fg-2); margin: 0; }
.reason__code { font-size: var(--t-s); color: var(--muted); }
/* Шапка-сводка выплаты */
.receipt {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4) var(--s-6); align-items: end;
padding: var(--s-6);
border-radius: var(--r-xl);
background: var(--surface);
border: 1px solid var(--line);
position: relative; overflow: hidden;
}
.receipt::after {
/* «перфорация» нижнего края — квитанция */
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 8px;
background: radial-gradient(circle at 8px 8px, var(--bg) 4px, transparent 4.5px) 0 0 / 16px 8px repeat-x;
}
.receipt__main { display: grid; gap: var(--s-2); min-width: 0; }
.receipt__label { color: var(--muted); font-size: var(--t-s); font-weight: 600; }
.receipt__side { display: grid; gap: var(--s-2); justify-items: end; text-align: right; }
/* ---------- 21. Диалог ---------- */
.dialog {
width: min(520px, calc(100vw - 32px));
max-height: calc(100dvh - 32px);
padding: 0; border: 0; border-radius: var(--r-xl);
background: var(--surface-2); color: var(--fg);
box-shadow: var(--shadow-pop);
}
.dialog::backdrop { background: var(--scrim-dialog, oklch(8% .02 255 / .72)); backdrop-filter: blur(2px); }
.dialog[open] { animation: dlg-in .18s var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.dialog__form { display: grid; margin: 0; }
.dialog__head { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-5) var(--s-5) 0; }
.dialog__icon { width: 40px; height: 40px; flex: none; border-radius: var(--r-m); display: grid; place-items: center; background: var(--surface-3); color: var(--fg-2); }
.dialog--danger .dialog__icon { background: color-mix(in oklab, var(--err) 18%, var(--surface-2)); color: var(--err-fg); }
.dialog__title { font-size: var(--t-xl); font-weight: 800; padding-top: 7px; }
.dialog__body { padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-4); color: var(--fg-2); }
.dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-5); }
/* Статичный показ диалога в макетах/галерее */
.dialog--static { position: static; display: block; margin: 0; }
/* ---------- 22. Точки (карточки сущностей) ---------- */
.entity { display: grid; gap: var(--s-4); padding: var(--s-5); }
.entity__head { display: flex; justify-content: space-between; gap: var(--s-3); align-items: flex-start; }
.entity__title { font-weight: 800; font-size: var(--t-l); line-height: 1.25; }
.entity__title a { color: var(--fg); text-decoration: none; }
.entity__title a:hover { text-decoration: underline; }
.entity__sub { font-size: var(--t-s); color: var(--muted); margin-top: 2px; }
.entity__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.entity__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); align-items: center; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.people { display: flex; align-items: center; }
.people .avatar { margin-left: -8px; border: 2px solid var(--surface); }
.people .avatar:first-child { margin-left: 0; }
.people__more { margin-left: var(--s-2); font-size: var(--t-s); color: var(--muted); }
/* ---------- 23. Вход ---------- */
.auth {
min-height: 100vh;
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.auth__aside {
position: relative; overflow: hidden;
padding: var(--s-10) var(--s-12);
display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--s-10);
background: var(--bg-side);
border-right: 1px solid var(--line);
}
.auth__aside::before {
/* ведомость: тонкие строки как в кассовой книге */
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(90deg, transparent calc(100% - 1px), color-mix(in oklab, var(--line) 60%, transparent) 0) 0 0 / 120px 100%,
linear-gradient(transparent 39px, color-mix(in oklab, var(--line) 55%, transparent) 40px) 0 0 / 100% 40px;
-webkit-mask: linear-gradient(160deg, black, transparent 75%);
mask: linear-gradient(160deg, black, transparent 75%);
}
.auth__aside > * { position: relative; }
.auth__logo { height: 36px; width: auto; }
.auth__pitch { display: grid; gap: var(--s-5); max-width: 520px; }
.auth__headline { font-size: 44px; line-height: 1.05; font-weight: 800; letter-spacing: -.035em; }
.auth__headline-soft { color: var(--muted); }
.auth__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); max-width: 460px; }
.auth__fact { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.auth__fact-icon { width: 40px; height: 40px; border-radius: var(--r-m); display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--accent-fg); }
.auth__fact-title { font-weight: 700; }
.auth__fact-text { font-size: var(--t-s); color: var(--muted); }
.auth__legal { font-size: var(--t-xs); color: var(--faint); }
.auth__main { position: relative; display: grid; place-items: center; padding: var(--s-10) var(--s-6); }
.auth__panel { width: min(420px, 100%); display: grid; gap: var(--s-6); }
.auth__title { font-size: var(--t-3xl); }
.auth__sub { color: var(--muted); margin: var(--s-2) 0 0; }
.auth__alt { font-size: var(--t-s); color: var(--muted); text-align: center; }
.auth__mlogo { display: none; }
.auth__panel .tabs__list { margin-bottom: calc(var(--s-2) * -1); }
/* ---------- 24. Изолированный ввод карты (iframe) ---------- */
.card-frame {
display: block; width: 100%; height: 152px; border: 0;
border-radius: var(--r-l);
background: transparent;
/* color-scheme наследуется от страницы: совпадает со схемой документа во фрейме
(тот же data-theme / та же системная тема) — браузер не подкладывает непрозрачный белый/чёрный фон. */
}
.card-frame-wrap { display: grid; gap: var(--s-2); }
.card-frame-wrap__note { display: flex; gap: 6px; align-items: center; font-size: var(--t-xs); color: var(--muted); }
.card-frame-wrap__note .i { color: var(--accent-fg); }
/* Тело страницы внутри iframe */
.frame { background: transparent; min-height: 0; overflow: hidden; }
.vault {
margin: 0;
padding: var(--s-4) var(--s-4) var(--s-3);
border-radius: var(--r-l);
background:
linear-gradient(var(--sunken), var(--sunken)) padding-box,
linear-gradient(135deg, color-mix(in oklab, var(--brand) 70%, transparent), color-mix(in oklab, var(--cyan) 50%, transparent) 60%, var(--line-2)) border-box;
border: 1.5px solid transparent;
display: grid; gap: var(--s-3);
}
.vault__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.vault__label { font-weight: 700; font-size: 14px; color: var(--fg-2); }
.vault__secure { display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-xs); font-weight: 700; color: var(--brand-fg); white-space: nowrap; }
.vault__input {
width: 100%; min-height: 56px; padding: 8px 16px;
border-radius: var(--r-m); border: 1px solid var(--control-line); background: var(--vault-field);
color: var(--fg); font: 600 min(22px, 6.4vw)/1 var(--mono); letter-spacing: .04em;
font-variant-numeric: tabular-nums;
}
.vault__input::placeholder { color: var(--vault-ph); }
.vault__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 28%, transparent); }
.vault__input[aria-invalid="true"] { border-color: var(--err); }
.vault__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 22px; font-size: var(--t-xs); color: var(--muted); white-space: nowrap; }
@media (max-width: 420px) {
.vault { padding: var(--s-3) var(--s-3) var(--s-3); }
.vault__input { letter-spacing: .01em; padding: 8px 12px; }
}
.vault__foot .c-ok { font-weight: 700; }
/* ---------- 25. Оператор: отличимая оболочка ---------- */
.app--op {
--accent: var(--cyan);
--accent-hi: var(--cyan-hi);
--accent-ink: var(--cyan-ink);
--accent-fg: var(--op-accent-fg);
--bg-side: var(--op-bg-side);
}
.op-band {
display: flex; align-items: center; gap: var(--s-2);
margin: 0 var(--s-3) var(--s-3);
padding: 8px var(--s-3);
border-radius: var(--r-m);
color: var(--cyan-ink); font-weight: 800; font-size: 13px;
background: repeating-linear-gradient(135deg, var(--cyan) 0 10px, var(--cyan-hi) 10px 20px);
}
.op-band__env { margin-left: auto; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: color-mix(in oklab, var(--cyan-ink) 85%, transparent); color: oklch(84% .11 210); font-size: 11px; }
.app--op .sidebar { border-right-color: color-mix(in oklab, var(--cyan) 30%, var(--line)); }
.app--op .main { background: linear-gradient(color-mix(in oklab, var(--cyan) 4%, var(--bg)), var(--bg) 320px); }
/* Ставки/тарифы */
.rate { display: grid; gap: 4px; padding: var(--s-4); border-radius: var(--r-m); background: var(--sunken); border: 1px solid var(--line); }
.rate__label { font-size: var(--t-s); color: var(--muted); font-weight: 600; }
.rate__value { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rate__hint { font-size: var(--t-xs); color: var(--faint); }
/* Строка-блокировка */
.lockrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; }
.lockrow + .lockrow { border-top: 1px solid var(--line); }
.lockrow__icon { width: 36px; height: 36px; border-radius: var(--r-m); display: grid; place-items: center; background: var(--surface-3); color: var(--muted); }
.lockrow.is-locked .lockrow__icon { background: color-mix(in oklab, var(--err) 20%, var(--surface)); color: var(--err-fg); }
.lockrow__title { font-weight: 700; }
.lockrow__text { font-size: var(--t-s); color: var(--muted); }
/* Журнал */
.log-action { display: grid; gap: 2px; }
.log-action__what { font-weight: 600; color: var(--fg); }
.log-action__obj { font-size: var(--t-s); color: var(--muted); }
.ip { font-family: var(--mono); font-size: 13px; color: var(--fg-2); white-space: nowrap; }
/* Отступы-утилиты */
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--s-2); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mb-0 { margin-bottom: 0 !important; }
.w-full { width: 100%; }
.show-mobile { display: none !important; }
@media (min-width: 768px) { .hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1279px) { .hide-md { display: none !important; } }
/* ---------- 25a. Тема: переключатель и картинки под тему ---------- */
.i--monitor { --i: url("data:image/svg+xml,"); }
.i--sun { --i: url("data:image/svg+xml,"); }
.i--moon { --i: url("data:image/svg+xml,"); }
/* Сегмент «Система / Светлая / Тёмная»: POST-форма, aria-pressed на выбранной кнопке */
.theme-switch {
display: inline-flex; gap: 2px; padding: 3px; margin: 0;
background: var(--sunken); border: 1px solid var(--line-2); border-radius: var(--r-m);
}
.theme-switch__opt {
flex: 1 1 0; display: inline-grid; place-items: center;
min-width: 36px; height: 32px; padding: 0 var(--s-2);
border: 0; border-radius: 7px; background: transparent; color: var(--muted);
font: inherit; cursor: pointer;
transition: background-color .15s var(--ease), color .15s var(--ease);
}
.theme-switch__opt .i { width: 18px; height: 18px; }
.theme-switch__opt:hover { color: var(--fg); }
.theme-switch__opt[aria-pressed="true"] { background: var(--seg-on); color: var(--fg); box-shadow: var(--seg-on-shadow); cursor: default; }
.theme-switch__opt:focus-visible { outline-offset: 1px; }
/* в меню — во всю ширину, над блоком пользователя */
.theme-switch--sidebar { display: flex; margin: var(--s-2) var(--s-3) var(--s-3); }
/* в мобильной шапке (видна ≤1023): прижат вправо; на телефоне скрыт — он есть в выезжающем меню */
.theme-switch--topbar { flex: none; margin-left: auto; }
.topbar__ctx ~ .theme-switch--topbar { margin-left: 0; }
/* на экранах входа — в правом верхнем углу */
.theme-switch--floating { position: absolute; z-index: 2; top: var(--s-4); right: var(--s-4); }
/* Пара картинок под тему (логотип): видна только одна. Правила лишь скрывают лишнюю,
поэтому display самой картинки (.auth__mlogo и т. п.) остаётся за её классом. */
:root[data-theme="light"] .theme-img--dark,
:root[data-theme="dark"] .theme-img--light { display: none; }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .theme-img--dark { display: none; }
}
@media not all and (prefers-color-scheme: light) {
:root:not([data-theme="light"]) .theme-img--light { display: none; }
}
/* ======================= 26. Адаптив ======================= */
@media (max-width: 1279px) {
.main { padding: var(--s-6) var(--s-6) var(--s-10); }
.grid--aside { grid-template-columns: minmax(0, 1fr) 320px; }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
.app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; grid-template-rows: auto 1fr; }
.topbar {
grid-area: top;
position: sticky; top: 0; z-index: 30;
display: flex; align-items: center; gap: var(--s-2);
min-height: 56px; padding: 6px var(--s-2) 6px var(--s-2);
background: color-mix(in oklab, var(--bg-side) 92%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
.topbar__burger { flex: none; }
.topbar__brand { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; color: var(--fg); text-decoration: none; }
.topbar__brand img { height: 26px; width: auto; }
.topbar__ctx { min-width: 0; margin-left: auto; text-align: right; font-size: var(--t-xs); color: var(--muted); line-height: 1.25; }
.topbar__ctx strong { display: block; color: var(--fg); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.topbar__op { flex: none; display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 800; color: var(--cyan-ink); background: repeating-linear-gradient(135deg, var(--cyan) 0 6px, var(--cyan-hi) 6px 12px); }
.app--op .topbar { border-bottom: 2px solid var(--cyan); }
.sidebar {
position: fixed; z-index: 50; top: 0; left: 0; bottom: 0;
height: 100dvh; width: min(320px, 86vw);
transform: translateX(-102%);
transition: transform .22s var(--ease), visibility 0s linear .22s;
visibility: hidden;
box-shadow: var(--shadow-pop);
}
.sidebar:target, .nav-open .sidebar { transform: none; visibility: visible; transition: transform .22s var(--ease); }
.sidebar .sidebar__close { display: inline-flex; }
.nav-backdrop {
display: block; position: fixed; inset: 0; z-index: 40;
background: var(--scrim);
opacity: 0; pointer-events: none; transition: opacity .2s var(--ease);
}
.sidebar:target ~ .nav-backdrop, .nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
.nav__link { min-height: 46px; }
.main { padding: var(--s-5) var(--s-5) var(--s-10); }
.grid--aside, .grid--aside-l { grid-template-columns: minmax(0, 1fr); }
.sticky { position: static; }
.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auth { grid-template-columns: minmax(0, 1fr); }
.auth__aside { display: none; }
.auth__mlogo { display: block; height: 32px; width: auto; }
.auth__main { place-items: start center; padding: var(--s-8) var(--s-4); }
}
@media (max-width: 767px) {
:root { --t-3xl: 26px; --t-4xl: 34px; }
.main { padding: var(--s-4) var(--s-4) calc(88px + env(safe-area-inset-bottom)); }
.page { gap: var(--s-5); }
h1 { font-size: 26px; }
.tabbar {
position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
background: color-mix(in oklab, var(--bg-side) 94%, transparent);
backdrop-filter: blur(8px);
border-top: 1px solid var(--line);
}
.tabbar__link {
display: grid; justify-items: center; align-content: center; gap: 2px;
min-height: 54px; border-radius: var(--r-m);
color: var(--muted); font-size: 11.5px; font-weight: 700; text-decoration: none;
border: 0; background: none; font-family: inherit; cursor: pointer;
}
.tabbar__link[aria-current="page"] { color: var(--fg); }
.tabbar__link[aria-current="page"] .i { color: var(--accent-fg); }
.tabbar__link--primary .i {
width: 40px; height: 28px; border-radius: 14px;
-webkit-mask: none; mask: none; background: var(--accent);
position: relative;
}
.tabbar__link--primary .i::after {
content: ""; position: absolute; inset: 4px 10px; background: var(--accent-ink);
-webkit-mask: url("data:image/svg+xml,") center / contain no-repeat;
mask: url("data:image/svg+xml,") center / contain no-repeat;
}
.tabbar__link--primary { color: var(--fg); }
.page-head { align-items: stretch; flex-direction: column; }
.page-head__actions { display: flex; flex-wrap: wrap; }
.page-head__actions > .btn, .page-head__actions > form { flex: 1 1 auto; }
.page-head__actions > form .btn { width: 100%; }
.grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
.form-grid, .form-grid--3 { grid-template-columns: minmax(0, 1fr); }
.form-actions { flex-direction: column-reverse; align-items: stretch; }
.form-actions .btn { width: 100%; }
.form-actions__note { text-align: center; }
.card__foot > .btn-row { width: 100%; flex-direction: column-reverse; align-items: stretch; }
.card__foot > .btn-row .btn { width: 100%; }
.card__head, .card__body { padding-left: var(--s-4); padding-right: var(--s-4); }
.card__foot { padding-left: var(--s-4); padding-right: var(--s-4); }
.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi { padding: var(--s-4); }
.kpi__value { font-size: 22px; }
.kpi--wide, .kpi:last-child:nth-child(odd), .kpi--wide:first-child ~ .kpi:last-child:nth-child(even) { grid-column: 1 / -1; }
/* первая плитка широкая: «висит» последняя только при нечётном числе остальных */
.kpi--wide:first-child ~ .kpi:last-child:nth-child(odd) { grid-column: auto; }
.balance { grid-template-columns: minmax(0, 1fr); padding: var(--s-4); gap: var(--s-3); }
.balance__icon { display: none; }
.balance__value { font-size: var(--t-xl); }
.card__head { gap: var(--s-2) var(--s-3); }
.card__title { font-size: var(--t-m); }
.balance > .btn, .balance__action { grid-column: 1 / -1; }
.filters { padding: var(--s-3); gap: var(--s-3); }
.filters__group, .filters .select, .filters__range { width: 100%; min-width: 0; }
.filters__range .input { width: auto; flex: 1; min-width: 0; }
.filters__actions { margin-left: 0; width: 100%; }
.filters__actions .btn { flex: 1; }
.seg { display: flex; width: 100%; }
.seg__item { flex: 1 1 auto; }
.seg__label, a.seg__label { justify-content: center; width: 100%; min-height: 40px; padding: 0 var(--s-2); }
.toolbar__search { max-width: none; flex-basis: 100%; }
.toolbar__end { width: 100%; }
.toolbar__end .btn { flex: 1; }
/* Таблица → карточки */
.table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.table--stack, .table--stack tbody, .table--stack tfoot, .table--stack tr, .table--stack td, .table--stack th { display: block; width: 100%; }
.table--stack tr { display: flex; flex-direction: column; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); position: relative; }
.table--stack td.cell-main { order: -1; }
.table--stack td.col-act { order: 10; }
.table--stack tbody tr:last-child { border-bottom: 0; }
.table--stack td, .table--stack th {
display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
padding: 3px 0; border: 0; text-align: right; background: none !important;
}
.table--stack td::before, .table--stack th::before {
content: attr(data-label);
flex: none; max-width: 45%;
text-align: left; font-size: var(--t-s); font-weight: 600; color: var(--muted);
}
.table--stack td:not([data-label])::before, .table--stack td[data-label=""]::before { display: none; }
.table--stack td.cell-main {
display: block; text-align: left; padding: 0 0 var(--s-2); font-size: var(--t-m);
}
.table--stack td.cell-main::before { display: none; }
.table--stack td.col-act { justify-content: flex-start; padding-top: var(--s-2); width: 100%; }
.table--stack td.col-act::before { display: none; }
.table--stack td.col-act .btn--ghost:first-child { margin-left: calc(var(--s-3) * -1); }
.table--stack td.col-check { position: absolute; right: var(--s-4); top: var(--s-3); width: auto; padding: 0; }
.table--stack td.col-check::before { display: none; }
.table--stack .num { text-align: right; }
.table--stack td > * { min-width: 0; }
.table--stack td.cell-block { display: block; text-align: left; }
.table--stack td.cell-block::before { display: block; margin-bottom: 2px; max-width: none; }
.table--stack tr.is-error, .table--stack tr.is-warn { box-shadow: inset 3px 0 0 var(--err); background: color-mix(in oklab, var(--err) 7%, transparent); }
.table--stack tr.is-warn { box-shadow: inset 3px 0 0 var(--warn); background: color-mix(in oklab, var(--warn) 5%, transparent); }
.table--stack tr.is-error td:first-child, .table--stack tr.is-warn td:first-child { box-shadow: none; }
.table--stack tfoot tr { background: color-mix(in oklab, var(--surface-2) 80%, var(--bg)); border-radius: 0 0 var(--r-l) var(--r-l); }
.table--stack tfoot td, .table--stack tfoot th { background: none; }
.table--stack tbody tr:hover td { background: none; }
.table-foot { flex-direction: column; align-items: stretch; text-align: center; }
.pager { justify-content: center; flex-wrap: nowrap; gap: 2px; }
.pager__link { min-width: 40px; height: 44px; padding: 0 4px; }
.dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.receipt { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); }
.receipt__side { justify-items: start; text-align: left; }
.entity { padding: var(--s-4); }
.dialog__foot { flex-direction: column-reverse; }
.dialog__foot .btn { width: 100%; }
.secret__row { flex-direction: column; }
.code-block > .code { padding-right: var(--s-4); padding-top: 52px; }
.lockrow { grid-template-columns: auto minmax(0, 1fr); }
.lockrow > :last-child { grid-column: 1 / -1; }
.lockrow > :last-child .btn { width: 100%; }
.hide-mobile { display: none !important; }
.show-mobile { display: initial !important; }
.theme-switch--topbar { display: none; }
.steps { gap: var(--s-2) var(--s-4); }
.steps__item + .steps__item { padding-left: 0; }
.steps__item + .steps__item::after { display: none; }
.table--stack tr:has(td.col-check) td.cell-main { padding-right: 40px; }
.dropzone { padding: var(--s-6) var(--s-4); }
.dropzone__title { font-size: var(--t-m); }
}
@media (max-width: 380px) {
.btn { padding: 0 var(--s-4); }
}
@media (pointer: coarse) {
.btn--sm { min-height: var(--control-h); }
.btn--icon.btn--sm { width: var(--control-h); }
.input--sm { min-height: var(--control-h); }
.pager__link { height: 44px; }
.theme-switch__opt { min-width: 44px; height: 44px; }
.theme-switch--topbar .theme-switch__opt { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
.btn.is-loading::after { animation: none; border-right-color: var(--btn-fg); opacity: .6; }
}
@media (forced-colors: active) {
.badge::before, .i, .flash::before { forced-color-adjust: none; background: CanvasText; }
.btn { border: 1px solid ButtonText; }
.theme-switch__opt[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}
@media print {
/* печать всегда в светлых токенах: тёмный текст, светлые поверхности (третья копия блока LIGHT-TOKENS) */
:root {
color-scheme: light;
/* Слои: холодная «бумага ведомости» → белые карточки */
--bg: oklch(97.3% .005 250);
--bg-side: oklch(95.4% .008 250);
--surface: oklch(100% 0 0);
--surface-2: oklch(98.4% .004 250);
--surface-3: oklch(94.6% .008 250);
--sunken: oklch(96.6% .006 250);
--line: oklch(90.5% .009 250);
--line-2: oklch(84% .012 250);
/* Текст */
--fg: oklch(22% .02 255);
--fg-2: oklch(35% .02 255);
--muted: oklch(47.5% .02 255);
--faint: oklch(52% .018 255);
/* Бренд: заливка темнее на 9 L, чтобы кнопка держала 3:1 к фону; текст — отдельным токеном */
--brand: oklch(63% .165 152);
--brand-hi: oklch(59% .16 152);
--brand-ink: oklch(18% .035 160);
--brand-fg: oklch(48% .13 152);
--cyan: oklch(63.5% .12 218);
--cyan-hi: oklch(59.5% .115 220);
--cyan-ink: oklch(18% .035 220);
--cyan-fg: oklch(47% .1 228);
--link: oklch(48% .115 235);
--link-hi: oklch(40% .11 240);
/* Семантика: цвета «для текста», заливки из них же */
--ok: oklch(50% .13 152);
--err: oklch(55% .2 27);
--err-fg: oklch(50% .19 27);
--err-hi: oklch(49% .19 27);
--on-err: oklch(99% .005 25);
--warn: oklch(56% .13 65);
--warn-fg: oklch(48% .115 62);
--warn-ink: oklch(99% .005 80);
--info: oklch(50% .1 232);
--accent-fg: var(--brand-fg);
--op-accent-fg: var(--cyan-fg);
--op-bg-side: oklch(95% .016 220);
--focus: oklch(50% .15 245);
/* Контролы */
--field: oklch(100% 0 0);
--field-off: var(--surface-3);
--control-line: oklch(63% .02 255);
--control-line-hi: oklch(45% .02 255);
--btn-hover: oklch(91.5% .01 250);
--seg-on: var(--surface);
--seg-on-shadow: 0 1px 2px oklch(30% .03 255 / .16), 0 0 0 1px var(--line-2);
--scrim: oklch(25% .03 255 / .38);
--scrim-dialog: oklch(25% .03 255 / .5);
--vault-field: oklch(100% 0 0);
--vault-ph: oklch(52% .018 255);
--badge-mix: 62%;
--ink-soft: 90%;
--chevron: url("data:image/svg+xml,");
--shadow-pop: 0 18px 44px -14px oklch(30% .04 255 / .28), 0 0 0 1px var(--line-2);
}
.sidebar, .topbar, .tabbar, .nav-backdrop, .page-head__actions, .filters, .theme-switch { display: none !important; }
.app { display: block; }
body { background: #fff; color: #000; }
}
/* ---------- Дополнения ЛК (lk-client): QR-код подключения 2FA ---------- */
.qr { display: block; width: 240px; height: 240px; padding: 12px; background: #fff; border-radius: var(--r-m); image-rendering: pixelated; }