/* ============================================================
   «Отзывы» — стили прототипа
   ============================================================
   Блок ниже — будущие дизайн-токены проекта. При переносе в
   Symfony/Twig эти переменные становятся единым источником
   правды для цветов, типографики, отступов и радиусов.
   ============================================================ */

:root {
    /* --- Фоны и поверхности ------------------------------- */
    --color-bg: #f5f6f8;            /* общий фон страниц: почти белый, нейтральный */
    --color-surface: #ffffff;       /* карточки, таблицы, формы */
    --color-surface-dim: #eef0f3;   /* скелетоны, подложки прогресс-баров */
    --color-border: #e2e5ea;        /* обычные разделители */
    --color-border-strong: #c6ccd6; /* границы полей ввода и второстепенных кнопок */

    /* --- Текст --------------------------------------------- */
    --color-text: #20242d;           /* основной текст, контраст ~14:1 */
    --color-text-secondary: #5a6372; /* подписи и пояснения, контраст ~5.6:1 */
    --color-text-inverse: #ffffff;

    /* --- Акцент (единственный цвет действий) --------------- */
    --color-accent: #1d4ed8;        /* глубокий синий: кнопки, ссылки, активная вкладка */
    --color-accent-hover: #1741b3;
    --color-accent-bg: #e9effc;     /* светлая подложка: hover строк, активные состояния */

    /* --- Вердикт «Автоотклонение» (красный) ---------------- */
    --color-red-text: #b42318;
    --color-red-bg: #fdecea;
    --color-red-border: #f1c3bd;
    --color-red-dot: #d92d20;

    /* --- Вердикт «Требует внимания» (жёлтый) --------------- */
    --color-yellow-text: #8a5300;
    --color-yellow-bg: #fdf3d7;
    --color-yellow-border: #ecd9a0;
    --color-yellow-dot: #dc8a04;

    /* --- Вердикт «Можно публиковать» (зелёный) ------------- */
    --color-green-text: #166534;
    --color-green-bg: #e5f4ea;
    --color-green-border: #bfe3cb;
    --color-green-dot: #16a34a;

    /* --- Подсветка проблемных фрагментов в тексте ---------- */
    --color-hl-bad-bg: #ffdfdb;     /* мат, ссылки, e-mail */
    --color-hl-warn-bg: #ffefc0;    /* реклама, спорные фразы */

    /* --- Зоны шкалы «Вероятность ИИ» (приглушённые) -------- */
    --color-zone-green: #c8e7d2;
    --color-zone-yellow: #f6e3ad;
    --color-zone-red: #f3c7c2;

    /* --- Фокус ---------------------------------------------- */
    --color-focus: #1d4ed8;

    /* --- Типографика ---------------------------------------- */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "Roboto Mono", Consolas, "Liberation Mono", monospace;
    --text-base: 17px;              /* базовый размер: модератор читает весь день */
    --text-review: 18px;            /* текст отзыва чуть крупнее */
    --text-small: 15px;             /* пояснения в проверках, подписи */
    --text-xs: 13px;                /* подписи шкал, легенды */
    --leading-base: 1.5;
    --leading-review: 1.6;          /* межстрочный интервал в текстах отзывов */

    /* --- Отступы -------------------------------------------- */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-s: 12px;
    --space-m: 16px;
    --space-l: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* --- Радиусы -------------------------------------------- */
    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 14px;
    --radius-full: 999px;

    /* --- Тени ------------------------------------------------ */
    --shadow-card: 0 1px 2px rgba(22, 28, 40, 0.06), 0 1px 6px rgba(22, 28, 40, 0.05);
    --shadow-bar: 0 -2px 10px rgba(22, 28, 40, 0.08);

    /* --- Размеры --------------------------------------------- */
    --tap-min: 44px;                /* минимальная зона нажатия */
    --container-max: 1160px;
    --review-text-max: 72ch;        /* ~75 символов в строке текста отзыва */
}

/* ============================================================
   База
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-base);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
    margin: 0;
}

a {
    color: var(--color-accent);
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-s);
}

.icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-inline: var(--space-l);
}

/* ============================================================
   Шапка приложения
   ============================================================ */

.topbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.topbar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    min-height: 64px;
}

.topbar__logo {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
}

.topbar__nav {
    display: flex;
    gap: var(--space-xs);
}

.topbar__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 8px 16px;
    border-radius: var(--radius-m);
    color: var(--color-text-secondary);
    font-weight: 500;
    text-decoration: none;
}

