/* =========================================================================
   pages.css — page-specific styles
   ========================================================================= */

/* ---------- Dashboard ---------------------------------------------------- */
.dash-hero {
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-surface), var(--bg-base));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
}
.dash-hero__player { display: flex; gap: var(--sp-4); align-items: center; }
.dash-hero__avatar {
  width: 72px; height: 72px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 24px;
  color: #0B1014;
  position: relative;
  border: 1px solid var(--border-strong);
}
.dash-hero__avatar::after {
  content: ""; position: absolute; right: -2px; bottom: -2px;
  width: 18px; height: 18px;
  background: var(--bg-base);
  border-radius: 50%;
  display: grid; place-items: center;
}
.dash-hero__avatar--img {
  background: none;
  object-fit: cover;
  padding: 0;
}
.dash-hero__name {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.dash-hero__name .handle { color: var(--text-muted); font-weight: 500; font-family: var(--font-mono); font-size: var(--fs-md); margin-left: var(--sp-2); }
.dash-hero__rank-row { display: flex; align-items: center; gap: var(--sp-3); margin-top: 6px; }
.dash-hero__rank-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 2px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dash-hero__score {
  text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.dash-hero__score .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dash-hero__score .val {
  font-family: var(--font-mono);
  font-size: var(--fs-5xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-primary);
  display: flex; align-items: baseline; gap: var(--sp-2);
}
/* Fix 2026-07-14: цвет по направлению (был захардкожен --improve — ▼ красилась зелёным). */
.dash-hero__score .val .delta      { font-size: var(--fs-md); font-weight: 600; color: var(--text-muted); }
.dash-hero__score .val .delta.up   { color: var(--improve); }
.dash-hero__score .val .delta.down { color: var(--bad); }
.dash-hero__score .desc { font-size: var(--fs-xs); color: var(--text-secondary); max-width: 280px; }

/* Activity strip (last 7 days) */
.activity-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-1);
  margin-top: var(--sp-4);
}
.activity-strip__day {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: var(--sp-2) 4px;
  background: var(--bg-raised);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  border: 1px solid transparent;
  transition: border-color var(--t-fast);
}
.activity-strip__day:hover { border-color: var(--border-strong); }
.activity-strip__day .marks { display: flex; gap: 2px; }
.activity-strip__day .marks span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bg-input);
}
.activity-strip__day .marks span.t { background: var(--accent); }
.activity-strip__day .marks span.m { background: var(--good); }
.activity-strip__day .marks span.l { background: var(--bad); }
/* Hollow training marker — план есть, не выполнено (включая будущие дни и просроченные) */
.activity-strip__day .marks span.t--planned {
  background: transparent;
  border: 1px solid var(--accent);
}
/* Hollow MM-day marker — план есть, матч ещё не сыгран */
.activity-strip__day .marks span.m--planned {
  background: transparent;
  border: 1px solid var(--good);
}
/* Rest-day icon */
.activity-strip__day .marks span.r {
  width: 14px; height: 14px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.activity-strip__day .marks span.r svg { width: 14px; height: 14px; }
.activity-strip__day.rest .day-count { color: var(--text-muted); }
.activity-strip__day.today { background: var(--accent-soft); color: var(--accent); }

/* Legend под activity-strip — объясняет, что значат цветные точки. */
.activity-strip__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  padding: 0 var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.activity-strip__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.activity-strip__legend-item .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.activity-strip__legend-item .dot.t { background: var(--accent); }
.activity-strip__legend-item .dot.m { background: var(--good); }
.activity-strip__legend-item .dot.l { background: var(--bad); }
.activity-strip__legend-item .dot.t.t--planned {
  background: transparent;
  border: 1px solid var(--accent);
}
.activity-strip__legend-item .dot.m.m--planned {
  background: transparent;
  border: 1px solid var(--good);
}
.activity-strip__legend-item .dot.dot--rest {
  background: transparent;
  width: auto;
  font-size: 10px;
  line-height: 1;
}

/* Today's training list */
.today-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.today-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast);
}
.today-item:hover { border-color: var(--border-strong); }

/* Completed / skipped dimming.
   ВАЖНО: opacity НЕ применяется к .today-item целиком — это создаёт
   stacking-context, который каскадно делает прозрачным popup-меню
   (.plan-mark__menu сидит ВНУТРИ .today-item на /plan), и dropdown
   становится нечитаемым. Дим только видимый контент (title/meta/dur),
   menu остаётся 100%-opaque. */
.today-item.done .today-item__title,
.today-item.done .plan-item__title {
    color: var(--text-muted);
    text-decoration: line-through;
}
.today-item.done .today-item__meta,
.today-item.done .plan-item__meta,
.today-item.done .plan-item__top,
.today-item.done .today-item__dur {
    opacity: 0.6;
}

.today-item.skipped .plan-item__title {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-style: dashed;
}
.today-item.skipped .plan-item__meta,
.today-item.skipped .plan-item__top,
.today-item.skipped .today-item__dur {
    opacity: 0.55;
}
.today-item__check {
  width: 28px; height: 28px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: transparent;
  cursor: pointer;
  transition: all var(--t-fast);
}
.today-item__check:hover { border-color: var(--accent); }
.today-item.done .today-item__check {
  background: var(--good); border-color: var(--good); color: #0B1014;
}
.today-item__title { font-size: var(--fs-sm); font-weight: 600; }
.today-item__meta {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-secondary);
  margin-top: 2px;
}
.today-item__meta .dot { color: var(--text-disabled); }
.today-item__dur {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  padding: 3px 8px;
  background: var(--bg-input);
  border-radius: var(--r-xs);
}

/* ---------- Tables ------------------------------------------------------- */
.table {
  width: 100%;
  font-size: var(--fs-sm);
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.table tbody td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border-muted);
}
.table tbody tr:hover td { background: var(--bg-raised); }
.table .mono, .table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table .num { text-align: right; }

/* ---------- Map silhouette bg (subtle, for stat/training-plan headers) --- */
.map-silhouette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    linear-gradient(transparent 95%, var(--accent) 95%),
    linear-gradient(90deg, transparent 95%, var(--accent) 95%);
  background-size: 24px 24px;
}

/* ---------- Login / Register pages -------------------------------------- */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg-base);
}
.auth-side {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 50%),
    linear-gradient(135deg, var(--bg-surface), var(--bg-base));
  padding: var(--sp-10);
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth-side__grid {
  position: absolute; inset: 0; opacity: 0.06;
  background-image:
    linear-gradient(to right, var(--text-primary) 1px, transparent 1px),
    linear-gradient(to bottom, var(--text-primary) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.auth-form-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-10);
}
.auth-form {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
@media (max-width: 1023px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { display: none; }
}

/* ---------- Landing ------------------------------------------------------ */
.landing-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-8);
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg-base) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.landing-hero {
  padding: var(--sp-16) var(--sp-8);
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}
@media (max-width: 1023px) {
  .landing-hero { grid-template-columns: 1fr; }
}
.landing-hero h1 {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.landing-hero h1 em { font-style: normal; color: var(--accent); }
.landing-hero .lead {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  max-width: 540px;
  margin: var(--sp-4) 0 var(--sp-6);
  line-height: 1.55;
}


/* ---------- Dashboard — layout / section spacing (refactored inline styles) ---- */
.dash-section { margin-bottom: var(--sp-4); }
.dash-hero__elo { font-size: var(--fs-xs); color: var(--text-muted); }
.dash-hero__cta-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.activity-strip__day .day-count { color: var(--text-secondary); }
.activity-strip__day .day-count--muted { color: var(--text-muted); }
.activity-strip__day.today .day-label { color: var(--accent); }

.dash-card--flush { padding: 0; }
.dash-card--flush .card__header { margin: 0; }
.dash-card__body { padding: 0 var(--sp-5) var(--sp-3); }
.dash-card__body--list { padding: 4px var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: 6px; }

.today-progress { margin-bottom: var(--sp-4); }

.coach-focus-accent { color: var(--accent); font-weight: 600; }

.skill-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5) var(--sp-8);
}
.skill-grid .kpi-mini {
  margin-bottom: var(--sp-2);
  justify-content: space-between;
  width: 100%;
}
.skill-delta { font-size: 11px; }
.skill-delta.up   { color: var(--improve); }
.skill-delta.down { color: var(--bad); }
.skill-delta.flat { color: var(--text-muted); }

.week-summary { display: flex; flex-direction: column; gap: var(--sp-4); }
.week-summary__ring-row { display: flex; align-items: center; gap: var(--sp-3); }
.week-summary__ring-value {
  font-size: var(--fs-3xl);
  font-weight: 700;
  font-family: var(--font-mono);
}
.week-summary__ring-value .unit { font-size: var(--fs-md); color: var(--text-muted); }
.week-summary__ring-caption { font-size: var(--fs-xs); color: var(--text-secondary); }
.week-summary .kpi-mini { justify-content: space-between; }
.week-summary__matches-tail { color: var(--improve); font-weight: 500; }

.dash-footer {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}

/* ---------- Shared shell extras (sidebar/topbar/dropdown) -------------- */
.sidebar__steam-meta { line-height: 1.2; }
.topbar__profile-chev { color: var(--text-muted); }

.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: none;
  z-index: 30;
}
.dropdown.open { display: block; }
.dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
.dropdown__item:hover { background: var(--bg-raised); color: var(--text-primary); }
.dropdown__item--danger { color: var(--bad); }
.dropdown__sep { height: 1px; background: var(--border); margin: 4px 0; }
.topbar__profile-wrap { position: relative; }

/* ---------- Matches list page ------------------------------------------- */
.matches-kpi-row { margin-bottom: var(--sp-4); }
.matches-kpi__mapname { font-size: 22px; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}
.filter-bar__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.filter-bar__group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-bar__sep {
  width: 1px;
  height: 18px;
  background: var(--border);
}
.filter-bar__spacer { flex: 1 1 0; }

/* Filter chips rendered as <a> still pick up .chip styles, but reset link defaults. */
a.chip { text-decoration: none; }

.matches-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Make .match-row clickable as <a>. */
a.match-row--link { text-decoration: none; color: inherit; cursor: pointer; }
a.match-row--link:hover .match-row__chev { color: var(--accent); }

/* Pagination */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.pagination__range { color: var(--text-primary); }
.pagination__pages {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pagination__btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
}
.pagination__btn:hover { background: var(--bg-raised); color: var(--text-primary); }
.pagination__btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.pagination__btn--disabled { color: var(--text-disabled); pointer-events: none; }
.pagination__ellipsis {
  display: grid; place-items: center;
  min-width: 24px; height: 32px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ---------- Match details page ------------------------------------------ */
.match-detail-hero {
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-base));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-6);
  align-items: center;
  margin-bottom: var(--sp-6);
}
.match-detail-hero__side {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.match-detail-hero__side:first-child { text-align: left; align-items: flex-start; }
.match-detail-hero__side:last-child { text-align: right; align-items: flex-end; }
.match-detail-hero__side .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.match-detail-hero__side .score {
  font-family: var(--font-mono);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-primary);
}
.match-detail-hero__side.win .score  { color: var(--good); }
.match-detail-hero__side.loss .score { color: var(--bad); }

.match-detail-hero__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.match-detail-hero__map-badge { font-size: var(--fs-sm); }
.match-detail-hero .vs {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  letter-spacing: 0.12em;
}
.match-detail-hero__result-badge { font-size: 11px; }

.match-detail-scorecard { padding: 0; margin-bottom: var(--sp-6); }
.match-detail-scorecard .card__header { margin: 0; }
.match-detail-scorecard__grid {
  padding: var(--sp-4);
  gap: var(--sp-3);
}

