/* ============================================================================
   ДИЗАЙН-ТОКЕНЫ — CSS-переменные (Этап 1: светлая тема)
   Тёмная тема переопределяет эти значения в [data-theme="dark"]
   ============================================================================ */

:root {

    /* ── Фон страницы и поверхностей ─────────────────────────────────────── */
    --bg-page:          #f4f4f9;   /* фон всей страницы */
    --bg-card:          #ffffff;   /* карточки, модальные окна */
    --bg-card-alt:      #f8f9fa;   /* альтернативный фон карточки (header summary) */
    --bg-subtle:        #fafafa;   /* очень лёгкий фон (upload btn, input rows) */
    --bg-hover:         #f0f4ff;   /* hover-состояние строк, фон при наведении */
    --bg-input:         #ffffff;   /* поля ввода */
    --bg-skeleton:      #f0f2f5;   /* skeleton/shimmer загрузка графиков */

    /* ── Текст ───────────────────────────────────────────────────────────── */
    --text-primary:     #1a1a1a;   /* заголовки, важный текст */
    --text-body:        #333333;   /* основной текст */
    --text-secondary:   #555555;   /* вторичный текст */
    --text-hint:        #666666;   /* подсказки, описания */
    --text-muted:       #888888;   /* приглушённый текст */
    --text-subtle:      #999999;   /* ещё тише */
    --text-placeholder: #aaaaaa;   /* placeholder, метки */
    --text-disabled:    #cccccc;   /* задизейбленный текст */

    /* ── Границы ─────────────────────────────────────────────────────────── */
    --border-card:      #e4e4e4;   /* граница карточки */
    --border-default:   #eeeeee;   /* стандартный разделитель */
    --border-light:     #f0f0f0;   /* тонкий разделитель внутри таблиц */
    --border-input:     #cccccc;   /* граница поля ввода */
    --border-divider:   #dddddd;   /* разделитель секций */
    --border-strong:    #e0e0e0;   /* более заметный разделитель */

    /* ── Тени ────────────────────────────────────────────────────────────── */
    --shadow-card:      0 4px 6px rgba(0,0,0,0.10);
    --shadow-sm:        0 1px 4px rgba(0,0,0,0.05);
    --shadow-md:        0 2px 8px rgba(0,0,0,0.07);

    /* ── Акцент / Primary (синий) ────────────────────────────────────────── */
    --color-accent:         #4a9af5;
    --color-accent-hover:   #2a6fcb;
    --color-accent-dark:    #1967d2;
    --color-accent-deep:    #1e40af;
    --color-accent-light:   #7ab8f7;   /* hover-hint в upload */
    --color-accent-bg:      #f0f6ff;   /* лёгкий синий фон */
    --color-accent-bg-alt:  #e8f0fe;   /* чуть темнее (max HR row) */
    --color-accent-bg-deep: #eef2ff;   /* глубже (AI step) */
    --color-accent-border:  #d2e3fc;   /* синяя граница */
    --color-accent-border2: #c8d8f5;   /* чип AI logo */
    --color-accent-border3: #e0e7ff;   /* AI step border */

    /* ── Успех (зелёный) ─────────────────────────────────────────────────── */
    --color-success:        #28a745;
    --color-success-alt:    #27ae60;
    --color-success-dark:   #2e7d32;
    --color-success-deep:   #1b5e20;
    --color-success-deeper: #1a6630;
    --color-success-muted:  #4a7c59;   /* дата AI-статуса */
    --color-success-bg:     #d4edda;
    --color-success-bg-alt: #e8f5e9;
    --color-success-bg-lgt: #f0fff4;   /* очень лёгкий */
    --color-success-border: #a5d6a7;
    --color-success-text:   #155724;

    /* ── Опасность (красный) ─────────────────────────────────────────────── */
    --color-danger:         #dc3545;
    --color-danger-alt:     #e74c3c;
    --color-danger-dark:    #c0392b;
    --color-danger-bg:      #fff5f5;
    --color-danger-bg-alt:  #fff0f0;
    --color-danger-border:  #e0857a;
    --color-danger-text:    #7f1d1d;
    --color-danger-text2:   #991b1b;
    --color-danger-deep:    #c00000;   /* редкий edge */

    /* ── Предупреждение (оранжевый/жёлтый) ───────────────────────────────── */
    --color-warning:        #e67e22;
    --color-warning-alt:    #f39c12;
    --color-warning-dark:   #c05a10;
    --color-warning-border: #e07b2a;
    --color-warning-bg:     #fff5ec;
    --color-warning-bg-alt: #fff8e1;
    --color-warning-text:   #7b6000;
    --color-warning-pending-bg:     #fff8e1;
    --color-warning-pending-border: #ffe082;

    /* ── Инфо (голубой/бирюзовый) ────────────────────────────────────────── */
    --color-info:           #17a2b8;
    --color-info-dark:      #0d7a8a;      /* gradient stop в btn-export--cadence */
    --color-info-bg:        #e8f4fd;
    --color-danger-border-lt: #fca5a5;   /* светлая граница для валидации */

    /* ── Фиолетовый (AI, промпт, admin) ─────────────────────────────────── */
    --color-purple:         #6b46c1;
    --color-purple-alt:     #6f42c1;
    --color-purple-dark:    #4c2889;
    --color-purple-deep:    #4c1d95;
    --color-purple-badge:   #6610f2;
    --color-purple-bg:      #f3f0ff;
    --color-purple-bg-alt:  #eef2ff;
    --color-purple-border:  #c4b5fd;
    --color-purple-light:   #d4b8ff;   /* AI login border */

    /* ── Навигация (topnav) ──────────────────────────────────────────────── */
    --nav-bg:           #ffffff;
    --nav-border:       #e9ecef;
    --nav-link:         #444444;
    --nav-link-hover:   #4a9af5;
    --nav-link-active:  #2a4a9b;
    --nav-link-admin:   #6b46c1;

    /* ── Кнопки (btn-*) ──────────────────────────────────────────────────── */
    --btn-primary-bg:   #007bff;
    --btn-success-bg:   #28a745;
    --btn-danger-bg:    #dc3545;
    --btn-purple-bg:    #6f42c1;
    --btn-info-bg:      #17a2b8;

    /* ── Upload / Drop-zone ──────────────────────────────────────────────── */
    --upload-bg:        #fafafa;
    --upload-border:    #bbbbbb;
    --upload-text:      #555555;
    --upload-icon-bg:   #e9ecef;
    --upload-hover-bg:  #f0f6ff;
    --upload-hover-border: #4a9af5;
    --upload-hover-text:   #4a9af5;

    /* ── Таблицы (история) ───────────────────────────────────────────────── */
    --table-head-bg:    #f0f4ff;
    --table-head-text:  #555555;
    --table-row-hover:  #fafbff;
    --table-border:     #f0f0f0;

    /* ── Flash-сообщения ─────────────────────────────────────────────────── */
    --flash-success-bg:     #d4edda;
    --flash-success-text:   #1a6630;
    --flash-success-border: #b7dfc4;

    /* ── История: badge типа файла ───────────────────────────────────────── */
    --badge-tcx-bg:     #e3f0ff;
    --badge-tcx-text:   #2a6fcb;
    --badge-fit-bg:     #e8f7e8;
    --badge-fit-text:   #2a7c2a;
    --badge-unk-bg:     #f0f0f0;
    --badge-unk-text:   #888888;

    /* ── Skeleton shimmer ────────────────────────────────────────────────── */
    --shimmer-from:     #f0f2f5;
    --shimmer-mid:      #e4e8ed;
    --shimmer-peak:     #d8dde6;

    /* ── Структурный пример (struct-example) ─────────────────────────────── */
    --struct-bg:        #f6f9ff;
    --struct-border:    #e4eaf2;
    --struct-text:      #5a7ab0;

    /* ── sec-footer (градиент внизу карточки) ───────────────────────────── */
    --sec-footer-bg-from:   #f0f4ff;
    --sec-footer-bg-to:     #f5f0ff;
    --sec-footer-border:    #dde4f5;

    /* ── AI step / prompt modal ──────────────────────────────────────────── */
    --bg-ai-step:       #f8f9ff;   /* фон блока AI-шага */
    --bg-ai-step-alt:   #f8f9fa;   /* альтернативный фон prompt modal */
    --bg-modal-overlay: rgba(0,0,0,0.45);

    /* ── Разные второстепенные фоны и границы ────────────────────────────── */
    --bg-light-blue:    #f0f0ff;   /* очень лёгкий голубой */
    --bg-light-gray:    #f1f3f5;   /* нейтральный светлый */
    --bg-gray:          #f5f5f5;   /* стандартный серый */
    --bg-white-alt:     #f9fafb;   /* почти белый */
    --border-filter:    #dde1ea;   /* history filter button border */
    --border-blue-gray: #d8dff0;   /* scroll/range track */
    --border-cool:      #dce3ea;   /* другие второстепенные */
    --color-gray-mid:   #6c757d;   /* Bootstrap secondary */
    --color-gray-dark:  #343a40;   /* Bootstrap dark */
    --color-gray-muted: #adb5bd;   /* Bootstrap muted */
    --color-orange:     #fd7e14;   /* Bootstrap orange */
    --range-track:      #bae0fb;   /* range input track */
    --range-thumb:      #93c5fd;   /* range input thumb */

    /* ── Hover/active для кнопок ─────────────────────────────────────────── */
    --color-success-hover:  #1e7e34;
    --color-accent-hover2:  #1a6ed8;   /* альтернативный hover синего */
    --color-accent-hover3:  #2f7de0;

    /* ── Разное ──────────────────────────────────────────────────────────── */
    --color-teal:       #20c997;   /* recalc-badge */
    --color-arrow:      #b0c4de;   /* AI step arrow */
    --color-toggle-on:  #0a8a5c;   /* wh-toggle-hint */
    --color-hr-label:   #1967d2;   /* max-hr-label */
    --color-hr-hint:    #5f6368;   /* max-hr-hint */

    /* ── Пульсовые зоны (семантические, одинаковы в обеих темах) ─────────── */
    --zone-1: #8E8E93;   /* Z1 Восстановление */
    --zone-2: #007AFF;   /* Z2 Выносливость   */
    --zone-3: #4CD964;   /* Z3 Аэробная       */
    --zone-4: #FF9500;   /* Z4 ПАНО           */
    --zone-5: #FF3B30;   /* Z5 МПК            */

    /* ── Тулипы и подписи чартов ─────────────────────────────────────────── */
    --chart-tooltip-bg:         #ffffff;
    --chart-tooltip-border:     #e8ecf0;
    --chart-tooltip-separator:  #f0f0f0;
    --chart-tooltip-text:       #1a1f2e;
    --chart-tooltip-muted:      #555555;
    --chart-tooltip-hint:       #999999;
    --chart-bg:                 #fafafa;
    --chart-hr-color:           #f44336;
    --chart-axis-text:          #666666;
    --chart-axis-line:          #dddddd;
    --chart-grid:               rgba(0,0,0,0.06);

    /* ── Статусные цвета (нагрузка, дрейф) ──────────────────────────────── */
    --load-easy:   #27ae60;  /* лёгкая нагрузка */
    --load-ok:     #2ecc71;  /* умеренная        */
    --load-medium: #f39c12;  /* средняя          */
    --load-high:   #e67e22;  /* высокая          */
    --load-max:    #e74c3c;  /* очень высокая    */
    --dc-bad:      #e74c3c;  /* дрейф: плохой    */
    --dc-ok:       #f39c12;  /* дрейф: норм      */
    --dc-good:     #27ae60;  /* дрейф: хороший   */

    /* ── Административная панель ─────────────────────────────────────────── */
    --adm-text-muted:           #8a94ab;
    --adm-text-date:            #5a6378;
    --adm-text-disabled:        #c0c8d8;
    --adm-link-color:           #3182ce;
    --adm-stat-purple:          #805ad5;
    --adm-stat-orange:          #dd6b20;
    /* Sidebar */
    --adm-sidebar-bg:           #1a1f2e;
    --adm-sidebar-text:         #c9d1e0;
    --adm-sidebar-border:       #2d3447;
    --adm-sidebar-muted:        #6c7a99;
    --adm-nav-active-bg:        rgba(99,179,237,0.12);
    --adm-nav-active-border:    #63b3ed;
    --adm-nav-focus-shadow:     rgba(99,179,237,0.15);
    /* Topbar / Layout */
    --adm-main-bg:              #f7f9fc;
    --adm-topbar-bg:            #ffffff;
    --adm-topbar-border:        #e8ecf0;
    --adm-page-title:           #1a1f2e;
    --adm-user-text:            #5a6378;
    --adm-online-dot:           #48bb78;
    /* Cards & Inputs */
    --adm-card-bg:              #ffffff;
    --adm-card-border:          #e8ecf0;
    --adm-card-head-border:     #f0f4f8;
    --adm-input-border:         #d1d9e0;
    --adm-input-focus:          #63b3ed;
    --adm-input-focus-shadow:   rgba(99,179,237,0.15);
    /* Table */
    --adm-table-text:           #2d3748;
    --adm-table-row-border:     #f0f4f8;
    --adm-table-head-bg:        #f7f9fc;
    --adm-table-head-border:    #e8ecf0;
    --adm-table-row-hover:      #f7fbff;
    /* Badges */
    --adm-badge-admin-bg:       #ebf8ff;
    --adm-badge-admin-text:     #2b6cb0;
    --adm-badge-active-bg:      #f0fff4;
    --adm-badge-active-text:    #276749;
    --adm-badge-block-bg:       #fff5f5;
    --adm-badge-block-text:     #c53030;
    /* Action buttons */
    --adm-btn-primary:          #3182ce;
    --adm-btn-primary-hover:    #2c5282;
    --adm-btn-danger-bg:        #fff5f5;
    --adm-btn-danger-text:      #c53030;
    --adm-btn-danger-border:    #feb2b2;
    --adm-btn-danger-hover:     #fed7d7;
    --adm-btn-success-bg:       #f0fff4;
    --adm-btn-success-text:     #276749;
    --adm-btn-success-border:   #9ae6b4;
    --adm-btn-success-hover:    #c6f6d5;
    --adm-btn-warn-bg:          #fffbeb;
    --adm-btn-warn-text:        #744210;
    --adm-btn-warn-border:      #fbd38d;
    --adm-btn-warn-hover:       #fefcbf;
    /* Flash messages */
    --adm-flash-error-text:     #742a2a;
    --adm-flash-error-border:   #feb2b2;
    /* Stat cards */
    --adm-stat-blue:            #3182ce;
    --adm-stat-green:           #38a169;
}

