:root {
  --bg: #f7f7f7;
  --main: #012ded;
  --card: #ffffff;
  --soft: rgba(1, 45, 237, 0.08);
  --border: rgba(1, 45, 237, 0.16);
  --text: #012ded;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.app {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 18px 96px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.brand-block {
  display: grid;
  gap: 6px;
}

.brand-logo {
  display: block;
  width: 156px;
  height: auto;
}

.logged-out #screenTitle {
  display: none;
}

.eyebrow {
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 900;
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 34px; line-height: 1; font-weight: 900; }
h2 { font-size: 30px; margin-bottom: 8px; line-height: 1.05; }
h3 { font-size: 18px; margin-bottom: 14px; }

.muted { opacity: 0.72; line-height: 1.45; }
.muted-light { opacity: 0.72; line-height: 1.45; }
.hidden { display: none !important; }
.screen { display: none; }
.screen.active { display: block; }

.card, .hero-card, .exercise-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 10px 28px rgba(1, 45, 237, 0.05);
}

.hero-card {
  background: var(--main);
  color: white;
  border: none;
}

.hero-card h2 { font-size: 42px; margin-bottom: 18px; }
.hero-card p { font-size: 17px; }

.button-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.button-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

button, .import-label {
  border: 1px solid var(--main);
  background: var(--main);
  color: white;
  border-radius: 999px;
  padding: 13px 16px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  text-align: center;
}

.compact { padding: 10px 16px; }
.ghost-btn, .feel-btn {
  background: transparent;
  color: var(--main);
}

.feel-btn.selected {
  background: var(--main);
  color: white;
}

.primary-btn {
  width: 100%;
  margin-top: 8px;
}

.hero-action {
  width: 100%;
  background: white;
  color: var(--main);
  border-color: white;
  margin-top: 10px;
}

.preview-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.preview-row:last-child { border-bottom: none; }
.preview-row strong { color: var(--main); }
.preview-row span { opacity: .72; text-align: right; }

.exercise-card h3 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

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

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

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

.rating-label { margin: 14px 0 8px; font-weight: 900; }
.rating-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}

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

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

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(520px, calc(100% - 28px));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px;
  box-shadow: 0 12px 36px rgba(1, 45, 237, 0.12);
}


.nav-btn {
  background: transparent;
  color: var(--main);
  border: none;
  padding: 11px 8px;
}

.nav-btn.active {
  background: var(--main);
  color: white;
}

.big-number {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 0;
}

.import-label {
  display: block;
  margin-top: 10px;
  background: transparent;
  color: var(--main);
}

.import-label input { display: none; }
.danger-zone { opacity: 0.8; }

@media (max-width: 420px) {
  .button-grid, .button-row { grid-template-columns: 1fr; }
  .rating-row { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 31px; }
  .hero-card h2 { font-size: 36px; }
}

.goal-hero .progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
  margin: 14px 0 12px;
}

.goal-hero .progress-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: white;
  border-radius: 999px;
  transition: width 0.25s ease;
}

.goal-next {
  margin-bottom: 0;
  font-weight: 900;
}

.journey-list, .skill-list, #levelsList {
  display: grid;
  gap: 10px;
}

.journey-item, .skill-row, .level-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.journey-item:last-child, .skill-row:last-child, .level-row:last-child {
  border-bottom: none;
}

.journey-item span {
  font-weight: 900;
  line-height: 1.2;
}

.journey-item p, .skill-row p, .level-row p {
  margin: 3px 0 0;
  opacity: 0.72;
  line-height: 1.35;
}

.journey-item.current strong,
.skill-row strong,
.level-row strong {
  font-weight: 900;
}

.skill-row, .level-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.skill-row span, .level-row span {
  font-weight: 900;
  background: var(--soft);
  padding: 8px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.stat-card {
  text-align: center;
}

.stat-card .big-number {
  font-size: 54px;
  line-height: 1;
  margin: 4px 0 4px;
}

.account-panel {
  margin-top: -8px;
}

.text-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 16px;
  margin: 8px 0;
  color: var(--main);
  background: white;
  font: inherit;
  font-weight: 700;
}

.text-input::placeholder { color: rgba(1, 45, 237, 0.42); }

.account-actions { margin-top: 10px; }
.sync-status { font-weight: 900; }

.account-panel {
  margin-top: 16px;
}

.account-panel h2 {
  font-size: 28px;
}

