/* ===== DISCLAIMER MODAL ===== */
.disclaimer-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.disclaimer-modal.hidden {
  opacity: 0;
  pointer-events: none;
}

.disclaimer-content {
  background: var(--bg-card, #111111);
  border: 1px solid rgba(155, 123, 184, 0.3);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideIn 0.4s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.disclaimer-header {
  padding: 30px 30px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(155, 123, 184, 0.15) 0%, transparent 100%);
}

.disclaimer-header h2 {
  font-family: 'Dancing Script', cursive;
  font-size: 2.5rem;
  color: #d4a5c9;
  margin-bottom: 8px;
}

.disclaimer-subtitle {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.disclaimer-body {
  padding: 25px 30px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

.disclaimer-body h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9B7BB8;
  margin: 20px 0 10px;
}

.disclaimer-body h3:first-child {
  margin-top: 0;
}

.disclaimer-body p {
  margin-bottom: 15px;
}

.disclaimer-body ul {
  margin: 0 0 15px 0;
  padding-left: 20px;
}

.disclaimer-body li {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.7);
}

.disclaimer-body strong {
  color: #d4a5c9;
}

.disclaimer-footer {
  padding: 20px 30px 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
}

.disclaimer-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 20px;
}

.disclaimer-checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: #9B7BB8;
  cursor: pointer;
}

.disclaimer-checkbox-label span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.disclaimer-accept-btn {
  width: 100%;
  padding: 16px 30px;
  background: rgba(155, 123, 184, 0.3);
  border: 1px solid rgba(155, 123, 184, 0.3);
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: not-allowed;
  transition: all 0.3s ease;
}

.disclaimer-accept-btn:not(:disabled) {
  background: #9B7BB8;
  border-color: #9B7BB8;
  color: white;
  cursor: pointer;
}

.disclaimer-accept-btn:not(:disabled):hover {
  background: #d4a5c9;
  border-color: #d4a5c9;
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(155, 123, 184, 0.4);
}

@media (max-width: 600px) {
  .disclaimer-content {
    max-height: 95vh;
  }

  .disclaimer-header {
    padding: 20px;
  }

  .disclaimer-header h2 {
    font-size: 2rem;
  }

  .disclaimer-body {
    padding: 20px;
    font-size: 13px;
  }

  .disclaimer-footer {
    padding: 15px 20px 20px;
  }
}

@media print {
  .disclaimer-modal {
    display: none;
  }
}

/* ===== DISCLAIMER BANNER (inline) ===== */
/* ===== NUTRITION SECTION ===== */
.nutrition-section {
  background: var(--bg-dark);
  padding: 50px 20px;
  text-align: center;
}

.nutrition-content {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 28px 36px;
  transition: all 0.3s ease;
}

.nutrition-content:hover {
  border-color: var(--border-highlight);
}

.nutrition-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nutrition-icon svg {
  width: 36px;
  height: 36px;
  stroke: var(--primary-purple);
}

.nutrition-text {
  text-align: left;
}

.nutrition-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--primary-purple);
  margin-bottom: 8px;
}

.nutrition-main {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-medium);
  margin: 0 0 10px 0;
}

.nutrition-main strong {
  color: var(--text-bright);
}

.nutrition-citation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(155, 123, 184, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nutrition-citation:hover {
  color: var(--primary-purple);
}

.nutrition-citation svg {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .nutrition-content {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
    gap: 16px;
  }

  .nutrition-text {
    text-align: center;
  }

  .nutrition-main {
    font-size: 14px;
  }
}

@media print {
  .nutrition-section {
    display: none;
  }
}

/* ===== SAFETY NOTES SECTION ===== */
.safety-section {
  background: linear-gradient(135deg, rgba(155, 123, 184, 0.05) 0%, rgba(10, 10, 10, 0.95) 100%);
  padding: 30px 20px;
  border-bottom: 1px solid rgba(155, 123, 184, 0.15);
}

.safety-content {
  max-width: 1000px;
  margin: 0 auto;
}

.safety-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.safety-header .safety-icon {
  font-size: 1.5rem;
}

.safety-header h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d4a5c9;
  margin: 0;
}

.safety-accordions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.safety-accordion {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(155, 123, 184, 0.2);
  border-radius: 8px;
  overflow: hidden;
}

.safety-accordion summary {
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9B7BB8;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.safety-accordion summary::-webkit-details-marker {
  display: none;
}

.safety-accordion summary::after {
  content: '+';
  font-size: 18px;
  color: #9B7BB8;
  transition: transform 0.2s ease;
}

.safety-accordion[open] summary::after {
  content: '−';
}

.safety-accordion[open] summary {
  border-bottom: 1px solid rgba(155, 123, 184, 0.15);
}

.safety-accordion ul,
.safety-accordion p {
  padding: 16px 18px;
  margin: 0;
}

.safety-accordion ul {
  list-style: none;
  padding-left: 18px;
  padding-right: 18px;
}

.safety-accordion li {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  padding-left: 16px;
  position: relative;
  margin-bottom: 8px;
}

.safety-accordion li:last-child {
  margin-bottom: 0;
}

.safety-accordion li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #9B7BB8;
}

.safety-accordion p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  padding-bottom: 0;
}

.safety-accordion p + ul {
  padding-top: 8px;
}

.safety-accordion .safety-note {
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
  padding-top: 12px;
}

@media (max-width: 768px) {
  .safety-section {
    padding: 25px 15px;
  }

  .safety-header h3 {
    font-size: 12px;
  }

  .safety-accordion summary {
    padding: 12px 14px;
    font-size: 12px;
  }

  .safety-accordion li,
  .safety-accordion p {
    font-size: 12px;
  }
}

@media print {
  .safety-section {
    display: none;
  }
}

/* ===== DISCLAIMER BANNER ===== */
.disclaimer-banner {
  background: linear-gradient(135deg, rgba(155, 123, 184, 0.1) 0%, rgba(10, 10, 10, 0.95) 100%);
  border-top: 1px solid rgba(155, 123, 184, 0.3);
  border-bottom: 1px solid rgba(155, 123, 184, 0.3);
  padding: 40px 20px;
}

.disclaimer-banner-content {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  gap: 25px;
  align-items: flex-start;
}

.disclaimer-banner-icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}

.disclaimer-banner-text {
  flex: 1;
}

.disclaimer-banner-text h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d4a5c9;
  margin-bottom: 12px;
}

.disclaimer-banner-text > p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20px;
}

.disclaimer-banner-text strong {
  color: #d4a5c9;
}

.disclaimer-banner-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.disclaimer-banner-column h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9B7BB8;
  margin-bottom: 10px;
}

.disclaimer-banner-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.disclaimer-banner-column li {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  padding-left: 16px;
  position: relative;
  margin-bottom: 8px;
}

.disclaimer-banner-column li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #9B7BB8;
}

@media (max-width: 768px) {
  .disclaimer-banner {
    padding: 30px 15px;
  }

  .disclaimer-banner-content {
    flex-direction: column;
    gap: 15px;
  }

  .disclaimer-banner-icon {
    font-size: 1.5rem;
  }

  .disclaimer-banner-details {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .disclaimer-banner-text h3 {
    font-size: 14px;
  }

  .disclaimer-banner-text > p {
    font-size: 13px;
  }
}

@media print {
  .disclaimer-banner {
    display: none;
  }
}

/* ===== NOURISH YOUR BODY SECTION ===== */
.nourish-section {
  background: linear-gradient(180deg, rgba(10, 10, 10, 1) 0%, rgba(155, 123, 184, 0.03) 50%, rgba(10, 10, 10, 1) 100%);
  padding: 60px 20px;
  border-bottom: 1px solid rgba(155, 123, 184, 0.1);
}

.nourish-content {
  max-width: 800px;
  margin: 0 auto;
}

.nourish-header {
  text-align: center;
  margin-bottom: 40px;
}

.nourish-icon {
  font-size: 40px;
  display: block;
  margin-bottom: 12px;
}

.nourish-header h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 3px;
  color: var(--text-bright);
  margin-bottom: 8px;
}

.nourish-subtitle {
  font-size: 14px;
  color: var(--text-medium);
  letter-spacing: 1px;
}

.nourish-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}

.nourish-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 20px;
  transition: border-color 0.2s ease;
}

.nourish-item:hover {
  border-color: var(--border-highlight);
}

.nourish-item-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}

.nourish-item-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nourish-item-text strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
}

.nourish-item-text span {
  font-size: 13px;
  color: var(--text-medium);
  line-height: 1.5;
}

.nourish-item-full {
  grid-column: 1 / -1;
}

.nourish-disclaimer {
  text-align: center;
  font-size: 12px;
  color: var(--text-medium);
  font-style: italic;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .nourish-section {
    padding: 40px 16px;
  }

  .nourish-header h3 {
    font-size: 26px;
  }

  .nourish-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .nourish-item {
    padding: 16px;
  }

  .nourish-item-full {
    grid-column: auto;
  }
}

@media print {
  .nourish-section {
    display: none;
  }
}

/* ===== GIVEAWAY SECTION ===== */
.giveaway-section {
  background: linear-gradient(180deg, rgba(10, 10, 10, 1) 0%, rgba(155, 123, 184, 0.08) 50%, rgba(10, 10, 10, 1) 100%);
  padding: 60px 20px;
  border-bottom: 1px solid rgba(155, 123, 184, 0.15);
}

.giveaway-content {
  max-width: 800px;
  margin: 0 auto;
}

.giveaway-header {
  text-align: center;
  margin-bottom: 40px;
}

.giveaway-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
}

.giveaway-header h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 3px;
  color: var(--text-bright);
  margin-bottom: 16px;
}

.giveaway-subtitle {
  font-size: 15px;
  color: var(--text-medium);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 12px;
}

.giveaway-intro {
  font-size: 15px;
  color: var(--text-medium);
  line-height: 1.7;
}

.giveaway-card {
  background: var(--bg-card);
  border: 1px solid var(--border-highlight);
  padding: 30px;
  margin-bottom: 30px;
}

.giveaway-card-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-pink);
  margin-bottom: 20px;
}

.giveaway-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.giveaway-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--text-medium);
  line-height: 1.6;
}

.giveaway-check {
  color: var(--primary-purple);
  font-weight: 600;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(155, 123, 184, 0.15);
  border-radius: 4px;
  font-size: 12px;
}

.giveaway-prize {
  background: linear-gradient(135deg, rgba(155, 123, 184, 0.15) 0%, rgba(212, 165, 201, 0.1) 100%);
  border: 1px solid var(--border-highlight);
  padding: 20px;
  text-align: center;
  margin-top: 20px;
}

.giveaway-prize-text {
  display: block;
  font-size: 14px;
  color: var(--text-medium);
  margin-bottom: 8px;
}

.giveaway-prize-amount {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--accent-pink);
}

.giveaway-why {
  text-align: center;
  padding: 30px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

.giveaway-why-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 12px;
}

.giveaway-why h4 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--text-bright);
  margin-bottom: 16px;
}

.giveaway-why p {
  font-size: 14px;
  color: var(--text-medium);
  line-height: 1.7;
  margin-bottom: 12px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.giveaway-why p:last-of-type {
  margin-bottom: 0;
}

.giveaway-thanks {
  color: var(--accent-pink) !important;
  font-weight: 500;
  margin-top: 20px !important;
}

@media (max-width: 600px) {
  .giveaway-section {
    padding: 40px 16px;
  }

  .giveaway-header h3 {
    font-size: 26px;
  }

  .giveaway-icon {
    font-size: 40px;
  }

  .giveaway-card {
    padding: 20px;
  }

  .giveaway-prize-amount {
    font-size: 22px;
  }

  .giveaway-why {
    padding: 20px;
  }

  .giveaway-why h4 {
    font-size: 20px;
  }
}

@media print {
  .giveaway-section {
    display: none;
  }
}

:root {
  --bg-dark: #0a0a0a;
  --bg-card: #111111;
  --bg-card-alt: #161616;
  --bg-input: #1a1a1a;
  --primary-purple: #9B7BB8;
  --accent-pink: #d4a5c9;
  --accent-pink-dim: rgba(212, 165, 201, 0.3);
  --text-bright: #ffffff;
  --text-medium: rgba(255, 255, 255, 0.7);
  --text-dim: rgba(255, 255, 255, 0.4);
  --text-faint: rgba(255, 255, 255, 0.5);  /* Improved from 0.2 for WCAG AA compliance */
  /* Alias variables for consistency */
  --text-muted: var(--text-dim);
  --text-light: var(--text-medium);
  --text-secondary: var(--text-dim);
  --border-color: rgba(255, 255, 255, 0.1);
  --border-highlight: rgba(155, 123, 184, 0.3);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-dark);
  color: var(--text-bright);
  line-height: 1.6;
}

