/* ============================================================
   MICRAFFIN v6 — ОБНОВЛЁННОЕ ОФОРМЛЕНИЕ РАБОЧИХ СТРАНИЦ
   ============================================================

   Подключается ТОЛЬКО когда включён флаг features.new_design
   (features.json) — либо у роли god для предпросмотра. Пока флаг
   выключен, файла на странице нет вообще и сайт выглядит как раньше.

   Что здесь и зачем.

   Рабочие страницы («Моя статистика», «Внести деньги», «Добавить
   лид», «Статистика хантеров», «Обучение», таблицы) писались в разное
   время и каждая — со своим набором стилей. Отсюда три беды:

     1. Разнобой. Одна и та же по смыслу карточка на трёх страницах
        имеет три радиуса, три отступа и три вида наведения.
     2. Мёртвые переменные. Страницы объявляли свою палитру в :root
        локально, а некоторые — забывали. Так, «Внести деньги» верстается
        на var(--bg-secondary) и var(--border-color), которых нет ни в
        одном из общих файлов. Работника спасает строгая тема: в
        worker-strict.css эти блоки перечислены поимённо. А админ и god
        строгую тему не грузят и видят ту же карточку без фона и без
        рамки. Ниже недостающие имена объявлены один раз для всех.
     3. Центрированные шапки. Каждая страница начинается по-своему:
        где-то заголовок по центру, где-то слева, где-то его нет.

   Слой лечит это НЕ переписывая шаблоны: он объявляет недостающие
   переменные, приводит самодельные классы страниц к общему виду и добавляет
   недостающие удобства (крупные цели на телефоне, липкая шапка
   таблицы, читаемая ширина колонки текста).

   Принципы те же, что у строгой темы (worker-strict.css): интерфейс
   не прыгает под курсором, цифры табличные, цвет — только там, где
   он что-то значит. Отличие v6 — в ритме: воздуха больше, границ
   меньше, иерархия держится на размере и весе шрифта, а не на рамках.

   Селекторы начинаются с body.mf-v6 — этого достаточно, чтобы
   перебить одноклассовые правила внутри шаблонов, и мало, чтобы
   что-то сломать: выключил флаг — всё вернулось.
   ============================================================ */

/* ============================================================
   1. ТОКЕНЫ
   ============================================================ */

body.mf-v6 {
    /* ---- Ритм. Один шаг = 4px, всё кратно ему ---- */
    --v6-1: 4px;
    --v6-2: 8px;
    --v6-3: 12px;
    --v6-4: 16px;
    --v6-5: 24px;
    --v6-6: 32px;
    --v6-7: 48px;

    /* ---- Скругления. Крупнее прежних, но без «таблетки» ---- */
    --v6-radius-sm: 10px;
    --v6-radius: 14px;
    --v6-radius-lg: 20px;

    /* Общие токены ui-kit подтягиваем к новому ритму, чтобы кнопки,
       поля и карточки из общей библиотеки не отставали от страниц */
    --ui-radius-sm: var(--v6-radius-sm);
    --ui-radius: var(--v6-radius);
    --ui-radius-lg: var(--v6-radius-lg);

    /* ---- Тени. Мягкая глубина вместо чёрных подложек ---- */
    --v6-shadow: 0 1px 2px rgba(0, 0, 0, .28);
    --v6-shadow-lift: 0 10px 30px -18px rgba(0, 0, 0, .9);
    --mf-shadow-card: var(--v6-shadow);

    /* ---- Поверхности. Ступень между фоном и карточкой сделана
       заметнее: на старой палитре карточка почти сливалась с фоном,
       и границы блоков читались только по рамке ---- */
    --ui-surface: #1c191e;
    --ui-surface-2: #262229;
    --v6-hairline: rgba(255, 235, 246, .07);

    /* ---- Совместимость: переменные, которые шаблоны используют, но
       нигде не объявляют. Из-за них на «Внести деньги» пропадали фон
       и рамка карточки, а подписи полей были бесцветными ---- */
    --bg-primary: var(--ui-bg);
    --bg-secondary: var(--ui-surface);
    --bg-tertiary: var(--ui-surface-2);
    --bg-card: var(--ui-surface);
    --bg-deep: var(--ui-well);
    --border-color: var(--ui-border);
    --border: var(--ui-border);
    --glass-border: var(--ui-border);
    --text: var(--ui-text);
    --text-primary: var(--ui-text);
    --text-secondary: var(--ui-text-dim);
    --text-muted: var(--ui-text-muted);
    --accent: var(--ui-accent);
    --accent-primary: var(--ui-accent);
    --accent-secondary: var(--ui-accent-light);
    --accent-light: var(--ui-accent-light);
    --accent-glow: var(--ui-accent-soft);
    --success: var(--ui-success);
    --danger: var(--ui-danger);
    --error: var(--ui-danger);
    --warning: var(--ui-warning);
    --info: var(--ui-accent-light);
    --gold: var(--ui-accent-2);
    --card-bg: var(--ui-surface);
    --card-border: var(--ui-border);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   2. ЛЕЙАУТ
   ============================================================

   Рабочая страница — это колонка с цифрами и формами, а не витрина
   во всю ширину монитора. На 1920px строка таблицы растягивалась на
   1480px, и глаз терял, к какой колонке относится число.
   ============================================================ */

body.mf-v6 .mf-main {
    padding: var(--v6-6) var(--v6-6) var(--v6-7);
}

body.mf-v6 .mf-content {
    max-width: 1280px;
}

/* Страницы с собственным контейнером выравниваем по той же сетке,
   чтобы при переходе между разделами колонка не прыгала */
body.mf-v6 .money-container,
body.mf-v6 .leads-container,
body.mf-v6 .hunters-container,
body.mf-v6 .tutorial-container {
    max-width: 880px;
    margin: 0 auto;
    padding: 0;
}

/* ============================================================
   3. ЗАГОЛОВКИ СТРАНИЦ
   ============================================================

   Приводим самодельные шапки к одному виду: заголовок слева,
   пояснение под ним, тонкая черта снизу. Центрированный заголовок
   на рабочей странице сбивает точку входа взгляда — человек читает
   слева направо, и начало страницы должно быть там же, где начало
   каждой строки.
   ============================================================ */

body.mf-v6 .hunters-header,
body.mf-v6 .leads-header,
body.mf-v6 .money-header,
body.mf-v6 .stats-header,
body.mf-v6 .personal-header {
    text-align: left;
    margin-bottom: var(--v6-5);
    padding-bottom: var(--v6-4);
    border-bottom: 1px solid var(--v6-hairline);
}

body.mf-v6 .hunters-header h1,
body.mf-v6 .leads-header h1,
body.mf-v6 .money-header h1,
body.mf-v6 .stats-header h1,
body.mf-v6 .personal-header h1 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.4px;
    line-height: 1.2;
    color: var(--ui-text);
    display: flex;
    align-items: center;
    gap: var(--v6-3);
    margin: 0;
}

