@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
  font-family: 'DM Sans', sans-serif;
  color: #e9efe9;
  background: #101713;
  font-synthesis: none;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
header {
  height: 88px;
  border-bottom: 1px solid #2c3830;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
}
.brand {
  color: #d4ed9e;
  text-decoration: none;
  font-size: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand img {
  display: block;
  width: 165px;
  height: auto;
}
.brand span {
  font-size: 10px;
  letter-spacing: 2px;
  color: #94a597;
  margin-left: 15px;
}
main {
  max-width: 1500px;
  padding: 44px 5vw;
  margin: auto;
}
.intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}
h1 {
  font:
    500 clamp(30px, 3vw, 48px) 'Space Grotesk',
    sans-serif;
  letter-spacing: -2px;
  margin: 12px 0;
}
h2 {
  font:
    500 24px 'Space Grotesk',
    sans-serif;
  margin: 6px 0 20px;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  color: #b5cb9e;
  margin: 0;
}
.muted,
small {
  color: #91a195;
  font-size: 13px;
  line-height: 1.6;
}
.tag {
  font-size: 10px;
  letter-spacing: 1px;
  color: #a9b8ab;
  border: 1px solid #354537;
  padding: 8px 10px;
  border-radius: 5px;
}
button {
  font:
    500 12px 'DM Sans',
    sans-serif;
  color: #dfe8df;
  background: #26352b;
  border: 1px solid #415344;
  padding: 11px 16px;
  border-radius: 6px;
  cursor: pointer;
}
button:hover {
  background: #364d3c;
}
button:disabled {
  opacity: 0.4;
  cursor: default;
}
.primary {
  background: #c3e58f;
  color: #172214;
  border-color: #c3e58f;
}
.primary:hover {
  background: #d6f4a8;
}
.devices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.devices > div {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #1b251e;
  padding: 18px;
  border: 1px solid #354336;
  border-radius: 8px;
}
.devices button {
  margin-left: auto;
}
.devices strong {
  font-size: 13px;
}
.devices small {
  display: block;
  font-size: 11px;
}
.dot {
  width: 8px;
  height: 8px;
  background: #68756c;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot.on {
  background: #c3e58f;
  box-shadow: 0 0 12px #c3e58f66;
}
#notice {
  font-size: 12px;
  color: #b1beae;
  min-height: 18px;
  margin: 15px 0 24px;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.metric {
  background: #1b251e;
  border: 1px solid #354336;
  border-radius: 8px;
  padding: 20px 16px;
}
.metric small {
  font-size: 10px;
  letter-spacing: 1px;
  display: block;
}
.metric strong {
  font:
    500 34px 'Space Grotesk',
    sans-serif;
  display: block;
  margin: 8px 0;
}
.metric em {
  font-style: normal;
  font-size: 11px;
  color: #91a195;
}
.metric:first-child {
  border-top: 2px solid #c3e58f;
}
.panel {
  border: 1px solid #354336;
  border-radius: 9px;
  background: #18221b;
  padding: 26px;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}
svg {
  width: 100%;
  display: block;
}
.caption {
  font-size: 10px;
}
.session {
  border-top: 1px solid #354336;
  padding-top: 24px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.session small {
  font-size: 9px;
  letter-spacing: 1px;
  display: block;
}
.session strong {
  display: block;
  margin-top: 7px;
  font:
    500 20px 'Space Grotesk',
    sans-serif;
}
.session .primary {
  margin-left: auto;
}
.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
label {
  display: block;
  font-size: 12px;
  margin-bottom: 15px;
}
label span {
  font-size: 10px;
  color: #91a195;
}
input {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 11px;
  background: #101a14;
  color: #e9efe9;
  border: 1px solid #3b4b3e;
  border-radius: 5px;
  font-size: 15px;
}
form button {
  width: 100%;
  margin: 4px 0 16px;
}
#planPreview {
  font-size: 12px;
  color: #c3e58f;
  border-top: 1px solid #354336;
  padding-top: 16px;
  line-height: 1.7;
}
.history,
details {
  margin-top: 24px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}