/* ===== VIDEO HERO SECTION ===== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  animation: slowZoom 20s ease-in-out infinite alternate;
}

@keyframes slowZoom {
  0% { transform: scale(1.1) translateX(-2%); }
  100% { transform: scale(1.2) translateX(2%); }
}

.scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.03) 0px,
    rgba(0, 0, 0, 0.03) 1px,
    transparent 1px,
    transparent 2px
  );
}

.scanlines::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    rgba(255, 255, 255, 0.01) 1px,
    transparent 2px
  );
  animation: flicker 0.15s infinite;
  opacity: 0.5;
}

@keyframes flicker {
  0% { opacity: 0.5; }
  50% { opacity: 0.52; }
  100% { opacity: 0.5; }
}

.vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.3) 80%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

.color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(155, 123, 184, 0.1) 0%,
    rgba(212, 165, 201, 0.05) 50%,
    rgba(100, 80, 140, 0.15) 100%
  );
  mix-blend-mode: overlay;
}

.noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  opacity: 0.04;
  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)'/%3E%3C/svg%3E");
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 40px;
  max-width: 900px;
}

.badge {
  display: inline-block;
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.9);
}

.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 15vw, 12rem);
  line-height: 0.85;
  letter-spacing: -2px;
  text-transform: uppercase;
  margin-bottom: 20px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.hero-title .line {
  display: block;
  overflow: hidden;
}

.hero-title .line span {
  display: block;
  animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay);
  transform: translateY(100%);
}

@keyframes slideUp {
  to { transform: translateY(0); }
}

.hero-title .accent {
  color: var(--accent-pink);
  text-shadow:
    0 0 40px rgba(212, 165, 201, 0.5),
    0 4px 30px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  font-weight: 300;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-medium);
  margin-bottom: 40px;
  opacity: 0;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 40px;
  background: var(--text-bright);
  color: var(--bg-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  opacity: 0;
}

.hero-cta:hover {
  background: var(--accent-pink);
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(212, 165, 201, 0.4);
}

.hero-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.hero-cta:hover svg {
  transform: translateX(4px);
}

.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
}

.scroll-indicator span {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.scroll-indicator .mouse {
  width: 24px;
  height: 38px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  position: relative;
}

.scroll-indicator .mouse::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 8px;
  background: var(--text-dim);
  border-radius: 2px;
  animation: scrollPulse 1.5s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
  50% { opacity: 0.3; transform: translateX(-50%) translateY(6px); }
}

/* ===== HERO REVEAL ===== */
.hero-revealed .badge {
  opacity: 0 !important;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.hero-fade-in {
  animation: heroRevealFade 0.6s ease forwards;
}

@keyframes heroRevealFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Instant reveal (user scrolled early) */

.hero-revealed-instant .hero-chip {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.hero-revealed-instant .hero-chips {
  opacity: 1;
}

.hero-revealed-instant .hero-subtitle,
.hero-revealed-instant .hero-cta {
  opacity: 1 !important;
}

.scroll-indicator.hero-revealed-instant {
  opacity: 1 !important;
}

/* Hero chips container */
.hero-chips {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  opacity: 0;
  pointer-events: none;
}

.hero-revealed .hero-chips {
  opacity: 1;
  pointer-events: auto;
}

/* Individual chip */
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: rgba(155, 123, 184, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 165, 201, 0.35);
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-40px);
}

.hero-chip:nth-child(2) {
  transform: translateY(-30px);
}

.hero-chip:nth-child(3) {
  transform: translateX(40px);
}

.hero-chip svg {
  flex-shrink: 0;
  opacity: 0.9;
  stroke: var(--accent-pink);
}

/* Chip fly-in animations */
.hero-revealed .hero-chip {
  animation: chipFlyInLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(0.3s + var(--chip-delay)) forwards;
}

.hero-revealed .hero-chip:nth-child(2) {
  animation-name: chipFlyInTop;
}

.hero-revealed .hero-chip:nth-child(3) {
  animation-name: chipFlyInRight;
}

@keyframes chipFlyInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes chipFlyInTop {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes chipFlyInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-revealed .badge {
    transition: none !important;
  }

  .hero-title .line span {
    animation: none !important;
    transform: none;
  }

  .hero-chips {
    opacity: 1;
  }

  .hero-chip,
  .hero-revealed .hero-chip {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .hero-fade-in {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ===== WHY THIS PROGRAM SECTION ===== */
.why-section {
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-card) 50%, var(--bg-dark) 100%);
  padding: 80px 20px;
  position: relative;
}

.why-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(155, 123, 184, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.why-content {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.why-header {
  text-align: center;
  margin-bottom: 60px;
}

.why-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--primary-purple);
  margin-bottom: 16px;
  padding: 8px 16px;
  border: 1px solid var(--border-highlight);
  background: rgba(155, 123, 184, 0.1);
}

.why-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: 2px;
  color: var(--text-bright);
  margin-bottom: 20px;
  line-height: 1.1;
}

.why-subtitle {
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 300;
  color: var(--text-medium);
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Why Cards Grid */
.why-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

.why-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 32px 28px;
  transition: all 0.3s ease;
}

.why-card:hover {
  border-color: var(--border-highlight);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.why-card-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-bright);
  margin-bottom: 16px;
}

.why-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.why-card-list li {
  font-size: 14px;
  color: var(--text-medium);
  padding: 8px 0;
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
  border-bottom: 1px solid var(--border-color);
}

.why-card-list li:last-child {
  border-bottom: none;
}

.why-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--primary-purple);
  border-radius: 50%;
}

/* Phase Timeline (in Structure card) */
.phase-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.phase-block {
  text-align: center;
  padding: 8px 12px;
  background: rgba(155, 123, 184, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(155, 123, 184, 0.15);
}

.phase-weeks {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.phase-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-purple);
}

.phase-arrow {
  color: var(--text-muted);
  font-size: 18px;
  opacity: 0.6;
}

/* Authority Section */
.why-authority {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  background: linear-gradient(135deg, rgba(155, 123, 184, 0.1) 0%, rgba(10, 10, 10, 0.5) 100%);
  border: 1px solid var(--border-highlight);
  padding: 32px;
  margin-bottom: 50px;
}

.authority-avatar {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--accent-pink) 100%);
  border-radius: 50%;
  flex-shrink: 0;
}

.authority-avatar span {
  font-family: 'Dancing Script', cursive;
  font-size: 24px;
  color: white;
  font-weight: 700;
}

.authority-text {
  flex: 1;
}

.authority-about-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-pink);
  margin-bottom: 16px;
  margin-top: 0;
}

.authority-about {
  font-size: 15px;
  color: var(--text-medium);
  line-height: 1.7;
  margin-bottom: 16px;
}

.authority-quote {
  font-size: 15px;
  font-style: italic;
  color: var(--text-medium);
  line-height: 1.7;
  margin-bottom: 12px;
}

.authority-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-pink);
  display: flex;
  align-items: center;
  gap: 10px;
}

.authority-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  transition: color 0.2s ease;
}

.authority-ig svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.authority-ig:hover {
  color: var(--accent-pink);
}

/* Why CTA Button */
.why-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 40px;
  background: var(--primary-purple);
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  margin: 0 auto;
  display: flex;
  width: fit-content;
}

.why-cta:hover {
  background: var(--accent-pink);
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(212, 165, 201, 0.4);
}

.why-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.why-cta:hover svg {
  transform: translateX(4px);
}

/* Why Section Responsive */
@media (max-width: 900px) {
  .why-section {
    padding: 50px 20px;
  }

  .why-header {
    margin-bottom: 36px;
  }

  .why-label {
    font-size: 10px;
    letter-spacing: 3px;
    padding: 6px 12px;
    margin-bottom: 12px;
  }

  .why-subtitle {
    font-size: 15px;
    line-height: 1.6;
  }

  .why-cards {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 40px;
  }

  /* Clean card style - no boxes, just accent bars */
  .why-card {
    background: transparent;
    border: none;
    border-left: 3px solid var(--primary-purple);
    padding: 20px 0 20px 20px;
    margin-bottom: 8px;
  }

  .why-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--accent-pink);
  }

  .why-card-title {
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 12px;
    color: var(--accent-pink);
  }

  .why-card-list li {
    font-size: 14px;
    padding: 6px 0;
    padding-left: 16px;
    border-bottom: none;
  }

  .why-card-list li::before {
    width: 4px;
    height: 4px;
  }

  /* Phase Timeline - mobile adjustments */
  .phase-timeline {
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
  }

  .phase-block {
    padding: 6px 10px;
  }

  .phase-weeks {
    font-size: 10px;
  }

  .phase-name {
    font-size: 13px;
  }

  .phase-arrow {
    font-size: 16px;
  }

  /* Authority - simplified, no box */
  .why-authority {
    background: transparent;
    border: none;
    border-top: 1px solid var(--border-color);
    padding: 32px 0;
    margin-bottom: 32px;
    text-align: left;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* Hide avatar on mobile - just noise */
  .authority-avatar {
    display: none;
  }

  .authority-about-title {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .authority-about {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 14px;
  }

  .authority-quote {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-medium);
    position: relative;
    padding-left: 20px;
  }

  .authority-quote::before {
    content: '"';
    position: absolute;
    left: 0;
    top: -4px;
    font-family: 'Dancing Script', cursive;
    font-size: 32px;
    color: var(--primary-purple);
    line-height: 1;
  }

  .authority-name {
    font-size: 13px;
    gap: 8px;
  }

  .authority-ig svg {
    width: 14px;
    height: 14px;
  }

  /* CTA - clean, no arrow */
  .why-cta {
    width: 100%;
    padding: 16px 24px;
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  .why-cta svg {
    display: none;
  }
}

@media (max-width: 400px) {
  .why-section {
    padding: 40px 16px;
  }

  .why-title {
    font-size: 2.2rem;
  }

  .why-subtitle {
    font-size: 14px;
  }

  .why-card {
    padding: 16px 0 16px 16px;
  }

  .why-card-list li {
    font-size: 13px;
  }

  .authority-quote {
    font-size: 14px;
  }
}

@media print {
  .why-section {
    display: none;
  }
}

.corner-ui {
  position: absolute;
  z-index: 10;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.corner-ui.top-left { top: 40px; left: 40px; }
.corner-ui.top-right { top: 40px; right: 40px; text-align: right; }
.corner-ui.bottom-left { bottom: 40px; left: 40px; }
.corner-ui.bottom-right { bottom: 40px; right: 40px; text-align: right; }

.corner-ui .label {
  color: var(--text-faint);
  margin-bottom: 4px;
}

.corner-ui .value {
  color: var(--text-medium);
  font-weight: 500;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  vertical-align: middle;
  color: var(--text-dim);
  transition: all 0.3s ease;
}

.social-link svg {
  width: 100%;
  height: 100%;
}

.social-link:hover {
  color: var(--accent-pink);
  transform: scale(1.15);
}

/* ===== HERO ACTIONS (bottom-left icon row) ===== */
.hero-actions {
  position: absolute;
  bottom: 100px;
  left: 40px;
  display: flex;
  gap: 10px;
  z-index: 20;
}

.hero-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.hero-action-icon svg {
  width: 16px;
  height: 16px;
}

.hero-action-icon:hover {
  background: var(--primary-purple);
  border-color: var(--primary-purple);
  color: white;
  transform: scale(1.1);
}

/* Logged in state for hero auth icon */
.hero-action-icon.logged-in {
  width: auto;
  padding: 4px 12px 4px 4px;
  border-radius: 20px;
  gap: 8px;
}

.hero-action-icon .hero-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-purple);
}

.hero-action-icon .hero-auth-text {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-medium);
}

.hero-action-icon.logged-in:hover .hero-auth-text {
  color: white;
}

@media (max-width: 768px) {
  .hero-actions {
    bottom: 100px;
    left: 20px;
    gap: 8px;
  }

  .hero-action-icon {
    width: 36px;
    height: 36px;
  }

  .hero-action-icon svg {
    width: 16px;
    height: 16px;
  }

  .hero-action-icon.logged-in {
    padding: 3px;
    width: 36px;
  }

  .hero-action-icon.logged-in .hero-auth-text {
    display: none;
  }

  .hero-action-icon .hero-user-avatar {
    width: 30px;
    height: 30px;
  }
}

.deco-line {
  position: absolute;
  background: var(--border-color);
  z-index: 8;
}

.deco-line.horizontal { height: 1px; width: 100px; }
.deco-line.vertical { width: 1px; height: 100px; }
.deco-line.top-left-h { top: 39px; left: 0; }
.deco-line.top-left-v { top: 0; left: 39px; }
.deco-line.top-right-h { top: 39px; right: 0; }
.deco-line.top-right-v { top: 0; right: 39px; }
.deco-line.bottom-left-h { bottom: 39px; left: 0; }
.deco-line.bottom-left-v { bottom: 0; left: 39px; }
.deco-line.bottom-right-h { bottom: 39px; right: 0; }
.deco-line.bottom-right-v { bottom: 0; right: 39px; }

/* ===== SECTION NAVIGATION ===== */
.section-nav {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: rgba(15, 15, 15, 0.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(155, 123, 184, 0.25);
  border-top: 1px solid rgba(155, 123, 184, 0.15);
  position: sticky;
  top: 0;
  z-index: 101;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.section-nav.section-nav-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}

.section-nav-link {
  padding: 6px 14px;
  color: var(--text-medium);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.section-nav-link:hover {
  color: var(--text-bright);
  border-color: var(--border-color);
}

.section-nav-link.active {
  color: var(--accent-pink);
  border-color: var(--accent-pink);
}

@media (max-width: 600px) {
  .section-nav {
    gap: 2px;
    padding: 10px 10px;
  }
  .section-nav-link {
    padding: 5px 8px;
    font-size: 10px;
    letter-spacing: 1px;
  }
}

@media print {
  .section-nav {
    display: none;
  }
}

/* ===== PROGRAM TIMELINE ===== */
.program-timeline {
  position: relative;
  padding: 30px 20px 40px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 1) 0%, rgba(155, 123, 184, 0.03) 50%, rgba(10, 10, 10, 1) 100%);
  border-bottom: 1px solid var(--border-color);
  max-width: 900px;
  margin: 0 auto;
}

