* {
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
    margin: 0;
}

/* Все дизайн-токены (:root) вынесены в assets/css/tokens.css — единый источник
   правды, грузится первым (modules/head.php). Здесь блок удалён, чтобы не
   дублировать и не перебивать канон значениями этого файла. */

.container {
    width: 90%;
    max-width: 1199px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   HEADER & PROFILE DROPDOWN — единый канонический блок
   Палитра тёмного дропдауна:
     surface         #1c1c1c
     surface-soft    rgba(255,255,255,0.04)   — мягкие подложки
     surface-strong  rgba(255,255,255,0.08)   — иконки/hover
     border          rgba(255,255,255,0.10)
     text-1          #fff                      — primary
     text-2          rgba(255,255,255,0.65)   — secondary (links idle)
     text-3          rgba(255,255,255,0.50)   — tertiary (labels)
   Радиусы: 8 / 12 / 16 / 24
   ============================================================ */

.menu {
    padding: 6px 0;
    background: #fff;
    z-index: 1000005;
    position: sticky;
    top: 0;
}

body.modal-open .menu { z-index: 99998; }

/* Dim-overlay для хедера, когда открыт mobile-backdrop (профиль / нотификации).
   Лежит внутри .menu, но под .header-profile-wrapper.opened (z=100005),
   поэтому затемняет только логотип/+/конверт/колокол, а аватар + dropdown остаются яркими. */
.menu::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
body.is-mobile-menu-open .menu::after { opacity: 1; }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
}

.header-left-side {
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-right-side {
    display: flex;
    align-items: center;
    gap: 6px;
}

.logo-menu {
    height: 42px;
    display: block;
    margin-left: -6px;
}
.js-logo-link { display: inline-flex; align-items: center; line-height: 0; }

/* Глобальный цвет иконки молнии (fa-bolt) — под брендовый логотип.
   Локальные оверрайды (.pts-lightning-icon, .header-points-pill i.fa-bolt)
   объявлены позже в файле/выше по специфичности и сохраняют свой цвет. */
.fa-bolt { color: var(--color-primary); }

/* Right side: just the action icons + avatar — кнопка «Войти» для гостя */
.menu .header-right-side .btn-primary,
.menu .header-right-side .btn-outline-primary {
    height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
}

/* На узких экранах зажимаем «Начать продавать», чтобы логотип + две кнопки
   умещались в ряд. 480px — тот же брейкпоинт, что используется для других
   header-элементов. */
@media (max-width: 480px) {
    .menu .header-right-side .js-start-selling {
        padding: 0 10px;
        font-size: 12px;
    }
}

.header-nav-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-slate-900);
    text-decoration: none;
    padding: 0 12px;
    height: 40px;                  /* выравнивание с .header-cta и кнопками */
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    transition: background 0.15s, color 0.15s;
}
.header-nav-link:hover { background: var(--c-slate-100); color: var(--color-primary); }

@media (max-width: 768px) {
    .header-nav-link { display: none; }
}

/* ── Header action buttons (create / chat / notifications) ── */
.header-action-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: transparent;
    color: var(--c-slate-500);            /* slate-500 — спокойный muted */
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;     /* на случай, если элемент — <a> */
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.header-action-btn i { line-height: 1; }
.header-action-btn:hover { background: var(--c-slate-100); color: var(--c-slate-900); }
.header-action-btn:active { background: var(--c-slate-200); }
/* Если есть непрочитанное — иконка темнее, чтобы привлекать внимание */
.header-action-btn:has(.header-action-badge) { color: var(--c-slate-900); }
.header-action-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.header-action-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    border: 2px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
@media (max-width: 480px) {
    .header-action-btn { width: 38px; height: 38px; font-size: 18px; }
}

/* ── Avatar trigger ── */
.header-profile-wrapper {
    position: relative;
    z-index: 10;
}
.header-profile-wrapper.opened { z-index: 100005; }

.header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    background: var(--c-slate-100);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    border: none;
    padding: 0;
    margin-left: 6px;
    transition: transform 0.1s, box-shadow 0.15s;
}
.header-avatar:active { transform: scale(0.95); }
.header-avatar:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.header-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
body.is-mobile-menu-open .header-avatar::after { opacity: 1; }

.header-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* ── Dropdown panel ── */
.header-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 320px;
    background: #1c1c1c;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
    color: #fff;
    z-index: 1000007;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    max-height: 85vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.header-profile-wrapper.opened .header-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.header-dropdown::-webkit-scrollbar { width: 4px; }
.header-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 10px; }

/* ── User card inside dropdown ── */
.dropdown-user-info-link { text-decoration: none; display: block; }
.dropdown-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
}
.dropdown-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
}
.dropdown-avatar img { width: 100%; height: 100%; object-fit: cover; }

.dropdown-user-details { flex: 1; min-width: 0; }
.dropdown-username-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dropdown-username {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.dropdown-userrole {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
}

.dropdown-points-pill {
    position: relative;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: background 0.15s;
}
.dropdown-points-pill:hover { background: rgba(255,255,255,0.14); color: #fff; }
.dropdown-points-pill i { font-size: 10px; color: #ffd700; }
/* Красная точка «вас ждут задания» (earn-tasks) на пилюле баллов. */
.dropdown-points-pill .pts-todo-dot { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; background: #ef4444; border: 2px solid #fff; border-radius: 50%; pointer-events: none; }

/* ── Mini action icons (legacy, kept for mobile fallback) ── */
.stat-icon-item-mini:hover { background: var(--color-primary); }
.stat-icon-badge-mini {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #1c1c1c;
    z-index: 5;
}

/* ── Dropdown navigation ── */
.dropdown-links {
    display: flex;
    flex-direction: column;
    padding: 6px 4px;
    gap: 1px;
}
.dropdown-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    transition: background 0.15s, color 0.15s;
}
.dropdown-link i {
    width: 18px;
    display: inline-flex;
    justify-content: center;
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    transition: color 0.15s;
}
.dropdown-link:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.dropdown-link:hover i { color: rgba(255,255,255,0.85); }
.dropdown-link.active {
    background: rgba(0, 64, 255,0.18);
    color: #fff;
    font-weight: 600;
}
.dropdown-link.active i { color: var(--color-primary); }
.dropdown-link.text-danger { color: #f87171; }
.dropdown-link.text-danger:hover { background: rgba(239,68,68,0.12); color: #fca5a5; }
.dropdown-link.text-danger i { color: #f87171; }

.dropdown-group-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.08em;
    padding: 12px 12px 6px;
}

.dropdown-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 6px 8px;
}

.dropdown-mobile-header { display: none; }

/* ── Mobile bottom sheet ── */
@media screen and (max-width: 800px) {
    .header-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        border-radius: 24px 24px 0 0;
        padding: 16px 12px 32px;
        max-height: 88vh;
        /* Закрытое состояние идентично desktop (opacity:0, visibility:hidden) —
           иначе при ресайзе через 800px меню мелькает на экране (см. профиль). */
        opacity: 0;
        visibility: hidden;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.25s ease,
                    visibility 0.25s ease;
        border: none;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.45);
        z-index: 100000;          /* выше .mobile-menu-overlay (99000) */
        pointer-events: auto;
    }
    .header-profile-wrapper.opened .header-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .dropdown-mobile-header {
        display: flex;
        justify-content: flex-end;
        padding: 0 4px 12px;
    }
    .dropdown-close-btn {
        background: rgba(255,255,255,0.08);
        border: none;
        color: #fff;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 16px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s;
    }
    .dropdown-close-btn:hover { background: rgba(255,255,255,0.14); }

    /* show legacy mini-icons inside dropdown on mobile only */
}

/* ── Notification side panel — единый блок (design-system slate / Inter) ──
   Дублирующиеся .notif-* правила в нижней части файла удалены 2026-05-05
   при рефакторе под дизайн-систему. Все токены берём из :root. */
/* Off-canvas панель уведомлений (`position:fixed`, спрятана за правым краем)
   расширяла бы scrollWidth и давала горизонтальный скролл на мобилке. Клиппим
   на уровне body — overflow body пропагируется во вьюпорт (при html overflow:visible),
   режет горизонтальное переполнение, НЕ создаёт scroll-контейнер на body (sticky и
   вертикальный скролл не страдают). Внутренние слайдеры с overflow-x:auto не задеты. */
body { overflow-x: hidden; }

.notif-side-panel {
    position: fixed;
    top: 0;
    right: -100%;                /* off-canvas; клиппится body{overflow-x:hidden} выше */
    width: 380px;
    max-width: 100vw;
    height: 100%;
    background: #fff;
    z-index: 100001;             /* выше .mobile-menu-overlay (99000) */
    box-shadow: -16px 0 40px rgba(15, 23, 42, 0.12);
    transition: right 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}
.notif-side-panel.is-open { right: 0; }

/* Header */
.notif-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.notif-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.notif-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.notif-mark-all {
    background: transparent;
    border: 0;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}
.notif-mark-all:hover  { background: rgba(0, 64, 255, 0.08); }
.notif-mark-all:active { background: rgba(0, 64, 255, 0.14); }
.notif-header-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-muted);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
}
.notif-header-close:hover { background: var(--border-subtle); color: var(--text-primary); }

/* TG-promo баннер — показывается юзерам без tg_notify_chat_id, dismissable на 30 дней */
.notif-tg-promo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 12px 4px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #229ED9 0%, #1A8AC4 100%);
    border-radius: 12px;
    color: #fff;
    position: relative;
    box-shadow: 0 2px 8px rgba(34, 158, 217, 0.25);
}
.notif-tg-promo-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    font-size: 20px;
    color: #fff;
}
.notif-tg-promo-content {
    flex: 1;
    min-width: 0;
}
.notif-tg-promo-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 2px;
}
.notif-tg-promo-text {
    font-size: 12px;
    line-height: 1.35;
    opacity: 0.9;
}
.notif-tg-promo-cta {
    flex: 0 0 auto;
    padding: 7px 12px;
    background: #fff;
    color: #229ED9;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.notif-tg-promo-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: #1A8AC4;
}
.notif-tg-promo-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background 0.15s ease;
}
.notif-tg-promo-close:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* List */
.notif-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-subtle) transparent;
}
.notif-list::-webkit-scrollbar { width: 6px; }
.notif-list::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 3px; }
.notif-list::-webkit-scrollbar-thumb:hover { background: var(--divider-faint); }

.notif-item {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 20px 14px 24px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}
.notif-item + .notif-item { border-top: 1px solid var(--surface-muted); }
.notif-item:hover { background: var(--surface-subtle); }
.notif-item.unread::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 22px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0, 64, 255, 0.12);
}

/* Type icon */
.notif-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
}
.notif-type-info       { background: rgba(0, 64, 255, 0.10); color: var(--color-primary); }
.notif-type-success    { background: #ecfdf5;                 color: var(--c-emerald-600); }
.notif-type-warning    { background: #fff4e5;                 color: var(--c-amber-700); }
.notif-type-marketing  { background: #f5f3ff;                 color: var(--c-violet-600); }

/* Award-карточка: иконка справа («трофей в углу»), а не префикс слева.
   Точка-индикатор unread остаётся слева (она абсолютная). Контент получает
   padding-left = ширина иконки (38) + gap (12) = 50px, чтобы текстовая ось
   заголовков совпадала с обычными уведомлениями — глаз воспринимает ленту
   как единую сетку.
   align-items: center делает иконку вертикально по центру контента (карточка
   обычно невысокая — 3 строки, по центру = эстетично). */
.notif-item--award { flex-direction: row-reverse; align-items: center; }
.notif-item--award .notif-content { padding-left: 50px; }
.notif-award-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-amber-700);
    margin-bottom: 2px;
    line-height: 1;
}
.notif-item--award .notif-title { font-size: 15px; }

/* Award notification: цвета задаются inline из data.award (фон/иконка).
   Tier-эффекты — обводка/glow усиливаются с ростом tier (как на странице
   "Награды" в профиле). Tier 1-2 — без эффекта, 3 — золотая обводка,
   4 — двойная обводка с тенью, 5 — радужная пульсация. */
.notif-type-award {
    font-size: 17px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.notif-award-tier-3 {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, .55), 0 2px 6px rgba(245, 158, 11, .25);
}
.notif-award-tier-4 {
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px rgba(139, 92, 246, .65),
        0 2px 10px rgba(139, 92, 246, .35);
}
.notif-award-tier-5 {
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px transparent,
        0 2px 12px rgba(236, 72, 153, .35);
    background-image: linear-gradient(135deg, #fef3c7 0%, #fce7f3 50%, #ddd6fe 100%) !important;
    animation: notif-award-shimmer 3s ease-in-out infinite;
}
@keyframes notif-award-shimmer {
    0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(236, 72, 153, .55), 0 2px 12px rgba(236, 72, 153, .35); }
    50%      { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(139, 92, 246, .55), 0 2px 12px rgba(139, 92, 246, .35); }
}
@media (prefers-reduced-motion: reduce) {
    .notif-award-tier-5 { animation: none; }
}

/* Content */
.notif-content { flex: 1; min-width: 0; }
.notif-title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}
.notif-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.45;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.notif-time {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.01em;
}

/* Empty / loading */
.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 64px 24px;
    color: var(--text-tertiary);
    font-size: 14px;
    text-align: center;
}
.notif-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--surface-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 22px;
    margin-bottom: 4px;
}
.notif-empty-illus {
    width: 140px;
    height: auto;
    margin-bottom: 4px;
    user-select: none;
    -webkit-user-drag: none;
}
.notif-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.notif-empty-text {
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 240px;
    line-height: 1.45;
}
.notif-empty-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2.5px solid var(--surface-muted);
    border-top-color: var(--color-primary);
    animation: notifSpin 0.8s linear infinite;
}
@keyframes notifSpin { to { transform: rotate(360deg); } }

/* Footer */
.notif-footer {
    flex-shrink: 0;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border-subtle);
    text-align: center;
}
.notif-footer-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s;
}
.notif-footer-link:hover { color: var(--text-primary); }

@media screen and (max-width: 800px) {
    .notif-side-panel {
        width: 100%;
        box-shadow: none;
    }
}

/* ── Mobile overlay (clickable backdrop, no blur) ── */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 99000;            /* должен быть НИЖЕ дропдауна и notif-панели */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.mobile-menu-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ── Pagination (legacy global, used by old pages) ── */
.page-pill:hover { background: var(--c-slate-100); border-color: var(--c-slate-300); }

/* legacy stat helpers — used by older pages */

/* ============================================================ */

.menu-item:hover {
    color: #000;
}

.btn {
    padding: 10px 25px;
    text-decoration: none;
    border: 1px solid;
    font-size: 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    outline: none;
    box-shadow: none;
}

.btn-primary:hover {
    background: var(--color-primary--hover);
}

.btn-primary:active {
    background: var(--color-primary--active);
    transform: scale(0.98);
}

.btn-outline-primary {
    border-color: var(--color-primary);
    background-color: var(--color-white);
    color: var(--color-primary);
}

.btn-outline-primary:hover {
    background: var(--color-primary--hover);
    color: var(--color-white);
}

.btn-outline-primary:active {
    background: var(--color-primary--active);
    color: var(--color-white);
}

.btn-outline-danger:hover {
    background: var(--color-danger--hover);
    color: var(--color-white);
}

.btn-outline-danger:active {
    background: var(--color-danger--active);
    color: var(--color-white);
}

.btn-xl {
    font-family: var(--font-adderley);
    font-size: 35px;
    font-style: normal;
    line-height: 130%;
    text-transform: uppercase;
    padding-top: 19px !important;
}

.gap-25px {
    gap: 0 25px
}

.advantage-icon {
    margin-bottom: 15px;
    height: 39px;
    width: 39px;
    display: flex;
    font-size: 17px;
    align-items: center;
    border-radius: 50%;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-white);
}

.advantage-title {
    font-size: 17.55px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
}

.mt-185px {
    margin-top: 185px;
}

.mt-90px {
    margin-top: 90px;
}

.section-title {
    display: flex;
    justify-content: center;
    font-family: var(--font-adderley);
    font-size: 39px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}

.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}

.w-60 {
    width: 60%;
}

.w-75 {
    width: 75% !important;
}

.products-list {
    display: flex;
    flex-wrap: wrap;
    gap: 59px 41px;
}

.product-item {
    width: 31%;
    border-radius: 19px;
    background: #f7f7fb;
    display: flex;
    flex-direction: column;
}

/* Tablet (481-1024): 2 колонки вместо 1.
   Аддитивное правило поверх existing mobile-override (<=768 → 100%).
   gap уже настроен в .products-list, только корректируем ширину. */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .product-item {
        /* 2 колонки с учётом gap 41px → (100% - 41px) / 2 ≈ 48% */
        width: calc((100% - 41px) / 2);
    }
}

.product-item--image {
    border-top-right-radius: inherit;
    border-top-left-radius: inherit;
    position: relative;
}

.product-item--image img {
    max-width: 100%;
    height: 195px;
    width: 100%;
    object-fit: cover;
    object-position: 0% center;
    border-top-right-radius: inherit;
    border-top-left-radius: inherit;
}

.product-item-data {
    padding: 19px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-item--rating {
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.product-item--rating i {
    color: #7F7F7F;
    ;
    margin-left: 3px;
}

.product-item--budge {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px 13px;
    border-radius: 13px;
    font-size: 11.85px;
    background: #d5dae9;
}

.product-item--title {
    font-size: 21px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-item--from {
    font-size: 15px;
    line-height: 130%;
    letter-spacing: -0.16px;
}

.product-item--from-name {
    color: #5e5e5e;
    cursor: pointer;
}

.product-item--hashtag {
    font-size: 13px;
    margin-right: 5px;
}

.product-item--price {
    font-size: 27px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.32px;
}

.product-item--price i {
    font-size: 27px;
    margin-left: 5px;
}

.product-item--price-old {
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.2px;
    text-decoration-line: line-through;
    margin-left: 15px;
}

.product-item--price-old i {
    font-size: 15px;
    margin-left: 3px;
}

.btn-pay {
    padding: 11px 25px;
    font-size: 17px;
}

.w-70 {
    width: 70%;
}

.go-catalog-title {
    font-family: var(--font-adderley);
    font-size: 31px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}

.title-page {
    font-family: var(--font-adderley);
    font-size: 45px;
}

.faq-item {
    border-radius: 15px;
    background: #EDEDED;
    padding: 45px 35px 39px 35px;
    cursor: pointer;
    margin-bottom: 37px;
}

.faq-item--header {
    display: flex;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    align-items: center;
    justify-content: space-between;
}

.faq-item--header-title {
    font-family: var(--font-adderley);
    font-size: 31px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}

.faq-item--body {
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    height: 0;
    opacity: 0;
    margin-top: 0;
    transition-duration: .3s;
}

.faq-item--header-button {
    transform: rotate(180deg);
}

.faq-item.opened .faq-item--body {
    margin-top: 15px;
    height: auto;
    opacity: 1;
}

.faq-item.opened .faq-item--header-button {
    transform: rotate(0deg);
}

/* ============================================================
   SITE FOOTER — многоколоночный подвал на дизайн-токенах.
   Бренд-колонка (лого + таглайн + email + соцсети) слева,
   три nav-колонки справа, нижняя полоса с copyright/реквизитами.
   ============================================================ */
.site-footer {
    margin-top: 80px;
    padding: 56px 0 28px;
    background: var(--surface-subtle);
    border-top: 1px solid var(--border-subtle);
    font-family: var(--font-body, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
    color: var(--text-secondary);
}

.site-footer__top {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.site-footer__brand {
    flex: 1 1 280px;
    max-width: 360px;
}

.site-footer__logo { display: inline-block; }
.site-footer__logo img {
    height: 44px;
    width: auto;
    display: block;
    margin-left: -9px; /* у PNG ~9px прозрачного поля слева — поджимаем, чтобы видимый логотип был флаш с текстом колонки */
}

.site-footer__tagline {
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.site-footer__email {
    display: inline-block;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition-fast, .15s) ease;
}
.site-footer__email:hover { color: var(--color-primary); }

.site-footer__social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.site-footer__social-link {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full, 50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-base, #fff);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 16px;
    text-decoration: none;
    transition: transform var(--transition-fast, .15s) ease,
                background var(--transition-fast, .15s) ease,
                border-color var(--transition-fast, .15s) ease,
                color var(--transition-fast, .15s) ease;
}
.site-footer__social-link:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
}

.site-footer__nav {
    flex: 2 1 460px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 32px;
}

.site-footer__col-title {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer__links li + li { margin-top: 12px; }
.site-footer__links a {
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast, .15s) ease;
}
.site-footer__links a:hover { color: var(--color-primary); }

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
}
.site-footer__copy,
.site-footer__legal {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-tertiary);
}

@media (max-width: 768px) {
    .site-footer__brand {
        flex-basis: 100%;
        max-width: none;
    }
    .site-footer__nav { flex-basis: 100%; }
}
@media (max-width: 480px) {
    .site-footer { margin-top: 56px; padding: 40px 0 24px; }
    .site-footer__nav { grid-template-columns: 1fr 1fr; }
    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

.w-11 {
    width: 11%;
}

.link-primary {
    color: var(--color-primary);
}

.link-primary:hover {
    color: var(--color-primary--hover);
}

.link-primary:active {
    color: var(--color-primary--active);
}

.text-underline {
    text-decoration: underline;
}

body.modal-open {
    overflow: hidden;
}

.modal-title {
    text-align: center;
    font-family: var(--font-adderley);
    font-size: 45px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    text-transform: uppercase;
}

.form-control {
    border-radius: 9px;
    border: 1px solid rgba(0, 0, 0, 0.29);
    padding: 19px 15px;
    font-size: 15px;
    width: 100%;
}

.show-password,
.hide-password {
    right: 17px;
    position: absolute;
    top: 19px;
    color: #ccc;
}

.f-s-21px {
    font-size: 21px;
}

.f-w-500 {
    font-weight: 500;
}

.btn-tg {
    border: 1px solid #D1D1D1;
    border-radius: 9px;
    display: flex;
    align-items: center;
    background: white;
    color: #3e3e3e;
}

.btn-tg:hover {
    border-color: #3e3e3e;
}

.btn-tg:active {
    border-color: black;
}

.auth-soc-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #999;
    margin-top: 24px;
    line-height: 1;
}
.auth-soc-divider::before,
.auth-soc-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e5e5e5;
}
.auth-soc-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.auth-soc-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 8px;
}
.auth-soc-btn svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}
.auth-soc-btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
@media (max-width: 480px) {
    .auth-soc-btn span { display: none; }
    .auth-soc-btn { padding: 12px 8px; }
}

.link-signup {
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    color: black;
    text-decoration-line: underline !important;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.checkbox-wrapper-46 input[type="checkbox"] {
    display: none;
    visibility: hidden;
}

.checkbox-wrapper-46 {
    display: flex;
    justify-content: center;
}

.checkbox-wrapper-46 .cbx {
    display: flex;
    align-items: center;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

.checkbox-wrapper-46 .cbx span {
    display: inline-block;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}

.checkbox-wrapper-46 .cbx span:first-child {
    position: relative;
    width: 18px;
    min-width: 18px;
    height: 18px;
    border-radius: 3px;
    transform: scale(1);
    vertical-align: middle;
    border: 1px solid #9098A9;
    transition: all 0.2s ease;
}

.checkbox-wrapper-46 .cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: black;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}

.checkbox-wrapper-46 .cbx span:first-child:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #fff;
    display: block;
    transform: scale(0);
    opacity: 1;
    border-radius: 50%;
}

.checkbox-wrapper-46 .cbx span:last-child {
    padding-left: 8px;
}

.checkbox-wrapper-46 .cbx:hover span:first-child {
    border-color: black;
}

.checkbox-wrapper-46 .inp-cbx:checked+.cbx span:first-child {
    background: #fff;
    border-color: black;
    animation: wave-46 0.4s ease;
}

.checkbox-wrapper-46 .inp-cbx:checked+.cbx span:first-child svg {
    stroke-dashoffset: 0;
}

