/* ============================================================
   UI-KIT — ОБЩИЙ ДИЗАЙН MICRAFFIN И DARKFIN
   ============================================================

   Один файл на оба раздела. Здесь лежит ВСЯ форма интерфейса:
   кнопки, поля, формы, карточки, таблицы, модалки, бейджи, тосты.
   Раздел задаёт только ЦВЕТ — через набор токенов --ui-*.

   Почему так. Раньше компоненты были описаны дважды: в style.css
   (префикс .mf-) и в darkfin/style.css (префикс .df-). Правки вносились
   в один файл и забывались во втором, поэтому одинаковые с виду кнопки
   имели разный радиус, разную высоту и разный фокус. Теперь правило
   пишется один раз для обоих префиксов сразу — разъехаться они больше
   не могут физически.

   ЧТО ОСТАЁТСЯ В ФАЙЛАХ РАЗДЕЛОВ:
   палитра (:root), сайдбар и мобильная панель, фоновые эффекты,
   страницы, которых нет во втором разделе.

   ПОРЯДОК ПОДКЛЮЧЕНИЯ: ui-kit.css идёт ПЕРВЫМ, до style.css /
   darkfin/style.css, чтобы раздел мог точечно переопределить кит,
   а строгая тема (worker-strict.css) — оба.

   ------------------------------------------------------------
   КОНТРАКТ ТОКЕНОВ (объявляются в палитре раздела)

     Поверхности   --ui-bg  --ui-surface  --ui-surface-2  --ui-well
     Границы       --ui-border  --ui-border-strong  --ui-border-accent
     Текст         --ui-text  --ui-text-dim  --ui-text-muted
     Бренд         --ui-accent  --ui-accent-strong  --ui-accent-light
                   --ui-accent-soft  --ui-accent-ring  --ui-on-accent
                   --ui-accent-2 (вторая фирменная нота)
     Градиенты     --ui-grad-brand (заливки)  --ui-grad-title (текст)
     Семантика     --ui-success --ui-danger --ui-warning --ui-info
                   + парные --ui-*-soft
   ------------------------------------------------------------ */

/* ===== БАЗОВЫЕ ЗНАЧЕНИЯ ТОКЕНОВ =====
   Форма едина для обоих разделов, поэтому размеры, радиусы, тени и
   тайминги живут здесь, а не в палитрах. Раздел их не переопределяет —
   иначе кнопки снова станут разной высоты. */
:root {
    /* Шрифты */
    --ui-font: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    --ui-font-mono: 'JetBrains Mono', 'SF Mono', 'Courier New', monospace;

    /* Радиусы. Шкала мягкая: кнопки и поля заметно скруглены, карточки —
       ещё сильнее. Значения задаются только здесь, страницы берут токены,
       поэтому «покруглее/поквадратнее» правится одним местом. */
    --ui-radius-xs: 8px;
    --ui-radius-sm: 12px;
    --ui-radius: 16px;
    --ui-radius-lg: 22px;
    --ui-radius-xl: 28px;
    --ui-radius-pill: 999px;

    /* Высоты интерактивных элементов — тач-таргет не меньше 44px */
    --ui-control-h: 44px;
    --ui-control-h-sm: 34px;
    --ui-control-h-lg: 52px;

    /* Тени двухслойные: короткая «контактная» под элементом и длинная
       мягкая вокруг. Один слой на тёмном фоне даёт грязное серое пятно,
       два — читаемую высоту. Ореолов по-прежнему нет. */
    --ui-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4),
                   0 2px 8px -4px rgba(0, 0, 0, 0.35);
    --ui-shadow-2: 0 2px 4px -2px rgba(0, 0, 0, 0.45),
                   0 12px 32px -12px rgba(0, 0, 0, 0.6);
    --ui-shadow-3: 0 4px 8px -4px rgba(0, 0, 0, 0.5),
                   0 32px 72px -28px rgba(0, 0, 0, 0.78);
    /* Тонкая светлая линия по верхней грани — даёт карточке объём
       без градиентов и блюра */
    --ui-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.06);

    /* ===== СТЕКЛО =====
       Полупрозрачная подложка плавающих панелей: сайдбар, мобильные бар
       и нижнее меню, модалка, тост, подсказки. Оттенок берётся из
       --ui-surface раздела, поэтому стекло Micraffin сливовое,
       а DarkFin — хвойное, само собой.

       Плотности (одинаковые в обоих разделах):
         72%  панели поверх контента — просвет должен быть заметен
         88%  модалка и меню: поверх лежат текст и поля, просвет мешает
         62%  мелочь вроде подсказки под иконкой

       Токенами хранится ТОЛЬКО размытие, цвет считается на месте
       применения. Токен вида color-mix(... var(--ui-surface) ...) на
       :root подставил бы --ui-surface из области :root, а палитра раздела
       может быть объявлена не там — например, на элементе, если тему
       нужно ограничить куском страницы. Тогда color-mix получает пустое
       значение, объявление отбрасывается целиком, и панель становится
       ПОЛНОСТЬЮ прозрачной: сквозь меню видно текст страницы. Ровно на
       этом и попались при сборке страницы-превью.

       saturate() в размытии обязателен: без него просвечивающий фон
       обесцвечивается и панель выглядит грязно-серой. */
    --ui-blur: blur(22px) saturate(165%);
    --ui-blur-sm: blur(14px) saturate(150%);

    /* Тайминги */
    --ui-t-fast: 0.12s ease;
    --ui-t: 0.18s ease;
    --ui-t-slow: 0.28s ease;

    /* Плотность контента */
    --ui-gap: 20px;
    --ui-pad-card: 22px 24px;
}

/* ===== БАЗА ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* Селектор без класса — так же, как было в style.css: страницы входа
   и лендинг не вешают на body классы разделов, но фон и шрифт им нужны */
body {
    font-family: var(--ui-font);
    background: var(--ui-bg);
    color: var(--ui-text);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
}

/* Цифры в интерфейсе выравниваются в колонку: суммы и счётчики
   читаются как в отчёте, а не пляшут по ширине символа */
.mf-stat-value, .df-stat-value,
.mf-data-table td, .df-data-table td,
.mf-week-table td, .df-week-table td {
    font-variant-numeric: tabular-nums;
}

::selection {
    background: var(--ui-accent-soft);
    color: var(--ui-text);
}

/* ===== ФОКУС =====
   Один видимый фокус на весь интерфейс — важно для клавиатуры */
:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}