.timeline-track {
  position: absolute;
  top: 50%;
  left: 40px;
  right: 40px;
  height: 4px;
  background: var(--bg-input);
  border-radius: 2px;
  transform: translateY(-50%);
  z-index: 1;
}

.timeline-progress {
  height: 100%;
  background: linear-gradient(90deg, #4ade80 0%, var(--primary-purple) 100%);
  border-radius: 2px;
  transition: width 0.5s ease;
  width: 0%;
}

.timeline-phases {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.timeline-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
  text-align: center;
}

.timeline-phase:hover {
  border-color: var(--primary-purple);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(155, 123, 184, 0.2);
}

.timeline-phase-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-bright);
}

.timeline-phase-weeks {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

.timeline-phase-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-medium);
}

.phase-check {
  color: #4ade80;
  margin-right: 4px;
  font-weight: bold;
}

/* Phase States */
.timeline-phase.complete {
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
}

.timeline-phase.complete .timeline-phase-status {
  color: #4ade80;
}

.timeline-phase.in-progress {
  border-color: var(--primary-purple);
  background: rgba(155, 123, 184, 0.1);
}

.timeline-phase.in-progress .timeline-phase-status {
  color: var(--primary-purple);
}

.timeline-phase.upcoming {
  opacity: 0.5;
}

.timeline-phase.upcoming .timeline-phase-status {
  color: var(--text-dim);
}

.timeline-phase.active {
  border-color: var(--accent-pink);
  box-shadow: 0 0 20px rgba(212, 165, 201, 0.3);
}

/* Timeline Marker */
.timeline-marker {
  position: absolute;
  bottom: -5px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  z-index: 3;
  transition: left 0.5s ease;
  pointer-events: none;
}

.marker-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-pink);
  background: var(--bg-dark);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.marker-arrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--accent-pink);
  margin-top: 2px;
}

/* Timeline Responsive */
@media (max-width: 768px) {
  .program-timeline {
    padding: 25px 15px 35px;
  }

  .timeline-track {
    left: 20px;
    right: 20px;
  }

  .timeline-phase {
    min-width: 70px;
    padding: 10px 8px;
  }

  .timeline-phase-name {
    font-size: 11px;
  }

  .timeline-phase-weeks {
    font-size: 10px;
  }

  .timeline-phase-status {
    font-size: 10px;
  }

  .marker-label {
    font-size: 8px;
    padding: 3px 6px;
  }
}

@media (max-width: 480px) {
  .program-timeline {
    padding: 20px 10px 30px;
  }

  .timeline-track {
    left: 10px;
    right: 10px;
  }

  .timeline-phase {
    min-width: auto;
    padding: 8px 6px;
    flex: 1;
  }

  .timeline-phase-name {
    font-size: 10px;
    letter-spacing: 0.5px;
  }

  .timeline-phase-weeks {
    display: none;
  }

  .timeline-phase-status {
    font-size: 9px;
  }

  .marker-label {
    font-size: 7px;
    letter-spacing: 1px;
    padding: 2px 4px;
  }

  .marker-arrow {
    border-left-width: 5px;
    border-right-width: 5px;
    border-top-width: 6px;
  }
}

@media print {
  .program-timeline {
    display: none;
  }
}

/* ===== STICKY NAVIGATION ===== */
.week-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: padding 0.3s ease;
}

.nav-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.week-nav button {
  padding: 10px 18px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-medium);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.week-nav button:hover {
  border-color: var(--primary-purple);
  color: var(--text-bright);
}

.week-nav button.active {
  background: var(--primary-purple);
  border-color: var(--primary-purple);
  color: var(--text-bright);
}

/* Week completion indicators */
.week-nav button.week-complete {
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.15);
}

.week-nav button.week-complete:hover {
  background: rgba(74, 222, 128, 0.25);
  border-color: #4ade80;
}

.week-nav button.week-complete.active {
  background: #4ade80;
  border-color: #4ade80;
  color: white;
}

.week-nav button.week-in-progress {
  border-color: var(--primary-purple);
  background: rgba(155, 123, 184, 0.1);
}

.week-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #4ade80;
  color: white;
  border-radius: 50%;
  font-size: 10px;
  font-weight: bold;
  margin-right: 6px;
}

.week-nav button.week-complete.active .week-check {
  background: white;
  color: #4ade80;
}

.week-progress-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: conic-gradient(
    var(--primary-purple) var(--progress),
    rgba(155, 123, 184, 0.3) var(--progress)
  );
  box-shadow: 0 0 4px rgba(155, 123, 184, 0.5);
}

/* Button text - full by default, compact when sticky */
.week-nav .btn-compact {
  display: none;
}

.week-nav .btn-full {
  display: inline;
}

/* Compact mode when sticky */
.week-nav.nav-sticky {
  padding: 10px 15px;
  gap: 6px;
}

.week-nav.nav-sticky .nav-buttons {
  gap: 4px;
}

.week-nav.nav-sticky button {
  padding: 8px 12px;
  font-size: 11px;
}

.week-nav.nav-sticky .btn-compact {
  display: inline;
}

.week-nav.nav-sticky .btn-full {
  display: none;
}

/* ===== INTEGRATED NAV PROGRESS ===== */
.nav-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(155, 123, 184, 0.15);
  border: 1px solid var(--border-highlight);
  border-radius: 20px;
  margin-left: 8px;
  transition: all 0.3s ease;
}

.nav-progress.hidden {
  display: none;
}

.nav-progress-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-pink);
  white-space: nowrap;
}

.nav-progress-bar {
  width: 60px;
  height: 5px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
}

.nav-progress-fill {
  height: 100%;
  background: var(--primary-purple);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.nav-progress-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-medium);
  white-space: nowrap;
}

.nav-progress.complete {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.4);
}

.nav-progress.complete .nav-progress-fill {
  background: #4ade80;
}

.nav-progress.complete .nav-progress-label,
.nav-progress.complete .nav-progress-text {
  color: #4ade80;
}

/* ===== NAV MENU BUTTON ===== */
.nav-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 6px;
}

.nav-menu-btn:hover {
  background: var(--primary-purple);
  border-color: var(--primary-purple);
  color: white;
}

/* ===== EXERCISE MENU MODAL ===== */
.exercise-menu-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.exercise-menu-modal.hidden {
  display: none;
}

.exercise-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.exercise-menu-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 80vh;
  background: var(--bg-card);
  border: 1px solid var(--border-highlight);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.exercise-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(155, 123, 184, 0.2) 0%, rgba(155, 123, 184, 0.1) 100%);
  border-bottom: 1px solid var(--border-color);
}

.exercise-menu-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-title-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-bright);
}

.menu-title-day {
  font-size: 12px;
  color: var(--accent-pink);
}

.exercise-menu-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.exercise-menu-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-bright);
}

.exercise-menu-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.exercise-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  margin-bottom: 4px;
}

.exercise-menu-item:hover {
  background: rgba(155, 123, 184, 0.15);
  border-color: var(--border-color);
}

.exercise-menu-item.complete {
  opacity: 0.75;
}

.exercise-menu-item.complete:hover {
  opacity: 1;
}

.menu-item-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg-input);
  border: 2px solid var(--border-color);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  flex-shrink: 0;
}

.exercise-menu-item.complete .menu-item-check {
  background: #4ade80;
  border-color: #4ade80;
  color: white;
  font-size: 14px;
}

.menu-item-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.menu-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-bright);
}

.menu-item-subtitle {
  font-size: 12px;
  color: var(--text-dim);
}

.exercise-menu-item.complete .menu-item-name {
  color: var(--text-medium);
}

.exercise-menu-item.complete .menu-item-subtitle {
  color: #4ade80;
}

.menu-item-arrow {
  color: var(--text-faint);
  font-size: 16px;
  transition: transform 0.2s ease;
}

.exercise-menu-item:hover .menu-item-arrow {
  color: var(--primary-purple);
  transform: translateX(4px);
}

/* Highlight animation for jumped-to exercises */
@keyframes highlightPulse {
  0% { box-shadow: 0 0 0 0 rgba(155, 123, 184, 0.7); }
  50% { box-shadow: 0 0 0 8px rgba(155, 123, 184, 0); }
  100% { box-shadow: 0 0 0 0 rgba(155, 123, 184, 0); }
}

.exercise-row.highlight-jump {
  animation: highlightPulse 1s ease 2;
  background: rgba(155, 123, 184, 0.15) !important;
}

.exercise-row.exercise-collapsed.highlight-jump {
  animation: highlightPulse 1s ease 2;
}

/* ===== PROGRAM CONTAINER ===== */
.program-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* ===== WEEK SECTIONS ===== */
.week-section {
  background: var(--bg-card);
  margin: 40px 0;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.week-header {
  padding: 50px 30px;
  text-align: center;
  position: relative;
  background: linear-gradient(135deg, var(--bg-card-alt) 0%, var(--bg-card) 100%);
  border-bottom: 1px solid var(--border-color);
}

.week-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, var(--accent-pink-dim) 0%, transparent 70%);
  opacity: 0.1;
}

.week-header-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
  position: relative;
}

.week-header-number {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(3rem, 10vw, 5rem);
  color: var(--accent-pink);
  font-weight: 700;
  position: relative;
}

.page-style-indicator {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--text-faint);
  text-transform: uppercase;
}

/* ===== WORKOUT DAYS ===== */
.workout-day {
  padding: 30px;
  border-top: 1px solid var(--border-color);
}

.workout-day:first-of-type {
  border-top: none;
}

.workout-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  flex-wrap: wrap;
  gap: 15px;
}

.workout-day-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bg-dark);
  background: var(--accent-pink);
  padding: 8px 16px;
}

.focus-area {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--primary-purple);
}

/* ===== EXERCISE TABLES ===== */
.table-wrapper {
  overflow-x: auto;
  margin: 0 -10px;
  padding: 0 10px;
}

.exercise-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 900px;
}

.exercise-table thead {
  background: var(--bg-card-alt);
}

.exercise-table th {
  padding: 14px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.exercise-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
  color: var(--text-medium);
}

.exercise-table tbody tr {
  transition: background 0.2s ease;
  animation: rowFadeIn 0.2s ease-out;
}

@keyframes rowFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.exercise-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.exercise-table tbody tr:hover {
  background: rgba(155, 123, 184, 0.1);
}

.exercise-name {
  font-weight: 500;
  color: var(--text-bright);
  min-width: 200px;
}

.set-inputs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.set-rep-input {
  width: 44px;
  height: 36px;
  border: 2px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-medium);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition: all 0.2s ease;
  border-radius: 4px;
}

.set-rep-input:focus {
  outline: none;
  border-color: var(--primary-purple);
  color: var(--text-bright);
}

.set-rep-input::placeholder {
  color: var(--text-faint);
  font-size: 12px;
}

.set-rep-input.filled {
  background: var(--primary-purple);
  border-color: var(--primary-purple);
  color: white;
}

.set-rep-input.filled:focus {
  background: rgba(155, 123, 184, 0.8);
}

.notes-cell {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  max-width: 150px;
}

.alternative-cell {
  font-size: 12px;
  color: var(--text-dim);
  max-width: 180px;
}

.weight-input {
  width: 70px;
  padding: 8px 10px;
  border: 2px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-bright);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  transition: all 0.2s ease;
  border-radius: 4px;
}

.weight-input:focus {
  outline: none;
  border-color: var(--primary-purple);
}

.weight-input::placeholder {
  color: var(--text-faint);
}

.weight-input.required {
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(251, 191, 36, 0.1);
}

.weight-input.required:focus {
  border-color: var(--primary-purple);
  background: var(--bg-input);
}

.weight-input.filled {
  border-color: var(--primary-purple);
  background: rgba(155, 123, 184, 0.15);
}

/* "Last time" weight hint */
.last-weight-hint {
  display: block;
  font-size: 11px;
  color: rgba(155, 123, 184, 0.7);
  margin-top: 4px;
  text-align: center;
  cursor: help;
  transition: color 0.2s ease;
}

.last-weight-hint:hover {
  color: var(--primary-purple);
}

/* Ensure weight cell can stack the input and hint */
.exercise-weight {
  position: relative;
}

/* ===== EXERCISE SWAP ===== */
.swap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  font-size: 12px;
  color: rgba(155, 123, 184, 0.6);
  background: rgba(155, 123, 184, 0.1);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  vertical-align: middle;
}

.swap-btn:hover {
  color: var(--primary-purple);
  background: rgba(155, 123, 184, 0.2);
  transform: scale(1.1);
}

.swap-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #4CAF50;
  background: rgba(76, 175, 80, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  cursor: help;
}

/* Swap Modal */
.swap-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.swap-modal.hidden {
  display: none;
}

.swap-modal-content {
  background: var(--bg-card);
  border: 1px solid rgba(155, 123, 184, 0.3);
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  overflow: hidden;
}

.swap-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(155, 123, 184, 0.2);
}

.swap-modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: white;
}

.swap-modal-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.swap-modal-close:hover {
  color: white;
}

.swap-modal-body {
  padding: 20px;
}

.swap-current {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.8);
}

.swap-current strong {
  color: var(--primary-purple);
}

