/*! Navex · UX-лаборатория (копия v2-mist/theme.css «Туман»; тёмное меню alt-nav=b отключено — тут alt-nav значит другое) · 2026-10-10
   Подключается ПОСЛЕДНИМ (после motion-kit.css → icons.css → ui.css → lab.css).
   Значения токенов совпадают с YAML в DESIGN.md до символа.

   ПРАВИЛО ИМЁН
   - Базовые компоненты — имена прода (SPEC §0.1): .btn .btn-primary … .card .badge .notice .modal .menu-sheet
     .tabs .tabs__item .segmented .sidebar__link .bottom-nav__item (+ .app-shell .app-main .page .topbar).
   - Всё остальное — префикс варианта `mz-` (mz-gel, mz-field, mz-avatar, mz-stack …).
   - Состояние — в атрибутах: aria-current / aria-selected / aria-expanded / data-state / [hidden] / .is-open.

   СОДЕРЖАНИЕ
    0  Токены (:root) и тёмная тема
    1  База: фон-холст, типографика, фокус, утилиты
    2  Каркас: .app-shell, .page
    3  Оболочка: сайдбар-рейка, шапка, полосы, нижняя навигация, шторка «Меню»
    4  Кнопки
    5  Поля, select, поиск, OTP
    6  Чекбокс, радио, переключатель, радио-карточка, сегмент, табы, чипы
    7  Бейджи и статусы
    8  Аватары
    9  Карточки, плитки, bento, ГЕЛЬ + цифры-табло, стопка таблеток, карточка клиента, тариф, канал
   10  Списки и таблица → карточки на телефоне
   11  Слои: модалка, шторка, меню/поповер, подтверждение, ⌘K, тултип, тосты
   12  Пустое состояние, skeleton, ошибка блока
   13  Полосы .notice
   14  Виджет «Баланс ИИ»
   15  Мини-графики
   16  Чат: пузыри, «Кто отвечает», поле ответа
   17  3D, стекло, фолбэки
   18  Телефон: липкое действие, FAB, safe-area
*/

/* ================================================================
   0. ТОКЕНЫ
   ================================================================ */
:root {
  color-scheme: light;

  /* — бренд и акцент (кислотный; только заливки, текст на нём #161616) — */
  --primary: #E3F450;
  --primary-hover: #D9EC3A;
  --primary-pressed: #CCDF2B;
  --on-primary: #161616;
  --primary-soft: #EFF8A6;
  --primary-faint: #F6FBD2;
  --primary-ink: #4F5A0A;          /* «кислотные чернила» для текста/иконок на светлом: 6,05:1 на холсте */
  --focus-ring: #161616;

  /* — лестница светлоты (вместо рамок) — */
  --canvas: #E6E7E6;               /* холст */
  --surface-subtle: #EEEFEE;       /* панель, колонка, дорожка */
  --surface: #F6F6F5;              /* карточка */
  --surface-raised: #FFFFFF;       /* белая плитка, поле, поповер, модалка */
  --surface-sunken: #DCDDDC;       /* «вдавленное»: дорожка сегмента, активный пункт таббара */
  --surface-tint: #F6FBD2;
  --scrim: #12131361;

  /* — текст — */
  --ink: #161616;                  /* 14,6:1 на холсте */
  --ink-soft: #5C5F61;             /* 5,19:1 на холсте */
  --ink-faint: #6A6D6F;            /* только на карточке/белом (4,82:1) или ≥ 18 px */
  --ink-inverse: #FFFFFF;

  /* — линии — */
  --line: #16161614;
  --line-strong: #878A8B;          /* граница полей: 3,48:1 к белому */

  /* — смысловые (AA на сером) — */
  --success: #1C7339;  --success-soft: #DCEDDF;
  --warning: #7F5300;  --warning-soft: #F5EACB;
  --danger:  #B32B2B;  --danger-soft:  #F6DEDB;
  --info:    #2459B8;  --info-soft:    #DEE7F7;
  --neutral: #5C5F61;  --neutral-soft: #E4E5E4;

  /* — гели (фирменный приём) — */
  --gel-green-1: #56944B;  --gel-green-2: #D7DFBA;
  --gel-pink-1: #E16991;   --gel-pink-2: #F0C3D7;
  --gel-orange-1: #EE7B31; --gel-orange-2: #E7E094; --gel-orange-3: #C3D9DA;

  /* — ИИ-признак: розовый гель — */
  --ai: #A8325F;                   /* текст/иконка ИИ: 5,15:1 на холсте */
  --ai-soft: #F7DDE8;              /* фон ИИ-пузыря, ИИ-чипа */
  --ai-gel: radial-gradient(120% 120% at 30% 25%, #F0C3D7 0%, #E16991 55%, #C24A78 100%);

  /* — этапы воронки (NX_DATA.stages[].color) — */
  --stage-new: #6B7A90; --stage-work: #2F6FDB; --stage-booked: #7A5AE0;
  --stage-confirmed: #0E9AA7; --stage-won: #1F9E5A; --stage-lost: #C2412D;
  /* — статусы записи (NX_DATA.apptStatuses) — */
  --appt-booked: #7A5AE0; --appt-confirmed: #0E9AA7; --appt-came: #1F9E5A; --appt-noshow: #C2412D; --appt-cancelled: #8C8C8C;
  /* — каналы — */
  --channel-whatsapp: #25D366; --channel-telegram: #2AABEE; --channel-instagram: #E1306C;
  --channel-instagram-gradient: linear-gradient(45deg, #F9CE34 0%, #EE2A7B 50%, #6228D7 100%);

  /* — стекло — */
  --glass-fill: #FFFFFF8C;
  --glass-fill-strong: #FFFFFFEB;
  --glass-border: #FFFFFFCC;
  --glass-blur: 20px;
  --glass-edge: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px rgb(255 255 255 / .55), 0 0 0 1px rgb(22 22 22 / .06);
  --glass-solid: #F6F6F5F7;

  /* — шрифты — */
  --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-dot: 'Doto', 'Inter Tight', ui-monospace, monospace;

  /* — шкала шрифта (px) — */
  --fs-display: 56px; --fs-h1: 32px; --fs-h2: 20px; --fs-h3: 16px;
  --fs-body: 15px; --fs-sm: 13px; --fs-caption: 12px; --fs-num-lg: 40px; --fs-input: 16px;

  /* — радиусы (сквирклы) — */
  --rounded-xs: 10px;
  --rounded-sm: 14px;
  --rounded-md: 20px;
  --rounded-lg: 28px;
  --rounded-xl: 36px;
  --rounded-pill: 999px;
  --rounded-full: 9999px;

  /* — отступы (сетка 4) — */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --space-unit: 4px; --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 20px; --space-xl: 24px; --space-xxl: 32px; --space-section: 48px;
  --space-card: 24px; --space-card-mobile: 16px; --space-block: 24px;
  --page-pad: 32px;

  /* — каркас — */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 84px;
  --topbar-h: 64px;
  --bottom-nav-h: 64px;
  --control-h: 40px; --control-h-lg: 48px; --control-h-sm: 32px; --touch-min: 44px;
  --content-max: 1360px;
  /* колонка сетки = панель + поля 12 + «карман» для выдвинутой таблетки активного пункта */
  --sb-w-open: 288px;
  --sb-w-closed: 176px;

  /* — тени (мягкий свет, без чёрного) — */
  --shadow-1: 0 1px 2px rgb(22 22 22 / .05), 0 2px 8px -2px rgb(22 22 22 / .05);
  --shadow-2: 0 2px 4px rgb(22 22 22 / .04), 0 12px 28px -10px rgb(22 22 22 / .14);
  --shadow-float: 0 4px 10px rgb(22 22 22 / .05), 0 24px 56px -16px rgb(22 22 22 / .24);
  --hl-top: inset 0 1px 0 rgb(255 255 255 / .9);

  /* — z — */
  --z-sticky: 10; --z-nav: 20; --z-dropdown: 30; --z-sheet: 40; --z-modal: 50; --z-toast: 60;

  /* — переменные, которые читают motion-kit / ui.js / icons — */
  --nx-accent: #161616;
  --nx-ink: #161616;
  --nx-paper: #F6F6F5;
  --nx-focus: #161616;
  --nx-scrim: #12131361;
  --nx-toast-bg: #1D1E1E;
  --nx-toast-ink: #F2F3F2;
  --nx-skel: rgb(22 22 22 / .07);
  --nx-skel-shine: rgb(255 255 255 / .7);
  --nx-lift-shadow: 0 4px 10px rgb(22 22 22 / .05), 0 24px 56px -16px rgb(22 22 22 / .24);
  --nx-drop-tint: rgb(227 244 80 / .28);
  --nx-switch-off: #A9ABAB;
  --nx-check-border: #878A8B;
  --nx-bubble: #FFFFFF;
  --nx-tab-ink: #FFFFFF;
  --nx-hold-fill: rgb(255 255 255 / .28);
  --nx-glass-solid: rgb(246 246 245 / .97);
  --nx-dot: #B32B2B;
  --nx-dot-ring: #E6E7E6;
  --nx-modal-w: 520px;
  --nx-sheet-w: 480px;
  --nx-drawer-w: 300px;
  --nx-sheet-max-w: 720px;
  --nx-otp-w: 48px; --nx-otp-h: 56px; --nx-otp-gap: 8px;
  --nx-bottom-ui: 0px;

  --mz-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* — тёмная тема: задуманная «ночная лаборатория», не инверсия (html[data-theme="dark"]) — */
:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #E3F450; --primary-hover: #EAF76E; --primary-pressed: #D6EA3A; --on-primary: #161616;
  --primary-soft: rgb(227 244 80 / .16); --primary-faint: rgb(227 244 80 / .08); --primary-ink: #E3F450; --focus-ring: #E3F450;
  --canvas: #121313; --surface-subtle: #18191A; --surface: #1E1F20; --surface-raised: #26272A; --surface-sunken: #0D0E0E;
  --surface-tint: rgb(227 244 80 / .08); --scrim: rgb(0 0 0 / .56);
  --ink: #F2F3F2; --ink-soft: #A4A7A9; --ink-faint: #9A9DA0; --ink-inverse: #161616;
  --line: #FFFFFF14; --line-strong: #6E7173;
  --success: #5CC77E; --success-soft: rgb(92 199 126 / .14);
  --warning: #E3B04B; --warning-soft: rgb(227 176 75 / .14);
  --danger: #F07171;  --danger-soft: rgb(240 113 113 / .14);
  --info: #7FA8F5;    --info-soft: rgb(127 168 245 / .14);
  --neutral: #A4A7A9; --neutral-soft: rgb(255 255 255 / .07);
  --ai: #F08DB3; --ai-soft: rgb(225 105 145 / .16);
  --glass-fill: rgb(30 31 32 / .58); --glass-fill-strong: rgb(30 31 32 / .9); --glass-border: rgb(255 255 255 / .12);
  --glass-edge: inset 0 1px 0 rgb(255 255 255 / .1), inset 0 0 0 1px rgb(255 255 255 / .06), 0 0 0 1px rgb(0 0 0 / .4);
  --glass-solid: rgb(30 31 32 / .97);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-2: 0 2px 4px rgb(0 0 0 / .3), 0 12px 28px -10px rgb(0 0 0 / .5);
  --shadow-float: 0 4px 10px rgb(0 0 0 / .3), 0 24px 56px -16px rgb(0 0 0 / .6);
  --hl-top: inset 0 1px 0 rgb(255 255 255 / .06);
  --nx-accent: #E3F450; --nx-ink: #F2F3F2; --nx-paper: #1E1F20; --nx-focus: #E3F450; --nx-scrim: rgb(0 0 0 / .56);
  --nx-toast-bg: #2C2D30; --nx-toast-ink: #F2F3F2; --nx-skel: rgb(255 255 255 / .06); --nx-skel-shine: rgb(255 255 255 / .07);
  --nx-switch-off: #4A4D50; --nx-check-border: #8A8D90; --nx-bubble: #26272A; --nx-tab-ink: #33353A;
  --nx-glass-solid: rgb(30 31 32 / .97); --nx-dot: #F07171; --nx-dot-ring: #121313;
  --nx-lift-shadow: 0 24px 56px -16px rgb(0 0 0 / .6); --nx-drop-tint: rgb(227 244 80 / .12);
}

/* ================================================================
   1. БАЗА
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  font-family: var(--font-text); font-size: var(--fs-body); line-height: 1.5; font-weight: 400;
  color: var(--ink);
  background-color: var(--canvas);
  /* холст лаборатории: сетка точек 1,5 / 22 px + две статичные гелевые ауры (под стеклом есть что размывать) */
  background-image:
    radial-gradient(520px 420px at 92% -4%, rgb(225 105 145 / .16), transparent 70%),
    radial-gradient(560px 460px at 2% 104%, rgb(86 148 75 / .14), transparent 70%),
    radial-gradient(circle, rgb(22 22 22 / .085) .75px, transparent 1.25px);
  background-size: auto, auto, 22px 22px;
  background-repeat: no-repeat, no-repeat, repeat;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
:root[data-theme="dark"] body {
  background-image:
    radial-gradient(520px 420px at 92% -4%, rgb(225 105 145 / .12), transparent 70%),
    radial-gradient(560px 460px at 2% 104%, rgb(86 148 75 / .12), transparent 70%),
    radial-gradient(circle, rgb(255 255 255 / .07) .75px, transparent 1.25px);
}
.mz-no-dots { background-image: none !important; }

h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--primary); color: var(--on-primary); }
kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  font: 500 12px/1 var(--font-text); color: var(--ink-soft);
  background: var(--surface-subtle); border-radius: 7px; box-shadow: inset 0 -1px 0 var(--line);
}
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 200; padding: 10px 16px; border-radius: var(--rounded-pill);
  background: var(--ink); color: var(--ink-inverse); text-decoration: none; font-weight: 500;
  translate: 0 -200%;
}
.skip-link:focus { translate: 0 0; }
.skip-link:not(:focus) { opacity: 0; pointer-events: none; }
[hidden] { display: none !important; }