.checkbox-wrapper-46 .inp-cbx:checked+.cbx span:first-child:before {
    transform: scale(3.5);
    opacity: 0;
    transition: all 0.6s ease;
}

.text-root {
    font-size: 13px;
    line-height: 130%;
    text-align: left;
}

.text-root .link {
    color: inherit;
    line-height: 130%;
    text-decoration-line: underline !important;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.link-underline {
    text-decoration-line: underline !important;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.input-error,
.input-error input {
    color: rgba(255, 0, 0, 0.77);
}

.input-error.checkbox-wrapper-46 .cbx span:first-child svg {
    stroke: rgba(255, 0, 0, 0.77);
}

.input-error.checkbox-wrapper-46 .cbx:hover span:first-child,
.input-error input {
    border-color: rgba(255, 0, 0, 0.77);
}

.input-error.checkbox-wrapper-46 .inp-cbx:checked+.cbx span:first-child {
    border-color: rgba(255, 0, 0, 0.77);
}

input.input-error {
    border: 1px solid rgba(255, 0, 0, 0.77);
}

.error-msg {
    font-size: 13px;
    color: rgba(255, 0, 0, 0.77);
    margin-top: 5px;
}

.menu-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 25px;
    cursor: pointer;
    width: 215px;
    position: relative;
}

.fs-41px {
    font-size: 41px;
}

.success-icon img {
    height: 45px;
}

.status-item-title {
    font-family: var(--font-adderley);
    font-size: 47px;
    font-weight: 700;
    line-height: 130%;
    text-transform: uppercase;
}

.link-muted {
    color: rgba(0, 0, 0, 0.31);
    cursor: pointer;
}

.link-muted:hover {
    color: black;
}

.auth-code-message {
    font-size: 15px;
    font-style: normal;
    line-height: 130%;
}

.auth-code-message b {
    font-weight: 500;
}

/* Сегментированный ввод кода (OTP): по окошку на каждую цифру */
.otp-input {
    display: flex;
    gap: 8px;
    width: 100%;
}

.otp-input__cell {
    flex: 1 1 0;
    min-width: 0;
    height: 60px;
    padding: 0;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-primary);
    border-radius: 9px;
    border: 1px solid rgba(0, 0, 0, 0.29);
    background: var(--color-white);
    -moz-appearance: textfield;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.otp-input__cell::-webkit-outer-spin-button,
.otp-input__cell::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.otp-input__cell.is-filled {
    border-color: rgba(0, 0, 0, 0.55);
}

.otp-input__cell:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
    outline: none;
}

.otp-input__cell.input-error {
    color: rgba(255, 0, 0, 0.77);
    border-color: rgba(255, 0, 0, 0.77);
}

@media (max-width: 380px) {
    .otp-input { gap: 6px; }
    .otp-input__cell { height: 52px; font-size: 20px; }
}

.text-small-link {
    font-size: 13px;
    line-height: 130%;
    text-decoration-line: underline !important;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    cursor: pointer;
}

.text-small-link.link-muted {
    cursor: not-allowed;
    color: rgba(0, 0, 0, 0.31) !important;
}

.text-small-link:not(.link-muted) {
    color: black;
}

.auth-code-send-timer {
    font-size: 13px;
    line-height: 130%;
    font-weight: 500;
    margin-left: 13px;
}

.home-title {
    font-family: var(--font-adderley);
    font-size: 59px;
    font-weight: 700;
    line-height: 130%;
}

/* Profile Navigation (Vio New) */

.profile-nav-item:hover {
    background: var(--c-slate-100);
    color: var(--c-slate-900);
}

.profile-nav-item:hover i {
    color: var(--color-primary);
}

/* Admin Specific Item */
.profile-nav-item--admin:hover {
    background: #fef2f2;
}

.avatar-edit-btn:hover {
    transform: scale(1.15);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    font-weight: 800;
    color: #000000;
    margin-bottom: 2px;
}

.input-with-icon .form-control:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.1) !important;
    outline: none;
}

/* Fix for selects in profile (Location block) */

.social-status-icon.plus:hover {
    color: var(--color-primary);
    transform: scale(1.1);
}

.social-card:hover {
    border-color: var(--c-slate-200);
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

.delete-profile-link:hover {
    color: #ef4444;
}

.social-card-v2:hover {
    background: var(--c-slate-100);
    border-color: var(--c-slate-200);
}

/* Subscriptions Page (Vio New) */

.subs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.subs-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    border: 1px solid var(--c-slate-200);
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.subs-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--c-slate-100);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.subs-identity-link:hover .subs-name {
    color: var(--color-primary);
}

.subs-name {
    font-size: 16px;
    font-weight: 800;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.btn-subs-toggle:hover {
    background: #fff1f0;
    color: #ef4444;
    border-color: #fecaca;
}

.btn-subs-toggle:hover .text-default {
    display: none;
}

.btn-subs-toggle:hover .text-hover {
    display: inline;
}

/* Recent Products Inside Sub Card */

.recent-item:hover img {
    transform: scale(1.1);
}

.recent-item:hover .recent-price {
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
}

/* Product card — строка цены: цена слева + бейдж баллов рядом, без space-between */
.product-item--price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    row-gap: 4px;
}

.ml-1 { margin-left: 4px; }

.modal-reward-info-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-amber-500);
    background: rgba(245, 158, 11, 0.08);
    padding: 10px;
    border-radius: 12px;
    border: 1px dashed rgba(245, 158, 11, 0.3);
    transition: all 0.2s ease;
}

.modal-reward-info-mini:hover {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.5);
}

/* Modal Specific Reward Info */
.modal-reward-info {
    margin-top: 15px;
    padding: 12px 16px;
    background: var(--c-slate-50);
    border-radius: 14px;
    border: 1px solid var(--c-slate-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Home Page Feature Announce (Vio New) */

.feature-announce-card {
    background: #ffffff;
    border-radius: 28px;
    padding: 40px;
    border: 1px solid var(--c-slate-200);
    box-shadow: 0 10px 40px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feature-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.feature-icon-box.tiers {
    background: rgba(245, 158, 11, 0.12);
    color: var(--c-amber-500);
}

.feature-icon-box.donations {
    background: rgba(236, 72, 153, 0.12);
    color: #ec4899;
}

.feature-icon-box.feed {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.feature-icon-box.audio {
    background: rgba(14, 165, 233, 0.12);
    color: #0ea5e9;
}

.feature-icon-box.chats {
    background: rgba(251, 191, 36, 0.15);
    color: #d97706;
}

.feature-icon-box.notifs {
    background: rgba(29, 209, 161, 0.12);
    color: var(--c-emerald-500);
}

/* ── Features carousel (slick) ── */
.home-features-carousel {
    position: relative;
    margin-top: 60px;
}
.home-features-carousel .feature-slide {
    padding: 0 12px;
    height: auto;
}
.home-features-carousel .slick-list { margin: 0 -12px; padding: 4px 0 10px; }
.home-features-carousel .slick-track { display: flex; }
.home-features-carousel .slick-slide { height: auto; }
.home-features-carousel .slick-slide > div { height: 100%; display: flex; }
.home-features-carousel .feature-announce-card {
    height: 100%;
    width: 100%;
}
/* до slick-init: первые 2 слайда показываем в строку, остальные прячем — без layout-jump */
.home-features-carousel:not(.slick-initialized) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.home-features-carousel:not(.slick-initialized) .feature-slide { padding: 0; }
.home-features-carousel:not(.slick-initialized) .feature-slide:nth-child(n+3) { display: none; }

/* Стрелки в фирменном стиле */
.home-features-carousel .slick-prev,
.home-features-carousel .slick-next {
    width: 44px; height: 44px;
    background: #fff;
    border: 1px solid var(--c-slate-200);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    z-index: 2;
}
.home-features-carousel .slick-prev { left: -22px; }
.home-features-carousel .slick-next { right: -22px; }
.home-features-carousel .slick-prev:before,
.home-features-carousel .slick-next:before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 14px;
    color: var(--c-slate-900);
    opacity: 1;
}
.home-features-carousel .slick-prev:before { content: '\f060'; }
.home-features-carousel .slick-next:before { content: '\f061'; }
.home-features-carousel .slick-disabled { opacity: .4; cursor: default; pointer-events: none; }

/* Точки */
.home-features-carousel .slick-dots { bottom: -36px; }
.home-features-carousel .slick-dots li button:before {
    font-size: 9px; color: var(--c-slate-300); opacity: 1;
}
.home-features-carousel .slick-dots li.slick-active button:before {
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .home-features-carousel:not(.slick-initialized) {
        grid-template-columns: 1fr;
    }
    .home-features-carousel .feature-slide { padding: 0 6px; }
    .home-features-carousel .slick-list { margin: 0 -6px; }
}

/* ── Hero fullbleed: единый блок с mosaic-фоном и контентом поверх ── */
.hero-fullbleed {
    --hero-radius: 40px;
    --hero-pad-x: 64px;
    --hero-pad-y: 80px;
    --hero-min-h: 580px;
    --mosaic-gap: 14px;
    --cover-radius: 18px;

    position: relative;
    width: 100%;
    min-height: var(--hero-min-h);
    border-radius: var(--hero-radius);
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    /* Нижний padding больше боковых/верхнего — «воздух» под кнопкой,
       чтобы контент не упирался в нижний край тёмного контейнера. */
    padding: var(--hero-pad-y) var(--hero-pad-x) calc(var(--hero-pad-y) + 22px);
    background: var(--c-slate-900); /* fallback slate-950, пока мозаика грузится */
}

/* Mosaic-фон — заполняет весь блок */
.hero-fullbleed__mosaic {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--mosaic-gap);
    padding: var(--mosaic-gap);
}

.hero-mosaic__col {
    position: relative;
    overflow: hidden;
    border-radius: var(--cover-radius);
}

.hero-mosaic__track {
    display: flex;
    flex-direction: column;
    gap: var(--mosaic-gap);
    animation: hero-mosaic-scroll var(--col-dur, 50s) linear infinite;
    animation-direction: var(--col-dir, normal);
    will-change: transform;
}

/* Разные скорости + направления — даёт визуальный ритм, как у Pinterest. */

.hero-mosaic__cover {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1; /* квадрат: обложки продуктов 16:9 → центр-кроп без портретной «вытянутости» */
    object-fit: cover;
    border-radius: var(--cover-radius);
    background: var(--c-slate-800);
}

@keyframes hero-mosaic-scroll {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-mosaic__track { animation: none; }
}

/* Тёмный overlay для читаемости текста — gradient слева направо.
   Левая часть (за текстом) почти непрозрачная → белый текст читается идеально;
   правая остаётся полупрозрачной, чтобы просвечивали обложки и тематические плитки. */
.hero-fullbleed__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(95deg,
            rgba(7, 11, 23, 0.97) 0%,
            rgba(7, 11, 23, 0.95) 34%,
            rgba(9, 14, 28, 0.72) 60%,
            rgba(12, 19, 38, 0.40) 100%
        ),
        radial-gradient(ellipse at 28% 50%, rgba(0, 64, 255, 0.22) 0%, transparent 58%);
}

/* Контент поверх */
.hero-fullbleed__content {
    position: relative;
    z-index: 1;
    max-width: 580px;
    color: #fff;
}

.hero-fullbleed__title {
    font-family: var(--font-adderley), sans-serif;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    margin: 0 0 24px;
    color: #fff;
    letter-spacing: -0.5px;
}

.hero-fullbleed__sub {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 36px;
}

.hero-fullbleed__cta { margin-bottom: 18px; }
/* Свечение под primary-кнопкой на тёмном фоне */
.hero-fullbleed__cta .btn-primary {
    box-shadow: 0 12px 40px rgba(0, 64, 255, 0.45);
}

/* Tablet: чуть компактнее, 4 колонки */
@media (max-width: 1100px) {
    .hero-fullbleed {
        --hero-pad-x: 48px;
        --hero-pad-y: 60px;
        --hero-min-h: 520px;
    }
    .hero-fullbleed__mosaic { grid-template-columns: repeat(4, 1fr); }
    /* Колонок-дивов всегда 5; в 4-колоночном гриде 5-я переносилась во 2-й ряд
       и обрезалась overflow:hidden («битая» нижняя карточка). Прячем именно её —
       колонки 0..3 (включая плитки подкаст/PDF) остаются в одном ряду. */
    .hero-mosaic__col--4 { display: none; }
    .hero-fullbleed__title { font-size: 44px; }
    .hero-fullbleed__sub { font-size: 18px; }
}

/* Mobile: компактнее, 3 колонки. Та же композиция — текст поверх мозаики. */
@media (max-width: 768px) {
    .hero-fullbleed {
        --hero-radius: 28px;
        --hero-pad-x: 28px;
        --hero-pad-y: 48px;
        --hero-min-h: 520px;
        --cover-radius: 12px;
        --mosaic-gap: 10px;
    }
    .hero-fullbleed__mosaic { grid-template-columns: repeat(3, 1fr); }
    /* 3 колонки → прячем 2 переполняющие правые (4-я и 5-я), остаются 0..2 —
       всегда заполнены обложками + плитка «Подкаст». Без переноса и обрезки. */
    .hero-mosaic__col--3,
    .hero-mosaic__col--4 { display: none; }

    .hero-fullbleed__title { font-size: 34px; }
    .hero-fullbleed__sub { font-size: 16px; margin-bottom: 28px; }
    .hero-fullbleed__content { max-width: 100%; }

    /* На узком экране — равномерный затемнитель сверху вниз, плотнее для читаемости. */
    .hero-fullbleed__overlay {
        background:
            linear-gradient(180deg,
                rgba(7, 11, 23, 0.92) 0%,
                rgba(7, 11, 23, 0.80) 100%
            );
    }
}

.feature-content h4 {
    font-size: 22px;
    font-weight: 800;
    color: #000;
    margin-bottom: 12px;
}

.feature-content p {
    font-size: 15px;
    color: var(--c-slate-500);
    line-height: 1.6;
    margin: 0;
}

.feature-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

/* AJAX Filter System (Vio New) */
.filter-toolbar {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid var(--c-slate-200);
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

.filter-search-box {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.filter-search-box i {
    position: absolute;
    left: 16px;
    color: var(--c-slate-400);
    font-size: 16px;
}

.filter-search-box input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 12px 16px 12px 42px;
    font-size: 15px;
    color: var(--c-slate-900);
    outline: none;
    min-height: 44px; /* WCAG 2.5.5 touch target */
}

.filter-search-box input::placeholder {
    color: var(--c-slate-400);
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

#ajax-sort {
    width: 180px !important;
    height: 44px;
    border-radius: 12px;
    font-size: 14px;
    background-color: var(--c-slate-50);
    border: 1px solid var(--c-slate-200);
    padding: 0 35px 0 12px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    transition: all 0.2s;
}

#ajax-sort:focus {
    border-color: var(--color-primary);
    outline: none;
}

.btn-filter-drawer {
    height: 44px;
    padding: 0 20px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-filter-drawer:hover {
    background: var(--color-primary--hover);
}

/* Category Chips */
.category-chips-scroll {
    overflow-x: auto;
    scrollbar-width: none;
}
.category-chips-scroll::-webkit-scrollbar {
    display: none;
}

.category-chips-container {
    display: flex;
    gap: 10px;
    padding-bottom: 5px;
}

.category-chip {
    padding: 8px 16px;
    background: #fff;
    border: 1px solid var(--c-slate-200);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-slate-600);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.category-chip:hover {
    background: var(--c-slate-50);
    border-color: var(--c-slate-300);
}

.category-chip.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Filter Drawer */
.filter-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.filter-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.filter-drawer {
    position: fixed;
    top: 70px; /* С небольшим зазором от хедера */
    right: -400px;
    width: 350px;
    max-width: 90%;
    height: calc(100% - 90px); /* Чтобы снизу тоже был зазор */
    background: #fff;
    z-index: 1000006; /* Выше кнопок, но ниже выпадающего меню */
    box-shadow: -10px 0 30px rgba(0,0,0,0.08);
    transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-left: 1px solid var(--c-slate-100);
    overflow: hidden; /* Важно: чтобы контент не перекрывал скругления */
}

.filter-drawer.open {
    right: 0;
}

.filter-drawer-header {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--c-slate-100);
}

.filter-drawer-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-slate-900);
}

.filter-drawer-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--c-slate-100);
    color: var(--c-slate-600);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s;
}

.filter-drawer-close:hover {
    background: var(--c-slate-200);
}

.filter-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.filter-group {
    margin-bottom: 25px;
}

.filter-group-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--c-slate-800);
}

.filter-drawer-footer {
    padding: 20px;
    border-top: 1px solid var(--c-slate-100);
    display: flex;
    justify-content: space-between;
    background: #fff;
}

.filter-drawer-footer .btn {
    width: 48%;
}

.filter-price-range {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-price-range .form-control {
    border-radius: 10px;
}

@media screen and (max-width: 768px) {
    .filter-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .filter-actions select, .btn-filter-drawer {
        width: 100% !important;
        justify-content: center;
    }
}

/* Subcategory Grid Overlay (Vio New) */

.subcategory-card:hover i {
    color: var(--color-primary);
}

/* Live Search Suggestions (Vio New) */
.filter-toolbar-wrapper {
    position: relative;
    z-index: 1000;
}

.search-live-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--c-slate-200);
    border-top: none;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    display: block;
    margin-top: -1px; /* Стык в стык */
    padding-top: 0;
    overflow: hidden;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-toolbar {
    position: relative;
    z-index: 1000;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    transition: border-radius 0.3s;
}

/* Когда предложения активны, убираем нижние скругления и нижнюю рамку у бара для бесшовности */
.filter-toolbar-wrapper.is-suggestions-active .filter-toolbar {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-color: transparent !important;
}

.search-live-suggestions.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.suggestion-product-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--c-slate-900);
    transition: background 0.2s;
    border-bottom: 1px solid var(--c-slate-100);
}

.suggestion-product-item:last-child {
    border-bottom: none;
}

.suggestion-product-item:hover {
    background: var(--c-slate-50);
}

.suggestion-product-preview {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--c-slate-100);
}

.suggestion-product-info {
    flex: 1;
    min-width: 0;
}

.suggestion-product-title {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-product-price {
    font-size: 12px;
    color: var(--color-primary);
    font-weight: 700;
}

.suggestion-no-results {
    padding: 15px;
    text-align: center;
    color: var(--c-slate-400);
    font-size: 13px;
}

.js-status-payment-area {
    min-height: 350px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    text-align: center;
}

.js-status-payment-area .spinner-modal {
    width: 60px;
    height: 60px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 25px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.text-status-modal-title {
    font-size: 22px;
    font-weight: 700;
    color: #1c1c1c;
    margin-bottom: 20px;
    line-height: 1.3;
}

/* Icon-status-modal — кружок-плашка с иконкой успеха/ошибки/спиннера.
   Используется в checkedPayment.php (tpl-*-success / tpl-reject) и в
   inline overlay'ях (gift-success-overlay в points.js). 2026-05-09:
   стили вынесены сюда чтобы overlay вне checkedPayment рендерился так же.
   `success` зелёный по умолчанию, `reject` красный; конкретный pak
   (donation/gift/subscription) переопределяет background через inline-style. */
.icon-status-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin-bottom: 4px;
}
.icon-status-modal.success    { background: var(--c-green-600); }
.icon-status-modal.reject     { background: var(--c-red-600); }
.icon-status-modal.processing { background: #f3f3f3; }

.text-status-modal-desc {
    font-size: 14px;
    color: var(--c-slate-600);
    line-height: 1.5;
}

/* ── checkedPayment.php — card-контейнер + анимации (refresh 2026-05-10) ──
   Раньше success/reject отображались прямо на body без обрамления — выглядело
   плоско. Карта (24px radius + soft shadow) делает экран центрированным
   фокусным элементом и матчится с .gift-modal__box / payment-modal языком. */
.checked-payment {
    width: 100%;
    max-width: 480px;
    margin: 80px auto 40px;
    padding: 40px 32px 32px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
    text-align: center;
    animation: cp-card-in .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cp-card-in {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)     scale(1);   }
}

/* Иконка-плашка увеличивается до 88px и получает мягкое свечение в тон. */
.checked-payment .icon-status-modal {
    width: 88px;
    height: 88px;
    margin-bottom: 8px;
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.25);
}
.checked-payment .icon-status-modal.reject     { box-shadow: 0 8px 24px rgba(220, 38, 38, 0.25); }
.checked-payment .icon-status-modal.processing { box-shadow: none; background: transparent; }

/* SVG-stroke-draw для check-mark: рисуется за 0.5с после появления карты.
   Применяется к path ВНУТРИ .icon-status-modal.success — родителю не нужно
   ничего менять, hooks через CSS. */
.checked-payment .icon-status-modal.success svg path {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: cp-check-draw .5s ease-out .15s forwards;
}
.checked-payment .icon-status-modal.success svg[fill="white"] path,
.checked-payment .icon-status-modal.success svg path[fill="white"] {
    /* SVG-иконки c filled-path (heart, маленький checkmark из subscription) — */
    /* для них stroke-анимация не работает; делаем pop-scale вместо. */
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
    transform-origin: center;
    animation: cp-icon-pop .4s cubic-bezier(.34,1.56,.64,1) .1s both;
}
@keyframes cp-check-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes cp-icon-pop {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

/* X-иконка reject — тот же pop, но без задержки (сразу видно, что не прошло). */
.checked-payment .icon-status-modal.reject svg path {
    transform-origin: center;
    animation: cp-icon-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}

/* Processing: меняем кустарный SVG-«солнце» на CSS-spinner матч payment_modal. */
.cp-spinner {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border: 4px solid var(--c-slate-100);
    border-top-color: var(--color-primary, var(--color-primary));
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

/* Анимированные точки в конце «обрабатывается». */
.cp-dots::after {
    content: '';
    display: inline-block;
    width: 1ch;
    text-align: left;
    animation: cp-dots 1.4s steps(4, end) infinite;
}
@keyframes cp-dots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}

/* Карта на мобилках — на всю ширину минус gap. */
@media (max-width: 600px) {
    .checked-payment {
        margin: 24px 12px;
        padding: 28px 20px 24px;
        border-radius: 18px;
        max-width: none;
    }
    .checked-payment .icon-status-modal {
        width: 76px;
        height: 76px;
    }
    .checked-payment .text-status-modal-title {
        font-size: 20px;
    }
}

/* Confetti-канва поверх карты — pointer-events: none чтобы не ловить клики. */
.cp-confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999998;
}

/* Lightning overlay — full-screen анимация при начислении бонус-баллов
   после успешной оплаты (checkedPayment.php → triggerLightningAnimation).
   Активируется добавлением .active. */
.pts-lightning-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
.pts-lightning-overlay.active { opacity: 1; pointer-events: all; }
.pts-lightning-icon {
    font-size: 100px;
    color: var(--color-primary);
    filter: drop-shadow(0 0 30px rgba(0, 64, 255, 0.8));
    transform: scale(0.5);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pts-lightning-overlay.active .pts-lightning-icon {
    transform: scale(1);
    opacity: 1;
    animation: pts-glow-pulse 1.5s infinite alternate;
}
.pts-lightning-text {
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    margin-top: 30px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease 0.3s;
}
.pts-lightning-overlay.active .pts-lightning-text {
    opacity: 1;
    transform: translateY(0);
}
.pts-lightning-sub {
    color: var(--c-slate-300);
    font-size: 16px;
    margin-top: 10px;
    opacity: 0;
    transition: opacity 0.5s ease 0.6s;
}
.pts-lightning-overlay.active .pts-lightning-sub { opacity: 1; }
@keyframes pts-glow-pulse {
    0%   { filter: drop-shadow(0 0 20px rgba(0, 64, 255, 0.6)); }
    100% { filter: drop-shadow(0 0 50px rgba(0, 64, 255, 1));   }
}

.btn-load-more-modern {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    background: #fff;
    border: 1px solid var(--c-slate-200);
    color: var(--c-slate-600);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.btn-load-more-modern:hover {
    background: var(--c-slate-50);
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.1);
    transform: translateY(-1px);
}

.btn-load-more-modern:active {
    transform: translateY(0);
}

.btn-load-more-modern i {
    font-size: 12px;
    transition: transform 0.3s;
}

.btn-load-more-modern:hover i {
    transform: rotate(180deg);
}

.btn-load-more-modern:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--c-slate-100);
}

