/* Energy and workout flow */
#energyCard.card {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.exercise-help-content {
  display: grid;
  gap: 10px;
  max-height: min(68vh, 560px);
  overflow-y: auto;
  color: var(--main);
}

.exercise-help-section h3 {
  margin: 0 0 5px;
  color: rgba(1, 45, 237, 0.35);
  font-size: .82rem;
  letter-spacing: .02em;
}

.exercise-help-section p,
.exercise-help-section ul,
.exercise-help-section li {
  margin: 0;
  color: var(--main);
}

.exercise-help-section ul { padding-left: 18px; }
.exercise-help-section li + li { margin-top: 4px; }

.exercise-help-steps {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exercise-help-steps li {
  display: grid;
  grid-template-columns: minmax(82px, max-content) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.exercise-help-steps strong {
  font-size: .82rem;
  line-height: 1.35;
  color: rgba(1, 45, 237, 0.58);
}

.exercise-help-steps span {
  min-width: 0;
  line-height: 1.35;
}

.today-empty-state {
  position: relative;
  padding: 24px;
  margin-bottom: 36px;
  border-radius: var(--radius);
  background: var(--main);
  color: #ffffff;
}

.workout-complete-state {
  margin-bottom: 24px;
}

#energyCard .today-empty-state h2,
.today-empty-state h2 {
  color: #ffffff;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 500;
  margin: 0 0 15px;
  padding-right: 34px;
}

#energyCard .today-empty-state p,
.today-empty-state p {
  color: #ffffff;
  font-size: var(--text-md);
  line-height: 1.28;
  margin: 0;
  padding-right: 16px;
}

.today-empty-close {
  position: absolute;
  top: 20px;
  right: 20px;
  min-width: 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
}

.today-empty-close::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  place-self: center;
  background: #ffffff;
  -webkit-mask: url("Assets/x.svg") center / 26px 26px no-repeat;
  mask: url("Assets/x.svg") center / 26px 26px no-repeat;
}

.today-recovery-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  width: 100vw;
  height: var(--app-viewport-height);
  padding: calc(var(--space-5) + env(safe-area-inset-top)) var(--screen-x) calc(var(--space-5) + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--main);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.today-recovery-modal.hidden {
  display: none !important;
}

.today-recovery-close {
  position: absolute;
  top: calc(var(--space-5) + env(safe-area-inset-top));
  right: var(--screen-x);
  color: var(--main);
}

.today-recovery-content {
  width: 100%;
  max-width: 353px;
}

#energyCard .today-recovery-content h2,
.today-recovery-content h2 {
  margin: 0 48px 24px 0;
  padding: 0;
  color: var(--main);
  font-size: 40px;
  line-height: 1.08;
  font-weight: 700;
}

#energyCard .today-recovery-content p,
.today-recovery-content p {
  margin: 0;
  padding: 0;
  color: var(--main);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 400;
}

.energy-grid {
  display: grid;
  grid-template-columns: repeat(2, 172px);
  gap: 12px;
  justify-content: center;
  margin-top: 36px;
}

.energy-option {
  width: 172px;
  height: 172px;
  min-height: 172px;
  padding: 0;
  display: grid;
  place-items: center;
  border-color: var(--main);
  border-radius: var(--radius);
  background: var(--main);
  color: #ffffff;
  box-shadow: none;
}

.energy-option img {
  display: none;
}

.energy-option span {
  color: currentColor;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1;
}

.energy-option[data-feel="great"] {
  border-color: var(--main);
  background: var(--main);
  color: #ffffff;
}

.energy-option[data-feel="normal"] {
  border-color: var(--main);
  background: var(--main);
  color: #ffffff;
}

.energy-option[data-feel="tired"] {
  border-color: var(--main);
  background: var(--main);
  color: #ffffff;
}

.energy-option[data-feel="exhausted"] {
  border-color: var(--main);
  background: var(--main);
  color: #ffffff;
}

.energy-option:active,
.energy-option.selected {
  background: var(--main);
  color: #ffffff;
  border-color: var(--main);
  transform: translateY(1px);
}

.custom-checklist-card h3,
.custom-checklist-form h3,
.custom-checklist-active h3 {
  margin-bottom: var(--space-2);
}

.custom-checklist-card {
  margin-top: var(--space-5);
}

.custom-type-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.custom-checklist-name-input {
  min-height: 52px;
  height: 52px;
  resize: none;
  overflow: hidden;
}

.custom-type-row label {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--soft);
  font-weight: 900;
}