.side-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.side-badge--ct { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.side-badge--t  { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }

.match-detail-others { margin-bottom: var(--sp-6); }

/* ---------- Stats page -------------------------------------------------- */
.stats-period-chips { display: flex; gap: 6px; }
.stats-period-chips a.chip { text-decoration: none; }

.stats-kpi-row { margin-bottom: var(--sp-4); }
.stats-trend-row { margin-bottom: var(--sp-4); }

.stats-card { margin-bottom: var(--sp-4); }
.stats-card:last-child { margin-bottom: 0; }

/* Trend cards (KAST / ADR) */
.stats-trend-card__latest {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.stats-trend-card__latest-value {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
}
.stats-trend-card__latest-label {
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stats-trend-card__chart {
  position: relative;
  min-height: 180px;
}

/* Chart canvas placeholders (Chart.js wiring lands in Task 17) */
.chart-canvas { display: block; width: 100%; }
.chart-canvas--sm { height: 160px; }
.chart-canvas--md { height: 180px; }
.chart-canvas--lg { height: 240px; }
.chart-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Map breakdown rows */
.map-stats { display: flex; flex-direction: column; gap: 4px; }
.map-stat-row {
  display: grid;
  grid-template-columns: 180px 1fr 70px 70px 70px;
  gap: var(--sp-3);
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
}
.map-stat-row:hover { background: var(--bg-raised); }
.map-stat-row--head {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.map-stat-row--head:hover { background: transparent; }
.map-stat-row__bar {
  height: 8px;
  background: var(--bg-input);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.map-stat-row__bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}
.map-stat-row__bar-fill.good { background: var(--good); }
.map-stat-row__bar-fill.bad  { background: var(--bad); }
.map-stat-row .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* CT vs T side comparison */
.side-comp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.side-comp__half {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.side-comp__half:first-child { border-right: 1px solid var(--border); }
.side-comp__title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 700;
}
.side-comp__title .side-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.12em;
}
.side-comp__title .side-tag.t  { background: var(--accent-soft); color: var(--accent); }
.side-comp__title .side-tag.ct { background: var(--good-soft);   color: var(--good); }
.side-comp__row {
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--fs-xs);
}
.side-comp__row .lbl {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.side-comp__row .track {
  height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
}
.side-comp__row .fill { height: 100%; background: var(--accent); }
.side-comp__row .val {
  font-family: var(--font-mono);
  font-weight: 600;
  text-align: right;
}

.stats-side-donut {
  position: relative;
  margin-top: var(--sp-4);
  min-height: 160px;
}

/* Weapons (STUB) */
.weapon-list { display: flex; flex-direction: column; }
.weapon-row {
  display: grid;
  grid-template-columns: 28px 1fr 1fr 70px 70px;
  gap: var(--sp-3);
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-muted);
  font-size: var(--fs-sm);
}
.weapon-row:last-child { border-bottom: 0; }
.weapon-row--head {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 0;
  padding-bottom: 4px;
}
.weapon-icon {
  width: 28px;
  height: 28px;
  background: var(--bg-raised);
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  color: var(--accent);
}
.weapon-row__bar {
  height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
}
.weapon-row__bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}
.weapon-row__bar-fill.good { background: var(--good); }
.weapon-row__bar-fill.bad  { background: var(--bad); }
.weapon-row .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- Coach Analysis ---------------------------------------------- */
.coach-section { margin-bottom: var(--sp-6); }

/* Hero: огромный score + verdict + radar */
.coach-score-hero {
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg-surface), var(--bg-base));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--sp-6);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.coach-score-hero__verdict {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.coach-score-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.coach-score-hero__title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.coach-score-hero__lead {
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: 1.6;
  max-width: 640px;
}
.coach-score-hero__score-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-4);
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  position: relative;
  z-index: 1;
}
.coach-score-hero__score-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.coach-score-hero__score-value {
  font-family: var(--font-mono);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
}
.coach-score-hero__score-delta {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.coach-score-hero__score-delta.up   { color: var(--improve); }
.coach-score-hero__score-delta.down { color: var(--bad); }
.coach-score-hero__score-delta.flat { color: var(--text-muted); }

/* iter 7c: sparkline блок «История · N цикл(ов)» внутри coach-score-hero. */
.coach-score-hero__spark {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.coach-score-hero__spark-label,
.coach-score-hero__spark-hint {
  font-size: 11px;
  color: var(--text-muted, #6c757d);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.coach-score-hero__spark-canvas {
  flex: 1;
  height: 32px;
  max-width: 200px;
}
.coach-score-hero__spark--empty {
  opacity: 0.6;
}

/* Radar canvas wrap — соседнее место для chart.js.
   Высота ФИКСИРОВАНА (не min-height), иначе Chart.js с
   responsive:true + maintainAspectRatio:false уходит в бесконечный
   resize-loop: canvas style.height растёт → flex-item растёт →
   контейнер растёт (если только min-height) → ResizeObserver → grow.
   Канвас БЕЗ CSS width/height — Chart.js сам ставит inline размеры. */
.coach-radar-wrap {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  height: 400px;
}
.coach-radar-wrap__title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.coach-radar-wrap canvas {
  flex: 1 1 auto;
  min-height: 0;
}
.coach-radar-wrap__note {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
  margin-top: var(--sp-2);
}

/* Session-fatigue баннер (поведенческий инсайт) */
.stats-fatigue-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent, #F7A12A);
  border-radius: var(--radius-md, 10px);
  background: var(--bg-surface);
  font-size: 14px;
  color: var(--text-primary);
}
.stats-fatigue-banner .ico {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--accent, #F7A12A);
}
/* design §3.7.4: тильт-баннер — красноватый акцент (отличить от усталости). */
.stats-tilt-banner { border-left-color: var(--bad); }
.stats-tilt-banner .ico { color: var(--bad); }

/* Прогресс с начала тренировок (before/after) на /stats */
.progress-block {
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  background: var(--bg-surface);
}
.progress-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}
.progress-block__title {
  font-weight: 700;
  color: var(--text-primary);
}
.progress-block__note {
  font-size: 12px;
  color: var(--accent, #F7A12A);
}
/* Peer-бенчмарк (design §3.7.1): «ты vs твой тир» — строки метрик с вердиктом. */
.stats-benchmark { display: flex; flex-direction: column; }
.stats-benchmark__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border-muted);
  font-size: var(--fs-sm);
}
.stats-benchmark__row:last-child { border-bottom: none; }
.stats-benchmark__metric { flex: 1 1 40%; font-weight: 600; }
.stats-benchmark__values { display: inline-flex; align-items: baseline; gap: 6px; }
.stats-benchmark__you { color: var(--text-primary); font-weight: 600; }
.stats-benchmark__vs { color: var(--text-muted); font-size: var(--fs-xs); }
.stats-benchmark__tier { color: var(--text-secondary); }
.stats-benchmark__verdict {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stats-benchmark__verdict--good { color: var(--good); background: var(--good-soft); }
.stats-benchmark__verdict--bad  { color: var(--bad);  background: var(--bad-soft); }
.stats-benchmark__verdict--flat { color: var(--text-muted); background: var(--bg-raised); }
.stats-benchmark__caption {
  margin-top: var(--sp-3);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Сила лобби (design §3.4): confounder-строка над ярусами. Цвет по полярности роста. */
.progress-block__lobby {
  margin: 0 0 var(--sp-3);
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--text-muted);
  background: var(--bg-raised);
  color: var(--text-secondary);
}
.progress-block__lobby--up   { border-left-color: var(--good); }
.progress-block__lobby--down { border-left-color: var(--bad); }
.progress-block__lobby--flat { border-left-color: var(--text-muted); }
.progress-block__tiers { gap: var(--sp-3); }
.progress-block__caption {
  margin-top: var(--sp-3);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}
.progress-tier { padding: var(--sp-3); }
.progress-tier__title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.progress-tier__empty { font-size: 12px; color: var(--text-muted); }
.progress-tier__row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 0;
  border-top: 1px solid var(--border);
}
.progress-tier__row:first-of-type { border-top: none; }
.progress-tier__label {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--text-secondary);
}
.progress-tier__values {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.progress-tier__before { color: var(--text-muted); }
.progress-tier__arrow { color: var(--text-muted); }
.progress-tier__after { color: var(--text-primary); font-weight: 600; }
.progress-tier__delta {
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
}
.progress-tier__delta.up   { color: var(--improve, #5BD68A); }
.progress-tier__delta.down { color: var(--bad, #E74C3C); }
.progress-tier__delta.flat { color: var(--text-muted); }

/* Coach feedback (Фаза 4 eval) */
.coach-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-surface);
}
.coach-feedback__label {
  font-weight: 600;
  color: var(--text-primary);
}
.coach-feedback__buttons {
  display: flex;
  gap: var(--sp-2);
  margin-left: auto;
}
.coach-feedback__note {
  flex-basis: 100%;
  order: 3;
  font-size: 12px;
  color: var(--text-secondary);
}
.coach-feedback__textarea {
  width: 100%;
  margin-top: var(--sp-2);
  padding: var(--sp-2);
  background: var(--bg-base, var(--bg-surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}

/* Section heads (Strengths / Weaknesses) */
.coach-insights-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--sp-2) 0 var(--sp-3);
  gap: var(--sp-3);
}
.coach-insights-head__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.coach-insights-head__title.strength .icon { color: var(--good); }
.coach-insights-head__title.weakness .icon { color: var(--bad); }
.coach-insights-head__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Insight card */
.insight-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  border-left: 3px solid var(--border-strong);
  position: relative;
}
.insight-card--strength { border-left-color: var(--good); }
.insight-card--weakness { border-left-color: var(--bad); }
.insight-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.insight-card__title {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.insight-card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.insight-card__body {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.55;
}
.insight-card__quote {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--bg-raised);
  border-radius: var(--r-xs);
  padding: 8px 10px;
  border-left: 2px solid var(--border-strong);
  margin: 0;
}

/* Severity badges */
.severity-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  background: var(--bg-raised);
}
.severity-badge.info { color: var(--text-muted); }
.severity-badge.low  { color: var(--text-secondary); }
.severity-badge.med  { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.severity-badge.high { color: var(--bad);  border-color: var(--bad);  background: var(--bad-soft); }

/* Bottom action row */
.coach-action-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-top: var(--sp-4);
}

@media (max-width: 1023px) {
  .coach-score-hero { grid-template-columns: 1fr; }
  .coach-radar-wrap { min-height: 280px; }
}

/* ---------- Training Plan page ------------------------------------------ */
/* Deload-week banner — объясняет намеренно лёгкую неделю (периодизация). */
.plan-deload-banner {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.45;
}
.plan-deload-banner .ico {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--accent);
  margin-top: 2px;
}

/* B4 (overhaul 2026-07-14): кнопка «Продолжить» внутри баннера паузы. */
.plan-pause-resume { margin-top: var(--sp-2); }

/* F1 (overhaul 2026-07-14): цель сессии + settings-сниппет на карточке слота. */

.plan-progress-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}
.plan-progress-strip__bar-wrap { display: flex; flex-direction: column; gap: var(--sp-2); }
.plan-progress-strip__head {
  display: flex; align-items: baseline; justify-content: space-between;
}
.plan-progress-strip__pct {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent);
}
.plan-progress-strip__kpis {
  display: flex; gap: var(--sp-5);
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.plan-day {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-2);
  min-height: 0;
  display: flex; flex-direction: column;
  gap: var(--sp-3);
}
.plan-day.is-today { border-color: var(--accent); background: var(--accent-soft); }
.plan-day.is-rest { background: var(--bg-base); }

.plan-day__head {
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-muted);
}
.plan-day__dow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.plan-day.is-today .plan-day__dow { color: var(--accent); }
.plan-day__date {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
}
.plan-day.is-today .plan-day__date { color: var(--accent); }
.plan-day__min {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.plan-day__body { display: flex; flex-direction: column; gap: var(--sp-2); }

/* iter P: «+ 1 MM после тренировки» hint на training-day */
.plan-mm-after-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin-bottom: 4px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    color: var(--accent);
    cursor: help;
}
.plan-mm-after-hint .ico-sm { width: 12px; height: 12px; flex-shrink: 0; }

/* Rest-gap pill — стоит между двумя plan-item'ами одного дня. RestMinutesBefore
   вычисляется в TrainingPlanMapping через TrainingScheduleRules.RestMinutesBetween.
   Визуально — приглушённая dashed-border полоска с часами и подписью «Перерыв N мин». */
.plan-rest-gap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px var(--sp-2);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
}
.plan-rest-gap .ico { stroke: currentColor; width: 12px; height: 12px; }

.plan-item {
  grid-template-columns: 28px 1fr;
  padding: var(--sp-2);
}
.plan-item__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Check/dropdown прижимаем к верху, чтобы при переносе title'а они держались
   в верхней строке (на уровне time + kind), а не уезжали по центру. */
.plan-item > .today-item__check,
.plan-item > .plan-mark { align-self: start; }
/* Дур-бейдж inline в top-row (рядом с time + kind), уезжает в правый край
   через margin-left: auto. flex-wrap позволяет ему упасть на след. строку
   если карта совсем узкая. */
.plan-item__top { flex-wrap: wrap; row-gap: 4px; }
.plan-item__dur-inline { margin-left: auto; flex-shrink: 0; padding: 1px 6px; font-size: 10px; }
.plan-item__top {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 10px;
}
.plan-item__time {
  color: var(--text-muted);
  font-size: 10px;
}
.plan-item__kind {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  background: var(--bg-input);
  color: var(--text-secondary);
}
.plan-item__kind.kind-theory   { color: var(--text-secondary); }
.plan-item__kind.kind-gamemode { color: var(--tag-prefire, var(--accent)); }
.plan-item__kind.kind-drill    { color: var(--accent); }

.plan-item__title {
  display: block;
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.plan-item__title:hover { color: var(--accent); }
.plan-item.done .plan-item__title { text-decoration: line-through; }

/* iter P (2026-05-23): focus options badge — рядом с названием drill'а.
   Tooltip-описание через title attribute (browser-native). */
.plan-item__focus {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 10px;
  line-height: 1.3;
  cursor: help;
}
.today-item.done .plan-item__focus,
.today-item.skipped .plan-item__focus { opacity: 0.55; }

/* Пред-дрил чеклист (design §3.5): collapsible «Перед заходом» в карточке плана —
   настройки/цель/длительность в момент тренировки, без ухода на /drills/{id}. */

/* iter P (2026-05-23): focus options list на /drills/{id} */
.drill-focus-card { margin-top: var(--gap-md); }
.drill-focus-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.drill-focus-list__item {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  background: var(--bg-input);
  border-radius: var(--r-sm, 6px);
}
.drill-focus-list__label {
  margin: 0 0 8px;
  font-size: var(--fs-md, 15px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}
.drill-focus-list__desc {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}
.drill-focus-list__howto { margin-top: 6px; }
.drill-focus-list__howto > summary {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.drill-focus-list__howto-body {
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

/* iter P (2026-05-23): admin focus-table на /admin/drills/{id} */
.admin-focus-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  margin-bottom: var(--gap-sm);
}
.admin-focus-table th,
.admin-focus-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.admin-focus-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.admin-focus-table input[type="text"],
.admin-focus-table textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-xs);
  padding: 4px 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  color: var(--text-primary);
}
.admin-focus-table input[readonly] {
  background: var(--bg-base);
  color: var(--text-muted);
  cursor: not-allowed;
}
.admin-focus-table input[type="number"] { width: 60px; }
.admin-focus-table textarea { resize: vertical; }
.admin-focus-row--new { background: var(--accent-soft); }

.plan-item__meta { flex-wrap: wrap; }
.plan-item__map-badge {
  font-size: 10px;
  padding: 1px 6px;
}

.plan-rest-card {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: var(--sp-4);
  text-align: center;
  border: 1px dashed var(--border-muted);
  border-radius: var(--r-sm);
  color: var(--text-muted);
}
.plan-rest-card .ico { width: 24px; height: 24px; color: var(--text-muted); }
.plan-rest-card__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
}
.plan-rest-card__sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* MM-day card: похожа на rest-card по структуре, но с акцентом (accent-цвет).
   Игрок понимает что это «свободный день для MM», а не «отдых». */
