/* ============================================================
   Трансформация — стили приложения (index.html) и UI-kit (elements.html)
   Темизация через CSS-переменные: светлая тема в :root, тёмная — переопределения в [data-theme="dark"].
   Цвета — только токены, иконки — 14/16/18px, типографика — пять ролей (см. токены).
   ============================================================ */

/* ===== 1. Токены ===== */
:root{
  /* поверхности: от фона к границам */
  --bg:#f4f5fb;--surface:#ffffff;--surface-muted:#eef0f8;--border:#e6e9f4;--border-strong:#cbd1e6;
  /* текст: основной → вторичный → приглушённый (faint ≈4:1 на фоне — для микроподписей и плейсхолдеров) */
  --text:#12141f;--text-muted:#4a5069;--text-faint:#767d9c;
  /* акцент: спокойное индиго без фиолетового хвоста (сплошной, без градиента) */
  --accent:#4f46e5;
  /* приглушённый акцент — только заливка слайдера и кольцо ползунка: чистый светлый оттенок индиго, БЕЗ подмешивания серого */
  --accent-soft:#6d64e8;
  /* текст поверх акцента (кнопки, бейджи) */
  --on-accent:#ffffff;
  /* розовый — кнопка «Снять отметку» */
  --pink:#db2777;
  /* статусные заливки — яркие, для баров/диаграмм/чека (высокий разряд бара — сам акцент) */
  --fill-green:#10b981;--fill-amber:#f59e0b;--fill-red:#ef4444;
  /* статусный текст — единая палитра 5 категорий (статусы, дельты И чипы типов); светлые варианты ≥4:1 на белом */
  --text-ok:#047857;--text-warn:#b45309;--text-bad:#dc2626;--text-info:#1d4ed8;--text-neutral:#5b647a;
  /* фон выполненной строки (заголовок недели использует --border) */
  --row-done:color-mix(in srgb,var(--surface-muted) 55%,var(--surface));
  /* эффекты и размеры */
  --nav-h:56px;--thead-h:38px;--radius:14px;
  --shadow:0 1px 2px rgba(18,20,40,.04),0 6px 24px -8px rgba(18,20,40,.07);
  --shadow-lg:0 24px 70px -14px rgba(18,20,40,.35);
  /* мелкая тень активного сегмента (вкладки/тогглы) */
  --shadow-sm:0 1px 4px rgba(18,20,40,.10);
  /* кольцо фокуса инпутов */
  --ring:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);
  /* затемнение под попапом */
  --scrim:rgba(10,12,24,.5);
  /* типографика — пять ролей (размер/жирность), других сочетаний в стилях нет:
     подпись 10/600 прописные .08em · мелкий 11 (600 — чипы, бейджи, маленькие кнопки) ·
     текст 12 (500 — элементы управления, 600 — активные и акценты) · основной 13 (600 — заголовки, кнопки) ·
     значение 14/700, поле ввода 14. На телефоне таблицы и подписи на 1–2px мельче. */
  color-scheme:light;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a0c13;--surface:#131521;--surface-muted:#1b1e2e;--border:#242940;--border-strong:#363d5c;
  --text:#edeff8;--text-muted:#a7aec8;--text-faint:#79809f;
  --accent:#818cf8;
  /* приглушённый акцент — светлый оттенок тёмного индиго (раньше не переопределялся и «уплывал») */
  --accent-soft:#a5b0fc;
  --pink:#f472b6;
  --text-ok:#34d399;--text-warn:#fbbf24;--text-bad:#f87171;--text-info:#60a5fa;--text-neutral:#94a3b8;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 28px -8px rgba(0,0,0,.4);
  --shadow-lg:0 24px 70px -14px rgba(0,0,0,.7);
  --shadow-sm:0 1px 4px rgba(0,0,0,.4);
}
/* Плавный кроссфейд при смене темы (без поэлементного дёргания) */
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:ease}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ===== 2. База ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* место под полосу прокрутки всегда занято: на короткой странице (калькулятор) шапка не сдвигается */
html{scrollbar-gutter:stable}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:13px;line-height:1.5;min-height:100vh;overflow-x:auto;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 460px at 85% -10%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 65%),radial-gradient(700px 380px at -10% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 60%)}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}
/* рамка фокуса повторяет скругление самого элемента (не меняет его форму) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* в шапке — внутри кнопки: не налезает на соседние вкладки и не обрезается */
nav :focus-visible{outline-offset:-2px}
/* текст только для скринридеров */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* иконки Lucide (inline SVG, icons.js): 14px по умолчанию, 16px у самостоятельных кнопок, 18px в шапке */
.lic{width:14px;height:14px;display:inline-block;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
/* цвет текста по состоянию: лучше или по плану / отклонение / хуже / нет данных */
.is-ok{color:var(--text-ok)}
.is-warn{color:var(--text-warn)}
.is-bad{color:var(--text-bad)}
.is-empty{color:var(--text-faint)}

/* ===== 3. Шапка: меню по центру, кнопки справа ===== */
nav{display:flex;align-items:center;gap:10px;padding:0 20px;height:var(--nav-h);position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid var(--border);justify-content:space-between}
.nav-l,.nav-r{display:flex;gap:8px;align-items:center}
/* предупреждение «нет связи с сервером» — видно только при проблеме */
nav #sync-btn{color:var(--text-warn)}
#sync-btn[hidden]{display:none}
.tabs{display:flex;gap:4px;max-width:100%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.tab{display:inline-flex;flex-direction:column;align-items:center;font-size:12px;font-weight:500;color:var(--text-muted);padding:6px 9px;cursor:pointer;border:none;background:none;border-radius:8px;transition:color .15s,background .15s;white-space:nowrap;font-family:inherit}
/* ширина полужирной подписи зарезервирована заранее: активная вкладка не становится шире и меню не сдвигается */
.tab::after,.cm::after{content:attr(data-text);font-weight:600;height:0;overflow:hidden;visibility:hidden;pointer-events:none;user-select:none}
.tab:hover{background:var(--surface-muted);color:var(--text)}
.tab.on{color:var(--accent);font-weight:600;background:var(--surface-muted)}

/* ===== 4. Страницы ===== */
.page{display:none}.page.on{display:block;animation:pgin .25s ease}
@keyframes pgin{from{opacity:0;transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.page.on{animation:none}}
.wrap{max-width:1100px;margin:0 auto;padding:28px 20px 64px}
/* мотивационная картинка: фиксирована в правом нижнем углу (фон прозрачный, силуэт в акценте).
   pointer-events:none — не перехватывает клики */
.corner-hero{position:fixed;right:12px;bottom:10px;width:150px;max-width:32vw;height:auto;pointer-events:none;z-index:5;opacity:.7}
/* прячем, пока окно уже, чем «таблица (1060) + картинка (162) по бокам от центра» — иначе она наезжает на таблицу */
@media(max-width:1380px){.corner-hero{display:none}}

/* ===== 5. Кнопки и переключатели ===== */
.tbtn{display:inline-flex;align-items:center;background:var(--surface);border:1px solid var(--border-strong);border-radius:9px;color:var(--text-muted);font-size:12px;font-weight:500;padding:6px 13px;cursor:pointer;font-family:inherit;line-height:1.2;transition:border-color .15s,color .15s,background .15s}
.tbtn:hover{border-color:var(--accent);color:var(--accent)}
.tbtn .lic{margin-right:6px}
nav .tbtn{padding:6px 9px;border:none;background:none;border-radius:8px}
nav .tbtn:hover{background:var(--surface-muted);color:var(--text)}
nav .tbtn .lic{margin-right:0;width:18px;height:18px;vertical-align:-4px}
/* единые кнопки действий: первичная (сплошной акцент) и вторичная (заливная) — попап и калькулятор */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:600;font-family:inherit;line-height:1.2;cursor:pointer;transition:filter .15s,color .15s,background .15s,border-color .15s}
.btn-primary{background:var(--accent);color:var(--on-accent);border:none}
.btn-primary:hover{filter:brightness(1.07)}
.btn-secondary{background:var(--surface-muted);color:var(--text-muted);border:1px solid var(--border);font-weight:500}
.btn-secondary:hover{color:var(--text)}
/* сегментный переключатель: раскладка тренировки, единицы интервала, шаг разбивки; высота 24px — как у кнопок «+ Пробежка» и «+ Замер» рядом */
.unit{display:inline-flex;background:var(--surface-muted);border:1px solid var(--border);border-radius:7px;padding:2px;gap:2px;margin-left:8px;vertical-align:middle}
.ub{padding:2px 8px;border:none;background:none;color:var(--text-muted);border-radius:5px;cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;line-height:14px}
.ub.on{background:var(--surface);color:var(--accent)}
/* переключатель режимов калькулятора */
.calc-modes{display:inline-flex;gap:2px;background:var(--surface-muted);border:1px solid var(--border);padding:3px;border-radius:11px;margin:10px 0 18px}
.cm{display:inline-flex;flex-direction:column;align-items:center;font-size:12px;font-weight:500;color:var(--text-muted);padding:6px 14px;cursor:pointer;border:none;background:none;border-radius:8px;transition:color .15s,background .15s,box-shadow .15s;white-space:nowrap;font-family:inherit}
.cm.on{color:var(--accent);background:var(--surface);font-weight:600} /* как активный сегмент .ub.on и вкладки меню */

/* ===== 6. Строка-сводка и сводные карточки ===== */
/* карточка: подпись, значение (калькулятор) */
.sb{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.sv{font-size:14px;font-weight:700;margin-bottom:3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sl2{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint)}
/* строка-сводка над таблицами «Бега» и «Веса»: «значение · подпись» без фона; левый отступ = граница таблицы + паддинг «Недели» */
.stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 22px;margin:0 0 14px;padding:2px 2px 2px 15px}
.stats .sb{display:flex;align-items:baseline;gap:6px;background:none;border:none;border-radius:0;box-shadow:none;padding:0;cursor:default}
.stats .sv{margin-bottom:0}
/* подписи — в одну строку; значение и подпись разделяет только gap */
.stats .sl2{font-size:11px;font-weight:400;text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== 7. Таблицы «Бега» и «Веса» ===== */
.tbl-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:clip}
.tbl{width:100%;border-collapse:collapse}
.tbl thead th{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);padding:9px 12px;border-bottom:1px solid var(--border);background:var(--surface);white-space:nowrap;text-align:left;position:sticky;top:var(--nav-top,var(--nav-h));z-index:9}
.tbl thead th.c{text-align:center}
.tbl tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.tbl tbody tr:last-child{border-bottom:none}
.tbl tbody tr:hover{background:var(--surface-muted)}
.tbl tbody tr.sel{background:var(--surface-muted);border-bottom:none}
/* первая незакрытая тренировка: левая полоса + фон как у текущей недели в «Весе» (.wt-now) */
.tbl tbody tr.next-row{background:color-mix(in srgb,var(--accent) 9%,transparent);box-shadow:inset 3px 0 0 var(--accent)}
.tbl tbody tr.next-row:hover{background:color-mix(in srgb,var(--accent) 13%,transparent)}
.tbl tbody tr.done-row{background:var(--row-done)}
.tbl tbody tr.done-row td{color:var(--text-muted)}
.tbl tbody tr.done-row td.td-num{color:var(--text-faint)} /* № остаётся приглушённым и на выполненных строках */
.tbl tbody tr.done-row:hover{background:var(--surface-muted)}
/* пропущенная тренировка: как выполненная, но приглушённее */
.tbl tbody tr.skip-row{background:var(--row-done)}
.tbl tbody tr.skip-row td{color:var(--text-faint)}
.tbl tbody tr.skip-row:hover{background:var(--surface-muted)}
.tbl tbody tr.skip-row .chip,.tbl tbody tr.skip-row .minibar{opacity:.45}
.tbl tbody tr[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:0}
.tbl tbody tr.wkr{background:var(--border);cursor:default}
.tbl tbody td{padding:8px 12px;vertical-align:middle;white-space:nowrap}
.tbl tbody td.c{text-align:center}
.tbl tbody td.c-arrow{padding-right:16px}
/* заголовок недели прилипает к верху под шапкой таблицы; текст по вертикальному центру строки */
.tbl tbody td.wklbl{padding:10px 14px;vertical-align:middle;position:sticky;top:calc(var(--nav-top,var(--nav-h)) + var(--thead-h) - 2px);z-index:8;background:var(--border)}
.wklbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint)}
/* замер ширин столбцов (lockColumns): подстроки временно не участвуют */
.tbl-measure tr.sub-row,.tbl-measure tr.wt-sub{display:none!important}
/* стрелка раскрытия строки */
.ar{font-size:20px;font-weight:300;transition:transform .2s;display:inline-block;line-height:1;color:var(--text-faint)}
tr[aria-expanded="true"] .ar{transform:rotate(90deg)}
.ar .lic{width:16px;height:16px;vertical-align:-3px}
/* сообщение, если план не удалось построить */
.tbl tbody td.load-error{padding:24px;text-align:center;color:var(--text-faint);line-height:1.7;white-space:normal}