.custom-type-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--main);
}

.custom-checklist-items {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.custom-checklist-row {
  margin: 0;
}

.selected-energy-stack {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
}

.selected-energy-stack.hidden {
  display: none !important;
}

.selected-energy-mascot-card {
  position: relative;
  width: min(353px, 100%);
  max-width: 353px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  height: auto;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  place-items: center;
}

.energy-pill {
  position: absolute;
  left: 18px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--main);
  color: #ffffff;
  border: 1px solid var(--main);
  font-size: 12px;
  font-weight: 900;
}

.selected-energy-stack[data-energy="great"] .energy-pill {
  background: var(--main);
  color: #ffffff;
  border-color: var(--main);
}

.selected-energy-stack[data-energy="tired"] .energy-pill {
  background: var(--main);
  color: #ffffff;
  border-color: var(--main);
}

.selected-energy-stack[data-energy="exhausted"] .energy-pill {
  background: var(--main);
  color: #ffffff;
  border-color: var(--main);
}

.selected-energy-stack[data-energy="normal"] .energy-pill {
  background: var(--main);
  color: #ffffff;
  border-color: var(--main);
}

.selected-energy-mascot {
  width: 92%;
  height: 92%;
  margin: 0 auto;
  object-fit: contain;
}

.selected-workout-preview {
  display: grid;
  gap: 8px;
}

.selected-back-btn,
.workout-regenerate-btn,
.account-view > .text-btn {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 900;
  text-decoration: none;
}

.selected-workout-preview .selected-back-btn {
  color: #ffffff;
  align-self: flex-start;
  margin-bottom: 18px;
}

.selected-workout-preview h2,
.generated-workout-hero h2,
.generated-workout-hero p {
  margin-bottom: 0;
}

.selected-workout-preview p {
  margin-bottom: 18px;
}

.add-on-panel {
  margin-top: 12px;
  padding: 10px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.32);
  background: transparent;
}

.add-on-title {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0.85;
}

.add-on-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  font-weight: 700;
}

.add-on-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--main);
}

.rest-timer-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px 0 8px 28px;
}

.rest-timer-options label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 8px;
  font-weight: 900;
}

.rest-timer-options input {
  width: 16px;
  height: 16px;
  accent-color: #ffffff;
}

.add-on-summary {
  margin: 6px 0 0;
  font-size: 0.9rem;
  opacity: 0.78;
}

.generated-workout-hero {
  display: grid;
  gap: 12px;
}

.workout-regenerate-btn {
  justify-self: start;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
}

.generated-workout-hero .hero-action {
  margin-top: 18px;
}

#exercisePreview {
  margin-top: 0;
}

.preview-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

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

.preview-row strong {
  color: var(--heading);
}

.preview-row span {
  color: var(--muted-text);
  text-align: right;
}

.exercise-card h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 12px;
}

.exercise-help-btn {
  box-sizing: border-box;
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid var(--main);
  border-radius: 50%;
  background: transparent;
  color: var(--main);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.prescription {
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 900;
}

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: var(--space-2) 0;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--soft);
}

.set-row span {
  min-width: 0;
  flex: 1 1 auto;
}

.set-row input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

.set-timer-btn {
  flex: 0 0 auto;
  min-height: 34px;
  margin: 0;
  padding: 6px 12px;
  border-color: rgba(102, 112, 133, 0.28);
  background: #ffffff;
  color: var(--muted-text);
  font-size: 13px;
  line-height: 1;
}

.rating-label {
  margin: 12px 0 var(--space-2);
  font-weight: 900;
}

.rating-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.rating-row button {
  padding: 10px 6px;
  background: transparent;
  color: var(--main);
  font-size: 13px;
}

