.tx-root {
  padding: 10px 0 28px;
}
.tx-screen {
  animation: tx-in 0.2s ease;
}
.tx-hub {
  text-align: center;
  min-height: calc(100dvh - 190px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 16px;
}
.tx-kicker {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #c6f135;
}
.tx-title {
  font-size: 42px;
  line-height: 1;
  margin: 10px 0 8px;
  letter-spacing: -1.4px;
}
.tx-meta {
  font-size: 13px;
  color: var(--mu);
  margin-bottom: 34px;
}
.tx-primary,
.tx-secondary {
  width: 100%;
  min-height: 54px;
  border-radius: 17px;
  font: 900 15px var(--fb);
  cursor: pointer;
}
.tx-primary {
  border: 0;
  background: #c6f135;
  color: #10130f;
}
.tx-secondary {
  margin-top: 10px;
  border: 1px solid var(--bd2);
  background: var(--sf);
  color: var(--tx);
}
.tx-link {
  display: block;
  margin: 17px auto 0;
  border: 0;
  background: none;
  color: var(--mu);
  font: 800 12px var(--fb);
}
.tx-empty {
  max-width: 330px;
  margin: auto;
}
.tx-hub-pex {
  width: 118px;
  height: 118px;
  object-fit: contain;
  margin: 0 auto 12px;
  filter: drop-shadow(0 16px 28px rgba(198, 241, 53, 0.12));
}
.tx-empty .tx-title {
  font-size: 34px;
}
.tx-resume-card {
  margin: 12px 16px 0;
  padding: 18px;
  border-radius: 20px;
  background: radial-gradient(circle at 10% 0, rgba(198, 241, 53, 0.1), transparent 45%), var(--sf);
  border: 1px solid rgba(198, 241, 53, 0.3);
  text-align: left;
}
.tx-resume-kicker {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c6f135;
  margin-bottom: 8px;
}
.tx-resume-card h3 {
  margin: 0 0 4px;
  font-size: 20px;
}
.tx-resume-card p {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--mu);
}
.tx-resume-card .tx-primary { min-height: 50px; }
.tx-resume-card .tx-something {
  width: 100%;
  margin-top: 8px;
  min-height: 40px;
  border: 0;
  background: none;
  color: var(--mu);
  font: 800 12px var(--fb);
}
.tx-page {
  padding: 12px 16px 26px;
}
.tx-page-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.tx-back {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--bd2);
  background: var(--sf);
  color: var(--tx);
  font-size: 23px;
}
.tx-page-head h2 {
  font-size: 24px;
  margin: 0;
}
.tx-pex-card {
  padding: 26px 22px;
  border-radius: 24px;
  background: radial-gradient(circle at 10% 0, rgba(198,241,53,.1), transparent 38%), #111411;
  border: 0;
}
.tx-pex-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tx-pex-avatar {
  width: 86px;
  height: 86px;
  object-fit: contain;
  border-radius: 18px;
  background: #0d0f0e;
}
.tx-pex-row p {
  margin: 0 0 5px;
  color: var(--mu);
  font-size: 12px;
}
.tx-pex-card h3 {
  font-size: 20px;
  line-height: 1.2;
  margin: 0;
}
.tx-pex-actions{margin:22px 0 2px}
.tx-pex-actions .pex-action-carousel{margin-inline:0;padding-inline:calc(50% - 34px);scroll-padding-inline:calc(50% - 34px);gap:4px}
.tx-pex-actions .pex-action-item{flex-basis:68px}
.tx-pex-actions .pex-action-orb{width:62px;height:62px}
.tx-pex-actions .pex-action-label{font-size:9px}
.tx-choices {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.tx-wizard>.tx-choices{display:none}
.tx-choice {
  min-height: 55px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--bd2);
  background: var(--sf);
  color: var(--tx);
  font: 850 14px var(--fb);
  text-align: left;
}
.tx-choice strong,
.tx-choice span {
  display: block;
}
.tx-choice span {
  margin-top: 4px;
  color: var(--mu);
  font-size: 11px;
  font-weight: 700;
}
.tx-split-choice {
  min-height: 68px;
}
.tx-something {
  width: 100%;
  margin-top: 15px;
  border: 0;
  background: none;
  color: var(--mu);
  font: 800 13px var(--fb);
}
/* "Chat with Pex" — always offered alongside the quick-choice buttons above, per
   docs/pex-unified-conversation-experience.md ("quick options start, free conversation
   continues"). Intentionally not a .tx-choice so it doesn't affect that group's own count/layout. */