/* ============================================================================
   ТЁМНАЯ ТЕМА — переопределение токенов
   Применяется через <html data-theme="dark">
   ============================================================================ */

[data-theme="dark"] {

    /* ── Фон ─────────────────────────────────────────────────────────────── */
    --bg-page:          #0f1117;
    --bg-card:          #1c2030;
    --bg-card-alt:      #242838;
    --bg-subtle:        #1a1e2e;
    --bg-hover:         #1e2a42;
    --bg-input:         #1c2030;
    --bg-skeleton:      #1e2235;

    /* ── Текст ───────────────────────────────────────────────────────────── */
    --text-primary:     #e8ecf4;
    --text-body:        #c8cdd8;
    --text-secondary:   #9aa3b2;
    --text-hint:        #8892a4;
    --text-muted:       #6b7280;
    --text-subtle:      #5a6272;
    --text-placeholder: #4b5563;
    --text-disabled:    #374151;

    /* ── Границы ─────────────────────────────────────────────────────────── */
    --border-card:      #2d3447;
    --border-default:   #252b3b;
    --border-light:     #1e2435;
    --border-input:     #3d4456;
    --border-divider:   #2d3447;
    --border-strong:    #323848;

    /* ── Тени ────────────────────────────────────────────────────────────── */
    --shadow-card:      0 4px 6px rgba(0,0,0,0.40);
    --shadow-sm:        0 1px 4px rgba(0,0,0,0.30);
    --shadow-md:        0 2px 8px rgba(0,0,0,0.35);

    /* ── Акцент (синий) ──────────────────────────────────────────────────── */
    --color-accent:         #5ba3f7;
    --color-accent-hover:   #3d8de0;
    --color-accent-dark:    #2878cc;
    --color-accent-deep:    #3b82f6;
    --color-accent-light:   #7ab8f7;
    --color-accent-bg:      #1a2640;
    --color-accent-bg-alt:  #1e2d4a;
    --color-accent-bg-deep: #1c2840;
    --color-accent-border:  #2a4066;
    --color-accent-border2: #2a3d60;
    --color-accent-border3: #263050;

    /* ── Успех (зелёный) ─────────────────────────────────────────────────── */
    --color-success:        #34c759;
    --color-success-alt:    #2dbe50;
    --color-success-dark:   #28a745;
    --color-success-deep:   #1a8a3a;
    --color-success-deeper: #166532;
    --color-success-muted:  #4a9c5c;
    --color-success-bg:     #0f2b1a;
    --color-success-bg-alt: #0d2218;
    --color-success-bg-lgt: #0f2b1c;
    --color-success-border: #1e5c30;
    --color-success-text:   #6ee7a0;

    /* ── Опасность (красный) ─────────────────────────────────────────────── */
    --color-danger:         #f87171;
    --color-danger-alt:     #fc8181;
    --color-danger-dark:    #e05252;
    --color-danger-bg:      #2b1515;
    --color-danger-bg-alt:  #2d1818;
    --color-danger-border:  #7f3535;
    --color-danger-text:    #fca5a5;
    --color-danger-text2:   #f87171;
    --color-danger-deep:    #ef4444;

    /* ── Предупреждение ──────────────────────────────────────────────────── */
    --color-warning:        #f59e0b;
    --color-warning-alt:    #fbbf24;
    --color-warning-dark:   #d97706;
    --color-warning-border: #92540a;
    --color-warning-bg:     #2b2010;
    --color-warning-bg-alt: #2a1f0d;
    --color-warning-text:   #fcd34d;
    --color-warning-pending-bg:     #2a2010;
    --color-warning-pending-border: #6b4d10;

    /* ── Инфо ────────────────────────────────────────────────────────────── */
    --color-info:           #22d3ee;
    --color-info-dark:      #0a6b7a;
    --color-info-bg:        #0c2a31;
    --color-danger-border-lt: #7f3535;

    /* ── Фиолетовый ──────────────────────────────────────────────────────── */
    --color-purple:         #9d72e8;
    --color-purple-alt:     #a78bfa;
    --color-purple-dark:    #7c55cc;
    --color-purple-deep:    #6d28d9;
    --color-purple-badge:   #8b5cf6;
    --color-purple-bg:      #1e1a2e;
    --color-purple-bg-alt:  #1c1a30;
    --color-purple-border:  #4c3880;
    --color-purple-light:   #5b3fa8;

    /* ── Навигация ───────────────────────────────────────────────────────── */
    --nav-bg:           #1c2030;
    --nav-border:       #2d3447;
    --nav-link:         #9aa3b2;
    --nav-link-hover:   #5ba3f7;
    --nav-link-active:  #7ab8f7;
    --nav-link-admin:   #9d72e8;

    /* ── Кнопки ──────────────────────────────────────────────────────────── */
    --btn-primary-bg:   #2a6fcb;
    --btn-success-bg:   #1a8a3a;
    --btn-danger-bg:    #c0392b;
    --btn-purple-bg:    #5b35a8;
    --btn-info-bg:      #0e8fa3;

    /* ── Upload / Drop-zone ──────────────────────────────────────────────── */
    --upload-bg:        #1a1e2e;
    --upload-border:    #3d4456;
    --upload-text:      #9aa3b2;
    --upload-icon-bg:   #252b3b;
    --upload-hover-bg:  #1a2640;
    --upload-hover-border: #5ba3f7;
    --upload-hover-text:   #5ba3f7;

    /* ── Таблицы ─────────────────────────────────────────────────────────── */
    --table-head-bg:    #1e2435;
    --table-head-text:  #9aa3b2;
    --table-row-hover:  #1c2235;
    --table-border:     #252b3b;

    /* ── Flash-сообщения ─────────────────────────────────────────────────── */
    --flash-success-bg:     #0f2b1a;
    --flash-success-text:   #6ee7a0;
    --flash-success-border: #1e5c30;

    /* ── Badge типа файла ─────────────────────────────────────────────────── */
    --badge-tcx-bg:     #1a2640;
    --badge-tcx-text:   #5ba3f7;
    --badge-fit-bg:     #0f2b1a;
    --badge-fit-text:   #34c759;
    --badge-unk-bg:     #252b3b;
    --badge-unk-text:   #6b7280;

    /* ── Skeleton shimmer ────────────────────────────────────────────────── */
    --shimmer-from:     #1e2235;
    --shimmer-mid:      #252b3b;
    --shimmer-peak:     #2d3447;

    /* ── Структурный пример ──────────────────────────────────────────────── */
    --struct-bg:        #1a2035;
    --struct-border:    #2a3450;
    --struct-text:      #5a7ab0;

    /* ── sec-footer ──────────────────────────────────────────────────────── */
    --sec-footer-bg-from:   #1a2040;
    --sec-footer-bg-to:     #1e1a35;
    --sec-footer-border:    #2d3458;

    /* ── AI step / prompt modal ──────────────────────────────────────────── */
    --bg-ai-step:       #1a2040;
    --bg-ai-step-alt:   #1c2030;
    --bg-modal-overlay: rgba(0,0,0,0.70);

    /* ── Разные второстепенные фоны и границы ────────────────────────────── */
    --bg-light-blue:    #1c2040;
    --bg-light-gray:    #1e2235;
    --bg-gray:          #1a1e2e;
    --bg-white-alt:     #1c2030;
    --border-filter:    #2d3447;
    --border-blue-gray: #2a3456;
    --border-cool:      #2a3040;
    --color-gray-mid:   #6b7280;
    --color-gray-dark:  #9aa3b2;
    --color-gray-muted: #4b5563;
    --color-orange:     #f97316;
    --range-track:      #2a3d60;
    --range-thumb:      #5ba3f7;

    /* ── Hover/active для кнопок ─────────────────────────────────────────── */
    --color-success-hover:  #1a8a3a;
    --color-accent-hover2:  #3d8de0;
    --color-accent-hover3:  #2f7de0;

    /* ── Разное ──────────────────────────────────────────────────────────── */
    --color-teal:       #2dd4bf;
    --color-arrow:      #3d5070;
    --color-toggle-on:  #34c759;
    --color-hr-label:   #5ba3f7;
    --color-hr-hint:    #8892a4;

    /* ── Пульсовые зоны (те же, семантические) ───────────────────────────── */
    --zone-1: #8E8E93;
    --zone-2: #3a9eff;
    --zone-3: #4CD964;
    --zone-4: #FF9500;
    --zone-5: #FF3B30;

    /* ── Тулипы и подписи чартов (тёмная тема) ───────────────────────────── */
    --chart-tooltip-bg:         #1c2030;
    --chart-tooltip-border:     #2a3045;
    --chart-tooltip-separator:  #242838;
    --chart-tooltip-text:       #c8d0e0;
    --chart-tooltip-muted:      #8a94ab;
    --chart-tooltip-hint:       #5a6378;
    --chart-bg:                 #161b2c;
    --chart-hr-color:           #ff6b6b;
    --chart-axis-text:          #6b7a99;
    --chart-axis-line:          #2a3045;
    --chart-grid:                rgba(255,255,255,0.05);

    /* ── Статусные цвета (нагрузка, дрейф) — слегка ярче ────────────────── */
    --load-easy:   #34c759;
    --load-ok:     #4ade80;
    --load-medium: #f59e0b;
    --load-high:   #fb923c;
    --load-max:    #f87171;
    --dc-bad:      #f87171;
    --dc-ok:       #f59e0b;
    --dc-good:     #34c759;

    /* ── Административная панель ─────────────────────────────────────────── */
    --adm-text-muted:           #6b7a99;
    --adm-text-date:            #8a94ab;
    --adm-text-disabled:        #4b5563;
    --adm-link-color:           #5ba3f7;
    --adm-stat-purple:          #9d72e8;
    --adm-stat-orange:          #f59e0b;
    /* Sidebar */
    --adm-sidebar-bg:           #0d1117;
    --adm-sidebar-text:         #c9d1e0;
    --adm-sidebar-border:       #1e2435;
    --adm-sidebar-muted:        #4b5680;
    --adm-nav-active-bg:        rgba(91,163,247,0.15);
    --adm-nav-active-border:    #5ba3f7;
    --adm-nav-focus-shadow:     rgba(91,163,247,0.2);
    /* Topbar / Layout */
    --adm-main-bg:              #0f1117;
    --adm-topbar-bg:            #1c2030;
    --adm-topbar-border:        #2a3045;
    --adm-page-title:           #e2e8f0;
    --adm-user-text:            #8a94ab;
    --adm-online-dot:           #4ade80;
    /* Cards & Inputs */
    --adm-card-bg:              #1c2030;
    --adm-card-border:          #2a3045;
    --adm-card-head-border:     #242838;
    --adm-input-border:         #374151;
    --adm-input-focus:          #5ba3f7;
    --adm-input-focus-shadow:   rgba(91,163,247,0.2);
    /* Table */
    --adm-table-text:           #c8d0e0;
    --adm-table-row-border:     #242838;
    --adm-table-head-bg:        #161b2c;
    --adm-table-head-border:    #2a3045;
    --adm-table-row-hover:      #1e2540;
    /* Badges */
    --adm-badge-admin-bg:       #1a2a4a;
    --adm-badge-admin-text:     #5ba3f7;
    --adm-badge-active-bg:      #0f2a1a;
    --adm-badge-active-text:    #4ade80;
    --adm-badge-block-bg:       #2a1010;
    --adm-badge-block-text:     #f87171;
    /* Action buttons */
    --adm-btn-primary:          #4a9af5;
    --adm-btn-primary-hover:    #2a6fcb;
    --adm-btn-danger-bg:        #2a1010;
    --adm-btn-danger-text:      #f87171;
    --adm-btn-danger-border:    #7f1d1d;
    --adm-btn-danger-hover:     #3a1515;
    --adm-btn-success-bg:       #0f2a1a;
    --adm-btn-success-text:     #4ade80;
    --adm-btn-success-border:   #14532d;
    --adm-btn-success-hover:    #1a3d28;
    --adm-btn-warn-bg:          #2a1c0f;
    --adm-btn-warn-text:        #fbbf24;
    --adm-btn-warn-border:      #78350f;
    --adm-btn-warn-hover:       #3a2a15;
    /* Flash messages */
    --adm-flash-error-text:     #fca5a5;
    --adm-flash-error-border:   #7f1d1d;
    /* Stat cards */
    --adm-stat-blue:            #5ba3f7;
    --adm-stat-green:           #4ade80;
}