.rating-row button.selected {
  background: var(--main);
  color: #ffffff;
}

.exercise-help-card {
  position: relative;
  padding: 24px;
}

.exercise-help-card .eyebrow {
  display: none;
}

.exercise-help-card h2 {
  padding-right: 42px;
  color: var(--main);
}

.exercise-help-cues {
  margin: var(--space-4) 0;
  padding-left: 20px;
  color: var(--main);
}

.exercise-help-cues li {
  margin-bottom: 8px;
}

.exercise-help-safety {
  margin-bottom: 0;
  color: var(--muted-text);
  font-weight: 700;
}

.help-close {
  background: #ffffff;
  color: var(--main);
  top: 20px;
  right: 20px;
}

.timer-card {
  position: relative;
  width: min(353px, 100%);
  height: 321px;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 0;
  border-radius: 20px;
  background: #f7f7f7;
  box-shadow: none;
  text-align: center;
}

#timerPanel {
  background: rgba(178, 180, 184, 0.7);
}

#timerPanel .timer-count,
.timer-count {
  margin: 0;
  color: var(--main) !important;
  font-size: 128px;
  font-weight: 500;
  line-height: 1;
  opacity: 1;
  transition: none;
}

.timer-close-btn {
  top: 20px;
  right: 20px;
}

html.workout-active,
body.workout-active {
  width: 100%;
  height: var(--app-viewport-height);
  background: #1e1e1e;
  overflow: hidden;
}

body.workout-active {
  --workout-top-overscroll: #ffffff;
  --workout-bottom-overscroll: var(--main);
  position: fixed;
  inset: 0;
  isolation: isolate;
  overscroll-behavior: none;
}

body.workout-active.workout-top-completed,
body.workout-active.workout-completion-active {
  --workout-top-overscroll: var(--cream);
}

body.workout-active.workout-completion-active {
  --workout-bottom-overscroll: var(--cream);
}

body.workout-active::before,
body.workout-active::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: 50dvh;
  z-index: 0;
  pointer-events: none;
}

body.workout-active::before {
  top: 0;
  background: var(--workout-top-overscroll);
}

body.workout-active::after {
  bottom: 0;
  background: var(--workout-bottom-overscroll);
}

body.workout-active .app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  height: var(--app-viewport-height);
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: transparent;
  overflow: hidden;
  overflow-x: hidden;
  overscroll-behavior: none;
}

body.workout-active .topbar,
body.workout-active .bottom-nav {
  display: none !important;
}

.workout-active .today-mascot-stage {
  display: none !important;
}

body.workout-active #today.active {
  width: 100%;
  height: var(--app-viewport-height);
  min-height: 0;
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  background: #000000;
  -webkit-overflow-scrolling: touch;
}

#exerciseList {
  --workout-collapsed-height: 88px;
  width: 100%;
  min-height: 0;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 0;
  overflow: visible;
}

.workout-safe-area {
  display: none;
}

body.workout-active .workout-safe-area {
  display: none;
}

body.workout-active #exerciseList > .workout-accordion-card:first-child {
  flex-basis: calc(var(--workout-collapsed-height) + env(safe-area-inset-top));
  height: calc(var(--workout-collapsed-height) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: #ffffff;
}

.workout-accordion-card {
  flex: 0 0 var(--workout-collapsed-height);
  width: 100%;
  height: var(--workout-collapsed-height);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
}

.exercise-chip-toggle {
  width: 100%;
  height: var(--workout-collapsed-height);
  min-height: var(--workout-collapsed-height);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  color: var(--main);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-align: left;
}

.exercise-chip-toggle span,
.exercise-chip-toggle em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-weight: 400;
}

.exercise-chip-toggle span {
  flex: 1 1 auto;
  min-height: 1.25em;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.25;
}

