/* ============ Переменные ============ */
:root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #242424;
    --bg-tertiary: #2d2d2d;
    --bg-card: #242424;
    --bg-hover: #2d2d2d;
    --text-primary: #ececec;
    --text-secondary: #a0a0a0;
    --text-muted: #6a6a6a;
    --accent: #3390ec;
    --accent-hover: #2b7fd4;
    --success: #4caf50;
    --warning: #ff9800;
    --error: #f44336;
    --border: #3d3d3d;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    
    /* Цвета операций */
    --color-create: #3390ec;
    --color-sync: #4caf50;
    --color-edit: #b62dcd;
    --color-delete: #f44336;
    --color-warning: #ff9800;
    --color-limit: #fdd835;
    --color-error: #f44336;
    --color-broadcast: #00BCD4;

    /* Glass-эффект (нейтральный) */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border-bright: rgba(255, 255, 255, 0.3);
    --glass-border-dim: rgba(255, 255, 255, 0.05);
    
    /* Нумерация строк */
    --gutter-width: 32px;
}

/* ============ Анимации ============ */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============ Сброс и базовые стили ============ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
}

body.modal-open {
    overflow: hidden;
}

/* ============ Основной layout ============ */
.app {
    display: flex;
    min-height: 100vh;
}

/* ============ Навбар ============ */
.navbar {
    width: 220px;
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
}

.navbar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 20px 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    text-decoration: none;
}

.logo-full {
    width: 170px;
    height: auto;
}

.logo-compact {
    width: 32px;
    height: auto;
    display: none;
}

.navbar-menu {
    flex: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.nav-item:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.nav-item.active {
    background-color: var(--accent);
    color: white;
}

.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    width: 24px;
}

.nav-text {
    font-size: 14px;
}

.navbar-bottom {
    border-top: 1px solid var(--border);
    padding-top: 15px;
    margin-top: auto;
}

/* ============ Контент ============ */
.content {
    flex: 1;
    margin-left: 220px;
    padding: 30px;
    background-color: var(--bg-primary);
}

.page {
    display: none;
}

.page.active {
    display: block;
}

.page-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
}

.page-header h1 {
    font-size: 28px;
    font-weight: 600;
    flex: 1;
}

.header-actions {
    display: flex;
    gap: 10px;
}

/* ============ Кнопки ============ */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn svg {
    flex-shrink: 0;
}

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

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

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

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

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

.btn-danger:hover {
    background-color: #d32f2f;
}

.btn-back {
    background: none;
    color: var(--text-secondary);
    padding: 10px 15px;
}

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

.btn-large {
    padding: 15px 30px;
    font-size: 16px;
}