th,
td {
  padding: 14px 8px;
  border-bottom: 1px solid #354336;
}
th {
  font-weight: 400;
  color: #91a195;
}
summary {
  cursor: pointer;
  font-size: 13px;
}
pre {
  white-space: pre-wrap;
  max-height: 240px;
  overflow: auto;
  font-size: 11px;
  color: #91a195;
}
footer a {
  color: inherit;
}
footer img {
  width: 100px;
  height: auto;
}
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 30px 0;
  color: #8a9a8b;
  font-size: 10px;
  letter-spacing: 1px;
}
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid #c3e58f;
  outline-offset: 3px;
}
@media (max-width: 1050px) {
  .metrics {
    grid-template-columns: repeat(3, 1fr);
  }
  .session {
    flex-wrap: wrap;
  }
}
@media (max-width: 650px) {
  header {
    padding: 0 20px;
  }
  .brand span,
  header > .tag {
    display: none;
  }
  main {
    padding: 28px 18px;
  }
  .devices {
    grid-template-columns: 1fr;
  }
  .intro {
    align-items: start;
    gap: 15px;
  }
  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .panel {
    padding: 20px;
  }
  .session .primary {
    margin-left: 0;
  }
  footer span {
    max-width: 60%;
    text-align: right;
  }
  .history {
    overflow: auto;
  }
}
dialog {
  width: min(620px, calc(100% - 32px));
  background: #18221b;
  color: #e9efe9;
  border: 1px solid #415344;
  border-radius: 9px;
  padding: 26px;
}
dialog::backdrop {
  background: #0009;
}
#deviceList {
  display: grid;
  gap: 10px;
  margin: 18px 0;
  max-height: 45vh;
  overflow: auto;
}
#deviceList button {
  text-align: left;
  overflow-wrap: anywhere;
}
#resumeTrainer {
  margin: 10px 0;
}
select {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 11px;
  background: #101a14;
  color: #e9efe9;
  border: 1px solid #3b4b3e;
  border-radius: 5px;
  font: inherit;
}
select:focus-visible {
  outline: 2px solid #c3e58f;
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}
.zone-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.zone-row {
  display: grid;
  grid-template-columns: 35px 1fr 1fr;
  gap: 15px;
  align-items: center;
}
.zone-row strong {
  font-size: 13px;
  color: #c3e58f;
}
.zone-columns h3 {
  font-size: 15px;
  font-weight: 500;
}
#zoneSettings,
#workoutResults {
  margin-top: 24px;
}
#planPreview ol {
  padding-left: 20px;
  max-height: 300px;
  overflow: auto;
}
#planPreview li {
  margin-bottom: 8px;
}
#blockResults {
  overflow: auto;
}
#lactateReadings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 20px;
}
#lactateReadings:empty {
  display: none;
}
#targetFeedback {
  color: #c3e58f;
}
#workoutResults svg {
  max-width: 800px;
}
#zoneReadout {
  font-size: 12px;
}
@media (max-width: 650px) {
  .zone-columns,
  #lactateReadings {
    grid-template-columns: 1fr;
  }
  .zone-columns {
    gap: 15px;
  }
}
a {
  color: #c3e58f;
}
.chart-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  border: 0;
  padding: 0;
  margin: 10px 0 15px;
}
.chart-options legend {
  color: #91a195;
  font-size: 11px;
  margin-bottom: 12px;
}
.chart-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 0;
  cursor: pointer;
}
.chart-toggle input {
  width: auto;
  margin: 0;
  accent-color: #c3e58f;
}
.resistance-toggle {
  margin-bottom: 20px;
  color: #eac97e;
}
header nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
header nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-align: center;
  padding: 10px 14px;
  border-radius: 6px;
  text-decoration: none;
  color: #a9b8ab;
  font-size: 13px;
}
header nav a:hover {
  background: #26352b;
}
header nav a[aria-current='page'] {
  color: #d4ed9e;
  background: #26352b;
}
.selected-workout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}
.selected-workout h2 {
  margin: 8px 0;
}
.selected-workout p {
  margin-bottom: 0;
}
.button-link {
  display: inline-block;
  padding: 11px 16px;
  border: 1px solid #415344;
  border-radius: 6px;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}