.exercise-role-label {
  display: block;
  margin-bottom: 3px;
  color: rgba(1, 45, 237, 0.58);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.exercise-chip-toggle .exercise-role-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exercise-chip-toggle em,
.exercise-chip-toggle i {
  flex: 0 0 auto;
}

.exercise-chip-toggle i {
  display: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("Assets/check.svg") center / contain no-repeat;
  mask: url("Assets/check.svg") center / contain no-repeat;
}

.workout-accordion-card.completed .exercise-chip-toggle {
  border-color: transparent;
  background: var(--cream);
  color: var(--main);
}

.workout-accordion-card.workout-warmup-card:not(.completed) .exercise-chip-toggle {
  background: #ffffff;
}

#exerciseList > .workout-accordion-card:first-child,
#exerciseList > .workout-accordion-card:first-child .exercise-chip-toggle,
#exerciseList > .workout-accordion-card:first-child.open .exercise-card-body {
  border-radius: 0 0 20px 20px;
}

.workout-accordion-card.completed .exercise-chip-toggle i {
  display: block;
}

.workout-accordion-card.completed .exercise-chip-toggle em {
  display: none;
}

.workout-accordion-card.open .exercise-chip-toggle {
  display: none;
}

.workout-accordion-card.open {
  height: auto;
  min-height: min-content;
  flex: 1 0 auto;
  background: #ffffff;
  overflow: visible;
}

.exercise-card-body {
  display: none;
}

.workout-accordion-card.open .exercise-card-body {
  width: 100%;
  height: auto;
  min-height: 100%;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 5vh, 48px) 20px;
  border-radius: 20px;
  background: #ffffff;
  color: var(--main);
  overflow: visible;
}

.exercise-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 33px;
}

.exercise-card-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.exercise-card-header h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--main);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
}

.exercise-card-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.workout-accordion-card .active-swap-btn {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  background-color: var(--main);
}

.workout-accordion-card .set-help-btn {
  border: 1px solid var(--main);
  background: transparent;
  color: var(--main);
}

.set-list {
  width: 100%;
  display: grid;
  gap: 18px;
}

.workout-accordion-card .set-row {
  width: 100%;
  height: 46px;
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0 21px;
  border: 1px solid var(--main);
  border-radius: 20px;
  background: transparent;
  color: var(--main);
}

.workout-accordion-card .set-row.has-help {
  grid-template-columns: minmax(0, 1fr) 26px 24px;
  gap: 12px;
}

.workout-accordion-card .set-row.completed {
  background: var(--main);
  color: #ffffff;
}

.workout-accordion-card .set-row span {
  min-width: 0;
  color: currentColor;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.workout-accordion-card .set-help-btn {
  align-self: center;
}

.set-control {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: currentColor;
  color: currentColor;
}

.set-control.is-square {
  -webkit-mask: url("Assets/square.svg") center / contain no-repeat;
  mask: url("Assets/square.svg") center / contain no-repeat;
}

.set-control.is-timer {
  background-color: var(--main);
  color: var(--main);
  -webkit-mask: url("Assets/clock.svg") center / contain no-repeat;
  mask: url("Assets/clock.svg") center / contain no-repeat;
}

.set-control.is-check {
  -webkit-mask: url("Assets/check.svg") center / contain no-repeat;
  mask: url("Assets/check.svg") center / contain no-repeat;
}

.workout-accordion-card .rating-label {
  margin: 0;
  padding-top: 48px;
  padding-bottom: 18px;
  color: var(--main);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.workout-accordion-card .rating-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 4px;
  border-radius: 20px;
  background: rgba(1, 45, 237, 0.15);
}

.workout-accordion-card .rating-row button {
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--main);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.workout-accordion-card .rating-row button.selected {
  background: var(--main);
  color: #ffffff;
}

@media (prefers-reduced-motion: no-preference) {
  .generated-workout-overlay,
  .custom-checklist-overlay,
  #timerPanel,
  #exerciseHelpPanel,
  #confirmPanel {
    transition: opacity 180ms ease;
  }

  .generated-workout-modal,
  .custom-checklist-modal,
  .timer-card,
  .exercise-help-card,
  .confirm-card,
  .workout-accordion-card,
  .exercise-chip-toggle,
  .workout-accordion-card .exercise-card-body,
  .set-row,
  .rating-row button {
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, opacity 180ms ease, transform 180ms ease;
  }
}