.btn-small {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-load-more {
    width: 100%;
    margin-top: 20px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============ Карточки статистики ============ */
.stats-cards {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

/* Общие glass-стили для карточек */
.stat-card,
.account-info-card {
    position: relative;
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.stat-card::before,
.account-info-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(
        140deg,
        var(--glass-border-bright) 0%,
        var(--glass-border-dim) 33%,
        var(--glass-border-dim) 66%,
        var(--glass-border-bright) 99%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Специфичные свойства */
.stat-card {
    position: relative;
    padding: 25px;
    min-width: 180px;
}

.stat-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 6px;
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ============ Списки ============ */
.list {
    background-color: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.list-empty {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

/* ============ LIST-ITEM: БАЗОВЫЙ КЛАСС (только визуал) ============ */

.list-item {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border);
    transition: background-color 0.2s;
}

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

.list-item:hover {
    background-color: var(--bg-hover);
}

.list-item.clickable {
    cursor: pointer;
}

.list-item.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============ LIST-ITEM: ДОЧЕРНИЕ ЭЛЕМЕНТЫ ============ */

.list-item-id {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

.list-item-content {
    min-width: 0;
    /* flex: 1 убран — grid контролирует размеры */
}

.list-item-title {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-item-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Кликабельное название аккаунта */
.list-item--account .list-item-title {
    cursor: pointer;
}

.list-item--account .list-item-title:hover {
    color: var(--accent);
}

/* ============ GLASS BADGE СИСТЕМА ============ */

/* Базовый glass-badge */
.glass-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
}

/* Градиентная обводка (linear-gradient) */
.glass-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    padding: 1px;
    background: linear-gradient(
        140deg,
        var(--badge-border-bright) 0%,
        var(--badge-border-dim) 33%,
        var(--badge-border-dim) 66%,
        var(--badge-border-bright) 99%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Зелёная точка для статуса "Подключен" */
.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--success);
    flex-shrink: 0;
}

/* === Модификаторы цветов === */

/* Idle (Подключен) — нейтральный glass */
.glass-badge--idle {
    background: var(--glass-bg);
    color: rgba(255, 255, 255, 0.7);
    --badge-border-bright: var(--glass-border-bright);
    --badge-border-dim: var(--glass-border-dim);
}

/* Create (Создание) — синий */
.glass-badge--create {
    background: rgba(51, 144, 236, 0.15);
    color: var(--color-create);
    --badge-border-bright: rgba(51, 144, 236, 0.5);
    --badge-border-dim: rgba(51, 144, 236, 0.15);
}

/* Edit (Редактирование) — фиолетовый */
.glass-badge--edit {
    background: rgba(182, 45, 205, 0.15);
    color: var(--color-edit);
    --badge-border-bright: rgba(182, 45, 205, 0.5);
    --badge-border-dim: rgba(182, 45, 205, 0.15);
}

/* Sync (Синхронизация) — зелёный */
.glass-badge--sync {
    background: rgba(76, 175, 80, 0.15);
    color: var(--color-sync);
    --badge-border-bright: rgba(76, 175, 80, 0.5);
    --badge-border-dim: rgba(76, 175, 80, 0.15);
}

/* Delete (Удаление) — красный */
.glass-badge--delete {
    background: rgba(244, 67, 54, 0.15);
    color: var(--color-delete);
    --badge-border-bright: rgba(244, 67, 54, 0.5);
    --badge-border-dim: rgba(244, 67, 54, 0.15);
}

/* Warning — оранжевый */
.glass-badge--warning {
    background: rgba(255, 152, 0, 0.15);
    color: var(--color-warning);
    --badge-border-bright: rgba(255, 152, 0, 0.5);
    --badge-border-dim: rgba(255, 152, 0, 0.15);
}

/* Limit (Лимит) — оранжевый */
.glass-badge--limit {
    background: rgba(253, 216, 53, 0.12);
    color: var(--color-limit);
    --badge-border-bright: rgba(253, 216, 53, 0.45);
    --badge-border-dim: rgba(253, 216, 53, 0.12);
}

/* Banned (Забанен) — красный */
.glass-badge--banned {
    background: rgba(244, 67, 54, 0.15);
    color: var(--color-error);
    --badge-border-bright: rgba(244, 67, 54, 0.5);
    --badge-border-dim: rgba(244, 67, 54, 0.15);
}

/* Error (Ошибка) — красный */
.glass-badge--error {
    background: rgba(244, 67, 54, 0.15);
    color: var(--color-error);
    --badge-border-bright: rgba(244, 67, 54, 0.5);
    --badge-border-dim: rgba(244, 67, 54, 0.15);
}

.glass-badge--broadcast {
    background: rgba(0, 188, 212, 0.15);
    color: var(--color-broadcast);
    --badge-border-bright: rgba(0, 188, 212, 0.5);
    --badge-border-dim: rgba(0, 188, 212, 0.15);
}

/* Reconnecting (Подключение) — как idle, но с жёлтой точкой и мигание */
.glass-badge--reconnecting {
    background: var(--glass-bg);
    color: rgba(255, 255, 255, 0.7);
    --badge-border-bright: var(--glass-border-bright);
    --badge-border-dim: var(--glass-border-dim);
    animation: badge-pulse 1.5s ease-in-out infinite;
}

.glass-badge--reconnecting .badge-dot {
    background-color: #fbbf24;
}

@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.list-item-right {
    display: flex;
    align-items: center;
    gap: 24px;
    /* margin-left: auto убран — grid контролирует позиционирование */
}

.subscriber-count {
    white-space: nowrap;
    font-size: 13px;
    color: var(--text-primary);
}

.subscriber-count.clickable {
    cursor: pointer;
    transition: color 0.2s;
}
.subscriber-count.clickable:hover {
    color: var(--accent);
}

.list-item-actions {
    display: flex;
    gap: 8px;
}

.list-item-actions .btn {
    padding: 6px 12px;
    font-size: 12px;
}

.list-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
    /* margin-right убран — grid контролирует позиционирование */
}

.list-item-meta-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.4;
}

.meta-date    { color: var(--text-secondary); font-size: 13px; }
.meta-account { color: var(--text-muted); font-size: 13px; }

/* ============ LIST-ITEM: МОДИФИКАТОРЫ LAYOUT (Grid) ============ */

/**
 * --account: Аккаунт
 * Колонки: left (number+content) | center (progress+logs) | right (badge+actions)
 * Центрирование по модели истории: 1fr auto 1fr
 */
.list-item--account {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.list-item--account .list-item-left {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
}

.list-item--account .list-item-center {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-self: start;
}

.list-item--account .list-item-right {
    grid-column: 3;
    justify-self: end;
}

/**
 * --bot и --bot-compact: 4-колоночная адаптивная структура (fr-based)
 * left(3fr) | comment(1fr) | center(1fr) | right(2fr)
 * Все колонки пропорциональны экрану — ничего не привязано к пикселям.
 */
.list-item--bot,
.list-item--bot-compact {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    align-items: center;
    gap: 16px;
}

.list-item--bot .list-item-left,
.list-item--bot-compact .list-item-left {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
}

.list-item--bot .bot-comment,
.list-item--bot-compact .bot-comment {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.list-item--bot .list-item-center,
.list-item--bot-compact .list-item-center {
    grid-column: 3;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-self: center;
}

.list-item--bot .list-item-right,
.list-item--bot-compact .list-item-right {
    grid-column: 4;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Комментарий: кнопка-иконка (наследует .btn-bot-action, стиль как btn-sync) */
.btn-comment {
    color: var(--accent);
}
.btn-comment:hover {
    background-color: rgba(51, 144, 236, 0.1);
    color: var(--accent);
}

/* Комментарий: текст (max 2 строки) */
.bot-comment-text {
    font-size: 13px;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s;
}
.bot-comment-text:hover {
    color: var(--text-primary);
}

/**
 * --history: Страница истории
 * 4 колонки: content (фикс.) | details (опц.) | info | badge
 * Каждый элемент на explicit grid-column — details может отсутствовать,
 * info и badge не смещаются.
 */
.list-item--history {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    align-items: center;
    gap: 16px;
}

.list-item--history .list-item-content { grid-column: 1; }
.list-item--history .history-details   { grid-column: 2; }
.list-item--history .list-item-info    { grid-column: 3; }
.list-item--history .glass-badge       { grid-column: 4; justify-self: end; }

.history-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
}

.history-details .details-primary   { color: var(--text-secondary); }
.history-details .details-secondary { color: var(--text-muted); }

.list-item-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    gap: 2px;
}

.list-item-date {
    color: var(--text-secondary);
    font-size: 13px;
    white-space: nowrap;
}

.list-item-account {
    color: var(--text-muted);
    font-size: 13px;
}

/**
 * --create: Страница создания (выбор аккаунтов)
 * Колонки: number | content | right
 */
.list-item--create {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 16px;
}

/* ============ Глобальные стили полей ввода ============ */
input[type="text"],
input[type="number"],
input[type="password"],
textarea {
    width: 100%;
    padding: 12px 15px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
}

textarea {
    height: 120px;
    padding: 20px;
    resize: none;
    overflow-y: auto;
}

/* Убираем стрелочки у числовых полей */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* ============ Формы ============ */
.form-section {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}

.form-section h3,
.create-form > h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-top: 10px;
}

.section-header .section-title {
    margin: 0;
}

.create-form > h1,
.section-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: 10px;
    color: var(--text-primary);
}

.create-form h3 {
    font-size: 18px;
    font-weight: 600;
}

.create-col > h3 {
    margin-bottom: 15px;
}

.form-row {
    margin-bottom: 20px;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-row-inline {
    display: flex;
    gap: 20px;
}

.form-row-inline .form-row {
    flex: 1;
    margin-bottom: 0;
}

.form-row > label {
    display: block;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.form-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.form-row-header > label {
    font-size: 14px;
    color: var(--text-secondary);
}

.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="password"],
.form-row textarea {
    width: 100%;
    padding: 12px 15px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s;
}

.form-row input:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.form-row textarea {
    height: 120px;
}

.form-row .file-drop-zone {
    height: 120px;
}

.form-row small {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.form-actions {
    margin-top: 20px;
}

/* ============ Чекбоксы ============ */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

/* Переключатель режима на массовом создании */
.create-mode-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.create-mode-switch h3 {
    margin-bottom: 0;
}

.create-mode-switch-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.create-accounts-wrapper {
    margin-bottom: 20px;
}

/* Двухколоночные ряды формы */
.create-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.create-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.create-col textarea {
    height: 265px;
}

.create-col > textarea {
    padding: 20px var(--gutter-width);
}

/* Textarea с нумерацией строк */
.textarea-numbered {
    position: relative;
    display: flex;
    height: 265px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s;
    background: linear-gradient(to right, 
        var(--bg-tertiary) var(--gutter-width), 
        transparent var(--gutter-width),
        transparent calc(100% - var(--gutter-width)),
        var(--bg-tertiary) calc(100% - var(--gutter-width))
    );
}

.textarea-numbered:focus-within {
    border-color: var(--accent);
}

.textarea-numbered textarea {
    border: none;
    border-radius: 0;
    height: 100%;
    padding: 20px 0;
    line-height: 20px;
    font-size: 14px;
}

.textarea-numbered textarea:focus {
    border-color: transparent;
}

.textarea-gutter {
    flex-shrink: 0;
    width: var(--gutter-width);
    padding: 20px 0;
    user-select: none;
    pointer-events: none;
}

.textarea-gutter span {
    display: block;
    text-align: center;
    font-size: 14px;
    font-family: inherit;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.25);
    min-height: 20px;
}

.textarea-limit-gutter {
    flex-shrink: 0;
    width: var(--gutter-width);
    padding: 20px 0;
    user-select: none;
    pointer-events: none;
}

.textarea-limit-gutter span {
    display: block;
    text-align: center;
    font-size: 14px;
    font-family: inherit;
    line-height: 20px;
    color: var(--error);
    min-height: 20px;
}

.create-col .form-row {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.create-col .file-drop-zone {
    flex: 1;
}

.mode-btn {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: background 0.2s, border-color 0.2s;
}

.mode-btn:hover {
    background: var(--border);
}

.mode-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Список аккаунтов на массовом создании — скругления на карточках */
#create-accounts-list {
    overflow: visible;
}

#create-accounts-list .list-item {
    border-radius: 0;
    border: 1px solid transparent;
    border-bottom-color: var(--border);
    margin-top: -1px;
}

#create-accounts-list .list-item:first-child {
    border-radius: 12px 12px 0 0;
    margin-top: 0;
}

#create-accounts-list .list-item:last-child {
    border-radius: 0 0 12px 12px;
    border-bottom-color: transparent;
}

#create-accounts-list .list-item:only-child {
    border-radius: 12px;
}