.topbar__link:hover {
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

.topbar__link.is-active {
    color: var(--color-accent);
    font-weight: 600;
    background: var(--color-accent-bg);
}

.topbar__user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-s);
    color: var(--color-text-secondary);
}

/* ============================================================
   Заголовки страниц, основная область
   ============================================================ */

.page-main {
    padding-block: var(--space-xl) var(--space-2xl);
}

.page-head {
    display: flex;
    align-items: center;
    gap: var(--space-l);
    flex-wrap: wrap;
    margin-bottom: var(--space-l);
}

.page-head h1 {
    font-size: 28px;
    line-height: 1.25;
}

.page-head__actions {
    margin-left: auto;
}

.backlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--tap-min);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--text-small);
}

.backlink:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* ============================================================
   Кнопки
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--tap-min);
    padding: 10px 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-m);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

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

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

.btn--secondary {
    background: var(--color-surface);
    color: var(--color-accent);
    border-color: var(--color-border-strong);
}

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

.btn--big {
    font-size: 19px;
    padding: 14px 36px;
}

/* Кнопка-иконка (копирование ID и т.п.) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-min);
    height: var(--tap-min);
    padding: 0;
    border: none;
    border-radius: var(--radius-m);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

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

.icon-btn .icon {
    width: 19px;
    height: 19px;
}

/* ============================================================
   Бейджи вердиктов
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-size: var(--text-small);
    font-weight: 600;
    white-space: nowrap;
}

.badge .icon {
    width: 13px;
    height: 13px;
}

.badge--red {
    background: var(--color-red-bg);
    color: var(--color-red-text);
    border-color: var(--color-red-border);
}

.badge--yellow {
    background: var(--color-yellow-bg);
    color: var(--color-yellow-text);
    border-color: var(--color-yellow-border);
}

.badge--green {
    background: var(--color-green-bg);
    color: var(--color-green-text);
    border-color: var(--color-green-border);
}

/* Компактный вариант для таблицы: иконка + число */
.badge--mini {
    padding: 3px 10px;
    gap: 5px;
    font-size: var(--text-small);
}

/* Легенда вердиктов под таблицей */
.verdict-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m) var(--space-l);
    margin-top: var(--space-s);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.verdict-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.verdict-legend .icon {
    width: 12px;
    height: 12px;
}

.t-red {
    color: var(--color-red-text);
}

.t-yellow {
    color: var(--color-yellow-text);
}

.t-green {
    color: var(--color-green-text);
}

/* ============================================================
   Таблица загрузок
   ============================================================ */

.table-card {
    background: var(--color-surface);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

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

.uploads-table th {
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
}

.uploads-table td {
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.uploads-table tbody tr:last-child td {
    border-bottom: none;
}

.uploads-table tbody tr[data-href] {
    cursor: pointer;
}

.uploads-table tbody tr[data-href]:hover {
    background: var(--color-accent-bg);
}

.uploads-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.row-date {
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}

.row-date:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.row-source {
    color: var(--color-text-secondary);
}

.verdict-cells {
    display: flex;
    gap: 6px;
}

/* Статус обработки в таблице */
.status-ok {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-green-text);
    font-weight: 500;
    white-space: nowrap;
}

.status-progress {
    display: grid;
    gap: 6px;
    min-width: 150px;
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.review-progress {
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* ============================================================
   Прогресс-бары
   ============================================================ */

.progress {
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-surface-dim);
    overflow: hidden;
}

.progress--thick {
    height: 10px;
}

.progress__fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--color-accent);
}

/* ============================================================
   Экран загрузки: шапка, сводка, вкладки
   ============================================================ */

.batch-head {
    margin-bottom: var(--space-l);
}

.batch-head__sub {
    color: var(--color-text-secondary);
    margin-top: 4px;
}

.batch-summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-l);
    margin-top: var(--space-m);
    font-size: 20px;
    font-weight: 600;
}

.batch-summary span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.batch-summary .icon {
    width: 15px;
    height: 15px;
}

/* Панель вкладок и переключателя */
.feed-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-m);
    margin-bottom: var(--space-l);
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--tap-min);
    padding: 8px 18px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

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

.tab.is-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-inverse);
    font-weight: 600;
}

.tab .icon {
    width: 13px;
    height: 13px;
}

.tab__count {
    padding: 1px 9px;
    border-radius: var(--radius-full);
    background: var(--color-surface-dim);
    font-size: var(--text-small);
    font-weight: 600;
}

.tab.is-active .tab__count {
    background: rgba(255, 255, 255, 0.22);
}