.tx-chat-cta {
  width: 100%;
  margin-top: 12px;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid var(--abr);
  background: var(--adim);
  color: var(--ac);
  font: 800 14px var(--fb);
}
.tx-text-wrap {
  display: none;
  margin-top: 14px;
}
.tx-text-wrap.on {
  display: flex;
  gap: 8px;
}
.tx-text {
  min-width: 0;
  flex: 1;
  min-height: 50px;
  border-radius: 15px;
  border: 1px solid var(--bd2);
  background: #0b0d0c;
  color: var(--tx);
  padding: 0 14px;
  font: 750 14px var(--fb);
}
.tx-send {
  width: 52px;
  border: 0;
  border-radius: 15px;
  background: #c6f135;
  color: #10130f;
  font-weight: 950;
}
.tx-wizard {
  min-height: calc(100dvh - 190px);
  display: flex;
  flex-direction: column;
}
.tx-progress {
  display: flex;
  gap: 6px;
  margin: 4px 0 30px;
}
.tx-progress i {
  height: 4px;
  flex: 1;
  border-radius: 8px;
  background: var(--bd2);
}
.tx-progress i.on {
  background: #c6f135;
}
.tx-question {
  font-size: 30px;
  line-height: 1.08;
  margin: 8px 0 8px;
}
.tx-question-sub {
  font-size: 13px;
  color: var(--mu);
  margin-bottom: 23px;
}
.tx-building {
  min-height: 60dvh;
  display: grid;
  place-items: center;
  text-align: center;
}
.tx-loader {
  width: 56px;
  height: 56px;
  margin: auto;
  border-radius: 50%;
  border: 4px solid var(--bd2);
  border-top-color: #c6f135;
  animation: tx-spin 0.8s linear infinite;
}
.tx-overview-hero {
  padding: 22px;
  border-radius: 24px;
  background: var(--sf);
  border: 1px solid var(--bd2);
}
.tx-overview-hero h2 {
  font-size: 34px;
  margin: 7px 0;
}
.tx-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--mu);
  font-size: 12px;
}
.tx-explain {
  font-size: 14px;
  line-height: 1.55;
  margin: 19px 0 0;
}
.tx-exercises {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}
.tx-ex-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--bd);
  border-radius: 16px;
  background: var(--sf);
  color: var(--tx);
  text-align: left;
}
.tx-ex-num {
  width: 31px;
  height: 31px;
  border-radius: 10px;
  background: rgba(198, 241, 53, 0.12);
  color: #c6f135;
  display: grid;
  place-items: center;
  font-weight: 950;
}
.tx-ex-main {
  flex: 1;
}
.tx-ex-main strong,
.tx-ex-main span {
  display: block;
}
.tx-ex-main span {
  font-size: 10px;
  color: var(--mu);
  margin-top: 4px;
}
.tx-library-section {
  margin-top: 24px;
}
.tx-library-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--mu);
}
.tx-plan-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  margin: 8px 0;
  border: 1px solid var(--bd2);
  border-radius: 17px;
  background: var(--sf);
  color: var(--tx);
  text-align: left;
}
.tx-plan-row strong,
.tx-plan-row span {
  display: block;
}
.tx-plan-row span {
  font-size: 10px;
  color: var(--mu);
  margin-top: 5px;
}
.tx-active {
  font-size: 9px;
  color: #c6f135 !important;
  text-transform: uppercase;
  font-weight: 900;
}
.tx-library-current + .tx-library-section {
  margin-top: 14px;
}
.tx-current-card {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 10px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(198, 241, 53, 0.35);
  background: radial-gradient(circle at 12% 0, rgba(198, 241, 53, 0.14), transparent 45%), var(--sf);
  color: var(--tx);
}
.tx-current-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #10130f;
  background: #c6f135;
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 10px;
}
.tx-current-name {
  display: block;
  font-size: 19px;
  line-height: 1.2;
  margin-bottom: 10px;
}
.tx-current-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--mu);
  margin-bottom: 10px;
}
.tx-current-next {
  font-size: 12px;
  font-weight: 800;
  color: #c6f135;
}
.tx-current-empty {
  margin-top: 10px;
  padding: 20px;
  border-radius: 20px;
  border: 1px dashed var(--bd2);
  background: var(--sf);
  text-align: center;
}
.tx-current-empty strong {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
}
.tx-current-empty p {
  font-size: 12px;
  color: var(--mu);
  margin: 0 0 14px;
}
.tx-library-archived .tx-plan-row {
  opacity: 0.62;
}
.tx-detail-grid {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}
.tx-info {
  padding: 16px;
  border: 1px solid var(--bd);
  border-radius: 16px;
  background: var(--sf);
}
.tx-info span,
.tx-info strong {
  display: block;
}
.tx-info span {
  font-size: 9px;
  color: var(--mu);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 5px;
}
.tx-media {
  width: 100%;
  border: 0;
  color: var(--tx);
  aspect-ratio: 16/10;
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(198, 241, 53, 0.18),
      transparent 35%
    ),
    #121513;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tx-media-fallback {
  display: grid;
  gap: 7px;
  text-align: center;
}
.tx-media-fallback small { color: #c6f135; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
.tx-media-fallback strong { font-size: 24px; }
.tx-media-fallback em { color: var(--mu); font-size: 11px; font-style: normal; }
.tx-media img {
  width: 45%;
  height: 90%;
  object-fit: contain;
}
.tx-copy-section {
  margin: 20px 0;
}
.tx-copy-section h3 {
  font-size: 13px;
  margin: 0 0 8px;
}
.tx-copy-section p,
.tx-copy-section li {
  font-size: 13px;
  line-height: 1.55;
  color: #c9ccc8;
}
.tx-screen-full {
  position: fixed;
  inset: 0;
  z-index: 6100;
  background: #0b0b0d;
  overflow-y: auto;
  padding: calc(12px + var(--sat)) 16px calc(24px + var(--sab));
}
.tx-complete {
  text-align: center;
  min-height: 85dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tx-complete-mark {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  background: #c6f135;
  color: #10130f;
  font-size: 34px;
  font-weight: 950;
}
.tx-complete h2 {
  font-size: 38px;
  margin: 0;
}
.tx-insight {
  font-size: 17px;
  line-height: 1.4;
  margin: 22px auto;
  max-width: 320px;
}
.tx-complete-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0 26px;
}
.tx-complete-stats div {
  padding: 14px 6px;
  border: 1px solid var(--bd);
  border-radius: 15px;
  background: var(--sf);
}
.tx-complete-stats strong,
.tx-complete-stats span {
  display: block;
}
.tx-complete-stats span {
  font-size: 9px;
  color: var(--mu);
  margin-top: 4px;
}
.training-tabs {
  opacity: 0.68;
  padding: 4px !important;
}
.training-tab {
  font-size: 10px !important;
}
#ov-aw.aw-ov .live-weight,
#ov-aw.aw-ov .live-reps {
  pointer-events: none;
  caret-color: transparent;
}
#btn-aw-finish[hidden] { display: none !important; }
#live-next:disabled { opacity: .45; }
@keyframes tx-in {
  from {
    opacity: 0.2;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tx-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tx-screen,
  .tx-loader {
    animation: none;
  }
}
@media (min-width: 720px) {
  .tx-page,
  .tx-hub {
    max-width: 760px;
    margin: auto;
  }
  .tx-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .tx-exercises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx-screen-full {
    left: 50%;
    width: 430px;
    transform: translateX(-50%);
  }
}
.tx-complete-ov {
  background: #0b0b0d !important;
}
.tx-complete-ov .sum-box {
  background: #0b0b0d !important;
  border: 0 !important;
  text-align: center;
}
.tx-complete-ov .sum-kicker {
  color: #c6f135;
}
.tx-complete-ov .sum-leave {
  background: #c6f135 !important;
  color: #10130f !important;
  border-radius: 17px !important;
  min-height: 54px;
}
.tx-page {
  padding-bottom: calc(132px + var(--sab)) !important;
}
.tx-page > .tx-link {
  min-height: 48px;
  margin-bottom: 110px;
}
#ov-aw.aw-ov.on {
  background: #0b0b0d !important;
  background-image: none !important;
  opacity: 1 !important;
  isolation: isolate;
  box-shadow: 0 0 0 100vmax #0b0b0d !important;
  z-index: 6200 !important;
}
#ov-aw.aw-ov:not(.on) {
  pointer-events: none !important;
}
#ov-aw.aw-ov.on .aw-sc {
  background: #0b0b0d !important;
  min-height: 0;
  flex: 1;
}
#ov-aw.aw-ov.on #live-set-list .live-set-row {
  display: none !important;
}