/* Неполная страница — last-child с border-bottom */
#create-accounts-list.has-gap .list-item:last-child {
    border-bottom-color: var(--border);
}

#create-accounts-list.has-gap .list-item.create-selected:last-child {
    border-bottom-color: rgba(51, 144, 236, 1);
}

/* Выделение аккаунта — синяя обводка */
#create-accounts-list .list-item.create-selected {
    border-color: rgba(51, 144, 236, 1);
    z-index: 1;
    position: relative;
}

/* Выделение ID текста */
.list-item.create-selected .list-item-id {
    color: var(--color-create);
}

.list-item.create-selected .list-item-title {
    color: var(--color-create);
}

/* Занятый аккаунт на массовом создании */
.list-item.create-busy {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Click feedback при выборе аккаунта */
#create-accounts-list .list-item:not(.create-busy):active {
    background-color: var(--bg-card);
}

/* ============ Режим выбора ботов (массовое удаление) ============ */

/* Контейнер: overflow visible чтобы обводка не обрезалась */
.list.selection-mode {
    overflow: visible;
}

/* Все 4 бордера прозрачные, с перекрытием (аналог #create-accounts-list) */
.list.selection-mode .list-item {
    border: 1px solid transparent;
    border-bottom-color: var(--border);
    margin-top: -1px;
}