/* Переключатель «Скрывать разобранные» */
.hide-done-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--tap-min);
    margin-left: auto;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.hide-done-toggle input {
    width: 22px;
    height: 22px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* Панель массовых действий (видна на вкладке «Автоотклонение») */
.bulk-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-m);
    padding: var(--space-m) var(--space-l);
    margin-bottom: var(--space-l);
    background: var(--color-red-bg);
    border: 1px solid var(--color-red-border);
    border-radius: var(--radius-l);
}

.bulk-panel[hidden] {
    display: none;
}

.bulk-panel__hint {
    color: var(--color-red-text);
    font-size: var(--text-small);
}

/* ============================================================
   Лента карточек
   ============================================================ */

.feed {
    display: grid;
    gap: var(--space-l);
    max-width: 960px;
}

/* Фильтрация по вердикту — JS лишь меняет data-filter */
.feed[data-filter="red"] .review-card:not([data-verdict="red"]),
.feed[data-filter="yellow"] .review-card:not([data-verdict="yellow"]),
.feed[data-filter="green"] .review-card:not([data-verdict="green"]) {
    display: none;
}

.feed.hide-done .review-card.is-done {
    display: none;
}

.feed-note {
    color: var(--color-text-secondary);
    font-size: var(--text-small);
}

/* ============================================================
   Карточка отзыва
   ============================================================ */

.review-card {
    background: var(--color-surface);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    border-left: 4px solid transparent;
    padding: var(--space-l);
}

.review-card[data-verdict="red"] {
    border-left-color: var(--color-red-dot);
}

.review-card[data-verdict="yellow"] {
    border-left-color: var(--color-yellow-dot);
}

.review-card[data-verdict="green"] {
    border-left-color: var(--color-green-dot);
}

/* Разобранная карточка гасится, но при наведении снова читаемая */
.review-card.is-done {
    opacity: 0.62;
}

.review-card.is-done:hover,
.review-card.is-done:focus-within {
    opacity: 1;
}

.review-card__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
}

.review-id {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.review-id__num {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
}

.review-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-m);
    color: var(--color-text-secondary);
    font-size: var(--text-small);
}

.meta-chip {
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--color-surface-dim);
    white-space: nowrap;
}

.review-card__text {
    max-width: var(--review-text-max);
    margin-top: var(--space-m);
    font-size: var(--text-review);
    line-height: var(--leading-review);
}

.review-card__text p + p {
    margin-top: var(--space-s);
}

/* Подсветка проблемных фрагментов: фон + пунктир, чтобы не только цветом */
mark.hl-bad,
mark.hl-warn {
    padding: 1px 3px;
    border-radius: 4px;
    color: inherit;
    cursor: help;
}

mark.hl-bad {
    background: var(--color-hl-bad-bg);
    border-bottom: 2px dotted var(--color-red-text);
}

mark.hl-warn {
    background: var(--color-hl-warn-bg);
    border-bottom: 2px dotted var(--color-yellow-text);
}

/* --- Блок «Проверки» --------------------------------------- */

.review-card__checks {
    margin-top: var(--space-l);
    padding-top: var(--space-m);
    border-top: 1px solid var(--color-border);
}

.checks-title {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-s);
}

.checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: var(--space-xs) var(--space-l);
}

.check {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: var(--text-small);
    min-height: 28px;
}

.check__dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    transform: translateY(1px);
}

.check--ok .check__dot {
    background: var(--color-green-dot);
}

.check--warn .check__dot {
    background: var(--color-yellow-dot);
}

.check--bad .check__dot {
    background: var(--color-red-dot);
}

.check__name {
    font-weight: 600;
    white-space: nowrap;
}

.check__note {
    color: var(--color-text-secondary);
}

.check--warn .check__note {
    color: var(--color-yellow-text);
    font-weight: 500;
}

.check--bad .check__note {
    color: var(--color-red-text);
    font-weight: 500;
}

/* Широкая строка для «Вероятность ИИ» со шкалой */
.check--wide {
    grid-column: 1 / -1;
    display: block;
    margin-top: var(--space-xs);
}