.text-input {
  width: 100%;
  border: 1px solid var(--border);
  color: var(--main);
  background: white;
  border-radius: 18px;
  padding: 14px 16px;
  font: inherit;
  font-weight: 700;
  margin: 8px 0;
  outline: none;
}

.text-input::placeholder {
  color: rgba(1, 45, 237, 0.45);
}

.account-actions {
  margin-top: 8px;
}

.auth-locked {
  display: none !important;
}

.sync-status {
  font-weight: 900;
  opacity: 0.75;
}


.password-field {
  position: relative;
}

.password-field .text-input {
  padding-right: 74px;
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 12px;
  font-size: 12px;
  background: transparent;
  color: var(--main);
  border-color: var(--border);
}

.auth-message {
  min-height: 20px;
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 700;
  opacity: 0.85;
}

.auth-message[data-type="error"] {
  color: #b00020;
}

.auth-message[data-type="success"] {
  color: var(--main);
}

.onboarding-panel {
  margin-top: 16px;
}

.setup-block {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.setup-block:first-of-type {
  border-top: none;
}

.field-label {
  font-weight: 900;
  margin: 14px 0 8px;
}

.option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--soft);
  font-weight: 900;
}

.option-row input {
  width: 20px;
  height: 20px;
  accent-color: var(--main);
}

.journey-summary {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  background: var(--soft);
}

.journey-summary + .journey-summary {
  margin-top: 10px;
}

.journey-summary strong,
.journey-summary span {
  display: block;
}

.journey-summary span {
  opacity: 0.72;
  margin-top: 4px;
  line-height: 1.35;
}

.current-stage {
  background: var(--main);
  color: white;
  border-color: var(--main);
}

.auth-choice-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.account-submit {
  width: 100%;
  margin-top: 10px;
}

.text-btn {
  background: transparent;
  border: 0;
  color: var(--main);
  font: inherit;
  font-weight: 900;
  padding: 0;
  margin: 0 0 12px;
  cursor: pointer;
}


.auth-switch {
  margin: 28px 0 0;
  text-align: center;
  font-weight: 500;
}

.inline-link {
  border: 0;
  background: transparent;
  color: var(--main);
  padding: 0;
  border-radius: 0;
  text-decoration: underline;
  font: inherit;
  font-weight: 500;
}


/* Welcome screen */
.welcome-screen {
  min-height: 100%;
  background: var(--bg);
  color: var(--main);
  display: flex;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow-y: auto;
  padding: 56px 28px calc(120px + env(safe-area-inset-bottom));
}

.welcome-inner {
  width: 100%;
  max-width: 560px;
  min-height: 100dvh;
  padding: 56px 28px 48px;
  display: flex;
  flex-direction: column;
}

.welcome-logo {
  margin: 0 0 28px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.welcome-star {
  width: min(330px, 82vw);
  height: min(330px, 82vw);
  object-fit: contain;
  align-self: center;
  margin: 8px 0 30px;
}

.welcome-copy {
  margin-top: 24px;
}

.welcome-copy h1 {
  font-size: 26px;
  line-height: 1.08;
  margin-bottom: 14px;
}

.welcome-copy p {
  font-size: 18px;
  line-height: 1.36;
  opacity: 0.78;
  margin-bottom: 34px;
}

.welcome-next {
  width: 100%;
  padding: 18px;
  border-radius: 28px;
  font-size: 18px;
  margin-top: 0;
}

/* Password recovery is a standalone auth screen.
   Prevent onboarding/app content from appearing underneath it. */
.password-recovery-mode #onboarding,
.password-recovery-mode .screen,
.password-recovery-mode .bottom-nav,
.password-recovery-mode #accountBtn {
  display: none !important;
}

.password-recovery-mode #accountPanel {
  display: block !important;
}

/* Account modal */
.account-panel.account-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  padding: 18px;
  border: 0;
  border-radius: 0;
  background: rgba(1, 45, 237, 0.18);
  box-shadow: none;
  overflow-y: auto;
}

.account-panel.account-modal.hidden {
  display: none !important;
}

.account-modal-content {
  width: min(100%, 520px);
  max-height: min(86dvh, 720px);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 22px 60px rgba(1, 45, 237, 0.22);
}

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

.account-modal-header h2 {
  margin-bottom: 0;
}

#closeAccountModalBtn {
  min-width: 44px;
  font-size: 22px;
  line-height: 1;
}

