/*
 * Navex — «Туман»: фирменные компоненты, слои и движение (этап 106, прогон 106–116; docs/23_TUMAN.md).
 * Подключается ПОСЛЕ app.css (и panel.css / assistants.css). Здесь:
 *   A. движение и «живые» состояния: нажатие, кнопка-загрузка (nxBusy), тосты (nxToast), бегунок вкладок, скелетон;
 *   B. иконки: .nx-icon и их анимации при наведении (список — из docs/design-lab/shared/icons/icons.css);
 *   C. типографика и помощники раскладки (.mz-*);
 *   D. выбор, поля, код из 6 ячеек, бейджи-статусы, аватары;
 *   E. карточки и плитки: гель, цифры-табло, стопка таблеток, карточка клиента, тариф, канал;
 *   F. списки и таблица (.mz-table: строки-таблетки; на телефоне — карточки);
 *   G. слои: модалка и шторка <dialog>, меню/поповеры, подтверждение nxConfirm, тултип;
 *   H. пустое состояние, скелетон, ошибка, полосы-баннеры, виджет баланса, мини-графики, чат;
 *   I. телефон.
 * Источник — docs/design-lab/v2-mist/theme.css и docs/design-lab/shared/{motion-kit,ui}.css; значения токенов — tokens.css.
 * Каркас (меню 264, верхняя панель, капсула) — этап 107, см. layouts; здесь его нет.
 * Золотое правило нового CSS: переменные из токенов, без «магических» цветов.
 */

/* ================================================================
   A. ДВИЖЕНИЕ И ЖИВЫЕ СОСТОЯНИЯ
   ================================================================ */
.nx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nx-tabular { font-variant-numeric: tabular-nums lining-nums; }
@keyframes nx-fade-in { from { opacity: 0; } }
@keyframes nx-rise-in { from { opacity: 0; translate: 0 var(--enter-y); } }
@keyframes nx-spin { to { rotate: 360deg; } }
@keyframes nx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Нажатие: scale .97, переходы цвета — класс для любых кнопок-плиток (у .btn уже встроено) */
.nx-press { -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: scale 160ms var(--ease), background-color var(--fast) var(--ease-hover), border-color var(--fast) var(--ease-hover), color var(--fast) var(--ease-hover), opacity var(--fast) var(--ease-hover); }
.nx-press:active:not(:disabled):not([aria-disabled="true"]) { scale: var(--press-scale); transition-duration: var(--instant); }
.nx-press--sm:active:not(:disabled):not([aria-disabled="true"]) { scale: var(--press-scale-sm); }
.nx-press--lg:active:not(:disabled):not([aria-disabled="true"]) { scale: var(--press-scale-lg); }
/* Кликабельная карточка: подъём на 2px + тень через псевдоэлемент */
.nx-lift { position: relative; transition: translate var(--normal) var(--ease), scale 160ms var(--ease); }
.nx-lift::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: var(--nx-lift-shadow); opacity: 0; transition: opacity var(--normal) var(--ease-hover); }
@media (hover: hover) and (pointer: fine) {
    .nx-lift:hover { translate: 0 var(--lift-y); }
    .nx-lift:hover::after { opacity: 1; }
}
.nx-lift:active { scale: var(--press-scale-lg); transition-duration: var(--instant); }

/* Кнопка-загрузка nxBusy: подпись остаётся в потоке (ширина не прыгает), спиннер и галочка — поверх по центру */
:where(.nx-busy) { position: relative; }
.nx-busy__label { display: inline-flex; align-items: center; justify-content: center; gap: inherit; transition: opacity var(--fast) var(--ease), filter var(--fast) var(--ease); }
.nx-busy__spin, .nx-busy__done { position: absolute; inset: 0; margin: auto; width: 1.15em; height: 1.15em; opacity: 0; scale: .6; pointer-events: none; transition: opacity var(--fast) var(--ease), scale var(--fast) var(--ease); }
.nx-busy__spin { box-sizing: border-box; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: nx-spin var(--spinner-time) linear infinite; animation-play-state: paused; }
.nx-busy__done svg { display: block; width: 100%; height: 100%; }
.nx-busy__done path { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-busy="pending"], [data-busy="loading"], [data-busy="done"], [data-busy="submitting"] { cursor: progress; }
[data-busy="pending"] .nx-busy__label { opacity: .6; }
[data-busy="loading"] .nx-busy__label, [data-busy="done"] .nx-busy__label { opacity: 0; filter: blur(var(--blur-mask)); }
[data-busy="loading"] .nx-busy__spin { opacity: 1; scale: 1; animation-play-state: running; }
[data-busy="done"] .nx-busy__done { opacity: 1; scale: 1; }
[data-busy="done"] .nx-busy__done path { animation: nx-draw 360ms var(--ease) 60ms forwards; }
.nx-spinner { display: inline-block; box-sizing: border-box; width: 1em; height: 1em; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: nx-spin var(--spinner-time) linear infinite; }

