/* ══════════════════════════════════════════════
   MAILING — assets/css/pages/mailing.css
   Раздел «Рассылки»: каталог каналов → инструкция →
   мастер подключения бота → кастомизация → кампании.
   Локальные токены — по образцу --wgm-* в widget_gen.css.
   ══════════════════════════════════════════════ */

.mlg-wrap {
    --mlg-ink:        #111217;
    --mlg-ink-soft:   rgba(17,18,23,.58);
    --mlg-ink-faint:  rgba(17,18,23,.4);
    --mlg-green:      #A8E76A;
    --mlg-green-dark: #315d20;
    --mlg-card-bg:     rgba(255,255,255,.68);
    --mlg-card-border: rgba(255,255,255,.72);
    --mlg-radius:    20px;
    --mlg-radius-sm: 14px;

    max-width: 1880px;
    margin: 0 auto;
    padding: 4px 4px 48px;
    font-family: 'Onest', sans-serif;
    color: var(--mlg-ink);
}

.mlg-wrap h1, .mlg-wrap h2, .mlg-wrap h3 {
    font-family: 'Unbounded', sans-serif;
    margin: 0;
    color: var(--mlg-ink);
}

/* ── Page header ── */
.mlg-pagehead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 26px;
}

.mlg-pagehead h1 {
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 850;
    line-height: 1.06;
}

.mlg-pagehead p {
    max-width: 560px;
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--mlg-ink-soft);
}

.mlg-pagehead-actions { flex-shrink: 0; }

.mlg-site-pill {
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: var(--mlg-card-bg);
    color: var(--mlg-ink);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 18px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(17,18,23,.055), inset 0 0 0 1px rgba(17,18,23,.06);
}
.mlg-site-pill span {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 5px rgba(16,185,129,.12);
}

/* ── Screens: только активный виден, переключение — inline style из mailing.js ── */
.mlg-screen { display: none; }
.mlg-screen--channels { display: block; }

/* ── Каталог каналов ── */
.mlg-channels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.mlg-channel-card {
    position: relative;
    text-align: left;
    border: 1px solid var(--mlg-card-border);
    border-radius: var(--mlg-radius);
    background: var(--mlg-card-bg);
    box-shadow: 0 1px 0 rgba(17,18,23,.035);
    padding: 22px;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}
.mlg-channel-card:hover { border-color: rgba(17,18,23,.14); transform: translateY(-2px); }
.mlg-channel-card[data-soon="1"] { cursor: default; opacity: .72; }
.mlg-channel-card[data-soon="1"]:hover { transform: none; border-color: var(--mlg-card-border); }

.mlg-channel-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(168,231,106,.5), rgba(255,255,255,.5));
    color: var(--mlg-green-dark);
    margin-bottom: 14px;
}
.mlg-channel-icon svg { width: 24px; height: 24px; }

.mlg-channel-card h3 { font-size: 17px; font-weight: 750; margin-bottom: 6px; }
.mlg-channel-card p { font-size: 13px; line-height: 1.5; color: var(--mlg-ink-soft); margin: 0; }

.mlg-channel-status {
    position: absolute; top: 18px; right: 18px;
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
    padding: 4px 9px; border-radius: 999px;
}
.mlg-channel-status--available { background: var(--mlg-green); color: var(--mlg-green-dark); }
.mlg-channel-status--soon { background: rgba(17,18,23,.08); color: var(--mlg-ink-soft); }
.mlg-channel-status--connected { background: #dcfce7; color: #15803d; }

/* ── Кнопка "Назад" ── */
.mlg-back {
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 700;
    color: var(--mlg-ink-soft);
    padding: 8px 0; margin-bottom: 14px;
}
.mlg-back:hover { color: var(--mlg-ink); }

/* ── Экран инструкции ──
   Карточка — во всю ширину рабочей области (как окно генерации в ИИ
   Конструкторе), содержимое внутри — узкой центрированной колонкой. */
.mlg-info-card {
    display: flex; align-items: flex-start; justify-content: center;
    text-align: center;
    border: 1px solid var(--mlg-card-border);
    border-radius: 32px;
    background: var(--mlg-card-bg);
    backdrop-filter: blur(18px);
    padding: 56px 32px;
}
.mlg-info-inner { width: 100%; max-width: 500px; }
.mlg-info-icon {
    width: 68px; height: 68px; margin: 0 auto 22px;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(168,231,106,.55), rgba(255,255,255,.5));
    color: var(--mlg-green-dark);
}
.mlg-info-icon svg { width: 32px; height: 32px; }
.mlg-info-card h2 { font-size: 28px; font-weight: 800; margin-bottom: 12px; }
.mlg-info-desc { font-size: 15px; line-height: 1.6; color: var(--mlg-ink-soft); margin: 0 0 30px; }