.btn-menu-profile:hover {
    color: black;
    border: 1px solid black;
}

.btn-menu-profile:active {
    color: white;
    background: #3E3E3E;
}

.w-39 {
    width: 39%;
}

.w-61 {
    width: 61%;
}

.inline-flex {
    display: inline-flex;
}

.ava-img-profile {
    position: relative;
}

.ava-img-profile img {
    height: 131px;
    width: 131px;
    object-fit: cover;
    border-radius: 50%;
}

.link-black {
    color: black;
}

.form-line-label {
    font-size: 19px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.24px;
}

.form-line-control {
    padding: 0 0 13px 0;
    outline: none;
    border: none;
    border-bottom: 1px solid #000000;
    font-size: 21px;
    line-height: 130%;
}

.page-section-title {
    font-size: 29px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.32px;
}

.form-select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    font-size: 21px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.2px;
    border-radius: 9px;
    padding: 15px 39px 15px 21px;
    outline: none;
    border: 1.75px solid rgba(0, 0, 0, 0.50);
    background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none"> <path d="M14.3635 5.79301C14.1759 5.60554 13.9216 5.50023 13.6565 5.50023C13.3913 5.50023 13.137 5.60554 12.9495 5.79301L7.99946 10.743L3.04946 5.79301C2.86086 5.61085 2.60826 5.51006 2.34606 5.51234C2.08387 5.51462 1.83305 5.61979 1.64764 5.80519C1.46224 5.9906 1.35707 6.24141 1.35479 6.50361C1.35251 6.76581 1.45331 7.01841 1.63546 7.20701L7.29246 12.864C7.47999 13.0515 7.7343 13.1568 7.99946 13.1568C8.26463 13.1568 8.51894 13.0515 8.70646 12.864L14.3635 7.20701C14.5509 7.01948 14.6563 6.76518 14.6563 6.50001C14.6563 6.23485 14.5509 5.98054 14.3635 5.79301Z" fill="black"/> </svg>') no-repeat;
    background-position: right 15px top 50%;
}

table {
    border-collapse: collapse;
    width: 100%;
}

thead {
    background: #353535;
    border-top-left-radius: 21px;
}

thead th {
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.2px;
    color: white;
    text-align: center;
    padding: 9px;
}

thead th:first-child {
    border-top-left-radius: 21px;
}

thead th:last-child {
    border-top-right-radius: 21px;
}

tbody td {
    text-align: center;
    padding: 13px;
    font-size: 15px;
    line-height: 130%;
    letter-spacing: -0.16px;
}

tbody tr:nth-child(even) {
    background: #F3F3F3;
}

tbody tr:last-child td:first-child {
    border-bottom-left-radius: 21px;
}

tbody tr:last-child td:last-child {
    border-bottom-right-radius: 21px;
}

.area-file-upload:hover {
    background: #e9e9e9;
}

.area-file-upload:active {
    background: #dfdfdf;
}

textarea {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid black;
    border-radius: 9px;
    resize: vertical;
}

.counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 12px;
    color: #666;
}

.warning {
    color: orange;
    font-weight: bold;
}

.error {
    color: red;
    font-weight: bold;
}

.hashtag {
    background-color: #e0e0e0;
    padding: 5px 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    font-size: 14px;
}

.hashtag-input::placeholder {
    color: #999;
}

.w-20 {
    width: 20%;
}

.w-10 {
    width: 10%
}

.w-47-75 {
    width: 47.75%;
}

.mt-11px {
    margin-top: 11px;
}

.m-w-945px {
    max-width: 945px;
}

.catalog-title {
    font-family: var(--font-adderley);
    font-size: 57px;
    font-weight: 700;
    line-height: 130%;
    text-transform: uppercase;
}

.catalog-description {
    font-size: 19px;
    font-weight: 500;
    line-height: 130%;
}

.btn-pagination {
    background: #fff;
    border-radius: 5px;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #D1D1D1;
    font-size: 15px;
    font-weight: 600;
    color: black;
    line-height: 130%;
    letter-spacing: -0.16px;
}

.btn-pagination:hover:not(.disabled) {
    background: #d1d1d1;
}

.btn-pagination.active {
    border-color: black;
}

.gap-11px {
    gap: 11px;
}

.product-item--image .plyr__video-wrapper {
    border-top-left-radius: 19px;
    border-top-right-radius: 19px;
}

/* Topup-режим payment_modal — нет продукта/поста, поэтому скрываем
   head-блок (preview/название/цена), perks, subscription-options и
   email-разделитель. Раньше правило жило в points_page.css, но это
   ломало topup из gift-flow на других страницах (CSS не загружался).
   2026-05-09: переехало сюда — глобально для всех точек открытия topup. */
.modal-payment.is-topup .pm-head,
.modal-payment.is-topup .js-pm-perks,
.modal-payment.is-topup .js-pm-subscription-options,
.modal-payment.is-topup .pm-or-divider { display: none !important; }

.modal-payment {
    max-width: 745px;

    .plyr__video-wrapper {
        border-radius: 15px !important;
    }

    .plyr__controls {
        border-bottom-left-radius: 15px !important;
        border-bottom-right-radius: 15px !important;
    }
}

.content-product-preview .plyr__video-wrapper {
    border-radius: 15px !important;
}

.content-product-preview > img {
    width: 100%;
    max-height: 555px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .content-product-preview > img {
        max-height: none;
        height: auto;
    }
}

.payment-modal--title {
    font-family: var(--font-adderley);
    font-weight: 700;
    font-size: 45px;
    line-height: 130%;
    text-align: center;
    text-transform: uppercase;
}

.payment-modal-product-title {
    font-size: 23px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.24px;
}

.payment-description-pay {
    font-size: 13px;
    line-height: 130%;
    letter-spacing: -0.14px;
}

.btn-primary.disabled {
    cursor: default;
    background: #91abff;
    border-color: #91abff;
}

.spinner-modal {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    border: 11px solid var(--color-primary);
    animation: spinner-bulqg1 0.8s infinite linear alternate,
        spinner-oaa3wk 1.6s infinite linear;
}

.text-status-modal-title {
    font-family: var(--font-adderley);
    font-size: 47px;
    font-weight: 700;
    line-height: 130%;
    text-transform: uppercase;
    text-align: center;
}

.mr-11px {
    margin-right: 11px;
}

.ml-11px {
    margin-left: 11px;
}

.modal-preview-image {
    border-radius: 15px;
}

@keyframes spinner-bulqg1 {
    0% {
        clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
    }

    12.5% {
        clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
    }

    25% {
        clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
    }

    50% {
        clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
    }

    62.5% {
        clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
    }

    75% {
        clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
    }

    100% {
        clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
    }
}

@keyframes spinner-oaa3wk {
    0% {
        transform: scaleY(1) rotate(0deg);
    }

    49.99% {
        transform: scaleY(1) rotate(135deg);
    }

    50% {
        transform: scaleY(-1) rotate(0deg);
    }

    100% {
        transform: scaleY(-1) rotate(-135deg);
    }
}

.recommend-title {
    text-align: center;
    font-family: var(--font-adderley);
    font-size: 59px;
    font-weight: 700;
    line-height: 130%;
    text-transform: uppercase;
}

.modal-preview-image {
    width: 100%;
    max-height: 355px;
    border-radius: 15px;
}

.content-product-info {
    border-radius: 20px;
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 28px;
    box-sizing: border-box;
    align-self: flex-start;
    width: 100%;
}

.data-product-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1.3;
}

.data-product-value {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary);
    margin-top: 6px;
    word-break: break-word;
}

/* Ряд метрик (Формат / Размер / Длительность / Доступ / Жалоба / Поделиться) */
.product-meta-row {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.product-meta-row > .w-33 {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 0 14px;
}
.product-meta-row > .w-33:first-child {
    padding-left: 0;
}
.product-meta-row > .w-33 + .w-33 {
    border-left: 1px solid var(--border-subtle);
}

/* Унифицированные иконочные кнопки действий (share/report) в шапке продукта —
   одинаковый размер, без рамки, с мягким hover */
.product-inline-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.product-inline-action-btn i {
    font-size: 16px;
    line-height: 1;
}
.product-inline-action-btn:hover,
.product-inline-action-btn:focus-visible {
    background: var(--surface-muted);
    color: var(--text-primary);
    outline: none;
}

/* Группа действий в шапке страницы продукта (возле автора/рейтинга) */
.product-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
}
@media (max-width: 991px) {
    .product-header-actions {
        margin-left: auto;
    }
}

/* Chip-ы тем: нейтральные pill-ы в духе дизайн-системы */
.product-themes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.product-theme-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: var(--surface-muted);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.product-view-price-block {
    margin-top: auto;
    border-top: 1px solid var(--border-subtle);
    padding-top: 20px;
}

.title-description-product {
    font-size: 29px;
    font-weight: 600;
    line-height: 130%;
}

.description-content-product {
    font-size: 19px;
    line-height: 130%;
    white-space: pre-line;
}

.link-danger {
    color: red;
}

.product-item--image .plyr--audio .plyr__controls {
    height: 195px;
}

.rating-area:not(:checked)>label:hover,
.rating-area:not(:checked)>label:hover~label {
    color: gold;
}

.rating-area>input:checked+label:hover,
.rating-area>input:checked+label:hover~label,
.rating-area>input:checked~label:hover,
.rating-area>input:checked~label:hover~label,
.rating-area>label:hover~input:checked~label {
    color: gold;
    text-shadow: 1px 1px goldenrod;
}

.rate-area>label:active {
    position: relative;
}

.btn-tg.disabled {
    background: #f7f7f7;
    border-color: #f7f7f7;
}

.content-product-preview {
    position: relative;
    border-radius: 15px;
    overflow: clip;
}

.preview-rounded-wrapper {
    border-radius: 15px;
    overflow: hidden;
    transform: translateZ(0);
}

.product-preview-swiper .swiper-slide {
    display: flex;
    align-items: center; /* Центрируем по вертикали */
    justify-content: center;
    background: #00000005;
    border-radius: 15px;
    overflow: hidden;
    width: 100%;
}

.product-preview-swiper .swiper-slide img,
.product-preview-swiper .swiper-slide video {
    width: 100%;
    height: auto;
    display: block;
}

.product-preview-thumbs .swiper-slide {
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.product-preview-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid var(--color-primary);
}

.product-preview-thumbs .thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-access-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.07);
    color: #1a1a1a;
    font-size: 10px;
    margin-left: 5px;
    cursor: default;
    position: relative;
    flex-shrink: 0;
}

.product-access-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 30, 0.88);
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 20;
}

.product-access-icon::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(20, 20, 30, 0.88);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 20;
}

.product-access-icon:hover::after,
.product-access-icon:hover::before {
    opacity: 1;
}

.accordion-content button:hover {
    border-color: #000;
}

.e7f8g9h0 {
    background: white;
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    padding: 35px;
    width: 100%;
    margin: 0 auto;
}

.i1j2k3l4 {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.m5n6o7p8 {
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dark);
}

.m5n6o7p8 i {
    color: var(--primary);
    width: 24px;
    text-align: center;
}

.q9r0s1t2 {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 18px;
}

.u3v4w5x6 {
    flex: 1 1 300px;
    margin-bottom: 15px;
}

.y7z8a9b0 {
    display: block;
    margin-bottom: 7px;
    font-weight: 500;
    color: var(--dark);
    font-size: 14px;
}

.c1d2e3f4 {
    width: 100%;
    padding: 13px 15px;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 15px;
    transition: var(--transition);
    background: #fff;
}

.c1d2e3f4:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.1);
}

.g5h6i7j8 {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: #fafafa;
}

.g5h6i7j8:hover {
    border-color: var(--primary);
    background: rgba(138, 43, 226, 0.03);
}

.g5h6i7j8 i {
    font-size: 36px;
    color: var(--primary);
    margin-bottom: 12px;
}

.k9l0m1n2 {
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 15px;
}

.o3p4q5r6 {
    color: var(--gray);
    font-size: 13px;
}

.s7t8u9v0 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.w1x2y3z4 {
    margin-top: 18px;
}

.a5b6c7d8 {
    display: flex;
    align-items: center;
    background: var(--light);
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}

.a5b6c7d8 i {
    color: var(--primary);
    margin-right: 8px;
    font-size: 16px;
}

.e9f0g1h2 {
    flex: 1;
    font-size: 13px;
}

.i3j4k5l6 {
    color: var(--gray);
    font-size: 12px;
    margin-right: 12px;
}

.m7n8o9p0 {
    color: var(--secondary);
    cursor: pointer;
    font-size: 14px;
}

.q1r2s3t4 {
    background: rgba(138, 43, 226, 0.05);
    border-radius: 14px;
    padding: 22px;
    margin: 28px 0;
}

.u5v6w7x8 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 15px;
}

.y9z0a1b2 {
    font-weight: 600;
    font-size: 17px;
    color: var(--primary);
}

.c3d4e5f6 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary);
    color: white;
    padding: 9px 18px;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    font-size: 14px;
}

.c3d4e5f6:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.g7h8i9j0 {
    line-height: 1.7;
    margin-bottom: 22px;
    max-height: 140px;
    overflow-y: auto;
    padding-right: 8px;
    font-size: 14px;
}

.g7h8i9j0 p {
    margin-bottom: 12px;
}

.k1l2m3n4 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.o5p6q7r8 {
    margin-top: 5px;
    accent-color: var(--primary);
}

.s9t0u1v2 {
    font-size: 14px;
    line-height: 1.5;
}

.s9t0u1v2 a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.s9t0u1v2 a:hover {
    text-decoration: underline;
}

.w3x4y5z6:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.4);
}

.w3x4y5z6:active {
    transform: translateY(0);
}

.e1f2g3h4 {
    background: #f8f9ff;
    border-left: 4px solid var(--primary);
    padding: 15px;
    border-radius: 0 8px 8px 0;
}

.i5j6k7l8 {
    background: #f8f9ff;
    border-radius: 10px;
    padding: 15px;
    margin-top: 10px;
}

.m9n0o1p2 {
    color: #e74c3c;
    font-size: 13px;
    margin-top: 5px;
    display: none;
}

.q3r4s5t6 {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

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

@media (max-width: 768px) {
    .e7f8g9h0 {
        padding: 25px;
    }

    

    .btn.js-open-modal {
        margin-left: 0;
    }

    

    .m5n6o7p8 {
        font-size: 17px;
    }

    .g7h8i9j0 {
        max-height: 180px;
    }

    .u5v6w7x8 {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    

    .e7f8g9h0 {
        padding: 18px;
    }

    .g5h6i7j8 {
        padding: 18px;
    }

    .q1r2s3t4 {
        padding: 18px;
    }

    .u3v4w5x6 {
        flex: 1 1 100%;
    }
}

@keyframes gP6wK5 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pR8wK3 {
    0% {
        width: 30%;
    }

    50% {
        width: 70%;
    }

    100% {
        width: 30%;
    }
}

/* Адаптивность */

.k5lP0m a:hover {
    color: var(--c-blue-600);
    text-decoration: underline;
}

/* Анимации */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Адаптивность */

.error-page-number {
    font-weight: 700;
    font-size: 155px;
    text-align: center;
}

.error-page-title {
    font-size: 45px;
    text-align: center;
    font-weight: 500;
}

.d-block {
    display: block;
}

.js-upload-chunk--progress[value="0"] {
    display: none;
}

.role-selector {
    position: relative;
    display: flex;
    background: #f5f5f7;
    border-radius: 12px;
    padding: 6px;
    margin-bottom: 15px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.role-option {
    flex: 1;
    text-align: center;
    padding: 10px 5px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
    position: relative;
    font-weight: 500;
    color: #6b6b7b;
    border-radius: 10px;
}

.role-option.active {
    color: #1a1a1a;
}

.role-option:not(.active):hover {
    color: #424257;
}

.selector-highlight {
    position: absolute;
    top: 6px;
    height: calc(100% - 12px);
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
}

.role-info {
    text-align: center;
    font-size: 14px;
    color: #6b6b7b;
    line-height: 1.5;
    padding: 0 10px;
    transition: opacity 0.3s ease;
}

.role-icon {
    display: block;
    margin: 0 auto 1px;
    width: 24px;
    height: 19px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.role-option.active .role-icon {
    opacity: 1;
}

/* Адаптивность */

@keyframes verification {
    0% {
        left: -30%;
    }

    70% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

.employment-container {
    .status-container {
        text-align: center;
        padding: 2rem;
    }

    .status-title {
        color: #333;
        font-size: 1.1rem;
        font-weight: 500;
        margin-bottom: 1.8rem;
        line-height: 1.4;
    }

    .verification-loader {
        position: relative;
        height: 4px;
        background: #e0e0e0;
        border-radius: 2px;
        overflow: hidden;
    }

    .verification-progress {
        position: absolute;
        height: 100%;
        width: 30%;
        background: #4285f4;
        border-radius: 2px;
        animation: verification 1.8s infinite cubic-bezier(0.65, 0, 0.35, 1);
    }

    .document-icon {
        margin: 2.5rem auto 1.5rem;
        width: 48px;
        height: 48px;
        position: relative;
    }

    .page {
        position: absolute;
        width: 100%;
        height: 100%;
        background: white;
        border: 1.5px solid #e0e0e0;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .page-1 {
        transform: rotate(-3deg);
        z-index: 3;
    }

    .page-2 {
        transform: rotate(2deg);
        top: 2px;
        z-index: 2;
        opacity: 0.7;
    }

    .check-icon {
        width: 18px;
        height: 18px;
        border: 2px solid #4285f4;
        border-radius: 50%;
        position: relative;
        animation: pulse 1.5s infinite;
    }

    .check-icon::after {
        content: "";
        position: absolute;
        top: 1px;
        left: 5px;
        width: 2px;
        height: 8px;
        border: solid #4285f4;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
}

@keyframes appear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.7);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.employment-container-success {
    .status-container {
        text-align: center;
        padding: 2rem;
        animation: appear 0.6s ease-out;
    }

    .status-title {
        color: #333;
        font-size: 1.1rem;
        font-weight: 500;
        margin-bottom: 1.8rem;
        line-height: 1.4;
    }

    .success-icon {
        width: 60px;
        height: 60px;
        margin: 1.5rem auto 2rem;
        position: relative;
    }

    .circle {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: #34a853;
        fill: #34a853;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: scaleIn 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    .checkmark {
        width: 24px;
        height: 24px;
    }

    .checkmark path {
        stroke: white;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 48;
        stroke-dashoffset: 48;
        animation: draw 0.6s ease-out forwards 0.3s;
    }

    .confirmation-message {
        color: #34a853;
        font-weight: 500;
        font-size: 0.9rem;
        margin-top: 0.8rem;
        opacity: 0;
        animation: fadeIn 0.4s ease-out forwards 0.8s;
    }

    .details-card {
        background: white;
        border-radius: 12px;
        padding: 1.2rem;
        margin-top: 1.8rem;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        text-align: left;
        opacity: 0;
        animation: fadeInUp 0.5s ease-out forwards 0.9s;
    }

    .detail-item {
        display: flex;
        margin-bottom: 0.8rem;
        font-size: 0.9rem;
    }

    .detail-item:last-child {
        margin-bottom: 0;
    }

    .detail-label {
        color: #666;
        width: 50%;
        flex-shrink: 0;
    }

    .detail-value {
        color: #333;
        font-weight: 500;
    }
}

@keyframes actionsAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardAppear {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes iconShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-5px);
    }

    40%,
    80% {
        transform: translateX(5px);
    }
}

@keyframes circlePulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

@keyframes badgeAppear {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    80% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes textAppear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes detailsAppear {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.employment-container-reject {
    .status-card {
        padding: 39px 29px;
        position: relative;
        overflow: hidden;
        animation: cardAppear 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .error-icon {
        width: 90px;
        height: 90px;
        margin: 0 auto 25px;
        position: relative;
        animation: iconShake 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) both;
    }

    .error-circle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: #ffebee;
        opacity: 0;
        animation: circlePulse 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.2s forwards;
    }

    .error-badge {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: #f44336;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 5px 15px rgba(244, 67, 54, 0.2);
        animation: badgeAppear 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) both;
    }

    .error-badge i {
        color: white;
        font-size: 40px;
    }

    .status-title {
        color: #333;
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 15px;
        animation: textAppear 0.5s ease-out 0.4s both;
    }

    .status-subtitle {
        color: #757575;
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 30px;
        animation: textAppear 0.5s ease-out 0.5s both;
    }

    .error-details {
        background: #fff5f5;
        border-radius: 12px;
        padding: 20px;
        text-align: left;
        margin-bottom: 30px;
        border-left: 3px solid #f44336;
        animation: detailsAppear 0.5s ease-out 0.6s both;
    }

    .error-details h3 {
        color: #f44336;
        font-size: 16px;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }

    .error-details h3 i {
        margin-right: 8px;
    }

    .error-info {
        display: flex;
        margin-bottom: 12px;
        font-size: 14px;
    }

    .error-info:last-child {
        margin-bottom: 0;
    }

    .error-label {
        color: #757575;
        width: 140px;
        flex-shrink: 0;
    }

    .error-value {
        color: #333;
        font-weight: 500;
    }

    .actions {
        display: flex;
        gap: 15px;
        animation: actionsAppear 0.5s ease-out 0.7s both;
    }

    .btn {
        flex: 1;
        padding: 14px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn i {
        margin-right: 8px;
    }

    .btn-primary {
        background: #f44336;
        color: white;
        box-shadow: 0 4px 12px rgba(244, 67, 54, 0.25);
    }

    .btn-primary:hover {
        background: #e53935;
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(244, 67, 54, 0.3);
    }

    .btn-secondary {
        background: white;
        color: #333;
        border: 1px solid #e0e0e0;
    }

    .btn-secondary:hover {
        background: #f5f5f5;
        transform: translateY(-2px);
    }

    @media (max-width: 480px) {
        .status-card {
            padding: 30px 20px;
        }

        .actions {
            flex-direction: column;
        }

        .error-icon {
            width: 80px;
            height: 80px;
        }

        .status-title {
            font-size: 20px;
        }
    }
}

/* ── Баланс баллов в шапке ─────────────────────────────── */

/* Responsive mobile styling for balance pill */

.btn-success {
    background: #34a853;
    color: white;
}

.btn-danger {
    background: var(--c-red-600);
    color: white;
}

.mt-109px {
    margin-top: 109px;
}

.qzw-spinner {
    width: 56px;
    height: 56px;
    margin: 0 auto 22px;
    border: 3px solid rgba(66, 133, 244, 0.15);
    border-radius: 50%;
    border-top-color: #4285f4;
    animation: qzw-spin 1.1s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}

.qzw-progress::after {
    content: '';
    display: block;
    height: 100%;
    width: 65%;
    background: #4285f4;
    border-radius: 3px;
    animation: qzw-load 1.8s ease-in-out infinite;
}

@keyframes qzw-spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes qzw-load {
    0% {
        transform: translateX(-100%);
    }

    60% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(220%);
    }
}

@keyframes qzw-fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

[hidden] {
    display: none !important;
}

/* Обёртка держит кнопку и панель вместе */
.search-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Невидимый «мостик», чтобы ховер не обрывался при переходе на панель */
.search-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    top: 44px;
    /* высота кнопки */
    width: min(480px, 86vw);
    height: 12px;
    /* зазор между кнопкой и панелью */
    background: transparent;
}

/* Кнопка-лупа — строго и просто */
.search-btn {
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    outline: none;
}

.search-btn:hover {
    border-color: #9ca3af;
}

.search-btn:focus-visible {
    outline: 2px solid var(--c-blue-700);
    /* синий фокус */
    outline-offset: 3px;
}

.search-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Панель поиска (по умолчанию слева от обёртки) */
.search-panel {
    position: absolute;
    top: 56px;
    /* 44 кнопка + 12 зазор */
    left: 0;
    /* базовое положение */
    width: min(480px, 86vw);
    background: #fff;
    border: 1px solid var(--c-gray-200);
    border-radius: 8px;
    padding: 10px;
    z-index: 10;
    display: none;
    /* без анимаций */
}

.search-panel::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 12px;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background: #fff;
    border-left: 1px solid var(--c-gray-200);
    border-top: 1px solid var(--c-gray-200);
}

/* Режим «прижатия к правому краю» */
.search-wrap.is-overflow .search-panel {
    left: auto;
    right: 0;
    /* прижимаем к правому краю вьюпорта */
}

.search-wrap.is-overflow .search-panel::before {
    left: auto;
    right: 12px;
    /* «стрелочка» ближе к кнопке справа */
}

/* Показываем панель при наведении на обёртку или фокусе внутри */
.search-wrap:hover .search-panel,
.search-wrap:focus-within .search-panel {
    display: block;
}

/* Внутренности формы — просто и понятно */
.search-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.search-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: var(--c-gray-900);
    outline: none;
}

