:root {
  --bg: #050706;
  --surface: #0b1110;
  --surface-2: #111917;
  --line: #20302b;
  --text: #f5fff9;
  --muted: #8fa39a;
  --green: #20d861;
  --green-dark: #12aa49;
  --green-soft: rgba(32, 216, 97, 0.14);
  --danger: #ff5a5a;
}

/* Coach WOD studio — visual builder */
.builder-active #publishWod {
  display: none;
}

.builder-layout {
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
}

.wod-studio {
  position: relative;
  overflow: hidden;
  border-color: rgba(32, 216, 97, 0.28);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% -8%, rgba(32, 216, 97, 0.12), transparent 32%),
    linear-gradient(145deg, rgba(8, 14, 12, 0.98), rgba(3, 7, 5, 0.98));
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: clamp(20px, 3vw, 34px);
}

.builder-panel-header {
  margin-bottom: 20px;
}

.wod-title-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: end;
  gap: 12px;
  margin-bottom: 20px;
}

.wod-title-editor label {
  gap: 4px;
}

.wod-title-editor label > span {
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wod-title-editor input {
  min-width: 0;
  border: 0;
  border-bottom: 1px solid rgba(245, 255, 249, 0.11);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: clamp(2.25rem, 5vw, 4.8rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.045em;
  padding: 8px 0 14px;
  text-transform: uppercase;
}

.wod-title-editor input:focus {
  border-bottom-color: var(--green);
  outline: 0;
  box-shadow: none;
}

.title-edit-button {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(245, 255, 249, 0.14);
  border-radius: 18px;
  background: rgba(10, 18, 15, 0.92);
  color: #fff;
  font-size: 1.45rem;
}

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

.builder-control-tile {
  position: relative;
  min-height: 106px;
  justify-content: center;
  border: 1px solid rgba(245, 255, 249, 0.13);
  border-radius: 20px;
  background: rgba(8, 14, 12, 0.78);
  padding: 16px 18px;
}

.builder-control-tile > span {
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.builder-control-tile select {
  min-height: 44px;
  border: 0;
  background-color: transparent;
  color: #fff;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 850;
  padding: 0;
}

.builder-control-tile small {
  color: rgba(245, 255, 249, 0.5);
  font-size: 0.72rem;
  line-height: 1.35;
}

.builder-secondary-controls {
  margin-top: 12px;
}

.builder-detail-field {
  border: 1px solid rgba(245, 255, 249, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  padding: 13px 15px;
}

.builder-detail-field input,
.builder-detail-field select {
  min-height: 42px;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 0;
}

.builder-description {
  margin-top: 16px;
}

.builder-description textarea {
  min-height: 92px;
  border-radius: 16px;
  background: rgba(4, 9, 7, 0.72);
}

.builder-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
}

.builder-section-heading h3 {
  margin-top: 3px;
  font-size: 1.65rem;
}

.builder-section-heading > span {
  border: 1px solid rgba(32, 216, 97, 0.24);
  border-radius: 999px;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 850;
  padding: 7px 10px;
}

.wod-studio .exercise-stack {
  gap: 10px;
  margin-top: 14px;
}

.wod-studio .exercise-row {
  grid-template-columns: 158px minmax(0, 1fr) auto;
  min-height: 122px;
  gap: 0;
  overflow: hidden;
  border-color: rgba(245, 255, 249, 0.1);
  border-radius: 20px;
  background: rgba(7, 13, 11, 0.92);
  padding: 0;
}

.wod-studio .exercise-row:hover {
  border-color: rgba(32, 216, 97, 0.48);
  background: rgba(10, 19, 15, 0.96);
}

.wod-studio .exercise-art {
  width: 158px;
  height: 100%;
  min-height: 122px;
  border-radius: 0;
  object-fit: cover;
}

.exercise-row-content {
  min-width: 0;
  padding: 18px 20px;
}

.exercise-row-content > strong {
  display: block;
  color: #fff;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.05;
}

.exercise-row-content > p {
  overflow: hidden;
  margin-top: 8px;
  color: rgba(245, 255, 249, 0.5);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exercise-visual-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.exercise-visual-values span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  border: 1px solid rgba(245, 255, 249, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  color: #fff;
  font-size: 0.94rem;
  font-weight: 750;
  padding: 7px 11px;
}

.exercise-visual-values b {
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  border-radius: 8px;
  color: var(--green);
  font-size: 0.7rem;
  letter-spacing: -0.02em;
}

.exercise-visual-values .empty-value {
  border-style: dashed;
  color: var(--green);
}

.wod-studio .exercise-actions {
  display: grid;
  grid-template-columns: repeat(2, 38px);
  align-content: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 14px 12px 4px;
}

.wod-studio .exercise-actions button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(245, 255, 249, 0.1);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 1.05rem;
}

.wod-studio .exercise-actions .move-exercise {
  grid-column: 1 / -1;
  width: 100%;
  color: rgba(245, 255, 249, 0.5);
  letter-spacing: -0.28em;
}

.wod-studio .exercise-actions .delete-exercise {
  color: #ff7272;
}

.add-exercise-button {
  min-height: 56px;
  margin-top: 12px;
  border-radius: 16px;
  border-style: dashed;
}

.wod-studio .volume-summary {
  border-radius: 16px;
  margin-top: 12px;
}

.wod-studio .rm-block {
  margin-top: 26px;
  border: 1px solid rgba(245, 255, 249, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.018);
  padding: 18px;
}

.builder-publish-bar {
  position: sticky;
  z-index: 8;
  bottom: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.55fr);
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  border: 1px solid rgba(32, 216, 97, 0.3);
  border-radius: 20px;
  background: rgba(4, 10, 7, 0.9);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
  padding: 12px;
}

.builder-publish-bar > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-left: 8px;
}

.builder-publish-bar > div span {
  color: var(--green);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.builder-publish-bar > div strong {
  overflow: hidden;
  color: #fff;
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-publish-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  border-radius: 15px;
  font-size: 1rem;
  padding-inline: 20px;
}

.wod-publish-schedule {
  margin-top: 22px;
  border: 1px solid rgba(32, 216, 97, 0.22);
  border-radius: 18px;
  background: rgba(32, 216, 97, 0.045);
  padding: 17px;
}

.schedule-heading { margin: 0 0 14px; }
.schedule-heading > span { min-width: auto; height: auto; border: 0; color: var(--muted); font-size: .78rem; }
.wod-schedule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wod-schedule-grid label { border: 1px solid var(--line); border-radius: 14px; background: #0b1210; padding: 12px; }
.wod-schedule-grid label > span { font-size: .82rem; font-weight: 850; }
.wod-schedule-grid input { min-height: 48px; font-size: 1rem; font-weight: 850; }
.wod-schedule-grid small { color: var(--muted); font-size: .74rem; line-height: 1.35; }

.builder-layout .phone-preview {
  position: sticky;
  top: 18px;
}

@media (max-width: 1080px) {
  .builder-layout {
    grid-template-columns: 1fr;
  }

  .builder-layout .phone-preview {
    display: none;
  }
}

@media (max-width: 680px) {
  .wod-studio {
    border-radius: 20px;
    padding: 16px;
  }

  .builder-panel-header {
    flex-direction: row;
    align-items: center;
  }

  .wod-title-editor {
    grid-template-columns: minmax(0, 1fr) 48px;
  }

  .wod-title-editor input {
    font-size: clamp(2rem, 11vw, 3.15rem);
  }

  .title-edit-button {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .builder-primary-controls,
  .builder-secondary-controls {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .builder-control-tile {
    min-height: 94px;
    border-radius: 16px;
    padding: 13px;
  }

  .builder-control-tile select {
    font-size: 1rem;
  }

  .builder-detail-field {
    border-radius: 14px;
    padding: 11px 12px;
  }

  .wod-studio .exercise-row {
    grid-template-columns: 96px minmax(0, 1fr) 42px;
    min-height: 112px;
    border-radius: 16px;
  }

  .wod-studio .exercise-art {
    width: 96px;
    min-height: 112px;
  }

  .exercise-row-content {
    padding: 13px 11px;
  }

  .exercise-row-content > strong {
    font-size: 1.15rem;
  }

  .exercise-row-content > p {
    display: none;
  }

  .exercise-visual-values {
    gap: 5px;
    margin-top: 10px;
  }

  .exercise-visual-values span {
    min-height: 32px;
    gap: 5px;
    border-radius: 9px;
    font-size: 0.78rem;
    padding: 5px 7px;
  }

  .exercise-visual-values b {
    min-width: 19px;
    height: 19px;
    font-size: 0.58rem;
  }

  .wod-studio .exercise-actions {
    grid-template-columns: 34px;
    padding: 8px 7px 8px 0;
  }

  .wod-studio .exercise-actions button {
    width: 34px;
    height: 32px;
    border-radius: 9px;
  }

  .wod-studio .exercise-actions .move-exercise {
    grid-column: auto;
  }

  .builder-publish-bar {
    grid-template-columns: 1fr;
    gap: 9px;
    bottom: 8px;
    border-radius: 17px;
  }

  .builder-publish-bar > div {
    display: none;
  }

  .builder-publish-button {
    min-height: 60px;
    font-size: 1.06rem;
  }
}

/* Private athlete WOD builder: step two and saved library flow. */
.personal-wod-step-two[hidden] { display: none !important; }
.personal-wod-step-two { padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
.personal-wod-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 18px;
  border: 1px solid rgba(31, 224, 105, .24);
  border-radius: 16px;
  padding: 15px;
  background: rgba(31, 224, 105, .055);
}
.personal-wod-summary > div { display: grid; gap: 5px; min-width: 0; }
.personal-wod-summary span { color: var(--muted); font-size: .8rem; }
.personal-wod-summary strong { overflow-wrap: anywhere; font-size: 1rem; }
.personal-wod-rounds { margin: 0 0 22px; }
.personal-wod-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 22px 0 12px; }
.personal-wod-section-heading h4 { margin: 3px 0 0; font-size: 1.15rem; }
.personal-wod-section-heading > span { display: grid; place-items: center; min-width: 34px; height: 34px; border: 1px solid rgba(31, 224, 105, .32); border-radius: 999px; color: var(--green); font-weight: 900; }
.personal-wod-selected { display: grid; gap: 10px; }
.personal-wod-empty { margin: 0; border: 1px dashed rgba(143, 163, 154, .3); border-radius: 14px; padding: 16px; color: var(--muted); line-height: 1.45; }
.personal-wod-selected-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; border: 1px solid var(--line); border-radius: 15px; padding: 10px; background: #0d1411; }
.personal-wod-selected-card > img { width: 72px; height: 72px; border-radius: 11px; object-fit: cover; background: #030504; }
.personal-wod-selected-main { display: grid; align-content: start; gap: 7px; min-width: 0; }
.personal-wod-selected-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.personal-wod-selected-title strong { font-size: 1rem; }
.personal-wod-remove { min-width: 44px; min-height: 40px; border: 1px solid rgba(245, 255, 249, .1); border-radius: 10px; background: #151d19; color: var(--muted); font-size: 1.1rem; }
.personal-wod-prescription { display: grid; grid-template-columns: minmax(72px, .7fr) minmax(110px, 1fr) minmax(88px, .8fr); gap: 8px; }
.personal-wod-prescription input,
.personal-wod-prescription select { width: 100%; min-width: 0; min-height: 42px; border: 1px solid var(--line); border-radius: 10px; background: #080d0b; color: var(--text); font: inherit; padding: 0 10px; }
.personal-wod-search { margin: 0 0 12px; }
.personal-wod-category-filter { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 12px; padding: 2px 1px 6px; scrollbar-width: none; }
.personal-wod-category-filter::-webkit-scrollbar { display: none; }
.personal-wod-category-filter button { flex: 0 0 auto; min-height: 42px; border: 1px solid var(--line); border-radius: 999px; background: #0d1411; color: var(--muted); padding: 0 14px; font: inherit; font-size: .86rem; font-weight: 800; }
.personal-wod-category-filter button.active { border-color: rgba(31, 224, 105, .55); background: rgba(31, 224, 105, .1); color: var(--green); }
.personal-wod-exercise-library { display: grid; gap: 8px; }
.personal-wod-exercise-option { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 78px; border: 1px solid rgba(245, 255, 249, .08); border-radius: 14px; padding: 8px; background: #0b110e; }
.personal-wod-exercise-option img { width: 62px; height: 60px; border-radius: 9px; object-fit: cover; background: #030504; }
.personal-wod-exercise-option > div { display: grid; gap: 3px; min-width: 0; }
.personal-wod-exercise-option strong { font-size: .98rem; }
.personal-wod-exercise-option small { color: var(--muted); font-size: .78rem; line-height: 1.3; }
.personal-wod-exercise-option button { min-width: 82px; min-height: 42px; border: 1px solid rgba(31, 224, 105, .28); border-radius: 11px; background: rgba(31, 224, 105, .09); color: var(--green); font: inherit; font-size: .84rem; font-weight: 850; }
.personal-wod-exercise-option button:disabled { border-color: var(--line); background: #111815; color: var(--muted); }
.personal-wod-feedback { min-height: 1.3em; margin: 12px 0 0; color: #ffb3a5; font-size: .88rem; }
.personal-wod-step-two .personal-exercise-submit { margin-top: 10px; }
.personal-wod-step-two .personal-exercise-submit:disabled { cursor: not-allowed; background: #26332c; color: #a4b6aa; box-shadow: none; }
.personal-wod-local-note { margin: 12px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; text-align: center; }
.saved-private-wod-row { display: grid; gap: 13px; min-height: 0; padding: 14px; }
.saved-private-wod-open { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-width: 0; border: 0; background: transparent; color: inherit; padding: 0; text-align: left; }
.saved-private-wod-open img { width: 82px; height: 76px; border-radius: 12px; object-fit: cover; background: #030504; }
.saved-private-wod-copy { display: grid; gap: 5px; min-width: 0; }
.saved-private-wod-copy strong { overflow-wrap: anywhere; font-size: 1.08rem; line-height: 1.15; }
.saved-private-wod-copy small { color: var(--muted); font-size: .82rem; line-height: 1.3; }
.saved-private-wod-open:focus-visible,
.personal-wod-category-filter button:focus-visible,
.personal-wod-exercise-option button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.saved-private-wod-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: 100%; }
.saved-private-wod-train,
.saved-private-wod-edit { min-height: 46px; border-radius: 12px; font: inherit; font-size: .86rem; font-weight: 900; white-space: nowrap; padding: 0 14px; }
.saved-private-wod-train { border: 0; background: linear-gradient(135deg, #1fe069, #55f48d); color: #021108; }
.saved-private-wod-edit { min-width: 88px; border: 1px solid var(--line); background: #101814; color: var(--text); }

@media (max-width: 520px) {
  .personal-wod-summary { grid-template-columns: 1fr; gap: 10px; }
  .personal-wod-selected-card { grid-template-columns: 58px minmax(0, 1fr); gap: 9px; }
  .personal-wod-selected-card > img { width: 58px; height: 58px; }
  .personal-wod-prescription { grid-template-columns: 72px minmax(90px, 1fr); }
  .personal-wod-prescription input:last-child { grid-column: 1 / -1; }
  .personal-wod-exercise-option { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 8px; }
  .personal-wod-exercise-option img { width: 54px; height: 54px; }
  .personal-wod-exercise-option button { min-width: 72px; padding-inline: 8px; }
  .saved-private-wod-row { padding: 12px; }
  .saved-private-wod-open { grid-template-columns: 70px minmax(0, 1fr); gap: 10px; }
  .saved-private-wod-open img { width: 70px; height: 68px; }
  .saved-private-wod-train,
  .saved-private-wod-edit { min-height: 44px; padding-inline: 11px; font-size: .8rem; }
}

.private-wod-empty-state { padding: 24px 18px; border: 1px dashed var(--line); border-radius: 16px; text-align: center; }
.private-wod-empty-state[hidden] { display: none; }
.private-wod-empty-state strong { display: block; font-size: 1.05rem; }
.private-wod-empty-state p { max-width: 440px; margin: 8px auto 16px; color: var(--muted); line-height: 1.45; }
.private-wod-empty-state button { min-height: 42px; padding: 0 16px; border: 1px solid rgba(31, 224, 105, .28); border-radius: 12px; background: rgba(31, 224, 105, .09); color: var(--green); font: inherit; font-weight: 800; }

@media (max-width: 420px) {
  .builder-primary-controls,
  .builder-secondary-controls {
    grid-template-columns: 1fr;
  }

  .wod-studio .exercise-row {
    grid-template-columns: 84px minmax(0, 1fr) 38px;
  }

  .wod-studio .exercise-art {
    width: 84px;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at top right, rgba(32, 216, 97, 0.16), transparent 28rem),
    radial-gradient(circle at bottom left, rgba(18, 170, 73, 0.09), transparent 24rem),
    var(--bg);
  color: var(--text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

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

button {
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 1.35rem;
}

h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

h3 {
  font-size: 1.15rem;
}

.hidden-app,
.hidden-landing,
.hidden-nav,
.hidden-control {
  display: none !important;
}

.landing-shell {
  min-height: 100vh;
  padding: 24px;
}

.cinematic-landing {
  position: relative;
  background: #020403;
  overflow-x: hidden;
  padding: 0;
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 20;
  width: min(1180px, calc(100% - 36px));
  margin: 0;
  border: 1px solid rgba(245, 255, 249, 0.12);
  border-radius: 8px;
  background: rgba(5, 7, 6, 0.58);
  backdrop-filter: blur(18px);
  padding: 12px 14px;
  transform: translateX(-50%);
}

.landing-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 0%, rgba(32, 216, 97, 0.1) 45%, transparent 68%);
  opacity: 0.7;
}

.landing-actions,
.hero-cta,
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.story-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(110px, 14vw, 170px) 24px 62px;
}

.story-panel::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: -2;
  background-position: center;
  background-size: cover;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.05);
  animation: cinematic-pan 18s ease-in-out infinite alternate;
}

.story-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 4, 3, 0.96) 0%, rgba(2, 4, 3, 0.78) 33%, rgba(2, 4, 3, 0.2) 72%),
    linear-gradient(0deg, rgba(2, 4, 3, 0.92), transparent 30%, rgba(2, 4, 3, 0.5));
}

.bg-hero::before {
  background-image: url("assets/hero-impulso.png");
}

.bg-coach::before {
  background-image: url("assets/bg-coach.png");
  animation-duration: 20s;
}

.bg-community::before {
  background-image: url("assets/bg-community.png");
  animation-duration: 22s;
}

.bg-progress::before {
  background-image: url("assets/bg-progress.png");
  animation-duration: 24s;
}

.story-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.36fr);
  align-items: end;
  gap: 28px;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.story-copy {
  min-width: 0;
  max-width: 820px;
}

.story-copy h2 {
  max-width: 900px;
  margin: 12px 0 20px;
  font-size: clamp(2.9rem, 7.8vw, 7.4rem);
  line-height: 0.88;
  letter-spacing: 0;
}

.story-copy p:not(.eyebrow) {
  max-width: 650px;
  color: rgba(245, 255, 249, 0.78);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.65;
}

.story-card {
  align-self: end;
  border: 1px solid rgba(32, 216, 97, 0.34);
  border-radius: 8px;
  background: rgba(5, 7, 6, 0.72);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  padding: 18px;
}

.feed-showcase-card {
  position: relative;
  align-self: end;
  justify-self: end;
  width: min(100%, 440px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(32, 216, 97, 0.52);
  border-radius: 18px;
  background: #050806;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.58),
    0 0 42px rgba(32, 216, 97, 0.1);
}

.feed-showcase-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hide the real-gym name baked into the preview artwork on the public landing page. */
.landing-feed-demo::after {
  display: flex;
  position: absolute;
  z-index: 1;
  top: 5.55%;
  left: 42%;
  width: 19%;
  height: 2.4%;
  align-items: center;
  padding-left: 1%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(3, 4, 3, 0.88), #030403 12%, #030403 88%, rgba(3, 4, 3, 0.82));
  color: #9da7a2;
  content: "Tu gimnasio";
  font: 500 clamp(7px, 2.2vw, 10px) / 1.2 Arial, sans-serif;
  white-space: nowrap;
  pointer-events: none;
}

.feed-showcase-card figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(3, 6, 4, 0.82);
  color: rgba(245, 255, 249, 0.82);
  font-size: 0.84rem;
  line-height: 1.35;
  text-align: center;
  backdrop-filter: blur(14px);
}

.story-card.hero-floating-card {
  position: static;
  min-width: 0;
}

.story-card strong,
.story-card span {
  display: block;
}

.story-card strong {
  margin: 8px 0;
  font-size: 1.15rem;
}

.story-card span {
  color: var(--muted);
  line-height: 1.6;
}

.achievement-preview-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 152px;
  align-items: center;
  gap: 18px;
  padding: 16px;
}

.achievement-preview-copy {
  min-width: 0;
}

.achievement-preview-copy strong {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.12;
}

.achievement-preview-copy span {
  margin-top: 10px;
  font-size: 0.92rem;
}

.achievement-preview-visual {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(32, 216, 97, 0.5);
  border-radius: 16px;
  background: #030604;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(32, 216, 97, 0.12);
}

.achievement-preview-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.app-showcase {
  position: relative;
  display: grid;
  grid-template-columns: 0.92fr 0.72fr;
  align-items: end;
  gap: 18px;
  min-height: 560px;
}

.app-phone,
.exercise-preview-card {
  border: 1px solid rgba(32, 216, 97, 0.28);
  background:
    linear-gradient(160deg, rgba(18, 170, 73, 0.14), transparent 34%),
    rgba(5, 8, 7, 0.88);
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.app-phone {
  display: grid;
  align-content: start;
  min-height: 520px;
  border: 10px solid #020403;
  border-radius: 34px;
  overflow: hidden;
}

.main-phone {
  transform: rotate(-3deg);
}

.side-phone {
  min-height: 430px;
  margin-bottom: 52px;
  transform: rotate(4deg);
}

.phone-speaker {
  width: 68px;
  height: 6px;
  border-radius: 999px;
  background: rgba(245, 255, 249, 0.16);
  margin: 16px auto 4px;
}

.app-screen {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.app-screen h3 {
  font-size: 2rem;
}

.feed-mini-card,
.leader-mini,
.wod-mini-list span,
.exercise-preview-card,
.feature-strip span,
.social-proof-mini div {
  border: 1px solid rgba(245, 255, 249, 0.11);
  border-radius: 14px;
  background: rgba(245, 255, 249, 0.045);
}

.feed-mini-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
}

.avatar-dot {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--green);
  color: #031207;
  font-weight: 950;
}

.feed-mini-card small,
.leader-mini span,
.wod-mini-list span,
.exercise-preview-card span,
.social-proof-mini span {
  color: var(--muted);
}

.leader-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px;
}

.leader-mini.active {
  border-color: rgba(32, 216, 97, 0.44);
  background: rgba(32, 216, 97, 0.1);
}

.wod-mini-list {
  display: grid;
  gap: 9px;
}

.wod-mini-list span {
  padding: 12px;
}

.mini-cta {
  border: 0;
  border-radius: 14px;
  background: var(--green);
  color: #031207;
  font-weight: 900;
  padding: 13px;
}

.exercise-preview-card {
  position: absolute;
  right: 7%;
  bottom: 4px;
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 12px;
  align-items: center;
  width: min(310px, 86%);
  padding: 12px;
}

.exercise-preview-card img {
  width: 86px;
  height: 86px;
  border-radius: 12px;
  background: #020403;
  object-fit: cover;
}

.feature-strip,
.social-proof-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.feature-strip span {
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 900;
  padding: 8px 10px;
}

.social-proof-mini div {
  display: grid;
  gap: 2px;
  min-width: 116px;
  padding: 10px;
}

.social-proof-mini strong {
  color: var(--green);
  font-size: 1.45rem;
}

.progress-glow {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(245, 255, 249, 0.1);
  margin-top: 16px;
}

.progress-glow span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), #96ff70);
  box-shadow: 0 0 26px rgba(32, 216, 97, 0.62);
}

@keyframes cinematic-pan {
  from {
    transform: scale(1.05) translate3d(-1.4%, -1%, 0);
  }

  to {
    transform: scale(1.12) translate3d(1.4%, 1%, 0);
  }
}

.hero-section {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: 38px;
  align-items: center;
  max-width: 1180px;
  min-height: calc(100vh - 220px);
  margin: 0 auto;
  padding: 58px 0 34px;
}

.hero-copy h2 {
  max-width: 760px;
  font-size: clamp(2.35rem, 5vw, 5.2rem);
  line-height: 0.95;
  margin: 12px 0 22px;
}

.hero-text {
  max-width: 620px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

.hero-cta {
  margin-top: 28px;
}

.hero-proof {
  margin-top: 24px;
}

.hero-proof span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(13, 19, 17, 0.72);
  color: var(--muted);
  font-weight: 750;
  padding: 9px 12px;
}

.hero-media {
  position: relative;
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(32, 216, 97, 0.12), rgba(4, 7, 6, 0.96));
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
}

.hero-floating-card {
  position: absolute;
  right: 18px;
  bottom: 18px;
  min-width: 230px;
  border: 1px solid rgba(32, 216, 97, 0.38);
  border-radius: 8px;
  background: rgba(5, 7, 6, 0.86);
  backdrop-filter: blur(12px);
  padding: 16px;
}

.hero-floating-card strong,
.hero-floating-card span {
  display: block;
}

.hero-floating-card strong {
  margin: 6px 0;
}

.hero-floating-card span {
  color: var(--muted);
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto 38px;
}

.cinematic-portals {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 78px 24px;
}

.cinematic-portals::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 15% 10%, rgba(32, 216, 97, 0.22), transparent 24rem),
    linear-gradient(180deg, #020403, #07100c 48%, #020403);
}

.portal-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 19, 17, 0.93);
  padding: 24px;
}

.portal-card.featured {
  border-color: rgba(32, 216, 97, 0.4);
}

.portal-card h3 {
  font-size: 1.45rem;
  margin: 8px 0 10px;
}

.portal-card p {
  color: var(--muted);
  line-height: 1.6;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 60;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  border-bottom: 1px solid rgba(32, 216, 97, 0.25);
  background:
    radial-gradient(circle at 12% 0%, rgba(32, 216, 97, 0.16), transparent 22rem),
    rgba(4, 8, 6, 0.94);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  padding: 12px 24px;
  backdrop-filter: blur(20px);
}

.app-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.app-header-brand .brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

.app-header-brand .eyebrow {
  margin: 0 0 2px;
}

.app-header-brand strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 0.98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.app-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-menu-toggle,
.drawer-header,
.mobile-menu-backdrop,
.mobile-bottom-nav {
  display: none;
}

.mobile-menu-toggle,
.drawer-close {
  border: 1px solid var(--line);
  background: rgba(17, 25, 23, 0.92);
  color: var(--text);
}

.mobile-menu-toggle {
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border-radius: 13px;
}

.mobile-menu-toggle > span {
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-menu-open .mobile-menu-toggle > span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-open .mobile-menu-toggle > span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-open .mobile-menu-toggle > span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.sidebar {
  border-right: 1px solid var(--line);
  background: rgba(8, 12, 11, 0.88);
  padding: 24px;
}

.drawer-close {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 1.45rem;
  font-weight: 700;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
}

.profile-hero-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 86px;
  aspect-ratio: 1;
  border: 2px solid var(--green);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(145deg, var(--green), #075923);
  color: #031207;
  font-size: 1.45rem;
  font-weight: 950;
  box-shadow: 0 0 34px rgba(32, 216, 97, 0.18);
}

.profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 18px;
}

.profile-stat-grid > div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #080d0c;
  padding: 13px;
}

