/* ==========================================================================
   1. Токены
   Светлая приборная тема 1trAIner. Без внешних ресурсов.
   --orange — фирменный акцент, --accent-text — контрастный текст на светлом.
   ========================================================================== */

:root {
  color-scheme: light;
  --bg: #f7f7f5;
  --card: #ffffff;
  --text: #171717;
  --ink: var(--text);
  --muted: #62625e;
  --line: #d9d9d2;
  --control-line: #85857e;
  --soft: #efefe9;
  --orange: #fc4c02;
  --orange-dark: #d93f00;
  --accent-text: #ad3300;
  --accent-soft: #fff0e8;
  --success: #246239;
  --success-soft: #edf5ee;
  --warning: #805400;
  --warning-soft: #fff5df;
  --danger: #a52626;
  --danger-soft: #fff0ee;
  --info: #285a7b;
  --info-soft: #eef4f8;
  --focus: #171717;
  --radius: 6px;
  --shadow: none;
  --font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --page-width: 1140px;
  /* SPC-010: новые токены Sol (DESIGN-UX.md §6.1) для кабинета специалиста. */
  --specialist-nav-width: 216px;
  --touch-target-min: 48px;
  --reading-width: 760px;
  --status-icon-size: 20px;
  --sticky-action-gap: 16px;
}

/* IOS-DARK-1: тёмная тема только для приложения (embed, ?theme=dark → <html data-theme="dark">).
   Сайт и кабинет без data-theme (или с data-theme="light") не меняются. Контраст текста ≥ 4.5:1,
   контролов ≥ 3:1 на --card и --soft. Точечные правки компонентов — в конце файла. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111214;
  --card: #1b1c1f;
  --text: #ececea;
  --muted: #a3a39c;
  --line: #34363b;
  --control-line: #76787e;
  --soft: #24262a;
  --orange: #fc4c02;
  --orange-dark: #ff6a2b;
  --accent-text: #ff8a4c;
  --accent-soft: #3a2318;
  --success: #6fcf8e;
  --success-soft: #1a2b20;
  --warning: #e8b54a;
  --warning-soft: #322812;
  --danger: #ff8a80;
  --danger-soft: #3a1d1b;
  --info: #7fb6dc;
  --info-soft: #1a2833;
  --focus: #ececea;
  --border: #34363b;
}

/* ==========================================================================
   2. База, типографика, доступность
   ========================================================================== */

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

html {
  min-width: 320px;
  min-height: 100%;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  padding: 0 24px 48px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
input,
select,
textarea,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  cursor: pointer;
}

button,
a,
label {
  touch-action: manipulation;
}

button {
  white-space: normal;
}

a {
  color: var(--accent-text);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}

a:hover {
  text-decoration-thickness: 2px;
}

img {
  display: block;
  max-width: 100%;
}

svg {
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

h1 {
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -.045em;
}

h2 {
  font-size: clamp(24px, 2.7vw, 32px);
  letter-spacing: -.035em;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 17px;
}

p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

b,
strong {
  font-weight: 750;
}

small {
  font-size: 13px;
}

code,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

code {
  overflow-wrap: anywhere;
}

::selection {
  background: var(--orange);
  color: var(--text);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--text);
  outline-offset: 2px;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

button:disabled {
  color: var(--muted);
  background: var(--soft);
  border-color: var(--line);
  box-shadow: none;
}

input:disabled,
select:disabled,
textarea:disabled {
  color: var(--muted);
  background: var(--soft);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent-text);
}

/* Авторские display:grid/flex не должны раскрывать скрытые JS-панели. */
:root [hidden] {
  display: none;
}

/* ==========================================================================
   3. Слои и базовые контейнеры
   ========================================================================== */

#dashboard-root {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
}

.content-card {
  min-width: 0;
  min-height: 500px;
  padding: 28px 0 0;
  background: transparent;
}

.content-card > *,
.combined-layout > *,
.physical-layout > *,
.profile-grid > *,
.profile-section-workspace > *,
.billing-grid > *,
.plan-compact-grid > *,
.form-grid > *,
.metrics-grid > *,
.external-profile-grid > * {
  min-width: 0;
}

.combined-layout,
.profile-section-workspace,
.integrations-form,
.backlog-panel {
  display: grid;
  gap: var(--space-5);
}

.physical-layout,
.profile-grid,
.billing-grid,
.plan-compact-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.physical-layout > *,
.profile-grid > *,
.billing-grid > *,
.plan-compact-grid > * {
  grid-column: span 6;
}

.wide,
.profile-card.wide {
  grid-column: 1 / -1;
}

.sub-card,
.profile-card,
.markdown-card,
.plan-card,
.backlog-composer,
.backlog-list-card,
.chat-toolbar,
.integration-actions-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 20px;
}

.section-head > div:first-child {
  min-width: 0;
}

.section-head h2 {
  margin-bottom: 6px;
}

.section-head p {
  max-width: 72ch;
  font-size: 14px;
}

.section-head > button {
  flex-shrink: 0;
}

.strength-head,
.goal-races-head,
.markdown-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 16px;
}

.strength-head h3,
.goal-races-head h4 {
  margin: 0;
}

.profile-card > h3,
.backlog-composer > h2,
.backlog-list-card > h2 {
  margin-bottom: 12px;
}

/* ==========================================================================
   4. Компоненты: кнопки, иконки, статусы
   ========================================================================== */

.btn,
.mini-btn,
.plan-pay,
.avatar-upload-btn,
.external-profile-refresh,
.oc-copy,
.oc-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  max-width: 100%;
  padding: 8px 16px;
  border: 1px solid var(--control-line);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow-wrap: anywhere;
}

/* Первый уровень: фирменный оранжевый с контрастным чёрным текстом. */
.btn.primary,
.btn.btn-primary,
.plan-pay,
.oc-open {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--text);
}

/* Второй уровень — обычная .btn; третий — текстовая .ghost. */
.btn.ghost,
.oc-open.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--accent-text);
}

.btn.small,
.mini-btn,
.external-profile-refresh,
.avatar-upload-btn,
.oc-copy {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 13px;
}

.btn:hover:not(:disabled),
.mini-btn:hover:not(:disabled),
.avatar-upload-btn:hover,
.external-profile-refresh:hover:not(:disabled),
.oc-copy:hover:not(:disabled) {
  border-color: var(--text);
  background: var(--soft);
  color: var(--text);
}

.btn.primary:hover:not(:disabled),
.btn.btn-primary:hover:not(:disabled),
.plan-pay:hover:not(:disabled),
.oc-open:hover {
  border-color: var(--accent-text);
  background: var(--accent-soft);
  color: var(--accent-text);
  text-decoration: none;
}

.btn.ghost:hover:not(:disabled),
.oc-open.ghost:hover {
  border-color: var(--line);
  background: var(--soft);
}

.btn:disabled,
.mini-btn:disabled,
.plan-pay:disabled,
.external-profile-refresh:disabled,
.oc-copy:disabled {
  border-color: var(--line);
  background: var(--soft);
  color: var(--muted);
}

.mini-btn.danger {
  color: var(--danger);
}

.mini-btn.danger:hover:not(:disabled) {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}

.mini-btn.icon-only,
.plan-schedule-btn,
.plan-replan-btn,
.edit-activity-btn,
.file-activity-btn,
.delete-activity-btn,
.effort-btn,
.modal-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}

.mini-btn.icon-only svg,
.plan-schedule-btn svg,
.plan-replan-btn svg,
.edit-activity-btn svg,
.file-activity-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-btn.icon-only.active,
.plan-schedule-btn.active,
.plan-schedule-btn:hover:not(:disabled),
.plan-replan-btn:hover:not(:disabled),
.edit-activity-btn:hover:not(:disabled),
.file-activity-btn:hover:not(:disabled) {
  border-color: var(--accent-text);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.delete-activity-btn:hover:not(:disabled) {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}

.billing-inline-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--accent-text);
  font: inherit;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.read-only,
.plan-status,
.external-profile-status,
.billing-pill,
.email-status-badge,
.backlog-status,
.oc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.read-only {
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: .04em;
}

.billing-pill,
.email-status-badge.ok,
.oc-badge,
.backlog-status.done {
  color: var(--success);
  background: var(--success-soft);
  border-color: #b9cfbd;
}

.billing-pill.warn,
.email-status-badge,
.oc-badge.pending,
.backlog-status.waiting {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: #d8c698;
}

.backlog-status.new,
.backlog-status.triage {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: #e6bba7;
}

.backlog-status.planned,
.backlog-status.in_progress {
  color: var(--info);
  background: var(--info-soft);
  border-color: #bdceda;
}

.backlog-status.rejected,
.backlog-status.duplicate {
  color: var(--muted);
  background: var(--soft);
}

.muted,
.hint,
.secret-note {
  color: var(--muted);
}

.hint,
.secret-note {
  font-size: 13px;
  line-height: 1.55;
}

.profile-card .hint {
  margin: 8px 0 14px;
}

.profile-save-status,
.activity-edit-status,
.schedule-status,
.replan-status,
.year-goal-build-status,
.onboarding-status {
  min-width: 0;
  min-height: 20px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.profile-save-status:not(:empty),
.activity-edit-status:not(:empty),
.schedule-status:not(:empty),
.replan-status:not(:empty),
.onboarding-status:not(:empty) {
  padding: 8px 12px;
  border-left: 3px solid var(--control-line);
  background: var(--soft);
}

.profile-save-status.ok,
.replan-status.ok,
.year-goal-build-status.ok,
.onboarding-status.ok {
  color: var(--success);
  border-color: var(--success);
}

.profile-save-status.err,
.replan-status.err,
.year-goal-build-status.err,
.onboarding-status.err {
  color: var(--danger);
  border-color: var(--danger);
}

.loading,
.empty {
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.loading {
  min-height: 100px;
}

/* Статический каркас без мигания. Настоящие скелетоны требуют разметки. */
.loading::after {
  content: "";
  display: block;
  width: min(260px, 72%);
  height: 8px;
  margin-top: 16px;
  background: var(--line);
}

/* ==========================================================================
   5. Компоненты: формы
   ========================================================================== */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 6px;
}

.form-field.full,
.checkbox-field.full {
  grid-column: 1 / -1;
}

.form-field label,
.strength-form label,
.weekday-row > label {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

.form-field input,
.form-field select,
.form-field textarea,
.strength-form input,
.strength-form select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--control-line);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
}

.form-field textarea {
  min-height: 112px;
  resize: vertical;
}

.form-field input[readonly] {
  border-color: var(--line);
  background: var(--soft);
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: var(--muted);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--danger);
  border-width: 2px;
}

.checkbox-field,
.volume-sport-toggle,
.goal-race-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

.checkbox-field input,
.volume-sport-toggle input,
.goal-race-main input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
}

.checkbox-field span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.profile-actions,
.activity-edit-actions,
.schedule-actions,
.onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.profile-actions > .profile-save-status {
  flex: 1 1 240px;
}

.activity-edit-actions,
.schedule-actions,
.onboarding-actions {
  justify-content: flex-end;
}

.credential-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.credential-row .form-field {
  flex: 1 1 100%;
}

.credential-row input {
  font-size: 13px;
}

.schedule-notifications {
  display: grid;
  grid-column: 1 / -1;
  gap: 4px;
  padding-block: 8px;
  border-block: 1px solid var(--line);
}

.activity-edit-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.activity-edit-form .activity-edit-actions,
.activity-edit-form .schedule-actions {
  margin-top: 0;
}

.schedule-help {
  font-size: 14px;
}

/* ==========================================================================
   6. Компоненты: markdown, таблицы и графики
   ========================================================================== */

.markdown-body {
  min-width: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  margin: 24px 0 10px;
}

.markdown-body h2 {
  padding-left: 12px;
  border-left: 3px solid var(--orange);
  font-size: 25px;
}

.markdown-body h3 {
  font-size: 21px;
}

.markdown-body h4 {
  font-size: 18px;
}

.markdown-body > :first-child {
  margin-top: 0;
}

.markdown-body p {
  margin: 0 0 14px;
  color: var(--text);
}

.markdown-body ul,
.markdown-body ol {
  margin: 12px 0 20px;
  padding-left: 24px;
}

