/*
 * Дизайн-токены Navex — тема «Туман» (прогон 106–116, docs/23_TUMAN.md).
 * Значения взяты из docs/design-lab/v2-mist/theme.css (:root) и DESIGN.md «до символа»; выбранные владельцем значения по умолчанию:
 * плотность «просторная» (alt-kit-density=c: --control-h 44, --space-card 32), радиусы варианта (alt-kit-radius=a), тема светлая.
 *
 * Старые имена переменных (--accent*, --r-*, --shadow-sm …) СОХРАНЕНЫ и указывают на новые значения — страницы, которые ещё не
 * переделаны, не ломаются, а просто перекрашиваются. Новый код пользуется новыми именами (--primary, --rounded-*, --space-*).
 * Шрифты (Inter Tight + Inter, Doto для цифр-табло) подключаются через Google Fonts <link> в layouts (partial layouts/_fonts).
 */
: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-признак: розовый гель ===== */
    --ai: #A8325F;                   /* текст/иконка AI: 5,15:1 на холсте */
    --ai-soft: #F7DDE8;              /* фон AI-пузыря, AI-чипа */
    --ai-gel: radial-gradient(120% 120% at 30% 25%, #F0C3D7 0%, #E16991 55%, #C24A78 100%);

    /* ===== Этапы воронки, статусы записи, каналы ===== */
    --stage-new: #6B7A90; --stage-work: #2F6FDB; --stage-booked: #7A5AE0;
    --stage-confirmed: #0E9AA7; --stage-won: #1F9E5A; --stage-lost: #C2412D;
    --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%);
    /* Палитра обычных (не «Новый/Успешно/Отказ») этапов воронки — по порядку, по кругу (stageColor() в sales.js/chats.js).
       Все тона достаточно тёмные: белый текст на плашке этапа читается (контраст от 4,5). Литералами hex — их читает тест палитры. */
    --stage-1: #2F6FDB;
    --stage-2: #0E7490;
    --stage-3: #7A5AE0;
    --stage-4: #BE185D;
    --stage-5: #2E7D32;
    --stage-6: #C2412D;

    /* ===== Стекло ===== */
    --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;
    --font-sans: var(--font-text);

    /* ===== Шкала шрифта ===== */
    --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: 32px;              /* плотность «просторная» (alt-kit-density=c) */
    --space-card-mobile: 16px;
    --space-block: 24px;
    --page-pad: 32px;

    /* ===== Каркас и высоты управляющих элементов ===== */
    --sidebar-w: 264px;
    --sidebar-w-collapsed: 84px;
    --topbar-h: 64px;
    --nx-stick: var(--topbar-h);     /* этап 117: сколько сверху занимает липкая шапка; на ПК шапка не липкая — 0 (ниже) */
    --bottom-nav-h: 64px;
    --control-h: 44px;               /* «просторная»: 44 (обычная 40, компактная 36) */
    --control-h-lg: 48px;
    --control-h-sm: 32px;
    --touch-min: 44px;
    --content-max: 1440px;           /* этап 118 (§9.4): страница, шапка и полосы — одной ширины, по центру */
    --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);

    /* ===== Движение (характер «soft» из motion-kit: --ease = кривая шторки) ===== */
    --ease: cubic-bezier(.32, .72, 0, 1);
    --ease-in-out: cubic-bezier(.77, 0, .175, 1);
    --ease-drawer: cubic-bezier(.32, .72, 0, 1);
    --ease-hover: ease;
    --ease-spring: var(--ease);
    --ease-bounce: var(--ease-spring);
    --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
    --instant: 100ms; --fast: 180ms; --normal: 260ms; --slow: 380ms; --sheet: 420ms; --page: 260ms;
    --toast-time: 400ms; --spring-fast: 320ms; --spring: 480ms; --spring-slow: 640ms;
    --bounce-time: 590ms; --pop-time: 940ms; --spinner-time: 600ms; --shimmer-time: 1400ms; --stagger-step: 30ms;
    --press-scale: .97; --press-scale-sm: .94; --press-scale-lg: .985;
    --enter-scale: .97; --enter-y: 10px; --pop-y: -4px; --lift-y: -2px; --shake-x: 4px; --vt-x: 24px; --blur-mask: 2px;
    --sheet-from: 0 100%; --sheet-closed-opacity: 1; --drawer-from: -100% 0;

    /* ===== Слои ===== */
    --z-sticky: 10;
    --z-nav: 20;
    --z-sidebar: 30;
    --z-topbar: 20;
    --z-dropdown: 80;
    --z-panel-backdrop: 90;
    --z-panel: 91;
    --z-sheet: 95;
    --z-modal: 100;
    --z-toast: 120;

    /* ===== Переменные, которые читают ui.js и мотив-кит ===== */
    --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;
    --nx-sw: 1.5;

    --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");

    /* ===================================================================
       СТАРЫЕ ИМЕНА → новые значения (до перевода каждой страницы в этапах 107–116)
       =================================================================== */
    --accent: var(--primary);                    /* заливки: кислотный. Текст на нём — var(--on-primary) */
    --accent-strong: var(--ink);                 /* текст на мягкой заливке и «ссылочный» цвет — чернила */
    --accent-soft: var(--primary-soft);
    --accent-faint: var(--primary-faint);
    --accent-gradient: var(--primary);           /* сплошной: в background работает как цвет */
    --blue: var(--info);
    --blue-soft: var(--info-soft);
    --cyan: #0E9AA7;       --cyan-soft: #D9F0F2;
    --purple: #7A5AE0;     --purple-soft: #E9E3F9;
    --teal: #1F9E5A;       --teal-soft: #DCEDDF;
    --dark-bg: #161616;
    --dark-surface: rgba(255, 255, 255, .06);
    --dark-line: rgba(255, 255, 255, .12);
    --dark-ink: #ffffff;
    --dark-ink-soft: #A4A7A9;
    --shadow-sm: var(--shadow-1);
    --shadow-md: var(--shadow-2);
    --r-xs: var(--rounded-xs);
    --r-sm: var(--rounded-sm);
    --r-md: var(--rounded-md);
    --r-lg: var(--rounded-lg);
    --r-xl: var(--rounded-xl);
    --r-pill: var(--rounded-pill);
    --btn-h: var(--control-h);
    --btn-h-lg: var(--control-h-lg);
    --surface-2: var(--surface-subtle);
}