.profile-stat-grid strong {
  color: var(--green);
  font-size: 1.15rem;
}

.profile-stat-grid span {
  color: var(--muted);
  font-size: 0.8rem;
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .app-header {
    z-index: 80;
  }

  .mobile-menu-toggle {
    display: inline-flex;
  }

  .sidebar {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 100;
    width: min(86vw, 380px);
    overflow-y: auto;
    border: 0;
    border-left: 1px solid rgba(32, 216, 97, 0.3);
    background:
      radial-gradient(circle at 100% 0%, rgba(32, 216, 97, 0.16), transparent 22rem),
      rgba(5, 10, 8, 0.98);
    box-shadow: -30px 0 80px rgba(0, 0, 0, 0.62);
    padding: 18px;
    transform: translateX(105%);
    transition: transform 0.26s ease;
  }

  .app-shell.mobile-menu-open .sidebar {
    transform: translateX(0);
  }

  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    border: 0;
    background: rgba(0, 0, 0, 0.68);
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(5px);
    transition: opacity 0.22s ease;
  }

  .app-shell.mobile-menu-open .mobile-menu-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar .nav-list {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .sidebar .nav-list button {
    min-height: 48px;
    border: 1px solid transparent;
    padding: 13px 15px;
  }

  .sidebar .nav-list button.active {
    border-color: rgba(32, 216, 97, 0.3);
  }

  .sidebar [data-mobile-primary] {
    display: none !important;
  }

  .dashboard {
    grid-column: 1;
    padding-bottom: 112px;
  }

  .mobile-bottom-nav {
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    z-index: 85;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    min-height: 74px;
    border: 1px solid rgba(32, 216, 97, 0.22);
    border-radius: 22px;
    background: rgba(9, 13, 12, 0.94);
    box-shadow:
      0 22px 60px rgba(0, 0, 0, 0.58),
      0 0 32px rgba(32, 216, 97, 0.08);
    padding: 7px;
    backdrop-filter: blur(22px);
  }

  .mobile-bottom-nav button {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    min-width: 0;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: rgba(245, 255, 249, 0.55);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 6px 3px;
  }

  .mobile-bottom-nav button.active {
    background:
      linear-gradient(180deg, rgba(32, 216, 97, 0.2), rgba(32, 216, 97, 0.08));
    color: var(--green);
  }

  .bottom-nav-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: currentColor;
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1;
  }

  .wod-icon {
    font-size: 1.55rem;
    transform: scaleX(1.2);
  }

  .profile-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .app-header {
    min-height: 66px;
  }

  .app-back-button {
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
  }

  .app-back-button .back-label {
    display: none;
  }

  .mobile-menu-toggle {
    width: 44px;
    height: 44px;
  }

  .dashboard {
    padding: 18px 14px 112px;
  }

  .wod-schedule-grid { grid-template-columns: 1fr; }
  .athlete-wod-notification { grid-template-columns: 44px minmax(0, 1fr); gap: 11px; padding: 14px; }
  .athlete-notification-icon { width: 44px; height: 44px; border-radius: 13px; }
  .athlete-notification-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .athlete-notification-actions button { width: 100%; }
  .published-wod-window { grid-template-columns: 1fr; }
  .published-wod-window > div { grid-template-columns: 1fr auto; align-items: center; text-align: left; }
  .published-wod-window > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .published-wod-actions { grid-template-columns: 1fr; }
  .published-result-card { border-radius: 24px 24px 0 0; padding-inline: 16px; }

  .app-shell.personal-library-active .dashboard > .topbar {
    display: none;
  }

  .mobile-bottom-nav {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    min-height: 70px;
    border-radius: 20px;
  }

  .profile-hero-card {
    grid-template-columns: auto 1fr;
  }

  .profile-hero-card .secondary-action {
    grid-column: 1 / -1;
    width: 100%;
  }

  .profile-avatar {
    width: 68px;
  }

  .profile-stat-grid {
    grid-template-columns: 1fr;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--green), var(--green-dark));
  color: transparent;
  font-size: 1.5rem;
  font-weight: 950;
  isolation: isolate;
}