.plan-day.is-mm { border-color: var(--accent-dim); }
.plan-mm-card {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: var(--sp-4);
  background: var(--accent-soft);
  border: 1px dashed var(--accent-dim);
  border-radius: var(--r-sm);
  color: var(--accent);
  text-align: center;
}
.plan-mm-card .ico { width: 24px; height: 24px; color: var(--accent); }
.plan-mm-card__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.plan-mm-card__sub {
  font-size: var(--fs-xs);
  color: var(--text-primary);
}
.plan-mm-card__hint {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.plan-mm-card__tip {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 11px;
  color: color-mix(in srgb, var(--accent) 75%, var(--text-primary));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: var(--r-sm);
  padding: 6px 8px;
  margin-top: 8px;
  line-height: 1.35;
  text-align: left;
}
.plan-mm-card__tip .ico-sm { flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.plan-mm-after-tip {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 11px;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: var(--r-sm);
  padding: 5px 8px;
  margin-top: 6px;
  margin-bottom: 8px;
  line-height: 1.35;
}
.plan-mm-after-tip .ico-sm { flex-shrink: 0; margin-top: 1px; color: var(--accent); }

@media (max-width: 1199px) {
  .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .plan-grid { grid-template-columns: 1fr; }
  .plan-progress-strip { grid-template-columns: 1fr; }
}

/* ====================================================================== */
/* Training Catalog (list + drill details)                                 */
/* ====================================================================== */

/* --- Filter bar tweaks for catalog (multi-line, larger chip groups) --- */
.catalog-filter-bar { gap: var(--sp-2) var(--sp-3); }
.catalog-chip__tag {
  height: auto;
  padding: 0 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* --- Grid of drill cards --- */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}

a.catalog-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  min-height: 180px;
}
a.catalog-card:hover { border-color: var(--accent); transform: translateY(-2px); }

.catalog-card__kind {
  padding: 2px 6px;
  background: var(--bg-base);
  border-radius: var(--r-xs);
}
.catalog-card__kind.kind-drill    { color: var(--accent); }
.catalog-card__kind.kind-theory   { color: var(--tag-mapknowl); }
.catalog-card__kind.kind-gamemode { color: var(--tag-tactics); }

.catalog-card__dur {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-primary);
  font-weight: 600;
}

.catalog-card__skills,
.catalog-card__maps { display: flex; flex-wrap: wrap; gap: 4px; }

.catalog-card__map-badge {
  font-size: 10px;
  padding: 1px 6px 1px 1px;
}

.catalog-card__more {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-secondary);
}

.catalog-card__archived {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  color: var(--text-muted);
  vertical-align: middle;
}

.drill-card--retired { opacity: 0.55; }
.drill-card--retired:hover { opacity: 1; }

/* --- Drill details page --- */
.catalog-back { margin-bottom: var(--sp-3); }

.drill-detail-grid {
  gap: var(--sp-4);
  align-items: start;
}
.drill-detail-grid__main {
  grid-column: span 7 / span 7;
  display: flex; flex-direction: column;
  gap: var(--sp-4);
}
.drill-detail-grid__side {
  grid-column: span 5 / span 5;
  display: flex; flex-direction: column;
  gap: var(--sp-4);
  position: sticky;
  top: 88px;
}

@media (max-width: 1023px) {
  .drill-detail-grid__main,
  .drill-detail-grid__side { grid-column: span 12 / span 12; position: static; }
}

.drill-detail__archived {
  color: var(--text-muted);
  font-weight: 600;
}

.drill-detail-table {
  display: flex; flex-direction: column;
  gap: var(--sp-2);
}

.drill-detail-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border-muted);
  font-size: var(--fs-sm);
}
.drill-detail-row:last-child { border-bottom: none; }

/* Сатурация (design §3.2): «дрил исчерпал себя / работает» — баннер над drill-grid. */

/* Целевые метрики (design §3.1): метрика + сила атрибуции (цветной маркер) + честная подпись. */
.drill-metric-row {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border-muted);
}
.drill-metric-row:last-child { border-bottom: none; }
.drill-metric-row__top {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}
.drill-metric-row__name { font-size: var(--fs-sm); font-weight: 600; }
.drill-metric-row__note {
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.metric-dot {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--text-muted);
}
.metric-dot--strong      { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.metric-dot--indirect    { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.metric-dot--notmeasured { background: var(--text-muted); }
.drill-detail-row__steam-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 2px var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.drill-detail-row__steam-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.drill-detail-row__steam-link .ico { width: 12px; height: 12px; }

.drill-detail-row__notes {
  flex: 1 1 100%;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}

.impact-pill,
.relevance-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-xs);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.impact-pill.impact-primary {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent);
}
.impact-pill.impact-secondary { color: var(--text-muted); }

.relevance-pill.relevance-mapspecific {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent);
}
.relevance-pill.relevance-recommended { color: var(--text-secondary); }
.relevance-pill.relevance-universal   { color: var(--text-muted); }

.drill-detail-params .info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border-muted);
}
.drill-detail-params .info-row:last-child { border-bottom: none; }
.drill-detail-params .info-row .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.drill-detail-params .info-row .val { font-weight: 500; }
.drill-detail-params .info-row .val.kind-drill    { color: var(--accent); }
.drill-detail-params .info-row .val.kind-theory   { color: var(--tag-mapknowl); }
.drill-detail-params .info-row .val.kind-gamemode { color: var(--tag-tactics); }

/* Inline empty-state for cards (less padding, no border). */
.empty-state.empty-state--inline {
  padding: var(--sp-3) 0;
  border: none;
  background: transparent;
  align-items: flex-start;
  text-align: left;
}

/* ====================================================================== */
/* Training Log page (heat-map + recent entries)                           */
/* ====================================================================== */
.log-kpi-row { margin-bottom: var(--sp-4); }

.log-heatmap-card {
  padding: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.log-heatmap-card__header {
  margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.log-heatmap__legend {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.log-heatmap__legend-cells {
  display: flex; align-items: center; gap: 3px;
}
.log-heatmap__legend-cell {
  width: 11px;
  height: 11px;
  display: inline-block;
}

.log-heatmap-wrap {
  overflow-x: auto;
  padding: 8px 0;
}
.log-heatmap-grid {
  /* override component default 12px → 14px для лучшей читаемости 365-day grid */
  grid-template-rows: repeat(7, 14px);
  grid-auto-columns: 14px;
}

.heatmap__cell--empty {
  background: transparent;
  cursor: default;
}

.log-heatmap__months {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

.log-recent-card {
  padding: var(--sp-6);
}
.log-rows { display: flex; flex-direction: column; }
.log-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-muted);
}
.log-row:last-child { border-bottom: 0; }
.log-row__date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.log-row__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.log-row__name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.log-row__tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.log-row__notes {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.log-row__dur {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  padding: 3px 8px;
  background: var(--bg-input);
  border-radius: var(--r-xs);
}

/* ====================================================================== */
/* Settings page (visual stub)                                             */
/* ====================================================================== */
.settings-stub-banner {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-bottom: var(--sp-4);
  padding: 10px 14px;
  background: color-mix(in srgb, var(--warn) 18%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--warn) 50%, var(--border));
  border-left: 3px solid var(--warn);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--text-primary);
}

.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 900px) {
  .settings-layout { grid-template-columns: 1fr; }
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 88px;
}
.settings-nav a {
  padding: 8px 12px;
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.settings-nav a:hover { background: var(--bg-raised); color: var(--text-primary); }
.settings-nav a.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

.settings-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.settings-section h2 {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.settings-section__sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.settings-section--danger {
  border-color: color-mix(in srgb, var(--bad) 50%, var(--border));
  background: color-mix(in srgb, var(--bad) 4%, var(--bg-surface));
}
.settings-section__danger-title { color: var(--bad); }

.settings-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-5);
  padding: 14px 0;
  border-bottom: 1px solid var(--border-muted);
  align-items: center;
}
.settings-row:last-child,
.settings-row.settings-row--no-border { border-bottom: 0; }
.settings-row > label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.settings-row__inline { gap: 8px; }

.field-input {
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  padding: 9px 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  width: 100%;
  max-width: 360px;
}
.field-input:focus { outline: none; border-color: var(--accent); }
.field-input[readonly] { color: var(--text-muted); font-family: var(--font-mono); }

.toggle {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--bg-input);
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  padding: 0;
  flex-shrink: 0;
}
.toggle.on { background: var(--accent); border-color: var(--accent); }
.toggle::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-secondary);
  top: 2px;
  left: 2px;
  transition: left var(--t-fast), background var(--t-fast);
}
.toggle.on::after { left: 18px; background: var(--bg-base); }

.settings-toggle-row { gap: var(--sp-3); align-items: center; }
.settings-toggle-row__caption {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.settings-mm-days { gap: 4px; flex-wrap: wrap; }

.settings-btn--danger {
  border-color: color-mix(in srgb, var(--bad) 60%, var(--border));
  color: var(--bad);
}
.settings-btn--danger:hover {
  background: color-mix(in srgb, var(--bad) 10%, transparent);
  border-color: var(--bad);
  color: var(--bad);
}

/* iter Y-followup: plan generation in-progress banner */
.plan-gen-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-raised));
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
}
.plan-gen-banner__spinner {
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--accent);
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: var(--font-mono);
    animation: onboarding-spin 1.4s linear infinite;
    flex-shrink: 0;
}
.plan-gen-banner__title {
    font-weight: 600;
    color: var(--text-primary);
}
.plan-gen-banner__sub {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* iter F: Telegram notifications section */
.settings-toast {
  margin-bottom: var(--sp-4);
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
}
.settings-toast--ok {
  background: color-mix(in srgb, var(--improve) 14%, transparent);
  border-color: color-mix(in srgb, var(--improve) 40%, transparent);
  color: var(--improve);
}
.settings-toast--error {
  background: color-mix(in srgb, var(--bad) 14%, transparent);
  border-color: color-mix(in srgb, var(--bad) 40%, transparent);
  color: var(--bad);
}

.settings-inline-warn {
  margin: 0 0 var(--sp-4) 0;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--warn);
}
.settings-inline-warn code {
  background: color-mix(in srgb, var(--bg-raised) 70%, transparent);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.settings-row__hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  align-self: center;
}

/* iter U: training-prefs ползунки. */
.settings-slider-row {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
}
.settings-slider {
  flex: 1; min-width: 0;
  accent-color: var(--accent);
}
.settings-slider-value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--text-primary); font-weight: 600;
  min-width: 80px; text-align: right;
}
.settings-row--actions { justify-content: flex-end; padding-top: var(--sp-3); }
.settings-training-form .settings-row { display: flex; flex-direction: column; gap: var(--sp-2); }

/* iter V: master toggle + per-field блоки. */
.settings-row--master {
  padding: var(--sp-3); background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  margin-bottom: var(--sp-3);
}
.settings-checkbox {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  cursor: pointer;
}
.settings-checkbox input[type="checkbox"] {
  margin-top: 4px; accent-color: var(--accent);
}
.settings-prefs-block {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  margin-bottom: var(--sp-3);
}
.settings-prefs-block[data-pref-body] { display: flex; }
.settings-prefs-block--info { background: var(--bg-raised); }
.settings-weekdays {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.settings-weekday {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-raised);
  cursor: pointer;
  font-family: var(--font-mono);
}
.settings-weekday input[type="checkbox"] {
  accent-color: var(--accent);
}
.settings-weekday:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-raised));
}
.settings-days-summary {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  padding-top: var(--sp-2); color: var(--text-secondary);
}
.settings-days-warning {
  color: var(--bad); margin-left: var(--sp-2);
}
.settings-days-warning[hidden] { display: none; }

/* iter W: DM type whitelist multi-select chips. */
.settings-dm-types-label {
  display: block; margin-top: var(--sp-3); margin-bottom: var(--sp-2);
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.settings-dm-types {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.settings-dm-type {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-raised);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.settings-dm-type input[type="checkbox"] { accent-color: var(--accent); }
.settings-dm-type:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-raised));
}

/* iter W audit-fix: /catalog category badge + chip-group styling.
   Categories share the same colour scheme on settings page for visual recall. */
