:root {
  --ui-ink: #102338;
  --ui-muted: #637489;
  --ui-line: #d6e1e8;
  --ui-canvas: #f5f8fa;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f0f6f8;
  --ui-blue: #006b9b;
  --ui-blue-dark: #004c73;
  --ui-teal: #087d73;
  --ui-saffron: #d87917;
}

body,
body.clean-vision,
body.essential-workspace {
  background: var(--ui-canvas) !important;
  color: var(--ui-ink) !important;
}

:is(.home-shell, .studio-shell, .app-shell) {
  max-width: 1280px !important;
}

.studio-header,
.app-header,
.home-hero {
  position: relative;
  padding-bottom: 22px !important;
}

.studio-header::after,
.app-header::after,
.home-hero::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--ui-teal);
  content: "";
}

.studio-header h1,
.app-header h1,
.home-hero h1 {
  color: var(--ui-ink) !important;
  font-weight: 820 !important;
}

.studio-header p,
.app-header p,
.home-hero p {
  max-width: 620px;
}

button.primary,
.button-link.primary,
.button-like.primary,
#runEliteScan,
#saveAssessmentProfile,
#scoreHealth,
#scoreMental,
#importPoseAssessment,
#saveAssessment,
#generateNutritionPlan {
  border-color: var(--ui-blue) !important;
  background: var(--ui-blue) !important;
}

button.primary:hover,
.button-link.primary:hover,
.button-like.primary:hover,
#runEliteScan:hover,
#generateNutritionPlan:hover {
  border-color: var(--ui-blue-dark) !important;
  background: var(--ui-blue-dark) !important;
}

.app-install-button {
  border-color: #9ac5d6 !important;
  background: #e8f6fa !important;
  color: var(--ui-blue-dark) !important;
}

.athlete-context {
  border-color: var(--ui-line) !important;
  border-left: 3px solid var(--ui-teal) !important;
  background: var(--ui-surface) !important;
}

.athlete-context-action {
  border-color: #9dc7d5 !important;
  background: #eff9fb !important;
  color: var(--ui-blue-dark) !important;
}