.brand-mark::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 22px;
  border-radius: 4px;
  background:
    linear-gradient(#031207, #031207) 0 9px / 4px 8px no-repeat,
    linear-gradient(#031207, #031207) 7px 3px / 4px 20px no-repeat,
    linear-gradient(#031207, #031207) 14px 7px / 4px 12px no-repeat,
    linear-gradient(#031207, #031207) 21px 0 / 4px 22px no-repeat,
    linear-gradient(#031207, #031207) 28px 6px / 4px 14px no-repeat;
  transform: skewX(-8deg);
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.26), transparent 42%);
  mix-blend-mode: soft-light;
}

.eyebrow {
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gym-switcher,
.panel,
.metric-card,
.table-card,
.feed-post,
.loose {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 19, 17, 0.93);
}

.gym-switcher {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.gym-switcher span,
.gym-switcher small,
.muted-copy,
.activity-list p,
.feed-post p,
.metric-card p {
  color: var(--muted);
}

.gym-switcher select,
input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #060908;
  color: var(--text);
  outline: none;
  padding: 12px;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--green);
}

.nav-list {
  display: grid;
  gap: 8px;
  margin-top: 26px;
}

.drawer-session-button {
  width: calc(100% - 32px);
  min-height: 48px;
  margin: auto 16px 16px;
  border: 1px solid rgba(160, 181, 172, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.drawer-session-button:hover,
.drawer-session-button:focus-visible {
  color: var(--text);
  border-color: rgba(35, 230, 112, 0.45);
  outline: none;
}

.nav-list button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 13px 14px;
  text-align: left;
}

.nav-list button.active,
.nav-list button:hover {
  background: var(--green-soft);
  color: var(--text);
}

.dashboard {
  padding: 28px;
}

.topbar,
.panel-header,
.loose {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.topbar {
  margin-bottom: 20px;
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.primary-action,
.ghost-action,
.secondary-action,
.secondary-inline {
  border-radius: 8px;
  font-weight: 850;
}

.primary-action {
  border: 0;
  background: var(--green);
  color: #031207;
  padding: 13px 18px;
}

.ghost-action,
.secondary-inline {
  border: 1px solid var(--line);
  background: rgba(17, 25, 23, 0.9);
  color: var(--text);
  padding: 12px 16px;
}

.secondary-action {
  width: 100%;
  border: 1px dashed #345348;
  background: var(--surface-2);
  color: var(--text);
  margin-top: 16px;
  padding: 14px;
}

.view {
  display: none;
}

.active-view {
  display: block;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.metric-card,
.panel,
.loose,
.table-card,
.feed-post {
  padding: 20px;
}

.metric-card {
  display: grid;
  gap: 6px;
}

.metric-card span,
label {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 750;
}

.metric-card strong {
  color: var(--green);
  font-size: 1.7rem;
}

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

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

label {
  display: grid;
  gap: 8px;
}

.status-pill,
.format-chip,
.name-grid span {
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 0.85rem;
  font-weight: 850;
  padding: 8px 11px;
}

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

.muted-chip {
  border: 1px solid rgba(32, 216, 97, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}

.activity-list,
.exercise-stack,
.language-list,
.feed-layout,
.ranking-layout,
.medal-stack,
.progress-list,
.settings-grid {
  display: grid;
  gap: 12px;
}

.member-feed {
  margin-top: 18px;
}

.compact-post {
  grid-template-columns: 82px 1fr;
  padding: 14px;
}

.member-rank-list,
.client-wod-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.member-rank-list div,
.client-wod-list div,
.client-result-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #080d0c;
  padding: 14px;
}

.member-rank-list div {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
}

.member-rank-list span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(245, 255, 249, 0.1);
  color: var(--text);
  font-weight: 950;
}

.member-rank-list .you {
  border-color: rgba(32, 216, 97, 0.42);
  background: rgba(32, 216, 97, 0.08);
}

.member-rank-list .you span {
  background: var(--green);
  color: #031207;
}

.member-rank-list small,
.client-wod-list span,
.client-result-card p {
  color: var(--muted);
}

.client-wod-list strong,
.client-wod-list span {
  display: block;
}

.client-wod-list span {
  margin-top: 4px;
}

.client-result-card {
  margin: 14px 0;
}

.client-result-card h3 {
  margin: 8px 0;
}

.athlete-wod-notification {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  max-width: 1120px;
  margin: 0 auto 18px;
  border: 1px solid rgba(32, 216, 97, .38);
  border-radius: 18px;
  padding: 16px;
  background: radial-gradient(circle at 90% 10%, rgba(32,216,97,.18), transparent 30%), #0b1710;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
.athlete-notification-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: rgba(32,216,97,.14); color: var(--green); font-size: 1.4rem; }
.athlete-notification-copy { display: grid; gap: 3px; min-width: 0; }
.athlete-notification-copy > span { color: var(--green); font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.athlete-notification-copy strong { font-size: 1.08rem; }
.athlete-notification-copy p { color: var(--muted); font-size: .86rem; line-height: 1.4; }
.athlete-notification-copy small { color: #b7c7be; font-size: .76rem; }
.athlete-notification-actions { display: flex; gap: 8px; }
.athlete-notification-actions button { min-height: 44px; padding: 0 14px; }

.published-wod-card { overflow: hidden; }
.published-wod-description { margin: 12px 0 0; color: var(--muted); line-height: 1.5; }
.published-wod-window { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.published-wod-window > div { display: grid; gap: 4px; padding: 12px; text-align: center; }
.published-wod-window > div + div { border-left: 1px solid var(--line); }
.published-wod-window span { color: var(--muted); font-size: .72rem; }
.published-wod-window strong { font-size: .92rem; }
#publishedWodExercises > div { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 10px; }
#publishedWodExercises > div > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(32,216,97,.12); color: var(--green); font-size: .78rem; font-weight: 900; }
#publishedWodExercises small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.35; }
.published-wod-join-state { display: flex; align-items: center; gap: 11px; margin-top: 16px; border: 1px solid rgba(32,216,97,.32); border-radius: 14px; padding: 13px; background: rgba(32,216,97,.07); }
.published-wod-join-state[hidden] { display: none; }
.join-state-mark { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #031207; font-weight: 950; }
.published-wod-join-state div { display: grid; gap: 3px; }
.published-wod-join-state p { color: var(--muted); font-size: .8rem; }
.published-wod-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; margin-top: 16px; }
.published-wod-actions button { min-height: 54px; }
.published-wod-actions #joinPublishedWod { grid-column: 1 / -1; }
.published-wod-actions button[hidden] { display: none; }
.published-wod-helper { margin: 10px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.4; text-align: center; }

.published-result-modal { position: fixed; z-index: 210; inset: 0; display: grid; align-items: end; }
.published-result-modal.hidden-modal { display: none; }
.published-result-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.78); backdrop-filter: blur(7px); }
.published-result-card { position: relative; z-index: 1; width: min(100%, 620px); max-height: 92vh; overflow-y: auto; margin: 0 auto; border: 1px solid rgba(32,216,97,.32); border-radius: 28px 28px 0 0; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 0, rgba(32,216,97,.15), transparent 34%), #0b1210; }
.published-result-card header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.published-result-card header h2 { margin: 3px 0 0; }
.published-result-card header button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #111916; color: var(--text); font-size: 1.5rem; }
.published-result-card > p { margin: 12px 0 16px; color: var(--muted); }
.published-result-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.published-result-fields label:last-child { grid-column: 1 / -1; }
.published-result-fields label > span,
.published-result-note > span { font-size: .84rem; font-weight: 850; }
.published-result-note { margin-top: 12px; }
.published-result-note small { color: var(--muted); font-size: .72rem; }
.published-result-note textarea { min-height: 78px; }
.published-share-choice,
.training-share-choice { display: flex; align-items: flex-start; gap: 11px; margin: 14px 0; border: 1px solid rgba(32,216,97,.2); border-radius: 14px; padding: 13px; background: rgba(32,216,97,.05); text-align: left; }
.training-share-choice[hidden] { display: none; }
.published-share-choice input,
.training-share-choice input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--green); }
.published-share-choice span,
.training-share-choice span { display: grid; gap: 3px; }
.published-share-choice small,
.training-share-choice small { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.published-result-cutoff { margin: 0 0 14px !important; font-size: .78rem; text-align: center; }
.user-result-post { border-color: rgba(32,216,97,.36); }

.client-builder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.client-builder-actions .ghost-action,
.client-builder-actions .primary-action {
  width: auto;
}

.athlete-wod-library { width: min(100%, 860px); margin-inline: auto; }
.athlete-library-head,
.athlete-library-tools,
.wod-suggestion-card,
.private-wod-row,
.client-sheet-panel header,
.client-create-options button { display: flex; align-items: center; }
.athlete-library-head { justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.athlete-library-head h3 { margin-top: 3px; font-size: clamp(1.75rem, 4vw, 2.7rem); }
.athlete-library-head > div:first-child > p:last-child { margin-top: 4px; color: var(--muted); }
.athlete-library-tools { gap: 10px; }
.library-icon-button,
.library-add-button { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid var(--line); border-radius: 16px; background: #0b1210; color: var(--text); font-size: 1.75rem; }
.library-add-button { border-color: rgba(32, 216, 97, 0.55); background: var(--green); color: #031207; box-shadow: 0 10px 28px rgba(32, 216, 97, 0.2); }
.private-wod-search { display: grid; gap: 7px; margin: -2px 0 16px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.private-wod-search input { width: 100%; border: 1px solid rgba(32, 216, 97, .32); border-radius: 14px; background: #080e0c; color: var(--text); padding: 14px 16px; }
.private-wod-search.hidden-search { display: none; }
.wod-suggestion-card { position: relative; gap: 14px; min-height: 118px; overflow: hidden; border: 1px solid rgba(32, 216, 97, 0.38); border-radius: 18px; padding: 18px; background: radial-gradient(circle at 88% 20%, rgba(32, 216, 97, 0.2), transparent 34%), linear-gradient(135deg, #0d1b14, #07100c); }
.suggestion-icon { display: grid; flex: 0 0 52px; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(32, 216, 97, 0.15); color: var(--green); font-size: 1.45rem; }
.wod-suggestion-card > div:nth-child(2) { display: grid; flex: 1; gap: 3px; min-width: 0; }
.wod-suggestion-card span,
.private-label { color: var(--green); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.wod-suggestion-card strong { font-size: 1.2rem; }
.wod-suggestion-card p,
.private-wod-row p { color: var(--muted); }
.wod-suggestion-card > button { border: 1px solid rgba(32, 216, 97, 0.32); border-radius: 999px; background: rgba(3, 10, 7, 0.72); color: var(--text); font-weight: 850; padding: 10px 14px; }
.private-wod-filter { display: flex; gap: 8px; overflow-x: auto; margin: 22px 0 12px; padding-bottom: 2px; scrollbar-width: none; }
.private-wod-filter::-webkit-scrollbar { display: none; }
.private-wod-filter button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: #0b1110; color: var(--muted); font-weight: 800; padding: 10px 16px; }
.private-wod-filter button.active { border-color: rgba(32, 216, 97, 0.5); background: var(--green-soft); color: var(--text); }
.private-wod-list { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(9, 15, 13, 0.94); }
.private-wod-row { gap: 14px; min-height: 112px; padding: 12px; transition: background 160ms ease, opacity 160ms ease; }
.private-wod-row + .private-wod-row { border-top: 1px solid var(--line); }
.private-wod-row:hover { background: rgba(32, 216, 97, 0.05); }
.private-wod-row.filtered-out { display: none; }
.private-wod-row img { flex: 0 0 108px; width: 108px; height: 86px; border-radius: 12px; background: #020403; object-fit: cover; }
.private-wod-row > div { display: grid; flex: 1; gap: 4px; min-width: 0; }
.private-wod-row h4 { font-size: 1.1rem; }
.private-wod-row > button { align-self: center; min-width: 44px; border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; }
.client-wod-sheet { position: fixed; z-index: 150; inset: 0; display: grid; align-items: end; }
.client-wod-sheet.hidden-modal { display: none; }
.client-sheet-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0, 0, 0, 0.74); backdrop-filter: blur(4px); }
.client-sheet-panel { position: relative; z-index: 1; width: min(100%, 620px); margin-inline: auto; border: 1px solid rgba(32, 216, 97, 0.24); border-radius: 28px 28px 0 0; padding: 12px 20px calc(24px + env(safe-area-inset-bottom)); background: #0d1210; box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.55); animation: clientSheetIn 220ms ease both; }
.sheet-handle { display: block; width: 54px; height: 5px; margin: 0 auto 18px; border-radius: 999px; background: #3c4641; }
.client-sheet-panel header { justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.sheet-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #121a17; color: var(--text); font-size: 1.5rem; }
.client-create-options { display: grid; gap: 8px; }
.client-create-options button { gap: 14px; width: 100%; min-height: 82px; border: 1px solid transparent; border-radius: 16px; background: #151b19; color: var(--text); padding: 13px; text-align: left; }
.client-create-options button:hover { border-color: rgba(32, 216, 97, 0.38); background: #17231d; }
.create-option-icon { display: grid; flex: 0 0 52px; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #222a27; color: var(--green); font-size: 1.35rem; }
.client-create-options button:first-child .create-option-icon { border: 1px solid rgba(32, 216, 97, 0.6); background: rgba(32, 216, 97, 0.12); box-shadow: 0 0 24px rgba(32, 216, 97, 0.16); }
.client-create-options button > span:last-child { display: grid; gap: 4px; }
.client-create-options strong { font-size: 1rem; }
.client-create-options small { color: var(--muted); font-size: 0.82rem; }
@keyframes clientSheetIn { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.personal-exercise-screen,
.personal-wod-screen {
  position: fixed;
  z-index: 180;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 50% -12%, rgba(31, 224, 105, 0.14), transparent 30%),
    #050806;
  color: var(--text);
}

.personal-exercise-screen.hidden-modal,
.personal-wod-screen.hidden-modal { display: none; }

.training-session-screen { position: fixed; z-index: 190; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(circle at 50% -12%, rgba(31, 224, 105, .18), transparent 31%), #040705; color: var(--text); }
.training-session-screen.hidden-modal { display: none; }
.training-topbar { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; width: min(100% - 36px, 640px); margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 0 12px; }
.training-close,
.training-pause-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 15px; background: rgba(9, 17, 13, .84); color: var(--text); }
.training-close { font-size: 2.2rem; line-height: 1; }
.training-pause-icon { justify-self: end; font-size: 1.22rem; font-weight: 900; }
.training-brand { display: grid; place-items: center; justify-self: center; width: 40px; height: 40px; border-radius: 13px; background: linear-gradient(145deg, #25eb71, #0aaa49); color: #021108; font-weight: 1000; }
.training-session-content { width: min(100% - 36px, 640px); margin: 0 auto; padding: 10px 0 160px; }
.training-session-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 6px 0 16px; }
.training-session-heading h2 { margin: 4px 0 0; font-size: clamp(2rem, 8vw, 3rem); line-height: 1; }
.training-status { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 8px; border: 1px solid rgba(31, 224, 105, .46); border-radius: 999px; padding: 9px 12px; color: var(--green); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.training-status i { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px rgba(31, 224, 105, .7); }
.training-status.paused { border-color: var(--line); color: var(--muted); }
.training-status.paused i { background: var(--muted); box-shadow: none; }
.training-timer-card { position: relative; display: grid; place-items: center; width: min(100%, 360px); aspect-ratio: 1; margin: 6px auto 20px; }
.training-progress { width: 100%; height: 100%; transform: rotate(-90deg); }
.training-progress-track,
.training-progress-value { fill: none; stroke-width: 7; }
.training-progress-track { stroke: #123020; }
.training-progress-value { stroke: url(#trainingGradient); stroke: var(--green); stroke-linecap: round; transition: stroke-dashoffset .35s linear; filter: drop-shadow(0 0 8px rgba(31, 224, 105, .32)); }
.training-timer-card::before { position: absolute; inset: 13%; border: 1px solid rgba(31, 224, 105, .2); border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(31,224,105,.13), rgba(8,17,12,.12) 62%); box-shadow: inset 0 0 48px rgba(31, 224, 105, .07); content: ""; }
.training-timer-copy { position: absolute; z-index: 1; display: grid; justify-items: center; gap: 6px; }
.training-timer-copy span { font-size: clamp(3.7rem, 15vw, 5.8rem); font-weight: 950; letter-spacing: -.075em; line-height: .88; font-variant-numeric: tabular-nums; }
.training-timer-copy small { color: var(--muted); font-size: .7rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.training-current-exercise { border: 1px solid rgba(31, 224, 105, .72); border-radius: 20px; padding: 16px; background: radial-gradient(circle at 82% 50%, rgba(31,224,105,.12), transparent 32%), #0b1510; box-shadow: 0 12px 36px rgba(0,0,0,.24); }
.training-current-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--green); font-size: .82rem; font-weight: 950; }
.training-current-meta button { border: 0; background: transparent; color: var(--green); font: inherit; font-size: .76rem; font-weight: 900; }
.training-current-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.training-current-body strong { display: block; font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.1; }
.training-current-body span { display: block; margin-top: 5px; color: var(--muted); font-size: 1.15rem; }
.training-current-body img { width: 106px; height: 92px; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(31,224,105,.18)); }
.training-exercise-dots { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.training-exercise-dots i { width: 11px; height: 11px; border-radius: 50%; background: #35413a; }
.training-exercise-dots i.active { background: var(--green); box-shadow: 0 0 14px rgba(31,224,105,.62); }
.training-up-next { margin-top: 22px; }
.training-up-next > .eyebrow { margin-bottom: 10px; }
.training-up-next > div { display: grid; gap: 8px; }
.training-up-next > div > div { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px; min-height: 64px; border: 1px solid rgba(245,255,249,.09); border-radius: 14px; padding: 9px 12px; background: #0a100d; }
.training-up-next > div > div > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #1b2520; color: var(--muted); font-size: .82rem; font-weight: 900; }
.training-up-next strong { display: block; font-size: .98rem; }
.training-up-next small,
.training-up-next p { color: var(--muted); font-size: .82rem; }
.training-round-status { margin-top: 20px; border: 1px solid rgba(31,224,105,.2); border-radius: 17px; padding: 14px; background: rgba(31,224,105,.045); }
.training-round-status > div { display: flex; align-items: baseline; justify-content: space-between; }
.training-round-status span { color: var(--muted); font-size: .82rem; font-weight: 800; }
.training-round-status strong { color: var(--green); font-size: 1.35rem; }
.training-round-status > p { margin: 5px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.training-round-history { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.training-round-history li { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: #17221c; padding: 5px 9px; font-size: .74rem; }
.training-round-history span { color: var(--green); }
.training-round-history strong { color: var(--text); font-size: .76rem; }
.training-actions { position: fixed; z-index: 4; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; border-top: 1px solid rgba(31,224,105,.18); padding: 12px max(18px, calc((100vw - 604px) / 2)) calc(12px + env(safe-area-inset-bottom)); background: rgba(4,8,6,.94); backdrop-filter: blur(18px); }
.training-confirm-round,
.training-finish { min-height: 58px; border-radius: 16px; font: inherit; font-weight: 950; }
.training-confirm-round { border: 0; background: linear-gradient(135deg, #1fe069, #55f48d); color: #021108; font-size: .98rem; }
.training-finish { min-width: 112px; border: 1px solid rgba(31,224,105,.48); background: #0c1510; color: var(--text); font-size: .88rem; }
.training-complete-panel { position: fixed; z-index: 8; inset: 0; display: grid; align-items: end; background: rgba(0,0,0,.7); backdrop-filter: blur(8px); }
.training-complete-card { width: min(100%, 620px); margin: 0 auto; border: 1px solid rgba(31,224,105,.32); border-radius: 28px 28px 0 0; padding: 26px 20px calc(24px + env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 0, rgba(31,224,105,.16), transparent 38%), #0c1410; text-align: center; animation: clientSheetIn .22s ease both; }
.training-complete-mark { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: var(--green); color: #021108; font-size: 1.8rem; font-weight: 1000; box-shadow: 0 0 34px rgba(31,224,105,.35); }
.training-complete-card h2 { margin: 5px 0 8px; font-size: 2rem; }
.training-complete-card > p:not(.eyebrow) { margin: 0; color: var(--muted); }
.training-complete-metrics { display: grid; grid-template-columns: 1fr 1fr; margin: 20px 0; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.training-complete-metrics div { display: grid; gap: 4px; padding: 13px; }
.training-complete-metrics div + div { border-left: 1px solid var(--line); }
.training-complete-metrics span { color: var(--muted); font-size: .75rem; }
.training-complete-metrics strong { color: var(--green); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.training-partial-field { display: grid; gap: 8px; margin: 0 0 14px; text-align: left; color: var(--text); font-size: .88rem; font-weight: 850; }
.training-partial-field small { display: block; margin-top: 3px; color: var(--muted); font-size: .75rem; font-weight: 700; }
.training-partial-field input { width: 100%; min-height: 52px; border: 1px solid var(--line); border-radius: 13px; background: #070c09; color: var(--text); font: inherit; padding: 0 14px; }
.training-save-result { width: 100%; min-height: 56px; border: 0; border-radius: 15px; background: linear-gradient(135deg, #1fe069, #55f48d); color: #021108; font: inherit; font-weight: 950; }
.training-back-library { margin-top: 10px; border: 0; background: transparent; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 4px; }

.personal-exercise-topbar {
  position: sticky;
  z-index: 3;
  top: 0;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  min-height: 92px;
  border-bottom: 1px solid rgba(31, 224, 105, 0.18);
  padding: max(14px, env(safe-area-inset-top)) 22px 14px;
  background: rgba(5, 12, 8, 0.9);
  backdrop-filter: blur(18px);
}

.personal-exercise-topbar > div { text-align: center; }
.personal-exercise-topbar h2 { margin: 2px 0 0; font-size: 1.35rem; }
.personal-exercise-kicker { color: var(--green); font-size: .68rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.personal-exercise-back,
.personal-exercise-brand { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 15px; background: #0d1512; color: var(--text); }
.personal-exercise-back { font-size: 2.25rem; line-height: 1; }
.personal-exercise-brand { justify-self: end; border-color: rgba(31, 224, 105, .42); background: linear-gradient(145deg, #25eb71, #0aaa49); color: #021108; font-size: 1rem; font-weight: 1000; box-shadow: 0 8px 26px rgba(31, 224, 105, .18); }

.personal-exercise-form { width: min(100% - 32px, 720px); margin: 0 auto; padding: 28px 0 calc(32px + env(safe-area-inset-bottom)); }
.personal-exercise-intro { margin: 0 auto 24px; color: var(--muted); line-height: 1.5; text-align: center; }
.personal-exercise-image { position: relative; display: grid; place-items: center; width: 190px; aspect-ratio: 1; overflow: hidden; margin: 0 auto 34px; border: 1px solid rgba(31, 224, 105, .42); border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(31, 224, 105, .12), #0c1210 68%); box-shadow: 0 0 0 8px rgba(31, 224, 105, .035), 0 22px 54px rgba(0, 0, 0, .42); cursor: pointer; }
.personal-exercise-image input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.personal-exercise-image img { position: absolute; inset: 0; display: none; width: 100%; height: 100%; object-fit: cover; }
.personal-exercise-image.has-image img { display: block; }
.personal-exercise-image.has-image .personal-image-placeholder { opacity: 0; }
.personal-image-placeholder { position: relative; display: grid; justify-items: center; gap: 5px; color: var(--muted); text-align: center; transition: opacity .18s ease; }
.personal-image-placeholder b { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: rgba(31, 224, 105, .12); color: var(--green); font-size: 1.8rem; }
.personal-image-placeholder strong { color: var(--text); font-size: 1rem; }
.personal-image-placeholder small { font-size: .75rem; }

.personal-exercise-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.personal-field { display: grid; align-content: start; gap: 8px; }
.personal-field:first-child,
.personal-field:nth-child(2) { grid-column: 1 / -1; }
.personal-field > span { color: var(--text); font-size: .9rem; font-weight: 850; }
.personal-field em { margin-left: 5px; color: var(--muted); font-size: .76rem; font-style: normal; font-weight: 700; }
.personal-field input,
.personal-field select { width: 100%; min-height: 58px; border: 1px solid var(--line); border-radius: 15px; outline: 0; background: #111815; color: var(--text); font: inherit; padding: 0 16px; transition: border-color .18s ease, box-shadow .18s ease; }
.personal-field input::placeholder { color: #718078; }
.personal-field input:focus,
.personal-field select:focus { border-color: rgba(31, 224, 105, .7); box-shadow: 0 0 0 4px rgba(31, 224, 105, .09); }
.personal-field > small { margin-top: -2px; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.personal-private-note { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 18px; border: 1px solid rgba(31, 224, 105, .22); border-radius: 16px; padding: 14px; background: rgba(31, 224, 105, .055); }
.personal-private-note > span { color: var(--green); }
.personal-private-note p { display: grid; gap: 3px; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.personal-private-note strong { color: var(--text); font-size: .88rem; }
.personal-exercise-submit { position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); width: 100%; min-height: 60px; border: 0; border-radius: 17px; background: linear-gradient(135deg, #1fe069, #55f48d); color: #021108; font-size: 1.04rem; font-weight: 950; box-shadow: 0 15px 42px rgba(31, 224, 105, .24); }

.personal-wod-form { width: min(100% - 32px, 680px); margin: 0 auto; padding: 28px 0 calc(32px + env(safe-area-inset-bottom)); }
.personal-wod-step { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; color: var(--green); font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.personal-wod-step i { position: relative; flex: 1; height: 5px; overflow: hidden; border-radius: 999px; background: #1a2420; }
.personal-wod-step i::after { position: absolute; inset: 0 50% 0 0; border-radius: inherit; background: var(--green); content: ""; }
.personal-wod-heading { margin-bottom: 26px; }
.personal-wod-heading h3 { margin: 4px 0 8px; font-size: clamp(1.8rem, 5vw, 2.5rem); }
.personal-wod-heading > p:last-child { color: var(--muted); line-height: 1.5; }
.personal-wod-form > .personal-field { margin-bottom: 22px; }
.personal-wod-format { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; border: 0; padding: 0; }
.personal-wod-format legend { grid-column: 1 / -1; margin-bottom: 2px; color: var(--text); font-size: .9rem; font-weight: 850; }
.personal-wod-format label { position: relative; cursor: pointer; }
.personal-wod-format input { position: absolute; opacity: 0; }
.personal-wod-format span { display: grid; gap: 4px; min-height: 80px; align-content: center; border: 1px solid var(--line); border-radius: 15px; background: #111815; color: var(--text); padding: 13px 15px; font-weight: 900; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.personal-wod-format small { color: var(--muted); font-size: .76rem; font-weight: 700; }
.personal-wod-format input:checked + span { border-color: rgba(31, 224, 105, .7); background: rgba(31, 224, 105, .1); box-shadow: inset 0 0 0 1px rgba(31, 224, 105, .14); color: var(--green); }

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

.record-card {
  display: grid;
  gap: 8px;
}

.record-card span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 850;
}

.record-card strong {
  color: var(--green);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
}

.record-card p {
  color: var(--muted);
  line-height: 1.4;
}

.activity-list {
  margin-top: 18px;
}

.activity-list div,
.language-list button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #080d0c;
  padding: 14px;
}

.language-list {
  margin-top: 16px;
}

.language-list button {
  color: var(--text);
  text-align: left;
}

.exercise-stack {
  margin-top: 16px;
}

.exercise-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #080d0c;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.exercise-row:hover {
  border-color: rgba(32, 216, 97, 0.42);
  background: #0a1210;
}

.exercise-art,
.exercise-thumb,
.feed-photo {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(145deg, #16251f, #080d0c);
  color: var(--green);
  font-weight: 950;
}

.exercise-art {
  width: 70px;
  height: 70px;
  font-size: 1.05rem;
  object-fit: cover;
  object-position: center;
}

.exercise-row p,
.mini-feed span {
  color: var(--muted);
  margin-top: 4px;
}

.exercise-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.exercise-actions button {
  border: 0;
  background: transparent;
  font-weight: 850;
}

.exercise-actions .edit-exercise {
  color: var(--green);
}

.exercise-actions .delete-exercise {
  color: var(--danger);
}

.volume-summary,
.phone-volume-summary {
  border: 1px solid rgba(32, 216, 97, 0.18);
  border-radius: 8px;
  background: rgba(32, 216, 97, 0.06);
}

.volume-summary {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 13px;
}

.volume-summary div {
  display: grid;
  gap: 8px;
}

.volume-summary span,
.phone-volume-summary span {
  color: var(--muted);
  font-size: 0.84rem;
}

.volume-summary strong,
.phone-volume-summary strong {
  color: var(--text);
  margin-right: 8px;
}

.phone-volume-summary {
  display: grid;
  gap: 6px;
  padding: 10px;
}

.phone-volume-summary span {
  display: block;
}

.rm-block {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.rm-block > div:first-child p:last-child,
.empty-rm {
  color: var(--muted);
}

.empty-rm {
  border: 1px dashed #345348;
  border-radius: 8px;
  padding: 12px;
}

.rm-row {
  border-color: rgba(32, 216, 97, 0.26);
}

.phone-rm-block {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(32, 216, 97, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 10px;
}

.phone-rm-block.hidden-rm {
  display: none;
}

.phone-rm-block span {
  display: block;
  color: var(--muted);
  font-size: 0.84rem;
  margin-top: 2px;
}

.phone-preview {
  display: grid;
  place-items: center;
}

.phone {
  width: min(100%, 315px);
  min-height: 610px;
  border: 10px solid #010302;
  border-radius: 36px;
  background: #050706;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.phone-top {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  padding: 18px 20px 8px;
  font-size: 0.82rem;
  font-weight: 850;
}

.phone-content {
  padding: 18px;
}

.phone-content h3 {
  font-size: 1.7rem;
  margin: 6px 0 10px;
}

.wod-card {
  display: grid;
  gap: 12px;
  margin: 22px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.wod-card p {
  color: var(--muted);
}

#phoneExercises {
  display: grid;
  gap: 8px;
}

#phoneExercises strong {
  display: block;
}

.full {
  width: 100%;
}

.mini-feed {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.mini-feed div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #080d0c;
  padding: 13px;
}

.mini-feed strong,
.mini-feed span {
  display: block;
}

.loose {
  margin-bottom: 16px;
}

.library-toolbar {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 19, 17, 0.78);
  padding: 16px;
}

.library-search {
  color: var(--muted);
}

.filter-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.filter-chip {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #080d0c;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  padding: 9px 12px;
}

.filter-chip.active,
.filter-chip:hover {
  border-color: rgba(32, 216, 97, 0.55);
  background: var(--green-soft);
  color: var(--text);
}

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

.exercise-card {
  display: grid;
  grid-template-rows: 180px 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 19, 17, 0.93);
  padding: 0;
}

.exercise-thumb {
  height: 180px;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: #020403;
  font-size: 1.2rem;
  overflow: hidden;
}

.exercise-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.22s ease;
}

.exercise-card:hover .exercise-thumb img {
  transform: scale(1.04);
}

.exercise-card-body {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
}

.exercise-card p {
  color: var(--muted);
}

.exercise-meta {
  display: grid;
  gap: 8px;
}

.exercise-meta span {
  border: 1px solid rgba(32, 216, 97, 0.18);
  border-radius: 8px;
  background: rgba(32, 216, 97, 0.07);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 8px;
}

.exercise-card .secondary-inline {
  margin-top: 2px;
}

.empty-library {
  grid-column: 1 / -1;
  border: 1px dashed #345348;
  border-radius: 8px;
  background: rgba(13, 19, 17, 0.93);
  padding: 24px;
}

.empty-library p {
  color: var(--muted);
  margin-top: 8px;
}

.table-card {
  overflow-x: auto;
}

.member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.invite-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  border: 1px solid rgba(32, 216, 97, 0.18);
  border-radius: 8px;
  background: rgba(32, 216, 97, 0.06);
  padding: 16px;
}

.invite-card p {
  color: var(--muted);
  margin-top: 6px;
}

.invite-card code {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #050807;
  color: var(--green);
  font-size: 0.86rem;
  padding: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  min-width: 680px;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}

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

.table-head {
  color: var(--green);
  font-weight: 850;
}

.feed-post {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: center;
}

.feed-photo {
  height: 120px;
  font-size: 1.4rem;
}

.feed-photo.alt {
  color: #031207;
  background: linear-gradient(145deg, var(--green), var(--green-dark));
}

.wod-feed-post {
  display: block;
  padding: 18px;
  overflow: hidden;
  background: #050807;
}

.wod-post-header {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.wod-post-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--green);
  border-radius: 50%;
  background: #122019;
  color: #fff;
  font-weight: 900;
}

.wod-post-header strong {
  display: block;
  font-size: 1rem;
}

.wod-post-header p {
  margin-top: 2px;
  font-size: 0.82rem;
}

.post-menu {
  min-width: 40px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.2rem;
}

.wod-post-title {
  margin: 18px 0 14px;
}

.wod-post-title h3 {
  font-size: clamp(1.35rem, 3vw, 1.9rem);
}

.wod-post-title p {
  margin-top: 4px;
}

.wod-post-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
  border-block: 1px solid var(--line);
}

.wod-post-metrics div {
  display: grid;
  gap: 3px;
  padding: 13px 10px;
  text-align: center;
}

.wod-post-metrics div + div {
  border-left: 1px solid var(--line);
}

.wod-post-metrics span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.wod-post-metrics strong {
  font-size: 1.35rem;
}

.wod-result-visual {
  border: 1px solid rgba(32, 216, 97, 0.48);
  border-radius: 8px;
  overflow: hidden;
  background: #030605;
}

.wod-exercise-result {
  position: relative;
  display: grid;
  grid-template-columns: 30px 82px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 10px;
  min-height: 96px;
  padding: 10px 12px;
}

.wod-exercise-result + .wod-exercise-result {
  border-top: 1px solid var(--line);
}

.wod-exercise-result img {
  width: 82px;
  height: 72px;
  border-radius: 6px;
  background: #000;
  object-fit: cover;
}

.result-step,
.result-check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--green);
  border-radius: 50%;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 900;
}

.result-copy {
  min-width: 0;
}

.result-copy strong,
.result-copy span {
  display: block;
}

.result-copy span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
}

.wod-exercise-result > b {
  color: var(--green);
  font-size: 1.1rem;
  white-space: nowrap;
}

.effort-dots {
  display: flex;
  gap: 3px;
  margin-top: 8px;
}

.effort-dots i {
  width: 16px;
  height: 5px;
  border-radius: 999px;
  background: var(--green);
}

.effort-dots i.off {
  background: #27312d;
}

.wod-result-footer,
.wod-social-actions,
.reaction-summary {
  display: flex;
  align-items: center;
}

.wod-result-footer {
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-top: 1px solid rgba(32, 216, 97, 0.3);
  background: linear-gradient(90deg, rgba(32, 216, 97, 0.08), transparent);
}

.wod-result-footer > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.finish-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  color: #031207;
  font-weight: 950;
}

.pr-badge {
  border: 1px solid var(--green);
  border-radius: 8px;
  color: var(--green);
  font-weight: 950;
  padding: 8px 10px;
}

.wod-social-actions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.reaction-summary {
  margin-right: auto;
}

.reaction-summary > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: -8px;
  border: 2px solid #050807;
  border-radius: 50%;
  background: #173024;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
}

.reaction-summary strong {
  margin-left: 14px;
  font-size: 0.82rem;
}

.wod-social-actions button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0a1210;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 9px 10px;
}

.social-feed-demo {
  width: min(100%, 820px);
  margin-inline: auto;
  gap: 22px;
}

.social-feed-demo .wod-feed-post {
  border-color: rgba(32, 216, 97, 0.24);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.photo-avatar {
  overflow: hidden;
  background-color: #122019;
  background-repeat: no-repeat;
  background-size: 360px auto;
}

.marco-avatar {
  background-image: url("assets/bg-community.png");
  background-position: 66% 25%;
}

.laura-avatar {
  background-image: url("assets/hero-impulso.png");
  background-position: 77% 25%;
}

.verified-athlete {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-left: 3px;
  border-radius: 50%;
  background: var(--green);
  color: #031207;
  font-size: 0.68rem;
  vertical-align: 2px;
}

.wod-post-metrics span i {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  margin-right: 3px;
  border: 1px solid rgba(32, 216, 97, 0.42);
  border-radius: 50%;
  color: var(--green);
  font-style: normal;
}

.wod-social-actions .reaction-button.active {
  border-color: var(--green);
  background: rgba(32, 216, 97, 0.12);
  color: var(--green);
}

.reaction-summary strong b {
  color: var(--text);
}

.strength-result-visual {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(32, 216, 97, 0.46);
  border-radius: 12px;
  background: #020403;
}

.strength-result-visual > img {
  display: block;
  width: 100%;
  height: clamp(230px, 42vw, 360px);
  object-fit: cover;
  filter: saturate(0.9) contrast(1.08);
}

.strength-result-visual::after {
  content: "";
  position: absolute;
  inset: 0 0 92px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 36%, rgba(0, 0, 0, 0.88));
}

.strength-result-overlay {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: 118px;
  left: 20px;
  display: grid;
  gap: 2px;
}

.strength-result-overlay span {
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.strength-result-overlay strong {
  font-size: clamp(2.2rem, 8vw, 4rem);
  line-height: 1;
}

.strength-result-overlay small {
  color: #d2ded8;
  font-size: 0.84rem;
}

.pr-progress-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 16px 18px;
  border-top: 1px solid rgba(32, 216, 97, 0.32);
  background: rgba(3, 8, 6, 0.96);
}

.pr-progress-card > div:not(.pr-progress-track) {
  display: grid;
  gap: 4px;
}

.pr-progress-card span {
  color: var(--muted);
  font-size: 0.72rem;
}

.pr-progress-card strong {
  font-size: 0.94rem;
}

.pr-progress-card > div:last-child {
  text-align: right;
}

.pr-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #202925;
}

.pr-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green-dark), #6cff7f);
  box-shadow: 0 0 18px rgba(32, 216, 97, 0.55);
}

@media (max-width: 620px) {
  .wod-feed-post {
    padding: 14px;
  }

  .wod-exercise-result {
    grid-template-columns: 26px 60px minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 82px;
    padding: 9px 8px;
  }

  .wod-exercise-result img {
    width: 60px;
    height: 58px;
  }

  .result-check {
    display: none;
  }

  .result-step {
    width: 26px;
    height: 26px;
  }

  .result-copy span {
    font-size: 0.74rem;
  }

  .effort-dots {
    margin-top: 6px;
  }

  .effort-dots i {
    width: 11px;
  }

  .wod-exercise-result > b {
    font-size: 0.95rem;
  }

  .wod-result-footer,
  .wod-social-actions {
    align-items: stretch;
  }

  .wod-social-actions button {
    flex: 1 1 30%;
  }

  .reaction-summary {
    flex: 1 0 100%;
    margin-bottom: 4px;
  }

  .social-feed-demo .wod-feed-post {
    border-radius: 14px;
  }

  .strength-result-visual > img {
    height: 260px;
  }

  .strength-result-overlay {
    right: 14px;
    bottom: 108px;
    left: 14px;
  }

  .pr-progress-card {
    grid-template-columns: auto minmax(54px, 1fr) auto;
    gap: 9px;
    min-height: 82px;
    padding: 13px 12px;
  }

  .pr-progress-card span {
    font-size: 0.65rem;
  }

  .pr-progress-card strong {
    font-size: 0.82rem;
  }
}

.ranking-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 20px;
}

.daily-ranking-panel {
  position: relative;
  isolation: isolate;
  grid-column: 1 / -1;
  overflow: hidden;
  border-color: rgba(32, 216, 97, 0.3);
  background:
    radial-gradient(circle at 50% 42%, rgba(32, 216, 97, 0.16), transparent 28rem),
    linear-gradient(180deg, rgba(5, 9, 7, 0.96), rgba(2, 5, 4, 0.98));
  padding: clamp(18px, 3vw, 34px);
}

.daily-ranking-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(2, 5, 4, 0.66), rgba(2, 5, 4, 0.92)),
    url("assets/ranking-open-reference.jpeg") center 34% / cover;
  opacity: 0.3;
  filter: saturate(0.7);
}

.daily-ranking-header,
.ranking-brand-line,
.live-pill,
.daily-user-rank,
.athlete-ranking-preview-head,
.athlete-rank-position {
  display: flex;
  align-items: center;
}

.daily-ranking-header,
.athlete-ranking-preview-head,
.athlete-rank-position {
  justify-content: space-between;
}

.ranking-brand-line {
  gap: 11px;
}

.ranking-brand-line > strong {
  font-size: clamp(1.3rem, 2.8vw, 2rem);
}

.ranking-signal {
  display: flex;
  align-items: end;
  gap: 3px;
  height: 27px;
  transform: skewX(-8deg);
}

.ranking-signal i {
  width: 5px;
  border-radius: 2px;
  background: var(--green);
  box-shadow: 0 0 12px rgba(32, 216, 97, 0.45);
}

.ranking-signal i:nth-child(1) { height: 10px; }
.ranking-signal i:nth-child(2) { height: 19px; }
.ranking-signal i:nth-child(3) { height: 27px; }
.ranking-signal i:nth-child(4) { height: 15px; }

.live-pill {
  gap: 9px;
  border: 1px solid rgba(32, 216, 97, 0.5);
  border-radius: 999px;
  background: rgba(32, 216, 97, 0.09);
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 9px 14px;
  text-transform: uppercase;
}

.live-pill i,
.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px rgba(32, 216, 97, 0.8);
  animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
  50% { opacity: 0.45; transform: scale(0.78); }
}

.daily-ranking-title {
  margin: 24px auto 18px;
  text-align: center;
}

.daily-ranking-title h3 {
  margin: 3px 0;
  font-size: clamp(2.7rem, 8vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.daily-ranking-title h3 span {
  color: var(--green);
}

.daily-ranking-title > p:last-child {
  color: rgba(245, 255, 249, 0.72);
  font-size: clamp(1rem, 2vw, 1.35rem);
}

.ranking-open-chip {
  width: fit-content;
  margin: 0 auto 28px;
  border: 1px solid rgba(32, 216, 97, 0.44);
  border-radius: 999px;
  background: rgba(10, 19, 15, 0.82);
  color: rgba(245, 255, 249, 0.9);
  font-size: 0.83rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  padding: 11px 18px;
  text-transform: uppercase;
}

.ranking-open-chip span {
  margin-right: 8px;
  color: var(--green);
  letter-spacing: -0.35em;
}

.daily-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(8px, 2vw, 22px);
  width: min(860px, 100%);
  margin: 0 auto;
}

.daily-podium-athlete {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.podium-avatar,
.mini-ranking-avatar {
  background-image: url("assets/ranking-open-reference.jpeg");
  background-repeat: no-repeat;
  background-size: 360% auto;
}

.podium-avatar {
  width: clamp(82px, 13vw, 142px);
  aspect-ratio: 1;
  border: 3px solid rgba(245, 255, 249, 0.84);
  border-radius: 50%;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}

.place-one .podium-avatar {
  width: clamp(100px, 16vw, 174px);
  border-color: var(--green);
  box-shadow:
    0 0 0 6px rgba(32, 216, 97, 0.08),
    0 0 38px rgba(32, 216, 97, 0.35);
}

.avatar-ana { background-position: 19% 44%; }
.avatar-marco { background-position: 50% 37%; }
.avatar-jeroen { background-position: 82% 45%; }
.avatar-user { background-position: 50% 37%; }

.podium-medal {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: -20px;
  border: 3px solid rgba(0, 0, 0, 0.34);
  border-radius: 50%;
  color: #07100b;
  font-size: 1.25rem;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.medal-gold { background: linear-gradient(145deg, #fff0a6, #e4a914 65%, #9b6500); }
.medal-silver { background: linear-gradient(145deg, #f4f8fa, #aab6be 65%, #68747a); }
.medal-bronze { background: linear-gradient(145deg, #ffc28d, #bd6e38 65%, #693315); }

.daily-podium-athlete > strong {
  max-width: 100%;
  margin-top: 7px;
  overflow: hidden;
  font-size: clamp(0.8rem, 2vw, 1.12rem);
  text-overflow: ellipsis;
}

.daily-podium-athlete > b {
  margin: 3px 0 9px;
  font-size: clamp(1.2rem, 3.5vw, 2rem);
}

.podium-block {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 112px;
  border: 1px solid rgba(245, 255, 249, 0.18);
  border-radius: 14px 14px 5px 5px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), transparent),
    #080d0c;
  color: rgba(245, 255, 249, 0.5);
  font-size: clamp(2.4rem, 7vw, 5rem);
  font-weight: 950;
  box-shadow: inset 0 0 34px rgba(32, 216, 97, 0.05);
}

.place-one .podium-block {
  min-height: 178px;
  border-color: rgba(255, 212, 90, 0.5);
  color: #ffd45a;
}

.place-three .podium-block {
  min-height: 86px;
  border-color: rgba(200, 131, 75, 0.42);
  color: #c8834b;
}

.ranking-live-note {
  margin: 18px 0;
  color: rgba(245, 255, 249, 0.62);
  font-size: 0.9rem;
  text-align: center;
}

.ranking-live-note span {
  margin-right: 7px;
  color: var(--green);
}

.daily-user-rank {
  width: min(860px, 100%);
  margin: 0 auto;
  justify-content: flex-start;
  border-radius: 16px;
  background: rgba(7, 15, 11, 0.9);
}

.mini-ranking-avatar {
  display: block;
  width: 48px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border: 2px solid var(--green);
  border-radius: 50%;
}

.daily-user-rank > span {
  display: grid;
  gap: 2px;
  margin-right: auto;
  color: var(--muted);
}

.daily-user-rank > span strong {
  color: var(--text);
  font-size: 1.08rem;
}

.top-ten-list {
  display: grid;
  width: min(860px, 100%);
  gap: 7px;
  margin: 12px auto 0;
}

.top-ten-list > div {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(5, 10, 8, 0.9);
  padding: 11px 13px;
}

.top-ten-list > div > span {
  color: var(--green);
  font-weight: 950;
}

.top-ten-list small {
  color: var(--muted);
}

.top-ten-list .you {
  border-color: rgba(32, 216, 97, 0.55);
  background: rgba(32, 216, 97, 0.1);
}

.athlete-ranking-preview {
  align-self: start;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 28%, rgba(32, 216, 97, 0.17), transparent 14rem),
    rgba(8, 13, 12, 0.96);
}

.athlete-ranking-preview-head {
  gap: 12px;
}

.live-dot {
  display: block;
  flex: 0 0 auto;
}

.athlete-mini-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  margin: 20px 0;
}

.athlete-mini-podium > div {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  text-align: center;
}

.athlete-mini-podium .winner {
  transform: translateY(-12px);
}

.athlete-mini-podium .mini-ranking-avatar {
  width: 58px;
}

.athlete-mini-podium .winner .mini-ranking-avatar {
  width: 72px;
  box-shadow: 0 0 28px rgba(32, 216, 97, 0.25);
}

.athlete-mini-podium strong {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: -15px;
  border-radius: 50%;
  background: var(--green);
  color: #031207;
  z-index: 2;
}

.athlete-mini-podium small {
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
}

.athlete-rank-position {
  margin: 0 0 12px;
  border: 1px solid rgba(32, 216, 97, 0.32);
  border-radius: 10px;
  background: rgba(32, 216, 97, 0.07);
  padding: 12px;
}

.athlete-rank-position span {
  color: var(--muted);
}

@media (max-width: 680px) {
  .daily-ranking-panel {
    margin-inline: -4px;
    padding: 16px 12px;
  }

  .daily-ranking-title {
    margin-top: 20px;
  }

  .daily-ranking-title h3 {
    font-size: clamp(2.45rem, 13vw, 4rem);
  }

  .ranking-open-chip {
    max-width: 100%;
    margin-bottom: 22px;
    font-size: 0.7rem;
    padding-inline: 13px;
  }

  .daily-podium {
    gap: 6px;
  }

  .podium-avatar {
    width: clamp(70px, 24vw, 96px);
  }

  .place-one .podium-avatar {
    width: clamp(82px, 28vw, 112px);
  }

  .podium-medal {
    width: 38px;
    height: 38px;
    margin-top: -16px;
    font-size: 1rem;
  }

  .daily-podium-athlete > strong {
    font-size: 0.72rem;
  }

  .daily-podium-athlete > b {
    font-size: 1.08rem;
  }

  .podium-block {
    min-height: 72px;
    border-radius: 10px 10px 4px 4px;
  }

  .place-one .podium-block {
    min-height: 112px;
  }

  .place-three .podium-block {
    min-height: 56px;
  }

  .daily-user-rank {
    display: grid;
    grid-template-columns: 42px 1fr;
  }

  .daily-user-rank .mini-ranking-avatar {
    width: 42px;
  }

  .daily-user-rank button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.podium-panel {
  grid-row: span 2;
}

.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  margin: 22px 0;
}

.podium-place {
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #080d0c;
  min-height: 150px;
  padding: 18px 10px;
  text-align: center;
}

.podium-place span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #07100b;
  font-weight: 950;
}

.podium-place.gold {
  min-height: 190px;
}

.podium-place.gold span {
  background: #ffd45a;
}

.podium-place.silver span {
  background: #c9d2d8;
}

.podium-place.bronze span {
  background: #c8834b;
}

.rank-row,
.challenge-card,
.progress-list div,
.medal-stack > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #080d0c;
  padding: 14px;
}

.rank-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.rank-row.pinned {
  border-color: rgba(32, 216, 97, 0.42);
}

.medal {
  display: inline-flex;
  border-radius: 999px;
  color: #07100b;
  font-size: 0.82rem;
  font-weight: 950;
  margin-bottom: 8px;
  padding: 7px 10px;
}

.bronze-medal {
  background: #c8834b;
}

.silver-medal {
  background: #c9d2d8;
}

.gold-medal {
  background: #ffd45a;
}

.diamond-medal {
  color: #04100a;
  background: linear-gradient(135deg, #eaffff, #8dffd0 48%, #ffffff);
  box-shadow: 0 0 18px rgba(75, 255, 170, 0.16);
}

.medal-stack {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.medal-stack .medal-tier {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 100px;
  padding: 10px 12px 10px 8px;
  overflow: hidden;
}

.medal-tier img {
  width: 78px;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 10px 13px rgba(0, 0, 0, 0.5));
}

.medal-tier.is-current {
  border-color: rgba(32, 216, 97, 0.58);
  background: linear-gradient(100deg, rgba(32, 216, 97, 0.09), #080d0c 42%);
}

.medal-copy {
  min-width: 0;
}

.medal-copy .medal {
  margin-bottom: 5px;
}

.medal-copy strong {
  display: block;
  font-size: 0.92rem;
}

.medal-stack .medal-copy p {
  margin-top: 3px;
}

.tier-status,
.tier-lock {
  align-self: start;
  margin-top: 7px;
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
}

.tier-status {
  color: var(--green);
}

.tier-lock {
  color: #728079;
}

.diamond-tier img {
  filter: drop-shadow(0 8px 16px rgba(49, 255, 143, 0.23));
}

@media (max-width: 520px) {
  .medal-stack .medal-tier {
    grid-template-columns: 68px minmax(0, 1fr);
    min-height: 90px;
  }

  .medal-tier img {
    width: 68px;
  }

  .tier-status,
  .tier-lock {
    grid-column: 2;
    margin-top: -4px;
  }
}

.challenge-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
}

.challenge-card span {
  color: var(--green);
  font-weight: 950;
}

.progress-bar {
  height: 10px;
  border-radius: 999px;
  background: #06100b;
  margin: 12px 0;
  overflow: hidden;
}

.progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green-dark), var(--green));
}

.progress-list {
  margin-top: 14px;
}

.medal-stack p,
.progress-list p,
.challenge-card p {
  color: var(--muted);
  margin-top: 4px;
}

.name-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.exercise-modal,
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
}

.hidden-modal {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 3, 2, 0.78);
  backdrop-filter: blur(12px);
}

.modal-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  width: min(100%, 720px);
  max-height: min(92vh, 780px);
  overflow-y: auto;
  border: 1px solid rgba(32, 216, 97, 0.28);
  border-radius: 8px;
  background: #080d0c;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.58);
  padding: 18px;
}

.library-picker-panel {
  width: min(100%, 980px);
}

.auth-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  width: min(100%, 480px);
  max-height: min(92vh, 740px);
  overflow-y: auto;
  border: 1px solid rgba(32, 216, 97, 0.3);
  border-radius: 8px;
  background:
    radial-gradient(circle at top right, rgba(32, 216, 97, 0.16), transparent 16rem),
    #080d0c;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.62);
  padding: 18px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #050807;
  padding: 6px;
}

.auth-tabs button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
  padding: 11px 10px;
}

.auth-tabs button.active {
  background: var(--green);
  color: #031207;
}

.auth-form {
  display: none;
  gap: 14px;
}

.auth-form.active-auth-form {
  display: grid;
}

.auth-grid {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 12px;
}

.auth-form small,
.auth-hint {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.auth-form small.is-ok {
  color: var(--green);
}

.auth-hint.is-ok {
  color: var(--green);
}

.auth-form small.is-error,
.auth-hint.is-error {
  color: var(--danger);
}

.empty-state {
  padding: 24px 16px;
  color: var(--muted);
  text-align: center;
}

.athlete-wod-notification[hidden] {
  display: none;
}

.empty-state strong,
.empty-state h3 {
  color: var(--text);
}

.empty-state p {
  margin-top: 8px;
}

.password-mismatch {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #f87171;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  font-size: 13px;
  line-height: 1.5;
}

.password-mismatch[hidden] {
  display: none;
}

.auth-form input.password-invalid {
  border-color: #f87171;
}

.auth-form button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.auth-form .primary-action {
  width: 100%;
  justify-content: center;
}

.compact-toolbar {
  margin-bottom: 0;
}

.modal-library-list {
  display: grid;
  gap: 8px;
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 4px;
}

.exercise-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 76px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(4, 8, 7, 0.86);
  padding: 10px;
}

.exercise-select-row:hover {
  border-color: rgba(32, 216, 97, 0.46);
  background: #0b1210;
}

.exercise-select-info {
  min-width: 0;
}

.exercise-select-info h3 {
  overflow: hidden;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exercise-select-info p:not(.eyebrow),
.exercise-select-info span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exercise-select-info span {
  margin-top: 4px;
}

.exercise-select-thumb {
  width: 76px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #020403;
  object-fit: cover;
  object-position: center;
}

.modal-header,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.modal-exercise {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.modal-exercise img {
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #020403;
  object-fit: cover;
}

.modal-exercise h3 {
  font-size: 1.45rem;
}

.icon-button {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(17, 25, 23, 0.9);
  color: var(--text);
  font-size: 1rem;
  font-weight: 950;
}

.modal-note {
  border: 1px solid rgba(32, 216, 97, 0.2);
  border-radius: 8px;
  background: rgba(32, 216, 97, 0.08);
  color: var(--muted);
  line-height: 1.5;
  padding: 12px;
}

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

.modal-actions {
  justify-content: flex-end;
}

.modal-actions .secondary-action {
  width: auto;
  margin-top: 0;
  padding-inline: 18px;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  max-width: 320px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0c1412;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  padding: 14px 16px;
  transform: translateY(10px);
  transition: 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1080px) {
  .app-shell,
  .content-grid,
  .hero-section,
  .story-inner,
  .app-showcase {
    grid-template-columns: 1fr;
  }

  .app-showcase {
    min-height: auto;
  }

  .side-phone {
    margin-bottom: 0;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

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

  .metric-grid,
  .library-grid,
  .record-grid,
  .portal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .landing-shell {
    padding: 0;
  }

  .cinematic-landing {
    padding: 0;
  }

  .landing-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    position: absolute !important;
    top: calc(env(safe-area-inset-top) + 8px);
    width: calc(100% - 24px);
    border-color: rgba(32, 216, 97, 0.24);
    border-radius: 20px;
    background:
      radial-gradient(circle at top left, rgba(32, 216, 97, 0.24), transparent 38%),
      linear-gradient(135deg, rgba(8, 13, 12, 0.94), rgba(3, 8, 6, 0.82)),
      rgba(5, 7, 6, 0.86);
    backdrop-filter: blur(22px) saturate(1.35);
    box-shadow:
      0 18px 50px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(32, 216, 97, 0.06),
      inset 0 1px 0 rgba(245, 255, 249, 0.08);
    padding: 10px;
    transform: translate3d(-50%, 0, 0);
  }

  .landing-nav .brand {
    gap: 10px;
    margin-bottom: 0;
  }

  .landing-nav .brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(32, 216, 97, 0.26);
  }

  .landing-nav .eyebrow {
    font-size: 0.64rem;
    letter-spacing: 0.14em;
  }

  .landing-nav h1 {
    width: fit-content;
    background: linear-gradient(90deg, #ffffff, #b9ffcf 52%, var(--green));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 1.22rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
  }

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

  .landing-actions .ghost-action,
  .landing-actions .primary-action {
    display: grid;
    place-items: center;
    min-height: 42px;
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
    line-height: 1.1;
  }

  .landing-actions .ghost-action {
    background: rgba(9, 18, 15, 0.88);
  }

  .hero-cta {
    flex-direction: column;
  }

  .hero-proof {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .hero-proof::-webkit-scrollbar {
    display: none;
  }

  .story-panel {
    min-height: 100svh;
    padding: 140px 18px 44px;
  }

  .story-panel::before {
    inset: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 86%;
    filter: saturate(1.1) contrast(1.02) brightness(1.08);
    animation: none;
    transform: none;
  }

  .bg-hero::before {
    background-position: 58% center;
    background-size: auto 88%;
  }

  .bg-coach::before {
    background-position: 64% center;
    background-size: auto 84%;
  }

  .bg-community::before,
  .bg-progress::before {
    background-size: auto 86%;
  }

  .story-panel::after {
    background:
      linear-gradient(90deg, rgba(2, 4, 3, 0.82) 0%, rgba(2, 4, 3, 0.54) 60%, rgba(2, 4, 3, 0.2)),
      linear-gradient(0deg, rgba(2, 4, 3, 0.92), transparent 44%, rgba(2, 4, 3, 0.42));
  }

  .story-copy h2 {
    max-width: 100%;
    font-size: clamp(2.35rem, 10.6vw, 3.45rem);
    line-height: 0.96;
    overflow-wrap: normal;
    text-wrap: balance;
    text-shadow: 0 12px 34px rgba(0, 0, 0, 0.58);
  }

  .story-copy p:not(.eyebrow) {
    font-size: 1rem;
    line-height: 1.55;
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.72);
  }

  .story-card {
    margin-top: 18px;
  }

  .achievement-preview-card {
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 14px;
    padding: 14px;
  }

  .achievement-preview-copy strong {
    font-size: 1.08rem;
  }

  .achievement-preview-copy span {
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .achievement-preview-visual {
    border-radius: 13px;
  }

  .feed-showcase-card {
    justify-self: center;
    width: min(100%, 390px);
    margin-top: 20px;
    border-radius: 16px;
  }

  .feed-showcase-card figcaption {
    position: static;
    border-width: 1px 0 0;
    border-radius: 0;
    background: rgba(3, 6, 4, 0.96);
  }

  .app-showcase {
    gap: 12px;
    margin-top: 26px;
  }

  .app-phone {
    min-height: auto;
    border-width: 7px;
    border-radius: 28px;
    transform: none;
  }

  .side-phone {
    display: none;
  }

  .app-screen {
    gap: 10px;
    padding: 16px;
  }

  .app-screen h3 {
    font-size: 1.45rem;
  }

  .exercise-preview-card {
    position: static;
    width: 100%;
    grid-template-columns: 72px 1fr;
  }

  .exercise-preview-card img {
    width: 72px;
    height: 72px;
  }

  .hero-section {
    min-height: auto;
    padding: 38px 0 24px;
  }

  .hero-copy h2 {
    font-size: clamp(2.1rem, 14vw, 3.35rem);
  }

  .hero-media,
  .hero-media img {
    min-height: 390px;
  }

  .dashboard,
  .sidebar {
    padding: 18px;
  }

  .app-header {
    min-height: 68px;
    padding: 10px 14px;
  }

  .app-header-brand .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .app-header-brand strong {
    display: none;
  }

  .app-back-button {
    min-height: 44px;
    padding: 10px 13px;
  }

  .topbar,
  .panel-header,
  .loose {
    align-items: stretch;
    flex-direction: column;
  }

  .member-actions,
  .member-actions button,
  .client-builder-actions .ghost-action,
  .client-builder-actions .primary-action {
    width: 100%;
  }

  .nav-list,
  .metric-grid,
  .form-grid,
  .config-grid,
  .invite-card,
  .library-grid,
  .portal-grid,
  .record-grid,
  .ranking-layout,
  .podium,
  .exercise-row,
  .feed-post,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .exercise-art {
    width: 100%;
  }

  .exercise-modal,
  .auth-modal {
    align-items: end;
    padding: 10px;
  }

  .modal-panel,
  .auth-panel {
    max-height: 90vh;
    border-radius: 8px 8px 0 0;
  }

  .auth-grid,
  .modal-header,
  .modal-actions,
  .modal-exercise {
    align-items: stretch;
    flex-direction: column;
  }

  .modal-exercise img {
    width: 100%;
    height: 210px;
  }

  .modal-library-list {
    max-height: 58vh;
  }

  .exercise-select-row {
    grid-template-columns: minmax(0, 1fr) 70px;
  }

  .exercise-select-row .secondary-inline {
    grid-column: 1 / -1;
    order: 3;
    width: 100%;
  }

  .exercise-select-thumb {
    width: 70px;
    height: 62px;
  }

  .modal-actions .secondary-action,
  .modal-actions .primary-action {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .builder-panel-header {
    align-items: center;
    flex-direction: row;
  }
}

/* Mobile app navigation: final overrides keep the dashboard compact. */
@media (max-width: 1080px) {
  .app-shell {
    display: block;
  }

  .mobile-menu-toggle {
    display: inline-flex;
  }

  .sidebar {
    position: fixed;
    z-index: 90;
    inset: 0 0 0 auto;
    width: min(86vw, 390px);
    height: 100dvh;
    overflow-y: auto;
    padding: max(18px, env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid rgba(31, 224, 105, 0.24);
    background: rgba(3, 10, 7, 0.98);
    box-shadow: -24px 0 70px rgba(0, 0, 0, 0.52);
    transform: translateX(105%);
    transition: transform 220ms ease;
  }

  .app-shell.mobile-menu-open .sidebar {
    transform: translateX(0);
  }

  .drawer-header {
    display: flex;
  }

  .sidebar .nav-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .sidebar [data-mobile-primary] {
    display: none;
  }

  .mobile-menu-backdrop {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: block;
    visibility: hidden;
    border: 0;
    opacity: 0;
    background: rgba(0, 0, 0, 0.68);
    transition: opacity 220ms ease, visibility 220ms ease;
  }

  .app-shell.mobile-menu-open .mobile-menu-backdrop {
    visibility: visible;
    opacity: 1;
  }

  .dashboard {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 70;
    right: 14px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .dashboard {
    padding: 18px 18px calc(108px + env(safe-area-inset-bottom));
  }

  .sidebar {
    padding: max(18px, env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
  }

  .mobile-bottom-nav {
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 8px;
  }

  .athlete-library-head { align-items: flex-start; }
  .athlete-library-head h3 { font-size: 1.95rem; line-height: 1.05; }
  .athlete-library-head > div:first-child > p:last-child { font-size: .88rem; }
  .library-icon-button,
  .library-add-button { width: 46px; height: 46px; border-radius: 14px; }
  .wod-suggestion-card { align-items: flex-start; min-height: 0; padding: 15px; }
  .suggestion-icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 13px; }
  .wod-suggestion-card > button { align-self: center; padding: 9px 11px; }
  .private-wod-row { min-height: 96px; padding: 10px; }
  .private-wod-row img { flex-basis: 82px; width: 82px; height: 72px; }
  .private-wod-row h4 { font-size: 1rem; }
  .private-wod-row p { font-size: .82rem; }
  .client-sheet-panel { padding-inline: 16px; }

  .personal-exercise-topbar {
    grid-template-columns: 46px 1fr 46px;
    min-height: 82px;
    padding-inline: 14px;
  }

  .personal-exercise-topbar h2 { font-size: 1.22rem; }
  .personal-exercise-brand { display: none; }
  .personal-exercise-form { width: min(100% - 28px, 540px); padding-top: 22px; }
  .personal-wod-form { width: min(100% - 28px, 540px); padding-top: 22px; }
  .personal-exercise-intro { max-width: 340px; margin-bottom: 20px; font-size: .9rem; }
  .personal-exercise-image { width: 164px; margin-bottom: 28px; }
  .personal-exercise-fields { grid-template-columns: 1fr; gap: 17px; }
  .personal-field:first-child,
  .personal-field:nth-child(2) { grid-column: auto; }
  .personal-field input,
  .personal-field select { min-height: 56px; }
}

/* Impulso public landing — one continuous mobile-first story */
.impulso-home {
  --home-green: #22e56a;
  --home-ink: #020504;
  padding: 0;
  overflow: clip;
  background: var(--home-ink);
  color: #f7faf8;
}

.home-nav {
  position: absolute;
  z-index: 5;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  width: min(1220px, calc(100% - 52px));
  align-items: center;
  justify-content: space-between;
  transform: translateX(-50%);
}

.home-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 850;
  letter-spacing: -0.045em;
  text-decoration: none;
}

.home-brand-mark {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 15px;
  background: var(--home-green);
  box-shadow: 0 8px 30px rgba(34, 229, 106, 0.22);
}

.home-brand-mark i {
  display: block;
  width: 4px;
  border-radius: 4px;
  background: #04150b;
  transform: skew(-10deg);
}

.home-brand-mark i:nth-child(1) { height: 12px; }
.home-brand-mark i:nth-child(2) { height: 23px; }
.home-brand-mark i:nth-child(3) { height: 30px; }
.home-brand-mark i:nth-child(4) { height: 18px; }

.home-login,
.home-coach-link {
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
}

.home-login {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(5, 8, 7, 0.46);
  backdrop-filter: blur(12px);
}

.home-hero {
  position: relative;
  display: flex;
  min-height: min(900px, 100svh);
  align-items: center;
  overflow: hidden;
  padding: 126px max(7vw, calc((100vw - 1220px) / 2)) 170px;
  isolation: isolate;
}

.home-hero-image,
.home-closer-image {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-position: 68% center;
  background-size: cover;
}

.home-hero-image {
  background-image: url("assets/hero-impulso.png");
}

.home-hero::after,
.home-closer::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(1, 4, 3, 0.9) 0%, rgba(1, 4, 3, 0.66) 42%, rgba(1, 4, 3, 0.12) 100%),
    linear-gradient(0deg, #020504 0%, transparent 28%, rgba(1, 4, 3, 0.16) 100%);
}

.home-hero-copy {
  width: min(760px, 100%);
  margin-top: 28px;
}

.home-eyebrow {
  color: var(--home-green);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.19em;
  line-height: 1.4;
  text-transform: uppercase;
}

.home-hero h1 {
  max-width: 740px;
  margin: 18px 0 22px;
  font-size: clamp(3.5rem, 8vw, 7.4rem);
  font-weight: 880;
  letter-spacing: -0.065em;
  line-height: 0.94;
  text-wrap: balance;
}

.home-hero-copy > p:not(.home-eyebrow) {
  max-width: 530px;
  color: rgba(245, 250, 247, 0.82);
  font-size: clamp(1.1rem, 2vw, 1.42rem);
  line-height: 1.55;
}

.home-primary {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
  padding: 0 27px;
  border: 0;
  border-radius: 14px;
  background: var(--home-green);
  box-shadow: 0 12px 34px rgba(34, 229, 106, 0.2);
  color: #041209;
  cursor: pointer;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 850;
  text-decoration: none;
  transition: transform 160ms ease, filter 160ms ease;
}

.home-primary:hover { filter: brightness(1.08); transform: translateY(-2px); }
.home-primary:focus-visible,
.home-login:focus-visible,
.home-coach-link:focus-visible { outline: 3px solid #b4ffca; outline-offset: 4px; }

.hero-scroll-hint {
  position: absolute;
  right: 7vw;
  bottom: 62px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.84rem;
  text-decoration: none;
}

.home-community {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100% - 48px));
  margin: -104px auto 0;
  padding: 30px 0 100px;
  scroll-margin-top: 22px;
}

.home-section-heading {
  max-width: 680px;
  margin: 0 auto 28px;
  text-align: center;
}

.home-section-heading h2,
.home-closer h2 {
  margin: 10px 0;
  font-size: clamp(2rem, 5.4vw, 3.55rem);
  font-weight: 850;
  letter-spacing: -0.05em;
  line-height: 1.02;
  text-wrap: balance;
}

.home-section-heading > p:last-child {
  color: #a8b4ae;
  font-size: 1.05rem;
  line-height: 1.5;
}

.home-post-card {
  overflow: hidden;
  border: 1px solid rgba(191, 219, 204, 0.16);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(15, 23, 20, 0.98), rgba(5, 9, 7, 0.98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.46), 0 0 50px rgba(34, 229, 106, 0.055);
  padding: clamp(16px, 3vw, 28px);
}

.home-post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 16px;
}

.home-avatar {
  display: inline-block;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 2px solid rgba(34, 229, 106, 0.68);
  border-radius: 50%;
  background-image: url("assets/ranking-open-reference.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 3px rgba(34, 229, 106, 0.08);
}

.home-avatar-ana { background-image: url("assets/avatar-ana.webp"); }
.home-avatar-leo { background-image: url("assets/avatar-leo.webp"); }
.home-avatar-sofia { background-image: url("assets/avatar-sofia.webp"); }
.home-avatar-diego { background-image: url("assets/avatar-diego.webp"); }

.home-post-identity { display: grid; gap: 3px; }
.home-post-identity strong { font-size: 1rem; }
.home-post-identity small { color: #9aa9a1; font-size: 0.83rem; }
.home-post-menu { margin-left: auto; color: #a4b0aa; font-size: 1.7rem; letter-spacing: 0.08em; }

.home-post-photo {
  min-height: clamp(190px, 37vw, 330px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent 52%), url("assets/hero-impulso.png");
  background-position: center, 72% 48%;
  background-size: cover;
}

.home-post-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.home-post-stats > div {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  column-gap: 7px;
  padding: 0 12px;
}

.home-post-stats > div + div { border-left: 1px solid rgba(255, 255, 255, 0.13); }
.home-stat-icon { grid-row: span 2; color: var(--home-green); font-size: 1.45rem; }
.home-post-stats strong { font-size: clamp(0.92rem, 2.2vw, 1.3rem); }
.home-post-stats small { color: #9ba9a2; font-size: 0.77rem; }

.home-top-three { padding-top: 20px; }
.home-top-three-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.home-top-three-title h3 { color: var(--home-green); font-size: 1.1rem; }
.home-top-three-title span { color: #99a7a0; font-size: 0.72rem; }

.home-podium-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  margin-top: 18px;
}

.home-podium-entry {
  display: flex;
  min-width: 0;
  min-height: 114px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(197, 218, 206, 0.13);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  padding: 12px 7px;
  text-align: center;
}

.home-podium-entry > span:last-child { display: grid; min-width: 0; gap: 3px; }
.home-podium-entry strong { overflow: hidden; max-width: 100%; font-size: clamp(0.7rem, 1.7vw, 0.9rem); text-overflow: ellipsis; white-space: nowrap; }
.home-podium-entry small { color: #a6b2ab; font-size: 0.8rem; }
.home-podium-entry .home-avatar { width: 42px; height: 42px; background-size: cover; background-position: center; }
.home-podium-entry.podium-winner { min-height: 128px; border-color: rgba(34, 229, 106, 0.5); background: rgba(34, 229, 106, 0.06); }

.podium-medal {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  color: #151713;
  font-size: 0.82rem;
  font-weight: 900;
}
.gold-medal { background: linear-gradient(145deg, #fff1a5, #e8ab23 64%, #a56609); }
.silver-medal { background: linear-gradient(145deg, #fff, #aebbc2 65%, #67747c); }
.bronze-medal { background: linear-gradient(145deg, #f9c99d, #be7440 65%, #744120); }

.home-live-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 15px 0 0;
  color: #a2afa8;
  font-size: 0.78rem;
}
.home-live-note span { width: 7px; height: 7px; border-radius: 50%; background: var(--home-green); box-shadow: 0 0 12px var(--home-green); }

.home-post-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  color: #d7e1db;
  font-size: 0.87rem;
}
.home-post-actions > span { color: var(--home-green); font-size: 1.4rem; }
.home-post-actions button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 0 15px;
  border: 1px solid rgba(34, 229, 106, 0.32);
  border-radius: 999px;
  background: rgba(34, 229, 106, 0.1);
  color: var(--home-green);
  font: inherit;
  font-weight: 750;
}

.home-community-note {
  margin: 32px 0 0;
  color: #f2f8f4;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 820;
  letter-spacing: -0.045em;
  text-align: center;
}

.home-closer {
  position: relative;
  display: grid;
  min-height: 540px;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: 80px 24px max(80px, env(safe-area-inset-bottom));
  text-align: center;
}
.home-closer-image { background-image: url("assets/bg-progress.png"); background-position: center 55%; }
.home-closer::after { background: linear-gradient(90deg, rgba(1, 4, 3, 0.83), rgba(1, 4, 3, 0.45)), linear-gradient(0deg, rgba(1, 4, 3, 0.55), transparent); }
.home-closer-content { width: min(680px, 100%); }
.home-brand-mark-large { width: 58px; height: 58px; margin-bottom: 12px; }
.home-closer .home-eyebrow { margin-bottom: 14px; }
.home-closer h2 { margin: 0 auto; font-size: clamp(2.4rem, 6.8vw, 4.4rem); }
.home-closer .home-primary { min-width: min(340px, 100%); margin-top: 28px; }
.home-coach-link { display: block; margin: 16px auto 0; color: rgba(255, 255, 255, 0.77); font-size: 0.9rem; text-decoration: underline; text-underline-offset: 4px; }

body.how-open { overflow: hidden; }

.how-it-works-modal {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: block;
  background: #050706;
}

.how-it-works-modal.hidden-modal { display: none; }

.how-panel {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #050706;
  outline: none;
}

.how-hero { position: relative; min-height: 520px; overflow: hidden; isolation: isolate; background: url("assets/bg-coach.png") 68% 43% / cover no-repeat; }
.how-hero::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(2, 5, 4, 0.93), rgba(2, 5, 4, 0.72) 47%, rgba(2, 5, 4, 0.12)), linear-gradient(0deg, #050706, transparent 38%); content: ""; }
.how-header { display: flex; width: min(100% - 48px, 1200px); align-items: center; justify-content: space-between; margin: 0 auto; padding-top: max(22px, env(safe-area-inset-top)); }
.how-close { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(245, 255, 249, 0.27); border-radius: 50%; background: rgba(4, 10, 7, 0.68); color: #f5fff9; cursor: pointer; font-size: 1.7rem; }
.how-hero-copy { width: min(100% - 48px, 1200px); margin: clamp(80px, 13vh, 150px) auto 0; padding-bottom: 90px; }
.how-hero-copy h2 { max-width: 720px; margin: 0; font-size: clamp(3.5rem, 8vw, 6.6rem); font-weight: 900; letter-spacing: -0.07em; line-height: 0.94; text-wrap: balance; }
.how-hero-copy h2 span { display: block; color: var(--home-green); }
.how-hero-copy p { margin: 20px 0 0; color: rgba(245, 250, 247, 0.83); font-size: clamp(1.1rem, 2.5vw, 1.55rem); line-height: 1.4; }
.how-steps { position: relative; width: min(100%, 1120px); margin: 0 auto; padding: 4px 0 20px; }
.how-steps::before { position: absolute; top: 30px; bottom: 45px; left: 54px; width: 2px; background: linear-gradient(var(--home-green), rgba(34, 229, 106, 0.24)); content: ""; }
.how-step { position: relative; display: grid; grid-template-columns: 64px minmax(0, 0.85fr) minmax(360px, 1.15fr); align-items: center; gap: 24px; padding: 34px 34px 38px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.how-step-number { z-index: 1; display: grid; width: 48px; height: 48px; place-items: center; border: 2px solid var(--home-green); border-radius: 50%; background: #050706; box-shadow: 0 0 18px rgba(34, 229, 106, 0.15); color: var(--home-green); font-size: 1rem; font-weight: 900; }
.how-step-copy { align-self: center; }
.how-step h3 { margin: 0 0 14px; font-size: clamp(1.55rem, 3vw, 2.25rem); font-weight: 850; letter-spacing: -0.045em; line-height: 1.06; }
.how-step p { max-width: 370px; margin: 0; color: #bcc7c1; font-size: 1rem; line-height: 1.55; }
.how-preview { min-width: 0; border: 1px solid rgba(204, 229, 214, 0.16); border-radius: 19px; background: linear-gradient(145deg, rgba(13, 21, 17, 0.98), rgba(5, 10, 7, 0.98)); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34); padding: 17px; }
.how-preview-top { display: flex; align-items: center; gap: 9px; color: #d6e1da; font-size: 0.86rem; }
.how-app-glyph { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; background: rgba(34, 229, 106, 0.13); color: var(--home-green); font-weight: 900; }
.how-preview-state { margin-left: auto; color: var(--home-green); font-size: 0.65rem; font-weight: 850; letter-spacing: 0.12em; }
.how-workout-title { display: block; margin-top: 12px; font-size: 1.25rem; }
.how-workout-format { display: block; margin: 3px 0 12px; color: #9baaa2; font-size: 0.88rem; }
.how-workout-row { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid rgba(255, 255, 255, 0.065); border-radius: 11px; background: rgba(255, 255, 255, 0.025); padding: 8px 12px; margin-top: 8px; color: #e0e8e3; font-size: 0.94rem; }
.how-workout-row > span { display: flex; align-items: center; gap: 10px; }
.how-workout-row i { display: grid; width: 24px; place-items: center; color: var(--home-green); font-size: 1.1rem; font-style: normal; }
.how-workout-row strong { color: #f5fff9; font-weight: 750; }
.how-mock-button { display: block; width: 100%; min-height: 42px; margin-top: 14px; border: 0; border-radius: 10px; background: var(--home-green); color: #031008; font: inherit; font-weight: 850; pointer-events: none; }
.how-share-divider { display: flex; align-items: center; gap: 10px; margin: 13px 0 10px; color: #9baaa2; font-size: 0.77rem; white-space: nowrap; }
.how-share-divider::before,.how-share-divider::after { height: 1px; flex: 1; background: rgba(255,255,255,.12); content: ""; }
.how-share-row { display: flex; align-items: center; gap: 10px; min-height: 58px; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: rgba(255,255,255,.025); padding: 8px 11px; color: #e4ece7; font-size: 0.85rem; line-height: 1.35; }
.how-share-code { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(34, 229, 106, 0.28); border-radius: 10px; background: rgba(34,229,106,.08); color: var(--home-green); font-size: 1.45rem; font-weight: 900; }
.how-share-row > span:nth-child(2) { display: grid; gap: 3px; }
.how-share-row strong { font-size: .86rem; }
.how-share-row small { color: #9baaa2; font-size: 0.78rem; }
.how-share-row > b { margin-left: auto; color: #c7d2cb; font-size: 1.5rem; font-weight: 400; }
.how-phone-preview { position: relative; width: min(100%, 410px); justify-self: center; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 30px; padding: 25px 18px 18px; background: linear-gradient(160deg, #101613, #060a08); box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.55), 0 24px 55px rgba(0, 0, 0, 0.4); }
.how-phone-notch { position: absolute; top: 8px; left: 50%; width: 82px; height: 17px; transform: translateX(-50%); border-radius: 99px; background: #020403; }
.how-phone-top { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; color: #bac6bf; font-size: 0.88rem; }
.how-phone-top strong { color: #f5fff9; font-size: 0.9rem; }
.how-phone-wod { display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 12px; background: #101714; }
.how-exercise-thumb { width: 56px; height: 52px; flex: 0 0 auto; border-radius: 8px; background: url("assets/hero-impulso.png") 76% center / cover; }
.how-phone-wod > span:last-child { display: grid; gap: 4px; }
.how-phone-wod strong { font-size: 0.88rem; }
.how-phone-wod small { color: #9baaa2; font-size: 0.8rem; }
.how-result-field { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; border: 1px solid rgba(255,255,255,.065); border-radius: 11px; background: rgba(255,255,255,.025); padding: 6px 9px; color: #c8d1cc; font-size: 0.9rem; }
.how-result-field span { display: flex; align-items: center; gap: 9px; }
.how-result-field i,.how-add-photo i { color: var(--home-green); font-size: 1.1rem; font-style: normal; }
.how-result-field strong { min-width: 86px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; background: #101714; padding: 8px 11px; color: #fff; font-size: 0.9rem; }
.how-add-photo { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; border: 1px solid rgba(255,255,255,.065); border-radius: 11px; background: rgba(255,255,255,.025); padding: 6px 9px; color: #c8d1cc; font-size: 0.84rem; }
.how-add-photo > span:first-child { display: flex; align-items: center; gap: 7px; }
.how-add-photo small { color: #9baaa2; font-size: 0.76rem; }
.how-photo-add { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px dashed rgba(255,255,255,.3); border-radius: 9px; color: #f4fff8; font-size: 1.3rem; }
.how-feed-preview { padding: 13px; }
.how-feed-head { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; }
.how-feed-head img { width: 38px; height: 38px; border: 2px solid var(--home-green); border-radius: 50%; object-fit: cover; }
.how-feed-head > span { display: grid; gap: 3px; }
.how-feed-head strong { font-size: 0.88rem; }
.how-feed-head small { color: #a8b4ae; font-size: 0.76rem; }
.how-feed-head > b { margin-left: auto; color: #a8b4ae; font-size: 1.3rem; }
.how-feed-photo { min-height: 180px; border-radius: 12px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.14), transparent), url("assets/hero-impulso.png") 76% 48% / cover; }
.how-feed-stats { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 11px; }
.how-feed-stats span { display: grid; justify-items: center; gap: 3px; border-right: 1px solid rgba(255, 255, 255, 0.11); }
.how-feed-stats span:last-child { border-right: 0; }
.how-feed-stats b { font-size: 0.88rem; }
.how-feed-stats small { color: #a8b4ae; font-size: 0.74rem; }
.how-impulses { display: flex; align-items: center; gap: 7px; margin-top: 11px; border-radius: 9px; background: rgba(34, 229, 106, 0.11); padding: 9px 11px; color: var(--home-green); font-size: 0.86rem; }
.how-impulses strong { color: #e9f5ee; }
.how-impulses span { margin-left: auto; color: #a8b4ae; font-size: 0.8rem; }
.how-mini-ranking { margin-top: 11px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 11px; padding: 10px; }
.how-mini-ranking-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.how-mini-ranking-title strong { color: var(--home-green); font-size: 0.88rem; }
.how-mini-ranking-title span { color: #a8b4ae; font-size: 0.74rem; }
.how-mini-podium { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.how-mini-podium > div { display: grid; justify-items: center; gap: 5px; min-width: 0; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 9px; padding: 8px 3px; }
.how-mini-podium > .how-mini-winner { border-color: rgba(34, 229, 106, 0.48); background: rgba(34, 229, 106, 0.05); }
.how-mini-podium img { width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; object-fit: cover; }
.how-mini-medal { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #101410; font-size: 0.72rem; font-weight: 900; }
.how-mini-podium strong { max-width: 100%; overflow: hidden; color: #eaf2ed; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.how-mini-podium small { color: #a8b4ae; font-size: 0.74rem; }
.how-footer { position: relative; z-index: 0; display: grid; justify-items: center; gap: 18px; min-height: 360px; align-content: center; isolation: isolate; overflow: hidden; padding: 54px 24px max(60px, env(safe-area-inset-bottom)); background: url("assets/bg-progress.png") center 62% / cover; text-align: center; }
.how-footer::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, #050706 0%, rgba(5,7,6,.86) 22%, rgba(2,5,4,.77) 100%); content: ""; }
.how-footer-content { display: grid; width: min(100%, 420px); justify-items: center; }
.how-footer-kicker { margin: 0 0 12px; color: var(--home-green); font-size: .7rem; font-weight: 900; letter-spacing: .18em; }
.how-footer h3 { margin: 0; color: #f7fbf8; font-size: clamp(2.15rem, 7vw, 3.4rem); letter-spacing: -0.06em; line-height: 1; }
.how-footer-content > p:not(.how-footer-kicker) { max-width: 320px; margin: 14px 0 0; color: #c1ccc5; font-size: .96rem; line-height: 1.5; }
.how-footer .home-primary { width: min(100%, 340px); margin: 24px 0 0; }
.how-footer-primary { position: relative; z-index: 1; border: 1px solid rgba(255,255,255,.28); background: linear-gradient(130deg, #1eea70, #47fa91); box-shadow: 0 14px 40px rgba(34,229,106,.3); }
.how-return { position: relative; z-index: 1; border: 0; background: transparent; color: #e3ebe6; cursor: pointer; font: inherit; font-size: 0.92rem; padding: 8px 14px; text-decoration: underline; text-underline-offset: 4px; }
.how-close:focus-visible,
.how-return:focus-visible { outline: 3px solid #b4ffca; outline-offset: 3px; }

@media (max-width: 680px) {
  .home-nav { top: max(14px, env(safe-area-inset-top)); width: calc(100% - 36px); }
  .home-brand { gap: 10px; font-size: 1.32rem; }
  .home-brand-mark { width: 42px; height: 42px; border-radius: 13px; }
  .home-brand-mark i { width: 3.5px; }
  .home-login { min-height: 42px; padding: 0 16px; font-size: 0.9rem; }
  .home-hero { min-height: max(740px, 100svh); align-items: flex-start; padding: clamp(210px, 29vh, 270px) 24px 185px; }
  .home-hero-image { background-position: 64% center; background-size: auto 100%; }
  .home-hero::after { background: linear-gradient(90deg, rgba(1, 4, 3, 0.76), rgba(1, 4, 3, 0.36) 65%, rgba(1, 4, 3, 0.18)), linear-gradient(0deg, #020504 0%, transparent 34%, rgba(1, 4, 3, 0.42) 100%); }
  .home-hero-copy { margin-top: 0; }
  .home-eyebrow { font-size: 0.68rem; letter-spacing: 0.16em; }
  .home-hero h1 { max-width: 590px; margin: 14px 0 16px; font-size: clamp(3.25rem, 12.5vw, 5.2rem); line-height: 0.96; letter-spacing: -0.065em; }
  .home-hero-copy > p:not(.home-eyebrow) { max-width: 420px; font-size: 1rem; line-height: 1.5; }
  .home-primary { width: 100%; min-height: 56px; margin-top: 22px; border-radius: 12px; font-size: 1rem; }
  .hero-scroll-hint { display: none; }
  .home-community { width: calc(100% - 28px); margin-top: -130px; padding: 22px 0 62px; }
  .home-section-heading { margin-bottom: 20px; text-align: left; }
  .home-section-heading h2 { font-size: 2rem; }
  .home-section-heading > p:last-child { max-width: 340px; font-size: 0.95rem; }
  .home-post-card { border-radius: 21px; padding: 14px; }
  .home-post-photo { min-height: 210px; border-radius: 14px; background-position: center, 74% center; }
  .home-post-stats { padding: 15px 0; }
  .home-post-stats > div { grid-template-columns: 22px 1fr; column-gap: 4px; padding: 0 7px; }
  .home-stat-icon { font-size: 1.15rem; }
  .home-post-stats strong { font-size: 0.88rem; }
  .home-post-stats small { font-size: 0.69rem; }
  .home-top-three { padding-top: 16px; }
  .home-top-three-title { align-items: flex-start; flex-direction: column; gap: 4px; }
  .home-top-three-title h3 { font-size: 1rem; }
  .home-top-three-title span { font-size: 0.67rem; }
  .home-podium-list { gap: 6px; margin-top: 13px; }
  .home-podium-entry { min-height: 112px; gap: 5px; border-radius: 13px; padding: 9px 4px; }
  .home-podium-entry.podium-winner { min-height: 122px; }
  .home-podium-entry .home-avatar { width: 36px; height: 36px; }
  .home-podium-entry strong { font-size: 0.63rem; }
  .home-podium-entry small { font-size: 0.72rem; }
  .podium-medal { width: 24px; height: 24px; font-size: 0.72rem; }
  .home-live-note { margin-top: 12px; font-size: 0.7rem; }
  .home-post-actions { gap: 6px; margin-top: 14px; font-size: 0.76rem; }
  .home-post-actions button { min-height: 37px; gap: 5px; padding: 0 10px; font-size: 0.72rem; }
  .home-community-note { margin-top: 25px; font-size: 1.8rem; }
  .home-closer { min-height: 560px; padding: 74px 22px max(60px, env(safe-area-inset-bottom)); }
  .home-closer-image { background-position: 64% center; background-size: auto 100%; }
  .home-closer::after { background: linear-gradient(180deg, rgba(1, 4, 3, 0.44), rgba(1, 4, 3, 0.72)), linear-gradient(0deg, rgba(1, 4, 3, 0.34), transparent 65%); }
  .how-hero { min-height: 435px; background-position: 67% center; }
  .how-header { width: calc(100% - 36px); }
  .how-hero-copy { width: calc(100% - 44px); margin-top: clamp(104px, 16vh, 150px); padding-bottom: 74px; }
  .how-hero-copy h2 { max-width: 350px; font-size: clamp(3rem, 13vw, 4.15rem); }
  .how-hero-copy p { margin-top: 14px; font-size: 1.08rem; }
  .how-steps { padding-top: 0; }
  .how-steps::before { top: 28px; bottom: 38px; left: 34px; }
  .how-step { grid-template-columns: 36px minmax(0, 1fr); gap: 11px 13px; padding: 28px 18px 32px 17px; }
  .how-step-number { grid-column: 1; grid-row: 1; width: 36px; height: 36px; font-size: 0.84rem; }
  .how-step-copy { grid-column: 2; grid-row: 1; padding-top: 2px; }
  .how-step h3 { margin-bottom: 9px; font-size: clamp(1.45rem, 6.1vw, 1.85rem); }
  .how-step p { font-size: 0.96rem; line-height: 1.5; }
  .how-preview { grid-column: 1 / -1; width: 100%; margin-top: 8px; padding: 15px; }
  .how-phone-preview { width: min(100%, 410px); padding: 25px 15px 15px; }
  .how-feed-photo { min-height: 150px; }
  .how-mini-podium { gap: 4px; }
  .how-mini-podium strong { font-size: 0.75rem; }
  .how-footer { min-height: 350px; padding: 48px 22px max(52px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .home-primary { transition: none; }
  html:focus-within { scroll-behavior: auto; }
}
/* Shared language preference, public and private headers. */
.home-header-actions { display:flex; align-items:center; gap:12px; }
.language-picker { position:relative; flex-shrink:0; z-index:70; }
.language-trigger { display:flex; align-items:center; gap:8px; min-height:44px; padding:7px 11px; border:1px solid #294036; border-radius:12px; background:#0d1813; color:#edf8f1; cursor:pointer; font-family:inherit; font-size:13px; font-weight:700; }
.language-trigger svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; }
.language-trigger img { width:25px; height:22px; object-fit:contain; }
.language-options { position:absolute; top:calc(100% + 10px); right:0; width:190px; padding:7px; background:#0c1812; border:1px solid #294036; border-radius:14px; box-shadow:0 15px 35px #0009; }
.language-options[hidden] { display:none; }
.language-options button { display:flex; align-items:center; gap:10px; width:100%; min-height:46px; padding:8px 10px; border:0; border-radius:8px; background:transparent; color:#edf8f1; text-align:left; cursor:pointer; font:inherit; }
.language-options button img { width:32px; height:28px; object-fit:contain; }
.language-options button:hover,.language-options button[aria-pressed="true"] { background:#123923; }
.language-check { margin-left:auto; color:#16d667; visibility:hidden; }
.language-options button[aria-pressed="true"] .language-check { visibility:visible; }
.language-picker button:focus-visible { outline:2px solid #17d568; outline-offset:3px; }
.overview-activity { grid-template-columns:minmax(0,1fr); }
@media(max-width:600px) {
  .home-header-actions { gap:8px; }
  .language-trigger { gap:5px; padding:6px 8px; }
  .language-trigger svg { width:18px; height:18px; }
  .app-header-actions { gap:8px; }
  .app-header-actions .language-current-flag { display:none; }
  .app-header-actions .app-back-button { padding-inline:8px; }
}
/* Honor hidden state before finishing a workout. */
.training-complete-panel[hidden], .training-partial-field[hidden] { display:none; }
/* Tu próximo paso: coach overview, with real account data and honest empty states. */
.next-step-overview { --overview-border:#213b2e; }
.overview-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:-4px 0 28px; }
.overview-intro > p { margin:0; color:#a7b8af; font-size:17px; line-height:1.5; }
.overview-team-summary { display:flex; align-items:center; gap:22px; flex-shrink:0; }
.overview-team-summary > span { display:flex; align-items:center; gap:9px; color:#9aafa3; font-size:12px; }
.overview-team-summary > span + span { border-left:1px solid #22362b; padding-left:22px; }
.overview-team-summary svg { width:25px; height:25px; }
.overview-team-summary strong { color:#edf7f0; font-size:20px; margin-right:3px; }
.overview-welcome-card { position:relative; display:grid; grid-template-columns:1.35fr 1fr; align-items:center; min-height:290px; padding:34px 38px; overflow:hidden; border:1px solid #2b4938; border-radius:22px; background:radial-gradient(ellipse at 90% 80%,#17442b55,transparent 55%),linear-gradient(115deg,#0e2118,#09130e); }
.overview-welcome-body { position:relative; z-index:1; max-width:620px; }
.overview-welcome-body .eyebrow { font-size:10px; letter-spacing:2px; margin:0 0 14px; }
.overview-welcome-body h3 { margin:0 0 12px; font-size:clamp(28px,2.5vw,42px); line-height:1.13; letter-spacing:-1.2px; color:#f2f8f4; }
.overview-gym-state { display:block; font-size:18px; line-height:1.4; color:#c0cec5; }
.overview-welcome-body > p:not(.eyebrow) { max-width:510px; margin:12px 0 0; font-size:14px; line-height:1.65; color:#9fb2a7; }
.overview-linked-name { display:block; margin-top:12px; color:#29dc7d; font-weight:700; }
.overview-linked-name[hidden] { display:none; }
.overview-primary-actions { display:flex; gap:12px; margin-top:26px; }
.overview-primary-actions button { display:flex; align-items:center; justify-content:center; gap:13px; min-height:49px; padding:12px 22px; border-radius:10px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.overview-create-button { border:1px solid #16d667; background:#16d667; color:#03220e; min-width:174px; box-shadow:0 7px 24px #10c55a13; }
.overview-create-button:hover { background:#3fe684; }
.overview-library-button { border:1px solid #35634a; background:#08150d80; color:#ecf5f0; }
.overview-library-button:hover { background:#193b29; }
.overview-library-button svg { width:20px; height:20px; }
.overview-welcome-art { position:relative; align-self:stretch; display:grid; place-items:center; min-width:0; }
.overview-art-shape { position:absolute; inset:20% 1% 4% 6%; border-radius:50% 30% 45% 25%; background:#1e593842; transform:rotate(-12deg); }
.overview-welcome-art img { position:relative; z-index:1; width:100%; max-width:420px; max-height:270px; object-fit:contain; filter:drop-shadow(0 15px 12px #0003); }
.overview-steps { margin:29px 0 25px; }
.overview-section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; }
.overview-section-heading h3 { margin:0; font-size:17px; }
.overview-section-heading p { margin:0; font-size:12px; color:#95aa9c; }
.overview-step-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.overview-step-card { display:flex; align-items:flex-start; gap:14px; width:100%; padding:21px 18px; border:1px solid var(--overview-border); border-radius:13px; background:linear-gradient(130deg,#102019,#0a130e); color:#ebf6ef; text-align:left; font:inherit; cursor:pointer; transition:border-color .18s,background .18s; }
.overview-step-card:not(:disabled):hover { border-color:#44815a; background:#102c1c; }
.overview-step-card:disabled { cursor:default; opacity:1; }
.overview-step-number { display:grid; place-items:center; width:35px; height:35px; flex-shrink:0; border:1px solid #567362; border-radius:50%; background:linear-gradient(140deg,#6173685e,#1c302480); color:#e9f3ed; font-size:16px; }
.overview-step-content { display:grid; gap:7px; min-width:0; }
.overview-step-content > strong { font-size:13px; line-height:1.4; }
.overview-step-content > span:not(.overview-step-status) { font-size:12px; line-height:1.55; color:#96aa9e; }
.overview-step-content .overview-step-status { justify-self:start; font-size:10px; font-weight:600; padding:4px 7px; border-radius:5px; background:#1e3427; color:#b6c9bd; margin-top:3px; }
.overview-step-card:disabled .overview-step-status { background:#26322b; color:#a9b6ad; }
.overview-step-arrow { margin-left:auto; color:#91b19c; font-size:17px; }
.overview-bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.overview-detail-card { padding:23px 24px; border:1px solid var(--overview-border); border-radius:15px; background:linear-gradient(140deg,#0d1a13,#08110c); }
.overview-detail-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.overview-detail-heading h3 { display:flex; align-items:center; gap:10px; margin:0; font-size:16px; }
.overview-detail-heading h3 svg { width:20px; height:20px; color:#b7ccbe; }
.overview-detail-heading > button { min-height:34px; padding:6px 11px; border:1px solid #2c5840; border-radius:7px; background:transparent; color:#c3e0cd; font:inherit; font-size:11px; cursor:pointer; }
.overview-private-badge { padding:5px 9px; border-radius:20px; background:#113722; color:#29dc7d; font-size:10px; font-weight:700; }
.overview-empty-wod,.overview-empty-activity { display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 14px 10px; }
.overview-empty-wod > svg,.overview-empty-activity > svg { width:35px; height:35px; color:#20d77a; margin-bottom:15px; }
.overview-empty-wod > strong,.overview-empty-activity > strong { font-size:15px; line-height:1.4; color:#e3eee6; }
.overview-empty-wod > p,.overview-empty-activity > p { max-width:350px; margin:8px 0 0; font-size:12px; line-height:1.6; color:#92a79a; }
.overview-local-note { margin-top:11px; color:#97b7a2; font-size:11px; }
.overview-local-note[hidden] { display:none; }
.next-step-overview button:focus-visible { outline:2px solid #25e47b; outline-offset:4px; }
@media(max-width:1250px) {
  .overview-intro { align-items:flex-start; }
  .overview-team-summary { gap:10px; }
  .overview-team-summary > span + span { padding-left:10px; }
  .overview-team-summary > span { font-size:10px; }
  .overview-welcome-card { padding:28px; grid-template-columns:1.6fr 1fr; }
  .overview-step-card { gap:9px; padding:17px 13px; }
  .overview-step-number { width:29px; height:29px; }
}
@media(max-width:680px) {
  .overview-intro { flex-direction:column; gap:14px; margin:0 0 20px; }
  .overview-intro > p { font-size:14px; max-width:300px; }
  .overview-team-summary { gap:18px; }
  .overview-team-summary > span { font-size:11px; }
  .overview-team-summary strong { font-size:17px; }
  .overview-welcome-card { display:flex; flex-direction:column; align-items:stretch; padding:23px 22px; border-radius:17px; }
  .overview-welcome-body h3 { font-size:29px; letter-spacing:-.7px; }
  .overview-gym-state { font-size:15px; }
  .overview-welcome-body > p:not(.eyebrow) { font-size:12px; }
  .overview-welcome-body .eyebrow { font-size:9px; letter-spacing:1.3px; }
  .overview-welcome-art { order:2; height:170px; min-height:170px; margin:15px 0 8px; }
  .overview-welcome-art img { height:190px; max-width:280px; }
  .overview-primary-actions { flex-direction:column; margin-top:19px; gap:10px; }
  .overview-primary-actions button { width:100%; min-height:46px; font-size:12px; padding:10px 12px; }
  .overview-section-heading { align-items:flex-start; flex-direction:column; gap:5px; }
  .overview-section-heading h3 { font-size:16px; }
  .overview-section-heading p { font-size:11px; }
  .overview-step-grid { grid-template-columns:1fr; gap:10px; }
  .overview-step-card { padding:17px; align-items:flex-start; gap:13px; }
  .overview-step-number { width:33px; height:33px; }
  .overview-step-content > strong { font-size:13px; }
  .overview-step-content > span:not(.overview-step-status) { font-size:11px; }
  .overview-step-content .overview-step-status { margin-top:0; }
  .overview-bottom-grid { grid-template-columns:1fr; gap:13px; }
  .overview-detail-card { padding:20px; }
  .overview-detail-heading h3 { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { .overview-step-card { transition:none; } }
@media(max-width:680px) {
  .overview-welcome-body { display:contents; }
  .overview-primary-actions { order:3; margin-top:6px; }
}
.overview-step-card:disabled .overview-step-arrow { visibility:hidden; }
/* Native fallback and custom WOD format menu: readable on every browser theme. */
select { color-scheme:dark; }
select option { background:#0e1b14; color:#f5fff9; }
#wodFormat[hidden] { display:none; }
.wod-format-picker { position:relative; width:100%; min-width:0; }
.wod-format-trigger { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; min-height:44px; padding:5px 0; border:0; border-radius:8px; background:transparent; color:#f5fff9; font:inherit; font-size:clamp(1.05rem,2vw,1.35rem); font-weight:850; cursor:pointer; }
.wod-format-trigger svg { width:19px; height:19px; fill:none; stroke:#bdd4c6; stroke-width:2; transition:transform .15s; }
.wod-format-trigger[aria-expanded="true"] svg { transform:rotate(180deg); stroke:#20d861; }
.wod-format-trigger:focus-visible { outline:2px solid #20d861; outline-offset:5px; }
.wod-format-options { position:absolute; top:calc(100% + 10px); left:-10px; right:-10px; z-index:40; max-height:310px; overflow-y:auto; overscroll-behavior:contain; padding:7px; border:1px solid #315b40; border-radius:13px; background:#0d1b13; box-shadow:0 18px 45px #000b; }
.wod-format-options[hidden] { display:none; }
.wod-format-option { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:61px; padding:11px 13px; border:1px solid transparent; border-radius:8px; color:#eef9f1; cursor:pointer; text-align:left; }
.wod-format-option > span:first-child { display:grid; gap:5px; }
.wod-format-option strong { font-size:14px; font-weight:800; line-height:1.2; }
.builder-control-tile .wod-format-option small { color:#a7beaf; font-size:11px; line-height:1.4; letter-spacing:0; text-transform:none; }
.wod-format-option[aria-selected="true"] { background:#123b23; border-color:#266239; }
.wod-format-option.highlighted { background:#1b432b; border-color:#44865b; }
.wod-format-check { visibility:hidden; color:#2ce781; font-size:17px; }
.wod-format-option[aria-selected="true"] .wod-format-check { visibility:visible; }
@media(max-width:680px) { .wod-format-options { left:-8px; right:-8px; } .wod-format-option { padding:11px 9px; } .wod-format-option strong { font-size:13px; } }
@media(prefers-reduced-motion:reduce) { .wod-format-trigger svg { transition:none; } }
.builder-primary-controls > .builder-control-tile:first-child { display:grid; align-content:center; gap:8px; }
.builder-primary-controls > .builder-control-tile:first-child { justify-content:stretch; }
#wodFormatLabel { text-align:center; }
.wod-format-trigger { justify-content:center; }