.catalog-card__cat {
  display: inline-block; padding: 1px 8px;
  border-radius: var(--r-sm); font-size: var(--fs-xs);
  font-family: var(--font-mono); letter-spacing: 0.02em;
  background: var(--bg-raised); color: var(--text-secondary);
  border: 1px solid var(--border);
}
.catalog-card__cat.cat-theory     { color: #cda557; border-color: color-mix(in srgb, #cda557 50%, var(--border)); }
.catalog-card__cat.cat-highfocus  { color: #e07a3a; border-color: color-mix(in srgb, #e07a3a 50%, var(--border)); }
.catalog-card__cat.cat-aimmech    { color: #d99244; border-color: color-mix(in srgb, #d99244 50%, var(--border)); }
.catalog-card__cat.cat-dm         { color: #b85c5c; border-color: color-mix(in srgb, #b85c5c 50%, var(--border)); }
.catalog-card__cat.cat-acro       { color: #5ec38b; border-color: color-mix(in srgb, #5ec38b 50%, var(--border)); }
.catalog-card__cat.cat-other      { color: var(--text-muted); }
.catalog-card__cat.cat-gamemode   { color: #6ea6db; border-color: color-mix(in srgb, #6ea6db 50%, var(--border)); }

/* Catalog category filter chips — same colour scheme as badge, slightly stronger when active. */
.catalog-cat-chip.cat-theory.active     { border-color: #cda557; }
.catalog-cat-chip.cat-highfocus.active  { border-color: #e07a3a; }
.catalog-cat-chip.cat-aimmech.active    { border-color: #d99244; }
.catalog-cat-chip.cat-dm.active         { border-color: #b85c5c; }
.catalog-cat-chip.cat-acro.active       { border-color: #5ec38b; }
.catalog-cat-chip.cat-gamemode.active   { border-color: #6ea6db; }

/* iter W audit-fix: live UX-warn'ы для конфликтующих training-prefs. */
.settings-intersect-warn {
  color: var(--warn, #d99244);
  border-left: 2px solid color-mix(in srgb, var(--warn, #d99244) 50%, var(--border));
  padding-left: var(--sp-2);
  margin-top: var(--sp-2);
}
.settings-intersect-warn[hidden] { display: none; }

/* iter X: notify-pause card. */
.notify-pause {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin: var(--sp-3) 0;
}
.notify-pause.is-paused {
  border-color: var(--warn, #d99244);
  background: color-mix(in srgb, var(--warn, #d99244) 8%, var(--bg-raised));
}
.notify-pause__status { font-size: var(--fs-sm); color: var(--text-secondary); }
.notify-pause.is-paused .notify-pause__status { color: var(--warn, #d99244); }
.notify-pause__form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.notify-pause__label { font-size: var(--fs-sm); color: var(--text-muted); }

/* iter X: quiet hours row + warmup row. */
.settings-quiet-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.settings-quiet-row label { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--text-secondary); }
.field-input--narrow { width: 7em; }
.notify-prefs__hint {
  font-size: var(--fs-xs); color: var(--text-muted);
  margin: var(--sp-1) 0 var(--sp-2) 0;
  padding-left: var(--sp-2);
  border-left: 2px solid var(--border);
}
/* iter X: section-toggle (checkbox в шапке секции, при unchecked = body hidden). */
.notify-prefs__section-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-2) 0;
  cursor: pointer;
}
.notify-prefs__section-toggle .notify-prefs__title { margin: 0; }
.notify-prefs__off-hint {
  font-size: var(--fs-xs); color: var(--text-muted);
  font-weight: normal;
}
[data-section-body][hidden] { display: none; }

/* iter V: /catalog per-drill duration input. */
.catalog-card__duration {
  position: absolute; top: 8px; right: 44px; z-index: 2;
  display: flex; gap: 2px;
  background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 2px;
}
.catalog-card__duration input[type="number"] {
  width: 48px; padding: 1px 4px;
  background: transparent; color: var(--text-primary);
  border: none; outline: none;
  font-family: var(--font-mono); font-size: var(--fs-xs);
}
.catalog-card__duration input[type="number"]::-webkit-outer-spin-button,
.catalog-card__duration input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.catalog-card__duration input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.catalog-card__duration button {
  background: transparent; border: none; color: var(--text-muted);
  cursor: pointer; padding: 0 4px; font-size: var(--fs-xs);
}
.catalog-card__duration button:hover { color: var(--accent); }
.catalog-card__duration.has-override {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, var(--bg-raised));
}
.catalog-card__duration.has-override input[type="number"] { color: var(--accent); font-weight: 600; }

.settings-help {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.settings-help h3 {
  margin: 0 0 var(--sp-2) 0;
  font-size: var(--fs-base);
  color: var(--text-primary);
}
.settings-help ol {
  margin: 0;
  padding-left: 20px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.settings-help ol li + li { margin-top: 4px; }
.settings-help a { color: var(--accent); }
.settings-help a:hover { text-decoration: underline; }
/* iter R: per-type notification toggles */
.notify-prefs {
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.notify-prefs__title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-1);
}
.notify-prefs__row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 0;
}
.notify-prefs__row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}
.notify-prefs .btn {
    align-self: flex-start;
    margin-top: var(--sp-2);
}

.settings-help code {
  background: color-mix(in srgb, var(--bg-base) 70%, transparent);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ---------- Coach fallback banner ----------------------------------------- */
.coach-fallback-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  color: var(--warn);
  padding: 12px 16px;
  border-radius: var(--r-sm);
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.4;
}
.coach-fallback-banner .ico { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Matches import toast ----------------------------------------- */
.import-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.import-toast__body { flex: 1; }
.import-toast__title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.import-toast__detail { font-size: 12px; opacity: 0.85; line-height: 1.4; }
.import-toast .ico { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }

.import-toast--success {
  background: color-mix(in srgb, var(--improve) 14%, transparent);
  border-color: color-mix(in srgb, var(--improve) 40%, transparent);
  color: var(--improve);
}
.import-toast--warning {
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
  color: var(--warn);
}
.import-toast--error {
  background: color-mix(in srgb, var(--bad) 14%, transparent);
  border-color: color-mix(in srgb, var(--bad) 40%, transparent);
  color: var(--bad);
}

.page-header__form { display: inline-flex; margin: 0; }

/* ===== mark-complete dropdown (iter 5a) ===== */

/* Toast above the calendar grid */
.mark-toast {
    margin-bottom: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--fs-base);
}
.mark-toast--success {
    background: var(--good-soft);
    color: var(--good);
    border: 1px solid var(--good);
}
.mark-toast--error {
    background: var(--bad-soft);
    color: var(--bad);
    border: 1px solid var(--bad);
}

/* The clickable checkbox + dropdown menu wrapper */
.plan-mark {
    position: relative;
    list-style: none;
}
.plan-mark > summary {
    list-style: none;
    cursor: pointer;
    display: inline-block;
}
.plan-mark > summary::-webkit-details-marker {
    display: none;
}

/* Three visual states for the summary (the icon button) */
.plan-mark--completed > summary { color: var(--improve); }
.plan-mark--skipped   > summary { color: var(--text-muted); }
.plan-mark--empty     > summary { color: var(--text-secondary); }

/* Dropdown content panel */
.plan-mark__menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    min-width: 240px;
    margin-top: var(--sp-1);
    padding: var(--sp-2);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
/* Авто-флип когда dropdown упирается в низ viewport'а: plan-mark.js
   добавляет .plan-mark--flip-up, CSS переключает menu наверх. */
.plan-mark.plan-mark--flip-up .plan-mark__menu {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--sp-1);
}

/* Quick-complete row */
.plan-mark__quick > button {
    width: 100%;
    text-align: left;
}

/* Nested expanders for detailed-complete and skip */
.plan-mark__sub {
    border-top: 1px solid var(--border);
    padding-top: var(--sp-2);
}
.plan-mark__sub > summary {
    cursor: pointer;
    font-size: var(--fs-sm);
    padding: var(--sp-1) var(--sp-2);
    user-select: none;
    color: var(--text-secondary);
}
.plan-mark__sub[open] > summary {
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
}

/* Form layout inside expanders */
.plan-mark__form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: 0 var(--sp-2) var(--sp-2);
}
.plan-mark__field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.plan-mark__field input,
.plan-mark__field select,
.plan-mark__field textarea {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-primary);
    padding: var(--sp-2);
    font-size: var(--fs-base);
    font-family: inherit;
}
.plan-mark__field input:focus,
.plan-mark__field select:focus,
.plan-mark__field textarea:focus {
    outline: none;
    border-color: var(--border-strong);
}
/* iter Q: 2-col layout for «Результат + Unit» row */
.plan-mark__field--row {
    flex-direction: row;
    gap: var(--sp-2);
}
.plan-mark__field-half {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.plan-mark__field-half input,
.plan-mark__field-half select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-primary);
    padding: var(--sp-2);
    font-size: var(--fs-base);
    font-family: inherit;
}

/* Clear-button row (visual separator) */
.plan-mark__clear {
    border-top: 1px solid var(--border);
    padding-top: var(--sp-2);
    margin-top: var(--sp-1);
}
.plan-mark__clear > button {
    width: 100%;
}

/* ===== Week navigation (prev/next arrows + «сегодня» link) ===== */
.plan-week-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: 4px;
}
.plan-week-nav__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--r-sm);
    color: var(--text-secondary);
    transition: background var(--t-fast), color var(--t-fast);
}
.plan-week-nav__arrow:hover {
    background: var(--bg-raised);
    color: var(--text-primary);
}
.plan-week-nav__arrow--disabled {
    color: var(--text-disabled);
    cursor: default;
    pointer-events: none;
}
.plan-week-nav__label {
    /* Eyebrow inherits .eyebrow styles; this just locks vertical center. */
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.plan-week-nav__today {
    color: var(--accent);
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--fs-xs);
}
.plan-week-nav__today:hover {
    text-decoration: underline;
}

/* ===== AI-coach provenance badge (iter 5b) ===== */
.plan-source-badge {
    margin-left: var(--sp-2);
    padding: 2px var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    text-decoration: none;
    cursor: help;
}
.plan-source-badge:hover {
    background: var(--accent-glow);
}
.plan-source-badge--inline {
    margin-left: 0;
    display: inline-block;
}

/* ===== Plan history page (clickable rows table) ===== */
.plan-history-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}
.plan-history-row {
    display: grid;
    grid-template-columns: 110px 1fr 240px 90px 18px;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.plan-history-row:hover {
    background: color-mix(in srgb, var(--bg-raised) 70%, var(--bg-surface));
    border-color: var(--accent);
    transform: translateX(2px);
}
.plan-history-row--current { border-left-color: var(--accent); }
.plan-history-row--future  { border-left-color: var(--improve); }
.plan-history-row--past    { border-left-color: var(--border); }

.plan-history-row__cycle {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.plan-history-row__cycle-num {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--text-primary);
}
.plan-history-row__status {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.plan-history-row--current .plan-history-row__status { color: var(--accent); }
.plan-history-row--future  .plan-history-row__status { color: var(--improve); }

.plan-history-row__week {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.plan-history-row__range {
    font-weight: 500;
    color: var(--text-primary);
}
.plan-history-row__created {
    font-size: var(--fs-xs);
}

.plan-history-row__progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.plan-history-row__progress-bar {
    height: 6px;
    background: var(--bg-base);
    border-radius: 3px;
    overflow: hidden;
}
.plan-history-row__progress-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.3s ease;
}
.plan-history-row__progress-text {
    font-size: var(--fs-xs);
    display: flex;
    gap: var(--sp-2);
    align-items: baseline;
    flex-wrap: wrap;
}
.plan-history-row__progress-text strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
}
.plan-history-row__skipped {
    color: var(--warn);
    font-size: var(--fs-xs);
}

.plan-history-row__source-stub {
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
}

.plan-history-row__chevron {
    color: var(--text-muted);
    opacity: 0.5;
}
.plan-history-row:hover .plan-history-row__chevron {
    color: var(--accent);
    opacity: 1;
}

@media (max-width: 767px) {
    .plan-history-row {
        grid-template-columns: 90px 1fr 18px;
        grid-template-rows: auto auto;
        row-gap: var(--sp-2);
    }
    .plan-history-row__progress {
        grid-column: 1 / 3;
    }
    .plan-history-row__source {
        grid-column: 1 / 3;
    }
    .plan-history-row__chevron {
        grid-column: 3;
        grid-row: 1 / 3;
    }
}

/* ===== iter 7c: Dashboard last-week recap card ===== */
.recap-card {
    background: var(--surface-2, #1a1d24);
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.recap-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.recap-card__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6c757d);
}
.recap-card__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}
.recap-card__kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.recap-card__kpi-label {
    font-size: 11px;
    color: var(--text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.recap-card__kpi-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text, #e6e8eb);
}
.recap-card__kpi-value.up { color: var(--success, #4ade80); }
.recap-card__kpi-value.down { color: var(--danger, #f87171); }
.recap-card__kpi-value.flat { color: var(--text-muted, #6c757d); }
.recap-card__bar {
    height: 4px;
    background: var(--surface-3, #2a2e36);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}
.recap-card__bar-fill {
    height: 100%;
    background: var(--accent, #f5a623);
    transition: width 0.3s ease;
}
.recap-card__note,
.recap-card__verdict {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-dim, #b8bcc4);
}
.recap-card__note-label,
.recap-card__verdict-label {
    font-weight: 600;
    color: var(--text, #e6e8eb);
    margin-right: 4px;
}

/* === iter 13: background job badge === */
/* hidden-атрибут на .job-badge ДОЛЖЕН перевешивать наш display:flex (UA stylesheet
   ставит [hidden] { display: none } с низкой specificity → author-rule побеждает).
   Без [hidden] {none} badge всегда виден, JS бесполезен. */
.job-badge[hidden] { display: none !important; }
.job-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    border: 1px solid var(--surface-3, #2a2e36);
    background: var(--surface-2, #1a1d24);
}
.job-badge__reload[hidden],
.job-badge__dismiss[hidden] { display: none !important; }
.job-badge--active {
    border-color: var(--accent, #f5a623);
    background: rgba(245, 166, 35, 0.08);
}
.job-badge--success {
    border-color: var(--success, #4ade80);
    background: rgba(74, 222, 128, 0.08);
}
.job-badge--failed {
    border-color: var(--danger, #f87171);
    background: rgba(248, 113, 113, 0.08);
}
.job-badge__spinner {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--accent, #f5a623);
}
.job-badge--active .job-badge__spinner {
    animation: job-badge-spin 1.2s linear infinite;
}
.job-badge--success .job-badge__spinner,
.job-badge--failed .job-badge__spinner {
    display: none;
}
@keyframes job-badge-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.job-badge__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.job-badge__label {
    font-weight: 600;
    color: var(--text, #e6e8eb);
}
.job-badge__status {
    color: var(--text-dim, #b8bcc4);
    font-size: 12px;
}
.job-badge__reload {
    flex-shrink: 0;
}

.job-badge__dismiss {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-dim, #b8bcc4);
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
}
.job-badge__dismiss:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text, #e6e8eb);
}

/* === iter 16-followup: coach history page === */
.coach-history-trend {
    margin-bottom: 16px;
}
.coach-history-trend__chart {
    padding: 8px 12px 12px;
}
.coach-history-trend__canvas {
    width: 100%;
    height: 80px;
    display: block;
}
.coach-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.coach-history-item {
    display: flex;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--surface-3, #2a2e36);
    border-radius: 10px;
    background: var(--surface-2, #1a1d24);
}
.coach-history-item__index {
    flex-shrink: 0;
    width: 40px;
    font-family: var(--font-mono, monospace);
    color: var(--text-muted, #6c757d);
    font-size: 14px;
    padding-top: 2px;
}
.coach-history-item__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.coach-history-item__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.coach-history-item__date {
    color: var(--text-muted, #6c757d);
    font-size: 13px;
}
.coach-history-item__score strong {
    font-size: 20px;
    color: var(--text, #e6e8eb);
    font-weight: 700;
}
.coach-history-item__delta {
    margin-left: 6px;
    font-size: 13px;
}
.coach-history-item__delta.up    { color: var(--success, #4ade80); }
.coach-history-item__delta.down  { color: var(--danger, #f87171); }
.coach-history-item__delta.flat  { color: var(--text-muted, #6c757d); }
.coach-history-item__verdict {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-dim, #b8bcc4);
}

/* === Stats map veto suggestion (iter N) === */
.stats-veto-banner {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: var(--sp-4);
    align-items: center;
    margin-top: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
}
.stats-veto-banner__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.stats-veto-banner__icon svg { width: 22px; height: 22px; }
.stats-veto-banner__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.stats-veto-banner__title {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.stats-veto-banner__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
}
.stats-veto-banner__card {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--bg-base);
    flex-wrap: wrap;
}
.stats-veto-banner__card--pick { border-color: color-mix(in srgb, var(--improve) 50%, var(--border)); }
.stats-veto-banner__card--ban  { border-color: color-mix(in srgb, var(--bad) 50%, var(--border)); }
.stats-veto-banner__action {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 8px;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
}
.stats-veto-banner__card--pick .stats-veto-banner__action {
    background: color-mix(in srgb, var(--improve) 20%, transparent);
    color: var(--improve);
}
.stats-veto-banner__card--ban .stats-veto-banner__action {
    background: color-mix(in srgb, var(--bad) 20%, transparent);
    color: var(--bad);
}
.stats-veto-banner__map {
    font-weight: 600;
    color: var(--text-primary);
}
.stats-veto-banner__wr {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin-left: auto;
}
.stats-veto-banner__hint {
    font-size: var(--fs-xs);
}

@media (max-width: 600px) {
    .stats-veto-banner__cards { grid-template-columns: 1fr; }
}

/* === Stats time-of-day buckets (iter M) === */
.stats-tod-card {
    margin-top: var(--sp-5);
}
.stats-tod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}
.stats-tod-bucket {
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.stats-tod-bucket--best { border-color: color-mix(in srgb, var(--improve) 60%, var(--border)); }
.stats-tod-bucket--worst { border-color: color-mix(in srgb, var(--bad) 60%, var(--border)); }
.stats-tod-bucket__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.stats-tod-bucket__label {
    font-weight: 600;
    color: var(--text-primary);
}
.stats-tod-bucket__pill {
    font-size: var(--fs-xs);
    padding: 1px 8px;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.stats-tod-bucket__pill--best  { background: color-mix(in srgb, var(--improve) 20%, transparent); color: var(--improve); }
.stats-tod-bucket__pill--worst { background: color-mix(in srgb, var(--bad) 20%, transparent); color: var(--bad); }

.stats-tod-bucket__range {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.stats-tod-bucket__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}
.stats-tod-bucket__metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.stats-tod-bucket__metric-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stats-tod-bucket__metric-value {
    font-size: var(--fs-base);
    font-weight: 600;
}

/* === Catalog swap-mode (iter R) === */
.catalog-swap-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-raised));
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    color: var(--text-primary);
    font-size: var(--fs-sm);
}
.catalog-swap-banner .ico { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.catalog-swap-banner .btn { margin-left: auto; }

.catalog-card--swappable {
    cursor: pointer;
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.catalog-card--swappable:hover {
    border-color: var(--accent);
}
.catalog-card__swap-btn {
    margin-top: auto;
    width: 100%;
}

.plan-mark__swap {
    margin-top: var(--sp-2);
    width: 100%;
    text-align: center;
}

/* === Drill performance card (iter Q-followup) === */
.drill-perf-card {
    margin-bottom: var(--sp-5);
}
.drill-perf-card__stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.drill-perf-card__latest {
    font-size: var(--fs-lg, 18px);
    font-weight: 600;
    color: var(--text-primary);
}
.drill-perf-card__delta {
    font-size: var(--fs-sm);
}
.drill-perf-card__delta--up { color: var(--improve); }
.drill-perf-card__delta--down { color: var(--bad); }
.drill-perf-card__delta--flat { color: var(--text-muted); }
.drill-perf-card__tier {
    margin-top: 4px;
    padding: 2px 8px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    cursor: help;
}
.drill-perf-card__chart {
    height: 60px;
    margin-top: var(--sp-3);
}
.drill-perf-card__chart canvas {
    width: 100% !important;
    height: 100% !important;
}
.drill-perf-card__range {
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    text-align: right;
}

/* === Log entry result pill (iter Q) === */
.log-row__result {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
}

/* === Log filters + drill-down (iter S) === */
.log-filter-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin: var(--sp-4) 0 var(--sp-3);
}
.log-filter-row__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-right: var(--sp-2);
}
.log-filter-row .chip {
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: all 0.15s;
}
.log-filter-row .chip:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}
.log-filter-row .chip.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.log-drilldown-card {
    border-left: 3px solid var(--accent);
    margin-bottom: var(--sp-4);
}
.log-drilldown-card .card__header { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }

/* Make heatmap cells (when actual sessions) feel clickable */
.heatmap__cell.l1, .heatmap__cell.l2, .heatmap__cell.l3, .heatmap__cell.l4 {
    text-decoration: none;
}
a.heatmap__cell.l1:hover, a.heatmap__cell.l2:hover, a.heatmap__cell.l3:hover, a.heatmap__cell.l4:hover {
    outline: 1px solid var(--accent);
    outline-offset: 1px;
}

/* === Log page skipped entries (iter K) === */
.log-skipped-card {
    margin-top: var(--sp-5);
    border-left: 3px solid var(--warn);
}
.log-row--skipped {
    opacity: 0.85;
}
.log-row--skipped .log-row__dur {
    color: var(--warn);
    text-transform: uppercase;
    font-size: var(--fs-xs);
    letter-spacing: 0.5px;
}
.skip-reason-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    text-transform: lowercase;
    letter-spacing: 0.3px;
}
.skip-reason-badge--tired      { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.skip-reason-badge--time-short { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.skip-reason-badge--sick       { background: color-mix(in srgb, var(--bad) 18%, transparent);  color: var(--bad); }
.skip-reason-badge--other      { background: color-mix(in srgb, var(--text-muted) 18%, transparent); color: var(--text-muted); }

/* === Telegram-link banner (D11, overhaul 2026-07-14) === */
.dash-tg-banner {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-4);
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.45;
}
.dash-tg-banner .ico {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--accent);
    margin-top: 2px;
}
.dash-tg-banner__body { flex: 1 1 auto; }
.dash-tg-banner__body a {
    display: inline-block;
    margin-left: var(--sp-2);
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.dash-tg-banner__body a:hover { text-decoration: underline; }
.dash-tg-banner__close {
    flex: 0 0 auto;
    border: none;
    background: none;
    padding: 0 var(--sp-1);
    font-size: 1.2rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}
.dash-tg-banner__close:hover { color: var(--text); }

/* === Onboarding banner (iter Q-followup) — welcome для новых === */
.onboarding-banner {
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-4);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 12%, var(--bg-raised)),
        var(--bg-raised));
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--r-md);
}
.onboarding-banner__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    color: var(--accent);
}
.onboarding-banner__head .ico { width: 20px; height: 20px; }
.onboarding-banner__headline {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--fs-base);
}
.onboarding-banner__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}
.onboarding-banner__step {
    display: grid;
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--sp-2);
    row-gap: 2px;
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}
.onboarding-banner__step--done { border-color: color-mix(in srgb, var(--improve) 50%, var(--border)); }
.onboarding-banner__step--pending { border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); }
.onboarding-banner__step--error { border-color: color-mix(in srgb, var(--danger) 60%, var(--border)); background: color-mix(in srgb, var(--danger) 6%, transparent); }
.onboarding-banner__step--error .onboarding-banner__status {
    background: color-mix(in srgb, var(--danger) 22%, transparent);
    color: var(--danger);
}
.onboarding-banner__step--error .onboarding-banner__title { color: var(--danger); }
.onboarding-banner__status {
    grid-row: 1 / 3;
    align-self: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-raised) 70%, transparent);
}
.onboarding-banner__step--done .onboarding-banner__status {
    background: color-mix(in srgb, var(--improve) 22%, transparent);
    color: var(--improve);
}
.onboarding-banner__step--pending .onboarding-banner__status {
    background: color-mix(in srgb, var(--warn) 22%, transparent);
    color: var(--warn);
}
/* iter Y: «running» — активный job. CSS-spinner (cs2t-spin keyframe из components.css). */
.onboarding-banner__step--running {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}
.onboarding-banner__status--spinner {
    background: transparent !important;
    padding: 0;
}
.onboarding-banner__status--spinner .spinner {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
    border-top-color: var(--accent);
}
.onboarding-banner__title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--fs-sm);
}
.onboarding-banner__desc {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.4;
}

@media (max-width: 767px) {
    .onboarding-banner__steps { grid-template-columns: 1fr; }
}

/* === Drill performance summary (iter S) — top-3 most recent drill metrics === */
.drill-perf-summary {
    margin-bottom: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.drill-perf-summary__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-2);
}
.drill-perf-summary__more {
    font-size: var(--fs-xs);
    text-decoration: none;
}
.drill-perf-summary__more:hover { color: var(--accent); }
.drill-perf-summary__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}
.drill-perf-summary__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s;
}
.drill-perf-summary__item:hover { border-color: var(--accent); }
.drill-perf-summary__name {
    font-size: var(--fs-sm);
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drill-perf-summary__value {
    font-size: var(--fs-lg, 18px);
    font-weight: 600;
    color: var(--accent);
}
.drill-perf-summary__meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
}
.drill-perf-summary__tier {
    padding: 1px 6px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
}
.drill-perf-summary__time { font-family: var(--font-mono); }

@media (max-width: 767px) {
    .drill-perf-summary__grid { grid-template-columns: 1fr; }
}

/* === Top correlation card (iter O) — dashboard surface === */
.top-corr-card {
    display: grid;
    grid-template-columns: 1fr 18px;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.top-corr-card:hover {
    background: color-mix(in srgb, var(--bg-raised) 70%, var(--bg-surface));
}
.top-corr-card--positive { border-left-color: var(--improve); }
.top-corr-card--negative { border-left-color: var(--bad); }
.top-corr-card__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.top-corr-card__head .eyebrow {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.top-corr-card__delta {
    margin-left: auto;
    font-size: var(--fs-base);
    font-weight: 600;
}
.top-corr-card--positive .top-corr-card__delta { color: var(--improve); }
.top-corr-card--negative .top-corr-card__delta { color: var(--bad); }
.top-corr-card__body {
    margin-top: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.top-corr-card__interpretation {
    color: var(--text-primary);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.top-corr-card__sample {
    font-size: var(--fs-xs);
}
.top-corr-card__chevron {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    color: var(--text-muted);
    opacity: 0.5;
}
.top-corr-card:hover .top-corr-card__chevron {
    color: var(--accent);
    opacity: 1;
}

/* === MM-readiness card (iter I) — dashboard signal === */
.mm-readiness {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    background: var(--bg-raised);
    margin-bottom: var(--sp-5);
}
.mm-readiness--go         { border-left-color: var(--improve); }
.mm-readiness--train-first { border-left-color: var(--warn); }
.mm-readiness--rest       { border-left-color: var(--bad); }
.mm-readiness--unknown    { border-left-color: var(--text-muted); }

.mm-readiness__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-base) 60%, transparent);
}
.mm-readiness__icon svg { width: 26px; height: 26px; }
.mm-readiness--go .mm-readiness__icon svg         { color: var(--improve); }
.mm-readiness--train-first .mm-readiness__icon svg { color: var(--warn); }
.mm-readiness--rest .mm-readiness__icon svg       { color: var(--bad); }
.mm-readiness--unknown .mm-readiness__icon svg    { color: var(--text-muted); }

.mm-readiness__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.mm-readiness__headline {
    font-weight: 600;
    font-size: var(--fs-lg, 18px);
    color: var(--text-primary);
}
.mm-readiness__reasons {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.mm-readiness__reasons li + li { margin-top: 2px; }

.mm-readiness__tip {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: color-mix(in srgb, var(--bg-base) 50%, transparent);
    border-left: 2px solid var(--accent);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}
.mm-readiness__tip .ico-sm {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--accent);
    margin-top: 2px;
}

.mm-readiness__cta {
    white-space: nowrap;
}

/* iter Q: structured warmup list */
.mm-readiness__warmup {
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: color-mix(in srgb, var(--bg-base) 50%, transparent);
    border-left: 2px solid var(--improve);
    border-radius: var(--r-sm);
}
.mm-readiness__warmup-head {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--improve);
    margin-bottom: 6px;
    font-family: var(--font-mono);
}
.mm-readiness__warmup-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: warmup;
}
.mm-readiness__warmup-step {
    counter-increment: warmup;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 3px 0;
    font-size: var(--fs-sm);
    cursor: help;
}
.mm-readiness__warmup-step::before {
    content: counter(warmup);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--improve) 22%, transparent);
    color: var(--improve);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-family: var(--font-mono);
    flex-shrink: 0;
}
.mm-readiness__warmup-name {
    color: var(--text-primary);
}
.mm-readiness__warmup-min {
    margin-left: auto;
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

@media (max-width: 767px) {
    .mm-readiness {
        grid-template-columns: 48px 1fr;
        grid-template-rows: auto auto;
    }
    .mm-readiness__cta {
        grid-column: 1 / 3;
        justify-self: stretch;
        text-align: center;
    }
}

/* === Drill effectiveness page (iter H) === */
.effectiveness-summary {
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.effectiveness-summary__verdict {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text-primary);
}
.effectiveness-summary__verdict .ico {
    width: 18px;
    height: 18px;
    color: var(--accent);
    flex-shrink: 0;
}
.effectiveness-summary__meta {
    font-size: var(--fs-sm);
}
.effectiveness-summary__meta strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.effectiveness-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}
.effectiveness-row {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-rows: auto auto;
    gap: var(--sp-2) var(--sp-4);
    align-items: start;
}
.effectiveness-row--strong       { border-left-color: var(--accent); }
.effectiveness-row--weak         { border-left-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.effectiveness-row--insufficient { border-left-color: var(--border); opacity: 0.65; }

.effectiveness-row__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.effectiveness-row__significance {
    font-size: var(--fs-xs);
    padding: 2px var(--sp-2);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
}
.effectiveness-row__significance--strong {
    background: color-mix(in srgb, var(--improve) 18%, transparent);
    color: var(--improve);
}
.effectiveness-row__significance--weak {
    background: color-mix(in srgb, var(--warn) 16%, transparent);
    color: var(--warn);
}
.effectiveness-row__significance--insufficient {
    background: color-mix(in srgb, var(--text-muted) 16%, transparent);
    color: var(--text-muted);
}
.effectiveness-row__sample {
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
}

.effectiveness-row__metrics {
    grid-column: 2;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
}
.effectiveness-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-base);
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
}
.effectiveness-metric__label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.effectiveness-metric__value {
    font-size: var(--fs-md, 16px);
    font-weight: 600;
}
.effectiveness-metric--up    { border-color: color-mix(in srgb, var(--improve) 50%, var(--border)); }
.effectiveness-metric--up    .effectiveness-metric__value { color: var(--improve); }
.effectiveness-metric--down  { border-color: color-mix(in srgb, var(--bad) 50%, var(--border)); }
.effectiveness-metric--down  .effectiveness-metric__value { color: var(--bad); }
.effectiveness-metric--flat  .effectiveness-metric__value { color: var(--text-muted); }
.effectiveness-metric--n-a   .effectiveness-metric__value { color: var(--text-muted); opacity: 0.5; }

.effectiveness-row__interpretation {
    grid-column: 1;
    grid-row: 2;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.55;
}

.effectiveness-footnote {
    margin-top: var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-raised);
    border-left: 2px solid var(--border);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    line-height: 1.6;
}
.effectiveness-footnote strong { color: var(--text-primary); }

@media (max-width: 767px) {
    .effectiveness-row {
        grid-template-columns: 1fr;
    }
    .effectiveness-row__metrics {
        grid-column: 1;
        grid-row: auto;
    }
    .effectiveness-row__interpretation {
        grid-column: 1;
        grid-row: auto;
    }
}

/* === iter 18-followup: multi-line rank stack === */
.dash-hero__rank-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.dash-hero__rank-stack .dash-hero__rank-tag {
    display: inline-block;
    width: fit-content;
    font-size: 12px;
    letter-spacing: 0.04em;
}

/* === iter A: match details impact rows === */
.match-detail-impact, .match-detail-util, .match-detail-movement, .match-detail-ratings, .match-detail-aim {
    margin-bottom: 16px;
}
.match-detail-impact__rows, .match-detail-util__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
}
.impact-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
}
.impact-row__label {
    color: var(--text-muted, #6c757d);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 200px;
    flex-shrink: 0;
}
.impact-row__value {
    color: var(--text, #e6e8eb);
}
.impact-row__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.impact-row__badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--surface-3, #2a2e36);
    border: 1px solid var(--accent, #f5a623);
    color: var(--accent, #f5a623);
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    letter-spacing: 0.04em;
}
.match-detail-movement__row {
    padding: 12px 16px;
    font-size: 14px;
}

/* === iter B: stats page side-split + leetify grid === */
.map-stat-row__sides {
    display: flex;
    gap: 8px;
    padding: 4px 16px 8px 60px;
    flex-wrap: wrap;
}
.side-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    letter-spacing: 0.05em;
}
.side-pill--t  { background: rgba(245, 166, 35, 0.12); color: var(--accent, #f5a623); border: 1px solid rgba(245, 166, 35, 0.4); }
.side-pill--ct { background: rgba(89, 162, 255, 0.12); color: #59a2ff; border: 1px solid rgba(89, 162, 255, 0.4); }

.stats-leetify-card__grid {
    padding: 12px;
}
.stats-leetify-card__multikills {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 16px 16px;
    border-top: 1px solid var(--surface-3, #2a2e36);
    margin-top: 8px;
}

/* === iter C: mobile responsive baseline === */

/* Tablet (≤1023px): 4-col KPI → 2-col; 12-col grid → 6-col; sidebar collapsed */
@media (max-width: 1023px) {
    .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-cols-12 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .col-span-5  { grid-column: span 6 / span 6 !important; }
    .col-span-7  { grid-column: span 6 / span 6 !important; }
    .col-span-8  { grid-column: span 6 / span 6 !important; }
    .col-span-4  { grid-column: span 6 / span 6 !important; }

    /* Page header — action buttons wrap */
    .page-header { flex-wrap: wrap; gap: 12px; }
    .page-header__actions { flex-wrap: wrap; }

    /* Match details hero — stack vertical */
    .match-detail-hero { flex-direction: column; gap: 12px; }
    .match-detail-hero__center { order: -1; }

    /* Topbar — hide search */
    .topbar__search { display: none; }
}

/* Tablet / small-laptop (≤1023px): dashboard hero stacks early — иначе на 13"
   ноутбуке hero с minmax(0, 1.2fr) сжимается так, что description text режется. */
@media (max-width: 1023px) {
    .dash-hero { grid-template-columns: 1fr; gap: var(--sp-4); }
    .dash-hero__score { align-items: flex-start; }
    .dash-hero__score .desc { max-width: none; }
    .skill-grid { grid-template-columns: 1fr; }
}

/* Mobile (≤767px): single column для всех cards, compact spacing */
@media (max-width: 767px) {
    .grid-cols-4, .grid-cols-3, .grid-cols-12 { grid-template-columns: 1fr !important; }
    .col-span-5, .col-span-7, .col-span-8, .col-span-4 { grid-column: span 1 / span 1 !important; }
    /* Activity-strip: 7 дней не влезают, делаем горизонтальный скролл */
    .activity-strip {
        display: flex !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .activity-strip__day { flex: 0 0 44px; min-width: 44px; }
    /* Recap-card grid — две колонки не лезут, стек */
    .recap-card__row { grid-template-columns: 1fr !important; }
    /* Today-item — компактнее */
    .today-item { grid-template-columns: 28px 1fr auto !important; gap: 8px !important; }

    /* Headers compact */
    .page-header h1 { font-size: 24px; }
    .page-header__actions { width: 100%; }
    .page-header__actions .btn { flex: 1; min-width: 0; }

    /* Hide breadcrumb separator + first crumb on mobile (just keep current) */
    .topbar__crumbs > span:not(.current), .topbar__crumbs .sep { display: none; }

    /* Stat cards compact */
    .stat-card { padding: 12px; }
    .stat-card__value { font-size: 20px; }

    /* Activity strip + recap card — adapt */
    .activity-strip { gap: 4px; padding: 8px; flex-wrap: wrap; }
    .activity-strip__day { min-width: 36px; }
    .recap-card { padding: 10px; }
    .recap-card__row { grid-template-columns: 1fr 1fr; }

    /* Match details impact rows — stack label/value vertically */
    .impact-row { flex-direction: column; align-items: flex-start; gap: 2px; }
    .impact-row__label { min-width: 0; }

    /* Map stat row — make scrollable horizontally */
    .map-stats { font-size: 12px; }
    .map-stat-row__sides { padding-left: 12px; }

    /* Plan / week-grid — 7 days в одну колонку */
    .plan-week-grid { grid-template-columns: 1fr !important; }

    /* Coach insights single col */
    .coach-radar-wrap { padding: 12px; }
    .coach-radar-wrap canvas { max-height: 240px; }

    /* Job badge stack vertical */
    .job-badge { flex-wrap: wrap; }
    .job-badge__reload, .job-badge__dismiss { margin-left: auto; }

    /* Footer */
    .dash-footer { flex-direction: column; gap: 4px; text-align: center; }

    /* ===== Match-row reflow ============================================
       Desktop — 9-col grid (`14px 90px 1fr 80px 90px 80px 80px 70px 40px`,
       ~600px min) — на узком экране вылетает за viewport. Переходим на
       flex+wrap: первая строка result | date | map | score | chev;
       вторая строка (если стат-блоки не влезли) wrap'ом — K/D ADR HS% rank.
       Используется на /matches и в dashboard «Последние матчи». */
    .match-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
        padding: 10px 12px;
        font-size: 13px;
    }
    .match-row__result { width: 4px; height: 32px; flex: 0 0 4px; }
    .match-row__date { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
    .match-row__date .time { display: inline; color: var(--text-muted); margin-left: 4px; }
    .match-row .map-badge { flex: 0 0 auto; }
    .match-row__score { font-size: 15px; flex: 0 0 auto; }
    .match-row__chev { margin-left: auto; flex: 0 0 auto; }
    /* Stat-блоки — inline label+value, чтобы при wrap занимали меньше места. */
    .match-row__stat {
        text-align: left;
        display: inline-flex; align-items: baseline; gap: 4px;
        font-size: 11px;
        flex: 0 0 auto;
    }
    .match-row__stat .lbl { display: inline; font-size: 10px; }
    .match-row__stat .val { font-size: 12px; }
    .match-row__rank { width: auto; height: auto; padding: 2px 6px; font-size: 10px; flex: 0 0 auto; }

    /* ===== Map-stat-row (used on /stats) ==============================
       Desktop: `180px 1fr 70px 70px 70px` — ~470px min, не влезает.
       Mobile: первый столбец сжимаем до auto + переносим bar/numbers
       на следующую строку. */
    .map-stat-row {
        grid-template-columns: 1fr auto auto auto;
        grid-template-rows: auto auto;
        gap: 6px 10px;
        padding: 8px 12px;
        font-size: 13px;
    }
    .map-stat-row__bar { grid-column: 1 / -1; grid-row: 2; }
    .map-stat-row--head { display: none; } /* заголовок таблицы прячем */

    /* ===== Settings-row stack ========================================
       Desktop: `200px 1fr` — label слева, поле справа. На мобиле
       label превращается в caption над полем. */
    .settings-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
    .settings-section { padding: 16px; }

    /* ===== Pagination wrap ===========================================
       Flex space-between на узком экране сплющивает «Показано N-M» текст. */
    .pagination { flex-direction: column; align-items: stretch; gap: 8px; }
    .pagination__pages { justify-content: center; flex-wrap: wrap; }

    /* ===== Match-detail-hero score шрифт ============================= */
    .match-detail-hero { padding: 16px; gap: 12px; }
    .match-detail-hero__side .score { font-size: 36px; }
    .match-detail-hero__side { gap: 4px; }

    /* ===== Coach-score-hero hero уже стакается на 1023px, но score
       value 64px на 480-ке всё ещё гигантский. ========================= */
    .coach-score-hero { padding: 16px; gap: 16px; }
    .coach-score-hero__score-value { font-size: 44px; }
    .coach-score-hero__title { font-size: var(--fs-xl); }
    .coach-score-hero__lead { font-size: var(--fs-sm); }

    /* ===== Dash-hero score value 48px на узком — режем до 36px. */
    .dash-hero { padding: 16px; gap: 12px; }
    .dash-hero__score .val { font-size: 36px; }
    .dash-hero__avatar { width: 56px; height: 56px; font-size: 18px; }
    .dash-hero__name { font-size: var(--fs-xl); }

    /* ===== Admin форма ============================================= */
    .admin-form__row { gap: 12px; }
    .admin-form__row input[type="text"],
    .admin-form__row input[type="number"],
    .admin-form__row select { min-width: 0; width: 100%; }
    .admin-form__row label { width: 100%; }

    /* ===== Match details mini-cards: impact rows ===================== */
    .match-detail-impact, .match-detail-util,
    .match-detail-movement, .match-detail-ratings,
    .match-detail-aim { padding: 12px; }

    /* ===== Filter-bar: separator невидим на узком (только chips). */
    .filter-bar { padding: 12px; gap: 8px; }
    .filter-bar__sep { display: none; }
    .filter-bar__spacer { display: none; }

    /* ===== Card / section heads — поменьше padding. */
    .card__header { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
    .card__title { font-size: var(--fs-md); }

    /* ===== Eyebrow + page header — компактнее. */
    .page-header { margin-bottom: 16px; }
    .eyebrow { font-size: 10px; }

    /* Skill-grid (radar block dashboard) — оставляем 1 колонку (наследуется). */
}

/* Very small (≤480px) — tighter */
@media (max-width: 480px) {
    .topbar { padding: 8px 12px; gap: 8px; }
    .topbar__user-name { display: none; } /* avatar only */
    .topbar__icon-btn { display: none; } /* hide notification bell etc */
    .topbar__crumbs { font-size: 12px; }
    .main { padding: 12px; }

    /* ===== KPI cards дальше уменьшаем — иначе rotation в стат-cards
       плохо смотрится при padding 12px. */
    .stat-card { padding: 10px; }
    .stat-card__value { font-size: 18px; }
    .stat-card__label { font-size: 10px; }

    /* ===== Activity-strip: на 480px сужаем дни ещё больше. */
    .activity-strip__day { flex: 0 0 38px; min-width: 38px; }

    /* ===== Recap-card row — 2-col → 1-col, иначе values режутся. */
    .recap-card__row { grid-template-columns: 1fr !important; }

    /* ===== Coach hero — на 480px уже стак минимальный. */
    .coach-score-hero__score-value { font-size: 38px; }
    .coach-score-hero__score-box { padding: 10px; }

    /* ===== Match-detail-hero score 30px. */
    .match-detail-hero__side .score { font-size: 30px; }

    /* ===== Admin map-row — стак (3-col не лезет). */
    .admin-map-row { grid-template-columns: 1fr; gap: 4px; }

    /* ===== Page header h1 — ещё меньше. */
    .page-header h1 { font-size: 20px; }
    .page-header__title p { font-size: var(--fs-sm); }

    /* ===== Match-row super-tight: прячем rank-бейдж (информация
       дублируется в Leetify Rating'е, неинформативна без контекста). */
    .match-row__rank { display: none; }
}

/* ===== Plan mark-complete dropdown на мобиле ============================
   Меню .plan-mark__menu — position: absolute с right: 0 + min-width: 240px.
   Якорь — .plan-mark (сам <details>), который на мобиле inline-block ~28px
   (только summary-чекбокс). Получается меню рисуется от правого края этой
   узкой коробки на 240px влево → уезжает в minus-area за левый край viewport'а.
   На мобиле переносим якорь на .today-item (плейн-айтем, full-width в колонке)
   и разводим меню left/right с отступом — становится «card-like» панелью
   во всю ширину плейн-айтема. */
@media (max-width: 900px) {
    .today-item.plan-item { position: relative; }
    .plan-mark { position: static; }
    .plan-mark__menu {
        left: 8px;
        right: 8px;
        min-width: 0;
        max-width: calc(100vw - 32px);
    }
}

/* === iter D: insight drill-hint === */
.insight-card__drill {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--accent, #f5a623);
    background: rgba(245, 166, 35, 0.08);
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text, #e6e8eb);
}
.insight-card__drill .ico { color: var(--accent, #f5a623); flex-shrink: 0; margin-top: 2px; }

/* ====================================================================== */
/* Callouts modal (iter Y-followup) — карта + список позиций                */
/* ====================================================================== */
/* Clickable map-badge для callouts drill'а — выглядит как обычный badge,
   но cursor: pointer + hover-подсветка чтоб игроку было понятно что кликабельно. */
button.plan-item__map-badge {
    background: inherit;
    border: inherit;
    font: inherit;
    color: inherit;
    padding: inherit;
    cursor: pointer;
}
a.plan-item__map-badge { text-decoration: none; color: inherit; }
/* Стрелка-стрелочка слева в clickable map-badge — визуальный сигнал «нажать». */
.plan-item__map-arrow { width: 11px; height: 11px; margin-right: 2px; color: var(--accent); flex-shrink: 0; }

/* Server-link CTA для map-less drill'ов (HSDM / DM / 1v1 / retake). */
/* Размер как у .plan-item__map-badge (10px / 1px 6px), но с accent-подсветкой
   (subtle background tint + accent border) — это всё-таки CTA, должен выделяться. */
.plan-item__server-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.plan-item__server-link:hover {
    color: var(--bg-base);
    background: var(--accent);
    border-color: var(--accent);
}
.plan-item__server-link .ico-sm { width: 11px; height: 11px; flex-shrink: 0; }

.plan-item__map-badge--clickable {
    cursor: pointer;
    position: relative;
    transition: filter 120ms ease;
}
.plan-item__map-badge--clickable:hover {
    filter: brightness(1.2);
    outline: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
    outline-offset: 1px;
}
/* Раньше тут был ::after "🗺" emoji справа — заменён стрелкой слева
   (.plan-item__map-arrow), теперь сигнал «кликабельно» един для всех CTA. */

.callouts-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, black 70%, transparent);
    backdrop-filter: blur(3px);
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow: auto;
}
.callouts-overlay[hidden] { display: none; }
.callouts-locked { overflow: hidden; }

.callouts-modal {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    width: min(1280px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.callouts-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.callouts-modal__title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
}
.callouts-modal__close {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
}
.callouts-modal__close:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.callouts-modal__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 16px;
    padding: 16px 20px 20px;
    overflow: hidden;
    min-height: 0;
}
.callouts-modal__map {
    position: relative;
    align-self: start;
}
.callouts-modal__list {
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    padding-right: 6px;
}
.callouts-modal__map img {
    width: 100%;
    height: auto;
    border-radius: var(--r-sm);
    display: block;
}
.callouts-modal__markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.callouts-marker {
    position: absolute;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 35%, transparent);
    border: 1.5px solid var(--accent);
    pointer-events: auto;
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
    opacity: 0.55;
}
.callouts-marker:hover,
.callouts-marker.is-active {
    transform: scale(2.2);
    background: var(--accent);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);
    opacity: 1;
    z-index: 5;
}
.callouts-modal__item {
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.callouts-modal__item.is-active {
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-base));
    border-color: var(--accent);
}
.callouts-modal__list-head {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}
.callouts-modal__list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.callouts-modal__item {
    background: color-mix(in srgb, var(--bg-base) 50%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.callouts-modal__name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}
.callouts-modal__desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}
.callouts-modal__loading {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    padding: 40px 0;
}
.callouts-modal__loading--err { color: var(--bad); }

@media (max-width: 900px) {
    .callouts-modal__body {
        grid-template-columns: 1fr;
    }
}


/* ====================================================================== */
/* Admin panel (iter Z)                                                    */
/* ====================================================================== */
.admin-toast {
  padding: 10px 14px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--accent); margin-bottom: 16px; font-size: 13px;
}
.admin-error {
  padding: 10px 14px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  color: var(--danger); margin-bottom: 16px; font-size: 13px;
}
.admin-tag {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--text-muted) 18%, transparent);
  color: var(--text-muted); font-size: 11px; margin-left: 8px;
}
.admin-tag--warn {
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  color: var(--warn);
}
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table thead { background: var(--bg-base); }
.admin-table th { text-align: left; padding: 10px 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
.admin-table th.num, .admin-table td.num { text-align: right; font-family: var(--font-mono); }
.admin-table td { padding: 10px 12px; border-top: 1px solid var(--border); vertical-align: middle; }
.admin-table tr.is-retired td { color: var(--text-muted); opacity: 0.7; }
.admin-form { display: flex; flex-direction: column; gap: 18px; }
.admin-form__section { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 20px; }
.admin-form__section h2 { margin: 0 0 12px; font-size: 14px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.admin-form__row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.admin-form__row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.admin-form__row input[type="text"], .admin-form__row input[type="number"], .admin-form__row select, .admin-form__row textarea {
  padding: 8px 10px; background: var(--bg-base); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--r-sm); font: inherit; min-width: 240px;
}
.admin-form__row textarea { min-width: 100%; width: 100%; font-family: inherit; resize: vertical; }
.admin-form__full { flex: 1; }
.admin-form__sublabel { font-size: 12px; color: var(--text-muted); align-self: center; margin-right: 8px; }
.admin-form__secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; cursor: pointer; background: var(--bg-base); }
.admin-chip:has(input:checked) { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: var(--accent); color: var(--accent); }
.admin-maps-grid { display: flex; flex-direction: column; gap: 6px; }
.admin-map-row { display: grid; grid-template-columns: 1.5fr 130px 1fr; gap: 8px; padding: 8px 10px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-sm); align-items: center; }
.admin-map-row.is-on { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--bg-base)); }
.admin-map-row__toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.admin-map-row__code { font-weight: 600; }
.admin-map-row__hint { font-size: 11px; color: var(--text-muted); }
.admin-form__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.admin-videos { margin-top: 24px; }
.admin-video-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; padding: 10px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-sm); align-items: center; margin-bottom: 8px; }
.admin-video-row__thumb img { width: 100%; border-radius: var(--r-sm); display: block; }
.admin-video-row__form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-video-row__form input { padding: 6px 8px; background: var(--bg-raised); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--r-sm); font: inherit; }
.admin-video-row__form input[type="number"] { width: 70px; }
.admin-video-add { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.admin-video-add input { padding: 8px 10px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); font: inherit; }
.admin-video-add input[type="text"]:first-child { flex: 1; }
.admin-inline-form { display: flex; gap: 6px; align-items: center; }
.admin-inline-form input[type="text"] { padding: 6px 8px; background: var(--bg-base); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--r-sm); font: inherit; }

.drill-videos-card { margin-top: 16px; }
.drill-videos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; padding: 12px 16px 16px; }
.drill-video { margin: 0; }
.drill-video__frame { position: relative; padding-top: 56.25%; background: #000; border-radius: var(--r-sm); overflow: hidden; }
.drill-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.drill-video__title { margin-top: 6px; font-size: 13px; color: var(--text-primary); line-height: 1.3; }

.callouts-modal__polygons { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Пагинация списка позиций (callouts-modal.js wirePagination, page size 12). */
.callouts-modal__pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.callouts-modal__pager[hidden] { display: none; }
.callouts-modal__pager-btn { background: var(--bg-base); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--r-sm); padding: 4px 10px; font-size: 14px; line-height: 1; cursor: pointer; min-width: 32px; }
.callouts-modal__pager-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.callouts-modal__pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.callouts-modal__pager-status { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 48px; text-align: center; }
.callouts-polygon { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: var(--accent); stroke-width: 0.35; opacity: 0.45; transition: opacity 140ms ease, stroke-width 140ms ease, fill 140ms ease; pointer-events: auto; cursor: pointer; vector-effect: non-scaling-stroke; }
.callouts-polygon:hover, .callouts-polygon.is-active { opacity: 0.95; stroke-width: 0.6; fill: color-mix(in srgb, var(--accent) 35%, transparent); }

/* ====================================================================== */
/* Admin Callout editor (iter Z Sub-2)                                      */
/* ====================================================================== */
.admin-callouts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.admin-callouts-card { display: block; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-raised); overflow: hidden; color: inherit; text-decoration: none; }
.admin-callouts-card:hover { border-color: var(--accent); }
.admin-callouts-card__thumb { aspect-ratio: 1 / 1; background: var(--bg-base); }
.admin-callouts-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-callouts-card__meta { padding: 10px 12px; }
.admin-callouts-card__name { font-weight: 600; }
.admin-callouts-card__sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.ace-upload { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin-bottom: 16px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-sm); }
.ace-upload__field { display: flex; flex-direction: column; gap: 4px; flex: 1; font-size: 12px; color: var(--text-muted); }