.swap-label {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.swap-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.swap-option-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(155, 123, 184, 0.1);
  border: 1px solid rgba(155, 123, 184, 0.2);
  border-radius: 8px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.swap-option-btn:hover {
  background: rgba(155, 123, 184, 0.2);
  border-color: var(--primary-purple);
}

.swap-option-name {
  font-size: 14px;
}

.swap-option-arrow {
  color: var(--primary-purple);
  font-size: 16px;
}

.swap-modal-footer {
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
  border-top: 1px solid rgba(155, 123, 184, 0.2);
  gap: 12px;
}

.swap-reset-btn,
.swap-cancel-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.swap-reset-btn {
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.3);
  color: #4CAF50;
}

.swap-reset-btn:hover {
  background: rgba(76, 175, 80, 0.25);
}

.swap-cancel-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  margin-left: auto;
}

.swap-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ===== USER NOTES ===== */
.notes-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  font-size: 12px;
  color: rgba(155, 123, 184, 0.5);
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  vertical-align: middle;
}

.notes-btn:hover {
  color: var(--primary-purple);
  background: rgba(155, 123, 184, 0.15);
}

.notes-btn.has-note {
  color: var(--accent-pink);
  background: rgba(212, 165, 201, 0.15);
}

.user-notes-row {
  background: rgba(155, 123, 184, 0.05);
}

.user-notes-row.hidden {
  display: none;
}

.user-notes-container {
  padding: 16px 20px;
}

.user-notes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.user-notes-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-purple);
}

.user-notes-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.user-notes-close:hover {
  color: white;
}

.user-notes-textarea {
  width: 100%;
  min-height: 60px;
  padding: 12px;
  background: var(--bg-input);
  border: 1px solid rgba(155, 123, 184, 0.2);
  border-radius: 8px;
  color: white;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.user-notes-textarea:focus {
  outline: none;
  border-color: var(--primary-purple);
}

.user-notes-textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.previous-note {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  border-left: 3px solid rgba(155, 123, 184, 0.4);
}

.previous-note-label {
  color: rgba(155, 123, 184, 0.8);
  font-weight: 500;
}

/* ===== REST TIMER ===== */
.rest-timer {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid rgba(155, 123, 184, 0.3);
  border-radius: 16px;
  padding: 16px 24px;
  z-index: 9000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  min-width: 280px;
  animation: restTimerSlideUp 0.3s ease;
}

@keyframes restTimerSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.rest-timer.hidden {
  display: none;
}

.rest-timer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.rest-timer-icon {
  font-size: 20px;
}

.rest-timer-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1px;
}

.rest-timer-time {
  font-size: 32px;
  font-weight: 700;
  color: white;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  margin-left: auto;
}

.rest-timer-toggle {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--primary-purple);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.rest-timer-toggle:hover {
  opacity: 1;
}

.rest-timer-toggle.disabled {
  color: rgba(255, 255, 255, 0.3);
}

.rest-timer-toggle svg {
  width: 20px;
  height: 20px;
}

.rest-timer-progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}

.rest-timer-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-purple), var(--accent-pink));
  border-radius: 3px;
  transition: width 0.3s linear;
}

.rest-timer-controls {
  display: flex;
  gap: 8px;
}

.rest-timer-btn {
  flex: 1;
  padding: 8px 12px;
  background: rgba(155, 123, 184, 0.15);
  border: 1px solid rgba(155, 123, 184, 0.3);
  border-radius: 8px;
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rest-timer-btn:hover {
  background: rgba(155, 123, 184, 0.25);
}

.rest-timer-btn.skip {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.rest-timer-btn.skip:hover {
  background: rgba(255, 255, 255, 0.15);
}

.rest-timer-complete {
  animation: timerPulse 0.5s ease infinite;
}

@keyframes timerPulse {
  0%, 100% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow: 0 8px 32px rgba(155, 123, 184, 0.6);
  }
}

/* ===== WEIGHT SUGGESTION HINT ===== */
.weight-suggestion {
  display: inline;
  color: rgba(76, 175, 80, 0.9);
  margin-left: 6px;
  cursor: help;
}

.weight-suggestion.increase {
  color: rgba(76, 175, 80, 0.9);
}

.weight-suggestion.maintain {
  color: rgba(251, 191, 36, 0.8);
}

.weight-suggestion.decrease {
  color: rgba(255, 152, 0, 0.9);
}

/* ===== INLINE RPE TOGGLE ===== */
.inline-rpe {
  display: flex;
  gap: 4px;
  align-items: center;
}

.inline-rpe-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid;
  background: transparent;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Easy - Green */
.inline-rpe-btn.rpe-easy {
  border-color: rgba(76, 175, 80, 0.4);
  color: rgba(76, 175, 80, 0.6);
}

.inline-rpe-btn.rpe-easy:hover {
  border-color: #4CAF50;
  color: #4CAF50;
  background: rgba(76, 175, 80, 0.1);
}

.inline-rpe-btn.rpe-easy.selected {
  background: #4CAF50;
  border-color: #4CAF50;
  color: #fff;
}

/* Moderate - Yellow */
.inline-rpe-btn.rpe-moderate {
  border-color: rgba(251, 191, 36, 0.4);
  color: rgba(251, 191, 36, 0.6);
}

.inline-rpe-btn.rpe-moderate:hover {
  border-color: #FBB724;
  color: #FBB724;
  background: rgba(251, 191, 36, 0.1);
}

.inline-rpe-btn.rpe-moderate.selected {
  background: #FBB724;
  border-color: #FBB724;
  color: #000;
}

/* Hard - Orange */
.inline-rpe-btn.rpe-hard {
  border-color: rgba(255, 152, 0, 0.4);
  color: rgba(255, 152, 0, 0.6);
}

.inline-rpe-btn.rpe-hard:hover {
  border-color: #FF9800;
  color: #FF9800;
  background: rgba(255, 152, 0, 0.1);
}

.inline-rpe-btn.rpe-hard.selected {
  background: #FF9800;
  border-color: #FF9800;
  color: #fff;
}

/* Failed - Red */
.inline-rpe-btn.rpe-failed {
  border-color: rgba(244, 67, 54, 0.4);
  color: rgba(244, 67, 54, 0.6);
}

.inline-rpe-btn.rpe-failed:hover {
  border-color: #F44336;
  color: #F44336;
  background: rgba(244, 67, 54, 0.1);
}

.inline-rpe-btn.rpe-failed.selected {
  background: #F44336;
  border-color: #F44336;
  color: #fff;
}

/* Dim non-selected buttons when one is selected */
.inline-rpe.has-selection .inline-rpe-btn:not(.selected) {
  opacity: 0.4;
}

.inline-rpe.has-selection .inline-rpe-btn:not(.selected):hover {
  opacity: 0.8;
}

/* Pulse animation for completion prompt */
@keyframes rpePulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(155, 123, 184, 0.5); }
  50% { transform: scale(1.1); box-shadow: 0 0 8px 4px rgba(155, 123, 184, 0.3); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(155, 123, 184, 0); }
}

.inline-rpe-pulse .inline-rpe-btn {
  animation: rpePulse 0.6s ease-out;
}

/* RPE Label with Help - clickable wrapper */
.rpe-label-help {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: help;
  position: relative;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.rpe-label-help:hover,
.rpe-label-help:focus {
  background: rgba(155, 123, 184, 0.1);
  outline: none;
}

/* Small ? icon next to RPE label */
.rpe-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 9px;
  font-weight: 600;
  color: rgba(155, 123, 184, 0.6);
  border: 1px solid rgba(155, 123, 184, 0.4);
  border-radius: 50%;
  transition: all 0.2s ease;
}

.rpe-label-help:hover .rpe-help-icon,
.rpe-label-help:focus .rpe-help-icon {
  color: var(--primary-purple);
  border-color: var(--primary-purple);
}

/* RPE Help Tooltip */
.rpe-label-help::after {
  content: 'Rate how hard each exercise felt:\A\A E = Easy (4+ more reps)\A M = Moderate (2-3 more)\A H = Hard (0-1 more)\A F = Failed (didn\'t finish)\A\AHelps suggest when to increase weight!';
  white-space: pre-wrap;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  padding: 10px 12px;
  background: var(--bg-card);
  color: var(--text-bright);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  z-index: 100;
}

/* Tooltip arrow */
.rpe-label-help::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border-color);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  z-index: 100;
}

/* Show tooltip on hover/focus */
.rpe-label-help:hover::after,
.rpe-label-help:hover::before,
.rpe-label-help:focus::after,
.rpe-label-help:focus::before {
  opacity: 1;
  visibility: visible;
}

/* RPE Help Icon - inline with buttons */
.rpe-help-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(155, 123, 184, 0.5);
  border: 1px solid rgba(155, 123, 184, 0.3);
  border-radius: 50%;
  cursor: help;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.rpe-help-inline:hover,
.rpe-help-inline:focus {
  color: var(--primary-purple);
  border-color: var(--primary-purple);
  background: rgba(155, 123, 184, 0.15);
  outline: none;
}

/* Inline help tooltip */
.rpe-help-inline::after {
  content: 'Rate how hard each exercise felt:\A\A E = Easy (4+ more reps)\A M = Moderate (2-3 more)\A H = Hard (0-1 more)\A F = Failed (didn\'t finish)\A\AHelps suggest when to increase weight!';
  white-space: pre-wrap;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  padding: 10px 12px;
  background: var(--bg-card);
  color: var(--text-bright);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  z-index: 100;
}

.rpe-help-inline::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border-color);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  z-index: 100;
}

.rpe-help-inline:hover::after,
.rpe-help-inline:hover::before,
.rpe-help-inline:focus::after,
.rpe-help-inline:focus::before {
  opacity: 1;
  visibility: visible;
}

/* Desktop - RPE below rep inputs in tracking cell */
.tracking-rpe-desktop {
  margin-top: 6px;
  display: flex;
  justify-content: center;
}

/* Mobile - hide desktop RPE, use separate row instead */
@media (max-width: 768px) {
  .tracking-rpe-desktop {
    display: none;
  }

  .inline-rpe {
    gap: 6px;
  }

  .inline-rpe-btn {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .rpe-label-help::after,
  .rpe-help-inline::after {
    width: 180px;
    font-size: 10px;
    padding: 8px 10px;
    left: 0;
    transform: none;
  }

  .rpe-label-help::before,
  .rpe-help-inline::before {
    left: 10px;
    transform: none;
  }

  .rpe-help-inline {
    width: 20px;
    height: 20px;
    font-size: 11px;
    margin-right: 8px;
  }
}

/* Print - hide inline RPE */
@media print {
  .inline-rpe,
  .tracking-rpe-desktop,
  .rpe-help-icon,
  .rpe-help-inline {
    display: none !important;
  }
}

/* ===== CARDIO SECTION ===== */
.cardio-day {
  background: var(--bg-card);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(155, 123, 184, 0.15);
}

.cardio-header {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.05) 100%);
  border-bottom: 1px solid rgba(76, 175, 80, 0.2);
}

.cardio-header .focus-area {
  color: #4CAF50;
}

.cardio-section {
  padding: 20px;
}

.cardio-table {
  width: 100%;
  border-collapse: collapse;
}

.cardio-table th,
.cardio-table td {
  padding: 12px 15px;
  text-align: left;
  border: 1px solid var(--border-color);
  font-size: 12px;
}

.cardio-table th {
  background: var(--bg-input);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-size: 10px;
}

.cardio-table td {
  background: var(--bg-card);
}

.cardio-input {
  width: 100%;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--text-bright);
  font-family: inherit;
  font-size: 12px;
}

.cardio-input:focus {
  outline: none;
}

.cardio-input::placeholder {
  color: var(--text-faint);
}

/* Cardio Guidelines */
.cardio-guidelines {
  margin-top: 15px;
  border-radius: 8px;
  background: rgba(155, 123, 184, 0.05);
  border: 1px solid rgba(155, 123, 184, 0.15);
}

.cardio-guidelines summary {
  padding: 10px 15px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-purple);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cardio-guidelines summary::-webkit-details-marker {
  display: none;
}

.cardio-guidelines summary::before {
  content: "▸";
  transition: transform 0.2s ease;
}

.cardio-guidelines[open] summary::before {
  transform: rotate(90deg);
}

.cardio-guidelines-content {
  padding: 0 15px 15px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.cardio-guidelines-content p {
  margin: 0 0 8px;
}

.cardio-guidelines-content p:last-child {
  margin-bottom: 0;
}

.cardio-guidelines-content strong {
  color: var(--text-bright);
}

.cardio-options {
  color: var(--text-dim);
}

.cardio-tips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.cardio-tips .tip {
  display: inline-block;
  padding: 5px 10px;
  background: rgba(155, 123, 184, 0.1);
  border-radius: 4px;
  font-size: 11px;
}

/* ===== EXERCISE VIDEOS ===== */

/* Video indicator on exercise name */
.video-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  font-size: 10px;
  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--accent-pink) 100%);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: videoPulse 2s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(155, 123, 184, 0.4);
}

@keyframes videoPulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(155, 123, 184, 0.4);
  }
  50% {
    box-shadow: 0 2px 16px rgba(212, 165, 201, 0.6);
  }
}

.video-indicator:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 16px rgba(155, 123, 184, 0.6);
  animation: none;
}

/* Tooltip on hover */
.video-indicator::after {
  content: 'Watch form video';
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--bg-card);
  color: var(--text-bright);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  z-index: 100;
}

.video-indicator::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border-color);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  z-index: 100;
}