.account-section {
  border-top: 1px solid var(--border);
  padding: 14px 0;
}

.account-section h3 {
  margin-bottom: 10px;
}

.account-list-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  border-radius: 18px;
  background: var(--soft);
  color: var(--main);
  text-align: left;
}

.account-list-btn span {
  max-width: 48%;
  opacity: 0.72;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-size: 13px;
}

.account-full-btn {
  width: 100%;
  margin-top: 10px;
}

.history-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.history-header h3 {
  margin: 0;
  text-align: center;
}

.history-weekdays,
.history-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.history-weekdays {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 900;
  opacity: 0.65;
  text-align: center;
}

.history-day {
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
  display: grid;
  place-items: center;
  font-weight: 900;
  position: relative;
}

.history-day span {
  font-size: 12px;
}

.history-day.has-workout {
  background: var(--main);
  color: white;
  border-color: var(--main);
}

.history-day.has-workout strong {
  font-size: 15px;
  line-height: 1;
}

.history-empty {
  opacity: 0;
}

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

.history-item {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.history-item span {
  opacity: 0.72;
  font-weight: 700;
}

@media (min-width: 560px) {
  .account-panel.account-modal {
    align-items: center;
  }
}

/* Admin dashboard */
.admin-dashboard-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.admin-user-row {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: white;
}

.admin-user-row strong,
.admin-user-row span {
  display: block;
}

.admin-user-row span {
  color: var(--muted);
  font-size: 13px;
}

.admin-user-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-user-stats span {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--main);
  font-weight: 800;
}

/* UI polish: consistent header spacing and energy cards */
.app {
  padding-left: 18px;
  padding-right: 18px;
}

.topbar {
  align-items: flex-start;
  margin-bottom: 28px;
}

.brand-block {
  gap: 0;
}

.brand-logo {
  width: 134px;
  height: 18px;
  object-fit: contain;
}

#screenTitle {
  padding-top: 18px;
}

#accountBtn {
  margin-top: -8px;
}

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

.energy-option {
  min-height: 190px;
  padding: 10px 8px 14px;
  border-radius: 24px;
  background: white;
  color: var(--main);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 10px 24px rgba(1, 45, 237, 0.04);
}

.energy-option img {
  width: min(158px, 42vw);
  height: min(158px, 42vw);
  object-fit: contain;
  display: block;
}

.energy-option span {
  display: block;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

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

.welcome-screen {
  padding-left: 18px;
  padding-right: 18px;
}

.welcome-inner {
  padding-left: 0;
  padding-right: 0;
}


.selected-energy-card {
  text-align: center;
}

.selected-energy-mascot {
  display: block;
  width: min(240px, 58vw);
  height: min(240px, 58vw);
  object-fit: contain;
  margin: 0 auto 18px;
}

.hero-action-secondary {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,0.72);
  margin-top: 10px;
}

/* Figma alignment pass */
html,
body {
  background: #f7f7f7;
}

:root {
  --radius: 20px;
}

.app {
  padding: 56px 18px 104px;
}

.topbar {
  align-items: center;
  margin-bottom: 42px;
}

.brand-logo {
  width: 134px;
  height: 18px;
  object-fit: contain;
}

#screenTitle {
  display: none !important;
}

#accountBtn {
  margin-top: 0;
  align-self: center;
}

.card,
.hero-card,
.exercise-card,
.text-input,
.option-row,
.journey-summary,
.set-row,
.account-modal-content,
.account-list-btn,
.admin-user-row,
.history-day,
.energy-option,
.welcome-next,
button,
.import-label,
.hero-action,
.bottom-nav,
.nav-btn {
  border-radius: var(--radius) !important;
}

.bottom-nav {
  border-radius: 999px !important;
}

.card,
.hero-card,
.exercise-card {
  padding: 18px;
  margin-bottom: 18px;
}

h1,
h2,
.account-panel h2,
.hero-card h2,
.welcome-copy h1 {
  font-size: 22px;
  line-height: 1.08;
  font-weight: 900;
}

h3 {
  font-size: 18px;
}

/* Welcome/auth screens */
.welcome-screen {
  background: #f7f7f7;
  padding: 56px 18px calc(56px + env(safe-area-inset-bottom));
}

.welcome-inner {
  min-height: calc(100dvh - 112px - env(safe-area-inset-bottom));
  padding: 0;
  max-width: 560px;
}

.welcome-star {
  width: min(276px, 74vw);
  height: min(276px, 74vw);
  margin: 0 auto 48px;
}