/* ===== ССЫЛКА БЕЗ КЛАССА =====
   Служебные ссылки в тексте подсказок и ошибок ничем не оформлены и
   получали браузерный #0000EE — на тёмном фоне он нечитаем и выбивается
   из палитры. Селектор нарочно :not([class]): у оформленных ссылок
   (кнопки, пункты меню, карточки) цвет свой, трогать его нельзя. */
a:not([class]) {
    color: var(--ui-accent);
    text-decoration-color: color-mix(in srgb, var(--ui-accent) 45%, transparent);
    text-underline-offset: 2px;
    transition: color var(--ui-t);
}

a:not([class]):hover {
    color: var(--ui-accent-light);
    text-decoration-color: currentColor;
}

/* ============================================================
   ЛЕЙАУТ
   ============================================================ */
.mf-main,
.df-main {
    margin-left: 280px;
    min-height: 100vh;
    padding: 32px 40px 48px;
    transition: margin-left var(--ui-t);
    position: relative;
    z-index: 1;
}

.mf-main.expanded,
.df-main.expanded {
    margin-left: 0;
}

.mf-content,
.df-content {
    max-width: 1480px;
    margin: 0 auto;
}

/* ===== ЗАГОЛОВОК СТРАНИЦЫ =====
   Общая шапка для дашборда, каналов и всех остальных разделов:
   слева заголовок с подзаголовком, справа кнопки действий. */
.mf-dashboard-header,
.df-dashboard-header,
.mf-channels-header,
.df-channels-header,
.mf-page-header,
.df-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ui-border);
    animation: uiFadeInDown 0.45s ease;
}

.mf-dashboard-header h1,
.df-dashboard-header h1,
.mf-channels-header h1,
.df-channels-header h1,
.mf-page-header h1,
.df-page-header h1 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.15;
    background: var(--ui-grad-title);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Иконка заголовка — фирменная плитка, а не просто цветная буква */
.mf-dashboard-header h1 i,
.df-dashboard-header h1 i,
.mf-channels-header h1 i,
.df-channels-header h1 i,
.mf-page-header h1 i,
.df-page-header h1 i {
    -webkit-text-fill-color: var(--ui-accent);
    color: var(--ui-accent);
    font-size: 22px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius);
    background: var(--ui-accent-soft);
    border: 1px solid var(--ui-border-accent);
}

.mf-dashboard-header p,
.df-dashboard-header p,
.mf-channels-header p,
.df-channels-header p,
.mf-page-header p,
.df-page-header p {
    color: var(--ui-text-dim);
    font-size: 15px;
    margin-top: 6px;
}

.mf-header-actions,
.df-header-actions,
.mf-dashboard-actions,
.df-dashboard-actions,
.mf-channels-actions,
.df-channels-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@keyframes uiFadeInDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== ЗАГОЛОВОК СЕКЦИИ =====
   Внутри страницы: подпись с фирменной чертой слева. */
.mf-section-header,
.df-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
    flex-wrap: wrap;
}

.mf-section-header h2,
.df-section-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 750;
    color: var(--ui-text);
    letter-spacing: -0.3px;
    padding-left: 12px;
    border-left: 3px solid var(--ui-accent);
}

.mf-section-header h2 i,
.df-section-header h2 i {
    color: var(--ui-accent);
    font-size: 17px;
}

.mf-section-header p,
.df-section-header p {
    color: var(--ui-text-dim);
    font-size: 13.5px;
    margin-top: 4px;
}

/* ============================================================
   КАРТОЧКИ
   ============================================================ */
.mf-card,
.df-card,
.mf-panel,
.df-panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-pad-card);
    box-shadow: var(--ui-shadow-1), var(--ui-bevel);
}

.mf-card-head,
.df-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ui-border);
}

.mf-card-head h3,
.df-card-head h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ui-text);
}

.mf-card-head h3 i,
.df-card-head h3 i {
    color: var(--ui-accent);
}

/* ===== KPI-ПЛИТКИ =====
   Одна сетка на оба раздела: dashboard-stats и stat-grid — синонимы. */
.mf-dashboard-stats,
.df-dashboard-stats,
.mf-stat-grid,
.df-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--ui-gap);
    margin-bottom: 28px;
}

.mf-stat-card,
.df-stat-card,
.mf-stat-tile,
.df-stat-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 20px 22px;
    overflow: hidden;
    box-shadow: var(--ui-shadow-1), var(--ui-bevel);
    transition: transform var(--ui-t), border-color var(--ui-t), box-shadow var(--ui-t);
}

/* Плитки KPI ставим в колонку: иконка сверху, цифра крупно под ней */
.mf-stat-tile,
.df-stat-tile {
    display: block;
}

/* Фирменная черта по верхней грани — узнаваемый акцент раздела */
.mf-stat-card::after,
.df-stat-card::after,
.mf-stat-tile::after,
.df-stat-tile::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ui-grad-brand);
    opacity: 0;
    transition: opacity var(--ui-t);
}

.mf-stat-card:hover,
.df-stat-card:hover,
.mf-stat-tile:hover,
.df-stat-tile:hover {
    transform: translateY(-3px);
    border-color: var(--ui-border-accent);
    box-shadow: var(--ui-shadow-2), var(--ui-bevel);
}

.mf-stat-card:hover::after,
.df-stat-card:hover::after,
.mf-stat-tile:hover::after,
.df-stat-tile:hover::after {
    opacity: 1;
}

.mf-stat-icon,
.df-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--ui-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    background: var(--ui-accent-soft);
    border: 1px solid var(--ui-border-accent);
    color: var(--ui-accent);
    transition: all var(--ui-t);
}

.mf-stat-tile .mf-stat-icon,
.df-stat-tile .df-stat-icon {
    margin-bottom: 14px;
}

.mf-stat-content,
.df-stat-content {
    flex: 1;
    min-width: 0;
}

.mf-stat-label,
.df-stat-label {
    font-size: 11px;
    color: var(--ui-text-muted);
    margin-bottom: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.mf-stat-tile .mf-stat-label,
.df-stat-tile .df-stat-label {
    margin-bottom: 0;
    margin-top: 6px;
}

.mf-stat-value,
.df-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--ui-text);
    line-height: 1.15;
    letter-spacing: -0.6px;
    word-break: break-word;
}

.mf-stat-value .mf-currency,
.df-stat-value .df-currency {
    font-size: 15px;
    color: var(--ui-text-muted);
    font-weight: 500;
    margin-left: 6px;
}