/* — типографика — */
.mz-display { font: 250 var(--fs-display)/1.02 var(--font-display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums lining-nums; }
.mz-h1, .page__title { font: 300 var(--fs-h1)/1.12 var(--font-display); letter-spacing: -0.03em; }
.mz-h2 { font: 500 var(--fs-h2)/1.25 var(--font-display); letter-spacing: -0.01em; }
.mz-h3 { font: 600 var(--fs-h3)/1.35 var(--font-text); letter-spacing: 0; }
.mz-body { font: 400 var(--fs-body)/1.5 var(--font-text); }
.mz-small { font: 400 var(--fs-sm)/1.45 var(--font-text); }
.mz-label { font: 500 var(--fs-sm)/1.3 var(--font-text); letter-spacing: .01em; }
.mz-caption { font: 500 var(--fs-caption)/1.35 var(--font-text); letter-spacing: .01em; }
.mz-num, .mz-tnum { font-variant-numeric: tabular-nums lining-nums; }
.mz-num-lg { font: 250 var(--fs-num-lg)/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; }
.mz-soft { color: var(--ink-soft); }
.mz-faint { color: var(--ink-faint); }
/* «Ключ: значение» серым — подпись над крупным тонким заголовком (вместо капс-кикера) */
.mz-kv { font: 400 14px/1.4 var(--font-text); color: var(--ink-soft); }
.mz-kv b { font-weight: 500; color: var(--ink); }
/* метка группы КАПСОМ — только подписи групп меню и «ПАНЕЛЬ ПЛАТФОРМЫ» */
.mz-overline { font: 600 12px/1 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.mz-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mz-link { color: var(--ink); text-decoration: underline; text-decoration-color: rgb(22 22 22 / .3); text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
:root[data-theme="dark"] .mz-link { text-decoration-color: rgb(255 255 255 / .35); }
@media (hover: hover) and (pointer: fine) { .mz-link:hover { text-decoration-color: currentColor; } }
.mz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* деньги: «$12,40 ≈ 6 570 ₸» — доллары основным, ≈ ₸ мельче (0,8) и серым */
.nx-usd { font-variant-numeric: tabular-nums; font-weight: inherit; color: inherit; }
.nx-kzt { font-size: max(12px, .8em); color: var(--ink-soft); font-variant-numeric: tabular-nums; font-weight: 400; white-space: nowrap; }

/* раскладка-помощники */
.mz-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.mz-col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.mz-grow { flex: 1 1 auto; min-width: 0; }
.mz-gap-1 { gap: 4px; } .mz-gap-3 { gap: 12px; } .mz-gap-4 { gap: 16px; } .mz-gap-6 { gap: 24px; }
.mz-divider { height: 1px; background: var(--line); border: 0; margin: var(--space-4) 0; }

/* ================================================================
   2. КАРКАС
   ================================================================ */
.app-shell {
  display: grid;
  grid-template-columns: var(--sb-w) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  min-height: 100dvh;
}
.app-main { grid-column: 2; grid-row: 3; min-width: 0; outline: none; }
body[data-shell="none"] .app-shell { grid-template-columns: minmax(0, 1fr); }
body[data-shell="none"] .app-main { grid-column: 1; grid-row: 1 / -1; }
.page { width: 100%; max-width: var(--content-max); margin: 0 auto 0 0; padding: var(--space-6) var(--page-pad) var(--space-16) var(--space-2); }
body[data-shell="none"] .page { margin: 0 auto; padding-inline: var(--page-pad); }
.page__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.page__heading { display: grid; gap: var(--space-2); min-width: 0; }
.page__sub { color: var(--ink-soft); font-size: 14px; }
.heading-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mz-section { margin-top: var(--space-10); }
.mz-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }

/* ================================================================
   3. ОБОЛОЧКА
   ================================================================ */
/* --- 3.1 Сайдбар: стеклянная рейка 84 ↔ меню 264. Колонка сетки шире на «карман» для выдвинутой активной таблетки --- */
.sidebar {
  grid-column: 1; grid-row: 1 / -1;
  position: sticky; top: 0; z-index: var(--z-nav);
  height: 100dvh; padding: 12px 0 12px 12px;
  pointer-events: none;                       /* карман прозрачен для кликов; сама панель — auto */
}
.sidebar__panel {
  pointer-events: auto;
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  width: var(--sidebar-w-collapsed); height: 100%;
  padding: 16px 12px 12px;
  border-radius: var(--rounded-xl);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
          backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: var(--glass-edge), var(--shadow-2);
  transition: width var(--slow) var(--ease-drawer);
}
:root[data-sidebar="expanded"] .sidebar__panel, :root:not([data-sidebar]) .sidebar__panel { width: var(--sidebar-w); }
:root[data-sidebar-instant] .sidebar__panel { transition: none; }
.sidebar__top, .sidebar__foot { display: flex; flex-direction: column; gap: 8px; flex: none; }
.sidebar__nav { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 0; overflow: visible; }
:root[data-sidebar="expanded"] .sidebar__nav { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; margin: 0 -12px; padding-inline: 12px; }
.sidebar__nav::-webkit-scrollbar { display: none; }

.sidebar__logo { display: flex; align-items: center; gap: 10px; height: 44px; padding-left: 6px; color: var(--ink); text-decoration: none; border-radius: var(--rounded-pill); }
.sidebar__logo svg.mz-logo-mark { width: 36px; height: 36px; flex: none; }
.mz-wordmark { font: 300 21px/1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.mz-wordmark span { color: var(--ink-soft); }
.mz-wordmark small { font: 500 12px/1 var(--font-text); letter-spacing: .01em; color: var(--ink-soft); margin-left: 6px; }

.sidebar__group { padding: 14px 12px 6px; }
.sidebar__sep { display: none; height: 1px; margin: 8px 14px; background: var(--line); }
:root[data-sidebar="collapsed"] .sidebar__group { display: none; }
:root[data-sidebar="collapsed"] .sidebar__sep { display: block; }

.sidebar__link {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 12px 0 4px; border-radius: var(--rounded-pill);
  color: var(--ink-soft); text-decoration: none; font: 500 14px/1 var(--font-text);
  white-space: nowrap; cursor: pointer; background: transparent; border: 0; width: 100%; text-align: left;
}
.sidebar__ico {
  position: relative; display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--ink);
}
.sidebar__ico .nx-icon { --nx-size: 22px; }
.sidebar__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar__badge {
  flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--rounded-pill);
  display: inline-grid; place-items: center;
  font: 600 12px/1 var(--font-text); font-variant-numeric: tabular-nums;
  background: var(--danger); color: #fff;
}
.sidebar__badge--muted { background: rgb(22 22 22 / .07); color: var(--ink-soft); }
:root[data-theme="dark"] .sidebar__badge--muted { background: rgb(255 255 255 / .08); }
.sidebar__chev { flex: none; color: var(--ink-faint); }
.sidebar__dot { flex: none; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--surface-subtle); }
.sidebar__dot--danger { background: var(--danger); }
:root[data-sidebar="collapsed"] .sidebar__link:not([aria-current="page"]) .sidebar__dot { position: absolute; left: 32px; top: 4px; margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .sidebar__link:hover { background: rgb(255 255 255 / .55); color: var(--ink); }
  :root[data-theme="dark"] .sidebar__link:hover { background: rgb(255 255 255 / .06); }
}
/* активный: белая таблетка + иконка-близнец (Fill) */
.sidebar__link[aria-current="page"] {
  background: var(--surface-raised); color: var(--ink);
  box-shadow: var(--hl-top), var(--shadow-1);
}
.sidebar__link[aria-current="page"] .sidebar__ico { background: var(--primary); color: var(--on-primary); }
.sidebar__link[aria-disabled="true"] { color: var(--ink-faint); }
.sidebar__link[aria-disabled="true"] .sidebar__ico { color: var(--ink-faint); }

/* свёрнуто: круги-иконки; бейдж — в углу круга; активный — белая таблетка с подписью, выдвинутая из рейки (Flux) */
:root[data-sidebar="collapsed"] .sidebar__link { width: 48px; padding: 0 0 0 6px; margin-left: 6px; height: 44px; }
:root[data-sidebar="collapsed"] .sidebar__link .sidebar__badge {
  position: absolute; left: 28px; top: -3px; min-width: 20px; height: 20px; padding: 0 5px; font-size: 12px;
  box-shadow: 0 0 0 2px var(--surface);
}
:root[data-sidebar="collapsed"] .sidebar__link .sidebar__chev { display: none; }
:root[data-sidebar="collapsed"] .sidebar__link[aria-current="page"] {
  width: max-content; min-width: 48px; padding-right: 18px; z-index: 2;
}
:root[data-sidebar="collapsed"] .sidebar__link[aria-current="page"] .nx-side__label { opacity: 1; transition-delay: 120ms; transition-duration: var(--normal); }
:root[data-sidebar="collapsed"] .sidebar__link[aria-current="page"] .sidebar__badge { position: static; box-shadow: none; }
/* QA: серый счётчик в выдвинутой таблетке не показываем — иначе длинные подписи («Аккаунты 3») наезжают на контент */
:root[data-sidebar="collapsed"] .sidebar__link[aria-current="page"] .sidebar__badge--muted { display: none; }
:root[data-sidebar="collapsed"] .sidebar__link[aria-current="page"] { max-width: calc(var(--sidebar-w-collapsed) + 80px); }
:root[data-sidebar="collapsed"] .sidebar__link[aria-current="page"] .sidebar__label { overflow: hidden; text-overflow: ellipsis; }
:root[data-sidebar="collapsed"] .sidebar__link:not([aria-current="page"]) .sidebar__label { width: 0; flex: 0 0 0; }