/* Иконка заголовка — плитка, как в общем ui-kit */
body.mf-v6 .hunters-header h1 i,
body.mf-v6 .leads-header h1 i,
body.mf-v6 .money-header h1 i,
body.mf-v6 .stats-header h1 i {
    font-size: 16px;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v6-radius-sm);
    background: var(--ui-accent-soft);
    border: 1px solid var(--ui-border-accent);
    color: var(--ui-accent);
}

body.mf-v6 .hunters-header p,
body.mf-v6 .leads-header p,
body.mf-v6 .money-header p,
body.mf-v6 .stats-header p {
    color: var(--ui-text-dim);
    font-size: 14px;
    margin: var(--v6-2) 0 0;
    max-width: 62ch;      /* длинная строка на широком экране не читается */
}

body.mf-v6 .mf-page-header,
body.mf-v6 .mf-dashboard-header {
    margin-bottom: var(--v6-5);
    padding-bottom: var(--v6-4);
}

body.mf-v6 .mf-page-header h1,
body.mf-v6 .mf-dashboard-header h1 {
    font-size: 27px;
}

/* ============================================================
   4. КАРТОЧКИ — ОДИН ЯЗЫК НА ВСЕ СТРАНИЦЫ
   ============================================================

   Console-тему на «Добавить лид» не трогаем: это отдельная шутка
   со своими правилами, и v6 в неё не лезет.
   ============================================================ */

body.mf-v6:not(.console-theme) .mf-card,
body.mf-v6:not(.console-theme) .mf-panel,
body.mf-v6:not(.console-theme) .money-card,
body.mf-v6:not(.console-theme) .lead-type-card,
body.mf-v6:not(.console-theme) .worker-card,
body.mf-v6:not(.console-theme) .content-card,
body.mf-v6:not(.console-theme) .stats-section,
body.mf-v6:not(.console-theme) .summary-section,
body.mf-v6:not(.console-theme) .hunter-card,
body.mf-v6:not(.console-theme) .source-item,
body.mf-v6:not(.console-theme) .add-panel,
body.mf-v6:not(.console-theme) .chat-panel {
    background: var(--ui-surface);
    border: 1px solid var(--v6-hairline);
    border-radius: var(--v6-radius);
    box-shadow: var(--v6-shadow);
}

body.mf-v6:not(.console-theme) .money-card,
body.mf-v6:not(.console-theme) .content-card,
body.mf-v6:not(.console-theme) .stats-section,
body.mf-v6:not(.console-theme) .add-panel {
    padding: var(--v6-5);
}

body.mf-v6:not(.console-theme) .lead-type-card,
body.mf-v6:not(.console-theme) .worker-card,
body.mf-v6:not(.console-theme) .source-item {
    padding: var(--v6-4);
}

/* Выбираемые карточки: состояние читается заливкой и рейкой, а не
   подпрыгиванием. Прыжок сбивает попадание пальцем на телефоне. */
body.mf-v6:not(.console-theme) .lead-type-card,
body.mf-v6:not(.console-theme) .worker-card {
    transition: background .15s ease, border-color .15s ease;
    position: relative;
    overflow: hidden;
}

body.mf-v6:not(.console-theme) .lead-type-card:hover,
body.mf-v6:not(.console-theme) .worker-card:hover {
    transform: none;
    background: var(--ui-surface-2);
    border-color: var(--ui-border-strong);
}

body.mf-v6:not(.console-theme) .lead-type-card.selected,
body.mf-v6:not(.console-theme) .worker-card.selected {
    background: var(--ui-accent-soft);
    border-color: var(--ui-border-accent);
    transform: none;
}

body.mf-v6:not(.console-theme) .lead-type-card.selected::before,
body.mf-v6:not(.console-theme) .worker-card.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ui-accent);
}

/* ============================================================
   5. ЦИФРЫ И ПОДПИСИ
   ============================================================ */

body.mf-v6 .summary-value,
body.mf-v6 .stat-current,
body.mf-v6 .detail-value,
body.mf-v6 .source-value,
body.mf-v6 .mf-stat-value,
body.mf-v6 .stat-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -.3px;
}

body.mf-v6 .summary-label,
body.mf-v6 .detail-label,
body.mf-v6 .stat-name,
body.mf-v6 .mf-stat-label {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-text-muted);
}

body.mf-v6 .summary-item {
    padding: var(--v6-4);
    border-radius: var(--v6-radius-sm);
    background: var(--ui-surface-2);
    border: 1px solid var(--v6-hairline);
}

body.mf-v6 .summary-value {
    font-size: 24px;
    font-weight: 800;
    margin-top: var(--v6-1);
}

/* Полосы прогресса: тоньше и спокойнее — это фон для числа,
   а не самостоятельная картинка */
body.mf-v6 .progress-bar,
body.mf-v6 .progress-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    overflow: hidden;
}

body.mf-v6 .progress-fill {
    border-radius: 999px;
    box-shadow: none;
}

/* ============================================================
   6. ФОРМЫ
   ============================================================

   Поля ввода целиком принадлежат ui-kit.css: там они описаны с
   !important, потому что в шаблонах полно локальных стилей. Поэтому
   v6 их НЕ переопределяет правилами (они бы всё равно проиграли), а
   меняет токены, на которых ui-kit построен. Так правка одна, и она
   действует везде — и в Micraffin, и в DarkFin.

   Меняем ровно две вещи: высоту цели (44 → 46px, комфортнее пальцем)
   и размер шрифта на телефоне — ниже 16px Safari зумит страницу при
   фокусе, и человек потом руками отъезжает обратно.
   ============================================================ */

body.mf-v6 {
    --ui-control-h: 46px;
    --ui-control-h-lg: 52px;
}