.mf-stat-trend,
.df-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--ui-radius-pill);
}

.mf-stat-trend.up,   .df-stat-trend.up   { color: var(--ui-success); background: var(--ui-success-soft); }
.mf-stat-trend.down, .df-stat-trend.down { color: var(--ui-danger);  background: var(--ui-danger-soft); }
.mf-stat-trend.neutral,
.df-stat-trend.neutral { color: var(--ui-text-muted); background: rgba(128, 140, 160, 0.12); }

/* Смысловые варианты иконки плитки. Фирменный цвет — по умолчанию,
   остальные включаются только когда цвет что-то значит. */
.mf-stat-tile.accent-green  .mf-stat-icon, .df-stat-tile.accent-green  .df-stat-icon,
.mf-stat-card.accent-green  .mf-stat-icon, .df-stat-card.accent-green  .df-stat-icon {
    background: var(--ui-success-soft); color: var(--ui-success); border-color: transparent;
}
.mf-stat-tile.accent-red    .mf-stat-icon, .df-stat-tile.accent-red    .df-stat-icon,
.mf-stat-card.accent-red    .mf-stat-icon, .df-stat-card.accent-red    .df-stat-icon {
    background: var(--ui-danger-soft); color: var(--ui-danger); border-color: transparent;
}
.mf-stat-tile.accent-yellow .mf-stat-icon, .df-stat-tile.accent-yellow .df-stat-icon,
.mf-stat-card.accent-yellow .mf-stat-icon, .df-stat-card.accent-yellow .df-stat-icon {
    background: var(--ui-warning-soft); color: var(--ui-warning); border-color: transparent;
}
.mf-stat-tile.accent-blue   .mf-stat-icon, .df-stat-tile.accent-blue   .df-stat-icon,
.mf-stat-tile.accent-cyan   .mf-stat-icon, .df-stat-tile.accent-cyan   .df-stat-icon,
.mf-stat-tile.accent-pink   .mf-stat-icon, .df-stat-tile.accent-pink   .df-stat-icon {
    background: var(--ui-accent-2-soft); color: var(--ui-accent-2); border-color: transparent;
}

/* ===== КАРТОЧКА ГРАФИКА ===== */
.mf-chart-card,
.df-chart-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 22px 24px;
    margin-bottom: 22px;
    box-shadow: var(--ui-shadow-1), var(--ui-bevel);
}

.mf-chart-head,
.df-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.mf-chart-head h3,
.df-chart-head h3 {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ui-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mf-chart-head h3 i,
.df-chart-head h3 i {
    color: var(--ui-accent);
}

.mf-chart-canvas-wrap,
.df-chart-canvas-wrap {
    position: relative;
    height: 300px;
}

@media (max-width: 640px) {
    .mf-chart-canvas-wrap,
    .df-chart-canvas-wrap { height: 240px; }
}

/* ===== СЕГМЕНТИРОВАННЫЕ ВКЛАДКИ =====
   Общий контрол: вкладки графика, фильтры, диапазоны. */
.mf-chart-tabs, .df-chart-tabs,
.mf-segmented, .df-segmented,
.mf-filter-buttons, .df-filter-buttons {
    display: inline-flex;
    align-items: center;
    background: var(--ui-well);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: 4px;
    gap: 4px;
    flex-wrap: wrap;
}

.mf-chart-tabs button, .df-chart-tabs button,
.mf-segmented button, .df-segmented button,
.mf-filter-btn, .df-filter-btn {
    border: none;
    background: transparent;
    color: var(--ui-text-dim);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 7px 15px;
    border-radius: var(--ui-radius-xs);
    cursor: pointer;
    transition: all var(--ui-t-fast);
    white-space: nowrap;
}

.mf-chart-tabs button:hover, .df-chart-tabs button:hover,
.mf-segmented button:hover, .df-segmented button:hover,
.mf-filter-btn:hover, .df-filter-btn:hover {
    color: var(--ui-text);
    background: var(--ui-surface-2);
}

.mf-chart-tabs button.active, .df-chart-tabs button.active,
.mf-segmented button.active, .df-segmented button.active,
.mf-filter-btn.active, .df-filter-btn.active {
    background: var(--ui-accent);
    color: var(--ui-on-accent);
    box-shadow: var(--ui-shadow-1);
}

/* ============================================================
   КНОПКИ
   ============================================================ */
.mf-btn,
.df-btn,
.vk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: var(--ui-control-h);
    padding: 0 22px;
    border-radius: var(--ui-radius);
    font-family: inherit;
    font-weight: 650;
    font-size: 14.5px;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--ui-t-fast), background var(--ui-t-fast),
                border-color var(--ui-t-fast), box-shadow var(--ui-t-fast), color var(--ui-t-fast);
}

.mf-btn:active,
.df-btn:active,
.vk-btn:active {
    transform: translateY(1px);
}

.mf-btn:disabled,
.df-btn:disabled,
.vk-btn:disabled,
.mf-btn.disabled,
.df-btn.disabled,
.vk-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* Главное действие — фирменная заливка раздела */
.mf-btn-primary,
.df-btn-primary,
.vk-btn-primary {
    background: var(--ui-grad-brand);
    color: var(--ui-on-accent);
    border-color: var(--ui-border-accent);
    box-shadow: var(--ui-shadow-1);
}

.mf-btn-primary:hover,
.df-btn-primary:hover,
.vk-btn-primary:hover {
    box-shadow: 0 8px 22px -10px var(--ui-accent-ring), var(--ui-shadow-1);
    filter: brightness(1.06);
}

/* Второстепенное — стеклянная плашка в тон поверхности */
.mf-btn-secondary,
.df-btn-secondary,
.vk-btn-secondary {
    background: var(--ui-surface-2);
    color: var(--ui-text);
    border-color: var(--ui-border-strong);
}

.mf-btn-secondary:hover,
.df-btn-secondary:hover,
.vk-btn-secondary:hover {
    border-color: var(--ui-border-accent);
    background: var(--ui-accent-soft);
    color: var(--ui-text);
}

/* Призрачная — для действий в плотных списках */
.mf-btn-ghost,
.df-btn-ghost,
.vk-btn-ghost {
    background: transparent;
    color: var(--ui-text-dim);
    border-color: var(--ui-border);
}

.mf-btn-ghost:hover,
.df-btn-ghost:hover,
.vk-btn-ghost:hover {
    color: var(--ui-text);
    border-color: var(--ui-border-strong);
    background: var(--ui-surface-2);
}