.workout-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}
.workout-cards button {
  text-align: left;
  padding: 22px;
  background: #1b251e;
}
.workout-cards strong {
  display: block;
  font:
    500 20px 'Space Grotesk',
    sans-serif;
  margin-bottom: 12px;
}
.workout-cards span {
  display: block;
  color: #91a195;
  font-size: 13px;
  line-height: 1.6;
}
.workout-cards [aria-pressed='true'] {
  border-color: #c3e58f;
}
.workout-editor {
  max-width: 900px;
}
.workout-editor form {
  max-width: 650px;
}
.workout-editor #planPreview {
  max-width: 800px;
}
#settingsPage #zoneSettings {
  margin-top: 0;
}
@media (max-width: 750px) {
  .brand span {
    display: none;
  }
  header {
    padding: 0 18px;
    gap: 10px;
  }
  .brand img {
    width: 130px;
  }
  .brand {
    font-size: 19px;
    gap: 6px;
  }
  header nav {
    gap: 0;
  }
  header nav a {
    padding: 9px;
    font-size: 12px;
  }
  .workout-cards {
    grid-template-columns: 1fr;
  }
  .selected-workout {
    align-items: start;
    flex-direction: column;
  }
}

.workout-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
#freeSki[aria-pressed='true'] {
  border-color: #c3e58f;
  color: #c3e58f;
}

.history td button + button {
  margin-left: 8px;
}
#discard,
#confirmDiscard {
  color: #f2a493;
}

.zone-row {
  grid-template-columns: minmax(90px, 1fr) 1fr 1fr;
}
.zone-badge {
  position: relative;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  cursor: help;
}
.zone-tooltip {
  display: none;
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: calc(100% + 8px);
  width: min(290px, 75vw);
  padding: 12px;
  background: #0c130f;
  border: 1px solid #526356;
  border-radius: 6px;
  color: #dfe8df;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: 0 4px 20px #0008;
}
.zone-badge:hover .zone-tooltip,
.zone-badge:focus .zone-tooltip {
  display: block;
}
.zone-badge:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
textarea {
  width: 100%;
  display: block;
  margin-top: 10px;
  padding: 16px;
  border: 1px solid #415344;
  border-radius: 6px;
  background: #101a14;
  color: #e9efe9;
  resize: vertical;
  font:
    13px/1.7 ui-monospace,
    monospace;
}
textarea:focus-visible {
  outline: 2px solid #c3e58f;
  outline-offset: 3px;
}
.builder-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}
.builder-visual {
  min-width: 0;
}
.builder-visual h3 {
  font-size: 15px;
}
#builderError {
  color: #f2a493;
}
#textBuilder .workout-actions button {
  width: auto;
}
#textBuilder .fields {
  margin-top: 18px;
}
.workout-editor {
  max-width: none;
}
.workout-editor form {
  max-width: none;
}
code {
  color: #c3e58f;
}
.builder-layout textarea {
  min-height: 320px;
}
@media (max-width: 850px) {
  .builder-layout {
    grid-template-columns: 1fr;
  }
}

.info-box {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: -8px 0 24px;
  padding: 16px 18px;
  border: 1px solid #3c5665;
  border-radius: 7px;
  background: #182830;
  color: #b8d5e5;
  font-size: 13px;
}
.info-box > span {
  font-size: 20px;
  line-height: 1.2;
}
.info-box strong {
  font-weight: 600;
}
.info-box p {
  margin: 5px 0 0;
  line-height: 1.6;
  color: #a9c2ce;
}
#notice:empty {
  display: none;
}

.test-history-panel {
  margin-top: 24px;
}
.test-history-panel #testHistory {
  overflow: auto;
  margin-top: 18px;
}

.profile-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.profile-summary {
  margin-top: 24px;
}
.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.profile-stats strong {
  display: block;
  margin-top: 8px;
  font-size: 26px;
}
.profile-references div {
  padding: 12px 0;
  border-bottom: 1px solid #354537;
}
.profile-references dt {
  color: #91a195;
  font-size: 13px;
}
.profile-references dd {
  margin: 6px 0 0;
}
@media (max-width: 750px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }
  .profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