.mlg-info-features {
    text-align: left;
    display: flex; flex-direction: column; gap: 13px;
    margin: 0 0 30px;
}
.mlg-info-feature {
    display: flex; align-items: flex-start; gap: 11px;
    font-size: 14px; line-height: 1.5; color: var(--mlg-ink);
}
.mlg-info-feature svg { flex-shrink: 0; margin-top: 2px; color: var(--mlg-green-dark); }

.mlg-info-note {
    text-align: left;
    font-size: 13px; line-height: 1.5;
    background: rgba(217,119,6,.08); color: #92400e;
    border-radius: 14px; padding: 14px 16px; margin-bottom: 28px;
}

/* ── Кнопки ── */
.mlg-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; cursor: pointer;
    background: var(--mlg-green);
    color: var(--mlg-green-dark);
    font-family: inherit; font-weight: 800; font-size: 13.5px;
    border-radius: 999px;
    height: 44px; padding: 0 22px;
    transition: filter .15s, transform .1s;
}
.mlg-btn-primary:hover { filter: brightness(1.06); }
.mlg-btn-primary:active { transform: scale(.98); }
.mlg-btn-primary:disabled { opacity: .5; cursor: default; filter: none; }
.mlg-btn-primary.loading svg { animation: mlg-spin .7s linear infinite; }
.mlg-btn-lg { width: 100%; margin-top: 4px; }

.mlg-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid rgba(17,18,23,.12); cursor: pointer;
    background: #fff; color: var(--mlg-ink);
    font-family: inherit; font-weight: 700; font-size: 12.5px;
    border-radius: 999px; height: 36px; padding: 0 16px;
}
.mlg-btn-ghost:hover { background: rgba(17,18,23,.04); }
.mlg-btn-sm { height: 32px; font-size: 12px; padding: 0 14px; }