/* Семантические — цвет здесь несёт смысл, а не украшает */
.mf-btn-success, .df-btn-success, .vk-btn-success {
    background: var(--ui-success);
    color: #08130d;
    border-color: transparent;
}

.mf-btn-danger, .df-btn-danger, .vk-btn-danger {
    background: var(--ui-danger);
    color: #1a0707;
    border-color: transparent;
}

.mf-btn-warning, .df-btn-warning, .vk-btn-warning {
    background: var(--ui-warning);
    color: #17100a;
    border-color: transparent;
}

.mf-btn-success:hover, .df-btn-success:hover, .vk-btn-success:hover,
.mf-btn-danger:hover,  .df-btn-danger:hover,  .vk-btn-danger:hover,
.mf-btn-warning:hover, .df-btn-warning:hover, .vk-btn-warning:hover {
    filter: brightness(1.08);
}

/* Размеры */
.mf-btn-sm, .df-btn-sm, .vk-btn-sm {
    min-height: var(--ui-control-h-sm);
    padding: 0 14px;
    font-size: 13px;
    gap: 7px;
    border-radius: var(--ui-radius-sm);
}

.mf-btn-lg, .df-btn-lg, .vk-btn-lg {
    min-height: var(--ui-control-h-lg);
    padding: 0 32px;
    font-size: 16px;
}

.mf-btn-block, .df-btn-block {
    display: flex;
    width: 100%;
}

/* Круглая кнопка-иконка */
.mf-btn-icon, .df-btn-icon {
    padding: 0;
    width: var(--ui-control-h-sm);
    min-height: var(--ui-control-h-sm);
    border-radius: var(--ui-radius-sm);
}

/* ============================================================
   ФОРМЫ И ПОЛЯ ВВОДА
   ============================================================ */
.mf-form-group,
.df-form-group {
    margin-bottom: 18px;
}

.mf-form-row,
.df-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.mf-form-group label,
.df-form-group label,
.mf-label,
.df-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ui-text-dim);
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.mf-form-hint,
.df-form-hint {
    font-size: 12px;
    color: var(--ui-text-muted);
    margin-top: 6px;
    line-height: 1.5;
}

/* Поля. !important сохранён: в шаблонах много локальных стилей,
   без него поля на разных страницах снова разъедутся. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]),
textarea,
select {
    width: 100%;
    min-height: var(--ui-control-h) !important;
    background: var(--ui-well) !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius) !important;
    padding: 11px 15px !important;
    color: var(--ui-text) !important;
    font-size: 14.5px !important;
    font-family: inherit;
    transition: border-color var(--ui-t-fast), box-shadow var(--ui-t-fast), background var(--ui-t-fast);
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

input:hover:not(:focus):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea:hover:not(:focus),
select:hover:not(:focus) {
    border-color: var(--ui-border-accent) !important;
}

input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--ui-accent) !important;
    box-shadow: 0 0 0 3px var(--ui-accent-ring) !important;
    background: var(--ui-surface-2) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--ui-text-muted) !important;
    opacity: 1;
}

input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b97a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
    padding-right: 42px !important;
    cursor: pointer;
}

select option {
    background: var(--ui-surface);
    color: var(--ui-text);
}

textarea {
    resize: vertical;
    min-height: 110px !important;
    font-family: var(--ui-font-mono);
    font-size: 13.5px !important;
    line-height: 1.6;
}

input[type="time"],
input[type="date"],
input[type="datetime-local"] {
    color-scheme: dark;
}

input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.65);
    cursor: pointer;
}

/* Загрузка файла — пунктирная зона, общая для обоих разделов */
input[type="file"] {
    width: 100%;
    background: var(--ui-well) !important;
    border: 1px dashed var(--ui-border-strong) !important;
    border-radius: var(--ui-radius) !important;
    padding: 20px !important;
    color: var(--ui-text-dim) !important;
    font-size: 13.5px !important;
    cursor: pointer;
    transition: border-color var(--ui-t-fast), background var(--ui-t-fast);
}

input[type="file"]:hover {
    border-color: var(--ui-accent) !important;
    background: var(--ui-accent-soft) !important;
}

input[type="range"] {
    accent-color: var(--ui-accent);
}

/* Ошибка валидации */
.mf-form-control.error, .df-form-control.error,
input.error, textarea.error, select.error {
    border-color: var(--ui-danger) !important;
    box-shadow: 0 0 0 3px var(--ui-danger-soft) !important;
}

.mf-form-error, .df-form-error {
    color: var(--ui-danger);
    font-size: 12.5px;
    margin-top: 6px;
}

/* Поле с иконкой слева */
.mf-input-icon, .df-input-icon {
    position: relative;
}

.mf-input-icon > i, .df-input-icon > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-text-muted);
    pointer-events: none;
    font-size: 14px;
}

.mf-input-icon input, .df-input-icon input {
    padding-left: 40px !important;
}

/* ===== ТОГГЛЫ ===== */
.mf-toggle-wrap,
.df-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.mf-toggle,
.df-toggle {
    position: relative;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
}

.mf-toggle input,
.df-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mf-toggle .mf-toggle-slider,
.df-toggle .df-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--ui-well);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-pill);
    transition: all var(--ui-t-fast);
}

.mf-toggle .mf-toggle-slider::before,
.df-toggle .df-toggle-slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--ui-text-muted);
    border-radius: 50%;
    transition: all var(--ui-t-fast);
}

.mf-toggle input:checked + .mf-toggle-slider,
.df-toggle input:checked + .df-toggle-slider {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
}

.mf-toggle input:checked + .mf-toggle-slider::before,
.df-toggle input:checked + .df-toggle-slider::before {
    transform: translateX(20px);
    background: var(--ui-on-accent);
}

.mf-toggle input:focus-visible + .mf-toggle-slider,
.df-toggle input:focus-visible + .df-toggle-slider {
    box-shadow: 0 0 0 3px var(--ui-accent-ring);
}

.mf-toggle-label,
.df-toggle-label {
    font-size: 14px;
    color: var(--ui-text-dim);
}

/* ===== РАДИО И ЧЕКБОКСЫ =====
   Карточка-переключатель: активный вариант подсвечивается рамкой,
   а не заливается — так видно, что это выбор, а не кнопка. */
