/* =====================================================================
   Asora — Aurora Design System
   Единая система токенов, кнопок, бейджей, скроллбара, focus-ring.
   Файл подгружается ПОСЛЕДНИМ → перекрывает наследие. Структура UI не
   меняется, разметка не правится.
   ===================================================================== */

/* === FONT SHRINK -1px === */
html { font-size: 15px; }
body { font-size: 14px; }

/* ---- Шрифт заголовков (плотнее, чуть «дороже») ------------------------ */
.h1, .h2, .h3, h1, h2, h3,
.aio-heading, .auth-logo h1, .logo-text {
    letter-spacing: -0.01em;
}

/* ===========================================================
   КАНОНИЧЕСКАЯ ТИПОГРАФИКА МОДУЛЯ
   Все заголовки модуля и подзаголовки рендерятся одинаково,
   независимо от того, какой устаревший класс использован
   в шаблоне (.mod-h1 / .asst-h1 / .enh-h1 / .vidg-h1 /
   .page-header h2 / .page-header h1 / .proj-title).
   Менять размеры/начертания ТОЛЬКО здесь.
   =========================================================== */
.mod-h1,
.asst-h1,
.enh-h1,
.vidg-h1,
.proj-title,
.page-header h1,
.page-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 .35rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    word-break: break-word;
    letter-spacing: -0.01em;
}
.mod-h1 i,
.asst-h1 i,
.enh-h1 i,
.vidg-h1 i,
.proj-title i,
.page-header h1 i,
.page-header h2 i {
    color: var(--accent-solid, var(--neon-primary));
    margin-right: 0;
}
@media (max-width: 768px) {
    .mod-h1, .asst-h1, .enh-h1, .vidg-h1, .proj-title,
    .page-header h1, .page-header h2 { font-size: 1.3rem; }
}

.mod-sub,
.asst-sub,
.enh-sub,
.vidg-sub,
.page-sub,
.page-subtitle {
    color: var(--text-muted, var(--text-secondary));
    margin: 0;
    max-width: 760px;
    line-height: 1.5;
}

.mod-hero,
.asst-hero,
.enh-hero,
.vidg-hero,
.page-header {
    margin: 0 0 1.5rem;
}
/* .asst-hero и .page-header сохраняют свой flex-режим (заголовок слева, действие справа) */
.asst-hero, .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---- Глобальный focus-ring ------------------------------------------- */
*:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
    border-color: var(--accent-solid) !important;
}
/* На градиентных кнопках — только ring, без подсветки border (иначе фиолетовая линия по периметру поверх градиента) */
.btn-primary:focus-visible,
.btn-neon:focus-visible,
.aio-btn--primary:focus-visible {
    border-color: transparent !important;
}

/* ===========================================================
   BUTTONS — единая система во всех модулях
   =========================================================== */

/* Базовая кнопка (применяется к Bootstrap .btn автоматически) */
.btn,
.aio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--btn-h-md);
    padding: 0 var(--btn-px-md);
    font-family: 'Onest', 'Inter', sans-serif;
    font-size: var(--btn-fs-md);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--btn-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
}

/* Primary/neon — без бордера и без подгона по фону, чтобы градиент не давал «обрамления» по краям */
.btn-primary,
.btn-neon,
.aio-btn--primary {
    border: 0 !important;
}
.btn:disabled,
.aio-btn:disabled,
.btn.disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
}

/* Размеры */
.btn-xs, .aio-btn--xs { height: var(--btn-h-xs); padding: 0 var(--btn-px-xs); font-size: var(--btn-fs-xs); border-radius: var(--radius-sm); }
.btn-sm, .aio-btn--sm { height: var(--btn-h-sm); padding: 0 var(--btn-px-sm); font-size: var(--btn-fs-sm); border-radius: var(--radius-sm); }
.btn-lg, .aio-btn--lg { height: var(--btn-h-lg); padding: 0 var(--btn-px-lg); font-size: var(--btn-fs-lg); border-radius: var(--radius-md); }

