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

body {
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
  /* CHANGED: #0a0a0a → #121212. Material dark theme recommends #121212 as the
     base background. Near-pure black causes harsh contrast and text "vibration". */
  background: #121212;
  /* CHANGED: #f0f0f0 → #e8e8e8. Slightly off-white reduces eye strain vs pure white. */
  color: #e8e8e8;
  min-height: 100vh;
}

 #app {
  max-width: 480px;
  margin: 0 auto;
  /* Extra bottom padding ensures content scrolls clear of the fixed tab bar.
     Tab bar is ~60px tall; 80px gives comfortable breathing room. */
  padding: 0 16px 80px;
}

/* ================================
   HEADER
================================ */

header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  /* CHANGED: #2a2a2a → #2e2e2e. Slightly more visible header border. */
  border-bottom: 1px solid #2e2e2e;
  margin-bottom: 24px;
  position: relative;
}

header h1 {
  font-size: 1.2rem;
  font-weight: 600;
  /* CHANGED: #fff → #e8e8e8. Consistent with body text, avoids pure white vibration. */
  color: #e8e8e8;
  flex: 1;
  text-align: center;
  letter-spacing: 0.3px;
}

#back-btn {
  background: none;
  border: none;
  /* v2.0: accent changed from red #ff6b74 → blue #378ADD */
  color: #378ADD;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 0;
  position: absolute;
  left: 0;
  font-family: 'Barlow', sans-serif;
}

/* Hamburger menu button — sits on the right side of the header */
.drawer-btn {
  background: none;
  border: none;
  color: #a0a0a0;
  cursor: pointer;
  padding: 4px;
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================================
   BOTTOM TAB BAR
================================ */

/* Fixed to the bottom of the viewport, full width, dark background */
#tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* Increased from 60px to give tabs more breathing room */
  height: 64px;
  background: #1a1a1a;
  border-top: 1px solid #2e2e2e;
  display: flex;
  align-items: stretch;
  /* Cap width to match the app's max-width and center it */
  max-width: 480px;
  margin: 0 auto;
  z-index: 100;
}

/* Each tab button — equal width, stacked icon + label */
.tab-btn-nav {
  flex: 1;
  background: none;
  border: none;
  /* Brightened from #555 — inactive tabs were nearly invisible on #1a1a1a background */
  color: #888;
  font-family: 'Barlow', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* Increased height slightly for bigger tap targets on mobile */
  padding: 8px 0 6px;
  position: relative;
  transition: color 0.15s;
}

/* Active tab: accent blue */
.tab-btn-nav.active {
  color: #378ADD;
}

.tab-icon {
  /* Increased from 20×20 — slightly larger icons are easier to tap and see */
  width: 22px;
  height: 22px;
  /* Lucide injects an SVG — stroke inherits color from the parent button */
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

.tab-label {
  /* Increased from 0.65rem for readability */
  font-size: 0.7rem;
  letter-spacing: 0.3px;
}

/* Small dot indicator below the label on the active tab */
.tab-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
  margin-top: 1px;
}

.tab-btn-nav.active .tab-dot {
  background: #378ADD;
}

/* ================================
   DRAWER
================================ */

/* Semi-transparent overlay that covers the whole screen behind the drawer */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
}

/* The drawer panel itself — slides in from the right */
.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 260px;
  background: #1e1e1e;
  border-left: 1px solid #2e2e2e;
  z-index: 201;
  display: flex;
  flex-direction: column;
  /* Start offscreen to the right; JS adds .open to slide it in */
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

/* When the drawer is open, slide it into view */
.drawer-panel.open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 16px;
  border-bottom: 1px solid #2e2e2e;
}

.drawer-title {
  font-size: 1rem;
  font-weight: 600;
  color: #e8e8e8;
}

.drawer-close-btn {
  background: none;
  border: none;
  color: #a0a0a0;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
  font-family: 'Barlow', sans-serif;
}

.drawer-items {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

/* Each row in the drawer */
.drawer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  color: #e8e8e8;
  font-size: 0.95rem;
  cursor: pointer;
  border-bottom: 1px solid #2a2a2a;
  transition: background 0.1s;
}

.drawer-item:hover {
  background: #2a2a2a;
}

/* Muted style for disabled/coming-soon items */
.drawer-item-muted {
  color: #555;
  cursor: default;
}

.drawer-item-muted:hover {
  background: none;
}

/* Destructive item (Log Out) */
.drawer-item-destructive {
  color: #ff6b74;
  margin-top: 8px;
  border-bottom: none;
}

.drawer-arrow {
  color: #555;
  font-size: 0.9rem;
}

.drawer-coming-soon {
  font-size: 0.75rem;
  color: #555;
  font-style: italic;
}

/* Lucide icon inside drawer rows */
.drawer-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

/* Wraps icon + label text in a drawer row */
.drawer-item-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ================================
   TYPOGRAPHY
================================ */

h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 14px;
  /* CHANGED: #fff → #e8e8e8. Consistent heading color throughout. */
  color: #e8e8e8;
}

.section-label {
  /* CHANGED: 11px → 12px. Was too small to read quickly at a glance in the gym. */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  /* CHANGED: #666 → #777. Slightly more readable while staying clearly muted. */
  color: #777;
  text-transform: uppercase;
  margin: 0 0 10px;
}

/* ================================
   DAY CARDS
================================ */

.day-card {
  /* CHANGED: #1a1a1a → #1e1e1e. Clearer elevation above the #121212 background. */
  background: #1e1e1e;
  /* CHANGED: #333 → #3a3a3a. More visible border — cards now read as distinct elements. */
  border: 1px solid #3a3a3a;
  border-left: 3px solid #3a3a3a;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.day-card:hover {
  /* CHANGED: #444 → #4a4a4a. Hover state remains clearly different from default. */
  border-color: #4a4a4a;
  border-left-color: #4a4a4a;
}

.day-card-next {
  /* v2.0: accent changed from red #ff6b74 → blue #378ADD */
  border-left-color: #378ADD !important;
  /* v2.0: background tint updated from red to subtle blue */
  background: #1a1b1e;
}

.day-card-next:hover {
  /* v2.0: accent changed from red #ff6b74 → blue #378ADD */
  border-color: #378ADD !important;
}

/* In Progress card — green left border, subtle green tint */
.day-card-inprogress {
  border-left-color: #2ecc71 !important;
  background: #1a1e1a;
}

.day-card-inprogress:hover {
  border-color: #2ecc71 !important;
}