.video-indicator:hover::after,
.video-indicator:hover::before {
  opacity: 1;
  visibility: visible;
}

/* ===== VIDEO LOADING INDICATOR ===== */
.video-loading-indicator {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: var(--text-dim);
  font-size: 13px;
  letter-spacing: 1px;
}

.video-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-purple);
  border-radius: 50%;
  animation: videoSpin 0.8s linear infinite;
}

@keyframes videoSpin {
  to { transform: rotate(360deg); }
}

/* Show loading indicator while video is loading */
.video-loading .video-loading-indicator {
  display: flex;
}

.video-loading video {
  display: none;
}

/* Hide loading indicator once video is loaded */
.video-loaded .video-loading-indicator {
  display: none;
}

.video-loaded video {
  display: block;
}

/* Desktop: Video row hidden by default */
.exercise-video-row {
  display: none;
}

@media (min-width: 901px) {
  .exercise-video-row.video-active {
    display: table-row;
    animation: videoExpand 0.2s ease-out;
  }

  @keyframes videoExpand {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .exercise-video-row td {
    padding: 0;
    border-bottom: 1px solid var(--border-color);
  }

  .exercise-video-desktop {
    padding: 20px;
    background: var(--bg-card-alt);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .exercise-video-desktop video {
    width: 80%;
    max-width: 400px;
    height: auto;
    border-radius: 4px;
  }

  /* Hide mobile overlay on desktop */
  .exercise-video-overlay {
    display: none !important;
  }
}

/* Mobile: Video overlay styles */
.exercise-video-overlay {
  display: none;
}

.video-close-btn {
  display: none;
}

/* ===== FLOATING UI (scroll-aware) ===== */
/* All floating UI elements start hidden and appear after scrolling past hero */
.floating-ui {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.floating-ui.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ===== FIXED SOCIAL LINK ===== */
.fixed-social {
  position: fixed;
  bottom: 30px;
  left: 30px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-dim);
  z-index: 1000;
}

.fixed-social svg {
  width: 18px;
  height: 18px;
}

.fixed-social:hover {
  background: var(--primary-purple);
  border-color: var(--primary-purple);
  color: white;
  transform: scale(1.1);
}

/* ===== PRINT BUTTON ===== */
.print-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  background: rgba(155, 123, 184, 0.15);
  border: 1px solid rgba(155, 123, 184, 0.3);
  border-radius: 50%;
  color: var(--primary-purple);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1000;
}

.print-btn svg {
  width: 20px;
  height: 20px;
}

.print-btn:hover {
  background: rgba(155, 123, 184, 0.3);
  border-color: var(--primary-purple);
  transform: scale(1.05);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .corner-ui, .deco-line {
    display: none;
  }

  .hero-content {
    padding: 20px;
  }

  .hero-chips {
    flex-direction: column;
    gap: 8px;
  }

  .hero-chip {
    font-size: 11px;
    padding: 10px 18px;
    letter-spacing: 1px;
  }

  .video-container video {
    animation: none;
    transform: scale(1);
  }

  .program-container {
    padding: 20px 10px;
  }

  .workout-day {
    padding: 20px 15px;
  }

  .week-header {
    padding: 30px 20px;
  }
}

/* ===== MOBILE CARD LAYOUT ===== */
@media (max-width: 900px) {
  .table-wrapper {
    overflow-x: visible;
    margin: 0;
    padding: 0;
  }

  .exercise-table {
    min-width: 0;
    display: block;
  }

  .exercise-table thead {
    display: none;
  }

  .exercise-table tbody {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .exercise-table tr.exercise-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name name"
      "sets reps"
      "rest weight"
      "tracking tracking"
      "rpe rpe"
      "notes notes"
      "alt alt";
    gap: 0;
    background: var(--bg-card-alt);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0;
    overflow: hidden;
  }

  .exercise-table tr.exercise-row:nth-child(even) {
    background: var(--bg-card-alt);
  }

  .exercise-table tr.exercise-row:hover {
    background: var(--bg-card-alt);
  }

  .exercise-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .exercise-table td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-right: 12px;
  }

  /* Exercise name - full width header */
  .exercise-table td.exercise-name {
    grid-area: name;
    background: linear-gradient(135deg, var(--primary-purple) 0%, rgba(155, 123, 184, 0.8) 100%);
    color: white;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 16px;
    justify-content: flex-start;
  }

  .exercise-table td.exercise-name::before {
    display: none;
  }

  /* Stats cells */
  .exercise-table td.exercise-sets {
    grid-area: sets;
    border-right: 1px solid var(--border-color);
  }

  .exercise-table td.exercise-reps {
    grid-area: reps;
  }

  .exercise-table td.exercise-rest {
    grid-area: rest;
    border-right: 1px solid var(--border-color);
  }

  .exercise-table td.exercise-weight {
    grid-area: weight;
  }

  .exercise-table td.exercise-weight .weight-input {
    width: 80px;
  }

  .exercise-table td.exercise-weight .last-weight-hint {
    font-size: 10px;
    margin-top: 2px;
  }

  /* Tracking checkboxes - full width */
  .exercise-table td.exercise-tracking {
    grid-area: tracking;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .exercise-table td.exercise-tracking::before {
    margin-right: 0;
    margin-bottom: 4px;
  }

  .exercise-table td.exercise-tracking .set-inputs {
    width: 100%;
    justify-content: flex-start;
  }

  /* RPE rating */
  .exercise-table td.exercise-rpe {
    grid-area: rpe;
    justify-content: flex-start;
  }

  .exercise-table td.exercise-rpe .inline-rpe {
    gap: 8px;
  }

  /* Notes and alternative */
  .exercise-table td.notes-cell {
    grid-area: notes;
    max-width: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .exercise-table td.notes-cell::before {
    margin-right: 0;
  }

  .exercise-table td.alternative-cell {
    grid-area: alt;
    max-width: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .exercise-table td.alternative-cell::before {
    margin-right: 0;
  }

  /* Cardio table responsive */
  .cardio-section {
    padding: 15px;
  }

  .cardio-table,
  .cardio-table thead,
  .cardio-table tbody,
  .cardio-table tr,
  .cardio-table th,
  .cardio-table td {
    display: block;
    width: 100%;
  }

  .cardio-table thead tr {
    display: none;
  }

  .cardio-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--border-color);
  }

  .cardio-table td:first-child::before { content: "Type"; }
  .cardio-table td:nth-child(2)::before { content: "Duration"; }
  .cardio-table td:last-child::before { content: "Notes"; }

  .cardio-table td::before {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .cardio-table td:last-child {
    border-bottom: none;
  }

  .cardio-input {
    text-align: right;
    width: auto;
    flex: 1;
    max-width: 150px;
  }

  /* Mobile: Show video row for fullscreen overlay */
  .exercise-video-row {
    display: none;
  }

  .exercise-video-row.video-active {
    display: table-row;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
  }

  .exercise-video-row.video-active td {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    padding: 20px;
  }

  /* Hide desktop video container on mobile */
  .exercise-video-desktop {
    display: none !important;
  }

  /* Show mobile overlay when active */
  .exercise-video-overlay {
    display: none;
  }

  .exercise-video-row.video-active .exercise-video-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .exercise-video-row.video-active .exercise-video-overlay video {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
  }

  /* Mobile loading indicator styling */
  .exercise-video-row.video-active .exercise-video-overlay.video-loading {
    background: transparent;
  }

  .exercise-video-row.video-active .exercise-video-overlay .video-loading-indicator {
    color: rgba(255, 255, 255, 0.7);
  }

  .exercise-video-row.video-active .exercise-video-overlay .video-spinner {
    width: 50px;
    height: 50px;
    border-width: 4px;
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent-pink);
  }

  .video-close-btn {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: var(--primary-purple);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 10000;
  }

  .exercise-video-row.video-active .video-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Video indicator larger tap target on mobile */
  .video-indicator {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  /* Hide tooltip on mobile - not useful for touch */
  .video-indicator::after,
  .video-indicator::before {
    display: none;
  }

  /* Mobile: Swap and Notes buttons */
  .swap-btn,
  .notes-btn {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .swap-btn {
    color: var(--primary-purple);
    background: rgba(155, 123, 184, 0.35);
    border: 1px solid rgba(155, 123, 184, 0.4);
  }

  /* Mobile: User notes row */
  .user-notes-row {
    display: none;
  }

  .user-notes-row:not(.hidden) {
    display: table-row;
  }

  .user-notes-container {
    padding: 12px 16px;
  }

  .user-notes-textarea {
    min-height: 80px;
  }

  /* Mobile: Rest timer */
  .rest-timer {
    bottom: 80px;
    left: 10px;
    right: 10px;
    transform: none;
    min-width: auto;
    padding: 14px 18px;
  }

  @keyframes restTimerSlideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .rest-timer-time {
    font-size: 28px;
  }

  /* Prevent body scroll when video is open */
  body.video-overlay-active {
    overflow: hidden;
  }

  /* Video error retry button - mobile */
  .video-retry-btn {
    padding: 12px 28px;
    font-size: 15px;
  }
}

/* Video error state - hide loading indicator */
.video-error .video-loading-indicator {
  display: none;
}

/* Video error "unavailable" text position adjusted for retry button */
.exercise-video-overlay.video-error::before,
.exercise-video-desktop.video-error::before {
  content: 'Video unavailable';
  position: absolute;
  top: calc(50% - 20px);
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.exercise-video-desktop.video-error {
  position: relative;
  min-height: 120px;
  background: rgba(0, 0, 0, 0.3);
}

/* Video retry button */
.video-retry-btn {
  position: absolute;
  top: calc(50% + 15px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 20px;
  background: rgba(155, 123, 184, 0.3);
  border: 1px solid rgba(155, 123, 184, 0.5);
  border-radius: 4px;
  color: var(--text-medium);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.video-retry-btn:hover {
  background: rgba(155, 123, 184, 0.5);
  color: var(--text-bright);
}

.video-retry-btn:focus {
  outline: 2px solid var(--primary-purple);
  outline-offset: 2px;
}

/* ===== DAY PROGRESS (inline in header) ===== */
.day-progress-inline {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  background: rgba(155, 123, 184, 0.2);
  border: 1px solid rgba(155, 123, 184, 0.3);
  border-radius: 12px;
  color: var(--text-medium);
  margin-left: auto;
}

.day-progress-inline.complete {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.4);
  color: #4ade80;
}


/* ===== COMPLETED EXERCISE STYLING ===== */
.exercise-row.exercise-complete {
  background: rgba(74, 222, 128, 0.05) !important;
}

.exercise-row.exercise-complete .exercise-name {
  border-left: 3px solid #4ade80;
}

/* ===== COLLAPSE BUTTON ===== */
.exercise-name-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 10px;
  color: var(--text-dim);
  background: var(--bg-input);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 4px;
}

.collapse-btn:hover {
  background: var(--primary-purple);
  color: white;
}

/* Mobile-only elements hidden on desktop */
.mobile-only {
  display: none;
}

/* Collapse cell for completed exercises (mobile only) */
.collapse-cell {
  display: none;
}

.expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 10px;
  color: var(--text-dim);
  background: var(--bg-input);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 4px;
}

.expand-btn:hover {
  background: var(--primary-purple);
  color: white;
}

/* ===== COLLAPSED EXERCISE ROW ===== */
.exercise-row.exercise-collapsed {
  cursor: pointer;
  transition: background 0.2s ease;
  animation: collapseIn 0.2s ease-out;
}

@keyframes collapseIn {
  from {
    opacity: 0.7;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.exercise-row.exercise-collapsed:hover {
  background: rgba(74, 222, 128, 0.1) !important;
}

/* Desktop: ensure collapsed row spans full width properly */
.exercise-row.exercise-collapsed td {
  width: 100%;
}

.exercise-name-collapsed {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px !important;
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.15) 0%, rgba(74, 222, 128, 0.05) 100%) !important;
  border-left: 3px solid #4ade80;
  min-width: 0; /* Override .exercise-name min-width */
  width: 100%;
}

.collapse-checkmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #4ade80;
  color: white;
  border-radius: 50%;
  font-weight: bold;
  font-size: 14px;
  flex-shrink: 0;
}

.collapsed-exercise-name {
  font-weight: 600;
  color: var(--text-bright);
}

.collapsed-summary {
  font-size: 12px;
  color: var(--text-medium);
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.expand-hint {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-left: auto;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease;
}

.exercise-row.exercise-collapsed:hover .expand-hint {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

/* ===== EXERCISE HISTORY BADGES ===== */
.exercise-history {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.history-badge {
  font-size: 10px;
  padding: 3px 8px;
  background: rgba(155, 123, 184, 0.2);
  border: 1px solid rgba(155, 123, 184, 0.3);
  border-radius: 12px;
  color: var(--accent-pink);
  white-space: nowrap;
  cursor: help;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-badge:hover {
  background: rgba(155, 123, 184, 0.3);
}

.history-badge.complete {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

.history-badge.complete:hover {
  background: rgba(74, 222, 128, 0.25);
}

/* ===== MOBILE ADJUSTMENTS FOR NEW FEATURES ===== */
@media (max-width: 900px) {
  .workout-day-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .day-progress-inline {
    margin-left: auto;
  }

  /* Mobile nav - always compact */
  .week-nav {
    padding: 10px 12px;
    gap: 6px;
  }

  .week-nav .nav-buttons {
    gap: 4px;
  }

  .week-nav button {
    padding: 8px 10px;
    font-size: 11px;
  }

  .week-nav .btn-compact {
    display: inline;
  }

  .week-nav .btn-full {
    display: none;
  }

  /* Nav progress on mobile */
  .nav-progress {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
    justify-content: center;
    order: 10;
  }

  .nav-progress-bar {
    width: 80px;
  }

  /* Exercise menu modal on mobile */
  .exercise-menu-modal {
    padding: 0;
    align-items: flex-end;
  }

  .exercise-menu-panel {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
  }

  .exercise-menu-list {
    padding-bottom: 20px;
  }

  .menu-item-name {
    white-space: normal;
  }

  /* Collapsed row mobile styling */
  .exercise-row.exercise-collapsed {
    display: flex !important;
    flex-direction: column;
  }

  .exercise-name-collapsed {
    flex-wrap: wrap;
    gap: 8px;
  }

  .collapsed-summary {
    order: 3;
    width: 100%;
    margin-top: 4px;
  }

  .expand-hint {
    order: 4;
    width: 100%;
    margin-left: 0;
    text-align: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
  }

  /* History badges on mobile */
  .exercise-history {
    margin-top: 8px;
  }

  .history-badge {
    font-size: 9px;
  }

  /* Exercise name wrapper on mobile */
  .exercise-name-wrapper {
    width: 100%;
  }

  .expand-btn {
    margin-left: auto;
  }

  /* Show mobile-only elements on mobile */
  .mobile-only {
    display: block;
  }

  /* Collapse cell for completed exercises */
  .collapse-cell.mobile-only {
    display: flex;
    grid-column: 1 / -1;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(74, 222, 128, 0.1) 100%);
    border-top: 1px solid rgba(74, 222, 128, 0.3);
    cursor: pointer;
  }

  .collapse-cell.mobile-only:active {
    background: rgba(74, 222, 128, 0.3);
  }

  .collapse-cell-btn {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #4ade80;
  }

  /* Rep inputs on mobile */
  .set-inputs {
    width: 100%;
    justify-content: flex-start;
  }

  .set-rep-input {
    width: 40px;
    height: 34px;
    font-size: 13px;
  }

  /* Weight input on mobile */
  .exercise-table td.exercise-weight .weight-input {
    width: 70px;
  }
}

/* ===== AUTH BUTTON ===== */
.auth-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: 25px;
  color: var(--text-medium);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;
}

.auth-btn:hover {
  background: var(--primary-purple);
  border-color: var(--primary-purple);
  color: white;
}

.auth-btn.hidden {
  display: none;
}

.auth-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-btn-icon svg {
  width: 16px;
  height: 16px;
}

/* ===== USER PROFILE ===== */
.user-profile {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: 25px;
  z-index: 1000;
}

.user-profile.hidden {
  display: none;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-purple);
}

.user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-bright);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.2s ease;
}

.user-menu-btn:hover {
  color: var(--text-bright);
}

.user-menu-btn svg {
  width: 16px;
  height: 16px;
}

.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.user-menu.hidden {
  display: none;
}

.user-menu-email {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: var(--text-medium);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-menu-item:hover {
  background: rgba(155, 123, 184, 0.2);
  color: var(--text-bright);
}

/* ===== AUTH MODAL ===== */
.auth-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-modal.hidden {
  display: none;
}

.auth-modal-content {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-highlight);
  max-width: 400px;
  width: 100%;
  animation: modalSlideIn 0.3s ease;
}

.auth-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-dim);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-bright);
}