.btn-icon, .aio-btn--icon { width: var(--btn-h-md); padding: 0; }
.btn-sm.btn-icon { width: var(--btn-h-sm); }
.btn-xs.btn-icon { width: var(--btn-h-xs); }

/* Primary (фирменный градиент) */
.btn-primary,
.btn-neon,
.aio-btn--primary {
    background: var(--gradient-brand);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 16px rgba(123,109,240,0.25);
}
.btn-primary:hover,
.btn-neon:hover,
.aio-btn--primary:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 12px 28px rgba(123,109,240,0.35);
    filter: brightness(1.05);
}
.btn-primary:active,
.btn-neon:active { transform: translateY(0); filter: brightness(.97); }

/* Secondary — нейтральная кнопка на surface-2 */
.btn-secondary,
.aio-btn--secondary {
    background: var(--surface-2);
    color: var(--text-primary) !important;
    border-color: var(--border-color);
}
.btn-secondary:hover,
.aio-btn--secondary:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
    color: var(--text-primary) !important;
}

/* Ghost — без фона, только текст */
.btn-ghost,
.aio-btn--ghost {
    background: transparent;
    color: var(--text-secondary) !important;
    border-color: transparent;
}
.btn-ghost:hover,
.aio-btn--ghost:hover {
    background: var(--surface-2);
    color: var(--text-primary) !important;
}

/* Outline (фирменный) */
.btn-outline-neon,
.btn-outline-primary,
.aio-btn--outline {
    background: transparent;
    color: var(--accent-solid) !important;
    border-color: var(--border-neon);
}
.btn-outline-neon:hover,
.btn-outline-primary:hover,
.aio-btn--outline:hover {
    background: rgba(123, 109, 240, 0.08);
    border-color: var(--accent-solid);
    color: var(--accent-solid) !important;
    box-shadow: none;
}

/* Danger */
.btn-danger,
.btn-outline-danger,
.aio-btn--danger {
    background: rgba(244, 63, 94, 0.10);
    color: var(--danger) !important;
    border-color: rgba(244, 63, 94, 0.32);
}
.btn-danger:hover,
.btn-outline-danger:hover,
.aio-btn--danger:hover {
    background: var(--danger);
    color: #ffffff !important;
    border-color: var(--danger);
}

/* Success */
.btn-success,
.aio-btn--success {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success) !important;
    border-color: rgba(16, 185, 129, 0.30);
}
.btn-success:hover,
.aio-btn--success:hover {
    background: rgba(16, 185, 129, 0.18);
    color: var(--success) !important;
    border-color: var(--success);
}