.workout-completion-tile {
  width: 100%;
  flex: 0 0 var(--workout-collapsed-height);
  min-height: calc(var(--workout-collapsed-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  margin: 0;
  border-radius: 20px;
  background: var(--main);
}

.workout-completion-trigger {
  width: 100%;
  height: var(--workout-collapsed-height);
  min-height: var(--workout-collapsed-height);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--main);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

.workout-completion-tile.open {
  padding-bottom: env(safe-area-inset-bottom);
}

.workout-completion-tile.open {
  min-height: min-content;
  flex: 1 0 auto;
  display: flex;
  background: var(--cream);
  color: var(--main);
  overflow: visible;
}

.workout-completion-content {
  width: 100%;
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 7vh, 64px) 20px;
  text-align: center;
  overflow: visible;
}

.workout-completion-content h2 {
  margin: 0;
  color: var(--main);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
}

.workout-completion-content p {
  max-width: 309px;
  margin: 24px auto 0;
  color: var(--main);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 400;
}

.workout-completion-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
}

.workout-completion-tile.full .workout-completion-actions {
  grid-template-columns: 1fr;
}

.workout-completion-actions button {
  width: 100%;
  height: 46px;
  min-height: 46px;
  margin: 0;
  padding: 0;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 500;
}

.workout-completion-actions .primary-btn {
  border-color: var(--main);
  background: var(--main);
  color: var(--cream);
}

.workout-completion-actions .ghost-btn {
  border-color: var(--main);
  background: transparent;
  color: var(--main);
}

/* Updated Today flow */
.energy-check-screen {
  margin: 0;
  padding: 0;
}

.energy-check-screen h1 {
  margin: 0 0 24px;
  padding-top: 48px;
  color: var(--main);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
}

.energy-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  justify-content: stretch;
  margin: 0;
}

.energy-option,
.energy-option[data-feel] {
  width: 100%;
  height: 65px;
  min-height: 65px;
  padding: 0;
  border: 1px solid var(--main);
  border-radius: 20px;
  background: transparent;
  color: var(--main);
}

.energy-option span {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

.energy-option:active,
.energy-option.selected {
  background: var(--main);
  color: #ffffff;
  transform: none;
}

.custom-checklist-card {
  margin: var(--section-gap) 0 0;
  padding: 0;
}

.today-info-action {
  width: 100%;
  margin-top: 20px;
}

.custom-checklist-card h2 {
  margin: 0 0 24px;
  color: var(--main);
  font-size: 24px;
  line-height: 1.1;
  font-weight: 700;
}

.custom-checklist-card .muted {
  display: none;
}

.custom-checklist-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.custom-checklist-form.hidden {
  display: none !important;
}

.custom-checklist-form .text-input {
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid rgba(1, 45, 237, 0.35);
  border-radius: 20px;
  background: transparent;
  color: var(--main);
  font-size: 16px;
  font-weight: 400;
  line-height: 46px;
}

.custom-checklist-form .text-input::placeholder {
  color: rgba(1, 45, 237, 0.35);
}

.custom-checklist-name-input {
  min-height: 46px;
  height: 46px;
  resize: none;
  overflow: hidden;
}

.custom-type-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 12px;
}

.custom-type-row label {
  width: 100%;
  height: 46px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid var(--main);
  border-radius: 20px;
  background: transparent;
  color: var(--main);
  font-size: 16px;
  font-weight: 400;
}

.custom-type-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.custom-type-row label:has(input:checked) {
  background: var(--main);
  color: #ffffff;
}

.custom-checklist-form .panel-message {
  grid-column: 1 / -1;
  margin: -18px 0 0;
}

.custom-checklist-form .panel-message:empty {
  display: none;
}

.custom-checklist-form #createCustomChecklistBtn {
  grid-column: 1 / -1;
  width: 100%;
  height: 46px;
  min-height: 46px;
  margin-top: 0;
  padding: 0;
  border-radius: 20px;
  background: var(--main);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