/* Скелетон повторяет разметку; перелив — только пока идёт загрузка */
.nx-skel { position: relative; overflow: hidden; border-radius: var(--rounded-xs); background: var(--nx-skel); }
.nx-skel::after { content: ""; position: absolute; inset: 0; translate: -100% 0; background: linear-gradient(90deg, transparent, var(--nx-skel-shine), transparent); animation: nx-shimmer var(--shimmer-time) linear infinite; }
@keyframes nx-shimmer { to { translate: 100% 0; } }
.nx-loaded { animation: nx-fade-in var(--normal) var(--ease) both; }
/* Каскад появления списка (ui.js: nxStagger) и CSS-вариант */
.nx-stagger > * { --i: 0; }
[data-nx-play].nx-stagger > * { animation: nx-rise-in 260ms var(--ease) both; animation-delay: calc(min(var(--i), 7) * var(--stagger-step)); }
.nx-chevron { transition: rotate var(--normal) var(--ease); }
[aria-expanded="true"] > .nx-chevron, details[open] > summary .nx-chevron { rotate: 180deg; }

/* Переключатель, галочка, радио (новая разметка: <input type="checkbox" role="switch" class="nx-switch">) */
.nx-switch { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0; border-radius: 999px; cursor: pointer; background: var(--nx-switch-off); transition: background-color 200ms var(--ease-hover); }
.nx-switch::after { content: ""; position: absolute; inset: -9px -4px; }
.nx-switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transform-origin: 0 50%; transition: translate var(--spring-fast) var(--ease-bounce), scale var(--fast) var(--ease), background-color var(--fast) var(--ease-hover); }
.nx-switch:checked { background: var(--primary); box-shadow: inset 0 0 0 1px rgb(22 22 22 / .18); }
.nx-switch:checked::before { translate: 18px 0; transform-origin: 100% 50%; background: #161616; box-shadow: none; }
.nx-switch:active::before { scale: 1.14 1; }
.nx-switch:disabled { opacity: .5; cursor: not-allowed; }
.nx-switch[aria-busy="true"] { cursor: progress; opacity: .7; }
.nx-switch:focus-visible, .nx-check:focus-visible, .nx-radio:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nx-check { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; cursor: pointer; border: 1.5px solid var(--nx-check-border); background: var(--surface-raised); transition: background-color var(--fast) var(--ease-hover), border-color var(--fast) var(--ease-hover), scale 160ms var(--ease); }
.nx-check::before { content: ""; position: absolute; inset: 1px; background: var(--ink-inverse); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; clip-path: inset(0 100% 0 0); transition: clip-path 180ms var(--ease); }
.nx-check:checked { background: var(--nx-accent); border-color: var(--nx-accent); }
.nx-check:checked::before { clip-path: inset(0 0 0 0); transition-delay: 40ms; }
.nx-check:active { scale: .9; transition-duration: var(--instant); }
.nx-check:disabled, .nx-radio:disabled { opacity: .5; cursor: not-allowed; }
.nx-radio { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 20px; height: 20px; margin: 0; border-radius: 50%; cursor: pointer; border: 1.5px solid var(--nx-check-border); background: var(--surface-raised); transition: border-color var(--fast) var(--ease-hover); }
.nx-radio::before { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--nx-accent); scale: .4; opacity: 0; transition: scale var(--fast) var(--ease), opacity var(--fast) var(--ease); }
.nx-radio:checked { border-color: var(--nx-accent); }
.nx-radio:checked::before { scale: 1; opacity: 1; }


/* ================================================================
   B. ИКОНКИ (<x-icon>, спрайт Hugeicons). Размер задаёт место (.btn svg …) или атрибут size; по умолчанию — 1em.
   При наведении на кнопку/ссылку/пункт меню иконка проигрывает свою короткую анимацию (data-anim из catalog.js прототипа).
   ================================================================ */