/* ═══════════ PREMIUM ACTIVE WORKOUT (v20) ═══════════ */

.v20-workout {
  animation: v20-rise 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes v20-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Exercise Navigator */
.v20-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 14px;
  margin: -2px -2px 4px;
  scrollbar-width: none;
}
.v20-nav::-webkit-scrollbar { display: none; }
.v20-chip-add{min-width:58px!important;justify-content:center!important;border-color:var(--abr)!important;background:var(--adim)!important;color:var(--ac)!important;font-size:22px!important;font-weight:900!important}
.v20-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--bd2);
  background: var(--sf);
  color: var(--mu);
  font: 800 12px var(--fb);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.v20-chip:active { transform: scale(0.96); }
.v20-chip.current {
  background: #c6f135;
  border-color: #c6f135;
  color: #10130f;
  font-weight: 900;
}
.v20-chip.done {
  color: #c6f135;
  border-color: rgba(198, 241, 53, 0.3);
}
.v20-chip-check { font-size: 11px; }

/* Permanent Pex Coach — large transparent artwork, no avatar circle, no card */
.v20-coach {
  margin-bottom: 22px;
  text-align: center;
}
.v20-coach-art {
  position: relative;
  width: 100%;
  height: clamp(120px, 34vw, 150px);
  overflow: hidden;
  margin-bottom: 8px;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
.v20-coach-avatar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 136%;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 16px 22px rgba(198, 241, 53, 0.18));
}
.v20-coach-line {
  margin: 0 0 16px;
  padding: 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: var(--tx);
  line-height: 1.35;
}
.v20-coach-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.v20-coach-actions button {
  min-height: 44px;
  padding: 0 4px;
  border-radius: 12px;
  border: 1px solid var(--bd2);
  background: var(--sf2);
  color: var(--tx);
  font: 800 11px var(--fb);
}
.v20-coach-actions button:active { background: var(--adim); color: var(--ac); }