/* ===== 8. «Бег»: таблица плана ===== */
/* «+ Пробежка» и переключатель раскладки — у правого края шапки (в последнем столбце): абсолютные, поэтому не растят шапку и не влияют на ширину столбцов */
.tbl thead th.th-split{padding-right:16px}
.th-tools{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px}
.th-tools .unit{margin-left:0}
.th-tools .ub{padding:2px 9px}
.th-tools .th-add-btn{position:relative;right:auto;top:auto;transform:none}
/* кнопка «К следующей тренировке» в шапке */
.th-today{display:inline-flex;align-items:center;gap:5px}
.th-jump{border:none;background:none;color:var(--text-faint);cursor:pointer;padding:2px;border-radius:6px;display:inline-flex;align-items:center;transition:color .15s,background .15s}
.th-jump:hover{color:var(--accent);background:var(--surface-muted)}
/* ячейки строки тренировки */
.td-num{font-size:11px;font-weight:400;text-align:center;color:var(--text-faint)}
.td-date{font-size:12px;color:var(--text-muted)}
.td-pbar{font-size:12px}
.td-target{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.td-mut{color:var(--text-muted)}
.td-act{font-size:12px;font-variant-numeric:tabular-nums}
.act-ok{color:var(--text-ok);font-weight:600}
.act-check{color:var(--text-ok);font-weight:600;display:inline-flex}
.act-skip{color:var(--text-faint)}
.race-row{font-weight:500}
/* короткие/полные подписи (типы) и день недели в дате — переключаются медиа-запросами */
.t-short{display:none}
.dy-mob{color:var(--text-faint);font-weight:500} /* день недели как часть даты */
/* мини-бары (дистанция/скорость/темп): геометрия в CSS, цвет через --bar-c */
.minibar{margin-top:4px;height:4px;border-radius:99px;overflow:hidden;min-width:50px;background:color-mix(in srgb,var(--bar-c) 16%,transparent)}
.minibar>div{height:100%;border-radius:99px;background:var(--bar-c)}
/* раскрывающиеся подстроки — детальная раскладка тренировки */
.sub-row{display:none;background:var(--surface)}
.tbl tbody tr.sub-row td{font-size:11px;font-weight:400;white-space:nowrap;padding:4px 12px;border-bottom:1px solid var(--border);overflow:hidden;text-overflow:ellipsis}
.sr-seg{color:var(--text-faint)} /* № секции — справа от времени (столбец «Факт») */
.sr-dist{color:var(--text-faint)}
.sr-strong{color:var(--text)}
.sr-muted{color:var(--text-muted)}
/* секции структурированной тренировки: лёгкая часть, работа, отдых */
.tbl tbody tr.sub-row td.seg-easy{color:var(--text-muted)}
.tbl tbody tr.sub-row td.seg-work{color:var(--text);font-weight:600}
.tbl tbody tr.sub-row td.seg-rest{color:var(--text-faint)}
/* чипы типов тренировок */
.chip{font-size:11px;font-weight:600;display:inline-flex;align-items:center;padding:3px 11px;border-radius:999px;white-space:nowrap}
.chip-easy{color:var(--text-ok);background:color-mix(in srgb,var(--text-ok) 13%,transparent)}
.chip-tempo{color:var(--text-warn);background:color-mix(in srgb,var(--text-warn) 14%,transparent)}
.chip-int{color:var(--text-bad);background:color-mix(in srgb,var(--text-bad) 12%,transparent)}
.chip-long{color:var(--text-info);background:color-mix(in srgb,var(--text-info) 12%,transparent)}
.chip-rec{color:var(--text-neutral);background:color-mix(in srgb,var(--text-neutral) 12%,transparent)}
.chip-goal{color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent)} /* работа в целевом темпе старта */
.chip-test{color:var(--accent);background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)} /* контрольная прикидка */
.chip-race{color:var(--on-accent);background:var(--accent)} /* старт */
.chip-extra{color:var(--text-muted);background:transparent;box-shadow:inset 0 0 0 1px var(--border-strong)} /* пробежка вне плана */
/* отметка тренировки: выполнена / пропущена */
.chk-btn{width:23px;height:23px;border-radius:50%;border:1.5px solid var(--border-strong);background:var(--surface);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;color:transparent;padding:0;line-height:1}
.chk-btn:hover{border-color:var(--accent);color:var(--accent)}
.chk-btn .lic{stroke-width:2.6} /* отметки в кружке — толще обычных иконок */
.chk-btn.checked{background:color-mix(in srgb,var(--fill-green) 14%,transparent);border-color:transparent;color:var(--text-ok)}
.chk-btn.checked:hover{background:color-mix(in srgb,var(--fill-green) 20%,transparent);color:var(--text-ok)}
.chk-btn.skipped{background:color-mix(in srgb,var(--fill-red) 14%,transparent);border-color:transparent;color:var(--text-bad)}
.chk-btn.skipped:hover{background:color-mix(in srgb,var(--fill-red) 20%,transparent);color:var(--text-bad)}
/* бейдж «сегодня» (в столбце «Факт» вместо прочерка), дельта темпа, отметка др. дистанции */
.today-badge{font-size:11px;font-weight:600;display:inline-block;white-space:nowrap;color:var(--on-accent);background:var(--accent);padding:2px 7px;border-radius:999px}
.delta{font-size:11px;font-weight:400;margin-left:6px;font-variant-numeric:tabular-nums}
.dist-note{font-size:11px;font-weight:400;color:var(--text-faint);margin-left:5px}