.nx-icon { width: var(--nx-size, 1em); height: var(--nx-size, 1em); flex: none; overflow: visible; transform-origin: 50% 50%; color: inherit; }
.nx-icon[data-anim="ring"], .nx-icon[data-anim="tick"] { transform-origin: 50% 14%; }
.nx-icon[data-anim="bounce"] { transform-origin: 50% 100%; }
/* активный пункт: линия чуть плотнее (у набора без «залитых близнецов») */
:is(.is-active, [aria-current="page"], [aria-current="true"], [aria-selected="true"], [aria-pressed="true"]) > .nx-icon { --nx-sw: 2; }
@media (hover: hover) and (pointer: fine) {
    :where(a, button, [role="button"], [role="tab"], [role="menuitem"], label, summary, .nx-hover):hover .nx-icon[data-anim] { animation: var(--nx-anim, none); }
}
.nx-icon[data-anim="ring"] { --nx-anim: nx-ico-ring .8s var(--ease-in-out); }
.nx-icon[data-anim="shake"] { --nx-anim: nx-ico-shake .45s var(--ease-in-out); }
.nx-icon[data-anim="spin"] { --nx-anim: nx-ico-spin .9s var(--ease-pop); }
.nx-icon[data-anim="spin-full"] { --nx-anim: nx-ico-spin-full .8s var(--ease); }
.nx-icon[data-anim="beat"] { --nx-anim: nx-ico-beat 1s ease-in-out; }
.nx-icon[data-anim="star"] { --nx-anim: nx-ico-star .7s var(--ease-pop); }
.nx-icon[data-anim="fly"] { --nx-anim: nx-ico-fly .75s var(--ease); }
.nx-icon[data-anim="nudge-r"] { --nx-anim: nx-ico-nudge-r .55s var(--ease); }
.nx-icon[data-anim="nudge-l"] { --nx-anim: nx-ico-nudge-l .55s var(--ease); }
.nx-icon[data-anim="nudge-d"] { --nx-anim: nx-ico-nudge-d .55s var(--ease); }
.nx-icon[data-anim="nudge-u"] { --nx-anim: nx-ico-nudge-u .55s var(--ease); }
.nx-icon[data-anim="nudge-ur"] { --nx-anim: nx-ico-nudge-ur .55s var(--ease); }
.nx-icon[data-anim="bob"] { --nx-anim: nx-ico-bob .9s ease-in-out; }
.nx-icon[data-anim="bounce"], .nx-icon[data-anim="grow"] { --nx-anim: nx-ico-bounce .6s var(--ease); }
.nx-icon[data-anim="flash"] { --nx-anim: nx-ico-flash .6s linear; }
.nx-icon[data-anim="tilt"] { --nx-anim: nx-ico-tilt .7s var(--ease-in-out); }
.nx-icon[data-anim="zoom"] { --nx-anim: nx-ico-zoom .55s var(--ease-pop); }
.nx-icon[data-anim="shrink"] { --nx-anim: nx-ico-shrink .5s var(--ease-pop); }
.nx-icon[data-anim="blink"] { --nx-anim: nx-ico-blink .5s var(--ease-in-out); }
.nx-icon[data-anim="rot90"] { --nx-anim: nx-ico-rot90 .5s var(--ease-pop); }
.nx-icon[data-anim="tick"] { --nx-anim: nx-ico-tick .8s var(--ease-in-out); }
.nx-icon[data-anim="flip"] { --nx-anim: nx-ico-flip .8s var(--ease); }
.nx-icon[data-anim="turn"] { --nx-anim: nx-ico-turn .6s var(--ease-pop); }
.nx-icon[data-anim="drive"] { --nx-anim: nx-ico-drive .8s var(--ease); }
.nx-icon[data-anim="wobble"] { --nx-anim: nx-ico-wobble .8s var(--ease-in-out); }
.nx-icon[data-anim="sun"] { --nx-anim: nx-ico-sun 1s var(--ease); }
.nx-icon[data-anim="press"] { --nx-anim: nx-ico-press .4s var(--ease-pop); }
.nx-icon[data-anim="pop"], .nx-icon[data-anim="draw"] { --nx-anim: nx-ico-pop .5s var(--ease-pop); }
.nx-icon[data-anim="twinkle"] { --nx-anim: nx-ico-twinkle .9s ease-in-out; }
@keyframes nx-ico-ring { 0% { rotate: 0deg; } 15% { rotate: 14deg; } 30% { rotate: -12deg; } 45% { rotate: 9deg; } 60% { rotate: -6deg; } 75% { rotate: 3deg; } 100% { rotate: 0deg; } }
@keyframes nx-ico-shake { 0%, 100% { translate: 0; } 20% { translate: -1.5px 0; } 40% { translate: 1.5px 0; } 60% { translate: -1px 0; } 80% { translate: 1px 0; } }
@keyframes nx-ico-spin { from { rotate: 0deg; } to { rotate: 180deg; } }
@keyframes nx-ico-spin-full { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes nx-ico-beat { 0% { scale: 1; } 14% { scale: 1.18; } 28% { scale: 1; } 42% { scale: 1.12; } 70%, 100% { scale: 1; } }
@keyframes nx-ico-star { 0% { rotate: 0deg; scale: 1; } 50% { rotate: 36deg; scale: 1.18; } 100% { rotate: 72deg; scale: 1; } }
@keyframes nx-ico-fly { 0% { translate: 0 0; scale: 1; opacity: 1; } 40% { translate: 5px -5px; scale: .7; opacity: 0; } 41% { translate: -5px 5px; scale: .7; opacity: 0; } 100% { translate: 0 0; scale: 1; opacity: 1; } }
@keyframes nx-ico-nudge-r { 0%, 100% { translate: 0; } 40% { translate: 3px 0; } 70% { translate: -1px 0; } }
@keyframes nx-ico-nudge-l { 0%, 100% { translate: 0; } 40% { translate: -3px 0; } 70% { translate: 1px 0; } }
@keyframes nx-ico-nudge-d { 0%, 100% { translate: 0; } 40% { translate: 0 3px; } 70% { translate: 0 -1px; } }
@keyframes nx-ico-nudge-u { 0%, 100% { translate: 0; } 40% { translate: 0 -3px; } 70% { translate: 0 1px; } }
@keyframes nx-ico-nudge-ur { 0%, 100% { translate: 0; } 40% { translate: 2.5px -2.5px; } 70% { translate: -.75px .75px; } }
@keyframes nx-ico-bob { 0%, 100% { translate: 0; rotate: 0deg; } 30% { translate: 0 -2.5px; rotate: -5deg; } 65% { translate: 0 1px; rotate: 3deg; } }
@keyframes nx-ico-bounce { 0% { translate: 0; scale: 1; } 25% { translate: 0 -3.5px; scale: .96 1.05; } 50% { translate: 0; scale: 1.08 .9; } 72% { translate: 0 -1px; scale: .98 1.02; } 100% { translate: 0; scale: 1; } }
@keyframes nx-ico-flash { 0%, 100% { opacity: 1; scale: 1; } 20% { opacity: .25; } 40% { opacity: 1; scale: 1.14; } 60% { opacity: .5; } 80% { opacity: 1; } }
@keyframes nx-ico-tilt { 0%, 100% { rotate: 0deg; } 25% { rotate: -14deg; } 55% { rotate: 10deg; } 80% { rotate: -4deg; } }
@keyframes nx-ico-zoom { 0%, 100% { scale: 1; rotate: 0deg; } 45% { scale: 1.16; rotate: -8deg; } }
@keyframes nx-ico-shrink { 0%, 100% { scale: 1; } 45% { scale: .78; } }
@keyframes nx-ico-blink { 0%, 100% { scale: 1 1; } 35% { scale: 1 .08; } 60% { scale: 1 1; } }
@keyframes nx-ico-rot90 { from { rotate: 0deg; } to { rotate: 90deg; } }
@keyframes nx-ico-tick { 0% { rotate: 0deg; } 20% { rotate: -14deg; } 40% { rotate: 11deg; } 60% { rotate: -6deg; } 80% { rotate: 3deg; } 100% { rotate: 0deg; } }
@keyframes nx-ico-flip { 0% { transform: perspective(120px) rotateY(0deg); } 100% { transform: perspective(120px) rotateY(360deg); } }
@keyframes nx-ico-turn { from { rotate: 0deg; } to { rotate: 180deg; } }
@keyframes nx-ico-drive { 0% { translate: 0; opacity: 1; } 38% { translate: 6px 0; opacity: 0; } 39% { translate: -6px 0; opacity: 0; } 100% { translate: 0; opacity: 1; } }
@keyframes nx-ico-wobble { 0%, 100% { rotate: 0deg; } 30% { rotate: -22deg; } 60% { rotate: 9deg; } 80% { rotate: -3deg; } }
@keyframes nx-ico-sun { from { rotate: 0deg; } to { rotate: 90deg; } }
@keyframes nx-ico-press { 0%, 100% { scale: 1; } 40% { scale: .8; } }
@keyframes nx-ico-pop { 0% { scale: 1; } 35% { scale: .84; } 70% { scale: 1.08; } 100% { scale: 1; } }
@keyframes nx-ico-twinkle { 0%, 100% { scale: 1; opacity: 1; } 40% { scale: .6; opacity: .5; } 70% { scale: 1.12; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) .nx-icon { animation: none !important; }
}

/* ================================================================
   Тултип-одиночка и тосты (ui.js: nxToast, [data-nx-tip])
   ================================================================ */
.nx-tip { position: fixed; z-index: 130; left: 0; top: 0; pointer-events: none; max-width: 240px; padding: 7px 10px; border-radius: 10px; background: #1D1E1E; color: #F2F3F2; font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; box-shadow: 0 8px 24px -8px rgb(0 0 0 / .35); opacity: 0; scale: .97; transform-origin: var(--nx-origin, 0 50%); transition: opacity 125ms var(--ease), scale 125ms var(--ease); }
.nx-tip[data-on] { opacity: 1; scale: 1; }
.nx-tip[data-instant] { transition-duration: 0ms; }

/* Тосты: графитовое стекло; ПК — справа снизу, телефон — по центру над нижней навигацией. Стопка по модели Sonner. */
.nx-toaster { position: fixed; z-index: var(--z-toast); left: 50%; translate: -50% 0; bottom: calc(16px + env(safe-area-inset-bottom) + var(--nx-bottom-ui, 0px)); width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.nx-toaster[popover] { margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; top: auto; right: auto; }
.nx-toast { position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 12px 12px 16px; border-radius: var(--rounded-md); color: var(--nx-toast-ink); 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); font-size: 14px; font-weight: 500; line-height: 1.4; pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; opacity: 0; transition: transform var(--toast-time) ease, opacity var(--toast-time) ease; }
.nx-toast::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.nx-toast[data-mounted] { opacity: 1; }
.nx-toast[data-hidden] { opacity: 0; pointer-events: none; }
.nx-toast[data-removed] { opacity: 0; pointer-events: none; transition-duration: 200ms; }
.nx-toast[data-swiping] { transition: none; }
.nx-toast > * { transition: opacity var(--toast-time) ease; }
.nx-toaster:not([data-expanded]) .nx-toast:not([data-front]) > * { opacity: 0; }
.nx-toast__icon { flex: none; width: 18px; height: 18px; display: grid; place-items: center; }
.nx-toast__icon::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .6; }
.nx-toast--success .nx-toast__icon::before { background: var(--primary); opacity: 1; }
.nx-toast--error .nx-toast__icon::before { background: #F07171; opacity: 1; }
.nx-toast--warning .nx-toast__icon::before { background: #E3B04B; opacity: 1; }
.nx-toast--info .nx-toast__icon::before { background: #F2F3F2; opacity: 1; }
.nx-toast--loading .nx-toast__icon::before { display: none; }
.nx-toast__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nx-toast__action { flex: none; min-height: 32px; padding: 0 12px; border: 1px solid rgb(255 255 255 / .3); border-radius: 999px; color: inherit; background: transparent; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .nx-toast__action:hover { background: rgb(255 255 255 / .1); } }
.nx-toast__close { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; color: inherit; background: rgb(255 255 255 / .1); cursor: pointer; opacity: 0; transition: opacity var(--fast) var(--ease-hover); }
.nx-toast:focus-within .nx-toast__close { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .nx-toast:hover .nx-toast__close { opacity: 1; } }
@media (hover: none) { .nx-toast__close { display: none; } }
@media (min-width: 768px) { .nx-toaster, .nx-toaster[popover] { left: auto; right: 24px; translate: none; width: 380px; } }
@media (max-width: 767.98px) { .nx-toast__action { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) .nx-toast { transition-property: opacity; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nx-toast { background: #1D1E1E; } }
@media (prefers-reduced-transparency: reduce) { .nx-toast { -webkit-backdrop-filter: none; backdrop-filter: none; background: #1D1E1E; } }


/* ================================================================
   C. ТИПОГРАФИКА И ПОМОЩНИКИ РАСКЛАДКИ (theme.css §1)
   ================================================================ */

/* — типографика — */
.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; }

/* ================================================================
   D. ПОЛЯ, ВЫБОР, БЕЙДЖИ-СТАТУСЫ, АВАТАРЫ (theme.css §5–§8)
   ================================================================ */

/* ================================================================
   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"); }


.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; }

/* чипы-фильтры (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; }
/* AI-признак: розовый гель */
.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); }
/* чип «Отвечает: AI / Нурлан / выключен / вне расписания / остановлен» */
.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); }

/* ================================================================
   E. КАРТОЧКИ И ПЛИТКИ (theme.css §9): гель, цифры-табло, стопка таблеток, карточка клиента, тариф, канал
   ================================================================ */

/* вложенная белая плитка внутри карточки: радиус 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 (AI) | --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); }
/* маленькая гелевая плашка-иконка (файл, канал, AI): 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 — с AI-резюме) ===== */
.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); } }

/* ================================================================
   F. СПИСКИ И ТАБЛИЦА (theme.css §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; }

/* ================================================================
   G. СЛОИ: модалка <dialog data-nx-modal>, шторка <dialog data-nx-sheet="bottom|right|left">, меню [data-nx-menu]
   Открывает ui.js (nxOpen/nxClose/nxConfirm). Состояние «открыто» — класс .is-open; фазы — data-nx-* (ставит ui.js).
   Прежние окна на Alpine (.modal-overlay > .modal, .panel) живут как были — их вид задан в app.css теми же значениями.
   ================================================================ */
:root[data-nx-lock] { overflow: hidden; }
:root[data-nx-lock="gutter"] { scrollbar-gutter: stable; }
dialog:is([data-nx-modal], [data-nx-sheet]) { box-sizing: border-box; padding: 0; border: 0; max-width: none; max-height: none; color: inherit; overflow: auto; overscroll-behavior: contain; opacity: 0; }
dialog:is([data-nx-modal], [data-nx-sheet])::backdrop { background: var(--scrim); opacity: 0; transition: opacity 150ms cubic-bezier(.23, 1, .32, 1); }
dialog:is([data-nx-modal], [data-nx-sheet]).is-open::backdrop { opacity: 1; transition-duration: 220ms; }
dialog[data-nx-static]::backdrop { cursor: default; }
dialog[data-nx-as="modal"] { position: fixed; inset: 0; margin: auto; width: min(var(--nx-modal-w, 520px), calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 48px); transform-origin: var(--nx-origin, 50% 50%); scale: var(--enter-scale, .97); background: var(--surface-raised); color: var(--ink); border-radius: var(--rounded-lg); box-shadow: var(--shadow-float), 0 0 0 1px var(--line); transition: opacity var(--fast) var(--ease), scale var(--fast) var(--ease); }
dialog[data-nx-as="modal"].is-open { opacity: 1; scale: 1; transition-duration: var(--normal); }
dialog[data-nx-as="sheet"] { position: fixed; margin: 0; opacity: 1; background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-float); transition: translate 280ms var(--ease-drawer), opacity 280ms var(--ease), height var(--slow) var(--ease-drawer); }
dialog[data-nx-as="sheet"][open] { display: flex; flex-direction: column; }
dialog[data-nx-as="sheet"].is-open { translate: 0 0; transition-duration: var(--sheet), var(--sheet), var(--slow); }
dialog[data-nx-as="sheet"][data-nx-dragging] { transition: none; -webkit-user-select: none; user-select: none; }
dialog[data-nx-as="sheet"][data-nx-settle] { transition: translate var(--spring) var(--ease-spring), height var(--spring) var(--ease-spring); }
dialog[data-nx-as="sheet"][data-nx-side="bottom"] { inset: auto 0 0 0; margin-inline: auto; width: 100%; max-width: var(--nx-sheet-max-w, 720px); height: auto; max-height: 92dvh; padding-bottom: env(safe-area-inset-bottom); translate: 0 100%; border-radius: var(--rounded-lg) var(--rounded-lg) 0 0; }
dialog[data-nx-as="sheet"][data-nx-side="bottom"][data-nx-snap="half"] { height: 55dvh; }
dialog[data-nx-as="sheet"][data-nx-side="bottom"][data-nx-snap="full"] { height: 92dvh; }
dialog[data-nx-as="sheet"]:is([data-nx-side="right"], [data-nx-side="left"]) { inset: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(var(--nx-sheet-w, 480px), calc(100vw - 24px)); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); translate: 100% 0; border-radius: var(--rounded-lg) 0 0 var(--rounded-lg); }
dialog[data-nx-as="sheet"][data-nx-side="left"] { inset: 0 auto 0 0; translate: -100% 0; border-radius: 0 var(--rounded-lg) var(--rounded-lg) 0; }
dialog[data-nx-as="sheet"][data-nx-side].is-open { translate: 0 0; }
.nx-sheet__handle { position: relative; flex: none; width: 36px; height: 5px; margin: 10px auto 6px; border-radius: 3px; background: var(--ink); opacity: .2; touch-action: none; cursor: grab; }
.nx-sheet__handle::after { content: ""; position: absolute; inset: -14px -60px; }
dialog:not([data-nx-as="sheet"]) .nx-sheet__handle, dialog[data-nx-as="sheet"]:is([data-nx-side="right"], [data-nx-side="left"]) .nx-sheet__handle { display: none; }
dialog[data-nx-as="sheet"] [data-nx-drag] { touch-action: none; }
dialog[data-nx-as="sheet"] .nx-sheet__body, dialog[data-nx-as="sheet"] [data-nx-scroll-area] { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
dialog .modal__body { padding: 28px; display: grid; gap: 16px; }
dialog .modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
dialog .modal__title { margin: 0; }
dialog .modal__close { margin: -6px -8px 0 0; }
dialog .modal__footer { margin-top: 8px; }
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; min-height: 48px; }
.mz-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 16px 8px; }
.mz-sheet__title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.nx-scrim { position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1); background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 280ms var(--ease); }
.nx-scrim[data-on] { opacity: 1; pointer-events: auto; transition-duration: var(--sheet); }