.welcome-copy {
  margin-top: auto;
}

.welcome-copy h1 {
  margin-bottom: 8px;
}

.welcome-copy p {
  font-size: 14px;
  line-height: 1.25;
  margin-bottom: 48px;
  opacity: 1;
}

.welcome-next,
.account-submit,
.primary-btn {
  min-height: 52px;
}

#loggedOutAccount h2 {
  font-size: 22px;
  margin-bottom: 8px;
}

#loggedOutAccount .muted {
  font-size: 14px;
  line-height: 1.25;
  margin-bottom: 36px;
}

#loggedOutAccount .text-input,
#loggedOutAccount .password-field {
  margin-bottom: 14px;
}

#loggedOutAccount .password-field .text-input {
  margin: 0;
}

.auth-switch {
  margin-top: 44px;
  font-size: 14px;
}

/* Energy check: text bento cards */
.energy-grid {
  gap: 10px;
  margin-top: 36px;
}

.energy-option {
  min-height: 136px;
  background: var(--main);
  color: #ffffff;
  border-color: var(--main);
  box-shadow: none;
}

.energy-option img {
  display: none;
}

.energy-option span {
  color: #ffffff;
  font-size: 14px;
}

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

/* Selected energy preview */
.selected-energy-stack {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

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

.selected-energy-mascot-card {
  position: relative;
  min-height: 280px;
  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;
  font-size: 12px;
  font-weight: 900;
}

.selected-energy-mascot {
  width: min(250px, 68vw);
  height: min(250px, 68vw);
  margin: 0 auto;
}

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

.selected-workout-preview .text-btn,
.selected-back-btn {
  color: #ffffff;
  text-align: left;
  margin: 0 0 10px;
  font-weight: 500;
  text-decoration: none;
}

.selected-workout-preview h2 {
  margin: 0;
}

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

.selected-workout-preview .hero-action {
  margin-top: 8px;
}

.hero-action-secondary {
  margin-top: 10px;
  background: transparent;
  color: var(--main);
  border-color: var(--border);
}

/* Remove nested-card feeling where possible */
#generatedWorkoutCard + #exercisePreview {
  margin-top: 0;
}

.logged-out .app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.logged-out .topbar {
  margin-bottom: 148px;
}

.logged-out #accountPanel:not(.account-modal) {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.logged-out #loggedOutAccount {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 56px - 18px - 104px - 148px);
}

.logged-out #authWelcome,
.logged-out #authLoginForm {
  display: flex;
  flex-direction: column;
  min-height: inherit;
}

.logged-out #authWelcome.hidden,
.logged-out #authLoginForm.hidden,
.logged-out #authResetForm.hidden {
  display: none !important;
}

.logged-out .account-submit {
  margin-top: 22px;
}

.logged-out .auth-switch {
  margin-top: auto;
  padding-top: 44px;
  padding-bottom: 0;
}

.logged-out #authLoginForm .auth-switch {
  margin-top: auto;
}

.password-recovery-mode #accountPanel {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(1, 45, 237, 0.05);
  padding: 18px;
}

/* Final Figma polish fixes */
.app {
  padding-top: 24px;
  padding-bottom: 128px;
}

.topbar {
  margin-bottom: 42px;
}

.logged-out .topbar {
  margin-bottom: 112px;
}

h1,
h2,
.account-panel h2,
.hero-card h2,
.welcome-copy h1,
#loggedOutAccount h2 {
  font-size: 24px;
  line-height: 1.08;
}

.muted,
.muted-light,
.welcome-copy p,
#loggedOutAccount .muted {
  font-size: 16px;
  line-height: 1.28;
}

/* Welcome screen: bigger star, no scroll, stable bottom CTA */
.welcome-screen {
  padding: 24px 18px calc(32px + env(safe-area-inset-bottom));
  overflow: hidden;
}

.welcome-inner {
  min-height: calc(100dvh - 56px - env(safe-area-inset-bottom));
  padding: 0;
}

.welcome-star {
  width: min(359px, 88vw);
  height: min(359px, 88vw);
  margin: 0 auto 28px;
}

.welcome-copy {
  margin-top: auto;
}

.welcome-copy h1 {
  font-size: 24px;
  margin-bottom: 12px;
}

.welcome-copy p {
  margin-bottom: 44px;
  opacity: 1;
}

