*{box-sizing:border-box;margin:0;padding:0;}

:root{
  /* ── Premium dark gold theme ── */
  --bg:#080604;
  --card:rgba(20,17,12,0.96);
  --cardSolid:#14110C;
  --glow-strong:rgba(201,168,76,0.5);
  --surface-elevated:rgba(30,24,16,0.98);
  --glass:rgba(212,180,100,0.055);
  --glassBorder:rgba(212,180,100,0.14);
  --white:#F5EED8;
  --gold:#C9A84C;
  --goldLight:#E2C46E;
  --goldGlow:rgba(201,168,76,0.35);
  --purple:#A894D2;
  --purpleLight:#BDA4D8;
  --purpleGlow:rgba(168,148,210,0.3);
  --blue:#7EB5E2;
  --blueGlow:rgba(126,181,226,0.25);
  --accent-orange:#E8924A;
  --accent-orangeGlow:rgba(232,146,74,0.25);
  --gray:#9A917C;
  --grayLight:#C4B89A;
  --text:#F0E4C4;
  --textInverse:#0A0906;
  --surface1:#181208;
  --surface2:#1E1810;
  --surface3:#261E12;
  --accentGlow:rgba(201,168,76,0.12);
  /* ── Design System Tokens ── */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:24px;

  --text-xs:10px;
  --text-sm:12px;
  --text-base:14px;
  --text-lg:17px;
  --text-xl:22px;
  --text-2xl:28px;

  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;

  /* ── Shadow Scale ── */
  --shadow-sm:0 1px 3px rgba(0,0,0,0.12);
  --shadow-md:0 4px 12px rgba(0,0,0,0.2);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.3);
  --shadow-xl:0 16px 48px rgba(0,0,0,0.4);
  --shadow-glow:0 0 20px var(--goldGlow);

  /* ── Flat-minimal panel tokens (shared with fizzeek-tokens.css) ── */
  --panel:#111;
  --panel-border:rgba(255,255,255,0.08);
  --depth-1:0 1px 2px rgba(0,0,0,0.40);
  --depth-2:0 4px 12px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30);
  --depth-3:0 12px 32px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.35);

  /* ── Blur Scale ── */
  --blur-sm:8px;
  --blur-md:16px;
  --blur-lg:24px;
  --blur-xl:40px;

  /* ── Animation Tokens ── */
  --stagger-delay:0.08s;
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.4,0,0.2,1);
  --duration-fast:0.15s;
  --duration-normal:0.25s;
  --duration-slow:0.4s;

  /* Solid well for inputs */
  --well:#12121c;
  --wellBorder:rgba(255,255,255,0.11);
  /* Solid elevated surface for cards */
  --elevated:#1c1c2c;
  --elevatedBorder:rgba(255,255,255,0.09);
  /* Interactive surface */
  --interactive:#222234;
  --interactiveBorder:rgba(255,255,255,0.11);
  --interactiveHover:#2a2a3e;
}

/* Light Mode */
body.light-mode{
  --bg:#EEEEF2;
  --card:rgba(255,255,255,0.95);
  --cardSolid:#FFFFFF;
  --glass:rgba(0,0,0,0.03);
  --glassBorder:rgba(0,0,0,0.1);
  --white:#1a1a2e;
  --gray:#6B7280;
  --grayLight:#4B5563;
  --text:#1a1a2e;
  --textInverse:#EEEEF2;
  --surface1:#FFFFFF;
  --surface2:#F5F5F8;
  --surface3:#EBEBF0;
  --accentGlow:rgba(212,148,90,0.08);
  --well:#FFFFFF;
  --wellBorder:rgba(0,0,0,0.14);
  --elevated:#F3F3F7;
  --elevatedBorder:rgba(0,0,0,0.1);
  --interactive:#E6E6ED;
  --interactiveBorder:rgba(0,0,0,0.13);
  --interactiveHover:#DDDDE4;

  /* ── Flat-minimal panel tokens (light) ── */
  --panel:#fff;
  --panel-border:rgba(0,0,0,0.08);
  --depth-1:0 1px 2px rgba(0,0,0,0.06);
  --depth-2:0 4px 12px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --depth-3:0 12px 32px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
}

body.light-mode{
  background:var(--bg);
  color:var(--text);
}

body.light-mode header{
  background:#eeeef2;
  border-bottom-color:rgba(0,0,0,0.65);
}
body.light-mode header::after{
  background:linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.08) 50%, transparent 100%);
}
body.light-mode .back{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.08);
}
body.light-mode .back:active{
  background:rgba(0,0,0,0.08);
}
body.light-mode .back svg{
  stroke:#8B7A5E;
  filter:none;
}
body.light-mode .header-stats{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.08);
}
body.light-mode .header-stats:active{
  background:rgba(0,0,0,0.08);
}
body.light-mode .header-score{
  color:#8B7A5E;
  filter:none;
}

body.light-mode .logo span{
  color:var(--text);
}
body.light-mode .logo img{
  filter:invert(1) brightness(0.3);
}

body.light-mode .week-strip{
  background:rgba(0,0,0,0.025);
  border-color:rgba(0,0,0,0.06);
}
body.light-mode .week-strip.cable{
  border-color:transparent;
}
body.light-mode .week-strip.free{
  border-color:transparent;
}

body.light-mode .day-col{
  background:rgba(0,0,0,0.055);
}

/* Light mode selected day - black outline by default (not complete) */
body.light-mode .day-col.selected{
  background:rgba(0,0,0,0.08);
  border-color:rgba(0,0,0,0.65);
  box-shadow:0 0 8px rgba(0,0,0,0.12);
}
/* Light mode selected + complete */
body.light-mode .day-col.selected.completed{
  background:rgba(212,148,90,0.12);
  border-color:var(--accent-orange);
  box-shadow:0 0 8px rgba(212,148,90,0.2);
}
body.light-mode .day-col.selected.completed[data-week-type="cable"],
body.light-mode .day-col.selected.completed.cable{
  background:rgba(106,168,232,0.12);
  border-color:var(--blue);
  box-shadow:0 0 8px rgba(106,168,232,0.2);
}

body.light-mode .day-col.selected .day-letter,
body.light-mode .day-col.selected .day-number{
  color:var(--text);
}

body.light-mode .workout-date{
  color:var(--text);
}

body.light-mode .legend-item{
  color:#4B5563;
}

body.light-mode .ex-card{
  background:var(--surface1);
  border-color:rgba(0,0,0,0.06);
}

body.light-mode .ex-card.expanded{
  background:transparent;
  border:none;
  box-shadow:none;
}

body.light-mode .ex-name{
  color:var(--text);
}

body.light-mode .ex-number-circle{
  background:var(--text);
  border-color:var(--text);
  color:var(--textInverse);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

body.light-mode .ex-card.expanded .ex-number-circle{
  background:var(--text);
  color:var(--textInverse);
}

body.light-mode .group-number-circle{
  border-color:rgba(0,0,0,0.8);
  color:var(--text);
}

body.light-mode .special-set-group.has-expanded .group-number-circle{
  background:var(--text);
  color:var(--textInverse);
}

body.light-mode .set-input{
  background:var(--well);
  border:1.5px solid var(--wellBorder);
  color:var(--text);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 1px 2px rgba(0,0,0,0.06) inset;
}

body.light-mode .set-input.free{
  background:rgba(212,148,90,0.12);
  border:1.5px solid rgba(212,148,90,0.3);
}

body.light-mode .set-input.cable{
  background:rgba(106,168,232,0.12);
  border:1.5px solid rgba(106,168,232,0.3);
}

body.light-mode .set-input.zero-value{
  color:rgba(0,0,0,0.45);
  border:1.5px dashed rgba(0,0,0,0.12);
  background:rgba(0,0,0,0.03);
  box-shadow:none;
}

body.light-mode .set-x{
  color:var(--text);
}

body.light-mode .stepper-btn{
  background:var(--interactive);
  color:rgba(0,0,0,0.75);
  border:1.5px solid var(--interactiveBorder);
}

body.light-mode .rest-btn{
  background:var(--interactive);
  border:1.5px solid var(--interactiveBorder);
  color:var(--text);
}

body.light-mode .timer-btn{
  background:var(--interactive);
  border:1.5px solid var(--interactiveBorder);
  color:var(--text);
}

body.light-mode .pr-section{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.65);
}

body.light-mode .pr-value{
  color:rgba(0,0,0,0.7);
}
body.light-mode .superset-pr-inline{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.07);
}
body.light-mode .superset-pr-label{
  color:rgba(0,0,0,0.65);
  background:rgba(0,0,0,0.05);
}
body.light-mode .superset-pr-date{
  color:rgba(0,0,0,0.55);
}

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

body.light-mode .set-block{
  border-bottom-color:rgba(0,0,0,0.08);
}

body.light-mode .card-bottom-row{
  border-top-color:rgba(0,0,0,0.08);
}

body.light-mode .unit-toggle-btn{
  background:rgba(0,0,0,0.05);
}

body.light-mode .unit-option.active{
  background:rgba(0,0,0,0.12);
  color:var(--text);
}

body.light-mode .workout-progress-bar{
  background:#fff;
  border-top-color:rgba(0,0,0,0.15);
}

body.light-mode .progress-bar-track{
  background:rgba(0,0,0,0.1);
}

body.light-mode .special-set-box{
  border-color:rgba(0,0,0,0.65);
}

body.light-mode .special-set-corner-label{
  color:rgba(0,0,0,0.7);
}
body.light-mode .special-set-corner-label.superset{
  color:var(--purple);
}

body.light-mode .nav-btn{
  border:none;
  background:transparent;
  color:rgba(0,0,0,0.6);
}
body.light-mode .nav-btn:active{
  background:rgba(0,0,0,0.05);
}
body.light-mode .nav-btn svg{
  stroke:rgba(0,0,0,0.55);
}
body.light-mode .nav-btn.month-btn{
  color:var(--text);
}

/* Light mode today button when selected */
body.light-mode .nav-btn.today-btn.is-today{
  background:rgba(139,122,94,0.1);
  border:none;
}
body.light-mode .nav-btn.today-btn.is-today svg{
  stroke:#8B7A5E;
}
body.light-mode .nav-btn.today-btn.is-today span,
body.light-mode .nav-btn.today-btn.is-today{
  color:transparent;
  font-size:0;
}

/* Light mode calendar button active */
body.light-mode .nav-btn.icon-only.active{
  background:rgba(139,122,94,0.1);
  border:none;
}
body.light-mode .nav-btn.icon-only.active svg{
  stroke:#8B7A5E;
}

body.light-mode .picker-box{
  background:#ffffff;
  border-color:rgba(0,0,0,0.65);
}

body.light-mode .picker-header{
  color:var(--text);
}

body.light-mode .picker-item{
  background:rgba(0,0,0,0.05);
  color:var(--text);
}
/* Light mode active month/year - bold black */
body.light-mode .picker-item.active{
  background:rgba(0,0,0,0.15);
  border-color:#000;
  color:#000;
  font-weight:700;
  box-shadow:0 0 10px rgba(0,0,0,0.2);
}

body.light-mode .video-btn{
  background:rgba(0,0,0,0.08);
  border-color:rgba(0,0,0,0.15);
}

body.light-mode .video-btn svg{
  stroke:var(--text);
}

body.light-mode .hero-image{
  background:#000000;
  border-color:rgba(0,0,0,0.55);
}

body.light-mode .workout-count-hint{
  color:#000000;
}

body.light-mode .status-circle.not-complete{
  border-color:rgba(0,0,0,0.8);
  color:rgba(0,0,0,0.8);
}

body.light-mode .status-circle.pr-only::before{
  background:linear-gradient(to bottom, rgba(0,0,0,0.8) 50%, #D4BC8A 50%) border-box;
}

html,body{
  background:var(--bg);
  color:var(--white);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',sans-serif;
  min-height:100dvh;
  min-height:-webkit-fill-available;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Main app container */
.app-container{
  display:block;
  min-height:auto;
}
.fixed-top-area{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--bg);
}
.scrollable-content{
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(80px + env(safe-area-inset-bottom));
}

/* Compact header/toolbar in calendar view */
body.calendar-view-active header{
  padding-bottom:4px;
}
body.calendar-view-active .month-row-btns .nav-btn.icon-only,
body.calendar-view-active .month-row-btns .nav-btn.today-btn{
  min-height:40px;
}
body.calendar-view-active .month-label-row{
  margin-bottom:2px;
}
body.calendar-view-active .month-row{
  margin-bottom:2px;
}
body.calendar-view-active .calendar-legend{
  padding:2px 16px;
  margin-bottom:2px;
}

/* ==================== HEADER ==================== */
header{
  padding:0 12px;
  padding-top:max(10px, env(safe-area-inset-top, 10px));
  padding-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(14,14,24,0.94);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  position:relative;
  z-index:100;
}
header::after{
  content:'';
  position:absolute;
  bottom:0;left:20px;right:20px;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(230,209,163,0.20) 50%, transparent 100%);
}

.back{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  transition:background 0.2s ease, transform 0.15s ease;
  flex-shrink:0;
}
.back:active{
  transform:scale(0.92);
  background:rgba(255,255,255,0.1);
}
.back svg{
  width:24px;
  height:24px;
  stroke:#E6D1A3;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  filter:drop-shadow(0 0 4px rgba(230,209,163,0.25));
}

.logo{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
}
.logo img{
  width:36px;
  height:36px;
  border-radius:8px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}
.logo span{
  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--white);
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

/* ═══ PHASE DROPDOWN ═══ */
.phase-dropdown-wrap{position:relative;}
.phase-dropdown{display:flex;align-items:center;gap:4px;cursor:pointer;}
.phase-dd-arrow{color:var(--gold, #C9A84C);opacity:0.5;transition:transform 0.3s ease, opacity 0.2s;}
.phase-dropdown-wrap.open .phase-dd-arrow{transform:rotate(180deg);opacity:0.8;}
.phase-dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;right:-40px;background:rgba(14,12,8,0.97);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border:1px solid rgba(230,209,163,0.1);border-radius:14px;padding:6px;z-index:200;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all 0.25s cubic-bezier(0.16,1,0.3,1);box-shadow:0 12px 40px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(230,209,163,0.05);}
.phase-dropdown-wrap.open .phase-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);}
.phase-dd-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;color:#fff;font-size:12px;font-weight:600;letter-spacing:0.5px;transition:background 0.15s;}
.phase-dd-item:active{background:rgba(255,255,255,0.08);}
.phase-dd-item.active{background:rgba(230,209,163,0.1);}
.phase-dd-icon{width:22px;height:22px;border-radius:5px;object-fit:contain;}

.header-stats{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  padding:5px 10px 5px 8px;
  border-radius:14px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  transition:background 0.2s ease, transform 0.15s ease;
  flex-shrink:0;
}
.header-stats:active{
  transform:scale(0.96);
  background:rgba(255,255,255,0.1);
}
.header-rank-icon{
  width:34px;
  height:34px;
  object-fit:contain;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,0.3));
  cursor:pointer;
}
.header-rank-icon.rank-pulse{
  animation:rankPulse 5s ease infinite;
}
@keyframes rankPulse{
  0%{ transform:scale(1); filter:drop-shadow(0 1px 4px rgba(0,0,0,0.3)); }
  4%{ transform:scale(1.25); filter:drop-shadow(0 0 10px rgba(230,209,163,0.6)); }
  8%{ transform:scale(0.95); filter:drop-shadow(0 1px 4px rgba(0,0,0,0.3)); }
  12%{ transform:scale(1.1); filter:drop-shadow(0 0 6px rgba(230,209,163,0.35)); }
  16%{ transform:scale(1); filter:drop-shadow(0 1px 4px rgba(0,0,0,0.3)); }
  100%{ transform:scale(1); filter:drop-shadow(0 1px 4px rgba(0,0,0,0.3)); }
}
.header-score-col{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1px;
}
.header-score-row{
  display:flex;
  align-items:center;
  gap:0;
}
.header-score{
  font-size:17px;
  font-weight:800;
  color:#E6D1A3;
  line-height:1;
  letter-spacing:0.5px;
  filter:drop-shadow(0 0 5px rgba(230,209,163,0.3));
}
.header-days{
  font-size:10px;
  font-weight:600;
  color:rgba(255,255,255,0.4);
  line-height:1;
  letter-spacing:0.5px;
}
body.light-mode .header-days{
  color:rgba(0,0,0,0.35);
}
/* Stats graph icon */
.header-graph-icon{
  width:16px;
  height:16px;
  color:rgba(230,209,163,0.35);
  flex-shrink:0;
  margin-left:2px;
}
body.light-mode .header-graph-icon{
  color:rgba(140,125,95,0.35);
}
.rest-zzz-inline{
  width:20px;
  height:20px;
  color:#E6D1A3;
  vertical-align:-4px;
  display:inline;
}
body.light-mode .rest-zzz-inline{
  color:#8C7D5F;
}

/* ==================== WEEK NAV ==================== */
.week-nav{
  padding:0 16px;
  margin-bottom:0;
}

.month-label-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin-bottom:4px;
}
.month-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin-bottom:6px;
  width:100%;
}
.month-arrow{
  padding:10px;
  min-width:44px;
  min-height:44px;
}
.month-arrow svg{
  width:16px !important;
  height:16px !important;
}
.month-row-spacer{
  flex:1;
}
.month-row-btns{
  display:flex;
  align-items:center;
  gap:0;
  background:transparent;
  border-radius:0;
  padding:0;
  width:100%;
  justify-content:space-evenly;
}
.month-row-btns .nav-btn.icon-only{
  flex:1;
  width:auto;
  min-width:48px;
  min-height:48px;
}
.month-row-btns .nav-btn.today-btn{
  flex:1;
  min-width:48px;
  min-height:48px;
}
.month-row-btns .month-btn-sep{
  width:1px;
  height:24px;
  background:rgba(255,255,255,0.1);
  flex-shrink:0;
}
.month-row-btns .nav-btn svg{
  width:22px !important;
  height:22px !important;
}
.month-btn-sep{
  width:1px;
  height:18px;
  background:rgba(255,255,255,0.1);
  flex-shrink:0;
}
body.light-mode .month-row-btns{
  background:transparent;
}
body.light-mode .month-btn-sep{
  background:rgba(0,0,0,0.1);
}

/* ---- Shared nav button base ---- */
.nav-btn{
  padding:10px;
  border-radius:12px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,0.45);
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.3px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:all .2s cubic-bezier(0.25, 1, 0.5, 1);
  -webkit-tap-highlight-color:transparent;
  position:relative;
  overflow:hidden;
  min-width:44px;
  min-height:44px;
}
.nav-btn:active{
  transform:scale(0.9);
  background:rgba(255,255,255,0.06);
}
.nav-btn svg{
  width:18px;height:18px;
  stroke:rgba(255,255,255,0.5);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  transition:stroke 0.2s ease;
}

/* Month / date label - clean text, no box */
.nav-btn.month-btn{
  font-size:16px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--white);
  padding:8px 4px;
  background:transparent;
  border:none;
}

/* Icon-only buttons (calendar, legend) */
.nav-btn.icon-only{
  padding:0;
  min-width:auto;
  border-radius:10px;
  width:36px;
  height:36px;
  flex-shrink:0;
  background:transparent;
  border:none;
}
/* PR Trophy button — gold tint */
.nav-btn.pr-trophy-btn svg{
  stroke:rgba(255,255,255,0.55);
  opacity:1;
  width:18px;
  height:18px;
}
.nav-btn.pr-trophy-btn:active svg{
  opacity:1;
  stroke:rgba(255,255,255,0.8);
}
body.light-mode .nav-btn.pr-trophy-btn svg{
  stroke:rgba(0,0,0,0.45);
  opacity:1;
}
body.light-mode .nav-btn.pr-trophy-btn:active svg{
  stroke:rgba(0,0,0,0.7);
}
/* Rest Zzz button — subtle */
.nav-btn.rest-zzz-btn svg{
  width:18px;
  height:18px;
  stroke:rgba(255,255,255,0.45);
  color:rgba(255,255,255,0.45);
}
.nav-btn.rest-zzz-btn:active svg{
  stroke:rgba(255,255,255,0.8);
}
body.light-mode .nav-btn.rest-zzz-btn svg{
  stroke:rgba(140,125,95,0.45);
  color:rgba(140,125,95,0.45);
}
body.light-mode .nav-btn.rest-zzz-btn:active svg{
  stroke:rgba(140,125,95,0.8);
}
/* Active rest state — zzz glows */
body.rest-day-active .nav-btn.rest-zzz-btn{
  background:rgba(160,140,200,0.12);
}
body.rest-day-active .nav-btn.rest-zzz-btn svg{
  stroke:rgba(180,160,220,0.9);
  color:rgba(180,160,220,0.9);
}
/* Mode toggle button — sun/moon swap */
.nav-btn.mode-toggle-btn svg{
  stroke:rgba(255,255,255,0.4);
  width:17px;
  height:17px;
}
.nav-btn.mode-toggle-btn:active svg{
  stroke:rgba(255,255,255,0.8);
}
body.light-mode .nav-btn.mode-toggle-btn svg{
  stroke:rgba(200,170,60,0.6);
}
body.light-mode .nav-btn.mode-toggle-btn:active svg{
  stroke:rgba(200,170,60,0.9);
}
/* Calendar button active state */
.nav-btn.icon-only.active{
  background:rgba(230,209,163,0.1);
  border:none;
}
.nav-btn.icon-only.active svg{
  stroke:#E6D1A3;
}

/* Today button - icon only */
.nav-btn.today-btn{
  padding:0;
  width:36px;
  height:36px;
  flex-shrink:0;
  background:transparent;
  border:none;
  font-size:0;
  color:transparent;
}
.nav-btn.today-btn svg{
  stroke:rgba(255,255,255,0.5);
  fill:none;
  stroke-width:2;
  width:18px;height:18px;
}
/* Today button when today IS selected - gold glow */
.nav-btn.today-btn.is-today{
  background:rgba(230,209,163,0.1);
  border:none;
}
.nav-btn.today-btn.is-today svg{
  stroke:#E6D1A3;
}
.nav-btn.today-btn.is-today span,
.nav-btn.today-btn.is-today{
  color:transparent;
  font-size:0;
}

/* Legend / help button */
.nav-btn.legend-btn{
  padding:0;
  width:44px;
  height:44px;
  border-radius:12px;
  flex-shrink:0;
  background:transparent;
  border:none;
  display:none;
}
/* Show legend button only in calendar view */
body.calendar-view-active .nav-btn.legend-btn{
  display:flex;
}
.nav-btn.legend-btn svg{
  stroke:rgba(255,255,255,0.4);
  width:18px;
  height:18px;
}

/* Legend Modal */
.legend-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  z-index:1000;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:0;
}
.legend-modal.visible{
  display:flex;
  animation:legendFadeIn 0.2s ease;
}
@keyframes legendFadeIn{ from{opacity:0} to{opacity:1} }
.legend-modal-content{
  background:var(--surface1);
  border-radius:24px 24px 0 0;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  width:100%;
  max-width:420px;
  max-height:85vh;
  overflow-y:auto;
  border:1px solid rgba(255,255,255,0.08);
  border-bottom:none;
  box-shadow:0 -8px 40px rgba(0,0,0,0.4);
  animation:legendSlideUp 0.25s cubic-bezier(0.25,1,0.5,1);
}
@keyframes legendSlideUp{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}
.legend-modal-handle{
  width:36px;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.15);
  margin:0 auto 16px;
}
.legend-modal-title{
  font-size:20px;
  font-weight:700;
  color:rgba(255,255,255,0.9);
  text-align:center;
  margin-bottom:22px;
}
.legend-section{
  margin-bottom:22px;
}
.legend-section:last-of-type{
  margin-bottom:14px;
}
.legend-section-title{
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,0.3);
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.legend-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 0;
}
.legend-row-label{
  font-size:15px;
  color:rgba(255,255,255,0.7);
  flex:1;
}
.legend-row-detail{
  font-size:13px;
  color:rgba(255,255,255,0.35);
  padding:2px 0 10px;
  line-height:1.5;
}
.legend-row-detail strong{
  color:rgba(255,255,255,0.6);
}
/* Indicator shapes */
.legend-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0;
}
.legend-dot.green{ background:var(--accent-orange); }
.legend-dot.blue{ background:var(--blue); }
.legend-dot.gold{ background:transparent; border:2px solid var(--gold); box-sizing:border-box; }
.legend-dot.gold-fill{ background:var(--gold); }
.legend-dot.white{ background:rgba(255,255,255,0.7); }
.legend-dot.purple{ background:var(--purple); }
/* Tab preview */
.legend-tab-preview{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:8px;
  font-size:11px;
  font-weight:600;
  flex-shrink:0;
}
.legend-tab-preview.active{
  background:rgba(212,148,90,0.15);
  border:1px solid rgba(212,148,90,0.3);
  color:var(--accent-orange);
}
.legend-tab-preview.inactive{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.4);
}
/* Timer preview */
.legend-timer-preview{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,0.7);
  flex-shrink:0;
}
.legend-timer-preview svg{
  width:11px; height:11px;
  stroke:rgba(255,255,255,0.7);
  stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Rest pill */
.legend-rest-pill{
  width:18px;
  height:40px;
  border-radius:9px;
  border:1.5px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.04);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.legend-rest-pill span{
  font-size:6px;
  font-weight:800;
  color:rgba(255,255,255,0.35);
  line-height:1.3;
}
/* Legend numbered circle previews */
.legend-num-circle{
  width:24px; height:24px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  flex-shrink:0;
  border:2px solid transparent;
}
.legend-num-circle.default{
  background:#ffffff;
  color:rgba(0,0,0,0.7);
  opacity:0.45;
}
.legend-num-circle.selected{
  background:#ffffff;
  color:rgba(0,0,0,0.7);
  opacity:1;
  transform:scale(1.2);
}
.legend-num-circle.completed-green{
  background:var(--accent-orange);
  color:rgba(0,0,0,0.8);
  border-color:var(--accent-orange);
}
.legend-num-circle.completed-blue{
  background:var(--blue);
  color:rgba(0,0,0,0.8);
  border-color:var(--blue);
}
.legend-num-circle.pr{
  background:#ffffff;
  color:rgba(0,0,0,0.7);
  border-color:var(--gold);
}
.legend-num-circle.completed-pr{
  background:var(--accent-orange);
  color:rgba(0,0,0,0.8);
  border-color:var(--gold);
}
.legend-footer-circle{
  width:28px; height:28px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:600;
  flex-shrink:0;
  border:1.5px solid rgba(255,255,255,0.08);
  backdrop-filter:none;
}
.legend-footer-circle.dim{
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.15);
}
.legend-footer-circle.active{
  width:34px; height:34px;
  background:#ffffff;
  border-color:rgba(255,255,255,0.95);
  color:rgba(0,0,0,0.85);
  font-size:14px;
  font-weight:700;
  position:relative;
}
.legend-footer-circle.active::after{
  content:'';
  position:absolute;
  bottom:-5px;
  left:50%;
  transform:translateX(-50%);
  width:14px;
  height:2px;
  border-radius:2px;
  #ffffff;
}
.legend-footer-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 0;
}
/* Set type pills */
.legend-sets-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:4px 0;
}
.legend-set-pill{
  padding:4px 10px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--purple);
  background:rgba(162,100,190,0.08);
  border:1px solid rgba(162,100,190,0.2);
}
/* Close button */
.legend-modal-close{
  width:100%;
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.8);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.15s ease;
}
.legend-modal-close:active{
  background:rgba(255,255,255,0.15);
}

/* Light mode legend */
body.light-mode .legend-modal{ background:rgba(0,0,0,0.3); }
body.light-mode .legend-modal-content{
  background:#fff;
  border-color:rgba(0,0,0,0.06);
  box-shadow:0 -8px 40px rgba(0,0,0,0.1);
}
body.light-mode .legend-modal-handle{ background:rgba(0,0,0,0.12); }
body.light-mode .legend-modal-title{ color:rgba(0,0,0,0.85); }
body.light-mode .legend-section-title{ color:rgba(0,0,0,0.7); border-bottom-color:rgba(0,0,0,0.15); }
body.light-mode .legend-row-label{ color:rgba(0,0,0,0.6); }
body.light-mode .legend-row-detail{ color:rgba(0,0,0,0.55); }
body.light-mode .legend-row-detail strong{ color:rgba(0,0,0,0.6); }
body.light-mode .legend-dot.white{ background:rgba(0,0,0,0.5); }
body.light-mode .legend-tab-preview.active{
  background:rgba(212,148,90,0.1);
  border-color:rgba(212,148,90,0.25);
  color:#b06e32;
}
body.light-mode .legend-tab-preview.inactive{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.06);
  color:rgba(0,0,0,0.35);
}
body.light-mode .legend-timer-preview{ color:rgba(0,0,0,0.7); }
body.light-mode .legend-timer-preview svg{ stroke:rgba(0,0,0,0.5); }
body.light-mode .legend-rest-pill{
  border-color:rgba(0,0,0,0.15);
  background:rgba(0,0,0,0.03);
}
body.light-mode .legend-rest-pill span{ color:rgba(0,0,0,0.7); }
body.light-mode .legend-set-pill{
  color:#7b1fa2;
  background:rgba(162,100,190,0.06);
  border-color:rgba(162,100,190,0.18);
}
body.light-mode .legend-num-circle.default{
  background:rgba(0,0,0,0.75);
  color:rgba(255,255,255,0.9);
}
body.light-mode .legend-num-circle.selected{
  background:rgba(0,0,0,0.75);
  color:rgba(255,255,255,0.9);
}
body.light-mode .legend-footer-circle.dim{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.08);
  color:rgba(0,0,0,0.15);
}
body.light-mode .legend-footer-circle.active{
  background:rgba(0,0,0,0.85);
  border-color:rgba(0,0,0,0.85);
  color:rgba(255,255,255,0.9);
}
body.light-mode .legend-footer-circle.active::after{
  background:rgba(0,0,0,0.7);
}
body.light-mode .legend-modal-close{
  background:rgba(0,0,0,0.05);
  border-color:rgba(0,0,0,0.06);
  color:rgba(0,0,0,0.7);
}
/* ==================== WEEK STRIP ==================== */
.week-strip{
  position:relative;
  display:flex;
  align-items:center;
  background:transparent;
  border:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-radius:0;
  padding:8px 6px;
  min-height:0;
  overflow-x:visible;
  overflow-y:hidden;
  touch-action:pan-x;
  overscroll-behavior:contain;
  -webkit-user-select:none;
  user-select:none;
}
.week-strip.cable{
  border-color:transparent;
}
.week-strip.free{
  border-color:transparent;
}
.week-strip.week-complete.cable{
  box-shadow:none;
}
.week-strip.week-complete.free{
  box-shadow:none;
}

/* Number shift hint animation - subtle shake every 20 seconds */
.week-strip.shift-hint .day-number{
  animation:numberShift 0.3s ease-in-out;
}
@keyframes numberShift{
  0%, 100%{transform:translateX(0);}
  50%{transform:translateX(-1px);}
}

/* Hide week arrows completely */
.scroll-arrow{
  display:none;
}

/* Hide week arrows in month view */
.week-strip.month-view{
  padding:10px 12px;
  border-color:rgba(255,255,255,0.7) !important;
  box-shadow:none !important;
}

/* Portrait month view - white rectangle around calendar */
.week-strip.month-view .days-row{
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;
  padding:8px 10px;
  gap:0;
}

/* Compact calendar cells in portrait month view */
body.calendar-view-active .day-col{
  padding:6px 2px 4px;
  border-radius:10px;
}
body.calendar-view-active .day-number{
  font-size:16px;
  margin-bottom:3px;
}
body.calendar-view-active .day-letter{
  font-size:9px;
  margin-bottom:2px;
}
body.calendar-view-active .day-bar{
  height:3px;
  margin:0 auto 2px;
}
body.calendar-view-active .day-type-dot{
  width:4px;
  height:4px;
}
body.calendar-view-active .week-strip.month-view{
  padding:6px 10px;
}

/* Days container with horizontal scroll */
.days-row{
  display:flex;
  gap:5px;
  flex:1;
  padding:0 2px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.days-row::-webkit-scrollbar{display:none;}

/* Week wrapper for snap scrolling */
.week-group{
  display:flex;
  gap:5px;
  flex:0 0 100%;
  min-width:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

.day-col{
  flex:1;
  text-align:center;
  cursor:pointer;
  padding:12px 2px 10px;
  border-radius:14px;
  background:var(--surface1);
  border:1.5px solid transparent;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .15s ease;
  position:relative;
}
.day-col:active{
  transform:scale(0.95);
}
/* Selected day - default white outline (not complete) */
.day-col.selected{
  background:var(--surface2);
  border-color:rgba(255,255,255,0.4);
  box-shadow:0 0 10px rgba(255,255,255,0.08);
}
/* Selected day + Complete - green/blue outline */
.day-col.selected.completed{
  background:rgba(212,148,90,0.1);
  border-color:var(--accent-orange);
  box-shadow:0 0 10px rgba(212,148,90,0.25);
}
.day-col.selected.completed[data-week-type="cable"],
.day-col.selected.completed.cable{
  background:rgba(106,168,232,0.1);
  border-color:var(--blue);
  box-shadow:0 0 10px rgba(106,168,232,0.25);
}
.day-col.rest{opacity:.5;}

.day-letter{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.8px;
  margin-bottom:4px;
  opacity:0.8;
}

.day-number{
  font-size:18px;
  font-weight:800;
  margin-bottom:6px;
  color:var(--white);
  line-height:1;
}

/* Day letter colors based on week type */
.day-col[data-week-type="free"] .day-letter{color:var(--accent-orange);}
.day-col[data-week-type="cable"] .day-letter{color:var(--blue);}

/* Day number stays white until completed */
.day-col[data-week-type="free"] .day-number{color:var(--white);}
.day-col[data-week-type="cable"] .day-number{color:var(--white);}

/* Completed day - number turns green/blue */
.day-col.completed[data-week-type="free"] .day-number,
.day-col.completed.free .day-number{
  color:var(--accent-orange);
}
.day-col.completed[data-week-type="cable"] .day-number,
.day-col.completed.cable .day-number{
  color:var(--blue);
}

/* Selected day text stays white */
.day-col.selected .day-letter{color:var(--white);}
.day-col.selected .day-number{
  color:var(--white);
}

/* Selected AND completed - show the completion color */
.day-col.selected.completed[data-week-type="free"] .day-number,
.day-col.selected.completed.free .day-number{
  color:var(--accent-orange);
}
.day-col.selected.completed[data-week-type="cable"] .day-number,
.day-col.selected.completed.cable .day-number{
  color:var(--blue);
}

/* Completed day glow */
.day-col.completed .day-number{
  text-shadow:0 0 6px var(--accent-orangeGlow);
}
.day-col.completed[data-week-type="cable"] .day-number,
.day-col.completed.cable .day-number{
  text-shadow:0 0 6px var(--blueGlow);
}

.day-bar{
  width:calc(100% - 8px);
  height:4px;
  margin:0 auto 4px;
  border-radius:2px;
  background:rgba(255,255,255,0.1);
  overflow:hidden;
}
body.light-mode .day-bar{
  background:rgba(0,0,0,0.15);
}
.day-col.rest .day-bar{display:none;}
.day-bar-fill{
  height:100%;
  border-radius:2px;
  transition:width .4s cubic-bezier(0.25, 1, 0.5, 1);
  background:rgba(255,255,255,0.45);
}
.day-bar-fill.free{
  background:var(--accent-orange);
  box-shadow:0 0 5px rgba(212,148,90,0.5);
}
.day-bar-fill.cable{
  background:var(--blue);
  box-shadow:0 0 5px rgba(126,181,226,0.5);
}

/* Color indicator dot under progress bar */
.day-type-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  margin:0 auto;
  transition:background .3s ease, box-shadow .3s ease;
  background:rgba(255,255,255,0.12);
  box-shadow:none;
}
/* Always show week-type color */
.day-type-dot.free{
  background:var(--accent-orange);
  box-shadow:0 0 6px var(--accent-orangeGlow);
}
.day-type-dot.cable{
  background:var(--blue);
  box-shadow:0 0 6px var(--blueGlow);
}
/* Month/calendar view: always show color */
body.month-view-active .day-type-dot.free{
  background:var(--accent-orange);
  box-shadow:0 0 6px var(--accent-orangeGlow);
}
body.month-view-active .day-type-dot.cable{
  background:var(--blue);
  box-shadow:0 0 6px var(--blueGlow);
}
.day-type-dot.has-pr{
  outline:1.5px solid #D4BC8A;
  outline-offset:1px;
  box-shadow:0 0 6px rgba(212,188,138,0.5);
}
.day-type-dot.free.has-pr{
  box-shadow:0 0 6px var(--accent-orangeGlow), 0 0 8px rgba(212,188,138,0.5);
}
.day-type-dot.cable.has-pr{
  box-shadow:0 0 6px var(--blueGlow), 0 0 8px rgba(212,188,138,0.5);
}
.day-col.rest .day-type-dot{display:none;}
body.light-mode .day-type-dot{
  background:rgba(0,0,0,0.20);
}

/* Workout label for landscape calendar */

/* ── Timer running indicators ────────────────────────── */
@keyframes timer-indicator-flash{
  0%, 100%{ opacity:0; }
  15%, 85%{ opacity:1; }
}
.day-timer-indicator{
  position:absolute;
  top:3px;
  right:3px;
  width:12px;
  height:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:timer-indicator-flash 3s ease-in-out infinite;
  pointer-events:none;
  z-index:5;
}
.day-timer-indicator svg{
  width:10px;
  height:10px;
  stroke:var(--accent-orange);
  stroke-width:2.5;
  fill:none;
}
.day-timer-indicator.cable svg{
  stroke:var(--blue);
}
body.light-mode .day-timer-indicator svg{
  stroke:rgba(60,175,130,0.8);
}
body.light-mode .day-timer-indicator.cable svg{
  stroke:rgba(70,140,230,0.8);
}
/* Mini card timer indicator */
.mini-timer-indicator{
  position:absolute;
  top:2px;
  right:2px;
  width:12px;
  height:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:timer-indicator-flash 3s ease-in-out infinite;
  pointer-events:none;
  z-index:10;
}
.mini-timer-indicator svg{
  width:10px;
  height:10px;
  stroke:var(--accent-orange);
  stroke-width:2.5;
  fill:none;
}
.mini-timer-indicator.cable svg{
  stroke:var(--blue);
}
body.light-mode .mini-timer-indicator svg{
  stroke:rgba(60,175,130,0.8);
}
body.light-mode .mini-timer-indicator.cable svg{
  stroke:rgba(70,140,230,0.8);
}
.workout-label{
  font-size:8px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:2px;
}

/* ==================== HERO IMAGE SECTION ==================== */
/* Hero overlap stack - hidden, replaced by workout banner */
.workout-header-row{
  display:none !important;
}
/* Connector lines - hidden (connected removed layers) */
.connector-lines-svg{
  display:none !important;
}
/* Exercise circles - hidden, replaced by mini cards */
.exercise-circles-row{
  display:none !important;
}

/* ==================== DAY PANEL (unified week strip + banner) ==================== */
.day-panel{
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.07);
  border-bottom:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-radius:24px 24px 0 0;
  margin:0 -10px 0;
  box-shadow:none;
  padding-bottom:4px;
}
.day-panel-divider{
  display:none;
}
body.light-mode .day-panel{
  background:rgba(255,255,255,0.45);
  border-color:rgba(0,0,0,0.06);
  border-bottom:none;
  box-shadow:none;
}
body.light-mode .day-panel-divider{
  background:linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.04) 20%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.04) 80%, transparent 100%);
}
/* banner/divider/streak in calendar-view-active — now shown (overridden above) */

/* Banner card stack carousel */
.workout-banner{
  padding:0;
  margin:0;
  position:relative;
  overflow:visible;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.light-mode .workout-banner{
  background:transparent;
  border:none;
  box-shadow:none;
}
.workout-banner-carousel{
  position:relative;
  will-change:transform;
  z-index:3;
  margin:0;
}
.workout-banner-carousel.animating{
  transition:transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.2s ease;
}
/* Center card: solid surface hero panel */
.workout-banner-slide-center{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:14px 16px 10px;
  background:rgba(255,255,255,0.035);
  border:1.5px solid rgba(255,255,255,0.07);
  border-radius:18px;
  box-shadow:0 4px 24px rgba(0,0,0,0.15);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  position:relative;
  margin:0 8px;
  overflow:hidden;
  min-height:0;
}
.workout-banner-slide-center::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,168,76,0.2), transparent);
  pointer-events:none;z-index:5;
}
body.light-mode .workout-banner-slide-center{
  background:rgba(255,255,255,0.65);
  border:1.5px solid rgba(0,0,0,0.08);
  box-shadow:0 4px 24px rgba(0,0,0,0.06);
}

/* Header row: single line with day · workout · equip + image */
.banner-header-row{
  display:flex;
  align-items:stretch;
  gap:14px;
  position:relative;
  z-index:2;
}
.banner-header-left{
  flex:1;
  min-width:0;
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
}
/* Side peek nav — chevron arrows overlaying banner edges */
.workout-banner-peek{
  display:none !important;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:10;
  -webkit-tap-highlight-color:transparent;
  transition:opacity 0.15s ease;
  background:rgba(255,255,255,0.04);
  border-radius:10px;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.workout-banner-peek:active{ opacity:0.5; }
.workout-banner-peek.prev{ left:2px; }
.workout-banner-peek.next{ right:2px; }
.workout-banner-peek svg{
  width:16px;
  height:16px;
  stroke:rgba(255,255,255,0.35);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
.workout-banner-peek img{ display:none; }
.workout-banner-peek .peek-label{ display:none; }
body.light-mode .workout-banner-peek svg{
  stroke:rgba(0,0,0,0.25);
}

/* ==================== WORKOUT BANNER ==================== */
.workout-banner-img{
  position:relative;
  right:auto;
  top:auto;
  transform:none;
  width:88px;
  min-height:88px;
  align-self:stretch;
  border-radius:16px;
  background:rgba(255,255,255,0.04);
  border:1.5px solid rgba(255,255,255,0.08);
  overflow:hidden;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:opacity 0.3s ease;
  margin:0;
  z-index:2;
  pointer-events:auto;
}
.workout-banner-img:active{
  opacity:0.6;
}
.workout-banner-img img{
  width:85%;
  height:85%;
  object-fit:contain;
  opacity:0.5;
  filter:none;
}
.workout-banner-day{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:2.5px;
  color:rgba(255,255,255,0.35);
  margin-bottom:0;
  white-space:nowrap;
}
.workout-banner-title{
  font-size:26px;
  font-weight:800;
  letter-spacing:-0.3px;
  color:var(--white);
  line-height:1.1;
  position:relative;
  z-index:2;
  white-space:nowrap;
}
.workout-banner-title.free{ color:var(--accent-orange); text-shadow:0 0 40px rgba(212,148,90,0.15); }
.workout-banner-title.cable{ color:var(--blue); text-shadow:0 0 40px rgba(126,181,226,0.15); }
/* Stats row: completed count + estimated time */
.banner-stats-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:2px;
}
.banner-stat{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.4);
  letter-spacing:0.2px;
}
.banner-stat svg{
  width:13px;
  height:13px;
  flex-shrink:0;
  opacity:0.6;
}
.banner-stat-dot{
  font-size:10px;
  color:rgba(255,255,255,0.2);
  line-height:1;
}
body.light-mode .banner-stat{
  color:rgba(0,0,0,0.65);
}
body.light-mode .banner-stat svg{
  opacity:0.5;
}
body.light-mode .banner-stat-dot{
  color:rgba(0,0,0,0.15);
}
.workout-banner-equip{
  display:none;
}
/* PR Popup */
.pr-popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  z-index:520;
  display:none;
  align-items:center;
  justify-content:center;
  animation:prPopFadeIn 0.15s ease;
}
.pr-popup-overlay.open{ display:flex; }
@keyframes prPopFadeIn{ from{opacity:0} to{opacity:1} }
.pr-popup{
  background:#14141c;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:none;
  border-radius:0;
  padding:calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  width:100%;
  max-width:none;
  height:100dvh;
  max-height:100dvh;
  overflow-y:auto;
  animation:prPopSlide 0.2s ease-out;
}
@keyframes prPopSlide{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.pr-popup-title{
  font-size:18px;
  font-weight:700;
  color:rgba(255,255,255,0.9);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:10px;
}
.pr-popup-title svg{
  width:22px;height:22px;
  fill:var(--gold);
}
.pr-popup-subtitle{
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,0.35);
  margin-bottom:12px;
  letter-spacing:-0.1px;
}
body.light-mode .pr-popup-subtitle{ color:rgba(0,0,0,0.55); }
.pr-popup-empty{
  font-size:14px;
  color:rgba(255,255,255,0.35);
  text-align:center;
  padding:20px 0;
}
.pr-popup-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,0.05);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.1s ease;
  border-radius:10px;
  padding:12px 12px;
  margin:0 -8px;
  gap:0;
}
.pr-popup-item:active{ background:rgba(255,255,255,0.06); }
.pr-popup-item:last-child{ border-bottom:none; }
.pr-popup-badge{
  width:32px;
  height:32px;
  min-width:32px;
  border-radius:10px;
  background:rgba(255,255,255,0.05);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,0.3);
  border:1px solid rgba(255,255,255,0.04);
  margin-right:10px;
  transition:all 0.2s ease;
  font-variant-numeric:tabular-nums;
}
.pr-popup-badge.completed{
  background:rgba(212,148,90,0.14);
  color:rgba(212,148,90,0.9);
  border-color:rgba(212,148,90,0.12);
}
.pr-popup-badge.completed.cable{
  background:rgba(126,181,226,0.14);
  color:rgba(126,181,226,0.9);
  border-color:rgba(126,181,226,0.12);
}
.pr-popup-badge.pr{
  box-shadow:inset 0 0 0 1.5px #D4BC8A;
}
.pr-popup-name{
  font-size:15px;
  font-weight:600;
  color:rgba(255,255,255,0.7);
  flex:1;
  min-width:0;
}
.pr-popup-val{
  font-size:16px;
  font-weight:700;
  color:var(--gold);
  white-space:nowrap;
  margin-left:12px;
}
body.light-mode .pr-popup{
  background:#ffffff;
  border-color:rgba(0,0,0,0.08);
}
body.light-mode .pr-popup-title{ color:rgba(0,0,0,0.7); }
body.light-mode .pr-popup-empty{ color:rgba(0,0,0,0.7); }
body.light-mode .pr-popup-name{ color:rgba(0,0,0,0.6); }
body.light-mode .pr-popup-item{ border-bottom-color:rgba(0,0,0,0.55); }
body.light-mode .pr-popup-item:active{ background:rgba(0,0,0,0.07); }

/* PR count */
.banner-pr-count{
  font-size:12px;
  font-weight:800;
  line-height:1;
  display:flex;
  align-items:center;
  gap:4px;
  color:rgba(255,255,255,0.25);
}
.banner-pr-count .banner-pr-trophy{
  width:14px;
  height:14px;
  flex-shrink:0;
  fill:rgba(255,255,255,0.2);
}
.banner-pr-count.has-pr{
  color:var(--gold);
}
.banner-pr-count.has-pr .banner-pr-trophy{
  fill:var(--gold);
}
body.light-mode .banner-pr-count{
  color:rgba(0,0,0,0.55);
}
body.light-mode .banner-pr-count .banner-pr-trophy{
  fill:rgba(0,0,0,0.15);
}
body.light-mode .banner-pr-count.has-pr{
  color:var(--gold);
}
body.light-mode .banner-pr-count.has-pr .banner-pr-trophy{
  fill:var(--gold);
}
.banner-pr-slot:empty + .banner-stat-checklist{
  margin-left:auto;
}
body.light-mode .workout-banner-day{ color:rgba(0,0,0,0.7); }
body.light-mode .workout-banner-title{ color:#000; }
body.light-mode .workout-banner-title.free{ color:var(--accent-orange); text-shadow:none; }
body.light-mode .workout-banner-title.cable{ color:var(--blue); text-shadow:none; }

/* ── Banner Exercise List View ───────────────────────────── */
.banner-exercise-list{
  margin-top:6px;
  position:relative;
}
.banner-ex-items{
  display:flex;
  flex-direction:column;
  gap:12px;
}
/* ── Rich Exercise Card ───────────────────────────── */
.banner-ex-card{
  display:flex;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.15s ease, transform 0.1s ease, border-color 0.2s ease;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  position:relative;
  overflow:hidden;
}
.banner-ex-card:active{
  transform:scale(0.98);
  background:rgba(255,255,255,0.06);
}
.banner-ex-card.is-active{
  background:rgba(255,255,255,0.055);
  border-color:rgba(255,255,255,0.1);
}
/* Left: image stack */
.bex-img-col{
  width:72px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
}
.bex-hero-img{
  width:72px;
  height:72px;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  position:relative;
}
.bex-hero-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.6;
}
.banner-ex-card.is-active .bex-hero-img img{
  opacity:0.85;
}
.banner-ex-card.ex-done .bex-hero-img img{
  opacity:0.65;
}
/* Play button overlay */
.bex-play-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(0,0,0,0.5);
  display:grid;
  place-items:center;
  pointer-events:none;
}
.bex-play-btn svg{
  width:12px;
  height:12px;
  margin-left:1px;
}
body.light-mode .bex-play-btn{
  background:rgba(0,0,0,0.4);
}
/* Muscle group badge — same size as hero */
.bex-muscle-badge{
  width:72px;
  height:72px;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}
.bex-muscle-badge img{
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0.55;
}
/* Zoom per focus area — crop to highlighted region */
/* Focus zoom removed — full body shown at contain */
.banner-ex-card.is-active .bex-muscle-badge img{
  opacity:0.7;
}
/* Right: info column */
.bex-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  justify-content:center;
}
/* Top row: name + status */
.bex-top-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.bex-name{
  flex:1;
  min-width:0;
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,0.65);
  line-height:1.3;
  transition:color 0.2s ease;
}
.banner-ex-card.is-active .bex-name{
  color:rgba(255,255,255,0.92);
}
.banner-ex-card.ex-done .bex-name{
  color:rgba(255,255,255,0.55);
}
/* Status badge (number circle) */
.bex-status{
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  color:rgba(255,255,255,0.7);
  background:transparent;
  border:2px solid rgba(255,255,255,0.55);
  flex-shrink:0;
  position:relative;
}
/* Number always visible */
.bex-num{
  position:relative;
  z-index:1;
  line-height:1;
}
/* Stats chips row */
.bex-chips{
  display:flex;
  flex-wrap:wrap;
  gap:4px 6px;
  align-items:center;
}
.bex-chip{
  display:flex;
  align-items:center;
  gap:3px;
  font-size:10px;
  font-weight:600;
  color:rgba(255,255,255,0.35);
  line-height:1;
}
.bex-chip svg{
  width:12px;
  height:12px;
  opacity:0.4;
  flex-shrink:0;
}
.bex-chip-sep{
  width:1px;
  height:12px;
  background:rgba(255,255,255,0.08);
}
.banner-ex-card.is-active .bex-chip{
  color:rgba(255,255,255,0.55);
}
.banner-ex-card.is-active .bex-chip svg{
  opacity:0.65;
}
/* PR trophy chip */
.bex-chip.has-pr{
  color:var(--gold);
}
.bex-chip.has-pr svg{
  opacity:0.8;
  fill:var(--gold);
}
/* Set type tag */
.bex-type-tag{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.4px;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:6px;
  color:rgba(212,188,138,0.5);
  background:rgba(212,188,138,0.07);
  line-height:1;
}
.bex-type-tag.bex-tag-superset{
  color:rgba(162,100,190,0.85);
  background:rgba(162,100,190,0.1);
}
/* Completion progress bar at bottom of card */
.bex-progress{
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.04);
  overflow:hidden;
  margin-top:4px;
}
.bex-progress-fill{
  height:100%;
  border-radius:2px;
  background:var(--accent-orange);
  transition:width 0.4s ease;
}
.bex-progress-fill.cable{
  background:var(--blue);
}
/* Day's best set */
.bex-day-best{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:2px;
}
.bex-day-best-label{
  font-size:9px;
  font-weight:700;
  color:rgba(255,255,255,0.2);
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.bex-day-best-value{
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.45);
  font-variant-numeric:tabular-nums;
}
body.light-mode .bex-day-best-label{ color:rgba(0,0,0,0.55); }
body.light-mode .bex-day-best-value{ color:rgba(0,0,0,0.65); }
/* Completion count */
.bex-completion{
  font-size:10px;
  font-weight:700;
  color:rgba(212,148,90,0.6);
  letter-spacing:0.2px;
}
.bex-completion.empty{
  color:rgba(255,255,255,0.15);
}
.banner-ex-card.ex-done .bex-completion{
  color:rgba(212,148,90,0.8);
}
.bex-completion.cable{
  color:rgba(126,181,226,0.6);
}
.bex-completion.cable.empty{
  color:rgba(255,255,255,0.15);
}
.banner-ex-card.ex-done .bex-completion.cable{
  color:rgba(126,181,226,0.8);
}
body.light-mode .bex-completion{
  color:rgba(60,160,115,0.7);
}
body.light-mode .bex-completion.empty{
  color:rgba(0,0,0,0.12);
}
body.light-mode .bex-completion.cable{
  color:rgba(80,136,212,0.7);
}
body.light-mode .bex-completion.cable.empty{
  color:rgba(0,0,0,0.12);
}
/* Chevron */
.bex-chevron{
  display:none;
}
.banner-ex-card.is-active .bex-chevron{
  color:rgba(255,255,255,0.3);
}
/* Footer with rest day */
.banner-ex-footer{
  display:none;
}
/* Rest day pill row — centered at bottom of banner card */
.banner-rest-row{
  display:none !important;
}

/* Banner progress bar */
.banner-progress-bar{
  height:3px;
  background:rgba(255,255,255,0.06);
  border-radius:2px;
  margin:10px 0 0;
  overflow:hidden;
}
.banner-progress-fill{
  height:100%;
  background:var(--accent-orange);
  border-radius:2px;
  width:0%;
  transition:width 0.5s ease;
}
.banner-progress-fill.cable{ background:var(--blue); }
body.light-mode .banner-progress-bar{ background:rgba(0,0,0,0.05); }

/* Start workout button */
.banner-start-btn{
  width:100%;
  padding:12px;
  margin-top:10px;
  border:none;
  border-radius:14px;
  background:rgba(212,148,90,0.12);
  color:var(--accent-orange);
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.5px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.15s;
}
.banner-start-btn:active{
  background:rgba(212,148,90,0.2);
  transform:scale(0.98);
}
.banner-start-btn svg{
  width:18px; height:18px;
  fill:var(--accent-orange); stroke:none;
}
.banner-start-btn.cable{
  background:rgba(126,181,226,0.12);
  color:var(--blue);
}
.banner-start-btn.cable svg{ fill:var(--blue); }
body.light-mode .banner-start-btn{
  background:rgba(60,175,130,0.08);
  color:rgba(60,175,130,0.9);
}
body.light-mode .banner-start-btn svg{ fill:rgba(60,175,130,0.9); }
/* Hide start btn on rest days */
body.rest-day-active .banner-start-btn{ display:none; }
body.rest-day-active .banner-progress-bar{ display:none; }

/* Unit toggle positioned at header level */
.sc-unit-header{
  margin-left:auto;
}

/* Unit toggle below stepper arrows */
.sc-unit-stepper{
  margin:3px auto 0 !important;
  border-radius:6px !important;
  transform:none !important;
  width:fit-content;
}
.sc-unit-stepper .sc-unit-opt{
  padding:2px 6px !important;
  font-size:8px !important;
}
/* ── Light mode ── */
body.light-mode .banner-ex-card{
  background:rgba(0,0,0,0.02);
  border-color:rgba(0,0,0,0.04);
}
body.light-mode .banner-ex-card:active{
  background:rgba(0,0,0,0.04);
}
body.light-mode .banner-ex-card.is-active{
  background:rgba(0,0,0,0.035);
  border-color:rgba(0,0,0,0.07);
}
body.light-mode .bex-hero-img{
  background:rgba(0,0,0,0.02);
  border-color:rgba(0,0,0,0.05);
}
body.light-mode .bex-hero-img img{
  opacity:0.55;
}
body.light-mode .banner-ex-card.is-active .bex-hero-img img{
  opacity:0.85;
}
body.light-mode .bex-muscle-badge{
  background:rgba(0,0,0,0.02);
  border-color:rgba(0,0,0,0.05);
}
body.light-mode .bex-muscle-badge img{
  opacity:0.5;
}
body.light-mode .bex-name{
  color:rgba(0,0,0,0.65);
}
body.light-mode .banner-ex-card.is-active .bex-name{
  color:rgba(0,0,0,0.85);
}
body.light-mode .bex-status{
  border-color:rgba(0,0,0,0.65);
  color:rgba(0,0,0,0.6);
}
body.light-mode .bex-chip{
  color:rgba(0,0,0,0.22);
}
body.light-mode .banner-ex-card.is-active .bex-chip{
  color:rgba(0,0,0,0.38);
}
body.light-mode .bex-chip-sep{
  background:rgba(0,0,0,0.06);
}
body.light-mode .bex-type-tag{
  color:rgba(140,125,95,0.55);
  background:rgba(140,125,95,0.07);
}
body.light-mode .bex-type-tag.bex-tag-superset{
  color:rgba(140,80,170,0.75);
  background:rgba(140,80,170,0.08);
}
body.light-mode .bex-progress{
  background:rgba(0,0,0,0.04);
}
body.light-mode .bex-chevron{
  color:rgba(0,0,0,0.08);
}
body.light-mode .banner-ex-card.is-active .bex-chevron{
  color:rgba(0,0,0,0.25);
}

/* ── Exercise Detail Screen (full-screen slide-up) ─────── */
.ex-detail-screen{
  position:fixed;
  inset:0;
  z-index:510;
  background:#0C0C12;
  transform:translateY(100%);
  transition:transform 0.35s cubic-bezier(0.32,0.72,0,1);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  will-change:transform;
}
.ex-detail-screen.open{
  transform:translateY(0);
}
body.light-mode .ex-detail-screen{
  background:var(--bg);
}
.ex-detail-header{
  display:none;
}
/* Nav row: circles + arrows in one line */
/* Top bar: date + close button */
.ex-detail-top-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 16px 0;
  padding-top:calc(12px + env(safe-area-inset-top));
  min-height:48px;
  background:var(--surface1);
  position:relative;
}
body.light-mode .ex-detail-top-bar{
  background:var(--bg);
}
.ex-detail-top-bar .ex-detail-context{
  padding:0 !important;
  background:transparent !important;
  padding-right:52px !important;
}
.ex-detail-top-bar .ex-detail-close{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  margin-top:calc(env(safe-area-inset-top) / 2);
}
.ex-detail-nav-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px 16px 6px;
  background:var(--surface1);
  position:sticky;
  top:0;
  z-index:20;
}
body.light-mode .ex-detail-nav-row{
  background:var(--bg);
}
/* Summary button in detail screen body */
.ex-detail-summary-btn{
  display:flex;
  width:calc(100% - 32px);
  margin:16px auto 24px;
  padding:14px 20px;
  border-radius:14px;
  border:1.5px solid rgba(212,148,90,0.2);
  background:rgba(212,148,90,0.06);
  color:rgba(212,148,90,0.9);
  font-family:inherit;font-size:14px;font-weight:700;
  letter-spacing:0.3px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.15s;
  align-items:center;justify-content:center;gap:8px;
}
.ex-detail-summary-btn:active{
  transform:scale(0.98);
  background:rgba(212,148,90,0.12);
}
.ex-detail-summary-btn svg{
  width:18px;height:18px;stroke:rgba(212,148,90,0.8);
}
body.light-mode .ex-detail-summary-btn{
  border-color:rgba(34,160,94,0.15);
  background:rgba(34,160,94,0.04);
  color:rgba(34,160,94,0.8);
}
body.light-mode .ex-detail-summary-btn svg{
  stroke:rgba(34,160,94,0.7);
}

.ex-detail-close{
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.5);
  font-size:22px;
  cursor:pointer;
  display:grid;
  place-items:center;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.15s ease;
  flex-shrink:0;
}
.ex-detail-close:active{
  background:rgba(255,255,255,0.12);
  color:#fff;
  transform:translateY(-50%) scale(0.9);
}
body.light-mode .ex-detail-close{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.06);
  color:rgba(0,0,0,0.35);
}
body.light-mode .ex-detail-close:active{
  background:rgba(0,0,0,0.08);
  color:rgba(0,0,0,0.7);
}
.ex-detail-circles{
  display:flex;
  align-items:center;
  gap:4px;
}
.ex-detail-circle-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ex-detail-circle{
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.04);
  border:1.5px solid rgba(255,255,255,0.1);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.ex-detail-circle:active{ transform:scale(0.9); }
.ex-detail-circle.active{
  width:36px; height:36px; font-size:14px;
  color:#0C0C12; background:#fff; border:none;
  box-shadow:0 2px 12px rgba(255,255,255,0.15);
}
.ex-detail-circle-wrap.complete .ex-detail-circle:not(.active){
  background:rgba(212,148,90,0.08);
  border-color:rgba(212,148,90,0.25);
  color:rgba(212,148,90,0.8);
}
.ex-detail-circle-wrap.complete .ex-detail-circle.active{
  background:var(--accent-orange); color:#0C0C12;
  box-shadow:0 2px 12px rgba(212,148,90,0.25);
}
.ex-detail-circle-wrap.has-pr .ex-detail-circle:not(.active){
  border-color:rgba(212,188,138,0.3);
}
.edc-indicators{ display:none; }
/* Light mode circles */
body.light-mode .ex-detail-circle{
  color:rgba(0,0,0,0.25); border-color:rgba(0,0,0,0.65); background:rgba(0,0,0,0.02);
}
body.light-mode .ex-detail-circle.active{
  color:#fff; background:rgba(0,0,0,0.85); border:none;
  box-shadow:0 2px 12px rgba(0,0,0,0.12);
}
body.light-mode .ex-detail-circle-wrap.complete .ex-detail-circle:not(.active){
  background:rgba(34,160,94,0.06); border-color:rgba(34,160,94,0.2); color:rgba(34,160,94,0.65);
}
body.light-mode .ex-detail-circle-wrap.complete .ex-detail-circle.active{
  background:rgba(34,160,94,0.85); color:#fff;
}
body.light-mode .ex-detail-circle-wrap.has-pr .ex-detail-circle:not(.active){
  border-color:rgba(180,140,50,0.25);
}
/* ── Image Expand Overlay ── */
.image-expand-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,0.92);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity 0.3s ease;
}
.image-expand-overlay.visible{
  opacity:1;
}
.image-expand-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  position:relative;
}
.image-expand-content img{
  max-width:80vw;
  max-height:60vh;
  object-fit:contain;
  border-radius:16px;
}
.image-expand-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-60%);
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(0,0,0,0.5);
  border:2px solid rgba(255,255,255,0.3);
  display:grid;
  place-items:center;
}
.image-expand-play svg{
  width:24px;
  height:24px;
  margin-left:2px;
}
.image-expand-label{
  font-size:16px;
  font-weight:700;
  color:rgba(255,255,255,0.85);
}
.image-expand-sub{
  font-size:13px;
  color:rgba(255,255,255,0.4);
  letter-spacing:0.5px;
}
.image-expand-close{
  position:absolute;
  top:16px;
  right:16px;
  top:calc(16px + env(safe-area-inset-top));
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:none;
  color:rgba(255,255,255,0.6);
  font-size:22px;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.image-expand-close:active{
  background:rgba(255,255,255,0.2);
  color:#fff;
}
/* Date + workout context line */
.ex-detail-context{
  text-align:center;
  padding:2px 16px 0;
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,0.35);
  letter-spacing:1.5px;
  text-transform:uppercase;
  background:var(--surface1);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
}
.ctx-date, .ctx-type, .ctx-week, .ctx-sep{
  font-size:11px;
  font-weight:700;
  letter-spacing:1.5px;
  color:rgba(255,255,255,0.35);
}
.ctx-sep{
  margin:0 6px;
  opacity:0.3;
}
body.light-mode .ex-detail-context{
  color:rgba(0,0,0,0.6);
  background:var(--bg);
}
body.light-mode .ctx-date,
body.light-mode .ctx-type,
body.light-mode .ctx-week,
body.light-mode .ctx-sep{
  color:rgba(0,0,0,0.6);
}
/* Exercise name */
.ex-detail-name{
  display:none;
}
body.light-mode .ex-detail-name{
  display:none;
}
.ex-detail-subtitle{
  display:none;
}
body.light-mode .ex-detail-subtitle{
  display:none;
}
.ex-detail-body{
  padding:0 0 calc(80px + env(safe-area-inset-bottom));
}
/* Hide redundant elements inside the rendered card when in detail screen */
#exDetailScreen .ex-number-circle-wrapper{ display:none !important; }
#exDetailScreen .ex-name-row{ display:none !important; }
#exDetailScreen .ex-meta-centered{ display:none !important; }
#exDetailScreen .ex-media-strip{ padding-top:0 !important; }
#exDetailScreen .special-set-corner-label{ display:none !important; }
/* Exercise counter pill in header */
.ex-detail-counter{
  font-size:var(--text-sm);
  font-weight:700;
  color:rgba(255,255,255,0.45);
  background:var(--surface3);
  padding:6px 14px;
  border-radius:var(--radius-sm);
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
body.light-mode .ex-detail-counter{
  color:rgba(0,0,0,0.35);
  background:rgba(0,0,0,0.04);
}

/* Floating Workout Summary Modal */
.workout-summary-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  z-index:520;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s ease;
}
.workout-summary-overlay.open{
  opacity:1;
  pointer-events:auto;
}
.workout-summary-modal{
  position:fixed;
  inset:0;
  transform:translateY(100%);
  width:100%;
  max-width:none;
  height:100dvh;
  max-height:100dvh;
  background:#121218;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:none;
  border-radius:0;
  z-index:521;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s ease, transform 0.35s cubic-bezier(0.25,1,0.5,1);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:none;
}
.workout-summary-modal.open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
body.light-mode .workout-summary-modal{
  background:#ffffff;
}
.workout-summary-modal-header{
  padding:calc(20px + env(safe-area-inset-top)) 20px 16px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
body.light-mode .workout-summary-modal-header{
  border-bottom-color:rgba(0,0,0,0.05);
}
.workout-summary-modal-title{
  font-size:20px;
  font-weight:700;
  color:rgba(255,255,255,0.85);
}
body.light-mode .workout-summary-modal-title{
  color:rgba(0,0,0,0.8);
}
.workout-summary-modal-subtitle{
  display:none;
}
body.light-mode .workout-summary-modal-subtitle{
  color:rgba(0,0,0,0.65);
}
.workout-summary-modal-close{
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:none;
  color:rgba(255,255,255,0.4);
  font-size:18px;
  cursor:pointer;
  display:grid;
  place-items:center;
}
body.light-mode .workout-summary-modal-close{
  background:rgba(0,0,0,0.05);
  color:rgba(0,0,0,0.35);
}
.workout-summary-modal-list{
  padding:10px 18px 18px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ws-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:rgba(255,255,255,0.03);
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.05);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ws-item:active{
  background:rgba(255,255,255,0.07);
}
body.light-mode .ws-item{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.05);
}
body.light-mode .ws-item:active{
  background:rgba(0,0,0,0.06);
}
.ws-item-num{
  width:32px;
  height:32px;
  border-radius:10px;
  background:rgba(255,255,255,0.05);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,0.3);
  flex-shrink:0;
  border:1px solid rgba(255,255,255,0.04);
  transition:all 0.2s ease;
  font-variant-numeric:tabular-nums;
}
.ws-item-img{ display:none; }
.ws-item-info{
  flex:1;
  min-width:0;
}
.ws-item-name{
  font-size:16px;
  font-weight:600;
  color:rgba(255,255,255,0.85);
  letter-spacing:-0.1px;
}
body.light-mode .ws-item-name{
  color:rgba(0,0,0,0.85);
}
body.light-mode .ws-item-num{
  background:rgba(0,0,0,0.04);
  color:rgba(0,0,0,0.25);
  border-color:rgba(0,0,0,0.04);
}
.ws-item-details{ display:none; }
/* Exercise list mode: show details on right */
.workout-summary-modal.exercise-list-mode .ws-item-details{
  display:block;
  font-size:11px;
  font-weight:500;
  color:rgba(255,255,255,0.35);
  white-space:nowrap;
  flex-shrink:0;
  margin-left:auto;
}
body.light-mode .workout-summary-modal.exercise-list-mode .ws-item-details{
  color:rgba(0,0,0,0.35);
}
.ws-item-icons{
  display:none;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  margin-left:auto;
}
/* Checklist mode: show icons */
.workout-summary-modal.checklist-mode .ws-item-icons{
  display:flex;
}
.ws-item-check{
  width:18px;
  height:18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ws-item-check svg{
  width:14px;
  height:14px;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
.ws-item-check.done svg{ stroke:var(--accent-orange); stroke-width:2.5; }
.ws-item-check.done.cable svg{ stroke:var(--blue); }
.ws-item-check.pending svg{ stroke:rgba(255,255,255,0.3); stroke-width:2.5; }
body.light-mode .ws-item-check.pending svg{ stroke:rgba(0,0,0,0.5); }
.ws-item-pr{
  width:16px;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ws-item-pr svg{
  width:14px;
  height:14px;
  fill:#D4BC8A;
}
.ws-item-pr.no-pr svg{ fill:rgba(255,255,255,0.15); }
body.light-mode .ws-item-pr.no-pr svg{ fill:rgba(0,0,0,0.35); }
.ws-item-set-type{ display:none; }
.workout-summary-modal.exercise-list-mode .ws-item-set-type{
  display:inline-block;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  padding:2px 6px;
  border-radius:6px;
  flex-shrink:0;
  margin-left:6px;
  background:rgba(150,130,220,0.12);
  color:rgba(150,130,220,0.7);
}
/* Checklist modal progress ring */
.cl-ring-wrap{
  position:relative;
  width:44px;
  height:44px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cl-ring-svg{
  width:44px;
  height:44px;
  transform:rotate(-90deg);
}
.cl-ring-bg{
  fill:none;
  stroke:rgba(255,255,255,0.08);
  stroke-width:3;
}
body.light-mode .cl-ring-bg{ stroke:rgba(0,0,0,0.06); }
.cl-ring-fill{
  fill:none;
  stroke:var(--accent-orange);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:81.68;
  stroke-dashoffset:81.68;
  transition:stroke-dashoffset 0.5s ease;
}
.cl-ring-wrap.cable .cl-ring-fill{
  stroke:var(--blue);
}
.cl-ring-pct{
  position:absolute;
  font-size:10px;
  font-weight:800;
  color:rgba(255,255,255,0.6);
  letter-spacing:-0.2px;
}
body.light-mode .cl-ring-pct{ color:rgba(0,0,0,0.65); }
body.light-mode .workout-banner-img{
  background:transparent;
  border:none;
}
body.light-mode .workout-banner-img img{
  filter:invert(1) brightness(0.55) contrast(1.2);
  opacity:0.08;
}
body.light-mode .workout-banner-img-expand{
  background:rgba(0,0,0,0.06);
  border-color:rgba(0,0,0,0.06);
}
body.light-mode .workout-banner-img-expand svg{
  stroke:rgba(0,0,0,0.55);
}
/* Hide banner in calendar view (handled by .day-panel rule) */

.hero-image{
  width:100px;
  height:100px;
  border-radius:18px;
  background:var(--surface1);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.06);
  transition:all .2s ease;
  box-shadow:0 4px 20px rgba(0,0,0,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}
.hero-image:active{transform:scale(.95);}
.hero-image img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  object-position:center;
  background:#000000;
  transition:opacity 0.15s ease;
}
.hero-image img.changing{
  opacity:0;
}
.hero-image.rest-img{
  opacity:.3;
  cursor:default;
}

/* Hero Progress Section */
.hero-progress-section{
  margin:0 20px 12px;
  padding:14px 18px;
  background:var(--surface1);
  border:1px solid rgba(255,255,255,0.04);
  border-radius:16px;
}

/* Status Legend */
/* Workout hints below exercise cards */
.workout-hints{
  display:none !important;
}
.workout-hints .workout-day-name{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:2px;
  color:rgba(255,255,255,0.6);
  margin-bottom:4px;
}
.workout-hints .workout-title-hint{
  font-size:17px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:6px;
  color:var(--accent-orange);
}
.workout-hints .workout-title-hint.cable{
  color:var(--blue);
}
.workout-hints .workout-count-hint{
  position:static;
  transform:none;
  margin-bottom:4px;
}
.workout-hints .progress-hint{
  position:static;
  transform:none;
}

/* Connector Lines - visual flow between day/card/circles */
.connector-lines-container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  overflow:visible;
}
.connector-line{
  stroke:url(#connectorGrad);
  stroke-width:1;
  fill:none;
  transition:stroke 0.3s ease;
}
/* Completed day connector lines - green for free weights, blue for cable */
.connector-line.complete.free{
  stroke:var(--accent-orange);
}
.connector-line.complete.cable{
  stroke:var(--blue);
}
.connector-line-vertical{
  position:absolute;
  width:1.5px;
  background:rgba(255,255,255,0.18);
  left:50%;
  transform:translateX(-50%);
}
/* Top line: from selected day to hero card */
.connector-day-to-card{
  position:absolute;
  width:1.5px;
  background:rgba(255,255,255,0.18);
}
/* Bottom line: from hero card to workout circles */
.connector-card-to-circles{
  position:absolute;
  width:1.5px;
  background:rgba(255,255,255,0.18);
}
/* Horizontal bracket for workout circles */
.connector-bracket{
  position:absolute;
  height:1.5px;
  background:rgba(255,255,255,0.18);
}
/* Light mode connector lines */
body.light-mode .connector-line{
  stroke:rgba(0,0,0,0.15);
}
body.light-mode .connector-line-vertical,
body.light-mode .connector-day-to-card,
body.light-mode .connector-card-to-circles,
body.light-mode .connector-bracket{
  background:rgba(0,0,0,0.15);
}
/* Hide connectors in calendar view */
body.calendar-view-active .connector-lines-svg{
  display:none;
}

/* Exercise Circles Row - directly below hero images */
.exercise-circles-row{
  display:flex;
  justify-content:center;
  gap:12px;
  padding:8px 16px;
  margin-bottom:8px;
  flex-wrap:wrap;
  position:relative;
  z-index:2;
}

/* Workout Completion Count */
.workout-completion-count{
  text-align:center;
  font-size:15px;
  color:var(--text);
  margin-bottom:12px;
  font-weight:700;
  letter-spacing:0.3px;
  position:relative;
  z-index:2;
}
body.light-mode .workout-completion-count{
  color:#000000;
}
.exercise-circle-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  cursor:pointer;
  transition:transform 0.2s ease;
}
.exercise-circle-item:active{
  transform:scale(0.95);
}
.exercise-circle{
  width:36px;
  height:36px;
  border-radius:50% !important;
  border:2px solid rgba(255,255,255,1);
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  color:rgba(255,255,255,0.9);
  background:transparent;
  transition:all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  position:relative;
}
.exercise-circle span{
  position:relative;
  z-index:2;
}

/* Not selected - white outline, no fill (dark mode) */
.exercise-circle:not(.expanded){
  opacity:0.6;
  background:transparent;
  border-color:rgba(255,255,255,1);
}

/* Selected/Expanded - white fill, black text (dark mode) */
.exercise-circle.expanded{
  opacity:1;
  background:rgba(255,255,255,1);
  border-color:rgba(255,255,255,1);
  color:#000;
  transform:scale(1.15);
}

.exercise-circle-label{
  font-size:8px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  max-width:50px;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.exercise-circle-item.expanded .exercise-circle-label{
  color:rgba(255,255,255,1);
}

/* Light mode - black outline/fill instead of white */
body.light-mode .exercise-circle{
  border-color:rgba(0,0,0,1);
  color:rgba(0,0,0,1);
}
body.light-mode .exercise-circle:not(.expanded){
  background:transparent;
  border-color:rgba(0,0,0,1);
}
body.light-mode .exercise-circle.expanded{
  background:rgba(0,0,0,1);
  border-color:rgba(0,0,0,1);
  color:#fff;
}
body.light-mode .exercise-circle-label{
  color:rgba(0,0,0,0.7);
}
body.light-mode .exercise-circle-item.expanded .exercise-circle-label{
  color:rgba(0,0,0,1);
}

/* ===== CIRCLE COMPLETION STATES ===== */
/* (Completion overrides are placed after the glass morphism circle rules below) */

/* Exercise Card Stack Container - scrollable and centered */
.exercise-stack-container{
  display:none;
  width:100%;
  margin-bottom:0;
  overflow:visible;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.exercise-stack-container::-webkit-scrollbar{
  display:none;
}
.exercise-overlap-stack{
  display:none;
}
.exercise-overlap-stack::-webkit-scrollbar{
  display:none;
}
.exercise-overlap-stack > :first-child{
  margin-left:0;
}
.exercise-overlap-stack > :last-child{
  margin-right:0;
}

/* Workout Container (expanded exercise details) */
.workout-container{
  padding:2px 4px 12px;
  max-width:none;
  margin:0;
  margin-top:0px;
  will-change:transform, opacity;
  transition:opacity 0.08s ease;
}
body.light-mode .workout-container{
}
/* Inside unified panel, remove ex-card & special-set-box own surfaces */
.unified-exercise-panel .special-set-box{
  background:transparent;
  border:none;
  border-radius:0;
  margin-top:4px;
  padding-top:36px;
  padding-bottom:0;
}
.unified-exercise-panel .special-set-group{
  margin-top:0;
}
.unified-exercise-panel .special-set-group .group-number-circle{
  width:28px;
  height:28px;
  font-size:12px;
  border-width:2px;
  top:2px;
}
.unified-exercise-panel .special-set-corner-label{
  top:2px;
  left:auto;
  right:12px;
  transform:none;
  font-size:8px;
  padding:2px 6px;
}
/* ── Expanded card entrance animation ────────────────────── */
@keyframes wc-entrance{
  0%{
    opacity:0;
    transform:translateY(16px) scale(0.95);
    filter:blur(4px);
  }
  60%{
    opacity:1;
    filter:blur(0);
  }
  100%{
    transform:translateY(0) scale(1.02);
    filter:blur(0);
  }
}
.workout-container.wc-enter{
  animation:wc-entrance 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Staggered content reveal inside entering card */
.workout-container.wc-enter .ex-card,
.workout-container.wc-enter .superset-combined-card{
  animation:wc-content-stagger 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}
@keyframes wc-content-stagger{
  0%{ opacity:0; transform:translateY(12px); }
  100%{ opacity:1; transform:translateY(0); }
}
.workout-container.wc-enter .card-hero-row{
  animation:wc-content-stagger 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}
.workout-container.wc-enter .ex-timer-btn{
  animation:wc-content-stagger 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

/* Exercise overlap cards in stack */
.exercise-overlap-card{
  position:relative;
  flex-shrink:0;
  width:140px;
  height:160px;
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:4px;
  cursor:pointer;
  transition:all 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.2s ease;
  overflow:visible;
  margin-left:12px;
  scroll-snap-align:center;
  scroll-snap-stop:always;
}

/* Superset stack container */
.superset-stack{
  position:relative;
  flex-shrink:0;
  width:200px;
  height:196px;
  margin-left:12px;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  cursor:pointer;
  transition:width 0.3s ease, height 0.3s ease;
}
.superset-stack.selected{
  width:calc(100vw - 120px);
  max-width:400px;
  height:210px;
  border:1.5px solid rgba(255,255,255,0.06);
  border-radius:22px;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  border-bottom-color:transparent;
  box-shadow:none;
  background:var(--surface3);
}
.superset-stack.selected .superset-stack-label{
  top:6px;
}
body.light-mode .superset-stack.selected{
  border-color:rgba(0,0,0,0.06);
  border-bottom-color:transparent;
  background:var(--surface3);
  box-shadow:none;
}
.superset-stack.selected .superset-mini-card{
  height:165px;
  top:34px;
  justify-content:flex-start;
  padding-top:6px;
}

/* Superset label above the stack */
.superset-stack-label{
  position:absolute;
  top:0;
  left:0;
  right:0;
  text-align:center;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--purple);
  z-index:10;
  line-height:1;
}

/* Mini cards within superset stack - same size as regular exercise cards */
.superset-mini-card{
  position:absolute;
  top:30px;
  width:140px;
  height:160px;
  border-radius:18px;
  background:var(--surface2);
  border:1.5px solid rgba(255,255,255,0.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:4px 4px;
  padding-top:4px;
  transition:all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  overflow:visible;
}
/* Position cards to overlap horizontally - first card on left/top z-index */
.superset-mini-card:nth-child(2){ left:0; z-index:3; }
.superset-mini-card:nth-child(3){ left:50px; z-index:2; }
.superset-mini-card:nth-child(4){ left:100px; z-index:1; }

/* When selected, spread the cards to fill stack width evenly */
.superset-stack.selected .superset-mini-card:nth-child(2){ left:0; width:calc(50% - 6px); }
.superset-stack.selected .superset-mini-card:nth-child(3){ left:calc(50% + 6px); width:calc(50% - 6px); }
.superset-stack.selected .superset-mini-card:nth-child(4){ left:calc(66.6% + 4px); width:calc(33.3% - 4px); }
/* 3-card layout override */
.superset-stack.selected[data-card-count="3"] .superset-mini-card:nth-child(2){ width:calc(33.3% - 8px); }
.superset-stack.selected[data-card-count="3"] .superset-mini-card:nth-child(3){ left:calc(33.3% + 4px); width:calc(33.3% - 8px); }
.superset-stack.selected[data-card-count="3"] .superset-mini-card:nth-child(4){ left:calc(66.6% + 4px); width:calc(33.3% - 8px); }

.superset-mini-card .mini-card-letter{
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  font-size:13px;
  font-weight:800;
  color:var(--purple);
  z-index:10;
  background:var(--surface1);
  padding:0 6px;
  border-radius:3px;
}
body.light-mode .superset-mini-card .mini-card-letter{
  background:#f5f5f5;
}
.superset-mini-card > img{
  display:none; /* Images now inside mini-card-img-wrap */
}
.superset-mini-card .mini-card-info{
  text-align:center;
  overflow:hidden;
}
.mini-card-img-wrap{
  position:relative;
  width:calc(100% - 8px);
  overflow:visible;
  cursor:pointer;
}
.mini-card-img-wrap img{
  width:100%;
  height:105px;
  object-fit:cover;
  border-radius:10px;
  clip-path:inset(0 round 10px);
}
.superset-mini-card .mini-card-name{
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.9);
  line-height:1.3;
  overflow:hidden;
}
.superset-mini-card .mini-card-meta{
  font-size:9px;
  color:rgba(255,255,255,0.5);
  margin-top:2px;
}

/* When selected: hide name and meta */
.superset-stack.selected .superset-mini-card .mini-card-meta{
  display:none;
}
.superset-stack.selected .superset-mini-card .mini-card-name{
  display:none;
}
.superset-stack.selected .mini-card-img-wrap{
  width:100%;
  flex:1;
  min-height:0;
}
.superset-stack.selected .mini-card-img-wrap img{
  height:100%;
  object-fit:cover;
}

/* Muscle group image hanging off bottom of mini card */
.mini-card-muscle{
  position:absolute;
  bottom:-18px;
  left:50%;
  transform:translateX(-50%);
  width:36px;
  height:36px;
  border-radius:8px;
  background:var(--surface1);
  border:1.5px solid rgba(255,255,255,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:6;
  cursor:pointer;
  overflow:hidden;
  transition:transform .15s ease;
}
.mini-card-muscle img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:6px;
}
.mini-card-muscle:active{
  transform:translateX(-50%) scale(0.9);
}
body.light-mode .mini-card-muscle{
  background:#fff;
  border-color:rgba(0,0,0,0.12);
}
body.light-mode .mini-card-muscle img{
  filter:invert(1);
}
/* Hide muscle icon when not selected (too cluttered when stacked) */
.superset-stack:not(.selected) .mini-card-muscle{
  display:none;
}

/* Non-selected superset stack - dimmed */
.superset-stack:not(.selected){
  filter:brightness(0.5) saturate(0.7);
}
.superset-stack:not(.selected) .superset-mini-card{
  border-color:rgba(255,255,255,0.06);
}

/* Selected superset stack */
.superset-stack.selected{
  filter:none;
}
.superset-stack.selected .superset-mini-card{
  border-color:rgba(255,255,255,0.25);
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
}

/* Completed superset stack - for backward compatibility */
.superset-stack.ex-complete .superset-mini-card{
  border-color:var(--accent-orange);
}
.superset-stack.ex-complete[data-week-type="cable"] .superset-mini-card{
  border-color:var(--blue);
}
.superset-stack.selected.ex-complete .superset-mini-card{
  box-shadow:0 0 8px rgba(212,148,90,0.5);
}
.superset-stack.selected.ex-complete[data-week-type="cable"] .superset-mini-card{
  box-shadow:0 0 8px rgba(106,168,232,0.5);
}

/* Individual mini card status - Complete (green/blue border) */
.superset-mini-card.mini-complete{
  border-color:var(--accent-orange) !important;
}
.superset-stack[data-week-type="cable"] .superset-mini-card.mini-complete{
  border-color:var(--blue) !important;
}
.superset-stack.selected .superset-mini-card.mini-complete{
  box-shadow:0 0 8px rgba(212,148,90,0.5);
}
.superset-stack.selected[data-week-type="cable"] .superset-mini-card.mini-complete{
  box-shadow:0 0 8px rgba(106,168,232,0.5);
}

/* Individual mini card status - PR only (gold border) */
.superset-mini-card.mini-pr:not(.mini-complete){
  border-color:var(--gold) !important;
}
.superset-stack.selected .superset-mini-card.mini-pr:not(.mini-complete){
  box-shadow:0 0 8px rgba(230,209,163,0.5);
}

/* Individual mini card status - Complete AND PR (split border) */
.superset-mini-card.mini-complete.mini-pr{
  border:none !important;
  overflow:visible;
}
.superset-mini-card.mini-complete.mini-pr::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50%;
  border:3px solid var(--accent-orange);
  border-bottom:none;
  border-radius:16px 16px 0 0;
  box-sizing:border-box;
  pointer-events:none;
  z-index:1;
}
.superset-stack[data-week-type="cable"] .superset-mini-card.mini-complete.mini-pr::before{
  border-color:var(--blue);
}
.superset-mini-card.mini-complete.mini-pr::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50%;
  border:3px solid var(--gold);
  border-top:none;
  border-radius:0 0 16px 16px;
  box-sizing:border-box;
  pointer-events:none;
  z-index:1;
}

/* PR superset stack (not complete) - gold border like regular cards - DEPRECATED, use mini-pr */
.superset-stack.ex-pr:not(.ex-complete) .superset-mini-card{
  /* border-color:var(--gold); - disabled, use individual mini-pr class */
}
.superset-stack.selected.ex-pr:not(.ex-complete) .superset-mini-card{
  /* box-shadow:0 0 8px rgba(230,209,163,0.5); - disabled */
}

/* Complete AND PR - DEPRECATED, use mini-complete and mini-pr classes */
.superset-stack.ex-complete.ex-pr .superset-mini-card{
  /* border:none !important; - disabled */
}
.superset-stack.ex-complete.ex-pr .superset-mini-card::before{
  /* disabled - use individual classes */
}
.superset-stack.ex-complete.ex-pr[data-week-type="cable"] .superset-mini-card::before{
  /* disabled */
}
.superset-stack.ex-complete.ex-pr .superset-mini-card::after{
  /* disabled */
}

/* Light mode superset stack */
body.light-mode .superset-mini-card{
  background:#ffffff;
  border-color:rgba(0,0,0,0.15);
}
body.light-mode .superset-mini-card .mini-card-name{
  color:var(--text);
}
body.light-mode .superset-mini-card .mini-card-meta{
  color:rgba(0,0,0,0.7);
}
body.light-mode .superset-stack.selected .superset-mini-card{
  border-color:rgba(0,0,0,0.65);
}

.exercise-overlap-card .card-set-type-label{
  font-size:8px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--gold);
  margin-bottom:2px;
}
.exercise-overlap-card .card-set-type-label.superset{
  color:var(--purple);
}
.exercise-overlap-card .mini-card-img-wrap img{
  width:128px;
  height:105px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:2px;
  clip-path:inset(0 round 10px);
  transition:width .3s ease, height .3s ease;
}
.exercise-overlap-card .card-exercise-name{
  font-size:11px;
  font-weight:600;
  text-align:center;
  color:rgba(255,255,255,0.9);
  line-height:1.3;
  overflow:hidden;
  transition:font-size .3s ease;
}
.exercise-overlap-card .card-exercise-meta{
  font-size:9px;
  color:rgba(255,255,255,0.5);
  margin-top:2px;
  transition:font-size .3s ease;
}

/* Non-selected cards - dimmed but solid */
.exercise-overlap-card:not(.selected){
  filter:brightness(0.65) saturate(0.8);
}

/* Selected card - white outline by default */
.exercise-overlap-card.selected{
  filter:none;
  z-index:20 !important;
  width:calc(100vw - 140px);
  max-width:380px;
  height:170px;
  transform:scale(1);
  box-shadow:none;
  background:var(--surface3);
  border-color:rgba(255,255,255,0.06);
  border-bottom-color:transparent;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
/* Selected: hide name and meta */
.exercise-overlap-card.selected .card-exercise-name{
  display:none;
}
.exercise-overlap-card.selected .card-exercise-meta{
  display:none;
}
.exercise-overlap-card.selected .mini-card-img-wrap{
  width:100%;
  flex:1;
  min-height:0;
}
.exercise-overlap-card.selected .mini-card-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
}
/* Muscle icon bigger on selected card */
.exercise-overlap-card.selected .mini-card-muscle{
  width:44px;
  height:44px;
  border-radius:10px;
  bottom:-20px;
}
/* Muscle icon hidden when not selected */
.exercise-overlap-card:not(.selected) .mini-card-muscle{
  display:none;
}

/* Mini card image wrapper */
.mini-card-img-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  flex:1;
  min-height:0;
  cursor:pointer;
}
.mini-card-img-wrap img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
/* Large transparent play overlay - centered on image, only visible when selected */
.mini-card-play-overlay{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(0,0,0,0.35);
  border:2px solid rgba(255,255,255,0.25);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:5;
  cursor:pointer;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:transform .15s ease, background .15s ease;
}
.mini-card-play-overlay svg{
  width:22px;
  height:22px;
  color:rgba(255,255,255,0.85);
  margin-left:3px;
}
.mini-card-play-overlay:active{
  transform:translate(-50%, -50%) scale(0.9);
  background:rgba(0,0,0,0.5);
}
/* Only show play overlay on selected cards */
.exercise-overlap-card.selected .mini-card-play-overlay{
  display:flex;
}
.superset-stack.selected .mini-card-play-overlay{
  display:flex;
  width:40px;
  height:40px;
}
.superset-stack.selected .mini-card-play-overlay svg{
  width:18px;
  height:18px;
}
body.light-mode .mini-card-play-overlay{
  background:rgba(255,255,255,0.35);
  border-color:rgba(0,0,0,0.15);
}
body.light-mode .mini-card-play-overlay svg{
  color:rgba(0,0,0,0.7);
}

/* Completion status colors for NON-selected exercise cards */
.exercise-overlap-card:not(.selected).ex-complete{
  border-color:var(--accent-orange) !important;
  border-width:2px;
  filter:brightness(0.65) saturate(0.8);
}
.exercise-overlap-card:not(.selected).ex-complete[data-week-type="cable"]{
  border-color:var(--blue) !important;
}
.exercise-overlap-card:not(.selected).ex-pr:not(.ex-complete){
  border:none !important;
  filter:brightness(0.75);
  overflow:visible;
}
.exercise-overlap-card:not(.selected).ex-pr:not(.ex-complete)::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50%;
  border:3px solid rgba(255,255,255,0.8);
  border-bottom:none;
  border-radius:16px 16px 0 0;
  box-sizing:border-box;
  pointer-events:none;
  z-index:1;
}
.exercise-overlap-card:not(.selected).ex-pr:not(.ex-complete)::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50%;
  border:3px solid var(--gold);
  border-top:none;
  border-radius:0 0 16px 16px;
  box-sizing:border-box;
  pointer-events:none;
  z-index:1;
}
.exercise-overlap-card:not(.selected).ex-complete.ex-pr{
  border:none !important;
  filter:brightness(0.75);
  overflow:visible;
}
.exercise-overlap-card:not(.selected).ex-complete.ex-pr::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50%;
  border:3px solid var(--accent-orange);
  border-bottom:none;
  border-radius:16px 16px 0 0;
  box-sizing:border-box;
  pointer-events:none;
  z-index:1;
}
.exercise-overlap-card:not(.selected).ex-complete.ex-pr[data-week-type="cable"]::before{
  border-color:var(--blue);
}
.exercise-overlap-card:not(.selected).ex-complete.ex-pr::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50%;
  border:3px solid var(--gold);
  border-top:none;
  border-radius:0 0 16px 16px;
  box-sizing:border-box;
  pointer-events:none;
  z-index:1;
}

/* Completion status colors for selected exercise card */
.exercise-overlap-card.selected.ex-complete{
  border-color:var(--accent-orange);
  box-shadow:0 8px 24px rgba(212,148,90,0.3);
}
.exercise-overlap-card.selected.ex-complete[data-week-type="cable"]{
  border-color:var(--blue);
  box-shadow:0 8px 24px rgba(106,168,232,0.3);
}
/* PR Only - top half white, bottom half gold */
.exercise-overlap-card.selected.ex-pr:not(.ex-complete){
  border:none;
  box-shadow:0 8px 24px rgba(212,175,55,0.3);
  overflow:visible;
}
.exercise-overlap-card.selected.ex-pr:not(.ex-complete)::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50%;
  border:2px solid rgba(255,255,255,0.8);
  border-bottom:none;
  border-radius:16px 16px 0 0;
  box-sizing:border-box;
  pointer-events:none;
}
.exercise-overlap-card.selected.ex-pr:not(.ex-complete)::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50%;
  border:2px solid var(--gold);
  border-top:none;
  border-radius:0 0 16px 16px;
  box-sizing:border-box;
  pointer-events:none;
}
/* Complete + PR - top half green/blue, bottom half gold */
.exercise-overlap-card.selected.ex-complete.ex-pr{
  border:none;
  box-shadow:0 8px 24px rgba(212,148,90,0.3);
  overflow:visible;
}
.exercise-overlap-card.selected.ex-complete.ex-pr[data-week-type="cable"]{
  box-shadow:0 8px 24px rgba(106,168,232,0.3);
}
.exercise-overlap-card.selected.ex-complete.ex-pr::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50%;
  border:2px solid var(--accent-orange);
  border-bottom:none;
  border-radius:16px 16px 0 0;
  box-sizing:border-box;
  pointer-events:none;
}
.exercise-overlap-card.selected.ex-complete.ex-pr[data-week-type="cable"]::before{
  border-color:var(--blue);
}
.exercise-overlap-card.selected.ex-complete.ex-pr::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50%;
  border:2px solid var(--gold);
  border-top:none;
  border-radius:0 0 16px 16px;
  box-sizing:border-box;
  pointer-events:none;
}

body.light-mode .exercise-overlap-card{
  background:rgba(255,255,255,0.5);
  border-color:rgba(0,0,0,0.08);
}
body.light-mode .exercise-overlap-card .card-exercise-name{
  color:rgba(0,0,0,0.9);
}
body.light-mode .exercise-overlap-card .card-exercise-meta{
  color:rgba(0,0,0,0.7);
}
body.light-mode .exercise-overlap-card.selected{
  background:var(--surface3);
  border-color:rgba(0,0,0,0.06);
  border-bottom-color:transparent;
  box-shadow:none;
}
body.light-mode .exercise-overlap-card.selected.ex-pr:not(.ex-complete)::before{
  border-color:rgba(0,0,0,0.8);
}

/* Circle legend items */
.status-circle{
  width:20px;
  height:20px;
  min-width:20px;
  min-height:20px;
  border-radius:50%;
  position:relative;
  overflow:hidden;
  background:transparent;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  font-size:9px;
  font-weight:800;
  flex-shrink:0;
  aspect-ratio:1/1;
}
/* Not complete - white outlined circle with number */
.status-circle.not-complete{
  border:2px solid rgba(255,255,255,0.7);
  color:rgba(255,255,255,0.8);
}
/* Complete only - green or blue outlined circle with number */
.status-circle.complete-only{
  border:2px solid var(--accent-orange);
  color:var(--accent-orange);
}
.status-circle.complete-only.cable{
  border-color:var(--blue);
  color:var(--blue);
}
/* PR only - top half white, bottom half gold */
.status-circle.pr-only{
  border:none;
  color:rgba(255,255,255,1);
  background:linear-gradient(to bottom, transparent 50%, transparent 50%);
}
.status-circle.pr-only::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px solid transparent;
  background:linear-gradient(to bottom, rgba(255,255,255,1) 50%, #D4BC8A 50%) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
/* Complete + PR - top half green/blue, bottom half gold */
.status-circle.complete-pr{
  border:none;
  color:var(--accent-orange);
}
.status-circle.complete-pr::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px solid transparent;
  background:linear-gradient(to bottom, var(--accent-orange) 50%, #D4BC8A 50%) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.status-circle.complete-pr.cable{
  color:var(--blue);
}
.status-circle.complete-pr.cable::before{
  background:linear-gradient(to bottom, var(--blue) 50%, #D4BC8A 50%) border-box;
}

/* Legacy workout-card CSS kept for compatibility */
.workout-card{
  display:none;
}
.workout-card.day-complete.cable{
  border-color:var(--blue);
  box-shadow:0 0 12px var(--blueGlow), 0 4px 20px rgba(0,0,0,0.3);
}
.workout-card.day-complete.free{
  border-color:var(--accent-orange);
  box-shadow:0 0 12px var(--accent-orangeGlow), 0 4px 20px rgba(0,0,0,0.3);
}
/* PR border for INCOMPLETE workout-card - top half white, bottom half gold */
.workout-card.has-pr:not(.day-complete){
  border:none;
  box-shadow:0 0 10px rgba(212,188,138,0.4), 0 8px 32px rgba(0,0,0,0.3);
}
.workout-card.has-pr:not(.day-complete)::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50%;
  border-left:3px solid rgba(255,255,255,0.7);
  border-right:3px solid rgba(255,255,255,0.7);
  border-top:3px solid rgba(255,255,255,0.7);
  border-radius:24px 24px 0 0;
  pointer-events:none;
  z-index:2;
}
.workout-card.has-pr:not(.day-complete) .pr-bottom-border{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50%;
  border-left:3px solid #D4BC8A;
  border-right:3px solid #D4BC8A;
  border-bottom:3px solid #D4BC8A;
  border-radius:0 0 24px 24px;
  pointer-events:none;
  z-index:2;
}
/* PR border for COMPLETE workout-card - top half green/blue, bottom half gold */
.workout-card.day-complete.has-pr{
  border:none;
  box-shadow:0 0 15px var(--accent-orangeGlow), 0 0 15px rgba(212,188,138,0.5), 0 8px 32px rgba(0,0,0,0.3);
}
.workout-card.day-complete.has-pr.cable{
  box-shadow:0 0 15px var(--blueGlow), 0 0 15px rgba(212,188,138,0.5), 0 8px 32px rgba(0,0,0,0.3);
}
.workout-card.day-complete.has-pr::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50%;
  border-left:3px solid var(--accent-orange);
  border-right:3px solid var(--accent-orange);
  border-top:3px solid var(--accent-orange);
  border-radius:24px 24px 0 0;
  pointer-events:none;
  z-index:2;
}
.workout-card.day-complete.has-pr.cable::before{
  border-color:var(--blue);
}
.workout-card.day-complete.has-pr .pr-bottom-border{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50%;
  border-left:3px solid #D4BC8A;
  border-right:3px solid #D4BC8A;
  border-bottom:3px solid #D4BC8A;
  border-radius:0 0 24px 24px;
  pointer-events:none;
  z-index:2;
}

/* Completion area with PR badge - now below hero image */
.completion-area{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:8px 0;
}

/* PR Badge on workout card */
.pr-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  opacity:0.25;
  transition:all .3s ease;
}
.pr-badge.earned{
  opacity:1;
  filter:drop-shadow(0 0 8px rgba(212,188,138,0.6));
}
.pr-badge svg{
  width:28px;
  height:28px;
}
.pr-badge-label{
  font-size:9px;
  color:var(--gray);
  text-align:center;
}

/* Completion check indicator */
.completion-check{
  width:40px;
  height:40px;
  border-radius:50%;
  background:#1e1e1e;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:3px solid rgba(255,255,255,0.1);
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.completion-check svg{
  width:20px;
  height:20px;
  stroke:rgba(255,255,255,0.2);
  stroke-width:3;
  fill:none;
}
.completion-check.complete{
  border-color:var(--accent-orange);
  background:rgba(212,148,90,.2);
  box-shadow:0 0 25px var(--accent-orangeGlow);
}
.completion-check.complete svg{stroke:var(--accent-orange);}
.completion-check.complete.cable{
  border-color:var(--blue);
  background:rgba(106,168,232,.2);
  box-shadow:0 0 25px var(--blueGlow);
}
.completion-check.complete.cable svg{stroke:var(--blue);}

/* Big hero image section */
.card-image-section{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:6px 0;
  gap:12px;
}

.card-image{
  width:180px;
  height:180px;
  border-radius:18px;
  background:var(--bg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.04);
  transition:all .2s ease;
  box-shadow:0 6px 24px rgba(0,0,0,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.card-image:active{transform:scale(.95);}
.card-image img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  object-position:center;
  background:var(--bg);
}
.card-image.rest-img{opacity:.3;cursor:default;}

/* Progress section at bottom */
.progress-section{
  background:rgba(10,10,10,0.6);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-radius:14px;
  padding:10px 12px;
  margin-top:auto;
  border:1px solid var(--glassBorder);
}
.progress-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.progress-track{
  flex:1;
  height:8px;
  border-radius:4px;
  background:rgba(255,255,255,0.08);
  overflow:hidden;
}
.progress-fill{
  height:100%;
  border-radius:4px;
  transition:width .4s ease;
}
.progress-fill.free{
  background:linear-gradient(90deg, #059669, var(--accent-orange));
  box-shadow:0 0 15px var(--accent-orangeGlow);
}
.progress-fill.cable{
  background:linear-gradient(90deg, #2563EB, var(--blue));
  box-shadow:0 0 15px var(--blueGlow);
}

.progress-pct{
  font-size:18px;
  font-weight:800;
  min-width:50px;
  text-align:right;
}
.progress-pct.free{
  color:var(--accent-orange);
  text-shadow:0 0 6px var(--accent-orangeGlow);
}
.progress-pct.cable{
  color:var(--blue);
  text-shadow:0 0 6px var(--blueGlow);
}

.progress-hint{
  font-size:10px;
  color:var(--gray);
  text-align:center;
  margin:0;
}

/* Workout count hint - inside carousel slides */
.workout-count-hint{
  font-size:15px;
  font-weight:900;
  color:#FFFFFF;
  text-align:center;
  margin:8px 0 0 0;
  padding:0;
}

/* Hide hints for prev/next slides on rest days via JS */
.hero-slide .workout-count-hint.hidden,
.hero-slide .progress-hint.hidden{
  display:none;
}

/* ==================== IMAGE LIGHTBOX ==================== */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:300;
  padding:20px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.lightbox-content{
  position:relative;
  width:94vw;
  max-width:500px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.lightbox-img{
  width:100%;
  height:auto;
  max-height:65vh;
  background:var(--surface1);
  object-fit:contain;
  object-position:center;
  display:block;
  border-radius:20px;
  overflow:hidden;
}
.lightbox-img-wrap{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-play-overlay{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:64px;
  height:64px;
  border-radius:50%;
  background:rgba(0,0,0,0.35);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
}
.lightbox-play-overlay svg{
  width:26px;
  height:26px;
  color:rgba(255,255,255,0.9);
  margin-left:3px;
}
.lightbox-play-overlay:active{
  transform:translate(-50%, -50%) scale(0.9);
  background:rgba(0,0,0,0.5);
}
.lightbox-close{
  position:absolute;
  top:-50px;
  right:0px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#FFFFFF;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  transition:transform .2s ease;
  z-index:10;
}
.lightbox-close:active{transform:scale(.9);}
.lightbox-close svg{
  width:18px;height:18px;
  stroke:#000;
  stroke-width:3;
  fill:none;
}
.lightbox-label{
  text-align:center;
  margin-top:20px;
  font-size:18px;
  font-weight:700;
  color:#FFFFFF;
}
.lightbox-day-label{
  text-align:center;
  margin-bottom:16px;
  font-size:14px;
  font-weight:600;
  color:rgba(255,255,255,0.7);
  text-transform:uppercase;
  letter-spacing:2px;
}

/* ==================== CTA - REMOVED ==================== */
.cta-wrap{display:none;}

/* ==================== LEGEND ==================== */
.legend{
  display:flex;
  justify-content:center;
  gap:24px;
  padding:0 20px;
  margin-bottom:12px;
}

.legend-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--gray);
}
.legend-dot{
  width:10px;height:10px;
  border-radius:50%;
}
.legend-dot.free{
  background:var(--accent-orange);
  box-shadow:0 0 10px var(--accent-orangeGlow);
}
.legend-dot.cable{
  background:var(--blue);
  box-shadow:0 0 10px var(--blueGlow);
}
.legend-dot.pr{
  background:transparent;
  border:2px solid var(--gold);
  box-shadow:0 0 8px rgba(212, 175, 55, 0.5);
  width:10px;
  height:10px;
  box-sizing:border-box;
}

/* Completion Legend */
.completion-legend{
  display:flex;
  justify-content:center;
  gap:12px;
  padding:0 16px;
  margin-top:12px;
  flex-wrap:wrap;
}
.completion-legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:var(--gray);
}
.completion-rect{
  width:14px;
  height:24px;
  border-radius:4px;
  box-sizing:border-box;
  position:relative;
  background:transparent;
}
.completion-rect.not-complete{
  border:2px solid rgba(255,255,255,0.8);
}
.completion-rect.complete{
  border:2px solid var(--accent-orange);
}
.completion-rect.pr-only{
  border:none;
  overflow:visible;
}
.completion-rect.pr-only::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50%;
  border:2px solid rgba(255,255,255,0.8);
  border-bottom:none;
  border-radius:4px 4px 0 0;
  box-sizing:border-box;
}
.completion-rect.pr-only::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50%;
  border:2px solid var(--gold);
  border-top:none;
  border-radius:0 0 4px 4px;
  box-sizing:border-box;
}
.completion-rect.complete-pr{
  border:none;
  overflow:visible;
}
.completion-rect.complete-pr::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50%;
  border:2px solid var(--accent-orange);
  border-bottom:none;
  border-radius:4px 4px 0 0;
  box-sizing:border-box;
}
.completion-rect.complete-pr::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50%;
  border:2px solid var(--gold);
  border-top:none;
  border-radius:0 0 4px 4px;
  box-sizing:border-box;
}

/* Light mode completion legend */
body.light-mode .completion-rect.not-complete{
  border-color:rgba(0,0,0,0.8);
}
body.light-mode .completion-rect.pr-only::before{
  border-color:rgba(0,0,0,0.8);
}

/* ==================== PICKERS ==================== */
.picker{
  position:fixed;inset:0;
  background:rgba(0,0,0,.8);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
}
.picker.open{display:flex;}

.picker-box{
  width:85%;
  max-width:360px;
  max-height:80vh;
  overflow-y:auto;
  background:#1a1a1e;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-radius:22px;
  padding:22px;
  border:1px solid rgba(255,255,255,.12);
}
.picker-header{
  font-size:18px;
  font-weight:700;
  text-align:center;
  margin-bottom:16px;
  color:var(--white);
}
.picker-months{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-bottom:16px;
}
.picker-years{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  margin-bottom:16px;
}
.picker-divider{
  height:1px;
  background:var(--glassBorder);
  margin:16px 0;
}
.picker-item{
  padding:12px 8px;
  text-align:center;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  color:var(--white);
  cursor:pointer;
  background:rgba(0,0,0,0.3);
  border:2px solid transparent;
  transition:all .15s ease;
}
.picker-item:active{transform:scale(.95);}
/* Active month/year selection - white in dark mode */
.picker-item.active{
  background:rgba(255,255,255,0.15);
  border-color:#fff;
  color:#fff;
  font-weight:700;
  box-shadow:0 0 10px rgba(255,255,255,0.3);
}
.picker-done{
  width:100%;
  padding:14px 38px;
  border:none;
  border-radius:999px;
  background:#FFFFFF;
  color:#000;
  font-size:20px;
  font-weight:800;
  cursor:pointer;
  transition:all .2s ease;
}
.picker-done:active{
  transform:scale(.97);
}

/* ==================== ROTATE TIP ==================== */
.rotate-tip{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:200;
}
.rotate-tip.open{display:flex;}

.rotate-box{
  width:85%;
  max-width:360px;
  background:#1a1a1e;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-radius:22px;
  padding:22px;
  text-align:center;
  border:1px solid rgba(255,255,255,.12);
}
.rotate-icon{
  width:48px;
  height:48px;
  margin:0 auto 16px;
}
.rotate-icon svg{
  width:100%;
  height:100%;
}
.rotate-title{font-size:20px;font-weight:700;margin-bottom:10px;color:var(--white);}
.rotate-sub{font-size:14px;color:#E6D1A3;margin-bottom:16px;line-height:1.5;}
.rotate-check{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;color:var(--white);margin-bottom:14px;
}
.rotate-btn{
  width:100%;padding:14px 38px;border:none;border-radius:999px;
  background:#FFFFFF;color:#000;font-size:20px;font-weight:800;cursor:pointer;
}

/* ==================== LANDSCAPE FULLSCREEN CALENDAR ==================== */
@media (orientation: landscape) and (max-height: 500px) {
  /* Hide everything outside the calendar grid */
  body.month-view-active header,
  body.month-view-active .legend,
  body.month-view-active .workout-card,
  body.month-view-active .workout-header,
  body.month-view-active .month-row,
  body.month-view-active .month-label-row,
  body.month-view-active .bottom-menu-bar,
  body.month-view-active .workout-progress-bar,
  body.month-view-active .bottom-tuck-handle,
  body.month-view-active .calendar-legend,
  body.month-view-active .day-panel .workout-banner,
  body.month-view-active .day-panel .day-panel-divider {
    display: none !important;
  }

  /* Full-screen calendar container */
  body.month-view-active .week-nav {
    position: fixed;
    inset: 0;
    padding: 4px 6px;
    margin: 0;
    display: flex;
    flex-direction: column;
    z-index: 50;
    background: var(--bg);
  }

  body.month-view-active .week-strip {
    flex: 1;
    min-height: 0;
    border-radius: 10px;
    padding: 2px 4px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
  }

  body.month-view-active .days-row {
    flex-wrap: wrap !important;
    height: 100%;
    align-content: flex-start;
    justify-content: space-between;
    overflow-y: hidden;
    overflow-x: hidden;
    gap: 0;
    row-gap: 0;
  }

  /* Day-of-week headers */
  body.month-view-active .week-header {
    flex: 0 0 calc(100% / 7) !important;
    font-size: 10px !important;
    padding: 2px 0 !important;
    text-align: center;
    color: var(--grayLight) !important;
  }

  /* Each day cell — 6 rows, 7 cols, fits in ~100% height */
  body.month-view-active .day-col {
    flex: 0 0 calc(100% / 7) !important;
    min-width: 0 !important;
    height: calc((100% - 22px) / 6) !important; /* subtract header row */
    padding: 1px 0 !important;
    margin: 0 !important;
    border-radius: 5px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Hide day letter (header row handles it) */
  body.month-view-active .day-letter { display: none !important; }

  /* Workout type label */
  body.month-view-active .mv-workout-label {
    font-size: clamp(5px, 1vh, 8px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 1 !important;
    color: rgba(255,255,255,0.45) !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 90% !important;
  }
  body.month-view-active .mv-workout-label.free   { color: rgba(212,148,90,0.70) !important; }
  body.month-view-active .mv-workout-label.cable  { color: rgba(126,181,226,0.70) !important; }
  body.month-view-active .mv-workout-label.rest   { color: rgba(255,255,255,0.22) !important; }

  /* Ring — sized to fit cell height */
  body.month-view-active .day-ring-wrap {
    width:  clamp(22px, 4.5vh, 34px) !important;
    height: clamp(22px, 4.5vh, 34px) !important;
  }
  body.month-view-active .day-ring-svg {
    width:  100% !important;
    height: 100% !important;
  }
  body.month-view-active .day-ring-bg,
  body.month-view-active .day-ring-fill {
    stroke-width: 2.5 !important;
  }
  body.month-view-active .day-ring-wrap .day-number {
    font-size: clamp(8px, 2vh, 14px) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  /* Rest day ring — muted, empty */
  body.month-view-active .day-col.rest .day-ring-fill {
    stroke: rgba(255,255,255,0.10) !important;
  }

  /* Selected day highlight */
  body.month-view-active .day-col.selected {
    background: rgba(255,255,255,0.06) !important;
    border-radius: 6px !important;
  }

  /* Suppress old bar and dot */
  body.month-view-active .day-bar,
  body.month-view-active .day-type-dot { display: none !important; }

  /* Light mode */
  body.light-mode.month-view-active .mv-workout-label { color: rgba(0,0,0,0.38) !important; }
  body.light-mode.month-view-active .mv-workout-label.free  { color: rgba(180,100,30,0.65) !important; }
  body.light-mode.month-view-active .mv-workout-label.cable { color: rgba(60,120,200,0.65) !important; }
  body.light-mode.month-view-active .mv-workout-label.rest  { color: rgba(0,0,0,0.20) !important; }
}

/* ==================== CALENDAR-ONLY VIEW (Portrait) ==================== */
/* Show full calendar + same sections as week view below.
   Remove legacy exercise history list. Hide only non-relevant chrome. */

/* Hide old exercise history list — replaced by full week-view content */
body.calendar-view-active .day-workout-summary,
body.calendar-view-active .day-workout-summary-header,
body.calendar-view-active .day-workout-summary-list,
body.calendar-view-active .workout-header-row,
body.calendar-view-active .workout-hints,
body.calendar-view-active .exercise-circles-row,
body.calendar-view-active .exercise-mini-group,
body.calendar-view-active .panel-tally-strip,
body.calendar-view-active .scroll-indicator-dots,
body.calendar-view-active .floating-status-bar {
  display: none !important;
}

/* Show all regular week-view content below the calendar */
body.calendar-view-active .workout-container,
body.calendar-view-active .unified-exercise-panel,
body.calendar-view-active .day-panel .workout-banner,
body.calendar-view-active .day-panel .streak-indicator {
  display: block !important;
}
body.calendar-view-active .day-panel .day-panel-divider {
  display: block !important;
}

/* Ring sizing in full calendar portrait grid — bigger, more readable */
body.calendar-view-active .day-ring-wrap {
  width: 36px !important;
  height: 36px !important;
}
body.calendar-view-active .day-ring-svg {
  width: 36px !important;
  height: 36px !important;
}
body.calendar-view-active .day-ring-bg,
body.calendar-view-active .day-ring-fill {
  stroke-width: 3 !important;
}
body.calendar-view-active .day-ring-wrap .day-number {
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Show the day color legend above calendar in calendar view */
.calendar-legend{
  display:flex;
  justify-content:center;
  gap:14px;
  padding:4px 16px;
  margin-bottom:0;
}
body.calendar-view-active .calendar-legend{
  display:flex;
  padding:8px 16px;
  margin-bottom:8px;
}
.calendar-legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:rgba(255,255,255,0.7);
}
/* Light mode calendar legend text */
body.light-mode .calendar-legend-item{
  color:rgba(0,0,0,0.7);
}
.calendar-legend-dot{
  width:10px;
  height:10px;
  border-radius:50%;
}
.calendar-legend-dot.free{
  background:var(--accent-orange);
}
.calendar-legend-dot.cable{
  background:var(--blue);
}
.calendar-legend-dot.pr{
  background:transparent;
  border:2px solid var(--gold);
  box-sizing:border-box;
}

/* Day Workout Summary - shows selected day's exercises in portrait month view */
.day-workout-summary{
  display:none;
  flex-direction:column;
  padding:12px 16px 16px;
  max-height:40vh;
  overflow-y:auto;
}
body.calendar-view-active .day-workout-summary{
  display:flex;
}
/* Hide in landscape */
@media (orientation: landscape){
  .day-workout-summary{
    display:none !important;
  }
}
.day-workout-summary-header{
  display:none;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
body.calendar-view-active .day-workout-summary-header{
  display:flex;
}
@media (orientation: landscape){
  .day-workout-summary-header{
    display:none !important;
  }
}
.day-workout-summary-header .summary-date{
  font-size:16px;
  font-weight:700;
  color:var(--white);
}
.day-workout-summary-header .summary-workout-type{
  font-size:12px;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:1px;
  opacity:0.8;
}
body.light-mode .day-workout-summary-header{
  border-bottom-color:rgba(0,0,0,0.65);
}
body.light-mode .day-workout-summary-header .summary-workout-type{
  color:rgba(0,0,0,0.6);
}
.day-workout-summary-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.day-workout-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  background:rgba(255,255,255,0.03);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  cursor:pointer;
  transition:background 0.2s ease, transform 0.1s ease;
}
.day-workout-item:active{
  background:rgba(255,255,255,0.08);
  transform:scale(0.98);
}
body.light-mode .day-workout-item{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.06);
}
body.light-mode .day-workout-item:active{
  background:rgba(0,0,0,0.08);
}
.day-workout-item-number{
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(230,209,163,0.2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  color:var(--sand);
  flex-shrink:0;
}
.day-workout-item-image{
  width:40px;
  height:40px;
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
  background:rgba(0,0,0,0.3);
}
.day-workout-item-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.day-workout-item-info{
  flex:1;
  min-width:0;
}
.day-workout-item-name{
  font-size:13px;
  font-weight:600;
  color:#fff;
  margin-bottom:2px;
}
body.light-mode .day-workout-item-name{
  color:#000;
}
.day-workout-item-details{
  font-size:11px;
  color:rgba(255,255,255,0.5);
}
body.light-mode .day-workout-item-details{
  color:rgba(0,0,0,0.7);
}
.day-workout-item-icons{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.day-workout-check{
  width:18px;
  height:18px;
}
.day-workout-pr-icon{
  width:18px;
  height:18px;
}
.day-workout-item-set-type{
  font-size:9px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  padding:2px 6px;
  border-radius:4px;
  background:rgba(255,138,0,0.2);
  color:var(--orange);
  flex-shrink:0;
}
.day-workout-item-set-type.superset{
  background:rgba(162,100,190,0.2);
  color:var(--purple);
}
.day-workout-item-set-type.pyramid{
  background:rgba(212,175,55,0.2);
  color:var(--gold);
}
.day-workout-item-set-type.dropset{
  background:rgba(255,107,107,0.2);
  color:#ff6b6b;
}
.day-workout-rest-message{
  text-align:center;
  padding:30px 20px;
  color:rgba(255,255,255,0.5);
  font-size:14px;
}
body.light-mode .day-workout-rest-message{
  color:rgba(0,0,0,0.7);
}

/* ==================== WORKOUT MODE (scroll-based) ==================== */
.workout-header-row{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  padding:8px 0;
  text-align:center;
}

.workout-header-text{
  margin-bottom:12px;
}

/* Hero carousel viewport */
/* Hero stack section */
.hero-stack-section{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

/* 7-day overlapping hero stack */
.hero-overlap-stack{
  position:relative;
  width:404px;
  height:178px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-overlap-card{
  position:absolute;
  width:128px;
  height:168px;
  border-radius:18px;
  background:var(--surface2);
  border:1.5px solid rgba(255,255,255,0.1);
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  padding:6px 4px;
  cursor:pointer;
  transition:all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  overflow:hidden;
}
.hero-overlap-card .hero-day-label{
  order:2;
  font-size:10px;
  font-weight:800;
  color:rgba(255,255,255,0.7);
  text-transform:uppercase;
  line-height:1.2;
  padding:2px 2px;
  flex-shrink:0;
  width:16px;
  writing-mode:vertical-lr;
  text-orientation:upright;
  letter-spacing:2px;
  text-align:center;
}
.hero-overlap-card .hero-card-content{
  order:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  flex:1;
  height:100%;
  position:relative;
  padding-top:8px;
  padding-bottom:24px;
  overflow:hidden;
}
.hero-overlap-card img{
  width:110px;
  height:110px;
  object-fit:contain;
  transition:filter 0.3s ease;
}
.hero-overlap-card .hero-workout-name{
  position:absolute;
  bottom:2px;
  left:4px;
  right:4px;
  font-size:16px;
  font-weight:800;
  color:rgba(255,255,255,0.9);
  text-align:center;
  line-height:1.1;
  text-transform:capitalize;
}

/* Expand button in upper right corner - positioned relative to card */
.hero-expand-btn{
  position:absolute;
  top:2px;
  right:2px;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.3);
  border-radius:6px;
  z-index:10;
  opacity:0.5;
  transition:opacity 0.2s ease, background 0.2s ease;
}
.hero-expand-btn svg{
  width:16px;
  height:16px;
  stroke:#FFFFFF;
  stroke-width:2.5;
  fill:none;
}
.hero-overlap-card.selected .hero-expand-btn{
  opacity:1;
}
.hero-expand-btn:active{
  background:rgba(255,255,255,0.3);
}

/* Position cards in overlapping layout - Sunday far left to Saturday far right */
.hero-overlap-card[data-day="0"]{ left:0; z-index:7; }
.hero-overlap-card[data-day="1"]{ left:46px; z-index:6; }
.hero-overlap-card[data-day="2"]{ left:92px; z-index:5; }
.hero-overlap-card[data-day="3"]{ left:138px; z-index:4; }
.hero-overlap-card[data-day="4"]{ left:184px; z-index:3; }
.hero-overlap-card[data-day="5"]{ left:230px; z-index:2; }
.hero-overlap-card[data-day="6"]{ left:276px; z-index:1; }

/* Non-selected cards - dimmed but fully opaque */
.hero-overlap-card:not(.selected){
  filter:brightness(0.45) saturate(0.7);
}
.hero-overlap-card:not(.selected) img{
  filter:brightness(0.7);
}

/* Selected card - full visibility and on top */
.hero-overlap-card.selected{
  filter:none;
  z-index:20 !important;
  transform:scale(1.15);
  box-shadow:0 12px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.15);
  background:var(--surface3);
  border-color:rgba(255,255,255,0.4);
}
/* Edge cards scale inward so vertical day labels don't clip off-screen */
.hero-overlap-card[data-day="0"].selected{ transform-origin:left center; }
.hero-overlap-card[data-day="6"].selected{ transform-origin:right center; }
.hero-overlap-card[data-day="5"].selected{ transform-origin:80% center; }
.hero-overlap-card.selected img{
  filter:none;
  animation:heroImgGrow 3s ease-out forwards;
}
@keyframes heroImgGrow{
  0%{ transform:scale(1); }
  100%{ transform:scale(1.4); }
}
.hero-overlap-card:not(.selected) img{
  animation:none;
  transform:scale(1);
}

/* Slow text grow animation on selected hero card */
@keyframes heroTextGrow{
  0%{ transform:scale(1); }
  100%{ transform:scale(1.35); }
}
@keyframes heroDayLabelGrow{
  0%{ transform:scale(1); }
  100%{ transform:scale(1.5); }
}
.hero-overlap-card.selected .hero-day-label{
  animation:heroDayLabelGrow 3s ease-out forwards;
  transform-origin:center center;
}
.hero-overlap-card.selected .hero-workout-name{
  animation:heroTextGrow 3s ease-out forwards;
  transform-origin:center bottom;
}
.hero-overlap-card:not(.selected) .hero-day-label,
.hero-overlap-card:not(.selected) .hero-workout-name{
  animation:none;
  transform:scale(1);
}

/* Completion status colors for NON-selected hero cards */
.hero-overlap-card:not(.selected).day-complete{
  border-color:var(--accent-orange) !important;
  border-width:2px;
}
.hero-overlap-card:not(.selected).day-complete[data-week-type="cable"]{
  border-color:var(--blue) !important;
}
.hero-overlap-card:not(.selected).day-pr:not(.day-complete){
  border:none !important;
  overflow:visible;
}
.hero-overlap-card:not(.selected).day-pr:not(.day-complete)::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50%;
  border:2px solid rgba(255,255,255,0.6);
  border-bottom:none;
  border-radius:16px 16px 0 0;
  box-sizing:border-box;
  pointer-events:none;
  z-index:1;
}
.hero-overlap-card:not(.selected).day-pr:not(.day-complete)::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50%;
  border:2px solid var(--gold);
  border-top:none;
  border-radius:0 0 16px 16px;
  box-sizing:border-box;
  pointer-events:none;
  z-index:1;
}
.hero-overlap-card:not(.selected).day-complete.day-pr{
  border:none !important;
  overflow:visible;
}
.hero-overlap-card:not(.selected).day-complete.day-pr::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50%;
  border:2px solid var(--accent-orange);
  border-bottom:none;
  border-radius:16px 16px 0 0;
  box-sizing:border-box;
  pointer-events:none;
  z-index:1;
}
.hero-overlap-card:not(.selected).day-complete.day-pr[data-week-type="cable"]::before{
  border-color:var(--blue);
}
.hero-overlap-card:not(.selected).day-complete.day-pr::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50%;
  border:2px solid var(--gold);
  border-top:none;
  border-radius:0 0 16px 16px;
  box-sizing:border-box;
  pointer-events:none;
  z-index:1;
}

/* Completion status colors for selected hero card */
.hero-overlap-card.selected.day-complete{
  border-color:var(--accent-orange);
  box-shadow:0 8px 24px rgba(212,148,90,0.3);
}
.hero-overlap-card.selected.day-complete[data-week-type="cable"]{
  border-color:var(--blue);
  box-shadow:0 8px 24px rgba(106,168,232,0.3);
}
/* PR Only - top half white, bottom half gold */
.hero-overlap-card.selected.day-pr:not(.day-complete){
  border:none;
  box-shadow:0 8px 24px rgba(212,175,55,0.3);
  overflow:visible;
}
.hero-overlap-card.selected.day-pr:not(.day-complete)::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50%;
  border:2px solid rgba(255,255,255,0.8);
  border-bottom:none;
  border-radius:16px 16px 0 0;
  box-sizing:border-box;
  pointer-events:none;
  z-index:30;
}
.hero-overlap-card.selected.day-pr:not(.day-complete)::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50%;
  border:2px solid var(--gold);
  border-top:none;
  border-radius:0 0 16px 16px;
  box-sizing:border-box;
  pointer-events:none;
  z-index:30;
}
/* Complete + PR - top half green/blue, bottom half gold */
.hero-overlap-card.selected.day-complete.day-pr{
  border:none;
  box-shadow:0 8px 24px rgba(212,148,90,0.3);
  overflow:visible;
}
.hero-overlap-card.selected.day-complete.day-pr::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50%;
  border:2px solid var(--accent-orange);
  border-bottom:none;
  border-radius:16px 16px 0 0;
  box-sizing:border-box;
  pointer-events:none;
  z-index:30;
}
.hero-overlap-card.selected.day-complete.day-pr[data-week-type="cable"]::before{
  border-color:var(--blue);
}
.hero-overlap-card.selected.day-complete.day-pr::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50%;
  border:2px solid var(--gold);
  border-top:none;
  border-radius:0 0 16px 16px;
  box-sizing:border-box;
  pointer-events:none;
  z-index:30;
}

/* Hover effect on non-selected cards */
.hero-overlap-card:not(.selected):hover{
  filter:brightness(0.7);
}

body.light-mode .hero-overlap-card{
  background:#f0f0f0;
  border-color:rgba(0,0,0,0.15);
}
body.light-mode .hero-overlap-card .hero-day-label{
  color:rgba(0,0,0,0.8);
}
body.light-mode .hero-overlap-card .hero-workout-name{
  color:rgba(0,0,0,0.85);
}
body.light-mode .hero-overlap-card:not(.selected){
  filter:brightness(0.85);
}
body.light-mode .hero-overlap-card.selected{
  background:#ffffff;
  border-color:rgba(0,0,0,0.8);
}
body.light-mode .hero-overlap-card.selected.day-pr:not(.day-complete)::before{
  border-color:rgba(0,0,0,0.8);
}
body.light-mode .hero-expand-btn{
  background:rgba(0,0,0,0.1);
}
body.light-mode .hero-expand-btn svg{
  stroke:#000000;
}
body.light-mode .hero-expand-btn:active{
  background:rgba(0,0,0,0.2);
}

/* Large edge arrows */
.hero-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:50px;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:25;
}
.hero-arrow-left{
  left:8px;
}
.hero-arrow-right{
  right:8px;
}
.hero-arrow svg{
  width:44px;
  height:44px;
  fill:none;
  stroke:rgba(255,255,255,0.25);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke 0.2s ease;
}
.hero-arrow:active svg{
  stroke:rgba(255,255,255,0.5);
}

body.light-mode .hero-arrow svg{
  stroke:rgba(0,0,0,0.5);
}
body.light-mode .hero-arrow:active svg{
  stroke:rgba(0,0,0,0.4);
}

.workout-date{
  font-size:16px;
  font-weight:600;
  color:var(--white);
  margin-bottom:4px;
}
.workout-type{
  font-size:22px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.5px;
}
.workout-type.free{
  color:var(--accent-orange);
  text-shadow:0 0 6px var(--accent-orangeGlow);
}
.workout-type.cable{
  color:var(--blue);
  text-shadow:0 0 6px var(--blueGlow);
}

/* ==================== BOTTOM MENU BAR ==================== */
.bottom-menu-bar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  transform:none;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:0;
  /* Pill floats above a transparent zone */
  padding:0 0 calc(10px + env(safe-area-inset-bottom)) 0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:none;
  border-radius:0;
  z-index:520;
  transition:transform 0.3s cubic-bezier(0.25,1,0.5,1);
  box-shadow:none;
  width:100%;
  max-width:none;
  overflow:visible;
  visibility:visible;
  opacity:1;
  pointer-events:none;  /* pass-through except pill */
}
/* The pill container inside the bar */
.bottom-menu-bar::before{
  display:none;
}
/* Inner pill — wraps all buttons */
#bottomMenuPill{
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:0;
  background:rgba(18,18,26,0.88);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:28px;
  padding:0 6px;
  height:58px;
  box-shadow:0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.07);
  pointer-events:auto;
  min-width:0;
  width:calc(100% - 40px);
  max-width:380px;
  position:relative;
}
body.light-mode #bottomMenuPill{
  background:rgba(252,250,246,0.92);
  border-color:rgba(0,0,0,0.10);
  box-shadow:0 8px 28px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.08), inset 0 -1px 0 rgba(0,0,0,0.04);
}
.bottom-menu-bar.keyboard-hidden{
  display:none !important;
}

/* Each dock button — inside pill */
.dock-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-width:0;
  height:50px;
  border-radius:22px;
  background:transparent;
  border:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.14s ease, transform 0.12s cubic-bezier(0.34,1.6,0.64,1);
  flex:1 1 0;
  padding:0 6px;
  position:relative;
}
.dock-btn:active{
  transform:scale(0.85);
  background:rgba(255,255,255,0.09);
}
.dock-btn svg{
  width:24px;
  height:24px;
  color:rgba(255,255,255,0.42);
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
  transition:color 0.14s ease, filter 0.14s ease;
}
/* No line separators inside pill */
.dock-btn + .dock-btn::before{
  display:none;
}
/* No separators in pill design */
.dock-unified-btn + .dock-btn::before{ display:none; }
body.light-mode .dock-btn svg{
  color:rgba(0,0,0,0.38);
}
body.light-mode .dock-btn:active{
  background:rgba(0,0,0,0.07);
}
/* Settings button */
.dock-btn#settingsBtn{
  flex:0 0 auto;
  padding:0 8px;
}
.dock-btn.dock-btn-danger svg{
  color:rgba(220,80,80,0.5);
}
.dock-btn.dock-btn-danger span{
  color:rgba(220,80,80,0.4);
}
.dock-btn.dock-btn-danger:active{
  background:rgba(220,80,80,0.12);
}
.dock-btn.dock-btn-danger:active svg{
  color:rgba(220,80,80,0.8);
}
body.light-mode .dock-btn.dock-btn-danger svg{
  color:rgba(190,60,60,0.45);
}
body.light-mode .dock-btn.dock-btn-danger span{
  color:rgba(190,60,60,0.35);
}
body.light-mode .dock-btn.dock-btn-danger:active{
  background:rgba(190,60,60,0.1);
}
body.light-mode .dock-btn.dock-btn-danger:active svg{
  color:rgba(190,60,60,0.75);
}

/* ── Unified Progress+Timer Button (right side of bar) ─── */
.dock-unified-btn{
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 12px;
  margin:0;
  flex:1 1 auto;
  min-width:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  border-radius:12px;
  transition:background 0.15s ease, transform 0.1s ease;
  min-height:34px;
  position:relative;
  justify-content:center;
}
.dock-unified-btn::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:22px;
  background:rgba(255,255,255,0.08);
  pointer-events:none;
}
body.light-mode .dock-unified-btn::before{
  background:rgba(0,0,0,0.07);
}
.dock-unified-btn:active{
  background:rgba(230,209,163,0.1);
  transform:scale(0.95);
}
/* Progress ring SVG in unified button */
.dock-chip-ring{
  width:24px;
  height:24px;
  transform:rotate(-90deg);
  flex-shrink:0;
}
.dock-chip-ring .ring-bg{
  fill:none;
  stroke:rgba(255,255,255,0.08);
  stroke-width:2.5;
}
.dock-chip-ring .ring-fill{
  fill:none;
  stroke:var(--accent-orange);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:69.115;
  stroke-dashoffset:69.115;
  transition:stroke-dashoffset 0.5s ease;
}
.dock-chip-ring .ring-fill.cable{
  stroke:var(--blue);
}
body.light-mode .dock-chip-ring .ring-bg{
  stroke:rgba(0,0,0,0.06);
}
.dock-unified-dot{
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  flex-shrink:0;
}
body.light-mode .dock-unified-dot{ background:rgba(0,0,0,0.12); }
.dock-unified-pct{
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,0.55);
  font-variant-numeric:tabular-nums;
}
body.light-mode .dock-unified-pct{ color:rgba(0,0,0,0.65); }
.dock-unified-btn.has-progress .dock-unified-pct{
  color:var(--accent-orange);
}
.dock-unified-btn.has-progress.cable .dock-unified-pct{
  color:var(--blue);
}
body.light-mode .dock-unified-btn.has-progress .dock-unified-pct{ color:#3BAB7A; }
body.light-mode .dock-unified-btn.has-progress.cable .dock-unified-pct{ color:#5A9FD4; }
.dock-unified-clock{
  width:15px;
  height:15px;
  stroke:rgba(255,255,255,0.35);
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}
body.light-mode .dock-unified-clock{ stroke:rgba(0,0,0,0.25); }
.dock-unified-time{
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,0.55);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.5px;
}
body.light-mode .dock-unified-time{ color:rgba(0,0,0,0.65); }
/* Started but not live — must come BEFORE live/paused */
.dock-unified-btn.started .dock-unified-clock{ stroke:rgba(255,255,255,0.5); }
.dock-unified-btn.started .dock-unified-time{ color:rgba(255,255,255,0.5); }
/* Live timer state — overrides started */
.dock-unified-btn.live .dock-unified-clock{ stroke:var(--accent-orange) !important; transform:scale(1.15); transition:transform 0.3s ease, stroke 0.3s ease; }
.dock-unified-btn.live .dock-unified-time{ color:var(--accent-orange) !important; font-size:14px; transition:font-size 0.3s ease, color 0.3s ease; }
.dock-unified-btn.live.cable .dock-unified-clock{ stroke:var(--blue) !important; }
.dock-unified-btn.live.cable .dock-unified-time{ color:var(--blue) !important; }
.dock-unified-btn.live .dock-chip-ring{
  width:28px;
  height:28px;
  transition:width 0.3s ease, height 0.3s ease;
}
/* Paused timer state — overrides started */
.dock-unified-btn.paused .dock-unified-clock{
  stroke:rgba(255,200,100,0.85) !important;
  transform:scale(0.9);
  animation:dockPausedPulse 2s ease-in-out infinite;
  transition:transform 0.3s ease, stroke 0.3s ease;
}
.dock-unified-btn.paused .dock-unified-time{
  color:rgba(255,200,100,0.85) !important;
  font-size:12px;
  animation:dockPausedPulse 2s ease-in-out infinite;
  transition:font-size 0.3s ease, color 0.3s ease;
}
body.light-mode .dock-unified-btn.paused .dock-unified-clock{ stroke:rgba(170,130,20,0.85) !important; }
body.light-mode .dock-unified-btn.paused .dock-unified-time{ color:rgba(170,130,20,0.85) !important; }
@keyframes dockPausedPulse{
  0%,100%{ opacity:0.4; }
  50%{ opacity:1; }
}
.dock-unified-btn.paused .dock-chip-ring{
  width:22px;
  height:22px;
  animation:dockPausedPulse 2s ease-in-out infinite;
  transition:width 0.3s ease, height 0.3s ease;
}
.dock-sep{ display:none; }
.dock-chip-divider{ display:none; }

/* Expanded items panel - floats above trigger */
.menu-group-items{
  display:none;
  position:fixed;
  bottom:calc(52px + 10px + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  z-index:110;
  padding:6px;
  background:#161620;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1.5px solid rgba(255,255,255,0.1);
  border-radius:18px;
  box-shadow:0 -8px 30px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
  width:calc(100% - 24px);
  max-width:320px;
  flex-wrap:wrap;
  flex-direction:row;
  gap:0;
}
/* No edge-clamping needed — panels are fixed+centered on screen */
.menu-group:first-child .menu-group-items,
.menu-group:last-of-type .menu-group-items{
  left:50%;
  right:auto;
  transform:translateX(-50%);
}
.menu-group.expanded .menu-group-items{
  display:flex;
  animation:menuGroupFadeIn 0.2s ease-out;
}
/* All groups use same centered animation now */
.menu-group:first-child.expanded .menu-group-items,
.menu-group:last-of-type.expanded .menu-group-items{
  animation:menuGroupFadeIn 0.2s ease-out;
}
body.light-mode .menu-group-items{
  background:#FFFFFF;
  border-color:rgba(0,0,0,0.08);
  box-shadow:0 -8px 30px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.05);
}

@keyframes menuGroupFadeIn{
  from{
    opacity:0;
    transform:translateX(-50%) translateY(8px) scale(0.96);
  }
  to{
    opacity:1;
    transform:translateX(-50%) translateY(0) scale(1);
  }
}

/* Individual sub-items — horizontal layout in 2-col grid */
.menu-group-item{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  cursor:pointer;
  padding:10px 12px;
  border-radius:12px;
  transition:background 0.15s ease;
  width:calc(50% - 2px);
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
/* Odd last item centers */
.menu-group-item:last-child:nth-child(odd){
  width:100%;
  justify-content:center;
}
/* Remove old vertical separators */
.menu-group-item + .menu-group-item::before{
  display:none;
}
.menu-group-item:active{
  background:rgba(230,209,163,0.08);
}
.menu-group-item a{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:inherit;
  width:100%;
}
.menu-group-item svg{
  width:22px;
  height:22px;
  color:rgba(230,209,163,0.65);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}
.menu-group-item span{
  font-size:11px;
  font-weight:600;
  color:rgba(230,209,163,0.5);
  text-transform:uppercase;
  letter-spacing:0.3px;
  white-space:nowrap;
}
body.light-mode .menu-group-item svg{
  color:rgba(140,125,95,0.7);
}
body.light-mode .menu-group-item span{
  color:rgba(140,125,95,0.6);
}
body.light-mode .menu-group-item:active{
  background:rgba(140,125,95,0.08);
}
body.light-mode .menu-group-item + .menu-group-item::before{
  background:rgba(140,125,95,0.12);
}
/* Active item inside expanded group (current page) */
.menu-group-item.menu-item-active{
  background:rgba(230,209,163,0.06);
}
.menu-group-item.menu-item-active svg{
  color:rgba(230,209,163,1);
  filter:drop-shadow(0 0 5px rgba(230,209,163,0.2));
}
.menu-group-item.menu-item-active span{
  color:rgba(230,209,163,0.9);
}
.menu-group-item.menu-item-active::after{
  content:'';
  position:absolute;
  left:4px;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:16px;
  border-radius:2px;
  background:rgba(230,209,163,0.7);
}
body.light-mode .menu-group-item.menu-item-active{
  background:rgba(140,125,95,0.06);
}
body.light-mode .menu-group-item.menu-item-active svg{
  color:rgba(140,125,95,1);
  filter:drop-shadow(0 0 3px rgba(140,125,95,0.12));
}
body.light-mode .menu-group-item.menu-item-active span{
  color:rgba(140,125,95,0.9);
}
body.light-mode .menu-group-item.menu-item-active::after{
  background:rgba(140,125,95,0.6);
}

/* Mode icon swap */
.menu-group-item .mode-icon-sun,
.menu-group-item .mode-icon-moon{
  width:22px;
  height:22px;
}

/* ── Menu Bar Right: Progress Ring + Duration Timer ──── */
.floating-status-bar{
  position:fixed;
  bottom:calc(66px + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:0;
  padding:6px 18px;
  background:#121218;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:22px;
  z-index:515;
  transition:transform 0.35s cubic-bezier(0.25,1,0.5,1), opacity 0.25s ease;
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
}
.floating-status-bar.tucked{
  transform:translateX(-50%) translateY(20px) scale(0.88);
  opacity:0.5;
}
body.light-mode .floating-status-bar{
  background:#ffffff;
  border-color:rgba(0,0,0,0.08);
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
}
.fsb-divider{
  width:1px;
  height:24px;
  background:rgba(255,255,255,0.1);
  margin:0 10px;
}
body.light-mode .fsb-divider{ background:rgba(0,0,0,0.1); }

/* Progress Ring */
.menu-bar-progress{
  position:relative;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.menu-bar-progress:active{ transform:scale(0.92); }
.menu-bar-ring{
  width:48px;
  height:48px;
  transform:rotate(-90deg);
}
.ring-bg{
  fill:none;
  stroke:rgba(255,255,255,0.1);
  stroke-width:3.5;
}
body.light-mode .ring-bg{ stroke:rgba(0,0,0,0.55); }
.menu-bar-ring .ring-fill{
  fill:none;
  stroke:var(--accent-orange);
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-dasharray:81.68;
  stroke-dashoffset:81.68;
  transition:stroke-dashoffset 0.5s ease;
  filter:drop-shadow(0 0 4px rgba(212,148,90,0.4));
}
.menu-bar-progress.cable .menu-bar-ring .ring-fill{
  stroke:var(--blue);
  filter:drop-shadow(0 0 4px rgba(126,181,226,0.4));
}
.menu-bar-pct{
  position:absolute;
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,0.9);
  letter-spacing:-0.3px;
}
body.light-mode .menu-bar-pct{ color:rgba(0,0,0,0.75); }
/* Duration Timer */
.menu-bar-timer{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  padding:3px 0;
  border-radius:0;
  transition:background 0.15s ease;
}
body.light-mode .menu-bar-timer{ }
body.light-mode .menu-bar-timer:active{ background:rgba(0,0,0,0.06); }
.menu-bar-timer:active{ background:rgba(255,255,255,0.06); border-radius:6px; }
.menu-bar-timer-time{
  font-size:17px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.3px;
  color:rgba(255,255,255,0.5);
}
.menu-bar-timer.running .menu-bar-timer-time{
  color:var(--accent-orange);
  text-shadow:0 0 8px rgba(212,148,90,0.3);
}
.menu-bar-timer.running.cable .menu-bar-timer-time{
  color:var(--blue);
  text-shadow:0 0 8px rgba(126,181,226,0.3);
}
.menu-bar-timer.paused .menu-bar-timer-time{
  color:rgba(255,200,100,0.7);
  animation:pausedPulse 1.5s ease-in-out infinite;
}
@keyframes pausedPulse{
  0%,100%{ opacity:0.5; }
  50%{ opacity:1; }
}
body.light-mode .menu-bar-timer-time{ color:rgba(0,0,0,0.65); }
body.light-mode .menu-bar-timer.running .menu-bar-timer-time{
  color:rgba(60,175,120,0.9);
}
body.light-mode .menu-bar-timer.running.cable .menu-bar-timer-time{
  color:rgba(80,140,210,0.9);
}
/* Hide floating-status-bar when no workout loaded — see rule in main block */

/* Dim overlay behind expanded group */
.menu-dim-overlay{
  display:none;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.35);
  z-index:103;
  -webkit-tap-highlight-color:transparent;
}
.menu-dim-overlay.visible{
  display:block;
  animation:dimFadeIn 0.2s ease-out;
}
@keyframes dimFadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

/* Stagger animation for sub-items */
.menu-group.expanded .menu-group-item:nth-child(1){ animation:menuItemSlideUp 0.2s ease-out 0.03s both; }
.menu-group.expanded .menu-group-item:nth-child(2){ animation:menuItemSlideUp 0.2s ease-out 0.06s both; }
.menu-group.expanded .menu-group-item:nth-child(3){ animation:menuItemSlideUp 0.2s ease-out 0.09s both; }
.menu-group.expanded .menu-group-item:nth-child(4){ animation:menuItemSlideUp 0.2s ease-out 0.12s both; }
@keyframes menuItemSlideUp{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Small arrow pointer from panel to trigger */
.menu-group-items::after{
  display:none;
}
body.light-mode .menu-group-items::after{
  display:none;
}

/* Special set group (superset, pyramid, drop set) */
.special-set-group{
  margin-bottom:32px;
}
.special-set-number{
  display:flex;
  justify-content:center;
  margin-bottom:8px;
  margin-top:8px;
}
.special-set-box{
  border:1px solid rgba(255,255,255,0.06);
  border-radius:20px;
  padding:12px 8px;
  padding-top:66px;
  background:rgba(255,255,255,0.015);
  position:relative;
  margin-bottom:24px;
  margin-top:52px;
  margin-left:0;
  margin-right:0;
}
/* Number circle - centered on top edge of the special-set-box */
.special-set-group{
  position:relative;
  margin-top:12px;
}
.special-set-group .group-number-circle{
  position:absolute;
  top:32px;
  left:50%;
  transform:translateX(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  background:transparent;
  border:2.5px solid rgba(255,255,255,0.6);
  color:var(--white);
  font-size:15px;
  font-weight:700;
  display:grid;
  place-items:center;
  z-index:5;
  transition:all .3s cubic-bezier(0.25, 1, 0.5, 1);
}
.special-set-group.has-expanded .group-number-circle{
  background:var(--white);
  color:#000;
  border-color:var(--white);
}
.special-set-box.has-expanded{
  opacity:1;
  border-color:rgba(255,255,255,0.1);
}
.special-set-box.all-complete,
.special-set-box.has-pr,
.special-set-box.all-complete.has-pr{
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:none;
}
.special-set-box.all-complete.has-expanded,
.special-set-box.has-pr.has-expanded,
.special-set-box.all-complete.has-pr.has-expanded{
  opacity:1;
}

/* Corner label for special sets - centered below number circle */
.special-set-corner-label{
  position:absolute;
  top:26px;
  left:50%;
  transform:translateX(-50%);
  font-size:9px;
  font-weight:600;
  letter-spacing:2px;
  color:rgba(212,175,55,0.4);
  text-transform:uppercase;
  cursor:pointer;
  padding:2px 8px;
  border-radius:6px;
  background:transparent;
  border:none;
  transition:all 0.2s ease;
  display:flex;
  align-items:center;
  gap:4px;
}
.special-set-corner-label.superset{
  color:rgba(162,100,190,0.7);
  background:transparent;
  border:none;
}
.special-set-corner-label::after{
  content:'ⓘ';
  font-size:10px;
  opacity:0.5;
  text-transform:none;
}
.special-set-corner-label:active{
  color:rgba(212,175,55,0.6);
}
.special-set-corner-label.superset:active{
  color:rgba(162,100,190,0.5);
}

.superset-completion-counter{
  display:none;
}
.superset-completion-counter.all-done{
  color:var(--accent-orange);
}
.superset-completion-counter.all-done{
  color:var(--accent-orange);
}
body.light-mode .superset-completion-counter{
  color:var(--text);
}
body.light-mode .superset-completion-counter.all-done{
  color:var(--accent-orange);
}

/* Radar pulse animation */
@keyframes radarPulse{
  0%{transform:scale(1);opacity:0.6;}
  70%{transform:scale(1.8);opacity:0;}
  100%{transform:scale(1.8);opacity:0;}
}
@keyframes prFlash{
  0%{box-shadow:0 0 0 0 rgba(212,188,138,0.5);}
  50%{box-shadow:0 0 20px 4px rgba(212,188,138,0.3);}
  100%{box-shadow:0 0 0 0 rgba(212,188,138,0);}
}
.pr-highlight-flash{
  animation:prFlash 0.75s ease-out 2;
  border-radius:12px;
}

/* Stepper glow pulse - quick flash when +/- is pressed */
@keyframes stepperGlow{
  0%{box-shadow:0 0 0 0 var(--glow-color, rgba(255,255,255,0.6));}
  50%{box-shadow:0 0 18px 4px var(--glow-color, rgba(255,255,255,0.4));}
  100%{box-shadow:0 0 0 0 var(--glow-color, rgba(255,255,255,0));}
}
.stepper-glow{
  animation:stepperGlow 0.4s ease-out 1 !important;
  --glow-color:rgba(255,255,255,0.5);
}
.stepper-glow.all-complete:not(.has-pr),
.stepper-glow[data-week-type="free"].all-complete:not(.has-pr){
  --glow-color:rgba(212,148,90,0.5);
}
.stepper-glow[data-week-type="cable"].all-complete:not(.has-pr){
  --glow-color:rgba(126,181,226,0.5);
}
.stepper-glow.has-pr{
  --glow-color:rgba(212,188,138,0.5);
}
/* Standard cards */
.ex-card.stepper-glow:not(.superset-combined-card){
  --glow-color:rgba(255,255,255,0.5);
}
.ex-card.stepper-glow.completed-card[data-week-type="free"]{
  --glow-color:rgba(212,148,90,0.5);
}
.ex-card.stepper-glow.completed-card[data-week-type="cable"]{
  --glow-color:rgba(126,181,226,0.5);
}
.ex-card.stepper-glow.has-pr{
  --glow-color:rgba(212,188,138,0.5);
}
body.light-mode .stepper-glow{
  --glow-color:rgba(0,0,0,0.6);
}
body.light-mode .stepper-glow.all-complete:not(.has-pr){
  --glow-color:rgba(34,197,94,0.4);
}
body.light-mode .stepper-glow[data-week-type="cable"].all-complete:not(.has-pr){
  --glow-color:rgba(80,136,212,0.4);
}
body.light-mode .stepper-glow.has-pr{
  --glow-color:rgba(212,188,138,0.5);
}
.radar-pulse{
  overflow:visible;
}
.radar-pulse::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  border-radius:inherit;
  border:2px solid currentColor;
  opacity:0;
  pointer-events:none;
}
.radar-pulse.pulse-active::before{
  animation:radarPulse 1.2s ease-out forwards;
}
/* Ensure nav-btn has position for radar pulse */
.nav-btn.radar-pulse{
  position:relative;
}

.special-set-label{
  font-size:14px;
  font-weight:900;
  letter-spacing:2px;
  color:#FFFFFF;
  text-align:center;
  display:block;
  list-style:none;
}
.special-set-label::before{
  content:none !important;
}

/* Superset divider with arrows */
.special-set-divider{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:8px 0;
  gap:2px;
}
.superset-arrow{
  width:20px;
  height:20px;
  color:#FFFFFF;
  opacity:0.8;
}
.superset-arrow.up{
  transform:rotate(0deg);
}
.superset-arrow.down{
  transform:rotate(0deg);
}

/* Standard exercise wrapper */
.standard-exercise{
  margin-bottom:12px;
  position:relative;
}
/* Show number circle straddling top edge of expanded card in workoutContainer */
#workoutContainer .standard-exercise .ex-card{
  margin-top:0;
  overflow:visible;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
  border-radius:var(--radius-lg);
  box-shadow:none;
  opacity:1;
  padding:8px 4px 12px;
}
#workoutContainer .standard-exercise .ex-number-circle-wrapper{
  display:none;
}
#workoutContainer .standard-exercise .ex-number-circle{
  width:36px;
  height:36px;
  font-size:13px;
  border-width:2.5px;
}
body.light-mode #workoutContainer .standard-exercise .ex-card{
  background:rgba(0,0,0,0.015);
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
/* Inside unified panel, suppress expanded card box-shadows */
#workoutContainer .ex-card.expanded{
  box-shadow:none;
}

.ex-card{
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:22px;
  overflow:hidden;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:all .3s cubic-bezier(0.25, 1, 0.5, 1);
  position:relative;
  margin-bottom:10px;
  margin-top:2px;
  opacity:1;
}
/* Card content animate-in when exercise switches */
@keyframes cardContentIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
/* Number circle wrapper - inline badge at top of card */
.ex-number-circle-wrapper{
  display:none;
}
/* Number badge shown inline in header */
.ex-number-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:5px;
  background:rgba(255,255,255,0.05);
  border:none;
  color:rgba(255,255,255,0.3);
  font-size:9px;
  font-weight:600;
  letter-spacing:0.5px;
  flex-shrink:0;
}
/* Show inline badge in expanded cards (circle hidden) */
#workoutContainer .standard-exercise .ex-number-badge{
  display:none !important;
}
/* Hide floating number circle */
#workoutContainer .standard-exercise .ex-number-circle-wrapper{
  display:none;
}
body.light-mode .ex-number-badge{
  background:rgba(0,0,0,0.08);
  border-color:rgba(0,0,0,0.65);
  color:rgba(0,0,0,0.6);
}
/* Expanded card glows */
.ex-card.expanded{
  opacity:1;
  border:none;
  box-shadow:none;
  background:transparent;
  position:relative;
}

/* Completion status for expanded ex-card - Complete only */
.ex-card.expanded.all-complete:not(.has-pr){
  border:none;
  box-shadow:inset 0 0 0 2px rgba(212,148,90,0.4), 0 0 24px rgba(212,148,90,0.1);
  background:rgba(212,148,90,0.04);
  border-radius:var(--radius-lg);
}
.ex-card.expanded.all-complete:not(.has-pr)[data-week-type="cable"]{
  box-shadow:inset 0 0 0 2px rgba(126,181,226,0.4), 0 0 24px rgba(126,181,226,0.1);
  background:rgba(126,181,226,0.04);
}

/* PR only - gold tint */
.ex-card.expanded.has-pr:not(.all-complete){
  border:none;
  box-shadow:inset 0 0 0 2px rgba(212,188,138,0.4), 0 0 24px rgba(212,188,138,0.1);
  background:rgba(212,188,138,0.04);
  border-radius:var(--radius-lg);
  overflow:visible;
}
.ex-card.expanded.has-pr:not(.all-complete)::before,
.ex-card.expanded.has-pr:not(.all-complete)::after{
  display:none;
}

/* Complete + PR - combined glow */
.ex-card.expanded.all-complete.has-pr{
  border:none;
  box-shadow:inset 0 0 0 2px rgba(212,148,90,0.35), 0 0 24px rgba(212,188,138,0.1);
  background:rgba(212,148,90,0.04);
  border-radius:var(--radius-lg);
  overflow:visible;
}
.ex-card.expanded.all-complete.has-pr::before,
.ex-card.expanded.all-complete.has-pr::after{
  display:none;
}

/* Non-expanded cards stay subtle */
.ex-card:not(.expanded).all-complete,
.ex-card:not(.expanded).has-pr,
.ex-card:not(.expanded).all-complete.has-pr{
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:none;
}

/* Superset Combined Card Styles */
.superset-combined-card{
  position:relative;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  padding:4px 6px 8px;
  margin-top:4px;
  overflow:visible;
  box-shadow:0 2px 12px rgba(0,0,0,0.15);
}

/* Superset card completion - subtle glass glow */
.superset-combined-card.all-complete:not(.has-pr){
  box-shadow:inset 0 0 0 1px rgba(212,148,90,0.15);
  background:rgba(212,148,90,0.02);
}
.superset-combined-card.all-complete:not(.has-pr)[data-week-type="cable"]{
  box-shadow:inset 0 0 0 1px rgba(126,181,226,0.15);
  background:rgba(126,181,226,0.02);
}

/* Superset card PR only - subtle gold */
.superset-combined-card.has-pr:not(.all-complete){
  border:none;
  box-shadow:inset 0 0 0 1px rgba(212,188,138,0.12);
  background:rgba(212,188,138,0.02);
}
.superset-combined-card.has-pr:not(.all-complete)::before,
.superset-combined-card.has-pr:not(.all-complete)::after{ display:none; }

/* Superset card Complete + PR */
.superset-combined-card.all-complete.has-pr{
  border:none;
  box-shadow:inset 0 0 0 1px rgba(212,148,90,0.12);
  background:rgba(212,148,90,0.02);
}
.superset-combined-card.all-complete.has-pr::before,
.superset-combined-card.all-complete.has-pr::after{ display:none; }
.superset-combined-card.all-complete.has-pr[data-week-type="cable"]{
  box-shadow:inset 0 0 0 1px rgba(126,181,226,0.12);
  background:rgba(126,181,226,0.02);
}

.superset-combined-card .video-btn-wrapper{
  position:absolute;
  top:12px;
  right:12px;
  z-index:10;
}

/* Superset combined card — light mode */
body.light-mode .superset-combined-card{
  background:rgba(0,0,0,0.015);
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
body.light-mode .superset-combined-card.all-complete:not(.has-pr){
  box-shadow:inset 0 0 0 1px rgba(60,175,130,0.15);
  background:rgba(60,175,130,0.03);
}
body.light-mode .superset-combined-card.all-complete:not(.has-pr)[data-week-type="cable"]{
  box-shadow:inset 0 0 0 1px rgba(80,136,212,0.15);
  background:rgba(80,136,212,0.03);
}
body.light-mode .superset-combined-card.has-pr:not(.all-complete){
  box-shadow:inset 0 0 0 1px rgba(180,150,80,0.15);
  background:rgba(180,150,80,0.03);
}
body.light-mode .superset-combined-card.all-complete.has-pr{
  box-shadow:inset 0 0 0 1px rgba(60,175,130,0.15);
  background:rgba(60,175,130,0.03);
}
body.light-mode .superset-combined-card.all-complete.has-pr[data-week-type="cable"]{
  box-shadow:inset 0 0 0 1px rgba(80,136,212,0.15);
  background:rgba(80,136,212,0.03);
}

/* New superset block structure */
.superset-blocks-container{
  display:flex;
  flex-direction:row;
  gap:0;
}

.superset-block{
  padding:0;
  overflow:visible;
  position:relative;
}
.superset-block:first-child{
  padding-top:0;
}
.superset-block:last-child{
  padding-bottom:0;
}

.superset-blocks-container{
  display:flex;
  flex-direction:row;
  overflow-x:scroll;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.superset-blocks-container::-webkit-scrollbar{ display:none; }
.superset-block{
  flex:0 0 100%;
  min-width:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  padding:4px 12px;
  box-sizing:border-box;
}
.superset-block-divider{ display:none; }

.superset-block-header{
  font-size:10px;
  font-weight:700;
  color:rgba(162,100,190,0.6);
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:1.5px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:default;
  padding:8px 0 6px;
  background:transparent;
  border-radius:0;
  border:none;
  pointer-events:none;
  position:relative;
  right:auto;
  top:auto;
  transform:none;
  z-index:2;
  white-space:nowrap;
}
.superset-block-header.no-collapse{
  cursor:default;
}

.superset-block-header.header-extended{
  transform:none;
  opacity:1;
}
.superset-block-header:active{
  background:transparent;
}
body.light-mode .superset-block-header{
  background:transparent;
  border:none;
  color:rgba(162,100,190,0.5);
}
.superset-block-header-text{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
  color:rgba(162,100,190,0.5);
  background:rgba(162,100,190,0.06);
  padding:5px 14px;
  border-radius:20px;
  border:1px solid rgba(162,100,190,0.1);
}
body.light-mode .superset-block-header-text{
  background:rgba(162,100,190,0.06);
  border-color:rgba(162,100,190,0.1);
  color:rgba(162,100,190,0.6);
}
.superset-block-check{
  color:var(--accent-orange);
  font-size:13px;
  font-weight:800;
  margin-left:2px;
  display:none;
}
.superset-block.set-complete .superset-block-check{
  display:inline !important;
}
[data-week-type="cable"] .superset-block-check{
  color:var(--blue);
}
.superset-block-chevron{
  display:none;
}
.superset-block-chevron svg{
  width:100%;
  height:100%;
  stroke:var(--purple);
  stroke-width:2;
  fill:none;
}
.superset-block.collapsed .superset-block-chevron{
  transform:rotate(-90deg);
}
.superset-block-content{
  overflow:visible;
  max-height:2000px;
  opacity:1;
  background:transparent;
  border:none;
  border-radius:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding:0;
  box-shadow:none;
}
body.light-mode .superset-block-content{
  background:transparent;
  border:none;
  box-shadow:none;
}
.superset-block.collapsed .superset-block-content{
  /* Override: never collapse - horizontal snap handles navigation */
  max-height:2000px;
  opacity:1;
  padding:0;
  overflow:visible;
}

/* Hide rest button and divider after collapsed superset block */
.superset-block.collapsed + .between-set-rest,
.superset-block.collapsed + .rest-pill-row{
  display:none;
}
.superset-block.collapsed + .between-set-rest + .superset-block-divider{
  display:none;
}
.superset-block.collapsed + .rest-pill-row + .superset-block-divider{
  display:none;
}

.superset-expand-hint{
  display:none !important;
}
.superset-block.collapsed .superset-expand-hint{
  display:none !important;
}

.superset-block-divider{
  height:1px;
  background:rgba(255,255,255,0.15);
  margin:8px 0;
}

.superset-exercise-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
  position:relative;
  overflow:visible;
  flex:0 0 100%;
  min-width:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  box-sizing:border-box;
}
.superset-exercise-item > *{
  width:100%;
  box-sizing:border-box;
}
.superset-exercise-item > .superset-exercise-top,
.superset-exercise-item > .superset-name-row,
.superset-exercise-item > .superset-images-row,
.superset-exercise-item > .superset-pr-inline,
.superset-exercise-item > .superset-focus-section,
.superset-exercise-item > .superset-meta,
.superset-exercise-item > .ss-item-top-row,
.superset-exercise-item > .superset-set-row{
  width:100%;
}

/* Superset item top row - info only (thumb moved to sidebar) */
.ss-item-top-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  width:100%;
}

/* Left-side thumbnail sidebar - one per A/B exercise, positioned outside card edge */
.ss-thumb-sidebar{
  display:none !important;
  top:8px;
  left:0;
  transform:translateX(calc(-100% - 4px));
  z-index:20;
  padding:4px 4px 10px;
  border-radius:0 10px 10px 0;
  background:#0a0a0e;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,0.08);
  border-left:none;
  opacity:1;
  transition:opacity 0.25s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  cursor:pointer;
  pointer-events:auto;
}
/* Tucked = idle, slide further left */
.ss-thumb-sidebar.thumb-tucked{
  transform:translateX(calc(-100% - 18px));
  opacity:0.5;
}
/* Extended = user tapped, slide closer to card */
.ss-thumb-sidebar.thumb-extended{
  transform:translateX(calc(-100% + 6px));
  opacity:1;
}
body.light-mode .ss-thumb-sidebar{
  background:#ffffff;
  border-color:rgba(0,0,0,0.65);
}

.ss-thumb-wrap{
  position:relative;
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:8px;
  overflow:visible;
  cursor:pointer;
}
.ss-thumb-img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
  cursor:pointer;
  transition:transform .15s ease;
}
.ss-thumb-img:active{
  transform:scale(0.92);
}
.ss-thumb-video{
  position:absolute;
  bottom:-6px;
  left:50%;
  transform:translateX(-50%);
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(0,0,0,0.45);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
  border:none;
  pointer-events:none;
}
.ss-thumb-video svg{
  width:9px;
  height:9px;
  color:rgba(255,255,255,0.9);
  margin-left:1px;
}
body.light-mode .ss-thumb-video{
  background:rgba(255,255,255,0.6);
  border:none;
}
body.light-mode .ss-thumb-video svg{
  color:rgba(0,0,0,0.7);
}
.ss-item-info{
  flex:1;
  min-width:0;
}
.superset-exercise-item:last-child{
  border-bottom:none;
}

.superset-exercise-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

/* Superset images row - workout image + focus image side by side */
.superset-images-row{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:16px;
  margin-bottom:10px;
  padding-bottom:8px;
}

/* Superset thumb + video row - image with centered video overlay */
.superset-thumb-video-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Superset name row - letter + name centered */
.superset-name-row{
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:center;
  margin-bottom:4px;
}

.superset-ex-thumb{
  width:80px;
  height:80px;
  border-radius:12px;
  object-fit:contain;
  flex-shrink:0;
  cursor:pointer;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.superset-ex-thumb:active{
  transform:scale(0.95);
}

.superset-ex-thumb-placeholder{
  width:80px;
  height:80px;
  border-radius:12px;
  background:rgba(255,255,255,0.1);
  flex-shrink:0;
}

/* Larger superset thumb when inside images row */
.superset-images-row .superset-ex-thumb{
  width:140px;
  height:140px;
  border-radius:20px;
}
.superset-images-row .superset-ex-thumb-placeholder{
  width:140px;
  height:140px;
  border-radius:20px;
}

.superset-exercise-letter{
  font-size:13px;
  font-weight:700;
  color:var(--purple);
  flex-shrink:0;
  min-width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(162,100,190,0.1);
  border:1.5px solid rgba(162,100,190,0.15);
  border-radius:10px;
  letter-spacing:0.5px;
}

.superset-exercise-name{
  font-size:15px;
  font-weight:600;
  color:var(--white);
  letter-spacing:-0.2px;
}

/* Superset muscle focus image - same size as workout thumb */
.superset-focus-section{
  display:flex;
  justify-content:center;
  padding:8px 0 4px;
}
.superset-focus-img{
  display:flex;
  flex-direction:column;
  align-items:center;
  cursor:pointer;
}
.superset-focus-img img{
  width:80px;
  height:80px;
  object-fit:contain;
  border-radius:12px;
}
/* Larger superset focus when inside images row */
.superset-images-row .superset-focus-img{
  width:140px;
  height:140px;
  border-radius:20px;
  background:rgba(255,255,255,0.05);
  overflow:hidden;
  position:relative;
}
.superset-images-row .superset-focus-img img{
  width:100%;
  height:100%;
  border-radius:0;
}
.superset-images-row .superset-focus-label{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0,0,0,0.7);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  font-size:10px;
  font-weight:700;
  color:#fff;
  padding:4px 0;
  letter-spacing:1px;
}
.superset-focus-label{
  font-size:9px;
  font-weight:600;
  letter-spacing:1px;
  color:rgba(255,255,255,0.5);
  text-align:center;
  padding:3px 0;
}
body.light-mode .superset-focus-label{
  color:rgba(0,0,0,0.65);
}
body.light-mode .superset-images-row .superset-focus-label{
  background:rgba(0,0,0,0.6);
  color:#fff;
}
body.light-mode .superset-images-row .superset-focus-img{
  background:rgba(0,0,0,0.05);
}
body.light-mode .ex-images-row .ex-img-inline{
  background:rgba(0,0,0,0.05);
}
body.light-mode .ex-images-row .ex-muscle-label{
  background:rgba(0,0,0,0.6);
  color:#fff;
}

/* Non-collapsible header (single superset) */
.superset-block-header.no-collapse{
  cursor:default;
  background:transparent;
  border:none;
  padding:8px 0;
}
.superset-block-header.no-collapse:active{
  background:transparent;
}

.superset-video-btn{
  position:absolute;
  bottom:-14px;
  left:50%;
  transform:translateX(-50%);
  width:36px;
  height:36px;
  border-radius:10px;
  background:#1e1e1e;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition:all 0.2s ease;
  z-index:5;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.superset-video-btn:hover{
  background:rgba(255,255,255,0.15);
}
.superset-video-btn svg{
  width:18px;
  height:18px;
  stroke:var(--white);
}

.superset-goal-time{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.7);
  text-align:center;
  padding:8px 16px;
  background:rgba(255,255,255,0.06);
  border-radius:50px;
  cursor:pointer;
  transition:all 0.2s ease;
  align-self:center;
  border:1px solid rgba(255,255,255,0.1);
}
.superset-goal-time:active{
  transform:scale(0.96);
  background:rgba(255,255,255,0.12);
}
.superset-goal-time svg{
  width:14px;
  height:14px;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
  flex-shrink:0;
}
.superset-goal-time.running .goal-time-text{
  display:none;
}
.superset-goal-time.running .timer-time{
  display:inline !important;
  font-weight:700;
}
.superset-goal-time.running .timer-label{
  display:inline !important;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.superset-pr-inline{
  display:flex;
  align-items:center;
  gap:5px;
  padding:3px 0;
  background:none;
  border:none;
  border-radius:0;
  margin:0;
  min-height:auto;
  justify-content:center;
}

.superset-pr-label{
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.2);
  text-transform:uppercase;
  letter-spacing:1px;
  flex-shrink:0;
  background:none;
  padding:0;
  border-radius:0;
}

.superset-pr-value{
  font-size:10px;
  font-weight:600;
  color:rgba(255,255,255,0.3);
  white-space:nowrap;
}

.superset-pr-date{
  font-size:10px;
  color:rgba(255,255,255,0.15);
  margin-left:0;
}

.superset-pr-new{
  display:none;
  align-items:center;
  gap:0;
  margin-left:0;
}

.superset-pr-new .pr-trophy{
  width:12px;
  height:12px;
}

.superset-pr-new-text{
  display:none;
}

.superset-pr-inline.has-pr .superset-pr-new{
  display:flex;
}
.superset-pr-inline.has-pr .superset-pr-value{
  color:var(--gold);
  font-weight:700;
}
.superset-pr-inline.has-pr .superset-pr-label{
  color:var(--gold);
  background:none;
  opacity:0.8;
}

.superset-set-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:4px 0;
}
.superset-set-row .set-banner{
  width:100%;
}
.superset-set-banner{
  width:100%;
  margin-bottom:8px;
}
.superset-set-inputs{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:rgba(255,255,255,0.035);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  padding:10px 18px;
  box-shadow:0 2px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.04);
}

.superset-set-label{
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.6);
  min-width:45px;
}

.superset-set-input-group{
  display:flex;
  align-items:center;
  background:rgba(255,255,255,0.06);
  border-radius:10px;
  overflow:hidden;
}

.superset-set-input-group .stepper-btn{
  width:42px;
  height:42px;
  background:var(--interactive);
  border:1.5px solid var(--interactiveBorder);
  border-radius:12px;
  color:rgba(255,255,255,0.5);
  font-size:20px;
  font-weight:300;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.superset-set-input-group .stepper-btn:active{
  background:var(--interactiveHover);
  color:rgba(255,255,255,0.8);
}

.superset-input{
  width:64px;
  height:auto;
  padding:12px 4px;
  background:var(--well);
  border:1.5px solid var(--wellBorder);
  border-radius:var(--radius-md);
  text-align:center;
  font-size:var(--text-xl);
  font-weight:700;
  color:var(--white);
  letter-spacing:-0.5px;
}

.superset-input.free{
  background:rgba(212,148,90,0.12);
  border-color:rgba(212,148,90,0.35);
}
.superset-input.zero-value{
  border-style:dashed;
  border-color:rgba(255,255,255,0.06);
  background:rgba(13,13,18,0.6);
  color:rgba(255,255,255,0.15);
}

.superset-input-unit{
  font-size:var(--text-xs);
  font-weight:600;
  color:rgba(255,255,255,0.85);
  text-transform:uppercase;
  letter-spacing:1.5px;
  min-width:24px;
}
body.light-mode .superset-input-unit{
  color:rgba(0,0,0,0.7);
}

.superset-x{
  font-size:12px;
  color:rgba(255,255,255,0.35);
  margin:0 2px;
}

/* Superset rest button section */
.superset-rest-section{
  display:flex;
  justify-content:flex-start;
  padding:12px 0;
}

.superset-rest-btn{
  min-width:80px;
}

/* Light mode superset */
body.light-mode .superset-exercise-name{
  color:var(--text);
}
body.light-mode .superset-block-header{
  color:rgba(162,100,190,0.35);
  background:transparent;
  border:none;
}
body.light-mode .superset-block-chevron svg{
  stroke:var(--purple);
}
body.light-mode .superset-exercise-divider{
  background:rgba(0,0,0,0.12);
}
body.light-mode .superset-block-divider{
  background:rgba(0,0,0,0.15);
}
body.light-mode .superset-exercise-item{
  border-bottom-color:rgba(0,0,0,0.65);
}
body.light-mode .superset-exercise-section .set-block{
  border-bottom-color:rgba(0,0,0,0.08);
}
body.light-mode .superset-set-label{
  color:rgba(0,0,0,0.6);
}
body.light-mode .superset-goal-time{
  color:rgba(0,0,0,0.6);
  background:rgba(0,0,0,0.05);
  border-color:rgba(0,0,0,0.65);
}
body.light-mode .superset-video-btn{
  background:#f0f0f0;
  border-color:rgba(0,0,0,0.65);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
body.light-mode .superset-video-btn svg{
  stroke:var(--text);
}

/* Old styles - keep for backward compat */
.superset-exercises-container{
  display:flex;
  flex-direction:column;
  gap:0;
}
.superset-exercise-section{
  padding:12px 0;
}
.superset-exercise-section:first-child{
  padding-top:0;
}
.superset-exercise-section:last-child{
  padding-bottom:0;
}
.superset-exercise-header{
  margin-bottom:8px;
}
.superset-exercise-divider{
  height:1px;
  background:rgba(255,255,255,0.1);
  margin:8px 0;
}
.superset-exercise-section .pr-section{
  margin:8px 0 12px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,0.03);
}
.superset-exercise-section .set-block{
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.superset-exercise-section .set-block:last-child{
  border-bottom:none;
}

.special-set-box .ex-card{
  border:1px solid rgba(255,255,255,0.08);
  margin-bottom:8px;
  margin-top:20px;
  opacity:0.8;
  border-radius:18px;
  background:rgba(255,255,255,0.02);
}
.special-set-box .ex-card .ex-header{
  padding:22px 16px 18px;
}
.special-set-box .ex-card:first-child{
  margin-top:24px;
}
.special-set-box .ex-card:last-child{
  margin-bottom:4px;
}
.special-set-box .ex-card.expanded{
  opacity:1;
  border-color:rgba(255,255,255,0.25);
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
}
/* Special-set-box completion status - uses 18px border radius */
.special-set-box .ex-card.expanded.has-pr:not(.all-complete)::before,
.special-set-box .ex-card.expanded.all-complete.has-pr::before{
  border-radius:18px 18px 0 0;
}
.special-set-box .ex-card.expanded.has-pr:not(.all-complete)::after,
.special-set-box .ex-card.expanded.all-complete.has-pr::after{
  border-radius:0 0 18px 18px;
}
/* Show small letter circles (1A, 1B) above each card in special-set-box */
.special-set-box > .ex-number-circle-wrapper{
  display:none;
  justify-content:center;
  position:absolute;
  top:-18px;
  left:0;
  right:0;
  z-index:5;
}
.special-set-box > .ex-number-circle-wrapper .ex-number-circle{
  width:36px;
  height:36px;
  font-size:13px;
  border-width:2.5px;
}
.special-set-box .exercise-hero-img{
  width:160px;
  height:160px;
  border-radius:20px;
}
.special-set-box .ex-name{
  font-size:15px;
}

/* Number circle on card */
.ex-number-circle{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--white);
  border:2px solid var(--white);
  color:var(--bg);
  font-size:13px;
  font-weight:700;
  display:grid;
  place-items:center;
  flex-shrink:0;
  transition:all .3s cubic-bezier(0.25, 1, 0.5, 1);
  position:relative;
  box-shadow:0 2px 12px rgba(0,0,0,0.25);
}

/* Exercise Media Strip - compact glass row */
.ex-media-strip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px 8px;
}
.ex-media-thumb{
  width:40px;
  height:40px;
  border-radius:10px;
  overflow:hidden;
  flex-shrink:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ex-media-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.ex-media-thumb:active{ opacity:0.7; }
.ex-media-actions{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
  flex-shrink:0;
}
.ex-media-btn{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.05);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ex-media-btn:active{ background:rgba(255,255,255,0.12); }
.ex-media-btn svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:rgba(255,255,255,0.45);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ex-media-btn.video-btn svg{
  fill:rgba(255,255,255,0.45);
  stroke:none;
}
.ex-media-btn.muscle-btn img{
  width:20px;
  height:20px;
  object-fit:contain;
  opacity:0.55;
}
body.light-mode .ex-media-strip{
  /* inherits */
}
body.light-mode .ex-media-btn{ background:rgba(0,0,0,0.06); }
body.light-mode .ex-media-btn:active{ background:rgba(0,0,0,0.08); }
body.light-mode .ex-media-btn svg{ stroke:rgba(0,0,0,0.55); }
body.light-mode .ex-media-btn.video-btn svg{ fill:rgba(0,0,0,0.55); }
body.light-mode .ex-media-btn.muscle-btn img{ filter:invert(1); opacity:0.35; }

/* Superset inline media row */
.ss-media-strip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 0 4px;
}
.ss-media-thumb{
  width:36px;
  height:36px;
  border-radius:9px;
  overflow:hidden;
  flex-shrink:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ss-media-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.ss-media-thumb:active{ opacity:0.7; }
.ss-media-actions{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
}
.ss-media-btn{
  width:30px;
  height:30px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.05);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.15s ease, transform 0.15s ease;
}
.ss-media-btn:active{ background:rgba(255,255,255,0.12); }
.ss-media-btn svg{
  width:13px; height:13px;
  fill:rgba(255,255,255,0.45);
  stroke:none;
}
.ss-media-btn.muscle img{
  width:16px; height:16px;
  object-fit:contain;
  opacity:0.55;
}
body.light-mode .ss-media-btn{ background:rgba(0,0,0,0.06); }
body.light-mode .ss-media-btn:active{ background:rgba(0,0,0,0.06); }
body.light-mode .ss-media-btn svg{ fill:rgba(0,0,0,0.55); }
body.light-mode .ss-media-btn.muscle img{ filter:invert(1); opacity:0.35; }

.ex-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:12px 0 8px;
  cursor:pointer;
  transition:background .2s ease;
}
.ex-header:active{
  background:rgba(255,255,255,0.02);
}

/* Images row - workout image + focus image side by side */
.ex-images-row{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:14px;
  width:100%;
  padding:0 16px;
  box-sizing:border-box;
}

/* Exercise Hero Image */
.exercise-hero-img{
  display:none;
  flex:1;
  max-width:180px;
  aspect-ratio:1/1;
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  overflow:hidden;
  flex-shrink:0;
  cursor:pointer;
  transition:transform 0.15s ease;
}
.exercise-hero-img:active{
  transform:scale(0.95);
}
.exercise-hero-img img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Exercise hero wrapper - positions video btn overlay */
.exercise-hero-wrapper{
  position:relative;
  display:flex;
  justify-content:center;
}
.exercise-hero-wrapper .video-btn-wrapper{
  position:absolute;
  bottom:-14px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  padding:0;
}
.exercise-hero-wrapper .video-btn{
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
  background:#1e1e1e;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.light-mode .exercise-hero-wrapper .video-btn{
  background:#f0f0f0;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

/* Inline muscle focus image - same size as hero in images row */
.ex-images-row .ex-img-inline{
  flex:1;
  max-width:180px;
  aspect-ratio:1/1;
  border-radius:18px;
  background:rgba(255,255,255,0.05);
  overflow:hidden;
}
.ex-images-row .ex-img-inline img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.ex-images-row .ex-muscle-label{
  font-size:10px;
  font-weight:700;
  padding:5px 0;
  letter-spacing:1px;
  color:#fff;
  background:rgba(0,0,0,0.65);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Centered muscle focus image (legacy standalone) */
.exercise-focus-section{
  display:flex;
  justify-content:center;
  padding:14px 0 18px;
}
.exercise-focus-section .ex-img-inline{
  width:110px;
  height:110px;
  border-radius:20px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 4px 20px rgba(0,0,0,0.2);
}
.exercise-focus-section .ex-muscle-label{
  font-size:10px;
  padding:4px 0;
  letter-spacing:1px;
  background:rgba(0,0,0,0.6);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Set banner - full-width outlined label */
.set-banner{
  text-align:center;
  font-size:9px;
  font-weight:800;
  color:rgba(255,255,255,0.4);
  text-transform:uppercase;
  letter-spacing:3px;
  border:none;
  border-top:1px solid rgba(255,255,255,0.06);
  border-radius:0;
  padding:14px 0 6px;
  background:none;
  position:relative;
}
.set-banner:first-child{
  border-top:none;
  padding-top:0;
}
.set-banner.cable{
  color:rgba(255,255,255,0.35);
}
/* Completed sets turn green (free) or blue (cable) */
.set-banner.set-done{
  color:var(--accent-orange);
  border-top-color:rgba(212,148,90,0.2);
}
.set-banner.cable.set-done{
  color:var(--blue);
  border-top-color:rgba(126,181,226,0.2);
}
body.light-mode .set-banner{
  color:rgba(0,0,0,0.35);
  border:none;
  border-top:1px solid rgba(0,0,0,0.08);
}
body.light-mode .set-banner.cable{
  color:rgba(0,0,0,0.35);
}
body.light-mode .set-banner.set-done{
  color:#22c55e;
  border-top-color:rgba(34,197,94,0.2);
}
body.light-mode .set-banner.cable.set-done{
  color:#5088d4;
  border-top-color:rgba(80,136,212,0.2);
}

/* === COMPACT EXPANDED CARD STYLES === */

/* Slim set banner - centered pill with decorative lines */
.set-banner-slim{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  padding:0 4px;
  border:none;
  border-radius:0;
  margin-bottom:6px;
  background:none;
  width:100%;
}
.set-banner-slim::before,
.set-banner-slim::after{ display:none; }
.set-banner-slim:first-child{
  padding-top:0;
}
.set-banner-slim .set-banner-pill{
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:8px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,0.5);
  text-transform:uppercase;
  letter-spacing:1.2px;
  white-space:nowrap;
  transition:all 0.2s ease;
}
.set-banner-slim .set-banner-check{
  display:none;
  width:11px;
  height:11px;
  stroke:currentColor;
  stroke-width:3;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.set-banner-slim.set-done .set-banner-pill{
  color:rgba(212,148,90,0.8);
  background:rgba(212,148,90,0.1);
  border-color:rgba(212,148,90,0.2);
}
.set-banner-slim.set-done .set-banner-check{
  display:block;
}
.set-banner-slim.set-done::before{ display:none; }
.set-banner-slim.set-done::after{ display:none; }
.set-banner-slim.cable.set-done .set-banner-pill{
  color:rgba(126,181,226,0.8);
  background:rgba(126,181,226,0.1);
  border-color:rgba(126,181,226,0.2);
}
.set-banner-slim.cable.set-done::before{ display:none; }
.set-banner-slim.cable.set-done::after{ display:none; }
body.light-mode .set-banner-slim::before{ display:none; }
body.light-mode .set-banner-slim::after{ display:none; }
body.light-mode .set-banner-slim .set-banner-pill{
  color:rgba(0,0,0,0.7);
  background:rgba(0,0,0,0.05);
  border-color:rgba(0,0,0,0.65);
}
body.light-mode .set-banner-slim.set-done .set-banner-pill{
  color:rgba(34,197,94,0.85);
  background:rgba(34,197,94,0.08);
  border-color:rgba(34,197,94,0.2);
}
body.light-mode .set-banner-slim.cable.set-done .set-banner-pill{
  color:rgba(80,136,212,0.55);
}

/* Compact set block - horizontal snap pages (Apple-style) */
.compact-set-block{
  flex:0 0 100%;
  min-width:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  padding:6px 16px 0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}

/* Show rest-pill-row between sets in stacked layout */
.compact-sets .rest-pill-row{
  display:flex;
  justify-content:center;
  padding:2px 0;
  width:100%;
}
/* Active rest indicator — visible outside scroll containers */
.active-rest-indicator{
  padding:6px 12px;
}
.active-rest-bar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:36px;
  background:rgba(255,255,255,0.04);
  border:1.5px solid rgba(255,255,255,0.07);
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
}
.active-rest-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:100%;
  border-radius:9px;
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
  pointer-events:none;
  z-index:0;
}
.active-rest-text{
  position:relative;
  z-index:2;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.5px;
  color:rgba(255,255,255,0.5);
}
.active-rest-indicator.running .active-rest-text{
  color:rgba(255,255,255,0.85);
}
.active-rest-indicator.running.free .active-rest-fill{
  background:rgba(212,148,90,0.3);
}
.active-rest-indicator.running.cable .active-rest-fill{
  background:rgba(126,181,226,0.3);
}
.active-rest-indicator.running.free .active-rest-text{
  color:var(--accent-orange);
}
.active-rest-indicator.running.cable .active-rest-text{
  color:var(--blue);
}
body.light-mode .active-rest-bar{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.08);
}
body.light-mode .active-rest-text{
  color:rgba(0,0,0,0.65);
}
body.light-mode .active-rest-indicator.running .active-rest-text{
  color:rgba(0,0,0,0.7);
}
body.light-mode .active-rest-indicator.running.free .active-rest-fill{
  background:rgba(212,148,90,0.2);
}
body.light-mode .active-rest-indicator.running.cable .active-rest-fill{
  background:rgba(106,168,232,0.2);
}

/* Compact set row — frosted glass card */
.compact-set-row{
  padding:20px 20px;
  gap:16px;
  background:var(--elevated);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1.5px solid var(--elevatedBorder);
  border-radius:var(--radius-lg);
  width:100%;
  box-sizing:border-box;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
body.light-mode .compact-set-row{
  background:var(--elevated);
  border-color:var(--elevatedBorder);
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Compact header - no images */
.compact-header{
  padding-bottom:2px;
}
.compact-header .ex-images-row{
  display:none;
}

/* Compact sets wrap - horizontal scroll snap */
.compact-sets{
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:visible;
}
.compact-sets::-webkit-scrollbar{ display:none; }

/* Set dots indicator — iOS page control */
.set-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4px;
  padding:10px 16px 0;
  background:var(--well);
  border:1.5px solid var(--wellBorder);
  border-radius:var(--radius-md);
  margin:4px 0;
}
.set-dot{
  flex:1;
  height:40px;
  border-radius:10px;
  background:transparent;
  border:none;
  transition:all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,0.4);
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
.set-dot.active{
  background:var(--interactive);
  color:rgba(255,255,255,0.95);
  font-weight:800;
  font-size:14px;
  box-shadow:none;
}
.set-dot.active::after{
  display:none;
}
.set-dot.complete{
  color:var(--accent-orange);
}
.set-dot.complete.cable{
  color:var(--blue);
}
.set-dot.active.complete{
  background:rgba(212,148,90,0.15);
  color:var(--accent-orange);
  box-shadow:none;
}
.set-dot.active.complete::after{
  display:none;
}
.set-dot.active.complete.cable{
  background:rgba(126,181,226,0.15);
  color:var(--blue);
  box-shadow:none;
}
.set-dot.active.complete.cable::after{
  display:none;
}
.set-dot.pr{
  border:none !important;
  color:var(--gold) !important;
}
body.light-mode .set-dot{
  background:transparent;
  border:none;
  color:rgba(0,0,0,0.35);
}
body.light-mode .set-dot.active{
  background:var(--interactive);
  color:rgba(0,0,0,0.85);
  box-shadow:none;
}
body.light-mode .set-dot.active::after{
  display:none;
}
body.light-mode .set-dot.complete{
  color:rgba(60,160,115,0.85);
}
body.light-mode .set-dot.complete.cable{
  color:rgba(80,136,212,0.85);
}
body.light-mode .set-dot.active.complete{
  background:rgba(60,175,130,0.1);
  color:rgba(60,160,115,0.9);
}
body.light-mode .set-dot.active.complete::after{
  display:none;
}
body.light-mode .set-dot.active.complete.cable{
  background:rgba(80,136,212,0.1);
  color:rgba(80,136,212,0.9);
}
body.light-mode .set-dot.active.complete.cable::after{
  display:none;
}
body.light-mode .set-dots{
  background:var(--well);
  border-color:var(--wellBorder);
}
/* (superset dots use standard .set-dots) */

/* Compact PR row - proper info container for standard cards */
.pr-row-compact.pr-section{
  display:flex;
  align-items:center;
  gap:5px;
  padding:3px 0;
  background:none;
  border:none;
  border-radius:0;
  margin:0;
  min-height:auto;
  justify-content:center;
  border-top:none;
}
.pr-row-compact.pr-section.pr-inline{
  padding:3px 0 !important;
  margin:0 !important;
  min-height:auto !important;
  gap:5px !important;
  justify-content:center !important;
  background:none !important;
  border:none !important;
  border-radius:0 !important;
}
.pr-row-compact.pr-section.pr-inline .pr-label-compact{
  font-size:10px !important;
  letter-spacing:1px !important;
  color:rgba(255,255,255,0.2) !important;
  background:none !important;
  padding:0 !important;
  border-radius:0 !important;
}
.pr-row-compact.pr-section.pr-inline .pr-value-compact{
  font-size:10px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.3) !important;
}
.pr-row-compact.pr-section.pr-inline .pr-date-compact{
  font-size:10px !important;
  margin-left:0 !important;
  color:rgba(255,255,255,0.15) !important;
}
/* Best recorded set row */
.best-set-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:1px 0;
  margin:0;
  border-radius:0;
  background:none;
  border:none;
}
.best-set-label{
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.2);
  text-transform:uppercase;
  letter-spacing:1px;
  flex-shrink:0;
  background:none;
  padding:0;
  border-radius:0;
}
.best-set-value{
  font-size:10px;
  font-weight:600;
  color:rgba(255,255,255,0.55);
  font-variant-numeric:tabular-nums;
}
body.light-mode .best-set-row{ background:rgba(0,0,0,0.02); border-color:rgba(0,0,0,0.04); }
body.light-mode .best-set-label{ color:rgba(0,0,0,0.35); background:rgba(0,0,0,0.05); }
body.light-mode .best-set-value{ color:rgba(0,0,0,0.7); }
.pr-label-compact{
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.4);
  text-transform:uppercase;
  letter-spacing:1px;
  flex-shrink:0;
  background:rgba(255,255,255,0.06);
  padding:2px 6px;
  border-radius:4px;
}
.pr-value-compact{
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,0.6);
  white-space:nowrap;
  letter-spacing:-0.2px;
}
.pr-date-compact{
  font-size:10px;
  color:rgba(255,255,255,0.3);
  margin-left:auto;
}
.pr-new-compact{
  display:none;
  align-items:center;
  gap:0;
  margin-left:4px;
}
.pr-new-compact.active,
.pr-row-compact .pr-new.active{
  display:flex;
}
.pr-new-compact .pr-trophy{
  width:18px;
  height:18px;
}
.pr-new-text-compact{
  display:none;
}
/* When has NEW PR, highlight the value */
.pr-row-compact.has-pr .pr-value-compact,
.pr-row-compact.has-pr .pr-value{
  color:var(--gold);
  font-weight:700;
}
.pr-row-compact.has-pr .pr-label-compact,
.pr-row-compact.has-pr .pr-label{
  color:var(--gold);
  background:rgba(230,209,163,0.1);
  opacity:0.8;
}
body.light-mode .pr-row-compact,
body.light-mode .pr-row-compact.pr-section{
  background:rgba(0,0,0,0.03);
  border:1px solid rgba(0,0,0,0.07);
  border-top:none;
}
body.light-mode .pr-label-compact,
body.light-mode .pr-row-compact .pr-label{
  color:rgba(0,0,0,0.65);
  background:rgba(0,0,0,0.05);
}
body.light-mode .pr-value-compact,
body.light-mode .pr-row-compact .pr-value{
  color:rgba(0,0,0,0.6);
}
body.light-mode .pr-date-compact{
  color:rgba(0,0,0,0.35);
}
body.light-mode .pr-row-compact.has-pr .pr-value-compact{
  color:var(--gold);
}
body.light-mode .pr-row-compact.has-pr .pr-label-compact{
  color:var(--gold);
  background:rgba(180,150,80,0.1);
}
body.light-mode .pr-row-compact.has-pr .pr-label-compact{
  color:var(--gold);
  opacity:0.8;
}
body.light-mode .superset-pr-inline{
  background:rgba(0,0,0,0.03);
  border:1px solid rgba(0,0,0,0.07);
}
body.light-mode .superset-pr-value{
  color:rgba(0,0,0,0.55);
}
body.light-mode .superset-pr-label{
  color:rgba(0,0,0,0.65);
  background:rgba(0,0,0,0.05);
}


/* ── Exercise Completion Celebration ──────────────────── */
.exercise-complete-toast{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
  background:rgba(10,10,14,0.97);
  border-radius:var(--radius-lg);
  opacity:0;
  pointer-events:none;
  animation:toastIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.exercise-complete-toast.free{
  background:linear-gradient(160deg, rgba(10,10,14,0.97) 0%, rgba(20,45,30,0.97) 100%);
}
.exercise-complete-toast.cable{
  background:linear-gradient(160deg, rgba(10,10,14,0.97) 0%, rgba(15,25,40,0.97) 100%);
}
.exercise-complete-toast.toast-exit{
  animation:toastOut 0.4s ease forwards;
}
.toast-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:30px 20px;
  position:relative;
}
.toast-accent-line{
  width:40px;
  height:3px;
  border-radius:2px;
  background:var(--accent-orange);
  margin-bottom:4px;
  animation:fadeUp 0.3s 0.1s ease both;
}
.exercise-complete-toast.cable .toast-accent-line{
  background:var(--blue);
}
.toast-check-ring{
  width:64px;
  height:64px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(212,148,90,0.1);
  border:2.5px solid rgba(212,148,90,0.5);
  animation:checkPop 0.5s 0.15s cubic-bezier(0.34,1.56,0.64,1) both;
}
.exercise-complete-toast.cable .toast-check-ring{
  background:rgba(126,181,226,0.1);
  border-color:rgba(126,181,226,0.5);
}
.toast-check-ring svg{
  width:32px;
  height:32px;
  stroke:var(--accent-orange);
  stroke-width:2.5;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:30;
  stroke-dashoffset:30;
  animation:checkDraw 0.4s 0.35s ease forwards;
}
.exercise-complete-toast.cable .toast-check-ring svg{
  stroke:var(--blue);
}
.toast-title{
  font-size:20px;
  font-weight:800;
  letter-spacing:1px;
  color:#fff;
  opacity:0;
  animation:fadeUp 0.3s 0.25s ease forwards;
}
.toast-count{
  font-size:14px;
  font-weight:700;
  color:var(--accent-orange);
  text-transform:uppercase;
  letter-spacing:1.5px;
  opacity:0;
  animation:fadeUp 0.3s 0.35s ease forwards;
}
.exercise-complete-toast.cable .toast-count{
  color:var(--blue);
}
.toast-subtitle{
  font-size:12px;
  font-weight:500;
  color:rgba(255,255,255,0.5);
  text-align:center;
  max-width:260px;
  opacity:0;
  animation:fadeUp 0.3s 0.45s ease forwards;
}
body.light-mode .exercise-complete-toast{
  background:rgba(255,255,255,0.97);
}
body.light-mode .exercise-complete-toast.free{
  background:linear-gradient(160deg, rgba(255,255,255,0.97) 0%, rgba(232,245,238,0.97) 100%);
}
body.light-mode .exercise-complete-toast.cable{
  background:linear-gradient(160deg, rgba(255,255,255,0.97) 0%, rgba(229,238,246,0.97) 100%);
}
body.light-mode .toast-title{ color:#111; }
body.light-mode .toast-subtitle{ color:rgba(0,0,0,0.65); }
@keyframes toastIn{
  0%{ opacity:0; transform:scale(0.9); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes toastOut{
  0%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(0.95); }
}
@keyframes checkPop{
  0%{ transform:scale(0); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes checkDraw{
  to{ stroke-dashoffset:0; }
}
@keyframes fadeUp{
  0%{ opacity:0; transform:translateY(8px); }
  100%{ opacity:1; transform:translateY(0); }
}


.rest-pill-row .rest-bar.between-rest{
  height:36px;
  border-radius:10px;
  font-size:var(--text-sm);
}
.rest-pill-row .rest-bar.between-rest .rest-bar-text{
  font-size:11px;
}
.rest-pill-row{
  display:none;
  justify-content:center;
  padding:8px 0;
}
.rest-bar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:44px;
  background:var(--surface2);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-md);
  color:rgba(255,255,255,0.55);
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
  overflow:hidden;
  padding:0;
  isolation:isolate;
}
.rest-bar-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:100%;
  border-radius:10px;
  transform:scaleX(0);
  transform-origin:left center;
  pointer-events:none;
  z-index:0;
  will-change:transform;
}
.rest-bar-text{
  position:relative;
  z-index:2;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.5px;
}
.rest-bar:active{
  transform:scale(0.98);
}
.rest-bar.running.free{
  border-color:var(--accent-orange);
}
.rest-bar.running.free .rest-bar-text{
  color:#fff;
  text-shadow:0 0 8px rgba(212,148,90,0.6);
}
.rest-bar.running.free .rest-bar-fill{
  background:rgba(212,148,90,0.5);
}
.rest-bar.running.cable{
  border-color:var(--blue);
}
.rest-bar.running.cable .rest-bar-text{
  color:#fff;
  text-shadow:0 0 8px rgba(126,181,226,0.6);
}
.rest-bar.running.cable .rest-bar-fill{
  background:rgba(126,181,226,0.5);
}
.rest-bar.done{
  border-color:rgba(255,255,255,0.04);
}
.rest-bar.done .rest-bar-text{
  color:rgba(255,255,255,0.3);
}
body.light-mode .rest-bar{
  background:var(--surface3);
  border-color:rgba(0,0,0,0.08);
}
body.light-mode .rest-bar .rest-bar-text{
  color:rgba(0,0,0,0.7);
}
body.light-mode .rest-bar.running.free .rest-bar-text{
  color:var(--accent-orange);
}
body.light-mode .rest-bar.running.free .rest-bar-fill{
  background:rgba(34,197,94,0.12);
}
body.light-mode .rest-bar.running.cable .rest-bar-text{
  color:var(--blue);
}
body.light-mode .rest-bar.running.cable .rest-bar-fill{
  background:rgba(80,136,212,0.12);
}

/* Goal pill - inline in set row for cardio */
.goal-pill{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 12px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  cursor:pointer;
  color:rgba(255,255,255,0.5);
  transition:all .2s ease;
  flex-shrink:0;
}
.goal-pill svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
}
.goal-pill .goal-time-text{
  font-size:11px;
  font-weight:600;
}
.goal-pill:active{
  transform:scale(0.95);
  background:rgba(255,255,255,0.1);
}
.goal-pill.running.free{
  color:var(--accent-orange);
  border-color:var(--accent-orange);
}
.goal-pill.running.cable{
  color:var(--blue);
  border-color:var(--blue);
}
body.light-mode .goal-pill{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.65);
  color:rgba(0,0,0,0.7);
}

/* Compact superset block header */
.superset-block-header{
  padding:8px 0 6px;
  margin-bottom:4px;
  font-size:10px;
}
.superset-block-header-text{
  font-size:10px;
}
.superset-block-header.no-collapse{
  padding:8px 0 6px;
}

/* Tighter superset exercise items */
.superset-exercise-item{
  padding:2px 0;
}

/* Hide old superset images row since we removed images */
.superset-images-row{
  display:none !important;
}

/* Superset block divider - thinner */
/* === END COMPACT STYLES === */

/* Exercise info - left-aligned in media strip */
.ex-info{
  text-align:left;
  flex:1;
  min-width:0;
}
.ex-name{
  font-size:17px;
  font-weight:700;
  color:var(--white);
  margin-bottom:0;
  letter-spacing:-0.3px;
  line-height:1.25;
}
.ex-name-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  margin-bottom:0;
}
.ex-name-row .ex-name{
  margin-bottom:0;
}
.ex-meta{
  font-size:11px;
  color:rgba(255,255,255,0.25);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  flex-wrap:wrap;
}
.meta-pill{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:11px;
  font-weight:500;
  color:rgba(255,255,255,0.3);
  letter-spacing:0.3px;
  text-transform:none;
}
.meta-pill-val{
  color:rgba(255,255,255,0.55);
  font-size:11px;
  font-weight:600;
  letter-spacing:-0.2px;
}
.meta-dot{
  color:rgba(255,255,255,0.12);
  font-size:10px;
  font-weight:400;
  margin:0 1px;
}
.meta-pill-label{
  color:rgba(255,255,255,0.35);
  font-size:9px;
  font-weight:500;
  letter-spacing:0.3px;
  text-transform:none;
  margin-right:2px;
}
.ex-tempo-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  margin-top:2px;
}
.tempo-pill{
  font-size:10px;
  font-weight:500;
  color:rgba(255,255,255,0.35);
  letter-spacing:0.5px;
}
body.light-mode .meta-pill{
  color:rgba(0,0,0,0.65);
}
body.light-mode .meta-pill-val{
  color:var(--black);
}
body.light-mode .meta-dot{
  color:rgba(0,0,0,0.15);
}
body.light-mode .meta-pill-label{
  color:rgba(0,0,0,0.6);
}
body.light-mode .tempo-pill{
  color:rgba(0,0,0,0.35);
}
.ex-tempo{
  font-size:12px;
  color:var(--grayLight);
  opacity:0.7;
  margin-top:1px;
}
.superset-tempo{
  font-size:11px;
  color:var(--grayLight);
  opacity:0.7;
  margin-top:1px;
}
.meta-divider{
  opacity:0.4;
  margin:0 2px;
}
.superset-meta{
  font-size:11px;
  color:var(--grayLight);
  text-align:center;
  margin-bottom:4px;
}
.tempo-help{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.6);
  font-size:10px;
  font-weight:800;
  cursor:pointer;
  position:relative;
  overflow:visible;
  vertical-align:middle;
  margin-left:3px;
  transition:background .2s ease;
}
.tempo-help::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.4);
  opacity:0;
  pointer-events:none;
  animation:radarPulse 2s ease-out infinite;
}
.tempo-help.tapped::before{
  animation:none;
  opacity:0;
}
.tempo-help:active{
  background:rgba(255,255,255,0.15);
}
body.light-mode .tempo-help{
  background:rgba(0,0,0,0.12);
  border-color:rgba(0,0,0,0.6);
  color:#000 !important;
}
body.light-mode .tempo-help::before{
  border-color:rgba(0,0,0,0.6);
}
body.light-mode .tempo-help:active{
  background:rgba(0,0,0,0.2);
}

/* Tempo explainer modal */
.tempo-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.tempo-modal-overlay.open{
  display:flex;
}
.tempo-modal{
  background:var(--surface2);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;
  max-width:340px;
  width:100%;
  padding:24px 20px 20px;
  position:relative;
}
.tempo-modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:none;
  color:var(--white);
  font-size:16px;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.tempo-modal-title{
  font-size:16px;
  font-weight:800;
  color:var(--white);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:12px;
}
.tempo-modal-example{
  font-size:13px;
  font-weight:700;
  color:var(--gold);
  margin-bottom:12px;
  line-height:1.3;
}
.tempo-modal-row{
  display:flex;
  gap:8px;
  margin-bottom:6px;
  font-size:13px;
  color:rgba(255,255,255,0.8);
}
.tempo-modal-num{
  font-weight:800;
  color:var(--white);
  min-width:18px;
}
body.light-mode .tempo-modal{
  background:#fff;
  border-color:rgba(0,0,0,0.65);
}
body.light-mode .tempo-modal-title{
  color:#1a1a2e;
}
body.light-mode .tempo-modal-row{
  color:rgba(0,0,0,0.7);
}
body.light-mode .tempo-modal-num{
  color:#1a1a2e;
}
body.light-mode .tempo-modal-close{
  background:rgba(0,0,0,0.06);
  color:#1a1a2e;
}

/* Floating Day Selector */
.day-selector-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s ease;
}
.day-selector-overlay.open{
  opacity:1;
  pointer-events:auto;
}
.day-selector-panel{
  width:100%;
  max-width:none;
  height:calc(100dvh - 70px);
  max-height:calc(100dvh - 70px);
  background:var(--surface1);
  border-radius:0;
  border:none;
  overflow:hidden;
  transform:translateY(40px);
  opacity:0;
  transition:transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease;
  display:flex; flex-direction:column;
}
.day-selector-overlay.open .day-selector-panel{
  transform:translateY(0);
  opacity:1;
}
.day-selector-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:calc(12px + env(safe-area-inset-top)) 22px 8px;
}
.day-selector-title{
  font-size:20px;
  font-weight:700;
  color:var(--white);
}
.day-selector-close{
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:none;
  color:var(--white);
  font-size:22px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.day-selector-week-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:2px 22px 8px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.day-selector-range{
  font-size:14px;
  font-weight:600;
  color:rgba(255,255,255,0.6);
  letter-spacing:0.3px;
  min-width:140px;
  text-align:center;
}
body.light-mode .day-selector-range{
  color:rgba(0,0,0,0.7);
}
body.light-mode .day-selector-week-nav{
  border-bottom-color:rgba(0,0,0,0.06);
}
/* TODAY badge */
.ds-today-badge{
  display:inline-block;
  font-size:9px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--accent-orange);
  background:rgba(212,148,90,0.1);
  border:1px solid rgba(212,148,90,0.2);
  padding:1px 6px;
  border-radius:4px;
  margin-left:6px;
  vertical-align:middle;
}
body.light-mode .ds-today-badge{
  color:rgba(180,110,50,0.8);
  background:rgba(180,110,50,0.08);
  border-color:rgba(180,110,50,0.15);
}
.day-selector-nav{
  display:flex; align-items:center; gap:6px;
}
.day-selector-arrow{
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.5); cursor:pointer;
  display:grid; place-items:center;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.15s ease;
}
.day-selector-arrow:active{ background:rgba(255,255,255,0.12); transform:scale(0.9); }
.day-selector-arrow svg{ width:18px; height:18px; }
body.light-mode .day-selector-arrow{
  background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.06); color:rgba(0,0,0,0.65);
}
body.light-mode .day-selector-arrow:active{ background:rgba(0,0,0,0.08); }
.day-selector-list{
  overflow-y:hidden;
  padding:6px 14px 10px;
  flex:1;
  display:flex; flex-direction:column;
  justify-content:space-evenly;
}
.day-selector-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  transition:background .15s ease;
  border:1.5px solid transparent;
  margin-bottom:0;
  flex-shrink:1;
  min-height:0;
}
.day-selector-item:active{
  background:rgba(255,255,255,0.08);
}
.day-selector-item.active{
  border-color:var(--accent-orange);
  background:rgba(212,148,90,0.08);
}
.day-selector-item.active.cable-week{
  border-color:var(--blue);
  background:rgba(106,168,232,0.08);
}
.day-selector-item.rest-item{
  opacity:0.5;
}
.day-selector-item-img{
  width:40px;
  height:40px;
  border-radius:10px;
  object-fit:contain;
  flex-shrink:0;
}
.day-selector-item-info{
  flex:1;
  min-width:0;
}
.day-selector-item-day{
  font-size:15px;
  font-weight:700;
  color:var(--white);
}
.day-selector-item-type{
  font-size:12px;
  color:var(--grayLight);
  margin-top:1px;
}
.day-selector-item-equip{
  font-size:11px;
  color:var(--gray);
  margin-top:1px;
}
.day-selector-item-count{
  font-size:11px;
  font-weight:600;
  color:rgba(230,209,163,0.4);
  margin-top:3px;
  letter-spacing:0.2px;
}
body.light-mode .day-selector-item-count{
  color:rgba(140,125,95,0.5);
}
.day-selector-item-check{
  width:28px;
  height:28px;
  flex-shrink:0;
}
.day-selector-item-check svg{
  width:28px;
  height:28px;
}
.day-selector-item-rest-badge{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:rgba(255,255,255,0.5);
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  padding:6px 10px;
  flex-shrink:0;
  white-space:nowrap;
}
body.light-mode .day-selector-item-rest-badge{
  color:rgba(0,0,0,0.65);
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.06);
}
body.light-mode .day-selector-panel{
  background:#ffffff;
  border-color:rgba(0,0,0,0.65);
}
body.light-mode .day-selector-header{
  border-bottom:none;
}
body.light-mode .day-selector-title{
  color:var(--text);
}
body.light-mode .day-selector-close{
  background:rgba(0,0,0,0.08);
  color:var(--text);
}
body.light-mode .day-selector-item.active{
  background:rgba(212,148,90,0.08);
  border-color:var(--accent-orange);
}
body.light-mode .day-selector-item.active.cable-week{
  background:rgba(106,168,232,0.08);
  border-color:var(--blue);
}
/* Day selector stats column */
.ds-stats-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  flex-shrink:0;
  min-width:44px;
}
.ds-ring-wrap{
  position:relative;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ds-ring-pct{
  position:absolute;
  font-size:10px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.ds-stat-line{
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.45);
  letter-spacing:0.3px;
  white-space:nowrap;
}
.ds-stat-val{
  font-variant-numeric:tabular-nums;
}
.ds-stat-pr{
  display:flex;
  align-items:center;
  gap:3px;
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.15);
  white-space:nowrap;
}
.ds-stat-pr svg{
  flex-shrink:0;
}
.ds-stat-pr.has-pr{
  color:var(--gold);
}
body.light-mode .ds-stat-line{ color:rgba(0,0,0,0.65); }
body.light-mode .ds-stat-pr{ color:rgba(0,0,0,0.12); }
body.light-mode .ds-stat-pr.has-pr{ color:#8B7A5E; }
body.light-mode .day-selector-item-day{
  color:var(--text);
}

/* Video button - below sets info, always visible */
.video-btn-wrapper{
  display:flex;
  justify-content:center;
  padding:8px 0 4px;
}
.video-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  display:grid;
  place-items:center;
  cursor:pointer;
  flex-shrink:0;
  transition:all .2s ease;
}
.video-btn:hover,
.video-btn:active{
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.15);
}
.video-btn svg{
  width:18px;
  height:18px;
  stroke:var(--white);
  fill:none;
}

.ex-img{
  width:70px;
  height:70px;
  border-radius:12px;
  background:#000;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
  cursor:pointer;
}
.ex-img:active{
  transform:scale(0.95);
}
.ex-img img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.ex-muscle{
  position:absolute;
  bottom:2px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.7);
  color:var(--white);
  padding:2px 5px;
  border-radius:4px;
  font-size:6px;
  font-weight:700;
  text-transform:uppercase;
  white-space:nowrap;
}

.ex-meta b{
  color:var(--white);
}

/* Expand arrow - on right side */
.ex-expand{
  width:32px;
  height:32px;
  border-radius:50%;
  background:transparent;
  display:grid;
  place-items:center;
  flex-shrink:0;
  transition:all .3s ease;
  border:2px solid var(--white);
  margin-left:auto;
}
.ex-expand svg{
  width:16px;
  height:16px;
  stroke:var(--white);
  stroke-width:2.5;
  fill:none;
  transition:transform .3s ease;
}
.ex-card.expanded .ex-expand svg{
  transform:rotate(180deg);
}
.ex-card.expanded .ex-expand{
  background:var(--white);
  border-color:var(--white);
}
.ex-card.expanded .ex-expand svg{
  stroke:#000;
}

/* Collapsible sets section */
.sets-wrap{
  display:none;
  padding:0;
  border-top:none;
}
.ex-card.expanded .sets-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:visible;
}
.ex-card.expanded .sets-wrap::-webkit-scrollbar{ display:none; }

/* PR Section - more compact */
.pr-section{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  margin-bottom:12px;
}
.pr-info{
  display:flex;
  align-items:center;
  gap:14px;
}
.pr-label{
  font-size:11px;
  font-weight:800;
  color:rgba(255,255,255,0.5);
  text-transform:uppercase;
  letter-spacing:1.2px;
}
.pr-value{
  font-size:16px;
  font-weight:700;
  color:rgba(255,255,255,0.75);
  white-space:nowrap;
}
.pr-date{
  font-size:11px;
  color:rgba(255,255,255,0.4);
  margin-left:auto;
}
.pr-new{
  display:none;
  align-items:center;
  gap:0;
}
.pr-new.active{
  display:flex;
}
.pr-trophy{
  width:20px;
  height:20px;
}
.pr-new-text{
  display:none;
}

/* Unit Toggle */
.card-bottom-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-top:8px;
  padding:0 6px;
}
.bottom-left{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.bottom-center{
  display:flex;
  justify-content:center;
}
.bottom-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}
.unit-toggle-label{
  font-size:10px;
  color:var(--gray);
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.unit-toggle-btn{
  display:flex;
  background:rgba(255,255,255,0.04);
  border-radius:50px;
  padding:2px;
  border:none;
}
.unit-option{
  padding:6px 14px;
  font-size:10px;
  font-weight:600;
  color:var(--gray);
  border-radius:50px;
  cursor:pointer;
  transition:all .2s ease;
}
.unit-option.active{
  background:rgba(255,255,255,0.12);
  color:var(--white);
}

/* Inline exercise image (in rest/timer sections) - muscle image */
.ex-img-inline{
  width:48px;
  height:48px;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  flex-shrink:0;
  position:relative;
}
.ex-img-inline img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.ex-img-inline:active{
  transform:scale(0.95);
}
.ex-muscle-label{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0,0,0,0.75);
  color:#fff;
  font-size:6px;
  font-weight:700;
  text-align:center;
  padding:1px 0;
  text-transform:uppercase;
  letter-spacing:0.3px;
}

/* Between-set rest timer - centered between sets */
.between-set-rest{
  display:flex;
  justify-content:center;
  padding:6px 0;
}
.rest-btn.between-rest{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:28px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  color:rgba(255,255,255,0.5);
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
  overflow:hidden;
  padding:0;
  isolation:isolate;
}
.rest-btn.between-rest .rest-bar-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:100%;
  border-radius:7px;
  transform:scaleX(0);
  transform-origin:left center;
  pointer-events:none;
  z-index:0;
  will-change:transform;
}
.rest-btn.between-rest .rest-bar-text{
  position:relative;
  z-index:2;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.5px;
}
.rest-btn.between-rest:active{
  transform:scale(0.98);
}
.rest-btn.between-rest.running.free{
  border-color:var(--accent-orange);
  background:rgba(255,255,255,0.04);
}
.rest-btn.between-rest.running.free .rest-bar-text{
  color:#fff;
  text-shadow:0 0 6px rgba(212,148,90,0.6);
}
.rest-btn.between-rest.running.free .rest-bar-fill{
  background:rgba(212,148,90,0.4);
}
.rest-btn.between-rest.running.cable{
  border-color:var(--blue);
  background:rgba(255,255,255,0.04);
}
.rest-btn.between-rest.running.cable .rest-bar-text{
  color:#fff;
  text-shadow:0 0 6px rgba(126,181,226,0.6);
}
.rest-btn.between-rest.running.cable .rest-bar-fill{
  background:rgba(126,181,226,0.4);
}
body.light-mode .rest-btn.between-rest{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.65);
}
body.light-mode .rest-btn.between-rest .rest-bar-text{
  color:rgba(0,0,0,0.65);
}
body.light-mode .rest-btn.between-rest.running.free .rest-bar-text{
  color:var(--accent-orange);
}
body.light-mode .rest-btn.between-rest.running.free .rest-bar-fill{
  background:rgba(34,197,94,0.15);
}
body.light-mode .rest-btn.between-rest.running.cable .rest-bar-text{
  color:var(--blue);
}
body.light-mode .rest-btn.between-rest.running.cable .rest-bar-fill{
  background:rgba(80,136,212,0.15);
}

/* Timer section for time-based exercises */
.timer-section{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.06);
}

/* Volume summary */
.volume-summary{
  display:none;
}
.vol-label{
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:rgba(255,255,255,0.3);
}
.vol-value{
  font-size:14px;
  font-weight:800;
  color:var(--white);
  letter-spacing:0.3px;
}
.vol-sets{
  font-size:9px;
  font-weight:600;
  color:rgba(255,255,255,0.25);
}
body.light-mode .volume-summary{
  border-top-color:rgba(0,0,0,0.06);
}
body.light-mode .vol-label{ color:rgba(0,0,0,0.7); }
body.light-mode .vol-value{ color:rgba(0,0,0,0.8); }
body.light-mode .vol-sets{ color:rgba(0,0,0,0.65); }

/* Set block container - compact inline */
.set-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 16px;
  border-bottom:none;
  position:relative;
  overflow:visible;
  flex:none;
  box-sizing:border-box;
}
/* rest-pill-row visibility controlled by parent context */
.set-block .set-row{
  position:relative;
  z-index:1;
}
.set-block:last-of-type{
  border-bottom:none;
  padding-bottom:0;
}
.set-block:first-of-type{
  padding-top:0;
}

.set-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex:1;
  padding:20px 20px;
  border-radius:var(--radius-lg);
  background:var(--elevated);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1.5px solid var(--elevatedBorder);
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.set-row:nth-child(even){
  background:var(--elevated);
}
body.light-mode .set-row:nth-child(even){
  background:var(--elevated);
}
body.light-mode .set-row{
  background:var(--elevated);
  border-color:var(--elevatedBorder);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* No separate button row - inline with set */
.set-btn-row{
  display:contents;
}

.set-num{
  font-size:15px;
  font-weight:800;
  color:rgba(255,255,255,0.5);
  width:40px;
  flex-shrink:0;

  text-align:center;
}

/* Input group with label below */
.input-group{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}
.input-with-steppers{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Stepper number slide animation */
@keyframes numSlideUp{
  0%{transform:translateY(4px);opacity:0.3;}
  100%{transform:translateY(0);opacity:1;}
}
@keyframes numSlideDown{
  0%{transform:translateY(-4px);opacity:0.3;}
  100%{transform:translateY(0);opacity:1;}
}
.set-input.num-up{
  animation:numSlideUp 0.15s ease-out;
}
.set-input.num-down{
  animation:numSlideDown 0.15s ease-out;
}

/* Shake warning animation for unsaved input */
@keyframes shakeWarning{
  0%, 100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}
.input-with-steppers.shake-warning{
  animation:shakeWarning 0.4s ease-in-out;
}
.input-with-steppers.shake-warning .set-input{
  background:rgba(255,100,100,0.2) !important;
  border:1px solid rgba(255,100,100,0.5);
}
.superset-set-input-group.shake-warning{
  animation:shakeWarning 0.4s ease-in-out;
}
.superset-set-input-group.shake-warning .superset-input{
  background:rgba(255,100,100,0.2) !important;
  border:1px solid rgba(255,100,100,0.5) !important;
}

.set-input{
  width:76px;
  padding:14px 2px;
  background:var(--well);
  border:1.5px solid var(--wellBorder);
  border-radius:var(--radius-md);
  color:var(--white);
  font-size:var(--text-xl);
  font-weight:700;
  text-align:center;
  transition:all .2s cubic-bezier(0.25,1,0.5,1);
  position:relative;
  -webkit-user-select:none;
  user-select:none;
  letter-spacing:0.5px;
}
.set-input.free{
  background:rgba(212,148,90,0.12);
  border:1.5px solid rgba(212,148,90,0.35);
}
.set-input.cable{
  background:rgba(126,181,226,0.12);
  border:1.5px solid rgba(126,181,226,0.35);
}
.set-input.zero-value{
  color:rgba(255,255,255,0.25);
  background:rgba(13,13,18,0.6);
  border:1.5px dashed rgba(255,255,255,0.1);
  box-shadow:none;
}
.set-input.has-ghost{
  color:transparent;
}
.set-input.has-ghost::placeholder{
  color:rgba(255,255,255,0.28);
  font-style:normal;
  font-weight:600;
}
body.light-mode .set-input.has-ghost::placeholder{
  color:rgba(0,0,0,0.22);
}
.set-input.free.zero-value{
  background:rgba(212,148,90,0.05);
  border:1.5px dashed rgba(212,148,90,0.15);
}
.set-input.cable.zero-value{
  background:rgba(126,181,226,0.05);
  border:1.5px dashed rgba(126,181,226,0.15);
}
.set-input.zero-value{
  color:rgba(255,255,255,0.15);
  background:rgba(13,13,18,0.6);
  border:1.5px dashed rgba(255,255,255,0.08);
}
.set-input.zero-value.shake{
  animation:inputShake 0.3s ease-in-out;
}
@keyframes inputShake{
  0%, 100%{transform:translateX(0);}
  50%{transform:translateX(-1px);}
}
/* Save confirmation flash */
@keyframes savedFlash{
  0%{box-shadow:0 0 0 0 rgba(212,148,90,0.5);}
  50%{box-shadow:0 0 0 3px rgba(212,148,90,0.3);}
  100%{box-shadow:0 0 0 0 rgba(212,148,90,0);}
}
@keyframes savedFlashCable{
  0%{box-shadow:0 0 0 0 rgba(126,181,226,0.5);}
  50%{box-shadow:0 0 0 3px rgba(126,181,226,0.3);}
  100%{box-shadow:0 0 0 0 rgba(126,181,226,0);}
}
/* PR gold confetti — falls down over card */
@keyframes prConfettiFall{
  0%{transform:translateY(0) translateX(var(--drift)) rotate(0deg) scale(1);opacity:0;}
  10%{opacity:1;}
  80%{opacity:0.8;}
  100%{transform:translateY(var(--fall)) translateX(var(--drift2)) rotate(var(--rot)) scale(0.4);opacity:0;}
}
.set-input.saved-flash{
  animation:savedFlash 0.5s ease-out !important;
}
.set-input.cable.saved-flash{
  animation:savedFlashCable 0.5s ease-out !important;
}
.set-input:focus{
  outline:none;
  background:rgba(106,168,232,0.15);
  box-shadow:0 0 0 2px var(--blue);
  transform:translateY(-2px);
}
.set-input.free:focus{
  background:rgba(212,148,90,0.15);
  box-shadow:0 0 0 2px var(--accent-orange);
  transform:translateY(-2px);
}
.set-input.active-input{
  outline:none;
  background:rgba(106,168,232,0.3);
  box-shadow:0 0 0 3px var(--blue), 0 4px 16px rgba(106,168,232,0.35);
  animation:inputGlow 1.5s ease-in-out infinite;
  position:relative;
  z-index:9999;
  transform:translateY(-2px);
}
.set-input.free.active-input{
  background:rgba(212,148,90,0.3);
  box-shadow:0 0 0 3px var(--accent-orange), 0 0 12px rgba(212,148,90,0.35);
  animation:inputGlowGreen 1.5s ease-in-out infinite;
}
@keyframes inputGlow{
  0%, 100%{box-shadow:0 0 0 3px var(--blue), 0 0 12px rgba(106,168,232,0.35);}
  50%{box-shadow:0 0 0 3px var(--blue), 0 0 18px rgba(106,168,232,0.5);}
}
@keyframes inputGlowGreen{
  0%, 100%{box-shadow:0 0 0 3px var(--accent-orange), 0 0 12px rgba(212,148,90,0.35);}
  50%{box-shadow:0 0 0 3px var(--accent-orange), 0 0 18px rgba(212,148,90,0.5);}
}
/* Blinking cursor animation */
@keyframes cursorBlink{
  0%, 100%{opacity:1;}
  50%{opacity:0;}
}
.set-input.reps{
  width:40px;
}
.input-label{
  font-size:10px;
  color:rgba(255,255,255,0.45);
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-weight:700;
}
.set-x{
  font-size:14px;
  color:var(--gray);
  font-weight:300;
  padding:0 2px;
}
.set-x{
  font-size:18px;
  color:var(--white);
  font-weight:700;
  margin:0 4px;
}
.set-check{
  display:none;
}

/* Rest Timer Button - Compact pill with label */
.rest-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:14px 26px;
  min-width:92px;
  background:var(--surface3);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius-md);
  color:var(--white);
  cursor:pointer;
  transition:all .2s ease;
  flex-shrink:0;
}
.rest-btn:active{
  transform:scale(0.96);
  background:rgba(255,255,255,0.12);
}
.rest-btn .rest-icon{
  display:none;
}
.rest-btn .rest-time-row{
  display:flex;
  align-items:center;
  gap:5px;
}
.rest-btn .rest-time-icon{
  width:18px;
  height:18px;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
  opacity:0.9;
}
.rest-btn .rest-time{
  font-size:22px;
  font-weight:700;
  line-height:1;
}
.rest-btn .rest-label{
  display:block;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  opacity:0.7;
}
.rest-btn.running.free{
  background:var(--accent-orange);
  color:#000;
  box-shadow:0 0 12px rgba(212,148,90,0.25);
}
.rest-btn.running.cable{
  background:var(--blue);
  color:#000;
  box-shadow:0 0 12px rgba(106,168,232,0.25);
}

/* Timer button for time-based exercises */
.timer-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:10px 18px;
  min-width:88px;
  background:rgba(255,255,255,0.06);
  border:1.5px solid rgba(255,255,255,0.08);
  border-radius:50px;
  color:var(--white);
  cursor:pointer;
  transition:all .2s ease;
  flex-shrink:0;
}
.timer-btn:active{
  transform:scale(0.96);
  background:rgba(255,255,255,0.12);
}
.timer-btn .rest-icon{
  width:14px;
  height:14px;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
  opacity:0.8;
}
.timer-btn .timer-time{
  font-size:13px;
  font-weight:700;
  line-height:1;
}
.timer-btn .timer-label{
  display:none;
}
.timer-btn.running.free{
  background:var(--accent-orange);
  color:#000;
  box-shadow:0 0 12px rgba(212,148,90,0.25);
}
.timer-btn.running.cable{
  background:var(--blue);
  color:#000;
  box-shadow:0 0 12px rgba(106,168,232,0.25);
}

/* Workout timer inline - floats above progress bar date */
.wt-row{
  display:none;
  align-items:center;
  justify-content:flex-end;
  gap:0;
  position:absolute;
  bottom:100%;
  right:0;
  margin-bottom:2px;
  animation:wtSlideIn 0.2s ease-out;
}
.wt-row.visible{
  display:flex;
}
@keyframes wtSlideIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}
.wt-inline{
  display:flex;
  align-items:center;
  gap:3px;
  cursor:pointer;
  padding:2px 6px;
  border-radius:6px;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.15s ease;
}
.wt-inline:active{
  background:rgba(255,255,255,0.08);
}
.wt-inline-icon{
  width:11px;
  height:11px;
  stroke:rgba(255,255,255,0.7);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  flex-shrink:0;
}
.wt-row.paused .wt-inline-icon{
  stroke:rgba(255,255,255,0.25);
}
.wt-inline-time{
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,0.7);
  font-variant-numeric:tabular-nums;
}
.wt-row.paused .wt-inline-time{
  color:rgba(255,255,255,0.25);
}
.wt-controls{
  display:none;
  align-items:center;
  gap:3px;
  margin-left:2px;
  animation:wtControlsIn 0.15s ease-out;
}
.wt-controls.visible{
  display:flex;
}
@keyframes wtControlsIn{
  from{ opacity:0; transform:scale(0.9); }
  to{ opacity:1; transform:scale(1); }
}
.wt-btn{
  width:22px;
  height:22px;
  border-radius:50%;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.15s ease;
}
.wt-btn svg{
  width:10px;
  height:10px;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
.wt-pause{
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.5);
}
.wt-pause:active{ background:rgba(255,255,255,0.15); }
.wt-reset{
  background:rgba(255,80,80,0.1);
  color:rgba(255,100,100,0.6);
}
.wt-reset:active{ background:rgba(255,80,80,0.25); }
body.light-mode .wt-inline:active{ background:rgba(0,0,0,0.08); }
body.light-mode .wt-inline-icon{ stroke:rgba(0,0,0,0.5); }
body.light-mode .wt-inline-time{ color:rgba(0,0,0,0.7); }
body.light-mode .wt-row.paused .wt-inline-icon{ stroke:rgba(0,0,0,0.5); }
body.light-mode .wt-row.paused .wt-inline-time{ color:rgba(0,0,0,0.65); }
body.light-mode .wt-pause{ background:rgba(0,0,0,0.08); color:rgba(0,0,0,0.65); }
body.light-mode .wt-reset{ background:rgba(255,60,60,0.08); color:rgba(220,50,50,0.5); }

/* Bottom Progress Bar - sits on top of collapsed bottom bar */
.workout-progress-bar{
  display:none !important;
}
/* Tuck handle — removed */
.bottom-tuck-handle{
  display:none !important;
}
/* Bottom bar collapse system removed */
.workout-progress-bar.keyboard-open{
  padding-bottom:8px;
}

.progress-bar-inner{
  max-width:420px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
}

/* Left column: date with timer above (absolute, no layout shift) */
.progress-bar-left{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0;
  min-width:0;
  position:relative;
}

.progress-bar-date{
  min-width:0;
  font-size:12px;
  font-weight:600;
  color:var(--white);
  transition:color .3s ease;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:right;
}
.progress-bar-date.free{ color:var(--accent-orange); }
.progress-bar-date.cable{ color:var(--blue); }

.progress-bar-type{
  min-width:0;
  font-size:12px;
  font-weight:600;
  color:var(--white);
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:color .3s ease;
}
.progress-bar-type.free{ color:var(--accent-orange); }
.progress-bar-type.cable{ color:var(--blue); }

/* Workout duration timer — removed */
.workout-duration{
  display:none !important;
}
.workout-duration:empty{ display:none; }
.workout-duration.paused{
  color:rgba(255,180,50,0.8);
}
.workout-duration.paused::after{
  content:' ⏸';
  font-size:11px;
}
body.light-mode .workout-duration{
  color:rgba(0,0,0,0.65);
}
body.light-mode .workout-duration.paused{
  color:rgba(180,120,0,0.7);
}
body.light-mode .progress-bar-date{ color:var(--text); }
body.light-mode .progress-bar-type{ color:var(--text); }

/* ── Timer Floating Menu ────────────────────────────────── */
.timer-menu-overlay{
  position:fixed;
  inset:0;
  z-index:198;
  display:none;
}
.timer-menu-overlay.open{ display:block; }

.timer-menu{
  position:fixed;
  left:20px;
  right:auto;
  bottom:calc(68px + env(safe-area-inset-bottom) + 72px);
  width:220px;
  background:#121218;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:18px;
  padding:16px;
  z-index:199;
  box-shadow:0 8px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
  transform:translateY(12px) scale(0.95);
  opacity:0;
  pointer-events:none;
  transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1), opacity 0.18s ease;
  transform-origin:bottom left;
}
.timer-menu.open{
  transform:translateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
}
body.light-mode .timer-menu{
  background:#f5f5f8;
  border-color:rgba(0,0,0,0.65);
  box-shadow:0 8px 40px rgba(0,0,0,0.15);
}

.timer-menu-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  margin-bottom:12px;
}
body.light-mode .timer-menu-header{
  border-bottom-color:rgba(0,0,0,0.07);
}
.timer-menu-elapsed{
  font-size:28px;
  font-weight:800;
  color:var(--white);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.5px;
  line-height:1;
}
body.light-mode .timer-menu-elapsed{ color:#111; }
.timer-menu-label{
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:rgba(255,255,255,0.3);
}
body.light-mode .timer-menu-label{ color:rgba(0,0,0,0.55); }

.timer-menu-actions{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.timer-menu-btn{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:10px 8px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,0.07);
  color:rgba(255,255,255,0.8);
  cursor:pointer;
  transition:background 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color:transparent;
}
.timer-menu-btn:active{ transform:scale(0.93); background:rgba(255,255,255,0.12); }
.timer-menu-btn svg{ width:18px; height:18px; }
.timer-menu-btn span{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
body.light-mode .timer-menu-btn{
  background:rgba(0,0,0,0.06);
  color:rgba(0,0,0,0.7);
}

.timer-pause-btn.is-paused svg rect{ display:none; }
.timer-pause-btn.is-paused{ background:rgba(255,180,50,0.15); color:rgba(255,200,80,0.9); }
.timer-pause-btn.is-paused span::before{ content:'Resume'; }
.timer-pause-btn.is-paused span{ font-size:0; }
.timer-pause-btn.is-paused span::before{ font-size:10px; }

.timer-reset-btn{ color:rgba(255,100,100,0.7); }
.timer-reset-btn:active{ background:rgba(255,100,100,0.12); }

/* Sessions list */
.timer-menu-sessions{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.timer-session-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 8px;
  background:rgba(255,255,255,0.04);
  border-radius:8px;
}
body.light-mode .timer-session-row{ background:rgba(0,0,0,0.07); }
.timer-session-label{
  font-size:10px;
  font-weight:600;
  color:rgba(255,255,255,0.4);
  text-transform:uppercase;
  letter-spacing:0.5px;
}
body.light-mode .timer-session-label{ color:rgba(0,0,0,0.65); }
.timer-session-dur{
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,0.7);
  font-variant-numeric:tabular-nums;
}
body.light-mode .timer-session-dur{ color:rgba(0,0,0,0.6); }
.timer-session-row.active .timer-session-label{ color:var(--accent-orange); }
.timer-session-row.active .timer-session-dur{ color:var(--accent-orange); }
.timer-session-row.active[data-week="cable"] .timer-session-label{ color:var(--blue); }
.timer-session-row.active[data-week="cable"] .timer-session-dur{ color:var(--blue); }
/* ──────────────────────────────────────────────────────── */

/* Workout Completion Celebration Overlay */
.celebration-overlay{
  display:none !important;
}
/* ── Exercise Timer Button ─────────────────────────────────── */
.ex-timer-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:12px 12px 8px;
  padding:12px 18px;
  border:1px dashed rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.02);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.3px;
  color:rgba(255,255,255,0.3);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.2s ease;
}
.ex-timer-btn:active{
  transform:scale(0.97);
}
.ex-timer-btn svg{
  width:18px; height:18px;
  flex-shrink:0;
}
/* Start state */
.ex-timer-btn.start{
  border:1.5px solid rgba(126,207,138,0.35);
  background:linear-gradient(135deg, rgba(126,207,138,0.12) 0%, rgba(126,207,138,0.05) 100%);
  color:rgba(126,207,138,0.95);
  margin:6px 20px 4px;
  padding:10px 16px;
  border-radius:14px;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.5px;
  box-shadow:0 0 20px rgba(126,207,138,0.15), 0 0 6px rgba(126,207,138,0.1), inset 0 1px 0 rgba(255,255,255,0.06);
  position:relative;
  overflow:hidden;
}
.ex-timer-btn.start svg{
  width:24px; height:24px;
  fill:rgba(126,207,138,0.85);
  stroke:none;
}
.ex-timer-btn.start.cable{
  border-color:rgba(126,207,138,0.35);
  background:linear-gradient(135deg, rgba(126,207,138,0.12) 0%, rgba(126,207,138,0.05) 100%);
  color:rgba(126,207,138,0.95);
  box-shadow:0 0 20px rgba(126,207,138,0.15), 0 0 6px rgba(126,207,138,0.1), inset 0 1px 0 rgba(255,255,255,0.06);
}
.ex-timer-btn.start.cable svg{
  width:24px; height:24px;
  fill:rgba(126,207,138,0.85);
}
/* Shimmer glow sweep — plays once on load and on each exercise switch */
@keyframes startBtnShimmer{
  0%{ left:-100%; opacity:0; }
  20%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}
.ex-timer-btn.start::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:80%;
  height:100%;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.25) 55%, transparent 100%);
  pointer-events:none;
}
.workout-container.wc-enter .ex-timer-btn.start::before{
  animation:startBtnShimmer 1s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards;
}
/* Running state */
.ex-timer-btn.running{
  border:1px solid rgba(212,148,90,0.12);
  background:rgba(212,148,90,0.04);
  color:rgba(212,148,90,0.7);
  padding:8px 12px;
  gap:10px;
}
.ex-timer-btn.running svg{
  fill:none;
  stroke:rgba(212,148,90,0.5);
  stroke-width:2.5;
  stroke-linecap:round;
}
.ex-timer-btn.running.cable{
  border-color:rgba(126,181,226,0.12);
  background:rgba(126,181,226,0.04);
  color:rgba(126,181,226,0.7);
}
.ex-timer-btn.running.cable svg{
  stroke:rgba(126,181,226,0.5);
}
.ex-timer-btn.running .ex-timer-elapsed{
  font-variant-numeric:tabular-nums;
  opacity:0.8;
  font-weight:700;
  font-size:14px;
}
/* Finished state */
.ex-timer-btn.finished{
  border:1px solid rgba(212,148,90,0.08);
  background:rgba(212,148,90,0.03);
  color:rgba(212,148,90,0.45);
}
.ex-timer-btn.finished svg{
  fill:none;
  stroke:rgba(212,148,90,0.4);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ex-timer-btn.finished.cable{
  border-color:rgba(126,181,226,0.08);
  background:rgba(126,181,226,0.03);
  color:rgba(126,181,226,0.45);
}
.ex-timer-btn.finished.cable svg{
  stroke:rgba(126,181,226,0.4);
}
/* Paused state */
.ex-timer-btn.paused{
  border:1px solid rgba(255,200,100,0.15);
  background:rgba(255,200,100,0.04);
  color:rgba(255,200,100,0.7);
  padding:8px 12px;
  gap:10px;
}
.ex-timer-btn.paused .ex-timer-elapsed{
  font-variant-numeric:tabular-nums;
  font-size:14px;
  font-weight:700;
  color:rgba(255,200,100,0.7);
  flex:1;
}
/* Inline controls row */
.ex-timer-controls{
  display:flex;
  gap:8px;
  align-items:center;
}
.etc-btn{
  width:42px; height:42px;
  border:none; border-radius:50%;
  display:grid; place-items:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.12s ease;
}
.etc-btn:active{ transform:scale(0.88); }
.etc-btn svg{
  width:26px; height:26px;
  fill:none;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.etc-resume{
  background:rgba(212,148,90,0.1);
}
.etc-resume svg{
  fill:rgba(212,148,90,0.7);
  stroke:none;
}
.cable .etc-resume{
  background:rgba(126,181,226,0.1);
}
.cable .etc-resume svg{
  fill:rgba(126,181,226,0.7);
}
.etc-pause{
  background:rgba(255,200,100,0.1);
}
.etc-pause svg{
  fill:none;
  stroke:rgba(255,200,100,0.7);
}
.etc-stop{
  background:rgba(212,148,90,0.1);
}
.etc-stop svg{
  stroke:rgba(212,148,90,0.7);
  fill:none;
}
.cable .etc-stop{
  background:rgba(126,181,226,0.1);
}
.cable .etc-stop svg{
  stroke:rgba(126,181,226,0.7);
}
.etc-reset{
  background:rgba(255,255,255,0.04);
}
.etc-reset svg{
  stroke:rgba(255,255,255,0.3);
  fill:none;
}
.etc-finish{
  background:rgba(212,148,90,0.1);
}
.etc-finish svg{
  stroke:rgba(212,148,90,0.7);
  fill:none;
}
.cable .etc-finish{
  background:rgba(126,181,226,0.1);
}
.cable .etc-finish svg{
  stroke:rgba(126,181,226,0.7);
}
/* Light mode */
body.light-mode .ex-timer-btn{
  border-color:rgba(0,0,0,0.06);
  background:rgba(0,0,0,0.015);
  color:rgba(0,0,0,0.25);
}
body.light-mode .ex-timer-btn.start{
  border-color:rgba(86,175,110,0.3);
  background:linear-gradient(135deg, rgba(86,175,110,0.1) 0%, rgba(86,175,110,0.04) 100%);
  color:rgba(66,155,95,0.9);
  box-shadow:0 0 16px rgba(86,175,110,0.1), inset 0 1px 0 rgba(255,255,255,0.4);
}
body.light-mode .ex-timer-btn.start svg{ fill:rgba(66,155,95,0.8); }
body.light-mode .ex-timer-btn.running{
  border-color:rgba(60,175,130,0.12);
  background:rgba(60,175,130,0.04);
  color:rgba(60,175,130,0.7);
}
body.light-mode .ex-timer-btn.running svg{ stroke:rgba(60,175,130,0.5); }
body.light-mode .ex-timer-btn.finished{
  border-color:rgba(60,175,130,0.08);
  background:rgba(60,175,130,0.03);
  color:rgba(60,175,130,0.4);
}
body.light-mode .ex-timer-btn.finished svg{ stroke:rgba(60,175,130,0.35); }
body.light-mode .ex-timer-btn.paused{
  border-color:rgba(200,150,50,0.15);
  background:rgba(200,150,50,0.04);
  color:rgba(180,130,30,0.7);
}
body.light-mode .ex-timer-btn.paused .ex-timer-elapsed{
  color:rgba(180,130,30,0.7);
}
body.light-mode .etc-resume{
  background:rgba(60,175,130,0.08);
}
body.light-mode .etc-resume svg{ fill:rgba(60,175,130,0.7); }
body.light-mode .etc-reset{
  background:rgba(0,0,0,0.03);
}
body.light-mode .etc-reset svg{ stroke:rgba(0,0,0,0.25); }
body.light-mode .etc-finish{
  background:rgba(60,175,130,0.08);
}
body.light-mode .etc-finish svg{ stroke:rgba(60,175,130,0.7); }

/* Bottom Tally Strip - above progress ring */
.bottom-tally-strip{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:8px;
  padding-bottom:4px;
}
.bottom-tally-strip .btally{
  width:3px;
  height:9px;
  border-radius:1.5px;
  background:rgba(255,255,255,0.12);
  transition:all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin:bottom center;
  cursor:pointer;
}
.bottom-tally-strip.tally-magnified .btally{
  width:5px;
  border-radius:2.5px;
}
.bottom-tally-strip .btally.selected{
  height:15px;
  background:#ffffff;
}
.bottom-tally-strip .btally.done.free{
  background:rgba(212,148,90,0.25);
  box-shadow:none;
}
.bottom-tally-strip .btally.done.cable{
  background:rgba(126,181,226,0.25);
  box-shadow:none;
}
.bottom-tally-strip .btally.selected.done.free{
  height:15px;
  background:var(--accent-orange);
  box-shadow:0 0 6px rgba(212,148,90,0.5);
}
.bottom-tally-strip .btally.selected.done.cable{
  height:15px;
  background:var(--blue);
  box-shadow:0 0 6px rgba(126,181,226,0.5);
}
body.light-mode .bottom-tally-strip .btally{
  background:rgba(0,0,0,0.1);
}
body.light-mode .bottom-tally-strip .btally.selected{
  background:rgba(0,0,0,0.7);
}

/* Floating scroll indicator dots */
.floating-scroll-dots{
  display:none !important;
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  background:transparent;
  border:none;
  border-radius:20px;
  z-index:500;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.35s ease;
  top:25%;
}
.floating-scroll-dots.visible{
  opacity:1;
}
@keyframes dotShake{
  0%,100%{transform:translateX(-50%);}
  15%{transform:translateX(calc(-50% + 8px));}
  30%{transform:translateX(calc(-50% - 6px));}
  45%{transform:translateX(calc(-50% + 4px));}
  60%{transform:translateX(calc(-50% - 2px));}
  75%{transform:translateX(-50%);}
}
.floating-scroll-dots.shake{
  animation:dotShake 0.4s ease;
}
body.light-mode .floating-scroll-dots{
  background:transparent;
  border:none;
  box-shadow:none;
}
.floating-scroll-dots .fdot{
  width:12px;
  height:12px;
  border-radius:4px;
  background:rgba(255,255,255,0.35);
  transition:all 0.2s ease;
  box-shadow:0 0 6px rgba(255,255,255,0.15);
}
body.light-mode .floating-scroll-dots .fdot{
  background:rgba(0,0,0,0.25);
  box-shadow:0 0 6px rgba(0,0,0,0.1);
}
.floating-scroll-dots .fdot.active{
  width:32px;
  border-radius:6px;
  background:rgba(255,255,255,0.7);
  box-shadow:0 0 10px rgba(255,255,255,0.3);
}
body.light-mode .floating-scroll-dots .fdot.active{
  background:rgba(0,0,0,0.45);
  box-shadow:0 0 10px rgba(0,0,0,0.15);
}
.floating-scroll-dots .fdot.done{
  background:var(--white);
  box-shadow:0 0 8px rgba(255,255,255,0.4);
}
.floating-scroll-dots .fdot.done.free{
  background:var(--accent-orange);
  box-shadow:0 0 10px rgba(212,148,90,0.5);
}
.floating-scroll-dots .fdot.done.cable{
  background:var(--blue);
  box-shadow:0 0 10px rgba(126,181,226,0.5);
}
.floating-scroll-dots .fdot.active.done{
  background:var(--white);
  box-shadow:0 0 12px rgba(255,255,255,0.5);
}
.floating-scroll-dots .fdot.active.done.free{
  background:var(--accent-orange);
  box-shadow:0 0 14px rgba(212,148,90,0.6);
}
.floating-scroll-dots .fdot.active.done.cable{
  background:var(--blue);
  box-shadow:0 0 14px rgba(126,181,226,0.6);
}
.floating-scroll-dots .fdot.pr{
  border:2.5px solid var(--gold);
  box-sizing:border-box;
  box-shadow:0 0 8px rgba(212,175,55,0.4);
}
.floating-scroll-dots .fdot.done.pr{
  background:var(--gold);
  box-shadow:0 0 12px rgba(212,175,55,0.6);
}
body.light-mode .floating-scroll-dots .fdot.done{
  background:var(--text);
}
body.light-mode .floating-scroll-dots .fdot.active.done{
  background:var(--text);
}

.progress-bar-track{
  height:8px;
  background:rgba(255,255,255,0.07);
  border-radius:4px;
  overflow:hidden;
}
.progress-bar-fill{
  height:100%;
  border-radius:4px;
  transition:width .4s cubic-bezier(0.25, 1, 0.5, 1);
}
.progress-bar-fill.free{
  background:linear-gradient(90deg, var(--accent-orange) 0%, rgba(212,148,90,0.85) 100%);
  box-shadow:0 0 12px var(--accent-orangeGlow);
}
.progress-bar-fill.cable{
  background:linear-gradient(90deg, var(--blue) 0%, rgba(126,181,226,0.85) 100%);
  box-shadow:0 0 12px var(--blueGlow);
}

/* Custom Numeric Keyboard */
/* Plus/Minus Stepper Buttons */
.stepper-btn{
  width:48px;
  height:48px;
  border-radius:var(--radius-md);
  background:var(--interactive);
  border:1.5px solid var(--interactiveBorder);
  color:rgba(255,255,255,0.7);
  font-size:24px;
  font-weight:300;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .12s cubic-bezier(0.25,1,0.5,1);
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  flex-shrink:0;
  position:relative;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
  padding:0;
}
body.light-mode .stepper-btn{
  background:var(--interactive);
  border:1.5px solid var(--interactiveBorder);
  color:rgba(0,0,0,0.65);
}

.stepper-btn:active{
  color:rgba(255,255,255,0.8);
  background:rgba(255,255,255,0.12);
  transform:scale(0.88);
  border-color:rgba(255,255,255,0.15);
}
body.light-mode .stepper-btn:active{
  color:rgba(0,0,0,0.7);
  background:rgba(0,0,0,0.08);
}
.stepper-btn.fast{
  color:rgba(255,255,255,0.55);
}
.stepper-btn .ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.25);
  transform:scale(0);
  animation:stepperRipple 0.4s ease-out forwards;
  pointer-events:none;
}
@keyframes stepperRipple{
  to{transform:scale(2.5);opacity:0;}
}
@keyframes swipeHint{
  0%{
    transform:translateX(0);
  }
  20%{
    transform:translateX(-15px);
  }
  40%{
    transform:translateX(15px);
  }
  60%{
    transform:translateX(-8px);
  }
  80%{
    transform:translateX(8px);
  }
  100%{
    transform:translateX(0);
  }
}

.week-strip.swipe-hint{
  animation:swipeHint 0.8s ease-in-out 0.5s;
}

.workout-header-row.swipe-hint{
  animation:swipeHint 0.8s ease-in-out 0.8s;
}

@keyframes cardFanIn{
  0%{
    opacity:0.5;
    transform:translateX(-80px) scale(0.85);
  }
  100%{
    opacity:1;
    transform:translateX(0) scale(1);
  }
}
@keyframes dayColFanIn{
  0%{
    opacity:0;
    transform:translateY(10px) scale(0.9);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
@keyframes heroFanIn{
  0%{
    opacity:0;
    transform:scale(0.7);
  }
  100%{
    opacity:1;
    transform:none;
  }
}
.exercise-overlap-card.fan-animate,
.superset-stack.fan-animate{
  animation:cardFanIn 0.6s cubic-bezier(0.25, 1, 0.5, 1) both;
}
.day-col.fan-animate{
  animation:dayColFanIn 0.4s cubic-bezier(0.25, 1, 0.5, 1) both;
}
.hero-overlap-card.fan-animate{
  animation:heroFanIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) both;
}
/* Override selected card transform during fan animation */
.hero-overlap-card.fan-animate.selected{
  animation:heroFanInSelected 0.5s cubic-bezier(0.25, 1, 0.5, 1) both;
}
@keyframes heroFanInSelected{
  0%{
    opacity:0;
    transform:scale(0.7);
  }
  100%{
    opacity:1;
    transform:scale(1.15);
  }
}

/* Video Modal */
.video-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.9);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:600;
  padding:20px;
}
.video-modal.open{
  display:flex;
}
.video-modal-content{
  width:100%;
  max-width:560px;
  background:#000;
  border-radius:16px;
  overflow:hidden;
  position:relative;
}
.video-modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(0,0,0,0.7);
  border:none;
  color:var(--white);
  font-size:24px;
  cursor:pointer;
  display:grid;
  place-items:center;
  z-index:10;
}
.video-modal iframe{
  width:100%;
  aspect-ratio:16/9;
  border:none;
}

/* Stats Modal */

/* General purpose toast */
.fizzeek-toast{
  position:fixed;
  bottom:100px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  padding:16px 24px;
  border-radius:16px;
  background:#14141a;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
  z-index:99999;
  opacity:0;
  transition:opacity 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events:none;
  font-size:16px;
  font-weight:700;
  color:rgba(255,255,255,0.95);
  text-align:center;
  max-width:85vw;
  letter-spacing:0.2px;
}
.fizzeek-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
body.light-mode .fizzeek-toast{
  background:#ffffff;
  border-color:rgba(0,0,0,0.06);
  box-shadow:0 12px 40px rgba(0,0,0,0.12);
  color:rgba(0,0,0,0.8);
}

/* Video Coming Soon Toast */
.video-coming-soon-toast{
  position:fixed;
  bottom:100px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 20px;
  border-radius:16px;
  background:#14141a;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 12px 40px rgba(0,0,0,0.4);
  z-index:99999;
  opacity:0;
  transition:opacity 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events:none;
}
.video-coming-soon-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
body.light-mode .video-coming-soon-toast{
  background:#ffffff;
  border-color:rgba(0,0,0,0.06);
  box-shadow:0 12px 40px rgba(0,0,0,0.12);
}
.vcs-icon{
  width:36px; height:36px;
  border-radius:10px;
  background:rgba(212,148,90,0.12);
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.vcs-icon svg{
  width:16px; height:16px;
  fill:var(--accent-orange);
  stroke:none;
  margin-left:2px;
}
.vcs-title{
  font-size:14px;
  font-weight:700;
  color:rgba(255,255,255,0.9);
  letter-spacing:-0.2px;
}
body.light-mode .vcs-title{ color:rgba(0,0,0,0.85); }
.vcs-sub{
  font-size:12px;
  color:rgba(255,255,255,0.4);
  margin-top:1px;
}
body.light-mode .vcs-sub{ color:rgba(0,0,0,0.65); }

.stats-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  display:none;
  align-items:flex-end;
  justify-content:center;
  z-index:200;
  padding:0;
}
.stats-modal.open{
  display:flex;
}
.stats-modal-content{
  width:100%;
  max-width:none;
  height:100dvh;
  max-height:100dvh;
  background:#0C0C0E;
  border-radius:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:none;
}
.stats-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) 20px 14px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  background:transparent;
}
.stats-modal-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  font-weight:700;
  color:#fff;
  letter-spacing:-0.3px;
}
.stats-trophy{
  width:22px;
  height:22px;
  opacity:0.5;
}
.stats-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.stats-share-btn{
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:none;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all 0.15s ease;
}
.stats-share-btn svg{
  width:14px;
  height:14px;
  stroke:rgba(255,255,255,0.4);
  stroke-width:1.6;
  fill:none;
}
.stats-share-btn:active{
  transform:scale(0.92);
  background:rgba(255,255,255,0.15);
}
.stats-modal-close{
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:none;
  color:rgba(255,255,255,0.5);
  font-size:18px;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:all 0.15s ease;
}
.stats-modal-close:active{
  background:rgba(255,255,255,0.15);
  color:#fff;
}
.stats-search-wrapper{
  position:relative;
  padding:12px 20px;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.stats-search-icon{
  position:absolute;
  left:32px;
  top:50%;
  transform:translateY(-50%);
  width:15px;
  height:15px;
  stroke:rgba(255,255,255,0.25);
  stroke-width:1.6;
  fill:none;
  pointer-events:none;
}
.stats-search-input{
  width:100%;
  padding:10px 40px 10px 40px;
  background:rgba(255,255,255,0.05);
  border:none;
  border-radius:10px;
  color:#fff;
  font-size:14px;
  font-weight:500;
  outline:none;
  transition:background 0.15s ease;
}
.stats-search-input::placeholder{
  color:rgba(255,255,255,0.2);
}
.stats-search-input:focus{
  background:rgba(255,255,255,0.08);
}
.stats-search-clear{
  position:absolute;
  right:28px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:none;
  color:var(--gray);
  font-size:16px;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
}
.stats-search-clear.visible{
  display:flex;
}
.stats-search-clear:active{
  background:rgba(255,255,255,0.2);
}
.stats-modal-body{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:16px;
  overscroll-behavior:contain;
  touch-action:pan-y;
}
.stats-empty{
  text-align:center;
  padding:40px 20px;
  color:var(--gray);
}
.stats-empty-icon{
  font-size:48px;
  margin-bottom:16px;
  opacity:0.8;
  display:flex;
  justify-content:center;
  align-items:center;
}
.stats-empty-text{
  font-size:14px;
  line-height:1.5;
}
.pr-record-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  background:rgba(255,255,255,0.03);
  border-radius:14px;
  margin-bottom:6px;
  border:none;
  transition:background 0.12s ease;
  position:relative;
}
.pr-record-item:active{
  background:rgba(255,255,255,0.07);
}
.pr-record-item:last-child{
  margin-bottom:0;
}
.pr-record-arrow{
  color:rgba(255,255,255,0.15);
  flex-shrink:0;
  margin-left:4px;
}
.pr-record-corner-trophy{
  position:absolute;
  top:6px;
  left:6px;
  width:11px;
  height:11px;
  opacity:0.25;
}
.pr-record-corner-trophy svg{
  width:11px;
  height:11px;
  fill:rgba(255,255,255,0.6);
}
.pr-record-info{
  flex:1;
  min-width:0;
  padding-left:8px;
}
.pr-record-exercise{
  font-size:14px;
  font-weight:600;
  color:#fff;
  margin-bottom:2px;
  line-height:1.3;
}
.pr-record-details{
  font-size:11px;
  color:rgba(255,255,255,0.25);
}
.pr-record-value{
  text-align:right;
  flex-shrink:0;
}
.pr-record-value-split{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.pr-value-col{
  text-align:center;
}
.pr-value-x{
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.15);
}
.pr-record-amount{
  font-size:18px;
  font-weight:800;
  color:#fff;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.5px;
}
.pr-record-unit{
  font-size:9px;
  color:rgba(255,255,255,0.25);
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.pr-date-group{
  margin-bottom:20px;
}
.pr-date-header{
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.25);
  text-transform:uppercase;
  letter-spacing:1.2px;
  margin-bottom:10px;
  padding-left:4px;
}

/* Light mode stats modal */
body.light-mode .stats-modal-content{
  background:#f5f5f7;
}
body.light-mode .stats-modal-header{
  background:transparent;
  border-bottom-color:rgba(0,0,0,0.06);
}
body.light-mode .stats-modal-title{
  color:#1d1d1f;
}
body.light-mode .stats-modal-close{
  background:rgba(0,0,0,0.06);
  color:rgba(0,0,0,0.65);
}
body.light-mode .stats-share-btn{
  background:rgba(0,0,0,0.06);
}
body.light-mode .stats-share-btn svg{
  stroke:rgba(0,0,0,0.55);
}
body.light-mode .stats-search-wrapper{
  border-bottom-color:rgba(0,0,0,0.04);
}
body.light-mode .stats-search-input{
  background:rgba(0,0,0,0.05);
  color:#1d1d1f;
}
body.light-mode .stats-search-input::placeholder{
  color:rgba(0,0,0,0.25);
}
body.light-mode .stats-search-input:focus{
  background:rgba(0,0,0,0.07);
}
body.light-mode .stats-search-clear{
  background:rgba(0,0,0,0.06);
}
body.light-mode .pr-record-item{
  background:rgba(0,0,0,0.03);
}
body.light-mode .pr-record-exercise{
  color:#1d1d1f;
}
body.light-mode .pr-record-amount{
  color:#1d1d1f;
}
body.light-mode .pr-record-details{
  color:rgba(0,0,0,0.65);
}
body.light-mode .pr-record-unit{
  color:rgba(0,0,0,0.65);
}
body.light-mode .pr-date-header{
  color:rgba(0,0,0,0.35);
}
body.light-mode .pr-value-x{
  color:rgba(0,0,0,0.25);
}
body.light-mode .pr-record-arrow{
  color:rgba(0,0,0,0.55);
}
body.light-mode .pr-record-item:active{
  background:rgba(0,0,0,0.06);
}
body.light-mode .pr-record-corner-trophy svg{
  fill:rgba(0,0,0,0.25);
}

/* Reset Modal */
.reset-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  display:none;
  align-items:flex-end;
  justify-content:center;
  z-index:600;
  padding:0;
}
.reset-modal.open{
  display:flex;
}
.reset-modal-content{
  width:100%;
  max-width:none;
  height:100dvh;
  max-height:100dvh;
  background:#1e1e1e;
  border-radius:0;
  overflow:hidden;
  border:none;
}
.reset-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:calc(20px + env(safe-area-inset-top)) 20px 20px;
  border-bottom:1px solid rgba(255,255,255,0.1);
  background:rgba(0,0,0,0.3);
}
.reset-modal-title{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:18px;
  font-weight:700;
  color:#FF6B6B;
}
.reset-icon{
  width:24px;
  height:24px;
}
.reset-modal-close{
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:none;
  color:var(--white);
  font-size:24px;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.reset-modal-close:active{
  background:rgba(255,255,255,0.2);
}
.reset-modal-body{
  padding:24px 20px;
  text-align:center;
}
.reset-warning-icon{
  margin-bottom:16px;
  display:flex;
  justify-content:center;
}
.reset-warning-icon svg{
  width:48px;
  height:48px;
  stroke:#E6D1A3;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
.reset-warning-title{
  font-size:20px;
  font-weight:700;
  color:#FF6B6B;
  margin-bottom:12px;
}
.reset-warning-text{
  font-size:14px;
  color:var(--grayLight);
  line-height:1.5;
  margin-bottom:8px;
}
.reset-warning-text strong{
  color:var(--white);
  display:block;
  margin-top:8px;
  font-size:16px;
}
.reset-warning-note{
  font-size:12px;
  color:var(--gray);
  line-height:1.5;
  margin-bottom:20px;
  padding:12px;
  background:rgba(255,107,107,0.1);
  border-radius:10px;
  border:1px solid rgba(255,107,107,0.2);
}
.reset-checkbox-label{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  background:rgba(255,255,255,0.03);
  border-radius:12px;
  cursor:pointer;
  margin-bottom:20px;
  text-align:left;
}
.reset-checkbox-label input{
  display:none;
}
.reset-checkbox-custom{
  width:22px;
  height:22px;
  border-radius:6px;
  border:2px solid var(--gray);
  background:transparent;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
}
.reset-checkbox-label input:checked + .reset-checkbox-custom{
  background:#FF6B6B;
  border-color:#FF6B6B;
}
.reset-checkbox-label input:checked + .reset-checkbox-custom::after{
  content:'✓';
  color:#fff;
  font-size:14px;
  font-weight:700;
}
.reset-checkbox-text{
  font-size:13px;
  color:var(--grayLight);
  line-height:1.4;
}
.reset-modal-actions{
  display:flex;
  gap:12px;
}
.reset-cancel-btn{
  flex:1;
  padding:14px;
  border-radius:12px;
  border:none;
  background:rgba(255,255,255,0.1);
  color:var(--white);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}
.reset-cancel-btn:active{
  background:rgba(255,255,255,0.15);
}
.reset-confirm-btn{
  flex:1;
  padding:14px;
  border-radius:12px;
  border:none;
  background:#FF6B6B;
  color:#fff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  opacity:0.5;
  pointer-events:none;
  transition:opacity 0.2s ease;
}
.reset-confirm-btn:not(:disabled){
  opacity:1;
  pointer-events:auto;
}
.reset-confirm-btn:not(:disabled):active{
  transform:scale(0.98);
}

/* Light mode reset modal */
body.light-mode .reset-modal-content{
  background:#ffffff;

}
body.light-mode .reset-modal-header{
  background:rgba(0,0,0,0.03);
  border-bottom-color:rgba(0,0,0,0.65);
}
body.light-mode .reset-modal-close{
  background:rgba(0,0,0,0.08);
  color:var(--text);
}
body.light-mode .reset-warning-text{
  color:#666;
}
body.light-mode .reset-warning-text strong{
  color:var(--text);
}
body.light-mode .reset-warning-note{
  background:rgba(255,107,107,0.08);
}
body.light-mode .reset-checkbox-label{
  background:rgba(0,0,0,0.03);
}
body.light-mode .reset-checkbox-text{
  color:#666;
}
body.light-mode .reset-cancel-btn{
  background:rgba(0,0,0,0.08);
  color:var(--text);
}

/* Set Types Info Modal */
.info-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  display:none;
  align-items:flex-end;
  justify-content:center;
  z-index:200;
  padding:0;
}
.info-modal.open{
  display:flex;
}
.info-modal-content{
  width:100%;
  max-width:480px;
  height:auto;
  max-height:none;
  background:linear-gradient(160deg, #1A1408 0%, #120E06 100%);
  border-radius:20px 20px 0 0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(201,168,76,0.18);
  border-bottom:none;
  box-shadow:0 -8px 40px rgba(0,0,0,0.5);
}
.info-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 20px 16px;
  border-bottom:1px solid rgba(201,168,76,0.10);
}
.info-modal-type-label{
  font-size:16px;
  font-weight:800;
  color:rgba(240,228,196,0.92);
  letter-spacing:0.3px;
}
.info-lightbulb-icon{ display:none; }
.info-modal-title{ display:none; }
.info-modal-icon{ display:none; }
.info-modal-close{
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:none;
  color:rgba(255,255,255,0.60);
  font-size:20px;
  cursor:pointer;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.info-modal-close:active{ background:rgba(255,255,255,0.16); }
.info-modal-body{
  overflow:hidden;
  padding:16px 16px 24px;
}
.info-item{
  display:none;
  padding:18px;
  background:rgba(201,168,76,0.05);
  border-radius:16px;
  border:1px solid rgba(201,168,76,0.14);
}
.info-item-icon{
  font-size:28px;
  margin-bottom:10px;
  line-height:1;
}
.info-item-title{
  font-size:17px;
  font-weight:800;
  color:rgba(240,228,196,0.95);
  margin-bottom:8px;
  line-height:1.2;
}
.info-item-desc{
  font-size:13px;
  line-height:1.55;
  color:rgba(240,228,196,0.55);
  margin-bottom:14px;
}
.info-item-benefit-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.info-benefit-chip{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.5px;
  color:rgba(201,168,76,0.80);
  background:rgba(201,168,76,0.10);
  border:1px solid rgba(201,168,76,0.20);
  border-radius:20px;
  padding:3px 10px;
}
.info-item-header{ display:none; }
.info-item-tag{ display:none; }
/* Light mode */
body.light-mode .info-modal-content{
  background:#ffffff;
  border-color:rgba(0,0,0,0.12);
}
body.light-mode .info-modal-header{ border-bottom-color:rgba(0,0,0,0.08); }
body.light-mode .info-modal-type-label{ color:rgba(0,0,0,0.88); }
body.light-mode .info-modal-close{ background:rgba(0,0,0,0.05); color:rgba(0,0,0,0.50); }
body.light-mode .info-item{ background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.09); }
body.light-mode .info-item-title{ color:rgba(0,0,0,0.88); }
body.light-mode .info-item-desc{ color:rgba(0,0,0,0.50); }
body.light-mode .info-benefit-chip{ color:rgba(100,70,0,0.80); background:rgba(100,70,0,0.07); border-color:rgba(100,70,0,0.15); }

/* Light mode info modal */
body.light-mode .info-modal-content{
  background:#ffffff;

}
body.light-mode .info-modal-header{
  background:rgba(0,0,0,0.03);
  border-bottom-color:rgba(0,0,0,0.65);
}
body.light-mode .info-modal-title{
  color:var(--text);
}
body.light-mode .info-modal-close{
  background:rgba(0,0,0,0.08);
  color:var(--text);
}
body.light-mode .info-item{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.08);
}
body.light-mode .info-item.highlight{
  background:rgba(230,209,163,0.12);
  border-color:rgba(230,209,163,0.4);
}
body.light-mode .info-item.highlight.superset-highlight{
  background:rgba(162,100,190,0.12);
  border-color:rgba(162,100,190,0.4);
}
body.light-mode .info-item-title{
  color:var(--text);
}
body.light-mode .info-item-desc{
  color:#666;
}
body.light-mode .info-item-desc strong{
  color:var(--text);
}

/* Stats Graph Modal */
.stats-graph-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.95);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  display:none;
  align-items:flex-end;
  justify-content:center;
  z-index:200;
  padding:0;
}
.stats-graph-modal.open{
  display:flex;
}
.stats-graph-modal-content{
  width:100%;
  max-width:none;
  height:100dvh;
  max-height:100dvh;
  background:#0C0C0E;
  border-radius:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:none;
}
.stats-graph-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) 20px 14px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  background:transparent;
  gap:10px;
}
.stats-graph-modal-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
  flex-shrink:1;
  min-width:0;
  letter-spacing:-0.3px;
}
.stats-graph-modal-title span{
  white-space:nowrap;
}
.stats-graph-icon{
  width:20px;
  height:20px;
  stroke:rgba(255,255,255,0.4);
  stroke-width:1.6;
  fill:none;
  flex-shrink:0;
}
.stats-graph-modal-close{
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:none;
  color:rgba(255,255,255,0.5);
  font-size:18px;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:all 0.15s ease;
}
.stats-graph-modal-close:active{
  background:rgba(255,255,255,0.15);
  color:#fff;
}
.stats-graph-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.stats-graph-share-btn{
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:none;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all 0.15s ease;
}
.stats-graph-share-btn svg{
  width:14px;
  height:14px;
  stroke:rgba(255,255,255,0.4);
  stroke-width:1.6;
  fill:none;
}
.stats-graph-share-btn:active{
  transform:scale(0.92);
  background:rgba(255,255,255,0.15);
}
.stats-graph-info-btn{
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:none;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all 0.15s ease;
  position:relative;
  overflow:visible;
}
@keyframes statsInfoFlash{
  0%{opacity:0;transform:scale(1);}
  15%{opacity:0.5;transform:scale(1.3);}
  40%{opacity:0;transform:scale(1.8);}
  100%{opacity:0;transform:scale(1.8);}
}
.stats-graph-info-btn.pulse-loop::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.3);
  animation:statsInfoFlash 5s ease-out infinite;
  pointer-events:none;
}
.stats-graph-info-btn svg{
  width:14px;
  height:14px;
  stroke:rgba(255,255,255,0.4);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
.stats-graph-info-btn:active{
  transform:scale(0.92);
  background:rgba(255,255,255,0.15);
}
.stats-graph-modal-body{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:24px 20px;
  overscroll-behavior:contain;
  touch-action:pan-y;
}
/* ---- Line chart card ---- */
.stats-line-chart-container{
  background:rgba(255,255,255,0.03);
  border-radius:20px;
  padding:20px 16px;
  margin-bottom:28px;
  border:none;
}
.stats-line-chart-title{
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.3);
  margin-bottom:16px;
  text-align:left;
  text-transform:uppercase;
  letter-spacing:1.5px;
}
#statsLineChart{
  width:100%;
  max-width:100%;
}
.stats-line-chart-legend{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-top:16px;
}
.line-legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:rgba(255,255,255,0.35);
  font-weight:600;
  letter-spacing:0.3px;
}
.line-legend-color{
  width:16px;
  height:3px;
  border-radius:2px;
}
.line-legend-color.consistency{background:#C8A96E;}
.line-legend-color.commitment{background:#8E99A4;}
.line-legend-color.control{background:#BFA08A;}
.stats-chart-container{
  display:flex;
  justify-content:center;
  margin-bottom:-16px;
}
#statsRadarChart{
  max-width:100%;
}
.stats-breakdown{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
/* Each metric as a horizontal card */
.stats-breakdown-item{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  text-align: left;
}
.stats-breakdown-ring{
  width: 52px;
  height: 52px;
  position: relative;
  flex-shrink: 0;
}
.stats-breakdown-ring svg{
  transform: rotate(-90deg);
}
.stats-breakdown-ring .ring-bg{
  stroke: rgba(255,255,255,0.06);
  stroke-width: 4;
  fill: none;
}
.stats-breakdown-ring .ring-fill{
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4,0,0.2,1);
}
.stats-breakdown-item.consistency .ring-fill{ stroke: #C8A96E; }
.stats-breakdown-item.commitment  .ring-fill{ stroke: #7EB5E2; }
.stats-breakdown-item.control     .ring-fill{ stroke: #34D399; }
.stats-breakdown-value{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.3px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stats-breakdown-text{
  flex: 1;
  min-width: 0;
}
.stats-breakdown-label{
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.1px;
  margin-bottom: 6px;
}
.stats-breakdown-bar{
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
}
.stats-breakdown-bar-fill{
  height: 100%;
  border-radius: 2px;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
.stats-breakdown-item.consistency .stats-breakdown-bar-fill{ background: #C8A96E; }
.stats-breakdown-item.commitment  .stats-breakdown-bar-fill{ background: #7EB5E2; }
.stats-breakdown-item.control     .stats-breakdown-bar-fill{ background: #34D399; }
.stats-breakdown-desc{ display: none; }
/* ═══ RANK MODAL REDESIGN ═══════════════════════════════════ */
.stats-overall{
  position: relative;
  text-align: center;
  padding: 40px 24px 28px;
  background: rgba(255,255,255,0.025);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 20px;
  overflow: hidden;
}
/* Atmospheric glow behind rank icon */
.stats-overall::before {
  content: '';
  position: absolute;
  top: -20px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--rank-glow, rgba(200,169,110,0.12));
  filter: blur(40px);
  pointer-events: none;
  transition: background 0.6s ease;
}
.stats-overall-label{
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,0.22);
  margin-bottom: 28px;
}
.stats-overall-score-row{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.stats-current-rank-icon{
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.stats-current-rank-icon .rank-icon{
  width: 110px;
  height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 8px 28px var(--rank-shadow, rgba(200,169,110,0.45)));
  transition: filter 0.5s ease;
}
.stats-score-container{
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.stats-overall-score{
  font-size: 72px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -4px;
  font-variant-numeric: tabular-nums;
}
.stats-overall-max{
  font-size: 20px;
  font-weight: 500;
  color: rgba(255,255,255,0.18);
  letter-spacing: -0.5px;
}
.stats-overall-rank{
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 20px;
  margin-top: 4px;
  border: 1.5px solid;
}
.stats-rank-tiers{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:flex-end;
  gap:16px;
  margin-top:16px;
  padding:20px 0 4px;
  border-top:1px solid rgba(255,255,255,0.04);
}
.rank-tier-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  transition:all 0.3s ease;
  flex:0 0 auto;
  width:56px;
}
.rank-tier-item:not(.active){
  opacity:0.2;
  filter:grayscale(80%);
}
.rank-tier-item.active{
  opacity:1;
  transform:scale(1.15);
}
.rank-tier-icon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rank-tier-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.rank-tier-item.active .rank-tier-icon{
  filter:drop-shadow(0 4px 14px rgba(0,0,0,0.6));
}
.rank-tier-item[data-rank="legend"] .rank-tier-icon img{
  transform:scale(1.2);
}
.rank-tier-range{
  font-size:10px;
  font-weight:600;
  color:rgba(255,255,255,0.2);
  letter-spacing:0.3px;
}
.rank-tier-item.active .rank-tier-range{
  color:rgba(255,255,255,0.6);
}

.stats-days-completed{
  text-align:center;
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.35);
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.04);
}
.stats-days-count{
  font-weight:800;
  color:#fff;
  font-size:15px;
}
.stats-days-total{
  font-weight:800;
}
body.light-mode .stats-days-completed{
  color:rgba(0,0,0,0.65);
  border-top-color:rgba(0,0,0,0.06);
}
body.light-mode .stats-days-count{
  color:rgba(0,0,0,0.8);
}

/* Light mode stats graph modal */
body.light-mode .stats-graph-modal-content{
  background:#f5f5f7;
}
body.light-mode .stats-graph-modal-header{
  background:transparent;
  border-bottom-color:rgba(0,0,0,0.06);
}
body.light-mode .stats-graph-modal-title{
  color:#1d1d1f;
}
body.light-mode .stats-graph-modal-title .stats-graph-icon{
  stroke:rgba(0,0,0,0.55);
}
body.light-mode .stats-graph-modal-close{
  background:rgba(0,0,0,0.06);
  color:rgba(0,0,0,0.65);
}
body.light-mode .stats-line-chart-container{
  background:rgba(0,0,0,0.03);
  border:none;
}
body.light-mode .stats-line-chart-title{
  color:rgba(0,0,0,0.6);
}
body.light-mode .line-legend-item{
  color:rgba(0,0,0,0.35);
}
body.light-mode .stats-breakdown-label{
  color:var(--text);
}
body.light-mode .stats-breakdown-value{
  color:var(--text);
}
body.light-mode .stats-breakdown-ring .ring-bg{
  stroke:rgba(0,0,0,0.55);
}
body.light-mode .stats-overall{
  background:linear-gradient(135deg, rgba(230,209,163,0.15), rgba(230,209,163,0.08));
}
body.light-mode .stats-overall-rank{
  color:var(--text);
}
body.light-mode .stats-overall-label{
  color:rgba(0,0,0,0.65);
}
body.light-mode .stats-overall-score{
  color:#1d1d1f;
}
body.light-mode .stats-overall-max{
  color:rgba(0,0,0,0.25);
}
body.light-mode .rank-tier-range{
  color:rgba(0,0,0,0.35);
}
body.light-mode .rank-tier-item.active .rank-tier-range{
  color:rgba(0,0,0,0.7);
}
body.light-mode .stats-graph-info-btn{
  background:rgba(0,0,0,0.06);
}
body.light-mode .stats-graph-info-btn svg{
  stroke:rgba(0,0,0,0.55);
}
body.light-mode .stats-graph-info-btn.pulse-loop::before{
  border-color:rgba(0,0,0,0.55);
}
body.light-mode .stats-graph-info-btn:active{
  background:rgba(0,0,0,0.12);
}
body.light-mode .stats-graph-share-btn{
  background:rgba(0,0,0,0.06);
}
body.light-mode .stats-graph-share-btn svg{
  stroke:rgba(0,0,0,0.55);
}

/* Stats Info Modal */
.stats-info-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.9);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  display:none;
  align-items:flex-end;
  justify-content:center;
  z-index:250;
  padding:0;
}
.stats-info-modal.open{
  display:flex;
}
.stats-info-modal-content{
  width:100%;
  max-width:none;
  height:100dvh;
  max-height:100dvh;
  background:#0C0C0E;
  border-radius:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:none;
}
.stats-info-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) 20px 14px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  background:transparent;
}
.stats-info-modal-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  font-weight:700;
  color:#fff;
}
.stats-info-icon{
  width:20px;
  height:20px;
  stroke:rgba(255,255,255,0.4);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
.stats-info-modal-close{
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:none;
  color:rgba(255,255,255,0.5);
  font-size:18px;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.stats-info-modal-close:active{
  background:rgba(255,255,255,0.15);
}
.stats-info-modal-body{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:20px;
  overscroll-behavior:contain;
  touch-action:pan-y;
}
.stats-info-section{
  margin-bottom:24px;
}
.stats-info-section:last-child{
  margin-bottom:0;
}
.stats-info-section-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:700;
  color:var(--white);
  margin-bottom:8px;
}
.stats-info-section-icon{
  width:22px;
  height:22px;
  stroke:#E6D1A3;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  flex-shrink:0;
}
.stats-info-section-desc{
  font-size:13px;
  color:var(--grayLight);
  line-height:1.5;
  margin-bottom:12px;
}
.stats-info-section-desc strong{
  color:var(--white);
  white-space:nowrap;
}
.stats-info-metric{
  background:rgba(255,255,255,0.03);
  border-radius:12px;
  padding:12px;
  margin-bottom:10px;
  border:1px solid rgba(255,255,255,0.06);
}
.stats-info-metric:last-child{
  margin-bottom:0;
}
.stats-info-metric-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
.stats-info-dot{
  width:12px;
  height:12px;
  border-radius:50%;
}
.stats-info-dot.consistency{background:#C8A96E;}
.stats-info-dot.commitment{background:#8E99A4;}
.stats-info-dot.control{background:#BFA08A;}
.stats-info-metric-name{
  font-size:14px;
  font-weight:700;
  color:var(--white);
}
.stats-info-metric-desc{
  font-size:12px;
  color:var(--gray);
  line-height:1.5;
}
.stats-info-metric-desc strong{
  color:var(--grayLight);
}
.stats-info-ranks-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:16px;
}
.stats-info-rank-item{
  display:grid;
  grid-template-columns:80px 1fr;
  align-items:center;
  gap:16px;
  background:rgba(255,255,255,0.03);
  border-radius:12px;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,0.06);
}
.stats-info-rank-icon-wrapper{
  width:80px;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.stats-info-rank-icon{
  max-width:80px;
  max-height:70px;
  object-fit:contain;
}
.stats-info-rank-icon[src=""],.stats-info-rank-icon:not([src]),.stats-info-rank-icon[src]:not([src$=".png"]):not([src$=".jpg"]):not([src$=".svg"]){
  display:none;
}
.stats-info-rank-icon-wrapper.legend-icon-wrapper{
  width:80px;
  height:70px;
}
.legend-icon-wrapper .stats-info-rank-icon{
  max-width:80px;
  max-height:70px;
  transform:scale(1.15);
}
.stats-info-rank-details{
  text-align:left;
}
.stats-info-rank-name{
  font-size:15px;
  font-weight:700;
  margin-bottom:2px;
}
.stats-info-rank-name.rookie{color:#7CB342;}
.stats-info-rank-name.advanced{color:#3B82F6;}
.stats-info-rank-name.pro{color:#EF4444;}
.stats-info-rank-name.legend{color:#C8A96E;display:block;text-align:left;padding:0;margin:0 0 2px 0;gap:0;justify-content:flex-start;}
.stats-info-rank-range{
  font-size:11px;
  font-weight:600;
  color:var(--gray);
  margin-bottom:4px;
}
.stats-info-rank-desc{
  font-size:12px;
  color:var(--grayLight);
  line-height:1.4;
}

/* Light mode stats info modal */
body.light-mode .stats-info-modal-content{
  background:#f5f5f7;
}
body.light-mode .stats-info-modal-header{
  background:transparent;
  border-bottom-color:rgba(0,0,0,0.06);
}
body.light-mode .stats-info-modal-title{
  color:#1d1d1f;
}
body.light-mode .stats-info-modal-close{
  background:rgba(0,0,0,0.06);
  color:rgba(0,0,0,0.65);
}
body.light-mode .stats-info-section-title{
  color:var(--text);
}
body.light-mode .stats-info-section-desc{
  color:#666;
}
body.light-mode .stats-info-section-desc strong{
  color:var(--text);
}
body.light-mode .stats-info-metric{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.06);
}
body.light-mode .stats-info-metric-name{
  color:var(--text);
}
body.light-mode .stats-info-rank{
  background:rgba(0,0,0,0.05);
}
body.light-mode .stats-info-rank-item{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.06);
}

/* Set page dots */
/* set-page-dots removed — using .set-dots / .set-dot now */

/* ==================== FIZZEEK CUSTOM KEYBOARD ==================== */
.keyboard-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index:9998;
  display:none;
  touch-action:manipulation;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.keyboard-overlay.open{
  display:block;
}

.fizzeek-keyboard{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:#14141a;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-top:1px solid rgba(255,255,255,0.06);
  border-radius:24px 24px 0 0;
  padding:8px 16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:9999;
  transform:translateY(100%);
  transition:transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  touch-action:manipulation;
  -webkit-touch-callout:none;
  box-shadow:0 -16px 48px rgba(0,0,0,0.4);
}
body.light-mode .fizzeek-keyboard{
  background:#1c1c22;
}
.fizzeek-keyboard.open{
  transform:translateY(0);
}

.keyboard-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:4px 0 10px;
}
.keyboard-value-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  width:100%;
}
.kb-stepper{
  width:44px;
  height:44px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:all 0.12s ease;
  flex-shrink:0;
}
.kb-stepper svg{
  width:20px;
  height:20px;
}
.kb-stepper:active{
  background:rgba(255,255,255,0.18);
  transform:scale(0.92);
}
.kb-stepper-minus{
  color:rgba(255,100,100,0.7);
}
.kb-stepper-minus:active{
  background:rgba(255,100,100,0.15);
}
.kb-stepper-plus{
  color:rgba(212,148,90,0.8);
}
.kb-stepper-plus:active{
  background:rgba(212,148,90,0.15);
}
.fizzeek-keyboard .kb-stepper-plus.cable{
  color:rgba(126,181,226,0.8);
}
.fizzeek-keyboard .kb-stepper-plus.cable:active{
  background:rgba(126,181,226,0.15);
}
.keyboard-input-label{
  font-size:9px;
  font-weight:600;
  color:rgba(255,255,255,0.35);
  text-transform:uppercase;
  letter-spacing:2px;
}
.keyboard-input-value{
  font-size:32px;
  font-weight:600;
  color:#fff;
  min-width:40px;
  text-align:center;
  letter-spacing:0.5px;
}
.keyboard-input-unit{
  font-size:11px;
  font-weight:500;
  color:rgba(255,255,255,0.25);
  text-transform:uppercase;
  letter-spacing:1px;
}

.keyboard-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
  max-width:100%;
  margin:0 auto;
}

.kb-key{
  height:48px;
  border-radius:14px;
  background:rgba(255,255,255,0.06);
  border:none;
  color:rgba(255,255,255,0.9);
  font-size:22px;
  font-weight:500;
  cursor:pointer;
  transition:all 0.1s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  position:relative;
}
body.light-mode .kb-key{
  color:#FFFFFF;
}
.kb-key:active{
  background:rgba(255,255,255,0.14);
  transform:scale(0.96);
}
.kb-key svg{
  width:22px;
  height:22px;
}

.kb-clear{
  background:rgba(212,188,138,0.12);
  color:rgba(212,188,138,0.85);
  font-weight:600;
}
.kb-clear:active{
  background:rgba(212,188,138,0.25);
}

.kb-backspace{
  background:rgba(255,255,255,0.04);
}
.kb-backspace svg{
  stroke:rgba(255,255,255,0.35);
}
.kb-backspace:active{
  background:rgba(255,255,255,0.1);
}

.keyboard-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.kb-cancel{
  flex:1;
  height:44px;
  border-radius:14px;
  background:rgba(255,255,255,0.06);
  border:none;
  color:rgba(255,255,255,0.6);
  font-size:15px;
  font-weight:500;
  cursor:pointer;
  transition:all 0.12s ease;
}
body.light-mode .kb-cancel{
  color:rgba(255,255,255,0.7);
}
.kb-cancel:active{
  background:rgba(255,255,255,0.15);
}

.kb-done{
  flex:1;
  height:48px;
  border-radius:14px;
  background:var(--accent-orange);
  border:none;
  color:#000;
  font-size:16px;
  font-weight:800;
  letter-spacing:0.5px;
  cursor:pointer;
  transition:all 0.12s ease;
  box-shadow:0 2px 12px rgba(212,148,90,0.2);
}
.kb-done:active{
  transform:scale(0.98);
  filter:brightness(1.1);
}
.kb-done.cable{
  background:var(--blue);
  box-shadow:0 2px 12px rgba(126,181,226,0.2);
}

/* Quick-entry chips */
.keyboard-quick-chips{
  display:flex;
  gap:6px;
  padding:6px 16px 4px;
  justify-content:center;
}
.kb-chip{
  padding:6px 14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.6);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.15s;
}
.kb-chip:active{
  background:rgba(212,148,90,0.15);
  border-color:rgba(212,148,90,0.3);
  color:var(--accent-orange);
  transform:scale(0.95);
}
body.light-mode .kb-chip{
  border-color:rgba(0,0,0,0.08);
  background:rgba(0,0,0,0.03);
  color:rgba(0,0,0,0.7);
}

/* ==================== LANDSCAPE FULLSCREEN CALENDAR ==================== */
@media (orientation: landscape) and (max-height: 500px) {

/* Stats/PRs Modal */
.workout-select-modal{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:200;display:none;visibility:hidden;opacity:0;align-items:center;justify-content:center;padding:20px;}
.workout-select-modal.open{display:flex;visibility:visible;opacity:1;}
.workout-select-box{background:linear-gradient(180deg,#2a2826 0%,#1a1816 100%);border-radius:20px;padding:24px;max-width:300px;width:100%;border:1px solid rgba(230,209,163,0.2);}
.workout-select-title{font-size:18px;font-weight:700;color:#E6D1A3;text-align:center;margin-bottom:20px;}
.workout-select-btn{display:block;width:100%;padding:14px;margin-bottom:10px;background:rgba(255,255,255,0.05);border:1px solid rgba(230,209,163,0.2);border-radius:12px;color:#fff;font-size:14px;font-weight:600;text-align:center;cursor:pointer;transition:all 0.2s;text-decoration:none;}
.workout-select-btn:hover{background:rgba(230,209,163,0.15);border-color:rgba(230,209,163,0.4);}
.workout-select-btn:last-child{margin-bottom:0;}
.workout-select-close{position:absolute;top:20px;right:20px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;cursor:pointer;opacity:0.6;}
.workout-select-close:hover{opacity:1;}

} /* close landscape media query */

/* ==================== ENHANCEMENT 1: Scroll Indicator Dots ==================== */
/* Unified Exercise Panel - wraps mini cards + expanded card as one piece */
.unified-exercise-panel{
  position:relative;
  margin:6px 8px 20px;
  max-width:540px;
  background:rgba(255,255,255,0.035);
  border:1.5px solid rgba(255,255,255,0.07);
  border-radius:24px;
  overflow:visible;
  padding:0;
  box-shadow:0 8px 40px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
@media(min-width:560px){
  .unified-exercise-panel{
    margin-left:auto;
    margin-right:auto;
  }
}
body.light-mode .unified-exercise-panel{
  background:rgba(255,255,255,0.65);
  border-color:rgba(0,0,0,0.06);
  box-shadow:0 8px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Panel nav arrows */
.panel-nav-arrow{
  display:none !important;
}
.panel-nav-arrow svg{
  width:20px;
  height:20px;
  color:rgba(255,255,255,0.3);
}
.panel-nav-prev{
  left:4px;
}
.panel-nav-next{
  right:4px;
}
body.light-mode .panel-nav-arrow svg{
  color:rgba(0,0,0,0.25);
}

.exercise-mini-group{
  display:none;
}

/* Exercise Tab Strip */
.exercise-tab-strip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 14px 8px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  position:relative;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 12px, black calc(100% - 12px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, black 12px, black calc(100% - 12px), transparent 100%);
}
.exercise-tab-strip::-webkit-scrollbar{ display:none; }

.exercise-tab{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px 16px;
  border-radius:14px;
  background:rgba(255,255,255,0.035);
  border:1.5px solid rgba(255,255,255,0.06);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  position:relative;
  min-width:85px;
  transform:scale(0.96);
  opacity:0.8;
  margin-top:10px;
}
.exercise-tab:active{
  transform:scale(0.96);
}
.exercise-tab-name{
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.65);
  transition:color 0.2s ease;
  line-height:1.2;
}
/* Nav arrow flash animation */
@keyframes miniCardFlash{
  0%,100%{ opacity:1; }
  50%{ opacity:0.3; }
}
@keyframes miniCardFlashSlow{
  0%,100%{ opacity:1; }
  50%{ opacity:0.25; }
}
.exercise-tab.nav-flash,
.exercise-tab-superset-stack.nav-flash{
  animation:miniCardFlash 0.3s ease 3;
}
.exercise-tab.nav-jump-flash,
.exercise-tab-superset-stack.nav-jump-flash{
  animation:miniCardFlashSlow 0.6s ease 3;
}
.exercise-tab.tab-selected{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.12);
  transform:scale(1.04);
  opacity:1;
  z-index:2;
}
.exercise-tab.tab-selected .exercise-tab-name{
  color:rgba(255,255,255,0.9);
}
.exercise-tab.tab-selected[data-week-type="cable"]{
  background:rgba(126,181,226,0.06);
  border-color:rgba(126,181,226,0.15);
}
body.light-mode .exercise-tab{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.06);
}
body.light-mode .exercise-tab-name{
  color:rgba(0,0,0,0.7);
}
body.light-mode .exercise-tab.tab-selected{
  background:rgba(0,0,0,0.06);
  border-color:rgba(0,0,0,0.65);
}
body.light-mode .exercise-tab.tab-selected .exercise-tab-name{
  color:rgba(0,0,0,0.85);
}
/* Status dot — hidden, states moved to numbered circles */
.exercise-tab-status{
  display:none !important;
}
/* Tab number circle — status indicator only, not selection */
.exercise-tab-num{
  width:30px; height:30px;
  border-radius:50% !important;
  background:transparent;
  color:rgba(255,255,255,0.8);
  font-size:13px;
  font-weight:700;
  display:grid;
  place-items:center;
  flex-shrink:0;
  line-height:1;
  border:2px solid rgba(255,255,255,0.8);
  transition:all 0.2s ease;
  opacity:0.5;
  aspect-ratio:1;
  position:relative;
}
/* When parent tab is selected, brighten and enlarge circle */
.exercise-tab.tab-selected .exercise-tab-num{
  opacity:1;
  transform:scale(1.35);
  border-color:#ffffff;
  color:#ffffff;
}
.exercise-tab.tab-selected .exercise-tab-num.tab-num-float{
  transform:translateX(-50%) scale(1.35);
}
/* Floating number — centered above standard tabs */
.exercise-tab-num.tab-num-float{
  position:absolute;
  top:-20px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  background:transparent;
  border:2px solid rgba(255,255,255,0.8);
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
body.light-mode .exercise-tab-num.tab-num-float{
  background:transparent;
  border-color:rgba(0,0,0,0.7);
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}
.exercise-tab-num.tab-num-small{
  width:24px; height:24px;
  font-size:11px;
}
/* Superset stacked separate cards */
.exercise-tab-superset-stack{
  display:flex;
  flex-direction:column;
  gap:3px;
  flex-shrink:0;
  border-left:3px solid var(--purple);
  border-radius:3px 0 0 3px;
  padding-left:2px;
  opacity:0.7;
  position:relative;
  transform:scale(0.92);
  transition:all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.exercise-tab-superset-stack:has(.tab-selected){
  opacity:1;
  transform:scale(1.08);
  z-index:2;
}
.exercise-tab.tab-stacked-card{
  border-radius:10px;
  padding:5px 12px;
  transform:none !important;
  opacity:1 !important;
  margin-top:0;
}
body.light-mode .exercise-tab-num{
  background:transparent;
  border-color:rgba(0,0,0,0.7);
  color:rgba(0,0,0,0.7);
}
/* Hide old status dots */
.exercise-tab.tab-complete .exercise-tab-status,
.exercise-tab.tab-complete[data-week-type="cable"] .exercise-tab-status,
.exercise-tab.tab-pr .exercise-tab-status,
.exercise-tab.tab-complete.tab-pr .exercise-tab-status{
  display:none !important;
}
/* Superset tab — purple accent */
.exercise-tab.tab-superset .exercise-tab-name{
  color:rgba(255,255,255,0.4);
}
.exercise-tab.tab-superset::before{
  content:'';
  width:3px;
  height:14px;
  border-radius:2px;
  background:var(--purple);
  flex-shrink:0;
  opacity:0.5;
}

/* Selected tab */
.exercise-tab.tab-selected{
  background:rgba(212,148,90,0.15);
  border-color:rgba(212,148,90,0.3);
  transform:scale(1.12);
  z-index:2;
}
.exercise-tab.tab-selected .exercise-tab-name{
  color:var(--accent-orange);
  font-weight:700;
}
.exercise-tab.tab-selected[data-week-type="cable"]{
  background:rgba(106,168,232,0.15);
  border-color:rgba(106,168,232,0.3);
}
.exercise-tab.tab-selected[data-week-type="cable"] .exercise-tab-name{
  color:var(--blue);
}
/* Selected + superset purple accent brightens */
.exercise-tab.tab-selected.tab-superset::before{
  opacity:1;
}

/* Light mode */
body.light-mode .exercise-tab{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.06);
}
body.light-mode .exercise-tab-name{
  color:rgba(0,0,0,0.55);
}
body.light-mode .exercise-tab.tab-selected{
  background:rgba(212,148,90,0.12);
  border-color:rgba(212,148,90,0.25);
}
body.light-mode .exercise-tab.tab-selected .exercise-tab-name{
  color:#b06e32;
}
body.light-mode .exercise-tab.tab-selected[data-week-type="cable"]{
  background:rgba(106,168,232,0.12);
  border-color:rgba(106,168,232,0.25);
}
body.light-mode .exercise-tab.tab-selected[data-week-type="cable"] .exercise-tab-name{
  color:#5088d4;
}
/* Track groove divider between mini cards and expanded card — hidden to keep seamless connection */
.exercise-mini-group::after{
  display:none;
}
body.light-mode .exercise-mini-group{
  background:transparent;
}

/* Panel Tally Strip - hidden, replaced by exercise tabs */
.panel-tally-strip{
  display:none;
  align-items:flex-end;
  justify-content:center;
  gap:8px;
  padding:6px 24px;
  margin:0;
  max-width:none;
  background:transparent;
  border:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.light-mode .panel-tally-strip{
  background:transparent;
  border:none;
}
@media(min-width:560px){
  .panel-tally-strip{
    margin-left:0;
    margin-right:0;
  }
}
.panel-tally-line{
  width:3px;
  height:9px;
  border-radius:1.5px;
  background:rgba(255,255,255,0.12);
  transition:all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin:bottom center;
  flex-shrink:0;
}
.panel-tally-strip.tally-magnified .panel-tally-line{
  width:5px;
  border-radius:2.5px;
}
.panel-tally-line.selected{
  height:15px;
  background:#ffffff;
}
.panel-tally-line.done.free{
  background:rgba(212,148,90,0.25);
  box-shadow:none;
}
.panel-tally-line.done.cable{
  background:rgba(126,181,226,0.25);
  box-shadow:none;
}
.panel-tally-line.selected.done.free{
  height:15px;
  background:var(--accent-orange);
  box-shadow:0 0 6px rgba(212,148,90,0.5);
}
.panel-tally-line.selected.done.cable{
  height:15px;
  background:var(--blue);
  box-shadow:0 0 6px rgba(126,181,226,0.5);
}
body.light-mode .panel-tally-line{
  background:rgba(0,0,0,0.1);
}
body.light-mode .panel-tally-line.selected{
  background:rgba(0,0,0,0.7);
}
.scroll-indicator-dots{
  display:none !important;
}
.scroll-dot-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  cursor:pointer;
}
.scroll-dot{
  width:8px;
  height:8px;
  border-radius:3px;
  background:rgba(255,255,255,0.2);
  transition:all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  flex-shrink:0;
}
.scroll-dot.active{
  width:22px;
  border-radius:4px;
  background:var(--white);
}
.scroll-dot-num{
  font-size:9px;
  font-weight:700;
  color:rgba(255,255,255,0.25);
  line-height:1;
  transition:color 0.3s ease;
}
.scroll-dot-item.active .scroll-dot-num{
  color:rgba(255,255,255,0.7);
}
body.light-mode .scroll-dot{
  background:rgba(0,0,0,0.15);
}
body.light-mode .scroll-dot.active{
  background:var(--text);
}
body.light-mode .scroll-dot-num{
  color:rgba(0,0,0,0.55);
}
body.light-mode .scroll-dot-item.active .scroll-dot-num{
  color:rgba(0,0,0,0.55);
}

/* Completion coloring on dots - inactive (dim but readable) */
.scroll-dot-item.dot-complete .scroll-dot{
  background:rgba(212,148,90,0.4);
}
.scroll-dot-item.dot-complete.cable .scroll-dot{
  background:rgba(126,181,226,0.4);
}
.scroll-dot-item.dot-complete .scroll-dot-num{
  color:rgba(212,148,90,0.4);
}
.scroll-dot-item.dot-complete.cable .scroll-dot-num{
  color:rgba(126,181,226,0.4);
}
/* Completion coloring on dots - active (bright) */
.scroll-dot-item.dot-complete.active .scroll-dot{
  background:var(--accent-orange);
}
.scroll-dot-item.dot-complete.cable.active .scroll-dot{
  background:var(--blue);
}
.scroll-dot-item.dot-complete.active .scroll-dot-num{
  color:var(--accent-orange);
}
.scroll-dot-item.dot-complete.cable.active .scroll-dot-num{
  color:var(--blue);
}
/* PR gold outline */
.scroll-dot-item.dot-pr .scroll-dot{
  box-shadow:0 0 0 2px rgba(212,175,55,0.5);
}
.scroll-dot-item.dot-pr.active .scroll-dot{
  box-shadow:0 0 0 2px var(--gold);
}
body.light-mode .scroll-dot-item.dot-complete .scroll-dot{
  background:rgba(212,148,90,0.45);
}
body.light-mode .scroll-dot-item.dot-complete.cable .scroll-dot{
  background:rgba(126,181,226,0.45);
}
body.light-mode .scroll-dot-item.dot-complete.active .scroll-dot{
  background:var(--accent-orange);
}
body.light-mode .scroll-dot-item.dot-complete.cable.active .scroll-dot{
  background:var(--blue);
}
body.light-mode .scroll-dot-item.dot-pr .scroll-dot{
  box-shadow:0 0 0 2px rgba(212,175,55,0.5);
}
body.light-mode .scroll-dot-item.dot-pr.active .scroll-dot{
  box-shadow:0 0 0 2px var(--gold);
}

.scroll-indicator-dots.expanded-dots{
  padding:4px 0 2px;
}

/* Calendar day nav arrows - shown in month view */
.calendar-day-nav{
  display:none;
  justify-content:center;
  align-items:center;
  gap:20px;
  padding:8px 0 4px;
}
.calendar-day-nav.visible{
  display:flex;
}
.calendar-day-nav-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all 0.2s ease;
}
.calendar-day-nav-btn:active{
  transform:scale(0.9);
  background:rgba(255,255,255,0.1);
}
.calendar-day-nav-btn svg{
  width:16px;
  height:16px;
  stroke:rgba(255,255,255,0.6);
  stroke-width:2.5;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.calendar-day-nav-label{
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,0.5);
  letter-spacing:0.5px;
  min-width:80px;
  text-align:center;
}
body.light-mode .calendar-day-nav-btn{
  border-color:rgba(0,0,0,0.06);
  background:linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 100%);
}
body.light-mode .calendar-day-nav-btn svg{
  stroke:rgba(0,0,0,0.5);
}
body.light-mode .calendar-day-nav-label{
  color:rgba(0,0,0,0.65);
}

/* ==================== ENHANCEMENT 2: Progress Ring ==================== */
.progress-ring-container{
  position:relative;
  width:44px;
  height:44px;
  flex-shrink:0;
  transition:filter 0.6s ease;
}
.progress-ring-container.glow-free{
  filter:drop-shadow(0 0 6px rgba(212,148,90,var(--ring-glow,0)));
}
.progress-ring-container.glow-cable{
  filter:drop-shadow(0 0 6px rgba(126,181,226,var(--ring-glow,0)));
}
.progress-ring-svg{
  width:44px;
  height:44px;
  transform:rotate(-90deg);
}
.progress-ring-bg{
  fill:none;
  stroke:rgba(255,255,255,0.1);
  stroke-width:3.5;
}
.progress-ring-fill{
  fill:none;
  stroke:var(--accent-orange);
  stroke-width:3.5;
  stroke-linecap:round;
  transition:stroke-dashoffset 0.6s cubic-bezier(0.25, 1, 0.5, 1), stroke 0.3s ease;
  filter:drop-shadow(0 0 4px rgba(212,148,90,0.3));
}
.progress-ring-fill.cable{
  stroke:var(--blue);
  filter:drop-shadow(0 0 4px rgba(126,181,226,0.3));
}
.progress-ring-pct{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  color:rgba(255,255,255,0.9);
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
  transition:transform 0.15s ease;
}
@keyframes pctBounce{
  0%{transform:scale(1);}
  40%{transform:scale(1.2);}
  100%{transform:scale(1);}
}
.progress-ring-pct.bounce{
  animation:pctBounce 0.3s ease-out;
}
.progress-ring-pct.pct-bounce{
  animation:pctBounce 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.light-mode .progress-ring-bg{
  stroke:rgba(0,0,0,0.55);
}
body.light-mode .progress-ring-pct{
  color:rgba(0,0,0,0.75);
  text-shadow:none;
}

/* ==================== REST DAY PILL BUTTON ==================== */
#bannerStatRest{
  position:relative;
  overflow:visible;
}
.rest-day-pill{
  position:relative;
  height:32px;
  border-radius:16px;
  border:1.5px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-shrink:0;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  transition:border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  padding:0 14px;
  z-index:2;
}
.rest-day-pill-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0%;
  #ffffff;
  transition:none;
  z-index:1;
}
.rest-day-pill.filling .rest-day-pill-fill{
  transition:width 1.5s linear;
  width:100%;
}
.rest-day-pill-moon{
  width:14px;
  height:14px;
  fill:rgba(255,255,255,0.4);
  flex-shrink:0;
  position:relative;
  z-index:2;
  transition:fill 0.3s ease;
}
.rest-day-pill.active .rest-day-pill-moon{
  fill:rgba(0,0,0,0.6);
}
.rest-day-pill.filling .rest-day-pill-moon{
  fill:rgba(0,0,0,0.5);
}
body.light-mode .rest-day-pill-moon{
  fill:rgba(0,0,0,0.55);
}
body.light-mode .rest-day-pill.active .rest-day-pill-moon{
  fill:rgba(255,255,255,0.8);
}
.rest-day-pill-label{
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.5);
  text-transform:uppercase;
  letter-spacing:1px;
  position:relative;
  z-index:2;
  transition:color 0.3s ease;
  white-space:nowrap;
}
/* Glow while pressing and holding */
.rest-day-pill.filling{
  border-color:rgba(255,255,255,0.35);
  box-shadow:0 0 8px rgba(255,255,255,0.15), 0 0 20px rgba(255,255,255,0.08);
  animation:restPillPulseGlow 0.8s ease-in-out infinite;
}
.rest-day-pill.filling .rest-day-pill-label{
  color:rgba(0,0,0,0.6);
}
/* Hold indicator — fixed on body, visible above finger */
.rest-hold-indicator{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:none;
  z-index:600;
  animation:holdIndicatorIn 0.15s ease-out;
}
@keyframes holdIndicatorIn{
  from{ opacity:0; transform:translateX(-50%) translateY(6px); }
  to{ opacity:1; transform:translateX(-50%) translateY(0); }
}
.rest-hold-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:1.5px;
  color:rgba(255,255,255,0.8);
  white-space:nowrap;
  animation:holdLabelPulse 0.5s ease-in-out infinite alternate;
}
.rest-hold-rings{
  position:absolute;
  left:50%;
  top:50%;
  pointer-events:none;
  z-index:599;
  transform:translate(-50%, -50%);
}
.rest-hold-ring{
  position:absolute;
  border-radius:50%;
  border:4px solid rgba(255,255,255,0.4);
  pointer-events:none;
  left:50%; top:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(0.5);
  transition:opacity 0.25s ease, transform 0.3s ease;
}
.rest-hold-ring.ring-1{
  width:80px; height:80px;
}
.rest-hold-ring.ring-2{
  width:120px; height:120px;
  border-color:rgba(255,255,255,0.28);
}
.rest-hold-ring.ring-3{
  width:160px; height:160px;
  border-color:rgba(255,255,255,0.16);
}
.rest-hold-ring.active{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  animation:restRingPulse 0.8s ease-in-out infinite;
}
@keyframes holdLabelPulse{
  0%{ opacity:0.5; }
  100%{ opacity:1; }
}
@keyframes restRingPulse{
  0%{ opacity:0.8; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:0.4; transform:translate(-50%,-50%) scale(1.08); }
  100%{ opacity:0.8; transform:translate(-50%,-50%) scale(1); }
}
body.light-mode .rest-hold-label{
  color:rgba(0,0,0,0.65);
}
body.light-mode .rest-hold-ring{
  border-color:rgba(0,0,0,0.6);
}
body.light-mode .rest-hold-ring.ring-2{ border-color:rgba(0,0,0,0.65); }
body.light-mode .rest-hold-ring.ring-3{ border-color:rgba(0,0,0,0.6); }
@keyframes restPillPulseGlow{
  0%{ box-shadow:0 0 8px rgba(255,255,255,0.1), 0 0 16px rgba(255,255,255,0.05); }
  50%{ box-shadow:0 0 14px rgba(255,255,255,0.3), 0 0 28px rgba(255,255,255,0.12); }
  100%{ box-shadow:0 0 8px rgba(255,255,255,0.1), 0 0 16px rgba(255,255,255,0.05); }
}
.rest-day-pill.filling .rest-day-pill-label{
  color:rgba(255,255,255,0.5);
  transition:color 0.3s ease;
}
body.light-mode .rest-day-pill.filling{
  border-color:rgba(0,0,0,0.6);
  animation:restPillPulseGlowLight 0.8s ease-in-out infinite;
}
@keyframes restPillPulseGlowLight{
  0%{ box-shadow:0 0 8px rgba(0,0,0,0.08), 0 0 16px rgba(0,0,0,0.04); }
  50%{ box-shadow:0 0 14px rgba(0,0,0,0.2), 0 0 28px rgba(0,0,0,0.1); }
  100%{ box-shadow:0 0 8px rgba(0,0,0,0.08), 0 0 16px rgba(0,0,0,0.04); }
}
body.light-mode .rest-day-pill.filling .rest-day-pill-label{
  color:rgba(0,0,0,0.65);
}
.rest-day-pill-letters{
  display:none;
}
/* Active state — filled + glow */
.rest-day-pill.active{
  border-color:rgba(255,255,255,0.6);
  #ffffff;
  box-shadow:0 0 12px rgba(255,255,255,0.3), 0 0 24px rgba(255,255,255,0.1);
}
.rest-day-pill.active .rest-day-pill-fill{
  width:100%;
  #ffffff;
}
.rest-day-pill.active .rest-day-pill-label{
  color:rgba(0,0,0,0.7);
}

/* Intro demo animation */
@keyframes restPillDemoFill{
  0%{ width:0%; }
  40%{ width:100%; }
  60%{ width:100%; }
  100%{ width:0%; }
}
@keyframes restPillDemoBorder{
  0%{ border-color:rgba(255,255,255,0.08); }
  35%{ border-color:rgba(255,255,255,0.45); }
  65%{ border-color:rgba(255,255,255,0.45); }
  100%{ border-color:rgba(255,255,255,0.08); }
}
@keyframes restPillDemoLabel{
  0%{ color:rgba(255,255,255,0.5); }
  35%{ color:rgba(0,0,0,0.6); }
  65%{ color:rgba(0,0,0,0.6); }
  100%{ color:rgba(255,255,255,0.5); }
}
.rest-day-pill.demo .rest-day-pill-fill{
  animation:restPillDemoFill 2.4s ease-in-out forwards;
}
.rest-day-pill.demo{
  animation:restPillDemoBorder 2.4s ease-in-out forwards;
}
.rest-day-pill.demo .rest-day-pill-label{
  animation:restPillDemoLabel 2.4s ease-in-out forwards;
}

/* Light mode */
body.light-mode .rest-day-pill{
  border-color:rgba(0,0,0,0.08);
  background:rgba(0,0,0,0.04);
}
body.light-mode .rest-day-pill-label{
  color:rgba(0,0,0,0.35);
}
body.light-mode .rest-day-pill-fill{
  background:rgba(0,0,0,0.85);
}
body.light-mode .rest-day-pill.filling .rest-day-pill-fill{
  background:rgba(0,0,0,0.85);
}
body.light-mode .rest-day-pill.active{
  border-color:rgba(0,0,0,0.7);
  background:rgba(0,0,0,0.85);
  box-shadow:0 0 12px rgba(0,0,0,0.2), 0 0 24px rgba(0,0,0,0.08);
}
body.light-mode .rest-day-pill.active .rest-day-pill-fill{
  background:rgba(0,0,0,0.85);
}
body.light-mode .rest-day-pill.active .rest-day-pill-label{
  color:rgba(255,255,255,0.85);
}
/* Light mode demo animation */
@keyframes restPillDemoFillLight{
  0%{ width:0%; }
  40%{ width:100%; }
  60%{ width:100%; }
  100%{ width:0%; }
}
@keyframes restPillDemoBorderLight{
  0%{ border-color:rgba(0,0,0,0.08); }
  35%{ border-color:rgba(0,0,0,0.65); }
  65%{ border-color:rgba(0,0,0,0.65); }
  100%{ border-color:rgba(0,0,0,0.08); }
}
@keyframes restPillDemoLabelLight{
  0%{ color:rgba(0,0,0,0.35); }
  35%{ color:rgba(255,255,255,0.8); }
  65%{ color:rgba(255,255,255,0.8); }
  100%{ color:rgba(0,0,0,0.35); }
}
body.light-mode .rest-day-pill.demo .rest-day-pill-fill{
  animation:restPillDemoFillLight 2.4s ease-in-out forwards;
}
body.light-mode .rest-day-pill.demo{
  animation:restPillDemoBorderLight 2.4s ease-in-out forwards;
}
body.light-mode .rest-day-pill.demo .rest-day-pill-label{
  animation:restPillDemoLabelLight 2.4s ease-in-out forwards;
}

/* ==================== REST DAY PAGE DIM ==================== */
/* Dim everything that should be locked out */
body.rest-day-active .logo,
body.rest-day-active .header-stats,
body.rest-day-active .workout-banner-img,
body.rest-day-active .workout-banner-info,
body.rest-day-active .banner-stats-row,
body.rest-day-active .workout-banner-peek,
body.rest-day-active .workout-hints,
body.rest-day-active .unified-exercise-panel,
body.rest-day-active .panel-tally-strip,
body.rest-day-active .quick-nav-sidebar,
body.rest-day-active .hero-stack-section,
body.rest-day-active .connector-lines-svg,
body.rest-day-active .ss-thumb-sidebar,
body.rest-day-active .exercise-number-circle,
body.rest-day-active .scroll-indicator{
  opacity:0.15 !important;
  pointer-events:none !important;
  transition:opacity 0.4s ease;
}

/* === STAYS ACTIVE: Week strip + month row === */
body.rest-day-active .week-strip,
body.rest-day-active .month-row,
body.rest-day-active .month-label-row{
  opacity:1 !important;
  pointer-events:auto !important;
}

/* === STAYS ACTIVE: REST pill === */
body.rest-day-active .rest-day-pill{
  opacity:1 !important;
  pointer-events:auto !important;
  position:relative;
  z-index:10;
}
body.rest-day-active .banner-rest-row{
  opacity:1 !important;
  pointer-events:auto !important;
}
body.rest-day-active .banner-exercise-list{
  opacity:0.15 !important;
  pointer-events:none !important;
}
body.rest-day-active .banner-header-left{
  opacity:0.2 !important;
  pointer-events:none !important;
}
body.rest-day-active .workout-banner-slide-center{
  opacity:1;
}
/* Disable Start Workout and Duration when rest day */
body.rest-day-active .banner-start-workout{
  opacity:0.2 !important;
  pointer-events:none !important;
}
body.rest-day-active #bannerStatDuration{
  opacity:0.2 !important;
  pointer-events:none !important;
  animation:none !important;
}
body.rest-day-active #bannerStatPR{
  opacity:0.2 !important;
  pointer-events:none !important;
}
body.rest-day-active #bannerStatChecklist{
  opacity:0.2 !important;
  pointer-events:none !important;
}

/* === Grey out floating status bar on rest day === */
body.rest-day-active .floating-status-bar{
  opacity:0.2 !important;
  pointer-events:none !important;
  transition:opacity 0.4s ease;
}
/* Bottom menu stays fully active on rest days */

/* === Grey out workout footer and completed workouts on rest day === */
body.rest-day-active .workout-footer-info,
body.rest-day-active .workout-nav-section,
body.rest-day-active .weekly-summary-card{
  opacity:0.15 !important;
  pointer-events:none !important;
  transition:opacity 0.4s ease;
}

/* Rest Day First-Time Modal */

/* ═══ FLOATING REST DAY INDICATOR ═══ */
.floating-rest-indicator{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:400;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.4s ease, visibility 0.4s ease;
}
body.rest-day-active .floating-rest-indicator{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  cursor:pointer;
}
.floating-rest-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1.5px solid rgba(255,255,255,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 24px rgba(0,0,0,0.3), 0 0 40px rgba(255,255,255,0.03);
  animation:floatingRestPulse 3s ease-in-out infinite;
}
.floating-rest-icon svg{
  width:24px;
  height:24px;
  fill:rgba(255,255,255,0.5);
}
.floating-rest-label{
  font-size:9px;
  font-weight:800;
  letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.35);
}
.floating-rest-tap{
  font-size:8px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.15);
  margin-top:-4px;
}
@keyframes floatingRestPulse{
  0%,100%{ box-shadow:0 4px 24px rgba(0,0,0,0.3), 0 0 40px rgba(255,255,255,0.03); }
  50%{ box-shadow:0 4px 32px rgba(0,0,0,0.4), 0 0 60px rgba(255,255,255,0.06); }
}
body.light-mode .floating-rest-icon{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.08);
  box-shadow:0 4px 24px rgba(0,0,0,0.08);
}
body.light-mode .floating-rest-icon svg{
  fill:rgba(0,0,0,0.55);
}
body.light-mode .floating-rest-label{
  color:rgba(0,0,0,0.25);
}
body.light-mode .floating-rest-tap{
  color:rgba(0,0,0,0.12);
}

/* Rest Day Management Panel */
.rest-mgmt-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:600;
  opacity:0; pointer-events:none; transition:opacity 0.2s ease;
}
.rest-mgmt-overlay.open{ opacity:1; pointer-events:auto; }
.rest-mgmt-panel{
  position:fixed; bottom:0; left:0; right:0; background:#16161e;
  border-radius:20px 20px 0 0; z-index:601; transform:translateY(100%);
  transition:transform 0.3s cubic-bezier(0.25,1,0.5,1);
  padding-bottom:env(safe-area-inset-bottom);
  max-height:85vh; display:flex; flex-direction:column;
  border-top:1px solid rgba(255,255,255,0.06);
}
.rest-mgmt-panel.open{ transform:translateY(0); }
body.light-mode .rest-mgmt-panel{ background:#ffffff; border-top-color:rgba(0,0,0,0.08); }
.rest-mgmt-handle{
  width:36px; height:4px; border-radius:2px; background:rgba(255,255,255,0.15);
  margin:10px auto 6px; cursor:pointer;
}
body.light-mode .rest-mgmt-handle{ background:rgba(0,0,0,0.12); }
.rest-mgmt-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; border-bottom:1px solid rgba(255,255,255,0.06);
}
body.light-mode .rest-mgmt-header{ border-bottom-color:rgba(0,0,0,0.06); }
.rest-mgmt-title{
  display:flex; align-items:center; gap:10px;
  font-size:17px; font-weight:700; color:rgba(255,255,255,0.85);
}
.rest-mgmt-title svg{ color:rgba(255,255,255,0.4); }
body.light-mode .rest-mgmt-title{ color:rgba(0,0,0,0.85); }
body.light-mode .rest-mgmt-title svg{ color:rgba(0,0,0,0.35); }
.rest-mgmt-close{
  width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06);
  border:none; color:rgba(255,255,255,0.4); font-size:18px; cursor:pointer; display:grid; place-items:center;
}
body.light-mode .rest-mgmt-close{ background:rgba(0,0,0,0.05); color:rgba(0,0,0,0.35); }
.rest-mgmt-info{
  font-size:13px; line-height:1.5; color:rgba(255,255,255,0.35); padding:12px 20px 8px;
}
.rest-mgmt-info strong{ color:rgba(255,255,255,0.6); font-weight:700; }
body.light-mode .rest-mgmt-info{ color:rgba(0,0,0,0.35); }
body.light-mode .rest-mgmt-info strong{ color:rgba(0,0,0,0.55); }
.rest-mgmt-current{ padding:8px 16px; }
.rest-mgmt-current-card{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:rgba(255,255,255,0.03); border:1.5px solid rgba(255,255,255,0.06);
  border-radius:16px; cursor:pointer; transition:all 0.15s ease;
}
.rest-mgmt-current-card:active{ background:rgba(255,255,255,0.06); transform:scale(0.98); }
.rest-mgmt-current-card.is-rest{
  border-color:rgba(255,255,255,0.12); background:rgba(255,255,255,0.06);
}
body.light-mode .rest-mgmt-current-card{
  background:rgba(0,0,0,0.02); border-color:rgba(0,0,0,0.06);
}
body.light-mode .rest-mgmt-current-card:active{ background:rgba(0,0,0,0.05); }
body.light-mode .rest-mgmt-current-card.is-rest{
  background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.65);
}
.rest-mgmt-current-icon{
  width:42px; height:42px; border-radius:12px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
  display:grid; place-items:center; flex-shrink:0;
}
.rest-mgmt-current-icon svg{ width:22px; height:22px; color:rgba(255,255,255,0.35); }
.rest-mgmt-current-card.is-rest .rest-mgmt-current-icon{
  background:rgba(212,148,90,0.1); border-color:rgba(212,148,90,0.2);
}
.rest-mgmt-current-card.is-rest .rest-mgmt-current-icon svg{ color:var(--accent-orange); }
body.light-mode .rest-mgmt-current-icon{
  background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.06);
}
body.light-mode .rest-mgmt-current-icon svg{ color:rgba(0,0,0,0.6); }
.rest-mgmt-current-info{ flex:1; min-width:0; }
.rest-mgmt-current-day{ font-size:16px; font-weight:700; color:rgba(255,255,255,0.85); }
body.light-mode .rest-mgmt-current-day{ color:rgba(0,0,0,0.8); }
.rest-mgmt-current-date{ font-size:12px; color:rgba(255,255,255,0.35); margin-top:2px; }
body.light-mode .rest-mgmt-current-date{ color:rgba(0,0,0,0.35); }
.rest-mgmt-current-action{
  font-size:12px; font-weight:700; letter-spacing:0.3px;
  color:rgba(255,255,255,0.4); padding:8px 14px; border-radius:10px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08);
  white-space:nowrap; flex-shrink:0;
}
.rest-mgmt-current-card.is-rest .rest-mgmt-current-action{
  color:rgba(220,80,80,0.8); background:rgba(220,80,80,0.08); border-color:rgba(220,80,80,0.15);
}
body.light-mode .rest-mgmt-current-action{
  color:rgba(0,0,0,0.65); background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.06);
}
body.light-mode .rest-mgmt-current-card.is-rest .rest-mgmt-current-action{
  color:rgba(200,60,60,0.8); background:rgba(200,60,60,0.06); border-color:rgba(200,60,60,0.12);
}
.rest-mgmt-divider{
  height:1px; background:rgba(255,255,255,0.06); margin:8px 20px;
}
body.light-mode .rest-mgmt-divider{ background:rgba(0,0,0,0.06); }
.rest-mgmt-label{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  color:rgba(255,255,255,0.3); padding:8px 20px 4px;
}
body.light-mode .rest-mgmt-label{ color:rgba(0,0,0,0.6); }
.rest-mgmt-list{
  padding:4px 16px 16px; overflow-y:auto; max-height:40vh;
  display:flex; flex-direction:column; gap:6px;
}
.rest-mgmt-item{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:rgba(255,255,255,0.025); border-radius:14px;
  border:1px solid rgba(255,255,255,0.04);
  cursor:pointer; transition:all 0.15s ease;
  -webkit-tap-highlight-color:transparent;
}
.rest-mgmt-item:active{ background:rgba(255,255,255,0.06); transform:scale(0.98); }
body.light-mode .rest-mgmt-item{
  background:rgba(0,0,0,0.02); border-color:rgba(0,0,0,0.04);
}
body.light-mode .rest-mgmt-item:active{ background:rgba(0,0,0,0.05); }
.rest-mgmt-item-moon{
  width:32px; height:32px; border-radius:8px;
  background:rgba(255,255,255,0.04); display:grid; place-items:center; flex-shrink:0;
}
.rest-mgmt-item-moon svg{ width:16px; height:16px; color:rgba(255,255,255,0.3); }
body.light-mode .rest-mgmt-item-moon{ background:rgba(0,0,0,0.03); }
body.light-mode .rest-mgmt-item-moon svg{ color:rgba(0,0,0,0.25); }
.rest-mgmt-item-info{ flex:1; min-width:0; }
.rest-mgmt-item-day{ font-size:14px; font-weight:700; color:rgba(255,255,255,0.8); }
.rest-mgmt-item-date{ font-size:11px; color:rgba(255,255,255,0.3); margin-top:1px; }
.rest-mgmt-item-workout{ font-size:11px; color:rgba(255,255,255,0.25); margin-top:1px; font-style:italic; }
body.light-mode .rest-mgmt-item-day{ color:rgba(0,0,0,0.75); }
body.light-mode .rest-mgmt-item-date{ color:rgba(0,0,0,0.6); }
body.light-mode .rest-mgmt-item-workout{ color:rgba(0,0,0,0.25); }
.rest-mgmt-item-remove{
  font-size:11px; font-weight:700; color:rgba(212,148,90,0.8);
  padding:8px 12px; border-radius:10px; cursor:pointer;
  background:rgba(212,148,90,0.08); border:1px solid rgba(212,148,90,0.15);
  white-space:nowrap; flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.rest-mgmt-item-remove:active{ background:rgba(212,148,90,0.15); }
body.light-mode .rest-mgmt-item-remove{
  color:rgba(60,160,110,0.8); background:rgba(60,160,110,0.06); border-color:rgba(60,160,110,0.12);
}
.rest-mgmt-empty{
  text-align:center; font-size:13px; color:rgba(255,255,255,0.2); padding:16px;
}
body.light-mode .rest-mgmt-empty{ color:rgba(0,0,0,0.55); }

/* Modal checkbox */
.rest-day-modal-check{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.rest-day-modal-check input{
  display:none;
}
.rest-day-check-box{
  width:20px;
  height:20px;
  border-radius:5px;
  border:1.5px solid rgba(255,255,255,0.25);
  background:transparent;
  flex-shrink:0;
  position:relative;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.rest-day-modal-check input:checked + .rest-day-check-box{
  background:var(--gold);
  border-color:var(--gold);
}
.rest-day-modal-check input:checked + .rest-day-check-box::after{
  content:'';
  position:absolute;
  top:3px;
  left:6px;
  width:5px;
  height:10px;
  border:solid #000;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.rest-day-check-label{
  font-size:12px;
  color:rgba(255,255,255,0.45);
  font-weight:500;
}
body.light-mode .rest-day-check-box{
  border-color:rgba(0,0,0,0.55);
}
body.light-mode .rest-day-check-label{
  color:rgba(0,0,0,0.65);
}

/* Week strip rest day slash */
.day-col.user-rest .day-number{
  position:relative;
}
.day-col.user-rest .day-number::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:140%;
  height:1.5px;
  background:rgba(255,255,255,0.7);
  transform:translate(-50%, -50%) rotate(-45deg);
  pointer-events:none;
}
body.light-mode .day-col.user-rest .day-number::after{
  background:rgba(0,0,0,0.6);
}
/* Dim rest day number slightly */
.day-col.user-rest .day-number{
  opacity:0.5;
}
.day-col.user-rest .day-bar{
  opacity:0.3;
}

/* ==================== ENHANCEMENT 3: Selected Day Gradient ==================== */
.day-col.selected{
  background:linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.07) 100%);
}
.day-col.selected.completed{
  background:linear-gradient(180deg, rgba(212,148,90,0.04) 0%, rgba(212,148,90,0.12) 100%);
}
.day-col.selected.completed[data-week-type="cable"],
.day-col.selected.completed.cable{
  background:linear-gradient(180deg, rgba(126,181,226,0.04) 0%, rgba(126,181,226,0.12) 100%);
}

/* ==================== ENHANCEMENT 4: PR Gold Shimmer ==================== */
@keyframes prShimmer{
  0%{background-position:200% center;}
  100%{background-position:-200% center;}
}
@keyframes prBurst{
  0%{transform:scale(1); filter:brightness(1);}
  30%{transform:scale(1.3); filter:brightness(1.5) drop-shadow(0 0 8px rgba(212,188,138,0.8));}
  60%{transform:scale(0.95);}
  100%{transform:scale(1); filter:brightness(1);}
}
.pr-trophy.celebrating{
  animation:prBurst 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.pr-new.active .pr-new-text{
  background:linear-gradient(90deg, #D4BC8A 0%, #F5E6C8 40%, #D4BC8A 60%, #F5E6C8 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:prShimmer 2s linear infinite;
}

/* ==================== ENHANCEMENT 5: Card Completion Bounce ==================== */
@keyframes completionBounce{
  0%{transform:scale(1);}
  25%{transform:scale(1.02);}
  50%{transform:scale(0.98);}
  75%{transform:scale(1.01);}
  100%{transform:scale(1);}
}
.ex-card.completion-bounce{
  animation:completionBounce 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes borderGlow{
  0%{box-shadow:0 8px 40px rgba(0,0,0,0.3);}
  50%{box-shadow:0 8px 40px rgba(212,148,90,0.25), 0 0 20px rgba(212,148,90,0.15);}
  100%{box-shadow:0 8px 40px rgba(212,148,90,0.12);}
}
@keyframes borderGlowBlue{
  0%{box-shadow:0 8px 40px rgba(0,0,0,0.3);}
  50%{box-shadow:0 8px 40px rgba(126,181,226,0.25), 0 0 20px rgba(126,181,226,0.15);}
  100%{box-shadow:0 8px 40px rgba(126,181,226,0.12);}
}
.ex-card.completion-bounce.all-complete{
  animation:completionBounce 0.5s cubic-bezier(0.25, 1, 0.5, 1), borderGlow 0.8s ease;
}
.ex-card.completion-bounce.all-complete[data-week-type="cable"]{
  animation:completionBounce 0.5s cubic-bezier(0.25, 1, 0.5, 1), borderGlowBlue 0.8s ease;
}

/* ==================== ENHANCEMENT 6: Hero Section Backdrop ==================== */
.hero-stack-section{
  position:relative;
}
.hero-stack-section::before{
  content:'';
  position:absolute;
  top:-40px;
  left:50%;
  transform:translateX(-50%);
  width:300px;
  height:260px;
  background:radial-gradient(ellipse at center, rgba(212,148,90,0.04) 0%, rgba(126,181,226,0.02) 40%, transparent 70%);
  pointer-events:none;
  z-index:0;
  filter:blur(30px);
}
body.light-mode .hero-stack-section::before{
  background:radial-gradient(ellipse at center, rgba(212,148,90,0.06) 0%, rgba(126,181,226,0.03) 40%, transparent 70%);
}

/* ==================== ENHANCEMENT 7: Lightbox Zoom Transition ==================== */
.lightbox-content{
  transform:scale(0.85);
  transition:transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.lightbox.open .lightbox-content{
  transform:scale(1);
}

/* ==================== ENHANCEMENT 8: Rest Day Visual ==================== */
.hero-overlap-card.rest-day-card{
  background:linear-gradient(145deg, var(--surface2) 0%, rgba(126,181,226,0.06) 100%);
  border-color:rgba(126,181,226,0.08);
}
.hero-overlap-card.rest-day-card .hero-card-content{
  position:relative;
}
.rest-day-icon{
  position:absolute;
  bottom:4px;
  right:4px;
  font-size:16px;
  opacity:0.6;
  filter:grayscale(0.3);
}
.exercise-overlap-card.rest-day-card,
.exercise-overlap-card[data-rest="true"]{
  background:linear-gradient(145deg, var(--surface2) 0%, rgba(126,181,226,0.05) 100%);
  border-color:rgba(126,181,226,0.06);
}

/* ==================== ENHANCEMENT 9: Swipe Edge Indicators ==================== */
.exercise-stack-container{
  position:relative;
}
.exercise-stack-container::before,
.exercise-stack-container::after{
  content:'';
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:60px;
  z-index:10;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.3s ease;
}
.exercise-stack-container::before{
  left:0;
  background:linear-gradient(90deg, rgba(31,31,40,0.9) 0%, transparent 100%);
}
.exercise-stack-container::after{
  right:0;
  background:linear-gradient(-90deg, rgba(31,31,40,0.9) 0%, transparent 100%);
}
.exercise-stack-container.show-left::before{
  opacity:1;
}
.exercise-stack-container.show-right::after{
  opacity:1;
}
body.light-mode .exercise-stack-container::before{
  background:linear-gradient(90deg, rgba(232,232,238,0.9) 0%, transparent 100%);
}
body.light-mode .exercise-stack-container::after{
  background:linear-gradient(-90deg, rgba(232,232,238,0.9) 0%, transparent 100%);
}

/* ==================== ENHANCEMENT 10: Animated Counter ==================== */
@keyframes countPop{
  0%{transform:scale(1); opacity:1;}
  30%{transform:scale(1.15); opacity:0.8;}
  100%{transform:scale(1); opacity:1;}
}
.workout-completion-count.count-updated{
  animation:countPop 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ==================== ENHANCEMENT 11: Input Focus Glow Ring ==================== */
@keyframes focusPulse{
  0%{box-shadow:0 0 0 2px var(--blue), 0 0 0 4px rgba(126,181,226,0);}
  50%{box-shadow:0 0 0 2px var(--blue), 0 0 0 6px rgba(126,181,226,0.15);}
  100%{box-shadow:0 0 0 2px var(--blue), 0 0 0 4px rgba(126,181,226,0);}
}
@keyframes focusPulseGreen{
  0%{box-shadow:0 0 0 2px var(--accent-orange), 0 0 0 4px rgba(212,148,90,0);}
  50%{box-shadow:0 0 0 2px var(--accent-orange), 0 0 0 6px rgba(212,148,90,0.15);}
  100%{box-shadow:0 0 0 2px var(--accent-orange), 0 0 0 4px rgba(212,148,90,0);}
}
.set-input:focus{
  outline:none;
  background:rgba(126,181,226,0.12);
  animation:focusPulse 1.5s ease-in-out infinite;
}
.set-input.free:focus{
  background:rgba(212,148,90,0.12);
  animation:focusPulseGreen 1.5s ease-in-out infinite;
}

/* ==================== ENHANCEMENT 12: Connector Line Draw Animation ==================== */
@keyframes connectorDraw{
  from{stroke-dashoffset:500;}
  to{stroke-dashoffset:0;}
}
.connector-line.animate-draw{
  stroke-dasharray:500;
  animation:connectorDraw 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* ==================== ENHANCEMENT 13: Hero Parallax ==================== */
.workout-header-row{
  transition:transform 0.05s linear;
  will-change:transform;
}

/* ==================== NEW ENHANCEMENT 14: Sticky Expanded Card Header ==================== */
/* ==================== NEW ENHANCEMENT 15: Compact Hero on Scroll ==================== */
.hero-stack-section{
  transition:all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin:center top;
}
.hero-stack-section.compact{
  transform:scale(0.6);
  opacity:0.5;
  max-height:60px;
  margin-bottom:-60px;
  pointer-events:none;
}

/* ── Workout Nav Section (below expanded cards) ──────── */
.workout-nav-section{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:4px 0 24px;
  margin-top:-40px;
}
body.calendar-view-active .workout-nav-section{ display:none; }
.workout-nav-count{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:rgba(255,255,255,0.25);
}
body.light-mode .workout-nav-count{
  color:rgba(0,0,0,0.6);
}
.workout-nav-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.workout-nav-dot{
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(255,255,255,0.04);
  border:1.5px solid rgba(255,255,255,0.08);
  transition:all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.15);
  -webkit-tap-highlight-color:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.workout-nav-dot.active{
  width:42px;
  height:42px;
  background:#ffffff;
  border-color:rgba(255,255,255,0.95);
  color:rgba(0,0,0,0.85);
  font-size:16px;
  font-weight:700;
  box-shadow:0 0 12px rgba(255,255,255,0.3), 0 2px 8px rgba(0,0,0,0.2);
  position:relative;
}
.workout-nav-dot.active::after{
  content:'';
  position:absolute;
  bottom:-6px;
  left:50%;
  transform:translateX(-50%);
  width:18px;
  height:2.5px;
  border-radius:2px;
  #ffffff;
}
.workout-nav-dot.active.cable{
  width:42px;
  height:42px;
  background:#ffffff;
  border-color:rgba(255,255,255,0.95);
  color:rgba(0,0,0,0.85);
  font-size:16px;
  font-weight:700;
  box-shadow:0 0 12px rgba(255,255,255,0.3), 0 2px 8px rgba(0,0,0,0.2);
  position:relative;
}
.workout-nav-dot.completed{
  background:rgba(212,148,90,0.12);
  border-color:rgba(212,148,90,0.3);
  color:rgba(212,148,90,0.6);
}
.workout-nav-dot.completed.cable{
  background:rgba(126,181,226,0.12);
  border-color:rgba(126,181,226,0.3);
  color:rgba(126,181,226,0.6);
}
.workout-nav-dot.has-pr{
  border-color:var(--gold) !important;
}
.workout-nav-dot.completed.active{
  width:42px;
  height:42px;
  background:var(--accent-orange);
  border-color:var(--accent-orange);
  color:rgba(0,0,0,0.9);
  font-size:16px;
  font-weight:700;
  box-shadow:0 0 12px rgba(212,148,90,0.35), 0 2px 8px rgba(0,0,0,0.2);
  position:relative;
}
.workout-nav-dot.completed.active.cable{
  width:42px;
  height:42px;
  background:var(--blue);
  border-color:var(--blue);
  color:rgba(0,0,0,0.9);
  font-size:16px;
  font-weight:700;
  box-shadow:0 0 12px rgba(126,181,226,0.35), 0 2px 8px rgba(0,0,0,0.2);
  position:relative;
}
.workout-nav-dot.has-pr.completed.active{
  border-color:var(--gold) !important;
}
.workout-nav-dot.timing{
  animation:dotTimingPulse 2s ease-in-out infinite;
}
.workout-nav-dot.timing:not(.active){
  box-shadow:0 0 10px rgba(212,148,90,0.3);
}
.workout-nav-dot.timing.cable:not(.active){
  box-shadow:0 0 10px rgba(126,181,226,0.3);
}
@keyframes dotTimingPulse{
  0%,100%{ box-shadow:0 0 6px rgba(212,148,90,0.15); }
  50%{ box-shadow:0 0 14px rgba(212,148,90,0.4); }
}
body.light-mode .workout-nav-dot{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.08);
  color:rgba(0,0,0,0.15);
  backdrop-filter:none;
}
body.light-mode .workout-nav-dot.completed{
  background:rgba(212,148,90,0.1);
  border-color:rgba(212,148,90,0.3);
  color:rgba(212,148,90,0.6);
}
body.light-mode .workout-nav-dot.completed.cable{
  background:rgba(126,181,226,0.1);
  border-color:rgba(126,181,226,0.3);
  color:rgba(126,181,226,0.6);
}
body.light-mode .workout-nav-dot.active{
  background:rgba(0,0,0,0.85);
  border-color:rgba(0,0,0,0.85);
  color:rgba(255,255,255,0.95);
  box-shadow:0 0 12px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1);
}
body.light-mode .workout-nav-dot.active::after{
  background:rgba(0,0,0,0.7);
}
body.light-mode .workout-nav-dot.active.cable{
  background:rgba(0,0,0,0.85);
  border-color:rgba(0,0,0,0.85);
  color:rgba(255,255,255,0.95);
  box-shadow:0 0 12px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1);
}
body.light-mode .workout-nav-dot.completed.active{
  background:rgba(60,175,130,0.85);
  border-color:rgba(60,175,130,0.85);
  color:rgba(255,255,255,0.95);
  box-shadow:0 0 12px rgba(60,175,130,0.2), 0 2px 8px rgba(0,0,0,0.1);
}
body.light-mode .workout-nav-dot.completed.active::after{
  background:rgba(60,175,130,0.7);
}
body.light-mode .workout-nav-dot.completed.active.cable{
  background:rgba(80,136,212,0.85);
  border-color:rgba(80,136,212,0.85);
  color:rgba(255,255,255,0.95);
  box-shadow:0 0 12px rgba(80,136,212,0.2), 0 2px 8px rgba(0,0,0,0.1);
}
body.light-mode .workout-nav-dot.completed.active.cable::after{
  background:rgba(80,136,212,0.7);
}
.workout-nav-arrows{
  display:flex;
  align-items:center;
  gap:24px;
}
.workout-nav-arrow{
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.5);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:all 0.15s ease;
  -webkit-tap-highlight-color:transparent;
}
.workout-nav-arrow:active{
  transform:scale(0.9);
  background:rgba(255,255,255,0.12);
}
.workout-nav-arrow svg{
  width:20px;
  height:20px;
}
body.light-mode .workout-nav-arrow{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.06);
  color:rgba(0,0,0,0.65);
}
body.light-mode .workout-nav-arrow:active{
  background:rgba(0,0,0,0.08);
}

/* ── Workout Day Info Footer ────────────────────────── */
.workout-footer-info{
  text-align:center;
  padding:6px 20px 20px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
body.calendar-view-active .workout-footer-info{ display:none; }
body.light-mode .workout-footer-info{
}
.wf-date{
  font-size:16px;
  font-weight:600;
  color:rgba(255,255,255,0.35);
  letter-spacing:0.5px;
}
body.light-mode .wf-date{ color:rgba(0,0,0,0.55); }
.wf-day{
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:rgba(255,255,255,0.45);
  margin-top:4px;
}
body.light-mode .wf-day{ color:rgba(0,0,0,0.65); }
.wf-name{
  font-size:30px;
  font-weight:800;
  color:var(--accent-orange);
  letter-spacing:0.3px;
  margin-top:4px;
  line-height:1.15;
}
.wf-name.cable{ color:var(--blue); }
body.light-mode .wf-name{ opacity:0.7; }
.wf-equip{
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:rgba(255,255,255,0.3);
  margin-top:3px;
}
body.light-mode .wf-equip{ color:rgba(0,0,0,0.7); }
.wf-equip.free{ color:var(--accent-orange); opacity:0.5; }
.wf-equip.cable{ color:var(--blue); opacity:0.5; }

/* ==================== NEW ENHANCEMENT 16: Quick Nav Sidebar ==================== */
.quick-nav-sidebar{
  display:none !important;
  right:0;
  top:50%;
  transform:translateY(-50%) translateX(100%);
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:50;
  padding:10px 8px 10px 10px;
  border-radius:16px 0 0 16px;
  background:#0a0a0e;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,0.08);
  border-right:none;
  opacity:0;
  transition:opacity 0.25s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events:none;
}
/* Visible = sections exist on screen. Default fully extended */
.quick-nav-sidebar.visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(-50%) translateX(0);
}
/* Tucked = user stopped scrolling, slides to edge but still partially visible */
.quick-nav-sidebar.visible.tucked{
  transform:translateY(-50%) translateX(55%);
}
/* Extended = user tapped the blocks, fully out */
.quick-nav-sidebar.visible.extended{
  transform:translateY(-50%) translateX(0);
}
.quick-nav-dot{
  min-width:48px;
  height:auto;
  padding:6px 8px;
  border-radius:10px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.1);
  cursor:pointer;
  transition:all 0.2s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,0.4);
  letter-spacing:0.3px;
  -webkit-tap-highlight-color:transparent;
}
.qn-label{
  font-size:7px;
  font-weight:700;
  letter-spacing:0.8px;
  text-transform:uppercase;
  opacity:0.7;
  line-height:1;
}
.qn-num{
  font-size:16px;
  font-weight:800;
  line-height:1.1;
}
/* Dimmed state for off-screen sections */
.quick-nav-dot.dimmed{
  opacity:0.35;
  transform:scale(0.9);
}
.quick-nav-dot:active{
  transform:scale(0.92);
  background:rgba(255,255,255,0.2);
}
.quick-nav-dot.active{
  background:rgba(255,255,255,0.18);
  color:var(--white);
  border-color:rgba(255,255,255,0.25);
  transform:scale(1.08);
  opacity:1;
}
/* Dimmed overrides for complete/PR dots */
.quick-nav-dot.dimmed.complete{
  opacity:0.35;
}
.quick-nav-dot.dimmed.pr{
  opacity:0.35;
}
/* Active always fully visible even if dimmed class present */
.quick-nav-dot.active.dimmed{
  opacity:1;
  transform:scale(1.08);
}
.quick-nav-dot.complete{
  color:var(--accent-orange);
  border-color:var(--accent-orange);
  background:rgba(212,148,90,0.1);
}
.quick-nav-dot.complete.cable{
  color:var(--blue);
  border-color:var(--blue);
  background:rgba(126,181,226,0.1);
}
/* Complete + PR: split border - top half green/blue, bottom half gold */
.quick-nav-dot.complete.pr{
  border:none;
  background:rgba(212,148,90,0.1);
  position:relative;
  overflow:visible;
}
.quick-nav-dot.complete.pr::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:50%;
  border:2px solid var(--accent-orange);
  border-bottom:none;
  border-radius:10px 10px 0 0;
  box-sizing:border-box;
  pointer-events:none;
}
.quick-nav-dot.complete.pr::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:50%;
  border:2px solid var(--gold);
  border-top:none;
  border-radius:0 0 10px 10px;
  box-sizing:border-box;
  pointer-events:none;
}
.quick-nav-dot.complete.cable.pr{
  background:rgba(126,181,226,0.1);
}
.quick-nav-dot.complete.cable.pr::before{
  border-color:var(--blue);
}
/* PR only (not complete): gold outline */
.quick-nav-dot.pr:not(.complete){
  border-color:var(--gold);
  color:var(--gold);
  background:rgba(212,175,55,0.08);
}
body.light-mode .quick-nav-sidebar{
  background:#f6f6f8;
  border-color:rgba(0,0,0,0.65);
}
body.light-mode .quick-nav-dot{
  background:rgba(0,0,0,0.05);
  border-color:rgba(0,0,0,0.65);
  color:rgba(0,0,0,0.35);
}
body.light-mode .quick-nav-dot.active{
  background:rgba(0,0,0,0.12);
  color:var(--text);
  border-color:rgba(0,0,0,0.55);
}

/* ==================== NEW ENHANCEMENT 17: Set Row Ripple ==================== */
@keyframes setRipple{
  0%{box-shadow:inset 0 0 0 0 rgba(212,148,90,0.3);}
  50%{box-shadow:inset 0 0 0 40px rgba(212,148,90,0.08);}
  100%{box-shadow:inset 0 0 0 40px rgba(212,148,90,0);}
}
@keyframes setRippleBlue{
  0%{box-shadow:inset 0 0 0 0 rgba(126,181,226,0.3);}
  50%{box-shadow:inset 0 0 0 40px rgba(126,181,226,0.08);}
  100%{box-shadow:inset 0 0 0 40px rgba(126,181,226,0);}
}
.set-row.ripple-green{
  animation:setRipple 0.5s ease-out;
}
.set-row.ripple-blue{
  animation:setRippleBlue 0.5s ease-out;
}

/* ==================== NEW ENHANCEMENT 19: Long-Press Preview ==================== */
.mini-card-preview{
  position:fixed;
  z-index:100;
  background:var(--surface3);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  padding:12px 16px;
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
  pointer-events:none;
  opacity:0;
  transform:scale(0.85) translateY(10px);
  transition:all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  max-width:200px;
}
.mini-card-preview.show{
  opacity:1;
  transform:scale(1) translateY(0);
}
.mini-card-preview .preview-name{
  font-size:13px;
  font-weight:700;
  color:var(--white);
  margin-bottom:4px;
}
.mini-card-preview .preview-meta{
  font-size:11px;
  color:rgba(255,255,255,0.5);
}
.mini-card-preview .preview-status{
  font-size:10px;
  font-weight:600;
  margin-top:4px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.mini-card-preview .preview-status.done{
  color:var(--accent-orange);
}
.mini-card-preview .preview-status.pending{
  color:rgba(255,255,255,0.3);
}

/* ==================== NEW ENHANCEMENT 20: Workout Accent Theming ==================== */
:root{
  --accentHue:160;
  --accentColor:rgba(212,148,90,0.06);
}
body[data-workout-accent="cardio"]{
  --accentHue:25;
  --accentColor:rgba(245,166,80,0.05);
}
body[data-workout-accent="upper"]{
  --accentHue:270;
  --accentColor:rgba(168,148,210,0.05);
}
body[data-workout-accent="lower"]{
  --accentHue:0;
  --accentColor:rgba(220,100,100,0.05);
}
body[data-workout-accent="rest"]{
  --accentHue:220;
  --accentColor:rgba(126,181,226,0.04);
}
.hero-stack-section::before{
  background:radial-gradient(ellipse at center, var(--accentColor) 0%, transparent 65%) !important;
}

/* ==================== NEW ENHANCEMENT 21: Animated Number Transition ==================== */
@keyframes numSlideUp{
  0%{transform:translateY(8px);opacity:0;}
  100%{transform:translateY(0);opacity:1;}
}
@keyframes numSlideDown{
  0%{transform:translateY(-8px);opacity:0;}
  100%{transform:translateY(0);opacity:1;}
}
.set-input.num-up{
  animation:numSlideUp 0.15s ease-out;
}
.set-input.num-down{
  animation:numSlideDown 0.15s ease-out;
}

/* ==================== NEW ENHANCEMENT 22: Card Depth on Scroll ==================== */
/* Applied via JS - smooth scaling based on center proximity */

/* ==================== NEW ENHANCEMENT 23: Curved Connectors ==================== */
/* Applied via JS - bezier paths replace L-shapes */

/* ==================== NEW ENHANCEMENT 24: Streak Indicator ==================== */
.streak-indicator{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:4px 0 2px;
  min-height:0;
}
.streak-bar{
  display:flex;
  gap:2px;
  align-items:center;
}
.streak-pip{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent-orange);
  opacity:0.7;
}
.streak-pip.cable{
  background:var(--blue);
}
.streak-label{
  font-size:9px;
  font-weight:700;
  color:rgba(255,255,255,0.45);
  text-transform:uppercase;
  letter-spacing:0.8px;
}
body.light-mode .streak-label{
  color:rgba(0,0,0,0.35);
}

/* ==================== NEW ENHANCEMENT 25: Weekly Summary Card ==================== */
.weekly-summary-card{
  background:linear-gradient(145deg, var(--surface2) 0%, var(--surface1) 100%);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  padding:18px 20px;
  margin:12px 20px 0;
  display:none;
}
.weekly-summary-card.visible{
  display:block;
}
.weekly-summary-title{
  font-size:13px;
  font-weight:700;
  color:var(--white);
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:12px;
  text-align:center;
}
.weekly-summary-stats{
  display:flex;
  justify-content:space-around;
  gap:8px;
}
.weekly-stat{
  text-align:center;
}
.weekly-stat-value{
  font-size:22px;
  font-weight:700;
  color:var(--white);
  line-height:1.2;
}
.weekly-stat-label{
  font-size:10px;
  font-weight:600;
  color:rgba(255,255,255,0.4);
  text-transform:uppercase;
  letter-spacing:0.5px;
}
body.light-mode .weekly-summary-card{
  background:linear-gradient(145deg, var(--surface2) 0%, var(--surface1) 100%);
  border-color:rgba(0,0,0,0.06);
}

/* ==================== NEW ENHANCEMENT 26: PR History Sparkline ==================== */
.pr-history-toggle{
  font-size:10px;
  font-weight:600;
  color:rgba(255,255,255,0.35);
  text-transform:uppercase;
  letter-spacing:1px;
  cursor:pointer;
  padding:4px 0;
  text-align:center;
  transition:color 0.2s ease;
}
.pr-history-toggle:hover{
  color:rgba(255,255,255,0.6);
}
.pr-history-chart{
  display:none;
  padding:8px 0 4px;
}
.pr-history-chart.visible{
  display:block;
}
.pr-sparkline{
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:32px;
  padding:0 4px;
}
.pr-spark-bar{
  flex:1;
  min-width:4px;
  max-width:20px;
  background:rgba(212,188,138,0.3);
  border-radius:2px 2px 0 0;
  transition:background 0.2s ease;
  position:relative;
}
.pr-spark-bar.current{
  background:var(--gold);
}
.pr-spark-bar.best{
  background:var(--gold);
  box-shadow:0 0 6px rgba(212,188,138,0.4);
}
.pr-spark-date{
  display:flex;
  justify-content:space-between;
  padding:2px 4px 0;
}
.pr-spark-date span{
  font-size:8px;
  color:rgba(255,255,255,0.25);
}





/* ═══════════════════════════════════════════════════════════════
   UNIFIED CARD REDESIGN v2 — "Input Hero"
   
   DESIGN PRINCIPLES:
   ─ Strip to essentials: Name → Inputs → Dots
   ─ ONE name size (15px/600), ONE value size (22px/600), 
     ONE label size (8px/caps), ONE pill shape (20px radius)
   ─ Standard cards and supersets share identical input styling
   ─ Dots are the primary navigation indicator
   ─ Secondary info (PR, tempo, media) hidden — accessible via tap
   ═══════════════════════════════════════════════════════════════ */

/* ── HIDE SECONDARY ELEMENTS ─────────────────────────────── */
.superset-set-banner,
.ex-media-actions,
.ss-media-actions,
.ex-media-thumb,
.ss-media-thumb,
.ex-tempo-row,
.superset-tempo,
.superset-block-header,
.goal-pill,
.special-set-corner-label,
.special-set-group .group-number-circle,
.superset-completion-counter,
.superset-expand-hint,
.superset-block-chevron,
.rest-section{
  display:none !important;
}
/* Standard number circle (absolute positioned) stays hidden — using inline badge instead */
#workoutContainer .standard-exercise .ex-number-circle-wrapper,
.special-set-box > .ex-number-circle-wrapper{
  display:none !important;
}

/* ── EXERCISE CARD — transparent inside unified panel ──── */
#workoutContainer .standard-exercise .ex-card,
.superset-combined-card .ex-card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
  padding:0 !important;
  margin:0 !important;
}

/* ── NAME HEADER — clean, identical for both types ──────── */

/* Standard card header strip */
.ex-media-strip{
  display:flex !important;
  align-items:center !important;
  padding:12px 16px 6px !important;
  gap:0 !important;
}
.ex-header.compact-header{
  padding:0 !important;
  flex:1 !important;
  min-width:0 !important;
}
.ex-name-row{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}
.ex-number-badge{
  min-width:28px !important;
  height:28px !important;
  width:28px !important;
  padding:0 !important;
  background:rgba(255,255,255,0.03) !important;
  border:2px solid rgba(255,255,255,0.8) !important;
  box-shadow:none !important;
  font-size:11px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,0.6) !important;
  border-radius:50% !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  letter-spacing:0 !important;
  flex-shrink:0 !important;
  aspect-ratio:1 !important;
}
.ex-name{
  font-size:21px !important;
  font-weight:700 !important;
  letter-spacing:-0.5px !important;
  color:rgba(255,255,255,0.92) !important;
}
.ex-meta{
  margin-top:2px !important;
  font-size:13px !important;
  opacity:1 !important;
  color:rgba(255,255,255,0.85) !important;
}
.meta-pill{ color:rgba(255,255,255,0.85) !important; font-weight:500 !important; }
.meta-pill-val{ color:rgba(255,255,255,0.85) !important; font-weight:600 !important; font-size:13px !important; opacity:1 !important; }
.meta-dot{ color:rgba(255,255,255,0.4) !important; font-size:8px !important; }
.meta-time-tap{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  padding:5px 14px !important;
  border-radius:20px !important;
  background:rgba(212,148,90,0.08) !important;
  border:1px solid rgba(212,148,90,0.15) !important;
  color:rgba(212,148,90,0.7) !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.15s ease;
}
.meta-time-tap:active{
  opacity:0.6 !important;
  transform:scale(0.95);
  background:rgba(212,148,90,0.15) !important;
}
.meta-time-tap.timer-active{
  background:rgba(212,148,90,0.15) !important;
  border-color:rgba(212,148,90,0.3) !important;
  animation:metaTimerPulse 1.5s ease infinite;
}
.meta-time-tap.timer-paused{
  background:rgba(255,180,50,0.1) !important;
  border-color:rgba(255,180,50,0.25) !important;
  animation:metaTimerPulse 0.8s ease infinite;
}
.meta-time-tap.timer-paused .meta-pill-val{
  color:rgba(255,180,50,0.85) !important;
}
.meta-timer-reset{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(255,90,90,0.12);
  border:1px solid rgba(255,90,90,0.25);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  margin-left:6px;
  vertical-align:middle;
  transition:all 0.15s ease;
  animation:metaResetAppear 0.2s ease;
}
.meta-timer-reset:active{
  transform:scale(0.85);
  background:rgba(255,90,90,0.25);
}
.meta-timer-reset svg{
  width:14px;
  height:14px;
  stroke:rgba(255,90,90,0.8);
}
@keyframes metaResetAppear{
  from{ opacity:0; transform:scale(0.5); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes metaTimerPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.6; }
}
.meta-time-tap .meta-pill-val{
  color:rgba(212,148,90,0.8) !important;
}
.meta-time-tap svg{
  fill:rgba(212,148,90,0.6) !important;
  stroke:none !important;
}
body.light-mode .meta-time-tap{
  background:rgba(212,148,90,0.1) !important;
  border-color:rgba(212,148,90,0.2) !important;
}
.ex-card[data-week-type="cable"] .meta-time-tap{
  background:rgba(126,181,226,0.08) !important;
  border-color:rgba(126,181,226,0.15) !important;
  color:rgba(126,181,226,0.7) !important;
}
.ex-card[data-week-type="cable"] .meta-time-tap .meta-pill-val{
  color:rgba(126,181,226,0.8) !important;
}
.ex-card[data-week-type="cable"] .meta-time-tap svg{
  fill:rgba(126,181,226,0.6) !important;
  stroke:none !important;
}
.ex-card[data-week-type="cable"] .meta-time-tap.timer-active{
  background:rgba(126,181,226,0.15) !important;
  border-color:rgba(126,181,226,0.3) !important;
}
.ex-card[data-week-type="cable"] .meta-time-tap:active{
  background:rgba(126,181,226,0.15) !important;
}

/* Expanded card: centered name, meta below, PR below sets */
.ex-name-row{
  justify-content:center !important;
}
.ex-name{
  text-align:center !important;
}
.ex-meta-centered{
  text-align:center;
  font-size:12px;
  font-weight:500;
  color:rgba(255,255,255,0.5);
  margin-top:2px;
  letter-spacing:0.3px;
}
.ex-meta-centered b{
  font-weight:600;
  color:rgba(255,255,255,0.7);
}
.pr-below-sets{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:3px 0;
  margin-top:0;
  background:none;
  border:none;
  border-radius:0;
}
.pr-below-sets .pr-label-compact{
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.2);
  text-transform:uppercase;
  letter-spacing:1px;
  background:none;
  padding:0;
  border-radius:0;
}
.pr-below-sets .pr-value-compact{
  font-size:10px;
  font-weight:600;
  color:rgba(255,255,255,0.3);
}
.pr-below-sets .pr-date-compact{
  font-size:10px;
  color:rgba(255,255,255,0.15);
}
.pr-below-sets .pr-new-compact{
  display:none;
}
.pr-below-sets.has-pr .pr-label-compact{
  color:var(--gold);
  background:none;
}
.pr-below-sets.has-pr .pr-value-compact{
  color:var(--gold);
}
.pr-below-sets.has-pr .pr-new-compact{
  display:inline-flex;
  align-items:center;
  gap:3px;
  color:var(--gold);
}
.pr-below-sets.has-pr .pr-new-compact svg{
  width:12px;
  height:12px;
  fill:var(--gold);
}
.pr-below-sets.has-pr .pr-new-text-compact{
  display:none;
}

/* Superset name — match standard */
.ss-media-strip{
  padding:6px 16px 2px !important;
  gap:0 !important;
}
.ss-item-info{
  flex:1 !important;
  min-width:0 !important;
}
.superset-name-row{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  margin-bottom:0 !important;
  justify-content:center !important;
}
/* Centered superset header layout */
.ss-centered-header{
  text-align:center;
  padding:4px 12px 2px;
}
.ss-name-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.ss-meta-centered{
  text-align:center;
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,0.85);
  margin-top:1px;
}
.ss-meta-centered b{
  font-weight:600;
  color:rgba(255,255,255,0.85);
}
/* Superset PR row below stepper */
.superset-pr-inline{
  display:flex;
  align-items:center;
  gap:5px;
  padding:0;
  justify-content:center;
}
.superset-pr-inline .superset-pr-label{
  font-size:9px;
  font-weight:600;
  color:rgba(255,255,255,0.15);
  text-transform:uppercase;
  letter-spacing:0.8px;
}
.superset-pr-inline .superset-pr-value{
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,0.35);
}
.superset-pr-inline .superset-pr-date{
  font-size:10px;
  color:rgba(255,255,255,0.3);
}
.superset-pr-inline .superset-pr-new{
  display:none;
}
.superset-pr-inline.has-pr .superset-pr-label{
  color:var(--gold);
}
.superset-pr-below.has-pr .superset-pr-value{
  color:var(--gold);
}
.superset-pr-below.has-pr .superset-pr-new{
  display:inline-flex;
  align-items:center;
  gap:3px;
  color:var(--gold);
}
.superset-pr-below.has-pr .superset-pr-new svg{
  width:14px; height:14px; fill:var(--gold);
}
.superset-pr-below.has-pr .superset-pr-new-text{
  display:none;
}
.superset-exercise-letter{
  min-width:34px !important;
  height:34px !important;
  padding:0 8px !important;
  background:rgba(162,100,190,0.1) !important;
  font-size:14px !important;
  font-weight:700 !important;
  color:var(--purple) !important;
  opacity:1 !important;
  border-radius:11px !important;
  border:1.5px solid rgba(162,100,190,0.15) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  letter-spacing:0.5px !important;
  flex-shrink:0 !important;
}
.superset-exercise-name{
  font-size:16px !important;
  font-weight:600 !important;
  letter-spacing:-0.2px !important;
  color:rgba(255,255,255,0.88) !important;
}
.superset-meta{
  font-size:13px !important;
  color:rgba(255,255,255,0.85) !important;
  margin-bottom:0 !important;
  margin-top:2px !important;
}
.superset-meta b{ font-weight:600 !important; color:rgba(255,255,255,0.85) !important; }
/* Inline meta - right-aligned in name row */
.ex-right-stack{
  margin-left:auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:1px !important;
  flex-shrink:0 !important;
}
.ex-meta-inline, .superset-meta-inline{
  font-size:11px !important;
  font-weight:500 !important;
  color:rgba(255,255,255,0.25) !important;
  white-space:nowrap !important;
  flex-shrink:0 !important;
}
.ex-right-stack .pr-row-compact.pr-section.pr-inline,
.ex-right-stack .superset-pr-inline{
  justify-content:flex-end !important;
}
.ex-meta-inline b, .superset-meta-inline b{
  font-weight:500 !important;
  color:rgba(255,255,255,0.25) !important;
}
body.light-mode .ex-meta-inline, body.light-mode .superset-meta-inline{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .ex-meta-inline b, body.light-mode .superset-meta-inline b{
  color:rgba(0,0,0,0.6) !important;
}

/* ── INPUT PILLS — unified hero element ─────────────────── */

/* Standard card set blocks */
.compact-set-block{
  padding:4px 4px !important;
}
.compact-set-row{
  padding:20px 20px !important;
  gap:16px !important;
  border-radius:var(--radius-lg) !important;
  background:var(--elevated) !important;
  border:1.5px solid var(--elevatedBorder) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.2) !important;
  justify-content:center !important;
  margin:0 12px !important;
  width:auto !important;
}
.input-group{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:4px !important;
}
.input-with-steppers{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.set-input{
  width:76px !important;
  height:auto !important;
  padding:14px 4px !important;
  font-size:var(--text-xl) !important;
  font-weight:700 !important;
  border-radius:var(--radius-md) !important;
  letter-spacing:-0.5px !important;
  text-align:center !important;
  background:var(--well) !important;
  border:1.5px solid var(--wellBorder) !important;
  color:rgba(255,255,255,0.95) !important;
}
.set-input.zero-value{
  color:rgba(255,255,255,0.15) !important;
  border-color:rgba(255,255,255,0.06) !important;
  border-style:dashed !important;
  background:rgba(13,13,18,0.6) !important;
}
.set-input.free:not(.zero-value){ 
  border:1.5px solid rgba(212,148,90,0.35) !important;
  border-style:solid !important;
  background:rgba(212,148,90,0.12) !important;
}
.set-input.cable:not(.zero-value){ 
  border:1.5px solid rgba(126,181,226,0.35) !important;
  border-style:solid !important;
  background:rgba(126,181,226,0.12) !important;
}
.input-label{
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:2px !important;
  color:rgba(255,255,255,0.4) !important;
  margin-top:5px !important;
  text-transform:uppercase !important;
}
.unit-tappable{
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent;
  padding:3px 8px !important;
  border-radius:6px;
  transition:background 0.2s ease;
  font-size:10px !important;
}
.unit-tappable:active{
  background:rgba(255,255,255,0.1) !important;
}
body.light-mode .unit-tappable:active{
  background:rgba(0,0,0,0.08) !important;
}
.unit-active{
  color:rgba(255,255,255,0.85) !important;
  font-weight:700 !important;
}
.unit-inactive{
  color:rgba(255,255,255,0.2) !important;
  font-weight:500 !important;
}
.unit-slash{
  color:rgba(255,255,255,0.15) !important;
  margin:0 1px;
}
body.light-mode .unit-active{
  color:rgba(0,0,0,0.8) !important;
}
body.light-mode .unit-inactive{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .unit-slash{
  color:rgba(0,0,0,0.12) !important;
}
.stepper-btn{
  width:48px !important;
  height:48px !important;
  font-size:24px !important;
  font-weight:400 !important;
  color:rgba(255,255,255,0.65) !important;
  background:var(--interactive) !important;
  border:1.5px solid var(--interactiveBorder) !important;
  border-radius:var(--radius-md) !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.2) !important;
  flex-shrink:0 !important;
  -webkit-tap-highlight-color:transparent !important;
}
.stepper-btn:active{
  background:var(--interactiveHover) !important;
  color:rgba(255,255,255,0.95) !important;
  transform:scale(0.92) !important;
  border-color:rgba(255,255,255,0.18) !important;
}

/* Superset inputs — match standard exactly */
.superset-set-inputs{
  padding:20px 16px !important;
  gap:16px !important;
  border-radius:var(--radius-lg) !important;
  background:var(--elevated) !important;
  border:1.5px solid var(--elevatedBorder) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.2) !important;
  margin:4px 12px 6px !important;
  justify-content:center !important;
}
.superset-input{
  width:64px !important;
  height:auto !important;
  padding:12px 4px !important;
  font-size:var(--text-xl) !important;
  font-weight:700 !important;
  border-radius:var(--radius-md) !important;
  text-align:center !important;
  background:var(--well) !important;
  border:1.5px solid var(--wellBorder) !important;
  color:rgba(255,255,255,0.95) !important;
  letter-spacing:-0.5px !important;
}
.superset-input.zero-value{
  color:rgba(255,255,255,0.15) !important;
  border-color:rgba(255,255,255,0.06) !important;
  background:rgba(13,13,18,0.6) !important;
}
.superset-input.free:not(.zero-value){ 
  border:1.5px solid rgba(212,148,90,0.35) !important;
  border-style:solid !important;
  background:rgba(212,148,90,0.12) !important;
}
.superset-input.cable:not(.zero-value){
  border:1.5px solid rgba(126,181,226,0.35) !important;
  border-style:solid !important;
  background:rgba(126,181,226,0.12) !important;
}
.superset-input-unit{
  font-size:var(--text-xs) !important;
  font-weight:600 !important;
  letter-spacing:1.5px !important;
  color:rgba(255,255,255,0.85) !important;
}
.superset-x{
  font-size:var(--text-sm) !important;
  color:rgba(255,255,255,0.12) !important;
  font-weight:400 !important;
}
.superset-set-input-group .stepper-btn{
  width:42px !important;
  height:42px !important;
  font-size:20px !important;
  background:var(--interactive) !important;
  border:1.5px solid var(--interactiveBorder) !important;
  border-radius:12px !important;
  color:rgba(255,255,255,0.6) !important;
}

/* ── SUPERSET STRUCTURE — tighter, cleaner ──────────────── */
.superset-combined-card{
  padding:0 !important;
  margin:0 !important;
}
.superset-exercise-item{
  padding:0 !important;
  border:none !important;
  background:transparent !important;
}
.ss-item-top-row{
  padding:0 !important;
}
/* Separator between A and B exercises */
.superset-exercise-item + .superset-exercise-item{
  padding-top:0 !important;
  border-top:none !important;
  margin-top:0 !important;
}
.superset-block{
  padding:0 4px !important;
}
/* Ensure superset scroll-snap works on iOS */
.superset-blocks-container{
  scroll-snap-type:x mandatory !important;
  overflow-x:scroll !important;
  overscroll-behavior-x:contain;
}
.superset-block{
  scroll-snap-align:start !important;
  scroll-snap-stop:always !important;
  flex:0 0 100% !important;
  min-width:100% !important;
  box-sizing:border-box !important;
}
.superset-block-content{
  padding:0 !important;
  background:transparent !important;
  border:none !important;
}
.special-set-box{
  padding-top:4px !important;
  margin-top:0 !important;
}
.unified-exercise-panel .special-set-box{
  padding-top:4px !important;
}
.superset-set-row{
  padding:0 !important;
}

/* ── DOTS — prominent navigation ────────────────────────── */
.set-dots{
  padding:0 !important;
  gap:4px !important;
  justify-content:center !important;
  align-items:center !important;
  will-change:transform;
  transition:transform 0.05s linear;
}
/* Set/Superset page label below dots */
.set-page-label{
  text-align:center;
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  color:rgba(255,255,255,0.45);
  padding:4px 0 10px;
  text-transform:uppercase;
  transition:all 0.2s ease, transform 0.05s linear;
  will-change:transform;
}
.set-page-label.flash-warning{
  animation:labelFlashWarn 0.5s ease 3;
  color:rgba(255,120,100,0.95);
  font-weight:800;
}
@keyframes labelFlashWarn{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.4; transform:scale(1.15); }
}
body.light-mode .set-page-label{
  color:rgba(0,0,0,0.65);
}

/* ── SCROLL HINTS — edge gradients + chevrons ────────────── */
.scroll-hint-wrap{
  position:relative;
  overflow:visible;
}
.scroll-hint-wrap::before,
.scroll-hint-wrap::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:28px;
  z-index:6;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.3s ease;
}
.scroll-hint-wrap::after{
  right:0;
  background:linear-gradient(to left, rgba(10,10,14,0.5) 0%, transparent 100%);
  border-radius:0 20px 20px 0;
}
.scroll-hint-wrap::before{
  left:0;
  background:linear-gradient(to right, rgba(10,10,14,0.5) 0%, transparent 100%);
  border-radius:20px 0 0 20px;
}
.scroll-hint-wrap.hint-right::after{ opacity:1; }
.scroll-hint-wrap.hint-left::before{ opacity:1; }

/* Chevron arrows inside the gradient zones */
.scroll-hint-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:7;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.3s ease;
  width:18px;
  height:18px;
}
.scroll-hint-arrow svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:rgba(255,255,255,0.35);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.scroll-hint-arrow.arrow-right{
  right:4px;
}
.scroll-hint-arrow.arrow-left{
  left:4px;
}
.scroll-hint-wrap.hint-right .arrow-right{ opacity:1; }
.scroll-hint-wrap.hint-left .arrow-left{ opacity:1; }

/* Pulse animation on first appearance */
@keyframes hintPulse{
  0%,100%{ transform:translateY(-50%) translateX(0); }
  50%{ transform:translateY(-50%) translateX(3px); }
}
.scroll-hint-arrow.arrow-right.pulse{
  animation:hintPulse 1.2s ease-in-out 2;
}
@keyframes hintPulseLeft{
  0%,100%{ transform:translateY(-50%) translateX(0); }
  50%{ transform:translateY(-50%) translateX(-3px); }
}
.scroll-hint-arrow.arrow-left.pulse{
  animation:hintPulseLeft 1.2s ease-in-out 2;
}

/* Light mode */
body.light-mode .scroll-hint-wrap::after{
  background:linear-gradient(to left, rgba(255,255,255,0.6) 0%, transparent 100%);
}
body.light-mode .scroll-hint-wrap::before{
  background:linear-gradient(to right, rgba(255,255,255,0.6) 0%, transparent 100%);
}
body.light-mode .scroll-hint-arrow svg{
  stroke:rgba(0,0,0,0.25);
}
.set-dot{
  width:30px !important;
  height:30px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,0.04) !important;
  border:1.5px solid rgba(255,255,255,0.08) !important;
  transition:all 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:12px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.22) !important;
}
.set-dot.active{
  width:36px !important;
  height:36px !important;
  border-radius:12px !important;
  background:#ffffff !important;
  border-color:rgba(255,255,255,0.92) !important;
  color:rgba(0,0,0,0.8) !important;
  font-size:14px !important;
  box-shadow:0 0 16px rgba(255,255,255,0.2), 0 4px 12px rgba(0,0,0,0.2) !important;
}
/* Completed circles (inactive) */
.set-dot.complete{ background:rgba(212,148,90,0.1) !important; border-color:rgba(212,148,90,0.3) !important; color:rgba(212,148,90,0.55) !important; }
.set-dot.complete.cable{ background:rgba(126,181,226,0.1) !important; border-color:rgba(126,181,226,0.3) !important; color:rgba(126,181,226,0.55) !important; }
/* Completed + active */
.set-dot.active.complete{ background:var(--accent-orange) !important; border-color:var(--accent-orange) !important; color:rgba(0,0,0,0.85) !important; box-shadow:0 0 10px rgba(212,148,90,0.3), 0 2px 6px rgba(0,0,0,0.2) !important; }
.set-dot.active.complete.cable{ background:var(--blue) !important; border-color:var(--blue) !important; color:rgba(0,0,0,0.85) !important; box-shadow:0 0 10px rgba(126,181,226,0.3), 0 2px 6px rgba(0,0,0,0.2) !important; }
/* PR gold border on set circles */
.set-dot.pr{ border-color:var(--gold) !important; }
.set-dot.active.pr{ border-color:var(--gold) !important; }
.set-dot.complete.pr{ border-color:var(--gold) !important; }
.set-dot.active.complete.pr{ border-color:var(--gold) !important; }
.set-dot.active.complete.cable.pr{ border-color:var(--gold) !important; }

/* ── COMPLETED SET GLOW — subtle, unified ───────────────── */
/* set-row-done styling handled by set-complete rules */

/* ── LIGHT MODE ─────────────────────────────────────────── */
body.light-mode .ex-number-badge{ color:rgba(0,0,0,0.6) !important; background:rgba(0,0,0,0.02) !important; border-color:rgba(0,0,0,0.7) !important; }
body.light-mode .ex-name{ color:rgba(0,0,0,0.85) !important; }
body.light-mode .ex-meta,
body.light-mode .meta-pill,
body.light-mode .meta-pill-val{ color:rgba(0,0,0,0.8) !important; }
body.light-mode .meta-dot{ color:rgba(0,0,0,0.7) !important; }
body.light-mode .superset-exercise-letter{ color:var(--purple) !important; background:rgba(162,100,190,0.06) !important; border-color:rgba(162,100,190,0.12) !important; }
body.light-mode .superset-exercise-name{ color:rgba(0,0,0,0.85) !important; }
body.light-mode .superset-meta,
body.light-mode .superset-meta b{ color:rgba(0,0,0,0.8) !important; }

body.light-mode .compact-set-row{
  background:var(--elevated) !important;
  border-color:var(--elevatedBorder) !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.06) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.light-mode .superset-set-inputs{
  background:var(--elevated) !important;
  border-color:var(--elevatedBorder) !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.06) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.light-mode .set-input{
  background:var(--well) !important;
  border:1.5px solid var(--wellBorder) !important;
  color:rgba(0,0,0,0.85) !important;
}
body.light-mode .set-input.zero-value{
  color:rgba(0,0,0,0.22) !important;
  background:rgba(0,0,0,0.03) !important;
  border:1.5px dashed rgba(0,0,0,0.1) !important;
}
body.light-mode .set-input.free:not(.zero-value){
  background:rgba(212,148,90,0.12) !important;
  border-color:rgba(212,148,90,0.3) !important;
}
body.light-mode .set-input.cable:not(.zero-value){
  background:rgba(126,181,226,0.12) !important;
  border-color:rgba(126,181,226,0.3) !important;
}
body.light-mode .superset-input{
  background:var(--well) !important;
  border:1.5px solid var(--wellBorder) !important;
  color:rgba(0,0,0,0.85) !important;
}
body.light-mode .superset-input.zero-value{
  color:rgba(0,0,0,0.25) !important;
  background:var(--well) !important;
  border-color:rgba(0,0,0,0.65) !important;
  border-style:dashed !important;
}
body.light-mode .input-label{ color:rgba(0,0,0,0.7) !important; }
body.light-mode .superset-input-unit{ color:rgba(0,0,0,0.7) !important; }
body.light-mode .superset-x{ color:rgba(0,0,0,0.65) !important; }
body.light-mode .stepper-btn{ color:rgba(0,0,0,0.7) !important; background:var(--interactive) !important; border:1.5px solid var(--interactiveBorder) !important; border-radius:var(--radius-md) !important; }
body.light-mode .stepper-btn:active{ background:var(--interactiveHover) !important; color:rgba(0,0,0,0.7) !important; }

body.light-mode .set-dot{ background:transparent !important; color:rgba(0,0,0,0.35) !important; border:none !important; }
body.light-mode .set-dot.active{ background:var(--interactive) !important; color:rgba(0,0,0,0.85) !important; }
body.light-mode .set-dot.active.free{ background:rgba(212,148,90,0.12) !important; color:rgba(60,160,115,0.9) !important; }
body.light-mode .set-dot.active.cable{ background:rgba(106,168,232,0.12) !important; color:rgba(80,136,212,0.9) !important; }
body.light-mode .set-dot.complete{ color:rgba(60,160,115,0.85) !important; }
body.light-mode .set-dot.complete.cable{ color:rgba(80,136,212,0.85) !important; }
body.light-mode .superset-exercise-item + .superset-exercise-item{
  border-top:none !important;
}

/* ── Active Set Row — highlight current set being filled ──── */
.set-row.active-set{
  background:rgba(255,255,255,0.07) !important;
  border-color:rgba(255,255,255,0.12) !important;
  box-shadow:inset 3px 0 0 var(--accent-orange);
}
.set-row.active-set.cable{
  box-shadow:inset 3px 0 0 var(--blue);
}
body.light-mode .set-row.active-set{
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(0,0,0,0.08) !important;
}
/* Completed sets recede visually */
.set-complete .set-row,
.set-complete .compact-set-row{
  opacity:0.5;
  transition:opacity 0.3s ease;
}
.set-complete:hover .set-row,
.set-complete:hover .compact-set-row{
  opacity:0.8;
}


/* ── Set Completion & PR Borders ─────────────────────────────── */
/* Standard set rows — completed */
.set-complete .set-row,
.set-complete .compact-set-row{
  border:2px solid var(--accent-orange) !important;
  box-shadow:0 0 16px rgba(212,148,90,0.15), 0 2px 8px rgba(0,0,0,0.2) !important;
}
.set-complete.cable .set-row,
.set-complete.cable .compact-set-row{
  border-color:var(--blue) !important;
  box-shadow:0 0 16px rgba(126,181,226,0.15), 0 2px 8px rgba(0,0,0,0.2) !important;
}
/* Standard set rows — PR only */
.set-has-pr:not(.set-complete) .set-row,
.set-has-pr:not(.set-complete) .compact-set-row{
  border-color:rgba(212,188,138,0.4) !important;
  box-shadow:0 0 12px rgba(212,188,138,0.15) !important;
}
/* Standard set rows — Completed + PR (gradient border) */
.set-complete.set-has-pr .set-row,
.set-complete.set-has-pr .compact-set-row{
  border:2px solid transparent !important;
  background:
    linear-gradient(var(--surface2), var(--surface2)) padding-box,
    linear-gradient(135deg, var(--accent-orange) 0%, var(--gold) 100%) border-box !important;
  box-shadow:0 0 16px rgba(212,148,90,0.12), 0 0 16px rgba(212,188,138,0.12) !important;
}
.set-complete.set-has-pr.cable .set-row,
.set-complete.set-has-pr.cable .compact-set-row{
  background:
    linear-gradient(var(--surface2), var(--surface2)) padding-box,
    linear-gradient(135deg, var(--blue) 0%, var(--gold) 100%) border-box !important;
  box-shadow:0 0 16px rgba(126,181,226,0.12), 0 0 16px rgba(212,188,138,0.12) !important;
}
/* Superset rows — completed */
.set-complete .superset-set-inputs{
  border:2px solid var(--accent-orange) !important;
  box-shadow:0 0 16px rgba(212,148,90,0.15) !important;
}
.set-complete.cable .superset-set-inputs{
  border-color:var(--blue) !important;
  box-shadow:0 0 16px rgba(126,181,226,0.15) !important;
}
/* Superset rows — PR only */
.set-has-pr:not(.set-complete) .superset-set-inputs{
  border-color:rgba(212,188,138,0.4) !important;
  box-shadow:0 0 12px rgba(212,188,138,0.15) !important;
}
/* Superset rows — Completed + PR (gradient border) */
.set-complete.set-has-pr .superset-set-inputs{
  border:2px solid transparent !important;
  background:
    linear-gradient(var(--surface2), var(--surface2)) padding-box,
    linear-gradient(135deg, var(--accent-orange) 0%, var(--gold) 100%) border-box !important;
  box-shadow:0 0 12px rgba(212,148,90,0.1), 0 0 12px rgba(212,188,138,0.1) !important;
}
.set-complete.set-has-pr.cable .superset-set-inputs{
  background:
    linear-gradient(var(--surface2), var(--surface2)) padding-box,
    linear-gradient(135deg, var(--blue) 0%, var(--gold) 100%) border-box !important;
  box-shadow:0 0 6px rgba(106,168,232,0.1), 0 0 6px rgba(212,188,138,0.1) !important;
}

/* ── Superset label row with info button ───────────── */
.superset-label-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0px 16px 0px;
}
.superset-label-text{
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--purple);
}
.superset-info-btn{
  width:26px; height:26px;
  border-radius:9px;
  border:1.5px solid rgba(162,100,190,0.2);
  background:rgba(162,100,190,0.06);
  display:grid;
  place-items:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  padding:0;
}
.superset-info-btn svg{
  width:15px; height:15px;
  stroke:var(--purple);
  stroke-width:2;
  fill:none;
}
.superset-info-btn.pulse-info{
  animation:info-pulse 2s ease-in-out infinite;
}
@keyframes info-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(162,100,190,0.3); }
  50%{ box-shadow:0 0 0 6px rgba(162,100,190,0); }
}

/* card-muscle-icon-corner removed — replaced by card-hero-muscle */

/* Watch & Learn title above hero images */
.watch-learn-title{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:4px;
  color:rgba(255,255,255,0.18);
  text-align:center;
  margin-top:24px;
  margin-bottom:12px;
  padding:0;
  text-indent:4px;
}
body.light-mode .watch-learn-title{
  color:rgba(0,0,0,0.12);
}

/* ── Hero image row: video left, muscle icon right ──────── */
.card-hero-row{
  display:flex;
  gap:12px;
  width:calc(100% - 32px);
  margin:0 auto 16px;
}
.card-hero-image-wrap{
  position:relative;
  flex:1;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  aspect-ratio:1/1;
  background:rgba(255,255,255,0.03);
  border:1.5px solid rgba(255,255,255,0.08);
  box-shadow:0 8px 32px rgba(0,0,0,0.25);
}
.card-hero-muscle-panel{
  flex:1;
  border-radius:16px;
  background:rgba(255,255,255,0.03);
  border:1.5px solid rgba(255,255,255,0.06);
  display:grid;
  place-items:center;
  cursor:pointer;
  aspect-ratio:1/1;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  transition:transform 0.15s ease;
}
.card-hero-muscle-panel:active{ transform:scale(0.96); }
.card-hero-muscle-panel img{
  width:70%;
  height:70%;
  object-fit:contain;
}
body.light-mode .card-hero-muscle-panel{
  background:rgba(0,0,0,0.02);
  border-color:rgba(0,0,0,0.06);
}
body.light-mode .card-hero-muscle-panel img{
  filter:brightness(0) opacity(0.6);
}
.card-hero-image-wrap::after{
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:50%;
  background:linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
  pointer-events:none;
  z-index:1;
}
.card-hero-image-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.3s ease;
}
.card-hero-image-wrap:active img{
  transform:scale(1.03);
}
.card-hero-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(0,0,0,0.6);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1.5px solid rgba(255,255,255,0.15);
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
  display:grid;
  place-items:center;
  z-index:2;
}
.card-hero-play svg{
  width:24px; height:24px;
  fill:white;
  stroke:none;
  margin-left:2px;
}
/* Old overlay muscle icon — hidden, replaced by panel */
.card-hero-muscle{
  display:none;
}
/* Superset stacked hero images */
.ss-hero-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:4px 0;
}
.ss-hero-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ss-hero-label{
  text-align:center;
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,0.5);
  letter-spacing:0.3px;
}
.ss-hero-letter{
  color:var(--purple);
  font-weight:700;
  margin-right:4px;
}
body.light-mode .ss-hero-label{
  color:rgba(0,0,0,0.65);
}

/* ── Set type info modal ─────────────────────────────── */
.set-type-info-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,0.6);
  backdrop-filter:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  transition:opacity 0.25s;
  pointer-events:none;
}
.set-type-info-overlay.visible{
  opacity:1;
  pointer-events:auto;
}
.set-type-info-modal{
  background:#1c1c22;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  padding:24px;
  max-width:340px;
  width:100%;
  text-align:left;
}
body.light-mode .set-type-info-modal{
  background:#ffffff;
  border-color:rgba(0,0,0,0.08);
}
.set-type-info-title{
  font-size:18px;
  font-weight:700;
  color:rgba(255,255,255,0.9);
  margin-bottom:16px;
}
body.light-mode .set-type-info-title{ color:rgba(0,0,0,0.85); }
.set-type-info-item{
  margin-bottom:14px;
}
.set-type-info-item-name{
  font-size:14px;
  font-weight:700;
  color:var(--purple);
  margin-bottom:4px;
}
.set-type-info-item-desc{
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,0.55);
}
body.light-mode .set-type-info-item-desc{ color:rgba(0,0,0,0.55); }
.set-type-info-close{
  display:block;
  margin:8px auto 0;
  padding:10px 32px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.7);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
body.light-mode .set-type-info-close{
  background:rgba(0,0,0,0.06);
  color:rgba(0,0,0,0.6);
}
body.light-mode .ss-meta-centered{
  color:rgba(0,0,0,0.8);
}
body.light-mode .ss-meta-centered b{
  color:rgba(0,0,0,0.8);
}
body.light-mode .superset-pr-below .superset-pr-label{
  color:rgba(0,0,0,0.6);
}
body.light-mode .superset-pr-below .superset-pr-value{
  color:rgba(0,0,0,0.65);
}
body.light-mode .card-hero-image-wrap{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.08);
  box-shadow:0 4px 16px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);
}
body.light-mode .card-hero-play{
  background:rgba(0,0,0,0.4);
}

/* ═══════════════════════════════════════════════════════════════
   END UNIFIED CARD REDESIGN v2

/* Light mode — set completion & PR borders */
body.light-mode .set-complete.set-has-pr .set-row,
body.light-mode .set-complete.set-has-pr .compact-set-row{
  border:2px solid transparent !important;
  background:
    linear-gradient(rgba(248,248,250,0.97), rgba(248,248,250,0.97)) padding-box,
    linear-gradient(to bottom, var(--accent-orange) 50%, #D4BC8A 50%) border-box !important;
  box-shadow:0 0 6px rgba(212,148,90,0.15), 0 0 6px rgba(212,188,138,0.15) !important;
}
body.light-mode .set-complete.set-has-pr.cable .set-row,
body.light-mode .set-complete.set-has-pr.cable .compact-set-row{
  border:2px solid transparent !important;
  background:
    linear-gradient(rgba(248,248,250,0.97), rgba(248,248,250,0.97)) padding-box,
    linear-gradient(to bottom, var(--blue) 50%, #D4BC8A 50%) border-box !important;
  box-shadow:0 0 6px rgba(106,168,232,0.15), 0 0 6px rgba(212,188,138,0.15) !important;
}
body.light-mode .set-complete.set-has-pr .superset-set-inputs{
  border:2px solid transparent !important;
  background:
    linear-gradient(rgba(248,248,250,0.97), rgba(248,248,250,0.97)) padding-box,
    linear-gradient(to bottom, var(--accent-orange) 50%, #D4BC8A 50%) border-box !important;
  box-shadow:0 0 6px rgba(212,148,90,0.15), 0 0 6px rgba(212,188,138,0.15) !important;
}
body.light-mode .set-complete.set-has-pr.cable .superset-set-inputs{
  border:2px solid transparent !important;
  background:
    linear-gradient(rgba(248,248,250,0.97), rgba(248,248,250,0.97)) padding-box,
    linear-gradient(to bottom, var(--blue) 50%, #D4BC8A 50%) border-box !important;
  box-shadow:0 0 6px rgba(106,168,232,0.15), 0 0 6px rgba(212,188,138,0.15) !important;
}
/* Light mode — set-complete only (non-PR) borders */
body.light-mode .set-complete .compact-set-row,
body.light-mode .set-complete .set-row{
  border:1.5px solid var(--accent-orange) !important;
  box-shadow:0 0 8px rgba(212,148,90,0.2) !important;
}
body.light-mode .set-complete.cable .compact-set-row,
body.light-mode .set-complete.cable .set-row{
  border-color:var(--blue) !important;
  box-shadow:0 0 8px rgba(106,168,232,0.2) !important;
}
body.light-mode .set-complete .superset-set-inputs{
  border:1.5px solid var(--accent-orange) !important;
  box-shadow:0 0 8px rgba(212,148,90,0.2) !important;
}
body.light-mode .set-complete.cable .superset-set-inputs{
  border-color:var(--blue) !important;
  box-shadow:0 0 8px rgba(106,168,232,0.2) !important;
}
/* Light mode — PR only borders */
body.light-mode .set-has-pr:not(.set-complete) .compact-set-row,
body.light-mode .set-has-pr:not(.set-complete) .set-row{
  border-color:rgba(212,188,138,0.4) !important;
  box-shadow:0 0 6px rgba(212,188,138,0.15) !important;
}
body.light-mode .set-has-pr:not(.set-complete) .superset-set-inputs{
  border-color:rgba(212,188,138,0.4) !important;
  box-shadow:0 0 6px rgba(212,188,138,0.15) !important;
}
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   DURATION POPUP + DOCK TIMER + PER-EXERCISE TRACKING
   ═══════════════════════════════════════════════════════════════ */

/* ── Duration Popup (bottom sheet) ──────────────────────────── */
.duration-popup-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.7);
  z-index:520; opacity:0; pointer-events:none;
  transition:opacity 0.3s ease;
}
.duration-popup-overlay.open{ opacity:1; pointer-events:auto; }

.duration-popup{
  position:fixed; bottom:0; left:0; right:0;
  max-height:85dvh;
  background:linear-gradient(180deg, #18181f 0%, #111117 100%);
  border-radius:20px 20px 0 0;
  z-index:521; transform:translateY(100%);
  transition:transform 0.4s cubic-bezier(0.32,0.72,0,1);
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 -8px 40px rgba(0,0,0,0.4);
}
.duration-popup.open{ transform:translateY(0); }
body.light-mode .duration-popup{
  background:linear-gradient(180deg, #fff 0%, #f6f5f3 100%);
  box-shadow:0 -4px 20px rgba(0,0,0,0.08);
}

.duration-popup-handle{
  width:32px; height:4px;
  background:rgba(255,255,255,0.15); border-radius:2px;
  margin:12px auto 0; flex-shrink:0; cursor:pointer;
}
body.light-mode .duration-popup-handle{ background:rgba(0,0,0,0.1); }

/* ── Hero ── */
.dur-popup-hero{
  display:flex; align-items:center;
  padding:20px 24px 18px; gap:20px;
}
.dur-hero-ring{
  position:relative; width:80px; height:80px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.dur-hero-ring-svg{
  width:80px; height:80px; transform:rotate(-90deg);
}
.dur-ring-bg{
  fill:none; stroke:rgba(255,255,255,0.06); stroke-width:5;
}
body.light-mode .dur-ring-bg{ stroke:rgba(0,0,0,0.05); }
.dur-ring-fill{
  fill:none; stroke:var(--accent-orange); stroke-width:5;
  stroke-linecap:round;
  stroke-dasharray:276.46; stroke-dashoffset:276.46;
  transition:stroke-dashoffset 0.8s cubic-bezier(0.32,0.72,0,1);
  filter:drop-shadow(0 0 6px rgba(212,148,90,0.25));
}
.dur-ring-fill.cable{
  stroke:var(--blue);
  filter:drop-shadow(0 0 6px rgba(126,181,226,0.25));
}
.dur-hero-inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px;
}
.dur-hero-pct{
  font-size:22px; font-weight:800; color:#fff;
  letter-spacing:-0.5px; line-height:1;
}
body.light-mode .dur-hero-pct{ color:#111; }
.dur-hero-done{
  font-size:10px; font-weight:700;
  color:rgba(255,255,255,0.3); letter-spacing:0.3px;
}
body.light-mode .dur-hero-done{ color:rgba(0,0,0,0.25); }

.dur-hero-time{ flex:1; }
.dur-hero-total{
  font-size:38px; font-weight:800; color:rgba(255,255,255,0.92);
  font-variant-numeric:tabular-nums; letter-spacing:-1.5px; line-height:1;
  display:block;
}
.dur-hero-total.is-running{
  color:var(--accent-orange); text-shadow:0 0 24px rgba(212,148,90,0.15);
}
.dur-hero-total.is-running.cable{
  color:var(--blue); text-shadow:0 0 24px rgba(126,181,226,0.15);
}
.dur-hero-total.is-paused{
  color:#eab308;
}
body.light-mode .dur-hero-total{ color:rgba(0,0,0,0.85); }
body.light-mode .dur-hero-total.is-running{ color:rgba(60,175,130,0.9); }
body.light-mode .dur-hero-total.is-paused{ color:#a16207; }

.dur-hero-label{
  font-size:11px; font-weight:700;
  color:rgba(255,255,255,0.2); letter-spacing:0.8px;
  text-transform:uppercase; display:block; margin-top:6px;
}
body.light-mode .dur-hero-label{ color:rgba(0,0,0,0.18); }

.dur-popup-divider{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  margin:0 24px;
}
body.light-mode .dur-popup-divider{ background:linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent); }

/* ── Exercise List ── */
.duration-popup-list{
  padding:10px 12px 6px; overflow-y:auto;
  display:flex; flex-direction:column; gap:2px; flex:1;
  -webkit-overflow-scrolling:touch;
}
.dur-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:12px;
  background:transparent; cursor:pointer;
  transition:background 0.15s;
}
.dur-item:active{ background:rgba(255,255,255,0.03); }
body.light-mode .dur-item:active{ background:rgba(0,0,0,0.02); }

.dur-item-badge{
  width:28px; height:28px; min-width:28px;
  border-radius:8px;
  background:rgba(255,255,255,0.04);
  font-size:12px; font-weight:800;
  color:rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all 0.2s;
}
.dur-item-badge.completed{
  background:rgba(212,148,90,0.1);
  color:rgba(212,148,90,0.85);
}
.dur-item-badge.completed.cable{
  background:rgba(126,181,226,0.1);
  color:rgba(126,181,226,0.85);
}
.dur-item-badge.pr{
  box-shadow:inset 0 0 0 1.5px rgba(212,188,138,0.25);
}
body.light-mode .dur-item-badge{
  background:rgba(0,0,0,0.03);
  color:rgba(0,0,0,0.55);
}
body.light-mode .dur-item-badge.completed{
  background:rgba(34,160,94,0.06);
  color:rgba(34,160,94,0.7);
}

.dur-item-info{ flex:1; min-width:0; }
.dur-item-name{
  font-size:14px; font-weight:600;
  color:rgba(255,255,255,0.8); letter-spacing:-0.2px;
  line-height:1.3;
}
body.light-mode .dur-item-name{ color:rgba(0,0,0,0.7); }
.dur-item-detail{
  font-size:11px; font-weight:500;
  color:rgba(255,255,255,0.25); margin-top:2px;
  display:flex; align-items:center; gap:4px;
}
.dur-detail-sets{ color:rgba(255,255,255,0.35); font-variant-numeric:tabular-nums; }
body.light-mode .dur-item-detail{ color:rgba(0,0,0,0.55); }
body.light-mode .dur-detail-sets{ color:rgba(0,0,0,0.35); }

.dur-item-right{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:3px; flex-shrink:0;
}
.dur-item-time{
  font-size:13px; font-weight:700;
  color:rgba(255,255,255,0.35);
  font-variant-numeric:tabular-nums; letter-spacing:-0.3px;
}
.dur-item-time.live{
  color:var(--accent-orange);
}
.dur-item-time.live.cable{
  color:var(--blue);
}
body.light-mode .dur-item-time{ color:rgba(0,0,0,0.6); }
body.light-mode .dur-item-time.live{ color:rgba(60,175,130,0.85); }

.dur-item-status{
  display:flex; align-items:center; gap:3px;
}
.dur-item-status svg{
  width:11px; height:11px; fill:none;
  stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
}
.dur-status-check svg{ stroke:var(--accent-orange); }
.dur-status-check.cable svg{ stroke:var(--blue); }
.dur-status-pr svg{ stroke:rgba(212,188,138,0.7); }

/* ── Per-exercise play/pause ── */
.dur-item-ctrl{
  width:30px; height:30px; border-radius:8px; flex-shrink:0;
  background:rgba(255,255,255,0.03);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:all 0.15s;
}
.dur-item-ctrl:active{ transform:scale(0.85); background:rgba(255,255,255,0.06); }
.dur-item-ctrl svg{
  width:13px; height:13px; stroke:rgba(255,255,255,0.3);
  stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; fill:none;
}
.dur-item-ctrl.is-running{
  background:rgba(255,200,100,0.08);
}
.dur-item-ctrl.is-running svg{ stroke:rgba(255,200,100,0.7); }
.dur-item-ctrl .ctrl-play{ fill:rgba(255,255,255,0.3); stroke:none; }
body.light-mode .dur-item-ctrl{ background:rgba(0,0,0,0.02); }
body.light-mode .dur-item-ctrl svg{ stroke:rgba(0,0,0,0.25); }

/* ── Action Buttons ── */
.dur-popup-actions{
  display:flex; gap:10px;
  padding:12px 16px calc(16px + env(safe-area-inset-bottom));
}
.dur-action-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:14px 12px; border:none; border-radius:12px;
  font-family:inherit; font-size:14px; font-weight:700;
  letter-spacing:0.2px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.2s cubic-bezier(0.32,0.72,0,1);
}
.dur-action-btn:active{ transform:scale(0.96); }
.dur-action-btn svg{
  width:18px; height:18px; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;
}

.dur-action-pause{
  background:rgba(255,200,100,0.1);
  color:rgba(255,200,100,0.9);
}
.dur-action-pause svg{ stroke:rgba(255,200,100,0.75); fill:none; stroke-width:2.5; }
.dur-action-pause.is-paused{
  background:rgba(34,197,94,0.10);
  color:#22c55e;
}
.dur-action-pause.is-paused svg{ stroke:none; fill:#22c55e; }

.dur-action-end{
  background:rgba(255,80,80,0.06);
  color:rgba(255,100,100,0.7);
}
.dur-action-end svg{ stroke:none; fill:rgba(255,100,100,0.6); }
.dur-action-end.confirming{
  background:rgba(255,70,70,0.85); color:#fff;
}
.dur-action-end.confirming svg{ fill:#fff; }

body.light-mode .dur-action-pause{ background:rgba(200,150,50,0.06); color:rgba(180,130,30,0.8); }
body.light-mode .dur-action-pause svg{ stroke:rgba(180,130,30,0.65); }
body.light-mode .dur-action-pause.is-paused{ background:rgba(34,160,94,0.06); color:rgba(34,160,94,0.8); }
body.light-mode .dur-action-pause.is-paused svg{ fill:rgba(34,160,94,0.7); stroke:none; }
body.light-mode .dur-action-end{ background:rgba(220,60,60,0.04); color:rgba(220,60,60,0.6); }
body.light-mode .dur-action-end svg{ fill:rgba(220,60,60,0.5); }

/* ── Dock Timer Pill ────────────────────────────────────────── */
.dock-timer-pill{
  display:none !important; /* Replaced by menu bar timer */
  bottom:calc(80px + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%) translateY(20px);
  z-index:99;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  background:#0e0e12;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:22px;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  opacity:0;
  pointer-events:none;
  transition:all 0.3s cubic-bezier(0.25,1,0.5,1);
}
.dock-timer-pill.visible{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.dock-timer-pill:active{
  transform:translateX(-50%) scale(0.95);
}
.dock-timer-pill.paused{
  border-color:rgba(255,200,100,0.15);
}
body.light-mode .dock-timer-pill{
  #ffffff;
  border-color:rgba(0,0,0,0.08);
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
}
.dock-timer-icon{
  width:18px; height:18px;
  stroke:rgba(212,148,90,0.8);
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dock-timer-pill.cable .dock-timer-icon{
  stroke:rgba(126,181,226,0.7);
}
.dock-timer-pill.paused .dock-timer-icon{
  stroke:rgba(255,200,100,0.7);
}
.dock-timer-time{
  font-size:15px;
  font-weight:700;
  color:rgba(255,255,255,0.9);
  font-variant-numeric:tabular-nums;
  letter-spacing:0.5px;
}
body.light-mode .dock-timer-time{
  color:rgba(0,0,0,0.75);
}

/* Dock timer expanded controls */
.dock-timer-info{
  display:none;
  flex-direction:column;
  gap:1px;
  max-width:0;
  overflow:hidden;
  opacity:0;
  transition:max-width 0.25s ease, opacity 0.2s ease;
}
.dock-timer-pill.expanded .dock-timer-info{
  display:flex;
  max-width:140px;
  opacity:1;
}
.dock-timer-info-date{
  font-size:9px;
  font-weight:500;
  letter-spacing:0.5px;
  color:rgba(255,255,255,0.35);
  white-space:nowrap;
}
.dock-timer-info-day{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.8px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  white-space:nowrap;
}
.dock-timer-info-workout{
  font-size:10px;
  font-weight:500;
  color:rgba(255,255,255,0.4);
  white-space:nowrap;
}
body.light-mode .dock-timer-info-date{
  color:rgba(0,0,0,0.6);
}
body.light-mode .dock-timer-info-day{
  color:rgba(0,0,0,0.7);
}
body.light-mode .dock-timer-info-workout{
  color:rgba(0,0,0,0.35);
}
/* Expanded pill - larger text and buttons */
.dock-timer-pill.expanded{
  padding:12px 18px;
  gap:10px;
}
.dock-timer-pill.expanded .dock-timer-icon{
  width:22px; height:22px;
}
.dock-timer-pill.expanded .dock-timer-time{
  font-size:20px;
}
.dock-timer-controls{
  display:flex;
  gap:6px;
  max-width:0;
  overflow:hidden;
  opacity:0;
  transition:max-width 0.25s ease, opacity 0.2s ease;
}
.dock-timer-pill.expanded .dock-timer-controls{
  max-width:260px;
  opacity:1;
}
.dock-timer-pill.expanded .dock-timer-btn{
  width:44px; height:44px;
}
.dock-timer-pill.expanded .dock-timer-btn svg{
  width:20px; height:20px;
}
.dock-timer-btn{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.25s cubic-bezier(0.25,1,0.5,1);
  overflow:hidden;
}
.dock-timer-btn:active{
  transform:scale(0.88);
}
.dock-timer-btn.dt-pause{
  background:rgba(255,255,255,0.08);
}
.dock-timer-btn.dt-pause svg{
  width:18px; height:18px;
  stroke:rgba(255,255,255,0.6);
  fill:none;
  stroke-width:2.5;
  stroke-linecap:round;
}
.dock-timer-btn.dt-stop{
  background:rgba(255,80,80,0.12);
}
.dock-timer-btn.dt-stop svg{
  width:18px; height:18px;
  stroke:none;
  fill:rgba(255,100,100,0.7);
}
body.light-mode .dock-timer-btn.dt-pause{
  background:rgba(0,0,0,0.05);
}
body.light-mode .dock-timer-btn.dt-pause svg{
  stroke:rgba(0,0,0,0.45);
}
body.light-mode .dock-timer-btn.dt-stop{
  background:rgba(255,60,60,0.08);
}
body.light-mode .dock-timer-btn.dt-stop svg{
  fill:rgba(220,50,50,0.6);
}
.dock-timer-btn.dt-reset{
  background:rgba(255,255,255,0.04);
}
.dock-timer-btn.confirm > svg:first-child{
  display:none;
}
.dock-timer-btn.dt-reset.confirm{
  width:auto;
  padding:0 10px;
  border-radius:16px;
  background:rgba(255,200,100,0.1);
  border:1px solid rgba(255,200,100,0.2);
  gap:4px;
  display:flex;
  align-items:center;
  transition:all 0.2s cubic-bezier(0.25,1,0.5,1);
}
.dock-timer-btn.dt-stop.confirm{
  width:auto;
  padding:0 10px;
  border-radius:16px;
  background:rgba(255,80,80,0.12);
  border:1px solid rgba(255,80,80,0.2);
  gap:4px;
  display:flex;
  align-items:center;
  transition:all 0.2s cubic-bezier(0.25,1,0.5,1);
}
.dock-timer-btn.confirm .confirm-label{
  font-size:10px;
  font-weight:600;
  letter-spacing:0.3px;
  white-space:nowrap;
  line-height:1;
}
.dock-timer-btn.dt-reset.confirm .confirm-label{
  color:rgba(255,200,100,0.8);
}
.dock-timer-btn.dt-stop.confirm .confirm-label{
  color:rgba(255,100,100,0.8);
}
.dock-timer-btn.confirm .confirm-ring{
  width:16px; height:16px;
  flex-shrink:0;
}
.dock-timer-btn.confirm .confirm-ring circle{
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  transform:rotate(-90deg);
  transform-origin:center;
}
.dock-timer-btn.dt-reset.confirm .confirm-ring circle{
  stroke:rgba(255,200,100,0.4);
}
.dock-timer-btn.dt-stop.confirm .confirm-ring circle{
  stroke:rgba(255,100,100,0.4);
}
.dock-timer-btn.confirm .confirm-ring .countdown{
  stroke-dasharray:38;
  stroke-dashoffset:0;
  animation:ringCountdown 3s linear forwards;
}
@keyframes ringCountdown{
  from{ stroke-dashoffset:0; }
  to{ stroke-dashoffset:38; }
}
body.light-mode .dock-timer-btn.dt-reset.confirm{
  background:rgba(200,150,50,0.08);
  border-color:rgba(200,150,50,0.15);
}
body.light-mode .dock-timer-btn.dt-stop.confirm{
  background:rgba(220,50,50,0.08);
  border-color:rgba(220,50,50,0.15);
}
body.light-mode .dock-timer-btn.dt-reset.confirm .confirm-label{
  color:rgba(180,130,30,0.8);
}
body.light-mode .dock-timer-btn.dt-stop.confirm .confirm-label{
  color:rgba(200,50,50,0.8);
}
.dock-timer-btn.dt-reset svg{
  width:14px; height:14px;
  stroke:rgba(255,255,255,0.35);
  fill:none;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.light-mode .dock-timer-btn.dt-reset{
  background:rgba(0,0,0,0.03);
}
body.light-mode .dock-timer-btn.dt-reset svg{
  stroke:rgba(0,0,0,0.55);
}

/* ── Workout Recap — Redesigned ────────────────────────────── */
.recap-overlay{
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:#000;
  z-index:10100;
  opacity:0; pointer-events:none;
  transition:opacity 0.3s ease;
}
.recap-overlay.open{ opacity:1; pointer-events:auto; }
.recap-modal{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  z-index:10101;
  display:flex; flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:max(60px, calc(40px + env(safe-area-inset-top, 40px))) 24px calc(40px + env(safe-area-inset-bottom, 20px));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  opacity:0; pointer-events:none;
  transition:all 0.4s cubic-bezier(0.25,1,0.5,1);
  transform:scale(0.95);
}
.recap-modal.open{
  opacity:1; pointer-events:auto;
  transform:scale(1);
}

/* Close X — Round 23: position:fixed so it stays in viewport when scrolling */
.recap-close{
  position:fixed;
  top:max(16px, env(safe-area-inset-top, 16px));
  right:16px;
  width:40px; height:40px;
  border:none; border-radius:50%;
  background:rgba(255,255,255,0.08);
  z-index:10102;
  display:grid; place-items:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.12s ease;
}
.recap-close:active{ transform:scale(0.88); background:rgba(255,255,255,0.14); }
.recap-close svg{
  width:20px; height:20px;
  stroke:rgba(255,255,255,0.5);
  stroke-width:2.5; stroke-linecap:round;
  fill:none;
}
body.light-mode .recap-close{
  background:rgba(0,0,0,0.06);
}
body.light-mode .recap-close svg{
  stroke:rgba(0,0,0,0.4);
}

/* Checkmark circle */
.recap-check{
  position:relative;
  width:88px; height:88px;
  border-radius:50%;
  display:grid; place-items:center;
  margin-bottom:20px;
  animation:recapCheckPop 0.4s ease 0.15s both;
}
.recap-check.free{
  background:rgba(212,148,90,0.12);
  border:2px solid rgba(212,148,90,0.25);
}
.recap-check.cable{
  background:rgba(126,181,226,0.12);
  border:2px solid rgba(126,181,226,0.25);
}
.recap-check svg{
  width:44px; height:44px;
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.recap-check.free svg{ stroke:rgba(212,148,90,0.85); }
.recap-check.cable svg{ stroke:rgba(126,181,226,0.85); }
.recap-check svg polyline{
  stroke-dasharray:40;
  stroke-dashoffset:40;
  animation:recapCheckDraw 0.4s ease 0.4s forwards;
}
@keyframes recapCheckPop{
  0%{ opacity:0; }
  100%{ opacity:1; }
}
@keyframes recapCheckDraw{
  to{ stroke-dashoffset:0; }
}
/* Progress ring for incomplete workouts */
.recap-check.incomplete{
  background:rgba(255,255,255,0.04);
  border:2px solid rgba(255,255,255,0.08);
}
.recap-check.incomplete svg{
  width:68px; height:68px;
  shape-rendering:geometricPrecision;
}
.recap-check.incomplete .ring-track{
  fill:none;
  stroke:rgba(255,255,255,0.12);
  stroke-width:5;
}
.recap-check.incomplete .ring-fill{
  fill:none;
  stroke-width:5;
  stroke-linecap:round;
  transform:rotate(-90deg);
  transform-origin:center;
  transition:stroke-dashoffset 0.8s cubic-bezier(0.4,0,0.2,1) 0.3s;
}
.recap-check.incomplete.free .ring-fill{
  stroke:var(--accent-orange);
}
.recap-check.incomplete.cable .ring-fill{
  stroke:var(--blue);
}
.recap-check.incomplete .ring-pct{
  font-size:15px;
  font-weight:800;
  fill:rgba(255,255,255,0.9);
  text-anchor:middle;
  dominant-baseline:central;
}
.ring-pct-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:800;
  color:rgba(255,255,255,0.95);
  letter-spacing:-0.5px;
  z-index:1;
}
body.light-mode .recap-check.incomplete{
  background:rgba(0,0,0,0.02);
  border-color:rgba(0,0,0,0.06);
}
body.light-mode .recap-check.incomplete .ring-track{
  stroke:rgba(0,0,0,0.06);
}
body.light-mode .recap-check.incomplete .ring-pct{
  fill:rgba(0,0,0,0.4);
}
body.light-mode .ring-pct-label{
  color:rgba(0,0,0,0.7);
}
body.light-mode .recap-check.free{
  background:rgba(212,148,90,0.1);
  border-color:rgba(212,148,90,0.2);
}
body.light-mode .recap-check.cable{
  background:rgba(126,181,226,0.1);
  border-color:rgba(126,181,226,0.2);
}
body.light-mode .recap-overlay{
  background:#fff;
}

/* Title — flat-minimal */
.recap-title{
  font-size:28px; font-weight:900;
  color:var(--text);
  letter-spacing:-0.5px;
  margin-bottom:8px;
  animation:recapFadeUp 0.4s ease 0.2s both;
}
body.light-mode .recap-title{ color:rgba(0,0,0,0.9); }
.recap-footer-info{
  text-align:center;
  margin-bottom:24px;
  animation:recapFadeUp 0.4s ease 0.25s both;
}
.recap-footer-info .rfi-date{
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.45);
  letter-spacing:0.5px;
}
.recap-footer-info .rfi-day{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:2px;
  color:rgba(255,255,255,0.50);
  margin-top:4px;
}
.recap-footer-info .rfi-equip{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:2px;
  color:rgba(255,255,255,0.35);
  margin-top:3px;
}
.recap-footer-info .rfi-name{
  font-size:18px;
  font-weight:700;
  letter-spacing:0.2px;
  color:var(--text);
  margin-top:6px;
  line-height:1.2;
}
.recap-footer-info .rfi-name.cable{ color:var(--text); }
.recap-footer-info .rfi-equip.free{ color:rgba(255,255,255,0.35); }
.recap-footer-info .rfi-equip.cable{ color:rgba(255,255,255,0.35); }
body.light-mode .recap-footer-info .rfi-date{ color:rgba(0,0,0,0.55); }
body.light-mode .recap-footer-info .rfi-day{ color:rgba(0,0,0,0.55); }
body.light-mode .recap-footer-info .rfi-equip,
body.light-mode .recap-footer-info .rfi-equip.free,
body.light-mode .recap-footer-info .rfi-equip.cable{ color:rgba(0,0,0,0.40); }
body.light-mode .recap-footer-info .rfi-name,
body.light-mode .recap-footer-info .rfi-name.cable{ color:rgba(0,0,0,0.9); }

/* Stats grid */
.recap-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:100%;
  max-width:320px;
  margin-bottom:28px;
  animation:recapFadeUp 0.4s ease 0.3s both;
}
.recap-stat-wide{
  grid-column:1 / -1;
}
.recap-stat-slash{
  font-size:18px;
  font-weight:600;
  opacity:0.3;
}
.recap-stat{
  padding:18px 14px;
  border-radius:16px;
  background:var(--panel);
  border:1px solid var(--panel-border);
  box-shadow:var(--depth-2);
  text-align:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform 0.15s ease;
}
.recap-stat:active{
  transform:scale(0.97);
}
body.light-mode .recap-stat{
  background:var(--panel);
  border-color:var(--panel-border);
  box-shadow:var(--depth-2);
}
.recap-stat-value{
  font-size:22px; font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.4px;
  color:var(--text);
  margin-bottom:6px;
}
.recap-stat-value.free{ color:rgba(212,148,90,0.85); }
.recap-stat-value.cable{ color:rgba(126,181,226,0.85); }
body.light-mode .recap-stat-value{ color:rgba(0,0,0,0.9); }
body.light-mode .recap-stat-value.free{ color:rgba(212,148,90,0.85); }
body.light-mode .recap-stat-value.cable{ color:rgba(70,140,230,0.85); }
.recap-stat-label{
  font-size:10px; font-weight:800;
  letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,0.50);
}
body.light-mode .recap-stat-label{ color:rgba(0,0,0,0.55); }

.recap-stat-icon{
  margin-bottom:8px;
}
.recap-stat-icon svg{
  width:20px; height:20px;
  stroke:rgba(255,255,255,0.45);
}
body.light-mode .recap-stat-icon svg{
  stroke:rgba(0,0,0,0.45);
}

/* Recap Detail Popup */
.recap-detail-popup{
  position:fixed;
  inset:0;
  z-index:100001;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(0,0,0,0.6);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  opacity:0;
  transition:opacity 0.25s ease;
}
.recap-detail-popup.show{ opacity:1; }
.recap-detail-card{
  width:100%;
  max-width:none;
  height:100dvh;
  max-height:100dvh;
  background:#1c1c22;
  border:none;
  border-radius:0;
  padding:calc(28px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom));
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  transform:translateY(100%);
  transition:transform 0.35s cubic-bezier(0.25,1,0.5,1);
}
.recap-detail-popup.show .recap-detail-card{ transform:translateY(0); }
body.light-mode .recap-detail-card{
  background:#ffffff;
}
.recap-detail-icon{
  font-size:36px;
  margin-bottom:8px;
  display:none;
}
.recap-detail-icon-svg{
  width:52px; height:52px;
  border-radius:16px;
  display:grid; place-items:center;
  margin-bottom:12px;
  background:rgba(255,255,255,0.04);
  border:1.5px solid rgba(255,255,255,0.06);
}
.recap-detail-icon-svg svg{
  width:26px; height:26px;
}
.recap-detail-icon-svg.free svg{
  stroke:var(--accent-orange); color:var(--accent-orange); fill:none;
}
.recap-detail-icon-svg.free{ border-color:rgba(212,148,90,0.15); background:rgba(212,148,90,0.06); }
.recap-detail-icon-svg.cable svg{
  stroke:var(--blue); color:var(--blue); fill:none;
}
.recap-detail-icon-svg.cable{ border-color:rgba(96,165,250,0.15); background:rgba(96,165,250,0.06); }
body.light-mode .recap-detail-icon-svg{
  background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.06);
}
.recap-detail-value{
  font-size:32px;
  font-weight:800;
  letter-spacing:-0.5px;
  margin-bottom:4px;
}
.recap-detail-value.free{ color:var(--accent-orange); }
.recap-detail-value.cable{ color:var(--blue); }
.recap-detail-title{
  font-size:16px;
  font-weight:700;
  color:rgba(255,255,255,0.85);
  margin-bottom:16px;
}
body.light-mode .recap-detail-title{ color:rgba(0,0,0,0.85); }
.recap-detail-lines{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
  max-width:320px;
  width:100%;
}
.recap-detail-line{
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,0.5);
  text-align:left;
  padding-left:12px;
  border-left:2px solid rgba(255,255,255,0.08);
}
body.light-mode .recap-detail-line{
  color:rgba(0,0,0,0.7);
  border-left-color:rgba(0,0,0,0.06);
}
.recap-detail-close{
  width:100%;
  max-width:320px;
  padding:16px;
  border-radius:14px;
  border:none;
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.7);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  margin-top:auto;
}
.recap-detail-close:active{ background:rgba(255,255,255,0.1); }
body.light-mode .recap-detail-close{
  background:rgba(0,0,0,0.05);
  color:rgba(0,0,0,0.7);
}
.recap-detail-x{
  position:absolute;
  top:max(16px, env(safe-area-inset-top, 16px));
  right:16px;
  width:40px; height:40px;
  border:none; border-radius:50%;
  background:rgba(255,255,255,0.08);
  display:grid; place-items:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  z-index:2;
  transition:all 0.12s ease;
}
.recap-detail-x:active{ transform:scale(0.88); background:rgba(255,255,255,0.14); }
.recap-detail-x svg{
  stroke:rgba(255,255,255,0.5);
  stroke-width:2.5; stroke-linecap:round;
  fill:none;
}
body.light-mode .recap-detail-x{
  background:rgba(0,0,0,0.06);
}
body.light-mode .recap-detail-x svg{
  stroke:rgba(0,0,0,0.4);
}

/* Progress bar — Day X of 180 */
.recap-progress{
  width:100%;
  max-width:320px;
  margin-bottom:24px;
  animation:recapFadeUp 0.4s ease 0.4s both;
}
.recap-progress-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:6px;
}
.recap-progress-label{
  font-size:11px; font-weight:600;
  color:rgba(255,255,255,0.3);
  letter-spacing:0.3px;
}
body.light-mode .recap-progress-label{ color:rgba(0,0,0,0.65); }
.recap-progress-pts{
  font-size:11px; font-weight:700;
  letter-spacing:0.3px;
}
.recap-progress-pts.free{ color:rgba(212,148,90,0.6); }
.recap-progress-pts.cable{ color:rgba(126,181,226,0.6); }
.recap-progress-track{
  width:100%; height:6px;
  background:rgba(255,255,255,0.06);
  border-radius:3px;
  overflow:hidden;
}
body.light-mode .recap-progress-track{
  background:rgba(0,0,0,0.05);
}
.recap-progress-fill{
  height:100%;
  border-radius:3px;
  transition:width 0.8s cubic-bezier(0.25,1,0.5,1) 0.5s;
}
.recap-progress-fill.free{ background:rgba(212,148,90,0.5); }
.recap-progress-fill.cable{ background:rgba(126,181,226,0.5); }

/* Motivational message */
.recap-message{
  font-size:14px; font-weight:500;
  color:rgba(255,255,255,0.25);
  font-style:italic;
  letter-spacing:0.2px;
  animation:recapFadeUp 0.4s ease 0.5s both;
}
body.light-mode .recap-message{ color:rgba(0,0,0,0.65); }

@keyframes recapFadeUp{
  0%{ transform:translateY(12px); opacity:0; }
  100%{ transform:translateY(0); opacity:1; }
}

/* ── Recap Exercise Breakdown ── */
.recap-exercises{
  width:100%; max-width:340px;
  margin:20px auto 0;
  animation:recapFadeUp 0.4s ease 0.45s both;
}
.recap-ex-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.recap-ex-title{
  font-size:11px; font-weight:800;
  letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,0.3);
}
body.light-mode .recap-ex-title{ color:rgba(0,0,0,0.25); }
.recap-ex-count{
  font-size:11px; font-weight:700;
  color:rgba(255,255,255,0.2);
}
body.light-mode .recap-ex-count{ color:rgba(0,0,0,0.55); }

.recap-ex-list{
  display:flex; flex-direction:column;
  gap:3px;
}
.recap-ex-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,0.025);
}
body.light-mode .recap-ex-row{ background:rgba(0,0,0,0.02); }

.recap-ex-num{
  width:26px; height:26px; min-width:26px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800;
  background:rgba(255,255,255,0.04);
  border:1.5px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.3);
  flex-shrink:0;
}
.recap-ex-row.done .recap-ex-num{
  background:rgba(212,148,90,0.1);
  border-color:rgba(212,148,90,0.25);
  color:rgba(212,148,90,0.8);
}
.recap-ex-row.done.cable .recap-ex-num{
  background:rgba(126,181,226,0.1);
  border-color:rgba(126,181,226,0.25);
  color:rgba(126,181,226,0.8);
}
.recap-ex-row.has-pr .recap-ex-num{
  border-color:rgba(212,188,138,0.3);
}
body.light-mode .recap-ex-num{
  background:rgba(0,0,0,0.02);
  border-color:rgba(0,0,0,0.08);
  color:rgba(0,0,0,0.25);
}
body.light-mode .recap-ex-row.done .recap-ex-num{
  background:rgba(34,160,94,0.06);
  border-color:rgba(34,160,94,0.2);
  color:rgba(34,160,94,0.7);
}

.recap-ex-info{ flex:1; min-width:0; }
.recap-ex-name{
  font-size:13px; font-weight:700;
  color:rgba(255,255,255,0.8);
  line-height:1.3;
}
body.light-mode .recap-ex-name{ color:rgba(0,0,0,0.7); }
.recap-ex-meta{
  font-size:11px; font-weight:600;
  color:rgba(255,255,255,0.3);
  margin-top:1px;
}
body.light-mode .recap-ex-meta{ color:rgba(0,0,0,0.25); }

.recap-ex-right{
  display:flex; flex-direction:column;
  align-items:flex-end; gap:2px;
  flex-shrink:0;
}
.recap-ex-best{
  font-size:13px; font-weight:700;
  color:rgba(255,255,255,0.6);
  font-variant-numeric:tabular-nums;
}
body.light-mode .recap-ex-best{ color:rgba(0,0,0,0.7); }
.recap-ex-best.pr-val{
  color:rgba(212,188,138,0.9);
}
body.light-mode .recap-ex-best.pr-val{ color:rgba(180,140,50,0.85); }

.recap-ex-badges{
  display:flex; gap:4px; align-items:center;
}
.recap-ex-badge{
  font-size:8px; font-weight:800;
  letter-spacing:0.8px; text-transform:uppercase;
  padding:2px 6px;
  border-radius:6px;
}
.recap-ex-badge.badge-done{
  background:rgba(212,148,90,0.1);
  color:rgba(212,148,90,0.7);
}
.recap-ex-badge.badge-done.cable{
  background:rgba(126,181,226,0.1);
  color:rgba(126,181,226,0.7);
}
.recap-ex-badge.badge-pr{
  background:rgba(212,188,138,0.1);
  color:rgba(212,188,138,0.8);
}
.recap-ex-badge.badge-skip{
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.2);
}
body.light-mode .recap-ex-badge.badge-done{
  background:rgba(34,160,94,0.06);
  color:rgba(34,160,94,0.65);
}
body.light-mode .recap-ex-badge.badge-pr{
  background:rgba(180,140,50,0.06);
  color:rgba(180,140,50,0.7);
}
body.light-mode .recap-ex-badge.badge-skip{
  background:rgba(0,0,0,0.03);
  color:rgba(0,0,0,0.55);
}



/* ── Banner Duration: Est + Actual ────────────────────────── */
.banner-dur-actual{
  font-size:10px;
  font-weight:600;
  color:rgba(212,148,90,0.7);
  margin-left:4px;
}
.banner-dur-actual.cable{
  color:rgba(126,181,226,0.7);
}
.banner-dur-actual:empty{
  display:none;
}
body.light-mode .banner-dur-actual{
  color:rgba(60,175,130,0.8);
}
body.light-mode .banner-dur-actual.cable{
  color:rgba(70,140,230,0.8);
}









/* ╔══════════════════════════════════════════════════════════════╗
   ║          GRIT & GLASS — HEAVY FROSTED OVERLAY SYSTEM       ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── NOISE TEXTURE via CSS gradient (no external assets) ───── */
@keyframes grainShift{
  0%,100%{ transform:translate(0,0); }
  10%{ transform:translate(-2%,-2%); }
  30%{ transform:translate(3%,1%); }
  50%{ transform:translate(-1%,3%); }
  70%{ transform:translate(2%,-1%); }
  90%{ transform:translate(-3%,2%); }
}

/* ── UNIFIED PANEL — solid surface ────────────────────────── */
.unified-exercise-panel{
  background:var(--surface1) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  border-radius:24px !important;
  box-shadow:0 4px 24px rgba(0,0,0,0.3) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:visible !important;
  position:relative !important;
}
.unified-exercise-panel::before{
  display:none !important;
}
.unified-exercise-panel::after{
  display:none !important;
}
body.light-mode .unified-exercise-panel{
  background:var(--surface1) !important;
  border-color:rgba(0,0,0,0.06) !important;
  box-shadow:0 4px 24px rgba(0,0,0,0.08) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.light-mode .unified-exercise-panel::before{
  display:none !important;
}
body.light-mode .unified-exercise-panel::after{
  display:none !important;
}

/* ── INPUT ROW — solid surface card ────────────────── */
.compact-set-row{
  background:var(--surface2) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:var(--radius-lg) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.2) !important;
  padding:20px 20px !important;
  position:relative !important;
  overflow:visible !important;
}
.compact-set-row::before{
  display:none !important;
}
.compact-set-row::after{
  display:none !important;
}
body.light-mode .compact-set-row{
  background:var(--surface2) !important;
  border-color:rgba(0,0,0,0.08) !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.06) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.light-mode .compact-set-row::before{
  display:none !important;
}

/* ── SUPERSET INPUT ROW — solid surface ─────────────────── */
.superset-set-inputs{
  background:var(--surface2) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:var(--radius-lg) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.2) !important;
  padding:20px 16px !important;
  position:relative !important;
  overflow:visible !important;
}
.superset-set-inputs::before{
  display:none !important;
}
body.light-mode .superset-set-inputs{
  background:var(--surface2) !important;
  border-color:rgba(0,0,0,0.08) !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.06) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ── INPUT FIELDS — solid wells ────────────────────────── */
.set-input{
  background:var(--surface1) !important;
  border:1.5px solid rgba(255,255,255,0.1) !important;
  border-radius:var(--radius-md) !important;
  box-shadow:0 1px 4px rgba(0,0,0,0.3) inset !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:rgba(255,255,255,0.95) !important;
  font-size:var(--text-xl) !important;
  font-weight:700 !important;
  width:76px !important;
  padding:14px 4px !important;
  text-shadow:none !important;
}
.set-input.zero-value{
  background:rgba(17,17,22,0.6) !important;
  border:1.5px dashed rgba(255,255,255,0.08) !important;
  color:rgba(255,255,255,0.15) !important;
  box-shadow:none !important;
}
.set-input.free:not(.zero-value){
  background:rgba(212,148,90,0.08) !important;
  border:1.5px solid rgba(212,148,90,0.3) !important;
  box-shadow:0 1px 4px rgba(0,0,0,0.2) inset !important;
  color:rgba(212,148,90,0.95) !important;
}
.set-input.cable:not(.zero-value){
  background:rgba(126,181,226,0.08) !important;
  border:1.5px solid rgba(126,181,226,0.3) !important;
  box-shadow:0 1px 4px rgba(0,0,0,0.2) inset !important;
  color:rgba(126,181,226,0.95) !important;
}
.superset-input{
  background:var(--surface1) !important;
  border:1.5px solid rgba(255,255,255,0.1) !important;
  border-radius:var(--radius-md) !important;
  box-shadow:0 1px 4px rgba(0,0,0,0.3) inset !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:rgba(255,255,255,0.95) !important;
  font-size:var(--text-xl) !important;
  font-weight:700 !important;
  text-shadow:none !important;
}
body.light-mode .set-input{
  background:#FFFFFF !important;
  border-color:rgba(0,0,0,0.12) !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.08) inset !important;
  text-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:rgba(0,0,0,0.85) !important;
}
body.light-mode .superset-input{
  background:#FFFFFF !important;
  border-color:rgba(0,0,0,0.12) !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.08) inset !important;
  text-shadow:none !important;
  color:rgba(0,0,0,0.85) !important;
}

/* ── STEPPER BUTTONS — solid tactile ─────────────── */
.stepper-btn{
  background:var(--surface3) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  border-radius:var(--radius-md) !important;
  box-shadow:0 2px 4px rgba(0,0,0,0.2) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:rgba(255,255,255,0.7) !important;
  width:48px !important;
  height:48px !important;
  font-size:24px !important;
}
.stepper-btn:active{
  background:rgba(255,255,255,0.15) !important;
  border-color:rgba(255,255,255,0.2) !important;
  color:rgba(255,255,255,0.95) !important;
  box-shadow:0 0 0 rgba(0,0,0,0) !important;
  transform:scale(0.9) !important;
}
.superset-set-input-group .stepper-btn{
  width:42px !important;
  height:42px !important;
  background:var(--surface3) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:12px !important;
  box-shadow:0 2px 4px rgba(0,0,0,0.15) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:rgba(255,255,255,0.6) !important;
  font-size:22px !important;
}
body.light-mode .stepper-btn{
  background:var(--surface3) !important;
  border:1px solid rgba(0,0,0,0.1) !important;
  box-shadow:0 2px 4px rgba(0,0,0,0.06) !important;
  color:rgba(0,0,0,0.7) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-radius:var(--radius-md) !important;
}
body.light-mode .stepper-btn:active{
  background:rgba(0,0,0,0.1) !important;
  color:rgba(0,0,0,0.8) !important;
}

/* ── SET DOTS — segmented progress bar ────────────────────── */
.set-dot{
  background:transparent !important;
  border:none !important;
  border-radius:10px !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  font-size:13px !important;
  color:rgba(255,255,255,0.3) !important;
}
.set-dot.active{
  background:var(--interactive) !important;
  border:none !important;
  color:rgba(255,255,255,0.95) !important;
  box-shadow:none !important;
  border-radius:10px !important;
  font-size:14px !important;
  font-weight:800 !important;
}
.set-dot.complete:not(.active){
  background:transparent !important;
  border:none !important;
  color:var(--accent-orange) !important;
}
.set-dot.complete.cable:not(.active){
  background:transparent !important;
  border:none !important;
  color:var(--blue) !important;
}
.set-dot.active.complete{
  background:rgba(212,148,90,0.15) !important;
  border:none !important;
  color:var(--accent-orange) !important;
  box-shadow:none !important;
}
.set-dot.active.complete.cable{
  background:rgba(126,181,226,0.15) !important;
  border:none !important;
  color:var(--blue) !important;
  box-shadow:none !important;
}

/* ── HERO IMAGE CARDS — clean frames ────────────── */
.card-hero-image-wrap{
  border:1px solid rgba(255,255,255,0.1) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.25) !important;
  overflow:hidden !important;
}
.card-hero-muscle-panel{
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:var(--radius-lg) !important;
  background:var(--surface2) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 4px 16px rgba(0,0,0,0.2) !important;
  position:relative;
  overflow:hidden !important;
}
.card-hero-muscle-panel::before{
  display:none !important;
}
body.light-mode .card-hero-image-wrap{
  border-color:rgba(0,0,0,0.08) !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.08) !important;
}
body.light-mode .card-hero-muscle-panel{
  background:var(--surface2) !important;
  border-color:rgba(0,0,0,0.06) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ── EXERCISE TABS — solid chips ───────────────────────── */
.exercise-tab{
  background:var(--surface2) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:var(--radius-md) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.12) !important;
}
.exercise-tab.tab-selected{
  background:var(--surface3) !important;
  border-color:rgba(255,255,255,0.15) !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.2) !important;
}

/* ── BOTTOM MENU BAR — heavy frosted glass, wide & low ──── */
.bottom-menu-bar{
  position:fixed !important;
  bottom:0 !important;
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  background:#121218 !important;
  border:none !important;
  border-top:1px solid rgba(255,255,255,0.1) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -2px 20px rgba(0,0,0,0.4) !important;
  border-radius:0 !important;
  padding:2px 6px calc(2px + env(safe-area-inset-bottom)) 6px !important;
  gap:0 !important;
}
body.light-mode .bottom-menu-bar{
  background:#FFFFFF !important;
  border-top-color:rgba(0,0,0,0.08) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 -2px 16px rgba(0,0,0,0.08) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ── BOTTOM BAR — Bigger ring + timer ───────────────────── */
.dock-unified-btn{
  gap:6px !important;
  padding:6px 16px !important;
  min-height:44px !important;
}
.dock-chip-ring{
  width:32px !important;
  height:32px !important;
}
.dock-chip-ring .ring-bg{ stroke-width:3 !important; }
.dock-chip-ring .ring-fill{ stroke-width:3 !important; stroke-dasharray:69.115 !important; }
.dock-unified-pct{
  font-size:16px !important;
  font-weight:800 !important;
}
.dock-unified-clock{
  width:18px !important;
  height:18px !important;
}
.dock-unified-time{
  font-size:16px !important;
  font-weight:800 !important;
}
.dock-unified-btn.live .dock-chip-ring{
  width:36px !important;
  height:36px !important;
}
.dock-unified-btn.live .dock-unified-time{
  font-size:18px !important;
}
.dock-unified-btn.live .dock-unified-pct{
  font-size:17px !important;
}

/* ── FLOATING STATUS BAR — frosted glass with readable ring ── */
.floating-status-bar{
  background:#0c0c12 !important;
  border:1.5px solid rgba(255,255,255,0.1) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 8px 32px rgba(0,0,0,0.4) !important;
  border-radius:20px !important;
  padding:4px 14px !important;
}
body.light-mode .floating-status-bar{
  background:rgba(255,255,255,0.6) !important;
  border-color:rgba(255,255,255,0.5) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.8) inset, 0 8px 32px rgba(0,0,0,0.08) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* Ring track visible on dark glass */
.ring-bg{
  stroke:rgba(255,255,255,0.12) !important;
  stroke-width:3.5 !important;
}
body.light-mode .ring-bg{
  stroke:rgba(0,0,0,0.55) !important;
}
/* Ring fill glow */
.menu-bar-ring .ring-fill{
  stroke-width:3.5 !important;
  filter:drop-shadow(0 0 6px rgba(212,148,90,0.4)) !important;
}
.menu-bar-progress.cable .menu-bar-ring .ring-fill{
  filter:drop-shadow(0 0 6px rgba(126,181,226,0.4)) !important;
}
/* Percentage text readable on dark glass */
.menu-bar-pct{
  color:rgba(255,255,255,0.92) !important;
  text-shadow:0 1px 3px rgba(0,0,0,0.4) !important;
  font-size:11px !important;
  font-weight:800 !important;
}
body.light-mode .menu-bar-pct{
  color:rgba(0,0,0,0.75) !important;
  text-shadow:none !important;
}
/* Timer text readable on dark glass */
.menu-bar-timer-time{
  color:rgba(255,255,255,0.55) !important;
}
body.light-mode .menu-bar-timer-time{
  color:rgba(0,0,0,0.65) !important;
}
.menu-bar-timer.running .menu-bar-timer-time{
  color:var(--accent-orange) !important;
  text-shadow:0 0 8px rgba(212,148,90,0.3) !important;
}
.menu-bar-timer.running.cable .menu-bar-timer-time{
  color:var(--blue) !important;
  text-shadow:0 0 8px rgba(126,181,226,0.3) !important;
}
.menu-bar-timer.paused .menu-bar-timer-time{
  color:#C8A035 !important;
  text-shadow:0 0 8px rgba(200,160,53,0.25) !important;
  animation:pausedPulse 1.5s ease-in-out infinite !important;
}
body.light-mode .menu-bar-timer.paused .menu-bar-timer-time{
  color:#9A7B20 !important;
  text-shadow:none !important;
}
body.light-mode .menu-bar-timer.running .menu-bar-timer-time{
  color:rgba(60,175,120,0.9) !important;
  text-shadow:none !important;
}
body.light-mode .menu-bar-timer.running.cable .menu-bar-timer-time{
  color:rgba(80,140,210,0.9) !important;
  text-shadow:none !important;
}

/* ── EXPANDED MENU ITEMS — frosted panel ─────────────────── */
.menu-group-items{
  background:#121218 !important;
  border:1.5px solid rgba(255,255,255,0.1) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -12px 40px rgba(0,0,0,0.4),
    0 4px 12px rgba(0,0,0,0.2) !important;
  border-radius:18px !important;
}
body.light-mode .menu-group-items{
  background:#FFFFFF !important;
  border-color:rgba(0,0,0,0.65) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.8) inset, 0 -12px 40px rgba(0,0,0,0.08) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ── ACTIVE REST INDICATOR — solid bar ─────────────────── */
.active-rest-bar{
  background:rgba(255,255,255,0.04) !important;
  border:1.5px solid rgba(255,255,255,0.08) !important;
  border-radius:16px !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* ── NUMBER BADGE — round circle with white outline ────────── */
.ex-number-badge{
  background:transparent !important;
  border:2px solid rgba(255,255,255,0.8) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  border-radius:50% !important;
  width:28px !important;
  min-width:28px !important;
  height:28px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,0.6) !important;
  aspect-ratio:1 !important;
  padding:0 !important;
}

/* ── COMPLETION — elevated glass glow ────────────────────── */
.set-complete .compact-set-row{
  border:2px solid rgba(212,148,90,0.35) !important;
  box-shadow:
    0 0 20px rgba(212,148,90,0.12),
    0 0 40px rgba(212,148,90,0.05),
    0 1px 0 rgba(212,148,90,0.15) inset,
    0 8px 32px rgba(0,0,0,0.15) !important;
}
.set-complete.cable .compact-set-row{
  border-color:rgba(126,181,226,0.35) !important;
  box-shadow:
    0 0 20px rgba(126,181,226,0.12),
    0 0 40px rgba(126,181,226,0.05),
    0 1px 0 rgba(126,181,226,0.15) inset,
    0 8px 32px rgba(0,0,0,0.15) !important;
}
.set-has-pr:not(.set-complete) .compact-set-row{
  border-color:rgba(212,188,138,0.3) !important;
  box-shadow:
    0 0 16px rgba(212,188,138,0.1),
    0 1px 0 rgba(212,188,138,0.1) inset,
    0 8px 32px rgba(0,0,0,0.15) !important;
}

/* ── WATCH & LEARN — glass divider ───────────────────────── */
.watch-learn-title{
  font-size:8px !important;
  letter-spacing:5px !important;
  color:rgba(255,255,255,0.12) !important;
  margin-top:20px !important;
  margin-bottom:12px !important;
  position:relative;
  padding:0 40px !important;
}
.watch-learn-title::before,
.watch-learn-title::after{
  content:'';
  position:absolute;
  top:50%;
  height:1px;
  width:30px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
.watch-learn-title::before{ left:0; }
.watch-learn-title::after{ right:0; }

/* ── CARD HERO — wider, more dramatic ────────────────────── */
.card-hero-row{
  width:calc(100% - 32px) !important;
  gap:10px !important;
  margin:0 auto 20px !important;
}

/* ── PR ROW — glass badge ────────────────────────────────── */
.pr-row-compact.pr-section.pr-inline{
  background:rgba(255,255,255,0.03) !important;
  border-radius:10px !important;
  padding:5px 10px !important;
  margin:2px 0 0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.pr-row-compact.has-pr{
  background:rgba(212,188,138,0.06) !important;
  border:1px solid rgba(212,188,138,0.12) !important;
  box-shadow:0 0 12px rgba(212,188,138,0.06) !important;
}

/* ── PAGE BACKGROUND GRAIN OVERLAY ───────────────────────── */
body::after{
  content:'';
  position:fixed;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size:256px 256px;
  pointer-events:none;
  z-index:10000;
  mix-blend-mode:overlay;
  opacity:0.5;
  animation:grainShift 12s steps(8) infinite;
}
body.light-mode::after{
  opacity:0.25;
}

/* ── MEDIA STRIP — glass tint ────────────────────────────── */
.ex-media-strip{
  padding:14px 16px 8px !important;
  position:relative !important;
}

/* ── INNER GLOW ON EXPANDED CARDS ────────────────────────── */
.ex-card.expanded.all-complete:not(.has-pr){
  box-shadow:
    inset 0 0 0 1px rgba(212,148,90,0.2),
    0 0 30px rgba(212,148,90,0.06),
    0 0 60px rgba(212,148,90,0.03) !important;
  background:rgba(212,148,90,0.02) !important;
}
.ex-card.expanded.all-complete:not(.has-pr)[data-week-type="cable"]{
  box-shadow:
    inset 0 0 0 1px rgba(126,181,226,0.2),
    0 0 30px rgba(126,181,226,0.06),
    0 0 60px rgba(126,181,226,0.03) !important;
  background:rgba(126,181,226,0.02) !important;
}
.ex-card.expanded.all-complete.has-pr{
  box-shadow:
    inset 0 0 0 1px rgba(212,148,90,0.15),
    0 0 30px rgba(212,188,138,0.06),
    0 0 60px rgba(212,148,90,0.03) !important;
}

/* ── SUPERSET COMBINED CARD — glass container ────────────── */
.superset-combined-card{
  background:rgba(255,255,255,0.03) !important;
  border:1.5px solid rgba(255,255,255,0.08) !important;
  border-radius:24px !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 8px 40px rgba(0,0,0,0.2),
    0 2px 8px rgba(0,0,0,0.15) !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║    BANNER BUTTONS & POPUP MENUS — FUTURISTIC GLASS v2      ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── STATS ROW — solid tray with chips ─────────────── */
.banner-stats-row{
  background:rgba(255,255,255,0.035) !important;
  border:1.5px solid rgba(255,255,255,0.07) !important;
  border-radius:16px !important;
  padding:4px !important;
  gap:3px !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 2px 12px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  margin-top:14px !important;
  overflow:visible !important;
}
body.light-mode .banner-stats-row{
  background:rgba(0,0,0,0.025) !important;
  border-color:rgba(0,0,0,0.06) !important;
  box-shadow:0 2px 12px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

/* ── STAT CHIPS — individual frosted buttons ───────────────── */
.banner-stat{
  padding:8px 6px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,0.03) !important;
  border:1px solid rgba(255,255,255,0.04) !important;
  transition:all 0.15s cubic-bezier(0.25,1,0.5,1) !important;
  gap:5px !important;
}
.banner-stat:active{
  background:rgba(255,255,255,0.1) !important;
  border-color:rgba(255,255,255,0.1) !important;
  transform:scale(0.95);
}
body.light-mode .banner-stat{
  background:rgba(255,255,255,0.4) !important;
  border-color:rgba(0,0,0,0.04) !important;
}
body.light-mode .banner-stat:active{
  background:rgba(0,0,0,0.06) !important;
}

.banner-stat-divider{
  width:1px !important;
  height:14px !important;
  background:rgba(255,255,255,0.05) !important;
}
body.light-mode .banner-stat-divider{
  background:rgba(0,0,0,0.05) !important;
}

.banner-stat-icon{
  width:14px !important;
  height:14px !important;
  stroke:rgba(255,255,255,0.3) !important;
  stroke-width:2.5 !important;
}
body.light-mode .banner-stat-icon{
  stroke:rgba(0,0,0,0.25) !important;
}

.banner-stat-value{
  font-size:12px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.55) !important;
  letter-spacing:-0.3px !important;
}
body.light-mode .banner-stat-value{
  color:rgba(0,0,0,0.65) !important;
}

/* ── PR COUNT CHIP — refined gold badge ────────────────────── */
.banner-pr-count{
  font-size:12px !important;
  gap:3px !important;
}
.banner-pr-count .banner-pr-trophy{
  width:13px !important;
  height:13px !important;
}

/* ── CHECKLIST BUTTON — glass icon chip ────────────────────── */
.banner-checklist-btn{
  opacity:0.7 !important;
}
.banner-checklist-btn svg{
  width:18px !important;
  height:10px !important;
  stroke:rgba(255,255,255,0.5) !important;
}
body.light-mode .banner-checklist-btn svg{
  stroke:rgba(0,0,0,0.55) !important;
}
.checklist-count{
  font-size:10px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,0.35) !important;
}
body.light-mode .checklist-count{
  color:rgba(0,0,0,0.6) !important;
}

/* ── START WORKOUT CTA — futuristic glass pulse ────────────── */
.banner-start-workout{
  margin-top:10px !important;
  padding:13px 0 !important;
  border-radius:16px !important;
  font-size:0 !important;
  background:rgba(212,148,90,0.06) !important;
  border:1.5px solid rgba(212,148,90,0.18) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:
    0 0 24px rgba(212,148,90,0.06),
    inset 0 1px 0 rgba(212,148,90,0.08) !important;
}
.banner-start-workout span{
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:3px !important;
}
.banner-start-workout svg{
  filter:drop-shadow(0 0 6px rgba(212,148,90,0.4)) !important;
}
.banner-start-workout:active{
  background:rgba(212,148,90,0.14) !important;
  box-shadow:0 0 36px rgba(212,148,90,0.1), inset 0 1px 0 rgba(212,148,90,0.15) !important;
}
.banner-start-workout.cable{
  background:rgba(126,181,226,0.06) !important;
  border-color:rgba(126,181,226,0.18) !important;
  box-shadow:0 0 24px rgba(126,181,226,0.06), inset 0 1px 0 rgba(126,181,226,0.08) !important;
}
.banner-start-workout.cable:active{
  background:rgba(126,181,226,0.14) !important;
}
body.light-mode .banner-start-workout{
  background:rgba(212,148,90,0.05) !important;
  border-color:rgba(212,148,90,0.18) !important;
  box-shadow:0 0 20px rgba(212,148,90,0.04) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PR POPUP — futuristic glass panel
   ═══════════════════════════════════════════════════════════════ */
.pr-popup-overlay{
  background:rgba(0,0,0,0.6) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.pr-popup{
  background:#101016 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1.5px solid rgba(255,255,255,0.1) !important;
  border-radius:28px !important;
  padding:28px 24px 20px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 24px 80px rgba(0,0,0,0.5),
    0 8px 24px rgba(0,0,0,0.3) !important;
  position:relative;
  overflow:hidden;
}
.pr-popup::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:28px;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(212,188,138,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 100%, rgba(255,255,255,0.02) 0%, transparent 40%);
  pointer-events:none;
}
.pr-popup::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:28px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size:150px 150px;
  opacity:0.5;
  pointer-events:none;
  mix-blend-mode:overlay;
}
body.light-mode .pr-popup{
  background:#fafafc !important;
  border-color:rgba(255,255,255,0.5) !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.8) inset, 0 24px 80px rgba(0,0,0,0.15) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.pr-popup-title{
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:2px !important;
  color:rgba(255,255,255,0.6) !important;
  margin-bottom:14px !important;
  gap:8px !important;
  position:relative;
  z-index:1;
}
.pr-popup-title svg{
  width:20px !important;
  height:20px !important;
  filter:drop-shadow(0 0 6px rgba(212,188,138,0.4));
}
body.light-mode .pr-popup-title{
  color:rgba(0,0,0,0.7) !important;
}
.pr-popup-subtitle{
  font-size:12px !important;
  color:rgba(255,255,255,0.25) !important;
  margin-bottom:10px !important;
  position:relative;
  z-index:1;
}
.pr-popup-item{
  display:flex !important;
  align-items:center !important;
  background:rgba(255,255,255,0.03) !important;
  border:1px solid rgba(255,255,255,0.05) !important;
  border-radius:14px !important;
  border-bottom:1px solid rgba(255,255,255,0.07) !important;
  padding:12px 14px !important;
  margin:3px 0 !important;
  gap:0 !important;
  transition:all 0.15s ease !important;
  position:relative;
  z-index:1;
}
.pr-popup-item:active{
  background:rgba(255,255,255,0.08) !important;
  border-color:rgba(255,255,255,0.1) !important;
  transform:scale(0.98);
}
body.light-mode .pr-popup-item{
  background:rgba(0,0,0,0.025) !important;
  border-color:rgba(0,0,0,0.04) !important;
}
body.light-mode .pr-popup-item:active{
  background:rgba(0,0,0,0.05) !important;
}
.pr-popup-name{
  font-size:14px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.65) !important;
}
.pr-popup-badge{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,0.05) !important;
  font-size:12px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,0.3) !important;
  border:1px solid rgba(255,255,255,0.04) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  transition:all 0.2s ease !important;
  font-variant-numeric:tabular-nums;
  margin-right:10px !important;
}
.pr-popup-badge.completed{
  background:rgba(212,148,90,0.1) !important;
  color:rgba(212,148,90,0.85) !important;
  border-color:rgba(212,148,90,0.12) !important;
}
.pr-popup-badge.completed.cable{
  background:rgba(126,181,226,0.1) !important;
  color:rgba(126,181,226,0.85) !important;
  border-color:rgba(126,181,226,0.12) !important;
}
.pr-popup-badge.pr{
  box-shadow:inset 0 0 0 1.5px rgba(212,188,138,0.6) !important;
}
body.light-mode .pr-popup-badge{
  background:rgba(0,0,0,0.035) !important;
  color:rgba(0,0,0,0.25) !important;
  border-color:rgba(0,0,0,0.04) !important;
}
body.light-mode .pr-popup-badge.completed{
  background:rgba(212,148,90,0.12) !important;
  color:rgba(60,160,110,0.85) !important;
}
body.light-mode .pr-popup-badge.completed.cable{
  background:rgba(126,181,226,0.12) !important;
  color:rgba(70,140,200,0.85) !important;
}
body.light-mode .pr-popup-badge.pr{
  box-shadow:inset 0 0 0 1.5px rgba(180,155,100,0.7) !important;
}
body.light-mode .pr-popup-name{
  color:rgba(0,0,0,0.6) !important;
}
.pr-popup-val{
  font-size:15px !important;
  font-weight:800 !important;
  text-shadow:0 0 12px rgba(212,188,138,0.2);
}
.pr-popup-empty{
  color:rgba(255,255,255,0.2) !important;
  position:relative;
  z-index:1;
}

/* ═══════════════════════════════════════════════════════════════
   UNIFIED EXERCISE SHEET — single tabbed bottom sheet
   ═══════════════════════════════════════════════════════════════ */
.unified-sheet-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  z-index:600;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.25s ease, visibility 0.25s ease;
}
.unified-sheet-overlay.open{ opacity:1; visibility:visible; }
body.light-mode .unified-sheet-overlay{
  background:rgba(0,0,0,0.25);
}
.unified-sheet{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  max-height:100dvh;
  height:100dvh;
  background:#101016;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-top:none;
  border-radius:0;
  z-index:601;
  transform:translateY(100%);
  transition:transform 0.35s cubic-bezier(0.25,1,0.5,1);
  display:flex;
  flex-direction:column;
  box-shadow:none;
}
.unified-sheet.open{
  transform:translateY(0);
}
body.light-mode .unified-sheet{
  background:#fafafc;
  box-shadow:none;
}
.unified-sheet-handle{
  display:flex;
  justify-content:center;
  padding:calc(10px + env(safe-area-inset-top)) 0 4px;
}
.unified-sheet-handle-bar{
  width:36px;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.15);
}
body.light-mode .unified-sheet-handle-bar{
  background:rgba(0,0,0,0.12);
}
.unified-sheet-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 20px 0;
  flex-shrink:0;
}
.unified-sheet-tabs{
  display:flex;
  gap:2px;
  background:rgba(255,255,255,0.04);
  border-radius:12px;
  padding:3px;
  border:1px solid rgba(255,255,255,0.04);
}
body.light-mode .unified-sheet-tabs{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.04);
}
.unified-tab{
  padding:8px 16px;
  border-radius:10px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,0.4);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.3px;
  cursor:pointer;
  transition:all 0.2s ease;
  -webkit-tap-highlight-color:transparent;
  white-space:nowrap;
}
.unified-tab:active{ transform:scale(0.95); }
.unified-tab.active{
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.85);
  box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
body.light-mode .unified-tab{
  color:rgba(0,0,0,0.35);
}
body.light-mode .unified-tab.active{
  background:rgba(255,255,255,0.7);
  color:rgba(0,0,0,0.8);
  box-shadow:0 1px 4px rgba(0,0,0,0.08);
}
.unified-sheet-close{
  width:32px;
  height:32px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.35);
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all 0.15s ease;
  -webkit-tap-highlight-color:transparent;
  flex-shrink:0;
}
.unified-sheet-close:active{
  background:rgba(255,255,255,0.12);
  transform:scale(0.9);
}
body.light-mode .unified-sheet-close{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.04);
  color:rgba(0,0,0,0.6);
}
.unified-sheet-subtitle{
  padding:8px 20px 4px;
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.3);
  letter-spacing:0.5px;
}
body.light-mode .unified-sheet-subtitle{
  color:rgba(0,0,0,0.6);
}
.unified-sheet-body{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:4px 16px 20px;
  overscroll-behavior:contain;
}
.unified-tab-panel{
  display:none;
  flex-direction:column;
  gap:4px;
}
.unified-tab-panel.active{
  display:flex;
}
/* Reuse ws-item styles inside unified sheet */
.unified-tab-panel .ws-item{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:14px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.15s ease;
}
.unified-tab-panel .ws-item-details{
  display:block !important;
}
.unified-tab-panel .ws-item-info{
  min-width:0; flex:1;
}
.ws-item-sets-logged{
  display:flex; flex-wrap:wrap; align-items:center; gap:3px 2px;
  margin-top:4px; font-size:10px; font-weight:600;
  color:rgba(255,255,255,0.3);
}
.ws-set-sep{
  color:rgba(255,255,255,0.1); margin:0 2px; font-size:8px;
}
body.light-mode .ws-item-sets-logged{ color:rgba(0,0,0,0.6); }
body.light-mode .ws-set-sep{ color:rgba(0,0,0,0.65); }
.unified-tab-panel .ws-item:active{
  background:rgba(255,255,255,0.08);
  transform:scale(0.98);
}
body.light-mode .unified-tab-panel .ws-item{
  background:rgba(0,0,0,0.025);
  border-color:rgba(0,0,0,0.04);
}
/* PR items inside unified sheet */
.unified-tab-panel .pr-popup-item{
  display:flex;
  align-items:center;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:14px;
  padding:12px 14px;
  gap:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.15s ease;
}
.unified-tab-panel .pr-popup-item:active{
  background:rgba(255,255,255,0.08);
  transform:scale(0.98);
}
body.light-mode .unified-tab-panel .pr-popup-item{
  background:rgba(0,0,0,0.025);
  border-color:rgba(0,0,0,0.04);
}
/* Progress ring in Progress tab header */
.unified-progress-ring{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:8px 0 12px;
}
.unified-progress-svg{
  width:48px;
  height:48px;
  transform:rotate(-90deg);
}
.unified-progress-svg .ring-bg{
  fill:none;
  stroke:rgba(255,255,255,0.06);
  stroke-width:4;
}
.unified-progress-svg .ring-fill{
  fill:none;
  stroke:var(--accent-orange);
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:113;
  stroke-dashoffset:113;
  transition:stroke-dashoffset 0.5s ease;
}
.unified-progress-svg .ring-fill.cable{
  stroke:var(--blue);
}
body.light-mode .unified-progress-svg .ring-bg{
  stroke:rgba(0,0,0,0.06);
}
.unified-progress-pct{
  font-size:20px;
  font-weight:800;
  color:rgba(255,255,255,0.7);
}
body.light-mode .unified-progress-pct{
  color:rgba(0,0,0,0.6);
}
.unified-progress-label{
  font-size:11px;
  color:rgba(255,255,255,0.3);
  font-weight:600;
}
body.light-mode .unified-progress-label{
  color:rgba(0,0,0,0.6);
}

/* ═══════════════════════════════════════════════════════════════
   WORKOUT SUMMARY MODAL — futuristic glass panel
   ═══════════════════════════════════════════════════════════════ */
.workout-summary-modal{
  background:#101016 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
body.light-mode .workout-summary-modal{
  background:#fafafc !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.workout-summary-modal-header{
  padding:calc(22px + env(safe-area-inset-top)) 22px 14px !important;
  border-bottom:1px solid rgba(255,255,255,0.06) !important;
}
body.light-mode .workout-summary-modal-header{
  border-bottom-color:rgba(0,0,0,0.06) !important;
}
.workout-summary-modal-title{
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,0.6) !important;
}
body.light-mode .workout-summary-modal-title{
  color:rgba(0,0,0,0.7) !important;
}
.workout-summary-modal-close{
  width:32px !important;
  height:32px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  color:rgba(255,255,255,0.35) !important;
  font-size:16px !important;
  transition:all 0.15s ease !important;
}
.workout-summary-modal-close:active{
  background:rgba(255,255,255,0.12) !important;
  transform:scale(0.9);
}
body.light-mode .workout-summary-modal-close{
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(0,0,0,0.04) !important;
  color:rgba(0,0,0,0.6) !important;
}
.workout-summary-modal-list{
  padding:8px 14px 16px !important;
  gap:4px !important;
}
.ws-item{
  background:rgba(255,255,255,0.03) !important;
  border:1px solid rgba(255,255,255,0.05) !important;
  border-radius:14px !important;
  padding:12px 14px !important;
  gap:10px !important;
  transition:all 0.15s ease !important;
}
.ws-item:active{
  background:rgba(255,255,255,0.08) !important;
  transform:scale(0.98);
}
body.light-mode .ws-item{
  background:rgba(0,0,0,0.025) !important;
  border-color:rgba(0,0,0,0.04) !important;
}
.ws-item-num{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,0.05) !important;
  font-size:12px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,0.3) !important;
  border:1px solid rgba(255,255,255,0.04) !important;
  transition:all 0.2s ease !important;
  font-variant-numeric:tabular-nums;
}
.ws-item-num.completed{
  background:rgba(212,148,90,0.1) !important;
  color:rgba(212,148,90,0.85) !important;
  border-color:rgba(212,148,90,0.12) !important;
}
.ws-item-num.completed.cable{
  background:rgba(126,181,226,0.1) !important;
  color:rgba(126,181,226,0.85) !important;
  border-color:rgba(126,181,226,0.12) !important;
}
.ws-item-num.pr{
  box-shadow:inset 0 0 0 1.5px rgba(212,188,138,0.6) !important;
}
body.light-mode .ws-item-num{
  background:rgba(0,0,0,0.035) !important;
  color:rgba(0,0,0,0.25) !important;
  border-color:rgba(0,0,0,0.04) !important;
}
body.light-mode .ws-item-num.completed{
  background:rgba(212,148,90,0.12) !important;
  color:rgba(60,160,110,0.85) !important;
}
body.light-mode .ws-item-num.completed.cable{
  background:rgba(126,181,226,0.12) !important;
  color:rgba(70,140,200,0.85) !important;
}
body.light-mode .ws-item-num.pr{
  box-shadow:inset 0 0 0 1.5px rgba(180,155,100,0.7) !important;
}
.ws-item-name{
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:-0.2px !important;
}

/* ═══════════════════════════════════════════════════════════════
   REST DAY PILL — frosted glass capsule
   ═══════════════════════════════════════════════════════════════ */
.rest-day-pill{
  height:32px !important;
  border-radius:16px !important;
  border:1.5px solid rgba(255,255,255,0.08) !important;
  background:rgba(255,255,255,0.04) !important;
  padding:0 14px !important;
  gap:6px !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.rest-day-pill-moon{
  width:14px !important;
  height:14px !important;
  fill:rgba(255,255,255,0.4) !important;
}
.rest-day-pill-label{
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:1px !important;
  color:rgba(255,255,255,0.5) !important;
}
body.light-mode .rest-day-pill{
  border-color:rgba(0,0,0,0.08) !important;
  background:rgba(0,0,0,0.03) !important;
}
body.light-mode .rest-day-pill-moon{
  fill:rgba(0,0,0,0.35) !important;
}
body.light-mode .rest-day-pill-label{
  color:rgba(0,0,0,0.65) !important;
}

/* Active/filling rest states */
.rest-day-pill.filling{
  border-color:rgba(255,255,255,0.4) !important;
  box-shadow:0 0 10px rgba(255,255,255,0.12), 0 0 24px rgba(255,255,255,0.06) !important;
}
.rest-day-pill.active{
  border-color:rgba(255,255,255,0.5) !important;
  background:#ffffff !important;
  box-shadow:0 0 14px rgba(255,255,255,0.25), 0 0 28px rgba(255,255,255,0.08) !important;
  border-radius:16px !important;
}
.rest-day-pill.active .rest-day-pill-label{
  color:rgba(0,0,0,0.65) !important;
}
.rest-day-pill.active .rest-day-pill-moon{
  fill:rgba(0,0,0,0.55) !important;
}

/* ── Banner duration actual text ──────────────────────────── */
.banner-dur-actual{
  font-size:9px !important;
  font-weight:700 !important;
  margin-left:3px !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║   HERO DAY CARDS & EXERCISE MINI CARDS — GLASS v2          ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════
   HERO OVERLAP CARDS — 7-day frosted glass cards
   ═══════════════════════════════════════════════════════════════ */
.hero-overlap-card{
  border-radius:20px !important;
  background:rgba(22,22,30,0.65) !important;
  border:1.5px solid rgba(255,255,255,0.08) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 2px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.hero-overlap-card:not(.selected){
  filter:brightness(0.5) saturate(0.7) !important;
}
.hero-overlap-card.selected{
  background:rgba(28,28,38,0.8) !important;
  border-color:rgba(255,255,255,0.3) !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.hero-overlap-card .hero-day-label{
  font-size:9px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,0.5) !important;
  letter-spacing:3px !important;
}
.hero-overlap-card .hero-workout-name{
  font-size:14px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,0.85) !important;
  letter-spacing:-0.3px !important;
}
.hero-expand-btn{
  background:rgba(255,255,255,0.08) !important;
  border-radius:8px !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:0.6 !important;
}
.hero-overlap-card.selected .hero-expand-btn{
  opacity:0.8 !important;
}
.hero-expand-btn svg{
  stroke-width:2 !important;
  width:14px !important;
  height:14px !important;
}

/* Hero card — completion glow states */
.hero-overlap-card.selected.day-complete{
  border-color:var(--accent-orange) !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.4),
    0 0 24px rgba(212,148,90,0.15),
    inset 0 1px 0 rgba(212,148,90,0.1) !important;
}
.hero-overlap-card.selected.day-complete[data-week-type="cable"]{
  border-color:var(--blue) !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.4),
    0 0 24px rgba(126,181,226,0.15),
    inset 0 1px 0 rgba(126,181,226,0.1) !important;
}
.hero-overlap-card.selected.day-pr:not(.day-complete){
  box-shadow:
    0 16px 48px rgba(0,0,0,0.4),
    0 0 20px rgba(212,175,55,0.15) !important;
}

/* Hero card — light mode */
body.light-mode .hero-overlap-card{
  background:rgba(248,248,252,0.7) !important;
  border-color:rgba(0,0,0,0.08) !important;
  box-shadow:0 2px 12px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.light-mode .hero-overlap-card:not(.selected){
  filter:brightness(0.88) !important;
}
body.light-mode .hero-overlap-card.selected{
  background:#ffffff !important;
  border-color:rgba(0,0,0,0.6) !important;
  box-shadow:0 16px 48px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}
body.light-mode .hero-overlap-card .hero-day-label{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .hero-overlap-card .hero-workout-name{
  color:rgba(0,0,0,0.8) !important;
}
body.light-mode .hero-expand-btn{
  background:rgba(0,0,0,0.06) !important;
  border-color:rgba(0,0,0,0.04) !important;
}

/* ═══════════════════════════════════════════════════════════════
   EXERCISE OVERLAP CARDS — mini glass cards
   ═══════════════════════════════════════════════════════════════ */
.exercise-overlap-card{
  border-radius:20px !important;
  background:rgba(22,22,30,0.55) !important;
  border:1.5px solid rgba(255,255,255,0.07) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 2px 12px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  padding:5px !important;
}
.exercise-overlap-card:not(.selected){
  filter:brightness(0.6) saturate(0.75) !important;
}
.exercise-overlap-card.selected{
  border-radius:20px 20px 0 0 !important;
  background:rgba(22,22,30,0.7) !important;
  border-color:rgba(255,255,255,0.06) !important;
  border-bottom-color:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.exercise-overlap-card .card-exercise-name{
  font-size:10px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.85) !important;
  letter-spacing:-0.2px !important;
}
.exercise-overlap-card .card-exercise-meta{
  font-size:8px !important;
  color:rgba(255,255,255,0.35) !important;
  letter-spacing:0.3px !important;
}
.exercise-overlap-card .card-set-type-label{
  font-size:7px !important;
  letter-spacing:1px !important;
}
.exercise-overlap-card .mini-card-img-wrap img{
  border-radius:14px !important;
  clip-path:inset(0 round 14px) !important;
}
.exercise-overlap-card.selected .mini-card-img-wrap img{
  border-radius:14px !important;
}

/* Exercise card — completion glow states */
.exercise-overlap-card:not(.selected).ex-complete{
  border-color:var(--accent-orange) !important;
  border-width:2px !important;
  box-shadow:0 0 12px rgba(212,148,90,0.1), inset 0 1px 0 rgba(212,148,90,0.06) !important;
}
.exercise-overlap-card:not(.selected).ex-complete[data-week-type="cable"]{
  border-color:var(--blue) !important;
  box-shadow:0 0 12px rgba(126,181,226,0.1), inset 0 1px 0 rgba(126,181,226,0.06) !important;
}
.exercise-overlap-card.selected.ex-complete{
  border-color:rgba(212,148,90,0.2) !important;
  border-bottom-color:transparent !important;
}
.exercise-overlap-card.selected.ex-complete[data-week-type="cable"]{
  border-color:rgba(126,181,226,0.2) !important;
  border-bottom-color:transparent !important;
}

/* Exercise card — light mode */
body.light-mode .exercise-overlap-card{
  background:rgba(248,248,252,0.6) !important;
  border-color:rgba(0,0,0,0.06) !important;
  box-shadow:0 2px 12px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.5) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.light-mode .exercise-overlap-card .card-exercise-name{
  color:rgba(0,0,0,0.85) !important;
}
body.light-mode .exercise-overlap-card .card-exercise-meta{
  color:rgba(0,0,0,0.35) !important;
}
body.light-mode .exercise-overlap-card.selected{
  background:rgba(248,248,252,0.75) !important;
  border-color:rgba(0,0,0,0.05) !important;
  border-bottom-color:transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   MUSCLE GROUP BADGE — glass chip on card bottom
   ═══════════════════════════════════════════════════════════════ */
.mini-card-muscle{
  border-radius:10px !important;
  background:#121218 !important;
  border:1.5px solid rgba(255,255,255,0.1) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.exercise-overlap-card.selected .mini-card-muscle{
  border-radius:12px !important;
}
body.light-mode .mini-card-muscle{
  #ffffff !important;
  border-color:rgba(0,0,0,0.08) !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PLAY OVERLAY — frosted glass circle
   ═══════════════════════════════════════════════════════════════ */
.mini-card-play-overlay{
  width:48px !important;
  height:48px !important;
  background:rgba(0,0,0,0.3) !important;
  border:1.5px solid rgba(255,255,255,0.2) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.mini-card-play-overlay svg{
  width:20px !important;
  height:20px !important;
}
.superset-stack.selected .mini-card-play-overlay{
  width:38px !important;
  height:38px !important;
}
.superset-stack.selected .mini-card-play-overlay svg{
  width:16px !important;
  height:16px !important;
}
body.light-mode .mini-card-play-overlay{
  background:rgba(255,255,255,0.3) !important;
  border-color:rgba(0,0,0,0.12) !important;
  box-shadow:0 4px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════
   EXERCISE CIRCLES — frosted glass indicators
   ═══════════════════════════════════════════════════════════════ */
.exercise-circles-row{
  gap:10px !important;
  padding:6px 14px !important;
  margin-bottom:6px !important;
}
.exercise-circle{
  width:34px !important;
  height:34px !important;
  border-radius:50% !important;
  border:2px solid rgba(255,255,255,0.8) !important;
  font-size:13px !important;
  font-weight:800 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  aspect-ratio:1 !important;
}
.exercise-circle:not(.expanded){
  opacity:0.55 !important;
  background:rgba(255,255,255,0.03) !important;
  border-color:rgba(255,255,255,0.8) !important;
  box-shadow:none !important;
}
.exercise-circle.expanded{
  opacity:1 !important;
  background:#ffffff !important;
  border-color:rgba(255,255,255,0.95) !important;
  color:#000 !important;
  transform:scale(1.15) !important;
  box-shadow:0 0 16px rgba(255,255,255,0.15), 0 4px 12px rgba(0,0,0,0.2) !important;
}
.exercise-circle-label{
  font-size:7px !important;
  font-weight:700 !important;
  letter-spacing:0.5px !important;
  max-width:46px !important;
}

/* Circles — light mode */
body.light-mode .exercise-circle{
  border-color:rgba(0,0,0,0.7) !important;
  color:rgba(0,0,0,0.8) !important;
}
body.light-mode .exercise-circle:not(.expanded){
  background:rgba(255,255,255,0.3) !important;
  border-color:rgba(0,0,0,0.7) !important;
  box-shadow:none !important;
}
body.light-mode .exercise-circle.expanded{
  background:#000000 !important;
  border-color:rgba(0,0,0,0.85) !important;
  color:#fff !important;
  box-shadow:0 0 12px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* ===== CIRCLE COMPLETION STATES (must be after glass morphism overrides) ===== */
.exercise-circle.complete:not(.expanded){
  border-color:rgba(212,148,90,0.9) !important;
  background:rgba(212,148,90,0.08) !important;
  opacity:1 !important;
  box-shadow:0 0 8px rgba(212,148,90,0.2) !important;
}
.exercise-circle.complete.cable:not(.expanded){
  border-color:rgba(126,181,226,0.9) !important;
  background:rgba(126,181,226,0.08) !important;
  box-shadow:0 0 8px rgba(126,181,226,0.2) !important;
}
.exercise-circle.complete.expanded{
  background:rgba(212,148,90,1) !important;
  border-color:rgba(212,148,90,1) !important;
  color:#000 !important;
  box-shadow:0 0 16px rgba(212,148,90,0.3), 0 4px 12px rgba(0,0,0,0.2) !important;
}
.exercise-circle.complete.cable.expanded{
  background:rgba(126,181,226,1) !important;
  border-color:rgba(126,181,226,1) !important;
  color:#000 !important;
  box-shadow:0 0 16px rgba(126,181,226,0.3), 0 4px 12px rgba(0,0,0,0.2) !important;
}
body.light-mode .exercise-circle.complete:not(.expanded){
  border-color:rgba(34,160,94,0.9) !important;
  background:rgba(34,160,94,0.08) !important;
  opacity:1 !important;
}
body.light-mode .exercise-circle.complete.cable:not(.expanded){
  border-color:rgba(80,136,212,0.9) !important;
  background:rgba(80,136,212,0.08) !important;
}
body.light-mode .exercise-circle.complete.expanded{
  background:rgba(34,160,94,1) !important;
  border-color:rgba(34,160,94,1) !important;
  color:#fff !important;
}
body.light-mode .exercise-circle.complete.cable.expanded{
  background:rgba(80,136,212,1) !important;
  border-color:rgba(80,136,212,1) !important;
  color:#fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   SUPERSET STACK & MINI CARDS — frosted glass
   ═══════════════════════════════════════════════════════════════ */
.superset-stack.selected{
  border:1.5px solid rgba(255,255,255,0.06) !important;
  border-radius:22px 22px 0 0 !important;
  background:rgba(22,22,30,0.5) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.light-mode .superset-stack.selected{
  border-color:rgba(0,0,0,0.05) !important;
  background:rgba(248,248,252,0.5) !important;
}
.superset-stack-label{
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:1.5px !important;
}
.superset-mini-card{
  border-radius:18px !important;
  background:rgba(22,22,30,0.55) !important;
  border:1.5px solid rgba(255,255,255,0.07) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 2px 10px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
.superset-stack.selected .superset-mini-card{
  border-color:rgba(255,255,255,0.15) !important;
  box-shadow:0 4px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.superset-mini-card .mini-card-letter{
  font-size:11px !important;
  font-weight:800 !important;
  background:#121218 !important;
  padding:2px 8px !important;
  border-radius:6px !important;
  border:1px solid rgba(255,255,255,0.06) !important;
}
body.light-mode .superset-mini-card .mini-card-letter{
  #ffffff !important;
  border-color:rgba(0,0,0,0.05) !important;
}
.superset-mini-card .mini-card-name{
  font-size:10px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.85) !important;
}
.superset-mini-card .mini-card-meta{
  font-size:8px !important;
  color:rgba(255,255,255,0.35) !important;
}
body.light-mode .superset-mini-card{
  background:rgba(248,248,252,0.6) !important;
  border-color:rgba(0,0,0,0.06) !important;
  box-shadow:0 2px 10px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
body.light-mode .superset-mini-card .mini-card-name{
  color:rgba(0,0,0,0.85) !important;
}
body.light-mode .superset-mini-card .mini-card-meta{
  color:rgba(0,0,0,0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO ARROWS — frosted glass nav
   ═══════════════════════════════════════════════════════════════ */
.hero-arrow{
  border-radius:12px !important;
}
.hero-arrow svg{
  filter:drop-shadow(0 1px 3px rgba(0,0,0,0.3)) !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║           GRIT & GRAIN — TEXTURE OVERLAYS v2               ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Shared grain texture (referenced via copy-paste, not inherit) ── */

/* ── HERO DAY CARDS — grain + light bloom ──────────────────── */
.hero-overlap-card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:120px 120px;
  mix-blend-mode:overlay;
  opacity:0.6;
  pointer-events:none;
  z-index:5;
  animation:grainShift 7s steps(5) infinite;
}
.hero-overlap-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  background:linear-gradient(155deg, rgba(255,255,255,0.06) 0%, transparent 40%, transparent 70%, rgba(255,255,255,0.02) 100%);
  pointer-events:none;
  z-index:6;
}
.hero-overlap-card.selected::after{
  opacity:0.8;
}
.hero-overlap-card.selected::before{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.1) 0%, transparent 35%),
    radial-gradient(ellipse at 80% 90%, rgba(255,255,255,0.03) 0%, transparent 50%);
}
body.light-mode .hero-overlap-card::after{
  opacity:0.25;
}
body.light-mode .hero-overlap-card::before{
  background:linear-gradient(155deg, rgba(255,255,255,0.3) 0%, transparent 40%);
}

/* ── EXERCISE OVERLAP CARDS — grain + diagonal light ───────── */
.exercise-overlap-card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:100px 100px;
  mix-blend-mode:overlay;
  opacity:0.6;
  pointer-events:none;
  z-index:5;
  animation:grainShift 6s steps(4) infinite;
}
.exercise-overlap-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  background:linear-gradient(160deg, rgba(255,255,255,0.06) 0%, transparent 35%, transparent 75%, rgba(255,255,255,0.02) 100%);
  pointer-events:none;
  z-index:6;
}
.exercise-overlap-card.selected::after{
  border-radius:20px 20px 0 0;
  opacity:0.7;
}
.exercise-overlap-card.selected::before{
  border-radius:20px 20px 0 0;
}
body.light-mode .exercise-overlap-card::after{
  opacity:0.2;
}
body.light-mode .exercise-overlap-card::before{
  background:linear-gradient(160deg, rgba(255,255,255,0.25) 0%, transparent 35%);
}

/* ── SUPERSET MINI CARDS — grain + reflection ──────────────── */
.superset-mini-card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:18px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:90px 90px;
  mix-blend-mode:overlay;
  opacity:0.55;
  pointer-events:none;
  z-index:5;
  animation:grainShift 8s steps(6) infinite;
}
.superset-mini-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:18px;
  background:linear-gradient(165deg, rgba(255,255,255,0.05) 0%, transparent 40%);
  pointer-events:none;
  z-index:6;
}
body.light-mode .superset-mini-card::after{
  opacity:0.2;
}

/* ── EXERCISE CIRCLES — grain texture ──────────────────────── */
.exercise-circle::after{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size:60px 60px;
  mix-blend-mode:overlay;
  opacity:0.5;
  pointer-events:none;
  z-index:3;
}
.exercise-circle.expanded::after{
  opacity:0.7;
  mix-blend-mode:multiply;
  border-radius:50%;
}
body.light-mode .exercise-circle::after{
  opacity:0.2;
}

/* ── SUPERSET STACK CONTAINER (selected) — grain fill ──────── */
.superset-stack.selected::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:22px 22px 0 0;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size:140px 140px;
  mix-blend-mode:overlay;
  opacity:0.5;
  pointer-events:none;
  z-index:0;
  animation:grainShift 10s steps(6) infinite;
}

/* ── BANNER STATS ROW — grain strip ────────────────────────── */
.banner-stats-row::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:16px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size:80px 80px;
  mix-blend-mode:overlay;
  opacity:0.5;
  pointer-events:none;
  z-index:0;
  animation:grainShift 7s steps(5) infinite;
}
.banner-stats-row{
  position:relative !important;
}
body.light-mode .banner-stats-row::after{
  opacity:0.15;
}

/* ── BANNER START WORKOUT — grain inside CTA ───────────────── */
.banner-start-workout::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:16px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:70px 70px;
  mix-blend-mode:overlay;
  opacity:0.5;
  pointer-events:none;
  z-index:1;
  animation:grainShift 6s steps(4) infinite;
}
body.light-mode .banner-start-workout::after{
  opacity:0.15;
}

/* ── PLAY OVERLAY — subtle grain on glass circle ───────────── */
.mini-card-play-overlay::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size:50px 50px;
  mix-blend-mode:overlay;
  opacity:0.5;
  pointer-events:none;
}

/* ── MUSCLE BADGE — grain chip ─────────────────────────────── */
.mini-card-muscle::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:10px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:50px 50px;
  mix-blend-mode:overlay;
  opacity:0.5;
  pointer-events:none;
  z-index:5;
}
.exercise-overlap-card.selected .mini-card-muscle::after{
  border-radius:12px;
}

/* ── WORKOUT SUMMARY MODAL — grain fill ────────────────────── */
.workout-summary-modal::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:28px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size:150px 150px;
  mix-blend-mode:overlay;
  opacity:0.5;
  pointer-events:none;
  z-index:0;
  animation:grainShift 10s steps(6) infinite;
}
.workout-summary-modal::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:28px;
  background:
    radial-gradient(ellipse at 25% 0%, rgba(255,255,255,0.04) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 100%, rgba(255,255,255,0.02) 0%, transparent 40%);
  pointer-events:none;
  z-index:0;
}
body.light-mode .workout-summary-modal::after{
  opacity:0.15;
}
body.light-mode .workout-summary-modal::before{
  background:
    radial-gradient(ellipse at 25% 0%, rgba(255,255,255,0.15) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 100%, rgba(0,0,0,0.02) 0%, transparent 40%);
}

/* ── DURATION POPUP — grain fill ───────────────────────────── */
.duration-popup::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:28px 28px 0 0;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size:160px 160px;
  mix-blend-mode:overlay;
  opacity:0.5;
  pointer-events:none;
  z-index:0;
  animation:grainShift 12s steps(8) infinite;
}
.duration-popup::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:28px 28px 0 0;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 100%, rgba(255,255,255,0.015) 0%, transparent 35%);
  pointer-events:none;
  z-index:0;
}
body.light-mode .duration-popup::after{
  opacity:0.15;
}

/* ── DUR ITEMS — subtle grain per card ─────────────────────── */
.dur-item::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:16px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size:70px 70px;
  mix-blend-mode:overlay;
  opacity:0.4;
  pointer-events:none;
  z-index:0;
}
.dur-item::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:16px;
  background:linear-gradient(165deg, rgba(255,255,255,0.03) 0%, transparent 40%);
  pointer-events:none;
  z-index:0;
}
body.light-mode .dur-item::after{
  opacity:0.12;
}

/* ── PR POPUP ITEMS — grain cards ──────────────────────────── */
.pr-popup-item::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:14px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size:60px 60px;
  mix-blend-mode:overlay;
  opacity:0.35;
  pointer-events:none;
  z-index:0;
}

/* ── WS ITEMS (workout summary) — grain cards ──────────────── */
.ws-item::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:14px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size:60px 60px;
  mix-blend-mode:overlay;
  opacity:0.35;
  pointer-events:none;
  z-index:0;
}
.ws-item{
  position:relative !important;
}
.pr-popup-item{
  position:relative !important;
}
.dur-item{
  position:relative !important;
}

/* ── REST DAY PILL — grain inside capsule ──────────────────── */
.rest-day-pill::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:10px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:40px 40px;
  mix-blend-mode:overlay;
  opacity:0.5;
  pointer-events:none;
  z-index:3;
}

/* ── BANNER SLIDE CENTER — light bloom for entire banner ───── */
.workout-banner-slide-center::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.025) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 70%, rgba(255,255,255,0.015) 0%, transparent 40%);
  pointer-events:none;
  z-index:0;
}
.workout-banner-slide-center{
  position:relative !important;
}

/* ── HERO OVERLAP STACK — subtle ambient light ─────────────── */
.hero-overlap-stack::before{
  content:'';
  position:absolute;
  inset:-20px;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.015) 0%, transparent 60%);
  pointer-events:none;
  z-index:0;
}


/* ── Completion & PR Indicators on circles/badges/cards ───── */
/* Greyed-out indicators container */
.status-indicators{
  position:absolute;
  bottom:-6px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:2px;
  z-index:5;
}
.status-ind{
  width:14px;
  height:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.status-ind svg{
  width:11px;
  height:11px;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
/* Default greyed out state */
.status-ind-check svg{ stroke:rgba(255,255,255,0.15); }
.status-ind-trophy svg{ stroke:rgba(255,255,255,0.12); fill:rgba(255,255,255,0.05); }
body.light-mode .status-ind-check svg{ stroke:rgba(0,0,0,0.12); }
body.light-mode .status-ind-trophy svg{ stroke:rgba(0,0,0,0.55); fill:rgba(0,0,0,0.03); }
/* Active/achieved states */
.status-ind-check.achieved svg{ stroke:var(--accent-orange); }
.status-ind-check.achieved.cable svg{ stroke:var(--blue); }
.status-ind-trophy.achieved svg{ stroke:var(--gold); fill:rgba(212,188,138,0.2); }
body.light-mode .status-ind-check.achieved svg{ stroke:#3BAB7A; }
body.light-mode .status-ind-check.achieved.cable svg{ stroke:#5A9FD4; }
body.light-mode .status-ind-trophy.achieved svg{ stroke:#B49F6A; fill:rgba(180,159,106,0.15); }

/* Duration popup indicators — inline after badge */
.dur-status-indicators{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-left:-4px;
}
.dur-status-ind{
  width:16px;
  height:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dur-status-ind svg{
  width:12px;
  height:12px;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
.dur-status-ind.dur-check svg{ stroke:rgba(255,255,255,0.12); }
.dur-status-ind.dur-trophy svg{ stroke:rgba(255,255,255,0.1); fill:rgba(255,255,255,0.03); }
body.light-mode .dur-status-ind.dur-check svg{ stroke:rgba(0,0,0,0.55); }
body.light-mode .dur-status-ind.dur-trophy svg{ stroke:rgba(0,0,0,0.08); fill:rgba(0,0,0,0.02); }
.dur-status-ind.dur-check.achieved svg{ stroke:var(--accent-orange); }
.dur-status-ind.dur-check.achieved.cable svg{ stroke:var(--blue); }
.dur-status-ind.dur-trophy.achieved svg{ stroke:var(--gold); fill:rgba(212,188,138,0.2); }

/* Mini card status indicators — small icons at bottom of card */
.mini-card-indicators{
  position:absolute;
  bottom:4px;
  right:4px;
  display:flex;
  gap:2px;
  z-index:5;
}
.mini-card-ind{
  width:14px;
  height:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mini-card-ind svg{
  width:10px;
  height:10px;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
.mini-card-ind.mc-check svg{ stroke:rgba(255,255,255,0.15); }
.mini-card-ind.mc-trophy svg{ stroke:rgba(255,255,255,0.12); fill:rgba(255,255,255,0.04); }
.mini-card-ind.mc-check.achieved svg{ stroke:var(--accent-orange); }
.mini-card-ind.mc-check.achieved.cable svg{ stroke:var(--blue); }
.mini-card-ind.mc-trophy.achieved svg{ stroke:var(--gold); fill:rgba(212,188,138,0.2); }

/* ── Settings Panel ─────────────────────── */
.settings-panel-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:600;
  opacity:0; pointer-events:none; transition:opacity 0.2s ease;
}
.settings-panel-overlay.open{ opacity:1; pointer-events:auto; }
.settings-panel{
  position:fixed; bottom:0; left:0; right:0; background:#16161e;
  border-radius:20px 20px 0 0; z-index:601; transform:translateY(100%);
  transition:transform 0.3s cubic-bezier(0.25,1,0.5,1); padding-bottom:env(safe-area-inset-bottom);
}
.settings-panel.open{ transform:translateY(0); }
body.light-mode .settings-panel{ background:#ffffff; }
.settings-panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 12px; border-bottom:1px solid rgba(255,255,255,0.06);
}
body.light-mode .settings-panel-header{ border-bottom-color:rgba(0,0,0,0.06); }
.settings-panel-title{ font-size:17px; font-weight:700; color:rgba(255,255,255,0.85); }
body.light-mode .settings-panel-title{ color:rgba(0,0,0,0.85); }
.settings-panel-close{
  width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.06);
  border:none; color:rgba(255,255,255,0.4); font-size:18px; cursor:pointer; display:grid; place-items:center;
}
body.light-mode .settings-panel-close{ background:rgba(0,0,0,0.05); color:rgba(0,0,0,0.35); }
.settings-panel-body{ padding:8px 16px 20px; }
.settings-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-radius:14px; cursor:pointer; transition:background 0.15s ease;
}
.settings-item:active{ background:rgba(255,255,255,0.05); }
body.light-mode .settings-item:active{ background:rgba(0,0,0,0.04); }
.settings-item-left{ display:flex; align-items:center; gap:12px; }
.settings-item-left span{ font-size:15px; font-weight:600; color:rgba(255,255,255,0.8); }
body.light-mode .settings-item-left span{ color:rgba(0,0,0,0.8); }
.settings-item-icon{ width:22px; height:22px; color:rgba(255,255,255,0.5); }
body.light-mode .settings-item-icon{ color:rgba(0,0,0,0.7); }
.settings-item-danger .settings-item-left span{ color:rgba(220,80,80,0.85); }
.settings-item-danger .settings-item-icon{ color:rgba(220,80,80,0.6); }
.settings-divider{ height:1px; background:rgba(255,255,255,0.05); margin:4px 16px; }
body.light-mode .settings-divider{ background:rgba(0,0,0,0.05); }
.settings-item-signout .settings-item-left span{ color:rgba(255,255,255,0.45); }
.settings-item-signout .settings-item-icon{ color:rgba(255,255,255,0.3); }
body.light-mode .settings-item-signout .settings-item-left span{ color:rgba(0,0,0,0.65); }
body.light-mode .settings-item-signout .settings-item-icon{ color:rgba(0,0,0,0.6); }
.settings-toggle-track{
  width:44px; height:26px; border-radius:13px; background:rgba(255,255,255,0.12);
  position:relative; transition:background 0.2s ease;
}
body.light-mode .settings-toggle-track{ background:rgba(0,0,0,0.12); }
.settings-toggle.active .settings-toggle-track{ background:var(--gold); }
.settings-toggle-thumb{
  width:22px; height:22px; border-radius:50%; background:#fff;
  position:absolute; top:2px; left:2px; transition:transform 0.2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.settings-toggle.active .settings-toggle-thumb{ transform:translateX(18px); }

/* Days completed button in toolbar */
.days-completed-btn{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; width:54px !important; height:54px !important; min-width:54px !important; padding:0 !important; }
.days-ring-svg{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.days-ring-text{ position:relative; z-index:1; display:flex; align-items:baseline; gap:0; font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1; }
#daysCompletedNum{ font-size:14px; font-weight:800; color:rgba(255,255,255,0.85); }
.days-ring-slash{ font-size:9px; font-weight:600; color:rgba(255,255,255,0.35); }
body.light-mode #daysCompletedNum{ color:rgba(0,0,0,0.7); }
body.light-mode .days-ring-slash{ color:rgba(0,0,0,0.6); }
body.light-mode .days-completed-btn svg circle:first-child{ stroke:rgba(0,0,0,0.06); }
body.light-mode .days-completed-btn #daysRingFill{ stroke:rgba(0,0,0,0.55); }
/* Days progress modal */
.days-progress-hero{ display:flex; flex-direction:column; align-items:center; padding:28px 0 16px; }
.days-progress-ring-wrap{ position:relative; width:140px; height:140px; }
.days-progress-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.days-progress-count{ font-size:40px; font-weight:900; color:#fff; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-2px; }
.days-progress-label{ font-size:11px; color:rgba(255,255,255,0.25); font-weight:600; letter-spacing:0.5px; }
.days-progress-subtitle{ font-size:13px; color:rgba(255,255,255,0.35); margin-top:12px; font-weight:600; }
body.light-mode .days-progress-count{ color:#1d1d1f; }
body.light-mode .days-progress-label{ color:rgba(0,0,0,0.7); }
body.light-mode .days-progress-subtitle{ color:rgba(0,0,0,0.7); }
/* PR chart container */
.pr-chart-container{ padding:16px 16px 8px; border-bottom:1px solid rgba(255,255,255,0.04); margin-bottom:8px; }
body.light-mode .pr-chart-container{ border-bottom-color:rgba(0,0,0,0.04); }

/* Today btn in month-label-row */
.month-today-sep{ width:1px; height:18px; background:rgba(255,255,255,0.12); flex-shrink:0; margin:0 4px; border-radius:1px; }
body.light-mode .month-today-sep{ background:rgba(0,0,0,0.1); }
.month-label-row .today-btn{ width:36px; height:36px; min-width:36px; min-height:36px; padding:0; margin-left:2px; }
.month-label-row .today-btn svg{ width:18px !important; height:18px !important; }
/* ── BANNER STATS: plain info text, not buttons ──────────── */
.banner-stats-row{
  background:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:0 !important;
  margin-top:6px !important;
  gap:6px !important;
  position:static !important;
}
.banner-stats-row::after{
  display:none !important;
}
body.light-mode .banner-stats-row{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
}
.banner-stat{
  padding:0 !important;
  border-radius:0 !important;
  background:none !important;
  border:none !important;
  transition:none !important;
  font-size:11px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.4) !important;
  gap:4px !important;
}
.banner-stat:active{
  background:none !important;
  border:none !important;
  transform:none !important;
}
body.light-mode .banner-stat{
  background:none !important;
  border:none !important;
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .banner-stat:active{
  background:none !important;
}
.banner-stat svg{
  width:13px !important;
  height:13px !important;
  opacity:0.5 !important;
}
.banner-stat-divider{
  display:none !important;
}
.banner-stat-dot{
  font-size:10px !important;
  color:rgba(255,255,255,0.2) !important;
}
body.light-mode .banner-stat-dot{
  color:rgba(0,0,0,0.15) !important;
}
.banner-stat-value{
  font-size:11px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.4) !important;
  letter-spacing:0 !important;
}
body.light-mode .banner-stat-value{
  color:rgba(0,0,0,0.65) !important;
}
.banner-stat-icon{
  width:13px !important;
  height:13px !important;
  stroke:rgba(255,255,255,0.35) !important;
  stroke-width:2.2 !important;
}
body.light-mode .banner-stat-icon{
  stroke:rgba(0,0,0,0.55) !important;
}
/* ── LIGHT MODE TOOLBAR: better visibility ───────────────── */
body.light-mode .nav-btn{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .nav-btn svg{
  stroke:rgba(0,0,0,0.55) !important;
}
body.light-mode .nav-btn:active{
  background:rgba(0,0,0,0.08) !important;
}
body.light-mode .nav-btn.pr-trophy-btn svg{
  stroke:rgba(0,0,0,0.6) !important;
}
body.light-mode .nav-btn.pr-trophy-btn:active svg{
  stroke:rgba(0,0,0,0.85) !important;
}
body.light-mode .nav-btn.rest-zzz-btn svg{
  stroke:rgba(100,85,60,0.65) !important;
  color:rgba(100,85,60,0.65) !important;
}
body.light-mode .nav-btn.rest-zzz-btn:active svg{
  stroke:rgba(100,85,60,0.9) !important;
}
body.light-mode .nav-btn.mode-toggle-btn svg{
  stroke:rgba(180,150,40,0.7) !important;
}
body.light-mode .month-btn-sep{
  background:rgba(0,0,0,0.15) !important;
}
body.light-mode .month-row-btns .month-btn-sep{
  background:rgba(0,0,0,0.15) !important;
}
body.light-mode .days-completed-btn svg circle:first-child{
  stroke:rgba(0,0,0,0.12) !important;
}
body.light-mode .days-completed-btn #daysRingFill{
  stroke:rgba(0,0,0,0.7) !important;
}
body.light-mode #daysCompletedNum{
  color:rgba(0,0,0,0.8) !important;
}
body.light-mode .days-ring-slash{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .header-stats{
  background:rgba(0,0,0,0.06) !important;
  border-color:rgba(0,0,0,0.12) !important;
}
body.light-mode .rotate-box{
  background:#ffffff !important;
  border-color:rgba(0,0,0,0.65) !important;
}
body.light-mode .rotate-title{
  color:var(--text) !important;
}
body.light-mode .rotate-sub{
  color:#8B7A5E !important;
}
body.light-mode .rotate-check{
  color:var(--text) !important;
}
/* ── LIGHT MODE: 180-Day Journey modal visibility ─────────── */
body.light-mode .days-progress-ring-wrap svg circle:first-child{
  stroke:rgba(0,0,0,0.55) !important;
}
body.light-mode .stats-line-chart-container{
  background:rgba(0,0,0,0.04) !important;
  border:1px solid rgba(0,0,0,0.08) !important;
}
body.light-mode .stats-line-chart-title{
  color:rgba(0,0,0,0.7) !important;
}
/* ═══════════════════════════════════════════════════════════════
   TABLE LAYOUT — all sets visible, Strong/Hevy-style rows
   ═══════════════════════════════════════════════════════════════ */

/* ── EXERCISE NAME: centered, clean ──────────────────────── */
.ex-card-name{
  text-align:center;
  font-size:20px;
  font-weight:700;
  color:rgba(255,255,255,0.9);
  letter-spacing:-0.3px;
  padding:18px 16px 6px;
}
.superset-exercise-item .ex-card-name{
  font-size:15px;
  padding:12px 16px 4px;
}
body.light-mode .ex-card-name{
  color:rgba(0,0,0,0.9);
}
/* Hide old header elements when new layout is used */
.ex-media-strip{ display:none !important; }
.ex-header.compact-header{ display:none !important; }

/* ── MUSCLE FOCUS ROW: icon + label ─────────────────────── */
.ex-focus-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 16px 8px;
}
.ex-focus-icon{
  width:22px;
  height:22px;
  object-fit:contain;
  opacity:0.6;
  filter:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ex-focus-icon:active{
  opacity:0.9;
  transform:scale(1.1);
}
body.light-mode .ex-focus-icon{
  filter:invert(1) brightness(0.6);
  opacity:0.7;
}
.ex-focus-label{
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,0.35);
  letter-spacing:0.3px;
}
.ex-focus-dot{
  font-size:10px;
  color:rgba(255,255,255,0.12);
}
.ex-focus-equip{
  font-size:12px;
  font-weight:500;
  color:rgba(255,255,255,0.2);
}
body.light-mode .ex-focus-label{ color:rgba(0,0,0,0.35); }
body.light-mode .ex-focus-dot{ color:rgba(0,0,0,0.65); }
body.light-mode .ex-focus-equip{ color:rgba(0,0,0,0.55); }

/* ── INFO BAR: 5-column grid ────────────────────────────── */
.info-bar{
  display:flex;
  align-items:flex-start;
  justify-content:space-around;
  padding:8px 6px 12px;
  gap:4px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  margin:0 4px;
}
.info-bar-label{
  font-size:8px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:rgba(255,255,255,0.2);
  white-space:nowrap;
}
.info-bar-value{
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.55);
  white-space:nowrap;
}
.info-bar-sub{
  font-size:7px;
  color:rgba(255,255,255,0.15);
}
body.light-mode .info-bar{
  border-bottom-color:rgba(0,0,0,0.04);
}
body.light-mode .info-bar-label{
  color:rgba(0,0,0,0.55);
}
body.light-mode .info-bar-value{
  color:rgba(0,0,0,0.55);
}
body.light-mode .info-bar-sub{
  color:rgba(0,0,0,0.12);
}
/* PR trophy in info bar */
.info-bar-cell .pr-new{
  display:none;
  flex-direction:row;
  align-items:center;
  gap:2px;
}
.info-bar-cell .pr-new.active{
  display:flex !important;
}
.info-bar-cell .pr-trophy{
  width:12px;
  height:12px;
}
.info-bar-cell .pr-new-text-compact{
  font-size:8px;
  font-weight:700;
  color:#D4BC8A;
  letter-spacing:0.5px;
}
.ex-number-badge{ display:none !important; }

/* ── SS LETTER BADGE in superset card names ─────────────── */
.ss-letter-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:7px;
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.5);
  font-size:12px;
  font-weight:800;
  letter-spacing:0.5px;
  margin-right:4px;
  vertical-align:middle;
  flex-shrink:0;
}

/* ══════════════════════════════════════════════════════════
   SUPERSET CARD v5 — BRIGHT & CLEAR
   ══════════════════════════════════════════════════════════ */

/* ── RESET — nuke all inherited fog ──────────────────────── */
.sc-card .superset-label-row{ display:none !important; }
.sc-card .superset-exercise-item{ all:unset !important; display:block !important; width:100% !important; }
.superset-combined-card, .superset-combined-card.expanded,
.superset-combined-card.all-complete, .superset-combined-card.has-pr,
.superset-combined-card.all-complete.has-pr, .ex-card.superset-combined-card{
  background:transparent !important; border:none !important; box-shadow:none !important;
  border-radius:0 !important; padding:0 !important; overflow:visible !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}

/* ── OUTER CARD ──────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════
   MODERN CARD SYSTEM
   ════════════════════════════════════════════════════════════ */
.sc-card{
  background:linear-gradient(165deg, #1a1a24 0%, #15151e 100%);
  border-radius:20px;
  overflow:hidden;
  position:relative;
  box-shadow:0 4px 24px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.03) inset;
}
body.light-mode .sc-card{
  background:linear-gradient(165deg, #fff 0%, #f8f7f5 100%);
  box-shadow:0 2px 12px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
}

/* ── SUPERSET BADGE ─────────────────────────── */
.sc-badge-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px 0;
}
.sc-badge{
  font-size:9px; font-weight:800; letter-spacing:2.5px;
  color:rgba(162,100,190,0.7);
  text-transform:uppercase;
}
body.light-mode .sc-badge{ color:rgba(140,80,170,0.6); }

/* Force ALL superset labels purple everywhere */
.superset-stack-label,
.card-set-type-label.superset,
.special-set-corner-label.superset,
.ws-item-set-type.superset,
[class*="superset-label"],
[class*="superset-stack-label"]{
  color:rgba(162,100,190,0.85) !important;
}

.sc-badge-row .superset-info-btn{
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.sc-badge-row .superset-info-btn svg{
  width:16px; height:16px;
  stroke:rgba(162,100,190,0.6) !important;
}

/* ── EXERCISE HEADER ────────────────────────── */
.sc-info-sections{ padding:12px 18px 0; }
.sc-info-block{ padding:10px 0; }
.sc-info-block + .sc-info-block{
  border-top:1px solid rgba(255,255,255,0.05);
}
body.light-mode .sc-info-block + .sc-info-block{
  border-top-color:rgba(0,0,0,0.05);
}

.sc-ex-line1{
  display:flex; align-items:center; gap:12px;
}
.sc-letter{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, rgba(162,100,190,0.2), rgba(162,100,190,0.06));
  color:rgba(162,100,190,1);
  font-size:15px; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
body.light-mode .sc-letter{
  background:linear-gradient(135deg, rgba(140,80,170,0.1), rgba(140,80,170,0.03));
  color:rgba(140,80,170,0.85);
}
.sc-ex-info{ flex:1; min-width:0; }
.sc-ex-name{
  font-size:17px; font-weight:800; color:#fff;
  line-height:1.25; letter-spacing:-0.3px;
}
body.light-mode .sc-ex-name{ color:#111; }
.sc-ex-meta{
  font-size:11px; font-weight:500; color:rgba(255,255,255,0.35); margin-top:2px;
}
body.light-mode .sc-ex-meta{ color:rgba(0,0,0,0.35); }

.sc-ex-icons{
  display:flex; align-items:center; gap:10px;
  flex-shrink:0; margin-left:auto;
}

/* Video square */
.sc-video-sq{
  width:56px; height:56px; border-radius:12px;
  overflow:hidden; position:relative; cursor:pointer;
  flex-shrink:0; border:1px solid rgba(255,255,255,0.06);
}
.sc-video-sq img{ width:100%; height:100%; object-fit:cover; display:block; }
.sc-video-sq-play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.3);
}
.sc-video-sq-play svg{ width:16px; height:16px; color:rgba(255,255,255,0.9); }
.sc-video-sq:active{ opacity:0.7; }

/* Muscle icon — same dimensions as video */
.sc-ex-icons .sc-ex-img{
  width:56px !important; height:56px !important;
  opacity:0.6 !important; border-radius:12px;
  object-fit:contain;
}
.sc-ex-img:active{ opacity:0.7; }

/* PR chip */
.sc-ex-pr-line{ padding:6px 0 0 46px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sc-pr-cell{
  display:inline-flex; align-items:center; gap:5px;
  cursor:pointer; padding:4px 12px 4px 8px;
  background:rgba(212,188,138,0.06);
  border:1px solid rgba(212,188,138,0.1);
  border-radius:20px;
  transition:background 0.2s;
}
.sc-pr-cell:active{ background:rgba(212,188,138,0.12); }
.sc-trophy{
  width:13px; height:13px;
  stroke:rgba(212,188,138,0.8); flex-shrink:0;
}
.sc-pr-label{
  font-size:10px; font-weight:700;
  color:rgba(212,188,138,0.6); letter-spacing:0.3px;
}
.sc-pr-val{
  font-size:12px; font-weight:700;
  color:rgba(212,188,138,0.9);
}
body.light-mode .sc-pr-cell{
  background:rgba(180,155,90,0.06);
  border-color:rgba(180,155,90,0.1);
}

/* Tempo line below goal */
.sc-tempo-line{
  text-align:center;
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.25);
  padding:0 18px 2px;
  letter-spacing:0.5px;
}
.sc-tempo-val{
  font-weight:800;
  color:rgba(255,255,255,0.4);
  letter-spacing:1.5px;
  margin-left:4px;
}
body.light-mode .sc-tempo-line{ color:rgba(0,0,0,0.55); }
body.light-mode .sc-tempo-val{ color:rgba(0,0,0,0.35); }

/* ── PROGRESS SECTION ───────────────────────── */
.sc-goal-label{
  font-size:13px; font-weight:600;
  color:rgba(255,255,255,0.4);
  text-align:center;
  padding:10px 18px 2px;
}
.sc-goal-x{
  font-size:18px; font-weight:800;
  vertical-align:middle;
  color:rgba(255,255,255,0.25);
  padding:0 3px;
}
body.light-mode .sc-goal-label{ color:rgba(0,0,0,0.35); }
body.light-mode .sc-goal-x{ color:rgba(0,0,0,0.18); }

/* Segmented progress bar */
.sc-progress-dots{
  display:flex; gap:4px;
  padding:8px 18px 14px;
}
.sc-dot{
  flex:1; height:5px;
  border-radius:3px;
  background:rgba(255,255,255,0.06);
  transition:all 0.4s ease;
}
.sc-dot.sc-dot-done{
  background:var(--accent-orange);
  box-shadow:0 0 8px rgba(212,148,90,0.2);
}
.sc-dot.sc-dot-active{
  background:rgba(162,100,190,0.3);
  box-shadow:0 0 6px rgba(162,100,190,0.15);
}
body.light-mode .sc-dot{
  background:rgba(0,0,0,0.05);
}

/* ── SET ROWS ───────────────────────────────── */
.sc-rounds-wrap{ padding:0 14px 14px; }
.sc-interleaved-table{ padding:0; }

/* No more bordered round cards — clean rows */
.sc-round-card{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  margin-bottom:0;
}
.sc-round-card + .sc-round-card{
  border-top:1px solid rgba(255,255,255,0.04);
  margin-top:2px;
  padding-top:2px;
}
body.light-mode .sc-round-card + .sc-round-card{
  border-top-color:rgba(0,0,0,0.04);
}

/* Round label — subtle left-aligned */
.sc-round-num{
  font-size:9px; font-weight:800;
  letter-spacing:2px; text-transform:uppercase;
  color:rgba(162,100,190,0.4);
  padding:10px 4px 4px;
  text-align:left;
}
body.light-mode .sc-round-num{ color:rgba(140,80,170,0.35); }

/* Completed round */
.sc-round-card:not(:has(.set-block:not(.set-row-done))){
  opacity:1;
}
.sc-round-card:not(:has(.set-block:not(.set-row-done))) .sc-round-num{
  color:rgba(212,148,90,0.5);
}
.sc-round-card:not(:has(.set-block:not(.set-row-done))) .sc-round-num::after{
  content:' \2713'; color:var(--accent-orange);
}
body.light-mode .sc-round-card:not(:has(.set-block:not(.set-row-done))){
  opacity:1;
}

/* Each set row */
.sc-round-row{
  display:flex !important;
  align-items:center !important;
  padding:10px 4px !important;
  min-height:56px !important;
  gap:10px !important;
  background:transparent;
  border:none !important; border-radius:12px !important;
  box-shadow:none !important; margin:0 !important;
  width:100% !important;
  transition:background 0.3s, box-shadow 0.3s;
}

/* Row left: letter badge + name */
.sc-round-row-left{
  display:flex; align-items:center; gap:10px;
  flex:1; min-width:0;
}
.sc-round-letter{
  width:30px; height:30px; border-radius:50%;
  background:rgba(162,100,190,0.08);
  color:rgba(162,100,190,0.7);
  font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:all 0.3s;
}
body.light-mode .sc-round-letter{
  background:rgba(140,80,170,0.05);
  color:rgba(140,80,170,0.6);
}
.sc-round-ex-name{
  font-size:13px; font-weight:600; color:rgba(255,255,255,0.7);
  line-height:1.3;
}
body.light-mode .sc-round-ex-name{ color:rgba(0,0,0,0.6); }

/* Row right: inputs */
.sc-round-row-right{
  display:flex; align-items:center; flex-shrink:0;
}
.sc-round-inputs{
  display:flex; align-items:center; gap:6px;
}

/* Input pill boxes */
.sc-input-wrap{
  display:flex; flex-direction:column; align-items:center;
  gap:0; position:relative; margin-bottom:0;
}

/* Unit toggle (LBS / KG) */
.sc-unit-toggle{
  display:flex; gap:0; margin-top:3px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.06);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sc-unit-opt{
  font-size:8px; font-weight:800;
  letter-spacing:0.5px;
  padding:3px 8px;
  color:rgba(255,255,255,0.2);
  background:transparent;
  transition:all 0.2s;
}
.sc-unit-opt.sc-unit-on{
  color:#fff;
  background:rgba(162,100,190,0.25);
}
body.light-mode .sc-unit-opt{ color:rgba(0,0,0,0.15); }
body.light-mode .sc-unit-opt.sc-unit-on{
  color:#111;
  background:rgba(140,80,170,0.12);
}
body.light-mode .sc-unit-toggle{ border-color:rgba(0,0,0,0.06); }

.sc-input-goal{
  font-size:8px; font-weight:700; letter-spacing:0.8px;
  color:rgba(255,255,255,0.2);
  text-transform:uppercase;
  margin-bottom:2px;
}
body.light-mode .sc-input-goal{ color:rgba(0,0,0,0.55); }

.sc-input, .sc-card .set-input{
  width:64px !important; height:38px !important;
  font-size:18px !important; font-weight:700 !important;
  text-align:center !important;
  color:#fff !important;
  background:rgba(255,255,255,0.04) !important;
  border:1.5px solid rgba(255,255,255,0.08) !important;
  border-radius:10px !important;
  padding:0 !important; box-shadow:none !important;
  letter-spacing:-0.5px !important; -webkit-appearance:none !important;
  transition:border-color 0.2s, background 0.2s;
}
.sc-card .set-input.free,
.sc-card .set-input.cable{
  background:rgba(255,255,255,0.04) !important;
  border:1.5px solid rgba(255,255,255,0.08) !important;
  border-radius:10px !important;
}
.sc-card .set-input.zero-value{
  color:rgba(255,255,255,0.25) !important;
}
.sc-card .set-input:not(.zero-value){
  color:#fff !important;
  background:rgba(255,255,255,0.06) !important;
  border-color:rgba(255,255,255,0.12) !important;
}
body.light-mode .sc-card .set-input,
body.light-mode .sc-card .set-input.free,
body.light-mode .sc-card .set-input.cable{
  background:rgba(0,0,0,0.03) !important;
  color:#111 !important;
  border:1.5px solid rgba(0,0,0,0.08) !important;
  border-radius:10px !important;
}
body.light-mode .sc-card .set-input.zero-value{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .sc-card .set-input:not(.zero-value){
  color:#111 !important;
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(0,0,0,0.12) !important;
}

.sc-input-x{
  font-size:14px; font-weight:600;
  color:rgba(255,255,255,0.15);
  margin-top:12px;
}
body.light-mode .sc-input-x{ color:rgba(0,0,0,0.12); }

/* Vertical stepper arrows */
.sc-stepper-col{
  display:flex; flex-direction:column;
  gap:4px; align-self:center;
  margin-top:10px;
}
.sc-step{
  width:26px; height:22px;
  border:none; border-radius:6px;
  background:rgba(255,255,255,0.04);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.12s;
}
.sc-step:active{
  background:rgba(162,100,190,0.15);
  transform:scale(0.9);
}
.sc-step svg{
  width:12px; height:12px;
  stroke:rgba(255,255,255,0.35);
  stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  fill:none;
}
body.light-mode .sc-step{
  background:rgba(0,0,0,0.03);
}
body.light-mode .sc-step:active{
  background:rgba(140,80,170,0.1);
}
body.light-mode .sc-step svg{
  stroke:rgba(0,0,0,0.55);
}

/* Active input (keyboard open) */
@keyframes scInputCursorBlink{
  0%,100%{ border-right-color:rgba(162,100,190,0.9); }
  50%{ border-right-color:transparent; }
}
.sc-card .set-input.active-input{
  border:1.5px solid rgba(162,100,190,0.5) !important;
  border-right:3px solid rgba(162,100,190,0.9) !important;
  animation:scInputCursorBlink 1s step-end infinite !important;
  color:#fff !important;
  background:rgba(162,100,190,0.06) !important;
  transform:none !important;
  z-index:5;
  box-shadow:0 0 12px rgba(162,100,190,0.1) !important;
  outline:none !important;
}
body.light-mode .sc-card .set-input.active-input{
  border-color:rgba(140,80,170,0.4) !important;
  border-right-color:rgba(140,80,170,0.7) !important;
  color:#111 !important;
  background:rgba(140,80,170,0.04) !important;
}

/* Hide old elements in rounds */
.sc-rounds-wrap .set-num{ display:none !important; }
.sc-rounds-wrap .sc-td-set{ display:none !important; }
.sc-rounds-wrap .sc-td-val{ display:none !important; }

/* Ghost values */
.sc-ghost-val{
  font-size:8px; font-weight:600;
  color:rgba(255,255,255,0.15);
  text-align:center; margin-top:2px;
}
.sc-ghost-val::before{ content:'prev '; font-weight:400; }
body.light-mode .sc-ghost-val{ color:rgba(0,0,0,0.12); }

/* Round timer */
.sc-round-timer{
  font-size:9px; font-weight:600;
  color:rgba(255,255,255,0.2);
  letter-spacing:0.5px; margin-left:6px;
}
.sc-round-timer:empty{ display:none; }
body.light-mode .sc-round-timer{ color:rgba(0,0,0,0.55); }

/* Round completion pulse */
@keyframes scRoundPulse{
  0%  { transform:scale(1);    background:transparent; }
  18% { transform:scale(1.025); background:rgba(212,148,90,0.07); }
  38% { transform:scale(0.985); background:rgba(212,148,90,0.04); }
  100%{ transform:scale(1);    background:transparent; }
}
@keyframes scCheckPop{
  0%  { transform:scale(0) rotate(-15deg); opacity:0; }
  55% { transform:scale(1.25) rotate(5deg); opacity:1; }
  80% { transform:scale(0.92) rotate(-2deg); }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}
.sc-round-card.sc-round-just-done{
  animation:scRoundPulse 0.55s cubic-bezier(0.32,0.72,0,1);
  border-radius:12px;
}
/* Checkmark pops in when row is done */
.sc-card .set-block.set-row-done .sc-round-row::after{
  animation:scCheckPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
/* Row slides down + fades slightly when stamped */
@keyframes scRowStamp{
  0%  { opacity:1; transform:translateY(0); }
  30% { opacity:0.7; transform:translateY(2px); }
  100%{ opacity:1; transform:translateY(0); }
}
.sc-card .set-block.set-row-done .sc-round-row{
  animation:scRowStamp 0.35s cubic-bezier(0.32,0.72,0,1);
}

/* PR preview glow */
@keyframes scPrPreviewGlow{
  0%,100%{ box-shadow:0 0 6px rgba(212,188,138,0.2); }
  50%{ box-shadow:0 0 14px rgba(212,188,138,0.4); }
}
.sc-card .set-input.sc-pr-preview{
  color:#D4BC8A !important;
  border-color:rgba(212,188,138,0.3) !important;
  animation:scPrPreviewGlow 1s ease-in-out infinite;
}

/* ── COMPLETED ROW ──────────────────────────── */
.sc-card .set-block.set-row-done .sc-round-row{
  opacity:1 !important;
  background:rgba(212,148,90,0.04);
  position:relative;
}
.sc-card .set-block.set-row-done .sc-round-row::after{
  content:'\2713'; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:14px; font-weight:700; color:var(--accent-orange);
}
.sc-card .set-block.set-row-done .sc-round-letter{
  background:rgba(212,148,90,0.12) !important;
  color:var(--accent-orange) !important;
}
.sc-card .set-block.set-row-done .sc-round-ex-name{
  color:rgba(255,255,255,0.5) !important;
}
.sc-card .set-block.set-row-done .set-input{
  background:transparent !important;
  border-color:transparent !important;
  color:#fff !important;
}
.sc-card .set-block.set-row-done .set-num{ color:#fff !important; }

/* Cable done */
.sc-card .set-block.set-row-done.cable-done .sc-round-row{
  background:rgba(106,168,232,0.04);
}
.sc-card .set-block.set-row-done.cable-done .sc-round-row::after{ color:var(--blue); }
.sc-card .set-block.set-row-done.cable-done .sc-round-letter{
  background:rgba(106,168,232,0.12) !important;
  color:var(--blue) !important;
}
.sc-card .set-block.set-row-done .table-set-row:active{ opacity:0.8 !important; }

/* Light mode completed */
body.light-mode .sc-card .set-block.set-row-done .sc-round-row{
  background:rgba(60,160,115,0.04);
}
body.light-mode .sc-card .set-block.set-row-done .sc-round-row::after{ color:rgba(60,160,115,0.8); }
body.light-mode .sc-card .set-block.set-row-done .set-input{ color:#111 !important; }
body.light-mode .sc-card .set-block.set-row-done .set-num{ color:#111 !important; }
body.light-mode .sc-card .set-block.set-row-done .sc-round-ex-name{ color:rgba(0,0,0,0.65) !important; }
body.light-mode .sc-card .set-block.set-row-done .sc-round-letter{
  background:rgba(60,160,115,0.08) !important;
  color:rgba(60,160,115,0.7) !important;
}

/* PR done */
.sc-card .set-block.set-has-pr.set-row-done .sc-round-row{
  background:rgba(212,188,138,0.04);
}
.sc-card .set-block.set-has-pr.set-row-done .sc-round-row::after{
  color:#D4BC8A;
}
.sc-card .set-block.set-has-pr.set-row-done .set-input{
  color:#D4BC8A !important;
}
.sc-card .set-block.set-has-pr.set-row-done .sc-round-letter{
  background:rgba(212,188,138,0.1) !important;
  color:#D4BC8A !important;
}
body.light-mode .sc-card .set-block.set-has-pr.set-row-done .sc-round-row{
  background:rgba(180,155,90,0.04);
}

/* ── ACTIVE SET ─────────────────────────────── */
@keyframes scActiveFlash{
  0%,85%,100%{ background:rgba(162,100,190,0.03); }
  90%{ background:rgba(162,100,190,0.12); }
  95%{ background:rgba(162,100,190,0.04); }
}
@keyframes scNewActiveFlash{
  0%{ background:rgba(162,100,190,0.2); box-shadow:0 0 20px rgba(162,100,190,0.15); }
  20%{ background:rgba(162,100,190,0.03); box-shadow:none; }
  40%{ background:rgba(162,100,190,0.15); box-shadow:0 0 16px rgba(162,100,190,0.1); }
  60%{ background:rgba(162,100,190,0.03); box-shadow:none; }
  80%{ background:rgba(162,100,190,0.08); }
  100%{ background:rgba(162,100,190,0.03); }
}
@keyframes scZeroFlash{
  0%,85%,100%{ color:rgba(255,255,255,0.25); }
  90%{ color:rgba(162,100,190,0.9); }
}

.sc-card .set-block.ss-active-set .table-set-row,
.sc-card .set-block.ss-active-set .sc-round-row{
  animation:scActiveFlash 3s ease-in-out infinite !important;
  border-radius:12px !important;
}
.sc-card .set-block.ss-active-set.ss-new-active .table-set-row,
.sc-card .set-block.ss-active-set.ss-new-active .sc-round-row{
  animation:scNewActiveFlash 1.5s ease-in-out 1 !important;
}
.sc-card .set-block.ss-active-set .sc-round-letter{
  background:rgba(162,100,190,0.15) !important;
  color:rgba(162,100,190,1) !important;
}
.sc-card .set-block.ss-active-set .sc-round-ex-name{
  color:#fff !important;
  font-weight:700 !important;
}
.sc-card .set-block.ss-active-set .set-input.zero-value{
  border-color:rgba(162,100,190,0.2) !important;
  animation:scZeroFlash 3s ease-in-out infinite !important;
}
.sc-card .set-block.ss-active-set .sc-input-goal{
  color:rgba(162,100,190,0.5) !important;
}
.sc-card .set-block.ss-active-set .set-num{
  color:rgba(162,100,190,0.9) !important;
}

body.light-mode .sc-card .set-block.ss-active-set .sc-round-letter{
  background:rgba(140,80,170,0.1) !important;
  color:rgba(140,80,170,0.8) !important;
}
body.light-mode .sc-card .set-block.ss-active-set .sc-round-ex-name{
  color:#111 !important;
}
body.light-mode .sc-card .set-block.ss-active-set .set-input.zero-value{
  border-color:rgba(140,80,170,0.15) !important;
}

.sc-card .superset-exercise-item.ss-exercise-active .sc-letter{
  box-shadow:0 0 14px rgba(162,100,190,0.2);
}


/* ── Override old table-set-row input styles inside sc-card ── */
.sc-card .table-set-row .set-input{
  border:1.5px solid rgba(255,255,255,0.08) !important;
  border-radius:10px !important;
  border-bottom:1.5px solid rgba(255,255,255,0.08) !important;
  background:rgba(255,255,255,0.04) !important;
  box-shadow:none !important;
  transform:none !important;
}
.sc-card .table-set-row .set-input.zero-value{
  color:rgba(255,255,255,0.25) !important;
}
.sc-card .table-set-row .set-input:not(.zero-value){
  color:#fff !important;
  background:rgba(255,255,255,0.06) !important;
  border-color:rgba(255,255,255,0.12) !important;
}
.sc-card .table-set-row .set-input.active-input{
  border:1.5px solid rgba(162,100,190,0.5) !important;
  border-right:3px solid rgba(162,100,190,0.9) !important;
  animation:scInputCursorBlink 1s step-end infinite !important;
  background:rgba(162,100,190,0.06) !important;
  box-shadow:0 0 12px rgba(162,100,190,0.1) !important;
}
body.light-mode .sc-card .table-set-row .set-input{
  background:rgba(0,0,0,0.03) !important;
  color:#111 !important;
  border:1.5px solid rgba(0,0,0,0.08) !important;
  border-radius:10px !important;
}
body.light-mode .sc-card .table-set-row .set-input.zero-value{
  color:rgba(0,0,0,0.55) !important;
}
/* Hide old steppers/checkmarks in sc-card */
.sc-card .stepper-btn{ display:none !important; }
.sc-card .set-check{ display:none !important; }
.sc-card .input-with-steppers{ display:contents !important; }
.sc-card .input-group{ display:contents !important; }


/* ── VERTICAL STACK ──────────────────────────────────────── */
.sc-card .superset-blocks-container{
  display:flex !important; flex-direction:column !important;
  overflow:visible !important; scroll-snap-type:none !important;
}

/* ── WRONG TAP — red flash on incorrect set ──────────────── */
@keyframes scWrongFlash{
  0%{ background:rgba(255,80,80,0.2); }
  100%{ background:transparent; }
}
.sc-wrong-tap{
  animation:scWrongFlash 0.6s ease-out !important;
}

/* ── GUIDE TOAST ─────────────────────────────────────────── */
.sc-guide-toast{
  position:fixed;
  top:calc(env(safe-area-inset-top) + 60px);
  left:50%;
  transform:translateX(-50%) translateY(-20px);
  background:rgba(162,100,190,0.9);
  color:#fff;
  font-size:14px;
  font-weight:700;
  padding:10px 20px;
  border-radius:12px;
  z-index:9500;
  opacity:0;
  transition:opacity 0.2s ease, transform 0.2s ease;
  pointer-events:none;
  white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
.sc-guide-toast.visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
body.light-mode .sc-guide-toast{
  background:rgba(140,80,170,0.9);
}

/* ── REST TIMER OVERLAY ──────────────────────────────────── */
.sc-rest-overlay{
  position:fixed;
  inset:0;
  z-index:9000;
  background:rgba(0,0,0,0.7);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity 0.25s ease;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.sc-rest-overlay.visible{ opacity:1; }
.sc-rest-card{
  background:linear-gradient(165deg, #1a1a24 0%, #15151e 100%);
  border-radius:24px;
  padding:32px 40px;
  text-align:center;
  min-width:240px;
  box-shadow:0 12px 48px rgba(0,0,0,0.5);
  border:1px solid rgba(255,255,255,0.06);
}
body.light-mode .sc-rest-card{
  background:linear-gradient(165deg, #fff 0%, #f8f7f5 100%);
  box-shadow:0 8px 32px rgba(0,0,0,0.12);
  border-color:rgba(0,0,0,0.06);
}
.sc-rest-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:3px;
  color:rgba(162,100,190,0.7);
  margin-bottom:16px;
  text-transform:uppercase;
}
.sc-rest-ring-wrap{
  position:relative;
  width:120px; height:120px;
  margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
}
.sc-rest-ring{
  width:120px; height:120px;
  transform:rotate(-90deg);
  transition:transform 0.8s ease-out;
  transform-origin:center center;
}
.sc-rest-ring-bg{
  fill:none;
  stroke:rgba(255,255,255,0.06);
  stroke-width:6;
}
body.light-mode .sc-rest-ring-bg{ stroke:rgba(0,0,0,0.06); }
.sc-rest-ring-fill{
  fill:none;
  stroke:rgba(162,100,190,0.6);
  stroke-width:6;
  stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(162,100,190,0.3));
}
.sc-rest-time{
  position:absolute;
  inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:48px;
  font-weight:800;
  color:#fff;
  letter-spacing:-2px;
  font-variant-numeric:tabular-nums;
}
body.light-mode .sc-rest-time{ color:#111; }
.sc-rest-sub{
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.4);
  margin-bottom:20px;
  line-height:1.4;
}
body.light-mode .sc-rest-sub{ color:rgba(0,0,0,0.35); }
.sc-rest-actions{
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
}
.sc-rest-skip{
  padding:10px 28px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.15s;
}
.sc-rest-skip:active{
  background:rgba(255,255,255,0.15);
  transform:scale(0.95);
}
.sc-rest-extend{
  padding:8px 14px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  background:transparent;
  color:rgba(255,255,255,0.5);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.15s;
}
.sc-rest-extend:active{
  background:rgba(255,255,255,0.06);
  transform:scale(0.95);
}
body.light-mode .sc-rest-skip{
  background:rgba(0,0,0,0.06);
  color:#111;
}
body.light-mode .sc-rest-extend{
  border-color:rgba(0,0,0,0.08);
  color:rgba(0,0,0,0.65);
}
/* Keep old bar CSS for backward compat */
.sc-rest-bar-track{ display:none; }
.sc-rest-bar-fill{ display:none; }

/* ═══ REST TIMER — Breathing Glow ═══ */

/* ── SUPERSET rest = purple glow ── */
@keyframes restBreatheSuperset{
  0%,100%{ box-shadow:0 12px 48px rgba(0,0,0,0.5), 0 0 30px rgba(162,100,190,0.08), 0 0 60px rgba(162,100,190,0.04); }
  50%{ box-shadow:0 12px 48px rgba(0,0,0,0.5), 0 0 80px rgba(162,100,190,0.3), 0 0 150px rgba(162,100,190,0.15), 0 0 200px rgba(120,80,200,0.06); }
}
@keyframes restRingPulseSuperset{
  0%,100%{ filter:drop-shadow(0 0 8px rgba(162,100,190,0.3)); stroke-width:6; }
  50%{ filter:drop-shadow(0 0 25px rgba(162,100,190,0.7)) drop-shadow(0 0 50px rgba(162,100,190,0.3)); stroke-width:7.5; }
}
@keyframes restOverlayBreatheSuperset{
  0%,100%{ background:rgba(0,0,0,0.7); }
  50%{ background:rgba(12,5,20,0.8); }
}
@keyframes restTimePulseSuperset{
  0%,100%{ opacity:1; text-shadow:0 0 0 transparent; }
  50%{ opacity:0.8; text-shadow:0 0 30px rgba(162,100,190,0.3), 0 0 60px rgba(162,100,190,0.1); }
}
@keyframes restRingBgPulseSuperset{
  0%,100%{ stroke:rgba(162,100,190,0.06); }
  50%{ stroke:rgba(162,100,190,0.15); }
}
@keyframes restCardBorderSuperset{
  0%,100%{ border-color:rgba(162,100,190,0.08); }
  50%{ border-color:rgba(162,100,190,0.2); }
}

.sc-rest-superset.visible{
  animation:restOverlayBreatheSuperset 4s ease-in-out infinite !important;
}
.sc-rest-superset.visible .sc-rest-card{
  animation:restBreatheSuperset 4s ease-in-out infinite, restCardBorderSuperset 4s ease-in-out infinite !important;
  border:1px solid rgba(162,100,190,0.08) !important;
}
.sc-rest-superset.visible .sc-rest-ring-fill{
  animation:restRingPulseSuperset 4s ease-in-out infinite !important;
}
.sc-rest-superset.visible .sc-rest-ring-bg{
  animation:restRingBgPulseSuperset 4s ease-in-out infinite !important;
}
.sc-rest-superset.visible .sc-rest-time{
  animation:restTimePulseSuperset 4s ease-in-out infinite !important;
}

/* ── STANDARD rest = white glow ── */
@keyframes restBreatheStd{
  0%,100%{ box-shadow:0 12px 48px rgba(0,0,0,0.5), 0 0 40px rgba(255,255,255,0.06), 0 0 80px rgba(255,255,255,0.02); }
  50%{ box-shadow:0 12px 48px rgba(0,0,0,0.5), 0 0 100px rgba(255,255,255,0.2), 0 0 180px rgba(255,255,255,0.1), 0 0 260px rgba(255,255,255,0.04); }
}
@keyframes restRingPulseStd{
  0%,100%{ filter:drop-shadow(0 0 10px rgba(255,255,255,0.25)); stroke-width:6; }
  50%{ filter:drop-shadow(0 0 30px rgba(255,255,255,0.6)) drop-shadow(0 0 60px rgba(255,255,255,0.25)); stroke-width:7.5; }
}
@keyframes restOverlayBreatheStd{
  0%,100%{ background:rgba(0,0,0,0.7); }
  50%{ background:rgba(8,8,12,0.8); }
}
@keyframes restTimePulseStd{
  0%,100%{ opacity:1; text-shadow:0 0 0 transparent; }
  50%{ opacity:0.8; text-shadow:0 0 40px rgba(255,255,255,0.25), 0 0 80px rgba(255,255,255,0.08); }
}
@keyframes restRingBgPulseStd{
  0%,100%{ stroke:rgba(255,255,255,0.05); }
  50%{ stroke:rgba(255,255,255,0.15); }
}
@keyframes restCardBorderStd{
  0%,100%{ border-color:rgba(255,255,255,0.06); }
  50%{ border-color:rgba(255,255,255,0.2); }
}

.sc-rest-standard.visible{
  animation:restOverlayBreatheStd 4s ease-in-out infinite !important;
}
.sc-rest-standard.visible .sc-rest-card{
  animation:restBreatheStd 4s ease-in-out infinite, restCardBorderStd 4s ease-in-out infinite !important;
  border:1px solid rgba(255,255,255,0.05) !important;
}
.sc-rest-standard.visible .sc-rest-ring-fill{
  animation:restRingPulseStd 4s ease-in-out infinite !important;
  stroke:rgba(255,255,255,0.6) !important;
  filter:drop-shadow(0 0 10px rgba(255,255,255,0.25)) !important;
}
.sc-rest-standard.visible .sc-rest-ring-bg{
  animation:restRingBgPulseStd 4s ease-in-out infinite !important;
}
.sc-rest-standard.visible .sc-rest-time{
  animation:restTimePulseStd 4s ease-in-out infinite !important;
}
.sc-rest-standard.visible .sc-rest-label{
  color:rgba(255,255,255,0.5) !important;
}

/* Light mode — standard = black glow */
@keyframes restBreatheStdLight{
  0%,100%{ box-shadow:0 8px 32px rgba(0,0,0,0.12), 0 0 30px rgba(0,0,0,0.03); }
  50%{ box-shadow:0 8px 32px rgba(0,0,0,0.12), 0 0 70px rgba(0,0,0,0.1), 0 0 130px rgba(0,0,0,0.04); }
}
body.light-mode .sc-rest-standard.visible .sc-rest-card{
  animation:restBreatheStdLight 4s ease-in-out infinite, restCardBorderStd 4s ease-in-out infinite !important;
}
body.light-mode .sc-rest-standard.visible .sc-rest-ring-fill{
  stroke:rgba(0,0,0,0.55) !important;
}
body.light-mode .sc-rest-standard.visible .sc-rest-label{
  color:rgba(0,0,0,0.65) !important;
}

/* Light mode — superset = purple glow */
@keyframes restBreatheSupersetLight{
  0%,100%{ box-shadow:0 8px 32px rgba(0,0,0,0.12), 0 0 30px rgba(140,80,180,0.05); }
  50%{ box-shadow:0 8px 32px rgba(0,0,0,0.12), 0 0 70px rgba(140,80,180,0.2), 0 0 130px rgba(140,80,180,0.08); }
}
body.light-mode .sc-rest-superset.visible .sc-rest-card{
  animation:restBreatheSupersetLight 4s ease-in-out infinite, restCardBorderSuperset 4s ease-in-out infinite !important;
}
/* ═══ END REST TIMER BREATHING ═══ */


/* ── SS TABLE: Rest column + summary header ────────────── */
.sets-table-header .col-rest{
  width:44px;
  flex-shrink:0;
  text-align:center;
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.6);
  letter-spacing:1px;
  text-transform:uppercase;
}
body.light-mode .sets-table-header .col-rest{
  color:rgba(0,0,0,0.65);
}
.sets-table-header .col-set-summary{
  width:72px;
  flex-shrink:0;
  text-align:left;
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.6);
  letter-spacing:0.5px;
}
body.light-mode .sets-table-header .col-set-summary{
  color:rgba(0,0,0,0.65);
}
/* Per-row rest cell inside table */
.set-rest-inline{
  width:44px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  border-radius:6px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  padding:4px 0;
}
.set-rest-inline .info-bar-rest-value{
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.35);
  position:relative;
  z-index:1;
}
.set-rest-inline .info-bar-rest-fill{
  position:absolute;
  bottom:0; left:0; right:0;
  height:0;
  background:rgba(212,148,90,0.12);
  border-radius:6px;
  transition:height 0.3s ease;
  pointer-events:none;
}
.set-rest-inline.counting .info-bar-rest-value{
  color:rgba(212,148,90,0.9) !important;
  font-weight:700 !important;
}
.set-rest-inline[data-rest="0"] .info-bar-rest-value{
  color:rgba(255,255,255,0.15);
}
.set-rest-inline[data-rest="0"]{
  cursor:default;
}
body.light-mode .set-rest-inline .info-bar-rest-value{
  color:rgba(0,0,0,0.6);
}
body.light-mode .set-rest-inline .info-bar-rest-fill{
  background:rgba(34,160,94,0.08);
}
body.light-mode .set-rest-inline.counting .info-bar-rest-value{
  color:rgba(34,160,94,0.9) !important;
}
body.light-mode .set-rest-inline[data-rest="0"] .info-bar-rest-value{
  color:rgba(0,0,0,0.65);
}

/* ── TWO-LINE TABLE HEADERS ────────────────────────────── */
.col-hdr{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.1;
}
.col-hdr-num{
  font-size:14px;
  font-weight:800;
  color:rgba(255,255,255,0.7);
}
.col-hdr-label{
  font-size:8px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:rgba(255,255,255,0.35);
}
body.light-mode .col-hdr-num{ color:rgba(0,0,0,0.65); }
body.light-mode .col-hdr-label{ color:rgba(0,0,0,0.6); }

/* ── TWO-LINE SET LABELS ──────────────────────────────── */
.set-num-2line{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1;
  width:72px !important;
  flex-shrink:0;
}
.set-num-word{
  font-size:8px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:rgba(255,255,255,0.3);
}
.set-num-val{
  font-size:14px;
  font-weight:800;
  color:rgba(255,255,255,0.6);
}
body.light-mode .set-num-word{ color:rgba(0,0,0,0.25); }
body.light-mode .set-num-val{ color:rgba(0,0,0,0.7); }

/* ── MUSCLE IMAGE ROW (below exercise name) ───────────── */
.ss-muscle-row{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 16px 6px;
  gap:8px;
}
.ss-muscle-row .ss-muscle-img{
  width:40px;
  height:40px;
  opacity:0.5;
  margin-left:0;
}
.ss-muscle-row .ss-muscle-label{
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.3);
}
body.light-mode .ss-muscle-row .ss-muscle-label{
  color:rgba(0,0,0,0.6);
}

/* ── WIDER TEMPO/REST/DONE COLUMNS ────────────────────── */
.sets-table-header .col-tempo{
  width:60px;
}
.set-tempo{
  width:60px;
}
.sets-table-header .col-rest{
  width:48px;
}
.set-rest-inline{
  width:48px;
}
.sets-table-header .col-check{
  width:40px;
}
.table-set-row .set-check{
  width:40px !important;
}
/* Tempo column in table */
.sets-table-header .col-tempo{
  width:52px;
  flex-shrink:0;
  text-align:center;
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.6);
  letter-spacing:0.5px;
  text-transform:uppercase;
}
body.light-mode .sets-table-header .col-tempo{
  color:rgba(0,0,0,0.65);
}
.set-tempo{
  width:52px;
  flex-shrink:0;
  text-align:center;
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.3);
  letter-spacing:0.3px;
  white-space:nowrap;
}
body.light-mode .set-tempo{
  color:rgba(0,0,0,0.6);
}
/* Header prescription value (e.g. "7 Mins") */
.col-prescription{
  flex:1;
  text-align:center;
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.6);
  letter-spacing:0.5px;
}
body.light-mode .col-prescription{
  color:rgba(0,0,0,0.65);
}

/* ── COLUMN HEADERS ──────────────────────────────────────── */
.sets-table-header{
  display:flex;
  align-items:center;
  padding:10px 16px 6px;
  gap:0;
  margin-top:2px;
  width:100%;
  box-sizing:border-box;
  align-self:stretch;
}
.sets-table-header .col-set{
  width:56px;
  flex-shrink:0;
  text-align:left;
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.6);
  letter-spacing:1px;
  text-transform:uppercase;
}
.sets-table-header .col-prev{
  display:none;
}
.sets-table-header .col-input{
  flex:1;
  text-align:center;
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.6);
  letter-spacing:1px;
  text-transform:uppercase;
}
.sets-table-header .col-check{
  width:36px;
  flex-shrink:0;
  text-align:center;
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.6);
  letter-spacing:1px;
}
body.light-mode .sets-table-header .col-set,
body.light-mode .sets-table-header .col-input,
body.light-mode .sets-table-header .col-check{
  color:rgba(0,0,0,0.65);
}

/* ── TABLE SET ROWS ──────────────────────────────────────── */
.compact-set-row.table-set-row{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  padding:10px 16px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  margin:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
}
body.light-mode .compact-set-row.table-set-row{
  background:transparent !important;
  border:none !important;
}

/* Set number - now shows "Set 1", "Set 2" etc */
.set-num{
  width:56px;
  flex-shrink:0;
  text-align:left;
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.6);
  white-space:nowrap;
}
.table-set-row .set-num{
  width:56px !important;
  flex-shrink:0 !important;
  text-align:left !important;
}
.table-set-row .set-check{
  width:36px !important;
  flex-shrink:0 !important;
}
body.light-mode .set-num{
  color:rgba(0,0,0,0.65);
}

/* Previous data - hidden in new layout */
.set-prev{
  display:none !important;
}
.set-prev.has-data{
  color:rgba(255,255,255,0.3);
}
body.light-mode .set-prev{
  color:rgba(0,0,0,0.12);
}
body.light-mode .set-prev.has-data{
  color:rgba(0,0,0,0.6);
}

/* Input groups: centered in flex columns */
.table-set-row .input-group{
  flex:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
}
.table-set-row .input-with-steppers{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
}

/* Inputs: clean bottom-accent */
.table-set-row .set-input{
  width:52px !important;
  padding:8px 2px !important;
  font-size:20px !important;
  font-weight:700 !important;
  text-align:center !important;
  background:transparent !important;
  border:none !important;
  border-bottom:2px solid rgba(255,255,255,0.08) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:rgba(255,255,255,0.85) !important;
  letter-spacing:-0.3px !important;
}
.table-set-row .set-input.zero-value{
  border-bottom:2px dashed rgba(255,255,255,0.05) !important;
  color:rgba(255,255,255,0.1) !important;
}
.table-set-row .set-input.free:not(.zero-value){
  border:none !important;
  border-bottom:2px solid rgba(212,148,90,0.25) !important;
}
.table-set-row .set-input.cable:not(.zero-value){
  border:none !important;
  border-bottom:2px solid rgba(126,181,226,0.25) !important;
}
.table-set-row .set-input.active-input,
.table-set-row .set-input:focus{
  border:none !important;
  border-bottom:2px solid rgba(255,255,255,0.3) !important;
  box-shadow:none !important;
  transform:none !important;
  animation:none !important;
}
.table-set-row .set-input.num-up,
.table-set-row .set-input.num-down{
  transform:none !important;
  animation:none !important;
}
body.light-mode .table-set-row .set-input{
  background:transparent !important;
  border:none !important;
  border-bottom:2px solid rgba(0,0,0,0.06) !important;
  color:rgba(0,0,0,0.85) !important;
}
body.light-mode .table-set-row .set-input.zero-value{
  border-bottom:2px dashed rgba(0,0,0,0.04) !important;
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .table-set-row .set-input.free:not(.zero-value){
  border:none !important;
  border-bottom:2px solid rgba(34,160,94,0.25) !important;
}
body.light-mode .table-set-row .set-input.cable:not(.zero-value){
  border:none !important;
  border-bottom:2px solid rgba(80,136,212,0.25) !important;
}

/* Steppers: ghost circles */
.table-set-row .stepper-btn{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  font-size:20px !important;
  font-weight:300 !important;
  line-height:1 !important;
  background:transparent !important;
  border:1.5px solid rgba(255,255,255,0.08) !important;
  border-radius:50% !important;
  box-shadow:none !important;
  color:rgba(255,255,255,0.25) !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.table-set-row .stepper-btn:active{
  background:rgba(255,255,255,0.06) !important;
  transform:none !important;
  color:rgba(255,255,255,0.5) !important;
}
body.light-mode .table-set-row .stepper-btn{
  border:1.5px solid rgba(0,0,0,0.08) !important;
  color:rgba(0,0,0,0.55) !important;
  background:transparent !important;
  border-radius:50% !important;
  box-shadow:none !important;
}
body.light-mode .table-set-row .stepper-btn:active{
  background:rgba(0,0,0,0.04) !important;
  color:rgba(0,0,0,0.65) !important;
}

/* Set check: visible in table */
.table-set-row .set-check{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  flex-shrink:0 !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  border-radius:0 !important;
  border:none !important;
  background:transparent !important;
  transition:transform 0.2s ease, filter 0.2s ease !important;
}
.table-set-row .set-check svg{
  width:20px !important;
  height:20px !important;
  stroke:rgba(255,255,255,0.15) !important;
  stroke-width:2.5 !important;
  fill:none !important;
  transition:stroke 0.2s ease !important;
}
body.light-mode .table-set-row .set-check{
  border:none !important;
}
body.light-mode .table-set-row .set-check svg{
  stroke:rgba(0,0,0,0.12) !important;
}
/* Completed set check */
.set-block.set-row-done .table-set-row .set-check{
  background:transparent !important;
  border:none !important;
}
.set-block.set-row-done .table-set-row .set-check svg{
  stroke:rgba(212,148,90,0.85) !important;
}
.set-block.set-row-done.cable-done .table-set-row .set-check{
  background:transparent !important;
  border:none !important;
}
.set-block.set-row-done.cable-done .table-set-row .set-check svg{
  stroke:rgba(126,181,226,0.8) !important;
}
body.light-mode .set-block.set-row-done .table-set-row .set-check{
  background:transparent !important;
  border:none !important;
}
body.light-mode .set-block.set-row-done .table-set-row .set-check svg{
  stroke:rgba(34,160,94,0.7) !important;
}
/* Completed set: fade row slightly */
.set-block.set-row-done .table-set-row .set-num,
.set-block.set-row-done .table-set-row .set-prev{
  opacity:0.4 !important;
}
.set-block.set-row-done .table-set-row .set-input{
  opacity:0.5 !important;
}

/* ── SET DOTS: hidden (table shows all) ──────────────────── */
.set-dots{
  display:none !important;
}

/* ── SET BANNERS: hidden (row numbers replace) ───────────── */
.set-banner-slim{
  display:none !important;
}

/* ── SET BLOCKS: stacked, no gap ─────────────────────────── */
.compact-set-block{
  padding:0 !important;
  gap:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
}
.compact-sets{
  gap:0 !important;
  padding:0 !important;
  width:100% !important;
  align-self:stretch !important;
  box-sizing:border-box !important;
}

/* ── REST BARS: thin separator ───────────────────────────── */
.compact-sets .rest-pill-row{
  padding:0 16px 0 44px !important;
  display:flex !important;
  justify-content:flex-start !important;
}
.rest-bar.between-rest{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  min-height:auto !important;
  height:auto !important;
  border-radius:0 !important;
  width:auto !important;
  min-width:0 !important;
}
.rest-bar-fill{ display:none !important; }
.rest-bar-text{
  font-size:9px !important;
  font-weight:500 !important;
  color:rgba(255,255,255,0.1) !important;
  letter-spacing:0.5px !important;
}
body.light-mode .rest-bar-text{ color:rgba(0,0,0,0.08) !important; }
body.light-mode .rest-bar.between-rest{ background:transparent !important; border:none !important; }
.active-rest-bar{
  height:26px !important;
  border-radius:8px !important;
  background:rgba(255,255,255,0.03) !important;
  border:1px solid rgba(255,255,255,0.05) !important;
}

/* ── CARD CONTAINERS: invisible ──────────────────────────── */
.ex-card.expanded,
.ex-card.expanded.all-complete,
.ex-card.expanded.has-pr,
.ex-card.expanded.all-complete:not(.has-pr),
.ex-card.expanded.all-complete:not(.has-pr)[data-week-type="cable"],
.ex-card.expanded.has-pr:not(.all-complete),
.ex-card.expanded.all-complete.has-pr{
  box-shadow:none !important;
  border:none !important;
  background:transparent !important;
  overflow:visible !important;
  margin-bottom:20px !important;
  padding-bottom:12px !important;
  border-bottom:1px solid rgba(255,255,255,0.04) !important;
  border-radius:0 !important;
}
.ex-card.expanded::before,
.ex-card.expanded::after{
  display:none !important;
}
body.light-mode .ex-card.expanded,
body.light-mode .ex-card.expanded.all-complete,
body.light-mode .ex-card.expanded.has-pr,
body.light-mode .ex-card.expanded.all-complete:not(.has-pr),
body.light-mode .ex-card.expanded.has-pr:not(.all-complete),
body.light-mode .ex-card.expanded.all-complete.has-pr{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  border-bottom:1px solid rgba(0,0,0,0.04) !important;
}
.superset-combined-card{ box-shadow:none !important; border:none !important; background:transparent !important; border-radius:0 !important; margin-bottom:20px !important; padding-bottom:12px !important; border-bottom:1px solid rgba(255,255,255,0.04) !important; }
.superset-combined-card.all-complete,
.superset-combined-card.has-pr,
.superset-combined-card.all-complete.has-pr,
.superset-combined-card.all-complete:not(.has-pr),
.superset-combined-card.has-pr:not(.all-complete){ box-shadow:none !important; border:none !important; background:transparent !important; }
.superset-combined-card::before, .superset-combined-card::after{ display:none !important; }
body.light-mode .superset-combined-card,
body.light-mode .superset-combined-card.all-complete,
body.light-mode .superset-combined-card.has-pr{ background:transparent !important; border:none !important; border-bottom:1px solid rgba(0,0,0,0.04) !important; box-shadow:none !important; }
.card-hero-image-wrap{ border:none !important; box-shadow:none !important; }
.exercise-tab{ box-shadow:none !important; border:none !important; }
.special-set-box{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding-top:12px !important;
  margin-top:20px !important;
}
body.light-mode .special-set-box{
  border:none !important;
  background:transparent !important;
}
.special-set-box > .ex-number-circle-wrapper,
.special-set-group .group-number-circle{
  display:none !important;
}

/* ── SUPERSET: tighter, cleaner ──────────────────────────── */
.superset-label-row{
  padding:0px 16px 0px !important;
  gap:6px !important;
  margin:0 !important;
}
/* Eliminate gap between circles and superset card */
.superset-combined-card{
  padding:0 !important;
  margin:0 !important;
  margin-top:-4px !important;
}
.superset-combined-card .superset-label-row{
  padding-top:0 !important;
}
.superset-label-text{
  font-size:10px !important;
  letter-spacing:2px !important;
  color:rgba(162,100,190,0.4) !important;
}
.superset-info-btn{
  width:20px !important;
  height:20px !important;
  border-radius:6px !important;
  border:1px solid rgba(162,100,190,0.12) !important;
  background:transparent !important;
}
.superset-info-btn svg{
  width:12px !important;
  height:12px !important;
  stroke:rgba(162,100,190,0.3) !important;
}
/* A/B pill tabs for superset swipe */
.ss-pill-tabs{
  display:flex;
  justify-content:center;
  gap:6px;
  padding:6px 16px 4px;
}
.ss-pill-tab{
  width:28px;
  height:28px;
  border-radius:50%;
  border:1.5px solid rgba(162,100,190,0.2);
  background:transparent;
  color:rgba(255,255,255,0.35);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:all 0.25s ease;
  -webkit-tap-highlight-color:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ss-pill-tab.active{
  background:rgba(162,100,190,0.18);
  border-color:rgba(162,100,190,0.45);
  color:rgba(255,255,255,0.9);
}
body.light-mode .ss-pill-tab{
  border-color:rgba(162,100,190,0.15);
  color:rgba(0,0,0,0.6);
}
body.light-mode .ss-pill-tab.active{
  background:rgba(162,100,190,0.12);
  border-color:rgba(162,100,190,0.4);
  color:rgba(0,0,0,0.8);
}
/* Swipe hint animation */
@keyframes ssSwipeHint{
  0%{ transform:translateX(0); }
  30%{ transform:translateX(-30px); }
  60%{ transform:translateX(5px); }
  100%{ transform:translateX(0); }
}
.superset-blocks-container.swipe-hint > .superset-exercise-item{
  animation:ssSwipeHint 0.6s ease-out;
}
/* Flash row on partner exercise */
@keyframes ssFlashRow{
  0%{ background:transparent; box-shadow:none; }
  15%{ background:rgba(162,100,190,0.25); box-shadow:0 0 12px rgba(162,100,190,0.3); }
  40%{ background:rgba(162,100,190,0.08); box-shadow:none; }
  60%{ background:rgba(162,100,190,0.2); box-shadow:0 0 8px rgba(162,100,190,0.2); }
  80%{ background:rgba(162,100,190,0.1); }
  100%{ background:transparent; box-shadow:none; }
}
.ss-flash-row{
  animation:ssFlashRow 2s ease-out !important;
  border-radius:8px;
}
body.light-mode .ss-flash-row{
  animation:ssFlashRow 2s ease-out !important;
}
/* Pill pulse for target exercise */
@keyframes ssPillPulse{
  0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(162,100,190,0.5); }
  40%{ transform:scale(1.15); box-shadow:0 0 0 6px rgba(162,100,190,0); }
  70%{ transform:scale(1.05); box-shadow:0 0 0 0 rgba(162,100,190,0.3); }
  100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(162,100,190,0); }
}
.ss-pill-tab.ss-pill-pulse{
  animation:ssPillPulse 1.2s ease-out;
}
/* Swipe arrow on superset exercise items */
.ss-swipe-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  padding:10px 0 4px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  opacity:0.5;
  transition:opacity 0.2s ease;
}
.ss-swipe-arrow:active{
  opacity:0.9;
}
.ss-swipe-arrow svg{
  width:24px;
  height:24px;
  stroke:rgba(162,100,190,0.8);
  stroke-width:2.5;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ss-swipe-arrow .ss-arrow-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(162,100,190,0.6);
}
body.light-mode .ss-swipe-arrow svg{
  stroke:rgba(162,100,190,0.7);
}
body.light-mode .ss-swipe-arrow .ss-arrow-label{
  color:rgba(162,100,190,0.5);
}
/* Superset onboarding overlay */
.ss-onboard-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,0.7);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  transition:opacity 0.3s ease;
  pointer-events:none;
}
.ss-onboard-overlay.visible{
  opacity:1;
  pointer-events:auto;
}
.ss-onboard-card{
  background:#1a1a24;
  border:1px solid rgba(162,100,190,0.25);
  border-radius:20px;
  padding:28px 24px 24px;
  max-width:340px;
  width:100%;
  text-align:center;
}
.ss-onboard-title{
  font-size:18px;
  font-weight:800;
  color:rgba(255,255,255,0.92);
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:20px;
}
.ss-onboard-steps{
  display:flex;
  flex-direction:column;
  gap:14px;
  text-align:left;
  margin-bottom:16px;
}
.ss-onboard-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.ss-onboard-num{
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(162,100,190,0.2);
  border:1.5px solid rgba(162,100,190,0.4);
  color:rgba(162,100,190,0.9);
  font-size:12px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ss-onboard-text{
  font-size:13px;
  color:rgba(255,255,255,0.7);
  line-height:1.5;
}
.ss-onboard-text b{
  color:rgba(255,255,255,0.95);
  font-weight:700;
}
.ss-onboard-hint{
  font-size:12px;
  color:rgba(162,100,190,0.6);
  font-weight:600;
  letter-spacing:0.5px;
  margin-bottom:18px;
}
.ss-onboard-btn{
  flex:1;
  padding:12px;
  border:none;
  border-radius:12px;
  background:rgba(162,100,190,0.2);
  color:rgba(162,100,190,0.9);
  font-size:14px;
  font-weight:700;
  letter-spacing:0.5px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ss-onboard-btn:active{
  background:rgba(162,100,190,0.35);
}
.ss-onboard-btn-row{
  display:flex;
  gap:10px;
}
.ss-onboard-dismiss{
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.4);
  font-size:12px;
}
.ss-onboard-dismiss:active{
  background:rgba(255,255,255,0.12);
}
/* Standard card onboarding uses green/blue instead of purple */
.ss-onboard-overlay.std-onboard .ss-onboard-card{
  border-color:rgba(212,148,90,0.25);
}
.ss-onboard-overlay.std-onboard .ss-onboard-num{
  background:rgba(212,148,90,0.2);
  border-color:rgba(212,148,90,0.4);
  color:rgba(212,148,90,0.9);
}
.ss-onboard-overlay.std-onboard .ss-onboard-hint{
  color:rgba(212,148,90,0.6);
}
.ss-onboard-overlay.std-onboard .ss-onboard-btn{
  background:rgba(212,148,90,0.2);
  color:rgba(212,148,90,0.9);
}
.ss-onboard-overlay.std-onboard .ss-onboard-btn:active{
  background:rgba(212,148,90,0.35);
}
.ss-onboard-overlay.std-onboard.cable .ss-onboard-card{
  border-color:rgba(126,181,226,0.25);
}
.ss-onboard-overlay.std-onboard.cable .ss-onboard-num{
  background:rgba(126,181,226,0.2);
  border-color:rgba(126,181,226,0.4);
  color:rgba(126,181,226,0.9);
}
.ss-onboard-overlay.std-onboard.cable .ss-onboard-hint{
  color:rgba(126,181,226,0.6);
}
.ss-onboard-overlay.std-onboard.cable .ss-onboard-btn{
  background:rgba(126,181,226,0.2);
  color:rgba(126,181,226,0.9);
}
.ss-onboard-overlay.std-onboard.cable .ss-onboard-btn:active{
  background:rgba(126,181,226,0.35);
}
@keyframes ssArrowFlash{
  0%{ opacity:0.3; transform:translateX(0); }
  25%{ opacity:1; transform:translateX(4px); }
  50%{ opacity:0.3; transform:translateX(0); }
  75%{ opacity:1; transform:translateX(4px); }
  100%{ opacity:0.3; transform:translateX(0); }
}
@keyframes ssArrowFlashLeft{
  0%{ opacity:0.3; transform:translateX(0); }
  25%{ opacity:1; transform:translateX(-4px); }
  50%{ opacity:0.3; transform:translateX(0); }
  75%{ opacity:1; transform:translateX(-4px); }
  100%{ opacity:0.3; transform:translateX(0); }
}
.ss-swipe-arrow.ss-arrow-flashing svg{
  animation:ssArrowFlash 1.5s ease-in-out infinite;
}
.ss-swipe-arrow.ss-swipe-left.ss-arrow-flashing svg{
  animation:ssArrowFlashLeft 1.5s ease-in-out infinite;
}
.superset-exercise-item + .superset-exercise-item{
  margin-top:0 !important;
  padding-top:0 !important;
  border-top:none !important;
}
body.light-mode .superset-exercise-item + .superset-exercise-item{
  border-top-color:transparent !important;
}
.superset-exercise-name{
  font-size:18px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.9) !important;
  text-align:center !important;
}
body.light-mode .superset-exercise-name{ color:rgba(0,0,0,0.9) !important; }
.superset-set-label{
  font-size:11px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.25) !important;
  background:none !important;
  border:none !important;
}
body.light-mode .superset-set-label{ color:rgba(0,0,0,0.25) !important; }
.superset-meta{
  font-size:12px !important;
  padding:1px 0 !important;
  color:rgba(255,255,255,0.3) !important;
  text-align:center !important;
}
body.light-mode .superset-meta{ color:rgba(0,0,0,0.6) !important; }
.superset-block{ padding:4px 8px !important; }
.superset-exercise-item{ padding:2px 12px !important; }
.superset-x{ color:rgba(255,255,255,0.06) !important; font-size:12px !important; }
body.light-mode .superset-x{ color:rgba(0,0,0,0.06) !important; }
.superset-pr-inline, .superset-pr-inline{
  background:none !important;
  border:none !important;
  padding:2px 0 !important;
  justify-content:center !important;
}
.superset-pr-label{
  background:none !important;
  border:none !important;
  padding:0 !important;
  font-size:9px !important;
  color:rgba(255,255,255,0.2) !important;
}
body.light-mode .superset-pr-label{ color:rgba(0,0,0,0.55) !important; }
.superset-set-inputs{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:4px 16px !important;
  margin:0 !important;
}
body.light-mode .superset-set-inputs{
  background:transparent !important;
  border:none !important;
}
/* Superset inputs: match table style */
.superset-input{
  width:52px !important;
  padding:8px 2px !important;
  font-size:20px !important;
  font-weight:700 !important;
  text-align:center !important;
  background:transparent !important;
  border:none !important;
  border-bottom:2px solid rgba(255,255,255,0.08) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:rgba(255,255,255,0.85) !important;
}
.superset-input.zero-value{ border:none !important; border-bottom:2px dashed rgba(255,255,255,0.05) !important; background:transparent !important; color:rgba(255,255,255,0.1) !important; }
.superset-input.free:not(.zero-value){ border:none !important; border-bottom:2px solid rgba(212,148,90,0.25) !important; background:transparent !important; }
.superset-input.cable:not(.zero-value){ border:none !important; border-bottom:2px solid rgba(126,181,226,0.25) !important; background:transparent !important; }
body.light-mode .superset-input{ background:transparent !important; border:none !important; border-bottom:2px solid rgba(0,0,0,0.06) !important; color:rgba(0,0,0,0.85) !important; }
.superset-set-input-group .stepper-btn{
  width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important;
  font-size:18px !important; background:transparent !important;
  border:1.5px solid rgba(255,255,255,0.08) !important; border-radius:50% !important;
  box-shadow:none !important; color:rgba(255,255,255,0.25) !important;
}
body.light-mode .superset-set-input-group .stepper-btn{
  border:1.5px solid rgba(0,0,0,0.08) !important; color:rgba(0,0,0,0.55) !important;
}
.superset-input-unit{
  font-size:10px !important; font-weight:600 !important; color:rgba(255,255,255,0.2) !important;
  background:none !important; border:none !important; letter-spacing:1px !important;
}
body.light-mode .superset-input-unit{ color:rgba(0,0,0,0.55) !important; }
.superset-set-row{ padding:10px 12px !important; }
.superset-set-inputs{ padding:8px 12px !important; }

/* ── EFFECTS: off ────────────────────────────────────────── */
.stepper-glow{ animation:none !important; }
.ex-media-btn{ border:none !important; background:transparent !important; box-shadow:none !important; }
.goal-pill{ background:none !important; border:none !important; box-shadow:none !important; display:none !important; }
.special-set-corner-label{ background:none !important; border:none !important; padding:0 !important; }

/* ── START EXERCISE TIMER: modern, matches table layout ──── */
.ex-timer-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  margin:4px 16px 6px !important;
  padding:8px 14px !important;
  border:none !important;
  border-radius:14px !important;
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:0.8px !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:all 0.2s ease !important;
  position:relative !important;
  overflow:hidden !important;
}
.ex-timer-btn:active{
  transform:scale(0.97) !important;
}
.ex-timer-btn svg{
  width:16px !important;
  height:16px !important;
  flex-shrink:0 !important;
}

/* ── Start state: clean green pill ── */
.ex-timer-btn.start{
  background:rgba(212,148,90,0.08) !important;
  border:1.5px solid rgba(212,148,90,0.2) !important;
  color:rgba(212,148,90,0.9) !important;
  box-shadow:none !important;
  text-transform:uppercase !important;
  font-size:12px !important;
  padding:8px 14px !important;
}
.ex-timer-btn.start::before{ display:none !important; }
.ex-timer-btn.start svg{
  fill:rgba(212,148,90,0.7) !important;
  stroke:none !important;
  width:14px !important;
  height:14px !important;
}
.ex-timer-btn.start.cable{
  background:rgba(126,181,226,0.08) !important;
  border-color:rgba(126,181,226,0.2) !important;
  color:rgba(126,181,226,0.9) !important;
}
.ex-timer-btn.start.cable svg{
  fill:rgba(126,181,226,0.7) !important;
  width:14px !important;
  height:14px !important;
}

/* ── Running state: compact inline timer ── */
.ex-timer-btn.running{
  background:rgba(212,148,90,0.03) !important;
  border:1.5px solid rgba(212,148,90,0.1) !important;
  color:rgba(212,148,90,0.8) !important;
  box-shadow:none !important;
  padding:8px 12px !important;
  gap:0 !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
}
.ex-timer-btn.running svg{
  fill:none !important;
  stroke:rgba(212,148,90,0.5) !important;
  stroke-width:2.5 !important;
  stroke-linecap:round !important;
}
.ex-timer-btn.running .ex-timer-top{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 8px 0 0;
}
.ex-timer-btn.running .ex-timer-elapsed-ring{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2px 10px;
  border:1.5px solid rgba(212,148,90,0.15);
  border-radius:8px;
  background:rgba(212,148,90,0.04);
}
.ex-timer-btn.running .ex-timer-elapsed{
  font-variant-numeric:tabular-nums !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:1px !important;
  opacity:1 !important;
  color:rgba(212,148,90,0.9) !important;
}
.ex-timer-btn.running .ex-timer-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.etc-btn-finish{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  padding:6px 12px !important;
  border:none !important;
  border-radius:8px !important;
  background:rgba(212,148,90,0.12) !important;
  color:rgba(212,148,90,0.9) !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:0.3px !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:all 0.15s ease !important;
}
.etc-btn-finish svg{
  width:14px !important;
  height:14px !important;
  fill:none !important;
  stroke:rgba(212,148,90,0.8) !important;
  stroke-width:2.5 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.etc-btn-finish:active{
  background:rgba(212,148,90,0.2) !important;
  transform:scale(0.97) !important;
}
/* Cable running */
.ex-timer-btn.running.cable{
  background:rgba(126,181,226,0.03) !important;
  border-color:rgba(126,181,226,0.1) !important;
  color:rgba(126,181,226,0.8) !important;
}
.ex-timer-btn.running.cable svg{
  stroke:rgba(126,181,226,0.5) !important;
}
.ex-timer-btn.running.cable .ex-timer-elapsed-ring{
  border-color:rgba(126,181,226,0.15);
  background:rgba(126,181,226,0.04);
}
.ex-timer-btn.running.cable .ex-timer-elapsed{
  color:rgba(126,181,226,0.9) !important;
}
.ex-timer-btn.running.cable .etc-btn-finish{
  background:rgba(126,181,226,0.12) !important;
  color:rgba(126,181,226,0.9) !important;
}
.ex-timer-btn.running.cable .etc-btn-finish svg{
  stroke:rgba(126,181,226,0.8) !important;
}
.ex-timer-btn.running.cable .etc-btn-finish:active{
  background:rgba(126,181,226,0.2) !important;
}

/* ── Light mode running ── */
body.light-mode .ex-timer-btn.running{
  background:rgba(34,160,94,0.03) !important;
  border-color:rgba(34,160,94,0.1) !important;
  color:rgba(34,160,94,0.75) !important;
}
body.light-mode .ex-timer-btn.running svg{
  stroke:rgba(34,160,94,0.4) !important;
}
body.light-mode .ex-timer-btn.running .ex-timer-elapsed-ring{
  border-color:rgba(34,160,94,0.12);
  background:rgba(34,160,94,0.03);
}
body.light-mode .ex-timer-btn.running .ex-timer-elapsed{
  color:rgba(34,160,94,0.85) !important;
}
body.light-mode .etc-btn-finish{
  background:rgba(34,160,94,0.08) !important;
  color:rgba(34,160,94,0.85) !important;
}
body.light-mode .etc-btn-finish svg{
  stroke:rgba(34,160,94,0.65) !important;
}
body.light-mode .etc-btn-finish:active{
  background:rgba(34,160,94,0.15) !important;
}

/* ── Estimated time chip in banner ── */
.bex-est-time{
  color:rgba(255,255,255,0.35) !important;
  font-weight:600 !important;
}
body.light-mode .bex-est-time{
  color:rgba(0,0,0,0.6) !important;
}

/* ── Paused state: amber, compact inline ── */
.ex-timer-btn.paused{
  background:rgba(255,200,100,0.03) !important;
  border:1.5px solid rgba(255,200,100,0.1) !important;
  color:rgba(255,200,100,0.8) !important;
  box-shadow:none !important;
  padding:8px 12px !important;
  gap:0 !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
}
.ex-timer-btn.paused .ex-timer-top{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 8px 0 0;
}
.ex-timer-btn.paused .ex-timer-elapsed-ring{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2px 10px;
  border:1.5px dashed rgba(255,200,100,0.2);
  border-radius:8px;
  background:rgba(255,200,100,0.04);
}
.ex-timer-btn.paused .ex-timer-elapsed{
  font-variant-numeric:tabular-nums !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:1px !important;
  color:rgba(255,200,100,0.9) !important;
}
.ex-timer-btn.paused .ex-timer-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.ex-timer-btn.paused .etc-btn-finish{
  background:rgba(255,200,100,0.1) !important;
  color:rgba(255,200,100,0.85) !important;
}
.ex-timer-btn.paused .etc-btn-finish svg{
  stroke:rgba(255,200,100,0.7) !important;
}
body.light-mode .ex-timer-btn.paused{
  background:rgba(200,150,50,0.03) !important;
  border-color:rgba(200,150,50,0.1) !important;
  color:rgba(180,130,30,0.7) !important;
}
body.light-mode .ex-timer-btn.paused .ex-timer-elapsed-ring{
  border-color:rgba(200,150,50,0.15);
  background:rgba(200,150,50,0.03);
}
body.light-mode .ex-timer-btn.paused .ex-timer-elapsed{
  color:rgba(180,130,30,0.85) !important;
}
body.light-mode .ex-timer-btn.paused .etc-btn-finish{
  background:rgba(200,150,50,0.08) !important;
  color:rgba(180,130,30,0.8) !important;
}
body.light-mode .ex-timer-btn.paused .etc-btn-finish svg{
  stroke:rgba(180,130,30,0.6) !important;
}

/* ── Finished state: subtle complete with duration ── */
.ex-timer-btn.finished{
  background:rgba(212,148,90,0.03) !important;
  border:1.5px solid rgba(212,148,90,0.08) !important;
  color:rgba(212,148,90,0.5) !important;
  box-shadow:none !important;
  gap:8px !important;
  padding:10px 20px !important;
}
.ex-timer-btn.finished span{
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:14px;
  letter-spacing:0.5px;
}
.ex-timer-btn.finished svg{
  width:18px !important;
  height:18px !important;
  fill:none !important;
  stroke:rgba(212,148,90,0.4) !important;
  stroke-width:2.5 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.ex-timer-btn.finished.cable{
  background:rgba(126,181,226,0.04) !important;
  border-color:rgba(126,181,226,0.08) !important;
  color:rgba(126,181,226,0.5) !important;
}
.ex-timer-btn.finished.cable svg{
  stroke:rgba(126,181,226,0.4) !important;
}

/* ── Timer inline controls: larger tap targets ── */
.ex-timer-controls{
  display:flex !important;
  gap:10px !important;
  align-items:center !important;
}
.etc-btn{
  width:32px !important;
  height:32px !important;
  border:none !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:all 0.15s ease !important;
}
.etc-btn:active{ transform:scale(0.88) !important; }
.etc-btn svg{
  width:16px !important;
  height:16px !important;
  fill:none !important;
  stroke-width:2.5 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.etc-resume{
  background:rgba(212,148,90,0.12) !important;
}
.etc-resume svg{
  fill:rgba(212,148,90,0.8) !important;
  stroke:none !important;
}
.etc-pause{
  background:rgba(255,200,100,0.1) !important;
}
.etc-pause svg{
  fill:none !important;
  stroke:rgba(255,200,100,0.7) !important;
}
.etc-stop, .etc-finish{
  background:rgba(212,148,90,0.1) !important;
}
.etc-stop svg, .etc-finish svg{
  stroke:rgba(212,148,90,0.7) !important;
  fill:none !important;
}
.etc-reset{
  background:rgba(255,255,255,0.04) !important;
}
.etc-reset svg{
  stroke:rgba(255,255,255,0.3) !important;
  fill:none !important;
}

/* ── Cable variants for controls ── */
.cable .etc-resume{
  background:rgba(126,181,226,0.12) !important;
}
.cable .etc-resume svg{
  fill:rgba(126,181,226,0.8) !important;
}
.cable .etc-stop, .cable .etc-finish{
  background:rgba(126,181,226,0.1) !important;
}
.cable .etc-stop svg, .cable .etc-finish svg{
  stroke:rgba(126,181,226,0.7) !important;
}

/* ── Light mode timer ── */
body.light-mode .ex-timer-btn.start{
  background:rgba(34,160,94,0.06) !important;
  border-color:rgba(34,160,94,0.18) !important;
  color:rgba(34,160,94,0.85) !important;
  box-shadow:none !important;
}
body.light-mode .ex-timer-btn.start svg{
  fill:rgba(34,160,94,0.65) !important;
}
body.light-mode .ex-timer-btn.start.cable{
  background:rgba(80,136,212,0.06) !important;
  border-color:rgba(80,136,212,0.18) !important;
  color:rgba(80,136,212,0.85) !important;
}
body.light-mode .ex-timer-btn.start.cable svg{
  fill:rgba(80,136,212,0.65) !important;
}
body.light-mode .ex-timer-btn.running{
  background:rgba(34,160,94,0.04) !important;
  border-color:rgba(34,160,94,0.1) !important;
  color:rgba(34,160,94,0.75) !important;
}
body.light-mode .ex-timer-btn.running svg{
  stroke:rgba(34,160,94,0.45) !important;
}
body.light-mode .ex-timer-btn.finished{
  background:rgba(34,160,94,0.03) !important;
  border-color:rgba(34,160,94,0.06) !important;
  color:rgba(34,160,94,0.4) !important;
}
body.light-mode .ex-timer-btn.finished svg{
  stroke:rgba(34,160,94,0.35) !important;
}
body.light-mode .ex-timer-btn.paused{
  background:rgba(200,150,50,0.04) !important;
  border-color:rgba(200,150,50,0.12) !important;
  color:rgba(180,130,30,0.7) !important;
}
body.light-mode .ex-timer-btn.paused .ex-timer-elapsed{
  color:rgba(180,130,30,0.7) !important;
}
body.light-mode .etc-resume{
  background:rgba(34,160,94,0.1) !important;
}
body.light-mode .etc-resume svg{
  fill:rgba(34,160,94,0.7) !important;
}
body.light-mode .etc-pause{
  background:rgba(200,150,50,0.08) !important;
}
body.light-mode .etc-pause svg{
  stroke:rgba(180,130,30,0.6) !important;
}
body.light-mode .etc-stop, body.light-mode .etc-finish{
  background:rgba(34,160,94,0.08) !important;
}
body.light-mode .etc-stop svg, body.light-mode .etc-finish svg{
  stroke:rgba(34,160,94,0.6) !important;
}
body.light-mode .etc-reset{
  background:rgba(0,0,0,0.03) !important;
}
body.light-mode .etc-reset svg{
  stroke:rgba(0,0,0,0.25) !important;
}

/* Hide old non-table elements that conflict */
.input-label{ display:none !important; }

/* ── TAPPABLE UNIT TOGGLE in column header ───────────── */
.col-unit-toggle{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  padding:3px 8px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.08);
  transition:all 0.15s ease;
  display:inline-flex;
  align-items:center;
  gap:0;
}
.col-unit-toggle:active{
  background:rgba(255,255,255,0.06);
}
.unit-opt{
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  color:rgba(255,255,255,0.15);
  transition:color 0.15s ease;
}
.unit-opt.unit-active{
  color:rgba(255,255,255,0.7);
}
.unit-slash{
  font-size:10px;
  color:rgba(255,255,255,0.1);
  margin:0 3px;
}
body.light-mode .col-unit-toggle{
  border-color:rgba(0,0,0,0.08);
}
body.light-mode .col-unit-toggle:active{
  background:rgba(0,0,0,0.04);
}
body.light-mode .unit-opt{
  color:rgba(0,0,0,0.15);
}
body.light-mode .unit-opt.unit-active{
  color:rgba(0,0,0,0.7);
}
body.light-mode .unit-slash{
  color:rgba(0,0,0,0.65);
}

/* ── INFO BAR TAPPABLE ──────────────────────────────────── */
.info-bar-cell{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  padding:6px 4px;
  border-radius:8px;
  transition:background 0.15s ease;
  overflow:visible;
}
.info-bar-cell:active{
  background:rgba(255,255,255,0.04);
}
body.light-mode .info-bar-cell:active{
  background:rgba(0,0,0,0.03);
}

/* ── INFO TIP TOOLTIP ───────────────────────────────────── */
.info-tip-overlay{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  z-index:9999;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(0,0,0,0.4);
  opacity:0;
  transition:opacity 0.2s ease;
  pointer-events:none;
  padding:0 16px 100px;
}
.info-tip-overlay.visible{
  opacity:1;
  pointer-events:auto;
}
.info-tip-card{
  background:rgba(30,30,34,0.97);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:20px 24px;
  max-width:340px;
  width:100%;
  text-align:center;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  transform:translateY(20px);
  transition:transform 0.25s cubic-bezier(0.25,1,0.5,1);
}
.info-tip-overlay.visible .info-tip-card{
  transform:translateY(0);
}
.info-tip-title{
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:rgba(255,255,255,0.5);
  margin-bottom:8px;
}
.info-tip-value{
  font-size:22px;
  font-weight:700;
  color:rgba(255,255,255,0.9);
  margin-bottom:10px;
}
.info-tip-desc{
  font-size:14px;
  line-height:1.6;
  color:rgba(255,255,255,0.5);
  margin-bottom:16px;
}
.info-tip-deep{
  display:none;
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,0.4);
  margin-bottom:16px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.04);
}
.info-tip-deep.visible{ display:block; }
.info-tip-btns{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:4px;
}
.info-tip-btn{
  flex:1;
  padding:10px 8px;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.5px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.15s ease;
  border:none;
  text-align:center;
}
.info-tip-btn.got-it{
  background:rgba(212,148,90,0.15);
  color:rgba(212,148,90,0.9);
}
.info-tip-btn.got-it:active{ background:rgba(212,148,90,0.25); }
.info-tip-btn.not-got-it{
  background:rgba(255,255,255,0.05);
  color:rgba(255,255,255,0.35);
}
.info-tip-btn.not-got-it:active{ background:rgba(255,255,255,0.08); }
body.light-mode .info-tip-card{
  background:rgba(255,255,255,0.97);
  border-color:rgba(0,0,0,0.06);
}
body.light-mode .info-tip-title{ color:rgba(0,0,0,0.65); }
body.light-mode .info-tip-value{ color:rgba(0,0,0,0.85); }
body.light-mode .info-tip-desc{ color:rgba(0,0,0,0.65); }
body.light-mode .info-tip-deep{ color:rgba(0,0,0,0.35); border-top-color:rgba(0,0,0,0.04); }
body.light-mode .info-tip-btn.got-it{ background:rgba(34,160,94,0.12); color:rgba(34,160,94,0.9); }
body.light-mode .info-tip-btn.not-got-it{ background:rgba(0,0,0,0.04); color:rgba(0,0,0,0.6); }

/* ── REST COUNTDOWN in info-bar cell ─────────────────────── */
.info-bar-rest{
  position:relative;
  overflow:hidden;
}

/* Superset info bar - more breathing room */
.superset-exercise-item .info-bar{
  gap:2px;
  padding:8px 10px;
}
.superset-exercise-item .info-bar-cell{
  padding:4px 6px;
}
.info-bar-rest-fill{
  position:absolute;
  bottom:0; left:0; right:0;
  height:0;
  background:rgba(212,148,90,0.12);
  border-radius:8px;
  transition:height 0.3s ease;
  pointer-events:none;
}
.info-bar-rest.counting .info-bar-rest-fill{
  height:100%;
}
.info-bar-rest.counting .info-bar-rest-value{
  color:rgba(212,148,90,0.9) !important;
  font-weight:700 !important;
}
.info-bar-rest.counting .info-bar-label{
  color:rgba(212,148,90,0.5) !important;
}
body.light-mode .info-bar-rest-fill{ background:rgba(34,160,94,0.08); }
body.light-mode .info-bar-rest.counting .info-bar-rest-value{ color:rgba(34,160,94,0.9) !important; }
body.light-mode .info-bar-rest.counting .info-bar-label{ color:rgba(34,160,94,0.5) !important; }

/* ── PLAY BUTTON on workout banner image ─────────────────── */
.workout-banner-img{
  position:relative;
  cursor:pointer;
}
.banner-play-btn{
  display:none;
}
.banner-play-btn svg{
  width:18px; height:18px;
  margin-left:2px;
}
.banner-play-btn:active{
  transform:translate(-50%,-50%) scale(0.9);
  background:rgba(0,0,0,0.7);
}
body.light-mode .banner-play-btn{
  background:rgba(255,255,255,0.6);
  border-color:rgba(0,0,0,0.15);
  color:rgba(0,0,0,0.6);
}

/* ── VIDEO PLAYER OVERLAY ────────────────────────────────── */
.video-overlay{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  z-index:9999;
  background:rgba(0,0,0,0.85);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  opacity:0;
  transition:opacity 0.25s ease;
  pointer-events:none;
}
.video-overlay.visible{ opacity:1; pointer-events:auto; }
.video-placeholder{
  width:280px; height:200px;
  border-radius:20px;
  background:rgba(255,255,255,0.04);
  border:2px dashed rgba(255,255,255,0.1);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.video-placeholder-icon{
  width:56px; height:56px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
}
.video-placeholder-icon svg{
  width:28px; height:28px;
  fill:rgba(255,255,255,0.2);
}
.video-placeholder-text{
  font-size:16px;
  font-weight:700;
  color:rgba(255,255,255,0.4);
  letter-spacing:0.5px;
}
.video-placeholder-sub{
  font-size:12px;
  color:rgba(255,255,255,0.15);
}
.video-close-btn{
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:rgba(255,255,255,0.4);
}
.video-close-btn svg{
  width:20px; height:20px;
  stroke:currentColor; stroke-width:2; fill:none;
}
.video-close-btn:active{ background:rgba(255,255,255,0.1); }

/* ── MUSCLE GROUP ICONS: larger, visible ─────────────────── */
.workout-banner-img img{
  filter:brightness(1) !important;
  opacity:0.9 !important;
}
body.light-mode .workout-banner-img img{
  filter:invert(1) brightness(0.8) !important;
  opacity:0.85 !important;
}

/* ── ALTERNATING ROW TINT for scanability ────────────── */
.set-block.compact-set-block:nth-child(odd) .table-set-row{
  background:rgba(255,255,255,0.015) !important;
}
body.light-mode .set-block.compact-set-block:nth-child(odd) .table-set-row{
  background:rgba(0,0,0,0.02) !important;
}

/* ═══════════════════════════════════════════════════════════
   VERTICAL SPACING: tighten back-btn → circles gap
   ═══════════════════════════════════════════════════════════ */
header{
  padding-bottom:6px !important;
}
.month-row{
  margin-bottom:2px !important;
}
.month-label-row{
  margin-bottom:2px !important;
}
.week-strip{
  padding:4px 6px !important;
}
.day-col{
  padding:8px 2px 6px !important;
}
.day-panel{
  padding-bottom:2px !important;
}
.workout-banner-slide-center{
  padding:8px 14px 6px !important;
}
.banner-exercise-list{
  margin-top:3px !important;
}
.banner-ex-card{
  /* padding handled by pill/hero layers */
}
.unified-exercise-panel{
  margin-top:2px !important;
}
.panel-tally-strip{
  padding:3px 24px !important;
}

/* ═══════════════════════════════════════════════════════════
   COMPREHENSIVE LIGHT MODE OVERRIDES — TWO-TIER TABLE
   ═══════════════════════════════════════════════════════════ */

/* Card backgrounds: clean white with subtle shadow */
body.light-mode .ex-card{
  background:rgba(255,255,255,0.95) !important;
  border:1px solid rgba(0,0,0,0.06) !important;
  box-shadow:0 1px 4px rgba(0,0,0,0.06) !important;
}
body.light-mode .superset-combined-card{
  background:rgba(255,255,255,0.95) !important;
  border:1px solid rgba(0,0,0,0.06) !important;
  box-shadow:0 1px 4px rgba(0,0,0,0.06) !important;
}
body.light-mode .superset-exercise-item{
  background:transparent !important;
  border:none !important;
  border-bottom:1px solid rgba(0,0,0,0.04) !important;
}
body.light-mode .superset-exercise-item:last-child{
  border-bottom:none !important;
}

/* Exercise card name */
body.light-mode .ex-card-name{
  color:rgba(0,0,0,0.88) !important;
}
/* SS letter badge */
body.light-mode .ss-letter-badge{
  background:rgba(0,0,0,0.06) !important;
  color:rgba(0,0,0,0.7) !important;
}

/* Focus row icons + labels */
body.light-mode .ex-focus-icon{
  filter:invert(0.7) brightness(0.4) !important;
  opacity:0.8 !important;
}
body.light-mode .ex-focus-label{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .ex-focus-dot{
  color:rgba(0,0,0,0.12) !important;
}
body.light-mode .ex-focus-equip{
  color:rgba(0,0,0,0.25) !important;
}

/* Info bar */
body.light-mode .info-bar{
  border-bottom-color:rgba(0,0,0,0.05) !important;
}
body.light-mode .info-bar-cell{
  border-radius:8px;
}
body.light-mode .info-bar-cell:active{
  background:rgba(0,0,0,0.03) !important;
}
body.light-mode .info-bar-label{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .info-bar-value{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .info-bar-sub{
  color:rgba(0,0,0,0.18) !important;
}

/* Rest countdown light mode */
body.light-mode .info-bar-rest-fill{
  background:rgba(34,160,94,0.08) !important;
}
body.light-mode .info-bar-rest.counting .info-bar-rest-value{
  color:rgba(34,160,94,0.9) !important;
}
body.light-mode .info-bar-rest.counting .info-bar-label{
  color:rgba(34,160,94,0.5) !important;
}

/* Column headers */
body.light-mode .sets-table-header .col-set,
body.light-mode .sets-table-header .col-input,
body.light-mode .sets-table-header .col-check{
  color:rgba(0,0,0,0.25) !important;
}

/* Set number label */
body.light-mode .set-num{
  color:rgba(0,0,0,0.35) !important;
}

/* Table rows */
body.light-mode .compact-set-row.table-set-row{
  background:transparent !important;
  border:none !important;
}

/* Inputs: underline accent */
body.light-mode .table-set-row .set-input,
body.light-mode .set-input.superset-input{
  background:transparent !important;
  border:none !important;
  border-bottom:2px solid rgba(0,0,0,0.07) !important;
  color:rgba(0,0,0,0.85) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
body.light-mode .table-set-row .set-input.zero-value,
body.light-mode .set-input.superset-input.zero-value{
  border-bottom:2px dashed rgba(0,0,0,0.04) !important;
  color:rgba(0,0,0,0.12) !important;
}
body.light-mode .table-set-row .set-input.free:not(.zero-value),
body.light-mode .set-input.superset-input.free:not(.zero-value){
  border:none !important;
  border-bottom:2px solid rgba(34,160,94,0.3) !important;
}
body.light-mode .table-set-row .set-input.cable:not(.zero-value),
body.light-mode .set-input.superset-input.cable:not(.zero-value){
  border:none !important;
  border-bottom:2px solid rgba(80,136,212,0.3) !important;
}
body.light-mode .table-set-row .set-input.active-input,
body.light-mode .table-set-row .set-input:focus{
  border:none !important;
  border-bottom:2px solid rgba(0,0,0,0.35) !important;
  box-shadow:none !important;
}

/* Steppers */
body.light-mode .table-set-row .stepper-btn,
body.light-mode .superset-set-input-group .stepper-btn{
  background:transparent !important;
  border:1.5px solid rgba(0,0,0,0.08) !important;
  border-radius:50% !important;
  color:rgba(0,0,0,0.25) !important;
  box-shadow:none !important;
}
body.light-mode .table-set-row .stepper-btn:active,
body.light-mode .superset-set-input-group .stepper-btn:active{
  background:rgba(0,0,0,0.04) !important;
  color:rgba(0,0,0,0.7) !important;
}

/* Set check */
body.light-mode .table-set-row .set-check{
  border:none !important;
  background:transparent !important;
}
body.light-mode .table-set-row .set-check svg{
  stroke:rgba(0,0,0,0.12) !important;
}
/* Completed set check (green for free, blue for cable) */
body.light-mode .set-block.set-row-done .table-set-row .set-check{
  background:transparent !important;
  border:none !important;
}
body.light-mode .set-block.set-row-done .table-set-row .set-check svg{
  stroke:rgba(34,160,94,0.75) !important;
}
body.light-mode .set-block.set-row-done.cable-done .table-set-row .set-check{
  background:transparent !important;
  border:none !important;
}
body.light-mode .set-block.set-row-done.cable-done .table-set-row .set-check svg{
  stroke:rgba(80,136,212,0.75) !important;
}
/* Completed set fade */
body.light-mode .set-block.set-row-done .table-set-row .set-num{
  opacity:0.4 !important;
}
body.light-mode .set-block.set-row-done .table-set-row .set-input{
  opacity:0.5 !important;
}

/* LBS/KG toggle */
body.light-mode .col-unit-toggle{
  border:1px solid rgba(0,0,0,0.08) !important;
}
body.light-mode .col-unit-toggle:active{
  background:rgba(0,0,0,0.04) !important;
}
body.light-mode .unit-opt{
  color:rgba(0,0,0,0.18) !important;
}
body.light-mode .unit-opt.unit-active{
  color:rgba(0,0,0,0.7) !important;
}
body.light-mode .unit-slash{
  color:rgba(0,0,0,0.65) !important;
}

/* Superset label row */
body.light-mode .superset-label-row{
  background:transparent !important;
}
body.light-mode .superset-label-text{
  color:rgba(0,0,0,0.35) !important;
}
body.light-mode .superset-info-btn{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .superset-info-btn svg{
  stroke:rgba(0,0,0,0.5) !important;
}

/* Superset exercise item dividers */
.superset-exercise-item{
  padding:0 !important;
}
.superset-exercise-item + .superset-exercise-item{
  border-top:none !important;
  margin-top:0 !important;
  padding-top:0 !important;
}
body.light-mode .superset-exercise-item + .superset-exercise-item{
  border-top:none !important;
}

/* PR trophy in info bar */
body.light-mode .info-bar-cell .pr-new-text-compact{
  color:#B8962E !important;
}

/* Info tip overlay (modal) */
body.light-mode .info-tip-card{
  background:rgba(255,255,255,0.98) !important;
  border-color:rgba(0,0,0,0.08) !important;
  box-shadow:0 8px 40px rgba(0,0,0,0.12) !important;
}
body.light-mode .info-tip-title{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .info-tip-value{
  color:rgba(0,0,0,0.85) !important;
}
body.light-mode .info-tip-desc{
  color:rgba(0,0,0,0.7) !important;
}
body.light-mode .info-tip-deep{
  color:rgba(0,0,0,0.65) !important;
  border-top-color:rgba(0,0,0,0.05) !important;
}
body.light-mode .info-tip-btn.got-it{
  background:rgba(34,160,94,0.1) !important;
  color:rgba(34,160,94,0.9) !important;
}
body.light-mode .info-tip-btn.got-it:active{
  background:rgba(34,160,94,0.18) !important;
}
body.light-mode .info-tip-btn.not-got-it{
  background:rgba(0,0,0,0.04) !important;
  color:rgba(0,0,0,0.35) !important;
}
body.light-mode .info-tip-btn.not-got-it:active{
  background:rgba(0,0,0,0.07) !important;
}

/* Video overlay */
body.light-mode .video-placeholder{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.08);
}
body.light-mode .video-placeholder-icon{
  background:rgba(0,0,0,0.05);
}
body.light-mode .video-placeholder-icon svg{
  fill:rgba(0,0,0,0.5);
}
body.light-mode .video-placeholder-text{
  color:rgba(0,0,0,0.7);
}
body.light-mode .video-placeholder-sub{
  color:rgba(0,0,0,0.25);
}
body.light-mode .video-close-btn{
  background:rgba(255,255,255,0.9);
  border-color:rgba(0,0,0,0.08);
  color:rgba(0,0,0,0.65);
}

/* Play button on banner */
body.light-mode .banner-play-btn{
  background:rgba(255,255,255,0.7) !important;
  border-color:rgba(0,0,0,0.12) !important;
  color:rgba(0,0,0,0.7) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}

/* Exercise circles */
body.light-mode .exercise-circle{
  border-color:rgba(0,0,0,0.12) !important;
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .exercise-circle.expanded{
  background:rgba(0,0,0,0.08) !important;
  color:rgba(0,0,0,0.85) !important;
}
body.light-mode .exercise-circle.complete:not(.expanded){
  border-color:rgba(34,160,94,0.6) !important;
}
body.light-mode .exercise-circle.complete.cable:not(.expanded){
  border-color:rgba(80,136,212,0.6) !important;
}
body.light-mode .exercise-circle.complete.expanded{
  background:rgba(34,160,94,0.85) !important;
  border-color:rgba(34,160,94,0.85) !important;
  color:#fff !important;
}
body.light-mode .exercise-circle.complete.cable.expanded{
  background:rgba(80,136,212,0.85) !important;
  border-color:rgba(80,136,212,0.85) !important;
  color:#fff !important;
}

/* Rest bars */
body.light-mode .rest-bar-text{
  color:rgba(0,0,0,0.12) !important;
}

/* Scrollable content area */
body.light-mode .scrollable-content{
  background:rgba(245,243,240,1) !important;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — !important overrides for Grit & Glass dark rules
   ═══════════════════════════════════════════════════════════════ */

/* Exercise tabs */
body.light-mode .exercise-tab{
  background:rgba(0,0,0,0.03) !important;
  border:1px solid rgba(0,0,0,0.06) !important;
  box-shadow:0 2px 6px rgba(0,0,0,0.04) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.light-mode .exercise-tab.tab-selected{
  background:rgba(0,0,0,0.06) !important;
  border-color:rgba(0,0,0,0.65) !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.06) !important;
}

/* Active rest bar */
body.light-mode .active-rest-bar{
  background:rgba(0,0,0,0.04) !important;
  border:1.5px solid rgba(0,0,0,0.08) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* PR popup text */
body.light-mode .pr-popup-subtitle{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .pr-popup-empty{
  color:rgba(0,0,0,0.7) !important;
}

/* Workout summary modal close button */
body.light-mode .workout-summary-modal-close:active{
  background:rgba(0,0,0,0.1) !important;
}

/* Workout summary item press state */
body.light-mode .ws-item:active{
  background:rgba(0,0,0,0.06) !important;
}

/* Duration popup close button */
body.light-mode .dur-popup-close:active{
  background:rgba(0,0,0,0.08) !important;
}
body.light-mode .dur-popup-close svg{
  stroke:rgba(0,0,0,0.55) !important;
}

/* Duration popup items */
body.light-mode .dur-item:active{
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(0,0,0,0.06) !important;
}
body.light-mode .dur-item-est{
  color:rgba(0,0,0,0.55) !important;
}

/* Duration popup stop button */
body.light-mode .dur-ex-btn.dur-ex-stop{
  background:rgba(0,0,0,0.03) !important;
  color:rgba(220,60,60,0.85) !important;
  border-color:rgba(220,60,60,0.15) !important;
  box-shadow:none !important;
}

/* Rest day pill states */
body.light-mode .rest-day-pill.filling{
  border-color:rgba(0,0,0,0.6) !important;
  box-shadow:0 0 10px rgba(0,0,0,0.08), 0 0 24px rgba(0,0,0,0.04) !important;
}
body.light-mode .rest-day-pill.active{
  border-color:rgba(0,0,0,0.7) !important;
  background:rgba(0,0,0,0.85) !important;
  box-shadow:0 0 14px rgba(0,0,0,0.15), 0 0 28px rgba(0,0,0,0.06) !important;
}

/* Superset selected mini card */
body.light-mode .superset-stack.selected .superset-mini-card{
  border-color:rgba(0,0,0,0.12) !important;
  box-shadow:0 4px 20px rgba(0,0,0,0.06) !important;
}

/* Watch & learn title */
body.light-mode .watch-learn-title{
  color:rgba(0,0,0,0.12) !important;
}

/* PR compact row */
body.light-mode .pr-row-compact.pr-section.pr-inline{
  background:rgba(0,0,0,0.03) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.light-mode .pr-row-compact.pr-section.pr-inline .pr-label-compact{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .pr-row-compact.pr-section.pr-inline .pr-value-compact{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .pr-row-compact.pr-section.pr-inline .pr-date-compact{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .pr-row-compact.has-pr .pr-value-compact{
  color:var(--gold) !important;
}
body.light-mode .pr-row-compact.has-pr .pr-label-compact{
  color:var(--gold) !important;
  background:rgba(180,150,80,0.1) !important;
}

/* Week strip month view border */
body.light-mode .week-strip.month-view{
  border-color:rgba(0,0,0,0.12) !important;
}
body.light-mode .week-strip.month-view .days-row{
  border-color:rgba(0,0,0,0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   UNIFIED COLOR SYSTEM — Remove green/blue week-color logic
   Completion = white (dark mode) / black (light mode)
   Rest timer = white/black
   PRESERVED: calendar dots, superset purple, PR gold, 
   duration Pause amber, duration End red
   ═════════════════════════════════════════════════════════════ */

/* ── Progress Rings (bottom bar + duration popup) ── */
.ring-fill.free, .ring-fill.cable,
.ring-fill{ stroke:rgba(255,255,255,0.85) !important; filter:none !important; }
body.light-mode .ring-fill.free, body.light-mode .ring-fill.cable,
body.light-mode .ring-fill{ stroke:rgba(0,0,0,0.7) !important; }

.dur-ring-fill, .dur-ring-fill.cable{
  stroke:rgba(255,255,255,0.85) !important;
  filter:drop-shadow(0 0 6px rgba(255,255,255,0.1)) !important;
}
body.light-mode .dur-ring-fill, body.light-mode .dur-ring-fill.cable{
  stroke:rgba(0,0,0,0.7) !important; filter:none !important;
}

/* Dock bar ring + percentage */
#dockRingFill{ stroke:rgba(255,255,255,0.85) !important; filter:none !important; }
body.light-mode #dockRingFill{ stroke:rgba(0,0,0,0.7) !important; }
.dock-unified-pct{ color:rgba(255,255,255,0.7) !important; }
body.light-mode .dock-unified-pct{ color:rgba(0,0,0,0.6) !important; }

/* ── Card Completion States ── */
.ex-card.expanded.all-complete:not(.has-pr),
.ex-card.expanded.all-complete:not(.has-pr)[data-week-type="cable"]{
  border-color:rgba(255,255,255,0.2) !important;
  box-shadow:0 0 20px rgba(255,255,255,0.04) !important;
}
body.light-mode .ex-card.expanded.all-complete:not(.has-pr),
body.light-mode .ex-card.expanded.all-complete:not(.has-pr)[data-week-type="cable"]{
  border-color:rgba(0,0,0,0.15) !important;
  box-shadow:0 0 12px rgba(0,0,0,0.04) !important;
}
.ex-card:not(.expanded).all-complete,
.ex-card:not(.expanded).all-complete[data-week-type="cable"]{
  border-color:rgba(255,255,255,0.15) !important;
}
body.light-mode .ex-card:not(.expanded).all-complete,
body.light-mode .ex-card:not(.expanded).all-complete[data-week-type="cable"]{
  border-color:rgba(0,0,0,0.12) !important;
}

/* Superset combined card completion */
.superset-combined-card.all-complete:not(.has-pr),
.superset-combined-card.all-complete:not(.has-pr)[data-week-type="cable"]{
  border-color:rgba(255,255,255,0.2) !important;
  box-shadow:0 0 20px rgba(255,255,255,0.04) !important;
}
body.light-mode .superset-combined-card.all-complete:not(.has-pr),
body.light-mode .superset-combined-card.all-complete:not(.has-pr)[data-week-type="cable"]{
  border-color:rgba(0,0,0,0.15) !important;
}

/* Special set box completion */
.special-set-box.all-complete,
.special-set-box.all-complete.cable{
  border-color:rgba(255,255,255,0.15) !important;
}
body.light-mode .special-set-box.all-complete{ border-color:rgba(0,0,0,0.12) !important; }

/* Stepper glow completion */
.stepper-glow.all-complete:not(.has-pr),
.stepper-glow[data-week-type="free"].all-complete:not(.has-pr),
.stepper-glow[data-week-type="cable"].all-complete:not(.has-pr){
  box-shadow:0 0 12px rgba(255,255,255,0.08) !important;
}
body.light-mode .stepper-glow.all-complete:not(.has-pr){
  box-shadow:0 0 12px rgba(0,0,0,0.06) !important;
}

/* ── Set Row Done States ── */
.set-row-done, .set-row-done.free, .set-row-done.cable,
.set-complete, .set-complete.free, .set-complete.cable{
  background:rgba(255,255,255,0.03) !important;
  border-color:rgba(255,255,255,0.1) !important;
}
body.light-mode .set-row-done, body.light-mode .set-complete{
  background:rgba(0,0,0,0.02) !important;
  border-color:rgba(0,0,0,0.08) !important;
}

/* SC card set row done checkmark color */
.sc-card .set-block.set-row-done::after{
  color:rgba(255,255,255,0.5) !important;
}
body.light-mode .sc-card .set-block.set-row-done::after{
  color:rgba(0,0,0,0.65) !important;
}

/* SC card set letter badge done */
.sc-card .set-block.set-row-done .sc-set-letter{
  background:rgba(255,255,255,0.08) !important;
  color:rgba(255,255,255,0.6) !important;
}
body.light-mode .sc-card .set-block.set-row-done .sc-set-letter{
  background:rgba(0,0,0,0.05) !important;
  color:rgba(0,0,0,0.7) !important;
}

/* ── SC Progress Dots ── */
.sc-dot.sc-dot-done, .sc-dot.sc-dot-done.free, .sc-dot.sc-dot-done.cable{
  background:rgba(255,255,255,0.6) !important;
}
.sc-dot.sc-dot-active{
  background:rgba(255,255,255,0.4) !important;
}
body.light-mode .sc-dot.sc-dot-done{
  background:rgba(0,0,0,0.5) !important;
}
body.light-mode .sc-dot.sc-dot-active{
  background:rgba(0,0,0,0.3) !important;
}

/* ── Exercise Circles (detail screen nav) ── */
.ex-detail-circle-wrap.complete .ex-detail-circle{
  background:rgba(255,255,255,0.12) !important;
  border-color:rgba(255,255,255,0.3) !important;
  color:#fff !important;
}
body.light-mode .ex-detail-circle-wrap.complete .ex-detail-circle{
  background:rgba(0,0,0,0.06) !important;
  border-color:rgba(0,0,0,0.55) !important;
  color:#111 !important;
}

/* Exercise completion circles (workout banner) */
.exercise-circle.complete, .exercise-circle.complete.cable{
  background:rgba(255,255,255,0.12) !important;
  border-color:rgba(255,255,255,0.3) !important;
}
body.light-mode .exercise-circle.complete{
  background:rgba(0,0,0,0.06) !important;
  border-color:rgba(0,0,0,0.55) !important;
}

/* ── Banner Progress Bar ── */
.banner-progress-fill, .banner-progress-fill.cable{
  background:rgba(255,255,255,0.6) !important;
}
body.light-mode .banner-progress-fill{
  background:rgba(0,0,0,0.5) !important;
}

/* Banner start/continue button */
.banner-start-btn, .banner-start-btn.cable{
  background:rgba(255,255,255,0.08) !important;
  color:rgba(255,255,255,0.7) !important;
}
.banner-start-btn svg, .banner-start-btn.cable svg{
  fill:rgba(255,255,255,0.7) !important;
}
body.light-mode .banner-start-btn{
  background:rgba(0,0,0,0.05) !important;
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .banner-start-btn svg{
  fill:rgba(0,0,0,0.6) !important;
}

/* ── Duration Popup ── */
/* Completed badges */
.dur-item-badge.completed, .dur-item-badge.completed.cable{
  background:rgba(255,255,255,0.06) !important;
  color:rgba(255,255,255,0.7) !important;
}
body.light-mode .dur-item-badge.completed{
  background:rgba(0,0,0,0.04) !important;
  color:rgba(0,0,0,0.6) !important;
}

/* Status check icons */
.dur-status-check svg, .dur-status-check.cable svg{
  stroke:rgba(255,255,255,0.5) !important;
}
body.light-mode .dur-status-check svg{
  stroke:rgba(0,0,0,0.4) !important;
}

/* Hero percentage */
.dur-hero-pct{ color:rgba(255,255,255,0.9) !important; }
body.light-mode .dur-hero-pct{ color:rgba(0,0,0,0.85) !important; }

/* Total time running state — white instead of green */
.dur-hero-total.is-running, .dur-hero-total.is-running.cable{
  color:rgba(255,255,255,0.95) !important;
  text-shadow:0 0 16px rgba(255,255,255,0.1) !important;
}
body.light-mode .dur-hero-total.is-running{
  color:rgba(0,0,0,0.9) !important; text-shadow:none !important;
}

/* ── Recap / Session Summary ── */
.recap-stat-value.free, .recap-stat-value.cable{
  color:rgba(255,255,255,0.9) !important;
}
body.light-mode .recap-stat-value.free, body.light-mode .recap-stat-value.cable{
  color:rgba(0,0,0,0.85) !important;
}

.recap-check.free{
  background:rgba(255,255,255,0.06) !important;
  border-color:rgba(255,255,255,0.15) !important;
}
.recap-check.free svg{ stroke:rgba(255,255,255,0.7) !important; }
.recap-check.cable{
  background:rgba(255,255,255,0.06) !important;
  border-color:rgba(255,255,255,0.15) !important;
}
.recap-check.cable svg{ stroke:rgba(255,255,255,0.7) !important; }
body.light-mode .recap-check.free, body.light-mode .recap-check.cable{
  background:rgba(0,0,0,0.03) !important;
  border-color:rgba(0,0,0,0.65) !important;
}
body.light-mode .recap-check.free svg, body.light-mode .recap-check.cable svg{
  stroke:rgba(0,0,0,0.6) !important;
}

/* Recap exercise row badges */
.recap-ex-badge.badge-done, .recap-ex-badge.badge-done.cable{
  background:rgba(255,255,255,0.06) !important;
  color:rgba(255,255,255,0.5) !important;
}
body.light-mode .recap-ex-badge.badge-done{
  background:rgba(0,0,0,0.04) !important;
  color:rgba(0,0,0,0.65) !important;
}

/* Recap exercise number badges */
.recap-ex-row.done .recap-ex-num, .recap-ex-row.done.cable .recap-ex-num{
  background:rgba(255,255,255,0.06) !important;
  border-color:rgba(255,255,255,0.15) !important;
  color:rgba(255,255,255,0.7) !important;
}
body.light-mode .recap-ex-row.done .recap-ex-num{
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(0,0,0,0.65) !important;
  color:rgba(0,0,0,0.6) !important;
}

/* Recap progress fill */
.recap-progress-fill.free, .recap-progress-fill.cable{
  background:rgba(255,255,255,0.7) !important;
}
body.light-mode .recap-progress-fill.free, body.light-mode .recap-progress-fill.cable{
  background:rgba(0,0,0,0.6) !important;
}

/* Recap progress points */
.recap-progress-pts.free, .recap-progress-pts.cable{
  color:rgba(255,255,255,0.4) !important;
}
body.light-mode .recap-progress-pts.free, body.light-mode .recap-progress-pts.cable{
  color:rgba(0,0,0,0.35) !important;
}

/* ── Summary Button ── */
.ex-detail-summary-btn{
  border-color:rgba(52,211,153,0.15) !important;
  background:rgba(52,211,153,0.04) !important;
  color:rgba(52,211,153,0.7) !important;
}
.ex-detail-summary-btn svg{ stroke:rgba(52,211,153,0.6) !important; }
.ex-detail-summary-btn:active{
  background:rgba(52,211,153,0.08) !important;
}
body.light-mode .ex-detail-summary-btn{
  border-color:rgba(34,160,94,0.12) !important;
  background:rgba(34,160,94,0.03) !important;
  color:rgba(34,160,94,0.6) !important;
}
body.light-mode .ex-detail-summary-btn svg{ stroke:rgba(34,160,94,0.5) !important; }

/* ── Rest Timer — white/black instead of purple ── */
.sc-rest-card{
  border-left-color:rgba(255,255,255,0.15) !important;
}
.sc-rest-label{
  color:rgba(255,255,255,0.4) !important;
}
.sc-rest-ring-fill{
  stroke:rgba(255,255,255,0.6) !important;
  filter:drop-shadow(0 0 6px rgba(255,255,255,0.1)) !important;
}
body.light-mode .sc-rest-ring-fill{
  stroke:rgba(0,0,0,0.5) !important;
  filter:none !important;
}
body.light-mode .sc-rest-label{ color:rgba(0,0,0,0.35) !important; }

/* ── Keyboard Done button ── */
.kb-done, .kb-done.free, .kb-done.cable{
  background:rgba(255,255,255,0.85) !important;
  color:#000 !important;
  box-shadow:0 2px 12px rgba(255,255,255,0.1) !important;
}
body.light-mode .kb-done{
  background:rgba(0,0,0,0.85) !important;
  color:#fff !important;
  box-shadow:0 2px 12px rgba(0,0,0,0.1) !important;
}

/* ── Menu bar timer running color ── */
.dock-unified-time.is-live{
  color:rgba(255,255,255,0.9) !important;
}
body.light-mode .dock-unified-time.is-live{
  color:rgba(0,0,0,0.85) !important;
}

/* ── Workout completion toast ── */
.completion-toast.free, .completion-toast.cable{
  background:rgba(255,255,255,0.08) !important;
  border-color:rgba(255,255,255,0.12) !important;
  color:rgba(255,255,255,0.8) !important;
}
body.light-mode .completion-toast.free, body.light-mode .completion-toast.cable{
  background:rgba(0,0,0,0.05) !important;
  border-color:rgba(0,0,0,0.08) !important;
  color:rgba(0,0,0,0.7) !important;
}

/* ── Incomplete recap ring ── */
.recap-check.incomplete.free .ring-fill,
.recap-check.incomplete.cable .ring-fill{
  stroke:rgba(255,255,255,0.6) !important;
}
body.light-mode .recap-check.incomplete.free .ring-fill,
body.light-mode .recap-check.incomplete.cable .ring-fill{
  stroke:rgba(0,0,0,0.5) !important;
}

/* ═══ END UNIFIED COLOR SYSTEM ═══ */

/* ═══ UNIFIED COLOR SYSTEM — REMAINING OVERRIDES ═══ */

/* ── Workout Banner Title ── */
.workout-banner-title.free, .workout-banner-title.cable{
  color:rgba(255,255,255,0.95) !important;
  text-shadow:none !important;
}
body.light-mode .workout-banner-title.free,
body.light-mode .workout-banner-title.cable{
  color:rgba(0,0,0,0.85) !important;
  text-shadow:none !important;
}

/* ── Bottom Dock Bar — live states ── */
.dock-unified-btn.live .dock-unified-clock,
.dock-unified-btn.live.cable .dock-unified-clock{
  stroke:rgba(255,255,255,0.85) !important;
}
.dock-unified-btn.live .dock-unified-time,
.dock-unified-btn.live.cable .dock-unified-time{
  color:rgba(255,255,255,0.85) !important;
}
body.light-mode .dock-unified-btn.live .dock-unified-clock,
body.light-mode .dock-unified-btn.live.cable .dock-unified-clock{
  stroke:rgba(0,0,0,0.75) !important;
}
body.light-mode .dock-unified-btn.live .dock-unified-time,
body.light-mode .dock-unified-btn.live.cable .dock-unified-time{
  color:rgba(0,0,0,0.75) !important;
}

/* ── Main Progress Ring (banner area) ── */
.progress-ring-fill, .progress-ring-fill.cable{
  stroke:rgba(255,255,255,0.8) !important;
  filter:drop-shadow(0 0 4px rgba(255,255,255,0.1)) !important;
}
body.light-mode .progress-ring-fill, body.light-mode .progress-ring-fill.cable{
  stroke:rgba(0,0,0,0.65) !important;
  filter:none !important;
}
.progress-ring-container.glow-free,
.progress-ring-container.glow-cable{
  filter:drop-shadow(0 0 6px rgba(255,255,255,var(--ring-glow,0))) !important;
}
body.light-mode .progress-ring-container.glow-free,
body.light-mode .progress-ring-container.glow-cable{
  filter:drop-shadow(0 0 6px rgba(0,0,0,var(--ring-glow,0))) !important;
}

/* ── Checklist Ring ── */
.cl-ring-fill, .cl-ring-wrap.cable .cl-ring-fill{
  stroke:rgba(255,255,255,0.8) !important;
}
body.light-mode .cl-ring-fill, body.light-mode .cl-ring-wrap.cable .cl-ring-fill{
  stroke:rgba(0,0,0,0.65) !important;
}

/* ── Banner Exercise Card Completion ── */
.bex-progress-fill, .bex-progress-fill.cable{
  background:rgba(255,255,255,0.6) !important;
}
body.light-mode .bex-progress-fill{
  background:rgba(0,0,0,0.5) !important;
}
.bex-completion, .bex-completion.cable{
  border-color:rgba(255,255,255,0.3) !important;
  color:rgba(255,255,255,0.6) !important;
}
.bex-completion.cable.empty{
  border-color:rgba(255,255,255,0.1) !important;
}
.banner-ex-card.ex-done .bex-completion,
.banner-ex-card.ex-done .bex-completion.cable{
  background:rgba(255,255,255,0.1) !important;
  border-color:rgba(255,255,255,0.25) !important;
  color:rgba(255,255,255,0.7) !important;
}
body.light-mode .bex-completion, body.light-mode .bex-completion.cable{
  border-color:rgba(0,0,0,0.55) !important;
  color:rgba(0,0,0,0.7) !important;
}
body.light-mode .banner-ex-card.ex-done .bex-completion{
  background:rgba(0,0,0,0.05) !important;
  border-color:rgba(0,0,0,0.15) !important;
  color:rgba(0,0,0,0.6) !important;
}

/* ── Banner Card Border (main card) ── */
.workout-banner-slide-center{
  border-color:rgba(255,255,255,0.07) !important;
}
body.light-mode .workout-banner-slide-center{
  border-color:rgba(0,0,0,0.08) !important;
}

/* ═══ END REMAINING OVERRIDES ═══ */

/* ═══ UNIFIED COLOR — CATCH-ALL OVERRIDES ═══ */

/* Progress bar labels */
.progress-bar-date.free, .progress-bar-date.cable{
  color:rgba(255,255,255,0.7) !important;
}
body.light-mode .progress-bar-date.free, body.light-mode .progress-bar-date.cable{
  color:rgba(0,0,0,0.6) !important;
}
.progress-bar-type.free, .progress-bar-type.cable{
  color:rgba(255,255,255,0.6) !important;
}
body.light-mode .progress-bar-type.free, body.light-mode .progress-bar-type.cable{
  color:rgba(0,0,0,0.7) !important;
}

/* Workout summary check marks */
.ws-item-check.done svg, .ws-item-check.done.cable svg{
  stroke:rgba(255,255,255,0.6) !important;
}
body.light-mode .ws-item-check.done svg{
  stroke:rgba(0,0,0,0.5) !important;
}

/* Completion check circles */
.completion-check.complete svg, .completion-check.complete.cable svg{
  stroke:rgba(255,255,255,0.6) !important;
}
body.light-mode .completion-check.complete svg{
  stroke:rgba(0,0,0,0.5) !important;
}

/* Timer session rows */
.timer-session-row.active .timer-session-label,
.timer-session-row.active .timer-session-dur,
.timer-session-row.active[data-week="cable"] .timer-session-label,
.timer-session-row.active[data-week="cable"] .timer-session-dur{
  color:rgba(255,255,255,0.8) !important;
}
body.light-mode .timer-session-row.active .timer-session-label,
body.light-mode .timer-session-row.active .timer-session-dur{
  color:rgba(0,0,0,0.7) !important;
}

/* Workout flow labels */
.wf-name.cable{ color:rgba(255,255,255,0.8) !important; }
.wf-equip.free, .wf-equip.cable{
  color:rgba(255,255,255,0.4) !important;
}
body.light-mode .wf-name.cable{ color:rgba(0,0,0,0.7) !important; }
body.light-mode .wf-equip.free, body.light-mode .wf-equip.cable{
  color:rgba(0,0,0,0.35) !important;
}

/* Set dots completion */
.set-dot.active.complete, .set-dot.active.complete.cable{
  background:rgba(255,255,255,0.7) !important;
  border-color:rgba(255,255,255,0.7) !important;
  color:rgba(0,0,0,0.8) !important;
  box-shadow:0 0 10px rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.2) !important;
}
body.light-mode .set-dot.active.complete, body.light-mode .set-dot.active.complete.cable{
  background:rgba(0,0,0,0.6) !important;
  border-color:rgba(0,0,0,0.6) !important;
  color:#fff !important;
  box-shadow:0 0 10px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.1) !important;
}

/* Recap footer labels */
.recap-footer-info .rfi-name.free, .recap-footer-info .rfi-name.cable{
  color:rgba(255,255,255,0.7) !important;
}
.recap-footer-info .rfi-equip.free, .recap-footer-info .rfi-equip.cable{
  color:rgba(255,255,255,0.35) !important;
}
body.light-mode .recap-footer-info .rfi-name.free,
body.light-mode .recap-footer-info .rfi-name.cable{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .recap-footer-info .rfi-equip.free,
body.light-mode .recap-footer-info .rfi-equip.cable{
  color:rgba(0,0,0,0.6) !important;
}

/* Recap detail values */
.recap-detail-value.free, .recap-detail-value.cable{
  color:rgba(255,255,255,0.9) !important;
}
body.light-mode .recap-detail-value.free, body.light-mode .recap-detail-value.cable{
  color:rgba(0,0,0,0.85) !important;
}

/* Status indicator checks */
.status-ind-check.achieved svg, .status-ind-check.achieved.cable svg,
.dur-status-ind.dur-check.achieved svg, .dur-status-ind.dur-check.achieved.cable svg,
.mini-card-ind.mc-check.achieved svg, .mini-card-ind.mc-check.achieved.cable svg{
  stroke:rgba(255,255,255,0.5) !important;
}
body.light-mode .status-ind-check.achieved svg,
body.light-mode .dur-status-ind.dur-check.achieved svg,
body.light-mode .mini-card-ind.mc-check.achieved svg{
  stroke:rgba(0,0,0,0.4) !important;
}

/* SC card cable-done checkmark */
.sc-card .set-block.set-row-done.cable-done .sc-round-row::after{
  color:rgba(255,255,255,0.5) !important;
}
body.light-mode .sc-card .set-block.set-row-done.cable-done .sc-round-row::after{
  color:rgba(0,0,0,0.65) !important;
}

/* Rest management icon */
.rest-mgmt-current-card.is-rest .rest-mgmt-current-icon svg{
  color:rgba(255,255,255,0.5) !important;
}
body.light-mode .rest-mgmt-current-card.is-rest .rest-mgmt-current-icon svg{
  color:rgba(0,0,0,0.65) !important;
}

/* ═══ END CATCH-ALL OVERRIDES ═══ */

/* ══════════════════════════════════════════════════════════════
   CARD LAYOUT SEPARATION + STANDARD CARD COLORS
   - Info section visually separated from sets
   - Each set gets its own card
   - Standard cards: white/black (no purple)
   - Superset cards: keep purple
   - Completion: green checkmarks
   ═════════════════════════════════════════════════════════════ */

/* ── Separate sets area from info ── */
.sc-card .sc-interleaved-table.sc-rounds-wrap{
  margin:16px 10px 10px !important;
  padding:0 !important;
  background:transparent !important;
  border-top:1px solid rgba(255,255,255,0.04);
  padding-top:12px !important;
}
body.light-mode .sc-card .sc-interleaved-table.sc-rounds-wrap{
  border-top-color:rgba(0,0,0,0.04);
}

/* ── Individual set cards ── */
.sc-card .set-block{
  background:rgba(255,255,255,0.02) !important;
  border:1px solid rgba(255,255,255,0.05) !important;
  border-radius:14px !important;
  margin-bottom:10px !important;
  padding:6px 8px !important;
  transition:all 0.2s ease !important;
}
body.light-mode .sc-card .set-block{
  background:rgba(0,0,0,0.015) !important;
  border-color:rgba(0,0,0,0.05) !important;
}
.sc-card .sets-wrap.compact-sets{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
}

/* Center set rows */
.sc-round-row{
  justify-content:center !important;
}
.sc-round-inputs{
  justify-content:center !important;
}

/* Center the round label */
.sc-round-num{
  text-align:center !important;
  padding:10px 4px 6px !important;
}

/* Remove old round-card separators since set-blocks are now cards */
.sc-round-card + .sc-round-card{
  border-top:none !important;
  margin-top:0 !important;
  padding-top:0 !important;
}

/* ── Round number label: white/black for standard, purple for superset ── */
.sc-std-card .sc-round-num{
  color:rgba(255,255,255,0.25) !important;
}
body.light-mode .sc-std-card .sc-round-num{
  color:rgba(0,0,0,0.55) !important;
}

/* ── Standard card active input: white/black instead of purple ── */
.sc-std-card .set-input.active-input{
  border:1.5px solid rgba(255,255,255,0.4) !important;
  border-right:3px solid rgba(255,255,255,0.8) !important;
  animation:scStdCursorBlink 1s step-end infinite !important;
  color:#fff !important;
  background:rgba(255,255,255,0.04) !important;
  box-shadow:0 0 12px rgba(255,255,255,0.06) !important;
}
body.light-mode .sc-std-card .set-input.active-input{
  border:1.5px solid rgba(0,0,0,0.3) !important;
  border-right:3px solid rgba(0,0,0,0.6) !important;
  color:#111 !important;
  background:rgba(0,0,0,0.03) !important;
  box-shadow:0 0 12px rgba(0,0,0,0.04) !important;
}
@keyframes scStdCursorBlink{
  0%,100%{ border-right-color:rgba(255,255,255,0.8); }
  50%{ border-right-color:transparent; }
}

/* ── Standard card active set flash: white instead of purple ── */
.sc-std-card .set-block.ss-active-set .table-set-row,
.sc-std-card .set-block.ss-active-set .sc-round-row{
  animation:scStdActiveFlash 3s ease-in-out infinite !important;
}
.sc-std-card .set-block.ss-active-set.ss-new-active .table-set-row,
.sc-std-card .set-block.ss-active-set.ss-new-active .sc-round-row{
  animation:scStdNewActiveFlash 1.5s ease-in-out 1 !important;
}
@keyframes scStdActiveFlash{
  0%,85%,100%{ background:rgba(255,255,255,0.02); }
  90%{ background:rgba(255,255,255,0.06); }
  95%{ background:rgba(255,255,255,0.03); }
}
@keyframes scStdNewActiveFlash{
  0%{ background:rgba(255,255,255,0.1); box-shadow:0 0 16px rgba(255,255,255,0.06); }
  20%{ background:rgba(255,255,255,0.02); box-shadow:none; }
  40%{ background:rgba(255,255,255,0.07); box-shadow:0 0 12px rgba(255,255,255,0.04); }
  60%{ background:rgba(255,255,255,0.02); box-shadow:none; }
  80%{ background:rgba(255,255,255,0.04); }
  100%{ background:rgba(255,255,255,0.02); }
}

/* Standard card active set label colors: white */
.sc-std-card .set-block.ss-active-set .sc-round-letter{
  background:rgba(255,255,255,0.08) !important;
  color:rgba(255,255,255,0.7) !important;
}
.sc-std-card .set-block.ss-active-set .sc-input-goal{
  color:rgba(255,255,255,0.35) !important;
}
.sc-std-card .set-block.ss-active-set .set-num{
  color:rgba(255,255,255,0.7) !important;
}
.sc-std-card .set-block.ss-active-set .set-input.zero-value{
  border-color:rgba(255,255,255,0.12) !important;
  animation:scStdZeroFlash 3s ease-in-out infinite !important;
}
@keyframes scStdZeroFlash{
  0%,85%,100%{ color:rgba(255,255,255,0.25); }
  90%{ color:rgba(255,255,255,0.7); }
}
body.light-mode .sc-std-card .set-block.ss-active-set .sc-round-letter{
  background:rgba(0,0,0,0.05) !important;
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .sc-std-card .set-block.ss-active-set .sc-input-goal{
  color:rgba(0,0,0,0.6) !important;
}
body.light-mode .sc-std-card .set-block.ss-active-set .set-num{
  color:rgba(0,0,0,0.6) !important;
}

/* ── Completed set: GREEN checkmark always (never blue) ── */
.sc-card .set-block.set-row-done .sc-round-row{
  background:rgba(255,255,255,0.02) !important;
}
.sc-card .set-block.set-row-done .sc-round-row::after{
  color:#34D399 !important;
}
.sc-card .set-block.set-row-done .sc-round-letter{
  background:rgba(52,211,153,0.1) !important;
  color:#34D399 !important;
}
.sc-card .set-block.set-row-done.cable-done .sc-round-row{
  background:rgba(255,255,255,0.02) !important;
}
.sc-card .set-block.set-row-done.cable-done .sc-round-row::after{
  color:#34D399 !important;
}
.sc-card .set-block.set-row-done.cable-done .sc-round-letter{
  background:rgba(52,211,153,0.1) !important;
  color:#34D399 !important;
}
/* Done set-block card gets subtle border */
.sc-card .set-block.set-row-done{
  border-color:rgba(52,211,153,0.1) !important;
  background:rgba(52,211,153,0.02) !important;
}
/* PR done set-block gets gold border */
.sc-card .set-block.set-has-pr.set-row-done{
  border-color:rgba(212,188,138,0.15) !important;
  background:rgba(212,188,138,0.02) !important;
}
body.light-mode .sc-card .set-block.set-row-done{
  border-color:rgba(34,160,94,0.08) !important;
  background:rgba(34,160,94,0.015) !important;
}
body.light-mode .sc-card .set-block.set-row-done .sc-round-row{
  background:transparent !important;
}
body.light-mode .sc-card .set-block.set-row-done .sc-round-row::after{
  color:rgba(34,160,94,0.7) !important;
}
body.light-mode .sc-card .set-block.set-row-done .sc-round-letter{
  background:rgba(34,160,94,0.06) !important;
  color:rgba(34,160,94,0.7) !important;
}

/* Completed round number: white/green check */
.sc-std-card .sc-round-card:not(:has(.set-block:not(.set-row-done))) .sc-round-num{
  color:rgba(255,255,255,0.3) !important;
}
.sc-round-card:not(:has(.set-block:not(.set-row-done))) .sc-round-num::after{
  color:#34D399 !important;
}
body.light-mode .sc-std-card .sc-round-card:not(:has(.set-block:not(.set-row-done))) .sc-round-num{
  color:rgba(0,0,0,0.25) !important;
}
body.light-mode .sc-round-card:not(:has(.set-block:not(.set-row-done))) .sc-round-num::after{
  color:rgba(34,160,94,0.7) !important;
}

/* ── SC Set Letter (unified override for done) ── */
.sc-card .set-block.set-row-done .sc-set-letter{
  background:rgba(52,211,153,0.08) !important;
  color:#34D399 !important;
}
body.light-mode .sc-card .set-block.set-row-done .sc-set-letter{
  background:rgba(34,160,94,0.05) !important;
  color:rgba(34,160,94,0.65) !important;
}

/* ═══ END CARD LAYOUT SEPARATION ═══ */

/* ═══ TIMER + CONTROLS VISUAL UPGRADE ═══ */

/* Duration popup close X */
.dur-popup-close-x{
  position:absolute; top:14px; right:14px; z-index:10;
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:all 0.15s;
}
.dur-popup-close-x:active{ transform:scale(0.9); background:rgba(255,255,255,0.08); }
.dur-popup-close-x svg{
  width:16px; height:16px;
  stroke:rgba(255,255,255,0.4); stroke-width:2;
  stroke-linecap:round; fill:none;
}
body.light-mode .dur-popup-close-x{
  background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.06);
}
body.light-mode .dur-popup-close-x svg{ stroke:rgba(0,0,0,0.55); }

/* Reset button style */
.dur-action-reset{
  background:rgba(255,255,255,0.04) !important;
  color:rgba(255,255,255,0.45) !important;
}
.dur-action-reset svg{
  stroke:rgba(255,255,255,0.4) !important; fill:none !important;
}
body.light-mode .dur-action-reset{
  background:rgba(0,0,0,0.03) !important;
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .dur-action-reset svg{ stroke:rgba(0,0,0,0.55) !important; }

/* Per-exercise controls group */
.dur-item-ctrls{
  display:flex; gap:4px; align-items:center; flex-shrink:0;
}
.dur-item-reset svg{
  stroke:rgba(255,255,255,0.25) !important; fill:none !important;
  width:11px !important; height:11px !important;
}
body.light-mode .dur-item-reset svg{ stroke:rgba(0,0,0,0.5) !important; }

/* ── Live exercise timer in card ── */
.sc-card-timer{
  display:flex; align-items:center; gap:6px;
  padding:8px 16px 4px;
}
.sc-card-timer svg{
  width:14px; height:14px;
  stroke:rgba(255,255,255,0.2);
}
.sc-card-timer-val{
  font-size:14px; font-weight:700;
  color:rgba(255,255,255,0.3);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.3px;
  min-width:36px;
}
.sc-card-timer.is-live svg{
  stroke:rgba(255,255,255,0.5);
}
.sc-card-timer.is-live .sc-card-timer-val{
  color:rgba(255,255,255,0.7);
}
body.light-mode .sc-card-timer svg{ stroke:rgba(0,0,0,0.15); }
body.light-mode .sc-card-timer-val{ color:rgba(0,0,0,0.25); }
body.light-mode .sc-card-timer.is-live svg{ stroke:rgba(0,0,0,0.4); }
body.light-mode .sc-card-timer.is-live .sc-card-timer-val{ color:rgba(0,0,0,0.7); }

/* Timer control buttons */
.sc-timer-ctrls{
  display:flex; gap:6px; align-items:center;
  margin-left:auto;
}
.sc-timer-btn{
  width:30px; height:30px; border-radius:8px; border:none;
  background:rgba(255,255,255,0.04);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:all 0.15s;
}
.sc-timer-btn:active{ transform:scale(0.88); background:rgba(255,255,255,0.08); }
.sc-timer-btn svg{
  width:14px; height:14px; fill:none;
  stroke:rgba(255,255,255,0.35); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.sc-timer-play .sct-play{ fill:rgba(255,255,255,0.35); stroke:none; }
.sc-timer-play .sct-pause{ fill:none; stroke:rgba(255,200,100,0.7); stroke-width:2.5; }
.sc-timer-play.is-running .sct-play{ display:none !important; }
.sc-timer-play.is-running .sct-pause{ display:inline !important; }
.sc-timer-play:not(.is-running) .sct-play{ display:inline !important; }
.sc-timer-play:not(.is-running) .sct-pause{ display:none !important; }
body.light-mode .sc-timer-btn{
  background:rgba(0,0,0,0.03);
}
body.light-mode .sc-timer-btn svg{ stroke:rgba(0,0,0,0.55); }
body.light-mode .sc-timer-play .sct-play{ fill:rgba(0,0,0,0.55); }
body.light-mode .sc-timer-play .sct-pause{ stroke:rgba(180,130,30,0.6); }

/* ── PR value gold text ── */
.sc-card .set-block.set-has-pr .set-input:not(.zero-value),
.set-has-pr .set-input:not(.zero-value){
  color:rgba(212,188,138,0.95) !important;
}
body.light-mode .sc-card .set-block.set-has-pr .set-input:not(.zero-value),
body.light-mode .set-has-pr .set-input:not(.zero-value){
  color:rgba(180,140,50,0.85) !important;
}

/* ── Banner summary button ── */
.banner-summary-btn{
  width:100%; padding:10px 16px; margin-top:6px;
  border:1px solid rgba(52,211,153,0.15);
  border-radius:12px;
  background:rgba(52,211,153,0.04);
  color:rgba(52,211,153,0.7);
  font-family:inherit; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:all 0.15s;
}
.banner-summary-btn:active{
  transform:scale(0.98); background:rgba(52,211,153,0.08);
}
.banner-summary-btn svg{
  width:16px; height:16px; stroke:rgba(52,211,153,0.6);
}
body.light-mode .banner-summary-btn{
  border-color:rgba(34,160,94,0.12);
  background:rgba(34,160,94,0.03);
  color:rgba(34,160,94,0.6);
}
body.light-mode .banner-summary-btn svg{ stroke:rgba(34,160,94,0.5); }

/* ═══ END TIMER UPGRADE ═══ */

/* ═══ PROGRESS RINGS + PR GOLD ═══ */

/* Hide banner overall progress bar */
.banner-progress-bar{ display:none !important; }

/* Hide per-exercise progress bars in banner */
.bex-progress{ display:none !important; }
.bex-completion{ display:none !important; }

/* ── Banner exercise badge → SVG ring ── */
.bex-status{
  position:relative !important;
  width:28px !important; height:28px !important;
  border:none !important;
}
.bex-ring-svg{
  position:absolute; inset:0;
  width:28px; height:28px;
  transform:rotate(-90deg);
}
.bex-ring-bg{
  fill:none; stroke:rgba(255,255,255,0.06); stroke-width:2.5;
}
.bex-ring-fill{
  fill:none; stroke-width:2.5;
  stroke-linecap:round;
  transition:stroke-dashoffset 0.5s ease;
}
.bex-num{
  position:relative; z-index:1;
}
body.light-mode .bex-ring-bg{ stroke:rgba(0,0,0,0.05); }

/* ── Detail screen circles → SVG rings ── */
.ex-detail-circle{
  position:relative !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.edc-ring-svg{
  position:absolute; inset:0;
  transform:rotate(-90deg);
}
.edc-ring-bg{
  fill:none; stroke:rgba(255,255,255,0.06); stroke-width:2.5;
}
body.light-mode .edc-ring-bg{ stroke:rgba(0,0,0,0.05); }
.edc-ring-fill{
  fill:none; stroke-width:2.5;
  stroke-linecap:round;
  transition:stroke-dashoffset 0.6s cubic-bezier(0.32,0.72,0,1);
}
.edc-num{
  position:relative; z-index:1;
  font-size:inherit; font-weight:inherit;
}
/* Remove old border since ring replaces it */
.ex-detail-circle:not(.active){
  border:none !important;
  background:rgba(255,255,255,0.02) !important;
}
body.light-mode .ex-detail-circle:not(.active){
  background:rgba(0,0,0,0.01) !important;
  border:none !important;
}
/* Active circle keeps solid fill, ring on top */
.ex-detail-circle.active{
  border:none !important;
}
.ex-detail-circle.active .edc-ring-bg{
  stroke:rgba(255,255,255,0.12);
}
.ex-detail-circle.active .edc-ring-fill{
  stroke-width:3;
}

/* Complete circles: green ring + green number */
.ex-detail-circle-wrap.complete .ex-detail-circle:not(.active){
  background:transparent !important;
  border:none !important;
}
.ex-detail-circle-wrap.complete .ex-detail-circle:not(.active) .edc-num{
  color:#34D399 !important;
}
.ex-detail-circle-wrap.complete .ex-detail-circle.active{
  background:rgba(52,211,153,0.1) !important;
  border:none !important;
}
.ex-detail-circle-wrap.complete .ex-detail-circle.active .edc-num{
  color:#34D399 !important;
}
body.light-mode .ex-detail-circle-wrap.complete .ex-detail-circle:not(.active){
  background:transparent !important; border:none !important;
}
body.light-mode .ex-detail-circle-wrap.complete .ex-detail-circle:not(.active) .edc-num{
  color:rgba(34,160,94,0.7) !important;
}
body.light-mode .ex-detail-circle-wrap.complete .ex-detail-circle.active{
  background:rgba(34,160,94,0.06) !important;
}

/* PR circles: gold ring tint */
.ex-detail-circle-wrap.has-pr .ex-detail-circle:not(.active) .edc-num{
  color:rgba(212,188,138,0.8) !important;
}

/* ── PR gold for banner best value ── */
.bex-pr-gold{
  color:rgba(212,188,138,0.95) !important;
}
body.light-mode .bex-pr-gold{
  color:rgba(180,140,50,0.85) !important;
}

/* ── Best + PR row ── */
.bex-best-row{
  display:flex; align-items:center; gap:6px;
  padding:4px 0 2px;
  font-size:11px;
}
.bex-best-label{
  font-weight:700; color:rgba(255,255,255,0.3);
  letter-spacing:0.3px; flex-shrink:0;
}
.bex-best-label.bex-best-empty{ font-style:italic; }
.bex-best-val{
  font-weight:700; color:rgba(255,255,255,0.7);
  font-variant-numeric:tabular-nums;
}
.bex-best-spacer{ flex:1; }
.bex-pr-trophy{
  display:flex; align-items:center; flex-shrink:0;
}
.bex-pr-trophy svg{
  width:13px; height:13px;
  stroke:rgba(255,255,255,0.15);
}
.bex-pr-trophy.lit svg{
  stroke:rgba(212,188,138,0.8);
}
/* old .bex-pr-target base rule removed — canonical rule is at end of stylesheet */
body.light-mode .bex-best-label{ color:rgba(0,0,0,0.25); }
body.light-mode .bex-best-val{ color:rgba(0,0,0,0.6); }
body.light-mode .bex-pr-trophy svg{ stroke:rgba(0,0,0,0.12); }
body.light-mode .bex-pr-trophy.lit svg{ stroke:rgba(180,140,50,0.7); }
body.light-mode .bex-pr-target{ color:rgba(0,0,0,0.12); }
body.light-mode .bex-pr-target.lit{ color:rgba(180,140,50,0.8); }

/* ── Sets count text ── */
.bex-sets-count{
  font-size:10px; font-weight:700;
  color:rgba(255,255,255,0.25);
  font-variant-numeric:tabular-nums;
  padding:2px 0;
}
body.light-mode .bex-sets-count{ color:rgba(0,0,0,0.55); }

/* ═══ END PROGRESS RINGS ═══ */

/* ═══ REVAMPED DETAIL HEADER ═══ */
.ex-detail-header{
  display:block !important;
  background:linear-gradient(180deg, rgba(18,18,24,1) 0%, rgba(18,18,24,0.95) 100%);
  padding-top:env(safe-area-inset-top);
  flex-shrink:0;
}
body.light-mode .ex-detail-header{
  background:linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.97) 100%);
}

/* Top bar: back + title + meta */
.edh-bar{
  display:flex; align-items:center;
  padding:8px 12px 6px; gap:10px;
}
.edh-back{
  width:36px; height:36px; border-radius:50%;
  background:transparent; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.15s;
}
.edh-back:active{ transform:scale(0.85); background:rgba(255,255,255,0.06); }
.edh-back svg{ width:22px; height:22px; stroke:rgba(255,255,255,0.5); }
body.light-mode .edh-back svg{ stroke:rgba(0,0,0,0.4); }

.edh-center{ flex:1; min-width:0; }
.edh-name{
  font-size:17px; font-weight:800;
  color:#fff; letter-spacing:-0.2px;
  line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.light-mode .edh-name{ color:#111; }
.edh-meta{
  font-size:10px; font-weight:600;
  color:rgba(255,255,255,0.25);
  letter-spacing:0.6px; text-transform:uppercase;
  margin-top:1px;
}
.edh-meta .ctx-sep{
  font-size:inherit; letter-spacing:inherit;
  margin:0 4px; opacity:0.4;
}
.edh-meta .ctx-date, .edh-meta .ctx-type, .edh-meta .ctx-week{
  font-size:inherit; letter-spacing:inherit; font-weight:inherit;
  color:inherit;
}
body.light-mode .edh-meta{ color:rgba(0,0,0,0.22); }

.edh-right{ flex-shrink:0; text-align:right; }
.edh-sub{
  font-size:11px; font-weight:600;
  color:rgba(255,255,255,0.3);
  letter-spacing:0.2px;
}
body.light-mode .edh-sub{ color:rgba(0,0,0,0.25); }

/* ── Navigation circles — pill track ── */
.edh-nav{
  padding:6px 16px 10px;
  display:flex; justify-content:center;
}
.edh-circles{
  display:inline-flex; align-items:center;
  gap:6px;
  background:rgba(255,255,255,0.03);
  border-radius:20px;
  padding:4px 6px;
}
body.light-mode .edh-circles{
  background:rgba(0,0,0,0.025);
}

/* Individual circle — progress ring */
.ex-detail-circle-wrap{
  display:flex; align-items:center; justify-content:center;
  padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ex-detail-circle{
  width:30px; height:30px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  font-size:12px; font-weight:800;
  color:rgba(255,255,255,0.3);
  background:transparent;
  border:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.25s ease;
}
.ex-detail-circle:active{ transform:scale(0.88); }

/* Active pill */
.ex-detail-circle.active{
  width:38px; height:30px;
  border-radius:15px;
  background:rgba(255,255,255,0.1);
  font-size:13px;
  color:#fff;
}
body.light-mode .ex-detail-circle{
  color:rgba(0,0,0,0.25);
}
body.light-mode .ex-detail-circle.active{
  background:rgba(0,0,0,0.07);
  color:#111;
}

/* Ring SVG */
.edc-ring-svg{
  position:absolute; inset:0;
  transform:rotate(-90deg);
}
.edc-ring-bg{
  fill:none; stroke:rgba(255,255,255,0.05); stroke-width:2.5;
}
body.light-mode .edc-ring-bg{ stroke:rgba(0,0,0,0.04); }
.edc-ring-fill{
  fill:none; stroke-width:2.5;
  stroke-linecap:round;
  transition:stroke-dashoffset 0.6s cubic-bezier(0.32,0.72,0,1);
}
.edc-num{
  position:relative; z-index:1;
  font-size:inherit; font-weight:inherit;
}

/* Active ring adjustments */
.ex-detail-circle.active .edc-ring-bg{
  stroke:rgba(255,255,255,0.08);
}
.ex-detail-circle.active .edc-ring-fill{
  stroke-width:3;
}

/* Complete state */
.ex-detail-circle-wrap.complete .ex-detail-circle:not(.active){
  background:transparent !important;
}
.ex-detail-circle-wrap.complete .ex-detail-circle:not(.active) .edc-num{
  color:#34D399 !important;
}
body.light-mode .ex-detail-circle-wrap.complete .ex-detail-circle:not(.active) .edc-num{
  color:rgba(34,160,94,0.7) !important;
}

/* PR state */
.ex-detail-circle-wrap.has-pr .ex-detail-circle:not(.active) .edc-num{
  color:rgba(212,188,138,0.8) !important;
}

/* Override old conflicting styles */
.ex-detail-top-bar{ display:none !important; }
.ex-detail-nav-row{ display:none !important; }
div.ex-detail-name{ display:none !important; }
div.ex-detail-subtitle{ display:none !important; }
.ex-detail-circles{ display:contents; }
.edh-circles-row{ display:none !important; }
.edc-indicators{ display:none !important; }

/* Flex screen layout */
.ex-detail-screen{
  display:flex !important;
  flex-direction:column !important;
}
.ex-detail-screen .ex-detail-body{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.ex-detail-screen{
  overflow-y:hidden !important;
}

/* ═══ END REVAMPED HEADER ═══ */

/* ═══ CARD LAYOUT + BANNER BUTTONS FIX ═══ */

/* ── Compact banner buttons ── */
.banner-start-btn, .banner-summary-btn{ display:none !important; }

.banner-action-row{
  display:flex; gap:8px; padding:8px 0 4px;
}
.banner-play-btn, .banner-recap-btn{
  display:flex; align-items:center; gap:5px;
  padding:8px 14px; border-radius:10px;
  font-family:inherit; font-size:12px; font-weight:700;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:all 0.15s; border:none;
}
.banner-play-btn:active, .banner-recap-btn:active{ transform:scale(0.95); }
.banner-play-btn svg, .banner-recap-btn svg{ width:14px; height:14px; flex-shrink:0; }

.banner-play-btn{
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.7);
}
.banner-play-btn svg{ stroke:rgba(255,255,255,0.6); fill:none; }
.banner-play-btn.is-complete{
  background:rgba(52,211,153,0.08);
  color:rgba(52,211,153,0.7);
}
.banner-play-btn.is-complete svg{ stroke:rgba(52,211,153,0.6); }
body.light-mode .banner-play-btn{
  background:rgba(0,0,0,0.04); color:rgba(0,0,0,0.6);
}
body.light-mode .banner-play-btn svg{ stroke:rgba(0,0,0,0.5); }

.banner-recap-btn{
  background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.4);
}
.banner-recap-btn svg{ stroke:rgba(255,255,255,0.35); fill:none; }
body.light-mode .banner-recap-btn{
  background:rgba(0,0,0,0.02); color:rgba(0,0,0,0.35);
}

/* ── PR line directly below name ── */
.sc-ex-pr-line{
  padding:2px 0 0 0 !important;
}

/* ── Icons bigger and same size ── */
.sc-video-sq{
  width:64px !important; height:64px !important; border-radius:14px !important;
}
.sc-ex-icons .sc-ex-img{
  width:64px !important; height:64px !important; border-radius:14px !important;
}
.sc-video-sq-play svg{ width:18px !important; height:18px !important; }

/* ── LB/KG toggle centered below stepper ── */
.sc-unit-stepper{
  margin:3px auto 0 !important;
  transform:none !important;
  display:flex !important;
  border-radius:6px !important;
  width:fit-content !important;
}
.sc-input-wrap:has(.sc-unit-stepper){
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}
.sc-stepper-col{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}

/* ═══ END CARD LAYOUT FIX ═══ */

/* ═══ REMOVE CARD REDUNDANCY ═══ */
/* Exercise name already shown in detail header (standard cards only) */
.sc-std-card .sc-ex-name{ display:none !important; }
/* Goal label already shown in subtitle */
.sc-goal-label{ display:none !important; }
/* Tempo already merged into subtitle */
.sc-tempo-line{ display:none !important; }
/* ═══ END REMOVE REDUNDANCY ═══ */

/* ══════════════════════════════════════════════════════════════
   STEEL FINISH — HIGH CONTRAST
   ═════════════════════════════════════════════════════════════ */

/* ── Brushed steel texture ── */
.sc-card::before,
.workout-banner-slide-center::before,
.ex-detail-header::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.008) 0px,
      transparent 1px,
      transparent 2px,
      rgba(255,255,255,0.005) 3px
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  background-size:4px 4px, 48px 48px;
  pointer-events:none;
  border-radius:inherit;
  mix-blend-mode:overlay;
}
.sc-card{ position:relative !important; }
.workout-banner-slide-center{ position:relative !important; }

/* ── Page background — handled by theme system ── */

/* ── Workout Banner Card ── */
.workout-banner-slide-center{
  background:linear-gradient(165deg, #10121a 0%, #0c0e14 50%, #0e1018 100%) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:16px !important;
  box-shadow:0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
body.light-mode .workout-banner-slide-center{
  background:linear-gradient(165deg, #fff 0%, #f8f9fc 50%, #fff 100%) !important;
  border-color:rgba(0,0,0,0.65) !important;
  box-shadow:0 4px 20px rgba(0,0,0,0.08) !important;
}

/* Banner title */
.workout-banner-title, .workout-banner-title.free, .workout-banner-title.cable{
  color:#fff !important;
  text-shadow:0 1px 4px rgba(0,0,0,0.3) !important;
  font-weight:900 !important;
}
body.light-mode .workout-banner-title{
  color:#111 !important; text-shadow:none !important;
}

/* Banner exercise cards */
.banner-ex-card{
  background-color:rgba(255,255,255,0.025) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  border-radius:12px !important;
}
.banner-ex-card:active{ background-color:rgba(255,255,255,0.06) !important; }
.banner-ex-card.is-active{
  border-color:rgba(255,255,255,0.18) !important;
  background-color:rgba(255,255,255,0.05) !important;
}
body.light-mode .banner-ex-card{
  background-color:rgba(0,0,0,0.015) !important;
  border-color:rgba(0,0,0,0.06) !important;
}
body.light-mode .banner-ex-card.is-active{
  border-color:rgba(0,0,0,0.15) !important;
}

/* Banner text — bright */
.bex-name{ color:rgba(255,255,255,0.9) !important; }
.bex-chip{ color:rgba(255,255,255,0.55) !important; }
.bex-best-label{ color:rgba(255,255,255,0.45) !important; }
.bex-best-val{ color:#fff !important; }
.bex-sets-count{ color:rgba(255,255,255,0.4) !important; }
/* bex-pr-target:not(.lit) override removed — new pill CSS handles all states */
.bex-pr-trophy:not(.lit) svg{ stroke:rgba(255,255,255,0.2) !important; }
body.light-mode .bex-name{ color:rgba(0,0,0,0.85) !important; }
body.light-mode .bex-chip{ color:rgba(0,0,0,0.7) !important; }
body.light-mode .bex-best-label{ color:rgba(0,0,0,0.65) !important; }
body.light-mode .bex-best-val{ color:#111 !important; }
body.light-mode .bex-sets-count{ color:rgba(0,0,0,0.35) !important; }

/* Banner ring — bright */
.bex-ring-bg{ stroke:rgba(255,255,255,0.08) !important; }
body.light-mode .bex-ring-bg{ stroke:rgba(0,0,0,0.08) !important; }
.bex-num{ color:rgba(255,255,255,0.8) !important; }
body.light-mode .bex-num{ color:rgba(0,0,0,0.7) !important; }

/* Banner action buttons */
.banner-play-btn{
  background:rgba(255,255,255,0.08) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.12) !important;
}
.banner-play-btn svg{ stroke:#fff !important; }
.banner-play-btn.is-complete{
  background:rgba(52,211,153,0.1) !important;
  color:#34D399 !important;
  border-color:rgba(52,211,153,0.2) !important;
}
.banner-play-btn.is-complete svg{ stroke:#34D399 !important; }
.banner-recap-btn{
  background:rgba(255,255,255,0.04) !important;
  color:rgba(255,255,255,0.6) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
}
.banner-recap-btn svg{ stroke:rgba(255,255,255,0.5) !important; }
body.light-mode .banner-play-btn{
  background:rgba(0,0,0,0.06) !important; color:#111 !important; border-color:rgba(0,0,0,0.65) !important;
}
body.light-mode .banner-play-btn svg{ stroke:#111 !important; }
body.light-mode .banner-recap-btn{
  background:rgba(0,0,0,0.03) !important; color:rgba(0,0,0,0.7) !important; border-color:rgba(0,0,0,0.06) !important;
}
body.light-mode .banner-recap-btn svg{ stroke:rgba(0,0,0,0.4) !important; }

/* ── Expanded Exercise Card ── */
.sc-card{
  background:linear-gradient(170deg, #0e1018 0%, #0a0c12 100%) !important;
  border-radius:16px !important;
  box-shadow:0 10px 36px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.07) !important;
}
body.light-mode .sc-card{
  background:linear-gradient(170deg, #fff 0%, #f8f9fc 100%) !important;
  box-shadow:0 4px 16px rgba(0,0,0,0.06) !important;
  border-color:rgba(0,0,0,0.08) !important;
}

/* PR chip */
.sc-top-row .sc-pr-cell{
  background:rgba(212,188,138,0.06) !important;
  border:1px solid rgba(212,188,138,0.12) !important;
}
.sc-trophy{ stroke:rgba(212,188,138,0.6) !important; }
.sc-pr-label{ color:rgba(212,188,138,0.5) !important; }
.sc-pr-val{ color:rgba(212,188,138,0.4) !important; }

/* Timer — bright */
.sc-top-row .sc-card-timer svg{ stroke:rgba(255,255,255,0.35) !important; }
.sc-top-row .sc-card-timer-val{
  font-size:18px !important; font-weight:800 !important;
  min-width:44px !important;
  color:rgba(255,255,255,0.45) !important;
}
.sc-card-timer.is-live svg{ stroke:#34D399 !important; }
.sc-card-timer.is-live .sc-card-timer-val{ color:#34D399 !important; }
body.light-mode .sc-top-row .sc-card-timer svg{ stroke:rgba(0,0,0,0.55) !important; }
body.light-mode .sc-top-row .sc-card-timer-val{ color:rgba(0,0,0,0.65) !important; }
body.light-mode .sc-card-timer.is-live svg{ stroke:rgba(34,160,94,0.85) !important; }
body.light-mode .sc-card-timer.is-live .sc-card-timer-val{ color:rgba(34,160,94,0.85) !important; }

.sc-timer-btn{
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
}
.sc-timer-btn svg{ stroke:rgba(255,255,255,0.5) !important; }
.sc-timer-play .sct-play{ fill:rgba(255,255,255,0.45) !important; }
.sc-timer-play .sct-pause{ stroke:rgba(255,255,255,0.6) !important; }
body.light-mode .sc-timer-btn{
  background:rgba(0,0,0,0.04) !important; border-color:rgba(0,0,0,0.08) !important;
}
body.light-mode .sc-timer-btn svg{ stroke:rgba(0,0,0,0.45) !important; }
body.light-mode .sc-timer-play .sct-play{ fill:rgba(0,0,0,0.4) !important; }

/* Image containers */
.sc-card-images .sc-video-sq{ border:1px solid rgba(255,255,255,0.08) !important; }
.sc-card-images .sc-ex-img{ border:1px solid rgba(255,255,255,0.06) !important; }
.sc-summary-btn{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
}
.sc-summary-btn svg{ stroke:rgba(255,255,255,0.4) !important; }
.sc-summary-btn span{ color:rgba(255,255,255,0.35) !important; }
body.light-mode .sc-card-images .sc-video-sq{ border-color:rgba(0,0,0,0.08) !important; }
body.light-mode .sc-card-images .sc-ex-img{ border-color:rgba(0,0,0,0.06) !important; }
body.light-mode .sc-summary-btn{
  background:rgba(0,0,0,0.03) !important; border-color:rgba(0,0,0,0.06) !important;
}
body.light-mode .sc-summary-btn svg{ stroke:rgba(0,0,0,0.55) !important; }
body.light-mode .sc-summary-btn span{ color:rgba(0,0,0,0.6) !important; }

/* ── Set blocks ── */
.sc-card .set-block{
  background:rgba(0,0,0,0.15) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  border-radius:12px !important;
}
body.light-mode .sc-card .set-block{
  background:rgba(0,0,0,0.02) !important;
  border-color:rgba(0,0,0,0.06) !important;
}

/* Set labels — bright */
.sc-round-num{ color:rgba(255,255,255,0.35) !important; }
body.light-mode .sc-round-num{ color:rgba(0,0,0,0.6) !important; }

/* Input fields */
.sc-card .set-input{
  border:1.5px solid rgba(255,255,255,0.12) !important;
  border-style:solid !important;
  border-radius:8px !important;
  background:rgba(0,0,0,0.35) !important;
  color:rgba(255,255,255,0.6) !important;
  font-weight:800 !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.15) !important;
}
.sc-card .set-input.zero-value{
  color:rgba(255,255,255,0.18) !important;
  border-color:rgba(255,255,255,0.06) !important;
}
.sc-card .set-input:not(.zero-value){
  border-color:rgba(255,255,255,0.25) !important;
  color:#fff !important;
}
body.light-mode .sc-card .set-input{
  background:rgba(0,0,0,0.03) !important;
  border-color:rgba(0,0,0,0.65) !important;
  color:rgba(0,0,0,0.7) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.04) !important;
}
body.light-mode .sc-card .set-input.zero-value{
  color:rgba(0,0,0,0.15) !important;
}
body.light-mode .sc-card .set-input:not(.zero-value){
  border-color:rgba(0,0,0,0.18) !important;
  color:#111 !important;
}

/* × separator */
.sc-input-x{ color:rgba(255,255,255,0.25) !important; font-weight:700 !important; }
body.light-mode .sc-input-x{ color:rgba(0,0,0,0.55) !important; }

/* Goal labels */
.sc-input-goal{ color:rgba(255,255,255,0.3) !important; }
body.light-mode .sc-input-goal{ color:rgba(0,0,0,0.6) !important; }

/* Stepper arrows */
.sc-step{
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.07) !important;
}
.sc-step svg{ stroke:rgba(255,255,255,0.5) !important; }
.sc-step:active{ background:rgba(255,255,255,0.12) !important; }
body.light-mode .sc-step{
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(0,0,0,0.06) !important;
}
body.light-mode .sc-step svg{ stroke:rgba(0,0,0,0.45) !important; }

/* LB/KG toggle */
.sc-unit-stepper{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.07) !important;
}
.sc-unit-opt{ color:rgba(255,255,255,0.3) !important; }
.sc-unit-opt.sc-unit-on{
  color:#fff !important;
  background:rgba(255,255,255,0.12) !important;
}
body.light-mode .sc-unit-stepper{
  background:rgba(0,0,0,0.03) !important; border-color:rgba(0,0,0,0.06) !important;
}
body.light-mode .sc-unit-opt{ color:rgba(0,0,0,0.25) !important; }
body.light-mode .sc-unit-opt.sc-unit-on{
  color:#111 !important; background:rgba(0,0,0,0.08) !important;
}

/* ── Detail Header ── */
.ex-detail-header{
  background:linear-gradient(180deg, #0e1018 0%, #0c0e15 100%) !important;
  border-bottom:1px solid rgba(255,255,255,0.05) !important;
}
.edh-back svg{ stroke:rgba(255,255,255,0.65) !important; }
.edh-name{ color:#fff !important; font-weight:900 !important; }
.edh-meta{ color:rgba(255,255,255,0.35) !important; }
.edh-meta .ctx-sep{ color:rgba(255,255,255,0.2) !important; }
.edh-sub{ color:rgba(255,255,255,0.4) !important; }
body.light-mode .ex-detail-header{
  background:linear-gradient(180deg, #fff 0%, #f8f9fc 100%) !important;
  border-bottom-color:rgba(0,0,0,0.06) !important;
}
body.light-mode .edh-back svg{ stroke:rgba(0,0,0,0.6) !important; }
body.light-mode .edh-name{ color:#111 !important; }
body.light-mode .edh-meta{ color:rgba(0,0,0,0.35) !important; }
body.light-mode .edh-sub{ color:rgba(0,0,0,0.65) !important; }

/* Circles pill track */
.edh-circles{
  background:rgba(255,255,255,0.035) !important;
  border:1px solid rgba(255,255,255,0.05) !important;
}
.ex-detail-circle{ color:rgba(255,255,255,0.5) !important; }
.ex-detail-circle.active{
  background:rgba(255,255,255,0.12) !important;
  color:#fff !important;
}
body.light-mode .edh-circles{
  background:rgba(0,0,0,0.03) !important; border-color:rgba(0,0,0,0.04) !important;
}
body.light-mode .ex-detail-circle{ color:rgba(0,0,0,0.65) !important; }
body.light-mode .ex-detail-circle.active{
  background:rgba(0,0,0,0.07) !important; color:#111 !important;
}
.edc-ring-bg{ stroke:rgba(255,255,255,0.07) !important; }
body.light-mode .edc-ring-bg{ stroke:rgba(0,0,0,0.06) !important; }

/* Sets separator */
.sc-card .sc-interleaved-table.sc-rounds-wrap{
  border-top-color:rgba(255,255,255,0.06) !important;
}
body.light-mode .sc-card .sc-interleaved-table.sc-rounds-wrap{
  border-top-color:rgba(0,0,0,0.06) !important;
}

/* Detail screen body */
.ex-detail-screen{ background:#0e0e18 !important; }
body.light-mode .ex-detail-screen{ background:rgba(220,218,230,0.88) !important; }

/* ── Dock bar ── */
.dock-bar{
  background:linear-gradient(180deg, rgba(16,16,28,0.97) 0%, rgba(12,12,22,0.99) 100%) !important;
  border-top:1px solid rgba(255,255,255,0.09) !important;
}
body.light-mode .dock-bar{
  background:linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,249,252,0.98) 100%) !important;
  border-top-color:rgba(0,0,0,0.06) !important;
}

/* Fixed top area */
.fixed-top-area{ background:rgba(14,14,24,0.95) !important; backdrop-filter:blur(20px) !important; -webkit-backdrop-filter:blur(20px) !important; }
body.light-mode .fixed-top-area{ background:rgba(230,225,210,0.88) !important; backdrop-filter:blur(16px) !important; -webkit-backdrop-filter:blur(16px) !important; }

/* ── Dock bottom timer colors ── */
.dock-unified-btn.live .dock-unified-clock,
.dock-unified-btn.live.cable .dock-unified-clock{ stroke:#34D399 !important; }
.dock-unified-btn.live .dock-unified-time,
.dock-unified-btn.live.cable .dock-unified-time{ color:#34D399 !important; }
.dock-unified-btn.paused .dock-unified-clock{ stroke:rgba(255,200,100,0.85) !important; }
.dock-unified-btn.paused .dock-unified-time{ color:rgba(255,200,100,0.85) !important; }
body.light-mode .dock-unified-btn.live .dock-unified-clock{ stroke:rgba(34,160,94,0.9) !important; }
body.light-mode .dock-unified-btn.live .dock-unified-time{ color:rgba(34,160,94,0.9) !important; }
body.light-mode .dock-unified-btn.paused .dock-unified-clock{ stroke:rgba(180,140,30,0.85) !important; }
body.light-mode .dock-unified-btn.paused .dock-unified-time{ color:rgba(180,140,30,0.85) !important; }

/* Duration popup running green */
.dur-hero-total.is-running, .dur-hero-total.is-running.cable{
  color:#34D399 !important;
  text-shadow:0 0 16px rgba(52,211,153,0.15) !important;
}
body.light-mode .dur-hero-total.is-running{
  color:rgba(34,160,94,0.9) !important; text-shadow:none !important;
}

/* ═══ END STEEL FINISH ═══ */

/* ══════════════════════════════════════════════════════════════
   GLOBAL BRIGHTNESS FIX — No more muted grey text/icons
   ═════════════════════════════════════════════════════════════ */

/* ── Dock bar icons — bright ── */
.dock-btn svg{
  color:rgba(255,255,255,0.75) !important;
}
.dock-btn:active svg{ color:#fff !important; }
.dock-btn span{ color:rgba(255,255,255,0.7) !important; }
body.light-mode .dock-btn svg{ color:rgba(0,0,0,0.65) !important; }
body.light-mode .dock-btn span{ color:rgba(0,0,0,0.6) !important; }

/* Dock unified center */
.dock-unified-pct{ color:rgba(255,255,255,0.85) !important; }
.dock-unified-clock{ stroke:rgba(255,255,255,0.6) !important; }
.dock-unified-time{ color:rgba(255,255,255,0.6) !important; }
.dock-unified-btn.started .dock-unified-clock{ stroke:rgba(255,255,255,0.7) !important; }
.dock-unified-btn.started .dock-unified-time{ color:rgba(255,255,255,0.7) !important; }
body.light-mode .dock-unified-pct{ color:rgba(0,0,0,0.75) !important; }
body.light-mode .dock-unified-clock{ stroke:rgba(0,0,0,0.5) !important; }
body.light-mode .dock-unified-time{ color:rgba(0,0,0,0.7) !important; }

/* Ring fills */
.ring-fill, .ring-fill.free, .ring-fill.cable,
#dockRingFill{
  stroke:rgba(255,255,255,0.85) !important;
}
body.light-mode .ring-fill, body.light-mode #dockRingFill{
  stroke:rgba(0,0,0,0.7) !important;
}

/* ── Calendar text — bright ── */
.day-num{ color:rgba(255,255,255,0.85) !important; }
.day-letter{ opacity:1 !important; }
body.light-mode .day-num{ color:rgba(0,0,0,0.8) !important; }

/* Week strip */
.week-label, .month-label, .year-label{
  color:rgba(255,255,255,0.7) !important;
}
body.light-mode .week-label, body.light-mode .month-label, body.light-mode .year-label{
  color:rgba(0,0,0,0.65) !important;
}

/* ── Banner text — all bright ── */
.workout-banner-sub, .workout-banner-sub-text{
  color:rgba(255,255,255,0.6) !important;
}
.workout-banner-equip{
  color:rgba(255,255,255,0.5) !important;
}
.banner-header-day, .banner-header-date{
  color:rgba(255,255,255,0.6) !important;
}
body.light-mode .workout-banner-sub, body.light-mode .workout-banner-sub-text{
  color:rgba(0,0,0,0.7) !important;
}
body.light-mode .workout-banner-equip{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .banner-header-day, body.light-mode .banner-header-date{
  color:rgba(0,0,0,0.7) !important;
}

/* Banner stats row */
.banner-stat{ color:rgba(255,255,255,0.6) !important; }
.banner-stat svg{ color:rgba(255,255,255,0.5) !important; stroke:rgba(255,255,255,0.5) !important; }
body.light-mode .banner-stat{ color:rgba(0,0,0,0.7) !important; }
body.light-mode .banner-stat svg{ color:rgba(0,0,0,0.65) !important; stroke:rgba(0,0,0,0.45) !important; }

/* ── Settings panel ── */
.settings-item-icon{ color:rgba(255,255,255,0.65) !important; }
.settings-item-left span{ color:rgba(255,255,255,0.9) !important; }
.settings-panel-close{ color:rgba(255,255,255,0.6) !important; }
body.light-mode .settings-item-icon{ color:rgba(0,0,0,0.55) !important; }
body.light-mode .settings-item-left span{ color:rgba(0,0,0,0.85) !important; }
body.light-mode .settings-panel-close{ color:rgba(0,0,0,0.7) !important; }

/* ── Progress bar text ── */
.progress-bar-date, .progress-bar-date.free, .progress-bar-date.cable{
  color:rgba(255,255,255,0.8) !important;
}
.progress-bar-type, .progress-bar-type.free, .progress-bar-type.cable{
  color:rgba(255,255,255,0.6) !important;
}
.progress-ring-pct{ color:rgba(255,255,255,0.85) !important; }
body.light-mode .progress-bar-date{ color:rgba(0,0,0,0.75) !important; }
body.light-mode .progress-bar-type{ color:rgba(0,0,0,0.55) !important; }
body.light-mode .progress-ring-pct{ color:rgba(0,0,0,0.7) !important; }

/* ── Day selector ── */
.day-selector-title{ color:#fff !important; }
.day-selector-item-day{ color:rgba(255,255,255,0.9) !important; }
.day-selector-item-type{ color:rgba(255,255,255,0.6) !important; }
.day-selector-item-equip{ color:rgba(255,255,255,0.45) !important; }
.day-selector-item-count{ color:rgba(255,255,255,0.4) !important; }
.day-selector-range{ color:rgba(255,255,255,0.7) !important; }
.day-selector-arrow{ color:rgba(255,255,255,0.6) !important; }
.day-selector-close{ color:rgba(255,255,255,0.7) !important; }
body.light-mode .day-selector-title{ color:#111 !important; }
body.light-mode .day-selector-item-day{ color:rgba(0,0,0,0.85) !important; }
body.light-mode .day-selector-item-type{ color:rgba(0,0,0,0.55) !important; }
body.light-mode .day-selector-item-equip{ color:rgba(0,0,0,0.65) !important; }
body.light-mode .day-selector-range{ color:rgba(0,0,0,0.6) !important; }
body.light-mode .day-selector-arrow{ color:rgba(0,0,0,0.7) !important; }

/* ── Duration popup ── */
.dur-hero-total{ color:rgba(255,255,255,0.95) !important; }
.dur-hero-label{ color:rgba(255,255,255,0.35) !important; }
.dur-hero-pct{ color:rgba(255,255,255,0.95) !important; }
.dur-hero-done{ color:rgba(255,255,255,0.4) !important; }
.dur-item-name{ color:rgba(255,255,255,0.9) !important; }
.dur-item-time{ color:rgba(255,255,255,0.5) !important; }
.dur-detail-sets{ color:rgba(255,255,255,0.5) !important; }
.dur-action-pause span, .dur-action-end span, .dur-action-reset span{
  color:inherit !important;
}
body.light-mode .dur-hero-total{ color:rgba(0,0,0,0.9) !important; }
body.light-mode .dur-hero-pct{ color:rgba(0,0,0,0.85) !important; }
body.light-mode .dur-item-name{ color:rgba(0,0,0,0.8) !important; }
body.light-mode .dur-item-time{ color:rgba(0,0,0,0.65) !important; }

/* ── Recap modal ── */
.recap-title{ color:#fff !important; }
.recap-stat-value, .recap-stat-value.free, .recap-stat-value.cable{
  color:rgba(255,255,255,0.95) !important;
}
.recap-stat-label{ color:rgba(255,255,255,0.4) !important; }
.recap-stat-icon svg{ stroke:rgba(255,255,255,0.35) !important; }
body.light-mode .recap-title{ color:#111 !important; }
body.light-mode .recap-stat-value{ color:rgba(0,0,0,0.9) !important; }
body.light-mode .recap-stat-label{ color:rgba(0,0,0,0.65) !important; }
.recap-pts-breakdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-top: 4px;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,0.28);
  line-height: 1.3;
}
.recap-pts-breakdown .pts-pr { color: rgba(217,184,120,0.55); }
.recap-pts-breakdown .pts-bonus { color: rgba(52,211,153,0.55); }
body.light-mode .recap-stat-icon svg{ stroke:rgba(0,0,0,0.55) !important; }

/* ── Superset badge/labels ── */
.sc-badge{ color:rgba(162,100,190,0.9) !important; }

/* ── Generic muted text catch-all ── */
.ctx-date, .ctx-type, .ctx-week{
  color:rgba(255,255,255,0.45) !important;
}
body.light-mode .ctx-date, body.light-mode .ctx-type, body.light-mode .ctx-week{
  color:rgba(0,0,0,0.65) !important;
}

/* ── Workout checklist / completion toast ── */
.ws-item-name{ color:rgba(255,255,255,0.85) !important; }
.completion-toast{ color:rgba(255,255,255,0.85) !important; }
body.light-mode .ws-item-name{ color:rgba(0,0,0,0.8) !important; }
body.light-mode .completion-toast{ color:rgba(0,0,0,0.8) !important; }

/* ── Rest timer text ── */
.sc-rest-time{ color:#fff !important; }
.sc-rest-sub{ color:rgba(255,255,255,0.5) !important; }
.sc-rest-context{ color:rgba(255,255,255,0.5) !important; }
body.light-mode .sc-rest-time{ color:#111 !important; }
body.light-mode .sc-rest-sub{ color:rgba(0,0,0,0.65) !important; }

/* ── Exercise detail old circle/name override ── */
.ex-detail-circle:not(.active){
  color:rgba(255,255,255,0.55) !important;
}

/* ══ END GLOBAL BRIGHTNESS ══ */

/* ═══ CLEAN CARD LAYOUT ═══ */

/* PR + Timer merged row */
.sc-top-row{
  display:flex; align-items:center;
  padding:12px 14px 8px;
  gap:8px;
}
.sc-top-row .sc-pr-cell{
  display:inline-flex !important; align-items:center; gap:4px;
  padding:4px 10px 4px 6px !important;
  border-radius:8px !important;
  background:rgba(212,188,138,0.04) !important;
  border:1px solid rgba(212,188,138,0.08) !important;
  font-size:12px;
  flex-shrink:0;
}
.sc-top-row .sc-card-timer{
  display:flex !important; align-items:center; gap:5px;
  margin-left:auto; padding:0 !important;
}
.sc-top-row .sc-card-timer svg{
  width:13px; height:13px;
}
.sc-top-row .sc-card-timer-val{
  font-size:13px; min-width:32px;
}
.sc-top-row .sc-timer-btn{
  width:26px; height:26px; border-radius:7px;
}
.sc-top-row .sc-timer-btn svg{
  width:12px; height:12px;
}

/* Images row */
.sc-card-images{
  display:flex; gap:8px; padding:4px 14px 10px;
  align-items:center;
}
.sc-card-images .sc-video-sq{
  width:72px !important; height:72px !important;
  border-radius:12px !important; flex-shrink:0;
}
.sc-card-images .sc-ex-img{
  width:72px !important; height:72px !important;
  border-radius:12px !important; flex-shrink:0;
  object-fit:contain;
}

/* Hide old standalone timer + info sections wrapper */
.sc-std-card > .sc-card > .sc-card-timer{ display:none !important; }
.sc-std-card .sc-ex-line1{ display:contents !important; }
.sc-std-card .sc-ex-pr-line{ display:none !important; }
.sc-std-card .sc-ex-icons{ display:none !important; }

/* Cleaner set cards */
.sc-card .set-block{
  background:rgba(255,255,255,0.015) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  border-radius:12px !important;
  margin-bottom:8px !important;
  padding:6px 10px !important;
}
body.light-mode .sc-card .set-block{
  background:rgba(0,0,0,0.01) !important;
  border-color:rgba(0,0,0,0.05) !important;
}

/* Solid input borders instead of dashed */
.sc-card .set-input{
  border:1.5px solid rgba(255,255,255,0.1) !important;
  border-style:solid !important;
  border-radius:10px !important;
  background:rgba(255,255,255,0.02) !important;
}
body.light-mode .sc-card .set-input{
  border-color:rgba(0,0,0,0.08) !important;
  background:rgba(0,0,0,0.015) !important;
}
.sc-card .set-input:not(.zero-value){
  border-color:rgba(255,255,255,0.15) !important;
  color:#fff !important;
}
body.light-mode .sc-card .set-input:not(.zero-value){
  border-color:rgba(0,0,0,0.12) !important;
  color:#111 !important;
}

/* Remove progress dots from standard cards — circles at top already show progress */
.sc-std-card .sc-progress-dots{ display:none !important; }

/* Simplify round num label */
.sc-round-num{
  font-size:10px !important; font-weight:700 !important;
  color:rgba(255,255,255,0.2) !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  text-align:center !important;
  padding:6px 0 4px !important;
}
body.light-mode .sc-round-num{
  color:rgba(0,0,0,0.18) !important;
}

/* Superset round labels — bigger, purple */
.sc-card:not(.sc-std-card) .sc-round-num{
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:0.5px !important;
  color:rgba(162,100,190,0.55) !important;
  padding:10px 0 6px !important;
}
body.light-mode .sc-card:not(.sc-std-card) .sc-round-num{
  color:rgba(140,80,170,0.5) !important;
}

/* ═══ END CLEAN CARD LAYOUT ═══ */

/* ── Inline summary button in images row ── */
.sc-summary-btn{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px; padding:8px 12px;
  border-radius:12px; border:none;
  background:rgba(255,255,255,0.03);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:all 0.15s; margin-left:auto;
  min-width:56px;
}
.sc-summary-btn:active{ transform:scale(0.92); background:rgba(255,255,255,0.06); }
.sc-summary-btn svg{
  width:20px; height:20px;
  stroke:rgba(255,255,255,0.3);
}
.sc-summary-btn span{
  font-size:9px; font-weight:700;
  color:rgba(255,255,255,0.25);
  letter-spacing:0.3px;
}
body.light-mode .sc-summary-btn{
  background:rgba(0,0,0,0.02);
}
body.light-mode .sc-summary-btn svg{ stroke:rgba(0,0,0,0.25); }
body.light-mode .sc-summary-btn span{ color:rgba(0,0,0,0.55); }

/* ═══ SPACE 4 — Deep Cosmos Background ═══ */
/* Body gradient now handled by theme system (.theme-space, .theme-forest, etc.) */
#spaceCanvas{
  position:fixed;inset:0;z-index:0;pointer-events:none;
}
.space-stars{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,235,170,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 62%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 8%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.3px 1.3px at 68% 42%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 72%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 52%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 42% 30%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 15%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 85%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 55%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 20% 40%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 60% 70%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 82% 28%, rgba(255,255,255,0.15) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 48% 92%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(0.8px 0.8px at 15% 75%, rgba(255,255,255,0.18) 0%, transparent 100%);
}
/* Light mode stars — dark dots on light bg */
body.light-mode .space-stars{
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(80,60,120,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 62%, rgba(80,60,120,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 8%, rgba(80,60,120,0.3) 0%, transparent 100%),
    radial-gradient(1.3px 1.3px at 68% 42%, rgba(80,60,120,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 72%, rgba(80,60,120,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 52%, rgba(80,60,120,0.2) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 42% 30%, rgba(80,60,120,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 15%, rgba(80,60,120,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 85%, rgba(80,60,120,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 55%, rgba(80,60,120,0.15) 0%, transparent 100%);
}
.app-container{
  position:relative;
  z-index:1;
}
/* ═══ STEEL EXERCISE CARDS ═══ */
.workout-banner-slide-center{
  background:
    linear-gradient(175deg, 
      rgba(55,58,68,0.75) 0%, 
      rgba(35,37,44,0.7) 15%,
      rgba(28,30,36,0.68) 40%, 
      rgba(32,34,40,0.7) 70%,
      rgba(40,42,50,0.72) 100%) !important;
  border:1px solid rgba(120,130,150,0.15) !important;
  border-top:1px solid rgba(200,210,230,0.18) !important;
  border-bottom:1px solid rgba(0,0,0,0.4) !important;
  box-shadow:
    0 8px 30px rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 0 40px 60px -30px rgba(180,190,210,0.04) !important;
  backdrop-filter:blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.3) !important;
  position:relative !important;
}
.workout-banner-slide-center::before{
  content:'' !important;
  position:absolute !important; inset:0 !important; z-index:0 !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(180,190,210,0.025) 0px,
      transparent 1px,
      transparent 2px,
      rgba(180,190,210,0.018) 3px,
      transparent 4px,
      transparent 5px,
      rgba(160,170,190,0.012) 6px
    ),
    linear-gradient(180deg, 
      rgba(255,255,255,0.03) 0%, 
      transparent 30%, 
      transparent 70%, 
      rgba(255,255,255,0.015) 100%) !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  display:block !important;
}
.workout-banner-slide-center::after{
  content:'' !important;
  position:absolute !important; inset:0 !important; z-index:0 !important;
  background:linear-gradient(
    135deg, 
    rgba(255,255,255,0.06) 0%, 
    transparent 25%, 
    transparent 50%,
    rgba(255,255,255,0.02) 75%,
    rgba(255,255,255,0.04) 100%) !important;
  border-radius:inherit !important;
  pointer-events:none !important;
}
body.light-mode .workout-banner-slide-center{
  background:linear-gradient(175deg, 
    rgba(210,212,220,0.88) 0%, 
    rgba(195,198,208,0.85) 15%,
    rgba(188,190,200,0.83) 40%, 
    rgba(195,198,208,0.85) 70%,
    rgba(205,208,216,0.87) 100%) !important;
  border-color:rgba(160,165,180,0.25) !important;
  border-top-color:rgba(255,255,255,0.7) !important;
  border-bottom-color:rgba(100,105,120,0.2) !important;
  box-shadow:0 4px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(0,0,0,0.06) !important;
}

.sc-card{
  background:
    linear-gradient(175deg, 
      rgba(50,53,62,0.72) 0%, 
      rgba(32,34,40,0.68) 15%,
      rgba(25,27,33,0.65) 40%, 
      rgba(30,32,38,0.68) 70%,
      rgba(38,40,48,0.7) 100%) !important;
  border:1px solid rgba(120,130,150,0.12) !important;
  border-top:1px solid rgba(200,210,230,0.15) !important;
  border-bottom:1px solid rgba(0,0,0,0.35) !important;
  box-shadow:
    0 10px 35px rgba(0,0,0,0.5),
    0 2px 6px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    inset 0 40px 60px -30px rgba(180,190,210,0.03) !important;
  backdrop-filter:blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.3) !important;
  position:relative !important;
}
.sc-card::before{
  content:'' !important;
  position:absolute !important; inset:0 !important; z-index:0 !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(180,190,210,0.025) 0px,
      transparent 1px,
      transparent 2px,
      rgba(180,190,210,0.018) 3px,
      transparent 4px,
      transparent 5px,
      rgba(160,170,190,0.012) 6px
    ),
    linear-gradient(180deg, 
      rgba(255,255,255,0.03) 0%, 
      transparent 30%, 
      transparent 70%, 
      rgba(255,255,255,0.015) 100%) !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  display:block !important;
}
.sc-card::after{
  content:'' !important;
  position:absolute !important; inset:0 !important; z-index:0 !important;
  background:linear-gradient(
    135deg, 
    rgba(255,255,255,0.05) 0%, 
    transparent 25%, 
    transparent 50%,
    rgba(255,255,255,0.02) 75%,
    rgba(255,255,255,0.035) 100%) !important;
  border-radius:inherit !important;
  pointer-events:none !important;
}
body.light-mode .sc-card{
  background:linear-gradient(175deg, 
    rgba(208,210,218,0.85) 0%, 
    rgba(192,195,205,0.82) 15%,
    rgba(185,188,198,0.8) 40%, 
    rgba(192,195,205,0.82) 70%,
    rgba(202,205,214,0.85) 100%) !important;
  border-color:rgba(160,165,180,0.2) !important;
  border-top-color:rgba(255,255,255,0.65) !important;
  border-bottom-color:rgba(100,105,120,0.15) !important;
  box-shadow:0 4px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -1px 0 rgba(0,0,0,0.04) !important;
}

/* Duration popup — redesigned */
.duration-popup{
  background:#0e0e12 !important;
  border:none !important;
  border-radius:24px 24px 0 0 !important;
  box-shadow:0 -8px 40px rgba(0,0,0,0.6) !important;
  position:fixed !important;
  bottom:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:521 !important;
}
.duration-popup::before{ content:none !important; }
body.light-mode .duration-popup{
  background:#fff !important;
  box-shadow:0 -4px 24px rgba(0,0,0,0.1) !important;
}

/* Handle */
.duration-popup-handle{
  width:36px !important; height:4px !important;
  background:rgba(255,255,255,0.12) !important;
  border-radius:2px; margin:14px auto 0 !important;
}

/* Close X — top right */
.dur-popup-close-x{
  position:absolute !important; top:14px !important; right:16px !important;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.04) !important; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:2;
}
.dur-popup-close-x svg{
  width:16px; height:16px;
  stroke:rgba(255,255,255,0.4); stroke-width:2.5;
  stroke-linecap:round; fill:none;
}
body.light-mode .dur-popup-close-x{ background:rgba(0,0,0,0.03) !important; }
body.light-mode .dur-popup-close-x svg{ stroke:rgba(0,0,0,0.55); }

/* Hero — centered stack */
.dur-popup-hero{
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important;
  padding:28px 24px 20px !important; gap:16px !important;
}

/* Ring — bigger */
.dur-hero-ring{
  position:relative !important;
  width:100px !important; height:100px !important;
}
.dur-hero-ring-svg{
  width:100px !important; height:100px !important;
}
.dur-ring-bg{
  stroke:rgba(255,255,255,0.05) !important; stroke-width:5 !important;
}
body.light-mode .dur-ring-bg{ stroke:rgba(0,0,0,0.04) !important; }
.dur-ring-fill{
  stroke-width:5 !important;
}

.dur-hero-inner{
  gap:2px !important;
}
.dur-hero-pct{
  font-size:26px !important; font-weight:900 !important;
  color:#fff !important; letter-spacing:-1px !important;
}
body.light-mode .dur-hero-pct{ color:#111 !important; }
.dur-hero-done{
  font-size:11px !important; font-weight:700 !important;
  color:rgba(255,255,255,0.3) !important;
}

/* Time block — centered below ring */
.dur-hero-time-block{
  display:flex; flex-direction:column;
  align-items:center; gap:4px;
}
.dur-hero-time{ display:none !important; }
.dur-hero-total{
  font-size:52px !important; font-weight:900 !important;
  color:#fff !important;
  font-variant-numeric:tabular-nums !important;
  letter-spacing:-2.5px !important;
  line-height:1 !important;
}
.dur-hero-total.is-running{
  color:#34D399 !important;
  text-shadow:0 0 30px rgba(52,211,153,0.12) !important;
}
.dur-hero-total.is-running.cable{
  color:var(--blue) !important;
  text-shadow:0 0 30px rgba(126,181,226,0.12) !important;
}
.dur-hero-total.is-paused{
  color:rgba(255,200,100,0.85) !important;
}
body.light-mode .dur-hero-total{ color:#111 !important; }

.dur-hero-label{
  font-size:10px !important; font-weight:700 !important;
  color:rgba(255,255,255,0.2) !important;
  letter-spacing:2px !important; text-transform:uppercase !important;
}
body.light-mode .dur-hero-label{ color:rgba(0,0,0,0.18) !important; }

/* Divider */
.dur-popup-divider{
  height:1px !important; margin:0 20px !important;
  background:rgba(255,255,255,0.04) !important;
}
body.light-mode .dur-popup-divider{ background:rgba(0,0,0,0.04) !important; }

/* Exercise list */
.duration-popup-list{
  padding:8px 10px !important; gap:2px !important;
}
.dur-item{
  padding:12px 14px !important; border-radius:14px !important;
}
.dur-item:active{ background:rgba(255,255,255,0.025) !important; }

/* Badge */
.dur-item-badge{
  width:32px !important; height:32px !important; min-width:32px !important;
  border-radius:10px !important;
  font-size:13px !important; font-weight:800 !important;
  color:rgba(255,255,255,0.3) !important;
  background:rgba(255,255,255,0.03) !important;
}
.dur-item-badge.completed{
  background:rgba(52,211,153,0.08) !important;
  color:#34D399 !important;
}
.dur-item-badge.completed.cable{
  background:rgba(52,211,153,0.08) !important;
  color:#34D399 !important;
}
body.light-mode .dur-item-badge{ background:rgba(0,0,0,0.02) !important; color:rgba(0,0,0,0.55) !important; }
body.light-mode .dur-item-badge.completed{ background:rgba(34,160,94,0.05) !important; color:rgba(34,160,94,0.65) !important; }

/* Name */
.dur-item-name{
  font-size:15px !important; font-weight:700 !important;
  color:#fff !important;
}
body.light-mode .dur-item-name{ color:#111 !important; }

/* Detail text */
.dur-item-detail{ color:rgba(255,255,255,0.25) !important; }
.dur-detail-sets{ color:rgba(255,255,255,0.35) !important; }

/* Time */
.dur-item-time{
  font-size:15px !important; font-weight:700 !important;
  color:rgba(255,255,255,0.4) !important;
}
.dur-item-time.live{ color:#34D399 !important; }
body.light-mode .dur-item-time{ color:rgba(0,0,0,0.6) !important; }

/* Per-exercise controls */
.dur-item-ctrl{
  width:36px !important; height:36px !important; border-radius:10px !important;
  background:rgba(255,255,255,0.025) !important;
}
.dur-item-ctrl svg{
  width:16px !important; height:16px !important;
  stroke:rgba(255,255,255,0.35) !important;
}
.dur-item-ctrl.is-running{
  background:rgba(255,200,100,0.06) !important;
}
.dur-item-ctrl.is-running svg{ stroke:rgba(255,200,100,0.6) !important; }

/* Action buttons */
.dur-popup-actions{
  padding:14px 16px calc(18px + env(safe-area-inset-bottom)) !important;
  gap:10px !important;
}
.dur-action-btn{
  padding:16px 14px !important;
  border-radius:14px !important;
  font-size:15px !important; font-weight:700 !important;
}
.dur-action-btn svg{ width:20px !important; height:20px !important; }

/* Running: pause button green (matches exercise card) */
.dur-action-pause{
  background:rgba(52,211,153,0.12) !important;
  color:#34D399 !important;
  border:1.5px solid rgba(52,211,153,0.35) !important;
}
.dur-action-pause svg{ stroke:#34D399 !important; fill:none !important; }
/* Paused: play button gold pulsing (matches exercise card) */
.dur-action-pause.is-paused{
  background:rgba(217,184,120,0.12) !important;
  color:#D9B878 !important;
  border-color:rgba(217,184,120,0.45) !important;
  animation: durPausePulse 1.6s ease-in-out infinite !important;
}
.dur-action-pause.is-paused svg{ stroke:#D9B878 !important; fill:none !important; }
@keyframes durPausePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(217,184,120,0); }
  50%     { box-shadow: 0 0 0 6px rgba(217,184,120,0.22); }
}

.dur-action-reset{
  background:rgba(255,255,255,0.03) !important;
  color:rgba(255,255,255,0.4) !important;
}
.dur-action-reset svg{ stroke:rgba(255,255,255,0.35) !important; }

.dur-action-end{
  background:rgba(255,80,80,0.05) !important;
  color:rgba(255,100,100,0.7) !important;
}

/* Status icons — green for completion */
.dur-status-check svg{ stroke:#34D399 !important; }
.dur-status-check.cable svg{ stroke:#34D399 !important; }

/* Recap modal */
.recap-modal{
  background:#0e0e12 !important;
  box-shadow:0 -4px 30px rgba(0,0,0,0.5) !important;
}
body.light-mode .recap-modal{
  background:#fff !important;
  box-shadow:0 -4px 20px rgba(0,0,0,0.08) !important;
}

/* ═══ MUSCLE IMAGE FIX — transparent bg, blend with card ═══ */

/* Banner main workout image */
.workout-banner-img{
  width:100px !important;
  min-height:100px !important;
  border-radius:14px !important;
  background:transparent !important;
  border:none !important;
}
.workout-banner-img img{
  width:110% !important;
  height:110% !important;
  object-fit:cover !important;
  object-position:center 30% !important;
  opacity:0.8 !important;
  mix-blend-mode:lighten !important;
  filter:none !important;
}
body.light-mode .workout-banner-img{
  background:transparent !important;
}
body.light-mode .workout-banner-img img{
  mix-blend-mode:multiply !important;
  filter:none !important;
  opacity:0.75 !important;
}

/* Banner exercise card muscle badges */
.bex-muscle-badge{
  background:transparent !important;
  border:none !important;
}
.bex-muscle-badge img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  opacity:0.65 !important;
  mix-blend-mode:lighten !important;
}
body.light-mode .bex-muscle-badge{
  background:transparent !important;
}
body.light-mode .bex-muscle-badge img{
  mix-blend-mode:multiply !important;
  opacity:0.6 !important;
}

/* Banner exercise hero images (video thumbnails) */
.bex-hero-img{
  background:transparent !important;
  border:none !important;
}
.bex-hero-img img{
  mix-blend-mode:lighten !important;
  opacity:0.7 !important;
}
body.light-mode .bex-hero-img{
  background:transparent !important;
}
body.light-mode .bex-hero-img img{
  mix-blend-mode:multiply !important;
}

/* Expanded card muscle image */
.sc-ex-icons .sc-ex-img,
.sc-card-images .sc-ex-img{
  background:transparent !important;
  border:none !important;
  mix-blend-mode:lighten !important;
  opacity:0.65 !important;
  object-fit:contain !important;
}
body.light-mode .sc-ex-icons .sc-ex-img,
body.light-mode .sc-card-images .sc-ex-img{
  background:transparent !important;
  mix-blend-mode:multiply !important;
  opacity:0.6 !important;
}

/* Expanded card video thumbnail */
.sc-video-sq{
  background:transparent !important;
  border:none !important;
}
.sc-video-sq img{
  mix-blend-mode:lighten !important;
}
body.light-mode .sc-video-sq{
  background:transparent !important;
}
body.light-mode .sc-video-sq img{
  mix-blend-mode:multiply !important;
}

/* ═══ END MUSCLE IMAGE FIX ═══ */

/* ═══ END STEEL EXERCISE CARDS ═══ */

/* ═══ BIGGER TIMERS ═══ */

/* Card timer in expanded view */
.sc-top-row .sc-card-timer-val{
  font-size:24px !important; font-weight:800 !important;
  min-width:52px !important;
  letter-spacing:-0.8px !important;
}
.sc-top-row .sc-card-timer svg{
  width:18px !important; height:18px !important;
}

/* Card timer buttons — bigger tap targets */
.sc-timer-btn{
  width:38px !important; height:38px !important; border-radius:10px !important;
}
.sc-timer-btn svg{
  width:18px !important; height:18px !important;
}
.sc-top-row .sc-timer-btn{
  width:36px !important; height:36px !important; border-radius:10px !important;
}
.sc-top-row .sc-timer-btn svg{
  width:16px !important; height:16px !important;
}

/* Dock bottom timer */
.dock-unified-time{
  font-size:16px !important; font-weight:800 !important;
  letter-spacing:-0.5px !important;
}
.dock-unified-btn.live .dock-unified-time{
  font-size:18px !important;
}
.dock-unified-btn.started .dock-unified-time{
  font-size:16px !important;
}
.dock-unified-clock{
  width:18px !important; height:18px !important;
}

/* Rest countdown number */
.sc-rest-time{
  font-size:56px !important; font-weight:900 !important;
  letter-spacing:-3px !important;
}

/* Duration popup total time */
.dur-hero-total{
  font-size:48px !important; font-weight:900 !important;
  letter-spacing:-2px !important;
}

/* Duration popup per-exercise buttons */
.dur-item-ctrl{
  width:36px !important; height:36px !important; border-radius:10px !important;
}
.dur-item-ctrl svg{
  width:16px !important; height:16px !important;
}

/* Duration popup action buttons */
.dur-action-btn{
  padding:16px 14px !important; font-size:15px !important;
  border-radius:14px !important;
}
.dur-action-btn svg{
  width:20px !important; height:20px !important;
}

/* Rest timer skip/extend buttons */
.sc-rest-skip{
  padding:14px 36px !important; font-size:17px !important;
  border-radius:14px !important;
}
.sc-rest-extend{
  padding:12px 18px !important; font-size:15px !important;
  border-radius:12px !important;
}

/* ═══ END BIGGER TIMERS ═══ */

/* ═══ FLOATING TIMER PILL ═══ */
.floating-status-bar{
  position:fixed !important;
  bottom:calc(70px + env(safe-area-inset-bottom)) !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  display:none;
  align-items:center;
  gap:0;
  padding:8px 20px !important;
  background:rgba(14,14,18,0.92) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:24px !important;
  z-index:515;
  box-shadow:0 6px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent;
}
body.light-mode .floating-status-bar{
  background:rgba(255,255,255,0.92) !important;
  border-color:rgba(0,0,0,0.08) !important;
  box-shadow:0 4px 20px rgba(0,0,0,0.1) !important;
}

/* Progress ring — bigger */
.menu-bar-progress{
  width:44px !important; height:44px !important;
}
.menu-bar-ring{
  width:44px !important; height:44px !important;
}
.menu-bar-pct{
  font-size:13px !important; font-weight:800 !important;
  color:#fff !important;
}
body.light-mode .menu-bar-pct{ color:#111 !important; }

/* Timer text — green when running (default since pill only shows when started), yellow when paused */
.menu-bar-timer-time{
  font-size:18px !important; font-weight:800 !important;
  font-variant-numeric:tabular-nums !important;
  letter-spacing:-0.5px !important;
  color:#34D399 !important;
}
.menu-bar-timer.running .menu-bar-timer-time{
  color:#34D399 !important;
  text-shadow:0 0 8px rgba(52,211,153,0.2) !important;
}
.menu-bar-timer.running.cable .menu-bar-timer-time{
  color:#34D399 !important;
  text-shadow:0 0 8px rgba(52,211,153,0.2) !important;
}
.menu-bar-timer.paused .menu-bar-timer-time{
  color:rgba(255,200,100,0.85) !important;
  text-shadow:0 0 8px rgba(255,200,100,0.15) !important;
}
body.light-mode .menu-bar-timer-time{ color:rgba(34,160,94,0.85) !important; }
body.light-mode .menu-bar-timer.running .menu-bar-timer-time{ color:rgba(34,160,94,0.85) !important; }
body.light-mode .menu-bar-timer.paused .menu-bar-timer-time{ color:rgba(180,140,30,0.85) !important; }

/* Divider */
.fsb-divider{
  width:1px !important; height:22px !important;
  background:rgba(255,255,255,0.08) !important;
  margin:0 12px !important;
}
body.light-mode .fsb-divider{ background:rgba(0,0,0,0.08) !important; }

/* Ring fill — white, green when running */
.menu-bar-ring .ring-fill{
  stroke:rgba(255,255,255,0.5) !important;
  filter:none !important;
}
.menu-bar-progress.has-timer .menu-bar-ring .ring-fill{
  stroke:#34D399 !important;
  filter:drop-shadow(0 0 4px rgba(52,211,153,0.3)) !important;
}

/* ═══ END FLOATING TIMER PILL ═══ */

/* ═══ 4-ICON DOCK BAR ═══ */
.dock-unified-btn{ display:none !important; }
.bottom-menu-bar .dock-btn{
  padding:0 10px !important;
}
.bottom-menu-bar .dock-btn svg{
  width:28px !important; height:28px !important;
}
/* ═══ END 4-ICON DOCK BAR ═══ */

/* ══════════════════════════════════════════════════════════════
   VISUAL POLISH — Safe overrides only, no layout changes
   ═════════════════════════════════════════════════════════════ */

/* ── Header — frosted glass (no layout change) ── */
header{
  background:rgba(0,0,0,0.6) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
}
header::after{ display:none !important; }
body.light-mode header{
  background:rgba(255,255,255,0.85) !important;
}

/* ── Dock bar — frosted glass (no layout change) ── */
.bottom-menu-bar{
  background:rgba(8,8,10,0.85) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
}
body.light-mode .bottom-menu-bar{
  background:rgba(255,255,255,0.88) !important;
}

/* ── Rest timer card — space theme ── */
.sc-rest-card{
  background:rgba(16,16,20,0.92) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
}
body.light-mode .sc-rest-card{
  background:rgba(255,255,255,0.92) !important;
}

/* ── Skip button — more prominent ── */
.sc-rest-skip{
  background:rgba(255,255,255,0.1) !important;
  color:#fff !important;
}
body.light-mode .sc-rest-skip{
  background:rgba(0,0,0,0.06) !important; color:#111 !important;
}

/* ── Streak — brighter ── */
.streak-label{
  color:rgba(255,255,255,0.55) !important;
  letter-spacing:1.5px !important;
}
body.light-mode .streak-label{ color:rgba(0,0,0,0.65) !important; }

/* ── Banner title — bolder ── */
.workout-banner-title, .workout-banner-title.free, .workout-banner-title.cable{
  font-size:26px !important; font-weight:900 !important;
  letter-spacing:-0.3px !important;
}

/* ── Start/Summary buttons — bigger tap ── */
.banner-play-btn, .banner-recap-btn{
  padding:12px 20px !important;
  font-size:14px !important; font-weight:700 !important;
}
.banner-play-btn svg, .banner-recap-btn svg{
  width:16px !important; height:16px !important;
}

/* ── Exercise name in banner — brighter ── */
.bex-name{
  font-size:14px !important; font-weight:700 !important;
  color:rgba(255,255,255,0.9) !important;
}
body.light-mode .bex-name{ color:rgba(0,0,0,0.85) !important; }
.bex-best-val{
  font-size:14px !important; font-weight:800 !important;
  color:#fff !important;
}
body.light-mode .bex-best-val{ color:#111 !important; }

/* ── Detail header name — bigger ── */
.edh-name{
  font-size:20px !important; font-weight:900 !important;
}

/* ── Detail circles — bigger ── */
.ex-detail-circle{
  width:34px !important; height:34px !important;
  font-size:14px !important;
}
.ex-detail-circle.active{
  width:42px !important; height:34px !important;
  border-radius:17px !important;
}

/* ── Inputs — bigger text, visible steppers ── */
.sc-card .set-input{
  font-size:18px !important;
  min-height:44px !important;
}
.sc-step{
  background:rgba(255,255,255,0.02) !important;
  border-radius:8px !important;
}
.sc-step svg{ stroke:rgba(255,255,255,0.25) !important; }
body.light-mode .sc-step{ background:rgba(0,0,0,0.015) !important; }
body.light-mode .sc-step svg{ stroke:rgba(0,0,0,0.5) !important; }

/* ── Active input glow ── */
.set-input.active-input{
  border-color:rgba(255,255,255,0.3) !important;
  box-shadow:0 0 0 3px rgba(255,255,255,0.04) !important;
}

/* ── Recap — brighter ── */
.recap-stat-value, .recap-stat-value.free, .recap-stat-value.cable{
  font-size:28px !important; font-weight:900 !important;
  color:#fff !important;
}
body.light-mode .recap-stat-value{ color:#111 !important; }
.recap-title{
  font-size:22px !important; font-weight:900 !important;
}

/* ── Keyboard — match theme ── */
.custom-keyboard{
  background:rgba(14,14,18,0.97) !important;
  border-top:1px solid rgba(255,255,255,0.04) !important;
}
body.light-mode .custom-keyboard{
  background:rgba(255,255,255,0.97) !important;
}
.kb-key{
  background:rgba(255,255,255,0.05) !important;
  color:#fff !important;
  font-size:22px !important;
  border-radius:10px !important;
}
body.light-mode .kb-key{
  background:rgba(0,0,0,0.04) !important; color:#111 !important;
}

/* ── Duration popup overlay — deeper ── */
.duration-popup-overlay{
  background:rgba(0,0,0,0.6) !important;
}

/* ── Day selector — full screen, no scroll, bottom menu visible ── */
body.ds-open{
  overflow:hidden !important;
}
.day-selector-overlay{
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important;
  bottom:calc(56px + env(safe-area-inset-bottom)) !important;
  background:rgba(6,4,16,0.97) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  z-index:500 !important;
  display:flex !important;
  flex-direction:column !important;
}
.day-selector-panel{
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  background:transparent !important;
  border-radius:0 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}
.day-selector-header{
  padding:14px 16px !important;
  flex-shrink:0 !important;
}
.day-selector-title{
  color:#fff !important;
  font-size:18px !important;
  font-weight:800 !important;
}
.day-selector-close{
  color:#fff !important;
  font-size:28px !important;
  background:rgba(255,255,255,0.06) !important;
  width:36px !important;
  height:36px !important;
  border-radius:50% !important;
  border:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.day-selector-week-nav{
  flex-shrink:0 !important;
}
.day-selector-range{
  color:#fff !important;
  font-weight:700 !important;
}
.day-selector-arrow svg{
  stroke:#fff !important;
}
.day-selector-list{
  flex:1 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  padding:6px 12px !important;
}
.day-selector-item{
  flex:1 !important;
  min-height:0 !important;
}
body.light-mode .day-selector-overlay{
  background:rgba(230,228,238,0.97) !important;
}
body.light-mode .day-selector-title{ color:#111 !important; }
body.light-mode .day-selector-close{ color:#111 !important; background:rgba(0,0,0,0.04) !important; }
body.light-mode .day-selector-range{ color:#111 !important; }
body.light-mode .day-selector-arrow svg{ stroke:#111 !important; }

/* ── Smooth transitions ── */
.dock-btn, .banner-ex-card, .sc-step, .sc-timer-btn{
  transition:all 0.15s ease !important;
}

/* ── Banner text — bright white ── */
.workout-banner-day{
  color:#fff !important;
  text-shadow:0 1px 3px rgba(0,0,0,0.3) !important;
}
.workout-banner-title, .workout-banner-title.free, .workout-banner-title.cable{
  color:#fff !important;
  text-shadow:0 1px 4px rgba(0,0,0,0.3) !important;
}
.banner-stats-row, .banner-stat{
  color:rgba(255,255,255,0.85) !important;
}
.banner-stat svg{
  stroke:rgba(255,255,255,0.7) !important;
}
body.light-mode .workout-banner-day{ color:rgba(0,0,0,0.7) !important; }
body.light-mode .workout-banner-title{ color:#111 !important; }
body.light-mode .banner-stat{ color:rgba(0,0,0,0.6) !important; }

/* ── Start button — green, paused yellow, Summary visible ── */
.banner-play-btn{
  background:#34D399 !important;
  color:#fff !important;
  border:none !important;
  font-weight:700 !important;
}
.banner-play-btn svg{ stroke:#fff !important; fill:none !important; }
.banner-play-btn:active{
  background:#2bb884 !important;
}
.banner-play-btn.is-paused{
  background:rgba(255,200,100,0.85) !important;
  color:#1a1a1a !important;
}
.banner-play-btn.is-paused svg{ stroke:#1a1a1a !important; }
.banner-play-btn.is-complete{
  background:rgba(52,211,153,0.15) !important;
  color:#34D399 !important;
}
.banner-play-btn.is-complete svg{ stroke:#34D399 !important; }
.banner-recap-btn{
  background:rgba(255,255,255,0.1) !important;
  color:#fff !important;
  border:none !important;
  font-weight:700 !important;
}
.banner-recap-btn svg{ stroke:#fff !important; fill:none !important; }
.banner-recap-btn:active{
  background:rgba(255,255,255,0.18) !important;
}
body.light-mode .banner-play-btn{ background:#34D399 !important; color:#fff !important; }
body.light-mode .banner-play-btn svg{ stroke:#fff !important; }
body.light-mode .banner-recap-btn{ background:rgba(0,0,0,0.06) !important; color:#111 !important; }
body.light-mode .banner-recap-btn svg{ stroke:#111 !important; }

/* ── Calendar strip + legend — connected look ── */
.week-nav{
  background:rgba(255,255,255,0.02) !important;
  border-radius:16px !important;
  margin:0 12px !important;
  padding:6px 4px 2px !important;
  border:1px solid rgba(255,255,255,0.04) !important;
}
body.light-mode .week-nav{
  background:rgba(0,0,0,0.015) !important;
  border-color:rgba(0,0,0,0.04) !important;
}
.calendar-legend{
  margin:0 12px !important;
  padding:8px 16px !important;
  background:rgba(255,255,255,0.02) !important;
  border-radius:0 0 16px 16px !important;
  border:1px solid rgba(255,255,255,0.04) !important;
  border-top:none !important;
}
body.light-mode .calendar-legend{
  background:rgba(0,0,0,0.015) !important;
  border-color:rgba(0,0,0,0.04) !important;
}

/* ── Top nav icon row — grounded, not floating ── */
.month-row-btns{
  background:rgba(255,255,255,0.03) !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,0.04) !important;
  padding:4px 4px !important;
  margin:0 12px !important;
}
body.light-mode .month-row-btns{
  background:rgba(0,0,0,0.02) !important;
  border-color:rgba(0,0,0,0.04) !important;
}
.month-row-btns .nav-btn.icon-only{
  border-radius:10px !important;
}
.month-row-btns .nav-btn.icon-only:active{
  background:rgba(255,255,255,0.06) !important;
}
.month-btn-sep{
  background:rgba(255,255,255,0.06) !important;
}
body.light-mode .month-btn-sep{ background:rgba(0,0,0,0.06) !important; }

/* ── Banner Timer ── */
.banner-timer-row{
  display:flex !important;
  align-items:center;
  gap:8px;
  padding:8px 0;
  margin:0 16px;
  border-radius:0;
  background:transparent;
  color:#34D399;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:opacity 0.15s;
}
.banner-timer-row:active{ opacity:0.7; }
.banner-timer-row.paused{
  color:rgba(255,200,100,0.85);
}
.banner-timer-row svg{
  width:20px; height:20px;
  stroke:#34D399;
  color:#34D399;
  flex-shrink:0;
}
.banner-timer-row.paused svg{ stroke:rgba(255,200,100,0.85); color:rgba(255,200,100,0.85); }
.banner-timer-val{
  font-size:22px;
  font-weight:900;
  color:#34D399;
  font-variant-numeric:tabular-nums;
  letter-spacing:-1px;
}
.banner-timer-row.paused .banner-timer-val{
  color:rgba(255,200,100,0.85);
}
body.light-mode .banner-timer-row{
  background:rgba(0,0,0,0.03);
}
body.light-mode .banner-timer-row svg{ stroke:rgba(34,160,94,0.85); }
body.light-mode .banner-timer-val{ color:rgba(34,160,94,0.85); }
body.light-mode .banner-timer-row.paused svg{ stroke:rgba(180,140,30,0.85); }
body.light-mode .banner-timer-row.paused .banner-timer-val{ color:rgba(180,140,30,0.85); }

/* ── Floating pill — robust tap ── */
.floating-status-bar{
  touch-action:manipulation !important;
  pointer-events:auto !important;
  -webkit-tap-highlight-color:transparent !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}
.floating-status-bar:active{
  transform:translateX(-50%) scale(0.96) !important;
  opacity:0.9 !important;
}
/* Prevent scroll from blocking pill */
body.is-scrolling .floating-status-bar{
  pointer-events:auto !important;
}

/* ── Timer colors — always green running, yellow paused ── */
.floating-status-bar .menu-bar-timer-time{
  color:#34D399 !important;
  font-size:18px !important;
  font-weight:800 !important;
  text-shadow:0 0 8px rgba(52,211,153,0.15) !important;
}
.floating-status-bar.timer-paused .menu-bar-timer-time{
  color:rgba(255,200,100,0.85) !important;
  text-shadow:0 0 8px rgba(255,200,100,0.15) !important;
}

/* ── Duration popup — number + check + trophy column ── */
.dur-item-left-col{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:2px !important;
  width:38px !important;
  flex-shrink:0 !important;
}
.dur-num-big{
  font-size:22px !important;
  font-weight:900 !important;
  color:#fff !important;
  line-height:1 !important;
}
.dur-check-icon{
  width:20px !important; height:20px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.dur-check-icon svg{
  width:16px !important; height:16px !important;
  stroke:rgba(255,255,255,0.2) !important;
}
.dur-check-icon.lit svg{
  stroke:#34D399 !important;
  filter:drop-shadow(0 0 4px rgba(52,211,153,0.4)) !important;
}
.dur-trophy-icon{
  width:20px !important; height:20px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.dur-trophy-icon svg{
  width:16px !important; height:16px !important;
  stroke:rgba(255,255,255,0.2) !important;
}
.dur-trophy-icon.lit svg{
  stroke:#D4A843 !important;
  fill:rgba(212,168,67,0.15) !important;
  filter:drop-shadow(0 0 4px rgba(212,168,67,0.4)) !important;
}
/* Light mode */
body.light-mode .dur-num-big{ color:#111 !important; }
body.light-mode .dur-check-icon svg{ stroke:rgba(0,0,0,0.15) !important; }
body.light-mode .dur-check-icon.lit svg{ stroke:#34D399 !important; }
body.light-mode .dur-trophy-icon svg{ stroke:rgba(0,0,0,0.15) !important; }
body.light-mode .dur-trophy-icon.lit svg{ stroke:#D4A843 !important; }
/* Hide old badge style */
.dur-item-badge{ display:none !important; }

/* ═══ EXERCISE CIRCLES — CLEAN & SIMPLE ═══ */
/* Kill noise texture completely */
.exercise-circle::after,
.exercise-circle.expanded::after,
body.light-mode .exercise-circle::after{ display:none !important; content:none !important; }
/* Kill indicators and label */
.exercise-circle .status-indicators{ display:none !important; }
.exercise-circle-label{ display:none !important; }

/* ALL states — use div prefix for max specificity */
div.exercise-circle,
div.exercise-circle:not(.expanded),
div.exercise-circle.complete,
div.exercise-circle.complete.cable,
div.exercise-circle.complete:not(.expanded),
div.exercise-circle.complete.cable:not(.expanded),
div.exercise-circle.has-pr,
div.exercise-circle.has-pr:not(.expanded){
  width:36px !important; height:36px !important;
  border-radius:50% !important;
  border:2px solid rgba(255,255,255,0.18) !important;
  background:transparent !important;
  color:rgba(255,255,255,0.4) !important;
  opacity:1 !important;
  box-shadow:none !important;
  transform:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  font-size:14px !important; font-weight:700 !important;
}

/* SELECTED — all states */
div.exercise-circle.expanded,
div.exercise-circle.expanded.complete,
div.exercise-circle.expanded.complete.cable,
div.exercise-circle.expanded.has-pr{
  background:#fff !important;
  border-color:#fff !important;
  color:#0a0a0f !important;
  font-weight:800 !important;
  opacity:1 !important;
  box-shadow:none !important;
  transform:none !important;
  filter:none !important;
}

/* Light mode — all states */
body.light-mode div.exercise-circle,
body.light-mode div.exercise-circle:not(.expanded),
body.light-mode div.exercise-circle.complete,
body.light-mode div.exercise-circle.complete:not(.expanded),
body.light-mode div.exercise-circle.complete.cable:not(.expanded){
  border-color:rgba(0,0,0,0.15) !important;
  color:rgba(0,0,0,0.35) !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.light-mode div.exercise-circle.expanded,
body.light-mode div.exercise-circle.expanded.complete,
body.light-mode div.exercise-circle.expanded.complete.cable{
  background:#111 !important;
  border-color:#111 !important;
  color:#fff !important;
  box-shadow:none !important;
}
/* ═══ END EXERCISE CIRCLES ═══ */

/* ═══ DETAIL SCREEN CIRCLES — CLEAN ═══ */
.edh-circles{
  background:rgba(255,255,255,0.03) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  border-radius:22px !important;
  padding:4px 8px !important;
  gap:4px !important;
}
/* All states — clean and flat */
.ex-detail-circle,
.ex-detail-circle-wrap .ex-detail-circle,
.ex-detail-circle-wrap.complete .ex-detail-circle,
.ex-detail-circle-wrap.complete .ex-detail-circle:not(.active),
.ex-detail-circle-wrap.has-pr .ex-detail-circle,
.ex-detail-circle-wrap.has-pr .ex-detail-circle:not(.active){
  width:34px !important; height:34px !important;
  border-radius:50% !important;
  background:transparent !important;
  border:1.5px solid rgba(255,255,255,0.15) !important;
  color:rgba(255,255,255,0.4) !important;
  font-size:14px !important; font-weight:700 !important;
  box-shadow:none !important;
  opacity:1 !important;
  filter:none !important;
}
/* Active — solid white fill */
.ex-detail-circle.active,
.ex-detail-circle-wrap.complete .ex-detail-circle.active,
.ex-detail-circle-wrap.has-pr .ex-detail-circle.active{
  width:36px !important; height:36px !important;
  background:#fff !important;
  border:none !important;
  color:#0a0a0f !important;
  font-weight:800 !important;
  box-shadow:none !important;
}
/* Light mode */
body.light-mode .edh-circles{
  background:rgba(0,0,0,0.025) !important;
  border-color:rgba(0,0,0,0.05) !important;
}
body.light-mode .ex-detail-circle,
body.light-mode .ex-detail-circle-wrap .ex-detail-circle,
body.light-mode .ex-detail-circle-wrap.complete .ex-detail-circle:not(.active){
  border-color:rgba(0,0,0,0.12) !important;
  color:rgba(0,0,0,0.35) !important;
  background:transparent !important;
}
body.light-mode .ex-detail-circle.active,
body.light-mode .ex-detail-circle-wrap.complete .ex-detail-circle.active{
  background:#111 !important;
  border:none !important;
  color:#fff !important;
}
/* ═══ END DETAIL SCREEN CIRCLES ═══ */

/* ═══ BIGGER STEPPERS ═══ */

/* Round card padding */
.sc-round-card{
  padding:8px 4px !important;
}

/* SET 1, SUPERSET 1 labels — large and bold */
.sc-round-num{
  font-size:16px !important;
  font-weight:900 !important;
  letter-spacing:1.5px !important;
  padding:14px 4px 10px !important;
  text-align:center !important;
}

/* Round row min height */
.sc-round-row{
  min-height:70px !important;
  gap:10px !important;
  padding:12px 4px !important;
}
.sc-round-inputs{
  gap:8px !important;
  min-height:68px !important;
  align-items:center !important;
}

/* Stepper columns */
.sc-stepper-col{
  min-width:48px !important;
  gap:6px !important;
}

/* Stepper buttons — big tap targets */
.sc-step{
  width:48px !important;
  height:44px !important;
  min-height:44px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
}
.sc-step:active{
  background:rgba(255,255,255,0.14) !important;
  transform:scale(0.92) !important;
}
.sc-step svg{
  width:22px !important;
  height:22px !important;
  stroke:rgba(255,255,255,0.55) !important;
  stroke-width:2.5 !important;
}

/* Input fields — tall and wide */
.sc-input-wrap{
  min-height:60px !important;
  border-radius:14px !important;
}
.sc-input, .sc-card .set-input{
  font-size:26px !important;
  font-weight:900 !important;
  min-height:56px !important;
  height:56px !important;
  width:80px !important;
  text-align:center !important;
  border-radius:14px !important;
}

/* WEIGHT / REPS goal labels */
.sc-input-goal{
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:1px !important;
}

/* × separator */
.sc-input-x{
  font-size:20px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.25) !important;
}

/* Unit toggle LB/KG */
.sc-unit-toggle{
  padding:3px !important;
  border-radius:10px !important;
}
.sc-unit-opt{
  font-size:12px !important;
  padding:5px 10px !important;
  border-radius:8px !important;
  font-weight:800 !important;
}

/* Superset letter badges */
.sc-round-letter{
  width:32px !important;
  height:32px !important;
  font-size:15px !important;
  font-weight:900 !important;
}
/* Exercise thumbnail in superset rows — hidden, hero images at top suffice */
.sc-round-ex-thumb{
  display:none !important;
}
.sc-round-ex-name{
  font-size:14px !important;
  font-weight:700 !important;
}
.sc-round-row-left{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

/* Set time label (3s, 1m 2s) next to SET 1 */
.sc-round-num .set-time-label,
.sc-set-time{
  font-size:14px !important;
  font-weight:700 !important;
}

/* Light mode steppers */
body.light-mode .sc-step{
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(0,0,0,0.06) !important;
}
body.light-mode .sc-step svg{
  stroke:rgba(0,0,0,0.45) !important;
}
body.light-mode .sc-input-x{
  color:rgba(0,0,0,0.55) !important;
}
/* ═══ END BIGGER STEPPERS ═══ */

/* ═══ FIX 1: HIDE CONNECTOR LINES ═══ */
.connector-lines-svg,
.connector-lines-container,
#connectorLinesSvg{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* ═══ FIX 2: HIDE BOTTOM PROGRESS BAR — pill + banner timer handle it ═══ */
.workout-progress-bar,
#workoutProgressBar,
.bottom-tuck-handle,
#bottomTuckHandle{
  display:none !important;
}

/* ═══ FIX 3: CLEAN UP EXPANDED CARD HERO AREA ═══ */
/* Superset hero: hide boxy video thumbnails, make muscle img a floating badge */
.sc-hero-bg .sc-ex-icons{
  position:absolute !important;
  bottom:8px !important;
  right:8px !important;
  top:auto !important;
  left:auto !important;
  display:flex !important;
  gap:6px !important;
  padding:0 !important;
  z-index:3 !important;
}
.sc-hero-bg .sc-ex-icons .sc-video-sq{
  display:none !important;
}
.sc-hero-bg .sc-ex-icons .sc-ex-img{
  width:40px !important;
  height:40px !important;
  border-radius:10px !important;
  background:rgba(0,0,0,0.5) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.3) !important;
  filter:brightness(1.3) !important;
  object-fit:contain !important;
}
/* Standard card hero: reposition sc-card-images */
.sc-hero-bg .sc-card-images{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:8px 0 4px !important;
  position:relative !important;
  z-index:2 !important;
}
.sc-hero-bg .sc-card-images .sc-hero-play-btn{
  width:48px !important;
  height:48px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,0.15) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  border:1.5px solid rgba(255,255,255,0.2) !important;
  box-shadow:0 4px 16px rgba(0,0,0,0.3) !important;
}
.sc-hero-bg .sc-card-images .sc-hero-play-btn svg{
  width:24px !important;
  height:24px !important;
}
.sc-hero-bg .sc-card-images .sc-ex-img{
  width:40px !important;
  height:40px !important;
  border-radius:10px !important;
  background:rgba(0,0,0,0.5) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.3) !important;
  filter:brightness(1.3) !important;
  object-fit:contain !important;
}
.sc-hero-bg .sc-card-images .sc-summary-btn{
  margin-left:auto !important;
  background:rgba(255,255,255,0.1) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  border-radius:10px !important;
  padding:8px 12px !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:700 !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.2) !important;
}
.sc-hero-bg .sc-card-images .sc-summary-btn svg{
  stroke:#fff !important;
  width:14px !important;
  height:14px !important;
}

/* ═══ FIX 4: var(--accent-orange) TIMER BLEED — force #34D399 everywhere ═══ */
/* Timer session rows in timer menu */
.timer-session-row.active .timer-session-label,
.timer-session-row.active[data-week="cable"] .timer-session-label{
  color:#34D399 !important;
}
.timer-session-row.active .timer-session-dur,
.timer-session-row.active[data-week="cable"] .timer-session-dur{
  color:#34D399 !important;
}
/* Duration popup check icons */
.dur-status-check svg,
.dur-status-ind.dur-check.achieved svg{
  stroke:#34D399 !important;
}
/* Status indicator checks — always green, never week color */
.status-ind-check.achieved svg,
.status-ind-check.achieved.cable svg{
  stroke:#34D399 !important;
}
/* Mini card checks */
.mini-card-ind.mc-check.achieved svg{
  stroke:#34D399 !important;
}
/* Set dot complete — green not orange */
.set-dot.active.complete{
  background:#34D399 !important;
  border-color:#34D399 !important;
  box-shadow:0 0 8px rgba(52,211,153,0.3) !important;
}
/* Completion check in unified sheet */
.ws-item-check.done svg{
  stroke:#34D399 !important;
}
/* Completion check general */
.completion-check.complete svg{
  stroke:#34D399 !important;
}

/* ═══ MODERN TIMER BUTTONS ═══ */

/* ── 1. Card timer play/pause/reset (on expanded exercise cards) ── */
.sc-timer-btn{
  width:42px !important;
  height:42px !important;
  border-radius:50% !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;
  -webkit-tap-highlight-color:transparent !important;
  transition:all 0.12s ease !important;
}
.sc-timer-btn:active{
  transform:scale(0.88) !important;
  background:rgba(255,255,255,0.12) !important;
}
.sc-timer-btn svg{
  width:20px !important;
  height:20px !important;
  stroke:rgba(255,255,255,0.5) !important;
  stroke-width:2 !important;
  fill:none !important;
}
.sc-timer-play .sct-play{
  fill:rgba(255,255,255,0.5) !important;
  stroke:none !important;
}
/* Running = show pause bars in yellow */
.sc-timer-play.is-running{
  background:rgba(255,200,100,0.12) !important;
}
.sc-timer-play .sct-pause{
  stroke:rgba(255,200,100,0.85) !important;
  stroke-width:2.5 !important;
  fill:none !important;
}
/* Reset = red tinted circle */
.sc-timer-reset{
  background:rgba(255,100,100,0.06) !important;
}
.sc-timer-reset svg{
  stroke:rgba(255,120,120,0.5) !important;
}
.sc-timer-reset:active{
  background:rgba(255,100,100,0.15) !important;
}

/* ── 2. Banner Start/Continue/Done + Summary ── */
.banner-play-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:12px 28px !important;
  border-radius:50px !important;
  background:#34D399 !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:0.3px !important;
  border:none !important;
  box-shadow:0 4px 20px rgba(52,211,153,0.3) !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:all 0.15s ease !important;
}
.banner-play-btn:active{
  transform:scale(0.95) !important;
  box-shadow:0 2px 10px rgba(52,211,153,0.2) !important;
}
.banner-play-btn svg{
  width:16px !important; height:16px !important;
  stroke:#fff !important; fill:none !important; flex-shrink:0 !important;
}
.banner-play-btn.is-paused{
  background:rgba(255,200,100,0.9) !important;
  color:#1a1a1a !important;
  box-shadow:0 4px 20px rgba(255,200,100,0.25) !important;
}
.banner-play-btn.is-paused svg{ stroke:#1a1a1a !important; }
.banner-play-btn.is-complete{
  background:rgba(52,211,153,0.1) !important;
  color:rgba(52,211,153,0.8) !important;
  box-shadow:none !important;
}
.banner-play-btn.is-complete svg{ stroke:rgba(52,211,153,0.7) !important; }

.banner-recap-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:12px 22px !important;
  border-radius:50px !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.6) !important;
  font-size:13px !important; font-weight:700 !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:all 0.15s ease !important;
}
.banner-recap-btn:active{
  transform:scale(0.95) !important;
  background:rgba(255,255,255,0.1) !important;
}
.banner-recap-btn svg{
  width:15px !important; height:15px !important;
  stroke:rgba(255,255,255,0.45) !important; flex-shrink:0 !important;
}

/* ── 3. Timer menu Pause/Resume + Reset ── */
.timer-menu-btn{
  flex:1 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:8px !important;
  padding:16px 12px !important;
  border-radius:16px !important;
  border:none !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:all 0.15s ease !important;
}
.timer-menu-btn:active{
  transform:scale(0.93) !important;
}
.timer-menu-btn svg{
  width:24px !important; height:24px !important;
  stroke:currentColor !important; stroke-width:2 !important;
}
.timer-menu-btn span{
  font-size:11px !important; font-weight:800 !important;
  text-transform:uppercase !important; letter-spacing:0.8px !important;
}
/* Pause = green tint when running */
.timer-pause-btn:not(.is-paused){
  background:rgba(52,211,153,0.1) !important;
  color:#34D399 !important;
}
.timer-pause-btn:not(.is-paused):active{
  background:rgba(52,211,153,0.18) !important;
}
/* Resume = yellow tint when paused */
.timer-pause-btn.is-paused{
  background:rgba(255,200,100,0.1) !important;
  color:rgba(255,200,100,0.9) !important;
}
.timer-pause-btn.is-paused:active{
  background:rgba(255,200,100,0.18) !important;
}
/* Reset = red tint */
.timer-reset-btn{
  background:rgba(255,100,100,0.06) !important;
  color:rgba(255,120,120,0.7) !important;
}
.timer-reset-btn:active{
  background:rgba(255,100,100,0.12) !important;
}

/* ── 4. Duration popup play/pause/reset ── */
.dur-item-ctrls{
  display:flex !important;
  gap:6px !important;
  align-items:center !important;
  flex-shrink:0 !important;
}
.dur-item-ctrl{
  width:40px !important;
  height:40px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,0.05) !important;
  border:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:all 0.12s ease !important;
}
.dur-item-ctrl:active{
  transform:scale(0.88) !important;
  background:rgba(255,255,255,0.1) !important;
}
.dur-item-ctrl svg{
  width:18px !important; height:18px !important;
  stroke:rgba(255,255,255,0.45) !important;
  stroke-width:2 !important; fill:none !important;
}
.dur-item-ctrl .ctrl-play{
  fill:rgba(255,255,255,0.45) !important; stroke:none !important;
}
.dur-item-ctrl .ctrl-pause{
  stroke:rgba(255,200,100,0.85) !important; fill:none !important;
}
.dur-item-ctrl.is-running{
  background:rgba(255,200,100,0.1) !important;
}
.dur-item-reset{
  background:rgba(255,100,100,0.05) !important;
}
.dur-item-reset svg{
  stroke:rgba(255,120,120,0.45) !important;
}
.dur-item-reset:active{
  background:rgba(255,100,100,0.1) !important;
}

/* ── 5. Rest timer Skip / Extend ── */
.sc-rest-skip{
  padding:14px 40px !important;
  border-radius:50px !important;
  background:rgba(255,255,255,0.1) !important;
  border:none !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:800 !important;
  font-family:inherit !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:all 0.15s ease !important;
}
.sc-rest-skip:active{
  transform:scale(0.95) !important;
  background:rgba(255,255,255,0.18) !important;
}
.sc-rest-extend{
  padding:10px 18px !important;
  border-radius:50px !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  background:transparent !important;
  color:rgba(255,255,255,0.5) !important;
  font-size:13px !important;
  font-weight:700 !important;
  font-family:inherit !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:all 0.15s ease !important;
}
.sc-rest-extend:active{
  transform:scale(0.95) !important;
  background:rgba(255,255,255,0.06) !important;
}

/* ── 6. Workout timer inline (wt) ── */
.wt-btn{
  width:34px !important;
  height:34px !important;
  border-radius:50% !important;
  border:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:all 0.12s ease !important;
}
.wt-btn svg{
  width:14px !important; height:14px !important;
  stroke-width:2 !important;
}
.wt-pause{
  background:rgba(255,255,255,0.06) !important;
  color:rgba(255,255,255,0.5) !important;
}
.wt-pause:active{ background:rgba(255,255,255,0.12) !important; }
.wt-reset{
  background:rgba(255,100,100,0.06) !important;
  color:rgba(255,120,120,0.55) !important;
}
.wt-reset:active{ background:rgba(255,100,100,0.15) !important; }

/* ── 7. Summary button ── */
.sc-summary-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:10px 16px !important;
  border-radius:50px !important;
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  color:rgba(255,255,255,0.45) !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.15s ease !important;
}
.sc-summary-btn:active{
  transform:scale(0.93) !important;
  background:rgba(255,255,255,0.08) !important;
}
.sc-summary-btn svg{
  width:14px !important; height:14px !important;
  stroke:rgba(255,255,255,0.4) !important;
}

/* ── Light mode ── */
body.light-mode .sc-timer-btn{ background:rgba(0,0,0,0.04) !important; }
body.light-mode .sc-timer-btn svg{ stroke:rgba(0,0,0,0.4) !important; }
body.light-mode .sc-timer-play .sct-play{ fill:rgba(0,0,0,0.4) !important; }
body.light-mode .sc-timer-play.is-running{ background:rgba(180,140,30,0.08) !important; }
body.light-mode .sc-timer-reset{ background:rgba(255,80,80,0.04) !important; }
body.light-mode .banner-play-btn{ background:#2BAD7E !important; }
body.light-mode .banner-recap-btn{
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(0,0,0,0.06) !important;
  color:rgba(0,0,0,0.7) !important;
}
body.light-mode .banner-recap-btn svg{ stroke:rgba(0,0,0,0.4) !important; }
body.light-mode .timer-menu-btn{ border:none !important; }
body.light-mode .timer-pause-btn:not(.is-paused){
  background:rgba(52,211,153,0.08) !important; color:#2BAD7E !important;
}
body.light-mode .timer-pause-btn.is-paused{
  background:rgba(180,140,30,0.08) !important; color:rgba(160,120,20,0.85) !important;
}
body.light-mode .timer-reset-btn{
  background:rgba(255,80,80,0.04) !important; color:rgba(200,80,80,0.65) !important;
}
body.light-mode .dur-item-ctrl{ background:rgba(0,0,0,0.03) !important; }
body.light-mode .dur-item-ctrl svg{ stroke:rgba(0,0,0,0.55) !important; }
body.light-mode .sc-rest-skip{
  background:rgba(0,0,0,0.06) !important; color:#111 !important;
}
body.light-mode .sc-rest-extend{
  border-color:rgba(0,0,0,0.08) !important; color:rgba(0,0,0,0.65) !important;
}
body.light-mode .sc-summary-btn{
  background:rgba(0,0,0,0.03) !important;
  border-color:rgba(0,0,0,0.05) !important;
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .sc-summary-btn svg{ stroke:rgba(0,0,0,0.55) !important; }
/* ═══ END MODERN TIMER BUTTONS ═══ */

/* ═══ DURATION POPUP → FULL-SCREEN SHEET ═══ */
.duration-popup-overlay{
  background:rgba(0,0,0,0.85) !important;
  touch-action:none !important;
  overscroll-behavior:contain !important;
}
.duration-popup{
  position:fixed !important;
  bottom:0 !important; left:0 !important; right:0 !important;
  max-height:100dvh !important;
  height:100dvh !important;
  background:#101016 !important;
  border-radius:0 !important;
  z-index:601 !important;
  transform:translateY(100%) !important;
  transition:transform 0.35s cubic-bezier(0.25,1,0.5,1) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  overscroll-behavior:contain !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.duration-popup.open{ transform:translateY(0) !important; }
body.light-mode .duration-popup{
  background:#fafafc !important;
  box-shadow:none !important;
}

/* Handle bar */
.duration-popup-handle{
  display:flex !important;
  justify-content:center !important;
  padding:calc(10px + env(safe-area-inset-top)) 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.15) !important;
}
body.light-mode .duration-popup-handle::after{
  background:rgba(0,0,0,0.12) !important;
}

/* Close X — top right */
.dur-popup-close-x{
  position:absolute !important;
  top:calc(12px + env(safe-area-inset-top)) !important;
  right:16px !important;
  z-index:5 !important;
  width:36px !important; height:36px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,0.06) !important;
  border:none !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  cursor:pointer !important;
}
.dur-popup-close-x svg{
  width:18px !important; height:18px !important;
  stroke:rgba(255,255,255,0.5) !important;
  stroke-width:2 !important;
}
body.light-mode .dur-popup-close-x{
  background:rgba(0,0,0,0.04) !important;
}
body.light-mode .dur-popup-close-x svg{
  stroke:rgba(0,0,0,0.4) !important;
}

/* Hero section — compact, centered */
.dur-popup-hero{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:12px !important;
  padding:16px 24px 20px !important;
  flex-shrink:0 !important;
}
.dur-hero-ring{
  width:100px !important; height:100px !important;
  position:relative !important;
}
.dur-hero-ring-svg{
  width:100px !important; height:100px !important;
}
.dur-hero-inner{
  position:absolute !important; inset:0 !important;
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important;
}
.dur-hero-pct{
  font-size:26px !important; font-weight:900 !important;
  color:#fff !important;
}
.dur-hero-done{
  font-size:12px !important; font-weight:600 !important;
  color:rgba(255,255,255,0.4) !important;
  margin-top:2px !important;
}
body.light-mode .dur-hero-pct{ color:#111 !important; }
body.light-mode .dur-hero-done{ color:rgba(0,0,0,0.35) !important; }

/* Time block */
.dur-hero-time-block{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:2px !important;
}
.dur-hero-total{
  font-size:48px !important;
  font-weight:900 !important;
  color:#34D399 !important;
  font-variant-numeric:tabular-nums !important;
  letter-spacing:-2px !important;
  line-height:1 !important;
}
.dur-hero-total.is-paused{
  color:rgba(255,200,100,0.85) !important;
}
.dur-hero-label{
  font-size:11px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:1.5px !important;
  color:rgba(255,255,255,0.3) !important;
}
body.light-mode .dur-hero-total{ color:#2BAD7E !important; }
body.light-mode .dur-hero-sublabel{
  font-size:10px;
  font-weight:500;
  letter-spacing:0.5px;
  color:rgba(255,255,255,0.28);
  text-transform:uppercase;
  margin-top:2px;
  display:block;
}
.dur-hero-label{ color:rgba(0,0,0,0.6) !important; }

/* Divider */
.dur-popup-divider{
  height:1px !important;
  background:rgba(255,255,255,0.06) !important;
  margin:0 20px !important;
  flex-shrink:0 !important;
}
body.light-mode .dur-popup-divider{
  background:rgba(0,0,0,0.06) !important;
}

/* Exercise list — scrollable body fills remaining space */
.duration-popup-list,
#durPopupList{
  flex:1 !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  padding:12px 16px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}

/* Exercise rows — full width cards */
.dur-item{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:14px 16px !important;
  background:rgba(255,255,255,0.03) !important;
  border:1px solid rgba(255,255,255,0.05) !important;
  border-radius:16px !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:background 0.12s !important;
}
.dur-item:active{
  background:rgba(255,255,255,0.06) !important;
}
body.light-mode .dur-item{
  background:rgba(0,0,0,0.02) !important;
  border-color:rgba(0,0,0,0.04) !important;
}

/* Left number column */
.dur-item-left-col{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:2px !important;
  width:36px !important;
  flex-shrink:0 !important;
}
.dur-num-big{
  font-size:20px !important;
  font-weight:900 !important;
  color:#fff !important;
  line-height:1 !important;
}
body.light-mode .dur-num-big{ color:#111 !important; }

/* Info */
.dur-item-info{
  flex:1 !important;
  min-width:0 !important;
}
.dur-item-name{
  font-size:14px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.85) !important;
  line-height:1.3 !important;
}
.dur-item-detail{
  margin-top:3px !important;
}
.dur-detail-sets{
  font-size:12px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.35) !important;
}
body.light-mode .dur-item-name{ color:rgba(0,0,0,0.8) !important; }
body.light-mode .dur-detail-sets{ color:rgba(0,0,0,0.35) !important; }

/* Time */
.dur-item-time{
  font-size:16px !important;
  font-weight:800 !important;
  font-variant-numeric:tabular-nums !important;
  color:rgba(255,255,255,0.4) !important;
  flex-shrink:0 !important;
  min-width:48px !important;
  text-align:right !important;
}
.dur-item-time.live{
  color:#34D399 !important;
}
body.light-mode .dur-item-time{ color:rgba(0,0,0,0.6) !important; }
body.light-mode .dur-item-time.live{ color:#2BAD7E !important; }

/* Bottom action buttons — pinned */
.dur-popup-actions{
  display:flex !important;
  gap:10px !important;
  padding:16px 20px calc(16px + env(safe-area-inset-bottom)) !important;
  flex-shrink:0 !important;
  border-top:1px solid rgba(255,255,255,0.05) !important;
}
body.light-mode .dur-popup-actions{
  border-top-color:rgba(0,0,0,0.05) !important;
}
.dur-action-btn{
  flex:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:14px 10px !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  font-size:14px !important;
  font-weight:700 !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:all 0.12s !important;
}
.dur-action-btn:active{ transform:scale(0.96) !important; }
.dur-action-btn svg{
  width:18px !important; height:18px !important;
  stroke:currentColor !important;
  stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important;
  fill:none !important;
}
/* Pause */
.dur-action-pause{
  background:rgba(52,211,153,0.08) !important;
  color:#34D399 !important;
  border-color:rgba(52,211,153,0.1) !important;
}
.dur-action-pause:active{ background:rgba(52,211,153,0.15) !important; }
.dur-action-pause.is-paused{
  background:rgba(255,200,100,0.08) !important;
  color:rgba(255,200,100,0.9) !important;
  border-color:rgba(255,200,100,0.1) !important;
}
/* Reset */
.dur-action-reset{
  background:rgba(255,255,255,0.04) !important;
  color:rgba(255,255,255,0.5) !important;
}
.dur-action-reset:active{ background:rgba(255,255,255,0.08) !important; }
/* End */
.dur-action-end{
  background:rgba(255,80,80,0.08) !important;
  color:rgba(255,100,100,0.8) !important;
  border-color:rgba(255,80,80,0.1) !important;
}
.dur-action-end:active{ background:rgba(255,80,80,0.15) !important; }
.dur-action-end svg{ fill:currentColor !important; stroke:none !important; }

/* Light mode actions */
body.light-mode .dur-action-pause{
  background:rgba(52,211,153,0.06) !important;
  color:#2BAD7E !important;
}
body.light-mode .dur-action-reset{
  background:rgba(0,0,0,0.03) !important;
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .dur-action-end{
  background:rgba(255,60,60,0.06) !important;
  color:rgba(200,60,60,0.75) !important;
}
/* ═══ END DURATION POPUP FULL-SCREEN ═══ */

/* ═══ CARD TIMER — VISIBLE ═══ */
.sc-card-timer{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.sc-card-timer svg{
  width:20px !important; height:20px !important;
  stroke:rgba(255,255,255,0.5) !important;
}
.sc-card-timer-val,
.sc-top-row .sc-card-timer-val{
  font-size:28px !important;
  font-weight:900 !important;
  color:rgba(255,255,255,0.7) !important;
  font-variant-numeric:tabular-nums !important;
  letter-spacing:-1px !important;
  min-width:60px !important;
}
/* Timer buttons next to timer — bigger */
.sc-top-row .sc-timer-btn,
.sc-card-timer .sc-timer-btn{
  width:44px !important;
  height:44px !important;
}
.sc-top-row .sc-timer-btn svg,
.sc-card-timer .sc-timer-btn svg{
  width:20px !important;
  height:20px !important;
}
/* Live — bright green */
.sc-card-timer.is-live svg{
  stroke:#34D399 !important;
  filter:drop-shadow(0 0 4px rgba(52,211,153,0.3)) !important;
}
.sc-card-timer.is-live .sc-card-timer-val{
  color:#34D399 !important;
  text-shadow:0 0 8px rgba(52,211,153,0.2) !important;
}
/* Hero bg context — white */
.sc-hero-bg .sc-card-timer svg{
  stroke:#fff !important;
}
.sc-hero-bg .sc-card-timer-val{
  color:#fff !important;
  text-shadow:0 1px 3px rgba(0,0,0,0.5) !important;
}
.sc-hero-bg .sc-card-timer.is-live svg{
  stroke:#34D399 !important;
}
.sc-hero-bg .sc-card-timer.is-live .sc-card-timer-val{
  color:#34D399 !important;
  text-shadow:0 0 8px rgba(52,211,153,0.3) !important;
}
/* Light mode */
body.light-mode .sc-card-timer svg{ stroke:rgba(0,0,0,0.55) !important; }
body.light-mode .sc-card-timer-val,
body.light-mode .sc-top-row .sc-card-timer-val{
  color:rgba(0,0,0,0.55) !important;
}
body.light-mode .sc-card-timer.is-live svg{ stroke:#2BAD7E !important; }
body.light-mode .sc-card-timer.is-live .sc-card-timer-val{ color:#2BAD7E !important; }
/* ═══ END CARD TIMER ═══ */

/* ═══ RESET CONFIRM PULSE ═══ */
@keyframes resetDoubleBounce {
  0% { transform:scale(1); }
  15% { transform:scale(1.15); }
  30% { transform:scale(1); }
  45% { transform:scale(1.12); }
  60% { transform:scale(1); }
  100% { transform:scale(1); }
}
.confirming{
  animation:resetDoubleBounce 0.6s ease-out !important;
}
/* ═══ END RESET CONFIRM PULSE ═══ */

/* ═══ HIDE THEME PICKER ═══ */
.settings-item-label + .settings-theme-grid,
.settings-theme-grid{
  display:none !important;
}
/* Hide the "Theme" label before it */
.settings-item-label:has(+ .settings-theme-grid){ display:none !important; }
/* Fallback for browsers without :has */
#settingsThemeGrid{ display:none !important; }

/* ═══ GOLD SPACE THEME ═══ */
body.theme-space{
  background:#000 !important;
}
body.light-mode.theme-space{
  background:radial-gradient(ellipse at 50% 0%, #e8e2d4 0%, #ddd8cc 35%, #d6d0c4 100%) !important;
}

/* (Old UNIFIED CALENDAR block removed — handled by LAYOUT RESTRUCTURE) */

/* ═══ SET TYPE INFO BUTTONS ═══ */
/* Banner card info button — purple circle next to tag */
.bex-info-btn{
  width:22px !important; height:22px !important;
  border-radius:50% !important;
  border:1px solid rgba(162,100,190,0.15) !important;
  background:rgba(162,100,190,0.08) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  flex-shrink:0 !important;
  vertical-align:middle !important;
  margin-left:4px !important;
  padding:0 !important;
}
.bex-info-btn svg{
  width:14px !important; height:14px !important;
  stroke:rgba(162,100,190,0.6) !important;
  stroke-width:2 !important;
  fill:none !important;
}
.bex-info-btn:active{
  transform:scale(0.85) !important;
  background:rgba(162,100,190,0.18) !important;
}
body.light-mode .bex-info-btn{
  background:rgba(140,80,170,0.06) !important;
  border-color:rgba(140,80,170,0.12) !important;
}
body.light-mode .bex-info-btn svg{
  stroke:rgba(140,80,170,0.5) !important;
}
/* Modal item highlight */
.set-type-info-item.highlighted{
  background:rgba(212,168,67,0.08) !important;
  border:1px solid rgba(212,168,67,0.15) !important;
  border-radius:12px !important;
  padding:12px 14px !important;
  margin:-1px 0 !important;
}
.set-type-info-item.highlighted .set-type-info-item-name{
  color:#D4A843 !important;
}
body.light-mode .set-type-info-item.highlighted{
  background:rgba(180,140,40,0.06) !important;
  border-color:rgba(180,140,40,0.12) !important;
}
/* ═══ END SET TYPE INFO BUTTONS ═══ */

/* Expanded card info button — purple to match */
.superset-info-btn{
  width:24px !important;
  height:24px !important;
  border-radius:50% !important;
  border:1px solid rgba(162,100,190,0.15) !important;
  background:rgba(162,100,190,0.08) !important;
}
.superset-info-btn svg{
  width:14px !important;
  height:14px !important;
  stroke:rgba(162,100,190,0.6) !important;
}
.superset-info-btn:active{
  background:rgba(162,100,190,0.18) !important;
}
body.light-mode .superset-info-btn{
  background:rgba(140,80,170,0.06) !important;
  border-color:rgba(140,80,170,0.12) !important;
}
body.light-mode .superset-info-btn svg{
  stroke:rgba(140,80,170,0.5) !important;
}

/* ═══ Z-INDEX FIX — modals above detail screen (510) ═══ */
.lightbox{
  z-index:610 !important;
}
.tempo-modal-overlay{
  z-index:610 !important;
}
.timer-menu-overlay,
.timer-menu{
  z-index:610 !important;
}
.stats-modal{
  z-index:610 !important;
}
.info-modal{
  z-index:610 !important;
}
.stats-graph-modal{
  z-index:610 !important;
}
.stats-info-modal{
  z-index:610 !important;
}
.workout-select-modal{
  z-index:610 !important;
}
.day-selector-overlay{
  z-index:610 !important;
}
.floating-rest-indicator{
  z-index:610 !important;
}
.picker{
  z-index:610 !important;
}
/* ═══ END Z-INDEX FIX ═══ */

/* ═══ EXPANDED CARD FIXES ═══ */

/* 1. Full exercise name — no truncation */
.edh-name{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:unset !important;
  font-size:20px !important;
  font-weight:900 !important;
  line-height:1.25 !important;
}

/* 2. Round timer — bigger, visible */
.sc-round-timer{
  font-size:14px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.4) !important;
  letter-spacing:0 !important;
  margin-left:8px !important;
  font-variant-numeric:tabular-nums !important;
}
.sc-round-timer:not(:empty){
  color:#34D399 !important;
}
body.light-mode .sc-round-timer{
  color:rgba(0,0,0,0.25) !important;
}
body.light-mode .sc-round-timer:not(:empty){
  color:#2BAD7E !important;
}

/* 3. SET/SUPERSET labels — larger with check + trophy indicators */
.sc-round-num{
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:1px !important;
  padding:14px 8px 10px !important;
  text-align:left !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-wrap:wrap !important;
}
/* Round check icon */
.sc-round-check{
  width:18px !important; height:18px !important;
  display:inline-flex !important;
  align-items:center !important; justify-content:center !important;
  flex-shrink:0 !important;
}
.sc-round-check svg{
  width:15px !important; height:15px !important;
  stroke:rgba(255,255,255,0.15) !important;
  stroke-width:2.5 !important; stroke-linecap:round !important; stroke-linejoin:round !important;
  fill:none !important;
}
.sc-round-check.lit svg{
  stroke:#34D399 !important;
}
/* Round trophy icon */
.sc-round-trophy{
  width:18px !important; height:18px !important;
  display:inline-flex !important;
  align-items:center !important; justify-content:center !important;
  flex-shrink:0 !important;
}
.sc-round-trophy svg{
  width:14px !important; height:14px !important;
  stroke:rgba(255,255,255,0.12) !important;
  stroke-width:1.5 !important; stroke-linecap:round !important; stroke-linejoin:round !important;
  fill:none !important;
}
.sc-round-trophy.lit svg{
  stroke:#D4A843 !important;
  fill:rgba(212,168,67,0.15) !important;
}
/* Light mode */
body.light-mode .sc-round-check svg{ stroke:rgba(0,0,0,0.12) !important; }
body.light-mode .sc-round-check.lit svg{ stroke:#34D399 !important; }
body.light-mode .sc-round-trophy svg{ stroke:rgba(0,0,0,0.55) !important; }
body.light-mode .sc-round-trophy.lit svg{ stroke:#D4A843 !important; }

/* Kill old ::after round completion check — replaced by sc-round-check */
.sc-round-card:not(:has(.set-block:not(.set-row-done))) .sc-round-num::after{
  display:none !important;
  content:none !important;
}

/* ═══ END EXPANDED CARD FIXES ═══ */

/* ═══ LAYOUT RESTRUCTURE ═══ */

/* ── 1. Header days ring (next to rank) ── */
.header-stats{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.header-days-btn{
  position:relative !important;
  width:36px !important; height:36px !important;
  border:none !important; background:none !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:0 !important;
}
.header-days-btn .days-ring-svg{ width:36px !important; height:36px !important; }
.header-days-text{
  position:absolute !important; inset:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:8px !important; font-weight:800 !important;
  color:rgba(255,255,255,0.7) !important; pointer-events:none !important;
}
.header-days-slash{ font-size:7px !important; color:rgba(255,255,255,0.3) !important; }
body.light-mode .header-days-text{ color:rgba(0,0,0,0.6) !important; }

/* ── 2. Hide old icon row ── */
.month-row-btns{ display:none !important; }
.month-row{ display:none !important; }
.days-completed-btn#daysCompletedBtn{ display:none !important; }

/* ── 3. Banner stat buttons — larger ── */
.banner-stat-btn{
  background:none !important; border:none !important;
  padding:2px !important; cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  display:inline-flex !important; align-items:center !important;
}
.banner-stat-btn svg{
  width:22px !important; height:22px !important;
  stroke:rgba(255,255,255,0.7) !important;
}
.banner-stat-btn:active{ transform:scale(0.9) !important; }
body.light-mode .banner-stat-btn svg{ stroke:rgba(0,0,0,0.5) !important; }
/* Make existing banner stat icons larger too */
.banner-stat svg{
  width:18px !important; height:18px !important;
}
.banner-pr-trophy{
  width:20px !important; height:20px !important;
}

/* ── 4. Stats dock button ── */
#dockStatsBtn{
  display:flex !important; flex-direction:column !important;
  align-items:center !important; gap:3px !important;
}

/* ── 5. Dock labels ── */
.dock-label{
  font-size:9px !important; font-weight:600 !important;
  color:rgba(255,255,255,0.35) !important;
  letter-spacing:0.3px !important; white-space:nowrap !important;
}
body.light-mode .dock-label{ color:rgba(0,0,0,0.6) !important; }
.dock-btn{
  display:flex !important; flex-direction:column !important;
  align-items:center !important; gap:3px !important;
}

/* ═════════════════════════════════════════════════════════
   6 + 7. ONE SINGLE GLASS CARD — week-nav is the wrapper
   ═════════════════════════════════════════════════════════ */
section.week-nav{
  margin:6px 12px 0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.light-mode section.week-nav{
  background:rgba(0,0,0,0.02) !important;
  border-color:rgba(180,140,40,0.1) !important;
}

/* Strip ALL child backgrounds/borders so they don't layer */
.month-label-row{
  margin:0 !important;
  padding:10px 12px 4px !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
}
.calendar-legend{
  margin:0 !important;
  padding:6px 16px !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
}
.week-strip,
.day-panel .week-strip{
  margin:0 !important;
  padding:6px 6px 8px !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
}
.streak-indicator{
  margin:0 !important;
  background:transparent !important;
  border:none !important;
}
.day-panel-divider{
  margin:0 12px !important;
  background:rgba(255,255,255,0.04) !important;
  height:1px !important;
}
body.light-mode .day-panel-divider{
  background:rgba(0,0,0,0.04) !important;
}
.workout-banner{
  margin:0 !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}
.day-panel{
  margin:0 !important;
  padding:0 !important;
}

/* Subtle gold accent line between sections */
.calendar-legend::before{
  content:'' !important;
  display:block !important;
  height:1px !important;
  background:linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.04) 50%, transparent 90%) !important;
  margin-bottom:6px !important;
}
.week-strip::before{
  content:'' !important;
  display:block !important;
  height:1px !important;
  background:linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.04) 50%, transparent 90%) !important;
  margin-bottom:6px !important;
  position:relative !important;
  z-index:1 !important;
}
/* Banner slide — transparent, no inner card */
.workout-banner-slide-center{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  margin:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.light-mode .workout-banner-slide-center{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* Gold legend dots */
.calendar-legend-dot.free{ background:#D4945A !important; }
.calendar-legend-dot.cable{ background:#7EB5E2 !important; }
.calendar-legend-dot.pr{ background:transparent !important; border:2px solid #D4A843 !important; }
.calendar-legend-item{
  font-size:11px !important;
  color:rgba(255,255,255,0.45) !important;
}
body.light-mode .calendar-legend-item{ color:rgba(0,0,0,0.65) !important; }

/* ── 8. Fixed header — position:fixed so it always stays pinned ── */
.fixed-top-area{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:100 !important;
  background:rgba(2,2,4,0.96) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  border-bottom:1px solid rgba(201,169,110,0.1) !important;
}
body.light-mode .fixed-top-area{
  background:rgba(235,230,215,0.94) !important;
  border-bottom-color:rgba(0,0,0,0.06) !important;
}
.fixed-top-area header{
  position:relative !important;
  background:transparent !important;
  border-bottom:none !important;
}
.fixed-top-area header::after{
  display:none !important;
}
/* Spacer div pushes content below fixed header */
.fixed-header-spacer{
  height:0;
}

/* ═══ END LAYOUT RESTRUCTURE ═══ */

/* ═══ DURATION POPUP SUPERSET DISPLAY ═══ */
.dur-superset-tag{
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:1.5px !important;
  color:#B580D4 !important;
  text-transform:uppercase !important;
  margin-bottom:4px !important;
}
.dur-superset-line{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  margin-bottom:2px !important;
}
.dur-superset-letter{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:26px !important; height:22px !important;
  border-radius:6px !important;
  background:rgba(162,100,190,0.12) !important;
  color:#B580D4 !important;
  font-size:11px !important;
  font-weight:800 !important;
  flex-shrink:0 !important;
}
.dur-superset-name{
  font-size:14px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.85) !important;
  line-height:1.3 !important;
}
body.light-mode .dur-superset-tag{ color:#9060B8 !important; }
body.light-mode .dur-superset-letter{
  background:rgba(140,80,170,0.08) !important;
  color:#9060B8 !important;
}
body.light-mode .dur-superset-name{ color:rgba(0,0,0,0.8) !important; }

/* ═══ END DURATION POPUP SUPERSET DISPLAY ═══ */

/* ═══ BANNER STAT BUTTON SEPARATORS ═══ */
.banner-stat-btn{
  position:relative !important;
  padding-left:10px !important;
  margin-left:4px !important;
}
.banner-stat-btn::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  top:2px !important;
  bottom:2px !important;
  width:1px !important;
  background:rgba(255,255,255,0.12) !important;
  border-radius:1px !important;
}
body.light-mode .banner-stat-btn::before{
  background:rgba(0,0,0,0.1) !important;
}
/* Hide the dot separators before the buttons since we have lines now */
#bannerZzzDot{ display:none !important; }
#bannerZzzDot + .banner-stat-btn + .banner-stat-dot{ display:none !important; }

/* ═══ FIX: ALL CABLE BLUE → GREEN FOR TIMERS & CHECKS ═══ */
/* Completion checks — always green, never blue */
.ws-item-check.done.cable svg{
  stroke:#34D399 !important;
}
.completion-check.complete.cable svg{
  stroke:#34D399 !important;
}
/* Set dots */
.set-dot.active.complete.cable{
  background:#34D399 !important;
  border-color:#34D399 !important;
  box-shadow:0 0 8px rgba(52,211,153,0.3) !important;
}
/* Duration popup checks */
.dur-status-check.cable svg{
  stroke:#34D399 !important;
}
.dur-status-ind.dur-check.achieved.cable svg{
  stroke:#34D399 !important;
}
/* Status indicator checks */
.status-ind-check.achieved.cable svg{
  stroke:#34D399 !important;
}
/* Mini card checks */
.mini-card-ind.mc-check.achieved.cable svg{
  stroke:#34D399 !important;
}
/* Timer session labels — always green */
.timer-session-row.active[data-week="cable"] .timer-session-label,
.timer-session-row.active[data-week="cable"] .timer-session-dur{
  color:#34D399 !important;
}
/* Dock unified timer — always green */
.dock-unified-btn.live.cable .dock-unified-clock{
  stroke:#34D399 !important;
}
.dock-unified-btn.live.cable .dock-unified-time{
  color:#34D399 !important;
}
/* Card timer live — always green regardless of week */
.sc-card-timer.is-live.cable svg{
  stroke:#34D399 !important;
}
.sc-card-timer.is-live.cable .sc-card-timer-val{
  color:#34D399 !important;
}
/* Progress bar type label can stay blue as week indicator */
/* But timer running text stays green */
.dur-item-time.live.cable{
  color:#34D399 !important;
}
/* Banner timer — always green */
.banner-timer-row.cable svg{
  stroke:#34D399 !important;
  color:#34D399 !important;
}
.banner-timer-row.cable .banner-timer-val{
  color:#34D399 !important;
}
/* ═══ END CABLE BLUE FIX ═══ */

/* ═══ EXERCISE CARD REDESIGN ═══ */

/* Border around each card */
.banner-ex-card{
  border:1.5px solid rgba(255,255,255,0.1) !important;
  border-radius:18px !important;
}
.banner-ex-card.is-active{
  border-color:rgba(255,255,255,0.2) !important;
}
body.light-mode .banner-ex-card{
  border-color:rgba(0,0,0,0.08) !important;
}

/* Text positioned upper-left */
.bex-left-col{
  justify-content:flex-start !important;
  padding:8px 0 8px 10px !important;
}
.banner-ex-card .bex-info{
  justify-content:flex-start !important;
  padding:8px 36px 8px 6px !important;
}
/* ══════════════════════════════════════════════════════════
   BEX CARD — DUAL LAYER SYSTEM
   Collapsed = sleek pill  |  Expanded = full hero card
   ══════════════════════════════════════════════════════════ */

/* ── BASE CARD: no intrinsic size in collapsed state ── */
.banner-ex-card{
  padding:0 !important;
  min-height:0 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  transition:border-radius 0.35s cubic-bezier(0.32,0.72,0,1),
             box-shadow 0.3s ease !important;
  background-color:#0a0908 !important;
  border:1px solid rgba(255,255,255,0.07) !important;
  background-size:cover !important;
  background-position:right 30% !important;
}
.banner-ex-card:active{ transform:scale(0.98) !important; }

/* gap between cards */
.banner-ex-items{ gap:7px !important; }

/* ════════════════════════════════
   COLLAPSED PILL LAYER
   ════════════════════════════════ */
.bex-pill-layer{
  display:flex;
  align-items:stretch;
  min-height:52px;
  position:relative;
  background:linear-gradient(90deg,
    rgba(14,12,10,0.96) 0%,
    rgba(14,12,10,0.82) 42%,
    rgba(14,12,10,0.28) 62%,
    rgba(14,12,10,0.0) 100%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  overflow:hidden;
  transition:background 0.2s ease, border-color 0.2s ease;
  cursor:pointer;
}
.bex-pill-layer:active{ filter:brightness(1.12); }

/* Left accent bar — colour by week type */
.bex-accent-bar{
  width:3px;
  align-self:stretch;
  flex-shrink:0;
  background:linear-gradient(180deg, rgba(212,148,90,0.9) 0%, rgba(180,120,60,0.5) 100%);
  border-radius:0;
}
.bex-wt-cable .bex-accent-bar{
  background:linear-gradient(180deg, rgba(99,179,237,0.9) 0%, rgba(66,153,225,0.5) 100%);
}

/* Number badge */
.bex-num-badge{
  width:34px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:0 2px;
}
.bex-num-badge-num{
  font-size:16px;
  font-weight:900;
  color:#fff;
  line-height:1;
  letter-spacing:-0.5px;
}
/* Tiny status dots */
.bex-status-dot{
  width:5px; height:5px;
  border-radius:50%;
  background:rgba(255,255,255,0.12);
  transition:background 0.2s ease;
}
.bex-status-dot.bex-dot-check.lit{ background:#34D399; box-shadow:0 0 4px rgba(52,211,153,0.5); }
.bex-status-dot.bex-dot-trophy.lit{ background:#D4A843; box-shadow:0 0 4px rgba(212,168,67,0.5); }

/* Centre column: name + meta stacked, fills all available space */
.bex-pill-center{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  padding:9px 4px 9px 2px;
}

/* Name — wraps to 2 lines max, never truncated */
.bex-pill-name{
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,0.88);
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.25;
  letter-spacing:-0.1px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* Meta — sits below name */
.bex-pill-meta{
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.32);
  letter-spacing:0.2px;
  white-space:nowrap;
  line-height:1;
}

/* Chevron — right edge, vertically centred */
.bex-pill-chevron{
  width:30px;
  align-self:stretch;
  flex-shrink:0;
  border:none;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  padding-right:10px;
  transition:opacity 0.15s ease;
}
.bex-pill-chevron:active{ opacity:0.6; }
.bex-pill-chevron svg{ width:13px; height:13px; color:rgba(255,255,255,0.35); }

/* Completed pill — dim + checkmark accent */
.banner-ex-card.ex-done .bex-pill-layer{
  background:rgba(52,211,153,0.04) !important;
  border-color:rgba(52,211,153,0.12) !important;
}
.banner-ex-card.ex-done .bex-accent-bar{
  background:rgba(52,211,153,0.6) !important;
}
.banner-ex-card.ex-done .bex-pill-name{
  color:rgba(255,255,255,0.4) !important;
  text-decoration:line-through !important;
  text-decoration-color:rgba(255,255,255,0.15) !important;
}

/* ════════════════════════════════
   EXPANDED HERO LAYER — hidden by default
   ════════════════════════════════ */
.bex-hero-layer{
  display:none;
  position:relative;
  flex-direction:row;
  align-items:stretch;
}

/* ════════════════════════════════
   OPEN STATE — pill hides, hero shows
   ════════════════════════════════ */
.bex-inline-open .banner-ex-card{
  border-radius:16px 16px 0 0 !important;

  border:1px solid rgba(255,255,255,0.1) !important;
}
.bex-inline-open .bex-pill-layer{ display:none !important; }
.bex-inline-open .bex-hero-layer{
  display:flex !important;
  width:100%;
}

/* Left col restored to full size */
.bex-inline-open .bex-left-col{
  padding:12px 0 12px 12px !important;
  gap:5px !important;
  width:38px !important;
}
.bex-inline-open .bex-num-big{
  width:30px !important; height:30px !important;
  font-size:17px !important; font-weight:800 !important;
}
.bex-inline-open .bex-check-icon{ width:20px !important; height:20px !important; }
.bex-inline-open .bex-check-icon svg{ width:16px !important; height:16px !important; }
.bex-inline-open .bex-trophy-icon{ width:20px !important; height:20px !important; }
.bex-inline-open .bex-trophy-icon svg{ width:16px !important; height:16px !important; }

/* Info col — full details */
.bex-inline-open .banner-ex-card .bex-info{
  padding:12px 34px 10px 6px !important;
  gap:5px !important;
  justify-content:flex-start !important;
}
.bex-inline-open .bex-name{
  font-size:15px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,0.95) !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.bex-inline-open .bex-details{
  max-height:300px !important;
  opacity:1 !important;
}
.bex-inline-open .bex-chip{ font-size:11px !important; color:rgba(255,255,255,0.55) !important; }
.bex-inline-open .bex-chip svg{ opacity:0.7 !important; }
.bex-inline-open .bex-sets-count{ font-size:10px !important; color:rgba(255,255,255,0.3) !important; }
.bex-inline-open .bex-muscle-badge{
  width:56px !important; height:56px !important;
  opacity:1 !important; overflow:visible !important; border-radius:10px !important;
}
.bex-inline-open .bex-expand-btn{
  width:26px !important; height:26px !important;
  top:10px !important; right:10px !important;
  transform:rotate(180deg) !important;
}
.bex-inline-open .bex-expand-btn svg{ width:14px !important; height:14px !important; }

/* Plus button — top right */
.bex-plus-btn{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  z-index:4 !important;
  width:32px !important;
  height:32px !important;
  border-radius:10px !important;
  border:none !important;
  background:rgba(201,169,110,0.08) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:transform 0.2s ease, background 0.2s ease !important;
}
.bex-plus-btn svg{
  width:18px !important;
  height:18px !important;
  stroke:#fff !important;
  stroke-width:2.5 !important;
  transition:transform 0.3s ease !important;
}
.bex-plus-btn:active{
  transform:scale(0.85) !important;
}
/* Rotate + to × when open */
.bex-plus-btn.is-open svg{
  transform:rotate(45deg) !important;
}
.bex-plus-btn.is-open{
  background:rgba(255,255,255,0.15) !important;
}
body.light-mode .bex-plus-btn{
  background:rgba(255,255,255,0.5) !important;
}
body.light-mode .bex-plus-btn svg{
  stroke:#333 !important;
}

/* Details section — hidden by default */
.bex-details{
  max-height:0 !important;
  overflow:hidden !important;
  opacity:0 !important;
  transition:max-height 0.35s cubic-bezier(0.32,0.72,0,1), opacity 0.25s ease !important;
}
/* Expanded state — triggered by bex-inline-open on the wrapper */
.bex-inline-open .bex-details{
  max-height:300px !important;
  opacity:1 !important;
}

/* ═══ END EXERCISE CARD REDESIGN ═══ */

/* ═══ SUPERSET ROW LAYOUT FIX ═══ */
/* Stack name above inputs in superset rows */
.sc-round-row{
  flex-wrap:wrap !important;
  min-height:auto !important;
  padding:10px 8px !important;
  gap:6px !important;
}
.sc-round-row-left{
  width:100% !important;
  flex:none !important;
  gap:8px !important;
}
.sc-round-row-right{
  width:100% !important;
  flex:none !important;
  justify-content:center !important;
}
.sc-round-inputs{
  width:100% !important;
  justify-content:center !important;
}
/* Standard card rows (no letter badge) keep horizontal */
.sc-std-card .sc-round-row{
  flex-wrap:nowrap !important;
}
.sc-std-card .sc-round-row-right{
  width:auto !important;
  flex:none !important;
}
/* ═══ END SUPERSET ROW LAYOUT FIX ═══ */

/* ═══ VISUAL OVERHAUL — FIZZEEK BRAND ═══ */
/* True black. Bold brushed gold accents matching the logo F mark. White text. */

/* ── Wrapper — Round 169: flat transparent, no gold border ── */
section.week-nav{
  margin:6px 10px 0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}
body.light-mode section.week-nav{
  background:rgba(255,255,255,0.99) !important;
  border-color:rgba(180,145,70,0.2) !important;
  box-shadow:0 4px 20px rgba(0,0,0,0.06) !important;
}

/* ── Month — white text ── */
.month-label-row{ padding:16px 14px 8px !important; }
#monthText{
  font-size:15px !important; font-weight:700 !important;
  letter-spacing:4px !important; color:rgba(255,255,255,0.85) !important;
  text-shadow:none !important; text-transform:uppercase !important;
}
body.light-mode #monthText{ color:rgba(0,0,0,0.7) !important; }
.month-arrow svg{ stroke:rgba(255,255,255,0.3) !important; stroke-width:2 !important; }
.month-arrow:active svg{ stroke:rgba(201,169,110,0.8) !important; }
.today-btn svg{ stroke:rgba(255,255,255,0.3) !important; }

/* ── Legend ── */
.calendar-legend{ gap:16px !important; padding:6px 16px !important; }
.calendar-legend-item{
  display:flex !important; align-items:center !important; gap:6px !important;
  font-size:9px !important; font-weight:600 !important; letter-spacing:1.5px !important;
  text-transform:uppercase !important; color:rgba(255,255,255,0.3) !important;
  background:none !important; padding:0 !important; border:none !important; border-radius:0 !important;
}

/* ── Week strip ── */
.week-strip{ padding:10px 6px 12px !important; }
.day-col{
  border-radius:14px !important; background:transparent !important;
  border:1.5px solid transparent !important;
  transition:all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
  padding:10px 2px 10px !important;
}
/* Selected day — VISIBLE gold border */
.day-col.selected{
  background:rgba(201,169,110,0.06) !important;
  border-color:rgba(201,169,110,0.5) !important;
  box-shadow:0 0 12px rgba(201,169,110,0.08) !important;
}
.day-col.selected .day-number{ color:#fff !important; }
.day-col.selected .day-letter{ color:rgba(255,255,255,0.7) !important; }
.day-bar-fill{ height:3px !important; border-radius:2px !important; }
.day-bar-fill.free{
  background:linear-gradient(90deg, #D4945A, #E8A96B) !important;
  box-shadow:0 0 6px rgba(212,148,90,0.2) !important;
}
.day-bar-fill.cable{
  background:linear-gradient(90deg, #6BA3E8, #8DBEF0) !important;
  box-shadow:0 0 6px rgba(107,163,232,0.2) !important;
}
.day-col.today:not(.selected)::after{
  content:'' !important; position:absolute !important;
  bottom:4px !important; left:50% !important; transform:translateX(-50%) !important;
  width:4px !important; height:4px !important; border-radius:50% !important;
  background:rgba(201,169,110,0.6) !important;
}
.day-number{ font-size:20px !important; font-weight:700 !important; }
.day-letter{
  font-size:10px !important; font-weight:600 !important;
  letter-spacing:1.5px !important; text-transform:uppercase !important; opacity:0.45 !important;
}
body.light-mode .day-col.selected{
  border-color:rgba(180,145,70,0.35) !important;
}

/* ── Streak ── */
.streak-indicator{
  font-size:9px !important; font-weight:600 !important; letter-spacing:3px !important;
  text-transform:uppercase !important; color:rgba(255,255,255,0.1) !important;
  padding:4px 0 !important; text-align:center !important;
}

/* ── Workout header ── */
.workout-banner-day{
  font-size:10px !important; font-weight:600 !important; letter-spacing:4px !important;
  text-transform:uppercase !important; color:rgba(255,255,255,0.25) !important;
}
.workout-banner-title{
  font-size:26px !important; font-weight:700 !important;
  letter-spacing:-0.3px !important; line-height:1.1 !important;
}
/* VISIBLE brushed gold gradient hairline — like the gold sweep on the F mark */
.banner-header-row::after{
  content:'' !important; position:absolute !important;
  bottom:-1px !important; left:12px !important; right:12px !important; height:1px !important;
  background:linear-gradient(90deg,
    rgba(180,150,90,0.1) 0%,
    rgba(201,169,110,0.4) 25%,
    rgba(230,209,163,0.5) 45%,
    rgba(212,184,120,0.35) 65%,
    rgba(180,150,90,0.1) 100%) !important;
}
.banner-header-row{ position:relative !important; padding-bottom:8px !important; margin-bottom:5px !important; }

/* ── Stats row ── */
.banner-stats-row{ gap:6px !important; padding:3px 0 !important; }
.banner-stat{ font-weight:600 !important; font-size:13px !important; }
#bannerStatCompleted{ color:#6EDBB5 !important; }
#bannerStatCompleted svg{ stroke:#6EDBB5 !important; }
.banner-stat-dot{ color:rgba(255,255,255,0.1) !important; }
.banner-pr-count, #bannerPrCount{ color:rgba(212,184,120,0.9) !important; }
.banner-pr-trophy{ fill:rgba(212,184,120,0.8) !important; }
.banner-stat-btn{
  background:rgba(255,255,255,0.03) !important; border-radius:8px !important;
  padding:4px 7px !important; border:1px solid rgba(255,255,255,0.04) !important;
}
.banner-stat-btn:active{ background:rgba(255,255,255,0.06) !important; }

/* ── Timer — recessed ── */
.banner-timer-row{
  background:rgba(0,0,0,0.25) !important; border:1px solid rgba(255,255,255,0.03) !important;
  border-radius:14px !important; margin:6px 0 !important;
  box-shadow:0 1px 4px rgba(0,0,0,0.3) inset !important;
}

/* ── Buttons ── */
.banner-play-btn{
  background:linear-gradient(135deg, #3EE0A5 0%, #2BAD7E 100%) !important;
  border:none !important; border-radius:14px !important;
  box-shadow:0 4px 16px rgba(52,211,153,0.12), 0 1px 0 rgba(255,255,255,0.12) inset !important;
}
.banner-recap-btn{
  background:rgba(255,255,255,0.04) !important; border:1px solid rgba(255,255,255,0.06) !important;
  border-radius:14px !important;
}

/* ── Exercise cards — BOLD gold top edge like the logo F mark ── */
.banner-ex-card{
  border:1px solid rgba(255,255,255,0.06) !important;
  border-top:none !important;
  border-radius:16px !important;
  box-shadow:0 4px 20px rgba(0,0,0,0.45) !important;
}
.banner-ex-card.is-active{
  border-color:rgba(201,169,110,0.25) !important;
  border-top:none !important;
  box-shadow:0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,169,110,0.1) !important;
}

/* Cinematic overlay */
.bex-bg-overlay{
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 25%, rgba(0,0,0,0.55) 85%, rgba(0,0,0,0.72) 100%) !important;
}

/* Number badge — white on dark glass */
.bex-num-big{
  font-size:17px !important; font-weight:700 !important; color:rgba(255,255,255,0.9) !important;
  width:30px !important; height:30px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:rgba(0,0,0,0.5) !important; border-radius:9px !important;
  border:1px solid rgba(255,255,255,0.08) !important; line-height:1 !important;
  backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important;
}

/* ── THE SIGNATURE: Brushed gold gradient top edge on every card ──
   Multi-stop gradient mimicking the light sweep across the logo's F mark
   This is the main visual connection to the FIZZEEK brand identity */
.banner-ex-card::before{
  content:'' !important; position:absolute !important;
  top:0 !important; left:0 !important; right:0 !important;
  height:2px !important;
  background:linear-gradient(90deg,
    rgba(140,115,65,0.15) 0%,
    rgba(180,150,90,0.5) 15%,
    rgba(201,169,110,0.7) 30%,
    rgba(230,209,163,0.85) 45%,
    rgba(212,184,120,0.6) 60%,
    rgba(201,169,110,0.4) 75%,
    rgba(180,150,90,0.15) 100%) !important;
  z-index:5 !important;
  border-radius:16px 16px 0 0 !important;
}

/* Muscle badge */
.banner-ex-card .bex-muscle-badge{
  width:48px !important; height:48px !important; border-radius:12px !important;
  border:1px solid rgba(255,255,255,0.07) !important;
  box-shadow:0 2px 10px rgba(0,0,0,0.4) !important;
  background:rgba(0,0,0,0.45) !important;
  backdrop-filter:blur(8px) !important; -webkit-backdrop-filter:blur(8px) !important;
}
.banner-ex-card .bex-muscle-badge img{ filter:brightness(1.4) !important; }

/* Plus button */
.bex-plus-btn{
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.06) !important; border-radius:10px !important;
}
.bex-plus-btn svg{ stroke:rgba(255,255,255,0.5) !important; }
.bex-plus-btn.is-open{
  background:rgba(255,255,255,0.12) !important; border-color:rgba(255,255,255,0.1) !important;
}
.bex-plus-btn.is-open svg{ stroke:#fff !important; }

/* VISIBLE brushed gold gradient separators — same sweep pattern as logo */
.calendar-legend::before{
  background:linear-gradient(90deg, transparent 5%, rgba(201,169,110,0.15) 30%, rgba(230,209,163,0.2) 50%, rgba(201,169,110,0.15) 70%, transparent 95%) !important;
  height:1px !important;
}
.week-strip::before{
  background:linear-gradient(90deg, transparent 5%, rgba(201,169,110,0.15) 30%, rgba(230,209,163,0.2) 50%, rgba(201,169,110,0.15) 70%, transparent 95%) !important;
  height:1px !important;
}
.day-panel-divider{
  background:linear-gradient(90deg, transparent 5%, rgba(201,169,110,0.12) 30%, rgba(230,209,163,0.18) 50%, rgba(201,169,110,0.12) 70%, transparent 95%) !important;
  height:1px !important; margin:0 14px !important;
}

/* ═══ END VISUAL OVERHAUL ═══ */

/* ═══ EXERCISE CARD SWIPE CAROUSEL ═══ */
.workout-container{
  will-change:transform !important;
}
.workout-container.wc-slide-out-left{
  transition:transform 0.25s ease-out, opacity 0.2s ease-out !important;
  transform:translateX(-110%) !important;
  opacity:0 !important;
}
.workout-container.wc-slide-out-right{
  transition:transform 0.25s ease-out, opacity 0.2s ease-out !important;
  transform:translateX(110%) !important;
  opacity:0 !important;
}
.workout-container.wc-slide-in-left{
  transform:translateX(80%) !important;
  opacity:0 !important;
  transition:none !important;
}
.workout-container.wc-slide-in-right{
  transform:translateX(-80%) !important;
  opacity:0 !important;
  transition:none !important;
}
.workout-container.wc-slide-in-active{
  transition:transform 0.3s cubic-bezier(0.25,1,0.5,1), opacity 0.25s ease-out !important;
  transform:translateX(0) !important;
  opacity:1 !important;
}
.workout-container.wc-snap-back{
  transition:transform 0.3s cubic-bezier(0.25,1,0.5,1) !important;
  transform:translateX(0) !important;
}
/* Dim the card slightly while dragging for visual feedback */
.workout-container.wc-dragging{
  transition:none !important;
}
/* ═══ END EXERCISE CARD SWIPE CAROUSEL ═══ */

/* ═══ FIZZEEK BRAND — EXPANDED CARDS ═══ */

/* Detail screen — true black */
.ex-detail-screen{
  background:#030305 !important;
}

/* Detail header — true black with gold bottom edge */
.ex-detail-header{
  background:rgba(6,6,8,0.99) !important;
  border-bottom:none !important;
}
.ex-detail-header::after{
  content:'' !important;
  display:block !important;
  height:1px !important;
  background:linear-gradient(90deg,
    transparent 5%,
    rgba(180,150,90,0.2) 20%,
    rgba(201,169,110,0.4) 40%,
    rgba(230,209,163,0.45) 55%,
    rgba(201,169,110,0.3) 70%,
    rgba(180,150,90,0.1) 90%,
    transparent 100%) !important;
}

/* sc-card — true black, gold border, signature gold top edge */
.sc-card{
  background:rgba(6,6,8,0.99) !important;
  border-radius:16px !important;
  border:1.5px solid rgba(201,169,110,0.15) !important;
  box-shadow:0 8px 32px rgba(0,0,0,0.5), 0 1px 0 rgba(201,169,110,0.05) inset !important;
  overflow:hidden !important;
  position:relative !important;
}
body.light-mode .sc-card{
  background:#fff !important;
  border-color:rgba(180,145,70,0.12) !important;
  box-shadow:0 4px 16px rgba(0,0,0,0.06) !important;
}

/* Brushed gold top edge — THE SIGNATURE — matches banner cards */
.sc-card::before{
  content:'' !important;
  position:absolute !important;
  top:0 !important; left:0 !important; right:0 !important;
  height:2px !important;
  background:linear-gradient(90deg,
    rgba(140,115,65,0.15) 0%,
    rgba(180,150,90,0.5) 15%,
    rgba(201,169,110,0.7) 30%,
    rgba(230,209,163,0.85) 45%,
    rgba(212,184,120,0.6) 60%,
    rgba(201,169,110,0.4) 75%,
    rgba(180,150,90,0.15) 100%) !important;
  z-index:10 !important;
  border-radius:16px 16px 0 0 !important;
  pointer-events:none !important;
}

/* ex-card (standard) — same treatment */
.ex-card{
  background:rgba(6,6,8,0.99) !important;
  border:1.5px solid rgba(201,169,110,0.15) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  position:relative !important;
  box-shadow:0 8px 32px rgba(0,0,0,0.5) !important;
}
.ex-card::before{
  content:'' !important;
  position:absolute !important;
  top:0 !important; left:0 !important; right:0 !important;
  height:2px !important;
  background:linear-gradient(90deg,
    rgba(140,115,65,0.15) 0%,
    rgba(180,150,90,0.5) 15%,
    rgba(201,169,110,0.7) 30%,
    rgba(230,209,163,0.85) 45%,
    rgba(212,184,120,0.6) 60%,
    rgba(201,169,110,0.4) 75%,
    rgba(180,150,90,0.15) 100%) !important;
  z-index:10 !important;
  border-radius:16px 16px 0 0 !important;
  pointer-events:none !important;
}

/* superset-combined-card — same treatment */
.superset-combined-card{
  background:rgba(6,6,8,0.99) !important;
  border:1.5px solid rgba(201,169,110,0.15) !important;
  border-radius:16px !important;
  box-shadow:0 8px 32px rgba(0,0,0,0.5) !important;
  overflow:hidden !important;
  position:relative !important;
}
.superset-combined-card::before{
  content:'' !important;
  position:absolute !important;
  top:0 !important; left:0 !important; right:0 !important;
  height:2px !important;
  background:linear-gradient(90deg,
    rgba(140,115,65,0.15) 0%,
    rgba(180,150,90,0.5) 15%,
    rgba(201,169,110,0.7) 30%,
    rgba(230,209,163,0.85) 45%,
    rgba(212,184,120,0.6) 60%,
    rgba(201,169,110,0.4) 75%,
    rgba(180,150,90,0.15) 100%) !important;
  z-index:10 !important;
  border-radius:16px 16px 0 0 !important;
  pointer-events:none !important;
}
body.light-mode .superset-combined-card{
  background:#fff !important;
  border-color:rgba(180,145,70,0.12) !important;
  box-shadow:0 4px 16px rgba(0,0,0,0.06) !important;
}

/* Hero image area — cinematic + gold bottom edge */
.sc-hero-bg{
  border-radius:14px 14px 0 0 !important;
}
.sc-hero-overlay{
  background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.6) 100%) !important;
}
/* Gold hairline at bottom of hero */
.sc-hero-bg::after{
  content:'' !important;
  position:absolute !important;
  bottom:0 !important; left:12px !important; right:12px !important;
  height:1px !important;
  background:linear-gradient(90deg,
    transparent,
    rgba(201,169,110,0.3) 25%,
    rgba(230,209,163,0.4) 50%,
    rgba(201,169,110,0.3) 75%,
    transparent) !important;
  z-index:2 !important;
}

/* Round cards — gold top separator between sets */
.sc-round-card + .sc-round-card{
  border-top:none !important;
  margin-top:0 !important;
  padding-top:0 !important;
  position:relative !important;
}
.sc-round-card + .sc-round-card::before{
  content:'' !important;
  display:block !important;
  height:1px !important;
  margin:4px 12px 6px !important;
  background:linear-gradient(90deg,
    transparent 5%,
    rgba(201,169,110,0.12) 30%,
    rgba(230,209,163,0.18) 50%,
    rgba(201,169,110,0.12) 70%,
    transparent 95%) !important;
}

/* Set/Superset labels — refined */
.sc-round-num{
  color:rgba(255,255,255,0.5) !important;
}

/* Stepper buttons — dark with subtle gold border */
.sc-step{
  background:rgba(255,255,255,0.03) !important;
  border:1px solid rgba(201,169,110,0.1) !important;
  border-radius:8px !important;
}
.sc-step:active{
  background:rgba(201,169,110,0.1) !important;
  border-color:rgba(201,169,110,0.25) !important;
}
.sc-step svg{
  stroke:rgba(255,255,255,0.45) !important;
}

/* Input fields — recessed dark with gold hint */
.sc-input-wrap{
  background:rgba(0,0,0,0.3) !important;
  border:1px solid rgba(201,169,110,0.08) !important;
  border-radius:10px !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.2) inset !important;
}
body.light-mode .sc-input-wrap{
  background:rgba(0,0,0,0.02) !important;
  border-color:rgba(180,145,70,0.08) !important;
}

/* LB/KG toggle — gold active state */
.sc-unit-opt.sc-unit-on{
  color:#fff !important;
  background:rgba(201,169,110,0.2) !important;
}

/* Superset letter badges — keep purple but darker bg */
.sc-round-letter{
  background:rgba(162,100,190,0.1) !important;
  border:1px solid rgba(162,100,190,0.15) !important;
}

/* Exercise circles in detail header — gold selected ring */
.ex-detail-circle.active{
  border-color:rgba(201,169,110,0.4) !important;
  box-shadow:0 0 8px rgba(201,169,110,0.1) !important;
}
.edc-ring-fill{
  stroke:rgba(201,169,110,0.5) !important;
}

/* Dock bar — true black with gold top edge */
.dock-bar{
  background:rgba(6,6,8,0.98) !important;
  border-top:1px solid rgba(201,169,110,0.08) !important;
}

/* Banner timer text */
.banner-timer-val{
  font-variant-numeric:tabular-nums !important;
}

/* ═══ END FIZZEEK BRAND — EXPANDED CARDS ═══ */

/* ═══ INLINE STEPPER SYSTEM ═══ */

/* Hide floating timer — replaced by banner timer */
.floating-status-bar{
  display:none !important;
}

/* Progress bar — hidden by default, shown on idle/change */
.banner-progress-bar{
  opacity:0 !important;
  transition:opacity 0.5s ease !important;
  pointer-events:none !important;
}
.banner-progress-bar.bp-visible{
  opacity:1 !important;
}

/* Video play button — centered on card image */
.bex-video-btn{
  position:absolute !important;
  top:50% !important; left:50% !important;
  transform:translate(-50%, -50%) !important;
  z-index:4 !important;
  width:40px !important; height:40px !important;
  border-radius:50% !important;
  border:none !important;
  background:rgba(0,0,0,0.5) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:transform 0.15s ease, background 0.15s ease !important;
}
.bex-video-btn svg{
  width:18px !important; height:18px !important;
  fill:rgba(255,255,255,0.8) !important;
  margin-left:2px !important;
}
.bex-video-btn:active{
  transform:translate(-50%, -50%) scale(0.9) !important;
  background:rgba(255,255,255,0.15) !important;
}
/* Hide video btn when expanded — steppers take over */
.bex-expanded .bex-video-btn{
  opacity:0 !important;
  pointer-events:none !important;
}

/* Per-exercise timer inside stepper area */
.bex-ex-timer{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:10px 14px 4px !important;
  color:rgba(255,255,255,0.3) !important;
  font-size:15px !important;
  font-weight:700 !important;
  font-variant-numeric:tabular-nums !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
}
/* Compact variant inside nav row */
.bex-ex-timer-compact {
  padding: 0 0 0 2px !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
  font-size: 13px !important;
}
.bex-ex-timer-compact .bex-timer-icon { width: 12px !important; height: 12px !important; }
.bex-ex-timer-compact .bex-ex-timer-val { min-width: 32px !important; font-size: 12px !important; }
.bex-ex-timer-compact .bex-timer-btn { width: 30px !important; height: 30px !important; }
.bex-ex-timer-compact .bex-timer-reset { display: none !important; } /* hide reset in compact mode */
.bex-timer-icon{
  width:15px !important; height:15px !important;
  stroke:rgba(255,255,255,0.25) !important;
  flex-shrink:0 !important;
}
.bex-ex-timer-val{
  min-width:38px !important;
  text-align:center !important;
}
.bex-timer-btn{
  width:34px !important; height:34px !important;
  border-radius:50% !important;
  border:1.5px solid rgba(255,255,255,0.08) !important;
  background:rgba(255,255,255,0.05) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  color:rgba(255,255,255,0.35) !important;
  flex-shrink:0 !important;
  padding:0 !important;
  transition:background 0.12s, border-color 0.12s, color 0.12s !important;
}
.bex-timer-play svg{ width:13px !important; height:13px !important; }
.bex-timer-reset svg{ width:13px !important; height:13px !important; stroke:rgba(255,255,255,0.3) !important; stroke-width:2 !important; }
.bex-timer-btn:active{ background:rgba(217,184,120,0.15) !important; border-color:rgba(217,184,120,0.3) !important; color:#D9B878 !important; transform:scale(0.88) !important; }
/* has time but paused/stopped → gold */
.bex-ex-timer.is-live{
  color:#D9B878 !important;
}
.bex-ex-timer.is-live .bex-timer-icon{
  stroke:#D9B878 !important;
}
/* actively running → green overrides gold */
.bex-ex-timer.is-running{
  color:#34D399 !important;
}
.bex-ex-timer.is-running .bex-timer-icon{
  stroke:#34D399 !important;
}
/* Running → green pause button */
.bex-ex-timer.is-running .bex-timer-play{
  border-color:rgba(52,211,153,0.35) !important;
  background:rgba(52,211,153,0.14) !important;
  color:#34D399 !important;
  animation: none !important;
}
/* Paused/live → gold pulsing play button */
.bex-ex-timer.is-live:not(.is-running) .bex-timer-play{
  border-color:rgba(217,184,120,0.45) !important;
  background:rgba(217,184,120,0.12) !important;
  color:#D9B878 !important;
  animation: bexBtnPulse 1.6s ease-in-out infinite !important;
}
@keyframes bexBtnPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(217,184,120,0); }
  50%     { box-shadow: 0 0 0 5px rgba(217,184,120,0.25); }
}
body.light-mode .bex-ex-timer{ color:rgba(0,0,0,0.25) !important; }
body.light-mode .bex-timer-icon{ stroke:rgba(0,0,0,0.5) !important; }
body.light-mode .bex-timer-btn{ border-color:rgba(0,0,0,0.08) !important; background:rgba(0,0,0,0.03) !important; color:rgba(0,0,0,0.6) !important; }

/* Wrapper — holds card + stepper area together */
.bex-card-wrapper{
  scroll-margin-top:68px;
  position:relative !important;
}

/* Expand button — down arrow, rotates to up when open */
.bex-expand-btn{
  position:absolute !important;
  top:8px !important; right:8px !important;
  z-index:4 !important;
  width:30px !important; height:30px !important;
  border-radius:8px !important;
  border:none !important;
  background:rgba(0,0,0,0.4) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
}
.bex-expand-btn svg{
  width:18px !important; height:18px !important;
  stroke:rgba(255,255,255,0.55) !important;
  transition:transform 0.3s ease !important;
}
.bex-expand-btn.is-open svg{
  transform:rotate(180deg) !important;
}
.bex-expand-btn.is-open{
  background:rgba(201,169,110,0.15) !important;
}

/* Stepper area — slides open below card */
.bex-stepper-area{
  max-height:0;
  overflow:hidden !important;
  transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.2s ease, padding 0.2s ease !important;
  background:rgba(6,6,8,0.99) !important;
  border:1px solid transparent !important;
  border-top:none !important;
  border-radius:0 0 16px 16px !important;
  margin-top:-1px !important;
  padding:0 !important;
}
/* When open — show border and padding */
.bex-inline-open .bex-stepper-area{
  border-color:rgba(201,169,110,0.1) !important;
  border-top:none !important;
}
/* When stepper is open, card bottom radius goes flat */
.bex-inline-open .banner-ex-card{
  border-radius:16px 16px 0 0 !important;
}

/* Set dots — navigation */
.bex-set-dots{
  display:flex !important;
  justify-content:center !important;
  gap:6px !important;
  padding:10px 12px 6px !important;
}
.bex-set-dot{
  width:28px !important; height:28px !important;
  border-radius:50% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:12px !important; font-weight:700 !important;
  color:rgba(255,255,255,0.3) !important;
  background:rgba(255,255,255,0.03) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  cursor:pointer !important;
  transition:all 0.2s ease !important;
}
.bex-set-dot.active{
  color:#fff !important;
  background:rgba(201,169,110,0.15) !important;
  border-color:rgba(201,169,110,0.4) !important;
}

/* Set carousel */
.bex-set-carousel{
  overflow:hidden !important;
  position:relative !important;
}
.bex-set-track{
  display:flex !important;
  will-change:transform !important;
}
.bex-set-slide{
  min-width:100% !important;
  flex-shrink:0 !important;
  padding:8px 14px 14px !important;
}

/* Set label */
.bex-set-label{
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,0.3) !important;
  margin-bottom:8px !important;
  text-align:center !important;
}

/* Superset exercise row inside set */
.bex-set-ex-row{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-top:12px !important;
  margin-bottom:6px !important;
  padding-top:12px !important;
  border-top:1px solid rgba(255,255,255,0.07) !important;
}
.bex-set-ex-row:first-of-type {
  margin-top:4px !important;
  padding-top:0 !important;
  border-top:none !important;
}
.bex-set-letter{
  width:26px !important; height:26px !important;
  border-radius:8px !important;
  background:rgba(162,100,190,0.15) !important;
  border:1px solid rgba(162,100,190,0.25) !important;
  color:rgba(162,100,190,0.90) !important;
  font-size:12px !important; font-weight:900 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  flex-shrink:0 !important;
}
.bex-set-ex-name{
  font-size:clamp(12px, 3.5vw, 14px) !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.82) !important;
}

/* Input row */
.bex-set-inputs{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:10px !important;
  margin-bottom:8px !important;
}
.bex-input-group{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:5px !important;
}
/* kill old absolute-positioned box */
.bex-input-box{ display:contents !important; }
.bex-input-label{
  position:static !important;
  font-size:10px !important; font-weight:800 !important;
  letter-spacing:1.2px !important;
  color:rgba(255,255,255,0.28) !important;
  text-transform:uppercase !important;
  pointer-events:none !important;
  white-space:nowrap !important;
}
/* Horizontal stepper row */
.bex-stepper-row{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
}
.bex-input{
  width:68px !important; height:48px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,0.04) !important;
  border:1.5px solid rgba(255,255,255,0.08) !important;
  color:#fff !important;
  font-size:22px !important; font-weight:800 !important;
  text-align:center !important;
  padding:0 !important;
  font-variant-numeric:tabular-nums !important;
  box-shadow:none !important;
}
.bex-input.zero-value{ color:rgba(255,255,255,0.2) !important; }
.bex-input-x{
  font-size:15px !important;
  color:rgba(255,255,255,0.18) !important;
  font-weight:700 !important;
  margin:0 !important;
  align-self:center !important;
  padding-bottom:8px !important;
}

/* Step buttons — horizontal − and + */
.bex-step{
  width:38px !important; height:48px !important;
  min-width:38px !important;
  border-radius:10px !important;
  border:1.5px solid rgba(255,255,255,0.07) !important;
  background:rgba(255,255,255,0.04) !important;
  color:rgba(255,255,255,0.35) !important;
  font-size:22px !important; font-weight:300 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:background 0.1s, border-color 0.1s, color 0.1s !important;
  flex-shrink:0 !important;
  padding:0 !important;
  line-height:1 !important;
}
.bex-step.bex-step-plus{
  color:rgba(217,184,120,0.6) !important;
  border-color:rgba(217,184,120,0.12) !important;
}
.bex-step:active{
  background:rgba(217,184,120,0.14) !important;
  border-color:rgba(217,184,120,0.35) !important;
  color:#D9B878 !important;
  transform:scale(0.90) !important;
}
/* kill old svg rules — no SVGs any more */
.bex-step svg{ display:none !important; }

/* ═══ END INLINE STEPPER SYSTEM ═══ */

/* ═══ BANNER HEADER MUSCLE BACKGROUND ═══ */

/* Banner header — muscle image as background */
.banner-header-row{
  background-size:contain !important;
  background-position:right center !important;
  background-repeat:no-repeat !important;
  position:relative !important;
  overflow:hidden !important;
  padding:14px 16px 10px !important;
  margin-bottom:5px !important;
  min-height:80px !important;
}
/* Gradient overlay for text readability — dark left fading to clear right */
.banner-header-row::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(90deg,
    rgba(6,6,8,0.95) 0%,
    rgba(6,6,8,0.85) 40%,
    rgba(6,6,8,0.4) 70%,
    rgba(6,6,8,0.15) 100%) !important;
  z-index:0 !important;
  pointer-events:none !important;
}
/* Ensure text sits above overlay */
.banner-header-left{
  position:relative !important;
  z-index:1 !important;
}

/* Hide standalone muscle image — now part of header background */
.workout-banner-img{
  display:none !important;
}

/* Center the stats row */
.banner-stats-row{
  justify-content:center !important;
  flex-wrap:wrap !important;
}

/* Gold hairline under header sits above the overlay */
.banner-header-row::after{
  z-index:1 !important;
}

/* ═══ END BANNER HEADER MUSCLE BACKGROUND ═══ */

/* ═══ BATCH 10 FIXES ═══ */

/* 1. List icon next to day name */
.banner-day-list-icon{
  width:14px !important; height:14px !important;
  stroke:rgba(255,255,255,0.35) !important;
  vertical-align:middle !important;
  margin-left:6px !important;
  position:relative !important;
  top:-1px !important;
}
.workout-banner-day{
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
}
.workout-banner-day:active{
  opacity:0.6 !important;
}

/* 2. Zzz button — flat, no box */
#bannerZzzBtn{
  background:none !important;
  border:none !important;
  padding:0 2px !important;
  border-radius:0 !important;
}
#bannerZzzBtn::before{
  display:none !important;
}

/* 3/4/5. Tappable stat buttons */
.banner-stat-tappable{
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
}
.banner-stat-tappable:active{
  opacity:0.5 !important;
}

/* 7. Progress ring — FIX: use class on the bar wrapper, ensure visibility */
.banner-progress-bar{
  height:3px !important;
  background:rgba(255,255,255,0.04) !important;
  border-radius:2px !important;
  margin:8px 0 4px !important;
  overflow:hidden !important;
  opacity:0 !important;
  transition:opacity 0.4s ease !important;
}
.banner-progress-bar.bp-visible{
  opacity:1 !important;
}

/* 8. Card name tappable to collapse */
.bex-name{
  cursor:pointer !important;
}

/* 10. Legend — force single row */
.calendar-legend{
  flex-wrap:nowrap !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  gap:10px !important;
  padding:5px 12px !important;
}
.calendar-legend-item{
  font-size:8px !important;
  letter-spacing:1px !important;
  gap:4px !important;
  flex-shrink:0 !important;
}

/* Day selector — full screen, no gaps, visible X */
.day-selector-overlay{
  border-radius:0 !important;
}
.day-selector-panel{
  border-radius:0 !important;
  max-height:100dvh !important;
  height:100dvh !important;
  margin:0 !important;
}
.day-selector-close{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  z-index:10 !important;
  width:36px !important; height:36px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,0.08) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.day-selector-close svg{
  stroke:rgba(255,255,255,0.6) !important;
}

/* Fizz modal styles */
.fizz-modal-overlay{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  background:rgba(0,0,0,0.6) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px !important;
}
.fizz-modal-card{
  background:rgba(12,12,16,0.98) !important;
  border:1px solid rgba(201,169,110,0.15) !important;
  border-radius:16px !important;
  padding:20px !important;
  max-width:340px !important;
  width:100% !important;
  max-height:70vh !important;
  overflow-y:auto !important;
}
.fizz-modal-title{
  font-size:16px !important;
  font-weight:700 !important;
  color:#fff !important;
  letter-spacing:1px !important;
  margin-bottom:14px !important;
  text-align:center !important;
}
.fizz-modal-msg{
  font-size:13px !important;
  color:rgba(255,255,255,0.6) !important;
  line-height:1.5 !important;
  text-align:center !important;
  margin-bottom:16px !important;
}
.fizz-modal-close{
  display:block !important;
  width:100% !important;
  padding:12px !important;
  border-radius:10px !important;
  border:none !important;
  background:rgba(255,255,255,0.06) !important;
  color:rgba(255,255,255,0.7) !important;
  font-size:14px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  margin-top:12px !important;
}
.fizz-checklist-row{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:10px 8px !important;
  border-bottom:1px solid rgba(255,255,255,0.04) !important;
}
.fizz-checklist-row.done{
  opacity:0.5 !important;
}
.fizz-cl-num{
  font-size:12px !important; font-weight:700 !important;
  color:rgba(255,255,255,0.3) !important;
  width:20px !important; text-align:center !important;
}
.fizz-cl-check{
  width:20px !important; text-align:center !important;
  color:#34D399 !important; font-size:14px !important;
}
.fizz-cl-name{
  flex:1 !important; font-size:13px !important;
  color:rgba(255,255,255,0.8) !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
.fizz-cl-sets{
  font-size:12px !important; font-weight:700 !important;
  color:rgba(255,255,255,0.4) !important;
}
.fizz-pr-row{
  display:flex !important; align-items:center !important;
  justify-content:space-between !important;
  padding:10px 8px !important;
  border-bottom:1px solid rgba(255,255,255,0.04) !important;
}
.fizz-pr-name{
  font-size:13px !important; color:rgba(255,255,255,0.8) !important;
}
.fizz-pr-badge{
  font-size:10px !important; font-weight:800 !important;
  color:rgba(212,184,120,0.9) !important;
  letter-spacing:1px !important;
}
.fizz-pr-empty{
  text-align:center !important;
  color:rgba(255,255,255,0.3) !important;
  font-size:13px !important;
  padding:20px 0 !important;
}

/* ═══ END BATCH 10 FIXES ═══ */

/* ═══ DOCK BAR LABELS FIX ═══ */
.bottom-menu-bar{
  padding:6px 6px calc(4px + env(safe-area-inset-bottom)) 6px !important;
  align-items:flex-end !important;
}
.bottom-menu-bar .dock-btn{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  padding:4px 8px 2px !important;
  min-width:0 !important;
  flex:1 !important;
}
.bottom-menu-bar .dock-btn svg{
  width:24px !important;
  height:24px !important;
}
.dock-label{
  font-size:9px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.3) !important;
  letter-spacing:0.3px !important;
  white-space:nowrap !important;
  line-height:1 !important;
}
body.light-mode .dock-label{
  color:rgba(0,0,0,0.6) !important;
}
/* ═══ END DOCK BAR LABELS FIX ═══ */

/* ══ END VISUAL POLISH ══ */

/* ═══ IMAGE BACKGROUND CARDS ═══ */
.banner-ex-card{
  background-size:cover !important;
  background-position:right 30% !important;
  background-repeat:no-repeat !important;
  position:relative !important;
  overflow:hidden !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:stretch !important;
  padding:0 !important;
  border:none !important;
  border-radius:16px !important;
  gap:0 !important;
}
/* Expanded — restore the full image height */

.banner-ex-card:active{
  transform:scale(0.98) !important;
}

/* Overlay — lighter so image shows through more */
.bex-bg-overlay{
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(135deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.2) 50%,
    rgba(0,0,0,0.08) 100%) !important;
  z-index:1 !important;
  pointer-events:none;
  border-radius:inherit;
}
body.light-mode .bex-bg-overlay{
  background:linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%) !important;
}

/* Hide old elements */
.bex-img-col{ display:none !important; }
.bex-top-row{ display:contents !important; }
.bex-chevron{ display:none !important; }
.bex-progress{ display:none !important; }
.bex-status{ display:none !important; }
.bex-right-col{ display:none !important; }

/* ── Left icons column: number + check + trophy ── */
.bex-left-col{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  padding:6px 0 6px 10px;
  flex-shrink:0;
  width:36px;
}

/* Big number — no circle */
.bex-num-big{
  font-size:22px;
  font-weight:900;
  color:#fff;
  line-height:1;
  text-shadow:0 1px 6px rgba(0,0,0,0.8), 0 0 2px rgba(0,0,0,0.5);
}

/* Checkmark icon */
.bex-check-icon{
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.bex-check-icon svg{
  width:16px; height:16px;
  stroke:rgba(255,255,255,0.25);
}
.bex-check-icon.lit svg{
  stroke:#34D399;
  filter:drop-shadow(0 0 4px rgba(52,211,153,0.4));
}

/* Trophy icon */
.bex-trophy-icon{
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.bex-trophy-icon svg{
  width:16px; height:16px;
  stroke:rgba(255,255,255,0.25);
}
.bex-trophy-icon.lit svg{
  stroke:#D4A843;
  fill:rgba(212,168,67,0.15);
  filter:drop-shadow(0 0 4px rgba(212,168,67,0.4));
}

/* ── Info column — overlaid on full image, pinned to bottom ── */
.banner-ex-card .bex-info{
  position:relative !important;
  z-index:2 !important;
  padding:10px 10px 12px 6px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  flex:1 !important;
  min-width:0 !important;
  justify-content:flex-end !important;
}

/* Text — bright white over image */
.banner-ex-card .bex-name{
  color:#fff !important;
  font-size:15px !important;
  font-weight:800 !important;
  text-shadow:0 1px 6px rgba(0,0,0,0.8), 0 0 2px rgba(0,0,0,0.5) !important;
  line-height:1.2 !important;
}
.banner-ex-card .bex-chip,
.banner-ex-card .bex-est-time,
.banner-ex-card .bex-chip svg{
  color:#fff !important;
  font-size:11px !important;
  text-shadow:0 1px 4px rgba(0,0,0,0.7) !important;
}
.banner-ex-card .bex-chip-sep{
  background:rgba(255,255,255,0.4) !important;
}
.banner-ex-card .bex-type-tag{
  color:#B580D4 !important;
  text-shadow:0 1px 4px rgba(0,0,0,0.6) !important;
}
.banner-ex-card .bex-best-label{
  color:#fff !important;
  font-size:11px !important;
  text-shadow:0 1px 4px rgba(0,0,0,0.6) !important;
}
.banner-ex-card .bex-best-val{
  color:#fff !important;
  font-size:12px !important;
  font-weight:700 !important;
  text-shadow:0 1px 4px rgba(0,0,0,0.7) !important;
}
/* Only apply old banner-ex-card pr-target color to the OLD collapsed card display */
.banner-ex-card > .bex-card-hdr .bex-pr-target,
.banner-ex-card > .bex-card-body .bex-pr-target:not([id]) {
  color:#D4A843 !important;
  font-size:11px !important;
  font-weight:700 !important;
  text-shadow:0 1px 4px rgba(0,0,0,0.6) !important;
}
.banner-ex-card .bex-pr-target.lit{
  color:#D4A843 !important;
  text-shadow:0 0 8px rgba(212,168,67,0.4), 0 1px 4px rgba(0,0,0,0.6) !important;
}
.banner-ex-card .bex-sets-count{
  color:#fff !important;
  font-size:10px !important;
  text-shadow:0 1px 3px rgba(0,0,0,0.6) !important;
}

/* Muscle badge — floating bottom-right, more visible */
.banner-ex-card .bex-muscle-badge{
  position:absolute !important;
  bottom:8px !important;
  right:8px !important;
  top:auto !important;
  left:auto !important;
  width:44px !important;
  height:44px !important;
  z-index:3 !important;
  border-radius:10px !important;
  background:rgba(0,0,0,0.55) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  border:1px solid rgba(255,255,255,0.15) !important;
  overflow:hidden !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.4) !important;
}
.banner-ex-card .bex-muscle-badge img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  filter:brightness(1.3) !important;
}

/* Light mode — same since bg image always dark */
body.light-mode .banner-ex-card .bex-name,
body.light-mode .banner-ex-card .bex-best-val,
body.light-mode .banner-ex-card .bex-best-label,
body.light-mode .banner-ex-card .bex-sets-count{
  color:#fff !important;
}
body.light-mode .banner-ex-card .bex-chip{
  color:#fff !important;
}
body.light-mode .banner-ex-card .bex-num-big{
  color:#fff !important;
}
body.light-mode .banner-ex-card .bex-pr-target{
  color:#D4A843 !important;
}
body.light-mode .bex-check-icon svg{ stroke:rgba(255,255,255,0.25); }
body.light-mode .bex-check-icon.lit svg{ stroke:#34D399; }
body.light-mode .bex-trophy-icon svg{ stroke:rgba(255,255,255,0.25); }
body.light-mode .bex-trophy-icon.lit svg{ stroke:#D4A843; fill:rgba(212,168,67,0.15); }
/* ═══ END IMAGE BACKGROUND CARDS ═══ */

/* ═══ EXPANDED CARD HERO IMAGE ═══ */
.sc-hero-bg{
  position:relative !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  border-radius:14px 14px 0 0 !important;
  overflow:hidden !important;
  min-height:140px !important;
}
.sc-hero-overlay{
  position:absolute !important;
  inset:0 !important;
  background:rgba(0,0,0,0.4) !important;
  z-index:0 !important;
  pointer-events:none;
  border-radius:inherit;
}
.sc-hero-bg .sc-info-block{
  position:relative !important;
  z-index:1 !important;
}
/* Exercise name — bright white over image */
.sc-hero-bg .sc-ex-name{
  color:#fff !important;
  font-size:20px !important;
  font-weight:900 !important;
  text-shadow:0 1px 6px rgba(0,0,0,0.7), 0 0 2px rgba(0,0,0,0.4) !important;
}
/* PR info */
.sc-hero-bg .sc-pr-label{
  color:rgba(255,255,255,0.7) !important;
  text-shadow:0 1px 3px rgba(0,0,0,0.5) !important;
}
.sc-hero-bg .sc-pr-val{
  color:#D4A843 !important;
  text-shadow:0 1px 3px rgba(0,0,0,0.5) !important;
}
.sc-hero-bg .sc-trophy{
  stroke:rgba(255,255,255,0.5) !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4)) !important;
}
/* Timer */
.sc-hero-bg .sc-card-timer{
  color:#fff !important;
  text-shadow:0 1px 3px rgba(0,0,0,0.5) !important;
}
.sc-hero-bg .sc-card-timer svg{
  stroke:#fff !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4)) !important;
}
.sc-hero-bg .sc-card-timer-val{
  color:#fff !important;
  text-shadow:0 1px 3px rgba(0,0,0,0.5) !important;
}
.sc-hero-bg .sc-timer-btn{
  background:rgba(255,255,255,0.12) !important;
  border-color:rgba(255,255,255,0.15) !important;
}
.sc-hero-bg .sc-timer-btn svg{
  stroke:#fff !important;
}
/* Superset letters */
.sc-hero-bg .sc-letter{
  color:#B580D4 !important;
  text-shadow:0 1px 3px rgba(0,0,0,0.5) !important;
}
.sc-hero-bg .sc-ex-line1 .sc-ex-name{
  color:#fff !important;
  text-shadow:0 1px 4px rgba(0,0,0,0.6) !important;
}
/* Play button — centered, prominent */
.sc-hero-play-btn{
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,0.2) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  border:1px solid rgba(255,255,255,0.2) !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.3) !important;
  flex-shrink:0 !important;
}
.sc-hero-play-btn svg{
  width:22px !important;
  height:22px !important;
}
.sc-hero-play-btn:active{
  background:rgba(255,255,255,0.35) !important;
  transform:scale(0.92) !important;
}
/* Muscle image in hero — frosted glass badge */
.sc-hero-bg .sc-ex-img{
  background:rgba(0,0,0,0.4) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  border-radius:10px !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.3) !important;
  filter:brightness(1.3) !important;
}
/* Hide old video thumbnail in hero */
.sc-hero-bg .sc-video-sq{
  display:none !important;
}
/* Summary button in hero */
.sc-hero-bg .sc-summary-btn{
  background:rgba(255,255,255,0.1) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.15) !important;
}
.sc-hero-bg .sc-summary-btn svg{
  stroke:#fff !important;
}
/* Goal label if inside hero */
.sc-hero-bg + .sc-goal-label,
.sc-hero-bg ~ .sc-goal-label{
  color:rgba(255,255,255,0.6) !important;
}

/* Light mode — same treatment */
body.light-mode .sc-hero-bg .sc-ex-name{ color:#fff !important; }
body.light-mode .sc-hero-bg .sc-pr-label{ color:rgba(255,255,255,0.7) !important; }
body.light-mode .sc-hero-bg .sc-card-timer{ color:#fff !important; }
body.light-mode .sc-hero-bg .sc-card-timer-val{ color:#fff !important; }
/* ═══ END EXPANDED CARD HERO IMAGE ═══ */

/* ═══ THEME SYSTEM ═══ */
/* Theme picker in settings */
.settings-item-label{
  font-size:11px; font-weight:700; color:rgba(255,255,255,0.4);
  text-transform:uppercase; letter-spacing:1.5px;
  padding:8px 16px 6px;
}
body.light-mode .settings-item-label{ color:rgba(0,0,0,0.35); }
.settings-theme-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; padding:4px 16px 12px;
}
.settings-theme-card{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px; border-radius:14px; cursor:pointer;
  border:2px solid transparent;
  transition:all 0.2s ease;
  -webkit-tap-highlight-color:transparent;
}
.settings-theme-card:active{ transform:scale(0.96); }
.settings-theme-card.active{
  border-color:rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.04);
}
body.light-mode .settings-theme-card.active{
  border-color:rgba(0,0,0,0.55);
  background:rgba(0,0,0,0.03);
}
.settings-theme-preview{
  width:100%; height:56px; border-radius:10px;
  box-shadow:inset 0 0 20px rgba(0,0,0,0.3);
}
.settings-theme-card span{
  font-size:12px; font-weight:700; color:rgba(255,255,255,0.7);
}
body.light-mode .settings-theme-card span{ color:rgba(0,0,0,0.6); }

/* ── Theme body gradients ── */
body.theme-space{ background:radial-gradient(ellipse at 50% 0%, #0d0a18 0%, #060410 35%, #020208 100%) !important; }
body.theme-forest{ background:radial-gradient(ellipse at 50% 0%, #0a1f0a 0%, #061208 35%, #020804 100%) !important; }
body.theme-lava{ background:radial-gradient(ellipse at 50% 0%, #2a0a0a 0%, #1a0404 35%, #0a0202 100%) !important; }
body.theme-ocean{ background:radial-gradient(ellipse at 50% 0%, #0a1525 0%, #040c18 35%, #020610 100%) !important; }

/* Light mode theme gradients */
body.light-mode.theme-space{ background:radial-gradient(ellipse at 50% 0%, #e2dfe8 0%, #d8d5de 35%, #d0cdd6 100%) !important; }
body.light-mode.theme-forest{ background:radial-gradient(ellipse at 50% 0%, #d8e8d8 0%, #cddece 35%, #c4d6c4 100%) !important; }
body.light-mode.theme-lava{ background:radial-gradient(ellipse at 50% 0%, #eadad8 0%, #ded0ce 35%, #d6c8c6 100%) !important; }
body.light-mode.theme-ocean{ background:radial-gradient(ellipse at 50% 0%, #d8e0ea 0%, #ced6e0 35%, #c6ced8 100%) !important; }
/* ═══ END THEME SYSTEM ═══ */

/* ═══ TRANSPARENT CARDS — space shows through ═══ */

/* Banner exercise cards */
.banner-ex-card{
  background-color:rgba(255,255,255,0.015) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
body.light-mode .banner-ex-card{
  background-color:rgba(0,0,0,0.015) !important;
}

/* Detail screen — semi-transparent */
.ex-detail-screen{
  background:rgba(4,4,8,0.92) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}
body.light-mode .ex-detail-screen{
  background:rgba(242,242,242,0.95) !important;
}

/* Detail header */
.ex-detail-header{
  background:rgba(10,10,14,0.8) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
}
body.light-mode .ex-detail-header{
  background:rgba(255,255,255,0.85) !important;
}

/* Duration popup */
.duration-popup{
  background:#101016 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.light-mode .duration-popup{
  background:#fafafc !important;
}

/* Recap modal */
.recap-modal{
  background:rgba(14,14,20,0.85) !important;
  backdrop-filter:blur(24px) saturate(1.2) !important;
  -webkit-backdrop-filter:blur(24px) saturate(1.2) !important;
}
body.light-mode .recap-modal{
  background:rgba(255,255,255,0.9) !important;
}

/* ═══ END TRANSPARENT CARDS ═══ */

/* ═══ END SPACE 4 ═══ */

/* ══════════════════════════════════════════════════
   FIZZEEK — HORIZONTAL STEPPER SYSTEM
   [−] [value] [+] per input. 44px+ tap targets.
   Gold accent. Kills old vertical column layout.
   ══════════════════════════════════════════════════ */

/* Kill old vertical column steppers */
.sc-stepper-col { display: none !important; }
.sc-input-wrap { display: none !important; }

/* Outer row containing both input groups */
.sc-round-inputs {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 4px 0 !important;
}

/* Each input column: label + [−][val][+] + optional unit */
.sc-input-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Horizontal stepper row */
.sc-stepper-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Goal label above each input */
.sc-input-goal {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  color: rgba(255,255,255,0.28) !important;
  text-transform: uppercase !important;
  margin-bottom: 0 !important;
  white-space: nowrap !important;
  display: block !important;
}
body.light-mode .sc-input-goal { color: rgba(0,0,0,0.28) !important; }

/* Stepper buttons — min 44px touch target */
.sc-step {
  width: 40px !important;
  height: 48px !important;
  min-width: 40px !important;
  min-height: 44px !important;
  border: 1.5px solid rgba(255,255,255,0.07) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.04) !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 0.1s, border-color 0.1s, color 0.1s, transform 0.08s !important;
  user-select: none !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: rgba(255,255,255,0.4) !important;
}
.sc-step.sc-step-plus {
  color: rgba(217,184,120,0.65) !important;
  border-color: rgba(217,184,120,0.15) !important;
}
.sc-step.sc-step-minus {
  color: rgba(255,255,255,0.3) !important;
}
.sc-step:active,
.sc-step.sc-step-holding {
  background: rgba(217,184,120,0.16) !important;
  border-color: rgba(217,184,120,0.4) !important;
  color: #D9B878 !important;
  transform: scale(0.90) !important;
}
body.light-mode .sc-step {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.07) !important;
  color: rgba(0,0,0,0.6) !important;
}
body.light-mode .sc-step.sc-step-plus {
  color: rgba(160,120,40,0.65) !important;
  border-color: rgba(160,120,40,0.15) !important;
}
body.light-mode .sc-step:active,
body.light-mode .sc-step.sc-step-holding {
  background: rgba(160,120,40,0.12) !important;
  border-color: rgba(160,120,40,0.3) !important;
  color: rgba(160,120,40,0.9) !important;
}

/* Input field */
.sc-input,
.sc-card .set-input {
  width: 68px !important;
  height: 48px !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  text-align: center !important;
  color: #fff !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1.5px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  padding: 0 !important;
  letter-spacing: -0.5px !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
}
.sc-card .set-input.zero-value { color: rgba(255,255,255,0.2) !important; }
.sc-card .set-input.free,
.sc-card .set-input.cable {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
body.light-mode .sc-input,
body.light-mode .sc-card .set-input {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: #111 !important;
}
body.light-mode .sc-card .set-input.zero-value { color: rgba(0,0,0,0.55) !important; }

/* × separator */
.sc-input-x {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.18) !important;
  padding-bottom: 10px !important;
  flex-shrink: 0 !important;
}
body.light-mode .sc-input-x { color: rgba(0,0,0,0.15) !important; }

/* Unit toggle below weight input */
.sc-unit-toggle.sc-unit-stepper { margin-top: 2px !important; }

/* ══ END FIZZEEK HORIZONTAL STEPPERS ══ */

/* ══ CARD COLLAPSE BUTTON + META LINE ══ */
.sc-collapse-btn {
  position: absolute !important;
  top: 10px !important; right: 10px !important;
  width: 32px !important; height: 32px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  z-index: 4 !important;
  padding: 0 !important;
}
.sc-collapse-btn svg { width: 16px !important; height: 16px !important; stroke: rgba(255,255,255,0.45) !important; }
.sc-collapse-btn:active { background: rgba(217,184,120,0.15) !important; }
.sc-info-sections { position: relative !important; cursor: pointer !important; }
.sc-ex-meta-line {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
  margin-top: 4px !important;
}
.sc-goal-label {
  font-size: 11px !important; font-weight: 600 !important;
  color: rgba(255,255,255,0.38) !important;
  letter-spacing: 0.3px !important;
  display: block !important;
}
.sc-tempo-line {
  font-size: 11px !important; font-weight: 500 !important;
  color: rgba(255,255,255,0.25) !important;
  display: block !important;
}
.sc-tempo-val { color: rgba(217,184,120,0.55) !important; font-weight: 700 !important; }
body.light-mode .sc-goal-label { color: rgba(0,0,0,0.6) !important; }
body.light-mode .sc-tempo-line { color: rgba(0,0,0,0.22) !important; }

/* Collapsed card — hide set rows */
.ex-card.sc-card-collapsed .sc-interleaved-table,
.ex-card.sc-card-collapsed .sc-rounds-wrap,
.ex-card.sc-card-collapsed .sc-progress-dots,
.ex-card.sc-card-collapsed .set-dots { display: none !important; }
.ex-card.sc-card-collapsed .sc-info-sections { border-radius: 12px !important; }
/* ══ END CARD COLLAPSE ══ */

/* ══════════════════════════════════════════════════════════════
   FULL-BLEED BANNER REBUILD — one continuous piece
   ══════════════════════════════════════════════════════════════ */

/* Dissolve the card container */
.workout-banner-slide-center{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  gap:0 !important;
}

/* Hero muscle image — full bleed */
.banner-hero-section{
  width:100% !important;
  height:200px !important;
  position:relative !important;
  overflow:hidden !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  display:block !important;
}
.banner-hero-section img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 20% !important;
  opacity:0.88 !important;
  display:block !important;
}
.banner-hero-fade{
  position:absolute !important;
  bottom:0 !important; left:0 !important; right:0 !important;
  height:80px !important;
  background:linear-gradient(to bottom, transparent 0%, rgba(13,10,7,0.95) 100%) !important;
  pointer-events:none !important;
}
body.light-mode .banner-hero-fade{
  background:linear-gradient(to bottom, transparent 0%, #f0ede8 100%) !important;
}

/* Context block — day · title · stats */
.banner-context{
  padding:4px 16px 8px !important;
  position:relative !important;
}
/* Muscle diagram — floating right in context area */
#workoutBannerImg{
  position:relative !important;
}
#workoutBannerImg img{
  object-position:center 15% !important;
}
.banner-context .workout-banner-day{
  font-size:11px !important;
  letter-spacing:2px !important;
  color:rgba(255,255,255,0.3) !important;
  margin-bottom:1px !important;
}
body.light-mode .banner-context .workout-banner-day{
  color:rgba(0,0,0,0.35) !important;
}
.banner-context .workout-banner-title{
  font-size:28px !important;
  font-weight:800 !important;
  letter-spacing:-0.5px !important;
  line-height:1.1 !important;
  margin-bottom:6px !important;
}
.banner-context .banner-stats-row{
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  gap:6px !important;
}

/* Unified action bar */
.banner-unified-bar{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:6px 16px 10px !important;
}
/* Timer chip — left side, always visible */
.banner-unified-bar .banner-timer-row{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:9px 12px !important;
  margin:0 !important;
  border-radius:12px !important;
  flex-shrink:0 !important;
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  min-width:70px !important;
  justify-content:center !important;
}
.banner-unified-bar .banner-timer-row svg{
  width:14px !important; height:14px !important;
  stroke:rgba(255,255,255,0.25) !important;
  flex-shrink:0 !important;
}
.banner-unified-bar .banner-timer-val{
  font-size:14px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,0.4) !important;
  letter-spacing:-0.3px !important;
  font-variant-numeric:tabular-nums !important;
}
.banner-unified-bar .banner-timer-row.paused svg{ stroke:rgba(217,184,120,0.7) !important; }
.banner-unified-bar .banner-timer-row.paused .banner-timer-val{ color:rgba(217,184,120,0.85) !important; }
/* Show green when running (has time + not paused) */
body:not(.timer-paused) .banner-unified-bar .banner-timer-row:not(.paused) .banner-timer-val[data-live="1"]{
  color:#34D399 !important;
}
/* Play button — dominant CTA, fills remaining space */
.banner-unified-bar .banner-play-btn{
  flex:1 !important;
  justify-content:center !important;
  padding:10px 16px !important;
  border-radius:12px !important;
  font-size:13px !important;
  font-weight:700 !important;
}
/* Summary — ghost, fixed right */
.banner-unified-bar .banner-recap-btn{
  flex-shrink:0 !important;
  padding:10px 14px !important;
  border-radius:12px !important;
  font-size:12px !important;
  font-weight:600 !important;
}

/* Progress bar — thin seam between action bar and cards */
.banner-progress-bar{
  display:block !important;
  height:2px !important;
  background:rgba(255,255,255,0.04) !important;
  margin:0 16px !important;
  border-radius:2px !important;
  overflow:hidden !important;
  opacity:1 !important;
}
.banner-progress-fill{
  height:100% !important;
  background:var(--accent-orange, #D4945A) !important;
  border-radius:2px !important;
  transition:width 0.5s ease !important;
  min-width:0 !important;
}
.banner-progress-fill.cable{ background:var(--blue) !important; }

/* Exercise list — tight top, flows from seam */
.banner-exercise-list{
  margin-top:10px !important;
  padding:0 16px 8px !important;
}

/* Kill obsolete header-row background treatment */
.banner-header-row{
  background-image:none !important;
}
.banner-header-row::before{ display:none !important; }
.banner-header-row::after{ display:none !important; }

/* Show old workout-banner-img if it appears as banner-hero-section */
.banner-hero-section.workout-banner-img{ display:block !important; }

/* ══ END FULL-BLEED BANNER REBUILD ══ */


/* ══════════════════════════════════════════════════════════════
   6-POINT ADVANCED UPGRADE BLOCK
   ══════════════════════════════════════════════════════════════ */

/* ── 2. DAY STRIP ARC RINGS ──────────────────────────────── */
.day-ring-wrap{
  position:relative;
  width:36px; height:36px;
  margin:0 auto 4px;
  display:flex; align-items:center; justify-content:center;
}
.day-ring-svg{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  transform:rotate(-90deg);
}
.day-ring-bg{
  fill:none;
  stroke:rgba(255,255,255,0.06);
  stroke-width:2.5;
}
body.light-mode .day-ring-bg{ stroke:rgba(0,0,0,0.07); }
.day-ring-fill{
  fill:none;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke:rgba(255,255,255,0.15);
  transition:stroke-dashoffset 0.6s cubic-bezier(0.32,0.72,0,1), stroke 0.3s ease;
}
.day-ring-fill.free{ stroke:var(--accent-orange); }
.day-ring-fill.cable{ stroke:var(--blue); }
.day-ring-fill.has-pr{ stroke:var(--gold, #D9B878) !important; }
/* Selected day ring glows */
.day-col.selected .day-ring-bg{ stroke:rgba(255,255,255,0.12); }
.day-col.selected .day-ring-fill{ filter:drop-shadow(0 0 4px rgba(212,148,90,0.3)); }
.day-col.selected.completed .day-ring-fill{ filter:drop-shadow(0 0 5px rgba(212,148,90,0.4)); }
body.light-mode .day-col.selected .day-ring-bg{ stroke:rgba(0,0,0,0.55); }
/* Day number sits centered in ring */
.day-ring-wrap .day-number{
  position:relative;
  z-index:1;
  font-size:15px !important;
  margin-bottom:0 !important;
  line-height:1 !important;
}
/* Day letter stays above ring wrap */
.day-col .day-letter{
  margin-bottom:2px;
}
/* Hide old bar — ring replaces it */
.day-bar{ display:none !important; }

/* ── 3. HERO IMAGE — more visible ──────────────────────── */
.banner-hero-section img{
  opacity:0.88 !important;
}

/* ── 5. TRANSITION POLISH ─────────────────────────────── */
/* Card expand/collapse */
.bex-stepper-area{
  transition:max-height 0.38s cubic-bezier(0.32,0.72,0,1),
             border-color 0.2s ease,
             padding 0.2s ease !important;
}
/* Day col selection feel */
.day-col{
  transition:border-color .22s cubic-bezier(0.32,0.72,0,1),
             background .22s cubic-bezier(0.32,0.72,0,1),
             box-shadow .22s cubic-bezier(0.32,0.72,0,1),
             transform .15s ease !important;
}
/* Banner carousel */
.workout-banner-carousel.animating{
  transition:transform 0.3s cubic-bezier(0.32,0.72,0,1),
             opacity 0.22s ease !important;
}
/* Set input focus state */
.sc-input:focus, .sc-card .set-input:focus{
  transition:border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

/* ── 6. TYPOGRAPHY SCALE ───────────────────────────────── */
/* Exercise name — step up 2px, tighter tracking */
.sc-ex-name{
  font-size:19px !important;
  font-weight:800 !important;
  letter-spacing:-0.5px !important;
}
/* Meta line — more readable */
.sc-ex-meta{
  font-size:12px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.38) !important;
}
/* Round label (SET 1, SET 2) — cleaner */
.sc-round-num{
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:1.5px !important;
}
/* Exercise sub-name in set row */
.sc-round-ex-name{
  font-size:13px !important;
  font-weight:700 !important;
}
/* Input goal label */
.sc-input-goal{
  font-size:9px !important;
  font-weight:800 !important;
  letter-spacing:0.6px !important;
}
/* Input value — weight/reps number */
.sc-input, .sc-card .set-input{
  font-size:20px !important;
  font-weight:800 !important;
  letter-spacing:-0.5px !important;
}
/* Bex card name */
.bex-name{
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:-0.2px !important;
}
/* Bex chip (goal/meta) */
.bex-chip{
  font-size:11px !important;
  font-weight:600 !important;
}
/* Workout title in banner */
.banner-context .workout-banner-title{
  font-size:30px !important;
  font-weight:900 !important;
  letter-spacing:-0.8px !important;
}
body.light-mode .sc-ex-meta{ color:rgba(0,0,0,0.38) !important; }

/* ── 7. BOTTOM NAV ACTIVE INDICATOR ─────────────────────── */
.dock-btn.is-active{
  color:var(--accent-orange) !important;
}
.dock-btn.is-active svg{
  color:var(--accent-orange) !important;
  stroke:var(--accent-orange) !important;
}
.dock-btn.is-active::after{
  content:'' !important;
  position:absolute !important;
  bottom:4px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:4px !important; height:4px !important;
  border-radius:50% !important;
  background:var(--accent-orange) !important;
}
.dock-btn{
  position:relative !important;
}
/* Cable week — active dot turns blue */
body.cable-week .dock-btn.is-active,
body.cable-week .dock-btn.is-active svg{
  color:var(--blue) !important;
  stroke:var(--blue) !important;
}
body.cable-week .dock-btn.is-active::after{
  background:var(--blue) !important;
}
body.light-mode .dock-btn.is-active,
body.light-mode .dock-btn.is-active svg{
  color:var(--accent-orange) !important;
}

/* ══ END 6-POINT UPGRADE ══ */


/* ══════════════════════════════════════════════════════════════
   BANNER FULL REDESIGN — advanced, image-forward
   ══════════════════════════════════════════════════════════════ */

/* ── Hero section: taller, cover, person shows fully ── */
.banner-hero-section{
  height:210px !important;
}
.banner-hero-section img{
  object-fit:cover !important;
  object-position:center 15% !important;
  opacity:0.9 !important;
}
.banner-hero-fade{
  height:110px !important;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(10,9,8,0.6) 60%,
    rgba(10,9,8,0.98) 100%) !important;
}

/* ── Day label: uppercase gold accent ── */
.banner-context .workout-banner-day{
  font-size:10px !important;
  letter-spacing:3px !important;
  font-weight:800 !important;
  color:rgba(217,184,120,0.7) !important;
  text-transform:uppercase !important;
  margin-bottom:2px !important;
}
body.light-mode .banner-context .workout-banner-day{
  color:rgba(160,120,40,0.75) !important;
}

/* ── Workout title: huge, tight ── */
.banner-context .workout-banner-title{
  font-size:34px !important;
  font-weight:900 !important;
  letter-spacing:-1.5px !important;
  line-height:1.0 !important;
  margin-bottom:8px !important;
  color:#fff !important;
  text-shadow:0 2px 12px rgba(0,0,0,0.5) !important;
}
body.light-mode .banner-context .workout-banner-title{ color:#111 !important; }

/* ── Stats row: tighter, gold accent on PR ── */
.banner-context .banner-stats-row{
  gap:8px !important;
  align-items:center !important;
}
.banner-stat{
  font-size:12px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.55) !important;
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
}
.banner-stat svg{ width:13px !important; height:13px !important; opacity:0.7 !important; }
.banner-stat-dot{ color:rgba(255,255,255,0.18) !important; font-size:14px !important; }
.banner-pr-count{ color:rgba(217,184,120,0.8) !important; }
.banner-pr-trophy{ width:16px !important; height:16px !important; opacity:0.85 !important; }

/* ── Unified bar: glassy card, heavier weight ── */
.banner-unified-bar{
  padding:8px 16px 12px !important;
  gap:8px !important;
}
.banner-unified-bar .banner-timer-row{
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.09) !important;
  border-radius:12px !important;
  padding:10px 14px !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  min-width:80px !important;
}
.banner-unified-bar .banner-timer-val{
  font-size:15px !important;
  font-weight:900 !important;
  letter-spacing:-0.5px !important;
}
.banner-unified-bar .banner-play-btn{
  background:linear-gradient(135deg, #34D399 0%, #20a875 100%) !important;
  border:none !important;
  border-radius:12px !important;
  font-size:14px !important;
  font-weight:800 !important;
  color:#000 !important;
  padding:11px 16px !important;
  gap:7px !important;
  box-shadow:0 4px 16px rgba(52,211,153,0.25) !important;
}
.banner-unified-bar .banner-play-btn svg{
  stroke:#000 !important; width:16px !important; height:16px !important;
}
.banner-unified-bar .banner-play-btn.cable{
  background:linear-gradient(135deg, #63b3ed 0%, #3a85cc 100%) !important;
  box-shadow:0 4px 16px rgba(99,179,237,0.25) !important;
}
.banner-unified-bar .banner-recap-btn{
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.09) !important;
  border-radius:12px !important;
  color:rgba(255,255,255,0.6) !important;
  font-size:12px !important;
  font-weight:700 !important;
  padding:11px 14px !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  gap:6px !important;
}
.banner-unified-bar .banner-recap-btn svg{
  width:14px !important; height:14px !important; opacity:0.7 !important;
}

/* ── Progress bar: thicker, more visible ── */
.banner-progress-bar{
  height:3px !important;
  margin:0 16px 2px !important;
  border-radius:3px !important;
}
.banner-progress-fill{
  transition:width 0.6s cubic-bezier(0.32,0.72,0,1) !important;
}

/* ── Exercise list: tighter top margin ── */
.banner-exercise-list{
  margin-top:8px !important;
  padding:0 14px 12px !important;
}
.banner-ex-items{ gap:7px !important; }

/* ── Pill card: slightly taller, name brighter ── */
.bex-pill-layer{
  height:52px !important;
  border-radius:14px !important;
}
.bex-pill-name{
  font-size:13px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.88) !important;
  white-space:normal !important;
  -webkit-line-clamp:2 !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.bex-num-badge-num{
  font-size:17px !important;
  font-weight:900 !important;
  color:#fff !important;
  text-shadow:0 1px 6px rgba(0,0,0,0.8) !important;
}
.bex-pill-meta{
  font-size:10px !important;
  color:rgba(255,255,255,0.38) !important;
}

/* ── Expanded card: person clearly visible ── */

.bex-inline-open .bex-name{
  text-shadow:0 1px 8px rgba(0,0,0,0.7) !important;
}
.bex-inline-open .bex-left-col{
  text-shadow:0 1px 6px rgba(0,0,0,0.8) !important;
}

/* ══ END BANNER REDESIGN ══ */


/* ══════════════════════════════════════════════════════════════
   WORKOUT BANNER — full-bleed image card revamp
   ══════════════════════════════════════════════════════════════ */

/* ── Slide container: no bg, no padding ── */
.workout-banner-slide-center{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
}

/* ── Card: full-bleed image, fixed height, rounded ── */
.bnr-card{
  position:relative;
  width:calc(100% - 28px);
  margin:0 14px 10px;
  height:220px;
  border-radius:22px;
  overflow:hidden;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  display:flex;
  flex-direction:column;
}

/* ── Background image ── */
.bnr-img{
  position:absolute;
  right:-4px;
  top:50%;
  transform:translateY(-50%);
  width:48%;
  height:90%;
  object-fit:contain;
  object-position:right center;
  opacity:0.82;
  pointer-events:auto;
}

/* ── Left gradient: darkens left half so text reads cleanly ── */
.bnr-overlay-left{
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,
    rgba(12,10,20,0.97) 0%,
    rgba(12,10,20,0.90) 38%,
    rgba(12,10,20,0.55) 58%,
    rgba(12,10,20,0.15) 72%,
    rgba(12,10,20,0.0) 100%);
  pointer-events:none;
  z-index:1;
}

/* ── Bottom gradient: darkens bottom for action row ── */
.bnr-overlay-bottom{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,
    rgba(8,6,4,0.88) 0%,
    rgba(8,6,4,0.5) 35%,
    rgba(8,6,4,0.0) 65%);
  pointer-events:none;
  z-index:1;
}

/* ── All content sits above overlays ── */
.bnr-top-row,
.bnr-spacer,
.bnr-body{ position:relative; z-index:2; }

/* ── Top row: day + rest button ── */
.bnr-top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 0;
}
.bnr-day{
  font-size:10px;
  font-weight:800;
  letter-spacing:2.5px;
  color:rgba(217,184,120,0.85);
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
}
.bnr-day .banner-day-list-icon{
  width:14px; height:14px;
  opacity:0.55;
}
.bnr-zzz-btn{
  display:flex;
  align-items:center;
  gap:5px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;
  padding:4px 10px 4px 7px;
  color:rgba(255,255,255,0.5);
  font-size:10px;
  font-weight:700;
  letter-spacing:0.3px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.bnr-zzz-btn svg{ width:14px; height:14px; flex-shrink:0; }
.bnr-zzz-btn:active{ background:rgba(255,255,255,0.14); }

/* ── Spacer: pushes body content to bottom ── */
.bnr-spacer{ flex:1; }

/* ── Body: bottom section ── */
.bnr-body{
  padding:0 14px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* ── Title row ── */
.bnr-title-row{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.bnr-title{
  font-size:32px;
  font-weight:900;
  letter-spacing:-1.5px;
  line-height:1.0;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,0.5);
}
.bnr-equip{
  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(217,184,120,0.6);
  padding:2px 7px;
  border:1px solid rgba(217,184,120,0.2);
  border-radius:4px;
  white-space:nowrap;
  align-self:center;
}

/* ── Stats strip ── */
.bnr-stats{
  display:flex;
  align-items:center;
  gap:8px;
}
.bnr-stat{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,0.6);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.bnr-stat svg{ width:13px; height:13px; opacity:0.65; flex-shrink:0; }
.bnr-stat-sep{
  width:3px; height:3px;
  border-radius:50%;
  background:rgba(255,255,255,0.2);
  flex-shrink:0;
}
.bnr-stat-pr{
  color:rgba(217,184,120,0.85);
}
.bnr-stat-pr svg{ fill:rgba(217,184,120,0.8); opacity:1; }
.bnr-stat-pr.has-pr{ color:rgba(217,184,120,1); }

/* ── Action row ── */
.bnr-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:2px;
}

/* Progress ring + timer — compact circle button */
.bnr-ring-btn{
  position:relative;
  width:48px;
  height:48px;
  flex-shrink:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bnr-ring-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}
.bnr-ring-bg{
  fill:none;
  stroke:rgba(255,255,255,0.1);
  stroke-width:3;
}
.bnr-ring-fill{
  fill:none;
  stroke:var(--accent-orange, #D4945A);
  stroke-width:3;
  stroke-linecap:round;
  transition:stroke-dashoffset 0.6s cubic-bezier(0.32,0.72,0,1);
}
.bnr-ring-fill.cable{ stroke:var(--blue, #7EB5E2); }
.bnr-ring-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.bnr-timer-val{
  font-size:10px;
  font-weight:800;
  color:rgba(255,255,255,0.7);
  letter-spacing:-0.3px;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
/* Timer running → green */
.bnr-ring-btn.live .bnr-timer-val{ color:#34D399; }
.bnr-ring-btn.live .bnr-ring-fill{ stroke:#34D399 !important; }

/* CTA button — fills remaining space */
.bnr-start-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg, #34D399 0%, #20a875 100%);
  color:#000;
  font-size:14px;
  font-weight:800;
  letter-spacing:-0.2px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 4px 16px rgba(52,211,153,0.3);
  transition:transform 0.12s ease, box-shadow 0.12s ease;
}
.bnr-start-btn svg{ width:16px; height:16px; flex-shrink:0; fill:#000; }
.bnr-start-btn:active{ transform:scale(0.96); box-shadow:0 2px 8px rgba(52,211,153,0.2); }
.bnr-start-btn.cable{
  background:linear-gradient(135deg, #63b3ed 0%, #3a85cc 100%) !important;
  box-shadow:0 4px 16px rgba(99,179,237,0.3) !important;
  color:#000 !important;
}
.bnr-start-btn.is-complete{
  background:linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 100%) !important;
  color:rgba(255,255,255,0.7) !important;
  box-shadow:none !important;
  border:1px solid rgba(255,255,255,0.1) !important;
}
.bnr-start-btn.is-complete svg{ fill:rgba(255,255,255,0.7); }

/* Summary icon button */
.bnr-summary-btn{
  width:44px;
  height:44px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  background:rgba(255,255,255,0.06);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background 0.15s ease;
}
.bnr-summary-btn svg{ width:18px; height:18px; stroke:rgba(255,255,255,0.55); }
.bnr-summary-btn:active{ background:rgba(255,255,255,0.12); }

/* ── Keep old classes working for JS that checks them ── */
.banner-play-btn.cable{ /* handled by .bnr-start-btn.cable */ }
.banner-recap-btn{ /* handled by .bnr-summary-btn */ }
#bannerTimerVal{ /* matched by .bnr-timer-val */ }

/* Hide old banner sections that no longer exist in DOM */
.banner-hero-section,
.banner-context,
.banner-unified-bar,
.banner-progress-bar{
  display:none !important;
}

/* ── Exercise list: sits right below the card ── */
.banner-exercise-list{
  margin-top:0 !important;
  padding:0 14px 12px !important;
}

/* ══════════════════════════════════════════════════════════════
   WEEK STRIP — orange/gold for free weeks, blue for cable weeks
   ══════════════════════════════════════════════════════════════ */

/* Day letter color by week type */
.day-col[data-week-type="free"] .day-letter{
  color:var(--accent-orange) !important;
  font-weight:700 !important;
}
.day-col[data-week-type="cable"] .day-letter{
  color:var(--blue) !important;
  font-weight:700 !important;
}
/* Ring stroke color — free=orange, cable=blue */
.day-col[data-week-type="free"] .day-ring-fill{
  stroke:var(--accent-orange) !important;
}
.day-col[data-week-type="cable"] .day-ring-fill{
  stroke:var(--blue) !important;
}
/* Selected day ring glow matches week type */
.day-col.selected[data-week-type="free"] .day-ring-fill{
  filter:drop-shadow(0 0 5px rgba(212,148,90,0.5)) !important;
}
.day-col.selected[data-week-type="cable"] .day-ring-fill{
  filter:drop-shadow(0 0 5px rgba(126,181,226,0.5)) !important;
}
/* Selected day number: accent tint */
.day-col.selected[data-week-type="free"] .day-number{
  color:var(--accent-orange) !important;
}
.day-col.selected[data-week-type="cable"] .day-number{
  color:var(--blue) !important;
}
/* Ring bg for unselected: very subtle tint */
.day-col[data-week-type="free"] .day-ring-bg{
  stroke:rgba(212,148,90,0.1) !important;
}
.day-col[data-week-type="cable"] .day-ring-bg{
  stroke:rgba(126,181,226,0.1) !important;
}

/* ══ END BANNER + WEEK STRIP ══ */


/* ══════════════════════════════════════════════════════════════
   INSIGHT SECTIONS — below workout banner
   ══════════════════════════════════════════════════════════════ */
.insight-sections{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 14px 10px;
}

/* Base card */
.ins-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:20px;
  overflow:hidden;
  position:relative;
}
body.light-mode .ins-card{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.08);
}

/* Section header */
.ins-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px 10px;
}
.ins-header-left{
  display:flex;
  align-items:center;
  gap:8px;
}
.ins-header-icon{
  width:16px; height:16px;
  stroke:rgba(217,184,120,0.7);
  flex-shrink:0;
}
.ins-title{
  font-size:13px;
  font-weight:800;
  letter-spacing:0.2px;
  color:rgba(255,255,255,0.85);
  text-transform:uppercase;
  letter-spacing:1px;
}
body.light-mode .ins-title{ color:rgba(0,0,0,0.75); }
.ins-badge{
  font-size:11px;
  font-weight:800;
  background:rgba(217,184,120,0.15);
  color:rgba(217,184,120,0.9);
  border:1px solid rgba(217,184,120,0.2);
  border-radius:8px;
  padding:2px 8px;
  letter-spacing:0.3px;
}
.ins-sub{
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.3);
}
body.light-mode .ins-sub{ color:rgba(0,0,0,0.35); }

/* ── Section 1: Today's PRs ── */
.ins-pr-list{
  padding:0 12px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ins-empty{
  font-size:12px;
  font-weight:500;
  color:rgba(255,255,255,0.22);
  text-align:center;
  padding:8px 0;
  font-style:italic;
}
body.light-mode .ins-empty{ color:rgba(0,0,0,0.28); }
.ins-pr-row{
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  padding:10px 12px;
  transition:background 0.15s ease;
}
.ins-pr-row.is-new{
  background:rgba(217,184,120,0.07);
  border-color:rgba(217,184,120,0.18);
}
.ins-pr-trophy{
  width:28px; height:28px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(217,184,120,0.12);
  flex-shrink:0;
}
.ins-pr-trophy svg{ width:16px; height:16px; fill:rgba(217,184,120,0.8); }
.ins-pr-trophy.new{ background:rgba(217,184,120,0.2); }
.ins-pr-trophy.new svg{ fill:rgba(217,184,120,1); }
.ins-pr-info{ flex:1; min-width:0; }
.ins-pr-name{
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,0.85);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
}
body.light-mode .ins-pr-name{ color:rgba(0,0,0,0.8); }
.ins-pr-meta{
  font-size:11px;
  color:rgba(255,255,255,0.35);
  margin-top:1px;
}
body.light-mode .ins-pr-meta{ color:rgba(0,0,0,0.65); }
.ins-pr-val{
  font-size:14px;
  font-weight:800;
  color:rgba(217,184,120,0.9);
  letter-spacing:-0.3px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.ins-pr-val.new{ color:#D9B878; }
.ins-pr-new-tag{
  font-size:9px;
  font-weight:800;
  letter-spacing:0.5px;
  background:rgba(217,184,120,0.2);
  color:rgba(217,184,120,1);
  border-radius:4px;
  padding:1px 5px;
  text-transform:uppercase;
}
.ins-pr-row.cable .ins-pr-trophy{ background:rgba(126,181,226,0.12); }
.ins-pr-row.cable .ins-pr-trophy svg{ fill:rgba(126,181,226,0.8); }
.ins-pr-row.cable .ins-pr-val{ color:rgba(126,181,226,0.9); }
.ins-pr-row.cable.is-new{ background:rgba(126,181,226,0.07); border-color:rgba(126,181,226,0.18); }

/* ── Section 2: PR Graph ── */
.ins-graph-wrap{
  padding:0 12px 4px;
  position:relative;
}
.ins-graph-canvas{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
}
.ins-graph-legend{
  display:flex;
  align-items:center;
  gap:14px;
  padding:6px 14px 14px;
  font-size:10px;
  font-weight:600;
  color:rgba(255,255,255,0.35);
}
.ins-legend-dot{
  width:8px; height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.ins-legend-dot.free{ background:var(--accent-orange, #D4945A); }
.ins-legend-dot.cable{ background:var(--blue, #7EB5E2); }

/* ── Section 3: Spider / 3C ── */
.ins-spider-body{
  display:flex;
  align-items:center;
  gap:0;
  padding:0 12px 16px;
}
.ins-spider-canvas{
  width:130px;
  height:110px;
  flex-shrink:0;
}
.ins-3c-stats{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-left:12px;
}
.ins-3c-row{ display:flex; flex-direction:column; gap:3px; }
.ins-3c-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.4);
}
body.light-mode .ins-3c-label{ color:rgba(0,0,0,0.65); }
.ins-3c-bar-wrap{
  height:5px;
  background:rgba(255,255,255,0.07);
  border-radius:3px;
  overflow:hidden;
}
body.light-mode .ins-3c-bar-wrap{ background:rgba(0,0,0,0.08); }
.ins-3c-bar{
  height:100%;
  border-radius:3px;
  width:0%;
  transition:width 0.8s cubic-bezier(0.32,0.72,0,1);
}
.ins-3c-bar.cons{ background:linear-gradient(90deg, #C8A96E, #E6C98A); }
.ins-3c-bar.comm{ background:linear-gradient(90deg, #8E99A4, #B0BEC5); }
.ins-3c-bar.ctrl{ background:linear-gradient(90deg, #BFA08A, #D4B8A8); }
.ins-3c-val{
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,0.7);
  letter-spacing:-0.2px;
  align-self:flex-end;
  margin-top:-2px;
}
body.light-mode .ins-3c-val{ color:rgba(0,0,0,0.65); }

/* ── Section 4: Rank ── */
.ins-rank{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  min-height:110px;
  transition:background 0.2s ease;
}
.ins-rank:active{ background:rgba(255,255,255,0.055); }
.ins-rank-bg{
  position:absolute;
  inset:0;
  opacity:0.04;
  background:radial-gradient(ellipse at 30% 50%, rgba(200,169,110,0.8) 0%, transparent 70%);
  pointer-events:none;
  transition:opacity 0.3s ease;
}
.ins-rank-body{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 16px 16px;
  position:relative;
  z-index:1;
}
.ins-rank-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.ins-rank-icon{
  width:52px; height:52px;
  object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.ins-rank-info{ display:flex; flex-direction:column; gap:2px; }
.ins-rank-name{
  font-size:18px;
  font-weight:900;
  letter-spacing:-0.5px;
  color:#fff;
  line-height:1;
}
body.light-mode .ins-rank-name{ color:#111; }
.ins-rank-score-row{
  display:flex;
  align-items:baseline;
  gap:4px;
}
.ins-rank-score{
  font-size:26px;
  font-weight:900;
  letter-spacing:-1px;
  line-height:1;
  color:rgba(200,169,110,0.9);
  font-variant-numeric:tabular-nums;
}
.ins-rank-score-label{
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.3);
  text-transform:uppercase;
  letter-spacing:0.5px;
}
body.light-mode .ins-rank-score-label{ color:rgba(0,0,0,0.35); }

/* Tier row */
.ins-rank-tiers{
  flex:1;
  display:flex;
  gap:4px;
  align-items:center;
  justify-content:flex-end;
}
.ins-tier{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:6px 5px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.03);
  opacity:0.35;
  transition:opacity 0.2s, background 0.2s, border-color 0.2s;
  min-width:42px;
}
.ins-tier img{ width:22px; height:22px; object-fit:contain; }
.ins-tier span:nth-child(2){
  font-size:8px;
  font-weight:800;
  color:rgba(255,255,255,0.7);
  text-transform:uppercase;
  letter-spacing:0.3px;
  line-height:1;
}
body.light-mode .ins-tier span:nth-child(2){ color:rgba(0,0,0,0.6); }
.ins-tier-range{
  font-size:8px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.3) !important;
  letter-spacing:0 !important;
}
.ins-tier.active{
  opacity:1;
  background:rgba(200,169,110,0.1);
  border-color:rgba(200,169,110,0.3);
}
.ins-rank-caret{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  opacity:0.25;
  z-index:1;
}
.ins-rank-caret svg{ width:18px; height:18px; }

/* ── Light mode adjustments ── */
body.light-mode .ins-pr-row{
  background:rgba(0,0,0,0.02);
  border-color:rgba(0,0,0,0.07);
}
body.light-mode .ins-pr-row.is-new{
  background:rgba(200,169,110,0.08);
  border-color:rgba(200,169,110,0.2);
}
body.light-mode .ins-3c-bar-wrap{ background:rgba(0,0,0,0.06); }

/* ══ END INSIGHT SECTIONS ══ */


/* ══════════════════════════════════════════════════════════════
   IMAGE POSITIONING — exercise cards + banner muscle figure
   All rules use !important to win over earlier declarations
   ══════════════════════════════════════════════════════════════ */

/* ── Collapsed pill: right-anchor so person shows in transparent zone ── */
.banner-ex-card:not(.bex-inline-open *){
  background-position:right 30% !important;
  background-size:cover !important;
}

/* ── Expanded card: center-horizontal, 30% from top shows torso/body ── */
.bex-inline-open .banner-ex-card{
  background-position:center 28% !important;
  background-size:cover !important;
}

/* ── The bex-bg-overlay diagonal — keeps text readable while showing person ── */
.bex-bg-overlay{
  background:linear-gradient(135deg,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.45) 35%,
    rgba(0,0,0,0.12) 65%,
    rgba(0,0,0,0.0) 100%) !important;
}

/* ── Banner card muscle image: right-biased, show torso/upper body ── */
.bnr-img{
  object-position:right center !important;
  object-fit:contain !important;
  opacity:0.85 !important;
  width:48% !important;
  height:90% !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  right:-4px !important;
  left:auto !important;
  inset:auto !important;
}

/* ── Left gradient: don't obscure too much of the person area ── */
.bnr-overlay-left{
  background:linear-gradient(105deg,
    rgba(12,10,20,0.97) 0%,
    rgba(12,10,20,0.90) 38%,
    rgba(12,10,20,0.55) 58%,
    rgba(12,10,20,0.0) 74%) !important;
}

/* ══ END IMAGE POSITIONING ══ */


/* ── Days Journey Card ── */
.ins-days{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.15s ease;
}
.ins-days:active{ background:rgba(255,255,255,0.055); }
.ins-days-body{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 16px 18px;
  position:relative;
}
.ins-days-ring-wrap{
  position:relative;
  width:72px;
  height:72px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ins-days-ring-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.ins-days-ring-fill{
  transition:stroke-dashoffset 0.9s cubic-bezier(0.32,0.72,0,1);
}
.ins-days-ring-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.ins-days-count{
  font-size:20px;
  font-weight:900;
  color:#D9B878;
  letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
}
.ins-days-total{
  font-size:9px;
  font-weight:700;
  color:rgba(255,255,255,0.3);
  letter-spacing:0.3px;
}
body.light-mode .ins-days-total{ color:rgba(0,0,0,0.6); }
.ins-days-info{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ins-days-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(217,184,120,0.6);
}
.ins-days-title{
  font-size:18px;
  font-weight:900;
  letter-spacing:-0.5px;
  color:#fff;
  line-height:1;
}
body.light-mode .ins-days-title{ color:#111; }
.ins-days-pct{
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,0.35);
}
body.light-mode .ins-days-pct{ color:rgba(0,0,0,0.65); }
.ins-days-bar-wrap{
  height:4px;
  background:rgba(255,255,255,0.07);
  border-radius:2px;
  overflow:hidden;
  margin-top:4px;
}
body.light-mode .ins-days-bar-wrap{ background:rgba(0,0,0,0.08); }
.ins-days-bar{
  height:100%;
  border-radius:2px;
  background:linear-gradient(90deg, #C8A96E, #E6C98A);
  width:0%;
  transition:width 0.9s cubic-bezier(0.32,0.72,0,1);
}
/* ── END Days Card ── */


/* ══════════════════════════════════════════════════════════════
   BANNER CARD — AGENDA REVAMP
   ══════════════════════════════════════════════════════════════ */

/* Card: taller for agenda layout */
.bnr-card{
  height:260px !important;
}

/* Kill old layout pieces */
.bnr-spacer{ display:none !important; }
.bnr-body{ display:none !important; }
.bnr-actions{ display:none !important; }
.bnr-stats{ display:none !important; }
.bnr-title-row{ display:none !important; }
.bnr-start-btn{ display:none !important; }

/* ── AGENDA BLOCK: title + chips, sits mid-card ── */
.bnr-agenda{
  position:relative;
  z-index:2;
  padding:0 16px;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  padding-bottom:10px;
}
.bnr-agenda .bnr-title{
  font-size:32px !important;
  font-weight:900 !important;
  letter-spacing:-1.5px !important;
  line-height:1.0 !important;
  color:#fff !important;
  text-shadow:0 2px 12px rgba(0,0,0,0.55) !important;
  display:block !important;
}
body.light-mode .bnr-agenda .bnr-title{ color:#fff !important; }

/* Chips row */
.bnr-chips{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.bnr-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:rgba(0,0,0,0.38);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:20px;
  padding:4px 10px;
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,0.75);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  white-space:nowrap;
}
.bnr-chip svg{ width:12px; height:12px; opacity:0.7; flex-shrink:0; }
.bnr-chip:active{ background:rgba(255,255,255,0.15); }
.bnr-chip-pr{
  color:rgba(217,184,120,0.9);
  border-color:rgba(217,184,120,0.2);
  background:rgba(217,184,120,0.1);
}
.bnr-chip-pr svg{ fill:rgba(217,184,120,0.85); opacity:1; }
.bnr-chip-equip{
  color:rgba(217,184,120,0.65);
  border-color:rgba(217,184,120,0.15);
  background:rgba(0,0,0,0.3);
  cursor:default;
  letter-spacing:0.5px;
  text-transform:uppercase;
  font-size:10px;
}

/* ── BOTTOM ROW: timer left · ring + summary right ── */
.bnr-bottom{
  position:relative;
  z-index:2;
  display:flex;
  align-items:stretch;
  padding:0 14px 16px;
  gap:12px;
}

/* TIMER BLOCK — tap to start */
.bnr-timer-block{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  padding:12px 16px;
  background:rgba(0,0,0,0.42);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:18px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.15s ease, border-color 0.15s ease;
  min-height:72px;
}
.bnr-timer-block:active{ background:rgba(255,255,255,0.08); }

/* Timer not started */
.bnr-timer-block.idle{
  border-color:rgba(255,255,255,0.1);
}
/* Timer running — green glow */
.bnr-timer-block.live{
  border-color:rgba(52,211,153,0.4);
  background:rgba(52,211,153,0.07);
}
.bnr-timer-block.live .bnr-timer-big{ color:#34D399; }
.bnr-timer-block.live .bnr-timer-hint{ color:rgba(52,211,153,0.6); }
/* Timer paused — gold */
.bnr-timer-block.paused{
  border-color:rgba(217,184,120,0.35);
  background:rgba(217,184,120,0.07);
}
.bnr-timer-block.paused .bnr-timer-big{ color:#D9B878; }
.bnr-timer-block.paused .bnr-timer-hint{ color:rgba(217,184,120,0.6); }

.bnr-timer-display{
  display:flex;
  align-items:baseline;
  gap:6px;
}
.bnr-timer-big{
  font-size:46px;
  font-weight:900;
  color:rgba(255,255,255,0.88);
  letter-spacing:-2px;
  line-height:1;
  font-variant-numeric:tabular-nums;
  transition:color 0.25s ease;
}
.bnr-timer-hint{
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.3);
  letter-spacing:0.3px;
  transition:color 0.25s ease;
}

/* RIGHT COLUMN: ring + summary stacked */
.bnr-right-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

/* PROGRESS RING — standalone, % inside */
.bnr-prog-ring-wrap{
  position:relative;
  width:82px;
  height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bnr-prog-ring-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.bnr-prog-ring-bg{
  fill:none;
  stroke:rgba(255,255,255,0.1);
  stroke-width:6;
}
.bnr-prog-ring-fill{
  fill:none;
  stroke:var(--accent-orange, #D4945A);
  stroke-width:6;
  stroke-linecap:round;
  transition:stroke-dashoffset 0.7s cubic-bezier(0.32,0.72,0,1),
             stroke 0.3s ease;
}
.bnr-prog-ring-fill.cable{ stroke:var(--blue, #7EB5E2); }
.bnr-prog-ring-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
}
.bnr-prog-pct{
  font-size:18px;
  font-weight:900;
  color:#fff;
  letter-spacing:-0.5px;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.bnr-prog-label{
  font-size:9px;
  font-weight:700;
  color:rgba(255,255,255,0.35);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

/* SUMMARY BUTTON */
.bnr-summary-btn{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:82px;
  height:auto;
  padding:7px 0 !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  border-radius:12px !important;
  background:rgba(0,0,0,0.35) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  color:rgba(255,255,255,0.5) !important;
  font-size:10px !important;
  font-weight:700 !important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  white-space:nowrap;
  letter-spacing:0.3px;
  flex-shrink:0;
}
.bnr-summary-btn svg{ width:13px; height:13px; stroke:rgba(255,255,255,0.45) !important; flex-shrink:0; }
.bnr-summary-btn:active{ background:rgba(255,255,255,0.1) !important; }

/* ── Overlay bottom: darker to anchor the bottom row ── */
.bnr-overlay-bottom{
  background:linear-gradient(to top,
    rgba(6,5,4,0.94) 0%,
    rgba(6,5,4,0.7) 30%,
    rgba(6,5,4,0.3) 55%,
    rgba(6,5,4,0.0) 75%) !important;
}

/* ══ END BANNER AGENDA REVAMP ══ */


/* ══ DOCK BAR — LABELED TABS ══════════════════════════════════════════
   Labels always visible. Icon + label stacked per tab.
   ══════════════════════════════════════════════════════════════════ */

.bottom-menu-bar{
  height:64px !important;
  padding-bottom:env(safe-area-inset-bottom, 0px) !important;
  padding-top:0 !important;
  align-items:center !important;
}

.dock-btn{
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  height:56px !important;
  padding:6px 4px 4px !important;
}

.dock-btn svg{
  width:22px !important;
  height:22px !important;
  flex-shrink:0 !important;
  color:rgba(255,255,255,0.42) !important;
  transition:color 0.15s ease !important;
}

.dock-btn span,
.dock-btn .dock-label{
  display:block !important;
  font-size:9px !important;
  font-weight:700 !important;
  letter-spacing:0.4px !important;
  color:rgba(255,255,255,0.32) !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  line-height:1 !important;
  transition:color 0.14s ease !important;
}

/* Active / tapped state */
.dock-btn:active svg{ color:rgba(255,255,255,0.95) !important; filter:drop-shadow(0 0 4px rgba(255,255,255,0.3)) !important; }
.dock-btn:active .dock-label{ color:rgba(255,255,255,0.80) !important; }

/* Active page highlight — gold accent */
.dock-btn.is-active svg,
.dock-btn.active svg{
  color:#D9B878 !important;
  filter:drop-shadow(0 0 5px rgba(217,184,120,0.45)) !important;
}
.dock-btn.is-active .dock-label,
.dock-btn.active .dock-label{ color:#D9B878 !important; }

/* Active indicator dot */
.dock-btn.is-active::after,
.dock-btn.active::after{
  content:'';
  position:absolute;
  bottom:5px;
  left:50%;
  transform:translateX(-50%);
  width:4px; height:4px;
  border-radius:50%;
  background:#D9B878;
  opacity:0.85;
}

/* Light mode */
body.light-mode .dock-btn svg{ color:rgba(0,0,0,0.35) !important; }
body.light-mode .dock-btn .dock-label{ color:rgba(0,0,0,0.30) !important; }
body.light-mode .dock-btn:active svg{ color:rgba(0,0,0,0.82) !important; filter:none !important; }
body.light-mode .dock-btn:active .dock-label{ color:rgba(0,0,0,0.65) !important; }
body.light-mode .dock-btn.is-active svg,
body.light-mode .dock-btn.active svg{ color:#8B6500 !important; filter:none !important; }
body.light-mode .dock-btn.is-active .dock-label,
body.light-mode .dock-btn.active .dock-label{ color:#8B6500 !important; }
body.light-mode .dock-btn.is-active::after,
body.light-mode .dock-btn.active::after{ background:#8B6500; }

/* Settings button — same flex as others */
.dock-btn#settingsBtn{
  flex:1 1 0 !important;
  padding:0 6px !important;
}

/* Separator dots: shorter to not clash with labels */
.dock-btn + .dock-btn::before{
  height:14px !important;
  top:40% !important;
}

/* ══ END DOCK LABELED TABS ══ */


/* ── Pill muscle badge: bottom-right corner of collapsed card ── */
.bex-pill-muscle{
  flex-shrink:0;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:6px;
  opacity:0.88;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:opacity 0.15s ease;
  position:relative;
}
.bex-pill-muscle:active{ opacity:1; }
.bex-pill-muscle img{
  width:40px;
  height:40px;
  object-fit:contain;
  filter:brightness(1.15) saturate(0.85);
}

/* Chevron: now right-pointing (expand) */
.bex-pill-chevron svg{
  width:14px !important;
  height:14px !important;
  color:rgba(255,255,255,0.3) !important;
}

/* Hide pill muscle when card is expanded */
.bex-inline-open .bex-pill-muscle{ display:none !important; }
/* ── END pill muscle badge ── */


/* ══════════════════════════════════════════════════════════════
   PR ROW — date label + tappable
   ══════════════════════════════════════════════════════════════ */
.ins-pr-row{
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.12s ease;
}
.ins-pr-row:active{ background:rgba(255,255,255,0.06) !important; border-radius:12px; }
.ins-pr-meta{
  font-size:10px !important;
  color:rgba(255,255,255,0.35) !important;
}
.ins-pr-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  flex-shrink:0;
}
.ins-pr-caret{
  width:13px; height:13px;
  stroke:rgba(255,255,255,0.2);
  display:block;
  margin-top:1px;
}
body.light-mode .ins-pr-caret{ stroke:rgba(0,0,0,0.5); }

/* ══ PILL LIVE TIMER ══ */
.bex-pill-bottom-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.bex-pill-live-timer{
  display:none;
  font-size:10px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:rgba(52,211,153,0.75);
  white-space:nowrap;
  margin-top:1px;
}
.bex-pill-live-timer::before {
  content:"▶ ";
  font-size:8px;
  opacity:0.7;
}
.bex-pill-live-timer.active{
  display:inline-block;
}
body.light-mode .bex-pill-live-timer { color:rgba(16,140,90,0.80) !important; }

/* ══ EXPANDED CARD INFO — structured ══ */

/* Primary stat: big number block */
.bex-primary-stat{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 0 8px;
  flex-wrap:wrap;
}
.bex-primary-number{
  font-size:34px;
  font-weight:900;
  color:#fff;
  letter-spacing:-1.5px;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.bex-primary-label{
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,0.4);
  text-transform:uppercase;
  letter-spacing:0.5px;
  line-height:1.2;
  align-self:flex-end;
  padding-bottom:4px;
}
.bex-primary-x{
  font-size:18px;
  font-weight:300;
  color:rgba(255,255,255,0.25);
  padding:0 2px;
  align-self:center;
}

/* Secondary info row: rest · est time · PR */
.bex-secondary-row{
  display:flex;
  align-items:stretch;
  gap:0;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:8px;
}
body.light-mode .bex-secondary-row{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.08);
}
.bex-sec-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:8px 6px;
  gap:3px;
  min-width:0;
}
.bex-sec-divider{
  width:1px;
  background:rgba(255,255,255,0.07);
  flex-shrink:0;
  margin:6px 0;
}
body.light-mode .bex-sec-divider{ background:rgba(0,0,0,0.08); }
.bex-sec-label{
  font-size:8.5px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.3);
  white-space:nowrap;
}
body.light-mode .bex-sec-label{ color:rgba(0,0,0,0.6); }
.bex-sec-val{
  font-size:14px;
  font-weight:800;
  color:rgba(255,255,255,0.85);
  letter-spacing:-0.3px;
  white-space:nowrap;
}
body.light-mode .bex-sec-val{ color:rgba(0,0,0,0.75); }
.bex-sec-val.bex-pr-target{ color:#D9B878; }
.bex-sec-val.bex-pr-target.lit{ color:#D9B878; text-shadow:0 0 8px rgba(217,184,120,0.5); }

/* Best today + sets count row */
.bex-today-row{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 0 6px;
}
.bex-best-spacer{ flex:1; }
.bex-best-label{
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,0.3);
  text-transform:uppercase;
  letter-spacing:0.5px;
}
body.light-mode .bex-best-label{ color:rgba(0,0,0,0.35); }
.bex-best-val{
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,0.8);
}
body.light-mode .bex-best-val{ color:rgba(0,0,0,0.7); }
.bex-sets-count{
  font-size:11px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.35) !important;
  text-align:right;
}
/* ══ END CARD INFO STYLES ══ */


/* ══════════════════════════════════════════════════════════════
   DRAG HANDLES — week strip + banner
   ══════════════════════════════════════════════════════════════ */

/* Shared handle bar pill */
.sheet-handle-bar{
  width:36px;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.2);
  flex-shrink:0;
  pointer-events:none;
}
body.light-mode .sheet-handle-bar{ background:rgba(0,0,0,0.15); }

/* Handle zone above week strip days */
.cal-sheet-handle{
  position:absolute;
  top:0; left:0; right:0;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
  -webkit-tap-highlight-color:transparent;
}
.cal-sheet-handle:active .sheet-handle-bar{ background:rgba(255,255,255,0.45); }

/* Handle zone at top of banner card */
.bnr-sheet-handle{
  position:absolute;
  top:0; left:0; right:0;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
  -webkit-tap-highlight-color:transparent;
}
.bnr-sheet-handle:active .sheet-handle-bar{ background:rgba(255,255,255,0.5); }

/* ══════════════════════════════════════════════════════════════
   BOTTOM SHEET — shared base styles
   ══════════════════════════════════════════════════════════════ */

.bottom-sheet-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:10099;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.32s cubic-bezier(0.32,0.72,0,1);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
.bottom-sheet-backdrop.open{
  opacity:1;
  pointer-events:all;
}

.bottom-sheet{
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:10100;
  background:#0f0d0b;
  border-radius:24px 24px 0 0;
  box-shadow:0 -4px 40px rgba(0,0,0,0.6);
  transform:translateY(100%);
  transition:transform 0.38s cubic-bezier(0.32,0.72,0,1);
  max-height:92vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
body.light-mode .bottom-sheet{ background:#f2f0ec; }
.bottom-sheet.open{
  transform:translateY(0);
}

.bottom-sheet-header{
  padding:10px 20px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.sheet-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding-bottom:4px;
}

.sheet-month-label{
  font-size:17px;
  font-weight:800;
  color:#fff;
  letter-spacing:-0.3px;
}
body.light-mode .sheet-month-label{ color:#111; }

.sheet-month-nav{
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.07);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  flex-shrink:0;
}
.sheet-month-nav svg{ width:16px; height:16px; stroke:rgba(255,255,255,0.7); }
.sheet-month-nav:active{ background:rgba(255,255,255,0.14); }
body.light-mode .sheet-month-nav{ background:rgba(0,0,0,0.06); }
body.light-mode .sheet-month-nav svg{ stroke:rgba(0,0,0,0.55); }

/* Weekday header row for calendar */
.sheet-dow-row{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  width:100%;
  padding:0 0 6px;
}
.sheet-dow-row span{
  text-align:center;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:rgba(255,255,255,0.3);
}
body.light-mode .sheet-dow-row span{ color:rgba(0,0,0,0.6); }

.bottom-sheet-body{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:0 16px 20px;
}

/* ── CALENDAR GRID inside sheet ── */
.sheet-cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
}

.sheet-cal-day{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:6px 2px;
  border-radius:10px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  min-height:52px;
  transition:background 0.12s ease;
  position:relative;
}
.sheet-cal-day:active{ background:rgba(255,255,255,0.08); }
body.light-mode .sheet-cal-day:active{ background:rgba(0,0,0,0.06); }

.sheet-cal-num{
  font-size:16px;
  font-weight:700;
  color:rgba(255,255,255,0.75);
  line-height:1;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
}
body.light-mode .sheet-cal-num{ color:rgba(0,0,0,0.7); }

.sheet-cal-day.is-today .sheet-cal-num{
  background:#D9B878;
  color:#000;
  font-weight:900;
}
.sheet-cal-day.is-selected .sheet-cal-num{
  background:rgba(217,184,120,0.25);
  color:#D9B878;
  font-weight:900;
  box-shadow:0 0 0 1.5px rgba(217,184,120,0.5);
}
.sheet-cal-day.other-month .sheet-cal-num{
  color:rgba(255,255,255,0.2);
}
body.light-mode .sheet-cal-day.other-month .sheet-cal-num{ color:rgba(0,0,0,0.18); }

.sheet-cal-dot{
  width:5px; height:5px;
  border-radius:50%;
  margin-top:3px;
  background:rgba(255,255,255,0.15);
  flex-shrink:0;
}
.sheet-cal-dot.free{ background:#D4945A; opacity:0.8; }
.sheet-cal-dot.cable{ background:#7EB5E2; opacity:0.8; }
.sheet-cal-dot.done{ background:#34D399; }
.sheet-cal-dot.pr{ background:#D9B878; }

/* ── WEEK AGENDA LIST inside sheet ── */
.sheet-week-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:6px;
}

.sheet-week-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.12s ease;
  position:relative;
  overflow:hidden;
}
.sheet-week-row:active{ background:rgba(255,255,255,0.08); }
body.light-mode .sheet-week-row{ background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.07); }
body.light-mode .sheet-week-row:active{ background:rgba(0,0,0,0.07); }

.sheet-week-row.is-selected{
  border-color:rgba(217,184,120,0.3);
  background:rgba(217,184,120,0.05);
}
.sheet-week-row.is-rest{
  opacity:0.45;
}
.sheet-week-row.is-done{
  border-color:rgba(52,211,153,0.2);
}

/* Left: day label + date number */
.sheet-week-day-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:36px;
  flex-shrink:0;
}
.sheet-week-dow{
  font-size:10px;
  font-weight:800;
  letter-spacing:0.8px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.35);
}
body.light-mode .sheet-week-dow{ color:rgba(0,0,0,0.6); }
.sheet-week-date{
  font-size:20px;
  font-weight:900;
  color:#fff;
  letter-spacing:-0.5px;
  line-height:1;
}
body.light-mode .sheet-week-date{ color:#111; }
.sheet-week-row.is-selected .sheet-week-date{ color:#D9B878; }
.sheet-week-row.is-selected .sheet-week-dow{ color:rgba(217,184,120,0.6); }

/* Progress ring mini */
.sheet-week-ring-wrap{
  position:relative;
  width:36px; height:36px;
  flex-shrink:0;
}
.sheet-week-ring-wrap svg{
  width:36px; height:36px;
}
.sheet-week-ring-bg{ fill:none; stroke:rgba(255,255,255,0.08); stroke-width:3; }
.sheet-week-ring-fill{ fill:none; stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset 0.6s ease; }
.sheet-week-ring-fill.free{ stroke:#D4945A; }
.sheet-week-ring-fill.cable{ stroke:#7EB5E2; }
.sheet-week-ring-fill.done{ stroke:#34D399; }
body.light-mode .sheet-week-ring-bg{ stroke:rgba(0,0,0,0.08); }

/* Workout info */
.sheet-week-info{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.sheet-week-name{
  font-size:15px;
  font-weight:800;
  color:#fff;
  letter-spacing:-0.3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.light-mode .sheet-week-name{ color:#111; }
.sheet-week-meta{
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.35);
  display:flex; align-items:center; gap:5px;
}
body.light-mode .sheet-week-meta{ color:rgba(0,0,0,0.35); }
.sheet-week-type-dot{
  width:6px; height:6px;
  border-radius:50%;
  flex-shrink:0;
}
.sheet-week-type-dot.free{ background:#D4945A; }
.sheet-week-type-dot.cable{ background:#7EB5E2; }

/* PR badge */
.sheet-week-pr{
  font-size:10px;
  font-weight:700;
  color:#D9B878;
  background:rgba(217,184,120,0.12);
  border:1px solid rgba(217,184,120,0.2);
  border-radius:6px;
  padding:2px 6px;
  flex-shrink:0;
}

/* Today badge */
.sheet-week-today-badge{
  font-size:9px;
  font-weight:800;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:#D9B878;
  background:rgba(217,184,120,0.12);
  border-radius:5px;
  padding:1px 5px;
}

/* Caret right */
.sheet-week-caret{
  width:16px; height:16px;
  stroke:rgba(255,255,255,0.2);
  flex-shrink:0;
}
body.light-mode .sheet-week-caret{ stroke:rgba(0,0,0,0.5); }

/* ══ END SHEET STYLES ══ */


/* ══════════════════════════════════════════════════════════════
   UNIFIED PAGE THEME — readable, consistent surfaces
   ══════════════════════════════════════════════════════════════ */

/* ── Structural layout ── */
.workout-banner-slide-center{
  padding:6px 0 0 !important;
}
.banner-exercise-list{
  margin-top:0 !important;
  padding:0 0 12px !important;
}

/* Insight sections — breathing room, no gap collapse */
.insight-sections{
  padding:12px 14px 90px !important;
  gap:10px !important;
}

/* ── Insight cards — visible raised surface ── */
.ins-card{
  background:#141210 !important;
  border:1px solid rgba(255,255,255,0.09) !important;
  border-radius:18px !important;
  overflow:hidden !important;
}
body.light-mode .ins-card{
  background:rgba(255,255,255,0.72) !important;
  border-color:rgba(0,0,0,0.07) !important;
}

/* Section header typography — clearly readable */
.ins-header{
  padding:16px 16px 10px !important;
}
.ins-title{
  font-size:12px !important;
  letter-spacing:1.2px !important;
  color:rgba(255,255,255,0.72) !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
}
body.light-mode .ins-title{ color:rgba(0,0,0,0.65) !important; }

.ins-header-icon{
  stroke:rgba(217,184,120,0.65) !important;
  width:16px !important; height:16px !important;
}
body.light-mode .ins-header-icon{ stroke:rgba(180,130,50,0.6) !important; }

.ins-sub{
  font-size:11px !important;
  color:rgba(255,255,255,0.38) !important;
}
body.light-mode .ins-sub{ color:rgba(0,0,0,0.35) !important; }

.ins-badge{
  font-size:11px !important;
  font-weight:800 !important;
  background:rgba(217,184,120,0.15) !important;
  color:rgba(217,184,120,0.9) !important;
  border:1px solid rgba(217,184,120,0.22) !important;
}

/* ── Exercise cards — clearly visible surface ── */
.banner-ex-card{
  background:#161411 !important;
  border:1px solid rgba(255,255,255,0.09) !important;
  margin:0 14px !important;
  border-radius:16px !important;
}
.bex-stepper-area{
  margin:0 14px !important;
  border-radius:0 0 16px 16px !important;
}
body.light-mode .banner-ex-card{
  background:rgba(255,255,255,0.7) !important;
  border-color:rgba(0,0,0,0.07) !important;
}

/* PR list rows */
.ins-pr-row{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.07) !important;
}
body.light-mode .ins-pr-row{
  background:rgba(0,0,0,0.03) !important;
  border-color:rgba(0,0,0,0.06) !important;
}
.ins-pr-list{
  padding:0 12px 14px !important;
}
.ins-pr-name{
  color:rgba(255,255,255,0.85) !important;
  font-size:14px !important;
  font-weight:700 !important;
}
body.light-mode .ins-pr-name{ color:rgba(0,0,0,0.8) !important; }
.ins-pr-meta{
  color:rgba(255,255,255,0.38) !important;
  font-size:11px !important;
}
body.light-mode .ins-pr-meta{ color:rgba(0,0,0,0.38) !important; }
.ins-pr-val{
  font-size:14px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,0.75) !important;
}
body.light-mode .ins-pr-val{ color:rgba(0,0,0,0.7) !important; }
.ins-pr-val.new{ color:#D9B878 !important; }

/* ── Week strip — keep structure but add slight depth ── */
.week-strip{
  background:transparent !important;
  border-bottom:1px solid rgba(255,255,255,0.06) !important;
  padding:6px 8px 8px !important;
}
body.light-mode .week-strip{
  border-bottom-color:rgba(0,0,0,0.05) !important;
}

/* ── Day panel — Round 172: flat transparent in dark, no warm bg ── */
.day-panel{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  margin:0 !important;
  padding-bottom:0 !important;
  box-shadow:none !important;
}
body.light-mode .day-panel{ background:transparent !important; }

/* ── Banner card ── */
.bnr-card{
  border-radius:16px !important;
  margin:0 14px !important;
}

/* Graph area legibility */
.ins-graph-wrap{
  padding:0 10px 14px !important;
}

/* Empty state text */
.ins-empty{
  color:rgba(255,255,255,0.3) !important;
  font-size:13px !important;
}
body.light-mode .ins-empty{ color:rgba(0,0,0,0.28) !important; }

/* ══════════════════════════════════════════════════════════════
   TODAY'S WORKOUT SECTION HEADER
   ══════════════════════════════════════════════════════════════ */
.bex-section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 16px 10px;
  gap:10px;
}
.bex-section-header.cable .bex-section-label{ color:rgba(126,181,226,0.5); }
.bex-section-header.free  .bex-section-label{ color:rgba(212,148,90,0.5); }
body.light-mode .bex-section-header.cable .bex-section-label{ color:rgba(80,130,200,0.55); }
body.light-mode .bex-section-header.free  .bex-section-label{ color:rgba(180,110,50,0.55); }

.bex-section-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
/* Count on its own line below label */
.bex-section-count{
  display:block !important;
  margin-top:2px !important;
}
.bex-section-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.bex-section-count{
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.2);
}
body.light-mode .bex-section-count{ color:rgba(0,0,0,0.55); }

.bex-section-type-tag{
  font-size:10px;
  font-weight:800;
  letter-spacing:0.8px;
  text-transform:uppercase;
  border-radius:8px;
  padding:3px 10px;
  border:1px solid;
}
.bex-section-type-tag.free{
  color:rgba(212,148,90,0.8);
  background:rgba(212,148,90,0.08);
  border-color:rgba(212,148,90,0.18);
}
.bex-section-type-tag.cable{
  color:rgba(126,181,226,0.8);
  background:rgba(126,181,226,0.08);
  border-color:rgba(126,181,226,0.18);
}

/* ══════════════════════════════════════════════════════════════
   WEEK-TYPE ACCENT COLORS — free=orange, cable=blue
   These override the hardcoded green #34D399 in bex card context
   ══════════════════════════════════════════════════════════════ */

/* Pill live timer */
body:not(.cable-week) .bex-pill-live-timer.active{
  color:var(--accent-orange) !important;
  background:rgba(212,148,90,0.1) !important;
  border-color:rgba(212,148,90,0.25) !important;
}
body.cable-week .bex-pill-live-timer.active{
  color:var(--blue) !important;
  background:rgba(126,181,226,0.1) !important;
  border-color:rgba(126,181,226,0.25) !important;
}

/* Running timer on expanded card */
body:not(.cable-week) .bex-ex-timer.is-running{
  color:var(--accent-orange) !important;
}
body:not(.cable-week) .bex-ex-timer.is-running .bex-timer-icon{
  stroke:var(--accent-orange) !important;
}
/* All week types: running play/pause button → green */
body:not(.cable-week) .bex-ex-timer.is-running .bex-timer-play,
body.cable-week .bex-ex-timer.is-running .bex-timer-play {
  border-color:rgba(52,211,153,0.35) !important;
  background:rgba(52,211,153,0.14) !important;
  color:#34D399 !important;
  animation: none !important;
}

/* Completed checkmark dot */
body:not(.cable-week) .bex-check-icon.lit svg{
  stroke:var(--accent-orange) !important;
  filter:drop-shadow(0 0 4px rgba(212,148,90,0.4)) !important;
}
body.cable-week .bex-check-icon.lit svg{
  stroke:var(--blue) !important;
  filter:drop-shadow(0 0 4px rgba(126,181,226,0.4)) !important;
}
body:not(.cable-week) .bex-status-dot.bex-dot-check.lit{
  background:var(--accent-orange) !important;
  box-shadow:0 0 4px rgba(212,148,90,0.5) !important;
}
body.cable-week .bex-status-dot.bex-dot-check.lit{
  background:var(--blue) !important;
  box-shadow:0 0 4px rgba(126,181,226,0.5) !important;
}

/* Active/expanded bex card border tint */
body:not(.cable-week) .bex-inline-open .banner-ex-card{
  border-color:rgba(212,148,90,0.18) !important;
}
body.cable-week .bex-inline-open .banner-ex-card{
  border-color:rgba(126,181,226,0.18) !important;
}

/* Exercise card base — cleaner, more unified */
.banner-ex-card{
  background:rgba(255,255,255,0.035) !important;
  border-color:rgba(255,255,255,0.06) !important;
  margin:0 16px !important;
  border-radius:16px !important;
}
.bex-stepper-area{
  margin:0 16px !important;
  border-radius:0 0 16px 16px !important;
}
body.light-mode .banner-ex-card{
  background:rgba(0,0,0,0.025) !important;
  border-color:rgba(0,0,0,0.06) !important;
}

/* PR list rows match card language */
.ins-pr-row{
  background:rgba(255,255,255,0.025) !important;
  border-color:rgba(255,255,255,0.05) !important;
}
.ins-pr-list{
  padding:0 16px 16px !important;
}

/* Graph section inner padding */
.ins-graph-wrap{
  padding:0 8px 14px !important;
}

/* ══ END UNIFIED THEME ══ */


/* ── Expanded card info — ensure readable on dark card surface ── */
.bex-primary-number{
  color:#ffffff !important;
}
.bex-primary-label{
  color:rgba(255,255,255,0.45) !important;
}
.bex-primary-x{
  color:rgba(255,255,255,0.3) !important;
}
.bex-secondary-row{
  background:rgba(255,255,255,0.06) !important;
  border-color:rgba(255,255,255,0.08) !important;
}
body.light-mode .bex-secondary-row{
  background:rgba(0,0,0,0.05) !important;
  border-color:rgba(0,0,0,0.07) !important;
}
.bex-sec-label{
  color:rgba(255,255,255,0.38) !important;
}
body.light-mode .bex-sec-label{ color:rgba(0,0,0,0.35) !important; }
.bex-sec-val{
  color:rgba(255,255,255,0.9) !important;
}
body.light-mode .bex-sec-val{ color:rgba(0,0,0,0.75) !important; }
.bex-best-label{
  color:rgba(255,255,255,0.38) !important;
}
body.light-mode .bex-best-label{ color:rgba(0,0,0,0.35) !important; }
.bex-best-val{
  color:rgba(255,255,255,0.85) !important;
}
body.light-mode .bex-best-val{ color:rgba(0,0,0,0.75) !important; }
.bex-sets-count{
  color:rgba(255,255,255,0.38) !important;
}
body.light-mode .bex-sets-count{ color:rgba(0,0,0,0.35) !important; }

/* Pill name + meta readability */
.bex-pill-name{
  color:rgba(255,255,255,0.9) !important;
  font-weight:700 !important;
}
body.light-mode .bex-pill-name{ color:rgba(0,0,0,0.82) !important; }
.bex-pill-meta{
  color:rgba(255,255,255,0.42) !important;
  font-size:11px !important;
}
body.light-mode .bex-pill-meta{ color:rgba(0,0,0,0.38) !important; }

/* Section header TODAY'S WORKOUT label contrast */
.bex-section-label{
  font-size:13px !important;
  font-weight:900 !important;
  letter-spacing:1px !important;
  color:rgba(255,255,255,0.85) !important;
}
.bex-section-header.free  .bex-section-label{ color:rgba(212,148,90,0.95) !important; }
.bex-section-header.cable .bex-section-label{ color:rgba(126,181,226,0.95) !important; }
.bex-section-count{
  font-size:13px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.55) !important;
}
body.light-mode .bex-section-count{ color:rgba(0,0,0,0.40) !important; }
body.light-mode .bex-section-label{ color:rgba(0,0,0,0.80) !important; }

/* ── END READABILITY FIXES ── */


/* ══════════════════════════════════════════════════════════════
   LIGHT MODE — COMPREHENSIVE VISIBILITY FIX
   All surfaces get solid white cards, dark text, clear borders
   and subtle shadows so elements lift off the cream background
   ══════════════════════════════════════════════════════════════ */

/* Page background — warm cream, cards will be white */
body.light-mode{
  background:#EAEAEF !important;
}

/* ── Week strip / calendar area ── */
body.light-mode .day-panel{
  background:#f0ede8 !important;
  border-bottom:1px solid rgba(0,0,0,0.07) !important;
}
body.light-mode .week-strip{
  background:transparent !important;
  border-bottom:1px solid rgba(0,0,0,0.07) !important;
}

/* ── Banner card ── */
body.light-mode .bnr-card{
  box-shadow:0 4px 20px rgba(0,0,0,0.12) !important;
}

/* ── Exercise cards (bex) — solid white, clear shadow ── */
body.light-mode .banner-ex-card{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,0.09) !important;
  box-shadow:0 2px 12px rgba(0,0,0,0.07) !important;
}
body.light-mode .bex-stepper-area{
  background:#f7f6f4 !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  border-top:none !important;
}

/* Exercise card text */
body.light-mode .bex-pill-name{
  color:#111111 !important;
}
body.light-mode .bex-pill-meta,
body.light-mode .bex-section-count{
  color:rgba(0,0,0,0.42) !important;
}
body.light-mode .bex-name{
  color:#111111 !important;
}
body.light-mode .bex-primary-number{
  color:#111111 !important;
}
body.light-mode .bex-primary-label{
  color:rgba(0,0,0,0.42) !important;
}
body.light-mode .bex-primary-x{
  color:rgba(0,0,0,0.25) !important;
}
body.light-mode .bex-secondary-row{
  background:rgba(0,0,0,0.04) !important;
  border-color:rgba(0,0,0,0.07) !important;
}
body.light-mode .bex-sec-label{
  color:rgba(0,0,0,0.38) !important;
}
body.light-mode .bex-sec-val{
  color:#111111 !important;
}
body.light-mode .bex-best-label{
  color:rgba(0,0,0,0.38) !important;
}
body.light-mode .bex-best-val{
  color:#111111 !important;
}
body.light-mode .bex-sets-count{
  color:rgba(0,0,0,0.65) !important;
}

/* Exercise card chips */
body.light-mode .bex-chip{
  background:rgba(0,0,0,0.05) !important;
  color:rgba(0,0,0,0.65) !important;
  border-color:rgba(0,0,0,0.08) !important;
}

/* ── Section header "TODAY'S WORKOUT" ── */
body.light-mode .bex-section-header.free .bex-section-label{
  color:rgba(160,90,20,0.8) !important;
}
body.light-mode .bex-section-header.cable .bex-section-label{
  color:rgba(40,100,180,0.8) !important;
}
body.light-mode .bex-section-type-tag.free{
  color:rgba(160,90,20,0.9) !important;
  background:rgba(212,148,90,0.12) !important;
  border-color:rgba(212,148,90,0.25) !important;
}
body.light-mode .bex-section-type-tag.cable{
  color:rgba(40,100,180,0.9) !important;
  background:rgba(60,130,220,0.1) !important;
  border-color:rgba(60,130,220,0.22) !important;
}

/* ── Insight section cards — solid white ── */
body.light-mode .ins-card{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,0.09) !important;
  border-radius:18px !important;
  box-shadow:0 2px 12px rgba(0,0,0,0.06) !important;
}

/* Insight card headers */
body.light-mode .ins-title{
  color:rgba(0,0,0,0.72) !important;
}
body.light-mode .ins-header-icon{
  stroke:rgba(160,110,30,0.65) !important;
}
body.light-mode .ins-sub{
  color:rgba(0,0,0,0.38) !important;
}
body.light-mode .ins-badge{
  background:rgba(180,130,40,0.12) !important;
  color:rgba(140,95,10,0.9) !important;
  border-color:rgba(180,130,40,0.2) !important;
}

/* PR rows */
body.light-mode .ins-pr-row{
  background:rgba(0,0,0,0.025) !important;
  border:1px solid rgba(0,0,0,0.07) !important;
}
body.light-mode .ins-pr-row.is-new{
  background:rgba(180,130,40,0.07) !important;
  border-color:rgba(180,130,40,0.15) !important;
}
body.light-mode .ins-pr-name{
  color:#111111 !important;
}
body.light-mode .ins-pr-meta{
  color:rgba(0,0,0,0.42) !important;
}
body.light-mode .ins-pr-val{
  color:#111111 !important;
}
body.light-mode .ins-pr-val.new{
  color:#8a6400 !important;
}
body.light-mode .ins-pr-new-tag{
  color:#8a6400 !important;
  background:rgba(180,130,40,0.1) !important;
}
body.light-mode .ins-pr-caret{
  stroke:rgba(0,0,0,0.5) !important;
}
body.light-mode .ins-empty{
  color:rgba(0,0,0,0.6) !important;
}

/* Spider / performance section */
body.light-mode .ins-spider-label{
  fill:rgba(0,0,0,0.5) !important;
}
body.light-mode .ins-spider-axis{
  stroke:rgba(0,0,0,0.08) !important;
}
body.light-mode .ins-spider-ring{
  stroke:rgba(0,0,0,0.08) !important;
}

/* Rank card */
body.light-mode .ins-rank-name{
  color:#111111 !important;
}
body.light-mode .ins-rank-score{
  color:#111111 !important;
}

/* Journey / days card */
body.light-mode .ins-days-title{
  color:#111111 !important;
}

/* ── Bottom dock ── */
body.light-mode .bottom-dock{
  background:rgba(245,243,240,0.96) !important;
  border-top:1px solid rgba(0,0,0,0.09) !important;
}
body.light-mode .dock-btn span{
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .dock-btn svg{
  stroke:rgba(0,0,0,0.42) !important;
}
body.light-mode .dock-btn.active svg,
body.light-mode .dock-btn.active span{
  color:rgba(160,90,20,0.9) !important;
  stroke:rgba(160,90,20,0.9) !important;
}

/* ══ END LIGHT MODE FIX ══ */


/* ══════════════════════════════════════════════════════════════
   GLOBAL READABILITY PASS — every text element
   Dark mode: secondaries at 0.55+, primaries at 0.92+
   Light mode: solid #111/#222 primaries, #555 secondaries
   ══════════════════════════════════════════════════════════════ */

/* ── WORKOUT BANNER ─────────────────────────────────────────── */

/* Day label */
.bnr-day{
  font-size:11px !important;
  color:#D9B878 !important;
  letter-spacing:2px !important;
}
.bnr-day .banner-day-list-icon{ opacity:0.75 !important; }

/* Workout title */
.bnr-agenda .bnr-title{
  font-size:34px !important;
  font-weight:900 !important;
  color:#ffffff !important;
  text-shadow:0 2px 16px rgba(0,0,0,0.7) !important;
}

/* Info chips */
.bnr-chip{
  font-size:12px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.88) !important;
  background:rgba(0,0,0,0.45) !important;
  border-color:rgba(255,255,255,0.18) !important;
}
.bnr-chip svg{ opacity:0.85 !important; }
.bnr-chip-equip{
  font-size:11px !important;
  color:rgba(217,184,120,0.92) !important;
  border-color:rgba(217,184,120,0.28) !important;
  background:rgba(217,184,120,0.12) !important;
}

/* Timer block */
.bnr-timer-big{
  font-size:48px !important;
  color:#ffffff !important;
}
.bnr-timer-hint{
  font-size:12px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.55) !important;
}

/* Ring */
.bnr-prog-pct{
  font-size:19px !important;
  font-weight:900 !important;
  color:#ffffff !important;
}
.bnr-prog-label{
  font-size:9px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,0.6) !important;
  letter-spacing:1px !important;
}
.bnr-prog-ring-bg{ stroke:rgba(255,255,255,0.15) !important; }

/* Summary button */
.bnr-summary-btn{
  color:rgba(255,255,255,0.75) !important;
  border-color:rgba(255,255,255,0.18) !important;
  font-size:11px !important;
}
.bnr-summary-btn svg{ stroke:rgba(255,255,255,0.7) !important; }

/* Rest button */
.bnr-zzz-btn{
  color:rgba(255,255,255,0.72) !important;
  border-color:rgba(255,255,255,0.18) !important;
  background:rgba(0,0,0,0.38) !important;
}
.bnr-zzz-btn svg{ opacity:0.72 !important; }
/* Pulse until first press */
.bnr-zzz-btn.rest-pulse-hint {
  animation: restBtnPulse 2s ease-in-out infinite !important;
  border-color: rgba(255,255,255,0.40) !important;
}
@keyframes restBtnPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: 0 0 0 5px rgba(255,255,255,0.12); }
}

/* ── EXERCISE CARDS — COLLAPSED (pill) ─────────────────────── */

.bex-pill-name{
  font-size:14px !important;
  font-weight:800 !important;
  color:#ffffff !important;
}
.bex-pill-meta{
  font-size:11px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.58) !important;
}
/* Number badge on collapsed pill */
.bex-num-badge{
  font-size:15px !important;
  font-weight:900 !important;
  color:#ffffff !important;
}

/* ── EXERCISE CARDS — EXPANDED ──────────────────────────────── */

.bex-name{
  font-size:15px !important;
  font-weight:800 !important;
  color:#ffffff !important;
  letter-spacing:-0.2px !important;
}

/* Sets × reps big numbers */
.bex-primary-number{
  font-size:36px !important;
  font-weight:900 !important;
  color:#ffffff !important;
}
.bex-primary-label{
  font-size:12px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.58) !important;
}
.bex-primary-x{
  font-size:20px !important;
  color:rgba(255,255,255,0.38) !important;
}

/* REST / EST TIME / PR info row */
.bex-secondary-row{
  background:rgba(255,255,255,0.07) !important;
  border-color:rgba(255,255,255,0.1) !important;
}
.bex-sec-label{
  font-size:9px !important;
  font-weight:800 !important;
  letter-spacing:1px !important;
  color:rgba(255,255,255,0.52) !important;
}
.bex-sec-val{
  font-size:15px !important;
  font-weight:800 !important;
  color:#ffffff !important;
}

/* Best today row */
.bex-best-label{
  font-size:11px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.52) !important;
}
.bex-best-val{
  font-size:14px !important;
  font-weight:800 !important;
  color:#ffffff !important;
}
.bex-sets-count{
  font-size:12px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.52) !important;
}

/* Superset / type tag */
.bex-type-tag{
  font-size:11px !important;
  font-weight:800 !important;
}

/* Chips inside expanded card header */
.bex-chip{
  font-size:11px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.78) !important;
}

/* ── TODAY'S WORKOUT SECTION HEADER ────────────────────────── */

.bex-section-label{
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:1.2px !important;
}
.bex-section-header.free  .bex-section-label{ color:rgba(212,148,90,0.85) !important; }
.bex-section-header.cable .bex-section-label{ color:rgba(126,181,226,0.85) !important; }
.bex-section-count{
  font-size:12px !important;
  color:rgba(255,255,255,0.38) !important;
}

/* ── INSIGHT SECTION HEADERS ────────────────────────────────── */

.ins-title{
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:1.2px !important;
  color:rgba(255,255,255,0.78) !important;
}
.ins-header-icon{
  width:16px !important; height:16px !important;
  stroke:rgba(217,184,120,0.75) !important;
}
.ins-sub{
  font-size:12px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.52) !important;
}
.ins-badge{
  font-size:12px !important;
  font-weight:800 !important;
  color:rgba(217,184,120,0.95) !important;
  background:rgba(217,184,120,0.14) !important;
  border-color:rgba(217,184,120,0.25) !important;
}
.ins-empty{
  font-size:13px !important;
  font-style:italic !important;
  color:rgba(255,255,255,0.38) !important;
}

/* ── TODAY'S PRs ────────────────────────────────────────────── */

.ins-pr-name{
  font-size:14px !important;
  font-weight:700 !important;
  color:#ffffff !important;
}
.ins-pr-meta{
  font-size:11px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.52) !important;
}
.ins-pr-val{
  font-size:15px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,0.9) !important;
}
.ins-pr-val.new{ color:#D9B878 !important; }
.ins-pr-new-tag{
  font-size:10px !important;
  font-weight:800 !important;
}

/* ── PERFORMANCE (3C bars) ───────────────────────────────────── */

.ins-3c-label{
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:0.8px !important;
  color:rgba(255,255,255,0.65) !important;
}
.ins-3c-val{
  font-size:14px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,0.9) !important;
}
.ins-3c-bar-wrap{
  height:6px !important;
  background:rgba(255,255,255,0.1) !important;
}

/* ── RANK ────────────────────────────────────────────────────── */

.ins-rank-name{
  font-size:20px !important;
  font-weight:900 !important;
  color:#ffffff !important;
}
.ins-rank-score{
  font-size:28px !important;
  font-weight:900 !important;
  color:rgba(200,169,110,0.95) !important;
}
.ins-rank-score-label{
  font-size:12px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.55) !important;
}

/* ── JOURNEY (days) ──────────────────────────────────────────── */

.ins-days-count{
  font-size:22px !important;
  font-weight:900 !important;
  color:#D9B878 !important;
}
.ins-days-total{
  font-size:10px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.5) !important;
}
.ins-days-label{
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:1.8px !important;
  color:rgba(217,184,120,0.78) !important;
}
.ins-days-title{
  font-size:20px !important;
  font-weight:900 !important;
  color:#ffffff !important;
}
.ins-days-pct{
  font-size:13px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.58) !important;
}

/* ════════════════════════════════════════════════════════════════
   LIGHT MODE — same elements, dark-on-white values
   ════════════════════════════════════════════════════════════════ */

/* Banner — always over image so stays white */
body.light-mode .bnr-agenda .bnr-title{ color:#ffffff !important; }
body.light-mode .bnr-timer-big{ color:#ffffff !important; }
body.light-mode .bnr-timer-hint{ color:rgba(255,255,255,0.65) !important; }
body.light-mode .bnr-prog-pct{ color:#ffffff !important; }
body.light-mode .bnr-prog-label{ color:rgba(255,255,255,0.65) !important; }
body.light-mode .bnr-day{ color:#D9B878 !important; }
body.light-mode .bnr-chip{
  color:rgba(255,255,255,0.92) !important;
  background:rgba(0,0,0,0.42) !important;
}
body.light-mode .bnr-summary-btn{
  color:rgba(255,255,255,0.82) !important;
  background:rgba(0,0,0,0.4) !important;
}
body.light-mode .bnr-summary-btn svg{ stroke:rgba(255,255,255,0.8) !important; }

/* Exercise cards — on white card background */
body.light-mode .bex-pill-name{ color:#111111 !important; }
body.light-mode .bex-pill-meta{ color:rgba(0,0,0,0.52) !important; }
body.light-mode .bex-name{ color:#111111 !important; }
body.light-mode .bex-primary-number{ color:#111111 !important; }
body.light-mode .bex-primary-label{ color:rgba(0,0,0,0.7) !important; }
body.light-mode .bex-primary-x{ color:rgba(0,0,0,0.28) !important; }
body.light-mode .bex-secondary-row{
  background:rgba(0,0,0,0.05) !important;
  border-color:rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-sec-label{ color:rgba(0,0,0,0.48) !important; }
body.light-mode .bex-sec-val{ color:#111111 !important; }
body.light-mode .bex-best-label{ color:rgba(0,0,0,0.48) !important; }
body.light-mode .bex-best-val{ color:#111111 !important; }
body.light-mode .bex-sets-count{ color:rgba(0,0,0,0.48) !important; }
body.light-mode .bex-chip{
  color:rgba(0,0,0,0.68) !important;
  background:rgba(0,0,0,0.06) !important;
  border-color:rgba(0,0,0,0.65) !important;
}

/* Section header */
body.light-mode .bex-section-header.free  .bex-section-label{ color:rgba(160,90,20,0.9) !important; }
body.light-mode .bex-section-header.cable .bex-section-label{ color:rgba(40,100,180,0.9) !important; }
body.light-mode .bex-section-count{ color:rgba(0,0,0,0.38) !important; }

/* Insight headers */
body.light-mode .ins-title{ color:rgba(0,0,0,0.78) !important; }
body.light-mode .ins-header-icon{ stroke:rgba(140,95,15,0.7) !important; }
body.light-mode .ins-sub{ color:rgba(0,0,0,0.48) !important; }
body.light-mode .ins-badge{
  color:rgba(130,88,8,0.95) !important;
  background:rgba(180,130,30,0.12) !important;
  border-color:rgba(180,130,30,0.22) !important;
}
body.light-mode .ins-empty{ color:rgba(0,0,0,0.32) !important; }

/* PRs */
body.light-mode .ins-pr-name{ color:#111111 !important; }
body.light-mode .ins-pr-meta{ color:rgba(0,0,0,0.7) !important; }
body.light-mode .ins-pr-val{ color:#111111 !important; }
body.light-mode .ins-pr-val.new{ color:#8a6200 !important; }

/* Performance */
body.light-mode .ins-3c-label{ color:rgba(0,0,0,0.62) !important; }
body.light-mode .ins-3c-val{ color:#111111 !important; }
body.light-mode .ins-3c-bar-wrap{ background:rgba(0,0,0,0.08) !important; }

/* Rank */
body.light-mode .ins-rank-name{ color:#111111 !important; }
body.light-mode .ins-rank-score{ color:#7a5800 !important; }
body.light-mode .ins-rank-score-label{ color:rgba(0,0,0,0.48) !important; }

/* Journey */
body.light-mode .ins-days-count{ color:#7a5800 !important; }
body.light-mode .ins-days-total{ color:rgba(0,0,0,0.65) !important; }
body.light-mode .ins-days-label{ color:rgba(140,95,15,0.8) !important; }
body.light-mode .ins-days-title{ color:#111111 !important; }
body.light-mode .ins-days-pct{ color:rgba(0,0,0,0.7) !important; }

/* ══ END READABILITY PASS ══ */


/* ══════════════════════════════════════════════════════════════
   STEPPER + EXPANDED CARD — full readability fix
   Dark mode: boost from near-invisible whites
   Light mode: complete dark-on-light overrides
   ══════════════════════════════════════════════════════════════ */

/* ── DARK MODE boosts ─────────────────────────────────────── */

/* Timer row above stepper */
.bex-ex-timer{
  color:rgba(255,255,255,0.58) !important;
}
.bex-timer-icon{
  stroke:rgba(255,255,255,0.48) !important;
}
.bex-ex-timer-val{
  color:rgba(255,255,255,0.72) !important;
}
.bex-timer-btn{
  border-color:rgba(255,255,255,0.15) !important;
  background:rgba(255,255,255,0.07) !important;
  color:rgba(255,255,255,0.6) !important;
}
.bex-timer-reset svg{
  stroke:rgba(255,255,255,0.5) !important;
}

/* ── Play/pause button states — must come after .bex-timer-btn override ── */
/* Running: pause icon visible → green button */
.bex-ex-timer.is-running .bex-timer-btn.bex-timer-play {
  border-color:rgba(52,211,153,0.40) !important;
  background:rgba(52,211,153,0.14) !important;
  color:#34D399 !important;
  animation: none !important;
}
/* Paused/live: play icon visible → gold pulsing button */
.bex-ex-timer.is-live:not(.is-running) .bex-timer-btn.bex-timer-play {
  border-color:rgba(217,184,120,0.50) !important;
  background:rgba(217,184,120,0.14) !important;
  color:#D9B878 !important;
  animation: bexBtnPulse 1.6s ease-in-out infinite !important;
}
@keyframes bexBtnPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(217,184,120,0); }
  50%     { box-shadow: 0 0 0 5px rgba(217,184,120,0.28); }
}

/* Set navigation dots */
.bex-set-dot{
  color:rgba(255,255,255,0.55) !important;
  background:rgba(255,255,255,0.06) !important;
  border-color:rgba(255,255,255,0.12) !important;
}
.bex-set-dot.active{
  color:#ffffff !important;
  background:rgba(201,169,110,0.2) !important;
  border-color:rgba(201,169,110,0.55) !important;
}

/* "SET 1" / "SUPERSET 1" label */
.bex-set-label{
  color:rgba(255,255,255,0.48) !important;
  font-size:11px !important;
  letter-spacing:1.5px !important;
}

/* Superset A/B letter badge */
.bex-set-letter{
  background:rgba(162,100,190,0.18) !important;
  color:rgba(180,120,210,0.95) !important;
}

/* Exercise name in superset row */
.bex-set-ex-name{
  color:rgba(255,255,255,0.82) !important;
  font-size:13px !important;
  font-weight:700 !important;
}

/* Input labels (WEIGHT / 12 REPS / 7 MIN) */
.bex-input-label{
  color:rgba(255,255,255,0.5) !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:1px !important;
}

/* Number input box */
.bex-input{
  background:rgba(255,255,255,0.07) !important;
  border-color:rgba(255,255,255,0.14) !important;
  color:#ffffff !important;
  font-size:24px !important;
  font-weight:900 !important;
}
.bex-input.zero-value{
  color:rgba(255,255,255,0.3) !important;
}

/* × separator */
.bex-input-x{
  color:rgba(255,255,255,0.35) !important;
}

/* − and + step buttons */
.bex-step{
  border-color:rgba(255,255,255,0.13) !important;
  background:rgba(255,255,255,0.06) !important;
  color:rgba(255,255,255,0.6) !important;
  font-size:24px !important;
}
.bex-step.bex-step-plus{
  color:rgba(217,184,120,0.85) !important;
  border-color:rgba(217,184,120,0.22) !important;
  background:rgba(217,184,120,0.07) !important;
}

/* ── LIGHT MODE — all stepper elements ────────────────────── */

/* Stepper area surface */
body.light-mode .bex-stepper-area{
  background:#f4f2ef !important;
  border-color:rgba(0,0,0,0.09) !important;
}

/* Timer row */
body.light-mode .bex-ex-timer{
  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-ex-timer-val{
  color:rgba(0,0,0,0.75) !important;
}
body.light-mode .bex-timer-btn{
  border-color:rgba(0,0,0,0.15) !important;
  background:rgba(0,0,0,0.05) !important;
  color:rgba(0,0,0,0.65) !important;
}
body.light-mode .bex-timer-reset svg{
  stroke:rgba(0,0,0,0.55) !important;
}
body.light-mode .bex-timer-play svg{
  fill:rgba(0,0,0,0.65) !important;
}
body.light-mode .bex-ex-timer.is-running .bex-timer-play {
  border-color:rgba(10,128,96,0.35) !important;
  background:rgba(10,128,96,0.10) !important;
  color:#0A8060 !important;
}
body.light-mode .bex-ex-timer.is-running .bex-timer-play svg {
  fill:#0A8060 !important;
}
body.light-mode .bex-ex-timer.is-live:not(.is-running) .bex-timer-play {
  border-color:rgba(184,134,11,0.40) !important;
  background:rgba(184,134,11,0.09) !important;
  color:#8B6500 !important;
}
body.light-mode .bex-ex-timer.is-live:not(.is-running) .bex-timer-play svg {
  fill:#8B6500 !important;
}

/* Set dots */
body.light-mode .bex-set-dot{
  color:rgba(0,0,0,0.55) !important;
  background:rgba(0,0,0,0.05) !important;
  border-color:rgba(0,0,0,0.14) !important;
}
body.light-mode .bex-set-dot.active{
  color:#4a2e00 !important;
  background:rgba(180,130,30,0.15) !important;
  border-color:rgba(180,130,30,0.45) !important;
}

/* SET 1 label */
body.light-mode .bex-set-label{
  color:rgba(0,0,0,0.48) !important;
}

/* A/B letter badge */
body.light-mode .bex-set-letter{
  background:rgba(140,70,180,0.12) !important;
  color:rgba(110,50,160,0.9) !important;
}

/* Exercise name */
body.light-mode .bex-set-ex-name{
  color:rgba(0,0,0,0.82) !important;
}

/* Input labels */
body.light-mode .bex-input-label{
  color:rgba(0,0,0,0.52) !important;
}

/* Number inputs */
body.light-mode .bex-input{
  background:#ffffff !important;
  border-color:rgba(0,0,0,0.18) !important;
  color:#111111 !important;
  box-shadow:0 1px 4px rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-input.zero-value{
  color:rgba(0,0,0,0.28) !important;
}
body.light-mode .bex-input.free{
  border-color:rgba(180,110,30,0.35) !important;
}
body.light-mode .bex-input.cable{
  border-color:rgba(60,120,200,0.3) !important;
}

/* × separator */
body.light-mode .bex-input-x{
  color:rgba(0,0,0,0.32) !important;
}

/* − step button */
body.light-mode .bex-step{
  border-color:rgba(0,0,0,0.15) !important;
  background:#ffffff !important;
  color:rgba(0,0,0,0.62) !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.07) !important;
}

/* + step button */
body.light-mode .bex-step.bex-step-plus{
  color:rgba(140,90,10,0.9) !important;
  border-color:rgba(180,130,30,0.35) !important;
  background:rgba(180,130,30,0.08) !important;
  box-shadow:none !important;
}

/* vstep buttons inside pill — transparent, inherit pill bg */
body.light-mode .bex-vstep-up.bex-step,
body.light-mode .bex-vstep-down.bex-step {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: rgba(0,0,0,0.40) !important;
}
body.light-mode .bex-vstep-up.bex-step:active,
body.light-mode .bex-vstep-down.bex-step:active {
  background: rgba(0,0,0,0.07) !important;
}

body.light-mode .bex-step:active{
  background:rgba(180,130,30,0.15) !important;
  border-color:rgba(180,130,30,0.4) !important;
  color:rgba(120,75,0,1) !important;
}

/* ══ END STEPPER READABILITY ══ */


/* ══════════════════════════════════════════════════════════════
   HANDLE AFFORDANCES — calendar + week sheet
   ══════════════════════════════════════════════════════════════ */

/* ══ HANDLE AFFORDANCES — in-flow rows, no overlap ══ */

/* ── FULL CALENDAR bar — between legend and week strip ─────── */
.cal-open-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:7px 16px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  background:rgba(255,255,255,0.04);
  border-top:1px solid rgba(255,255,255,0.07);
  border-bottom:1px solid rgba(255,255,255,0.07);
  transition:background 0.15s;
}
body.light-mode .cal-open-bar{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.08);
}
.cal-open-bar:active{
  background:rgba(217,184,120,0.12);
}
.cal-open-chevron{
  width:13px; height:13px;
  stroke:rgba(255,255,255,0.5);
  flex-shrink:0;
}
body.light-mode .cal-open-chevron{
  stroke:rgba(0,0,0,0.42);
}
.cal-open-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:1.5px;
  color:rgba(255,255,255,0.5);
}
body.light-mode .cal-open-label{
  color:rgba(0,0,0,0.42);
}
.cal-open-bar:active .cal-open-label,
.cal-open-bar:active .cal-open-chevron{
  color:rgba(217,184,120,0.9);
  stroke:rgba(217,184,120,0.9);
}

/* ── WEEK SCHEDULE bar — between week strip and banner ──────── */
.week-open-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:7px 16px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  background:rgba(255,255,255,0.04);
  border-top:1px solid rgba(255,255,255,0.07);
  border-bottom:1px solid rgba(255,255,255,0.07);
  transition:background 0.15s;
}
body.light-mode .week-open-bar{
  background:rgba(0,0,0,0.03);
  border-color:rgba(0,0,0,0.08);
}
.week-open-bar:active{
  background:rgba(217,184,120,0.12);
}
.week-open-chevron{
  width:13px; height:13px;
  stroke:rgba(255,255,255,0.5);
  flex-shrink:0;
}
body.light-mode .week-open-chevron{
  stroke:rgba(0,0,0,0.42);
}
.week-open-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:1.5px;
  color:rgba(255,255,255,0.5);
}
body.light-mode .week-open-label{
  color:rgba(0,0,0,0.42);
}
.week-open-bar:active .week-open-label,
.week-open-bar:active .week-open-chevron{
  color:rgba(217,184,120,0.9);
  stroke:rgba(217,184,120,0.9);
}

/* Keep bnr-sheet-handle as no-op (drag still attached by JS) */
.bnr-sheet-handle{ display:none !important; }

/* ══ END HANDLE AFFORDANCES ══ */


/* ══ PERFORMANCE SPIDER — full-width stacked layout ══ */

.ins-spider-body{ display:none !important; } /* old side-by-side wrapper gone */

.ins-spider .ins-spider-canvas{
  width:100% !important;
  height:auto !important;
  display:block !important;
  padding:0 8px !important;
  box-sizing:border-box !important;
}

/* 3C bars — now below canvas, horizontal layout per row */
.ins-3c-stats{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:4px 16px 18px !important;
}
.ins-3c-row{
  display:grid !important;
  grid-template-columns:8px 90px 1fr 36px !important;
  align-items:center !important;
  gap:8px !important;
}
.ins-3c-dot{
  width:8px; height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.ins-3c-dot.cons{ background:#C8A96E; }
.ins-3c-dot.comm{ background:#8E99A4; }
.ins-3c-dot.ctrl{ background:#BFA08A; }
.ins-3c-label{
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:0.2px !important;
  color:rgba(255,255,255,0.65) !important;
  white-space:nowrap !important;
}
body.light-mode .ins-3c-label{ color:rgba(0,0,0,0.62) !important; }
.ins-3c-bar-wrap{
  height:7px !important;
  background:rgba(255,255,255,0.1) !important;
  border-radius:4px !important;
  overflow:hidden !important;
}
body.light-mode .ins-3c-bar-wrap{ background:rgba(0,0,0,0.08) !important; }
.ins-3c-val{
  font-size:13px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,0.9) !important;
  text-align:right !important;
}
body.light-mode .ins-3c-val{ color:#111 !important; }

/* ══ RANK — tiers as own scrollable row below header ══ */

.ins-rank-body{
  flex-wrap:wrap !important;
  padding-bottom:10px !important;
}
.ins-rank-tiers{
  display:flex !important;
  flex-direction:row !important;
  gap:8px !important;
  padding:0 14px 16px !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  flex:unset !important;
  justify-content:flex-start !important;
  width:100% !important;
}
.ins-rank-tiers::-webkit-scrollbar{ display:none !important; }

.ins-tier{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:4px !important;
  padding:10px 8px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,0.07) !important;
  background:rgba(255,255,255,0.04) !important;
  opacity:0.45 !important;
  min-width:68px !important;
  flex-shrink:0 !important;
}
body.light-mode .ins-tier{
  background:rgba(0,0,0,0.03) !important;
  border-color:rgba(0,0,0,0.09) !important;
}
.ins-tier img{ width:34px !important; height:34px !important; }
.ins-tier span:nth-child(2){
  font-size:10px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,0.75) !important;
  letter-spacing:0.2px !important;
}
body.light-mode .ins-tier span:nth-child(2){ color:rgba(0,0,0,0.65) !important; }
.ins-tier-range{
  font-size:10px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.38) !important;
}
body.light-mode .ins-tier-range{ color:rgba(0,0,0,0.38) !important; }
.ins-tier.active{
  opacity:1 !important;
  background:rgba(200,169,110,0.12) !important;
  border-color:rgba(200,169,110,0.38) !important;
}

/* ══ END PERF + RANK FIXES ══ */


/* ══ BANNER TIMER — compact idle, full when active ══

   Idle:  single row — small time + hint side by side, 44px tall
   Live/Paused: full size — big number + hint stacked
   ══════════════════════════════════════════════════════════════ */

/* Base block — transitions for smooth grow */
#bannerTimerRow{
  transition:
    min-height 0.3s cubic-bezier(0.32,0.72,0,1),
    padding    0.3s cubic-bezier(0.32,0.72,0,1),
    background 0.2s ease,
    border-color 0.2s ease !important;
}

/* ── IDLE: slim pill ─────────────────────────────────────── */
#bannerTimerRow.idle{
  min-height:0 !important;
  padding:10px 16px !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:8px !important;
}
#bannerTimerRow.idle .bnr-timer-display{
  align-items:center !important;
}
#bannerTimerRow.idle .bnr-timer-big{
  font-size:22px !important;
  letter-spacing:-0.5px !important;
  color:rgba(255,255,255,0.55) !important;
}
#bannerTimerRow.idle .bnr-timer-hint{
  font-size:12px !important;
  color:rgba(255,255,255,0.42) !important;
  /* side-by-side with time when idle */
  margin-top:0 !important;
}

/* ── LIVE / PAUSED: same pill shape, just color change ─── */
#bannerTimerRow.live,
#bannerTimerRow.paused{
  min-height:0 !important;
  padding:7px 14px 7px 10px !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:7px !important;
}
#bannerTimerRow.live .bnr-timer-big,
#bannerTimerRow.paused .bnr-timer-big{
  font-size:15px !important;
  letter-spacing:-0.3px !important;
}
#bannerTimerRow.live .bnr-timer-hint,
#bannerTimerRow.paused .bnr-timer-hint{
  font-size:10px !important;
  margin-top:0 !important;
}

/* ══ END TIMER COMPACT ══ */


/* ══════════════════════════════════════════════════════════════
   NAVIGATION CLARITY — toolbar labels, day labels, section divider
   ══════════════════════════════════════════════════════════════ */

/* ── Toolbar buttons with labels ────────────────────────────── */
.toolbar-btn{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  padding:6px 4px !important;
  min-height:52px !important;
}
.toolbar-btn-label{
  font-size:9px !important;
  font-weight:700 !important;
  letter-spacing:0.4px !important;
  color:rgba(255,255,255,0.42) !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  pointer-events:none !important;
}
body.light-mode .toolbar-btn-label{
  color:rgba(0,0,0,0.38) !important;
}
.toolbar-btn:active .toolbar-btn-label{
  color:rgba(217,184,120,0.9) !important;
}
/* Keep svg size the same */
.month-row-btns .toolbar-btn svg{
  width:20px !important;
  height:20px !important;
  flex-shrink:0 !important;
}
/* Days button — label sits below the ring+text stack */
.days-completed-btn.toolbar-btn{
  gap:1px !important;
}

/* ── Day cell workout-type label ─────────────────────────────── */
.day-workout-label{
  font-size:8px !important;
  font-weight:700 !important;
  letter-spacing:0.2px !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  margin-top:3px !important;
  opacity:0.65 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:100% !important;
}
.day-workout-label.free{
  color:var(--accent-orange) !important;
}
.day-workout-label.cable{
  color:var(--blue) !important;
}
.day-workout-label.rest{
  color:rgba(255,255,255,0.3) !important;
}
body.light-mode .day-workout-label.rest{
  color:rgba(0,0,0,0.25) !important;
}

/* Selected day — label pops brighter */
.day-col.selected .day-workout-label{
  opacity:0.9 !important;
}

/* ── TODAY'S WORKOUT section header — stronger anchor ────────── */
.bex-section-header{
  padding:20px 16px 12px !important;
  border-bottom:1px solid rgba(255,255,255,0.06) !important;
  margin-bottom:4px !important;
}
body.light-mode .bex-section-header{
  border-bottom-color:rgba(0,0,0,0.07) !important;
}
.bex-section-label{
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:2px !important;
}
.bex-section-header.free .bex-section-label{
  color:rgba(212,148,90,0.95) !important;
}
.bex-section-header.cable .bex-section-label{
  color:rgba(126,181,226,0.95) !important;
}
body.light-mode .bex-section-header.free .bex-section-label{
  color:rgba(160,90,20,0.95) !important;
}
body.light-mode .bex-section-header.cable .bex-section-label{
  color:rgba(40,100,180,0.95) !important;
}
.bex-section-count{
  font-size:12px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.35) !important;
}
body.light-mode .bex-section-count{
  color:rgba(0,0,0,0.32) !important;
}

/* ── YOUR PROGRESS section divider ──────────────────────────── */
.stats-section-divider{
  display:flex;
  align-items:center;
  gap:12px;
  padding:24px 20px 8px;
}
.stats-divider-line{
  flex:1;
  height:1px;
  background:rgba(255,255,255,0.08);
  border-radius:1px;
}
body.light-mode .stats-divider-line{
  background:rgba(0,0,0,0.09);
}
.stats-divider-label{
  font-size:10px;
  font-weight:900;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.28);
  white-space:nowrap;
  flex-shrink:0;
}
body.light-mode .stats-divider-label{
  color:rgba(0,0,0,0.28);
}

/* Tighten top padding of insight-sections since divider handles it */
.insight-sections{
  padding-top:4px !important;
}

/* ── Calendar legend always visible, slightly larger ─────────── */
.calendar-legend{
  display:flex !important;
  padding:6px 16px !important;
  margin-bottom:4px !important;
}
.calendar-legend-item{
  font-size:11px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.6) !important;
}
body.light-mode .calendar-legend-item{
  color:rgba(0,0,0,0.65) !important;
}

/* ══ END NAVIGATION CLARITY ══ */


/* ══════════════════════════════════════════════════════════════
   EXERCISE CARD — COLLAPSED + EXPANDED READABILITY
   ══════════════════════════════════════════════════════════════ */

/* ── Collapsed pill — bigger, clearer expand signal ─────────── */

/* Taller pill with stronger border */
.bex-pill-layer{
  min-height:68px !important;
  border:1px solid rgba(255,255,255,0.13) !important;
  background:linear-gradient(90deg,
    rgba(18,15,12,0.97) 0%,
    rgba(18,15,12,0.85) 40%,
    rgba(18,15,12,0.32) 65%,
    rgba(18,15,12,0.0) 100%) !important;
}
body.light-mode .bex-pill-layer{
  background:#ffffff !important;
  border-color:rgba(0,0,0,0.12) !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.07) !important;
}

/* Wider accent bar */
.bex-accent-bar{
  width:4px !important;
}

/* Name — stronger */
.bex-pill-name{
  font-size:14px !important;
  font-weight:800 !important;
  color:#ffffff !important;
  letter-spacing:-0.2px !important;
}
body.light-mode .bex-pill-name{
  color:#111111 !important;
}

/* Meta — more readable */
.bex-pill-meta{
  font-size:11px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,0.52) !important;
}
body.light-mode .bex-pill-meta{
  color:rgba(0,0,0,0.48) !important;
}

/* Chevron — bigger, more prominent, with explicit "expand" hint */
.bex-pill-chevron{
  width:44px !important;
  padding-right:14px !important;
  flex-direction:column !important;
  gap:3px !important;
}
.bex-pill-chevron svg{
  width:18px !important;
  height:18px !important;
  color:rgba(255,255,255,0.6) !important;
}
body.light-mode .bex-pill-chevron svg{
  color:rgba(0,0,0,0.65) !important;
}

/* "EXPAND" micro-label under chevron */
/* TAP label removed — chevron is enough */

/* Active state — clear response */
.bex-pill-layer:active{
  background:linear-gradient(90deg,
    rgba(217,184,120,0.12) 0%,
    rgba(217,184,120,0.06) 50%,
    rgba(217,184,120,0.0) 100%) !important;
  border-color:rgba(217,184,120,0.28) !important;
}

/* Completed — strikethrough stays but dims */
.banner-ex-card.ex-done .bex-pill-name{
  color:rgba(255,255,255,0.35) !important;
}

/* ── Expanded card — solid info area, high-contrast text ─────── */

/* Darken the entire open card so image doesn't compete */
.bex-inline-open .banner-ex-card{
  background-color:#0c0a08 !important;
}

/* Info area — solid dark backdrop so text is always legible */
.bex-inline-open .banner-ex-card .bex-info{
  background:rgba(10,8,6,0.88) !important;
  border-radius:0 0 0 0 !important;
  padding:14px 14px 10px 10px !important;
  backdrop-filter:blur(2px) !important;
  -webkit-backdrop-filter:blur(2px) !important;
}
body.light-mode .bex-inline-open .banner-ex-card .bex-info{
  background:rgba(248,246,242,0.94) !important;
}

/* Exercise name in expanded state */
.bex-inline-open .bex-name{
  font-size:16px !important;
  font-weight:900 !important;
  color:#ffffff !important;
  letter-spacing:-0.3px !important;
  line-height:1.2 !important;
  margin-bottom:2px !important;
}
body.light-mode .bex-inline-open .bex-name{
  color:#111111 !important;
}

/* Primary stat — sets × reps */
.bex-primary-number{
  font-size:38px !important;
  font-weight:900 !important;
  color:#ffffff !important;
}
body.light-mode .bex-primary-number{
  color:#111111 !important;
}
.bex-primary-label{
  font-size:12px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.55) !important;
  letter-spacing:0.3px !important;
}
body.light-mode .bex-primary-label{
  color:rgba(0,0,0,0.7) !important;
}
.bex-primary-x{
  font-size:22px !important;
  color:rgba(255,255,255,0.3) !important;
}
body.light-mode .bex-primary-x{
  color:rgba(0,0,0,0.22) !important;
}

/* Secondary row — REST · EST TIME · PR TARGET */
.bex-secondary-row{
  background:rgba(255,255,255,0.06) !important;
  border-color:rgba(255,255,255,0.1) !important;
  margin-top:4px !important;
}
body.light-mode .bex-secondary-row{
  background:rgba(0,0,0,0.05) !important;
  border-color:rgba(0,0,0,0.65) !important;
}
.bex-sec-label{
  font-size:9px !important;
  font-weight:800 !important;
  letter-spacing:1px !important;
  color:rgba(255,255,255,0.48) !important;
}
body.light-mode .bex-sec-label{
  color:rgba(0,0,0,0.65) !important;
}
.bex-sec-val{
  font-size:16px !important;
  font-weight:900 !important;
  color:#ffffff !important;
}
body.light-mode .bex-sec-val{
  color:#111111 !important;
}

/* Best today row */
.bex-best-label{
  font-size:11px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.5) !important;
}
body.light-mode .bex-best-label{
  color:rgba(0,0,0,0.48) !important;
}
.bex-best-val{
  font-size:15px !important;
  font-weight:800 !important;
  color:#ffffff !important;
}
body.light-mode .bex-best-val{
  color:#111111 !important;
}
.bex-sets-count{
  font-size:12px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.45) !important;
}
body.light-mode .bex-sets-count{
  color:rgba(0,0,0,0.42) !important;
}

/* Chips */
.bex-inline-open .bex-chip{
  font-size:11px !important;
  color:rgba(255,255,255,0.72) !important;
  background:rgba(255,255,255,0.08) !important;
  border-color:rgba(255,255,255,0.12) !important;
}
body.light-mode .bex-inline-open .bex-chip{
  color:rgba(0,0,0,0.68) !important;
  background:rgba(0,0,0,0.06) !important;
  border-color:rgba(0,0,0,0.65) !important;
}

/* ── PR graph canvas ─────────────────────────────────────────── */
.ins-graph-canvas{
  width:100% !important;
  height:auto !important;
  display:block !important;
  padding:0 4px !important;
  box-sizing:border-box !important;
}
.ins-graph-wrap{
  padding:4px 12px 12px !important;
}

/* ══ END CARD READABILITY ══ */


/* ══════════════════════════════════════════════════════════════
   PERFORMANCE CARD — arc gauge layout
   ══════════════════════════════════════════════════════════════ */

/* Canvas fills card width, fixed aspect ratio */
.ins-spider .ins-spider-canvas{
  width:100% !important;
  height:auto !important;
  display:block !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

/* Hide the old text bars — gauges replace them visually */
.ins-spider .ins-3c-stats{
  display:none !important;
}

/* Card itself — no extra top padding needed */
.ins-spider .ins-header{
  padding-bottom:4px !important;
}

/* ══ END PERFORMANCE CARD ══ */


/* ══════════════════════════════════════════════════════════════
   PR GRAPH — tall line chart
   ══════════════════════════════════════════════════════════════ */
.ins-graph-canvas{
  width:100% !important;
  height:auto !important;
  display:block !important;
  padding:0 8px !important;
  box-sizing:border-box !important;
}

/* ══════════════════════════════════════════════════════════════
   PERFORMANCE — spider/radar canvas + restore bars beneath
   ══════════════════════════════════════════════════════════════ */
.ins-spider .ins-spider-canvas{
  width:100% !important;
  height:auto !important;
  display:block !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
/* Bars sit below canvas — restore them */
.ins-spider .ins-3c-stats{
  display:flex !important;
}

/* ══ END GRAPH FIXES ══ */


/* ══════════════════════════════════════════════════════════════
   SIMPLIFICATION PASS
   ══════════════════════════════════════════════════════════════ */

/* Toolbar — icons only, no labels, lighter feel */
.toolbar-btn{
  flex-direction:column !important;
  min-height:44px !important;
  padding:8px 4px !important;
}
.toolbar-btn-label{ display:none !important; }

/* Day workout label — hide (color coding is enough) */
.day-workout-label{ display:none !important; }

/* Cal/week open bars — slimmer */
.cal-open-bar, .week-open-bar{
  padding:6px 16px !important;
  opacity:0.55 !important;
}

/* Exercise pill — clean, no flex-direction noise from chevron */
.bex-pill-chevron{
  flex-direction:row !important;
  gap:0 !important;
}

/* Expanded card secondary row — hide it, too much info at once */
.bex-inline-open .bex-secondary-row{ display:none !important; }
/* Also hide chips (muscle group etc) in expanded — just name + primary stat */
.bex-inline-open .bex-chip{ display:none !important; }
/* Hide "best today" row too */
/* today-row shown in expanded state */
.bex-inline-open .bex-today-row{ display:flex !important; }

/* PR graph canvas — taller for better line visibility */
.ins-graph-canvas{
  width:100% !important;
  height:auto !important;
  display:block !important;
  padding:0 8px 4px !important;
  box-sizing:border-box !important;
}

/* Spider canvas */
.ins-spider .ins-spider-canvas{
  width:100% !important;
  height:auto !important;
  display:block !important;
  padding:0 !important;
}

/* Hide 3C bars — spider already shows the same data */
.ins-spider .ins-3c-stats{ display:none !important; }

/* Insight cards — a bit more breathing room, nothing else */
.ins-card{ border-radius:16px !important; }

/* ══ END SIMPLIFICATION ══ */


/* ══════════════════════════════════════════════════════════════
   PREMIUM REFINEMENTS — all 12 analysis points
   ══════════════════════════════════════════════════════════════ */

/* ── Change 1+2: Hide toolbar row entirely ───────────────────── */
.month-row{ display:none !important; }

/* ── Change 3: Sheet handle pills ───────────────────────────── */
.sheet-handle-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 0 6px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sheet-handle-bar{
  width:36px;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.2);
  transition:background 0.15s ease, transform 0.15s ease;
}
.sheet-handle-pill:active .sheet-handle-bar{
  background:rgba(217,184,120,0.55);
  transform:scaleX(0.85);
}
body.light-mode .sheet-handle-bar{
  background:rgba(0,0,0,0.18);
}
body.light-mode .sheet-handle-pill:active .sheet-handle-bar{
  background:rgba(160,100,20,0.45);
}
/* Hide old bar styles */
.cal-open-bar, .week-open-bar{ display:none !important; }

/* ── Change 4: Exercise pills — gradient left solid, right fades to show hero image ── */
.bex-pill-layer{
  background:linear-gradient(90deg,
    rgba(10,7,4,0.96) 0%,
    rgba(10,7,4,0.90) 48%,
    rgba(10,7,4,0.50) 68%,
    rgba(10,7,4,0.10) 84%,
    rgba(10,7,4,0.00) 100%) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid rgba(255,255,255,0.11) !important;
  border-radius:14px !important;
  min-height:64px !important;
}
body.light-mode .bex-pill-layer{
  background:linear-gradient(90deg,
    rgba(250,247,243,0.97) 0%,
    rgba(250,247,243,0.92) 48%,
    rgba(250,247,243,0.60) 68%,
    rgba(250,247,243,0.10) 84%,
    rgba(250,247,243,0.00) 100%) !important;
  border-color:rgba(0,0,0,0.09) !important;
}
.bex-pill-layer:active{
  border-color:rgba(217,184,120,0.30) !important;
}

/* ── Change 4: Exercise name takes visual priority ───────────── */
.bex-section-label{
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:2px !important;
  color:rgba(255,255,255,0.38) !important;
}
body.light-mode .bex-section-label{
  color:rgba(0,0,0,0.35) !important;
}
.bex-section-header.free .bex-section-label,
.bex-section-header.cable .bex-section-label{
  color:rgba(255,255,255,0.38) !important;
}
body.light-mode .bex-section-header.free .bex-section-label,
body.light-mode .bex-section-header.cable .bex-section-label{
  color:rgba(0,0,0,0.35) !important;
}
.bex-pill-name{
  font-size:15px !important;
  font-weight:800 !important;
  color:#ffffff !important;
  letter-spacing:-0.2px !important;
  white-space:normal !important;
  word-break:break-word !important;
  overflow-wrap:break-word !important;
  line-height:1.25 !important;
}
body.light-mode .bex-pill-name{
  color:#111111 !important;
}

/* ── Change 5: Banner bottom — unified zone, larger ring ─────── */
.bnr-prog-ring-wrap{
  width:96px !important;
  height:96px !important;
}
.bnr-prog-pct{
  font-size:22px !important;
  font-weight:900 !important;
}
.bnr-prog-label{
  font-size:9px !important;
  color:rgba(255,255,255,0.42) !important;
}
/* Timer block — no box, just the numbers */
.bnr-timer-block{
  background:transparent !important;
  border:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:8px 12px !important;
}
.bnr-timer-big{
  font-size:64px !important;
  letter-spacing:-3px !important;
  font-weight:900 !important;
  color:rgba(255,255,255,0.96) !important;
  font-variant-numeric:tabular-nums !important;
}
.bnr-timer-hint{
  font-size:11px !important;
  letter-spacing:0.5px !important;
  color:rgba(255,255,255,0.35) !important;
}
.bnr-timer-block.live .bnr-timer-big{ color:#34D399 !important; }
.bnr-timer-block.live .bnr-timer-hint{ color:rgba(52,211,153,0.55) !important; }
.bnr-timer-block.paused .bnr-timer-big{ color:#D9B878 !important; }
.bnr-timer-block.paused .bnr-timer-hint{ color:rgba(217,184,120,0.55) !important; }

/* ── Change 6: Insight cards — differentiated, not identical ─── */
/* Graph card — canvas bleeds to bottom edge */
.ins-pr-graph .ins-graph-wrap{
  padding:0 0 0 !important;
}
.ins-pr-graph .ins-graph-canvas{
  border-radius:0 0 16px 16px !important;
  padding:0 !important;
}
/* Spider card — faint ambient glow behind chart */
.ins-spider{
  position:relative;
  overflow:hidden;
}
.ins-spider::before{
  content:'';
  position:absolute;
  top:30%; left:50%;
  transform:translate(-50%,-50%);
  width:60%; height:60%;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(200,169,110,0.10) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}
body.light-mode .ins-spider::before{
  background:radial-gradient(ellipse, rgba(160,100,20,0.07) 0%, transparent 70%);
}
.ins-spider > *{ position:relative; z-index:1; }

/* ── Change 7: Rank icon — larger, more presence ────────────── */
.ins-rank-icon{
  width:76px !important;
  height:76px !important;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,0.5)) !important;
}
/* Rank card ambient glow — stronger */
.ins-rank-bg{
  opacity:0.18 !important;
  background:radial-gradient(ellipse at 20% 50%, rgba(200,169,110,1) 0%, transparent 65%) !important;
}
body.light-mode .ins-rank-bg{
  opacity:0.12 !important;
}
.ins-rank-name{
  font-size:22px !important;
  font-weight:900 !important;
  letter-spacing:-0.5px !important;
}
.ins-rank-score{
  font-size:32px !important;
  font-weight:900 !important;
  letter-spacing:-1.5px !important;
}

/* ── Change 8: PR rows — colored left accent border ─────────── */
.ins-pr-row{
  border-left:3px solid rgba(217,184,120,0.55) !important;
  border-radius:0 12px 12px 0 !important;
  background:rgba(217,184,120,0.04) !important;
  border-top:1px solid rgba(255,255,255,0.05) !important;
  border-right:1px solid rgba(255,255,255,0.05) !important;
  border-bottom:1px solid rgba(255,255,255,0.05) !important;
}
body.light-mode .ins-pr-row{
  background:rgba(200,169,110,0.06) !important;
  border-left-color:rgba(160,100,20,0.50) !important;
  border-top-color:rgba(0,0,0,0.06) !important;
  border-right-color:rgba(0,0,0,0.06) !important;
  border-bottom-color:rgba(0,0,0,0.06) !important;
}
.ins-pr-row.cable{
  border-left-color:rgba(126,181,226,0.55) !important;
  background:rgba(126,181,226,0.04) !important;
}
body.light-mode .ins-pr-row.cable{
  border-left-color:rgba(40,100,200,0.45) !important;
}
.ins-pr-row.is-new{
  border-left-color:rgba(217,184,120,0.90) !important;
}
.ins-pr-row.cable.is-new{
  border-left-color:rgba(126,181,226,0.90) !important;
}

/* ── Change 9: Spider — ambient glow behind filled shape ─────── */
/* (handled by ::before pseudo above, renderer also draws it) */

/* ── Change 10: Header score sub-label ──────────────────────── */
.header-score-sublabel{
  font-size:8px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.32);
  text-align:right;
  line-height:1;
  margin-top:1px;
}
body.light-mode .header-score-sublabel{
  color:rgba(0,0,0,0.30);
}

/* ── Change 11: Progress tab navigation ──────────────────────── */
.progress-tab-nav{
  display:flex;
  align-items:center;
  gap:6px;
  padding:20px 16px 8px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.progress-tab-nav::-webkit-scrollbar{ display:none; }
.prog-tab{
  flex-shrink:0;
  padding:6px 16px;
  border-radius:20px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.3px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.45);
  cursor:pointer;
  transition:all 0.15s ease;
  -webkit-tap-highlight-color:transparent;
}
.prog-tab.active{
  background:rgba(217,184,120,0.14);
  border-color:rgba(217,184,120,0.30);
  color:rgba(217,184,120,1);
}
.prog-tab:active{
  transform:scale(0.95);
}
body.light-mode .prog-tab{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.10);
  color:rgba(0,0,0,0.42);
}
body.light-mode .prog-tab.active{
  background:rgba(160,100,20,0.10);
  border-color:rgba(160,100,20,0.28);
  color:rgba(140,85,10,1);
}

/* ── Change 12: Section header quieter, pill name louder ─────── */
/* (already applied above in #4 — confirmed consistent) */

/* ── Month-label-row: clean single nav ───────────────────────── */
.month-label-row{
  padding:8px 16px 4px !important;
  justify-content:center !important;
  gap:8px !important;
}
.nav-btn.month-btn{
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:1.5px !important;
  color:rgba(255,255,255,0.88) !important;
}
body.light-mode .nav-btn.month-btn{
  color:rgba(0,0,0,0.82) !important;
}
.month-arrow svg{
  stroke:rgba(255,255,255,0.55) !important;
}
body.light-mode .month-arrow svg{
  stroke:rgba(0,0,0,0.50) !important;
}

/* ══ END PREMIUM REFINEMENTS ══ */


/* ══════════════════════════════════════════════════════════════
   BUG FIXES — collapse / image / tempo
   ══════════════════════════════════════════════════════════════ */

/* Fix: secondary row was hidden — restore it, it now has tempo */
.bex-inline-open .bex-secondary-row{ display:flex !important; }

/* Tempo value — monospace code-like look */
.bex-tempo-val{
  font-family:'Menlo','SF Mono','Courier New',monospace !important;
  letter-spacing:1.5px !important;
  font-size:13px !important;
  color:rgba(217,184,120,0.9) !important;
}
body.light-mode .bex-tempo-val{
  color:rgba(140,85,10,0.9) !important;
}

/* Pill layer light-mode — match restored gradient logic */
body.light-mode .bex-pill-layer{
  background:linear-gradient(90deg,
    rgba(255,252,248,0.97) 0%,
    rgba(255,252,248,0.90) 38%,
    rgba(255,252,248,0.45) 62%,
    rgba(255,252,248,0.0) 100%) !important;
}

/* ══ END BUG FIXES ══ */


/* ══════════════════════════════════════════════════════════════
   MODERN REFRESH — full page pass
   ══════════════════════════════════════════════════════════════ */

/* ── Page body / scrollable area ─────────────────────────────── */
html, body{
  background:var(--bg) !important;
}

/* ── Header: glass blur, subtle border ───────────────────────── */
header{
  background:rgba(14,14,24,0.94) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  border-bottom:1px solid rgba(255,255,255,0.08) !important;
}
header::after{
  background:linear-gradient(90deg, transparent 0%, rgba(200,169,110,0.22) 50%, transparent 100%) !important;
}
body.light-mode header{
  background:rgba(238,236,248,0.92) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
}

/* ── Back button: slightly more visible ──────────────────────── */
.back{
  background:rgba(255,255,255,0.07) !important;
  border-color:rgba(255,255,255,0.11) !important;
}
body.light-mode .back{
  background:rgba(0,0,0,0.05) !important;
  border-color:rgba(0,0,0,0.10) !important;
}

/* ── Month nav row ───────────────────────────────────────────── */
.month-label-row{
  padding:8px 16px 6px !important;
}
.nav-btn.month-btn{
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:1.5px !important;
  color:rgba(255,255,255,0.90) !important;
}
body.light-mode .nav-btn.month-btn{
  color:rgba(0,0,0,0.82) !important;
}
.month-arrow svg{
  stroke:rgba(255,255,255,0.50) !important;
}
body.light-mode .month-arrow svg{
  stroke:rgba(0,0,0,0.45) !important;
}

/* ── Week strip day cells ─────────────────────────────────────── */
.day-col{
  background:rgba(255,255,255,0.05) !important;
  border-color:rgba(255,255,255,0.0) !important;
  border-radius:16px !important;
}
.day-col.selected{
  background:rgba(255,255,255,0.10) !important;
  border-color:rgba(255,255,255,0.45) !important;
  box-shadow:0 0 14px rgba(255,255,255,0.08) !important;
}
body.light-mode .day-col{
  background:rgba(0,0,0,0.05) !important;
}
body.light-mode .day-col.selected{
  background:rgba(0,0,0,0.08) !important;
  border-color:rgba(0,0,0,0.55) !important;
}

/* ── Sheet handle pill ───────────────────────────────────────── */
.sheet-handle-bar{
  background:rgba(255,255,255,0.18) !important;
}
body.light-mode .sheet-handle-bar{
  background:rgba(0,0,0,0.18) !important;
}

/* ── Banner card — richer surface ────────────────────────────── */
.bnr-card{
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

/* ── Banner bottom gradient — deeper so actions pop ─────────── */
.bnr-overlay-bottom{
  background:linear-gradient(to top,
    rgba(10,8,20,0.95) 0%,
    rgba(10,8,20,0.65) 40%,
    rgba(10,8,20,0.0) 70%) !important;
}

/* ── Banner title bigger, crisper ────────────────────────────── */
.bnr-agenda .bnr-title{
  font-size:34px !important;
  font-weight:900 !important;
  letter-spacing:-1.5px !important;
  text-shadow:0 2px 16px rgba(0,0,0,0.6) !important;
}

/* ── Banner chips: frosted glass ────────────────────────────── */
.bnr-chip{
  background:rgba(255,255,255,0.10) !important;
  border-color:rgba(255,255,255,0.16) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  font-size:11px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,0.88) !important;
}

/* ── Banner timer — large, no box ───────────────────────────── */
.bnr-timer-big{
  font-size:54px !important;
  font-weight:900 !important;
  letter-spacing:-3px !important;
  line-height:1 !important;
}

/* ── Exercise section header ─────────────────────────────────── */
.bex-section-header{
  padding:20px 20px 10px !important;
}

/* ── Exercise pills: richer surface with depth ───────────────── */
.bex-pill-layer{
  background:linear-gradient(90deg,
    rgba(18,15,28,0.97) 0%,
    rgba(18,15,28,0.92) 46%,
    rgba(18,15,28,0.55) 66%,
    rgba(18,15,28,0.12) 82%,
    rgba(18,15,28,0.00) 100%) !important;
  border-color:rgba(255,255,255,0.10) !important;
  min-height:68px !important;
}
body.light-mode .bex-pill-layer{
  background:linear-gradient(90deg,
    rgba(252,250,255,0.98) 0%,
    rgba(252,250,255,0.93) 46%,
    rgba(252,250,255,0.62) 66%,
    rgba(252,250,255,0.12) 82%,
    rgba(252,250,255,0.00) 100%) !important;
  border-color:rgba(0,0,0,0.09) !important;
}

/* ── Exercise name — maximum legibility ─────────────────────── */
.bex-pill-name{
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:-0.3px !important;
  color:rgba(255,255,255,0.96) !important;
}
body.light-mode .bex-pill-name{
  color:rgba(0,0,0,0.88) !important;
}

/* ── Accent bar — slightly thicker ──────────────────────────── */
.bex-accent-bar{
  width:4px !important;
  border-radius:2px 0 0 2px !important;
}

/* ── Insight cards — lifted surface, real depth ─────────────── */
.ins-card{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
body.light-mode .ins-card{
  background:rgba(255,255,255,0.92) !important;
  border-color:rgba(0,0,0,0.07) !important;
  box-shadow:0 2px 12px rgba(0,0,0,0.07) !important;
}

/* ── Insight section header text ─────────────────────────────── */
.ins-title{
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:1.5px !important;
  color:rgba(255,255,255,0.78) !important;
}
body.light-mode .ins-title{
  color:rgba(0,0,0,0.65) !important;
}
.ins-header-icon{
  stroke:rgba(217,184,120,0.80) !important;
  width:15px !important;
  height:15px !important;
}

/* ── PR rows: consistent depth ───────────────────────────────── */
.ins-pr-row{
  background:rgba(255,255,255,0.035) !important;
}
body.light-mode .ins-pr-row{
  background:rgba(0,0,0,0.03) !important;
}

/* ── Spider / performance card glow: stronger ───────────────── */
.ins-spider::before{
  opacity:1 !important;
  width:70% !important;
  height:70% !important;
  top:35% !important;
}

/* ── Rank card ambient: warmer ───────────────────────────────── */
.ins-rank-bg{
  opacity:0.22 !important;
}
body.light-mode .ins-rank-bg{
  opacity:0.14 !important;
}

/* ── Progress tabs ───────────────────────────────────────────── */
.progress-tab-nav{
  padding:16px 16px 10px !important;
}
.prog-tab{
  background:rgba(255,255,255,0.06) !important;
  border-color:rgba(255,255,255,0.10) !important;
  color:rgba(255,255,255,0.50) !important;
  border-radius:22px !important;
  font-size:12px !important;
  padding:7px 18px !important;
}
.prog-tab.active{
  background:rgba(212,184,128,0.16) !important;
  border-color:rgba(212,184,128,0.35) !important;
  color:rgba(230,209,163,1) !important;
}
body.light-mode .prog-tab{
  background:rgba(0,0,0,0.05) !important;
  border-color:rgba(0,0,0,0.10) !important;
  color:rgba(0,0,0,0.44) !important;
}
body.light-mode .prog-tab.active{
  background:rgba(140,90,20,0.11) !important;
  border-color:rgba(140,90,20,0.28) !important;
  color:rgba(120,75,10,1) !important;
}

/* ── YOUR PROGRESS divider spacing ──────────────────────────── */
.stats-section-divider{
  display:none !important;
}

/* ── Dock nav: frosted ───────────────────────────────────────── */
.dock-bar{
  background:rgba(14,14,26,0.96) !important;
  backdrop-filter:blur(24px) !important;
  -webkit-backdrop-filter:blur(24px) !important;
  border-top:1px solid rgba(255,255,255,0.08) !important;
}
body.light-mode .dock-bar, body.light-mode .bottom-dock{
  background:rgba(240,238,250,0.96) !important;
  backdrop-filter:blur(24px) !important;
  -webkit-backdrop-filter:blur(24px) !important;
  border-top:1px solid rgba(0,0,0,0.08) !important;
}
.dock-btn svg{
  color:rgba(255,255,255,0.42) !important;
}
.dock-btn.active svg{
  color:rgba(217,184,120,0.95) !important;
}
body.light-mode .dock-btn svg{
  stroke:rgba(0,0,0,0.40) !important;
  color:rgba(0,0,0,0.40) !important;
}

/* ── Muscle icon in expanded hero ────────────────────────────── */
.bex-muscle-badge{
  opacity:0.88 !important;
}
.bex-muscle-badge img{
  filter:brightness(1.15) saturate(0.85) !important;
}

/* ── Streak indicator ────────────────────────────────────────── */
.streak-indicator{
  font-size:11px !important;
  letter-spacing:0.3px !important;
  opacity:0.7 !important;
}

/* ── Week-nav section background ─────────────────────────────── */
.week-nav{
  background:transparent !important;
}

/* ═══ END MODERN REFRESH ══════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   SET NAV BAR — replaces small dots
   ══════════════════════════════════════════════════════════════ */

/* Hide old dot nav if it somehow appears */
.bex-set-dots{ display:none !important; }

/* ── Full-width set navigation row ───────────────────────────── */
.bex-set-nav{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 0 10px 0;
}

/* ── Prev / Next arrow buttons ── */
.bex-set-nav-arrow{
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.15s ease;
  /* Extend tap target without visual size */
  padding:4px;
  box-sizing:content-box;
}
.bex-set-nav-arrow svg{ width:16px; height:16px; }
.bex-set-nav-arrow:active{ transform:scale(0.88); background:rgba(255,255,255,0.12); }
.bex-set-nav-arrow.disabled{ opacity:0.20; pointer-events:none; }

/* ── Tab strip ── */
.bex-set-tabs{
  flex:1;
  display:flex;
  gap:5px;
  overflow:hidden;
  min-width:0;
}
.bex-set-tabs::-webkit-scrollbar{ display:none; }

/* ── Individual set tab — 44px tall for easy tapping ── */
.bex-set-tab{
  flex:1;
  min-width:0;
  height:44px;
  border-radius:12px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.09);
  color:rgba(255,255,255,0.40);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:all 0.18s ease;
  padding:4px 4px;
}
.bex-set-tab:active{ transform:scale(0.94); }

/* ── Active tab — clear gold highlight ── */
.bex-set-tab.active{
  background:rgba(217,184,120,0.14);
  border-color:rgba(217,184,120,0.45);
  color:rgba(230,209,163,1);
  font-weight:900;
  box-shadow:0 2px 12px rgba(217,184,120,0.12), inset 0 1px 0 rgba(217,184,120,0.15);
}

/* ── Complete tab — green tint ── */
.bex-set-tab.bex-tab-complete {
  background:rgba(52,211,153,0.10);
  border-color:rgba(52,211,153,0.28);
  color:rgba(52,211,153,0.80);
}

/* Cable week active tab — gold consistent, cable accent on dot only */

/* ── SET label inside each slide — smaller since nav bar shows it ── */
.bex-set-label{
  display:none !important; /* redundant with tab strip showing set number */
}

/* ── Light mode ───────────────────────────────────────────────── */
body.light-mode .bex-set-nav-arrow{
  background:rgba(0,0,0,0.06);
  border-color:rgba(0,0,0,0.13);
  color:rgba(0,0,0,0.60);
}
body.light-mode .bex-set-tab{
  background:rgba(0,0,0,0.05);
  border-color:rgba(0,0,0,0.11);
  color:rgba(0,0,0,0.38);
}
body.light-mode .bex-set-tab.active{
  background:rgba(140,90,20,0.12);
  border-color:rgba(140,90,20,0.40);
  color:rgba(110,65,5,1);
  box-shadow:0 0 10px rgba(140,90,20,0.10);
}

/* ═══ END SET NAV BAR ═════════════════════════════════════════ */











/* ══════════════════════════════════════════════════════════════
   SET SLIDES — SHOW/HIDE (no carousel translate)
   ══════════════════════════════════════════════════════════════ */

/* Stepper area: clip during collapse, open via JS maxHeight */
.bex-stepper-area{
  overflow:hidden;
  box-sizing:border-box !important;
  width:100% !important;
}
.bex-inline-open .bex-stepper-area{
  padding: 8px 12px 16px !important;
  background: rgba(255,255,255,0.012) !important;
}

/* Carousel: just a normal block, full width, auto height */
.bex-set-carousel{
  width:100% !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

/* Track: not a flex row anymore — stacking context for show/hide */
.bex-set-track{
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;
}

/* All slides hidden by default */
.bex-set-slide{
  display:none !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  padding:8px 12px 20px !important;
  overflow:visible !important;
}

/* Active slide visible */
.bex-set-slide.active{
  display:block !important;
}

/* Input row: full width flex */
.bex-set-inputs{
  display:flex !important;
  width:100% !important;
  box-sizing:border-box !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;
  padding: 4px 0 0 !important;
}
/* Single exercise: centre the vstep */
.bex-set-inputs:has(.bex-input-group:only-child) .bex-input-group {
  max-width: 200px !important;
  margin: 0 auto !important;
}

/* Each input group: equal share */
.bex-input-group{
  flex:1 1 0 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:4px !important;
}

/* Stepper row: fills its group */
.bex-stepper-row{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  width:100% !important;
  box-sizing:border-box !important;
}

/* Input: fills remaining space */
.bex-input{
  flex:1 1 0 !important;
  min-width:0 !important;
  width:auto !important;
  height:50px !important;
  box-sizing:border-box !important;
}

/* Step buttons: fixed tap target */
.bex-step{
  width:40px !important;
  min-width:40px !important;
  max-width:40px !important;
  height:50px !important;
  flex-shrink:0 !important;
}

/* × separator */
.bex-input-x{
  flex-shrink:0 !important;
  align-self:center !important;
  padding-bottom:0 !important;
  font-size:16px !important;
  width:16px !important;
  text-align:center !important;
  margin:0 !important;
}

/* ═══ END SET SLIDES ═════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   PAGE CLEANUP — solid backgrounds, even spacing
   ══════════════════════════════════════════════════════════════ */

/* ── Core page background ── */
body{
  background:#0A0906 !important;
}

/* ── Workout card list spacing ── */
.banner-ex-items{
  gap:10px !important;
  padding:0 14px 14px !important;
}

/* ── Bex card wrapper consistent margin ── */
.bex-card-wrapper{
  margin:0 !important;
}

/* ── Insight sections container ── */
.insight-sections{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  padding:0 14px 100px !important;
}

/* ── Tab nav ── */
.progress-tab-nav{
  padding:14px 14px 10px !important;
  gap:6px !important;
  background:transparent !important;
}

/* ── Insight cards — OPAQUE, no bleed-through ── */
.ins-card{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
}
body.light-mode .ins-card{
  background:#ffffff !important;
  border-color:rgba(0,0,0,0.07) !important;
}

/* ── Chart canvases: opaque background so space doesn't bleed ── */
.ins-graph-canvas,
.ins-spider-canvas{
  display:block !important;
  background:#13131f !important;
  width:100% !important;
  height:auto !important;
}
body.light-mode .ins-graph-canvas,
body.light-mode .ins-spider-canvas{
  background:#ffffff !important;
}

/* ── Graph wrap padding ── */
.ins-graph-wrap{
  padding:0 12px 16px !important;
}

/* ── Spider canvas pad ── */
.ins-spider-canvas{
  padding:0 8px !important;
  box-sizing:border-box !important;
}

/* ── Section headers ── */
.ins-header{
  padding:16px 16px 12px !important;
}

/* ── Section title ── */
.ins-title{
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:0.8px !important;
  text-transform:uppercase !important;
}

/* ── PR list rows ── */
.ins-pr-list{
  padding:0 14px 14px !important;
}
.ins-pr-row{
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  border-radius:12px !important;
}
body.light-mode .ins-pr-row{
  background:rgba(0,0,0,0.03) !important;
  border-color:rgba(0,0,0,0.06) !important;
}

/* ── Empty state ── */
.ins-empty{
  padding:20px 0 !important;
  text-align:center !important;
  color:rgba(255,255,255,0.28) !important;
  font-size:13px !important;
  font-style:italic !important;
}
body.light-mode .ins-empty{ color:rgba(0,0,0,0.28) !important; }

/* ── 3C stats rows ── */
.ins-3c-stats{
  padding:0 16px 16px !important;
}

/* ── Rank card ── */
.ins-rank-inner{
  padding:16px 16px 20px !important;
}

/* ── Bex section header ── */
.bex-section-header{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:22px 14px 14px;
  margin:0;
  border-bottom:1px solid rgba(255,255,255,0.05);
  margin-bottom:6px;
}

/* ── Banner card (bnr-card) ── */
.bnr-card{
  border-radius:18px !important;
  margin:0 !important;
}

/* ── Banner area outer padding ── */
.banner-ex-section,
.banner-workout-section{
  padding:0 14px !important;
}

/* ══ END PAGE CLEANUP ══════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   BEX SET DONE BUTTON + TAB FLASH
   ══════════════════════════════════════════════════════════════ */

/* Done button at bottom of each set slide */
.bex-set-done-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:100% !important;
  height:48px !important;
  margin-top:12px !important;
  border-radius:14px !important;
  border:1.5px solid rgba(255,255,255,0.12) !important;
  background:rgba(255,255,255,0.05) !important;
  color:rgba(255,255,255,0.45) !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s !important;
  box-sizing:border-box !important;
}
.bex-set-done-btn:active{
  transform:scale(0.97) !important;
  background:rgba(255,255,255,0.10) !important;
}
/* flash-ready: override with gold CTA */
.bex-set-done-btn.flash-ready {
  border-color: rgba(217,184,120,0.65) !important;
  background: rgba(217,184,120,0.10) !important;
  color: rgba(230,209,163,0.95) !important;
  animation: nextSetPulse 1.4s ease-in-out infinite !important;
}
/* flash-ready: all inputs filled — pulse gold until user taps */
.bex-set-done-btn.flash-ready {
  border-color: rgba(217,184,120,0.70) !important;
  background: rgba(217,184,120,0.12) !important;
  color: rgba(217,184,120,0.92) !important;
  animation: nextSetPulse 1.2s ease-in-out infinite !important;
}
@keyframes nextSetPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(217,184,120,0); }
  50%     { box-shadow: 0 0 0 5px rgba(217,184,120,0.25); }
}
body.light-mode .bex-set-done-btn.flash-ready {
  background: rgba(180,130,20,0.09) !important;
  border-color: rgba(180,130,20,0.55) !important;
  color: #7a5200 !important;
}

/* Tab done — keep neutral, icon carries the state */
.bex-set-tab.done{
  color:rgba(255,255,255,0.45) !important;
  border-color:rgba(255,255,255,0.10) !important;
  background:rgba(255,255,255,0.06) !important;
}
.bex-set-tab.done.active{
  color:rgba(230,209,163,1) !important;
  border-color:rgba(212,184,128,0.50) !important;
  background:rgba(212,184,128,0.18) !important;
}

/* Next tab flash animation */
/* bexTabFlash removed — JS-driven flash is more reliable on mobile Safari */"
.bex-set-tab.flash-on{
  background:rgba(217,184,120,0.42) !important;
  border-color:rgba(217,184,120,0.92) !important;
  color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(217,184,120,0.6) !important;
}
/* bex-tab-flash: persistent gold pulse until user taps */
.bex-set-tab.bex-tab-flash {
  animation: tabFlashPulse 1.2s ease-in-out infinite !important;
}
@keyframes tabFlashPulse {
  0%,100% {
    background: rgba(217,184,120,0.10) !important;
    border-color: rgba(217,184,120,0.35) !important;
    color: rgba(217,184,120,0.75) !important;
    box-shadow: none !important;
  }
  50% {
    background: rgba(217,184,120,0.28) !important;
    border-color: rgba(217,184,120,0.80) !important;
    color: rgba(230,209,163,1) !important;
    box-shadow: 0 0 10px rgba(217,184,120,0.30) !important;
  }
}
body.light-mode .bex-set-tab.bex-tab-flash {
  animation: tabFlashPulseLight 1.2s ease-in-out infinite !important;
}
@keyframes tabFlashPulseLight {
  0%,100% {
    background: rgba(180,130,20,0.08) !important;
    border-color: rgba(180,130,20,0.30) !important;
    color: rgba(120,80,0,0.70) !important;
  }
  50% {
    background: rgba(180,130,20,0.20) !important;
    border-color: rgba(180,130,20,0.70) !important;
    color: rgba(100,60,0,1) !important;
  }
}

/* Light mode — Set nav button */
body.light-mode .bex-set-done-btn {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: rgba(0,0,0,0.42) !important;
}
body.light-mode .bex-set-done-btn:active {
  background: rgba(0,0,0,0.10) !important;
  border-color: rgba(0,0,0,0.25) !important;
  color: rgba(0,0,0,0.75) !important;
}
/* Light mode tab done — icon carries state, tab stays neutral */
body.light-mode .bex-set-tab.done {
  color: rgba(0,0,0,0.38) !important;
  border-color: rgba(0,0,0,0.11) !important;
  background: rgba(0,0,0,0.05) !important;
}
body.light-mode .bex-set-tab.done.active {
  color: rgba(110,65,5,1) !important;
  border-color: rgba(140,90,20,0.40) !important;
  background: rgba(140,90,20,0.12) !important;
}
/* Light mode — tab flash */
body.light-mode .bex-set-tab.flash-on {
  background: rgba(180,130,20,0.18) !important;
  border-color: rgba(180,130,20,0.70) !important;
  color: #7a5200 !important;
}

/* ══ END BEX SET DONE ════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   BEX NUMERIC KEYPAD
   ══════════════════════════════════════════════════════════════ */
#bexKeypad{
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:9999;
  background:#161620;
  border-top:1px solid rgba(255,255,255,0.10);
  border-radius:20px 20px 0 0;
  padding:0 12px 36px;
  transform:translateY(100%);
  transition:transform 0.28s cubic-bezier(0.32,0.72,0,1);
  touch-action:none;
}
#bexKeypad.open{ transform:translateY(0); }

#bexKeypadHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 4px 10px;
}
#bexKeypadLabel{
  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.35);
}
#bexKeypadValue{
  font-size:28px;
  font-weight:800;
  color:#fff;
  letter-spacing:1px;
  min-width:60px;
  text-align:right;
}
#bexKeypadDone{
  background:rgba(217,184,120,0.15);
  border:1px solid rgba(217,184,120,0.40);
  color:#D9B878;
  font-size:13px;
  font-weight:800;
  letter-spacing:0.8px;
  padding:8px 18px;
  border-radius:10px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#bexKeypadDone:active{ background:rgba(217,184,120,0.28); }

.bex-keys{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.bex-key{
  height:52px;
  border-radius:12px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.08);
  color:#fff;
  font-size:20px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  transition:background 0.1s;
}
.bex-key:active{ background:rgba(255,255,255,0.16); }
.bex-key.key-del{
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.55);
  font-size:18px;
}
.bex-key.key-dot{
  font-size:22px;
  font-weight:800;
}
.bex-key.key-del:active{ background:rgba(255,100,100,0.15); }

/* Light mode */
body.light-mode #bexKeypad{
  background:#f4f4f6;
  border-top-color:rgba(0,0,0,0.10);
}
body.light-mode .bex-key{
  background:rgba(0,0,0,0.06);
  border-color:rgba(0,0,0,0.08);
  color:#111;
}
body.light-mode .bex-key:active{ background:rgba(0,0,0,0.13); }
body.light-mode #bexKeypadLabel{ color:rgba(0,0,0,0.40); }
body.light-mode #bexKeypadValue{ color:#111; }
body.light-mode #bexKeypadDone{ background:rgba(140,90,20,0.10); border-color:rgba(140,90,20,0.35); color:#7a5200; }

/* Tap-active ring on the input being edited */
.bex-input.kp-active{
  border-color:rgba(217,184,120,0.70) !important;
  box-shadow:0 0 0 2px rgba(217,184,120,0.18) !important;
  color:#D9B878 !important;
}
/* ══ END BEX KEYPAD ════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   BEX SET TAB STATUS DOTS
   ══════════════════════════════════════════════════════════════ */
/* Tab overrides — compact, no overflow */
.bex-set-tab{
  flex-direction:column !important;
  gap:3px !important;
  padding:6px 3px 5px !important;
  height:auto !important;
  min-height:42px !important;
  overflow:visible !important;
}
.bex-tab-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:0.4px;
  line-height:1;
  white-space:nowrap;
}
/* Status dot — single small circle, replaces check+trophy icons */
.bex-tab-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.2s;
}
.bex-tab-status-dot.empty  { background: rgba(255,255,255,0.12); }
.bex-tab-status-dot.green  { background: #34D399; }
.bex-tab-status-dot.gold   { background: #C9A84C; }
/* Completed tab states via background */
.bex-set-tab.done {
  background: rgba(52,211,153,0.09) !important;
  border-color: rgba(52,211,153,0.25) !important;
  color: rgba(52,211,153,0.75) !important;
}
.bex-set-tab.pr {
  color: rgba(201,168,76,0.85) !important;
}
/* ══ END TAB DOTS ══════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   BEX CARD — PR ROW (replaces old bex-today-row + bex-pr-target)
   ══════════════════════════════════════════════════════════════ */
.bex-pr-row{
  display:flex;
  align-items:center;
  gap:0;
  padding:7px 0 4px;
  border-top:1px solid rgba(255,255,255,0.06);
  margin-top:4px;
}
.bex-pr-col{
  display:flex;
  flex-direction:column;
  gap:1px;
  flex:1;
  min-width:0;
}
.bex-pr-col + .bex-pr-col{
  border-left:1px solid rgba(255,255,255,0.07);
  padding-left:10px;
  margin-left:10px;
}
.bex-pr-tag{
  font-size:9px;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.28);
  line-height:1;
}
.bex-pr-num{
  font-size:15px;
  font-weight:800;
  color:rgba(255,255,255,0.65);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
}
.bex-pr-num.empty{
  color:rgba(255,255,255,0.18);
  font-size:13px;
}
/* Gold highlight when today IS the all-time PR */
.bex-pr-num.is-pr{
  color:#D9B878;
}
.bex-pr-badge{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:8px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#D9B878;
  background:rgba(217,184,120,0.12);
  border:1px solid rgba(217,184,120,0.30);
  border-radius:5px;
  padding:1px 5px;
  margin-left:5px;
  vertical-align:middle;
  white-space:nowrap;
}
.bex-sets-pill{
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,0.30);
  white-space:nowrap;
  flex-shrink:0;
  margin-left:auto;
  padding-left:8px;
}

/* Light mode */
body.light-mode .bex-pr-row{ border-top-color:rgba(0,0,0,0.07); }
body.light-mode .bex-pr-col + .bex-pr-col{ border-left-color:rgba(0,0,0,0.07); }
body.light-mode .bex-pr-tag{ color:rgba(0,0,0,0.30); }
body.light-mode .bex-pr-num{ color:rgba(0,0,0,0.60); }
body.light-mode .bex-pr-num.empty{ color:rgba(0,0,0,0.18); }
body.light-mode .bex-pr-num.is-pr{ color:#8a6000; }
body.light-mode .bex-pr-badge{ color:#8a6000; background:rgba(138,96,0,0.10); border-color:rgba(138,96,0,0.25); }
body.light-mode .bex-sets-pill{ color:rgba(0,0,0,0.28); }
/* ══ END BEX PR ROW ════════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   BEX CARD — FINAL CLEAN REBUILD
   ═══════════════════════════════════════════ */
.bex-card-wrapper{ scroll-margin-top:68px; }

/* Override ALL old banner-ex-card layout — must be column */
.banner-ex-card{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  padding:0 !important;
  background:#1a1a2a !important;
  border:1px solid rgba(255,255,255,0.07) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:background 0.15s !important;
  transform:none !important;
}
.banner-ex-card:active{ transform:none !important; background:#1e1e2c !important; }
.banner-ex-card.bex-wt-free  { border-left:3px solid rgba(212,148,90,0.6) !important; }
.banner-ex-card.bex-wt-cable { border-left:3px solid rgba(126,181,226,0.6) !important; }
.banner-ex-card.ex-done      { border-color:rgba(52,211,153,0.22) !important; background:rgba(52,211,153,0.04) !important; }
body.light-mode .banner-ex-card{ background:#f5f5fa !important; border-color:rgba(0,0,0,0.09) !important; }

/* HEADER */
.bex-card-hdr{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 10px 11px 10px;
}
.bex-card-title-col{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-start; gap:5px; padding:12px 48px 12px 12px; overflow:visible; }
.bex-pill-name{ font-size:14px; font-weight:700; color:rgba(255,255,255,0.92); line-height:1.3; white-space:normal; word-break:break-word; }
.bex-pill-meta{ font-size:12px; color:rgba(255,255,255,0.38); }
body.light-mode .bex-pill-name{ color:rgba(0,0,0,0.88); }
body.light-mode .bex-pill-meta{ color:rgba(0,0,0,0.42); }

/* Chevron */
.bex-expand-btn{
  position:absolute;
  top:50%; right:10px;
  transform:translateY(-50%);
  width:30px; height:30px; border-radius:8px;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.09);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  z-index:2;
  flex-shrink:0;
}
.bex-expand-btn .bex-chev{
  width:15px; height:15px; stroke:rgba(255,255,255,0.48);
  transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.bex-inline-open .bex-expand-btn .bex-chev{ transform:rotate(90deg); }
body.light-mode .bex-expand-btn{ background:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.08); }
body.light-mode .bex-expand-btn .bex-chev{ stroke:rgba(0,0,0,0.40); }

/* Status dots */
.bex-num-badge{ display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; }
.bex-num-badge-num{
  width:28px; height:28px; border-radius:8px; font-size:14px; font-weight:800;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.11);
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.65);
}
.bex-status-dot{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.13); flex-shrink:0; }
.bex-dot-check.lit { background:#34D399; box-shadow:0 0 5px rgba(52,211,153,0.55); }
.bex-dot-trophy.lit{ background:#D9B878; box-shadow:0 0 5px rgba(217,184,120,0.55); }
body.light-mode .bex-num-badge-num{ background:rgba(0,0,0,0.07); border-color:rgba(0,0,0,0.10); color:rgba(0,0,0,0.60); }

/* BODY (hidden by default, flex when open) */
.bex-card-body{
  display:none;
  flex-direction:row;
  border-top:1px solid rgba(255,255,255,0.07);
  padding:10px 12px 14px 10px;
  gap:4px;
}
.bex-inline-open .bex-card-body{ display:flex !important; }
body.light-mode .bex-card-body{ border-top-color:rgba(0,0,0,0.07); }

/* Left col: check + trophy */
.bex-left-col{
  display:flex; flex-direction:column; align-items:center;
  gap:8px; padding-top:8px; flex-shrink:0; width:28px;
}
.bex-check-icon,.bex-trophy-icon{
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
}
.bex-check-icon svg { width:15px; height:15px; stroke:rgba(255,255,255,0.16); }
.bex-trophy-icon svg{ width:15px; height:15px; stroke:rgba(255,255,255,0.16); }
.bex-check-icon.lit  svg{ stroke:#34D399; filter:drop-shadow(0 0 4px rgba(52,211,153,0.5)); }
.bex-trophy-icon.lit svg{ stroke:#D9B878; filter:drop-shadow(0 0 4px rgba(217,184,120,0.5)); }

/* Info block */
.bex-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; padding-top:8px; }

/* Hide old pill-layer / hero-layer if they still exist */
.bex-pill-layer{ display:none !important; }
.bex-hero-layer{ display:none !important; }
/* ═══ END BEX CARD REBUILD ═══════════════════════════════════ */


/* ═══════════════════════════════════════════
   BEX CARD — LAYOUT LOCK (must be last)
   Overrides all legacy rules so new structure works
   ═══════════════════════════════════════════ */

/* Card is always a column — header on top, body below */
.banner-ex-card,
.bex-inline-open .banner-ex-card {
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  padding:0 !important;
}

/* Header: always visible, horizontal flex */
.bex-card-hdr {
  display:flex !important;
  flex-direction:row !important;
  align-items:stretch !important;
  gap:0 !important;
  padding:0 !important;
  min-height:68px !important;
  flex-shrink:0 !important;
  overflow:visible !important;  /* let content grow — card border-radius clips visual edge */
  position:relative !important;
}

/* Body: hidden by default, flex-row when open */
.bex-card-body {
  display:none !important;
  flex-direction:row !important;
  border-top:1px solid rgba(255,255,255,0.07) !important;
  padding:10px 12px 14px 10px !important;
  gap:4px !important;
}
.bex-inline-open .bex-card-body {
  display:flex !important;
}
body.light-mode .bex-card-body { border-top-color:rgba(0,0,0,0.08) !important; }

/* Info inside body */
.bex-info {
  flex:1 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  padding-top:6px !important;
  background:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:6px 0 0 0 !important;
  border-radius:0 !important;
}

/* Kill old bex-info padding overrides when open */
.bex-inline-open .banner-ex-card .bex-info {
  padding:6px 0 0 0 !important;
  gap:8px !important;
  background:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Secondary row always flex when body is open */
.bex-inline-open .bex-secondary-row { display:flex !important; }

/* Kill old pill/hero layer */
.bex-pill-layer { display:none !important; }
.bex-hero-layer { display:none !important; }

/* Chevron rotates on open */
.bex-inline-open .bex-expand-btn .bex-chev { transform:rotate(90deg) !important; }

/* ═══ END LAYOUT LOCK ════════════════════════════════════════ */


/* ── Stepper: flush against card, no floating gap ── */
.bex-stepper-area {
  margin:0 !important;
  border-radius:0 0 14px 14px !important;
  border-top:none !important;
}
.bex-card-wrapper {
  border-radius:14px;
  overflow:visible;
}

/* ── Section title dividers ────────────────────────────────── */
.section-title-divider {
  display:flex;
  align-items:center;
  gap:12px;
  padding:28px 4px 10px;
}
.section-title-divider::before,
.section-title-divider::after {
  content:'';
  flex:1;
  height:1px;
  background:rgba(255,255,255,0.07);
}
.section-title-text {
  font-size:11px;
  font-weight:800;
  letter-spacing:2.5px;
  color:rgba(255,255,255,0.25);
  white-space:nowrap;
  text-transform:uppercase;
}
body.light-mode .section-title-divider::before,
body.light-mode .section-title-divider::after { background:rgba(0,0,0,0.09); }
body.light-mode .section-title-text { color:rgba(0,0,0,0.30); }


/* ═══════════════════════════════════════════
   REDUCED COMPLEXITY — banner + sections
   ═══════════════════════════════════════════ */

/* Banner: clean subtitle line */
.bnr-subtitle-line {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:rgba(255,255,255,0.70);
  font-weight:600;
  margin-top:5px;
}
.bnr-sub-dot { opacity:0.40; }
/* Hide old 4-chip row */
.bnr-chips { display:none !important; }
/* Equipment badge in banner */
.bnr-equip-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.80) !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  white-space: nowrap !important;
}
body:not(.cable-week) .bnr-equip-badge {
  color: rgba(212,148,90,0.95) !important;
  background: rgba(212,148,90,0.12) !important;
  border-color: rgba(212,148,90,0.30) !important;
}
body.cable-week .bnr-equip-badge {
  color: rgba(126,181,226,0.95) !important;
  background: rgba(126,181,226,0.12) !important;
  border-color: rgba(126,181,226,0.30) !important;
}
body.light-mode .bnr-equip-badge {
  color: rgba(120,75,0,0.90) !important;
  background: rgba(180,130,20,0.12) !important;
  border-color: rgba(180,130,20,0.28) !important;
}

/* Tab nav — sticky */
.progress-tab-nav {
  display:none !important;
}
body.light-mode .progress-tab-nav {
  background:#f0f0f5 !important;
  border-bottom-color:rgba(0,0,0,0.07) !important;
}

/* Section title dividers — spacing only, no repeated label when tab exists */
.section-title-divider { padding:20px 4px 6px; }

/* Spider chart collapsible */
.ins-header-tap { cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ins-header-tap:active { background:rgba(255,255,255,0.04); border-radius:10px; }
.ins-expand-chev {
  width:16px; height:16px;
  stroke:rgba(255,255,255,0.30);
  transition:transform 0.3s;
  flex-shrink:0;
}
body.light-mode .ins-expand-chev { stroke:rgba(0,0,0,0.30); }

/* Rank progress bar */
.ins-rank-progress {
  padding:0 14px 14px;
}
.ins-rank-progress-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}
.ins-rank-progress-label {
  font-size:11px;
  font-weight:600;
  letter-spacing:0.5px;
  color:rgba(255,255,255,0.40);
  text-transform:uppercase;
}
.ins-rank-progress-pct {
  font-size:12px;
  font-weight:700;
  color:#D9B878;
}
.ins-rank-progress-bar-wrap {
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.08);
  overflow:hidden;
}
.ins-rank-progress-bar {
  height:100%;
  border-radius:2px;
  background:linear-gradient(90deg, #C8A96E, #D9B878);
  width:0%;
  transition:width 0.8s cubic-bezier(0.32,0.72,0,1);
}
.ins-rank-view-all {
  display:block;
  width:100%;
  text-align:center;
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,0.30);
  padding:8px 0 14px;
  background:none;
  border:none;
  cursor:pointer;
  letter-spacing:0.3px;
}
.ins-rank-view-all:active { color:rgba(255,255,255,0.55); }
body.light-mode .ins-rank-progress-label { color:rgba(0,0,0,0.38); }
body.light-mode .ins-rank-view-all { color:rgba(0,0,0,0.32); }

/* Journey card hidden */
#insDaysCard[style*="display:none"] { display:none !important; }

/* ═══ END REDUCED COMPLEXITY ═════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   BANNER HERO REDESIGN
   ═══════════════════════════════════════════════════════════ */

/* Card — full-bleed, taller, no side margins */
.bnr-card {
  position: relative !important;
  width: calc(100% - 28px) !important;
  margin: 0 14px 0 !important;
  height: auto !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
}

/* Free weights: Round 168 — flat, no warm gradient */
body.free-week .bnr-card,
.bnr-card.bex-wt-free {
  background: transparent !important;
}
/* Cable week: Round 168 — flat, no warm gradient */
body.cable-week .bnr-card,
.bnr-card.bex-wt-cable {
  background: transparent !important;
}

/* Workout photo background */
.bnr-bg-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  z-index: 0 !important;
  opacity: 0;
  transition: opacity 0.4s ease !important;
}
.bnr-bg-photo.loaded {
  opacity: 0.35;
}
/* Gradient scrim over photo so text stays legible */
.bnr-photo-scrim {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(
    135deg,
    rgba(10,10,18,0.75) 0%,
    rgba(10,10,18,0.40) 50%,
    rgba(10,10,18,0.20) 100%
  ) !important;
  pointer-events: none !important;
}
/* bnr-muscle-overlay removed — single muscle image in banner bg */
.bnr-muscle-overlay { display: none !important; }
/* All existing bnr-card content is above the photo */
.bnr-noise,
.bnr-vignette,
.bnr-top-row,
.bnr-hero-body,
.bnr-footer {
  position: relative !important;
  z-index: 3 !important;
}

/* Noise texture — adds tactile depth */
.bnr-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* Bottom vignette */
.bnr-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(0,0,0,0.55) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* All content layers above overlays */
.bnr-top-row,
.bnr-hero-body,
.bnr-footer { position: relative; z-index: 2; }

/* TOP ROW */
.bnr-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px 0 !important;
}
.bnr-day {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 2.5px !important;
  color: rgba(217,184,120,0.7) !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* HERO BODY: title left, ring right */
.bnr-hero-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 0 16px;
  gap: 12px;
  flex: 1;
}

/* Title stack */
.bnr-title-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bnr-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
}
/* Big editorial title */
.bnr-title {
  font-size: 38px !important;
  font-weight: 900 !important;
  letter-spacing: -2px !important;
  line-height: 0.95 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  /* Tight tracking, strong presence */
}
.bnr-subtitle-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  font-weight: 600;
  margin-top: 6px;
  flex-wrap: wrap;
}
.bnr-sub-dot { opacity: 0.35; }

/* LARGE RING — hero element */
.bnr-ring-hero {
  position: relative;
  width: 86px;
  height: 86px;
  flex-shrink: 0;
}
.bnr-ring-hero-svg {
  width: 100%;
  height: 100%;
  transform: none;
}
.bnr-ring-hero-bg {
  fill: none;
  stroke: rgba(255,255,255,0.07);
  stroke-width: 6;
}
.bnr-ring-hero-fill {
  fill: none;
  stroke: #D4945A;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.32,0.72,0,1);
}
body.cable-week .bnr-ring-hero-fill { stroke: #7EB5E2; }
.bnr-ring-hero-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.bnr-prog-pct {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
}
.bnr-prog-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  color: rgba(255,255,255,0.35) !important;
  text-transform: uppercase !important;
}

/* FOOTER: timer + summary */
.bnr-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 14px;
  margin-top: auto;
}
.bnr-timer-block {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: opacity 0.15s !important;
  flex: none !important;
}
.bnr-timer-block:active { opacity: 0.7 !important; }
.bnr-timer-block.live  { background: transparent !important; border-color: transparent !important; }
.bnr-timer-block.paused{ background: transparent !important; border-color: transparent !important; }
.bnr-timer-icon-sm { width: 13px; height: 13px; stroke: rgba(255,255,255,0.40); flex-shrink: 0; }
.bnr-timer-big {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.85) !important;
  letter-spacing: -0.3px !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
}
.bnr-timer-block.live .bnr-timer-big   { color: #34D399 !important; }
.bnr-timer-block.paused .bnr-timer-big { color: #D9B878 !important; }
.bnr-timer-hint {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.25) !important;
  letter-spacing: 0.3px !important;
  margin-left: 2px !important;
}
.bnr-timer-block.live .bnr-timer-hint   { color: rgba(52,211,153,0.55) !important; }
.bnr-timer-block.paused .bnr-timer-hint { color: rgba(217,184,120,0.50) !important; }

/* Summary icon button */
.bnr-summary-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 0.15s !important;
}
.bnr-summary-btn:active { background: rgba(255,255,255,0.14) !important; }
.bnr-summary-btn svg { width: 16px; height: 16px; stroke: rgba(255,255,255,0.45); }

/* Kill old agenda / bottom / overlay layout */
.bnr-agenda  { display: none !important; }
.bnr-bottom  { display: none !important; }
.bnr-right-col { display: none !important; }
.bnr-prog-ring-wrap { display: none !important; }
.bnr-overlay-left, .bnr-overlay-bottom { display: none !important; }
.bnr-img { display: none !important; }

/* Light mode banner */
body.light-mode .bnr-card {
  background: #e8e8f0 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 8px 32px rgba(0,0,0,0.12) !important;
}
body.light-mode.free-week .bnr-card {
  background: radial-gradient(ellipse at 70% 0%, rgba(180,110,60,0.12) 0%, #e8e8f0 55%) !important;
}
body.light-mode .bnr-eyebrow { color: rgba(0,0,0,0.25); }
body.light-mode .bnr-title   { color: #111 !important; text-shadow: none !important; }
body.light-mode .bnr-subtitle-line { color: rgba(0,0,0,0.40); }
body.light-mode .bnr-ring-hero-bg  { stroke: rgba(0,0,0,0.08); }
body.light-mode .bnr-prog-pct      { color: #111 !important; }
body.light-mode .bnr-prog-label    { color: rgba(0,0,0,0.6) !important; }
body.light-mode .bnr-timer-block   { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.08) !important; }
body.light-mode .bnr-timer-big     { color: rgba(0,0,0,0.80) !important; }
body.light-mode .bnr-timer-hint    { color: rgba(0,0,0,0.30) !important; }
body.light-mode .bnr-summary-btn   { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.08) !important; }
body.light-mode .bnr-summary-btn svg { stroke: rgba(0,0,0,0.40); }
body.light-mode .bnr-vignette { background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.10) 100%); }

/* ═══ END BANNER HERO ════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   EXERCISE CARD — MINIMAL REBUILD
   ═══════════════════════════════════════════ */

/* Header meta row */
.bex-hdr-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

/* Collapsed meta: now shows "2 × 12 reps" */
.bex-pill-meta {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.35) !important;
}
body.light-mode .bex-pill-meta { color: rgba(0,0,0,0.38) !important; }

/* ── EXPANDED BODY ────────────────────────── */
/* ── Expanded card body — minimal info strip ── */
.bex-card-body {
  display: none !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 10px 14px 0 14px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.bex-inline-open .bex-card-body { display: flex !important; }
body.light-mode .bex-card-body  { border-top-color: rgba(0,0,0,0.07) !important; }

/* Info strip: progress + type btn + sec chip all in one row */
.bex-body-info-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Progress pill */
.bex-body-progress-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 80px;
}
.bex-body-prog-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
body.light-mode .bex-body-prog-bar { background: rgba(0,0,0,0.10); }
.bex-body-prog-fill {
  height: 100%;
  border-radius: 2px;
  background: #D9B878;
  transition: width 0.5s cubic-bezier(0.32,0.72,0,1);
}
.bex-body-prog-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
}
body.light-mode .bex-body-prog-label { color: rgba(0,0,0,0.6); }
/* Type info button */
.bex-body-type-btn {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(162,100,190,0.75);
  background: rgba(162,100,190,0.08);
  border: 1px solid rgba(162,100,190,0.18);
  border-radius: 20px;
  padding: 3px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
/* Secondary chip: rest/tempo */
.bex-body-sec-chip {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.28);
  white-space: nowrap;
}
body.light-mode .bex-body-sec-chip { color: rgba(0,0,0,0.30); }

/* PR line */
.bex-body-pr {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
}
.bex-body-pr.is-new-pr {
  color: #D9B878;
  font-weight: 800;
  letter-spacing: 0.5px;
}
body.light-mode .bex-body-pr { color: rgba(0,0,0,0.6); }

/* Kill old body structures */
.bex-left-col    { display: none !important; }
.bex-info        { display: none !important; }
.bex-primary-stat{ display: none !important; }
.bex-secondary-row{ display: none !important; }
.bex-pr-row      { display: none !important; }

/* ═══ END MINIMAL CARD ══════════════════════════════════════ */


/* ═══ PR TARGET IN STEPPER ═══════════════════════════════════ */
.bex-pr-target {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  margin: 8px 0 4px !important;
  background: rgba(217,184,120,0.08) !important;
  border: 1px solid rgba(217,184,120,0.22) !important;
  border-radius: 10px !important;
  transition: background 0.2s, border-color 0.2s !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.bex-pr-target.beaten {
  background: rgba(52,211,153,0.09);
  border-color: rgba(52,211,153,0.25);
}
.bex-pr-target-label {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  color: rgba(217,184,120,0.65) !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
}
.bex-pr-target.beaten .bex-pr-target-label {
  color: rgba(52,211,153,0.6);
  letter-spacing: 1.5px;
}
.bex-pr-target.beaten .bex-pr-target-label::before {
  content: '';
}
.bex-pr-target-val {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: rgba(217,184,120,0.90) !important;
  letter-spacing: -0.3px !important;
}
.bex-pr-target.beaten .bex-pr-target-val {
  color: #34D399;
  text-decoration: line-through;
  text-decoration-color: rgba(52,211,153,0.4);
}
body.light-mode .bex-pr-target { background: rgba(180,130,50,0.07); border-color: rgba(180,130,50,0.18); }
body.light-mode .bex-pr-target-label { color: rgba(150,100,30,0.55); }
body.light-mode .bex-pr-target-val   { color: rgba(150,100,30,0.75); }
/* ═══ END PR TARGET ══════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   BREATHING ROOM — section & card spacing pass
   ═══════════════════════════════════════════════════════════ */

/* Gap between banner card and exercise list header */
.banner-exercise-list {
  margin-top: 20px !important;
  padding: 0 14px !important;
}

/* Space between exercise list header and first card */
.bex-section-header {
  margin-bottom: 14px !important;
  padding: 0 !important;
}

/* Gap between exercise cards */
.banner-ex-items {
  gap: 12px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Each card wrapper — bottom margin separates from next card */
.bex-card-wrapper {
  margin-bottom: 0 !important; /* gap handles it */
}

/* Space between last exercise card and insight sections */
.insight-sections {
  margin-top: 32px !important;
  padding: 0 14px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Each insight card — consistent inner breathing room */
.ins-card {
  padding: 18px !important;
}

/* Section dividers between insight groups */
.section-title-divider {
  padding: 28px 0 8px !important;
  margin: 0 !important;
}

/* More air between the week strip and banner */
.workout-banner-carousel {
  margin-top: 12px !important;
}

/* Space between banner and exercise list */
.workout-banner-wrap,
.workout-banners-viewport {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ═══ END BREATHING ROOM ════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   CELEBRATION — toasts + particles
   ═══════════════════════════════════════════════════════════ */

/* Toast */
.bex-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(20px);
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 11px 20px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.bex-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Toast variants */
.bex-toast-pr {
  background: rgba(20, 16, 6, 0.92);
  border: 1px solid rgba(217,184,120,0.5);
  color: #D9B878;
  box-shadow: 0 4px 24px rgba(217,184,120,0.25), 0 2px 8px rgba(0,0,0,0.4);
}
.bex-toast-set {
  background: rgba(18, 14, 6, 0.92);
  border: 1px solid rgba(217,184,120,0.30);
  color: rgba(217,184,120,0.90);
  box-shadow: 0 4px 24px rgba(217,184,120,0.12), 0 2px 8px rgba(0,0,0,0.4);
}
.bex-toast-last {
  background: rgba(18, 14, 6, 0.92);
  border: 1px solid rgba(217,184,120,0.22);
  color: rgba(217,184,120,0.70);
  box-shadow: 0 4px 20px rgba(217,184,120,0.10), 0 2px 8px rgba(0,0,0,0.4);
}
.bex-toast-done {
  background: rgba(6, 20, 14, 0.95);
  border: 1px solid rgba(52,211,153,0.55);
  color: #34D399;
  font-size: 15px;
  box-shadow: 0 4px 32px rgba(52,211,153,0.3), 0 2px 8px rgba(0,0,0,0.4);
}

/* Confetti particles */
.bex-particle {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  transform-origin: center;
  animation: bexParticleFly 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes bexParticleFly {
  0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
  60%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.3); }
}

/* ═══ END CELEBRATION ════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   SC CARD — PR TARGET ROWS + PROGRESS DOTS
   ═══════════════════════════════════════════════════════════ */

.sc-pr-target-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 8px;
  padding: 7px 12px;
  background: rgba(217,184,120,0.07);
  border: 1px solid rgba(217,184,120,0.18);
  border-radius: 10px;
  transition: background 0.2s, border-color 0.2s;
}
.sc-pr-target-row.beaten {
  background: rgba(52,211,153,0.09);
  border-color: rgba(52,211,153,0.28);
}
.sc-pr-target-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
  color: rgba(217,184,120,0.55);
  text-transform: uppercase;
  flex-shrink: 0;
}
.sc-pr-target-row.beaten .sc-pr-target-label {
  color: rgba(52,211,153,0.6);
  font-size: 8px;
}
.sc-pr-target-val {
  font-size: 13px;
  font-weight: 800;
  color: rgba(217,184,120,0.80);
  letter-spacing: -0.2px;
}
.sc-pr-target-row.beaten .sc-pr-target-val {
  color: #34D399;
  text-decoration: line-through;
  text-decoration-color: rgba(52,211,153,0.4);
}
.sc-pr-trophy-icon {
  width: 12px;
  height: 12px;
  stroke: #34D399;
  flex-shrink: 0;
}
.sc-pr-ex-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.30);
  margin-right: 2px;
}

/* Completed sc-dot */
.sc-dot.sc-dot-complete {
  background: #34D399 !important;
  box-shadow: 0 0 5px rgba(52,211,153,0.5) !important;
}
.sc-dot.sc-dot-pr {
  background: #D9B878 !important;
  box-shadow: 0 0 5px rgba(217,184,120,0.5) !important;
}
body.light-mode .sc-pr-target-row { background: rgba(180,130,50,0.07); border-color: rgba(180,130,50,0.18); }
body.light-mode .sc-pr-target-label { color: rgba(150,100,30,0.55); }
body.light-mode .sc-pr-target-val { color: rgba(150,100,30,0.80); }

/* ═══ END SC PR TARGET ══════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   FLOATING PROGRESS HUD (legacy — kept for compat)
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   WORKOUT STATUS BAR — premium ambient bar below header
   ═══════════════════════════════════════════════════════════ */
.workout-status-bar {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: rgba(8, 8, 14, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.30s cubic-bezier(0.4,0,0.2,1),
              opacity 0.25s ease;
  pointer-events: none;
  /* Gradient line at bottom */
  box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}
/* Animated gradient bottom edge */
.workout-status-bar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(217,184,120,0) 15%,
    rgba(217,184,120,0.35) 50%,
    rgba(217,184,120,0) 85%,
    transparent 100%);
  transition: opacity 0.4s ease;
}
.workout-status-bar.active {
  height: 44px;
  opacity: 1;
  pointer-events: auto;
}

/* ── DATE block (left) ── */
.wsb-left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wsb-day-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  line-height: 1;
}
.wsb-date {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
  line-height: 1.2;
}

/* ── PROGRESS (center) ── */
.wsb-center {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  min-width: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.workout-status-bar.has-timer .wsb-center {
  opacity: 1;
  pointer-events: auto;
}
/* Progress track with glow */
.wsb-progress-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.wsb-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(217,184,120,0.6) 0%, #D9B878 100%);
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 6px rgba(217,184,120,0.40);
}
/* Pct label above bar */
.wsb-pct {
  font-size: 10px;
  font-weight: 800;
  color: rgba(217,184,120,0.70);
  letter-spacing: -0.3px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ── TIMER block (right) ── */
.wsb-right {
  display: none;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.workout-status-bar.has-timer .wsb-right {
  display: flex;
}
/* Timer pill */
.wsb-timer-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 4px 10px 4px 7px;
}
.wsb-clock-icon {
  width: 12px;
  height: 12px;
  stroke: rgba(255,255,255,0.35);
  flex-shrink: 0;
}
.wsb-time {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,0.85);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  line-height: 1;
}
/* Pause button */
.wsb-pause-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.wsb-pause-btn svg { width: 11px; height: 11px; }
.wsb-pause-btn:active { transform: scale(0.90); background: rgba(255,255,255,0.18); }

/* ── RUNNING state — green timer+button only, week accent line stays ── */
.workout-status-bar.running .wsb-time { color: #34D399; }
.workout-status-bar.running .wsb-clock-icon { stroke: rgba(52,211,153,0.65); }
.workout-status-bar.running .wsb-timer-pill {
  background: rgba(52,211,153,0.06);
  border-color: rgba(52,211,153,0.18);
}
.workout-status-bar.running .wsb-pause-btn {
  background: rgba(52,211,153,0.16);
  border-color: rgba(52,211,153,0.40);
  color: #34D399;
}
/* Progress fill stays orange (free) or blue (cable) — not green */
.workout-status-bar.running .wsb-progress-fill {
  background: linear-gradient(90deg, rgba(232,146,74,0.5) 0%, #E8924A 100%);
  box-shadow: 0 0 8px rgba(232,146,74,0.35);
}
body.cable-week .workout-status-bar.running .wsb-progress-fill {
  background: linear-gradient(90deg, rgba(126,181,226,0.5) 0%, #7EB5E2 100%);
  box-shadow: 0 0 8px rgba(126,181,226,0.35);
}
.workout-status-bar.running .wsb-pct  { color: rgba(52,211,153,0.75); }
.workout-status-bar.running .wsb-date { color: rgba(255,255,255,0.65); }

/* ── PAUSED state — gold accent ── */
.workout-status-bar.paused .wsb-time { color: rgba(217,184,120,0.90); }
.workout-status-bar.paused .wsb-timer-pill {
  background: rgba(217,184,120,0.08);
  border-color: rgba(217,184,120,0.25);
}
.workout-status-bar.paused .wsb-pause-btn {
  background: rgba(217,184,120,0.14);
  border-color: rgba(217,184,120,0.40);
  color: #D9B878;
  animation: wsbBtnPulse 1.6s ease-in-out infinite;
}
@keyframes wsbBtnPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(217,184,120,0); }
  50%     { box-shadow: 0 0 0 5px rgba(217,184,120,0.18); }
}

/* ── Cable week ── */
body.cable-week .wsb-progress-fill {
  background: linear-gradient(90deg, rgba(126,181,226,0.5) 0%, #7EB5E2 100%);
  box-shadow: 0 0 6px rgba(126,181,226,0.40);
}
body.cable-week .wsb-pct { color: rgba(126,181,226,0.75); }
body.cable-week .workout-status-bar::after {
  background: linear-gradient(90deg,
    transparent 0%, rgba(126,181,226,0) 15%,
    rgba(126,181,226,0.35) 50%,
    rgba(126,181,226,0) 85%, transparent 100%);
}

/* ── Light mode ── */
body.light-mode .workout-status-bar {
  background: rgba(240,237,232,0.94);
  box-shadow: 0 1px 0 rgba(0,0,0,0.07);
}
body.light-mode .workout-status-bar::after { opacity: 0.5; }
body.light-mode .wsb-day-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(52,211,153,0.90) !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}
body.light-mode .wsb-date { color: rgba(0,0,0,0.70); }
body.light-mode .wsb-progress-track { background: rgba(0,0,0,0.07); }
body.light-mode .wsb-pct { color: rgba(150,100,10,0.70); }
body.light-mode .wsb-time { color: rgba(0,0,0,0.80); }
body.light-mode .wsb-clock-icon { stroke: rgba(0,0,0,0.35); }
body.light-mode .wsb-timer-pill { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.10); }
body.light-mode .wsb-pause-btn { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.14); color: rgba(0,0,0,0.55); }

/* ═══ END WORKOUT STATUS BAR ═════════════════════════════════ */

.fhud {
  position: fixed;
  top: 56px;
  left: 12px;
  right: auto;
  z-index: 200; /* below full-screen modals (z-index 300) */
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(14, 14, 24, 0.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 40px;
  padding: 8px 12px 8px 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.07) inset;
  opacity: 0;
  transform: translateY(-8px) scale(0.94);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34,1.4,0.64,1);
  -webkit-tap-highlight-color: transparent;
}
.fhud.visible {
  opacity: 0 !important;          /* WSB replaces floating pill */
  pointer-events: none !important;
}
/* Hide HUD when full-screen modal is open */
.pr-history-overlay.open ~ * .fhud,
/* Hide HUD when any modal is open */
body:has(.pr-history-overlay.open) .fhud,
body:has(.stats-graph-modal.open) .fhud,
body:has(.stats-info-modal.open) .fhud,
body:has(.workout-select-modal.open) .fhud,
body:has(.day-selector-overlay.open) .fhud,
body:has(.fizzeek-modal.open) .fhud,
body:has(#daysProgressModal.open) .fhud {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.15s ease !important;
}

/* Ring — bigger */
.fhud-ring-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.fhud-ring-svg {
  width: 44px;
  height: 44px;
}
.fhud-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.10);
  stroke-width: 3;
}
.fhud-ring-fill {
  fill: none;
  stroke: #D9B878;
  stroke-width: 3;
  transition: stroke-dashoffset 0.45s cubic-bezier(0.4,0,0.2,1);
}
.fhud-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  color: #D9B878;
  letter-spacing: -0.3px;
  line-height: 1;
}

/* Separator */
.fhud-sep {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.12);
  margin: 0 10px;
  flex-shrink: 0;
}

/* Timer */
.fhud-timer-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.fhud-date-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  line-height: 1;
  white-space: nowrap;
}
.fhud.running .fhud-date-label { color: rgba(52,211,153,0.55); }
.fhud.paused  .fhud-date-label { color: rgba(217,184,120,0.45); }
.fhud-timer-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.fhud-timer-icon {
  width: 14px;
  height: 14px;
  stroke: rgba(255,255,255,0.45);
  flex-shrink: 0;
}
.fhud-time {
  font-size: 17px;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  min-width: 46px;
}

/* Pause button */
.fhud-pause-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 8px;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.fhud-pause-btn:active { background: rgba(255,255,255,0.20); }
.fhud-pause-btn svg { width: 13px; height: 13px; }

/* HUD button: running → green (pause icon showing) */
.fhud.running .fhud-pause-btn {
  background: rgba(52,211,153,0.14);
  border: 1.5px solid rgba(52,211,153,0.35);
  color: #34D399;
  transition: background 0.15s, border-color 0.15s;
}
.fhud.running .fhud-pause-btn:active {
  background: rgba(52,211,153,0.28);
}

/* HUD button: paused → gold pulsing (play icon showing) */
.fhud.paused .fhud-pause-btn {
  background: rgba(217,184,120,0.14);
  border: 1.5px solid rgba(217,184,120,0.40);
  color: #D9B878;
  animation: fhudBtnPulse 1.6s ease-in-out infinite;
}
@keyframes fhudBtnPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(217,184,120,0); }
  50%     { box-shadow: 0 0 0 5px rgba(217,184,120,0.22); }
}
.fhud.paused .fhud-pause-btn:active {
  background: rgba(217,184,120,0.28);
  animation: none;
}

/* Paused state */
/* Running — green timer icon */
.fhud.running .fhud-timer-icon {
  stroke: #34D399;
  filter: drop-shadow(0 0 3px rgba(52,211,153,0.40));
}
.fhud.running .fhud-time {
  color: rgba(255,255,255,0.95);
}

/* Paused — gold pulsing icon, dimmed time */
.fhud.paused .fhud-timer-icon {
  stroke: #D9B878;
  filter: none;
  animation: fhudTimerPulse 1.6s ease-in-out infinite;
}
.fhud.paused .fhud-time { color: rgba(217,184,120,0.55); }
.fhud.paused .fhud-pct  { opacity: 0.5; }

@keyframes fhudTimerPulse {
  0%,100% { opacity: 0.30; filter: none; }
  50%     { opacity: 1;    filter: drop-shadow(0 0 5px rgba(217,184,120,0.65)); }
}

/* Light mode */
body.light-mode .fhud {
  background: rgba(245,243,238,0.90);
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
body.light-mode .fhud-time    { color: rgba(0,0,0,0.80); }
body.light-mode .fhud-pct     { color: #B8860B; }
body.light-mode .fhud-ring-fill { stroke: #B8860B; }
body.light-mode .fhud-ring-bg   { stroke: rgba(0,0,0,0.08); }
body.light-mode .fhud-sep       { background: rgba(0,0,0,0.12); }
body.light-mode .fhud-pause-btn { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.55); }
body.light-mode .fhud.running .fhud-pause-btn {
  background: rgba(10,128,96,0.10);
  border: 1.5px solid rgba(10,128,96,0.30);
  color: #0A8060;
}
body.light-mode .fhud.paused .fhud-pause-btn {
  background: rgba(184,134,11,0.10);
  border: 1.5px solid rgba(184,134,11,0.35);
  color: #8B6500;
}
body.light-mode .fhud-timer-icon { stroke: rgba(0,0,0,0.35); }
/* Light mode running/paused timer states */
body.light-mode .fhud.running .fhud-timer-icon {
  stroke: #0A8060;
  filter: drop-shadow(0 0 2px rgba(10,128,96,0.30));
}
body.light-mode .fhud.running .fhud-time { color: rgba(0,0,0,0.88); }
body.light-mode .fhud.paused .fhud-timer-icon {
  stroke: #B8860B;
  filter: none;
}
body.light-mode .fhud.paused .fhud-time { color: rgba(184,134,11,0.65); }

/* ═══ END FLOATING HUD ══════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   BEX CARD — UNIFIED WRAPPER
   Card + stepper read as one continuous piece:
   - wrapper owns the border + radius + shadow
   - card top has no bottom radius when open
   - stepper is same bg, no own border, seamlessly attached
   - left accent bar runs full wrapper height
   ═══════════════════════════════════════════════════════════ */

/* Wrapper — owns border + radius for the whole unit */
.bex-card-wrapper {
  position: relative !important;
  scroll-margin-top: 68px;
  border-radius: 16px;
  border: 1.5px solid rgba(255,255,255,0.08);
  background: #16161f;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;  /* clips both card and stepper to one radius */
}
.bex-card-wrapper.bex-inline-open {
  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);
}
body.cable-week .bex-card-wrapper.bex-inline-open {
  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);
}

/* Card — no own border/radius; wrapper handles it */
.bex-card-wrapper .banner-ex-card {
  border: none !important;
  border-radius: 0 !important;
  background: #1a1a27 !important;
  box-shadow: none !important;
}
/* Expanded card — subtle bottom divider line to separate from stepper */
.bex-inline-open .banner-ex-card {
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Stepper — same bg as card, no own border */
.bex-card-wrapper .bex-stepper-area {
  background: #16161f !important;
  border: none !important;
  border-top: none !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
}

/* Left accent bar — runs full height of wrapper */
.bex-card-wrapper::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 0.25s ease;
  z-index: 5;
  pointer-events: none;
  border-radius: 3px 0 0 3px;
}
.bex-inline-open::before {
  background: linear-gradient(
    to bottom,
    rgba(201,169,110,0.7) 0%,
    rgba(201,169,110,0.40) 60%,
    rgba(201,169,110,0.0) 100%
  );
}
body.cable-week .bex-inline-open::before {
  background: linear-gradient(
    to bottom,
    rgba(126,181,226,0.7) 0%,
    rgba(126,181,226,0.40) 60%,
    rgba(126,181,226,0.0) 100%
  );
}

/* Number badge — matches accent color when open */
.bex-inline-open .bex-num-big {
  background: rgba(201,169,110,0.15) !important;
  color: #D9B878 !important;
  border: 1px solid rgba(201,169,110,0.25) !important;
}
body.cable-week .bex-inline-open .bex-num-big {
  background: rgba(126,181,226,0.15) !important;
  color: #7EB5E2 !important;
  border: 1px solid rgba(126,181,226,0.25) !important;
}

/* Light mode */
body.light-mode .bex-card-wrapper { background: #f4f2ed; border-color: rgba(0,0,0,0.09); }
body.light-mode .bex-card-wrapper .banner-ex-card { background: #f9f8f5 !important; }
body.light-mode .bex-card-wrapper .bex-stepper-area { background: #f4f2ed !important; }
body.light-mode .bex-inline-open { border-color: rgba(150,110,30,0.30); }
body.light-mode .bex-inline-open .banner-ex-card { border-bottom: 1px solid rgba(0,0,0,0.07) !important; }
body.light-mode .bex-inline-open::before { background: linear-gradient(to bottom, rgba(150,110,30,0.6) 0%, rgba(150,110,30,0.2) 100%); }

/* ═══ END BEX UNIFIED WRAPPER ═══════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   BEX CARD — NUMBERED EXERCISE CIRCLES
   Large, bold, accent-colored — makes 1/2/3 legible at a glance
   ═══════════════════════════════════════════════════════════ */

/* Default (collapsed) — visible but subdued */
.bex-num-badge-num {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1.5px solid rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.70) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s !important;
}

/* Completed exercise — green ring */
.bex-card-wrapper.ex-fully-done .bex-num-badge-num {
  background: rgba(52,211,153,0.12) !important;
  border-color: rgba(52,211,153,0.45) !important;
  color: #34D399 !important;
  box-shadow: 0 0 10px rgba(52,211,153,0.20) !important;
}

/* Expanded — gold/blue accent */
.bex-inline-open .bex-num-badge-num {
  background: rgba(217,184,120,0.16) !important;
  border-color: rgba(217,184,120,0.50) !important;
  color: #D9B878 !important;
  box-shadow: 0 0 14px rgba(217,184,120,0.22) !important;
}
body.cable-week .bex-inline-open .bex-num-badge-num {
  background: rgba(126,181,226,0.16) !important;
  border-color: rgba(126,181,226,0.50) !important;
  color: #7EB5E2 !important;
  box-shadow: 0 0 14px rgba(126,181,226,0.22) !important;
}

/* Light mode */
body.light-mode .bex-num-badge-num {
  background: rgba(0,0,0,0.06) !important;
  border-color: rgba(0,0,0,0.18) !important;
  color: rgba(0,0,0,0.65) !important;
}
body.light-mode .bex-inline-open .bex-num-badge-num {
  background: rgba(150,110,30,0.12) !important;
  border-color: rgba(150,110,30,0.45) !important;
  color: #8B6914 !important;
}

/* ═══ END BEX NUMBERED CIRCLES ══════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   BEX STEP TRACKER — numbered circles outside cards
   ═══════════════════════════════════════════════════════════ */

/* Row wrapping number col + card */
.bex-step-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  position: relative;
}

/* Left column: circle + line */
.bex-step-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 52px;        /* wider to give icon badges room */
  padding-top: 10px;
  overflow: visible;  /* allow icon badges to overflow circle bounds */
}
/* Clip only the connecting line, not the circle area */
.bex-step-col .bex-step-line {
  overflow: hidden;
}

/* Numbered circle */
.bex-step-num {
  width: 40px;
  min-height: 40px;
  border-radius: 20px;  /* pill shape to fit number + icons */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px 5px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.5px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;

  /* Default: todo */
  background: rgba(255,255,255,0.07);
  border: 2px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.65);
}

/* Completed — neutral, icon shows state (no colour change on circle) */
.bex-step-num.done {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.65);
}

/* PR earned — neutral, icon shows state */
.bex-step-num.has-pr {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.65);
}

/* Icon row — below the number, inline in column layout */
.bex-step-num .sn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.2s;
  position: static;
}
/* Icon row wrapper */
.bex-step-num .sn-icons-row {
  display: flex;
  gap: 2px;
  align-items: center;
}
.bex-step-num .sn-icon svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
/* Check — always shown dim */
.bex-step-num .sn-check svg { stroke: rgba(255,255,255,0.22); }
.bex-step-num.done .sn-check svg { stroke: #34D399; }
.bex-step-num.done .sn-check { background: rgba(52,211,153,0.18); }

/* Trophy — always shown dim */
.bex-step-num .sn-trophy svg { fill: rgba(255,255,255,0.16); }
.bex-step-num.has-pr .sn-trophy svg { fill: #D9B878; }
.bex-step-num.has-pr .sn-trophy { background: rgba(217,184,120,0.18); }

/* Light mode */
body.light-mode .bex-step-num .sn-check svg { stroke: rgba(0,0,0,0.18); }
body.light-mode .bex-step-num.done .sn-check svg { stroke: #16a34a; }
body.light-mode .bex-step-num.done .sn-check { background: rgba(22,163,74,0.15); }
body.light-mode .bex-step-num .sn-trophy svg { fill: rgba(0,0,0,0.14); }
body.light-mode .bex-step-num.has-pr .sn-trophy svg { fill: #8B6500; }
body.light-mode .bex-step-num.has-pr .sn-trophy { background: rgba(184,134,11,0.15); }
body.light-mode .bex-step-num.done { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.20); color: rgba(0,0,0,0.55); }
body.light-mode .bex-step-num.has-pr { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.20); color: rgba(0,0,0,0.55); }

/* Active (expanded) — set via JS */
.bex-step-num.active {
  background: rgba(217,184,120,0.18);
  border-color: rgba(217,184,120,0.70);
  color: #D9B878;
  box-shadow: inset 0 0 8px rgba(217,184,120,0.20);
}
body.cable-week .bex-step-num.active {
  background: rgba(126,181,226,0.18);
  border-color: rgba(126,181,226,0.70);
  color: #7EB5E2;
  box-shadow: inset 0 0 8px rgba(126,181,226,0.20);
}

/* Connecting line between circles */
.bex-step-line {
  width: 2px;
  flex: 1;
  min-height: 20px;
  margin-top: 4px;
  background: rgba(255,255,255,0.09);
  border-radius: 1px;
  transition: background 0.3s;
}
/* Line above done circle glows green */
.bex-step-num.done + .bex-step-line,
.bex-step-row:has(.bex-step-num.done) .bex-step-line {
  background: rgba(52,211,153,0.25);
}

/* Card takes remaining width */
.bex-step-row > .bex-card-wrapper {
  flex: 1;
  min-width: 0;
}

/* Remove old num-badge from inside card (now outside) */
.bex-num-badge { display: none !important; }

/* Light mode */
body.light-mode .bex-step-num {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.20);
  color: rgba(0,0,0,0.55);
}
body.light-mode .bex-step-num.done {
  background: rgba(34,150,100,0.10);
  border-color: #22a060;
  color: #22a060;
}
body.light-mode .bex-step-num.active {
  background: rgba(140,100,20,0.12);
  border-color: rgba(140,100,20,0.60);
  color: #7a5a0a;
}
/* light mode has-pr — handled in icon overlay block above */
body.light-mode .bex-step-line { background: rgba(0,0,0,0.10); }

/* ═══ END BEX STEP TRACKER ══════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   ODOMETER — slot-roll animation on bex stepper inputs
   ═══════════════════════════════════════════════════════════ */

/* Keep input in DOM for JS but invisible */
.bex-input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: none !important;
}

/* Odometer — fills stepper flex slot */
.bex-odometer {
  flex: 1 1 0;
  min-width: 0;
  height: 56px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
  box-sizing: border-box;
}

/* Slot: the visible window — clips to one value at a time */
.bex-odo-slot {
  position: relative;
  height: 48px;
  width: 100%;           /* fill the odometer flex cell */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The value label — slides in/out */
.bex-odo-val {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: rgba(255,255,255,0.92);
  font-variant-numeric: tabular-nums;
  line-height: 48px;
  white-space: nowrap;
  will-change: transform, opacity;
}
/* Shrink font for longer values to prevent clipping */
.bex-odo-val.len-3 { font-size: 22px !important; letter-spacing: -1px !important; }
.bex-odo-val.len-4 { font-size: 18px !important; letter-spacing: -1px !important; }
.bex-odo-val.len-5 { font-size: 15px !important; letter-spacing: -1px !important; }
.bex-odo-val.enter-up   { animation: odoEnterUp   0.2s cubic-bezier(0.23,1,0.32,1) forwards; }
.bex-odo-val.enter-down { animation: odoEnterDown 0.2s cubic-bezier(0.23,1,0.32,1) forwards; }
.bex-odo-val.exit-up    { animation: odoExitUp    0.18s ease-in forwards; }
.bex-odo-val.exit-down  { animation: odoExitDown  0.18s ease-in forwards; }

@keyframes odoEnterUp   { from { transform:translateY(60%); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes odoEnterDown { from { transform:translateY(-60%); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes odoExitUp    { from { transform:translateY(0); opacity:1; } to { transform:translateY(-60%); opacity:0; } }
@keyframes odoExitDown  { from { transform:translateY(0); opacity:1; } to { transform:translateY(60%); opacity:0; } }

/* Zero state */
.bex-odometer.zero-val .bex-odo-val { color: rgba(255,255,255,0.25); }

/* Light mode */
body.light-mode .bex-odo-val { color: rgba(0,0,0,0.82); }
body.light-mode .bex-odometer.zero-val .bex-odo-val { color: rgba(0,0,0,0.22); }

/* ═══ END ODOMETER ══════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   VERTICAL STEPPER — ▲ number ▼ layout
   Must override all .bex-step fixed-size rules
   ═══════════════════════════════════════════════════════════ */

/* Container */
/* ═══════════════════════════════════════════════════════════
   VERTICAL STEPPER — redesigned compact layout
   Each vstep is a horizontal pill: [▲] [number] [▼]
   Label sits above, small and secondary.
   ═══════════════════════════════════════════════════════════ */

/* ══ VERTICAL STEPPER ══ ▲ number ▼ stacked layout ═════════ */
/* Outer shell — column, full width */
.bex-vstep {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.055) !important;
  border: 1.5px solid rgba(255,255,255,0.09) !important;
  box-sizing: border-box !important;
}

/* Arrow buttons — full width, fixed height, slightly tinted bg */
.bex-vstep-up.bex-step,
.bex-vstep-down.bex-step {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.04) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 0.10s ease !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Dividers — ▲ gets bottom border, ▼ gets top border */
.bex-vstep-up.bex-step   { border-bottom: 1px solid rgba(255,255,255,0.07) !important; }
.bex-vstep-down.bex-step { border-top:    1px solid rgba(255,255,255,0.07) !important; }

/* Press flash */
.bex-vstep-up.bex-step:active,
.bex-vstep-down.bex-step:active {
  background: rgba(255,255,255,0.10) !important;
}

/* Arrow SVGs — chevrons pointing up/down */
.bex-vstep-up.bex-step svg,
.bex-vstep-down.bex-step svg {
  width: clamp(16px, 2.5vw, 20px) !important;
  height: clamp(16px, 2.5vw, 20px) !important;
  stroke: rgba(255,255,255,0.45) !important;
  display: block !important;
  flex-shrink: 0 !important;
  transition: stroke 0.10s !important;
}
.bex-vstep-up.bex-step:active   svg { stroke: rgba(255,255,255,0.90) !important; }
.bex-vstep-down.bex-step:active svg { stroke: rgba(255,255,255,0.90) !important; }

/* Number — center section, full width, tap to open keypad */
.bex-vstep-num {
  width: 100% !important;
  height: clamp(44px, 7vh, 64px) !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(26px, 4.5vw, 34px) !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
  color: rgba(240,228,196,0.95) !important;
  font-variant-numeric: tabular-nums !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  transition: color 0.12s !important;
  pointer-events: auto !important;
  flex-shrink: 0 !important;
  background: rgba(0,0,0,0.22) !important;
}
.bex-vstep-num:active { color: rgba(255,255,255,0.55) !important; }
.bex-vstep-num.zero-val { color: rgba(255,255,255,0.18) !important; }
/* Scale for wide numbers */
.bex-vstep-num.len-3 { font-size: 28px !important; }
.bex-vstep-num.len-4 { font-size: 23px !important; letter-spacing: -0.5px !important; }
.bex-vstep-num.len-5 { font-size: 19px !important; letter-spacing: 0px !important; }

/* Hidden real input */
.bex-vstep .bex-input {
  position: absolute !important;
  width: 0 !important; height: 0 !important;
  opacity: 0 !important; pointer-events: none !important;
  border: none !important; padding: 0 !important;
}

/* Input label — above the vstep box */
.bex-input-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  color: rgba(240,228,196,0.40) !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
  padding-left: 2px !important;
  display: block !important;
}

/* × separator — vertically centered between the two vstep columns */
.bex-set-inputs .bex-input-x {
  align-self: center !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.20) !important;
  padding: 0 2px !important;
  flex-shrink: 0 !important;
  width: 14px !important;
  text-align: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  /* vertically offset by 38px (▲ button) so it sits beside the number */
  padding-top: 38px !important;
}

/* ── Week type accent on active vstep ── */
body:not(.cable-week) .bex-inline-open .bex-vstep {
  border-color: rgba(212,148,90,0.22) !important;
}
body.cable-week .bex-inline-open .bex-vstep {
  border-color: rgba(126,181,226,0.22) !important;
}

/* Light mode */
body.light-mode .bex-vstep {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.12) !important;
}
body.light-mode .bex-vstep-up.bex-step   { border-bottom-color: rgba(0,0,0,0.08) !important; }
body.light-mode .bex-vstep-down.bex-step { border-top-color:    rgba(0,0,0,0.08) !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.38) !important; }
body.light-mode .bex-vstep-up.bex-step:active   svg { stroke: rgba(0,0,0,0.80) !important; }
body.light-mode .bex-vstep-down.bex-step:active svg { stroke: rgba(0,0,0,0.80) !important; }
body.light-mode .bex-vstep-num { color: rgba(0,0,0,0.88) !important; }
body.light-mode .bex-vstep-num.zero-val { color: rgba(0,0,0,0.18) !important; }
body.light-mode .bex-input-label { color: rgba(0,0,0,0.40) !important; }
body.light-mode .bex-set-inputs .bex-input-x { color: rgba(0,0,0,0.18) !important; }

/* ═══ END VERTICAL STEPPER ══════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   PORTRAIT CALENDAR — consistent ring alignment
   ═══════════════════════════════════════════════════════════ */

/* Cell — column layout with fixed label slot + ring slot */
.mv-day-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 4px 2px !important;
  box-sizing: border-box !important;
}

/* Label slot — fixed height so ring is always at the same Y */
.mv-label-slot {
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

/* Ring slot — fixed height, centered */
.mv-ring-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

/* Workout label */
.mv-workout-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255,255,255,0.38);
  white-space: nowrap;
  line-height: 1;
}
.mv-workout-label.free  { color: rgba(212,148,90,0.65); }
.mv-workout-label.cable { color: rgba(126,181,226,0.65); }
.mv-workout-label.rest  { color: rgba(255,255,255,0.20); }

/* Ring sizing in portrait calendar */
body.calendar-view-active .day-ring-wrap {
  width: 32px !important;
  height: 32px !important;
}
body.calendar-view-active .day-ring-svg {
  width: 32px !important;
  height: 32px !important;
}
body.calendar-view-active .day-ring-bg,
body.calendar-view-active .day-ring-fill {
  stroke-width: 2.5 !important;
}
body.calendar-view-active .day-ring-wrap .day-number {
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.light-mode .mv-workout-label       { color: rgba(0,0,0,0.6); }
body.light-mode .mv-workout-label.free  { color: rgba(160,80,20,0.60); }
body.light-mode .mv-workout-label.cable { color: rgba(40,100,180,0.60); }
body.light-mode .mv-workout-label.rest  { color: rgba(0,0,0,0.18); }

/* ═══ END PORTRAIT CALENDAR ══════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   BEX CARD — HERO IMAGE + MUSCLE ICON
   ═══════════════════════════════════════════════════════════ */

/* Collapsed header muscle icon */
/* Collapsed card thumbnail: exercise photo + muscle badge */
.bex-hdr-thumb {
  position: relative;
  width: 70px;
  align-self: stretch;   /* fill full card height */
  flex-shrink: 0;
  border-radius: 12px 0 0 12px;
  overflow: hidden;
  margin-right: 0;
}
.bex-hdr-ex-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s;
}
/* Muscle group badge — inside bottom-right of thumb (within overflow:hidden) */
.bex-hdr-muscle-badge {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(10,10,18,0.80);
  border: 1.5px solid rgba(255,255,255,0.20);
  padding: 3px;
  box-sizing: border-box;
  backdrop-filter: blur(6px);
}
/* Hide thumb when card is open (hero takes over) */
.bex-card-wrapper.bex-inline-open .bex-hdr-thumb { display: none; }

/* Legacy muscle image (fallback if still used) */
.bex-hdr-muscle {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.45;
  margin-right: 2px;
}
.bex-card-wrapper.bex-inline-open .bex-hdr-muscle { display: none; }

/* Light mode */
body.light-mode .bex-hdr-muscle-badge {
  background: rgba(240,237,232,0.88);
  border-color: rgba(0,0,0,0.14);
}

/* Expanded hero banner */
.bex-hero-banner {
  position: relative;
  width: 100%;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  cursor: pointer;
  flex-shrink: 0;
}
.bex-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.bex-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.35) 100%
  );
}
/* Play button — center of hero */
.bex-hero-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.25);
}
.bex-hero-play svg {
  width: 14px;
  height: 14px;
  margin-left: 2px;
}
/* Muscle icon — bottom-right of hero */
.bex-hero-muscle {
  position: absolute;
  bottom: 6px;
  right: 8px;
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 0.75;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
  pointer-events: none;
}

/* Light mode */
body.light-mode .bex-hdr-muscle { opacity: 0.35; }
body.light-mode .bex-hero-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.20) 100%);
}

/* ═══ END BEX HERO ══════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   INSIGHTS — DAYS COMPLETED CARD (above rank)
   ═══════════════════════════════════════════════════════════ */
.ins-days-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.ins-days-card:active { background: rgba(255,255,255,0.04); }

.ins-days-left {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ins-days-num {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -1.5px;
  color: rgba(255,255,255,0.92);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ins-days-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
}
.ins-days-sublabel {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.25);
}

/* Mini ring */
.ins-days-ring-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.ins-days-ring-svg {
  width: 44px;
  height: 44px;
}
.ins-days-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 3;
}
.ins-days-ring-fill {
  fill: none;
  stroke: #D9B878;
  stroke-width: 3;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.4,0,0.2,1);
}
.ins-days-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  color: #D9B878;
  letter-spacing: -0.2px;
  line-height: 1;
}

/* Chevron */
.ins-days-chevron {
  width: 16px;
  height: 16px;
  stroke: rgba(255,255,255,0.20);
  flex-shrink: 0;
}

/* Light mode */
body.light-mode .ins-days-num { color: rgba(0,0,0,0.85); }
body.light-mode .ins-days-label { color: rgba(0,0,0,0.40); }
body.light-mode .ins-days-sublabel { color: rgba(0,0,0,0.28); }
body.light-mode .ins-days-ring-bg { stroke: rgba(0,0,0,0.07); }
body.light-mode .ins-days-ring-fill { stroke: #B8860B; }
body.light-mode .ins-days-ring-pct { color: #B8860B; }
body.light-mode .ins-days-chevron { stroke: rgba(0,0,0,0.18); }

/* ═══ END DAYS CARD ══════════════════════════════════════════ */


/* Last step-row never shows a connecting line */
.bex-step-row:last-child .bex-step-line,
.bex-step-row:last-of-type .bex-step-line {
  display: none !important;
}

/* Stat block — left-align tag so it doesn't float right */
.bex-body-stat-block {
  justify-content: flex-start;
}


/* ── Day ring PR halo — gold outer circle ─────────────────── */
/* day-ring-pr removed — replaced by day-pr-trophy */


/* ── Calendar day PR trophy ───────────────────────────────── */
.day-pr-trophy {
  width: 10px;
  height: 10px;
  display: block;
  margin: 2px auto 0;
  flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(217,184,120,0.5));
}
body.light-mode .day-pr-trophy { stroke: #B8860B; }


/* ── Persistent next-set tab flash ──────────────────────── */
@keyframes bexTabPulse {
  0%   { background: rgba(217,184,120,0.10); border-color: rgba(217,184,120,0.30); box-shadow: none; }
  50%  { background: rgba(217,184,120,0.42); border-color: rgba(217,184,120,0.95); box-shadow: 0 0 12px rgba(217,184,120,0.35); }
  100% { background: rgba(217,184,120,0.10); border-color: rgba(217,184,120,0.30); box-shadow: none; }
}
.bex-set-tab.bex-tab-flash {
  animation: bexTabPulse 1.1s ease-in-out infinite !important;
  color: #D9B878 !important;
}
@keyframes bexTabPulse {
  0%,100% { background: rgba(217,184,120,0.08); border-color: rgba(217,184,120,0.32); box-shadow: none; }
  50%     { background: rgba(217,184,120,0.30); border-color: rgba(217,184,120,0.88); box-shadow: 0 0 10px rgba(217,184,120,0.28); }
}
body.cable-week .bex-set-tab.bex-tab-flash {
  animation: bexTabPulseCable 1.1s ease-in-out infinite !important;
}
@keyframes bexTabPulseCable {
  0%,100% { background: rgba(126,181,226,0.10); border-color: rgba(126,181,226,0.30); box-shadow: none; }
  50%     { background: rgba(126,181,226,0.42); border-color: rgba(126,181,226,0.95); box-shadow: 0 0 12px rgba(126,181,226,0.35); }
}

/* ── Next exercise circle flash ─────────────────────────── */
@keyframes bexCirclePulse {
  0%   { box-shadow: 0 0 0 0 rgba(217,184,120,0.0);  border-color: rgba(217,184,120,0.40); }
  50%  { box-shadow: 0 0 0 6px rgba(217,184,120,0.25); border-color: rgba(217,184,120,0.95); }
  100% { box-shadow: 0 0 0 0 rgba(217,184,120,0.0);  border-color: rgba(217,184,120,0.40); }
}
.bex-step-num.bex-circle-flash {
  animation: bexCirclePulse 1.2s ease-in-out infinite !important;
  color: #D9B878 !important;
}
body.cable-week .bex-step-num.bex-circle-flash {
  animation: bexCircleFlashCable 1.2s ease-in-out infinite !important;
}
@keyframes bexCircleFlashCable {
  0%   { box-shadow: 0 0 0 0 rgba(126,181,226,0.0);  border-color: rgba(126,181,226,0.40); }
  50%  { box-shadow: 0 0 0 6px rgba(126,181,226,0.25); border-color: rgba(126,181,226,0.95); }
  100% { box-shadow: 0 0 0 0 rgba(126,181,226,0.0);  border-color: rgba(126,181,226,0.40); }
}


/* ── PR pill date label ─────────────────────────────────── */
.bex-pr-date {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(217,184,120,0.55) !important;
  letter-spacing: 0.3px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
.bex-pr-date-arrow {
  width: 12px !important;
  height: 12px !important;
  stroke: rgba(217,184,120,0.45) !important;
  flex-shrink: 0 !important;
}
.bex-pr-tappable {
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}
.bex-pr-tappable:active {
  background: rgba(217,184,120,0.14) !important;
}
body.light-mode .bex-pr-date { color: rgba(150,100,30,0.60) !important; }


/* ═══════════════════════════════════════════════════════════
   PR HISTORY MODAL
   ═══════════════════════════════════════════════════════════ */
.pr-history-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #0e0e18;
  z-index: 300;
}
.pr-history-overlay.open {
  display: flex;
  flex-direction: column;
}
.pr-history-modal {
  width: 100%;
  height: 100%;
  flex: 1;
  background: #0e0e18;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pr-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(18px, calc(12px + env(safe-area-inset-top, 0px))) 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.pr-history-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.92);
}
.pr-history-title svg {
  width: 20px; height: 20px;
  stroke: #D9B878;
}
.pr-history-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.pr-history-close svg { width: 16px; height: 16px; stroke: rgba(255,255,255,0.6); }
.pr-history-search-wrap {
  position: relative;
  padding: 10px 16px 0;
  flex-shrink: 0;
}
.pr-search-icon {
  position: absolute;
  left: 28px; top: 50%;
  transform: translateY(-25%);
  width: 16px; height: 16px;
  stroke: rgba(255,255,255,0.35);
  pointer-events: none;
}
.pr-history-search {
  width: 100%;
  padding: 10px 14px 10px 38px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  color: rgba(255,255,255,0.88);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.pr-history-search::placeholder { color: rgba(255,255,255,0.28); }
.pr-history-toggle-row {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  flex-shrink: 0;
}
.pr-toggle-btn {
  flex: 1;
  padding: 8px 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.pr-toggle-btn.active {
  background: rgba(217,184,120,0.15);
  border-color: rgba(217,184,120,0.45);
  color: #D9B878;
}
.pr-history-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0 calc(24px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Group header (by exercise mode) */
.pr-group-header {
  padding: 12px 16px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 4px;
}
.pr-group-header:first-child { border-top: none; margin-top: 0; }
/* PR row */
.pr-hist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  cursor: pointer;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.pr-hist-row:active { background: rgba(255,255,255,0.04); }
.pr-hist-trophy {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(217,184,120,0.10);
  border: 1px solid rgba(217,184,120,0.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pr-hist-trophy svg { width: 14px; height: 14px; fill: #D9B878; }
.pr-hist-info { flex: 1; min-width: 0; }
.pr-hist-name {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pr-hist-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
}
.pr-hist-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0;
}
.pr-hist-val {
  font-size: 15px; font-weight: 800;
  color: #D9B878;
  letter-spacing: -0.3px;
}
.pr-hist-date {
  font-size: 11px; color: rgba(255,255,255,0.35);
}
.pr-hist-caret { width: 14px; height: 14px; stroke: rgba(255,255,255,0.20); }
.pr-hist-empty {
  padding: 40px 16px;
  text-align: center;
  color: rgba(255,255,255,0.30);
  font-size: 14px;
}
/* Light mode */
body.light-mode .pr-history-modal { background: #f0ede8; }
body.light-mode .pr-history-search { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.09); color: rgba(0,0,0,0.85); }
body.light-mode .pr-toggle-btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.09); color: rgba(0,0,0,0.45); }
body.light-mode .pr-toggle-btn.active { background: rgba(180,130,50,0.12); border-color: rgba(180,130,50,0.40); color: #B8860B; }
body.light-mode .pr-hist-val { color: #B8860B; }
/* ═══ END PR HISTORY ══════════════════════════════════════ */


/* PR History card — clearly tappable */
.ins-pr-graph-tappable {
  cursor: pointer !important;
  border: 1px solid rgba(217,184,120,0.20) !important;
  transition: border-color 0.15s, background 0.15s !important;
  -webkit-tap-highlight-color: transparent;
}
.ins-pr-graph-tappable:active {
  background: rgba(217,184,120,0.06) !important;
  border-color: rgba(217,184,120,0.40) !important;
}
.ins-pr-view-all-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px 5px 12px;
  background: rgba(217,184,120,0.12);
  border: 1px solid rgba(217,184,120,0.30);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #D9B878;
  flex-shrink: 0;
}
.ins-pr-view-all-btn svg {
  width: 12px;
  height: 12px;
  stroke: #D9B878;
}


/* 3C colored values matching spider */
.ins-3c-val.cons-val { color: #6EE7B7 !important; }
.ins-3c-val.comm-val { color: #7EB5E2 !important; }
.ins-3c-val.ctrl-val { color: #D9B878 !important; }


/* ── Spider chart HTML labels ─────────────────────────── */
.spider-label-top {
  text-align: center;
  padding: 12px 0 4px;
}
.spider-label-bottom {
  display: flex;
  justify-content: space-between;
  padding: 4px 16px 16px;
}
.spider-lbl-left  { text-align: left; }
.spider-lbl-right { text-align: right; }
.spider-lbl-name {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.1px;
  line-height: 1.2;
}
.spider-lbl-pct {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
body.light-mode .spider-lbl-name { color: rgba(0,0,0,0.82); }


/* ═══════════════════════════════════════════════════
   PERFORMANCE — 3 ring stat tiles
   ═══════════════════════════════════════════════════ */
.ins-perf-3c {
  padding-bottom: 20px;
}
.perf-tiles {
  display: flex;
  gap: 12px;
  padding: 4px 16px 0;
}
.perf-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.perf-ring-wrap {
  position: relative;
  width: 72px;
  height: 72px;
}
.perf-ring-svg {
  width: 72px;
  height: 72px;
}
.perf-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.07);
  stroke-width: 6;
}
.perf-ring-fill {
  fill: none;
  stroke-width: 6;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.4,0,0.2,1);
}
.perf-ring-fill.cons { stroke: #6EE7B7; }
.perf-ring-fill.comm { stroke: #7EB5E2; }
.perf-ring-fill.ctrl { stroke: #D9B878; }
.perf-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
}
.perf-tile-name {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.82);
  text-align: center;
  letter-spacing: 0.1px;
}
.perf-tile-desc {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.32);
  text-align: center;
  margin-top: -4px;
}
body.light-mode .perf-ring-bg { stroke: rgba(0,0,0,0.07); }
body.light-mode .perf-tile-name { color: rgba(0,0,0,0.80); }
body.light-mode .perf-tile-desc { color: rgba(0,0,0,0.6); }
/* ═══ END PERFORMANCE TILES ═══════════════════════ */


/* ═══════════════════════════════════════════════════
   SPIDER CHART LAYOUT
   ═══════════════════════════════════════════════════ */
.spider-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 16px;
  gap: 0;
}
.spider-top-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-bottom: 4px;
}
.spider-metric-name {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.80);
  letter-spacing: 0.1px;
}
.spider-metric-pct {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.ins-spider-canvas {
  width: 100% !important;
  height: auto !important;
  display: block;
}
.spider-bottom-labels {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding-top: 6px;
}
.spider-bottom-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 45%;
}
.spider-bottom-label.left  { align-items: flex-start; }
.spider-bottom-label.right { align-items: flex-end; text-align: right; }

body.light-mode .spider-metric-name { color: rgba(0,0,0,0.75); }
/* ═══ END SPIDER LAYOUT ════════════════════════════ */


/* ═══════════════════════════════════════════════════
   PERFORMANCE — collapsed 3C bars + expanded spider
   ═══════════════════════════════════════════════════ */
.ins-3c-summary {
  padding: 4px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ins-3c-metric {}
.ins-3c-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.ins-3c-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ins-3c-lbl {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
}
.ins-3c-pct {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.ins-3c-track {
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
.ins-3c-fill {
  height: 100%;
  border-radius: 3px;
  width: 0%;
  transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
}
.ins-3c-fill.cons { background: #6EE7B7; }
.ins-3c-fill.comm { background: #7EB5E2; }
.ins-3c-fill.ctrl { background: #D9B878; }

/* Spider expanded layout */
.spider-layout {
  padding: 8px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.spider-top-label {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding-bottom: 6px;
}
.spider-lbl-name {
  font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,0.80);
  letter-spacing: 0.1px;
}
.spider-lbl-pct {
  font-size: 22px; font-weight: 900;
  letter-spacing: -0.8px; line-height: 1;
}
.ins-spider-canvas {
  width: 100% !important; height: auto !important; display: block;
}
.spider-bottom-labels {
  display: flex; width: 100%;
  justify-content: space-between;
  padding-top: 8px;
}
.spider-bl { display: flex; flex-direction: column; gap: 2px; max-width: 44%; }
.spider-bl.left  { align-items: flex-start; }
.spider-bl.right { align-items: flex-end; text-align: right; }

/* Tap affordance on header */
.ins-header-tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ins-header-tap:active { background: rgba(255,255,255,0.03); }

body.light-mode .ins-3c-lbl { color: rgba(0,0,0,0.65); }
body.light-mode .ins-3c-track { background: rgba(0,0,0,0.07); }
body.light-mode .spider-lbl-name { color: rgba(0,0,0,0.75); }
/* ═══ END PERFORMANCE ══════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   MODERN INSIGHTS REFRESH
   ═══════════════════════════════════════════════════════════════ */

/* 1. Glassmorphism card surfaces */
.ins-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  transition: transform 0.12s ease !important;
  box-shadow: none !important;
}
body.light-mode .ins-card {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(0,0,0,0.07) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

/* 5. Press scale on every tappable card */
.ins-card[onclick],
.ins-card.ins-pr-graph-tappable,
.ins-days-card,
.ins-rank {
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}
.ins-card[onclick]:active,
.ins-card.ins-pr-graph-tappable:active,
.ins-days-card:active,
.ins-rank:active {
  transform: scale(0.975) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.25) !important;
}

/* 3. Consistent card header */
.ins-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px 10px !important;
  gap: 10px !important;
}
.ins-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

/* 3. Gold icon — consistent size and color */
.ins-header-icon {
  width: 18px !important;
  height: 18px !important;
  stroke: #D9B878 !important;
  fill: none !important;
  flex-shrink: 0 !important;
}

/* 3. Title — consistent weight and color */
.ins-title {
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.88) !important;
  white-space: nowrap !important;
}
body.light-mode .ins-title { color: rgba(0,0,0,0.80) !important; }

/* 4. Accent metric values */
.ins-rank-score  { color: #D9B878 !important; }
.ins-days-num    { color: rgba(255,255,255,0.96) !important; }
.ins-pr-val.new  { color: #6EE7B7 !important; }

/* 2. Section pill dividers — replace horizontal rule style */
.section-title-divider {
  padding: 20px 0 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}
.section-title-divider::before,
.section-title-divider::after { display: none !important; }
.section-title-text {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  background: rgba(217,184,120,0.10) !important;
  border: 1px solid rgba(217,184,120,0.22) !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  color: rgba(217,184,120,0.75) !important;
  white-space: nowrap !important;
}
body.light-mode .section-title-text {
  background: rgba(180,130,50,0.08) !important;
  border-color: rgba(180,130,50,0.20) !important;
  color: rgba(150,100,30,0.70) !important;
}

/* Canvas backgrounds match new card surface */
.ins-graph-canvas,
.ins-spider-canvas {
  background: transparent !important;
}
body.light-mode .ins-graph-canvas,
body.light-mode .ins-spider-canvas {
  background: transparent !important;
}

/* Insight sections container spacing */
.insight-sections {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 16px 24px !important;
}

/* ═══ END MODERN INSIGHTS ════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════
   ARC GAUGE DIALS — Performance section
   ═══════════════════════════════════════════════════ */
.arc-gauges-row {
  display: flex;
  gap: 8px;
  padding: 8px 14px 18px;
  justify-content: space-between;
}
.arc-gauge {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.arc-gauge-svg-wrap {
  position: relative;
  width: 100%;
  max-width: 96px;
}
.arc-gauge-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.arc-gauge-center {
  position: absolute;
  bottom: 4px;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arc-gauge-pct {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.8px;
  color: rgba(255,255,255,0.92);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.arc-gauge-label {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,0.70);
  text-align: center;
  letter-spacing: 0.2px;
  margin-top: 2px;
}
.arc-gauge-desc {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.28);
  text-align: center;
}
body.light-mode .arc-gauge-pct  { color: rgba(0,0,0,0.85); }
body.light-mode .arc-gauge-label { color: rgba(0,0,0,0.65); }
body.light-mode .arc-gauge-desc  { color: rgba(0,0,0,0.6); }
/* ═══ END ARC GAUGES ═══════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   180-DAY JOURNEY MODAL
   ═══════════════════════════════════════════════════════ */
.days-journey-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: #0d0d1a;
  z-index: 610;
  flex-direction: column;
  overflow: hidden;
}
.days-journey-modal.open { display: flex; }
.days-journey-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 0 40px;
  overflow: hidden; /* prevent inner scroll propagation */
  touch-action: none; /* block touch scroll passthrough */
}

/* Header */
.days-journey-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(18px, calc(10px + env(safe-area-inset-top,0px))) 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.days-journey-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 800;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.1px;
}
.days-journey-close {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.days-journey-close svg { width: 16px; height: 16px; stroke: rgba(255,255,255,0.6); }

/* Hero ring */
.days-journey-hero {
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 20px 20px; gap: 14px;
}
.days-journey-ring-wrap {
  position: relative; width: 180px; height: 180px;
}
.days-journey-ring-svg { width: 180px; height: 180px; }
.days-journey-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.days-journey-count {
  font-size: 52px; font-weight: 900;
  letter-spacing: -3px; line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.days-journey-of {
  font-size: 16px; font-weight: 600;
  color: rgba(255,255,255,0.40);
  letter-spacing: -0.5px;
}
.days-journey-word {
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase; letter-spacing: 1px;
}
.days-journey-subtitle {
  font-size: 15px; font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-align: center;
}

/* Stats row */
.days-journey-stats {
  display: flex; align-items: center;
  justify-content: center; gap: 0;
  margin: 0 20px 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 16px 0;
}
.days-journey-stat {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.days-journey-stat-div {
  width: 1px; height: 32px;
  background: rgba(255,255,255,0.10);
  flex-shrink: 0;
}
.days-journey-stat-val {
  font-size: 24px; font-weight: 900;
  letter-spacing: -1px;
  color: #D9B878;
  font-variant-numeric: tabular-nums;
}
.days-journey-stat-lbl {
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.30);
  text-transform: uppercase; letter-spacing: 0.8px;
}

/* Chart */
.days-journey-chart-wrap {
  margin: 0 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 16px;
}
.days-journey-chart-title {
  font-size: 10px; font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.days-journey-canvas { width: 100% !important; height: auto !important; display: block; }

/* Light mode */
body.light-mode .days-journey-modal { background: #f0ede8; }
body.light-mode .days-journey-count { color: rgba(0,0,0,0.90); }
body.light-mode .days-journey-subtitle { color: rgba(0,0,0,0.45); }
body.light-mode .days-journey-stats { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.07); }
body.light-mode .days-journey-stat-val { color: #B8860B; }
body.light-mode .days-journey-chart-wrap { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.07); }
/* ═══ END JOURNEY MODAL ════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   COMPREHENSIVE LIGHT MODE FIXES
   ═══════════════════════════════════════════════════════════════ */

/* ── Page background ── */
body.light-mode { background: #f0ede8 !important; }

/* ── Fixed header ── */
body.light-mode .fixed-top-area { background: rgba(238,234,226,0.97) !important; }
body.light-mode .week-nav { background: rgba(238,234,226,0.97) !important; }
body.light-mode .fixed-cal-wrap { background: rgba(238,234,226,0.97) !important; }

/* ── Insight cards ── */
body.light-mode .ins-card {
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}
body.light-mode .ins-title { color: rgba(0,0,0,0.82) !important; }
body.light-mode .ins-header-icon { stroke: #B8860B !important; }
body.light-mode .ins-badge { background: rgba(180,130,50,0.15) !important; color: #8B6500 !important; }

/* ── Section pill divider ── */
body.light-mode .section-title-text {
  background: rgba(180,130,50,0.10) !important;
  border-color: rgba(180,130,50,0.22) !important;
  color: rgba(140,90,10,0.80) !important;
}

/* ── Arc gauges ── */
body.light-mode .arc-gauge-pct   { color: rgba(0,0,0,0.85) !important; }
body.light-mode .arc-gauge-label { color: rgba(0,0,0,0.70) !important; }
body.light-mode .arc-gauge-desc  { color: rgba(0,0,0,0.40) !important; }

/* ── PR History card ── */
body.light-mode .ins-pr-graph-tappable {
  border-color: rgba(180,130,50,0.25) !important;
}
body.light-mode .ins-pr-view-all-btn {
  background: rgba(180,130,50,0.10) !important;
  border-color: rgba(180,130,50,0.28) !important;
  color: #8B6500 !important;
}
body.light-mode .ins-pr-view-all-btn svg { stroke: #8B6500 !important; }

/* ── Today PRs list ── */
body.light-mode .ins-pr-row {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.06) !important;
}
body.light-mode .ins-pr-name  { color: rgba(0,0,0,0.85) !important; }
body.light-mode .ins-pr-meta  { color: rgba(0,0,0,0.42) !important; }
body.light-mode .ins-pr-val   { color: #8B6500 !important; }
body.light-mode .ins-pr-val.new { color: #0A7A50 !important; }
body.light-mode .ins-pr-new-tag { background: rgba(10,122,80,0.12) !important; color: #0A7A50 !important; }
body.light-mode .ins-empty    { color: rgba(0,0,0,0.32) !important; }

/* ── Performance card ── */
body.light-mode .ins-3c-lbl   { color: rgba(0,0,0,0.68) !important; }
body.light-mode .ins-3c-track { background: rgba(0,0,0,0.08) !important; }
body.light-mode .ins-3c-pct   { color: rgba(0,0,0,0.80) !important; }

/* ── Colored metric values ── */
body.light-mode .cons-val { color: #0A8060 !important; }
body.light-mode .comm-val { color: #1A60A0 !important; }
body.light-mode .ctrl-val { color: #8B6500 !important; }

/* ── Days completed card ── */
body.light-mode .ins-days-num   { color: rgba(0,0,0,0.88) !important; }
body.light-mode .ins-days-label { color: rgba(0,0,0,0.45) !important; }
body.light-mode .ins-days-sublabel { color: rgba(0,0,0,0.30) !important; }
body.light-mode .ins-days-ring-bg  { stroke: rgba(0,0,0,0.08) !important; }
body.light-mode .ins-days-ring-fill { stroke: #B8860B !important; }
body.light-mode .ins-days-ring-pct  { color: #B8860B !important; }

/* ── Rank card ── */
body.light-mode .ins-rank-name  { color: rgba(0,0,0,0.88) !important; }
body.light-mode .ins-rank-score { color: #8B6500 !important; }
body.light-mode .ins-rank-score-label { color: rgba(0,0,0,0.38) !important; }
body.light-mode .ins-rank-progress-label { color: rgba(0,0,0,0.42) !important; }
body.light-mode .ins-rank-view-all { color: rgba(0,0,0,0.6) !important; }

/* ── PR History modal (full screen) ── */
body.light-mode .pr-history-modal {
  background: #f0ede8 !important;
}
body.light-mode .pr-history-header {
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .pr-history-title { color: rgba(0,0,0,0.88) !important; }
body.light-mode .pr-history-title svg { stroke: #B8860B !important; }
body.light-mode .pr-history-close {
  background: rgba(0,0,0,0.06) !important;
}
body.light-mode .pr-history-close svg { stroke: rgba(0,0,0,0.50) !important; }
body.light-mode .pr-history-search {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: rgba(0,0,0,0.85) !important;
}
body.light-mode .pr-history-search::placeholder { color: rgba(0,0,0,0.30) !important; }
body.light-mode .pr-search-icon { stroke: rgba(0,0,0,0.30) !important; }
body.light-mode .pr-toggle-btn {
  background: rgba(0,0,0,0.05) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: rgba(0,0,0,0.50) !important;
}
body.light-mode .pr-toggle-btn.active {
  background: rgba(180,130,50,0.12) !important;
  border-color: rgba(180,130,50,0.35) !important;
  color: #8B6500 !important;
}
body.light-mode .pr-group-header { color: rgba(0,0,0,0.40) !important; border-top-color: rgba(0,0,0,0.06) !important; }
body.light-mode .pr-hist-row:active { background: rgba(0,0,0,0.04) !important; }
body.light-mode .pr-hist-trophy { background: rgba(180,130,50,0.10) !important; border-color: rgba(180,130,50,0.22) !important; }
body.light-mode .pr-hist-trophy svg { fill: #8B6500 !important; }
body.light-mode .pr-hist-name  { color: rgba(0,0,0,0.85) !important; }
body.light-mode .pr-hist-meta  { color: rgba(0,0,0,0.40) !important; }
body.light-mode .pr-hist-val   { color: #8B6500 !important; }
body.light-mode .pr-hist-date  { color: rgba(0,0,0,0.38) !important; }
body.light-mode .pr-hist-caret { stroke: rgba(0,0,0,0.22) !important; }
body.light-mode .pr-hist-empty { color: rgba(0,0,0,0.32) !important; }

/* ── 180-Day Journey modal ── */
body.light-mode .days-journey-modal { background: #f0ede8 !important; }
body.light-mode .days-journey-header { border-bottom-color: rgba(0,0,0,0.08) !important; }
body.light-mode .days-journey-title { color: rgba(0,0,0,0.88) !important; }
body.light-mode .days-journey-title svg { stroke: #B8860B !important; }
body.light-mode .days-journey-close { background: rgba(0,0,0,0.06) !important; }
body.light-mode .days-journey-close svg { stroke: rgba(0,0,0,0.50) !important; }
body.light-mode .days-journey-count { color: rgba(0,0,0,0.90) !important; }
body.light-mode .days-journey-of    { color: rgba(0,0,0,0.38) !important; }
body.light-mode .days-journey-word  { color: rgba(0,0,0,0.28) !important; }
body.light-mode .days-journey-subtitle { color: rgba(0,0,0,0.45) !important; }
body.light-mode .days-journey-stats {
  background: rgba(255,255,255,0.65) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .days-journey-stat-val { color: #8B6500 !important; }
body.light-mode .days-journey-stat-lbl { color: rgba(0,0,0,0.38) !important; }
body.light-mode .days-journey-stat-div { background: rgba(0,0,0,0.10) !important; }
body.light-mode .days-journey-chart-wrap {
  background: rgba(255,255,255,0.65) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .days-journey-chart-title { color: rgba(0,0,0,0.32) !important; }

/* ── Exercise cards in light mode ── */
body.light-mode .bex-card-wrapper {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-pill-name    { color: rgba(0,0,0,0.88) !important; }
body.light-mode .bex-pill-meta    { color: rgba(0,0,0,0.45) !important; }
body.light-mode .bex-hdr-meta-row { color: rgba(0,0,0,0.45) !important; }
body.light-mode .bex-vstep { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.09) !important; }
body.light-mode .bex-vstep-num    { color: rgba(0,0,0,0.85) !important; }
body.light-mode .bex-vstep-num.zero-val { color: rgba(0,0,0,0.22) !important; }

/* ── Step tracker circles ── */
body.light-mode .bex-step-num {
  background: rgba(0,0,0,0.05) !important;
  border-color: rgba(0,0,0,0.18) !important;
  color: rgba(0,0,0,0.60) !important;
}
body.light-mode .bex-step-line { background: rgba(0,0,0,0.10) !important; }

/* ── Banner card ── */
body.light-mode .banner-ex-card {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
body.light-mode .bex-body-stat    { color: rgba(0,0,0,0.88) !important; }
body.light-mode .bex-body-sec     { color: rgba(0,0,0,0.38) !important; }
body.light-mode .bex-body-pr      { color: rgba(0,0,0,0.55) !important; }

/* ── Set nav tabs ── */
body.light-mode .bex-set-tab {
  background: rgba(0,0,0,0.05) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: rgba(0,0,0,0.55) !important;
}
body.light-mode .bex-set-tab.active {
  background: rgba(180,130,50,0.15) !important;
  border-color: rgba(180,130,50,0.50) !important;
  color: #8B6500 !important;
}

/* ═══ END LIGHT MODE FIXES ════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE CONTRAST FIXES — targeted per screenshot
   ═══════════════════════════════════════════════════════════════ */

/* 1. Journey modal — subtitle, labels, chart */
body.light-mode .days-journey-subtitle { color: rgba(0,0,0,0.65) !important; }
body.light-mode .days-journey-word     { color: rgba(0,0,0,0.55) !important; }
body.light-mode .days-journey-of       { color: rgba(0,0,0,0.55) !important; }
body.light-mode .days-journey-chart-title { color: rgba(0,0,0,0.50) !important; }
/* Journey ring bg visible */
body.light-mode #daysProgressRingFill + circle,
body.light-mode .days-journey-ring-svg circle:first-child {
  stroke: rgba(0,0,0,0.12) !important;
}

/* 2. Rank card */
body.light-mode .ins-rank-progress-label { color: rgba(0,0,0,0.60) !important; }
body.light-mode .ins-rank-view-all       { color: rgba(0,0,0,0.55) !important; }
body.light-mode .ins-rank-progress-pct  { color: #8B6500 !important; }
body.light-mode .ins-rank-progress-bar-wrap { background: rgba(0,0,0,0.10) !important; }

/* 3. Days card */
body.light-mode .ins-days-label    { color: rgba(0,0,0,0.60) !important; }
body.light-mode .ins-days-sublabel { color: rgba(0,0,0,0.48) !important; }

/* 4. Arc gauges */
body.light-mode .arc-gauge-desc  { color: rgba(0,0,0,0.52) !important; }
body.light-mode .arc-gauge-label { color: rgba(0,0,0,0.75) !important; }
body.light-mode .arc-gauge-pct   { color: rgba(0,0,0,0.88) !important; }

/* 5. Exercise list — step circles */
body.light-mode .bex-step-num {
  background: rgba(0,0,0,0.08) !important;
  border-color: rgba(0,0,0,0.25) !important;
  color: rgba(0,0,0,0.75) !important;
}
body.light-mode .bex-step-line { background: rgba(0,0,0,0.15) !important; }

/* 6. Exercise card stat text */
body.light-mode .bex-pill-meta      { color: rgba(0,0,0,0.58) !important; }
body.light-mode .bex-body-stat      { color: rgba(0,0,0,0.88) !important; }
body.light-mode .bex-body-sec       { color: rgba(0,0,0,0.52) !important; }
body.light-mode .bex-body-prog-label { color: rgba(0,0,0,0.50) !important; }
body.light-mode .bex-pill-name      { color: rgba(0,0,0,0.90) !important; }

/* 7. TODAY'S WORKOUT section label */
body.light-mode .bex-section-label  { color: rgba(0,0,0,0.55) !important; }
body.light-mode .bex-section-count  { color: rgba(0,0,0,0.55) !important; }
body.light-mode .bex-wt-chip        { color: rgba(0,0,0,0.70) !important; border-color: rgba(0,0,0,0.25) !important; }

/* 8. PR row meta "Today · Duration" */
body.light-mode .ins-pr-meta { color: rgba(0,0,0,0.55) !important; }

/* 9. Calendar — day letters, streak */
body.light-mode .day-letter       { color: rgba(0,0,0,0.70) !important; }
body.light-mode .day-number       { color: rgba(0,0,0,0.88) !important; }
body.light-mode .streak-indicator { color: rgba(0,0,0,0.60) !important; }
/* NO STREAK YET */
body.light-mode .week-summary-label,
body.light-mode .streak-label,
body.light-mode [id="streakIndicator"] { color: rgba(0,0,0,0.55) !important; }
/* Streak badge */
.streak-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  padding: 4px 10px 4px 7px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
}
.streak-active {
  color: var(--streak-color, #D9B878) !important;
  background: color-mix(in srgb, var(--streak-color, #D9B878) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--streak-color, #D9B878) 35%, transparent) !important;
}
.streak-zero {
  color: rgba(255,255,255,0.30) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
body.light-mode .streak-active { background: color-mix(in srgb, var(--streak-color,#D9B878) 10%, white) !important; }
body.light-mode .streak-zero   { color: rgba(0,0,0,0.30) !important; background: rgba(0,0,0,0.04) !important; }

/* 10. Calendar legend */
body.light-mode .calendar-legend-item { color: rgba(0,0,0,0.65) !important; }

/* 11. Week nav month text */
body.light-mode .month-text { color: rgba(0,0,0,0.85) !important; }
body.light-mode .month-arrow svg { stroke: rgba(0,0,0,0.55) !important; }

/* 12. Banner card sub-text */
body.light-mode .bnr-eyebrow   { color: rgba(0,0,0,0.45) !important; }
body.light-mode .bnr-subtitle-line { color: rgba(0,0,0,0.55) !important; }
body.light-mode .bnr-sub-dot   { color: rgba(0,0,0,0.6) !important; }

/* 13. Chart axes in canvas (JS-drawn) — handled by isLight checks in drawDaysProgressChart */
/* Force canvas bg transparent in light */
body.light-mode #daysProgressChart { background: transparent !important; }

/* 14. Expand chevron buttons */
body.light-mode .bex-expand-btn svg  { stroke: rgba(0,0,0,0.45) !important; }
body.light-mode .bex-chev            { stroke: rgba(0,0,0,0.45) !important; }

/* 15. Set nav tabs in light */
body.light-mode .bex-set-tab {
  background: rgba(0,0,0,0.06) !important;
  border-color: rgba(0,0,0,0.14) !important;
  color: rgba(0,0,0,0.65) !important;
}
body.light-mode .bex-set-nav-prev svg,
body.light-mode .bex-set-nav-next svg { stroke: rgba(0,0,0,0.45) !important; }

/* 16. PR to beat pill in light */
body.light-mode .bex-pr-target {
  background: rgba(180,130,50,0.08) !important;
  border-color: rgba(180,130,50,0.25) !important;
}
body.light-mode .bex-pr-target-label { color: rgba(130,90,20,0.70) !important; }
body.light-mode .bex-pr-target-val   { color: rgba(110,75,10,0.90) !important; }

/* 17. SUPERSET / tag badge */
body.light-mode .bex-type-tag         { color: rgba(0,0,0,0.55) !important; background: rgba(0,0,0,0.06) !important; }
body.light-mode .bex-type-tag.bex-tag-superset { color: #6B3A9A !important; background: rgba(107,58,154,0.10) !important; }

/* 18. Vstep up/down arrows */
body.light-mode .bex-vstep-up.bex-step svg,
body.light-mode .bex-vstep-down.bex-step svg { stroke: rgba(0,0,0,0.50) !important; }
body.light-mode .bex-vstep-num { color: rgba(0,0,0,0.85) !important; }
body.light-mode .bex-vstep { border-color: rgba(0,0,0,0.12) !important; background: rgba(0,0,0,0.04) !important; }

/* ═══ END CONTRAST FIXES ══════════════════════════════════════ */


/* ── Arc gauge light mode — track visible ── */
body.light-mode .arc-gauge-svg path:first-child {
  stroke: rgba(0,0,0,0.12) !important;
}
body.light-mode .arc-gauge-pct   { color: rgba(0,0,0,0.90) !important; }
body.light-mode .arc-gauge-label { color: rgba(0,0,0,0.78) !important; }
body.light-mode .arc-gauge-desc  { color: rgba(0,0,0,0.55) !important; }

/* ── Rank modal light mode ── */
body.light-mode .stats-graph-modal { background: rgba(240,237,232,0.98) !important; }
body.light-mode .stats-graph-modal-content { background: #f0ede8 !important; }
body.light-mode .stats-graph-modal-header { border-color: rgba(0,0,0,0.08) !important; }
body.light-mode .stats-graph-modal-title  { color: rgba(0,0,0,0.88) !important; }
body.light-mode .stats-graph-modal-title svg { stroke: #8B6500 !important; }
body.light-mode .stats-graph-icon { stroke: #8B6500 !important; }
body.light-mode .stats-overall { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.07) !important; }
body.light-mode .stats-overall-label { color: rgba(0,0,0,0.40) !important; }
body.light-mode .stats-overall-score { color: rgba(0,0,0,0.90) !important; text-shadow: none !important; }
body.light-mode .stats-overall-max   { color: rgba(0,0,0,0.30) !important; }
body.light-mode .stats-breakdown-item { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.07) !important; }
body.light-mode .stats-breakdown-label { color: rgba(0,0,0,0.75) !important; }
body.light-mode .stats-breakdown-value { color: rgba(0,0,0,0.88) !important; }
body.light-mode .stats-breakdown-bar   { background: rgba(0,0,0,0.08) !important; }
body.light-mode .stats-breakdown-ring .ring-bg { stroke: rgba(0,0,0,0.09) !important; }
body.light-mode .stats-breakdown-item.consistency .ring-fill { stroke: #0A8060 !important; }
body.light-mode .stats-breakdown-item.consistency .stats-breakdown-bar-fill { background: #0A8060 !important; }
body.light-mode .stats-breakdown-item.commitment  .ring-fill { stroke: #1A60A0 !important; }
body.light-mode .stats-breakdown-item.commitment  .stats-breakdown-bar-fill { background: #1A60A0 !important; }
body.light-mode .stats-breakdown-item.control     .ring-fill { stroke: #0A7050 !important; }
body.light-mode .stats-breakdown-item.control     .stats-breakdown-bar-fill { background: #0A7050 !important; }
body.light-mode .rank-tier-v { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.07) !important; }
body.light-mode .rank-tier-v.active-rank { background: rgba(180,130,20,0.08) !important; border-color: rgba(180,130,20,0.28) !important; }
body.light-mode .rank-tier-v-name  { color: rgba(0,0,0,0.88) !important; }
body.light-mode .rank-tier-v-range { color: rgba(0,0,0,0.42) !important; }
body.light-mode .rank-tier-v-bar   { background: rgba(0,0,0,0.08) !important; }
body.light-mode .stats-graph-modal-close { color: rgba(0,0,0,0.55) !important; background: rgba(0,0,0,0.07) !important; }
body.light-mode .stats-graph-info-btn svg { stroke: rgba(0,0,0,0.45) !important; }

/* ── Vertical rank tiers ── */
.stats-rank-tiers-v {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0 4px;
  padding: 0;
}

/* ── Premium horizontal rank tier grid ── */
.rank-tier-grid {
  display: flex;
  gap: 10px;
  padding: 4px 0 20px;
}
.rank-tier-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 8px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  position: relative;
  overflow: hidden;
  opacity: 0.40;
  transition: opacity 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s;
  cursor: default;
}
/* Atmospheric glow behind active tier */
.rtc-glow {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.rank-tier-col.active-rank {
  opacity: 1;
  border-color: rgba(217,184,120,0.40);
  background: rgba(217,184,120,0.07);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(217,184,120,0.15) inset;
}
.rank-tier-col.active-rank .rtc-glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(217,184,120,0.22) 0%, transparent 70%);
  opacity: 1;
}
/* Per-rank active colours */
[data-rank="legend"].active-rank { border-color: rgba(200,169,110,0.45); background: rgba(200,169,110,0.09); }
[data-rank="legend"].active-rank .rtc-glow { background: radial-gradient(ellipse at 50% 0%, rgba(200,169,110,0.28) 0%, transparent 70%); }
[data-rank="pro"].active-rank     { border-color: rgba(191,160,138,0.40); background: rgba(191,160,138,0.07); }
[data-rank="advanced"].active-rank{ border-color: rgba(142,153,164,0.38); background: rgba(142,153,164,0.07); }
[data-rank="rookie"].active-rank  { border-color: rgba(107,114,128,0.38); background: rgba(107,114,128,0.06); }

/* Scale up active tier slightly */
.rank-tier-col.active-rank { transform: scale(1.04); }

.rtc-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
  transition: filter 0.3s, transform 0.3s;
  position: relative;
  z-index: 1;
}
.rank-tier-col.active-rank .rtc-icon {
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.55));
  transform: scale(1.08);
}
.rtc-name {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,0.80);
  letter-spacing: 0.3px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.rtc-range {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  text-align: center;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}
.rank-tier-col.active-rank .rtc-name  { color: rgba(255,255,255,0.95); }
.rank-tier-col.active-rank .rtc-range { color: rgba(255,255,255,0.55); }

/* Light mode */
body.light-mode .rank-tier-col { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.07); }
body.light-mode .rank-tier-col.active-rank { background: rgba(180,130,20,0.09); border-color: rgba(180,130,20,0.32); }
body.light-mode .rtc-name  { color: rgba(0,0,0,0.82); }
body.light-mode .rtc-range { color: rgba(0,0,0,0.40); }
body.light-mode .rank-tier-col.active-rank .rtc-name  { color: rgba(0,0,0,0.92); }
body.light-mode .rank-tier-col.active-rank .rtc-range { color: rgba(0,0,0,0.55); }
/* Section divider */
.stats-rank-tiers-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.20);
  padding: 0 2px;
  margin-bottom: 4px;
}
.rank-tier-v {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  opacity: 0.45;
}
.rank-tier-v.active-rank {
  background: rgba(217,184,120,0.08) !important;
  border-color: rgba(217,184,120,0.30) !important;
  opacity: 1 !important;
  box-shadow: 0 4px 20px rgba(217,184,120,0.10) !important;
}
.rank-tier-v-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
  transition: filter 0.3s;
}
.rank-tier-v.active-rank .rank-tier-v-icon {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.rank-tier-v-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rank-tier-v-name {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.2px;
}
.rank-tier-v-range {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
}
.rank-tier-v-bar {
  width: 48px;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.rank-tier-v-fill {
  height: 100%;
  border-radius: 2px;
  opacity: 0.75;
}
/* Light mode vertical tiers */
body.light-mode .rank-tier-v {
  background: rgba(255,255,255,0.70) !important;
  border-color: rgba(0,0,0,0.09) !important;
}
body.light-mode .rank-tier-v.active-rank {
  background: rgba(180,130,50,0.12) !important;
  border-color: rgba(180,130,50,0.30) !important;
}
body.light-mode .rank-tier-v-name  { color: rgba(0,0,0,0.88) !important; }
body.light-mode .rank-tier-v-range { color: rgba(0,0,0,0.45) !important; }
body.light-mode .rank-tier-v-bar   { background: rgba(0,0,0,0.10) !important; }

/* ── Bex card set-type info button ──────────────────────────── */
.bex-info-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(168,148,210,0.45) !important;
  background: rgba(168,148,210,0.12) !important;
  color: #A894D2 !important;
  cursor: pointer !important;
  margin-left: 6px !important;
  padding: 0 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 0.15s !important;
}
.bex-info-btn:active {
  background: rgba(168,148,210,0.28) !important;
}
.bex-info-btn svg {
  width: 11px !important;
  height: 11px !important;
  stroke: #A894D2 !important;
}
body.light-mode .bex-info-btn {
  border-color: rgba(107,58,154,0.35) !important;
  background: rgba(107,58,154,0.08) !important;
  color: #6B3A9A !important;
}
body.light-mode .bex-info-btn svg { stroke: #6B3A9A !important; }

/* ── Info modal: active set type in purple (current workout's type) ── */
.info-item.active-set-type {
  border-color: rgba(168,148,210,0.40) !important;
  background: rgba(168,148,210,0.07) !important;
}
.info-item.active-set-type .info-item-title {
  color: #A894D2 !important;
}
.info-item.active-set-type .info-item-tag {
  background: rgba(168,148,210,0.18) !important;
  color: #A894D2 !important;
  border-color: rgba(168,148,210,0.35) !important;
}
body.light-mode .info-item.active-set-type {
  border-color: rgba(107,58,154,0.30) !important;
  background: rgba(107,58,154,0.05) !important;
}
body.light-mode .info-item.active-set-type .info-item-title { color: #6B3A9A !important; }
body.light-mode .info-item.active-set-type .info-item-tag { color: #6B3A9A !important; background: rgba(107,58,154,0.10) !important; }

/* ═══════════════════════════════════════════════════════════════
   VSTEP BUTTON FINAL OVERRIDE — must be last rule in stylesheet
   Overrides all other !important rules for vstep button backgrounds
   ═══════════════════════════════════════════════════════════════ */
/* VSTEP BUTTONS: slightly tinted so they're distinct from the number zone */
.bex-vstep .bex-vstep-up,
.bex-vstep .bex-vstep-down {
  background: rgba(255,255,255,0.10) !important;  /* button tint — brighter than number zone */
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Other .bex-step elements inside vstep stay transparent */
.bex-vstep .bex-step-plus:not(.bex-vstep-up),
.bex-vstep .bex-step-minus:not(.bex-vstep-down),
.bex-vstep button:not(.bex-vstep-up):not(.bex-vstep-down) {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.bex-vstep .bex-vstep-up   { width: 100% !important; border: none !important; border-bottom: 1.5px solid rgba(255,255,255,0.10) !important; }
.bex-vstep .bex-vstep-down { width: 100% !important; border: none !important; border-top:    1.5px solid rgba(255,255,255,0.10) !important; }
.bex-vstep .bex-vstep-up:active,
.bex-vstep .bex-vstep-down:active { background: rgba(255,255,255,0.13) !important; transform: none !important; }

body.light-mode .bex-vstep .bex-vstep-up   { background: rgba(0,0,0,0.05) !important; border-bottom-color: rgba(0,0,0,0.10) !important; }
body.light-mode .bex-vstep .bex-vstep-down { background: rgba(0,0,0,0.05) !important; border-top-color:    rgba(0,0,0,0.10) !important; }
body.light-mode .bex-vstep .bex-vstep-up:active,
body.light-mode .bex-vstep .bex-vstep-down:active { background: rgba(0,0,0,0.09) !important; }


/* Volume delta indicator */
.bex-vol-delta { display:block; width:100%; text-align:center; font-size:10px; font-weight:700; letter-spacing:0.3px; padding:3px 8px; border-radius:6px; margin-top:4px; }
.bex-vol-delta.up   { color:#34D399; background:rgba(52,211,153,0.10); }
.bex-vol-delta.down { color:rgba(255,100,100,0.80); background:rgba(255,100,100,0.08); }
.bex-vol-delta.same { color:rgba(255,255,255,0.30); background:rgba(255,255,255,0.04); }
/* Between-set rest overlay */
.bex-rest-overlay { position:absolute!important; inset:0!important; z-index:50!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:4px!important; background:rgba(10,10,18,0.94)!important; backdrop-filter:blur(6px)!important; border-radius:16px!important; animation:restIn 0.25s cubic-bezier(0.34,1.4,0.64,1) both!important; }
@keyframes restIn { from{opacity:0;transform:scale(0.94)} to{opacity:1;transform:scale(1)} }
.bex-rest-label { font-size:10px!important; font-weight:900!important; letter-spacing:3px!important; color:rgba(255,255,255,0.35)!important; text-transform:uppercase!important; }
.bex-rest-ring-wrap { position:relative!important; width:80px!important; height:80px!important; }
.bex-rest-ring-svg { width:80px!important; height:80px!important; }
.bex-rest-ring-bg  { fill:none!important; stroke:rgba(255,255,255,0.08)!important; stroke-width:4!important; }
.bex-rest-ring-fill{ fill:none!important; stroke:#34D399!important; stroke-width:4!important; stroke-linecap:round!important; }
.bex-rest-time { position:absolute!important; inset:0!important; display:flex!important; align-items:center!important; justify-content:center!important; font-size:28px!important; font-weight:900!important; color:rgba(255,255,255,0.92)!important; font-variant-numeric:tabular-nums!important; }
.bex-rest-sub { font-size:10px!important; color:rgba(255,255,255,0.28)!important; font-weight:600!important; }
.bex-rest-actions { display:flex!important; gap:6px!important; margin-top:4px!important; }
.bex-rest-skip,.bex-rest-add { border:1px solid rgba(255,255,255,0.14)!important; background:rgba(255,255,255,0.07)!important; color:rgba(255,255,255,0.65)!important; font-size:11px!important; font-weight:700!important; padding:5px 12px!important; border-radius:20px!important; cursor:pointer!important; -webkit-tap-highlight-color:transparent!important; }
.bex-rest-add { color:#34D399!important; border-color:rgba(52,211,153,0.25)!important; background:rgba(52,211,153,0.07)!important; }
.bex-stepper-area { position:relative!important; }

/* Superset tag + sub-names in collapsed card */
.bex-pill-tag {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(162,100,190,0.80) !important;
  margin-bottom: 1px !important;
}
.bex-pill-sub {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  word-break: break-word !important;
  margin-top: 1px !important;
}
body.light-mode .bex-pill-sub { color: rgba(0,0,0,0.45) !important; }
/* Live timer on its own line */
.bex-pill-live-timer {
  margin-top: 2px !important;
  display: none !important;
}
.bex-pill-live-timer.active {
  display: inline-block !important;
}
body.light-mode .bex-pill-tag { color: rgba(120,60,160,0.85) !important; }
body.light-mode .bex-pill-sub { color: rgba(0,0,0,0.60) !important; }

/* ── Definitive light mode card text colours ── */
body.light-mode .bex-pill-name,
body.light-mode .bex-pill-sub {
  color: rgba(0,0,0,0.85) !important;
}
body.light-mode .bex-pill-meta {
  color: rgba(0,0,0,0.45) !important;
}
body.light-mode .bex-pill-tag {
  color: rgba(120,60,160,0.85) !important;
}
body.light-mode .bex-card-hdr {
  background: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════
   PREMIUM GOLD THEME — brushed metal surfaces
   ══════════════════════════════════════════════════════════════ */

/* Page background — Round 172: pure flat #000 in dark mode (was warm #0A0906) */
.app-container {
  background: transparent !important;
}

/* Header — Round 172: flat #000, no warm gradient */
header {
  background: #000 !important;
  border-bottom: 0 !important;
}
header::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,168,76,0.35) 50%,
    transparent 100%) !important;
}

/* Exercise cards — warm dark with gold left accent */
.banner-ex-card {
  background: linear-gradient(135deg,
    rgba(26,20,12,0.97) 0%,
    rgba(20,16,9,0.97) 100%) !important;
  border: 1px solid rgba(201,168,76,0.12) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.5),
              inset 0 1px 0 rgba(201,168,76,0.06) !important;
}
.banner-ex-card {
  overflow: hidden !important;  /* clip to border-radius */
}
.banner-ex-card.bex-wt-free {
  border-left: 3px solid rgba(201,168,76,0.70) !important;
}
.banner-ex-card.bex-wt-cable {
  border-left: 3px solid rgba(126,181,226,0.70) !important;
}

/* Workout banner card — Round 168: flat, no warm gradient */
.bnr-card {
  background: transparent !important;
  box-shadow: none !important;
}
/* Round 168: was radial-gradient gold-to-brown for free / blue-to-brown for cable.
   User wants flat black on muscle-memory dark mode. Both flattened to transparent. */
body.free-week .bnr-card,
.bnr-card.bex-wt-free {
  background: transparent !important;
}
body.cable-week .bnr-card,
.bnr-card.bex-wt-cable {
  background: transparent !important;
}

/* Insight cards */
.ins-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Stepper area — slightly lifted gold tint */
.bex-stepper-area {
  background: rgba(201,168,76,0.025) !important;
  border-top: 1px solid rgba(201,168,76,0.10) !important;
}

/* vstep container */
.bex-vstep {
  background: rgba(201,168,76,0.04) !important;
  border: 1.5px solid rgba(201,168,76,0.12) !important;
}

/* vstep up/down arrow buttons */
.bex-vstep .bex-vstep-up,
.bex-vstep .bex-vstep-down {
  background: rgba(201,168,76,0.07) !important;
}
.bex-vstep .bex-vstep-up:active,
.bex-vstep .bex-vstep-down:active {
  background: rgba(201,168,76,0.16) !important;
}
/* divider lines between buttons and value */
.bex-vstep .bex-vstep-up   { border-bottom: 1.5px solid rgba(201,168,76,0.14) !important; }
.bex-vstep .bex-vstep-down { border-top:    1.5px solid rgba(201,168,76,0.14) !important; }

/* Number zone — dark recessed inset */
.bex-vstep-num {
  background: rgba(0,0,0,0.28) !important;
  color: rgba(240,228,196,0.95) !important;
}

/* Set tab active — gold */
.bex-set-tab.active {
  background: rgba(201,168,76,0.16) !important;
  border-color: rgba(201,168,76,0.55) !important;
  color: #E2C46E !important;
  box-shadow: 0 2px 12px rgba(201,168,76,0.12),
              inset 0 1px 0 rgba(201,168,76,0.18) !important;
}

/* Set nav arrows */
.bex-set-nav-arrow {
  background: rgba(201,168,76,0.06) !important;
  border-color: rgba(201,168,76,0.14) !important;
  color: rgba(240,228,196,0.60) !important;
}

/* NEXT SET CTA button */
.bex-set-done-btn {
  border-color: rgba(201,168,76,0.16) !important;
  background: rgba(201,168,76,0.05) !important;
  color: rgba(226,196,110,0.55) !important;
}
.bex-set-done-btn.flash-ready {
  border-color: rgba(201,168,76,0.70) !important;
  background: rgba(201,168,76,0.13) !important;
  color: #E2C46E !important;
}

/* PR target bar */
.bex-pr-target {
  background: rgba(201,168,76,0.08) !important;
  border-color: rgba(201,168,76,0.22) !important;
}

/* Rank modal hero card */
.stats-overall {
  background: linear-gradient(160deg,
    rgba(28,21,10,0.98) 0%,
    rgba(18,14,6,0.98) 100%) !important;
  border: 1px solid rgba(201,168,76,0.18) !important;
}

/* Rank tier active column */
.rank-tier-col.active-rank {
  border-color: rgba(201,168,76,0.45) !important;
  background: rgba(201,168,76,0.09) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3),
              inset 0 1px 0 rgba(201,168,76,0.15) !important;
}

/* Duration popup */
.duration-popup {
  background: linear-gradient(180deg,
    rgba(20,16,8,0.99) 0%,
    rgba(14,11,5,0.99) 100%) !important;
  border: 1px solid rgba(201,168,76,0.16) !important;
}

/* Modals */
.stats-graph-modal-content {
  background: linear-gradient(160deg,
    rgba(22,17,9,0.99) 0%,
    rgba(14,11,5,0.99) 100%) !important;
  border: 1px solid rgba(201,168,76,0.14) !important;
}

/* Bottom dock */
.dock-bar,
.bottom-nav-pill,
.floating-nav-pill {
  background: linear-gradient(180deg,
    rgba(18,14,8,0.97) 0%,
    rgba(12,10,5,0.97) 100%) !important;
  border: 1px solid rgba(201,168,76,0.18) !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.5),
              inset 0 1px 0 rgba(201,168,76,0.08) !important;
}

/* Workout status bar */
.workout-status-bar {
  background: rgba(12,9,4,0.92) !important;
  box-shadow: 0 1px 0 rgba(201,168,76,0.10) !important;
  /* bottom accent line uses week color by default */
}
/* Free weights — orange accent line */
.workout-status-bar::after {
  background: linear-gradient(90deg,
    transparent 0%, rgba(232,146,74,0) 15%,
    rgba(232,146,74,0.45) 50%,
    rgba(232,146,74,0) 85%, transparent 100%) !important;
}
/* Cable week — blue accent line */
body.cable-week .workout-status-bar::after {
  background: linear-gradient(90deg,
    transparent 0%, rgba(126,181,226,0) 15%,
    rgba(126,181,226,0.45) 50%,
    rgba(126,181,226,0) 85%, transparent 100%) !important;
}

/* Text improvements — warmer whites */
.bex-pill-name,
.bex-body-stat,
.bnr-title {
  color: rgba(240,228,196,0.95) !important;
}
.bex-pill-meta,
.bex-body-prog-label {
  color: rgba(201,168,76,0.50) !important;
}

/* ══ END PREMIUM GOLD THEME ══════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   COLLAPSED EXERCISE CARD — simple & clean
   ═══════════════════════════════════════════════════════════════ */
.bex-card-hdr {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  padding: 12px 48px 12px 14px !important; /* right: space for expand btn */
  min-height: 62px !important;
  position: relative !important;
  overflow: visible !important;
}
.bex-card-title-col {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.bex-pill-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: rgba(240,228,196,0.95) !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  word-break: break-word !important;
}
.bex-pill-meta {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(201,168,76,0.55) !important;
  line-height: 1 !important;
}
.bex-pill-live-timer {
  display: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #34D399 !important;
  font-variant-numeric: tabular-nums !important;
}
.bex-pill-live-timer::before { content: "▶ "; font-size: 8px; }
.bex-pill-live-timer.active  { display: block !important; }

/* Expand chevron — absolute top-right, always accessible */
.bex-expand-btn {
  position: absolute !important;
  top: 12px !important;
  right: 10px !important;
  transform: none !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}
.bex-expand-btn .bex-chev {
  width: 15px !important;
  height: 15px !important;
  stroke: rgba(255,255,255,0.50) !important;
  transition: transform 0.25s ease !important;
}
.bex-inline-open .bex-expand-btn .bex-chev { transform: rotate(90deg) !important; }
body.light-mode .bex-expand-btn { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.09) !important; }
body.light-mode .bex-pill-name  { color: rgba(0,0,0,0.88) !important; }
body.light-mode .bex-pill-meta  { color: rgba(0,0,0,0.42) !important; }

/* ═══════════════════════════════════════════════════════════════
   SET COUNTER — "SET 1 OF 3" with dots
   ═══════════════════════════════════════════════════════════════ */
.bex-set-counter-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 2px 0 10px !important;
}
.bex-set-counter-center {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}
.bex-set-counter-top {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  white-space: nowrap !important;
}
.bex-set-counter-type {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(240,228,196,0.35) !important;
}
.bex-set-counter-label {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  color: rgba(240,228,196,0.75) !important;
  white-space: nowrap !important;
}
.bex-set-counter-num {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: rgba(240,228,196,0.95) !important;
  line-height: 1 !important;
}
/* Set progress dots */
.bex-set-dots-row {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}
.bex-set-dot-mini {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.15s !important;
  flex-shrink: 0 !important;
}
.bex-set-dot-mini.done {
  background: #34D399 !important;
  border-color: rgba(52,211,153,0.60) !important;
  box-shadow: 0 0 6px rgba(52,211,153,0.35) !important;
}
.bex-set-dot-mini:active { transform: scale(0.80) !important; }

/* Compact timer */
.bex-ex-timer-compact {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}
.bex-ex-timer-compact .bex-timer-icon { width: 12px !important; height: 12px !important; display: none !important; }
.bex-ex-timer-compact .bex-ex-timer-val { font-size: 13px !important; min-width: 34px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; }
.bex-ex-timer-compact .bex-timer-btn { width: 32px !important; height: 32px !important; }
.bex-ex-timer-compact .bex-timer-reset { display: none !important; }

/* Light mode */
body.light-mode .bex-set-counter-label { color: rgba(0,0,0,0.40) !important; }
body.light-mode .bex-set-counter-num   { color: rgba(0,0,0,0.80) !important; }
body.light-mode .bex-set-dot-mini      { background: rgba(0,0,0,0.10) !important; border-color: rgba(0,0,0,0.15) !important; }

/* Superset count badge on collapsed card */
.bex-ss-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  color: rgba(162,100,190,0.90) !important;
  background: rgba(162,100,190,0.12) !important;
  border: 1px solid rgba(162,100,190,0.22) !important;
  border-radius: 20px !important;
  padding: 1px 6px !important;
  vertical-align: middle !important;
  margin-left: 4px !important;
}
body.light-mode .bex-ss-badge { color: rgba(120,60,160,0.85) !important; background: rgba(120,60,160,0.10) !important; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  EXERCISE CARD — CANONICAL LAYOUT (wins all conflicts)       ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Card shell ──────────────────────────────────────────────── */
.banner-ex-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(26,20,12,0.97) 0%, rgba(20,16,9,0.97) 100%) !important;
  border: 1px solid rgba(201,168,76,0.12) !important;
}
.banner-ex-card.bex-wt-free  { border-left: 3px solid rgba(201,168,76,0.70) !important; }
.banner-ex-card.bex-wt-cable { border-left: 3px solid rgba(126,181,226,0.70) !important; }

/* ── Collapsed header ────────────────────────────────────────── */
.bex-card-hdr {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  /* Right padding = expand btn width(30) + right offset(10) + gap(6) = 46px */
  padding: 12px 46px 12px 12px !important;
  position: relative !important;
  overflow: visible !important;
  min-height: 60px !important;
}
.bex-card-title-col {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
/* Exercise name — wraps at word boundaries only, never mid-word */
.bex-pill-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: rgba(240,228,196,0.95) !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: none !important;
  display: block !important;
}
/* Stat line: "2 × 12 reps" */
.bex-pill-meta {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: rgba(201,168,76,0.55) !important;
  white-space: nowrap !important;
  display: block !important;
}
/* Live timer — only shows when running */
.bex-pill-live-timer {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #34D399 !important;
  font-variant-numeric: tabular-nums !important;
  display: none !important;
  line-height: 1 !important;
}
.bex-pill-live-timer.active { display: block !important; }
.bex-pill-live-timer::before { content: "▶ "; font-size: 8px; opacity: 0.8; }
/* Expand button — absolute, never overlaps text */
.bex-expand-btn {
  position: absolute !important;
  top: 12px !important;
  right: 10px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
  transform: none !important;
}
.bex-expand-btn .bex-chev {
  width: 14px !important;
  height: 14px !important;
  stroke: rgba(255,255,255,0.55) !important;
  transition: transform 0.2s ease !important;
}
.bex-inline-open .bex-expand-btn .bex-chev { transform: rotate(90deg) !important; }
/* Superset badge */
.bex-ss-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: rgba(162,100,190,0.90) !important;
  background: rgba(162,100,190,0.12) !important;
  border: 1px solid rgba(162,100,190,0.22) !important;
  border-radius: 20px !important;
  padding: 0px 6px !important;
  vertical-align: middle !important;
  margin-left: 3px !important;
  white-space: nowrap !important;
}

/* ── Expanded info strip (below header) ─────────────────────── */
.bex-card-body {
  display: none !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 10px 12px 0 12px !important;
  border-top: 1px solid rgba(201,168,76,0.08) !important;
}
.bex-inline-open .bex-card-body { display: flex !important; }
.bex-body-info-strip {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}
.bex-body-progress-pill {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.bex-body-prog-bar {
  flex: 1 !important;
  height: 3px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.08) !important;
  overflow: hidden !important;
}
.bex-body-prog-fill {
  height: 100% !important;
  background: #C9A84C !important;
  border-radius: 2px !important;
  transition: width 0.4s ease !important;
}
.bex-body-prog-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(201,168,76,0.55) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.bex-body-type-btn {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: rgba(162,100,190,0.80) !important;
  background: rgba(162,100,190,0.08) !important;
  border: 1px solid rgba(162,100,190,0.18) !important;
  border-radius: 20px !important;
  padding: 3px 8px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.bex-body-sec-chip {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.28) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.bex-body-pr {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.35) !important;
  padding-bottom: 4px !important;
}
.bex-body-pr.is-new-pr {
  color: #C9A84C !important;
  font-weight: 800 !important;
}

/* ── Light mode overrides ────────────────────────────────────── */
body.light-mode .bex-pill-name  { color: rgba(0,0,0,0.88) !important; }
body.light-mode .bex-pill-meta  { color: rgba(0,0,0,0.42) !important; }
body.light-mode .bex-expand-btn { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.09) !important; }
body.light-mode .bex-expand-btn .bex-chev { stroke: rgba(0,0,0,0.45) !important; }
body.light-mode .bex-body-prog-bar  { background: rgba(0,0,0,0.10) !important; }
body.light-mode .bex-body-prog-label { color: rgba(0,0,0,0.6) !important; }
body.light-mode .bex-card-body  { border-top-color: rgba(0,0,0,0.07) !important; }

/* ── Stepper area (expanded inputs) ────────────────────────────*/
.bex-stepper-area {
  padding: 8px 12px 16px !important;
  background: rgba(201,168,76,0.015) !important;
}
/* Set counter row */
.bex-set-counter-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 0 10px 0 !important;
}
.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: 5px !important;
  white-space: nowrap !important;
}
.bex-set-counter-type {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(240,228,196,0.35) !important;
}
.bex-set-counter-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(240,228,196,0.65) !important;
  white-space: nowrap !important;
}
.bex-set-counter-num {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: rgba(240,228,196,0.95) !important;
  line-height: 1 !important;
}
.bex-set-dots-row {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}
.bex-set-dot-mini {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 0.2s !important;
}
.bex-set-dot-mini.done {
  background: #34D399 !important;
  border-color: rgba(52,211,153,0.50) !important;
}
/* Nav arrows */
.bex-set-nav-arrow {
  flex-shrink: 0 !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;
  color: rgba(255,255,255,0.55) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}
.bex-set-nav-arrow svg { width: 16px !important; height: 16px !important; }
.bex-set-nav-arrow:active { opacity: 0.7 !important; }
.bex-set-nav-arrow.disabled { opacity: 0.20 !important; pointer-events: none !important; }
/* Compact timer inline */
.bex-ex-timer-compact {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
.bex-ex-timer-compact .bex-ex-timer-val {
  font-size: 13px !important;
  font-weight: 700 !important;
  min-width: 34px !important;
  font-variant-numeric: tabular-nums !important;
  color: rgba(240,228,196,0.60) !important;
}
.bex-ex-timer-compact .bex-timer-btn {
  width: 32px !important;
  height: 32px !important;
}
.bex-ex-timer.is-running .bex-ex-timer-val,
.bex-ex-timer.is-running .bex-timer-icon { color: #34D399 !important; }
.bex-ex-timer.is-live .bex-ex-timer-val,
.bex-ex-timer.is-live .bex-timer-icon { color: #C9A84C !important; }
/* Superset exercise rows */
.bex-set-ex-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 10px 0 5px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}
.bex-set-ex-row:first-of-type {
  margin-top: 4px !important;
  padding-top: 0 !important;
  border-top: none !important;
}
.bex-set-ex-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(240,228,196,0.85) !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.bex-set-letter {
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
  background: rgba(162,100,190,0.15) !important;
  border: 1px solid rgba(162,100,190,0.25) !important;
  color: rgba(162,100,190,0.90) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
/* Input group label */
.bex-input-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  color: rgba(240,228,196,0.38) !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
  display: block !important;
}
/* Set inputs row */
.bex-set-inputs {
  display: flex !important;
  width: 100% !important;
  gap: 8px !important;
  align-items: flex-start !important;
  padding: 2px 0 0 !important;
  box-sizing: border-box !important;
}
.bex-input-group {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.bex-input-x {
  flex-shrink: 0 !important;
  align-self: center !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.22) !important;
  width: 14px !important;
  text-align: center !important;
  padding-top: 20px !important; /* align with vstep center, accounting for label */
}
/* vstep container */
.bex-vstep {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(201,168,76,0.12) !important;
  background: rgba(201,168,76,0.04) !important;
  box-sizing: border-box !important;
}
/* vstep buttons — 36px tap targets */
.bex-vstep-up.bex-step,
.bex-vstep-down.bex-step {
  width: 100% !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(201,168,76,0.07) !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}
.bex-vstep-up.bex-step { border-bottom: 1px solid rgba(201,168,76,0.12) !important; }
.bex-vstep-down.bex-step { border-top: 1px solid rgba(201,168,76,0.12) !important; }
.bex-vstep-up.bex-step:active,
.bex-vstep-down.bex-step:active { background: rgba(201,168,76,0.16) !important; }
.bex-vstep-up.bex-step svg,
.bex-vstep-down.bex-step svg {
  width: 18px !important;
  height: 18px !important;
  stroke: rgba(255,255,255,0.50) !important;
}
/* vstep number */
.bex-vstep-num {
  width: 100% !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  color: rgba(240,228,196,0.95) !important;
  font-variant-numeric: tabular-nums !important;
  background: rgba(0,0,0,0.22) !important;
  cursor: pointer !important;
  user-select: none !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}
.bex-vstep-num.zero-val { color: rgba(255,255,255,0.18) !important; }
.bex-vstep-num.len-3    { font-size: 26px !important; }
.bex-vstep-num.len-4    { font-size: 22px !important; }
.bex-vstep-num.len-5    { font-size: 18px !important; }
/* NEXT SET button */
.bex-set-done-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 48px !important;
  margin-top: 14px !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(201,168,76,0.14) !important;
  background: rgba(201,168,76,0.05) !important;
  color: rgba(226,196,110,0.50) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  -webkit-tap-highlight-color: transparent !important;
}
.bex-set-done-btn:active { opacity: 0.8 !important; transform: scale(0.98) !important; }
.bex-set-done-btn.flash-ready {
  border-color: rgba(201,168,76,0.65) !important;
  background: rgba(201,168,76,0.12) !important;
  color: #E2C46E !important;
}
/* PR target bar */
.bex-pr-target {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  margin: 6px 0 2px !important;
  background: rgba(201,168,76,0.07) !important;
  border: 1px solid rgba(201,168,76,0.18) !important;
  border-radius: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.bex-pr-target-label {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px !important;
  color: rgba(201,168,76,0.60) !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
}
.bex-pr-target-val {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: rgba(201,168,76,0.88) !important;
}

/* ══ END CANONICAL CARD LAYOUT ══════════════════════════════════ */

/* ── Timer row — own line below set counter ─────────────────── */
.bex-ex-timer-compact {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 4px 0 6px !important;
  flex-shrink: 0 !important;
  width: 100% !important;
}
.bex-ex-timer-compact .bex-timer-icon {
  stroke: rgba(255,255,255,0.30) !important;
  flex-shrink: 0 !important;
}
.bex-ex-timer-compact .bex-ex-timer-val {
  font-size: 14px !important;
  font-weight: 800 !important;
  min-width: 42px !important;
  font-variant-numeric: tabular-nums !important;
  color: rgba(240,228,196,0.45) !important;
  text-align: center !important;
}
.bex-ex-timer.is-live .bex-ex-timer-val   { color: #C9A84C !important; }
.bex-ex-timer.is-running .bex-ex-timer-val { color: #34D399 !important; }
.bex-ex-timer-compact .bex-timer-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  flex-shrink: 0 !important;
}
.bex-ex-timer.is-running .bex-timer-btn.bex-timer-play {
  border-color: rgba(52,211,153,0.40) !important;
  background: rgba(52,211,153,0.12) !important;
  color: #34D399 !important;
}
.bex-ex-timer.is-live:not(.is-running) .bex-timer-btn.bex-timer-play {
  border-color: rgba(201,168,76,0.45) !important;
  background: rgba(201,168,76,0.10) !important;
  color: #C9A84C !important;
}
.bex-ex-timer-compact .bex-tplay  { width: 12px !important; height: 12px !important; }
.bex-ex-timer-compact .bex-tpause { width: 12px !important; height: 12px !important; }

/* ── LIGHT MODE — full override for all card elements ─────────── */
body.light-mode .banner-ex-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.08) !important;
}
body.light-mode .banner-ex-card.bex-wt-free  { border-left-color: rgba(160,110,20,0.70) !important; }
body.light-mode .banner-ex-card.bex-wt-cable { border-left-color: rgba(60,120,180,0.70) !important; }
body.light-mode .bex-pill-name   { color: rgba(0,0,0,0.88) !important; }
body.light-mode .bex-pill-meta   { color: rgba(0,0,0,0.45) !important; }
body.light-mode .bex-pill-live-timer { color: #16a34a !important; }
body.light-mode .bex-expand-btn  { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.09) !important; }
body.light-mode .bex-expand-btn .bex-chev { stroke: rgba(0,0,0,0.40) !important; }
body.light-mode .bex-ss-badge    { color: rgba(100,40,140,0.85) !important; background: rgba(100,40,140,0.10) !important; border-color: rgba(100,40,140,0.20) !important; }
body.light-mode .bex-card-body   { border-top-color: rgba(0,0,0,0.07) !important; }
body.light-mode .bex-body-prog-bar  { background: rgba(0,0,0,0.08) !important; }
body.light-mode .bex-body-prog-fill { background: #8B6914 !important; }
body.light-mode .bex-body-prog-label { color: rgba(0,0,0,0.38) !important; }
body.light-mode .bex-body-type-btn   { color: rgba(100,40,140,0.80) !important; background: rgba(100,40,140,0.07) !important; border-color: rgba(100,40,140,0.16) !important; }
body.light-mode .bex-body-sec-chip   { color: rgba(0,0,0,0.38) !important; }
body.light-mode .bex-stepper-area    { background: rgba(0,0,0,0.018) !important; }
body.light-mode .bex-set-counter-type  { color: rgba(0,0,0,0.28) !important; }
body.light-mode .bex-set-counter-label { color: rgba(0,0,0,0.55) !important; }
body.light-mode .bex-set-counter-num   { color: rgba(0,0,0,0.88) !important; }
body.light-mode .bex-set-dot-mini      { background: rgba(0,0,0,0.08) !important; border-color: rgba(0,0,0,0.14) !important; }
body.light-mode .bex-set-dot-mini.done { background: #16a34a !important; border-color: rgba(22,163,74,0.50) !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; color: rgba(0,0,0,0.50) !important; }
body.light-mode .bex-ex-timer-compact .bex-ex-timer-val { color: rgba(0,0,0,0.6) !important; }
body.light-mode .bex-ex-timer.is-live .bex-ex-timer-val   { color: #8B6914 !important; }
body.light-mode .bex-ex-timer.is-running .bex-ex-timer-val { color: #16a34a !important; }
body.light-mode .bex-ex-timer-compact .bex-timer-btn { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.10) !important; }
body.light-mode .bex-vstep            { border-color: rgba(0,0,0,0.12) !important; background: rgba(0,0,0,0.03) !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; }
body.light-mode .bex-vstep-up.bex-step   { border-bottom-color: rgba(0,0,0,0.08) !important; }
body.light-mode .bex-vstep-down.bex-step { border-top-color: rgba(0,0,0,0.08) !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.40) !important; }
body.light-mode .bex-vstep-num        { background: rgba(0,0,0,0.05) !important; color: rgba(0,0,0,0.88) !important; }
body.light-mode .bex-vstep-num.zero-val { color: rgba(0,0,0,0.18) !important; }
body.light-mode .bex-input-label      { color: rgba(0,0,0,0.38) !important; }
body.light-mode .bex-input-x          { color: rgba(0,0,0,0.22) !important; }
body.light-mode .bex-set-ex-row       { border-top-color: rgba(0,0,0,0.07) !important; }
body.light-mode .bex-set-ex-name      { color: rgba(0,0,0,0.85) !important; }
body.light-mode .bex-set-letter       { background: rgba(100,40,140,0.10) !important; border-color: rgba(100,40,140,0.18) !important; color: rgba(100,40,140,0.80) !important; }
body.light-mode .bex-set-done-btn     { border-color: rgba(0,0,0,0.12) !important; background: rgba(0,0,0,0.03) !important; color: rgba(0,0,0,0.40) !important; }
body.light-mode .bex-set-done-btn.flash-ready { border-color: rgba(130,90,10,0.60) !important; background: rgba(130,90,10,0.08) !important; color: rgba(100,70,0,0.85) !important; }
body.light-mode .bex-pr-target        { background: rgba(130,90,10,0.06) !important; border-color: rgba(130,90,10,0.16) !important; }
body.light-mode .bex-pr-target-label  { color: rgba(130,90,10,0.55) !important; }
body.light-mode .bex-pr-target-val    { color: rgba(100,70,0,0.80) !important; }
/* ══ END LIGHT MODE + TIMER ROW ═══════════════════════════════════ */

/* ── Collapsed superset card ─────────────────────────────────── */
.bex-pill-ss-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 3px !important;
}
.bex-pill-ss-tag {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: rgba(162,100,190,0.85) !important;
  background: rgba(162,100,190,0.12) !important;
  border: 1px solid rgba(162,100,190,0.22) !important;
  border-radius: 20px !important;
  padding: 2px 8px !important;
  line-height: 1.4 !important;
}
.bex-pill-ss-info {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}
.bex-pill-ss-info svg {
  width: 14px !important;
  height: 14px !important;
  stroke: rgba(162,100,190,0.60) !important;
}
.bex-pill-ss-name {
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: rgba(240,228,196,0.88) !important;
  margin-bottom: 1px !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: none !important;
}
.bex-pill-ss-name:last-of-type { margin-bottom: 0 !important; }
body.light-mode .bex-pill-ss-tag   { color: rgba(100,40,140,0.85) !important; background: rgba(100,40,140,0.09) !important; border-color: rgba(100,40,140,0.18) !important; }
body.light-mode .bex-pill-ss-info svg { stroke: rgba(100,40,140,0.50) !important; }
body.light-mode .bex-pill-ss-name  { color: rgba(0,0,0,0.82) !important; }
/* ══ END SUPERSET COLLAPSED CARD ══════════════════════════════════ */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  EXERCISE CARD ADDITIONS — progress, icons, hero, arrow flash   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── Collapsed: set progress dots ─────────────────────────────── */
.bex-coll-prog-dots {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  margin-top: 5px !important;
}
.bex-coll-prog-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  flex-shrink: 0 !important;
  transition: background 0.2s !important;
}
.bex-coll-prog-dot.done {
  background: #34D399 !important;
  border-color: rgba(52,211,153,0.50) !important;
}
body.light-mode .bex-coll-prog-dot        { background: rgba(0,0,0,0.10) !important; border-color: rgba(0,0,0,0.15) !important; }
body.light-mode .bex-coll-prog-dot.done   { background: #16a34a !important; border-color: rgba(22,163,74,0.40) !important; }

/* ── Collapsed: muscle group icon ─────────────────────────────── */
.bex-coll-muscle-icon {
  position: absolute !important;
  bottom: 8px !important;
  right: 46px !important;   /* left of expand btn */
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  opacity: 0.18 !important;
  pointer-events: none !important;
  /* Invert for light mode handled below */
}
body.light-mode .bex-coll-muscle-icon { filter: invert(1) !important; opacity: 0.12 !important; }

/* ── Expanded: hero thumbnail ──────────────────────────────────── */
.bex-body-hero {
  width: 100% !important;
  height: 90px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  cursor: pointer !important;
  margin-bottom: 10px !important;
  flex-shrink: 0 !important;
  background: rgba(0,0,0,0.20) !important;
}
.bex-body-hero-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 25% !important;
  display: block !important;
  opacity: 0.80 !important;
}
.bex-body-hero-muscle {
  position: absolute !important;
  bottom: 6px !important;
  right: 8px !important;
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  opacity: 0.55 !important;
  filter: brightness(2) !important;
  pointer-events: none !important;
}
.bex-body-hero-play {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.25) !important;
}
.bex-body-hero-play svg {
  width: 28px !important;
  height: 28px !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)) !important;
}
.bex-body-hero-hint {
  position: absolute !important;
  bottom: 6px !important;
  left: 8px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  color: rgba(255,255,255,0.45) !important;
}
body.light-mode .bex-body-hero          { background: rgba(0,0,0,0.06) !important; }
body.light-mode .bex-body-hero-img      { opacity: 0.75 !important; }
body.light-mode .bex-body-hero-muscle   { filter: none !important; opacity: 0.40 !important; }

/* ── Expanded: active set dot indicator ───────────────────────── */
.bex-set-dot-mini.active {
  border-color: rgba(201,168,76,0.80) !important;
  border-width: 2px !important;
  transform: scale(1.3) !important;
}
.bex-set-dot-mini.done.active {
  box-shadow: 0 0 0 2px rgba(52,211,153,0.40) !important;
  transform: scale(1.3) !important;
}
body.light-mode .bex-set-dot-mini.active { border-color: rgba(130,90,10,0.70) !important; }

/* ── Expanded: right arrow flash instead of NEXT SET btn ─────── */
@keyframes bexArrowPulse {
  0%,100% { opacity: 1; transform: scale(1); background: rgba(201,168,76,0.14); border-color: rgba(201,168,76,0.55); color: #E2C46E; }
  50%      { opacity: 0.5; transform: scale(0.92); background: rgba(201,168,76,0.05); border-color: rgba(201,168,76,0.20); color: rgba(201,168,76,0.50); }
}
.bex-set-nav-next.bex-arrow-flash {
  animation: bexArrowPulse 0.7s ease-in-out infinite !important;
}
/* "Next Set" hint label below flashing arrow */
.bex-next-set-hint {
  display: none !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: rgba(201,168,76,0.70) !important;
  text-align: center !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  position: absolute !important;
  bottom: -16px !important;
  right: 0 !important;
  width: 44px !important;
}
.bex-next-set-hint.visible { display: block !important; }
/* Counter row needs relative so the hint can position absolutely */
.bex-set-counter-row { position: relative !important; }
/* The right arrow wrapper needs relative for the hint */
.bex-set-nav-next { position: relative !important; }
body.light-mode .bex-next-set-hint { color: rgba(130,90,10,0.70) !important; }

/* ══ END ADDITIONS ════════════════════════════════════════════════ */

/* ── Tappable tempo chip ─────────────────────────────────────── */
.bex-tempo-chip {
  cursor: pointer !important;
  border: 1px solid rgba(162,100,190,0.25) !important;
  background: rgba(162,100,190,0.07) !important;
  color: rgba(162,100,190,0.85) !important;
  border-radius: 20px !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: opacity 0.15s !important;
}
.bex-tempo-chip:active { opacity: 0.7 !important; }
body.light-mode .bex-tempo-chip { color: rgba(100,40,140,0.80) !important; background: rgba(100,40,140,0.07) !important; border-color: rgba(100,40,140,0.20) !important; }

/* ── Tempo phase breakdown ─────────────────────────────────────── */
.bex-tempo-breakdown {
  margin: 14px 0 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.bex-tempo-phase {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.bex-tempo-phase-num {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: rgba(240,228,196,0.92) !important;
  min-width: 28px !important;
  text-align: right !important;
  flex-shrink: 0 !important;
}
.bex-tempo-phase-name {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(240,228,196,0.55) !important;
  min-width: 110px !important;
  flex-shrink: 0 !important;
}
.bex-tempo-phase-bar {
  flex: 1 !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.08) !important;
  overflow: hidden !important;
}
.bex-tempo-phase-fill {
  height: 100% !important;
  border-radius: 2px !important;
  background: rgba(162,100,190,0.70) !important;
  min-width: 4px !important;
  transition: width 0.4s ease !important;
}
body.light-mode .bex-tempo-phase-num  { color: rgba(0,0,0,0.85) !important; }
body.light-mode .bex-tempo-phase-name { color: rgba(0,0,0,0.45) !important; }
body.light-mode .bex-tempo-phase-bar  { background: rgba(0,0,0,0.08) !important; }
body.light-mode .bex-tempo-phase-fill { background: rgba(100,40,140,0.55) !important; }
/* ══ END TEMPO ════════════════════════════════════════════════════ */

/* wsbDate visible — shows "Mon · Mar 16th" */

/* ═══════════════════════════════════════════════════════════════════
   ROUND 16 — RECAP MODAL UNIFIED PREMIUM (Apr 28, 2026)
   User: "The workout summary needs a lot of cleaning up. It's
   overwhelming. Give it the same premium look. The app needs to feel
   like 1 complete app — rather than each page or section looking
   different."
   Approach: drop the wide-tile + colored breakdown + week-tinted
   values + gold share button — standardize on the same flat-minimal
   vocabulary used in the expanded card and coming-soon pages.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Stats grid — uniform 2-column layout, no full-width hero tile.
      Sets Completed reads as one stat among equals. */
.recap-stats .recap-stat-wide{ grid-column: span 1 !important; }

/* 2. Stat values neutral — drop the week-tinted gold/blue. Gold is
      reserved for PR achievements only per the design language. */
.recap-stat-value{ color: #fff !important; }
.recap-stat-value.free,
.recap-stat-value.cable{ color: #fff !important; }
body.light-mode .recap-stat-value,
body.light-mode .recap-stat-value.free,
body.light-mode .recap-stat-value.cable{ color: rgba(0,0,0,0.92) !important; }

/* The slash (e.g., "/10") in the Sets Completed value should be
   muted, not the same weight as the value. */
.recap-stat-slash{ font-size: 16px !important; font-weight: 700 !important; opacity: 0.40 !important; }

/* 3. Points breakdown — hide entirely. The +175 number in the value
      slot already conveys the total; the breakdown of "100pts sets,
      50pts PRs, +25 bonus" is clutter that drags the eye. */
.recap-pts-breakdown{ display: none !important; }

/* 4. Footer info (date / day / workout name / equip) — tighten to a
      single tidy block, drop the week-tinted name. */
.recap-footer-info{ margin-bottom: 24px !important; }
.recap-footer-info .rfi-name,
.recap-footer-info .rfi-name.cable{
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  margin-top: 6px !important;
}
.recap-footer-info .rfi-equip,
.recap-footer-info .rfi-equip.free,
.recap-footer-info .rfi-equip.cable{
  color: rgba(255,255,255,0.40) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
}
.recap-footer-info .rfi-date{ color: rgba(255,255,255,0.55) !important; font-size: 13px !important; font-weight: 600 !important; }
.recap-footer-info .rfi-day{ color: rgba(255,255,255,0.55) !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 2px !important; }
body.light-mode .recap-footer-info .rfi-name,
body.light-mode .recap-footer-info .rfi-name.cable{ color: rgba(0,0,0,0.92) !important; }
body.light-mode .recap-footer-info .rfi-equip,
body.light-mode .recap-footer-info .rfi-equip.free,
body.light-mode .recap-footer-info .rfi-equip.cable{ color: rgba(0,0,0,0.45) !important; }
body.light-mode .recap-footer-info .rfi-date,
body.light-mode .recap-footer-info .rfi-day{ color: rgba(0,0,0,0.55) !important; }

/* 5. Exercise breakdown badges — DONE chip dropped (replaced by a
      green check icon at the right of the row). NEW PR keeps gold
      (PR-only color). SKIP becomes a small red text label. */
.recap-ex-badge.badge-done,
.recap-ex-badge.badge-done.cable,
body.light-mode .recap-ex-badge.badge-done{
  display: none !important;
}
/* Inject a check via :after on done rows so users still see "✓" */
.recap-ex-row.done .recap-ex-badges::before{
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  font-size: 13px;
  font-weight: 900;
  margin-right: 4px;
}
body.light-mode .recap-ex-row.done .recap-ex-badges::before{
  background: rgba(22,163,74,0.10);
  color: #16a34a;
}
.recap-ex-badge.badge-skip{
  background: transparent !important;
  border: none !important;
  color: rgba(239,68,68,0.85) !important;
  padding: 0 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
body.light-mode .recap-ex-badge.badge-skip{
  color: #b91c1c !important;
  background: transparent !important;
  border: none !important;
}
.recap-ex-badge.badge-pr{
  /* keep gold — PR only — but tighten typography */
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: rgba(217,184,120,0.12) !important;
  border: 1px solid rgba(217,184,120,0.30) !important;
  color: #D9B878 !important;
}
body.light-mode .recap-ex-badge.badge-pr{
  background: rgba(139,106,20,0.10) !important;
  border-color: rgba(139,106,20,0.28) !important;
  color: #8B6A14 !important;
}

/* 6. Exercise row — the "best" value (e.g., "5lb×1") on the right is
      currently white. Make PR-best stay gold but non-PR best stay
      muted neutral so the eye lands on PR rows. */
.recap-ex-best{ color: rgba(255,255,255,0.85) !important; font-weight: 700 !important; }
.recap-ex-best.pr-val{ color: #D9B878 !important; }
body.light-mode .recap-ex-best{ color: rgba(0,0,0,0.85) !important; }
body.light-mode .recap-ex-best.pr-val{ color: #8B6A14 !important; }

/* 7. Random message ("Built different.") — drop italic, make it a
      tidy small uppercase line at the bottom of the modal. */
#recapMsg, .recap-msg{
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.40) !important;
  text-align: center !important;
  margin: 16px 0 8px !important;
}
body.light-mode #recapMsg,
body.light-mode .recap-msg{ color: rgba(0,0,0,0.45) !important; }

/* ── End round 16 ── */