body.mf-v6 .form-group {
    margin-bottom: var(--v6-4);
}

body.mf-v6 .form-group label,
body.mf-v6 .ui-label {
    font-size: 12px;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--ui-text-dim);
    margin-bottom: var(--v6-2);
    text-transform: none;   /* КАПС на каждой подписи формы читается как крик */
}

/* Поле переписки — исключение: оно начинается с одной строки и растёт
   под текст. Высота задана в самом шаблоне чата (там же и !important). */

/* Кнопка действия. Фирменный градиент остаётся, уезд при наведении
   убран: кнопка «Отправить» под пальцем не должна двигаться. */
body.mf-v6 .submit-btn,
body.mf-v6 .ui-btn-primary,
body.mf-v6 .mf-btn-primary {
    min-height: 50px;
    border-radius: var(--v6-radius-sm);
    background: var(--ui-grad-cta);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: var(--v6-shadow);
    transition: filter .15s ease;
}

body.mf-v6 .submit-btn:hover,
body.mf-v6 .ui-btn-primary:hover,
body.mf-v6 .mf-btn-primary:hover {
    transform: none;
    filter: brightness(1.08);
    box-shadow: var(--v6-shadow);
}

body.mf-v6 .submit-btn:active {
    filter: brightness(.95);
}

/* Видимый фокус с клавиатуры — на рабочем месте по формам ходят табом */
body.mf-v6 :focus-visible {
    outline: 2px solid var(--ui-accent-light);
    outline-offset: 2px;
}

/* ============================================================
   7. ТАБЛИЦЫ
   ============================================================

   Рабочая таблица длинная. Липкая шапка и подсветка строки под
   курсором — это не украшение: без них на 60-й строке уже неясно,
   что за колонка перед тобой.
   ============================================================ */

body.mf-v6 table thead th,
body.mf-v6 .tv-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--ui-surface-2);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-text-dim);
    border-bottom: 1px solid var(--ui-border-strong);
}

body.mf-v6 table tbody tr:hover,
body.mf-v6 .tv-table tbody tr:hover {
    background: rgba(255, 255, 255, .035);
}

body.mf-v6 table td {
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--v6-hairline);
}

/* Широкую таблицу на узком экране прокручиваем внутри блока, а не
   вместе со всей страницей */
body.mf-v6 .tv-table-wrap,
body.mf-v6 .mf-week-scroll,
body.mf-v6 .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--v6-radius-sm);
}

/* ============================================================
   8. САЙДБАР
   ============================================================

   Меню — фон, а не содержание. Пункты стоят плотнее, служебные
   подписи тише, активный пункт держится заливкой и рейкой.
   Уезд пункта вправо при наведении убран: строка меню под курсором
   не должна двигаться, когда до неё ведут мышь.
   ============================================================ */

body.mf-v6 .mf-nav-item {
    padding: 10px 14px;
    gap: 12px;
    border-radius: var(--v6-radius-sm);
    font-size: 14px;
    transition: background .12s ease, color .12s ease;
}

body.mf-v6 .mf-nav-item:hover {
    transform: none;
    background: rgba(255, 255, 255, .05);
}

body.mf-v6 .mf-nav-item.active {
    background: var(--ui-accent-soft);
    color: var(--ui-text);
    border-left: 3px solid var(--ui-accent);
}

body.mf-v6 .mf-nav-section-title {
    font-size: 10.5px;
    letter-spacing: .12em;
    color: var(--ui-text-muted);
    opacity: .85;
}

body.mf-v6 .mf-sidebar {
    background: var(--ui-bg);
    border-right: 1px solid var(--v6-hairline);
}

/* ============================================================
   9. ОБУЧЕНИЕ И ДЛИННЫЕ ТЕКСТЫ
   ============================================================ */

body.mf-v6 .tutorial-section p,
body.mf-v6 .content-card p,
body.mf-v6 .rule-list li {
    line-height: 1.65;
    font-size: 15px;
    max-width: 70ch;
    color: var(--ui-text-dim);
}

body.mf-v6 .section-title {
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -.2px;
}

body.mf-v6 .subsection-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ui-text);
}

body.mf-v6 .toc-item {
    border-radius: var(--v6-radius-sm);
    padding: 10px 12px;
    transition: background .12s ease;
}

body.mf-v6 .toc-item:hover {
    background: rgba(255, 255, 255, .05);
    transform: none;
}

/* ============================================================
   10. ТЕЛЕФОН
   ============================================================

   Рабочие страницы чаще открывают с телефона, чем с ноутбука:
   хантер добавляет лид и вносит деньги на ходу. Поэтому цели
   крупнее, отступы меньше, сетки в одну колонку.
   ============================================================ */

@media (max-width: 900px) {
    /* Сверху 76px — под фиксированной панелью с бургером (mobile.css),
       снизу — под нижним меню. Раньше здесь стоял общий отступ 16px, и
       на телефоне заголовок страницы уезжал под верхнюю панель. */
    body.mf-v6 .mf-main {
        padding: 76px var(--v6-4) calc(96px + env(safe-area-inset-bottom, 0px));
    }

    body.mf-v6 .hunters-header h1,
    body.mf-v6 .leads-header h1,
    body.mf-v6 .money-header h1,
    body.mf-v6 .mf-page-header h1 {
        font-size: 21px;
    }

    body.mf-v6 .leads-grid,
    body.mf-v6 .worker-grid,
    body.mf-v6 .hunters-grid,
    body.mf-v6 .summary-section {
        grid-template-columns: 1fr !important;
        gap: var(--v6-3);
    }

    body.mf-v6 .money-card,
    body.mf-v6 .content-card,
    body.mf-v6 .stats-section,
    body.mf-v6 .add-panel {
        padding: var(--v6-4);
    }

    /* Кнопка отправки на телефоне липнет к низу карточки формы:
       после длинной формы до неё не нужно долистывать */
    body.mf-v6 .submit-btn {
        position: sticky;
        bottom: 12px;
    }

    /* Длинный код и адреса в тексте («Обучение») распирали страницу вбок:
       на 375px строка уезжала за экран, и вся вёрстка ехала следом. */
    body.mf-v6 code,
    body.mf-v6 kbd,
    body.mf-v6 samp {
        overflow-wrap: anywhere;
        word-break: break-word;
        max-width: 100%;
    }

    body.mf-v6 pre {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Нижнее меню: пунктов больше, чем помещается в 375px. Раньше
       последний вылезал за край и тянул за собой всю страницу —
       теперь полоса меню прокручивается сама, а страница стоит. */
    body.mf-v6 .mf-mobile-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.mf-v6 .mf-mobile-nav::-webkit-scrollbar { display: none; }

    body.mf-v6 .mf-mobile-nav-item { flex: 0 0 auto; }

    /* ---- 16px на телефоне ----
       Ниже 16px Safari зумит страницу при фокусе на поле, и человек потом
       руками отъезжает обратно. В mobile.css такое правило уже есть, но
       оно не работает: в ui-kit.css поля описаны селектором с шестью
       :not(...) и font-size 14.5px !important. Два !important спорят по
       весу селектора, и вес там выше. Поэтому повторяем ТОТ ЖЕ селектор
       с префиксом body.mf-v6 — только так правило доходит до поля. */
    body.mf-v6 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]),
    body.mf-v6 textarea,
    body.mf-v6 select {
        font-size: 16px !important;
    }
}