/* Auth screens: keep CTA level aligned with welcome */
.logged-out .app {
  min-height: 100dvh;
  padding-top: 24px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
}

.logged-out #loggedOutAccount {
  min-height: calc(100dvh - 24px - 18px - 18px - 112px - 32px - env(safe-area-inset-bottom));
}

.logged-out #authWelcome,
.logged-out #authLoginForm {
  min-height: inherit;
}

.logged-out .account-submit {
  margin-top: auto;
}

.logged-out .auth-switch {
  margin-top: 34px;
  padding-top: 0;
}

#authLoginForm .text-btn {
  align-self: flex-start;
  margin-bottom: 28px;
  font-size: 16px;
  font-weight: 900;
}

/* Energy check should be content directly on the page, not a bento box */
#energyCard.card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}

#energyCard h2 {
  font-size: 24px;
}

.energy-grid {
  gap: 12px;
  margin-top: 34px;
}

.energy-option {
  min-height: 136px;
  border-radius: 20px !important;
}

/* Selected energy: square mascot panel and account-style back link */
.selected-energy-mascot-card {
  width: 100%;
  max-width: 353px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  height: auto;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}

.selected-energy-mascot {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

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

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

/* Generated workout: put regenerate action as a small link above the workout title */
.generated-workout-hero {
  display: grid;
  gap: 12px;
}

.workout-regenerate-btn {
  color: #ffffff;
  text-align: left;
  justify-self: start;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}

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

.generated-workout-hero .muted-light,
.generated-workout-hero h2,
.generated-workout-hero p {
  margin-bottom: 0;
}

/* Bottom nav safe spacing */
.bottom-nav {
  bottom: calc(20px + env(safe-area-inset-bottom));
}


/* Final layout correction pass 2026-06-16 */
html,
body {
  background: #f7f7f7 !important;
}

/* Keep the app header at the original compact height on logged-in screens */
.app {
  padding-top: 24px;
}

.topbar,
.logged-out .topbar {
  margin-bottom: 42px;
}

/* Welcome/auth CTA alignment */
.welcome-screen {
  padding: 24px 18px calc(32px + env(safe-area-inset-bottom));
}

.welcome-inner {
  min-height: calc(100dvh - 56px - env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto 1fr auto auto;
}

.welcome-star {
  width: min(359px, 88vw);
  height: min(359px, 88vw);
  margin: 0 auto;
}

.welcome-copy {
  align-self: end;
  margin-top: 0;
  margin-bottom: 44px;
}

.welcome-copy h1,
#loggedOutAccount h2,
#energyCard h2,
.account-panel h2,
.account-modal-header h2,
.hero-card h2 {
  font-size: 24px !important;
  line-height: 1.08;
}

.welcome-copy p,
#loggedOutAccount .muted,
.muted,
.muted-light {
  font-size: 16px !important;
  line-height: 1.28;
}

.welcome-next {
  margin-top: 0;
  margin-bottom: 68px;
}

.logged-out .app {
  min-height: 100dvh;
  padding-top: 24px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
}

.logged-out #loggedOutAccount {
  min-height: calc(100dvh - 24px - 18px - 42px - 32px - env(safe-area-inset-bottom));
}

.logged-out #authWelcome,
.logged-out #authLoginForm {
  min-height: inherit;
  display: grid;
  grid-template-rows: auto auto auto auto auto 52px auto;
}

.logged-out #authLoginForm {
  grid-template-rows: auto auto auto auto auto 52px auto;
}

.logged-out #authWelcome.hidden,
.logged-out #authLoginForm.hidden,
.logged-out #authResetForm.hidden {
  display: none !important;
}

#loggedOutAccount .text-input,
#loggedOutAccount .password-field {
  margin-bottom: 14px;
}

.logged-out .account-submit {
  margin-top: auto;
  align-self: end;
}

.logged-out .auth-switch {
  margin-top: 34px;
  padding-top: 0;
  padding-bottom: 0;
  align-self: start;
}

#authLoginForm .text-btn {
  align-self: start;
  justify-self: start;
  margin: 0 0 28px;
}

/* Energy check: direct page content and exact square buttons */
#energyCard.card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

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

.energy-option {
  width: 172px;
  height: 172px;
  min-height: 172px;
  padding: 0;
  display: grid;
  place-items: center;
}

/* Selected energy: top-aligned, square mascot panel */
.selected-energy-stack {
  margin-top: 0;
}