/* Основные стили страницы */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif;
    padding: 20px;
    background-color: var(--bg-page);
    color: var(--text-body);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Карточки (белые блоки) */
.card {
    background: var(--bg-card);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    overflow: hidden; /* Чтобы контент не вылезал за скругления */
}

/* Стили для сворачивающихся блоков */
details.card {
    display: block;
}

/* Заголовок карточки (он же кнопка) */
summary.card-header {
    padding: 15px 20px;
    font-weight: bold;
    cursor: pointer;
    list-style: none; /* Убираем стандартный треугольник */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    transition: background-color 0.2s;
    user-select: none; /* Чтобы текст не выделялся при клике */
}

summary.card-header:hover {
    background-color: var(--bg-card-alt);
}

/* Убираем стандартный маркер в Chrome/Safari */
summary.card-header::-webkit-details-marker {
    display: none;
}

/* Заголовок внутри summary */
summary.card-header h3 {
    margin: 0;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Кастомная стрелочка */
summary.card-header::after {
    content: '';
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

/* Поворот стрелочки, когда блок открыт */
details[open] summary.card-header::after {
    transform: rotate(180deg);
}

/* Линия-разделитель, если блок открыт */
details[open] summary.card-header {
    border-bottom: 1px solid var(--border-default);
}

/* Внутренний контент карточки */
.card-body {
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

/* ── Стилизованный подвал карточки ────────────────────────────────────────── */
.sec-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--bg-hover) 0%, var(--sec-footer-bg-to) 100%);
    border-top: 1px solid var(--sec-footer-border);
    border-radius: 0 0 10px 10px;
}

.sec-footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sec-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Подсказка статуса тренировки — выделенный чип */
.sf-hint {
    font-size: 0.82em;
    font-weight: 600;
    white-space: nowrap;
}

/* Анимация появления */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Шапка и управление */
/* ══════════════════════════════════════════════════════════════════════════
   Hero-шапка тренировки — крупные метрики
   ══════════════════════════════════════════════════════════════════════════ */

.workout-hero {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    padding: 12px 20px 0;   /* было 16px — topbar теперь компактнее */
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;       /* чтобы footer flush со скругленным бордером */
}

/* Верхняя строка: дата слева, зона загрузки справа */
.wh-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;         /* было 10px */
    padding-bottom: 8px;        /* было 10px */
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
    gap: 8px;
}

/* Форма загрузки в топбаре — не тянуть по высоте */
.wh-topbar > form {
    display: flex;
    align-items: center;
}

/* Блок даты с подписью */
.wh-date-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Дата — читается как заголовок тренировки */
.wh-date {
    font-size: 1.05em;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Подпись: «Начало тренировки · Бег» */
.wh-date-label {
    font-size: 0.7em;
    color: var(--text-placeholder);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

/* Зона загрузки — фиксированные размеры 280×70px */
.wh-upload-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 280px;
    height: 70px;
    padding: 0 16px;
    box-sizing: border-box;
    border: 2px dashed var(--upload-border);
    border-radius: 6px;
    cursor: pointer;
    background: var(--bg-subtle);
    font-size: 0.84em;
    color: var(--text-secondary);
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    user-select: none;
    white-space: nowrap;
}
.wh-upload-btn:hover,
.wh-upload-btn.highlight {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

/* Иконка */
.wh-upload-icon {
    font-size: 1.15em;
    flex-shrink: 0;
    line-height: 1;
}

/* Текстовый блок — две строки вертикально по центру кнопки */
.wh-upload-btn .upload-text {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.25;
    white-space: normal;        /* внутри блока — обычный перенос */
}

/* Первая строка — всегда одна строка */
.wh-upload-main {
    white-space: nowrap;
    font-weight: 500;
}

/* Вторая строка подсказки */
.wh-upload-hint {
    font-size: 0.85em;
    color: var(--text-placeholder);
    font-weight: 400;
    line-height: 1.2;
}
.wh-upload-btn:hover .wh-upload-hint {
    color: var(--color-accent-light);
}

/* ── Footer карточки: деструктивное действие ──────────────────────────────
   Отдельная зона с другим фоном — визуально отличается от контента.
   Цвет var(--bg-subtle) — нейтральный, чуть холоднее белого, не пугает как красный.
   border-top разделяет footer от метрик. */
.wh-footer {
    margin: 10px -20px 0;   /* flush к краям карточки */
    padding: 9px 20px;
    background: var(--bg-subtle);
    border-top: 1px solid var(--border-default);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.wh-footer--right {
    justify-content: flex-end;
}

/* Группа action-кнопок в footer hero */
.wh-footer-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Вертикальный разделитель между тогглом и кнопками */
.wh-footer-divider {
    width: 1px;
    height: 22px;
    background: var(--border-divider);
    flex-shrink: 0;
}

/* ── Тоггл «Уличная тренировка» ─────────────────────────────────────────── */
.wh-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    font-size: 0.82em;
    color: var(--text-secondary);
}
.wh-toggle input[type="checkbox"] {
    display: none;
}

/* Трек */
.wh-toggle-track {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    background: var(--border-input);
    border-radius: 9px;
    transition: background 0.2s;
    flex-shrink: 0;
}
/* Бегунок */
.wh-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--bg-card);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}
/* Состояние ON */
.wh-toggle input:checked + .wh-toggle-track {
    background: var(--color-accent);
}
.wh-toggle input:checked + .wh-toggle-track::after {
    transform: translateX(14px);
}
/* Лейбл меняет цвет в зависимости от состояния */
.wh-toggle input:checked ~ .wh-toggle-label {
    color: var(--color-hr-label);
    font-weight: 500;
}
.wh-toggle:hover .wh-toggle-track {
    box-shadow: 0 0 0 3px rgba(74, 154, 245, 0.15);
}