.check--wide .check__line {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

/* --- Шкала «Вероятность ИИ» -------------------------------- */

.ai-scale {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    max-width: 560px;
    margin-top: var(--space-xs);
}

.ai-scale__value {
    font-size: 22px;
    font-weight: 700;
    min-width: 64px;
    font-variant-numeric: tabular-nums;
}

.ai-scale__body {
    flex: 1;
}

.ai-scale__track {
    position: relative;
    height: 12px;
    border-radius: var(--radius-full);
    background: linear-gradient(
        to right,
        var(--color-zone-green) 0 50%,
        var(--color-zone-yellow) 50% 85%,
        var(--color-zone-red) 85% 100%
    );
}

.ai-scale__marker {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: var(--color-text);
    transform: translateX(-50%);
}

.ai-scale__labels {
    position: relative;
    height: 18px;
    margin-top: 4px;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.ai-scale__labels span {
    position: absolute;
    transform: translateX(-50%);
}

.ai-scale__labels span:first-child {
    transform: none;
}

.ai-scale__labels span:last-child {
    right: 0;
    transform: none;
}

/* --- Раскрывающийся блок «Почему» --------------------------- */

.ai-why {
    margin-top: var(--space-xs);
    max-width: 560px;
}

.ai-why summary {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--color-accent);
    font-size: var(--text-small);
    font-weight: 500;
    cursor: pointer;
}

.ai-why summary:hover {
    text-decoration: underline;
}

.ai-why ul {
    margin: var(--space-xs) 0 0;
    padding: var(--space-s) var(--space-m) var(--space-s) var(--space-xl);
    background: var(--color-bg);
    border-radius: var(--radius-m);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
}

.ai-why li + li {
    margin-top: 4px;
}

/* --- Низ карточки: «Разобрано» и отметки решения ------------ */

.review-card__footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-m) var(--space-l);
    margin-top: var(--space-l);
    padding-top: var(--space-m);
    border-top: 1px solid var(--color-border);
}

.done-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: var(--tap-min);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
}

.done-toggle input {
    width: 26px;
    height: 26px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.mark-group {
    display: flex;
    gap: var(--space-s);
    margin-left: auto;
}

.mark-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--tap-min);
    padding: 8px 18px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-m);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--text-small);
    font-weight: 500;
    cursor: pointer;
}

.mark-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.mark-btn--accept.is-active {
    background: var(--color-green-bg);
    border-color: var(--color-green-dot);
    color: var(--color-green-text);
    font-weight: 600;
}

.mark-btn--reject.is-active {
    background: var(--color-red-bg);
    border-color: var(--color-red-dot);
    color: var(--color-red-text);
    font-weight: 600;
}

/* ============================================================
   Липкая полоса прогресса модератора
   ============================================================ */

.has-sticky-progress .page-main {
    padding-bottom: 120px;
}

.sticky-progress {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-bar);
    z-index: 20;
}

.sticky-progress__inner {
    display: flex;
    align-items: center;
    gap: var(--space-l);
    min-height: 60px;
}

.sticky-progress__text {
    white-space: nowrap;
    font-size: var(--text-base);
}

.sticky-progress .progress {
    flex: 1;
    max-width: 460px;
}

/* ============================================================
   Тост
   ============================================================ */

.toast {
    position: fixed;
    left: 50%;
    bottom: 100px;
    transform: translate(-50%, 16px);
    padding: 12px 24px;
    background: var(--color-text);
    color: var(--color-text-inverse);
    border-radius: var(--radius-m);
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 30;
}

.toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ============================================================
   Страница загрузки файла
   ============================================================ */

.upload-col {
    max-width: 720px;
    display: grid;
    gap: var(--space-l);
}

.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    min-height: 260px;
    padding: var(--space-xl);
    background: var(--color-surface);
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-l);
    text-align: center;
    cursor: pointer;
}

.dropzone:hover,
.dropzone:focus-within {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
}

.dropzone .icon {
    width: 44px;
    height: 44px;
    color: var(--color-accent);
}

.dropzone__title {
    font-size: 19px;
    font-weight: 600;
}

.dropzone__hint {
    color: var(--color-text-secondary);
    font-size: var(--text-small);
}

.file-card {
    background: var(--color-surface);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    padding: var(--space-l);
}

.file-card__row {
    display: flex;
    align-items: center;
    gap: var(--space-m);
}

.file-card__row .icon {
    width: 36px;
    height: 36px;
    color: var(--color-accent);
}

.file-card__name {
    font-weight: 600;
    font-size: 18px;
}

.file-card__size {
    color: var(--color-text-secondary);
    font-size: var(--text-small);
}

.file-card__parsed {
    margin-top: var(--space-m);
    padding: var(--space-s) var(--space-m);
    background: var(--color-green-bg);
    border: 1px solid var(--color-green-border);
    border-radius: var(--radius-m);
    color: var(--color-green-text);
    font-size: var(--text-small);
}

.file-card__actions {
    display: flex;
    align-items: center;
    gap: var(--space-l);
    margin-top: var(--space-l);
    flex-wrap: wrap;
}