/* Меню и поповеры [data-nx-menu] (Popover API; на телефоне — шторка снизу) */
[data-nx-menu][popover] { box-sizing: border-box; position: fixed; inset: auto; margin: 0; overflow: auto; overscroll-behavior: contain; max-height: calc(100dvh - 16px); max-width: calc(100vw - 16px); opacity: 0; scale: .98; transform-origin: var(--nx-origin, 50% 0); transition: opacity var(--fast) var(--ease), scale var(--fast) var(--ease), translate var(--fast) var(--ease); 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-size: 14px; line-height: 1.3; }
[data-nx-menu][data-nx-as="pop"]:not(.is-open) { translate: 0 var(--nx-pop-y, -4px); scale: var(--enter-scale, .97); }
[data-nx-menu][data-nx-as="pop"][data-nx-closing] { translate: 0 0; scale: .98; }
[data-nx-menu].is-open { opacity: 1; scale: 1; translate: 0 0; transition-duration: var(--normal); }
[data-nx-menu][data-nx-instant] { transition: none; }
[data-nx-menu]::backdrop { background: transparent; }
[data-nx-menu][data-nx-as="sheet"] { inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 80dvh; padding: 8px 8px max(12px, env(safe-area-inset-bottom)); border-radius: var(--rounded-lg) var(--rounded-lg) 0 0; opacity: 1; scale: 1; translate: 0 100%; transition: translate 280ms var(--ease-drawer), opacity 280ms var(--ease); }
[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][data-nx-as="sheet"].is-open { translate: 0 0; transition-duration: var(--sheet); }
[data-nx-menu][data-nx-as="sheet"]::backdrop { background: var(--scrim); opacity: 0; transition: opacity 150ms ease; }
[data-nx-menu][data-nx-as="sheet"].is-open::backdrop { opacity: 1; transition-duration: 300ms; }
[data-nx-menu] [role^="menuitem"], .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-size: 14px; font-weight: 500; line-height: 1.25; cursor: pointer; }
[data-nx-menu][data-nx-as="sheet"] [role^="menuitem"] { min-height: 52px; font-size: 15px; }
[data-nx-menu] [role^="menuitem"] svg { width: 20px; height: 20px; color: var(--ink-soft); flex: none; }
[data-nx-menu] [role^="menuitem"]: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); cursor: default; }
.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; color: var(--ink-soft); font-size: 12px; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-sheet__title, .nx-menu__title { padding: 10px 12px 6px; color: var(--ink-soft); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.menu-sheet__sep { height: 1px; margin: 6px 8px; border: 0; background: var(--line); }
.menu-sheet__item--danger, [data-nx-menu] [role^="menuitem"].is-danger { color: var(--danger); }
.menu-sheet__item--danger svg { color: var(--danger) !important; }
.menu-sheet__check { margin-left: auto; color: var(--ink); }

/* Подтверждение nxConfirm: окно по центру (на телефоне — шторка снизу), кнопки справа; опасное — красная кнопка */
.nx-confirm { --nx-modal-w: 440px; }
.nx-confirm__body { padding: 28px; display: grid; gap: 12px; }
.nx-confirm__title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
.nx-confirm__text { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; white-space: pre-line; } /* этап 120: второй абзац — через пустую строку */
.nx-confirm__type { display: grid; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.nx-confirm__type[hidden] { display: none; }
.nx-confirm__input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--rounded-pill); background: var(--surface-raised); font-size: 16px; }
.nx-confirm__input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgb(227 244 80 / .75); }
.nx-confirm__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.nx-confirm__actions .btn { min-height: 44px; }
.nx-confirm__cancel { background: var(--surface-subtle) !important; box-shadow: none !important; }
dialog[data-nx-as="sheet"].nx-confirm .nx-confirm__body { padding: 8px 20px 20px; }
@media (max-width: 767.98px) {
    .nx-confirm__title { font-size: 22px; }
    .nx-confirm__actions { flex-direction: column-reverse; }
    .nx-confirm__actions > * { width: 100%; min-height: 48px; }
}