.list.selection-mode .list-item:first-child {
    border-radius: 12px 12px 0 0;
    margin-top: 0;
}

.list.selection-mode .list-item:last-child {
    border-radius: 0 0 12px 12px;
    border-bottom-color: transparent;
}

.list.selection-mode .list-item:only-child {
    border-radius: 12px;
}

/* Выбранный бот — синяя обводка на всех 4 сторонах */
.list.selection-mode .list-item.delete-selected {
    border-color: rgba(51, 144, 236, 1);
    z-index: 1;
    position: relative;
}

/* Выделение ID текста */
.list-item.delete-selected .list-item-id {
    color: var(--color-create);
}

.list-item.delete-selected .list-item-title {
    color: var(--color-create);
}

/* Мгновенная смена цвета при выделении (без transition от .copy-text) */
.list-item.delete-selected .copy-text,
.list-item.create-selected .copy-text {
    transition: none;
}

/* Username серым при выделении */
.list-item.delete-selected .copy-link {
    color: var(--text-secondary);
}

/* В режиме выбора: кнопки недоступны (но остаются в grid) */
.list.selection-mode .list-item-actions {
    pointer-events: none;
}

/* В режиме выбора: курсор pointer для доступных строк */
.list.selection-mode .list-item:not(.disabled) {
    cursor: pointer;
}

/* Click feedback в режиме выбора */
.list.selection-mode .list-item:not(.disabled):active {
    background-color: var(--bg-card);
}

.create-accounts-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 12px;
}

.create-accounts-pagination .page-btn {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: background 0.2s, border-color 0.2s;
}

.create-accounts-pagination .page-btn:hover {
    background: var(--border);
}

.create-accounts-pagination .page-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.create-accounts-pagination .page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ============ Табы ============ */
.input-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.input-tabs h3 {
    margin-bottom: 0;
}

.input-tabs-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.tab-btn {
    padding: 8px 16px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

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

.tab-btn.active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: white;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ============ Генератор ============ */
.generator-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.gen-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.gen-row > label:first-child {
    min-width: 150px;
    font-size: 14px;
}

.gen-row input[type="number"],
.gen-row input[type="text"] {
    padding: 8px 12px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    flex: 1;
    min-width: 0;
}

/* Toggle в gen-row не растягивается */
.gen-row .toggle-switch {
    flex: 0 0 auto;
}

/* ============ Сворачиваемые блоки ============ */
.collapsible .collapsible-content {
    display: none;
}

.collapsible.open .collapsible-content {
    display: block;
}

.collapsible-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0 !important;
}

.collapsible.open .collapsible-header {
    margin-bottom: 20px !important;
}

.collapse-icon {
    font-size: 12px;
    transition: transform 0.2s;
}

.collapsible.open .collapse-icon {
    transform: rotate(180deg);
}

/* ============ Загрузка файлов ============ */
.file-drop-zone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 15px 0;
    color: var(--text-muted);
    transition: all 0.2s;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    height: 95px;
}

.drop-zone-title {
    font-weight: 500;
    color: var(--text-secondary);
    flex: 0 0 40%;
    text-align: center;
}

.drop-zone-hint {
    font-size: 13px;
    color: var(--text-muted);
    flex: 0 0 60%;
    text-align: center;
}

.file-drop-zone:hover,
.file-drop-zone.dragover {
    border-color: var(--accent);
    background-color: var(--bg-hover);
}

.file-drop-zone input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.settings-form .file-drop-zone {
    height: 120px;
}

.file-preview {
    position: relative;
    z-index: 2;
    flex: 0 0 60%;
    display: flex;
    justify-content: center;
}

.file-preview:empty {
    display: none;
}

.file-preview img,
.file-preview video {
    max-width: 80px;
    max-height: 80px;
    border-radius: 8px;
    display: block;
}

.preview-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.preview-hint {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    text-align: center;
}

.preview-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--error);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    padding: 0;
    z-index: 3;
}

.preview-remove:hover {
    background-color: #d32f2f;
}

/* ============ Модалки ============ */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: var(--bg-card);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.modal-scroll {
    overflow-y: auto;
    max-height: inherit;
}

.modal-scroll::-webkit-scrollbar {
    width: 6px;
}

.modal-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.modal-scroll::-webkit-scrollbar-thumb {
    background-color: #303030;
    border-radius: 3px;
}