/* ===== 9. «Вес» ===== */
.wtbl tbody td{padding:9px 12px;font-size:12px;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--border)}
/* hover наследуется от .tbl tbody tr:hover (таблица имеет класс «tbl wtbl») */
.wtbl tbody tr.wt-now{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.wtbl tbody tr.wt-now td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
/* кнопка «Замер» в шапке таблицы: абсолютная — не растит шапку, как переключатель раскладки у плана */
.wtbl thead th.th-add{text-align:right}
.th-add-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:4px;border:none;background:var(--accent);color:var(--on-accent);font:inherit;font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;line-height:1;height:24px;padding:0 10px 0 7px;border-radius:7px;cursor:pointer;transition:filter .15s}
.th-add-btn:hover{filter:brightness(1.07)}
.th-add-btn::before{content:'';position:absolute;inset:-9px -6px} /* зона нажатия больше самой кнопки — удобно пальцем */
.wtbl tbody tr{cursor:default}
.wtbl tbody tr.wt-has{cursor:pointer}
.wtbl td.c-arrow{text-align:right;padding-right:16px}
/* стрелка не раздувает строку: коробка ниже строки текста, иконка выступает — строки с замерами и без одной высоты */
.wtbl .ar{display:inline-flex;align-items:center;height:10px;vertical-align:middle}
/* замеры раскрытой недели — подстроки как у раскладки тренировки */
.wtbl tbody tr.wt-sub{background:var(--surface)}
.wtbl tbody tr.wt-sub:hover{background:var(--surface)}
.wtbl tbody tr.wt-sub td{font-size:11px;font-weight:400;padding:4px 12px;color:var(--text-muted)}
.wtbl tbody tr.wt-sub td.wt-sub-kg{color:var(--text)}
.wt-sub-mob{display:none}
.wt-del{background:none;border:none;color:var(--text-faint);cursor:pointer;padding:2px;margin:-4px 0;border-radius:6px;display:inline-flex;vertical-align:middle;line-height:1}
.wt-del:hover{color:var(--text-bad);background:color-mix(in srgb,var(--fill-red) 10%,transparent)}
.wt-delta{font-weight:600}
.wt-delta.under{color:var(--text-ok)}
.wt-delta.over{color:var(--text-warn)}