.search-input::placeholder {
    color: var(--c-gray-500);
}

.search-input:focus-visible {
    border-color: var(--c-blue-700);
    outline: 2px solid var(--c-blue-700);
    outline-offset: 2px;
}

.search-submit {
    padding: 10px 14px;
    border: 1px solid var(--c-blue-700);
    border-radius: 6px;
    background: var(--c-blue-600);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.search-submit:hover {
    background: var(--c-blue-700);
}

.search-submit:focus-visible {
    outline: 2px solid var(--c-blue-700);
    outline-offset: 2px;
}

.form-select-small {
    padding: 9px 37px 9px 15px;
    font-size: 17px;
}

/* ====== Базовая раскладка ================================================== */
.q3f9-app {
    display: flex;
    height: 87vh;
    background: #f6f7fb;
    color: #101828;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    border-radius: 20px;
    border: 1px solid var(--c-gray-200);
    overflow: hidden;
}

.q3f9-sidebar {
    width: 320px;
    min-width: 280px;
    max-width: 420px;
    border-right: 1px solid #2c2c2c;
    background: #1c1c1c;
    display: flex;
    flex-direction: column;
    color: #fff;
}

.q3f9-header {
    padding: 20px 16px 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.q3f9-title {
    font-weight: 700;
    font-size: 24px;
    margin: 0;
    color: #fff;
}

.q3f9-actions-row {
    display: flex;
    padding: 10px 16px;
    gap: 8px;
    align-items: center;
}

.q3f9-search-container {
    flex: 1;
    position: relative;
    background: #2c2c2c;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 12px;
}

.q3f9-search-container i {
    color: #8e8e8e;
    font-size: 14px;
}

.q3f9-search-container input {
    background: transparent;
    border: none;
    color: #fff;
    padding: 10px 8px;
    width: 100%;
    outline: none;
    font-size: 14px;
}

.q3f9-search-container input::placeholder {
    color: #8e8e8e;
}

.q3f9-action-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #2c2c2c;
    color: #fff;
    transition: all 0.2s ease;
}

.q3f9-filter-wrapper {
    position: relative;
}

.q3f9-filter-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #2c2c2c;
    border: 1px solid #3c3c3c;
    border-radius: 12px;
    width: 200px;
    display: none;
    flex-direction: column;
    z-index: 10001;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.q3f9-filter-menu.show {
    display: flex;
}

.q3f9-filter-item {
    padding: 12px 16px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s;
}

.q3f9-filter-item i {
    width: 16px;
    color: #8e8e8e;
}

.q3f9-filter-item:hover {
    background: #3c3c3c;
}

.q3f9-filter-item.active {
    background: #3c3c3c;
    color: #fff;
}

.q3f9-filter-item.active i {
    color: #fff;
}

.q3f9-action-btn:hover {
    background: #3c3c3c;
}

.q3f9-new-btn {
    background: #fff;
    color: #1c1c1c;
}

.q3f9-new-btn:hover {
    background: #f0f0f0;
}

.q3f9-filter-btn.active {
    background: #fff;
    color: #1c1c1c;
}

.q3f9-sort-info {
    padding: 5px 16px 15px 16px;
    color: #8e8e8e;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.q3f9-chatlist {
    overflow: auto;
    flex: 1;
}

.q3f9-chatitem {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    align-items: center;
    transition: background .15s;
}

.q3f9-chatitem:hover {
    background: rgba(255,255,255,0.05);
}

.q3f9-chatitem.q3f9-active {
    background: rgba(255,255,255,0.1);
}

.q3f9-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 calc(40px);
    border-radius: 50%;
    background: var(--c-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--c-slate-600);
    overflow: hidden;
}

.q3f9-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.q3f9-chatmeta {
    flex: 1;
    min-width: 0;
}

.q3f9-chatname {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0 0 2px;
    color: #fff;
}

.q3f9-chatlast {
    font-size: 13px;
    color: #8e8e8e;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.q3f9-time {
    font-size: 12px;
    color: #8e8e8e;
}

.q3f9-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0
}

.q3f9-threadhead {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #eef0f4;
    background: #fff;
    position: relative
}

.q3f9-threadhead--small {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
    overflow: hidden
}

.q3f9-threadhead--small > div {
    min-width: 0;
    overflow: hidden
}

.q3f9-back {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--c-gray-200);
    background: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.q3f9-threadtitle {
    font-weight: 700;
    margin: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%
}

.q3f9-threadtitle-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0
}

.q3f9-timehint {
    font-size: 12px;
    color: var(--c-slate-400);
    margin-top: 4px
}

.q3f9-thread {
    flex: 1;
    overflow: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.q3f9-bubble {
    position: relative;
    max-width: 72%;
    padding: 10px 12px;
    border-radius: 14px;
    margin: 6px 0;
    line-height: 1.35;
    font-size: 14px;
    word-wrap: break-word
}

.q3f9-me {
    margin-left: auto;
    background: var(--color-primary);
    color: #fff;
    border-top-right-radius: 4px
}

.q3f9-them {
    margin-right: auto;
    background: #fff;
    border: 1px solid #eef0f4;
    border-top-left-radius: 4px
}

/* ====== Вложения внутри сообщений ======================================== */
.q3f9-msgatt {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px
}

.q3f9-thumb {
    width: 92px;
    height: 92px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--c-gray-200);
    background: var(--c-slate-50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--c-slate-600);
    cursor: pointer
}

.q3f9-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

/* Улучшенный вид документов в сообщении */
.q3f9-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--c-gray-200);
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--c-gray-900);
    min-width: 220px;
    max-width: 280px
}

.q3f9-doc:hover {
    background: #f9fafb
}

.q3f9-docicon {
    width: 34px;
    height: 42px;
    border: 1px solid var(--c-slate-200);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: var(--c-slate-50)
}

.q3f9-docext {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 16px;
    background: var(--color-primary);
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.q3f9-doctxt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

.q3f9-docname {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.q3f9-docmeta {
    font-size: 12px;
    color: var(--c-slate-500);
    white-space: nowrap
}

/* ====== Панель ввода (компактный аплоад) ================================= */
.q3f9-inputbar {
    border-top: 1px solid #eef0f4;
    padding: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px
}

/* превью вложений (вверху) */
.q3f9-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.q3f9-atchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--c-gray-200);
    background: #ffffff;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    box-shadow: 0 1px 0 rgba(16, 24, 40, .03)
}

.q3f9-atchipimg {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--c-gray-200);
    display: flex;
    align-items: center;
    justify-content: center
}

.q3f9-atchipimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.q3f9-atchipname {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.q3f9-atchipsize {
    color: var(--c-slate-500)
}

.q3f9-atchiprm {
    border: none;
    background: transparent;
    color: var(--c-slate-700);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 2px;
    border-radius: 6px
}

.q3f9-atchiprm:hover {
    background: var(--c-slate-200)
}

.q3f9-inputrow {
    display: flex;
    gap: 8px;
    align-items: center
}

/* Единая капсула: скрепка + textarea + emoji */
.q3f9-field {
    flex: 1;
    display: flex;
    align-items: flex-end;
    min-height: 46px;
    background: #f4f4f5;
    border: 1.5px solid var(--c-gray-200);
    border-radius: 23px;
    padding: 0 4px;
    box-sizing: border-box;
    transition: border-color .2s, background .2s
}
.q3f9-field:focus-within {
    border-color: #b0b8c4;
    background: #f9fafb
}

.q3f9-field-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 46px;
    flex: 0 0 38px;
    cursor: pointer;
    color: #8b95a5;
    font-size: 19px;
    background: none;
    border: none;
    padding: 0;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
    position: relative
}
.q3f9-field-btn:hover { color: #4b5563 }

.q3f9-field-btn .emoji-trigger {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    padding: 0;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, transform .15s
}
.q3f9-field-btn .emoji-trigger:hover {
    transform: scale(1.1)
}

.q3f9-text {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 4px;
    font-size: 15px;
    line-height: 1.4;
    outline: none;
    resize: none;
    max-height: 140px
}

.q3f9-sendbtn {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 17px;
    transition: background .15s, transform .1s
}
.q3f9-sendbtn:hover { background: #0836d4 }
.q3f9-sendbtn:active { transform: scale(.92) }
.q3f9-sendbtn:disabled {
    background: var(--c-slate-200);
    color: var(--c-slate-400);
    cursor: not-allowed
}

.q3f9-icon {
    width: 20px;
    height: 20px;
    display: inline-block
}

/* ====== Лайтбокс ========================================================== */
.q3f9-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999
}

.q3f9-lightbox.q3f9-show {
    display: flex
}

.q3f9-lightbox img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4)
}

.q3f9-lightclose {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--c-slate-600);
    background: var(--c-slate-900);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer
}

.q3f9-lightclose:hover {
    background: var(--c-slate-800)
}

@media (max-width: 900px) {
    .q3f9-app {
        flex-direction: column;
        height: 77vh;
        /* dvh учитывает адресную строку/нижнюю панель браузера на мобилках,
           поэтому низ чата (строка ввода) не уезжает под браузерный chrome.
           vh-строка выше — fallback для старых браузеров без dvh. */
        height: 77dvh;
    }

    .q3f9-sidebar {
        width: 100%;
        max-width: none;
        border-right: none;
        border-bottom: 1px solid #2c2c2c;
        /* Сайдбар должен заполнять контейнер целиком, а не быть выше него.
           Раньше тут стояло 87dvh при .q3f9-app=77dvh + overflow:hidden →
           низ списка чатов (.q3f9-chatlist flex:1) уезжал под обрез и не
           скроллился. 100% = высота .q3f9-app, список скроллится в видимой зоне. */
        height: 100%;
    }

    .q3f9-main {
        /* Как и сайдбар — заполняем контейнер целиком (.q3f9-app=77dvh),
           иначе под строкой ввода оставалась пустота ~22dvh. */
        height: 100%
    }

    .q3f9-back {
        display: flex
    }

    /* состояния: список / чат */
    .q3f9-app:not(.q3f9-mobile-chat-open) .q3f9-main {
        display: none
    }

    .q3f9-app.q3f9-mobile-chat-open .q3f9-sidebar {
        display: none
    }

    .q3f9-thread {
        padding: 14px
    }

    .q3f9-bubble {
        max-width: 85%
    }

    .q3f9-inputbar {
        padding: 8px 10px
    }
    .q3f9-inputrow {
        gap: 8px
    }
    .q3f9-field {
        min-height: 42px;
        border-radius: 21px;
        padding: 0 2px
    }
    .q3f9-field-btn {
        width: 34px;
        height: 42px;
        flex: 0 0 34px;
        font-size: 17px
    }
    .q3f9-text {
        font-size: 15px;
        padding: 10px 4px
    }
    .q3f9-sendbtn {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        font-size: 15px
    }
}

.q3f9-chatitem.q3f9-unread .q3f9-chatname {
    font-weight: 800;
    color: #fff
}

.q3f9-chatitem.q3f9-unread .q3f9-chatlast {
    color: var(--c-slate-300);
    font-weight: 600
}

.q3f9-unreadwrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto
}

.q3f9-badge {
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0 6px;
    box-shadow: 0 1px 0 rgba(16, 24, 40, .06)
}

.status-dot-q1n8 {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    flex: none;
    background: #9ca3af;
    /* базово: офлайн серый */
}

/* Онлайн: зелёная пульсация */
.status-dot-q1n8[data-status="online"] {
    background: var(--c-emerald-500);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, .6);
    animation: pulse-q1n8 1.6s ease-out infinite;
}

/* Подсказка для офлайна */
.status-dot-q1n8[data-status="offline"]:hover::after {
    content: attr(data-lastseen);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-gray-900);
    color: #fff;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    animation: fadeIn-q1n8 .15s forwards;
    z-index: 10;
}

.status-dot-q1n8[data-status="offline"]:hover::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--c-gray-900);
    opacity: 0;
    animation: fadeIn-q1n8 .15s forwards;
    z-index: 10;
}

@keyframes pulse-q1n8 {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, .6);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

@keyframes fadeIn-q1n8 {
    to {
        opacity: 1;
    }
}

/* Контейнер-заглушка */
.plc_w9f2 {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    color: var(--c-gray-500);
    /* нейтральный серый */
    background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
    border: 1px dashed var(--c-gray-200);
    padding: 28px;
    box-sizing: border-box;
    user-select: none;
}

/* Иконка */
.plc_k7m1 {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: #f3f4f6;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02) inset;
}

.plc_i2v7 {
    width: 36px;
    height: 36px;
    opacity: 0.9;
}

/* Manila illustration placeholder */
.plc_illus {
    width: clamp(180px, 28vw, 240px);
    height: auto;
    margin-bottom: 16px;
    user-select: none;
    -webkit-user-drag: none;
}

/* Заголовок */
.plc_t3q8 {
    margin: 0;
    font-size: clamp(18px, 2vw, 20px);
    line-height: 1.2;
    color: var(--c-gray-900);
    letter-spacing: 0.2px;
}

/* Подзаголовок */
.plc_d5p4 {
    margin: 0;
    max-width: 520px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-gray-500);
}

/* Hover-микроэффект (если блок кликабельный в вашем UX) */
.plc_w9f2:hover {
    border-color: #d1d5db;
}

/* Анимация лёгкого появления */
@media (prefers-reduced-motion: no-preference) {
    .plc_w9f2 {
        animation: plc_fadeIn_s4m1 240ms ease-out;
    }

    @keyframes plc_fadeIn_s4m1 {
        from {
            opacity: 0;
            transform: translateY(4px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

.text-extra-small {
    font-size: 11px;
}

.q3f9-fileinput-visuallyhidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.q3f9-clipbtn {
    position: relative;
}

#q3f9-fileInput {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* ===== Индикатор "Онлайн" (пульс) ===== */
.q3f9-onl {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.q3f9-onltext {
    font-size: 12px;
    color: var(--c-emerald-500);
    font-weight: 600
}

.q3f9-onldot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c-emerald-500);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, .55);
    animation: q3f9-pulse 1.8s ease-out infinite;
}

@keyframes q3f9-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, .55)
    }

    70% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0)
    }
}

/* ===== Значок онлайн на аватарке в списке ===== */
.q3f9-avawrap {
    position: relative;
    width: 40px;
    height: 40px
}

.q3f9-avawrap .q3f9-avatar {
    width: 100%;
    height: 100%
}

.q3f9-statusdot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c-emerald-500);
    border: 2px solid #fff;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, .55);
    animation: q3f9-pulse 1.8s ease-out infinite;
}

/* компакт на мобиле */
@media (max-width:900px) {
    .q3f9-onldot {
        width: 9px;
        height: 9px
    }

    .q3f9-statusdot {
        width: 9px;
        height: 9px
    }
}

/* ===== Модалка настроек ===== */
.q3f9-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000
}

.q3f9-modal.q3f9-show {
    display: flex
}

.q3f9-modalbox {
    position: relative;
    width: min(680px, 92vw);
    background: #fff;
    border: 1px solid var(--c-gray-200);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(2, 6, 23, .2);
    padding: 16px 16px 12px
}

.q3f9-modaltitle {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 12px
}

.q3f9-newchat-box {
    width: 100%;
    max-width: 450px;
    padding: 24px;
    background: #1c1c1c;
    color: #fff;
    border-radius: 20px;
    border: 1px solid #2c2c2c;
}

.q3f9-newchat-search {
    position: relative;
    background: #2c2c2c;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    margin: 16px 0;
}

.q3f9-newchat-search i {
    color: #8e8e8e;
}

.q3f9-newchat-search input {
    background: transparent;
    border: none;
    color: #fff;
    padding: 12px 10px;
    width: 100%;
    outline: none;
}

.q3f9-newchat-list {
    max-height: 400px;
    overflow-y: auto;
}

.q3f9-newchat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.2s;
}

.q3f9-newchat-item:hover {
    background: rgba(255,255,255,0.05);
}

.q3f9-newchat-info {
    flex: 1;
}

.q3f9-newchat-name {
    font-weight: 600;
    font-size: 15px;
}

.q3f9-newchat-login {
    font-size: 13px;
    color: #8e8e8e;
}

.q3f9-closex {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #3c3c3c;
    background: #2c2c2c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    z-index: 10;
}

.q3f9-closex:hover {
    background: #3c3c3c;
    border-color: #4c4c4c;
}

/* Переключатель */

/* Радио-пилы (от кого принимать сообщения) */

/* ===== Статусы сообщений ===== */
.q3f9-msgstatus {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--c-slate-400);
    margin-top: 6px
}

.q3f9-check {
    width: 16px;
    height: 16px;
    display: inline-block
}

.q3f9-check svg {
    width: 16px;
    height: 16px;
    display: block
}

.q3f9-status-delivered {
    color: var(--c-slate-500)
}

/* ─────────── Reactions (2026-05-26) ─────────── */
.q3f9-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px
}

.q3f9-react-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(15, 23, 42, .06);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent
}

.q3f9-react-chip:hover {
    background: rgba(15, 23, 42, .12)
}

.q3f9-react-chip:active {
    transform: scale(.95)
}

.q3f9-react-chip--mine {
    background: rgba(59, 130, 246, .14);
    border-color: rgba(59, 130, 246, .45);
    color: var(--c-blue-700)
}

.q3f9-react-chip--mine:hover {
    background: rgba(59, 130, 246, .2)
}

.q3f9-react-emoji {
    font-size: 15px;
    line-height: 1
}

.q3f9-react-count {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: inherit
}

.q3f9-react-add {
    position: absolute;
    top: 50%;
    /* всегда справа от bubble, снаружи */
    right: -32px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(100, 116, 139, .35);
    border-radius: 50%;
    color: var(--c-slate-500);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    /* always visible — на hover bubble/самой кнопки полная непрозрачность */
    opacity: .55;
    transition: opacity .15s ease, background .15s ease, border-color .15s ease, color .15s ease
}

.q3f9-bubble:hover .q3f9-react-add,
.q3f9-react-add:hover,
.q3f9-react-add:focus {
    opacity: 1;
    border-color: rgba(100, 116, 139, .7);
    color: var(--c-slate-700)
}

@media (hover: none) {
    .q3f9-react-add { opacity: 1 }
}

/* Свои сообщения (.q3f9-me) прижаты к правому краю треда — кнопка
   на right:-32px уехала бы за viewport. Прячем её ВНУТРЬ bubble
   в правый верхний угол, со светлой полупрозрачкой на синем фоне. */
.q3f9-me .q3f9-react-add {
    right: 6px;
    top: 6px;
    transform: none;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .4);
    color: #fff
}

.q3f9-bubble.q3f9-me:hover .q3f9-react-add,
.q3f9-me .q3f9-react-add:hover,
.q3f9-me .q3f9-react-add:focus {
    background: rgba(255, 255, 255, .4);
    border-color: rgba(255, 255, 255, .8);
    color: #fff
}

/* На узких экранах bubble растягивается ближе к краю — даже для .q3f9-them
   кнопка может уйти за viewport. Применяем такое же «внутрь» поведение. */
@media (max-width: 640px) {
    .q3f9-react-add {
        right: 6px;
        top: 6px;
        transform: none;
        width: 22px;
        height: 22px;
        font-size: 14px
    }
}

.q3f9-react-add:hover {
    background: rgba(15, 23, 42, .06);
    border-color: rgba(100, 116, 139, .7);
    color: var(--c-slate-700)
}

.q3f9-react-popover {
    position: absolute;
    z-index: 50;
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .15);
}

.q3f9-react-popover button {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, transform .1s ease
}

.q3f9-react-popover button:hover {
    background: rgba(15, 23, 42, .08);
    transform: scale(1.15)
}

.q3f9-status-read {
    color: var(--c-emerald-500)
}

/* ===== Меню действий в шапке (блок/жалоба) ===== */
.q3f9-menubtn {
    margin-left: auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--c-gray-200);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: inherit;
    text-decoration: none
}

.q3f9-menu {
    position: absolute;
    right: 12px;
    top: 56px;
    background: #fff;
    border: 1px solid var(--c-gray-200);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(2, 6, 23, .15);
    display: none;
    min-width: 220px;
    z-index: 9999
}

.q3f9-menu.q3f9-show {
    display: block
}

.q3f9-menuitem {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer
}

.q3f9-menuitem:hover {
    background: var(--c-slate-50)
}

.q3f9-menuitem svg {
    width: 18px;
    height: 18px
}

/* Нормализация FontAwesome-иконок в выпадающем меню действий чата,
   чтобы fa-user-slash / fa-user-check / fa-triangle-exclamation /
   fa-trash-can выглядели в одинаковой визуальной колонке (одинаковая
   ширина, одинаковый font-size, единый цветовой акцент через модификаторы). */
.q3f9-menuitem i {
    font-size: 14px;
    line-height: 1;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    color: var(--c-slate-500);
}
.q3f9-menuitem span {
    font-size: 14px;
    color: var(--c-slate-900);
}
.q3f9-menuitem--danger i { color: var(--c-red-600); }
.q3f9-menuitem--success i { color: var(--c-green-600); }

/* пометка заблокированного в шапке */

.ww-wrap {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.ww-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--c-gray-200);
    border-radius: 10px;
    background: #fafafa;
    position: sticky;
    top: 8px;
    z-index: 2;
}

.ww-btn {
    border: 1px solid var(--c-gray-200);
    background: white;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.ww-btn:hover {
    background: #f3f4f6;
}

.ww-btn[aria-pressed="true"] {
    background: #eef2ff;
    border-color: #c7d2fe;
}

.ww-sep {
    width: 1px;
    background: var(--c-gray-200);
    margin: 0 4px;
}

.ww-editor {
    margin-top: 10px;
    border: 1px solid var(--c-gray-200);
    border-radius: 12px;
    padding: 14px;
    min-height: 220px;
    background: #fff;
}

.ww-editor:focus {
    outline: 2px solid #c7d2fe;
}

.ww-placeholder:empty:before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
}

.ww-footer {
    color: var(--c-gray-500);
    font-size: 12px;
    margin-top: 8px;
}

/* Немного типографики в контенте */
.ww-editor h2 {
    font-size: 1.25rem;
    margin: .6em 0;
}

.ww-editor blockquote {
    border-left: 3px solid var(--c-gray-200);
    margin: .8em 0;
    padding: .2em .8em;
    color: #374151;
    background: #fafafa;
}

.ww-editor code {
    padding: 0 .25em;
    border-radius: 4px;
    background: #f3f4f6;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.menu .btn {
    height: 44px;
}

.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #1f2937;
    /* slate-800 */
    cursor: pointer;
    transition: background .2s ease, transform .15s ease, color .2s ease, box-shadow .2s ease;
}