.markdown-body li {
  padding-left: 3px;
  margin-block: 5px;
}

.markdown-body li::marker {
  color: var(--accent-text);
}

.markdown-body strong {
  font-weight: 800;
}

.markdown-body blockquote {
  margin: 20px 0;
  padding: 16px;
  border-left: 3px solid var(--orange);
  background: var(--soft);
}

.markdown-body pre {
  max-width: 100%;
  overflow: auto;
  padding: 16px;
  background: var(--soft);
}

.markdown-body code {
  padding: 2px 4px;
  background: var(--soft);
  font-size: .9em;
}

.markdown-body hr {
  margin-block: 24px;
  border: 0;
  border-top: 1px solid var(--line);
}

.md-table-wrap {
  width: 100%;
  /* Вертикальную высоту не ограничиваем: внутри модалки это давало два
     независимых скролла — страница уезжала, а под sticky-шапкой таблицы
     торчали обрывки строк. Прокручивается сама модалка; таблица скроллится
     только вбок. На узких экранах высота ограничивается ниже. */
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  scrollbar-gutter: stable;
}

.md-table {
  width: 100%;
  /* Базовая ширина; фактическую ставит рендер по числу колонок (data-cols). */
  min-width: 640px;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  line-height: 1.45;
}

.md-table th,
.md-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.md-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--text);
  color: var(--card);
  font-weight: 700;
}

.md-table td {
  color: var(--text);
}

.md-table tbody tr:nth-child(even) td {
  background: var(--bg);
}

.md-table tbody tr:last-child td {
  border-bottom: 0;
}

.md-table td:first-child {
  font-weight: 650;
}


/* Первая колонка — даты и дни недели: перенос по буквам делает из «Вт 08.09»
   вертикальный столбик. Держим её одной строкой, остальные переносятся. */
.md-table th:first-child,
.md-table td:first-child {
  white-space: nowrap;
}

.md-table th {
  min-width: 120px;
}

/* Заголовки не должны вставать вертикально: у длинных слов рвём по слогам,
   а не по буквам. */