/* переключатель проекта / ассистента — карточка 232×56 ↔ аватар 40 */
.sidebar__project {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 56px; padding: 0 12px 0 8px;
  border: 0; border-radius: var(--rounded-md); text-align: left; cursor: pointer;
  background: rgb(255 255 255 / .6); box-shadow: var(--hl-top), 0 0 0 1px var(--line); color: var(--ink);
}
:root[data-theme="dark"] .sidebar__project { background: rgb(255 255 255 / .05); }
.sidebar__project-text { display: grid; gap: 3px; min-width: 0; flex: 1; }
.sidebar__project-name { font: 600 14px/1.15 var(--font-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__project-meta { font: 500 12px/1.2 var(--font-text); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__project-meta.is-danger { color: var(--danger); }
:root[data-sidebar="collapsed"] .sidebar__project { width: 48px; height: 48px; padding: 4px; margin-left: 6px; border-radius: 50%; justify-content: center; background: transparent; box-shadow: none; }
:root[data-sidebar="collapsed"] .sidebar__project :is(.sidebar__project-text, .sidebar__chev) { display: none; }
@media (hover: hover) and (pointer: fine) { .sidebar__project:hover { background: var(--surface-raised); } }

.sidebar__launch { display: flex; align-items: center; gap: 10px; }

/* подвал: виджет баланса, аккаунт, свернуть */
.sidebar__account { display: flex; align-items: center; gap: 10px; height: 56px; width: 100%; padding: 0 8px; border: 0; border-radius: var(--rounded-pill); background: transparent; cursor: pointer; text-align: left; color: var(--ink); }
.sidebar__account-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.sidebar__account-name { font: 600 14px/1.2 var(--font-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__account-meta { font: 500 12px/1.2 var(--font-text); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) and (pointer: fine) { .sidebar__account:hover { background: rgb(255 255 255 / .55); } :root[data-theme="dark"] .sidebar__account:hover { background: rgb(255 255 255 / .06); } }
:root[data-sidebar="collapsed"] .sidebar__account { width: 48px; height: 48px; padding: 4px; margin-left: 6px; justify-content: center; }
:root[data-sidebar="collapsed"] .sidebar__account :is(.sidebar__account-text, .sidebar__chev) { display: none; }
.sidebar__toggle {
  position: absolute; top: 20px; right: -14px; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-2), 0 0 0 1px var(--line);
}
.sidebar__toggle .nx-icon { --nx-size: 16px; }
.sidebar__toggle::after { content: ""; position: absolute; inset: -8px; }
.sidebar__toggle .nx-side__chevron { display: inline-flex; }
/* «Тёмная рейка» (alt-nav=b) и панель платформы: графитовое стекло */
:root[data-mz-darknav] body[data-shell="project"] .sidebar__panel,
:root[data-mz-darknav] body[data-shell="assistants"] .sidebar__panel,
.sidebar--dark .sidebar__panel {
  background: linear-gradient(180deg, rgb(38 40 41 / .9), rgb(22 23 24 / .94));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 0 0 1px rgb(255 255 255 / .06), 0 24px 56px -16px rgb(0 0 0 / .45);
  color: #F2F3F2;
  --ink: #F2F3F2; --ink-soft: #A4A7A9; --ink-faint: #8E9194; --line: rgb(255 255 255 / .1);
  --surface: #1E1F20; --surface-raised: #2E3033;
}
:root[data-mz-darknav] body:is([data-shell="project"], [data-shell="assistants"]) .sidebar__project,
.sidebar--dark .sidebar__project { background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
:root[data-mz-darknav] body:is([data-shell="project"], [data-shell="assistants"]) .sidebar__link[aria-current="page"],
.sidebar--dark .sidebar__link[aria-current="page"] { background: #F2F3F2; color: #161616; box-shadow: none; }
:root[data-mz-darknav] body:is([data-shell="project"], [data-shell="assistants"]) .sidebar__link[aria-current="page"] .sidebar__label,
.sidebar--dark .sidebar__link[aria-current="page"] .sidebar__label { color: #161616; }
@media (hover: hover) and (pointer: fine) {
  :root[data-mz-darknav] body:is([data-shell="project"], [data-shell="assistants"]) .sidebar__link:not([aria-current="page"]):hover,
  .sidebar--dark .sidebar__link:not([aria-current="page"]):hover,
  .sidebar--dark .sidebar__account:hover { background: rgb(255 255 255 / .07); }
}
.sidebar--dark .sidebar__toggle { background: #2E3033; color: #F2F3F2; }
.sidebar__admin-label { padding: 6px 12px 2px; color: var(--primary); }
.sidebar--dark .sidebar__admin-label { color: #E3F450; }
.sidebar__admin-short { display: none; }
:root[data-sidebar="collapsed"] .sidebar__admin-label { padding: 4px 0; text-align: center; }
:root[data-sidebar="collapsed"] .sidebar__admin-label .sidebar__admin-full { display: none; }
:root[data-sidebar="collapsed"] .sidebar__admin-label .sidebar__admin-short { display: inline-block; padding: 4px 8px; border-radius: 999px; background: rgb(227 244 80 / .16); letter-spacing: .02em; text-transform: none; }

/* --- 3.2 Шапка ПК 64: поиск ⌘K · ? · чип ИИ · колокольчик (стекло) --- */
.topbar {
  grid-column: 2; grid-row: 1; position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-3);
  height: calc(var(--topbar-h) + 12px); padding: 12px var(--page-pad) 0 var(--space-2);
}
.topbar__bar {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; max-width: var(--content-max); height: var(--topbar-h);
  padding: 0 10px 0 10px; border-radius: var(--rounded-pill);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: var(--glass-edge), var(--shadow-1);
}
.topbar__search {
  display: flex; align-items: center; gap: 10px; width: 400px; max-width: 46vw; height: 44px; padding: 0 8px 0 16px;
  border: 0; border-radius: var(--rounded-pill); cursor: text; text-align: left;
  background: var(--surface-raised); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line);
  font: 400 14px/1 var(--font-text);
}
.topbar__search .nx-icon { --nx-size: 20px; color: var(--ink); }
.topbar__search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__spacer { flex: 1; }
.topbar__title { display: none; }
.topbar__eyebrow { font: 500 12px/1.2 var(--font-text); color: var(--ink-soft); }
.topbar__heading { font: 600 17px/1.2 var(--font-text); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__desk-title { display: grid; gap: 2px; padding-left: 10px; min-width: 0; }
.topbar__desk-title .topbar__heading { font: 400 20px/1.1 var(--font-display); letter-spacing: -0.02em; }
.topbar__count { position: absolute; top: -1px; left: 24px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--rounded-pill);
  display: grid; place-items: center; font: 600 12px/1 var(--font-text); font-variant-numeric: tabular-nums;
  background: var(--danger); color: #fff; box-shadow: 0 0 0 2px var(--surface-raised); pointer-events: none; }
.topbar .topbar__phone-only { display: none; }
.topbar__project-btn { display: none; }

/* чип ИИ: точка + «ИИ» */
.mz-aichip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border: 0; cursor: pointer;
  border-radius: var(--rounded-pill); background: var(--surface-raised); color: var(--ink); font: 600 13px/1 var(--font-text);
  box-shadow: inset 0 0 0 1px var(--line);
}
.mz-aichip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgb(28 115 57 / .15); }
.mz-aichip[data-ai="off"] .mz-aichip__dot { background: #A39E93; box-shadow: none; }
.mz-aichip[data-ai="schedule"] .mz-aichip__dot { background: #D9A300; box-shadow: 0 0 0 3px rgb(217 163 0 / .18); }
.mz-aichip[data-ai="stop"] .mz-aichip__dot { background: var(--danger); box-shadow: 0 0 0 3px rgb(179 43 43 / .15); }

/* --- 3.3 Слот полос под шапкой --- */
.mz-banners { grid-column: 2; grid-row: 2; padding: 12px var(--page-pad) 0 var(--space-2); display: grid; gap: 8px; max-width: calc(var(--content-max) + var(--page-pad) + 8px); }
.mz-banners:empty { display: none; }
.mz-banners__more[hidden] { display: none; }
.mz-banners__rest { display: grid; gap: 8px; }

/* --- 3.4 Нижняя навигация (телефон) --- */
.bottom-nav { display: none; }

/* --- 3.5 Шторка «Меню» (телефон) --- */
.mz-msheet { padding: 0 16px 16px; display: grid; gap: 12px; align-content: start; }
.mz-msheet__group { display: grid; gap: 2px; padding: 8px; border-radius: var(--rounded-md); background: var(--surface); }
.mz-msheet__title { padding: 8px 8px 4px; }
.mz-msheet__item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; border-radius: var(--rounded-sm); color: var(--ink); text-decoration: none; font: 500 15px/1.2 var(--font-text); background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer; }
.mz-msheet__item .nx-icon { --nx-size: 22px; color: var(--ink-soft); }
.mz-msheet__item[aria-current="page"] { background: var(--surface-raised); box-shadow: var(--shadow-1); }
.mz-msheet__item .sidebar__chev { margin-left: auto; }
.mz-msheet__item--danger { color: var(--danger); }
.mz-msheet__item--danger .nx-icon { color: var(--danger); }

/* ================================================================
   4. КНОПКИ: .btn + .btn-primary | -secondary | -outline | -ghost | -danger | -icon | -fab;  размеры .btn-sm | .btn-lg
   Переходы — только классом nx-press (kit). Ховеры — в (hover:hover).
   ================================================================ */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--control-h); padding: 0 18px; min-width: 0;
  border: 0; border-radius: var(--rounded-pill); cursor: pointer;
  font: 500 14px/1 var(--font-text); letter-spacing: 0; white-space: nowrap; text-decoration: none;
  background: var(--surface-raised); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  -webkit-user-select: none; user-select: none;
}
.btn .nx-icon { --nx-size: 20px; }
/* раунд 9: центровка — отступы слева и справа равны (раньше у кнопок с иконкой слева было 14 / 18, содержимое сдвигалось на 2 px) */
.btn:has(> .nx-icon:first-child), .btn:has(> .nx-busy__label > .nx-icon:first-child) { padding-inline: 16px; }
.btn-sm { height: var(--control-h-sm); padding: 0 14px; font-size: 13px; gap: 6px; }
.btn-sm:has(> .nx-icon:first-child), .btn-sm:has(> .nx-busy__label > .nx-icon:first-child) { padding-inline: 14px; }
.btn-sm .nx-icon { --nx-size: 18px; }
.btn-lg { height: var(--control-h-lg); padding: 0 24px; font-size: 15px; }
.btn-lg:has(> .nx-icon:first-child), .btn-lg:has(> .nx-busy__label > .nx-icon:first-child) { padding-inline: 24px; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--primary); color: var(--on-primary); font-weight: 600;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 0 0 1px rgb(22 22 22 / .1), 0 6px 16px -8px rgb(120 140 0 / .55);
}
.btn-secondary { background: var(--surface-raised); color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: none; }
.btn-danger { background: var(--danger); color: #fff; font-weight: 600; box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 6px 16px -8px rgb(179 43 43 / .6); }
:root[data-theme="dark"] .btn-danger { background: #C43B3B; }
.btn-dark { background: var(--ink); color: var(--ink-inverse); box-shadow: none; }
.btn-icon { width: var(--control-h); padding: 0; flex: none; border-radius: 50%; }
.btn.btn-icon.btn-icon, .btn.btn-fab.btn-fab { padding: 0 !important; }   /* иконка строго по центру круглой кнопки */
.btn-icon.btn-sm { width: var(--control-h-sm); }
.btn-icon.btn-lg { width: var(--control-h-lg); }
.btn-icon .nx-icon { --nx-size: 22px; }
.btn-fab {
  width: 56px; height: 56px; padding: 0; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 0 0 1px rgb(22 22 22 / .1), 0 14px 32px -10px rgb(22 22 22 / .4);
}
.btn-fab .nx-icon { --nx-size: 26px; }
.btn .btn__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--rounded-pill); display: inline-grid; place-items: center; background: rgb(22 22 22 / .08); font: 600 12px/1 var(--font-text); font-variant-numeric: tabular-nums; }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover, .btn-fab:hover { background: var(--primary-hover); }
  .btn-secondary:hover, .btn:not([class*="btn-"]):hover { background: var(--surface); }
  .btn-outline:hover { background: rgb(22 22 22 / .04); box-shadow: inset 0 0 0 1px var(--ink); }
  .btn-ghost:hover { background: rgb(22 22 22 / .06); }
  :root[data-theme="dark"] .btn-ghost:hover, :root[data-theme="dark"] .btn-outline:hover { background: rgb(255 255 255 / .07); }
  .btn-danger:hover { background: #9E2424; }
  .btn-dark:hover { background: #2A2B2B; }
}
.btn-primary:active, .btn-fab:active { background: var(--primary-pressed); }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn[data-busy] { cursor: progress; opacity: 1; }
.btn[data-busy="done"].btn-primary { background: var(--primary); }
/* «замороженные» состояния для кита: .is-hover .is-active .is-focus */
.btn-primary.is-hover { background: var(--primary-hover); }
.btn-secondary.is-hover { background: var(--surface); }
.btn-outline.is-hover { background: rgb(22 22 22 / .04); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-ghost.is-hover { background: rgb(22 22 22 / .06); }
.btn-danger.is-hover { background: #9E2424; }
.btn.is-active { scale: var(--press-scale); }
.btn-primary.is-active { background: var(--primary-pressed); }
.btn.is-focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn.is-busy .nx-busy__label { opacity: 0; }
.btn.is-busy .nx-busy__spin { opacity: 1; scale: 1; animation-play-state: running; }

/* ================================================================
   5. ПОЛЯ
   <label class="mz-field"><span class="mz-field__label">…</span><input class="mz-input"><span class="mz-field__hint">…</span></label>
   ================================================================ */
.mz-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.mz-field__label { font: 500 13px/1.3 var(--font-text); color: var(--ink); letter-spacing: .01em; }
.mz-field__label small { font-weight: 400; color: var(--ink-soft); }
.mz-field__hint { font: 400 13px/1.4 var(--font-text); color: var(--ink-soft); }
.mz-field__error { display: flex; align-items: flex-start; gap: 6px; font: 500 13px/1.4 var(--font-text); color: var(--danger); }
.mz-field__error .nx-icon { --nx-size: 16px; margin-top: 1px; }
.mz-field__saved { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.4 var(--font-text); color: var(--success); }
.mz-field__saved .nx-icon { --nx-size: 16px; }
.mz-field__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.mz-input, .mz-select, .mz-textarea {
  display: block; width: 100%; min-width: 0; height: var(--control-h); padding: 0 16px;
  font: 400 15px/1.3 var(--font-text); color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong); border-radius: var(--rounded-pill);
  outline: none;
  transition: border-color var(--fast) var(--ease-hover), box-shadow var(--fast) var(--ease-hover), background-color var(--fast) var(--ease-hover);
}
.mz-textarea { height: auto; min-height: 96px; padding: 12px 16px; border-radius: var(--rounded-md); line-height: 1.5; resize: vertical; }
.mz-input::placeholder, .mz-textarea::placeholder { color: var(--ink-faint); }
@media (hover: hover) and (pointer: fine) { .mz-input:hover, .mz-select:hover, .mz-textarea:hover { border-color: var(--ink-soft); } }
.mz-input:focus-visible, .mz-select:focus-visible, .mz-textarea:focus-visible,
.mz-input.is-focus, .mz-input:focus, .mz-select:focus, .mz-textarea:focus {
  border-color: var(--ink); box-shadow: 0 0 0 4px rgb(227 244 80 / .75); outline: none;
}
:root[data-theme="dark"] :is(.mz-input, .mz-select, .mz-textarea):is(:focus, .is-focus) { box-shadow: 0 0 0 4px rgb(227 244 80 / .3); }
.mz-input[aria-invalid="true"], .mz-textarea[aria-invalid="true"], .mz-select[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px rgb(179 43 43 / .12); }
.mz-input:disabled, .mz-select:disabled, .mz-textarea:disabled { background: var(--surface-subtle); color: var(--ink-faint); border-style: dashed; cursor: not-allowed; }
.mz-input.is-saved { border-color: var(--success); }

/* поле с иконкой/кнопкой внутри */
.mz-input-wrap { position: relative; display: flex; align-items: center; min-width: 0; }
.mz-input-wrap > .mz-input { padding-left: 44px; }
.mz-input-wrap > .nx-icon:first-child { position: absolute; left: 16px; --nx-size: 20px; color: var(--ink-soft); pointer-events: none; }
.mz-input-wrap--end > .mz-input { padding-left: 16px; padding-right: 48px; }
.mz-input-wrap__btn { position: absolute; right: 4px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); }
.mz-input-wrap__btn::after { content: ""; position: absolute; inset: -4px; }
.mz-input-wrap__btn .nx-icon { --nx-size: 20px; }
@media (hover: hover) and (pointer: fine) { .mz-input-wrap__btn:hover { background: rgb(22 22 22 / .06); color: var(--ink); } }
@media (max-width: 767.98px) { .mz-input-wrap__btn { width: 40px; height: 40px; right: 2px; } .mz-input-wrap__btn::after { inset: -2px; } }
.mz-input-wrap__kbd { position: absolute; right: 10px; pointer-events: none; }
.mz-counter { font: 500 12px/1 var(--font-text); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mz-counter.is-over { color: var(--danger); }

.mz-select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
}
:root[data-theme="dark"] .mz-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F3F2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); }

/* OTP (ячейки рисует ui.js): белые сквирклы 48×56 */
.nx-otp__cell {
  border-radius: var(--rounded-sm); background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 300 28px/1 var(--font-display); color: var(--ink);
  transition: box-shadow var(--fast) var(--ease-hover);
}
.nx-otp__cell[data-filled] { box-shadow: inset 0 0 0 1px var(--ink); }
.nx-otp[data-focus] .nx-otp__cell[data-active] { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgb(227 244 80 / .75); }
.nx-otp[data-nx-error] .nx-otp__cell { box-shadow: inset 0 0 0 1.5px var(--danger); background: var(--danger-soft); }
.nx-otp[data-nx-disabled] .nx-otp__cell, .nx-otp:has(input:disabled) .nx-otp__cell { background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-faint); }
.mz-otp--split .nx-otp__cell:nth-child(3) { margin-right: 20px; }
.mz-otp--split .nx-otp__cell:nth-child(3)::after { content: ""; position: absolute; right: -16px; width: 12px; height: 2px; border-radius: 1px; background: var(--ink-faint); }

/* ================================================================
   6. ВЫБОР: чекбокс/радио/переключатель (kit .nx-check .nx-radio .nx-switch) + обёртки
   ================================================================ */
.nx-switch:checked { background: var(--primary); box-shadow: inset 0 0 0 1px rgb(22 22 22 / .18); }
.nx-switch::before { background: #FFFFFF; }
.nx-switch:checked::before { background: #161616; box-shadow: none; }
.nx-switch:disabled { opacity: .5; cursor: not-allowed; }
.nx-switch[aria-busy="true"] { cursor: progress; opacity: .7; }
:root[data-theme="dark"] .nx-switch:checked::before { background: #161616; }
.nx-check:checked::before { background: var(--ink-inverse); }
:root[data-theme="dark"] .nx-check:checked::before { background: #161616; }
.nx-check, .nx-radio { background: var(--surface-raised); }

.mz-check-row { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font: 400 15px/1.35 var(--font-text); }
.mz-check-row--top { align-items: flex-start; }
.mz-check-row:has(input:disabled) { color: var(--ink-faint); cursor: not-allowed; }
.mz-check-row--top input { margin-top: 2px; }
.mz-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 8px 8px 8px 16px; border-radius: var(--rounded-md); background: var(--surface-raised); }
.mz-switch-row__text { display: grid; gap: 2px; min-width: 0; }
.mz-switch-row__title { font: 500 15px/1.3 var(--font-text); }
.mz-switch-row__hint { font: 400 13px/1.4 var(--font-text); color: var(--ink-soft); }

/* радио-карточка: <label class="mz-radio-card"><input type="radio" class="nx-radio"> <span>…</span></label> */
.mz-radio-card {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; cursor: pointer;
  border-radius: var(--rounded-md); background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  transition: box-shadow var(--fast) var(--ease-hover), background-color var(--fast) var(--ease-hover);
}
.mz-radio-card .nx-radio, .mz-radio-card .nx-check { margin-top: 2px; }
.mz-radio-card__title { display: block; font: 600 15px/1.35 var(--font-text); }
.mz-radio-card__text { display: block; margin-top: 4px; font: 400 13px/1.45 var(--font-text); color: var(--ink-soft); }
.mz-radio-card:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--ink), var(--shadow-2); background: var(--surface-raised); }
.mz-radio-card:has(input:checked)::after { content: none; }
@media (hover: hover) and (pointer: fine) { .mz-radio-card:hover { box-shadow: inset 0 0 0 1px var(--ink-faint), var(--shadow-1); } }
.mz-radio-card:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* сегмент: «вдавленная» дорожка + белая таблетка-бегунок (nxTabs) */
.segmented {
  position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--rounded-pill);
  background: var(--surface-sunken); box-shadow: inset 0 1px 2px rgb(22 22 22 / .08);
  --nx-tab-ink: var(--surface-raised); max-width: 100%;
}
.segmented .nx-tabs__ink { box-shadow: var(--shadow-1), var(--hl-top); }
.segmented [role="tab"], .segmented__item {
  position: relative; z-index: 1; height: 32px; padding: 0 16px; border: 0; border-radius: var(--rounded-pill);
  background: transparent; color: var(--ink-soft); font: 500 13px/1 var(--font-text); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 0 auto;
}
.segmented [role="tab"][aria-selected="true"] { color: var(--ink); }
.segmented [role="tab"] .nx-icon { --nx-size: 18px; }
.segmented--lg [role="tab"] { height: 40px; padding: 0 20px; font-size: 14px; }
.segmented--block { display: flex; width: 100%; }
:root[data-theme="dark"] .segmented { --nx-tab-ink: #33353A; }

/* табы разделов: без дорожки, бегунок — графитовая таблетка, текст белый */
.tabs { position: relative; display: flex; gap: 4px; --nx-tab-ink: var(--ink); max-width: 100%; }
.tabs [role="tab"], .tabs__item {
  position: relative; z-index: 1; height: 40px; padding: 0 18px; border: 0; border-radius: var(--rounded-pill);
  background: transparent; color: var(--ink-soft); font: 500 14px/1 var(--font-text); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  transition: color var(--normal) var(--ease-hover);
}
.tabs [role="tab"][aria-selected="true"], .tabs__item.is-active { color: var(--ink-inverse); }
.tabs [role="tab"] .tabs__count, .tabs__item .tabs__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font: 600 12px/1 var(--font-text); font-variant-numeric: tabular-nums; background: rgb(22 22 22 / .07); color: var(--ink-soft); }
.tabs [role="tab"][aria-selected="true"] .tabs__count { background: rgb(255 255 255 / .18); color: inherit; }
@media (hover: hover) and (pointer: fine) { .tabs [role="tab"]:not([aria-selected="true"]):hover, .segmented [role="tab"]:not([aria-selected="true"]):hover { color: var(--ink); } }
:root[data-theme="dark"] .tabs { --nx-tab-ink: #F2F3F2; }
:root[data-theme="dark"] .tabs [role="tab"][aria-selected="true"] { color: #161616; }

/* чипы-фильтры (32): <button class="mz-chip" aria-pressed="true">Новые <span class="mz-chip__x">×</span></button> */
.mz-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; flex: none;
  border: 0; border-radius: var(--rounded-pill); cursor: pointer; white-space: nowrap;
  background: var(--surface-raised); color: var(--ink); font: 500 13px/1 var(--font-text);
  box-shadow: inset 0 0 0 1px var(--line);
}
.mz-chip .nx-icon { --nx-size: 16px; }
.mz-chip[aria-pressed="true"], .mz-chip.is-on { background: var(--ink); color: var(--ink-inverse); box-shadow: none; }
.mz-chip__x { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: -6px; border-radius: 50%; background: rgb(255 255 255 / .16); }
.mz-chip__x .nx-icon { --nx-size: 14px; }
.mz-chip__count { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.mz-chip[aria-pressed="true"] .mz-chip__count { color: rgb(255 255 255 / .72); }
@media (hover: hover) and (pointer: fine) { .mz-chip:not([aria-pressed="true"]):hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink-faint); } }
.mz-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mz-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); }
.mz-chips--scroll::-webkit-scrollbar { display: none; }