/* Bootstrap legacy: outline-secondary, light, dark — нормализуем под secondary */
.btn-outline-secondary,
.btn-light,
.btn-dark {
    background: var(--surface-2);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.btn-outline-secondary:hover,
.btn-light:hover,
.btn-dark:hover {
    background: var(--surface-3);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* Чтобы Bootstrap .btn-link не получил height — это link, не кнопка */
.btn-link {
    display: inline;
    height: auto;
    padding: 0;
    color: var(--accent-solid);
    background: transparent;
    border: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.btn-link:hover { color: var(--accent-solid); filter: brightness(1.1); }

/* ===========================================================
   FORMS — единые поля и инпуты
   =========================================================== */
.form-control,
.form-select,
input[type="text"]:not(.no-aio),
input[type="email"]:not(.no-aio),
input[type="password"]:not(.no-aio),
input[type="number"]:not(.no-aio),
input[type="search"]:not(.no-aio),
input[type="tel"]:not(.no-aio),
input[type="url"]:not(.no-aio),
textarea:not(.no-aio),
select:not(.no-aio) {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--btn-radius);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    background: var(--bg-input);
    border-color: var(--accent-solid);
    color: var(--text-primary);
    box-shadow: 0 0 0 3px var(--accent-ring);
    outline: none;
}
input:not([type="checkbox"]):not([type="radio"]):not(.btn-check),
textarea, select, .form-control, .form-select {
    min-height: var(--btn-h-md);
}

/* ===========================================================
   CARDS — единый радиус и тени
   =========================================================== */
.card,
.aio-card,
.dr-card,
.proj-card,
.tile-card,
.metric-card,
.bg-dark-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* ===========================================================
   BADGES — премиальная палитра, единый размер и форма
   =========================================================== */
.badge,
.aio-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    font-family: 'Onest', 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Семантические бейджи (фон 10–14% + цветной текст + тонкая обводка) */
.aio-badge--neutral, .badge.bg-secondary,
.badge.text-bg-secondary {
    background: var(--surface-3);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
.aio-badge--success, .badge.bg-success,
.badge.text-bg-success {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
    border-color: rgba(16, 185, 129, 0.28);
}
.aio-badge--warning, .badge.bg-warning,
.badge.text-bg-warning {
    background: rgba(245, 158, 11, 0.12);
    color: var(--warning);
    border-color: rgba(245, 158, 11, 0.28);
}
.aio-badge--danger, .badge.bg-danger,
.badge.text-bg-danger {
    background: rgba(244, 63, 94, 0.12);
    color: var(--danger);
    border-color: rgba(244, 63, 94, 0.28);
}
.aio-badge--info, .badge.bg-info,
.badge.text-bg-info {
    background: rgba(93, 211, 219, 0.12);
    color: var(--info);
    border-color: rgba(93, 211, 219, 0.28);
}
.aio-badge--accent {
    background: rgba(123, 109, 240, 0.12);
    color: var(--accent-solid);
    border-color: rgba(123, 109, 240, 0.28);
}

/* «Ярлычки модулей» — приглушённые премиум-цвета */
.aio-badge--violet { background: rgba(167, 139, 250, 0.12); color: #C4B5FD; border-color: rgba(167, 139, 250, 0.28); }
.aio-badge--indigo { background: rgba(129, 140, 248, 0.12); color: #A5B4FC; border-color: rgba(129, 140, 248, 0.28); }
.aio-badge--teal   { background: rgba(45, 212, 191, 0.12); color: #5EEAD4; border-color: rgba(45, 212, 191, 0.28); }
.aio-badge--rose   { background: rgba(251, 113, 133, 0.12); color: #FDA4AF; border-color: rgba(251, 113, 133, 0.28); }
.aio-badge--amber  { background: rgba(251, 191, 36, 0.12); color: #FCD34D; border-color: rgba(251, 191, 36, 0.28); }
.aio-badge--slate  { background: rgba(148, 163, 184, 0.12); color: #CBD5E1; border-color: rgba(148, 163, 184, 0.28); }

[data-theme="light"] .aio-badge--violet { color: #6D28D9; background: rgba(109, 40, 217, 0.08); border-color: rgba(109, 40, 217, 0.20); }
[data-theme="light"] .aio-badge--indigo { color: #4338CA; background: rgba(67, 56, 202, 0.08); border-color: rgba(67, 56, 202, 0.20); }
[data-theme="light"] .aio-badge--teal   { color: #0F766E; background: rgba(15, 118, 110, 0.08); border-color: rgba(15, 118, 110, 0.20); }
[data-theme="light"] .aio-badge--rose   { color: #BE123C; background: rgba(190, 18, 60, 0.08); border-color: rgba(190, 18, 60, 0.20); }
[data-theme="light"] .aio-badge--amber  { color: #B45309; background: rgba(180, 83, 9, 0.08); border-color: rgba(180, 83, 9, 0.20); }
[data-theme="light"] .aio-badge--slate  { color: #475569; background: rgba(71, 85, 105, 0.08); border-color: rgba(71, 85, 105, 0.20); }

/* PRO/PREMIUM/BETA — спец-варианты */
.aio-badge--pro,
.aio-badge--premium {
    background: var(--gradient-brand);
    color: #fff;
    border-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.aio-badge--beta {
    background: rgba(148, 163, 184, 0.14);
    color: var(--text-secondary);
    border-color: var(--border-strong);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
[data-theme="light"] .aio-badge--beta { color: #475569; background: rgba(71, 85, 105, 0.08); border-color: rgba(71, 85, 105, 0.18); }

/* ===========================================================
   SIDEBAR — активный пункт: градиент на тексте/иконке (без фона/полоски)
   =========================================================== */
.sidebar-nav .nav-link.active,
.sidebar-nav .nav-link.active:hover {
    background: transparent !important;
    border-left: 0 !important;
    color: var(--text-primary) !important;
    font-weight: 600;
}
.sidebar-nav .nav-link.active span,
.sidebar-nav .nav-link.active i {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.sidebar-nav .nav-link:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}
[data-theme="light"] .sidebar-nav .nav-link:hover {
    background: var(--surface-2);
}

/* Бейдж счётчика в активном пункте */
.sidebar-nav .nav-link .nav-badge {
    background: var(--accent-solid);
    color: #fff;
    border-radius: var(--radius-pill);
}
.sidebar-nav .nav-link.active .nav-badge {
    background: var(--gradient-brand);
    color: #fff;
}

/* ===========================================================
   LOGO — общий градиент текста (sidebar + topbar + auth)
   =========================================================== */
.logo-text,
.auth-logo h1 {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -0.01em;
}

/* ===========================================================
   MODALS — единые скругления и тени
   =========================================================== */
.modal-content,
.asora-modal,
.asora-modal__body {
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

/* ===========================================================
   TOPBAR — спокойнее, на поверхности 1
   =========================================================== */
.topbar,
.topbar-wrap {
    background: var(--surface-1);
    border-color: var(--border-color);
}

/* Бледный фирменный радиальный градиент в нижней половине топбара
   (центр снизу — ярче, к краям и вверх растворяется) */
.topbar-fixed {
    background-image: radial-gradient(ellipse 55% 55% at 50% 100%,
        rgba(139, 95, 227, 0.25) 0%,
        rgba(79, 224, 232, 0.14) 45%,
        transparent 100%);
    background-repeat: no-repeat;
}
[data-theme="light"] .topbar-fixed {
    background-image: radial-gradient(ellipse 55% 55% at 50% 100%,
        rgba(110, 77, 208, 0.16) 0%,
        rgba(31, 182, 190, 0.10) 45%,
        transparent 100%);
}

/* ===========================================================
   TABLES
   =========================================================== */
.table th { background: var(--table-th-bg); color: var(--text-secondary); border-color: var(--border-color); }
.table td { border-color: var(--border-color); color: var(--text-primary); }
.table tr:hover td { background: var(--surface-2); }

/* ===========================================================
   ОТКЛЮЧАЕМ хвостовые «неоновые» эффекты
   =========================================================== */
.text-neon { color: var(--neon-primary) !important; }
[data-theme="dark"] .auth-logo i,
[data-theme="dark"] .logo i { filter: none; }


/* =====================================================================
   v2 ADDITIONS — единый акцент, тёмная мягче, табы и активные элементы
   ===================================================================== */

/* main-content / app-content на чистом фоне темы */
.main-content,
.app-wrapper,
.page-wrap,
.dr-shell,
.proj-wrap,
.help-wrap,
.tariff-wrap,
.assistant-wrap,
.support-wrap {
    background: var(--bg-dark);
}

/* Карточки в светлой теме — тонкий бордер вместо «плавающих» теней (премиум) */
[data-theme="light"] .card,
[data-theme="light"] .aio-card,
[data-theme="light"] .dr-card,
[data-theme="light"] .proj-card,
[data-theme="light"] .tile-card,
[data-theme="light"] .metric-card,
[data-theme="light"] .bg-dark-card {
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
[data-theme="light"] .card:hover,
[data-theme="light"] .aio-card:hover,
[data-theme="light"] .tile-card:hover {
    box-shadow: var(--shadow-md);
}

/* Тёмная — чуть видимая обводка, чтоб карточки не сливались */
[data-theme="dark"] .card,
[data-theme="dark"] .aio-card,
[data-theme="dark"] .dr-card,
[data-theme="dark"] .proj-card,
[data-theme="dark"] .tile-card,
[data-theme="dark"] .metric-card {
    background: var(--surface-2);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ============================================================
   ТАБЫ — единый стиль во всех модулях
   .nav-tabs / .auth-tabs / .mod-tab-btn / .asst-rv-tabs / etc.
   Активный = фон surface-2 + цвет accent-solid (без бирюзы)
   ============================================================ */

/* Bootstrap nav-tabs */
.nav-tabs {
    border-bottom: 1px solid var(--border-color);
    gap: 4px;
}
.nav-tabs .nav-link,
.nav-tabs .nav-item .nav-link {
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    padding: 10px 16px;
    font-weight: 500;
    font-size: var(--btn-fs-md);
    transition: var(--transition);
}
.nav-tabs .nav-link:hover {
    color: var(--text-primary);
    background: var(--surface-2);
    border-color: transparent;
}
.nav-tabs .nav-link.active {
    color: var(--accent-solid);
    background: var(--surface-2);
    border-color: var(--border-color);
    border-bottom-color: var(--surface-2);
    font-weight: 600;
}

/* Кастомные tab-кнопки в модулях */
.mod-tab-btn,
.hist-view-switch button,
.asst-rv-tabs button,
.vidg-source-switch button {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text-secondary) !important;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--btn-fs-md);
    height: var(--btn-h-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    cursor: pointer;
}
.mod-tab-btn:hover,
.hist-view-switch button:hover,
.asst-rv-tabs button:hover {
    color: var(--text-primary) !important;
    background: var(--surface-2) !important;
}
.mod-tab-btn.is-active,
.mod-tab-btn.active,
.hist-view-switch button.active,
.asst-rv-tabs button.active,
.vidg-source-switch button.active {
    color: var(--accent-solid) !important;
    background: var(--accent-bg-soft) !important;
    border-color: transparent !important;
    font-weight: 600;
}
/* Доп. kind-цвета для истории /ads/ */
.hist-k-ads     { background: rgba(123, 109, 240, 0.14); color: var(--accent-solid); }
.hist-k-ads-opt { background: rgba(245, 158, 11, 0.14); color: var(--warning); }

/* Auth tabs (login/register) */
.auth-tabs .nav-link.active {
    background: var(--gradient-brand);
    color: #fff;
    border-color: transparent;
}
.auth-tabs .nav-link {
    background: var(--surface-2);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

/* ============================================================
   ССЫЛКИ — по умолчанию цвет основного текста; акцент только на hover.
   Заголовки в таблицах/плитках/историях остаются «как заголовки».
   Явный акцент-цвет получают только: .aio-link, p > a, .text-link.
   ============================================================ */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.topbar-userdd-item):not(.topbar-brand):not(.aio-link):not(.text-link) {
    color: inherit;
    text-decoration: none;
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.topbar-userdd-item):not(.topbar-brand):not(.aio-link):not(.text-link):hover {
    color: var(--accent-solid);
}
.aio-link, .text-link, p > a {
    color: var(--accent-solid);
    text-decoration: none;
}
.aio-link:hover, .text-link:hover, p > a:hover {
    color: var(--accent-solid);
    filter: brightness(1.1);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================
   Иконки в карточках/виджетах — единый цвет (фиолет акцент)
   но логотип-градиент остаётся
   ============================================================ */
.tile-icon,
.metric-icon,
.feat-icon,
.designer-tile-icon,
.proj-card-icon,
.module-tile-icon {
    color: var(--accent-solid);
    background: var(--accent-bg-soft);
    border-radius: var(--radius);
}

/* ============================================================
   КНОПКИ — добавочные правила для tab-стайла кнопок
   .btn в primary/success/etc.: высота фиксирована, никаких сюрпризов
   ============================================================ */
.btn {
    line-height: 1;
}

/* ============================================================
   FIX — тёмная тема, поля ввода читаемее
   ============================================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input:not(.no-aio),
[data-theme="dark"] textarea:not(.no-aio),
[data-theme="dark"] select:not(.no-aio) {
    background: var(--surface-2);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* ============================================================
   FIX — светлая тема, не должно быть чисто-серого фона
   .main-content и обёртки получают чистый белый
   ============================================================ */
[data-theme="light"] body,
[data-theme="light"] .app-wrapper,
[data-theme="light"] .main-content,
[data-theme="light"] .page-wrap {
    background: var(--bg-dark);
}

/* Хуже всего — sidebar и main одного цвета? Разводим: sidebar = чисто белый,
   main контент тоже белый, разделитель — единственный 1px бордер. */
[data-theme="light"] .sidebar {
    background: #FFFFFF;
    border-right: 1px solid var(--border-color);
}
[data-theme="dark"] .sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
}

/* ============================================================
   FIX — bg-dark классы (legacy bootstrap) → теперь surface-2
   ============================================================ */
.bg-dark-card { background: var(--surface-2) !important; border: 1px solid var(--border-color); }
.bg-neon-subtle { background: var(--accent-bg-soft) !important; color: var(--accent-solid) !important; }


/* === Унификация бейджей в таблицах — все pill (как статус) === */
.hist-type-badge,
.hist-status,
.hist-row-type,
.hist-row-status,
.aio-table-pill {
    border-radius: var(--radius-pill) !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}



/* === SCROLLBARS — по образцу f-crm.ru === */
.sidebar-nav {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}
/* Спейсер в конце списка: иначе при overflow:auto последний пункт («Админ»)
   обрезается, т.к. padding-bottom скролл-контейнера в Chrome/Safari
   не входит в скроллируемую область */
.sidebar-nav::after {
    content: '';
    display: block;
    height: 1.25rem;
    flex-shrink: 0;
}
.sidebar-nav::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}
.sidebar-nav::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: none;
}
.sidebar-nav::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #4FE0E8, #8B5FE3);
    border-radius: 0;
}
[data-theme="light"] .sidebar-nav::-webkit-scrollbar-thumb,
[data-theme="light"] .main-content::-webkit-scrollbar-thumb,
[data-theme="light"] *::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #1FB6BE, #6E4DD0);
}

/* === Унификация floating-кнопок на превью генерации === */
.img-download-btn,
.img-edit-btn,
.img-action-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    border: none !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    transition: transform .15s ease, background .2s ease;
}
.img-download-btn { background: rgba(0, 0, 0, 0.55) !important; color: #fff !important; }
.img-download-btn:hover { background: rgba(0, 0, 0, 0.75) !important; transform: scale(1.05); }

/* Floating-кнопки: позиция и сохранение цвета иконки на hover */
.img-download-btn,
.designer-result-item .img-download-btn {
    top: 10px !important;
    right: 10px !important;
    width: 36px !important;
    height: 36px !important;
}
.img-download-btn:hover,
.img-edit-btn:hover,
.img-action-btn:hover {
    color: #fff !important;
}
.img-download-btn { color: #fff !important; }
.img-edit-btn { color: #fff !important; }

/* Floating-кнопки: цвет иконки всегда белый, в т.ч. на hover/focus/active */
.img-download-btn, .img-download-btn:hover, .img-download-btn:focus, .img-download-btn:active,
.img-edit-btn, .img-edit-btn:hover, .img-edit-btn:focus, .img-edit-btn:active,
.img-action-btn, .img-action-btn:hover, .img-action-btn:focus, .img-action-btn:active, .img-video-btn, .img-video-btn:hover, .img-video-btn:focus, .img-video-btn:active,
.designer-result-item .img-download-btn,
.designer-result-item .img-download-btn:hover {
    color: #fff !important;
}

/* Topbar-кнопки (включая <a class="topbar-btn">) — серый цвет иконки, без перекрытия */
.topbar-btn,
.topbar-btn:hover,
.topbar-btn:focus,
.topbar-btn:active,
.topbar-btn i {
    color: var(--text-secondary) !important;
}
[data-theme="light"] .topbar-btn,
[data-theme="light"] .topbar-btn i {
    color: var(--text-muted) !important;
}

/* Все Bootstrap-бейджи (badge bg-success/danger/info/...) — единый стиль таблиц */
.badge {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 4px 10px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    line-height: 1;
    border: 1px solid transparent !important;
}
.badge.bg-success, .badge.text-bg-success {
    background: rgba(16, 185, 129, 0.12) !important;
    color: var(--success) !important;
    border-color: rgba(16, 185, 129, 0.28) !important;
}
.badge.bg-danger, .badge.text-bg-danger {
    background: rgba(244, 63, 94, 0.12) !important;
    color: var(--danger) !important;
    border-color: rgba(244, 63, 94, 0.28) !important;
}
.badge.bg-warning, .badge.text-bg-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    color: var(--warning) !important;
    border-color: rgba(245, 158, 11, 0.28) !important;
}
.badge.bg-info, .badge.text-bg-info {
    background: rgba(93, 211, 219, 0.12) !important;
    color: var(--info) !important;
    border-color: rgba(93, 211, 219, 0.28) !important;
}
.badge.bg-secondary, .badge.text-bg-secondary {
    background: var(--surface-3) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}
.badge.bg-primary, .badge.text-bg-primary {
    background: var(--accent-bg-soft) !important;
    color: var(--accent-solid) !important;
    border-color: var(--border-neon) !important;
}

/* Primary-кнопки: разворачиваем градиент (фиолет слева → циан справа) — иконки слева получают больше контраста */
.btn-primary,
.btn-neon,
.aio-btn--primary {
    background: linear-gradient(90deg, #8B5FE3 0%, #4FE0E8 100%) !important;
}
.btn-primary:hover,
.btn-neon:hover,
.aio-btn--primary:hover {
    background: linear-gradient(90deg, #8B5FE3 0%, #4FE0E8 100%) !important;
    filter: brightness(1.08);
}
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-neon,
[data-theme="light"] .aio-btn--primary {
    background: linear-gradient(90deg, #6E4DD0 0%, #1FB6BE 100%) !important;
}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-neon:hover,
[data-theme="light"] .aio-btn--primary:hover {
    background: linear-gradient(90deg, #6E4DD0 0%, #1FB6BE 100%) !important;
    filter: brightness(1.08);
}
/* Иконки в primary-кнопках — крупнее и с лёгкой тенью для контраста */
.btn-primary i,
.btn-neon i,
.aio-btn--primary i {
    font-size: 16px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* img-video-btn — синий fab по аналогии с edit/download, цвет иконки белый всегда */
.img-video-btn {
    position: absolute;
    top: 10px;
    right: 54px;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(64, 146, 200, 0.85) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s, background .2s, transform .1s;
    z-index: 2;
    backdrop-filter: blur(6px);
    text-decoration: none !important;
    border: none !important;
}
.designer-result-item:hover .img-video-btn,
.generated-image-wrap:hover .img-video-btn { opacity: 1; }
.img-video-btn:hover { background: rgba(64, 146, 200, 1) !important; transform: scale(1.05); color: #fff !important; }

/* Bootstrap switch/check — убрать «двойной круг» при фокусе.
   Глобальный focus-shadow заменяем на компактный, без расширения. */
.form-check-input:focus,
.form-check-input:focus-visible,
.form-switch .form-check-input:focus,
.form-switch .form-check-input:focus-visible {
    box-shadow: 0 0 0 2px var(--accent-ring) !important;
    border-color: var(--accent-solid) !important;
    outline: none !important;
}
.form-check-input:checked,
.form-check-input:checked:focus,
.form-check-input:checked:focus-visible,
.form-check-input:checked:hover,
.form-check-input:checked:active {
    background-color: var(--accent-solid) !important;
    border-color: var(--accent-solid) !important;
}
/* Галочка/точка — всегда белые, независимо от focus-состояния. Прибиваем background-image
   напрямую, чтобы Bootstrap'овские переходы --bs-form-check-bg-image не могли перекрасить. */
.form-check-input[type="checkbox"]:checked,
.form-check-input[type="checkbox"]:checked:focus,
.form-check-input[type="checkbox"]:checked:focus-visible,
.form-check-input[type="checkbox"]:checked:hover,
.form-check-input[type="checkbox"]:checked:active {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
.form-check-input[type="radio"]:checked,
.form-check-input[type="radio"]:checked:focus,
.form-check-input[type="radio"]:checked:focus-visible,
.form-check-input[type="radio"]:checked:hover,
.form-check-input[type="radio"]:checked:active {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* Иконка в primary-кнопках масштабируется с размером кнопки */
.btn-sm.btn-primary i, .btn-sm.btn-neon i { font-size: 14px; }
.btn-lg.btn-primary i, .btn-lg.btn-neon i { font-size: 19px; font-weight: 700; }
.btn-primary i, .btn-neon i { vertical-align: middle; }

/* Полоса прогресса «Полнота брифа» — тонкая, фирменный градиент */
.asst-fillgauge-bar {
    height: 4px !important;
    border-radius: 999px !important;
    background: var(--surface-3) !important;
}
.asst-fillgauge-fill,
.asst-fill-good .asst-fillgauge-fill,
.asst-fill-full .asst-fillgauge-fill {
    background: var(--gradient-brand) !important;
    box-shadow: none !important;
    border-radius: 999px !important;
}
.asst-fillgauge-pct,
.asst-fill-full .asst-fillgauge-pct {
    color: var(--accent-solid) !important;
}

/* Иконки Bootstrap Icons в любых кнопках — строгое вертикальное центрирование.
   Глиф bi-* имеет внутренний baseline-offset; в inline-flex родителе нужно явно нормализовать
   line-height и сделать саму <i> flex-контейнером. Единое правило для всех модулей. */
.btn .bi,
.btn i.bi,
.btn-neon .bi,
.btn-neon i.bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-shadow: none;
}
.btn-neon .bi,
.btn-neon i.bi {
    color: #fff;
}
/* ============================================================
   ИИ-помощник: задача «Статья / пост» — редактируемый результат
   ============================================================ */

.asst-article {
    max-width: 880px;
    margin: 0 auto;
}

.asst-article-meta {
    display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1rem;
}
.asst-article-tag {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: 4px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: .85em; color: var(--text-secondary);
}
.asst-article-tag i { color: var(--neon-primary); }

.asst-article-title {
    font-size: 1.6rem; font-weight: 700; line-height: 1.3;
    margin: 0 0 1rem;
}

.asst-article-editor-wrap {
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.asst-article-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: .5rem;
    padding: .65rem 1rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-color);
}
.asst-article-toolbar-hint i { color: var(--neon-primary); margin-right: 4px; }
.asst-article-toolbar-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.asst-article-editor {
    width: 100%;
    min-height: 320px;
    padding: 1.25rem 1.5rem;
    background: var(--surface-1);
    color: var(--text-main);
    border: none;
    outline: none;
    resize: none;
    font-family: 'Onest', 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    box-sizing: border-box;
}
.asst-article-editor:focus {
    box-shadow: inset 0 0 0 2px var(--accent-ring);
}

.asst-article-images {
    margin-top: 1.5rem;
}
.asst-article-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem;
}
.asst-article-image {
    display: block; aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--surface-2);
}
.asst-article-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .25s;
}
.asst-article-image:hover img { transform: scale(1.04); }

/* Контент-план: list-row с кнопкой «Создать пост» — в одну строку */
.asst-list-row--with-action {
    display: flex; gap: 1rem; align-items: flex-start;
    flex-wrap: wrap;
}
.asst-list-row--with-action .asst-list-row-text { flex: 1 1 280px; }
.asst-list-row--with-action .asst-list-row-cta { flex: 0 0 auto; align-self: flex-start; }
@media (max-width: 640px) {
    .asst-list-row--with-action { flex-direction: column; }
    .asst-list-row--with-action .asst-list-row-cta { align-self: stretch; justify-content: center; }
}