/* ===== 10. «Прогресс» ===== */
/* название слева, график справа — за счёт этого карточка ниже */
.chart-card{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 18px;margin-bottom:14px}
.chart-h{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;flex:0 0 92px;color:var(--text-muted);line-height:1.3}
.chart-svg{flex:1;min-width:0}
.chart-svg svg{display:block;width:100%;height:auto}
.chart-svg .cb{cursor:default}
.chart-sub{font-size:14px;font-weight:700;text-transform:none;letter-spacing:0;display:block;margin-top:3px;color:var(--text);font-variant-numeric:tabular-nums}

/* ===== 11. «Калькулятор» ===== */
/* две колонки: слева управление и сводка, справа таблица раскладки */
.calc-2col{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:18px;align-items:start}
.calc-l,.calc-r{min-width:0}
@media(max-width:900px){.calc-2col{grid-template-columns:1fr}}
/* редактор группы и форма «по цели» */
.blk{display:grid;grid-template-columns:1fr;gap:16px;max-width:520px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 20px 20px;margin-bottom:10px}
.blk-h{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-bottom:-4px}
.blk-t{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.blk-x{background:none;border:none;color:var(--text-faint);cursor:pointer;padding:3px;border-radius:6px;display:inline-flex;line-height:1}
.blk-x:hover{color:var(--text-bad);background:color-mix(in srgb,var(--fill-red) 10%,transparent)}
.blk-add{margin:4px 0 16px}
.blk-ft{grid-column:1/-1;display:flex;gap:10px;align-items:center;margin-top:2px}
.gc-form{margin-bottom:14px}
.gc-form>div+div{margin-top:13px}
/* слайдеры и поле времени */
.cl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:9px}
.cr{display:flex;align-items:center;gap:12px}
.cr input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:var(--border-strong);border-radius:99px;outline:none;cursor:pointer}
.cr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--surface);border:2px solid var(--accent-soft);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .12s}
.cr input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
[data-theme="dark"] .cr input[type=range]::-webkit-slider-thumb{background:var(--text)}
.cv{font-size:14px;font-weight:700;color:var(--accent);min-width:74px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.gc-tinp{width:108px;background:var(--bg);border:1px solid var(--border-strong);border-radius:9px;color:var(--text);font-family:inherit;font-size:14px;font-weight:400;padding:7px 10px;outline:none;font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s}
.gc-tinp:focus{border-color:var(--accent);box-shadow:var(--ring)}
/* строка добавленной группы */
.blkr{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:10px 14px;margin-bottom:8px;cursor:pointer;transition:border-color .15s}
.blkr:hover{border-color:var(--accent)}
.blkr-l{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}
.blkr-d{font-size:12px;color:var(--text-muted)}
.blkr-a{display:flex;gap:2px;flex-shrink:0}
/* сводные карточки */
.sg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.sg .sb{min-width:0}
@media(max-width:560px){.sg{grid-template-columns:1fr}}
.sl2-hdr{margin-bottom:8px} /* подпись-заголовок над мини-таблицей скорость/темп в сводных карточках */
.tr3{display:flex}
.ti3{flex:1;min-width:0}
.ti3+.ti3{border-left:1px solid var(--border);padding-left:10px;margin-left:10px}
.tv{font-size:14px;font-weight:700;margin-bottom:2px;font-variant-numeric:tabular-nums}
.tl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint)}
/* таблица раскладки: № приглушён, время — вторичным цветом, скорость выделена */
.ctbl{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.ctb{width:100%;border-collapse:collapse}
.ctb thead th{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);padding:8px 12px;border-bottom:1px solid var(--border);text-align:center;background:var(--surface-muted)}
.ctb thead th:nth-child(2){text-align:left}
.ctb tbody tr{border-bottom:1px solid var(--border)}
.ctb tbody tr:last-child{border-bottom:none}
.ctb tbody tr:hover{background:var(--surface-muted)}
.ctb tbody td{padding:8px 12px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}
.ctb tbody td:first-child{color:var(--text-faint)}
.ctb tbody td:nth-child(2){text-align:left;color:var(--text-muted)}
.ctb tbody td:nth-child(3){font-weight:600}
.ctb tbody td:nth-child(4){color:var(--text-muted)}
.ctb tbody tr.c-blkrow td{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;text-align:left;color:var(--text-faint);padding:9px 12px 5px;background:color-mix(in srgb,var(--surface-muted) 55%,var(--surface))}