.selected-energy-stack {
  display: block;
  margin: 0;
}

.selected-energy-stack.hidden {
  display: none !important;
}

.selected-energy-mascot-card {
  width: 353px;
  max-width: 100%;
  height: 353px;
  min-height: 353px;
  margin: 0 auto;
  padding: 24px 0 12px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: #f7f7f7;
}

.selected-energy-mascot {
  width: 282px;
  height: 302px;
  object-fit: contain;
}

.selected-energy-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 18px;
  margin-top: 12px;
  color: var(--main);
}

.energy-stars {
  display: none;
  gap: 2px;
  margin-bottom: 2px;
}

.energy-star {
  width: 18px;
  height: 18px;
  display: inline-block;
  color: var(--main);
  border-radius: 1px;
  font-size: 18px;
  line-height: 1;
}

.energy-pill {
  position: static;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--main) !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.1;
}

.selected-workout-meta {
  margin: 0;
  color: var(--main);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.1;
  text-align: right;
}

.selected-workout-preview {
  display: block;
}

.add-on-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 41px 0 0;
  padding: 0;
  border: 0;
}

.add-on-row {
  width: 100%;
  height: 46px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 0 15px;
  border: 1px solid var(--main);
  border-radius: 20px;
  background: transparent;
  color: var(--main);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.add-on-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.add-on-row span {
  min-width: 0;
  white-space: nowrap;
}

.add-on-row i {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("Assets/plus.svg") center / contain no-repeat;
  mask: url("Assets/plus.svg") center / contain no-repeat;
}

.add-on-row:has(input:checked) {
  background: var(--main);
  color: #ffffff;
}

.add-on-row:has(input:checked) i {
  -webkit-mask-image: url("Assets/x.svg");
  mask-image: url("Assets/x.svg");
}

.selected-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
}

.selected-actions .primary-btn,
.selected-actions .secondary-btn {
  width: 100%;
  height: 46px;
  min-height: 46px;
  margin: 0;
  padding: 0;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 500;
}

.selected-actions .secondary-btn {
  border: 0;
  background: rgba(1, 45, 237, 0.15);
  color: var(--main);
}

.generated-workout-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(178, 180, 184, 0.7);
}

.generated-workout-overlay.hidden {
  display: none !important;
}

.generated-workout-modal {
  position: relative;
  width: min(353px, 100%);
  min-height: 382px;
  padding: 24px;
  border-radius: 20px;
  background: #f7f7f7;
  color: var(--main);
}

.generated-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--main);
  color: transparent;
  font-size: 0;
  line-height: 0;
  display: grid;
  place-items: center;
  margin: 0;
  transform: none;
}

.generated-close-btn::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin: 0;
  place-self: center;
  transform: none;
  background: #ffffff;
  -webkit-mask: url("Assets/x.svg") center / contain no-repeat;
  mask: url("Assets/x.svg") center / contain no-repeat;
}

.generated-workout-modal h2 {
  margin: 0 48px 8px 0;
  color: var(--main);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}

.generated-workout-modal > p {
  margin: 0 0 50px;
  color: #989898;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
}

.generated-preview-list {
  display: grid;
  gap: 33px;
}

.generated-preview-list .preview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 0;
  border: 0;
}

.preview-exercise-copy {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.generated-preview-list .exercise-role-label {
  color: rgba(1, 45, 237, 0.58);
  font-size: 11px;
  font-weight: 700;
}

.generated-preview-list .preview-row strong,
.generated-preview-list .preview-row span {
  color: var(--main);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
}

.generated-preview-list .preview-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generated-preview-list .preview-row span {
  color: rgba(1, 45, 237, 0.35);
  font-size: 16px;
  font-weight: 400;
  text-align: left;
}

.generated-preview-list .preview-exercise-actions {
  flex: 0 0 auto;
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.preview-icon-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--main);
  color: var(--main);
}

.preview-swap-btn {
  -webkit-mask: url("Assets/repeat.svg") center / 24px 24px no-repeat;
  mask: url("Assets/repeat.svg") center / 24px 24px no-repeat;
}