/* Маленький вариант кнопок */
.btn-sm {
    padding: 4px 10px;
    font-size: 0.85em;
    line-height: 1.4;
}

/* btn-danger-outline с текстом (не иконка-квадрат) */
.btn-sm.btn-danger-outline {
    width: auto;
    height: auto;
    padding: 4px 10px;
}

/* Нейтральная кнопка для деструктивных действий в footer-зоне.
   Серый outline — не пугает как красный, но всё равно читается как
   «вторичное действие». Hover окрашивает в мягкий красный только при
   реальном намерении пользователя нажать. */
.btn-clear {
    background: transparent;
    border: 1px solid var(--border-input);
    color: var(--text-muted);
    border-radius: 5px;
    padding: 4px 12px;
    font-size: 0.83em;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s;
    line-height: 1.5;
}
.btn-clear:hover {
    border-color: var(--color-danger-border);
    color: var(--color-danger-dark);
    background: var(--color-danger-bg);
}

/* Сетка метрик */
.wh-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    padding-top: 6px;       /* чуть больше отступа от разделителя topbar */
    padding-bottom: 4px;    /* воздух перед footer */
}

.whs-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 10px;     /* было 6px 8px — даём цифрам «воздух» */
    text-align: center;
    position: relative;
}

/* Тонкий вертикальный разделитель между тайлами.
   Слегка не доходит до краёв — выглядит легче чем сквозная линия. */
.whs-tile + .whs-tile::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: var(--border-strong);
}

.whs-value-row {
    display: flex;
    align-items: baseline;
    gap: 3px;
    line-height: 1;
    margin-bottom: 7px;     /* было 5px */
}

.whs-value {
    font-size: 1.85em;      /* чуть крупнее для читаемости */
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1;
}

.whs-unit {
    font-size: 0.78em;
    color: var(--text-subtle);
    font-weight: 400;
    padding-bottom: 2px;
}

.whs-label {
    font-size: 0.7em;
    color: var(--text-placeholder);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Эмодзи в подписи тайла — крупнее, чтобы хорошо читалось */
.whs-icon {
    font-size: 1.35em;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1;
}

/* ── Старая .header-row (оставляем для совместимости) ── */
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 20px;
}

.app-title {
    margin-bottom: 5px; 
    margin-top: 0;
}

.meta-info {
    font-size: 0.95em;
    color: var(--text-hint);
    display: flex;
    gap: 15px;
    background: var(--bg-card);
    padding: 8px 15px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    margin-top: 10px;
}

.meta-info span + span {
    border-left: 1px solid var(--border-input);
    padding-left: 15px;
}

/* Кнопки и формы (верхняя часть) */
.controls-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.upload-form {
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--bg-card);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn {
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 5px;
    color: white;
    text-decoration: none;
    font-family: inherit;
}

.btn:hover { opacity: 0.9; }

/* Цвета кнопок */
.btn-primary { background-color: var(--btn-primary-bg); }
.btn-purple { background-color: var(--color-purple-alt); }
.btn-success { background-color: var(--color-success); }
.btn-danger { background-color: var(--color-danger); }
.btn-info { 
    background-color: var(--color-info); 
    color: white;
}
/* Кнопка удаления (Крестик) */
.btn-danger-outline {
    background: var(--bg-card);
    border: 1px solid var(--color-danger);  /* Красная рамка */
    color: var(--color-danger);             /* Красный крестик */
    width: 32px;                /* Фиксированная ширина */
    height: 32px;               /* Фиксированная высота */
    padding: 0;                 /* Убираем отступы, чтобы центрировать */
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1;
    transition: all 0.2s ease;  /* Плавная анимация */
}

/* Эффект при наведении */
.btn-danger-outline:hover {
    background: var(--color-danger);        /* Становится красной */
    color: white;               /* Крестик белеет */
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}
/*
.btn-danger-outline { 
    background: transparent; 
    border: 1px solid var(--color-danger); 
    color: var(--color-danger); 
    padding: 4px 8px;
}
*/
/* Строка с полями ввода (grid: start | end | dist | type | ✕) */
.input-row {
    margin-bottom: 8px;
    display: grid;
    grid-template-columns: 70px 70px 70px 145px auto;
    gap: 10px;
    align-items: center;
    justify-content: start;
    background: var(--bg-card-alt);
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-default);
}

/* Маленькие поля ввода */
.input-sm {
    width: 70px; 
    padding: 6px; 
    border: 1px solid var(--border-input); 
    border-radius: 4px;
    text-align: center;
}

/* ── sec-settings ───────────────────────────────────────────────────────── */

/* Подсказка над формой */
.settings-hint {
    color: var(--text-hint);
    font-size: 0.9em;
    margin-bottom: 15px;
}

/* Строка Max HR */
.max-hr-row {
    background: var(--color-accent-bg-alt);
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid var(--color-accent-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Левая часть: лейбл + поле */
.max-hr-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.max-hr-label {
    font-weight: 500;
    color: var(--color-hr-label);
    margin: 0;
}

.max-hr-input {
    width: 70px;
    padding: 5px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
}

.max-hr-hint {
    color: var(--color-hr-hint);
    font-size: 0.85em;
}

/* select внутри строки структуры */
.input-sm[type="select"],
select.input-sm {
    text-align: left;
    width: 145px;
}

/* select в строке этапа — заполняет grid-ячейку целиком */
.input-row select.input-sm {
    width: 100%;
}

/* ── wh-toggle-wrapper: тоггл + динамическая подсказка ──────────────────── */
.wh-toggle-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.wh-toggle-hint {
    font-size: 0.82em;
    font-weight: 600;
    color: var(--color-toggle-on);
    padding-left: 2px;
    transition: color 0.25s;
    white-space: nowrap;
}

/* ── struct-col-headers: заголовки колонок structure editor ─────────────── */
.struct-col-headers {
    display: grid;
    grid-template-columns: 70px 70px 70px 145px auto;
    gap: 10px;
    align-items: center;
    justify-content: start;
    padding: 2px 10px 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-strong);
}

.struct-col-headers span {
    font-size: 0.76em;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── struct-example: collapsible пример ─────────────────────────────────── */
.struct-example {
    margin-bottom: 18px;
    border: 1px solid var(--struct-border);
    border-radius: 8px;
    background: var(--struct-bg);
}

.struct-example-summary {
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.87em;
    color: var(--struct-text);
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.struct-example-summary::-webkit-details-marker { display: none; }
.struct-example-summary::marker { display: none; }

.struct-example-summary::before {
    content: '▶';
    font-size: 0.65em;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.struct-example[open] .struct-example-summary::before {
    transform: rotate(90deg);
}

.struct-example-body {
    padding: 10px 14px 14px;
    border-top: 1px solid var(--struct-border);
}

.struct-example-table {
    font-size: 0.85em;
}

.struct-ex-row {
    display: grid;
    grid-template-columns: 70px 80px 100px 1fr;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-cool);
}

.struct-ex-row:last-child {
    border-bottom: none;
}

.struct-ex-header {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 6px;
}

/* Нижняя панель кнопок в настройках */
.form-actions {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 15px;
    border-top: 1px solid var(--border-default);
}

.form-actions-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Кнопка «Пересчитать» — loading state ───────────────────────────────── */
#recalcBtn:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

/* Спиннер внутри кнопки */
.recalc-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: recalc-spin 0.65s linear infinite;
    vertical-align: middle;
    margin-right: 2px;
}

@keyframes recalc-spin {
    to { transform: rotate(360deg); }
}

/* Badge «✓ Обновлено» */
.recalc-badge {
    font-size: 0.82em;
    color: var(--color-teal);
    font-weight: 600;
    animation: recalc-fadein 0.25s ease;
}

@keyframes recalc-fadein {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------- */

/* Графики */
canvas { max-height: 400px; }

.chart-legend {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 0.9em;
    flex-wrap: wrap;
}

.legend-item { 
    display: flex; 
    align-items: center; 
}

.legend-color {
    display: inline-block; /* <--- ВАЖНО: Делает элемент блочным, чтобы работали размеры */
    width: 15px;           /* Чуть увеличим для заметности */
    height: 15px;
    margin-right: 6px;
    border-radius: 3px;
    flex-shrink: 0;        /* Запрещаем сжиматься, если места мало */
}
/* Линия пульса в легенде */
.legend-color--hr {
    height: 3px;
    width: 16px;
    border-radius: 0;
    margin-top: 6px;
    background: var(--text-body);
}
.legend-item--hr { align-items: center; margin-left: 15px; }

/* Контейнер для таблицы (чтобы на мобильных можно было скроллить) */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    border-radius: 0 0 10px 10px; /* Скругление снизу как у карточки */
}

/* Сама таблица */
.report-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    min-width: 600px; /* Чтобы не сплющивалась слишком сильно */
}

/* Заголовки и ячейки */
.report-table th, .report-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap; /* Текст не будет переноситься и ломать строки */
}

/* Заголовок таблицы */
.report-table th {
    background-color: var(--color-gray-dark);
    color: white;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 600;
    border-top: none;
}

/* Чередование цветов строк (зебра) */
.report-table tr:nth-child(even) { 
    background-color: var(--bg-card-alt); 
}

/* Эффект наведения */
.report-table tr:hover { 
    background-color: var(--nav-border); 
}

/* Итоговая строка (футер таблицы) */
.summary-row { 
    background-color: var(--color-gray-dark) !important; 
    color: #fff !important; 
    font-weight: bold; 
}

/* Цвета типов тренировок */
.type-run { color: var(--color-success); font-weight: bold; }
.type-rest { color: var(--color-gray-mid); font-style: italic; }
.type-warmup { color: var(--color-orange); font-weight: bold; }
.type-cooldown { color: var(--btn-primary-bg); font-weight: bold; }

/* ══════════════════════════════════════════════════════════════════
   sec-laps: легенда recovery-метрик
   ══════════════════════════════════════════════════════════════════ */