.mf-radio-group,
.df-radio-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.mf-radio-label,
.df-radio-label,
.mf-check-label,
.df-check-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: var(--ui-control-h-sm);
    padding: 8px 15px;
    background: var(--ui-well);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    cursor: pointer;
    transition: all var(--ui-t-fast);
    font-size: 13.5px;
    color: var(--ui-text-dim);
}

.mf-radio-label:hover,
.df-radio-label:hover,
.mf-check-label:hover,
.df-check-label:hover {
    border-color: var(--ui-border-accent);
    color: var(--ui-text);
}

.mf-radio-label input,
.df-radio-label input,
.mf-check-label input,
.df-check-label input {
    accent-color: var(--ui-accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.mf-radio-label:has(input:checked),
.df-radio-label:has(input:checked),
.mf-check-label:has(input:checked),
.df-check-label:has(input:checked) {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
    color: var(--ui-text);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--ui-accent);
}

/* ===== ВРЕМЕННЫЕ ДИАПАЗОНЫ ===== */
.mf-time-range,
.df-time-range {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mf-time-range .mf-form-control,
.df-time-range .df-form-control {
    flex: 1;
}

@media (max-width: 768px) {
    .mf-time-range,
    .df-time-range { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   МОДАЛЬНЫЕ ОКНА
   ============================================================ */
.mf-modal-overlay,
.df-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 10, 0.72);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: uiFadeIn 0.2s ease;
}

.mf-modal-overlay.show,
.df-modal-overlay.show,
.mf-modal-overlay.active,
.df-modal-overlay.active {
    display: flex;
}

@keyframes uiFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.mf-modal,
.df-modal {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--ui-shadow-3);
    animation: uiModalIn 0.22s ease;
}

@keyframes uiModalIn {
    from { transform: translateY(10px) scale(0.985); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.mf-modal-header,
.df-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ui-border);
    position: sticky;
    top: 0;
    background: var(--ui-surface);
    z-index: 2;
}

.mf-modal-header h3,
.df-modal-header h3 {
    font-size: 18px;
    font-weight: 750;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ui-text);
}

.mf-modal-header h3 i,
.df-modal-header h3 i {
    color: var(--ui-accent);
}

.mf-modal-close,
.df-modal-close {
    background: var(--ui-well);
    border: 1px solid var(--ui-border);
    color: var(--ui-text-dim);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: all var(--ui-t-fast);
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--ui-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mf-modal-close:hover,
.df-modal-close:hover {
    background: var(--ui-danger-soft);
    border-color: var(--ui-danger);
    color: var(--ui-danger);
}

.mf-modal-body,
.df-modal-body {
    padding: 24px;
}

.mf-modal-footer,
.df-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--ui-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.mf-modal-sm, .df-modal-sm { max-width: 420px; }
.mf-modal-md, .df-modal-md { max-width: 550px; }
.mf-modal-lg, .df-modal-lg { max-width: 850px; }

/* Кнопки модалки — те же, что и везде */
.modal-cancel, .mf-modal-cancel, .df-modal-cancel,
.modal-save, .mf-modal-save, .df-modal-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--ui-control-h-sm);
    padding: 0 20px;
    border-radius: var(--ui-radius);
    font-family: inherit;
    font-weight: 650;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--ui-t-fast);
}

.modal-cancel {
    background: var(--ui-surface-2);
    color: var(--ui-text-dim);
    border-color: var(--ui-border-strong);
}

.modal-cancel:hover {
    color: var(--ui-text);
    border-color: var(--ui-border-accent);
}

.modal-save {
    background: var(--ui-grad-brand);
    color: var(--ui-on-accent);
}

.modal-save:hover {
    filter: brightness(1.06);
}

/* ============================================================
   БЭЙДЖИ
   ============================================================ */
.mf-badge,
.df-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--ui-radius-pill);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    border: 1px solid var(--ui-border-accent);
    white-space: nowrap;
}

.mf-badge-purple, .df-badge-purple,
.mf-badge-accent, .df-badge-accent,
.mf-badge-green,  .df-badge-green {
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    border-color: var(--ui-border-accent);
}

.mf-badge-success, .df-badge-success {
    background: var(--ui-success-soft); color: var(--ui-success); border-color: transparent;
}
.mf-badge-red, .df-badge-red,
.mf-badge-danger, .df-badge-danger {
    background: var(--ui-danger-soft); color: var(--ui-danger); border-color: transparent;
}
.mf-badge-yellow, .df-badge-yellow,
.mf-badge-warning, .df-badge-warning {
    background: var(--ui-warning-soft); color: var(--ui-warning); border-color: transparent;
}
.mf-badge-blue, .df-badge-blue,
.mf-badge-cyan, .df-badge-cyan,
.mf-badge-pink, .df-badge-pink,
.mf-badge-info, .df-badge-info {
    background: var(--ui-accent-2-soft); color: var(--ui-accent-2); border-color: transparent;
}

.mf-badge-muted, .df-badge-muted {
    background: var(--ui-well); color: var(--ui-text-muted); border-color: var(--ui-border);
}

/* Точка статуса */
.mf-dot, .df-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    background: currentColor;
}

/* ============================================================
   УВЕДОМЛЕНИЯ (ТОСТЫ)
   ============================================================ */
.mf-notification-container,
.df-notification-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    width: 100%;
    pointer-events: none;
}

.mf-notification,
.df-notification {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-left: 3px solid var(--ui-accent);
    padding: 14px 18px;
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-3);
    color: var(--ui-text);
    font-size: 14px;
    font-weight: 500;
    animation: uiToastIn 0.25s ease;
    display: flex;
    align-items: center;
    gap: 11px;
    pointer-events: auto;
}

@keyframes uiToastIn {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.mf-notif-icon,
.df-notif-icon {
    font-size: 17px;
    flex-shrink: 0;
    color: var(--ui-accent);
}

.mf-notification.success, .df-notification.success { border-left-color: var(--ui-success); }
.mf-notification.success .mf-notif-icon,
.df-notification.success .df-notif-icon { color: var(--ui-success); }

.mf-notification.error, .df-notification.error { border-left-color: var(--ui-danger); }
.mf-notification.error .mf-notif-icon,
.df-notification.error .df-notif-icon { color: var(--ui-danger); }

.mf-notification.warning, .df-notification.warning { border-left-color: var(--ui-warning); }
.mf-notification.warning .mf-notif-icon,
.df-notification.warning .df-notif-icon { color: var(--ui-warning); }

.mf-notification.info, .df-notification.info { border-left-color: var(--ui-accent); }

.mf-notification.hide,
.df-notification.hide {
    animation: uiToastOut 0.22s ease forwards;
}

@keyframes uiToastOut {
    to { transform: translateX(110%); opacity: 0; }
}

/* ============================================================
   ТАБЛИЦЫ
   ============================================================ */
.mf-table-wrapper,
.df-table-wrapper {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    overflow: hidden;
    box-shadow: var(--ui-shadow-1), var(--ui-bevel);
}

.mf-table-header,
.df-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--ui-border);
    flex-wrap: wrap;
    gap: 14px;
}