/* лёгкий «mist» */

.cmenu-c1x[data-count="0"]::after,
.cmenu-c1x:not([data-count])::after,
.cmenu-c1x[data-count=""]::after {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .cmenu-c1x[data-count]:not([data-count="0"])::after {
        animation: cmenuPulse-c1x 2.4s ease-in-out infinite;
    }

    @keyframes cmenuPulse-c1x {

        0%,
        100% {
            box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
            transform: translate(20%, -20%) scale(1);
        }

        60% {
            box-shadow: 0 0 0 8px rgba(239, 68, 68, .0);
            transform: translate(20%, -20%) scale(1.06);
        }
    }
}

/* Кнопка «Подписаться» — фиолетовая */

/* Кнопка «Вы подписаны» — серая/dim */

/* Вторичная кнопка (Написать) */

/* ===== Profile: two-column layout ===== */

/* Geo row: location + counts inline */

@media (max-width: 640px) {

    /* На мобильном counts в одну строку */
    
}

/* Right column: buttons stacked vertically */

/* Base action button */

/* Подписаться — синяя */

/* Вы подписаны — серая, red hover */

/* Написать — синяя */

/* Mobile */

/* ===== Old DTF sub-row (kept for fallback) ===== */

/* Основная кнопка «Подписаться» — синяя */

/* Состояние «Вы подписаны» — серый */

/* Hover на «Вы подписаны» — красный (намёк на отписку) */

/* Вторичная «Написать» */

.stx9-input:focus,
.stx9-select:focus {
    border-color: #84a7ff;
    box-shadow: 0 0 0 3px rgba(84, 132, 255, .2);
}

.stx9-btn:hover {
    background: #2557d6;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(47, 106, 255, .20);
}

.stx9-btn:active {
    transform: translateY(0);
}

/* Мелкие улучшения адаптива */

/* Карточка */

/* Заголовок */

/* Чипы */

/* Фолбек select */

/* Диапазон дат */

/* Основное число */

/* Метаданные */

.vvx7-trend-badge[data-vvx7-trend-dir="up"] {
    background: #dcfce7;
    color: #166534;
}

.vvx7-trend-badge[data-vvx7-trend-dir="down"] {
    background: #fee2e2;
    color: #991b1b;
}

/* Спарклайн */

/* Подвал */

/* Адаптив: покажем select на узких экранах */

/* ====== Mobile polish for vvx7- (добавить после основных стилей) ====== */

/* 1) Чипсы: на узких — один ряд со скроллом, крупнее тап-цели */

/* 2) Карточка: компактнее отступы, но не тесно */

/* 3) Управление периодом: на очень узких — показываем select, чипсы прячем */

/* 4) Главное число: делаем «вау» и читаемость на телефоне */

/* 5) Метаданные + спарклайн: складываем в колонку, спарклайн на 100% */

/* 6) Текстовые элементы: компактная типографика */

/* 7) Улучшаем «ощущение нативности» на iOS при горизонтальном скролле чипсов */

/* 8) Мелкий UX: недопуск «дрожи» при тапах */

.a9l-wrap {
    font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Arial
}

.a9l-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px
}

.a9l-input,
.a9l-select {
    border: 1px solid var(--c-slate-200);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 14px
}

.a9l-btn {
    border: 1px solid var(--c-slate-200);
    background: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer
}

.a9l-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--c-slate-200);
    border-radius: 12px;
    overflow: scroll
}

.a9l-table th,
.a9l-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef2f7;
    font-size: 14px;
    vertical-align: top
}

.a9l-table th {
    background: var(--c-slate-50);
    text-align: left;
    white-space: nowrap
}

.a9l-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--c-slate-300);
    font-size: 12px
}

.a9l-row {
    background: #fff
}

.a9l-row:nth-child(even) {
    background: #fcfcfd
}

.a9l-pag {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 12px
}

.a9l-pbtn {
    border: 1px solid var(--c-slate-200);
    background: #fff;
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer
}

.a9l-pbtn[disabled] {
    opacity: .5;
    cursor: not-allowed
}

.a9l-page {
    padding: 4px 9px;
    border: 1px solid var(--c-slate-200);
    border-radius: 8px;
    background: #fff;
    cursor: pointer
}

.a9l-page.a9l-active {
    background: var(--c-gray-900);
    color: #fff;
    border-color: var(--c-gray-900)
}

.a9l-msg {
    max-width: 680px;
    white-space: pre-wrap
}

.a9l-small {
    color: var(--c-gray-500);
    font-size: 12px
}

/* Позиция и базовая настройка */
.vxt-btn-3fA {
    position: fixed;
    right: 22px;
    bottom: 22px;
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    z-index: 9999;

    /* glassmorphism */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);

    box-shadow:
        0 10px 30px rgba(8, 15, 30, 0.35),
        0 2px 6px rgba(8, 15, 30, 0.12);
    color: #fff;
    /* иконка наследует */
    transition: transform 180ms cubic-bezier(.2, .9, .3, 1), box-shadow 180ms;
    outline: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Ring (пульсация) — тонкая анимация для внимания */
.vxt-ring-3fA {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(100, 150, 255, 0.18);
    animation: m3rPulse-0Qp 2.8s infinite;
    opacity: 1;
    transition: opacity 200ms;
}

/* Иконка */
.k9p-icon-8Xw {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(18, 123, 255, 0.95), rgba(26, 58, 255, 0.95));
    box-shadow: 0 6px 18px rgba(23, 40, 100, 0.28), inset 0 -2px 6px rgba(255, 255, 255, 0.06);
    transform: translateZ(0);
}

/* Стили SVG внутри (чтобы видела тема фона) */
.k9p-icon-8Xw svg {
    display: block;
    width: 22px;
    height: 22px;
    color: white;
}

/* Бейдж непрочитанных */
.m3r-badge-0Qp {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    background: linear-gradient(180deg, #ff3b30, #c82b23);
    color: #fff;
    box-shadow: 0 4px 10px rgba(200, 50, 50, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-weight: 600;
    transform-origin: center;
    transition: transform 160ms;
}

/* Подсказка (tooltip) */
.zpl-tooltip-6Tq {
    position: absolute;
    right: calc(100% + 14px);
    bottom: 50%;
    transform: translateY(50%) translateX(6px);
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    background: rgba(6, 10, 20, 0.88);
    color: #f7f9fc;
    box-shadow: 0 8px 30px rgba(3, 8, 20, 0.65);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease;
    will-change: transform, opacity;
    transform-origin: right center;
}

/* Псевдо-стрелка подсказки */
.zpl-tooltip-6Tq::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 7px solid transparent;
    border-left-color: rgba(6, 10, 20, 0.88);
}

/* Ховеры и фокус */
.vxt-btn-3fA:hover,
.vxt-btn-3fA:focus {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(8, 15, 30, 0.45);
}

.vxt-btn-3fA:hover .vxt-ring-3fA,
.vxt-btn-3fA:focus .vxt-ring-3fA {
    animation-play-state: paused;
    opacity: 0.85;
}

/* При ховере показываем подсказку и немного сдвигаем её */
.vxt-btn-3fA:hover .zpl-tooltip-6Tq,
.vxt-btn-3fA:focus .zpl-tooltip-6Tq {
    opacity: 1;
    transform: translateY(50%) translateX(0px);
}

/* Небольшая реакция бейджа */
.vxt-btn-3fA:hover .m3r-badge-0Qp,
.vxt-btn-3fA:focus .m3r-badge-0Qp {
    transform: scale(1.06);
}

/* Фокус-контраст для клавиатуры */
.vxt-btn-3fA:focus {
    box-shadow:
        0 10px 30px rgba(8, 15, 30, 0.35),
        0 0 0 4px rgba(30, 120, 255, 0.12);
    outline: none;
}

/* Адаптив: меньше на маленьких экранах */
@media (max-width: 420px) {
    .vxt-btn-3fA {
        right: 14px;
        bottom: 14px;
        width: 56px;
        height: 56px;
    }

    .k9p-icon-8Xw {
        width: 40px;
        height: 40px;
    }

    .zpl-tooltip-6Tq {
        display: none;
    }

    /* экономим место на очень маленьких экранах */
}

/* Ключевыеframes */
@keyframes m3rPulse-0Qp {
    0% {
        box-shadow: 0 0 0 0 rgba(100, 150, 255, 0.18);
    }

    50% {
        box-shadow: 0 0 0 14px rgba(100, 150, 255, 0.02);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(100, 150, 255, 0.0);
    }
}

.product-preview-swiper .swiper {
    width: 100%;
}

.product-preview-swiper .swiper-slide {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center;
    border-radius: 15px;
    overflow: hidden;
}

.product-preview-swiper .swiper-slide img {
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
}

.product-preview-thumbs .swiper-slide {
    width: 86px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.6;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.product-preview-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid rgba(0, 0, 0, 0.15);
}

.product-preview-thumbs .thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Небольшие стили для слайдера превью */
.product-preview-swiper {
    width: 100%;
    height: 420px;
}

.product-preview-swiper .preview-file-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px;
}

.preview-file-box .file-icon {
    font-size: 48px;
}

.modal-preview-image {
    max-width: 100%;
    max-height: 320px;
}

.swiper-button-next,
.swiper-button-prev {
    color: #000;
}

.product-preview-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

/* Подложка за стрелками Swiper */
.product-preview-swiper .swiper-button-next,
.product-preview-swiper .swiper-button-prev {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    /* полупрозрачный фон */
    backdrop-filter: blur(2px);
    /* лёгкий блюр для стиля (необязательно) */
    color: #fff;
    /* белая иконка стрелки */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.product-preview-swiper .swiper-button-next:hover,
.product-preview-swiper .swiper-button-prev:hover {
    background: rgba(0, 0, 0, 0.55);
}

.product-preview-swiper .swiper-button-next::after,
.product-preview-swiper .swiper-button-prev::after {
    font-size: 18px;
    /* уменьшаем стандартный размер стрелки */
    font-weight: bold;
}

.form-control-small {
    padding: 11px 13px;
}

.form-data-edit {
    transition-duration: .3s;
}

.form-data-edit:not(:focus) {
    padding: 0;
    border: 0;
    border-radius: 0;
}

.iframe-responsive-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.iframe-responsive-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.finx_7c3fa1_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

/* Панель поиска и «быстрые ссылки» */

/* Макет: сайдбар + контент */
.finx_7c3fa1_layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 22px;
}

@media (max-width: 980px) {
    

    .finx_7c3fa1_layout {
        grid-template-columns: 1fr;
    }
}

/* Сайдбар */

.finx_7c3fa1_toc a:hover {
    background: #f6f9ff;
    border-color: #dfe7f2;
}

/* Контент с разделами */
.finx_7c3fa1_sections {
    display: grid;
    gap: 16px;
}

.finx_7c3fa1_section {
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 18px;
    padding: 10px 12px;
    box-shadow: 0 10px 24px rgba(35, 54, 92, 0.06);
}

.finx_7c3fa1_section details {
    border-radius: 12px;
}

.finx_7c3fa1_section summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 10px;
    border-radius: 12px;
    transition: background .12s ease, border .12s ease;
    outline: none;
}

.finx_7c3fa1_section summary::-webkit-details-marker {
    display: none;
}

.finx_7c3fa1_section summary:focus-visible {
    box-shadow: 0 0 0 3px rgba(74, 116, 255, .25);
}

.finx_7c3fa1_section details[open] summary {
    background: #f7faff;
}

.finx_7c3fa1_tag {
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #eef4ff;
    color: #3c5cd6;
    border: 1px solid #dbe7ff;
}

.finx_7c3fa1_links {
    margin: 6px 0 14px;
    padding: 10px 10px 6px;
    border-top: 1px dashed #e7ecf3;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
}

.finx_7c3fa1_link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e7ecf3;
    border-radius: 12px;
    text-decoration: none;
    color: #1f2533;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    background: #fff;
}

.finx_7c3fa1_link:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(35, 54, 92, 0.08);
    border-color: #d6e2f3;
}

.finx_7c3fa1_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3c5cd6;
    flex: none;
    box-shadow: 0 0 0 6px rgba(60, 92, 214, .08);
}

.finx_7c3fa1_muted {
    color: #60708f;
    font-size: 13px;
}