/* ============================================================
   Страница обработки: крупный прогресс и скелетоны
   ============================================================ */

.processing-banner {
    background: var(--color-surface);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    padding: var(--space-l);
    margin-bottom: var(--space-l);
    max-width: 960px;
}

.processing-banner__title {
    font-size: 24px;
    font-weight: 700;
}

.processing-banner .progress {
    margin-top: var(--space-m);
}

.processing-banner__hint {
    margin-top: var(--space-s);
    color: var(--color-text-secondary);
    font-size: var(--text-small);
}

.feed-section-title {
    font-size: var(--text-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin-top: var(--space-xs);
}

.skeleton-card {
    background: var(--color-surface);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    border-left: 4px solid var(--color-border);
    padding: var(--space-l);
}

.sk-line {
    height: 14px;
    border-radius: var(--radius-full);
    background: linear-gradient(
        90deg,
        var(--color-surface-dim) 25%,
        #e6e9ee 37%,
        var(--color-surface-dim) 63%
    );
    background-size: 400% 100%;
    animation: shimmer 1.6s ease infinite;
}

.sk-line + .sk-line {
    margin-top: var(--space-s);
}

.sk-line--badge {
    width: 160px;
    height: 26px;
}

.sk-line--w80 {
    width: 80%;
}

.sk-line--w60 {
    width: 60%;
}

.sk-line--w40 {
    width: 40%;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

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

    .toast {
        transition: none;
    }
}

/* ============================================================
   Формы (вход, настройки)
   ============================================================ */

.form-card {
    background: var(--color-surface);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    padding: var(--space-xl);
    max-width: 640px;
}

.field {
    display: grid;
    gap: 6px;
}

.field + .field {
    margin-top: var(--space-l);
}

.field__label {
    font-weight: 600;
}

.field__input {
    min-height: var(--tap-min);
    padding: 10px 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-m);
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    width: 100%;
}

.field__input:hover {
    border-color: var(--color-text-secondary);
}

.field__input--num {
    width: 130px;
}

.field__hint {
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    line-height: 1.45;
}

textarea.field__input {
    min-height: 140px;
    resize: vertical;
    line-height: 1.5;
}

.form-actions {
    margin-top: var(--space-xl);
}

/* --- Страница входа ------------------------------------------ */

.page-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-l);
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    padding: var(--space-2xl) var(--space-xl);
}

.login-card__logo {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: var(--space-xs);
}

.login-card__sub {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    margin-bottom: var(--space-xl);
}

.login-card .btn {
    width: 100%;
    margin-top: var(--space-xl);
}

/* ============================================================
   Адаптив: не разваливаться на 1024px
   ============================================================ */

@media (max-width: 1100px) {
    .container {
        padding-inline: var(--space-m);
    }

    .uploads-table th,
    .uploads-table td {
        padding: 12px 10px;
    }

    .checks {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

/* ============================================================
   Дополнения этапа «рабочий каркас» (поверх стилей прототипа)
   ============================================================ */

/* Нейтральный бейдж: «Ожидает проверки», «Не проверен» */
.badge--neutral {
    background: var(--color-surface-dim);
    color: var(--color-text-secondary);
    border-color: var(--color-border-strong);
}

/* Заглушка блока «Проверки» до запуска обработки */
.check-stub {
    margin-top: var(--space-l);
    padding: var(--space-s) var(--space-m);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-m);
    color: var(--color-text-secondary);
    font-size: var(--text-small);
}

/* Флеш-сообщения под шапкой */
.flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-s) var(--space-m);
    margin-bottom: var(--space-l);
    border: 1px solid transparent;
    border-radius: var(--radius-m);
    font-weight: 500;
}

.flash--success {
    background: var(--color-green-bg);
    border-color: var(--color-green-border);
    color: var(--color-green-text);
}

.flash--error {
    background: var(--color-red-bg);
    border-color: var(--color-red-border);
    color: var(--color-red-text);
}

/* Ошибка входа на странице логина */
.login-error {
    padding: var(--space-s) var(--space-m);
    margin-bottom: var(--space-l);
    background: var(--color-red-bg);
    border: 1px solid var(--color-red-border);
    border-radius: var(--radius-m);
    color: var(--color-red-text);
    font-size: var(--text-small);
}

/* Сводка импорта на странице батча */
.batch-import-note {
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    margin-top: 4px;
}

/* Дропзона при перетаскивании файла над ней */
.dropzone.is-dragover {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
}

/* Дата в таблице загрузок не переносится */
.uploads-table .row-date {
    white-space: nowrap;
}