/* ===== 12. Окна: отметка тренировки, пробежка вне плана, замер веса ===== */
.overlay{position:fixed;inset:0;z-index:300;align-items:center;justify-content:center;background:var(--scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.login-overlay{z-index:350} /* вход — поверх любого другого окна */
.popup-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:22px 40px;width:400px;max-width:92vw;box-shadow:var(--shadow-lg);animation:pop .2s cubic-bezier(.2,1.2,.3,1)}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.96)}}
@media(prefers-reduced-motion:reduce){.popup-card{animation:none}}
/* крестик закрытия в углу карточки */
.pp-close{position:absolute;top:12px;right:12px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;color:var(--text-faint);border-radius:9px;cursor:pointer;transition:color .15s,background .15s}
.pp-close:hover{background:var(--surface-muted);color:var(--text)}
.pp-close .lic{width:16px;height:16px}
/* контекст тренировки */
.pp-ctx{font-size:12px;color:var(--text-muted);line-height:1.45;margin-bottom:16px;padding-right:26px}
.pp-title{font-size:13px;font-weight:600;color:var(--text)}
/* поля: заголовок над полем */
.pp-row{display:flex;gap:10px}
.pp-field{margin-bottom:12px}
.pp-grow{flex:1}
.pp-num{width:130px}
.pp-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;display:block;color:var(--text-faint);margin-bottom:6px}
.pp-input{width:100%;height:38px;background:var(--bg);border:1px solid var(--border-strong);border-radius:10px;color:var(--text);font-family:inherit;font-size:14px;font-weight:400;padding:0 11px;outline:none;transition:border-color .15s,box-shadow .15s}
.pp-input:focus{border-color:var(--accent);box-shadow:var(--ring)}
.pp-input::placeholder{color:var(--text-faint)}
.pp-delta{font-size:11px;font-weight:400;min-height:15px;line-height:1.4;margin-bottom:10px}
.pp-err{color:var(--text-warn)}
.pp-actions{display:flex;gap:8px;margin-top:4px}
.pp-actions .btn{flex:1}
/* «Снять отметку» — тихая текстовая кнопка под основными */
.pp-unmark{display:block;margin:10px auto -6px;border:none;background:none;color:var(--pink);font:inherit;font-size:12px;font-weight:500;cursor:pointer;padding:5px 10px;border-radius:8px;transition:background .15s}
.pp-unmark:hover{background:color-mix(in srgb,var(--pink) 10%,transparent)}
/* строки «было → стало» под планом тренировки */
.pp-recalc{font-size:11px;font-weight:400;color:var(--text-faint);margin-top:2px}
/* усилие 1…10 */
.rpe-hint{text-transform:none;letter-spacing:0;font-weight:500;color:var(--text-muted)}
.rpe{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.rpe-b{height:30px;min-width:0;padding:0;border:1px solid var(--border-strong);background:var(--bg);color:var(--text-muted);border-radius:8px;font:inherit;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.rpe-b:hover{border-color:var(--accent);color:var(--text)}
.rpe-b.on{background:var(--accent);border-color:transparent;color:var(--on-accent)}

/* ===== 13. Календарь — порт Calendar из shadcn/ui ===== */
.dp{position:relative}
.dp-trigger{display:flex;align-items:center;gap:8px;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden}
.dp-trigger .lic{width:16px;height:16px;color:var(--text-faint)}
.dp-trigger:focus-visible,.dp-trigger[aria-expanded="true"]{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.dp-ph{color:var(--text-faint)}
.dp-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:20;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:12px;animation:dpin .12s ease}
@keyframes dpin{from{opacity:0;transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.dp-pop{animation:none}}
.cal{--cell:36px;width:calc(var(--cell) * 7)}
.cal-head{display:flex;align-items:center;justify-content:space-between;height:var(--cell)}
.cal-caption{font-size:13px;font-weight:600;color:var(--text);user-select:none}
.cal-nav{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;border-radius:8px;color:var(--text-muted);cursor:pointer;transition:background .15s,color .15s}
.cal-nav:hover{background:var(--surface-muted);color:var(--text)}
.cal-nav .lic{width:16px;height:16px}
.cal-grid{border-collapse:collapse;margin-top:8px}
.cal-grid th{font-size:12px;font-weight:400;width:var(--cell);height:28px;padding:0;color:var(--text-muted);text-align:center;user-select:none}
.cal-grid td{padding:0;text-align:center}
.cal-day{width:var(--cell);height:var(--cell);border:none;background:none;border-radius:8px;font:inherit;font-size:14px;color:var(--text);cursor:pointer;font-variant-numeric:tabular-nums;transition:background .12s}
.cal-day:hover{background:var(--surface-muted)}
.cal-day.outside{color:var(--text-faint)}
.cal-day.today{background:var(--surface-muted);font-weight:600}
.cal-day.selected,.cal-day.selected:hover{background:var(--accent);color:var(--on-accent);font-weight:500}
.cal-day:focus-visible,.cal-nav:focus-visible{outline:none;position:relative;z-index:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent)}
@media(max-width:360px){.cal{--cell:32px}}

/* ===== 14. Подсказка и уведомление ===== */
.tip{font-size:11px;font-weight:400;position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:7px 11px;line-height:1.5;pointer-events:none;opacity:0;transition:opacity .1s;z-index:200;white-space:pre;color:var(--text);box-shadow:var(--shadow-lg)}
.tip.on{opacity:1}
/* уведомление с отменой действия */
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,16px);display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px 10px 16px;font-size:12px;color:var(--text);box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:400}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast-btn{border:none;background:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:6px;white-space:nowrap}
.toast-btn:hover{background:var(--surface-muted)}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}