/* Firefox */
@supports not selector(::-webkit-scrollbar) {
    .modal-scroll {
        scrollbar-width: thin;
        scrollbar-color: #303030 transparent;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid var(--border);
}

.modal-header h2,
.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.modal-header h2 svg,
.modal-header h3 svg {
    margin-right: 8px;
    flex-shrink: 0;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 25px;
    color: var(--text-secondary);
}

.modal-footer {
    padding: 20px 25px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Модификаторы модалок */
.modal-content--narrow {
    max-width: 420px;
}

.modal-content--small {
    max-width: 420px;
}

/* Модалка комментария к боту (наследует глобальный textarea) */
.bot-comment-textarea {
    height: 100px;
    padding: 12px;
    resize: none;
}
.comment-counter {
    text-align: right;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Radio buttons в модалке удаления */
.delete-mode-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.radio-option:hover {
    background-color: var(--bg-hover);
}

/* Выбранный вариант — подсветка фоном */
.radio-option:has(input:checked) {
    background-color: rgba(51, 144, 236, 0.1);
}

/* Скрываем нативный radio */
.radio-option input[type="radio"] {
    display: none;
}

/* Кастомный кружок */
.radio-option .radio-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s;
}

/* Точка внутри */
.radio-option .radio-circle::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    transform: scale(0);
    transition: transform 0.2s ease;
}

/* Активное состояние */
.radio-option:has(input:checked) .radio-circle {
    border-color: var(--accent);
}

.radio-option:has(input:checked) .radio-circle::after {
    transform: scale(1);
}

/* Модалка подписчиков (Premium / Обычные) */
.subscribers-info-banner {
    background-color: var(--bg-tertiary);
    border-left: 4px solid var(--accent);
    padding: 12px 15px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 12px;
}
.subscribers-info-banner:last-of-type {
    margin-bottom: 20px;
}
.subscribers-info-banner p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.subscribers-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.subscribers-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}
.subscribers-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-primary);
}
.subscribers-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-footer--single {
    flex-direction: column;
    align-items: stretch;
}

.btn-block {
    width: 100%;
}

/* ============ Toggle Switch (тумблер) ============ */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    min-width: 40px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 24px;
    transition: background-color 0.2s, border-color 0.2s;
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-secondary);
    border-radius: 50%;
    transition: transform 0.2s, background-color 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: rgba(76, 175, 80, 0.2);
    border-color: var(--success);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
    background-color: var(--success);
}

/* Синий вариант тогла */
.toggle-switch--accent input:checked + .toggle-slider {
    background-color: rgba(51, 144, 236, 0.2);
    border-color: var(--accent);
}

.toggle-switch--accent input:checked + .toggle-slider::before {
    background-color: var(--accent);
}

/* Метка «Дефолт» с тоглом в form-row-header */
.default-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    font-size: 14px;
    color: var(--text-secondary);
}

/* ============ Инфо-блоки ============ */
.info-block {
    background-color: var(--bg-tertiary);
    border-left: 4px solid var(--accent);
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 20px;
}

.info-block p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

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

.info-block-small {
    padding: 12px 15px;
    margin-bottom: 15px;
}

.info-block-small p {
    font-size: 13px;
}

/* ============ Ошибки ============ */
.add-error {
    color: var(--error);
    font-size: 14px;
    margin-top: 15px;
    padding: 10px;
    background-color: rgba(244, 67, 54, 0.1);
    border-radius: 6px;
    display: none;
}

.add-error:not(:empty) {
    display: block;
}

#modal-add-account .modal-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#modal-add-account .modal-body .info-block,
#modal-add-account .modal-body .form-row,
#modal-add-account .modal-body .add-error {
    margin: 0;
}