.mf-table-header h2,
.df-table-header h2 {
    font-size: 17px;
    font-weight: 750;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ui-text);
}

.mf-table-header h2 i,
.df-table-header h2 i {
    color: var(--ui-accent);
}

/* Таблица на телефоне прокручивается внутри себя, а не ломает страницу */
.mf-table-scroll,
.df-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mf-data-table,
.df-data-table {
    width: 100%;
    border-collapse: collapse;
}

.mf-data-table thead,
.df-data-table thead {
    background: var(--ui-well);
}

.mf-data-table th,
.df-data-table th {
    padding: 13px 18px;
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--ui-text-muted);
    font-weight: 700;
    border-bottom: 1px solid var(--ui-border);
    white-space: nowrap;
}

.mf-data-table td,
.df-data-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text-dim);
    font-size: 14px;
}

.mf-data-table tbody tr,
.df-data-table tbody tr {
    transition: background var(--ui-t-fast);
}

.mf-data-table tbody tr:hover,
.df-data-table tbody tr:hover {
    background: var(--ui-accent-soft);
}

.mf-data-table tbody tr:last-child td,
.df-data-table tbody tr:last-child td {
    border-bottom: none;
}

/* ============================================================
   ПУСТЫЕ СОСТОЯНИЯ
   ============================================================ */
.mf-empty-state,
.df-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 24px;
    background: var(--ui-surface);
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-lg);
}

.mf-empty-state i,
.df-empty-state i {
    font-size: 44px;
    color: var(--ui-text-muted);
    margin-bottom: 16px;
    opacity: 0.5;
    display: block;
}

.mf-empty-state h3,
.df-empty-state h3 {
    font-size: 19px;
    color: var(--ui-text);
    margin-bottom: 8px;
    font-weight: 700;
}

.mf-empty-state p,
.df-empty-state p {
    color: var(--ui-text-muted);
    font-size: 14.5px;
}

/* ============================================================
   СТРАНИЦА ВХОДА
   Раньше входы Micraffin и DarkFin были двумя разными страницами
   с собственной вёрсткой. Теперь это одна вёрстка: отличаются
   только логотип, подписи и — через токены — фирменный цвет.
   ============================================================ */
body.ui-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
    position: relative;
}

/* Мягкое фирменное свечение по углам — единственный декор страницы */
body.ui-auth::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, var(--ui-accent-soft) 0%, transparent 45%),
        radial-gradient(circle at 82% 78%, var(--ui-accent-2-soft) 0%, transparent 45%);
    pointer-events: none;
    z-index: 0;
}

.ui-auth-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xl);
    padding: 34px 30px;
    box-shadow: var(--ui-shadow-3), var(--ui-bevel);
}

.ui-auth-head {
    text-align: center;
    margin-bottom: 26px;
}

/* Фирменная плитка с логотипом — одинаковая форма в обоих разделах */
.ui-auth-mark {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: var(--ui-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: var(--ui-accent-soft);
    border: 1px solid var(--ui-border-accent);
    color: var(--ui-accent);
}

.ui-auth-mark img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.ui-auth-head h1 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--ui-grad-title);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ui-auth-head p {
    color: var(--ui-text-muted);
    font-size: 13.5px;
    margin-top: 5px;
}

/* Сообщения над формой: ошибка и информационная подсказка */
.ui-auth-msg {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    border-radius: var(--ui-radius);
    font-size: 13.5px;
    margin-bottom: 16px;
}

.ui-auth-msg.error {
    background: var(--ui-danger-soft);
    color: var(--ui-danger);
}

.ui-auth-msg.info {
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
}

.ui-auth-footer {
    text-align: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
    font-size: 12.5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ui-auth-footer a {
    color: var(--ui-text-dim);
    text-decoration: none;
    transition: color var(--ui-t-fast);
}

.ui-auth-footer a:hover {
    color: var(--ui-accent);
}

/* Пасхалка на входе Micraffin: видна, только если приглядеться */
.ui-auth-hint {
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.07);
    user-select: none;
    cursor: default;
    transition: color var(--ui-t);
}

.ui-auth-hint:hover {
    color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 480px) {
    .ui-auth-box { padding: 26px 20px; }
}

/* ============================================================
   КАРТОЧКИ КАНАЛОВ
   Страница есть в обоих разделах и выглядела по-разному —
   теперь это одна вёрстка на два префикса.
   ============================================================ */
.mf-channels-grid,
.df-channels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--ui-gap);
}

.mf-channel-card,
.df-channel-card {
    position: relative;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 22px;
    overflow: hidden;
    box-shadow: var(--ui-shadow-1), var(--ui-bevel);
    transition: transform var(--ui-t), border-color var(--ui-t), box-shadow var(--ui-t);
}

.mf-channel-card:hover,
.df-channel-card:hover {
    transform: translateY(-3px);
    border-color: var(--ui-border-accent);
    box-shadow: var(--ui-shadow-2), var(--ui-bevel);
}

.mf-channel-status,
.df-channel-status {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--ui-radius-pill);
}

.mf-channel-status.active,
.df-channel-status.active {
    background: var(--ui-success-soft);
    color: var(--ui-success);
}

.mf-channel-status.inactive,
.df-channel-status.inactive {
    background: var(--ui-danger-soft);
    color: var(--ui-danger);
}

.mf-channel-name,
.df-channel-name {
    font-size: 19px;
    font-weight: 750;
    color: var(--ui-text);
    margin-bottom: 5px;
    padding-right: 96px;
    letter-spacing: -0.3px;
}

.mf-channel-username,
.df-channel-username {
    font-size: 13.5px;
    color: var(--ui-text-muted);
    margin-bottom: 16px;
}

.mf-channel-username i,
.df-channel-username i {
    margin-right: 6px;
    color: var(--ui-accent);
}

.mf-channel-meta,
.df-channel-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
    margin-bottom: 16px;
}