/* ===== 15. UI-kit (elements.html): токены, типографика, компоненты, иконки ===== */
.el-sec{margin-bottom:30px}
.el-h{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
/* таблица цветовых токенов */
.el-tbl{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.el-tbl th{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;text-align:left;color:var(--text-faint);padding:10px 14px;border-bottom:1px solid var(--border)}
.el-tbl td{padding:9px 14px;font-size:12px;border-bottom:1px solid var(--border);vertical-align:middle}
.el-tbl tbody tr:last-child td{border-bottom:none}
.el-grp-row td{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);background:var(--surface-muted);padding:7px 14px}
/* пара тема-колонок: образец цвета + значение — не зависят от текущей темы страницы */
.el-sw{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.el-chip{display:inline-block;width:34px;height:18px;border-radius:5px;border:1px solid color-mix(in srgb,var(--text) 16%,transparent)}
.el-ic-cell{width:72px;color:var(--text)}
.el-ic-cell .lic{width:16px;height:16px;vertical-align:middle}
.el-tok{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;color:var(--text);white-space:nowrap}
.el-desc{color:var(--text-muted);width:100%;min-width:360px}
.el-val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:400;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;min-width:0}
.el-font{font-size:12px;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:8px}
.el-type-row{display:flex;align-items:baseline;gap:18px;padding:11px 0;border-bottom:1px solid var(--border)}
.el-type-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);width:190px;flex-shrink:0}
/* компоненты — живые классы приложения в статичной раскладке (без абсолютного/фиксированного позиционирования) */
.el-demo{display:flex;align-items:center;gap:18px;padding:14px 0;border-bottom:1px solid var(--border)}
.el-demo-body{min-width:0;flex:1}
.el-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.el-demo .calc-modes{margin:0}
/* компоненты в витрине — в потоке, без абсолютного и фиксированного позиционирования */
.el-demo .th-add-btn,.el-demo .toast.on,.el-demo .dp-pop{position:static;transform:none}
.el-demo .dp-pop{display:inline-block;animation:none;box-shadow:var(--shadow)}
.el-demo .pp-unmark{margin:0}
.el-fields .pp-input{width:180px}
.el-rpe{max-width:320px}
@media(max-width:640px){.el-type-row,.el-demo{flex-direction:column;align-items:flex-start;gap:4px}.el-type-lbl{width:auto}}