header nav .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}
header nav .nav-icon:focus-visible {
  outline: 2px solid #d4ed9e;
  outline-offset: 2px;
}

.account-panel {
  margin-bottom: 24px;
}
#googleSignIn {
  margin-top: 16px;
}

.nav-icon svg {
  transition: transform 0.3s ease;
}

.nav-icon[data-nav='settings']:hover svg {
  transform: rotate(90deg);
}

.nav-icon[data-nav='profile']:hover svg {
  transform: scale(1.3);
}

#accountDialog {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 28px;
}
#accountDialog::backdrop {
  background: #0009;
}
.account-mode {
  display: flex;
  gap: 8px;
  margin: 8px 0 24px;
}
.account-mode button {
  flex: 1;
}
.account-mode [aria-pressed='true'] {
  border-color: #b5cb9e;
  color: #d4ed9e;
  background: #30412e;
}
.password-control {
  display: flex;
  gap: 8px;
  margin: 8px 0 20px;
}
.password-control input {
  margin: 0;
  min-width: 0;
  flex: 1;
}
#accountSubmit,
.google-sign-in {
  width: 100%;
}
.google-sign-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.auth-error {
  padding: 14px 16px;
  border: 1px solid #e27777;
  border-radius: 6px;
  color: #ffb4b4;
  background: #421e23;
  font-size: 13px;
  line-height: 1.5;
}
.account-divider {
  text-align: center;
  color: #91a195;
  margin: 20px 0 0;
}
.profile-history {
  overflow-x: auto;
  margin: 20px 0;
}

.password-control button {
  flex: 0 0 auto;
  width: auto;
}
.google-sign-in {
  white-space: nowrap;
}
.google-sign-in svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.focus-plan {
  display: none;
}
.session-focus {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: #101713;
  box-sizing: border-box;
  overflow: hidden;
}
.session-focus[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}
.focus-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.focus-heading h2 {
  margin: 0;
  font-size: 20px;
}
#focusWorkspace,
#focusWorkspace #sessionWorkspace {
  min-height: 0;
  height: 100%;
}
#focusWorkspace #sessionWorkspace {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
}
#focusWorkspace .metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
#focusWorkspace .metric,
#focusWorkspace .panel {
  padding: 10px 14px;
}
#focusWorkspace .metric strong {
  font-size: clamp(22px, 3vw, 34px);
  margin: 3px 0;
}
#focusWorkspace .selected-workout {
  margin: 0;
  display: block;
}
#focusWorkspace .selected-workout > div:first-child {
  width: 100%;
}
#focusWorkspace .selected-workout h2 {
  font-size: 18px;
  margin: 0;
}
#focusWorkspace #selectedWorkoutDetails {
  margin: 3px 0;
}
#focusWorkspace .focus-plan {
  display: block;
}
#focusWorkspace #focusPlan {
  height: clamp(50px, 11vh, 90px);
  width: 100%;
}
#focusWorkspace #focusNext {
  margin: 2px 0 0;
}
#focusWorkspace .selected-workout .workout-actions,
#focusWorkspace .selected-workout .eyebrow,
#focusWorkspace .chart-panel .panel-head,
#focusWorkspace #chartOptions,
#focusWorkspace .resistance-toggle,
#focusWorkspace #summary,
#focusWorkspace #zoneReadout {
  display: none;
}
#focusWorkspace .chart-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
}
#focusWorkspace #chart {
  min-height: 0;
  height: 100%;
}
#focusWorkspace .session {
  min-width: 0;
  padding-top: 8px;
  margin-top: 4px;
  gap: 12px;
}
#focusWorkspace .session > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
#focusWorkspace .session strong {
  font-size: 18px;
}
#focusWorkspace #phase {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#focusWorkspace #targetFeedback {
  margin: 6px 0 0;
}
@media (max-width: 650px) {
  #focusWorkspace .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #focusWorkspace .metric {
    padding: 6px 8px;
  }
  #focusWorkspace .metric em {
    display: none;
  }
  #focusWorkspace .session {
    gap: 6px;
  }
  #focusWorkspace .session button {
    padding: 8px;
  }
}

#focusWorkspace #chartCaption {
  margin: 0;
  font-size: 10px;
  line-height: 1.3;
}