.selected-energy-mascot-card {
  width: min(353px, 100%);
  max-width: 353px;
  height: auto;
  aspect-ratio: 1 / 1;
}

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

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

/* Generated workout: regenerate link above title, no huge empty button-like gap */
.generated-workout-hero {
  gap: 12px;
}

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

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

/* Account modal: prevent broken/visible background and start panels at the top */
.account-panel.account-modal {
  background: #f7f7f7 !important;
  align-items: flex-start;
  padding: calc(24px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
}

.account-modal-content {
  max-height: calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  border-radius: 20px !important;
}

#accountHistoryView {
  padding-top: 0;
}

.history-header {
  margin-top: 10px;
}

/* Bottom nav breathing room */
.bottom-nav {
  bottom: calc(20px + env(safe-area-inset-bottom)) !important;
}


/* v4 auth/goal layout repair */
:root { --screen-x: 18px; }
html, body { background: #f7f7f7 !important; }

/* Stable CTA positions on welcome/create/login */
.welcome-screen {
  padding: 24px var(--screen-x) 0 !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}
.welcome-inner {
  min-height: 100dvh !important;
  padding: 0 !important;
  display: block !important;
  position: relative !important;
}
.welcome-star {
  width: min(430px, 94vw) !important;
  height: min(430px, 94vw) !important;
  margin: 0 auto !important;
  display: block !important;
}
.welcome-copy {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(224px + 52px + 38px + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
}
.welcome-copy h1 {
  font-size: 24px !important;
  line-height: 1.08 !important;
  margin: 0 0 12px !important;
}
.welcome-copy p {
  font-size: 16px !important;
  line-height: 1.28 !important;
  margin: 0 !important;
}
.welcome-next {
  position: fixed !important;
  left: var(--screen-x) !important;
  right: var(--screen-x) !important;
  bottom: calc(224px + env(safe-area-inset-bottom)) !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 20 !important;
}

.logged-out .app {
  min-height: 100dvh !important;
  padding: 24px var(--screen-x) 0 !important;
  position: relative !important;
}
.logged-out .topbar { margin-bottom: 0 !important; }
.logged-out #accountPanel.card {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.logged-out #loggedOutAccount { min-height: auto !important; }
.logged-out #authWelcome,
.logged-out #authLoginForm {
  display: block !important;
  min-height: auto !important;
  padding-top: 168px !important;
  position: static !important;
}
.logged-out #authWelcome.hidden,
.logged-out #authLoginForm.hidden,
.logged-out #authResetForm.hidden { display: none !important; }
#loggedOutAccount h2 {
  font-size: 24px !important;
  line-height: 1.08 !important;
  margin: 0 0 12px !important;
}
#loggedOutAccount .muted {
  font-size: 16px !important;
  line-height: 1.28 !important;
  margin: 0 0 38px !important;
}
#authLoginForm .text-btn {
  position: absolute !important;
  left: var(--screen-x) !important;
  top: 150px !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: unset !important;
  align-self: unset !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}
#authLoginForm h2 { margin-top: 76px !important; }
#loggedOutAccount .text-input,
#loggedOutAccount .password-field {
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 0 16px !important;
}
#loggedOutAccount .text-input {
  padding: 0 16px !important;
  border-radius: 20px !important;
  font-size: 16px !important;
  line-height: 52px !important;
  box-sizing: border-box !important;
}
#loggedOutAccount .password-field { position: relative !important; }
#loggedOutAccount .password-field .text-input {
  width: 100% !important;
  height: 52px !important;
  padding-right: 88px !important;
  margin: 0 !important;
}
#loggedOutAccount .password-toggle {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 68px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 18px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  background: #fff !important;
}
.logged-out #authWelcome .account-submit,
.logged-out #authLoginForm .account-submit {
  position: fixed !important;
  left: var(--screen-x) !important;
  right: var(--screen-x) !important;
  bottom: calc(224px + env(safe-area-inset-bottom)) !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 20 !important;
}
.logged-out #authWelcome .auth-switch,
.logged-out #authLoginForm .auth-switch {
  position: fixed !important;
  left: var(--screen-x) !important;
  right: var(--screen-x) !important;
  bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  z-index: 20 !important;
}
#authLoginForm .auth-switch .inline-link { text-decoration: underline !important; }
.energy-option {
  width: 172px !important;
  height: 172px !important;
  min-height: 172px !important;
  border-radius: 20px !important;
}
.journey-list { gap: 0 !important; }
.journey-summary,
.journey-summary.current-stage {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--main) !important;
  margin: 0 !important;
}
.journey-summary:last-child { border-bottom: 0 !important; }
.journey-summary strong,
.journey-summary span { display: block !important; }
.journey-summary strong { font-size: 18px !important; line-height: 1.15 !important; }
.journey-summary span { font-size: 16px !important; line-height: 1.28 !important; opacity: .72 !important; margin-top: 4px !important; }
.journey-summary em {
  font-style: normal !important;
  font-weight: 900 !important;
  background: var(--soft) !important;
  border-radius: 999px !important;
  padding: 8px 10px !important;
  white-space: nowrap !important;
}
.bottom-nav { bottom: calc(20px + env(safe-area-inset-bottom)) !important; }