/* Код из ячеек [data-nx-otp] (ui.js): 6 ячеек поверх одного input — автозаполнение из SMS и вставка работают нативно */
.nx-otp { position: relative; display: inline-block; max-width: 100%; }
.nx-otp__cells { display: flex; gap: var(--nx-otp-gap, 8px); pointer-events: none; }
.nx-otp__cell { position: relative; display: grid; place-items: center; flex: 1 1 0; width: var(--nx-otp-w, 48px); min-width: 0; height: var(--nx-otp-h, 56px); font-variant-numeric: tabular-nums; 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 { background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-faint); }
.nx-otp__char[data-new] { animation: nx-otp-pop var(--normal) var(--ease); }
.nx-otp__caret { position: absolute; width: 2px; height: 40%; border-radius: 1px; background: currentColor; opacity: 0; }
.nx-otp[data-focus] .nx-otp__cell[data-active] .nx-otp__caret { animation: nx-otp-caret 1s steps(1) infinite; }
.nx-otp__input { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: -.5em; text-indent: -9999px; cursor: text; }
.nx-otp__input::selection { background: transparent; }
.mz-otp--split .nx-otp__cell:nth-child(3) { margin-right: 20px; }
@keyframes nx-otp-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes nx-otp-pop { from { scale: .6; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) dialog:is([data-nx-modal], [data-nx-sheet]), :root:not([data-motion="full"]) [data-nx-menu][popover] { translate: 0 0 !important; scale: 1 !important; }
    :root:not([data-motion="full"]) dialog[data-nx-as="sheet"]:not(.is-open), :root:not([data-motion="full"]) [data-nx-menu][data-nx-as="sheet"]:not(.is-open) { opacity: 0; }
    :root:not([data-motion="full"]) .nx-otp__char { animation: none; }
}