/* Тёмная тема: задумана как «ночная лаборатория». Включатель в продукте не предусмотрен (решение владельца 10.10) —
   токены лежат на будущее: 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);
}

/* Телефон: поля и кнопки ≥ 44, шрифт полей 16 (iOS не увеличивает страницу), карточки плотнее */
@media (max-width: 767.98px) {
    :root {
        --page-pad: 16px;
        --control-h: 44px;
        --control-h-lg: 52px;
        --space-card: 16px;
        --nx-otp-w: 44px;
        --nx-otp-h: 52px;
        --nx-bottom-ui: 84px;
    }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
    :root { --page-pad: 24px; }
}
/* Этап 117: на ПК шапка оболочек не липкая — липкие колонки прилипают к самому верху окна */
@media (min-width: 768px) {
    :root { --nx-stick: 0px; }
}

/* ===== База ===== */
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100dvh;
    color: var(--ink);
    background-color: var(--canvas);
    /* холст «Тумана»: сетка точек 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;
    font-family: var(--font-text);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.5;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
: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);
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
p { text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
svg { display: block; }
::selection { color: var(--on-primary); background: var(--primary); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
[x-cloak] { display: none !important; }
[hidden] { display: none !important; }

/* Цифры метрик — табличные, строгие */
.tabular-nums, .stat-card__value, .balance-hero__amount, .balance-metric__value, .plan-card__price {
    font-variant-numeric: tabular-nums lining-nums;
}

@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) {
        --enter-scale: 1; --enter-y: 0px; --pop-y: 0px; --lift-y: 0px; --shake-x: 0px; --vt-x: 0px;
        --stagger-step: 0ms; --ease-bounce: var(--ease); --ease-pop: var(--ease);
        --sheet-from: 0 0; --sheet-closed-opacity: 0; --drawer-from: 0 0; --sheet: var(--normal);
    }
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================================================================
   Отклик на переход между страницами (13.10.2026) — public/js/nav-feedback.js. Лежит здесь, потому что tokens.css подключён во всех
   каркасах (app, assistant, panel, guest, landing, страницы ошибок).
   ================================================================ */
/* «Нажатие» ссылки: scale .97 сразу на pointerdown (свойство scale — не мешает transform у самих пунктов). */
.nx-nav-press { scale: .97; transition: scale 90ms var(--ease, ease-out); }
/* Полоса 3 px: идёт до ~80 % и ждёт новую страницу. Появляется через 150 мс после нажатия — быстрый переход её не видит. */
.nx-navbar {
    position: fixed; z-index: 2147483000; top: 0; left: 0; right: 0; height: 3px; pointer-events: none;
    background: var(--primary, #E3F450); box-shadow: 0 0 8px rgb(227 244 80 / .7), 0 1px 0 rgb(22 22 22 / .12);
    transform-origin: 0 50%; transform: scaleX(.04);
}
.nx-navbar.is-run { animation: nx-navbar-run 5s cubic-bezier(.12, .6, .2, 1) forwards; }
@keyframes nx-navbar-run { 0% { transform: scaleX(.04); } 12% { transform: scaleX(.38); } 100% { transform: scaleX(.8); } }
/* Спиннер в шапке (через 400 мс). Вне шапки (guest, страницы ошибок) — в правом верхнем углу. */
.nx-nav-spin {
    flex: none; display: inline-block; width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box;
    border: 2px solid var(--line, rgb(22 22 22 / .14)); border-top-color: var(--ink, #161616); animation: nx-nav-spin .7s linear infinite;
}
.nx-nav-spin--fixed { position: fixed; z-index: 2147483000; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; }
@keyframes nx-nav-spin { to { transform: rotate(360deg); } }
/* Запасной вариант без межстраничных переходов браузера: содержимое гаснет 120 мс при уходе и проявляется 160 мс при загрузке. */
html.nx-nav-leaving :is(.page, .mz-auth, .st) { opacity: 0; transition: opacity 120ms var(--ease, ease-out); }
html.nx-nav-enter :is(.page, .mz-auth, .st) { animation: nx-nav-enter 160ms var(--ease, ease-out) both; }
@keyframes nx-nav-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    /* Без анимаций — только полоса (на нужном месте сразу, без хода). */
    :root:not([data-motion="full"]) .nx-nav-press { scale: 1; transition: none; }
    :root:not([data-motion="full"]) .nx-navbar.is-run { animation: none; transform: scaleX(.8); }
    :root:not([data-motion="full"]) .nx-nav-spin { animation: none; border-top-color: var(--line, rgb(22 22 22 / .14)); border-right-color: var(--ink, #161616); }
    html.nx-nav-leaving:not([data-motion="full"]) :is(.page, .mz-auth, .st) { opacity: 1; transition: none; }
}