.auth-modal-header {
  padding: 40px 30px 20px;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}

.auth-modal-header h2 {
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
  color: var(--accent-pink);
  margin-bottom: 8px;
}

.auth-modal-header p {
  font-size: 13px;
  color: var(--text-dim);
}

.auth-modal-body {
  padding: 30px;
}

/* ===== AUTH PROVIDER BUTTONS ===== */
.auth-provider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 12px;
}

.auth-provider-btn.google {
  background: white;
  color: #333;
}

.auth-provider-btn.google:hover {
  background: #f5f5f5;
  border-color: #4285F4;
}

.auth-provider-btn.github {
  background: #24292e;
  color: white;
  border-color: #24292e;
}

.auth-provider-btn.github:hover {
  background: #1a1e22;
}

.auth-provider-btn.facebook {
  background: #1877F2;
  color: white;
  border-color: #1877F2;
}

.auth-provider-btn.facebook:hover {
  background: #0d65d9;
}

/* ===== EMAIL AUTH FORM ===== */
.auth-email-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-email-form input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-light);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.auth-email-form input:focus {
  outline: none;
  border-color: var(--primary-purple);
}

.auth-email-form input::placeholder {
  color: var(--text-dim);
}

.auth-email-btn {
  width: 100%;
  padding: 12px 20px;
  background: var(--primary-purple);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.auth-email-btn:hover:not(:disabled) {
  background: #8a6aa7;
}

.auth-email-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.auth-email-hint {
  font-size: 13px;
  text-align: center;
  margin: 0;
  min-height: 20px;
}

/* ===== AUTH DIVIDER ===== */
.auth-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.auth-divider span {
  padding: 0 15px;
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ===== SETTINGS SECTION ===== */
.settings-section {
  margin-bottom: 8px;
}

.settings-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 12px 0;
}

.settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  user-select: none;
}

.settings-toggle:last-of-type {
  border-bottom: none;
}

.settings-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-label {
  font-size: 14px;
  color: var(--text-bright);
  flex: 1;
}

.toggle-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--text-dim);
  border-radius: 50%;
  transition: all 0.2s ease;
}

.settings-toggle input[type="checkbox"]:checked + .toggle-slider {
  background: var(--primary-purple);
  border-color: var(--primary-purple);
}

.settings-toggle input[type="checkbox"]:checked + .toggle-slider::after {
  left: 22px;
  background: white;
}

.settings-toggle:hover .toggle-slider {
  border-color: var(--primary-purple);
}

/* ===== GUEST BUTTON ===== */
.auth-guest-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-medium);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-guest-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--primary-purple);
  color: var(--text-bright);
}

.auth-note {
  margin-top: 20px;
  padding: 15px;
  background: rgba(155, 123, 184, 0.1);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.5;
}

/* ===== IMPORT MODAL ===== */
.import-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.import-modal.hidden {
  display: none;
}

.import-modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-highlight);
  max-width: 420px;
  width: 100%;
  animation: modalSlideIn 0.3s ease;
}

.import-modal-header {
  padding: 30px 30px 20px;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, rgba(155, 123, 184, 0.15) 0%, transparent 100%);
}

.import-modal-header h2 {
  font-size: 1.5rem;
  color: var(--text-bright);
  margin-bottom: 8px;
}

.import-modal-header p {
  font-size: 13px;
  color: var(--accent-pink);
}

.import-modal-body {
  padding: 25px 30px 30px;
}

.import-modal-body > p {
  font-size: 14px;
  color: var(--text-medium);
  margin-bottom: 25px;
  line-height: 1.6;
}

.import-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.import-btn {
  padding: 14px 20px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.import-btn.primary {
  background: var(--primary-purple);
  border: 1px solid var(--primary-purple);
  color: white;
}

.import-btn.primary:hover {
  background: var(--accent-pink);
  border-color: var(--accent-pink);
}

.import-btn.secondary {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-medium);
}

.import-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-dim);
}

/* ===== RESET PROGRESS MODAL ===== */
.reset-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.reset-modal.hidden {
  display: none;
}

.reset-modal-content {
  background: var(--bg-card);
  border: 1px solid rgba(220, 53, 69, 0.4);
  max-width: 420px;
  width: 100%;
  animation: modalSlideIn 0.3s ease;
}

.reset-modal-header {
  padding: 30px 30px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(220, 53, 69, 0.3);
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.15) 0%, transparent 100%);
}

.reset-warning-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 12px;
}

.reset-modal-header h2 {
  font-size: 1.5rem;
  color: var(--text-bright);
  margin-bottom: 8px;
}

.reset-modal-header p {
  font-size: 13px;
  color: rgba(220, 53, 69, 0.9);
}

.reset-modal-body {
  padding: 25px 30px;
}

.reset-description {
  font-size: 14px;
  color: var(--text-medium);
  margin-bottom: 16px;
}

.reset-delete-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.reset-delete-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.reset-delete-list li:last-child {
  border-bottom: none;
}

.delete-x {
  color: rgba(220, 53, 69, 0.8);
  font-weight: bold;
  font-size: 12px;
}

.reset-preserve-note {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  padding: 12px;
  background: rgba(155, 123, 184, 0.1);
  border-radius: 6px;
  margin: 0;
}

.reset-modal-actions {
  padding: 0 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reset-btn {
  padding: 14px 20px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reset-btn.danger {
  background: rgba(220, 53, 69, 0.9);
  border: 1px solid rgba(220, 53, 69, 0.9);
  color: white;
}

.reset-btn.danger:hover {
  background: #c82333;
  border-color: #c82333;
}

.reset-btn.secondary {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-medium);
}

.reset-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-dim);
}

/* User menu danger item */
.user-menu-item-danger {
  color: rgba(220, 53, 69, 0.9) !important;
}

.user-menu-item-danger:hover {
  background: rgba(220, 53, 69, 0.15) !important;
  color: #dc3545 !important;
}

@media print {
  .reset-modal {
    display: none !important;
  }
}

/* ===== MOBILE AUTH STYLES ===== */
@media (max-width: 768px) {
  .auth-btn {
    top: 15px;
    right: 15px;
    padding: 8px 14px;
  }

  .auth-btn-text {
    display: none;
  }

  .auth-btn-icon svg {
    width: 18px;
    height: 18px;
  }

  .user-profile {
    top: 15px;
    right: 15px;
    padding: 4px 10px 4px 4px;
  }

  .user-avatar {
    width: 28px;
    height: 28px;
  }

  .user-name {
    max-width: 80px;
    font-size: 12px;
  }

  .auth-modal-content {
    max-width: 100%;
  }

  .auth-modal-header {
    padding: 30px 20px 15px;
  }

  .auth-modal-body {
    padding: 20px;
  }
}

@media print {
  .auth-btn,
  .user-profile,
  .auth-modal,
  .import-modal {
    display: none !important;
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  body {
    background: white;
    color: black;
  }

  .hero, .hero-actions, .section-nav, .program-timeline, .week-nav, .print-btn, .fixed-social, .help-btn, .exercise-video-overlay, .exercise-video-desktop, .video-indicator, .nav-progress, .expand-btn, .expand-hint, .exercise-history, .last-weight-hint, .swap-btn, .swap-badge, .notes-btn, .user-notes-row, .rest-timer, .swap-modal {
    display: none !important;
  }

  .program-container {
    max-width: 100%;
    padding: 0;
  }

  .week-section {
    page-break-inside: avoid;
    box-shadow: none;
    margin: 20px 0;
    border: 1px solid #ccc;
    background: white;
  }

  .workout-day {
    page-break-inside: avoid;
  }

  .week-header {
    background: #f5f5f5 !important;
    padding: 20px;
  }

  .week-header-number {
    color: #9B7BB8;
  }

  .exercise-table th,
  .exercise-table td {
    padding: 8px 6px;
    font-size: 10pt;
    color: black;
  }

  .exercise-table thead {
    background: #f0f0f0;
  }

  .exercise-table tbody tr:nth-child(even) {
    background: #fafafa;
  }

  .set-rep-input {
    width: 30px;
    height: 22px;
    border: 1px solid #999;
    background: white;
    color: black;
    font-size: 10pt;
  }

  .set-rep-input.filled {
    background: #e0e0e0;
  }

  .weight-input {
    border: 1px solid #ccc;
    width: 50px;
    padding: 4px;
    background: white;
    color: black;
  }

  .weight-input.required,
  .weight-input.filled {
    background: white;
  }

  .workout-day-label {
    background: #9B7BB8;
    color: white;
  }

  .cardio-day {
    background: white;
    border: 1px solid #ddd;
  }

  .cardio-header {
    background: #f0f8f0;
    border-bottom: 1px solid #c8e6c9;
  }

  .cardio-header .focus-area {
    color: #2e7d32;
  }

  .cardio-section {
    background: #f5f5f5;
  }

  .cardio-table th {
    background: #e0e0e0;
  }

  .cardio-table td {
    background: white;
  }

  .cardio-guidelines {
    background: #f9f9f9;
    border: 1px solid #ddd;
  }

  .cardio-guidelines summary {
    color: #666;
  }

  .cardio-guidelines-content {
    color: #333;
  }

  .cardio-tips .tip {
    background: #eee;
    color: #333;
  }

  /* Show collapsed exercises properly in print */
  .exercise-row.exercise-collapsed .collapse-checkmark {
    display: inline-flex;
    background: #333;
    color: white;
  }

  .exercise-row.exercise-collapsed .collapsed-summary {
    background: #f0f0f0;
    color: #333;
  }

  @page {
    size: A4 landscape;
    margin: 10mm;
  }
}

/* ===== ONBOARDING MODAL ===== */
.onboarding-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.onboarding-modal.hidden {
  opacity: 0;
  pointer-events: none;
}

.onboarding-content {
  background: var(--bg-card, #111111);
  border: 1px solid rgba(155, 123, 184, 0.3);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideIn 0.4s ease;
}

.onboarding-header {
  padding: 30px 30px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(155, 123, 184, 0.15) 0%, transparent 100%);
}

.onboarding-header h2 {
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
  color: var(--accent-pink);
  margin-bottom: 8px;
}

.onboarding-subtitle {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.onboarding-body {
  padding: 25px 30px;
  min-height: 200px;
}

.onboarding-highlight {
  text-align: center;
}

.onboarding-highlight h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary-purple);
  margin-bottom: 16px;
}