/* Exercise header */
.v20-header {
  margin-bottom: 18px;
}
.v20-header h1 {
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 6px;
  letter-spacing: -0.5px;
}
.v20-header p {
  margin: 0;
  font-size: 13px;
  color: var(--mu);
  text-transform: capitalize;
}

/* Today's Goal */
.v20-goal-card {
  padding: 16px;
  border-radius: 18px;
  background: var(--sf);
  border: 1px solid var(--bd);
  margin-bottom: 18px;
}
.v20-goal-kicker {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #c6f135;
  margin-bottom: 10px;
}
.v20-goal-main {
  display: flex;
  gap: 28px;
}
.v20-goal-main strong {
  display: block;
  font-size: 26px;
  line-height: 1;
}
.v20-goal-main span {
  display: block;
  font-size: 10px;
  color: var(--mu);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-top: 4px;
}
.v20-goal-card p {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mu);
}

.v20-rest-slot:empty { display: none; }
/* The idle "Ready ✓" state is not an actual transition — only the live
   countdown earns the visual weight of its own bar. */
.v20-rest-slot .v15-rest-pill.idle { display: none; }

/* Weight / Reps — single entry point */
.v20-entry {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}
.v20-field-label {
  display: block;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--mu);
  margin-bottom: 8px;
}
.v20-stepper-row {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  gap: 10px;
  align-items: center;
}
.v20-stepper-btn {
  height: 56px;
  border-radius: 16px;
  border: 1px solid var(--bd2);
  background: var(--sf2);
  color: #c6f135;
  font-size: 26px;
  font-weight: 900;
}
.v20-stepper-btn:active { background: var(--adim); }
.v20-value-input {
  width: 100%;
  height: 56px;
  border-radius: 16px;
  border: 1px solid var(--bd);
  background: var(--sf);
  color: var(--tx);
  text-align: center;
  font: 900 24px var(--fb);
  -moz-appearance: textfield;
}
.v20-value-input::-webkit-outer-spin-button,
.v20-value-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.v20-entry-empty {
  padding: 16px;
  border-radius: 16px;
  border: 1px dashed var(--bd2);
  color: var(--mu);
  font-size: 12px;
  text-align: center;
}