.ace { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; }
.ace__canvas { position: relative; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; user-select: none; }
.ace__img { width: 100%; height: auto; display: block; }
.ace__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; cursor: crosshair; }
.ace__poly-existing { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: color-mix(in srgb, var(--accent) 50%, transparent); stroke-width: 0.3; vector-effect: non-scaling-stroke; pointer-events: none; }
.ace__poly-existing.is-active { fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke: var(--accent); stroke-width: 0.5; }
.ace__poly-draft { fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke: var(--accent); stroke-width: 0.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.ace__vertex { fill: var(--accent); stroke: white; stroke-width: 0.25; vector-effect: non-scaling-stroke; cursor: grab; }
.ace__vertex:hover { stroke-width: 0.5; r: 0.4; }
.ace__vertex:active { cursor: grabbing; }
.ace__center-marker { fill: color-mix(in srgb, var(--accent) 60%, transparent); stroke: white; stroke-width: 0.2; vector-effect: non-scaling-stroke; pointer-events: none; }
.ace__center-marker.is-active { fill: var(--accent); stroke-width: 0.4; }

.ace-toolbar { display: flex; align-items: center; gap: 14px; padding: 8px 12px; margin-bottom: 12px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-sm); }
.ace-toolbar__toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text-primary); user-select: none; }
.ace-toolbar__toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.ace-toolbar__hint { font-size: 12px; color: var(--text-muted); }