/* ================================================================
   Поповер колокольчика и строка уведомления (theme.css §11)
   ================================================================ */

/* поповер колокольчика / AI-панели (контентный, не список) */
.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); } }

/* ================================================================
   H. ПУСТО, ЗАГРУЗКА, ОШИБКА (theme.css §12), БАЛАНС AI (§14), МИНИ-ГРАФИКИ (§15), ЧАТ (§16), 3D И СТЕКЛО (§17)
   ================================================================ */

.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); }
.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; }
/* столбики: <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; }
.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 — без пузырей, как лента писем */
/* полоса «Кто отвечает» */
.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; }
.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; }
}

/* ================================================================
   Полосы с круглым значком (theme.css §13): <div class="notice notice--danger"><span class="notice__ico">…</span>
   <span class="notice__text">…</span><span class="notice__actions">…</span></div> — таблетка 52, значок цвета статуса
   ================================================================ */
.notice:has(> .notice__ico) { align-items: center; min-height: 52px; padding: 6px 6px 6px 8px; border-radius: var(--rounded-pill); }
.notice:has(> .notice__ico).notice--block { border-radius: var(--rounded-md); align-items: flex-start; padding: 12px; }
.notice__ico { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; }
.notice__ico svg { width: 18px; height: 18px; margin: 0; color: inherit; }
.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 .notice__actions { align-self: center; }