.v20-log-btn {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 18px;
  background: #c6f135;
  color: #10130f;
  font: 950 16px var(--fb);
  margin-bottom: 22px;
  transition: transform .12s cubic-bezier(.2,1.4,.3,1);
}
.v20-log-btn:active { transform: scale(0.97); }
.v20-log-btn[hidden] { display: none; }

/* Sets — always visible, one clean container with subtle dividers */
.v20-sets { margin-bottom: 18px; }
.v20-sets-kicker {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mu);
  margin-bottom: 8px;
}
.v20-sets-list {
  border-radius: 16px;
  border: 1px solid var(--bd);
  background: var(--sf);
  overflow: hidden;
}
.v20-set-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--bd);
  background: none;
  color: var(--tx);
  font: 800 13px var(--fb);
  text-align: left;
}
.v20-set-row:last-child { border-bottom: 0; }
.v20-set-icon {
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  font-size: 12px;
  color: var(--mu);
}
.v20-set-label {
  width: 46px;
  flex-shrink: 0;
  color: var(--mu);
  font-weight: 800;
}
.v20-set-value {
  flex: 1;
  min-width: 0;
  text-align: right;
  color: var(--tx);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v20-set-row.done { opacity: 0.62; cursor: pointer; }
.v20-set-row.done .v20-set-icon { color: #c6f135; }
.v20-set-row.current { background: rgba(198, 241, 53, 0.08); }
.v20-set-row.current .v20-set-icon,
.v20-set-row.current .v20-set-label,
.v20-set-row.current .v20-set-value { color: #c6f135; }
.v20-set-row.upcoming { cursor: default; }
.v20-set-row.upcoming .v20-set-value { color: var(--mu); font-weight: 700; }

/* Per-row edit/delete controls — always visible, never hidden behind an
   undocumented row tap. Sized to a 44x44 touch target regardless of the
   compact icon glyph inside. */
.v20-set-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: 4px;
}
.v20-set-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mu);
  flex-shrink: 0;
}
.v20-set-action-btn:active { background: var(--sf2); }
.v20-set-action-btn svg { width: 16px; height: 16px; display: block; }
.v20-set-edit-btn { color: var(--tx); }
.v20-set-delete-btn { color: #ef4444; }
.v20-add-set {
  width: 100%;
  min-height: 44px;
  border: 1px dashed var(--bd2);
  border-radius: 14px;
  background: transparent;
  color: #c6f135;
  font: 800 12px var(--fb);
  margin-top: 8px;
}
.v20-empty {
  padding: 14px;
  color: var(--mu);
  font-size: 12px;
  text-align: center;
}

/* Tap-a-logged-set inline edit row */
.v20-set-row-edit {
  display: grid;
  grid-template-columns: 46px 1fr auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 8px 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bd);
}
.v20-set-row-edit:last-child { border-bottom: 0; }
.v20-set-row-edit .v20-set-label { grid-row: 1; grid-column: 1; color: var(--mu); font: 800 13px var(--fb); }
.v20-set-row-edit .v20-set-edit-weight { grid-row: 1; grid-column: 2; }
.v20-set-row-edit .v20-set-edit-sep { grid-row: 1; grid-column: 3; color: var(--mu); font-weight: 800; }
.v20-set-row-edit .v20-set-edit-reps { grid-row: 1; grid-column: 4; }
.v20-set-edit-weight, .v20-set-edit-reps {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--bd2);
  background: var(--sf2);
  color: var(--tx);
  font: 800 14px var(--fb);
  text-align: center;
  width: 100%;
}
.v20-set-row-edit .v20-set-edit-delete,
.v20-set-row-edit .v20-set-edit-cancel,
.v20-set-row-edit .v20-set-edit-save {
  grid-row: 2;
  min-height: 44px;
  border-radius: 12px;
  font: 800 12px var(--fb);
}
.v20-set-row-edit .v20-set-edit-delete { grid-column: 1 / 3; border: 1px solid #ef444455; background: transparent; color: #ef4444; }
.v20-set-row-edit .v20-set-edit-cancel { grid-column: 3; border: 1px solid var(--bd2); background: var(--sf2); color: var(--tx); }
.v20-set-row-edit .v20-set-edit-save { grid-column: 4; border: 0; background: #c6f135; color: #10130f; }
.v20-set-row-edit button:disabled { opacity: 0.5; }

/* Footer */
.v20-footer {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
  margin-top: 4px;
}
.v20-footer-btn {
  min-height: 54px;
  border-radius: 16px;
  font: 900 14px var(--fb);
}
.v20-footer-back {
  border: 1px solid var(--bd2);
  background: var(--sf2);
  color: var(--tx);
}
.v20-footer-next {
  border: 0;
  background: #c6f135;
  color: #10130f;
}

/* Bottom sheets: Demo / Form / Progress / History */
.v20-sheet-host {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.v20-sheet-host.on { pointer-events: auto; }
.v20-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity .22s ease;
}
.v20-sheet-host.on .v20-sheet-backdrop { opacity: 1; }
.v20-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 24px 24px 0 0;
  padding: 10px 18px calc(20px + var(--sab));
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.v20-sheet-host.on .v20-sheet { transform: translateY(0); }
.v20-sheet-grip {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--bd2);
  margin: 4px auto 12px;
}
.v20-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.v20-sheet-head h3 {
  margin: 0;
  font-size: 17px;
}
.v20-sheet-close {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--bd2);
  background: var(--sf2);
  color: var(--tx);
  font-size: 18px;
}
.v20-sheet-body {
  overflow-y: auto;
  padding-bottom: 6px;
}