/* ============================================================
   11. ДВИЖЕНИЕ
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    body.mf-v6 *,
    body.mf-v6 *::before,
    body.mf-v6 *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* Каскад анимаций у каждого блока выключаем — вместо него одно общее
   появление, и делаем его ТОЛЬКО через transform, без opacity.

   Почему без opacity: в фоновой вкладке браузер останавливает CSS-анимации.
   Кадр с opacity: 0 в этот момент замирает, и человек, открывший страницу
   в новой вкладке, возвращается к пустому экрану — содержимое появится
   только после того, как он на вкладку переключится. Проверено: у
   .mf-content computed opacity оставался 0. Движение по transform такой
   ловушки не создаёт: даже застывший кадр остаётся видимым. */
body.mf-v6 .mf-content > * {
    animation: none;
}

body.mf-v6 .mf-content {
    animation: v6Enter .24s ease-out;
}

@keyframes v6Enter {
    from { transform: translateY(6px); }
    to   { transform: none; }
}

/* ============================================================
   12. СТРАНИЦА ЗА СТРАНИЦЕЙ
   ============================================================

   Разделы выше приводят к порядку общее — сетку, карточки, поля,
   таблицы. Ниже — то, что есть только на конкретной странице.

   Правило то же: разметку шаблонов не трогаем. Каждый блок начинается
   с body.mf-v6, поэтому при выключенном обновлении ни одно из этих
   правил не существует.

   Титульная страница о компании (landing.html) и публичная статья
   (articles/public_view.html) сюда НЕ входят: они не наследуют общий
   шаблон, живут своей вёрсткой и обновления не касаются.
   ============================================================ */

/* ------------------------------------------------------------
   12.1 МОЯ СТАТИСТИКА (personal_stats.html)
   ------------------------------------------------------------
   Страница, которую работник открывает чаще всего: он пришёл
   посмотреть, сколько заработал. Значит, шапка профиля должна быть
   компактной, а деньги — крупными.
   ------------------------------------------------------------ */

body.mf-v6 .profile-section {
    padding: var(--v6-5);
    border-radius: var(--v6-radius);
    border: 1px solid var(--v6-hairline);
    margin-bottom: var(--v6-5);
    gap: var(--v6-4);
}

/* Аватар был 100×100 — четверть первого экрана телефона уходила на
   квадрат с буквой. 68px хватает, чтобы узнать себя. */
body.mf-v6 .profile-avatar {
    width: 68px;
    height: 68px;
    border-radius: var(--v6-radius);
    font-size: 26px;
}

body.mf-v6 .profile-name {
    font-size: 21px;
    letter-spacing: -.3px;
}

body.mf-v6 .badge,
body.mf-v6 .role-badge,
body.mf-v6 .status-badge {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--v6-hairline);
}

/* Карточки разбора: 350px в минимуме давали две колонки только на
   очень широком экране, между ними — пустота. */
body.mf-v6 .detailed-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--v6-4);
}

body.mf-v6 .detailed-card {
    padding: var(--v6-5);
    border-radius: var(--v6-radius);
    border: 1px solid var(--v6-hairline);
}

/* История выплат — список денег. Сумма справа, дата и тип слева,
   строки одинаковой высоты: так столбец сумм читается сверху вниз. */
body.mf-v6 .history-item {
    padding: 14px 18px;
    border-radius: var(--v6-radius-sm);
    border: 1px solid var(--v6-hairline);
    transition: background .12s ease;
}

body.mf-v6 .history-item:hover {
    background: var(--ui-surface-2);
    transform: none;
}

body.mf-v6 .history-amount {
    font-size: 19px;
    font-variant-numeric: tabular-nums;
}

body.mf-v6 .history-date,
body.mf-v6 .history-meta {
    font-size: 12px;
    color: var(--ui-text-muted);
}

body.mf-v6 .history-list {
    gap: var(--v6-2);
    max-height: 560px;
}

/* ------------------------------------------------------------
   12.2 СТАТИСТИКА (public_page.html)
   ------------------------------------------------------------
   Блоки этой страницы были прибиты к краям своими margin: 0 24px и
   padding: 0 24px — при общей сетке страницы получалось двойное поле
   и графики не совпадали по левому краю с заголовком.
   ------------------------------------------------------------ */

body.mf-v6 .main-chart-container {
    margin: 0 0 var(--v6-5);
    padding: var(--v6-5);
    border-radius: var(--v6-radius);
    border: 1px solid var(--v6-hairline);
}

body.mf-v6 .detailed-stats,
body.mf-v6 .detailed-header {
    padding-left: 0;
    padding-right: 0;
}

body.mf-v6 .detailed-stats {
    gap: var(--v6-4);
    margin-bottom: var(--v6-5);
}

/* Стрелки переключения периода 28×28 — мимо них промахиваешься
   пальцем; минимум комфортной цели около 36px. */
body.mf-v6 .chart-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--v6-radius-sm);
}

body.mf-v6 .legend-item {
    border-radius: 999px;
    padding: 5px 12px;
}

body.mf-v6 .legend-item:hover {
    background: var(--ui-surface-2);
}