.day-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  /* CHANGED: #f0f0f0 → #e8e8e8. Consistent primary text color. */
  color: #e8e8e8;
  margin-bottom: 4px;
}

.day-card p {
  /* CHANGED: 0.85rem → 0.9rem. Small bump — this date text needs to be readable quickly. */
  font-size: 0.9rem;
  /* CHANGED: #888 → #a0a0a0. Passes WCAG AA contrast on #1e1e1e. Much more legible. */
  color: #a0a0a0;
  line-height: 1.4;
}

.next-badge {
  /* v2.0: accent changed from red #ff6b74 → blue #378ADD */
  background: #378ADD;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 2px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  margin-left: 12px;
}

/* ================================
   EXTRA DAY + NAV BUTTONS
================================ */

.extra-day-btns {
  display: flex;
  gap: 8px;
  margin-bottom: 0;
}

.extra-day-btn {
  flex: 1;
  /* Match day card styling exactly so all workout-starting buttons feel the same */
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-left: 3px solid #3a3a3a;
  border-radius: 4px;
  padding: 16px;
  color: #e8e8e8;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease;
  font-family: 'Barlow', sans-serif;
  text-align: left;
}

.extra-day-btn:hover {
  border-color: #4a4a4a;
  border-left-color: #4a4a4a;
}

/* Divider between workout buttons and navigation buttons on home screen */
.section-divider {
  border: none;
  border-top: 1px solid #2e2e2e;
  margin: 16px 0;
}

.secondary-btn {
  width: 100%;
  background: #252525;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 14px;
  color: #e8e8e8;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.15s ease;
  font-family: 'Barlow', sans-serif;
}

