/* ===============================================================
   FIZZEEK Phase A: UX Enhancements
   - Micro-interactions & feedback
   - Typography (Inter web font)
   - Skeleton loaders
   - Reduced motion support
   =============================================================== */

/* -- Inter Web Font ------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
}

/* -- Micro-Interactions: Button Press ------------------------- */
button, .back, .nav-btn, .day-col, .stepper-btn, .rest-btn,
.timer-btn, .dock-timer-btn, .bex-expand-btn, .unit-option,
.picker-item, .sheet-month-nav, .pr-toggle-btn, .kb-key,
.legend-tab, .menu-btn, .settings-item {
  transition: transform 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.12s ease;
}

button:active, .back:active, .nav-btn:active, .day-col:active,
.stepper-btn:active, .rest-btn:active, .timer-btn:active,
.dock-timer-btn:active, .bex-expand-btn:active, .unit-option:active,
.picker-item:active, .sheet-month-nav:active, .kb-key:active,
.legend-tab:active, .menu-btn:active, .settings-item:active {
  transform: scale(0.95);
  opacity: 0.85;
}

/* Spring back on release */
button:not(:active), .back:not(:active), .stepper-btn:not(:active) {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.15s ease;
}

/* -- Micro-Interactions: Card Expand ------------------------- */
.bex-card-wrapper {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bex-card-wrapper.bex-inline-open {
  transition: all 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* -- Micro-Interactions: Progress Ring Smooth Fill ------------ */
.progress-ring-fill,
.day-ring-fill,
.ins-ring-fill,
[class*="ring-fill"] {
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -- Micro-Interactions: Set Completion Checkmark Draw ------- */
@keyframes checkDraw {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}

.set-check svg polyline {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}

.set-check.checked svg polyline {
  animation: checkDraw 0.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* -- Micro-Interactions: Input Focus Glow -------------------- */
.set-input:focus {
  box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(201,168,76,0.3);
  transition: box-shadow 0.2s ease;
}

.set-input.cable:focus {
  box-shadow: 0 0 0 2px var(--blue), 0 0 12px rgba(126,181,226,0.3);
}

/* -- Micro-Interactions: Number Stepper Bounce --------------- */
@keyframes stepBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.stepper-btn.just-pressed {
  animation: stepBounce 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* -- Micro-Interactions: Day Selection Pop ------------------- */
.day-col {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.day-col.selected {
  transform: none;
}

/* -- Micro-Interactions: PR Achievement Burst ---------------- */
@keyframes prBurst {
  0%   { transform: scale(0.5); opacity: 0; }
  50%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes prShine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.pr-badge-new {
  animation: prBurst 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.pr-badge-new::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: prShine 1.5s ease-in-out 0.4s;
  border-radius: inherit;
  pointer-events: none;
}

/* -- Micro-Interactions: Toast Slide ------------------------- */
@keyframes toastSlideIn {
  from { transform: translateY(100%) scale(0.9); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes toastSlideOut {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to   { transform: translateY(100%) scale(0.9); opacity: 0; }
}

/* -- Skeleton Loader ----------------------------------------- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface1) 25%,
    var(--surface2) 37%,
    var(--surface1) 63%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 12px;
  margin-bottom: 8px;
  border-radius: 6px;
}

.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }

/* -- Progress Ring Glow Trails ------------------------------- */
.header-days-ring-fill,
.progress-ring-fill,
.day-ring-fill,
.ins-ring-fill,
.ins-gauge-fill {
  filter: drop-shadow(0 0 4px currentColor);
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.3s ease;
}

/* Pulse on completion */
@keyframes ringComplete {
  0%   { transform: scale(1); filter: drop-shadow(0 0 4px currentColor); }
  50%  { transform: scale(1.04); filter: drop-shadow(0 0 12px currentColor); }
  100% { transform: scale(1); filter: drop-shadow(0 0 6px currentColor); }
}

/* Performance gauge arcs - glow matching their color */
.ins-gauge-fill[stroke*="110,231,183"] {
  filter: drop-shadow(0 0 5px rgba(110,231,183,0.4));
}
.ins-gauge-fill[stroke*="126,181,226"] {
  filter: drop-shadow(0 0 5px rgba(126,181,226,0.4));
}
.ins-gauge-fill[stroke*="217,184,120"] {
  filter: drop-shadow(0 0 5px rgba(217,184,120,0.4));
}

/* Banner progress ring glow */
.bnr-ring-fill {
  filter: drop-shadow(0 0 6px rgba(201,168,76,0.5));
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -- Exercise Card Accent Strip ------------------------------ */
.exercise-overlap-card::after {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2.5px;
  border-radius: 0 3px 3px 0;
  background: var(--gold);
  opacity: 0.25;
  transition: opacity 0.3s ease;
  z-index: 5;
}
.exercise-overlap-card.selected::after {
  opacity: 0.6;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(201,168,76,0.3);
}
body.light-mode .exercise-overlap-card::after {
  background: var(--goldDark);
  opacity: 0.2;
}
body.light-mode .exercise-overlap-card.selected::after {
  opacity: 0.5;
}

/* Active exercise card gold border glow */
.exercise-overlap-card.selected {
  border-color: rgba(201,168,76,0.2) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15),
              0 0 20px rgba(201,168,76,0.06) !important;
}
body.light-mode .exercise-overlap-card.selected {
  border-color: rgba(139,122,94,0.15) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06),
              0 0 15px rgba(139,122,94,0.04) !important;
}

/* -- Set Completion Card Surface Shift ----------------------- */
.ex-card.all-sets-complete {
  background: rgba(110,231,183,0.03) !important;
  border-color: rgba(110,231,183,0.08) !important;
  transition: background 0.5s ease, border-color 0.5s ease;
}
body.light-mode .ex-card.all-sets-complete {
  background: rgba(110,231,183,0.06) !important;
  border-color: rgba(110,231,183,0.12) !important;
}

/* -- Reduced Motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .header-days-ring-fill,
  .progress-ring-fill,
  .ins-gauge-fill,
  .bnr-ring-fill {
    filter: none;
    transition: none;
  }
}

.skeleton-circle {
  border-radius: 50%;
}

.skeleton-card {
  height: 64px;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}

.skeleton-hero {
  height: 180px;
  border-radius: var(--radius-lg);
}

/* Light mode skeleton */
body.light-mode .skeleton {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.06) 25%,
    rgba(0,0,0,0.10) 37%,
    rgba(0,0,0,0.06) 63%
  );
  background-size: 200% 100%;
}

/* -- Smooth Scroll Behavior ---------------------------------- */
.scrollable-content,
.sets-wrap,
.sheet-cal-grid,
.sheet-week-list {
  scroll-behavior: smooth;
}

/* -- Image Loading Fade-In ----------------------------------- */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
}

img[loading="lazy"].loaded,
img[loading="lazy"][complete] {
  opacity: 1;
}

/* Force loaded state for images that are already cached */
img[loading="lazy"] {
  opacity: 1;
}

/* -- Achievement Badge Gallery -------------------------------- */
.badge-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 6px;
  border-radius: var(--radius-md);
  background: var(--surface1);
  border: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.badge-item.unlocked {
  background: linear-gradient(135deg, var(--surface2) 0%, var(--surface3) 100%);
  border-color: rgba(201,168,76,0.25);
  box-shadow: 0 0 12px rgba(201,168,76,0.1);
}

.badge-item.unlocked:active {
  transform: scale(0.96);
}

.badge-item.locked {
  opacity: 0.4;
  filter: grayscale(1);
}

.badge-icon {
  font-size: 28px;
  margin-bottom: 6px;
  line-height: 1;
}

.badge-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.badge-item.unlocked .badge-name {
  color: var(--gold);
}

.badge-desc {
  font-size: 9px;
  color: var(--gray);
  line-height: 1.3;
}

body.light-mode .badge-item {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}

body.light-mode .badge-item.unlocked {
  background: rgba(139,122,94,0.08);
  border-color: rgba(139,122,94,0.2);
}

body.light-mode .badge-item.unlocked .badge-name {
  color: #8B7A5E;
}

/* -- Workout Notes ------------------------------------------- */
.workout-note-wrap {
  padding: 8px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.workout-note-input {
  width: 100%;
  background: var(--surface1);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  padding: 8px 10px;
  resize: none;
  min-height: 36px;
  max-height: 100px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.workout-note-input::placeholder {
  color: var(--gray);
  opacity: 0.6;
}

.workout-note-input:focus {
  border-color: rgba(201,168,76,0.4);
  box-shadow: 0 0 0 2px rgba(201,168,76,0.1);
}

.note-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: var(--gold);
  opacity: 0.7;
}

.note-indicator svg {
  width: 10px;
  height: 10px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2;
}

body.light-mode .workout-note-wrap {
  border-top-color: rgba(0,0,0,0.08);
}

body.light-mode .workout-note-input {
  background: #fff;
  border-color: rgba(0,0,0,0.12);
  color: var(--text);
}

body.light-mode .workout-note-input:focus {
  border-color: rgba(139,122,94,0.4);
  box-shadow: 0 0 0 2px rgba(139,122,94,0.1);
}

/* -- Accessibility: Focus Visible ---------------------------- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

body.light-mode :focus-visible {
  outline-color: #8B7A5E;
}

/* Remove default outline for mouse/touch users */
:focus:not(:focus-visible) {
  outline: none;
}

/* -- Accessibility: Screen Reader Only ----------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -- Accessibility: High Contrast Adjustments ---------------- */
@media (prefers-contrast: high) {
  :root {
    --gray: #B0A890;
    --grayLight: #D4C8A8;
  }

  .set-input {
    border-width: 2px;
  }

  button, .nav-btn, .stepper-btn {
    border-width: 2px;
  }
}

/* -- Progress Photos ------------------------------------------ */
.photo-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
}

.photo-compare-item {
  position: relative;
}

.photo-compare-label {
  display: block;
  text-align: center;
  font-size: 10px;
  color: var(--gray);
  margin-top: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.photo-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 12px;
}

.photo-timeline-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 3/4;
}

.photo-timeline-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-timeline-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 6px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.photo-timeline-meta span {
  font-size: 9px;
  color: #fff;
  font-weight: 500;
}

.photo-capture-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: 2px dashed rgba(201,168,76,0.3);
  border-radius: var(--radius-lg);
  background: rgba(201,168,76,0.05);
  color: var(--gold);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.photo-capture-btn:active {
  transform: scale(0.97);
  background: rgba(201,168,76,0.1);
}

.photo-capture-btn svg {
  width: 20px;
  height: 20px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2;
}

body.light-mode .photo-capture-btn {
  border-color: rgba(139,122,94,0.3);
  background: rgba(139,122,94,0.05);
  color: #8B7A5E;
}

/* -- Enhanced Rest Timer ------------------------------------- */
.rest-next-set-preview {
  padding: 10px 14px;
  margin-top: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.06);
}

.rest-preview-title {
  font-size: 10px;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  font-weight: 600;
}

.rest-preview-details {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rest-preview-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rest-preview-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.rest-preview-label {
  font-size: 9px;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.rest-timer-suggest {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--gold);
  opacity: 0.8;
  padding: 3px 8px;
  background: rgba(201,168,76,0.08);
  border-radius: 20px;
  margin-left: 6px;
}

body.light-mode .rest-next-set-preview {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}

body.light-mode .rest-timer-suggest {
  color: #8B7A5E;
  background: rgba(139,122,94,0.08);
}

/* -- Light Mode: Force readable text on white-text !important overrides -- */
body.light-mode .pr-row-compact.pr-section.pr-inline .pr-label-compact{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .pr-row-compact.pr-section.pr-inline .pr-value-compact{
  color:rgba(0,0,0,0.7) !important;
}
body.light-mode .pr-row-compact.pr-section.pr-inline .pr-date-compact{
  color:rgba(0,0,0,0.5) !important;
}
body.light-mode .meta-dot{
  color:rgba(0,0,0,0.5) !important;
}
body.light-mode [style*="color:rgba(255,255,255"],
body.light-mode [style*="color: rgba(255,255,255"]{
  color:var(--text) !important;
}

/* Force dark text on elements that use white rgba with !important */
body.light-mode .bex-card-hdr *,
body.light-mode .bex-card-body *,
body.light-mode .banner-ex-card *{
  color:inherit;
}
body.light-mode .bex-step-num{
  color:rgba(0,0,0,0.7) !important;
}
body.light-mode .bex-stat-line,
body.light-mode .bex-stat-line *{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .bex-card-hdr .bex-ex-name{
  color:var(--text) !important;
}
body.light-mode .bnr-timer-hint{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .bnr-prog-label{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .dock-label,
body.light-mode .dock-btn .dock-label{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .dur-item-time{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .dur-item-detail{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .dur-item-badge{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .dur-item-reset svg{
  stroke:rgba(0,0,0,0.5) !important;
}
body.light-mode .sc-timer-btn svg{
  stroke:rgba(0,0,0,0.6) !important;
}
body.light-mode .sc-timer-play .sct-play{
  fill:rgba(0,0,0,0.6) !important;
}
body.light-mode .sc-round-num{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .sc-input-x{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .sc-input-goal{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .sc-summary-btn span{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .bex-timer-btn{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .bex-timer-icon{
  stroke:rgba(0,0,0,0.5) !important;
}
body.light-mode .bex-sets-count{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .bex-section-count{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .bex-sec-label{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .bex-day-best-label{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .col-hdr-label{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .superset-meta{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .superset-pr-label{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .superset-input-unit{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .recap-ex-count{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .recap-stat-icon svg{
  stroke:rgba(0,0,0,0.55) !important;
}
body.light-mode .rest-mgmt-empty{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .rest-mgmt-label{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .rest-mgmt-item-date{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .rest-mgmt-current-icon svg{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .ins-days-total{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .ins-pr-caret{
  stroke:rgba(0,0,0,0.5) !important;
}
body.light-mode .sheet-dow-row span{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .sheet-week-dow{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .sheet-week-caret{
  stroke:rgba(0,0,0,0.5) !important;
}
body.light-mode .settings-item-signout .settings-item-icon{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .days-ring-slash{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .sc-tempo-line{
  color:rgba(0,0,0,0.5) !important;
}
body.light-mode .sc-round-timer{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .ex-focus-dot{
  color:rgba(0,0,0,0.5) !important;
}
body.light-mode .ex-focus-equip{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .info-tip-btn.not-got-it{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .ws-item-check.pending svg{
  stroke:rgba(0,0,0,0.5) !important;
}
body.light-mode .ws-item-sets-logged{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .ws-set-sep{
  color:rgba(0,0,0,0.3) !important;
}
body.light-mode .ws-item-pr.no-pr svg{
  fill:rgba(0,0,0,0.4) !important;
}

/* -- Hero Banner Parallax ----------------------------------- */
/* -- Hide banner background muscle image completely ---------- */
.bnr-bg-photo,
.bnr-bg-photo.loaded{
  display:none !important;
  opacity:0 !important;
}

/* -- Progress Ring Breathing Glow --------------------------- */
@keyframes ringBreathe{
  0%,100%{ filter:drop-shadow(0 0 4px rgba(212,148,90,0.3)); }
  50%{ filter:drop-shadow(0 0 12px rgba(212,148,90,0.6)); }
}
.bnr-ring-hero-fill{
  animation:ringBreathe 3s ease-in-out infinite;
}
body.cable-week .bnr-ring-hero-fill{
  animation-name:ringBreatheCable;
}
@keyframes ringBreatheCable{
  0%,100%{ filter:drop-shadow(0 0 4px rgba(126,181,226,0.3)); }
  50%{ filter:drop-shadow(0 0 12px rgba(126,181,226,0.6)); }
}
@media (prefers-reduced-motion: reduce){
  .bnr-ring-hero-fill{ animation:none; }
}

/* -- Ghost Values & "Same as Last Time" --------------------- */
.set-input.has-ghost{
  color:var(--text);
}
.set-input.has-ghost::placeholder{
  color:var(--gold);
  opacity:0.4;
  font-style:italic;
}
.last-time-wrap{
  display:flex;
  justify-content:center;
  padding:6px 0 2px;
  transition:opacity 0.2s, transform 0.2s;
}
.last-time-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 16px;
  border:1px solid rgba(201,168,76,0.25);
  border-radius:20px;
  background:rgba(201,168,76,0.08);
  color:var(--gold);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.5px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.2s ease;
  -webkit-tap-highlight-color:transparent;
}
.last-time-btn:active{
  transform:scale(0.96);
  background:rgba(201,168,76,0.15);
}
.last-time-btn svg{
  opacity:0.7;
}
body.light-mode .last-time-btn{
  border-color:rgba(139,122,94,0.3);
  background:rgba(139,122,94,0.08);
  color:#8B7A5E;
}

/* -- Session Volume Display --------------------------------- */
.session-volume{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.5px;
  color:var(--gray);
  text-transform:uppercase;
  opacity:0;
  transition:opacity 0.3s ease;
}
.session-volume.has-volume{
  opacity:1;
}
.session-volume-val{
  color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.session-volume-unit{
  opacity:0.6;
}

/* -- Auto-Advance Toast ------------------------------------- */
.auto-advance-toast{
  position:fixed;
  bottom:120px;
  left:50%;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  border-radius:24px;
  background:rgba(20,17,12,0.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(201,168,76,0.2);
  color:var(--gold);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.3px;
  z-index:9999;
  animation:toastIn 0.3s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)) both;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  transition:opacity 0.3s, transform 0.3s;
}
@keyframes toastIn{
  from{ opacity:0; transform:translateX(-50%) translateY(10px) scale(0.95); }
  to{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}
body.light-mode .auto-advance-toast{
  background:rgba(255,255,255,0.92);
  border-color:rgba(139,122,94,0.2);
  color:#8B7A5E;
}

/* -- Exercise Card Glass Elevation System ------------------- */
/* Tier 1: Inactive - flat, subtle */
.bex-card-wrapper{
  transition:border-color 0.35s ease, box-shadow 0.35s ease,
             opacity 0.35s ease, background 0.35s ease,
             transform 0.35s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
}

/* Tier 2: Active - glass elevation + gold glow + pulsing border */
@keyframes cardPulseBorder{
  0%,100%{ border-color:rgba(201,169,110,0.28); box-shadow:0 0 0 1px rgba(201,169,110,0.08), 0 8px 32px rgba(0,0,0,0.45); }
  50%{ border-color:rgba(201,169,110,0.45); box-shadow:0 0 0 1px rgba(201,169,110,0.15), 0 12px 40px rgba(0,0,0,0.5), 0 0 20px rgba(201,169,110,0.08); }
}
@keyframes cardPulseBorderCable{
  0%,100%{ border-color:rgba(126,181,226,0.28); box-shadow:0 0 0 1px rgba(126,181,226,0.08), 0 8px 32px rgba(0,0,0,0.45); }
  50%{ border-color:rgba(126,181,226,0.45); box-shadow:0 0 0 1px rgba(126,181,226,0.15), 0 12px 40px rgba(0,0,0,0.5), 0 0 20px rgba(126,181,226,0.08); }
}
/* DISABLED — was causing transparent expanded cards */
.bex-card-wrapper.bex-inline-open{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  animation:none;
  transform:none;
}
body.cable-week .bex-card-wrapper.bex-inline-open{
  animation:none;
}

/* Tier 3: Completed - green tint + muted */
.bex-card-wrapper.ex-fully-done{
  opacity:0.72;
}
.bex-card-wrapper.ex-fully-done::before{
  background:linear-gradient(
    to bottom,
    rgba(52,211,153,0.6) 0%,
    rgba(52,211,153,0.25) 60%,
    rgba(52,211,153,0.0) 100%
  ) !important;
}
body.cable-week .bex-card-wrapper.ex-fully-done::before{
  background:linear-gradient(
    to bottom,
    rgba(52,211,153,0.6) 0%,
    rgba(52,211,153,0.25) 60%,
    rgba(52,211,153,0.0) 100%
  ) !important;
}

/* Light mode glass elevation — DISABLED */
body.light-mode .bex-card-wrapper.bex-inline-open{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  animation:none;
}
@keyframes cardPulseBorderLight{
  0%,100%{ border-color:rgba(150,110,30,0.30); box-shadow:0 4px 20px rgba(0,0,0,0.08); }
  50%{ border-color:rgba(150,110,30,0.50); box-shadow:0 8px 30px rgba(0,0,0,0.12), 0 0 16px rgba(150,110,30,0.06); }
}
body.light-mode .bex-card-wrapper.ex-fully-done{
  opacity:0.75;
}
body.light-mode .bex-card-wrapper.ex-fully-done::before{
  background:linear-gradient(
    to bottom,
    rgba(52,211,153,0.5) 0%,
    rgba(52,211,153,0.15) 100%
  ) !important;
}

/* Reduced motion - disable pulsing */
@media (prefers-reduced-motion: reduce){
  .bex-card-wrapper.bex-inline-open{
    animation:none !important;
  }
}

/* -- Exercise History Bottom Sheet -------------------------- */
.ex-history-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:9998;
  opacity:0; pointer-events:none; transition:opacity 0.3s ease;
}
.ex-history-overlay.open{ opacity:1; pointer-events:auto; }
.ex-history-sheet{
  position:fixed; bottom:0; left:0; right:0; z-index:9999;
  max-height:80vh; overflow-y:auto;
  background:rgba(20,18,16,0.97);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-top:1px solid rgba(201,169,110,0.15);
  border-radius:24px 24px 0 0;
  padding:0 20px 28px;
  transform:translateY(100%);
  transition:transform 0.35s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
}
.ex-history-sheet.open{ transform:translateY(0); }
.ex-history-handle{
  width:40px; height:4px; margin:10px auto 8px;
  border-radius:2px; background:rgba(255,255,255,0.15);
}
.ex-history-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0 12px;
}
.ex-history-title{
  font-size:18px; font-weight:700; color:var(--text);
}
.ex-history-close{
  background:none; border:none; color:var(--gray); font-size:24px;
  cursor:pointer; padding:4px 8px; line-height:1;
}
.ex-history-chart-wrap{
  position:relative;
  margin:0 -8px 16px;
  padding:12px 8px;
  background:rgba(255,255,255,0.03);
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.06);
}
.ex-history-chart-wrap canvas{ width:100%; height:auto; display:block; }
.ex-history-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin-bottom:16px;
}
.ex-hist-stat{
  text-align:center; padding:10px 6px;
  background:rgba(255,255,255,0.03); border-radius:12px;
  border:1px solid rgba(255,255,255,0.06);
}
.ex-hist-stat-val{
  font-size:18px; font-weight:700; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.ex-hist-stat-label{
  font-size:10px; color:var(--gray); text-transform:uppercase;
  letter-spacing:0.5px; margin-top:2px;
}
.ex-hist-stat-date{
  font-size:9px; color:var(--gray); opacity:0.6; margin-top:1px;
}
.ex-history-log{
  max-height:200px; overflow-y:auto;
}
.ex-hist-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.04);
}
.ex-hist-row-date{
  font-size:12px; color:var(--gray); min-width:70px;
}
.ex-hist-row-val{
  font-size:13px; font-weight:600; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.ex-hist-row-trend{
  font-size:11px; font-weight:600; min-width:40px; text-align:right;
}
.ex-hist-row-trend.up{ color:#34D399; }
.ex-hist-row-trend.down{ color:#F87171; }
.ex-hist-row-trend.flat{ color:var(--gray); }

/* Exercise card history button */
.bex-history-btn{
  background:none; border:none; padding:4px;
  color:var(--gray); cursor:pointer; opacity:0.6;
  transition:opacity 0.2s, color 0.2s;
}
.bex-history-btn:active{ opacity:1; color:var(--gold); }
.bex-history-btn svg{ width:16px; height:16px; }

/* Light mode */
body.light-mode .ex-history-sheet{
  background:rgba(244,242,237,0.97);
  border-top-color:rgba(139,122,94,0.15);
}
body.light-mode .ex-history-chart-wrap{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.06);
}
body.light-mode .ex-hist-stat{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.06);
}
body.light-mode .ex-hist-stat-val{ color:#8B7A5E; }
body.light-mode .ex-hist-row{ border-bottom-color:rgba(0,0,0,0.05); }

/* -- Recap Share Button — neutral white-on-dark, matches flat-minimal vocab.
      Gold dropped per design rule (gold reserved for PR only). -- */
.recap-share-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:16px auto 8px;
  padding:11px 24px;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:12px;
  background:transparent;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
  cursor:pointer;
  transition:background 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color:transparent;
}
.recap-share-btn svg{
  width:14px;
  height:14px;
  stroke-width:2;
}
.recap-share-btn:active{
  transform:scale(0.97);
  background:rgba(255,255,255,0.06);
}
body.light-mode .recap-share-btn{
  border-color:rgba(0,0,0,0.20);
  background:transparent;
  color:rgba(0,0,0,0.85);
}
body.light-mode .recap-share-btn:active{
  background:rgba(0,0,0,0.04);
}

/* -- Insight Staggered Reveals ------------------------------ */
.ins-hidden{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.5s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
             transform 0.5s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
}
.ins-visible{
  opacity:1;
  transform:translateY(0);
}

/* ===============================================================
   VISUAL POLISH - Premium Attractiveness Pass
   Spacing, depth, dividers, typography, micro-details
   =============================================================== */

/* -- 1. Spacing & Breathing Room --------------------------- */
.banner-ex-items{
  gap:16px !important;
}
.banner-exercise-list{
  margin-top:28px !important;
}
.insight-sections{
  margin-top:44px !important;
  gap:20px !important;
}
.workout-container{
  padding:2px 8px 12px !important;
}
.bex-section-header{
  margin-bottom:18px !important;
  padding-top:4px !important;
}

/* -- 2. Card Depth & Surface - WARM tones (no blue-purple) -- */
.bex-card-wrapper{
  background:#151310 !important;
  border-color:rgba(201,168,76,0.08) !important;
}
.bex-card-wrapper:not(.bex-inline-open):not(.ex-fully-done){
  box-shadow:0 2px 8px rgba(0,0,0,0.35),
             inset 0 1px 0 rgba(255,245,220,0.03) !important;
}
.bex-card-wrapper .banner-ex-card{
  background:#181512 !important;
}
.bex-card-wrapper .bex-stepper-area{
  background:#151310 !important;
}
.bex-card-wrapper.bex-inline-open{
  background:#1a1714 !important;
  border-color:rgba(201,169,110,0.22) !important;
  box-shadow:0 0 0 1px rgba(201,169,110,0.08),
             0 16px 48px rgba(0,0,0,0.6),
             0 0 28px rgba(201,169,110,0.06) !important;
}
.bex-card-wrapper.bex-inline-open .banner-ex-card{
  background:#1c1916 !important;
}
.bex-card-wrapper.bex-inline-open .bex-stepper-area{
  background:#1a1714 !important;
}
body.cable-week .bex-card-wrapper.bex-inline-open{
  border-color:rgba(126,181,226,0.18) !important;
  box-shadow:0 0 0 1px rgba(126,181,226,0.06),
             0 16px 48px rgba(0,0,0,0.6),
             0 0 28px rgba(126,181,226,0.05) !important;
}
/* Light mode */
body.light-mode .bex-card-wrapper{
  background:#f0ede7 !important;
  border-color:rgba(139,122,94,0.12) !important;
  box-shadow:0 1px 6px rgba(0,0,0,0.06),
             inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
body.light-mode .bex-card-wrapper .banner-ex-card{
  background:#f7f5f0 !important;
}
body.light-mode .bex-card-wrapper .bex-stepper-area{
  background:#f0ede7 !important;
}

/* -- 3. Section Transition Dividers ------------------------ */
.banner-exercise-list::before{
  content:'';
  display:block;
  height:1px;
  margin:0 20% 20px;
  background:linear-gradient(90deg, transparent, rgba(201,168,76,0.12), transparent);
}
body.light-mode .banner-exercise-list::before{
  background:linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent);
}
.insight-sections::before{
  content:'';
  display:block;
  height:1px;
  margin:0 15% 8px;
  background:linear-gradient(90deg, transparent, rgba(201,168,76,0.10), transparent);
}
body.light-mode .insight-sections::before{
  background:linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent);
}
.section-title-divider{
  padding:24px 4px 12px !important;
}

/* -- 4. Typography Scale & Weight -------------------------- */
.bex-pill-name{
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:-0.2px !important;
}
.bex-pill-meta{
  color:rgba(255,255,255,0.60) !important;
  font-weight:600 !important;
}
body.light-mode .bex-pill-meta{
  color:rgba(0,0,0,0.55) !important;
}
.section-title-text{
  font-size:11px !important;
  padding:5px 14px !important;
  letter-spacing:2px !important;
}
.bnr-title{
  letter-spacing:-0.5px !important;
}
.bnr-top-row .bnr-day-label,
.bnr-card [class*="day-label"]{
  font-size:11px !important;
  color:rgba(201,168,76,0.40) !important;
  letter-spacing:3px !important;
}
body.light-mode .bnr-top-row .bnr-day-label,
body.light-mode .bnr-card [class*="day-label"]{
  color:rgba(139,122,94,0.50) !important;
}

/* -- 5. Modern Buttons & Icon Redesign --------------------- */

/* Expand/Chevron button - pill shape, warm tint */
.bex-expand-btn{
  width:34px !important;
  height:34px !important;
  border-radius:12px !important;
  background:rgba(201,168,76,0.06) !important;
  border:1px solid rgba(201,168,76,0.12) !important;
  transition:all 0.2s ease !important;
}
.bex-expand-btn:active{
  background:rgba(201,168,76,0.15) !important;
  transform:scale(0.92) !important;
}
.bex-chev{
  stroke:rgba(201,168,76,0.5) !important;
}
.bex-inline-open .bex-expand-btn{
  background:rgba(201,168,76,0.10) !important;
  border-color:rgba(201,168,76,0.20) !important;
}
.bex-inline-open .bex-chev{
  stroke:var(--gold, #D9B878) !important;
}
body.cable-week .bex-expand-btn{
  background:rgba(126,181,226,0.06) !important;
  border-color:rgba(126,181,226,0.12) !important;
}
body.cable-week .bex-chev{
  stroke:rgba(126,181,226,0.5) !important;
}
body.cable-week .bex-inline-open .bex-expand-btn{
  background:rgba(126,181,226,0.10) !important;
  border-color:rgba(126,181,226,0.20) !important;
}
body.cable-week .bex-inline-open .bex-chev{
  stroke:#7EB5E2 !important;
}
body.light-mode .bex-expand-btn{
  background:rgba(139,122,94,0.06) !important;
  border-color:rgba(139,122,94,0.12) !important;
}
body.light-mode .bex-chev{
  stroke:rgba(139,122,94,0.5) !important;
}

/* History button - match expand button style */
.bex-history-btn{
  opacity:0.5 !important;
  color:rgba(201,168,76,0.5) !important;
}
.bex-history-btn:active{
  opacity:1 !important;
  color:var(--gold) !important;
}
.bex-history-btn svg{
  stroke:currentColor !important;
}

/* Number badge - warm tint, rounded square */
.bex-num-badge-num{
  border-radius:10px !important;
  border:1.5px solid rgba(201,168,76,0.12) !important;
  background:rgba(201,168,76,0.05) !important;
  color:rgba(245,238,216,0.55) !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.2) !important;
}
.bex-inline-open .bex-num-badge-num{
  background:rgba(201,168,76,0.12) !important;
  border-color:rgba(201,168,76,0.30) !important;
  color:#D9B878 !important;
  box-shadow:0 0 12px rgba(201,169,110,0.15) !important;
}
body.cable-week .bex-inline-open .bex-num-badge-num{
  background:rgba(126,181,226,0.12) !important;
  border-color:rgba(126,181,226,0.30) !important;
  color:#7EB5E2 !important;
  box-shadow:0 0 12px rgba(126,181,226,0.15) !important;
}
.bex-card-wrapper.ex-fully-done .bex-num-badge-num{
  background:rgba(52,211,153,0.08) !important;
  border-color:rgba(52,211,153,0.25) !important;
  color:#34D399 !important;
}

/* Status dots under number badge - warm colors */
.bex-dot-check, .bex-status-dot{
  background:rgba(201,168,76,0.12) !important;
}
.bex-dot-check.lit{
  background:#34D399 !important;
  box-shadow:0 0 6px rgba(52,211,153,0.4) !important;
}
.bex-dot-trophy.lit{
  background:#D9B878 !important;
  box-shadow:0 0 6px rgba(217,184,120,0.4) !important;
}

/* Progress dots - larger, warmer */
.bex-coll-prog-dot{
  width:7px !important;
  height:7px !important;
  background:rgba(201,168,76,0.10) !important;
  border:1px solid rgba(201,168,76,0.15) !important;
}
.bex-coll-prog-dot.done{
  background:#34D399 !important;
  border-color:rgba(52,211,153,0.40) !important;
  box-shadow:0 0 4px rgba(52,211,153,0.3);
}
body.light-mode .bex-coll-prog-dot{
  background:rgba(139,122,94,0.10) !important;
  border-color:rgba(139,122,94,0.18) !important;
}

/* Set input fields - warm surface */
.set-input{
  background:rgba(201,168,76,0.04) !important;
  border:1px solid rgba(201,168,76,0.10) !important;
  border-radius:12px !important;
}
.set-input:focus{
  border-color:rgba(201,168,76,0.30) !important;
  box-shadow:0 0 0 2px rgba(201,168,76,0.08) !important;
}
body.cable-week .set-input{
  background:rgba(126,181,226,0.04) !important;
  border-color:rgba(126,181,226,0.10) !important;
}
body.cable-week .set-input:focus{
  border-color:rgba(126,181,226,0.30) !important;
  box-shadow:0 0 0 2px rgba(126,181,226,0.08) !important;
}

/* Stepper +/- buttons - warm pill style */
.stepper-btn, .kb-stepper{
  background:rgba(201,168,76,0.06) !important;
  border:1px solid rgba(201,168,76,0.12) !important;
  color:rgba(245,238,216,0.6) !important;
  border-radius:10px !important;
}
.stepper-btn:active, .kb-stepper:active{
  background:rgba(201,168,76,0.15) !important;
  color:var(--gold) !important;
}

/* -- 6. Muscle Group Image on Cards ------------------------ */

/* Make muscle icon more visible + larger on collapsed cards */
.bex-coll-muscle-icon{
  width:48px !important;
  height:48px !important;
  opacity:0.22 !important;
  right:50px !important;
  bottom:6px !important;
  filter:drop-shadow(0 0 8px rgba(201,168,76,0.08));
}
.bex-inline-open .bex-coll-muscle-icon{
  opacity:0.12 !important;
}
body.cable-week .bex-coll-muscle-icon{
  filter:drop-shadow(0 0 8px rgba(126,181,226,0.08));
}
body.light-mode .bex-coll-muscle-icon{
  opacity:0.14 !important;
  filter:invert(1) drop-shadow(0 0 4px rgba(0,0,0,0.04)) !important;
}

/* -- 7. Top-edge Shimmer & Micro-Details ------------------- */

/* Top-edge shimmer on cards — DISABLED, moved to Section 102.14 */
/* Gold/green accent line only shows on completed/PR cards now */

/* Timer block depth */
.bnr-timer-block{
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.35), 0 1px 0 rgba(201,168,76,0.03);
}
body.light-mode .bnr-timer-block{
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.5);
}

/* Progress ring well */
.bnr-ring-hero{
  background:rgba(0,0,0,0.18);
  border-radius:50%;
  padding:4px;
}
body.light-mode .bnr-ring-hero{
  background:rgba(0,0,0,0.04);
}

/* Completed card - warm green, no blue */
.bex-card-wrapper.ex-fully-done{
  border-color:rgba(52,211,153,0.08) !important;
  background:#131210 !important;
}

/* -- 8. Quick Wins ----------------------------------------- */

/* Ambient glow behind banner */
.day-panel{
  position:relative;
}
.day-panel::before{
  content:'';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:70%; height:60%;
  background:radial-gradient(ellipse, rgba(201,168,76,0.04) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}
body.light-mode .day-panel::before{
  background:radial-gradient(ellipse, rgba(201,168,76,0.03) 0%, transparent 70%);
}

/* Page depth gradient */
.scrollable-content{
  background:linear-gradient(to bottom, var(--bg,#080604) 0%, rgba(14,12,8,1) 40%, var(--bg,#080604) 100%);
}
body.light-mode .scrollable-content{
  background:linear-gradient(to bottom, var(--bg,#F4F2ED) 0%, rgba(230,228,224,1) 40%, var(--bg,#F4F2ED) 100%);
}

/* Insight card shimmer */
.ins-card{
  position:relative;
}
.ins-card::before{
  content:'';
  position:absolute;
  top:0; left:12%; right:12%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,168,76,0.06), transparent);
  z-index:1;
  pointer-events:none;
}
body.light-mode .ins-card::before{
  background:linear-gradient(90deg, transparent, rgba(139,122,94,0.08), transparent);
}

/* -- 9. Next-Set Scroll Guide Arrow ------------------------ */
@keyframes nextSetPulse{
  0%,100%{ opacity:0.5; transform:translateY(0); }
  50%{ opacity:1; transform:translateY(4px); }
}
@keyframes nextSetArrowFlash{
  0%,100%{ box-shadow:0 0 0 0 rgba(201,168,76,0); }
  50%{ box-shadow:0 0 16px 4px rgba(201,168,76,0.15); }
}
.next-set-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 22px;
  margin:10px auto 4px;
  border-radius:22px;
  background:rgba(201,168,76,0.10);
  border:1px solid rgba(201,168,76,0.20);
  color:var(--gold, #D9B878);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  cursor:pointer;
  animation:nextSetPulse 1.8s ease-in-out infinite, nextSetArrowFlash 2.4s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
  transition:opacity 0.2s, transform 0.2s;
  max-width:220px;
}
.next-set-arrow svg{
  width:16px; height:16px;
  stroke:currentColor; fill:none;
  stroke-width:2.5; stroke-linecap:round;
}
.next-set-arrow:active{
  animation:none;
  opacity:1;
  background:rgba(201,168,76,0.18);
  transform:scale(0.96);
}
body.cable-week .next-set-arrow{
  background:rgba(126,181,226,0.10);
  border-color:rgba(126,181,226,0.20);
  color:#7EB5E2;
}
body.cable-week .next-set-arrow{
  animation:nextSetPulse 1.8s ease-in-out infinite;
}
body.light-mode .next-set-arrow{
  background:rgba(139,122,94,0.10);
  border-color:rgba(139,122,94,0.18);
  color:#8B7A5E;
}
@media (prefers-reduced-motion: reduce){
  .next-set-arrow{ animation:none; opacity:0.7; }
}

/* -- Enhanced existing "Next Set" hint on nav arrows ----- */
.bex-set-nav-next.bex-arrow-flash{
  animation:nextSetNavPulse 1.2s ease-in-out infinite !important;
  filter:drop-shadow(0 0 8px rgba(201,168,76,0.4)) !important;
}
@keyframes nextSetNavPulse{
  0%,100%{ transform:scale(1); opacity:0.7; }
  50%{ transform:scale(1.15); opacity:1; }
}
.bex-next-set-hint.visible{
  display:block !important;
  font-size:10px !important;
  color:var(--gold, #D9B878) !important;
  opacity:1 !important;
  animation:nextSetPulse 1.8s ease-in-out infinite !important;
}
/* Pulsing nav-next button when next-set-pulse class is added */
.bex-set-nav-next.next-set-pulse{
  animation:nextSetNavPulse 1.2s ease-in-out infinite !important;
  filter:drop-shadow(0 0 8px rgba(201,168,76,0.3)) !important;
}

/* ===============================================================
   10. FULL-WIDTH CARD REDESIGN - Full screen, high contrast
   Cards take full width. Number badge inline. Full-screen expand.
   Optimized for scanning (collapsed) and detail (expanded).
   =============================================================== */

/* -- FULL-WIDTH LAYOUT - remove step column, cards stretch -- */
.bex-step-row{
  display:block !important;  /* stack, card takes full width */
  position:relative !important;
}
.bex-step-col{
  display:none !important;   /* hide separate number column */
}
.bex-step-row > .bex-card-wrapper{
  width:100% !important;
}

/* -- Container - full bleed ------------------------------- */
.banner-exercise-list{
  padding-left:0 !important;
  padding-right:0 !important;
}
.workout-container{
  padding-left:0 !important;
  padding-right:0 !important;
}
.banner-ex-items{
  gap:6px !important;
}
/* -- Day panel banner - full width ------------------------ */
.day-panel{
  margin-left:0 !important;
  margin-right:0 !important;
  border-radius:0 !important;
}

/* -- Hide thumbnail on collapsed - images in expanded body -- */
.bex-card-thumb{
  display:none !important;
}
/* -- Hide history button on collapsed - show in expanded ---- */
.bex-history-btn{
  display:none !important;
}
.bex-inline-open .bex-history-btn{
  display:none !important;
}
/* -- Muscle icon on collapsed cards - consistent right side ---- */
.bex-coll-muscle-icon{
  display:block !important;
  position:absolute !important;
  width:40px !important;
  height:40px !important;
  opacity:0.30 !important;
  right:38px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:1 !important;
  filter:none !important;
  pointer-events:none !important;
  object-fit:contain !important;
}
body.light-mode .bex-coll-muscle-icon{
  opacity:0.20 !important;
  filter:invert(1) !important;
}
/* -- Muscle icon in expanded card - larger, header area ---- */
.bex-inline-open .bex-coll-muscle-icon{
  width:50px !important;
  height:50px !important;
  opacity:0.35 !important;
  right:12px !important;
  top:14px !important;
  z-index:3 !important;
  transform:none !important;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4)) !important;
}
body.light-mode .bex-inline-open .bex-coll-muscle-icon{
  opacity:0.25 !important;
  filter:invert(1) drop-shadow(0 1px 3px rgba(0,0,0,0.10)) !important;
}

/* -- Exercise number badge - centered at top of card ---------- */
.bex-card-num-badge{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  padding:2px 0 4px !important;
  font-size:16px !important;
  font-weight:900 !important;
  color:rgba(232,200,102,0.80) !important;
  letter-spacing:-0.5px !important;
}
body.light-mode .bex-card-num-badge{
  color:rgba(139,122,94,0.75) !important;
}
body.cable-week .bex-card-num-badge{
  color:rgba(126,181,226,0.75) !important;
}
/* Hide number badge when card is expanded (topbar has the selector) */
.bex-card-wrapper.bex-inline-open .bex-card-num-badge{
  display:none !important;
}

/* -- Live timer - no background, no broken play icon ----------- */
.bex-pill-live-timer{
  background:none !important;
  border:none !important;
  color:#4ADE80 !important;
  font-size:13px !important;
  font-weight:700 !important;
  padding:0 !important;
}
.bex-pill-live-timer::before{
  content:'' !important;
  display:none !important;
}
.bex-pill-live-timer.active{
  background:none !important;
  border:none !important;
}
body:not(.cable-week) .bex-pill-live-timer.active{
  color:#4ADE80 !important;
  background:none !important;
  border:none !important;
}
body.cable-week .bex-pill-live-timer.active{
  color:rgba(126,181,226,0.85) !important;
  background:none !important;
  border:none !important;
}
body.light-mode .bex-pill-live-timer{
  color:#16A34A !important;
  background:none !important;
}

/* === COLLAPSED CARD - clean, scannable, high contrast ====== */
.banner-ex-card{
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  border-radius:14px !important;
  margin:0 12px !important;
  transition:all 0.25s ease !important;
}
.banner-ex-card:active{
  background:rgba(255,255,255,0.10) !important;
  transform:scale(0.98) !important;
}
body.light-mode .banner-ex-card{
  background:rgba(0,0,0,0.03) !important;
  border-color:rgba(0,0,0,0.10) !important;
}
body.light-mode .banner-ex-card:active{
  background:rgba(0,0,0,0.06) !important;
}

/* -- Card header layout ----------------------------------- */
.bex-card-hdr{
  min-height:auto !important;
  padding:14px 48px 14px 14px !important;
  position:relative !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  gap:10px !important;
}

/* -- Title column - full width ----------------------------- */
.bex-card-title-col{
  padding-right:0 !important;
  gap:5px !important;
  flex:1 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
}

/* === EXERCISE NAME - HIGH CONTRAST, FULL WIDTH ============= */
.bex-pill-name{
  font-size:15.5px !important;
  font-weight:700 !important;
  letter-spacing:-0.2px !important;
  color:#FFFFFF !important;
  line-height:1.35 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  display:block !important;
  text-shadow:none !important;
}
.bex-pill-ss-name{
  font-size:14px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.90) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
/* -- Superset/set type badge - PURPLE ----------------------- */
.bex-pill-ss-tag{
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  color:#B47AED !important;
  background:rgba(162,100,190,0.12) !important;
  border:1px solid rgba(162,100,190,0.25) !important;
  padding:2px 8px !important;
  border-radius:6px !important;
  display:inline-block !important;
}

/* -- Meta line - weight×reps or time ----------------------- */
.bex-pill-meta{
  font-size:13px !important;
  font-weight:500 !important;
  color:rgba(255,255,255,0.55) !important;
  line-height:1.3 !important;
}

/* -- Progress indicators - set completion bars ------------- */
.bex-coll-prog-dots{
  display:flex !important;
  gap:3px !important;
  margin-top:3px !important;
}
.bex-coll-prog-dot{
  width:20px !important;
  height:4px !important;
  border-radius:2px !important;
  background:rgba(255,255,255,0.12) !important;
}
.bex-coll-prog-dot.done{
  background:#C9A86E !important;
}
body.cable-week .bex-coll-prog-dot.done{
  background:#34D399 !important;
}

/* -- Live timer on collapsed card -------------------------- */
.bex-pill-live-timer{
  font-size:13px !important;
  font-weight:700 !important;
  color:#4ADE80 !important;
}

/* -- Expand button - CLEAR, TAPPABLE ----------------------- */
.bex-expand-btn{
  position:absolute !important;
  right:10px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:32px !important;
  height:32px !important;
  border-radius:10px !important;
  background:rgba(201,168,76,0.10) !important;
  border:1.5px solid rgba(201,168,76,0.25) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:all 0.2s ease !important;
}
.bex-expand-btn:active{
  background:rgba(201,168,76,0.25) !important;
  transform:translateY(-50%) scale(0.92) !important;
}
.bex-expand-btn .bex-chev{
  width:16px !important;
  height:16px !important;
  stroke:#C9A86E !important;
  stroke-width:2.5 !important;
}
/* -- Pencil/Close icon toggle ------------------------------- */
.bex-icon-pencil{
  width:16px !important;
  height:16px !important;
  stroke:#C9A86E !important;
  stroke-width:2 !important;
}
.bex-icon-close{
  display:none !important;
  width:18px !important;
  height:18px !important;
  stroke:rgba(255,255,255,0.70) !important;
  stroke-width:2.5 !important;
}
/* When open - show X, hide pencil */
.bex-expand-btn.is-open .bex-icon-pencil{
  display:none !important;
}
.bex-expand-btn.is-open .bex-icon-close{
  display:block !important;
}
.bex-expand-btn.is-open{
  background:rgba(255,255,255,0.08) !important;
  border-color:rgba(255,255,255,0.15) !important;
}
body.light-mode .bex-icon-pencil{
  stroke:#8B7A5E !important;
}
body.light-mode .bex-icon-close{
  stroke:rgba(0,0,0,0.60) !important;
}
body.light-mode .bex-expand-btn.is-open{
  background:rgba(0,0,0,0.06) !important;
  border-color:rgba(0,0,0,0.12) !important;
}

/* === LIGHT MODE - DARK TEXT ON LIGHT BG ==================== */
body.light-mode .bex-pill-name{
  color:#1a1a1a !important;
}
body.light-mode .bex-pill-ss-name{
  color:#333333 !important;
}
body.light-mode .bex-pill-meta{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .bex-pill-ss-tag{
  color:#7B3FA0 !important;
  background:rgba(123,63,160,0.08) !important;
  border-color:rgba(123,63,160,0.20) !important;
}
body.light-mode .bex-coll-prog-dot{
  background:rgba(0,0,0,0.10) !important;
}
body.light-mode .bex-coll-prog-dot.done{
  background:#8B7A5E !important;
}
body.light-mode .bex-expand-btn{
  background:rgba(139,122,94,0.08) !important;
  border-color:rgba(139,122,94,0.20) !important;
}
body.light-mode .bex-expand-btn .bex-chev{
  stroke:#8B7A5E !important;
}
body.light-mode .bex-pill-live-timer{
  color:#16A34A !important;
}

/* === EXPANDED CARD - FIXED OVERLAY FULLSCREEN ============== */
/* Card becomes a fixed overlay covering the entire viewport.
   This bypasses all ancestor overflow/height constraints.
   body.exercise-expanded hides scroll on the page behind. */

/* The card wrapper becomes a fixed fullscreen overlay */
/* Commit 54: was the original fullscreen overlay. Superseded by line
   ~8812's anchor-based popover positioning. Neutralized here so this
   earlier rule doesn't fight the later one. The later rule (now using
   var(--anchor-top) etc.) handles all positioning. */
.bex-card-wrapper.bex-inline-open{
  z-index:10000 !important;
  background:var(--bg, #080604) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open{
  background:#F4F2ED !important;
}
/* Card inside the overlay - flush, no border */
.bex-card-wrapper.bex-inline-open .banner-ex-card{
  margin:0 !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  min-height:100vh !important;
  min-height:100dvh !important;
}
/* Header - compact, not sticky (saves space for content) */
.bex-card-wrapper.bex-inline-open .bex-card-hdr{
  padding:8px 16px 6px !important;
  border-bottom:1px solid rgba(255,255,255,0.08) !important;
  position:relative !important;
  z-index:5 !important;
  background:transparent !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-card-hdr{
  border-bottom-color:rgba(0,0,0,0.08) !important;
  background:#F4F2ED !important;
}
/* Expand/close button - larger, X icon style when open */
.bex-card-wrapper.bex-inline-open .bex-expand-btn{
  width:36px !important;
  height:36px !important;
  right:12px !important;
  background:rgba(255,255,255,0.08) !important;
  border-color:rgba(255,255,255,0.15) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-expand-btn{
  background:rgba(0,0,0,0.05) !important;
  border-color:rgba(0,0,0,0.12) !important;
}
/* Stepper area — shrink to content, scrollable if needed */
.bex-card-wrapper.bex-inline-open .bex-stepper-area{
  padding:4px 14px calc(10px + env(safe-area-inset-bottom)) !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  flex:none !important;
  min-height:0 !important;
}
/* -- Expanded topbar - progress + date + workout name -------- */
.bex-expanded-topbar{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:2px !important;
  padding:6px 16px 2px !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:0.5px !important;
  text-transform:uppercase !important;
  color:rgba(201,168,76,0.55) !important;
  flex-shrink:0 !important;
}
.bex-topbar-info{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:10px !important;
}
.bex-topbar-sep{
  color:rgba(255,255,255,0.15) !important;
  font-size:14px !important;
}
.bex-topbar-day{
  color:rgba(255,255,255,0.50) !important;
}
.bex-topbar-workout{
  color:rgba(255,255,255,0.50) !important;
}
.bex-topbar-date{
  color:rgba(255,255,255,0.50) !important;
  font-weight:500 !important;
}
body.light-mode .bex-expanded-topbar{
  color:rgba(0,0,0,0.40) !important;
}
body.light-mode .bex-topbar-sep{
  color:rgba(0,0,0,0.12) !important;
}
body.light-mode .bex-topbar-day{
  color:rgba(0,0,0,0.50) !important;
}
body.light-mode .bex-topbar-workout{
  color:rgba(0,0,0,0.50) !important;
}
body.light-mode .bex-topbar-date{
  color:rgba(0,0,0,0.35) !important;
}

/* -- Exercise progress dots + selector ----------------------- */
.bex-topbar-progress{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  cursor:pointer !important;
  padding:4px 8px !important;
  border-radius:10px !important;
  transition:all 0.2s ease !important;
}
.bex-topbar-progress:active{
  background:rgba(201,168,76,0.08) !important;
}
/* -- Topbar exercise dots - revamped ----------------------- */
.bex-topbar-dots-row{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  padding-bottom:10px !important;
}
/* -- Topbar Exercise Navigation - Minimal Dots --------------- */
.bex-topbar-dots-row{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.bex-topbar-dot{
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,0.15) !important;
  border:none !important;
  display:block !important;
  font-size:0 !important;
  color:transparent !important;
  transition:all 0.25s cubic-bezier(.4,0,.2,1) !important;
  position:relative !important;
  cursor:pointer !important;
  padding:0 !important;
}
/* Active/current exercise - white, larger */
.bex-topbar-dot.bex-dot-current{
  width:12px !important;
  height:12px !important;
  background:rgba(255,255,255,0.85) !important;
  box-shadow:0 0 8px rgba(255,255,255,0.30) !important;
}
/* Bottom line indicator for current */
.bex-topbar-dot.bex-dot-current::after{
  content:'' !important;
  position:absolute !important;
  bottom:-5px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:6px !important;
  height:2px !important;
  border-radius:1px !important;
  background:rgba(255,255,255,0.50) !important;
}
/* Completed dot - green */
.bex-topbar-dot.bex-dot-done{
  background:#34D399 !important;
}
/* Completed + current */
.bex-topbar-dot.bex-dot-done.bex-dot-current{
  background:#34D399 !important;
  box-shadow:0 0 8px rgba(52,211,153,0.40) !important;
}
.bex-topbar-dot.bex-dot-done.bex-dot-current::after{
  background:#34D399 !important;
}
/* Completed + PR - gold */
.bex-topbar-dot.bex-dot-pr.bex-dot-done{
  background:#E8C866 !important;
  box-shadow:0 0 6px rgba(232,200,102,0.30) !important;
}
.bex-topbar-dot.bex-dot-pr.bex-dot-done.bex-dot-current{
  background:#E8C866 !important;
  box-shadow:0 0 10px rgba(232,200,102,0.40) !important;
}
.bex-topbar-dot.bex-dot-pr.bex-dot-done.bex-dot-current::after{
  background:#E8C866 !important;
}
/* PR only (not done) */
.bex-topbar-dot.bex-dot-pr{
  background:rgba(232,200,102,0.30) !important;
}
.bex-topbar-ex-chev{
  width:14px !important;
  height:14px !important;
  stroke:rgba(255,255,255,0.35) !important;
  transition:transform 0.2s ease !important;
  flex-shrink:0 !important;
  margin-left:4px !important;
}
/* Light mode - high contrast dots */
body.light-mode .bex-topbar-dot{
  background:rgba(0,0,0,0.25) !important;
  border:none !important;
  width:10px !important;
  height:10px !important;
}
body.light-mode .bex-topbar-dot.bex-dot-current{
  width:12px !important;
  height:12px !important;
  background:rgba(0,0,0,0.70) !important;
  box-shadow:0 0 6px rgba(0,0,0,0.20) !important;
}
body.light-mode .bex-topbar-dot.bex-dot-current::after{
  background:rgba(0,0,0,0.50) !important;
}
body.light-mode .bex-topbar-dot.bex-dot-done{
  background:#16A34A !important;
}
body.light-mode .bex-topbar-dot.bex-dot-done.bex-dot-current{
  background:#16A34A !important;
  box-shadow:0 0 8px rgba(22,163,74,0.35) !important;
}
body.light-mode .bex-topbar-dot.bex-dot-done.bex-dot-current::after{
  background:#16A34A !important;
}
body.light-mode .bex-topbar-dot.bex-dot-pr.bex-dot-done{
  background:#B8960C !important;
}
body.light-mode .bex-topbar-dot.bex-dot-pr.bex-dot-done.bex-dot-current{
  background:#B8960C !important;
  box-shadow:0 0 8px rgba(184,150,12,0.35) !important;
}
body.light-mode .bex-topbar-ex-chev{
  stroke:rgba(0,0,0,0.50) !important;
}

/* -- Dropdown panel - modern glass ---------------------------- */
.bex-ex-dropdown{
  display:none;
  position:absolute !important;
  top:calc(100% + 8px) !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  min-width:280px !important;
  background:rgba(18,16,12,0.95) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:16px !important;
  box-shadow:0 16px 48px rgba(0,0,0,0.60), 0 0 0 1px rgba(0,0,0,0.30) !important;
  backdrop-filter:blur(24px) !important;
  -webkit-backdrop-filter:blur(24px) !important;
  padding:8px !important;
  z-index:100 !important;
  overflow:hidden !important;
}
.bex-ex-dropdown.bex-dd-open{
  display:block !important;
  animation:ddSlideIn 0.2s cubic-bezier(.2,1,.4,1) !important;
}
@keyframes ddSlideIn{
  from{opacity:0;transform:translateX(-50%) translateY(-6px) scale(0.96);}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
}
body.light-mode .bex-ex-dropdown{
  background:rgba(250,248,244,0.97) !important;
  border-color:rgba(0,0,0,0.08) !important;
  box-shadow:0 16px 48px rgba(0,0,0,0.12) !important;
}

/* -- Dropdown items - premium card style with number + name + progress bars -- */
.bex-ex-dd-item{
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  padding:12px 14px !important;
  border-radius:14px !important;
  cursor:pointer !important;
  transition:background 0.15s ease !important;
}
.bex-ex-dd-item + .bex-ex-dd-item{
  margin-top:2px !important;
}
.bex-ex-dd-item:active{
  background:rgba(255,255,255,0.06) !important;
}
.bex-ex-dd-item.bex-ex-dd-active{
  background:rgba(255,255,255,0.07) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
}
/* Number badge - gold circle matching collapsed card style */
.bex-ex-dd-num{
  width:32px !important;
  height:32px !important;
  border-radius:10px !important;
  background:rgba(232,200,102,0.08) !important;
  border:1.5px solid rgba(232,200,102,0.20) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:14px !important;
  font-weight:800 !important;
  color:rgba(232,200,102,0.70) !important;
  flex-shrink:0 !important;
  margin-top:2px !important;
}
.bex-ex-dd-active .bex-ex-dd-num{
  background:rgba(232,200,102,0.15) !important;
  border-color:rgba(232,200,102,0.40) !important;
  color:#E8C866 !important;
  box-shadow:0 0 8px rgba(232,200,102,0.15) !important;
}
/* Content column - name + bars stacked vertically */
.bex-ex-dd-content{
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
  flex:1 !important;
  min-width:0 !important;
}
.bex-ex-dd-name{
  font-size:14px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.70) !important;
  line-height:1.3 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
.bex-ex-dd-active .bex-ex-dd-name{
  color:#fff !important;
  font-weight:700 !important;
}
/* Per-set progress bars row — taller, more visible */
.bex-ex-dd-bars{
  display:flex !important;
  align-items:center !important;
  gap:3px !important;
}
.bex-dd-bar{
  flex:1 !important;
  height:5px !important;
  border-radius:3px !important;
  background:rgba(255,255,255,0.10) !important;
  max-width:32px !important;
  transition:background 0.2s ease !important;
}
.bex-dd-bar.done{
  background:#34D399 !important;
  box-shadow:0 0 4px rgba(52,211,153,0.20) !important;
}
.bex-dd-bar.done.pr{
  background:#E8C866 !important;
  box-shadow:0 0 4px rgba(232,200,102,0.25) !important;
}
/* Completed exercise — checkmark tint */
.bex-ex-dd-item.bex-ex-dd-done .bex-ex-dd-num{
  background:rgba(52,211,153,0.10) !important;
  border-color:rgba(52,211,153,0.30) !important;
  color:#34D399 !important;
}
/* PR exercise — gold tint */
.bex-ex-dd-item.bex-ex-dd-pr .bex-ex-dd-num{
  background:rgba(232,200,102,0.12) !important;
  border-color:rgba(232,200,102,0.35) !important;
  color:#E8C866 !important;
}
/* Light mode dropdown items */
body.light-mode .bex-ex-dd-item.bex-ex-dd-active{
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-ex-dd-num{
  background:rgba(139,122,94,0.06) !important;
  border-color:rgba(139,122,94,0.18) !important;
  color:rgba(139,122,94,0.60) !important;
}
body.light-mode .bex-ex-dd-active .bex-ex-dd-num{
  background:rgba(139,122,94,0.12) !important;
  border-color:rgba(139,122,94,0.35) !important;
  color:#8B7A5E !important;
}
body.light-mode .bex-ex-dd-name{
  color:rgba(0,0,0,0.60) !important;
}
body.light-mode .bex-ex-dd-active .bex-ex-dd-name{
  color:rgba(0,0,0,0.92) !important;
}
body.light-mode .bex-dd-bar{
  background:rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-dd-bar.done{
  background:#16A34A !important;
}
body.light-mode .bex-dd-bar.done.pr{
  background:#B8960C !important;
}

/* -- Hero image - SHOW in expanded, compact height ----------- */
.bex-card-wrapper.bex-inline-open .bex-body-hero{
  display:block !important;
  height:70px !important;
  margin:0 16px 2px !important;
  border-radius:10px !important;
  overflow:hidden !important;
  flex-shrink:0 !important;
}
/* Info strip - show only rest+tempo chips, hide progress/set-type */
.bex-card-wrapper.bex-inline-open .bex-body-info-strip{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  padding:2px 16px 4px !important;
  justify-content:flex-start !important;
  align-items:center !important;
}
/* Hide progress pill & set type button in expanded (redundant with set counter) */
.bex-card-wrapper.bex-inline-open .bex-body-progress-pill{
  display:none !important;
}
.bex-card-wrapper.bex-inline-open .bex-body-type-btn{
  display:none !important;
}
/* Hide header progress dots in expanded (redundant with set counter) */
.bex-card-wrapper.bex-inline-open .bex-coll-prog-dots{
  display:none !important;
}
/* Hide header live timer in expanded (redundant with stepper timer bar) */
.bex-card-wrapper.bex-inline-open .bex-pill-live-timer{
  display:none !important;
}
/* Hide PR badge in expanded (BEAT chip in stepper covers this) */
.bex-card-wrapper.bex-inline-open .bex-body-pr{
  display:none !important;
}

/* -- Muscle group icon - top-right of expanded header ------- */
.bex-card-wrapper.bex-inline-open .bex-coll-muscle-icon{
  display:block !important;
  position:absolute !important;
  width:36px !important;
  height:36px !important;
  opacity:0.50 !important;
  right:56px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:3 !important;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,0.4)) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-coll-muscle-icon{
  opacity:0.35 !important;
  filter:invert(1) drop-shadow(0 1px 2px rgba(0,0,0,0.08)) !important;
}
/* Wrapper is flex column - card shrinks, stepper fills remaining */
.bex-card-wrapper.bex-inline-open{
  display:flex !important;
  flex-direction:column !important;
}
/* Card shrinks to fit content, doesn't stretch */
.bex-card-wrapper.bex-inline-open .banner-ex-card{
  flex:0 0 auto !important;
  min-height:auto !important;
}
/* Card body - auto height, no flex stretching */
.bex-card-wrapper.bex-inline-open .bex-card-body{
  flex:none !important;
  overflow:visible !important;
}
/* Prevent body scroll when overlay is open */
body.exercise-expanded{
  overflow:hidden !important;
  height:100vh !important;
  height:100dvh !important;
}

/* Neutralize ancestors that create containing blocks for position:fixed */
body.exercise-expanded .workout-banner-carousel{
  will-change:auto !important;
  transform:none !important;
}
body.exercise-expanded .workout-banner-slide-center{
  overflow:visible !important;
  transform:none !important;
}
/* Hide header and bottom dock when card is fullscreen */
body.exercise-expanded .fixed-top-area{
  display:none !important;
}
body.exercise-expanded .bottom-menu-bar{
  display:none !important;
}

/* === GLOBAL CONTRAST FIXES - DARK MODE ===================== */
/* Section headers */
.bex-section-header{
  color:rgba(255,255,255,0.70) !important;
}
/* Banner elements */
.bnr-day{
  color:rgba(255,255,255,0.65) !important;
}
.bnr-label{
  color:rgba(255,255,255,0.50) !important;
}
.bnr-title{
  color:#FFFFFF !important;
}
.bnr-stat{
  color:rgba(255,255,255,0.60) !important;
}
.bnr-timer-hint{
  color:rgba(255,255,255,0.50) !important;
}
/* Insight cards */
.ins-card{
  color:rgba(255,255,255,0.85) !important;
}
.ins-title{
  color:rgba(255,255,255,0.65) !important;
}
.ins-value{
  color:#FFFFFF !important;
}
.ins-subtitle{
  color:rgba(255,255,255,0.45) !important;
}

/* === GLOBAL CONTRAST FIXES - LIGHT MODE ==================== */
body.light-mode .bex-section-header{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .bnr-day{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .bnr-label{
  color:rgba(0,0,0,0.50) !important;
}
body.light-mode .bnr-title{
  color:#1a1a1a !important;
}
body.light-mode .bnr-stat{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .ins-card{
  color:rgba(0,0,0,0.85) !important;
}
body.light-mode .ins-title{
  color:rgba(0,0,0,0.60) !important;
}
body.light-mode .ins-value{
  color:#1a1a1a !important;
}
body.light-mode .ins-subtitle{
  color:rgba(0,0,0,0.45) !important;
}

/* -- Hero image - video play button overlay -------------- */
.bex-body-hero{
  position:relative !important;
  cursor:pointer !important;
}
/* "Watch & Learn" pill overlay on hero image */
.bex-body-hero-hint{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  font-size:0 !important;
  color:transparent !important;
  letter-spacing:0 !important;
  z-index:2 !important;
}
.bex-body-hero-hint::before{
  content:'▶  Watch & Learn' !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:0.5px !important;
  color:rgba(255,255,255,0.90) !important;
  padding:6px 16px !important;
  border-radius:20px !important;
  background:rgba(0,0,0,0.55) !important;
  border:1.5px solid rgba(255,255,255,0.20) !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
  transition:all 0.2s ease !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.4) !important;
}
.bex-body-hero-hint::after{
  content:none !important;
  display:none !important;
}
.bex-body-hero:active .bex-body-hero-hint::before{
  transform:scale(0.95) !important;
  background:rgba(201,168,76,0.30) !important;
  border-color:rgba(201,168,76,0.50) !important;
  color:#fff !important;
}
/* Video play button - hide SVG, show "Watch & Learn" pill via ::after */
.bex-body-hero-play{
  background:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
}
.bex-body-hero-play svg{
  display:none !important;
}
.bex-body-hero-play::after{
  content:'▶  Watch & Learn' !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:0.5px !important;
  color:rgba(255,255,255,0.90) !important;
  padding:6px 16px !important;
  border-radius:20px !important;
  background:rgba(0,0,0,0.55) !important;
  border:1.5px solid rgba(255,255,255,0.20) !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.4) !important;
}
.bex-body-hero:active .bex-body-hero-play::after{
  transform:scale(0.95) !important;
  background:rgba(201,168,76,0.30) !important;
  border-color:rgba(201,168,76,0.50) !important;
}
/* Hide muscle icon from inside hero (we show it in the header now) */
.bex-inline-open .bex-body-hero-muscle{
  display:none !important;
}
/* Hero image - slightly taller, stronger rounded corners */
.bex-body-hero{
  height:110px !important;
  border-radius:14px !important;
  overflow:hidden !important;
}
.bex-body-hero-img{
  transition:transform 0.3s ease !important;
}
.bex-body-hero:active .bex-body-hero-img{
  transform:scale(1.03) !important;
}
body.light-mode .bex-body-hero-hint::before{
  background:rgba(255,255,255,0.60) !important;
  border-color:rgba(0,0,0,0.12) !important;
}
body.light-mode .bex-body-hero-hint::after{
  border-color:transparent transparent transparent rgba(0,0,0,0.70) !important;
}

/* -- Exercise name - bolder, slightly larger ------------ */
.bex-pill-name{
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:-0.3px !important;
  color:rgba(255,255,255,0.95) !important;
  line-height:1.25 !important;
  text-shadow:0 1px 3px rgba(0,0,0,0.3) !important;
}
body.light-mode .bex-pill-name{
  color:rgba(0,0,0,0.90) !important;
  text-shadow:none !important;
}

/* -- Meta line - warmer, bolder ------------------------- */
.bex-pill-meta{
  font-size:12px !important;
  font-weight:600 !important;
  color:rgba(201,168,76,0.50) !important;
  letter-spacing:0.2px !important;
}
body.light-mode .bex-pill-meta{
  color:rgba(139,122,94,0.60) !important;
}

/* -- Progress dots - mini progress bar style ----------- */
.bex-coll-prog-dots{
  display:flex !important;
  gap:4px !important;
  margin-top:2px !important;
}
.bex-coll-prog-dot{
  width:20px !important;
  height:4px !important;
  border-radius:2px !important;
  background:rgba(255,255,255,0.08) !important;
  border:none !important;
  transition:background 0.3s ease, box-shadow 0.3s ease !important;
}
.bex-coll-prog-dot.done{
  background:var(--gold, #D9B878) !important;
  border:none !important;
  box-shadow:0 0 6px rgba(201,168,76,0.3) !important;
}
body.cable-week .bex-coll-prog-dot.done{
  background:#34D399 !important;
  box-shadow:0 0 4px rgba(52,211,153,0.25) !important;
}
.bex-card-wrapper.ex-fully-done .bex-coll-prog-dot.done{
  background:#34D399 !important;
  box-shadow:0 0 6px rgba(52,211,153,0.3) !important;
}
body.light-mode .bex-coll-prog-dot{
  background:rgba(0,0,0,0.06) !important;
}
body.light-mode .bex-coll-prog-dot.done{
  background:#8B7A5E !important;
  box-shadow:none !important;
}

/* -- Expand button - larger, more visible --------------- */
.bex-expand-btn{
  width:38px !important;
  height:38px !important;
  border-radius:14px !important;
  background:rgba(201,168,76,0.08) !important;
  border:1.5px solid rgba(201,168,76,0.15) !important;
  z-index:4 !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
.bex-expand-btn .bex-chev{
  width:18px !important;
  height:18px !important;
}

/* -- History button - repositioned ---------------------- */
.bex-history-btn{
  z-index:4 !important;
}

/* -- Number badge - repositioned, more prominent -------- */
.bex-num-badge{
  z-index:5 !important;
}

/* -- Card left accent strip - thicker ------------------- */
.bex-card-wrapper::before{
  width:4px !important;
}

/* -- Completed card overlay - subtle checkmark ---------- */
.bex-card-wrapper.ex-fully-done::after{
  content:'' !important;
  background:linear-gradient(90deg, transparent, rgba(52,211,153,0.03), transparent) !important;
}

/* ===============================================================
   11. EXPANDED CARD POLISH - Info Strip, Stepper, Consistency
   =============================================================== */

/* -- Info strip - more polished chips -------------------- */
.bex-body-info-strip{
  gap:8px !important;
  padding:10px 0 6px !important;
}
.bex-body-sec-chip{
  border-radius:10px !important;
  padding:4px 10px !important;
  font-weight:700 !important;
  letter-spacing:0.3px !important;
}
.bex-body-progress-pill{
  border-radius:10px !important;
}
.bex-body-prog-bar{
  border-radius:3px !important;
  height:4px !important;
  background:rgba(255,255,255,0.06) !important;
}
.bex-body-prog-fill{
  border-radius:3px !important;
  background:var(--gold, #D9B878) !important;
}
body.cable-week .bex-body-prog-fill{
  background:#7EB5E2 !important;
}

/* -- Stepper area - consistent warm surface -------------- */
.bex-stepper-area{
  border-top:1px solid rgba(201,168,76,0.06) !important;
}
body.cable-week .bex-stepper-area{
  border-top-color:rgba(126,181,226,0.06) !important;
}

/* -- Set counter row - unified with stepper zone ------- */
.bex-set-counter-row{
  gap:10px !important;
  padding:10px 12px !important;
  margin:0 -14px !important;
  background:rgba(0,0,0,0.15) !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,0.05) !important;
  transition:background 0.3s ease !important;
  position:relative !important;
}
/* Swipe hint shimmer on edges */
.bex-set-counter-row::before,
.bex-set-counter-row::after{
  content:'' !important;
  position:absolute !important;
  top:20% !important;
  bottom:20% !important;
  width:3px !important;
  border-radius:2px !important;
  opacity:0 !important;
  transition:opacity 0.3s ease !important;
  pointer-events:none !important;
}
.bex-set-counter-row::before{
  left:4px !important;
  background:linear-gradient(180deg, transparent, rgba(201,168,76,0.25), transparent) !important;
}
.bex-set-counter-row::after{
  right:4px !important;
  background:linear-gradient(180deg, transparent, rgba(201,168,76,0.25), transparent) !important;
}
/* Flash hint when navigating sets */
.bex-set-counter-row.bex-set-changed{
  background:rgba(201,168,76,0.08) !important;
}
.bex-set-counter-row.bex-set-changed::before,
.bex-set-counter-row.bex-set-changed::after{
  opacity:1 !important;
}
/* Nav arrows - bigger, more tactile */
.bex-set-nav-arrow{
  width:40px !important;
  height:40px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  transition:all 0.2s ease !important;
}
.bex-set-nav-arrow:active{
  background:rgba(201,168,76,0.15) !important;
  border-color:rgba(201,168,76,0.25) !important;
  transform:scale(0.92) !important;
}
.bex-set-nav-arrow svg{
  width:20px !important;
  height:20px !important;
  stroke:rgba(255,255,255,0.60) !important;
}
.bex-set-nav-arrow:disabled{
  opacity:0.25 !important;
}
/* Light mode set counter */
body.light-mode .bex-set-counter-row{
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(0,0,0,0.06) !important;
}
body.light-mode .bex-set-counter-row.bex-set-changed{
  background:rgba(139,122,94,0.08) !important;
}
body.light-mode .bex-set-counter-row::before{
  background:linear-gradient(180deg, transparent, rgba(139,122,94,0.20), transparent) !important;
}
body.light-mode .bex-set-counter-row::after{
  background:linear-gradient(180deg, transparent, rgba(139,122,94,0.20), transparent) !important;
}
body.light-mode .bex-set-nav-arrow{
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-set-nav-arrow svg{
  stroke:rgba(0,0,0,0.50) !important;
}
/* Cable week */
body.cable-week .bex-set-counter-row.bex-set-changed{
  background:rgba(126,181,226,0.08) !important;
}
body.cable-week .bex-set-counter-row::before,
body.cable-week .bex-set-counter-row::after{
  background:linear-gradient(180deg, transparent, rgba(126,181,226,0.25), transparent) !important;
}
/* Timer row - compact in expanded view */
.bex-card-wrapper.bex-inline-open .bex-ex-timer-compact{
  padding:5px 14px !important;
  margin:1px 0 !important;
}

/* -- Set navigation arrows - compact ---------------------- */
.bex-set-nav-arrow{
  width:32px !important;
  height:32px !important;
  border-radius:10px !important;
  background:rgba(201,168,76,0.06) !important;
  border:1px solid rgba(201,168,76,0.10) !important;
  transition:all 0.2s ease !important;
}
.bex-set-nav-arrow:active{
  background:rgba(201,168,76,0.15) !important;
  transform:scale(0.92) !important;
}
.bex-set-nav-arrow.disabled{
  opacity:0.25 !important;
}
.bex-set-nav-arrow svg{
  stroke:rgba(201,168,76,0.5) !important;
}
body.cable-week .bex-set-nav-arrow{
  background:rgba(126,181,226,0.06) !important;
  border-color:rgba(126,181,226,0.10) !important;
}
body.cable-week .bex-set-nav-arrow svg{
  stroke:rgba(126,181,226,0.5) !important;
}
body.light-mode .bex-set-nav-arrow{
  background:rgba(139,122,94,0.06) !important;
  border-color:rgba(139,122,94,0.10) !important;
}
body.light-mode .bex-set-nav-arrow svg{
  stroke:rgba(139,122,94,0.5) !important;
}

/* -- PR badge - compact -------------------------------- */
.bex-body-pr{
  border-radius:8px !important;
  padding:3px 12px !important;
  font-weight:700 !important;
  font-size:11px !important;
}
.bex-card-wrapper.bex-inline-open .bex-body-pr{
  margin:0 16px 1px !important;
  padding:2px 10px !important;
}

/* -- Timer display - cleaner --------------------------- */
.bex-ex-timer-compact{
  border-radius:10px !important;
}

/* -- PR target chip - warm surface --------------------- */
.bex-pr-target{
  border-radius:10px !important;
  background:rgba(201,168,76,0.06) !important;
  border:1px solid rgba(201,168,76,0.12) !important;
}

/* -- Expanded card title area - compact */
.bex-inline-open .bex-card-title-col{
  padding-right:80px !important;
  gap:2px !important;
}

/* ===============================================================
   12. EXPANDED CARD INTERIORS - SC Inputs, Timers, PR Badges
   All the interior elements that still looked plain/default
   =============================================================== */

/* -- SC / Superset Input Fields - warm, premium feel -------- */
.sc-input{
  background:rgba(201,168,76,0.04) !important;
  border:1.5px solid rgba(201,168,76,0.10) !important;
  border-radius:14px !important;
  color:rgba(245,238,216,0.90) !important;
  font-weight:700 !important;
  font-variant-numeric:tabular-nums !important;
  transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
.sc-input:focus{
  border-color:rgba(201,168,76,0.35) !important;
  box-shadow:0 0 0 3px rgba(201,168,76,0.08), 0 0 12px rgba(201,168,76,0.06) !important;
  background:rgba(201,168,76,0.06) !important;
}
body.cable-week .sc-input{
  background:rgba(126,181,226,0.04) !important;
  border-color:rgba(126,181,226,0.10) !important;
}
body.cable-week .sc-input:focus{
  border-color:rgba(126,181,226,0.35) !important;
  box-shadow:0 0 0 3px rgba(126,181,226,0.08), 0 0 12px rgba(126,181,226,0.06) !important;
}
body.light-mode .sc-input{
  background:rgba(139,122,94,0.04) !important;
  border-color:rgba(139,122,94,0.12) !important;
  color:rgba(0,0,0,0.85) !important;
}
body.light-mode .sc-input:focus{
  border-color:rgba(139,122,94,0.35) !important;
  box-shadow:0 0 0 3px rgba(139,122,94,0.08) !important;
}

/* -- SC Round Number Labels (A, B, 1, 2, 3) --------------- */
.sc-round-num{
  background:rgba(201,168,76,0.08) !important;
  border:1.5px solid rgba(201,168,76,0.15) !important;
  border-radius:10px !important;
  color:rgba(201,168,76,0.70) !important;
  font-weight:800 !important;
  letter-spacing:0.5px !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.15) !important;
}
body.cable-week .sc-round-num{
  background:rgba(126,181,226,0.08) !important;
  border-color:rgba(126,181,226,0.15) !important;
  color:rgba(126,181,226,0.70) !important;
}
body.light-mode .sc-round-num{
  background:rgba(139,122,94,0.06) !important;
  border-color:rgba(139,122,94,0.12) !important;
  color:rgba(139,122,94,0.70) !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.06) !important;
}

/* -- Set Block Rows - warm surface, subtle separation ------ */
.set-block{
  border-radius:14px !important;
  transition:background 0.3s ease, border-color 0.3s ease !important;
}
.set-block + .set-block{
  border-top:1px solid rgba(201,168,76,0.04) !important;
}
body.cable-week .set-block + .set-block{
  border-top-color:rgba(126,181,226,0.04) !important;
}

/* Completed set row - subtle green tint */
.set-row-done{
  background:rgba(52,211,153,0.03) !important;
}
.set-row-done .sc-round-num{
  background:rgba(52,211,153,0.10) !important;
  border-color:rgba(52,211,153,0.20) !important;
  color:#34D399 !important;
}

/* -- SC Timer Controls - warm styling ---------------------- */
.sc-timer-btn{
  background:rgba(201,168,76,0.06) !important;
  border:1.5px solid rgba(201,168,76,0.12) !important;
  border-radius:12px !important;
  transition:all 0.2s ease !important;
}
.sc-timer-btn:active{
  background:rgba(201,168,76,0.15) !important;
  transform:scale(0.92) !important;
}
.sc-timer-btn svg{
  stroke:rgba(201,168,76,0.55) !important;
}
.sc-timer-play{
  background:rgba(52,211,153,0.10) !important;
  border-color:rgba(52,211,153,0.20) !important;
}
.sc-timer-play:active{
  background:rgba(52,211,153,0.20) !important;
}
.sc-timer-play .sct-play{
  fill:rgba(52,211,153,0.70) !important;
}
body.cable-week .sc-timer-btn{
  background:rgba(126,181,226,0.06) !important;
  border-color:rgba(126,181,226,0.12) !important;
}
body.cable-week .sc-timer-btn svg{
  stroke:rgba(126,181,226,0.55) !important;
}
body.light-mode .sc-timer-btn{
  background:rgba(139,122,94,0.06) !important;
  border-color:rgba(139,122,94,0.10) !important;
}
body.light-mode .sc-timer-btn svg{
  stroke:rgba(139,122,94,0.55) !important;
}

/* -- SC Timer Display - refined ---------------------------- */
.sc-round-timer{
  font-variant-numeric:tabular-nums !important;
  font-weight:700 !important;
  letter-spacing:0.5px !important;
}

/* -- PR Inline Badges - "BEAT X" chips --------------------- */
.superset-pr-inline{
  background:rgba(201,168,76,0.06) !important;
  border:1px solid rgba(201,168,76,0.12) !important;
  border-radius:10px !important;
  padding:4px 10px !important;
  transition:all 0.3s ease !important;
}
.superset-pr-inline.has-pr{
  background:rgba(201,168,76,0.10) !important;
  border-color:rgba(201,168,76,0.20) !important;
}
.superset-pr-label{
  color:rgba(201,168,76,0.55) !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:1px !important;
  font-size:10px !important;
}
.superset-pr-value{
  color:var(--gold, #D9B878) !important;
  font-weight:800 !important;
  font-variant-numeric:tabular-nums !important;
}
.superset-pr-date{
  color:rgba(255,255,255,0.35) !important;
  font-size:10px !important;
}
body.light-mode .superset-pr-inline{
  background:rgba(139,122,94,0.05) !important;
  border-color:rgba(139,122,94,0.10) !important;
}
body.light-mode .superset-pr-inline.has-pr{
  background:rgba(139,122,94,0.08) !important;
  border-color:rgba(139,122,94,0.15) !important;
}
body.light-mode .superset-pr-label{
  color:rgba(139,122,94,0.60) !important;
}
body.light-mode .superset-pr-value{
  color:#8B7A5E !important;
}
body.light-mode .superset-pr-date{
  color:rgba(0,0,0,0.35) !important;
}

/* -- NEW PR Badge - gold burst ----------------------------- */
.superset-pr-new,
.pr-new,
.pr-new-compact{
  background:rgba(201,168,76,0.12) !important;
  border:1.5px solid rgba(201,168,76,0.25) !important;
  border-radius:10px !important;
  padding:3px 10px !important;
  box-shadow:0 0 12px rgba(201,168,76,0.10) !important;
}
.superset-pr-new-text,
.pr-new-text,
.pr-new-text-compact{
  color:var(--gold, #D9B878) !important;
  font-weight:800 !important;
  letter-spacing:1.5px !important;
  font-size:10px !important;
}
.pr-trophy{
  filter:drop-shadow(0 0 6px rgba(201,168,76,0.4)) !important;
}
body.light-mode .superset-pr-new,
body.light-mode .pr-new,
body.light-mode .pr-new-compact{
  background:rgba(139,122,94,0.10) !important;
  border-color:rgba(139,122,94,0.20) !important;
  box-shadow:0 0 8px rgba(139,122,94,0.08) !important;
}
body.light-mode .superset-pr-new-text,
body.light-mode .pr-new-text,
body.light-mode .pr-new-text-compact{
  color:#8B7A5E !important;
}

/* -- Bex Body PR (expanded card) - consistent -------------- */
.bex-body-pr{
  background:rgba(201,168,76,0.06) !important;
  border:1px solid rgba(201,168,76,0.12) !important;
  transition:all 0.3s ease !important;
}
.bex-body-pr.is-new-pr{
  background:rgba(201,168,76,0.12) !important;
  border-color:rgba(201,168,76,0.25) !important;
  box-shadow:0 0 16px rgba(201,168,76,0.10) !important;
}
body.cable-week .bex-body-pr{
  background:rgba(126,181,226,0.06) !important;
  border-color:rgba(126,181,226,0.12) !important;
}
body.cable-week .bex-body-pr.is-new-pr{
  background:rgba(126,181,226,0.12) !important;
  border-color:rgba(126,181,226,0.25) !important;
  box-shadow:0 0 16px rgba(126,181,226,0.10) !important;
}

/* -- Bex Exercise Timer - warm tint ------------------------ */
.bex-ex-timer-compact{
  background:rgba(201,168,76,0.05) !important;
  border:1px solid rgba(201,168,76,0.10) !important;
}
.bex-ex-timer.is-running .bex-ex-timer-compact{
  background:rgba(52,211,153,0.08) !important;
  border-color:rgba(52,211,153,0.18) !important;
}
.bex-ex-timer-val{
  font-variant-numeric:tabular-nums !important;
  font-weight:700 !important;
}
/* Live paused = yellow + pulse */
.bex-ex-timer.is-live .bex-ex-timer-val{
  color:#FACC15 !important;
  animation:timerPausePulse 1.5s ease-in-out infinite !important;
}
/* Running = green, no pulse */
.bex-ex-timer.is-live.is-running .bex-ex-timer-val{
  color:#34D399 !important;
  animation:none !important;
}
body.cable-week .bex-ex-timer-compact{
  background:rgba(126,181,226,0.05) !important;
  border-color:rgba(126,181,226,0.10) !important;
}

/* -- Superset Label Row ("Elliptical Forwards" header) ----- */
.superset-label-row{
  padding:10px 12px 6px !important;
  border-bottom:1px solid rgba(201,168,76,0.04) !important;
}
.superset-label-text{
  font-weight:700 !important;
  font-size:14px !important;
  letter-spacing:-0.2px !important;
  color:rgba(245,238,216,0.90) !important;
}
body.cable-week .superset-label-row{
  border-bottom-color:rgba(126,181,226,0.04) !important;
}
body.light-mode .superset-label-row{
  border-bottom-color:rgba(0,0,0,0.04) !important;
}
body.light-mode .superset-label-text{
  color:rgba(0,0,0,0.85) !important;
}

/* -- Superset Meta (3 supersets × 7 min) ------------------- */
.superset-meta{
  color:rgba(201,168,76,0.45) !important;
  font-weight:600 !important;
  font-size:12px !important;
}
body.light-mode .superset-meta{
  color:rgba(139,122,94,0.55) !important;
}

/* -- SC Input Labels & Units (×, LBS, KG, MIN) ------------ */
.sc-input-x{
  color:rgba(255,255,255,0.30) !important;
  font-weight:700 !important;
}
.sc-input-goal{
  color:rgba(201,168,76,0.35) !important;
  font-weight:600 !important;
  font-size:10px !important;
  letter-spacing:0.5px !important;
}
.superset-input-unit{
  color:rgba(201,168,76,0.40) !important;
  font-weight:600 !important;
  font-size:10px !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
}
body.light-mode .sc-input-x{
  color:rgba(0,0,0,0.25) !important;
}
body.light-mode .sc-input-goal{
  color:rgba(139,122,94,0.40) !important;
}
body.light-mode .superset-input-unit{
  color:rgba(139,122,94,0.45) !important;
}

/* -- Set Counter Row - MODERN REVAMP ----------------------- */
.bex-set-counter-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  background:rgba(255,255,255,0.03) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  border-radius:16px !important;
  padding:6px 6px !important;
  margin:0 !important;
  gap:6px !important;
}
body.cable-week .bex-set-counter-row{
  border-color:rgba(126,181,226,0.08) !important;
}
body.light-mode .bex-set-counter-row{
  background:rgba(0,0,0,0.02) !important;
  border-color:rgba(0,0,0,0.06) !important;
}
/* Set counter type label */
.bex-set-counter-type{
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,0.45) !important;
}
/* Purple for SUPERSET type label */
.bex-set-counter-type[data-type="superset"],
.bex-set-counter-row[data-superset] .bex-set-counter-type{
  color:#B47AED !important;
}
/* Set counter number (1/3) */
.bex-set-counter-label{
  font-variant-numeric:tabular-nums !important;
  font-weight:800 !important;
  font-size:18px !important;
  color:rgba(255,255,255,0.90) !important;
  letter-spacing:-0.5px !important;
}
.bex-set-counter-num{
  color:#fff !important;
  font-size:20px !important;
  font-weight:900 !important;
}
body.light-mode .bex-set-counter-label{
  color:rgba(0,0,0,0.80) !important;
}
body.light-mode .bex-set-counter-num{
  color:rgba(0,0,0,0.90) !important;
}
/* Center column */
.bex-set-counter-center{
  flex:1 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:4px !important;
}
.bex-set-counter-top{
  display:flex !important;
  align-items:baseline !important;
  gap:6px !important;
}
/* Nav arrows - modern pill buttons */
.bex-set-nav-arrow{
  width:36px !important;
  height:36px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:all 0.2s ease !important;
  flex-shrink:0 !important;
}
.bex-set-nav-arrow:active{
  background:rgba(255,255,255,0.12) !important;
  transform:scale(0.92) !important;
}
.bex-set-nav-arrow.disabled{
  opacity:0.20 !important;
}
.bex-set-nav-arrow svg{
  stroke:rgba(255,255,255,0.55) !important;
  width:16px !important;
  height:16px !important;
}
body.light-mode .bex-set-nav-arrow{
  background:rgba(0,0,0,0.03) !important;
  border-color:rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-set-nav-arrow svg{
  stroke:rgba(0,0,0,0.50) !important;
}
/* Progress bars in set dots row - match collapsed cards */
.bex-set-dots-row{
  display:flex !important;
  gap:4px !important;
  align-items:center !important;
  padding-bottom:8px !important;
}
.bex-crs-dot{
  width:20px !important;
  height:4px !important;
  border-radius:2px !important;
  background:rgba(255,255,255,0.10) !important;
  border:none !important;
  transition:all 0.25s ease !important;
}
.bex-crs-dot.active{
  background:#E8C866 !important;
  box-shadow:0 0 6px rgba(232,200,102,0.30) !important;
  width:20px !important;
  height:4px !important;
}
.bex-crs-dot.done{
  background:#34D399 !important;
}
/* PR set - gold bar (overrides done green) */
.bex-crs-dot.done.pr{
  background:#E8C866 !important;
  box-shadow:0 0 6px rgba(232,200,102,0.35) !important;
}
body.cable-week .bex-crs-dot{
  background:rgba(126,181,226,0.12) !important;
}
body.cable-week .bex-crs-dot.active{
  background:#7EB5E2 !important;
  box-shadow:0 0 6px rgba(126,181,226,0.25) !important;
}
/* Cable week done bars stay green, not blue */
body.cable-week .bex-crs-dot.done{
  background:#34D399 !important;
}
body.cable-week .bex-crs-dot.done.pr{
  background:#E8C866 !important;
  box-shadow:0 0 6px rgba(232,200,102,0.35) !important;
}
body.light-mode .bex-crs-dot{
  background:rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-crs-dot.active{
  background:#8B7A5E !important;
  box-shadow:none !important;
}
body.light-mode .bex-crs-dot.done{
  background:#34D399 !important;
}
body.light-mode .bex-crs-dot.done.pr{
  background:#C4A840 !important;
  box-shadow:none !important;
}
/* -- Set dot-mini bars (expanded card set indicator) -------- */
.bex-set-dot-mini{
  width:20px !important;
  height:4px !important;
  border-radius:2px !important;
  background:rgba(255,255,255,0.10) !important;
  border:none !important;
  transition:all 0.25s ease !important;
  position:relative !important;
  cursor:pointer !important;
}
/* Active bar (selected, NOT completed) - grey, enlarged + pip */
.bex-set-dot-mini.active{
  background:rgba(255,255,255,0.30) !important;
  box-shadow:0 0 6px rgba(255,255,255,0.10) !important;
  transform:none !important;
  height:5px !important;
}
.bex-set-dot-mini.active::after{
  content:'' !important;
  position:absolute !important;
  bottom:-6px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:4px !important;
  height:4px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,0.40) !important;
  box-shadow:0 0 4px rgba(255,255,255,0.20) !important;
}
/* Completed bar */
.bex-set-dot-mini.done{
  background:#34D399 !important;
  box-shadow:none !important;
}
/* Completed + active */
.bex-set-dot-mini.done.active{
  box-shadow:0 0 8px rgba(52,211,153,0.40) !important;
  height:5px !important;
}
.bex-set-dot-mini.done.active::after{
  content:'' !important;
  position:absolute !important;
  bottom:-6px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:4px !important;
  height:4px !important;
  border-radius:50% !important;
  background:#34D399 !important;
  box-shadow:0 0 4px rgba(52,211,153,0.60) !important;
}
/* PR set - gold bar */
.bex-set-dot-mini.done.pr{
  background:#E8C866 !important;
  box-shadow:0 0 6px rgba(232,200,102,0.35) !important;
}
.bex-set-dot-mini.done.pr.active::after{
  background:#E8C866 !important;
  box-shadow:0 0 4px rgba(232,200,102,0.60) !important;
}
/* Cable week - bars stay consistent */
body.cable-week .bex-set-dot-mini{
  background:rgba(126,181,226,0.12) !important;
}
body.cable-week .bex-set-dot-mini.active{
  background:rgba(255,255,255,0.30) !important;
  box-shadow:0 0 6px rgba(255,255,255,0.10) !important;
}
body.cable-week .bex-set-dot-mini.active::after{
  background:rgba(255,255,255,0.40) !important;
  box-shadow:0 0 4px rgba(255,255,255,0.20) !important;
}
body.cable-week .bex-set-dot-mini.done{
  background:#34D399 !important;
}
body.cable-week .bex-set-dot-mini.done.pr{
  background:#E8C866 !important;
  box-shadow:0 0 6px rgba(232,200,102,0.35) !important;
}
/* Light mode dot-mini */
body.light-mode .bex-set-dot-mini{
  background:rgba(0,0,0,0.08) !important;
  border:none !important;
}
body.light-mode .bex-set-dot-mini.active{
  background:rgba(0,0,0,0.22) !important;
  box-shadow:none !important;
}
body.light-mode .bex-set-dot-mini.active::after{
  background:rgba(0,0,0,0.30) !important;
  box-shadow:none !important;
}
body.light-mode .bex-set-dot-mini.done{
  background:#34D399 !important;
}
body.light-mode .bex-set-dot-mini.done.active::after{
  background:#34D399 !important;
}
body.light-mode .bex-set-dot-mini.done.pr{
  background:#C4A840 !important;
}

/* Legacy selectors override */
.bex-set-label{ display:none !important; }
.bex-sets-count{ display:none !important; }

/* -- Banner Polish ----------------------------------------- */

/* REST button - warm pill */
.bnr-rest-btn{
  background:rgba(201,168,76,0.06) !important;
  border:1px solid rgba(201,168,76,0.12) !important;
  border-radius:10px !important;
  color:rgba(201,168,76,0.65) !important;
  font-weight:700 !important;
  letter-spacing:0.5px !important;
  transition:all 0.2s ease !important;
}
.bnr-rest-btn:active{
  background:rgba(201,168,76,0.12) !important;
  transform:scale(0.95) !important;
}
body.light-mode .bnr-rest-btn{
  background:rgba(139,122,94,0.06) !important;
  border-color:rgba(139,122,94,0.10) !important;
  color:rgba(139,122,94,0.65) !important;
}

/* Volume badge - polished */
.bnr-vol-badge{
  background:rgba(201,168,76,0.06) !important;
  border:1px solid rgba(201,168,76,0.10) !important;
  border-radius:8px !important;
  font-variant-numeric:tabular-nums !important;
}
body.light-mode .bnr-vol-badge{
  background:rgba(139,122,94,0.06) !important;
  border-color:rgba(139,122,94,0.10) !important;
}

/* Timer hint text */
.bnr-timer-hint{
  font-weight:600 !important;
  letter-spacing:0.3px !important;
  color:rgba(201,168,76,0.40) !important;
}
body.light-mode .bnr-timer-hint{
  color:rgba(139,122,94,0.45) !important;
}

/* Progress label (50% DONE) - refined */
.bnr-prog-label{
  font-weight:700 !important;
  letter-spacing:0.5px !important;
  font-variant-numeric:tabular-nums !important;
}

/* FREE WEIGHTS / CABLES pill */
.bnr-equip-pill{
  border-radius:8px !important;
  font-weight:700 !important;
  letter-spacing:1px !important;
}

/* -- Section Header ("TODAY'S WORKOUT 3 exercises") -------- */
.bex-section-header{
  letter-spacing:2px !important;
  font-weight:700 !important;
}
.bex-section-count{
  font-variant-numeric:tabular-nums !important;
  font-weight:700 !important;
}

/* -- Dock Timer - warm polish ------------------------------ */
.dock-timer-bar{
  background:rgba(15,13,10,0.95) !important;
  border-top:1px solid rgba(201,168,76,0.08) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
}
body.light-mode .dock-timer-bar{
  background:rgba(244,242,237,0.95) !important;
  border-top-color:rgba(139,122,94,0.08) !important;
}

/* -- SC Summary Button - premium pill ---------------------- */
.sc-summary-btn{
  background:rgba(201,168,76,0.06) !important;
  border:1px solid rgba(201,168,76,0.12) !important;
  border-radius:12px !important;
  transition:all 0.2s ease !important;
}
.sc-summary-btn:active{
  background:rgba(201,168,76,0.12) !important;
  transform:scale(0.96) !important;
}
body.light-mode .sc-summary-btn{
  background:rgba(139,122,94,0.06) !important;
  border-color:rgba(139,122,94,0.10) !important;
}

/* -- Tempo Line - white text ------------------------------- */
.sc-tempo-line{
  color:rgba(255,255,255,0.40) !important;
  font-weight:600 !important;
  font-size:10px !important;
  letter-spacing:1px !important;
}
body.light-mode .sc-tempo-line{
  color:rgba(0,0,0,0.40) !important;
}

/* -- Info Tip Button - warm styling ------------------------ */
.info-tip-btn{
  background:rgba(201,168,76,0.06) !important;
  border:1px solid rgba(201,168,76,0.10) !important;
  border-radius:50% !important;
  transition:all 0.2s ease !important;
}
.info-tip-btn:active{
  background:rgba(201,168,76,0.15) !important;
}
body.light-mode .info-tip-btn{
  background:rgba(139,122,94,0.06) !important;
  border-color:rgba(139,122,94,0.08) !important;
}

/* -- Stepper Area Inputs - larger touch targets ------------ */
.bex-stepper-area .stepper-btn{
  min-width:40px !important;
  min-height:40px !important;
}

/* -- Bex Body Content - better spacing --------------------- */
.bex-card-body{
  padding:10px 12px 8px !important;
}

/* ===============================================================
   13. VSTEP PREMIUM REDESIGN - Tactile, high-contrast steppers
   =============================================================== */

/* -- VStep wrapper - deep well with gold border ------------ */
.bex-vstep{
  background:rgba(0,0,0,0.25) !important;
  border:1.5px solid rgba(201,168,76,0.18) !important;
  border-radius:16px !important;
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.35),
             0 1px 0 rgba(201,168,76,0.04) !important;
  overflow:hidden !important;
}
body.cable-week .bex-vstep{
  border-color:rgba(126,181,226,0.18) !important;
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.35),
             0 1px 0 rgba(126,181,226,0.04) !important;
}
body.light-mode .bex-vstep{
  background:rgba(0,0,0,0.03) !important;
  border-color:rgba(139,122,94,0.18) !important;
  box-shadow:inset 0 1px 4px rgba(0,0,0,0.06),
             0 1px 0 rgba(255,255,255,0.5) !important;
}

/* -- VStep arrow buttons - compact, tactile ---------------- */
.bex-vstep-up.bex-step,
.bex-vstep-down.bex-step{
  background:rgba(201,168,76,0.07) !important;
  height:34px !important;
  min-height:34px !important;
}
.bex-vstep-up.bex-step{
  border-bottom:1px solid rgba(201,168,76,0.10) !important;
  border-radius:14px 14px 0 0 !important;
  background:linear-gradient(180deg, rgba(201,168,76,0.08) 0%, rgba(201,168,76,0.03) 100%) !important;
}
.bex-vstep-down.bex-step{
  border-top:1px solid rgba(201,168,76,0.10) !important;
  border-radius:0 0 14px 14px !important;
  background:linear-gradient(0deg, rgba(201,168,76,0.08) 0%, rgba(201,168,76,0.03) 100%) !important;
}
.bex-vstep-up.bex-step:active,
.bex-vstep-down.bex-step:active{
  background:rgba(201,168,76,0.18) !important;
}
.bex-vstep-up.bex-step svg,
.bex-vstep-down.bex-step svg{
  stroke:rgba(201,168,76,0.55) !important;
  width:18px !important;
  height:18px !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.3)) !important;
}
.bex-vstep-up.bex-step:active svg,
.bex-vstep-down.bex-step:active svg{
  stroke:var(--gold, #D9B878) !important;
  filter:drop-shadow(0 0 6px rgba(201,168,76,0.4)) !important;
}
/* Cable week */
body.cable-week .bex-vstep-up.bex-step{
  background:linear-gradient(180deg, rgba(126,181,226,0.08) 0%, rgba(126,181,226,0.03) 100%) !important;
  border-bottom-color:rgba(126,181,226,0.10) !important;
}
body.cable-week .bex-vstep-down.bex-step{
  background:linear-gradient(0deg, rgba(126,181,226,0.08) 0%, rgba(126,181,226,0.03) 100%) !important;
  border-top-color:rgba(126,181,226,0.10) !important;
}
body.cable-week .bex-vstep-up.bex-step:active,
body.cable-week .bex-vstep-down.bex-step:active{
  background:rgba(126,181,226,0.18) !important;
}
body.cable-week .bex-vstep-up.bex-step svg,
body.cable-week .bex-vstep-down.bex-step svg{
  stroke:rgba(126,181,226,0.55) !important;
}
/* Light mode */
body.light-mode .bex-vstep-up.bex-step{
  background:linear-gradient(180deg, rgba(139,122,94,0.06) 0%, rgba(139,122,94,0.02) 100%) !important;
  border-bottom-color:rgba(139,122,94,0.08) !important;
}
body.light-mode .bex-vstep-down.bex-step{
  background:linear-gradient(0deg, rgba(139,122,94,0.06) 0%, rgba(139,122,94,0.02) 100%) !important;
  border-top-color:rgba(139,122,94,0.08) !important;
}
body.light-mode .bex-vstep-up.bex-step svg,
body.light-mode .bex-vstep-down.bex-step svg{
  stroke:rgba(139,122,94,0.50) !important;
  filter:none !important;
}

/* -- VStep number display - deep inset, high contrast ------ */
.bex-vstep-num{
  background:rgba(0,0,0,0.50) !important;
  color:#F0E4C4 !important;
  height:clamp(42px, 6vh, 55px) !important;
  min-height:42px !important;
  font-size:clamp(24px, 4.5vw, 32px) !important;
  text-shadow:0 1px 3px rgba(0,0,0,0.4) !important;
  box-shadow:inset 0 1px 4px rgba(0,0,0,0.4),
             inset 0 -1px 0 rgba(201,168,76,0.05) !important;
}
.bex-vstep-num:active{
  color:var(--gold, #D9B878) !important;
  text-shadow:0 0 12px rgba(201,168,76,0.3) !important;
}
.bex-vstep-num.zero-val{
  color:rgba(201,168,76,0.18) !important;
  text-shadow:none !important;
}
body.cable-week .bex-vstep-num{
  color:#C8DCF0 !important;
  box-shadow:inset 0 1px 4px rgba(0,0,0,0.4),
             inset 0 -1px 0 rgba(126,181,226,0.05) !important;
}
body.cable-week .bex-vstep-num:active{
  color:#7EB5E2 !important;
  text-shadow:0 0 12px rgba(126,181,226,0.3) !important;
}
body.cable-week .bex-vstep-num.zero-val{
  color:rgba(126,181,226,0.18) !important;
}
body.light-mode .bex-vstep-num{
  background:rgba(255,255,255,0.70) !important;
  color:rgba(0,0,0,0.85) !important;
  text-shadow:none !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.06) !important;
}
body.light-mode .bex-vstep-num.zero-val{
  color:rgba(0,0,0,0.12) !important;
}

/* -- VStep input label - bolder, more visible -------------- */
.bex-input-label{
  color:rgba(201,168,76,0.55) !important;
  letter-spacing:1.5px !important;
  font-size:10px !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
}
body.cable-week .bex-input-label{
  color:rgba(126,181,226,0.55) !important;
}
body.light-mode .bex-input-label{
  color:rgba(139,122,94,0.60) !important;
}

/* -- Stepper input group - better spacing ------------------ */
.bex-input-group{
  gap:4px !important;
}

/* -- "×" separator between weight & reps ------------------- */
.bex-stepper-x{
  color:rgba(201,168,76,0.25) !important;
  font-size:18px !important;
  font-weight:300 !important;
}
body.light-mode .bex-stepper-x{
  color:rgba(139,122,94,0.30) !important;
}

/* ===============================================================
   14. EXPANDED CARD ZONES - Visual hierarchy & depth
   =============================================================== */

/* -- Card body - subtle background zone -------------------- */
.bex-inline-open .bex-card-body{
  background:rgba(0,0,0,0.08) !important;
  border-radius:0 0 16px 16px !important;
  margin:0 -2px !important;
  padding:6px 14px 4px !important;
}
body.light-mode .bex-inline-open .bex-card-body{
  background:rgba(0,0,0,0.02) !important;
}

/* -- Timer bar - floating pill with depth ------------------ */
.bex-inline-open .bex-ex-timer-compact{
  background:rgba(0,0,0,0.35) !important;
  border:1.5px solid rgba(201,168,76,0.12) !important;
  border-radius:12px !important;
  padding:5px 14px !important;
  box-shadow:inset 0 1px 4px rgba(0,0,0,0.3),
             0 2px 8px rgba(0,0,0,0.2) !important;
}
body.cable-week .bex-inline-open .bex-ex-timer-compact{
  border-color:rgba(126,181,226,0.12) !important;
}
body.light-mode .bex-inline-open .bex-ex-timer-compact{
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(139,122,94,0.12) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* -- Timer value - larger, glowing ------------------------- */
/* Default (paused / not started) state: gold */
.bex-inline-open .bex-ex-timer-val{
  font-size:18px !important;
  font-weight:800 !important;
  color:var(--gold, #D9B878) !important;
  text-shadow:0 0 8px rgba(201,168,76,0.2) !important;
}
/* Live but paused: yellow + pulse */
.bex-ex-timer.is-live .bex-ex-timer-val{
  color:#FACC15 !important;
  text-shadow:0 0 8px rgba(250,204,21,0.25) !important;
  animation:timerPausePulse 1.5s ease-in-out infinite !important;
}
/* Running state: green, no pulse */
.bex-ex-timer.is-live.is-running .bex-ex-timer-val{
  color:#34D399 !important;
  text-shadow:0 0 8px rgba(52,211,153,0.2) !important;
  animation:none !important;
}
@keyframes timerPausePulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.45; }
}
body.light-mode .bex-inline-open .bex-ex-timer-val{
  text-shadow:none !important;
}
body.light-mode .bex-ex-timer.is-live .bex-ex-timer-val{
  color:#B8860B !important;
}
body.light-mode .bex-ex-timer.is-live.is-running .bex-ex-timer-val{
  color:#16A34A !important;
  animation:none !important;
}

/* -- Set counter row - deeper, more defined ---------------- */
.bex-inline-open .bex-set-counter-row{
  background:rgba(0,0,0,0.20) !important;
  border:1px solid rgba(201,168,76,0.08) !important;
  border-radius:14px !important;
  padding:8px 14px !important;
  margin:4px 0 !important;
  box-shadow:inset 0 1px 4px rgba(0,0,0,0.2) !important;
}
body.cable-week .bex-inline-open .bex-set-counter-row{
  border-color:rgba(126,181,226,0.08) !important;
}
body.light-mode .bex-inline-open .bex-set-counter-row{
  background:rgba(0,0,0,0.03) !important;
  border-color:rgba(139,122,94,0.08) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* -- Set number (1/3) - bigger, bolder --------------------- */
.bex-inline-open .bex-sets-count{
  font-size:22px !important;
  font-weight:900 !important;
  color:rgba(245,238,216,0.90) !important;
}
body.light-mode .bex-inline-open .bex-sets-count{
  color:rgba(0,0,0,0.80) !important;
}

/* -- Set label ("SET" / "SUPERSET") - more visible --------- */
.bex-inline-open .bex-set-label{
  font-size:11px !important;
  color:rgba(201,168,76,0.55) !important;
  letter-spacing:2px !important;
}
body.cable-week .bex-inline-open .bex-set-label{
  color:rgba(126,181,226,0.55) !important;
}
body.light-mode .bex-inline-open .bex-set-label{
  color:rgba(139,122,94,0.55) !important;
}

/* -- Nav arrows - compact, prominent in expanded ----------- */
.bex-inline-open .bex-set-nav-arrow{
  width:34px !important;
  height:40px !important;
  border-radius:14px !important;
  background:rgba(201,168,76,0.08) !important;
  border:1.5px solid rgba(201,168,76,0.15) !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.15) !important;
}
.bex-inline-open .bex-set-nav-arrow:active{
  background:rgba(201,168,76,0.20) !important;
  box-shadow:0 0 12px rgba(201,168,76,0.15) !important;
}
.bex-inline-open .bex-set-nav-arrow svg{
  stroke:rgba(201,168,76,0.65) !important;
  width:20px !important;
  height:20px !important;
}
body.cable-week .bex-inline-open .bex-set-nav-arrow{
  background:rgba(126,181,226,0.08) !important;
  border-color:rgba(126,181,226,0.15) !important;
}
body.cable-week .bex-inline-open .bex-set-nav-arrow svg{
  stroke:rgba(126,181,226,0.65) !important;
}
body.light-mode .bex-inline-open .bex-set-nav-arrow{
  background:rgba(139,122,94,0.06) !important;
  border-color:rgba(139,122,94,0.12) !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.06) !important;
}
body.light-mode .bex-inline-open .bex-set-nav-arrow svg{
  stroke:rgba(139,122,94,0.60) !important;
}

/* -- BEAT badge - more prominent --------------------------- */
.bex-inline-open .bex-body-pr{
  background:rgba(201,168,76,0.08) !important;
  border:1.5px solid rgba(201,168,76,0.15) !important;
  border-radius:12px !important;
  padding:6px 14px !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.15) !important;
}
.bex-inline-open .bex-body-pr.is-new-pr{
  background:rgba(201,168,76,0.14) !important;
  border-color:rgba(201,168,76,0.30) !important;
  box-shadow:0 0 20px rgba(201,168,76,0.12),
             0 2px 8px rgba(0,0,0,0.15) !important;
}

/* -- Info strip chips - more defined ----------------------- */
.bex-inline-open .bex-body-sec-chip{
  background:rgba(201,168,76,0.08) !important;
  border:1px solid rgba(201,168,76,0.12) !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.10) !important;
}
body.cable-week .bex-inline-open .bex-body-sec-chip{
  background:rgba(126,181,226,0.08) !important;
  border-color:rgba(126,181,226,0.12) !important;
}
body.light-mode .bex-inline-open .bex-body-sec-chip{
  background:rgba(139,122,94,0.06) !important;
  border-color:rgba(139,122,94,0.10) !important;
  box-shadow:0 1px 2px rgba(0,0,0,0.04) !important;
}
/* Tempo chip - white text */
.bex-tempo-chip{
  color:rgba(255,255,255,0.70) !important;
}
/* -- Rest overlay - warm styling, sticky in expanded stepper -- */
.bex-rest-overlay{
  background:rgba(8,6,4,0.96) !important;
  backdrop-filter:blur(12px) !important;
}
.bex-inline-open .bex-rest-overlay{
  position:sticky !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  min-height:100% !important;
  border-radius:0 !important;
  z-index:60 !important;
}
.bex-rest-ring-fill{
  stroke:var(--gold, #D9B878) !important;
}
.bex-rest-skip{
  border-color:rgba(201,168,76,0.20) !important;
  color:rgba(255,255,255,0.70) !important;
}
.bex-rest-add{
  color:var(--gold, #D9B878) !important;
  border-color:rgba(201,168,76,0.25) !important;
  background:rgba(201,168,76,0.07) !important;
}
body.light-mode .bex-rest-overlay{
  background:rgba(244,242,237,0.97) !important;
}
body.light-mode .bex-rest-label{
  color:rgba(0,0,0,0.40) !important;
}
body.light-mode .bex-rest-time{
  color:rgba(0,0,0,0.85) !important;
}
body.light-mode .bex-rest-sub{
  color:rgba(0,0,0,0.35) !important;
}
body.light-mode .bex-rest-ring-bg{
  stroke:rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-rest-ring-fill{
  stroke:#8B7A5E !important;
}
body.light-mode .bex-rest-skip{
  border-color:rgba(0,0,0,0.12) !important;
  background:rgba(0,0,0,0.04) !important;
  color:rgba(0,0,0,0.60) !important;
}
body.light-mode .bex-rest-add{
  color:#8B7A5E !important;
  border-color:rgba(139,122,94,0.25) !important;
  background:rgba(139,122,94,0.06) !important;
}
body.light-mode .bex-tempo-chip{
  color:rgba(0,0,0,0.60) !important;
}

/* -- Stepper area - zone separation ------------------------ */
.bex-inline-open .bex-stepper-area{
  background:rgba(0,0,0,0.06) !important;
  border-top:1px solid rgba(201,168,76,0.08) !important;
  padding:8px 12px 12px !important;
  border-radius:0 0 16px 16px !important;
  margin:0 -2px !important;
}
body.cable-week .bex-inline-open .bex-stepper-area{
  border-top-color:rgba(126,181,226,0.08) !important;
}
body.light-mode .bex-inline-open .bex-stepper-area{
  background:rgba(0,0,0,0.015) !important;
  border-top-color:rgba(139,122,94,0.06) !important;
}

/* -- Superset exercise header - warm accent strip ---------- */
.bex-inline-open .superset-label-row{
  background:rgba(201,168,76,0.04) !important;
  border-radius:10px !important;
  padding:6px 14px 5px !important;
  margin:4px 0 2px !important;
  border-bottom:none !important;
  border-left:3px solid rgba(201,168,76,0.25) !important;
}
body.cable-week .bex-inline-open .superset-label-row{
  background:rgba(126,181,226,0.04) !important;
  border-left-color:rgba(126,181,226,0.25) !important;
}
body.light-mode .bex-inline-open .superset-label-row{
  background:rgba(139,122,94,0.03) !important;
  border-left-color:rgba(139,122,94,0.20) !important;
}

/* ===============================================================
   16. ENERGY PASS - Brighter golds, vertical alignment, polish
   =============================================================== */

/* -- Tempo inline in meta line - white text ------------------ */
.bex-pill-tempo{
  color:rgba(255,255,255,0.55) !important;
  font-weight:600 !important;
}
body.light-mode .bex-pill-tempo{
  color:rgba(0,0,0,0.45) !important;
}

/* -- Input labels (WEIGHT, REPS, Goal: 7 MIN) - centered with steppers -- */
.bex-input-label{
  color:rgba(255,255,255,0.65) !important;
  letter-spacing:1px !important;
  font-size:10px !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  text-align:center !important;
  display:block !important;
  margin-bottom:4px !important;
}
.bex-input-group{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:4px !important;
}
body.cable-week .bex-input-label{
  color:rgba(126,181,226,0.65) !important;
}
body.light-mode .bex-input-label{
  color:rgba(0,0,0,0.55) !important;
}

/* -- "×" between weight & reps - centered vertically -------- */
.bex-input-x{
  display:flex !important;
  align-items:center !important;
  align-self:center !important;
  margin-top:16px !important;
  color:rgba(255,255,255,0.25) !important;
  font-size:16px !important;
}

/* -- BRIGHTER GOLD - all previously dim gold text ----------- */
/* Meta line */
.bex-pill-meta{
  color:rgba(255,255,255,0.65) !important;
}
body.light-mode .bex-pill-meta{
  color:rgba(0,0,0,0.60) !important;
}
/* Exercise name - brighter */
.bex-pill-name{
  color:#fff !important;
  text-shadow:0 1px 3px rgba(0,0,0,0.3) !important;
}
body.light-mode .bex-pill-name{
  color:#111 !important;
  text-shadow:none !important;
}
/* Topbar - brighter */
.bex-expanded-topbar{
  color:rgba(255,255,255,0.55) !important;
}
.bex-topbar-day{
  color:rgba(255,255,255,0.65) !important;
}
.bex-topbar-workout{
  color:rgba(255,255,255,0.65) !important;
}
.bex-topbar-date{
  color:rgba(255,255,255,0.50) !important;
}
.bex-topbar-sep{
  color:rgba(255,255,255,0.25) !important;
}
body.light-mode .bex-topbar-day,
body.light-mode .bex-topbar-workout{
  color:rgba(0,0,0,0.55) !important;
}
/* Set counter text - brighter */
.bex-set-counter-type{
  color:rgba(255,255,255,0.55) !important;
}
/* BEAT chip - brighter */
.bex-pr-target{
  color:rgba(255,255,255,0.75) !important;
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
}
body.light-mode .bex-pr-target{
  color:rgba(0,0,0,0.65) !important;
}
/* VStep number - brighter */
.bex-vstep-num{
  color:#F5EDCF !important;
}
.bex-vstep-num.zero-val{
  color:rgba(255,255,255,0.20) !important;
}
/* VStep arrows - brighter */
.bex-vstep-up.bex-step svg,
.bex-vstep-down.bex-step svg{
  stroke:rgba(255,255,255,0.50) !important;
}
/* VStep wrapper border - brighter */
.bex-vstep{
  border-color:rgba(255,255,255,0.10) !important;
}
/* Rest chip - brighter */
.bex-body-sec-chip{
  color:rgba(255,255,255,0.70) !important;
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
}
body.light-mode .bex-body-sec-chip{
  color:rgba(0,0,0,0.60) !important;
}
/* Stepper x separator */
.bex-stepper-x{
  color:rgba(255,255,255,0.30) !important;
}
/* Progress dots/bars on collapsed - brighter */
.bex-coll-prog-dot{
  background:rgba(255,255,255,0.12) !important;
}
/* All completed bars = green (override earlier gold/blue) */
.bex-coll-prog-dot.done{
  background:#34D399 !important;
  box-shadow:0 0 4px rgba(52,211,153,0.25) !important;
}
/* Cable week done bars = green too (not blue) */
body.cable-week .bex-coll-prog-dot.done{
  background:#34D399 !important;
  box-shadow:0 0 4px rgba(52,211,153,0.25) !important;
}
/* PR set = gold bar */
.bex-coll-prog-dot.done.pr{
  background:#E8C866 !important;
  box-shadow:0 0 6px rgba(232,200,102,0.35) !important;
}
body.cable-week .bex-coll-prog-dot.done.pr{
  background:#E8C866 !important;
  box-shadow:0 0 6px rgba(232,200,102,0.35) !important;
}
body.light-mode .bex-coll-prog-dot.done{
  background:#34D399 !important;
}
body.light-mode .bex-coll-prog-dot.done.pr{
  background:#C4A840 !important;
}

/* -- SUPERSET counter type label - purple -------------------- */
.bex-set-counter-type.is-superset{
  color:#B47AED !important;
}
body.light-mode .bex-set-counter-type.is-superset{
  color:#7B3FA0 !important;
}

/* ===============================================================
   15. MOBILE RESPONSIVENESS - dock fix, clean card scaling
   =============================================================== */

/* -- Fix body transform breaking position:fixed -------------- */
/* The pageEnter animation creates a containing block on body which breaks
   position:fixed for children like the dock. Kill it entirely on this page. */
body{
  transform:none !important;
  animation:none !important;
}

/* -- Bottom dock - guarantee fixed to viewport bottom -------- */
.bottom-menu-bar{
  position:fixed !important;
  top:auto !important;
  bottom:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:9999 !important;
  transform:none !important;
  will-change:auto !important;
  pointer-events:auto !important;
  inset:auto 0 0 0 !important;
  transition:none !important;
}

/* -- Scrollable content - ensure room for fixed dock --------- */
.scrollable-content{
  padding-bottom:calc(90px + env(safe-area-inset-bottom)) !important;
}

/* -- Expanded card title column - allow room for muscle icon - */
.bex-inline-open .bex-card-title-col{
  padding-right:70px !important;
}

/* -- Small phones (≤360px) - tighter spacing --------------- */
@media (max-width:360px){
  .bex-pill-name{
    font-size:13.5px !important;
  }
  .workout-container{
    padding-left:4px !important;
    padding-right:4px !important;
  }
  .banner-exercise-list{
    padding:0 4px !important;
  }
  .bex-card-body{
    padding:10px 8px !important;
  }
  .bex-coll-muscle-icon{
    width:24px !important;
    height:24px !important;
  }
}

/* -- Prevent character-level word breaking -------------------- */
.bex-pill-name,
.bex-pill-ss-name{
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
}

/* -- Revamped Calendar Top Bar -------------------------------- */
.cal-top-bar{
  padding:8px 12px 4px !important;
}
.cal-top-row{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
}
.cal-legend-inline{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  padding:4px 0 2px !important;
}
.cal-legend-chip{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:0.8px !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,0.50) !important;
}
.cal-legend-dot{
  width:8px !important;
  height:8px !important;
  border-radius:50% !important;
  flex-shrink:0 !important;
}
.cal-legend-dot.free{
  background:#D9B878 !important;
}
.cal-legend-dot.cable{
  background:#7EB5E2 !important;
}
body.light-mode .cal-legend-chip{
  color:rgba(0,0,0,0.45) !important;
}
body.light-mode .cal-legend-dot.free{
  background:#8B7A5E !important;
}
/* Hide old month-label-row and calendar-legend if still present */
.month-label-row + .calendar-legend{ display:none !important; }
.month-today-sep{ display:none !important; }

/* -- Week Menu Button (replaces drag handle) ----------------- */
.bnr-week-menu-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:28px !important;
  margin:2px auto 4px !important;
  background:rgba(201,168,76,0.06) !important;
  border:1px solid rgba(201,168,76,0.12) !important;
  border-radius:8px !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:all 0.2s ease !important;
}
.bnr-week-menu-btn svg{
  width:16px !important;
  height:16px !important;
  stroke:#E8924A !important; /* orange — free weights week */
}
body.cable-week .bnr-week-menu-btn svg{
  stroke:#7EB5E2 !important; /* blue — cable week */
}
.bnr-week-menu-btn:active{
  background:rgba(201,168,76,0.15) !important;
  transform:scale(0.92) !important;
}
body.light-mode .bnr-week-menu-btn{
  background:rgba(139,122,94,0.06) !important;
  border-color:rgba(139,122,94,0.10) !important;
}
body.light-mode .bnr-week-menu-btn svg{
  stroke:#C47A2E !important; /* darker orange — free weights light mode */
}
body.light-mode.cable-week .bnr-week-menu-btn svg{
  stroke:#5A9AC4 !important; /* darker blue — cable week light mode */
}

/* -- Hide old banner REST button completely ------------------- */
.bnr-zzz-btn{
  display:none !important;
}

/* -- Streak + Rest row (below week strip) --------------------- */
.streak-rest-row{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:4px 12px !important;
}
.rest-days-pill{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  padding:5px 12px !important;
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  border-radius:20px !important;
  color:rgba(255,255,255,0.55) !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:0.3px !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:all 0.2s ease !important;
  margin:0 !important;
}
.rest-days-pill:active{
  transform:scale(0.95) !important;
  background:rgba(255,255,255,0.08) !important;
}
.rest-days-pill svg{
  stroke:rgba(255,255,255,0.45) !important;
  flex-shrink:0 !important;
}
.rest-days-count{
  color:#E8C866 !important;
  font-weight:800 !important;
}
body.light-mode .rest-days-pill{
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(0,0,0,0.08) !important;
  color:rgba(0,0,0,0.50) !important;
}
body.light-mode .rest-days-pill svg{
  stroke:rgba(0,0,0,0.40) !important;
}
body.light-mode .rest-days-count{
  color:#8B7A5E !important;
}

/* -- Week Sheet - percentage label --------------------------- */
.sheet-week-ring-wrap{
  position:relative !important;
}
.sheet-week-pct{
  position:absolute !important;
  bottom:-2px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  font-size:8px !important;
  font-weight:800 !important;
  color:rgba(217,184,120,0.85) !important;
  white-space:nowrap !important;
  letter-spacing:-0.3px !important;
}
body.light-mode .sheet-week-pct{
  color:rgba(139,122,94,0.80) !important;
}

/* -- Muscle Group Strip - below banner, above exercises ------- */
.bnr-muscle-strip{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px 8px 8px !important;
  width:100% !important;
}
.bnr-muscle-strip img{
  height:auto !important;
  width:85% !important;
  max-width:340px !important;
  max-height:200px !important;
  object-fit:contain !important;
  opacity:0.35 !important;
  filter:drop-shadow(0 0 12px rgba(201,168,76,0.15)) drop-shadow(0 0 30px rgba(201,168,76,0.06)) !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:opacity 0.2s ease, transform 0.2s ease !important;
}
.bnr-muscle-strip img:active{
  transform:scale(0.95) !important;
  opacity:0.50 !important;
}
.bnr-muscle-strip img[src=""]{
  display:none !important;
}
body.light-mode .bnr-muscle-strip img{
  opacity:0.25 !important;
  filter:drop-shadow(0 0 8px rgba(0,0,0,0.08)) !important;
}
body.cable-week .bnr-muscle-strip img{
  filter:drop-shadow(0 0 12px rgba(126,181,226,0.15)) drop-shadow(0 0 30px rgba(126,181,226,0.06)) !important;
}

/* -- Hide session volume (LBS) from banner ------------------- */
.session-volume{
  display:none !important;
}

/* -- Muscle Thumb Icon in Banner ---------------------------- */
/* Muscle thumb removed from banner */
.bnr-muscle-thumb{ display:none !important; }

/* -- End Workout Button (banner footer) --------------------- */
.bnr-end-workout-btn{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  padding:6px 12px !important;
  background:rgba(239,68,68,0.10) !important;
  border:1px solid rgba(239,68,68,0.20) !important;
  border-radius:10px !important;
  color:#EF4444 !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:0.5px !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:all 0.2s ease !important;
}
.bnr-end-workout-btn svg{
  width:14px !important;
  height:14px !important;
  stroke:#EF4444 !important;
}
.bnr-end-workout-btn:active{
  background:rgba(239,68,68,0.22) !important;
  transform:scale(0.95) !important;
}
body.light-mode .bnr-end-workout-btn{
  background:rgba(239,68,68,0.06) !important;
  border-color:rgba(239,68,68,0.15) !important;
}

/* -- Stop Button (expanded exercise timer) ------------------- */
.bex-timer-stop{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:28px !important;
  height:28px !important;
  border-radius:8px !important;
  background:rgba(239,68,68,0.10) !important;
  border:1px solid rgba(239,68,68,0.20) !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:all 0.2s ease !important;
  margin-left:2px !important;
}
.bex-timer-stop svg{
  width:14px !important;
  height:14px !important;
  fill:#EF4444 !important;
}
.bex-timer-stop:active{
  background:rgba(239,68,68,0.25) !important;
  transform:scale(0.90) !important;
}
body.light-mode .bex-timer-stop{
  background:rgba(239,68,68,0.06) !important;
  border-color:rgba(239,68,68,0.15) !important;
}

/* -- PR Badge on Collapsed Cards ---------------------------- */
.bex-pill-pr-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:3px !important;
  font-size:10px !important;
  font-weight:700 !important;
  color:#E8C866 !important;
  margin-left:6px !important;
  white-space:nowrap !important;
}
.bex-pill-pr-badge svg{
  width:12px !important;
  height:12px !important;
  stroke:#E8C866 !important;
  fill:none !important;
  flex-shrink:0 !important;
}
body.light-mode .bex-pill-pr-badge{
  color:#8B7A5E !important;
}
body.light-mode .bex-pill-pr-badge svg{
  stroke:#8B7A5E !important;
}

/* -- Set Switching Animation ------------------------------- */
.bex-set-slide{
  transition:none !important;
}
.bex-set-entering{
  animation:setSlideIn 0.3s ease-out !important;
}
@keyframes setSlideIn{
  0%{ opacity:0.3; transform:translateX(12px); }
  100%{ opacity:1; transform:translateX(0); }
}
.bex-counter-flash{
  animation:counterFlash 0.35s ease-out !important;
}
@keyframes counterFlash{
  0%{ transform:scale(1.25); color:#E8C866; }
  100%{ transform:scale(1); }
}
body.cable-week .bex-set-entering{
  animation:setSlideInBlue 0.3s ease-out !important;
}
@keyframes setSlideInBlue{
  0%{ opacity:0.3; transform:translateX(12px); }
  100%{ opacity:1; transform:translateX(0); }
}

/* -- Hide Rotate Screen Tip -------------------------------- */
.rotate-tip{
  display:none !important;
}

/* -- Fix ex-done muted text (from mm-themes.css) ------------ */
.banner-ex-card.ex-done .bex-pill-name,
.banner-ex-card.ex-done .bex-pill-ss-name{
  color:rgba(255,255,255,0.60) !important;
  text-decoration:none !important;
}
body.light-mode .banner-ex-card.ex-done .bex-pill-name,
body.light-mode .banner-ex-card.ex-done .bex-pill-ss-name{
  color:rgba(0,0,0,0.55) !important;
  text-decoration:none !important;
}
.banner-ex-card.ex-done .bex-pill-meta{
  color:rgba(255,255,255,0.40) !important;
}
body.light-mode .banner-ex-card.ex-done .bex-pill-meta{
  color:rgba(0,0,0,0.40) !important;
}

/* -- DARK MODE - brighter text everywhere ------------------- */
.bex-pill-name,
.bex-pill-ss-name{
  color:#fff !important;
}
.bex-pill-meta{
  color:rgba(255,255,255,0.65) !important;
}
.bnr-title{
  color:#fff !important;
}
.bnr-eyebrow{
  color:rgba(255,255,255,0.60) !important;
}
.bnr-day{
  color:rgba(255,255,255,0.75) !important;
}
.bnr-subtitle-line{
  color:rgba(255,255,255,0.55) !important;
}
.bex-set-counter-type{
  color:rgba(255,255,255,0.60) !important;
}
.bex-set-counter-label{
  color:rgba(255,255,255,0.90) !important;
}
.bex-set-counter-num{
  color:#fff !important;
}
.bex-input-label{
  color:rgba(255,255,255,0.65) !important;
}
.bex-topbar-day{
  color:rgba(255,255,255,0.70) !important;
}
.bex-topbar-workout{
  color:rgba(255,255,255,0.55) !important;
}
.bex-topbar-date{
  color:rgba(255,255,255,0.50) !important;
}
.bnr-timer-big{
  color:rgba(255,255,255,0.92) !important;
}
.bnr-timer-hint{
  color:rgba(255,255,255,0.45) !important;
}
.bex-expanded-topbar{
  color:rgba(255,255,255,0.65) !important;
}
.bex-ex-timer-val{
  color:rgba(255,255,255,0.80) !important;
}
/* VStep number - full white */
.bex-vstep-num{
  color:#fff !important;
}

/* -- LIGHT MODE - much darker text -------------------------- */
body.light-mode .bex-pill-name,
body.light-mode .bex-pill-ss-name{
  color:#1a1714 !important;
}
body.light-mode .bex-pill-meta{
  color:rgba(0,0,0,0.58) !important;
}
body.light-mode .bnr-title{
  color:#1a1714 !important;
}
body.light-mode .bnr-eyebrow{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .bnr-day{
  color:rgba(0,0,0,0.70) !important;
}
body.light-mode .bnr-subtitle-line{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .bnr-zzz-btn{
  color:rgba(0,0,0,0.60) !important;
}
body.light-mode .bnr-zzz-btn svg{
  stroke:rgba(0,0,0,0.55) !important;
  opacity:1 !important;
}
body.light-mode .bex-set-counter-type{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .bex-set-counter-label{
  color:rgba(0,0,0,0.80) !important;
}
body.light-mode .bex-set-counter-num{
  color:rgba(0,0,0,0.90) !important;
}
body.light-mode .bex-input-label{
  color:rgba(0,0,0,0.60) !important;
}
body.light-mode .bex-topbar-day{
  color:rgba(0,0,0,0.70) !important;
}
body.light-mode .bex-topbar-workout{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .bex-topbar-date{
  color:rgba(0,0,0,0.50) !important;
}
body.light-mode .bex-expanded-topbar{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .bnr-timer-big{
  color:rgba(0,0,0,0.85) !important;
}
body.light-mode .bnr-timer-hint{
  color:rgba(0,0,0,0.45) !important;
}
body.light-mode .bnr-prog-pct{
  color:rgba(0,0,0,0.85) !important;
}
body.light-mode .bnr-prog-label{
  color:rgba(0,0,0,0.50) !important;
}
body.light-mode .bex-ex-timer-val{
  color:rgba(0,0,0,0.70) !important;
}
body.light-mode .bex-vstep-num{
  color:rgba(0,0,0,0.85) !important;
}
body.light-mode .bex-vstep-up,
body.light-mode .bex-vstep-down{
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(0,0,0,0.10) !important;
}
body.light-mode .bex-vstep-up svg,
body.light-mode .bex-vstep-down svg{
  stroke:rgba(0,0,0,0.50) !important;
}
body.light-mode .bex-card-num-badge{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .bex-pill-ss-tag{
  color:#7B3FA0 !important;
}
body.light-mode .streak-indicator{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .cal-legend-chip{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .bnr-equip-badge{
  color:rgba(0,0,0,0.50) !important;
  background:rgba(0,0,0,0.05) !important;
  border-color:rgba(0,0,0,0.10) !important;
}
body.light-mode .banner-ex-card,
body.light-mode .bex-card-wrapper{
  background:rgba(255,255,255,0.90) !important;
  border-color:rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-ex-timer-compact{
  background:rgba(0,0,0,0.03) !important;
  border-color:rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-set-counter-row{
  background:rgba(0,0,0,0.03) !important;
  border-color:rgba(0,0,0,0.06) !important;
}
body.light-mode .bex-timer-btn{
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(0,0,0,0.10) !important;
}
body.light-mode .bex-timer-btn svg{
  fill:rgba(0,0,0,0.55) !important;
}
body.light-mode .bex-set-nav-arrow{
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(0,0,0,0.10) !important;
}
body.light-mode .bex-set-nav-arrow svg{
  stroke:rgba(0,0,0,0.50) !important;
}

/* -- Estimated Time Badge in Expanded Card ------------------- */
.bex-est-time{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:0.5px !important;
  color:rgba(232,200,102,0.55) !important;
  padding:2px 8px !important;
  border-radius:6px !important;
  background:rgba(201,168,76,0.08) !important;
  border:1px solid rgba(201,168,76,0.12) !important;
  margin-left:8px !important;
}
.bex-est-time svg{
  width:11px !important;
  height:11px !important;
  stroke:rgba(232,200,102,0.55) !important;
  fill:none !important;
  stroke-width:2 !important;
}
body.light-mode .bex-est-time{
  color:rgba(139,122,94,0.60) !important;
  background:rgba(139,122,94,0.06) !important;
  border-color:rgba(139,122,94,0.10) !important;
}
body.light-mode .bex-est-time svg{
  stroke:rgba(139,122,94,0.55) !important;
}

/* -- Timer Check Modal (45-min + exercise exceeded) ---------- */
.fizzeek-timer-modal-overlay{
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  background:rgba(0,0,0,0.70) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  opacity:0;
  transition:opacity 0.25s ease !important;
}
.fizzeek-timer-modal-overlay.show{
  opacity:1;
}
.fizzeek-timer-modal{
  background:#1a1714 !important;
  border:1px solid rgba(201,168,76,0.20) !important;
  border-radius:20px !important;
  padding:28px 24px !important;
  max-width:320px !important;
  width:85% !important;
  text-align:center !important;
  box-shadow:0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(201,168,76,0.06) !important;
}
body.light-mode .fizzeek-timer-modal{
  background:#F4F2ED !important;
  border-color:rgba(139,122,94,0.15) !important;
  box-shadow:0 20px 60px rgba(0,0,0,0.12) !important;
}
.fizzeek-timer-modal-icon{
  font-size:36px !important;
  margin-bottom:12px !important;
}
.fizzeek-timer-modal-title{
  font-size:16px !important;
  font-weight:800 !important;
  color:#fff !important;
  margin-bottom:6px !important;
}
body.light-mode .fizzeek-timer-modal-title{
  color:#1a1714 !important;
}
.fizzeek-timer-modal-msg{
  font-size:13px !important;
  color:rgba(255,255,255,0.55) !important;
  line-height:1.5 !important;
  margin-bottom:20px !important;
}
body.light-mode .fizzeek-timer-modal-msg{
  color:rgba(0,0,0,0.50) !important;
}
.fizzeek-timer-modal-btns{
  display:flex !important;
  gap:10px !important;
  justify-content:center !important;
}
.fizzeek-timer-modal-btns button{
  flex:1 !important;
  padding:10px 0 !important;
  border-radius:12px !important;
  font-size:13px !important;
  font-weight:700 !important;
  border:none !important;
  cursor:pointer !important;
  transition:all 0.2s ease !important;
}
.fizzeek-timer-modal-btns .ftm-continue{
  background:rgba(201,168,76,0.18) !important;
  color:#E8C866 !important;
  border:1px solid rgba(201,168,76,0.25) !important;
}
.fizzeek-timer-modal-btns .ftm-continue:active{
  background:rgba(201,168,76,0.30) !important;
}
body.light-mode .fizzeek-timer-modal-btns .ftm-continue{
  background:rgba(139,122,94,0.12) !important;
  color:#8B7A5E !important;
  border-color:rgba(139,122,94,0.20) !important;
}
.fizzeek-timer-modal-btns .ftm-stop{
  background:rgba(239,68,68,0.15) !important;
  color:#EF4444 !important;
  border:1px solid rgba(239,68,68,0.20) !important;
}
.fizzeek-timer-modal-btns .ftm-stop:active{
  background:rgba(239,68,68,0.28) !important;
}
body.light-mode .fizzeek-timer-modal-btns .ftm-stop{
  background:rgba(239,68,68,0.08) !important;
  border-color:rgba(239,68,68,0.15) !important;
}

/* ===============================================================
   16. FLOATING BAR - Week-colored progress ring
   =============================================================== */
.menu-bar-ring .ring-fill{
  stroke:var(--accent-orange, #E8924A) !important;
  filter:drop-shadow(0 0 4px rgba(232,146,74,0.40)) !important;
}
.menu-bar-progress.cable .menu-bar-ring .ring-fill{
  stroke:var(--blue, #7EB5E2) !important;
  filter:drop-shadow(0 0 4px rgba(126,181,226,0.40)) !important;
}
.menu-bar-pct{
  color:rgba(255,255,255,0.90) !important;
}
body.light-mode .menu-bar-pct{
  color:rgba(0,0,0,0.75) !important;
}

/* ===============================================================
   17. TIMER RESET BUTTON
   =============================================================== */
/* -- Exercise Time label -------------------------------------- */
.bex-timer-label-row{
  text-align:center !important;
  padding:4px 0 2px !important;
}
.bex-timer-label-text{
  font-size:9px !important;
  font-weight:700 !important;
  letter-spacing:1.5px !important;
  color:rgba(255,255,255,0.30) !important;
  text-transform:uppercase !important;
}
body.light-mode .bex-timer-label-text{
  color:rgba(0,0,0,0.30) !important;
}

.bex-timer-reset,
.bex-ex-timer-compact .bex-timer-reset{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:28px !important;
  height:28px !important;
  border-radius:8px !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  background:rgba(255,255,255,0.04) !important;
  color:rgba(255,255,255,0.45) !important;
  cursor:pointer !important;
  transition:all 0.15s ease !important;
  padding:0 !important;
  margin-left:4px !important;
}
.bex-timer-reset:active{
  background:rgba(239,68,68,0.15) !important;
  border-color:rgba(239,68,68,0.30) !important;
  color:#EF4444 !important;
  transform:scale(0.92) !important;
}
.bex-timer-reset svg{
  width:14px !important;
  height:14px !important;
}
body.light-mode .bex-timer-reset{
  border-color:rgba(0,0,0,0.08) !important;
  background:rgba(0,0,0,0.03) !important;
  color:rgba(0,0,0,0.40) !important;
}
/* Banner timer reset */
.bnr-timer-reset{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:4px 10px !important;
  border-radius:8px !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  background:rgba(255,255,255,0.04) !important;
  color:rgba(255,255,255,0.50) !important;
  font-size:10px !important;
  font-weight:600 !important;
  letter-spacing:0.5px !important;
  cursor:pointer !important;
  transition:all 0.15s ease !important;
  gap:4px !important;
}
.bnr-timer-reset:active{
  background:rgba(239,68,68,0.12) !important;
  border-color:rgba(239,68,68,0.25) !important;
  color:#EF4444 !important;
}
.bnr-timer-reset svg{
  width:12px !important;
  height:12px !important;
}
body.light-mode .bnr-timer-reset{
  border-color:rgba(0,0,0,0.08) !important;
  background:rgba(0,0,0,0.03) !important;
  color:rgba(0,0,0,0.45) !important;
}

/* ===============================================================
   18. REST DAYS PANEL
   =============================================================== */
.rest-days-panel{
  display:none;
  position:fixed !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:calc(100% - 40px) !important;
  max-width:340px !important;
  background:rgba(18,16,12,0.97) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:20px !important;
  box-shadow:0 24px 64px rgba(0,0,0,0.60) !important;
  backdrop-filter:blur(24px) !important;
  -webkit-backdrop-filter:blur(24px) !important;
  padding:24px !important;
  z-index:10001 !important;
  text-align:center !important;
}
.rest-days-panel.open{
  display:block !important;
  animation:ddSlideIn 0.25s cubic-bezier(.2,1,.4,1) !important;
}
.rest-days-overlay{
  display:none;
  position:fixed !important;
  inset:0 !important;
  background:rgba(0,0,0,0.55) !important;
  z-index:10000 !important;
}
.rest-days-overlay.open{
  display:block !important;
}
.rest-panel-title{
  font-size:16px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.90) !important;
  margin-bottom:6px !important;
}
.rest-panel-sub{
  font-size:12px !important;
  color:rgba(255,255,255,0.45) !important;
  margin-bottom:20px !important;
  line-height:1.5 !important;
}
.rest-panel-days{
  display:flex !important;
  justify-content:center !important;
  gap:8px !important;
  margin-bottom:20px !important;
}
.rest-panel-day{
  width:52px !important;
  padding:10px 0 !important;
  border-radius:12px !important;
  border:1.5px solid rgba(255,255,255,0.10) !important;
  background:rgba(255,255,255,0.04) !important;
  cursor:pointer !important;
  transition:all 0.15s ease !important;
  text-align:center !important;
}
.rest-panel-day .rpd-label{
  display:block !important;
  font-size:10px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.40) !important;
  letter-spacing:0.5px !important;
  margin-bottom:4px !important;
}
.rest-panel-day .rpd-icon{
  font-size:18px !important;
}
.rest-panel-day.is-rest{
  background:rgba(255,255,255,0.08) !important;
  border-color:rgba(255,255,255,0.25) !important;
}
.rest-panel-day.is-rest .rpd-label{
  color:rgba(255,255,255,0.70) !important;
}
.rest-panel-day.is-friday{
  opacity:0.50 !important;
  pointer-events:none !important;
}
.rest-panel-day:active{
  transform:scale(0.94) !important;
}
.rest-panel-close{
  display:inline-flex !important;
  padding:10px 28px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,0.08) !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  color:rgba(255,255,255,0.80) !important;
  font-size:13px !important;
  font-weight:600 !important;
  cursor:pointer !important;
}
.rest-panel-close:active{
  background:rgba(255,255,255,0.14) !important;
}
body.light-mode .rest-days-panel{
  background:rgba(250,248,244,0.97) !important;
  border-color:rgba(0,0,0,0.06) !important;
  box-shadow:0 24px 64px rgba(0,0,0,0.15) !important;
}
body.light-mode .rest-panel-title{ color:rgba(0,0,0,0.85) !important; }
body.light-mode .rest-panel-sub{ color:rgba(0,0,0,0.45) !important; }
body.light-mode .rest-panel-day{
  border-color:rgba(0,0,0,0.08) !important;
  background:rgba(0,0,0,0.02) !important;
}
body.light-mode .rest-panel-day .rpd-label{ color:rgba(0,0,0,0.40) !important; }
body.light-mode .rest-panel-day.is-rest{
  background:rgba(0,0,0,0.05) !important;
  border-color:rgba(0,0,0,0.18) !important;
}
body.light-mode .rest-panel-day.is-rest .rpd-label{ color:rgba(0,0,0,0.65) !important; }
body.light-mode .rest-panel-close{
  background:rgba(0,0,0,0.05) !important;
  border-color:rgba(0,0,0,0.10) !important;
  color:rgba(0,0,0,0.70) !important;
}

/* ===============================================================
   19. MOTIVATIONAL POPUPS & PR CELEBRATION
   =============================================================== */
.fizzeek-toast{
  position:fixed !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) scale(0.8) !important;
  padding:20px 32px !important;
  border-radius:20px !important;
  background:rgba(18,16,12,0.95) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  box-shadow:0 20px 60px rgba(0,0,0,0.50) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  text-align:center !important;
  z-index:10002 !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:all 0.35s cubic-bezier(.2,1,.4,1) !important;
}
.fizzeek-toast.show{
  opacity:1 !important;
  transform:translate(-50%,-50%) scale(1) !important;
}
.fizzeek-toast .ft-emoji{
  font-size:36px !important;
  margin-bottom:8px !important;
  display:block !important;
}
.fizzeek-toast .ft-title{
  font-size:18px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,0.95) !important;
  margin-bottom:4px !important;
  letter-spacing:-0.3px !important;
}
.fizzeek-toast .ft-sub{
  font-size:13px !important;
  font-weight:500 !important;
  color:rgba(255,255,255,0.50) !important;
}
/* PR celebration - gold accents */
.fizzeek-toast.pr-toast{
  border-color:rgba(232,200,102,0.30) !important;
  box-shadow:0 0 40px rgba(232,200,102,0.15), 0 20px 60px rgba(0,0,0,0.50) !important;
}
.fizzeek-toast.pr-toast .ft-title{
  color:#F0E4C4 !important;
}
/* Confetti burst effect */
@keyframes confettiBurst{
  0%{transform:translate(-50%,-50%) scale(0);opacity:1;}
  50%{opacity:0.8;}
  100%{transform:translate(-50%,-50%) scale(3);opacity:0;}
}
.confetti-ring{
  position:fixed !important;
  top:50% !important;
  left:50% !important;
  width:60px !important;
  height:60px !important;
  border-radius:50% !important;
  border:3px solid #E8C866 !important;
  pointer-events:none !important;
  z-index:10003 !important;
  animation:confettiBurst 0.6s cubic-bezier(.2,1,.4,1) forwards !important;
}
body.light-mode .fizzeek-toast{
  background:rgba(250,248,244,0.97) !important;
  border-color:rgba(0,0,0,0.06) !important;
  box-shadow:0 20px 60px rgba(0,0,0,0.15) !important;
}
body.light-mode .fizzeek-toast .ft-title{ color:rgba(0,0,0,0.85) !important; }
body.light-mode .fizzeek-toast .ft-sub{ color:rgba(0,0,0,0.45) !important; }
body.light-mode .fizzeek-toast.pr-toast{
  border-color:rgba(139,122,94,0.25) !important;
}
body.light-mode .fizzeek-toast.pr-toast .ft-title{ color:#6B5D42 !important; }

/* ===============================================================
   20. NUMBER BADGE WHITE (non-gold) ON COLLAPSED CARDS
   =============================================================== */
.bex-card-num-badge{
  color:rgba(255,255,255,0.55) !important;
}
body.light-mode .bex-card-num-badge{
  color:rgba(0,0,0,0.50) !important;
}
body.cable-week .bex-card-num-badge{
  color:rgba(255,255,255,0.55) !important;
}

/* ===============================================================
   22. TEXT BRIGHTNESS BOOST + MODERN TIMER BUTTONS
   =============================================================== */

/* -- Expanded card header - exercise names FULL WHITE ------- */
.bex-card-wrapper.bex-inline-open .bex-pill-name,
.bex-card-wrapper.bex-inline-open .bex-pill-ss-name{
  color:#fff !important;
}
/* Meta line (3 supersets × 7 min) */
.bex-card-wrapper.bex-inline-open .bex-pill-meta,
.bex-card-wrapper.bex-inline-open .bex-meta-line{
  color:rgba(255,255,255,0.65) !important;
}
/* Light mode header */
body.light-mode .bex-card-wrapper.bex-inline-open .bex-pill-name,
body.light-mode .bex-card-wrapper.bex-inline-open .bex-pill-ss-name{
  color:rgba(0,0,0,0.88) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-pill-meta,
body.light-mode .bex-card-wrapper.bex-inline-open .bex-meta-line{
  color:rgba(0,0,0,0.50) !important;
}

/* -- Topbar text - brighter -------------------------------- */
.bex-topbar-workout{
  color:rgba(255,255,255,0.75) !important;
}
.bex-topbar-date{
  color:rgba(255,255,255,0.65) !important;
}
.bex-topbar-sep{
  color:rgba(255,255,255,0.40) !important;
}
.bex-topbar-day{
  color:rgba(255,255,255,0.85) !important;
}
.bex-topbar-est{
  color:rgba(255,255,255,0.55) !important;
}
body.light-mode .bex-topbar-workout{
  color:rgba(0,0,0,0.70) !important;
}
body.light-mode .bex-topbar-date{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .bex-topbar-sep{
  color:rgba(0,0,0,0.30) !important;
}
body.light-mode .bex-topbar-day{
  color:rgba(0,0,0,0.80) !important;
}

/* -- "Best today" PR line - brighter ----------------------- */
.bex-card-wrapper.bex-inline-open .bex-body-pr{
  color:rgba(255,255,255,0.55) !important;
}

/* -- EXERCISE TIME label - brighter ------------------------ */
.bex-timer-label-text{
  color:rgba(255,255,255,0.50) !important;
  font-size:9px !important;
  font-weight:800 !important;
  letter-spacing:2px !important;
}
body.light-mode .bex-timer-label-text{
  color:rgba(0,0,0,0.45) !important;
}

/* -- SET/SUPERSET label - brighter ------------------------- */
.bex-set-label{
  color:rgba(255,255,255,0.70) !important;
}
body.light-mode .bex-set-label{
  color:rgba(0,0,0,0.60) !important;
}

/* -- BEAT chip - brighter label and date ------------------- */
.bex-pr-target-label{
  color:rgba(232,200,102,0.85) !important;
  font-weight:800 !important;
}
.bex-pr-target-val,
.bex-pr-val{
  color:rgba(255,255,255,0.90) !important;
}
.bex-pr-date{
  color:rgba(217,184,120,0.75) !important;
}
body.light-mode .bex-pr-target-label{
  color:rgba(139,122,94,0.85) !important;
}
body.light-mode .bex-pr-target-val,
body.light-mode .bex-pr-val{
  color:rgba(0,0,0,0.80) !important;
}
body.light-mode .bex-pr-date{
  color:rgba(139,122,94,0.65) !important;
}

/* -- Goal label (WEIGHT, 12 REPS) - full brightness -------- */
.bex-input-label{
  color:rgba(255,255,255,0.90) !important;
  font-weight:800 !important;
  letter-spacing:0.5px !important;
}
body.cable-week .bex-input-label{
  color:rgba(126,181,226,0.90) !important;
}
body.light-mode .bex-input-label{
  color:rgba(0,0,0,0.75) !important;
}

/* -- Progress label (3/3) - brighter ----------------------- */
.bex-body-prog-label{
  color:rgba(255,255,255,0.75) !important;
}
body.light-mode .bex-body-prog-label{
  color:rgba(0,0,0,0.60) !important;
}

/* -- SC input labels (×, LBS, GOAL text) - brighter -------- */
.sc-input-x{
  color:rgba(255,255,255,0.70) !important;
}
.sc-input-goal{
  color:rgba(255,255,255,0.70) !important;
}
.superset-input-unit{
  color:rgba(255,255,255,0.70) !important;
}
body.light-mode .sc-input-x{
  color:rgba(0,0,0,0.45) !important;
}
body.light-mode .sc-input-goal{
  color:rgba(0,0,0,0.45) !important;
}
body.light-mode .superset-input-unit{
  color:rgba(0,0,0,0.45) !important;
}

/* -- SET counter type (SUPERSET / SET) - bright purple kept -- */
.bex-set-counter-type{
  color:rgba(255,255,255,0.75) !important;
}
.bex-set-counter-type.is-superset{
  color:#B47AED !important;
}
body.light-mode .bex-set-counter-type{
  color:rgba(0,0,0,0.65) !important;
}

/* -- Superset exercise names in stepper - brighter --------- */
.bex-set-ex-name{
  color:rgba(255,255,255,0.90) !important;
}
body.light-mode .bex-set-ex-name{
  color:rgba(0,0,0,0.85) !important;
}

/* === MODERN TIMER BUTTONS =================================== */
/* All 3 buttons: play, stop, reset — 40px glass circles */
.bex-timer-play,
.bex-timer-stop,
.bex-timer-reset,
.bex-ex-timer-compact .bex-timer-reset{
  width:40px !important;
  height:40px !important;
  border-radius:50% !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  transition:all 0.2s cubic-bezier(.2,1,.4,1) !important;
  padding:0 !important;
  -webkit-tap-highlight-color:transparent !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}

/* Play button - green glass */
.bex-timer-play{
  background:rgba(52,211,153,0.15) !important;
  border:1.5px solid rgba(52,211,153,0.40) !important;
  color:#34D399 !important;
  box-shadow:0 2px 8px rgba(52,211,153,0.10),
             inset 0 1px 0 rgba(52,211,153,0.10) !important;
}
.bex-timer-play svg{
  width:17px !important;
  height:17px !important;
  fill:#34D399 !important;
  filter:drop-shadow(0 0 3px rgba(52,211,153,0.30)) !important;
}
.bex-timer-play:active{
  background:rgba(52,211,153,0.30) !important;
  transform:scale(0.88) !important;
  box-shadow:0 0 16px rgba(52,211,153,0.35) !important;
}

/* Stop button - red glass */
.bex-timer-stop{
  background:rgba(239,68,68,0.12) !important;
  border:1.5px solid rgba(239,68,68,0.30) !important;
  color:#EF4444 !important;
  margin-left:4px !important;
  box-shadow:0 2px 8px rgba(239,68,68,0.08),
             inset 0 1px 0 rgba(239,68,68,0.08) !important;
}
.bex-timer-stop svg{
  width:15px !important;
  height:15px !important;
  fill:#EF4444 !important;
  filter:drop-shadow(0 0 3px rgba(239,68,68,0.25)) !important;
}
.bex-timer-stop:active{
  background:rgba(239,68,68,0.30) !important;
  transform:scale(0.88) !important;
  box-shadow:0 0 16px rgba(239,68,68,0.30) !important;
}

/* Reset button - neutral glass */
.bex-timer-reset,
.bex-ex-timer-compact .bex-timer-reset{
  background:rgba(255,255,255,0.06) !important;
  border:1.5px solid rgba(255,255,255,0.18) !important;
  color:rgba(255,255,255,0.65) !important;
  margin-left:4px !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.10),
             inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.bex-timer-reset svg{
  width:16px !important;
  height:16px !important;
}
.bex-timer-reset:active{
  background:rgba(239,68,68,0.20) !important;
  border-color:rgba(239,68,68,0.40) !important;
  color:#EF4444 !important;
  transform:scale(0.88) !important;
  box-shadow:0 0 14px rgba(239,68,68,0.25) !important;
}

/* Timer value - full white, large */
.bex-inline-open .bex-ex-timer-val{
  color:#fff !important;
  font-size:22px !important;
  font-weight:800 !important;
  text-shadow:0 1px 6px rgba(0,0,0,0.20) !important;
}
.bex-ex-timer.is-live.is-running .bex-ex-timer-val{
  color:#34D399 !important;
  text-shadow:0 0 8px rgba(52,211,153,0.20) !important;
}

/* Timer icon (clock) - brighter */
.bex-timer-icon{
  stroke:rgba(255,255,255,0.60) !important;
}

/* -- Light mode timer buttons ------------------------------ */
body.light-mode .bex-timer-play{
  background:rgba(22,163,74,0.08) !important;
  border-color:rgba(22,163,74,0.30) !important;
  color:#16A34A !important;
}
body.light-mode .bex-timer-play svg{
  fill:#16A34A !important;
}
body.light-mode .bex-timer-stop{
  background:rgba(220,38,38,0.06) !important;
  border-color:rgba(220,38,38,0.20) !important;
}
body.light-mode .bex-timer-stop svg{
  fill:#DC2626 !important;
}
body.light-mode .bex-timer-reset,
body.light-mode .bex-ex-timer-compact .bex-timer-reset{
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(0,0,0,0.12) !important;
  color:rgba(0,0,0,0.50) !important;
}
body.light-mode .bex-inline-open .bex-ex-timer-val{
  color:rgba(0,0,0,0.85) !important;
}
body.light-mode .bex-timer-icon{
  stroke:rgba(0,0,0,0.45) !important;
}

/* -- Reduced Motion Support ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .skeleton {
    animation: none;
    background: var(--surface2);
  }
}

/* ===============================================================
   Section 16: Input Validation Feedback
   =============================================================== */
.input-invalid {
  border-color: rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) !important;
  animation: inputShake 0.3s ease;
}
@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.input-valid-flash {
  border-color: rgba(34, 197, 94, 0.4) !important;
  transition: border-color 0.3s ease;
}
body.light-mode .input-invalid {
  border-color: rgba(220, 38, 38, 0.5) !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1) !important;
}

/* ===============================================================
   Section 17: Touch Target Compliance (Apple HIG 44px / Material 48dp)
   =============================================================== */

/* Phase dropdown toggle - increase hit area */
.phase-dropdown {
  min-height: 44px !important;
  min-width: 44px !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer;
}

/* Exercise expand/collapse button */
.bex-expand-toggle {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* VStep stepper arrow buttons */
.bex-vstep-up,
.bex-vstep-down {
  min-height: 44px !important;
}

/* Month/week navigation arrows */
.month-arrow,
.nav-btn,
.sheet-month-nav,
.day-selector-arrow {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Set counter navigation arrows */
.bex-set-nav-prev,
.bex-set-nav-next {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Modal/overlay close buttons */
.tempo-modal-close,
.day-selector-close,
.set-type-info-close,
.days-journey-close,
.pr-history-close,
.ex-history-close,
.recap-close,
.dur-popup-close-x,
.rest-mgmt-close,
.settings-panel-close,
.pr-popup-close {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Dock timer control buttons */
.dock-timer-btn,
.dt-pause,
.dt-stop,
.dt-reset {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Workout timer inline controls */
.wt-btn {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Back button */
.back-btn,
.back {
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Keypad keys */
.bex-key {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Rest days pill */
.rest-days-pill {
  min-height: 44px !important;
}

/* Banner end/reset buttons */
.bnr-end-workout-btn,
.bnr-timer-reset {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Duration popup action buttons */
.dur-action-btn {
  min-height: 44px !important;
}

/* Today button in calendar */
.today-btn {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Week sheet handle */
.bnr-week-menu-btn {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Header rank icon */
.header-rank-icon {
  min-width: 44px !important;
  min-height: 44px !important;
  object-fit: contain;
}

/* Insight tabs */
.prog-tab {
  min-height: 44px !important;
}

/* Settings theme cards */
.settings-theme-card {
  min-height: 44px !important;
}

/* PR sort toggle buttons */
.pr-toggle-btn {
  min-height: 44px !important;
}

/* ===============================================================
   Section 18: BOLD VISUAL OVERHAUL - Gym-Strong Aesthetic
   Replaces soft/washed-out look with high-contrast bold design
   =============================================================== */

/* -- 18A. Banner — Round 168: flat transparent — no warm bg, no gold border, no inset glow -- */
.workout-banner-slide-center {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.workout-banner-slide-center::before {
  background: none !important;
  display: none !important;
}
body.light-mode .workout-banner-slide-center {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* -- 18B. Card wrappers - Warm, solid, bold borders -- */
.bex-card-wrapper {
  background: rgba(21,19,16,0.98) !important;
  border: 1.5px solid rgba(201,168,76,0.14) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
}
.bex-card-wrapper .banner-ex-card {
  background: rgba(26,23,20,0.96) !important;
}
.bex-card-wrapper.bex-inline-open {
  border-color: rgba(201,168,76,0.35) !important;
  box-shadow: 0 0 0 1px rgba(201,168,76,0.12), 0 8px 32px rgba(0,0,0,0.55) !important;
}
body.cable-week .bex-card-wrapper {
  border-color: rgba(126,181,226,0.14) !important;
}
body.cable-week .bex-card-wrapper.bex-inline-open {
  border-color: rgba(126,181,226,0.35) !important;
  box-shadow: 0 0 0 1px rgba(126,181,226,0.12), 0 8px 32px rgba(0,0,0,0.55) !important;
}
body.light-mode .bex-card-wrapper {
  background: #fff !important;
  border-color: rgba(0,0,0,0.10) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
body.light-mode .bex-card-wrapper .banner-ex-card {
  background: #fff !important;
}

/* -- 18C. Text contrast boost - labels, values, meta -- */
.bnr-subtitle-line,
.bnr-subtitle-line span,
.bnr-sub-dot {
  color: rgba(255,255,255,0.6) !important;
}
.workout-banner-day,
.bnr-day {
  color: rgba(255,255,255,0.55) !important;
}
.bnr-eyebrow {
  color: rgba(201,168,76,0.65) !important;
}
.bex-pill-name,
.bex-ex-name {
  color: rgba(255,255,255,0.95) !important;
  font-weight: 800 !important;
}
.bex-pill-meta,
.bex-meta-line {
  color: rgba(255,255,255,0.55) !important;
}
.bex-input-label,
.sc-input-x,
.sc-input-goal,
.superset-input-unit {
  color: rgba(201,168,76,0.65) !important;
}
.bex-set-label,
.bex-set-counter-type {
  color: rgba(255,255,255,0.65) !important;
}
body.light-mode .bex-pill-name,
body.light-mode .bex-ex-name {
  color: rgba(0,0,0,0.9) !important;
}
body.light-mode .bex-pill-meta,
body.light-mode .bex-meta-line {
  color: rgba(0,0,0,0.5) !important;
}
body.light-mode .bnr-subtitle-line,
body.light-mode .bnr-subtitle-line span {
  color: rgba(0,0,0,0.55) !important;
}
body.light-mode .bnr-eyebrow {
  color: rgba(139,122,94,0.7) !important;
}

/* -- 18D. Button fills - stronger, more tactile -- */
.bex-expand-btn {
  background: rgba(201,168,76,0.12) !important;
  border: 1.5px solid rgba(201,168,76,0.20) !important;
}
.bex-expand-btn:active {
  background: rgba(201,168,76,0.25) !important;
}
.bex-set-nav-arrow {
  background: rgba(201,168,76,0.08) !important;
  border: 1.5px solid rgba(201,168,76,0.15) !important;
}
.bex-set-nav-arrow:active {
  background: rgba(201,168,76,0.20) !important;
  box-shadow: 0 0 12px rgba(201,168,76,0.2) !important;
}
body.light-mode .bex-expand-btn {
  background: rgba(139,122,94,0.08) !important;
  border-color: rgba(139,122,94,0.15) !important;
}
body.light-mode .bex-set-nav-arrow {
  background: rgba(139,122,94,0.06) !important;
  border-color: rgba(139,122,94,0.12) !important;
}

/* -- 18E. Progress ring - thicker, glowing -- */
.bnr-ring-hero svg circle.bnr-ring-hero-fill,
#bannerProgressFill {
  stroke-width: 7 !important;
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.4)) !important;
}
.bnr-ring-hero svg circle.bnr-ring-hero-track {
  stroke-width: 7 !important;
  stroke: rgba(255,255,255,0.08) !important;
}
body.light-mode .bnr-ring-hero svg circle.bnr-ring-hero-track {
  stroke: rgba(0,0,0,0.06) !important;
}

/* -- 18F. Section dividers - more visible -- */
.day-panel-divider,
.bex-section-divider {
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.25), transparent) !important;
}
body.light-mode .day-panel-divider,
body.light-mode .bex-section-divider {
  background: linear-gradient(90deg, transparent, rgba(139,122,94,0.2), transparent) !important;
}

/* -- 18G. Insight cards - bolder surfaces -- */
.ins-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.light-mode .ins-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* -- 18H. Calendar day circles - bolder -- */
.day-cell {
  border: 1.5px solid rgba(201,168,76,0.12) !important;
}
.day-cell.today {
  border-color: rgba(201,168,76,0.5) !important;
  box-shadow: 0 0 12px rgba(201,168,76,0.2) !important;
}

/* ===============================================================
   Section 19: Large Muscle Icon on Collapsed Cards
   =============================================================== */
.bex-coll-muscle-icon {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 50% !important;
  height: 100% !important;
  max-width: 50% !important;
  object-fit: contain !important;
  object-position: right center !important;
  opacity: 0.30 !important;
  pointer-events: none !important;
  transform: none !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.5) 100%) !important;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.5) 100%) !important;
}
body.light-mode .bex-coll-muscle-icon {
  opacity: 0.20 !important;
  filter: invert(1) !important;
}
/* Hide large icon when card is expanded */
.bex-inline-open .bex-coll-muscle-icon {
  display: none !important;
}

/* ===============================================================
   Section 20: Timer Idle State - Hide end/reset when not running
   =============================================================== */
body.timer-idle .bnr-end-workout-btn,
body.timer-idle .bnr-timer-reset,
body.timer-idle .bnr-summary-btn {
  display: none !important;
}
body:not(.timer-idle) .bnr-end-workout-btn,
body:not(.timer-idle) .bnr-timer-reset {
  animation: timerBtnFadeIn 0.3s ease both;
}
@keyframes timerBtnFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* -- Timer label -- */
.bnr-timer-label {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
  margin-bottom: 2px;
}
body.timer-idle .bnr-timer-label {
  display: none;
}
body.light-mode .bnr-timer-label {
  color: rgba(0,0,0,0.35);
}

/* ===============================================================
   Section 21: Duration Popup Scroll Fix
   =============================================================== */
.duration-popup-overlay {
  z-index: 10000 !important;
}
.duration-popup {
  z-index: 10001 !important;
  padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}
.dur-popup-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(to bottom, transparent, rgba(14,14,18,0.95) 20%) !important;
  padding: 16px 0 8px !important;
  margin-top: auto !important;
}
body.light-mode .dur-popup-actions {
  background: linear-gradient(to bottom, transparent, rgba(244,242,237,0.95) 20%) !important;
}

/* ===================================================================
   Section 22: Banner Completion Checkmark
   =================================================================== */
.bnr-complete-check {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  animation: checkPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes checkPop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ===================================================================
   Section 23: Custom SVG Icons in Toasts and Panels
   =================================================================== */
.ft-emoji,
.fizzeek-toast .ft-emoji {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  color: var(--gold, #C9A84C);
}
.ft-emoji svg {
  width: 100%;
  height: 100%;
}
.fizzeek-timer-modal-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--gold, #C9A84C);
}
.fizzeek-timer-modal-icon svg {
  width: 36px;
  height: 36px;
}
.rpd-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 24px !important;
  color: var(--gold, #C9A84C);
}
.rpd-icon svg {
  width: 100%;
  height: 100%;
}
.rpd-icon.is-rest svg,
.rest-panel-day.is-rest .rpd-icon svg {
  color: rgba(126,181,226,0.7);
}
.rest-panel-day.is-friday .rpd-icon svg {
  color: rgba(255,255,255,0.25);
}
body.light-mode .rpd-icon svg {
  color: rgba(139,122,94,0.7);
}
body.light-mode .rest-panel-day.is-rest .rpd-icon svg {
  color: rgba(100,140,180,0.7);
}
body.light-mode .rest-panel-day.is-friday .rpd-icon svg {
  color: rgba(0,0,0,0.20);
}
body.light-mode .ft-emoji svg,
body.light-mode .fizzeek-timer-modal-icon svg {
  color: rgba(139,122,94,0.85);
}

/* ===================================================================
   Section 26: Streak Calendar Popup
   =================================================================== */
.streak-cal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.55) !important;
  z-index: 10002 !important;
  display: none;
}
.streak-cal-overlay.open { display: block !important; }
.streak-cal-panel {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  max-height: 85vh !important;
  background: rgba(16,16,22,0.98) !important;
  border: 1.5px solid rgba(201,168,76,0.18) !important;
  border-radius: 28px 28px 0 0 !important;
  backdrop-filter: blur(24px) !important;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) !important;
  z-index: 10003 !important;
  overflow-y: auto !important;
  animation: streakSlideUp 0.3s cubic-bezier(.2,1,.4,1) !important;
  display: none;
}
.streak-cal-panel.open { display: block !important; }
@keyframes streakSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.streak-cal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}
.streak-cal-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.85) !important;
}
.streak-cal-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.streak-stats-row {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}
.streak-stat {
  flex: 1 !important;
  text-align: center !important;
  padding: 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
}
.streak-stat-num {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #E8C866 !important;
  display: block !important;
}
.streak-stat-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.35) !important;
  margin-top: 4px !important;
  display: block !important;
}
.streak-month-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}
.streak-month-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.7) !important;
}
.streak-month-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.streak-cal-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
}
.streak-cal-dow {
  text-align: center !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.3) !important;
  padding: 6px 0 !important;
}
.streak-cal-day {
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.35) !important;
  position: relative !important;
}
.streak-cal-day.completed {
  background: rgba(52,211,153,0.20) !important;
  color: #34D399 !important;
  border: 1.5px solid rgba(52,211,153,0.3) !important;
}
.streak-cal-day.rest-day {
  opacity: 0.35 !important;
}
.streak-cal-day.rest-day::after {
  content: '' !important;
  position: absolute !important;
  width: 60% !important;
  height: 1.5px !important;
  background: rgba(255,255,255,0.4) !important;
  transform: rotate(45deg) !important;
}
.streak-cal-day.today {
  border: 2px solid rgba(201,168,76,0.5) !important;
  box-shadow: 0 0 8px rgba(201,168,76,0.2) !important;
}
.streak-cal-day.missed {
  color: rgba(239,68,68,0.35) !important;
}
.streak-cal-day.future {
  opacity: 0.2 !important;
}
/* Light mode */
body.light-mode .streak-cal-panel {
  background: rgba(250,248,244,0.98) !important;
  border-color: rgba(0,0,0,0.06) !important;
}
body.light-mode .streak-cal-title { color: rgba(0,0,0,0.8) !important; }
body.light-mode .streak-cal-close { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.06) !important; color: rgba(0,0,0,0.4) !important; }
body.light-mode .streak-stat { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
body.light-mode .streak-stat-num { color: #8B7A5E !important; }
body.light-mode .streak-stat-label { color: rgba(0,0,0,0.35) !important; }
body.light-mode .streak-month-label { color: rgba(0,0,0,0.6) !important; }
body.light-mode .streak-month-btn { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; color: rgba(0,0,0,0.4) !important; }
body.light-mode .streak-cal-dow { color: rgba(0,0,0,0.3) !important; }
body.light-mode .streak-cal-day { color: rgba(0,0,0,0.3) !important; }
body.light-mode .streak-cal-day.completed { background: rgba(22,163,74,0.12) !important; color: #16A34A !important; border-color: rgba(22,163,74,0.2) !important; }
body.light-mode .streak-cal-day.today { border-color: rgba(139,122,94,0.4) !important; }
body.light-mode .streak-cal-day.missed { color: rgba(220,38,38,0.25) !important; }

/* ===================================================================
   Section 27: Recap Sub-Modals
   =================================================================== */
.recap-sub-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10200 !important;
  background: rgba(0,0,0,0.3) !important;
}
.recap-sub-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
  z-index: 10201 !important;
  width: calc(100% - 48px) !important;
  max-width: 340px !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  background: rgba(20,18,14,0.98) !important;
  border: 1.5px solid rgba(201,168,76,0.20) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(24px) !important;
  padding: 20px !important;
  animation: recapSubPop 0.25s cubic-bezier(.2,1,.4,1) both !important;
}
@keyframes recapSubPop {
  from { transform: translate(-50%,-50%) scale(0.9); opacity: 0; }
  to { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}
.recap-sub-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}
.recap-sub-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.8) !important;
}
.recap-sub-close {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.recap-sub-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  font-size: 13px !important;
}
.recap-sub-row:last-child { border-bottom: none !important; }
.recap-sub-name { color: rgba(255,255,255,0.6) !important; }
.recap-sub-val { color: rgba(255,255,255,0.85) !important; font-weight: 700 !important; }
.recap-sub-total {
  display: flex !important;
  justify-content: space-between !important;
  padding: 12px 0 0 !important;
  margin-top: 8px !important;
  border-top: 1.5px solid rgba(201,168,76,0.15) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.9) !important;
}
body.light-mode .recap-sub-modal {
  background: rgba(255,255,255,0.98) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .recap-sub-title { color: rgba(0,0,0,0.7) !important; }
body.light-mode .recap-sub-close { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.06) !important; color: rgba(0,0,0,0.4) !important; }
body.light-mode .recap-sub-name { color: rgba(0,0,0,0.5) !important; }
body.light-mode .recap-sub-val { color: rgba(0,0,0,0.8) !important; }
body.light-mode .recap-sub-row { border-bottom-color: rgba(0,0,0,0.04) !important; }
body.light-mode .recap-sub-total { border-top-color: rgba(139,122,94,0.15) !important; color: rgba(0,0,0,0.85) !important; }

/* ===================================================================
   Section 23: Week Menu Button Inside Banner
   =================================================================== */
.bnr-top-row { position: relative !important; }
.bnr-week-menu-btn {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(8px) !important;
}
body.light-mode .bnr-week-menu-btn {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* ===================================================================
   Section 24: Set Tabs
   =================================================================== */
.bex-set-tabs {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
}
.bex-set-tabs-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.45) !important;
}
.bex-set-tabs-row {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
}
.bex-set-tab {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1.5px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
.bex-set-tab.active {
  background: rgba(201,168,76,0.15) !important;
  border-color: rgba(201,168,76,0.35) !important;
  color: #E8C866 !important;
  transform: scale(1.08) !important;
  box-shadow: 0 0 12px rgba(201,168,76,0.15) !important;
}
.bex-set-tab.done {
  background: rgba(52,211,153,0.12) !important;
  border-color: rgba(52,211,153,0.25) !important;
  color: #34D399 !important;
}
.bex-set-tab.done.pr {
  background: rgba(201,168,76,0.12) !important;
  border-color: rgba(201,168,76,0.30) !important;
  color: #E8C866 !important;
}
.bex-set-tab:active {
  transform: scale(0.95) !important;
}
.bex-set-tab.bex-tab-flash {
  animation: tabFlashPulse 0.6s ease infinite !important;
}
@keyframes tabFlashPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(201,168,76,0.2); }
  50% { box-shadow: 0 0 18px rgba(201,168,76,0.45); border-color: rgba(201,168,76,0.6); }
}
body.cable-week .bex-set-tab.active {
  background: rgba(126,181,226,0.15) !important;
  border-color: rgba(126,181,226,0.35) !important;
  color: #7EB5E2 !important;
  box-shadow: 0 0 12px rgba(126,181,226,0.15) !important;
}
body.cable-week .bex-set-tab.bex-tab-flash {
  animation: tabFlashPulseCable 0.6s ease infinite !important;
}
@keyframes tabFlashPulseCable {
  0%, 100% { box-shadow: 0 0 8px rgba(126,181,226,0.2); }
  50% { box-shadow: 0 0 18px rgba(126,181,226,0.45); border-color: rgba(126,181,226,0.6); }
}
body.light-mode .bex-set-tab {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: rgba(0,0,0,0.5) !important;
}
body.light-mode .bex-set-tab.active {
  background: rgba(139,122,94,0.12) !important;
  border-color: rgba(139,122,94,0.25) !important;
  color: #8B7A5E !important;
}
body.light-mode .bex-set-tab.done {
  background: rgba(22,163,74,0.08) !important;
  border-color: rgba(22,163,74,0.20) !important;
  color: #16A34A !important;
}
body.light-mode .bex-set-tabs-label {
  color: rgba(0,0,0,0.4) !important;
}

/* ===================================================================
   Section 25: Rest Day Calendar Indication
   =================================================================== */
.day-col.day-rest {
  opacity: 0.45 !important;
  position: relative !important;
}
.day-col.day-rest::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 70% !important;
  height: 1.5px !important;
  background: rgba(255,255,255,0.35) !important;
  transform: translate(-50%,-50%) rotate(45deg) !important;
  pointer-events: none !important;
}
body.light-mode .day-col.day-rest::after {
  background: rgba(0,0,0,0.25) !important;
}
/* Banner greyed out on rest days */
.rest-day-active .workout-banner-slide-center {
  opacity: 0.4 !important;
  pointer-events: none !important;
  filter: grayscale(0.5) !important;
}
.rest-day-active .banner-exercise-list {
  display: none !important;
}
.rest-day-active .bnr-rest-overlay {
  display: flex !important;
}
/* Month view rest day cells */
.mv-day-cell.day-rest {
  opacity: 0.45 !important;
  position: relative !important;
}
.mv-day-cell.day-rest::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 70% !important;
  height: 1.5px !important;
  background: rgba(255,255,255,0.35) !important;
  transform: translate(-50%,-50%) rotate(45deg) !important;
  pointer-events: none !important;
}
body.light-mode .mv-day-cell.day-rest::after {
  background: rgba(0,0,0,0.25) !important;
}

/* ===================================================================
   Section 99: FLAT MINIMAL OVERRIDE
   Strips all luxury effects (glass morphism, gold tints, shadows,
   ambient glow, cable-week color bleed). Flat black + white text.
   Gold reserved for PR indicators ONLY.
   =================================================================== */

/* ── 99.TOKENS Override CSS variables from mm-all.css bundle ── */
:root {
  --bg: #000 !important;
  --card: #111 !important;
  --cardSolid: #111 !important;
  --glow-strong: transparent !important;
  --surface-elevated: #1a1a1a !important;
  --glass: rgba(255,255,255,0.04) !important;
  --glassBorder: rgba(255,255,255,0.10) !important;
  --white: #fff !important;
  --text: #fff !important;
  --textInverse: #000 !important;
  --gray: #888 !important;
  --grayLight: #aaa !important;
  --surface1: #111 !important;
  --surface2: #1a1a1a !important;
  --surface3: #222 !important;
  --accentGlow: transparent !important;
  --shadow-sm: none !important;
  --shadow-md: none !important;
  --shadow-lg: none !important;
  --shadow-xl: none !important;
  --shadow-glow: none !important;
  --blur-sm: 0px !important;
  --blur-md: 0px !important;
  --blur-lg: 0px !important;
  --blur-xl: 0px !important;
  --well: #0a0a0a !important;
  --wellBorder: rgba(255,255,255,0.12) !important;
  --elevated: #1a1a1a !important;
  --elevatedBorder: rgba(255,255,255,0.10) !important;
  --interactive: #222 !important;
  --interactiveBorder: rgba(255,255,255,0.12) !important;
  --interactiveHover: #2a2a2a !important;
  --green: #22c55e;
  --red: #ef4444;
  --yellow: #eab308;
  --panel: #111;
  --panel-border: rgba(255,255,255,0.08);
}
html.light-mode,
body.light-mode {
  --bg: #fff !important;
  --card: #fff !important;
  --cardSolid: #fff !important;
  --glass: rgba(0,0,0,0.03) !important;
  --glassBorder: rgba(0,0,0,0.08) !important;
  --white: #000 !important;
  --text: #000 !important;
  --textInverse: #fff !important;
  --gray: #666 !important;
  --grayLight: #444 !important;
  --surface1: #f5f5f5 !important;
  --surface2: #eee !important;
  --surface3: #e5e5e5 !important;
  --accentGlow: transparent !important;
  --panel: #fff !important;
  --panel-border: rgba(0,0,0,0.08) !important;
  --well: #f5f5f5 !important;
  --wellBorder: rgba(0,0,0,0.12) !important;
  --elevated: #f5f5f5 !important;
  --elevatedBorder: rgba(0,0,0,0.08) !important;
  --interactive: #eee !important;
  --interactiveBorder: rgba(0,0,0,0.10) !important;
  --interactiveHover: #e5e5e5 !important;
}

/* ── 99.0 Global resets ── */
* { text-shadow: none !important; }

#spaceCanvas, .space-stars,
.bnr-noise, .bnr-vignette,
.ambient, .glow-strong, .noise-overlay {
  display: none !important;
}

/* Kill all glass morphism on key elements */
.bex-card-wrapper,
.bex-card-wrapper.bex-inline-open,
.streak-cal-panel,
.recap-sub-modal,
.duration-popup,
.bnr-week-menu-btn,
.bex-expand-btn,
.phase-dropdown-menu,
.bex-ex-dd-panel,
.bex-ex-timer-compact,
.info-modal,
.stats-modal,
.rank-modal,
.days-journey-modal,
.stats-graph-modal,
.rest-panel,
.unified-sheet,
.timer-check-modal,
.fizzeek-toast {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── 99.1 Body & page background ── */
html {
  background: #000 !important;
}
body {
  background: #000 !important;
  color: #fff !important;
}
html.light-mode,
body.light-mode {
  background: #fff !important;
  color: #000 !important;
}

/* ── 99.2 Banner — flat surface ── */
.workout-banner-slide-center {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}
.workout-banner-slide-center::before {
  display: none !important;
}
.bnr-eyebrow {
  color: rgba(255,255,255,0.5) !important;
}
.workout-banner-title {
  color: #fff !important;
}
.bnr-subtitle-line,
.bnr-subtitle-line span,
.bnr-sub-dot {
  color: rgba(255,255,255,0.5) !important;
}
.workout-banner-day,
.bnr-day {
  color: rgba(255,255,255,0.5) !important;
}
/* Banner timer */
.bnr-timer-value {
  color: #fff !important;
}
.bnr-timer-value.running {
  color: var(--green, #22c55e) !important;
}
.bnr-timer-value.paused {
  color: var(--yellow, #eab308) !important;
}
.bnr-timer-hint,
.bnr-timer-label {
  color: rgba(255,255,255,0.4) !important;
}
/* Banner progress ring — green, not gold */
.bnr-ring-hero svg circle.bnr-ring-hero-fill,
#bannerProgressFill {
  stroke: var(--green, #22c55e) !important;
  filter: none !important;
}
.bnr-ring-hero svg circle.bnr-ring-hero-track {
  stroke: rgba(255,255,255,0.08) !important;
}
/* Banner buttons — neutral */
.bnr-end-btn,
.bnr-timer-reset,
.bnr-summary-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.bnr-end-btn:active,
.bnr-timer-reset:active,
.bnr-summary-btn:active {
  background: rgba(255,255,255,0.12) !important;
}
/* Week menu button */
.bnr-week-menu-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
/* Volume badge */
.bnr-volume-badge {
  color: rgba(255,255,255,0.5) !important;
  background: none !important;
  border: none !important;
}
/* Rest button */
.bnr-rest-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #fff !important;
}
/* Banner internals — kill gradients */
.bnr-card {
  background: transparent !important;
  background-image: none !important;
}
body.cable-week .bnr-card {
  background: transparent !important;
  background-image: none !important;
}
/* Equipment pill — neutral, not blue */
.bnr-equipment-pill {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.6) !important;
}
body.cable-week .bnr-equipment-pill {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.6) !important;
}
/* Banner light mode */
body.light-mode .workout-banner-slide-center {
  background: #fff !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: none !important;
}
body.light-mode .bnr-eyebrow,
body.light-mode .workout-banner-day,
body.light-mode .bnr-day,
body.light-mode .bnr-subtitle-line,
body.light-mode .bnr-subtitle-line span {
  color: rgba(0,0,0,0.5) !important;
}
body.light-mode .workout-banner-title {
  color: #000 !important;
}
body.light-mode .bnr-timer-value {
  color: #000 !important;
}
body.light-mode .bnr-ring-hero svg circle.bnr-ring-hero-track {
  stroke: rgba(0,0,0,0.06) !important;
}
body.light-mode .bnr-end-btn,
body.light-mode .bnr-timer-reset,
body.light-mode .bnr-summary-btn,
body.light-mode .bnr-week-menu-btn,
body.light-mode .bnr-rest-btn {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: #000 !important;
}

/* ── 99.3 Collapsed exercise cards — flat monochrome ── */
.bex-card-wrapper {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}
.bex-card-wrapper:not(.bex-inline-open):not(.ex-fully-done) {
  box-shadow: none !important;
}
.bex-card-wrapper .banner-ex-card {
  background: #111 !important;
}
.bex-card-wrapper .bex-stepper-area {
  background: #111 !important;
}
/* Exercise name — pure white */
.bex-pill-name,
.bex-ex-name {
  color: #fff !important;
  font-weight: 700 !important;
}
/* Meta line — neutral grey */
.bex-pill-meta,
.bex-meta-line {
  color: rgba(255,255,255,0.45) !important;
}
/* Number badge — neutral, not gold */
.bex-card-num-badge {
  color: rgba(255,255,255,0.5) !important;
}
/* Expand/edit button — neutral */
.bex-expand-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
.bex-expand-btn:active {
  background: rgba(255,255,255,0.12) !important;
}
/* Muscle icon — no gold shadow */
.bex-coll-muscle-icon {
  filter: none !important;
}
/* Progress bars — neutral default, green done, gold PR */
.bex-progress-dot {
  background: rgba(255,255,255,0.15) !important;
}
.bex-progress-dot.done {
  background: var(--green, #22c55e) !important;
}
.bex-progress-dot.pr,
.bex-progress-dot.done.pr {
  background: var(--gold, #C9A84C) !important;
}
/* Live timer — green */
.bex-pill-live-timer {
  color: var(--green, #22c55e) !important;
}
/* Card accent strip — neutral */
.exercise-overlap-card::after {
  background: rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}
/* Card light mode */
body.light-mode .bex-card-wrapper {
  background: #fff !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: none !important;
}
body.light-mode .bex-card-wrapper .banner-ex-card,
body.light-mode .bex-card-wrapper .bex-stepper-area {
  background: #fff !important;
}
body.light-mode .bex-pill-name,
body.light-mode .bex-ex-name {
  color: #000 !important;
}
body.light-mode .bex-pill-meta,
body.light-mode .bex-meta-line {
  color: rgba(0,0,0,0.45) !important;
}
body.light-mode .bex-card-num-badge {
  color: rgba(0,0,0,0.5) !important;
}
body.light-mode .bex-expand-btn {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-coll-muscle-icon {
  filter: invert(1) !important;
}
body.light-mode .exercise-overlap-card::after {
  background: rgba(0,0,0,0.06) !important;
}

/* ── 99.4 Expanded card overlay — flat ── */
.bex-card-wrapper.bex-inline-open {
  background: #111 !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}
.bex-card-wrapper.bex-inline-open .banner-ex-card {
  background: #111 !important;
}
.bex-card-wrapper.bex-inline-open .bex-stepper-area {
  background: #111 !important;
}
/* Topbar — flat */
.bex-expanded-topbar {
  background: #111 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.6) !important;
}
.bex-expanded-topbar span {
  color: rgba(255,255,255,0.6) !important;
}
/* Topbar dots — neutral */
.bex-topbar-dot {
  background: rgba(255,255,255,0.2) !important;
  box-shadow: none !important;
}
.bex-topbar-dot.current {
  background: #fff !important;
}
.bex-topbar-dot.bex-dot-done {
  background: var(--green, #22c55e) !important;
}
.bex-topbar-dot.bex-dot-pr {
  background: var(--gold, #C9A84C) !important;
}
/* Exercise dropdown — flat */
.bex-ex-dd-panel {
  background: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
.bex-ex-dd-item {
  color: rgba(255,255,255,0.7) !important;
}
.bex-ex-dd-item.active {
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
}
.bex-ex-dd-badge {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.5) !important;
}
.bex-ex-dd-item.active .bex-ex-dd-badge {
  color: #fff !important;
  border-color: rgba(255,255,255,0.25) !important;
}
/* Expanded card light mode */
body.light-mode .bex-card-wrapper.bex-inline-open {
  background: #fff !important;
  border-color: rgba(0,0,0,0.10) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .banner-ex-card,
body.light-mode .bex-card-wrapper.bex-inline-open .bex-stepper-area {
  background: #fff !important;
}
body.light-mode .bex-expanded-topbar {
  background: #fff !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
  color: rgba(0,0,0,0.5) !important;
}
body.light-mode .bex-topbar-dot {
  background: rgba(0,0,0,0.15) !important;
}
body.light-mode .bex-topbar-dot.current {
  background: #000 !important;
}
body.light-mode .bex-ex-dd-panel {
  background: #fff !important;
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-ex-dd-item {
  color: rgba(0,0,0,0.6) !important;
}
body.light-mode .bex-ex-dd-item.active {
  color: #000 !important;
  background: rgba(0,0,0,0.04) !important;
}

/* ── 99.5 VStep steppers — flat, no gold/blue ── */
.bex-vstep {
  background: #0a0a0a !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
.bex-vstep-up.bex-step,
.bex-vstep-down.bex-step {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.bex-vstep-up.bex-step:active,
.bex-vstep-down.bex-step:active {
  background: rgba(255,255,255,0.10) !important;
}
.bex-vstep-up.bex-step svg,
.bex-vstep-down.bex-step svg {
  stroke: rgba(255,255,255,0.5) !important;
  filter: none !important;
}
.bex-vstep-up.bex-step:active svg,
.bex-vstep-down.bex-step:active svg {
  stroke: #fff !important;
  filter: none !important;
}
.bex-vstep-num {
  background: #000 !important;
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.bex-vstep-num:active {
  color: #fff !important;
  text-shadow: none !important;
}
.bex-vstep-num.zero-val {
  color: rgba(255,255,255,0.2) !important;
}
/* VStep light mode */
body.light-mode .bex-vstep {
  background: #f5f5f5 !important;
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-vstep-up.bex-step,
body.light-mode .bex-vstep-down.bex-step {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.06) !important;
}
body.light-mode .bex-vstep-up.bex-step svg,
body.light-mode .bex-vstep-down.bex-step svg {
  stroke: rgba(0,0,0,0.4) !important;
  filter: none !important;
}
body.light-mode .bex-vstep-num {
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
}
body.light-mode .bex-vstep-num.zero-val {
  color: rgba(0,0,0,0.15) !important;
}

/* ── 99.6 Input labels — white, not gold ── */
.bex-input-label,
.sc-input-x,
.sc-input-goal,
.superset-input-unit {
  color: rgba(255,255,255,0.5) !important;
}
.bex-stepper-x {
  color: rgba(255,255,255,0.25) !important;
}
body.light-mode .bex-input-label,
body.light-mode .sc-input-x,
body.light-mode .sc-input-goal,
body.light-mode .superset-input-unit {
  color: rgba(0,0,0,0.45) !important;
}
body.light-mode .bex-stepper-x {
  color: rgba(0,0,0,0.2) !important;
}

/* ── 99.7 SC / Superset inputs — flat ── */
.sc-input {
  background: #0a0a0a !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.sc-input:focus {
  border-color: rgba(255,255,255,0.3) !important;
  box-shadow: none !important;
}
.sc-round-num {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.6) !important;
  box-shadow: none !important;
}
/* Superset label row */
.superset-label-text {
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
/* Superset exercise headers — white accent, not gold */
.sc-card {
  border-left-color: rgba(255,255,255,0.15) !important;
}
body.light-mode .sc-input {
  background: #f5f5f5 !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: #000 !important;
}
body.light-mode .sc-round-num {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: rgba(0,0,0,0.5) !important;
}

/* ── 99.8 Set block rows — flat ── */
.set-block {
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}
.set-block.completed {
  border-left: 3px solid var(--green, #22c55e) !important;
}
body.light-mode .set-block {
  border-color: rgba(0,0,0,0.06) !important;
}

/* ── 99.9 Set tabs — neutral active, green done, gold PR ── */
.bex-set-tab.active {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.30) !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: scale(1.05) !important;
}
.bex-set-tab.done {
  background: rgba(34,197,94,0.12) !important;
  border-color: rgba(34,197,94,0.25) !important;
  color: var(--green, #22c55e) !important;
}
.bex-set-tab.done.pr {
  background: rgba(201,168,76,0.12) !important;
  border-color: rgba(201,168,76,0.25) !important;
  color: var(--gold, #C9A84C) !important;
}
.bex-set-tab.bex-tab-flash {
  animation: flatTabFlash 0.6s ease infinite !important;
}
@keyframes flatTabFlash {
  0%, 100% { box-shadow: 0 0 6px rgba(255,255,255,0.1); }
  50% { box-shadow: 0 0 12px rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.4); }
}
body.light-mode .bex-set-tab.active {
  background: rgba(0,0,0,0.08) !important;
  border-color: rgba(0,0,0,0.20) !important;
  color: #000 !important;
}
body.light-mode .bex-set-tab.done {
  background: rgba(22,163,74,0.08) !important;
  border-color: rgba(22,163,74,0.18) !important;
  color: #16A34A !important;
}

/* ── 99.10 Set counter row — flat ── */
.bex-set-counter-row {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}
.bex-set-nav-arrow {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
.bex-set-nav-arrow:active {
  background: rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}
.bex-set-label,
.bex-set-counter-type {
  color: rgba(255,255,255,0.5) !important;
}
body.light-mode .bex-set-counter-row {
  background: rgba(0,0,0,0.02) !important;
  border-color: rgba(0,0,0,0.06) !important;
}
body.light-mode .bex-set-nav-arrow {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* ── 99.11 Timer buttons — semantic colors, flat ── */
.bex-timer-play {
  background: rgba(34,197,94,0.12) !important;
  border: 1px solid rgba(34,197,94,0.25) !important;
  box-shadow: none !important;
}
.bex-timer-play svg { color: var(--green, #22c55e) !important; }
.bex-timer-stop {
  background: rgba(239,68,68,0.12) !important;
  border: 1px solid rgba(239,68,68,0.25) !important;
  box-shadow: none !important;
}
.bex-timer-stop svg { color: var(--red, #ef4444) !important; }
.bex-timer-reset {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
.bex-timer-reset svg { color: rgba(255,255,255,0.5) !important; }
.bex-timer-play:active,
.bex-timer-stop:active,
.bex-timer-reset:active {
  transform: scale(0.92) !important;
  box-shadow: none !important;
}
/* Exercise timer bar */
.bex-ex-timer-compact {
  background: #0a0a0a !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}
.bex-ex-timer-value {
  color: #fff !important;
}
.bex-ex-timer-value.running {
  color: var(--green, #22c55e) !important;
}
.bex-ex-timer-value.paused {
  color: var(--yellow, #eab308) !important;
}
body.light-mode .bex-timer-play {
  background: rgba(22,163,74,0.08) !important;
  border-color: rgba(22,163,74,0.18) !important;
}
body.light-mode .bex-timer-stop {
  background: rgba(220,38,38,0.08) !important;
  border-color: rgba(220,38,38,0.18) !important;
}
body.light-mode .bex-timer-reset {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-ex-timer-compact {
  background: #f5f5f5 !important;
  border-color: rgba(0,0,0,0.06) !important;
}

/* ── 99.12 Section dividers — solid neutral ── */
.day-panel-divider,
.bex-section-divider {
  background: rgba(255,255,255,0.06) !important;
  height: 1px !important;
}
.banner-exercise-list::before {
  background: rgba(255,255,255,0.06) !important;
}
.insight-sections::before {
  background: rgba(255,255,255,0.06) !important;
}
body.light-mode .day-panel-divider,
body.light-mode .bex-section-divider,
body.light-mode .banner-exercise-list::before,
body.light-mode .insight-sections::before {
  background: rgba(0,0,0,0.06) !important;
}

/* ── 99.13 Insight cards — flat ── */
.ins-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.ins-card::before,
.ins-card::after {
  display: none !important;
  background: none !important;
}
body.light-mode .ins-card {
  background: #fff !important;
  border-color: rgba(0,0,0,0.08) !important;
}
/* Insight gauge fills — green, not gold */
.ins-gauge-fill {
  filter: none !important;
}

/* ── 99.14 Calendar day circles — flat ── */
.day-cell {
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}
.day-cell.today {
  border-color: #fff !important;
  box-shadow: none !important;
}
body.light-mode .day-cell {
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .day-cell.today {
  border-color: #000 !important;
}

/* ── 99.15 SVG Icons — white, not gold (PR exceptions handled by JS) ── */
.ft-emoji,
.fizzeek-toast .ft-emoji {
  color: #fff !important;
}
.fizzeek-timer-modal-icon {
  color: #fff !important;
}
.rpd-icon {
  color: rgba(255,255,255,0.5) !important;
}
.rpd-icon.is-rest svg,
.rest-panel-day.is-rest .rpd-icon svg {
  color: rgba(126,181,226,0.6) !important;
}
body.light-mode .ft-emoji,
body.light-mode .fizzeek-toast .ft-emoji,
body.light-mode .fizzeek-timer-modal-icon {
  color: #000 !important;
}
body.light-mode .rpd-icon {
  color: rgba(0,0,0,0.4) !important;
}

/* ── 99.16 Modals & panels — flat ── */
.streak-cal-panel {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
.streak-cal-title {
  color: #fff !important;
}
.streak-stat-num {
  color: #fff !important;
}
.streak-stat-label {
  color: rgba(255,255,255,0.4) !important;
}
.streak-day.streak-today {
  border-color: #fff !important;
  box-shadow: none !important;
}
.recap-sub-modal {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
.recap-sub-total {
  border-color: rgba(255,255,255,0.08) !important;
}
/* Duration popup */
.duration-popup {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
/* Rest days panel */
.rest-panel {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
/* Timer check modal */
.timer-check-modal {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
/* Toast */
.fizzeek-toast {
  background: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
/* Unified sheet */
.unified-sheet {
  background: #111 !important;
  border-color: rgba(255,255,255,0.10) !important;
}
/* Info modal */
.info-modal {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
/* Light mode modals */
body.light-mode .streak-cal-panel,
body.light-mode .recap-sub-modal,
body.light-mode .duration-popup,
body.light-mode .rest-panel,
body.light-mode .timer-check-modal,
body.light-mode .unified-sheet,
body.light-mode .info-modal {
  background: #fff !important;
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .fizzeek-toast {
  background: #f5f5f5 !important;
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .streak-cal-title,
body.light-mode .streak-stat-num {
  color: #000 !important;
}
body.light-mode .streak-day.streak-today {
  border-color: #000 !important;
}

/* ── 99.17 PR badges — KEEP gold (the exception) ── */
.superset-pr-inline,
.superset-pr-new,
.pr-new,
.pr-new-compact {
  color: var(--gold, #C9A84C) !important;
  box-shadow: none !important;
}

/* ── 99.18 Header — flat ── */
.header {
  background: #000 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}
.phase-dropdown-menu {
  background: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
body.light-mode .header {
  background: #fff !important;
  border-bottom-color: rgba(0,0,0,0.06) !important;
}
body.light-mode .phase-dropdown-menu {
  background: #fff !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* ── 99.19 Info strip chips — flat ── */
.bex-info-chip {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.6) !important;
  box-shadow: none !important;
}
body.light-mode .bex-info-chip {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.06) !important;
  color: rgba(0,0,0,0.5) !important;
}

/* ── 99.20 Strip ALL cable-week color bleed EXCEPT week strip ── */
body.cable-week .bex-card-wrapper {
  background: #111 !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}
body.cable-week .bex-card-wrapper.bex-inline-open {
  background: #111 !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}
body.cable-week .bex-expand-btn {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
body.cable-week .bex-set-nav-arrow {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
body.cable-week .bex-vstep {
  background: #0a0a0a !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
body.cable-week .bex-vstep-up.bex-step,
body.cable-week .bex-vstep-down.bex-step {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
body.cable-week .bex-vstep-up.bex-step:active,
body.cable-week .bex-vstep-down.bex-step:active {
  background: rgba(255,255,255,0.10) !important;
}
body.cable-week .bex-vstep-num {
  background: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.cable-week .bex-vstep-num.zero-val {
  color: rgba(255,255,255,0.2) !important;
}
body.cable-week .bex-vstep-up.bex-step svg,
body.cable-week .bex-vstep-down.bex-step svg {
  stroke: rgba(255,255,255,0.5) !important;
  filter: none !important;
}
body.cable-week .sc-input {
  background: #0a0a0a !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
body.cable-week .sc-round-num {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.6) !important;
}
body.cable-week .bex-card-num-badge {
  color: rgba(255,255,255,0.5) !important;
}
body.cable-week .bex-input-label {
  color: rgba(255,255,255,0.5) !important;
}
body.cable-week .bex-set-tab.active {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.30) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.cable-week .bex-set-tab.bex-tab-flash {
  animation: flatTabFlash 0.6s ease infinite !important;
}
body.cable-week .bex-coll-muscle-icon {
  filter: none !important;
}
body.cable-week .set-block {
  border-color: rgba(255,255,255,0.06) !important;
}
body.cable-week .bex-progress-dot {
  background: rgba(255,255,255,0.15) !important;
}
body.cable-week .bex-progress-dot.done {
  background: var(--green, #22c55e) !important;
}
body.cable-week .bex-crs-dot {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
body.cable-week .workout-banner-slide-center {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.free-week .workout-banner-slide-center {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.cable-week .workout-banner-slide-center::before {
  display: none !important;
}
/* Cable/free weight card accent strip — neutral for ALL week types */
.banner-ex-card.bex-wt-cable {
  border-left: 3px solid rgba(255,255,255,0.15) !important;
}
.banner-ex-card.bex-wt-free {
  border-left: 3px solid rgba(255,255,255,0.15) !important;
}
body.light-mode .banner-ex-card.bex-wt-cable,
body.light-mode .banner-ex-card.bex-wt-free {
  border-left-color: rgba(0,0,0,0.10) !important;
}
/* Kill all exercise-overlap-card PR pseudo-elements gold/shimmer */
.exercise-overlap-card::before,
.exercise-overlap-card::after {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Header stats area */
.header-stats {
  background: transparent !important;
  border-color: rgba(255,255,255,0.06) !important;
}
body.light-mode .header-stats {
  border-color: rgba(0,0,0,0.06) !important;
}
/* Info modal header gold border */
.info-modal-header {
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* ── 99.21 Remove decorative keyframes ── */
@keyframes cardPulseBorder { 0%, 100% { border-color: rgba(255,255,255,0.08); } }
@keyframes ringBreathe { 0%, 100% { filter: none; } }
@keyframes ringBreatheCable { 0%, 100% { filter: none; } }
@keyframes prShine { 0%, 100% { background-position: 200%; } }
@keyframes iconGlowPulse { 0%, 100% { transform: scale(1); } }
@keyframes goldEdgeSweep { 0%, 100% { background-position: 200%; } }

/* ── 99.20b Week nav & main containers — flat ── */
section.week-nav,
.week-nav {
  background: #000 !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
body.light-mode section.week-nav,
body.light-mode .week-nav {
  background: #fff !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body.cable-week section.week-nav,
body.cable-week .week-nav {
  background: #000 !important;
  border: none !important;
  box-shadow: none !important;
}
body.light-mode section.week-nav,
body.light-mode .week-nav,
body.light-mode.cable-week section.week-nav,
body.light-mode.cable-week .week-nav {
  background: #fff !important;
  border: none !important;
  box-shadow: none !important;
}
/* App container */
.app-container {
  background: transparent !important;
}
body.light-mode .app-container {
  background: transparent !important;
}

/* ── 99.20c Additional cable-week & warm UI neutralization ── */
/* Week nav controls — neutral */
.cal-top-bar {
  background: transparent !important;
  border: none !important;
}
.sheet-month-nav {
  color: rgba(255,255,255,0.6) !important;
}
.legend-tab {
  color: rgba(255,255,255,0.5) !important;
}
/* Day cols — keep structure, neutralize warm bg */
.day-col {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.7) !important;
}
.day-col.today {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
.day-col .day-label {
  color: rgba(255,255,255,0.4) !important;
}
/* Rest & streak pills */
.streak-rest-row {
  color: rgba(255,255,255,0.5) !important;
}
.rest-pill,
.streak-badge {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.6) !important;
  box-shadow: none !important;
}
.rest-pill .rest-count {
  color: #fff !important;
}
/* SC card left border — neutral white, not cable blue */
body.cable-week .sc-card {
  border-left-color: rgba(255,255,255,0.15) !important;
}
/* Superset label — keep purple */
.superset-label-text {
  color: var(--purple, #A894D2) !important;
}
/* Banner bnr-photo-scrim (if visible) — solid dark */
.bnr-photo-scrim {
  display: none !important;
}
/* Day panel background */
.day-panel {
  background: transparent !important;
  box-shadow: none !important;
}
/* Week strip area */
.week-strip {
  background: transparent !important;
}
/* Light mode day cols — match white banner background */
body.light-mode .day-col {
  background: transparent !important;
  border-color: transparent !important;
  color: rgba(0,0,0,0.6) !important;
}
body.light-mode .day-col.today {
  background: transparent !important;
  border-color: transparent !important;
  color: #000 !important;
}
body.light-mode .rest-pill,
body.light-mode .streak-badge {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: rgba(0,0,0,0.5) !important;
}

/* ── 99.22 Focus visible — neutral ── */
*:focus-visible {
  outline: 2px solid rgba(255,255,255,0.4) !important;
  outline-offset: 2px !important;
}
body.light-mode *:focus-visible {
  outline-color: rgba(0,0,0,0.3) !important;
}

/* ── 99.23 Input focus — neutral ring ── */
.set-input:focus,
.sc-input:focus {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.2) !important;
}
body.light-mode .set-input:focus,
body.light-mode .sc-input:focus {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15) !important;
}

/* ── 99.24 Dock — flat ── */
.bottom-menu-bar,
#bottomMenuPill {
  background: #111 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}
body.light-mode .bottom-menu-bar,
body.light-mode #bottomMenuPill {
  background: #fff !important;
  border-top-color: rgba(0,0,0,0.06) !important;
}

/* ===================================================================
   Section 100: LIGHT MODE FINAL OVERRIDES
   Must come LAST to beat cable-week dark overrides
   =================================================================== */
/* Light mode — floating white panels on light grey background */
body.light-mode,
body.light-mode.cable-week {
  background: #e8e8e8 !important;
}
html.light-mode {
  background: #e8e8e8 !important;
}
body.light-mode section.week-nav,
body.light-mode.cable-week section.week-nav {
  background: #fff !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}
body.light-mode .app-container {
  background: transparent !important;
}
body.light-mode .workout-banner,
body.light-mode.cable-week .workout-banner {
  background: #fff !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}
body.light-mode .workout-banner-slide-center,
body.light-mode.cable-week .workout-banner-slide-center {
  background: #fff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body.light-mode .bnr-card,
body.light-mode.cable-week .bnr-card {
  background: transparent !important;
  background-image: none !important;
}
body.light-mode .bex-card-wrapper,
body.light-mode.cable-week .bex-card-wrapper {
  background: #f5f5f5 !important;
  border: none !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
body.light-mode .bex-card-wrapper .banner-ex-card,
body.light-mode .bex-card-wrapper .bex-stepper-area,
body.light-mode.cable-week .bex-card-wrapper .banner-ex-card,
body.light-mode.cable-week .bex-card-wrapper .bex-stepper-area {
  background: #fff !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open,
body.light-mode.cable-week .bex-card-wrapper.bex-inline-open {
  background: #fff !important;
  border: none !important;
}
body.light-mode .banner-ex-card.bex-wt-cable,
body.light-mode .banner-ex-card.bex-wt-free {
  border-left-color: rgba(0,0,0,0.06) !important;
}
body.light-mode .ins-card,
body.light-mode.cable-week .ins-card {
  background: #fff !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}
body.light-mode .bottom-menu-bar {
  background: #fff !important;
  border: none !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06) !important;
}
body.light-mode .header,
body.light-mode .fixed-top-area {
  background: #e8e8e8 !important;
  border-bottom-color: rgba(0,0,0,0.06) !important;
}
body.light-mode .fixed-top-area {
  background: #fff !important;
}

/* ===================================================================
   Section 101: STEPPER UX IMPROVEMENTS
   - Clearer set flow with visual progress
   - Rest timer countdown bar
   - Last session ghost values
   - Set completion confirmation
   =================================================================== */

/* ── 101.1 Stepper area — better spacing + visual zones ── */
.bex-card-wrapper.bex-inline-open .bex-stepper-area {
  padding: 8px 16px calc(14px + env(safe-area-inset-bottom)) !important;
  gap: 10px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── 101.2 Set inputs — clearer input zones ── */
.bex-set-inputs {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 12px 0 !important;
}
.bex-input-group {
  flex: 1 !important;
  max-width: 160px !important;
  text-align: center !important;
}
.bex-input-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.55) !important;
  margin-bottom: 6px !important;
  display: block !important;
}
body.light-mode .bex-input-label {
  color: rgba(0,0,0,0.50) !important;
}
.bex-input-x {
  font-size: 16px !important;
  color: rgba(255,255,255,0.20) !important;
  font-weight: 300 !important;
  padding: 0 2px !important;
  align-self: center !important;
  margin-top: 18px !important;
}
body.light-mode .bex-input-x {
  color: rgba(0,0,0,0.15) !important;
}

/* ── 101.3 VStep — modern rounded, bigger touch targets ── */
.bex-vstep {
  border-radius: 16px !important;
  overflow: hidden !important;
  min-height: 120px !important;
}
.bex-vstep-num {
  font-size: 32px !important;
  font-weight: 800 !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
.bex-vstep-num:active {
  background: rgba(255,255,255,0.06) !important;
}
body.light-mode .bex-vstep-num:active {
  background: rgba(0,0,0,0.04) !important;
}
/* Arrow buttons — larger, easier to tap */
.bex-vstep-up.bex-step,
.bex-vstep-down.bex-step {
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease !important;
}
.bex-vstep-up.bex-step svg,
.bex-vstep-down.bex-step svg {
  width: 18px !important;
  height: 18px !important;
}
/* Value entered state — subtle green left bar */
.bex-vstep:has(.bex-input:not(.zero-value)) {
  border-left: 3px solid var(--green, #22c55e) !important;
}
body.light-mode .bex-vstep:has(.bex-input:not(.zero-value)) {
  border-left: 3px solid #16A34A !important;
}

/* ── 101.4 Ghost value (last session) — shown in vstep ── */
.bex-ghost-hint {
  position: absolute !important;
  bottom: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.30) !important;
  white-space: nowrap !important;
  letter-spacing: 0.5px !important;
  padding: 2px 8px !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 6px !important;
  margin-bottom: 4px !important;
  pointer-events: none !important;
}
body.light-mode .bex-ghost-hint {
  color: rgba(0,0,0,0.30) !important;
  background: rgba(0,0,0,0.03) !important;
}

/* ── 101.5 Rest timer countdown bar ── */
.bex-rest-bar {
  position: relative !important;
  width: 100% !important;
  height: 48px !important;
  background: #111 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 4px 0 !important;
}
.bex-rest-bar-fill {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  background: rgba(34,197,94,0.15) !important;
  border-radius: 14px !important;
  transition: width 1s linear !important;
}
.bex-rest-bar-text {
  position: relative !important;
  z-index: 1 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--green, #22c55e) !important;
  letter-spacing: 1px !important;
}
.bex-rest-bar-label {
  position: relative !important;
  z-index: 1 !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,0.40) !important;
  margin-left: 10px !important;
  text-transform: uppercase !important;
}
.bex-rest-bar-skip {
  position: relative !important;
  z-index: 1 !important;
  margin-left: auto !important;
  padding: 6px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.50) !important;
  background: rgba(255,255,255,0.06) !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  letter-spacing: 1px !important;
}
.bex-rest-bar-skip:active {
  background: rgba(255,255,255,0.12) !important;
}
/* Rest bar pulsing when < 5s */
.bex-rest-bar.urgent .bex-rest-bar-text {
  animation: restUrgentPulse 0.5s ease infinite alternate !important;
}
@keyframes restUrgentPulse {
  from { opacity: 1; }
  to { opacity: 0.5; }
}
body.light-mode .bex-rest-bar {
  background: #f0f0f0 !important;
  border-color: rgba(0,0,0,0.06) !important;
}
body.light-mode .bex-rest-bar-fill {
  background: rgba(22,163,74,0.10) !important;
}
body.light-mode .bex-rest-bar-text {
  color: #16A34A !important;
}
body.light-mode .bex-rest-bar-label {
  color: rgba(0,0,0,0.35) !important;
}
body.light-mode .bex-rest-bar-skip {
  color: rgba(0,0,0,0.45) !important;
  background: rgba(0,0,0,0.04) !important;
}

/* ── 101.6 Set completion checkmark animation ── */
.bex-set-slide.just-completed {
  position: relative !important;
}
.bex-set-slide.just-completed::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(34,197,94,0.06) !important;
  border-radius: 12px !important;
  animation: setCompleteFade 1.2s ease forwards !important;
  pointer-events: none !important;
}
@keyframes setCompleteFade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── 101.7 PR target bar — cleaner ── */
.bex-pr-target {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  margin: 4px 0 8px !important;
}
.bex-pr-target-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  color: var(--gold, #C9A84C) !important;
  background: rgba(201,168,76,0.10) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}
.bex-pr-target-val {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.65) !important;
}
.bex-pr-date {
  font-size: 11px !important;
  color: rgba(255,255,255,0.35) !important;
  margin-left: auto !important;
}
body.light-mode .bex-pr-target {
  background: rgba(0,0,0,0.02) !important;
  border-color: rgba(0,0,0,0.06) !important;
}
body.light-mode .bex-pr-target-val {
  color: rgba(0,0,0,0.60) !important;
}
body.light-mode .bex-pr-date {
  color: rgba(0,0,0,0.35) !important;
}

/* ── 101.8 Skeleton loading ── */
.bex-skeleton {
  background: #111 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
}
.bex-skeleton::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%) !important;
  animation: skeletonShimmer 1.5s ease infinite !important;
}
@keyframes skeletonShimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
.bex-skeleton-card {
  height: 72px !important;
  margin-bottom: 10px !important;
}
.bex-skeleton-banner {
  height: 180px !important;
  margin-bottom: 16px !important;
}
body.light-mode .bex-skeleton {
  background: #eee !important;
}
body.light-mode .bex-skeleton::after {
  background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.03) 50%, transparent 100%) !important;
}

/* ── 101.9 Volume delta indicators ── */
.bex-vol-delta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  margin-top: 6px !important;
}
.bex-vol-delta.up {
  color: var(--green, #22c55e) !important;
  background: rgba(34,197,94,0.08) !important;
}
.bex-vol-delta.down {
  color: var(--red, #ef4444) !important;
  background: rgba(239,68,68,0.08) !important;
}
.bex-vol-delta.same {
  color: rgba(255,255,255,0.35) !important;
  background: rgba(255,255,255,0.03) !important;
}
body.light-mode .bex-vol-delta.up {
  color: #16A34A !important;
  background: rgba(22,163,74,0.06) !important;
}
body.light-mode .bex-vol-delta.down {
  color: #DC2626 !important;
  background: rgba(220,38,38,0.06) !important;
}
body.light-mode .bex-vol-delta.same {
  color: rgba(0,0,0,0.30) !important;
  background: rgba(0,0,0,0.03) !important;
}

/* ===================================================================
   Section 102: PANEL LAYOUT
   - 1 outer chassis (rounded, dark)
   - 4 inner section panels floating inside with gaps
   - Minimal borders — separation via background contrast + shadows
   - Outer chassis: recessed dark shell
   - Inner panels: raised brushed-steel surfaces floating above chassis
   - Each panel has: top highlight, bottom shadow, inner bevel, gap
   =================================================================== */

/* ── 102.1 Body = Deep Black Void ── */
body {
  background: #000 !important;
}

/* ── 102.2 Outer Container — transparent, no chassis ── */
.app-container {
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 8px 12px !important;
  min-height: calc(100dvh - 72px) !important;
  position: relative !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* ── 102.3 Shared Panel Mixin — raised 3D metallic surface ── */
/* Applied to each inner section via individual selectors below */

/* ── 102.4 Fixed Header — floating top panel ── */
/* Header phase dropdown text — prevent truncation */
.phase-dropdown span {
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 120px !important;
  display: inline-block !important;
}
.phase-dropdown-wrap {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.phase-dropdown-wrap > img {
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
}
.header-stats {
  flex-shrink: 0 !important;
}
.fixed-top-area {
  border-radius: 0 !important;
  margin: 0 -8px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  background: #080808 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ── 102.5 Calendar / Week Strip — compact modern panel ── */
section.week-nav {
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 10px 10px 6px !important;
  margin: 8px 0 !important;
  box-shadow: none !important;
}
/* ── Compact calendar — one row above week strip ── */
section.week-nav .cal-compact-row,
.cal-compact-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
  padding: 0 0 8px !important;
}
/* Force ALL children in compact row to 28px max height */
.cal-compact-row > * {
  max-height: 28px !important;
  box-sizing: border-box !important;
}
/* Month label — compact. Override touch target 44px */
.cal-compact-row .nav-btn.month-btn,
section.week-nav .cal-compact-row .month-btn {
  min-width: auto !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 2px !important;
}
.cal-compact-row .month-btn,
.cal-compact-row .month-btn span,
section.week-nav .cal-compact-row #monthText,
.cal-compact-row span#monthText {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  padding: 0 !important;
  white-space: nowrap !important;
  color: #fff !important;
}
body.light-mode .cal-compact-row #monthText {
  color: #000 !important;
}
/* Month arrows — minimal, no bg/border. Override touch target 44px */
.cal-compact-row .nav-btn.month-arrow,
section.week-nav .cal-compact-row .month-arrow {
  width: 24px !important;
  height: 28px !important;
  min-width: 24px !important;
  min-height: 28px !important;
  max-width: 24px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.cal-compact-row .month-arrow svg {
  width: 14px !important;
  height: 14px !important;
  stroke: rgba(255,255,255,0.50) !important;
}
.cal-compact-row .month-arrow:active {
  background: rgba(255,255,255,0.10) !important;
  transform: scale(0.90) !important;
}
body.light-mode .cal-compact-row .month-arrow svg {
  stroke: rgba(0,0,0,0.35) !important;
}
/* Spacer pushes buttons right */
.cal-compact-spacer {
  flex: 1 !important;
  min-width: 4px !important;
}
/* Action buttons — modern pill shape, uniform height */
section.week-nav .cal-compact-row .rest-days-pill,
section.week-nav .cal-compact-row .streak-indicator,
section.week-nav .cal-compact-row .today-btn,
.cal-compact-row .rest-days-pill,
.cal-compact-row .streak-indicator,
.cal-compact-row .today-btn {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 15px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  background: rgba(255,255,255,0.06) !important;
  border: none !important;
  color: rgba(255,255,255,0.55) !important;
  cursor: pointer !important;
  width: auto !important;
  min-width: 30px !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.5px !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}
/* Today button — pill with icon */
section.week-nav .cal-compact-row .nav-btn.today-btn,
.cal-compact-row .today-btn {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
}
/* Streak — compact pill */
.cal-compact-row .streak-indicator {
  font-size: 10px !important;
  letter-spacing: 0.5px !important;
  max-width: 100px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.cal-compact-row .rest-days-pill svg,
.cal-compact-row .today-btn svg {
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
  stroke: rgba(255,255,255,0.50) !important;
  fill: none !important;
}
.cal-compact-row .rest-days-pill:active,
.cal-compact-row .streak-indicator:active,
.cal-compact-row .today-btn:active {
  background: rgba(255,255,255,0.15) !important;
  transform: scale(0.95) !important;
}
body.light-mode .cal-compact-row .rest-days-pill,
body.light-mode .cal-compact-row .streak-indicator,
body.light-mode .cal-compact-row .today-btn {
  background: rgba(0,0,0,0.06) !important;
  border: none !important;
  color: rgba(0,0,0,0.45) !important;
}
body.light-mode .cal-compact-row .rest-days-pill svg,
body.light-mode .cal-compact-row .today-btn svg {
  stroke: rgba(0,0,0,0.40) !important;
}
/* Hide legend — day dots already show free/cable colors */
.cal-legend-inline,
#calendarLegend,
section.week-nav .cal-legend-inline {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Day cells — compact rounded squares */
.day-col {
  padding: 4px 2px !important;
  border-radius: 12px !important;
  min-width: 42px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
}
body.light-mode .day-col {
  background: transparent !important;
}
body.light-mode .day-col .day-number {
  background: #fff !important;
  color: #000 !important;
}
body.light-mode .day-col.selected .day-number {
  background: #000 !important;
  color: #fff !important;
}
/* Day progress bars — visible in both modes */
.day-bar {
  background: rgba(255,255,255,0.08) !important;
  height: 3px !important;
  border-radius: 2px !important;
}
.day-bar-fill {
  box-shadow: none !important;
}
.day-bar-fill.free {
  background: var(--accent-orange, #E8924A) !important;
}
.day-bar-fill.cable {
  background: var(--blue, #7EB5E2) !important;
}
body.light-mode .day-bar {
  background: rgba(0,0,0,0.10) !important;
}
body.light-mode .day-bar-fill.free {
  background: #C47A30 !important;
}
body.light-mode .day-bar-fill.cable {
  background: #4A8BC2 !important;
}
.day-col .day-number {
  width: 32px !important;
  height: 32px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 32px !important;
  border-radius: 50% !important;
}
.day-col .day-label {
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 2px !important;
  color: rgba(255,255,255,0.35) !important;
}
body.light-mode .day-col .day-label {
  color: rgba(0,0,0,0.35) !important;
}
/* ROUND 200 (May 3): the .day-col.selected/.today/.selected.today and
   their light-mode variants previously here painted bg/border/color
   forces that competed with R195-R199 inline rules. Removed entirely.
   State variants now handled exclusively in muscle-memory.html. */
.day-col.selected,
.day-col.selected .day-number,
.day-col.selected .day-label,
.day-col.today .day-number,
.day-col.selected.today .day-number{ background: transparent !important; border: 0 !important; }
/* Week strip — no extra padding */
.week-strip {
  padding: 0 !important;
  gap: 0 !important;
}
.days-row {
  gap: 2px !important;
  scroll-padding: 0 4px !important;
}
/* Month view — force CSS grid for proper 7-column layout */
.week-strip.month-view {
  overflow: visible !important;
}
.week-strip.month-view .days-row {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 2px !important;
  overflow: visible !important;
}
.week-strip.month-view .scroll-arrow {
  display: none !important;
}
/* Scroll arrows */
.scroll-arrow {
  width: 16px !important;
  min-width: 16px !important;
}
.scroll-arrow svg {
  width: 14px !important;
  height: 14px !important;
}
/* Hide dividers */
.pr-bottom-border,
.day-panel-divider {
  display: none !important;
}

/* ── 102.6 Workout Banner + Exercise List — Round 168: flat transparent ── */
.workout-banner {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 6px 0 !important;
  box-shadow: none !important;
  outline: none !important;
  position: relative !important;
}
.bnr-card {
  border-radius: 16px 16px 0 0 !important;
  position: relative !important;
}

/* ── 102.7 Muscle Strip — positioned inside bnr-card at bottom-right ── */
/* bnr-card already has position:relative from 102.6 */
.bnr-muscle-strip {
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  top: auto !important;
  left: auto !important;
  width: 140px !important;
  height: 190px !important;
  max-width: 140px !important;
  max-height: 190px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 2 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
}
.bnr-muscle-strip img {
  width: 100% !important;
  height: auto !important;
  max-height: 190px !important;
  opacity: 0.45 !important;
  object-fit: contain !important;
  filter: none !important;
}
body.light-mode .bnr-muscle-strip img {
  opacity: 0.25 !important;
  filter: invert(1) !important;
}

/* ── 102.8 Exercise List — flush inside banner, no separation ── */
.banner-exercise-list {
  background: transparent !important;
  border: none !important;
  border-radius: 0 0 18px 18px !important;
  padding: 8px 10px 10px !important;
  margin: 0 !important;
  box-shadow: none !important;
}
/* Remove any line between banner card and exercise list */
.workout-banner-slide-center {
  border-bottom: none !important;
}
.workout-banner-carousel {
  border: none !important;
}
/* Kill the section header separator line */
.bex-section-header {
  border: none !important;
  padding: 6px 4px 8px !important;
}

/* ── 102.9 Exercise Cards — sub-panels within exercise list ── */
/* High specificity to override Section 99.3 box-shadow:none */
.bex-card-wrapper,
.bex-card-wrapper:not(.bex-inline-open):not(.ex-fully-done),
body.cable-week .bex-card-wrapper,
body.cable-week .bex-card-wrapper:not(.bex-inline-open) {
  background: #161616 !important;
  border-radius: 14px !important;
  border: none !important;
  margin-bottom: 6px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.bex-card-wrapper:active {
  transform: scale(0.985) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 1px 2px rgba(0,0,0,0.3) !important;
}

/* ── 102.9a Compact collapsed cards — minimal vertical space ── */
/* Card wrapper — tighter margins */
.bex-card-wrapper:not(.bex-inline-open) {
  margin-bottom: 4px !important;
}
/* Card inner — tighter padding */
.bex-card-wrapper:not(.bex-inline-open) .banner-ex-card {
  padding: 8px 12px !important;
  gap: 8px !important;
  min-height: 0 !important;
}
/* Number badge — large and clear above each card */
.bex-card-num-badge {
  font-size: 18px !important;
  font-weight: 800 !important;
  padding: 4px 0 !important;
  margin: 0 auto !important;
  line-height: 1 !important;
  opacity: 0.60 !important;
  letter-spacing: 2px !important;
  text-align: center !important;
  display: block !important;
}
/* Exercise name — slightly smaller, no truncation */
.bex-pill-name,
.bex-pill-ss-name {
  font-size: 14px !important;
  line-height: 1.2 !important;
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}
/* Meta line — tighter */
.bex-pill-meta {
  font-size: 11px !important;
  margin-top: 1px !important;
  line-height: 1.3 !important;
}
/* Progress bars row — thinner */
.bex-set-dots-row,
.bex-progress-dots {
  margin-top: 3px !important;
  gap: 3px !important;
}
.bex-set-dot-mini {
  height: 3px !important;
}
/* Timer on collapsed card — compact */
.bex-pill-live-timer {
  font-size: 12px !important;
  padding: 0 !important;
  margin-top: 2px !important;
}
/* Exercise list container — tighter padding */
.banner-exercise-list {
  padding: 6px 8px 8px !important;
}
/* Section header — less margin */
.bex-section-header {
  padding: 2px 4px 4px !important;
  margin-bottom: 2px !important;
}
.bex-section-label {
  font-size: 9px !important;
  letter-spacing: 2px !important;
}
/* Expand button — smaller */
.bex-expand-btn {
  width: 24px !important;
  height: 24px !important;
}
/* ── Exercise items — DEPTH-STACKED DECK ── */
/* Cards stacked on top of each other. Active on top, prev/next peek from sides behind it. */
.banner-exercise-list .banner-ex-items,
.banner-ex-items {
  position: relative !important;
  display: block !important;
  overflow: visible !important;
  padding: 0 8px 8px !important;
  min-height: 140px !important;
  /* Touch action to enable horizontal swipe while allowing vertical scroll */
  touch-action: pan-y !important;
}
/* Each step-row stacks on top of each other via absolute positioning */
.banner-ex-items .bex-step-row {
  position: absolute !important;
  top: 0 !important;
  left: 8% !important;
  right: 8% !important;
  display: block !important;
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.35s ease, z-index 0s !important;
  pointer-events: none !important;
}
/* Active card — on top, full size, full opacity */
.banner-ex-items .bex-step-row.bex-deck-active {
  transform: translateX(0) scale(1) !important;
  opacity: 1 !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}
/* Next card — peeks from right behind active */
.banner-ex-items .bex-step-row.bex-deck-next {
  transform: translateX(82%) scale(0.92) !important;
  opacity: 0.5 !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* Previous card — peeks from left behind active */
.banner-ex-items .bex-step-row.bex-deck-prev {
  transform: translateX(-82%) scale(0.92) !important;
  opacity: 0.5 !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* All other cards — hidden behind the stack */
.banner-ex-items .bex-step-row.bex-deck-hidden {
  transform: translateX(0) scale(0.85) !important;
  opacity: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
/* Cards inside step-rows fill 100% */
.bex-step-row > .bex-card-wrapper {
  width: 100% !important;
}
/* Light mode — active card lighter shadow */
body.light-mode .banner-ex-items .bex-step-row.bex-deck-active .bex-card-wrapper {
  box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
}
/* Active card shadow */
.banner-ex-items .bex-step-row.bex-deck-active .bex-card-wrapper {
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}
/* Exercise deck dots — navigation indicator ABOVE cards, below section header */
.bex-exercise-dots {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  position: relative !important;
  z-index: 10 !important;
  margin: 4px auto 8px !important;
  width: fit-content !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 12px !important;
}
/* Deck dots — simple white circles, NO color (avoid confusion with set progress bars) */
.bex-exercise-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.20) !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}
.bex-exercise-dot.active {
  width: 24px !important;
  height: 8px !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,0.60) !important;
}
/* Override — no green/gold on deck dots, only white */
.bex-exercise-dot.done {
  background: rgba(255,255,255,0.20) !important;
}
.bex-exercise-dot.done.active {
  background: rgba(255,255,255,0.60) !important;
}
body.light-mode .bex-exercise-dot {
  background: rgba(0,0,0,0.15) !important;
}
body.light-mode .bex-exercise-dot.active {
  background: rgba(0,0,0,0.50) !important;
}
body.light-mode .bex-exercise-dot.active {
  background: rgba(0,0,0,0.40) !important;
}

/* ── 102.9b Muscle icons on exercise cards — consistent right-aligned ── */
.bex-coll-muscle-icon {
  position: absolute !important;
  right: 36px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: auto !important;
  bottom: auto !important;
  width: 40px !important;
  height: 40px !important;
  opacity: 0.25 !important;
  object-fit: contain !important;
  pointer-events: none !important;
  z-index: 1 !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
body.light-mode .bex-coll-muscle-icon {
  opacity: 0.18 !important;
  filter: invert(1) !important;
}
/* Expanded card — keep icon visible in header */
.bex-inline-open .bex-coll-muscle-icon {
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  opacity: 0.30 !important;
  right: 56px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
}

/* ── 102.10 Insight Cards — raised panels ── */
.insight-sections {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
}
.ins-card {
  background: transparent !important;
  border-radius: 0 !important;
  border: 0 !important;
  margin-bottom: 8px !important;
  box-shadow: none !important;
}

/* ── 102.11 Bottom Dock — floating metallic panel ── */
.bottom-menu-bar {
  border-radius: 18px 18px 0 0 !important;
  margin: 0 5px !important;
  border: none !important;
  background: #0e0e0e !important;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.5) !important;
}

/* ── 102.12 Cleanup ── */
.streak-rest-row {
  padding: 10px 0 6px !important;
}
.day-panel-divider {
  display: none !important;
}
/* Section header label — sits above exercise list panel */
.bex-section-header {
  padding: 4px 4px 8px !important;
}

/* ── 102.13 Expanded Card Override ──
   Commit 54: was a fullscreen viewport overlay (inset:0; width:100vw;
   height:100vh). Phase 39+40 Commits 47-52 pivoted to a floating
   popover anchored to the tapped exercise row. Commit 53's diagnostic
   confirmed this rule was winning the cascade and forcing the wrapper
   to fullscreen regardless of inline `--anchor-top` / `--anchor-left`
   set by JS. Updated to use those custom properties directly so the
   popover honors the JS-computed anchor position. */
.bex-card-wrapper.bex-inline-open {
  position: fixed !important;
  top: var(--anchor-top, 100px) !important;
  left: var(--anchor-left, 12px) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 10000 !important;
  width: 88vw !important;
  max-width: 380px !important;
  height: auto !important;
  max-height: calc(100dvh - var(--anchor-top, 100px) - 24px) !important;
  margin: 0 !important;
  border-radius: 22px !important;
  border: none !important;
  background: #0a0a0a !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.08) !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  transform: none !important;
  -webkit-transform: none !important;
  opacity: 1 !important;
  /* Kill old Section 2 glass/animation */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  isolation: isolate !important;
  contain: none !important;
  will-change: auto !important;
}
/* Commit 54: tail/pointer triangle on top edge pointing at source row. */
.bex-card-wrapper.bex-inline-open::before {
  content: "" !important;
  position: absolute !important;
  top: -7px !important;
  left: var(--anchor-tail-left, 32px) !important;
  width: 14px !important;
  height: 14px !important;
  background: #0a0a0a !important;
  border-left: 1px solid rgba(255,255,255,0.08) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  transform: rotate(45deg) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open {
  background: #fff !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.30), 0 0 0 1px rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open::before {
  background: #fff !important;
  border-left-color: rgba(0,0,0,0.08) !important;
  border-top-color: rgba(0,0,0,0.08) !important;
}
/* Neutralize ALL ancestor containing blocks when expanded */
body.exercise-expanded .banner-ex-items {
  overflow: visible !important;
  transform: none !important;
}
body.exercise-expanded .workout-banner {
  overflow: visible !important;
  transform: none !important;
}
body.exercise-expanded .banner-exercise-list {
  overflow: visible !important;
  transform: none !important;
}
body.exercise-expanded .workout-banner-carousel {
  will-change: auto !important;
  transform: none !important;
  overflow: visible !important;
}
body.exercise-expanded .workout-banner-slide-center {
  overflow: visible !important;
  transform: none !important;
}
body.exercise-expanded .app-container {
  overflow: visible !important;
  transform: none !important;
}
/* .bex-step-row wraps each card — MUST be neutralized to allow position:fixed to escape */
body.exercise-expanded .bex-step-row {
  overflow: visible !important;
  transform: none !important;
  position: static !important;
  contain: none !important;
  will-change: auto !important;
  z-index: auto !important;
}
/* When expanded, body locks scroll — iOS Safari viewport fix */
body.exercise-expanded {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}
/* X close button — fixed top-right corner of viewport */
.bex-card-wrapper.bex-inline-open .bex-expand-btn {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 10001 !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 50% !important;
}
/* Banner card inside expanded — fill viewport */
.bex-card-wrapper.bex-inline-open .banner-ex-card {
  background: #000 !important;
  flex: 0 0 auto !important;
}
/* Stepper area — shrink to content, no dead space */
.bex-card-wrapper.bex-inline-open .bex-stepper-area {
  flex: none !important;
  background: #000 !important;
  overflow-y: auto !important;
}
/* Light mode expanded overlay */
body.light-mode .bex-card-wrapper.bex-inline-open {
  background: #fff !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .banner-ex-card {
  background: #fff !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-stepper-area {
  background: #fff !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-expand-btn {
  background: rgba(0,0,0,0.06) !important;
  border-color: rgba(0,0,0,0.12) !important;
}

/* ── 102.14 Connected Set Tabs + Stepper Zone ── */
/* Unified container: tabs + carousel as one piece */
.bex-set-tabs {
  background: #161616 !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 10px 12px 6px !important;
  margin: 8px 0 0 !important;
  border: none !important;
  position: relative !important;
  z-index: 1 !important;
}
/* Active tab — pointer/connector to inputs below */
.bex-set-tab.active {
  position: relative !important;
}
.bex-set-tab.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
  border-top: 8px solid rgba(255,255,255,0.20) !important;
}
/* Carousel — bottom part of the zone */
.bex-set-carousel {
  background: #161616 !important;
  border-radius: 0 0 16px 16px !important;
  padding: 4px 8px 10px !important;
  margin: 0 !important;
  border: none !important;
}
/* Slide content — centered inputs */
.bex-set-slide.active {
  padding: 8px 0 !important;
}
/* Label "SET 1" inside slide — smaller, subtle */
.bex-set-label {
  font-size: 9px !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,0.30) !important;
  text-align: center !important;
  margin-bottom: 4px !important;
}
/* Light mode */
body.light-mode .bex-set-tabs {
  background: #f0f0f0 !important;
}
body.light-mode .bex-set-carousel {
  background: #f0f0f0 !important;
}
body.light-mode .bex-set-tab.active::after {
  border-top-color: rgba(0,0,0,0.10) !important;
}
body.light-mode .bex-set-label {
  color: rgba(0,0,0,0.30) !important;
}

/* ── 102.15 Kill stray borders/lines ── */
.workout-banner-slide-center {
  border: none !important;
}
.bex-section-header {
  border: none !important;
}
.pr-bottom-border {
  display: none !important;
}
.workout-banner-peek {
  border: none !important;
  box-shadow: none !important;
}
/* Kill all stray internal borders within banner */
.banner-ex-card,
.banner-ex-card.bex-wt-free,
.banner-ex-card.bex-wt-cable {
  border-left: none !important;
  border-right: none !important;
}
.bex-card-body {
  border-top: none !important;
}
/* ── Top accent line — hidden by default, green when done, gold when PR ── */
.bex-card-wrapper::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  right: 10% !important;
  height: 2px !important;
  border-radius: 1px !important;
  background: transparent !important;
  z-index: 6 !important;
  pointer-events: none !important;
  transition: background 0.3s ease !important;
}
/* All sets complete — green line */
.bex-card-wrapper.bex-all-done::after {
  background: linear-gradient(90deg, transparent, var(--green, #22c55e), transparent) !important;
}
/* All sets complete + has PR — gold line */
.bex-card-wrapper.bex-all-done.bex-has-pr::after {
  background: linear-gradient(90deg, transparent, var(--gold, #C9A84C), transparent) !important;
}
/* Light mode */
body.light-mode .bex-card-wrapper.bex-all-done::after {
  background: linear-gradient(90deg, transparent, #16A34A, transparent) !important;
}
body.light-mode .bex-card-wrapper.bex-all-done.bex-has-pr::after {
  background: linear-gradient(90deg, transparent, #B8960C, transparent) !important;
}

/* ── 102.15 Banner Redesign — clean 3-zone layout ── */
.bnr-top-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 14px 10px 0 !important;
  position: relative !important;
}
.bnr-primary-info {
  flex: 1 !important;
  min-width: 0 !important;
}
/* Stack MONDAY above title so title gets full width */
.bnr-heading-line {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
  cursor: pointer !important;
  min-width: 0 !important;
}
.bnr-day {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  color: rgba(255,255,255,0.40) !important;
  text-transform: uppercase !important;
}
.bnr-heading-dot {
  display: none !important;
}
.bnr-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -0.3px !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
}
/* Ensure primary info doesn't bleed into ring+button */
.bnr-primary-info {
  flex: 1 !important;
  min-width: 0 !important;
  padding-right: 4px !important;
  overflow: hidden !important;
}
.bnr-heading-line {
  min-width: 0 !important;
}
.bnr-subtitle-line {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  margin-top: 3px !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.40) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Equipment text colored to match week type */
#workoutBannerEquip {
  font-weight: 700 !important;
  color: #E8924A !important; /* orange — free weights */
}
body.cable-week #workoutBannerEquip {
  color: #7EB5E2 !important; /* blue — cables */
}
body.light-mode #workoutBannerEquip {
  color: #C47A2E !important;
}
body.light-mode.cable-week #workoutBannerEquip {
  color: #5A9AC4 !important;
}
.bnr-sub-dot {
  color: rgba(255,255,255,0.15) !important;
}
/* Progress ring — compact, properly centered */
.bnr-top-row .bnr-ring-hero {
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0 !important;
  margin-right: 30px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.bnr-top-row .bnr-ring-hero-svg {
  width: 48px !important;
  height: 48px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}
.bnr-top-row .bnr-ring-hero-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
}
.bnr-top-row .bnr-prog-pct {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1 !important;
}
body.light-mode .bnr-top-row .bnr-prog-pct {
  color: #000 !important;
}
.bnr-prog-label {
  display: none !important;
}
/* Menu button — positioned at top-right of bnr-card, above the ring */
.bnr-card .bnr-week-menu-btn,
.bnr-top-row .bnr-week-menu-btn {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  z-index: 10 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.bnr-card .bnr-week-menu-btn::after,
.bnr-top-row .bnr-week-menu-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: -8px !important;
}

/* Exercise names — vertical list above timer */
.bnr-exercise-names {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.45) !important;
  letter-spacing: 0.3px !important;
  padding: 6px 14px 2px !important;
  line-height: 1.6 !important;
}
.bnr-exercise-names:empty {
  display: none !important;
}
body.light-mode .bnr-exercise-names {
  color: rgba(0,0,0,0.45) !important;
}

/* Timer row — Zone 2 */
.bnr-timer-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  margin: 6px 10px !important;
  background: rgba(0,0,0,0.20) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
}
.bnr-timer-row .bnr-timer-icon-sm {
  width: 16px !important;
  height: 16px !important;
  stroke: rgba(255,255,255,0.35) !important;
  flex-shrink: 0 !important;
}
.bnr-timer-row .bnr-timer-big {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--green, #22c55e) !important;
  font-variant-numeric: tabular-nums !important;
}
.bnr-timer-row .bnr-timer-hint {
  font-size: 11px !important;
  color: rgba(255,255,255,0.30) !important;
  font-weight: 500 !important;
  flex: 1 !important;
}
.bnr-timer-controls {
  margin-left: auto !important;
  display: flex !important;
  gap: 6px !important;
}
.bnr-timer-controls button {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  border: none !important;
  background: rgba(255,255,255,0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
}
.bnr-timer-controls button svg {
  width: 14px !important;
  height: 14px !important;
  stroke: rgba(255,255,255,0.45) !important;
}
.bnr-timer-controls button:active {
  background: rgba(255,255,255,0.12) !important;
}
/* End button red tint */
.bnr-timer-controls .bnr-end-workout-btn svg {
  stroke: var(--red, #ef4444) !important;
}

/* Volume row — Zone 3 */
.bnr-vol-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  padding: 4px 14px 10px !important;
}
.bnr-vol-val {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.50) !important;
  font-variant-numeric: tabular-nums !important;
}
.bnr-vol-label {
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: rgba(255,255,255,0.25) !important;
  text-transform: uppercase !important;
}

/* Hide green checkmark + PR count — ring already shows completion */
.bnr-complete-check,
#bannerPrCount {
  display: none !important;
}

/* Hide old banner elements that were kept for JS compat */
.bnr-card > .bnr-eyebrow,
.bnr-card > .bnr-footer,
.bnr-card > .bnr-timer-block,
.bnr-card > .bnr-hero-body,
.bnr-card > .bnr-title-stack,
.bnr-card .bnr-equip-badge {
  display: none !important;
}

/* Light mode overrides */
body.light-mode .bnr-day {
  color: rgba(0,0,0,0.45) !important;
}
body.light-mode .bnr-heading-dot {
  color: rgba(0,0,0,0.15) !important;
}
body.light-mode .bnr-title {
  color: #000 !important;
}
body.light-mode .bnr-subtitle-line {
  color: rgba(0,0,0,0.40) !important;
}
body.light-mode .bnr-sub-dot {
  color: rgba(0,0,0,0.12) !important;
}
body.light-mode .bnr-top-row .bnr-prog-pct {
  color: #000 !important;
}
body.light-mode .bnr-timer-row {
  background: rgba(0,0,0,0.04) !important;
}
body.light-mode .bnr-timer-row .bnr-timer-big {
  color: #16A34A !important;
}
body.light-mode .bnr-timer-row .bnr-timer-hint {
  color: rgba(0,0,0,0.30) !important;
}
body.light-mode .bnr-timer-controls button {
  background: rgba(0,0,0,0.04) !important;
}
body.light-mode .bnr-timer-controls button svg {
  stroke: rgba(0,0,0,0.40) !important;
}
body.light-mode .bnr-vol-val {
  color: rgba(0,0,0,0.45) !important;
}
body.light-mode .bnr-vol-label {
  color: rgba(0,0,0,0.25) !important;
}

/* ===================================================================
   Section 102 — LIGHT MODE
   =================================================================== */
body.light-mode {
  background: #d0d0d0 !important;
}
body.light-mode .app-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.light-mode .fixed-top-area {
  background: #e4e4e4 !important;
  box-shadow: none !important;
}
body.light-mode section.week-nav,
body.light-mode .workout-banner,
body.light-mode .ins-card {
  background: #fff !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}
body.light-mode .banner-exercise-list {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.light-mode .bex-card-wrapper,
body.light-mode .bex-card-wrapper:not(.bex-inline-open):not(.ex-fully-done),
body.light-mode.cable-week .bex-card-wrapper,
body.light-mode.cable-week .bex-card-wrapper:not(.bex-inline-open) {
  background: #f8f8f8 !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
body.light-mode .bottom-menu-bar {
  background: #ebebeb !important;
  border: none !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06) !important;
}

/* ===================================================================
   Section 103: LIGHT MODE VISIBILITY FIXES
   Addresses 14 critical visibility issues on white backgrounds
   =================================================================== */

/* ── 103.1 Week strip day cells — visible on white ── */
body.light-mode .day-col {
  background: #f0f0f0 !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 10px !important;
}
body.light-mode .day-col.selected {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}
body.light-mode .day-col.selected .day-number {
  color: #fff !important;
}
body.light-mode .day-col.selected .day-label {
  color: rgba(255,255,255,0.70) !important;
}

/* ── 103.2 Day progress bars — darker for contrast ── */
body.light-mode .day-bar-fill {
  background: #C47A30 !important;
}
body.light-mode .day-bar-fill.cable {
  background: #4A8BC2 !important;
}

/* ── 103.3 Deck navigation dots — dark on light ── */
body.light-mode .bex-exercise-dot {
  background: rgba(0,0,0,0.20) !important;
}
body.light-mode .bex-exercise-dot.active {
  background: rgba(0,0,0,0.60) !important;
}
body.light-mode .bex-exercise-dots {
  background: rgba(0,0,0,0.04) !important;
}

/* ── 103.4 Insight section labels — much darker ── */
body.light-mode .arc-gauge-desc {
  color: rgba(0,0,0,0.55) !important;
}
body.light-mode .arc-gauge-pct {
  color: rgba(0,0,0,0.70) !important;
}
body.light-mode .ins-empty {
  color: rgba(0,0,0,0.40) !important;
}
body.light-mode .ins-days-label {
  color: rgba(0,0,0,0.55) !important;
}
body.light-mode .ins-days-sublabel {
  color: rgba(0,0,0,0.40) !important;
}
body.light-mode .ins-days-num {
  color: rgba(0,0,0,0.80) !important;
}

/* ── 103.5 PR History chart — visible line ── */
body.light-mode #prTimelineChart {
  filter: invert(0.85) !important;
}
body.light-mode .stats-line-chart-title {
  color: rgba(0,0,0,0.55) !important;
}

/* ── 103.6 Performance gauge arcs — visible strokes ── */
body.light-mode .arc-gauge-svg circle {
  stroke: rgba(0,0,0,0.08) !important;
}
body.light-mode .arc-gauge-svg path {
  opacity: 0.50 !important;
}

/* ── 103.7 Days completed ring — visible ── */
body.light-mode .ins-days-ring-svg circle {
  stroke: rgba(0,0,0,0.08) !important;
}
body.light-mode .ins-days-ring-fill {
  stroke: rgba(0,0,0,0.25) !important;
}
body.light-mode .ins-days-ring-pct {
  color: rgba(0,0,0,0.55) !important;
}

/* ── 103.8 Trophy & section icons — visible ── */
body.light-mode .stats-trophy,
body.light-mode .ins-card svg:not(.arc-gauge-svg):not(.ins-days-ring-svg) {
  stroke: rgba(0,0,0,0.45) !important;
  fill: none !important;
}
body.light-mode .ins-card .ins-icon {
  color: rgba(0,0,0,0.50) !important;
}

/* ── 103.9 VIEW ALL button — visible ── */
body.light-mode .ins-pr-view-all-btn {
  color: rgba(0,0,0,0.55) !important;
  border-color: rgba(0,0,0,0.15) !important;
}
body.light-mode .ins-pr-view-all-btn svg {
  stroke: rgba(0,0,0,0.40) !important;
}

/* ── 103.10 VStep — light background (not black) ── */
body.light-mode .bex-vstep-num {
  background: #e8e8e8 !important;
  color: #000 !important;
}
body.light-mode .bex-vstep {
  background: #f0f0f0 !important;
  border-color: rgba(0,0,0,0.10) !important;
}
body.light-mode .bex-vstep-up.bex-step,
body.light-mode .bex-vstep-down.bex-step {
  background: rgba(0,0,0,0.04) !important;
}

/* ── 103.11 Set tabs — visible on light ── */
body.light-mode .bex-set-tab {
  background: rgba(0,0,0,0.06) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  color: rgba(0,0,0,0.55) !important;
}
body.light-mode .bex-set-tab.active {
  background: rgba(0,0,0,0.14) !important;
  border-color: rgba(0,0,0,0.20) !important;
  color: #000 !important;
}
body.light-mode .bex-set-tabs {
  background: #f0f0f0 !important;
}
body.light-mode .bex-set-carousel {
  background: #f0f0f0 !important;
}
body.light-mode .bex-set-tabs-label {
  color: rgba(0,0,0,0.40) !important;
}

/* ── 103.12 Rest pill + Watch & Learn — visible ── */
body.light-mode .bex-body-hero-hint,
body.light-mode .bex-body-hero-play {
  color: rgba(0,0,0,0.55) !important;
  background: rgba(0,0,0,0.06) !important;
}

/* ── 103.13 Muscle icons — more visible in light ── */
body.light-mode .bex-coll-muscle-icon {
  opacity: 0.25 !important;
}
body.light-mode .bnr-muscle-strip img {
  opacity: 0.30 !important;
}

/* ── 103.14 OVERALL PROGRESS label (inline styles override) ── */
body.light-mode [style*="OVERALL PROGRESS"],
body.light-mode .overall-progress-label {
  color: rgba(0,0,0,0.45) !important;
  border-color: rgba(0,0,0,0.12) !important;
}

/* ── 103.15 Rank section — visible ── */
body.light-mode .ins-rank-progress-label {
  color: rgba(0,0,0,0.50) !important;
}
body.light-mode .ins-rank-view-all {
  color: rgba(0,0,0,0.50) !important;
}

/* ── 103.16 Banner ring background — visible ── */
body.light-mode .bnr-ring-hero-bg {
  stroke: rgba(0,0,0,0.10) !important;
}

/* ===================================================================
   Section 104: DARK MODE TEXT CONTRAST FIXES
   Addresses 6 too-dim text issues in dark mode insight sections
   =================================================================== */

/* ── 104.1 Insight gauge descriptions — brighter ── */
.arc-gauge-desc {
  color: rgba(255,255,255,0.50) !important;
}

/* ── 104.2 PR empty text — brighter ── */
.ins-empty {
  color: rgba(255,255,255,0.40) !important;
}

/* ── 104.3 Days completed labels — brighter ── */
.ins-days-label {
  color: rgba(255,255,255,0.50) !important;
}

/* ── 104.4 Rank section — brighter ── */
.ins-rank-progress-label {
  color: rgba(255,255,255,0.45) !important;
}
.ins-rank-view-all {
  color: rgba(255,255,255,0.45) !important;
}

/* ── 104.5 PR view all button — brighter ── */
.ins-pr-view-all-btn {
  color: rgba(255,255,255,0.50) !important;
}

/* ── 104.6 Header truncation fix ── */
.phase-dropdown span {
  max-width: 140px !important;
}

/* ===================================================================
   Section 105: EXPANDED CARD — COMPACT MOBILE REFACTOR
   Tighter column, centered hierarchy, grouped input panel,
   smaller media, compact timer/tabs. CSS-only, no JS changes.
   =================================================================== */

/* ── 105.1 "3 Exercises" heading — smaller, centered ── */
.bex-topbar-heading {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-align: center !important;
  padding: 2px 0 4px !important;
  letter-spacing: 0.5px !important;
}
body.light-mode .bex-topbar-heading {
  color: #000 !important;
}

/* ── 105.2 Numbered exercise pills — compact ── */
.bex-topbar-pill {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.35) !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1.5px solid rgba(255,255,255,0.10) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.bex-topbar-pill.bex-pill-current {
  color: #fff !important;
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.35) !important;
  transform: scale(1.08) !important;
}
.bex-topbar-pill.bex-pill-done {
  color: var(--green, #22c55e) !important;
  border-color: rgba(34,197,94,0.25) !important;
  background: rgba(34,197,94,0.06) !important;
}
.bex-topbar-pill.bex-pill-done.bex-pill-pr {
  color: var(--gold, #C9A84C) !important;
  border-color: rgba(201,168,76,0.25) !important;
  background: rgba(201,168,76,0.06) !important;
}
.bex-topbar-dots-row {
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 !important;
}
body.light-mode .bex-topbar-pill {
  color: rgba(0,0,0,0.30) !important;
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.10) !important;
}
body.light-mode .bex-topbar-pill.bex-pill-current {
  color: #000 !important;
  background: rgba(0,0,0,0.08) !important;
  border-color: rgba(0,0,0,0.25) !important;
}

/* ── 105.3 Exercise intro — LEFT-aligned ── */
.bex-card-wrapper.bex-inline-open .banner-ex-card {
  text-align: left !important;
}
.bex-card-wrapper.bex-inline-open .bex-set-type-badge,
.bex-card-wrapper.bex-inline-open .bex-pill-name,
.bex-card-wrapper.bex-inline-open .bex-pill-ss-name,
.bex-card-wrapper.bex-inline-open .bex-pill-meta {
  text-align: left !important;
}
/* Dim "Best today" text */
.bex-card-wrapper.bex-inline-open .bex-pr-inline {
  opacity: 0.40 !important;
  font-size: 10px !important;
}

/* ── 105.4 Media area — much smaller, centered ── */
.bex-card-wrapper.bex-inline-open .bex-body-hero {
  display: flex !important;
  gap: 4px !important;
  height: auto !important;
  max-height: 90px !important;
  max-width: 260px !important;
  margin: 4px auto !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.bex-card-wrapper.bex-inline-open .bex-body-hero img,
.bex-card-wrapper.bex-inline-open .bex-body-hero video {
  flex: 1 !important;
  min-width: 0 !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  height: 80px !important;
}
.bex-card-wrapper.bex-inline-open .bex-body-hero-hint {
  font-size: 9px !important;
  padding: 2px 8px !important;
}

/* ── 105.5 Timer — clean number only, tap to pause/resume ── */
.bex-card-wrapper.bex-inline-open .bex-timer-label-row {
  padding: 0 !important;
  margin: 0 !important;
}
.bex-card-wrapper.bex-inline-open .bex-timer-label-text {
  font-size: 8px !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,0.25) !important;
}
.bex-card-wrapper.bex-inline-open .bex-ex-timer-compact {
  max-width: 320px !important;
  margin: 0 auto !important;
  padding: 4px 10px !important;
  gap: 6px !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: none !important;
}
/* Timer value — prominent, green when running */
.bex-card-wrapper.bex-inline-open .bex-ex-timer-val {
  font-size: 22px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  cursor: pointer !important;
}
/* Hide play/stop/reset buttons — timer is tap-controlled */
.bex-card-wrapper.bex-inline-open .bex-timer-btn,
.bex-card-wrapper.bex-inline-open .bex-timer-reset,
.bex-card-wrapper.bex-inline-open .bex-timer-icon {
  display: none !important;
}
/* Timer colors — green running, bright yellow paused+flash */
.bex-ex-timer.is-live.is-running .bex-ex-timer-val {
  color: #22c55e !important;
  animation: none !important;
}
.bex-ex-timer.is-live:not(.is-running) .bex-ex-timer-val {
  color: #FFE44D !important;
  animation: timerPauseFlash 0.8s ease-in-out infinite !important;
}
@keyframes timerPauseFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── 105.6 Rest pill — inline next to set tabs ── */
.bex-rest-pill {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.40) !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  padding: 3px 8px !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}
body.light-mode .bex-rest-pill {
  color: rgba(0,0,0,0.40) !important;
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.06) !important;
}

/* ── 105.7 Est time pill — inline next to timer ── */
.bex-est-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.35) !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 8px !important;
  padding: 3px 8px !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}
.bex-est-pill svg { stroke: rgba(255,255,255,0.30) !important; }
body.light-mode .bex-est-pill {
  color: rgba(0,0,0,0.35) !important;
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.05) !important;
}
body.light-mode .bex-est-pill svg { stroke: rgba(0,0,0,0.30) !important; }

/* ── 105.8 Superset selector — compact, centered, transparent bg ── */
.bex-card-wrapper.bex-inline-open .bex-set-tabs {
  max-width: 340px !important;
  margin: 6px auto 0 !important;
  padding: 8px 12px 6px !important;
  gap: 4px !important;
  justify-content: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
/* Set tabs row — tabs + rest text on same line */
.bex-card-wrapper.bex-inline-open .bex-set-tabs-row {
  display: flex !important;
  gap: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
}
.bex-card-wrapper.bex-inline-open .bex-set-tab {
  width: 36px !important;
  height: 36px !important;
  font-size: 14px !important;
}
.bex-card-wrapper.bex-inline-open .bex-set-tabs-label {
  font-size: 9px !important;
  letter-spacing: 2px !important;
  width: 100% !important;
  text-align: center !important;
  margin-bottom: 2px !important;
  display: block !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-set-tabs {
  background: transparent !important;
}

/* ── 105.9 Lower input area — centered, same bg ── */
.bex-card-wrapper.bex-inline-open .bex-set-carousel {
  max-width: 360px !important;
  margin: 0 auto !important;
  padding: 4px 12px 16px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-set-carousel {
  background: transparent !important;
}
/* Set slide — centered column, only show active */
.bex-card-wrapper.bex-inline-open .bex-set-slide {
  display: none !important;
  flex-direction: column !important;
  align-items: center !important;
}
.bex-card-wrapper.bex-inline-open .bex-set-slide.active {
  display: flex !important;
}
/* Inputs centered */
.bex-card-wrapper.bex-inline-open .bex-set-inputs {
  max-width: 300px !important;
  width: 100% !important;
  margin: 0 auto !important;
  justify-content: center !important;
  align-items: flex-end !important;
}
/* Stepper max width */
.bex-card-wrapper.bex-inline-open .bex-input-group {
  max-width: 140px !important;
  flex: 1 !important;
}
/* Input labels centered */
.bex-card-wrapper.bex-inline-open .bex-input-label {
  text-align: center !important;
  width: 100% !important;
}
/* A/B exercise rows — centered */
.bex-card-wrapper.bex-inline-open .bex-set-ex-row {
  justify-content: center !important;
  padding: 6px 0 2px !important;
  width: 100% !important;
}
/* PR target — centered */
.bex-card-wrapper.bex-inline-open .bex-pr-target {
  max-width: 300px !important;
  width: 100% !important;
  margin: 2px auto 4px !important;
  padding: 5px 12px !important;
  justify-content: center !important;
}

/* ── 105.10 No dead space ── */
.bex-card-wrapper.bex-inline-open .bex-stepper-area {
  flex: none !important;
  padding: 4px 12px calc(10px + env(safe-area-inset-bottom)) !important;
}
/* Set slide compact */
.bex-set-slide.active {
  padding: 4px 0 !important;
}
/* Hide redundant set label (already shown in tabs) */
.bex-set-label {
  font-size: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── 105.11 Rest text — right of tabs row, plain text ── */
.bex-rest-text {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.30) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
  -webkit-tap-highlight-color: transparent !important;
  order: 99 !important;
  margin-left: 8px !important;
}
.bex-rest-text:active {
  color: rgba(255,255,255,0.55) !important;
}
body.light-mode .bex-rest-text {
  color: rgba(0,0,0,0.30) !important;
}

/* ── 105.12 Color logic: WHITE (active) → GREEN (done) → GOLD (PR) ── */

/* === ACTIVE TAB — WHITE === */
.bex-card-wrapper.bex-inline-open .bex-set-tab.active:not(.done) {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.40) !important;
  color: #fff !important;
  box-shadow: 0 0 8px rgba(255,255,255,0.08) !important;
}
/* Active stepper — WHITE borders + arrows */
.bex-set-slide.active:not(.set-done) .bex-vstep {
  border-color: rgba(255,255,255,0.30) !important;
}
.bex-set-slide.active:not(.set-done) .bex-vstep-up svg,
.bex-set-slide.active:not(.set-done) .bex-vstep-down svg {
  stroke: rgba(255,255,255,0.60) !important;
}
.bex-set-slide.active:not(.set-done) .bex-input-label {
  color: rgba(255,255,255,0.70) !important;
}

/* === DONE TAB — GREEN === */
.bex-card-wrapper.bex-inline-open .bex-set-tab.done:not(.pr) {
  background: rgba(34,197,94,0.12) !important;
  border-color: rgba(34,197,94,0.30) !important;
  color: #22c55e !important;
}
/* Done stepper — GREEN borders + arrows */
.bex-set-slide.set-done:not(.set-pr) .bex-vstep {
  border-color: rgba(34,197,94,0.25) !important;
}
.bex-set-slide.set-done:not(.set-pr) .bex-vstep-up svg,
.bex-set-slide.set-done:not(.set-pr) .bex-vstep-down svg {
  stroke: rgba(34,197,94,0.55) !important;
}
.bex-set-slide.set-done:not(.set-pr) .bex-input-label {
  color: rgba(34,197,94,0.65) !important;
}

/* === PR TAB — GOLD === */
.bex-card-wrapper.bex-inline-open .bex-set-tab.done.pr {
  background: rgba(201,168,76,0.12) !important;
  border-color: rgba(201,168,76,0.30) !important;
  color: #C9A84C !important;
}
/* PR stepper — GOLD borders + arrows */
.bex-set-slide.set-pr .bex-vstep {
  border-color: rgba(201,168,76,0.25) !important;
}
.bex-set-slide.set-pr .bex-vstep-up svg,
.bex-set-slide.set-pr .bex-vstep-down svg {
  stroke: rgba(201,168,76,0.55) !important;
}
.bex-set-slide.set-pr .bex-input-label {
  color: rgba(201,168,76,0.65) !important;
}

/* === TOPBAR PILLS — same logic === */
.bex-topbar-pill.bex-pill-current:not(.bex-pill-done) {
  color: #fff !important;
  border-color: rgba(255,255,255,0.40) !important;
  background: rgba(255,255,255,0.14) !important;
}
.bex-topbar-pill.bex-pill-done:not(.bex-pill-pr) {
  color: #22c55e !important;
  border-color: rgba(34,197,94,0.30) !important;
  background: rgba(34,197,94,0.08) !important;
}
.bex-topbar-pill.bex-pill-done.bex-pill-pr {
  color: #C9A84C !important;
  border-color: rgba(201,168,76,0.30) !important;
  background: rgba(201,168,76,0.08) !important;
}

/* === LIGHT MODE === */
body.light-mode .bex-card-wrapper.bex-inline-open .bex-set-tab.active:not(.done) {
  background: rgba(0,0,0,0.08) !important;
  border-color: rgba(0,0,0,0.25) !important;
  color: #000 !important;
}
body.light-mode .bex-set-slide.active:not(.set-done) .bex-vstep {
  border-color: rgba(0,0,0,0.20) !important;
}
body.light-mode .bex-set-slide.active:not(.set-done) .bex-vstep-up svg,
body.light-mode .bex-set-slide.active:not(.set-done) .bex-vstep-down svg {
  stroke: rgba(0,0,0,0.45) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-set-tab.done:not(.pr) {
  color: #16A34A !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-set-tab.done.pr {
  color: #B8960C !important;
}

/* Active slide — no background */
.bex-set-slide.active {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  margin: 0 !important;
}

/* ── 105.13 Tab flash — persistent pulse on next set ── */
.bex-set-tab.bex-tab-flash {
  animation: tabFlashPulse 1s ease-in-out infinite !important;
}
@keyframes tabFlashPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.15);
  }
  50% {
    box-shadow: 0 0 8px 2px rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.35);
  }
}

/* ── 105.14 FULL CENTER OVERRIDE — expanded card only ── */
/* Override mm-all.css row layouts to centered columns */

/* Card header — horizontal row, names left, timer right */
.bex-card-wrapper.bex-inline-open .bex-card-hdr {
  flex-direction: row !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 10px 12px !important;
  gap: 6px !important;
  position: relative !important;
}
/* Title column — left-aligned, takes available space */
.bex-card-wrapper.bex-inline-open .bex-card-title-col {
  padding: 0 !important;
  padding-right: 100px !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  flex: 1 !important;
  min-width: 0 !important;
}
/* Hide number badge in expanded — shown in topbar pills */
.bex-card-wrapper.bex-inline-open .bex-num-badge {
  display: none !important;
}
/* Hide step column (number badge) in expanded — shown in topbar pills instead */
.bex-card-wrapper.bex-inline-open .bex-step-col {
  display: none !important;
}
/* Card body — vertical column, left-aligned */
.bex-card-wrapper.bex-inline-open .bex-card-body {
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 0 12px 6px !important;
  border-top: none !important;
}
/* Hide left check/trophy column in expanded */
.bex-card-wrapper.bex-inline-open .bex-left-col {
  display: none !important;
}
/* Info block — full width, left-aligned */
.bex-card-wrapper.bex-inline-open .bex-info {
  align-items: flex-start !important;
  text-align: left !important;
  width: 100% !important;
}
/* Superset badge — left-aligned */
.bex-card-wrapper.bex-inline-open .bex-set-type-badge {
  display: flex !important;
  justify-content: flex-start !important;
  margin: 4px 0 !important;
  width: fit-content !important;
}
/* Exercise names — left-aligned */
.bex-card-wrapper.bex-inline-open .bex-pill-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: 100% !important;
}
.bex-card-wrapper.bex-inline-open .bex-pill-name,
.bex-card-wrapper.bex-inline-open .bex-pill-ss-name {
  text-align: left !important;
}
/* Meta line — left-aligned */
.bex-card-wrapper.bex-inline-open .bex-pill-meta {
  text-align: left !important;
}
/* Dim "Best today" text */
.bex-card-wrapper.bex-inline-open .bex-pr-inline {
  opacity: 0.35 !important;
  font-size: 10px !important;
}
/* Exercise timer — absolute right side of header */
.bex-card-wrapper.bex-inline-open .bex-ex-timer-compact {
  position: absolute !important;
  top: 12px !important;
  right: 44px !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  background: transparent !important;
  border: none !important;
  z-index: 3 !important;
}
/* A/B exercise rows in stepper — centered */
.bex-card-wrapper.bex-inline-open .bex-set-ex-row {
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}
/* BEAT / PR target — centered in stepper panel */
.bex-card-wrapper.bex-inline-open .bex-pr-target {
  justify-content: center !important;
  max-width: 280px !important;
  margin: 2px auto 4px !important;
}
/* Stepper area — centered content */
.bex-card-wrapper.bex-inline-open .bex-stepper-area {
  text-align: center !important;
}
/* Set tabs label — centered */
.bex-card-wrapper.bex-inline-open .bex-set-tabs-label {
  text-align: center !important;
  width: 100% !important;
}
/* Banner card — remove left border */
.bex-card-wrapper.bex-inline-open .banner-ex-card {
  text-align: left !important;
  border-left: none !important;
}
/* GOAL text — green in expanded card */
.bex-card-wrapper.bex-inline-open .bex-input-label {
  color: rgba(34,197,94,0.70) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-input-label {
  color: rgba(22,163,74,0.65) !important;
}

/* ── 105.15 Muscle image — handled by Section 106.4 ── */

/* ── 105.15b Top accent line in expanded card — follows color logic ── */
.bex-card-wrapper.bex-inline-open::after {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 5% !important;
  right: 5% !important;
  height: 2px !important;
  border-radius: 1px !important;
  background: rgba(255,255,255,0.08) !important;
  z-index: 10001 !important;
  pointer-events: none !important;
  transition: background 0.3s ease !important;
}
/* Expanded + all done — green line */
.bex-card-wrapper.bex-inline-open.bex-all-done::after {
  background: linear-gradient(90deg, transparent, #22c55e, transparent) !important;
}
/* Expanded + all done + PR — gold line */
.bex-card-wrapper.bex-inline-open.bex-all-done.bex-has-pr::after {
  background: linear-gradient(90deg, transparent, #C9A84C, transparent) !important;
}
/* Light mode */
body.light-mode .bex-card-wrapper.bex-inline-open::after {
  background: rgba(0,0,0,0.06) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open.bex-all-done::after {
  background: linear-gradient(90deg, transparent, #16A34A, transparent) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open.bex-all-done.bex-has-pr::after {
  background: linear-gradient(90deg, transparent, #B8960C, transparent) !important;
}

/* ── 105.16 Dropdown badges match topbar pills (circles, same colors) ── */
.bex-ex-dd-num {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1.5px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.40) !important;
}
/* Active exercise in dropdown — white */
.bex-ex-dd-active .bex-ex-dd-num {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: #fff !important;
  box-shadow: none !important;
}
/* Done exercise in dropdown — green */
.bex-ex-dd-done .bex-ex-dd-num {
  background: rgba(34,197,94,0.08) !important;
  border-color: rgba(34,197,94,0.25) !important;
  color: #22c55e !important;
}
/* Done + PR exercise in dropdown — gold */
.bex-ex-dd-pr .bex-ex-dd-num {
  background: rgba(201,168,76,0.08) !important;
  border-color: rgba(201,168,76,0.25) !important;
  color: #C9A84C !important;
}
/* Light mode */
body.light-mode .bex-ex-dd-num {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: rgba(0,0,0,0.35) !important;
}
body.light-mode .bex-ex-dd-active .bex-ex-dd-num {
  background: rgba(0,0,0,0.08) !important;
  border-color: rgba(0,0,0,0.25) !important;
  color: #000 !important;
}
body.light-mode .bex-ex-dd-done .bex-ex-dd-num {
  color: #16A34A !important;
  border-color: rgba(22,163,74,0.25) !important;
}
body.light-mode .bex-ex-dd-pr .bex-ex-dd-num {
  color: #B8960C !important;
  border-color: rgba(184,150,12,0.25) !important;
}

/* ── 105.16b Hide old rest pill (replaced by .bex-rest-text) ── */
.bex-rest-pill {
  display: none !important;
}

/* ── 105.17 Overall workout timer — top-right corner ── */
.bex-topbar-workout-timer {
  position: absolute !important;
  top: 6px !important;
  right: 50px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  color: #22c55e !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  background: rgba(34,197,94,0.08) !important;
}
body.light-mode .bex-topbar-workout-timer {
  color: #16A34A !important;
  background: rgba(22,163,74,0.06) !important;
}

/* ── 105.18 Workout image larger + muscle icon embedded ── */
.bex-card-wrapper.bex-inline-open .bex-body-hero {
  max-height: 120px !important;
  max-width: 320px !important;
  margin: 6px auto !important;
  position: relative !important;
}
.bex-card-wrapper.bex-inline-open .bex-body-hero img,
.bex-card-wrapper.bex-inline-open .bex-body-hero video {
  height: 110px !important;
}
/* Muscle icon embedded in bottom-right of hero image */
.bex-card-wrapper.bex-inline-open .bex-coll-muscle-icon {
  display: block !important;
  position: absolute !important;
  bottom: 4px !important;
  right: 4px !important;
  width: 40px !important;
  height: 40px !important;
  opacity: 0.50 !important;
  z-index: 2 !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

/* ── 105.19 Keypad z-index — must be above expanded card overlay ── */
#bexKeypad {
  z-index: 10002 !important;
}
#bexKeypadOverlay {
  z-index: 10001 !important;
}

/* ===================================================================
   Section 106: EXPANDED CARD VISUAL REDESIGN (Mar 25, 2026)
   =================================================================== */

/* ── 106.1 Left colored strip — week type accent ── */
.bex-card-wrapper.bex-inline-open {
  border-left: 3px solid rgba(255,255,255,0.15) !important;
}
body.cable-week .bex-card-wrapper.bex-inline-open {
  border-left-color: #7EB5E2 !important;
}
.bex-card-wrapper.bex-inline-open.bex-wt-free,
body:not(.cable-week) .bex-card-wrapper.bex-inline-open {
  border-left-color: #E8924A !important;
}

/* ── 106.2 Timer — in-flow, left-aligned within stepper area ── */
.bex-card-wrapper.bex-inline-open .bex-timer-label-row {
  display: none !important;
}
.bex-card-wrapper.bex-inline-open .bex-ex-timer-compact {
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 4px 0 !important;
  background: transparent !important;
  border: none !important;
  gap: 4px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
}
.bex-card-wrapper.bex-inline-open .bex-ex-timer-val {
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
/* Est time pill — inline after timer value */
.bex-card-wrapper.bex-inline-open .bex-est-pill {
  font-size: 9px !important;
  padding: 2px 6px !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  color: rgba(255,255,255,0.25) !important;
}

/* ── 106.3 Progress ring — inline in topbar info row ── */
.bex-expanded-ring {
  width: 30px !important;
  height: 30px !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
.bex-expanded-ring svg {
  width: 30px !important;
  height: 30px !important;
}
.bex-expanded-ring .ring-bg {
  fill: none !important;
  stroke: rgba(255,255,255,0.08) !important;
  stroke-width: 3 !important;
}
.bex-expanded-ring .ring-fill {
  fill: none !important;
  stroke: rgba(255,255,255,0.25) !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease !important;
}
/* Completed — green ring */
.bex-expanded-ring.ring-done .ring-fill {
  stroke: #22c55e !important;
}
/* PR — gold ring */
.bex-expanded-ring.ring-pr .ring-fill {
  stroke: #C9A84C !important;
}
.bex-expanded-ring-pct {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.50) !important;
  white-space: nowrap !important;
}
.bex-expanded-ring.ring-done .bex-expanded-ring-pct {
  color: #22c55e !important;
}
.bex-expanded-ring.ring-pr .bex-expanded-ring-pct {
  color: #C9A84C !important;
}

/* ── 106.4 Larger images + muscle icon inside ── */
.bex-card-wrapper.bex-inline-open .bex-body-hero {
  max-height: 150px !important;
  max-width: 340px !important;
  margin: 6px auto !important;
  cursor: pointer !important;
  position: relative !important;
}
.bex-card-wrapper.bex-inline-open .bex-body-hero img,
.bex-card-wrapper.bex-inline-open .bex-body-hero video {
  height: 130px !important;
  border-radius: 10px !important;
}
/* Muscle icon embedded in workout image bottom-right */
.bex-card-wrapper.bex-inline-open .bex-coll-muscle-icon {
  display: block !important;
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  width: 44px !important;
  height: 44px !important;
  opacity: 0.60 !important;
  z-index: 3 !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  cursor: pointer !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)) !important;
}
/* Fullscreen image viewer */
.bex-image-viewer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10010 !important;
  background: rgba(0,0,0,0.95) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
.bex-image-viewer img {
  max-width: 95vw !important;
  max-height: 90vh !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}
.bex-image-viewer-close {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #fff !important;
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10011 !important;
}

/* ── 106.5 Larger set tabs ── */
.bex-card-wrapper.bex-inline-open .bex-set-tab {
  width: 42px !important;
  height: 42px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
}
.bex-card-wrapper.bex-inline-open .bex-set-tabs-label {
  font-size: 10px !important;
  letter-spacing: 2.5px !important;
  margin-bottom: 6px !important;
}

/* ── 106.6 Flat stepper panel + unified tabs (replaces glass morphism) ── */
/* Set tabs — top half of unified container */
.bex-card-wrapper.bex-inline-open .bex-set-tabs {
  max-width: 360px !important;
  margin: 8px auto 0 !important;
  padding: 10px 16px 8px !important;
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: none !important;
  border-radius: 16px 16px 0 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Active tab — strong contrast */
.bex-card-wrapper.bex-inline-open .bex-set-tab.active {
  background: #fff !important;
  color: #000 !important;
  font-weight: 800 !important;
}
.bex-card-wrapper.bex-inline-open .bex-set-tab.done {
  background: rgba(34,197,94,0.15) !important;
  color: #22C55E !important;
}
.bex-card-wrapper.bex-inline-open .bex-set-tab.done.pr {
  background: rgba(201,168,76,0.15) !important;
  color: #C9A84C !important;
}
/* Tab pointer — solid white triangle */
.bex-card-wrapper.bex-inline-open .bex-set-tab.active::after {
  bottom: -10px !important;
  border-left: 10px solid transparent !important;
  border-right: 10px solid transparent !important;
  border-top: 10px solid #fff !important;
}
.bex-card-wrapper.bex-inline-open .bex-set-tab.done::after {
  border-top-color: #22C55E !important;
}
.bex-card-wrapper.bex-inline-open .bex-set-tab.done.pr::after {
  border-top-color: #C9A84C !important;
}
/* Set carousel — bottom half of unified container */
.bex-card-wrapper.bex-inline-open .bex-set-carousel {
  max-width: 360px !important;
  margin: 0 auto !important;
  padding: 20px 20px 24px !important;
  border-radius: 0 0 16px 16px !important;
  background: #111 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-top: none !important;
  box-shadow: none !important;
  position: relative !important;
}
/* Border color states — green when done, gold when PR */
.bex-card-wrapper.bex-inline-open .bex-set-carousel.stepper-done {
  border-color: rgba(34,197,94,0.30) !important;
}
.bex-card-wrapper.bex-inline-open .bex-set-carousel.stepper-pr {
  border-color: rgba(201,168,76,0.30) !important;
}
/* Flat VStep wrapper */
.bex-card-wrapper.bex-inline-open .bex-vstep {
  background: #0a0a0a !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
/* Stepper buttons — 44px touch targets */
.bex-card-wrapper.bex-inline-open .bex-vstep-up,
.bex-card-wrapper.bex-inline-open .bex-vstep-down {
  height: 44px !important;
  min-height: 44px !important;
  background: rgba(255,255,255,0.04) !important;
  border: none !important;
  box-shadow: none !important;
}
.bex-card-wrapper.bex-inline-open .bex-vstep-up:active,
.bex-card-wrapper.bex-inline-open .bex-vstep-down:active {
  background: rgba(255,255,255,0.12) !important;
}
/* Stepper arrow SVGs — larger, brighter */
.bex-card-wrapper.bex-inline-open .bex-vstep-up svg,
.bex-card-wrapper.bex-inline-open .bex-vstep-down svg {
  width: 22px !important;
  height: 22px !important;
  stroke: rgba(255,255,255,0.60) !important;
  filter: none !important;
}
/* Number display — high contrast */
.bex-card-wrapper.bex-inline-open .bex-vstep-num {
  background: #000 !important;
  color: #fff !important;
  font-size: clamp(28px, 5vw, 36px) !important;
  font-weight: 800 !important;
  height: clamp(48px, 7vh, 60px) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border: none !important;
  transition: transform 0.1s ease-out !important;
}

/* ── 106.6b Light mode — tabs + stepper ── */
body.light-mode .bex-card-wrapper.bex-inline-open .bex-set-tabs {
  background: #f0f0f0 !important;
  border-color: rgba(0,0,0,0.06) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-set-tab.active {
  background: #000 !important;
  color: #fff !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-set-tab.active::after {
  border-top-color: #000 !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-set-carousel {
  background: #f0f0f0 !important;
  border-color: rgba(0,0,0,0.06) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-vstep {
  background: #e8e8e8 !important;
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-vstep-num {
  background: #fff !important;
  color: #000 !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-vstep-up svg,
body.light-mode .bex-card-wrapper.bex-inline-open .bex-vstep-down svg {
  stroke: rgba(0,0,0,0.50) !important;
}

/* ── 106.7 Equipment type label in topbar ── */
.bex-topbar-equip {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-right: auto !important;
}
.bex-equip-cable {
  color: #FACC15 !important;
}
.bex-equip-free {
  color: #FACC15 !important;
}
body.light-mode .bex-equip-cable {
  color: #4A8BC2 !important;
}
body.light-mode .bex-equip-free {
  color: #C47A30 !important;
}

/* ── 106.8 Topbar info row — flex row with items spread ── */
.bex-expanded-topbar .bex-topbar-info {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  padding: 6px 12px !important;
  font-size: 10px !important;
}

/* ── 106.9 Workout timer — right side of topbar ── */
.bex-topbar-workout-timer {
  position: static !important;
  margin-left: auto !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
}

/* ── 106.10 X close button — fixed top-right, clear of other elements ── */
.bex-card-wrapper.bex-inline-open .bex-expand-btn {
  position: fixed !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 10001 !important;
  width: 34px !important;
  height: 34px !important;
}

/* ===================================================================
   Section 107: FULL PAGE OVERHAUL — Mar 28, 2026
   Phases 1-6: Header, Banner, Cards, Insights, Dead Zone, Light Mode
   Goals: breathing room, simplicity, premium, no overwhelming feel
   =================================================================== */

/* ── 107.1 PHASE 1: Header — fix truncation ── */
.phase-dropdown span {
  font-size: 10px !important;
  max-width: 170px !important;
  letter-spacing: 2px !important;
}

/* ── 107.2 PHASE 2: Banner — compact, remove exercise names ── */
.bnr-exercise-names {
  display: none !important;
}
.bnr-muscle-strip {
  width: 100px !important;
  height: 140px !important;
  opacity: 0.25 !important;
}
.bnr-muscle-strip img {
  max-height: 140px !important;
}
/* Timer more prominent */
.bnr-timer-value {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #fff !important;
}
.bnr-timer-hint {
  color: rgba(255,255,255,0.45) !important;
}
/* Subtitle on one line */
.bnr-subtitle-line {
  font-size: 11px !important;
  white-space: nowrap !important;
}
/* Banner tighter padding */
.bnr-top-row {
  padding: 12px 12px 0 !important;
}
.bnr-timer-row {
  padding: 6px 14px !important;
}

/* ── 107.3 PHASE 3: Exercise cards — tighter, bigger pencil ── */
.bex-card-wrapper:not(.bex-inline-open) {
  padding: 10px 12px 10px !important;
}
.bex-card-wrapper:not(.bex-inline-open) .bex-expand-btn {
  width: 32px !important;
  height: 32px !important;
}
.bex-card-wrapper:not(.bex-inline-open) .bex-coll-muscle-icon {
  opacity: 0.15 !important;
  width: 50px !important;
  height: 50px !important;
}
/* Number badge compact */
.bex-card-wrapper:not(.bex-inline-open) .bex-step-num {
  font-size: 14px !important;
}
/* Section header tighter */
.bex-section-header {
  margin-bottom: 10px !important;
  padding-top: 0 !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
}
/* Light mode card borders */
body.light-mode .bex-card-wrapper:not(.bex-inline-open) .banner-ex-card {
  border: 1px solid rgba(0,0,0,0.08) !important;
}

/* ── 107.4 PHASE 4: Insight cards — compact empty states ── */
/* Kill OVERALL PROGRESS divider */
#dividerOverall {
  display: none !important;
}
/* Tighter insight sections */
.insight-sections {
  margin-top: 20px !important;
  gap: 10px !important;
}
/* All insight cards — less padding */
.ins-card {
  padding: 16px !important;
  margin-bottom: 0 !important;
}
/* TODAY'S PRS — compact empty state */
.ins-pr-today .ins-empty {
  padding: 4px 0 !important;
  margin: 0 !important;
}
/* PR HISTORY — compact chart area */
.ins-pr-graph {
  min-height: auto !important;
}
.ins-pr-graph canvas {
  max-height: 80px !important;
}
/* PERFORMANCE gauges — smaller */
.arc-gauge-wrap {
  gap: 8px !important;
}
.arc-gauge {
  width: 80px !important;
  height: 80px !important;
}
/* DAYS COMPLETED — compact */
.ins-days-card {
  padding: 14px 16px !important;
}
/* Rank card — Round 168: flat transparent */
.ins-rank {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
}
.ins-rank-bg {
  display: none !important;
}
.ins-rank .ins-rank-icon {
  width: 56px !important;
  height: 56px !important;
}
/* Section dividers — more visible */
.insight-sections::before,
.bex-section-header::after {
  background: rgba(255,255,255,0.12) !important;
}

/* ── 107.5 PHASE 5: Kill bottom dead zone ── */
/* Tighter bottom padding — just dock clearance */
.insight-sections {
  padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}
/* Kill any stray gradient at page bottom */
.app-container::after {
  display: none !important;
}
body::after {
  display: none !important;
}

/* ── 107.6 PHASE 6: Light mode polish ── */
body.light-mode {
  background: #f0f0f0 !important;
}
body.light-mode .app-container {
  background: transparent !important;
}
body.light-mode .ins-card {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
body.light-mode .ins-rank {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
}
body.light-mode .ins-rank-bg {
  display: none !important;
}
body.light-mode .bnr-muscle-strip img {
  opacity: 0.15 !important;
}
body.light-mode .bnr-timer-value {
  color: #000 !important;
}
body.light-mode .bnr-timer-hint {
  color: rgba(0,0,0,0.40) !important;
}
body.light-mode .insight-sections::before,
body.light-mode .bex-section-header::after {
  background: rgba(0,0,0,0.10) !important;
}
body.light-mode #dividerOverall {
  display: none !important;
}

/* ===================================================================
   Section 108: COMPACT MODERN HEADER — Mar 28, 2026
   Reduces header height from ~60px to ~44px, strips decorative
   containers, modern fitness app feel (Strong/Hevy/Nike Training Club)
   =================================================================== */

/* ── 108.1 Header container — compact height ── */
header {
  padding: 0 10px !important;
  padding-top: max(6px, env(safe-area-inset-top, 6px)) !important;
  padding-bottom: 6px !important;
  gap: 6px !important;
  background: #000 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
header::after {
  display: none !important;
}

/* ── 109.2 Back button — bare chevron, no container ── */
.back {
  width: 32px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.back svg {
  width: 20px !important;
  height: 20px !important;
  stroke: rgba(255,255,255,0.7) !important;
  stroke-width: 2 !important;
  filter: none !important;
}
.back:active {
  background: none !important;
}

/* ── 109.3 Phase logo + title — tighter ── */
.logo {
  gap: 6px !important;
}
.phase-dropdown-wrap > img,
.logo img {
  width: 22px !important;
  height: 22px !important;
  border-radius: 5px !important;
  filter: none !important;
}
.phase-dropdown span {
  font-size: 10px !important;
  letter-spacing: 1px !important;
  max-width: 140px !important;
}
.phase-dd-arrow {
  width: 10px !important;
  height: 10px !important;
}

/* ── 109.4 Header stats — strip pill container ── */
.header-stats {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  gap: 6px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.header-stats:active {
  background: none !important;
}

/* ── 109.5 Days ring — compact ── */
.header-days-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
}
.header-days-btn .days-ring-svg {
  width: 28px !important;
  height: 28px !important;
}
.header-days-text {
  font-size: 7px !important;
}
.header-days-slash {
  font-size: 6px !important;
}

/* ── 109.6 Rank icon — smaller visual, adequate touch ── */
.header-rank-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  object-fit: contain !important;
  filter: none !important;
}

/* ── 108.7 Score — compact, sublabel tiny ── */
.header-score {
  font-size: 14px !important;
  filter: none !important;
}
.header-score-sublabel {
  font-size: 6px !important;
  letter-spacing: 0.8px !important;
  opacity: 0.4 !important;
}

/* ── 108.8 Fixed top area ── */
.fixed-top-area {
  background: #000 !important;
}

/* ===================================================================
   Section 108 — LIGHT MODE
   =================================================================== */
body.light-mode header {
  background: #fff !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
body.light-mode header::after {
  display: none !important;
}
body.light-mode .back {
  background: none !important;
  border: none !important;
}
body.light-mode .back svg {
  stroke: rgba(0,0,0,0.5) !important;
  filter: none !important;
}
body.light-mode .header-stats {
  background: none !important;
  border: none !important;
}
body.light-mode .header-score {
  color: #444 !important;
  filter: none !important;
}
body.light-mode .header-score-sublabel {
  color: rgba(0,0,0,0.3) !important;
}
body.light-mode .header-days-text {
  color: rgba(0,0,0,0.5) !important;
}
body.light-mode .header-days-slash {
  color: rgba(0,0,0,0.25) !important;
}
body.light-mode .fixed-top-area {
  background: #fff !important;
}
body.light-mode .logo img {
  filter: invert(1) brightness(0.3) !important;
}

/* ===================================================================
   Section 109: OPTION N CALENDAR REDESIGN — Mar 28, 2026
   Week strip: fill-from-bottom cells, status row, tappable pills
   Month view: left color strip, mini progress bars, stat cards
   Expand/collapse animation between views
   =================================================================== */

/* ── 109.0 Hide old ring-based elements ── */
.day-ring-wrap,
.day-ring-svg,
.day-pr-trophy,
.day-workout-label,
.cal-legend-inline,
.mv-label-slot,
.mv-ring-slot,
.day-panel-divider {
  display: none !important;
}

/* ── 109.1 Week strip pills ── */
.wm-pill {
  height: 24px !important;
  padding: 0 7px !important;
  border-radius: 12px !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
  flex-shrink: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.wm-pill:active {
  transform: scale(0.95) !important;
}
.wm-pill-type.cable {
  background: rgba(126,181,226,0.18) !important;
  color: #7EB5E2 !important;
}
.wm-pill-type.free {
  background: rgba(232,146,74,0.18) !important;
  color: #E8924A !important;
}
.wm-pill-rest {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.5) !important;
}
.wm-pill-pr {
  background: rgba(217,184,120,0.12) !important;
  color: #D9B878 !important;
}

/* ── 109.2 Week strip day cells — fill from bottom ── */
.day-col,
.day-col.selected,
.day-col.today,
.day-col.completed,
.day-col.rest,
.day-col.day-rest {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 3px 0 2px !important;
  min-width: 0 !important;
  cursor: pointer !important;
  border: none !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.wm-day-letter {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.wm-day-letter.cable { color: #7EB5E2; }
.wm-day-letter.free { color: #E8924A; }
.wm-day-letter.rest-let { color: rgba(255,255,255,0.12); }

.wm-day-body {
  position: relative;
  width: 38px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.day-col.selected .wm-day-body {
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.3);
}
.day-col.today .wm-day-body {
  box-shadow: inset 0 0 0 1.5px #22c55e;
}
.day-col.selected.today .wm-day-body {
  box-shadow: inset 0 0 0 1.5px #22c55e, 0 0 0 1px rgba(255,255,255,0.2);
}

.wm-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0 0 10px 10px;
  pointer-events: none;
  transition: height 0.4s ease;
}
.day-col[data-week-type="cable"] .wm-fill {
  background: linear-gradient(to top, rgba(126,181,226,0.45), rgba(126,181,226,0.08));
}
.day-col[data-week-type="free"] .wm-fill {
  background: linear-gradient(to top, rgba(232,146,74,0.45), rgba(232,146,74,0.08));
}
.day-col.completed .wm-fill {
  background: linear-gradient(to top, rgba(34,197,94,0.40), rgba(34,197,94,0.08)) !important;
}

.wm-day-num {
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  line-height: 1;
}
.day-col.selected .wm-day-num {
  color: #fff;
  font-weight: 800;
}
.day-col.today .wm-day-num {
  color: #22c55e;
}
.day-col.day-rest .wm-day-num {
  color: rgba(255,255,255,0.12);
}

/* Rest day slash */
.wm-rest-slash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.wm-rest-slash::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 50%;
  width: 1px;
  height: 70%;
  background: rgba(255,255,255,0.12);
  transform: translateX(-50%) rotate(-45deg);
}

/* Status row below the cell */
.wm-status-row {
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 1px;
}
.wm-status-check { color: #22c55e; font-size: 9px; line-height: 1; }
.wm-status-pr-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #D9B878;
  box-shadow: 0 0 3px rgba(217,184,120,0.4);
}
.wm-status-frac { color: rgba(255,255,255,0.35); font-size: 7px; font-weight: 700; }
.wm-status-rest { color: rgba(255,255,255,0.15); font-size: 9px; }

/* ── 109.3 Expand/collapse handle ── */
.wm-expand-handle {
  display: flex;
  justify-content: center;
  padding: 2px 0 4px;
  cursor: pointer;
  color: rgba(255,255,255,0.2);
  transition: color 0.15s ease;
}
.wm-expand-handle:active { color: rgba(255,255,255,0.5); }
.wm-expand-handle svg {
  transition: transform 0.3s ease;
}
.wm-expand-handle.expanded svg {
  transform: rotate(180deg);
}

/* ── 109.4 Height animation — constrain week-strip only, not day-panel ── */
.week-strip {
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  max-height: 90px !important;
}
body.calendar-expanded .week-strip {
  max-height: 550px !important;
  overflow-y: auto !important;
}
.day-panel {
  overflow: visible !important;
}

/* ── 109.5 Month view stat cards ── */
.mn-stats-row {
  display: none !important;
  gap: 5px !important;
  padding: 4px 2px 8px !important;
}
body.calendar-expanded .mn-stats-row {
  display: flex !important;
}
.mn-stat-card {
  flex: 1 !important;
  padding: 7px 4px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.04) !important;
  text-align: center !important;
  cursor: pointer !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
}
.mn-stat-card:active {
  background: rgba(255,255,255,0.10) !important;
  transform: scale(0.96) !important;
}
.mn-stat-num {
  display: block !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}
.mn-stat-label {
  display: block !important;
  font-size: 7px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.3) !important;
  margin-top: 2px !important;
}
.mn-stat-workouts .mn-stat-num { color: #22c55e !important; }
.mn-stat-prs .mn-stat-num { color: #D9B878 !important; }
.mn-stat-streak .mn-stat-num { color: #fff !important; }
.mn-stat-rest .mn-stat-num { color: rgba(255,255,255,0.5) !important; }

/* ── 109.6 Month grid cells ── */
/* ROUND 200 (May 3): the .mn-day-cell base + variant rules previously
   here painted bg/border/radius/box-shadow/color forces that competed
   with R196/R197/R198 inline overrides. Removed entirely. Cell layout
   (position, aspect-ratio, padding, flex-centering) is preserved via a
   minimal block. State variants (selected/today/completed/rest) are
   now handled exclusively by the inline R195-R199 rules in
   muscle-memory.html. */
.mn-day-cell {
  position: relative !important;
  aspect-ratio: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  padding: 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.mn-type-strip {
  position: absolute !important;
  left: 0 !important;
  top: 3px !important;
  bottom: 3px !important;
  width: 2px !important;
  border-radius: 1px !important;
}
.mn-type-strip.cable { background: rgba(126,181,226,0.5) !important; }
.mn-type-strip.free { background: rgba(232,146,74,0.5) !important; }

.mn-day-num {
  position: relative !important;
  z-index: 1 !important;
  line-height: 1 !important;
}

.mn-pr-dot {
  position: absolute !important;
  top: 2px !important;
  right: 3px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #D9B878 !important;
  box-shadow: 0 0 3px rgba(217,184,120,0.4) !important;
}
.mn-progress-bar {
  position: absolute !important;
  bottom: 2px !important;
  left: 4px !important;
  right: 4px !important;
  height: 2px !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 1px !important;
  overflow: hidden !important;
}
.mn-progress-fill {
  height: 100% !important;
  border-radius: 1px !important;
}
.mn-progress-fill.cable { background: #7EB5E2 !important; }
.mn-progress-fill.free { background: #E8924A !important; }
.mn-progress-fill.complete { background: #22c55e !important; }

/* Month view week headers */
.mn-week-header {
  text-align: center !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.2) !important;
  padding: 2px 0 !important;
  letter-spacing: 0.5px !important;
}

/* Today button show in both views */
.today-btn {
  display: inline-flex !important;
}

/* ===================================================================
   Section 109 — LIGHT MODE
   =================================================================== */
body.light-mode .wm-pill-type.cable {
  background: rgba(74,139,194,0.12) !important;
  color: #4A8BC2 !important;
}
body.light-mode .wm-pill-type.free {
  background: rgba(196,122,48,0.12) !important;
  color: #C47A30 !important;
}
body.light-mode .wm-pill-rest {
  background: rgba(0,0,0,0.04) !important;
  color: rgba(0,0,0,0.45) !important;
}
body.light-mode .wm-pill-pr {
  background: rgba(160,128,80,0.10) !important;
  color: #8B6914 !important;
}
body.light-mode .wm-day-letter.cable { color: #4A8BC2 !important; }
body.light-mode .wm-day-letter.free { color: #C47A30 !important; }
body.light-mode .wm-day-letter.rest-let { color: rgba(0,0,0,0.10) !important; }

body.light-mode .wm-day-body {
  background: rgba(0,0,0,0.03) !important;
}
body.light-mode .day-col.selected .wm-day-body {
  background: rgba(0,0,0,0.06) !important;
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.25) !important;
}
body.light-mode .day-col.today .wm-day-body {
  box-shadow: inset 0 0 0 1.5px #16a34a !important;
}
body.light-mode .day-col[data-week-type="cable"] .wm-fill {
  background: linear-gradient(to top, rgba(74,139,194,0.30), rgba(74,139,194,0.05)) !important;
}
body.light-mode .day-col[data-week-type="free"] .wm-fill {
  background: linear-gradient(to top, rgba(196,122,48,0.30), rgba(196,122,48,0.05)) !important;
}
body.light-mode .day-col.completed .wm-fill {
  background: linear-gradient(to top, rgba(22,163,74,0.30), rgba(22,163,74,0.05)) !important;
}
body.light-mode .wm-day-num {
  color: rgba(0,0,0,0.45) !important;
}
body.light-mode .day-col.selected .wm-day-num {
  color: #000 !important;
}
body.light-mode .day-col.today .wm-day-num {
  color: #16a34a !important;
}
body.light-mode .day-col.day-rest .wm-day-num {
  color: rgba(0,0,0,0.10) !important;
}
body.light-mode .wm-rest-slash::after {
  background: rgba(0,0,0,0.10) !important;
}
body.light-mode .wm-status-frac { color: rgba(0,0,0,0.3) !important; }
body.light-mode .wm-status-rest { color: rgba(0,0,0,0.12) !important; }
body.light-mode .wm-expand-handle { color: rgba(0,0,0,0.15) !important; }
/* Override old light-mode selected day black bg */
body.light-mode .day-col.selected,
body.light-mode .day-col.today,
body.light-mode .day-col.completed {
  background: none !important;
  color: inherit !important;
  border: none !important;
}
/* Week strip .wm-day-body needs dark overrides for light mode */
body.light-mode .day-col.selected .wm-day-body {
  background: rgba(0,0,0,0.06) !important;
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.25) !important;
}
body.light-mode .day-col.today .wm-day-body {
  box-shadow: inset 0 0 0 1.5px #16a34a !important;
}
body.light-mode .day-col.selected.today .wm-day-body {
  box-shadow: inset 0 0 0 1.5px #16a34a, 0 0 0 1px rgba(0,0,0,0.15) !important;
}

/* Month view light mode */
body.light-mode .mn-stat-card {
  background: rgba(0,0,0,0.025) !important;
  border-color: rgba(0,0,0,0.06) !important;
}
body.light-mode .mn-stat-label { color: rgba(0,0,0,0.35) !important; }
body.light-mode .mn-stat-workouts .mn-stat-num { color: #16a34a !important; }
body.light-mode .mn-stat-prs .mn-stat-num { color: #8B6914 !important; }
body.light-mode .mn-stat-streak .mn-stat-num { color: #000 !important; }
body.light-mode .mn-stat-rest .mn-stat-num { color: rgba(0,0,0,0.4) !important; }

/* ROUND 200 (May 3): light-mode .mn-day-cell variant rules removed.
   Painted backgrounds/borders/colors that conflicted with the
   inline R195/R197/R198 single-source-of-truth calendar styles.
   Equipment colors, today ring, and rest slash now handled inline. */
body.light-mode .mn-type-strip.cable { background: rgba(74,139,194,0.4) !important; }
body.light-mode .mn-type-strip.free { background: rgba(196,122,48,0.4) !important; }
body.light-mode .mn-progress-fill.cable { background: #4A8BC2 !important; }
body.light-mode .mn-progress-fill.free { background: #C47A30 !important; }
body.light-mode .mn-progress-fill.complete { background: #16a34a !important; }
body.light-mode .mn-progress-bar { background: rgba(0,0,0,0.05) !important; }
body.light-mode .mn-week-header { color: rgba(0,0,0,0.2) !important; }

/* ===================================================================
   Section 110: OPTION D WORKOUT BANNER REDESIGN — Mar 28, 2026
   Compact banner with inline exercise checklist, superset labels,
   muscle watermark, timer pill, volume stat, END/RECAP controls
   =================================================================== */

/* ── 110.1 Banner card — auto height, no decorative layers ── */
.bnr-card {
  height: auto !important;
  min-height: 0 !important;
  padding: 12px 14px !important;
  background: transparent !important;
  border-radius: 0 !important;
  position: relative !important;
  overflow: visible !important;
  box-shadow: none !important;
}
.bnr-bg-photo,
.bnr-photo-scrim,
.bnr-noise,
.bnr-vignette,
.bnr-exercise-names,
.bnr-week-menu-btn,
.bnr-overlay-left,
.bnr-overlay-bottom {
  display: none !important;
}

/* ── 110.2 Top row — info + timer pill + ring ── */
.bnr-top-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: 8px !important;
}
.bnr-primary-info {
  flex: 1 !important;
  min-width: 0 !important;
  padding-right: 0 !important;
}
.bnr-heading-line {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
.bnr-day {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  color: rgba(255,255,255,0.35) !important;
}
.bnr-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.15 !important;
}
.bnr-subtitle-line {
  font-size: 10px !important;
  color: rgba(255,255,255,0.3) !important;
  margin-top: 3px !important;
  gap: 4px !important;
}
#workoutBannerEquip {
  font-weight: 700 !important;
}
body.cable-week #workoutBannerEquip { color: #7EB5E2 !important; }
body.free-week #workoutBannerEquip { color: #E8924A !important; }

/* ── 110.3 Timer — centered, no background ── */
.bnr-timer-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 0 !important;
  border-radius: 0 !important;
  background: none !important;
  border: none !important;
  position: static !important;
  z-index: 2 !important;
  min-height: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  cursor: pointer !important;
}
.bnr-timer-icon-sm {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  stroke: rgba(255,255,255,0.25) !important;
}
.bnr-timer-row.live .bnr-timer-icon-sm { stroke: #22c55e !important; }
.bnr-timer-row.paused .bnr-timer-icon-sm { stroke: #D9B878 !important; }
.bnr-timer-big {
  font-size: 22px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 1px !important;
}
.bnr-timer-row.idle .bnr-timer-big { color: rgba(255,255,255,0.25) !important; }
.bnr-timer-row.live .bnr-timer-big { color: #22c55e !important; }
.bnr-timer-row.paused .bnr-timer-big { color: #D9B878 !important; }
.bnr-timer-hint {
  display: inline !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.2) !important;
  letter-spacing: 0.3px !important;
}
.bnr-timer-controls { display: none !important; }

/* ── 110.4 Progress ring — compact 40px ── */
.bnr-ring-hero {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  background: none !important;
  flex-shrink: 0 !important;
}
.bnr-ring-hero-svg {
  width: 40px !important;
  height: 40px !important;
}
.bnr-ring-hero-bg {
  stroke-width: 3 !important;
  stroke: rgba(255,255,255,0.06) !important;
}
.bnr-ring-hero-fill {
  stroke-width: 3 !important;
  animation: none !important;
}
.bnr-prog-pct {
  font-size: 11px !important;
  font-weight: 800 !important;
}

/* ── 110.5 Muscle strip — below exercise list, centered ── */
.bnr-muscle-strip {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  padding: 6px 0 2px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  display: flex !important;
  justify-content: center !important;
}
.bnr-muscle-strip img {
  width: auto !important;
  height: 60px !important;
  object-fit: contain !important;
  opacity: 0.12 !important;
  filter: none !important;
  max-width: 200px !important;
  max-height: 60px !important;
}

/* ── 110.6 Inline exercise checklist ── */
.bnr-ex-checklist {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  position: relative !important;
  z-index: 1 !important;
}
.bnr-superset-label {
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: rgba(162,100,190,0.55) !important;
  padding: 0 8px !important;
  margin-top: 2px !important;
}
.bnr-ex-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.025) !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}
.bnr-ex-row:active {
  background: rgba(255,255,255,0.06) !important;
}
.bnr-ex-row.superset-a {
  border-left: 2px solid rgba(162,100,190,0.35) !important;
  border-radius: 10px 10px 4px 4px !important;
  margin-bottom: -1px !important;
  padding-bottom: 4px !important;
}
.bnr-ex-row.superset-b {
  border-left: 2px solid rgba(162,100,190,0.35) !important;
  border-radius: 4px 4px 10px 10px !important;
  margin-top: -1px !important;
  padding-top: 4px !important;
}
.bnr-ex-num {
  min-width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.3) !important;
  flex-shrink: 0 !important;
}
.bnr-ex-superset-tag {
  font-size: 8px !important;
  font-weight: 700 !important;
  color: rgba(162,100,190,0.55) !important;
}
.bnr-ex-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.55) !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.bnr-ex-meta {
  font-size: 9px !important;
  color: rgba(255,255,255,0.2) !important;
  flex-shrink: 0 !important;
}
/* Done state */
.bnr-ex-row.done .bnr-ex-num {
  background: rgba(34,197,94,0.12) !important;
  color: #22c55e !important;
}
.bnr-ex-row.done .bnr-ex-name {
  color: rgba(255,255,255,0.2) !important;
  text-decoration: line-through !important;
}

/* ── 110.7 Controls row — hidden (moved to separate area) ── */
.bnr-controls-row {
  display: none !important;
}
.bnr-ctrl-btn {
  height: 28px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
}
.bnr-ctrl-btn:active { transform: scale(0.95) !important; }
.bnr-ctrl-btn.stop {
  background: rgba(239,68,68,0.08) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239,68,68,0.10) !important;
}
.bnr-ctrl-btn.recap {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.35) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}
.bnr-ctrl-spacer { flex: 1 !important; }
.bnr-vol-display {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.3) !important;
}
.bnr-vol-label {
  font-size: 8px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.15) !important;
  letter-spacing: 0.5px !important;
  margin-left: 2px !important;
}

/* ── 110.8 Hide old exercise list + horizontal scroll (exercises now inline in banner) ── */
.bex-section-header,
.banner-exercise-list,
.exercise-overlap-stack,
.exercise-tab-strip,
.exercise-scroll-dots,
.bex-carousel-dots {
  display: none !important;
}

/* ── 110.9 Muscle image in exercise rows ── */
.bnr-ex-muscle {
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  opacity: 0.30 !important;
  object-fit: contain !important;
}

/* ── 110.9b Exercise row two-line layout ── */
.bnr-ex-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
.bnr-ex-sub {
  font-size: 9px !important;
  color: rgba(255,255,255,0.20) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.bnr-ex-timer {
  font-variant-numeric: tabular-nums !important;
}
.bnr-ex-row.done .bnr-ex-sub { color: rgba(255,255,255,0.12) !important; }

/* ── 110.10 Set completion dots ── */
.bnr-ex-sets {
  display: flex !important;
  gap: 3px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.bnr-set-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.10) !important;
}
.bnr-set-dot.set-done {
  background: #22c55e !important;
}

/* ── 110.11 Green (complete) and Gold (complete+PR) row accents ── */
.bnr-ex-row.done .bnr-ex-num {
  background: rgba(34,197,94,0.12) !important;
  color: #22c55e !important;
}
.bnr-ex-row.done.has-pr .bnr-ex-num {
  background: rgba(217,184,120,0.15) !important;
  color: #D9B878 !important;
}
.bnr-ex-row.done.has-pr .bnr-ex-name {
  color: rgba(217,184,120,0.4) !important;
  text-decoration: line-through !important;
}

/* Light mode additions */
body.light-mode .bnr-ex-muscle { opacity: 0.15 !important; }
body.light-mode .bnr-set-dot { background: rgba(0,0,0,0.08) !important; }
body.light-mode .bnr-set-dot.set-done { background: #16a34a !important; }
body.light-mode .bnr-ex-row.done.has-pr .bnr-ex-num {
  background: rgba(160,128,80,0.12) !important;
  color: #8B6914 !important;
}
body.light-mode .bnr-ex-row.done.has-pr .bnr-ex-name {
  color: rgba(139,105,20,0.35) !important;
}

/* ===================================================================
   Section 110 — LIGHT MODE
   =================================================================== */
body.light-mode .bnr-card {
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
body.light-mode .bnr-day { color: rgba(0,0,0,0.35) !important; }
body.light-mode .bnr-title { color: #000 !important; }
body.light-mode .bnr-subtitle-line { color: rgba(0,0,0,0.35) !important; }
body.light-mode.cable-week #workoutBannerEquip { color: #4A8BC2 !important; }
body.light-mode.free-week #workoutBannerEquip { color: #C47A30 !important; }
body.light-mode .bnr-timer-row {
  background: none !important;
  border: none !important;
}
body.light-mode .bnr-timer-row.idle .bnr-timer-big { color: rgba(0,0,0,0.20) !important; }
body.light-mode .bnr-timer-row.live .bnr-timer-big { color: #16a34a !important; }
body.light-mode .bnr-timer-row.paused .bnr-timer-big { color: #8B6914 !important; }
body.light-mode .bnr-timer-icon-sm { stroke: rgba(0,0,0,0.2) !important; }
body.light-mode .bnr-timer-row.live .bnr-timer-icon-sm { stroke: #16a34a !important; }
body.light-mode .bnr-timer-hint { color: rgba(0,0,0,0.15) !important; }
body.light-mode .bnr-ex-sub { color: rgba(0,0,0,0.20) !important; }
body.light-mode .bnr-ex-row.done .bnr-ex-sub { color: rgba(0,0,0,0.10) !important; }
body.light-mode .bnr-muscle-strip img { opacity: 0.08 !important; }
body.light-mode .bnr-ring-hero-bg { stroke: rgba(0,0,0,0.06) !important; }
body.light-mode .bnr-prog-pct { color: #000 !important; }
body.light-mode .bnr-muscle-strip img { opacity: 0.04 !important; }
body.light-mode .bnr-ex-row { background: rgba(0,0,0,0.025) !important; }
body.light-mode .bnr-ex-row:active { background: rgba(0,0,0,0.05) !important; }
body.light-mode .bnr-ex-num { background: rgba(0,0,0,0.04) !important; color: rgba(0,0,0,0.3) !important; }
body.light-mode .bnr-ex-name { color: rgba(0,0,0,0.55) !important; }
body.light-mode .bnr-ex-meta { color: rgba(0,0,0,0.2) !important; }
body.light-mode .bnr-ex-row.done .bnr-ex-num { background: rgba(22,163,74,0.10) !important; color: #16a34a !important; }
body.light-mode .bnr-ex-row.done .bnr-ex-name { color: rgba(0,0,0,0.2) !important; }
body.light-mode .bnr-superset-label { color: rgba(120,70,160,0.5) !important; }
body.light-mode .bnr-ex-row.superset-a,
body.light-mode .bnr-ex-row.superset-b { border-left-color: rgba(120,70,160,0.25) !important; }
body.light-mode .bnr-ex-superset-tag { color: rgba(120,70,160,0.45) !important; }
body.light-mode .bnr-ctrl-btn.stop { background: rgba(239,68,68,0.06) !important; border-color: rgba(239,68,68,0.08) !important; }
body.light-mode .bnr-ctrl-btn.recap { background: rgba(0,0,0,0.03) !important; color: rgba(0,0,0,0.3) !important; border-color: rgba(0,0,0,0.05) !important; }
body.light-mode .bnr-vol-display { color: rgba(0,0,0,0.25) !important; }
body.light-mode .bnr-vol-label { color: rgba(0,0,0,0.15) !important; }

/* ===================================================================
   Section 111: TOOLBAR CLEANUP + REST TOGGLES + DRAG BAR + STREAK
   =================================================================== */

/* ── 111.1 Hide toolbar pills and streak ── */
.cal-compact-row .wm-pill,
.cal-compact-row #streakIndicator {
  display: none !important;
}

/* ── 111.2 Moon toggle buttons below day cells ── */
.wm-moon-toggle {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  padding: 0 !important;
  color: rgba(255,255,255,0.15) !important;
}
.wm-moon-toggle:active {
  transform: scale(0.9) !important;
}
.wm-moon-toggle.active {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.5) !important;
}
.wm-moon-toggle.locked {
  cursor: default !important;
  opacity: 0.4 !important;
}
.wm-moon-toggle.disabled {
  cursor: default !important;
  opacity: 0.15 !important;
}

/* ── 111.3 Friday dashed border vs user rest solid ── */
.day-col.day-rest-friday .wm-day-body {
  border: 1.5px dashed rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.01) !important;
}
.day-col.day-rest-user .wm-day-body {
  background: rgba(255,255,255,0.015) !important;
}
/* Moon icon inside rest day cell body */
.wm-day-moon {
  position: absolute !important;
  bottom: 3px !important;
  right: 3px !important;
  font-size: 8px !important;
  opacity: 0.3 !important;
  z-index: 1 !important;
  line-height: 1 !important;
}

/* ── 111.4 Rest counter bar below week strip ── */
.wm-rest-counter {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 3px 0 1px !important;
}
.wm-rest-label {
  font-size: 7px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.15) !important;
  letter-spacing: 0.5px !important;
}
.wm-rest-dots {
  display: flex !important;
  gap: 3px !important;
}
.wm-rest-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.wm-rest-dot.used {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* ── 111.5 Drag bar handle (replaces chevron) ── */
.wm-expand-handle {
  display: flex !important;
  justify-content: center !important;
  padding: 4px 0 6px !important;
}
.wm-expand-handle svg { display: none !important; }
.wm-drag-bar {
  width: 36px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.12) !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}
.wm-drag-bar:active {
  background: rgba(255,255,255,0.25) !important;
}

/* ── 111.6 Rest toast ── */
.wm-rest-toast {
  position: fixed !important;
  bottom: 100px !important;
  left: 16px !important;
  right: 16px !important;
  background: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 9999 !important;
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  pointer-events: none !important;
}
.wm-rest-toast.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
.wm-rest-toast-icon {
  font-size: 20px !important;
  flex-shrink: 0 !important;
}
.wm-rest-toast-text {
  flex: 1 !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.6) !important;
  line-height: 1.4 !important;
}
.wm-rest-toast-dismiss {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.3) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.05) !important;
  border: none !important;
}

/* ── 111.7 Streak insight card ── */
.ins-streak-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px !important;
  cursor: pointer !important;
}
.ins-streak-icon {
  font-size: 28px !important;
  line-height: 1 !important;
}
.ins-streak-info { flex: 1 !important; }
.ins-streak-num {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1 !important;
}
.ins-streak-label {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.3) !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}
.ins-streak-arrow {
  color: rgba(255,255,255,0.2) !important;
  font-size: 16px !important;
}

/* ===================================================================
   Section 111 — LIGHT MODE
   =================================================================== */
body.light-mode .wm-moon-toggle {
  background: rgba(0,0,0,0.02) !important;
  border-color: rgba(0,0,0,0.06) !important;
  color: rgba(0,0,0,0.12) !important;
}
body.light-mode .wm-moon-toggle.active {
  background: rgba(0,0,0,0.06) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: rgba(0,0,0,0.4) !important;
}
body.light-mode .day-col.day-rest-friday .wm-day-body {
  border-color: rgba(0,0,0,0.08) !important;
  background: rgba(0,0,0,0.01) !important;
}
body.light-mode .day-col.day-rest-user .wm-day-body {
  background: rgba(0,0,0,0.015) !important;
}
body.light-mode .wm-day-moon { opacity: 0.2 !important; }
body.light-mode .wm-rest-label { color: rgba(0,0,0,0.12) !important; }
body.light-mode .wm-rest-dot { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; }
body.light-mode .wm-rest-dot.used { background: rgba(0,0,0,0.08) !important; border-color: rgba(0,0,0,0.12) !important; }
body.light-mode .wm-drag-bar { background: rgba(0,0,0,0.10) !important; }
body.light-mode .wm-rest-toast { background: #fff !important; border-color: rgba(0,0,0,0.08) !important; }
body.light-mode .wm-rest-toast-text { color: rgba(0,0,0,0.5) !important; }
body.light-mode .wm-rest-toast-dismiss { color: rgba(0,0,0,0.3) !important; background: rgba(0,0,0,0.04) !important; }
body.light-mode .ins-streak-num { color: #000 !important; }
body.light-mode .ins-streak-label { color: rgba(0,0,0,0.3) !important; }
body.light-mode .ins-streak-arrow { color: rgba(0,0,0,0.15) !important; }

/* ===================================================================
   Section 112: DURATION POPUP REVAMP — Mar 29, 2026
   CSS-only visual overhaul of existing popup structure
   =================================================================== */

/* ── 112.1 Popup container ── */
.duration-popup {
  background: #111 !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.5) !important;
}
.duration-popup-handle {
  display: flex !important;
  justify-content: center !important;
  padding: 10px 0 4px !important;
  cursor: pointer !important;
}
.duration-popup-handle::after {
  content: '' !important;
  width: 36px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.12) !important;
}
.dur-popup-close-x {
  display: inline-flex !important;
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  color: rgba(255,255,255,0.65) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}
.dur-popup-close-x svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  stroke-width: 2.5 !important;
  fill: none !important;
}
.dur-popup-close-x:active {
  transform: scale(0.92) !important;
  background: rgba(255,255,255,0.12) !important;
}
body.light-mode .dur-popup-close-x {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: rgba(0,0,0,0.65) !important;
}

/* ── 112.2 Hero: timer left, ring right ── */
.dur-popup-hero {
  display: flex !important;
  align-items: center !important;
  padding: 4px 20px 10px !important;
  gap: 16px !important;
  flex-direction: row !important;
}
.dur-hero-time-block {
  flex: 1 !important;
  order: -1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.dur-hero-total {
  font-size: 36px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
  color: #22c55e !important;
}
.dur-hero-label {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.25) !important;
  letter-spacing: 1px !important;
  margin-top: 4px !important;
  text-transform: uppercase !important;
}
.dur-hero-sublabel {
  display: none !important;
}
/* Ring compact */
.dur-hero-ring,
#durHeaderRing {
  width: 56px !important;
  height: 56px !important;
  order: 1 !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  background: none !important;
}
.dur-hero-ring-svg {
  width: 56px !important;
  height: 56px !important;
}
.dur-ring-bg {
  stroke-width: 3.5 !important;
  stroke: rgba(255,255,255,0.06) !important;
}
.dur-ring-fill {
  stroke-width: 3.5 !important;
}
.dur-hero-pct {
  font-size: 14px !important;
  font-weight: 800 !important;
}
.dur-hero-done {
  font-size: 7px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.3) !important;
}
.dur-hero-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Paused state — gold timer */
.duration-popup .dur-hero-total.paused,
.dur-hero-total[style*="gold"],
.dur-hero-total[style*="D9B878"] {
  color: #D9B878 !important;
}

/* ── 112.3 Action buttons — modern pills ── */
.dur-popup-actions {
  display: flex !important;
  gap: 6px !important;
  padding: 0 16px 12px !important;
  position: static !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.dur-action-btn {
  flex: 1 !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
  border: 1px solid transparent !important;
}
.dur-action-btn:active {
  transform: scale(0.96) !important;
}
.dur-action-btn svg {
  width: 14px !important;
  height: 14px !important;
}
.dur-action-pause {
  background: rgba(34,197,94,0.10) !important;
  color: #22c55e !important;
  border-color: rgba(34,197,94,0.12) !important;
}
.dur-action-reset {
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.35) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.dur-action-end {
  background: rgba(239,68,68,0.08) !important;
  color: #ef4444 !important;
  border-color: rgba(239,68,68,0.10) !important;
}

/* ── 112.4 Divider ── */
.dur-popup-divider {
  height: 1px !important;
  background: rgba(255,255,255,0.05) !important;
  margin: 0 16px 4px !important;
  display: block !important;
}

/* ── 112.5 Exercise list items ── */
.duration-popup-list {
  padding: 4px 12px 12px !important;
}
.dur-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.025) !important;
  margin-bottom: 4px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}
.dur-item:active {
  background: rgba(255,255,255,0.05) !important;
}
/* Left column: number badge */
.dur-item-left-col {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
}
.dur-num-big {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.3) !important;
}
.dur-check-icon,
.dur-trophy-icon {
  display: none !important;
}
/* Show checkmark via num text when complete */
.dur-item.complete .dur-item-left-col {
  background: rgba(34,197,94,0.12) !important;
}
.dur-item.complete .dur-num-big {
  color: #22c55e !important;
}
.dur-item.complete.has-pr .dur-item-left-col {
  background: rgba(217,184,120,0.12) !important;
}
.dur-item.complete.has-pr .dur-num-big {
  color: #D9B878 !important;
}
/* Info column */
.dur-item-info {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.dur-item-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.6) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.dur-item.complete .dur-item-name {
  color: rgba(255,255,255,0.25) !important;
  text-decoration: line-through !important;
}
.dur-item-detail {
  font-size: 9px !important;
  color: rgba(255,255,255,0.2) !important;
  margin-top: 1px !important;
}
/* Right column: timer + controls */
.dur-item-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  flex-direction: row !important;
}
.dur-item-time {
  font-size: 13px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  color: rgba(255,255,255,0.3) !important;
}
.dur-item-time.live {
  color: #22c55e !important;
}
.dur-item-status {
  display: none !important;
}
/* Per-exercise control buttons */
.dur-item-ctrls {
  display: flex !important;
  gap: 4px !important;
}
.dur-item-ctrls button {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: rgba(255,255,255,0.3) !important;
}
.dur-item-ctrls button:active {
  transform: scale(0.9) !important;
}
.dur-item-ctrls button.playing,
.dur-item-ctrls button.is-playing {
  background: rgba(34,197,94,0.10) !important;
  border-color: rgba(34,197,94,0.12) !important;
  color: #22c55e !important;
}
.dur-item-ctrls button svg {
  width: 12px !important;
  height: 12px !important;
}
/* Superset styling */
.dur-superset-tag {
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: rgba(162,100,190,0.5) !important;
  padding: 4px 10px 0 !important;
  margin-bottom: -2px !important;
}
.dur-item.superset-first {
  border-left: 2px solid rgba(162,100,190,0.3) !important;
  border-radius: 12px 12px 4px 4px !important;
  margin-bottom: 0 !important;
}
.dur-item.superset-last {
  border-left: 2px solid rgba(162,100,190,0.3) !important;
  border-radius: 4px 4px 12px 12px !important;
}
.dur-superset-letter {
  font-size: 8px !important;
  font-weight: 700 !important;
  color: rgba(162,100,190,0.5) !important;
}

/* ===================================================================
   Section 112 — LIGHT MODE
   =================================================================== */
body.light-mode .duration-popup {
  background: #fff !important;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.1) !important;
}
body.light-mode .duration-popup-handle::after { background: rgba(0,0,0,0.10) !important; }
body.light-mode .dur-hero-total { color: #16a34a !important; }
body.light-mode .dur-hero-label { color: rgba(0,0,0,0.25) !important; }
body.light-mode .dur-ring-bg { stroke: rgba(0,0,0,0.06) !important; }
body.light-mode .dur-hero-pct { color: #000 !important; }
body.light-mode .dur-hero-done { color: rgba(0,0,0,0.3) !important; }
body.light-mode .dur-action-pause { background: rgba(22,163,74,0.08) !important; color: #16a34a !important; border-color: rgba(22,163,74,0.10) !important; }
body.light-mode .dur-action-reset { background: rgba(0,0,0,0.03) !important; color: rgba(0,0,0,0.35) !important; border-color: rgba(0,0,0,0.06) !important; }
body.light-mode .dur-action-end { background: rgba(239,68,68,0.06) !important; color: #ef4444 !important; border-color: rgba(239,68,68,0.08) !important; }
body.light-mode .dur-popup-divider { background: rgba(0,0,0,0.05) !important; }
body.light-mode .dur-item { background: rgba(0,0,0,0.025) !important; }
body.light-mode .dur-item-left-col { background: rgba(0,0,0,0.04) !important; }
body.light-mode .dur-num-big { color: rgba(0,0,0,0.3) !important; }
body.light-mode .dur-item-name { color: rgba(0,0,0,0.55) !important; }
body.light-mode .dur-item.complete .dur-item-name { color: rgba(0,0,0,0.2) !important; }
body.light-mode .dur-item-detail { color: rgba(0,0,0,0.2) !important; }
body.light-mode .dur-item-time { color: rgba(0,0,0,0.25) !important; }
body.light-mode .dur-item-time.live { color: #16a34a !important; }
body.light-mode .dur-item.complete .dur-item-left-col { background: rgba(22,163,74,0.10) !important; }
body.light-mode .dur-item.complete .dur-num-big { color: #16a34a !important; }
body.light-mode .dur-item.complete.has-pr .dur-item-left-col { background: rgba(160,128,80,0.10) !important; }
body.light-mode .dur-item.complete.has-pr .dur-num-big { color: #8B6914 !important; }
body.light-mode .dur-item-ctrls button { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.06) !important; color: rgba(0,0,0,0.3) !important; }

/* ── Section order: Streak → PRs Today → PR History → Rank → Days → Performance ── */
.insight-sections { display: flex !important; flex-direction: column !important; }
#insStreakCard { order: 1 !important; }
#insPrToday { order: 2 !important; }
#insPrGraph2 { order: 3 !important; }
#insDaysCompletedCard { order: 4 !important; }
#insRankCard { order: 5 !important; }
.ins-rank-view-all { order: 5 !important; }
.ins-rank-caret { order: 5 !important; }
#insSpiderCard { order: 6 !important; }
#insDaysCard { order: 7 !important; }
#dividerOverall { order: 0 !important; }

/* ===================================================================
   Section 110: EXPANDED CARD — MOBILE FIT OVERHAUL (Mar 30, 2026)
   Higher-specificity selectors (body prefix) to definitively override
   Sections 105/106. Fixes: safe area, timer overlap, image height,
   dead space, superset compact, exercise header.
   =================================================================== */

/* ── 109.1 Topbar — safe area + compact ── */
body .bex-card-wrapper.bex-inline-open .bex-expanded-topbar {
  padding-top: calc(10px + env(safe-area-inset-top)) !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-bottom: 2px !important;
}
body .bex-card-wrapper.bex-inline-open .bex-expand-btn {
  top: calc(10px + env(safe-area-inset-top)) !important;
}
body .bex-card-wrapper.bex-inline-open .bex-topbar-info {
  font-size: 9px !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 !important;
  margin-bottom: 2px !important;
}
body .bex-card-wrapper.bex-inline-open .bex-topbar-heading {
  font-size: 11px !important;
  margin: 2px 0 !important;
}
body .bex-card-wrapper.bex-inline-open .bex-topbar-dots-row {
  gap: 6px !important;
  margin: 2px 0 4px !important;
}

/* ── 109.2 Timer — kill absolute positioning, inline row ── */
body .bex-card-wrapper.bex-inline-open .bex-ex-timer-compact {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 2px auto !important;
  padding: 4px 10px !important;
  max-width: 360px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: auto !important;
  top: auto !important;
  right: auto !important;
}
body .bex-card-wrapper.bex-inline-open .bex-ex-timer-val {
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
/* "3 SUPERSETS" / "2 SETS" label inside tabs — compact */
body .bex-card-wrapper.bex-inline-open .bex-set-tabs-label {
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  display: block !important;
  text-align: center !important;
  margin-bottom: 4px !important;
  color: rgba(255,255,255,0.40) !important;
}

/* ── 109.3 Exercise image — force 70px (beats Section 106.4 150px) ── */
body .bex-card-wrapper.bex-inline-open .bex-body-hero {
  max-height: 70px !important;
  height: 70px !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 2px 0 !important;
  overflow: hidden !important;
}
body .bex-card-wrapper.bex-inline-open .bex-body-hero img,
body .bex-card-wrapper.bex-inline-open .bex-body-hero video {
  height: 70px !important;
  max-height: 70px !important;
  width: 100% !important;
  object-fit: cover !important;
}
body .bex-card-wrapper.bex-inline-open .bex-rest-pill-inline {
  font-size: 9px !important;
  padding: 2px 8px !important;
  margin: 2px 12px !important;
}

/* ── 109.4 Stepper area — fill remaining space, no dead zone ── */
body .bex-card-wrapper.bex-inline-open .bex-stepper-area {
  flex: 1 !important;
  padding: 0 8px calc(8px + env(safe-area-inset-bottom)) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
}
/* Carousel — tighter padding */
body .bex-card-wrapper.bex-inline-open .bex-set-carousel {
  flex: 1 !important;
  padding: 12px 16px 16px !important;
}
/* Set slides — minimal padding */
body .bex-card-wrapper.bex-inline-open .bex-set-slide.active {
  padding: 4px 0 !important;
}

/* ── 109.5 Exercise header — more compact ── */
body .bex-card-wrapper.bex-inline-open .banner-ex-card {
  padding: 6px 12px !important;
}
body .bex-card-wrapper.bex-inline-open .bex-pill-name {
  font-size: 14px !important;
  line-height: 1.2 !important;
}
body .bex-card-wrapper.bex-inline-open .bex-pill-meta {
  font-size: 10px !important;
  margin-top: 0 !important;
}

/* ── 109.6 Superset A/B — compact to fit both on one screen ── */
body .bex-card-wrapper.bex-inline-open .bex-set-ex-row {
  padding: 4px 0 !important;
  margin: 0 !important;
}
body .bex-card-wrapper.bex-inline-open .bex-set-ex-name {
  font-size: 12px !important;
  margin-bottom: 0 !important;
}
body .bex-card-wrapper.bex-inline-open .bex-set-ex-letter {
  width: 22px !important;
  height: 22px !important;
  font-size: 10px !important;
  flex-shrink: 0 !important;
}
/* VStep — fixed short heights (no clamp) */
body .bex-card-wrapper.bex-inline-open .bex-vstep {
  min-height: auto !important;
}
body .bex-card-wrapper.bex-inline-open .bex-vstep-num {
  height: 36px !important;
  font-size: 22px !important;
}
body .bex-card-wrapper.bex-inline-open .bex-vstep-up,
body .bex-card-wrapper.bex-inline-open .bex-vstep-down {
  height: 30px !important;
  min-height: 30px !important;
}
/* GOAL / PR target — compact single line */
body .bex-card-wrapper.bex-inline-open .bex-pr-target {
  padding: 2px 8px !important;
  font-size: 10px !important;
  margin: 0 !important;
}
/* Input labels — small */
body .bex-card-wrapper.bex-inline-open .bex-input-label {
  font-size: 9px !important;
  margin-bottom: 2px !important;
}
/* Input groups — less gap */
body .bex-card-wrapper.bex-inline-open .bex-set-inputs {
  gap: 6px !important;
}
body .bex-card-wrapper.bex-inline-open .bex-stepper-x {
  font-size: 14px !important;
}
/* Divider between superset exercises */
body .bex-card-wrapper.bex-inline-open .bex-set-ex-divider {
  margin: 2px 0 !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* ── 109.7 Light mode ── */
body.light-mode .bex-card-wrapper.bex-inline-open .bex-set-tabs-label {
  color: rgba(0,0,0,0.40) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-set-ex-divider {
  border-color: rgba(0,0,0,0.06) !important;
}

/* ===================================================================
   Section 111: ENRICHED WEEK SHEET — Combined best of both menus
   =================================================================== */

/* Muscle thumbnail */
.sheet-week-thumb {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  opacity: 0.8 !important;
}
/* Rest icon placeholder */
.sheet-week-rest-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.04) !important;
  flex-shrink: 0 !important;
  color: rgba(255,255,255,0.25) !important;
}
/* Equipment label colored */
.sheet-week-equip.free {
  color: #E8924A !important;
}
.sheet-week-equip.cable {
  color: #7EB5E2 !important;
}
/* Exercise count + time line */
.sheet-week-count {
  font-size: 10px !important;
  color: rgba(255,255,255,0.35) !important;
  margin-top: 1px !important;
}
/* Stats column (right side) */
.sheet-week-stats {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
.sheet-week-frac {
  font-size: 10px !important;
  color: rgba(255,255,255,0.40) !important;
}
.sheet-week-pct {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.60) !important;
}
/* PR badge — small gold */
.sheet-week-pr {
  color: #C9A84C !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}
/* TODAY badge */
.sheet-week-today-badge {
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  color: #000 !important;
  background: #C9A84C !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  margin-left: 6px !important;
}
/* Today row highlight */
.sheet-week-row.is-today {
  border-color: rgba(201,168,76,0.40) !important;
}
/* Rest row dimmed */
.sheet-week-row.is-rest {
  opacity: 0.50 !important;
}
/* Row layout — flex with thumbnail */
.sheet-week-row {
  gap: 10px !important;
}

/* ── 111.1 Light mode ── */
body.light-mode .sheet-week-rest-icon {
  background: rgba(0,0,0,0.04) !important;
  color: rgba(0,0,0,0.25) !important;
}
body.light-mode .sheet-week-count {
  color: rgba(0,0,0,0.35) !important;
}
body.light-mode .sheet-week-frac {
  color: rgba(0,0,0,0.40) !important;
}
body.light-mode .sheet-week-pct {
  color: rgba(0,0,0,0.60) !important;
}
body.light-mode .sheet-week-today-badge {
  color: #fff !important;
  background: #8B6914 !important;
}

/* ===================================================================
   Section 113: EXPANDED CARD — 14-POINT REDESIGN — Mar 30, 2026
   =================================================================== */

/* ── 113.1 Back arrow replaces X close button — positioned ABOVE topbar ── */
.bex-card-wrapper.bex-inline-open .bex-expand-btn {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  z-index: 10001 !important;
  width: 32px !important;
  height: 32px !important;
  background: rgba(255,255,255,0.08) !important;
  border: none !important;
  border-radius: 8px !important;
}
/* Hide X/pencil/chev icons, show back arrow when expanded */
.bex-icon-back { display: none !important; }
.bex-card-wrapper.bex-inline-open .bex-expand-btn .bex-icon-close,
.bex-card-wrapper.bex-inline-open .bex-expand-btn .bex-icon-pencil,
.bex-card-wrapper.bex-inline-open .bex-expand-btn .bex-chev {
  display: none !important;
}
.bex-card-wrapper.bex-inline-open .bex-expand-btn .bex-icon-back {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  stroke: rgba(255,255,255,0.7) !important;
}

/* ── 113.2 Topbar — 3 stacked lines left + timer/ring/pills right ── */
.bex-expanded-topbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  padding: 10px 14px 6px !important;
  position: relative !important;
  gap: 8px !important;
}
.bex-expanded-topbar .bex-topbar-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
  flex: 1 !important;
  padding: 0 0 0 36px !important;
  font-size: 10px !important;
}
/* Hide separators in stacked layout */
.bex-topbar-sep { display: none !important; }
.bex-topbar-equip { display: none !important; }

/* Day name */
.bex-topbar-day {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.55) !important;
  letter-spacing: 1px !important;
}
/* Date */
.bex-topbar-date {
  font-size: 10px !important;
  color: rgba(255,255,255,0.35) !important;
}
/* Workout title */
.bex-topbar-workout {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: 0.5px !important;
}

/* ── 113.3 Timer top-right ── */
.bex-topbar-workout-timer {
  position: absolute !important;
  top: 10px !important;
  right: 46px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #22c55e !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  background: rgba(34,197,94,0.08) !important;
  font-variant-numeric: tabular-nums !important;
}

/* ── 113.4 Ring top-right ── */
.bex-expanded-ring {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  width: 28px !important;
  height: 28px !important;
}
.bex-expanded-ring svg {
  width: 28px !important;
  height: 28px !important;
}
.bex-expanded-ring .bex-ring-pct {
  font-size: 8px !important;
}

/* ── 113.5 Exercise pills right-aligned below timer ── */
.bex-topbar-progress {
  position: absolute !important;
  top: 38px !important;
  right: 10px !important;
  flex-direction: row !important;
  gap: 4px !important;
  padding: 0 !important;
}
.bex-topbar-pill {
  width: 24px !important;
  height: 24px !important;
  font-size: 11px !important;
  border-radius: 50% !important;
}

/* ── 113.6 "3 EXERCISES" heading hidden ── */
.bex-topbar-heading {
  display: none !important;
}

/* ── 113.7 Watch & Learn image — small thumbnail RIGHT of exercise header ── */
.bex-card-wrapper.bex-inline-open .banner-ex-card {
  text-align: left !important;
  position: relative !important;
  padding: 6px 12px !important;
  padding-right: 110px !important;
  min-height: 80px !important;
}
.bex-card-wrapper.bex-inline-open .bex-body-hero {
  width: 90px !important;
  height: 70px !important;
  max-height: 70px !important;
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  left: auto !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  z-index: 1 !important;
}
.bex-card-wrapper.bex-inline-open .bex-body-hero img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* Hide "Watch & Learn" text — just show image with play icon */
.bex-card-wrapper.bex-inline-open .bex-body-hero-hint {
  display: none !important;
}
.bex-card-wrapper.bex-inline-open .bex-body-hero-play {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
  width: 24px !important;
  height: 24px !important;
  background: rgba(0,0,0,0.4) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 0 !important;
}
.bex-card-wrapper.bex-inline-open .bex-body-hero-play svg {
  width: 10px !important;
  height: 10px !important;
}

/* ── 113.8 Muscle icon overlaid on thumbnail bottom-right ── */
.bex-card-wrapper.bex-inline-open .bex-coll-muscle-icon {
  position: absolute !important;
  bottom: 2px !important;
  right: 2px !important;
  width: 24px !important;
  height: 24px !important;
  opacity: 0.6 !important;
  z-index: 2 !important;
  display: block !important;
}

/* ── 113.10 Exercise timer centered larger ── */
.bex-timer-label-row { display: none !important; }
.bex-card-wrapper.bex-inline-open .bex-ex-timer-compact {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 0 2px !important;
  margin: 0 !important;
}
.bex-card-wrapper.bex-inline-open .bex-ex-timer-val {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #22c55e !important;
}
.bex-est-pill {
  font-size: 10px !important;
  color: rgba(255,255,255,0.3) !important;
}

/* ── 113.11 Set tabs — visible as Excel-style tab bar ── */
.bex-card-wrapper.bex-inline-open .bex-set-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 2px 0 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
.bex-card-wrapper.bex-inline-open .bex-set-tabs-label {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,0.30) !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
}
.bex-card-wrapper.bex-inline-open .bex-set-tabs-row {
  display: flex !important;
  gap: 0 !important;
  width: 100% !important;
}
.bex-card-wrapper.bex-inline-open .bex-set-tab {
  flex: 1 !important;
  height: 36px !important;
  border-radius: 10px 10px 0 0 !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.35) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.bex-card-wrapper.bex-inline-open .bex-set-tab.active {
  background: #161616 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.10) !important;
  font-weight: 800 !important;
}
.bex-card-wrapper.bex-inline-open .bex-set-tab.active::after {
  display: none !important;
}
.bex-card-wrapper.bex-inline-open .bex-set-tab.done {
  color: #22c55e !important;
}
.bex-card-wrapper.bex-inline-open .bex-set-tab.done.pr {
  color: #D9B878 !important;
}

/* ── 113.11b Stepper area — shrink to content, no stretching ── */
.bex-card-wrapper.bex-inline-open .bex-stepper-area {
  overflow: visible !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

/* ── 113.12 Set carousel as horizontal swipeable panels ── */
.bex-card-wrapper.bex-inline-open .bex-set-carousel {
  display: block !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  white-space: nowrap !important;
  padding: 0 !important;
  background: transparent !important;
  width: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  scrollbar-width: none !important;
  max-width: none !important;
}
.bex-set-carousel::-webkit-scrollbar { display: none !important; }

.bex-set-track {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  min-width: max-content !important;
}

/* Each set slide as a visible card panel — full width, one at a time */
.bex-card-wrapper.bex-inline-open .bex-set-carousel .bex-set-track .bex-set-slide,
.bex-card-wrapper.bex-inline-open .bex-set-carousel .bex-set-track .bex-set-slide:not(.active),
.bex-card-wrapper.bex-inline-open .bex-set-carousel .bex-set-slide {
  display: flex !important;
  flex-direction: column !important;
  display: inline-block !important;
  vertical-align: top !important;
  white-space: normal !important;
  font-size: 14px !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  scroll-snap-align: start !important;
  flex: none !important;
  scroll-snap-stop: always !important;
  background: #161616 !important;
  border-radius: 0 0 14px 14px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-top: none !important;
  padding: 14px 16px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
/* Track — inline layout for horizontal scroll */
.bex-card-wrapper.bex-inline-open .bex-set-track {
  display: block !important;
  white-space: nowrap !important;
  width: auto !important;
  font-size: 0 !important;
}
/* Remove hidden state — all slides visible now */
.bex-set-slide:not(.active) {
  display: flex !important;
  opacity: 0.7 !important;
  transform: scale(0.96) !important;
}
.bex-set-slide.active {
  opacity: 1 !important;
  transform: scale(1) !important;
}
.bex-set-slide {
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Set label inside each panel card — hidden (shown in tabs area instead) */
.bex-card-wrapper.bex-inline-open .bex-set-label {
  display: none !important;
}

/* ── 113.13 30s Rest text — shown right of tabs ── */
.bex-card-wrapper.bex-inline-open .bex-rest-pill-inline,
.bex-card-wrapper.bex-inline-open .bex-set-tabs .bex-rest-pill-inline {
  display: inline-flex !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.25) !important;
  white-space: nowrap !important;
  padding: 0 8px !important;
  align-self: center !important;
}

/* ===================================================================
   Section 113 — LIGHT MODE
   =================================================================== */
body.light-mode .bex-card-wrapper.bex-inline-open .bex-expand-btn {
  background: rgba(0,0,0,0.04) !important;
}
body.light-mode .bex-topbar-day { color: rgba(0,0,0,0.50) !important; }
body.light-mode .bex-topbar-date { color: rgba(0,0,0,0.35) !important; }
body.light-mode .bex-topbar-workout { color: #000 !important; }
body.light-mode .bex-topbar-workout-timer {
  color: #16a34a !important;
  background: rgba(22,163,74,0.06) !important;
}
body.light-mode .bex-set-slide {
  background: #fff !important;
  border-color: rgba(0,0,0,0.10) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04) !important;
}
body.light-mode .bex-set-label {
  color: rgba(0,0,0,0.45) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-set-tabs-label {
  color: rgba(0,0,0,0.25) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-set-tab {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.06) !important;
  color: rgba(0,0,0,0.30) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-set-tab.active {
  background: #f0f0f0 !important;
  color: #000 !important;
  border-color: rgba(0,0,0,0.10) !important;
}
body.light-mode .bex-card-wrapper.bex-inline-open .bex-rest-pill-inline {
  color: rgba(0,0,0,0.20) !important;
}