.ace__sidebar { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 200px); overflow: auto; }
.ace__head { display: flex; justify-content: space-between; align-items: center; }
.ace__head h3 { margin: 0; font-size: 13px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.04em; }
.ace__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ace__item { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; font-size: 13px; background: var(--bg-base); display: flex; align-items: center; gap: 6px; }
.ace__item:hover, .ace__item.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-base)); }
.ace__item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ace__item-rename { flex: none; border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: var(--r-sm); line-height: 1; opacity: 0.6; }
.ace__item-rename:hover { color: var(--accent); opacity: 1; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ace__item-rename-input { flex: 1; min-width: 0; padding: 3px 6px; background: var(--bg-base); border: 1px solid var(--accent); border-radius: var(--r-sm); color: var(--text-primary); font: inherit; font-size: 13px; }
.ace__form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.ace__form label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-muted); }
.ace__form input, .ace__form textarea { padding: 6px 8px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); font: inherit; }
.ace__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ace__form-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ace__poly-status { margin: 0; font-size: 12px; color: var(--text-muted); }
.ace__hint { margin: 0; font-size: 11px; color: var(--text-muted); line-height: 1.4; }

@media (max-width: 900px) {
  .ace { grid-template-columns: 1fr; }
  .ace__sidebar { max-height: none; }
}