body.mf-v6 .legend-value {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   12.3 КАЗИНО (casino.html)
   ------------------------------------------------------------
   Здесь наоборот: это единственное место, где интерфейс имеет право
   быть громким. Трогаем только то, что мешает попадать пальцем.
   ------------------------------------------------------------ */

body.mf-v6 .casino-type-card {
    border-width: 1px;
    border-radius: var(--v6-radius);
    padding: var(--v6-4);
}

body.mf-v6 .casino-machine {
    border-radius: var(--v6-radius-lg);
    padding: var(--v6-5);
}

body.mf-v6 .lead-display {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

body.mf-v6 .history-card {
    border-radius: var(--v6-radius-sm);
    border: 1px solid var(--v6-hairline);
    padding: var(--v6-4);
}

body.mf-v6 .lead-type-btn {
    min-height: 44px;
    border-radius: var(--v6-radius-sm);
}

/* ------------------------------------------------------------
   12.4 ДИНОЗАВРИК (dino.html)
   ------------------------------------------------------------
   Сама игра — холст, в него не лезем ни одним правилом. Приводим
   в порядок только обвязку вокруг него.
   ------------------------------------------------------------ */

body.mf-v6 .dino-header {
    text-align: left;
    margin-bottom: var(--v6-4);
}

body.mf-v6 .dino-card {
    border-radius: var(--v6-radius);
    border: 1px solid var(--v6-hairline);
    box-shadow: var(--v6-shadow-lift);
    padding: 8px;
}

body.mf-v6 .dino-help {
    border-radius: var(--v6-radius);
    border: 1px solid var(--v6-hairline);
    padding: var(--v6-4);
}

body.mf-v6 .dino-btn {
    min-height: 42px;
    border-radius: var(--v6-radius-sm);
}

/* ------------------------------------------------------------
   12.5 ДАШБОРД (dashboard.html)
   ------------------------------------------------------------ */

body.mf-v6 .tables-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--v6-4);
    margin: var(--v6-5) 0;
}

body.mf-v6 .table-card {
    border-radius: var(--v6-radius);
    border: 1px solid var(--v6-hairline);
    padding: var(--v6-4);
    position: relative;
    transition: background .14s ease, border-color .14s ease;
}

body.mf-v6 .table-card:hover {
    transform: none;
    background: var(--ui-surface-2);
    border-color: var(--ui-border-strong);
}

/* ------------------------------------------------------------
   12.6 ТАБЛИЦЫ (table_view.html)
   ------------------------------------------------------------
   Самая рабочая страница из всех: сюда приходят искать строку.
   Поэтому — плотнее строки, спокойнее чипы фильтров, крупнее кнопки.
   ------------------------------------------------------------ */

body.mf-v6 .tv-head {
    margin-bottom: var(--v6-4);
    padding-bottom: var(--v6-4);
    border-bottom: 1px solid var(--v6-hairline);
}

body.mf-v6 .tv-btn {
    min-height: 40px;
    border-radius: var(--v6-radius-sm);
    padding: 9px 14px;
}

body.mf-v6 .tv-chip {
    border-radius: 999px;
    font-size: 12px;
}

body.mf-v6 .tv-filter-panel {
    gap: var(--v6-3);
    padding: 0 var(--v6-4) var(--v6-4);
}

body.mf-v6 .tv-table td {
    padding-top: 10px;
    padding-bottom: 10px;
}

body.mf-v6 .tv-date-time {
    color: var(--ui-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   12.7 АДМИН-ПАНЕЛЬ (admin_panel.html)
   ------------------------------------------------------------
   Не рабочая страница работника, но одного языка с остальными:
   заголовок слева, карточки той же формы, таблица со скроллом
   внутри блока, а не всей страницей (у неё min-width 1400px).
   ------------------------------------------------------------ */

body.mf-v6 .admin-header {
    text-align: left;
    margin-bottom: var(--v6-5);
    padding-bottom: var(--v6-4);
    border-bottom: 1px solid var(--v6-hairline);
    animation: none;
}

body.mf-v6 .stats-grid {
    gap: var(--v6-4);
}

body.mf-v6 .stat-card {
    border-radius: var(--v6-radius);
    padding: var(--v6-4);
}

body.mf-v6 .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--v6-radius-sm);
    border: 1px solid var(--v6-hairline);
}

body.mf-v6 .role-select {
    min-height: 38px;
}

body.mf-v6 .save-btn {
    min-height: 40px;
    border-radius: var(--v6-radius-sm);
}

body.mf-v6 .search-box {
    border-radius: var(--v6-radius);
}

/* ------------------------------------------------------------
   12.8 ДОБАВИТЬ ЛИД (add_lead.html)
   ------------------------------------------------------------
   Console-тему страницы не трогаем — у неё свои правила (см. п.4).
   ------------------------------------------------------------ */

body.mf-v6:not(.console-theme) .leads-grid {
    gap: var(--v6-3);
}

body.mf-v6:not(.console-theme) .type-emoji {
    font-size: 26px;
}

body.mf-v6:not(.console-theme) .type-name {
    font-size: 14px;
    font-weight: 650;
}

body.mf-v6:not(.console-theme) .type-stats,
body.mf-v6:not(.console-theme) .stat-pill {
    font-size: 12px;
    color: var(--ui-text-muted);
    font-variant-numeric: tabular-nums;
}

body.mf-v6:not(.console-theme) .stat-pill {
    border-radius: 999px;
    padding: 5px 12px;
    background: var(--ui-surface-2);
    border: 1px solid var(--v6-hairline);
}

/* ------------------------------------------------------------
   12.9 СТАТИСТИКА ХАНТЕРОВ (hunters_stats.html)
   ------------------------------------------------------------ */

body.mf-v6 .hunters-grid {
    gap: var(--v6-4);
}

body.mf-v6 .stat-item {
    padding: 7px 0;
    border-bottom: 1px solid var(--v6-hairline);
}

body.mf-v6 .stat-item:last-child {
    border-bottom: none;
}

body.mf-v6 .stat-current {
    font-weight: 700;
}

/* ------------------------------------------------------------
   12.10 СТАТЬИ (articles/dashboard.html, articles/edit.html)
   ------------------------------------------------------------
   Редактор — рабочий инструмент: панель инструментов не должна
   уезжать вместе с текстом, когда статья длинная.
   ------------------------------------------------------------ */

body.mf-v6 .editor-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    border-radius: var(--v6-radius-sm) var(--v6-radius-sm) 0 0;
}