.mf-channel-meta-item,
.df-channel-meta-item {
    display: flex;
    flex-direction: column;
}

.mf-channel-meta-item .mf-label,
.df-channel-meta-item .df-label {
    font-size: 10.5px;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
    margin-bottom: 0;
}

.mf-channel-meta-item .mf-value,
.df-channel-meta-item .df-value {
    font-size: 17px;
    font-weight: 750;
    color: var(--ui-text);
}

.mf-channel-actions,
.df-channel-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================
   КАРТОЧКА СРАВНЕНИЯ И ПРОГРЕСС-БАРЫ
   ============================================================ */
.mf-compare-card,
.df-compare-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 20px 22px;
    box-shadow: var(--ui-shadow-1), var(--ui-bevel);
    transition: border-color var(--ui-t), box-shadow var(--ui-t);
}

.mf-compare-card:hover,
.df-compare-card:hover {
    border-color: var(--ui-border-accent);
    box-shadow: var(--ui-shadow-2), var(--ui-bevel);
}

.mf-compare-head,
.df-compare-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--ui-border);
}

.mf-compare-avatar,
.df-compare-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--ui-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    background: var(--ui-grad-brand);
    color: var(--ui-on-accent);
    flex-shrink: 0;
}

.mf-compare-name,
.df-compare-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ui-text);
}

.mf-compare-role,
.df-compare-role {
    font-size: 11.5px;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mf-progress-row,
.df-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    margin-bottom: 6px;
}

.mf-progress-row .mf-progress-label,
.df-progress-row .df-progress-label {
    color: var(--ui-text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
}

.mf-progress-row .mf-progress-value,
.df-progress-row .df-progress-value {
    color: var(--ui-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mf-progress-track,
.df-progress-track {
    height: 7px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-well);
    overflow: hidden;
    margin-bottom: 14px;
}

.mf-progress-fill,
.df-progress-fill {
    height: 100%;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-grad-brand);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   СКРОЛЛБАР
   ============================================================ */
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--ui-border-strong);
    border-radius: var(--ui-radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ui-accent);
    background-clip: padding-box;
}

/* ============================================================
   УТИЛИТЫ
   ============================================================ */
.mf-text-muted, .df-text-muted { color: var(--ui-text-muted); }
.mf-text-center, .df-text-center { text-align: center; }
.mf-text-accent, .df-text-accent { color: var(--ui-accent); }
.mf-text-success, .df-text-success { color: var(--ui-success); }
.mf-text-danger, .df-text-danger { color: var(--ui-danger); }

.mf-mt-20, .df-mt-20 { margin-top: 20px; }
.mf-mb-20, .df-mb-20 { margin-bottom: 20px; }
.mf-mt-32, .df-mt-32 { margin-top: 32px; }
.mf-mb-32, .df-mb-32 { margin-bottom: 32px; }

.mf-flex, .df-flex { display: flex; }
.mf-flex-center, .df-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.mf-gap-10, .df-gap-10 { gap: 10px; }
.mf-gap-20, .df-gap-20 { gap: 20px; }
.mf-gap-32, .df-gap-32 { gap: 32px; }

.mf-null-value, .df-null-value {
    color: var(--ui-text-muted);
    font-style: italic;
    font-size: 12px;
}

.mf-editable-cell, .df-editable-cell {
    cursor: pointer;
    transition: background var(--ui-t-fast);
    padding: 5px 9px;
    border-radius: var(--ui-radius-xs);
}

.mf-editable-cell:hover, .df-editable-cell:hover {
    background: var(--ui-accent-soft);
}

.mf-editable-cell.changed, .df-editable-cell.changed {
    background: var(--ui-warning-soft);
    border-left: 2px solid var(--ui-warning);
}

.mf-loading-spinner, .df-loading-spinner {
    text-align: center;
    padding: 48px;
    color: var(--ui-text-muted);
}

.mf-loading-spinner i, .df-loading-spinner i {
    font-size: 28px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   АДАПТИВНОСТЬ КОМПОНЕНТОВ
   Панель (сайдбар, нижнее меню) настраивается в файлах разделов —
   здесь только про содержимое страницы.
   ============================================================ */
@media (max-width: 768px) {
    .mf-main,
    .df-main {
        margin-left: 0;
        padding: 24px 16px 100px;
    }

    .mf-dashboard-header h1, .df-dashboard-header h1,
    .mf-channels-header h1, .df-channels-header h1,
    .mf-page-header h1, .df-page-header h1 {
        font-size: 25px;
    }

    .mf-dashboard-header h1 i, .df-dashboard-header h1 i,
    .mf-channels-header h1 i, .df-channels-header h1 i,
    .mf-page-header h1 i, .df-page-header h1 i {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .mf-dashboard-stats, .df-dashboard-stats,
    .mf-stat-grid, .df-stat-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .mf-notification-container,
    .df-notification-container {
        top: 70px;
        right: 12px;
        max-width: calc(100% - 24px);
    }

    .mf-modal, .df-modal {
        max-width: 100%;
        border-radius: var(--ui-radius-lg);
    }

    .mf-modal-body, .df-modal-body { padding: 18px; }
    .mf-modal-header, .df-modal-header { padding: 16px 18px; }
    .mf-modal-footer, .df-modal-footer { padding: 14px 18px; }

    .mf-modal-footer .mf-btn, .df-modal-footer .df-btn,
    .mf-modal-footer .modal-cancel, .mf-modal-footer .modal-save {
        flex: 1;
    }

    .mf-table-header, .df-table-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .mf-card, .df-card,
    .mf-chart-card, .df-chart-card {
        padding: 18px 16px;
    }
}

@media (max-width: 480px) {
    .mf-dashboard-header h1, .df-dashboard-header h1,
    .mf-channels-header h1, .df-channels-header h1 {
        font-size: 22px;
    }

    .mf-stat-value, .df-stat-value { font-size: 24px; }

    .mf-data-table th, .df-data-table th,
    .mf-data-table td, .df-data-table td {
        padding: 11px 12px;
        font-size: 12.5px;
    }

    .mf-btn, .df-btn { width: 100%; }
    .mf-btn-sm, .df-btn-sm,
    .mf-btn-icon, .df-btn-icon { width: auto; }
}

/* Анимации отключаются, если система просит покоя */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   ОТДЕЛКА
   ============================================================

   Слой поверх базовых правил кита. Вынесен в конец нарочно: правила
   выше описывают, ЧЕМ элемент является (карточка, поле, строка
   таблицы), а этот блок — как он выглядит вблизи. Такую отделку
   переделывают чаще всего, и держать её одним куском дешевле, чем
   искать по всему файлу.

   Всё построено на токенах, поэтому смена палитры раздела
   перекрашивает отделку вместе с остальным интерфейсом.
   ============================================================ */

/* ===== ПОВЕРХНОСТИ =====
   Плоская заливка на большой карточке выглядит как вырезанный
   прямоугольник. Едва заметный вертикальный градиент (сверху светлее
   на 4%) даёт объём: карточка «ловит свет» сверху, как физический
   предмет. Разница на глаз почти неразличима, но пропадёт — интерфейс
   сразу станет картонным. */
.mf-card, .df-card,
.mf-panel, .df-panel,
.mf-table-wrapper, .df-table-wrapper,
.mf-stat-card, .df-stat-card,
.mf-stat-tile, .df-stat-tile {
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--ui-surface-2) 45%, transparent) 0%,
        transparent 42%);
    background-color: var(--ui-surface);
}