/* ================================================================
   I. ПЛАНШЕТ И ТЕЛЕФОН
   ================================================================ */
@media (max-width: 1279.98px) { .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) {
    .page__title, .mz-h1 { font-size: 28px; }
    .mz-display { font-size: 44px; }
    .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; }
    .mz-gel { border-radius: var(--rounded-lg); padding: 18px; }
    .mz-input, .mz-select, .mz-textarea, .nx-confirm__input, .mz-composer textarea { font-size: 16px; }
    .input, .select, .textarea { font-size: 16px; }
    .btn-sm { min-height: 44px; }
    .btn-icon.btn-sm { width: 44px; height: 44px; }
    .segmented button, .segmented a, .segmented__item { min-height: 40px; }
    .tabs__item { min-height: 44px; }
    .mz-chip { height: 40px; padding: 0 16px; }
    .badge { height: 26px; }
    .modal__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); color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
    .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; }
    /* липкое главное действие формы и FAB */
    .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); }
    .mz-sticky-action > .btn { width: 100%; min-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; }
}

/* Занятая кнопка без «каркаса» (ui.js: nxBusy / защита форм): подпись скрыта, ширина сохранена, по центру — спиннер цвета подписи */
.is-busy { position: relative; color: transparent !important; text-shadow: none !important; pointer-events: none; cursor: progress; }
.is-busy > * { opacity: 0; }
.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.15em; height: 1.15em; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--nx-busy-color, var(--ink)); border-right-color: transparent; animation: nx-spin var(--spinner-time) linear infinite; }
.btn-danger.is-busy, .btn-dark.is-busy { --nx-busy-color: #fff; }

/* Слово «Navex» рядом со знаком-каплей (Inter Tight 300); в каркасе его рисует меню (этап 107) */

/* «Замороженные» состояния кнопок для кита (/dev/styleguide): .is-hover .is-active .is-focus */
.btn-primary.is-hover { background: var(--primary-hover); }
.btn-secondary.is-hover, .btn.is-hover:not([class*="btn-"]) { background: var(--surface); }
.btn-outline.is-hover { background: rgb(22 22 22 / .04); border-color: 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; }

/* этап 108: поле кода из ячеек — рамку фокуса рисуют сами ячейки, а не прозрачное поле на всю ширину (input:focus-visible из app.css его обводил) */
.nx-otp .nx-otp__input:focus-visible { outline: none; }

/* этап 116-B1: «голые» чекбоксы без класса .nx-check (окно «Удалить данные клиента», Telegram в профиле, письма и др.) — цвет галочки как у .nx-check, а не синий системный */
input[type="checkbox"]:not(.nx-check):not(.nx-switch):not([role="switch"]) { accent-color: var(--ink); }

/* этап 116-B1: раскрывающиеся строки <details> без системного треугольника — подпись и стрелка-значок (поворачивается в mist.css) */
.mz-disclosure { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; }
.mz-disclosure::-webkit-details-marker { display: none; }
.mz-disclosure--inline { display: inline-flex; justify-content: flex-start; gap: 6px; }
.mz-disclosure .nx-chevron { flex: none; transition: rotate var(--fast) var(--ease); }
.mz-disclosure:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--rounded-sm); }

/* этап 116-B1: стрелка в ссылке и кнопке — значок (arrow-up-right / arrow-right / arrow-left / check) вместо текстовых ↗ → ← ✓ */
.nx-link-ico { display: inline-block; flex: none; vertical-align: -2px; margin-inline-start: 4px; }
.nx-link-ico--lead { margin-inline: 0 4px; }
.btn > .nx-link-ico, .link-button > .nx-link-ico { margin-inline-start: 0; }