.preview-swap-btn.swap-unavailable-btn {
  opacity: 0.35;
}

.swap-availability-message {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 130;
  width: max-content;
  max-width: calc(100vw - 48px);
  padding: 12px 18px;
  border-radius: 20px;
  background: var(--main);
  color: #ffffff;
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.generated-preview-list .preview-help-btn {
  border: 1px solid var(--main);
  border-radius: 50%;
  background: transparent;
  color: var(--main);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.generated-workout-modal #startWorkoutBtn {
  width: 100%;
  height: 46px;
  min-height: 46px;
  margin-top: 48px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--main);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

#timerPanel .timer-close-btn {
  top: 20px;
  right: 20px;
}

.custom-checklist-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(178, 180, 184, 0.7);
}

.custom-checklist-overlay.hidden {
  display: none !important;
}

.custom-checklist-modal {
  position: relative;
  width: min(353px, 100%);
  padding: 24px;
  border-radius: 20px;
  background: #f7f7f7;
  color: var(--main);
}

.custom-checklist-close {
  top: 20px;
  right: 20px;
}

.custom-checklist-modal h2 {
  margin: 0 36px 48px 0;
  color: var(--main);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}

.custom-checklist-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
}

.custom-checklist-row {
  width: 100%;
  height: 46px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 0;
  padding: 0 21px;
  border: 1px solid var(--main);
  border-radius: 20px;
  background: transparent;
  color: var(--main);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.custom-checklist-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.custom-checklist-row span {
  min-width: 0;
  color: currentColor;
  white-space: nowrap;
}

.custom-checklist-row i {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("Assets/square.svg") center / contain no-repeat;
  mask: url("Assets/square.svg") center / contain no-repeat;
}

.custom-checklist-row.completed {
  border-color: var(--main);
  background: var(--main);
  color: #ffffff;
}

.custom-checklist-row.completed i {
  -webkit-mask-image: url("Assets/check.svg");
  mask-image: url("Assets/check.svg");
}

.custom-checklist-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 48px;
}

.custom-checklist-actions .primary-btn,
.custom-checklist-actions .secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 46px;
  min-height: 46px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  vertical-align: top;
}

.custom-checklist-actions .primary-btn {
  background: var(--main);
  color: #ffffff;
}

.custom-checklist-actions .secondary-btn {
  background: rgba(1, 45, 237, 0.15);
  color: var(--main);
}

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

.custom-edit-grid .text-input {
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding: 0 21px;
  border: 1px solid rgba(1, 45, 237, 0.15);
  border-radius: 20px;
  background: transparent;
  color: #b2b4b8;
  font-size: 16px;
  font-weight: 400;
}

.custom-edit-grid .text-input::placeholder {
  color: #b2b4b8;
}

.edit-custom-type-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 9px 0 21px;
}

.edit-custom-type-row label {
  width: 100%;
  height: 46px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 21px;
  border: 1px solid var(--main);
  border-radius: 20px;
  background: transparent;
  color: var(--main);
  font-size: 16px;
  font-weight: 400;
}

.edit-custom-type-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.edit-custom-type-row label:has(input:checked) {
  background: var(--main);
  color: #ffffff;
}

.custom-edit-grid .panel-message {
  grid-column: 1 / -1;
  margin: -18px 0 0;
}

.custom-edit-grid .custom-checklist-actions {
  grid-column: 1 / -1;
  margin-top: 25px;
}

@media (min-width: 700px) {
  .energy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .energy-option {
    width: 100%;
    height: 65px;
    min-height: 65px;
  }

  .selected-energy-mascot-card {
    max-width: 420px;
  }

  .exercise-card {
    margin-bottom: var(--space-6);
  }
}

/* Today energy check */
html.today-active,
body.today-active {
  width: 100%;
  height: var(--app-viewport-height);
  background: #ffffff;
  overflow: hidden;
  overscroll-behavior: none;
}

body.today-active .app {
  height: var(--app-viewport-height);
  min-height: 0;
  padding-top: calc(var(--space-5) + env(safe-area-inset-top));
  padding-bottom: 0;
  background: transparent;
  overflow-x: hidden;
  overflow-y: hidden;
}