/* ============ Прогресс аккаунтов ============ */
.progress-accounts {
    margin-top: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.account-progress-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.account-progress-item:last-child {
    border-bottom: none;
}

.account-progress-icon {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.account-progress-icon .spinner-ring,
.account-progress-icon .static-ring {
    width: 36px;
    height: 36px;
    color: var(--accent);
}

.account-progress-icon.spinning .spinner-ring {
    animation: spin 1s linear infinite;
}

.account-progress-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
}

.account-progress-info {
    flex: 1;
    min-width: 0;
}

.account-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.account-progress-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.account-progress-logs {
    margin-top: 4px;
}

.account-progress-title {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-progress-action {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-progress-success {
    font-size: 11px;
    color: var(--success);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============ Кнопки управления прогрессом ============ */
.progress-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.progress-actions .btn {
    flex: 1;
    justify-content: center;
    padding: 8px 12px;
    font-size: 12px;
}

.spinner-webhook {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Wi-Fi анимация пинга */
@keyframes wifi-pulse {
    0%, 100% { stroke: currentColor; }
    50% { stroke: #4ade80; }
}

.pinging .wifi-icon { animation: wifi-pulse 1s infinite; }

/* Общие стили action-кнопок (боты + аккаунты) */
.btn-bot-action,
.btn-account-action {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 6px;
    transition: all 0.15s ease;
    color: var(--text-secondary);
}

.btn-bot-action:disabled,
.btn-account-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-bot-action svg,
.btn-account-action svg {
    display: block;
}

/* Sync */
.btn-sync:hover {
    background-color: rgba(51, 144, 236, 0.1);
    color: var(--accent);
}

/* Ping */
.btn-ping:hover {
    background-color: rgba(76, 175, 80, 0.1);
    color: var(--success);
}

/* Delete */
.btn-delete:hover {
    background-color: rgba(244, 67, 54, 0.1);
    color: var(--error);
}

/* Broadcast */
.btn-broadcast:hover {
    background-color: rgba(0, 188, 212, 0.1);
    color: var(--color-broadcast);
}

/* Webhook toggle */
.btn-webhook {
    color: var(--error);
}

.btn-webhook:hover {
    background-color: rgba(244, 67, 54, 0.1);
}

.btn-webhook.webhook-on {
    color: var(--success);
}

.btn-webhook.webhook-on:hover {
    background-color: rgba(76, 175, 80, 0.1);
}

/* ============ Информация об аккаунте ============ */
.account-info-card {
    padding: 20px;
    margin-bottom: 25px;
}

.account-info-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    width: 100%;
}

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

/**
 * Главная строка карточки аккаунта (с прогрессом)
 * Grid: left | center | right — центрирование как в списке аккаунтов
 */
.account-info-row--main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.account-info-left {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 15px;
}

.account-info-center {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-self: center;
}

.account-info-row--main .account-card-right {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
}

.account-info-center .progress-block {
    margin-left: 0;
}


.account-info-label {
    font-size: 14px;
    color: var(--text-secondary);
    min-width: 80px;
}

.account-info-value {
    font-size: 15px;
    font-weight: 500;
}

/* Кликабельное название в карточке аккаунта */
.account-info-value[data-action="edit-name"] {
    cursor: pointer;
    transition: color 0.2s;
}

.account-info-value[data-action="edit-name"]:hover {
    color: var(--accent);
}

.account-card-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.account-card-actions {
    display: flex;
    gap: 8px;
}

.proxy-input-row {
    display: flex;
    gap: 10px;
    flex: 1;
}

.proxy-input-row input {
    flex: 1;
    padding: 8px 12px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
}

/* ============ Settings Form ============ */
.settings-form {
    max-width: 600px;
}

/* ============ Модалка результатов ============ */
.modal-result-content {
    max-width: 400px;
}

#result-body {
    font-size: 14px;
    line-height: 1.8;
}

#result-body p {
    margin-bottom: 8px;
}

#result-body p:last-child {
    margin-bottom: 0;
}

#result-body strong {
    color: var(--accent);
}

#result-body .result-success {
    color: var(--success);
}

#result-body .result-error {
    color: var(--error);
}

#result-body .result-errors {
    margin-top: 15px;
    padding: 12px;
    background-color: rgba(244, 67, 54, 0.1);
    border-radius: 8px;
    font-size: 13px;
}

#result-body .result-errors p {
    color: var(--error);
    margin-bottom: 4px;
}

/* ============ Кнопка генерации ============ */
.btn-generate {
    width: auto !important;
    margin-bottom: 15px;
}

/* ============ История прогресса (для edit) ============ */
.progress-history {
    margin-top: 10px;
    max-height: 80px;
    overflow: hidden;
}