.first-use-guide {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(230px, 0.8fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid #a9cfdc;
  border-left: 4px solid var(--ui-saffron);
  border-radius: 8px;
  background: #fff;
}

.first-use-guide > div {
  display: grid;
  gap: 4px;
}

.first-use-guide > div > span {
  color: var(--ui-saffron);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.first-use-guide strong {
  color: var(--ui-ink);
  font-size: 17px;
}

.first-use-guide small {
  color: var(--ui-muted);
  font-size: 13px;
}

.first-use-guide ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.first-use-guide li {
  display: grid;
  justify-items: start;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: var(--ui-surface-soft);
}

.first-use-guide li b {
  color: var(--ui-teal);
  font-size: 11px;
}

.first-use-guide li span {
  color: var(--ui-ink);
  font-size: 12px;
  font-weight: 700;
}

.pro-section-tabs {
  border-color: var(--ui-line) !important;
  background: #eaf0f3 !important;
}

.pro-section-tabs button.is-active,
.pro-section-tabs button[aria-selected="true"] {
  color: var(--ui-blue-dark) !important;
}

.home-focus,
.decision-card,
.home-coach-assist,
.race-ready-card,
.home-report,
.panel,
.player-panel,
#comparison,
#reportNotes,
.card,
.health-summary article,
.nutrition-meal,
.recovery-list > div {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
}

.decision-card {
  border-left-color: var(--ui-teal) !important;
  box-shadow: 0 12px 28px rgba(16, 35, 56, 0.06) !important;
}

.decision-grid > div,
.race-ready-grid > div,
.coach-assist-grid > div,
.coach-assist-main > div,
:is(.coach-answer-grid, .pose-trust-grid, .assessment-grid, .clean-report-grid, .accuracy-grid, .report-summary-grid, .compare-metrics, .retest-score-grid, .proof-score-grid, .ai-brain-grid, .swimmer-memory-grid) > div,
.actual-evidence-card,
.health-summary article,
.nutrition-meal,
.recovery-list > div {
  background: var(--ui-surface-soft) !important;
}

.home-path a {
  position: relative;
  overflow: hidden;
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
}

.home-path a::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: transparent;
  content: "";
}

.home-path a:hover::after {
  background: var(--ui-teal);
}

.video-stage,
.compare-stage {
  border-color: #17384a !important;
  border-radius: 10px !important;
}

.actual-evidence-card {
  border-radius: 8px !important;
}

.actual-evidence-card img {
  filter: saturate(1.03) contrast(1.02);
}

.actual-evidence-card strong {
  min-height: 32px;
}

.nutrition-result {
  border-top: 3px solid var(--ui-teal) !important;
}

.health-summary article:first-child {
  border-top: 3px solid var(--ui-blue) !important;
}

.health-summary article:nth-child(2) {
  border-top: 3px solid var(--ui-teal) !important;
}

.health-summary article:nth-child(3) {
  border-top: 3px solid var(--ui-saffron) !important;
}

@media (min-width: 960px) {
  :is(.studio-tabs, .assessment-nav, .app-main-nav) {
    width: 224px !important;
    padding: 24px 16px !important;
  }

  body {
    padding-left: 224px !important;
  }
}

@media (max-width: 760px) {
  :is(.home-shell, .studio-shell, .app-shell) {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  :is(.studio-tabs, .assessment-nav, .app-main-nav) > a:not(.nav-brand) {
    min-height: 60px;
    padding: 10px 2px !important;
    font-size: 11px !important;
  }

  .studio-header,
  .app-header,
  .home-hero {
    padding-bottom: 18px !important;
  }

  .home-focus,
  .decision-card,
  .health-summary,
  .health-grid {
    gap: 10px !important;
  }

  .home-focus article {
    min-height: 96px;
    padding: 14px !important;
  }

  .app-install-button {
    width: 100%;
  }

  .first-use-guide {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }

  .first-use-guide .button-link {
    width: 100%;
  }
}

/* Performance colour system: each colour carries a distinct training meaning. */
.home-focus article:first-child {
  border-top: 4px solid var(--ui-blue) !important;
  background: #f3f9fc !important;
}

.home-focus article:nth-child(2) {
  border-top: 4px solid var(--ui-teal) !important;
  background: #f1faf8 !important;
}

.home-focus article:nth-child(3) {
  border-top: 4px solid var(--ui-saffron) !important;
  background: #fff8ed !important;
}

.home-focus article:first-child > span,
.home-focus article:first-child strong {
  color: var(--ui-blue-dark) !important;
}

.home-focus article:nth-child(2) > span,
.home-focus article:nth-child(2) strong {
  color: #066b63 !important;
}

.home-focus article:nth-child(3) > span,
.home-focus article:nth-child(3) strong {
  color: #9f5304 !important;
}

.home-path a:nth-child(4n + 1) > span,
.home-path a:nth-child(4n + 1):hover::after {
  color: var(--ui-blue) !important;
  background: var(--ui-blue) !important;
}

.home-path a:nth-child(4n + 2) > span,
.home-path a:nth-child(4n + 2):hover::after {
  color: var(--ui-teal) !important;
  background: var(--ui-teal) !important;
}

.home-path a:nth-child(4n + 3) > span,
.home-path a:nth-child(4n + 3):hover::after {
  color: var(--ui-saffron) !important;
  background: var(--ui-saffron) !important;
}

.home-path a:nth-child(4n) > span,
.home-path a:nth-child(4n):hover::after {
  color: #23824a !important;
  background: #23824a !important;
}

.section-title > span,
.assessment-section-head > div > span {
  background: #e5f3fa !important;
  color: var(--ui-blue-dark) !important;
}

.health-shell .assessment-section-head > div > span {
  background: #e6f7f3 !important;
  color: #066b63 !important;
}

.passport-shell .assessment-workspace > .card:nth-of-type(3) .assessment-section-head > div > span,
.passport-shell .assessment-workspace > .card:nth-of-type(4) .assessment-section-head > div > span {
  background: #fff1dc !important;
  color: #a45706 !important;
}

.pro-section-tabs button.is-active,
.pro-section-tabs button[aria-selected="true"] {
  border: 1px solid #a7d2e2 !important;
  background: #f7fcfe !important;
  color: var(--ui-blue-dark) !important;
}

:is(.studio-tabs, .assessment-nav, .app-main-nav) > a.is-active:not(.nav-brand) {
  background: #edf8fb !important;
  color: var(--ui-blue-dark) !important;
}

:is(.studio-tabs, .assessment-nav, .app-main-nav) > a.is-active:not(.nav-brand)::before {
  background: var(--ui-teal) !important;
}

.actual-evidence-card:nth-child(4n + 1) {
  border-top: 3px solid var(--ui-blue) !important;
}

.actual-evidence-card:nth-child(4n + 2) {
  border-top: 3px solid var(--ui-teal) !important;
}

.actual-evidence-card:nth-child(4n + 3) {
  border-top: 3px solid var(--ui-saffron) !important;
}

.actual-evidence-card:nth-child(4n) {
  border-top: 3px solid #23824a !important;
}

.nutrition-meal:nth-child(5n + 1) {
  border-top: 3px solid var(--ui-saffron) !important;
}

.nutrition-meal:nth-child(5n + 2) {
  border-top: 3px solid var(--ui-blue) !important;
}

.nutrition-meal:nth-child(5n + 3) {
  border-top: 3px solid var(--ui-teal) !important;
}

.nutrition-meal:nth-child(5n + 4) {
  border-top: 3px solid #23824a !important;
}

.nutrition-meal:nth-child(5n) {
  border-top: 3px solid #a4579c !important;
}

.readiness-bar.is-ready i {
  background: #23824a !important;
}

.readiness-bar.is-caution i {
  background: var(--ui-saffron) !important;
}

.capture-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.capture-actions button {
  min-width: 116px;
}

.capture-actions strong {
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.35;
  text-align: right;
}

.capture-actions strong.is-ready {
  color: #187445;
}

.capture-actions strong.is-retest {
  color: #b45309;
}

.correction-loop {
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pro-line);
}

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

.correction-loop-grid > div {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--pro-line);
  border-radius: 6px;
  background: var(--pro-surface-soft);
}

.correction-loop-grid span {
  color: var(--pro-muted);
  font-size: 11px;
  font-weight: 780;
  text-transform: uppercase;
}

.correction-loop-grid strong {
  font-size: 13px;
  line-height: 1.35;
}

.correction-loop button {
  justify-self: start;
}

.cloud-video-lab {
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pro-line);
}

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

.cloud-video-grid > div {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--pro-line);
  border-radius: 6px;
  background: var(--pro-surface-soft);
}

.cloud-video-grid span {
  color: var(--pro-muted);
  font-size: 11px;
  font-weight: 780;
  text-transform: uppercase;
}

.cloud-video-grid strong {
  font-size: 13px;
  line-height: 1.35;
}

@media (max-width: 620px) {
  .capture-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .capture-actions strong {
    text-align: left;
  }

  .correction-loop-grid {
    grid-template-columns: 1fr;
  }

  .cloud-video-grid {
    grid-template-columns: 1fr;
  }
}