body.today-active .topbar {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 3;
  width: min(100%, var(--app-width));
  height: var(--tile-header-height);
  display: grid;
  grid-template-columns: minmax(0, var(--tile-header-main-width)) minmax(0, var(--tile-header-menu-width));
  align-items: stretch;
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

body.today-active .brand-block {
  display: none;
}

body.today-active #accountBtn {
  grid-column: 2;
  place-self: center;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

body.today-active #accountBtn img {
  display: none;
}

body.today-active #accountBtn::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  background: var(--main);
  -webkit-mask: url("Assets/menu.svg") center / 34px 34px no-repeat;
  mask: url("Assets/menu.svg") center / 34px 34px no-repeat;
}

body.today-active .bottom-nav {
  z-index: 60;
}

body.today-active #today {
  position: relative;
  min-height: calc(var(--app-viewport-height) - var(--space-5) - env(safe-area-inset-top));
}

.energy-check-screen {
  position: relative;
  z-index: 1;
}

.energy-grid {
  position: relative;
  z-index: 2;
  width: calc(100% + (2 * var(--screen-x)));
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  margin: 0 calc(-1 * var(--screen-x));
  padding: 0 max(0px, calc((100% + (2 * var(--screen-x)) - 172px) / 2));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-padding-inline: max(0px, calc((100% + (2 * var(--screen-x)) - 172px) / 2));
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  touch-action: pan-x;
}

body.today-active .energy-grid {
  margin-top: 60px;
}

.energy-grid::-webkit-scrollbar {
  display: none;
}

.energy-option,
.energy-option[data-feel] {
  width: 172px;
  min-width: 172px;
  max-width: 172px;
  height: 52px;
  min-height: 52px;
  flex: 0 0 172px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: rgba(247, 243, 230, 0.7);
  color: var(--main);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.energy-option span {
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.energy-option.selected,
.energy-option[aria-pressed="true"] {
  border-color: transparent;
  background: var(--cream);
  color: var(--main);
}

.energy-option:not(.selected):not([aria-pressed="true"]),
.energy-option:not(.selected):not([aria-pressed="true"]):active {
  background: rgba(247, 243, 230, 0.7);
  color: rgba(1, 45, 237, 0.5);
}

.today-mascot-stage {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: var(--app-viewport-height);
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

body.today-active .today-mascot-stage {
  display: block;
}

html.auth-loading .today-mascot-stage {
  display: none !important;
}

html.workout-active,
body.workout-active {
  background: #000000 !important;
}

body.workout-active .app {
  width: 100%;
  max-width: none;
  padding-inline: 0;
  background: transparent !important;
}

html.workout-active .today-mascot-stage,
body.workout-active .today-mascot-stage {
  display: none !important;
}

.today-mascot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 987px;
  max-width: none;
  max-height: none;
  transform: scale(0.97) translate(-433.756px, -493.44px);
  transform-origin: top left;
}

.activity-counter-reserved {
  display: none !important;
}

.generated-workout-modal {
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.generated-workout-overlay:not(.hidden) {
  animation: today-preview-backdrop-in 300ms ease-out both;
}

.generated-workout-overlay:not(.hidden) .generated-workout-modal {
  animation: today-preview-slide-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes today-preview-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes today-preview-slide-in {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.preview-add-on-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 48px 0;
}

.workout-recovery-message {
  width: 100%;
  max-width: 253px;
  margin: 20px 0 0;
  color: var(--main);
  font-size: 16px;
  line-height: 1.3;
}

.preview-add-on-panel .add-on-row {
  height: 42px;
  min-height: 42px;
  padding: 0 10px;
  font-size: 16px;
  font-weight: 400;
}

.preview-add-on-panel .add-on-row i {
  width: 24px;
  height: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .energy-grid {
    scroll-behavior: auto;
  }

  .generated-workout-overlay:not(.hidden),
  .generated-workout-overlay:not(.hidden) .generated-workout-modal {
    animation: none;
  }
}