body.mf-v6 .editor-wrapper,
body.mf-v6 .editor-content {
    border-radius: var(--v6-radius);
}

body.mf-v6 .editor-content {
    line-height: 1.7;
}

/* ------------------------------------------------------------
   12.11 ВХОД (login.html)
   ------------------------------------------------------------
   Страница вне общего шаблона: класс mf-v6 ей ставит сам login.html.
   ------------------------------------------------------------ */

body.mf-v6.ui-auth .ui-auth-box {
    border-radius: var(--v6-radius-lg);
    box-shadow: var(--v6-shadow-lift);
}

body.mf-v6.ui-auth .mf-form-group {
    margin-bottom: var(--v6-4);
}

/* ------------------------------------------------------------
   12.12 ЧЕГО ОБНОВЛЕНИЕ НЕ КАСАЕТСЯ
   ------------------------------------------------------------
   404-я (готическая страница с горгульей) и «Миша» — не рабочие
   страницы, а отдельные шутки со своим оформлением. Общий слой
   их не переписывает намеренно: там менять нечего.
   ------------------------------------------------------------ */

/* ============================================================
   13. РАБОЧАЯ СВОДКА (хантер и майор)
   ============================================================

   Блок в начале «Моей статистики» у хантера и «Статистики хантеров»
   у майора. Задача одна: человек открыл страницу — и сразу видит то,
   ради чего пришёл (сколько заработал, сколько добавил, сколько
   накрутил), теми же словами, что и в боте. Подробности остались
   ниже по странице и не тронуты.

   Разметка блока живёт в шаблонах и тоже под флагом: пока обновление
   не применено, ни блока, ни этих правил на странице нет.
   ============================================================ */

body.mf-v6 .hw-board {
    background: var(--ui-surface);
    border: 1px solid var(--v6-hairline);
    border-radius: var(--v6-radius);
    padding: var(--v6-5);
    margin-bottom: var(--v6-5);
    box-shadow: var(--v6-shadow);
}

body.mf-v6 .hw-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--v6-4);
    flex-wrap: wrap;
    margin-bottom: var(--v6-4);
}

body.mf-v6 .hw-head h1 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--ui-text);
    margin: 0;
}

body.mf-v6 .hw-head p {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--ui-text-muted);
    max-width: 62ch;
}

/* Быстрые действия повторяют кнопки главного меню бота */
body.mf-v6 .hw-actions {
    display: flex;
    gap: var(--v6-2);
    flex-wrap: wrap;
}

body.mf-v6 .hw-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: var(--v6-radius-sm);
    background: var(--ui-surface-2);
    border: 1px solid var(--v6-hairline);
    color: var(--ui-text);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .14s ease, border-color .14s ease;
}

body.mf-v6 .hw-action:hover {
    background: var(--ui-accent-soft);
    border-color: var(--ui-border-accent);
}

/* ---- Плитки с главными числами ---- */
body.mf-v6 .hw-badges {
    display: flex;
    gap: 6px;
    margin: 8px 0 0;
    flex-wrap: wrap;
}

body.mf-v6 .hw-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--ui-accent-soft);
    border: 1px solid var(--ui-border-accent);
    color: var(--ui-text);
}

/* «Воркер» — приписка, а не второй ярлык той же силы */
body.mf-v6 .hw-badge-dim {
    background: var(--ui-surface-2);
    border-color: var(--v6-hairline);
    color: var(--ui-text-muted);
}

body.mf-v6 .hw-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--v6-3);
    margin-bottom: var(--v6-4);
}

body.mf-v6 .hw-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--v6-4);
    border-radius: var(--v6-radius-sm);
    background: var(--ui-surface-2);
    border: 1px solid var(--v6-hairline);
}

body.mf-v6 .hw-tile-accent {
    background: var(--ui-accent-soft);
    border-color: var(--ui-border-accent);
}

body.mf-v6 .hw-tile-label {
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-text-muted);
}

body.mf-v6 .hw-tile-value {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
    color: var(--ui-text);
}

body.mf-v6 .hw-tile-note {
    font-size: 11.5px;
    color: var(--ui-text-muted);
}

/* На акцентной плитке фон розовее и светлее обычного, и приглушённый
   серый на нём даёт 4.43:1 при норме 4.5 — мелкая подпись перестаёт
   читаться. Внутри неё берём ступень посветлее. Проверено замером
   контраста в браузере. */
body.mf-v6 .hw-tile-accent .hw-tile-label,
body.mf-v6 .hw-tile-accent .hw-tile-note {
    color: var(--ui-text-dim);
}

/* ---- Таблица по типам / по людям ---- */
body.mf-v6 .hw-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--v6-radius-sm);
    border: 1px solid var(--v6-hairline);
}

body.mf-v6 .hw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

body.mf-v6 .hw-table th {
    position: sticky;
    top: 0;
    background: var(--ui-surface-2);
    text-align: right;
    padding: 10px 14px;
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-text-dim);
    white-space: nowrap;
}

body.mf-v6 .hw-table th:first-child,
body.mf-v6 .hw-table td:first-child {
    text-align: left;
}

body.mf-v6 .hw-table td {
    padding: 9px 14px;
    text-align: right;
    border-top: 1px solid var(--v6-hairline);
    font-variant-numeric: tabular-nums;
    color: var(--ui-text);
    white-space: nowrap;
}

body.mf-v6 .hw-table tbody tr:hover {
    background: rgba(255, 255, 255, .03);
}

body.mf-v6 .hw-emoji {
    display: inline-block;
    width: 22px;
    margin-right: 6px;
}

body.mf-v6 .hw-strong {
    font-weight: 700;
}

body.mf-v6 .hw-dim {
    color: var(--ui-text-muted);
}

/* Доля в заработке: полоса под числом, а не отдельная колонка графиков */
body.mf-v6 .hw-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.mf-v6 .hw-share-bar {
    width: 60px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    position: relative;
    overflow: hidden;
}

body.mf-v6 .hw-share-bar::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--share, 0%);
    background: var(--ui-accent);
    border-radius: 999px;
}

body.mf-v6 .hw-share-num {
    font-size: 12.5px;
    color: var(--ui-text-dim);
    min-width: 42px;
    text-align: right;
}