/* ================================================================
   7. БЕЙДЖИ И СТАТУСЫ: .badge + --ok|--warn|--danger|--info|--neutral|--ai|--outline|--solid-danger
   Статус всегда со словом; точка — .badge__dot
   ================================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; flex: none;
  border-radius: var(--rounded-pill); white-space: nowrap; max-width: 100%;
  font: 500 12px/1 var(--font-text); letter-spacing: .01em; font-variant-numeric: tabular-nums;
  background: var(--neutral-soft); color: var(--neutral);
}
.badge .nx-icon { --nx-size: 14px; }
.badge--lg { height: 28px; padding: 0 12px; font-size: 13px; }
.badge__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; }
.badge--ok { background: var(--success-soft); color: var(--success); }
.badge--warn { background: var(--warning-soft); color: var(--warning); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--info { background: var(--info-soft); color: var(--info); }
.badge--neutral { background: var(--neutral-soft); color: var(--ink-soft); }
.badge--outline { background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line-strong); }
.badge--solid-danger { background: var(--danger); color: #fff; }
.badge--lime { background: var(--primary); color: var(--on-primary); }
/* ИИ-признак: розовый гель */
.badge--ai { background: var(--ai-soft); color: var(--ai); }
.badge--ai .badge__dot, .mz-ai-dot { background: var(--ai-gel); }
.mz-ai-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: inset 0 1px 1px rgb(255 255 255 / .6); }
/* чип «Отвечает: ИИ / Нурлан / выключен / вне расписания / остановлен» */
.badge--resp { background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.badge--resp[data-ai="on"] .badge__dot { background: var(--success); }
.badge--resp[data-ai="off"] .badge__dot { background: #A39E93; }
.badge--resp[data-ai="schedule"] .badge__dot { background: #D9A300; }
.badge--resp[data-ai="stop"] .badge__dot { background: var(--danger); }
.badge--resp[data-ai="staff"] .badge__dot { background: var(--ink); }
/* этапы воронки: <span class="badge badge--stage" data-stage="new">Новый</span> */
.badge--stage { --c: var(--stage-new); background: color-mix(in srgb, var(--c) 13%, var(--surface-raised)); color: var(--ink); }
.badge--stage .badge__dot, .badge--stage::before { background: var(--c); }
.badge--stage::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
[data-stage="new"] { --c: var(--stage-new); } [data-stage="work"] { --c: var(--stage-work); } [data-stage="booked"] { --c: var(--stage-booked); }
[data-stage="confirmed"] { --c: var(--stage-confirmed); } [data-stage="won"] { --c: var(--stage-won); } [data-stage="lost"] { --c: var(--stage-lost); }
/* статусы записи: <span class="badge badge--appt" data-appt="came">Пришёл</span> */
.badge--appt { --c: var(--appt-booked); background: color-mix(in srgb, var(--c) 13%, var(--surface-raised)); color: var(--ink); }
.badge--appt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c); }
[data-appt="booked"] { --c: var(--appt-booked); } [data-appt="confirmed"] { --c: var(--appt-confirmed); } [data-appt="came"] { --c: var(--appt-came); }
[data-appt="noshow"] { --c: var(--appt-noshow); } [data-appt="cancelled"] { --c: var(--appt-cancelled); }
.badge--appt[data-appt="cancelled"] { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgb(22 22 22 / .4); }
/* счётчики */
.mz-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--rounded-pill); font: 600 12px/1 var(--font-text); font-variant-numeric: tabular-nums; background: var(--danger); color: #fff; }
.mz-count--muted { background: rgb(22 22 22 / .08); color: var(--ink-soft); }
.mz-count--lime { background: var(--primary); color: var(--on-primary); }
/* температура клиента: точка + слово */
.mz-temp { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--font-text); color: var(--ink-soft); }
.mz-temp::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #D9480F); }
.mz-temp[data-temp="hot"] { --c: #D9480F; } .mz-temp[data-temp="warm"] { --c: #E0A100; } .mz-temp[data-temp="cold"] { --c: #4A7FB5; }

/* ================================================================
   8. АВАТАРЫ: .mz-avatar (--20/28/36/48/72), значок канала, точка, проект, стопка
   ================================================================ */
.mz-avatar {
  --s: 36px; position: relative; display: inline-grid; place-items: center; flex: 0 0 auto;
  width: var(--s); aspect-ratio: 1 / 1; border-radius: 50%;
  background: var(--av-bg, #DCDDDC); color: var(--av-fg, var(--ink));
  font: 600 calc(var(--s) * .36)/1 var(--font-text); letter-spacing: 0; -webkit-user-select: none; user-select: none;
}
.mz-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.mz-avatar--20 { --s: 20px; font-size: 12px; font-weight: 600; } .mz-avatar--28 { --s: 28px; font-size: 12px; } .mz-avatar--36 { --s: 36px; }
.mz-avatar--40 { --s: 40px; } .mz-avatar--48 { --s: 48px; } .mz-avatar--72 { --s: 72px; font-weight: 500; }
.mz-avatar--project { border-radius: 32%; color: #fff; }
.mz-avatar--staff { box-shadow: inset 0 0 0 2px var(--surface-raised); }
.mz-avatar--ai { background: var(--ai-gel); color: #fff; }
/* значок канала 14–16 в углу */
.mz-avatar__ch { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-raised); box-shadow: 0 0 0 1.5px var(--surface-raised); }
.mz-avatar__ch .nx-icon { --nx-size: 16px; }
.mz-avatar--28 .mz-avatar__ch, .mz-avatar--20 .mz-avatar__ch { width: 12px; height: 12px; right: -3px; bottom: -3px; }
.mz-avatar--28 .mz-avatar__ch .nx-icon, .mz-avatar--20 .mz-avatar__ch .nx-icon { --nx-size: 12px; }
.mz-avatar--72 .mz-avatar__ch { width: 22px; height: 22px; }
.mz-avatar--72 .mz-avatar__ch .nx-icon { --nx-size: 22px; }
/* точка онлайн / непрочитанного */
.mz-avatar__dot { position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--surface-raised); }
.mz-avatar__dot--unread { background: var(--danger); }
/* стопка: .mz-avatars > .mz-avatar … + .mz-avatars__more */
.mz-avatars { display: inline-flex; align-items: center; }
.mz-avatars > * + * { margin-left: -6px; }
.mz-avatars > .mz-avatar { box-shadow: 0 0 0 2px var(--surface-raised); font-size: max(12px, calc(var(--s) * .32)); letter-spacing: -0.02em; }
.mz-avatars__more { --s: 28px; background: var(--surface-sunken); color: var(--ink-soft); font: 600 12px/1 var(--font-text); }

/* ================================================================
   9. КАРТОЧКИ И ПЛИТКИ
   ================================================================ */
/* базовая карточка: свет, а не рамка */
.card {
  position: relative; display: block; min-width: 0;
  padding: var(--space-card); border-radius: var(--rounded-lg);
  background: var(--surface); box-shadow: var(--hl-top), var(--shadow-1);
}
.card--white { background: var(--surface-raised); }
.card--flat { background: var(--surface-subtle); box-shadow: none; }
.card--tight { padding: 16px; border-radius: var(--rounded-md); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; min-width: 0; }
.card__title { font: 500 17px/1.3 var(--font-display); letter-spacing: -0.01em; margin: 0; }
.card__sub { font: 400 13px/1.45 var(--font-text); color: var(--ink-soft); margin-top: 2px; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
a.card, button.card { text-decoration: none; color: inherit; cursor: pointer; border: 0; text-align: left; font: inherit; width: 100%; }
/* вложенная белая плитка внутри карточки: радиус 28 − 8 = 20 */
.mz-inset { border-radius: var(--rounded-md); background: var(--surface-raised); padding: 16px; }

/* bento: сетка 12 колонок, плитки по спанам */
.mz-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.mz-bento > * { grid-column: span 4; }
.mz-span-3 { grid-column: span 3 !important; } .mz-span-4 { grid-column: span 4 !important; } .mz-span-5 { grid-column: span 5 !important; }
.mz-span-6 { grid-column: span 6 !important; } .mz-span-7 { grid-column: span 7 !important; } .mz-span-8 { grid-column: span 8 !important; } .mz-span-12 { grid-column: 1 / -1 !important; }

/* плитка-счётчик: подпись + огромная тонкая цифра + подпись-сноска */
.mz-tile {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 20px 20px 18px; border-radius: var(--rounded-lg);
  background: var(--surface-raised); box-shadow: var(--hl-top), var(--shadow-1);
  color: inherit; text-decoration: none;
}
.mz-tile__label { display: flex; align-items: center; gap: 8px; font: 500 13px/1.3 var(--font-text); color: var(--ink-soft); }
.mz-tile__label .nx-icon { --nx-size: 18px; color: var(--ink); }
.mz-tile__value { display: flex; align-items: flex-start; gap: 6px; font: 250 44px/1 var(--font-display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.mz-tile__tag { margin-top: 6px; }
.mz-tile__note { font: 400 13px/1.4 var(--font-text); color: var(--ink-soft); }
.mz-tile--alert .mz-tile__value { color: var(--danger); }
.mz-tile__go { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); }
.mz-tile__go .nx-icon { --nx-size: 18px; }
a.mz-tile, button.mz-tile { cursor: pointer; border: 0; text-align: left; font: inherit; }

/* ===== ФИРМЕННЫЙ ПРИЁМ: гелевая плитка с зерном =====
   <div class="mz-gel mz-gel--green">…</div>  варианты: --green | --pink (ИИ) | --orange | --lime
   Текст на геле — #161616 (4,9–6,5:1). Не больше ОДНОГО геля-героя на экран (+ мелкие гель-точки). */
.mz-gel {
  --g1: var(--gel-green-1); --g2: var(--gel-green-2); --g3: var(--gel-green-2);
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  padding: 22px 24px; border-radius: var(--rounded-xl); color: #161616;
  background:
    radial-gradient(70% 62% at 50% 72%, var(--g1) 0%, color-mix(in srgb, var(--g1) 40%, transparent) 55%, transparent 100%),
    radial-gradient(110% 90% at 50% 0%, var(--g2) 0%, transparent 70%),
    linear-gradient(180deg, var(--g3), var(--g2));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4), inset 0 0 32px 10px rgb(255 255 255 / .38), 0 18px 40px -18px color-mix(in srgb, var(--g1) 60%, transparent);
}
.mz-gel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--mz-grain); opacity: .28; mix-blend-mode: soft-light;
}
.mz-gel--green { --g1: #56944B; --g2: #D7DFBA; --g3: #E9EDD9; }
.mz-gel--pink { --g1: #E16991; --g2: #F0C3D7; --g3: #F6E1EA; }
.mz-gel--orange {
  background:
    radial-gradient(60% 55% at 50% 68%, #EE7B31 0%, rgb(238 123 49 / .5) 50%, transparent 100%),
    radial-gradient(80% 60% at 0% 0%, #E7E094 0%, transparent 70%),
    radial-gradient(70% 70% at 100% 100%, #C3D9DA 0%, transparent 70%),
    #EBC79A;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4), inset 0 0 32px 10px rgb(255 255 255 / .36), 0 18px 40px -18px rgb(238 123 49 / .55);
}
.mz-gel--lime { --g1: #C9DF2E; --g2: #EFF8A6; --g3: #F6FBD2; }
.mz-gel__label { font: 500 14px/1.3 var(--font-text); color: #161616; opacity: .82; text-align: center; }
.mz-gel__value { text-align: center; }
.mz-gel__note { font: 500 13px/1.35 var(--font-text); color: #161616; opacity: .8; text-align: center; }
.mz-gel--sm { padding: 14px 16px; border-radius: var(--rounded-lg); }
/* маленькая гелевая плашка-иконка (файл, канал, ИИ): 40×40 сквиркл */
.mz-gelchip { --g1: var(--gel-green-1); --g2: var(--gel-green-2); position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 14px; color: #161616;
  background: radial-gradient(90% 90% at 50% 75%, var(--g1), var(--g2)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .45), inset 0 0 10px 2px rgb(255 255 255 / .35); }
.mz-gelchip .nx-icon { --nx-size: 20px; }
.mz-gelchip--pink { --g1: #E16991; --g2: #F0C3D7; } .mz-gelchip--orange { --g1: #EE7B31; --g2: #E7E094; } .mz-gelchip--lime { --g1: #C9DF2E; --g2: #F6FBD2; }

/* ===== ФИРМЕННЫЙ ПРИЁМ: цифры-табло (Doto) — 1–2 героя на экран ===== */
.mz-dotnum {
  font-family: var(--font-dot); font-weight: 700; font-size: 96px; line-height: .95; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: #161616; display: inline-flex; align-items: flex-start; gap: 6px;
}
.mz-dotnum--xl { font-size: clamp(112px, 11vw, 168px); line-height: .9; }
.mz-dotnum--md { font-size: 64px; }
.mz-dotnum--sm { font-size: 30px; }
.mz-dotnum__tag { font: 500 12px/1 var(--font-text); margin-top: 6px; padding: 5px 9px; border-radius: var(--rounded-pill); background: rgb(255 255 255 / .55); color: #161616; letter-spacing: .01em; }
/* «призрачные» точки-линейка под табло */
.mz-dotrule { height: 14px; width: 100%; background: radial-gradient(circle, rgb(22 22 22 / .28) 1.2px, transparent 1.7px) 0 50% / 8px 8px repeat-x; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }

/* ===== ФИРМЕННЫЙ ПРИЁМ: стопка таблеток (строки-таблетки без разделителей, открытая выдвигается масштабом 1.04) ===== */
.mz-stack { display: flex; flex-direction: column; gap: 6px; }
.mz-stack--tight > * + * { margin-top: -10px; }   /* нахлёст как в Mapping (только для коротких «вкладочных» стопок) */
.mz-pill {
  --tint: 22 22 22; --tint-a: 0;
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 8px 8px 12px;
  border-radius: var(--rounded-pill); color: var(--ink); text-decoration: none; text-align: left; width: 100%; border: 0; font: inherit; cursor: pointer;
  background: linear-gradient(90deg, rgb(var(--tint) / var(--tint-a)) 0%, rgb(var(--tint) / 0) 62%), var(--surface-raised);
  box-shadow: var(--hl-top), var(--shadow-1);
  transition: scale var(--spring) var(--ease-spring), box-shadow var(--normal) var(--ease);
  transform-origin: 50% 50%;
}
.mz-pill--green { --tint: 86 148 75; --tint-a: .2; } .mz-pill--pink { --tint: 225 105 145; --tint-a: .2; }
.mz-pill--orange { --tint: 238 123 49; --tint-a: .2; } .mz-pill--lime { --tint: 201 223 46; --tint-a: .32; } .mz-pill--danger { --tint: 179 43 43; --tint-a: .14; }
.mz-pill__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.mz-pill__title { font: 500 15px/1.3 var(--font-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-pill__meta { font: 400 13px/1.35 var(--font-text); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-pill__end { flex: none; display: flex; align-items: center; gap: 8px; }
/* вложенная таблетка-действие внутри строки (на тон светлее) */
.mz-pill__cta { height: 40px; padding: 0 16px; border-radius: var(--rounded-pill); border: 0; display: inline-flex; align-items: center; gap: 6px; background: var(--surface); color: var(--ink); font: 500 13px/1 var(--font-text); white-space: nowrap; cursor: pointer; }
.mz-pill[aria-expanded="true"], .mz-pill.is-open, .mz-pill[aria-current="true"] { scale: 1.04; box-shadow: var(--hl-top), var(--shadow-2); z-index: 2; }
.mz-pill--static { cursor: default; }
@media (hover: hover) and (pointer: fine) { .mz-pill:not(.mz-pill--static):hover { box-shadow: var(--hl-top), var(--shadow-2); } }
.mz-pill:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
/* раскрытая область под строкой стопки */
.mz-pill-detail { margin: 6px 12px 4px; padding: 16px; border-radius: var(--rounded-md); background: var(--surface-subtle); }

/* ===== карточка клиента на доске: .mz-ccard (alt-card a — подробная, b — компактная, c — с ИИ-резюме) ===== */
.mz-ccard {
  position: relative; display: grid; gap: 10px; padding: 14px; border-radius: var(--rounded-md);
  background: var(--surface-raised); box-shadow: var(--hl-top), var(--shadow-1); color: inherit; text-decoration: none; min-width: 0;
}
.mz-ccard__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mz-ccard__name { font: 600 14px/1.25 var(--font-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-ccard__sub { font: 400 12px/1.35 var(--font-text); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-ccard__sum { margin-left: auto; font: 500 14px/1 var(--font-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mz-ccard__row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mz-ccard__step { display: flex; align-items: center; gap: 6px; font: 400 12px/1.35 var(--font-text); color: var(--ink-soft); }
.mz-ccard__step .nx-icon { --nx-size: 16px; }
.mz-ccard__step.is-overdue { color: var(--danger); font-weight: 500; }
.mz-ccard__ai { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--ai-soft); font: 400 12px/1.45 var(--font-text); color: var(--ink); }
.mz-ccard__ai .mz-ai-dot { margin-top: 3px; }
.mz-ccard--compact { gap: 6px; padding: 10px 12px; border-radius: var(--rounded-sm); }
.mz-ccard.is-waiting::after { content: ""; position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* карточка тарифа */
.mz-plan { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--rounded-lg); background: var(--surface-raised); box-shadow: var(--hl-top), var(--shadow-1); min-width: 0; }
.mz-plan__name { font: 500 20px/1.2 var(--font-display); letter-spacing: -0.01em; }
.mz-plan__price { font: 250 40px/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mz-plan__price small { font: 400 14px/1 var(--font-text); letter-spacing: 0; color: var(--ink-soft); }
.mz-plan__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font: 400 14px/1.4 var(--font-text); }
.mz-plan__list li { display: flex; gap: 8px; align-items: flex-start; }
.mz-plan__list .nx-icon { --nx-size: 18px; color: var(--success); margin-top: 1px; }
.mz-plan.is-current { box-shadow: inset 0 0 0 1.5px var(--ink), var(--shadow-2); }
.mz-plan--popular { background: linear-gradient(180deg, var(--primary-faint), var(--surface-raised) 40%); }

/* карточка канала */
.mz-channel { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--rounded-lg); background: var(--surface-raised); box-shadow: var(--hl-top), var(--shadow-1); min-width: 0; }
.mz-channel__logo { width: 48px; height: 48px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--surface); }
.mz-channel__logo .nx-icon { --nx-size: 28px; }
.mz-channel__body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.mz-channel__name { font: 600 15px/1.3 var(--font-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-channel__meta { font: 400 13px/1.35 var(--font-text); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mz-channel.is-error { background: linear-gradient(90deg, rgb(179 43 43 / .08), transparent 60%), var(--surface-raised); }

/* строка-тревога (внимание на «Сегодня») */
.mz-alertrow { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 10px 10px 14px; border-radius: var(--rounded-md); background: var(--surface-raised); box-shadow: var(--hl-top), var(--shadow-1); }
.mz-alertrow__ico { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger); }
.mz-alertrow__ico .nx-icon { --nx-size: 20px; }
.mz-alertrow--warn .mz-alertrow__ico { background: var(--warning-soft); color: var(--warning); }
.mz-alertrow--info .mz-alertrow__ico { background: var(--info-soft); color: var(--info); }
.mz-alertrow__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mz-alertrow__title { font: 600 14px/1.3 var(--font-text); }
.mz-alertrow__text { font: 400 13px/1.4 var(--font-text); color: var(--ink-soft); }

/* круглая кнопка-иконка «спутник» (белый круг 40) — для второстепенных действий на плитках */
.mz-orb { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--surface-raised); color: var(--ink); box-shadow: var(--hl-top), var(--shadow-1); text-decoration: none; }
.mz-orb .nx-icon { --nx-size: 20px; }
@media (hover: hover) and (pointer: fine) { .mz-orb:hover { background: var(--surface); } }

/* ================================================================
   10. СПИСКИ И ТАБЛИЦА
   ================================================================ */
.mz-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mz-list__row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: var(--rounded-md); color: inherit; text-decoration: none; min-width: 0; }
@media (hover: hover) and (pointer: fine) { a.mz-list__row:hover, button.mz-list__row:hover { background: var(--surface-raised); } }
.mz-list__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mz-list__title { font: 500 15px/1.3 var(--font-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-list__meta { font: 400 13px/1.35 var(--font-text); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-list__end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font: 400 12px/1 var(--font-text); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mz-list__row.is-unread .mz-list__title { font-weight: 700; }

/* таблица: строки-таблетки на белой подложке, шапка липкая; на телефоне → карточки (data-label у ячеек) */
.mz-table-wrap { border-radius: var(--rounded-lg); background: var(--surface); box-shadow: var(--hl-top), var(--shadow-1); padding: 8px; overflow-x: auto; }
.mz-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font: 400 14px/1.35 var(--font-text); }
.mz-table th {
  position: sticky; top: 0; z-index: 1; height: 40px; padding: 0 14px; text-align: left; white-space: nowrap;
  font: 500 13px/1 var(--font-text); color: var(--ink-soft); background: var(--surface);
}
.mz-table th[aria-sort] { cursor: pointer; }
.mz-table th button { all: unset; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; border-radius: 6px; }
.mz-table th button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mz-table th .nx-icon { --nx-size: 14px; opacity: .45; }
.mz-table th[aria-sort="ascending"] .nx-icon, .mz-table th[aria-sort="descending"] .nx-icon { opacity: 1; }
.mz-table th[aria-sort="descending"] .nx-icon { rotate: 180deg; }
.mz-table td { height: 56px; padding: 8px 14px; background: var(--surface-raised); vertical-align: middle; }
.mz-table td:first-child { border-radius: var(--rounded-pill) 0 0 var(--rounded-pill); padding-left: 10px; }
.mz-table td:last-child { border-radius: 0 var(--rounded-pill) var(--rounded-pill) 0; }
.mz-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mz-table tbody tr { transition: none; }
@media (hover: hover) and (pointer: fine) { .mz-table tbody tr:hover td { background: var(--primary-faint); } :root[data-theme="dark"] .mz-table tbody tr:hover td { background: #2A2C2F; } }
.mz-table td.is-problem { color: var(--danger); font-weight: 500; }
.mz-table td.is-problem .nx-icon { --nx-size: 16px; vertical-align: -3px; }
.mz-cellname { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mz-cellname b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================================================================
   11. СЛОИ
   ================================================================ */
/* — модалка (ПК) — */
dialog[data-nx-as="modal"] {
  background: var(--surface-raised); color: var(--ink); border-radius: var(--rounded-lg);
  box-shadow: var(--shadow-float), 0 0 0 1px var(--line);
}
.modal__body { padding: 28px; display: grid; gap: 16px; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal__title { font: 400 24px/1.2 var(--font-display); letter-spacing: -0.02em; margin: 0; }
.modal__text { color: var(--ink-soft); font-size: 15px; }
.modal__close { margin: -6px -8px 0 0; }
.modal__footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* — шторка снизу (телефон) и сбоку — */
dialog[data-nx-as="sheet"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-float); }
dialog[data-nx-as="sheet"][data-nx-side="bottom"] { border-radius: var(--rounded-lg) var(--rounded-lg) 0 0; }
dialog[data-nx-as="sheet"]:is([data-nx-side="right"]) { border-radius: var(--rounded-lg) 0 0 var(--rounded-lg); }
dialog[data-nx-as="sheet"]:is([data-nx-side="left"]) { border-radius: 0 var(--rounded-lg) var(--rounded-lg) 0; }
.nx-sheet__handle { width: 36px; height: 5px; border-radius: 3px; background: var(--ink); opacity: .2; margin: 10px auto 6px; }
dialog[data-nx-as="sheet"] .modal__body { padding: 8px 16px 16px; }
dialog[data-nx-as="sheet"] .modal__footer { position: sticky; bottom: 0; margin: 8px -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface-raised); box-shadow: 0 -10px 24px -16px rgb(22 22 22 / .3); }
dialog[data-nx-as="sheet"] .modal__footer > .btn { flex: 1; height: 48px; }
.mz-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 16px 8px; }
.mz-sheet__title { font: 600 17px/1.3 var(--font-text); }

/* — меню и поповеры [data-nx-menu] (.menu-sheet) — */
[data-nx-menu] {
  min-width: 220px; padding: 6px; border: 0; border-radius: var(--rounded-md);
  background: var(--surface-raised); color: var(--ink);
  box-shadow: var(--shadow-float), 0 0 0 1px var(--line);
  font: 400 14px/1.3 var(--font-text);
}
[data-nx-menu][data-nx-as="sheet"] { border-radius: var(--rounded-lg) var(--rounded-lg) 0 0; padding: 8px 8px max(12px, env(safe-area-inset-bottom)); }
[data-nx-menu][data-nx-as="sheet"]::before { content: ""; display: block; width: 36px; height: 5px; margin: 2px auto 10px; border-radius: 3px; background: var(--ink); opacity: .2; }
[data-nx-menu] [role^="menuitem"]:not(.btn, .mz-link, .mz-notif), .menu-sheet__item, .nx-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: var(--rounded-sm);
  background: transparent; color: var(--ink); text-decoration: none; text-align: left; font: 500 14px/1.25 var(--font-text);
}
[data-nx-menu][data-nx-as="sheet"] [role^="menuitem"]:not(.btn, .mz-link) { min-height: 52px; font-size: 15px; }
[data-nx-menu] [role^="menuitem"] .nx-icon { --nx-size: 20px; color: var(--ink-soft); flex: none; }
[data-nx-menu] [role^="menuitem"] .mz-avatar .nx-icon { --nx-size: 16px; color: var(--av-fg, #fff); }
[data-nx-menu] [role^="menuitem"]:not(.btn):is(:hover, :focus-visible, [data-active]) { background: var(--surface-subtle); outline: none; }
[data-nx-menu] [role^="menuitem"][aria-checked="true"], [data-nx-menu] [role^="menuitem"].is-current { background: var(--surface); }
[data-nx-menu] [role^="menuitem"][aria-disabled="true"] { color: var(--ink-faint); }
.menu-sheet--300[data-nx-as="pop"] { width: 300px; }
.menu-sheet--240[data-nx-as="pop"] { width: 240px; }
:root .mz-msheet .nx-side__label, :root[data-sidebar] .mz-msheet .nx-side__label { opacity: 1; }
.menu-sheet__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-sheet__meta, .nx-menu__meta { margin-left: auto; font: 400 12px/1.2 var(--font-text); color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-sheet__title, .nx-menu__title { padding: 10px 12px 6px; font: 600 11px/1 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.menu-sheet__sep { height: 1px; margin: 6px 8px; background: var(--line); border: 0; }
.menu-sheet__item--danger, [data-nx-menu] [role^="menuitem"].is-danger { color: var(--danger); }
.menu-sheet__item--danger .nx-icon { color: var(--danger) !important; }
.menu-sheet__check { margin-left: auto; color: var(--ink); }
.menu-sheet__meta + .menu-sheet__check { margin-left: 2px; }
/* строка проекта в переключателе: название + «ждут ответа: N» строкой ниже */
.mz-proj-opt { display: grid; gap: 2px; min-width: 0; }
.mz-proj-opt__name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mz-proj-opt__tag { height: 20px; padding: 0 8px; flex: none; }
.mz-proj-opt__meta { font: 400 12px/1.2 var(--font-text); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.menu-sheet__check .nx-icon { color: var(--ink) !important; }
.menu-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 8px; }
.menu-sheet__headtitle { font: 600 15px/1.2 var(--font-text); }
/* поповер колокольчика / ИИ-панели (контентный, не список) */
.mz-pop { width: 400px; max-width: calc(100vw - 16px); padding: 0; overflow: hidden; flex-direction: column; }
.mz-pop:popover-open { display: flex; }
.mz-pop[data-nx-as="pop"] { max-height: min(640px, 80vh); }
.mz-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 10px; }
.mz-pop__title { font: 400 20px/1.2 var(--font-display); letter-spacing: -0.02em; }
.mz-pop__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px 8px; overscroll-behavior: contain; }
.mz-pop__foot { padding: 10px 16px 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mz-pop--ai { width: 340px; }
.mz-pop--ai .mz-pop__body { padding: 0 16px 8px; display: grid; gap: 12px; }

/* строка уведомления (колокольчик, 15) */
.mz-notif { position: relative; display: flex; gap: 12px; padding: 12px 12px 12px 20px; border-radius: var(--rounded-sm); color: inherit; text-decoration: none; }
.mz-notif + .mz-notif { margin-top: 2px; }
.mz-notif.is-unread::before { content: ""; position: absolute; left: 6px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.mz-notif__ico { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-subtle); color: var(--ink); }
.mz-notif__ico .nx-icon { --nx-size: 18px; }
.mz-notif[data-prio="К"] .mz-notif__ico { background: var(--danger-soft); color: var(--danger); }
.mz-notif[data-prio="В"] .mz-notif__ico { background: var(--warning-soft); color: var(--warning); }
.mz-notif__body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.mz-notif__title { font: 600 14px/1.3 var(--font-text); }
.mz-notif__text { font: 400 13px/1.4 var(--font-text); color: var(--ink-soft); }
.mz-notif__meta { font: 500 12px/1.3 var(--font-text); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mz-notif__actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
@media (hover: hover) and (pointer: fine) { a.mz-notif:hover, .mz-notif[role^="menuitem"]:hover { background: var(--surface-subtle); } }

/* — подтверждение nxConfirm — */
.nx-confirm { --nx-modal-w: 440px; }
.nx-confirm__body { padding: 28px; gap: 12px; }
.nx-confirm__title { font: 400 24px/1.2 var(--font-display); letter-spacing: -0.02em; }
.nx-confirm__text { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.nx-confirm__type { font-size: 14px; color: var(--ink-soft); }
.nx-confirm__input { height: 44px; padding: 0 16px; border-radius: var(--rounded-pill); border: 1px solid var(--line-strong); background: var(--surface-raised); }
.nx-confirm__input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgb(227 244 80 / .75); }
.nx-confirm__actions { margin-top: 12px; }
.nx-confirm__actions .btn { height: 44px; }
dialog[data-nx-as="sheet"].nx-confirm .nx-confirm__body { padding: 8px 20px 20px; }
.nx-confirm__cancel { background: var(--surface-subtle) !important; box-shadow: none !important; }

/* — ⌘K — */
.nx-cmdk { padding: 0; border-radius: var(--rounded-lg) !important; }
.nx-cmdk__head { padding: 6px 12px 6px 18px; border-bottom: 1px solid var(--line); }
.nx-cmdk__ico { --nx-size: 20px; color: var(--ink-soft); }
.nx-cmdk__input { font-size: 17px; }
.nx-cmdk__input:focus, .nx-cmdk__input:focus-visible { outline: none; box-shadow: none; }
.nx-cmdk__list { padding: 8px; }
.nx-cmdk__group { padding: 12px 10px 6px; font: 600 11px/1 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.nx-cmdk__item { padding: 0 12px; border-radius: var(--rounded-pill); font: 500 14px/1.2 var(--font-text); }
.nx-cmdk__item.is-active, .nx-cmdk__item[aria-selected="true"] { background: var(--primary-faint); box-shadow: inset 0 0 0 1px rgb(79 90 10 / .18); }
:root[data-theme="dark"] .nx-cmdk__item.is-active, :root[data-theme="dark"] .nx-cmdk__item[aria-selected="true"] { background: rgb(227 244 80 / .1); }
.nx-cmdk__icon { --nx-size: 20px; color: var(--ink-soft); }
.nx-cmdk__hint { font: 400 12px/1 var(--font-text); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.nx-cmdk__empty { padding: 28px 16px; text-align: center; color: var(--ink-soft); }
.nx-cmdk__foot { padding: 10px 18px; border-top: 1px solid var(--line); font: 400 12px/1 var(--font-text); color: var(--ink-soft); }

/* — тултип — */
.nx-tip { background: #1D1E1E; color: #F2F3F2; font: 500 12px/1.3 var(--font-text); border-radius: 10px; padding: 7px 10px; box-shadow: 0 8px 24px -8px rgb(0 0 0 / .35); }

/* — тосты: графитовое стекло; ПК — справа снизу, телефон — по центру над нижней навигацией — */
.nx-toast {
  border-radius: var(--rounded-md); font: 500 14px/1.4 var(--font-text);
  background: rgb(29 30 30 / .92);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 16px 40px -14px rgb(0 0 0 / .5);
}
.nx-toast__icon::before { width: 10px; height: 10px; }
.nx-toast--success .nx-toast__icon::before { background: var(--primary); }
.nx-toast--error .nx-toast__icon::before { background: #F07171; }
.nx-toast--warning .nx-toast__icon::before { background: #E3B04B; }
.nx-toast--info .nx-toast__icon::before { background: #F2F3F2; }
.nx-toast__action { border-color: rgb(255 255 255 / .3); min-height: 32px; }
@media (hover: hover) and (pointer: fine) { .nx-toast__action:hover { background: rgb(255 255 255 / .1); } }
@media (min-width: 768px) {
  .nx-toaster, .nx-toaster[popover] { left: auto; right: 24px; translate: none; width: 380px; }
}

/* ================================================================
   12. ПУСТО, ЗАГРУЗКА, ОШИБКА
   ================================================================ */
.empty-state, .mz-empty {
  display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: 40px 24px; border-radius: var(--rounded-lg); background: var(--surface); box-shadow: var(--hl-top);
}
.mz-empty__img { width: 128px; height: 128px; margin-bottom: 4px; }
.mz-empty__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mz-empty__title { font: 400 22px/1.25 var(--font-display); letter-spacing: -0.02em; }
.mz-empty__text { max-width: 44ch; color: var(--ink-soft); font-size: 14px; }
.mz-empty__actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mz-empty__hint { margin-top: 4px; font: 500 13px/1.4 var(--font-text); color: var(--ink-soft); }
.mz-empty--plain { background: transparent; box-shadow: none; }

/* skeleton повторяет разметку: .nx-skel (kit) + формы варианта */
.nx-skel { border-radius: 10px; }
.mz-skel-line { height: 12px; border-radius: 6px; }
.mz-skel-line--lg { height: 18px; }
.mz-skel-circle { border-radius: 50%; aspect-ratio: 1; }
.mz-skel-pill { border-radius: var(--rounded-pill); }
.mz-skel-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: var(--rounded-pill); background: var(--surface-raised); }
.mz-skel-card { display: grid; gap: 12px; padding: 16px; border-radius: var(--rounded-md); background: var(--surface-raised); }
.mz-skel-tile { display: grid; gap: 14px; padding: 20px; border-radius: var(--rounded-lg); background: var(--surface-raised); }
.mz-skel-bubble { height: 44px; border-radius: 20px; }
:root[data-state="loading"] .mz-skel-demo .nx-skel::after { animation-duration: 1s; }

/* ошибка блока */
.mz-error { display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 18px; border-radius: var(--rounded-lg); background: var(--danger-soft); color: var(--ink); }
.mz-error__ico { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-raised); color: var(--danger); }
.mz-error__ico .nx-icon { --nx-size: 20px; }
.mz-error__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mz-error__title { font: 600 14px/1.3 var(--font-text); }
.mz-error__text { font: 400 13px/1.4 var(--font-text); color: var(--ink-soft); }

/* экран «нет прав» (403) */
.mz-403 { display: grid; justify-items: center; text-align: center; gap: 12px; max-width: 520px; margin: 48px auto; padding: 40px 32px; border-radius: var(--rounded-xl); background: var(--surface); box-shadow: var(--hl-top), var(--shadow-1); }

/* ================================================================
   13. ПОЛОСЫ .notice (+ --danger | --warn | --info | --ok)
   Вместо полоски слева — круг-иконка цвета статуса и тинт слева направо (запрет §14.6 craft-rules).
   ================================================================ */
.notice {
  --c: var(--danger); --soft: var(--danger-soft);
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 6px 6px 8px;
  border-radius: var(--rounded-pill);
  background: linear-gradient(90deg, var(--soft) 0%, var(--surface-raised) 70%);
  box-shadow: var(--hl-top), var(--shadow-1);
  font: 500 14px/1.35 var(--font-text); color: var(--ink);
}
.notice--danger { --c: var(--danger); --soft: var(--danger-soft); }
.notice--warn { --c: var(--warning); --soft: var(--warning-soft); }
.notice--info { --c: var(--info); --soft: var(--info-soft); }
.notice--ok { --c: var(--success); --soft: var(--success-soft); }
.notice__ico { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; }
:root[data-theme="dark"] .notice__ico { color: #161616; }
.notice__ico .nx-icon { --nx-size: 18px; }
.notice__text { flex: 1; min-width: 0; }
.notice__text b { font-weight: 600; }
.notice__actions { display: flex; align-items: center; gap: 4px; flex: none; }
.notice__more { color: var(--ink-soft); }
.notice--block { border-radius: var(--rounded-md); align-items: flex-start; padding: 12px; }
.notice--block .notice__actions { align-self: center; }

/* ================================================================
   14. ВИДЖЕТ «БАЛАНС ИИ» (.mz-balance[data-state="ok|low|zero"]) — 232×64 в меню, рейка — круг с точкой
   ================================================================ */
.mz-balance {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 8px 8px 8px 10px;
  border-radius: var(--rounded-md); background: var(--surface-raised); box-shadow: var(--hl-top), 0 0 0 1px var(--line);
  color: var(--ink); text-decoration: none;
}
.mz-balance__ico { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); }
.mz-balance__ico .nx-icon { --nx-size: 20px; }
.mz-balance__ico::after { content: ""; position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--surface-raised); }
.mz-balance__body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.mz-balance__label { font: 500 12px/1.2 var(--font-text); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-balance__value { font: 600 15px/1.15 var(--font-text); white-space: nowrap; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.mz-balance__add { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); box-shadow: inset 0 0 0 1px rgb(22 22 22 / .1); position: relative; }
.mz-balance__add::after { content: ""; position: absolute; inset: -4px; }
.mz-balance__add .nx-icon { --nx-size: 18px; }
.mz-balance[data-state="low"] { box-shadow: var(--hl-top), inset 0 0 0 1.5px #D9A300; }
.mz-balance[data-state="low"] .mz-balance__ico::after { background: #D9A300; }
.mz-balance[data-state="low"] .mz-balance__label { color: var(--warning); }
.mz-balance[data-state="zero"] { background: linear-gradient(0deg, rgb(179 43 43 / .08), rgb(179 43 43 / .08)), var(--surface-raised); }
.mz-balance[data-state="zero"] .mz-balance__ico::after { background: var(--danger); }
.mz-balance[data-state="zero"] .mz-balance__label { color: var(--danger); }
:root[data-sidebar="collapsed"] .sidebar .mz-balance { width: 48px; min-height: 48px; padding: 4px; margin-left: 6px; justify-content: center; background: transparent; box-shadow: none; }
:root[data-sidebar="collapsed"] .sidebar .mz-balance :is(.mz-balance__body, .mz-balance__add) { display: none; }
:root[data-sidebar="collapsed"] .sidebar .mz-balance__ico { background: var(--surface-raised); }
/* виджет тарифа ассистентов */
.mz-planline { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: var(--rounded-md); color: var(--ink); text-decoration: none; font: 500 13px/1.3 var(--font-text); background: rgb(255 255 255 / .45); }
:root[data-sidebar="collapsed"] .sidebar .mz-planline { display: none; }

/* ================================================================
   15. МИНИ-ГРАФИКИ (CSS/SVG)
   ================================================================ */
/* столбики: <div class="mz-bars" style="--h:72px"><i style="--v:.4"></i>…</div>  (kit .nx-bars для роста) */
.mz-bars { display: flex; align-items: flex-end; gap: 3px; height: var(--h, 64px); padding-bottom: 10px; position: relative;
  background: radial-gradient(circle, rgb(22 22 22 / .2) 1px, transparent 1.5px) 0 100% / 6px 6px repeat-x; }
.mz-bars > i { flex: 1 1 0; min-width: 3px; height: calc(var(--v, .5) * 100%); border-radius: 3px 3px 1px 1px; background: var(--ink); opacity: .62; transform-origin: 50% 100%; }
.mz-bars > i.is-hi { background: var(--primary); opacity: 1; box-shadow: inset 0 0 0 1px rgb(22 22 22 / .2); }
.mz-bars > i.is-ai { background: var(--ai-gel); opacity: 1; }
.mz-bars--soft > i { background: rgb(22 22 22 / .22); opacity: 1; }
:root[data-theme="dark"] .mz-bars > i { background: #F2F3F2; }
.mz-axis { display: flex; justify-content: space-between; font: 500 12px/1 var(--font-text); color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-top: 6px; }
/* спарклайн: <svg class="mz-spark" viewBox="0 0 120 32"><path class="mz-spark__area"/><path class="mz-spark__line nx-line-draw" pathLength="1"/></svg> */
.mz-spark { display: block; width: 100%; height: 36px; overflow: visible; }
.mz-spark__line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mz-spark__area { fill: rgb(227 244 80 / .55); stroke: none; }
.mz-spark__dot { fill: var(--surface-raised); stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
/* кольцо прогресса: <div class="mz-ring" style="--p:.71"><span>5/7</span></div> */
.mz-ring { --p: .5; --s: 56px; --w: 6px; position: relative; display: inline-grid; place-items: center; width: var(--s); aspect-ratio: 1; flex: none; border-radius: 50%;
  background: conic-gradient(var(--ring-c, var(--ink)) calc(var(--p) * 1turn), var(--surface-sunken) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--w) - .5px), #000 calc(100% - var(--w))); mask: radial-gradient(farthest-side, transparent calc(100% - var(--w) - .5px), #000 calc(100% - var(--w))); }
.mz-ring-wrap { position: relative; display: inline-grid; place-items: center; }
.mz-ring-wrap > span:not(.mz-ring) { position: absolute; font: 600 13px/1 var(--font-text); font-variant-numeric: tabular-nums; }
.mz-ring--sm { --s: 24px; --w: 4px; }
.mz-ring--lime { --ring-c: #9DB01C; }
/* полоса-шкала: <div class="mz-meter" style="--p:.6"><i></i></div> */
.mz-meter { position: relative; height: 8px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.mz-meter > i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, .5) * 100%); border-radius: inherit; background: var(--ink); }
.mz-meter--lime > i { background: var(--primary); box-shadow: inset 0 0 0 1px rgb(22 22 22 / .2); }
.mz-meter--danger > i { background: var(--danger); }
/* доли по проектам: <div class="mz-split"><i style="--w:.6;--c:#2F6FDB"></i>…</div> */
.mz-split { display: flex; gap: 3px; height: 12px; }
.mz-split > i { flex: var(--w, 1) 1 0; min-width: 6px; border-radius: 4px; background: var(--c, var(--ink)); }
.mz-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 12px/1.3 var(--font-text); color: var(--ink-soft); }
.mz-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.mz-legend > span::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--c, var(--ink)); }
/* мини-карта воронки: строки этапов с полосой ширины по доле */
.mz-funnel { display: grid; gap: 6px; }
.mz-funnel__row { display: grid; grid-template-columns: 96px 1fr 28px; align-items: center; gap: 10px; font: 500 13px/1.2 var(--font-text); }
.mz-funnel__bar { height: 24px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.mz-funnel__bar > i { display: block; height: 100%; width: calc(var(--p, .5) * 100%); border-radius: inherit; background: color-mix(in srgb, var(--c) 70%, var(--surface-raised)); }
.mz-funnel__n { text-align: right; font-variant-numeric: tabular-nums; }

/* ================================================================
   16. ЧАТ (alt-bubbles: a — пузыри, b — «письма» без пузырей, c — плотные)
   ================================================================ */
.mz-thread { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.mz-daysep { align-self: center; margin: 10px 0; padding: 4px 12px; border-radius: 999px; background: var(--surface-raised); font: 500 12px/1.3 var(--font-text); color: var(--ink-soft); }
.nx-msg, .mz-msg { display: flex; flex-direction: column; max-width: min(76%, 560px); gap: 4px; }
.nx-msg--in, .mz-msg--in { align-self: flex-start; }
.nx-msg--out, .mz-msg--out { align-self: flex-end; align-items: flex-end; }
.nx-msg__text, .mz-msg__bubble {
  padding: 10px 14px; border-radius: 20px; font: 400 15px/1.45 var(--font-text); overflow-wrap: anywhere;
  background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-1);
}
.nx-msg--in .nx-msg__text, .mz-msg--in .mz-msg__bubble { border-bottom-left-radius: 6px; }
.nx-msg--out .nx-msg__text, .mz-msg--out .mz-msg__bubble { border-bottom-right-radius: 6px; background: #2A2B2C; color: #F2F3F2; box-shadow: none; }
.mz-msg--ai .mz-msg__bubble { background: var(--ai-soft); color: var(--ink); box-shadow: inset 0 0 0 1px rgb(168 50 95 / .14); }
:root[data-theme="dark"] .nx-msg--out .nx-msg__text, :root[data-theme="dark"] .mz-msg--out:not(.mz-msg--ai) .mz-msg__bubble { background: #3A3C40; }
.nx-msg__meta, .mz-msg__meta { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; font: 500 12px/1.3 var(--font-text); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mz-msg__author { display: inline-flex; align-items: center; gap: 6px; }
.mz-msg--ai .mz-msg__author { color: var(--ai); font-weight: 600; }
.nx-msg[data-status="failed"] .nx-msg__meta, .mz-msg.is-failed .mz-msg__meta { color: var(--danger); }
.mz-msg--system { align-self: center; max-width: 90%; text-align: center; font: 500 12px/1.4 var(--font-text); color: var(--ink-soft); }
.mz-msg__voice { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.mz-msg__voice .mz-bars { --h: 24px; padding: 0; background: none; flex: 1; }
/* b — без пузырей, как лента писем */
:root[data-alt-bubbles="b"] :is(.mz-msg, .nx-msg) { max-width: 100%; align-self: stretch; align-items: stretch; }
:root[data-alt-bubbles="b"] :is(.mz-msg__bubble, .nx-msg__text) { background: transparent; box-shadow: none; padding: 4px 6px; border-radius: 0; color: var(--ink); }
:root[data-alt-bubbles="b"] :is(.mz-msg--out, .nx-msg--out) :is(.mz-msg__bubble, .nx-msg__text) { color: var(--ink); background: transparent; }
:root[data-alt-bubbles="b"] :is(.mz-msg--out, .nx-msg--out) { padding-left: 14px; box-shadow: inset 2px 0 0 var(--line); }
/* c — плотные */
:root[data-alt-bubbles="c"] .mz-thread { gap: 3px; }
:root[data-alt-bubbles="c"] :is(.mz-msg__bubble, .nx-msg__text) { padding: 7px 12px; font-size: 14px; border-radius: 14px; }

/* полоса «Кто отвечает» */
.mz-responder { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 6px 6px 14px; border-radius: var(--rounded-pill); background: var(--surface-raised); box-shadow: var(--hl-top), var(--shadow-1); font: 500 14px/1.3 var(--font-text); }
.mz-responder[data-who="ai"] { background: linear-gradient(90deg, var(--ai-soft), var(--surface-raised) 70%); }
.mz-responder__text { flex: 1; min-width: 0; }
.mz-responder__text small { display: block; font: 400 12px/1.3 var(--font-text); color: var(--ink-soft); }

/* поле ответа */
.mz-composer { display: flex; align-items: flex-end; gap: 6px; padding: 6px; border-radius: 26px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-1); }
.mz-composer:focus-within { box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 4px rgb(227 244 80 / .7); }
.mz-composer textarea { flex: 1; min-width: 0; min-height: 40px; padding: 10px 6px; border: 0; outline: 0; resize: none; background: transparent; font: 400 15px/1.35 var(--font-text); }
.mz-composer .btn-icon { width: 40px; height: 40px; }
.mz-composer__send { background: var(--ink); color: var(--ink-inverse); box-shadow: none; }
.mz-composer__send:disabled { background: var(--surface-sunken); color: var(--ink-faint); opacity: 1; }

/* ================================================================
   17. 3D, СТЕКЛО, ФОЛБЭКИ
   ================================================================ */
.mz-3d { position: relative; display: inline-grid; justify-items: center; }
.mz-3d img { display: block; width: 100%; height: auto; }
.mz-3d--float img { animation: mz-float 6s ease-in-out infinite; }
.mz-3d--float::after { content: ""; width: 60%; height: 8%; margin-top: 2%; border-radius: 50%; background: radial-gradient(closest-side, rgb(22 22 22 / .22), transparent); animation: mz-spot 6s ease-in-out infinite; }
@keyframes mz-float { 50% { translate: 0 -6px; } }
@keyframes mz-spot { 50% { scale: .86; opacity: .7; } }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) .mz-3d--float img, :root:not([data-motion="full"]) .mz-3d--float::after { animation: none; } }
:root[data-motion="reduce"] .mz-3d--float img, :root[data-motion="reduce"] .mz-3d--float::after { animation: none; }

/* стекло — только слой управления (рейка, шапка, нижняя навигация, тосты). ≤ 3 на ПК, ≤ 2 на телефоне */
.mz-glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: var(--glass-edge), var(--shadow-2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mz-glass, .sidebar__panel, .topbar__bar, .bottom-nav__track, .nx-toast { background: var(--glass-solid); }
  .nx-toast { background: #1D1E1E; }
}
@media (prefers-reduced-transparency: reduce) {
  .mz-glass, .sidebar__panel, .topbar__bar, .bottom-nav__track { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--glass-solid) !important; }
  .nx-toast { -webkit-backdrop-filter: none; backdrop-filter: none; background: #1D1E1E; }
}

/* ================================================================
   18. ПЛАНШЕТ И ТЕЛЕФОН
   ================================================================ */
@media (max-width: 1279.98px) { :root { --page-pad: 24px; } .topbar__search { width: 320px; } }
@media (max-width: 1023.98px) { .mz-bento > * { grid-column: span 6; } .mz-span-3, .mz-span-4 { grid-column: span 6 !important; } .mz-span-5, .mz-span-7, .mz-span-8 { grid-column: 1 / -1 !important; } }

@media (max-width: 767.98px) {
  :root { --page-pad: 16px; --control-h: 44px; --control-h-lg: 52px; --nx-otp-w: 44px; --nx-otp-h: 52px; --nx-bottom-ui: 84px; --space-card: 16px; }
  body { font-size: 15px; }
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-main { grid-column: 1; }
  .page { padding: 16px 16px calc(var(--nx-bottom-ui) + 24px + env(safe-area-inset-bottom)); }
  body[data-shell="panel"] .page, body[data-shell="none"] .page { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
  .page__title, .mz-h1 { font-size: 28px; }
  .mz-display { font-size: 44px; }
  .page__header { margin-bottom: 16px; align-items: flex-start; }
  .mz-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mz-bento > *, .mz-span-3, .mz-span-4, .mz-span-5, .mz-span-6, .mz-span-7, .mz-span-8 { grid-column: 1 / -1 !important; }
  .mz-bento > .mz-half { grid-column: span 1 !important; }
  .mz-tile__value { font-size: 36px; }
  .mz-dotnum { font-size: 72px; }
  .mz-dotnum.mz-dotnum--xl { font-size: 112px; }
  .mz-pill { flex-wrap: wrap; border-radius: var(--rounded-md); row-gap: 6px; }
  .mz-pill > .mz-pill__body { flex: 1 1 0; }
  .mz-pill__end { width: 100%; padding-left: 52px; }
  .mz-pill[aria-expanded="true"], .mz-pill.is-open { scale: 1.02; }
  .card { border-radius: var(--rounded-md); }
  .mz-gel { border-radius: var(--rounded-lg); padding: 18px; }

  /* поля и кнопки: ≥ 44, шрифт полей 16 */
  .mz-input, .mz-select, .mz-textarea, .nx-confirm__input, .mz-composer textarea { font-size: 16px; }
  .btn-sm { height: 44px; }
  .btn-icon.btn-sm { width: 44px; }
  .segmented [role="tab"] { height: 40px; }
  .tabs [role="tab"] { height: 44px; }
  .mz-chip { height: 40px; padding: 0 16px; }
  .badge { height: 26px; }

  /* сайдбар на телефоне — выезжающая панель (ui.js); визуально — тот же стеклянный блок во всю высоту */
  .sidebar { position: fixed; padding: 0; width: min(300px, 86vw); height: 100dvh; pointer-events: auto; }
  .sidebar .sidebar__panel { width: 100% !important; border-radius: 0 var(--rounded-xl) var(--rounded-xl) 0; background: var(--glass-solid); padding-top: calc(16px + env(safe-area-inset-top)); }
  .sidebar .sidebar__toggle { display: none; }
  :root:not(#nx-strong)[data-sidebar] .sidebar .sidebar__group { display: block; }
  :root:not(#nx-strong)[data-sidebar] .sidebar .sidebar__sep { display: none; }
  :root:not(#nx-strong)[data-sidebar] .sidebar :is(.sidebar__link, .sidebar__project, .sidebar__account, .mz-balance) { width: 100%; margin-left: 0; }
  :root:not(#nx-strong)[data-sidebar] .sidebar .sidebar__link { padding: 0 12px 0 4px; height: 48px; }
  :root:not(#nx-strong)[data-sidebar] .sidebar .sidebar__link .sidebar__label { width: auto; flex: 1 1 auto; }
  :root:not(#nx-strong)[data-sidebar] .sidebar .sidebar__link .sidebar__badge { position: static; box-shadow: none; }
  :root:not(#nx-strong)[data-sidebar] .sidebar .sidebar__project { height: 56px; padding: 0 12px 0 8px; border-radius: var(--rounded-md); justify-content: flex-start; background: rgb(255 255 255 / .6); }
  :root:not(#nx-strong)[data-sidebar] .sidebar .sidebar__project .sidebar__project-text,
  :root:not(#nx-strong)[data-sidebar] .sidebar .sidebar__account .sidebar__account-text,
  :root:not(#nx-strong)[data-sidebar] .sidebar .mz-balance :is(.mz-balance__body, .mz-balance__add) { display: grid; }
  :root:not(#nx-strong)[data-sidebar] .sidebar :is(.sidebar__project, .sidebar__account) .sidebar__chev { display: inline-flex; }
  :root:not(#nx-strong)[data-sidebar] .sidebar .sidebar__account { height: 56px; padding: 0 8px; justify-content: flex-start; }
  :root:not(#nx-strong)[data-sidebar] .sidebar .mz-balance { min-height: 64px; padding: 8px 8px 8px 10px; justify-content: flex-start; background: var(--surface-raised); box-shadow: var(--hl-top), 0 0 0 1px var(--line); }
  :root:not(#nx-strong)[data-sidebar] .sidebar .mz-planline { display: flex; }
  :root:not(#nx-strong)[data-sidebar] .sidebar .sidebar__admin-label { padding: 6px 12px 2px; text-align: left; }
  :root:not(#nx-strong)[data-sidebar] .sidebar .sidebar__admin-full { display: inline; }
  :root:not(#nx-strong)[data-sidebar] .sidebar .sidebar__admin-short { display: none; }
  :root:not(#nx-strong)[data-sidebar] .sidebar .sidebar__logo .mz-wordmark { display: inline; }
  .sidebar--dark .sidebar__panel { background: linear-gradient(180deg, #262829, #161718) !important; }

  /* шапка телефона: 56 + safe-area; стекло */
  .topbar { grid-column: 1; height: auto; padding: 0; }
  .topbar__bar {
    height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 8px; border-radius: 0; max-width: none;
    box-shadow: inset 0 -1px 0 var(--line);
  }
  .topbar__search, .topbar__desk-only, .topbar__desk-title { display: none !important; }
  .topbar .topbar__phone-only { display: inline-flex; }
  .topbar__title { display: grid; align-content: center; gap: 2px; min-width: 0; min-height: 44px; flex: 1; padding: 0 6px; border: 0; background: none; text-align: left; color: var(--ink); border-radius: 14px; font: inherit; }
  button.topbar__title { cursor: pointer; }
  .topbar__title .topbar__eyebrow { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .topbar__title .topbar__eyebrow .nx-icon { --nx-size: 14px; }
  .topbar .btn-icon { width: 44px; height: 44px; }
  .mz-aichip { height: 44px; padding: 0 12px; }
  .topbar__title-wrap { display: flex; flex-direction: column; min-width: 0; }
  .mz-banners { grid-column: 1; padding: 8px 16px 0; }
  .notice { align-items: flex-start; border-radius: var(--rounded-md); padding: 10px; flex-wrap: wrap; }
  .notice__text { flex-basis: calc(100% - 48px); font-size: 14px; }
  .notice__actions { width: 100%; padding-left: 48px; }
  .notice__actions .btn { height: 40px; }

  /* нижняя навигация: альтернатива alt-tabbar a — плоская, b — плавающая капсула-стекло (по умолчанию), c — сжимается при прокрутке */
  .bottom-nav {
    display: block; position: fixed; z-index: var(--z-nav); left: 0; right: 0; bottom: 0;
    padding: 0 12px calc(12px + env(safe-area-inset-bottom));
    pointer-events: none;
  }
  .bottom-nav__track {
    pointer-events: auto; display: flex; gap: 2px; height: var(--bottom-nav-h); padding: 6px; border-radius: var(--rounded-pill);
    background: var(--glass-fill-strong);
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
    box-shadow: var(--glass-edge), 0 16px 40px -12px rgb(22 22 22 / .28);
  }
  .bottom-nav__item {
    position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border-radius: var(--rounded-pill); border: 0; background: transparent; cursor: pointer; padding: 0 2px;
    color: var(--ink-soft); text-decoration: none; font: 500 12px/1 var(--font-text); white-space: nowrap;
  }
  .bottom-nav__item .nx-icon { --nx-size: 22px; color: var(--ink); }
  .bottom-nav__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .bottom-nav__item[aria-current="page"] {
    color: var(--ink); background: var(--surface-sunken);
    box-shadow: inset 0 2px 4px rgb(22 22 22 / .1), inset 0 -1px 0 rgb(255 255 255 / .7);
  }
  :root[data-theme="dark"] .bottom-nav__item[aria-current="page"] { box-shadow: inset 0 2px 4px rgb(0 0 0 / .4); }
  .bottom-nav__badge { position: absolute; top: 3px; left: calc(50% + 5px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--danger); color: #fff; font: 600 12px/1 var(--font-text); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--surface-raised); }
  :root[data-alt-tabbar="a"] .bottom-nav { padding: 0; }
  :root[data-alt-tabbar="a"] .bottom-nav__track { border-radius: 0; height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); padding: 6px 8px env(safe-area-inset-bottom); box-shadow: inset 0 1px 0 var(--line); }
  :root[data-alt-tabbar="a"] { --nx-bottom-ui: 64px; }
  :root[data-alt-tabbar="c"] .bottom-nav__track { transition: height var(--normal) var(--ease), translate var(--normal) var(--ease); }
  :root[data-alt-tabbar="c"][data-mz-scrolled] .bottom-nav__track { height: 52px; }
  :root[data-alt-tabbar="c"][data-mz-scrolled] .bottom-nav__item:not([aria-current="page"]) .bottom-nav__label { display: none; }
  :root[data-alt-tabbar="c"][data-mz-scrolled] .bottom-nav__item[aria-current="page"] { flex-direction: row; gap: 6px; flex-grow: 1.6; }
  :root[data-nx-drawer] .bottom-nav, :root[data-mz-hide-tabbar] .bottom-nav { display: none; }

  /* слои на телефоне */
  dialog[data-nx-as="sheet"][data-nx-side="bottom"] .modal__body, .mz-sheet-body { padding: 8px 16px 16px; }
  .modal__title, .nx-confirm__title { font-size: 22px; }
  .mz-pop { width: 100%; }
  .mz-pop[data-nx-as="sheet"] { max-height: 80dvh; }

  /* таблица → карточки-строки */
  .mz-table-wrap { background: transparent; box-shadow: none; padding: 0; overflow: visible; }
  .mz-table, .mz-table tbody, .mz-table tr, .mz-table td { display: block; width: 100%; }
  .mz-table thead { display: none; }
  .mz-table { border-spacing: 0; }
  .mz-table tbody { display: grid; gap: 8px; }
  .mz-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; border-radius: var(--rounded-md); background: var(--surface-raised); box-shadow: var(--hl-top), var(--shadow-1); }
  .mz-table td { height: auto; padding: 0; background: transparent !important; border-radius: 0 !important; font-size: 14px; }
  .mz-table td:first-child { grid-column: 1 / -1; padding: 0 0 6px; }
  .mz-table td[data-label]:not(:first-child) { display: contents; }
  .mz-table td[data-label]:not(:first-child)::before { content: attr(data-label); font: 400 13px/1.4 var(--font-text); color: var(--ink-soft); }
  .mz-table td[data-label]:not(:first-child) > * { justify-self: end; text-align: right; }
  .mz-table td.is-num { text-align: right; }
  .mz-table td[data-label] > .mz-tdv { justify-self: end; text-align: right; font-variant-numeric: tabular-nums; }

  /* липкое главное действие формы */
  .mz-sticky-action {
    position: sticky; bottom: calc(var(--nx-bottom-ui) + env(safe-area-inset-bottom)); z-index: var(--z-sticky);
    margin: 16px -16px 0; padding: 12px 16px; background: var(--glass-fill-strong);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 -12px 24px -18px rgb(22 22 22 / .35);
  }
  body[data-shell="none"] .mz-sticky-action, body[data-shell="panel"] .mz-sticky-action { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .mz-sticky-action > .btn { width: 100%; height: 52px; }
  .mz-fab { position: fixed; right: 16px; bottom: calc(var(--nx-bottom-ui) + 16px + env(safe-area-inset-bottom)); z-index: var(--z-sticky); }
  .mz-desk-only { display: none !important; }
}
@media (min-width: 768px) {
  .mz-phone-only { display: none !important; }
  .mz-fab-desk-hide { display: none; }
}