.onboarding-highlight ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.onboarding-highlight li {
  padding: 10px 0;
  padding-left: 24px;
  position: relative;
  font-size: 14px;
  color: var(--text-medium);
  border-bottom: 1px solid var(--border-color);
}

.onboarding-highlight li:last-child {
  border-bottom: none;
}

.onboarding-highlight li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary-purple);
  font-weight: bold;
}

.onboarding-highlight li strong {
  color: var(--accent-pink);
}

.onboarding-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

/* Demo UI elements */
.onboarding-demo {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.demo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  flex-wrap: wrap;
}

.demo-row:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 8px;
  padding-bottom: 16px;
}

.demo-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  min-width: 70px;
}

.demo-input {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-highlight);
  color: var(--text-medium);
  font-size: 14px;
  font-weight: 500;
}

.demo-weight {
  padding: 6px 12px;
  border-radius: 4px;
  min-width: 50px;
}

.demo-rep {
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

.demo-rep.filled {
  background: var(--primary-purple);
  border-color: var(--primary-purple);
  color: white;
}

.demo-sets {
  display: flex;
  gap: 6px;
}

.demo-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin-left: auto;
}

.onboarding-tip {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  padding: 12px;
  background: rgba(155, 123, 184, 0.1);
  border-radius: 6px;
  margin-top: 12px;
}

/* Video demo */
.onboarding-video-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

.demo-exercise-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-bright);
}

.demo-video-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--accent-pink) 100%);
  border-radius: 50%;
  font-size: 12px;
  color: white;
  animation: videoPulse 2s ease-in-out infinite;
}

.onboarding-explanation {
  font-size: 14px;
  color: var(--text-medium);
  line-height: 1.6;
  text-align: center;
  margin-bottom: 8px;
}

.highlight-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--accent-pink) 100%);
  border-radius: 50%;
  font-size: 9px;
  color: white;
  vertical-align: middle;
  margin: 0 2px;
}

/* RPE demo */
.onboarding-rpe-demo {
  text-align: left;
}

.demo-rpe-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.demo-rpe-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.demo-rpe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}

.demo-rpe-easy {
  background: #4CAF50;
}

.demo-rpe-moderate {
  background: #FBB724;
  color: #000;
}

.demo-rpe-hard {
  background: #FF9800;
}

.demo-rpe-failed {
  background: #F44336;
}

.demo-rpe-label {
  font-size: 13px;
  color: var(--text-medium);
  line-height: 1.4;
}

.demo-rpe-label strong {
  color: var(--text-bright);
}

/* Badges demo */
.onboarding-badges {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demo-badge-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.demo-week-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-medium);
  min-width: 100px;
}

.demo-week-badge.complete {
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.15);
}

.demo-week-badge.complete .week-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #4ade80;
  color: white;
  border-radius: 50%;
  font-size: 10px;
}

.demo-week-badge.in-progress {
  border-color: var(--primary-purple);
  background: rgba(155, 123, 184, 0.15);
}

.demo-week-badge .week-progress-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: conic-gradient(var(--primary-purple) var(--progress), rgba(155, 123, 184, 0.3) var(--progress));
}

.demo-day-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: rgba(155, 123, 184, 0.2);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-purple);
  min-width: 100px;
}

.demo-badge-label {
  font-size: 12px;
  color: var(--text-dim);
}

/* Footer */
.onboarding-footer {
  padding: 20px 30px 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.onboarding-dots {
  display: flex;
  gap: 8px;
}

.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
  cursor: pointer;
  transition: all 0.2s ease;
}

.onboarding-dot:hover {
  background: var(--text-dim);
}

.onboarding-dot.active {
  background: var(--primary-purple);
  width: 24px;
  border-radius: 4px;
}

.onboarding-actions {
  display: flex;
  gap: 12px;
  width: 100%;
}

.onboarding-btn {
  flex: 1;
  padding: 14px 24px;
  border: 1px solid var(--border-color);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.onboarding-btn.secondary {
  background: transparent;
  color: var(--text-dim);
}

.onboarding-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-medium);
}

.onboarding-btn.primary {
  background: var(--primary-purple);
  border-color: var(--primary-purple);
  color: white;
}

.onboarding-btn.primary:hover {
  background: var(--accent-pink);
  border-color: var(--accent-pink);
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(155, 123, 184, 0.4);
}

.onboarding-skip {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 12px;
  cursor: pointer;
  padding: 8px 16px;
  transition: color 0.2s ease;
}

.onboarding-skip:hover {
  color: var(--text-dim);
}

@media (max-width: 600px) {
  .onboarding-content {
    max-height: 95vh;
  }

  .onboarding-header {
    padding: 20px;
  }

  .onboarding-header h2 {
    font-size: 1.75rem;
  }

  .onboarding-body {
    padding: 20px;
    min-height: 180px;
  }

  .demo-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .demo-hint {
    margin-left: 0;
    margin-top: 4px;
  }

  .onboarding-footer {
    padding: 15px 20px 20px;
  }

  .onboarding-btn {
    padding: 12px 16px;
    font-size: 12px;
  }
}

@media print {
  .onboarding-modal {
    display: none !important;
  }
}

/* ===== HELP BUTTON ===== */
.help-btn {
  position: fixed;
  bottom: 30px;
  left: 76px; /* Positioned right of Instagram icon (30px + 36px + 10px gap) */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: all 0.3s ease;
}

.help-btn:hover {
  background: var(--primary-purple);
  border-color: var(--primary-purple);
  color: white;
  transform: scale(1.1);
}

.help-btn svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 768px) {
  .help-btn {
    bottom: 20px;
    left: 60px; /* Adjust for mobile Instagram position */
    width: 32px;
    height: 32px;
  }

  .help-btn svg {
    width: 16px;
    height: 16px;
  }

  /* Also adjust Instagram for mobile if needed */
  .fixed-social {
    bottom: 20px;
    left: 20px;
    width: 32px;
    height: 32px;
  }

  .fixed-social svg {
    width: 16px;
    height: 16px;
  }
}

@media print {
  .help-btn {
    display: none !important;
  }
}

/* ===== WELCOME BACK MODAL ===== */
.welcome-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10003; /* Above onboarding */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.welcome-modal.hidden {
  opacity: 0;
  pointer-events: none;
}

.welcome-content {
  background: var(--bg-card, #111111);
  border: 1px solid rgba(155, 123, 184, 0.3);
  max-width: 400px;
  width: 100%;
  text-align: center;
  animation: modalSlideIn 0.4s ease;
  border-radius: 8px;
  overflow: hidden;
}

.welcome-header {
  padding: 32px 24px 16px;
  background: linear-gradient(135deg, rgba(155, 123, 184, 0.1) 0%, transparent 100%);
}

.welcome-icon-wrapper {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: rgba(155, 123, 184, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-icon {
  width: 32px;
  height: 32px;
  color: var(--primary-purple);
}

.welcome-header h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
  color: var(--text-bright);
}

.welcome-subtitle {
  font-size: 1.1rem;
  color: var(--primary-purple);
  margin: 0;
}

.welcome-body {
  padding: 24px;
}

.welcome-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  font-size: 0.95rem;
  color: var(--text-dim);
}

.welcome-preview .preview-week,
.welcome-preview .preview-day {
  color: var(--text-bright);
}

.welcome-preview .preview-separator {
  color: var(--primary-purple);
}

.welcome-preview .preview-progress {
  color: var(--primary-purple);
  font-weight: 500;
}

.welcome-actions {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.welcome-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.welcome-btn.primary {
  background: var(--primary-purple);
  color: white;
}

.welcome-btn.primary:hover {
  background: #8a6aa7;
  transform: translateY(-1px);
}

.welcome-btn.primary svg {
  width: 18px;
  height: 18px;
}

.welcome-btn.secondary {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border-color);
}

.welcome-btn.secondary:hover {
  color: var(--text-bright);
  border-color: var(--text-dim);
}

/* Day highlight animation for "Let's Go" scroll */
.workout-day.highlight-day {
  animation: dayHighlight 2s ease;
}

@keyframes dayHighlight {
  0% { box-shadow: 0 0 0 0 rgba(155, 123, 184, 0.7); }
  25% { box-shadow: 0 0 0 4px rgba(155, 123, 184, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(155, 123, 184, 0.2); }
  100% { box-shadow: 0 0 0 0 rgba(155, 123, 184, 0); }
}

/* Mobile adjustments for welcome modal */
@media (max-width: 768px) {
  .welcome-content {
    max-width: 340px;
  }

  .welcome-header {
    padding: 24px 20px 12px;
  }

  .welcome-header h2 {
    font-size: 1.5rem;
  }

  .welcome-subtitle {
    font-size: 1rem;
  }

  .welcome-body {
    padding: 16px;
  }

  .welcome-actions {
    padding: 0 16px 20px;
  }
}

/* Print - hide welcome modal */
@media print {
  .welcome-modal {
    display: none !important;
  }
}

/* ===== CELEBRATION TOASTS ===== */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.celebration-toast {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(20, 20, 25, 0.98) 0%, rgba(30, 25, 35, 0.98) 100%);
  border: 1px solid rgba(155, 123, 184, 0.4);
  border-radius: 12px;
  padding: 16px 20px;
  min-width: 300px;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(155, 123, 184, 0.2);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  pointer-events: auto;
}

.celebration-toast.show {
  transform: translateX(0);
  opacity: 1;
}

.celebration-toast.hide {
  transform: translateX(120%);
  opacity: 0;
}

.celebration-toast .toast-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.celebration-toast .toast-content {
  flex: 1;
  min-width: 0;
}

.celebration-toast .toast-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  color: #FFD700;
  margin-bottom: 4px;
}

.pr-toast .toast-title {
  background: linear-gradient(90deg, #FFD700, #FFA500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.milestone-toast .toast-title {
  color: var(--accent-pink);
}

.celebration-toast .toast-message {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 2px;
}

.celebration-toast .toast-subtitle {
  font-size: 12px;
  color: var(--text-dim);
}

/* PR Toast glow effect */
.pr-toast {
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(255, 215, 0, 0.2),
              0 0 20px rgba(255, 215, 0, 0.1);
}

/* Error Toast styling */
.error-toast {
  border-color: rgba(255, 100, 100, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(255, 100, 100, 0.2);
}

.error-toast .toast-title {
  color: #ff8a8a;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }

  .celebration-toast {
    min-width: unset;
    max-width: unset;
    width: 100%;
    padding: 14px 16px;
  }

  .celebration-toast .toast-icon {
    font-size: 28px;
  }

  .celebration-toast .toast-title {
    font-size: 14px;
  }

  .celebration-toast .toast-message {
    font-size: 14px;
  }
}

/* Print - hide toasts */
@media print {
  .toast-container {
    display: none !important;
  }
}

/* ===== CONFETTI ANIMATION ===== */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10002;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -10px;
  left: var(--x);
  opacity: 0;
  animation: confettiFall 2.5s ease-out var(--delay) forwards;
}

.confetti-piece:nth-child(odd) {
  width: 8px;
  height: 14px;
  border-radius: 2px;
}

.confetti-piece:nth-child(even) {
  width: 12px;
  height: 8px;
  border-radius: 50%;
}

@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(var(--rotation));
  }
}

/* ===== PR BADGE ===== */
.pr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 165, 0, 0.1) 100%);
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: #FFD700;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  white-space: nowrap;
}

.pr-badge::before {
  content: '★';
  font-size: 8px;
}

/* Mobile PR badge */
@media (max-width: 768px) {
  .pr-badge {
    font-size: 9px;
    padding: 2px 6px;
    margin-left: 6px;
  }
}

/* Print - show PR badge but simpler */
@media print {
  .pr-badge {
    background: none;
    border: 1px solid #999;
    color: #666;
  }

  .confetti-container {
    display: none !important;
  }
}

/* ===== STATS MODAL ===== */
.stats-btn {
  position: fixed;
  bottom: 30px;
  right: 84px;
  width: 44px;
  height: 44px;
  background: rgba(155, 123, 184, 0.15);
  border: 1px solid rgba(155, 123, 184, 0.3);
  border-radius: 50%;
  color: var(--primary-purple);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1000;
}

.stats-btn svg {
  width: 20px;
  height: 20px;
}

.stats-btn:hover {
  background: rgba(155, 123, 184, 0.3);
  border-color: var(--primary-purple);
  transform: scale(1.05);
}

.stats-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.stats-modal.hidden {
  opacity: 0;
  pointer-events: none;
}

.stats-content {
  background: var(--bg-card, #111111);
  border: 1px solid rgba(155, 123, 184, 0.3);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideIn 0.4s ease;
  position: relative;
}

.stats-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 28px;
  cursor: pointer;
  padding: 5px 10px;
  line-height: 1;
  transition: color 0.2s ease;
  z-index: 1;
}

.stats-modal-close:hover {
  color: #fff;
}

.stats-header {
  padding: 30px 30px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(155, 123, 184, 0.15) 0%, transparent 100%);
}

.stats-header h2 {
  font-family: 'Dancing Script', cursive;
  font-size: 2.5rem;
  color: #d4a5c9;
  margin-bottom: 8px;
}