body.mf-v6 .hw-note {
    margin: var(--v6-3) 0 0;
    font-size: 12px;
    color: var(--ui-text-muted);
}

@media (max-width: 900px) {
    body.mf-v6 .hw-board {
        padding: var(--v6-4);
    }

    body.mf-v6 .hw-tiles {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    body.mf-v6 .hw-tile-value {
        font-size: 21px;
    }

    /* Быстрые действия на телефоне — в строку с прокруткой,
       чтобы не занимать пол-экрана */
    body.mf-v6 .hw-actions {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    body.mf-v6 .hw-actions::-webkit-scrollbar { display: none; }
    body.mf-v6 .hw-action { flex: 0 0 auto; }
}

/* ============================================================
   14. ПОДСКАЗКА, ЧТО БЛОК ПРОКРУЧИВАЕТСЯ
   ============================================================
   На телефоне таблица и полоса быстрых действий шире экрана. Сами
   по себе они прокручиваются, но об этом никак не сказано: край
   обрывается ровно по границе, и это читается как «дальше ничего
   нет». Мягкая тень у правого края — единственный намёк, который
   ничего не занимает и не мешает нажатиям.
   ============================================================ */

body.mf-v6 .hw-table-wrap,
body.mf-v6 .hw-actions,
body.mf-v6 .tv-table-wrap,
body.mf-v6 .table-wrapper,
body.mf-v6 .df-table-wrapper {
    position: relative;
    /* Тень «приклеена» к правому краю окна прокрутки и исчезает,
       когда докрутили до конца */
    background-image: linear-gradient(to left,
        color-mix(in srgb, var(--ui-bg) 85%, transparent), transparent 40px);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 40px 100%;
    background-attachment: local, scroll;
}

/* Когда прокручивать нечего, подсказка не нужна: на широком экране
   блок помещается целиком */
@media (min-width: 901px) {
    body.mf-v6 .hw-actions {
        background-image: none;
    }
}

/* ============================================================
   15. ПУСТЫЕ СОСТОЯНИЯ И ГРАФИКИ
   ============================================================
   «Пусто» на разных страницах выглядело по-разному: где-то серый
   текст в углу, где-то большая карточка с иконкой, где-то ничего.
   Приводим к одному виду — рамка пунктиром, иконка, короткая фраза.
   Это то, что человек видит в свой первый день, и по нему он судит
   обо всём остальном.
   ============================================================ */

body.mf-v6 .df-empty-state,
body.mf-v6 .no-history,
body.mf-v6 .no-data-block,
body.mf-v6 .no-tables,
body.mf-v6 .no-workers,
body.mf-v6 .chat-empty,
body.mf-v6 .mf-week-empty {
    display: grid;
    place-items: center;
    gap: 6px;
    padding: var(--v6-6) var(--v6-4);
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--v6-radius);
    background: transparent;
    color: var(--ui-text-muted);
    font-size: 14px;
    text-align: center;
}

body.mf-v6 .df-empty-state i,
body.mf-v6 .no-history i,
body.mf-v6 .no-data-block i,
body.mf-v6 .chat-empty i {
    font-size: 26px;
    opacity: .45;
}

/* Карточка с графиком: рамка тише, чем у данных вокруг, — сам график
   и так самый заметный объект на странице */
body.mf-v6 .mf-chart-card,
body.mf-v6 .main-chart-container,
body.mf-v6 .chart-wrapper {
    border-radius: var(--v6-radius);
    border: 1px solid var(--v6-hairline);
}

body.mf-v6 .mf-chart-head h3,
body.mf-v6 .main-chart-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.2px;
}

/* ============================================================
   16. ТОЧЕЧНЫЕ ПРАВКИ ПО ЗАМЕРУ КОНТРАСТА
   ============================================================
   Проверял каждую страницу замером в браузере: беру цвет текста,
   складываю все полупрозрачные подложки под ним и считаю контраст
   по WCAG. Ниже — всё, что не дотянуло до нормы (4.5:1 для мелкого
   текста, 3:1 для крупного). Остальные 380 текстовых элементов
   норму проходят.
   ============================================================ */

/* Кнопка выбранного работника на «Статистике»: белый по акценту
   давал 3.71:1 при 12.5px. Тёмная подпись по светлой заливке. */
body.mf-v6 .worker-filter-btn.active {
    background: var(--ui-accent-light);
    color: #2a0016;
    border-color: var(--ui-accent-light);
}

/* Эмодзи-вкладки в чате стояли на opacity .55 — на тёмном фоне это
   уже неразличимо. Неактивная вкладка тише активной, но видна. */
body.mf-v6 .chat-emoji-tab {
    opacity: .72;
}

body.mf-v6 .chat-emoji-tab:hover,
body.mf-v6 .chat-emoji-tab.active {
    opacity: 1;
}

/* Переключатель разделов в панели: на телефоне поднимаем цель до 40px */
@media (max-width: 900px) {
    body.mf-v6 .mf-mode-link {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================================
   17. КРУГОВОЕ МЕНЮ НА ТЕЛЕФОНЕ
   ============================================================
   Разметку собирает static/mobile-ring.js из уже отрисованной нижней
   полосы, поэтому здесь только вид. Появляется вместе с обновлением;
   пока оно не применено, на телефоне остаётся прежняя полоса.

   Идея простая: одна кнопка внизу, вокруг неё по дуге до пяти кружков.
   Пять — не случайная цифра: больше на дуге в 140° начинают наезжать
   друг на друга подписи, и попадать пальцем становится неудобно.
   ============================================================ */

/* Полосу прячем: её роль теперь у кольца. Разметка остаётся в DOM —
   именно из неё скрипт и собирает пункты. */
body.mf-v6.mr-on .mf-mobile-nav,
body.mf-v6.mr-on .df-mobile-nav {
    display: none !important;
}

body.mf-v6.mr-on .mf-main,
body.mf-v6.mr-on .df-main {
    padding-bottom: 110px;
}

/* Никакого transform на этом контейнере: он создаёт систему координат,
   внутри которой position: fixed перестаёт быть fixed и начинает считаться
   от него. Затемнение из-за этого прижималось к полоске нулевой высоты и
   на экране не появлялось вовсе. Центруем через left/right. */
.mr-root {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 9000;
    height: 0;
    pointer-events: none;
}

.mr-root * { pointer-events: auto; }

/* Затемнение под кольцом: без него кружки теряются на пёстрой странице */
.mr-backdrop {
    position: fixed;
    inset: 0;
    background: radial-gradient(120% 80% at 50% 100%,
                rgba(8, 6, 12, .82) 0%, rgba(8, 6, 12, .58) 45%, rgba(8, 6, 12, .30) 100%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s;
    pointer-events: none;
}

.mr-root.open .mr-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ---- Центральная кнопка ---- */
.mr-fab {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 62px;
    height: 62px;
    border: none;
    border-radius: 50%;
    /* Стекло поверх фирменного градиента: блик сверху, тень снизу —
       кнопка выглядит объёмной, а не плоским кружком. */
    background:
        linear-gradient(165deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%),
        var(--ui-grad-cta);
    color: #fff;
    font-size: 19px;
    display: grid;
    place-items: center;
    box-shadow:
        0 18px 38px -16px color-mix(in srgb, var(--ui-accent) 75%, transparent),
        0 6px 18px -8px rgba(0, 0, 0, .75),
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -6px 14px -8px rgba(0, 0, 0, .5);
    cursor: pointer;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1),
                box-shadow .25s ease;
}

/* Тонкий ореол вокруг кнопки: отделяет её от пёстрой страницы */
.mr-fab::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--ui-accent) 35%, transparent);
    opacity: .55;
    transition: transform .3s ease, opacity .3s ease;
}