.secondary-btn:hover { border-color: #555; }

/* 2x2 grid layout for home screen nav buttons */
.nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

/* Inside the grid, buttons don't need individual margin-top
   since the grid gap handles spacing */
.nav-grid .secondary-btn {
  margin-top: 0;
}

/* ================================
   EXERCISE CARDS
================================ */

.exercise-card {
  /* CHANGED: #1a1a1a → #1e1e1e. Consistent card elevation across the app. */
  background: #1e1e1e;
  /* CHANGED: #333 → #3a3a3a. More visible border. */
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 12px;
}

.exercise-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.exercise-header h3 {
  /* CHANGED: 1.05rem → 1.1rem. Exercise name is key info — slightly larger. */
  font-size: 1.1rem;
  font-weight: 600;
  /* CHANGED: #fff → #e8e8e8. Consistent primary text color. */
  color: #e8e8e8;
  flex: 1;
}

.muscle-tag {
  /* CHANGED: #222 → #2a2a2a. Elevated one step above the card background. */
  background: #2a2a2a;
  /* CHANGED: #333 → #444. Visible border on the tag. */
  border: 1px solid #444;
  /* CHANGED: #888 → #a0a0a0. More readable tag text. */
  color: #a0a0a0;
  /* CHANGED: 0.72rem → 0.78rem. Small bump for readability. */
  font-size: 0.78rem;
  padding: 3px 8px;
  border-radius: 2px;
  margin-left: 8px;
  white-space: nowrap;
}

.exercise-meta { margin-bottom: 10px; }

.goal {
  /* CHANGED: 0.95rem → 1rem. Goal sets are key info, should be clear at a glance. */
  font-size: 1rem;
  /* v2.0: accent changed from red #ff6b74 → blue #378ADD */
  color: #378ADD;
  font-weight: 600;
  margin-right: 8px;
}

.goal-notes {
  font-size: 1rem;
  /* v2.0: accent changed from red #ff6b74 → blue #378ADD */
  color: #378ADD;
  font-weight: 600;
  opacity: 0.85;
}

.custom-note {
  /* CHANGED: 0.85rem → 0.9rem. Small readability bump. */
  font-size: 0.9rem;
  /* CHANGED: #888 → #a0a0a0. Consistent secondary text color. */
  color: #a0a0a0;
  margin-bottom: 8px;
}

/* ================================
   LAST SESSION
================================ */

.last-session {
  /* CHANGED: #333 → #3a3a3a. Consistent border update. */
  border-left: 2px solid #3a3a3a;
  padding: 6px 10px;
  margin: 8px 0;
  /* CHANGED: #222 → #2a2a2a. Slightly lighter nested surface for better elevation. */
  background: #2a2a2a;
}

.last-session-label {
  /* CHANGED: 0.8rem → 0.85rem. This label is important context — needs to be readable. */
  font-size: 0.85rem;
  /* CHANGED: #888 → #a0a0a0. Consistent secondary text color. */
  color: #a0a0a0;
  font-weight: 600;
  display: block;
  margin-bottom: 3px;
}

.last-session-sets {
  /* CHANGED: 0.85rem → 0.9rem. The actual set data is what you're reading mid-workout. */
  font-size: 0.9rem;
  /* CHANGED: #888 → #a0a0a0. Consistent secondary text color. */
  color: #a0a0a0;
  line-height: 1.5;
}

/* ================================
   SETS
================================ */

.sets-list { margin: 8px 0; }

.set-row {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  /* CHANGED: #2a2a2a → #2e2e2e. Slightly more visible row divider. */
  border-bottom: 1px solid #2e2e2e;
  /* CHANGED: 0.92rem → 1rem. Set rows are the main data — full base size. */
  font-size: 1rem;
  align-items: center;
}

/* CHANGED: #888 → #a0a0a0. Consistent secondary text. */
.set-num { color: #a0a0a0; min-width: 50px; }
/* CHANGED: #ddd → #e8e8e8. Consistent primary text color. */
.set-detail { color: #e8e8e8; }

/* ================================
   ADD SET FORM
================================ */

.add-set-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
}

.add-set-form input {
  flex: 1;
  min-width: 0;
  /* CHANGED: #1a1a1a → #2a2a2a. Input fields now clearly elevated above card background. */
  background: #2a2a2a;
  /* CHANGED: #333 → #444. Visible input border — important for usability. */
  border: 1px solid #444;
  border-radius: 3px;
  /* CHANGED: 10px → 12px. Slightly more padding — easier to tap on phone. */
  padding: 12px 10px;
  /* CHANGED: #f0f0f0 → #e8e8e8. Consistent text color. */
  color: #e8e8e8;
  font-size: 1rem;
  text-align: center;
  font-family: 'Barlow', sans-serif;
}

/* CHANGED: #555 → #666. Placeholder slightly more visible. */
.add-set-form input::placeholder { color: #666; }

.add-set-form button {
  /* v2.0: accent changed from red #ff6b74 → blue #378ADD */
  background: #378ADD;
  border: none;
  border-radius: 3px;
  /* CHANGED: 10px → 12px. Matches input padding, easier to tap. */
  padding: 12px 14px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: 'Barlow', sans-serif;
}

/* ================================
   NOTES
================================ */

.exercise-notes-row { margin-top: 10px; }

.exercise-notes-input {
  width: 100%;
  /* CHANGED: #1a1a1a → #2a2a2a. Consistent with other inputs — elevated surface. */
  background: #2a2a2a;
  /* CHANGED: #333 → #444. Visible border. */
  border: 1px solid #444;
  border-radius: 3px;
  padding: 10px;
  /* CHANGED: #aaa → #a0a0a0. Consistent secondary text color. */
  color: #a0a0a0;
  font-size: 0.9rem;
  font-family: 'Barlow', sans-serif;
}

/* CHANGED: #555 → #666. Slightly more visible placeholder. */
.exercise-notes-input::placeholder { color: #666; }

/* ================================
   FINISH BUTTON
================================ */

.finish-btn {
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 4px;
  padding: 16px;
  /* CHANGED: #0a0a0a → #121212. Matches new background color — no visual difference but consistent. */
  color: #121212;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  margin-bottom: 32px;
  letter-spacing: 0.3px;
  font-family: 'Barlow', sans-serif;
}

.finish-btn:active { opacity: 0.9; }

/* ================================
   ADD EXERCISE BUTTON
================================ */

.add-exercise-btn {
  width: 100%;
  background: transparent;
  /* v2.0: accent changed from red #ff6b74 → blue #378ADD */
  border: 1px solid #378ADD;
  border-radius: 4px;
  padding: 13px;
  /* v2.0: accent changed from red #ff6b74 → blue #378ADD */
  color: #378ADD;
  /* CHANGED: 0.95rem → 1rem. Matches base font size. */
  font-size: 1rem;
  cursor: pointer;
  margin-bottom: 10px;
  font-family: 'Barlow', sans-serif;
}

/* ================================
   SCREEN HEADER
================================ */

.screen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.screen-header h2 { margin-bottom: 0; }

.small-btn {
  background: transparent;
  /* v2.0: accent changed from red #ff6b74 → blue #378ADD */
  border: 1px solid #378ADD;
  border-radius: 3px;
  /* CHANGED: 6px 12px → 7px 13px. Slightly larger tap target. */
  padding: 7px 13px;
  /* v2.0: accent changed from red #ff6b74 → blue #378ADD */
  color: #378ADD;
  /* CHANGED: 0.82rem → 0.88rem. More readable at a glance. */
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Barlow', sans-serif;
}

/* ================================
   TABS
================================ */

.tab-btn {
  /* CHANGED: #1a1a1a → #252525. Consistent with other button backgrounds. */
  background: #252525;
  /* CHANGED: #333 → #444. Visible border. */
  border: 1px solid #444;
  border-radius: 3px;
  padding: 8px 18px;
  /* CHANGED: #888 → #a0a0a0. Inactive tab text more readable. */
  color: #a0a0a0;
  /* CHANGED: 0.9rem → 0.95rem. Small readability bump. */
  font-size: 0.95rem;
  cursor: pointer;
  margin-right: 8px;
  margin-bottom: 16px;
  font-family: 'Barlow', sans-serif;
}

.tab-btn.active {
  /* CHANGED: #2a2a2a → #2e2e2e. Active tab clearly distinct from inactive. */
  background: #2e2e2e;
  /* CHANGED: #444 → #555. Active tab border stands out. */
  border-color: #555;
  /* CHANGED: #fff → #e8e8e8. Consistent active text color. */
  color: #e8e8e8;
}

/* ================================
   HISTORY LIST
================================ */

.history-item {
  /* CHANGED: #1a1a1a → #1e1e1e. Consistent card elevation. */
  background: #1e1e1e;
  /* CHANGED: #333 → #3a3a3a. Consistent visible border. */
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}

/* CHANGED: #444 → #4a4a4a. Consistent hover state. */
.history-item:hover { border-color: #4a4a4a; }

.history-item-main {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  align-items: baseline;
}

/* CHANGED: #f0f0f0 → #e8e8e8. Consistent primary text color. */
.history-day { font-weight: 600; font-size: 1rem; color: #e8e8e8; }
/* CHANGED: #888 → #a0a0a0. Consistent secondary text. */
.history-date { color: #a0a0a0; font-size: 0.88rem; }
/* CHANGED: #888 → #a0a0a0 and 0.85rem → 0.9rem. More legible summary line. */
.history-summary { font-size: 0.9rem; color: #a0a0a0; }

/* ================================
   LOAD MORE
================================ */

.load-more-btn {
  width: 100%;
  /* CHANGED: #1a1a1a → #252525. Consistent secondary button style. */
  background: #252525;
  /* CHANGED: #333 → #444. Consistent border. */
  border: 1px solid #444;
  border-radius: 4px;
  padding: 13px;
  /* CHANGED: #888 → #a0a0a0. More readable button text. */
  color: #a0a0a0;
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 6px;
  margin-bottom: 24px;
  font-family: 'Barlow', sans-serif;
}

/* ================================
   WORKOUT DETAIL
================================ */

.detail-set-row {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  /* CHANGED: #2a2a2a → #2e2e2e. Consistent row divider. */
  border-bottom: 1px solid #2e2e2e;
  /* CHANGED: 0.92rem → 1rem. Full base size for set data readability. */
  font-size: 1rem;
  align-items: center;
}

.delete-set-btn {
  margin-left: auto;
  background: none;
  border: none;
  /* v2.0: keeping delete actions red — destructive, red is intentional */
  color: #ff6b74;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 6px;
  opacity: 0.5;
}

.delete-set-btn:hover { opacity: 1; }

.delete-ex-btn {
  background: none;
  /* CHANGED: #333 → #444. Visible border on the remove button. */
  border: 1px solid #444;
  border-radius: 3px;
  /* CHANGED: #888 → #a0a0a0. More readable button text. */
  color: #a0a0a0;
  /* CHANGED: 0.78rem → 0.85rem. Small readability bump on these action buttons. */
  font-size: 0.85rem;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Barlow', sans-serif;
}

/* v2.0: keeping delete hover red — destructive action */
.delete-ex-btn:hover { border-color: #ff6b74; color: #ff6b74; }

.delete-workout-btn {
  width: 100%;
  /* CHANGED: #1a1a1a → #252525. Consistent secondary button background. */
  background: #252525;
  /* CHANGED: #333 → #444. Visible border. */
  border: 1px solid #444;
  border-radius: 4px;
  padding: 12px;
  /* CHANGED: #888 → #a0a0a0. More readable. */
  color: #a0a0a0;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: 16px;
  transition: all 0.15s;
  font-family: 'Barlow', sans-serif;
}

/* v2.0: keeping delete hover red — destructive action */
.delete-workout-btn:hover { border-color: #ff6b74; color: #ff6b74; }

.workout-notes-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.workout-notes-row input { flex: 1; min-width: 0; }

/* ================================
   MODAL
================================ */

#exercise-modal,
#past-workout-modal,
#finish-summary-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  align-items: flex-end;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
}

.modal-content {
  position: relative;
  background: #1e1e1e;
  border-radius: 8px 8px 0 0;
  border-top: 1px solid #3a3a3a;
  /* Bottom padding accounts for the fixed tab bar (64px) so Done button is never hidden */
  padding: 20px 24px 80px;
  width: 100%;
  /* Reduced from 85vh — leaves more room so the Done button is always visible */
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 101;
  overflow: hidden;
}

.modal-content h3 {
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  /* CHANGED: #fff → #e8e8e8. Consistent primary text. */
  color: #e8e8e8;
}

.modal-content input,
.modal-content select {
  /* CHANGED: #222 → #2a2a2a. Consistent input surface color. */
  background: #2a2a2a;
  /* CHANGED: #333 → #444. Visible input border. */
  border: 1px solid #444;
  border-radius: 3px;
  padding: 11px;
  /* CHANGED: #f0f0f0 → #e8e8e8. Consistent text. */
  color: #e8e8e8;
  font-size: 0.95rem;
  width: 100%;
  font-family: 'Barlow', sans-serif;
}

/* CHANGED: #888 → #a0a0a0. Consistent modal label text. */
.modal-content label { font-size: 0.88rem; color: #a0a0a0; }

#exercise-modal-list { overflow-y: auto; flex: 1; }

.modal-exercise-item {
  padding: 13px 6px;
  /* CHANGED: #2a2a2a → #2e2e2e. Consistent row divider. */
  border-bottom: 1px solid #2e2e2e;
  cursor: pointer;
}

/* CHANGED: #222 → #2a2a2a. Consistent hover surface. */
.modal-exercise-item:hover { background: #2a2a2a; }

/* CHANGED: #f0f0f0 → #e8e8e8. Consistent primary text. */
.modal-ex-name { font-size: 0.95rem; color: #e8e8e8; margin-bottom: 3px; }
/* CHANGED: 0.8rem → 0.88rem and #888 → #a0a0a0. More readable exercise meta info. */
.modal-ex-meta { font-size: 0.88rem; color: #a0a0a0; }

.modal-close-btn {
  /* CHANGED: #222 → #2a2a2a. Consistent button surface. */
  background: #2a2a2a;
  /* CHANGED: #333 → #444. Visible border. */
  border: 1px solid #444;
  border-radius: 3px;
  padding: 13px;
  /* CHANGED: #888 → #a0a0a0. More readable cancel button text. */
  color: #a0a0a0;
  font-size: 0.95rem;
  cursor: pointer;
  width: 100%;
  font-family: 'Barlow', sans-serif;
}

/* ================================
   SUMMARY SCREEN
================================ */

.stat-cards {
  display: flex;
  gap: 8px;
  margin-bottom: 1.2rem;
}

.stat-card {
  flex: 1;
  /* CHANGED: #1a1a1a → #1e1e1e. Consistent card elevation. */
  background: #1e1e1e;
  /* CHANGED: #333 → #3a3a3a. Consistent border. */
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 12px;
  cursor: default;
}

/* CHANGED: 0.72rem → 0.8rem and #888 → #a0a0a0. Stat labels were too small and faint. */
.stat-label { font-size: 0.8rem; color: #a0a0a0; margin: 0 0 4px; }
/* CHANGED: #fff → #e8e8e8. Consistent primary text. */
.stat-value { font-size: 1.5rem; font-weight: 600; margin: 0; color: #e8e8e8; }
/* CHANGED: 0.72rem → 0.8rem and #888 → #a0a0a0. Consistent with stat-label update. */
.stat-sub { font-size: 0.8rem; color: #a0a0a0; margin: 3px 0 0; }

/* ================================
   MUSCLE LIST
================================ */

.muscle-list {
  /* CHANGED: #1a1a1a → #1e1e1e. Consistent card elevation. */
  background: #1e1e1e;
  /* CHANGED: #333 → #3a3a3a. Consistent border. */
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  overflow: hidden;
}

.muscle-row {
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.1s;
}

/* CHANGED: #222 → #2a2a2a. Consistent hover surface. */
.muscle-row:hover { background: #2a2a2a; }

.muscle-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 3px;
}

/* CHANGED: 0.95rem → 1rem and #f0f0f0 → #e8e8e8. Consistent. */
.muscle-name { font-size: 1rem; font-weight: 600; color: #e8e8e8; }
/* CHANGED: 0.82rem → 0.88rem and #888 → #a0a0a0. Readable avg sets text. */
.muscle-avg { font-size: 0.88rem; color: #a0a0a0; }
/* CHANGED: #ccc → #e8e8e8. The actual number should be primary text weight. */
.muscle-avg strong { color: #e8e8e8; font-weight: 600; }
/* CHANGED: 0.85rem → 0.9rem. Consistent small text bump. */
.muscle-row-bottom { font-size: 0.9rem; }

/* ================================
   WEEK NAVIGATION
================================ */

.week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  /* CHANGED: #1a1a1a → #1e1e1e. Consistent card elevation. */
  background: #1e1e1e;
  /* CHANGED: #333 → #3a3a3a. Consistent border. */
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 12px 16px;
}

/* CHANGED: #fff → #e8e8e8. Consistent primary text. */
.week-nav-label { font-size: 0.95rem; font-weight: 600; color: #e8e8e8; }

.week-nav-btn {
  background: none;
  border: none;
  /* v2.0: accent changed from red #ff6b74 → blue #378ADD */
  color: #378ADD;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 8px;
  font-family: 'Barlow', sans-serif;
}

/* CHANGED: #333 → #3a3a3a. Disabled state still visible but clearly muted. */
.week-nav-btn:disabled { color: #3a3a3a; cursor: default; }

.back-to-week-btn {
  background: none;
  border: none;
  /* v2.0: accent changed from red #ff6b74 → blue #378ADD */
  color: #378ADD;
  /* CHANGED: 0.82rem → 0.88rem. Small readability bump. */
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-align: center;
  display: block;
  margin: -8px auto 14px;
  font-family: 'Barlow', sans-serif;
}

/* ================================
   EXERCISE EDITOR
================================ */

.editor-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* CHANGED: 0.82rem → 0.88rem and #888 → #a0a0a0. More readable form labels. */
.editor-form label { font-size: 0.88rem; color: #a0a0a0; margin-top: 8px; }

.editor-form input,
.editor-form select,
.editor-form textarea {
  /* CHANGED: #1a1a1a → #2a2a2a. Consistent input surface. */
  background: #2a2a2a;
  /* CHANGED: #333 → #444. Visible input border. */
  border: 1px solid #444;
  border-radius: 3px;
  padding: 11px;
  /* CHANGED: #f0f0f0 → #e8e8e8. Consistent text. */
  color: #e8e8e8;
  font-size: 0.95rem;
  width: 100%;
  font-family: 'Barlow', sans-serif;
}

.editor-form textarea { resize: vertical; }

.delete-btn {
  width: 100%;
  background: transparent;
  /* v2.0: keeping delete red — this is a destructive action, red is intentional */
  border: 1px solid #ff6b74;
  border-radius: 4px;
  padding: 14px;
  /* v2.0: keeping delete red — this is a destructive action, red is intentional */
  color: #ff6b74;
  font-size: 0.95rem;
  cursor: pointer;
  margin-top: 4px;
  font-family: 'Barlow', sans-serif;
}

#exercises-search,
#exercise-history-search,
#plan-exercises-search {
  width: 100%;
  /* CHANGED: #1a1a1a → #2a2a2a. Consistent input surface. */
  background: #2a2a2a;
  /* CHANGED: #333 → #444. Visible input border. */
  border: 1px solid #444;
  border-radius: 3px;
  padding: 11px;
  /* CHANGED: #f0f0f0 → #e8e8e8. Consistent text color. */
  color: #e8e8e8;
  font-size: 0.95rem;
  margin-bottom: 14px;
  font-family: 'Barlow', sans-serif;
}

/* CHANGED: #555 → #666. Slightly more readable placeholder text. */
#exercises-search::placeholder,
#exercise-history-search::placeholder,
#plan-exercises-search::placeholder { color: #666; }

/* ================================
   MANAGE PLAN
================================ */

.plan-last-session {
  /* CHANGED: #333 → #3a3a3a. Consistent border. */
  border-left: 2px solid #3a3a3a;
  padding: 6px 10px;
  margin: 8px 0;
  /* CHANGED: #222 → #2a2a2a. Consistent nested surface color. */
  background: #2a2a2a;
}

/* CHANGED: #888 → #a0a0a0 and 0.82rem → 0.88rem. Consistent note text. */
.plan-last-note {
  color: #a0a0a0;
  font-style: italic;
  margin-top: 3px;
  font-size: 0.88rem;
}

.plan-custom-note-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.plan-custom-note-row input { flex: 1; min-width: 0; }

.plan-controls {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}

.plan-ctrl-btn {
  /* CHANGED: #222 → #252525. Consistent secondary button background. */
  background: #252525;
  /* CHANGED: #333 → #444. Visible border on plan control buttons. */
  border: 1px solid #444;
  border-radius: 3px;
  padding: 7px 16px;
  /* CHANGED: #888 → #a0a0a0. More readable button text. */
  color: #a0a0a0;
  /* CHANGED: 0.88rem → 0.9rem. Consistent small text bump. */
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.1s;
  font-family: 'Barlow', sans-serif;
}

/* CHANGED: #444 → #555 and #ccc → #e8e8e8. Consistent hover state. */
.plan-ctrl-btn:hover { border-color: #555; color: #e8e8e8; }
.plan-ctrl-btn:disabled { opacity: 0.25; cursor: default; }

.plan-ctrl-remove {
  margin-left: auto;
  /* CHANGED: #333 → #444. Consistent border. */
  border-color: #444;
  /* CHANGED: #888 → #a0a0a0. Consistent text. */
  color: #a0a0a0;
}

/* v2.0: keeping remove hover red — destructive action */
.plan-ctrl-remove:hover { border-color: #ff6b74; color: #ff6b74; }

/* ================================
   MISC
================================ */

.day-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Note: .next-badge is defined above under DAY CARDS — no duplicate needed. */

/* ================================
   PIN SCREEN
================================ */

.pin-btn {
  /* CHANGED: #1a1a1a → #252525. Consistent button background — more clearly tappable. */
  background: #252525;
  /* CHANGED: #333 → #444. Visible border on PIN buttons. */
  border: 1px solid #444;
  border-radius: 4px;
  padding: 18px;
  /* CHANGED: #f0f0f0 → #e8e8e8. Consistent text color. */
  color: #e8e8e8;
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Barlow', sans-serif;
  transition: background 0.1s;
}

/* CHANGED: #333 → #2e2e2e. Active state slightly different from default. */
.pin-btn:active { background: #2e2e2e; }

/* ================================
   FINISH WORKOUT SUMMARY MODAL
================================ */

/* Each exercise row in the post-workout summary */
.summary-exercise-list {
  margin-bottom: 8px;
}

.summary-ex-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  /* CHANGED from #2a2a2a: consistent row divider */
  border-bottom: 1px solid #2e2e2e;
}

.summary-ex-name {
  font-size: 0.95rem;
  color: #e8e8e8;
}

.summary-ex-stats {
  font-size: 0.88rem;
  color: #a0a0a0;
}

/* Date line under the workout day name in the summary */
.summary-date {
  font-size: 0.88rem;
  color: #a0a0a0;
  margin: 4px 0 16px;
}

/* PR section — only shown if personal records were hit */
.summary-prs {
  margin-top: 16px;
  /* Subtle green-tinted background to make PRs feel like a celebration */
  background: #1a2a1a;
  border: 1px solid #2a4a2a;
  border-radius: 4px;
  padding: 12px;
}

.summary-pr-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #2ecc71;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.summary-pr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
}

.summary-pr-name {
  font-size: 0.92rem;
  color: #e8e8e8;
}

.summary-pr-weight {
  font-size: 0.92rem;
  color: #2ecc71;
  font-weight: 600;
}

/* ================================
   STREAK DETAIL SCREEN
================================ */

/* Container for the 8 period cards */
.streak-period-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

/* Individual period card — green or red depending on goal hit */
.streak-period-card {
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Left side: date range */
.streak-period-dates {
  font-size: 0.95rem;
  color: #e8e8e8;
}

/* Right side: workout count badge */
.streak-period-count {
  font-size: 1rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 3px;
  min-width: 48px;
  text-align: center;
}

/* Goal hit — green */
.streak-period-card.goal-hit {
  border-left: 3px solid #2ecc71;
}

.streak-period-card.goal-hit .streak-period-count {
  background: #1a2a1a;
  color: #2ecc71;
  border: 1px solid #2a4a2a;
}

/* Goal missed — red */
.streak-period-card.goal-missed {
  border-left: 3px solid #ff6b74;
}

.streak-period-card.goal-missed .streak-period-count {
  background: #2a1a1a;
  color: #ff6b74;
  border: 1px solid #4a2a2a;
}

/* Streak summary stat at the top of the detail screen */
.streak-summary-card {
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 16px;
  text-align: center;
  margin-bottom: 20px;
}

.streak-summary-number {
  font-size: 3rem;
  font-weight: 700;
  color: #2ecc71;
  line-height: 1;
  margin-bottom: 4px;
}

.streak-summary-label {
  font-size: 0.88rem;
  color: #a0a0a0;
}

.streak-goal-note {
  font-size: 0.82rem;
  color: #777;
  text-align: center;
  margin-bottom: 16px;
}

/* ================================
   CALENDAR
================================ */

/* Card that wraps the entire calendar widget */
.calendar-card {
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 14px;
}

/* Month navigation row */
.cal-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.cal-nav-btn {
  background: none;
  border: none;
  /* v2.0: accent changed from red #ff6b74 → blue #378ADD */
  color: #378ADD;
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 8px;
  font-family: 'Barlow', sans-serif;
  line-height: 1;
}

.cal-nav-btn:disabled {
  color: #3a3a3a;
  cursor: default;
}

.cal-month-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e8e8e8;
}

/* 7-column grid for the calendar days */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
}

/* Day-of-week header labels */
.cal-dow {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #777;
  padding: 3px 0 5px;
  letter-spacing: 0.5px;
}

/* Individual day cell */
.cal-day {
  position: relative;
  text-align: center;
  font-size: 12px;
  color: #e8e8e8;
  padding: 5px 2px 9px;
  border-radius: 3px;
  cursor: pointer;
  min-height: 30px;
  transition: background 0.1s;
}

.cal-day:hover {
  background: #2a2a2a;
}

/* Empty cells for days before the 1st and after the last */
.cal-day.cal-empty {
  cursor: default;
  pointer-events: none;
}

/* Days from adjacent months shown faintly */
.cal-day.cal-other-month {
  color: #444;
  cursor: default;
  pointer-events: none;
}

/* Today's date — cyan, distinct from blue week highlight */
.cal-day.cal-today {
  color: #00BCD4;
  font-weight: 700;
}

/* Days in the selected 7-day window — subtle blue background */
.cal-day.cal-in-window {
  background: rgba(55, 138, 221, 0.12);
  border-radius: 0;
}

/* First day of the window */
.cal-day.cal-window-start {
  border-radius: 3px 0 0 3px;
  border-left: 1.5px solid rgba(55, 138, 221, 0.35);
}

/* Last day of the window (the "end" date = today or selected day) */
.cal-day.cal-window-end {
  border-radius: 0 3px 3px 0;
  border-right: 1.5px solid rgba(55, 138, 221, 0.35);
  /* v2.0: window end date uses blue accent */
  color: #378ADD;
  font-weight: 700;
}

/* If start and end are the same cell */
.cal-day.cal-window-start.cal-window-end {
  border-radius: 3px;
}

/* Small dot below the date number for days with a logged workout */
.cal-workout-dot {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  /* v2.0: workout dots cyan, matches today date color */
  background: #00BCD4;
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
}

/* Calendar toggle button on Weekly Summary (top right) */
.cal-toggle-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 7px 11px;
  color: #a0a0a0;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: 'Barlow', sans-serif;
  white-space: nowrap;
  transition: all 0.15s;
}

.cal-toggle-btn.active {
  /* v2.0: accent changed from red to blue */
  border-color: #378ADD;
  color: #378ADD;
  background: #1e1e1e;
}

/* Multi-workout day picker — shown when tapping a day with 2+ workouts */
.cal-day-picker {
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  margin-bottom: 14px;
  overflow: hidden;
}

.cal-day-picker-title {
  font-size: 0.82rem;
  color: #a0a0a0;
  padding: 10px 14px 6px;
  border-bottom: 0.5px solid #2e2e2e;
}

.cal-day-picker-item {
  padding: 12px 14px;
  border-bottom: 0.5px solid #2e2e2e;
  cursor: pointer;
  font-size: 0.92rem;
  color: #e8e8e8;
  transition: background 0.1s;
}

.cal-day-picker-item:last-child {
  border-bottom: none;
}

.cal-day-picker-item:hover {
  background: #2a2a2a;
}

/* ================================
   SETTINGS SCREEN
================================ */

/* Settings sliders icon — home screen only */
.settings-btn {
  background: none;
  border: none;
  color: #a0a0a0;
  cursor: pointer;
  padding: 4px 2px;
  position: absolute;
  right: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.settings-btn:hover { color: #e8e8e8; }

/* Debug terminal icon — home screen only, sits left of settings */
.debug-btn {
  background: none;
  border: none;
  color: #a0a0a0;
  cursor: pointer;
  padding: 4px 2px;
  position: absolute;
  right: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.debug-btn:hover { color: #e8e8e8; }

/* Card that groups related settings together */
.settings-group {
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

/* A single settings row — label/desc on left, input+save on right */
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 0.5px solid #2e2e2e;
}

.settings-row:last-child { border-bottom: none; }

/* Vertical variant — used for PIN change and log out */
.settings-row-vertical {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Left side text block */
.settings-row-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.settings-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e8e8e8;
}

.settings-desc {
  font-size: 0.8rem;
  color: #a0a0a0;
  line-height: 1.4;
}

/* Number input on settings rows */
.settings-input {
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 3px;
  padding: 9px 10px;
  color: #e8e8e8;
  font-size: 0.95rem;
  font-family: 'Barlow', sans-serif;
  width: 70px;
  text-align: center;
}

/* PIN inputs sit side by side */
.settings-pin-inputs {
  display: flex;
  gap: 8px;
  width: 100%;
}

.settings-pin-inputs .settings-input {
  flex: 1;
  width: 0;
  min-width: 0;
  text-align: left;
  letter-spacing: 2px;
}

/* ================================
   PLAN REFERENCE (workout detail screen)
================================ */

/* Row containing the toggle button and collapsible content */
.plan-ref-row {
  margin: 6px 0 10px;
}

/* Small toggle button — understated, just a text link style */
.plan-ref-toggle {
  background: none;
  border: none;
  color: #a0a0a0;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
  font-family: 'Barlow', sans-serif;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The collapsible content area showing goal sets and notes */
.plan-ref-content {
  margin-top: 6px;
  padding: 8px 10px;
  background: #2a2a2a;
  border-left: 2px solid #3a3a3a;
  border-radius: 0;
}

/* ================================
   PROGRESSIVE OVERLOAD NUDGE
================================ */

/* Green banner shown on exercise card when user is ready to increase weight */
.overload-nudge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #1a2a1a;
  border: 1px solid #2a4a2a;
  border-left: 3px solid #2ecc71;
  border-radius: 3px;
  padding: 8px 12px;
  margin-bottom: 8px;
}

.overload-nudge-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #2ecc71;
  letter-spacing: 0.3px;
}

.overload-nudge-sub {
  font-size: 0.88rem;
  color: #a0a0a0;
  line-height: 1.4;
}

/* ================================
   FINISH WORKOUT XP SUMMARY
================================ */

/* XP breakdown block in finish workout modal */
.summary-xp-block {
  background: #1a2a1a;
  border: 1px solid #2a4a2a;
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

/* Individual XP line item row */
.xp-line-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  font-size: 0.88rem;
  color: #a0a0a0;
}

.xp-line-label {
  flex: 1;
  padding-right: 12px;
}

.xp-line-amount {
  font-weight: 600;
  color: #2ecc71;
  white-space: nowrap;
}

/* Subtotal rows (before multiplier, streak bonus) */
.xp-subtotal .xp-line-label {
  color: #777;
  font-size: 0.82rem;
}

.xp-subtotal .xp-line-amount {
  color: #777;
  font-size: 0.82rem;
  font-weight: 500;
}

/* Total row — larger and brighter */
.xp-total-row .xp-line-label {
  font-size: 1rem;
  font-weight: 700;
  color: #e8e8e8;
}

.xp-total-row .xp-line-amount {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2ecc71;
}

/* Thin divider line between sections */
.xp-divider {
  border-top: 0.5px solid #2a4a2a;
  margin: 6px 0;
}

/* Variable reward reveals (Lucky Day, Bonus Window) */
.xp-variable-reward {
  font-size: 0.85rem;
  color: #a0a0a0;
  text-align: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 0.5px solid #2a4a2a;
}

/* ================================
   HEADER XP BAR
================================ */

/* Full-width XP bar rendered below "Pick Today's Workout" heading on home screen.
   Taps to open the Rank page. Replaces the old cramped header bar. */
.home-xp-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 14px;
  transition: border-color 0.15s;
}

.home-xp-bar:hover { border-color: #4a4a4a; }

/* Left side: "L4" level number */
.home-xp-level {
  font-size: 1rem;
  font-weight: 700;
  color: #e8e8e8;
  white-space: nowrap;
}

/* Tier name in blue — "BEGINNER" */
.home-xp-tier {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #378ADD;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Left grouping of level + tier */
.home-xp-left {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
}

/* Progress bar track — expands to fill remaining space */
.home-xp-track {
  flex: 1;
  height: 6px;
  background: #2e2e2e;
  border-radius: 3px;
  overflow: hidden;
}

/* Green fill */
.home-xp-fill {
  height: 100%;
  background: #2ecc71;
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* "166 XP to go" right-side label */
.home-xp-label {
  font-size: 0.75rem;
  color: #777;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ================================
   RANK SCREEN
================================ */

/* Wrapper for each labeled section on the Rank page */
.rank-section {
  margin-bottom: 20px;
}

/* ---- Section 1: Level card ---- */

.rank-level-card {
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 16px;
}

/* Tier name — small blue uppercase label above the level number */
.rank-tier-name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #378ADD;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* Big level number */
.rank-level-number {
  font-size: 3rem;
  font-weight: 700;
  color: #e8e8e8;
  line-height: 1;
  margin-bottom: 6px;
}

/* "Total XP: 27,834 · 166 XP to next level" */
.rank-xp-summary {
  font-size: 0.82rem;
  color: #a0a0a0;
  margin-bottom: 12px;
}

/* XP progress bar on rank page (wider than header bar) */
.rank-progress-track {
  width: 100%;
  height: 8px;
  background: #2e2e2e;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.rank-progress-fill {
  height: 100%;
  background: #2ecc71;
  border-radius: 4px;
  transition: width 0.4s ease;
}

/* Three-part label below the progress bar */
.rank-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
}

/* Brightened from #777 — XP range labels were too faint on the dark card */
.rank-progress-left  { color: #a0a0a0; }
.rank-progress-right { color: #a0a0a0; }

/* "57% to Level 5" — center, green */
.rank-progress-center {
  color: #2ecc71;
  font-weight: 600;
}

/* ---- Section 2: Streak card ---- */

.rank-streak-card {
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 16px;
}

/* Large streak number */
.rank-streak-number {
  font-size: 3rem;
  font-weight: 700;
  color: #e8e8e8;
  line-height: 1;
  margin-bottom: 2px;
}

.rank-streak-sub {
  font-size: 0.82rem;
  color: #a0a0a0;
  margin-bottom: 12px;
}

/* Three badges row: workouts this week · days since workout · multiplier */
.rank-streak-badges {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.rank-streak-badge {
  flex: 1;
  background: #252525;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 8px 6px;
  text-align: center;
  min-width: 0;
}

/* Number inside each badge — slightly smaller to fit three across */
.rank-badge-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #e8e8e8;
  display: block;
  line-height: 1.1;
  margin-bottom: 2px;
}

/* "days since workout" / "multiplier" label — bumped size slightly for readability */
.rank-badge-label {
  font-size: 0.78rem;
  color: #a0a0a0;
}

/* Multiplier badge — green tinted */
.rank-streak-badge.multiplier {
  background: #1a2a1a;
  border-color: #2a4a2a;
}

.rank-streak-badge.multiplier .rank-badge-value {
  color: #2ecc71;
}

/* Freeze pill — dimmed "coming soon" */
.rank-freeze-pill {
  font-size: 0.8rem;
  color: #555;
  padding: 8px 12px;
  background: #1a1a1a;
  border: 1px solid #2e2e2e;
  border-radius: 4px;
  text-align: center;
}

/* ---- Section 3: This Week (reuses .stat-cards / .stat-card) ---- */
/* No additional styles needed — uses existing stat-cards layout */

/* ---- Section 4: Best Week Ever (collapsible) ---- */

.rank-best-week-card {
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  overflow: hidden;
}

/* Header row — always visible, tap to expand */
.rank-best-week-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}

.rank-best-week-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e8e8e8;
}

.rank-best-week-sub {
  font-size: 0.75rem;
  color: #555;
  margin-top: 2px;
}

.rank-best-week-arrow {
  color: #a0a0a0;
  font-size: 0.9rem;
  transition: transform 0.2s;
}

.rank-best-week-arrow.open { transform: rotate(180deg); }

/* Expandable body */
.rank-best-week-body {
  display: none;
  padding: 0 16px 14px;
  border-top: 1px solid #2e2e2e;
}

.rank-best-week-body.open { display: block; }

.rank-best-week-date {
  font-size: 0.8rem;
  color: #777;
  margin: 10px 0 12px;
}

/* 2×2 grid of stats inside best week */
.rank-best-week-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rank-best-week-stat {
  background: #252525;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 10px 12px;
}

.rank-best-week-stat-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: #e8e8e8;
  display: block;
  margin-bottom: 2px;
}

.rank-best-week-stat-value.green { color: #2ecc71; }

.rank-best-week-stat-label {
  font-size: 0.75rem;
  color: #a0a0a0;
}

/* ---- Section 5: Daily Challenge (dimmed) ---- */

.rank-challenge-card {
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 14px 16px;
  opacity: 0.55;
}

.rank-challenge-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e8e8e8;
  margin-bottom: 4px;
}

.rank-challenge-sub {
  font-size: 0.82rem;
  color: #a0a0a0;
}

/* ---- Section 6: Ready to Progress ---- */

.rank-overload-card {
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 14px 16px;
}

/* v2.0: accent changed from red to blue */
.rank-overload-count {
  font-size: 2.5rem;
  font-weight: 700;
  color: #e8e8e8;
  line-height: 1;
}

.rank-overload-label {
  font-size: 0.82rem;
  color: #a0a0a0;
  margin-top: 2px;
}

/* Top row: count + view plan button */
.rank-overload-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

/* Grouped list — one row per day */
.rank-overload-list {
  border: 1px solid #2e2e2e;
  border-radius: 3px;
  overflow: hidden;
}

.rank-overload-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid #2e2e2e;
}

.rank-overload-row:last-child { border-bottom: none; }

/* Day name e.g. "Push 1" */
.rank-overload-day {
  font-size: 0.8rem;
  font-weight: 600;
  /* v2.0: accent changed from red to blue */
  color: #378ADD;
  white-space: nowrap;
  min-width: 50px;
  flex-shrink: 0;
}

/* Comma-separated exercise names */
.rank-overload-exercises-list {
  font-size: 0.82rem;
  color: #a0a0a0;
  line-height: 1.4;
}

/* Shown when overload count is 0 */
.rank-overload-empty {
  font-size: 0.82rem;
  color: #555;
  font-style: italic;
  padding: 6px 0 2px;
}

/* ---- Section 8: Explore ---- */

.rank-explore-card {
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  overflow: hidden;
}

.rank-explore-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #2e2e2e;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 0.95rem;
  color: #e8e8e8;
}

.rank-explore-row:last-child { border-bottom: none; }
.rank-explore-row:hover { background: #2a2a2a; }

.rank-explore-arrow {
  color: #a0a0a0;
  font-size: 0.85rem;
}

/* ================================
   RANK SCREEN — UPDATES
================================ */

/* Combined This Week + Best Week card */
.rank-weeks-card {
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  overflow: hidden;
}

/* Header row showing title + date range */
.rank-week-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 14px 8px;
}

.rank-week-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #a0a0a0;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.rank-week-date {
  font-size: 0.75rem;
  color: #555;
}

/* 4-stat grid — XP, workouts, exercises, lbs */
.rank-week-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 14px 12px;
}

.rank-week-stat {
  text-align: center;
  padding: 4px 0;
}

.rank-week-stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: #e8e8e8;
  display: block;
  margin-bottom: 2px;
}

.rank-week-stat-value.green { color: #2ecc71; }

.rank-week-stat-label {
  font-size: 0.7rem;
  color: #777;
}

/* Divider between This Week and Best Week rows */
.rank-weeks-divider {
  height: 1px;
  background: #2e2e2e;
  margin: 0 14px;
}

/* Best week toggle row — always visible, tap to expand */
.rank-best-week-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}

.rank-best-week-toggle-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #a0a0a0;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Best week XP shown even when collapsed — green for comparison */
.rank-best-week-xp {
  font-size: 0.88rem;
  font-weight: 600;
  color: #2ecc71;
}

.rank-best-week-arrow-inline {
  color: #555;
  font-size: 0.8rem;
  margin-left: 8px;
  transition: transform 0.2s;
  display: inline-block;
}

.rank-best-week-arrow-inline.open { transform: rotate(180deg); }

/* Expanded best week grid — hidden by default */
.rank-best-week-expanded {
  display: none;
  padding: 0 14px 12px;
}

.rank-best-week-expanded.open { display: block; }

.rank-best-week-expanded-date {
  font-size: 0.75rem;
  color: #555;
  margin-bottom: 8px;
}

/* rank-overload-top, list, row, day, exercises-list styles are in the main
   Ready to Progress section above — no duplicates needed here */

/* Clickable stat cards in Stats section */
.stat-card.clickable { cursor: pointer; }
.stat-card.clickable:hover { border-color: #4a4a4a; }

/* Tappable exercise name — used in workout, history, and manage plan screens */
.tappable-exercise-name {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: #3a3a3a;
  text-underline-offset: 3px;
}

.tappable-exercise-name:hover {
  /* v2.0: accent changed from red to blue */
  color: #378ADD;
}

/* ================================
   DEBUG FOOTER
   Floating badge in bottom-right corner.
   Only visible when debugFooter setting is enabled.
================================ */
#debug-footer {
  position: fixed;
  bottom: 74px; /* sits above the tab bar */
  right: 10px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 4px 7px;
  font-family: monospace;
  font-size: 0.65rem;
  color: #a0a0a0;
  line-height: 1.5;
  z-index: 999;
  pointer-events: none; /* never accidentally tappable */
  max-width: 220px;
  word-break: break-all;
}