/* Контейнер легенды над таблицей */
.rec-legend {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

/* Колонка легенды (ΔHR / Rec% / Формула) */
.rec-legend-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rec-legend-col--formula { max-width: 260px; }

/* Заголовок колонки */
.rec-legend-title {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

/* Строка с пунктами легенды */
.rec-legend-items {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Один пункт легенды */
.rec-item { font-size: 0.82em; }

/* Вертикальный разделитель между колонками */
.rec-legend-divider {
    width: 1px;
    background: var(--border-strong);
    align-self: stretch;
    margin: 0 4px;
}

/* Текст формулы */
.rec-legend-formula {
    font-size: 0.8em;
    color: var(--text-hint);
    line-height: 1.4;
}

/* Итоговая ячейка среднего Rec% */
.rec-summary-avg {
    color: var(--text-subtle);
    font-size: 0.85em;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   Семантические цветовые утилиты (recovery, зоны, статусы)
   ══════════════════════════════════════════════════════════════════ */
.text-good      { color: var(--color-success-alt); font-weight: 600; }
.text-warn      { color: var(--color-warning-alt); font-weight: 600; }
.text-bad       { color: var(--color-danger-alt); font-weight: 600; }
.text-neutral   { color: var(--text-subtle);    font-weight: 600; }
.text-dim       { color: var(--border-input); }
.text-secondary { color: var(--text-placeholder); }

/* ══════════════════════════════════════════════════════════════════
   sec-drift: Aerobic Decoupling layout
   (переиспользует: trimp-layout, trimp-score-value, trimp-score-label,
    progress-track, progress-fill, text-good/warn/bad, card-empty)
   ══════════════════════════════════════════════════════════════════ */

.drift-score-block { text-align: center; }

.drift-detail {
    flex: 1;
    min-width: 220px;
}

/* Заголовок уровня дрейфа (font-weight: 500, чуть легче trimp) */
.drift-level-title {
    font-size: 1.05em;
    font-weight: 500;
    margin-bottom: 8px;
    /* color задаётся inline: {{ dc_color }} */
}

/* Подсказка «Как читать» */
.drift-hint {
    font-size: 0.82em;
    color: var(--text-hint);
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════
   sec-trimp: Training Load layout
   ══════════════════════════════════════════════════════════════════ */

.trimp-layout {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* Блок с большим числом TRIMP */
.trimp-score-block {
    text-align: center;
    min-width: 110px;
}
.trimp-score-value {
    font-size: 2.8em;
    font-weight: 700;
    line-height: 1;
    /* color задаётся inline: {{ trimp_color }} */
}
.trimp-score-label {
    font-size: 0.8em;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Правая часть: уровень, прогресс-бар, описание, зоны */
.trimp-detail {
    flex: 1;
    min-width: 240px;
}
.trimp-level-title {
    font-size: 1.05em;
    font-weight: 600;
    margin-bottom: 8px;
    /* color задаётся inline: {{ trimp_color }} */
}

/* Прогресс-бар (переиспользуется в sec-drift) */
.progress-track {
    background: var(--badge-unk-bg);
    border-radius: 8px;
    height: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}
.progress-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.4s;
    /* width и background задаются inline (динамические) */
}

.trimp-level-desc {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

/* Строка бейджей зон */
.trimp-zones {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.trimp-zone-badge {
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.82em;
    color: var(--text-body);
    /* background и border задаются inline (цвет зоны динамический) */
}
.trimp-zone-label {
    font-weight: 600;
    /* color задаётся inline (цвет зоны динамический) */
}

/* Справочная колонка (метод Edwards) */
.trimp-formula {
    font-size: 0.78em;
    color: var(--text-muted);
    line-height: 1.6;
    min-width: 180px;
    max-width: 220px;
}

/* Утилита для высокой нагрузки (TRIMP 100–150) */
.text-high { color: var(--color-warning); }

/* Пустое состояние карточки */
.card-empty {
    color: var(--text-subtle);
    font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════
   Modal: AI Промпт (#promptModal)
   Единственный inline что остаётся — style="display:none" (JS toggle)
   ══════════════════════════════════════════════════════════════════ */

/* Затемнённый оверлей */
.pm-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

/* Диалоговое окно */
.pm-dialog {
    background: var(--bg-card);
    width: 90%;
    max-width: 850px;
    height: 80vh;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Полноэкранный вариант (вкладки) */
.pm-dialog--fullscreen {
    width: 95vw;
    max-width: 1100px;
    height: 92vh;
}

/* Шапка */
.pm-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-default);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card-alt);
    flex-shrink: 0;
}
.pm-title {
    margin: 0;
    color: var(--text-body);
}
.pm-subtitle {
    margin: 4px 0 0;
    font-size: 0.84em;
    color: var(--text-hint);
}

/* Кнопка закрытия × */
.pm-close {
    background: none;
    border: none;
    font-size: 2em;
    line-height: 1;
    color: var(--text-subtle);
    cursor: pointer;
    padding: 0;
}
.pm-close:hover { color: var(--text-secondary); }

/* ── Вкладки ── */
.pm-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-cool);
    background: var(--bg-card);
    flex-shrink: 0;
}

.pm-tab {
    flex: 1;
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 0.95em;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s;
}
.pm-tab:hover { color: var(--color-accent); }
.pm-tab--active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* ── Панели вкладок ── */
.pm-tab-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    padding: 16px 20px 0;
    overflow: hidden;
    min-height: 0;
}
.pm-tab-panel--active {
    display: flex;
}

/* Баннер-инструкция */
.pm-instruction {
    margin-bottom: 10px;
    font-size: 0.88em;
    color: var(--text-secondary);
    background: var(--color-accent-bg-deep);
    border: 1px solid var(--color-purple-border);
    padding: 10px 14px;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Текстовое поле промпта — базовое */
.pm-textarea {
    flex: 1;
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border-divider);
    border-radius: 8px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.93em;
    line-height: 1.55;
    resize: none;
    background: var(--bg-subtle);
    color: var(--text-primary);
    box-sizing: border-box;
    min-height: 0;
}

/* Высокое поле — заполняет всю панель */
.pm-textarea--tall {
    flex: 1;
    min-height: 0;
}

/* Подвал панели */
.pm-panel-footer {
    flex-shrink: 0;
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Подвал модала */
.pm-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-default);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: var(--bg-card);
    flex-shrink: 0;
}
.pm-footer .btn  { width: auto; }
.pm-copy-btn     { min-width: 150px; }

/* ── Единая система кнопок модала ────────────────────────────────────────── */
.pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s, transform 0.1s, background 0.15s;
    white-space: nowrap;
}
.pm-btn:hover  { opacity: 0.88; transform: translateY(-1px); }
.pm-btn:active { transform: translateY(0); }
.pm-btn:disabled { opacity: 0.55; cursor: default; transform: none; }

/* Основная — градиент (копировать) */
.pm-btn--primary {
    background: linear-gradient(135deg, var(--color-accent), var(--color-purple));
    color: #fff;
}

/* Двухстрочная кнопка */
.pm-btn--two-line {
    height: auto;
    padding: 8px 20px;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
}

.pm-btn-main {
    font-size: 0.92em;
    font-weight: 700;
}

.pm-btn-sub {
    font-size: 0.75em;
    font-weight: 400;
    opacity: 0.85;
}

/* Успех — зелёная (сохранить) */
.pm-btn--success {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-hover));
    color: #fff;
}

/* Ghost — прозрачная с рамкой (только скопировать) */
.pm-btn--ghost {
    background: transparent;
    border: 1.5px solid var(--border-blue-gray);
    color: var(--text-secondary);
}
.pm-btn--ghost:hover { background: var(--bg-hover); opacity: 1; }

/* Закрыть — нейтральная серая */
.pm-btn--close {
    background: transparent;
    border: 1.5px solid var(--border-input);
    color: var(--text-hint);
}
.pm-btn--close:hover { background: var(--bg-gray); opacity: 1; }

/* Состояние «Скопировано» */
.pm-btn--copied {
    background: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: #fff !important;
    opacity: 1 !important;
}

.pm-save-feedback {
    font-size: 0.9em;
    color: var(--color-success);
    font-weight: 500;
}

.pm-save-hint {
    font-size: 0.85em;
    color: var(--text-muted);
}

.pm-textarea--readonly {
    background: var(--bg-card-alt);
    cursor: default;
}

/* ── Модал просмотра AI-резюме ───────────────────────────────────────────── */
.pm-dialog--summary {
    width: 80vw;
    max-width: 900px;
    height: 80vh;
}

/* Тело с прокруткой — заполняет всё пространство между шапкой и подвалом */
.pm-body--scroll {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    min-height: 0;
}

/* Текст резюме — читаемый, не как поле ввода */
.summary-text {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 0.94em;
    line-height: 1.7;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Подвал с разделителем и тенью */
.pm-footer--summary {
    border-top: 2px solid var(--border-default);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    padding: 14px 24px;
    justify-content: flex-end;
}

.btn-outline-secondary {
    background: none;
    border: 1px solid var(--color-gray-muted);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-outline-secondary:hover { background: var(--bg-light-gray); }

/* Кнопки экспорта в hero-блоке */
.btn-export {
    border: none;
    border-radius: 7px;
    padding: 5px 16px;
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    color: #fff;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
}
.btn-export:hover  { opacity: 0.88; transform: translateY(-1px); }
.btn-export:active { transform: translateY(0); }

.btn-export--cadence {
    background: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
}
.btn-export--laps {
    background: linear-gradient(135deg, var(--color-purple-alt), var(--color-purple-dark));
}

/* Индикатор AI-резюме в таблице истории */
.ai-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.85em;
    margin-left: 4px;
    opacity: 0.75;
    vertical-align: middle;
    pointer-events: none;   /* только индикатор, не кнопка */
}

/* Кнопка «🤖 Резюме» в колонке действий */
.history-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--color-success-dark);
    color: var(--color-success-dark);
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 0.85em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.history-ai-btn:hover { background: var(--color-success-dark); color: #fff; }

/* ── AI Steps Card (#sec-ai) ─────────────────────────────────────────────── */
.ai-steps {
    display: flex;
    align-items: stretch;   /* все блоки одной высоты */
    gap: 0;
    flex-wrap: wrap;
}

.ai-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
    min-width: 200px;
    padding: 16px;
    background: var(--bg-ai-step);
    border: 1px solid var(--color-accent-border3);
    border-radius: 10px;
}

.ai-step-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1em;
}

.ai-step-content {
    flex: 1;
    min-width: 0;          /* flex-потомок не выходит за границы карточки */
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* кнопка/статус прижимается к низу */
    justify-content: space-between;
}

.ai-step-title {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--text-primary);
}

.ai-step-desc {
    font-size: 0.84em;
    color: var(--text-hint);
    line-height: 1.45;
}

.btn-ai-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--color-accent), var(--color-purple));
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 0.92em;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    margin-top: 6px;
    font-family: inherit;
}
.btn-ai-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-ai-primary:active { transform: translateY(0); }

.ai-step-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.ai-logo-chip {
    background: var(--bg-card);
    border: 1px solid var(--color-accent-border2);
    color: var(--color-accent);
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 0.78em;
    font-weight: 600;
}

.ai-status {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.84em;
    font-weight: 500;
}

.ai-status--saved {
    background: var(--color-success-bg-alt);
    border: 1px solid var(--color-success-border);
    color: var(--color-success-dark);
}

.ai-status--pending {
    background: var(--color-warning-bg-alt);
    border: 1px solid var(--color-warning-pending-border);
    color: var(--color-warning-text);
}

.ai-status--login {
    background: var(--color-purple-bg);
    border: 1px solid var(--color-purple-border);
    color: var(--color-purple-deep);
}

/* Строка 1: иконка + заголовок */
.ai-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 1em;
}

.ai-status-icon {
    font-size: 1.05em;
    flex-shrink: 0;
}

.ai-status-label {
    white-space: normal;   /* длинный текст переносится, не выходит за карточку */
    word-break: break-word;
}

