* { margin: 0; padding: 0; box-sizing: border-box; }
        html { height: 100%; }
        body {
            font-family: var(--font-app, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
            /* По умолчанию — белая тема (все наши экраны: лендинг, auth, app, profile, admin светлые).
               Старый темный фон (#0A0C10) больше не нужен — он создавал FOUC-вспышку перед тем,
               как JS успевал повесить body.landing-mode / body.app-mode и т.д. */
            background-color: #FFFFFF;
            color: #0A0A0A;
            line-height: 1.5;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            font-variant-numeric: tabular-nums;
        }
        main { flex: 1 0 auto; }
        footer { flex-shrink: 0; }
        /* === Иконки (замена Font Awesome — инлайн SVG-спрайт ниже в body) === */
        .ui-icon {
            display: inline-block;
            width: 1em;
            height: 1em;
            vertical-align: -0.125em;
            fill: currentColor;
        }
        .ui-icon-spin {
            animation: ui-icon-spin 1s linear infinite;
        }
        @keyframes ui-icon-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
        /* Принудительно наследуем шрифт у инпутов/селектов/кнопок — браузеры по умолчанию
           ставят системный шрифт для form-элементов, а нам нужен один Inter. */
        button, input, select, textarea {
            font-family: inherit;
        }
        /* Цифры табличными во всех формах и таблицах */
        input[type="number"], input[type="text"], td, th {
            font-variant-numeric: tabular-nums;
        }
        :root {
            /* === ЕДИНЫЕ токены оформления (бело-синяя тема) === */
            --new-bg: #FFFFFF;
            --new-bg-soft: #F5F7FA;
            --new-bg-blue-soft: #EFF4FF;
            --new-border: #E5E7EB;
            --new-border-soft: #F0F2F5;
            --new-text: #0A0A0A;
            --new-text-muted: #4B5563;
            --new-text-light: #9CA3AF;
            --new-accent: #3B82F6;
            --new-accent-hover: #2563EB;
            --new-accent-soft: #DBEAFE;
            --new-accent-darker: #1E40AF;
            --new-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.04);
            --new-shadow: 0 4px 16px -2px rgba(59,130,246,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
            --new-shadow-lg: 0 20px 60px -10px rgba(59,130,246,0.15), 0 8px 16px -4px rgba(0,0,0,0.06);
            /* Шрифтовые токены: единая семья для всех текстов и моноширинная для идентификаторов */
            --font-app: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, 'Liberation Mono', monospace;

            /* === LEGACY алиасы — для совместимости со старым CSS (.btn, .card, .tab и др.)
                 Старые места ссылаются на var(--gold), var(--gray), var(--card-bg), var(--border) —
                 теперь они автоматически указывают на нашу светлую палитру. */
            --card-bg: var(--new-bg);
            --border: var(--new-border);
            --gold: var(--new-accent);
            --gray: var(--new-text-muted);
        }

        /* === Компонент: новый логотип МУАЯ в синем (используется на новых экранах) === */
        .logo-new {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }
        .logo-new-svg {
            height: 52px;
            width: auto;
            display: block;
        }
        .logo-new-svg path,
        .logo-new-svg polygon {
            fill: url(#logoGradient);
        }
        .logo-new-beta {
            font-size: 0.7rem;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 6px;
            background: var(--new-accent-soft);
            color: var(--new-accent-hover);
        }

        /* ========================================================== */
        /* === НОВЫЙ СТИЛЬ ДЛЯ ЭКРАНОВ АВТОРИЗАЦИИ                  === */
        /* === Применяется к секциям с классом .auth-screen-new      === */
        /* === Не затрагивает старые экраны (лендинг, app, profile)  === */
        /* ========================================================== */

        /* Обёртка для всего auth-экрана: белый фон + декоративный градиент */
        section.auth-screen-new {
            background: var(--new-bg);
            color: var(--new-text);
            position: relative;
            min-height: calc(100vh - 60px);
            padding: 60px 0 !important;
            overflow: hidden;
        }
        section.auth-screen-new::before {
            content: '';
            position: absolute;
            top: -300px;
            right: -200px;
            width: 800px;
            height: 800px;
            background: radial-gradient(circle, rgba(59,130,246,0.12), rgba(59,130,246,0) 70%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
        }
        section.auth-screen-new::after {
            content: '';
            position: absolute;
            bottom: -200px;
            left: -250px;
            width: 700px;
            height: 700px;
            background: radial-gradient(circle, rgba(139,92,246,0.08), rgba(139,92,246,0) 70%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
        }
        section.auth-screen-new .container {
            position: relative;
            z-index: 1;
        }

        /* Когда виден любой auth-экран — на body вешается класс
           .auth-mode и старая тёмная шапка/футер скрываются,
           чтобы новый белый стиль не конфликтовал визуально.
           Класс выставляется в JS внутри showScreen().
           .new-mode — то же самое для экранов профиля и админки. */
        body.auth-mode > header,
        body.auth-mode > footer,
        body.new-mode > header,
        body.new-mode > footer {
            display: none !important;
        }
        body.auth-mode,
        body.new-mode {
            background: var(--new-bg);
        }

        /* Шапка над auth-карточкой (логотип + ссылка назад) */
        .auth-new-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 460px;
            margin: 0 auto 24px;
            gap: 12px;
        }
        .auth-new-header a.back-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border-radius: 10px;
            border: 1px solid var(--new-border);
            background: var(--new-bg);
            color: var(--new-text-muted);
            text-decoration: none;
            font-size: 0.88rem;
            font-weight: 500;
            transition: all 0.15s;
            white-space: nowrap;
        }
        .auth-new-header a.back-link:hover {
            border-color: var(--new-accent);
            color: var(--new-accent);
            background: var(--new-accent-soft);
        }

        /* Карточка формы — переопределяет старый .card внутри auth-экрана */
        section.auth-screen-new .card {
            background: var(--new-bg) !important;
            border: 1px solid var(--new-border) !important;
            border-radius: 24px !important;
            padding: 36px 32px !important;
            box-shadow: var(--new-shadow-lg) !important;
            position: relative;
            overflow: hidden;
        }
        section.auth-screen-new .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--new-accent), var(--new-accent-darker), var(--new-accent));
            background-size: 200% 100%;
            animation: shimmer-auth 3s ease-in-out infinite;
        }
        @keyframes shimmer-auth {
            0%, 100% { background-position: 0% 0%; }
            50% { background-position: 100% 0%; }
        }
        /* Универсальное вращение для SVG-спиннеров загрузки */
        @keyframes spinner-spin {
            to { transform: rotate(360deg); }
        }
        .spinner-rotate {
            animation: spinner-spin 0.9s linear infinite;
            transform-origin: center;
        }

        /* Заголовки внутри auth-карточек */
        section.auth-screen-new .card h2 {
            font-size: 1.65rem;
            font-weight: 700;
            margin-bottom: 6px !important;
            letter-spacing: -0.01em;
            color: var(--new-text);
        }
        section.auth-screen-new .card > p {
            color: var(--new-text-muted) !important;
            font-size: 0.92rem;
        }

        /* Поля формы */
        section.auth-screen-new .form-group {
            margin-bottom: 16px;
        }
        section.auth-screen-new .form-group label {
            display: block;
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--new-text);
            margin-bottom: 7px;
        }
        section.auth-screen-new input[type="email"],
        section.auth-screen-new input[type="password"],
        section.auth-screen-new input[type="text"] {
            width: 100%;
            padding: 12px 14px !important;
            border: 1.5px solid var(--new-border) !important;
            border-radius: 10px !important;
            font-family: inherit;
            font-size: 0.95rem !important;
            color: var(--new-text) !important;
            background: var(--new-bg) !important;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        section.auth-screen-new input::placeholder {
            color: var(--new-text-light) !important;
        }
        section.auth-screen-new input:focus {
            outline: none;
            border-color: var(--new-accent) !important;
            box-shadow: 0 0 0 4px rgba(59,130,246,0.12) !important;
        }
        section.auth-screen-new .password-wrap {
            position: relative;
        }
        section.auth-screen-new .password-toggle {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            border: none;
            cursor: pointer;
            color: var(--new-text-muted);
            font-size: 1rem;
            padding: 4px 8px;
        }

        /* Чекбоксы — синий аккуратный */
        section.auth-screen-new input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: var(--new-accent);
            cursor: pointer;
        }
        section.auth-screen-new label[style*="cursor:pointer"],
        section.auth-screen-new label[style*="cursor: pointer"] {
            color: var(--new-text);
            font-size: 0.9rem;
        }

        /* Главная синяя кнопка (переопределяет старую золотую .btn) */
        section.auth-screen-new .btn {
            background: linear-gradient(135deg, var(--new-accent) 0%, var(--new-accent-darker) 100%) !important;
            color: #fff !important;
            border: none !important;
            border-radius: 10px !important;
            padding: 13px 18px !important;
            font-family: inherit;
            font-size: 0.95rem !important;
            font-weight: 600 !important;
            cursor: pointer;
            transition: filter 0.15s, box-shadow 0.2s, transform 0.1s !important;
            box-shadow: 0 4px 14px -2px rgba(59,130,246,0.4) !important;
        }
        section.auth-screen-new .btn:hover:not(:disabled) {
            filter: brightness(1.08);
            box-shadow: 0 6px 20px -2px rgba(59,130,246,0.55) !important;
        }
        section.auth-screen-new .btn:active {
            transform: translateY(1px);
        }
        section.auth-screen-new .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Ссылки в auth-формах — синие */
        section.auth-screen-new .card a {
            color: var(--new-accent) !important;
            text-decoration: none;
            font-weight: 500;
        }
        section.auth-screen-new .card a:hover {
            text-decoration: underline;
        }
        /* Серые ссылки (типа "Забыли пароль?") */
        section.auth-screen-new .card a[style*="var(--gray)"] {
            color: var(--new-text-muted) !important;
        }
        section.auth-screen-new .card a[style*="var(--gray)"]:hover {
            color: var(--new-accent) !important;
        }
        section.auth-screen-new .card p {
            color: var(--new-text-muted);
            font-size: 0.9rem;
        }

        /* Сообщения об ошибках */
        section.auth-screen-new .error {
            background: #FEF2F2 !important;
            border: 1px solid #FECACA !important;
            color: #B91C1C !important;
            padding: 10px 14px;
            border-radius: 10px;
            font-size: 0.88rem;
            margin-bottom: 14px;
        }
        /* Сообщение успеха (на forgot-экране) */
        section.auth-screen-new div[style*="rgba(80, 200, 120, 0.15)"] {
            background: #F0FDF4 !important;
            border: 1px solid #BBF7D0 !important;
            color: #166534 !important;
        }

        /* Details на onboarding (где взять Client ID) */
        section.auth-screen-new details {
            background: var(--new-bg-blue-soft) !important;
            border: 1px solid var(--new-accent-soft) !important;
            border-radius: 12px !important;
        }
        section.auth-screen-new details summary {
            color: var(--new-accent-hover) !important;
            font-weight: 600;
        }
        section.auth-screen-new details summary::after {
            color: var(--new-accent) !important;
        }
        section.auth-screen-new details ol {
            color: var(--new-text-muted) !important;
        }
        section.auth-screen-new details a {
            color: var(--new-accent) !important;
        }

        /* ========================================================== */
        /* === НОВЫЙ СТИЛЬ ДЛЯ ПРОФИЛЯ И АДМИНКИ                    === */
        /* === Применяется к секциям .profile-screen-new и          === */
        /* === .admin-screen-new (а также модалке .admin-modal-new) === */
        /* ========================================================== */
        section.profile-screen-new,
        section.admin-screen-new {
            background: var(--new-bg-soft);
            color: var(--new-text);
            min-height: 100vh;
            position: relative;
            overflow: hidden;
        }
        section.profile-screen-new::before,
        section.admin-screen-new::before {
            content: "";
            position: absolute;
            top: -30%;
            right: -10%;
            width: 480px;
            height: 480px;
            background: radial-gradient(circle, rgba(59,130,246,0.10) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
        }
        section.profile-screen-new .container,
        section.admin-screen-new .container {
            position: relative;
            z-index: 1;
        }

        /* Шапка экрана (логотип + кнопка назад/назад к планировщику) */
        .new-screen-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 28px;
            flex-wrap: wrap;
        }
        .new-screen-header .logo-new-svg {
            height: 44px;
        }
        .new-back-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 10px 18px;
            border-radius: 12px;
            border: 1px solid var(--new-border);
            background: var(--new-bg);
            color: var(--new-text);
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            font-family: inherit;
        }
        .new-back-btn:hover {
            border-color: var(--new-accent);
            color: var(--new-accent);
            background: var(--new-accent-soft);
        }

        /* Заголовок страницы */
        section.profile-screen-new h1,
        section.admin-screen-new h1 {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--new-text);
            margin-bottom: 6px;
        }
        section.profile-screen-new > .container > p,
        section.admin-screen-new > .container > p {
            color: var(--new-text-muted);
            margin-bottom: 24px;
        }

        /* === Карточки === */
        section.profile-screen-new .card,
        section.admin-screen-new .card {
            background: var(--new-bg) !important;
            border: 1px solid var(--new-border) !important;
            border-radius: 20px !important;
            box-shadow: var(--new-shadow-sm);
            padding: 28px !important;
            margin-bottom: 20px !important;
        }
        /* Таблица внутри карточки скроллится горизонтально, если контент шире */
        section.profile-screen-new .card .table-container,
        section.admin-screen-new .card .table-container {
            overflow-x: auto;
            max-width: 100%;
        }
        section.profile-screen-new .card h2,
        section.profile-screen-new .card h3,
        section.admin-screen-new .card h2,
        section.admin-screen-new .card h3,
        section.admin-screen-new h2 {
            color: var(--new-text) !important;
        }
        section.profile-screen-new .card h2,
        section.admin-screen-new .card h2 {
            font-size: 1.25rem;
            font-weight: 700;
        }
        section.profile-screen-new .card h3 {
            font-size: 1rem;
            font-weight: 600;
        }
        section.profile-screen-new .card p,
        section.admin-screen-new .card p {
            color: var(--new-text-muted);
        }

        /* === Кнопки внутри новых секций === */
        section.profile-screen-new .btn,
        section.admin-screen-new .btn,
        .admin-modal-new .btn {
            background: var(--new-accent) !important;
            color: #fff !important;
            border-radius: 12px !important;
            padding: 10px 20px !important;
            font-weight: 600 !important;
            font-size: 0.9rem !important;
            box-shadow: 0 2px 8px rgba(59,130,246,0.25);
            transition: all 0.2s;
            margin: 0;
            font-family: inherit;
        }
        section.profile-screen-new .btn:hover:not(:disabled),
        section.admin-screen-new .btn:hover:not(:disabled),
        .admin-modal-new .btn:hover:not(:disabled) {
            background: var(--new-accent-hover) !important;
            box-shadow: 0 4px 12px rgba(59,130,246,0.35);
            transform: translateY(-1px);
        }
        section.profile-screen-new .btn:disabled,
        section.admin-screen-new .btn:disabled,
        .admin-modal-new .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        section.profile-screen-new .btn-outline,
        section.admin-screen-new .btn-outline,
        .admin-modal-new .btn-outline {
            background: var(--new-bg) !important;
            color: var(--new-accent) !important;
            border: 1px solid var(--new-border) !important;
            box-shadow: none !important;
        }
        section.profile-screen-new .btn-outline:hover:not(:disabled),
        section.admin-screen-new .btn-outline:hover:not(:disabled),
        .admin-modal-new .btn-outline:hover:not(:disabled) {
            border-color: var(--new-accent) !important;
            background: var(--new-accent-soft) !important;
            color: var(--new-accent-hover) !important;
            transform: translateY(-1px);
        }

        /* === Поля формы === */
        section.profile-screen-new .form-group,
        section.admin-screen-new .form-group {
            margin-bottom: 16px;
        }
        section.profile-screen-new .form-group label,
        section.admin-screen-new .form-group label {
            display: block;
            color: var(--new-text);
            font-size: 0.9rem;
            font-weight: 500;
            margin-bottom: 6px;
        }
        section.profile-screen-new input[type="text"],
        section.profile-screen-new input[type="email"],
        section.profile-screen-new input[type="password"],
        section.admin-screen-new input[type="text"],
        section.admin-screen-new input[type="email"],
        .admin-modal-new input[type="text"] {
            width: 100%;
            padding: 11px 14px;
            border: 1px solid var(--new-border);
            border-radius: 12px;
            background: var(--new-bg);
            color: var(--new-text);
            font-size: 0.95rem;
            font-family: inherit;
            transition: all 0.2s;
        }
        section.profile-screen-new input::placeholder,
        section.admin-screen-new input::placeholder {
            color: var(--new-text-light);
        }
        section.profile-screen-new input:focus,
        section.admin-screen-new input:focus {
            outline: none;
            border-color: var(--new-accent);
            box-shadow: 0 0 0 3px var(--new-accent-soft);
        }
        section.profile-screen-new .password-wrap,
        section.admin-screen-new .password-wrap {
            position: relative;
        }
        section.profile-screen-new .password-toggle,
        section.admin-screen-new .password-toggle {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 1.1rem;
            color: var(--new-text-muted);
            padding: 4px;
        }
        section.admin-screen-new select {
            padding: 10px 14px !important;
            border: 1px solid var(--new-border) !important;
            border-radius: 12px !important;
            background: var(--new-bg) !important;
            color: var(--new-text) !important;
            font-size: 0.9rem;
            font-family: inherit;
            cursor: pointer;
        }
        section.admin-screen-new select:focus {
            outline: none;
            border-color: var(--new-accent);
            box-shadow: 0 0 0 3px var(--new-accent-soft);
        }
        section.admin-screen-new select option {
            background-color: var(--new-bg) !important;
            color: var(--new-text) !important;
        }
        section.admin-screen-new select option:hover,
        section.admin-screen-new select option:checked {
            background: var(--new-accent-soft) !important;
            background-color: var(--new-accent-soft) !important;
            color: var(--new-accent-hover) !important;
            box-shadow: 0 0 10px 100px var(--new-accent-soft) inset !important;
        }

        /* === Ошибки и успехи === */
        section.profile-screen-new .error,
        section.admin-screen-new .error,
        .admin-modal-new .error {
            background: #FEF2F2 !important;
            color: #B91C1C !important;
            border: 1px solid #FECACA !important;
            padding: 12px 14px !important;
            border-radius: 12px !important;
            font-size: 0.9rem;
            margin-bottom: 12px;
        }
        .new-success-banner {
            background: #ECFDF5;
            color: #065F46;
            border: 1px solid #A7F3D0;
            padding: 12px 14px;
            border-radius: 12px;
            font-size: 0.9rem;
            margin-bottom: 12px;
        }

        /* === Подсказка про API-ключи в details === */
        section.profile-screen-new details {
            background: var(--new-accent-soft) !important;
            border: 1px solid #BFDBFE !important;
            border-radius: 12px !important;
            padding: 12px 14px;
            margin-bottom: 16px;
            cursor: pointer;
        }
        section.profile-screen-new details summary {
            color: var(--new-accent-hover) !important;
            font-weight: 600;
            list-style: none;
        }
        section.profile-screen-new details summary::-webkit-details-marker { display: none; }
        section.profile-screen-new details ol {
            color: var(--new-text-muted);
            margin: 12px 0 0 20px;
            font-size: 0.9rem;
            line-height: 1.7;
        }
        section.profile-screen-new details ol strong {
            color: var(--new-text);
        }
        section.profile-screen-new details a {
            color: var(--new-accent);
            font-weight: 500;
        }

        /* === Таблицы внутри новых экранов === */
        section.profile-screen-new table,
        section.admin-screen-new table,
        .admin-modal-new table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 0.88rem;
            background: var(--new-bg);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--new-border);
        }
        section.profile-screen-new th,
        section.admin-screen-new th,
        .admin-modal-new th {
            background-color: var(--new-bg-soft) !important;
            color: var(--new-text) !important;
            font-weight: 600;
            font-size: 0.82rem;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            padding: 12px 14px !important;
            border: none !important;
            border-bottom: 1px solid var(--new-border) !important;
            text-align: center;
        }
        section.profile-screen-new td,
        section.admin-screen-new td,
        .admin-modal-new td {
            padding: 12px 14px !important;
            border: none !important;
            border-bottom: 1px solid var(--new-border-soft) !important;
            color: var(--new-text) !important;
            text-align: center;
            vertical-align: middle;
            background: var(--new-bg);
        }
        section.profile-screen-new tr:last-child td,
        section.admin-screen-new tr:last-child td,
        .admin-modal-new tr:last-child td {
            border-bottom: none !important;
        }
        section.profile-screen-new tbody tr:hover td,
        section.admin-screen-new tbody tr:hover td {
            background: var(--new-bg-soft);
        }
        section.profile-screen-new .table-container,
        section.admin-screen-new .table-container,
        .admin-modal-new .table-container {
            overflow-x: auto;
        }

        /* === Admin: статистические карточки === */
        .admin-stat-card {
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            border-radius: 16px;
            padding: 18px 16px;
            text-align: center;
            box-shadow: var(--new-shadow-sm);
            transition: all 0.2s;
        }
        .admin-stat-card:hover {
            border-color: var(--new-accent);
            box-shadow: var(--new-shadow);
            transform: translateY(-2px);
        }
        .admin-stat-card .label {
            color: var(--new-text-muted);
            font-size: 0.78rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 8px;
        }
        .admin-stat-card .value {
            font-size: 1.7rem;
            font-weight: 700;
            color: var(--new-text);
        }
        .admin-stat-card.accent .value { color: var(--new-accent); }
        .admin-stat-card.success .value { color: #059669; }
        .admin-stat-card.danger .value { color: #DC2626; }

        /* === Admin: бейджи статусов === */
        .admin-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 999px;
            font-size: 0.72rem;
            font-weight: 600;
            margin-right: 4px;
            letter-spacing: 0.02em;
        }
        .admin-badge.admin { background: var(--new-accent-soft); color: var(--new-accent-darker); }
        .admin-badge.banned { background: #FEE2E2; color: #B91C1C; }
        .admin-badge.unverified { background: #FEF3C7; color: #B45309; }
        .admin-badge.ok { color: #059669; font-weight: 600; }

        /* Кнопка-ссылка для активного магазина */
        .store-row-active td {
            background: var(--new-accent-soft) !important;
        }
        .store-active-radio {
            accent-color: var(--new-accent) !important;
            width: 16px !important;
            height: 16px !important;
        }

        /* === Опасная зона (удаление аккаунта) === */
        .danger-zone {
            border: 1px solid #FECACA !important;
            background: #FFFBFB !important;
        }
        .danger-zone h2 {
            color: #DC2626 !important;
        }
        .danger-zone .danger-confirm {
            margin-top: 20px;
            padding: 16px;
            background: #FEF2F2;
            border: 1px solid #FECACA;
            border-radius: 12px;
        }
        .danger-zone .danger-confirm p {
            color: #B91C1C !important;
        }
        section.profile-screen-new .btn-danger {
            background: #DC2626 !important;
            color: #fff !important;
            box-shadow: 0 2px 8px rgba(220,38,38,0.25) !important;
        }
        section.profile-screen-new .btn-danger:hover:not(:disabled) {
            background: #B91C1C !important;
            box-shadow: 0 4px 12px rgba(220,38,38,0.35) !important;
        }
        section.profile-screen-new .btn-outline-danger {
            color: #DC2626 !important;
            border-color: #FECACA !important;
            background: var(--new-bg) !important;
        }
        section.profile-screen-new .btn-outline-danger:hover:not(:disabled) {
            border-color: #DC2626 !important;
            background: #FEF2F2 !important;
            color: #B91C1C !important;
        }

        /* === Модалка деталей пользователя в админке === */
        .admin-modal-new {
            background: rgba(15, 23, 42, 0.55) !important;
            backdrop-filter: blur(4px);
        }
        .admin-modal-new .modal-card {
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            border-radius: 20px;
            max-width: 760px;
            width: 100%;
            padding: 28px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: var(--new-shadow-lg);
        }
        .admin-modal-new .modal-card h2 {
            color: var(--new-text);
            font-size: 1.3rem;
        }
        .admin-modal-new .modal-card h3 {
            color: var(--new-text);
            font-size: 1.05rem;
            font-weight: 600;
        }
        .admin-modal-new .modal-card p {
            color: var(--new-text-muted);
        }
        .admin-modal-new .modal-card p strong {
            color: var(--new-text);
        }
        .admin-modal-new .modal-section-divider {
            margin-top: 24px;
            padding-top: 18px;
            border-top: 1px solid var(--new-border);
        }

        /* Мобильная адаптация */
        @media (max-width: 640px) {
            section.profile-screen-new .card,
            section.admin-screen-new .card {
                padding: 20px !important;
                border-radius: 16px !important;
            }
            section.profile-screen-new h1,
            section.admin-screen-new h1 {
                font-size: 1.4rem;
            }
            .new-screen-header {
                margin-bottom: 20px;
            }
            .admin-stat-card .value { font-size: 1.4rem; }
        }

        /* ========================================================== */
        /* === НОВЫЙ СТИЛЬ ЛЕНДИНГА                                 === */
        /* === Применяется к секции #screen-landing.landing-new и   === */
        /* === перекрашивает header/footer через body.landing-mode  === */
        /* ========================================================== */

        /* Когда виден лендинг — body.landing-mode перекрашивает
           глобальные header/footer в белый стиль (см. ниже) */
        body.landing-mode {
            background: var(--new-bg);
        }
        body.landing-mode > header {
            background: rgba(255,255,255,0.85) !important;
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--new-border) !important;
        }
        /* Бренд в шапке: на лендинге показываем синий SVG-логотип вместо буквы М на золотом квадрате */
        body.landing-mode #brandLogo > div:first-child,
        body.landing-mode #brandLogo > span:not(.logo-new-beta),
        body.landing-mode #brandLogo #brandBetaBadge {
            display: none !important;
        }
        body.landing-mode #brandLogo {
            color: var(--new-text) !important;
        }
        body.landing-mode #brandLogo .logo-new-svg {
            display: block !important;
            height: 40px;
        }
        body.landing-mode #brandLogo .brand-beta-landing {
            display: inline-block !important;
        }
        /* Гостевая навигация на лендинге */
        body.landing-mode #guestNav a#navLoginLink {
            color: var(--new-text) !important;
            font-weight: 500;
        }
        body.landing-mode #guestNav a#navLoginLink:hover {
            color: var(--new-accent) !important;
        }
        body.landing-mode #guestNav a#navRegisterLink {
            color: #fff !important;
            background: var(--new-accent) !important;
            border: none !important;
            border-radius: 12px !important;
            padding: 8px 20px !important;
            font-weight: 600 !important;
            box-shadow: 0 2px 8px rgba(59,130,246,0.25);
            transition: all 0.2s;
        }
        body.landing-mode #guestNav a#navRegisterLink:hover {
            background: var(--new-accent-hover) !important;
            box-shadow: 0 4px 12px rgba(59,130,246,0.35);
            transform: translateY(-1px);
        }
        /* Подкрасить футер */
        body.landing-mode > footer {
            background: var(--new-bg-soft) !important;
            border-top: 1px solid var(--new-border);
            color: var(--new-text-muted);
            text-align: left !important;
            padding: 48px 0 32px !important;
        }
        body.landing-mode > footer a {
            color: var(--new-text-muted) !important;
            text-decoration: none !important;
        }
        body.landing-mode > footer a:hover {
            color: var(--new-accent) !important;
        }

        /* === Лендинг: общая раскладка === */
        section.landing-new {
            background: var(--new-bg);
            color: var(--new-text);
        }
        section.landing-new h1,
        section.landing-new h2,
        section.landing-new h3 {
            color: var(--new-text);
        }
        section.landing-new p {
            color: var(--new-text-muted);
        }

        /* === HERO === */
        .landing-hero-new {
            position: relative;
            padding: 64px 0 72px;
            background: linear-gradient(180deg, var(--new-bg) 0%, var(--new-bg-blue-soft) 100%);
            overflow: hidden;
            min-height: calc(100vh - 76px); /* высота шапки ~76px — Hero занимает весь экран */
            display: flex;
            align-items: center;
        }
        .landing-hero-new::before {
            content: "";
            position: absolute;
            top: -20%;
            right: -10%;
            width: 720px; height: 720px;
            background: radial-gradient(circle, rgba(59,130,246,0.10) 0%, transparent 65%);
            pointer-events: none;
        }
        .landing-hero-new::after {
            content: "";
            position: absolute;
            bottom: -30%;
            left: -10%;
            width: 480px; height: 480px;
            background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 65%);
            pointer-events: none;
        }
        .landing-hero-new .container { position: relative; z-index: 1; width: 100%; }
        .landing-hero-grid {
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 56px;
            align-items: center;
        }
        .landing-beta-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--new-accent-soft);
            color: var(--new-accent-hover);
            padding: 7px 16px;
            border-radius: 999px;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 20px;
            border: 1px solid #BFDBFE;
        }
        section.landing-new h1 {
            font-size: 3rem;
            line-height: 1.1;
            letter-spacing: -0.02em;
            margin-bottom: 22px;
            font-weight: 800;
        }
        /* Акцентная подсветка ключевой фразы в hero-заголовке («за 2 минуты»).
           Градиентный текст с мягкой подложкой → притягивает взгляд без перебора. */
        .hero-accent {
            position: relative;
            display: inline-block;
            white-space: nowrap;  /* «за 2 минуты» не разрывается между строк */
            padding: 0 4px;
            isolation: isolate;   /* создаём свой stacking context, чтобы ::before не уехал ниже фона */
        }
        /* Сам текст — поверх подложки, с градиентным заполнением (синий → тёмно-синий) */
        .hero-accent > span {
            position: relative;
            z-index: 1;
            background: linear-gradient(135deg, var(--new-accent) 0%, var(--new-accent-darker) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;  /* fallback */
        }
        /* Декоративная мягкая подложка под акцентной фразой — лёгкая голубая «подсветка» */
        .hero-accent::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0.05em;
            height: 0.42em;
            background: linear-gradient(90deg, rgba(59,130,246,0.22) 0%, rgba(99,102,241,0.18) 100%);
            border-radius: 6px;
            z-index: 0;
            transform: skewX(-4deg);
        }
        .landing-hero-new .hero-lead {
            font-size: 1.18rem;
            line-height: 1.6;
            color: var(--new-text-muted);
            margin-bottom: 32px;
        }
        .landing-hero-new .hero-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 18px;
        }
        .landing-hero-new .hero-meta {
            color: var(--new-text-light);
            font-size: 0.9rem;
        }
        /* Плейсхолдер «Интерфейс сервиса» */
        .hero-screenshot-placeholder {
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            border-radius: 24px;
            overflow: hidden;
            box-shadow: var(--new-shadow-lg);
            aspect-ratio: 4 / 3;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 32px;
            position: relative;
        }
        .hero-screenshot-placeholder::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; height: 38px;
            background: var(--new-bg-soft);
            border-bottom: 1px solid var(--new-border);
        }
        .hero-screenshot-placeholder::after {
            content: "";
            position: absolute;
            top: 13px; left: 18px;
            width: 12px; height: 12px;
            border-radius: 50%;
            background: #FCA5A5;
            box-shadow: 20px 0 0 #FCD34D, 40px 0 0 #86EFAC;
        }
        .hero-screenshot-placeholder .placeholder-content {
            text-align: center;
            margin-top: 18px;
        }
        .hero-screenshot-placeholder .placeholder-icon {
            width: 72px; height: 72px;
            margin: 0 auto 20px;
            background: var(--new-accent-soft);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.2rem;
        }
        .hero-screenshot-placeholder h3 {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--new-text);
            margin-bottom: 6px;
        }
        .hero-screenshot-placeholder p {
            color: var(--new-text-light);
            font-size: 0.9rem;
        }

        /* === Скриншот интерфейса в hero === */
        .hero-screenshot {
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            border-radius: 24px;
            overflow: hidden;
            box-shadow: var(--new-shadow-lg);
            position: relative;
            padding-top: 38px; /* место под «шапку окна» */
        }
        .hero-screenshot::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; height: 38px;
            background: var(--new-bg-soft);
            border-bottom: 1px solid var(--new-border);
        }
        .hero-screenshot::after {
            content: "";
            position: absolute;
            top: 13px; left: 18px;
            width: 12px; height: 12px;
            border-radius: 50%;
            background: #FCA5A5;
            box-shadow: 20px 0 0 #FCD34D, 40px 0 0 #86EFAC;
        }
        .hero-screenshot img {
            display: block;
            width: 100%;
            height: auto;
        }

        /* === Общие кнопки на лендинге === */
        section.landing-new .btn,
        body.landing-mode .landing-cta-btn {
            background: var(--new-accent) !important;
            color: #fff !important;
            border-radius: 12px !important;
            padding: 12px 26px !important;
            font-weight: 600 !important;
            font-size: 0.98rem !important;
            border: none !important;
            box-shadow: 0 4px 14px rgba(59,130,246,0.3);
            transition: all 0.2s;
            margin: 0;
            font-family: inherit;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        section.landing-new .btn:hover:not(:disabled),
        body.landing-mode .landing-cta-btn:hover {
            background: var(--new-accent-hover) !important;
            box-shadow: 0 6px 20px rgba(59,130,246,0.4);
            transform: translateY(-2px);
        }
        section.landing-new .btn.btn-outline,
        section.landing-new .btn-outline {
            background: var(--new-bg) !important;
            color: var(--new-accent) !important;
            border: 1px solid var(--new-border) !important;
            box-shadow: none !important;
        }
        section.landing-new .btn.btn-outline:hover:not(:disabled),
        section.landing-new .btn-outline:hover:not(:disabled) {
            border-color: var(--new-accent) !important;
            background: var(--new-accent-soft) !important;
            color: var(--new-accent-hover) !important;
            transform: translateY(-2px);
            box-shadow: none !important;
        }
        .btn-hero-large {
            padding: 15px 32px !important;
            font-size: 1.05rem !important;
        }

        /* === Универсальные секции лендинга === */
        .landing-section {
            padding: 80px 0;
        }
        .landing-section.alt {
            background: var(--new-bg-soft);
        }
        .landing-section h2 {
            font-size: 2.2rem;
            text-align: center;
            letter-spacing: -0.01em;
            margin-bottom: 14px;
            font-weight: 800;
        }
        .landing-section .section-lead {
            text-align: center;
            color: var(--new-text-muted);
            max-width: 640px;
            margin: 0 auto 48px;
            font-size: 1.05rem;
            line-height: 1.6;
        }
        .landing-section h2 + p.section-lead {
            margin-top: 0;
        }

        /* === Карточки лендинга === */
        .landing-grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
        .landing-grid-2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }
        .landing-grid-4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }
        section.landing-new .l-card {
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            border-radius: 20px;
            padding: 32px 28px;
            box-shadow: var(--new-shadow-sm);
            transition: all 0.25s;
        }
        section.landing-new .l-card:hover {
            transform: translateY(-4px);
            border-color: var(--new-accent);
            box-shadow: var(--new-shadow);
        }
        section.landing-new .l-card.center {
            text-align: center;
        }
        section.landing-new .l-card .l-icon {
            width: 56px; height: 56px;
            border-radius: 16px;
            background: var(--new-accent-soft);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            margin-bottom: 20px;
        }
        section.landing-new .l-card.center .l-icon {
            margin-left: auto; margin-right: auto;
        }
        section.landing-new .l-card h3 {
            font-size: 1.15rem;
            font-weight: 700;
            margin-bottom: 10px;
            line-height: 1.35;
        }
        section.landing-new .l-card p {
            color: var(--new-text-muted);
            font-size: 0.95rem;
            line-height: 1.65;
            margin: 0;
        }

        /* === «Почему это выгодно» — акцентные карточки с большими цифрами === */
        .benefit-card {
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            border-radius: 22px;
            padding: 36px 30px;
            box-shadow: var(--new-shadow-sm);
            transition: all 0.25s;
        }
        .benefit-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--new-shadow);
        }
        .benefit-card .benefit-big {
            font-size: 2.6rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--new-accent) 0%, var(--new-accent-darker) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: var(--new-accent);
            letter-spacing: -0.02em;
            line-height: 1;
            margin-bottom: 6px;
        }
        .benefit-card h3 {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--new-text);
            margin-bottom: 14px;
        }
        .benefit-card p {
            color: var(--new-text-muted);
            font-size: 0.95rem;
            line-height: 1.65;
            margin: 0;
        }

        /* === Шаги «Как это работает» === */
        .landing-step {
            text-align: center;
            position: relative;
            padding: 0 8px;
        }
        .landing-step .step-num {
            width: 56px; height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--new-accent) 0%, var(--new-accent-darker) 100%);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.5rem;
            margin: 0 auto 20px;
            box-shadow: 0 8px 20px rgba(59,130,246,0.25);
        }
        .landing-step h3 {
            font-size: 1.08rem;
            font-weight: 700;
            margin-bottom: 8px;
        }
        .landing-step p {
            color: var(--new-text-muted);
            font-size: 0.93rem;
            line-height: 1.55;
        }

        /* === Видео-постер === */
        .landing-video-wrap {
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            border-radius: 22px;
            overflow: hidden;
            aspect-ratio: 16 / 9;
            cursor: pointer;
            position: relative;
            box-shadow: var(--new-shadow-lg);
        }
        .landing-video-poster {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 16px;
            background: linear-gradient(135deg, var(--new-bg-soft) 0%, var(--new-accent-soft) 100%);
        }
        .landing-video-play-btn {
            width: 84px; height: 84px;
            border-radius: 50%;
            background: var(--new-accent);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 12px 32px rgba(59,130,246,0.4);
            transition: transform 0.2s;
        }
        .landing-video-wrap:hover .landing-video-play-btn {
            transform: scale(1.06);
        }
        .landing-video-play-btn span {
            font-size: 32px;
            color: #fff;
            margin-left: 6px;
        }
        .landing-video-title {
            color: var(--new-text);
            font-weight: 700;
            font-size: 1.1rem;
        }
        .landing-video-sub {
            color: var(--new-text-muted);
            font-size: 0.9rem;
        }

        /* === Бета-статус === */
        .landing-beta-card {
            background: linear-gradient(135deg, var(--new-bg) 0%, var(--new-accent-soft) 100%);
            border: 1px solid #BFDBFE;
            border-radius: 24px;
            padding: 44px 40px;
            text-align: center;
            box-shadow: var(--new-shadow);
        }
        .landing-beta-card p {
            color: var(--new-text);
            line-height: 1.7;
            margin-bottom: 14px;
            font-size: 1.02rem;
        }
        .landing-beta-card p:last-child { margin-bottom: 0; }
        .landing-beta-card p strong {
            color: var(--new-accent-darker);
        }

        /* === FAQ === */
        .landing-faq {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .landing-faq details {
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            border-radius: 16px;
            padding: 20px 24px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .landing-faq details:hover {
            border-color: var(--new-accent);
            box-shadow: var(--new-shadow-sm);
        }
        .landing-faq details[open] {
            border-color: var(--new-accent);
            background: linear-gradient(180deg, var(--new-bg) 0%, var(--new-accent-soft) 100%);
        }
        .landing-faq summary {
            font-weight: 600;
            font-size: 1.05rem;
            color: var(--new-text);
            list-style: none;
            position: relative;
            padding-right: 36px;
        }
        .landing-faq summary::-webkit-details-marker { display: none; }
        .landing-faq summary::after {
            content: "+";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 28px; height: 28px;
            border-radius: 50%;
            background: var(--new-accent-soft);
            color: var(--new-accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-weight: 600;
            transition: transform 0.2s;
        }
        .landing-faq details[open] summary::after {
            content: "−";
            background: var(--new-accent);
            color: #fff;
        }
        .landing-faq p {
            margin-top: 14px;
            color: var(--new-text-muted);
            line-height: 1.65;
            font-size: 0.95rem;
        }
        .landing-faq p a {
            color: var(--new-accent);
            font-weight: 500;
        }
        .landing-faq strong { color: var(--new-text); }

        /* === Повторный CTA === */
        .landing-final-cta {
            padding: 96px 0;
            background: linear-gradient(135deg, var(--new-accent) 0%, var(--new-accent-darker) 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .landing-final-cta::before {
            content: "";
            position: absolute;
            top: -50%; left: 50%;
            transform: translateX(-50%);
            width: 800px; height: 800px;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
            pointer-events: none;
        }
        .landing-final-cta .container { position: relative; z-index: 1; }
        .landing-final-cta h2 {
            color: #fff !important;
            font-size: 2.2rem;
            margin-bottom: 14px;
            font-weight: 800;
        }
        .landing-final-cta .cta-lead {
            color: rgba(255,255,255,0.85) !important;
            font-size: 1.08rem;
            margin-bottom: 32px;
        }
        .landing-final-cta .btn-cta-white {
            background: #fff !important;
            color: var(--new-accent-darker) !important;
            padding: 16px 36px !important;
            font-size: 1.08rem !important;
            border-radius: 12px !important;
            font-weight: 700 !important;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            transition: all 0.2s;
            border: none;
            cursor: pointer;
            font-family: inherit;
        }
        .landing-final-cta .btn-cta-white:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(0,0,0,0.2);
        }

        /* === Подвал-сетка нового футера === */
        .footer-new-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 48px;
            margin-bottom: 32px;
        }
        .footer-new-brand .logo-new-svg {
            height: 40px;
            margin-bottom: 14px;
        }
        .footer-new-brand p {
            color: var(--new-text-muted);
            font-size: 0.9rem;
            line-height: 1.6;
            max-width: 320px;
        }
        .footer-new-col h4 {
            color: var(--new-text);
            font-size: 0.85rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 16px;
        }
        .footer-new-col ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .footer-new-col a {
            color: var(--new-text-muted) !important;
            font-size: 0.92rem;
            text-decoration: none !important;
            transition: color 0.15s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .footer-new-col a:hover {
            color: var(--new-accent) !important;
        }
        .footer-new-col a i {
            color: var(--new-accent);
            width: 16px;
        }
        .footer-contact-static {
            color: var(--new-text-muted);
            font-size: 0.92rem;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .footer-contact-static i {
            color: var(--new-accent);
            width: 16px;
        }
        .footer-new-bottom {
            border-top: 1px solid var(--new-border);
            padding-top: 24px;
            color: var(--new-text-light);
            font-size: 0.85rem;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
        }
        .footer-new-bottom a {
            color: var(--new-text-light) !important;
            text-decoration: none !important;
        }
        .footer-new-bottom a:hover {
            color: var(--new-accent) !important;
            text-decoration: underline !important;
        }

        /* === Мобильная адаптация лендинга === */
        @media (max-width: 960px) {
            .landing-hero-grid { grid-template-columns: 1fr; gap: 40px; }
            .landing-grid-3,
            .landing-grid-4 { grid-template-columns: repeat(2, 1fr); }
            .landing-grid-2 { grid-template-columns: 1fr; }
            .footer-new-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 640px) {
            .landing-hero-new {
                padding: 32px 0 40px;
                /* Десктоп использует min-height: calc(100vh - 76px) + align-items: center,
                   чтобы hero занимал весь viewport. На мобиле это создаёт огромное пустое
                   пространство сверху — отключаем. */
                min-height: 0;
                display: block;
            }
            section.landing-new h1 { font-size: 1.8rem; line-height: 1.15; }
            .landing-hero-new .hero-lead { font-size: 0.95rem; margin-bottom: 22px; }
            .landing-beta-badge { font-size: 0.78rem; padding: 5px 12px; margin-bottom: 14px; }
            .landing-hero-new .hero-actions { margin-bottom: 12px; }
            .landing-hero-grid { gap: 24px; }
            .landing-section { padding: 48px 0; }
            .landing-section h2 { font-size: 1.6rem; }
            .landing-grid-3,
            .landing-grid-4 { grid-template-columns: 1fr; }
            .landing-final-cta { padding: 56px 0; }
            .landing-final-cta h2 { font-size: 1.6rem; }
            .footer-new-grid { grid-template-columns: 1fr; gap: 28px; }
            .benefit-card .benefit-big { font-size: 2.1rem; }
            section.landing-new .l-card { padding: 24px 22px; }
            /* Декоративные радиальные градиенты hero — уменьшаем, чтобы не «давили» */
            .landing-hero-new::before { width: 360px; height: 360px; top: -10%; }
            .landing-hero-new::after { width: 240px; height: 240px; }
            /* Кнопки hero — занимают всю ширину на мобиле для удобства тапа */
            .landing-hero-new .hero-actions .btn,
            .landing-hero-new .hero-actions .btn-outline { width: 100%; }
        }

        /* ========================================================== */
        /* === ЭТАП 5: ШАПКА ПРИЛОЖЕНИЯ И САМО ПРИЛОЖЕНИЕ          === */
        /* === Применяется через body.app-mode на screen-app       === */
        /* ========================================================== */

        /* Когда виден screen-app — body.app-mode перекрашивает
           шапку и футер в белый, как на лендинге. */
        body.app-mode {
            background: var(--new-bg-soft);
            color: var(--new-text);
            /* Перебиваем legacy-токен --gray на муто-серый из новой темы,
               чтобы все inline color:var(--gray) выглядели единообразно. */
            --gray: #4B5563;
            --gold: var(--new-accent);
            --border: var(--new-border);
        }
        /* То же для auth/profile/landing-режимов */
        body.new-mode,
        body.landing-mode,
        body.auth-mode {
            --gray: #4B5563;
            --gold: var(--new-accent);
            --border: var(--new-border);
        }
        body.app-mode > header {
            background: rgba(255,255,255,0.92) !important;
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--new-border) !important;
        }
        /* Бренд */
        body.app-mode #brandLogo > div:first-child,
        body.app-mode #brandLogo > span:not(.logo-new-beta),
        body.app-mode #brandLogo #brandBetaBadge {
            display: none !important;
        }
        body.app-mode #brandLogo {
            color: var(--new-text) !important;
        }
        body.app-mode #brandLogo .logo-new-svg {
            display: block !important;
            height: 36px;
        }
        body.app-mode #brandLogo .brand-beta-landing {
            display: inline-block !important;
        }

        /* Индикатор активного магазина */
        body.app-mode #headerActiveStore {
            background: var(--new-accent-soft) !important;
            border: 1px solid #BFDBFE !important;
            border-radius: 12px !important;
        }
        body.app-mode #headerActiveStore > span:nth-child(1) {
            background: #10B981 !important;
            box-shadow: 0 0 6px rgba(16,185,129,0.5) !important;
        }
        body.app-mode #headerActiveStore > span:nth-child(2) {
            color: var(--new-accent-darker) !important;
        }
        body.app-mode #headerActiveStoreName {
            color: var(--new-text) !important;
        }

        /* Навигация в шапке app */
        body.app-mode .header-nav-link {
            color: var(--new-text-muted) !important;
            font-weight: 500;
        }
        body.app-mode .header-nav-link:hover {
            background: var(--new-bg-soft) !important;
            color: var(--new-text) !important;
        }
        body.app-mode .header-nav-link.active {
            background: var(--new-bg-soft) !important;
            color: var(--new-text) !important;
            font-weight: 600;
        }

        /* Кнопка пользователя и dropdown */
        body.app-mode #userMenuBtn {
            background: var(--new-bg) !important;
            color: var(--new-text) !important;
            border: 1px solid var(--new-border) !important;
            border-radius: 12px !important;
            box-shadow: none !important;
        }
        body.app-mode #userMenuBtn:hover {
            border-color: var(--new-accent) !important;
            background: var(--new-accent-soft) !important;
        }
        body.app-mode #userMenuBtn #userEmail {
            color: var(--new-text) !important;
        }
        body.app-mode #userDropdown {
            background: var(--new-bg) !important;
            border: 1px solid var(--new-border) !important;
            box-shadow: var(--new-shadow-lg);
        }
        body.app-mode #userDropdown a {
            color: var(--new-text) !important;
            border-top-color: var(--new-border) !important;
            transition: background 0.15s;
        }
        body.app-mode #userDropdown a:hover {
            background: var(--new-bg-soft) !important;
        }
        body.app-mode #userDropdown #openAdminLink {
            color: var(--new-accent) !important;
        }
        body.app-mode #userDropdown #logoutLink {
            color: #DC2626 !important;
        }
        body.app-mode #userDropdown #logoutLink:hover {
            background: #FEF2F2 !important;
        }

        /* Гостевая навигация в шапке app (не должна быть видна но на всякий) */
        body.app-mode #guestNav a#navLoginLink {
            color: var(--new-text) !important;
        }
        body.app-mode #guestNav a#navRegisterLink {
            color: #fff !important;
            background: var(--new-accent) !important;
            border: none !important;
            border-radius: 12px !important;
            padding: 8px 20px !important;
            font-weight: 600 !important;
        }

        /* === Сам экран app: фон, заголовки === */
        body.app-mode section#screen-app {
            background: var(--new-bg-soft);
        }
        body.app-mode #screen-app h2,
        body.app-mode #screen-app h3,
        body.app-mode #screen-app h4 {
            color: var(--new-text) !important;
        }
        body.app-mode #screen-app > .container > h2 {
            font-weight: 700;
        }
        body.app-mode #screen-app p {
            color: var(--new-text-muted);
        }
        body.app-mode #screen-app p strong {
            color: var(--new-text);
        }
        body.app-mode #screen-app a {
            color: var(--new-accent);
        }
        body.app-mode #screen-app li {
            color: var(--new-text-muted);
        }

        /* === Карточки внутри app === */
        body.app-mode #screen-app .card {
            background: var(--new-bg) !important;
            border: 1px solid var(--new-border) !important;
            border-radius: 18px !important;
            box-shadow: var(--new-shadow-sm);
            color: var(--new-text);
        }

        /* === Кнопки внутри app === */
        body.app-mode #screen-app .btn {
            background: var(--new-accent) !important;
            color: #fff !important;
            border-radius: 12px !important;
            font-weight: 600 !important;
            box-shadow: 0 2px 8px rgba(59,130,246,0.25);
            transition: all 0.2s;
            margin: 0;
            padding: 10px 20px;
            font-size: 0.9rem;
            font-family: inherit;
        }
        body.app-mode #screen-app .btn:hover:not(:disabled) {
            background: var(--new-accent-hover) !important;
            box-shadow: 0 4px 12px rgba(59,130,246,0.35);
            transform: translateY(-1px);
        }
        body.app-mode #screen-app .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }
        body.app-mode #screen-app .btn.btn-outline,
        body.app-mode #screen-app .btn-outline {
            background: var(--new-bg) !important;
            color: var(--new-accent) !important;
            border: 1px solid var(--new-border) !important;
            box-shadow: none !important;
        }
        body.app-mode #screen-app .btn.btn-outline:hover:not(:disabled),
        body.app-mode #screen-app .btn-outline:hover:not(:disabled) {
            border-color: var(--new-accent) !important;
            background: var(--new-accent-soft) !important;
            color: var(--new-accent-hover) !important;
        }

        /* === Поля ввода в app === */
        body.app-mode #screen-app input[type="text"],
        body.app-mode #screen-app input[type="number"],
        body.app-mode #screen-app input[type="email"],
        body.app-mode #screen-app input[type="password"],
        body.app-mode #screen-app select,
        body.app-mode #screen-app textarea {
            background: var(--new-bg) !important;
            color: var(--new-text) !important;
            border: 1px solid var(--new-border) !important;
            border-radius: 10px !important;
            padding: 9px 12px;
            font-family: inherit;
        }
        body.app-mode #screen-app input::placeholder {
            color: var(--new-text-light) !important;
        }
        body.app-mode #screen-app input:focus,
        body.app-mode #screen-app select:focus,
        body.app-mode #screen-app textarea:focus {
            outline: none;
            border-color: var(--new-accent) !important;
            box-shadow: 0 0 0 3px var(--new-accent-soft);
        }
        body.app-mode #screen-app select option {
            background: var(--new-bg) !important;
            color: var(--new-text) !important;
        }
        body.app-mode #screen-app label {
            color: var(--new-text);
        }

        /* === Убираем стрелочки у числовых полей (везде в приложении) === */
        body.app-mode #screen-app input[type="number"]::-webkit-outer-spin-button,
        body.app-mode #screen-app input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        body.app-mode #screen-app input[type="number"] {
            -moz-appearance: textfield;
            appearance: textfield;
        }

        /* === Таблицы в приложении === */
        body.app-mode #screen-app table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background: var(--new-bg);
            border-radius: 12px;
            /* overflow: hidden убрано — оно ломает position: sticky у thead.
               Скругление углов делаем через scroll-tall обёртку. */
            border: 1px solid var(--new-border);
            font-size: 0.88rem;
            font-family: var(--font-app);
        }
        body.app-mode #screen-app th {
            background: var(--new-bg-soft) !important;
            color: var(--new-text) !important;
            font-weight: 600;
            font-size: 0.78rem;
            font-family: var(--font-app);
            text-transform: uppercase;
            letter-spacing: 0.03em;
            padding: 11px 12px !important;
            border: none !important;
            border-bottom: 1px solid var(--new-border) !important;
            box-shadow: inset -1px 0 0 var(--new-border);
            text-align: center;
            white-space: nowrap;
        }
        body.app-mode #screen-app td {
            padding: 10px 12px !important;
            border: none !important;
            border-bottom: 1px solid var(--new-border) !important;
            box-shadow: inset -1px 0 0 var(--new-border);
            color: var(--new-text) !important;
            background: var(--new-bg) !important;
            vertical-align: middle;
            font-variant-numeric: tabular-nums;
        }
        body.app-mode #screen-app td:last-child,
        body.app-mode #screen-app th:last-child {
            box-shadow: none !important;
        }
        body.app-mode #screen-app tr:last-child td {
            border-bottom: none !important;
        }
        body.app-mode #screen-app tbody tr:hover td {
            background: var(--new-bg-soft) !important;
        }
        /* Подсветка ячеек «остатки в днях» — перебивает общий td background */
        body.app-mode #screen-app td.days-high {
            background: #FEE2E2 !important;
            color: #991B1B !important;
        }
        body.app-mode #screen-app td.days-good {
            background: #DBEAFE !important;
            color: #1E3A8A !important;
        }
        body.app-mode #screen-app td.days-normal {
            background: #D1FAE5 !important;
            color: #065F46 !important;
        }
        body.app-mode #screen-app td.days-low {
            background: #FED7AA !important;
            color: #9A3412 !important;
        }
        body.app-mode #screen-app td.days-zero {
            background: var(--new-bg-soft) !important;
            color: var(--new-text-light) !important;
        }
        body.app-mode #screen-app tbody tr:hover td.days-high { background: #FECACA !important; }
        body.app-mode #screen-app tbody tr:hover td.days-good { background: #BFDBFE !important; }
        body.app-mode #screen-app tbody tr:hover td.days-normal { background: #A7F3D0 !important; }
        body.app-mode #screen-app tbody tr:hover td.days-low { background: #FDBA74 !important; }
        body.app-mode #screen-app tbody tr:hover td.days-zero { background: #E5E7EB !important; }
        /* Подсветка квадратиков в легенде — тот же цветовой набор */
        body.app-mode #screen-app .legend-color.days-high { background: #FEE2E2 !important; }
        body.app-mode #screen-app .legend-color.days-good { background: #DBEAFE !important; }
        body.app-mode #screen-app .legend-color.days-normal { background: #D1FAE5 !important; }
        body.app-mode #screen-app .legend-color.days-low { background: #FED7AA !important; }
        body.app-mode #screen-app .legend-color.days-zero { background: #E5E7EB !important; }
        /* Кликабельные чипы-фильтры по статусам (для Аналитики остатков и Диагностики). */
        body.app-mode #screen-app .status-chip {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 12px;
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            border-radius: 999px;
            font-family: var(--font-app);
            font-size: 0.85rem;
            color: var(--new-text-muted);
            cursor: pointer;
            user-select: none;
            /* Анимируем только цвета и тень — НЕ border-width/padding,
               иначе при клике чип «дёргается» из-за изменения размера */
            transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
        }
        body.app-mode #screen-app .status-chip:hover {
            border-color: var(--new-accent);
            color: var(--new-text);
        }
        /* Активный чип — тот же размер, что и неактивный (padding 7px 12px,
           border 1px). «Жирная синяя обводка» — это box-shadow поверх рамки,
           она не двигает контент. Так чип не «трясётся» при клике. */
        body.app-mode #screen-app .status-chip.active {
            background: var(--new-bg);
            border-color: var(--new-accent);
            color: var(--new-text);
            font-weight: 500;
            box-shadow: 0 0 0 1px var(--new-accent);  /* +1px виртуальной рамки */
        }
        body.app-mode #screen-app .status-chip-swatch {
            width: 14px;
            height: 14px;
            border-radius: 4px;
            display: inline-block;
            flex-shrink: 0;
            opacity: 0.55;  /* у неактивных — полупрозрачные */
            transition: opacity 0.15s;
        }
        body.app-mode #screen-app .status-chip.active .status-chip-swatch {
            opacity: 1;  /* у активных — насыщенные */
        }
        body.app-mode #screen-app .status-chip-swatch.days-high { background: #FEE2E2; }
        body.app-mode #screen-app .status-chip-swatch.days-good { background: #DBEAFE; }
        body.app-mode #screen-app .status-chip-swatch.days-normal { background: #D1FAE5; }
        body.app-mode #screen-app .status-chip-swatch.days-low { background: #FED7AA; }
        body.app-mode #screen-app .status-chip-swatch.days-zero { background: #E5E7EB; }
        /* ── Шаг 4: «Итог расчёта» — sticky-плашка сверху диагностики ── */
        body.app-mode #screen-app .diag-summary-sticky {
            position: sticky;
            top: 0;
            z-index: 5;
            margin-bottom: 16px;
            padding: 14px 16px;
            background: var(--new-bg-soft);
            border: 1px solid var(--new-border);
            border-radius: 12px;
        }
        /* Кликабельные чипы статусов в диагностике — без цветовых различий,
           всё чёрное. Активный — голубой outline + лёгкий бэк. */
        body.app-mode #screen-app .diag-chip {
            display: inline-flex;
            align-items: center;
            padding: 4px 12px;
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            border-radius: 999px;
            color: var(--new-text);
            font-family: var(--font-app);
            font-size: 0.85rem;
            cursor: pointer;
            user-select: none;
            transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
        }
        body.app-mode #screen-app .diag-chip:hover {
            border-color: var(--new-accent);
        }
        body.app-mode #screen-app .diag-chip.active {
            background: var(--new-bg);
            border-color: var(--new-accent);
            color: var(--new-text);
            font-weight: 500;
            box-shadow: 0 0 0 1px var(--new-accent);
        }
        /* Жёлтая ячейка «избыток в кластере» в План-таблице */
        body.app-mode #screen-app td.cluster-excess,
        body.app-mode #screen-app td[style*="background-color:#FFF4D6"],
        body.app-mode #screen-app td[style*="background-color: #FFF4D6"] {
            background: #FEF3C7 !important;
            color: #92400E !important;
        }

        /* === Кастомный скроллбар в стиле сервиса === */
        .app-scroll-area {
            position: relative;
            border-radius: 12px;
        }
        .app-scroll-area::-webkit-scrollbar,
        body.app-mode #screen-app .table-container::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        .app-scroll-area::-webkit-scrollbar-track,
        body.app-mode #screen-app .table-container::-webkit-scrollbar-track {
            background: var(--new-bg-soft);
            border-radius: 8px;
        }
        .app-scroll-area::-webkit-scrollbar-thumb,
        body.app-mode #screen-app .table-container::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--new-accent) 0%, var(--new-accent-darker) 100%);
            border-radius: 8px;
            border: 2px solid var(--new-bg-soft);
        }
        .app-scroll-area::-webkit-scrollbar-thumb:hover,
        body.app-mode #screen-app .table-container::-webkit-scrollbar-thumb:hover {
            background: var(--new-accent-darker);
        }
        .app-scroll-area::-webkit-scrollbar-corner,
        body.app-mode #screen-app .table-container::-webkit-scrollbar-corner {
            background: var(--new-bg-soft);
        }
        /* Firefox */
        .app-scroll-area,
        body.app-mode #screen-app .table-container {
            scrollbar-width: thin;
            scrollbar-color: var(--new-accent) var(--new-bg-soft);
        }

        /* === Ограничение высоты для длинных таблиц === */
        /* Аналитика остатков — макс 520px по вертикали, скролл если больше */
        body.app-mode .scroll-tall {
            max-height: 520px;
            overflow-y: auto;
            overflow-x: auto;
            border: 1px solid var(--new-border);
            border-radius: 12px;
            background: var(--new-bg);
            scrollbar-width: thin;
            scrollbar-color: var(--new-accent) var(--new-bg-soft);
        }
        /* Если внутри контейнера применён split — отменяем внешнее оформление,
           т.к. split-head и split-body имеют свои рамки и скролл. */
        body.app-mode .scroll-tall:has(.split-head),
        body.app-mode .scroll-tall:has(.split-body) {
            max-height: none;
            overflow: visible;
            border: none;
            border-radius: 0;
            background: transparent;
        }
        /* В «Управлении товарами» таблица имеет фиксированные колонки (table-layout: fixed,
           width: 100%) — горизонтальный скролл там не нужен, а появляется случайно
           при масштабе ниже 90% из-за паддингов. Отключаем явно. */
        body.app-mode #manageTable.scroll-tall {
            overflow-x: hidden;
        }
        body.app-mode .scroll-tall::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        body.app-mode .scroll-tall::-webkit-scrollbar-track {
            background: var(--new-bg-soft);
            border-radius: 8px;
        }
        body.app-mode .scroll-tall::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--new-accent) 0%, var(--new-accent-darker) 100%);
            border-radius: 8px;
            border: 2px solid var(--new-bg-soft);
        }
        body.app-mode .scroll-tall::-webkit-scrollbar-thumb:hover {
            background: var(--new-accent-darker);
        }
        body.app-mode .scroll-tall::-webkit-scrollbar-corner {
            background: var(--new-bg-soft);
        }
        body.app-mode .scroll-tall table {
            border: none !important;
            border-radius: 0 !important;
        }
        /* === SPLIT TABLE (8.2) === */
        /* Контейнеры split-head + split-body уже имеют свои рамки и radii. */
        body.app-mode .split-head table,
        body.app-mode .split-body table {
            border: none !important;
            border-radius: 0 !important;
        }
        /* В split-head шапка прибита всегда — нет смысла в sticky на th,
           ИСКЛЮЧЕНИЕ: первые N колонок при опции stickyColumns получают
           sticky-позицию через inline-стиль из splitTableHead. Поэтому НЕ ставим
           position:static !important на все th — оно бы перебило inline.
           Если th внутри split-head без inline position — он и так static по умолчанию. */
        /* Шапка резервирует место под вертикальный скроллбар, чтобы её внутренняя
           ширина совпадала с телом (у тела скроллбар реальный). Резервирование
           делается в JS (syncHeaderWidths) — там замеряется ФАКТИЧЕСКАЯ ширина
           скроллбара тела и задаётся шапке точно столько же (системный скроллбар
           бывает 15/17px и т.д., хардкодить нельзя). Скроллбар шапки на всякий
           случай делаем прозрачным, если он где-то проявится. */
        body.app-mode .split-head::-webkit-scrollbar-thumb,
        body.app-mode .split-head::-webkit-scrollbar-track {
            background: transparent;
        }
        /* В split-table обе таблицы должны иметь идентичный box-sizing и border-collapse,
           чтобы ширины колонок (которые мы ставим из <col>) совпадали 1-в-1. */
        body.app-mode .split-head th,
        body.app-mode .split-head td,
        body.app-mode .split-body th,
        body.app-mode .split-body td {
            box-sizing: border-box;
        }
        /* Разделители кластеров рисуются через box-shadow (см. .cluster-separator)
           — не влияют на ширину колонок, поэтому шапка и тело не расходятся. */
        /* Sticky первая колонка в split-body — работает при горизонтальном скролле.
           !important нужен потому что общее правило td тоже имеет background !important. */
        body.app-mode .split-body tbody td:first-child {
            position: sticky !important;
            left: 0 !important;
            z-index: 2 !important;
            background: var(--new-bg) !important;
            box-shadow: 1px 0 0 var(--new-border) !important;
        }
        body.app-mode .split-head thead tr:first-child th:first-child {
            position: sticky !important;
            left: 0 !important;
            z-index: 5 !important;
            background: var(--new-bg-soft) !important;
            box-shadow: 1px 0 0 var(--new-border) !important;
        }
        body.app-mode .split-body tbody tr:hover td:first-child {
            background: var(--new-bg-soft) !important;
        }
        /* Старые sticky-правила thead остаются, но действуют только если split НЕ применён
           (для совместимости с таблицами, которые мы не сплитим) */
        /* Прибиваем заголовки таблицы при скролле.
           Для двухрядной шапки (Аналитика остатков) обе строки sticky:
           первая на top:0, вторая под ней (высота th ≈ 42px). */
        body.app-mode .scroll-tall thead tr:first-child th {
            position: sticky;
            top: 0;
            z-index: 3;
            box-shadow: 0 1px 0 var(--new-border);
        }
        body.app-mode .scroll-tall thead tr:nth-child(2) th {
            position: sticky;
            top: 42px;
            z-index: 3;
            box-shadow: 0 1px 0 var(--new-border);
        }
        /* Прибиваем первую колонку при горизонтальном скролле.
           rowspan=2 в Аналитике автоматически окажется в tr:first-child,
           поэтому селектор «первая колонка» работает для обеих шапок. */
        body.app-mode .scroll-tall tbody td:first-child,
        body.app-mode .scroll-tall thead tr:first-child th:first-child {
            position: sticky;
            left: 0;
            z-index: 2;
            background: var(--new-bg);
        }
        body.app-mode .scroll-tall thead tr:first-child th:first-child {
            background: var(--new-bg-soft);
            z-index: 5; /* выше остальных th, чтобы в углу не было прозрачности */
        }
        /* Тень справа от прибитой колонки — визуальный сигнал что есть скролл */
        body.app-mode .scroll-tall tbody td:first-child {
            box-shadow: 1px 0 0 var(--new-border);
        }
        body.app-mode .scroll-tall thead tr:first-child th:first-child {
            box-shadow: 1px 0 0 var(--new-border), 0 1px 0 var(--new-border);
        }
        /* Hover-цвет на sticky-ячейке тоже обновляем */
        body.app-mode .scroll-tall tbody tr:hover td:first-child {
            background: var(--new-bg-soft) !important;
        }

        /* === Универсальная светлая модалка (для «Сообщить о проблеме» и других) === */
        .modal-new-input {
            width: 100%;
            padding: 10px 12px;
            border-radius: 10px;
            background: var(--new-bg);
            color: var(--new-text);
            border: 1px solid var(--new-border);
            font-family: var(--font-app);
            font-size: 0.92rem;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .modal-new-input:focus {
            outline: none;
            border-color: var(--new-accent);
            box-shadow: 0 0 0 3px var(--new-accent-soft);
        }
        .modal-new-textarea {
            resize: vertical;
            min-height: 100px;
        }
        /* Отступы между группами полей в светлой модалке */
        #bugReportModal .form-group,
        .modal-new-card .form-group {
            margin-bottom: 18px;
        }
        #bugReportModal .form-group label,
        .modal-new-card .form-group label {
            display: block;
            margin-bottom: 6px;
            color: var(--new-text);
            font-size: 0.9rem;
            font-weight: 500;
        }
        /* === Кастомный dropdown — ЕДИНЫЙ стиль для всех мест применения.
             font-size, padding, border-radius, цвета — везде одинаковые.
             Compact-вариант отменён. */
        .custom-select {
            position: relative;
            width: 100%;
        }
        .custom-select-trigger {
            width: 100%;
            padding: 10px 12px;
            border-radius: 10px;
            background: var(--new-bg);
            color: var(--new-text);
            border: 1px solid var(--new-border);
            font-family: var(--font-app);
            font-size: 0.92rem;
            line-height: 1.4;
            text-align: left;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .custom-select-trigger:hover {
            border-color: #CBD5E1;
        }
        .custom-select.open .custom-select-trigger,
        .custom-select-trigger:focus {
            outline: none !important;
            border-color: var(--new-accent) !important;
            box-shadow: 0 0 0 3px var(--new-accent-soft) !important;
        }
        .custom-select.open .custom-select-trigger svg {
            transform: rotate(180deg);
        }
        .custom-select-trigger svg {
            transition: transform 0.15s;
        }
        .custom-select-menu {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            /* НЕ привязываем правый край — меню расширится по самой длинной опции
               (но не уже trigger'а: min-width: 100%) */
            min-width: 100%;
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            border-radius: 10px;
            box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.15);
            list-style: none;
            margin: 0;
            padding: 4px;
            z-index: 10;
            max-height: 280px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .custom-select-menu[hidden] {
            display: none;
        }
        .custom-select-option {
            padding: 9px 12px;
            border-radius: 7px;
            cursor: pointer;
            color: var(--new-text) !important;
            background: transparent !important;
            font-family: var(--font-app) !important;
            font-size: 0.92rem !important;
            line-height: 1.4 !important;
            white-space: nowrap;  /* длинные опции не переносятся */
            transition: background 0.1s, color 0.1s;
        }
        .custom-select-option:hover {
            background: var(--new-bg-soft) !important;
        }
        .custom-select-option[aria-selected="true"] {
            background: var(--new-bg-soft) !important;
            color: var(--new-text) !important;
            font-weight: 500;
        }
        /* Также форсим стиль trigger'a — чтоб шрифт и цвет не наследовались
           от родительских контейнеров с приоритетными правилами (например app-mode td) */
        .custom-select-trigger {
            color: var(--new-text) !important;
            background: var(--new-bg) !important;
            font-family: var(--font-app) !important;
            font-size: 0.92rem !important;
        }
        .custom-select-label {
            color: var(--new-text) !important;
            font-family: var(--font-app) !important;
        }

        /* === Тосты (notify) === */
        #notifyContainer {
            position: fixed;
            right: 24px;
            bottom: 24px;
            z-index: 2500;
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 380px;
            pointer-events: none;
        }
        .notify-toast {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 12px 14px;
            background: #fff;
            border: 1px solid #E5E7EB;
            border-radius: 12px;
            box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.18);
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.18s, transform 0.18s;
            pointer-events: auto;
            font-size: 0.92rem;
            line-height: 1.4;
            color: #0F172A;
        }
        .notify-toast.notify-show {
            opacity: 1;
            transform: translateY(0);
        }
        .notify-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .notify-success {
            border-left: 4px solid #10B981;
        }
        .notify-success .notify-icon { color: #10B981; }
        .notify-error {
            border-left: 4px solid #DC2626;
        }
        .notify-error .notify-icon { color: #DC2626; }
        .notify-info {
            border-left: 4px solid #3B82F6;
        }
        .notify-info .notify-icon { color: #3B82F6; }
        .notify-text {
            flex: 1;
            word-break: break-word;
        }
        .notify-close {
            background: transparent;
            border: none;
            color: #94A3B8;
            cursor: pointer;
            font-size: 1.25rem;
            line-height: 1;
            padding: 0 4px;
            font-family: inherit;
            transition: color 0.15s;
        }
        .notify-close:hover {
            color: #0F172A;
        }
        @media (max-width: 480px) {
            #notifyContainer {
                left: 12px;
                right: 12px;
                bottom: 12px;
                max-width: none;
            }
        }

        /* === Модалка подтверждения (confirmDialog) === */
        .confirm-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.45);
            backdrop-filter: blur(4px);
            z-index: 2400;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            transition: opacity 0.18s;
        }
        .confirm-overlay.confirm-show {
            opacity: 1;
        }
        .confirm-card {
            background: #fff;
            border: 1px solid #E5E7EB;
            border-radius: 16px;
            padding: 22px 24px 20px;
            max-width: 420px;
            width: 100%;
            box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.25);
            transform: scale(0.96);
            transition: transform 0.18s;
        }
        .confirm-overlay.confirm-show .confirm-card {
            transform: scale(1);
        }
        .confirm-title {
            margin: 0 0 10px;
            font-size: 1.1rem;
            color: #0F172A;
        }
        .confirm-message {
            margin: 0 0 18px;
            color: #4B5563;
            font-size: 0.95rem;
            line-height: 1.5;
        }
        .confirm-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }
        /* Опасное действие (удаление и т.п.) — красная подтверждающая кнопка */
        .confirm-card .btn.confirm-danger {
            background: #DC2626 !important;
            box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25) !important;
        }
        .confirm-card .btn.confirm-danger:hover:not(:disabled) {
            background: #B91C1C !important;
            box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35) !important;
        }

        /* === Блок .error в светлой теме (раньше был мрачно-серый/красный, не вписывался) === */
        body.app-mode #screen-app .error,
        section.auth-screen-new .error,
        body.new-mode .error {
            display: none;
            background: #FEF2F2 !important;
            border: 1px solid #FECACA !important;
            color: #991B1B !important;
            padding: 10px 14px !important;
            border-radius: 10px !important;
            margin: 8px 0 12px !important;
            font-size: 0.9rem;
            line-height: 1.45;
        }

        /* Кнопки внутри светлой модалки переопределяем независимо от body класса:
           золотой градиент .btn заменяем на синий, .btn-outline — на белую outline. */
        #bugReportModal .btn,
        .modal-new-card .btn {
            background: #3B82F6 !important;
            color: #fff !important;
            border-radius: 10px !important;
            font-weight: 600 !important;
            padding: 10px 22px !important;
            font-size: 0.92rem !important;
            border: none !important;
            box-shadow: 0 2px 8px rgba(59,130,246,0.25);
            transition: all 0.2s;
            cursor: pointer;
            font-family: inherit;
        }
        #bugReportModal .btn:hover:not(:disabled),
        .modal-new-card .btn:hover:not(:disabled) {
            background: #2563EB !important;
            box-shadow: 0 4px 12px rgba(59,130,246,0.35);
            transform: translateY(-1px);
        }
        #bugReportModal .btn.btn-outline,
        #bugReportModal .btn-outline,
        .modal-new-card .btn-outline {
            background: #fff !important;
            color: #4B5563 !important;
            border: 1px solid #E5E7EB !important;
            box-shadow: none !important;
        }
        #bugReportModal .btn.btn-outline:hover:not(:disabled),
        #bugReportModal .btn-outline:hover:not(:disabled),
        .modal-new-card .btn-outline:hover:not(:disabled) {
            border-color: #3B82F6 !important;
            color: #2563EB !important;
            background: #F8FAFC !important;
        }

        /* === Чекбоксы и тоглы === */
        body.app-mode #screen-app input[type="checkbox"] {
            accent-color: var(--new-accent);
        }

        /* === Продажи по кластерам — горизонтальный stacked bar === */
        /* Кнопка ⟳ обновления (в шапке «Аналитика остатков») */
        body.app-mode #screen-app .refresh-btn-new {
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            color: var(--new-text-muted);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: all 0.15s;
        }
        body.app-mode #screen-app .refresh-btn-new svg {
            display: block;
        }
        body.app-mode #screen-app .refresh-btn-new:hover {
            color: var(--new-accent);
            border-color: var(--new-accent);
            background: var(--new-accent-soft);
        }
        body.app-mode #screen-app .refresh-btn-new:active svg {
            transform: rotate(180deg);
            transition: transform 0.3s;
        }
        /* Маленькая круглая кнопка-«?» рядом с заголовком — открывает справочную модалку */
        body.app-mode #screen-app .help-btn-new {
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            color: var(--new-text-muted);
            width: 26px;
            height: 26px;
            border-radius: 50%;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-app);
            font-size: 0.85rem;
            font-weight: 600;
            line-height: 1;
            padding: 0;
            transition: all 0.15s;
            flex-shrink: 0;
        }
        body.app-mode #screen-app .help-btn-new:hover {
            color: var(--new-accent);
            border-color: var(--new-accent);
            background: var(--new-accent-soft);
        }
        /* Крестик закрытия в модалках (Управление через Excel и др.) */
        #excelManageCloseX:hover {
            background: var(--new-bg-soft) !important;
            color: var(--new-text) !important;
        }
        body.app-mode #screen-app .sales-bar {
            display: flex;
            width: 100%;
            height: 56px;
            border-radius: 12px;
            overflow: hidden;
            background: var(--new-bg-soft);
            border: 1px solid var(--new-border);
            box-shadow: var(--new-shadow-sm);
            margin-bottom: 20px;
        }
        body.app-mode #screen-app .sales-bar-segment {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 0.85rem;
            font-weight: 600;
            position: relative;
            cursor: default;
            transition: filter 0.15s;
            min-width: 2px;
        }
        body.app-mode #screen-app .sales-bar-segment:hover {
            filter: brightness(1.08);
        }
        body.app-mode #screen-app .sales-bar-label {
            text-shadow: 0 1px 2px rgba(0,0,0,0.25);
            white-space: nowrap;
            padding: 0 8px;
        }
        body.app-mode #screen-app .sales-legend {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 10px;
        }
        body.app-mode #screen-app .sales-legend-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            border-radius: 10px;
            transition: border-color 0.15s;
        }
        body.app-mode #screen-app .sales-legend-item:hover {
            border-color: var(--new-accent);
        }
        body.app-mode #screen-app .sales-legend-swatch {
            width: 14px;
            height: 14px;
            border-radius: 4px;
            flex-shrink: 0;
        }
        body.app-mode #screen-app .sales-legend-cluster {
            flex: 1;
            color: var(--new-text);
            font-size: 0.92rem;
        }
        body.app-mode #screen-app .sales-legend-pct {
            color: var(--new-text-muted);
            font-size: 0.92rem;
            font-variant-numeric: tabular-nums;
        }

        /* Панель «Сохранить изменения» — обычный блок под таблицей,
           по образцу «Очистить историю» в Истории поставок. */
        body.app-mode #screen-app .manage-save-bar {
            margin-top: 16px;
            padding: 0;
            background: transparent;
            border: none;
            box-shadow: none;
        }

        /* Сегментный переключатель (вместо круглых radio) */
        body.app-mode #screen-app .segmented {
            display: inline-flex;
            padding: 4px;
            background: var(--new-bg-soft);
            border: 1px solid var(--new-border);
            border-radius: 12px;
            gap: 4px;
            flex-wrap: wrap;
        }
        body.app-mode #screen-app .segmented .seg-option {
            position: relative;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            padding: 8px 16px;
            border-radius: 9px;
            color: var(--new-text-muted);
            font-size: 0.9rem;
            transition: all 0.15s;
            user-select: none;
            white-space: nowrap;
        }
        body.app-mode #screen-app .segmented .seg-option input[type="radio"] {
            position: absolute;
            opacity: 0;
            inset: 0;
            margin: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
        }
        body.app-mode #screen-app .segmented .seg-option:hover {
            color: var(--new-text);
        }
        body.app-mode #screen-app .segmented .seg-option:has(input:checked) {
            background: var(--new-bg);
            color: var(--new-accent-hover);
            box-shadow: 0 1px 3px rgba(15,23,42,0.08);
        }
        /* Подсказка «Как работает этот параметр?» — без квадратной иконки */
        body.app-mode #screen-app details.param-help {
            background: transparent !important;
            border: none !important;
            padding: 0 !important;
        }
        body.app-mode #screen-app details.param-help summary {
            color: var(--new-accent) !important;
            padding: 0;
            text-decoration: underline;
            text-decoration-style: dotted;
            text-underline-offset: 3px;
        }
        body.app-mode #screen-app details.param-help > summary::after {
            content: '' !important;
            display: none !important;
        }
        body.app-mode #screen-app details.param-help > div {
            padding: 12px 14px;
            background: var(--new-bg-soft);
            border: 1px solid var(--new-border);
            border-radius: 10px;
            color: var(--new-text-muted) !important;
            margin-top: 8px;
        }
        body.app-mode #screen-app details.param-help ul {
            color: var(--new-text-muted) !important;
        }

        /* Тоглы переключателей в Управлении товарами — синие, не золотые */
        body.app-mode #screen-app .toggle-slider {
            background: #CBD5E1 !important;
        }
        body.app-mode #screen-app .toggle-wrap input:checked + .toggle-slider {
            background: var(--new-accent) !important;
        }

        /* === Файл-инпут и кастомные подложки === */
        body.app-mode #screen-app .loading-inline {
            color: var(--new-text-muted);
        }
        body.app-mode #screen-app .legend-color.days-zero {
            background: #94A3B8 !important;
        }

        /* === Empty-state «нет данных» — направляющий блок === */
        .empty-state-new {
            text-align: center;
            padding: 40px 24px;
            background: var(--new-bg);
            border: 1px dashed var(--new-border);
            border-radius: 14px;
            color: var(--new-text-muted);
        }
        .empty-state-new .empty-icon {
            font-size: 2.4rem;
            margin-bottom: 12px;
            opacity: 0.8;
        }
        .empty-state-new .empty-title {
            color: var(--new-text);
            font-weight: 600;
            font-size: 1.02rem;
            margin-bottom: 6px;
        }
        .empty-state-new .empty-hint {
            font-size: 0.9rem;
            line-height: 1.55;
        }

        /* === Таблица «Управление товарами» — фиксированная ширина колонок === */
        body.app-mode #manageTableEl,
        body.app-mode #availableTableEl {
            table-layout: fixed;
            width: 100%;
        }
        body.app-mode #manageTableEl th,
        body.app-mode #manageTableEl td,
        body.app-mode #availableTableEl th,
        body.app-mode #availableTableEl td {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        body.app-mode #screen-app td.col-name,
        body.app-mode #screen-app th.col-name {
            text-align: left !important;
        }
        /* Единый шрифт (Inter) для всех ячеек таблиц, в т.ч. SKU и Артикулов.
           Чтобы цифры в столбиках выравнивались по ширине — включаем tabular-nums. */
        body.app-mode #screen-app td.col-offer,
        body.app-mode #screen-app th.col-offer,
        body.app-mode #screen-app td.col-sku,
        body.app-mode #screen-app th.col-sku {
            text-align: left !important;
            font-family: var(--font-app);
            font-size: 0.88rem;
            color: var(--new-text-muted);
            font-variant-numeric: tabular-nums;
        }
        body.app-mode #screen-app th.col-offer,
        body.app-mode #screen-app th.col-sku {
            color: var(--new-text) !important;
            font-size: 0.78rem;
        }
        body.app-mode #manageTableEl .col-toggle {
            text-align: center;
        }
        body.app-mode #availableTableEl input.available-qty {
            width: 100%;
            max-width: 130px;
            text-align: right;
            padding: 6px 10px !important;
        }

        /* === Инструкции — разделы и пустые состояния === */
        body.app-mode .tutorial-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 28px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--new-border);
        }
        body.app-mode .tutorial-filter {
            padding: 8px 16px;
            border-radius: 10px;
            border: 1px solid var(--new-border);
            background: var(--new-bg);
            color: var(--new-text-muted);
            font-size: 0.9rem;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        body.app-mode .tutorial-filter:hover {
            border-color: var(--new-accent);
            color: var(--new-text);
        }
        body.app-mode .tutorial-filter.active {
            background: var(--new-accent-soft);
            color: var(--new-accent-hover);
            border-color: #BFDBFE;
            font-weight: 500;
        }
        body.app-mode .tutorial-section {
            margin-bottom: 36px;
        }
        body.app-mode .tutorial-section-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--new-text);
            margin-bottom: 14px;
        }
        body.app-mode .tutorial-section-title .icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: var(--new-accent-soft);
            border-radius: 10px;
            font-size: 1.1rem;
        }
        body.app-mode .tutorial-section-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr));
            gap: 24px;
            max-width: 1100px;
        }
        body.app-mode .tutorial-empty-section {
            grid-column: 1 / -1;
            padding: 28px 24px;
            text-align: center;
            background: var(--new-bg);
            border: 1px dashed var(--new-border);
            border-radius: 14px;
            color: var(--new-text-muted);
            font-size: 0.92rem;
        }
        body.app-mode .tutorial-card-new {
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.2s;
            box-shadow: var(--new-shadow-sm);
        }
        body.app-mode .tutorial-card-new:hover {
            border-color: var(--new-accent);
            box-shadow: var(--new-shadow);
            transform: translateY(-2px);
        }

        /* Step badges в card */
        body.app-mode #screen-app .step-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px; height: 28px;
            border-radius: 50%;
            background: var(--new-accent);
            color: #fff;
            font-weight: 700;
            font-size: 0.85rem;
            margin-right: 8px;
        }

        /* === Футер: одна и та же светлая версия для всех экранов с body === */
        body.app-mode > footer,
        body.landing-mode > footer {
            background: var(--new-bg-soft) !important;
            border-top: 1px solid var(--new-border);
            color: var(--new-text-muted);
            text-align: left !important;
            padding: 48px 0 32px !important;
        }
        body.app-mode > footer a,
        body.landing-mode > footer a {
            color: var(--new-text-muted) !important;
            text-decoration: none !important;
        }
        body.app-mode > footer a:hover,
        body.landing-mode > footer a:hover {
            color: var(--new-accent) !important;
        }

        /* Подсказки в виде <details> внутри app — перекрасить золотую плашку в синюю */
        body.app-mode #screen-app details {
            background: var(--new-accent-soft) !important;
            border: 1px solid #BFDBFE !important;
            border-radius: 14px !important;
            max-width: 720px;
        }
        body.app-mode #screen-app details summary {
            color: var(--new-accent-hover) !important;
        }
        body.app-mode #screen-app details > summary::after {
            color: var(--new-accent) !important;
        }
        body.app-mode #screen-app details ol,
        body.app-mode #screen-app details ul,
        body.app-mode #screen-app details p {
            color: var(--new-text-muted) !important;
        }
        body.app-mode #screen-app details strong {
            color: var(--new-text) !important;
        }

        /* Перекрашиваем горизонтальные разделители «border-top: 1px solid var(--border)» в app-mode */
        body.app-mode #screen-app [style*="border-top: 1px solid var(--border)"],
        body.app-mode #screen-app [style*="border-bottom: 1px solid var(--border)"] {
            border-color: var(--new-border) !important;
        }
        /* «Тёмные» подложки (#1A1F2A и т.п.) в детальных секциях app — перекрашиваем в светлые */
        body.app-mode #screen-app [style*="background: #1A1F2A"],
        body.app-mode #screen-app [style*="background:#1A1F2A"],
        body.app-mode #screen-app [style*="background: #0F1219"],
        body.app-mode #screen-app [style*="background:#0F1219"] {
            background: var(--new-bg-soft) !important;
        }
        /* Цветные плашки-уведомления (зелёные баннеры успеха и т.п.) */
        body.app-mode #screen-app [style*="rgba(80,200,120"] {
            background: #ECFDF5 !important;
            border-color: #A7F3D0 !important;
            color: #065F46 !important;
        }
        body.app-mode #screen-app [style*="rgba(80, 200, 120"] {
            background: #ECFDF5 !important;
            border-color: #A7F3D0 !important;
            color: #065F46 !important;
        }

        body.app-mode #screen-app .clusters-selection label {
            background: var(--new-bg) !important;
            border: 1px solid var(--new-border) !important;
            color: var(--new-text);
        }
        body.app-mode #screen-app .clusters-selection label:hover {
            border-color: var(--new-accent) !important;
        }
        body.app-mode #screen-app .clusters-selection .cluster-share {
            color: var(--new-text-muted) !important;
        }

        body.app-mode #screen-app .recommend-badge {
            background: var(--new-accent) !important;
            color: #fff !important;
        }
        /* Кликабельные карточки выбора способа (Шаг 1 распределения) */
        body.app-mode #screen-app .method-card {
            background: var(--new-bg) !important;
            border: 1px solid var(--new-border) !important;
            box-shadow: var(--new-shadow-sm);
            transition: all 0.2s;
            display: block;
            width: 100%;
        }
        body.app-mode #screen-app .method-card:hover {
            border-color: var(--new-accent) !important;
            box-shadow: var(--new-shadow);
            transform: translateY(-2px);
        }
        body.app-mode #screen-app .method-card.method-card-primary {
            border: 1px solid #BFDBFE !important;
            background: linear-gradient(180deg, var(--new-accent-soft) 0%, var(--new-bg) 100%) !important;
        }
        body.app-mode #screen-app .method-card h4 {
            color: var(--new-text);
        }
        body.app-mode #screen-app .method-card p {
            color: var(--new-text-muted) !important;
        }
        /* Хлебные крошки в визарде — статичная информационная плашка.
           Все шаги выглядят одинаково (без выделения активного), чтобы не отвлекать. */
        body.app-mode .wizard-breadcrumbs-static {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 28px;
            padding: 10px 14px;
            background: var(--new-bg-soft);
            border: 1px solid var(--new-border);
            border-radius: 10px;
            font-size: 0.88rem;
        }
        body.app-mode .wizard-breadcrumbs-static .wz-crumb {
            color: var(--new-text-light);
            cursor: default;
            padding: 4px 10px;
            border-radius: 8px;
            transition: all 0.15s;
        }
        /* Активный шаг — синий, выделенный */
        body.app-mode .wizard-breadcrumbs-static .wz-crumb.current {
            color: var(--new-accent);
            background: var(--new-accent-soft);
            font-weight: 600;
        }
        /* Пройденный шаг — кликабельный, темнее обычного */
        body.app-mode .wizard-breadcrumbs-static .wz-crumb.done {
            color: var(--new-text-muted);
            cursor: pointer;
        }
        body.app-mode .wizard-breadcrumbs-static .wz-crumb.done:hover {
            color: var(--new-accent);
            background: var(--new-accent-soft);
        }
        body.app-mode .wizard-breadcrumbs-static .wz-sep {
            color: var(--new-border);
            user-select: none;
        }

        /* Мобильная адаптация app */
        @media (max-width: 720px) {
            body.app-mode .scroll-tall { max-height: 400px; }
        }

        .btn {
            display: inline-block;
            background: linear-gradient(135deg, var(--gold) 0%, #B8860B 100%);
            color: #0A0C10;
            font-weight: 700;
            padding: 12px 24px;
            border-radius: 40px;
            border: none;
            cursor: pointer;
            font-size: 0.9rem;
            margin: 5px;
        }
        .btn-outline {
            background: transparent;
            border: 1.5px solid var(--gold);
            color: var(--gold);
        }
        .card {
            background: var(--card-bg);
            border-radius: 32px;
            padding: 28px;
            border: 1px solid var(--border);
            margin-bottom: 32px;
        }
        .tabs {
            display: flex;
            gap: 16px;
            margin-bottom: 24px;
            border-bottom: 1px solid var(--border);
        }
        .tab {
            padding: 10px 24px;
            cursor: pointer;
            border-radius: 30px 30px 0 0;
            transition: 0.2s;
            background: transparent;
            color: var(--gray);
        }
        .tab.active {
            background: var(--card-bg);
            color: var(--gold);
            border-bottom: 2px solid var(--gold);
        }
        .tab-content { display: none; }
        .tab-content.active { display: block; }

        /* Навигация в шапке (вкладки) */
        .header-nav-link:hover {
            background: rgba(255, 255, 255, 0.06);
            color: var(--gold);
        }
        .header-nav-link.active {
            background: rgba(212, 175, 55, 0.12);
            color: var(--gold);
            font-weight: 600;
        }

        /* Стилизация option в выпадающих списках (Chromium-based: Chrome, Edge, Yandex) */
        select option {
            background-color: #1A1F2A !important;
            color: #fff !important;
        }
        select option:hover,
        select option:focus,
        select option:active,
        select option:checked {
            background: linear-gradient(#1A1F2A, #1A1F2A) !important;
            background-color: #1A1F2A !important;
            color: var(--gold) !important;
            box-shadow: 0 0 10px 100px #1A1F2A inset !important;
        }
        .table-container { overflow-x: auto; margin-top: 20px; }
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
        }
        th, td {
            border: 1px solid var(--border);
            padding: 10px 12px;
            text-align: center;
            vertical-align: middle;
        }
        th { background-color: #1A1F2A; color: var(--gold); }
        /* Разделитель кластеров рисуем через box-shadow, а НЕ border-right.
           border занимает место в макете, и поскольку в шапке он на colspan-ячейках,
           а в теле на одиночных, ширины колонок шапки и тела накопительно расходятся
           (граница «уезжает» к правому краю при прокрутке). box-shadow рисует ту же
           линию, но не влияет на геометрию — колонки шапки и тела совпадают. */
        body.app-mode #screen-app .cluster-separator { box-shadow: inset -1px 0 0 var(--new-border) !important; }
        /* Перенос длинных названий кластеров в шапке «Аналитики остатков»
           (th colspan=3 над тройками Ср.сут/Остатки/В днях). */
        th.cluster-head {
            white-space: normal;
            overflow-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
            line-height: 1.15;
        }
        .need-cell { background-color: rgba(212, 175, 55, 0.2); font-weight: bold; }
        /* Переключатель Активен/Неактивен на вкладке "Управление товарами" */
        .toggle-wrap {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
            cursor: pointer;
        }
        .toggle-wrap input { opacity: 0; width: 0; height: 0; }
        .toggle-slider {
            position: absolute;
            inset: 0;
            background: #555;
            border-radius: 24px;
            transition: background 0.2s;
        }
        .toggle-slider::before {
            content: "";
            position: absolute;
            height: 18px;
            width: 18px;
            left: 3px;
            top: 3px;
            background: #fff;
            border-radius: 50%;
            transition: transform 0.2s;
        }
        .toggle-wrap input:checked + .toggle-slider { background: #D4AF37; }
        .toggle-wrap input:checked + .toggle-slider::before { transform: translateX(20px); }
        /* Таблицы планов (поставок и отгрузки): фиксированная раскладка,
           фиксированные первые 3 колонки, кластеры делят остаток поровну. */
        table.supply-table {
            table-layout: fixed;
            min-width: 720px;
        }
        table.supply-table th,
        table.supply-table td {
            word-wrap: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
        }
        table.supply-table col.col-offer  { width: 180px; }
        table.supply-table col.col-sku    { width: 120px; }
        table.supply-table col.col-total  { width: 80px;  }
        /* Режим "широкая таблица" — каждый кластер минимум 140px,
           таблица растягивается, контейнер даёт горизонтальный скролл. */
        table.supply-table[data-wide="1"] col.col-cluster { width: 140px; }
        table.supply-table[data-wide="1"] { table-layout: fixed; }
        /* Длинные названия кластеров («Дальний Восток», «Санкт-Петербург и СЗО»)
           переносим в несколько строк, а не растягиваем колонку. Так ширина всех
           колонок-кластеров одинакова. Заголовки-кластеры — это th начиная с 4-й
           колонки (после Артикул / SKU / Итого). */
        table.supply-table[data-wide="1"] thead th:nth-child(n+4) {
            width: 140px;
            white-space: normal;
            overflow-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
            vertical-align: bottom;
            line-height: 1.15;
        }
        table.supply-table[data-wide="1"] tbody td:nth-child(n+4) {
            width: 140px;
        }
        /* Подытоговая строка "Итого" по кластерам — отделяется визуально */
        table.supply-table tr.totals-row td {
            background: var(--new-bg-blue-soft);
            border-top: 2px solid var(--new-accent);
            color: var(--new-text);
            font-size: 0.95rem;
        }
        /* Сетка чекбоксов выбора кластеров на шаге 2 визарда */
        .clusters-selection {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        .clusters-selection label {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            border-radius: 12px;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
        }
        .clusters-selection label:hover {
            border-color: var(--new-accent);
        }
        .clusters-selection label input[type="checkbox"] {
            width: auto;
            flex-shrink: 0;
        }
        .clusters-selection .cluster-name {
            flex: 1;
            min-width: 0;
            overflow-wrap: break-word;
        }
        .clusters-selection .cluster-share {
            color: var(--gray);
            font-size: 0.85rem;
            flex-shrink: 0;
        }
        @media (max-width: 900px) {
            .clusters-selection { grid-template-columns: repeat(2, 1fr); }
            .landing-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
            .landing-3col, .landing-4col { grid-template-columns: 1fr !important; }
            .landing-2col { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 560px) {
            .clusters-selection { grid-template-columns: 1fr; }
        }
        .days-high { background-color: #FFCCCC; color: #000; }
        .days-good { background-color: #CCE5FF; color: #000; }
        .days-normal { background-color: #CCFFCC; color: #000; }
        .days-low { background-color: #FFE5CC; color: #000; }
        .days-zero { background-color: #444; color: #ccc; }
        .legend {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 16px;
            font-size: 0.75rem;
            justify-content: center;
        }
        .legend-color { width: 18px; height: 18px; border-radius: 4px; display: inline-block; margin-right: 5px; }
        input, select {
            width: 100%;
            padding: 14px 18px;
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            border-radius: 16px;
            color: var(--new-text);
            font-size: 0.9rem;
        }
        .grid-2cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .available-table input { width: 80px; padding: 6px; text-align: center; }
        .loading { display: none; text-align: center; padding: 20px; color: var(--new-accent); }
        .loading-inline { display: none; padding: 0; text-align: left; }
        .error { display: none; background: #FEE2E2; border: 1px solid #FCA5A5; padding: 12px; border-radius: 16px; margin-top: 16px; color: #B91C1C; }
        .password-wrap { position: relative; }
        .password-wrap input { padding-right: 44px; }
        .password-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--gray); cursor: pointer; font-size: 1.1rem; padding: 4px 8px; }
        .password-toggle:hover { color: var(--gold); }
        .trust-badge { margin-top: 16px; display: flex; gap: 20px; flex-wrap: wrap; color: var(--gray); font-size: 0.8rem; }
        i.fa, i.fas { margin-right: 6px; }
        .api-select-wrapper { margin-bottom: 16px; }
        .api-buttons { display: flex; gap: 10px; margin-top: 10px; }
        .separator-margin { margin-top: 0; }

        /* Сворачиваемые подсказки (details/summary) */
        details > summary { list-style: none; }
        details > summary::-webkit-details-marker { display: none; }
        details > summary::after {
            content: '▾';
            color: var(--new-accent);
            transition: transform 0.2s;
            margin-left: 10px;
            font-size: 0.95rem;
        }
        details[open] > summary::after { transform: rotate(180deg); display: inline-block; }
        details > summary:hover { opacity: 0.85; }

        /* Индикатор активного магазина в шапке */
        #headerActiveStore {
            min-width: 0;
        }
        #headerActiveStoreName {
            display: block !important;
            max-width: 140px !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            min-width: 0;
        }

        /* ============================================================
           МОБИЛЬНАЯ ВЕРСИЯ (этап 10)
           Активируется через body.mobile-mode (JS ставит при width ≤ 720px).
           Доступны только Аналитика остатков и Управление товарами.
           ============================================================ */

        /* Уменьшаем общий padding контейнера на мобиле */
        body.mobile-mode .container { padding: 0 12px; }
        body.mobile-mode { font-size: 14px; }

        /* Скрываем НЕдоступные вкладки в шапке и сам блок с stor-индикатором (он в bottom-tab) */
        body.mobile-mode .header-nav-link[data-tab="distribute"],
        body.mobile-mode .header-nav-link[data-tab="history"],
        body.mobile-mode .header-nav-link[data-tab="tutorials"] {
            display: none !important;
        }
        /* Скрываем сами секции вкладок (если кто-то их активирует) */
        body.mobile-mode #tab-distribute,
        body.mobile-mode #tab-history,
        body.mobile-mode #tab-tutorials {
            display: none !important;
        }
        /* Скрываем доступ к Админке и «Сообщить о проблеме» в дропдауне на мобиле.
           Профиль ОСТАВЛЯЕМ доступным — пользователю нужно переключать активный магазин
           и иногда добавлять новый, а это делается из Профиля. */
        body.mobile-mode #openAdminLink,
        body.mobile-mode #reportBugLink {
            display: none !important;
        }

        /* Шапка на мобиле: ставим эл-ты в столбик, лого слева, e-mail+меню справа */
        body.mobile-mode header {
            padding: 0 !important;
        }
        body.mobile-mode header > .container > div {
            padding: 10px 0 !important;
            flex-wrap: nowrap;
            gap: 8px;
        }
        body.mobile-mode #headerActiveStore {
            display: none !important;
        }
        body.mobile-mode #userMenu {
            gap: 8px !important;
        }
        body.mobile-mode #userMenuBtn {
            padding: 6px 10px !important;
            font-size: 0.8rem;
        }
        body.mobile-mode #userMenuBtn #userEmail {
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            vertical-align: middle;
        }
        body.mobile-mode #brandLogo {
            font-size: 1.2rem !important;
            gap: 6px !important;
        }
        body.mobile-mode #brandLogo > div:first-of-type {
            width: 32px !important;
            height: 32px !important;
            font-size: 1.1rem !important;
        }
        body.mobile-mode #brandBetaBadge,
        body.mobile-mode .brand-beta-landing,
        body.mobile-mode .logo-new-beta {
            display: none !important;
        }
        body.mobile-mode #brandLogo .logo-new-svg {
            height: 28px !important;
        }
        body.mobile-mode #headerNavWrap {
            display: none !important;  /* В мобиле навигация в bottom-tab-bar */
        }

        /* Mobile bottom tab bar — переключение между Аналитикой и Управлением.
           Показывается ТОЛЬКО на экране приложения (screen-app), не на лендинге/auth/профиле.
           Условие: body.mobile-mode + body.app-mode одновременно. */
        body.mobile-mode.app-mode .mobile-tab-bar {
            display: flex !important;
        }
        .mobile-tab-bar {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--new-bg);
            border-top: 1px solid var(--new-border);
            z-index: 50;
            box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.06);
        }
        .mobile-tab-bar-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 10px 4px 12px;
            background: none;
            border: none;
            color: var(--new-text-muted);
            font-family: var(--font-app);
            font-size: 0.72rem;
            cursor: pointer;
            transition: color 0.15s;
        }
        .mobile-tab-bar-btn svg {
            width: 22px;
            height: 22px;
        }
        .mobile-tab-bar-btn.active {
            color: var(--new-accent);
        }
        body.mobile-mode #screen-app {
            padding-bottom: 80px !important;  /* место под bottom-bar */
        }

        /* === Карточки SKU (мобильная Аналитика) === */
        body.mobile-mode .mobile-sku-cards {
            display: flex !important;
            flex-direction: column;
            gap: 10px;
        }
        body.mobile-mode #needAnalyticsTable .split-head,
        body.mobile-mode #needAnalyticsTable .split-body,
        body.mobile-mode #needAnalyticsTable table {
            display: none !important;  /* десктопная таблица скрыта на мобиле */
        }
        body.mobile-mode #analyticsStatusChips {
            margin-bottom: 12px;
            gap: 6px !important;
        }
        body.mobile-mode .status-chip {
            font-size: 0.78rem !important;
            padding: 5px 9px !important;
        }
        body.mobile-mode .status-chip span:last-child {
            font-size: 0.78rem;
        }
        .mobile-sku-cards { display: none; }
        .mobile-sku-card {
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            border-radius: 12px;
            padding: 12px;
        }
        .mobile-sku-card-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 10px;
        }
        .mobile-sku-card-title {
            font-size: 0.92rem;
            font-weight: 600;
            color: var(--new-text);
            line-height: 1.3;
            word-break: break-word;
        }
        .mobile-sku-card-sub {
            font-size: 0.75rem;
            color: var(--new-text-light);
            margin-top: 2px;
            font-variant-numeric: tabular-nums;
        }
        .mobile-sku-card-days {
            flex-shrink: 0;
            text-align: right;
            min-width: 80px;
        }
        .mobile-sku-card-days-num {
            font-size: 1.4rem;
            font-weight: 700;
            line-height: 1;
        }
        .mobile-sku-card-days-label {
            font-size: 0.7rem;
            color: var(--new-text-light);
            margin-top: 2px;
        }
        .mobile-sku-card-stats {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            padding: 8px 0 0;
            border-top: 1px solid var(--new-border-soft);
            font-size: 0.82rem;
            color: var(--new-text-muted);
        }
        .mobile-sku-card-stats > div {
            display: flex;
            flex-direction: column;
        }
        .mobile-sku-card-stats strong {
            color: var(--new-text);
            font-weight: 600;
            font-size: 0.92rem;
            font-variant-numeric: tabular-nums;
        }
        .mobile-sku-card-clusters-toggle {
            margin-top: 10px;
            padding: 6px 0;
            font-size: 0.82rem;
            color: var(--new-accent);
            cursor: pointer;
            background: none;
            border: none;
            border-top: 1px solid var(--new-border-soft);
            width: 100%;
            text-align: left;
            font-family: var(--font-app);
        }
        .mobile-sku-card-clusters {
            display: none;
            margin-top: 6px;
            font-size: 0.85rem;
        }
        .mobile-sku-card-clusters.open {
            display: block;
        }
        .mobile-sku-card-clusters-row {
            display: flex;
            justify-content: space-between;
            padding: 6px 0;
            border-bottom: 1px solid var(--new-border-soft);
            color: var(--new-text-muted);
        }
        .mobile-sku-card-clusters-row:last-child {
            border-bottom: none;
        }
        .mobile-sku-card-clusters-row strong {
            color: var(--new-text);
            font-variant-numeric: tabular-nums;
            font-weight: 600;
        }
        /* Цветной кружок-индикатор дней слева от карточки */
        .mobile-days-pill {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 0.7rem;
            font-weight: 600;
            margin-left: 6px;
        }
        .mobile-days-pill.days-high   { background: #FEE2E2; color: #991B1B; }
        .mobile-days-pill.days-good   { background: #DBEAFE; color: #1E40AF; }
        .mobile-days-pill.days-normal { background: #D1FAE5; color: #065F46; }
        .mobile-days-pill.days-low    { background: #FED7AA; color: #9A3412; }
        .mobile-days-pill.days-zero   { background: #E5E7EB; color: #4B5563; }

        /* === Mobile Управление товарами === */
        body.mobile-mode #manageTable .split-head,
        body.mobile-mode #manageTable .split-body,
        body.mobile-mode #manageTable table {
            display: none !important;
        }
        body.mobile-mode .mobile-manage-cards {
            display: flex !important;
            flex-direction: column;
            gap: 8px;
        }
        .mobile-manage-cards { display: none; }
        .mobile-manage-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px;
            background: var(--new-bg);
            border: 1px solid var(--new-border);
            border-radius: 10px;
        }
        .mobile-manage-card-text {
            flex: 1;
            min-width: 0;
        }
        .mobile-manage-card-name {
            font-size: 0.9rem;
            color: var(--new-text);
            line-height: 1.3;
            word-break: break-word;
        }
        .mobile-manage-card-sub {
            font-size: 0.72rem;
            color: var(--new-text-light);
            margin-top: 2px;
            font-variant-numeric: tabular-nums;
        }
        body.mobile-mode .manage-toolbar {
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 8px !important;
        }
        body.mobile-mode .manage-toolbar > * {
            width: 100% !important;
        }
        body.mobile-mode #manageSearch {
            width: 100% !important;
        }
        body.mobile-mode .manage-save-bar {
            flex-direction: column !important;
            gap: 8px !important;
            align-items: stretch !important;
        }
        body.mobile-mode .manage-save-bar #openExcelManageBtn {
            margin-left: 0 !important;
        }

        /* === Карточки и формы — общий мобильный layout === */
        body.mobile-mode .card {
            padding: 14px !important;
            border-radius: 12px !important;
        }
        body.mobile-mode h3, body.mobile-mode h2 {
            font-size: 1.1rem !important;
        }
        body.mobile-mode .empty-state-new {
            padding: 20px !important;
        }

        /* === Аналитика остатков: hide cache info on mobile (visible in desktop only) === */
        body.mobile-mode #analyticsCacheInfo {
            display: none !important;
        }
        body.mobile-mode #analyticsSection h3 {
            font-size: 1.05rem !important;
        }
        body.mobile-mode #analyticsSection > p,
        body.mobile-mode #analyticsSection > .description {
            font-size: 0.82rem !important;
            line-height: 1.4 !important;
            margin-bottom: 12px !important;
        }
        /* Описание Аналитики — скрываем длинный технический текст */
        body.mobile-mode #analyticsDescription {
            display: none !important;
        }
        /* Кнопка скачать Excel и refresh — компактные */
        body.mobile-mode #analyticsExcelBtn {
            font-size: 0.8rem;
            padding: 6px 10px;
        }

        /* Modal в mobile: уменьшаем padding, занимаем больше viewport */
        body.mobile-mode .modal-new-card {
            padding: 18px !important;
            max-height: 88vh !important;
            border-radius: 16px !important;
        }
        body.mobile-mode .modal-new-overlay {
            padding: 12px !important;
        }

        /* === Мобильная адаптация профиля (минимально необходимое — для смены магазина) === */
        /* Хедер профиля (лого + кнопка «Назад») — в столбик на узком экране */
        body.mobile-mode section.profile-screen-new {
            padding: 20px 0 40px !important;
        }
        body.mobile-mode section.profile-screen-new .new-screen-header {
            margin-bottom: 18px;
            gap: 10px;
        }
        body.mobile-mode section.profile-screen-new .new-screen-header .logo-new-svg {
            height: 32px;
        }
        body.mobile-mode section.profile-screen-new .new-back-btn {
            padding: 8px 12px;
            font-size: 0.85rem;
        }
        body.mobile-mode section.profile-screen-new h1 {
            font-size: 1.4rem !important;
        }
        body.mobile-mode section.profile-screen-new .card {
            padding: 16px !important;
            border-radius: 14px !important;
            margin-bottom: 16px !important;
        }
        body.mobile-mode section.profile-screen-new .card h2 {
            font-size: 1.1rem !important;
        }
        body.mobile-mode section.profile-screen-new .card h3 {
            font-size: 1rem !important;
        }
        body.mobile-mode section.profile-screen-new input,
        body.mobile-mode section.profile-screen-new select {
            padding: 12px 14px !important;
            font-size: 0.92rem !important;
        }
        /* Карточки магазинов в storesList — флекс в столбик на узком */
        body.mobile-mode #storesList > * {
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 10px !important;
        }
        body.mobile-mode #storesList .store-actions,
        body.mobile-mode #storesList > * > div:last-child {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        /* === Продажи по кластерам на мобиле — компактные элементы === */
        body.mobile-mode #salesByClusterContent {
            font-size: 0.85rem;
        }
        body.mobile-mode #salesByClusterBar {
            height: auto !important;
            min-height: 24px;
        }

        /* === На совсем маленьких экранах (≤ 380px) — ещё компактнее === */
        @media (max-width: 380px) {
            body.mobile-mode .container { padding: 0 10px; }
            body.mobile-mode #userMenuBtn #userEmail { max-width: 70px; }
            body.mobile-mode #brandLogo { font-size: 1.05rem !important; }
            body.mobile-mode .mobile-sku-card-stats { font-size: 0.76rem; }
            body.mobile-mode .mobile-sku-card-stats strong { font-size: 0.85rem; }
            body.mobile-mode .status-chip { font-size: 0.72rem !important; padding: 4px 8px !important; }
        }

        /* === Поля поиска и инпуты на мобиле — крупный font-size 16px+ против iOS auto-zoom === */
        body.mobile-mode input[type="text"],
        body.mobile-mode input[type="email"],
        body.mobile-mode input[type="password"],
        body.mobile-mode input[type="number"],
        body.mobile-mode input[type="search"],
        body.mobile-mode select,
        body.mobile-mode textarea {
            font-size: 16px;  /* iOS не зумит, если ≥ 16px */
        }

        /* Инпут поиска в Управлении товарами на мобиле — компактная строка.
           Глобальный input имеет padding 14px 18px + border-radius 16px и в flex-обёртке
           manage-toolbar (которая column на мобиле) растягивается; явно ограничиваем высоту. */
        body.mobile-mode #manageSearch,
        body.mobile-mode #availableSearch {
            padding: 10px 14px !important;
            border-radius: 10px !important;
            height: 42px;
            max-width: 100% !important;
            flex: none !important;
        }

        /* Мобильная плашка-индикатор активного магазина — видна только в mobile-mode */
        body.mobile-mode #mobileStoreIndicator {
            display: flex !important;
        }

        /* === Компактный футер для мобильной версии ===
           Десктопный 3-колоночный футер с контактами/правовой информацией занимает
           почти весь экран на телефоне. На мобиле прячем большой блок и оставляем
           только тонкий ряд ссылок на правовые документы + копирайт.
           Юридически это покрывает требование иметь доступ к политике/соглашению. */
        body.mobile-mode footer {
            padding: 16px 0 18px !important;
        }
        body.mobile-mode footer .footer-new-grid {
            display: none !important;  /* большой блок с контактами и колонками — прячем */
        }
        body.mobile-mode footer .footer-new-bottom {
            border-top: none !important;
            padding-top: 0 !important;
            margin-top: 0 !important;
            flex-direction: column !important;
            gap: 8px !important;
            text-align: center !important;
            font-size: 0.72rem !important;
        }
        /* Добавляем мобильные ссылки на правовые документы через ::before внутри bottom */
        body.mobile-mode footer .footer-new-bottom::before {
            content: '';
            display: block;
            width: 100%;
        }
        body.mobile-mode #mobileFooterLinks {
            display: flex !important;
        }
        /* Доп. отступ снизу под bottom tab-bar (он 60+px) — только на screen-app,
           т.к. tab-bar появляется только там. На лендинге/auth/профиле этого отступа быть не должно. */
        body.mobile-mode.app-mode footer {
            margin-bottom: 70px;
        }

        /* === Гостевая навигация в шапке на мобиле ===
           На десктопе «Войти» и «Регистрация» расходятся с gap:32px. На узком экране это
           прибивает «Регистрацию» к самому краю. Уменьшаем расстояние и компактим саму кнопку. */
        body.mobile-mode #guestNav {
            gap: 12px !important;
        }
        body.mobile-mode #guestNav a#navLoginLink {
            font-size: 0.9rem;
        }
        body.mobile-mode #guestNav a#navRegisterLink {
            padding: 7px 14px !important;
            font-size: 0.85rem !important;
            border-radius: 10px !important;
        }

        /* === Тумблер (manage toggle) — увеличенная зона тапа на мобиле === */
        body.mobile-mode .mobile-manage-card .toggle-wrap {
            padding: 4px;
        }

        /* === Подсказки (help-btn-new) — скрываем на мобиле, чтобы не мешали === */
        body.mobile-mode .help-btn-new {
            display: none !important;
        }

        /* === Кнопка «Скачать Excel» в Аналитике — на новой строке на мобиле,
              чтобы не ломать flex-обёртку === */
        body.mobile-mode #downloadAnalyticsExcelBtn {
            margin-left: 0 !important;
            order: 99;
            flex-basis: 100%;
            margin-top: 4px;
        }
        body.mobile-mode #downloadSalesByClusterBtn {
            margin-left: 0 !important;
            order: 99;
            flex-basis: 100%;
            margin-top: 4px;
        }