/* In-DOM confirm sheet — replaces window.confirm() on the workout screen */
.v20-confirm-host { position: fixed; inset: 0; z-index: 7000; pointer-events: none; }
.v20-confirm-host.on { pointer-events: auto; }
.v20-confirm-host .v20-sheet-backdrop { position: fixed; }
.v20-confirm-sheet { position: fixed; }
.v20-confirm-msg {
  margin: 6px 0 18px;
  font: 700 14px var(--fb);
  color: var(--tx);
  line-height: 1.4;
}
.v20-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
}
.v20-confirm-cancel, .v20-confirm-ok {
  min-height: 52px;
  border-radius: 16px;
  font: 900 14px var(--fb);
}
.v20-confirm-cancel { border: 1px solid var(--bd2); background: var(--sf2); color: var(--tx); }
.v20-confirm-ok { border: 0; background: #c6f135; color: #10130f; }
.v20-confirm-ok.v20-confirm-danger { background: #ef4444; color: #fff; }

.v20-demo-media {
  width: 100%;
  min-height: 200px;
  border-radius: 18px;
  background: radial-gradient(circle, rgba(198,241,53,.14), transparent 55%), var(--sf2);
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 6px;
}
.v20-demo-media img { width: 100%; height: 100%; object-fit: contain; }
.v20-demo-fallback svg { width: 90%; }
.v20-form-section { margin-bottom: 18px; }
.v20-form-kicker {
  display: block;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--mu);
  margin-bottom: 8px;
}
.v20-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.v20-chip-pill {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--adim);
  color: var(--ac);
  font-size: 11px;
  font-weight: 800;
  text-transform: capitalize;
}
.v20-form-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--tx);
}
.v20-form-mistakes { list-style: none; padding-left: 0; color: var(--mu); }
.v20-progress-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.v20-stat {
  padding: 12px;
  border-radius: 14px;
  background: var(--sf);
  border: 1px solid var(--bd);
}
.v20-stat span {
  display: block;
  font-size: 9px;
  color: var(--mu);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 4px;
}
.v20-stat strong { font-size: 16px; }
.v20-progress-rec p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tx);
}
.v20-history-list { display: grid; gap: 8px; }
.v20-history-row {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--sf);
  border: 1px solid var(--bd);
}
.v20-history-row strong { display: block; font-size: 12px; margin-bottom: 4px; }
.v20-history-row span { font-size: 12px; color: var(--mu); }