/* Фирменная нить по верхней грани карточки. У KPI-плиток она уже есть
   и появляется при наведении; у обычной карточки — постоянная, но
   короткая (72px) и приглушённая: метка раздела, а не украшение. */
.mf-card, .df-card,
.mf-panel, .df-panel {
    position: relative;
}

.mf-card::before, .df-card::before,
.mf-panel::before, .df-panel::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 22px;
    width: 72px;
    height: 2px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-grad-brand);
    opacity: 0.55;
    pointer-events: none;
}

/* ===== ЗАГОЛОВКИ =====
   Крупный кегль требует более плотного трекинга, иначе заголовок
   рассыпается на буквы. Мелкие подписи — наоборот, разрежены. */
.mf-card-head h3, .df-card-head h3,
.mf-table-header h2, .df-table-header h2 {
    letter-spacing: -0.2px;
}

/* ===== ПОЛЯ ВВОДА =====
   Фокус даёт мягкое фирменное кольцо вместо системной обводки: поле
   подсвечивается целиком и видно даже боковым зрением. !important —
   потому что базовые правила полей выше тоже помечены им. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):focus,
textarea:focus,
select:focus {
    border-color: var(--ui-accent) !important;
    box-shadow: 0 0 0 3px var(--ui-accent-soft),
                inset 0 1px 2px rgba(0, 0, 0, 0.35) !important;
    outline: none !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):hover:not(:focus),
textarea:hover:not(:focus),
select:hover:not(:focus) {
    border-color: var(--ui-border-accent) !important;
}

::placeholder {
    color: var(--ui-text-muted);
    opacity: 1;
}

/* ===== ТАБЛИЦЫ =====
   Строка подсвечивается фирменным тоном при наведении — глазу проще
   вести взгляд по широкой строке, не теряя её. У последней строки
   нижняя граница убрана: она дублировала бы край карточки. */
.mf-data-table tbody tr, .df-data-table tbody tr {
    transition: background var(--ui-t-fast);
}

.mf-data-table tbody tr:hover, .df-data-table tbody tr:hover {
    background: color-mix(in srgb, var(--ui-accent) 6%, transparent);
}

.mf-data-table tbody tr:last-child td, .df-data-table tbody tr:last-child td {
    border-bottom: none;
}

/* ===== КНОПКИ =====
   Заливка берётся из --ui-grad-cta, а не из --ui-grad-brand: на кнопке
   поверх лежит мелкая подпись, и фирменный градиент под неё не годится
   по контрасту (подробности — в комментарии у токена в палитре).
   Запасное значение оставлено на случай, если раздел токен не объявил. */
.mf-btn-primary, .df-btn-primary, .vk-btn-primary {
    background: var(--ui-grad-cta, var(--ui-grad-brand));
}

/* Главная кнопка приподнимается на 1px и получает фирменное свечение —
   отклик на наведение, который читается без анимации цвета. */
.mf-btn-primary:hover, .df-btn-primary:hover, .vk-btn-primary:hover {
    transform: translateY(-1px);
}

/* ===== БЭЙДЖИ =====
   Заглавные буквы и разрядка: бэйдж — это метка, он не должен
   читаться как обычный текст рядом. */
.mf-badge, .df-badge {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10.5px;
}

/* ===== СКРОЛЛБАР =====
   Ползунок в фирменном тоне: на тёмном фоне серый выглядит как
   случайная деталь браузера. */
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ui-accent) 38%, transparent);
}

/* Firefox отдельным свойством — тонкая полоса того же тона */
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ui-accent) 38%, transparent) transparent;
}

/* ===== ВЫДЕЛЕНИЕ ТЕКСТА ===== */
::selection {
    background: color-mix(in srgb, var(--ui-accent) 32%, transparent);
    color: var(--ui-text);
}

/* ===== СТЕКЛО ПЛАВАЮЩИХ ЭЛЕМЕНТОВ =====
   Модалка, тост и затемнение под модалкой. Всё, что всплывает поверх
   страницы, получает ту же полупрозрачную подложку, что и панели, —
   тогда «всплыло» читается само собой, без лишних теней и рамок.

   Модалке и тосту достаётся плотное стекло (--ui-glass-strong): под
   ними лежит текст и поля ввода, просвет там мешает читать. Затемнение
   под модалкой, наоборот, тонируется фирменным цветом — почти
   незаметно, но страница за ним перестаёт быть «просто серой». */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mf-modal, .df-modal,
    .mf-notification, .df-notification {
        background: color-mix(in srgb, var(--ui-surface) 88%, transparent);
        -webkit-backdrop-filter: var(--ui-blur);
        backdrop-filter: var(--ui-blur);
    }

    .mf-modal-overlay, .df-modal-overlay,
    .mf-overlay, .df-overlay {
        background: color-mix(in srgb, var(--ui-accent) 7%, rgba(4, 3, 6, 0.68));
        -webkit-backdrop-filter: blur(10px) saturate(130%);
        backdrop-filter: blur(10px) saturate(130%);
    }

    /* Заголовок таблицы прилипает к верху при прокрутке длинного списка
       и не даёт строкам «уехать» под безымянные колонки. */
    .mf-data-table thead th, .df-data-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: color-mix(in srgb, var(--ui-surface) 88%, transparent);
        -webkit-backdrop-filter: var(--ui-blur-sm);
        backdrop-filter: var(--ui-blur-sm);
    }
}