:root {
  --ehrv-bg: #eef3f7;
  --ehrv-surface: #ffffff;
  --ehrv-surface-alt: #f7fafc;
  --ehrv-text: #16324f;
  --ehrv-muted: #607286;
  --ehrv-border: rgba(18, 42, 67, 0.12);
  --ehrv-shadow: 0 16px 36px rgba(19, 39, 63, 0.08);
  --ehrv-accent: #2a6fe1;
  --ehrv-low: #dc4c4c;
  --ehrv-medium: #2f7ae5;
  --ehrv-high: #26b670;
}

body {
  background:
    radial-gradient(circle at top left, rgba(42, 111, 225, 0.08), transparent 32%),
    radial-gradient(circle at top right, rgba(38, 182, 112, 0.08), transparent 26%),
    var(--ehrv-bg);
  color: var(--ehrv-text);
}

.enhancedTrainingPage {
  display: grid;
  gap: 16px;
}

.trainingDashboard {
  display: grid;
  gap: 16px;
}

.panel {
  background: var(--ehrv-surface);
  border: 1px solid var(--ehrv-border);
  border-radius: 8px;
  box-shadow: var(--ehrv-shadow);
  padding: 16px;
}

.panelHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panelTitle,
.heroTitle {
  margin: 0;
  color: var(--ehrv-text);
}

.heroTitle {
  font-size: 28px;
  line-height: 1.1;
}

.eyebrow {
  color: var(--ehrv-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.heroPanel {
  overflow: hidden;
}

.heroCanvasWrap {
  position: relative;
  min-height: 560px;
  border-radius: 8px;
  border: 1px solid var(--ehrv-border);
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 16%, rgba(255,255,255,0.72), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,246,251,0.94));
}

.heroAura {
  position: absolute;
  inset: -12% -5% auto auto;
  width: 42%;
  height: 78%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,0.7), rgba(255,255,255,0));
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms ease;
}

.heroCanvas {
  width: 100%;
  height: 560px;
  display: block;
}