.drill-howto-card { margin-top: 16px; }
.drill-howto-card__body { padding: 4px 20px 20px; font-size: 14px; line-height: 1.6; color: var(--text-primary); }
.drill-howto-card__body p { margin: 0 0 12px; }
.drill-howto-card__body p:last-child { margin-bottom: 0; }

/* Split-layout: HowTo слева, видео справа. Если только HowTo или только видео —
   wrapping single-column перекрывает grid'ом auto-fit. */
.drill-howto-card__split { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 4px 20px 20px; }
.drill-howto-card--split .drill-howto-card__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    container-type: inline-size;
}
.drill-howto-card__split .drill-howto-card__body { padding: 0; }
.drill-howto-card__videos { display: flex; flex-direction: column; gap: 12px; }

/* В split-режиме лимит высоты текста = высота видео-колонки (16:9 от ширины
   столбца) + figcaption ≈ 36px. Сверху scroll внутри блока, чтобы карта не
   тянулась под видео. cqi → container query inline size = ширина split'а. */
.drill-howto-card--split .drill-howto-card__body {
    max-height: calc((100cqi - 16px) / 2 * 9 / 16 + 36px);
    overflow-y: auto;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.drill-howto-card--split .drill-howto-card__body::-webkit-scrollbar { width: 6px; }
.drill-howto-card--split .drill-howto-card__body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

@media (max-width: 900px) {
    .drill-howto-card--split .drill-howto-card__split { grid-template-columns: 1fr; }
    /* В single-column ограничение высоты не нужно — карта раскрывается полностью. */
    .drill-howto-card--split .drill-howto-card__body { max-height: none; overflow: visible; padding-right: 0; }
}

.catalog-hint { display: flex; gap: 8px; align-items: center; padding: 10px 14px; margin-bottom: 16px; background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: var(--r-sm); font-size: 13px; color: var(--text-muted); }
.catalog-hint .ico-sm { flex-shrink: 0; color: var(--accent); }
.catalog-hint strong { color: var(--text-primary); }

.catalog-card-wrap { position: relative; }
.catalog-card__toggle { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; }
/* Кнопка ⛔/↺ перекрывала бы duration-бейдж справа в drill-card__head;
   резервируем под неё место. */
.catalog-card-wrap .drill-card__head { padding-right: 36px; }
.catalog-card__toggle button { background: color-mix(in srgb, var(--bg-base) 80%, transparent); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 8px; font-size: 14px; cursor: pointer; line-height: 1.4; color: var(--text-muted); transition: background 120ms ease, color 120ms ease, border-color 120ms ease; }
.catalog-card__toggle button:hover { color: var(--danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, var(--bg-base)); }
.catalog-card-wrap.is-excluded .catalog-card__toggle button { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--bg-base)); }
.catalog-card--excluded { opacity: 0.55; filter: grayscale(0.5); }
.catalog-card--excluded:hover { opacity: 0.85; }