.mr-fab i { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }

.mr-fab:active { transform: translateX(-50%) scale(.94); }
.mr-root.open .mr-fab {
    transform: translateX(-50%);
    box-shadow:
        0 10px 26px -14px rgba(0, 0, 0, .8),
        inset 0 1px 0 rgba(255, 255, 255, .3);
}
.mr-root.open .mr-fab i { transform: scale(1.05); }
.mr-root.open .mr-fab::after { transform: scale(1.12); opacity: .25; }

/* ---- Кружки разделов на дуге ---- */
.mr-ring {
    position: absolute;
    left: 50%;
    bottom: 31px;
    width: 0;
    height: 0;
}

.mr-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 74px;
    margin: -30px 0 0 -37px;
    display: grid;
    justify-items: center;
    gap: 7px;
    text-decoration: none;
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    opacity: 0;
    transform: translate(0, 0) scale(.4);
    transition: transform .36s cubic-bezier(.34, 1.56, .64, 1),
                opacity .22s ease;
    transition-delay: calc(var(--i) * 40ms);
}

.mr-root.open .mr-item {
    opacity: 1;
    transform: translate(var(--x), var(--y)) scale(1);
}

/* Кружок: стекло, а не плоская заливка — на пёстрой странице читается */
.mr-ico {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: var(--ui-text);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 60%),
        color-mix(in srgb, var(--ui-surface-2) 88%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid color-mix(in srgb, var(--ui-border-strong) 75%, transparent);
    box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .95),
                inset 0 1px 0 rgba(255, 255, 255, .14);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.mr-item.active .mr-ico {
    background: var(--ui-accent-soft);
    border-color: var(--ui-border-accent);
    color: var(--ui-accent-light);
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--ui-accent) 70%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .2);
}

.mr-item.danger .mr-ico {
    color: var(--ui-danger);
    border-color: color-mix(in srgb, var(--ui-danger) 42%, transparent);
}

.mr-item:active .mr-ico { transform: scale(.92); }

/* Подпись под кружком: до двух строк, без обрезки многоточием —
   резаные слова и были главной претензией к прошлому меню. */
.mr-label {
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    color: var(--ui-text);
    max-width: 74px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(10, 8, 12, .62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .06);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Листание колец ---- */
.mr-arrow {
    position: absolute;
    bottom: 4px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--ui-border-strong) 70%, transparent);
    background: color-mix(in srgb, var(--ui-surface) 82%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--ui-text-dim);
    display: none;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .9);
}

.mr-root.open.multi .mr-arrow { display: grid; }
.mr-prev { left: 6px; }
.mr-next { right: 6px; }

.mr-dots {
    position: absolute;
    left: 50%;
    bottom: 70px;
    transform: translateX(-50%);
    display: none;
    gap: 6px;
    z-index: 3;
}

.mr-root.open.multi .mr-dots { display: flex; }

.mr-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ui-border-strong);
    cursor: pointer;
    transition: width .22s ease, background .22s ease;
}

.mr-dot.on {
    width: 18px;
    background: var(--ui-accent);
}

/* Смена кольца: короткий наплыв, чтобы было видно, что список другой */
@keyframes mrShift {
    from { opacity: .25; }
    to   { opacity: 1; }
}

.mr-ring.mr-shift .mr-item { animation: mrShift .26s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .mr-item, .mr-fab { transition: none !important; animation: none !important; }
}

/* ============================================================
   ПОИСК ПО МЕНЮ (сайдбар, админ и владелец)
   Пунктов у этих двух ролей три десятка; поле над разделами
   отсекает лишнее быстрее, чем глаза находят нужную строку.
   ============================================================ */
.mf-nav-find {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 14px;
    padding: 0 10px;
    min-height: 38px;
    border: 1px solid var(--ui-border, #ffffff1f);
    border-radius: 11px;
    background: var(--ui-surface-2, #ffffff08);
}

.mf-nav-find:focus-within {
    border-color: var(--ui-border-accent, var(--ui-accent));
}

.mf-nav-find i {
    font-size: 12px;
    color: var(--ui-text-muted, #9a93a1);
    flex-shrink: 0;
}

.mf-nav-find input {
    flex: 1;
    min-width: 0;
    height: 36px;
    border: 0;
    background: none;
    outline: none;
    color: var(--ui-text, #f2eef1);
    font: inherit;
    font-size: 13px;
    appearance: none;
}

.mf-nav-find input::placeholder { color: var(--ui-text-muted, #9a93a1); }
.mf-nav-find input::-webkit-search-cancel-button { display: none; }

.mf-nav-find-clear {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ui-surface, #ffffff12);
    color: var(--ui-text-muted, #9a93a1);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.mf-nav-empty {
    padding: 10px 2px 2px;
    font-size: 12px;
    color: var(--ui-text-muted, #9a93a1);
    text-align: center;
}

.mf-nav-item[hidden], .mf-nav-section[hidden], .mf-nav-empty[hidden] { display: none !important; }