/* Progress chart */
.v20-progress-chart {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--sf);
  border: 1px solid var(--bd);
}
.v20-progress-chart svg { width: 100%; height: 56px; display: block; }
.v20-progress-chart-label {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--mu);
}

/* Coach guided sheet */
.v20-coach-sheet-choices { display: grid; gap: 10px; }
.v20-choice {
  min-height: 50px;
  padding: 0 16px;
  text-align: left;
  border-radius: 14px;
  border: 1px solid var(--bd2);
  background: var(--sf);
  color: var(--tx);
  font: 800 14px var(--fb);
}
.v20-something {
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--mu);
  font: 800 12px var(--fb);
}
.v20-coach-sheet-input { display: flex; gap: 8px; margin-top: 4px; }
.v20-coach-sheet-input[hidden] { display: none; }
.v20-coach-sheet-input input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid var(--bd2);
  background: var(--sf2);
  color: var(--tx);
  padding: 0 14px;
  font: 750 14px var(--fb);
  box-sizing: border-box;
}
.v20-coach-sheet-input button {
  width: 46px;
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  background: #c6f135;
  color: #10130f;
  font-weight: 950;
}
.v20-coach-answer p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tx);
}
.v20-coach-back {
  border: 0;
  background: none;
  color: var(--mu);
  font: 800 12px var(--fb);
  padding: 0;
}
.v20-coach-answer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* "Chat with Pex" — the always-available doorway into the full conversation surface, next to
   (never instead of) the quick deterministic choices above it. */
.v20-chat-cta {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--abr);
  background: var(--adim);
  color: var(--ac);
  font: 800 13px var(--fb);
  width: 100%;
  margin-top: 6px;
}
.v20-chat-cta-inline {
  width: auto;
  min-height: 36px;
  margin-top: 0;
  padding: 0 14px;
  font-size: 12px;
}