.ace-uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.ace-uploads .ace-upload { margin: 0; }
@media (max-width: 700px) { .ace-uploads { grid-template-columns: 1fr; } }

/* Callouts quiz mode (iter Z followup) */
.callouts-modal__actions { display: flex; gap: 8px; align-items: center; }
.callouts-quiz { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; max-height: 100%; overflow: auto; background: var(--bg-raised); border-radius: var(--r-sm); }
/* UA [hidden]{display:none} имеет низкую specificity → author display:flex/inline-flex
   её перебивает. Без этих overrides панель/финиш/кнопка не скрываются и показаны разом. */
.callouts-quiz[hidden] { display: none !important; }
.callouts-quiz__finish[hidden] { display: none !important; }
.callouts-quiz__progress[hidden] { display: none !important; }
.callouts-quiz__finish-rank[hidden] { display: none !important; }
[data-quiz-start][hidden] { display: none !important; }
.callouts-quiz__head { display: flex; justify-content: space-between; align-items: center; }
.callouts-quiz__score { font-family: var(--font-mono); font-size: 14px; color: var(--text-primary); }

/* Picker-quiz prompt — большая надпись с именем текущей цели. */
.callouts-quiz__prompt { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--r-sm); }
.callouts-quiz__prompt-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.callouts-quiz__target { font-size: 22px; font-weight: 700; color: var(--accent); line-height: 1.2; }
.callouts-quiz__skip { align-self: flex-end; }

/* Progress log — список уже отвечённых позиций (✓ / ✗). */
.callouts-quiz__progress { padding-top: 6px; border-top: 1px solid var(--border); }
.callouts-quiz__progress-title { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.callouts-quiz__progress-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow-y: auto; font-size: 12px; font-family: var(--font-mono); }
.callouts-quiz__progress-row.is-ok   { color: var(--improve); }
.callouts-quiz__progress-row.is-fail { color: var(--bad); }

/* Финальный экран после прохождения. */
.callouts-quiz__finish { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; background: color-mix(in srgb, var(--accent) 8%, var(--bg-base)); border: 1px solid var(--accent); border-radius: var(--r-sm); }
.callouts-quiz__finish-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.callouts-quiz__finish-score { font-family: var(--font-mono); font-size: 28px; color: var(--accent); }

/* В quiz-режиме картинка получает crosshair-курсор — игрок должен кликнуть в позицию. */
.callouts-modal__map--quiz { cursor: crosshair; }
.callouts-modal__map--quiz img { cursor: crosshair; }

/* Feedback hit/miss на polygon'е — persistent paint (зелёный/красный до конца квиза). */
.callouts-polygon.is-quiz-hit  { opacity: 1 !important; fill: color-mix(in srgb, var(--improve) 50%, transparent) !important; stroke: var(--improve) !important; stroke-width: 0.6 !important; }
.callouts-polygon.is-quiz-miss { opacity: 1 !important; fill: color-mix(in srgb, var(--bad) 50%, transparent) !important; stroke: var(--bad) !important; stroke-width: 0.6 !important; }

/* Polygons в quiz mode: почти невидимые, но hover показывает границы зоны.
   pointer-events: auto — иначе hover не сработает. */
.callouts-polygon.quiz-mode-dim { opacity: 0.05; pointer-events: auto; }
.callouts-polygon.quiz-mode-dim:hover {
  opacity: 1;
  fill: color-mix(in srgb, var(--accent) 40%, transparent);
  stroke: var(--accent);
  stroke-width: 0.8;
}
.callouts-polygon.quiz-mode-dim.is-quiz-target { opacity: 1; fill: color-mix(in srgb, var(--accent) 55%, transparent); stroke: var(--accent); stroke-width: 1.0; }
/* is-quiz-hit/is-quiz-miss persistent даже над hover (см. selectors выше с !important). */

/* ─── Iter S: timer + two lists + leaderboard popup ─────────────────────── */

.callouts-quiz__timer {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  padding: 4px 10px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.callouts-quiz__timer.is-warning {
  color: var(--bad);
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 12%, var(--bg-base));
  animation: callouts-timer-pulse 1s ease-in-out infinite;
}
@keyframes callouts-timer-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 40%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--bad) 0%,  transparent); }
}

.callouts-quiz__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.callouts-quiz__column {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px;
  background: var(--bg-base);
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  min-height: 100px;
}
.callouts-quiz__column--ok   { border-left-color: var(--improve); }
.callouts-quiz__column--fail { border-left-color: var(--bad); }
.callouts-quiz__column-title {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.callouts-quiz__column-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
  max-height: 240px; overflow-y: auto;
  font-size: 12px; font-family: var(--font-mono);
}
.callouts-quiz__column-item { color: var(--text-secondary); padding: 1px 0; }
.callouts-quiz__column--ok   .callouts-quiz__column-item { color: var(--improve); }
.callouts-quiz__column--fail .callouts-quiz__column-item { color: var(--bad); }

.callouts-quiz__finish-rank {
  font-size: 13px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  padding-top: 4px;
  text-align: center;
}

/* Leaderboard popup — separate modal layer on top of callouts modal. */
.callouts-leaderboard {
  position: fixed; inset: 0; z-index: 1100;
  display: grid; place-items: center;
}
.callouts-leaderboard[hidden] { display: none; }
.callouts-leaderboard__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.callouts-leaderboard__panel {
  position: relative;
  width: min(560px, 92vw);
  max-height: 80vh;
  display: flex; flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.callouts-leaderboard__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.callouts-leaderboard__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.callouts-leaderboard__sub   { font-size: 12px; color: var(--text-muted); padding-top: 2px; }
.callouts-leaderboard__close {
  background: transparent; border: none; color: var(--text-muted);
  padding: 4px; cursor: pointer; border-radius: var(--r-sm);
}
.callouts-leaderboard__close:hover { color: var(--text-primary); background: var(--bg-base); }
.callouts-leaderboard__body { padding: 8px 14px 14px; overflow-y: auto; }
.callouts-leaderboard__empty {
  padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px;
}
.callouts-leaderboard__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.callouts-leaderboard__separator {
  text-align: center; color: var(--text-muted); padding: 4px 0;
  font-family: var(--font-mono);
}
.callouts-leaderboard__row {
  display: grid;
  grid-template-columns: 36px 28px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--bg-base);
}
.callouts-leaderboard__row.is-me {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-base));
  border: 1px solid var(--accent);
}
.callouts-leaderboard__rank {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
}
.callouts-leaderboard__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; background: var(--bg-raised);
}
.callouts-leaderboard__avatar--placeholder {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}
.callouts-leaderboard__name {
  color: var(--text-primary);
  font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.callouts-leaderboard__score {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--improve); font-weight: 600;
}
.callouts-leaderboard__time {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--text-secondary);
}


/* ================================================================
   SEO-пакет (2026-07-15): chrome публичного контент-контура
   (_ContentLayout) + типографика контент-страниц.
   ================================================================ */
.content-page { display: flex; flex-direction: column; min-height: 100vh; }
.content-nav {
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  position: sticky; top: 0; z-index: 50;
}
.content-nav__inner {
  max-width: 1080px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 28px;
}
.content-nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.content-nav__icon { width: 28px; height: 28px; object-fit: contain; }
.content-nav__name { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); }
.content-nav__links { display: flex; gap: 20px; flex: 1; }
.content-nav__links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; }
.content-nav__links a:hover { color: var(--text-primary); }
.content-main { flex: 1; max-width: 1080px; width: 100%; margin: 0 auto; padding: 32px 24px 64px; }
.content-footer { border-top: 1px solid var(--border); background: var(--bg-surface); }
.content-footer__inner {
  max-width: 1080px; margin: 0 auto; padding: 32px 24px;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px;
}
.content-footer__col { display: flex; flex-direction: column; gap: 8px; }
.content-footer__col a { color: var(--text-secondary); text-decoration: none; font-size: 14px; }
.content-footer__col a:hover { color: var(--text-primary); }
.content-footer__col p { color: var(--text-muted); font-size: 13px; margin: 0; }
.content-footer__brand { font-weight: 800; color: var(--text-primary); }
.content-footer__legal {
  max-width: 1080px; margin: 0 auto; padding: 0 24px 24px;
  color: var(--text-muted); font-size: 12px;
}

/* Контент-страницы: типографика */
.content-hero { margin-bottom: 28px; }
.content-hero h1 { font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.02em; margin: 0 0 12px; }
.content-hero__answer { font-size: 16px; line-height: 1.6; color: var(--text-secondary); max-width: 760px; }
.content-section { margin-top: 36px; }
.content-section h2 { font-size: 22px; margin: 0 0 14px; }
.content-updated { margin-top: 28px; color: var(--text-muted); font-size: 13px; }
.content-cta {
  margin-top: 36px; padding: 20px 24px;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--r-md); display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.content-cta__text { flex: 1; min-width: 240px; }
.content-crumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.content-crumbs a { color: var(--text-muted); }
.content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.content-card {
  display: block; padding: 18px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  text-decoration: none; color: var(--text);
}
.content-card:hover { border-color: var(--accent); }
.content-card__title { font-weight: 700; margin-bottom: 6px; color: var(--text-primary); }
.content-card__desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.content-card__meta { margin-top: 10px; font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }
.content-table-wrap { overflow-x: auto; }
.content-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.content-table th, .content-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: right; }
.content-table th:first-child, .content-table td:first-child { text-align: left; }
.content-table th { color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.content-facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.content-fact {
  padding: 10px 14px; background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-md); font-size: 13px;
}
.content-fact strong { display: block; color: var(--text-primary); font-size: 15px; }

@media (max-width: 767px) {
  .content-nav__links { display: none; }
  .content-footer__inner { grid-template-columns: 1fr; }
}

/* Кнопка «Полный гайд» — оранжевый акцент (решение владельца 2026-07-15). */
.plan-item__guide-link {
  margin-top: 6px;
  align-self: flex-start;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.plan-item__guide-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* SEO-пакет: pre-line для протоколов дрилов (инлайновый style запрещён CSP style-src). */
.u-pre-line { white-space: pre-line; }

/* SEO-пакет §6.3: публичные каллауты. 2026-07-15 — интерактив унифицирован с
   authed-модалкой (переиспользуем callouts-modal__* / callouts-quiz__* классы);
   pc-embed снимает модальные внутренние отступы у грида на обычной странице. */
.pc-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.pc-embed { padding: 0; }