.mlg-link-btn {
    border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 700;
    color: var(--mlg-ink-soft); text-decoration: underline; text-underline-offset: 2px;
    padding: 0;
}
.mlg-link-btn:hover { color: var(--mlg-ink); }
.mlg-link-btn--danger { color: #b91c1c; }
.mlg-link-btn--danger:hover { color: #7f1d1d; }

.mlg-btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; cursor: pointer;
    background: #dc2626; color: #fff;
    font-family: inherit; font-weight: 800; font-size: 13.5px;
    border-radius: 999px; height: 44px; padding: 0 22px;
    transition: filter .15s, transform .1s;
}
.mlg-btn-danger:hover { filter: brightness(1.08); }
.mlg-btn-danger:active { transform: scale(.98); }

/* ── Поля ввода ── */
.mlg-field-label {
    display: block; font-size: 12.5px; font-weight: 750;
    color: var(--mlg-ink-soft); margin: 16px 0 6px;
}
.mlg-input {
    width: 100%; box-sizing: border-box;
    border: 1px solid rgba(17,18,23,.08); border-radius: 14px;
    background: rgba(17,18,23,.035); color: var(--mlg-ink);
    font-family: inherit; font-size: 13.5px;
    padding: 11px 14px;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.mlg-input::placeholder { color: var(--mlg-ink-faint); }
.mlg-input:focus {
    outline: none; background: #fff;
    border-color: rgba(168,231,106,.9);
    box-shadow: 0 0 0 4px rgba(168,231,106,.2);
}
.mlg-textarea { resize: vertical; line-height: 1.5; }
.mlg-field-err { color: #dc2626; font-size: 12px; margin-top: 8px; display: none; }

/* ── Экран подключения бота ── */
.mlg-connect-card {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    border: 1px solid var(--mlg-card-border);
    border-radius: 32px;
    background: var(--mlg-card-bg);
    backdrop-filter: blur(18px);
    padding: 40px 48px 48px;
}
/* Заголовок, плашка шага и подсказка под ним — по стилю всегда слева.
   Плашка шага — не отдельной строкой сверху, а рядом с заголовком,
   чтобы вся шапка была компактнее и располагалась выше. Форма ниже —
   в той же левой колонке, что и заголовок (не центрируется отдельно,
   иначе визуально «отрывается» от заголовка). */
.mlg-step-label { align-self: flex-start; text-align: left; width: 100%; margin-bottom: 22px; }
.mlg-connect-inner { align-self: flex-start; width: 100%; max-width: 500px; }
/* Строка на всю ширину карточки — заголовок слева, плашка шага
   прижата к самому правому краю. */
.mlg-step-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; }
.mlg-step-badge {
    display: inline-block; flex-shrink: 0;
    font-size: 11px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
    color: var(--mlg-green-dark); background: rgba(168,231,106,.35);
    border-radius: 999px; padding: 5px 12px;
}
.mlg-connect-card h2 { font-size: 28px; font-weight: 800; margin: 0; }
.mlg-step-label .mlg-connect-hint { max-width: 560px; margin-top: 12px; }
.mlg-connect-hint { font-size: 15px; line-height: 1.6; color: var(--mlg-ink-soft); margin: 0; }
.mlg-connect-hint code {
    background: rgba(17,18,23,.06); border-radius: 6px; padding: 1px 6px; font-size: 13px;
}
.mlg-connect-form { margin-top: 22px; text-align: left; }
.mlg-token-row { display: flex; gap: 10px; align-items: flex-start; }
.mlg-token-row .mlg-input { flex: 1; }
.mlg-token-row .mlg-btn-primary { flex-shrink: 0; }

/* ── Анимация проверки токена — у каждого шага свой круглый индикатор
   (пусто -> вращающееся кольцо -> заполненная галочка), шаги соединены
   вертикальной линией-таймлайном, как в проверенных степперах. */
@keyframes mlg-spin { to { transform: rotate(360deg); } }

.mlg-verify {
    margin-top: 26px;
    display: flex; flex-direction: column; gap: 16px;
    border-top: 1px solid rgba(17,18,23,.08);
    padding-top: 26px;
}
.mlg-verify-step {
    position: relative;
    display: flex; align-items: center; gap: 13px;
    font-size: 14px; color: var(--mlg-ink-faint); transition: color .2s;
}
.mlg-verify-step.active { color: var(--mlg-ink); font-weight: 700; }
.mlg-verify-step.done { color: var(--mlg-green-dark); }

/* Линия-таймлайн между кружками — от низа текущего до верха следующего */
.mlg-verify-step:not(:last-child)::before {
    content: '';
    position: absolute; left: 11px; top: 24px;
    width: 2px; height: 16px;
    background: rgba(17,18,23,.12);
    transition: background .25s;
}
.mlg-verify-step.done:not(:last-child)::before { background: var(--mlg-green-dark); }

.mlg-verify-dot {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(17,18,23,.14);
    transition: border-color .2s, background .2s;
}
/* В процессе — вращающееся кольцо (как раньше был общий спиннер,
   только теперь свой у активного шага) */
.mlg-verify-step.active .mlg-verify-dot {
    border-color: rgba(168,231,106,.4);
    border-top-color: var(--mlg-green-dark);
    animation: mlg-spin .8s linear infinite;
}
/* Готово — заполненный кружок с галочкой */
.mlg-verify-step.done .mlg-verify-dot {
    border-color: var(--mlg-green-dark);
    background: var(--mlg-green-dark);
}
.mlg-verify-step.done .mlg-verify-dot::after {
    content: '';
    width: 5px; height: 9px;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(45deg) translate(-1px, -1px);
}

/* ── Экран кастомизации ──
   Карточка — на всю ширину рабочей области (как окно генерации в ИИ
   Конструкторе, .wgen-screen--gen), а содержимое внутри — узкой
   центрированной колонкой, чтобы не растягиваться на всю ширину. */
.mlg-screen--customize { max-width: 100%; }

.mlg-customize-card {
    display: flex; flex-direction: column; align-items: center;
    border: 1px solid var(--mlg-card-border);
    border-radius: 32px;
    background: var(--mlg-card-bg);
    backdrop-filter: blur(18px);
    padding: 40px 48px 56px;
}

/* Заголовок, плашка шага и подсказка — слева (общая .mlg-step-label
   выше), остальное содержимое центрировано. Тут только увеличенный h2. */
.mlg-customize-card .mlg-step-label h2 { font-size: 30px; font-weight: 800; margin: 0; }

.mlg-customize-body {
    display: flex; flex-direction: column; align-items: stretch;
    width: 100%; max-width: 880px;
}

/* Аватар слева, поля справа — не друг под другом, а рядом, чтобы
   широкие поля ввода реально использовали ширину карточки. */
.mlg-customize-row {
    display: flex; align-items: flex-start; gap: 56px;
}

.mlg-customize-preview {
    flex: 0 0 200px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    text-align: center;
    padding-top: 4px;
}
.mlg-bot-avatar {
    width: 140px; height: 140px; border-radius: 50%;
    background: rgba(17,18,23,.035);
    border: 2px dashed rgba(17,18,23,.16);
    display: flex; align-items: center; justify-content: center;
    color: var(--mlg-ink-faint);
    overflow: hidden;
    transition: border-color .15s;
}
.mlg-bot-avatar.has-logo { border-style: solid; border-color: var(--mlg-card-border); }
.mlg-bot-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mlg-bot-avatar svg { width: 46px; height: 46px; }

.mlg-logo-btns { display: flex; gap: 8px; }
.mlg-logo-btn {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(17,18,23,.1); cursor: pointer;
    background: #fff; color: var(--mlg-ink-soft);
    font-family: inherit; font-weight: 700; font-size: 13px;
    border-radius: 999px; height: 38px; padding: 0 17px;
    transition: border-color .13s, color .13s, background .13s;
}
.mlg-logo-btn:hover { border-color: rgba(17,18,23,.22); color: var(--mlg-ink); background: rgba(17,18,23,.03); }
.mlg-logo-btn--remove:hover { border-color: #fca5a5; color: #dc2626; background: #fff1f1; }

.mlg-bot-username-chip {
    display: inline-flex; align-items: center;
    background: rgba(17,18,23,.045); color: var(--mlg-ink-soft);
    font-size: 13px; font-weight: 700;
    border-radius: 999px; padding: 7px 14px;
    max-width: 100%;
}
.mlg-bot-username-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mlg-customize-fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mlg-customize-fields .mlg-field-label:first-child { margin-top: 0; }
.mlg-customize-fields .mlg-field-label { font-size: 13.5px; margin: 20px 0 8px; }
.mlg-customize-fields .mlg-field-label:first-child { margin-top: 4px; }
.mlg-customize-fields .mlg-input { font-size: 14.5px; padding: 14px 16px; border-radius: 16px; }
.mlg-customize-body > .mlg-btn-primary { align-self: center; max-width: 320px; margin-top: 32px; height: 50px; font-size: 14.5px; }

/* ── Экран кампаний ── */
.mlg-pagehead--campaigns { align-items: center; margin-bottom: 22px; }
.mlg-bot-chip {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--mlg-card-border); border-radius: 999px;
    background: var(--mlg-card-bg); padding: 8px 10px 8px 8px;
    flex-wrap: wrap;
}
.mlg-bot-chip-ava {
    width: 38px; height: 38px; border-radius: 12px; overflow: hidden;
    background: linear-gradient(135deg, rgba(168,231,106,.5), rgba(255,255,255,.6));
    color: var(--mlg-green-dark);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mlg-bot-chip-ava img { width: 100%; height: 100%; object-fit: cover; }
.mlg-bot-chip-name { font-size: 13px; font-weight: 750; }
.mlg-bot-chip-sub { font-size: 11.5px; color: var(--mlg-ink-soft); }
.mlg-bot-chip-divider { width: 1px; height: 26px; background: rgba(17,18,23,.1); }
.mlg-bot-chip-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.15; padding: 0 4px; }
.mlg-bot-chip-stat strong { font-family: 'Unbounded', sans-serif; font-size: 15px; }
.mlg-bot-chip-stat span { font-size: 10px; color: var(--mlg-ink-soft); }

.mlg-bot-chip-actions { display: flex; align-items: center; gap: 6px; }
.mlg-chip-icon-btn {
    width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: transparent; color: var(--mlg-ink-soft);
    transition: background .13s, color .13s;
}
.mlg-chip-icon-btn:hover { background: rgba(17,18,23,.06); color: var(--mlg-ink); }
.mlg-chip-icon-btn--danger:hover { background: #fee2e2; color: #dc2626; }

/* ── Отвязка бота — лаконично: одна приглушённая кнопка под тонким
   разделителем, без большого акцентного блока. Подробности — в title
   (подсказка при наведении), чтобы не перегружать экран текстом. */
.mlg-danger-zone {
    display: flex; justify-content: center;
    width: 100%; margin-top: 28px; padding-top: 22px;
    border-top: 1px solid rgba(17,18,23,.08);
}
.mlg-btn-ghost--danger {
    background: transparent;
    border-color: transparent;
    color: var(--mlg-ink-faint);
}
.mlg-btn-ghost--danger:hover {
    background: #fee2e2; border-color: rgba(220,38,38,.25); color: #dc2626;
}
.mlg-btn-ghost--danger:hover { background: #fee2e2; border-color: #fca5a5; }

/* ── Плитки типов рассылок ── */
.mlg-types-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.mlg-type-tile {
    display: flex; flex-direction: column; gap: 8px;
    text-align: left; cursor: pointer;
    border: 1px solid var(--mlg-card-border); border-radius: var(--mlg-radius-sm);
    background: var(--mlg-card-bg);
    padding: 16px;
    transition: border-color .15s, transform .15s;
}
.mlg-type-tile:hover { border-color: rgba(17,18,23,.14); transform: translateY(-2px); }
.mlg-type-tile.active { border-color: var(--mlg-green-dark); box-shadow: 0 0 0 2px rgba(168,231,106,.45); }
.mlg-type-tile-icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(168,231,106,.35); color: var(--mlg-green-dark);
}
.mlg-type-tile-icon svg { width: 18px; height: 18px; }
.mlg-type-tile-name { font-size: 13.5px; font-weight: 750; }
.mlg-type-tile-desc { font-size: 11.5px; color: var(--mlg-ink-soft); line-height: 1.4; }

/* ── Композер ──
   Ограничиваем ширину, чтобы поля текста не растягивались на всю
   широкую .mlg-wrap (актуально после расширения под ширину блока
   генерации в ИИ Конструкторе) — так текст остаётся удобным для чтения. */
.mlg-composer {
    border: 1px solid var(--mlg-card-border); border-radius: var(--mlg-radius);
    background: var(--mlg-card-bg);
    padding: 28px; margin-bottom: 28px;
}
.mlg-composer-head { display: flex; align-items: center; justify-content: space-between; }

/* ── Блок автонастройки внутри композера типа «Дни рождения» — визуально
   отделён от разовой рассылки ниже, но не отдельная карточка ── */
.mlg-birthday-auto {
    border: 1px solid var(--mlg-card-border); border-radius: 14px;
    background: rgba(168,231,106,.08);
    padding: 16px 18px; margin: 18px 0 22px;
}
.mlg-birthday-auto-divider {
    height: 1px; background: var(--mlg-card-border);
    margin: 16px 0 12px;
}
.mlg-composer-head h3 { font-size: 17px; }

.mlg-field-optional {
    font-weight: 600; font-size: 10.5px;
    color: var(--mlg-ink-faint); margin-left: 2px;
}

/* ── Иконка-кнопка AI, встроенная прямо в поле (Тема/Текст) —
   один клик = сразу генерирует, без лишних диалогов. ── */
.mlg-input-ai-wrap { position: relative; }
.mlg-input--ai { padding-right: 42px; }
.mlg-inline-ai-btn {
    position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 0; cursor: pointer;
    background: linear-gradient(135deg, #A8E76A, #6fce8a);
    color: #16351a;
    transition: transform .12s;
}
.mlg-inline-ai-btn:hover { transform: translateY(-50%) scale(1.08); }
.mlg-inline-ai-btn--top { top: 12px; transform: none; }
.mlg-inline-ai-btn--top:hover { transform: scale(1.08); }
.mlg-inline-ai-btn.loading svg { animation: mlg-spin .7s linear infinite; }
.mlg-inline-ai-btn:disabled { opacity: .7; cursor: default; }

/* ── Загрузка баннера — как готовая картинка от компании к письму ── */
.mlg-banner-upload {
    /* 16:9 — рекомендуемое Telegram соотношение для landscape-фото в
       sendPhoto (наравне с 1:1 и 4:5), ближе всего к «баннеру» */
    position: relative;
    width: 100%; max-width: 640px; aspect-ratio: 16 / 9;
    border-radius: 16px; overflow: hidden;
    cursor: pointer;
    background: rgba(17,18,23,.03);
    border: 1.5px dashed rgba(17,18,23,.16);
    transition: border-color .15s, background .15s;
}
.mlg-banner-upload:hover { border-color: rgba(17,18,23,.28); background: rgba(17,18,23,.05); }
.mlg-banner-upload.has-banner { border-style: solid; border-color: var(--mlg-card-border); background: none; }
.mlg-banner-upload img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mlg-banner-empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 14px;
    color: var(--mlg-ink-faint);
}
.mlg-banner-empty-click {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    cursor: pointer;
}
.mlg-banner-empty span { font-size: 13px; font-weight: 750; color: var(--mlg-ink-soft); }
.mlg-banner-empty small { font-size: 11px; line-height: 1.45; max-width: 320px; color: var(--mlg-ink-faint); }
.mlg-banner-remove {
    position: absolute; top: 10px; right: 10px;
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; cursor: pointer;
    background: rgba(17,18,23,.55); color: #fff;
    backdrop-filter: blur(4px);
    transition: background .15s;
}
.mlg-banner-remove:hover { background: rgba(17,18,23,.78); }

/* ── Аудитория ── */
.mlg-audience { margin-top: 18px; }
.mlg-audience-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.mlg-audience-all { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; }

/* ── Чекбоксы аудитории — свои, в цвет продукта (не системные синие) ── */
.mlg-audience-all input[type="checkbox"],
.mlg-audience-check {
    appearance: none; -webkit-appearance: none; margin: 0;
    width: 18px; height: 18px; flex-shrink: 0;
    border: 1.5px solid rgba(17,18,23,.2);
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: background .15s, border-color .15s;
}
.mlg-audience-all input[type="checkbox"]:hover,
.mlg-audience-check:hover { border-color: rgba(17,18,23,.34); }
.mlg-audience-all input[type="checkbox"]:checked,
.mlg-audience-check:checked {
    background: var(--mlg-green);
    border-color: var(--mlg-green);
}
.mlg-audience-all input[type="checkbox"]:checked::after,
.mlg-audience-check:checked::after {
    content: '';
    position: absolute; left: 5px; top: 2px;
    width: 5px; height: 9px;
    border-right: 2px solid var(--mlg-green-dark); border-bottom: 2px solid var(--mlg-green-dark);
    transform: rotate(45deg);
}
.mlg-audience-all input[type="checkbox"]:focus-visible,
.mlg-audience-check:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(168,231,106,.35);
}
.mlg-audience-count { font-size: 12px; color: var(--mlg-ink-soft); margin-left: auto; }
.mlg-audience-list {
    max-height: 220px; overflow-y: auto;
    border: 1px solid rgba(17,18,23,.08); border-radius: 14px;
    background: rgba(255,255,255,.55);
}
.mlg-audience-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer;
    border-bottom: 1px solid rgba(17,18,23,.055);
}
.mlg-audience-item:last-child { border-bottom: 0; }
.mlg-audience-item:hover { background: rgba(17,18,23,.03); }
.mlg-audience-ava {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: var(--mlg-green); color: var(--mlg-green-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
}
.mlg-audience-name { font-size: 13px; font-weight: 700; }
.mlg-audience-meta { font-size: 11.5px; color: var(--mlg-ink-soft); }

/* ── История рассылок ── */
.mlg-history-head { font-size: 13px; font-weight: 800; color: var(--mlg-ink-soft); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 12px; }
.mlg-history-list { display: flex; flex-direction: column; gap: 10px; }
.mlg-history-card {
    display: flex; align-items: center; gap: 14px;
    border: 1px solid var(--mlg-card-border); border-radius: var(--mlg-radius-sm);
    background: var(--mlg-card-bg);
    padding: 14px 16px;
}
.mlg-history-icon {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(168,231,106,.35); color: var(--mlg-green-dark);
}
.mlg-history-icon svg { width: 18px; height: 18px; }
.mlg-history-icon--banner { background: none; overflow: hidden; }
.mlg-history-icon--banner img { width: 100%; height: 100%; object-fit: cover; }
.mlg-history-body { flex: 1; min-width: 0; }
.mlg-history-title { font-size: 13.5px; font-weight: 750; }
.mlg-history-meta { font-size: 11.5px; color: var(--mlg-ink-soft); margin-top: 2px; }
.mlg-history-stats { display: flex; gap: 18px; flex-shrink: 0; }
.mlg-history-stat { text-align: center; }
.mlg-history-stat strong { display: block; font-family: 'Unbounded', sans-serif; font-size: 15px; }
.mlg-history-stat span { font-size: 10px; color: var(--mlg-ink-soft); }
.mlg-history-status {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    padding: 4px 9px; border-radius: 999px; flex-shrink: 0;
}
.mlg-history-status--sent { background: #dcfce7; color: #15803d; }
.mlg-history-status--scheduled { background: #fef3c7; color: #92400e; }

/* ── Пусто ── */
.mlg-empty { text-align: center; padding: 30px 10px; color: var(--mlg-ink-soft); font-size: 13px; }

/* ── Модалка подтверждения (отвязка бота) ── */
.mlg-confirm-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(17,18,23,.42);
    backdrop-filter: blur(3px);
    padding: 20px;
    animation: mlg-fade-in .15s ease;
}
@keyframes mlg-fade-in { from { opacity: 0; } to { opacity: 1; } }
.mlg-confirm-modal {
    width: 100%; max-width: 380px;
    text-align: center;
    border: 1px solid var(--mlg-card-border);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(17,18,23,.25);
    padding: 32px 28px 28px;
    animation: mlg-pop-in .18s ease;
}
@keyframes mlg-pop-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.mlg-confirm-icon {
    width: 52px; height: 52px; margin: 0 auto 16px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: #fee2e2; color: #dc2626;
}
.mlg-confirm-modal h3 { font-size: 19px; font-weight: 800; margin-bottom: 10px; }
.mlg-confirm-modal p { font-size: 13.5px; line-height: 1.55; color: var(--mlg-ink-soft); margin: 0 0 24px; }
.mlg-confirm-actions { display: flex; gap: 10px; }
.mlg-confirm-actions .mlg-btn-ghost,
.mlg-confirm-actions .mlg-btn-danger { flex: 1; }

/* ── QR-код бота ── */
.mlg-qr-modal { max-width: 420px; position: relative; }
.mlg-qr-close {
    position: absolute; top: 16px; right: 16px;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 0; cursor: pointer;
    background: rgba(17,18,23,.06); color: var(--mlg-ink-soft);
    transition: background .13s, color .13s;
}
.mlg-qr-close:hover { background: rgba(17,18,23,.12); color: var(--mlg-ink); }
.mlg-qr-canvas-wrap {
    width: 220px; height: 220px; margin: 8px auto 12px;
    border-radius: 18px; overflow: hidden;
    background: #fff;
    border: 1px solid var(--mlg-card-border);
    box-shadow: 0 10px 26px rgba(17,18,23,.1);
}
.mlg-qr-canvas-wrap canvas { width: 100%; height: 100%; display: block; }
.mlg-qr-link {
    font-size: 12px; font-weight: 700; color: var(--mlg-ink-soft);
    margin-bottom: 18px; word-break: break-all;
}
.mlg-qr-styles-row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin-bottom: 16px;
}
.mlg-qr-style-btn {
    border: 1px solid var(--mlg-card-border); border-radius: 999px;
    background: var(--mlg-card-bg);
    padding: 7px 14px; font-size: 12px; font-weight: 700;
    color: var(--mlg-ink-soft); cursor: pointer;
    transition: border-color .13s, color .13s, background .13s;
}
.mlg-qr-style-btn:hover { border-color: rgba(17,18,23,.2); color: var(--mlg-ink); }
.mlg-qr-style-btn.active {
    border-color: var(--mlg-green-dark); background: var(--mlg-green); color: var(--mlg-green-dark);
}

.mlg-qr-colors-row {
    display: flex; justify-content: center; gap: 20px;
    margin-bottom: 14px;
}
.mlg-qr-color-field {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; color: var(--mlg-ink-soft);
}
.mlg-qr-color-field input[type="color"] {
    width: 34px; height: 34px; padding: 0; border-radius: 50%;
    border: 2px solid var(--mlg-card-border); cursor: pointer;
    background: none;
}
.mlg-qr-color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; border-radius: 50%; }
.mlg-qr-color-field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.mlg-qr-color-field input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }

.mlg-qr-warning {
    font-size: 12px; line-height: 1.5; font-weight: 600;
    color: #92400e; background: #fef3c7;
    border: 1px solid rgba(146,64,14,.2); border-radius: 12px;
    padding: 10px 14px; margin-bottom: 16px; text-align: left;
}

.mlg-qr-logo-toggle {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 12.5px; font-weight: 700; color: var(--mlg-ink-soft);
    cursor: pointer; margin-bottom: 22px;
}
.mlg-qr-logo-toggle input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; margin: 0;
    width: 17px; height: 17px; flex-shrink: 0;
    border: 1.5px solid rgba(17,18,23,.2); border-radius: 5px;
    background: #fff; cursor: pointer; position: relative;
    transition: background .15s, border-color .15s;
}
.mlg-qr-logo-toggle input[type="checkbox"]:checked { background: var(--mlg-green); border-color: var(--mlg-green); }
.mlg-qr-logo-toggle input[type="checkbox"]:checked::after {
    content: ''; position: absolute; left: 4.5px; top: 1.5px;
    width: 5px; height: 9px;
    border-right: 2px solid var(--mlg-green-dark); border-bottom: 2px solid var(--mlg-green-dark);
    transform: rotate(45deg);
}

/* ── Responsive ── */
@media (max-width: 720px) {
    .mlg-pagehead { flex-direction: column; }
    .mlg-customize-card, .mlg-connect-card { padding: 32px 22px 40px; }
    .mlg-step-row { flex-wrap: wrap; gap: 8px; }
    .mlg-customize-row { flex-direction: column; align-items: center; gap: 28px; }
    .mlg-customize-fields { width: 100%; }
    .mlg-token-row { flex-direction: column; }
    .mlg-token-row .mlg-btn-primary { width: 100%; }
    .mlg-history-card { flex-wrap: wrap; }
    .mlg-history-stats { width: 100%; justify-content: flex-start; }
}