/* Header overflow — quiet End Workout while sets remain */
.v20-hdr-overflow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.v20-hdr-overflow-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--bd2);
  background: var(--sf2);
  color: var(--tx);
  font-size: 18px;
  line-height: 1;
}
.v20-hdr-overflow-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 168px;
  padding: 6px;
  border-radius: 14px;
  background: var(--sf);
  border: 1px solid var(--bd);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  z-index: 10;
}
.v20-hdr-overflow-menu.open { display: block; }
.v20-hdr-overflow-menu button {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  text-align: left;
  border: 0;
  background: none;
  color: var(--tx);
  font: 800 13px var(--fb);
  border-radius: 10px;
}
.v20-hdr-overflow-menu button:active { background: var(--sf2); }

@media (prefers-reduced-motion: reduce) {
  .v20-workout, .v20-sheet, .v20-sheet-backdrop, .v20-log-btn, .v20-chip { animation: none !important; transition: none !important; }
}

/* ═══════════ WEB-ONLY LAYOUT + SAFE-AREA FIXES (Active Workout) ═══════════
   Root cause of the "zoomed"/clipped look: --sat and --sab (styles.css)
   are defined as var(--safe-area-inset-top, var(--sat))/var(--safe-area-inset-bottom, var(--sab))
   — a fallback that references itself, since --safe-area-inset-top/bottom
   are never defined as real custom properties anywhere. That is a genuine
   CSS variable cycle, so both resolve to the guaranteed-invalid value on
   every platform. Any calc()/padding shorthand that depends on them is
   therefore invalid at computed-value time and collapses entirely — which
   silently zeroed out ALL of the workout header's and scroll area's
   padding (top, sides, and bottom together, since it's one shorthand),
   pinning every control flush against the raw screen edges with no safe
   top/bottom clearance. Fixed here with env(safe-area-inset-*) directly,
   scoped to html.apex-web only so native's existing layout is untouched. */
html.apex-web #ov-aw.aw-ov .aw-hdr {
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px !important;
  box-sizing: border-box;
}
html.apex-web #ov-aw.aw-ov #aw-scroll {
  padding: 14px 16px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box;
}
html.apex-web .v20-sheet {
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
}

/* Everything in the workout screen sizes itself relative to its own box —
   never wider than the viewport regardless of platform quirks. */
html.apex-web #ov-aw.aw-ov,
html.apex-web #ov-aw.aw-ov * {
  box-sizing: border-box;
}
html.apex-web #ov-aw.aw-ov {
  max-width: min(430px, 100vw);
}

/* Web renders in a real browser chrome (address bar, window frame) rather
   than a packaged app shell, so the same mobile-app control sizes read as
   oversized. Trim them back for web only; native keeps its original values. */
html.apex-web .v20-header h1 { font-size: clamp(22px, 6.2vw, 28px); }
html.apex-web .v20-goal-main strong { font-size: 22px; }
html.apex-web .v20-stepper-row { grid-template-columns: 48px 1fr 48px; }
html.apex-web .v20-stepper-btn { height: 48px; font-size: 22px; }
html.apex-web .v20-value-input { height: 48px; font-size: 21px; }
html.apex-web .v20-log-btn { min-height: 52px; }
html.apex-web .v20-footer-btn { min-height: 48px; }
html.apex-web .v20-chip { height: 40px; padding: 0 14px; }
html.apex-web .v20-coach-actions button { min-height: 42px; }

/* Sensible reading width on desktop web without touching the shared
   #ov-aw max-width (already 430px) — just keep it visually centered and
   never let inner content force horizontal scrolling on ultra-narrow
   viewports (e.g. a resized desktop window). */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  html.apex-web #ov-aw.aw-ov { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6); }
}
@media (max-width: 359px) {
  html.apex-web .v20-header h1 { font-size: 21px; }
  html.apex-web #ov-aw.aw-ov #aw-scroll { padding-left: 12px !important; padding-right: 12px !important; }
}
@media (max-width: 380px) {
  .v20-set-row { gap: 6px; padding: 8px 10px; }
  .v20-set-label { width: 38px; }
  .v20-set-actions { gap: 0; margin-left: 2px; }
}