.finx_7c3fa1_breadcrumbs {
    font-size: 13px;
    color: #60708f;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.finx_7c3fa1_breadcrumbs a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}

.finx_7c3fa1_breadcrumbs a:hover {
    border-bottom-color: #60708f;
}

/* Футер */

.finx_a1f92b-popover.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.finx_a1f92b-popover b {
    font-weight: 600;
}

.finx_a1f92b-popover ul {
    margin: 6px 0 10px 18px;
    padding: 0;
}

.finx_a1f92b-popover ul li {
    margin-bottom: 4px;
}

.swiper-wrapper {
    display: flex;
    align-items: center;
}

.plyr--video {
    width: 100%;
}

.swiper-slide .plyr--video {
    margin-bottom: 33px;
}

/* ===== СТИЛИ (префикс: finx_a3bf9c_) ===== */

@keyframes finx_a3bf9c-fade {
    from {
        opacity: 0;
        transform: translateY(4px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* Dropzone */

/* File info */

/* iFrame form */

/* Адаптив */

.plyr--fullscreen-fallback.plyr--fullscreen-active,
.plyr--fullscreen-active .plyr__video-wrapper {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: #000;
}

.modal.active {
    will-change: transform;
}

.r2m9x_label:hover .r2m9x_icon {
    transform: scale(1.1);
}

.r2m9x_switch:active .r2m9x_slider {
    transition-duration: 0.25s;
}

@keyframes r2m9x_iconBounce {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

.r2m9x_radio:checked+.r2m9x_label::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 9px;
    z-index: -1;
    opacity: 0;
    animation: r2m9x_fadeIn 0.3s ease-out forwards;
}

@keyframes r2m9x_fadeIn {
    to {
        opacity: 1;
    }
}

.finx_9fa3b1-return {
    position: fixed;
    left: max(16px, env(safe-area-inset-left));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 9999;

    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;

    font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    color: #fff;

    background: linear-gradient(180deg, var(--color-primary), #173abd);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;

    box-shadow:
        0 10px 24px rgba(0, 64, 255, .18),
        inset 0 1px 0 rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: saturate(120%) blur(6px);
    backdrop-filter: saturate(120%) blur(6px);

    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
}

.finx_9fa3b1-return:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 28px rgba(0, 64, 255, .24),
        inset 0 1px 0 rgba(255, 255, 255, .22);
}

.finx_9fa3b1-return:active {
    transform: translateY(0);
    opacity: .95;
}

.finx_9fa3b1-return:focus {
    outline: none;
}

.finx_9fa3b1-return:focus-visible {
    box-shadow:
        0 0 0 0 rgba(0, 0, 0, 0),
        0 0 0 3px rgba(255, 255, 255, .9),
        0 0 0 6px rgba(0, 64, 255, .55);
}

.finx_9fa3b1-ic {
    display: inline-block;
    flex: 0 0 auto;
    fill: currentColor;
    opacity: .95;
}

.finx_9fa3b1-label {
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: .2px;
}

@media (max-width: 420px) {
    .finx_9fa3b1-label {
        display: none;
    }

    .finx_9fa3b1-return {
        padding: 12px;
        border-radius: 16px;
    }
}

@media (prefers-color-scheme: dark) {
    .finx_9fa3b1-return {
        border-color: rgba(255, 255, 255, .12);
        box-shadow:
            0 10px 24px rgba(0, 64, 255, .28),
            inset 0 1px 0 rgba(255, 255, 255, .12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .finx_9fa3b1-return {
        transition: none;
    }
}

.m3p8q-notice-container {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    margin: 12px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: relative;
}

.m3p8q-notice-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.m3p8q-notice-title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.m3p8q-notice-icon {
    flex-shrink: 0;
    opacity: 0.8;
}

.m3p8q-notice-title {
    font-weight: 600;
    font-size: 15px;
    color: #495057;
    letter-spacing: -0.01em;
}

.m3p8q-close-button {
    background: none;
    border: none;
    padding: 4px;
    margin: -4px -4px 0 0;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

.m3p8q-close-button:hover {
    background: #e9ecef;
}

.m3p8q-close-button:active {
    background: #dee2e6;
}

.m3p8q-notice-content {
    margin-bottom: 0;
}

.m3p8q-notice-text {
    margin: 6px 0;
    line-height: 1.4;
    color: #6c757d;
    font-size: 13px;
}

.m3p8q-notice-text:first-child {
    margin-top: 0;
}

.m3p8q-notice-text:last-child {
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .m3p8q-notice-container {
        margin: 10px;
        padding: 14px;
        max-width: 300px;
    }

    .m3p8q-notice-title {
        font-size: 14px;
    }

    .m3p8q-notice-text {
        font-size: 12px;
    }

    .m3p8q-notice-icon {
        width: 16px;
        height: 16px;
    }
}

.f5k2r-fixed-notice {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px;
    max-width: 280px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* Скрыт по умолчанию — storage.js покажет (display:block), если баннер НЕ закрыт.
       Без этого закрытый баннер мелькал при загрузке до срабатывания JS (FOUC). */
    display: none;
    /* Шапка и тело — строго друг под другом. Страховка на случай, если
       кто-то снова выставит display:flex контейнеру (иначе шапку и тело
       уносит в две колонки). */
    flex-direction: column;
}

.f5k2r-notice-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
}

.f5k2r-notice-title-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.f5k2r-notice-icon {
    flex-shrink: 0;
    opacity: 0.8;
}

.f5k2r-notice-title {
    font-weight: 600;
    font-size: 14px;
    color: #495057;
    letter-spacing: -0.01em;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.f5k2r-close-button {
    background: none;
    border: none;
    padding: 3px;
    margin: -3px -3px 0 0;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
    margin-left: 8px;
}

.f5k2r-close-button:hover {
    background: #e9ecef;
}

.f5k2r-close-button:active {
    background: #dee2e6;
}

.f5k2r-notice-content {
    margin-bottom: 0;
}

.f5k2r-notice-text {
    margin: 0;
    line-height: 1.3;
    color: #6c757d;
    font-size: 12px;
    overflow-wrap: break-word;
    word-break: break-word;
}

@media (max-width: 768px) {
    .f5k2r-fixed-notice {
        bottom: 15px;
        left: 15px;
        right: 111px;
        max-width: none;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .f5k2r-fixed-notice {
        bottom: 10px;
        left: 10px;
        right: 111px;
        padding: 10px;
    }

    .f5k2r-notice-title {
        font-size: 13px;
    }

    .f5k2r-notice-text {
        font-size: 11px;
    }

    .f5k2r-notice-icon {
        width: 14px;
        height: 14px;
    }
}

.finx_b3e9a2_wrap {
    max-width: 720px;
    margin: 0 auto;
    color: #111;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

.finx_b3e9a2_head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.finx_b3e9a2_title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
}

.finx_b3e9a2_sub {
    color: #555;
    font-size: 14px;
    margin-top: 4px;
}

.finx_b3e9a2_panel {
    border: 1px solid #eceff5;
    border-radius: 16px;
    padding: 14px;
}

.finx_b3e9a2_label {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.finx_b3e9a2_emailRow {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e7e9f2;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
}

.finx_b3e9a2_emailRow code {
    background: #f5f7fd;
    border: 1px dashed #e3e7f7;
    padding: 2px 6px;
    border-radius: 8px;
}

.finx_b3e9a2_grid {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.finx_b3e9a2_opt {
    position: relative;
    display: block;
}

.finx_b3e9a2_radio {
    position: absolute;
    inset: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.finx_b3e9a2_box {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #fff;
    border: 1.5px solid #e6e9f3;
    border-radius: 14px;
    padding: 12px;
    transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
    cursor: pointer;
}

.finx_b3e9a2_box:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
}

.finx_b3e9a2_dot {
    flex: 0 0 18px;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border: 2px solid #cfd6ea;
    display: inline-block;
    box-shadow: inset 0 0 0 6px transparent;
    transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
    margin-top: 2px;
}

.finx_b3e9a2_text b {
    display: block;
    margin-bottom: 2px;
}

.finx_b3e9a2_text small {
    color: #666;
}

.finx_b3e9a2_radio:checked+.finx_b3e9a2_box {
    border-color: var(--color-primary);
    box-shadow: 0 8px 22px rgba(0, 64, 255, .12);
    background: linear-gradient(0deg, #ffffff, #ffffff);
}

.finx_b3e9a2_radio:checked+.finx_b3e9a2_box .finx_b3e9a2_dot {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 6px var(--color-primary);
}

.finx_b3e9a2_radio:focus-visible+.finx_b3e9a2_box {
    outline: 0;
    box-shadow: 0 0 0 4px rgba(0, 64, 255, .18), 0 8px 22px rgba(0, 0, 0, .06);
}

.finx_b3e9a2_other {
    margin-top: 10px;
    display: none;
}

.finx_b3e9a2_textarea {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    font: inherit;
    color: #111;
    background: #fff;
    border: 1px solid #e4e7f0;
    border-radius: 12px;
    padding: 10px 12px;
    transition: box-shadow .15s, border-color .15s;
}

.finx_b3e9a2_textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0, 64, 255, .12);
}

.finx_b3e9a2_actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.finx_b3e9a2_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 22px;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: .2px;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 14px 30px rgba(0, 64, 255, .28);
    transition: transform .08s ease, box-shadow .12s ease, opacity .12s ease;
}

.finx_b3e9a2_btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(0, 64, 255, .32);
}

.finx_b3e9a2_btn:active {
    transform: translateY(0);
}

.finx_b3e9a2_btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.finx_b3e9a2_btn--full {
    width: 100%;
}

.finx_b3e9a2_spin {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .55);
    border-top-color: #fff;
    display: inline-block;
    margin-right: 10px;
    animation: finx_b3e9a2_spin .9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {

    .finx_b3e9a2_box,
    .finx_b3e9a2_btn {
        transition: none;
    }

    .finx_b3e9a2_spin {
        animation: none;
        display: none;
    }
}

.finx_b3e9a2_alert {
    display: none;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid transparent;
}

.finx_b3e9a2_alert--ok {
    background: #e9f7ef;
    border-color: #ccefdc;
    color: #0f6c3f;
}

.finx_b3e9a2_alert--err {
    background: #fff2f2;
    border-color: #ffdede;
    color: #b00020;
}

.finx_b3e9a2_footer {
    margin-top: 14px;
    font-size: 12px;
    color: #888;
    text-align: center;
}

.w-20 {
    width: 20%;
}

@keyframes finx_4d8a3c-fade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* при нехватке места можно сделать их в строку */

/* Контейнер табов: чисто, без теней */

/* Кнопки-табов: крупные кликабельные области */

/* Подчёркивание-акцент (скользящая линия) */

/* Фокус клавиатурой */

/* Адаптив — можно уменьшить зазоры и размер шрифта */

.btn-menu:hover {
    color: #000;
}

/* ============ POST CARD ============ */

/* Header */

/* Text with clamp and "more" handled by JS */

/* Media grid */

/* Layouts by count */

/* +N overlay for extra media */
.finx_9a3fbc-item[data-more]::after {
    content: attr(data-more);
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-weight: 700;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Footer actions */

/* Lightbox */

/* Adaptive tweaks */

/* Slick base tweaks (можно в конец твоего CSS) */
.finx_9a3fbc-lb-slider .slick-slide {
    display: flex !important;
    align-items: center;
    justify-content: center
}

.finx_9a3fbc-lb-slider img,
.finx_9a3fbc-lb-slider video {
    max-width: 100%;
    max-height: 82vh;
    border-radius: 12px;
    display: block
}

.finx_9a3fbc-lb-slider .slick-prev,
.finx_9a3fbc-lb-slider .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .95);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 0;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

.finx_9a3fbc-lb-slider .slick-prev {
    left: 10px
}

.finx_9a3fbc-lb-slider .slick-next {
    right: 10px
}

.finx_9a3fbc-lb-slider .slick-prev:before,
.finx_9a3fbc-lb-slider .slick-next:before {
    color: #1b2430;
    font-size: 20px;
    line-height: 40px;
    opacity: 1;
}

.finx_9a3fbc-lb-slider .slick-dots {
    bottom: -28px
}

.finx_9a3fbc-lb-slider .slick-dots li button:before {
    opacity: .35;
    color: #fff
}

.finx_9a3fbc-lb-slider .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #fff
}

/* Чуть компактнее на мобилке */
@media (max-width:560px) {

    .finx_9a3fbc-lb-slider .slick-prev,
    .finx_9a3fbc-lb-slider .slick-next {
        width: 36px;
        height: 36px
    }

    .finx_9a3fbc-lb-slider .slick-prev:before,
    .finx_9a3fbc-lb-slider .slick-next:before {
        font-size: 18px;
        line-height: 36px
    }
}

@media screen and (max-width: 800px) {

    .advantage-icon {
        margin-bottom: 15px;
    }

    .mt-185px {
        margin-top: 125px;
    }

    .product-item {
        width: 100%;
    }

    

    

    

    

    .advantage-title {
        margin-bottom: 35px;
    }

    .home-title {
        font-size: 35px;
    }

    .menu-profile {
        width: 100%;
    }

    

    .w-39.m-w-100 {
        width: 100%;
    }

    .w-61.m-w-100 {
        width: 100%;
    }

    .catalog-title {
        font-size: 37px;
    }

    .data-product-title {
        font-size: 12px;
    }

    .data-product-value {
        font-size: 17px;
    }

    .content-product-info {
        padding: 22px;
        gap: 20px;
    }

    .product-meta-row > .w-33 {
        padding: 0 14px;
    }

    table {
        overflow-x: scroll;
        max-width: 100%;
        display: block;
    }

    .m-f-d-column {
        flex-direction: column;
    }

    

    .m-w-100 {
        width: 100% !important;
    }

    .mt-109px {
        margin-top: 0 !important;
    }

    .q3f9-threadtitle {
        font-size: 13px;
    }

    .q3f9-timehint {
        font-size: 11px;
    }

    

    
}

/* Share Functionality */

/* User Provided CSS */
.share-btn {
    cursor: pointer;
    transition: color .18s ease, transform .12s ease;
}

.share-btn--copied {
    color: #1aa463;
}

.share-btn--copied i {
    transform: scale(1.05);
}

/* Глобальный toast «Ссылка скопирована». Один на всё приложение
   (#shareCopyToast). Появляется снизу-по-центру, fade-in, авто-скрытие. */
.share-copy-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translate(-50%, 12px);
    background: rgba(20, 20, 25, .92);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.2;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
    pointer-events: none;
    opacity: 0;
    z-index: 10001;
    transition: opacity .18s ease, transform .18s ease;
}

.share-copy-toast--visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.share-popup {
    position: absolute;
    display: none;
    z-index: 9999;
}

.qr-popup {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
    z-index: 10000;
}

.share-popup.active {
    display: block;
}

.qr-popup.active {
    display: flex;
}

.share-card {
    width: 320px;
    background: #fff;
    border: 1px solid var(--c-gray-200);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.qr-card {
    width: min(520px, 92vw);
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

.share-top {
    display: flex;
    gap: 10px;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 10px;
}

#shareUrlInput {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    width: 100%;
}

.copy-btn {
    border: 0;
    background: #f2f2f2;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
}

.share-actions {
    margin-top: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.share-icon {
    border: 1px solid #eee;
    background: #fafafa;
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    text-decoration: none;
    color: #111;
    display: inline-flex;
    align-items: center;
}

.close-btn {
    margin-top: 14px;
    width: 100%;
    border: 0;
    padding: 12px;
    border-radius: 12px;
    background: #111;
    color: #fff;
    cursor: pointer;
}

.qr-wrap {
    display: flex;
    justify-content: center;
    padding: 10px;
}

.qr-wrap img {
    width: 220px;
    height: 220px;
}

@media screen and (max-width: 800px) {

    .footer_yandex {
        margin-top: 30px;
    }
}

.footer_yandex {
    margin-top: 50px;
}

.ad-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-height: 500px;
    overflow: hidden;
}

.f-c-c {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Bell Icon & Notifications Dropdown */

.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #1f2937;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease, color .2s ease, box-shadow .2s ease;
    padding: 0;
}

.notif-bell:hover {
    background: rgba(15, 23, 42, 0.06);
}

.notif-bell:active {
    transform: translateY(1px) scale(.98);
}

.notif-bell::after {
    content: attr(data-count);
    position: absolute;
    top: -2px;
    right: -2px;
    transform: translate(20%, -20%);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    pointer-events: none;
}

.notif-bell[data-count="0"]::after,
.notif-bell:not([data-count])::after,
.notif-bell[data-count=""]::after {
    display: none;
}

.notif-bell[data-count]:not([data-count="0"])::after {
    animation: cmenuPulse-c1x 2.4s ease-in-out infinite;
}

.notif-bell[data-count]:not([data-count="0"])::after {
    animation: cmenuPulse-c1x 2.4s ease-in-out infinite;
}

/* .notif-* styles унифицированы выше (см. блок «Notification side panel»). */

/* Custom Slick Slider Arrows */
.product-item--image-slider .slick-prev,
.product-item--image-slider .slick-next {
    width: 32px;
    height: 32px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    top: auto;
    bottom: 9px;
    transform: none;
    font-size: 0;
    opacity: 1;
    transition: opacity 0.3s, background 0.3s, box-shadow 0.3s;
}

.product-item--image-slider .slick-prev {
    left: 10px;
    padding-right: 2px;
}

.product-item--image-slider .slick-next {
    right: 10px;
}

.product-item--image-slider .slick-prev:before,
.product-item--image-slider .slick-next:before {
    font-family: 'Font Awesome 6 Free'; /* Use Font Awesome */
    font-weight: 900; /* Required for solid icons */
    font-size: 16px; /* Make them bigger */
    color: #fff;
    opacity: 1;
    transition: color 0.3s;
    display: block;
    line-height: 1;
}

.product-item--image-slider .slick-prev:hover,
.product-item--image-slider .slick-next:hover {
    background: rgba(0, 0, 0, 0.55);
}

.product-item--image-slider .slick-prev:hover:before,
.product-item--image-slider .slick-next:hover:before {
    color: #fff; 
}

.product-item--image-slider .slick-prev:before {
    content: '\f104'; /* Font Awesome left angle icon */
}

.product-item--image-slider .slick-next:before {
    content: '\f105'; /* Font Awesome right angle icon */
}

/* Fix for slider container breaking border-radius.
   ВАЖНО: height + overflow:hidden ловит весь FOUC и любые клоны от slick
   (infinite=true клонирует первый/последний слайды ДО translateX) — без
   фиксированной высоты в момент slick-init layout «прыгает» на пару кадров
   и пользователь видит стопку слайдов вертикально. См. блок «Рекомендуем»
   в product_view.php. */
.product-item--image-slider {
    border-top-left-radius: 19px;
    border-top-right-radius: 19px;
    overflow: hidden;
    height: 195px;
}

/* Каскад наследования верхнего radius через все обёртки slick'а и .slider-slide.
   Без этого <img> внутри .slider-slide получает radius=0 (inherit от родителя, у
   которого radius не задан) и верх карточки обрезается прямой линией, когда
   slick по какой-то причине не применяет overflow:hidden на slick-list
   (например, single-slide rail). Видно в блоке «Рекомендуем» на product_view. */
.product-item--image-slider .slick-list,
.product-item--image-slider .slick-track,
.product-item--image-slider .slick-slide,
.product-item--image-slider .slick-slide > div,
.product-item--image-slider .slider-slide {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* Высота 195px на сам слайд — чтобы и до slick-init (когда обёртка .slick-slide
   ещё не появилась), и после, размер был детерминированным. Это закрывает
   ту же дыру что и фикс ниже для <video>, но для image/audio-плейсхолдеров. */
.product-item--image-slider .slider-slide,
.product-item--image-slider .slick-slide {
    height: 195px;
}

/* Fix for slider jumping height with video.
   Раньше селектор был `.slick-slide video` — но до slick-init у video родитель
   `.slider-slide`, и правило не применялось → нативные <video controls> без
   размеров разворачивались в дефолтные ~300×150 и «выпрыгивали» из карточки,
   растягивая её высоту. Селектор без `.slick-slide` действует независимо
   от состояния slick. */
.product-item--image-slider video {
    height: 195px;
    width: 100%;
    object-fit: cover;
    display: block;
}

/* Custom styles for Slick dots */
.product-item--image-slider .slick-dots {
    bottom: 15px; /* Position them a bit higher */
}

.product-item--image-slider .slick-dots li {
    margin: 0 3px;
}

.product-item--image-slider .slick-dots li button:before {
    font-size: 14px; /* Make the dot character larger */
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    opacity: 0.7;
    transition: opacity 0.3s;
}

.product-item--image-slider .slick-dots li.slick-active button:before {
    opacity: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Fix: Скрываем все слайды кроме первого до инициализации Slick Slider */
.product-item--image-slider:not(.slick-initialized) > *:not(:first-child) {
    display: none;
}

/* Убираем margin-bottom: 30px, который slick-theme.css добавляет когда
   слайдер с точками (.slick-dotted). Без этого карточки с multi-slide
   получают лишние 30px снизу и заголовки «съезжают» относительно single-slide. */
.product-item--image-slider.slick-dotted.slick-slider {
    margin-bottom: 0;
}
/* Verified badge */
.verified-badge-wrap {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    cursor: default;
}
/* Модификатор: добавляет отступ слева, когда badge стоит сразу за текстом
   (используется в payment-modal после имени автора). */
.verified-badge-wrap--inline {
    margin-left: 4px;
}
.verified-badge {
    display: inline-block;
}
.verified-badge-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1D9BF0;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 100;
}
.verified-badge-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1D9BF0;
}
.verified-badge-wrap:hover .verified-badge-tooltip {
    display: block;
}

/* ── VIO NEW MODAL: базовый каркас (наследуется .modal-vio-compact) ──
   Оставлены только стили, которые реально применяются к текущему HTML модалки
   оплаты. Старые стили с радиокнопками / двух-колонками / `.js-pm-block-*`
   удалены 2026-05-03 при cleanup'е (мёртвый код от первой итерации UX). */
.modal-vio-new {
    background: #1c1c1c;
    border-radius: 20px;
    border: 1px solid #2c2c2c;
    color: #ffffff;
    max-width: 745px;
    padding: 20px 32px 32px 32px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

/* Mobile: bottom-sheet pattern (наследуется compact-модалкой) */
@media (max-width: 767px) {
    .modal.js-modal-payment.modal-vio-new {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        max-height: 92dvh;
        min-height: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        padding: 22px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
    /* Drag-handle: полоска сверху, визуальный индикатор swipe-down.
       JS-обработчик слушает touchstart по верхним 64px модалки. */
    .modal.js-modal-payment.modal-vio-new::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 44px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255,255,255,0.28);
        pointer-events: none;
    }
    /* Sticky CTA для длинных экранов */
    .modal-vio-new .pm-cta {
        position: sticky;
        bottom: 0;
        z-index: 3;
        box-shadow: 0 -14px 18px -10px rgba(28, 28, 28, .95);
        margin-bottom: 4px;
    }
}

/* Animation для balance/sufficient блоков */
@keyframes slideInFromTop {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════════════
   Финансы 2.0 — модалка оплаты, UX-полировка (2026-05-03)
   Single-step flow + правильная иерархия + accessibility.
   ════════════════════════════════════════════════════════════════════════════ */

/* Затемнение поверх header'а — раньше дополнительно было `body:has(.modal-vio-compact.active)::after`
   как fallback, но `:has()` форсил quadratic style-recalc на каждый mutation.
   Теперь все модалки .modal-vio-compact синхронизируют body.pm-modal-open
   через JS (payment_modal_shared.js + profilePage donate-observer). */
body.pm-modal-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 1000006;
    pointer-events: none;
}

/* Lock body scroll когда модалка открыта (особенно важно на мобиле, где
   фоновый каталог скроллится при свайпе по модалке).
   `body.pm-modal-open` ставится JS-наблюдателем при открытии любой
   .modal-vio-compact — глобальный `:has()` тут давал quadratic-style
   recalc на каждый mutation в DOM. */
body.pm-modal-open {
    overflow: hidden !important;
    /* iOS Safari respect for touch — без position:fixed чтобы не дёргать скролл */
    touch-action: none;
}
body.pm-modal-open .modal-vio-compact.active {
    touch-action: pan-y;  /* модалка остаётся скроллабельной */
}

/* Header (.menu) — sticky-элемент с z-index: 1000005, и из-за создания собственного
   stacking-context'а sticky-позиционированием выпрыгивает поверх backdrop'а
   (виден как светящаяся полоса). Опускаем его в корень при открытой модалке. */
body.pm-modal-open .menu {
    z-index: 1 !important;
}

/* ── Базовый размер компактной модалки ───────────────────────────────── */
.modal-vio-compact {
    max-width: 462px !important;
    width: 100% !important;
    padding: 20px 22px 18px !important;
    min-height: 0 !important;
    max-height: 92vh;
    overflow-y: auto;
}

/* Шаг-индикатор (теперь в topbar под title) */
.modal-vio-compact .pm-steps {
    display: block;
    font-size: 11px;
    color: #8e8e8e;
    letter-spacing: 0.02em;
    margin-top: 2px;
}
.modal-vio-compact .pm-steps b { color: var(--c-amber-500); font-weight: 700; }

/* Шаги */
.modal-vio-compact .pm-step { display: none; }
.modal-vio-compact .pm-step.active {
    display: block;
    animation: slideInFromTop 0.18s ease;
}

/* Кнопка «Назад» в topbar — видна только на шаге 2.
   Управляется через `.modal-vio-compact[data-pm-step="2"]` (атрибут ставится из JS). */
.modal-vio-compact .pm-back-top {
    display: none;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: #c0c0c0;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 4px;
    transition: background 0.12s ease, color 0.12s ease;
}
.modal-vio-compact[data-pm-step="2"] .pm-back-top { display: inline-flex; }
.modal-vio-compact .pm-back-top:hover { background: #2c2c2c; color: var(--c-amber-500); }
.modal-vio-compact .pm-back-top:focus-visible {
    outline: 2px solid var(--c-amber-500);
    outline-offset: 2px;
}

/* Summary (карточка выбора на шаге 2) */
.modal-vio-compact .pm-summary {
    background: #2c2c2c;
    border: 1px solid #3c3c3c;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.modal-vio-compact .pm-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}
.modal-vio-compact .pm-summary__row--muted .pm-summary__lbl,
.modal-vio-compact .pm-summary__row--muted .pm-summary__val {
    color: #8e8e8e;
    font-size: 12px;
}
.modal-vio-compact .pm-summary__lbl {
    font-size: 13px;
    color: #c0c0c0;
}
.modal-vio-compact .pm-summary__val {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
}
.modal-vio-compact .pm-summary__bonus {
    color: #22c55e;
    font-weight: 700;
    margin-left: 4px;
}
.modal-vio-compact .pm-summary__badge {
    display: inline-block;
    background: var(--c-amber-500);
    color: #1a1a1a;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-right: 4px;
    vertical-align: middle;
}

/* CTA с двумя строками (метод как подзаголовок) */
.modal-vio-compact .pm-cta-method {
    display: block;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.85;
    margin-top: 1px;
}

/* Topbar: левая колонка (title + step) + close */
.modal-vio-compact .pm-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.modal-vio-compact .pm-topbar__left {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;
}
.modal-vio-compact .pm-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #fff;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.modal-vio-compact .pm-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #8e8e8e;
    background: transparent;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.modal-vio-compact .pm-close:hover { background: #2c2c2c; color: #fff; }
.modal-vio-compact .pm-close:focus-visible {
    outline: 2px solid var(--c-amber-500);
    outline-offset: 2px;
}

/* ── Header: товар крупнее (primary), миниатюра + цена справа ─────────── */
.modal-vio-compact .pm-head {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid #2c2c2c;
    border-radius: 12px;
    margin-bottom: 14px;
}
.modal-vio-compact .pm-head__preview {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-vio-compact .pm-head__preview .pm-head__preview-img,
.modal-vio-compact .pm-head__preview img,
.modal-vio-compact .pm-head__preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.modal-vio-compact .pm-head__preview-icon {
    font-size: 20px;
    color: #6b6b6b;
}
.modal-vio-compact .pm-head__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.modal-vio-compact .pm-head__title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.modal-vio-compact .pm-head__title a { color: inherit; text-decoration: none; }
.modal-vio-compact .pm-head__author {
    font-size: 12px;
    color: #8e8e8e;
}
.modal-vio-compact .pm-head__author a { color: #c0c0c0; text-decoration: none; }

/* Цена ТОВАРА — primary, крупнее всех других цифр в модалке */
.modal-vio-compact .pm-head__price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 4px;
}
.modal-vio-compact .pm-head__price {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.01em;
}
.modal-vio-compact .pm-head__price-old {
    font-size: 12px;
    color: #6b6b6b;
    text-decoration: line-through;
}
.modal-vio-compact .pm-head__period {
    font-size: 12px;
    font-weight: 500;
    color: #8e8e8e;
    margin-left: 2px;
}
/* ── Balance card — иконка-кружок, крупный баланс, прогресс-бар ───────── */
.modal-vio-compact .pm-balance-card {
    background: linear-gradient(135deg, #1f1f1f 0%, #2a2a2a 100%);
    border: 1px solid #3a3a3a;
    border-radius: 14px;
    padding: 14px 16px 12px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}
/* Декоративный glow за иконкой */
.modal-vio-compact .pm-balance-card::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(245,158,11,0.12) 0%, transparent 60%);
    pointer-events: none;
}

.modal-vio-compact .pm-balance-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}
.modal-vio-compact .pm-balance-card__icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-amber-500) 0%, #F97316 100%);
    color: #1a1a1a;
    font-size: 16px;
    box-shadow: 0 4px 12px -2px rgba(245,158,11,0.4);
}
.modal-vio-compact .pm-balance-card__main {
    flex: 1;
    min-width: 0;
}
.modal-vio-compact .pm-balance-card__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8e8e8e;
    line-height: 1;
    margin-bottom: 4px;
}
.modal-vio-compact .pm-balance-card__values {
    display: flex;
    align-items: baseline;
    gap: 5px;
    color: #fff;
    line-height: 1;
}
.modal-vio-compact .pm-balance-card__current {
    font-size: 22px;
    font-weight: 800;
    color: var(--c-amber-500);
    letter-spacing: -0.02em;
}
.modal-vio-compact .pm-balance-card__sep {
    font-size: 12px;
    color: #6b6b6b;
}
.modal-vio-compact .pm-balance-card__target {
    font-size: 14px;
    color: #c0c0c0;
}
.modal-vio-compact .pm-balance-card__target strong {
    color: #fff;
    font-weight: 700;
}


/* Прогресс-бар */
.modal-vio-compact .pm-balance-card__progress {
    margin-top: 10px;
    height: 6px;
    border-radius: 999px;
    background: #2c2c2c;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.modal-vio-compact .pm-balance-card__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-amber-500) 0%, #F97316 100%);
    border-radius: 999px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(245,158,11,0.5);
    min-width: 0;
}
/* Когда баланса хватает (is-full) — подсвечиваем зелёным */
.modal-vio-compact .pm-balance-card__progress.is-full .pm-balance-card__progress-fill {
    background: linear-gradient(90deg, #22c55e 0%, var(--c-green-600) 100%);
    box-shadow: 0 0 10px rgba(34,197,94,0.5);
}

/* Кнопка «Списать N б. + доплатить картой» — внутри balance-card,
   secondary-стиль (не отвлекает от primary CTA «Купить без списания»). */
.modal-vio-compact .pm-balance-spend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.06);
    color: var(--c-amber-500);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.modal-vio-compact .pm-balance-spend:hover {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.5);
}
.modal-vio-compact .pm-balance-spend > i { font-size: 14px; }
.modal-vio-compact .pm-balance-spend__txt { line-height: 1.3; }
.modal-vio-compact .pm-balance-spend .js-pm-exact-amt-cta,
.modal-vio-compact .pm-balance-spend .js-pm-spend-points {
    font-weight: 800;
}

/* ── Section heads (для пакетов) ─────────────────────────────────────── */
.modal-vio-compact .pm-section-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}
.modal-vio-compact .pm-section-head__icon {
    color: var(--c-amber-500);
    font-size: 13px;
}
.modal-vio-compact .pm-section-head__text {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}
.modal-vio-compact .pm-section-head__hint {
    font-size: 11px;
    color: #8e8e8e;
    margin-left: auto;
}

.modal-vio-compact .pm-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8e8e8e;
    margin-bottom: 6px;
}

/* ── Пакеты grid 4×1 (desktop) / 2×2 (mobile) ───────────────────────── */
.modal-vio-compact .pm-packages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}
.modal-vio-compact .pm-package {
    min-height: 84px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 2px;
    padding: 26px 8px 10px;
    background: linear-gradient(135deg, #2c2c2c 0%, #353535 100%);
    border: 1px solid #4a4a4a;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    text-align: left;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    position: relative;
    overflow: hidden;
}
.modal-vio-compact .pm-package:hover {
    border-color: var(--c-amber-500);
    transform: translateY(-1px);
}
.modal-vio-compact .pm-package:focus-visible {
    outline: 2px solid var(--c-amber-500);
    outline-offset: 2px;
}
.modal-vio-compact .pm-package.is-enough {
    border-color: rgba(34, 197, 94, 0.55);
    background: linear-gradient(135deg, #1f3a2f 0%, #2c4a3c 100%);
}
.modal-vio-compact .pm-package.is-recommended {
    border-color: var(--c-amber-500);
    box-shadow: 0 0 0 1px rgba(245,158,11,0.15);
}
.modal-vio-compact .pm-package.is-recommended.is-enough {
    border-color: #22c55e;
    box-shadow: 0 0 0 1px rgba(34,197,94,0.2);
}
.modal-vio-compact .pm-package.is-loading,
.modal-vio-compact .pm-package.is-selected,
.modal-vio-compact .pm-package.disabled {
    opacity: 0.7;
    cursor: progress;
}

/* Пилюли — в правом верхнем углу карточки, в одну строку.
   Бейдж рекомендации (🔥 ХИТ) — слева, бонус (+N%) — справа, через gap. */
.modal-vio-compact .pm-package__pills {
    position: absolute;
    top: 5px;
    right: 5px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 1;
}
.modal-vio-compact .pm-package__pill {
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.5;
    white-space: nowrap;
}
.modal-vio-compact .pm-package__pill--badge {
    background: var(--c-amber-500);
    color: #1a1a1a;
}
.modal-vio-compact .pm-package__pill--bonus {
    background: #22c55e;
    color: #0c2818;
}
.modal-vio-compact .pm-package.is-enough .pm-package__pill--bonus {
    background: #86efac;
    color: #0c2818;
}

.modal-vio-compact .pm-package__price {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
}
.modal-vio-compact .pm-package__credit {
    font-size: 10px;
    color: #c0c0c0;
    font-weight: 600;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.modal-vio-compact .pm-package__credit i {
    color: var(--c-amber-500);
    font-size: 9px;
}
.modal-vio-compact .pm-package.is-enough .pm-package__credit { color: #d1fae5; }
.modal-vio-compact .pm-package.is-enough .pm-package__credit i { color: #86efac; }

/* ── Точная доплата — collapsible secondary ──────────────────────────── */
.modal-vio-compact .pm-exact-details {
    margin-bottom: 12px;
    border: 1px solid #2c2c2c;
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
}
/* Когда доплата — единственный путь (пакетов нет или они не покрывают),
   убираем collapsible-обвязку: summary прячем, кнопки видны как primary. */
.modal-vio-compact .pm-exact-details.is-only-option {
    border: none;
    background: transparent;
    margin-bottom: 0;
}
.modal-vio-compact .pm-exact-details.is-only-option .pm-exact-summary { display: none; }
/* Direct-buy режим (юзер с 0 баллов → кешбэк начисляется): summary остаётся
   видимым даже в is-only-option, чтобы pill «+N» не пропал. Кликабельность
   гасим — кнопки уже сразу под summary, открывать/закрывать details нечего. */
.modal-vio-compact .pm-exact-details.is-only-option.is-direct-buy .pm-exact-summary {
    display: flex;
    cursor: default;
    pointer-events: none;
}
.modal-vio-compact .pm-exact-details.is-only-option.is-direct-buy .pm-exact-summary::after {
    display: none;
}
.modal-vio-compact .pm-exact-details.is-only-option .pm-exact-buttons { padding: 0; }
.modal-vio-compact .pm-exact-details.is-only-option .pm-exact-btn {
    height: 50px;
    min-height: 50px;
    font-size: 14px;
    border-color: #4a4a4a;
}
.modal-vio-compact .pm-exact-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: default;
    list-style: none;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    user-select: none;
    pointer-events: none;
}
.modal-vio-compact .pm-exact-summary::-webkit-details-marker { display: none; }
.modal-vio-compact .pm-exact-summary__icon {
    color: var(--c-amber-500);
    font-size: 14px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.modal-vio-compact .pm-exact-summary__lbl { flex: 1; }
.modal-vio-compact .pm-exact-summary__amount {
    color: #fff;
    font-weight: 700;
    margin-right: 4px;
}
.modal-vio-compact .pm-exact-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 12px 12px;
}
.modal-vio-compact .pm-exact-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid #3c3c3c;
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.modal-vio-compact .pm-exact-btn__txt {
    flex: 1;
    min-width: 0;
    text-align: left;
    line-height: 1.25;
    font-size: 13px;
    color: #fff;
}
.modal-vio-compact .pm-exact-btn:hover {
    background: #252525;
    border-color: #5a5a5a;
}
.modal-vio-compact .pm-exact-btn:focus-visible {
    outline: 2px solid var(--c-amber-500);
    outline-offset: 2px;
}
.modal-vio-compact .pm-exact-btn__lead {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.modal-vio-compact .pm-exact-btn__lead img {
    height: 18px;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}
.modal-vio-compact .pm-exact-btn__lead i {
    width: 18px;
    color: #c0c0c0;
    flex-shrink: 0;
    text-align: center;
    font-size: 16px;
}
.modal-vio-compact .pm-exact-btn__sub {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
    min-width: 0;
}
.modal-vio-compact .pm-exact-btn__sub small {
    font-size: 10px;
    color: #8e8e8e;
    font-weight: 500;
    margin-top: 2px;
    letter-spacing: 0.02em;
}
.modal-vio-compact .pm-exact-btn__amt {
    font-weight: 700;
    color: var(--c-amber-500);
    font-size: 13px;
}
.modal-vio-compact .pm-exact-btn.is-loading,
.modal-vio-compact .pm-exact-btn.disabled { opacity: 0.6; cursor: progress; }

/* ── Card-flow (без баллов) — primary YK + secondary RK ──────────────── */
.modal-vio-compact .pm-card-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #3c3c3c;
    background: transparent;
    color: #fff;
    margin-bottom: 8px;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.modal-vio-compact .pm-card-btn__txt {
    flex: 1;
    min-width: 0;
    text-align: left;
    line-height: 1.25;
    font-size: 13px;
    color: #fff;
}
.modal-vio-compact .pm-card-btn:hover { background: #252525; border-color: #5a5a5a; }
.modal-vio-compact .pm-card-btn:focus-visible {
    outline: 2px solid var(--c-amber-500);
    outline-offset: 2px;
}
.modal-vio-compact .pm-card-btn--primary {
    background: var(--color-primary, var(--color-primary));
    border-color: var(--color-primary, var(--color-primary));
}
.modal-vio-compact .pm-card-btn--primary:hover {
    background: var(--color-primary--hover, #0834cc);
    border-color: var(--color-primary--hover, #0834cc);
}
.modal-vio-compact .pm-card-btn img {
    height: 18px;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}
.modal-vio-compact .pm-card-btn > i {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    color: #c0c0c0;
    font-size: 16px;
}
.modal-vio-compact .pm-card-btn--primary > i { color: #fff; }
.modal-vio-compact .pm-card-btn strong {
    font-weight: 800;
    color: #fff;
    margin-left: 6px;
    flex-shrink: 0;
}
.modal-vio-compact .pm-card-btn--primary strong { color: #fff; }
.modal-vio-compact .pm-card-btn:not(.pm-card-btn--primary) strong { color: var(--c-amber-500); }
.modal-vio-compact .pm-card-btn.is-loading { opacity: 0.7; cursor: progress; }
/* Wrapper над gateway-toggle (на step2): добавляет лейбл «Способ оплаты картой».
   Сам toggle остался grid 1fr 1fr (см. ниже). */
.modal-vio-compact .pm-gateway-wrap {
    margin: 0 0 12px;
}
.modal-vio-compact .pm-gateway-wrap__label {
    color: #9a9a9a;
    font-size: 12px;
    line-height: 1.3;
    margin: 0 0 6px;
    letter-spacing: 0.01em;
}
.modal-vio-compact .pm-gateway-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.modal-vio-compact .pm-gateway-toggle__opt {
    position: relative;
    cursor: pointer;
    margin: 0;
}
.modal-vio-compact .pm-gateway-toggle__opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.modal-vio-compact .pm-gateway-toggle__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #3c3c3c;
    background: transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
    min-height: 56px;
}
.modal-vio-compact .pm-gateway-toggle__inner img {
    height: 16px;
    filter: brightness(0) invert(1);
}
.modal-vio-compact .pm-gateway-toggle__sub {
    color: #9a9a9a;
    font-size: 11px;
    line-height: 1.2;
}
.modal-vio-compact .pm-gateway-toggle__opt input:checked + .pm-gateway-toggle__inner {
    background: rgba(245, 158, 11, 0.08);
    border-color: var(--c-amber-500);
}
.modal-vio-compact .pm-gateway-toggle__opt input:checked + .pm-gateway-toggle__inner .pm-gateway-toggle__sub {
    color: var(--c-amber-500);
}
.modal-vio-compact .pm-gateway-toggle__opt:hover .pm-gateway-toggle__inner {
    border-color: #5a5a5a;
}
.modal-vio-compact .pm-gateway-toggle__opt input:checked ~ * {
    /* placeholder for any future state */
}
.modal-vio-compact .pm-card-flow-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 4px;
    margin: 14px 0 8px;
}
.modal-vio-compact .pm-card-flow-head__icon {
    color: var(--c-amber-500);
    font-size: 13px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    align-self: center;
}
.modal-vio-compact .pm-card-flow-head__txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.modal-vio-compact .pm-card-flow-head__txt strong {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}
.modal-vio-compact .pm-card-flow-head__txt span {
    color: #8e8e8e;
    font-size: 11px;
    line-height: 1.3;
}
.modal-vio-compact .pm-pay-reward {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.16);
    color: var(--c-amber-500);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    white-space: nowrap;
}
.modal-vio-compact .pm-pay-reward > i {
    font-size: 10px;
    color: inherit;
    width: auto;
}
.modal-vio-compact .pm-card-btn--primary .pm-pay-reward {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.modal-vio-compact .pm-card-brands {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 4px;
    font-size: 10px;
    color: #6b6b6b;
}
.modal-vio-compact .pm-card-brands__lbl { color: #6b6b6b; }
.modal-vio-compact .pm-card-brands__list {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}
.modal-vio-compact .pm-card-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    min-width: 38px;
    padding: 0 8px;
    border-radius: 4px;
    background: #fff;
    color: #1a1a1a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.modal-vio-compact .pm-card-brand--visa {
    background: #1A1F71;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    letter-spacing: 0.08em;
}
.modal-vio-compact .pm-card-brand--mc {
    padding: 0 4px;
    background: #fff;
}
.modal-vio-compact .pm-card-brand__mc {
    width: 28px;
    height: 18px;
    display: block;
}
.modal-vio-compact .pm-card-brand--mir {
    background: linear-gradient(135deg, #0F754E 0%, #00A1E4 100%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.modal-vio-compact .pm-card-brand--sbp {
    background: linear-gradient(135deg, #5B57A6 0%, #1F8B4C 100%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ── Email block ──────────────────────────────────────────────────────── */
.modal-vio-compact .pm-email-block { margin: 12px 0 8px; }
.modal-vio-compact .pm-email-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8e8e8e;
    margin-bottom: 6px;
}
.modal-vio-compact .pm-email-wrap {
    position: relative;
}
.modal-vio-compact .pm-email-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8e8e8e;
    pointer-events: none;
    font-size: 13px;
}
.modal-vio-compact .pm-email {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 38px;
    background: #1a1a1a;
    border: 1px solid #3c3c3c;
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    outline: none;
    transition: border-color 0.12s ease;
}
.modal-vio-compact .pm-email:focus,
.modal-vio-compact .pm-email:focus-visible {
    border-color: var(--c-amber-500);
    outline: none;
}

/* ── CTA ─────────────────────────────────────────────────────────────── */
.modal-vio-compact .pm-cta {
    border-radius: 12px !important;
    height: 48px;
    font-weight: 700 !important;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.modal-vio-compact .pm-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.modal-vio-compact .pm-cta.is-loading { opacity: 0.75; cursor: progress; }
.modal-vio-compact .pm-cta__period {
    font-weight: 400;
    opacity: 0.75;
    font-size: 12px;
}

/* ── Footer + Error ──────────────────────────────────────────────────── */
.modal-vio-compact .pm-foot {
    margin-top: 10px;
    font-size: 11px;
    color: #6b6b6b;
    text-align: center;
    line-height: 1.45;
}
.modal-vio-compact .pm-foot a { color: #8e8e8e; text-decoration: underline; }

.modal-vio-compact .pm-error {
    padding: 10px 12px;
    background: #3a2a0d;
    border: 1px solid #5a4a2a;
    border-radius: 10px;
    color: #ffd966;
    font-size: 12px;
    margin-top: 10px;
}

/* «Это ваш контент» — info при покупке у себя */
.modal-vio-compact .pm-own-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    margin-bottom: 12px;
}
.modal-vio-compact .pm-own-notice i {
    color: #60a5fa;
    font-size: 18px;
    margin-top: 1px;
    flex-shrink: 0;
}
.modal-vio-compact .pm-own-notice strong {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}
.modal-vio-compact .pm-own-notice span {
    font-size: 12px;
    color: #c0c0c0;
    line-height: 1.4;
}

/* Разделитель «или оплатить картой» — между «Оплатить баллами» и шлюзами */
.modal-vio-compact .pm-or-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
    color: #6b6b6b;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.modal-vio-compact .pm-or-divider::before,
.modal-vio-compact .pm-or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #2c2c2c;
}
.modal-vio-compact .pm-or-divider span { white-space: nowrap; }

/* Secondary card-flow: когда показывается ВМЕСТЕ с primary (sufficient-cta).
   Кнопки приглушены — primary действие это «Оплатить баллами». */
.modal-vio-compact .js-pm-card-flow.is-secondary .pm-card-btn--primary {
    background: transparent;
    border-color: #3c3c3c;
}
.modal-vio-compact .js-pm-card-flow.is-secondary .pm-card-btn--primary:hover {
    background: #252525;
    border-color: #5a5a5a;
}
.modal-vio-compact .js-pm-card-flow.is-secondary .pm-card-btn--primary > i { color: #c0c0c0; }
.modal-vio-compact .js-pm-card-flow.is-secondary .pm-card-btn strong { color: var(--c-amber-500); }
.modal-vio-compact .js-pm-card-flow.is-secondary .pm-card-brands { display: none; }

/* Notice «пакетов недостаточно» — продукт дороже max-пакета */
.modal-vio-compact .pm-no-enough-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(96, 165, 250, 0.1);
    border-left: 3px solid #60a5fa;
    border-radius: 8px;
    color: #c0d4f0;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 10px;
}
.modal-vio-compact .pm-no-enough-notice i {
    color: #60a5fa;
    flex-shrink: 0;
    font-size: 14px;
}

/* Free-flow CTA (price=0) — primary с подарком */
.modal-vio-compact .js-pm-free-flow .pm-cta {
    background: linear-gradient(135deg, #22c55e 0%, var(--c-green-600) 100%) !important;
    border-color: var(--c-green-600) !important;
}
.modal-vio-compact .js-pm-free-flow .pm-cta:hover {
    background: linear-gradient(135deg, var(--c-green-600) 0%, #15803d 100%) !important;
}
.modal-vio-compact .js-pm-free-flow .pm-cta i { font-size: 14px; }

.modal-vio-compact .pm-perks {
    list-style: none;
    padding: 10px 14px;
    margin: 0 0 12px;
    background: #2c2c2c;
    border-radius: 10px;
}
.modal-vio-compact .pm-perks li {
    font-size: 12px;
    color: #c0c0c0;
    padding: 3px 0 3px 18px;
    position: relative;
}
.modal-vio-compact .pm-perks li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #22c55e;
    font-weight: 700;
}

.modal-vio-compact .pm-auth-required {
    padding: 24px 12px;
    text-align: center;
    color: #c0c0c0;
    font-size: 13px;
}

/* ── Subscription period toggle (полировка под compact) ──────────────── */
.modal-vio-compact .pm-sub-opts {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.modal-vio-compact .pm-period-card {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #3c3c3c;
    border-radius: 10px;
    padding: 12px 14px;
    /* Идентичная высота для месяца и года: __main всегда 2 строки
       (title + sub), даже если sub пустой. */
    min-height: 60px;
    transition: border-color .12s ease, background .12s ease;
}
.modal-vio-compact .pm-period-card:hover {
    border-color: #5c5c5c;
}
.modal-vio-compact .pm-period-card:has(input:checked) {
    border-color: var(--c-amber-500);
    background: rgba(245,158,11,0.08);
}
.modal-vio-compact .pm-period-card input { display: none; }
.modal-vio-compact .pm-period-card__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.modal-vio-compact .pm-period-card__title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}
.modal-vio-compact .pm-period-card__sub {
    font-size: 11px;
    color: #8e8e8e;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.modal-vio-compact .pm-period-card__sub:empty { display: none; }
.modal-vio-compact .pm-period-card__save {
    font-size: 10px;
    font-weight: 700;
    color: #22c55e;
    background: rgba(34,197,94,0.14);
    padding: 1px 6px;
    border-radius: 999px;
    line-height: 1.4;
    letter-spacing: 0.02em;
}
.modal-vio-compact .pm-period-card__save:empty { display: none; }
.modal-vio-compact .pm-period-card__price {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    text-align: right;
}
/* Block-card стиль — унифицирован с .dm-cover (donate cover-fee) и
   анонимными чекбоксами в donate-модалке (тоже используют .pm-autorenew). */
.modal-vio-compact .pm-autorenew {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid #2c2c2c;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    color: #c0c0c0;
    transition: border-color .15s, background .15s;
}
.modal-vio-compact .pm-autorenew:hover {
    border-color: #3c3c3c;
    background: rgba(255,255,255,0.06);
}
.modal-vio-compact .pm-autorenew input {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    accent-color: var(--c-amber-500);
    cursor: pointer;
    flex-shrink: 0;
}
.modal-vio-compact .pm-autorenew__hint {
    display: block;
    color: #6b6b6b;
    font-size: 11px;
    margin-top: 1px;
}
/* Подсветка чекбокса согласия когда юзер кликнул "Оплатить" без галочки.
   Снимается при .change на .js-pm-autorenew (см. payment_modal.js). */
.modal-vio-compact .pm-autorenew--required {
    border-color: #f87171;
    background: rgba(248,113,113,0.08);
    animation: pmAutorenewShake .35s ease;
}
@keyframes pmAutorenewShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-4px); }
    40%      { transform: translateX(4px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(3px); }
}
/* Disabled-state CTA подписки (без галочки автосписаний) */
.modal-vio-compact .pm-cta.is-autopay-required {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Блок «Условия автоплатежа» — обязательное информирование по требованиям YooKassa */
.modal-vio-compact .pm-autopay-terms {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(245,158,11,0.06);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.45;
    color: #c0c0c0;
}
.modal-vio-compact .pm-autopay-terms[hidden] { display: none; }
.modal-vio-compact .pm-autopay-terms i {
    color: var(--c-amber-500);
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
}
.modal-vio-compact .pm-autopay-terms strong {
    color: #fff;
    font-weight: 600;
    margin-right: 4px;
}
.modal-vio-compact .pm-autopay-terms a {
    color: var(--c-amber-500);
    text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════════
   Mobile (≤640px) — bottom-sheet + touch-targets + iOS-зум фикс
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Возвращаем full-width на мобиле (override compact-max-width 462px).
       Bottom-sheet pattern уже настроен в .modal-vio-new mobile-блоке выше. */
    .modal.js-modal-payment.modal-vio-compact {
        max-width: 100% !important;
        width: 100% !important;
        padding: 22px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        max-height: 92vh;
        max-height: 92dvh;
    }

    /* Topbar: компактнее */
    .modal-vio-compact .pm-topbar { margin-bottom: 12px; }
    .modal-vio-compact .pm-title { font-size: 17px; }
    .modal-vio-compact .pm-steps { font-size: 11px; }
    .modal-vio-compact .pm-close { width: 36px; height: 36px; }

    /* Header (товар) — компактный */
    .modal-vio-compact .pm-head {
        padding: 10px;
        margin-bottom: 12px;
        gap: 10px;
    }
    .modal-vio-compact .pm-head__preview { width: 52px; height: 52px; }
    .modal-vio-compact .pm-head__title { font-size: 13px; -webkit-line-clamp: 2; }
    .modal-vio-compact .pm-head__author { font-size: 11px; }
    .modal-vio-compact .pm-head__price { font-size: 19px; }

    /* Balance bar — компактнее на мобиле */
    .modal-vio-compact .pm-balance-bar {
        font-size: 12px;
        padding: 10px 12px;
    }

    /* Section heads */
    .modal-vio-compact .pm-section-head__hint { display: none; }

    /* Mobile: 2×2 (4 в ряд на узком экране слишком тесно) */
    .modal-vio-compact .pm-packages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .modal-vio-compact .pm-package {
        padding: 28px 12px 10px;
        min-height: 78px;
    }
    .modal-vio-compact .pm-package__price { font-size: 18px; }
    .modal-vio-compact .pm-package__credit { font-size: 11px; }
    .modal-vio-compact .pm-package__pill { font-size: 9px; padding: 2px 7px; }

    /* Кнопки шлюзов — touch-friendly 48px */
    .modal-vio-compact .pm-exact-btn { height: 48px; font-size: 13px; }
    .modal-vio-compact .pm-card-btn { height: 50px; font-size: 13px; }

    /* iOS Safari: 16px чтобы не было зума при focus */
    .modal-vio-compact .pm-email { font-size: 16px; height: 46px; }

    /* CTA на шаге 2 — sticky внизу для длинных экранов */
    .modal-vio-compact .pm-step[data-pm-step="2"] .pm-cta {
        position: sticky;
        bottom: 0;
        z-index: 3;
        height: 50px;
        font-size: 15px;
        box-shadow: 0 -14px 18px -10px rgba(28, 28, 28, 0.95);
    }

    /* Summary на шаге 2 — компактнее */
    .modal-vio-compact .pm-summary { padding: 10px 12px; margin-bottom: 12px; }
    .modal-vio-compact .pm-summary__lbl { font-size: 12px; }
    .modal-vio-compact .pm-summary__val { font-size: 13px; }

    /* Foot — мельче, чтобы не отъедать высоту */
    .modal-vio-compact .pm-foot { font-size: 10px; }

    /* Card brands прячем (экономим высоту) */
    .modal-vio-compact .pm-card-brands { font-size: 9px; gap: 6px; padding: 4px 0 2px; }

    /* Subscription period toggle — touch-friendly */
    .modal-vio-compact .pm-period-toggle__item { padding: 12px; }
}

/* Очень мелкие экраны (≤360px) — дополнительная компактизация */
@media (max-width: 360px) {
    .modal-vio-compact .pm-package__price { font-size: 16px; }
    .modal-vio-compact .pm-package__credit { font-size: 10px; }
    .modal-vio-compact .pm-package { min-height: 70px; padding: 26px 8px 8px; }
    .modal-vio-compact .pm-head__price { font-size: 17px; }
}

/* Audio Player & Buttons */
.audio-preview-container {
    width: 100%;
    height: 195px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #2c2c2c;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    position: relative;
    overflow: hidden;
}

.audio-play-btn {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid #fff;
    border-radius: 50% !important;
    color: #fff;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    padding: 0;
    margin: 0;
}

.audio-play-btn i {
    display: block !important;
    color: #fff !important;
    font-size: 30px !important;
    margin: 0 !important;
    pointer-events: none;
}

.audio-play-btn .fa-play { margin-left: 5px !important; }
.audio-play-btn .fa-pause { margin-left: 0 !important; }

.audio-play-btn:hover {
    background: #fff;
    color: #1c1c1c;
    transform: scale(1.1);
}

.audio-play-btn:hover i { color: #1c1c1c !important; }

.content-product-preview .audio-preview-container { height: 350px; border-radius: 20px; }
.content-product-preview .audio-play-btn { width: 100px; height: 100px; }
.content-product-preview .audio-play-btn i { font-size: 40px !important; }

/* === MENU CSS — единый блок ниже в начале файла. Дубликаты удалены 2026-04-21. === */

/* Chat Expand */
.q3f9-text {
    resize: none !important; overflow-y: hidden; padding-top: 12px !important;
    padding-bottom: 12px !important; min-height: 45px; max-height: 150px; line-height: 1.4 !important;
}

/* Search Results: Creators (Vio New) */
.search-results-label {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--c-slate-400);
    margin-bottom: 15px;
    letter-spacing: 0.5px;
    padding-left: 5px;
}

.creators-search-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 5px 25px 5px;
    margin-bottom: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.creators-search-row::-webkit-scrollbar {
    display: none;
}

.creator-search-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--c-slate-200);
    border-radius: 20px;
    padding: 12px 18px;
    min-width: 220px;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.creator-search-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.08);
    transform: translateY(-2px);
}

.creator-search-ava {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--c-slate-100);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.creator-search-info {
    min-width: 0;
}

.creator-search-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--c-slate-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.creator-search-user {
    font-size: 12px;
    color: var(--c-slate-500);
    font-weight: 600;
}

@media (max-width: 768px) {
    .creators-search-row {
        flex-direction: column;
        overflow-x: visible;
        padding-bottom: 10px;
    }
    .creator-search-card {
        min-width: 100%;
    }
}
/* Fix long tooltips on mobile */
@media (max-width: 768px) {
    .tippy-box {
        max-width: calc(100vw - 40px) !important;
    }
}

/* Load More Button in Chats */
.q3f9-loadmore-wrap {
    padding: 15px;
    display: flex;
    justify-content: center;
}
.q3f9-loadmore-btn {
    background: var(--c-slate-100);
    color: var(--c-slate-600);
    border: none;
    padding: 8px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.q3f9-loadmore-btn:hover {
    background: var(--c-slate-200);
    color: var(--c-slate-800);
}

/* ============================================================
   CATALOG / PRODUCT-VIEW — design fixes (phase 2, 2026-04-22)
   Покрывает:
   • badge-warning / badge-danger — семантические цвета бейджей
   • product-author-row / product-author-name — замена inline-gap
   • product-recommend-section — замена магии mt-185px
   • product-rating-stable — фикс layout-shift
   • breadcrumb-item-truncate — ellipsis для длинных title
   • share-btn-icon — реальная кнопка 44×44 на mobile
   • sr-only — screen-reader only (a11y)
   • catalog-results-count / catalog-empty-state — UX каталога
   • product-ad-slot — замена inline-style рекламной заглушки
   ============================================================ */

/* A11Y: screen-reader-only текст (для label'ов) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Семантические цвета бейджей остатка — WCAG AA (контраст >= 4.5:1) */
.product-item--budge.badge-warning {
    background: var(--badge-warn-bg);
    color: var(--badge-warn-fg);
}
.product-item--budge.badge-danger {
    background: var(--badge-danger-bg);
    color: var(--badge-danger-fg);
}
/* Inline-вариант бейджа: ширина по контенту (product_view) */
.product-item--budge.badge-inline {
    display: inline-flex;
    width: auto;
}

/* Author-row на странице товара — было inline style="gap:16px;" */
.product-author-row {
    gap: 16px;
}
.product-author-name {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Отступ перед блоком «Рекомендуем» — было .mt-185px (magic number) */
.product-recommend-section {
    margin-top: 185px;
}
@media screen and (max-width: 768px) {
    .product-recommend-section {
        margin-top: 125px;
    }
}

/* Фиксируем ширину рейтинга — убираем CLS при появлении первого отзыва */
.product-rating-stable {
    min-width: 74px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

/* Breadcrumb: обрезаем длинные названия товара */
.breadcrumb-item-truncate {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
}
@media screen and (max-width: 480px) {
    .breadcrumb-item-truncate {
        max-width: 180px;
    }
}

/* Share-кнопка на карточке товара — реальный <button>, touch-target 44×44 */
.share-btn-icon:hover,
.share-btn-icon:focus-visible {
    background: rgba(0, 64, 255, 0.06);
    outline: none;
}

/* Пустое состояние каталога (initial server render) */
.catalog-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}
.catalog-empty-state-icon {
    font-size: 48px;
    color: var(--divider-faint);
    margin-bottom: 16px;
}
.catalog-empty-state-illus {
    width: clamp(180px, 24vw, 240px);
    height: auto;
    margin: 0 auto 16px;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}
.catalog-empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.catalog-empty-state-hint {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Рекламная заглушка в списке товаров — было inline style.
   height:100% вместо align-items:stretch — flex-стрейч в каталоге не работает из-за
   родительского grid (см. feedback_flex_child_height / feedback_slick_flex_stretch).
   min-height убран — grid-row сам растягивает к высоте самого высокого product-item
   в строке, поэтому реклама всегда совпадает по высоте с product-card. */
.product-ad-slot {
    display: flex;
    justify-content: center;
}
.product-ad-slot > div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.product-ad-slot > div > .ya-ad-wrap {
    flex: 1;
    height: 100%;
}

/* ============================================================
   Реклама Яндекса — предсказуемая обёртка + заглушка «Убрать рекламу»
   - .ya-ad-wrap        — контейнер, не даёт рекламе вылезти за края
   - .ya-ad-wrap__inner — точка монтирования Ya.Context (резерв места)
   - .ya-ad-wrap__remove — пилюля «Убрать рекламу» (TODO: подписка)
   ============================================================ */
.ya-ad-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* padding-top убран — реклама занимает всю обёртку, кнопка «Убрать рекламу»
       плавает absolute поверх креатива в правом верхнем углу. */
}
.ya-ad-wrap__inner {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    flex: 1; /* заполнить всю высоту .ya-ad-wrap (важно для каталога — slot 400px) */
}
.ya-ad-wrap__inner > * {
    max-width: 100%;
}
.ya-ad-wrap__inner iframe,
.ya-ad-wrap__inner img,
.ya-ad-wrap__inner video {
    max-width: 100% !important;
    height: auto;
}

/* Резерв места под каждый формат — против layout-shift */
.ya-ad-wrap--catalog .ya-ad-wrap__inner { min-height: 250px; }
.ya-ad-wrap--footer  .ya-ad-wrap__inner { min-height: 90px;  }
.ya-ad-wrap--product .ya-ad-wrap__inner { min-height: 250px; }

/* Плейсхолдер для пустого блока (localhost / no-fill / blocked) —
   промо подписки. Ya.Context при рендере заменит содержимое и :empty перестанет матчиться. */
.ya-ad-wrap__inner:empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 16px;
    background: var(--surface-subtle, #f6f7f9);
    border-radius: 12px;
    text-align: center;
}
.ya-ad-wrap__inner:empty::before {
    content: "Здесь могла быть реклама";
    font-size: 14px;
    font-weight: 500;
    color: #555;
}
.ya-ad-wrap--footer .ya-ad-wrap__inner:empty {
    padding: 12px 16px;
    flex-direction: row;
    gap: 12px;
}
/* «Скоро: подписка без рекламы» убрана — подписка отложена, см. PRO-plan
   (~/.claude/plans/pro-kind-canyon.md). При запуске PRO вернуть как
   ::after с обновлённым текстом. */

/* Кнопка-заглушка «Убрать рекламу» — плавает absolute поверх креатива
   в правом верхнем углу. Glass-эффект (полупрозрачный белый + backdrop-blur),
   чтобы быть читаемой и на светлых, и на тёмных изображениях. */
.ya-ad-wrap__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.85);
    color: #444;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.ya-ad-wrap__remove:hover {
    background: #fff;
    color: #111;
    border-color: rgba(0, 0, 0, 0.15);
}
.ya-ad-wrap__remove:active {
    transform: scale(0.96);
}
.ya-ad-wrap__remove svg {
    flex-shrink: 0;
    opacity: 0.7;
}
@media screen and (max-width: 480px) {
    .ya-ad-wrap__remove { padding: 6px; }
    .ya-ad-wrap__remove span { display: none; }
}

/* ============================================================
   Студия → Реклама (studio/_ads.php) — наследует tiers-manage layout
   из subscriptions.css (KPI summary, tiers-grid, tier-mc cards, tier-form).
   Здесь только AD-специфичные дополнения: ad-preview и ad-mockup.
   ============================================================ */
.studio-ads { padding-bottom: 60px; }

/* Расширение .tier-form__field — покрывает url/file/datetime-local, которые
   default subscriptions.css обходит (там селектор только text/number/textarea/select).
   Копируем 1в1 те же tier-form-стили с теми же переменными — visual identical. */
.studio-ads .tier-form__field input[type="url"],
.studio-ads .tier-form__field input[type="datetime-local"],
.studio-ads .tier-form__field input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    background: var(--sub-card, #fff);
    border: 1px solid var(--sub-line, var(--c-gray-200));
    border-radius: var(--sub-r-sm, 8px);
    color: var(--sub-ink, #111);
    font-size: 14px;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.studio-ads .tier-form__field input[type="url"]:focus,
.studio-ads .tier-form__field input[type="datetime-local"]:focus,
.studio-ads .tier-form__field input[type="file"]:focus {
    outline: none;
    border-color: var(--sub-accent, var(--color-primary));
    box-shadow: 0 0 0 3px var(--sub-accent-soft, rgba(0, 64, 255, 0.08));
}
/* File input — нативная кнопка «Выберите файл» вписана в общий стиль */
.studio-ads .tier-form__field input[type="file"] {
    cursor: pointer;
    line-height: 1.2;
}
.studio-ads .tier-form__field input[type="file"]::file-selector-button,
.studio-ads .tier-form__field input[type="file"]::-webkit-file-upload-button {
    margin: -4px 10px -4px -4px;
    padding: 6px 12px;
    background: var(--surface-subtle, #f6f7f9);
    color: var(--sub-ink, #111);
    border: 1px solid var(--sub-line, var(--c-gray-200));
    border-radius: 5px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
}
.studio-ads .tier-form__field input[type="file"]::file-selector-button:hover,
.studio-ads .tier-form__field input[type="file"]::-webkit-file-upload-button:hover {
    background: #ebeef1;
}
.studio-ads .tier-form__field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity .15s;
}
.studio-ads .tier-form__field input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Live mockup — WYSIWYG-предпросмотр рекламы в форме создания кампании.
   Использует CSS-классы .ya-ad-wrap--{placement} что и реальная реклама на сайте.
   Компактный размер для формы (real-runtime значения — слишком большие). */
.ad-mockup {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ad-mockup__frame {
    background: var(--surface-subtle, #f6f7f9);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/* Catalog mockup — компактные 240×300 (real 372×479) */
.ad-mockup__frame .ya-ad-wrap--catalog {
    max-width: 240px;
    width: 240px;
    margin: 0;
}
.ad-mockup__frame .ya-ad-wrap--catalog .ya-ad-internal {
    height: 300px;
}
/* Product mockup — занимает доступную ширину frame, высота 140px.
   140 = title 2 строки (44px) + body 2 строки (40px) + CTA (40px) + padding (24px). */
.ad-mockup__frame .ya-ad-wrap--product {
    max-width: 100%;
    width: 100%;
}
.ad-mockup__frame .ya-ad-wrap--product .ya-ad-internal {
    min-height: 140px;
}
/* Footer mockup — широкая полоса 100px (real 100px на сайте).
   70px было слишком мало — title + CTA вертикально требуют ~80px, CTA «наезжал»
   на title. 100px даёт безопасный запас. */
.ad-mockup__frame .ya-ad-wrap--footer {
    max-width: 100%;
    width: 100%;
}
.ad-mockup__frame .ya-ad-wrap--footer .ya-ad-internal {
    min-height: 100px;
}
/* Empty-image state — тёмный gradient без подписи. Раньше был ::after
   «Изображение появится здесь» по центру блока, но он перекрывался
   с content-overlay (title/body/CTA) для footer/product layout'ов
   (где content стоит справа). Заголовок «Заголовок появится здесь»
   в content overlay сам объясняет что это превью. */
.ad-mockup__frame .ya-ad-internal__image.is-empty {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}
.ad-mockup__frame .ya-ad-internal__image img:not([src]) {
    display: none;
}
.ad-mockup__frame .ya-ad-wrap__remove { pointer-events: none; }

/* Превью загруженного/обрезанного изображения с крестиком удаления.
   Glass-стиль кнопки в правом верхнем углу — консистентно с .ya-ad-wrap__remove. */
.ad-preview {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
}
.ad-preview__img {
    display: block;
    max-width: 280px;
    max-height: 160px;
    object-fit: contain;
    border: 1px solid var(--border-subtle, #e3e5e8);
    border-radius: 8px;
    background: var(--surface-subtle, #f6f7f9);
}
.ad-preview__remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.92);
    color: #555;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: background 0.15s, color 0.15s, transform 0.1s;
}
.ad-preview__remove:hover { background: #fff; color: #c33; }
.ad-preview__remove:active { transform: scale(0.94); }
.ad-preview__remove svg { pointer-events: none; }

/* Disclaimer-блок «Что нельзя рекламировать» в форме создания кампании. */
.ad-legal-block {
    background: #fff8ed;
    border: 1px solid #f5c889;
    border-left: 4px solid #d97706;
    border-radius: 10px;
    padding: 16px 18px;
}
.ad-legal-block__head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #92400e;
    font-size: 14px;
    margin-bottom: 10px;
}
.ad-legal-block__list {
    margin: 0 0 10px;
    padding-left: 22px;
    color: #6b3a00;
    font-size: 13px;
    line-height: 1.55;
}
.ad-legal-block__list li { margin-bottom: 2px; }
.ad-legal-block__note {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: #6b3a00;
    line-height: 1.5;
}
.ad-legal-block__note a { color: var(--c-amber-700); text-decoration: underline; }
.ad-legal-block__check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    font-size: 13px;
    color: #4b2400;
    line-height: 1.5;
    cursor: pointer;
}
.ad-legal-block__check input[type=checkbox] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #d97706;
}

/* Warning авто-проверки контента по чёрному списку 38-ФЗ. Показывается креатору
   в форме создания кампании, когда ad_auto_check_content() вернул status=flagged.
   Не блокирует submit — финальное решение за модератором. */
.ad-autocheck-warning {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 12px 0;
    padding: 14px 16px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-left: 4px solid #d97706;
    border-radius: 10px;
    color: #78350f;
    font-size: 13px;
    line-height: 1.5;
}
.ad-autocheck-warning[hidden] { display: none; }
.ad-autocheck-warning svg { flex-shrink: 0; color: #d97706; margin-top: 1px; }
.ad-autocheck-warning strong { display: block; font-size: 13.5px; margin-bottom: 4px; color: #7c2d12; }
.ad-autocheck-warning p { margin: 4px 0; word-break: break-word; }
.ad-autocheck-warning small { display: block; margin-top: 6px; opacity: 0.85; font-size: 11.5px; }

/* Маркировка рекламодателя в баннере (38-ФЗ ст. 5 ч.6) — мелким шрифтом
   в правом нижнем углу content overlay поверх изображения. */
.ya-ad-internal__advertiser {
    position: absolute;
    right: 8px;
    bottom: 6px;
    z-index: 2;
    max-width: calc(100% - 16px);
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.85);
    font-size: 9px;
    line-height: 1.2;
    border-radius: 3px;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Footer/product — content справа, маркировка в левом нижнем углу image
   (чтобы не наезжала на content overlay). */
.ya-ad-wrap--footer .ya-ad-internal__advertiser,
.ya-ad-wrap--product .ya-ad-internal__advertiser {
    left: 8px;
    right: auto;
}
@media (max-width: 480px) {
    .ya-ad-internal__advertiser {
        font-size: 8px;
        padding: 1px 5px;
    }
}

/* ============================================================
   Внутренняя реклама (native-баннер) — рендерится через renderInternalAd()
   внутри той же .ya-ad-wrap. Заменяет iframe Я.Директа когда есть подходящая
   кампания креатора в статусе active.

   АРХИТЕКТУРА: креатив (image) заполняет ВЕСЬ слот целиком через object-fit:cover.
   Текст (title/body/CTA) — overlay на gradient'е снизу. Креатор обрезает изображение
   в cropper'е под aspect конкретного placement (4:5 catalog / 8:1 footer / 5:1 product),
   чтобы object-fit:cover в runtime минимально срезал значимые части.
   ============================================================ */
.ya-ad-internal {
    position: relative;
    display: block;
    padding: 0;
    height: 100%;
    width: 100%;
    background: #1a1a1a; /* видно если изображение не загрузилось */
    border-radius: 12px;
    overflow: hidden;
    color: #fff;
}
/* Image absolute fills всю обёртку */
.ya-ad-internal__image {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #1a1a1a;
}
.ya-ad-internal__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Gradient overlay снизу — обеспечивает читаемость текста */
.ya-ad-internal__content {
    position: absolute;
    inset: auto 0 0 0;
    padding: 60px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.6)  50%,
        rgba(0, 0, 0, 0)    100%
    );
    color: #fff;
    z-index: 2;
}
/* «Реклама»-плашка в правом верхнем углу — закон 38-ФЗ требует пометку */
.ya-ad-internal__label {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 4px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.ya-ad-internal__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.ya-ad-internal__body {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255,255,255,0.92);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.ya-ad-internal__cta {
    align-self: flex-start;
    margin-top: 6px;
    padding: 10px 18px;
    background: var(--color-primary, var(--color-primary));
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.ya-ad-internal__cta:hover {
    background: var(--color-primary--hover, #002fd8);
    color: #fff;
}
.ya-ad-internal__cta:active {
    transform: scale(0.97);
}

/* Footer-вариант (8:1 узкая широкая полоса) — content справа, gradient слева→центру */
.ya-ad-wrap--footer .ya-ad-internal {
    height: auto;
    min-height: 100px;
}
.ya-ad-wrap--footer .ya-ad-internal__content {
    inset: 0 0 0 auto;
    width: 60%;
    max-width: 520px;
    padding: 12px 16px;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.6) 30%,
        rgba(0, 0, 0, 0.85) 100%
    );
}
.ya-ad-wrap--footer .ya-ad-internal__title { font-size: 14px; -webkit-line-clamp: 1; }
.ya-ad-wrap--footer .ya-ad-internal__body { -webkit-line-clamp: 1; font-size: 12px; }
.ya-ad-wrap--footer .ya-ad-internal__cta {
    margin-top: 0;
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 8px;
}

/* Product-вариант (5:1 широкая полоса) — content справа, gradient как у footer */
.ya-ad-wrap--product .ya-ad-internal {
    height: auto;
    min-height: 180px;
}
.ya-ad-wrap--product .ya-ad-internal__content {
    inset: 0 0 0 auto;
    width: 55%;
    max-width: 600px;
    padding: 18px 22px;
    justify-content: center;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.6) 30%,
        rgba(0, 0, 0, 0.88) 100%
    );
}
.ya-ad-wrap--product .ya-ad-internal__title { font-size: 18px; -webkit-line-clamp: 2; }
.ya-ad-wrap--product .ya-ad-internal__body { -webkit-line-clamp: 2; font-size: 14px; }
.ya-ad-wrap--product .ya-ad-internal__cta {
    margin-top: 8px;
    padding: 10px 22px;
    font-size: 14px;
}

@media (max-width: 640px) {
    /* На мобильных footer (8:1) и product (5:1) в полную ширину экрана дают
       слишком узкую полосу (360/8 ≈ 45px) — текст не помещается. Складываем
       в нижний gradient-overlay как catalog + даём читаемую высоту. */
    .ya-ad-wrap--footer .ya-ad-internal,
    .ya-ad-wrap--product .ya-ad-internal {
        min-height: 150px; /* image cover сверху + bottom-overlay с текстом */
    }
    .ya-ad-wrap--footer .ya-ad-internal__content,
    .ya-ad-wrap--product .ya-ad-internal__content {
        inset: auto 0 0 0;
        width: 100%;
        max-width: none;
        padding: 44px 14px 12px;
        gap: 4px;
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.55) 55%,
            rgba(0, 0, 0, 0) 100%
        );
        justify-content: flex-end;
    }
    /* Унифицируем типографику текста для footer/product на мобильном */
    .ya-ad-wrap--footer .ya-ad-internal__title,
    .ya-ad-wrap--product .ya-ad-internal__title {
        font-size: 15px;
        -webkit-line-clamp: 2;
    }
    .ya-ad-wrap--footer .ya-ad-internal__body,
    .ya-ad-wrap--product .ya-ad-internal__body {
        font-size: 12px;
        -webkit-line-clamp: 1;
    }
    .ya-ad-wrap--footer .ya-ad-internal__cta,
    .ya-ad-wrap--product .ya-ad-internal__cta {
        margin-top: 4px;
        padding: 7px 16px;
        font-size: 13px;
        align-self: flex-start;
    }

    /* Catalog на мобильном — карточка 4:5 чуть компактнее по типографике
       (в каталоге часто 2 колонки на телефоне → ~175px ширина). */
    .ya-ad-wrap--catalog .ya-ad-internal__content {
        padding: 44px 12px 12px;
    }
    .ya-ad-wrap--catalog .ya-ad-internal__title { font-size: 15px; }
    .ya-ad-wrap--catalog .ya-ad-internal__cta {
        padding: 9px 14px;
        font-size: 13px;
    }

    /* «Реклама»-плашка компактнее на мобильном */
    .ya-ad-internal__label {
        font-size: 9px;
        padding: 2px 6px;
    }
}

/* Я.Директ fallback в каталоге: ужать iframe-контейнер в те же габариты что
   product-item — overflow:hidden уже на .ya-ad-wrap, тут лишь ничего не торчит. */
.ya-ad-wrap--catalog .ya-ad-wrap__inner iframe {
    width: 100% !important;
    max-height: 100%;
}

/* Внутренняя реклама не имеет :empty состояния (либо есть креатив, либо
   функция вернёт false и попадём на Я.Директ) — placeholder из :empty не нужен. */
.ya-ad-internal:empty { display: none; }

/* ============================================================
   Модалка «Без рекламы» — открывается из pill-кнопки [data-ad-remove]
   на любом рекламном блоке. Подписка за баллы (фиат — следующая фаза).
   ============================================================ */
.adfree-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.adfree-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.adfree-modal__card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 18px;
    padding: 32px 28px 24px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    animation: adfreeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes adfreeIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.adfree-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #888;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.adfree-modal__close:hover { background: #f4f5f7; color: #222; }
.adfree-modal__head { margin-bottom: 20px; padding-right: 32px; }
.adfree-modal__head h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: #111; }
.adfree-modal__head p { margin: 0; color: #666; font-size: 14px; line-height: 1.5; }
.adfree-modal__active {
    margin-bottom: 16px;
    padding: 12px 14px;
    background: #f0f9f0;
    border-left: 3px solid #117f4a;
    border-radius: 6px;
    color: #1d5a39;
    font-size: 13px;
    line-height: 1.5;
}
.adfree-modal__active strong { display: block; margin-bottom: 4px; }
.adfree-modal__active p { margin: 0; font-size: 12px; }

.adfree-modal__plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.adfree-plan {
    position: relative;
    border: 1px solid var(--border-subtle, #e3e5e8);
    border-radius: 12px;
    padding: 18px 14px 14px;
    text-align: center;
    transition: border-color 0.15s, transform 0.1s;
}
.adfree-plan--featured {
    border-color: var(--color-primary, var(--color-primary));
    border-width: 2px;
    padding: 17px 13px 13px;
}
.adfree-plan__badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 10px;
    background: var(--color-primary, var(--color-primary));
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.adfree-plan__label { font-size: 13px; color: #666; margin-bottom: 6px; }
.adfree-plan__price { font-size: 20px; font-weight: 700; color: #111; margin-bottom: 12px; }
.adfree-plan__currency { font-size: 13px; font-weight: 500; color: #888; }

.adfree-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}
.adfree-btn:active:not(:disabled) { transform: scale(0.97); }
.adfree-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.adfree-btn--primary { background: #1f2937; color: #fff; }
.adfree-btn--primary:hover:not(:disabled) { background: var(--c-gray-900); color: #fff; }

.adfree-modal__balance {
    text-align: center;
    font-size: 13px;
    color: #888;
    padding: 12px 0 0;
    border-top: 1px solid var(--border-subtle, #e3e5e8);
}
.adfree-modal__balance strong { color: #111; }
.adfree-modal__balance a { color: var(--color-primary, var(--color-primary)); margin-left: 4px; }

.adfree-modal__error {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fff5f5;
    border: 1px solid #ffd5d5;
    border-radius: 8px;
    color: #c33;
    font-size: 13px;
}

.adfree-modal__cta-block {
    text-align: center;
    padding: 16px 0;
}
.adfree-modal__cta-block p { margin: 0 0 14px; color: #666; }

@media (max-width: 520px) {
    .adfree-modal__plans { grid-template-columns: 1fr; }
    .adfree-modal__card { padding: 28px 20px 20px; }
}

/* ============================================================================
   MOBILE UX HARDENING (2026-06-07)
   Единый слой адаптации под тач. Цель: не менять десктоп-вид, а закрыть две
   системные проблемы тач-устройств. Сторонние слои (slick) НЕ переопределяются.
   ============================================================================ */

/* 1) iOS Safari зумит вьюпорт при фокусе на текстовом поле с font-size < 16px
   (у нас .form-control = 15px). Поднимаем до 16px ТОЛЬКО на узких вьюпортах —
   десктоп с мышью zoom не вызывает, его вид не трогаем. */
@media (max-width: 768px) {
    input:not([type]),
    input[type="text"],  input[type="email"],    input[type="tel"],
    input[type="number"], input[type="password"], input[type="search"],
    input[type="url"],    input[type="date"],     input[type="datetime-local"],
    textarea, select {
        font-size: 16px;
    }
}

/* 2) Тач-таргеты: на грубом указателе (палец) поднимаем СОБСТВЕННЫЕ мелкие
   управляющие элементы до --tap-min (44px, WCAG 2.5.5). Десктоп с мышью
   сохраняет компактный вид — таргетимся по типу ввода, а не по ширине экрана. */
@media (pointer: coarse) {
    .notif-header-close,
    .dropdown-close-btn {
        width:  var(--tap-min);
        height: var(--tap-min);
    }
    .notif-tg-promo-close {       /* компактный баннер: 32px + смещение к краю */
        width: 32px;
        height: 32px;
        top: 4px;
        right: 4px;
    }
    .notif-footer-link {          /* текстовая ссылка «Закрыть» — высота была ~16px */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--tap-min);
        padding: 0 16px;
    }
}