.md-table th,
.md-table td {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Модалка плана: широкая таблица требует места. Ограничение по высоте
   остаётся у самой модалки, содержимое прокручивается целиком. */
.modal.plan-modal {
  width: min(1400px, 96vw);
}

@media (max-width: 760px) {
  /* На телефоне вертикальный предел возвращаем: иначе таблица на 20 строк
     выталкивает кнопку закрытия за экран. */
  .md-table-wrap {
    max-height: 60vh;
    overflow-y: auto;
  }

  .md-table {
    font-size: 13px;
  }

  .md-table th,
  .md-table td {
    padding: 8px 10px;
  }
}

.weight-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.weight-chart text,
.volume-chart text {
  fill: var(--muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
}

.weight-chart .grid-line {
  stroke: var(--line);
  stroke-width: 1;
}

.weight-chart .weight-line {
  fill: none;
  stroke: var(--text);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.weight-chart .weight-point {
  fill: var(--orange);
  stroke: var(--card);
  stroke-width: 1.5;
}

.weight-chart .target-line {
  stroke: var(--accent-text);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

.weight-chart .target-label {
  fill: var(--accent-text);
}

/* Пунктир экстраполяции веса при текущем балансе: отличается от прогноза
   по тренду и от линии цели и штрихом, и цветом. */
.weight-chart .extrapolation-line {
  fill: none;
  stroke: var(--info);
  stroke-width: 2;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
}

.weight-chart .extrapolation-point {
  fill: var(--info);
}

.weight-chart .extrapolation-label {
  fill: var(--info);
  font-size: 11px;
  font-weight: 700;
}

.chart-legend .extrapolation i {
  height: 0;
  border-top: 2px dashed var(--info);
  background: transparent;
}

.volume-chart-wrap {
  max-width: 100%;
  overflow-x: auto;
  padding: 12px 0;
  overscroll-behavior-x: contain;
}

.volume-chart {
  display: block;
  width: 100%;
  min-width: 720px;
  height: auto;
}

/* Линии остаются различимыми не только по цвету, но и по штриху/толщине. */
.volume-chart polyline {
  stroke: var(--text);
}

.volume-chart polyline[stroke-dasharray] {
  stroke: var(--muted);
}

.volume-chart line[stroke-dasharray] {
  stroke: var(--accent-text);
}

.volume-chart rect[fill="#dfe4ea"] {
  fill: #a8a89f;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.chart-legend i {
  display: inline-block;
  width: 22px;
  height: 3px;
  margin-right: 7px;
  vertical-align: middle;
  background: var(--text);
}

.chart-legend .bars i {
  height: 10px;
  background: #a8a89f;
}

.chart-legend .pace i {
  height: 0;
  border-top: 2px dashed var(--muted);
  background: transparent;
}

.metric-modal-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.metric-modal-summary > div {
  min-width: 0;
}

.metric-modal-summary span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 13px;
}

.metric-modal-summary b {
  display: block;
  font-size: 25px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   7. Экран: шапка и основная навигация
   ========================================================================== */

.topbar {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 96px;
  padding-block: 18px;
  border-bottom: 2px solid var(--text);
}

/* Высота знака та же, что на сайте и в блоге: 40 px, на узком экране 32 px.
   Ширина по содержимому — фиксированная коробка 160×48 делала логотип в
   кабинете крупнее, чем на остальных страницах. */
.topbar-logo {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
}

.topbar-logo img {
  height: 48px;
  width: auto;
}

.topbar-nav {
  display: flex;
  justify-content: center;
  min-width: 0;
  gap: 4px;
}

.topbar-tab {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  padding: 10px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.3;
}

.topbar-tab.active {
  border-bottom-color: var(--orange);
  color: var(--text);
}

.topbar-tab:hover {
  background: var(--soft);
  color: var(--text);
}

/* SPC-V2: бейдж непрочитанного на вкладке «Специалисты». */
.topbar-tab { position: relative; }
.topbar-tab[hidden] { display: none; }
.topbar-nb {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--orange);
  color: #171717;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.topbar-nb[hidden] { display: none; }
@media (max-width: 760px) {
  .topbar-nb { position: absolute; top: 4px; left: calc(50% + 6px); border: 2px solid var(--card, #fff); height: 21px; }
}

.topbar-tab svg,
.topbar-icon-btn svg,
.logout-icon svg {
  flex-shrink: 0;
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Ссылка «Блог» выглядит как вкладка, но ведёт на отдельный сайт:
   поэтому это <a>, а не <button>, и без активного состояния. */
.topbar-blog {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--muted);
}

.topbar-blog:hover {
  background: var(--soft);
  color: var(--text);
  text-decoration: none;
}

/* Переключатель языка: компактная группа из двух кнопок с разделителем.
   Активный язык — жирный и подчёркнут акцентом, чтобы состояние читалось
   без цвета (важно для forced-colors). */
.lang-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.lang-switch button {
  min-height: 32px;
  padding: 4px 6px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.lang-switch button:hover {
  background: var(--soft);
  color: var(--text);
}

.lang-switch button[aria-pressed="true"] {
  color: var(--text);
  font-weight: 850;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.lang-switch span {
  color: var(--line);
}

.topbar-icon-btn,
.user-avatar-btn,
.logout-icon {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
}

.topbar-icon-btn:hover,
.logout-icon:hover,
.user-avatar-btn:hover {
  border-color: var(--line);
  background: var(--soft);
  color: var(--text);
}

.topbar-icon-btn.active,
.user-avatar-btn.active {
  border-color: var(--accent-text);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.user-avatar-btn {
  padding: 4px;
}

[data-top-avatar] {
  display: flex;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
}

.top-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-avatar-initials,
.profile-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--text);
  color: var(--card);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

/* ==========================================================================
   8. Экран: показатели, сила, вес и питание
   ========================================================================== */

.strength-card {
  display: flex;
  flex-direction: column;
}

.strength-progress-list {
  display: grid;
}

.progress-card {
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}

.progress-card:last-child {
  border-bottom: 0;
}

.progress-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px 16px;
}

.progress-top > div {
  flex: 1 1 170px;
  min-width: 0;
}

.progress-top b {
  display: block;
  font-size: 15px;
}

.progress-top span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.progress-top strong {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.15;
}

.progress-top small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.bar,
.metric-progress {
  height: 4px;
  overflow: hidden;
  margin-top: 12px;
  background: var(--line);
}

.bar i,
.metric-progress i {
  display: block;
  height: 100%;
  background: var(--orange);
}

.progress-card em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  text-align: right;
}

.strength-footer {
  display: grid;
  gap: 20px;
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.weight-monitor {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.nutrition-monitor {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.weight-monitor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.weight-monitor-head > div {
  min-width: 0;
}

.weight-monitor-head b {
  display: block;
  font-size: 15px;
}

.weight-monitor-head span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.weight-monitor-current {
  margin-left: auto;
  text-align: right;
}

.weight-monitor-current strong {
  display: block;
  font-size: 24px;
  line-height: 1.2;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.metric {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  text-align: left;
  appearance: none;
}

.metric-clickable {
  cursor: pointer;
}

.metric-clickable:hover {
  border-color: var(--control-line);
  background: var(--bg);
}

.metric > span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

.metric b {
  display: block;
  margin-top: 8px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.metric small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

.metric-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.metric-plan strong {
  color: var(--text);
  font-size: 14px;
}

.metric em {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

/* LK-WEEK-1: пояснение «Плана на эту неделю нет» стоит рядом с прочерком
   плана — отделяем его от подписи периода ниже, чтобы две строки подряд не
   слипались в одну серую кашу. */
.metric em.metric-plan-note {
  margin-top: 4px;
  color: var(--warning);
}

.sport-volume-note {
  margin: 0 0 10px;
}

.metric-hint {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.strength-builder,
.volume-builder {
  display: grid;
  gap: 12px;
  padding: 16px;
  margin: 12px 0 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: 4px;
  background: var(--bg);
}

.strength-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
}

.strength-form label {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.strength-terms,
.strength-submit {
  grid-column: 1 / -1;
}

.strength-submit {
  justify-self: start;
}

.strength-target-list {
  display: grid;
  gap: 8px;
}

.strength-target-row,
.volume-sport-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 10px;
  border-top: 1px solid var(--line);
}

.strength-target-row > div,
.volume-sport-row > div {
  min-width: 0;
}

.strength-target-row b,
.volume-sport-row b {
  display: block;
  font-size: 14px;
}

.strength-target-row span,
.volume-sport-row > div > span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.strength-target-row.is-hidden {
  background: var(--soft);
}

.strength-target-row.is-hidden b {
  color: var(--muted);
}

.volume-sport-toggle {
  flex: 0 0 auto;
  font-size: 13px;
}

/* ==========================================================================
   9. Экран: восстановление и достижения
   ========================================================================== */

.recovery-wide {
  margin-top: 28px;
}

.recovery-wide .section-head {
  margin-bottom: 14px;
}

.recovery-card,
.gamification-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.recovery-head,
.gamification-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.recovery-head > div,
.gamification-head > div {
  min-width: 0;
}

.recovery-head span,
.gamification-head > div:first-child > span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.recovery-status {
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  text-align: right;
}

.recovery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.recovery-pill {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}

.recovery-pill span,
.recovery-pill em {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.recovery-pill b {
  display: block;
  margin: 7px 0 4px;
  font-size: 26px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.streak-counter {
  flex: 0 0 auto;
  text-align: right;
}

.streak-counter b {
  display: block;
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
}

.streak-counter span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.gamification-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 20px;
}

.streak-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.streak-day {
  min-width: 0;
  padding: 8px 3px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--soft);
  text-align: center;
}

.streak-day b,
.streak-day span {
  display: block;
  font-size: 12px;
}

.streak-day span {
  margin-top: 3px;
  font-weight: 800;
}

.streak-day.is-counted,
.streak-day.is-rest {
  border-color: #b9cfbd;
  background: var(--success-soft);
  color: var(--success);
}

.streak-day.is-rest {
  border-bottom: 3px double var(--success);
}

.streak-day.is-overload {
  border-color: #d8c698;
  background: var(--warning-soft);
  color: var(--warning);
}

.streak-day.is-missed {
  border-color: #d9b1ad;
  background: var(--danger-soft);
  color: var(--danger);
}

.streak-day.is-neutral {
  background: var(--soft);
  color: var(--muted);
}

.streak-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.streak-stat {
  min-width: 0;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.streak-stat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.streak-stat b {
  display: block;
  margin-top: 5px;
  font-size: 21px;
}

/* «?» со ссылкой на статью о форме и усталости (BLOG-PMC-1). Кружок рядом с
   подписью: заметный, но не спорит с цифрой. Фокус видно с клавиатуры. */
.help-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
}

.help-link:hover {
  border-color: var(--accent-text);
  color: var(--accent-text);
}

.help-link:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.badge-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}

.badge-card.earned {
  border-top: 3px solid var(--orange);
}

.badge-card.locked {
  border-style: dashed;
  color: var(--muted);
}

.badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--accent-text);
}

.badge-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.badge-card.locked .badge-icon {
  color: var(--muted);
}

.badge-card b {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
}

.badge-card small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

/* ==========================================================================
   10. Экран: журнал активности
   ========================================================================== */

.activity-table {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.activity-row {
  display: grid;
  grid-template-columns: 84px 32px minmax(0, 1fr) minmax(160px, .8fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.activity-row:last-child {
  border-bottom: 0;
}

.activity-row:nth-child(even) {
  background: var(--bg);
}

.activity-row.wellness {
  grid-template-columns: 84px 32px minmax(0, 1fr) minmax(220px, 1.2fr);
  border-left: 3px solid var(--control-line);
  background: var(--soft);
}

.time {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 20px;
}

.main {
  min-width: 0;
}

.main b {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.main span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.metrics {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  text-align: right;
  overflow-wrap: anywhere;
}

.activity-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.activity-actions.muted {
  font-size: 13px;
}

.effort-group {
  display: inline-flex;
  gap: 4px;
}

.effort-btn {
  font-size: 21px;
  filter: grayscale(1);
}

.effort-btn:hover:not(:disabled) {
  border-color: var(--text);
}

.effort-btn.selected {
  filter: none;
  border: 2px solid var(--text);
  background: var(--accent-soft);
}

.effort-btn.selected.sad {
  background: var(--danger-soft);
}

.effort-btn.selected.neutral {
  background: var(--soft);
}

.effort-btn.selected.happy {
  background: var(--success-soft);
}

/* ==========================================================================
   11. Экран: планирование и цели
   ========================================================================== */

.plan-card {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 270px;
}

.plan-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.plan-card h3 {
  flex: 1 1 190px;
  font-size: 22px;
}

.plan-status-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.plan-schedule-hint {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.plan-preview {
  flex: 1;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
}

/* Текст уже сокращён JS; дополнительная обрезка и градиент не нужны. */
.plan-preview p {
  color: var(--text);
}

.plan-preview .empty {
  color: var(--muted);
}

.plan-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
}

.replan-status {
  flex: 1 1 100%;
}

.plan-replan-btn.year-goal-build-btn {
  width: auto;
  min-height: 40px;
  height: auto;
  padding: 8px 12px;
  gap: 8px;
  border-color: var(--control-line);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 750;
}

.year-goal-build-status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.markdown-meta {
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.markdown-meta > b {
  font-size: 20px;
}

#goals-profile-form {
  margin-bottom: 24px;
}

.goal-races-builder {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.goal-races-head {
  margin-bottom: 0;
}

.goal-races-head .hint {
  margin-bottom: 0;
}

.goal-races-list {
  display: grid;
  gap: 12px;
}

.goal-race-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 150px 96px 36px;
  align-items: end;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}

.goal-race-main {
  font-size: 13px;
}

/* ==========================================================================
   12. Экран: профиль и внешние спортивные профили
   ========================================================================== */

/* LK-PROFILE-TABS-1: колонок столько, сколько вкладок (5 в ЛК, 4 в embed) —
   auto-fit по ширине, а разделители рисуются тенью каждой вкладки и обрезаются
   рамкой контейнера, поэтому не зависят от числа колонок. */
.profile-section-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  background: var(--card);
  overflow: hidden;
}

.profile-section-tab {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 80px;
  padding: 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
  background: transparent;
  color: var(--muted);
  text-align: left;
}

.profile-section-tab.active {
  border-bottom-color: var(--orange);
  background: var(--bg);
  color: var(--text);
}

.profile-section-tab:hover {
  background: var(--soft);
}

.profile-section-tab svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-section-tab span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Заголовок переносится только по словам («Что тренер знает» — не «Чт/о/тр…»),
   подсказка — не больше двух строк с многоточием. */
.profile-section-tab strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 14px;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.profile-section-tab small {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: inherit;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.profile-identity-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  margin-bottom: 24px;
}

.profile-identity-main,
.profile-avatar-field {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.profile-avatar-preview {
  width: 88px;
  height: 88px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--soft);
}

.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-initials {
  font-size: 26px;
}

.profile-avatar-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Файловое поле остаётся доступным клавиатуре и скринридеру. */
.profile-avatar-actions input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.profile-avatar-actions:focus-within .avatar-upload-btn {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.profile-name-age {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.weekday-grid,
.onboarding-week {
  display: grid;
  gap: 0;
}

.weekday-row,
.onboarding-week-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 140px;
  align-items: end;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.weekday-row:last-child,
.onboarding-week-row:last-child {
  border-bottom: 0;
}

.weekday-row > label,
.onboarding-week-row > strong {
  align-self: center;
  font-size: 14px;
}

.external-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.external-profile-profile-card > p {
  margin-bottom: 16px;
  font-size: 14px;
}

.external-profile-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
}

.external-profile-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.external-profile-icon {
  display: flex;
  align-items: center;
  width: 112px;
  height: 40px;
  max-width: 100%;
}

.external-profile-icon svg,
.external-profile-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.external-profile-icon svg {
  fill: none;
}

.external-profile-card h3 {
  font-size: 16px;
}

.external-profile-card p {
  font-size: 13px;
}

.external-profile-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.external-profile-indicators span {
  padding: 4px 6px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 12px;
}

.external-profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.external-profile-updated {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

a.external-profile-updated {
  color: var(--accent-text);
}

/* ==========================================================================
   13. Экран: интеграции и безопасность
   ========================================================================== */

.telegram-guide {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.telegram-guide-status,
.email-status-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}

.telegram-guide-status > div,
.email-status-panel > div {
  flex: 1 1 180px;
  min-width: 0;
}

.telegram-guide-status strong,
.email-status-panel strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.email-status-panel {
  margin-bottom: 20px;
}

.email-status-panel .hint {
  margin: 0;
}

.telegram-guide-badge {
  color: var(--success);
  font-size: 12px;
  font-weight: 750;
}

.telegram-guide-badge.pending {
  color: var(--warning);
}

.integration-help {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-left: 3px solid var(--line);
  background: var(--bg);
}

.integration-help > strong {
  font-size: 14px;
}

.integration-help code {
  color: var(--text);
  font-size: 12px;
}

.telegram-steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.telegram-steps li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.telegram-steps strong {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
}

.telegram-steps .step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

.apple-health-guide {
  max-width: 880px;
}

.integration-actions-card .profile-actions {
  margin: 0;
}

/* ==========================================================================
   14. Экран: подписка и платежи
   ========================================================================== */

.billing-account-card {
  display: grid;
  gap: 20px;
}

.sub-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}

.sub-status-body {
  display: grid;
  flex: 1 1 180px;
  min-width: 0;
  gap: 3px;
}

.sub-status strong {
  font-size: 16px;
}

.sub-sub {
  color: var(--muted);
  font-size: 13px;
}

.sub-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.sub-status.is-on .sub-dot {
  background: var(--success);
}

.sub-status.is-off .sub-dot {
  background: var(--warning);
}

.plan-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}

.plan-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: 4px;
  background: var(--card);
}

.plan-tile.is-recommended {
  border-top-color: var(--orange);
}

.plan-tile.is-current {
  border-color: var(--success);
}

.plan-badge {
  align-self: flex-start;
  padding: 3px 8px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 750;
}

.plan-tile__name {
  font-size: 17px;
  font-weight: 750;
}

.plan-tile__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.plan-tile__price strong {
  font-size: 36px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.035em;
}

.plan-tile__price span {
  color: var(--muted);
  font-size: 14px;
}

.plan-tile__per,
.plan-tile__note {
  color: var(--muted);
  font-size: 13px;
}

.plan-tile__features {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.plan-tile__features li {
  padding-left: 2px;
  font-size: 14px;
}

.plan-tile__features li::marker {
  color: var(--accent-text);
}

.plan-tile__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.billing-usage-table {
  display: grid;
}

.billing-scroll-frame {
  max-height: 420px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.billing-usage-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .6fr);
  gap: 16px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.billing-usage-row:nth-child(even) {
  background: var(--bg);
}

.billing-usage-row:last-child {
  border-bottom: 0;
}

.billing-usage-row > div {
  min-width: 0;
}

.billing-usage-row strong,
.billing-usage-row span {
  display: block;
  overflow-wrap: anywhere;
}

.billing-usage-row span {
  color: var(--muted);
  font-size: 12px;
}

/* ==========================================================================
   15. Экран: сообщения и пожелания
   ========================================================================== */

.chat-panel {
  display: grid;
  grid-template-rows: auto minmax(320px, 65vh);
  gap: 16px;
}

.chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.chat-toolbar h2 {
  margin-bottom: 6px;
}

.chat-toolbar p {
  font-size: 14px;
}

.chat-window {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding: 20px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.chat-day {
  align-self: center;
  padding: 4px 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 12px;
}

.chat-message {
  display: grid;
  gap: 6px;
  width: fit-content;
  max-width: min(700px, 85%);
  min-width: 0;
}

.chat-message.inbound {
  align-self: flex-end;
}

.chat-message.outbound,
.chat-message.system {
  align-self: flex-start;
}

.chat-bubble {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-message.inbound .chat-bubble {
  border-color: #d6b9a9;
  background: var(--accent-soft);
}

.chat-message.system .chat-bubble {
  border-style: dashed;
  background: var(--soft);
}

.chat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--muted);
  font-size: 12px;
}

.chat-message.inbound .chat-meta {
  justify-content: flex-end;
}

.chat-intent {
  color: var(--accent-text);
}

.backlog-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  margin-top: 20px;
}

.backlog-form textarea {
  min-height: 112px;
}

.backlog-list {
  display: grid;
  margin-top: 20px;
}

.backlog-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.backlog-item:first-child {
  padding-top: 0;
}

.backlog-item:last-child {
  border-bottom: 0;
}

.backlog-item h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

.backlog-item p {
  font-size: 14px;
  white-space: pre-wrap;
}

.backlog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.backlog-number {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

/* ==========================================================================
   16. Слои поверх экранов: модальные окна и онбординг
   ========================================================================== */

body.modal-open {
  overflow: hidden;
}

.modal-backdrop,
.onboarding-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(23, 23, 23, .6);
}

.modal-backdrop {
  z-index: 1000;
}

.onboarding-backdrop {
  z-index: 1200;
}

.modal-backdrop.open,
.onboarding-backdrop.open {
  display: flex;
}

.modal,
.onboarding-modal {
  display: flex;
  flex-direction: column;
  width: min(960px, 100%);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

.activity-edit-modal {
  width: min(760px, 100%);
}

.plan-schedule-modal {
  width: min(720px, 100%);
}

.modal-head,
.onboarding-head {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.modal-head h2,
.onboarding-head h2 {
  min-width: 0;
  margin: 0;
  font-size: 25px;
}

.modal-close {
  width: 40px;
  height: 40px;
  min-width: 40px;
  color: var(--text);
  font-size: 26px;
  line-height: 1;
}

.modal-close:hover {
  border-color: var(--text);
  background: var(--soft);
}

.modal-body,
.onboarding-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px;
}

.onboarding-modal {
  width: min(900px, 100%);
}

.onboarding-head p {
  margin-top: 8px;
  font-size: 14px;
}

.onboarding-progress {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  padding-top: 8px;
}

.onboarding-dot {
  width: 10px;
  height: 10px;
  border: 1px solid var(--control-line);
  background: var(--card);
}

.onboarding-dot.active {
  border-color: var(--accent-text);
  background: var(--orange);
}

.onboarding-dot.done {
  border-color: var(--text);
  background: var(--text);
}

.onboarding-foot {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.onboarding-foot .onboarding-actions {
  margin: 0 0 0 auto;
}

.onboarding-status:empty {
  min-height: 0;
}

.onboarding-step {
  display: grid;
  gap: 20px;
}

.onboarding-step > p {
  max-width: 72ch;
  font-size: 15px;
}

.onboarding-grid,
.onboarding-summary,
.onboarding-connect {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.onboarding-help {
  padding: 16px;
  border-left: 3px solid var(--orange);
  background: var(--soft);
}

.onboarding-help strong {
  display: block;
  margin-bottom: 6px;
}

.onboarding-help p {
  font-size: 14px;
}

.onboarding-choice {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--control-line);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  text-align: left;
}

.onboarding-choice:hover {
  background: var(--bg);
}

.onboarding-choice.active {
  border: 2px solid var(--accent-text);
  padding: 15px;
  background: var(--accent-soft);
}

.onboarding-choice-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  color: var(--accent-text);
}

.onboarding-choice-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.onboarding-choice strong {
  display: block;
  font-size: 15px;
  line-height: 1.35;
}

.onboarding-choice p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
}

.onboarding-summary-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}

.onboarding-summary-card h3 {
  margin-bottom: 8px;
  font-size: 15px;
}

.onboarding-summary-card p {
  color: var(--text);
  font-size: 14px;
}

.oc-card {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
}

.oc-card > * {
  min-width: 0;
}

.oc-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.oc-card-head > div {
  flex: 1 1 120px;
  min-width: 0;
}

.oc-card-head strong {
  display: block;
  font-size: 17px;
}

.oc-card-head > div > span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.oc-logo {
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--text);
  color: var(--card);
}

/* Знаки каналов не конкурируют с фирменным акцентом кабинета. */
.oc-logo.tg,
.oc-logo.max {
  background: var(--text);
}

.oc-logo svg {
  width: 24px;
  height: 24px;
}

.oc-badge {
  margin-left: auto;
}

.oc-qr {
  justify-self: center;
  width: 200px;
  max-width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  background: #fff;
  line-height: 0;
}

.oc-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.oc-qr.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  line-height: 1.5;
  text-align: center;
}

.oc-hint {
  font-size: 13px;
  text-align: center;
}

.oc-cmd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}

.oc-cmd code {
  flex: 1 1 160px;
  min-width: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.oc-copy.done {
  border-color: var(--success);
  color: var(--success);
}

.oc-open {
  width: 100%;
}

.oc-note {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.55;
}

/* ==========================================================================
   17. Адаптив: ноутбук и планшет, до 1100 px
   На 1024 px шапка двухстрочная, основные карточки ещё в две колонки.
   ========================================================================== */

@media (max-width: 1100px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 20px;
    padding-block: 16px;
  }

  .topbar-logo {
    grid-column: 1;
    grid-row: 1;
  }

  .topbar-actions {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .topbar-nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .activity-row,
  .activity-row.wellness {
    grid-template-columns: 84px 32px minmax(0, 1fr);
  }

  .activity-row .metrics,
  .activity-row .activity-actions {
    grid-column: 3;
    justify-content: flex-start;
    text-align: left;
  }

  .profile-grid > .profile-card {
    grid-column: 1 / -1;
  }

  .external-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .goal-race-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .goal-race-row > .mini-btn {
    justify-self: start;
  }

  .recovery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .badge-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   18. Адаптив: телефон и узкий планшет, до 760 px
   ========================================================================== */

@media (max-width: 760px) {
  body {
    padding: 0 16px 32px;
    font-size: 15px;
  }

  .content-card {
    padding-top: 24px;
  }

  .topbar {
    gap: 12px;
  }

  .topbar-logo {
    min-height: 40px;
  }

  .topbar-logo img {
    height: 40px;
  }

  .topbar-tab {
    flex: 1 1 0;
    flex-direction: column;
    gap: 6px;
    min-height: 68px;
    padding: 8px 4px;
    font-size: 13px;
  }

  .topbar-tab svg {
    width: 21px;
    height: 21px;
  }

  .section-head,
  .chat-toolbar,
  .goal-races-head {
    flex-wrap: wrap;
  }

  .section-head {
    gap: 12px;
  }

  .section-head p {
    font-size: 13px;
  }

  .physical-layout,
  .profile-grid,
  .billing-grid,
  .plan-compact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .physical-layout > *,
  .profile-grid > *,
  .billing-grid > *,
  .plan-compact-grid > * {
    grid-column: 1 / -1;
  }

  .metrics-grid,
  .recovery-grid,
  .external-profile-grid,
  .form-grid,
  .metric-modal-summary,
  .onboarding-grid,
  .onboarding-summary,
  .onboarding-connect {
    grid-template-columns: minmax(0, 1fr);
  }

  .sub-card,
  .profile-card,
  .markdown-card,
  .plan-card,
  .recovery-card,
  .gamification-card,
  .backlog-composer,
  .backlog-list-card,
  .chat-toolbar,
  .integration-actions-card {
    padding: 16px;
  }

  .combined-layout {
    gap: 32px;
  }

  .metric {
    padding: 16px;
  }

  .metric b {
    font-size: 32px;
  }

  .metric-plan {
    justify-content: flex-start;
    gap: 12px;
  }

  .gamification-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .streak-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .badge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recovery-head,
  .gamification-head {
    gap: 12px;
  }

  .activity-row,
  .activity-row.wellness {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px 10px;
    padding: 12px;
  }

  .activity-row .time {
    grid-column: 1 / -1;
  }

  .activity-row .icon {
    grid-column: 1;
    width: 28px;
    height: 28px;
  }

  .activity-row .main,
  .activity-row .metrics {
    grid-column: 2;
    text-align: left;
  }

  .activity-row .activity-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: 6px;
  }

  .activity-actions {
    gap: 8px;
  }

  .effort-group {
    gap: 8px;
  }

  .profile-section-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-section-tab {
    min-height: 76px;
    padding: 12px;
    gap: 8px;
  }

  /* Нечётная последняя (пятая) вкладка занимает весь ряд, а не полстроки. */
  .profile-section-tab:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .profile-section-tab span {
    font-size: 12px;
  }

  .profile-section-tab strong {
    font-size: 14px;
  }

  .weekday-row,
  .onboarding-week-row,
  .goal-race-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .weekday-row > label,
  .onboarding-week-row > strong {
    font-weight: 750;
  }

  .strength-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .strength-target-row,
  .volume-sport-row {
    flex-wrap: wrap;
  }

  .volume-sport-toggle {
    flex-shrink: 1;
  }

  .credential-row .form-field {
    flex-basis: 100%;
  }

  .form-field input,
  .form-field select,
  .form-field textarea,
  .strength-form input,
  .strength-form select,
  .credential-row input {
    font-size: 16px;
  }

  .btn,
  .btn.small,
  .mini-btn,
  .mini-btn.icon-only,
  .plan-schedule-btn,
  .plan-replan-btn,
  .plan-replan-btn.year-goal-build-btn,
  .effort-btn,
  .edit-activity-btn,
  .file-activity-btn,
  .delete-activity-btn,
  .modal-close,
  .plan-pay,
  .avatar-upload-btn,
  .external-profile-refresh,
  .oc-copy,
  .oc-open,
  .billing-inline-link {
    min-height: 44px;
  }

  .mini-btn.icon-only,
  .plan-schedule-btn,
  .plan-replan-btn,
  .effort-btn,
  .edit-activity-btn,
  .file-activity-btn,
  .delete-activity-btn,
  .modal-close {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .plan-replan-btn.year-goal-build-btn {
    width: auto;
    height: auto;
  }

  .external-profile-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .goal-race-row > .mini-btn {
    min-width: 44px;
  }

  .billing-usage-row {
    min-width: 520px;
  }

  .chat-panel {
    grid-template-rows: auto minmax(320px, 62vh);
  }

  .chat-window {
    padding: 12px;
  }

  .chat-message {
    max-width: 94%;
  }

  .chat-bubble {
    padding: 12px;
  }

  .backlog-form,
  .backlog-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .backlog-form > div:empty {
    display: none;
  }

  .backlog-number {
    justify-self: start;
  }

  .modal-backdrop,
  .onboarding-backdrop {
    padding: 10px;
  }

  .modal,
  .onboarding-modal {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 6px;
  }

  .modal-head,
  .onboarding-head,
  .onboarding-foot {
    padding: 16px;
  }

  .modal-body,
  .onboarding-body {
    padding: 16px;
  }

  .modal-head h2,
  .onboarding-head h2 {
    font-size: 22px;
  }

  .onboarding-head {
    flex-wrap: wrap;
  }

  .onboarding-progress {
    padding-top: 0;
  }

  .onboarding-foot {
    gap: 8px;
  }

  .onboarding-foot .onboarding-actions {
    flex: 1 1 100%;
  }

  .onboarding-foot .onboarding-status:not(:empty) {
    flex: 1 1 100%;
    max-height: 72px;
    overflow: auto;
  }

  .oc-card {
    padding: 14px;
  }

  .metric-modal-summary {
    gap: 12px;
  }

  .metric-modal-summary > div {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }

  .metric-modal-summary > div:last-child {
    border-bottom: 0;
  }
}

/* ==========================================================================
   19. Адаптив: компактный телефон, включая 390 px
   ========================================================================== */

@media (max-width: 420px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .topbar-logo {
    grid-column: 1;
    grid-row: 1;
  }

  .topbar-actions {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
  }

  .topbar-nav {
    grid-column: 1;
    grid-row: 3;
  }

  .topbar-tab {
    font-size: 12px;
  }

  .profile-section-tab {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }

  .profile-identity-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-avatar-field {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
  }

  .profile-avatar-actions {
    align-content: start;
  }

  .badge-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .streak-calendar {
    gap: 4px;
  }

  .streak-day {
    padding-inline: 1px;
  }

  .streak-day b {
    font-size: 11px;
  }

  .plan-card-header {
    flex-direction: column;
  }

  .plan-card h3 {
    flex-basis: auto;
  }

  .plan-tile {
    padding: 16px;
  }

  .plan-tile__price strong {
    font-size: 32px;
  }

  .oc-cmd code {
    flex-basis: 100%;
  }
}

/* ==========================================================================
   19b. Экран: карта территории
   ========================================================================== */

.game-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.game-head-level,
.game-head-xp {
  min-width: 0;
}

.game-head-level span,
.game-head-xp span,
.game-head-stats span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.game-head-level b {
  display: block;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.game-head-xp b {
  display: block;
  margin-bottom: 8px;
  font-size: 22px;
}

.game-head-stats {
  text-align: right;
}

.game-head-stats span {
  font-size: 13px;
  font-weight: 650;
}

.xp-bar {
  height: 6px;
  overflow: hidden;
  background: var(--line);
}

.xp-bar i {
  display: block;
  height: 100%;
  background: var(--orange);
}

.game-goal {
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  background: var(--card);
}

.game-goal.is-done {
  border-left-color: var(--success);
}

.game-goal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.game-goal-head strong {
  font-size: 17px;
}

.game-goal-head span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.game-goal.is-done .game-goal-head span {
  color: var(--success);
}

.game-goal .hint {
  margin-top: 10px;
}

.game-map {
  width: 100%;
  height: 60vh;
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}

/* Карточка «Форма» (TMA-FORM-1, спека docs/design/form-card.md). Те же классы
   использует мини-апп: разметку и SVG собирает общий модуль form-chart.js. */
.form-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.form-head h2 {
  margin: 0;
  font-size: 18px;
}

.form-window {
  display: inline-flex;
  gap: 4px;
}

.form-window-btn {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.form-window-btn.is-active {
  border-color: var(--accent-text);
  color: var(--accent-text);
}

.form-window-btn[disabled] { opacity: .45; cursor: default; }
.form-window-btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.form-status {
  margin: 12px 0 0;
  font-size: 15px;
}

.form-status span { color: var(--muted); font-size: 13px; }

.form-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.form-stat span { display: block; color: var(--muted); font-size: 12px; }
.form-stat b { display: block; margin-top: 2px; font-size: 24px; line-height: 1.1; }
.form-stat small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }

.form-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.form-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.form-legend-item i { width: 14px; height: 3px; border-radius: 2px; }
.form-legend-note { font-style: italic; }

.form-chart-wrap { cursor: crosshair; }
.form-chart { width: 100%; height: 200px; display: block; }

.form-day {
  margin: 6px 0 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.form-ramp { margin: 8px 0 0; font-size: 13px; }
.form-note, .form-empty { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.form-empty { font-size: 14px; }

/* Экран «Территория» (GAME-2): HUD над картой, кнопки позиционирования поверх
   неё и легенда под ней. Кабинет открывают с телефона, поэтому HUD — сетка
   2×2, а на широком экране растягивается в строку. */
.game-hud {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.game-hud-item {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.game-hud-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.game-hud-item b {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  line-height: 1.1;
}

.game-hud-item small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.game-hud-item .xp-bar {
  margin-top: 6px;
}

.game-map-wrap {
  position: relative;
}

.game-map-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 500; /* выше тайлов Leaflet, ниже его попапов */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.map-btn[disabled] {
  opacity: 0.45;
  cursor: default;
}

.map-btn:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.game-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0 20px;
  color: var(--muted);
  font-size: 12px;
}

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

.game-legend-item i {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

/* GAME-3: своя территория зелёная, чужая красная — те же цвета, что TERRITORY_COLORS в game-map.js. */
.game-legend-item .is-mine { background: rgba(34, 197, 94, 0.28); border: 2px solid #15803D; }
.game-legend-item .is-others { background: rgba(239, 68, 68, 0.26); border: 2px solid #B91C1C; }
.game-legend-item .is-fresh { background: rgba(34, 197, 94, 0.5); border: 2px solid #15803D; }
.game-leaderboard { margin-top: 24px; }
.game-leaderboard .section-head { margin-bottom: 10px; }
.leaderboard-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.leaderboard-table th, .leaderboard-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.leaderboard-table th:nth-child(-n+2), .leaderboard-table td:nth-child(-n+2) { text-align: left; }
/* GAME-5: имя стало третьей ячейкой (место, стрелка, имя, счёт), поэтому
   выравнивание задаётся классом, а не порядковым номером колонки. */
.leaderboard-table td.name { white-space: normal; text-align: left; }
.leaderboard-table td.move { text-align: left; }
.leaderboard-table tr.is-you td { background: var(--soft); font-weight: 600; }
.leaderboard-table tr.gap td { text-align: center; color: var(--muted); letter-spacing: 3px; }
.leaderboard-table .you { color: var(--muted); font-weight: 400; }

/* GAME-5: три самостоятельных рейтинга в ряд. На планшете помещаются два,
   на телефоне идут друг под другом — заголовок периода остаётся у каждого,
   иначе колонки сливаются в один непонятный список. */
.board-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .board-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .board-columns { grid-template-columns: 1fr; } }

.board-column { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 4px; background: var(--card, #fff); }
.board-column h4 { margin: 0 0 8px; font-size: 15px; }
.board-column .leaderboard-table td { padding: 6px 6px; }
.board-column .leaderboard-table td.rank { width: 1%; color: var(--muted); }
.board-column .leaderboard-table td.move { width: 1%; padding-right: 2px; }
/* Числа моноширинные: иначе разряды прыгают и столбец читается как лестница. */
.board-column .leaderboard-table td.score { font-variant-numeric: tabular-nums; }
.board-column .leaderboard-table td.rank { font-variant-numeric: tabular-nums; }

.board-move { font-size: 12px; font-variant-numeric: tabular-nums; }
.board-move.is-up { color: #15803D; }
.board-move.is-down { color: #B91C1C; }
.board-move.is-same, .board-move.is-new { color: var(--muted); }
.game-legend-item .is-route { height: 3px; border-radius: 2px; background: #374151; }
.game-legend-item .is-zone { background: #E6E5DF; border: 2px dashed var(--muted); }

.game-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-ledger-details {
  margin: 16px 0;
}

.game-ledger-details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
}

@media (min-width: 720px) {
  .game-hud {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .game-map {
    height: 70vh;
    min-height: 480px;
  }
}

/* Leaflet рисует свои контролы поверх темы — возвращаем им читаемость. */
.game-map .leaflet-container {
  font-family: var(--font);
}

.game-ledger {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.game-ledger-row {
  display: grid;
  grid-template-columns: 140px 72px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.game-ledger-row:last-child {
  border-bottom: 0;
}

.game-ledger-row:nth-child(even) {
  background: var(--bg);
}

.game-ledger-date {
  color: var(--muted);
  font-size: 12px;
}

.game-ledger-points {
  color: var(--accent-text);
  font-size: 16px;
  font-weight: 800;
}

.game-ledger-reason {
  min-width: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.privacy-zones {
  margin-top: 28px;
}

.privacy-zone-list {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.privacy-zone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.privacy-zone-row:last-child {
  border-bottom: 0;
}

.privacy-zone-row > div {
  min-width: 0;
}

.privacy-zone-row b {
  display: block;
  font-size: 14px;
}

.privacy-zone-row span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.privacy-zone-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  align-items: end;
  gap: 16px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.privacy-zone-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.privacy-zone-form .profile-save-status {
  grid-column: 1 / -1;
}

/* GAME-7A: карточка «Игра: захваты» — переключатель и тихие часы. */
.game-alerts-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.game-alerts-form .checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.game-alerts-form .form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.game-alerts-form .form-row .form-field {
  min-width: 140px;
}

@media (max-width: 760px) {
  .game-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .game-head-stats {
    text-align: left;
  }

  .game-map {
    height: 50vh;
  }

  .game-ledger-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
  }

  .game-ledger-reason {
    grid-column: 1 / -1;
  }

  .privacy-zone-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   19c. Мобильная адаптация web-разделов в embed-режиме (W-3)
   Приложение открывает разделы ЛК на iPhone (390 px). Правила ниже работают
   и в embed-режиме, и на узком экране обычного браузера: набор проблем один
   и тот же — сетки, таблицы, кнопки и модалки.
   ========================================================================== */

/* Обёртка для широких таблиц: скроллится сама, страница — нет. */
.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Таблицы внутри markdown: горизонтальный скролл вместо разрыва вёрстки.
   pre переносим по словам — длинные строки плана иначе уезжают за экран. */
.markdown-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.markdown-body pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Кнопка ИИ-анализа и её вывод занимают всю ширину: на телефоне узкая
   кнопка в углу карточки теряется. */
.btn-magic,
.energy-analysis {
  width: 100%;
}

.energy-analysis-actions {
  align-items: stretch;
}

@media (max-width: 480px) {
  /* Сетки карточек — в одну колонку. */
  .physical-layout,
  .profile-grid,
  .billing-grid,
  .plan-compact-grid,
  .metrics-grid,
  .recovery-grid,
  .external-profile-grid,
  .form-grid,
  .metric-modal-summary,
  .onboarding-grid,
  .onboarding-summary,
  .onboarding-connect,
  .strength-form,
  .goal-race-row,
  .weekday-row,
  .onboarding-week-row,
  .privacy-zone-form,
  .race-inputs,
  .bb-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .physical-layout > *,
  .profile-grid > *,
  .billing-grid > *,
  .plan-compact-grid > * {
    grid-column: 1 / -1;
  }

  /* Поля формы — в один столбец, метка над полем. */
  .form-field,
  .strength-form label,
  .race-form label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* Кнопки действий прилипают к низу формы: длинная анкета не оставляет
     пользователя без кнопки «Сохранить» в конце прокрутки. */
  .profile-actions,
  .activity-edit-actions,
  .schedule-actions,
  .onboarding-actions,
  .race-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-inline: -16px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    background: var(--card);
  }

  .profile-actions > .btn,
  .activity-edit-actions > .btn,
  .schedule-actions > .btn,
  .onboarding-actions > .btn,
  .race-actions > .btn {
    width: 100%;
  }

  /* Список гонок — карточки, а не строки таблицы. */
  .goal-race-row {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
  }

  /* Редактор расписания: селекты и чекбоксы в две колонки. */
  .schedule-notifications {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Кнопки replan — вертикальный стек. */
  .plan-actions,
  .plan-status-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .plan-actions > .btn,
  .plan-status-wrap > .btn,
  .plan-status-wrap > .plan-replan-btn,
  .plan-status-wrap > .plan-schedule-btn {
    width: 100%;
  }

  /* Все кнопки и поля — не меньше 44 px и с кеглем 16 px: iOS зумит
     страницу при фокусе на поле с меньшим кеглем. */
  .btn,
  .btn.small,
  .mini-btn,
  .mini-btn.icon-only,
  .plan-schedule-btn,
  .plan-replan-btn,
  .plan-replan-btn.year-goal-build-btn,
  .effort-btn,
  .edit-activity-btn,
  .file-activity-btn,
  .delete-activity-btn,
  .modal-close,
  .plan-pay,
  .avatar-upload-btn,
  .external-profile-refresh,
  .oc-copy,
  .oc-open,
  .billing-inline-link,
  .btn-magic {
    min-height: 44px;
  }

  .mini-btn.icon-only,
  .plan-schedule-btn,
  .plan-replan-btn,
  .effort-btn,
  .edit-activity-btn,
  .file-activity-btn,
  .delete-activity-btn,
  .modal-close {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .plan-replan-btn.year-goal-build-btn {
    width: 100%;
    height: auto;
  }

  input,
  select,
  textarea,
  .form-field input,
  .form-field select,
  .form-field textarea,
  .strength-form input,
  .strength-form select,
  .credential-row input,
  .race-form input[type="text"],
  .race-form input[type="datetime-local"],
  .race-form textarea {
    min-height: 44px;
    font-size: 16px;
  }

  /* Модалки — на всю ширину с отступом 12 px и внутренним скроллом. */
  .modal-backdrop,
  .onboarding-backdrop {
    padding: 12px;
  }

  .modal,
  .onboarding-modal {
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: var(--radius);
  }

  .modal-body,
  .onboarding-body {
    overflow: auto;
    overscroll-behavior: contain;
  }

  /* Карта территории: высота в dvh, панель зон — под картой. */
  .game-map {
    height: 60dvh;
    min-height: 280px;
  }

  .privacy-zones {
    margin-top: 20px;
  }

  /* Карточки интеграций — одна колонка, QR и коды читаемы. */
  .oc-qr {
    width: 100%;
    max-width: 240px;
  }

  .oc-cmd code {
    flex-basis: 100%;
    font-size: 14px;
  }

  /* Список устройств — карточки с кнопкой «Отвязать» справа. */
  .device-row {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
  }

  .device-row > div {
    flex: 1 1 auto;
    min-width: 0;
  }

  .device-row .btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 44px;
  }
}

/* В embed-режиме те же правила действуют независимо от ширины окна:
   WKWebView может отдать нестандартную ширину, а набор проблем тот же. */
html.embed-app .table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

html.embed-app .markdown-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

html.embed-app .markdown-body pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

html.embed-app .btn-magic,
html.embed-app .energy-analysis {
  width: 100%;
}

html.embed-app .game-map {
  height: 60dvh;
  min-height: 280px;
}

/* ZONES-MANUAL-1. Формы ручного ввода порогов и границ зон.
   Поля в сетке, а не в строку: без неё подпись, поле и единицы измерения
   выстраивались в одну строчку и «уд/мин» оказывалось подписью следующего
   поля. На узком экране — одна колонка. */
.threshold-manual {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.threshold-manual > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
}

.threshold-form {
  margin: 10px 0 16px;
}

.threshold-form + .threshold-form {
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}

.threshold-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 14px;
  margin: 8px 0;
}

.threshold-grid label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 8px;
  font-size: 13px;
}

.threshold-grid label > span {
  grid-column: 1 / -1;
  color: var(--muted);
}

.threshold-grid label > small {
  color: var(--muted);
  font-size: 12px;
}

.threshold-grid input,
.threshold-grid select {
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: inherit;
  font: inherit;
}

.threshold-grid input[type="date"],
.threshold-grid select {
  grid-column: 1 / -1;
}

.threshold-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.threshold-history {
  margin-top: 10px;
}

.threshold-history > summary {
  cursor: pointer;
  color: var(--muted);
  padding: 4px 0;
}

.threshold-history tr.muted td {
  color: var(--muted);
}

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

/* IOS-QA-3: режим встраивания «только карта и рейтинг» (?view=map). Карту
   обрезала рамка приложения на 420 pt — от неё оставалась полоска. Теперь
   высоту блока приложение берёт из сообщения `height`, а карта занимает
   почти всю рамку: 78 dvh — это карта плюс легенда и рейтинг под ней. */
html.embed-app .game-map-embed .game-map {
  height: 78dvh;
  min-height: 420px;
}

/* IOS-MAP-M4: только холст карты — на всю рамку WebView, документ не прокручивается. */
html.embed-app.embed-canvas,
html.embed-app.embed-canvas body {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
html.embed-app.embed-canvas #dashboard-root,
html.embed-app.embed-canvas #block-content,
html.embed-app.embed-canvas .game-map-wrap.game-map-canvas { margin: 0; padding: 0; }
/* IOS-MAP-I6: отступы страницы не должны сужать холст внутри WebView. */
html.embed-app.embed-canvas body,
html.embed-app.embed-canvas #dashboard-root,
html.embed-app.embed-canvas main,
html.embed-app.embed-canvas #block-content {
  margin: 0;
  padding: 0;
  max-width: none;
}
html.embed-app.embed-canvas .game-map-canvas .game-map {
  border: 0;
  border-radius: 0;
  width: 100vw;
}
html.embed-app .game-map-canvas .game-map {
  height: 100dvh;
  min-height: 0;
  border-radius: 0;
}

html.embed-app .modal,
html.embed-app .onboarding-modal {
  width: 100%;
  max-height: calc(100dvh - 24px);
}

html.embed-app .modal-backdrop,
html.embed-app .onboarding-backdrop {
  padding: 12px;
}

html.embed-app .modal-body,
html.embed-app .onboarding-body {
  overflow: auto;
  overscroll-behavior: contain;
}

html.embed-app .btn,
html.embed-app .btn.small,
html.embed-app .mini-btn,
html.embed-app .mini-btn.icon-only,
html.embed-app .plan-schedule-btn,
html.embed-app .plan-replan-btn,
html.embed-app .effort-btn,
html.embed-app .edit-activity-btn,
html.embed-app .file-activity-btn,
html.embed-app .delete-activity-btn,
html.embed-app .modal-close,
html.embed-app .plan-pay,
html.embed-app .avatar-upload-btn,
html.embed-app .external-profile-refresh,
html.embed-app .oc-copy,
html.embed-app .oc-open,
html.embed-app .billing-inline-link,
html.embed-app .btn-magic {
  min-height: 44px;
}

html.embed-app .mini-btn.icon-only,
html.embed-app .plan-schedule-btn,
html.embed-app .plan-replan-btn,
html.embed-app .effort-btn,
html.embed-app .edit-activity-btn,
html.embed-app .file-activity-btn,
html.embed-app .delete-activity-btn,
html.embed-app .modal-close {
  width: 44px;
  min-width: 44px;
  height: 44px;
}

html.embed-app .plan-replan-btn.year-goal-build-btn {
  width: 100%;
  height: auto;
}

html.embed-app input,
html.embed-app select,
html.embed-app textarea {
  min-height: 44px;
}

html.embed-app .device-row {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

html.embed-app .device-row > div {
  flex: 1 1 auto;
  min-width: 0;
}

html.embed-app .device-row .btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 44px;
}

html.embed-app .oc-qr {
  width: 100%;
  max-width: 240px;
}

html.embed-app .oc-cmd code {
  flex-basis: 100%;
  font-size: 14px;
}

html.embed-app .schedule-notifications {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.embed-app .plan-actions,
html.embed-app .plan-status-wrap {
  flex-direction: column;
  align-items: stretch;
}

html.embed-app .plan-actions > .btn,
html.embed-app .plan-status-wrap > .btn,
html.embed-app .plan-status-wrap > .plan-replan-btn,
html.embed-app .plan-status-wrap > .plan-schedule-btn {
  width: 100%;
}

html.embed-app .goal-race-row {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

html.embed-app .profile-actions,
html.embed-app .activity-edit-actions,
html.embed-app .schedule-actions,
html.embed-app .onboarding-actions,
html.embed-app .race-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-inline: -16px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--card);
}

html.embed-app .profile-actions > .btn,
html.embed-app .activity-edit-actions > .btn,
html.embed-app .schedule-actions > .btn,
html.embed-app .onboarding-actions > .btn,
html.embed-app .race-actions > .btn {
  width: 100%;
}

/* ==========================================================================
   20. Предпочтения пользователя
   Анимации загрузки и декоративное движение намеренно отсутствуют.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html,
  .chat-window,
  .modal-body,
  .onboarding-body {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   Встраивание в приложение: /sport?embed=app&block=<key>
   Приложение даёт свою навигацию, поэтому шапка, вкладки, футер и
   переключатель языка скрыты, а контент занимает всю ширину экрана.
   ========================================================================== */

html.embed-app {
  -webkit-text-size-adjust: 100%;
}

html.embed-app body {
  /* Отступы под «челку» и домашний индикатор iPhone. */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: 16px;
  padding-right: 16px;
}

/* Контейнер контента на всю ширину: в приложении нет боковых колонок. */
/* В приложении общий предел страницы снят: на телефоне окно WKWebView и так
   уже предела, а лишние поля съедали бы ширину карточек. */
html.embed-app #dashboard-root {
  max-width: none;
}

/* IOS-IPAD-1: на планшете предел нужен обратно. Приложение стало универсальным
   (TARGETED_DEVICE_FAMILY «1,2»), и окно web-раздела на iPad Air 11" — это 820
   или 1180 px вместо телефонных 390. Без предела строка текста растягивается на
   всю ширину, а это та самая претензия Guideline 4 «crowded, laid out ...
   difficult to use».

   Граница 760 px — та же, на которой вся тема переключается между телефонной и
   широкой раскладкой; ниже неё поведение ровно прежнее. 700 px совпадает с
   AdaptiveLayout.maxContentWidth в приложении: нативная колонка и web-колонка
   одной ширины, переход между экранами не прыгает. */
@media (min-width: 761px) {
  html.embed-app #dashboard-root {
    max-width: 700px;
    margin-inline: auto;
  }
}

html.embed-app .content-card {
  padding-top: 16px;
}

/* Страховка: если что-то из оболочки всё же отрисовалось, прячем. */
html.embed-app .topbar,
html.embed-app footer,
html.embed-app .lang-switch,
html.embed-app .topbar-blog {
  display: none !important;
}

/* iOS зумит страницу при фокусе на поле с кеглем меньше 16 px. */
html.embed-app input,
html.embed-app select,
html.embed-app textarea {
  font-size: 16px;
}

@media (forced-colors: active) {
  :focus-visible {
    outline-color: Highlight;
  }

  /* Активный язык в высококонтрастном режиме: подчёркивание цветом
     не работает, поэтому опираемся на системный Highlight. */
  .lang-switch button[aria-pressed="true"] {
    text-decoration-color: Highlight;
  }

  .topbar-tab.active,
  .profile-section-tab.active,
  .onboarding-choice.active,
  .effort-btn.selected {
    border-color: Highlight;
  }

  .bar i,
  .metric-progress i,
  .onboarding-dot.active,
  .onboarding-dot.done {
    background: Highlight;
  }

  .badge-card.earned {
    border-top-color: Highlight;
  }
}


/* ============================================================
   Устройства и код привязки мобильного приложения
   ============================================================ */

.device-code-box {
  margin: 16px 0 8px;
  padding: 18px 20px;
  border: 1px solid var(--line, #d9d9d2);
  border-left: 4px solid var(--accent, #fc4c02);
  background: var(--soft, #efefe9);
}
.device-code-value {
  font-size: clamp(32px, 6vw, 44px);
  font-weight: 850;
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.device-code-value.expired { opacity: .45; text-decoration: line-through; }
.device-list-title { margin: 24px 0 12px; font-size: 15px; font-weight: 800; }
.device-list { list-style: none; margin: 0; padding: 0; }
.device-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line, #d9d9d2);
}
.device-row:last-child { border-bottom: 0; }
.device-row.revoked { opacity: .55; }
.device-row .hint.ok { color: #1f7a35; }
@media (max-width: 760px) {
  .device-row { flex-direction: column; gap: 10px; }
  .device-row .btn { width: 100%; }
}


/* ============================================================
   Навигация: меню аккаунта, ссылка пропуска, экран «Сегодня»
   ============================================================ */

.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 30;
  padding: 10px 16px; background: var(--ink, #171717); color: #fff;
  text-decoration: none; transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.topbar-coach-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--line, #d9d9d2); background: transparent;
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; color: inherit;
}
.topbar-coach-btn svg { width: 18px; height: 18px; }
.topbar-coach-btn:hover { border-color: var(--accent, #fc4c02); }
.topbar-coach-btn.active { border-color: var(--accent, #fc4c02); color: var(--accent, #fc4c02); }

.account-menu { position: relative; }
.account-menu-list {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 25;
  min-width: 220px; padding: 8px 0;
  background: #fff; border: 1px solid var(--line, #d9d9d2);
  box-shadow: 0 18px 44px rgba(23, 23, 23, .14);
  display: flex; flex-direction: column;
}
.account-menu-list button,
.account-menu-list a {
  padding: 11px 18px; border: 0; background: none; font: inherit; font-size: 15px;
  text-align: left; text-decoration: none; color: inherit; cursor: pointer;
}
.account-menu-list button:hover,
.account-menu-list a:hover { background: var(--soft, #efefe9); }
.account-menu-list .account-menu-exit {
  margin-top: 6px; border-top: 1px solid var(--line, #d9d9d2); color: var(--accent, #fc4c02); font-weight: 700;
}

.today-summary { display: grid; gap: 18px; }
.today-card { padding: 22px 24px; border: 1px solid var(--line, #d9d9d2); background: #fff; }
.today-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.today-card h2 { margin: 0 0 14px; font-size: 20px; font-weight: 850; letter-spacing: -.02em; }
.today-card-head h2 { margin-bottom: 0; }
.data-freshness { font-size: 13px; color: var(--muted, #62625e); }
.today-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px 24px; margin: 18px 0 6px;
}
.today-metric-label { display: block; font-size: 13px; color: var(--muted, #62625e); }
.today-metric-value {
  display: block; font-size: 34px; font-weight: 850; line-height: 1.1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  /* Текстовые значения вроде training_status длиннее колонки — переносим. */
  overflow-wrap: anywhere;
}
.today-metric-value small { font-size: 15px; font-weight: 700; margin-left: 2px; }
.today-metric-note { display: block; font-size: 13px; color: var(--muted, #62625e); }
.today-link {
  display: inline-block; margin-top: 14px; font-weight: 800; font-size: 14px;
  text-decoration: underline; text-decoration-color: var(--accent, #fc4c02);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.today-plan .markdown-body { margin-top: 12px; }

@media (min-width: 900px) {
  .today-summary { grid-template-columns: 1fr 1fr; }
  .today-summary .today-card:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .topbar-coach-btn span { display: none; }
  /* На узком экране верхняя ссылка «Блог» не помещается: её дублирует
     пункт в меню аккаунта, а переключатель языка остаётся в шапке. */
  .topbar-blog { display: none; }
  .lang-switch { padding: 0 2px; }
  .lang-switch button { min-height: 44px; padding: 4px 8px; }
  .account-menu-list { right: -8px; min-width: 200px; }
  .today-card { padding: 18px; }
  /* На узком экране заголовок и дата свежести не помещаются в строку —
     иначе «Восстановление» переносится по букве. */
  .today-card-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .today-metrics { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px 16px; }
  .today-metric-value { font-size: 24px; }
}

/* Погода на «Сегодня»: карточка с inline-SVG инфографикой. Кривая температуры,
   столбики осадков, ветер и полоса окна тренировки — всё в одном viewBox. */
.weather-card .weather-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
}
.weather-card .weather-emoji { font-size: 22px; line-height: 1; }
.weather-chart {
  display: block;
  width: 100%;
  height: auto;
  margin: 8px 0 4px;
  overflow: visible;
}
.weather-chart .weather-temp-line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Body Battery: две карточки (утро и вечер) и график серии за день.
   Полосы сна и тренировок — фон под линией, поэтому они идут первыми в SVG. */
.bb-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0 6px;
}

.bb-card {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  background: var(--bg);
}

.bb-card .today-metric-label {
  display: block;
  margin-bottom: 8px;
}

.bb-value {
  display: block;
  font-size: 40px;
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.bb-card .hint {
  margin: 6px 0 0;
}

.bb-facts {
  display: grid;
  gap: 2px;
  margin-top: 12px;
}

.bb-facts .hint {
  margin: 0;
}

/* BB-1: строка итогов под графиком — сон, заряд/расход, цена тренировки. */
.bb-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 18px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.bb-totals dt {
  font-size: 12px;
  color: var(--muted);
}

.bb-totals dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.bb-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 16px;
  overflow: visible;
}

.bb-chart .bb-grid {
  stroke: var(--line);
  stroke-width: 1;
}

.bb-chart .bb-axis,
.bb-chart .bb-mark-label {
  fill: var(--muted);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
}

.bb-chart .bb-line {
  fill: none;
  stroke: var(--text);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.weather-chart .weather-temp-label {
  fill: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.weather-chart .weather-precip-bar {
  fill: var(--info);
  opacity: .55;
}
.weather-chart .weather-wind-label {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.weather-chart .weather-wind-arrow {
  fill: var(--text);
  font-size: 11px;
  font-weight: 700;
}
.weather-chart .weather-hour-icon { font-size: 15px; }
.weather-chart .weather-hour-label {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.weather-chart .weather-window-band {
  fill: var(--orange);
  opacity: .1;
}
.weather-card .weather-conditions {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}
/* Одежда и обувь: отдельный блок внутри карточки погоды, отбит линией. */
.gear-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #e4e7ec);
}
.gear-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 750;
}
.gear-warning {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(252, 76, 2, .10);
  border-left: 3px solid var(--accent, #fc4c02);
  font-size: 13px;
  line-height: 1.45;
}
.gear-summary {
  margin: 0 0 10px;
  font-size: 14px;
}
.gear-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.gear-col h4 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 750;
  color: var(--muted);
}
.gear-line {
  margin: 0 0 4px;
  font-size: 13.5px;
  line-height: 1.5;
}
.gear-label {
  color: var(--muted);
  margin-right: 4px;
}
.gear-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.gear-warmth {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.gear-warmth-btn {
  padding: 6px 12px;
  border: 1px solid var(--line, #e4e7ec);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.gear-warmth-btn.active {
  border-color: var(--accent, #fc4c02);
  background: rgba(252, 76, 2, .10);
  font-weight: 700;
}
.gear-warmth-btn[disabled] { opacity: .5; cursor: default; }
.gear-links {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}
/* На телефоне две колонки не помещаются: одежда, потом обувь. */
@media (max-width: 760px) {
  .gear-cols { grid-template-columns: 1fr; gap: 12px; }
}
/* На узком экране подписи каждые 2 часа сливаются: показываем каждую вторую
   (то есть каждые 4 часа) и уменьшаем кегль. */
@media (max-width: 760px) {
  .weather-chart .weather-temp-label:nth-of-type(even),
  .weather-chart .weather-hour-label:nth-of-type(even),
  .weather-chart .weather-hour-icon:nth-of-type(even),
  .weather-chart .weather-wind-label:nth-of-type(even),
  .weather-chart .weather-wind-arrow:nth-of-type(even) {
    display: none;
  }
  .weather-chart .weather-temp-label,
  .weather-chart .weather-hour-label { font-size: 10px; }
}

/* Энергобаланс: расход, потребление, баланс с цветом по уровню дефицита,
   выводы и риски мелким шрифтом, кнопка анализа модели. */
.energy-breakdown {
  display: grid;
  gap: 4px;
}

.energy-balance-line {
  font-weight: 750;
}

.energy-level-surplus,
.energy-level-mild {
  color: var(--text);
}

.energy-level-moderate {
  color: var(--warning);
}

.energy-level-severe {
  color: var(--danger);
}

.energy-conclusions,
.energy-risks {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.5;
}

.energy-conclusions {
  color: var(--muted);
}

.energy-risks {
  color: var(--danger);
}

.energy-analysis-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.energy-analysis-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

/* Акцентная кнопка анализа: «волшебная палочка» рисуется псевдоэлементом,
   чтобы не тащить иконку в разметку. */
.btn-magic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--orange);
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.btn-magic::before {
  content: "✨";
  font-size: 14px;
  line-height: 1;
}

.btn-magic:hover:not(:disabled) {
  border-color: var(--accent-text);
  background: var(--orange);
  color: var(--text);
}

.btn-magic:disabled {
  border-color: var(--line);
  background: var(--soft);
  color: var(--muted);
}

.energy-analysis {
  margin-top: 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--orange);
  background: var(--soft);
  font-size: 14px;
  line-height: 1.6;
}

.energy-analysis p {
  margin: 0 0 10px;
  color: var(--text);
}

.energy-analysis p:last-child {
  margin-bottom: 0;
}

.bb-chart .bb-sleep {
  fill: var(--info-soft);
}

.bb-chart .bb-workout {
  fill: var(--accent-soft);
}

.bb-chart .bb-mark {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

@media (max-width: 760px) {
  .bb-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .bb-value {
    font-size: 32px;
  }
}

/* Разметка внутри пузыря переписки: ответы бота приходят в markdown, поэтому
   pre-wrap пузыря надо погасить — иначе между абзацами двойные отступы. */
.chat-bubble > .markdown-body {
  white-space: normal;
  font-size: 15px;
  line-height: 1.6;
}

.chat-bubble > .markdown-body > :first-child { margin-top: 0; }
.chat-bubble > .markdown-body > :last-child { margin-bottom: 0; }

/* Гонка: форма загрузки трека, участки по КП и чеклист снаряжения. */
.race-form { display: grid; gap: 14px; }
.race-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.race-form label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.race-form input[type="text"],
.race-form input[type="datetime-local"],
.race-form input[type="file"],
.race-form textarea {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: inherit;
  font: inherit;
}
.race-form textarea { resize: vertical; min-height: 84px; }
.race-form label.race-check { display: flex; align-items: center; gap: 8px; align-self: end; padding-bottom: 9px; }
.race-check input { width: auto; }
.race-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.race-status { font-size: 13px; color: var(--muted); }
.race-result { display: grid; gap: 16px; margin-top: 18px; }
.race-verdict { margin: 0; font-size: 14px; }
.race-verdict.is-ok { color: var(--muted); }
.race-verdict.is-warn { color: #b26a00; }
.race-verdict.is-bad { color: #b3261e; }
.race-legs { display: grid; gap: 8px; }
.race-leg {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) repeat(3, minmax(90px, 1fr));
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
}
.race-leg span { color: var(--muted); }
.race-leg.is-tight { border-color: #e0a03a; }
.race-gear { display: grid; gap: 10px; }
.race-gear h4 { margin: 0; font-size: 15px; }
@media (max-width: 640px) {
  .race-leg { grid-template-columns: 1fr 1fr; }
}

/* Зоны под порогами (THRESH-ZONES-1): компактная таблица, единицы — мелким. */
.zones-block { margin-top: 14px; }
.zones-block > .hint b { color: var(--ink, #111); }
.zones-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.zones-table th, .zones-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.zones-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.zones-table td small { margin-left: 3px; color: var(--muted); font-size: 11px; }
.zones-table td b { font-weight: 800; }
.zones-table td > span { color: var(--muted); }
.zones-table tbody tr:last-child td { border-bottom: 0; }

/* Сворачиваемые секции (LK-SPORT-1): тело раскрывается через grid-rows —
   без измерения высоты и без скачка раскладки; шеврон поворачивается. */
.collapsible .section-head { margin-bottom: 0; }
.collapsible[data-collapsed="false"] .section-head { margin-bottom: 14px; }
.collapsible-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease;
}
.collapsible[data-collapsed="true"] .collapsible-body { grid-template-rows: 0fr; }
.collapsible-body > div { min-height: 0; overflow: hidden; }
.collapse-toggle svg { transition: transform 0.25s ease; }
.collapsible[data-collapsed="true"] .collapse-toggle svg { transform: rotate(-90deg); }
/* LK-SPORT-2: сводка видна только у свёрнутого раздела; подпись под заголовком —
   только у развёрнутого. Кнопка «Свернуть всё» — над вкладкой «Прогресс». */
.collapsible-summary { display: none; margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.collapsible-summary b { color: var(--text); font-weight: 600; }
.collapsible[data-collapsed="true"] .collapsible-summary { display: block; }
.collapsible[data-collapsed="true"] .section-head p:not(.collapsible-summary) { display: none; }
.progress-section { margin-top: 0; }
/* METHOD-1B: карточка «Методика подготовки» на вкладке «План». */
.method-card { margin-bottom: var(--space-4); }
.method-facts { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 14px; color: var(--muted); }
.method-facts b { color: var(--text); font-weight: 600; }
.method-principles { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.method-principles li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.method-read { flex: 0 0 auto; white-space: nowrap; }
.method-section { margin-top: 8px; }
.progress-toolbar { display: flex; justify-content: flex-end; margin-bottom: -8px; }
@media (prefers-reduced-motion: reduce) {
  .collapsible-body, .collapse-toggle svg { transition: none; }
}

/* Объёмы и план по видам спорта (DEMO-SWIM-2B): список карточек прогресса
   с переключателем Неделя/Месяц; вертикаль — второй строкой у бега и вело. */
.sport-volume-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 6px;
}
.sport-volume-head h4 { margin: 0; font-size: 14px; }
.sport-volume-periods { display: inline-flex; gap: 4px; }
.sport-volume-periods button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.sport-volume-periods button[aria-pressed="true"] {
  color: var(--ink, #111);
  border-color: var(--orange);
  box-shadow: inset 0 -2px 0 var(--orange);
}
.sport-volume-list { margin-bottom: 14px; }
.sport-volume-row { display: block; width: 100%; text-align: left; }
button.sport-volume-row {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
button.sport-volume-row:last-child { border-bottom: 0; }
.sport-volume-elevation {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.sport-volume-elevation b { font-weight: 700; color: inherit; }

/* Иконка «волшебной палочки» кнопки анализа — маской, а не inline-SVG: в блоке
   веса тесты считают графики по числу <svg>, и иконка не должна быть третьим. */
.btn-magic-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8L12 3zM19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9L19 15zM5 14l.7 1.6L7.3 16.3l-1.6.7L5 18.6l-.7-1.6L2.7 16.3l1.6-.7L5 14z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8L12 3zM19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9L19 15zM5 14l.7 1.6L7.3 16.3l-1.6.7L5 18.6l-.7-1.6L2.7 16.3l1.6-.7L5 14z'/></svg>") center / contain no-repeat;
}


/* SHARE-1: окно с картинкой тренировки. */
.share-image-dialog { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; }
.share-image-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.share-image-card { position: relative; max-width: min(92vw, 520px); max-height: 92vh;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.share-image-card img { width: 100%; height: auto; border-radius: 4px; display: block; }
.share-image-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.share-image-actions button, .share-image-actions a { font: inherit; padding: 8px 12px;
  border: 1px solid var(--control-line); border-radius: var(--radius); background: var(--card);
  color: var(--text); text-decoration: none; cursor: pointer; }
.share-activity-btn { font-size: 16px; line-height: 1; background: none; border: 0; cursor: pointer; }

/* LK-INTEG-1: «Подключения» — плитки и гайды */
.integ-screen { display: flex; flex-direction: column; gap: 24px; }
.integ-group h3 { margin: 0 0 16px; font-size: 18px; font-weight: 700; }
.integ-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .integ-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .integ-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.integ-tile {
  appearance: none; display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px; min-width: 0; min-height: 112px; padding: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.integ-tile:hover { box-shadow: 0 4px 14px rgb(0 0 0 / 8%); }
.integ-tile:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.integ-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%; background: var(--muted); color: #fff; font-weight: 700;
}
.integ-icon-garmin { background: #007CC3; }
.integ-icon-strava { background: #FC4C02; }
.integ-icon-polar { background: #D10027; }
.integ-icon-coros { background: #1F1F1F; }
.integ-icon-telegram { background: #229ED9; }
.integ-icon-max { background: #6B4EFF; }
.integ-icon-fatsecret { background: #7AB800; }
.integ-icon-apple_health, .integ-icon-scales { background: #FF2D55; }
.integ-icon-iphone { background: #111; }
.integ-title { font-weight: 700; }
.integ-status { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.is-connected .integ-status { color: #25834d; }
.is-connected .integ-status::before { content: '●'; margin-right: 5px; }
.integ-tile.is-soon { opacity: .7; }
.integ-guide {
  width: 100%; max-width: 640px; margin: 0 auto; padding: 24px; box-sizing: border-box;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.integ-guide-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.integ-guide-head h2 { margin: 0; font-size: 22px; }
.integ-progress { height: 6px; overflow: hidden; border-radius: 3px; background: var(--line); }
.integ-progress span { display: block; height: 100%; background: var(--accent-text); }
.integ-step-count { font-size: 12px; color: var(--muted); }
.integ-step-title { margin: 0 0 12px; font-size: 20px; }
.integ-guide-form, #integrations-admin-form { display: flex; flex-direction: column; gap: 12px; }
.integ-guide-form input, .integ-guide-form textarea { width: 100%; min-width: 0; box-sizing: border-box; }
/* Колонка формы растягивает дочерние кнопки на всю ширину — вспомогательные («Копировать», «Показать код») держим по содержимому. */
.integ-guide-form > .btn, .integ-guide-form > a.hint { align-self: flex-start; }
.integ-back { white-space: nowrap; flex: none; }
.integ-step-count { margin: 6px 0 0; }
.integ-guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.integ-next { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.integ-done { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: #25834d; color: #fff; font-size: 40px; }
.integ-qr svg { display: block; width: 100%; max-width: 180px; height: auto; }
.integ-wait { display: flex; align-items: center; gap: 12px; }
.integ-wait::before { content: ''; width: 20px; height: 20px; flex: 0 0 auto; border: 3px solid var(--line); border-top-color: var(--accent-text); border-radius: 50%; animation: integ-spin 1s linear infinite; }
@keyframes integ-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .integ-wait::before { animation: none; } }
.integ-advanced { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }
.integ-advanced summary { cursor: pointer; font-weight: 600; }
.integ-advanced[open] summary { margin-bottom: 16px; }
@media (max-width: 767px) {
  .integ-guide { padding: 16px; }
  .integ-guide-head { align-items: flex-start; gap: 10px; }
  .integ-guide-actions .integ-next { width: 100%; }
}
html.embed-app .integ-guide { max-width: none; }
html.embed-app .integ-qr { display: none; }
/* COROS-C4: переключатель «Отправлять план на часы» — чекбокс в строку с подписью, не на всю ширину колонки формы. */
.integ-switch { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.integ-switch input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent, #fc4c02); }

/* REFERRAL-1: длинные ссылки сужаются внутри карточки, чтобы мобильный экран не прокручивался по горизонтали. */
.referral-card { grid-column: 1 / -1; min-width: 0; }
.referral-description { color: var(--muted); line-height: 1.6; }
.referral-link { min-width: 0; margin: 16px 0; }
.referral-link-row { display: flex; gap: 12px; margin-top: 8px; min-width: 0; }
.referral-link-row input { flex: 1; min-width: 0; width: 0; padding: 12px; border: 1px solid var(--control-line); border-radius: 8px; background: var(--card); color: var(--text); }
.referral-stats { display: flex; flex-wrap: wrap; gap: 24px; margin: 24px 0; }
.referral-stats div { display: grid; gap: 8px; color: var(--muted); }
.referral-stats strong { font-size: 24px; color: var(--text); }
.referral-stats .referral-balance { font-size: 32px; color: var(--accent-text); }
.referral-history { list-style: none; padding: 0; margin: 0; }
.referral-history-row { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.referral-history-row time { flex-shrink: 0; color: var(--muted); }
@media (max-width: 600px) {
  .referral-link-row { flex-wrap: wrap; }
  .referral-link-row input { flex-basis: 100%; width: 100%; box-sizing: border-box; }
  .referral-link-row button { width: 100%; }
  .referral-history-row { flex-wrap: wrap; gap: 6px; }
}

/* MCP-1: Изолированные стили сохраняют читаемость согласия без оболочки кабинета. */
.mcp-consent-page { padding: 24px 16px; background: var(--bg); color: var(--text); }
.mcp-brand { max-width: 560px; margin: 0 auto 20px; font-size: 24px; font-weight: 800; }
.mcp-consent-card { box-sizing: border-box; max-width: 560px; margin: auto; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow-wrap: anywhere; }
.mcp-consent-card h1 { font-size: 24px; line-height: 1.3; }
.mcp-consent-card li { margin-bottom: 10px; }
.mcp-consent-card label { display: flex; gap: 12px; align-items: flex-start; }
.mcp-consent-card input[type=checkbox] { flex: 0 0 auto; width: 20px; height: 20px; }
.mcp-consent-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.mcp-consent-actions .btn { min-height: 44px; }
.integ-icon-mcp { background: var(--soft); color: var(--text); }
.mcp-connection { border-top: 1px solid var(--line); padding: 16px 0; overflow-wrap: anywhere; }
.mcp-connection dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mcp-connection dd { margin: 0; }

/* MCP-KEY-1: Длинный секрет и текст согласия должны помещаться на узком экране. */
.mcp-key-block { margin: 24px 0; padding: 16px; border: 1px solid var(--border, #ccc); border-radius: 12px; }
.mcp-key-block input:not([type="checkbox"]) { width: 100%; min-width: 0; box-sizing: border-box; }
.mcp-key-check { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0; }
.mcp-key-check input { flex-shrink: 0; margin-top: 4px; }
.mcp-key-block [data-mcp-secret] { margin-top: 16px; overflow-wrap: anywhere; }

/* GARMIN-MFA-3: заметная строка в момент ожидания кода 2FA — «может прийти через 1–2 минуты и попасть в Спам». */
.garmin-mfa-wait {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--soft);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}
#garmin-mfa-timer { font-variant-numeric: tabular-nums; }

/* NAV-FIT-1 (18.10.2026): с «Силовой» и «Специалистами» в верхнем меню шесть вкладок — с иконками они не
   помещались в шапку 1140 px и наезжали друг на друга. На десктопе (меню в одной строке с логотипом)
   вкладки без иконок и без переноса подписи; ниже 1100 px меню уходит вторым рядом, иконки остаются. */
@media (min-width: 1101px) {
  .topbar-nav { gap: 2px; }
  .topbar-nav .topbar-tab { flex: 0 1 auto; gap: 6px; padding: 10px 12px; white-space: nowrap; }
  .topbar-nav .topbar-tab > svg { display: none; }
}

/* ==========================================================================
   IOS-DARK-1: точечные правки тёмной темы приложения (только :root[data-theme="dark"]).
   Токены перекрыты выше; здесь — места с зашитыми светлыми цветами.
   ========================================================================== */

/* Оранжевая заливка: на ней всегда тёмный текст (светлый --text даёт 2.9:1). */
:root[data-theme="dark"] ::selection,
:root[data-theme="dark"] .btn.primary,
:root[data-theme="dark"] .btn.btn-primary,
:root[data-theme="dark"] .plan-pay,
:root[data-theme="dark"] .oc-open:not(.ghost),
:root[data-theme="dark"] .btn-magic:hover:not(:disabled) { color: #171717; }
:root[data-theme="dark"] .oc-open.ghost { color: var(--accent-text); }

/* Поля ввода: оформленные берут токены, неоформленные — тёмные системные (color-scheme: dark). */
:root[data-theme="dark"] .integ-guide-form input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="dark"] .integ-guide-form textarea,
:root[data-theme="dark"] #integrations-admin-form input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="dark"] #integrations-admin-form textarea { background-color: var(--card); color: var(--text); border: 1px solid var(--control-line); }

/* Рамки статусных меток и дней серии — светлые оттенки заменены тёмными. */
:root[data-theme="dark"] .billing-pill,
:root[data-theme="dark"] .email-status-badge.ok,
:root[data-theme="dark"] .oc-badge,
:root[data-theme="dark"] .backlog-status.done,
:root[data-theme="dark"] .streak-day.is-counted,
:root[data-theme="dark"] .streak-day.is-rest { border-color: #2f5a3c; }
:root[data-theme="dark"] .billing-pill.warn,
:root[data-theme="dark"] .email-status-badge:not(.ok),
:root[data-theme="dark"] .oc-badge.pending,
:root[data-theme="dark"] .backlog-status.waiting,
:root[data-theme="dark"] .streak-day.is-overload { border-color: #6b5520; }
:root[data-theme="dark"] .backlog-status.new,
:root[data-theme="dark"] .backlog-status.triage,
:root[data-theme="dark"] .chat-message.inbound .chat-bubble { border-color: #6e3a20; }
:root[data-theme="dark"] .backlog-status.planned,
:root[data-theme="dark"] .backlog-status.in_progress { border-color: #2f4f66; }
:root[data-theme="dark"] .streak-day.is-missed { border-color: #6e2f2b; }

/* Белые подложки карточек и меню. QR (.oc-qr) остаётся белым — иначе не считывается. */
:root[data-theme="dark"] .account-menu-list,
:root[data-theme="dark"] .today-card { background: var(--card); }
:root[data-theme="dark"] .account-menu-list { box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .skip-link { color: var(--bg); }
:root[data-theme="dark"] .modal-backdrop,
:root[data-theme="dark"] .share-image-backdrop { background: rgba(0, 0, 0, .7); }

/* Подключения и устройства. */
:root[data-theme="dark"] .is-connected .integ-status,
:root[data-theme="dark"] .device-row .hint.ok { color: var(--success); }
:root[data-theme="dark"] .integ-icon-coros,
:root[data-theme="dark"] .integ-icon-iphone { background: #3a3c42; }
:root[data-theme="dark"] .integ-tile:hover { box-shadow: 0 4px 14px rgb(0 0 0 / 40%); }
:root[data-theme="dark"] .weight-block details { border-top-color: var(--line); }

/* Игра: рейтинг, легенда, гонки. Цвета территории (зелёная/красная) не трогаем — они общие с картой. */
:root[data-theme="dark"] .board-move.is-up { color: #4ade80; }
:root[data-theme="dark"] .board-move.is-down { color: #f87171; }
:root[data-theme="dark"] .game-legend-item .is-route { background: #c9c9c1; }
:root[data-theme="dark"] .game-legend-item .is-zone { background: #3a3c42; }
:root[data-theme="dark"] .race-verdict.is-warn { color: var(--warning); }
:root[data-theme="dark"] .race-verdict.is-bad { color: var(--danger); }
:root[data-theme="dark"] .volume-chart rect[fill="#dfe4ea"],
:root[data-theme="dark"] .chart-legend .bars i { fill: #6b6d66; background: #6b6d66; }

/* Leaflet: контролы и попапы рисуются белыми из leaflet.css. Фон самой карты и плашку
   «подложка недоступна» ведёт game-map.js — их не перекрываем. */
:root[data-theme="dark"] .leaflet-bar { border-color: rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .leaflet-bar a,
:root[data-theme="dark"] .leaflet-bar a:hover { background-color: var(--card); color: var(--text); border-bottom-color: var(--line); }
:root[data-theme="dark"] .leaflet-bar a.leaflet-disabled { background-color: var(--soft); color: var(--muted); }
:root[data-theme="dark"] .leaflet-control-attribution { background: rgba(27, 28, 31, .82); color: var(--muted); }
:root[data-theme="dark"] .leaflet-control-attribution a { color: var(--accent-text); }
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip { background: var(--card); color: var(--text); box-shadow: 0 3px 14px rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .leaflet-container a.leaflet-popup-close-button { color: var(--muted); }

/* CLUB-1: подсказка под полем «Спортивный клуб» — вплотную к полю, как подпись. */
.profile-card .form-field .sport-club-hint {
  margin: 0;
  font-size: 12px;
}