/* Строка 2: дата */
.ai-status-date {
    font-size: 0.88em;
    font-weight: 400;
    color: var(--color-success-muted);
    padding-left: 2px;
}

/* Строка 3: кнопка */
.ai-status-action {
    margin-top: 2px;
}

.ai-view-btn {
    display: inline-block;
    white-space: nowrap;
    background: var(--bg-card);
    border: 1.5px solid var(--color-success-dark);
    color: var(--color-success-deep);
    border-radius: 6px;
    padding: 4px 14px;
    font-size: 0.82em;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 3px rgba(46,125,50,0.15);
}
.ai-view-btn:hover {
    background: var(--color-success-bg);
    box-shadow: 0 2px 6px rgba(46,125,50,0.25);
}

.btn-sm {
    padding: 3px 10px;
    font-size: 0.8em;
}

.btn-outline {
    background: none;
    border: 1px solid currentColor;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.btn-outline:hover {
    background: rgba(0,0,0,0.06);
}

.ai-step-arrow {
    flex-shrink: 0;
    align-self: center;
    font-size: 1.3em;
    color: var(--color-arrow);
    padding: 0 8px;
}

/* Адаптив: на мобильных */
@media (max-width: 700px) {
    .ai-step-arrow     { display: none; }
    .ai-step           { min-width: 100%; }
    .pm-dialog--fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
    .pm-tab            { padding: 10px 8px; font-size: 0.85em; }
}

/* ── Skeleton / Chart Loaders ────────────────────────────────────────────── */
@keyframes chart-shimmer {
    0%   { background-position: -800px 0; }
    100% { background-position:  800px 0; }
}

.chart-loader {
    width: 100%;
    min-height: 300px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-skeleton);
}

.chart-loader-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    min-height: unset;
    border-radius: 0;
    z-index: 10;
}

.chart-loader-bar {
    width: 100%;
    height: 100%;
    min-height: inherit;
    background: linear-gradient(
        90deg,
        var(--bg-skeleton)  0%,
        var(--shimmer-mid) 35%,
        var(--shimmer-peak) 50%,
        var(--shimmer-mid) 65%,
        var(--bg-skeleton) 100%
    );
    background-size: 800px 100%;
    animation: chart-shimmer 1.4s ease-in-out infinite;
}
/* ─────────────────────────────────────────────────────────────────────────── */

.footer {
    margin-top: 40px;
    padding-bottom: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9em;
}

/* --- Drag & Drop Загрузка --- */
.upload-card {
    text-align: center;
    padding: 0; /* Убираем стандартные отступы, чтобы зона была во всю ширину */
    overflow: hidden;
}

#drop-area {
    border: 2px dashed var(--border-input);
    border-radius: 10px;
    padding: 40px 20px;
    background-color: var(--bg-subtle);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

/* Состояние, когда файл перетаскивают над зоной */
#drop-area.highlight {
    border-color: var(--color-purple-badge); /* Фиолетовый акцент */
    background-color: var(--bg-light-blue);
    transform: scale(1.01); /* Легкое увеличение */
}

.upload-icon {
    font-size: 48px;
    margin-bottom: 10px;
    opacity: 0.5;
}

.upload-text {
    font-size: 1.1em;
    color: var(--text-hint);
    margin-bottom: 15px;
}

/* Скрываем стандартный инпут, но оставляем его функциональным */
#fileElem {
    display: none;
}
/* ── Скелетон-лоадер для графиков (пока fetch не завершился) ── */
.chart-loader {
    width: 100%;
    height: 200px;
    background: var(--bg-skeleton);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.chart-loader-bar {
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
    0%   { left: -100%; }
    100% { left: 150%; }
}

/* Оверлей-вариант лоадера для div-контейнеров (ECharts, Leaflet).
   Рисуется поверх контейнера, не скрывая сам элемент —
   библиотеки должны видеть реальные размеры при инициализации. */
.chart-loader-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(240, 242, 245, 0.92);
    border-radius: 8px;
    z-index: 10;
    pointer-events: none;
}

/* ── Tooltip для R² в блоке Темпового прогрессирования ──────────────────── */
.r2-tooltip {
    position: relative;
    color: var(--text-placeholder);
    font-size: 0.9em;
    cursor: help;
    border-bottom: 1px dashed var(--border-input);
    display: inline-block;
}
.r2-tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-body);
    color: #fff;
    font-size: 0.82em;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 100;
}
.r2-tooltip:hover::after { opacity: 1; }

/* ── Мобильная адаптация формы структуры (< 768px) ──────────────────────── */
@media (max-width: 768px) {

    /* Строка этапа: 5-колоночная сетка start|end|dist|type|del */
    .input-row {
        grid-template-columns: 1fr 1fr 1fr 1.6fr auto;
        gap: 6px 8px;
        padding: 8px;
        justify-content: stretch;
    }

    /* Заголовки колонок на мобильном */
    .struct-col-headers {
        grid-template-columns: 1fr 1fr 1fr 1.6fr auto;
        gap: 6px 8px;
        padding: 2px 8px 6px;
        justify-content: stretch;
    }

    /* Поля ввода растягиваются на всю колонку */
    .input-sm {
        width: 100%;
        min-width: 48px;
        box-sizing: border-box;
    }

    /* Блок Max HR: уходим в колонку */
    .max-hr-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    /* Нижняя панель: кнопки переносятся */
    .form-actions-bottom {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .form-actions-bottom > div {
        flex-wrap: wrap;
        gap: 8px;
    }

    .form-actions-bottom .btn {
        flex: 1 1 calc(50% - 8px);
        min-width: 120px;
        text-align: center;
    }

    /* Кнопки +Этап / Пересчитать */
    .form-actions-left {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .form-actions-left .btn {
        flex: 1;
    }
}

/* ── Очень узкие экраны (< 480px): три ячейки + select/del на всю ширину ── */
@media (max-width: 480px) {

    .input-row {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .struct-col-headers {
        grid-template-columns: 1fr 1fr 1fr;
    }

    /* Последний заголовок (Тип + пустой) — скрываем */
    .struct-col-headers span:nth-child(4),
    .struct-col-headers span:nth-child(5) {
        display: none;
    }

    /* Селект типа и кнопка — на всю ширину */
    .input-row select.input-sm {
        grid-column: 1 / -1;
    }

    .input-row .btn-danger-outline {
        grid-column: 1 / -1;
        width: 100%;
        box-sizing: border-box;
    }

    /* Пример — таблица в 2 колонки на узких */
    .struct-ex-row {
        grid-template-columns: 55px 65px 1fr;
    }

    .struct-ex-row span:nth-child(3) {
        grid-column: 2 / -1;
    }

    .struct-ex-row span:nth-child(4) {
        grid-column: 1 / -1;
        color: var(--text-hint);
        font-style: italic;
    }
}

/* ══════════════════════════════════════════════════════════════════
   Навигационная панель
   ══════════════════════════════════════════════════════════════════ */
.topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    padding: 10px 20px;
    margin-bottom: 20px;
    gap: 12px;
}

.topnav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.1em;
    color: var(--text-body);
    text-decoration: none;
}
.topnav-brand:hover { color: var(--color-accent); }

.topnav-logo {
    width: 28px;
    height: 28px;
}

.topnav-links {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.topnav-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.92em;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.topnav-link:hover { background: var(--bg-hover); color: var(--color-accent); }

.topnav-link--accent {
    background: var(--color-accent);
    color: #fff !important;
}
.topnav-link--accent:hover { background: var(--color-accent-hover3); }

.topnav-link--garmin {
    color: var(--color-warning-border);
}
.topnav-link--garmin:hover { background: var(--color-warning-bg); color: var(--color-warning-dark); }

.topnav-link--admin {
    color: var(--color-purple);
    font-weight: 600;
}
.topnav-link--admin:hover { background: var(--sec-footer-bg-to); color: var(--color-purple-dark); }

.topnav-user {
    font-size: 0.88em;
    color: var(--text-muted);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topnav-logout {
    background: none;
    border: 1px solid var(--border-divider);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.88em;
    cursor: pointer;
    color: var(--text-hint);
    transition: background 0.15s, border-color 0.15s;
}
.topnav-logout:hover { background: var(--color-danger-bg-alt); border-color: var(--color-danger-alt); color: var(--color-danger-dark); }

/* ── Переключатель языка ─────────────────────────────────────────── */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-page);
    border-radius: 6px;
    padding: 2px 4px;
    font-size: 0.8em;
}
.lang-btn {
    color: var(--text-muted);
    text-decoration: none;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.03em;
}
.lang-btn:hover { color: var(--color-accent); }
.lang-btn--active {
    background: var(--bg-card);
    color: var(--text-body);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-weight: 700;
}
.lang-sep {
    color: var(--border-input);
    font-size: 0.9em;
    user-select: none;
}

/* ── Переключатель тёмной темы ───────────────────────────────────── */
.theme-toggle {
    background: none;
    border: 1px solid var(--border-divider);
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 1rem;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.theme-toggle:hover {
    background: var(--bg-hover);
    border-color: var(--color-accent);
    color: var(--text-body);
}

/* ── Пульсовые зоны — цвет-классы (для шаблонов и легенд) ───────── */
.zone-color-1 { background-color: var(--zone-1); }
.zone-color-2 { background-color: var(--zone-2); }
.zone-color-3 { background-color: var(--zone-3); }
.zone-color-4 { background-color: var(--zone-4); }
.zone-color-5 { background-color: var(--zone-5); }
.zone-text-1  { color: var(--zone-1); }
.zone-text-2  { color: var(--zone-2); }
.zone-text-3  { color: var(--zone-3); }
.zone-text-4  { color: var(--zone-4); }
.zone-text-5  { color: var(--zone-5); }
.zone-bg-1    { background-color: color-mix(in srgb, var(--zone-1) 12%, transparent);
                border: 1px solid color-mix(in srgb, var(--zone-1) 40%, transparent); }
.zone-bg-2    { background-color: color-mix(in srgb, var(--zone-2) 12%, transparent);
                border: 1px solid color-mix(in srgb, var(--zone-2) 40%, transparent); }
.zone-bg-3    { background-color: color-mix(in srgb, var(--zone-3) 12%, transparent);
                border: 1px solid color-mix(in srgb, var(--zone-3) 40%, transparent); }
.zone-bg-4    { background-color: color-mix(in srgb, var(--zone-4) 12%, transparent);
                border: 1px solid color-mix(in srgb, var(--zone-4) 40%, transparent); }
.zone-bg-5    { background-color: color-mix(in srgb, var(--zone-5) 12%, transparent);
                border: 1px solid color-mix(in srgb, var(--zone-5) 40%, transparent); }

/* ── Уровни нагрузки (TRIMP / дрейф) ────────────────────────────── */
.load-easy   { color: var(--load-easy)   !important; }
.load-ok     { color: var(--load-ok)     !important; }
.load-medium { color: var(--load-medium) !important; }
.load-high   { color: var(--load-high)   !important; }
.load-max    { color: var(--load-max)    !important; }
.dc-bad      { color: var(--dc-bad)      !important; }
.dc-ok       { color: var(--dc-ok)       !important; }
.dc-good     { color: var(--dc-good)     !important; }
.bg-load-easy   { background: var(--load-easy)   !important; }
.bg-load-ok     { background: var(--load-ok)     !important; }
.bg-load-medium { background: var(--load-medium) !important; }
.bg-load-high   { background: var(--load-high)   !important; }
.bg-load-max    { background: var(--load-max)    !important; }
.bg-dc-bad      { background: var(--dc-bad)      !important; }
.bg-dc-ok       { background: var(--dc-ok)       !important; }
.bg-dc-good     { background: var(--dc-good)     !important; }

/* ── Блок «Темповое прогрессирование» (JS-генерируется) ─────────── */
.pace-regression-box {
    padding: 10px 16px;
    background: var(--chart-bg);
    border-top: 1px solid var(--chart-tooltip-separator);
    font-size: 0.88em;
    color: var(--chart-tooltip-text);
    border-radius: 0 0 8px 8px;
}
.pace-progress-title {
    font-weight: 600;
    color: var(--chart-tooltip-muted);
    margin-bottom: 6px;
}
.pace-row-sep {
    border-bottom: 1px solid var(--chart-tooltip-separator);
}
.pace-dist-label {
    color: var(--chart-tooltip-muted);
    min-width: 70px;
    display: inline-block;
}
.pace-drift-bad  { color: var(--dc-bad);  font-weight: 700; }
.pace-drift-ok   { color: var(--dc-ok);   font-weight: 700; }
.pace-drift-good { color: var(--dc-good); font-weight: 700; }


/* ══════════════════════════════════════════════════════════════════
   Auth-формы (login / register)
   ══════════════════════════════════════════════════════════════════ */
.auth-container {
    display: flex;
    justify-content: center;
    padding: 40px 16px;
}

.auth-card {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    padding: 36px 40px;
    width: 100%;
    max-width: 420px;
}

.auth-title {
    margin: 0 0 24px;
    font-size: 1.5em;
    color: var(--text-body);
}

.auth-error {
    background: var(--color-danger-bg-alt);
    border: 1px solid var(--color-danger-border);
    border-radius: 6px;
    color: var(--color-danger-dark);
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 0.92em;
}

.auth-field {
    margin-bottom: 18px;
}
.auth-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--nav-link);
}
.auth-field input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-divider);
    border-radius: 7px;
    font-size: 0.95em;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.auth-field input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(74,154,245,0.15);
}

