/* ============================================================================
   Палитра — на основе фирменных цветов xmlriver.com (взяты из присланного
   логотипа): голубой #00A0E3 и тёмно-синий/фиолетовый #393185. Светлая тема,
   в духе самого сайта xmlriver.com (белый фон, карточки, аккуратные тени),
   а не тёмная, как было раньше.
   ============================================================================ */
:root {
    --bg: #f4f6fb;
    --panel: #ffffff;
    --panel-border: #e2e6f0;
    --text: #1c2333;
    --text-dim: #6b7280;
    --navy: #393185;
    --navy-dim: #524aa8;
    --accent: #00a0e3;
    --accent-dim: #0082ba;
    --success: #16a34a;
    --warning: #d97706;
    --error: #dc2626;
    --shadow: 0 1px 2px rgba(28, 35, 51, 0.04), 0 4px 14px rgba(28, 35, 51, 0.06);
    --radius: 10px;
    --mono: "JetBrains Mono", "Consolas", "SF Mono", monospace;
    --sans: "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background-color: var(--bg);
    /* Декоративная волна из фирменного стиля — теперь два экземпляра одной и той же
       картинки, закреплённые у левого и правого нижнего края окна (background-image/
       -position/-size — списки через запятую, каждое значение относится к своему слою
       по порядку). Не двигаются при скролле (background-attachment: fixed). Реальной
       прозрачности у присланного файла не было (это был JPEG без альфа-канала, с
       "нарисованной" шахматкой вместо неё) — bg-wave.png восстановлен из него отдельно,
       с настоящим альфа-каналом, поэтому корректно проступает через непрозрачные белые
       панели поверх, но виден в промежутках между ними и по краям страницы. */
    background-image: url('/img/bg-wave.png'), url('/img/bg-wave.png');
    background-repeat: no-repeat, no-repeat;
    background-position: left bottom, right bottom;
    background-size: 420px auto, 420px auto;
    background-attachment: fixed, fixed;
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    /* Закреплена сверху при прокрутке — position: sticky держит её в потоке документа,
       пока не дойдёт до верха, а дальше "прилипает" и остаётся видимой. background уже
       непрозрачный (var(--panel) — белый), поэтому контент под ней корректно скрывается,
       а не просвечивает через шапку во время скролла. */
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--panel);
    border-bottom: 1px solid var(--panel-border);
    padding: 20px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-header__brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.app-header__logo {
    height: 56px;
    width: auto;
    display: block;
}

.app-header__title {
    font-weight: 700;
    font-size: 17px;
    color: var(--navy);
}

.app-header__subtitle {
    font-size: 13px;
    color: var(--text-dim);
}

.app-header__right {
    display: flex;
    align-items: flex-end;
    gap: 14px;
}

.app-header__credentials {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 14px;
}

.app-header__credentials-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.app-header__credentials-label {
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
}

.app-header__credentials-input {
    width: 110px;
    height: 34px;
    padding: 0 9px;
    font-size: 13px;
}

.app-header__balance {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    font-size: 14px;
    padding: 0 14px;
    border-radius: 8px;
    background: #f0f7fc;
    border: 1px solid var(--panel-border);
    color: var(--navy);
}

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

.app-header__balance-muted {
    color: var(--text-dim);
}

.app-header__balance-refresh {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
}

.app-header__balance-refresh:hover {
    color: var(--accent);
    background: rgba(0, 160, 227, 0.1);
}

.app-main {
    flex: 1;
    padding: 28px 32px 48px;
}

.page-grid {
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: start;
}

@media (max-width: 980px) {
    .page-grid { grid-template-columns: 1fr; }
}

.panel {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
    margin-bottom: 20px;
}

.panel--log {
    /* top/height учитывают высоту шапки (~100px, теперь тоже липкая, см. .app-header) —
       иначе эта панель "прилипала" бы под шапкой и заезжала под неё при прокрутке. */
    height: calc(100vh - 230px);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 120px;
}

.panel__title {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--navy);
}

.field-group { margin-bottom: 16px; }

.field-group--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.field-group--split-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.field-label {
    display: block;
    font-size: 12.5px;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.field-hint {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
}

.field-hint--full {
    grid-column: 1 / -1;
}

.text-input, .select-input {
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--panel-border);
    color: var(--text);
    border-radius: 7px;
    padding: 9px 11px;
    font-size: 14px;
    font-family: var(--sans);
}

.text-input:focus, .select-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 160, 227, 0.15);
}

.text-input:disabled, .select-input:disabled {
    opacity: 0.55;
}

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

.radio-option {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    cursor: pointer;
}

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

.btn {
    border: 1px solid var(--panel-border);
    background: #ffffff;
    color: var(--text);
    padding: 10px 16px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.12s ease, background 0.12s ease;
}

.btn:hover:not(:disabled) { filter: brightness(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    font-weight: 700;
}

.btn--primary:hover:not(:disabled) { background: var(--accent-dim); filter: none; }

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

.btn--secondary { color: var(--navy); }

.alert {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 7px;
    font-size: 13.5px;
}

.alert--error { background: rgba(220, 38, 38, 0.08); color: var(--error); border: 1px solid rgba(220,38,38,0.25); }
.alert--success { background: rgba(22, 163, 74, 0.08); color: var(--success); border: 1px solid rgba(22,163,74,0.25); }

.progress-state {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--navy);
}

.progress-bar {
    height: 8px;
    border-radius: 4px;
    background: #eef1f7;
    overflow: hidden;
    margin-bottom: 16px;
}

.progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--navy), var(--accent));
    /* Раньше тут была transition: width 0.3s ease — из-за неё при возобновлении сбора
       (когда полоса должна резко "спрыгнуть" с процента старого прерванного запуска на 0%,
       а не плавно вырасти от нуля, как при обычном старте) полоса застревала где-то
       посередине анимации, пока быстро прилетающие новые обновления (несколько раз в секунду)
       не давали ей доиграть — текст рядом при этом уже показывал верные, текущие цифры,
       и было видно расхождение. Без анимации полоса всегда мгновенно совпадает с данными. */
}

.progress-stats {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.progress-stats__value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--mono);
    color: var(--navy);
}

.progress-stats__label {
    display: block;
    font-size: 12px;
    color: var(--text-dim);
}

.log-list {
    flex: 1;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 7px;
    border: 1px solid var(--panel-border);
    padding: 12px 14px;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.7;
}

.log-empty {
    color: var(--text-dim);
    font-family: var(--sans);
}

.log-line { white-space: pre-wrap; word-break: break-word; }
.log-line--info { color: var(--text); }
.log-line--success { color: var(--success); }
.log-line--warning { color: var(--warning); }
.log-line--error { color: var(--error); }

.tab-control__headers {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--panel-border);
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0 0 0;
}

.tab-control__header {
    background: transparent;
    border: none;
    color: var(--text-dim);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.tab-control__header:hover { color: var(--navy); }

.tab-control__header--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.progress-state__engine {
    margin-left: 8px;
    font-weight: 500;
    color: var(--text-dim);
    font-size: 13px;
}

.alert--info {
    background: rgba(0, 160, 227, 0.08);
    color: var(--accent-dim);
    border: 1px solid rgba(0, 160, 227, 0.3);
}