.stats-subtitle {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.stats-body {
  padding: 20px 30px 30px;
}

.stats-section {
  margin-bottom: 30px;
}

.stats-section:last-child {
  margin-bottom: 0;
}

.stats-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 15px;
}

/* Overall Progress */
.stats-overall {
  text-align: center;
  padding: 20px;
  background: rgba(155, 123, 184, 0.1);
  border: 1px solid rgba(155, 123, 184, 0.2);
  margin-bottom: 25px;
}

.stats-overall-percent {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 4rem;
  color: var(--primary-purple);
  line-height: 1;
  margin-bottom: 5px;
}

.stats-overall-label {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 15px;
}

.stats-overall-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.stats-overall-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-purple), var(--accent-pink));
  border-radius: 4px;
  transition: width 0.5s ease;
}

.stats-overall-detail {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.stats-overall-detail strong {
  color: var(--primary-purple);
}

/* Weekly Breakdown */
.stats-week-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stats-week-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stats-week-label {
  width: 50px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.stats-week-bar {
  flex: 1;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.stats-week-fill {
  height: 100%;
  background: var(--primary-purple);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.stats-week-row.complete .stats-week-fill {
  background: linear-gradient(90deg, #4ade80, #22c55e);
}

.stats-week-row.in-progress .stats-week-fill {
  background: linear-gradient(90deg, var(--primary-purple), var(--accent-pink));
}

.stats-week-percent {
  width: 45px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
}

.stats-week-row.complete .stats-week-percent {
  color: #4ade80;
}

.stats-week-check {
  color: #4ade80;
  margin-left: 4px;
}

/* Exercise Progress */
.stats-exercise-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stats-exercise-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 15px;
  border-radius: 4px;
}

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

.stats-exercise-name {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.stats-exercise-pr {
  font-size: 12px;
  font-weight: 600;
  color: #FFD700;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stats-exercise-pr::before {
  content: '\2605';
}

.stats-exercise-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 50px;
  padding-top: 5px;
}

.stats-chart-bar {
  flex: 1;
  background: rgba(155, 123, 184, 0.3);
  border-radius: 2px 2px 0 0;
  min-height: 4px;
  position: relative;
  transition: background 0.2s ease;
}

.stats-chart-bar:hover {
  background: var(--primary-purple);
}

.stats-chart-bar.is-pr {
  background: linear-gradient(180deg, #FFD700 0%, rgba(255, 215, 0, 0.5) 100%);
}

.stats-chart-bar::after {
  content: attr(data-label);
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

.stats-chart-tooltip {
  display: none;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 10;
}

.stats-chart-bar:hover .stats-chart-tooltip {
  display: block;
}

.stats-exercise-empty {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: 20px;
}

/* Milestones */
.stats-milestone-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stats-milestone {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.stats-milestone.achieved {
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

.stats-milestone-icon {
  font-size: 16px;
}

.stats-milestone.achieved .stats-milestone-icon {
  filter: none;
}

.stats-milestone:not(.achieved) .stats-milestone-icon {
  filter: grayscale(1);
  opacity: 0.5;
}

.stats-milestone-text {
  font-weight: 500;
}

.stats-no-data {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.4);
}

.stats-no-data p {
  margin-bottom: 10px;
}

.stats-no-data-icon {
  font-size: 48px;
  margin-bottom: 15px;
  opacity: 0.5;
}

/* Mobile adjustments for stats modal */
@media (max-width: 768px) {
  .print-btn {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }

  .print-btn svg {
    width: 18px;
    height: 18px;
  }

  .stats-btn {
    right: 70px;
    bottom: 20px;
    width: 40px;
    height: 40px;
  }

  .stats-btn svg {
    width: 18px;
    height: 18px;
  }

  .stats-modal {
    padding: 10px;
  }

  .stats-content {
    max-height: 95vh;
  }

  .stats-header {
    padding: 25px 20px 15px;
  }

  .stats-header h2 {
    font-size: 2rem;
  }

  .stats-body {
    padding: 15px 20px 25px;
  }

  .stats-overall {
    padding: 15px;
  }

  .stats-overall-percent {
    font-size: 3rem;
  }

  .stats-week-row {
    gap: 8px;
  }

  .stats-week-label {
    width: 40px;
    font-size: 11px;
  }

  .stats-week-percent {
    width: 40px;
    font-size: 11px;
  }

  .stats-exercise-chart {
    height: 40px;
  }

  .stats-milestone-list {
    gap: 8px;
  }

  .stats-milestone {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* Print - hide stats modal */
@media print {
  .stats-modal,
  .stats-btn {
    display: none !important;
  }
}

/* ===== OFFLINE INDICATOR ===== */
.offline-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
  color: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 10001;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  border-bottom: 2px solid var(--primary-purple);
}

.offline-indicator.show {
  transform: translateY(0);
}

.offline-icon {
  display: flex;
  align-items: center;
  animation: pulse-offline 2s infinite;
}

.offline-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--accent-pink);
}

@keyframes pulse-offline {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.offline-text {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ===== UPDATE AVAILABLE BANNER ===== */
.update-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(150%);
  background: linear-gradient(135deg, var(--primary-purple) 0%, #7a5f99 100%);
  color: #fff;
  padding: 12px 20px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 10001;
  box-shadow: 0 4px 20px rgba(155, 123, 184, 0.4);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.update-banner.show {
  transform: translateX(-50%) translateY(0);
}

.update-text {
  font-size: 14px;
  font-weight: 500;
}

.update-btn {
  background: #fff;
  color: var(--primary-purple);
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.update-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
}

.update-dismiss {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.update-dismiss:hover {
  opacity: 1;
}

.update-dismiss svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
}

/* ===== INSTALL PROMPT ===== */
.install-prompt {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 400px;
  background: var(--bg-card, #111111);
  border: 1px solid rgba(155, 123, 184, 0.3);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 9999;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(150%);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.install-prompt.show {
  transform: translateY(0);
}

.install-prompt.hidden {
  display: none;
}

.install-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--accent-pink) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.install-icon svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
}

.install-content {
  flex: 1;
  min-width: 0;
}

.install-content h3 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.install-content p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.install-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.install-btn {
  background: linear-gradient(135deg, var(--primary-purple) 0%, #7a5f99 100%);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.install-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(155, 123, 184, 0.4);
}

.install-dismiss {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
}

.install-dismiss:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* ===== SYNC TOAST ===== */
.sync-toast {
  background: linear-gradient(135deg, #2d5a2d 0%, #1a3a1a 100%) !important;
  border: 1px solid rgba(76, 175, 80, 0.5) !important;
}

.sync-toast .toast-icon {
  color: #4CAF50;
}

/* ===== VIDEO CACHE INDICATOR ===== */
.video-cache-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
}

.video-cache-indicator.cached {
  background: rgba(76, 175, 80, 0.8);
}

.video-cache-indicator svg {
  width: 14px;
  height: 14px;
}

.video-cache-btn {
  background: rgba(155, 123, 184, 0.9);
  border: none;
  color: #fff;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s, transform 0.2s;
}

.video-cache-btn:hover {
  background: var(--primary-purple);
  transform: scale(1.05);
}

.video-cache-btn.caching {
  opacity: 0.7;
  pointer-events: none;
}

.video-cache-btn svg {
  width: 14px;
  height: 14px;
}

/* Responsive: stack install prompt on very small screens */
@media (max-width: 400px) {
  .install-prompt {
    flex-direction: column;
    text-align: center;
    left: 10px;
    right: 10px;
  }

  .install-actions {
    flex-direction: row;
    width: 100%;
    justify-content: center;
  }
}

/* ===== WARM-UP SECTION ===== */
.warmup-section {
  background: linear-gradient(135deg, rgba(155, 123, 184, 0.15) 0%, rgba(212, 165, 201, 0.1) 100%);
  border: 1px solid rgba(155, 123, 184, 0.3);
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}

.warmup-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

.warmup-header:hover {
  background: rgba(155, 123, 184, 0.1);
}

.warmup-header:focus {
  outline: none;
  background: rgba(155, 123, 184, 0.15);
}

.warmup-header:focus-visible {
  outline: 2px solid var(--primary-purple);
  outline-offset: -2px;
}

.warmup-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.warmup-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 1.5px;
  color: var(--accent-pink);
  flex-grow: 1;
}

.warmup-duration {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.warmup-toggle-icon {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease;
}

.warmup-section.collapsed .warmup-toggle-icon {
  transform: rotate(0deg);
}

.warmup-content {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: warmupSlideDown 0.2s ease;
}

.warmup-content[hidden] {
  display: none;
}

@keyframes warmupSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.warmup-exercise {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 16px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.warmup-exercise-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  grid-column: 1;
  grid-row: 1;
}

.warmup-exercise-reps {
  font-size: 0.85rem;
  color: var(--primary-purple);
  font-weight: 500;
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}

.warmup-exercise-notes {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  grid-column: 1 / -1;
  grid-row: 2;
  line-height: 1.4;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .warmup-header {
    padding: 12px 14px;
    gap: 10px;
  }

  .warmup-title {
    font-size: 0.9rem;
  }

  .warmup-duration {
    font-size: 0.7rem;
  }

  .warmup-content {
    padding: 0 14px 14px;
    gap: 8px;
  }

  .warmup-exercise {
    padding: 8px 10px;
  }

  .warmup-exercise-name {
    font-size: 0.85rem;
  }

  .warmup-exercise-reps {
    font-size: 0.8rem;
  }

  .warmup-exercise-notes {
    font-size: 0.7rem;
  }
}

/* Print - hide warm-up section */
@media print {
  .warmup-section {
    display: none !important;
  }
}

/* Print - hide PWA elements */
@media print {
  .offline-indicator,
  .update-banner,
  .install-prompt,
  .video-cache-indicator,
  .video-cache-btn {
    display: none !important;
  }
}

/* ===== MOBILE BOTTOM NAVIGATION ===== */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: rgba(17, 17, 17, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(155, 123, 184, 0.25);
  z-index: 8999;
  align-items: center;
  justify-content: space-between;
  padding-left: 12px;
  padding-right: 12px;
  gap: 8px;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-bottom-nav.visible {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
  }
}

@media print {
  .mobile-bottom-nav {
    display: none !important;
  }
}

/* Timer section (left) */
.mobile-nav-timer {
  position: relative;
  flex-shrink: 0;
}

.nav-timer-display {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(155, 123, 184, 0.15);
  border: 1px solid rgba(155, 123, 184, 0.3);
  border-radius: 20px;
  padding: 8px 12px;
  color: var(--text-medium);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
}

.nav-timer-display:hover,
.nav-timer-display:active {
  background: rgba(155, 123, 184, 0.25);
  border-color: var(--primary-purple);
}

.nav-timer-display.active {
  background: rgba(155, 123, 184, 0.25);
  border-color: var(--primary-purple);
  color: var(--text-bright);
}

.nav-timer-display.disabled {
  opacity: 0.4;
  cursor: default;
}

.nav-timer-icon {
  font-size: 16px;
}

.nav-timer-time {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  min-width: 36px;
  text-align: center;
}

.nav-timer-chevron {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: var(--text-dim);
}

.nav-timer-display.expanded .nav-timer-chevron {
  transform: rotate(180deg);
}

/* Timer controls popover */
.nav-timer-controls {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--bg-card);
  border: 1px solid rgba(155, 123, 184, 0.3);
  border-radius: 12px;
  padding: 12px;
  min-width: 200px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-timer-controls.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-timer-progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}

.nav-timer-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-purple), var(--accent-pink));
  border-radius: 3px;
  transition: width 0.3s linear;
}

.nav-timer-buttons {
  display: flex;
  gap: 6px;
}

.nav-timer-btn {
  flex: 1;
  padding: 8px 10px;
  background: rgba(155, 123, 184, 0.15);
  border: 1px solid rgba(155, 123, 184, 0.3);
  border-radius: 8px;
  color: white;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-timer-btn:hover,
.nav-timer-btn:active {
  background: rgba(155, 123, 184, 0.25);
}

.nav-timer-btn.skip {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Context section (center) */
.mobile-nav-context {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-align: center;
}

.nav-context-exercise {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.nav-context-progress {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

/* Exercise navigation (right) */
.mobile-nav-exercise {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.nav-exercise-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(155, 123, 184, 0.15);
  border: 1px solid rgba(155, 123, 184, 0.3);
  border-radius: 50%;
  color: var(--text-medium);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-exercise-btn:hover,
.nav-exercise-btn:active {
  background: rgba(155, 123, 184, 0.3);
  border-color: var(--primary-purple);
  color: var(--text-bright);
}

.nav-exercise-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.nav-exercise-btn.all-complete {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.4);
  color: #4ade80;
}

/* Scroll to exercise highlight animation */
.exercise-row.scroll-highlight {
  animation: exerciseHighlight 1.5s ease;
}

@keyframes exerciseHighlight {
  0% {
    background: transparent;
    box-shadow: none;
  }
  20% {
    background: rgba(155, 123, 184, 0.15);
    box-shadow: 0 0 20px rgba(155, 123, 184, 0.3);
  }
  100% {
    background: transparent;
    box-shadow: none;
  }
}

/* When mobile nav is visible, add padding to body to prevent content from being hidden */
body.mobile-nav-active {
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
}

/* Hide desktop rest timer on mobile when mobile nav is active */
@media (max-width: 768px) {
  body.mobile-nav-active .rest-timer {
    display: none !important;
  }
}