.progress-history-item {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-history-item:first-child {
    color: var(--text-primary);
    font-weight: 500;
}

/* ============ Адаптивность ============ */
@media (max-width: 1024px) {
    .navbar {
        width: 70px;
    }
    
    .navbar-logo {
        padding: 15px 20px 30px;
    }
    
    .logo-full {
        display: none;
    }
    
    .logo-compact {
        display: block;
    }
    
    .nav-text {
        display: none;
    }
    
    .nav-item {
        justify-content: center;
        padding: 15px;
    }
    
    .nav-icon {
        margin-right: 0;
    }
    
    .content {
        margin-left: 70px;
    }
}

@media (max-width: 768px) {
    .stats-cards {
        flex-direction: column;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header-actions {
        width: 100%;
    }
    
    /* Grid сам адаптируется, убран устаревший flex-wrap */
    
    .list-item-actions {
        width: 100%;
        margin-top: 10px;
        margin-left: 0;
    }
    
}


/* ============ ПРОГРЕСС (УНИВЕРСАЛЬНЫЙ БЛОК) ============ */

.progress-block {
    display: flex;
    align-items: center;
    gap: 20px;
}

.progress-circle {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.progress-circle svg {
    width: 32px;
    height: 32px;
    transform-origin: center;
}

.progress-circle .circle-ring {
    fill: none;
    stroke: var(--op-color, var(--accent));
    stroke-width: 2;
}

/* Модификаторы цветов операций */
.progress-circle--create { --op-color: var(--color-create); }
.progress-circle--sync { --op-color: var(--color-sync); }
.progress-circle--edit { --op-color: var(--color-edit); }
.progress-circle--delete { --op-color: var(--color-delete); }
.progress-circle--broadcast { --op-color: var(--color-broadcast); }

.progress-circle.spinning svg {
    animation: spin 1s linear infinite;
    will-change: transform;
}

.progress-circle.spinning .circle-ring {
    stroke-dasharray: 80 20;
}

.progress-circle.deleted .circle-ring {
    stroke: var(--color-delete);
}

.progress-circle.failed .circle-ring {
    stroke: #000;
}

.progress-circle-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
}

.progress-circle.deleted .progress-circle-count {
    color: var(--color-delete);
}

.progress-circle.failed .progress-circle-count {
    color: #000;
}

/* Группа: кружок + подпись типа операции */
.type-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Заголовок типа операции (рядом с кружком) */
.type-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Вертикальная обёртка: заголовок + прогресс для активного типа */
.type-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/* Подзаголовок прогресса (текущее действие) */
.type-subtitle {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============ РЕДАКТИРОВАНИЕ АККАУНТА ============ */

.edit-account-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.edit-account-number {
    position: relative;
    width: 100px;
    height: 100px;
    min-width: 100px;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
}

.edit-account-number::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 1px;
    background: linear-gradient(
        140deg,
        var(--glass-border-bright) 0%,
        var(--glass-border-dim) 33%,
        var(--glass-border-dim) 66%,
        var(--glass-border-bright) 99%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.edit-account-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.edit-account-label {
    font-size: 13px;
    color: var(--accent);
    margin-bottom: 4px;
}

.edit-account-name-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
    font-size: 16px;
    color: var(--text-primary);
    outline: none;
    width: 100%;
}

.edit-account-name-input:focus {
    border-bottom-color: var(--accent);
}

/* ============ РЕДАКТИРОВАНИЕ БОТА (Telegram-style) ============ */

.edit-bot-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.edit-bot-avatar {
    width: 100px;
    height: 100px;
    min-width: 100px;
    border-radius: 50%;
    background-color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.2s;
}

.edit-bot-avatar:hover {
    opacity: 0.85;
}

.edit-bot-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edit-bot-avatar .avatar-camera-icon {
    width: 42px;
    height: 42px;
    color: white;
}

.edit-bot-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.edit-bot-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.edit-bot-label {
    font-size: 13px;
    color: var(--accent);
}

.edit-bot-name-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
    font-size: 16px;
    color: var(--text-primary);
    outline: none;
    width: 100%;
}

.edit-bot-name-input:focus {
    border-bottom-color: var(--accent);
}

.edit-bot-username {
    font-size: 14px;
    margin-top: 8px;
}

/* ============ ТУЛТИП КОПИРОВАНИЯ ============ */

/* Универсальный тултип */
.app-tooltip {
    position: fixed;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s;
}

.app-tooltip.success {
    background-color: var(--success);
}

.app-tooltip.error {
    background-color: var(--error);
}

.app-tooltip.show {
    opacity: 1;
}

/* Кликабельные элементы для копирования */
/* Копируемый текст — белый, голубой при hover */
.copy-text {
    cursor: pointer;
    transition: color 0.15s;
}

.copy-text:hover {
    color: var(--accent);
}

.list-item--history .copy-text:hover {
    color: var(--link-color);
}

/* Копируемая ссылка — голубой всегда, opacity при hover */
.copy-link {
    cursor: pointer;
    color: var(--accent);
    transition: opacity 0.15s;
}

.copy-link:hover {
    opacity: 0.8;
}

/* Модификаторы цветов для истории */
.history-item--created { --link-color: var(--color-create); }
.history-item--synced { --link-color: var(--color-sync); }
.history-item--edited { --link-color: var(--color-edit); }
.history-item--deleted { --link-color: var(--color-delete); }
.history-item--broadcast { --link-color: var(--color-broadcast); }
.history-item--limit { --link-color: var(--color-limit); }
.history-item--error { --link-color: var(--color-error); }
.history-item--create_failed,
.history-item--edit_failed,
.history-item--delete_failed,
.history-item--sync_failed { --link-color: var(--color-warning); }

.list-item--history .copy-link {
    color: var(--link-color);
}

/* Кликабельные записи истории (с details) */
.history-item--clickable {
    cursor: pointer;
    transition: background 0.15s;
}
.history-item--clickable:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Иконка ⚠️ для записей с warnings */
.history-warning-icon {
    color: var(--color-warning);
    font-size: 14px;
    margin-left: 6px;
    cursor: pointer;
}

/* Модалка деталей истории */
.history-modal-bot {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.history-modal-warnings {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}
.history-modal-warning-item {
    padding: 6px 10px;
    margin-bottom: 4px;
    background: rgba(255, 152, 0, 0.1);
    border-left: 3px solid var(--color-warning);
    border-radius: 4px;
    font-size: 13px;
}
.history-modal-error {
    padding: 10px 12px;
    margin-bottom: 12px;
    background: rgba(244, 67, 54, 0.1);
    border-left: 3px solid var(--color-error);
    border-radius: 4px;
    font-size: 13px;
}
.history-modal-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* Заблокированные строки (когда аккаунт занят) */
.list-item.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* ============ МОДАЛКА ШРИФТОВ ============ */

.modal-content--wide {
    max-width: 650px;
}

/* Input для текста */
.font-input-wrapper {
    margin-bottom: 20px;
}

.font-input-wrapper input {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
}

.font-input-wrapper input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Сетка смайликов */
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.emoji-btn {
    padding: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-btn img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.emoji-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

/* Список шрифтов */
.font-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.font-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.font-item:hover {
    background: var(--bg-hover);
}

/* Выделенный шрифт — стиль как у аккаунтов */
.font-item.selected {
    border-color: rgba(51, 144, 236, 0.5);
    background: rgba(51, 144, 236, 0.1);
}

.font-item__preview {
    font-size: 15px;
    color: var(--text-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 16px;
}

.font-item__name {
    font-size: 13px;
    white-space: nowrap;
}

/* ============ УТИЛИТАРНЫЕ КЛАССЫ ТЕКСТА ============ */
.text-error {
    color: var(--error);
}

.text-warning {
    color: #f0a020;
}

/* ============ SWEEP-GLOW АНИМАЦИЯ ДЛЯ STAT-CARD ============ */
@property --sweep-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes sweep-border {
    0%   { --sweep-angle: 0deg; opacity: 1; }
    80%  { --sweep-angle: 720deg; opacity: 1; }
    100% { --sweep-angle: 720deg; opacity: 0; }
}

@keyframes sweep-glow {
    0%   { box-shadow: var(--shadow), 0 0 0 0 rgba(51, 144, 236, 0); }
    10%  { box-shadow: var(--shadow), 0 0 20px 5px rgba(51, 144, 236, 0.4); }
    70%  { box-shadow: var(--shadow), 0 0 12px 3px rgba(51, 144, 236, 0.2); }
    100% { box-shadow: var(--shadow), 0 0 0 0 rgba(51, 144, 236, 0); }
}

.stat-card.highlight-sweep {
    animation: sweep-glow 2.2s ease-in-out;
}

.stat-card.highlight-sweep::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1.5px;
    background: conic-gradient(
        from var(--sweep-angle),
        transparent 0%,
        transparent 60%,
        rgba(51, 144, 236, 0.9) 78%,
        #3390ec 85%,
        rgba(51, 144, 236, 0.9) 92%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: sweep-border 2.2s ease-in-out forwards;
}

/* ============ Segmented Tabs ============ */
.segmented-tabs {
    display: flex;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 20px;
}

.segmented-tabs .mode-btn {
    flex: 1;
    border-radius: 0;
    text-align: center;
}

.segmented-tabs .mode-btn + .mode-btn {
    margin-left: -1px;
}

.form-row .segmented-tabs {
    margin-bottom: 0;
}

/* ============ Login ============ */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--bg-primary);
}

.login-content {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 35px;
    width: 100%;
    max-width: 450px;
    margin: 20px;
    box-shadow: var(--shadow);
}

.login-logo {
    text-align: center;
    margin-bottom: 12px;
}

.login-description {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 24px 0;
    line-height: 1.4;
}

.login-logo img {
    width: 220px;
    height: auto;
}

.login-actions {
    margin-top: 25px;
    margin-bottom: 10px;
}

.login-actions .btn {
    width: 100%;
    justify-content: center;
}

.invite-field {
    display: none;
}

.invite-field.visible {
    display: block;
}

/* ============ MASS EDIT ============ */

.btn-mass-edit {
    white-space: nowrap;
    background-color: var(--color-edit);
    color: #fff;
}

.btn-mass-edit:hover {
    background-color: #9224a4;
}

.btn-mass-broadcast {
    white-space: nowrap;
    background-color: var(--color-broadcast);
    color: #fff;
}

.btn-mass-broadcast:hover {
    background-color: #0097a7;
}

/* ============ MASS ACTIONS DROPDOWN ============ */

.mass-actions-wrapper {
    position: relative;
}

.btn-mass-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-mass-menu:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}


.mass-actions-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 100;
    overflow: hidden;
}

.mass-actions-dropdown.open {
    display: block;
}

.mass-actions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

.mass-actions-count {
    color: var(--text-primary);
}

.mass-actions-select-all {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.mass-actions-select-all:hover {
    color: var(--text-primary);
}

.mass-actions-list {
    padding: 4px 0;
}

.mass-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.1s ease;
    text-align: left;
}

.mass-action-item:hover:not(:disabled) {
    background: var(--bg-hover);
}

.mass-action-item:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    pointer-events: none;
}