.heroOverlay {
  position: absolute;
  inset: 24px 24px 194px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.heroCenterStack {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
}

.heroScore {
  display: grid;
  gap: 4px;
  justify-items: center;
}

.heroScoreLabel {
  color: var(--ehrv-muted);
  font-size: 12px;
  font-weight: 700;
}

.heroScoreValue {
  color: var(--ehrv-text);
  font-size: 52px;
  line-height: 1;
  font-weight: 800;
}

.heroZoneBadge {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.heroMiniMetric {
  color: var(--ehrv-text);
  font-size: 16px;
  font-weight: 700;
}

.heroPacerPhase {
  color: var(--ehrv-muted);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.heroCoachMini {
  color: var(--ehrv-text);
  font-size: 18px;
  font-weight: 700;
}

.heroCoachHintMini {
  max-width: 420px;
  color: var(--ehrv-muted);
  font-size: 14px;
  line-height: 1.5;
}

.heroCornerStats {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  gap: 10px;
}

.cornerStat {
  min-width: 108px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(22,50,79,0.08);
  box-shadow: 0 12px 24px rgba(19,39,63,0.06);
}

.cornerStatLabel {
  display: block;
  color: var(--ehrv-muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

.cornerStatValue {
  display: block;
  color: var(--ehrv-text);
  font-size: 24px;
  line-height: 1;
}

.zone-low .heroZoneBadge { background: var(--ehrv-low); }
.zone-medium .heroZoneBadge { background: var(--ehrv-medium); }
.zone-high .heroZoneBadge { background: var(--ehrv-high); }

.heroWaiting {
  position: absolute;
  inset: 18px auto auto 18px;
  display: none;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(22, 50, 79, 0.76);
  color: #fff;
  max-width: max-content;
}

.heroWaiting.visible {
  display: block;
}

.trainingDashboard.has-signal .heroWaiting {
  background: rgba(22, 50, 79, 0.6);
}

.trainingDashboard.zone-high .heroAura {
  opacity: 0.86;
  transform: scale(1.03);
}

.trainingDashboard.zone-medium .heroAura {
  opacity: 0.72;
}

.rawPulseStrip {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  height: 196px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(22,50,79,0.08);
  background: rgba(255,255,255,0.92);
}

.rawPulseCanvas {
  width: 100%;
  height: 196px;
  display: block;
}

.challengeControl,
.trainingActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.trainingActions .btn[disabled] {
  opacity: 0.52;
  cursor: not-allowed;
}

.pacerPanel {
  margin-bottom: 14px;
  border-radius: 8px;
  border: 1px solid rgba(18, 42, 67, 0.08);
  background: rgba(247, 250, 253, 0.95);
}

.pacerPanel summary {
  cursor: pointer;
  padding: 12px 14px;
  color: var(--ehrv-text);
  font-size: 13px;
  font-weight: 700;
}

.pacerControls {
  display: grid;
  grid-template-columns: repeat(4, minmax(86px, 98px));
  justify-content: center;
  column-gap: 12px;
  row-gap: 8px;
  padding: 0 14px 14px;
}

.pacerField {
  display: grid;
  gap: 4px;
  width: 100%;
  justify-items: center;
  padding: 0 2px;
}

.pacerFieldLabel {
  color: var(--ehrv-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  width: 100%;
}

.pacerInput {
  width: 100%;
  min-height: 38px;
  padding: 8px 8px;
  border-radius: 8px;
  border: 1px solid var(--ehrv-border);
  background: #fff;
  color: var(--ehrv-text);
  font: inherit;
  text-align: center;
}

.pacerInput::-webkit-outer-spin-button,
.pacerInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pacerInput[type="number"] {
  -moz-appearance: textfield;
}

.challengeLabel {
  color: var(--ehrv-muted);
  font-size: 13px;
  font-weight: 700;
}

.challengeBtn {
  min-width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--ehrv-border);
  background: #fff;
  color: var(--ehrv-text);
  font-weight: 700;
  cursor: pointer;
}

.challengeBtn.active {
  background: var(--ehrv-accent);
  border-color: var(--ehrv-accent);
  color: #fff;
  box-shadow: 0 10px 20px rgba(42, 111, 225, 0.22);
}

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

.metricTile {
  min-height: 92px;
  padding: 14px;
  border-radius: 8px;
  background: var(--ehrv-surface-alt);
  border: 1px solid rgba(18, 42, 67, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.trainingDashboard.zone-high .metricTile {
  border-color: rgba(38, 182, 112, 0.18);
  box-shadow: inset 0 0 0 1px rgba(38, 182, 112, 0.06);
}

.metricLabel {
  color: var(--ehrv-muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.metricValue {
  color: var(--ehrv-text);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
}

.analyticsGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
  gap: 16px;
}

.analyticsGrid > .panel:nth-child(3),
.analyticsGrid > .panel:nth-child(4) {
  grid-column: 2;
}

.timelineCanvas {
  width: 100%;
  height: 260px;
  display: block;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(251,253,255,1), rgba(246,250,253,1));
  border: 1px solid rgba(18, 42, 67, 0.08);
}

.timelineStack {
  display: grid;
  gap: 14px;
}

.timelineSubhead {
  margin-bottom: 10px;
}

.timelineSubTitle {
  margin: 0;
  color: var(--ehrv-text);
  font-size: 16px;
  line-height: 1.2;
}

.hrTimelineCanvas {
  height: 180px;
}

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

.distributionList {
  display: grid;
  gap: 14px;
}

.distributionRow {
  display: grid;
  grid-template-columns: 84px 1fr 52px;
  align-items: center;
  gap: 10px;
}

.distributionLabel,
.distributionValue {
  font-weight: 700;
  color: var(--ehrv-text);
}

.distributionBarTrack {
  width: 100%;
  height: 16px;
  border-radius: 999px;
  background: #e7edf4;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(18, 42, 67, 0.08);
}

.distributionBarFill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width 220ms ease, filter 220ms ease;
}

[data-zone="low"] .distributionBarFill { background: linear-gradient(90deg, #e46a6a, var(--ehrv-low)); }
[data-zone="medium"] .distributionBarFill { background: linear-gradient(90deg, #5a91ec, var(--ehrv-medium)); }
[data-zone="high"] .distributionBarFill { background: linear-gradient(90deg, #5fd39a, var(--ehrv-high)); }

.trainingDashboard.zone-high [data-zone="high"] .distributionBarFill {
  filter: drop-shadow(0 0 8px rgba(38, 182, 112, 0.35));
}

.achievementScore {
  font-size: 64px;
  line-height: 1;
  font-weight: 800;
  color: var(--ehrv-text);
}

.achievementMeta,
.coachHint {
  color: var(--ehrv-muted);
  line-height: 1.5;
}

.coachMessage {
  font-size: 32px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--ehrv-text);
  margin-bottom: 12px;
}

.trainingDashboard.zone-high .coachMessage {
  color: #12724b;
}

.expertPanel summary,
.advancedRawSection summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ehrv-text);
}

.expertGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.expertMetric {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--ehrv-surface-alt);
  border: 1px solid rgba(18, 42, 67, 0.08);
  align-items: baseline;
}

.expertLabel {
  color: var(--ehrv-muted);
  font-size: 12px;
  font-weight: 700;
}

.expertValue {
  color: var(--ehrv-text);
  font-weight: 800;
}

.advancedRawSection {
  overflow: hidden;
}

.advancedRawSection #paramList {
  margin-top: 16px;
}

.debugPanel[hidden] {
  display: none;
}

.debugContent {
  margin: 14px 0 0;
  padding: 12px;
  border-radius: 8px;
  background: #f5f8fb;
  border: 1px solid rgba(18, 42, 67, 0.08);
  color: var(--ehrv-text);
  font-size: 12px;
  line-height: 1.45;
  overflow: auto;
}

.trainingSessionsModal[hidden] {
  display: none;
}

.trainingSessionsModal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.trainingSessionsBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 37, 0.48);
}

.trainingSessionsCard {
  position: relative;
  width: min(1180px, 100%);
  max-height: 88vh;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(18, 42, 67, 0.12);
  box-shadow: 0 28px 56px rgba(10, 22, 37, 0.24);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.trainingSessionsHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(18, 42, 67, 0.08);
}

.trainingSessionsTopActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.trainingSessionsTitle {
  margin: 0 0 6px;
  color: var(--ehrv-text);
  font-size: 22px;
  font-weight: 800;
}

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

.trainingSessionsBody {
  min-height: 0;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
}

.trainingSessionsListWrap,
.trainingSessionsDetail {
  min-height: 0;
  overflow: auto;
}

.trainingSessionsListWrap {
  border-right: 1px solid rgba(18, 42, 67, 0.08);
  background: #fbfcfe;
}

.trainingSessionsList {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.trainingSessionItem {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(18, 42, 67, 0.08);
  background: #fff;
}

.trainingSessionItem.active {
  border-color: rgba(42, 111, 225, 0.34);
  box-shadow: 0 10px 24px rgba(42, 111, 225, 0.1);
}

.trainingSessionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.trainingSessionStamp,
.trainingSessionMeta,
.trainingSessionsEmpty,
.sessionDetailAnalysis,
.sessionDetailSub {
  color: var(--ehrv-muted);
}

.trainingSessionStamp {
  font-size: 12px;
  font-weight: 700;
}

.trainingSessionLevel {
  font-size: 12px;
  font-weight: 800;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(42, 111, 225, 0.12);
  color: var(--ehrv-accent);
}

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

.trainingSessionMetric {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ehrv-surface-alt);
}

.trainingSessionMetricLabel {
  display: block;
  color: var(--ehrv-muted);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
}

.trainingSessionMetricValue {
  display: block;
  color: var(--ehrv-text);
  font-size: 16px;
  font-weight: 800;
}

.trainingSessionActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.trainingSessionsEmpty {
  padding: 16px;
  font-size: 14px;
}

.trainingSessionsDetail {
  padding: 18px;
  display: grid;
  gap: 16px;
  align-content: start;
}

.sessionDetailTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.sessionDetailTitle {
  margin: 0 0 6px;
  color: var(--ehrv-text);
  font-size: 24px;
  font-weight: 800;
}

.sessionDetailSuccess {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(38, 182, 112, 0.12);
  color: #147a4f;
  font-size: 14px;
  font-weight: 800;
}

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

.sessionDetailCard {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(18, 42, 67, 0.08);
  background: #fff;
}

.sessionDetailCardLabel {
  color: var(--ehrv-muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

.sessionDetailCardValue {
  color: var(--ehrv-text);
  font-size: 20px;
  font-weight: 800;
}

.sessionDetailAnalysis {
  font-size: 14px;
  line-height: 1.5;
}

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

.sessionChartCard {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(18, 42, 67, 0.08);
  background: #fff;
}

.sessionChartTitle {
  color: var(--ehrv-text);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

.sessionChartCanvas {
  width: 100%;
  height: 220px;
  display: block;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(251,253,255,1), rgba(246,250,253,1));
  border: 1px solid rgba(18, 42, 67, 0.08);
}

.zone-low .heroCanvasWrap { box-shadow: inset 0 0 0 1px rgba(220, 76, 76, 0.08); }
.zone-medium .heroCanvasWrap { box-shadow: inset 0 0 0 1px rgba(47, 122, 229, 0.08); }
.zone-high .heroCanvasWrap { box-shadow: inset 0 0 0 1px rgba(38, 182, 112, 0.08), 0 18px 42px rgba(38, 182, 112, 0.12); }

html[dir="rtl"] .distributionRow {
  grid-template-columns: 52px 1fr 84px;
}

html[dir="rtl"] .panelHead,
html[dir="rtl"] .heroOverlay {
  direction: rtl;
}

html[dir="rtl"] .heroCornerStats {
  right: auto;
  left: 0;
}

@media (max-width: 1180px) {
  .statusGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .trainingSessionsBody,
  .sessionChartsGrid,
  .sessionDetailSummaryGrid {
    grid-template-columns: 1fr;
  }

  .trainingSessionsListWrap {
    border-right: 0;
    border-bottom: 1px solid rgba(18, 42, 67, 0.08);
  }

  .analyticsGrid {
    grid-template-columns: 1fr;
  }

  .analyticsGrid > .panel:nth-child(3),
  .analyticsGrid > .panel:nth-child(4) {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .heroTitle {
    font-size: 22px;
  }

  .heroCanvasWrap,
  .heroCanvas {
    min-height: 460px;
    height: 460px;
  }

  .heroScoreValue {
    font-size: 40px;
  }

  .heroOverlay {
    inset: 20px 20px 194px 20px;
  }

  .heroCoachHintMini {
    max-width: 280px;
  }

  .heroCornerStats {
    gap: 8px;
  }

  .trainingSessionsHead,
  .sessionDetailTop {
    flex-direction: column;
  }

  .statusGrid,
  .expertGrid {
    grid-template-columns: 1fr;
  }

  .pacerControls {
    grid-template-columns: 1fr;
  }

  .distributionRow {
    grid-template-columns: 1fr;
  }

  .achievementScore,
  .coachMessage {
    font-size: 40px;
  }
}