.auth-hint {
    font-weight: 400;
    color: var(--text-subtle);
    font-size: 0.85em;
}

.auth-btn {
    width: 100%;
    padding: 10px;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
    transition: background 0.15s;
}
.auth-btn:hover { background: var(--color-accent-hover3); }

.auth-alt {
    text-align: center;
    margin: 18px 0 0;
    font-size: 0.9em;
    color: var(--text-muted);
}
.auth-alt a { color: var(--color-accent); text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

/* «Забыли пароль?» — чуть мельче и ближе к форме */
.auth-alt--forgot {
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: 0.85em;
}

/* Синий информационный блок (Garmin: приватность, как работают токены) */
.auth-info {
    background: var(--color-info-bg);
    color: var(--color-accent-deep);
    border: 1px solid var(--range-track);
    border-left: 4px solid var(--color-accent);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 20px;
    font-size: 0.88rem;
    line-height: 1.6;
}
.auth-info strong { color: var(--color-accent-deep); }
.auth-info .auth-info-title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 4px;
    display: block;
}

/* Зелёный блок успеха (forgot_password: письмо отправлено) */
.auth-success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-bg);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-size: 0.93rem;
    line-height: 1.6;
}

/* Подсказка-текст под заголовком формы */
.auth-hint-text {
    color: var(--text-hint);
    font-size: 0.92rem;
    margin: 0 0 20px;
    line-height: 1.55;
}

/* Поле пароля с кнопкой «Показать» */
.auth-password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-password-wrapper input {
    flex: 1;
    padding-right: 80px; /* место под кнопку */
}
.auth-show-pw-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--color-accent);
    font-size: 0.82em;
    cursor: pointer;
    padding: 2px 4px;
    white-space: nowrap;
}
.auth-show-pw-btn:hover { color: var(--color-accent-hover3); }

/* Индикатор сложности пароля */
.pw-strength {
    margin-top: 7px;
    visibility: hidden;
}
.pw-strength-bar {
    height: 4px;
    background: var(--nav-border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}
.pw-strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width 0.25s, background 0.25s;
}
.pw-strength-text {
    font-size: 0.78em;
    font-weight: 600;
}

/* Flash-сообщения */
.flash-messages {
    margin: 10px 0 0;
}
.flash-msg {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.92em;
    margin-bottom: 8px;
}
.flash-success {
    background: var(--color-success-bg);
    color: var(--flash-success-text);
    border: 1px solid var(--flash-success-border);
}

/* ══════════════════════════════════════════════════════════════════
   История тренировок
   ══════════════════════════════════════════════════════════════════ */
.history-container {
    padding: 8px 0 40px;
}
.history-title {
    font-size: 1.4em;
    margin-bottom: 20px;
    color: var(--text-body);
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    font-size: 0.92em;
}
.history-table thead {
    background: var(--bg-hover);
    color: var(--text-secondary);
}
.history-table th, .history-table td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}
.history-table tbody tr:last-child td { border-bottom: none; }
.history-table tbody tr:hover { background: var(--table-row-hover); }

.history-filename { color: var(--nav-link); }
.history-filetype {
    display: inline-block;
    font-size: 0.75em;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 600;
    vertical-align: middle;
}
.history-filetype--tcx { background: var(--badge-tcx-bg); color: var(--badge-tcx-text); }
.history-filetype--fit { background: var(--badge-fit-bg); color: var(--badge-fit-text); }
.history-filetype--unknown { background: var(--badge-unk-bg); color: var(--text-muted); }

/* Toolbar: фильтры + счётчик */
.history-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.history-filters {
    display: flex;
    gap: 6px;
}
.history-filter-btn {
    background: none;
    border: 1px solid var(--border-filter);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.85em;
    color: var(--text-hint);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.history-filter-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.history-filter-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.history-count {
    font-size: 0.85em;
    color: var(--text-subtle);
    white-space: nowrap;
}

/* Сортируемые заголовки */
.history-th-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.history-th-sort:hover { color: var(--color-accent); }
.history-th-sort.sort-asc  .sort-arrow,
.history-th-sort.sort-desc .sort-arrow { color: var(--color-accent); }
.sort-arrow { font-size: 0.8em; margin-left: 3px; color: var(--upload-border); }
.history-th-actions { width: 1%; white-space: nowrap; }
.history-actions-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

/* Кнопка Открыть */
.history-reopen-btn {
    background: none;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.history-reopen-btn:hover { background: var(--color-accent); color: #fff; }

/* Истёкший файл */
.history-reopen-btn--expired {
    border-color: var(--border-input);
    color: var(--upload-border);
    cursor: default;
}
.history-reopen-btn--expired:hover { background: none; color: var(--upload-border); }

/* ── Спиннер внутри кнопки «Открыть» ────────────────────────────────────────  */
.history-reopen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.reopen-btn-spinner {
    display: none;
    width: 11px;
    height: 11px;
    border: 2px solid rgba(74, 154, 245, 0.35);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: reopen-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes reopen-spin {
    to { transform: rotate(360deg); }
}

.history-reopen-btn--loading {
    opacity: 0.75;
    pointer-events: none;
    min-width: 72px;
}

.history-reopen-btn--loading .reopen-btn-label {
    display: none;
}

.history-reopen-btn--loading .reopen-btn-spinner {
    display: inline-block;
}

/* Кнопка удаления */
.history-delete-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--border-input);
    border-radius: 5px;
    padding: 3px 7px;
    font-size: 0.8em;
    cursor: pointer;
    line-height: 1;
    transition: border-color 0.15s, color 0.15s;
}
.history-delete-btn:hover { border-color: var(--color-danger-alt); color: var(--color-danger-alt); }

.history-empty {
    color: var(--text-muted);
    font-size: 0.95em;
    padding: 20px 0;
}

/* ── Пагинация истории ───────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 24px 0 8px;
    flex-wrap: wrap;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border-cool);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-body);
    font-size: 0.9em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
}
.pagination-btn:hover {
    background: var(--color-accent-bg);
    border-color: var(--color-accent);
    color: var(--color-accent-hover2);
}
.pagination-btn--current {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    font-weight: 600;
    cursor: default;
}
.pagination-btn--current:hover {
    background: var(--color-accent);
    color: #fff;
}
.pagination-btn--disabled {
    color: var(--upload-border);
    border-color: var(--border-default);
    background: var(--bg-subtle);
    cursor: default;
}
.pagination-btn--disabled:hover {
    background: var(--bg-subtle);
    border-color: var(--border-default);
    color: var(--upload-border);
}
.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 36px;
    color: var(--text-placeholder);
    font-size: 0.9em;
    user-select: none;
}


/* ══════════════════════════════════════════════════════════════════
   Garmin-страницы
   ══════════════════════════════════════════════════════════════════ */
.garmin-container {
    padding: 8px 0 40px;
}
.garmin-title {
    font-size: 1.4em;
    margin-bottom: 6px;
    color: var(--text-body);
}
.garmin-subtitle {
    font-size: 0.9em;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.garmin-activities {
    display: grid;
    gap: 10px;
}
.garmin-activity-card {
    background: var(--bg-card);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.07);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
    border: 2px solid transparent;
}
.garmin-activity-card:hover { box-shadow: 0 4px 12px rgba(74,154,245,0.18); border-color: var(--color-accent); }

.garmin-activity-meta {
    display: flex;
    gap: 20px;
    font-size: 0.9em;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.garmin-activity-date { font-weight: 600; color: var(--text-body); }
.garmin-activity-name { color: var(--color-accent); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.garmin-import-btn {
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 7px 16px;
    font-size: 0.88em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.garmin-import-btn:hover { background: var(--color-accent-hover3); }

/* Кнопка входа в Garmin: состояние загрузки */
.auth-btn--loading {
    background: var(--color-accent-light) !important;
    cursor: default !important;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.auth-btn--loading::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: garmin-spin 0.75s linear infinite;
    flex-shrink: 0;
}
@keyframes garmin-spin {
    to { transform: rotate(360deg); }
}

/* Блок-подсказка под кнопкой во время авторизации */
.garmin-connecting-hint {
    display: none;
    background: var(--color-accent-bg);
    border: 1px solid var(--range-track);
    border-radius: 6px;
    padding: 10px 14px;
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--color-accent-deep);
    line-height: 1.55;
    text-align: center;
}
.garmin-connecting-hint.visible { display: block; }

/* Состояние загрузки */
.garmin-import-btn--loading {
    background: var(--color-accent-light);
    cursor: default;
    pointer-events: none;
}
.garmin-import-btn--loading:hover { background: var(--color-accent-light); }

/* Затемнение неактивных карточек */
.garmin-activity-card--muted {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* Строка статуса под кнопкой */
.garmin-import-status {
    margin-top: 6px;
    font-size: 0.8em;
    color: var(--color-accent-light);
    display: none;
}
.garmin-import-status.visible { display: block; }

.garmin-disconnect {
    margin-top: 24px;
}
.garmin-disconnect-btn {
    background: none;
    border: 1px solid var(--border-divider);
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 0.85em;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 0.15s;
}
.garmin-disconnect-btn:hover { background: var(--color-danger-bg-alt); color: var(--color-danger-dark); border-color: var(--color-danger-alt); }

.garmin-loading {
    color: var(--text-muted);
    font-size: 0.95em;
    padding: 30px 0;
}


/* ══════════════════════════════════════════════════════════════════
   Баннер ошибки загрузки
   ══════════════════════════════════════════════════════════════════ */
.upload-error-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border-lt);
    border-left: 4px solid var(--color-danger-alt);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
    font-size: 0.92em;
    color: var(--color-danger-text);
}
.upload-error-icon { font-size: 1.3em; flex-shrink: 0; }
.upload-error-hint { margin-top: 4px; color: var(--color-danger-text2); font-size: 0.9em; }


/* ══════════════════════════════════════════════════════════════════
   Welcome-hero: центрированный single-column layout
   ══════════════════════════════════════════════════════════════════ */

/* Внешний контейнер — центрирует всё по горизонтали */
.welcome-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 520px;
    margin: 0 auto 32px;
    width: 100%;
}

/* Бренд-блок: лого + заголовок + подзаголовок */
.welcome-brand {
    text-align: center;
    margin-bottom: 24px;
}

.welcome-logo-img {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: block;
}

.welcome-headline {
    font-size: 1.9em;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 10px;
    line-height: 1.2;
}

.welcome-sub {
    font-size: 0.97em;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Фичи: горизонтальная строка под Garmin-кнопкой */
.welcome-features {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
}
.welcome-features li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88em;
    color: var(--text-hint);
}
.wf-icon {
    font-size: 1em;
    flex-shrink: 0;
}

/* drop-зона занимает всю ширину контейнера */
.welcome-center .welcome-drop-zone {
    width: 100%;
    box-sizing: border-box;
}

/* wdz-divider и garmin-btn тоже на всю ширину */
.welcome-center .wdz-divider,
.welcome-center .garmin-hero-btn {
    width: 100%;
    box-sizing: border-box;
}


/* ── Onboarding-гайд ─────────────────────────────────────────────── */
.onboarding-guide {
    max-width: 720px;
    margin: 8px auto 32px;
    background: var(--bg-ai-step);
    border: 1px solid var(--color-accent-border3);
    border-radius: 14px;
    padding: 28px 32px 24px;
}

/* og-details: общая обёртка-details для гайда */
.og-details {
    /* без дополнительных стилей — padding берётся от .onboarding-guide */
}

/* Summary — заголовок гайда, работает как кнопка toggle */
.og-summary {
    display: block;
    list-style: none;
    font-size: 1em;
    font-weight: 600;
    color: var(--nav-link);
    cursor: pointer;
    user-select: none;
    text-align: center;
    letter-spacing: 0.01em;
    margin: 0 0 20px;
    padding: 4px 0;
    transition: color 0.15s;
}
.og-summary::-webkit-details-marker { display: none; }
.og-summary::marker { display: none; }
.og-summary:hover { color: var(--nav-link-active); }

/* Свёрнутый вариант: меньше отступов, нейтральный фон */
.onboarding-guide--collapsed {
    background: var(--bg-subtle);
    border-color: var(--border-blue-gray);
    padding: 14px 28px;
}
.onboarding-guide--collapsed .og-summary {
    margin-bottom: 0;
    font-size: 0.9em;
    color: var(--text-hint);
}
.onboarding-guide--collapsed .og-details[open] .og-summary {
    margin-bottom: 20px;
    color: var(--nav-link);
}

/* og-title больше не используется, оставлен для совместимости */
.og-title {
    font-size: 1em;
    font-weight: 600;
    color: var(--nav-link);
    margin: 0 0 20px;
    text-align: center;
    letter-spacing: 0.01em;
}

/* Три шага в ряд */
.og-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 20px;
}

.og-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 12px;
}