.mass-action-item:disabled svg {
    color: var(--text-muted);
}

.mass-action-item svg {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.mass-action-item--danger {
    color: var(--error);
}

.mass-action-item--danger svg {
    color: var(--error);
}

/* ============ QUEUED BOT STATE ============ */

.list-item.queued {
    opacity: 0.5;
    cursor: not-allowed;
    position: relative;
}

.list-item.queued::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(255, 255, 255, 0.03) 8px,
        rgba(255, 255, 255, 0.03) 16px
    );
    border-radius: inherit;
    pointer-events: none;
}

/* Кнопки уже disabled через HTML-атрибут, opacity наследуется от .list-item.queued */
.list-item.queued .list-item-actions {
    pointer-events: none;
}

/* Selection mode edit button */
.list-item.edit-selected {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.3);
}

.list-item.edit-selected .list-item-id {
    color: #60a5fa;
}

/* ============ АКТИВНЫЕ СЕССИИ ============ */

.sessions-loading,
.sessions-empty,
.sessions-error {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.sessions-error {
    color: #ef4444;
}

.session-card {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.session-card:last-child {
    margin-bottom: 0;
}

.session-card--current {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.06);
}

.session-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.session-icon svg {
    width: 22px;
    height: 22px;
}

.session-info {
    min-width: 0;
    overflow: hidden;
}

.session-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.session-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.session-badge--current {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.session-badge--official {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.session-badge--unofficial {
    background: rgba(234, 179, 8, 0.12);
    color: #facc15;
    border: 1px solid rgba(234, 179, 8, 0.25);
}

.session-line {
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-line--device {
    font-weight: 600;
    margin-bottom: 2px;
}

.session-line--muted {
    color: var(--text-muted);
    font-size: 12px;
}

.session-actions {
    display: flex;
    align-items: flex-start;
}

.session-action {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.session-action:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.session-action:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ============ ПЕРЕЛОГИН ============ */

.relogin-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
}

.relogin-progress .spinner-webhook {
    color: #60a5fa;
    flex-shrink: 0;
}