/* v4.1 fixes */
.auth-back-btn,.text-btn{
  margin-top: 60px;
  margin-bottom: 40px;
}
.auth-message{
  min-height:40px;
  margin:12px 0;
  position:relative;
  z-index:2;
}
.welcome-copy p{
  margin-bottom:60px;
}
.welcome-next,
.account-submit{
  min-height:72px;
  padding:18px 24px;
}
.account-submit{
  margin-top:38px;
}
.auth-switch{
  margin-top:60px;
  margin-bottom:60px;
}
.password-toggle{
  width:118px;
  height:44px;
}
.password-field .text-input{
  padding-right:130px;
}
.goal-hero .journey-list,
.journey-list{
  border:none;
}


/* v4.8 auth layout repair — flow-based, no CTA overlap */
:root { --screen-x: 18px; }
html, body { background: #f7f7f7 !important; }

/* CTA baseline: keep the existing auth CTA height/padding */
.account-submit,
.welcome-next {
  min-height: 52px !important;
  height: 52px !important;
  padding: 13px 16px !important;
  border-radius: 20px !important;
  line-height: 1.1 !important;
  box-sizing: border-box !important;
}

/* Welcome: keep CTA inside the normal layout with correct breathing room */
.welcome-screen {
  min-height: 100dvh !important;
  overflow: hidden !important;
  background: #f7f7f7 !important;
  padding: 24px var(--screen-x) calc(60px + env(safe-area-inset-bottom)) !important;
}
.welcome-inner {
  min-height: calc(100dvh - 84px - env(safe-area-inset-bottom)) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.welcome-star {
  width: min(430px, 94vw) !important;
  height: min(430px, 94vw) !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}
.welcome-copy {
  margin-top: auto !important;
  margin-bottom: 38px !important;
}
.welcome-copy h1 {
  font-size: 24px !important;
  line-height: 1.08 !important;
  margin: 0 0 12px !important;
}
.welcome-copy p {
  font-size: 16px !important;
  line-height: 1.28 !important;
  opacity: 1 !important;
  margin: 0 !important;
}
.welcome-next {
  position: static !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Auth screens: no fixed buttons, no auto-pushing CTA into fields */
.logged-out .app {
  min-height: 100dvh !important;
  padding: 24px var(--screen-x) calc(60px + env(safe-area-inset-bottom)) !important;
  background: #f7f7f7 !important;
}
.logged-out .topbar { margin-bottom: 42px !important; }
.logged-out #accountPanel.card {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.logged-out #loggedOutAccount { min-height: 0 !important; }
.logged-out #authWelcome,
.logged-out #authLoginForm {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding-top: 168px !important;
  position: relative !important;
}
.logged-out #authWelcome.hidden,
.logged-out #authLoginForm.hidden,
.logged-out #authResetForm.hidden { display: none !important; }

#loggedOutAccount h2 {
  font-size: 24px !important;
  line-height: 1.08 !important;
  margin: 0 0 12px !important;
}
#loggedOutAccount .muted {
  font-size: 16px !important;
  line-height: 1.28 !important;
  margin: 0 0 38px !important;
}
#loggedOutAccount .text-input,
#loggedOutAccount .password-field {
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 0 16px !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
}
#loggedOutAccount .text-input {
  padding: 0 16px !important;
  font-size: 16px !important;
  line-height: 52px !important;
}
#loggedOutAccount .password-field {
  position: relative !important;
  display: block !important;
}
#loggedOutAccount .password-field .text-input {
  width: 100% !important;
  height: 52px !important;
  padding-right: 88px !important;
  margin: 0 !important;
}
#loggedOutAccount .password-toggle {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 68px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 18px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  background: #fff !important;
}