/* ===== 16. Адаптив ===== */
/* узкий десктоп и планшет: кнопки шапки таблиц («+ Пробежка», раскладка, «+ Замер») рядом с подписями не помещаются —
   они стоят верхней строкой шапки справа, подписи столбцов под ними остаются видны */
@media(max-width:1060px){
  .tbl thead th{padding-top:36px}
  .th-tools,.th-add-btn{top:6px;transform:none}
}
/* планшет: компактная таблица — строки без переноса */
@media(max-width:1024px){
  :root{--thead-h:34px} /* шапка таблицы ниже на компактных экранах */
  nav{flex-wrap:wrap;height:auto;min-height:var(--nav-h);padding:8px 12px;gap:8px}
  .tab{padding:5px 11px}
  .wrap{padding:18px 12px 56px}
  .tbl-wrap{border-radius:10px}
  .tbl{table-layout:auto;width:100%;font-size:12px}
  .tbl colgroup{display:none}
  .tbl thead th{padding:36px 7px 7px}
  .tbl tbody td{padding:6px 7px;font-size:12px!important}
  .tbl tbody tr.sub-row td{padding:4px 7px} /* по бокам — как у обычных строк, иначе столбцы расширяются при раскрытии */
  .minibar{display:none}
  /* убираем избыточный столбец: Скорость(6) */
  .ptbl thead th:nth-child(6),.ptbl tbody td:nth-child(6){display:none}
  /* компактный «Факт» и короткие типы, чтобы таблица влезала по ширине */
  .t-full{display:none}.t-short{display:inline}
  .delta,.dist-note{display:none}
  .act-ok.act-warn{color:var(--text-warn)}
  .ctbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ctb{min-width:520px}
}
/* телефон: ещё компактнее, помещается по ширине */
@media(max-width:640px){
  :root{--nav-h:47px;--thead-h:32px} /* меню одной строкой; точную высоту шапки JS пишет в --nav-top */
  nav{padding:8px 10px;gap:6px;row-gap:6px;flex-wrap:wrap;justify-content:flex-start}
  .tabs{flex:1;min-width:0;position:static;transform:none;left:auto;top:auto;gap:2px}
  .tab{flex:1 1 auto;text-align:center;padding:6px 6px}
  /* предупреждение о связи — отдельной строкой под меню и только когда оно есть */
  .nav-l{display:none}
  .nav-l:has(#sync-btn:not([hidden])){display:flex;order:20;flex-basis:100%}
  .wrap{padding:14px 8px 48px}
  /* на телефоне сводка — две ровные колонки, чтобы пары (выполнено/пропущено) не разрывались переносом */
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding-left:7px}
  .stats .sb{min-width:0}
  .stats .sv{font-size:13px}
  .stats .sl2{font-size:10px}
  .chart-card{padding:13px}
  .tbl{font-size:10px}
  .tbl thead th{padding:34px 3px 6px;font-size:9px;letter-spacing:.04em}
  .tbl tbody td{padding:5px 3px;font-size:10px!important}
  .tbl tbody tr.sub-row td{padding:4px 3px}
  .dy-mob{display:none} /* прячем день недели на телефоне — освобождаем ширину столбцу «Факт» под бейдж «Сегодня» */
  .tbl tbody td.wklbl{padding:9px 6px}
  /* дополнительно скрываем #(2) и стрелку(10); у стрелки ячейка шапки остаётся нулевой ширины — в ней живёт переключатель раскладки */
  .ptbl thead th:nth-child(2),.ptbl tbody td:nth-child(2),.ptbl tbody td:nth-child(10){display:none}
  .ptbl thead th:nth-child(10){width:0;padding-left:0!important;padding-right:0!important}
  /* вес: без столбца дат — дата замера переезжает в первый столбец */
  .wtbl thead th:nth-child(2),.wtbl tbody td:nth-child(2){display:none}
  .wt-sub-mob{display:inline}
  .wtbl tbody tr.wt-sub td{padding:4px 3px}
  .today-badge{font-size:9px;padding:2px 5px} /* столбец «Факт» на телефоне узкий — бейдж на шаг мельче, как подписи */
  .chip{padding:2px 6px;font-size:10px}
  .chk-btn{width:18px;height:18px}
  .chk-btn .lic{width:12px;height:12px}
  .ar .lic{width:14px;height:14px}
}