/* Базовые цвета и типографика всего demo-picker. */
:root {
    color-scheme: light;
    font-family: Georgia, 'Times New Roman', serif;
    color: #17211b;
    background: #e9eee8;
}

/* Фон страницы намеренно отделён от карточной логики: picker не требует backend UI. */
body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle at 10% 0%, #f8fbf4, transparent 38%), #e9eee8;
}

/* Ограничивает ширину рабочей области и сохраняет адаптивные боковые поля. */
.page { max-width: 980px; margin: 0 auto; padding: 64px 24px; }
/* Служебный идентификатор версии приложения. */
.eyebrow { color: #56745f; font: 700 12px/1.2 sans-serif; letter-spacing: 2px; }
/* Заголовок и пояснение вводят пользователя в сценарий выбора документов. */
h1 { max-width: 620px; margin: 12px 0; font-size: clamp(38px, 7vw, 72px); line-height: .95; font-weight: 400; }
.lede { max-width: 560px; color: #5d6a61; font: 16px/1.6 sans-serif; }
/* Группа действий: выбор файлов, папки и очистка состояния. */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 36px 0 16px; }
button { border: 0; border-radius: 4px; padding: 12px 17px; color: #f7faf4; background: #1f5a3b; font: 700 13px sans-serif; cursor: pointer; }
button.secondary { color: #1f5a3b; background: #cbdcc9; }
button.quiet { color: #5d6a61; background: transparent; }
button:disabled { opacity: .45; cursor: not-allowed; }
/* Резервная область сообщения интегратора сохраняет высоту и не двигает таблицу. */
.status { min-height: 22px; color: #56745f; font: 13px sans-serif; }
.upload-progress-explanation { display: grid; gap: 4px; margin-top: 14px; color: #46604e; font: 13px/1.45 sans-serif; }
.upload-progress-explanation strong { color: #1b4d3e; }
.upload-progress-explanation span:last-child { color: #6b796f; font-variant-numeric: tabular-nums; }
/* Горизонтальный scroll на узких экранах не ломает таблицу дерева. */
.table-wrap { overflow-x: auto; border-top: 1px solid #b9c7ba; }
table { width: 100%; border-collapse: collapse; font: 14px/1.4 sans-serif; }
th, td { padding: 14px 10px; border-bottom: 1px solid #cbd5cc; text-align: left; }
th { color: #56745f; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
td:nth-child(2) { width: 140px; color: #68766c; }
.tree-name { display: inline-flex; align-items: center; gap: 8px; min-width: 240px; padding-top: 0; padding-bottom: 0; border: 0; background: transparent; color: #17211b; font: inherit; text-align: left; }
.tree-group { padding-left: 0; cursor: pointer; }
.tree-folder { color: #1f5a3b; }
.tree-zip { color: #8a5a20; }
.tree-chevron { display: inline-block; width: 12px; color: #78917d; font-size: 10px; }
/* Удаление работает для leaf и групп и обрабатывается делегированием в initUploadTable. */
.remove-btn { padding: 2px 7px; color: #8c5148; background: transparent; font: 20px/1 sans-serif; }
.remove-btn:hover { color: #b32f22; }
.tree-row td:first-child { white-space: nowrap; }
.count { color: #5d6a61; font: 13px sans-serif; }
/* Legacy-стили результата сохранены для совместимости, текущий picker их не использует. */
.result { margin-top: 44px; padding-top: 18px; border-top: 2px solid #1f5a3b; }
.result h2 { font-size: 26px; font-weight: 400; }
.result li { margin: 8px 0; font: 14px sans-serif; }
@media (max-width: 600px) {
    /* На мобильном экране кнопки получают равномерную ширину. */
    .page { padding: 36px 16px; }
    .toolbar button { flex: 1 1 42%; }
}