#loggedOutAccount .auth-message {
  position: static !important;
  min-height: 0 !important;
  margin: 4px 0 0 !important;
  padding: 0 4px !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  pointer-events: auto !important;
}
#loggedOutAccount .auth-message:empty { display: none !important; }

.logged-out #authWelcome .account-submit,
.logged-out #authLoginForm .account-submit,
#loggedOutAccount .account-submit {
  position: static !important;
  width: 100% !important;
  margin: 38px 0 0 !important;
  z-index: 1 !important;
}
.logged-out #authWelcome .auth-switch,
.logged-out #authLoginForm .auth-switch {
  position: static !important;
  margin: 60px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}
#authLoginForm .text-btn {
  position: static !important;
  align-self: flex-start !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}
#authLoginForm h2 { margin-top: 0 !important; }
#authLoginForm .auth-switch .inline-link { text-decoration: underline !important; }

/* Preserve latest square energy cards */
#energyCard.card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.energy-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 172px) !important;
  gap: 12px !important;
  justify-content: center !important;
  margin-top: 34px !important;
}
.energy-option {
  width: 172px !important;
  height: 172px !important;
  min-height: 172px !important;
  border-radius: 20px !important;
}

/* Preserve goal page simplification: no box-in-box for journey stages */
.journey-list { gap: 0 !important; }
.journey-summary,
.journey-summary.current-stage {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--main) !important;
}
.journey-summary:last-child { border-bottom: 0 !important; }
.journey-summary .kicker,
.journey-summary.current-stage .kicker,
.journey-summary h3,
.journey-summary.current-stage h3,
.journey-summary p,
.journey-summary.current-stage p { color: var(--main) !important; }

.bottom-nav { bottom: calc(20px + env(safe-area-inset-bottom)) !important; }

/* v4.9 final auth/welcome alignment fixes */
.logged-out #authWelcome .auth-switch,
.logged-out #authLoginForm .auth-switch {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  margin: 60px auto 0 !important;
  padding: 0 !important;
}

.logged-out #authWelcome .auth-switch *,
.logged-out #authLoginForm .auth-switch * {
  text-align: center !important;
}

.welcome-screen {
  padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
}

.welcome-copy {
  margin-bottom: 38px !important;
}

.welcome-next {
  margin-bottom: 0 !important;
}

/* Login back button: same style, slightly tighter spacing below */
#authLoginForm .text-btn {
  margin-bottom: 12px !important;
}


/* v5 targeted welcome/auth alignment fixes */
/* Keep auth footer links centered */
.logged-out #authWelcome .auth-switch,
.logged-out #authLoginForm .auth-switch {
  text-align: center !important;
  margin: 60px auto 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Welcome CTA sits near the bottom like the bottom navigation */
.welcome-screen {
  padding: 24px var(--screen-x) calc(20px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

.welcome-inner {
  min-height: calc(100dvh - 24px - 20px - env(safe-area-inset-bottom)) !important;
  position: relative !important;
}

.welcome-next {
  position: fixed !important;
  left: var(--screen-x) !important;
  right: var(--screen-x) !important;
  bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  width: auto !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  border-radius: 20px !important;
  z-index: 20 !important;
}

/* Keep a consistent 60px gap between welcome paragraph and CTA */
.welcome-copy {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(20px + 52px + 60px + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
}

.welcome-copy h1 {
  margin: 0 0 12px !important;
}

.welcome-copy p {
  margin: 0 !important;
}

.add-on-panel {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.18);
}

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

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

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

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

html.recovery-boot #welcomeScreen { display: none !important; }


/* Hard screen separation guard: auth/recovery screens must never overlap app screens. */
html.recovery-boot #welcomeScreen,
html.recovery-boot #onboarding,
html.recovery-boot .screen,
html.recovery-boot .bottom-nav,
html.recovery-boot #accountBtn {
  display: none !important;
}

html.recovery-boot .app,
html.recovery-boot #accountPanel,
html.recovery-boot #loggedOutAccount,
html.recovery-boot #authResetForm {
  display: block !important;
}

html.recovery-boot #loggedInAccount,
html.recovery-boot #authWelcome,
html.recovery-boot #authLoginForm {
  display: none !important;
}

body.logged-out #onboarding,
body.logged-out .screen,
body.logged-out .bottom-nav,
body.logged-out #accountBtn {
  display: none !important;
}