.og-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.8em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.og-step-icon {
    font-size: 1.8em;
    line-height: 1;
    margin-bottom: 8px;
}

.og-step-title {
    font-size: 0.88em;
    font-weight: 600;
    color: var(--text-body);
    margin: 0 0 6px;
}

.og-step-desc {
    font-size: 0.82em;
    color: var(--text-hint);
    line-height: 1.5;
    margin: 0;
}

.og-step-desc a {
    color: var(--color-accent);
    text-decoration: none;
}
.og-step-desc a:hover { text-decoration: underline; }

/* Стрелки между шагами */
.og-arrow {
    font-size: 1.2em;
    color: var(--upload-border);
    padding-top: 36px;    /* выравниваем по центру иконки */
    flex-shrink: 0;
    user-select: none;
}

/* Блок «Другие устройства» */
.og-other-devices {
    border-top: 1px solid var(--border-cool);
    padding-top: 16px;
    margin-top: 4px;
}

.og-other-summary {
    font-size: 0.85em;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.og-other-summary::-webkit-details-marker { display: none; }
.og-other-summary::before {
    content: '▸';
    font-size: 0.75em;
    transition: transform 0.2s;
    display: inline-block;
}
details[open] .og-other-summary::before { transform: rotate(90deg); }
.og-other-summary:hover { color: var(--text-secondary); }

.og-device-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.og-device-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.83em;
}

.og-device-name {
    font-weight: 600;
    color: var(--nav-link);
    min-width: 90px;
    flex-shrink: 0;
}

.og-device-desc {
    color: var(--text-hint);
    line-height: 1.4;
}

.og-device-desc a {
    color: var(--color-accent);
    text-decoration: none;
}
.og-device-desc a:hover { text-decoration: underline; }

/* Мобильный: шаги вертикально, стрелки поворачиваются */
@media (max-width: 600px) {
    .onboarding-guide { padding: 20px 16px; }
    .og-steps {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    .og-step { padding: 0; width: 100%; max-width: 280px; }
    .og-arrow { padding-top: 0; transform: rotate(90deg); }
}


/* Большая drag-and-drop зона */
.welcome-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 32px;
    border: 2.5px dashed var(--range-thumb);
    border-radius: 16px;
    background: var(--bg-ai-step);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    text-align: center;
    min-height: 240px;
    box-shadow: 0 2px 12px rgba(74, 154, 245, 0.10), 0 1px 4px rgba(0,0,0,0.04);
}
.welcome-drop-zone:hover,
.welcome-drop-zone.highlight {
    border-color: var(--color-accent);
    background: var(--color-accent-bg-deep);
    box-shadow: 0 0 0 4px rgba(74, 154, 245, 0.14), 0 4px 18px rgba(74, 154, 245, 0.14);
}

/* Анимация иконки — мягкий bounce при загрузке страницы */
@keyframes wdz-bounce {
    0%, 100% { transform: translateY(0); }
    40%       { transform: translateY(-8px); }
    60%       { transform: translateY(-4px); }
}

.wdz-icon {
    font-size: 2.8em;
    line-height: 1;
    display: inline-block;
    animation: wdz-bounce 2s ease-in-out 0.4s 2;
}

.wdz-title {
    font-size: 1em;
    font-weight: 600;
    color: var(--text-body);
    margin: 4px 0 0;
}

.wdz-hint {
    font-size: 0.85em;
    color: var(--text-subtle);
    margin: 0;
}

.wdz-btn {
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 28px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    font-family: inherit;
    margin-top: 4px;
}
.wdz-btn:hover  { background: var(--color-accent-hover3); }
.wdz-btn:active { transform: scale(0.97); }

.wdz-formats {
    font-size: 0.8em;
    color: var(--text-placeholder);
    margin: 4px 0 0;
    letter-spacing: 0.03em;
}

/* Делитель "или" */
.wdz-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--upload-border);
    font-size: 0.85em;
}
.wdz-divider::before,
.wdz-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-strong);
}
.wdz-divider span { flex-shrink: 0; }

/* Кнопка Garmin в hero */
.garmin-hero-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: var(--color-warning-border);
    color: #fff;
    border-radius: 10px;
    font-size: 0.95em;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
    box-sizing: border-box;
}
.garmin-hero-btn:hover  { background: var(--color-warning-dark); }
.garmin-hero-btn:active { transform: scale(0.98); }

.garmin-hero-btn--outline {
    background: transparent;
    color: var(--color-warning-border);
    border: 2px solid var(--color-warning-border);
}
.garmin-hero-btn--outline:hover {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
}

/* Маленькая drop-зона в шапке (когда файл загружен) */
.header-drop-area {
    padding: 5px 15px;
    border: 2px dashed var(--border-input);
    border-radius: 6px;
    cursor: pointer;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color 0.2s, background 0.2s;
}
.header-drop-area:hover,
.header-drop-area.highlight {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
}


/* ══════════════════════════════════════════════════════════════════
   Последние тренировки на welcome-экране
   ══════════════════════════════════════════════════════════════════ */
.welcome-recent {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    padding: 20px 24px;
    margin-bottom: 24px;
}

.welcome-recent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.welcome-recent-title {
    font-size: 1em;
    font-weight: 700;
    color: var(--text-body);
    margin: 0;
}
.welcome-recent-all {
    font-size: 0.85em;
    color: var(--color-accent);
    text-decoration: none;
}
.welcome-recent-all:hover { text-decoration: underline; }

.welcome-recent-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wrl-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bg-white-alt);
    border: 1px solid var(--border-light);
    transition: background 0.15s;
    flex-wrap: wrap;
}
.wrl-item:hover { background: var(--bg-hover); }

.wrl-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.wrl-date {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.wrl-name {
    font-size: 0.88em;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

.wrl-stats {
    display: grid;
    grid-template-columns: 72px 54px 90px;  /* дистанция | длительность | пульс */
    gap: 0 10px;
    font-size: 0.85em;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.wrl-stats span {
    text-align: right;
}
.wrl-stats span:empty { visibility: hidden; }

.wrl-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 150px;   /* резюме (~76px) + открыть (~66px) + gap */
    justify-content: flex-end;
}

.wrl-open-btn {
    background: none;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    border-radius: 5px;
    padding: 3px 12px;
    font-size: 0.82em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    font-family: inherit;
}
.wrl-open-btn:hover { background: var(--color-accent); color: #fff; }
/* Legacy-кнопка: файл хранится только ~24ч */
.wrl-open-btn--legacy {
    border-color: var(--color-gray-muted);
    color: var(--color-gray-mid);
}
.wrl-open-btn--legacy:hover { background: var(--color-gray-mid); color: #fff; border-color: var(--color-gray-mid); }